/* Jigwalk Auckland: the Đà Nẵng page (direction C, "Cinematic city") in the Auckland skin (app/public/brand/cities/auckland.css):
   pōhutukawa crimson where Đà Nẵng has its Dragon yellow, the Waitematā under cloud where it has the Han River, contour rings
   where it has dragon scales, C's compressed Archivo caps for headlines with Besley for the smaller display type, and the master sun (the yellow of the flower's stamens) for highlights on dark. */

@font-face { font-family: "Archivo"; src: url(/brand/fonts/archivo-latin.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  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"; src: url(/brand/fonts/archivo-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Next"; src: url(/brand/fonts/atkinson-next-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  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: "Atkinson Next"; src: url(/brand/fonts/atkinson-next-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Besley"; src: url(/brand/fonts/besley-800-latin.woff2) format("woff2"); font-weight: 800; font-display: swap;
  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: "Besley"; src: url(/brand/fonts/besley-800-latin-ext.woff2) format("woff2"); font-weight: 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Auckland skin tokens (brand/cities/auckland.css). --sun keeps C's role names: the city's lead colour, here pōhutukawa crimson. */
  --sun: oklch(0.42 0.165 22);      /* #92071f pōhutukawa crimson (city lead); paper on it 8.8:1 */
  --sun-hi: oklch(0.47 0.17 22);
  --sun-deep: oklch(0.36 0.14 22);
  --on-sun: oklch(0.985 0.006 215);
  --hi: oklch(0.885 0.165 97);      /* the master sun (city accent): highlights and found states on dark grounds */
  --hl: oklch(0.86 0.07 18);        /* a pale pōhutukawa wash: the marker under words on light grounds */
  --ink: oklch(0.21 0.008 60);      /* #1b1715 Rangitoto basalt */
  --ink-2: oklch(0.30 0.012 60);
  --ink-soft: oklch(0.40 0.015 220);
  --paper: oklch(0.968 0.01 215);   /* #edf6f9 Waitematā light */
  --paper-2: oklch(0.92 0.02 215);  /* harbour mist */
  --paper-dim: oklch(0.80 0.02 215);
  --flame: oklch(0.50 0.19 25);
  --deep: oklch(0.36 0.05 220);     /* #1a434f the harbour under cloud; paper on it 10.2:1 */
  --map-land: oklch(0.42 0.165 22);
  --map-sea: oklch(0.36 0.05 220);
  --map-land-lbl: oklch(0.985 0.006 215 / 0.8);
  --map-sea-lbl: oklch(0.985 0.006 215 / 0.7);
  /* Contour rings: the volcanic field as a survey map draws it (the skin's motif), faint paper lines over the crimson. */
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='1.5'%3E%3Cellipse cx='60' cy='58' rx='9' ry='7'/%3E%3Cellipse cx='59' cy='61' rx='21' ry='17'/%3E%3Cellipse cx='58' cy='64' rx='34' ry='28'/%3E%3Cellipse cx='57' cy='67' rx='48' ry='40'/%3E%3C/svg%3E");
  --head: "Besley", Georgia, serif;
  --display: "Archivo", "Arial Narrow", sans-serif;
  --text: "Atkinson Next", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --gutter: 16px;
}
@media (min-width: 700px) { :root { --gutter: clamp(24px, 4.4vw, 72px); } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.55 var(--text); font-kerning: normal; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.on-ink :focus-visible, .free :focus-visible, .band :focus-visible { outline-color: var(--hi); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--hi); padding: 12px 16px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }
.nb { white-space: nowrap; }

/* Display type: Vietnamese shopfront signboard, compressed black caps. */
h1, h2, .display { font-family: var(--display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; line-height: 0.86; letter-spacing: 0; }
h2 { font-size: clamp(3rem, 12.5vw, 7.5rem); }
h3 { font-family: var(--text); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.kicker { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.kicker.on-dark { color: var(--hi); }
.sun { color: var(--hi); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 24px; border-radius: 12px; border: 0;
  font: 700 1.0625rem/1.1 var(--text); text-decoration: none; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.btn:active { transform: scale(0.97); }
.btn-ink { background: var(--ink); color: var(--hi); }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-text { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 8px; }
.btn-sm { min-height: 52px; padding: 0 18px; }
@media (hover: hover) {
  .btn-ink:hover { background: var(--ink-2); }
  .btn-sun:hover { background: var(--sun-hi); }
  .btn-line:hover { background: var(--paper-2); }
}
.link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ HERO */
.hero { position: relative; background: var(--sun); }
.hero { height: calc(100svh + var(--pin-run, 150svh)); }
.hero-pin { position: sticky; top: 0; height: 100svh; min-height: 520px; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.nav { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gutter); pointer-events: none; }
.nav a { pointer-events: auto; }
/* The brand lockup (A's piece, C's wordmark), never in a box. Ink on light; the reversed lockup over the dark ground of the loose pieces. */
.mark { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
.mark img { width: clamp(112px, 9vw, 132px); height: auto; transition: opacity 300ms ease; }
.mark .mark-rev { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; }
@media (max-width: 899px) {
  .hero-pin:has(.stage.tl-loose) .mark-ink { opacity: 0; }
  .hero-pin:has(.stage.tl-loose) .mark-rev { opacity: 1; }
}
.nav-play { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 0.9375rem; }
.nav-play b { color: var(--hi); margin-left: 4px; }

.stage { position: relative; background: var(--ink); isolation: isolate; }
.stage-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: 2; transition: opacity 500ms ease; }
.stage:not(.live) .pieces { visibility: hidden; }
.stage.live .stage-photo { opacity: 0; transition-duration: 0ms; }
.stage.live.whole .stage-photo { opacity: 1; z-index: 3; transition-duration: 700ms; }
.seams { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; fill: none; stroke: var(--hi); stroke-width: 1.5; stroke-opacity: 0.4; stroke-dasharray: 3 5; }
.stage.cutting .seams { z-index: 3; stroke: var(--paper); stroke-opacity: 0.95; stroke-dasharray: none; stroke-width: 2; animation: cut 520ms var(--ease-out) both; }
@keyframes cut { from { stroke-opacity: 0; } }
.stage.still .seams { z-index: 3; stroke: var(--paper); stroke-opacity: 0.6; stroke-dasharray: none; }
.pieces { position: absolute; inset: 0; z-index: 2; }
.pc { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; }
.pc canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc .sh { opacity: 0; }
/* The signature: colour comes up. Loose pieces wait as black-and-white prints (baked in site.js); each one develops into the full golden
   grade as it lands (site.js fades .col over the last fifth of its flight). Film grain sits over the frame while pieces
   are loose, and an anamorphic flare crosses the picture when it is whole. */
@property --fx { syntax: "<number>"; inherits: false; initial-value: 0; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px;
  opacity: calc(var(--loose, 0) * 0.55); transition: opacity 500ms ease; animation: grain 480ms steps(1) infinite; }
@keyframes grain { 25% { background-position: -37px 61px; } 50% { background-position: 83px -29px; } 75% { background-position: -71px -97px; } }
.stage::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  --x: calc(-15% + 130% * var(--fx)); --y: calc(26% + 22% * var(--fx));
  background:
    radial-gradient(circle at var(--x) var(--y), oklch(1 0.02 95) 0, oklch(0.96 0.09 92 / 0.9) 1.5%, oklch(0.87 0.17 95 / 0.35) 8%, transparent 22%),
    radial-gradient(ellipse 130% 0.7% at var(--x) var(--y), oklch(1 0.03 95), oklch(0.93 0.13 97 / 0.8) 45%, transparent),
    radial-gradient(ellipse 110% 4% at var(--x) var(--y), oklch(0.87 0.17 95 / 0.5), transparent 70%),
    linear-gradient(100deg, transparent 30%, oklch(0.93 0.13 97 / 0.18) calc(20% + 60% * var(--fx)), transparent 90%); }
.stage.whole::before { animation: flare 1600ms cubic-bezier(0.45, 0, 0.3, 1) 250ms both; }
@keyframes flare { 0% { --fx: 0; opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { --fx: 1; opacity: 0; } }
.count { position: absolute; z-index: 5; left: var(--gutter); bottom: 14px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 6px;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; font: 700 0.9375rem/1 var(--text); cursor: pointer;
  box-shadow: 0 0 0 2px var(--hi); transition: transform 160ms var(--ease-out), opacity 300ms ease; }
.count:active { transform: scale(0.97); }
.count-n { background: var(--sun); color: var(--ink); border-radius: 999px; padding: 8px 10px 7px; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.count.bump .count-n { animation: bump 260ms var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.12); } }

/* Mobile: the pinned screen is the puzzle plus the headline and one button. Nothing scrolls over it. */
.slab { container-type: inline-size; background: var(--sun); padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); }
.slab .kicker, .slab .lede { display: none; }
h1 { font-size: 13.9cqi; line-height: 0.88; margin-bottom: 12px; }
h1 .l1 { display: block; white-space: nowrap; }
h1 { padding-top: 0.24em; } /* room for the stacked marks of ĐÀ NẴNG */
.lede { max-width: 38ch; font-size: 1.0625rem; line-height: 1.5; margin-bottom: 16px; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.ctas .btn { flex: 1 1 100%; }
.ctas .link { display: none; }
.hero-more { background: var(--sun); padding: 30px var(--gutter) 40px; box-shadow: 0 -2px 0 var(--ink) inset; }
.hero-more .kicker { margin-bottom: 12px; }
.lede-m { max-width: 38ch; font-size: 1.1875rem; line-height: 1.5; margin-bottom: 8px; }

@media (min-width: 900px) {
  .hero-pin { grid-template-rows: 1fr; grid-template-columns: minmax(440px, 44%) 1fr; }
  .stage { grid-column: 2; grid-row: 1; }
  .slab { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 96px var(--gutter) 56px; }
  .slab .kicker, .slab .lede { display: block; }
  .hero-more { display: none; }
  .hero { height: calc(100svh + var(--pin-run, 110svh)); }
  h1 { font-size: clamp(4.5rem, 28.5cqi, 10rem); line-height: 0.86; margin-bottom: 28px; }
  h1 .l1 { display: inline; white-space: normal; }
  .ctas .link { display: inline-flex; }
  .lede { font-size: 1.1875rem; margin-bottom: 26px; }
  .ctas .btn { flex: 0 0 auto; }
  .nav { right: auto; width: 100%; }
  .count { left: auto; right: var(--gutter); bottom: 22px; }
}

/* ------------------------------------------------------------------ BANDS (full-bleed photos) */
.band { position: relative; margin: 0; overflow: hidden; background: var(--ink); }
.band > img { width: 100%; height: 100%; object-fit: cover; }
.band-copy { position: absolute; inset: auto 0 0 0; padding: 120px var(--gutter) 36px; color: var(--paper);
  background: linear-gradient(to top, oklch(0.17 0.03 95 / 0.94) 0%, oklch(0.17 0.03 95 / 0.8) 38%, oklch(0.17 0.03 95 / 0) 100%); }
.band-copy h2 { font-size: clamp(3.5rem, 17vw, 10rem); max-width: 12ch; }

/* ------------------------------------------------------------------ HOW */
.band-street { height: 92svh; min-height: 560px; }
.band-street > img { object-position: 50% 45%; }
.beats { list-style: none; margin: 0; padding: 56px var(--gutter) 80px; display: grid; gap: 0; background: var(--paper); counter-reset: none; }
.beats li { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; padding: 22px 0 24px; border-top: 2px solid var(--ink); }
.beats li:last-child { border-bottom: 2px solid var(--ink); }
.beats p { color: var(--ink-soft); max-width: 44ch; margin-top: 6px; }
.beat-n { width: 72px; height: 72px; display: grid; place-items: center; margin-top: -8px; background: var(--sun);
  font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 2.5rem; line-height: 1; padding-top: 2px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 20H38C38 11 43 4 50 4S62 11 62 20H82V40C91 40 97 45 97 51S91 62 82 62V82H62C62 74 57 69 50 69S38 74 38 82H18Z'/%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 100 100'%3E%3Cpath d='M18 20H38C38 11 43 4 50 4S62 11 62 20H82V40C91 40 97 45 97 51S91 62 82 62V82H62C62 74 57 69 50 69S38 74 38 82H18Z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (min-width: 900px) {
  .band-street { height: 96vh; }
  .band-street > img { object-position: 50% 58%; }
  .beats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 96px); padding-top: 96px; padding-bottom: 120px; }
  .beats li:nth-last-child(2) { border-bottom: 2px solid var(--ink); }
  .beats li { padding: 30px 0 34px; grid-template-columns: 92px 1fr; }
  .beat-n { width: 84px; height: 84px; font-size: 2.9rem; }
  .beats h3 { font-size: 1.5rem; }
}

/* ------------------------------------------------------------------ DEMO */
.demo { background: var(--sun); padding: 72px var(--gutter) 88px; display: grid; gap: 36px; }
.demo-intro h2 { margin-bottom: 20px; }
.demo-intro p { max-width: 52ch; }
.demo-note { margin-top: 14px; font-weight: 700; }
.ticket { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 8px 8px 0 var(--ink); padding: 18px 18px 20px; max-width: 560px; width: 100%; }
.ticket-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 2px dashed var(--ink); }
.ticket-stop { font-family: var(--display); font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: 1.75rem; line-height: 1; }
.ticket-stop b { font-weight: 900; }
.ticket-stop i { font-style: normal; color: var(--ink-soft); }
.ladder { display: flex; gap: 5px; }
.ladder b { width: 20px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color 200ms ease; }
.ladder b.on { background: var(--ink); }
.clues { list-style: none; margin: 0; padding: 4px 0 0; }
.clues li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--paper-dim); }
.clues li::before { content: attr(data-n); font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 1.5rem; line-height: 1.05; }
.clues li p { font-size: 1.0625rem; }
.clues li.old p, .clues li.spare p { color: var(--ink-soft); font-size: 1rem; }
.clues li.old::before, .clues li.spare::before { color: var(--ink-soft); }
.clues li.new { animation: rise 420ms var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.odds { margin: 14px 0 16px; }
.odds-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.9375rem; }
.odds-row strong { font-weight: 700; }
.odds-track { height: 12px; margin: 8px 0 10px; border-radius: 99px; box-shadow: inset 0 0 0 2px var(--ink); overflow: hidden; }
.odds-fill { height: 100%; background: var(--ink); transform-origin: left; transition: transform 420ms var(--ease-out); }
.par { display: inline-block; margin-left: 6px; background: var(--ink); color: var(--hi); border-radius: 6px; padding: 3px 7px 2px; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; }
.guess { display: flex; gap: 8px; }
.guess input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); font: 400 1.0625rem var(--text); }
.guess input::placeholder { color: var(--ink-soft); opacity: 1; }
.guess-msg { min-height: 1.5em; margin: 10px 0 6px; font-weight: 700; font-size: 1rem; }
.guess-msg.bad { color: var(--flame); }
.clue-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.clue-actions .btn-line { flex: 1 1 auto; }
.answer { margin-top: 18px; padding-top: 16px; border-top: 2px dashed var(--ink); animation: rise 500ms var(--ease-out) both; }
.answer-ph { position: relative; margin-bottom: 14px; }
.answer img { width: 100%; border-radius: 10px; aspect-ratio: 640 / 485; object-fit: cover; }
.answer-k { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.answer-name { font-family: var(--display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; font-size: 2.25rem; line-height: 0.95; margin: 4px 0 2px; }
.answer-vi { font-family: var(--display); font-stretch: 100%; font-weight: 600; font-size: 1.0625rem; margin-bottom: 10px; }
.answer-fact { color: var(--ink-soft); font-size: 1rem; }
@media (min-width: 900px) {
  .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(40px, 6vw, 120px); align-items: start; padding-top: 120px; padding-bottom: 130px; }
  .demo-intro { position: sticky; top: 96px; }
  .ticket { padding: 24px 26px 26px; }
}

/* ------------------------------------------------------------------ WALK */
/* Film: a dark house, the screen framed in dragon yellow. */
.film { background: var(--ink); color: var(--paper); padding: 72px var(--gutter) 88px; display: grid; gap: 36px; }
.film-copy h2 { margin-bottom: 20px; font-size: clamp(3rem, 12.5vw, 5.6rem); }
.film-copy p:not(.kicker) { max-width: 44ch; color: var(--paper-2); }
.film-frame { position: relative; width: min(100%, 78svh * 9 / 16); margin: 0 auto; background: #000; box-shadow: 0 0 0 3px var(--hi), 0 30px 60px -30px #000; border-radius: 4px; overflow: hidden; }
.film-frame.wide { width: 100%; }
.film-frame video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.film-frame.wide video { aspect-ratio: 16 / 9; }
.film-play { position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--sun); color: var(--ink); box-shadow: 0 0 0 6px oklch(0.21 0.03 95 / 0.5); transition: transform 160ms var(--ease-out); }
.film-play:hover { transform: scale(1.05); }
.film-play:active { transform: scale(0.96); }
.film-play svg { width: 38px; height: 38px; margin-left: 5px; fill: currentColor; }
.film :focus-visible { outline-color: var(--hi); }
.film-frame.playing .film-play { display: none; }
@media (min-width: 900px) {
  .film { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 64px; padding: 112px var(--gutter) 128px; }
}
.walk { background: var(--paper); }
.band-river { height: 64svh; min-height: 420px; }
.band-river > img { object-position: 50% 60%; }
.walk-grid { display: grid; gap: 36px; padding: 56px var(--gutter) 88px; }
.band-top { position: absolute; inset: 0 0 auto 0; padding: 26px var(--gutter) 90px; color: var(--ink);
  background: linear-gradient(to bottom, oklch(0.98 0.01 92 / 0.72) 0%, oklch(0.98 0.01 92 / 0.45) 55%, oklch(0.98 0.01 92 / 0) 100%); }
.band-top h2 { font-size: clamp(3rem, 13vw, 9rem); max-width: 14ch; }
.hl { box-shadow: inset 0 -0.34em 0 var(--hl); }
.walk-lede { max-width: 50ch; font-size: 1.1875rem; }
.walk-facts { margin: 26px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); }
.walk-facts div { padding: 14px 0 16px; border-bottom: 2px solid var(--ink); }
.walk-facts div:nth-child(odd) { padding-right: 14px; border-right: 2px solid var(--ink); }
.walk-facts div:nth-child(even) { padding-left: 14px; }
.walk-facts dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.walk-facts dd { margin: 4px 0 0; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 1.5rem; line-height: 1.05; }
.walk-note { margin-top: 18px; font-size: 1rem; }
.fog { position: relative; margin: 0; }
.fog-frame { position: relative; aspect-ratio: 2100 / 2070; border: 2.5px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--sun); }
.fog svg, .fog canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fog-cap { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 0.9375rem; line-height: 1.4; }
.fog-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 5px var(--sun), 0 0 0 2px var(--ink); }
.coffee { margin: 0; display: grid; grid-template-columns: 1fr 58%; align-items: end; gap: 14px; }
/* The cafe photo cut into the Jigwalk piece (the brand's photo-in-a-piece), lifted off the page. */
.cafe-piece { grid-column: 2; grid-row: 1; filter: drop-shadow(0 4px 6px oklch(0.21 0.03 90 / 0.16)) drop-shadow(0 20px 26px oklch(0.21 0.03 90 / 0.3)); }
.cafe-piece img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 60%;
  -webkit-mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; }
.map-lbl { font-family: var(--display); font-stretch: 100%; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink-soft); }
.map-start { font-family: var(--display); font-stretch: 75%; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.fog .reveal { opacity: 0; transition: opacity 500ms ease 700ms; }
.fog.open .reveal { opacity: 1; }
@media (min-width: 900px) {
  .band-river { height: 84vh; }
  .band-river > img { object-position: 50% 8%; }
  .band-top { padding-top: 56px; }
  .band-top h2 { font-size: clamp(4rem, 8.4vw, 8.5rem); max-width: none; }
  .walk-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 112px); row-gap: 40px; padding-top: 110px; padding-bottom: 130px; }
  .fog { grid-column: 2; grid-row: 1 / span 2; }
  .coffee { grid-column: 1; grid-row: 2; align-self: end; grid-template-columns: 1fr 64%; }
}

/* ------------------------------------------------------------------ MODES */
.modes { background: var(--sun); padding: 72px var(--gutter) 84px; }
.modes-grid { display: grid; gap: 36px; }
.modes-copy h2 { margin-bottom: 24px; }
.seg { display: inline-flex; padding: 4px; border-radius: 14px; box-shadow: inset 0 0 0 2.5px var(--ink); background: var(--paper); margin-bottom: 22px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-width: 92px; min-height: 48px; padding: 0 16px; border-radius: 10px; font-weight: 700; transition: background-color 160ms ease, color 160ms ease; }
.seg input:checked + span { background: var(--ink); color: var(--hi); }
.seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.mode-text h3 { font-family: var(--display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; font-size: 2.25rem; line-height: 1; margin-bottom: 6px; }
.mode-text p { max-width: 44ch; min-height: 4.65em; }
.mode-help { list-style: none; margin: 18px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.mode-help li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 2px solid var(--ink); font-weight: 700; transition: opacity 200ms ease; }
.mh-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); position: relative; }
.mh-mark::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 12px; border: solid var(--hi); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.mode-help li.off { opacity: 0.62; }
.mode-help li.off span:not(.mh-mark) { text-decoration: line-through; text-decoration-thickness: 2px; }
.mode-help li.off .mh-mark { background: transparent; box-shadow: inset 0 0 0 2.5px var(--ink); }
.mode-help li.off .mh-mark::after { left: 5px; top: 11px; width: 16px; height: 0; border-width: 0 0 2.5px 0; border-color: var(--ink); transform: none; }
.radar { margin: 0; }
.radar svg { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 2.5px var(--ink), 6px 6px 0 var(--ink); }
.radar figcaption { margin-top: 18px; font-weight: 700; }
.rg-pill { font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 16px; letter-spacing: 0.1em; }
.rg-q { font-family: var(--display); font-weight: 900; }
#region { transition: transform 600ms var(--ease-out); }
#arrow { transition: transform 500ms var(--ease-out), opacity 250ms ease; }
#dist { transition: opacity 250ms ease; }
@media (min-width: 900px) {
  .modes { padding: 120px var(--gutter) 130px; }
  .modes-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 130px); align-items: center; }
}

/* ------------------------------------------------------------------ WAYS TO PLAY: credits roll + film strip */
.ways { background: var(--ink); color: var(--paper); padding: 72px var(--gutter) 88px; }
.ways-grid { display: grid; gap: 44px; max-width: 1400px; margin: 0 auto; }
.ways-head h2 { margin-bottom: 22px; max-width: 7ch; }
.ways-head > p:not(.kicker) { max-width: 46ch; color: var(--paper-dim); }
.credits { list-style: none; margin: 0; padding: 0; border-top: 2px solid oklch(0.975 0.014 95 / 0.25); }
.credits li { padding: 24px 0 26px; border-bottom: 2px solid oklch(0.975 0.014 95 / 0.25); }
.credits .role { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hi); }
.credits h3 { font-stretch: 62%; font-weight: 850; font-size: clamp(2.6rem, 11vw, 3.6rem); line-height: 0.9; margin: 6px 0 12px; color: var(--paper); }
.credits li > p:not(.role) { max-width: 46ch; color: var(--paper-dim); font-size: 1.0625rem; }
.lifelines { margin: 18px 0 0; display: grid; gap: 10px; }
.lifelines div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; align-items: baseline; }
.lifelines dt { font-family: var(--display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hi); }
.lifelines dd { margin: 0; color: var(--paper-dim); font-size: 1rem; line-height: 1.4; }
.strip { --hole: oklch(0.98 0.01 92 / 0.85); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 30px 14px; background: #0c0b07; border-radius: 6px; width: 100%; max-width: 560px; margin: 0 auto;
  background-image: repeating-linear-gradient(90deg, var(--hole) 0 12px, transparent 12px 26px), repeating-linear-gradient(90deg, var(--hole) 0 12px, transparent 12px 26px);
  background-size: 100% 10px, 100% 10px; background-position: 8px 10px, 8px calc(100% - 10px); background-repeat: no-repeat; }
.frame { margin: 0; }
.frame img { width: 100%; height: auto; border-radius: 4px; }
.frame figcaption { margin-top: 12px; font-size: 0.9375rem; line-height: 1.35; color: var(--paper-dim); }
.frame figcaption b { display: block; font-family: var(--display); font-stretch: 75%; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hi); }
.billing { font-weight: 700; max-width: 52ch; margin: 28px auto 0; }
.ways-side .billing { max-width: 560px; }
.billing span { display: block; margin-bottom: 4px; font-family: var(--display); font-stretch: 100%; font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hi); }
@media (min-width: 900px) {
  .ways { padding: 120px var(--gutter) 130px; }
  .ways-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 7vw, 130px); row-gap: 56px; align-items: start; }
  .ways-head { grid-column: 1; grid-row: 1; }
  .credits { grid-column: 1; grid-row: 2; }
  .ways-side { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 32px; }
  .credits li { display: grid; grid-template-columns: 11rem 1fr; column-gap: 28px; }
  .credits li > * { grid-column: 2; }
  .credits .role { grid-column: 1; grid-row: 1 / span 2; padding-top: 14px; text-align: right; }
}

/* ------------------------------------------------------------------ SCORING */
.score { background: var(--paper); padding: 72px var(--gutter) 88px; }
.score-grid { display: grid; gap: 40px; }
.score-copy h2 { margin-bottom: 20px; }
.score-copy > p { max-width: 52ch; color: var(--ink-soft); }
.keys { list-style: none; margin: 22px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; font-weight: 700; font-size: 1rem; }
.keys li { display: flex; align-items: center; gap: 10px; }
.k { flex: none; width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 0.9375rem; }
.k-under, .c-under { background: var(--sun); color: var(--ink); }
.k-par, .c-par { background: oklch(0.72 0.14 150); color: var(--ink); }
.k-p1, .c-p1 { background: oklch(0.72 0.11 240); color: var(--ink); }
.k-p2, .c-p2 { background: oklch(0.5 0.15 310); color: var(--paper); }
.k-p3, .c-p3 { background: oklch(0.74 0.15 55); color: var(--ink); }
.k-walk, .c-walk { background: oklch(0.5 0.19 30); color: var(--paper); }
.k-help, .c-help { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.share { display: grid; justify-items: center; gap: 12px; }
.share-card { width: min(100%, 360px); background: var(--ink); color: var(--paper); border-radius: 18px; padding: 18px; box-shadow: 6px 6px 0 var(--sun), 6px 6px 0 2.5px var(--ink); }
.share-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); }
.share-mark { width: 104px; height: auto; align-self: center; }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.grid i { aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 0.9375rem; }
.grid i.pre { box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.grid i.pop { animation: pop 260ms var(--ease-out) both; }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } }
.share-score { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; }
.share-score .big { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 3.5rem; line-height: 0.8; font-variant-numeric: tabular-nums; min-width: 1.6ch; }
.share-of { font-size: 0.875rem; line-height: 1.25; color: var(--paper-dim); }
.par-tag { margin-left: auto; background: var(--sun); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 0.9375rem; opacity: 0; transition: opacity 300ms ease; }
.par-tag.on { opacity: 1; }
.share-foot { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--paper-dim); border-top: 1.5px dashed var(--ink-soft); padding-top: 10px; }
.share-cap { font-size: 0.9375rem; color: var(--ink-soft); }
@media (min-width: 900px) {
  .score { padding: 120px var(--gutter) 130px; }
  .score-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 130px); align-items: center; }
  .keys { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 26px; }
}

/* ------------------------------------------------------------------ GROUPS */
.groups { background: var(--sun); padding: 72px var(--gutter) 84px; overflow: hidden; }
.groups-grid { display: grid; gap: 40px; }
.groups-copy h2 { margin-bottom: 20px; }
.groups-copy p { max-width: 48ch; }
.groups-copy p + p { margin-top: 12px; }
.phones { display: flex; align-items: center; justify-content: center; gap: 10px; }
.phone { position: relative; width: min(42vw, 190px); padding: 16px 12px 14px; border-radius: 26px; background: var(--paper); box-shadow: 0 0 0 3px var(--ink), 5px 5px 0 var(--ink); }
.phone[data-p="1"] { transform: translateY(26px); }
.phone-who { font-family: var(--display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; margin-bottom: 10px; }
.phone .mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; border-radius: 6px; overflow: hidden; }
.phone .mini i { aspect-ratio: 1; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--paper-dim); }
.phone .mini i.got { background-image: var(--poster); background-size: 500% 500%; box-shadow: none; }
.phone .mini i.flash { animation: flash 700ms var(--ease-out); }
@keyframes flash { 0% { filter: brightness(1.8); transform: scale(1.25); } }
.phone-toast { position: absolute; left: 50%; top: 46%; translate: -50% 0; background: var(--ink); color: var(--hi); font-weight: 700; font-size: 0.875rem; padding: 6px 12px; border-radius: 999px; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity 200ms ease, transform 300ms var(--ease-out); }
.phone-toast.show { opacity: 1; transform: none; }
.phone-team { margin-top: 10px; font-size: 0.8125rem; font-weight: 700; }
.phone-team b { font-family: var(--display); font-stretch: 75%; font-size: 1.25rem; }
.sync { display: flex; gap: 4px; }
.sync span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: 0.25; }
.sync.go span { animation: dot 520ms ease both; }
.sync.go span:nth-child(2) { animation-delay: 120ms; } .sync.go span:nth-child(3) { animation-delay: 240ms; }
@keyframes dot { 50% { opacity: 1; transform: scale(1.4); } }
@media (min-width: 900px) {
  .groups { padding: 120px var(--gutter) 150px; }
  .groups-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 130px); align-items: center; }
  .groups-copy { order: 2; }
  .phones { gap: 22px; }
  .phone { width: 220px; }
}

/* ------------------------------------------------------------------ REWARD */
.reward { background: var(--paper-2); padding: 72px var(--gutter) 88px; }
.reward-grid { display: grid; gap: 40px; }
.board-demo { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; border-radius: 6px; box-shadow: 0 0 0 2.5px var(--ink), 6px 6px 0 var(--ink); touch-action: none; }
.board-demo img { width: 100%; height: 100%; border-radius: 6px; }
.bd-seams { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-seams path { fill: none; stroke: oklch(0.99 0.01 95 / 0.5); stroke-width: 2; }
.bd-seams .hole { fill: var(--paper-2); stroke: var(--ink); stroke-width: 4; stroke-dasharray: 10 8; transition: opacity 400ms ease; }
.board-demo.done .hole { opacity: 0; }
.board-demo.done .bd-seams path { stroke-opacity: 0; transition: stroke-opacity 600ms ease 200ms; }
.bd-piece { position: absolute; width: 32.4%; height: 32.4%; cursor: grab; touch-action: none;
  filter: grayscale(1) sepia(0.28) contrast(1.25) brightness(0.9) drop-shadow(0 10px 12px oklch(0.21 0.03 95 / 0.45)); transition: filter 300ms ease; }
.bd-piece.held { cursor: grabbing; }
/* like the hero: the loose piece is a black-and-white print and develops as it lands */
.board-demo.done .bd-piece { filter: grayscale(0) sepia(0) contrast(1) brightness(1) drop-shadow(0 0 0 transparent); cursor: default; }
.bd-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; margin-top: 22px; font-weight: 700; text-align: center; }
.reward-copy h2 { margin-bottom: 22px; }
.rewards { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: r; border-top: 2px solid var(--ink); }
.rewards li { counter-increment: r; display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 14px 0; border-bottom: 2px solid var(--ink); max-width: 52ch; }
.rewards li::before { content: counter(r); font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 2rem; line-height: 1; }
.reward-where { font-weight: 700; }
@media (min-width: 900px) {
  .reward { padding: 120px var(--gutter) 130px; }
  .reward-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 130px); align-items: center; }
}

/* ------------------------------------------------------------------ FAQ */
.faq { background: var(--paper); padding: 72px var(--gutter) 88px; }
.faq-grid { display: grid; gap: 28px; }
.qs { border-top: 2px solid var(--ink); }
.qs details { border-bottom: 2px solid var(--ink); }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 12px 0; font-weight: 700; font-size: 1.1875rem; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--sun); box-shadow: inset 0 0 0 2px var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; transition: transform 200ms var(--ease-out); }
.qs details[open] summary::after { transform: rotate(45deg); }
.qs details p { max-width: 62ch; padding: 0 0 18px; color: var(--ink-soft); }
@media (min-width: 900px) {
  .faq { padding: 120px var(--gutter) 130px; }
  .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 130px); align-items: start; }
  .faq h2 { position: sticky; top: 40px; }
}

/* ------------------------------------------------------------------ FINAL */
.final .band-beach { height: 92svh; min-height: 560px; }
.final .band-beach > img { object-position: 50% 62%; }
.final h2 { margin-bottom: 26px; }
.final-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.final-ctas .btn { flex: 1 1 100%; max-width: 420px; }
.link.on-dark { color: var(--paper); }
@media (min-width: 900px) { .final .band-beach { height: 90vh; } .final-ctas .btn { flex: 0 0 auto; } }

/* ------------------------------------------------------------------ FREE FOR TESTERS */
.free { background: var(--ink); color: var(--paper); }
.free-grid { display: grid; gap: 44px; padding: 56px var(--gutter) 80px; }
.free-main h2 { margin-bottom: 20px; }
.free-lede { max-width: 48ch; line-height: 1.6; letter-spacing: 0.01em; }
.calc { margin: 28px 0 22px; border: 2px solid var(--ink-soft); border-radius: 16px; max-width: 520px; }
.calc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; }
.calc-row + .calc-row { border-top: 2px solid var(--ink-soft); }
.calc-row > span:first-child { font-weight: 700; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--paper); background: transparent; color: var(--paper); font: 700 1.5rem/1 var(--text); cursor: pointer; transition: transform 160ms var(--ease-out); }
.stepper button:active { transform: scale(0.94); }
.stepper button:disabled { opacity: 0.4; cursor: default; }
.stepper output { min-width: 2ch; text-align: center; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.calc-price span { color: var(--paper-dim); }
.calc-price s { text-decoration-thickness: 2px; margin-left: 4px; }
.calc-price strong { display: flex; align-items: baseline; gap: 8px; font-weight: 700; }
.calc-price b { font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 3rem; line-height: 0.8; color: var(--hi); }
.free .btn-sun { width: 100%; max-width: 520px; }
.free .fine { margin-top: 16px; max-width: 52ch; font-size: 0.9375rem; color: var(--paper-dim); }
.free-side h3 { font-family: var(--display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; font-size: 2.25rem; line-height: 1; margin-bottom: 8px; }
.incl { list-style: none; margin: 0; padding: 0; }
.incl li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ink-soft); }
.incl li::before { content: ""; width: 22px; height: 22px; background: var(--sun);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 20H38C38 11 43 4 50 4S62 11 62 20H82V40C91 40 97 45 97 51S91 62 82 62V82H62C62 74 57 69 50 69S38 74 38 82H18Z'/%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 100 100'%3E%3Cpath d='M18 20H38C38 11 43 4 50 4S62 11 62 20H82V40C91 40 97 45 97 51S91 62 82 62V82H62C62 74 57 69 50 69S38 74 38 82H18Z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (min-width: 900px) {
  .free-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 7vw, 140px); padding-top: 110px; padding-bottom: 130px; align-items: start; }
  .free-side { padding-top: 34px; }
}

/* ------------------------------------------------------------------ FOOTER */
.foot { background: var(--sun); padding: 40px var(--gutter) calc(96px + env(safe-area-inset-bottom)); }
.foot-mark { display: block; width: 100%; height: auto; margin: 0 0 22px; }
.foot { container-type: inline-size; }
.foot-line { font-weight: 700; max-width: 40ch; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 14px 0 18px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.foot .fine { font-size: 0.875rem; color: var(--ink-2); max-width: 90ch; }
@media (min-width: 900px) { .foot { padding-bottom: 48px; } }

/* ------------------------------------------------------------------ DOCK (mobile) */
.dock { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--sun); box-shadow: 0 -2px 0 var(--ink);
  transform: translateY(110%); transition: transform 320ms var(--ease-out); }
.dock .btn { width: 100%; }
.dock.show { transform: none; }
@media (min-width: 900px) { .dock { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero { height: auto !important; }
  .stage::after { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Photo credits: place and photographer (plus the licence where CC asks for it), small, in a bottom corner of the photo. */
.ph-credit { position: absolute; right: 8px; bottom: 8px; z-index: 6; max-width: calc(100% - 16px); margin: 0; padding: 2px 8px; border-radius: 999px;
  background: oklch(0.21 0.03 95 / 0.55); color: oklch(0.99 0.01 95); font: 400 0.6875rem/1.45 var(--text); pointer-events: none; }
.coffee .ph-credit { position: static; grid-column: 2; grid-row: 1; align-self: end; justify-self: end; margin: 0 8px 8px 0; }
.board-demo .ph-credit, .stage .ph-credit { right: auto; left: 8px; }
@media (max-width: 899px) { .stage .ph-credit { left: auto; right: 8px; bottom: 66px; } } /* above the piece counter */

/* Đà Nẵng inside body text: Atkinson has no Vietnamese stacked marks, so the name is set in Archivo, which has them. */
.vi { font-family: var(--display); font-stretch: 100%; white-space: nowrap; }
/* Phones: room under the board for the loose last piece, so it never sits on "Place it for me". */
@media (max-width: 899px) { .bd-bar { margin-top: 18vw; } }

/* ------------------------------------------------------------------ Đà Nẵng design language (Oct 2026) */
/* The scale motif, faint, over the yellow fields. */
.slab, .hero-more, .modes, .foot { background-image: var(--motif); background-size: 120px 120px; }
/* Scoring sits on a Dragon yellow card with the motif. */
.score-grid { background: var(--sun) var(--motif) 0 0 / 120px 120px; border-radius: 28px; padding: clamp(24px, 5vw, 64px); }
.score-copy > p { color: var(--ink-2); }
.score-grid .k-under { box-shadow: inset 0 0 0 2px var(--ink); } /* under-par key is yellow too */
/* The Han River: the live demo and the crew section on the deep green, paper text. */
.demo, .groups { background: var(--deep); color: var(--paper); }
.demo .kicker, .groups .kicker { color: var(--hi); }
.demo .ticket { color: var(--ink); }
.sync span { background: var(--paper); }
.groups .phone { color: var(--ink); }
.score-grid .hl { box-shadow: inset 0 -0.34em 0 var(--paper); } /* the highlight stays visible on the yellow card */

/* The headline: "Đà Nẵng's a puzzle. Step into it." (the homepage's framing). The name never splits; on phones two lines,
   sized so the first fits; on wider screens the name takes its own line, the biggest the column allows. */
.nm { white-space: nowrap; }
h1 { font-size: 12.9cqi; }
@media (min-width: 900px) {
  h1 { font-size: clamp(4.5rem, 25cqi, 10rem); }
  h1 .nm { display: block; }
}
/* The cafe piece fills the column under the walk facts: the piece's own outline (its ink box, 80.05 of the mark's 99.06
   units, from x 15.36 and y 4.58) spans the full column width. */
.coffee { grid-template-columns: minmax(0, 1fr); }
.cafe-piece, .coffee .ph-credit { grid-column: 1; }
.cafe-piece img { width: calc(100% * 99.06 / 80.05); max-width: none;
  margin: calc(-100% * 4.58 / 80.05) 0 calc(-100% * 14.43 / 80.05) calc(-100% * 15.36 / 80.05); }

/* ------------------------------------------------------------------ Auckland skin (Oct 2026) */
/* Type: the headlines keep the Đà Nẵng page's compressed Archivo caps (the brand's own face, the same treatment);
   Besley, the Auckland skin's display face, sets the smaller display type: answers, facts, mode names, numerals. */
.answer-name, .mode-text h3, .free-side h3, .beat-n, .rewards li::before, .walk-facts dd {
  font-family: var(--head); font-stretch: 100%; font-weight: 800; text-transform: none; letter-spacing: -0.015em; }
.answer-name, .mode-text h3, .free-side h3 { line-height: 1.02; }
.beat-n { padding-top: 0; }
h1 { padding-top: 0; } /* no stacked marks to make room for */
/* AUCKLAND'S is wider than ĐÀ NẴNG'S: the same layout, sized so the longest line fits its column. */
/* Phones: two lines like Đà Nẵng (Kyle 9 Oct: the puzzle gets the height). Desktop: four lines, as Đà Nẵng's desktop hero. */
h1 { font-size: 11.8cqi; }
@media (min-width: 900px) { h1 .nm, h1 .l2 .w { display: block; } h1 { font-size: clamp(4.2rem, 21.2cqi, 10rem); } }
.walk-facts dd { font-size: 1.3rem; line-height: 1.1; }

/* The hero puzzle fills the whole first screen like Đà Nẵng (Kyle 9 Oct; replaces the 7 Oct square stage). */
.hero-pin { background: var(--sun) var(--motif) 0 0 / 120px 120px; }
.stage-photo { object-position: 50% 50%; }

/* The crimson fields (hero, modes, scoring card, footer, dock) carry paper text. */
.hero, .slab, .hero-more, .modes, .score-grid, .foot, .dock { color: var(--on-sun); }
.btn-sun { background: var(--hi); color: var(--ink); }
@media (hover: hover) { .btn-sun:hover { background: oklch(0.92 0.13 97); } }
.btn-ink { color: var(--hi); }
.count-n { color: var(--on-sun); }
.beat-n { color: var(--on-sun); }
.par-tag { background: var(--hi); color: var(--ink); }
.film-play { background: var(--hi); color: var(--ink); }
.fog-dot { box-shadow: inset 0 0 0 5px var(--hi), 0 0 0 2px var(--ink); }
.incl li::before { background: var(--hi); }
.qs summary::after { background: var(--sun); color: var(--on-sun); box-shadow: none; }
.k-under, .c-under { background: var(--hi); color: var(--ink); }
.score-grid .k-under { box-shadow: none; }
.score-copy > p { color: var(--on-sun); }
.score-grid .hl { box-shadow: inset 0 -0.34em 0 var(--sun-deep); }
.slab .hl, .modes .hl { box-shadow: inset 0 -0.34em 0 var(--sun-deep); }
/* The lockup: the reversed one on the crimson fields (the hero nav and the footer). */
.mark .mark-ink { opacity: 0; }
.mark .mark-rev { opacity: 1; }
.hero-more { box-shadow: 0 -2px 0 var(--ink) inset; }
/* Modes on crimson: the controls stay paper cards, lines and marks in paper. */
.modes .seg { box-shadow: inset 0 0 0 2.5px var(--ink); color: var(--ink); }
.modes .mode-help { border-top-color: var(--on-sun); }
.modes .mode-help li { border-bottom-color: var(--on-sun); }
.modes .mh-mark { background: var(--ink); }
.modes .mode-help li.off .mh-mark { box-shadow: inset 0 0 0 2.5px var(--on-sun); }
.modes .mode-help li.off .mh-mark::after { border-color: var(--on-sun); }
.radar text.rg-pill { fill: var(--hi); }
.radar .region circle { fill: var(--sun); }
.radar #arrow path { fill: var(--hi); }
/* The footer on crimson: paper text, the reversed lockup. */
.foot .fine { color: oklch(0.985 0.006 215 / 0.8); }
/* Credit pills: basalt glass. */
.ph-credit { background: oklch(0.21 0.008 60 / 0.58); color: oklch(0.985 0.006 215); }
.answer-vi { font-weight: 700; }
.map-start { font-family: var(--display); }
.fog-frame { background: var(--map-land); }
/* No sideways scroll at 320 to 430 px (inherited from C): the demo grid may shrink below the ticket's widest row, and the
   walk section clips the photo piece's few px of bleed. */
.demo > * { min-width: 0; }
.ticket .odds-row { flex-wrap: wrap; }
.walk { overflow-x: clip; }

/* Kyle 7 Oct: the bands show their subject whole. <picture> gives phones a portrait crop; the img fills the band. */
.band > picture { display: block; width: 100%; height: 100%; }
.band > picture > img { width: 100%; height: 100%; object-fit: cover; }
.band-street > picture > img { object-position: 50% 40%; }
@media (min-width: 900px) { .band-street > picture > img { object-position: 50% 92%; } } /* the bridge sits high, clear of the headline */
.band-river > picture > img { object-position: 50% 40%; }

/* ------------------------------------------------------------------ restored from the old Auckland page (Kyle 7 Oct) */

/* The fog map's zones: the two areas light up with their piece counts. */
.zone-ring { fill: none; stroke: var(--paper); stroke-width: 7; stroke-dasharray: 22 16; opacity: 0; transition: opacity 500ms ease; }
.zone-tag { opacity: 0; transition: opacity 400ms ease; }
.zone-tag rect { fill: var(--ink); }
.zone-t { font: 800 50px/1 var(--display); font-stretch: 75%; letter-spacing: 0.04em; text-transform: uppercase; fill: var(--paper); }
.zone-n { font: 700 38px/1 var(--text); fill: var(--hi); }
.zone.on .zone-ring { opacity: 0.9; }
.zone.on .zone-tag { opacity: 1; }
.peek { position: absolute; z-index: 4; margin: 0; transform: translate(-50%, -130%); padding: 8px 14px; border-radius: 999px; background: var(--hi); color: var(--ink);
  font: 700 0.875rem/1 var(--text); white-space: nowrap; pointer-events: none; opacity: 0; }
.peek.on { animation: peek 1600ms var(--ease-out) forwards; }
@keyframes peek { 0% { opacity: 0; transform: translate(-50%, -100%); } 12% { opacity: 1; transform: translate(-50%, -130%); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%); } }
.fog-frame { cursor: pointer; }

/* Stamens over the finished picture. */
.petals { position: absolute; inset: -10% 0 0; z-index: 4; pointer-events: none; overflow: visible; }
.petals i { position: absolute; top: 0; width: 3px; height: 18px; border-radius: 2px; background: linear-gradient(var(--hi) 0 3px, var(--c, var(--sun)) 3px); opacity: 0;
  animation: petal var(--t, 2.4s) cubic-bezier(0.3, 0.6, 0.6, 1) var(--dl, 0ms) forwards; }
@keyframes petal { 0% { opacity: 0; transform: translate(0, -20px) rotate(0deg); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 20px), 110vh) rotate(var(--r, 540deg)); } }

/* One route on desktop (Kyle 7 Oct, as /danang/ 878fc49): the map holds still while the facts and the Ferry Building piece
   scroll up beside it, then both leave together, so the two columns finish level (the map's caption and the piece's bottom).
   The map sticks inside its own grid area, which ends with the piece, so it releases exactly when the bottoms align. */
@media (min-width: 900px) {
  .fog { position: sticky; top: 24px; align-self: start; }
  .walk-grid { padding-top: 48px; } /* Kyle 7 Oct: the map at the top of the white section, no offset */
  .walk-grid { grid-template-columns: minmax(0, 9fr) minmax(0, 15fr); } /* a wider map column: the held map fills more of the screen height */
}
/* The bands: a blurred copy of the photo sits under it while the full image loads, so a band is never an empty dark box. */
.band[style*="--lqip"] { background: var(--ink) var(--lqip) center / cover no-repeat; }
}
/* Desktop: room under the board for the loose last piece too, so it never covers "Place it for me" (the phones rule above,
   inherited from C; /danang/ has the same overlap at 1440). */
@media (min-width: 900px) { .bd-bar { margin-top: 100px; } }

/* FAQ (Kyle 7 Oct): the question is one flex item (span.q), so a name in its own span never spreads the words apart. */
.qs summary .q { flex: 1 1 auto; min-width: 0; text-align: left; word-spacing: normal; }
.qs details p { text-align: left; word-spacing: normal; }

/* ------------------------------------------------------------------ THE FERRY HOP (Auckland only) */
/* Kyle 7 Oct: two columns on top (the heading, its text and the clock on the left; the game's real Ferry pass on the right),
   and under them the old Auckland page's drawn crossing: the section pins, a ferry holds on screen while the harbour slides
   under it, and the clock runs on land and pauses for the crossing. Phones: one column, the Ferry pass after the crossing. */
.hops { --sky: oklch(0.9 0.035 215); --sail: var(--paper); --basalt: var(--ink); --harbour: var(--deep); --kowhai: var(--hi);
  --pohutukawa: var(--sun); --bush: oklch(0.47 0.1 155); --edge: var(--gutter);
  position: relative; background: var(--sky); overflow-x: clip; }
.drive { position: relative; height: 240svh; }
.drive-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.hops-top { position: relative; z-index: 2; padding: max(40px, 7svh) var(--gutter) 0; }
.hops-copy h2 { font-size: clamp(2.4rem, 11vw, 4.4rem); max-width: 13ch; }
.hops .hl { box-shadow: inset 0 -0.34em 0 var(--paper); }
.hops .lede { margin: 14px 0 0; max-width: 46ch; font-size: 1rem; line-height: 1.5; }
.drive-clock { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.drive-clock svg { width: 48px; height: 50px; overflow: visible; flex: none; }
.hops .dc-face { fill: var(--sail); stroke: var(--basalt); stroke-width: 3.5; transition: fill 300ms; }
.hops .dc-top { fill: none; stroke: var(--basalt); stroke-width: 4; stroke-linecap: round; }
.hops .dc-hand { stroke: var(--basalt); stroke-width: 3.5; stroke-linecap: round; transform-origin: 24px 28px; }
.hops .dc-pin { fill: var(--basalt); }
.drive-clock p { display: grid; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 1.25rem; line-height: 1.1; text-transform: uppercase; }
.drive-clock b { font-size: 0.75rem; font-stretch: 100%; letter-spacing: 0.12em; color: var(--harbour); }
.drive-clock .dc-stop { display: none; }
.drive-clock.paused .dc-run { display: none; }
.drive-clock.paused .dc-stop { display: block; }
.drive-clock.paused .dc-face { fill: var(--kowhai); }
.sea { position: absolute; left: 0; right: 0; bottom: 0; height: 34svh; }
.world { position: absolute; left: 0; bottom: 0; height: 100%; width: auto; max-width: none; overflow: visible; will-change: transform; }
.w-water { fill: var(--harbour); }
.w-far { fill: oklch(0.8 0.04 215); }
.w-rangi { fill: oklch(0.7 0.05 220); }
.w-wave { fill: none; stroke: oklch(0.9 0.035 215 / 0.45); stroke-width: 3; stroke-linecap: round; }
.w-city { fill: var(--basalt); }
.w-win { fill: var(--kowhai); opacity: 0.85; }
.w-land { fill: var(--bush); }
.w-cone { fill: oklch(0.58 0.11 150); stroke: var(--basalt); stroke-width: 3; stroke-linejoin: round; }
.w-contour { fill: none; stroke: oklch(0.985 0.006 215 / 0.45); stroke-width: 2.6; stroke-linecap: round; }
.w-tree { fill: oklch(0.42 0.08 155); stroke: var(--basalt); stroke-width: 2.5; stroke-linejoin: round; }
.w-bloom { fill: var(--pohutukawa); }
.w-trunk { fill: none; stroke: var(--basalt); stroke-width: 5; stroke-linecap: round; }
.w-cloud { fill: var(--sail); opacity: 0.85; }
.w-house { fill: var(--sail); stroke: var(--basalt); stroke-width: 2.5; }
.w-roof { fill: var(--pohutukawa); stroke: var(--basalt); stroke-width: 2.5; stroke-linejoin: round; }
.w-wharf { fill: oklch(0.42 0.04 60); }
.w-sign { fill: var(--kowhai); stroke: var(--basalt); stroke-width: 2.5; }
.w-signt { font: 800 22px var(--display); font-stretch: 100%; fill: var(--basalt); }
.w-wake { fill: none; stroke: var(--sail); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 18 16; opacity: 0.85; }
.hops .ferry { position: absolute; left: 0; bottom: 14svh; z-index: 3; width: 110px; pointer-events: none; will-change: transform; }
.ferry-svg { width: 100%; overflow: visible; }
.hops .f-hull, .hops .f-deck { fill: var(--sail); stroke: var(--basalt); stroke-width: 3; stroke-linejoin: round; }
.hops .f-band { fill: var(--harbour); }
.hops .f-win { fill: var(--basalt); }
.hops .f-top { fill: var(--kowhai); stroke: var(--basalt); stroke-width: 3; stroke-linejoin: round; }
.hops .f-mast { stroke: var(--basalt); stroke-width: 3; stroke-linecap: round; }
.hops .paused-chip { position: absolute; left: 50%; bottom: calc(100% + 10px); display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px 7px 10px; border-radius: 999px; white-space: nowrap;
  font: 800 0.95rem/1 var(--display); font-stretch: 85%; text-transform: uppercase; letter-spacing: 0.04em; color: var(--basalt); background: var(--kowhai); border: 2.5px solid var(--basalt); box-shadow: 0 3px 0 var(--basalt);
  opacity: 0; transform: translate(-50%, 8px) scale(0.94); transition: opacity 250ms var(--ease-out), transform 300ms var(--ease-out); }
.hops .paused-chip svg { width: 18px; height: 18px; }
.hops .ferry.driving .paused-chip { opacity: 1; transform: translate(-50%, 0); }
.drive-line { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 12px; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  color: var(--paper); font-size: 0.9375rem; line-height: 1.35; }
@media (max-width: 899px) { .sea { height: 38svh; } .drive-line { bottom: calc(38svh + 6px); color: var(--ink); } } /* phones: above the water, clear of the dock */
.drive-line b { font-family: var(--display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.125rem; }
@media (min-width: 900px) {
  .drive { height: 270svh; }
  .hops-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); column-gap: clamp(32px, 5vw, 96px); align-items: center; padding-top: max(32px, 6svh); }
  .hops-copy h2 { font-size: clamp(3rem, 5.4vw, 6rem); max-width: none; }
  .hops .lede { font-size: 1.1875rem; }
  .drive-clock { margin-top: 22px; }
  .drive-clock svg { width: 60px; height: 62px; }
  .drive-clock p { font-size: 1.5rem; }
  .sea { height: 36svh; }
  .hops .ferry { width: 190px; }
  .drive-line { bottom: 18px; font-size: 1.0625rem; }
  .drive-line b { font-size: 1.375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .drive { height: auto; }
  .drive-stage { position: relative; height: 100svh; max-height: 900px; }
}

/* Round 5 (Kyle 7 Oct): the ferry's PATH on the right, the drawn harbour back to its round-3 size. The pinned stage is a
   column: the two-column top takes what it needs and the harbour fills the rest of the screen, so nothing overlaps. */
.drive-stage { display: flex; flex-direction: column; }
.hops-top { flex: none; padding-bottom: 8px; }
.sea { position: relative; flex: 1 1 auto; height: auto; min-height: 44svh; }
@media (min-width: 900px) {
    .hops-top { grid-template-columns: minmax(0, 1fr) auto; padding-top: max(24px, 4svh); } /* the pass takes its own (1.5x) width */
  .hops-copy h2 { font-size: clamp(2.6rem, 4vw, 4.6rem); }
  .hops .lede { font-size: 1.0625rem; }
  .drive-clock { margin-top: 14px; }
  .sea { min-height: 56svh; margin-top: -80px; } /* the harbour's sky runs up behind the top, so the drawing is near its round-3 size */
  .hops-top { z-index: 3; }
}
@media (max-width: 899px) {
  .sea { height: auto; }
  .drive-line { position: static; order: 1; margin: 4px 0 0; padding: 0 var(--gutter); color: var(--ink); min-height: 4.2em; align-content: flex-start; } /* phones: under the clock, above the harbour, clear of the dock */
  .sea { order: 2; }
}

/* Round 6 (Kyle 7 Oct): a ferry pass on the right, in the homepage's boarding-pass language (paper ticket, sun stub behind a
   perforation, an ink stamp), stamped BOARDED just before the boat pulls away; then the stub tears off and falls away at 30
   degrees as it leaves (site.js ticketAt, scrubbed with the crossing). */
.fpass { --notch: 15px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; width: min(100%, 780px, 54vw); color: var(--ink);
  filter: drop-shadow(0 2px 1px oklch(0.21 0.008 60 / 0.10)) drop-shadow(0 22px 26px oklch(0.21 0.008 60 / 0.22)); } /* the shadow follows the notched outline */
/* The notches are real cut-outs (Kyle 7 Oct): each half of the ticket is masked with half-circle bites at the ends of the
   perforation, so whatever is behind the ticket shows through, and the torn stub carries its half of each notch. */
.fpass-main { position: relative; display: grid; gap: 14px; padding: 32px 36px 32px; border-radius: 26px 0 0 26px; background: var(--paper);
  -webkit-mask: radial-gradient(circle at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat; }
.fpass-kick { font: 700 1.0625rem/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.fpass-title { font-family: var(--display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; font-size: clamp(3.4rem, 5.4vw, 5.2rem); line-height: 0.9; }
.fpass-route { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 10px 30px; margin: 2px 0 0; }
.fpass-route dt { font: 700 0.875rem/1.2 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.fpass-route dd { margin: 0; font-weight: 700; font-size: 1.5rem; white-space: nowrap; }
.fpass-stub { position: relative; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 26px 28px; min-width: 200px; text-align: center;
  border-radius: 0 26px 26px 0; background: var(--hi); color: var(--ink); transform-origin: 0 0; will-change: transform;
  -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat; }
/* the perforation runs between the two notch centres, on the stub's edge */
.fpass-stub::before { content: ""; position: absolute; left: 0; top: var(--notch); bottom: var(--notch); border-left: 3px dashed oklch(0.21 0.008 60 / 0.42); }
.stub-admit { font: 700 0.875rem/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase; }
.stub-kind { font-family: var(--display); font-stretch: 75%; font-weight: 850; text-transform: uppercase; font-size: 1.75rem; line-height: 1; }
.stub-route { font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }
.stub-no { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.14em; }
/* a small barcode-like mark: uneven bars from two repeating stripes */
.stub-code { display: block; width: 120px; height: 34px; margin-top: 2px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, #0000 2px 5px, var(--ink) 5px 6px, #0000 6px 8px, var(--ink) 8px 11px, #0000 11px 13px, var(--ink) 13px 14px, #0000 14px 18px); }
.fpass-stamp { position: absolute; right: 24px; bottom: 30px; padding: 8px 16px; border: 4px solid var(--sun); border-radius: 10px; color: var(--sun);
  font-family: var(--display); font-stretch: 62%; font-weight: 900; font-size: 2.6rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.04em;
  opacity: 0; pointer-events: none; transform: rotate(-9deg); mix-blend-mode: multiply; }
@media (min-width: 900px) { .fpass { justify-self: end; align-self: center; width: min(780px, 52vw); } }

/* The zone labels along the harbour (Kyle 7 Oct): heading-size names, readable lines. */
.drive-line { gap: 2px 18px; }
.drive-line b { font-size: clamp(2rem, 7.5vw, 2.6rem); line-height: 0.95; letter-spacing: 0.01em; font-stretch: 62%; font-weight: 850; }
.drive-line span { font-size: 1.0625rem; font-weight: 700; max-width: 46ch; }
@media (min-width: 900px) { .drive-line { bottom: 22px; } .drive-line b { font-size: clamp(2.8rem, 3.8vw, 4rem); } .drive-line span { font-size: 1.25rem; } }

/* Phones: the heading and its text read first; the pinned stage holds the clock, the pass, the zone line and the harbour. */
.hops-intro { display: none; }
.h2like { font-family: var(--display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; line-height: 0.86; font-size: clamp(2.4rem, 11vw, 4.4rem); }
@media (max-width: 899px) {
  .hops-intro { display: block; padding: 64px var(--gutter) 8px; }
  .hops-intro .lede { margin: 14px 0 0; max-width: 46ch; font-size: 1rem; line-height: 1.5; }
  .hops-copy .kicker, .hops-copy h2, .hops-copy .lede { display: none; }
  .hops-top { padding-top: 22px; display: grid; gap: 14px; }
  .drive-clock { margin-top: 0; }
  .fpass { --notch: 11px; width: 100%; }
  .fpass-main { padding: 20px 18px; gap: 8px; border-radius: 20px 0 0 20px; }
  .fpass-kick { font-size: 0.8125rem; }
  .fpass-title { font-size: 2.35rem; }
  .fpass-route { gap: 6px 14px; }
  .fpass-route dt { font-size: 0.6875rem; }
  .fpass-route dd { font-size: 1rem; }
  .fpass-stub { min-width: 116px; padding: 14px 10px; gap: 5px; border-radius: 0 20px 20px 0; }
  .stub-admit { font-size: 0.6875rem; letter-spacing: 0.12em; }
  .stub-kind { font-size: 1.2rem; }
  .stub-route { font-size: 0.75rem; }
  .stub-no { font-size: 0.6875rem; }
  .stub-code { width: 84px; height: 24px; }
  .fpass-stamp { font-size: 1.15rem; padding: 3px 8px; border-width: 2.5px; right: 10px; bottom: auto; top: 8px; }
  .fpass-main { padding-top: 30px; } /* room for the stamp above the name */
  .drive-line { min-height: 7.4rem; margin-top: 10px; align-content: flex-start; } /* room for the longest label, so the harbour never changes size mid-scroll */
}

/* Kyle 9 Oct (phones): the first section is one wall. .hero-wall (index.html) wraps the pinned hero and the copy under it
   and carries the field and its motif from one origin; on phones the hero, its pin, the headline slab and the copy under it
   are transparent, so when the URL bar collapses and the screen grows there is no plain band and no seam in the motif.
   The puzzle stage keeps its own ink ground. Desktop unchanged. */
.hero-wall { background: var(--sun) var(--motif) 0 0 / 120px 120px; }
@media (max-width: 899px) { .hero, .hero-pin, .slab, .hero-more { background: transparent; } }

/* Kyle 9 Oct (phones): the ferry rides on water again. The fixed dock (Claim your free tester code) covered the harbour's
   water, so the boat seemed to float on sky. The pinned stage now keeps the dock's height (and the safe area) clear at
   its bottom, so the harbour and the boat's whole crossing sit above the dock. */
/* Round 2 (Kyle 9 Oct, phones): the scene ends in the water right down to the claim bar (no light band anywhere), the zone
   labels ride in the water under the boat as on desktop, and the harbour takes the room they freed. --water is the band of
   deep harbour under the drawing: the dock's height plus the room for the longest label. */
@media (max-width: 899px) {
  .drive { background: var(--harbour); } /* under the pinned stage when the URL bar collapses: water, never sky */
  .drive-stage { padding-bottom: 0; background: var(--sky); }
  .sea { --water: calc(78px + env(safe-area-inset-bottom) + 8.4rem); min-height: 0;
    background: linear-gradient(to top, var(--harbour) var(--water), transparent var(--water)); }
  .world { bottom: var(--water); height: calc(100% - var(--water)); }
  .drive-line { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(78px + env(safe-area-inset-bottom) + 12px);
    margin: 0; padding: 0; min-height: 0; color: var(--paper); z-index: 3; }
  .drive-line span { color: oklch(0.92 0.02 215); }
  .hops .ferry svg { clip-path: inset(0 0 var(--sink, 0px) 0); } /* the hull's lower part is under the surface */
  .hops .ferry::after { content: ""; position: absolute; left: 4%; right: 2%; bottom: var(--sink, 0px); height: 3px; border-radius: 2px;
    background: oklch(0.97 0.01 215 / 0.75); } /* foam at the water line */
}