/* ==========================================================================
   Листовки — site styles. Tokens live in tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* one screen height, frozen by index.html and main.js: phone browsers
     resize the viewport as their toolbar slides, and spacing in svh would
     move the whole page with it. 1svh is the no-script fallback. */
  --vh: 1svh;
  background: var(--ground);
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 420;
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--ground);
  background-image: url("../assets/grain.webp");
  background-size: 320px 320px;
  overflow-x: clip;
  font-kerning: normal;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--yellow); color: #241f1b; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 50;
  padding: .7rem 1.1rem;
  background: var(--btn-ink); color: var(--btn-ink-text);
  font-weight: 700; text-decoration: none;
  border-radius: 999px;
  transition: top .35s var(--ease-spring);
}
.skip:focus { top: 1rem; }

:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- handwriting ------------------------------------------------------- */
.hand {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: var(--fs-note);
  line-height: 1.05;
  letter-spacing: .005em;
}

/* ==========================================================================
   World + effects layers
   ========================================================================== */
.world {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  contain: strict;
}
.fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
main, .foot { position: relative; z-index: 2; }

/* ==========================================================================
   Nav — floating paper pieces, never a full-width bar
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(.7rem, env(safe-area-inset-top)) var(--gutter) .7rem;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .95rem .42rem .5rem;
  text-decoration: none;
  background: var(--card);
  border-radius: 4px 7px 5px 6px;
  box-shadow:
    0 1px 0 rgb(var(--shadow) / calc(var(--sh-a) * 1.1)),
    0 6px 14px -8px rgb(var(--shadow) / calc(var(--sh-a) * 2.4));
  transform: rotate(-1.4deg);
  transition: transform .6s var(--ease-spring);
}
.brand:hover { transform: rotate(0deg) translateY(-1px); }
.brand-mark { width: 1.9rem; height: 1.9rem; flex: none; }
.bm-sheet { fill: #14182b; stroke: var(--ink-3); stroke-width: 0; }
.bm-road { fill: #efe2c4; }
.bm-dash { fill: #14182b; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: 1.28rem;
  letter-spacing: -.01em;
  line-height: 1;
  padding-bottom: .08em;
}

.route { display: none; }

.nav-end { display: flex; align-items: center; gap: .6rem; }

.theme-toggle {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 0; padding: 0;
  cursor: pointer;
  background: var(--card);
  border-radius: 50%;
  box-shadow:
    0 1px 0 rgb(var(--shadow) / calc(var(--sh-a) * 1.1)),
    0 6px 14px -8px rgb(var(--shadow) / calc(var(--sh-a) * 2.4));
  transition: transform .6s var(--ease-spring);
}
.theme-toggle:active { transform: scale(.93); transition-duration: .12s; }
.theme-toggle svg { width: 1.45rem; height: 1.45rem; overflow: visible; }
.tt-sun { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.tt-sun circle { fill: var(--yellow); stroke: var(--ink); }
.tt-moon { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; opacity: 0; }
.tt-sun, .tt-moon {
  transform-origin: 16px 16px;
  transition: transform .7s var(--ease-spring), opacity .35s var(--ease-fade);
}
:root[data-theme="dark"] .tt-sun { opacity: 0; transform: rotate(-70deg) scale(.6); }
:root[data-theme="dark"] .tt-moon { opacity: 1; transform: none; }
:root:not([data-theme="dark"]) .tt-moon { transform: rotate(40deg) scale(.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tt-sun { opacity: 0; transform: rotate(-70deg) scale(.6); }
  :root:not([data-theme="light"]) .tt-moon { opacity: 1; transform: none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 3rem;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 750;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .9s var(--ease-spring), box-shadow .9s var(--ease-spring);
}
.btn--ink {
  background: var(--btn-ink);
  color: var(--btn-ink-text);
  box-shadow:
    0 1px 0 rgb(var(--shadow) / .3),
    0 10px 20px -10px rgb(var(--shadow) / calc(var(--sh-a) * 3.4));
}
.btn--sm { height: 2.75rem; padding: 0 1.15rem; font-size: .95rem; }
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow:
      0 2px 0 rgb(var(--shadow) / .3),
      0 16px 26px -12px rgb(var(--shadow) / calc(var(--sh-a) * 3.4));
  }
}
.btn:active {
  transform: translateY(0) scale(.965);
  transition-duration: .12s;
}

/* ---- store badges: official artwork, untouched ----------------------- */
.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.store {
  display: block;
  border-radius: 8px;
  line-height: 0;
  transition: transform .9s var(--ease-spring), box-shadow .9s var(--ease-spring);
  box-shadow: 0 10px 18px -12px rgb(var(--shadow) / calc(var(--sh-a) * 3));
}
.store img { height: 3rem; width: auto; }
.stores--lg .store img { height: 3.375rem; }
@media (hover: hover) {
  .store:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 24px -12px rgb(var(--shadow) / calc(var(--sh-a) * 3.4));
  }
}
.store:active { transform: translateY(1px); transition-duration: .12s; }
.store:focus-visible { border-radius: 10px; outline-offset: 4px; }

/* ==========================================================================
   Stops (sections)
   ========================================================================== */
.stop { position: relative; }
.stop-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- 0 · start ------------------------------------------------------- */
.stop--start .stop-inner {
  min-height: calc(100 * var(--vh));
  display: flex;
  flex-direction: column;
  padding-top: calc(5.4rem + env(safe-area-inset-top));
  padding-bottom: 2rem;
}
.hero { position: relative; max-width: 40rem; }
.kicker { margin-bottom: 1.1rem; }
.tape-label {
  display: inline-block;
  position: relative;
  padding: .42rem 1.05rem .36rem;
  font-family: var(--font-label);
  font-weight: 760;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kraft-ink);
  background: var(--tape);
  transform: rotate(-2.2deg);
  clip-path: polygon(0 8%, 2% 0, 4% 10%, 6% 1%, 8% 7%, 92% 3%, 94% 11%, 96% 0, 98% 9%, 100% 2%,
                     100% 92%, 98% 100%, 96% 91%, 94% 100%, 92% 94%, 8% 97%, 6% 90%, 4% 100%, 2% 92%, 0 99%);
}
/* the title is printed flat on the map scrap: one ink, set straight */
.hero-title {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: calc(var(--fs-hero) * .94);
  line-height: .93;
  letter-spacing: -.022em;
  margin: 0 0 .36em -.03em;
}
.hero-title .t1,
.hero-title .t2 { display: block; }
.lede {
  font-size: var(--fs-lede);
  line-height: 1.45;
  font-weight: 440;
  max-width: 29em;
  margin-bottom: 1.6rem;
  text-wrap: pretty;
}
.fine {
  margin-top: .9rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.anchor { position: absolute; width: 1px; height: 1px; pointer-events: none; }
/* the start scene sits below the text in the flow, so on a short phone the
   hero grows instead of the house landing on the buttons */
.start-scene {
  position: relative;
  flex: 1 0 auto;
  min-height: clamp(250px, calc(36 * var(--vh)), 380px);
  margin-top: 1rem;
}
.anchor--start { right: 24%; top: 36%; }
.anchor--park { left: 62%; top: calc(-15 * var(--vh)); }
/* a hand-drawn arrow over the car's shoulder, pointing down at it. The anchor
   is the car's spot; the arrow stays on the grass, where the ink shows. */
.car-note {
  position: absolute;
  left: -2.2rem;
  top: -3.1rem;
  width: 1.6rem; height: 2rem;
  color: var(--note-ink);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32'%3E%3Cpath d='M13.6 2c-1.2 7.6.4 15.2-.6 25.6M5.6 19.8c2.9 2.8 5.4 5.4 7.4 8.4 2-3.7 4.4-6.5 7.3-9.1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32'%3E%3Cpath d='M13.6 2c-1.2 7.6.4 15.2-.6 25.6M5.6 19.8c2.9 2.8 5.4 5.4 7.4 8.4 2-3.7 4.4-6.5 7.3-9.1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-28deg);
  transition: opacity .5s var(--ease-fade);
}
.car-note.is-gone { opacity: 0; }
:root:not(.world-on) .car-note { display: none; }

/* the light asks to be pressed while the car waits at it */
.light::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 1.1rem;
  border: 2px solid var(--lamp-red);
  opacity: 0;
  pointer-events: none;
}
.light { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .light.is-waiting::after { animation: light-ask 1.6s var(--ease-gentle) infinite; }
}
.light.is-waiting::after { opacity: .6; }
@keyframes light-ask {
  0% { opacity: .75; transform: scale(.96); }
  70%, 100% { opacity: 0; transform: scale(1.18); }
}
.hint {
  position: absolute;
  left: 0;
  bottom: 1.2rem;
  transform: rotate(-4deg);
  color: var(--ink-2);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
}
.hint { transition: opacity .6s var(--ease-fade), translate .8s var(--ease-spring); }
.hint.is-gone { opacity: 0; translate: 0 10px; }
@media (prefers-reduced-motion: no-preference) {
  .hint::after { animation: hint-bob 1.8s var(--ease-gentle) infinite; }
}
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.hint::after {
  content: "";
  width: 1.6rem; height: 2rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32'%3E%3Cpath d='M13.6 2c-1.2 7.6.4 15.2-.6 25.6M5.6 19.8c2.9 2.8 5.4 5.4 7.4 8.4 2-3.7 4.4-6.5 7.3-9.1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32'%3E%3Cpath d='M13.6 2c-1.2 7.6.4 15.2-.6 25.6M5.6 19.8c2.9 2.8 5.4 5.4 7.4 8.4 2-3.7 4.4-6.5 7.3-9.1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- the stops after the start: the space above each card is scenery -- */
.stop--lesson  { padding-top: calc(46 * var(--vh)); }
.stop--city    { padding-top: calc(70 * var(--vh)); }
.stop--country { padding-top: calc(62 * var(--vh)); }
.stop--exam    { padding-top: calc(60 * var(--vh)); }
.stop--finish  { padding-top: calc(46 * var(--vh)); padding-bottom: calc(20 * var(--vh)); }

/* ==========================================================================
   Cards — paper laid on the map. JS swaps the flat fallback for torn paper.
   ========================================================================== */
.card {
  --lane: 4.9rem;
  --pad-x: 1.3rem;
  position: relative;
  width: calc(100% - var(--lane));
  padding: 1.55rem var(--pad-x) 1.6rem;
  background: var(--card);
  box-shadow:
    0 1px 1px rgb(var(--shadow) / calc(var(--sh-a) * 1.2)),
    0 14px 28px -18px rgb(var(--shadow) / calc(var(--sh-a) * 3));
}
.card.has-paper { background: none; box-shadow: none; }
.card > :not(.card-paper):not(.tape) { position: relative; }
.card-paper {
  position: absolute;
  left: -14px; top: -14px;
  width: calc(100% + 28px);
  height: calc(100% + 28px);
  overflow: visible;
  pointer-events: none;
}
.card .tape {
  position: absolute;
  z-index: 3;
  width: 5.6rem;
  height: 1.55rem;
  background: var(--tape);
  box-shadow: 0 1px 1px rgb(var(--shadow) / .08);
  pointer-events: none;
}

.stop--city .card,
.stop--exam .card { margin-left: auto; }
.stop--finish .card { width: 100%; }

.label {
  display: flex;
  align-items: center;
  gap: .62rem;
  font-family: var(--font-label);
  font-weight: 780;
  font-size: var(--fs-label);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: .95rem;
}
.label-num {
  display: inline-grid;
  place-items: center;
  width: 1.85rem; height: 1.85rem;
  flex: none;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0;
  color: #fbfaf5;
  background: var(--blue);
  border-radius: .3rem;
  box-shadow: inset 0 0 0 2px var(--blue), inset 0 0 0 3.5px #fbfaf5;
  transform: rotate(-3deg);
}
.label-num--p { font-size: 1.12rem; }

.card h2 {
  font-family: var(--font-display);
  font-weight: 820;
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  letter-spacing: -.012em;
  margin-bottom: .5em;
  text-wrap: balance;
}
.card p { max-width: var(--measure); text-wrap: pretty; }
.card p + p { margin-top: .85em; }
.small { font-size: var(--fs-small); color: var(--ink-2); }

.margin-note {
  position: absolute;
  right: .9rem;
  bottom: -1.9rem;
  color: var(--note-ink);
  transform: rotate(-4deg);
  white-space: nowrap;
  pointer-events: none;
}

/* ---- notebook -------------------------------------------------------- */
.card--notebook { padding-left: 1.55rem; }

/* category stamps */
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .45rem;
  margin: 1.35rem 0 .8rem;
}
.cats li {
  --c: var(--ink);
  display: inline-grid;
  place-items: center;
  min-width: 2.7rem;
  height: 2.3rem;
  padding: 0 .55rem;
  font-family: var(--font-label);
  font-weight: 850;
  font-size: 1.12rem;
  letter-spacing: .02em;
  color: var(--c);
  border: 2.2px solid var(--c);
  border-radius: .42rem;
  opacity: .92;
  transform: rotate(var(--r, -2deg));
  -webkit-mask: url("../assets/wear.webp") center / 180px 180px;
          mask: url("../assets/wear.webp") center / 180px 180px;
}
.cats li:nth-child(3n+1) { --c: var(--stamp-blue); --r: -3deg; }
.cats li:nth-child(3n+2) { --c: var(--stamp-red); --r: 2deg; }
.cats li:nth-child(3n) { --c: var(--ink); --r: -1deg; }
.cats li:nth-child(4n) { --r: 3.5deg; }
.cats li:nth-child(5n) { --r: -4deg; }

/* ---- the exam ticket ----------------------------------------------------- */
.ticket {
  --notch: .75rem;
  position: relative;
  margin: 1.4rem 0 .4rem;
  max-width: 22rem;
  padding: .9rem 1.1rem 1rem 1.35rem;
  background: var(--card-2);
  color: var(--ink);
  -webkit-mask:
    radial-gradient(circle at 0 50%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 50%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
  filter: drop-shadow(0 1px 0 rgb(var(--shadow) / .14));
  transform: rotate(-1.2deg);
}
.ticket::before {
  content: "";
  position: absolute;
  left: .55rem; top: .7rem; bottom: .7rem;
  border-left: 2px dotted var(--ink-3);
  opacity: .7;
}
.ticket-head {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-family: var(--font-label);
  font-weight: 780;
  font-size: var(--fs-label);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1.5px dashed var(--rule);
  padding-bottom: .5rem;
  margin-bottom: .55rem;
}
.ticket-head b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
}
.ticket-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.ticket-stats div { display: flex; flex-direction: column-reverse; }
.ticket-stats dd {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.6rem);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.01em;
}
.ticket-stats div:last-child dd { color: var(--ok-ink); }
.ticket-stats dt { font-size: var(--fs-small); color: var(--ink-2); margin-top: .2rem; }

/* ---- perks as postage stamps ------------------------------------------- */
.card--kraft { color: var(--kraft-ink); }
.card--kraft .label, .card--kraft .small { color: var(--kraft-ink); opacity: .82; }
.perks {
  display: grid;
  gap: 1.15rem;
  margin-top: 1.5rem;
}
.perk {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .95rem;
  align-items: start;
}
.perk-stamp {
  grid-row: span 2;
  width: 3.3rem; height: 3.6rem;
  padding: 5px;
  display: grid; place-items: center;
  background: var(--card);
  --hole: 3.2px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle, #0000 calc(var(--hole) - .4px), #000 var(--hole)) -3.9px -3.9px / 7.8px 7.8px round;
          mask:
    linear-gradient(#000 0 0) content-box,
    radial-gradient(circle, #0000 calc(var(--hole) - .4px), #000 var(--hole)) -3.9px -3.9px / 7.8px 7.8px round;
  filter: drop-shadow(0 1px 0 rgb(var(--shadow) / .25));
  transform: rotate(var(--r, -3deg));
}
.perk:nth-child(2) .perk-stamp { --r: 2.5deg; }
.perk:nth-child(3) .perk-stamp { --r: -1.5deg; }
.perk:nth-child(4) .perk-stamp { --r: 3.5deg; }
.perk-stamp svg {
  width: 100%; height: 100%;
  padding: 4px;
  background: var(--sc, var(--blue));
  fill: none;
  stroke: #fbfaf5;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.perk:nth-child(1) .perk-stamp { --sc: var(--ok); }
.perk:nth-child(2) .perk-stamp { --sc: var(--blue); }
.perk:nth-child(3) .perk-stamp { --sc: var(--red); }
.perk:nth-child(4) .perk-stamp { --sc: #3f3a37; }
.perk h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -.005em;
  margin: .1rem 0 .15rem;
}
.perk p { font-size: var(--fs-small); line-height: 1.45; }
.card--kraft .perk p { color: var(--kraft-ink); opacity: .86; }

/* ---- exam result + traffic light ----------------------------------------- */
.result {
  --ring: 8rem;
  position: relative;
  display: grid;
  /* a pinned column: in an auto one the global svg max-width lets the
     grid squeeze the ring away from its number on a narrow card */
  grid-template-columns: var(--ring) minmax(0, 1fr);
  align-items: center;
  column-gap: 1.1rem;
  margin: 1.5rem 0 .4rem;
  min-height: 8rem;
}
/* the ring and its number share one cell, so they stay concentric */
.ring, .result-score { grid-area: 1 / 1 / 3 / 2; }
.ring {
  width: var(--ring); height: var(--ring);
  max-width: none;
  transform: rotate(-90deg);
  overflow: visible;
}
.ring-bg { fill: none; stroke: var(--rule); stroke-width: 9; }
.ring-arc {
  fill: none;
  stroke: var(--ok);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 0 97;
  transition: stroke-dasharray 1.4s var(--ease-spring);
}
.result.is-scored .ring-arc { stroke-dasharray: 92 97; }
.ring-tick {
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  transform-origin: 60px 60px;
  /* +90deg because the whole ring is turned -90deg to start at 12 o'clock */
  transform: rotate(calc(87 / 97 * 360deg + 90deg));
}
.result-score {
  position: relative;
  width: var(--ring); height: var(--ring);
  display: grid;
  place-content: center;
  text-align: center;
}
.result-score b {
  font-family: var(--font-display);
  font-weight: 880;
  font-size: calc(var(--ring) * .3375);
  line-height: .95;
  font-variant-numeric: lining-nums tabular-nums;
}
.result-score span { font-size: max(.6rem, calc(var(--ring) * .0975)); color: var(--ink-2); line-height: 1.2; margin-top: .15rem; }
.result-pass {
  grid-area: 1 / 2;
  align-self: end;
  font-family: var(--font-label);
  font-weight: 760;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* sized in em, so one font-size scales the whole stamp */
.pass-stamp {
  grid-area: 2 / 2;
  align-self: start;
  justify-self: start;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
  padding: .32em .8em .38em;
  margin-top: .45em;
  color: var(--ok);
  border: .1875em solid currentColor;
  border-radius: .5em;
  font-family: var(--font-label);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  transform: rotate(-9deg) scale(1.2);
  opacity: 0;
  -webkit-mask: url("../assets/wear.webp") center / 200px 200px;
          mask: url("../assets/wear.webp") center / 200px 200px;
}
.pass-stamp span { font-size: 1.35em; letter-spacing: .06em; }
.pass-stamp small { font-size: .62em; letter-spacing: .24em; margin-top: .35em; font-weight: 800; }
.result.is-stamped .pass-stamp {
  animation: stamp .62s var(--ease-spring) forwards;
}
@keyframes stamp {
  0%   { opacity: 0; transform: rotate(-14deg) scale(1.75); }
  45%  { opacity: 1; transform: rotate(-8deg) scale(.93); }
  70%  { transform: rotate(-9.5deg) scale(1.03); }
  100% { opacity: .94; transform: rotate(-9deg) scale(1); }
}

.light-wrap {
  position: absolute;
  left: calc(-1 * var(--pad-x) - 1.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.light {
  display: grid;
  gap: .42rem;
  padding: .55rem .5rem;
  border: 0;
  cursor: pointer;
  background: #2d2927;
  border-radius: .8rem;
  box-shadow:
    inset 0 0 0 2px #1d1a18,
    0 2px 0 rgb(var(--shadow) / .3),
    0 12px 20px -12px rgb(var(--shadow) / .7);
  transform: rotate(2deg);
  transition: transform .9s var(--ease-spring);
}
.light:active { transform: rotate(2deg) scale(.95); transition-duration: .12s; }
.lamp {
  width: 1.55rem; height: 1.55rem;
  border-radius: 50%;
  background: var(--lamp-off);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .55);
  transition: background .25s var(--ease-fade), box-shadow .35s var(--ease-fade);
}
.light[data-state="red"] .lamp--red,
.light:not([data-state]) .lamp--red {
  background: var(--lamp-red);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .25), 0 0 14px 3px rgb(224 64 47 / .55);
}
.light[data-state="amber"] .lamp--amber {
  background: var(--lamp-amber);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .25), 0 0 14px 3px rgb(242 169 59 / .55);
}
.light[data-state="red-amber"] .lamp--red {
  background: var(--lamp-red);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .25), 0 0 14px 3px rgb(224 64 47 / .45);
}
.light[data-state="red-amber"] .lamp--amber {
  background: var(--lamp-amber);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .25), 0 0 14px 3px rgb(242 169 59 / .45);
}
.light[data-state="green"] .lamp--green {
  background: var(--lamp-green);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .25), 0 0 16px 4px rgb(63 174 106 / .55);
}
.light-note {
  margin-top: .7rem;
  color: var(--note-ink);
  transform: rotate(-3deg);
  transform-origin: left center;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: opacity .5s var(--ease-fade);
}
.light-note::before {
  content: "";
  width: 1.9rem; height: 1.2rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M28 12.5C20 13 12 11 3.4 5.2M3.4 5.2c3.4.2 6.3-.3 8.8-1.6M3.4 5.2c.9 3 2.4 5.6 4.3 7.7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M28 12.5C20 13 12 11 3.4 5.2M3.4 5.2c3.4.2 6.3-.3 8.8-1.6M3.4 5.2c.9 3 2.4 5.6 4.3 7.7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.light-note .hand { font-size: 1.3rem; }
.card--exam.is-green .light-note { opacity: 0; }

/* ---- finish -------------------------------------------------------------- */
.card--finish { text-align: left; }
.app-icon {
  width: 5.2rem; height: 5.2rem;
  border-radius: 22.5%;
  margin: -.2rem 0 1.1rem;
  box-shadow:
    0 0 0 4px var(--core),
    0 2px 0 4px rgb(var(--shadow) / .08),
    0 14px 24px -10px rgb(var(--shadow) / calc(var(--sh-a) * 3.2));
  transform: rotate(-4deg);
}
.stores--lg { margin-top: 1.5rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot {
  margin-top: 0;
  /* no env(safe-area-inset-bottom) here: iOS Safari changes it as its toolbar
     slides, and the page's last element changing height mid-scroll makes the
     bottom of the page snap. 2.6rem already clears the home indicator. */
  padding: 3.2rem 0 2.6rem;
  background: var(--kraft);
  color: var(--kraft-ink);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V9L12.1 9.1L28.4 8.2L41.0 9.4L50.6 8.6L64.3 11.4L73.1 6.5L82.0 11.6L96.2 3.9L113.0 13.1L126.9 9.7L136.3 3.7L149.1 4.1L158.8 5.9L167.1 8.1L179.0 11.9L191.7 9.9L204.2 10.1L216.3 6.3L233.3 13.5L248.9 10.6L259.7 5.8L270.3 4.2L285.2 7.5L300.8 7.4L317.4 12.0L325.4 5.6L341.6 8.2L358.5 7.5L367.1 9.8L382.1 6.2L390.9 6.8L407.6 11.1L416.7 6.0L425.6 4.1L440.7 5.3L453.8 8.0L463.5 10.8L472.7 9.9L481.7 7.7L491.6 6.2L508.4 11.5L519.1 12.3L529.0 7.4L544.7 9.9L553.6 13.4L563.5 6.1L578.5 6.8L600 9.0V24Z'/%3E%3C/svg%3E") top left / 600px 24px repeat-x,
    linear-gradient(#000 0 0) 0 23px / 100% 100% no-repeat;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V9L12.1 9.1L28.4 8.2L41.0 9.4L50.6 8.6L64.3 11.4L73.1 6.5L82.0 11.6L96.2 3.9L113.0 13.1L126.9 9.7L136.3 3.7L149.1 4.1L158.8 5.9L167.1 8.1L179.0 11.9L191.7 9.9L204.2 10.1L216.3 6.3L233.3 13.5L248.9 10.6L259.7 5.8L270.3 4.2L285.2 7.5L300.8 7.4L317.4 12.0L325.4 5.6L341.6 8.2L358.5 7.5L367.1 9.8L382.1 6.2L390.9 6.8L407.6 11.1L416.7 6.0L425.6 4.1L440.7 5.3L453.8 8.0L463.5 10.8L472.7 9.9L481.7 7.7L491.6 6.2L508.4 11.5L519.1 12.3L529.0 7.4L544.7 9.9L553.6 13.4L563.5 6.1L578.5 6.8L600 9.0V24Z'/%3E%3C/svg%3E") top left / 600px 24px repeat-x,
    linear-gradient(#000 0 0) 0 23px / 100% 100% no-repeat;
  background-image: url("../assets/grain.webp");
  background-size: 320px 320px;
}
.foot-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: .9rem;
}
.foot-brand {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: 1.5rem;
  line-height: 1.1;
}
.foot-links { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
.foot-links a {
  display: inline-block;
  padding: .45rem 0;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .3s var(--ease-fade);
}
.foot-links a:hover { text-decoration-color: currentColor; }
.foot-legal { font-size: var(--fs-small); line-height: 1.5; max-width: 42rem; opacity: .9; }
.foot-copy { font-size: var(--fs-small); opacity: .8; }

/* ==========================================================================
   Toast — the "link coming soon" slip
   ========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 40;
  width: min(24rem, calc(100% - 2rem));
  transform: translate(-50%, 160%) rotate(2deg);
  transition: transform .75s var(--ease-spring);
  pointer-events: none;
}
.toast.is-on { transform: translate(-50%, 0) rotate(-1deg); }
.toast-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .95rem 1.1rem;
  background: var(--card);
  background-image: url("../assets/grain.webp");
  background-size: 320px 320px;
  color: var(--ink);
  font-weight: 560;
  line-height: 1.35;
  box-shadow:
    0 1px 1px rgb(var(--shadow) / .2),
    0 18px 34px -16px rgb(var(--shadow) / calc(var(--sh-a) * 3.6));
}
.toast-stamp {
  flex: none;
  padding: .28rem .55rem .3rem;
  font-family: var(--font-label);
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stamp-red);
  border: 2.5px solid currentColor;
  border-radius: .35rem;
  transform: rotate(-7deg);
  -webkit-mask: url("../assets/wear.webp") center / 160px 160px;
          mask: url("../assets/wear.webp") center / 160px 160px;
}

/* ==========================================================================
   Breakpoints — each composed on its own, the road reroutes around them
   ========================================================================== */
/* below 440px the full 8rem ring and stamp no longer fit side by side */
@media (max-width: 439px) {
  .result { --ring: clamp(6rem, 1.2rem + 22vw, 7rem); column-gap: .8rem; }
  .pass-stamp { font-size: .8rem; }
}
@media (max-width: 374px) {
  .result { --ring: 6rem; column-gap: .7rem; }
  .pass-stamp { font-size: .72rem; }
}
@media (max-width: 359px) {
  .nav { gap: .5rem; padding-left: .75rem; padding-right: .75rem; }
  .brand { padding-right: .7rem; }
  .brand-name { font-size: 1.1rem; }
  .brand-mark { width: 1.65rem; height: 1.65rem; }
  .nav-end { gap: .4rem; }
  .btn--sm { padding: 0 .9rem; font-size: .9rem; }
  .pass-stamp { grid-area: 3 / 1 / 4 / 3; justify-self: end; font-size: .8rem; }
}

@media (min-width: 560px) {
  .perks { grid-template-columns: 1fr 1fr; gap: 1.3rem 1.4rem; }
  .perk { grid-template-columns: 1fr; }
  .perk-stamp { grid-row: auto; margin-bottom: .55rem; }
}

@media (min-width: 700px) {
  .card { --lane: 0px; --pad-x: 2rem; width: min(34rem, 64%); padding: 2rem var(--pad-x) 2.1rem; }
  .card--kraft { width: min(42rem, 76%); }
  .card--exam { width: min(38rem, 70%); }
  .stop--finish .card { width: min(38rem, 72%); margin: 0 auto; }
  .anchor--start { right: 18%; top: 40%; }
  .stop--lesson  { padding-top: calc(34 * var(--vh)); }
  .stop--city    { padding-top: calc(46 * var(--vh)); }
  .stop--country { padding-top: calc(46 * var(--vh)); }
  .stop--exam    { padding-top: calc(48 * var(--vh)); }
  .stop--finish  { padding-top: calc(40 * var(--vh)); }
}

@media (min-width: 1024px) {
  .route {
    display: block;
    position: relative;
    padding: .55rem 1.35rem .5rem;
    background: var(--card);
    border-radius: 6px 4px 7px 5px;
    box-shadow:
      0 1px 0 rgb(var(--shadow) / calc(var(--sh-a) * 1.1)),
      0 6px 14px -8px rgb(var(--shadow) / calc(var(--sh-a) * 2.4));
    transform: rotate(.6deg);
  }
  .route-list { display: flex; gap: 2.1rem; position: relative; z-index: 1; }
  .route-list a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .15rem .1rem;
    text-decoration: none;
    font-family: var(--font-label);
    font-weight: 760;
    font-size: .74rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-2);
    transition: color .3s var(--ease-fade);
  }
  .route-list a:hover, .route-list a.is-here { color: var(--ink); }
  .route-dot {
    width: .72rem; height: .72rem;
    border-radius: 50%;
    background: var(--card);
    box-shadow: inset 0 0 0 2px var(--ink-3);
    transition: box-shadow .4s var(--ease-fade), background .4s var(--ease-fade);
  }
  .route-list a.is-passed .route-dot { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
  .route-list a.is-here .route-dot { background: var(--yellow); box-shadow: inset 0 0 0 2px var(--ink); }
  .route-track {
    position: absolute;
    left: 2.6rem; right: 2.6rem;
    top: .88rem;
    height: 2px;
    background-image: linear-gradient(90deg, var(--ink-3) 55%, transparent 55%);
    background-size: 8px 2px;
    opacity: .7;
  }
  .route-fill {
    position: absolute; inset: 0;
    background: var(--ink);
    transform-origin: left center;
    transform: scaleX(var(--p, 0));
  }
  .route-car {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.05rem; height: .62rem;
    margin: -.31rem 0 0 -.52rem;
    background: var(--car);
    border-radius: .22rem .32rem .32rem .22rem;
    box-shadow: inset -.28rem 0 0 -.1rem var(--car-glass), 0 1px 0 rgb(var(--shadow) / .3);
    transition: transform .5s var(--ease-spring);
  }

  .stop--start .stop-inner { padding-top: calc(7.5rem + env(safe-area-inset-top)); }
  .hero { max-width: 44rem; }
  .start-scene { position: absolute; inset: 0; margin: 0; min-height: 0; pointer-events: none; }
  .anchor--start { right: 16%; top: auto; bottom: calc(24 * var(--vh)); }
  .hint { left: var(--gutter); bottom: calc(10 * var(--vh)); }
  .card { width: 34rem; }
  .card--kraft { width: 44rem; }
  .card--exam { width: 38rem; }
  .stop--lesson .card { margin-left: 4%; }
  .stop--city .card { margin-right: 3%; }
  .stop--country .card { margin-left: 2%; }
  .stop--exam .card { margin-right: 5%; }
  .stop--finish .card { width: 38rem; margin: 0 auto 0 12%; }
  .stop--lesson  { padding-top: calc(26 * var(--vh)); }
  .stop--city    { padding-top: calc(30 * var(--vh)); }
  .stop--country { padding-top: calc(30 * var(--vh)); }
  .stop--exam    { padding-top: calc(32 * var(--vh)); }
  .stop--finish  { padding-top: calc(30 * var(--vh)); padding-bottom: calc(16 * var(--vh)); }
  .card { --pad-x: 2.5rem; padding: 2.4rem var(--pad-x) 2.5rem; }
  .card--notebook { padding-left: 3.4rem; }
  .anchor--park { left: 64%; top: calc(-14 * var(--vh)); }
  .foot-inner { grid-template-columns: 1fr auto; align-items: end; column-gap: 3rem; }
  .foot-legal, .foot-copy { grid-column: 1 / -1; }
}

@media (min-width: 1600px) {
  :root { --maxw: 92rem; }
}

/* ==========================================================================
   Reduced motion: no transitions that travel; state changes still read.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .result .ring-arc { stroke-dasharray: 92 97; }
  .result .pass-stamp { opacity: .94; transform: rotate(-9deg); }
}