/* Jigwalk Melbourne: the Auckland page (itself the Đà Nẵng page, direction C, "Cinematic city") in the Melbourne skin
   (app/public/brand/cities/melbourne.css): W-class tram green where Đà Nẵng has its Dragon yellow, bluestone where it has
   the Han River, bluestone setts where it has dragon scales, C's compressed Archivo caps for headlines with Abril Fatface for
   the smaller display type, and tram yellow for highlights on dark. The ferry hop is replaced by the laneways (.lanes). */

@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: "Abril Fatface"; src: url(/brand/fonts/abrilfatface-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Melbourne skin tokens (brand/cities/melbourne.css). --sun keeps C's role names: the city's lead colour, here tram green. */
  --sun: oklch(0.43 0.075 150);     /* #2f5b39 W-class tram green (city lead); cream on it 7.5:1 */
  --sun-hi: oklch(0.48 0.08 150);
  --sun-deep: oklch(0.36 0.07 150);
  --on-sun: oklch(0.955 0.025 85);
  --hi: oklch(0.85 0.165 85);       /* #ffc42a tram yellow (city accent): highlights and found states on dark grounds */
  --hl: oklch(0.88 0.11 88);        /* a pale tram yellow: the marker under words on light grounds */
  --ink: oklch(0.25 0.01 250);      /* #1e2226 wet bluestone */
  --ink-2: oklch(0.32 0.012 250);
  --ink-soft: oklch(0.42 0.012 250);
  --paper: oklch(0.945 0.028 85);   /* #f3e8d3 arcade cream */
  --paper-2: oklch(0.895 0.04 85);
  --paper-dim: oklch(0.80 0.03 85);
  --flame: oklch(0.52 0.17 30);
  --deep: oklch(0.34 0.012 250);    /* #33393e bluestone laneway; cream on it 11.2:1 */
  --ochre: oklch(0.72 0.11 82);     /* #c79e4d sandstone ochre */
  --verdigris: oklch(0.42 0.06 172); /* copper verdigris, deepened for cream text (7.4:1) */
  --map-land: oklch(0.43 0.075 150);
  --map-sea: oklch(0.38 0.035 235); /* the Yarra under cloud */
  --map-park: oklch(0.52 0.085 145);
  --map-land-lbl: oklch(0.955 0.025 85 / 0.8);
  --map-sea-lbl: oklch(0.955 0.025 85 / 0.75);
  /* Bluestone setts in running bond, the laneway floor (the skin's motif), faint cream joints over the tram green. */
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='1.5'%3E%3Cpath d='M2 2h28v12H2zM34 2h28v12H34zM-14 18h28v12h-28zM18 18h28v12H18zM50 18h28v12H50z'/%3E%3C/svg%3E");
  --head: "Abril Fatface", 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 bluestone setts, faint, over the tram green fields. */
.slab, .hero-more, .modes, .foot { background-image: var(--motif); background-size: 64px 32px; }
/* Scoring sits on a tram green card with the setts. */
.score-grid { background: var(--sun) var(--motif) 0 0 / 64px 32px; 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 live demo on wet bluestone, the crew on copper verdigris, cream text. */
.demo, .groups { background: var(--deep); color: var(--paper); }
.groups { background: var(--verdigris); }
.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); }

/* ------------------------------------------------------------------ Melbourne skin (Oct 2026) */
/* Type: the headlines keep the Đà Nẵng page's compressed Archivo caps (the brand's own face, the same treatment);
   Abril Fatface, the Melbourne skin's display face (the arcades' Victorian signwriting), sets the smaller display type:
   answers, facts, mode names, numerals. It has one weight, 400. */
.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: 400; text-transform: none; letter-spacing: 0; }
.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 */
/* MELBOURNE'S is the widest name yet: the same layout as Auckland, 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: 11cqi; }
@media (min-width: 900px) { h1 .nm, h1 .l2 .w { display: block; } h1 { font-size: clamp(4rem, 18.6cqi, 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 / 64px 32px; }
.stage-photo { object-position: 50% 50%; }

/* The tram green fields (hero, modes, scoring card, footer, dock) carry cream 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.9 0.14 88); } }
.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 green 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 tram green: the controls stay cream cards, lines and marks in cream. */
.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 tram green: cream text, the reversed lockup. */
.foot .fine { color: oklch(0.955 0.025 85 / 0.82); }
/* Credit pills: bluestone glass. */
.ph-credit { background: oklch(0.25 0.01 250 / 0.58); color: oklch(0.97 0.015 85); }
.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% 50%; }
@media (min-width: 900px) { .band-street > picture > img { object-position: 50% 40%; } } /* down the lane, the painted walls clear of the headline */
.band-river > picture > img { object-position: 50% 55%; }
@media (min-width: 900px) { .band-river > picture > img { object-position: 50% 62%; } } /* the sky behind the headline, the river under it */
.final .band-beach > img { object-position: 50% 50%; }

/* ------------------------------------------------------------------ from the Auckland page */

.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; }

/* Plane-tree leaves over the finished picture (the London planes that line Melbourne's streets). */
.petals { position: absolute; inset: -10% 0 0; z-index: 4; pointer-events: none; overflow: visible; }
.petals i { position: absolute; top: 0; width: 15px; height: 13px; background: var(--c, var(--ochre)); opacity: 0;
  clip-path: polygon(50% 0, 62% 26%, 92% 14%, 80% 46%, 100% 58%, 66% 66%, 56% 100%, 44% 100%, 34% 66%, 0 58%, 20% 46%, 8% 14%, 38% 26%);
  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 arcade 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 LANEWAYS (Melbourne only) */
/* Where Auckland has its ferry hop, Melbourne has its lanes. The section pins and you walk down a drawn laneway as you
   scroll: a film of frames rendered from the drawn lane (src/render-lane.py), scrubbed on a canvas in an arched window
   (site.js laneFilm()): painted walls, an arcade under glass, a cafe lane, then out through an arch onto the quay
   by the river. On the left, a board of clocks counts the four stretches. Phones: the heading reads first, then the pinned
   stage holds the board, the stretch's name and the film. */
.lanes { position: relative; background: var(--deep) var(--motif) 0 0 / 64px 32px; color: var(--paper); overflow-x: clip; }
.lanes .kicker { color: var(--hi); }
.lanes .hl { box-shadow: inset 0 -0.34em 0 var(--sun); }
.lane-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; display: flex; flex-direction: column; }
#lane-drive { position: relative; height: 340svh; }
.lanes-copy { position: relative; z-index: 2; flex: none; padding: 18px var(--gutter) 10px; display: grid; gap: 10px; }
.lanes-copy .kicker, .lanes-copy h2, .lanes-copy .lede { display: none; } /* phones: they read first, in .lanes-intro */
.lanes-intro { padding: 64px var(--gutter) 8px; }
.lanes-intro .lede { margin: 14px 0 0; max-width: 46ch; font-size: 1rem; line-height: 1.5; color: var(--paper-2); }
.h2like { font-family: var(--display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; line-height: 0.86; font-size: clamp(2.6rem, 12vw, 4.4rem); color: var(--paper); }

/* The board: a row of clocks on a dark board, one clock per stretch. The clock you are in runs and lights up in
   tram yellow; the ones you have walked stay lit; the ones ahead wait, dim. */
.board { display: grid; gap: 8px; padding: 12px 14px 12px; border-radius: 14px; background: var(--ink); box-shadow: inset 0 0 0 2px var(--ochre); }
.board-head { font: 700 0.75rem/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ochre); }
.board-clocks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.board-clocks li { display: grid; justify-items: center; gap: 5px; text-align: center; opacity: 0.45; transition: opacity 300ms ease; }
.board-clocks li.on, .board-clocks li.done { opacity: 1; }
.board-clocks svg { width: 40px; height: 40px; overflow: visible; }
.board-clocks circle:first-child { fill: var(--paper); stroke: var(--ochre); stroke-width: 2.5; transition: fill 300ms ease; }
.board-clocks li.on circle:first-child { fill: var(--hi); }
.bc-ticks { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.bc-hand { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; transform-origin: 20px 20px; }
.bc-pin { fill: var(--ink); }
.board-clocks span { font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 0.75rem; line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hi); }
.lane-line { margin: 0; display: grid; gap: 2px; min-height: 4.6em; align-content: start; }
.lane-line b { font-family: var(--display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; font-size: clamp(1.9rem, 7.5vw, 2.6rem); line-height: 0.95; }
.lane-line span { font-size: 1rem; font-weight: 700; color: var(--paper-2); max-width: 44ch; }

/* The arched window: an arcade's arch in cream stone, the lane inside it. */
.portal { position: relative; flex: 1 1 auto; margin: 4px var(--gutter) calc(86px + env(safe-area-inset-bottom)); /* phones: clear of the dock */ min-height: 0; overflow: hidden;
  border-radius: 46% 46% 18px 18px / 26% 26% 18px 18px; background: oklch(0.86 0.03 230);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 9px var(--ink), 0 30px 60px -30px #000; isolation: isolate; }
/* The walk is a film (site.js laneFilm()): frames of the drawn lane on a canvas, the first frame painted behind it at once. */
.portal { background: oklch(0.6 0.03 240) url(img/lane/mw/000.webp) center / cover no-repeat; }
.lane-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lane-grain { position: absolute; inset: 0; pointer-events: none; background: url(img/grain.webp) 0 0 / 128px; opacity: 0.35; } /* a light grain over the film */
.lane-mascot { position: absolute; pointer-events: none; }
@media (min-width: 900px) {
  .lanes-intro { display: none; }
  #lane-drive { height: 380svh; }
  .lane-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(36px, 5vw, 96px); align-items: center; padding: 0 var(--gutter); }
  .lanes-copy { padding: 0; gap: 0; }
  .lanes-copy .kicker, .lanes-copy h2, .lanes-copy .lede { display: block; }
  .lanes-copy h2 { font-size: clamp(3rem, 5vw, 5.4rem); margin-bottom: 18px; }
  .lanes-copy .lede { font-size: 1.0625rem; line-height: 1.55; max-width: 46ch; color: var(--paper-2); margin-bottom: 24px; }
  .board { padding: 16px 18px; margin-bottom: 22px; max-width: 480px; }
  .board-clocks svg { width: 54px; height: 54px; }
  .board-clocks span { font-size: 0.875rem; }
  .lane-line { min-height: 0; }
  .lane-line b { font-size: clamp(2.4rem, 3.4vw, 3.6rem); }
  .lane-line span { font-size: 1.1875rem; }
  .portal { margin: 0; height: min(86svh, 1000px); align-self: center; background-image: url(img/lane/dw/000.webp); }
}

/* #lane-mascot (site.js laneFilm()): the empty, hidden spot on the quay where the Jigwalk mascot will stand in the walk's last
   frame, once Kyle picks its style. */