/*
 * Quennell Hand & Wrist: design tokens. Every colour, typeface, size, weight, duration, easing,
 * breakpoint and stroke on the site lives here; site.css, home.css, pages.css and the scripts only
 * reference these (--s-*). JS reads them through getComputedStyle.
 *
 * Ground: warm bone paper, plain and clinical-warm (no texture beyond a 3% grain).
 * Ink: blue-black. Violet is a SURGICAL MARKER: marks, focus and the primary button only.
 */
@font-face {
    font-family: "Red Hat Display";
    src: url("fonts/redhatdisplay-latin-var.woff2") format("woff2");
    font-weight: 600 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("fonts/atkinson-next-latin-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("fonts/atkinson-next-italic-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    /* ── palette ── */
    --s-bone: #f3eee4;              /* ground */
    --s-bone-deep: #ebe4d6;         /* a step down: the index and the week grid */
    --s-paper: #fbf8f2;             /* the referral letter and form fields */
    --s-ink: #1d1f2b;               /* text, the drawing's contour (15.2:1 on bone) */
    --s-ink-soft: #2a2d3c;          /* the inverted journey band's raised panel */
    --s-muted: #5b5d6b;             /* secondary text (5.7:1 on bone, 5.3:1 on bone-deep) */
    --s-rule: #d8d0c0;              /* hairlines */
    --s-rule-strong: #b9ad98;       /* the bones under the skin: strokes only, never text */
    --s-marker: #7b4ae2;            /* ONLY: marks, focus, the primary button (5.0:1 on bone) */
    --s-marker-ink: #ffffff;        /* text on the marker fill (5.8:1) */
    --s-marker-deep: #5f2fc4;       /* the primary button pressed */
    --s-marker-on-ink: #b69cf5;     /* a mark on the ink band (7.4:1 on ink) */
    --s-wash: #ebe4fb;              /* the consult note card */
    --s-wash-line: #d6c9f6;         /* the note's ruled lines */
    --s-on-ink: #f3eee4;            /* text on the ink band */
    --s-on-ink-muted: #b4b2bd;      /* secondary text on the ink band (8.6:1) */
    --s-on-ink-rule: #454859;       /* hairlines on the ink band */
    --s-error: #a3282c;             /* form errors only (6.7:1 on paper) */
    --s-veil: #1d1f2b66;            /* behind the phone sheets */
    --s-nav-bg: #f3eee4;
    --s-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>");
    --s-grain-alpha: 0.03;

    /* ── type ── */
    --s-font-display: "Red Hat Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --s-font-body: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --s-size-wordmark: clamp(3.4rem, min(9.4vw, 15svh), 9rem);
    --s-size-wordmark-2: clamp(1.3rem, min(2.5vw, 4svh), 2.3rem);
    --s-size-line: clamp(1.45rem, min(2.6vw, 4.2svh), 2.4rem);
    --s-size-h1: clamp(2.4rem, 5vw, 4.6rem);
    --s-size-h2: clamp(2rem, 3.9vw, 3.6rem);
    --s-size-h3: clamp(1.3rem, 1.8vw, 1.6rem);
    --s-size-h2-tap: clamp(1.9rem, 2.7vw, 2.6rem);
    --s-size-lede: clamp(1.08rem, 1.3vw, 1.25rem);
    --s-size-body: 1.0625rem;
    --s-size-small: 0.9375rem;
    --s-font-figures: var(--s-font-display);   /* times and figures in tables */
    --s-figures-features: "tnum" 1, "zero" 0;
    --s-size-micro: 0.875rem;       /* type floor: nothing informational below 14px */
    --s-size-marklabel: 26px;       /* the plate's lettered mark, in drawing units (about 14px on a phone) */
    --s-label-halo: 7px;            /* paper behind a lettered mark, so it reads over the drawing */
    --s-size-marktag: 18px;         /* 'mark 1' above it, decorative: the place name carries the meaning */
    --s-size-fig: clamp(2.4rem, min(4vw, 6.4svh), 3.6rem);
    --s-size-dial: clamp(2.8rem, 5vw, 4.4rem);
    --s-size-index-letter: clamp(2.6rem, 4vw, 3.6rem);
    --s-size-margin: clamp(1rem, 1.25vw, 1.15rem);
    --s-weight-display: 800;
    --s-weight-semi: 600;
    --s-weight-body: 400;
    --s-weight-strong: 700;
    --s-leading-display: 0.86;
    --s-leading-tight: 1.06;
    --s-leading-snug: 1.25;
    --s-leading-body: 1.6;
    --s-track-display: -0.045em;
    --s-track-h2: -0.03em;
    --s-track-label: 0.06em;
    --s-measure: 34rem;
    --s-measure-wide: 44rem;
    --s-measure-narrow: 24rem;

    /* ── space + layout ── */
    --s-gutter: clamp(16px, 4vw, 56px);
    --s-max: 1440px;
    --s-section: clamp(80px, 10vw, 152px);
    --s-space-3xs: 4px;
    --s-space-2xs: 8px;
    --s-space-xs: 12px;
    --s-space-s: 16px;
    --s-space-m: 24px;
    --s-space-l: 32px;
    --s-space-xl: 48px;
    --s-space-2xl: 72px;
    --s-nav-h: 72px;
    --s-nav-h-sm: 60px;
    --s-hit: 44px;                  /* every touch target */
    --s-radius: 2px;                /* the button and the only radius on the site */
    --s-note-w: 34rem;
    --s-locator-col: minmax(0, 0.9fr);
    --s-locator-h: min(68svh, 600px);   /* Plate 2 on the conditions page */
    --s-locator-h-phone: 64svh;
    --s-step-icon: 72px;            /* the visit page's drawn step icons */
    --s-step-icon-sm: 52px;
    --s-sheet-h: 50svh;             /* the consult sheet on phones: the hand stays visible above it */
    --s-sheet-shadow: 0 -1px 0 var(--s-ink);
    --s-sheet-room: 0.25;           /* the marked place is scrolled to this fraction of the viewport */
    --s-plate-crop-w: 70vw;
    --s-glyph: 44px;
    --s-dial: clamp(220px, 24vw, 330px);
    --s-dial-sm: 190px;
    --s-z-nav: 40;
    --s-z-sheet: 60;
    --s-z-spots: 2;
    --s-tilt-note: -1.6deg;         /* the handwritten margin notes */
    --s-tilt-note-alt: 1.2deg;

    /* ── the marker-outline button: a 2px ink outline sits 4px behind the violet fill ── */
    --s-btn-offset: 4px;
    --s-btn-border: 2px;
    --s-btn-pad-y: 14px;
    --s-btn-pad-x: 22px;

    /* ── the drawing: strokes in viewBox units ── */
    --s-stroke-contour: 2.4;
    --s-stroke-crease: 1.3;
    --s-stroke-bone: 1.1;
    --s-stroke-mark: 4.2;
    --s-stroke-surgical: 6.6;       /* the plate's marks: a surgeon's marker, not a pen */
    --s-stroke-roundel: 1.2;
    --s-stroke-bust: 2;
    --s-stroke-object: 1.6;
    --s-stroke-icon: 2.4;
    --s-stroke-glyph: 16;
    --s-stroke-map-road: 1.4;
    --s-dash-leader: 3 5;
    --s-spot-ring: 22px;

    /* ── motion ── */
    --s-dur-fast: 160ms;
    --s-dur-base: 280ms;
    --s-dur-note: 420ms;
    --s-dur-mark: 1100ms;           /* the marker stroke drawing on */
    --s-dur-label-delay: 760ms;     /* the label is lettered once the pen lifts */
    --s-dur-needle: 700ms;
    --s-dur-pulse: 2400ms;
    --s-dur-reveal: 700ms;
    --s-dur-spots-in: 500ms;
    --s-stagger-spots: 60ms;
    --s-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --s-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --s-ease-pen: cubic-bezier(0.55, 0.05, 0.25, 1);   /* a pen accelerates, then eases off */
    --s-ease-needle: cubic-bezier(0.3, 1.35, 0.5, 1);  /* a dial needle overshoots a touch */
    --s-reveal-shift: 18px;
    --s-note-shift: -20px;
    --s-pulse-scale: 2.6;
    --s-btn-press: 2px;

    /* ── page geometry (added with the stylesheets) ── */
    --s-ribbon-h: 34px;             /* the shared concept ribbon */
    --s-first-h: calc(100vh - var(--s-ribbon-h) - var(--s-nav-h));
    --s-first-h: calc(100svh - var(--s-ribbon-h) - var(--s-nav-h));
    --s-stage-h: calc(100vh - var(--s-nav-h));
    --s-stage-h: calc(100svh - var(--s-nav-h));
    --s-journey-run: 200svh;        /* the journey pins for exactly one screen of scroll */
    --s-plate-h: calc(100svh - var(--s-ribbon-h) - var(--s-nav-h) - 150px);   /* the drawing, leaving room for its title block */
    --s-plate-ratio: 640 / 768;     /* the drawing's viewBox */
    --s-chart-col: 45fr;
    --s-plate-col: 55fr;
    --s-bust-h: clamp(170px, 18vw, 250px);
    --s-stagger-y: 56px;            /* the contact sheet's dropped frames */
    --s-index-col: 22rem;
    --s-map-max: 560px;
    --s-glyph-sm: 36px;
    --s-hand-crop: 64vw;
    --s-hand-crop-h: 46svh;
    --s-focus-ring: 3px;
    --s-rule-w: 1px;
    --s-mark-w: 3px;                /* a marker underline in type */
    --s-ticket: 6px;                /* the urgency key marks */
    --s-dot: 10px;
    --s-wordmark-gap: 6px;
    --s-hover-lift: -2px;
    --s-stage-dim: 0.58;            /* stages still ahead in the journey (text stays legible) */
    --s-plate-elbow: 360px;         /* a condition page's elbow roundel */
    --s-index-col-sm: 10rem;        /* the register's region column */
    --s-nopage-w: 12rem;
    --s-step-when: 15rem;           /* the visit page's "when" column; the rail sits just inside it */

    /* ── numbers the scripts read ── */
    --s-bp-wide: 1024;              /* CSS media queries repeat this literally */
    --s-spot-observe: 0.35;         /* how much of the tap block shows before the spots appear */
    --s-phone-digits: 10;           /* a phone number has at least this many digits */
    --s-rail-read: 0.6;             /* the visit rail fills to this fraction down the screen */
}

/* Phones: a shorter nav, so every height that subtracts it follows. */
@media (max-width: 1023px) {
    :root {
        --s-nav-h: var(--s-nav-h-sm);
    }
}