:root { --ink:#d5e2e8; --deep:#041014; --water:#07161c; --line:#1c3a44; --sand:#e8a54b; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--water); color:var(--ink); }
body { font:18px/1.65 "Iowan Old Style", Palatino, Georgia, serif; }
a { color:inherit; }
.rail {
  position:fixed; inset:0 auto 0 0; width:232px; background:var(--deep);
  border-right:1px solid var(--line); padding:26px 18px 18px;
  display:flex; flex-direction:column; gap:18px;
}
.mark { display:flex; gap:10px; align-items:center; text-decoration:none; }
.mark img { width:36px; height:36px; }
.mark b { display:block; font:600 15px/1.15 "Avenir Next Condensed", "Arial Narrow", sans-serif; letter-spacing:.04em; }
.mark > span > span { display:block; font:12px/1.3 "Avenir Next", sans-serif; color:#7eb8c9; margin-top:3px; }
.rail nav { display:flex; flex-direction:column; gap:4px; }
.rail nav a {
  text-decoration:none; padding:8px 10px; border-left:3px solid transparent;
  font:15px/1.3 "Avenir Next", sans-serif;
}
.rail nav a.on { border-left-color:var(--sand); color:#fff; }
.today { margin-top:auto; border-top:1px solid var(--line); padding-top:14px; font:13px/1.45 "Avenir Next", sans-serif; color:#8fbfcc; }
.today strong { display:block; color:var(--sand); font-size:22px; letter-spacing:-.03em; margin:4px 0; }
.stage { margin-left:232px; }
.bleed { width:100%; height:420px; object-fit:cover; display:block; }
.story { max-width:740px; padding:36px 40px 72px; }
.story h1 { margin:0 0 12px; font-weight:560; font-size:clamp(2rem, 4vw, 3.1rem); letter-spacing:-.03em; line-height:1.05; color:#f4f8f9; }
.kicker { margin:0 0 10px; font:12px/1 "Avenir Next", sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--sand); }
.story p { margin:0 0 16px; }
.story h2 { margin:28px 0 8px; font-size:1.35rem; color:#f4f8f9; }
.shot { width:100%; height:320px; object-fit:cover; margin:8px 0 18px; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:8px 0 18px; }
.pair figure { margin:0; }
.pair img { width:100%; height:240px; object-fit:cover; }
.pair figcaption { font:13px/1.4 "Avenir Next", sans-serif; color:#8fbfcc; padding-top:6px; }
@media (max-width:800px) {
  .rail { position:static; width:auto; border-right:0; border-bottom:1px solid var(--line); }
  .stage { margin-left:0; }
  .rail nav { flex-direction:row; flex-wrap:wrap; }
  .story { padding:24px 18px 48px; }
  .pair { grid-template-columns:1fr; }
  .bleed { height:240px; }
}