/* The hero map (landing and stats hub). Phone layout at 900 px and under: map on top, panel, then the list. */
.drive { position:relative; padding-bottom:26px; }
/* a sideways swipe on the stage steps to the next country; up and down still scrolls the page */
.dv-stage { position:relative; height:min(62vh, 600px); margin-top:18px; touch-action:pan-y; }
/* The map fades at its four edges, not in a ring, so a country in a corner of the overview (Lithuania,
   top right) keeps its full strength. */
.dv-map { position:absolute; right:0; top:0; bottom:0; width:62%;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite:intersect; }
.dv-map svg { width:100%; height:100%; display:block; }
.dv-map .ctx path { fill:color-mix(in srgb, var(--hill-1) 55%, var(--sky)); stroke:var(--ink-faint); stroke-width:1; vector-effect:non-scaling-stroke; }
/* The seven countries are the controls: a pointer, a deeper green under it, an inked outline. */
.dv-map .land { fill:var(--hill-2); stroke:var(--ink-dim); stroke-width:1.8; vector-effect:non-scaling-stroke; stroke-linejoin:round; cursor:pointer; outline:none; transition:fill .2s, opacity .4s; }
.dv-map .reach { fill:transparent; cursor:pointer; }
.dv-map .land.hov { fill:color-mix(in srgb, var(--hill-3) 80%, var(--hill-2)); }
.dv-map .picked .land { opacity:.5; }
.dv-map .picked .land.hov { opacity:.9; }
.dv-map .picked .land.on { opacity:1; fill:var(--hill-3); }
/* outlines drawn over every country, so a shared border never hides half of one */
.dv-map .ring { fill:none; pointer-events:none; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.dv-map .ring.on { stroke:var(--brand); stroke-width:2.6; }
.dv-map .ring.hov { stroke:var(--ink); stroke-width:2.4; }
.dv-map .ring.kbd { stroke:var(--ink); stroke-width:4.5; filter:drop-shadow(0 0 3px var(--brand-bright)); }
.dv-map .name { font-family:'Caveat',cursive; font-weight:600; fill:var(--annot); cursor:pointer; transition:opacity .3s, fill .2s; }
.dv-map .name.hov { fill:var(--ink); }
.dv-map .picked .name { opacity:0; pointer-events:none; }
[data-theme="night"] .dv-map .picked .land { opacity:.62; }
[data-theme="night"] .dv-map .picked .land.on { opacity:1; fill:var(--hill-4); }
[data-theme="night"] .dv-map .ring.on { filter:drop-shadow(0 0 5px color-mix(in srgb, var(--brand) 70%, transparent)); }
/* The price sign at the picked country's capital: the stats pages' sign, with a handwritten note. */
.dv-map .sign { pointer-events:none; }
.dv-map .sign .pole, .dv-map .sign .body { fill:var(--totem-body); }
.dv-map .sign .foot { fill:var(--ink); opacity:.2; }
.dv-map .sign .strip { fill:var(--totem-face); opacity:.7; }
.dv-map .sign .face { fill:var(--totem-face); }
.dv-map .sign .lbl { font:700 8.5px 'Karla',sans-serif; letter-spacing:.1em; fill:var(--totem-tx); }
.dv-map .sign .num { font:600 15px 'Geist Mono',monospace; fill:var(--totem-tx); }
.dv-map .sign .note { font:600 17px 'Caveat',cursive; fill:var(--ink); }
.dv-map .sign .pen { fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.dv-map .sign .plant { animation:dvPlant .45s .45s both cubic-bezier(.3,1.5,.5,1); }
.dv-map .sign.still .plant { animation:none; }
@keyframes dvPlant { from { transform:scale(.3); opacity:0; } }
[data-theme="night"] .dv-map .sign .body { stroke:var(--brand); stroke-width:1; }
[data-theme="night"] .dv-map .sign .num { filter:drop-shadow(0 0 4px color-mix(in srgb, var(--brand) 80%, transparent)); } /* signs glow at night */
.dv-slides { position:absolute; left:0; top:0; bottom:0; width:36%; }
.dv-slide:not([hidden]) .dv-panel { animation:dvIn .4s ease both; }
@keyframes dvIn { from { opacity:0; } }
.dv-panel { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); }
.dv-panel h2 { font-size:clamp(2.3rem,4.4vw,3.4rem); margin-bottom:10px; }
.dv-panel .facts { font-family:'Geist Mono',monospace; font-size:.84rem; color:var(--ink-dim); letter-spacing:.04em; }
.dv-panel .big { font-family:'Geist Mono',monospace; color:var(--brand); font-weight:600; font-size:2.2rem; letter-spacing:-.02em; line-height:1.1; margin-top:14px; }
.dv-panel .big small, .dv-panel .big2 small { font-family:'Karla',sans-serif; font-size:.9rem; color:var(--ink-dim); font-weight:600; letter-spacing:0; margin-left:6px; }
.dv-panel .big2 { font-family:'Geist Mono',monospace; font-weight:600; font-size:1.1rem; margin-top:4px; }
/* the panel's handwritten kicker (the landing also styles .kick; the stats hub relies on this one) */
.dv-panel .kick { font-family:'Caveat',cursive; font-size:1.5rem; color:var(--annot); display:block; margin-bottom:6px; transform:rotate(-1.2deg); }
.dv-panel .hint { font-family:'Caveat',cursive; color:var(--annot); font-size:1.4rem; margin-top:14px; display:block; transform:rotate(-1.5deg); }
.dv-panel .hint .up { display:none; } /* the map is beside the panel here, above it on a phone */
.dv-panel .body-copy { margin-top:6px; }
.dv-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; background:color-mix(in srgb, var(--paper) 85%, transparent); color:var(--ink); box-shadow:0 6px 18px -8px rgba(20,40,26,.45); display:grid; place-items:center; }
.dv-arrow svg { width:20px; height:20px; }
.dv-arrow.prev { left:calc(38% - 10px); } .dv-arrow.next { right:0; }
.dv-arrow:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.dv-list { position:relative; margin:18px auto 0; max-width:880px; }
.dv-track { position:relative; }
.dv-stop { position:relative; z-index:2; border:none; cursor:pointer; text-decoration:none; }
.dv-stop:focus-visible { outline:2px solid var(--brand); outline-offset:4px; border-radius:6px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- List 1, signposts (?list=signs): every country a small roadside sign planted on the verge, its
   name over its station count; the picked one stands taller with its lamp on. Two rows of four on a
   phone. A row is a plate, the tallest pole and the gap under it (--row). ---- */
.dv-list-signs .dv-list { max-width:920px; margin-top:6px; }
.dv-list-signs .dv-track { --plate-h:54px; --rise:36px; --gap:18px; --row:calc(var(--plate-h) + var(--rise) + var(--gap));
  display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:var(--gap) 14px; padding:0 22px var(--gap); }
/* the verge: a low mound of grass under each row, and the pen line along its top */
.dv-list-signs .dv-track::before, .dv-list-signs .dv-track::after { content:""; position:absolute; inset:0; pointer-events:none; }
.dv-list-signs .dv-track::before { background:linear-gradient(to bottom, transparent 72%, var(--hill-1) 74%, transparent) 0 0 / 100% var(--row) repeat-y;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 108' preserveAspectRatio='none'%3E%3Cpath d='M0,85 C55,80.5 125,87 200,83 S345,80 400,84.5 L400,108 L0,108 Z'/%3E%3C/svg%3E") 0 0 / 100% var(--row) repeat-y;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 108' preserveAspectRatio='none'%3E%3Cpath d='M0,85 C55,80.5 125,87 200,83 S345,80 400,84.5 L400,108 L0,108 Z'/%3E%3C/svg%3E") 0 0 / 100% var(--row) repeat-y; }
.dv-list-signs .dv-track::after { background:var(--ink-faint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 108' preserveAspectRatio='none'%3E%3Cpath d='M0,85 C55,80.5 125,87 200,83 S345,80 400,84.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% var(--row) repeat-y;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 108' preserveAspectRatio='none'%3E%3Cpath d='M0,85 C55,80.5 125,87 200,83 S345,80 400,84.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% var(--row) repeat-y; }
.dv-list-signs .dv-stop { --pole:16px; --plate:color-mix(in srgb, var(--totem-body) 80%, var(--sky)); height:var(--plate-h); margin:calc(var(--rise) - var(--pole)) 0 var(--pole); padding:5px; border-radius:10px; background:var(--plate); color:var(--totem-tx);
  display:flex; flex-direction:column; gap:3px; text-align:center; transform:rotate(var(--tilt, 0deg)); transform-origin:50% calc(100% + var(--pole)); transition:margin .22s, background .2s, box-shadow .2s; }
/* planted by hand: no two poles quite the same height, none quite upright */
.dv-list-signs .dv-stop:nth-child(4n+1) { --pole:17px; --tilt:-1.2deg; } .dv-list-signs .dv-stop:nth-child(4n+2) { --pole:13px; --tilt:.9deg; }
.dv-list-signs .dv-stop:nth-child(4n+3) { --pole:19px; --tilt:-.5deg; } .dv-list-signs .dv-stop:nth-child(4n) { --pole:14px; --tilt:1.3deg; }
.dv-list-signs .dv-stop i { position:absolute; z-index:-1; left:50%; top:calc(100% - 4px); width:7px; height:calc(var(--pole) + 4px); margin-left:-3.5px; background:var(--plate); transition:height .22s, background .2s; }
.dv-list-signs .dv-stop span { display:block; height:17px; border-radius:4px; background:color-mix(in srgb, var(--totem-face) 70%, transparent); font:700 .64rem/17px 'Karla',sans-serif; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; transition:background .2s; }
.dv-list-signs .dv-stop small { display:block; height:24px; border-radius:5px; background:var(--totem-face); font:600 .86rem/24px 'Geist Mono',monospace; }
.dv-list-signs .dv-stop.hov { --pole:24px; --plate:var(--totem-body); }
.dv-list-signs .dv-stop.on { --pole:var(--rise); --plate:var(--totem-body); --tilt:0deg; box-shadow:0 12px 16px -12px rgba(20,40,26,.7); }
.dv-list-signs .dv-stop.on span { background:var(--brand-bright); color:#10301c; }
.dv-list-signs .dv-stop:focus-visible { border-radius:10px; }
[data-theme="night"] .dv-list-signs .dv-stop { --plate:var(--hill-3); color:var(--ink-dim); }
[data-theme="night"] .dv-list-signs .dv-stop.hov { --plate:var(--hill-4); color:var(--ink); }
[data-theme="night"] .dv-list-signs .dv-stop.on { --plate:var(--hill-4); color:var(--totem-tx); box-shadow:0 0 0 1.5px var(--brand), 0 0 18px -2px color-mix(in srgb, var(--brand) 60%, transparent); }
[data-theme="night"] .dv-list-signs .dv-stop.on small { text-shadow:0 0 8px color-mix(in srgb, var(--brand) 70%, transparent); }
@media (max-width:900px) {
  .dv-list-signs .dv-list { max-width:460px; margin-top:8px; }
  .dv-list-signs .dv-track { --plate-h:50px; --rise:28px; --gap:14px; grid-template-columns:repeat(4, minmax(0, 1fr)); column-gap:9px; padding:0 4px var(--gap); }
  .dv-list-signs .dv-stop { padding:4px; }
  .dv-list-signs .dv-stop span { height:16px; line-height:16px; font-size:.6rem; letter-spacing:.06em; }
  .dv-list-signs .dv-stop small { height:23px; line-height:23px; }
  .dv-list-signs .dv-stop:nth-child(4n+1) { --pole:14px; } .dv-list-signs .dv-stop:nth-child(4n+2) { --pole:11px; }
  .dv-list-signs .dv-stop:nth-child(4n+3) { --pole:16px; } .dv-list-signs .dv-stop:nth-child(4n) { --pole:12px; }
  .dv-list-signs .dv-stop.on { --pole:var(--rise); }
}
@media (max-width:360px) {
  .dv-list-signs .dv-track { column-gap:6px; padding-left:0; padding-right:0; }
  .dv-list-signs .dv-stop { padding:4px 3px; }
  .dv-list-signs .dv-stop span { font-size:.53rem; letter-spacing:.02em; }
  .dv-list-signs .dv-stop small { font-size:.8rem; }
}

/* ---- List 2, the road (?list=road): the road strip, a dot per country, the picked dot lit. Two rows on a
   phone: the road runs along the first, doubles back on the right and returns along the second. ---- */

@media (max-width:900px) {
  .dv-stage { height:min(66svh, 560px); }
  .dv-map { left:0; width:100%; bottom:auto; height:48%; }
  .dv-map .ring.on { stroke-width:2.2; }
  .dv-slides { top:48%; width:100%; }
  .dv-panel { top:0; transform:none; padding:0 2px; }
  .dv-panel .kick { font-size:1.25rem; margin-bottom:0; }
  .dv-panel h2 { font-size:1.9rem; margin-bottom:2px; }
  .dv-panel .body-copy { font-size:.95rem; }
  .dv-panel .big { font-size:1.6rem; margin-top:6px; }
  .dv-panel .hint { font-size:1.2rem; margin-top:8px; }
  .dv-panel .hint .up { display:inline; } .dv-panel .hint .side { display:none; }
  .dv-arrow { top:24%; width:40px; height:40px; } .dv-arrow.prev { left:-4px; } .dv-arrow.next { right:-4px; }
}
@media (max-width:640px) {
  .dv-stage { margin-top:8px; }
}
@media (prefers-reduced-motion: reduce) { .dv-map .sign .plant, .dv-slide:not([hidden]) .dv-panel { animation:none; } }