/* ==========================================================================
   My Portable Life — design system
   Ported from _design/claude-design/*.dc.html (Claude Design) into semantic
   classes. The mockups use inline styles; values here are taken from them.

   Type:    DM Serif Display (display) + Space Grotesk (everything else),
            self-hosted from /assets/fonts (no third-party requests).
   Colour:  paper #f2f3f1 / ink #3a3d42, dark panels, one accent per
            destination (see .a-teal etc).
   ========================================================================== */

/* ---- fonts (self-hosted; subset latin + latin-ext) --------------------- */
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/space-grotesk-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/space-grotesk-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/space-grotesk-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/space-grotesk-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/space-grotesk-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/space-grotesk-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-grotesk-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-grotesk-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---- tokens ------------------------------------------------------------ */
:root{
  --paper:#f2f3f1;
  --ink:#3a3d42;          /* body copy */
  --ink-strong:#15171c;   /* headings on paper */
  --muted:#6b6e73;      /* was #8a8c90 — 3.03:1 on paper, fails WCAG AA (4.5:1) */
  --line:#dcdedb;
  --dark:#161511;         /* footer / dark panels */
  --dark-2:#15171c;
  --on-dark:#f4f6fa;
  --on-dark-mute:#b0b3b8;
  --panel:#1e3a63;        /* navy panels */
  --panel-dark:#16294a;   /* text on the light button inside a navy panel */
  --panel-soft:#dd8a5c;   /* decorative rules only — fails AA as small text */
  --panel-text:#c06a38;   /* darker: for the TOC counter on paper, where the
                             lighter --panel-kicker orange fails AA */
  --panel-kicker:#dc8a5c; /* kicker text on navy panels site-wide */
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --sans:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --wrap:1360px;          /* full layout */
  --read:1100px;          /* reading measure container */
  --pad:40px;
  /* The site accent is COBALT — the blue in the kickers, the "Portable" in
     the brand, links and buttons. Six of the seven mockups fall back to
     P.cobalt, so this is the design's real default. A page can override it
     with an .a-* class on <body>. */
  --accent:#2f5aa8; --accent-dark:#244a8c; --accent-soft:#93b2e6;
}
/* per-destination accents, from the design's palette map */
.a-teal      {--accent:#1f6f5c;--accent-dark:#17564a;--accent-soft:#7fd0bd}
.a-terracotta{--accent:#b8552f;--accent-dark:#973f1f;--accent-soft:#eda179}
.a-amber     {--accent:#b0812a;--accent-dark:#8f671c;--accent-soft:#e5bd72}
.a-cobalt    {--accent:#2f5aa8;--accent-dark:#244a8c;--accent-soft:#93b2e6}
.a-plum      {--accent:#8a3d6b;--accent-dark:#712f57;--accent-soft:#d091b8}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* every image is a <picture> (webp + jpeg fallback). Take the wrapper out of
   layout so sizing rules apply to the <img> as if it were a direct child —
   otherwise percentage heights resolve against an inline box and collapse. */
picture{display:contents}
/* overflow-x on <body> makes body the scroll container, so window.scrollY
   stops moving and scroll-driven UI (the solid header) never fires. Clip on
   <html> instead. */
html{overflow-x:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
::selection{background:var(--accent);color:var(--paper)}
.serif{font-family:var(--serif);font-weight:400}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.read{max-width:var(--read);margin:0 auto;padding:0 var(--pad)}

/* ---- header ------------------------------------------------------------ */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(to bottom,rgba(10,9,7,.5),transparent);
  transition:background .3s ease,box-shadow .3s ease}
.site-head.solid{background:var(--panel);box-shadow:0 1px 24px rgba(0,0,0,.18)}
.site-head .bar{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:82px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:13px}
.brand svg{flex:none;filter:drop-shadow(0 1px 8px rgba(0,0,0,.35))}
.brand .name{font-family:var(--serif);font-size:27px;letter-spacing:.01em;color:var(--paper);
  text-shadow:0 1px 16px rgba(0,0,0,.32);white-space:nowrap}
.brand .name em{color:var(--accent-soft);font-style:italic}
.site-head nav{display:flex;gap:38px;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper);text-shadow:0 1px 16px rgba(0,0,0,.32)}
.site-head nav a:hover{color:var(--accent-soft)}
.search-open{background:none;border:none;cursor:pointer;color:var(--paper);
  padding:0;display:flex;align-items:center;filter:drop-shadow(0 1px 12px rgba(0,0,0,.32))}
.search-open svg{width:17px;height:17px;fill:currentColor}
.search-open:hover{color:var(--accent-soft)}

/* ---- search overlay (built by main.js) ---------------------------------- */
.search-overlay{position:fixed;inset:0;background:rgba(12,11,9,.92);z-index:100;
  display:none;align-items:flex-start;justify-content:center;padding:10vh var(--pad) 40px;
  overflow-y:auto}
.search-panel{width:100%;max-width:640px;position:relative}
.search-close{position:absolute;top:-56px;right:0;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  color:var(--paper);font:300 24px/1 var(--sans);
  background:none;border:none;cursor:pointer;opacity:.75;
  transition:opacity .15s,background-color .15s}
.search-close:hover{opacity:1;background:rgba(255,255,255,.08)}
.search-input{width:100%;background:none;border:none;border-bottom:2px solid rgba(255,255,255,.3);
  color:var(--paper);font-family:var(--serif);font-size:clamp(24px,3.4vw,36px);
  padding:0 0 16px;outline:none}
.search-input::placeholder{color:rgba(255,255,255,.4)}
.search-input:focus{border-bottom-color:var(--accent-soft)}
.search-count{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-mute);margin:0 4px 10px}
.search-results{margin-top:28px;display:flex;flex-direction:column;gap:2px}
.search-result{display:block;padding:14px 16px;border-radius:10px;transition:background-color .15s}
.search-result:hover{background:rgba(255,255,255,.06)}
.search-result .tag{font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-soft)}
.search-result h3{font-family:var(--serif);font-size:20px;font-weight:400;
  color:var(--paper);margin:6px 0 4px}
.search-result p{font-size:14px;line-height:1.5;color:var(--on-dark-mute);
  max-width:60ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-empty{color:var(--on-dark-mute);font-size:15px;padding:16px 4px}

/* ---- hero -------------------------------------------------------------- */
.hero{position:relative;width:100%;overflow:hidden;background:#9d8f74}
.hero.tall{height:94vh;min-height:620px}      /* Home */
.hero.diary{height:92vh;min-height:580px}     /* Diary */
.hero.guide{height:88vh;min-height:580px}     /* Guide */
.hero.dest{height:42vh;min-height:360px}      /* Destination — shrunk from 82vh:
  a full-height photo before a 20+ story card grid was a lot of scroll
  before any real content ("shrink the hero") */
.hero.post{height:88vh;min-height:580px}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* tried mirroring this one so the lighthouse sits on the right (clearing
   the open sky on the left for the text) — reverted: it also flipped the
   seagull into the text zone it was meant to clear, and the composition
   read worse overall. */
.hero .rotator{position:absolute;inset:0;z-index:0}
.hero .rotator .frame{position:absolute;inset:0;opacity:0;transition:opacity 2.2s cubic-bezier(.4,0,.2,1)}
.hero .rotator .frame.active{opacity:1}
.hero .scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,18,15,.78),rgba(20,18,15,.05) 55%,rgba(20,18,15,.34))}
/* the rotating home hero: the text column (kicker/h1/standfirst, roughly
   the left two-thirds) needs real contrast against 5 very different
   photos, but a hero-wide darken was flattening photos that didn't need
   it. A soft radial concentrated behind the text does the job — most of
   each photo, especially the right third, stays untouched. Sized against
   the measured text bounding box (kicker top ~9% to CTA bottom ~88% of
   hero height, left edge to ~65% width), not guessed. */
.hero.tall .scrim{
  background:
    radial-gradient(ellipse 62% 78% at 4% 52%,rgba(10,11,15,.6),rgba(10,11,15,.32) 60%,rgba(10,11,15,0) 88%),
    linear-gradient(to top,rgba(20,18,15,.55),rgba(20,18,15,.04) 55%,rgba(20,18,15,.05))}
/* every diary/guide/post hero runs a different, auto-picked photo — none
   hand-vetted for text contrast the way the home rotation's 5 are — so
   this needs to hold up against anything, not just the specific photos
   above. Same fix, sized a little more generously and a touch darker
   since there's no per-photo tuning available here: kicker+h1(+meta)
   sits higher up a taller hero than home's kicker+h1+standfirst+button
   did, so the plain bottom fade below was leaving the kicker exposed
   (e.g. Ushuaia's overcast grey sky, where it was nearly invisible). */
.hero.diary .scrim,.hero.guide .scrim,.hero.post .scrim{
  background:
    radial-gradient(ellipse 64% 84% at 4% 46%,rgba(10,11,15,.68),rgba(10,11,15,.4) 62%,rgba(10,11,15,0) 90%),
    linear-gradient(to top,rgba(20,18,15,.6),rgba(20,18,15,.06) 55%,rgba(20,18,15,.1))}
/* Cerro Torre's boulder field measured both brighter and noticeably
   busier (higher local contrast) right behind the text than the other 4
   rotation photos — the shared radial above isn't quite enough there. */
.hero.tall .rotator[data-active="cerro-torre"] ~ .scrim{
  background:
    radial-gradient(ellipse 66% 82% at 4% 52%,rgba(8,9,12,.74),rgba(8,9,12,.46) 58%,rgba(8,9,12,0) 90%),
    linear-gradient(to top,rgba(20,18,15,.6),rgba(20,18,15,.08) 55%,rgba(20,18,15,.08))}
.hero .inner{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) 74px}
.hero .inner .wrap{padding:0}
/* breadcrumbs — same white+shadow treatment as the kicker below it, so it
   holds up over any photo (bright sky, overcast, whatever). The current
   page (last crumb) is never a link and is truncated — some post titles
   run to 90+ characters, too long for a one-line trail. */
.hero .crumbs{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.06em;color:#c7cdd6;text-shadow:0 1px 12px rgba(0,0,0,.45);
  margin-bottom:16px;max-width:100%}
.hero .crumbs a{color:#c7cdd6}
.hero .crumbs a:hover{color:var(--paper)}
.hero .crumbs .sep{opacity:.5}
.hero .crumbs [aria-current]{color:#8f96a1;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:36ch}
.hero .kicker{color:#e9edf2;text-shadow:0 1px 14px rgba(0,0,0,.45);margin-bottom:26px}
/* was #e9b48f (orange) — on a bright/overcast photo (e.g. Ushuaia's grey
   sky) that reads as barely-there; white with the shadow above holds up
   across any photo, the same reasoning as the scrim fix below */
.hero.guide .kicker,.hero.diary .kicker{letter-spacing:.24em;margin-bottom:22px}
.hero.guide h1,.hero.diary h1{font-size:clamp(44px,6vw,84px);max-width:20ch;
  color:var(--on-dark);margin-bottom:24px}
.hero .meta{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#d8dde6;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero h1{font-family:var(--serif);color:var(--paper);text-shadow:0 1px 16px rgba(0,0,0,.32);
  line-height:.98;letter-spacing:-.01em;text-wrap:balance;margin-bottom:30px}
.hero.tall h1{font-size:clamp(52px,7.5vw,108px);max-width:16ch}
.hero.post h1{font-size:clamp(40px,4.6vw,58px);max-width:22ch}
.hero h1 em{font-style:italic}
.hero .standfirst{font-size:17px;line-height:1.65;color:#efe9dd;max-width:52ch;
  text-shadow:0 1px 14px rgba(0,0,0,.45)}
/* the hero's standfirst and CTA sit on one baseline, button to the right */
.hero .foot{display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:24px}
.hero .meta{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#e9edf2;text-shadow:0 1px 14px rgba(0,0,0,.45);margin-top:22px}

/* small caps label used everywhere */
.kicker{font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent)}
.lnk{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;transition:gap .3s ease}
.lnk:hover{gap:18px}
.hero .lnk{color:var(--paper);margin-top:34px;text-shadow:0 1px 14px rgba(0,0,0,.45)}

/* ---- section heads -----------------------------------------------------
   Two kinds, both from the design:
   .panel-head  navy block, orange kicker + rule, big serif — for photo sections
   .rule-head   small caps over a heavy rule — for text/list sections        */
.section{padding:120px 0}    /* matches .pano/.featured/footer's 120px margin — see the adjacency rules below: whichever side ends up as the sole spacer in a pairing needs to be the same value on both, or some gaps land at 96px and others at 120px even with the doubling gone */
.section.tight{padding-top:56px}
/* two .section blocks stacked back to back (e.g. home's Destinations then
   Guides) would otherwise double up: this section's bottom 96px + the
   next one's top 96px = a 192px gap. One section's padding is enough. */
.section + .section{padding-top:0}
/* .section paired with .pano/.featured (either order): .pano/.featured
   carry their own 120px margin for when they open a page solo, and
   .section carries its own 120px padding — stacked together that's
   240px, wider than the ~120px rhythm everywhere else. Whichever one
   comes second gives way to the one that's already there. */
.section + .pano,.section + .featured{margin-top:0}
.pano + .section,.featured + .section{padding-top:0}
/* and the page's very last section, right before the footer: the footer
   already carries its own 120px margin-top, so whatever's above it
   doesn't also need its full bottom spacing — same 216px-vs-120px
   mismatch, just at the bottom of the page instead of mid-page. Covers
   both cases: a .section (zero its own padding-bottom) or .pano/.featured
   (zero the footer's margin-top instead, since their spacing is margin-
   based and needed when they're NOT last, e.g. Guides -> pano). */
main .section:last-of-type{padding-bottom:0}
main:has(>.pano:last-child)+.site-foot,main:has(>.featured:last-child)+.site-foot{margin-top:0}
.panel-head{background:var(--panel);padding:clamp(34px,4vw,52px);display:flex;
  align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.panel-head .kicker{font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--panel-kicker);margin-bottom:14px}
.panel-head .rule{width:48px;height:3px;background:var(--panel-soft);margin-bottom:20px}
.panel-head h1,.panel-head h2{font-family:var(--serif);font-size:clamp(40px,4.6vw,58px);
  line-height:.9;letter-spacing:-.02em;color:var(--on-dark);font-weight:400}
.panel-head .count{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#aeb9cc;white-space:nowrap}
.rule-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-bottom:18px;margin-bottom:4px}
.rule-head h2{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-strong)}
.rule-head .count{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}

/* ---- featured story ---------------------------------------------------- */
.featured{position:relative;margin:0 0 120px;display:grid;
  grid-template-columns:1.15fr 1fr;min-height:560px}
.featured .tile{min-height:560px;aspect-ratio:auto}
.featured .panel{background:var(--panel);display:flex;flex-direction:column;
  justify-content:center;padding:clamp(40px,6vw,88px)}
.featured .kicker{font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--panel-kicker);margin-bottom:16px}
.featured .rule{width:52px;height:3px;background:var(--panel-soft);margin-bottom:24px}
.featured h2{font-family:var(--serif);font-size:clamp(38px,4.4vw,58px);line-height:1;
  color:var(--paper);font-weight:400;margin-bottom:22px}
.featured p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.86);max-width:42ch;
  margin-bottom:30px}
/* packing list's "posted home" — kicker + a real quote, no h2/button, so
   the paragraph carries the same weight .quote-panel's big serif quote
   used to (that component is otherwise unused now this reuses .featured
   for the navy background David wanted). */
.featured.posted-home .panel p{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);
  line-height:1.3;color:var(--paper);max-width:38ch;margin-bottom:0}

/* featured carousel — several candidate journeys ship in the HTML so nav
   needs no fetches; JS jumps to one at random per load and slides on
   click. All slides sit side by side in .feat-track (flex, no wrap) and
   JS translateX's it by -100%*index — so the section's height is always
   the tallest slide (flex measures every child, not just the visible
   one), instead of jumping around as different-length blurbs come into
   view. The mobile single-column override targets every slide, not just
   .active, for the same reason. */
.featured.carousel{display:block;position:relative;overflow:hidden}
.featured.carousel .feat-track{display:flex;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.featured.carousel .feat-slide{flex:0 0 100%;min-width:0;
  display:grid;grid-template-columns:1.15fr 1fr}
.featured.carousel .feat-arrow{position:absolute;top:50%;transform:translateY(-50%);
  z-index:5;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(15,17,22,.45);padding:0;cursor:pointer;
  opacity:0;transition:opacity .3s ease,background .2s ease;
  display:flex;align-items:center;justify-content:center}
.featured.carousel .feat-arrow:hover{background:rgba(15,17,22,.78)}
.featured.carousel .feat-arrow.prev{left:24px}
.featured.carousel .feat-arrow.next{right:24px}
.featured.carousel:hover .feat-arrow,.featured.carousel .feat-arrow:focus-visible{opacity:1}
.featured.carousel .feat-arrow .chev{width:9px;height:9px;
  border-style:solid;border-color:var(--paper);border-width:0 2px 2px 0}
.featured.carousel .feat-arrow.prev .chev{transform:rotate(135deg)}
.featured.carousel .feat-arrow.next .chev{transform:rotate(-45deg)}
.featured.carousel .feat-count{position:absolute;right:32px;bottom:28px;z-index:5;
  font-size:11px;font-weight:700;letter-spacing:.16em;color:#aeb9cc}
.featured.carousel .feat-count .cur{color:var(--paper)}

.btn{display:inline-flex;align-items:center;gap:12px;background:var(--accent);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);padding:17px 28px;white-space:nowrap;width:fit-content;
  transition:background .25s ease,box-shadow .25s ease}
.btn:hover{background:var(--accent-dark);color:var(--paper);
  box-shadow:0 6px 18px rgba(21,23,28,.22)}
/* on a navy panel the button inverts: light fill, navy text */
.btn.light{background:#f7f5f0;color:var(--panel-dark);padding:16px 26px;align-self:flex-start}
.btn.light:hover{background:#fff;color:var(--panel-dark);
  box-shadow:0 6px 18px rgba(0,0,0,.16)}

/* ---- mosaic (spanning photo grid) -------------------------------------- */
.mosaic{display:grid;gap:12px;grid-auto-rows:230px}
.mosaic.rows-220{grid-auto-rows:220px}
.mosaic.cols-3{grid-template-columns:2fr 1fr 1fr}
.mosaic.cols-4{grid-template-columns:repeat(4,1fr)}
.mosaic .tile{aspect-ratio:auto}
/* the spanning nth-child pattern below assumes a full 6 (cols-3) or 8
   (cols-4) tiles; a gallery with fewer photos falls back to a plain even
   grid instead of leaving blank voids where the missing tiles would sit */
.mosaic.sparse{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  grid-auto-rows:260px}
.mosaic.sparse .tile{grid-column:auto !important;grid-row:auto !important}
/* fixed span patterns, straight from the mockups */
.mosaic.cols-3 .tile:nth-child(1){grid-column:1/2;grid-row:1/3}
.mosaic.cols-3 .tile:nth-child(2){grid-column:2/3;grid-row:1/2}
.mosaic.cols-3 .tile:nth-child(3){grid-column:3/4;grid-row:1/2}
.mosaic.cols-3 .tile:nth-child(4){grid-column:2/3;grid-row:2/3}
.mosaic.cols-3 .tile:nth-child(5){grid-column:3/4;grid-row:2/3}
.mosaic.cols-3 .tile:nth-child(6){grid-column:1/4;grid-row:3/4}
.mosaic.cols-4 .tile:nth-child(1){grid-column:1/3;grid-row:1/3}
.mosaic.cols-4 .tile:nth-child(2){grid-column:3/4;grid-row:1/2}
.mosaic.cols-4 .tile:nth-child(3){grid-column:4/5;grid-row:1/2}
.mosaic.cols-4 .tile:nth-child(4){grid-column:3/4;grid-row:2/3}
.mosaic.cols-4 .tile:nth-child(5){grid-column:4/5;grid-row:2/3}
.mosaic.cols-4 .tile:nth-child(6){grid-column:1/2;grid-row:3/4}
.mosaic.cols-4 .tile:nth-child(7){grid-column:2/3;grid-row:3/4}
.mosaic.cols-4 .tile:nth-child(8){grid-column:3/5;grid-row:3/4}
/* TRIAL, Ushuaia only — "the bottom library of photos": a big photo with
   its two smaller ones stacked on top of each other beside it (not side
   by side), 3 equal photos on the next line, then the mirror image. Same
   mechanics as cols-3/cols-4 above (real captions, scrim, lightbox), but
   each row is its OWN grid (mosaic9_html groups cells into .mosaic-row/
   .stack wrappers) rather than one flat 6-column span grid — that made
   "small" look undersized versus "big" and left visible gaps. big-left/
   big-right are 2 columns (photo + stack), sized so the two stacked
   photos together match the big one's height; grid-template-columns:2fr
   1fr keeps big exactly 2x the stack's width, matching the reviewed
   mockup's proportions. */
.mosaic.cols-9{display:flex;flex-direction:column;gap:12px}
.mosaic-row{display:grid;gap:12px}
.mosaic-row.big-left{grid-template-columns:2fr 1fr;height:472px}
.mosaic-row.big-right{grid-template-columns:1fr 2fr;height:472px}
.mosaic-row.even{grid-template-columns:1fr 1fr 1fr;height:230px}
.mosaic-row .stack{display:flex;flex-direction:column;gap:12px}
.mosaic-row .stack .tile{flex:1}
/* caption appears on hover, as in the mockups */
.mosaic .tile .cap{position:absolute;left:18px;bottom:16px;padding:0;font-size:11px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);
  text-shadow:0 1px 16px rgba(0,0,0,.32);opacity:0;transform:translateY(8px);
  transition:opacity .45s ease,transform .45s ease}
.mosaic .tile:hover .cap{opacity:1;transform:translateY(0)}
.mosaic .tile .scrim{background:linear-gradient(to top,rgba(20,18,15,.6),transparent 55%)}
.mosaic .tile:hover img{filter:brightness(.9)}

/* ---- article ----------------------------------------------------------- */
.article{padding:64px 0 40px}
/* ch is relative to each element's OWN font-size, so matching "66ch" on
   both the lead (23px) and the rest (19px) rendered ~170px narrower for
   the rest — widened the base to match the lead's rendered width
   (66 * 23/19 ≈ 79.9ch at 19px), since the lead's width is the one to
   keep. */
.article p{max-width:79.9ch;margin:0 0 26px;font-size:19px;line-height:1.78;color:#33363c}
.article p.lead,.article p:first-of-type{font-size:23px;line-height:1.6;
  color:#26282d;max-width:66ch}
.article h2{font-size:34px;line-height:1.05;margin:44px 0 20px}
.article figcaption,.blk figcaption{font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:12px}
.article h2{font-family:var(--serif);font-size:clamp(32px,3.6vw,44px);font-weight:400;
  color:var(--ink-strong);margin:2em 0 .6em;max-width:30ch;scroll-margin-top:100px}
/* real subheadings as visible chapter breaks — a small numbered eyebrow
   (matching the site's existing kicker style) + a rule above, auto-
   numbered via a CSS counter so no build-time change was needed. Counter
   lives on .prose so it resets per post, not per page. */
/* both counters reset together here, even on posts that never use "day" —
   counter-reset doesn't merge across separate rules (last one wins outright,
   same tie-break as everywhere else in this file), so a second rule setting
   counter-reset:day on .day-numbered would silently wipe out chapter */
.article .prose{counter-reset:chapter day}
/* Part needs to clearly outrank Day now that Day has real presence too —
   bigger heading (above), a heavier 2px rule (vs Day's 1px) and a larger
   eyebrow, so size does the hierarchy work instead of Day just being muted */
.article h2{counter-increment:chapter;border-top:2px solid var(--line);
  padding-top:40px;margin-top:76px}
.article h2::before{content:"Part " counter(chapter,decimal-leading-zero);
  display:block;font-family:var(--sans);font-size:14px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.article h3{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--ink-strong);
  margin:1.6em 0 .5em;max-width:36ch;scroll-margin-top:100px}
/* h3 as a secondary chapter break, one tier down from h2's "Part": same
   counter mechanism, but a real rule + real space above it too (it read as
   just a small grey label before — "make more of it") — a shorter, lighter
   version of h2's break rather than a plain eyebrow. Rolled out to every
   journal post (build_site.py); harmless where a post has no h3s at all,
   and plain "Day" wording won't fit every h3 that does exist — David
   reviews and fixes those case by case rather than this guessing right. */
.prose.day-numbered h3{counter-increment:day;border-top:1px solid var(--accent-soft);
  padding-top:26px;margin-top:52px}
.prose.day-numbered h3::before{content:"Day " counter(day);display:block;
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
/* h4-h6: no post uses these yet (checked _source/copy — zero ####), but the
   markdown parser now supports real levels instead of flattening everything
   past h3 into an h3 tag, so the taper needs to exist before it's needed.
   No counter/eyebrow/rule below h3 — Part and Day are the two real "chapter"
   tiers; h4-h6 are plain shrinking type, same pattern most editorial sites
   use once you're past section breaks and into finer structure. */
.article h4{font-family:var(--serif);font-size:20px;font-weight:400;
  color:var(--ink-strong);margin:1.4em 0 .4em;max-width:40ch;scroll-margin-top:100px}
.article h5{font-family:var(--sans);font-size:16px;font-weight:700;
  color:var(--ink-strong);margin:1.3em 0 .4em;max-width:44ch;scroll-margin-top:100px}
.article h6{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:1.2em 0 .4em;max-width:48ch;
  scroll-margin-top:100px}
.article ul,.article ol{max-width:68ch;margin:0 0 1.5em;padding-left:1.3em}
.article li{margin-bottom:.5em;font-size:18px;line-height:1.7}
.article a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--accent-soft)}
.article a:hover{color:var(--accent-dark)}
.article strong{font-weight:600;color:var(--ink-strong)}

/* ---- share row (end of post) ------------------------------------------- */
/* label left, icon buttons right — .icons is its own flex group so it
   moves as one block instead of each button spreading out individually */
.share{display:flex;align-items:center;justify-content:space-between;max-width:79.9ch;
  margin:56px 0 0;padding-top:32px;border-top:1px solid var(--line)}
.share .icons{display:flex;align-items:center;gap:14px}
.share .lbl{font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.share a,.share button{width:36px;height:36px;border-radius:50%;border:none;
  display:flex;align-items:center;justify-content:center;background:var(--line);
  color:var(--ink-strong);cursor:pointer;transition:background .2s ease,color .2s ease}
.share a:hover,.share button:hover{background:var(--accent);color:var(--paper)}
.share svg{width:16px;height:16px;fill:currentColor}
.share .copy-link{position:relative}
.share .copied{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:8px;background:var(--ink-strong);color:var(--paper);font-size:11px;
  padding:5px 9px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .2s ease}
.share .copy-link.done .copied{opacity:1}
/* compact variant (TRIAL, Ushuaia only) — same icons/behaviour, no label,
   smaller buttons, for the sidebar */
.share.compact{max-width:none;margin:0;padding-top:0;border-top:none}
.share.compact a,.share.compact button{width:32px;height:32px}
.share.compact svg{width:14px;height:14px}

/* ---- sidebar (TRIAL, Ushuaia only) — journey position/prev-next,
   destinations, a few more stories, share. Same grid shape as the guide
   TOC above (content column + a fixed side column), just wider (320px,
   not 230px) since it holds more than a heading list. ---- */
.sb-layout{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr 320px;gap:64px;align-items:start}
/* min-width:0 overrides the grid item's implicit min-width:auto — without
   it, the filmstrip block's un-shrinkable scrollable content (630px per
   photo, no wrapping) was forcing this whole 1fr column wider to fit it,
   pushing the page into horizontal overflow instead of letting the
   filmstrip scroll internally within a normal-width column. */
.sb-main{max-width:none;min-width:0}
.sidebar{display:flex;flex-direction:column;gap:36px}
.sb-label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;display:flex;align-items:baseline;gap:10px}
.sb-label::after{content:"";flex:1;height:1px;background:var(--line)}

.sb-journey{background:var(--panel);padding:24px}
.sb-journey .sb-label{color:var(--panel-kicker);margin-bottom:14px}
.sb-journey .sb-label::after{background:rgba(255,255,255,.16)}
.sb-journey .pos{font-family:var(--serif);font-size:15px;color:var(--on-dark);margin-bottom:18px}
.sb-journey .pos b{color:var(--panel-kicker);font-style:normal}
.sb-nav-link{display:flex;align-items:center;gap:12px;text-decoration:none;padding:8px 0}
.sb-nav-link + .sb-nav-link{border-top:1px solid rgba(255,255,255,.12);margin-top:4px;padding-top:12px}
.sb-nav-link img{width:46px;height:46px;object-fit:cover;border-radius:4px;flex:none}
.sb-nav-link .txt{min-width:0}
.sb-nav-link .dir{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-soft);margin-bottom:3px}
.sb-nav-link .ti{font-size:13.5px;color:var(--on-dark);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* TRIAL — "in this post" card (Ushuaia + the O trek, see CONTENTS_TRIAL in
   build_site.py). Light, like sb-dest/sb-more beside it — tried dark to
   match sb-journey first, but two stacked navy cards read as one heavy
   block and Contents doesn't earn a "highlight" treatment the way Journey
   (an actual "you are here") does. Reserve dark for Journey alone. */
/* > ol > li (not bare "li") — the day sub-items are also <li>s, nested
   inside a <ul> inside <details> inside one of THESE li's; without the
   child combinator the counter/number/border below were incrementing and
   drawing on the sub-items too ("03" "04"... continuing past "01" "02" —
   "sub menu is broken"). Only the top-level Parts get numbered. */
.sb-contents > ol{list-style:none;counter-reset:contents}
.sb-contents > ol > li{counter-increment:contents;border-top:1px solid var(--line)}
.sb-contents > ol > li:first-child{border-top:none}
.sb-contents > ol > li > a{display:flex;align-items:baseline;gap:10px;padding:11px 4px;
  font-size:14px;font-weight:600;color:var(--ink-strong);text-decoration:none;
  border-radius:6px;transition:background-color .15s ease,padding .15s ease}
/* color repeated here, not just in the base rule above — the sidebar sits
   inside .article, and .article a:hover{color:var(--accent-dark)} has
   equal-or-greater specificity than a bare (non-:hover) rule, so it was
   winning on hover ("hover doesn't work"). Harmless-looking on a light
   background but still wrong, so kept explicit here regardless. */
.sb-contents > ol > li > a:hover{background:#eceae4;padding:11px 4px 11px 14px;
  color:var(--ink-strong)}
.sb-contents > ol > li > a::before{content:counter(contents,decimal-leading-zero);
  font-family:var(--sans);font-size:11px;font-weight:700;color:var(--accent);flex:none}
.sb-contents details{margin:0 0 8px 24px}
.sb-contents summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:9px;font-size:11.5px;font-weight:600;color:var(--muted);padding:4px 0}
.sb-contents summary::-webkit-details-marker{display:none}
.sb-contents summary::after{content:"";width:6px;height:6px;flex:none;
  border:solid var(--accent);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
  transition:transform .2s ease}
.sb-contents details[open] summary::after{transform:rotate(-135deg)}
.sb-contents summary:hover{color:var(--ink-strong)}
.sb-contents details ul{list-style:none;padding:4px 0 0;margin:0}
.sb-contents details ul a{display:block;padding:5px 0;font-size:12.5px;font-weight:500;
  color:var(--ink-strong);text-decoration:none}
.sb-contents details ul a:hover{color:var(--accent)}

.sb-dest ol{list-style:none}
.sb-dest li + li{margin-top:2px}
.sb-dest a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 4px;text-decoration:none;color:var(--ink);border-radius:6px;
  transition:background-color .15s ease,padding .15s ease}
/* padding:11px 14px, not padding-left alone — the number sits flush at
   the far edge (only 4px of the base padding) when just the left side
   grows; matching padding on both sides keeps the highlight box balanced
   around the row instead of cramping the number against its right edge */
.sb-dest a:hover{background:#eceae4;padding:11px 14px}
.sb-dest a.current{color:var(--ink-strong);font-weight:700}
.sb-dest .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  opacity:0;transition:opacity .15s ease}
.sb-dest a.current .dot{opacity:1}
.sb-dest .name{display:flex;align-items:center;gap:10px;font-size:15px}
.sb-dest .n{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.sb-dest a.current .n{color:var(--accent)}

.sb-more-list{display:flex;flex-direction:column;gap:14px}
/* a.sb-more-item (not bare .sb-more-item) beats .article a on specificity
   — same tie this file keeps hitting since the sidebar sits inside
   .article; without the element the underline was winning ("the
   underlining doesn't work"). */
/* Bigger image (64px -> 96px, fewer cards — 4 fixed, not a scaled count —
   per David) and align-items:center so a short title doesn't leave the
   image floating alone above empty space. -webkit-line-clamp caps a long
   title at 2 lines instead of letting it run past the image's bottom edge
   ("titles are long and drop below the image"). */
a.sb-more-item{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink)}
.sb-more-item img{width:96px;height:96px;object-fit:cover;border-radius:4px;flex:none}
.sb-more-item .txt{min-width:0}
.sb-more-item .country{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:4px}
.sb-more-item .ti{font-family:var(--serif);font-size:15px;line-height:1.3;color:var(--ink-strong);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-more-item:hover .ti{color:var(--accent)}

@media(max-width:960px){
  .sb-layout{grid-template-columns:1fr}
  .sidebar{position:static;flex-direction:row;flex-wrap:wrap;gap:24px}
  .sb-journey,.sb-contents,.sb-dest,.sb-more{flex:1 1 260px}
}

/* ---- guide "At a glance" — navy panel overlapping the hero, 4 columns --- */
.facts{max-width:var(--read);margin:0 auto;padding:0 var(--pad)}
.facts .in{background:var(--panel);padding:clamp(34px,4vw,52px);margin-top:48px;
  position:relative;z-index:5}
.facts .facts-label{display:flex;align-items:baseline;gap:16px;margin-bottom:28px;
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--panel-kicker)}
.facts .facts-label::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.16)}
.facts dl{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 28px}
.facts dt{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#aeb9cc;margin-bottom:10px}
.facts dd{font-family:var(--serif);font-size:25px;line-height:1.05;color:var(--on-dark)}
/* the guide body is a 230px sticky contents column beside the prose */
.guide-body{max-width:var(--read);margin:0 auto;padding:72px var(--pad) 0;
  display:grid;grid-template-columns:230px 1fr;gap:56px;align-items:start}
.toc{position:sticky;top:104px}
.toc-label{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px}
.toc ol{list-style:none;counter-reset:toc;padding:0;margin:0;max-width:none}
.toc li{counter-increment:toc;border-top:1px solid #dcdce0;margin:0}
.toc a{display:flex;gap:12px;padding:12px 0;font-size:14px;color:#54575e;
  text-decoration:none}
.toc a::before{content:counter(toc,decimal-leading-zero);color:var(--panel-text);
  font-weight:700}
.toc a:hover{color:var(--accent)}
.callout{margin:8px 0 34px;padding:26px 30px;background:#e7ecf3;max-width:none}
.callout .lbl{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px}
.callout p{margin:0;max-width:none;font-size:16px;line-height:1.6;color:#2c2f35}
.callout.warn{background:#f6ece4}
.callout.warn .lbl{color:#b8552f}

/* short "label – value" runs (a food list, a gear list) as a real box
   instead of plain paragraphs indistinguishable from the prose around them
   — see group_fact_lines in build_site.py, which only promotes an actual
   RUN of 2+, not a single "label – value" line on its own. */
.fact-list{background:#eceae4;border-radius:2px;padding:22px 28px;
  margin:8px 0 34px;display:flex;flex-direction:column;gap:12px;max-width:none}
.fact-list .row{display:flex;gap:10px;font-size:16px;line-height:1.5}
.fact-list .k{font-weight:700;color:var(--ink-strong);flex:none}
.fact-list .v{color:#33363c}

/* ---- photo blocks ------------------------------------------------------ */
/* the mockups size blocks by height, not aspect-ratio: spread 560 / duo 440
   / trio 360 / mosaic rows 200 (guide runs a touch shorter: 520/420/340) */
.blk{margin:44px 0;display:grid;gap:14px}
/* the inline aspect-ratio style on <figure class="ph"> (set per-image so the
   grid never reflows on load) otherwise wins over height, sizing the figure
   from its own ratio rather than its grid track — the figure then overflows
   the track by however wide that ratio computes. width:100% forces it back
   to the track's actual width, same as every other .ph usage on the page. */
.blk .ph{height:100%;width:100%}
.blk-spread .ph{height:560px}
.blk-duo .ph{height:440px}
.blk-tri .ph{height:360px}
.guide-body .blk-spread .ph{height:520px}
.guide-body .blk-duo .ph{height:420px}
.guide-body .blk-tri .ph{height:340px}
/* Pull-quote — full-bleed, same visual language as the home page's .pano
   (photo + scrim + kicker + a real line of text). .pano gets this for
   free since nothing constrains its parent's width.
   This one's real parent is .prose.sb-main — the LEFT column of the
   .sb-layout grid (content + 320px sidebar), not a centered container —
   so the standard "margin-left:50%+translateX(-50%)" trick doesn't work
   here: that trick only lands at the viewport edge when the parent's own
   center coincides with the viewport's center, which is only true for a
   symmetric/centered parent. Against this asymmetric column it landed
   ~200px off (confirmed via computed geometry). Fix: cancel the parent's
   own known, FIXED left inset directly — .sb-layout is itself centered
   (padding var(--pad) inside max-width:var(--wrap)), so
   max(0,(100vw - var(--wrap))/2) + var(--pad) is exactly how far
   .prose.sb-main's left edge sits from the true viewport edge, at any
   width and regardless of whether the sidebar is beside it or stacked
   below (mobile) — negative-margining by that exact amount, then
   width:100vw, reaches x=0 without depending on the parent's WIDTH at
   all (unlike the old trick), so it isn't thrown off by the sidebar
   column being there.
   Fixed px height, not vh — vh computed shorter than the other blocks on
   a typical laptop window on an earlier version of this. Absolute
   positioning (not grid) for img/scrim/inner — no picture/source phantom
   grid-item risk here, since nothing here is a grid. */
.article .prose .blk.blk-pullquote{position:relative;width:100vw;height:680px;
  overflow:hidden;margin-top:64px;margin-bottom:64px;
  margin-left:calc(-1 * (max(0px, (100vw - var(--wrap)) / 2) + var(--pad)));
  background:#9d8f74}
.blk-pullquote img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blk-pullquote .scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,18,15,.35),rgba(20,18,15,.55))}
.blk-pullquote .inner{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 24px}
.blk-pullquote .kicker{font-size:11px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:#e9edf2;text-shadow:0 1px 14px rgba(0,0,0,.5);
  margin-bottom:26px}
.blk.blk-pullquote .inner p{font-family:var(--serif);font-size:clamp(30px,4.6vw,64px);
  line-height:1.15;color:var(--paper);text-shadow:0 1px 16px rgba(0,0,0,.32);
  max-width:20ch;text-wrap:balance}
/* .article .prose .blk.blk-pullquote (not .blk-pullquote alone) — same
   specificity-tie mistake as earlier today: the plain-class mobile
   override (0,1,0) can't beat the desktop rule above (0,4,0) regardless
   of media-query order, so height:680px was winning on mobile too. */
@media(max-width:900px){.article .prose .blk.blk-pullquote{height:420px}}

/* ---- TRIAL, Ushuaia only — new block set from the mockup review,
   replacing duo/tri/mosaic/feature (and now spread — see u-spread below)
   for this post (U_TRIAL_ORDER in build_site.py). All native 3:2 ratio, no
   forced crop into a mismatched cell shape (one exception: gopt-9 style
   crops were explicitly rejected and dropped, not built here). ---- */
.blk.blk-uspread img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  background:#e2e3e0}
.blk.blk-udiptych{display:grid;grid-template-columns:1fr 1fr}
.blk.blk-udiptych img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#e2e3e0}
.blk.blk-uhover{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.blk-uhover .u-cell{position:relative}
.blk-uhover .u-cell .ph{aspect-ratio:3/2}
.blk-uhover .more{display:flex;align-items:center;justify-content:center;background:var(--panel);
  aspect-ratio:3/2}
.blk-uhover .more a{color:var(--on-dark);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;text-align:center;line-height:1.5}
/* numbers always visible — an earlier hover-only version wasn't discoverable
   ("I like it but I can't see any numbers") */
.blk-uhover .idx{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;
  letter-spacing:.1em;color:var(--paper);text-shadow:0 1px 8px rgba(0,0,0,.5);z-index:2}
.blk.blk-utriptych{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blk.blk-utriptych img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  background:#e2e3e0}
/* bento — size varies by ROW (2 wide tiles, then 3 medium, then 5 small),
   not by mixing unequal widths inside one shared-height row. A first
   attempt tried the latter (e.g. a 3fr/2fr pair sharing one row height)
   and the math can't keep both cells at a real 3:2 at once — checked via
   computed ratio, some tiles were rendering near-square off a landscape
   source. Every row here is equal-width internally, aspect-ratio:3/2 per
   tile (same proven technique as u-grid/u-triptych), so nothing crops;
   rows just get shorter as they get denser, which is what reads as
   "bento" without ever distorting a photo. */
.blk.blk-ubento{display:flex;flex-direction:column;gap:14px}
.blk-ubento .row-wide,.blk-ubento .row-medium,.blk-ubento .row-dense{
  display:grid;gap:14px}
.blk-ubento .row-wide{grid-template-columns:repeat(2,1fr)}
.blk-ubento .row-medium{grid-template-columns:repeat(3,1fr)}
.blk-ubento .row-dense{grid-template-columns:repeat(5,1fr)}
.blk-ubento img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  background:#e2e3e0}
@media(max-width:760px){
  .blk.blk-uhover,.blk.blk-utriptych{grid-template-columns:repeat(2,1fr)}
  .blk.blk-udiptych{grid-template-columns:1fr}
  .blk-ubento .row-medium,.blk-ubento .row-dense{grid-template-columns:repeat(3,1fr)}
}

.blk-mosaic{grid-auto-rows:200px}
.blk-mosaic .ph{height:100%}
.blk-mosaic .ph:first-child{grid-row:span 2}
.blk-mosaic .ph:last-child{grid-column:span 2}
/* bracketed caption under a block, as in the mockups */
.blk .cap,.blk figcaption{font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:12px;grid-column:1/-1}
.blk .ph,.grid-all .ph,.hero .ph{margin:0;overflow:hidden;background:#e2e3e0;position:relative}
.blk img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.blk-spread{grid-template-columns:1fr}
.blk-duo{grid-template-columns:1fr 1fr}
.blk-tri{grid-template-columns:1fr 1.4fr 1fr;align-items:stretch}
.blk-tri .ph,.blk-tri img{height:100%}
.blk-mosaic{grid-template-columns:repeat(3,1fr)}
.blk-feature{grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin:52px 0}
.blk-feature .ph{grid-column:1;height:560px}
.blk-feature .side{grid-column:2}
.blk-feature .side .rule{width:48px;height:3px;background:var(--panel-soft);
  margin-bottom:22px}
.blk-feature .side p{font-family:var(--serif);font-size:26px;line-height:1.3;
  color:#26282d;max-width:none;margin-bottom:18px}
.blk-feature figcaption{grid-column:2;margin:0;padding:0}

/* ---- photo grid (end of post / destination) ---------------------------- */
.grid-all{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.grid-all img{width:100%;height:100%;object-fit:cover;cursor:pointer;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.grid-all .ph:hover img{transform:scale(1.06)}

/* ---- home: destination tiles (2-col, one full-width) ------------------- */
.dest-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.dest-tiles .tile{aspect-ratio:auto;height:460px}
.dest-tiles .tile:nth-child(3){grid-column:span 2;height:440px}
.dest-tiles .tile:nth-child(4),.dest-tiles .tile:nth-child(5){height:380px}
/* the full index runs all nine: 460,460,440*,380,380,440*,380,380,440* —
   a repeating "two, one wide" rhythm (David: "two 1 wide 2 then 1 wide
   repeat") rather than a single one-off wide tile, so both Argentina (6)
   and Mexico (9) go wide alongside Bolivia (3, the original base rule). */
.dest-tiles.all .tile:nth-child(6),.dest-tiles.all .tile:nth-child(9)
  {grid-column:span 2;height:440px}
.dest-tiles.all .tile:nth-child(7),.dest-tiles.all .tile:nth-child(8){height:380px}
/* .dest-tiles .scrim and the generic .tile .scrim (below, further down the
   file) are equal specificity — .tile .scrim was winning the cascade on
   source order alone, so every edit made here up to now was silently
   inert. Scoped through .tile explicitly so these actually win.
   The 62%-tall fade .tile .scrim uses was tuned against a full-height
   hero; on these 380-460px tiles the same percentage covers most of the
   visible photo, reading as an overall dark image rather than a caption
   backdrop. The caption itself only needs the bottom ~35-40%. */
.dest-tiles.all .tile .scrim{background:linear-gradient(to top,rgba(15,17,22,.72),
  rgba(15,17,22,.05) 38%)}
.dest-tiles.all .cap .n{color:#e9b48f}
.dest-tiles .tile .scrim{background:linear-gradient(to top,rgba(15,17,22,.78),
  rgba(15,17,22,.05) 38%)}
.dest-tiles .no{position:absolute;left:28px;top:24px;font-size:13px;font-weight:700;
  letter-spacing:.1em;color:rgba(255,255,255,.95);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.dest-tiles .cap{position:absolute;left:28px;right:28px;bottom:26px;padding:0}
.dest-tiles .cap h3{font-family:var(--serif);font-size:clamp(34px,4vw,56px);line-height:.95;
  color:var(--paper);text-shadow:0 1px 16px rgba(0,0,0,.32);margin-bottom:8px;font-weight:400}
.dest-tiles .cap .sub{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.dest-tiles .cap .tag{font-size:15px;color:#f2ede3;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.dest-tiles .cap .n{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.94);text-shadow:0 1px 10px rgba(0,0,0,.5);white-space:nowrap}

/* centred "view all" link with an accent underline */
.more-link{display:flex;justify-content:center;margin-top:32px}
.more-link a,.lnk.underlined{display:inline-flex;align-items:center;gap:12px;font-size:12px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-strong);
  border-bottom:2px solid var(--accent);padding-bottom:8px;width:fit-content;
  transition:gap .3s ease,color .2s ease}
.more-link a:hover,.lnk.underlined:hover{color:var(--accent);gap:18px}
.more-link a span,.lnk.underlined span{color:var(--accent)}

/* ---- home: guides (big tile + list) ------------------------------------ */
.guides-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px}
.guides-grid .feat{position:relative;height:560px;aspect-ratio:auto;
  overflow:hidden;display:block}
.guides-grid .feat .scrim{background:linear-gradient(to top,rgba(15,17,22,.84),
  rgba(15,17,22,.12) 52%,rgba(15,17,22,.36))}
.guides-grid .feat .cap{position:absolute;left:36px;right:36px;bottom:34px;padding:0}
.guides-grid .feat .meta{font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#e9edf2;text-shadow:0 1px 12px rgba(0,0,0,.5);
  margin-bottom:16px}
.guides-grid .feat h3{font-family:var(--serif);font-size:clamp(30px,3.2vw,46px);
  line-height:1.02;color:var(--paper);text-shadow:0 1px 16px rgba(0,0,0,.32);
  margin-bottom:16px;max-width:18ch;font-weight:400}
.guides-grid .feat p{font-size:15px;line-height:1.6;color:#eef1f4;
  text-shadow:0 1px 10px rgba(0,0,0,.5);max-width:46ch}
.guides-list{display:flex;flex-direction:column;gap:32px}
.guides-list .row{display:grid;grid-template-columns:170px 1fr;gap:22px;align-items:center}
.guides-list .row .shot{position:relative;height:150px;overflow:hidden}
.guides-list .row img{width:100%;height:100%;object-fit:cover;
  transition:filter .4s ease}
.guides-list .row:hover img{filter:brightness(1.08)}
.guides-list .row .meta{font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.guides-list .row h3{font-family:var(--serif);font-size:24px;line-height:1.1;
  color:var(--ink-strong);margin-bottom:10px;font-weight:400}
.guides-list .row p{font-size:13.5px;line-height:1.55;color:#5c5f65}

/* ---- full-bleed pull quote --------------------------------------------- */
.pano{position:relative;height:78vh;min-height:520px;width:100%;overflow:hidden;
  margin:120px 0;background:#9d8f74}
.pano img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pano .scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(20,18,15,.35),rgba(20,18,15,.55))}
.pano .inner{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 24px}
.pano .kicker{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:#e9edf2;text-shadow:0 1px 14px rgba(0,0,0,.5);margin-bottom:26px}
.pano p{font-family:var(--serif);font-size:clamp(30px,4.6vw,64px);line-height:1.05;
  color:var(--paper);text-shadow:0 1px 16px rgba(0,0,0,.32);max-width:20ch;text-wrap:balance}

/* ---- tiles (generic) --------------------------------------------------- */
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tile{position:relative;overflow:hidden;display:block;aspect-ratio:4/3;background:#cfd2ce}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.dest-tiles .tile[href="/category/argentina/"] img{object-position:50% 90%}
.dest-tiles .tile[href="/category/bolivia/"] img{object-position:65% 50%}
.tile:hover img{transform:scale(1.06)}
/* every .tile zooming the same way on hover got monotonous with this many
   tiles on one page — the destination tiles keep it (the "go explore"
   grid), everything else on the home page reacts differently: the
   archive mosaic and featured carousel photo hold still since their
   captions/controls already carry the interaction, and the guides
   section (a list to scan, not photos to admire) brightens instead of
   moving at all. */
#archive-mosaic .tile:hover img,.featured.carousel .tile:hover img,
.guides-grid .feat:hover img{transform:none}
.guides-grid .feat:hover img,.guides-list .row:hover img{filter:brightness(1.08)}
.tile .scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,18,15,.82),rgba(20,18,15,0) 62%)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:26px;color:var(--paper)}
.tile .cap .no{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--accent-soft);
  margin-bottom:8px}
.tile .cap h3{font-family:var(--serif);font-size:28px;font-weight:400;line-height:1.1;
  text-shadow:0 1px 16px rgba(0,0,0,.32)}
.tile .cap .meta{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#dfe2e6;margin-top:8px;opacity:.9}
.tile.big{aspect-ratio:16/11}
@media(min-width:900px){.tiles .tile.big{grid-column:span 2}}

/* ---- post list (guides index only — /guides/) --------------------------- */
.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-bottom:1px solid var(--line)}
.post-list a{display:grid;grid-template-columns:64px minmax(0,1fr) 170px;gap:26px;
  align-items:center;padding:22px 0}
.post-list .no{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent)}
.post-list h3{font-family:var(--serif);font-size:clamp(20px,2.1vw,27px);font-weight:400;
  color:var(--ink-strong);line-height:1.2}
.post-list a:hover h3{color:var(--accent)}
.post-list .meta{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:8px}
.post-list .thumb{aspect-ratio:16/10;overflow:hidden}
.post-list .thumb img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.post-list a:hover .thumb img{transform:scale(1.06)}

/* ---- destination featured banner — reuses .featured (the home page's
   non-carousel base class: photo + navy panel, see "featured story" above)
   rather than a bespoke lighter treatment, which "fell a bit flat" next to
   that richer pattern. A different real story on every visit — see
   DEST_FEAT_SCRIPT in build_site.py; a static build can't vary per
   request, so the pick happens client-side on load, swapping the photo,
   kicker, title, blurb and button href together. .featured's own 120px
   bottom margin is kept as-is (matches the home page); just adding a top
   gap here since the page-head above has none of its own — 56px to match
   .section.tight's page-head gap on /destinations/, rather than a third,
   slightly different number for the same visual relationship. */
.dest-feat.featured{margin-top:56px}

/* ---- story grid (destination pages) — a photo-first card grid replacing
   the plain numbered text list ("a bit boring... more image based, can use
   cards"); the "01/02/03" chronological-order numbering that list had
   moves onto the photo itself instead of sitting beside the title. -------- */
.story-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:36px 28px}
/* :visited stated explicitly, not left to the plain rule above to cover —
   a real browser's default :visited blue+underline showed through on a
   card whose post had actually been opened before ("Volunteering at
   Zoológico..."), a state this session's own fresh test browser has no
   history to reproduce. */
/* hover option 7 (soft background tint) from the
   _design/story-hover-options.html comparison — chosen over the lift/
   shadow/zoom this grid had before. Uses the same padding-out/margin-in
   trick as elsewhere ("make this stand out" via a fill, never a border/
   outline) — inset kept to 14px (half the grid's own 28px column gap) so
   two adjacent cards' tints can't touch.
   Option 4 (number badge pop) was dropped along with the badge itself —
   once the list went reverse-chronological, a badge reading journey-day
   order (23 first, not 01) read as wrong, not just unordered. */
.story-card,.story-card:visited{display:block;text-decoration:none;color:inherit;
  padding:14px;margin:-14px;border-radius:6px;transition:background .25s ease}
.story-card:visited h3{color:var(--ink-strong)}
.story-card:hover{background:#eceae4}
.story-img{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:2px;
  margin-bottom:16px;background:#e2e3e0}
.story-img img{width:100%;height:100%;object-fit:cover;transition:filter .25s ease}
/* the background tint alone read as too subtle over a busy photo — this
   makes the hover state register even before you notice the tint. */
.story-card:hover .story-img img{filter:brightness(.8)}
.story-card h3{font-family:var(--serif);font-size:clamp(18px,1.6vw,21px);font-weight:400;
  line-height:1.3;color:var(--ink-strong);margin-bottom:6px}
.story-card .meta{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
/* guide cards get the same tint as everyone else now — that exclusion
   made sense against the old lift/zoom (too "come explore this journey"
   for a how-to) but a plain background fill is neutral enough to apply
   everywhere; excluding it just left guide cards looking unresponsive
   ("18 does not have a hover state"). */
@media(max-width:960px){.story-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.story-grid{grid-template-columns:1fr}}

/* ---- prev / next — photo tiles, as the mockups have them --------------- */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:96px}
.pn .tile{height:280px;aspect-ratio:auto}
.pn .tile .scrim{background:linear-gradient(to right,rgba(15,17,22,.78),rgba(15,17,22,.25))}
.pn .tile.next .scrim{background:linear-gradient(to left,rgba(15,17,22,.78),rgba(15,17,22,.25))}
.pn .txt{position:absolute;left:34px;right:34px;top:0;bottom:0;display:flex;
  flex-direction:column;justify-content:center}
.pn .tile.next .txt{align-items:flex-end;text-align:right}
.pn .lbl{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#e9b48f;text-shadow:0 1px 12px rgba(0,0,0,.5);margin-bottom:12px}
.pn .t{font-family:var(--serif);font-size:28px;line-height:1.05;color:var(--on-dark);
  text-shadow:0 1px 14px rgba(0,0,0,.4);max-width:16ch}
.pn .prev:only-child{grid-column:1/-1}

/* ---- text-led page head (no hero: Packing) ----------------------------- */
/* pages without a hero start the header solid — there's no photo to sit over */
body.no-hero .site-head{background:var(--panel)}
.page-head{max-width:1180px;margin:0 auto;padding:150px var(--pad) 0}
.page-head.wide{max-width:var(--wrap)}
.page-head.wide h1{font-size:clamp(56px,8vw,120px);line-height:.9;max-width:none;
  margin-bottom:22px}
/* no cap — spans the full width of the wide column, not a narrow reading
   measure (real bug: it was wrapping well short of the column's edge) */
.page-head.wide .intro{font-size:18px;max-width:none;margin-top:0}
.page-head.wide .intro+.intro{margin-top:20px}
.page-head .kicker{font-size:12px;letter-spacing:.26em;margin-bottom:20px}
.page-head h1{font-family:var(--serif);font-size:clamp(52px,7vw,104px);line-height:.92;
  letter-spacing:-.02em;color:var(--ink-strong);max-width:15ch;font-weight:400}
/* px, not ch — a ch cap can end up far wider than intended if the serif
   loads late/falls back */
.page-head .intro{font-size:19px;line-height:1.65;color:#54575e;max-width:640px;margin-top:24px}

/* ---- full-bleed filmstrip (TRIAL, /packing-list/ only) -----------------
   Breaks out to the actual viewport width via the standard breakout trick
   (viewport-centered at 100vw lands on the same edges as .wrap elsewhere,
   since both are centered on the viewport at the same point) — this is
   what "filmstrip" needs to actually work: confined to a page's ~1180px
   content column it only showed ~2 photos at once, same problem as the
   in-article version. Sizing the img directly (not a .ph wrapper) works
   here because there's no figure indirection — picture_tag(bare=True)
   makes the <picture> (display:contents) the only thing between this flex
   row and the img, so the img itself is the effective flex item. */
.filmstrip-full{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;
  width:100vw;margin:56px 0;margin-left:50%;transform:translateX(-50%);
  padding:0 var(--pad) 20px}
/* .fs-cell (not the <img> directly) is the flex item, so each photo's
   real location can be captioned on top of it — max-width:none overrides
   the global img{max-width:100%} safety rule, which would otherwise cap
   an image to its container's own width (exactly what a horizontally-
   scrolling filmstrip needs to NOT happen). FILMSTRIP_SCRIPT (main.js)
   auto-advances this by one cell every 10s and stands down as soon as a
   reader actually drags the (kept, visible) scrollbar themselves. */
.filmstrip-full .fs-cell{position:relative;height:420px;width:630px;max-width:none;
  flex:none;background:#e2e3e0}
.filmstrip-full .fs-cell img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.filmstrip-full .cap{position:absolute;left:16px;bottom:14px;right:16px;color:var(--paper);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
/* thin custom scrollbar, straight from the reviewed mockup — without this
   it falls back to the browser's default (thick, square-edged) bar */
.filmstrip-full::-webkit-scrollbar{height:6px}
.filmstrip-full::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
@media(max-width:760px){.filmstrip-full .fs-cell{height:260px;width:390px}}

/* ---- packing list ------------------------------------------------------- */
.pack{max-width:1180px;margin:0 auto;padding:72px var(--pad) 0}
.pack-sec{margin-bottom:48px}
.pack-sec .head{display:flex;align-items:baseline;gap:18px;
  border-bottom:2px solid var(--ink-strong);padding-bottom:14px;margin-bottom:4px}
.pack-sec .head .num{font-family:var(--serif);font-size:28px;color:var(--panel-soft)}
.pack-sec .head h2{font-family:var(--serif);font-size:30px;color:var(--ink-strong);
  font-weight:400;margin:0}
/* double list — two newspaper-style columns (CSS multicol, fills left
   top-to-bottom then right, not row-major) rather than one long single
   column; each item is a small stacked block, not a wide two-column row,
   so it fits a half-width column ("reduce the list size and weight...
   smaller content areas"). */
.pack-items{column-count:2;column-gap:36px}
.pack-item{display:block;break-inside:avoid;padding:9px 0;border-bottom:1px solid #dcdce0}
.pack-item .name{display:block;font-family:var(--serif);font-size:15px;
  color:var(--ink-strong);margin-bottom:2px}
.pack-item .note{font-size:12.5px;line-height:1.45;color:#6a6d73}
@media(max-width:600px){.pack-items{column-count:1}}
/* a real trip photo per section, standing in for gear photos David can't
   retake 10 years later — a wide, short band rather than a tall hero so
   it reads as an illustration of the section, not a competing headline.
   Static, no scroll/animation (only the top-of-page filmstrip self-
   scrolls). */
.pack-photo-wrap{margin-bottom:20px}
/* the location as a plain text header above the photo, not overlaid on
   it — unlike the top-of-page filmstrip's on-image captions. */
.pack-photo-wrap .loc{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pack-photo{height:240px;overflow:hidden;border-radius:2px;background:#e2e3e0}
.pack-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.pack-photo{height:180px}}
/* two real lines worth more visual weight — background fill, not a
   border, same rule the rest of the site follows for "make this stand
   out" (.fact-list, the story-card hover tint). */
.pack-item.highlight{background:#eceae4;padding:14px 14px;margin:0 -14px;border-radius:6px;
  border-bottom-color:transparent}
.pack-item.highlight .note{font-family:var(--serif);font-size:15px;color:var(--ink-strong)}
.quote-panel{max-width:1180px;margin:16px auto 0;padding:0 var(--pad)}
.quote-panel .in{background:var(--panel);padding:clamp(34px,4vw,56px)}
.quote-panel .kicker{font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--panel-kicker);margin-bottom:14px}
.quote-panel .rule{width:48px;height:3px;background:var(--panel-soft);margin-bottom:22px}
.quote-panel p{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.3;
  color:var(--on-dark);max-width:34ch}

/* ---- About: real hero_block() + article prose (see render_static) —
   .article p already matches this size/measure sitewide, so only the
   lead paragraph and the narrative/practical-note divider need their
   own rule. The old portrait-beside-prose grid is gone: "the way the
   image is handled is terrible" -> reuse the same hero every post has. */
.article .lead{font-size:24px;line-height:1.55;color:#26282d}
.article .rule{width:52px;height:3px;background:var(--panel-soft);margin:12px 0 28px}
.stats-wrap{max-width:1180px;margin:0 auto;padding:96px var(--pad) 0}

/* ---- stats row (About) -------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  border-top:2px solid var(--ink-strong);padding-top:44px}
.stats .n{font-family:var(--serif);font-size:56px;line-height:.9;color:var(--panel)}
.stats .l{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-top:14px}

/* ---- footer ------------------------------------------------------------ */
.site-foot{background:var(--dark);color:var(--on-dark-mute);margin-top:120px}
.site-foot .wrap{padding-top:84px;padding-bottom:40px}
.site-foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:56px;
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.site-foot .name{font-family:var(--serif);font-size:30px;color:var(--paper);
  display:inline-block;margin-bottom:22px}
.site-foot .name em{color:var(--accent-soft);font-style:italic}
.site-foot p{font-size:15px;max-width:34ch;line-height:1.7;color:#92959b}
.site-foot h4{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-soft);margin-bottom:16px}
.fnav a{display:block;padding:7px 0;color:var(--on-dark-mute);font-size:14px}
.fnav a:hover{color:var(--on-dark)}
.site-foot .base{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:28px;padding-bottom:8px;border-top:1px solid #2a2822;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6a6d73}
.site-foot .social{display:flex;gap:26px}
.site-foot .social a{color:#92959b}
.site-foot .social a:hover{color:var(--on-dark)}
.site-foot .credit{color:inherit;text-decoration:none;transition:color .2s ease}
.site-foot .credit:hover{color:var(--on-dark)}

/* ---- lightbox (built by main.js) --------------------------------------- */
.lb-overlay{position:fixed;inset:0;background:rgba(12,11,9,.97);z-index:100;
  display:flex;align-items:center;justify-content:center}
.lb-overlay img{max-width:94vw;max-height:92vh;object-fit:contain}
.lb-close{position:absolute;top:18px;right:24px;color:var(--paper);font:300 30px var(--sans);
  background:none;border:none;cursor:pointer;opacity:.75;padding:8px 14px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--paper);
  font:300 34px var(--sans);background:none;border:none;cursor:pointer;padding:20px;opacity:.75}
.lb-close:hover,.lb-nav:hover{opacity:1}
.lb-prev{left:8px}.lb-next{right:8px}
.lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  color:var(--on-dark-mute);font-size:12px;font-weight:600;letter-spacing:.16em}
.lb-play{position:absolute;bottom:14px;left:24px;color:var(--paper);
  font:300 15px var(--sans);background:none;border:none;cursor:pointer;
  padding:8px;opacity:.75}
.lb-play:hover{opacity:1}

/* "View all N photographs" under a capped grid */
.grid-more{margin-top:26px;text-align:center}
.gallery-open{background:none;border:none;cursor:pointer;color:var(--accent);
  font-family:var(--sans);padding:10px 4px}
.gallery-open:hover{color:var(--accent-dark)}

/* ---- responsive -------------------------------------------------------- */
@media(max-width:1000px){
  .guide-body{grid-template-columns:1fr;gap:0}
  .toc{position:static;margin-bottom:36px;border-bottom:1px solid var(--line);
    padding-bottom:12px}
  .facts dl{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .site-foot .cols{grid-template-columns:1fr 1fr;gap:36px}
  .guides-grid{grid-template-columns:1fr}
  .guides-grid .feat{height:420px}
  .dest-tiles{grid-template-columns:1fr}
  /* single-column here: every span-2 tile (3, 6 and 9 on the full
     /destinations/ index) must drop its span or it asks for a 2nd column
     that doesn't exist, which computes to width:0 and makes that tile
     invisible. n+4 already covers 6 and 9 (and everything after) for the
     .all variant, so no separate entry is needed for either — but the
     home page's own 5-tile grid (no .all class) has its OWN nth-child(4)/
     (5) base rule at (0,3,0) specificity, which this reset's bare
     ".dest-tiles .tile" at (0,2,0) couldn't beat, leaving tiles 4-5 taller
     than 1-3 on mobile home. Named explicitly so it actually wins there
     too. */
  .dest-tiles .tile,.dest-tiles .tile:nth-child(3),
  .dest-tiles .tile:nth-child(4),.dest-tiles .tile:nth-child(5),
  .dest-tiles.all .tile:nth-child(n+4)
    {grid-column:auto;height:340px}
  .facts dl{gap:20px 24px}
  .featured{grid-template-columns:1fr;min-height:0}
  .featured .tile{min-height:380px}
  .featured.carousel .feat-slide{grid-template-columns:1fr}
  .featured.carousel .feat-arrow{opacity:1}
  .mosaic.cols-3,.mosaic.cols-4{grid-template-columns:1fr 1fr}
  .mosaic .tile{grid-column:auto !important;grid-row:auto !important}
  /* cols-9's nested row/stack wrappers don't collapse via the tile-reset
     above (they're not .tile themselves) — flatten both wrapper levels to
     plain blocks instead, so all 9 photos just stack in one column */
  .mosaic.cols-9 .mosaic-row,.mosaic.cols-9 .stack{display:block;height:auto}
  .mosaic.cols-9 .tile{height:220px;margin-bottom:12px}
}
@media(max-width:760px){
  :root{--pad:20px}
  /* the bar can't fit brand + 3 nav items at 375px: stack them, shrink the
     mark, and let the nav sit under the brand rather than run off-screen */
  .site-head .bar{height:auto;padding-top:12px;padding-bottom:12px;
    flex-direction:column;align-items:flex-start;gap:6px}
  .site-head nav{gap:20px;font-size:10px;letter-spacing:.14em;flex-wrap:wrap}
  .brand{gap:9px}
  .brand svg{width:26px;height:26px}
  .brand .name{font-size:20px}
  .hero .inner{padding-bottom:40px}
  .hero.tall{height:88vh}
  .hero .inner{padding-bottom:48px}
  .section{padding:64px 0}
  .article p,.article li{font-size:17px;max-width:73.8ch}   /* 66 * 19/17, matches the lead's width */
  .article p:first-of-type{font-size:19px;max-width:66ch}
  .blk-duo,.blk-tri,.blk-feature{grid-template-columns:1fr}
  /* .blk-feature .ph/.side are pinned to column 1/2 at desktop (styles.css
     ~L290-291); in a single-column grid that leaves the photo in a column
     that no longer exists (0 width) and overflows. Reset both to the flow. */
  .blk-feature .ph,.blk-feature .side{grid-column:auto}
  .blk-spread .ph,.blk-duo .ph,.blk-tri .ph,.blk-feature .ph,
  .guide-body .blk-spread .ph,.guide-body .blk-duo .ph,.guide-body .blk-tri .ph{height:260px}
  .blk-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:140px}
  .blk-mosaic .ph:first-child,.blk-mosaic .ph:last-child{grid-row:auto;grid-column:auto}
  .blk-feature figcaption{border-left:none;border-top:2px solid var(--accent);
    padding:12px 0 0;margin-top:4px}
  .toc ol{columns:1}
  /* neither had a rule below 900px: the footer's 2-col fallback and the
     170px-thumb guide rows both got too tight to hold their content */
  .site-foot .cols{grid-template-columns:1fr}
  .guides-list .row{grid-template-columns:110px 1fr;gap:16px}
  .post-list a{grid-template-columns:40px 1fr}
  .post-list .thumb{display:none}
  .page-head{padding-top:120px}
  .pack-item{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .pack-sec .head h2{font-size:26px}
  .pn{grid-template-columns:1fr}
  .pn .tile{height:200px}
  .pn .tile.next .txt{align-items:flex-start;text-align:left}
  .pn .tile.next .scrim{background:linear-gradient(to right,rgba(15,17,22,.78),rgba(15,17,22,.25))}
  .pn .t{font-size:22px}
  .stats{grid-template-columns:1fr;gap:24px}
  .stats .n{font-size:42px}
  .panel-head{flex-direction:column;align-items:flex-start;gap:14px}
  .mosaic{grid-auto-rows:150px}
  .mosaic .tile .cap{opacity:1;transform:none}
  .grid-all{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}