/* Chapters view (includes/view-chapters.php). Opt-in per post via _omtb_view_mode=chapters.
   Token values: DESIGN.md (via DIGEST). Faces: Hanken Grotesk · Instrument Sans.
   Darks are hue-free (R=G=B): the old blue-cast ink is killed (DESIGN.md 2026-10-31).
   Split (text | map) is ULTRAWIDE ONLY; every other screen stacks map-over-story. */
.omtb-vc {
  --ink: #0A0A0A;
  --ember: #FF5B04;
  --ember-text: #FF7D11;
  --teal: #34978F;
  --gold: #E0AA37;
  --bone: #EDE7D8;
  --bone-2: rgba(237,231,216,.84);
  --bone-3: rgba(237,231,216,.6);
  --hair: rgba(237,231,216,.12);
  --glass-thin: linear-gradient(180deg, rgba(26,26,26,.34), rgba(10,10,10,.46));
  --glass: linear-gradient(180deg, rgba(26,26,26,.5), rgba(10,10,10,.62));
  --glass-heavy: linear-gradient(180deg, rgba(30,30,30,.62), rgba(8,8,8,.76));
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.14);
  --r-ctl: 999px; --r-panel: 14px; --r-tip: 8px;
  --face-display: 'Hanken Grotesk', system-ui, sans-serif;
  --face-text: 'Instrument Sans', system-ui, sans-serif;
  --colL: clamp(40px, 4.4vw, 88px);
  --colW: min(640px, 38vw);
  position: relative;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--face-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.omtb-vc-body, body.omtb-vc-body .frame-zero-main { background: #0A0A0A; }
body.omtb-vc-body .frame-zero-main { padding: 0 !important; max-width: none !important; margin: 0 !important; }
.omtb-vc *, .omtb-vc *::before, .omtb-vc *::after { box-sizing: border-box; }
.omtb-vc :is(h1, h2, h3, p, dl, dd, ol, ul, figure) { margin: 0; padding: 0; }
.omtb-vc :is(h1, h2, h3) { color: var(--bone); font-family: var(--face-display); text-transform: none; }
.omtb-vc a { color: inherit; }

/* ───────── stage: ONE sticky map behind hero + story ───────── */
.vc-stage { position: relative; }
.vc-mapwrap {
  position: sticky; top: 0; z-index: 1;
  height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
  pointer-events: none;
}
.vc-map { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: auto; background: var(--ink); }
.vc-mapwrap::after {   /* vignette: edges held to ink so the lit route is the centre of gravity */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 62% 48%, transparent 45%, rgba(10,10,10,.55) 100%),
    linear-gradient(180deg, rgba(10,10,10,.5) 0%, transparent 16%, transparent 82%, rgba(10,10,10,.6) 100%);
}
.vc-map .maplibregl-ctrl-attrib { background: transparent !important; color: rgba(237,231,216,.55); font-size: 10px; }
.vc-map .maplibregl-ctrl-attrib a { color: rgba(237,231,216,.65) !important; }
.vc-map .maplibregl-ctrl-attrib-button { filter: invert(1) opacity(.5); }
.vc-map .maplibregl-cooperative-gesture-screen { font-family: var(--face-text); }

/* ───────── hero ───────── */
.vc-hero { position: relative; z-index: 2; height: 100vh; height: 100svh; pointer-events: none; }
.vc-panel {
  position: absolute; top: 0; bottom: 0; left: 0; pointer-events: auto;
  width: clamp(380px, 33vw, 560px);
  padding: clamp(96px, 12vh, 140px) clamp(32px, 3.4vw, 64px) clamp(40px, 6vh, 88px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(90deg, rgba(10,10,10,.8) 0%, rgba(10,10,10,.56) 62%, rgba(10,10,10,.1) 100%);
  backdrop-filter: blur(18px) saturate(.8); -webkit-backdrop-filter: blur(18px) saturate(.8);
  /* the frosted edge dissolves inside the bottom padding (>= 40px, CTA untouched) instead of cutting a hard
     blur/sharp line across the map as the hero slides off (critic r2) */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
}
.vc-kicker { font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-text); margin: 0 0 18px !important; }
.omtb-vc .vc-title { font-weight: 600; font-size: clamp(44px, 4.2vw, 76px); line-height: .98; letter-spacing: -.025em; margin: 0 0 22px; }
.vc-blurb { font-size: clamp(16px, 1.05vw, 19px); line-height: 1.5; max-width: 34ch; color: var(--bone-2); margin: 0 0 40px !important; }
.vc-stats { display: flex; flex-wrap: nowrap; gap: 22px clamp(20px, 1.8vw, 34px); margin: 0 0 44px !important; list-style: none; }
.vc-stats li { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.vc-stats .v { font-family: var(--face-display); font-weight: 500; font-size: clamp(20px, 1.45vw, 27px); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; color: var(--bone); }
.vc-stats .v small { font-size: .62em; font-weight: 500; color: rgba(237,231,216,.7); margin-left: 3px; letter-spacing: 0; }
.vc-stats .k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-3); }
/* "Read the story" has done its job once the story is on screen: a lone ember half-disc peeked out under
   the pinned strip (1440) and sat orphaned top-left at 2560 (critic r4). */
.omtb-vc.is-story .vc-cta { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.omtb-vc .vc-cta { align-self: flex-start; transition: opacity .35s; display: inline-flex; align-items: center; gap: 16px; font-family: var(--face-display); font-weight: 600; font-size: 17px; color: var(--bone); text-decoration: none; }
.vc-cta .disc { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ember); color: var(--ink); transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s; }
.vc-cta:hover .disc { transform: translateY(3px); background: var(--ember-text); }
.vc-cta svg { width: 18px; height: 18px; }

/* ───────── map markers ───────── */
.vc-ring { width: 22px; height: 22px; border-radius: 50%; border: 3px solid currentColor; background: rgba(10,10,10,.55); box-shadow: 0 0 0 4px rgba(10,10,10,.35), 0 0 18px currentColor; }
.vc-ring.start { color: var(--teal); }
.vc-ring.finish { color: var(--ember); }
.vc-ring.finish.loop { width: 38px; height: 38px; border-width: 2.5px; background: transparent; box-shadow: 0 0 22px rgba(255,91,4,.6); }
.omtb-vc button.vc-pin, .vc-pin {
  -webkit-appearance: none; appearance: none; display: block; width: 48px; height: 48px; cursor: pointer;
  margin: 0; padding: 0 !important; border: 0 !important; border-radius: 50%; background: none !important;
  box-shadow: none; min-width: 0; min-height: 0; line-height: 0; font-size: 0;
}
.vc-pin:focus-visible i { outline: 2px solid var(--ember-text); outline-offset: 3px; }
.vc-pin i {
  display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--bone); background: var(--ink) center/cover no-repeat;
  box-shadow: 0 6px 18px rgba(0,0,0,.55), 0 0 0 3px rgba(10,10,10,.45);
  opacity: 0; transform: scale(.6); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1.2), border-color .3s;
}
.vc-pin.on i { opacity: 1; transform: scale(1); }
.vc-pin.hid { visibility: hidden; pointer-events: none; }
/* Trip overview: the day number rides the pin's lower right edge. */
/* (No position on .vc-pin.day: MapLibre places markers absolutely, and that is the badge's anchor.
   A `position: relative` here once dropped every day pin after the first 48 px further down.) */
.vc-pin.day.nothumb i { display: flex; align-items: center; justify-content: center; background: var(--glass-heavy); }
.vc-pin.day.nothumb i::after { content: attr(data-n); font: 700 17px/1 var(--face-display); color: var(--bone); }
.vc-pin.day.nothumb b { display: none; }
.vc-pin.day b {
  position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-ctl);
  background: var(--bone); color: var(--ink); font: 700 11px/20px var(--face-display); text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.5); opacity: 0; transition: opacity .6s ease;
}
.vc-pin.day.on b { opacity: 1; }
.vc-pin.active i { border-color: var(--ember); transform: scale(1.18); box-shadow: 0 8px 22px rgba(0,0,0,.6), 0 0 0 4px rgba(255,91,4,.28); }
.vc-poi { width: 10px; height: 10px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 0 3px rgba(10,10,10,.6); }

/* ───────── story ───────── */
.vc-story { position: relative; z-index: 2; pointer-events: none; padding: 18vh 0 12vh; }
.vc-col, .vc-rail { pointer-events: auto; }
.vc-col { width: var(--colW); margin-left: var(--colL); }
.vc-sec { padding: 0 0 clamp(96px, 16vh, 180px); scroll-margin-top: 14vh; }
/* the story's last section hands straight to Beta: its own gap plus the story's and Beta's stacked to
   348-540 px of nothing (critic 2026-11-01); the story's bottom padding is the one gap */
.vc-col > .vc-sec:last-child { padding-bottom: 0; }
.vc-sec p { font-size: clamp(17px, 1.12vw, 19.5px); line-height: 1.72; color: var(--bone-2); margin: 0 0 1.05em; max-width: 64ch; }
.vc-sec p strong { color: var(--bone); font-weight: 600; }
.vc-intro p:first-child { font-family: var(--face-display); font-size: clamp(22px, 1.6vw, 28px); line-height: 1.42; letter-spacing: -.01em; color: var(--bone); }
.omtb-vc .vc-sec h2 { font-weight: 600; font-size: clamp(30px, 2.5vw, 46px); line-height: 1.05; letter-spacing: -.022em; margin: 0 0 28px; max-width: 18ch; }
.vc-stamp { font-size: 12px !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ember-text) !important; margin: 0 0 14px !important; font-variant-numeric: tabular-nums; }
.vc-stamp::before { content: ''; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 12px; opacity: .7; }

/* chapter photos: first full column width, the rest beneath in a row */
.vc-photos { display: grid; gap: 8px; margin: 36px 0 0; grid-template-columns: repeat(3, 1fr); }
.vc-photos .vc-ph { display: block; overflow: hidden; border-radius: 2px; background: #141414; aspect-ratio: 4 / 3; }
.vc-photos .vc-ph:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.vc-photos.n2 { grid-template-columns: 1fr; }
.vc-photos.n3 { grid-template-columns: 1fr 1fr; }
.vc-photos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.vc-photos .vc-ph:hover img { transform: scale(1.03); }

/* chapter rail */
.vc-rail { display: none; }

/* ───────── beta ───────── */
.vc-beta, .vc-gallery, .vc-comments { position: relative; z-index: 2; background: var(--ink); }
.vc-beta { padding: clamp(48px, 6vh, 72px) var(--colL) clamp(40px, 6vh, 72px); }
.omtb-vc .vc-beta h2, .omtb-vc .vc-gallery h2 { font-weight: 600; font-size: clamp(30px, 2.5vw, 46px); letter-spacing: -.022em; line-height: 1.05; margin: 0 0 40px; }
.vc-beta dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 120px); max-width: 1180px; }
.vc-beta dl > div { padding: 20px 0 22px; border-top: 1px solid var(--hair); }
.vc-beta dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); margin: 0 0 8px; }
.vc-beta dd { font-size: 17px; line-height: 1.55; color: var(--bone); margin: 0; }

/* ───────── gallery (justified) ───────── */
.vc-gallery { padding: clamp(48px, 8vh, 96px) clamp(16px, 2.4vw, 48px) clamp(72px, 10vh, 120px); }
.omtb-vc .vc-gallery h2 { padding-left: max(0px, calc(var(--colL) - clamp(16px, 2.4vw, 48px))); }
.vc-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-gi { display: block; position: relative; overflow: hidden; background: #141414; flex: calc(var(--ar) * 100) 1 calc(var(--ar) * 230px); aspect-ratio: var(--ar); }
.vc-gi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .4s; filter: brightness(.92); }
.vc-gi:hover img { transform: scale(1.025); filter: brightness(1); }
.vc-gfill { flex: 1000000 1 0; }

/* ───────── comments ───────── */
.vc-comments { padding: 0 var(--colL) clamp(80px, 12vh, 140px); }
.vc-comments details { border-top: 1px solid var(--hair); max-width: 1180px; }
.vc-comments summary { list-style: none; cursor: pointer; padding: 24px 0; font-family: var(--face-display); font-weight: 500; font-size: 17px; color: var(--bone-2); display: flex; align-items: center; gap: 12px; }
.vc-comments summary::-webkit-details-marker { display: none; }
.vc-comments summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .25s; }
.vc-comments details[open] summary::after { transform: rotate(-135deg); }
.vc-comments summary:hover { color: var(--bone); }
.vc-cbody { padding: 8px 0 24px; max-width: 720px; color: var(--bone-2); font-size: 15px; line-height: 1.5; }
.vc-cbody p { margin: 0 0 18px; }
.vc-cbody label { display: block; margin: 0 0 8px; font-size: 13px; letter-spacing: .04em; color: var(--bone-3); }
.omtb-vc .vc-cbody h3 { font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.vc-cbody :is(input, textarea) { background: rgba(237,231,216,.04); border: 1px solid var(--hair); color: var(--bone); border-radius: 2px; padding: 10px 12px; width: 100%; font: inherit; }
.vc-cbody .submit { background: var(--ember); color: var(--ink); border: 0; padding: 12px 22px; border-radius: 999px; font-weight: 600; cursor: pointer; width: auto; }

/* ───────── lightbox ───────── */
.vc-lb { position: fixed; inset: 0; z-index: 100000; background: rgba(10,10,10,.96); display: grid; place-items: center; }
.vc-lb[hidden] { display: none; }
.vc-lb img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.vc-lb button { position: absolute; background: none; border: 0; color: var(--bone); font-size: 44px; line-height: 1; cursor: pointer; padding: 16px 20px; opacity: .7; }
.vc-lb button:hover { opacity: 1; }
.vc-lb-x { top: 12px; right: 12px; font-size: 36px !important; }
.vc-lb-p { left: 8px; top: 50%; transform: translateY(-50%); }
.vc-lb-n { right: 8px; top: 50%; transform: translateY(-50%); }

/* ═════════ SPLIT — ULTRAWIDE ONLY (>= 2000 px and >= 16:9): text left, map right ═════════ */
@media (min-width: 2000px) and (min-aspect-ratio: 16/9) {
  .vc-story {
    background: linear-gradient(90deg,
      rgba(10,10,10,.95) 0,
      rgba(10,10,10,.92) calc(var(--colL) + var(--colW) + 32px),
      rgba(10,10,10,.55) calc(var(--colL) + var(--colW) + 120px),
      rgba(10,10,10,0) calc(var(--colL) + var(--colW) + 260px));
    /* The ink band starts as a fade, not a slab: the hero panel above lets the map through (luma 14-35)
       and the band was solid 10 from its first pixel — a hard step as the hero slid off (critic r2). The
       ramp lives in the story's empty top padding (18vh), above any text. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 min(200px, 16vh));
    mask-image: linear-gradient(180deg, transparent 0, #000 min(200px, 16vh));
  }
}
@media (min-width: 2000px) and (min-aspect-ratio: 16/9) {
  .omtb-vc { --railW: 210px; --colL: calc(clamp(40px, 3vw, 72px) + var(--railW) + 48px); --colW: min(640px, 36vw); }
  .vc-rail { display: block; position: absolute; top: 0; bottom: 0; left: clamp(40px, 3vw, 72px); width: var(--railW); }
  .vc-rail ol { position: sticky; top: 26vh; list-style: none; margin: 0; padding: 0; }
  .vc-rail ol::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--hair); }
  .vc-rail li { margin: 0; }
  .vc-rail a { position: relative; display: grid; grid-template-columns: 9px 1fr; column-gap: 18px; padding: 9px 0; text-decoration: none; color: var(--bone-3); transition: color .3s; }
  .vc-rail a i { grid-row: 1 / 3; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--ink); border: 1.5px solid rgba(237,231,216,.4); transition: background .3s, border-color .3s, transform .3s; }
  .vc-rail .t { font-family: var(--face-display); font-size: 14px; line-height: 1.3; font-weight: 500; }
  .vc-rail .m { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-top: 3px; font-variant-numeric: tabular-nums; }
  .vc-rail a:hover { color: var(--bone); }
  .vc-rail a.past i { background: rgba(237,231,216,.5); border-color: transparent; }
  .vc-rail a.active { color: var(--bone); }
  .vc-rail a.active i { background: var(--ember); border-color: var(--ember); transform: scale(1.25); }
  .vc-rail a.active .m { color: var(--ember-text); opacity: 1; }
}

/* ═════════ STACKED — every screen that is not ultrawide: map pinned on top ═════════ */
@media not all and (min-width: 2000px) and (min-aspect-ratio: 16/9) {
  .omtb-vc { --colL: 0px; --colW: 100%; }
  .vc-hero { z-index: 4; }
  /* height + equal negative margin = zero flow, so the box can shrink to the map and the
     sticky releases the moment the story ends (never over beta). */
  .vc-mapwrap { z-index: 3; --mh: 100svh; height: var(--mh); margin-bottom: calc(-1 * var(--mh));
    transition: height .55s cubic-bezier(.3,.7,.2,1), margin-bottom .55s cubic-bezier(.3,.7,.2,1); }
  .omtb-vc.is-story .vc-mapwrap { --mh: calc(var(--vc-mapH, 40svh) + var(--vc-head, 0px)); }
  .omtb-vc.hide-map.is-story .vc-mapwrap { --mh: 0px; }
  .omtb-vc.hide-map .vc-sec { scroll-margin-top: calc(var(--vc-head, 0px) + 24px) !important; }
  .omtb-vc.is-story .vc-map { top: var(--vc-head, 0px); height: calc(100% - var(--vc-head, 0px)); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
  .omtb-vc.is-story .vc-hero { z-index: 2; }
  .omtb-vc.is-story .vc-mapwrap::after { top: var(--vc-head, 0px); }
  /* the story never slices against the map's bottom edge: it fades out under it */
  .vc-mapwrap::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 44px; pointer-events: none;
    background: linear-gradient(180deg, var(--ink) 0, var(--ink) 24px, rgba(10,10,10,0) 100%);  /* 24px solid, gone by 44: no glyph straddles the edge, and no heading sits in murk (critic r3/r4) */ opacity: 0; transition: opacity .4s; }
  .omtb-vc.is-story .vc-mapwrap::before { opacity: 1; }
  .omtb-vc.hide-map .vc-mapwrap::before { top: var(--vc-head, 0px); }
  .vc-sec { scroll-margin-top: calc(var(--vc-mapH, 40svh) + var(--vc-head, 0px) + 56px) !important; }  /* a jumped-to title lands below the fade */
  .vc-panel {
    top: auto; right: 0; width: auto; padding: 120px 24px 32px;
    background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.78) 28%, rgba(10,10,10,.92) 100%);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    -webkit-mask-image: none; mask-image: none;   /* no blur edge here, and the phone's 26px padding would eat the CTA */
  }
  .omtb-vc .vc-title { font-size: clamp(40px, 8vw, 64px); }
  .vc-blurb { margin-bottom: 28px !important; max-width: 46ch; }
  .vc-stats { flex-wrap: wrap; gap: 18px 32px; margin-bottom: 30px !important; }
  .vc-story { background: var(--ink); padding: 48px 0 12vh; }
  .vc-col { width: auto; max-width: 720px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
  .vc-sec { padding-bottom: 88px; }
  /* one text edge down the page: Beta, comments and the photo heading start where the story's words do
     (they sat 228 px left of it at 1440 on a wider 1080 band — two left edges, critic 2026-11-01). The
     photo wall itself stays wide. */
  /* The box IS the column, as .vc-col is for the story — a full-width band padded down to 624 px read
     as a void at 1728 (gate 2026-11-01). The ink still runs edge to edge, painted outside the box. */
  .vc-adrow { --gut: max(clamp(20px, 5vw, 48px), calc((100% - 1080px) / 2)); padding-left: var(--gut); padding-right: var(--gut); }  /* a 728 leaderboard needs the wider band */
  .vc-beta, .vc-comments { max-width: 720px; margin-left: auto; margin-right: auto; box-sizing: border-box;
    padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px);
    box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
  .vc-gallery { padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px); }
  .omtb-vc .vc-gallery h2 { padding-left: max(0px, calc((100% - 720px) / 2 + clamp(20px, 5vw, 48px))); }
}
/* stacked on a landscape desktop/tablet: the hero type sits on the story column, the pinned map is a wider strip */
@media (min-width: 900px) and (max-width: 1999px) and (orientation: landscape), (min-width: 2000px) and (max-aspect-ratio: 1599/900) and (orientation: landscape) {
  .omtb-vc { --vc-mapH: 44svh; }
  .vc-panel { padding: 160px max(48px, calc((100% - 720px) / 2 + clamp(20px, 5vw, 48px))) 56px; }
  .vc-panel > * { max-width: 760px; }
  .vc-stats { flex-wrap: nowrap; }
}
@media (max-width: 600px) {
  .omtb-vc button.vc-pin, .vc-pin { width: 36px; height: 36px; }
  .vc-panel { padding: 96px 20px 26px; }
  .vc-kicker { font-size: 11px; margin-bottom: 12px !important; }
  .omtb-vc .vc-title { font-size: 40px; margin-bottom: 14px; }
  .vc-blurb { font-size: 15px; margin-bottom: 22px !important; }
  .vc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 24px !important; }
  .vc-stats .v { font-size: 22px; }
  .vc-stats .k { font-size: 11px; }
  .omtb-vc .vc-cta { font-size: 16px; }
  .vc-cta .disc { width: 44px; height: 44px; }
  .vc-sec p { font-size: 17px; line-height: 1.68; }
  .omtb-vc .vc-sec h2 { font-size: 30px; margin-bottom: 20px; }
  .vc-beta dl { grid-template-columns: 1fr; }
  .vc-gi { flex-basis: calc(var(--ar) * 105px); }
  .vc-grid { gap: 4px; }
  .vc-photos { grid-template-columns: 1fr 1fr; }
  .vc-photos.n3, .vc-photos.n4 { grid-template-columns: 1fr 1fr; }
  .vc-photos.n4 .vc-ph:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .omtb-vc *, .omtb-vc *::before { transition: none !important; }
}


/* ═════════ overview ═════════ */
.vc-ov { padding-bottom: clamp(88px, 14vh, 160px); }
.vc-ov-k { font-size: 12px !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ember-text) !important; margin: 0 0 22px !important; }
.vc-ov-k::before { content: ''; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 12px; opacity: .7; }
.vc-ov-text p { font-family: var(--face-display); font-size: clamp(21px, 1.5vw, 26px) !important; line-height: 1.45 !important; letter-spacing: -.01em; color: var(--bone) !important; margin: 0 0 .8em !important; }
.vc-ov-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 28px; margin: 8px 0 0; }
.vc-ov-stats > div { padding: 16px 0 18px; border-top: 1px solid var(--hair); }
.vc-ov-stats > .wide { grid-column: 1 / -1; }   /* Photos fills row 2; Where takes its own row (no empty cell, critic r3) */
.vc-ov-stats dt { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); margin: 0 0 6px; }
.vc-ov-stats dd { margin: 0; font-family: var(--face-display); font-size: 21px; font-weight: 500; color: var(--bone); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.vc-ov-stats dd small { font-size: .62em; color: rgba(237,231,216,.7); }
.vc-ov-block { margin-top: 44px; }
.vc-ov-sub { font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3) !important; margin: 0 0 10px !important; }
.vc-ov-list { list-style: none; counter-reset: none; }
.vc-ov-list li { margin: 0; border-top: 1px solid var(--hair); }
.vc-ov-list li:last-child { border-bottom: 1px solid var(--hair); }
.vc-ov-list a { display: grid; grid-template-columns: 76px 1fr auto; align-items: baseline; gap: 16px; padding: 14px 0; text-decoration: none; color: var(--bone-2); transition: color .25s, padding .35s cubic-bezier(.2,.7,.2,1); }
.vc-ov-list a::after { content: '→'; color: var(--bone-3); transition: transform .35s cubic-bezier(.2,.7,.2,1), color .25s; }
.vc-ov-list a:hover { color: var(--bone); }
.vc-ov-list a:hover::after { transform: translateX(4px); color: var(--ember-text); }
.vc-ov-list .n { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-3); font-variant-numeric: tabular-nums; }
.vc-ov-list .t { font-family: var(--face-display); font-size: 17px; font-weight: 500; }
.vc-ov-days .cur a { color: var(--bone); }
.vc-ov-days .cur .n { color: var(--ember-text); }
.vc-ov-days .cur a::after { content: 'You are here'; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ember-text); }

/* ═════════ ad slots — nothing renders until filled ═════════ */
.vc-ad { position: relative; margin: 0 0 clamp(88px, 14vh, 160px); padding: 28px 0 0; border-top: 1px solid var(--hair); }
.vc-ad-k { position: absolute; top: 9px; left: 0; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); }
.vc-ad > :not(.vc-ad-k) { display: block; max-width: 100%; }
.vc-ad.is-empty { min-height: 160px; border: 1px dashed rgba(237,231,216,.28); padding: 0; display: grid; place-items: center; }
.vc-ad.is-empty .vc-ad-k { position: static; }
.vc-adrow { position: relative; z-index: 2; background: var(--ink); padding-top: clamp(40px, 6vh, 72px); }
.vc-adrow .vc-ad { margin-bottom: 0; }

/* ═════════ hide toggles ═════════ */
.omtb-vc.hide-chphotos .vc-photos,
.omtb-vc.hide-beta .vc-beta, .omtb-vc.hide-beta .vc-ov-beta,
.omtb-vc.hide-gallery .vc-gallery,
.omtb-vc.hide-comments .vc-comments { display: none !important; }
.omtb-vc.hide-map.is-story:not(.view-map) .vc-mapwrap { visibility: hidden; }
.omtb-vc.hide-map .vc-story { background: var(--ink) !important; }
.omtb-vc.hide-map .vc-rail, .omtb-vc.hide-map .vc-col { transition: none; }

/* ═════════ toolbar ═════════ */
.vc-tools {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 28px); visibility: hidden; opacity: 0;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .35s, visibility 0s .5s;
}
.omtb-vc.is-story .vc-tools, .omtb-vc.view-map .vc-tools, .omtb-vc.view-photos .vc-tools {
  transform: translate(-50%, 0); visibility: visible; opacity: 1; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .35s;
}
.vc-bar {
  display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: var(--r-ctl);
  /* dense glass: it floats over the photo wall, and on white sandstone the lighter --glass went mid-grey
     ("Story" 3.6:1, gate 2026-11-01). DESIGN.md: opaque enough to hold its dark tone wherever the light sits. */
  background: linear-gradient(180deg, rgba(22,22,22,.8), rgba(8,8,8,.86)); box-shadow: var(--glass-edge), 0 14px 38px rgba(0,0,0,.5);
  backdrop-filter: blur(18px) saturate(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.05);
  white-space: nowrap;
}
.omtb-vc .vc-tools button {
  -webkit-appearance: none; appearance: none; margin: 0; min-width: 0; min-height: 0;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  height: 40px; padding: 0 16px !important; border-radius: var(--r-ctl) !important;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 500 14px/1 var(--face-text); letter-spacing: .01em; color: var(--bone-2); text-transform: none;
  transition: color .2s, background-color .25s;
}
.omtb-vc .vc-tools button:hover { color: var(--bone); background: rgba(237,231,216,.07) !important; }
.omtb-vc .vc-tools button:focus-visible { outline: 2px solid var(--ember-text); outline-offset: 2px; }
.omtb-vc .vc-tools button[aria-pressed="true"], .omtb-vc .vc-tools button[aria-expanded="true"] { color: var(--bone); background: rgba(237,231,216,.14) !important; }
.vc-bt svg { width: 18px; height: 18px; flex: none; }
.vc-bt svg circle[fill="#0A0A0A"] { fill: #1c1c1c; }
.vc-seg { display: flex; gap: 2px; }
.vc-div { width: 1px; height: 22px; background: var(--hair); margin: 0 4px; }

.vc-sheet {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  width: min(380px, calc(100vw - 32px)); max-height: min(62vh, 560px); overflow: auto; overscroll-behavior: contain;
  padding: 18px 8px 10px; border-radius: var(--r-panel);
  background: var(--glass-heavy); box-shadow: var(--glass-edge), 0 18px 48px rgba(0,0,0,.55);
  backdrop-filter: blur(20px) saturate(1.05); -webkit-backdrop-filter: blur(20px) saturate(1.05);
}
.vc-sheet[hidden] { display: none; }
.vc-sheet-h { font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3) !important; margin: 0 12px 10px !important; }
.vc-toc { list-style: none; }
.vc-toc li { margin: 0; }
.vc-toc a { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: var(--r-tip); text-decoration: none; color: var(--bone-2); transition: background-color .2s, color .2s; }
.vc-toc a:hover { background: rgba(237,231,216,.07); color: var(--bone); }
.vc-toc .n { font-size: 11.5px; letter-spacing: .06em; color: var(--bone-3); font-variant-numeric: tabular-nums; }
.vc-toc .t { font-family: var(--face-display); font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.vc-toc a.active { color: var(--bone); }
.vc-toc a.active .n { color: var(--ember-text); }
.vc-toc a.active .t::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); margin-left: 10px; vertical-align: middle; }
.vc-sw { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; border-radius: var(--r-tip); cursor: pointer; color: var(--bone-2); font-size: 15px; }
.vc-sw:hover { background: rgba(237,231,216,.07); color: var(--bone); }
.vc-sw input { -webkit-appearance: none; appearance: none; flex: none; width: 38px; height: 22px; margin: 0; border-radius: var(--r-ctl); background: rgba(237,231,216,.16); position: relative; cursor: pointer; transition: background-color .25s; border: 0; }
.vc-sw input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bone); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.vc-sw input:checked { background: rgba(237,231,216,.86); }
.vc-sw input:checked::after { background: #0A0A0A; }
.vc-sw input:checked::after { transform: translateX(16px); }
.vc-sw input:focus-visible { outline: 2px solid var(--ember-text); outline-offset: 2px; }

/* ink under the fixed site header once the story is moving, so its glass never blurs body copy into a smudge */
.omtb-vc.is-story::before, .omtb-vc.view-map::before, .omtb-vc.view-photos::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--vc-head, 0px); background: var(--ink); z-index: 49; pointer-events: none;
}
.omtb-vc.view-photos .vc-story { visibility: hidden; }

/* ═════════ views ═════════ */
html.vc-locked { overflow: hidden; }
.omtb-vc.view-map .vc-mapwrap {
  position: fixed !important; top: var(--vc-head, 0px); left: 0; right: 0; bottom: 0;
  height: auto !important; margin: 0 !important; z-index: 50; visibility: visible !important; transition: none !important;
}
.omtb-vc.view-map .vc-map { top: 0 !important; height: 100% !important; box-shadow: none !important; }
.omtb-vc.view-map .vc-mapwrap::after { top: 0 !important; background: radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(10,10,10,.5) 100%); }
.vc-mapcard {
  position: absolute; left: 16px; bottom: 88px; z-index: 3; pointer-events: auto;
  width: min(360px, calc(100% - 32px)); display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center;
  padding: 10px 14px 10px 10px; border-radius: var(--r-panel);
  background: var(--glass); box-shadow: var(--glass-edge), 0 14px 38px rgba(0,0,0,.5);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.vc-mapcard[hidden] { display: none; }
.vc-mc-ph { display: block; width: 96px; height: 72px; background: #141414 center/cover no-repeat; }
.vc-mc-m { font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-text) !important; margin: 0 0 4px !important; }
.vc-mc-t { font-family: var(--face-display); font-size: 17px !important; font-weight: 600; line-height: 1.2; color: var(--bone) !important; margin: 0 0 8px !important; }
.omtb-vc .vc-mc-go { -webkit-appearance: none; appearance: none; border: 0 !important; background: none !important; padding: 0 !important; margin: 0; min-height: 0; cursor: pointer; font: 500 13.5px/1.2 var(--face-text); color: var(--bone-2); border-bottom: 1px solid var(--hair) !important; padding-bottom: 2px !important; }
.omtb-vc .vc-mc-go:hover { color: var(--bone); }
.omtb-vc.view-map .vc-panel, .omtb-vc.view-map .vc-story, .omtb-vc.view-photos .vc-hero { visibility: hidden; }

.vc-pv { position: fixed; top: var(--vc-head, 0px); left: 0; right: 0; bottom: 0; z-index: 50; overflow: auto; overscroll-behavior: contain; background: var(--ink); padding: clamp(40px, 7vh, 88px) clamp(16px, 2.4vw, 48px) 140px; }
.vc-pv[hidden] { display: none; }
.vc-pv-g { margin: 0 0 clamp(48px, 8vh, 96px); }
.vc-pv-h { display: flex; align-items: baseline; gap: 16px; margin: 0 0 18px; padding-left: max(0px, calc((100% - 1480px) / 2)); }
.vc-pv-h .m { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-text); font-variant-numeric: tabular-nums; }
.omtb-vc .vc-pv-h h3 { font-size: clamp(22px, 1.8vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.vc-pv-h .c { font-size: 12px; color: var(--bone-3); letter-spacing: .06em; }
.vc-pv .vc-grid { max-width: 1480px; margin: 0 auto; }

@media (max-width: 600px) {
  .vc-tools { left: 12px; right: 12px; transform: translateY(28px); }
  .omtb-vc.is-story .vc-tools, .omtb-vc.view-map .vc-tools, .omtb-vc.view-photos .vc-tools { transform: none; }
  .vc-bar { justify-content: space-between; }
  .vc-bt .l { display: none; }
  .omtb-vc .vc-tools button { padding: 0 13px !important; font-size: 13.5px; }
  .vc-sheet { left: 0; right: 0; width: auto; transform: none; }
  .vc-ov-list a { grid-template-columns: 58px 1fr auto; gap: 12px; }
  .vc-ov-days .cur a::after { content: '•'; font-size: 16px; }
  .vc-mapcard { left: 12px; right: 12px; width: auto; bottom: 84px; }
  .vc-pv-h { flex-wrap: wrap; gap: 6px 12px; }
}