/* ════════════════════════════════════════════════════════════════
   FLAVOR TREK — ROAD ATLAS
   Paper, ink, route red and interstate blue. Everything here is
   static; trek.js adds map interaction, the territory finder and
   a little road-trip mischief.
   ════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Overpass';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/overpass-var.woff2') format('woff2')}
@font-face{font-family:'Overpass';font-style:italic;font-weight:100 900;font-display:swap;src:url('fonts/overpass-var-italic.woff2') format('woff2')}
@font-face{font-family:'Overpass Mono';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/overpass-mono-var.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url('fonts/newsreader-var-italic.woff2') format('woff2')}

:root{
  color-scheme:light;
  --paper:#f1e9d2; --paper-2:#e9dfc4; --paper-3:#ded2b2; --card:#f7f1e1;
  --ink:#2a2620; --ink-2:#5a5244; --ink-3:#877c67; --rule:#c9bc9a;
  --route:#c1352b; --route-2:#9e2a22; --blue:#1d4a8a; --blue-2:#163a6d; --sign:#1f6b45;
  --gold:#d8a232;
  --sans:'Overpass',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Overpass Mono',ui-monospace,Menlo,monospace;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --w:1180px; --r:6px;
  --shadow:0 1px 0 rgba(42,38,32,.06),0 10px 30px -12px rgba(42,38,32,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
a:hover{color:var(--route)}
h1,h2,h3,h4{line-height:1.08;margin:0;text-wrap:balance;font-weight:850}
p{text-wrap:pretty}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:3px solid var(--route);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}
.mono{font-family:var(--mono);letter-spacing:.02em}
.note{font-family:var(--serif);font-style:italic;font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── masthead ─────────────────────────────────────────────── */
.mast{position:sticky;top:0;z-index:50;background:rgba(241,233,210,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:3px double var(--ink)}
.mast .wrap{display:flex;align-items:center;gap:1rem;min-height:64px}
.mast-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);flex-shrink:0}
.mast-brand img{width:40px;height:40px;border-radius:9px;border:1.5px solid var(--ink);background:var(--ink);padding:3px}
.mast-brand b{display:block;font-weight:900;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.mast-brand small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--route);text-transform:uppercase;margin-top:.25rem}
.mast nav{margin-left:auto}
.mast ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem;align-items:center}
.mast nav a{display:block;padding:.45rem .7rem;font-weight:700;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-radius:4px;white-space:nowrap}
.mast nav a:hover{background:var(--paper-2);color:var(--route)}
.mast nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.mast nav .xw a{font-size:.74rem;color:var(--ink-2);border:1px solid var(--rule)}
.menu-btn{display:none;margin-left:auto;font:700 .8rem var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:.5rem .8rem;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);border-radius:4px;cursor:pointer}
@media (max-width:1020px){ .mast nav .xw{display:none} }
@media (max-width:820px){
  .menu-btn{display:block}
  .mast nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:3px double var(--ink);display:none}
  .mast nav.open{display:block}
  .mast ul{flex-direction:column;align-items:stretch;padding:.5rem 16px 1rem;gap:0}
  .mast nav a{padding:.8rem .4rem;border-bottom:1px dashed var(--rule);border-radius:0;font-size:.95rem}
  .mast nav .xw{display:block}
  .mast nav .xw a{border:0;border-bottom:1px dashed var(--rule)}
}

/* ── shared type blocks ──────────────────────────────────── */
.kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--route)}
.kicker::before{content:'';width:22px;height:3px;background:var(--route)}
.section{padding:clamp(3.5rem,8vw,6rem) 0;position:relative}
.section--band{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sec-head{max-width:760px;margin-bottom:2.2rem}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.2rem);margin:.55rem 0 .6rem;letter-spacing:-.01em}
.sec-head p{margin:0;color:var(--ink-2);font-size:1.08rem}
.lede{font-size:clamp(1.08rem,1.6vw,1.25rem);color:var(--ink-2);max-width:62ch}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.25rem;font:800 .86rem var(--sans);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;border-radius:4px;border:2px solid var(--ink);color:var(--ink);background:var(--card);cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);color:var(--ink)}
.btn--red{background:var(--route);border-color:var(--route-2);color:#fff}
.btn--red:hover{color:#fff;box-shadow:4px 4px 0 var(--route-2)}
.btn--blue{background:var(--blue);border-color:var(--blue-2);color:#fff}
.btn--blue:hover{color:#fff;box-shadow:4px 4px 0 var(--blue-2)}
.badge-link img{height:48px;width:auto}
.pro{display:inline-block;vertical-align:.2em;margin-left:.35rem;font:800 .62rem var(--mono);letter-spacing:.12em;padding:.18rem .45rem .12rem;border-radius:3px;background:var(--route);color:#fff}

/* ── highway shields ─────────────────────────────────────── */
.shield{display:inline-block;width:var(--s,74px);height:auto;flex-shrink:0;filter:drop-shadow(0 2px 0 rgba(42,38,32,.25))}
.shield text{font-family:var(--sans);font-weight:900}

/* ── index cover ─────────────────────────────────────────── */
.cover{position:relative;padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(3rem,6vw,4.5rem);overflow:hidden}
.cover-band{background:var(--route);color:#fff;border-top:3px double #fff;border-bottom:3px double #fff;box-shadow:0 0 0 3px var(--route)}
.cover-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.5rem;padding-bottom:.5rem;font:700 .74rem var(--mono);letter-spacing:.2em;text-transform:uppercase}
.cover-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:clamp(1.8rem,4vw,2.8rem)}
.cover h1{font-size:clamp(3.2rem,9vw,7.2rem);font-weight:900;letter-spacing:-.035em;line-height:.86;text-transform:uppercase}
.cover h1 span{display:block;color:var(--route)}
.cover h1 em{display:block;font:italic 400 clamp(1.3rem,2.6vw,1.9rem)/1.2 var(--serif);text-transform:none;letter-spacing:0;color:var(--ink-2);margin-top:.9rem}
.cover .lede{margin:1.4rem 0 1.1rem}
.cover .tagline{font:700 .78rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 1.6rem}
.edition{position:absolute;right:max(24px,calc((100vw - var(--w))/2 + 24px));top:4.4rem;width:104px;height:104px;border-radius:50%;background:var(--gold);color:var(--ink);
  display:grid;place-items:center;text-align:center;transform:rotate(12deg);box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink);font:900 .7rem/1.05 var(--sans);letter-spacing:.08em;text-transform:uppercase;z-index:2;cursor:pointer;border:0}
.edition b{display:block;font-size:1.7rem;letter-spacing:-.02em}
.edition:hover{transform:rotate(-8deg) scale(1.05);transition:transform .3s}
@media (max-width:900px){.cover-grid{grid-template-columns:1fr}.edition{top:3.6rem;width:84px;height:84px}.edition b{font-size:1.35rem}}
.cover-map{position:relative}

/* ── map frame (atlas plate) ─────────────────────────────── */
.plate{position:relative;background:var(--card);border:1.5px solid var(--ink);box-shadow:var(--shadow);padding:22px}
.plate::before{content:'';position:absolute;inset:6px;border:1px solid var(--ink);pointer-events:none}
.plate-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font:700 .7rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding:0 .3rem .5rem}
.plate-head b{color:var(--route)}
.map{position:relative}
.map svg{display:block;width:100%;height:auto;overflow:visible}
.land{fill:var(--paper-2);stroke:var(--ink-3);stroke-width:.8;stroke-linejoin:round}
.mesh{fill:none;stroke:var(--rule);stroke-width:.6;stroke-dasharray:2.4 1.8}
.map .inset{fill:none;stroke:var(--ink-3);stroke-width:.7;stroke-dasharray:4 3}
.map .ticks text{font:600 10px var(--mono);fill:var(--ink-3)}
.map .ticks line{stroke:var(--rule);stroke-width:.6}
.map .reg{fill:var(--c);fill-opacity:.78;stroke:var(--ink);stroke-width:.55;stroke-linejoin:round;cursor:pointer;transition:fill-opacity .15s}
.map .reg.macro{fill-opacity:.4}
.map .reg:hover,.map .reg.on{fill-opacity:1;stroke:var(--route);stroke-width:1.6}
.map.has-sel .reg:not(.on){fill-opacity:.28}
.map .route{fill:none;stroke:var(--route);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:9 7}
.map .route-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.map.in .route-draw{animation:draw 3.4s cubic-bezier(.6,.05,.3,1) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.map .stop circle{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.map .stop text{font:800 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:4px}
.map .pin{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.map .pin path{fill:var(--route);stroke:var(--ink);stroke-width:1.5}
.map .pin circle{fill:#fff}
.map .pin text{font:800 11px var(--mono);letter-spacing:.1em;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:4px}
.map .car{font-size:26px}
.readout{display:flex;align-items:center;gap:.8rem;min-height:3.2rem;margin-top:.8rem;padding:.6rem .9rem;border:1.5px dashed var(--rule);border-radius:var(--r);background:var(--paper)}
.readout i{width:16px;height:16px;border-radius:3px;border:1.5px solid var(--ink);background:var(--c,transparent);flex-shrink:0}
.readout b{font-weight:850}
.readout span{color:var(--ink-2)}
.readout .note{color:var(--ink-2)}
.compass{position:absolute;left:34px;top:52%;width:62px;height:62px;border:0;background:none;padding:0;cursor:pointer;transition:transform 1.2s cubic-bezier(.2,.9,.2,1)}
@media (max-width:640px){.compass{width:36px;height:36px;left:18px}}

/* ── app page header ─────────────────────────────────────── */
.route-hero{padding:clamp(2.2rem,5vw,3.8rem) 0 clamp(2.5rem,5vw,4rem)}
.crumbs{font:600 .74rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.4rem}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--route)}
.rh-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.rh-title{display:flex;align-items:center;gap:1.1rem;margin:.8rem 0 1.1rem}
.rh-title h1{font-size:clamp(2.8rem,7.4vw,5.6rem);font-weight:900;letter-spacing:-.03em;line-height:.9;text-transform:uppercase}
.rh-sub{font-size:clamp(1.05rem,1.7vw,1.22rem);color:var(--ink-2);max-width:60ch;margin:0 0 1rem}
.rh-tag{font:700 .78rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:0 0 1.6rem}
.stamp{position:relative;width:clamp(150px,20vw,230px);transform:rotate(3deg)}
.stamp img{border-radius:22%;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.stamp::after{content:attr(data-mark);position:absolute;left:-18%;bottom:-8%;font:900 .8rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--route);
  border:3px solid var(--route);border-radius:6px;padding:.45rem .6rem .35rem;transform:rotate(-14deg);background:rgba(247,241,225,.88)}
@media (max-width:720px){.rh-grid{grid-template-columns:1fr}.stamp{order:-1;width:120px}.stamp::after{font-size:.62rem}}

/* ── finder ──────────────────────────────────────────────── */
.finder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:1.5rem;align-items:start}
@media (max-width:900px){.finder{grid-template-columns:1fr}}
.find-card{background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);padding:1.4rem;box-shadow:var(--shadow);position:sticky;top:86px}
@media (max-width:900px){.find-card{position:static}}
.find-card h3{font-size:1.45rem;margin-bottom:.3rem}
.find-card > p{margin:.2rem 0 1rem;color:var(--ink-2);font-size:.95rem}
.find-card select{width:100%;font:600 1rem var(--sans);padding:.7rem .8rem;border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);color:var(--ink);margin-top:.6rem}
.find-card .or{display:flex;align-items:center;gap:.6rem;font:700 .68rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:1rem 0 .1rem}
.find-card .or::before,.find-card .or::after{content:'';flex:1;border-top:1px dashed var(--rule)}
.find-card .btn{width:100%;justify-content:center}
.ticket{margin-top:1.2rem;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);overflow:hidden;display:none}
.ticket.show{display:block;animation:pop .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{from{transform:translateY(8px) scale(.97);opacity:0}}
.ticket-band{height:12px;background:var(--c,var(--ink));border-bottom:1.5px solid var(--ink)}
.ticket-body{padding:1rem 1.1rem 1.1rem}
.ticket small{display:block;font:700 .68rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.ticket h4{font-size:1.5rem;margin:.3rem 0 .35rem}
.ticket .dish{font-weight:800;color:var(--route);margin:0}
.ticket .style{margin:.25rem 0 0;color:var(--ink-2);font-size:1.02rem}
.ticket .coords{margin:.8rem 0 0;padding-top:.6rem;border-top:1px dashed var(--rule);font:600 .76rem var(--mono);color:var(--ink-3)}
.find-status{min-height:1.4em;margin:.8rem 0 0;font:600 .8rem var(--mono);color:var(--ink-2)}
.find-status.err{color:var(--route)}
.fine{font-size:.82rem;color:var(--ink-3);margin:1rem 0 0;line-height:1.5}

/* ── gazetteer ───────────────────────────────────────────── */
.gaz{columns:3 290px;column-gap:2.4rem;margin:0;padding:0;list-style:none}
.gaz li{break-inside:avoid;margin:0 0 .15rem}
.gaz button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:14px 1fr auto;gap:.2rem .6rem;align-items:baseline;width:100%;padding:.42rem .3rem;border-bottom:1px dotted var(--rule);cursor:pointer;border-radius:3px}
.gaz button:hover,.gaz button.on{background:var(--card)}
.gaz button:focus-visible{outline:2px solid var(--route)}
.gaz i{width:12px;height:12px;border:1px solid var(--ink);border-radius:2px;background:var(--c);transform:translateY(1px)}
.gaz b{font-weight:750;font-size:.98rem;line-height:1.25}
.gaz .ref{font:700 .78rem var(--mono);color:var(--route)}
.gaz .note{grid-column:2 / 4;font-size:.92rem;color:var(--ink-2);line-height:1.3}
.gaz-legend{display:flex;flex-wrap:wrap;gap:1.2rem;font:600 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:-1rem 0 1.4rem}

/* ── legend / features ───────────────────────────────────── */
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;border-top:1.5px solid var(--ink)}
.leg{display:grid;grid-template-columns:52px 1fr;gap:1rem;padding:1.4rem .4rem 1.4rem 0;border-bottom:1px solid var(--rule)}
.leg svg{width:44px;height:44px}
.leg h3{font-size:1.2rem;margin:.15rem 0 .35rem}
.leg p{margin:0;color:var(--ink-2);font-size:.98rem}
@media (min-width:700px){.legend .leg:nth-child(odd){padding-right:2rem;border-right:1px solid var(--rule)} .legend .leg:nth-child(even){padding-left:2rem}}

/* ── postcards (screenshots) ─────────────────────────────── */
.postcards{display:flex;gap:clamp(1rem,3vw,2rem);justify-content:center;flex-wrap:wrap;padding:1rem 0}
.postcard{width:212px;background:#fff;padding:10px 10px 38px;border:1px solid var(--rule);box-shadow:var(--shadow);transform:rotate(var(--t,0deg));transition:transform .25s;position:relative}
.postcard:nth-child(3n+1){--t:-2.5deg}.postcard:nth-child(3n+2){--t:1.8deg}.postcard:nth-child(3n){--t:-.8deg}
.postcard:hover{transform:rotate(0) translateY(-6px)}
.postcard::before{content:'';position:absolute;top:-12px;left:50%;width:70px;height:24px;transform:translateX(-50%) rotate(-3deg);background:rgba(216,162,50,.55);border:1px solid rgba(160,120,40,.35)}
.postcard img{width:100%;aspect-ratio:294/640;object-fit:cover;border:1px solid var(--rule)}
.postcard figcaption{position:absolute;left:10px;right:10px;bottom:8px;font:italic 400 .9rem var(--serif);color:var(--ink-2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.postcards{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;padding:1.4rem 16px 1rem;margin:0 -24px}.postcard{flex:0 0 190px;scroll-snap-align:center}}

/* ── fares (pricing) ─────────────────────────────────────── */
.fares{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem}
.fare{position:relative;background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);padding:1.3rem 1.3rem 1.2rem;
  -webkit-mask:radial-gradient(circle 9px at 0 62%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 62%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 9px at 0 62%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 62%,#0000 98%,#000) right/51% 100% no-repeat}
.fare small{font:700 .66rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.fare h3{font-size:1.3rem;margin:.35rem 0 .3rem}
.fare .price{font:900 1.5rem var(--sans);color:var(--blue);letter-spacing:-.01em}
.fare .type{font:700 .7rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--route);margin:.1rem 0 .9rem;padding-bottom:.9rem;border-bottom:1.5px dashed var(--rule)}
.fare p{margin:0;font-size:.94rem;color:var(--ink-2)}
.fare--hot{background:#fff6dc;border-color:var(--route);border-width:2px}
.fare--hot::after{content:attr(data-stamp);position:absolute;top:.9rem;right:.9rem;font:900 .62rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--route);border:2px solid var(--route);padding:.3rem .45rem .2rem;border-radius:4px;transform:rotate(8deg)}
.tips-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:2.6rem 0 1rem}
.tips-head h3{font-size:1.5rem}
.tips-head p{margin:0;color:var(--ink-2)}
.fares--tips .fare{padding:1rem 1.1rem}
.fares--tips .fare h3{font-size:1.08rem}
.fares--tips .fare .type{margin-bottom:.6rem;padding-bottom:.6rem}

/* ── index: how it works / collection / about ────────────── */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem;counter-reset:mile}
.how-item{position:relative;padding:1.4rem 1.2rem 1.2rem;border-top:4px solid var(--ink);background:var(--card);box-shadow:var(--shadow)}
.how-item::before{counter-increment:mile;content:'MILE ' counter(mile,decimal-leading-zero);display:block;font:800 .7rem var(--mono);letter-spacing:.16em;color:var(--route);margin-bottom:.6rem}
.how-item h3{font-size:1.3rem;margin-bottom:.4rem}
.how-item p{margin:0;color:var(--ink-2);font-size:.97rem}
.collection{display:grid;gap:2rem}
.route-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0;background:var(--card);border:1.5px solid var(--ink);box-shadow:var(--shadow);border-radius:var(--r);overflow:hidden}
.route-card:nth-child(even){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.route-card:nth-child(even) .rc-map{order:2;border-left:1.5px solid var(--ink);border-right:0}
.rc-body{padding:clamp(1.3rem,3vw,2.2rem)}
.rc-top{display:flex;align-items:center;gap:1rem;margin-bottom:.9rem}
.rc-top img{width:64px;height:64px;border-radius:15px;border:1.5px solid var(--ink)}
.rc-top h3{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;letter-spacing:-.02em;text-transform:uppercase}
.rc-top h3 a{color:inherit;text-decoration:none}
.rc-top h3 a:hover{color:var(--route)}
.rc-body > p{color:var(--ink-2);margin:0 0 1rem}
.rc-body ul{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.25rem}
.rc-body li{display:flex;gap:.6rem;align-items:baseline;font-weight:650;font-size:.95rem}
.rc-body li::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--route);box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--ink);flex-shrink:0;transform:translateY(-1px)}
.rc-map{background:var(--paper);border-right:1.5px solid var(--ink);padding:14px;display:flex;flex-direction:column;justify-content:center;text-decoration:none;position:relative}
.rc-map .map .reg{cursor:inherit}
.rc-map:hover .map .reg{fill-opacity:1}
.rc-map::after{content:attr(data-label);position:absolute;top:12px;left:14px;font:700 .66rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:820px){.route-card,.route-card:nth-child(even){grid-template-columns:1fr}.route-card:nth-child(even) .rc-map,.rc-map{order:-1;border:0;border-bottom:1.5px solid var(--ink)}}
.colophon{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.colophon h3{font-size:1.5rem;margin-bottom:.6rem}
.colophon p{color:var(--ink-2)}
.colophon .dba{font:700 .8rem var(--mono);letter-spacing:.08em;color:var(--route)}
.colophon img{background:var(--ink);padding:26px;border-radius:24px;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--route);max-width:300px;margin:0 auto;transform:rotate(-2deg)}
@media (max-width:820px){.colophon{grid-template-columns:1fr}}

/* ── documents (support / privacy / terms) ───────────────── */
.doc-hero{padding:clamp(2.2rem,5vw,3.6rem) 0 1.2rem}
.doc-hero h1{font-size:clamp(2.6rem,7vw,4.8rem);font-weight:900;letter-spacing:-.03em;text-transform:uppercase;margin:.6rem 0 .8rem}
.doc-hero p{color:var(--ink-2);margin:0}
.doc{background:var(--card);border:1.5px solid var(--ink);box-shadow:var(--shadow);padding:clamp(1.4rem,4vw,3rem);max-width:860px;margin:0 auto 4rem;position:relative}
.doc::before{content:'';position:absolute;inset:6px;border:1px solid var(--ink);pointer-events:none}
.doc h2{font-size:1.5rem;margin:2.2rem 0 .7rem;padding-top:1.2rem;border-top:1.5px dashed var(--rule)}
.doc h2:first-child{margin-top:0;padding-top:0;border:0}
.doc h3{font-size:1.12rem;margin:1.4rem 0 .4rem}
.doc p,.doc li{color:var(--ink-2)}
.doc ul,.doc ol{padding-left:1.3rem}
.doc strong{color:var(--ink)}
.doc .highlight-box{border-left:5px solid var(--route);background:#fff6dc;padding:1rem 1.2rem;margin:0 0 1.5rem;border-radius:0 var(--r) var(--r) 0}
.doc .contact-btn{display:inline-block;margin:.4rem 0 .6rem;padding:.75rem 1.2rem;background:var(--route);color:#fff !important;text-decoration:none;font:800 .85rem var(--sans);letter-spacing:.08em;text-transform:uppercase;border-radius:4px;border:2px solid var(--route-2)}
.doc .app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.doc .app-card{border:1.5px solid var(--ink);border-radius:var(--r);padding:1rem 1.1rem;background:var(--paper)}
.doc .app-card h3{margin:0 0 .3rem}
.doc .app-card p{margin:0;font-size:.94rem}
.doc .meta{margin-top:2rem;padding-top:1rem;border-top:1.5px dashed var(--rule);font:600 .8rem var(--mono);color:var(--ink-3)}
.doc .meta p{color:var(--ink-3)}

/* ── back cover (footer) ─────────────────────────────────── */
.back{background:var(--ink);color:#d9cfb6;padding:3.5rem 0 2rem;border-top:6px solid var(--route);position:relative}
.back::before{content:'';position:absolute;left:0;right:0;top:-12px;height:6px;background:var(--blue)}
.back a{color:#efe6cf;text-decoration:none}
.back a:hover{color:var(--gold)}
.back-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem}
@media (max-width:860px){.back-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.back-grid{grid-template-columns:1fr}}
.back h4{font:800 .72rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 .9rem}
.back ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.94rem}
.back .shields{display:flex;gap:.6rem;margin:1rem 0}
.back .shields .shield{--s:52px;filter:none}
.back p{margin:.3rem 0;font-size:.94rem}
.back .social{display:flex;gap:.6rem;margin-top:1rem}
.back .social a{display:grid;place-items:center;width:36px;height:36px;border:1px solid #5a5244;border-radius:50%}
.back .social svg{width:16px;height:16px}
.back .fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-top:2.6rem;padding-top:1.2rem;border-top:1px dashed #5a5244;font:600 .74rem var(--mono);color:#a89d84}

/* ── reveal & toast ──────────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,160%);background:var(--ink);color:var(--paper);padding:.8rem 1.2rem;border-radius:6px;font:700 .86rem var(--mono);letter-spacing:.04em;z-index:90;transition:transform .45s cubic-bezier(.3,1.4,.5,1);max-width:calc(100vw - 32px);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.toast.show{transform:translate(-50%,0)}
.roadtrip{position:fixed;left:-80px;bottom:10px;font-size:44px;z-index:89;pointer-events:none;transform:scaleX(-1)}
.roadtrip.go{animation:drive 5.5s linear forwards}
@keyframes drive{to{left:calc(100vw + 80px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .map .route-draw{stroke-dashoffset:0}
}
@media print{.mast,.back,.find-card,.compass{display:none}body{background:#fff}}
.map .road{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-dasharray:6 5;stroke-linecap:round}
.map .route-draw{stroke-width:3.2}
.map a .stop-shield{transition:transform .2s}
.map a:hover .stop circle,.map a:focus-visible .stop circle{fill:var(--route)}
@media (max-width:900px){.cover-band .mid{display:none}}
@media (max-width:640px){.hide-sm{display:none}}