/*
 * Teodora Ravelle for Mayor: design tokens. "Riso newsprint": a two-drum duplicator print on
 * cheap newsprint. Ink black and fluorescent pink (cerise), a pale cerise halftone screen, and
 * the paper itself as the third colour (knockouts). NO blue anywhere, no red-white-blue.
 * Every colour, font, size, weight, leading, space, duration, easing, offset and breakpoint on
 * the site lives here; site.css, the page sheets and the scripts only reference them. Prefix --s-.
 *
 * Contrast, measured (WCAG 2.x relative luminance, sRGB):
 *   ink #1a1a1a on paper #f1ece0 ................. 14.6:1   all text
 *   ink-soft #4d4740 on paper .................... 8.0:1    secondary text
 *   ink on paper-deep #e4dccb .................... 12.9:1
 *   ink on screen #f6c6d6 ........................ 11.0:1   text on the pale pink screen
 *   cerise #d81b60 on paper ...................... 4.15:1   DISPLAY ONLY (>= 24px, or 19px bold): never body text
 *   cerise-ink #ad1450 on paper .................. 5.9:1    small pink text (labels, handwriting)
 *   bright #fffaf6 on cerise ..................... 4.8:1    button labels and body text on cerise (AA)
 *   ink on cerise ................................ 3.5:1    display numerals on cerise only (large)
 *   paper on ink ................................. 14.6:1   text on the ink panels
 *   cerise on ink ................................ 3.5:1    large display only; small pink on ink uses screen
 *   screen on ink ................................ 11.0:1
 *
 * Distinct from the other 22 sites: the only fluorescent-pink + ink riso pair; the only skewed
 * slab button; Big Shoulders Display + Literata appear nowhere else.
 */

/* Fonts (SIL OFL 1.1, github.com/google/fonts; latin subsets made with fontTools 4.62.1 on
   BIG-KALI by art/teodora-ravelle/fonts/subset.sh, sources + SHA-256 in art/teodora-ravelle/ART-NOTES.md). */
@font-face {
    font-family: "Big Shoulders Display";
    src: url("fonts/bigshoulders-latin-var.woff2") format("woff2");
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Literata";
    src: url("fonts/literata-latin-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Literata";
    src: url("fonts/literata-italic-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    /* ---- Palette ---------------------------------------------------------- */
    --s-paper: #f1ece0;          /* newsprint ground */
    --s-paper-deep: #e4dccb;     /* a second sheet, panels, the footer */
    --s-paper-edge: #d6cdb8;     /* sheet edges, stack shadows */
    --s-ink: #1a1a1a;            /* riso drum 1: soy ink black */
    --s-ink-soft: #4d4740;       /* secondary text on paper */
    --s-ink-faint: #1a1a1a24;    /* rules, the ledger lines (14% ink) */
    --s-ink-ghost: #1a1a1a12;    /* the faintest ruling */
    --s-ink-shade: #1a1a1a59;    /* stack shadow under prints */
    --s-cerise: #d81b60;         /* riso drum 2: fluorescent pink */
    --s-cerise-ink: #ad1450;     /* small pink text on paper (AA) */
    --s-screen: #f6c6d6;         /* the pale pink halftone screen */
    --s-screen-dot: #d81b6066;   /* halftone dots on the screen */
    --s-bright: #fffaf6;         /* text on cerise and ink */
    --s-bright-soft: #fffaf6b3;  /* secondary text on ink */
    --s-ink-rule: #fffaf62e;     /* rules on ink */
    --s-focus: #1a1a1a;          /* focus rings on paper */
    --s-focus-on-ink: #f6c6d6;   /* focus rings on ink + cerise */

    /* ---- Type ------------------------------------------------------------- */
    --s-font-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
    --s-font-body: "Literata", Georgia, "Times New Roman", serif;
    --s-weight-regular: 400;
    --s-weight-medium: 500;
    --s-weight-semi: 600;
    --s-weight-bold: 700;
    --s-weight-heavy: 800;
    --s-weight-black: 900;
    --s-leading-solid: 1;
    --s-leading-name: 0.74;
    --s-leading-poster: 0.86;
    --s-leading-display: 0.92;
    --s-leading-tight: 1.15;
    --s-leading-body: 1.55;
    --s-leading-small: 1.4;
    --s-track-display: 0.005em;
    --s-track-name: -0.012em;
    --s-track-label: 0.12em;
    --s-track-wide: 0.2em;
    --s-track-body: 0;

    --s-size-name: clamp(9rem, 23vw, 22rem);       /* RAVELLE on the poster */
    --s-size-name-p: clamp(5rem, 32vw, 9.5rem);          /* RAV / ELLE, the portrait poster, beside her */
    --s-poster-art-p: 34%;                              /* the portrait crop's column on the phone poster */
    --s-trap: 0.014em;                                  /* the paper trap round the name where it prints over the drawing */
    --s-size-poster: clamp(3.4rem, 6.6vw, 6.4rem);       /* Fix the harbour. Then the rest. */
    --s-size-poster-p: clamp(2.5rem, 11.4vw, 3.6rem);
    --s-size-h1: clamp(3rem, 7vw, 6.4rem);               /* sub-page titles */
    --s-size-h2: clamp(2.6rem, 5.6vw, 5.2rem);
    --s-size-h3: clamp(1.6rem, 2.6vw, 2.3rem);
    --s-size-strip: clamp(2.4rem, 5.2vw, 4.8rem);        /* pledge lines on the strips */
    --s-size-numeral: clamp(9rem, 19vw, 17rem);
    --s-size-figure: clamp(2.6rem, 5vw, 4.4rem);
    --s-size-stub-day: clamp(3.4rem, 5vw, 4.4rem);
    --s-size-lede: clamp(1.06rem, 1.25vw, 1.24rem);
    --s-size-body: 1.0625rem;
    --s-size-small: 0.9375rem;
    --s-size-label: 0.8125rem;
    --s-size-micro: 0.75rem;
    --s-size-button: 1.375rem;
    --s-size-button-s: 1.125rem;
    --s-size-nav: 1.25rem;
    --s-size-logo: 1.75rem;
    --s-size-count: clamp(1.8rem, 2.6vw, 2.4rem);
    --s-size-quote: clamp(1.4rem, 2.4vw, 2.1rem);
    --s-size-wordmark-foot: clamp(7rem, 30vw, 30rem);

    /* Sheet type (the printed poster in the press): container-query units of the sheet width */
    --s-sheet-name: 30cqw;
    --s-sheet-line: 9.6cqw;
    --s-sheet-small: 2.6cqw;

    /* ---- Measures --------------------------------------------------------- */
    --s-measure-body: 60ch;
    --s-measure-lede: 44ch;
    --s-measure-poster: 11ch;
    --s-measure-strip: 17ch;
    --s-measure-narrow: 30ch;

    /* ---- Space ------------------------------------------------------------ */
    --s-gutter: clamp(16px, 3.4vw, 52px);
    --s-section: clamp(72px, 9vw, 136px);
    --s-section-s: clamp(48px, 6vw, 88px);
    --s-max: 1320px;
    --s-max-text: 760px;
    --s-space-3xs: 2px;
    --s-space-2xs: 4px;
    --s-space-xs: 8px;
    --s-space-s: 12px;
    --s-space-m: 16px;
    --s-space-l: 24px;
    --s-space-xl: 32px;
    --s-space-2xl: 48px;
    --s-space-3xl: 64px;
    --s-space-4xl: 96px;
    --s-nav-h: 60px;
    --s-strip-h: 28px;
    --s-ribbon-h: 33px;
    --s-tap: 44px;
    --s-tap-l: 52px;
    --s-sheet-pad: clamp(14px, 2.2vw, 30px);
    --s-crop: 18px;                  /* crop marks at the sheet corners */
    --s-crop-gap: 6px;
    --s-perf: 7px;                   /* stub perforation pitch */
    --s-perf-dot: 2px;
    --s-rule: 1px;
    --s-rule-heavy: 3px;
    --s-rule-mark: 2px;
    --s-ledger: 34px;                /* ruled-paper line pitch */
    --s-chart-h: 380px;
    --s-chart-h-p: 190px;
    --s-map-max: 520px;
    --s-press-sheet: min(520px, 78vw);
    --s-stub-date: 128px;
    --s-stub-date-p: 88px;
    --s-tray-pad: clamp(18px, 3vw, 40px);
    --s-board-pad: clamp(14px, 2vw, 26px);
    --s-clip-w: 120px;
    --s-clip-h: 34px;
    --s-switch-w: 56px;
    --s-switch-h: 32px;
    --s-switch-knob: 24px;
    --s-plate-gap: 3px;

    /* ---- Riso print: registration, halftone, speckle ---------------------- */
    --s-reg-x: 3px;                  /* how far the pink drum sits off the ink: never perfect */
    --s-reg-y: 2px;
    --s-reg-in-x: 72px;              /* where the pink sheet starts as it slides into register */
    --s-reg-wobble-a: -7px;          /* the settle: past register, back, past, settle */
    --s-reg-wobble-b: 5px;
    --s-reg-wobble-c: -2px;
    --s-drop: -18px;                 /* the ink layer drops in from here */
    --s-feed: -108%;                 /* the sheet waits up in the roller */
    --s-shudder: 2px;                /* paper-feed shudder */
    --s-stack-a: -3.2deg;            /* the stack of finished prints under the live sheet */
    --s-stack-b: 2.4deg;
    --s-stack-shift: 10px;
    --s-skew: -8deg;                 /* the slab button */
    --s-skew-back: 8deg;
    --s-shadow-x: 6px;               /* the misregistered ink shadow under a slab */
    --s-shadow-y: 5px;
    --s-shadow-press-x: 2px;
    --s-shadow-press-y: 2px;
    --s-dot: 34%;                    /* halftone dot radius, of the cell */
    --s-dot-hover: 52%;
    --s-dot-cell: 7px;
    --s-dot-cell-l: 11px;
    --s-tilt-a: -0.6deg;             /* stubs pinned to the board */
    --s-tilt-b: 0.5deg;
    --s-tilt-plate: -3deg;           /* the countdown plate */
    --s-tilt-stamp: -9deg;
    --s-stamp-from: 1.9;
    --s-press-scale: 1.02;
    --s-reveal-y: 22px;
    --s-tick-y: 40%;
    --s-hover-lift: -2px;
    --s-hover-nudge: 4px;

    /* SVG filter + art values, read by _parts/kit.php (SVG attributes cannot take var()). */
    --s-svg-rough-freq: 0.035;
    --s-svg-rough-scale: 2.6;
    --s-svg-speckle-freq: 0.9;
    --s-svg-speckle-gain: 3.2;
    --s-svg-speckle-bias: -1.9;

    /* ---- Motion ----------------------------------------------------------- */
    --s-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
    --s-ease-in: cubic-bezier(0.55, 0, 0.8, 0.3);
    --s-ease-drop: cubic-bezier(0.3, 1.35, 0.5, 1);
    --s-ease-feed: cubic-bezier(0.45, 0, 0.2, 1);
    --s-ease-step: steps(4, end);
    --s-dur-fast: 160ms;
    --s-dur: 320ms;
    --s-dur-slow: 640ms;
    --s-dur-feed: 620ms;
    --s-dur-ink: 420ms;
    --s-dur-pink: 760ms;
    --s-dur-shudder: 340ms;
    --s-dur-gap: 140ms;              /* the pause between drums */
    --s-dur-line: 1800ms;            /* the tide line drawing itself */
    --s-dur-fill: 380ms;             /* one walk-list row writing in */
    --s-dur-fill-gap: 90ms;
    --s-dur-tick: 260ms;             /* a countdown digit changing */
    --s-dur-stamp: 420ms;
    --s-dur-reveal: 700ms;
    --s-dur-copy-note: 2600ms;       /* how long a "link copied" note stays */
    --s-stagger: 80ms;
    --s-dur-clock: 1000ms;           /* the countdown's tick: one second */

    /* ---- Chrome ----------------------------------------------------------- */
    --s-z-skip: 1100;
    --s-z-nav: 900;
    --s-z-menu: 950;
    --s-z-lift: 2;
    --s-z-top: 4;
    --s-focus-w: 3px;
    --s-focus-offset: 3px;
    --s-anchor-offset: calc(var(--s-nav-h) + var(--s-space-l));
    --s-first-frame: calc(100svh - var(--s-ribbon-h) - var(--s-strip-h) - var(--s-nav-h));
    --s-first-frame-min: 600px;
    --s-first-frame-max: 1040px;
    --s-arrow-w: 34px;
    --s-arrow-head: 9px;
    --s-outline-name: 2px;
    --s-amount-w: 92px;
    --s-mark-dot: 30px;
    --s-gauge-h: 4px;
    --s-wobble-deg: 0.6deg;
    --s-strip-art: 300px;
    --s-mq-reduce: (prefers-reduced-motion: reduce);

    /* ---- Breakpoints (read by JS with matchMedia, and by the CSS) --------- */
    --s-mq-phone: (max-width: 719px);
    --s-mq-wide: (min-width: 1080px);

    /* ---- Reveal thresholds ------------------------------------------------ */
    --s-io-press: 0.38;
    --s-io-reveal: 0.18;
}