/* ═══════════════════════════════════════════════════════════════════
   MÜNCHEN '72 - design system tokens + type (Sonnet lane R1A)
   Otl Aicher ticket grammar (cosmos-palette.png) + higgs-ref hero/nav
   grammar. Loads AFTER site.css and replaces every color/radius/
   shadow/type token the existing stylesheet already consumes, so the
   whole cascade repaints without editing site.css's 415 lines.
   Supersedes assets/css/apple-override.css (link removed, file kept).
   See /BRIEF-R1A.md + /DESIGN-SYSTEM-72.md for the source spec.
   ═══════════════════════════════════════════════════════════════════ */

/* ---- self-hosted fonts, latin subset (verified via fontTools cmap
   inspection - Doto-1.woff2 and Archivo-1.woff2 are the "latin" files,
   not latin-ext/vietnamese), no CDN request at runtime ---- */
@font-face{
  font-family:'Doto'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/Doto-1.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:'Doto'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/Doto-1.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:'Archivo'; font-style:normal; font-weight:400; font-stretch:100%; font-display:swap;
  src:url('../fonts/Archivo-1.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:'Archivo'; font-style:normal; font-weight:500; font-stretch:100%; font-display:swap;
  src:url('../fonts/Archivo-1.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:'Archivo'; font-style:normal; font-weight:600; font-stretch:100%; font-display:swap;
  src:url('../fonts/Archivo-1.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{
  /* canonical '72 names from DESIGN-SYSTEM-72.md */
  --paper:#EFEEEA; --paper-2:#F6F5F1; --wit:#FCFCFA;
  --blau:#79C3E6; --blau-deep:#4FA8D8;
  --gruen:#35893E; --gruen-deep:#2A6E32;
  --gelb:#E7DA6A;
  --ink72:#141414;
  --display:'Doto',var(--mono),ui-monospace,monospace;
  --sans72:'Archivo',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* remap every token name site.css already reads, so cards/nav/pills/
     hero/map/footer all repaint from the existing selectors */
  --bg:var(--paper); --panel:var(--paper-2); --panel-soft:var(--wit);
  --ink:var(--ink72); --ink-2:rgba(20,20,20,.72); --ink-3:rgba(20,20,20,.52);
  --line:#14141422; --line-2:#14141433; --glassline:#14141422;
  --accent:var(--blau-deep); --accent-2:var(--blau); --accent-deep:#2E6E8E; --accent-soft:#E4F1F9;
  --green:var(--gruen); --green-soft:#E3F0E4; --blue:var(--blau-deep);
  --serif:var(--sans72); --sans:var(--sans72); --mono:"IBM Plex Mono Local",ui-monospace,monospace;
  --r-lg:2px; --r-md:2px; --r-sm:2px;
  --shadow:0 0 0 1px var(--line); --shadow-lg:0 0 0 1px var(--line);
}

html,body{background:var(--paper); color:var(--ink72)}
body{font-family:var(--sans72)}

/* ---- Doto uppercase display: H1/H2 section titles + serials/big titles
   only - NOT every component heading (venue names, hike titles etc. stay
   Archivo, per "Everything else: Archivo" - dot-matrix at small dense
   sizes reads as garbled, not on-brand) ---- */
h1,
.sec-head h2,
.hero-flight-beat,
footer .f-title,
.brand{
  font-family:var(--display) !important;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
}
h1 em,.sec-head h2 em,.hero-flight-beat em,footer .f-title em,.brand em{
  font-style:normal; color:inherit; font-weight:inherit; text-transform:uppercase;
}

/* ---- Archivo labels: 11px uppercase tracked ---- */
.mini,.count,.est,.area,.tag,.hike .region,
.venue-category,.hours-day b{
  font-family:var(--sans72);
  letter-spacing:.08em;
}

/* ---- stat numbers: Archivo 600 tabular, not Doto ---- */
.n.trip-data{
  font-family:var(--sans72) !important;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ---- sharp ticket corners; pills (nav/tags/chips, all hardcoded
   radius:999px already) are the documented single exception ---- */
.gate-card,.vcard,.bcard,.hike,.map-shell,.maps-dialog,#drive-map,
.terrain-stage-slot,.map-fallback,.hike-gate,.opt,.poll-wrap{
  border-radius:2px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   72 SECTIONS + ROWS (commit 2)
   ═══════════════════════════════════════════════════════════════════ */

/* ---- full-bleed color band section headers, ticket-column grammar ----
   Reuses the exact bleed padding-inline formula .rail.bleed already uses
   (site.css L287) so band content lines up with the rest of .frame. */
section .sec-head{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:20px; text-align:left !important; margin:0 0 30px !important;
  position:relative; box-sizing:border-box;
  /* full-bleed breakout relative to the actual containing block, not raw
     100vw - 100vw can be wider than the clipped viewport by the scrollbar
     gutter width, which pushed content (esp. the right-aligned .count
     stamp) past the visible edge. This formula self-corrects because
     "100%" resolves against .frame's real rendered width. */
  width:auto;
  margin-left:calc(-1 * (100vw - 100%) / 2);
  margin-right:calc(-1 * (100vw - 100%) / 2);
  padding-block:22px;
  padding-inline:max(clamp(16px,3vw,48px),calc((100vw - 1440px)/2 + clamp(16px,3vw,48px)));
}
.band-left{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; min-width:0}
.band-micro{
  display:inline-flex; flex-direction:column; line-height:1.15; flex:0 0 auto;
  font-family:var(--sans72); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; opacity:.62;
}
.band-micro i{font-style:normal}
.sec-head h2{margin:0 !important}
.sec-head .count{
  display:block !important; order:2; flex:0 0 auto;
  font-family:var(--display) !important; font-weight:500 !important; letter-spacing:.03em !important;
  text-transform:none !important; font-size:13px !important; color:inherit !important;
  margin:0 !important; white-space:nowrap;
}
.band-blau{background:var(--blau); color:var(--ink72)}
.band-gruen{background:var(--gruen); color:var(--wit)}
.band-gelb{background:var(--gelb); color:var(--ink72)}
.band-plan{background:var(--wit); color:var(--ink72); border-block:1px solid var(--ink72)}
@media(max-width:700px){
  section .sec-head{flex-wrap:wrap; padding-block:18px; gap:10px 20px}
  .band-left{gap:8px}
}

/* sub-heading inside a section (e.g. Berge's "Schnaps-Hikes") isn't a
   full band - keep it a plain in-page heading */
#berge .frame > .sec-head:not(:first-child){
  width:auto !important; margin-inline:0 !important; padding:0 !important;
  background:none !important; color:inherit !important;
}

section .sec-sub{text-align:left !important; margin:18px 0 22px !important; max-width:60ch}

/* ---- fact strips: full-bleed ink-on-gelb ticker, Doto lead-in ---- */
.fun-fact{
  display:flex !important; align-items:center; gap:14px; flex-wrap:wrap;
  width:auto; max-width:none; margin:0 0 30px !important;
  margin-left:calc(-1 * (100vw - 100%) / 2); margin-right:calc(-1 * (100vw - 100%) / 2);
  padding:14px max(clamp(16px,3vw,48px),calc((100vw - 1440px)/2 + clamp(16px,3vw,48px)));
  background:var(--gelb); color:var(--ink72); border:0 !important; border-radius:0 !important;
  font-family:var(--sans72); font-size:13px; line-height:1.4; box-sizing:border-box;
}
.fun-fact::before{
  content:"Wist je dat"; font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:12px; color:var(--ink72); flex:0 0 auto;
}

/* ---- venue lists: ruled rows, not card grids ---- */
.rail{display:block !important; padding:0 !important; margin:0 0 8px; overflow:visible !important}
.rail.bleed{padding-inline:0 !important}
.vcard{
  display:flex !important; flex-direction:row !important; align-items:center !important;
  gap:16px; width:100%; background:transparent !important; border:0 !important;
  border-bottom:1px solid var(--line) !important; border-radius:0 !important; box-shadow:none !important;
  padding:14px 4px !important; transition:background-color .15s ease; transform:none !important;
}
.vcard:first-child{border-top:1px solid var(--line) !important}
.vcard:hover{transform:none !important; background:rgba(20,20,20,.035) !important; box-shadow:none !important}
.vcard .ph{
  flex:0 0 96px !important; width:96px !important; height:96px !important;
  aspect-ratio:1 !important; border-radius:2px !important;
}
.vcard .bd{flex:1; min-width:0; padding:0 !important; gap:3px !important}
.vcard h3{
  font-family:var(--sans72) !important; font-weight:600 !important; font-size:15px !important;
  text-transform:none !important; letter-spacing:0 !important; order:0 !important;
}
.vcard .area{order:-1 !important}
.vcard .links{margin-top:6px !important; padding-top:0 !important; border-top:0 !important}
.vcard .lnk{border-radius:999px !important}
.vcard .placeholder-mark{font-size:28px !important}
.vcard-featured,.vcard-featured .ph,.vcard-featured .bd,.vcard-featured h3{
  grid-column:auto !important; flex:inherit;
}
.vcard-featured .ph{flex:0 0 96px !important; aspect-ratio:1 !important}
.vcard-featured .bd{padding:0 !important; justify-content:center !important}
.vcard-featured h3{font-size:15px !important}
@media(max-width:560px){
  .vcard .ph{flex-basis:72px !important; width:72px !important; height:72px !important}
  .vcard-featured .ph{flex-basis:72px !important}
}

/* ---- kosten: paper receipt, mono rows, Doto total ---- */
.pcard-cost.receipt{background:var(--paper-2) !important; border:1px solid var(--ink72) !important; box-shadow:none !important; padding:0 !important}
.receipt-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:16px 18px 10px; border-bottom:1px solid var(--ink72)}
.receipt-head h3{font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:18px; font-weight:700; margin:0; display:block}
.receipt-label{display:flex; flex-direction:column; line-height:1.15; font-size:10px; text-transform:uppercase; letter-spacing:.06em; opacity:.62; text-align:right}
.pcard-cost.receipt ul{margin:0; padding:0; list-style:none}
.pcard-cost.receipt li{display:flex; justify-content:space-between; gap:12px; padding:9px 18px; border-bottom:1px dashed var(--line-2); font-family:var(--mono); font-size:12.5px}
.pcard-cost.receipt li:last-child{border-bottom:0}
.pcard-cost.receipt li b{font-family:var(--mono); font-weight:600}
.receipt-total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 18px; border-top:2px solid var(--ink72)}
.receipt-total span{font-family:var(--sans72); font-size:11px; text-transform:uppercase; letter-spacing:.06em}
.receipt-total b{font-family:var(--display); font-size:22px; font-weight:700}

/* ═══════════════════════════════════════════════════════════════════
   72 HERO OVERLAY + STATS (commit 3)
   ═══════════════════════════════════════════════════════════════════ */

/* hero beats already pick up Doto uppercase from the commit-1 rule
   (.hero-flight-beat); nothing further needed there beyond copy edits. */

/* fixed quiet stats mini-block, bottom-right, inside the hero stage -
   independent of hero-flight.js (no [data-hero-beat], JS never touches
   it), so it renders identically in enhanced + reduced-motion fallback */
.hero-stats-mini{
  position:absolute; z-index:4; right:clamp(16px,3vw,40px); bottom:clamp(70px,10vw,116px);
  display:grid; gap:10px 20px; grid-template-columns:1fr; justify-items:end;
  pointer-events:none; color:#fff;
}
.hsm-item{display:flex; align-items:center; gap:8px; justify-content:flex-end}
.hsm-ico{width:16px; height:16px; flex:0 0 auto; opacity:.86}
.hsm-txt{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15}
.hsm-n{font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:.02em}
.hsm-l{font-family:var(--sans72); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.72); white-space:nowrap}
@media(max-width:640px){
  .hero-stats-mini{grid-template-columns:repeat(2,auto); bottom:clamp(60px,9vw,90px); right:16px; gap:8px 14px}
  .hsm-n{font-size:16px}
  .hsm-l{font-size:8.5px}
}

/* ═══════════════════════════════════════════════════════════════════
   72 SWEEP (commit 4)
   ═══════════════════════════════════════════════════════════════════ */

/* nav pill: keep the pill shape + behavior, paper bg, ink text,
   active = blau (the highlight pill already inherits var(--accent)/
   var(--accent-2), which commit 1 remapped to blau/blau-deep - only
   the hardcoded dark-glass colors need overriding here) */
#trip-nav{
  background:rgba(239,238,234,.86) !important;
  border:1px solid rgba(20,20,20,.12) !important;
  box-shadow:0 10px 28px rgba(20,20,20,.14) !important;
}
#trip-nav .pill{color:var(--ink72) !important}
#trip-nav .pill:hover{background:rgba(20,20,20,.06) !important}
#trip-nav .pill.on{color:var(--ink72) !important}
#trip-nav .brand{color:var(--ink72) !important}
#trip-nav .brand em{color:var(--blau-deep) !important}

/* map section chrome: legend/filter chips to ticket palette (city-map.js
   behavior untouched - this only changes .mf's paint, not its wiring) */
.mf{
  font-family:var(--sans72); text-transform:uppercase; letter-spacing:.05em; font-weight:600;
  background:rgba(255,255,255,.92) !important; color:var(--ink72) !important; border-color:transparent !important;
}
.mf.on{border-color:var(--ink72) !important; color:var(--ink72) !important}
.map-tilt-hint{
  position:absolute; z-index:20; right:14px; bottom:14px; padding:7px 12px; border-radius:999px;
  pointer-events:none;
  background:rgba(20,20,20,.82) !important; font-family:var(--sans72); text-transform:uppercase; letter-spacing:.05em; font-size:10px !important;
  color:#fff; backdrop-filter:blur(10px);
}
@media(max-width:700px){.map-tilt-hint{display:none}}

/* ═══════════════════════════════════════════════════════════════════
   72 POLISH (post-CD-review fixes)
   ═══════════════════════════════════════════════════════════════════ */

.est{font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line); border-radius:999px; padding:2px 7px; margin-left:6px; vertical-align:middle}

/* ═══════════════════════════════════════════════════════════════════
   R1C plan strip - HET PLAN v2 ticket-stub roadmap (supersedes the
   .legs/.leg*/.days rules that used to live above this block: that
   whole vertical timeline + 3-card leg row is replaced by the
   horizontal ticket strip below + the stay-rows ruled-row block).
   ═══════════════════════════════════════════════════════════════════ */
.plan-strip-wrap{margin:22px 0 6px; position:relative}
.plan-strip{
  display:flex; gap:14px; overflow-x:auto; overscroll-behavior-inline:contain;
  padding:4px 4px 20px; scroll-snap-type:x mandatory; scrollbar-width:none;
  cursor:grab; touch-action:pan-y;
}
.plan-strip:focus-visible{outline:2px solid var(--blau-deep); outline-offset:4px}
.plan-strip::-webkit-scrollbar{display:none}
.plan-strip.is-dragging{cursor:grabbing; scroll-snap-type:none}
.stub{
  position:relative; flex:0 0 auto; width:192px; min-height:172px;
  box-sizing:border-box; scroll-snap-align:start;
  border:1px solid var(--ink72); border-radius:2px;
  background-color:var(--paper-2);
  background-image:radial-gradient(circle 3px at 6px 8px, var(--paper) 2.6px, transparent 3px);
  background-repeat:repeat-y; background-size:12px 16px; background-position:left top;
  padding:16px 14px 14px 20px; display:flex; flex-direction:column; gap:8px;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.32,.72,0,1);
}
.stub.is-revealed{opacity:1; transform:translateY(0)}
.stub-band{position:absolute; left:0; right:0; top:0; height:6px; background:var(--stub-band, var(--blau))}
.stub-day{font-family:var(--display); font-size:14px; font-weight:500; letter-spacing:.03em; color:var(--ink72)}
.stub-ico{width:22px; height:22px; color:var(--ink72)}
.stub-act{margin:0; font-family:var(--sans72); font-size:12.5px; line-height:1.4; color:var(--ink72); flex:1}
.stub-stay{font-family:var(--sans72); font-size:10.5px; font-weight:700; color:var(--blau-deep); letter-spacing:.01em}
@media(max-width:900px){
  .stub{width:78vw; scroll-snap-align:center}
}
.plan-progress{position:relative; height:2px; background:var(--line); margin:6px 4px 0}
.plan-progress-car{
  position:absolute; top:50%; left:0; width:22px; height:22px;
  transform:translate(-50%,-50%); color:var(--ink72); background:var(--paper);
}
@media(prefers-reduced-motion:reduce){.stub{transition-duration:.12s}}

/* stay blocks, ruled rows under the strip (name left, data right) */
.stay-rows{margin-top:6px}
.stay-row{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 20px; padding:16px 4px; border-bottom:1px solid var(--line)}
.stay-row:first-child{border-top:1px solid var(--line)}
.stay-row-name{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 260px}
.stay-row-name b{font-family:var(--sans72); font-weight:700; font-size:15px; color:var(--ink72)}
.stay-row-name span{font-family:var(--sans72); font-size:12px; color:rgba(20,20,20,.6)}
.stay-row-data{display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 16px; font-family:var(--sans72); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:rgba(20,20,20,.62)}
.stay-row-link{flex:0 0 auto; font-family:var(--sans72); font-weight:700; font-size:12.5px; text-decoration:underline; text-underline-offset:3px; color:var(--ink72)}

/* ═══════════════════════════════════════════════════════════════════
   R1B HERO — route-follow scrollytelling (Sonnet lane, hero v2)
   Replaces the v1 canvas keyframe zoom (see /BRIEF-R1B.md +
   DESIGN-SYSTEM-72.md §Hero v2). The base .hero-flight-canvas /
   .hero-flight-fallback / .hero-flight-shade / .hero-flight-overlay
   geometry rules stay in site.css untouched; these rules add the new
   map + citycard + ticket + serial layers and renumber shade/overlay
   so the stack reads map(1) < citycard(2) < shade(3) <
   overlay/ticket/serial/stats-mini(4).
   ═══════════════════════════════════════════════════════════════════ */
.hero-flight-map{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none}
.hero-flight-citycard{
  position:absolute; inset:0; width:100%; height:100%; z-index:2;
  object-fit:cover; object-position:52% center; opacity:0;
  filter:sepia(8%) saturate(85%); will-change:opacity; pointer-events:none;
}
.hero-flight-shade{z-index:3}
.hero-flight-overlay{z-index:4}
.hero-flight-ticket,.hero-flight-serial{
  position:absolute; left:clamp(16px,3vw,40px); z-index:4; opacity:0;
  pointer-events:none; color:#fff; margin:0; text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.hero-flight-ticket{
  bottom:clamp(70px,10vw,116px); max-width:min(46ch,60vw);
  font-family:var(--sans72); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; line-height:1.3;
}
.hero-flight-serial{
  bottom:clamp(24px,4vw,48px);
  font-family:var(--display); font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:.04em;
}
#hero-flight.is-fallback .hero-flight-map,
#hero-flight.is-fallback .hero-flight-citycard,
#hero-flight.is-fallback .hero-flight-ticket,
#hero-flight.is-fallback .hero-flight-serial{display:none}
@media(max-width:640px){
  .hero-flight-ticket{max-width:min(30ch,70vw); font-size:10px}
}
   VENUE ROW POLISH (post-CD-review, venue detail defects)
   ═══════════════════════════════════════════════════════════════════ */

/* Item 1: the address chip (mapsActionHtml's button, class "lnk map-action
   venue-address") is the sole child of .venue-location, which makes it also
   match site.css's `.vcard .lnk:first-child{background:var(--ink)}` (meant
   for the Website/Menu button in the action row below). That rule wins the
   background by specificity while .venue-address's own `color:var(--ink-2)
   !important` wins the text color - and since commit 1 remapped --ink-2 to
   a mere opacity variant of --ink (not a distinct mid-tone), dark text on a
   dark background is now functionally invisible. Force this specific chip
   back to a light paper card regardless of DOM-position collisions. */
.vcard .venue-address{
  background:var(--paper-2) !important; color:var(--ink72) !important;
  border:1px solid var(--line) !important; border-radius:2px !important;
}

/* Item 5: the same .vcard .lnk:first-child rule inverts whichever action
   link happens to render first (Menu, or Website) to a solid ink pill,
   while its siblings (Instagram/Route/Maps) stay outlined - reads as
   inconsistent. Make all four buttons in the action row the same outlined
   ink-on-paper style, sharp corners per the ticket system (pills are the
   nav/chip exception, not action buttons). */
.vcard .links .lnk,
.vcard .venue-actions .lnk{
  background:transparent !important; color:var(--ink-2) !important;
  border:1px solid var(--line) !important; border-radius:2px !important;
}
.vcard .links .lnk:hover,
.vcard .venue-actions .lnk:hover{
  border-color:var(--ink72) !important; color:var(--ink72) !important;
}