:root { --moss:#101910; --leaf:#1a2820; --wax:#efe6d2; --gold:#e6b15a; --line:#314233; }
* { box-sizing:border-box; }
body { margin:0; background:var(--moss); color:var(--wax); font:19px/1.7 Palatino, "Palatino Linotype", Georgia, serif; }
a { color:inherit; text-decoration:none; }
.ruler { display:flex; border-bottom:1px solid var(--line); background:var(--leaf); position:sticky; top:0; }
.ruler a { flex:1; padding:16px 8px 12px; text-align:center; border-right:1px solid var(--line); color:var(--wax); }
.ruler a:last-child { border-right:0; }
.ruler b { display:block; font:12px/1 "Avenir Next", sans-serif; letter-spacing:.22em; color:var(--gold); margin-bottom:6px; }
.ruler span { font-size:15px; }
.ruler a.here { background:#243328; }
.read { max-width:46rem; margin:0 auto; padding:42px 22px 80px; }
.read h1 { font-weight:500; font-size:clamp(2.1rem, 4vw, 3.3rem); line-height:1.05; letter-spacing:-.03em; margin:8px 0 18px; }
.lead { font-size:1.15rem; color:#f6edd6; }
.read p { margin:0 0 16px; }
.read h2 { margin:32px 0 8px; font-size:1.45rem; font-weight:500; }
.read figure { float:right; width:min(46%, 300px); margin:8px 0 12px 28px; }
.read figure img { width:100%; height:220px; object-fit:cover; display:block; }
.read figcaption { font:13px/1.4 "Avenir Next", sans-serif; color:#b7c4a8; margin-top:6px; }
.wide { width:100%; height:380px; object-fit:cover; display:block; }
.foot { clear:both; border-top:1px solid var(--line); padding:18px 22px 28px; font:13px/1.4 "Avenir Next", sans-serif; color:#b7c4a8; display:flex; justify-content:space-between; gap:12px; }
@media (max-width:720px) {
  .ruler { flex-wrap:wrap; }
  .ruler a { flex:1 1 50%; }
  .read figure { float:none; width:100%; margin:12px 0 16px; }
  .wide { height:220px; }
}