/* ═══════════════════════════════════════════════════════════════════════════
   Rotaract Club of Hong Kong Island East · base.css
   Tokens, reset, type, layout primitives, focus, the page-change wipe.

   The site is a film you scroll through, and its one prop is the Rotaract wheel
   (DIRECTION.md). Everything matches the logo: its two colours, cranberry and white,
   on the film's warm black; its own heavy-over-light lettering; shapes from its wheel.

   Cascade layers, lowest to highest:
     reset → base → layout → components → lang → utilities
   wheel.css (the set pieces) and page CSS (src/css/pages/<page>.css) are NOT layered,
   so they always win over the design system without !important.

   Rules of the house (DIRECTION 2, 3, 4, 7): no light sections, no pure #000 ground,
   no backdrop-filter, no mix-blend-mode, no gradient fills (radial pools of light are
   part of a scene and allowed), nothing under 16px but the slate line and the HUD,
   uppercase only in the slate line, colours from tokens only, and never a family name:
   the typeface is named in src/i18n/languages.json alone. tools/build.mjs lints every
   CSS file for these.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer reset, base, layout, components, lang, utilities;

/* ─────────────────────────────────────────────────────────────── tokens ──
   In the base layer on purpose: tones (components layer) and languages (lang layer)
   must be able to re-point these on the same element. */

@layer base {

:root {
  /* Colour (DIRECTION 3): the logo's two colours, cranberry and white, on the film's black. Nothing else.
     Measured contrast is in tools/README.md, section 7. */
  --black: #0B0809;            /* page ground: a warm black, never #000 */
  --night: #151012;            /* raised panels, cards, form fields */
  --night-2: #1E171A;          /* hover, second level */
  --bone: #F2ECE6;             /* text and titles: 17.0 on black, 16.1 on night, 15.0 on night-2 */
  --ash: #ADA29D;              /* secondary text: 8.0 on black, 7.6 on night, 7.1 on night-2 */
  --cranberry: #D41367;        /* the logo colour, exact: light, active things, primary buttons. 3.9 on black: large type and shapes only */
  --cranberry-deep: #8E0C45;   /* pressed and shadowed cranberry, large dim fields. Bone text 7.8 */
  --cranberry-press: #B50D56;  /* the primary button under the pointer. White text 6.7 */
  --cranberry-lit: #F25C95;    /* cranberry for small text, links and focus rings: 6.4 on black, 6.1 on night, 5.7 on night-2 */
  --white: #FFFFFF;            /* the logo's white: the reversed logo, the first tooth of light, medals, the brightest highlights,
                                  and the label of the primary button (5.1 on cranberry; bone is 4.4 and fails) */

  --line: rgb(242 236 230 / .14);          /* hairlines on dark: decoration, never the only signal */
  --line-strong: rgb(242 236 230 / .42);   /* field borders and outlined buttons: 3.6 on black and on night */
  --bone-a06: rgb(242 236 230 / .06);
  --bone-a10: rgb(242 236 230 / .1);
  --black-a60: rgb(11 8 9 / .6);
  --black-a85: rgb(11 8 9 / .85);
  --light: rgb(212 19 103 / .34);          /* the centre of a pool of cranberry light */
  --light-0: rgb(212 19 103 / 0);

  /* Semantic colours. Tones (.section--night, .panel--lit …) re-point these;
     components read these and never the raw palette. */
  --bg: var(--black);
  --fg: var(--bone);
  --fg-muted: var(--ash);
  --heading: var(--bone);
  --link: var(--cranberry-lit);
  --accent: var(--cranberry);
  --rule: var(--line);
  --focus: var(--cranberry-lit);
  --row: var(--night);                 /* rows, chips, quiet fields */
  --row-hover: var(--night-2);
  --field: var(--night);               /* form fields */
  --field-line: var(--line-strong);
  --error: var(--bone);                /* an error is said in words, in bone, beside a cranberry mark: never colour alone */
  --btn-bg: var(--cranberry);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--cranberry-press);
  --btn-line: var(--line-strong);

  /* Type (DIRECTION 4): the logo's own lettering is the type system, a semibold over a light in one humanist
     family (research/lab/font-match.md). The family is named in ONE place, src/i18n/languages.json: the
     build writes each language's stacks into lang.css (--font-display, --font-text) with the face's own
     metrics (--cap, --font-ascent, --font-descent, --font-box). Never write a family name in a
     stylesheet. These defaults are only what shows before that rule applies. */
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --cap: .714;                        /* cap height of the title face, in em */
  --font-ascent: 1.069;               /* its ascent and descent: together the height of its own line box */
  --font-descent: .293;
  --font-box: 1.362;

  /* Weights: the heavy line of the logo is a semibold (550), never a bold; the light line is 300. */
  --fw-light: 300;                    /* second lines, subtitles, leads, the slate line */
  --fw-text: 400;
  --fw-strong: 600;                   /* labels and emphasis */
  --fw-title: 550;                    /* h3 and smaller titles */
  --fw-display: 550;                  /* title cards, h1, h2: the weight of "Rotaract" in the logo */
  --fw-slate: 300;

  /* Per-script metrics. Defaults are Latin; lang.css sets Chinese (DIRECTION 4). */
  --lh-display: 1.06;
  --lh-sub: 1.2;
  --lh-text: 1.65;
  --lh-ui: 1.3;
  --tracking-display: -0.03em;        /* the heavy line, as the logo spaces it (Latin only) */
  --tracking-sub: -0.015em;
  --tracking-light: 0.02em;           /* the light line, as the logo spaces it (Latin only) */
  --tracking-slate: 0.12em;
  --case-slate: uppercase;            /* Latin only: Chinese has no case */
  --display-scale: 1;
  --text-scale: 1;
  --slate-scale: 1;
  --measure: 36em;                    /* about 68 characters */
  --mask-pad: .14em;                  /* how far a line mask reaches past its line box */
  --underline-offset: .22em;

  /* The lockup (DIRECTION 4a): every title is laid out like the logo, a wheel at the start side with a
     heavy line and a light line beside it, in the logo's own proportions. The art producer measured them
     (src/img/logo/logo.json → lockup); the build writes them below as --lockup-*-em, in ems of the heavy
     line. Here they meet the face's metrics, so the baselines land where the logo's do. */
  --lockup-wheel: calc(var(--lockup-wheel-em, 1.8369) * 1em);     /* the wheel's diameter */
  --lockup-gap: calc(var(--lockup-gap-em, .2746) * 1em);          /* from the wheel to the words */
  --lockup-sub: calc(var(--lockup-sub-em, .5799) * 1em);          /* the light line's size (heavy capitals are 1.724 × the light ones) */
  /* The words start this far below the wheel's top, so the heavy baseline sits --lockup-base-em below it. */
  --lockup-rise: calc((var(--lockup-base-em, 1.2153) - (var(--lh-display) - var(--font-box)) / 2 - var(--font-ascent)) * 1em);

  /* Space */
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 2.6rem + 6.2vw, 8.5rem);
  --container: 76rem;
  --container-wide: 90rem;
  --container-narrow: 46rem;

  /* Shape: a film frame has square corners; only buttons are pills. Every other shape is a part of the
     wheel (the masks the build writes below): the tooth, the window, the ring, the keyway, the outline. */
  --r-panel: 6px;
  --r-field: 6px;
  --r-full: 999px;
  --seam-h: clamp(.875rem, .6rem + 1.2vw, 1.5rem);    /* the height of one tooth in a toothed seam */

  /* Motion: slow and even, like a camera. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);          /* anything entering or answering */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);       /* anything moving while it stays on screen */
  --ease-film: cubic-bezier(.45, 0, .15, 1);         /* the letterbox, the iris, the wipe */
  --dur-1: 140ms;                    /* press */
  --dur-2: 240ms;                    /* hover, focus, small changes */
  --dur-3: 420ms;                    /* rows, panels */
  --dur-4: 720ms;                    /* overlays, the wipe */
  --dur-5: 1100ms;                   /* reveals, the letterbox */
  --dur-6: 1600ms;                   /* once-only scenes */

  /* The letterbox (DIRECTION 2). Two fixed bars: the top one is the header, the bottom one is the HUD.
     --bar-top / --bar-bot    the thin bands of practical pages (mode "open")
     --film-bar               each bar while a film scene plays (mode "film"): the picture is 2.39:1 on a
                              landscape screen, and never less than 62% of the height
     --closed-bar             each bar when the bars close in (mode "closed": the stopped wheel)
     These are constants per viewport: lay a scene out with them. The live bars move by transform only. */
  --header-h: 4rem;
  --hud-h: 3rem;
  --bar-top: var(--header-h);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --bar-bot: calc(var(--hud-h) + var(--safe-b));
  --film-bar: clamp(var(--bar-top), calc((100svh - 100vw / 2.39) / 2), 19svh);
  --closed-bar: 27svh;
  --logo-h: 2.5rem;
  --dock-h: 0px;                     /* core.js: the room the language suggestion bar takes above the HUD, while it is there */
  --target: 44px;                    /* minimum touch target */
  --btn-h: 3rem;                     /* buttons: 48px at least */

  /* Where the wheel sits in the header logo: the page-change wipe opens from here (see the foot of this file). */
  --logo-wheel-x: .418;              /* shares of the logo's HEIGHT; the build writes the real ones below */
  --logo-wheel-y: .432;
  --logo-wheel-d: .765;
  --wipe-x: calc(var(--gutter) + var(--logo-h) * var(--logo-wheel-x));
  --wipe-y: calc((var(--header-h) - var(--logo-h)) / 2 + var(--logo-h) * var(--logo-wheel-y));

  /* Stacking */
  --z-film: 40;                      /* grain and vignette: over the picture, under the bars */
  --z-bars: 50;
  --z-header: 52;
  --z-suggest: 55;
  --z-toast: 70;
  --z-preloader: 90;
  --z-cursor: 95;
  --z-skip: 100;
}

/* The wheel for CSS, written here by tools/build.mjs from src/data/wheel.json. Do not hand-write them.
     --wheel-mask (the toothed disc: cog frames) · --wheel-full-mask · --wheel-rim-mask (the page-change wipe)
     --teeth-mask + --teeth-ratio (the rim, straightened: the toothed seam)
     --tooth-mask + --tooth-ratio (one round-topped tooth: bullets, ticks, the slate mark)
     --window-mask + --window-ratio (one window, upright: small pictures, the pointer of the current page)
     --keyway-mask (the hub's "C" channel: the loading mark, the tick of a checkbox)
     --spoke-mask + --spoke-ratio (one spoke, upright)
     --ring-share (the ring's thickness as a share of its radius) · --wheel-clip, --window-clip (polygon() for clip-path)
     --wheel-root … --wheel-hub (radii as shares of the tip radius) · --logo-wheel-* · --lockup-*-em */
/* generated from src/data/wheel.json */
:root{--wheel-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 224 224'%3E%3Cpath d='M108.68,25.94 A3.58,3.58 0 0,0 111.74,23.19 L114.16,12.65 A5.99,5.99 0 0,1 125.84,12.65 L128.26,23.19 A3.58,3.58 0 0,0 131.32,25.94 A94.74,94.74 0 0,1 133.41,26.21 A3.58,3.58 0 0,0 137.07,24.35 L142.15,14.79 A5.99,5.99 0 0,1 153.42,17.82 L153.04,28.63 A3.58,3.58 0 0,0 155.28,32.07 A94.74,94.74 0 0,1 157.22,32.88 A3.58,3.58 0 0,0 161.25,32.03 L168.62,24.11 A5.99,5.99 0 0,1 178.73,29.95 L175.56,40.29 A3.58,3.58 0 0,0 176.84,44.2 A94.74,94.74 0 0,1 178.5,45.48 A3.58,3.58 0 0,0 182.61,45.7 L191.78,39.96 A5.99,5.99 0 0,1 200.04,48.22 L194.3,57.39 A3.58,3.58 0 0,0 194.52,61.5 A94.74,94.74 0 0,1 195.8,63.16 A3.58,3.58 0 0,0 199.71,64.44 L210.05,61.27 A5.99,5.99 0 0,1 215.89,71.38 L207.97,78.75 A3.58,3.58 0 0,0 207.12,82.78 A94.74,94.74 0 0,1 207.93,84.72 A3.58,3.58 0 0,0 211.37,86.96 L222.18,86.58 A5.99,5.99 0 0,1 225.21,97.85 L215.65,102.93 A3.58,3.58 0 0,0 213.79,106.59 A94.74,94.74 0 0,1 214.06,108.68 A3.58,3.58 0 0,0 216.81,111.74 L227.35,114.16 A5.99,5.99 0 0,1 227.35,125.84 L216.81,128.26 A3.58,3.58 0 0,0 214.06,131.32 A94.74,94.74 0 0,1 213.79,133.41 A3.58,3.58 0 0,0 215.65,137.07 L225.21,142.15 A5.99,5.99 0 0,1 222.18,153.42 L211.37,153.04 A3.58,3.58 0 0,0 207.93,155.28 A94.74,94.74 0 0,1 207.12,157.22 A3.58,3.58 0 0,0 207.97,161.25 L215.89,168.62 A5.99,5.99 0 0,1 210.05,178.73 L199.71,175.56 A3.58,3.58 0 0,0 195.8,176.84 A94.74,94.74 0 0,1 194.52,178.5 A3.58,3.58 0 0,0 194.3,182.61 L200.04,191.78 A5.99,5.99 0 0,1 191.78,200.04 L182.61,194.3 A3.58,3.58 0 0,0 178.5,194.52 A94.74,94.74 0 0,1 176.84,195.8 A3.58,3.58 0 0,0 175.56,199.71 L178.73,210.05 A5.99,5.99 0 0,1 168.62,215.89 L161.25,207.97 A3.58,3.58 0 0,0 157.22,207.12 A94.74,94.74 0 0,1 155.28,207.93 A3.58,3.58 0 0,0 153.04,211.37 L153.42,222.18 A5.99,5.99 0 0,1 142.15,225.21 L137.07,215.65 A3.58,3.58 0 0,0 133.41,213.79 A94.74,94.74 0 0,1 131.32,214.06 A3.58,3.58 0 0,0 128.26,216.81 L125.84,227.35 A5.99,5.99 0 0,1 114.16,227.35 L111.74,216.81 A3.58,3.58 0 0,0 108.68,214.06 A94.74,94.74 0 0,1 106.59,213.79 A3.58,3.58 0 0,0 102.93,215.65 L97.85,225.21 A5.99,5.99 0 0,1 86.58,222.18 L86.96,211.37 A3.58,3.58 0 0,0 84.72,207.93 A94.74,94.74 0 0,1 82.78,207.12 A3.58,3.58 0 0,0 78.75,207.97 L71.38,215.89 A5.99,5.99 0 0,1 61.27,210.05 L64.44,199.71 A3.58,3.58 0 0,0 63.16,195.8 A94.74,94.74 0 0,1 61.5,194.52 A3.58,3.58 0 0,0 57.39,194.3 L48.22,200.04 A5.99,5.99 0 0,1 39.96,191.78 L45.7,182.61 A3.58,3.58 0 0,0 45.48,178.5 A94.74,94.74 0 0,1 44.2,176.84 A3.58,3.58 0 0,0 40.29,175.56 L29.95,178.73 A5.99,5.99 0 0,1 24.11,168.62 L32.03,161.25 A3.58,3.58 0 0,0 32.88,157.22 A94.74,94.74 0 0,1 32.07,155.28 A3.58,3.58 0 0,0 28.63,153.04 L17.82,153.42 A5.99,5.99 0 0,1 14.79,142.15 L24.35,137.07 A3.58,3.58 0 0,0 26.21,133.41 A94.74,94.74 0 0,1 25.94,131.32 A3.58,3.58 0 0,0 23.19,128.26 L12.65,125.84 A5.99,5.99 0 0,1 12.65,114.16 L23.19,111.74 A3.58,3.58 0 0,0 25.94,108.68 A94.74,94.74 0 0,1 26.21,106.59 A3.58,3.58 0 0,0 24.35,102.93 L14.79,97.85 A5.99,5.99 0 0,1 17.82,86.58 L28.63,86.96 A3.58,3.58 0 0,0 32.07,84.72 A94.74,94.74 0 0,1 32.88,82.78 A3.58,3.58 0 0,0 32.03,78.75 L24.11,71.38 A5.99,5.99 0 0,1 29.95,61.27 L40.29,64.44 A3.58,3.58 0 0,0 44.2,63.16 A94.74,94.74 0 0,1 45.48,61.5 A3.58,3.58 0 0,0 45.7,57.39 L39.96,48.22 A5.99,5.99 0 0,1 48.22,39.96 L57.39,45.7 A3.58,3.58 0 0,0 61.5,45.48 A94.74,94.74 0 0,1 63.16,44.2 A3.58,3.58 0 0,0 64.44,40.29 L61.27,29.95 A5.99,5.99 0 0,1 71.38,24.11 L78.75,32.03 A3.58,3.58 0 0,0 82.78,32.88 A94.74,94.74 0 0,1 84.72,32.07 A3.58,3.58 0 0,0 86.96,28.63 L86.58,17.82 A5.99,5.99 0 0,1 97.85,14.79 L102.93,24.35 A3.58,3.58 0 0,0 106.59,26.21 A94.74,94.74 0 0,1 108.68,25.94 Z'/%3E%3C/svg%3E");--wheel-full-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 224 224'%3E%3Cpath fill-rule='evenodd' d='M108.68,25.94 A3.58,3.58 0 0,0 111.74,23.19 L114.16,12.65 A5.99,5.99 0 0,1 125.84,12.65 L128.26,23.19 A3.58,3.58 0 0,0 131.32,25.94 A94.74,94.74 0 0,1 133.41,26.21 A3.58,3.58 0 0,0 137.07,24.35 L142.15,14.79 A5.99,5.99 0 0,1 153.42,17.82 L153.04,28.63 A3.58,3.58 0 0,0 155.28,32.07 A94.74,94.74 0 0,1 157.22,32.88 A3.58,3.58 0 0,0 161.25,32.03 L168.62,24.11 A5.99,5.99 0 0,1 178.73,29.95 L175.56,40.29 A3.58,3.58 0 0,0 176.84,44.2 A94.74,94.74 0 0,1 178.5,45.48 A3.58,3.58 0 0,0 182.61,45.7 L191.78,39.96 A5.99,5.99 0 0,1 200.04,48.22 L194.3,57.39 A3.58,3.58 0 0,0 194.52,61.5 A94.74,94.74 0 0,1 195.8,63.16 A3.58,3.58 0 0,0 199.71,64.44 L210.05,61.27 A5.99,5.99 0 0,1 215.89,71.38 L207.97,78.75 A3.58,3.58 0 0,0 207.12,82.78 A94.74,94.74 0 0,1 207.93,84.72 A3.58,3.58 0 0,0 211.37,86.96 L222.18,86.58 A5.99,5.99 0 0,1 225.21,97.85 L215.65,102.93 A3.58,3.58 0 0,0 213.79,106.59 A94.74,94.74 0 0,1 214.06,108.68 A3.58,3.58 0 0,0 216.81,111.74 L227.35,114.16 A5.99,5.99 0 0,1 227.35,125.84 L216.81,128.26 A3.58,3.58 0 0,0 214.06,131.32 A94.74,94.74 0 0,1 213.79,133.41 A3.58,3.58 0 0,0 215.65,137.07 L225.21,142.15 A5.99,5.99 0 0,1 222.18,153.42 L211.37,153.04 A3.58,3.58 0 0,0 207.93,155.28 A94.74,94.74 0 0,1 207.12,157.22 A3.58,3.58 0 0,0 207.97,161.25 L215.89,168.62 A5.99,5.99 0 0,1 210.05,178.73 L199.71,175.56 A3.58,3.58 0 0,0 195.8,176.84 A94.74,94.74 0 0,1 194.52,178.5 A3.58,3.58 0 0,0 194.3,182.61 L200.04,191.78 A5.99,5.99 0 0,1 191.78,200.04 L182.61,194.3 A3.58,3.58 0 0,0 178.5,194.52 A94.74,94.74 0 0,1 176.84,195.8 A3.58,3.58 0 0,0 175.56,199.71 L178.73,210.05 A5.99,5.99 0 0,1 168.62,215.89 L161.25,207.97 A3.58,3.58 0 0,0 157.22,207.12 A94.74,94.74 0 0,1 155.28,207.93 A3.58,3.58 0 0,0 153.04,211.37 L153.42,222.18 A5.99,5.99 0 0,1 142.15,225.21 L137.07,215.65 A3.58,3.58 0 0,0 133.41,213.79 A94.74,94.74 0 0,1 131.32,214.06 A3.58,3.58 0 0,0 128.26,216.81 L125.84,227.35 A5.99,5.99 0 0,1 114.16,227.35 L111.74,216.81 A3.58,3.58 0 0,0 108.68,214.06 A94.74,94.74 0 0,1 106.59,213.79 A3.58,3.58 0 0,0 102.93,215.65 L97.85,225.21 A5.99,5.99 0 0,1 86.58,222.18 L86.96,211.37 A3.58,3.58 0 0,0 84.72,207.93 A94.74,94.74 0 0,1 82.78,207.12 A3.58,3.58 0 0,0 78.75,207.97 L71.38,215.89 A5.99,5.99 0 0,1 61.27,210.05 L64.44,199.71 A3.58,3.58 0 0,0 63.16,195.8 A94.74,94.74 0 0,1 61.5,194.52 A3.58,3.58 0 0,0 57.39,194.3 L48.22,200.04 A5.99,5.99 0 0,1 39.96,191.78 L45.7,182.61 A3.58,3.58 0 0,0 45.48,178.5 A94.74,94.74 0 0,1 44.2,176.84 A3.58,3.58 0 0,0 40.29,175.56 L29.95,178.73 A5.99,5.99 0 0,1 24.11,168.62 L32.03,161.25 A3.58,3.58 0 0,0 32.88,157.22 A94.74,94.74 0 0,1 32.07,155.28 A3.58,3.58 0 0,0 28.63,153.04 L17.82,153.42 A5.99,5.99 0 0,1 14.79,142.15 L24.35,137.07 A3.58,3.58 0 0,0 26.21,133.41 A94.74,94.74 0 0,1 25.94,131.32 A3.58,3.58 0 0,0 23.19,128.26 L12.65,125.84 A5.99,5.99 0 0,1 12.65,114.16 L23.19,111.74 A3.58,3.58 0 0,0 25.94,108.68 A94.74,94.74 0 0,1 26.21,106.59 A3.58,3.58 0 0,0 24.35,102.93 L14.79,97.85 A5.99,5.99 0 0,1 17.82,86.58 L28.63,86.96 A3.58,3.58 0 0,0 32.07,84.72 A94.74,94.74 0 0,1 32.88,82.78 A3.58,3.58 0 0,0 32.03,78.75 L24.11,71.38 A5.99,5.99 0 0,1 29.95,61.27 L40.29,64.44 A3.58,3.58 0 0,0 44.2,63.16 A94.74,94.74 0 0,1 45.48,61.5 A3.58,3.58 0 0,0 45.7,57.39 L39.96,48.22 A5.99,5.99 0 0,1 48.22,39.96 L57.39,45.7 A3.58,3.58 0 0,0 61.5,45.48 A94.74,94.74 0 0,1 63.16,44.2 A3.58,3.58 0 0,0 64.44,40.29 L61.27,29.95 A5.99,5.99 0 0,1 71.38,24.11 L78.75,32.03 A3.58,3.58 0 0,0 82.78,32.88 A94.74,94.74 0 0,1 84.72,32.07 A3.58,3.58 0 0,0 86.96,28.63 L86.58,17.82 A5.99,5.99 0 0,1 97.85,14.79 L102.93,24.35 A3.58,3.58 0 0,0 106.59,26.21 A94.74,94.74 0 0,1 108.68,25.94 Z M34.81,120 a85.19,85.19 0 1,0 170.38,0 a85.19,85.19 0 1,0 -170.38,0 Z M46.35,120 a73.65,73.65 0 1,1 147.3,0 a73.65,73.65 0 1,1 -147.3,0 Z M132.03,56.51 A3.4,3.4 0 0,0 128.01,60.09 L130.49,94.51 A4.42,4.42 0 0,0 132.69,98.02 A4.42,4.42 0 0,0 136.83,98.17 L167.88,83.11 A3.4,3.4 0 0,0 168.97,77.84 A64.62,64.62 0 0,0 132.03,56.51 Z M181,98.67 A3.4,3.4 0 0,0 175.89,96.98 L147.32,116.34 A4.42,4.42 0 0,0 145.38,120 A4.42,4.42 0 0,0 147.32,123.66 L175.89,143.02 A3.4,3.4 0 0,0 181,141.33 A64.62,64.62 0 0,0 181,98.67 Z M168.97,162.16 A3.4,3.4 0 0,0 167.88,156.89 L136.83,141.83 A4.42,4.42 0 0,0 132.69,141.98 A4.42,4.42 0 0,0 130.49,145.49 L128.01,179.91 A3.4,3.4 0 0,0 132.03,183.49 A64.62,64.62 0 0,0 168.97,162.16 Z M107.97,183.49 A3.4,3.4 0 0,0 111.99,179.91 L109.51,145.49 A4.42,4.42 0 0,0 107.31,141.98 A4.42,4.42 0 0,0 103.17,141.83 L72.12,156.89 A3.4,3.4 0 0,0 71.03,162.16 A64.62,64.62 0 0,0 107.97,183.49 Z M59,141.33 A3.4,3.4 0 0,0 64.11,143.02 L92.68,123.66 A4.42,4.42 0 0,0 94.62,120 A4.42,4.42 0 0,0 92.68,116.34 L64.11,96.98 A3.4,3.4 0 0,0 59,98.67 A64.62,64.62 0 0,0 59,141.33 Z M71.03,77.84 A3.4,3.4 0 0,0 72.12,83.11 L103.17,98.17 A4.42,4.42 0 0,0 107.31,98.02 A4.42,4.42 0 0,0 109.51,94.51 L111.99,60.09 A3.4,3.4 0 0,0 107.97,56.51 A64.62,64.62 0 0,0 71.03,77.84 Z M131.92,102.77 A4.79,4.79 0 0,0 125.25,103.98 A4.79,4.79 0 0,0 126.47,110.65 A11.37,11.37 0 0,1 130.68,123.89 A11.37,11.37 0 0,1 120,131.37 A11.37,11.37 0 0,1 109.32,123.89 A11.37,11.37 0 0,1 113.53,110.65 A4.79,4.79 0 0,0 114.75,103.98 A4.79,4.79 0 0,0 108.08,102.77 A20.95,20.95 0 0,0 100.31,127.17 A20.95,20.95 0 0,0 120,140.95 A20.95,20.95 0 0,0 139.69,127.17 A20.95,20.95 0 0,0 131.92,102.77 Z'/%3E%3C/svg%3E");--wheel-rim-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 224 224'%3E%3Cpath fill-rule='evenodd' d='M108.68,25.94 A3.58,3.58 0 0,0 111.74,23.19 L114.16,12.65 A5.99,5.99 0 0,1 125.84,12.65 L128.26,23.19 A3.58,3.58 0 0,0 131.32,25.94 A94.74,94.74 0 0,1 133.41,26.21 A3.58,3.58 0 0,0 137.07,24.35 L142.15,14.79 A5.99,5.99 0 0,1 153.42,17.82 L153.04,28.63 A3.58,3.58 0 0,0 155.28,32.07 A94.74,94.74 0 0,1 157.22,32.88 A3.58,3.58 0 0,0 161.25,32.03 L168.62,24.11 A5.99,5.99 0 0,1 178.73,29.95 L175.56,40.29 A3.58,3.58 0 0,0 176.84,44.2 A94.74,94.74 0 0,1 178.5,45.48 A3.58,3.58 0 0,0 182.61,45.7 L191.78,39.96 A5.99,5.99 0 0,1 200.04,48.22 L194.3,57.39 A3.58,3.58 0 0,0 194.52,61.5 A94.74,94.74 0 0,1 195.8,63.16 A3.58,3.58 0 0,0 199.71,64.44 L210.05,61.27 A5.99,5.99 0 0,1 215.89,71.38 L207.97,78.75 A3.58,3.58 0 0,0 207.12,82.78 A94.74,94.74 0 0,1 207.93,84.72 A3.58,3.58 0 0,0 211.37,86.96 L222.18,86.58 A5.99,5.99 0 0,1 225.21,97.85 L215.65,102.93 A3.58,3.58 0 0,0 213.79,106.59 A94.74,94.74 0 0,1 214.06,108.68 A3.58,3.58 0 0,0 216.81,111.74 L227.35,114.16 A5.99,5.99 0 0,1 227.35,125.84 L216.81,128.26 A3.58,3.58 0 0,0 214.06,131.32 A94.74,94.74 0 0,1 213.79,133.41 A3.58,3.58 0 0,0 215.65,137.07 L225.21,142.15 A5.99,5.99 0 0,1 222.18,153.42 L211.37,153.04 A3.58,3.58 0 0,0 207.93,155.28 A94.74,94.74 0 0,1 207.12,157.22 A3.58,3.58 0 0,0 207.97,161.25 L215.89,168.62 A5.99,5.99 0 0,1 210.05,178.73 L199.71,175.56 A3.58,3.58 0 0,0 195.8,176.84 A94.74,94.74 0 0,1 194.52,178.5 A3.58,3.58 0 0,0 194.3,182.61 L200.04,191.78 A5.99,5.99 0 0,1 191.78,200.04 L182.61,194.3 A3.58,3.58 0 0,0 178.5,194.52 A94.74,94.74 0 0,1 176.84,195.8 A3.58,3.58 0 0,0 175.56,199.71 L178.73,210.05 A5.99,5.99 0 0,1 168.62,215.89 L161.25,207.97 A3.58,3.58 0 0,0 157.22,207.12 A94.74,94.74 0 0,1 155.28,207.93 A3.58,3.58 0 0,0 153.04,211.37 L153.42,222.18 A5.99,5.99 0 0,1 142.15,225.21 L137.07,215.65 A3.58,3.58 0 0,0 133.41,213.79 A94.74,94.74 0 0,1 131.32,214.06 A3.58,3.58 0 0,0 128.26,216.81 L125.84,227.35 A5.99,5.99 0 0,1 114.16,227.35 L111.74,216.81 A3.58,3.58 0 0,0 108.68,214.06 A94.74,94.74 0 0,1 106.59,213.79 A3.58,3.58 0 0,0 102.93,215.65 L97.85,225.21 A5.99,5.99 0 0,1 86.58,222.18 L86.96,211.37 A3.58,3.58 0 0,0 84.72,207.93 A94.74,94.74 0 0,1 82.78,207.12 A3.58,3.58 0 0,0 78.75,207.97 L71.38,215.89 A5.99,5.99 0 0,1 61.27,210.05 L64.44,199.71 A3.58,3.58 0 0,0 63.16,195.8 A94.74,94.74 0 0,1 61.5,194.52 A3.58,3.58 0 0,0 57.39,194.3 L48.22,200.04 A5.99,5.99 0 0,1 39.96,191.78 L45.7,182.61 A3.58,3.58 0 0,0 45.48,178.5 A94.74,94.74 0 0,1 44.2,176.84 A3.58,3.58 0 0,0 40.29,175.56 L29.95,178.73 A5.99,5.99 0 0,1 24.11,168.62 L32.03,161.25 A3.58,3.58 0 0,0 32.88,157.22 A94.74,94.74 0 0,1 32.07,155.28 A3.58,3.58 0 0,0 28.63,153.04 L17.82,153.42 A5.99,5.99 0 0,1 14.79,142.15 L24.35,137.07 A3.58,3.58 0 0,0 26.21,133.41 A94.74,94.74 0 0,1 25.94,131.32 A3.58,3.58 0 0,0 23.19,128.26 L12.65,125.84 A5.99,5.99 0 0,1 12.65,114.16 L23.19,111.74 A3.58,3.58 0 0,0 25.94,108.68 A94.74,94.74 0 0,1 26.21,106.59 A3.58,3.58 0 0,0 24.35,102.93 L14.79,97.85 A5.99,5.99 0 0,1 17.82,86.58 L28.63,86.96 A3.58,3.58 0 0,0 32.07,84.72 A94.74,94.74 0 0,1 32.88,82.78 A3.58,3.58 0 0,0 32.03,78.75 L24.11,71.38 A5.99,5.99 0 0,1 29.95,61.27 L40.29,64.44 A3.58,3.58 0 0,0 44.2,63.16 A94.74,94.74 0 0,1 45.48,61.5 A3.58,3.58 0 0,0 45.7,57.39 L39.96,48.22 A5.99,5.99 0 0,1 48.22,39.96 L57.39,45.7 A3.58,3.58 0 0,0 61.5,45.48 A94.74,94.74 0 0,1 63.16,44.2 A3.58,3.58 0 0,0 64.44,40.29 L61.27,29.95 A5.99,5.99 0 0,1 71.38,24.11 L78.75,32.03 A3.58,3.58 0 0,0 82.78,32.88 A94.74,94.74 0 0,1 84.72,32.07 A3.58,3.58 0 0,0 86.96,28.63 L86.58,17.82 A5.99,5.99 0 0,1 97.85,14.79 L102.93,24.35 A3.58,3.58 0 0,0 106.59,26.21 A94.74,94.74 0 0,1 108.68,25.94 Z M34.81,120 a85.19,85.19 0 1,0 170.38,0 a85.19,85.19 0 1,0 -170.38,0 Z'/%3E%3C/svg%3E");--teeth-mask:url("/assets/img/art/seam-teeth.svg?v=cc6c9283");--teeth-ratio:1.1306;--wheel-teeth:24;--wheel-step:15deg;--wheel-root:0.846;--wheel-rim-inner:0.761;--wheel-ring-outer:0.658;--wheel-ring-inner:0.577;--wheel-hub:0.227;--logo-wheel-x:0.4303;--logo-wheel-y:0.4294;--logo-wheel-d:0.8349;--logo-aspect:3.8393;--tooth-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='108.675 8 22.65 17.93' preserveAspectRatio='none'%3E%3Cpath d='M108.68,25.94 A3.58,3.58 0 0,0 111.74,23.19 L114.16,12.65 A5.99,5.99 0 0,1 125.84,12.65 L128.26,23.19 A3.58,3.58 0 0,0 131.32,25.94 Z'/%3E%3C/svg%3E");--tooth-ratio:1.2632;--window-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='96.395 55.38 47.21 39.24' preserveAspectRatio='none'%3E%3Cpath d='M98.67,59 A64.62,64.62 0 0,1 141.33,59 A3.4,3.4 0 0,1 143.02,64.11 L123.66,92.68 A4.42,4.42 0 0,1 120,94.62 A4.42,4.42 0 0,1 116.34,92.68 L96.98,64.11 A3.4,3.4 0 0,1 98.67,59 Z'/%3E%3C/svg%3E");--window-ratio:1.2031;--keyway-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='99.05 99.05 41.9 41.9'%3E%3Cpath fill-rule='evenodd' d='M131.92,102.77 A20.95,20.95 0 0,1 139.69,127.17 A20.95,20.95 0 0,1 120,140.95 A20.95,20.95 0 0,1 100.31,127.17 A20.95,20.95 0 0,1 108.08,102.77 A4.79,4.79 0 0,1 114.75,103.98 A4.79,4.79 0 0,1 113.53,110.65 A11.37,11.37 0 0,0 109.32,123.89 A11.37,11.37 0 0,0 120,131.37 A11.37,11.37 0 0,0 130.68,123.89 A11.37,11.37 0 0,0 126.47,110.65 A4.79,4.79 0 0,1 125.25,103.98 A4.79,4.79 0 0,1 131.92,102.77 Z'/%3E%3C/svg%3E");--spoke-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='107.31 55.38 25.38 42.6' preserveAspectRatio='none'%3E%3Cpath d='M107.31,98.02 A4.42,4.42 0 0,0 109.51,94.51 L111.99,60.09 A3.4,3.4 0 0,0 107.97,56.51 A64.62,64.62 0 0,1 132.03,56.51 A3.4,3.4 0 0,0 128.01,60.09 L130.49,94.51 A4.42,4.42 0 0,0 132.69,98.02 A25.38,25.38 0 0,0 107.31,98.02 Z'/%3E%3C/svg%3E");--spoke-ratio:0.5958;--ring-share:0.1226;--wheel-clip:polygon(45.28% 10.81%, 45.85% 10.62%, 46.3% 10.21%, 46.56% 9.66%, 47.57% 5.27%, 48.05% 4.27%, 48.92% 3.58%, 50% 3.33%, 51.08% 3.58%, 51.95% 4.27%, 52.43% 5.27%, 53.44% 9.66%, 53.7% 10.21%, 54.15% 10.62%, 54.72% 10.81%, 55.59% 10.92%, 56.19% 10.88%, 56.73% 10.61%, 57.11% 10.15%, 59.23% 6.16%, 59.95% 5.32%, 60.97% 4.88%, 62.08% 4.92%, 63.06% 5.44%, 63.72% 6.33%, 63.93% 7.42%, 63.77% 11.93%, 63.87% 12.52%, 64.2% 13.03%, 64.7% 13.36%, 65.51% 13.7%, 66.1% 13.82%, 66.69% 13.69%, 67.19% 13.34%, 70.26% 10.05%, 71.18% 9.42%, 72.27% 9.26%, 73.33% 9.59%, 74.15% 10.34%, 74.55% 11.37%, 74.47% 12.48%, 73.15% 16.79%, 73.09% 17.39%, 73.28% 17.96%, 73.68% 18.42%, 74.38% 18.95%, 74.92% 19.22%, 75.52% 19.25%, 76.09% 19.04%, 79.91% 16.65%, 80.96% 16.29%, 82.06% 16.41%, 83% 17%, 83.59% 17.94%, 83.71% 19.04%, 83.35% 20.09%, 80.96% 23.91%, 80.75% 24.48%, 80.78% 25.08%, 81.05% 25.62%, 81.58% 26.32%, 82.04% 26.72%, 82.61% 26.91%, 83.21% 26.85%, 87.52% 25.53%, 88.63% 25.45%, 89.66% 25.85%, 90.41% 26.67%, 90.74% 27.73%, 90.58% 28.82%, 89.95% 29.74%, 86.66% 32.81%, 86.31% 33.31%, 86.18% 33.9%, 86.3% 34.49%, 86.64% 35.3%, 86.97% 35.8%, 87.48% 36.13%, 88.07% 36.23%, 92.58% 36.07%, 93.67% 36.28%, 94.56% 36.94%, 95.08% 37.92%, 95.12% 39.03%, 94.68% 40.05%, 93.84% 40.77%, 89.85% 42.89%, 89.39% 43.27%, 89.12% 43.81%, 89.08% 44.41%, 89.19% 45.28%, 89.38% 45.85%, 89.79% 46.3%, 90.34% 46.56%, 94.73% 47.57%, 95.73% 48.05%, 96.42% 48.92%, 96.67% 50%, 96.42% 51.08%, 95.73% 51.95%, 94.73% 52.43%, 90.34% 53.44%, 89.79% 53.7%, 89.38% 54.15%, 89.19% 54.72%, 89.08% 55.59%, 89.12% 56.19%, 89.39% 56.73%, 89.85% 57.11%, 93.84% 59.23%, 94.68% 59.95%, 95.12% 60.97%, 95.08% 62.08%, 94.56% 63.06%, 93.67% 63.72%, 92.58% 63.93%, 88.07% 63.77%, 87.48% 63.87%, 86.97% 64.2%, 86.64% 64.7%, 86.3% 65.51%, 86.18% 66.1%, 86.31% 66.69%, 86.66% 67.19%, 89.95% 70.26%, 90.58% 71.18%, 90.74% 72.27%, 90.41% 73.33%, 89.66% 74.15%, 88.63% 74.55%, 87.52% 74.47%, 83.21% 73.15%, 82.61% 73.09%, 82.04% 73.28%, 81.58% 73.68%, 81.05% 74.38%, 80.78% 74.92%, 80.75% 75.52%, 80.96% 76.09%, 83.35% 79.91%, 83.71% 80.96%, 83.59% 82.06%, 83% 83%, 82.06% 83.59%, 80.96% 83.71%, 79.91% 83.35%, 76.09% 80.96%, 75.52% 80.75%, 74.92% 80.78%, 74.38% 81.05%, 73.68% 81.58%, 73.28% 82.04%, 73.09% 82.61%, 73.15% 83.21%, 74.47% 87.52%, 74.55% 88.63%, 74.15% 89.66%, 73.33% 90.41%, 72.27% 90.74%, 71.18% 90.58%, 70.26% 89.95%, 67.19% 86.66%, 66.69% 86.31%, 66.1% 86.18%, 65.51% 86.3%, 64.7% 86.64%, 64.2% 86.97%, 63.87% 87.48%, 63.77% 88.07%, 63.93% 92.58%, 63.72% 93.67%, 63.06% 94.56%, 62.08% 95.08%, 60.97% 95.12%, 59.95% 94.68%, 59.23% 93.84%, 57.11% 89.85%, 56.73% 89.39%, 56.19% 89.12%, 55.59% 89.08%, 54.72% 89.19%, 54.15% 89.38%, 53.7% 89.79%, 53.44% 90.34%, 52.43% 94.73%, 51.95% 95.73%, 51.08% 96.42%, 50% 96.67%, 48.92% 96.42%, 48.05% 95.73%, 47.57% 94.73%, 46.56% 90.34%, 46.3% 89.79%, 45.85% 89.38%, 45.28% 89.19%, 44.41% 89.08%, 43.81% 89.12%, 43.27% 89.39%, 42.89% 89.85%, 40.77% 93.84%, 40.05% 94.68%, 39.03% 95.12%, 37.92% 95.08%, 36.94% 94.56%, 36.28% 93.67%, 36.07% 92.58%, 36.23% 88.07%, 36.13% 87.48%, 35.8% 86.97%, 35.3% 86.64%, 34.49% 86.3%, 33.9% 86.18%, 33.31% 86.31%, 32.81% 86.66%, 29.74% 89.95%, 28.82% 90.58%, 27.73% 90.74%, 26.67% 90.41%, 25.85% 89.66%, 25.45% 88.63%, 25.53% 87.52%, 26.85% 83.21%, 26.91% 82.61%, 26.72% 82.04%, 26.32% 81.58%, 25.62% 81.05%, 25.08% 80.78%, 24.48% 80.75%, 23.91% 80.96%, 20.09% 83.35%, 19.04% 83.71%, 17.94% 83.59%, 17% 83%, 16.41% 82.06%, 16.29% 80.96%, 16.65% 79.91%, 19.04% 76.09%, 19.25% 75.52%, 19.22% 74.92%, 18.95% 74.38%, 18.42% 73.68%, 17.96% 73.28%, 17.39% 73.09%, 16.79% 73.15%, 12.48% 74.47%, 11.37% 74.55%, 10.34% 74.15%, 9.59% 73.33%, 9.26% 72.27%, 9.42% 71.18%, 10.05% 70.26%, 13.34% 67.19%, 13.69% 66.69%, 13.82% 66.1%, 13.7% 65.51%, 13.36% 64.7%, 13.03% 64.2%, 12.52% 63.87%, 11.93% 63.77%, 7.42% 63.93%, 6.33% 63.72%, 5.44% 63.06%, 4.92% 62.08%, 4.88% 60.97%, 5.32% 59.95%, 6.16% 59.23%, 10.15% 57.11%, 10.61% 56.73%, 10.88% 56.19%, 10.92% 55.59%, 10.81% 54.72%, 10.62% 54.15%, 10.21% 53.7%, 9.66% 53.44%, 5.27% 52.43%, 4.27% 51.95%, 3.58% 51.08%, 3.33% 50%, 3.58% 48.92%, 4.27% 48.05%, 5.27% 47.57%, 9.66% 46.56%, 10.21% 46.3%, 10.62% 45.85%, 10.81% 45.28%, 10.92% 44.41%, 10.88% 43.81%, 10.61% 43.27%, 10.15% 42.89%, 6.16% 40.77%, 5.32% 40.05%, 4.88% 39.03%, 4.92% 37.92%, 5.44% 36.94%, 6.33% 36.28%, 7.42% 36.07%, 11.93% 36.23%, 12.52% 36.13%, 13.03% 35.8%, 13.36% 35.3%, 13.7% 34.49%, 13.82% 33.9%, 13.69% 33.31%, 13.34% 32.81%, 10.05% 29.74%, 9.42% 28.82%, 9.26% 27.73%, 9.59% 26.67%, 10.34% 25.85%, 11.37% 25.45%, 12.48% 25.53%, 16.79% 26.85%, 17.39% 26.91%, 17.96% 26.72%, 18.42% 26.32%, 18.95% 25.62%, 19.22% 25.08%, 19.25% 24.48%, 19.04% 23.91%, 16.65% 20.09%, 16.29% 19.04%, 16.41% 17.94%, 17% 17%, 17.94% 16.41%, 19.04% 16.29%, 20.09% 16.65%, 23.91% 19.04%, 24.48% 19.25%, 25.08% 19.22%, 25.62% 18.95%, 26.32% 18.42%, 26.72% 17.96%, 26.91% 17.39%, 26.85% 16.79%, 25.53% 12.48%, 25.45% 11.37%, 25.85% 10.34%, 26.67% 9.59%, 27.73% 9.26%, 28.82% 9.42%, 29.74% 10.05%, 32.81% 13.34%, 33.31% 13.69%, 33.9% 13.82%, 34.49% 13.7%, 35.3% 13.36%, 35.8% 13.03%, 36.13% 12.52%, 36.23% 11.93%, 36.07% 7.42%, 36.28% 6.33%, 36.94% 5.44%, 37.92% 4.92%, 39.03% 4.88%, 40.05% 5.32%, 40.77% 6.16%, 42.89% 10.15%, 43.27% 10.61%, 43.81% 10.88%, 44.41% 10.92%);--window-clip:polygon(55.01% 23.55%, 60.77% 25.32%, 65.99% 28.34%, 70.4% 32.43%, 70.61% 32.74%, 70.72% 33.09%, 70.74% 33.46%, 70.67% 33.82%, 70.5% 34.15%, 70.26% 34.43%, 69.95% 34.63%, 57.01% 40.91%, 56.59% 41.05%, 56.14% 41.09%, 55.7% 41.02%, 55.29% 40.84%, 54.93% 40.57%, 54.65% 40.23%, 54.46% 39.82%, 54.37% 39.38%, 53.34% 25.04%, 53.36% 24.67%, 53.47% 24.32%, 53.68% 24.01%, 53.95% 23.77%, 54.28% 23.6%, 54.64% 23.52%);--lockup-wheel-em:1.8369;--lockup-gap-em:0.2746;--lockup-sub-em:0.5799;--lockup-base-em:1.2153;--lockup-step-em:0.79;--lockup-inset-em:0.0751;--grain:url("/assets/img/art/grain-1.png?v=54291773");--grain-size:256px;--grain-opacity:0.06}

/* The fluid type scale (360px to 1440px). Declared on every element that carries a lang attribute as
   well, so a Chinese passage inside an English page gets its own --display-scale. */
:root,
[lang] {
  --fs-title: calc(clamp(2.75rem, 1.5rem + 5.56vw, 6.5rem) * var(--display-scale));      /* a title card */
  --fs-hero: calc(clamp(2.375rem, 1.63rem + 3.33vw, 4.625rem) * var(--display-scale));   /* h1 on a practical page */
  --fs-section: calc(clamp(1.9375rem, 1.52rem + 1.85vw, 3.1875rem) * var(--display-scale));   /* h2 */
  --fs-sub: calc(clamp(1.375rem, 1.29rem + .37vw, 1.625rem) * var(--display-scale));     /* h3 */
  --fs-lead: calc(clamp(1.1875rem, 1.125rem + .28vw, 1.375rem) * var(--text-scale));
  --fs-body: calc(clamp(1.0625rem, 1.04rem + .09vw, 1.125rem) * var(--text-scale));      /* 17 to 18px */
  --fs-small: calc(1rem * var(--text-scale));                                            /* the floor for running text */
  --fs-caption: calc(clamp(1.0625rem, 1rem + .28vw, 1.25rem) * var(--text-scale));       /* subtitles over pictures */
  --fs-slate: calc(.875rem * var(--slate-scale));                                        /* the slate line and the HUD: 14px, light, uppercase (16px in Chinese) */
  --fs-stat: clamp(3.5rem, 2.33rem + 5.19vw, 7rem);                                      /* counted numbers */
  --fs-count: clamp(2.5rem, 1.33rem + 5.19vw, 6rem);                                     /* the countdown */
}

@media (max-width: 40rem) {
  :root { --header-h: 3.5rem; --hud-h: 2.75rem; --logo-h: 2rem; }
}
/* Portrait screens: the bars relax to thin bands, and close in only as far as the 62% rule allows. */
@media (orientation: portrait) {
  :root { --film-bar: max(var(--bar-top), var(--bar-bot), 9svh); --closed-bar: 19svh; }
}

}   /* end of the token part of @layer base */

/* ──────────────────────────────────────────────── the page-change wipe ──
   A cranberry wheel wipe: the rim of the wheel grows out of the header wheel, turning, and the next page
   opens inside it like an iris (DIRECTION 6). View Transitions API where it exists; plain navigation
   where it does not; nothing under reduced motion (the opt-in rule is inline in <head>).
   The old page holds still, the new one is clipped to a circle that grows from --wipe-x/--wipe-y, and
   the rim belongs to an empty, invisible element (.wipe-anchor in layout.html): its image pair is painted
   cranberry and masked with the wheel's rim. Old and new are set to normal blending: the browser's default adds
   them together, which is right for a cross-fade and wrong for an iris. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) { mix-blend-mode: normal; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: rac-iris var(--dur-4) var(--ease-film) both; }
  ::view-transition-old(rac-wipe),
  ::view-transition-new(rac-wipe) { display: none; }
  /* The rim is painted on the image pair, not on the group: the browser places the group with a transform of
     its own, and a scale or a turn set on the group itself would swing it round that offset. The pair sits
     inside the group, so it grows and turns about its own centre, which is the header wheel. */
  ::view-transition-image-pair(rac-wipe) {
    background: var(--cranberry);
    -webkit-mask: var(--wheel-rim-mask) center / 100% 100% no-repeat;
    mask: var(--wheel-rim-mask) center / 100% 100% no-repeat;
    transform-origin: 50% 50%;
    animation: rac-wipe-rim var(--dur-4) var(--ease-film) both;
  }
}
/* The rim's box is 60vmax across, so its tip radius is 30vmax × scale. At 6.7 its inner edge (0.77 of
   the tip) is past the far corner of any screen, and the iris (0.82 of the tip) stays inside the rim. */
@keyframes rac-iris {
  from { clip-path: circle(0vmax at var(--wipe-x) var(--wipe-y)); }
  to { clip-path: circle(165vmax at var(--wipe-x) var(--wipe-y)); }
}
@keyframes rac-wipe-rim {
  from { scale: 0; rotate: -50deg; }
  to { scale: 6.7; rotate: 40deg; }
}

/* ──────────────────────────────────────────────────────────────── reset ── */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-block-size: 100vh; min-block-size: 100svh; }
  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
  img, video { block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { padding: 0; border: 0; background: none; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  a { color: inherit; -webkit-tap-highlight-color: transparent; }
  ul[role="list"], ol[role="list"] { padding: 0; list-style: none; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  address, em, i, cite { font-style: normal; }
  table { border-collapse: collapse; }
  fieldset { min-inline-size: 0; padding: 0; border: 0; }
  legend { padding: 0; }
  dialog { padding: 0; border: 0; color: inherit; background: none; max-inline-size: none; max-block-size: none; }
  summary { cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }
  [hidden] { display: none !important; }
}

/* ───────────────────────────────────────────────────────────────── base ── */

@layer base {
  html {
    font-size: 100%;
    color-scheme: dark;
    font-synthesis: none;                 /* never a faux bold or a faux italic */
    scroll-padding-block-start: calc(var(--header-h) + 1rem);
    scroll-padding-block-end: calc(var(--bar-bot) + 1rem);
    scrollbar-gutter: stable;
    scrollbar-color: var(--cranberry-deep) var(--black);
    overflow-x: clip;
    background: var(--black);
  }

  body {
    font-family: var(--font-text);
    font-size: var(--fs-body);
    font-weight: var(--fw-text);
    line-height: var(--lh-text);
    color: var(--fg);
    background: var(--black);
    overflow-x: clip;
    overflow-wrap: break-word;
    text-wrap: pretty;
    font-variant-numeric: lining-nums;
    accent-color: var(--cranberry);
    caret-color: var(--cranberry-lit);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Display type: the heavy line of the logo, a semibold. One colour, never uppercase, never heavier than the logo. */
  h1, h2, h3, .h-title, .h-hero, .h-section, .h-sub, .display {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-display);
    color: var(--heading);
    text-wrap: balance;
    overflow-wrap: anywhere;
    text-rendering: optimizeLegibility;
  }
  .h-title { font-size: var(--fs-title); }
  h1, .h-hero { font-size: var(--fs-hero); }
  h2, .h-section { font-size: var(--fs-section); }
  h3, .h-sub {
    font-size: var(--fs-sub);
    font-weight: var(--fw-title);
    line-height: var(--lh-sub);
    letter-spacing: var(--tracking-sub);
  }
  /* h4: a label inside a block. */
  h4, .h-label {
    font-family: var(--font-text);
    font-size: var(--fs-lead);
    font-weight: var(--fw-strong);
    line-height: var(--lh-ui);
    color: var(--heading);
  }
  /* The light line of the logo: the second line under any title, and anything said quietly at size. */
  .light, .h-light {
    font-family: var(--font-display);
    font-weight: var(--fw-light);
    letter-spacing: var(--tracking-light);
  }
  /* Emphasis inside a title is weight against light, never slope. */
  :is(h1, h2, h3, .h-title, .h-hero, .h-section, .h-sub, .display) :is(em, i) { font-weight: var(--fw-light); }

  p { max-inline-size: var(--measure); }
  .lead { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: calc(var(--lh-text) - .1); }
  small, .small { font-size: var(--fs-small); }
  .muted { color: var(--fg-muted); }
  strong, b { font-weight: var(--fw-strong); }
  em, i, cite { font-weight: var(--fw-strong); }

  /* A link inside running text. Components give their links a class and their own look. */
  a:not([class]) {
    color: var(--link);
    font-weight: var(--fw-strong);
    text-decoration-line: underline;
    text-decoration-thickness: .07em;
    text-underline-offset: var(--underline-offset);
    transition: text-decoration-thickness var(--dur-1) ease, color var(--dur-2) ease;
  }
  @media (hover: hover) and (pointer: fine) {
    a:not([class]):hover { text-decoration-thickness: .14em; color: var(--bone); }
  }

  /* Focus: 2px, 3px away, always visible. Cranberry-lit on black and night (6.4 and 6.1);
     bone where the ground is cranberry. */
  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
  }
  :focus:not(:focus-visible) { outline: none; }
  /* A place an in-page link lands on (a section, a heading, a panel: tabindex="-1", never a control) is not
     something to act on: it shows that the focus is there with a hairline just inside its edge, not the
     2px ring of a control drawn round half the page. */
  [tabindex="-1"]:focus-visible:not(a, button, input, select, textarea, summary, dialog, [role="button"], [role="slider"], [role="tab"], [role="option"], [role="menuitem"], [role="radio"], [role="checkbox"], [role="switch"], [role="dialog"]) {
    outline: 1px solid var(--line-strong);
    outline-offset: -1px;
  }

  ::selection { background: var(--cranberry); color: var(--white); }

  .skip-link {
    position: fixed;
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
    z-index: var(--z-skip);
    display: inline-flex;
    align-items: center;
    min-block-size: var(--btn-h);
    padding-inline: 1.5rem;
    border-radius: var(--r-full);
    background: var(--cranberry);
    color: var(--white);
    font-weight: var(--fw-strong);
    line-height: var(--lh-ui);
    text-decoration: none;
    transform: translateY(-250%);
    transition: transform var(--dur-2) var(--ease-out);
  }
  .skip-link:focus { transform: none; outline-color: var(--bone); }

  /* Words kept whole in Chinese headings (the th() helper writes these). */
  .w { white-space: nowrap; }
  /* Names kept whole everywhere ("Hong Kong", "District 3450", 香港東區扶青社 …): the build wraps them in the
     body's text. No box of its own, so a name inside a button or any flex or grid parent stays part of
     its sentence; only the line break inside the name is taken away. */
  .nb { display: contents !important; white-space: nowrap !important; }
  @media (max-width: 23.49rem) { .nb--mail { white-space: normal !important; } }

  /* ── Motion ground rules ──────────────────────────────────────────────────
     Hidden-until-animated exists only when scripts run (html.js), only when the
     visitor has not asked for reduced motion, and never after the failsafe. */
  @media (prefers-reduced-motion: no-preference) {
    html.js:not(.rac-failsafe) [data-reveal]:not(.is-in) { opacity: 0; }
    /* The first screen is painted at first paint. In the first block of <main>, the title (a lockup, a title
       card, any h1), display text that would rise by line or by word, the lead and a framed picture are never
       hidden: they are simply there, and what a visitor (and a search engine's clock) sees first is the page's
       own headline, not an empty stage. Only what is not text still moves there: the lockup's wheel turns one
       window and its hairline draws. data-reveal-now asks for the same anywhere else. (core.js: paintedAtOnce.) */
    html.js:not(.rac-failsafe) main > :first-child :is([data-reveal="lockup"], [data-reveal="card"], [data-reveal="lines"], [data-reveal="words"], [data-reveal="iris"], h1[data-reveal], .lead[data-reveal]):not(.is-in),
    html.js:not(.rac-failsafe) [data-reveal][data-reveal-now]:not(.is-in) { opacity: 1; }
    html.js:not(.rac-failsafe) main > :first-child .lockup[data-reveal="lockup"]:not(.is-in) > .lockup__rule,
    html.js:not(.rac-failsafe) .lockup[data-reveal="lockup"][data-reveal-now]:not(.is-in) > .lockup__rule { transform: scaleX(0); }
  }
  html.rac-failsafe [data-reveal],
  html.rac-failsafe [data-reveal] :is(picture, img) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* Lenis (desktop fine pointers only; core.js decides) */
  html.lenis, html.lenis body { block-size: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis [data-lenis-prevent] { overscroll-behavior: contain; }

  /* A locked page behind the menu or the language panel */
  html.is-locked, html.is-locked body { overflow: hidden; }
}

/* ─────────────────────────────────────────────────────────────── layout ── */

@layer layout {
  /* Fluid container: gutters shrink to 16px, width stops at 76rem. */
  .container {
    inline-size: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .container--wide { --container: var(--container-wide); }
  .container--narrow { --container: var(--container-narrow); }

  /* The page sits between the bars. The first block of <main> clears the top bar by itself
     (sections, page heads and scene stages read --clear-top), and the footer clears the HUD. */
  main { display: block; }
  main > :first-child { --clear-top: var(--bar-top); }

  /* Section rhythm. A tone class paints it (see "tones" in components.css). */
  .section {
    position: relative;
    padding-block: calc(var(--section-pad) + var(--clear-top, 0px)) var(--section-pad);
    background: var(--bg);
    color: var(--fg);
  }
  .section--tight { --section-pad: clamp(2.5rem, 2rem + 3vw, 5rem); }
  .section--flush-start { padding-block-start: var(--clear-top, 0px); }
  .section--flush-end { padding-block-end: 0; }
  .section__head { margin-block-end: clamp(2rem, 1.4rem + 2.6vw, 4rem); }
  .section__head > * + * { margin-block-start: var(--space-s); }

  /* Vertical stack with one gap. */
  .stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-m)); }
  .stack--xs { --gap: var(--space-xs); }
  .stack--s { --gap: var(--space-s); }
  .stack--l { --gap: var(--space-l); }
  .stack--xl { --gap: var(--space-xl); }
  .stack > :is(.btn, .tool-btn, .round-btn, .link, .medal, .slate) { align-self: flex-start; }   /* a column must not stretch a button */
  .stack > .btn--block { align-self: stretch; }

  /* Prose flow: space between siblings, more above a heading than below it. */
  .flow > * + * { margin-block-start: var(--flow, 1em); }
  .flow > :is(h2, h3, h4) { margin-block-start: 1.8em; }
  .flow > :is(h2, h3, h4) + * { margin-block-start: .6em; }

  /* Things in a row that wrap: buttons, tags, links. */
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-s)); }

  /* Even columns that fold by themselves; --min is the narrowest a column may be. */
  .grid-auto {
    display: grid;
    gap: var(--gap, var(--space-l));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 18rem), 100%), 1fr));
  }

  /* Twelve columns for deliberate compositions. Children place themselves with grid-column. */
  .grid {
    display: grid;
    gap: var(--gap, var(--space-l));
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .grid > * { grid-column: 1 / -1; }

  /* Two sides. One column on phones, two from 56rem; ratios by modifier. */
  .split {
    display: grid;
    gap: var(--gap, clamp(2rem, 1rem + 4.5vw, 5.5rem));
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }
  .split--top { align-items: start; }
  @media (min-width: 56rem) {
    .split { grid-template-columns: minmax(0, var(--a, 1fr)) minmax(0, var(--b, 1fr)); }
    .split--5-7 { --a: 5fr; --b: 7fr; }
    .split--7-5 { --a: 7fr; --b: 5fr; }
    .split--4-8 { --a: 4fr; --b: 8fr; }
    .split--8-4 { --a: 8fr; --b: 4fr; }
    .split--flip > :first-child { order: 2; }
  }

  .measure { max-inline-size: var(--measure); }
  .measure-none { max-inline-size: none; }
}

/* ──────────────────────────────────────────────────────────── utilities ── */

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  .nowrap { white-space: nowrap; }
  .text-center { text-align: center; }
  .text-start { text-align: start; }
  .mx-auto { margin-inline: auto; }
  .tabular { font-variant-numeric: tabular-nums lining-nums; }
  @media (max-width: 55.99rem) { .wide-only { display: none !important; } }
  @media (min-width: 56rem) { .narrow-only { display: none !important; } }
  /* Shown only while scripts are off (a plain route where a set piece needs a hand). */
  html.js .nojs-only { display: none !important; }
  html:not(.js) .js-only { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────── print ── */

@media print {
  [data-reveal], [data-reveal] :is(picture, img) { opacity: 1 !important; transform: none !important; clip-path: none !important; visibility: visible !important; }
  .letterbox, .film, .hud, .preloader, .suggest, .skip-link, .site-menu, .lang-panel, .cog-cursor { display: none !important; }
  .site-header { position: static !important; }
  /* The bright site: no progress line; a ticker is one still row that wraps. */
  .site-progress, .b-ticker__row[aria-hidden="true"] { display: none !important; }
  .b-ticker, .b-ticker__track, .b-ticker__row { flex-wrap: wrap !important; overflow: visible !important; transform: none !important; white-space: normal !important; }
}