/* Jigwalk master design language. One file, every page.
   City skins (cities/<city>.css) override only the --city-* tokens, under [data-city="<city>"].
   Fonts are self-hosted, SIL Open Font Licence (see /brand/fonts/LICENCES.md). */

@font-face { font-family: "Archivo"; src: url(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(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: "Archivo"; src: url(fonts/archivo-vietnamese.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Atkinson Next"; src: url(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(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; }

:root {
  /* ---------- Colour: master neutrals, warmed toward the sun so they never read as office grey ---------- */
  --jw-ink: oklch(0.22 0.025 95);        /* #1e1b0d  text, the mark, 16.6:1 on paper */
  --jw-ink-2: oklch(0.42 0.03 95);       /* #524d3b  secondary text, 8.1:1 on paper (AAA) */
  --jw-paper: oklch(0.985 0.007 95);     /* #fbfaf5  the ground: white paper with the sun on it, not cream */
  --jw-paper-2: oklch(0.955 0.016 95);   /* #f3f0e4  sunk panels, wells */
  --jw-line: oklch(0.86 0.03 95);        /* #d7d1bb  rules and outlines, never text */
  /* The one Jigwalk accent. Sun is a field colour and the colour of "found". It is never text on paper. */
  --jw-sun: oklch(0.885 0.165 97);       /* #f8d83e  12.3:1 with ink on it */
  --jw-sun-deep: oklch(0.62 0.13 80);    /* #af7c00  sun as a rule or icon on paper (3.5:1, non-text only) */

  /* ---------- City hooks. A skin overrides these and nothing else. Defaults = the master (world) skin. ---------- */
  --city-ground: var(--jw-paper);
  --city-ground-2: var(--jw-paper-2);
  --city-ink: var(--jw-ink);
  --city-ink-2: var(--jw-ink-2);
  --city-lead: var(--jw-sun);            /* the colour that owns big fields */
  --city-on-lead: var(--jw-ink);
  --city-deep: var(--jw-ink);            /* the dark field: share cards, footers */
  --city-on-deep: var(--jw-paper);
  --city-accent: var(--jw-sun);          /* small doses: the found state, highlights on deep */
  --city-on-accent: var(--jw-ink);
  --city-display: "Archivo", "Arial Narrow", sans-serif;  /* the city's accent face, for its name and short lines */
  --city-display-stretch: 62%;
  --city-display-weight: 900;
  --city-display-case: uppercase;
  --city-display-track: 0;
  --city-motif: none;                    /* an SVG tile used as a mask, painted in --city-motif-ink */
  --city-motif-ink: color-mix(in oklch, var(--city-ink) 14%, transparent);
  --city-motif-size: 64px;
  --city-grade: none;                    /* CSS filter applied to every city photograph */

  /* ---------- Type ---------- */
  --jw-display: "Archivo", "Arial Narrow", sans-serif;  /* always font-stretch 62%, weight 800 to 900, uppercase */
  --jw-text: "Atkinson Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jw-t-xs: 0.8125rem;                                    /* 13  fine print, credits */
  --jw-t-sm: 0.9375rem;                                    /* 15  labels, chips, captions */
  --jw-t-md: 1.125rem;                                     /* 18  body: sun-readable floor for long text */
  --jw-t-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);       /* 20 to 24  lead paragraph, riddles */
  --jw-t-xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);      /* 28 to 40  display: card titles */
  --jw-t-2xl: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);         /* 40 to 72  display: section titles */
  --jw-t-3xl: clamp(3.5rem, 1.8rem + 8vw, 7.5rem);         /* 56 to 120 display: the hero line, once per page */
  --jw-lh-display: 0.86;
  --jw-lh-text: 1.55;

  /* ---------- Space (4 px base) ---------- */
  --jw-s-1: 4px; --jw-s-2: 8px; --jw-s-3: 12px; --jw-s-4: 16px; --jw-s-5: 24px;
  --jw-s-6: 32px; --jw-s-7: 48px; --jw-s-8: 64px; --jw-s-9: 96px; --jw-s-10: 128px;
  --jw-gutter: 16px;
  --jw-measure: 62ch;

  /* ---------- Radius: taken from the piece. Its corner is 4 percent of its side; cards keep that ratio. ---------- */
  --jw-r-xs: 4px;     /* inputs inside cards, image corners in thumbnails */
  --jw-r-sm: 8px;     /* small tiles */
  --jw-r-md: 12px;    /* buttons */
  --jw-r-lg: 20px;    /* cards */
  --jw-r-xl: 28px;    /* full-bleed panels on desktop */
  --jw-r-pill: 999px; /* chips and the nav Play button only */

  /* ---------- Elevation: ink-tinted, always offset and soft. A lifted piece casts a longer shadow. ---------- */
  --jw-shadow-ink: 40 30 0;
  --jw-e-1: 0 1px 2px rgb(var(--jw-shadow-ink) / 0.10), 0 2px 8px -2px rgb(var(--jw-shadow-ink) / 0.10);
  --jw-e-2: 0 2px 4px rgb(var(--jw-shadow-ink) / 0.08), 0 12px 28px -8px rgb(var(--jw-shadow-ink) / 0.22);
  --jw-e-3: 0 6px 10px -2px rgb(var(--jw-shadow-ink) / 0.14), 0 28px 48px -14px rgb(var(--jw-shadow-ink) / 0.38);

  /* ---------- Motion: purposeful, springy, never slow ---------- */
  --jw-ease-out: cubic-bezier(0.23, 1, 0.32, 1);          /* anything entering or answering a tap */
  --jw-ease-move: cubic-bezier(0.77, 0, 0.175, 1);        /* something travelling across the screen */
  /* Springs, sampled from a damped spring and written as linear() so CSS can play them. */
  --jw-spring-snap: linear(0, 0.041, 0.146, 0.289, 0.449, 0.609, 0.756, 0.883, 0.984, 1.059, 1.11, 1.138, 1.148, 1.143, 1.129, 1.108, 1.085, 1.061, 1.039, 1.02, 1.004, 0.993, 0.985, 0.98, 0.978, 0.979, 0.981, 0.984, 0.987, 0.99, 0.994, 0.997, 1);
  --jw-spring-settle: linear(0, 0.016, 0.058, 0.12, 0.193, 0.274, 0.358, 0.442, 0.523, 0.6, 0.671, 0.735, 0.792, 0.842, 0.885, 0.921, 0.951, 0.976, 0.995, 1.01, 1.022, 1.029, 1.035, 1.037, 1.038, 1.034, 1.025, 1.016, 1.008, 1.003, 1);
  --jw-spring-press: linear(0, 0.098, 0.313, 0.555, 0.769, 0.928, 1.03, 1.081, 1.095, 1.086, 1.065, 1.042, 1.022, 1.007, 0.997, 0.992, 0.991, 0.993, 0.996, 1);
  --jw-d-press: 120ms;   /* press down */
  --jw-d-ui: 200ms;      /* hover, colour, small reveals */
  --jw-d-move: 320ms;    /* panels, sheets, page-level moves */
  --jw-d-settle: 420ms;  /* release after press, cards arriving */
  --jw-d-snap: 560ms;    /* a piece clicking into place: the signature, once per moment */

  --jw-tilt: -8deg;      /* the mark's tilt; loose pieces sit at it, placed pieces at 0 */
  color-scheme: light;
}
@media (min-width: 700px) { :root { --jw-gutter: clamp(24px, 4.4vw, 72px); } }

/* ---------- Base ---------- */
.jw, .jw *, .jw *::before, .jw *::after { box-sizing: border-box; }
.jw { margin: 0; background: var(--city-ground); color: var(--city-ink); font: 400 var(--jw-t-md)/var(--jw-lh-text) var(--jw-text);
  font-kerning: normal; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
.jw ::selection { background: var(--jw-sun); color: var(--jw-ink); }
.jw :focus-visible { outline: 3px solid var(--city-ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--jw-sun); border-radius: 6px; }
:where(.jw) a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.jw img { display: block; max-width: 100%; height: auto; }
.jw p { text-wrap: pretty; }

.jw-display { font-family: var(--jw-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  line-height: var(--jw-lh-display); letter-spacing: 0; text-wrap: balance; }
.jw-city-name { font-family: var(--city-display); font-stretch: var(--city-display-stretch); font-weight: var(--city-display-weight);
  text-transform: var(--city-display-case); letter-spacing: var(--city-display-track); line-height: 0.92; }

/* The mark as a CSS object: takes the colour of its text, so it can only ever be one flat colour. */
.jw-mark { display: inline-block; width: 1em; height: 1em; background: currentColor; flex: none;
  -webkit-mask: url(mark/jigwalk-mark-mono.svg) center / contain no-repeat; mask: url(mark/jigwalk-mark-mono.svg) center / contain no-repeat; }
.jw-wordmark { display: inline-block; height: 1em; aspect-ratio: 3467 / 712; background: currentColor; flex: none;
  -webkit-mask: url(mark/jigwalk-wordmark-mono.svg) center / contain no-repeat; mask: url(mark/jigwalk-wordmark-mono.svg) center / contain no-repeat; }

.jw-photo { filter: var(--city-grade); }
.jw-motif { position: relative; isolation: isolate; }
.jw-motif::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--city-motif-ink); pointer-events: none;
  -webkit-mask: var(--city-motif) 0 0 / var(--city-motif-size) repeat; mask: var(--city-motif) 0 0 / var(--city-motif-size) repeat; }

/* ---------- Components ---------- */

/* Button: one shape everywhere (12 px radius, 54 px tall), three weights. Presses down, springs back. */
.jw-btn { --b-bg: var(--city-ink); --b-fg: var(--city-ground); display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px; border: 0; border-radius: var(--jw-r-md); background: var(--b-bg); color: var(--b-fg);
  font: 700 1.0625rem/1.1 var(--jw-text); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--jw-d-settle) var(--jw-spring-press), background-color var(--jw-d-ui) var(--jw-ease-out), box-shadow var(--jw-d-ui) var(--jw-ease-out); }
.jw-btn:active { transform: scale(0.96); transition-duration: var(--jw-d-press); transition-timing-function: var(--jw-ease-out); }
.jw-btn svg { width: 20px; height: 20px; flex: none; transition: transform var(--jw-d-ui) var(--jw-ease-out); }
@media (hover: hover) { .jw-btn:hover svg { transform: translateX(3px); } .jw-btn:hover { box-shadow: var(--jw-e-2); } }
.jw-btn--lead { --b-bg: var(--city-lead); --b-fg: var(--city-on-lead); }
.jw-btn--quiet { --b-bg: transparent; --b-fg: var(--city-ink); box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) { .jw-btn--quiet:hover { box-shadow: inset 0 0 0 2px currentColor; background: color-mix(in oklch, var(--city-ink) 6%, transparent); } }
.jw-btn[disabled], .jw-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.jw-btn[aria-disabled="true"] svg { display: none; }

/* Chip: facts, never decoration. Pill, 15 px, sentence case. */
.jw-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: var(--jw-r-pill);
  font: 700 var(--jw-t-sm)/1 var(--jw-text); color: var(--city-ink); box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--city-ink) 22%, transparent); }
.jw-chip--found { background: var(--jw-sun); color: var(--jw-ink); box-shadow: none; }
.jw-chip .jw-mark { width: 14px; height: 14px; }

/* Card: 20 px radius, one level of elevation. Never nested. */
.jw-card { position: relative; border-radius: var(--jw-r-lg); background: var(--city-ground); color: var(--city-ink); box-shadow: var(--jw-e-1); overflow: hidden; }

/* Numbered piece: the only container shape for a stop number. */
.jw-piece-num { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; color: var(--city-on-lead);
  font: 900 1.375rem/1 var(--jw-display); font-stretch: 62%; padding: 5px 5px 0 0; position: relative; isolation: isolate; }
.jw-piece-num::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--city-lead); transform: rotate(var(--jw-tilt));
  -webkit-mask: url(mark/jigwalk-mark-mono.svg) center / contain no-repeat; mask: url(mark/jigwalk-mark-mono.svg) center / contain no-repeat; }

/* Nav: lockup left, Play and Log in right, same place on every Jigwalk page. */
.jw-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.jw-nav-brand { display: inline-flex; align-items: center; gap: 0.3em; font-size: 26px; color: var(--city-ink); text-decoration: none; min-height: 44px; }
.jw-nav-brand .jw-mark { width: 1.2em; height: 1.2em; margin-top: -0.12em; }
.jw-nav-brand .jw-wordmark { height: 0.86em; }
.jw-nav-links { display: flex; align-items: center; gap: 4px; }
.jw-nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 700; text-decoration: none; border-radius: var(--jw-r-pill); }
.jw-nav-links a.is-play { background: var(--city-ink); color: var(--city-ground); padding: 0 18px; }

@media (prefers-reduced-motion: reduce) {
  .jw *, .jw *::before, .jw *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}