/* Skreenquip design tokens. Every colour, type family, type size and spacing
   value used by the site lives here, so the look can be swapped by editing
   this file only. Source of the base red and charcoal: Chris's Figma frame
   78:67 (file ETWMZaIzYbwgd3AbyKfeEh). Deep tones follow Chris's rule: raise
   saturation and lower lightness together. */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/static/fonts/barlow-condensed-800.woff2") format("woff2");
}
/* General Sans (round 4, replaces Inter). Indian Type Foundry, via
   Fontshare: https://www.fontshare.com/fonts/general-sans, downloaded
   2026-10-08 from https://api.fontshare.com/v2/fonts/download/general-sans.
   The official variable WOFF2, unmodified (the ITF Free Font License forbids
   subsetting or converting it). Licence: static/fonts/GeneralSans-LICENSE-FFL.txt */
@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/static/fonts/GeneralSans-Variable.woff2") format("woff2");
}

:root {
  /* Colour: brand */
  --c-red: #d0021b;            /* action only: primary buttons, price, phone, links on hover */
  --c-red-deep: #9e0013;       /* red, saturation up and lightness down */
  --c-red-deepest: #6a000c;    /* one more step down, rentals band only */
  --c-logo-red: #cd0e1b;       /* exact fill of Chris's logo vector */
  --c-charcoal: #222222;       /* Chris's frame */
  --c-charcoal-deep: #121416;  /* charcoal, saturation up and lightness down */
  --c-yellow: #fcc000;         /* small accents only: the ticker (round 8) */
  --c-red-on-dark: #ff7a7f;    /* red placeholders on charcoal (5.9:1 on #222) */

  /* Colour: neutrals (from Chris's frame) */
  --c-white: #ffffff;
  --c-paper: #f4f4f2;
  --c-stone: #e6e6e3;
  --c-rule: #bdbdba;
  --c-muted: #5f5f5c;          /* AA on paper and stone */
  --c-tile: #f4f4f2;           /* stat tiles on white cards */
  --c-on-dark-soft: #c9c4bb;   /* ticker text: softer than white on charcoal (9.6:1) */
  --c-grey-warm: #a29d94;      /* rocks (unused on Home) */
  --c-grey-warm-light: #c9c4bb;/* rocks (unused on Home) */
  --c-steel: #6f6b64;          /* illustration frames */
  --c-steel-dark: #3b3a37;     /* illustration tracks and rollers */

  /* Colour: translucent helpers */
  --c-line-inverse: rgba(255, 255, 255, 0.16);
  --c-line-inverse-strong: #6f6b64;  /* round 12 (CD r11): opaque, the last translucent line on the page is gone */
  /* Round 8: steel-frame linework. Solid, fully opaque, 2px, warm grey;
     frames blocks, never runs edge to edge, square corner brackets instead
     of nodes. #a29d94 is --c-grey-warm: 5.9:1 on charcoal, 2.7:1 on white
     (decorative outline; the card content identifies the card). */
  --c-frame: #a29d94;
  --c-frame-strong: #6f6b64;   /* --c-steel: a framed card's hover edge */
  --frame-w: 2px;
  /* Round 10: the corner brackets are removed site-wide (Chris), so their tokens are gone. */
  /* Opaque stand-in for the old 16% white rules on charcoal (ticker divider,
     team list): visually the same, but not a low-opacity hairline. */
  --c-rule-on-dark: #3b3a37;   /* --c-steel-dark */
  /* Round 8: the carousel container. --c-paper (#f4f4f2) mixed 25% toward
     --c-grey-warm-light (#c9c4bb): a warm stone, so white cards read on it. */
  --c-stone-warm: #e9e8e4;
  /* a woven-wire mesh, about 3% darker (over-wires 3.5%, under-wires under 2%) than the stone, tiled under the cards */
  --mesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23222222' stroke-opacity='0.035' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M1 3h4M7 9h4M3 7v4M9 1v4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23222222' stroke-opacity='0.018' stroke-width='1.5'%3E%3Cpath d='M7 3h4M1 9h4M3 1v4M9 7v4'/%3E%3C/g%3E%3C/svg%3E");
  --mesh-size: 12px;
  /* Round 11: thin red linework, full bleed (Chris: "the line work could
     be a bit thinner and we use the red. Show me the linework full bleed").
     1px. Brand red on the light sections (5.7:1 on white, 5.1:1 on paper);
     a brighter step of the same red on charcoal, where #d0021b only makes
     2.8:1 (#f0233a: 3.8:1 on #222, 4.4:1 on the deep end of the gradient). */
  --line-w: 1px;
  --c-line: var(--c-red);
  --c-line-on-dark: #f0233a;
  /* Round 11: one colour field per machine section (Chris: "We need a
     splash of colour somewhere"), each a step down from a brand colour with
     saturation kept up as lightness drops, so it reads rich, not pastel.
     New: an ochre from Anaconda yellow (#fcc000 is oklch 0.84 0.17 86;
     the ochre is oklch 0.58 0.125 71, about as much chroma as sRGB holds at
     that lightness). Used: a Skreenquip red-oxide (oklch 0.48 0.14 37),
     clay rather than the brand red, so it never reads as a button. White on
     ochre 4.4:1, white on red-oxide 7.1:1. */
  --c-field-ochre: #a86c00;
  --c-field-oxide: #9c3615;
  /* Round 12 (Chris, Oct 9, after the CD review): the Used field is warm
     graphite by default (oklch 0.31 0.006 70), lines on it #f0233a. Red-oxide
     (?used=oxide) and petrol (?used=petrol) stay for comparison only. */
  --c-field-graphite: #33312e;
  --c-field-petrol: #1f3a44;
  --c-field-used: var(--c-field-graphite);
  /* Round 12: ONE stroke weight (Chris, Oct 9: "essentially the same stroke
     thickness for the whole site and landing pages"). Every outline and
     divider is 1px (--line-w) in one of two colours: the hairline (dividers,
     rules, card and panel outlines at rest) and the charcoal outline
     (controls: secondary buttons, inputs, option pills, menu toggle, and a
     card's hover edge). Red lines are the linework (--c-line). */
  --c-hairline: #c9c4bb;
  --c-outline: #222222;
  /* the woven-wire mesh, a touch stronger so it still shows on the dark fields */
  --mesh-on-colour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23121416' stroke-opacity='0.045' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M1 3h4M7 9h4M3 7v4M9 1v4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23121416' stroke-opacity='0.022' stroke-width='1.5'%3E%3Cpath d='M7 3h4M1 9h4M3 1v4M9 7v4'/%3E%3C/g%3E%3C/svg%3E");
  --c-scrim: rgba(18, 20, 22, 0.64);
  --c-ground-shadow: rgba(18, 20, 22, 0.28);

  /* Surfaces: subtle monochrome gradients, large surfaces only */
  --grad-red: linear-gradient(160deg, var(--c-red) 0%, var(--c-red-deep) 100%);
  --grad-red-deep: linear-gradient(160deg, var(--c-red-deep) 0%, var(--c-red-deepest) 100%);
  --grad-charcoal: linear-gradient(160deg, var(--c-charcoal) 0%, var(--c-charcoal-deep) 100%);
  --texture: url("/static/img/noise-160.png");
  --texture-size: 160px;
  --texture-opacity: 0.16;

  /* Type (round 4). Two faces, one rule: Barlow Condensed 800 caps ONLY for
     the hero H1, machine model names, the New and Used equipment heads, the
     signature names and lines, and the contact phone number. Everything
     else is General Sans, sentence case. Normal body scale. */
  --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, Impact, sans-serif;
  --f-body: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* display moments (Barlow) */
  --fs-display: clamp(48px, 5.45vw, 78px);     /* hero H1 (round 11: about 8% larger, was clamp(48px, 5vw, 72px)) */
  --fs-display-2: clamp(40px, 4.4vw, 64px);    /* New / Used equipment heads */
  --fs-card-title: 44px;                       /* machine model on cards (round 5, was 56) */
  --fs-qv-title: 40px;                         /* machine model in quick view */
  --fs-phone-display: 28px;                    /* contact phone number (round 11: a normal emphasis size, was 40) */
  --fs-sign: 24px;                             /* signature name and line */
  --fs-sign-compact: 20px;                     /* compact signature (round 5) */
  /* text face (General Sans) */
  --fs-h2: clamp(24px, 2.2vw, 32px);           /* every other section head */
  --fs-h2-xl: clamp(32px, 3.4vw, 48px);        /* round 7: the screen-grid head and the red closing band */
  --fs-stat: clamp(72px, 7.2vw, 104px);        /* round 7: the one stat numeral (Barlow) */
  --fs-h3: 24px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 13px;                            /* photo placeholder labels, form labels */
  --fs-micro: 12px;                            /* chips, legal */
  --fs-nav: 16px;                              /* round 6: Barlow 700 caps again (rounds 2 and 3) */
  --fs-nav-menu: 24px;                         /* the phone menu, Barlow caps */
  --track-nav: 0.04em;
  --fs-button: 15px;                            /* round 12 (CD r11 item 4): was 14 */
  --fs-button-lg: 16px;                        /* footer buttons (round 6) */
  --fs-price: 20px;
  --lh-tight: 0.92;                            /* round 12 (CD r11): descenders clear the next line */
  --lh-head: 1.15;
  --lh-body: 1.5;
  --lh-snug: 1.35;
  --track-head: -0.01em;
  --track-caps: 0.08em;                        /* 12px tracked caps (chips) */
  --track-display: 0;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  /* Motion (round 4). Functional only: it explains something or gives
     feedback. Never linear or the default `ease` (the ticker's constant
     crawl is the one linear, by nature). Transform and opacity only. Exits
     are faster than entrances. All of it is off under reduced motion. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* entrances, settles, returns */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* things that leave while staying (header hide) */
  --ease-exit: cubic-bezier(0.4, 0, 0.2, 1);      /* exits: leave at once, land soft (no lingering) */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* soft overshoot, the Learn more arrow only */
  --dur-fast: 160ms;     /* exits, small feedback */
  --dur-settle: 200ms;   /* the photo settle on hover (spec) */
  --dur-base: 240ms;     /* entrances: dropdown, quick view, pill, arrow */
  --dur-slow: 400ms;     /* larger travel: header return, carousel step, section reveal */
  --stagger: 60ms;       /* section reveal, per item, max */
  /* Round 8: gentler, heavier (Chris: "too snappy", "stiff and quick",
     "no mass"). Supersedes round 3's instant hovers. */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);    /* hover and focus fades, press release: a soft ease-out */
  --dur-hover: 320ms;    /* hover and focus colour on text links (buttons use --dur-button-*) */
  --dur-press: 160ms;    /* a card going down */
  --dur-release: 280ms;  /* a card or arrow nudge coming back */
  /* Round 10 (Chris: "Hover is too quick. I want slow and smooth button
     interaction"). Every button and CTA (.btn, the carousel keys, the
     ways-in pills, the quick view pill and close): hover and focus come in
     slowly on a soft ease-out, leave a little faster, and a press goes
     down at once so it still feels responsive. */
  --ease-button: var(--ease-out);  /* cubic-bezier(0.22, 1, 0.36, 1) */
  --dur-button-in: 520ms;   /* hover and focus in: colour, background, border, shadow, lift */
  --dur-button-out: 400ms;  /* hover and focus out */
  --dur-button-press: 120ms; /* press down: immediate, then it eases back up on --dur-button-in */
  --button-lift: -1px;       /* hover: the key rises a touch */
  --button-sink: 1px;        /* press: the key sinks */
  --card-lift: -4px;         /* machine cards rise on hover */
  --dur-card-press: 200ms;
  --card-press-scale: 0.985;
  --dur-nudge: 320ms;    /* the Learn more and button arrows */
  --nudge: 4px;
  --dur-glide: 680ms;    /* carousel arrows and keys: one eased tween on --ease-out */
  --dur-glide-min: 560ms;  /* drag release: the shortest settle */
  --dur-glide-max: 1200ms; /* drag release: the longest coast */
  --inertia-tau: 480ms;  /* drag release: the friction time constant (how far a flick coasts) */
  --dur-spring-back: 560ms; /* rubber band at the ends */
  --rise: 16px;          /* section reveal distance */
  --rise-sm: 8px;        /* dropdown and dialog rise */

  /* Spacing: 8px grid (4 only inside small components) */
  --s-half: 4px;
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-16: 128px;

  /* Layout */
  --page-max: 1280px;
  /* Round 10 hero: the J12 render drawn wider than the type, rising into
     the H1 by a share of its own width (so the overlap holds at every
     desktop width), the body and buttons a clear gap beneath it. The H1
     keeps a paper keyline where it crosses the machine. */
  /* Round 11: the render a little smaller (was min(1104px, 77vw)) so the
     body and buttons sit higher, rising further into the H1,
     and moved left so the machine's visual mass (the yellow body, whose
     alpha-weighted centroid is at 68.3% of the render's width) sits a
     little right of the page centre instead of far right of it. */
  --hero-render-w: min(1056px, 73vw);
  --hero-rise: 0.24;                /* share of the render width it rises into the H1 (round 10: 0.18) */
  --hero-mass-x: 0.683;             /* the yellow body's centroid, as a share of the render width (measured) */
  --hero-mass-offset: var(--s-5);   /* where that centroid sits: 40px right of the page centre */
  --hero-render-gap: var(--s-4);    /* render to body */
  --hero-halo: 4px;                 /* H1 keyline stroke; half of it (2px) shows outside the letters (round 11, was 10) */
  --hero-shadow-opacity: 0.72;      /* ground shadow strength (uses --c-ground-shadow) */
  --hero-pad-top: var(--s-16);      /* 128: header to H1 (round 10: 112), so the conveyor tip stays 16px clear of the header */
  --gutter: var(--s-10);
  --header-main-h: 72px;       /* round 6: was 88 (Chris: "the nav feels too tall") */
  /* Corners, one rule (round 4): square everywhere (cards, buttons, media,
     menus, dialogs, inputs, tiles). Round ONLY for pills, chips and the
     small round carousel arrow buttons. */
  --radius: 0;
  --radius-pill: 999px;
  --control-h-lg: 56px;        /* footer buttons (round 6) */
  --control-h: 48px;
  --control-h-md: 40px;
  --control-h-sm: 32px;
  --arrow-size: 40px;
  --icon: 16px;                /* arrow icons */
  --chip-h: 24px;
  /* Round 12 (Chris, Oct 9): every pill becomes a chip "so they look less
     like buttons": 24px labels, 28px when the chip is a control, a 4px
     corner, a quiet tonal fill or a 1px hairline, the nav's caps voice. */
  --chip-h-control: 28px;
  --radius-chip: 4px;
  --fs-chip: 14px;
  --portrait: 64px;            /* signature portraits, 1:1 */
  --progress-h: 2px;
  --hairline: var(--line-w) solid var(--c-hairline);
  --focus: 3px solid var(--c-charcoal);
  --focus-inverse: 3px solid var(--c-yellow);
  --shadow-dialog: 0 24px 64px rgba(18, 20, 22, 0.32);
  --shadow-header: 0 1px 0 rgba(18, 20, 22, 0.08), 0 8px 24px rgba(18, 20, 22, 0.16), 0 24px 48px rgba(18, 20, 22, 0.12);
  /* Round 10: a physical, analogue feel (Chris: "make the site more
     analogue, buttons and feel... the cards have drop shadow and feel more
     3D"). Warm-tinted shadows (a brown-black, not grey-blue), each a tight
     contact shadow plus a wider soft ambient. Every set has the same layer
     count and order so one state eases into the next. */
  --shadow-rgb: 52, 40, 30;
  --shadow-card-raised: 0 1px 2px rgba(var(--shadow-rgb), 0.14), 0 4px 8px rgba(var(--shadow-rgb), 0.08), 0 12px 24px rgba(var(--shadow-rgb), 0.08);
  --shadow-card-lifted: 0 2px 4px rgba(var(--shadow-rgb), 0.12), 0 8px 16px rgba(var(--shadow-rgb), 0.10), 0 20px 36px rgba(var(--shadow-rgb), 0.14);
  --shadow-raised: 0 1px 0 rgba(var(--shadow-rgb), 0.28), 0 2px 6px rgba(var(--shadow-rgb), 0.14), inset 0 0 0 rgba(var(--shadow-rgb), 0);
  --shadow-lifted: 0 2px 0 rgba(var(--shadow-rgb), 0.24), 0 6px 14px rgba(var(--shadow-rgb), 0.18), inset 0 0 0 rgba(var(--shadow-rgb), 0);
  --shadow-pressed: 0 0 0 rgba(var(--shadow-rgb), 0), 0 1px 2px rgba(var(--shadow-rgb), 0.12), inset 0 2px 3px rgba(var(--shadow-rgb), 0.24);
  /* the carousel keys sit flush in the frame: a darker bottom edge at rest,
     a deeper one on hover, a top inset when pressed */
  --shadow-key-raised: inset 0 -2px 0 rgba(var(--shadow-rgb), 0.10), inset 0 0 0 rgba(var(--shadow-rgb), 0);
  --shadow-key-lifted: inset 0 -3px 0 rgba(var(--shadow-rgb), 0.22), inset 0 0 0 rgba(var(--shadow-rgb), 0);
  --shadow-key-pressed: inset 0 0 0 rgba(var(--shadow-rgb), 0), inset 0 3px 6px rgba(var(--shadow-rgb), 0.28);
  --key-w: 56px;              /* full-height carousel keys */
  /* Round 11: the same raised key on the black footer, where a warm
     brown-black shadow disappears: a deeper black edge, same layer order */
  --shadow-raised-dark: 0 1px 0 rgba(0, 0, 0, 0.56), 0 2px 6px rgba(0, 0, 0, 0.40), inset 0 0 0 rgba(0, 0, 0, 0);
  --shadow-lifted-dark: 0 2px 0 rgba(0, 0, 0, 0.56), 0 6px 14px rgba(0, 0, 0, 0.48), inset 0 0 0 rgba(0, 0, 0, 0);
  --shadow-pressed-dark: 0 0 0 rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0.32), inset 0 2px 3px rgba(0, 0, 0, 0.48);
  --shadow-card: 0 1px 2px rgba(18, 20, 22, 0.06), 0 8px 24px rgba(18, 20, 22, 0.06);
  --shadow-card-hover: 0 1px 2px rgba(18, 20, 22, 0.08), 0 12px 32px rgba(18, 20, 22, 0.12);
  --shadow-pill: 0 1px 2px rgba(18, 20, 22, 0.12), 0 4px 12px rgba(18, 20, 22, 0.12);
  --shadow-menu: 0 1px 2px rgba(18, 20, 22, 0.08), 0 16px 40px rgba(18, 20, 22, 0.16);
}

@media (max-width: 1100px) {
  :root { --gutter: var(--s-5); }
}
@media (max-width: 640px) {
  :root {
    --gutter: var(--s-2);
    --header-main-h: 64px;
    --fs-card-title: 40px;
    --fs-qv-title: 36px;
  }
}

/* =====================================================================
   Round 13 (2026-10-09): the landing page's standards, copied (not
   imported) from featured-2026-10/src/css/tokens.css rounds 3 and 4.
   ===================================================================== */
:root {
  /* the page white, warmed about 3%: charcoal on it 15.1:1, muted 6.1:1, red 5.4:1 */
  --c-page: #fbf9f5;
  /* the alternate band (warm slate) and the nav: muted on it 5.5:1 */
  --c-page-alt: #f0eee8;
  /* card edge on graphite (a #222 edge would be 1.2:1 there; this is 7.5:1) */
  --c-card-edge: #c9c4bb;
  /* one stroke for every outline */
  --stroke-w: 1px;
  --c-stroke: var(--c-charcoal);
  --stroke: var(--stroke-w) solid var(--c-stroke);
  /* chips, not pills: 4px corner, quiet 7% charcoal fill */
  --chip-radius: 4px;
  --c-chip-quiet: rgba(34, 34, 34, 0.07);
  --c-chip-quiet-inverse: rgba(255, 255, 255, 0.16);
  /* a press darkens the button's current colour */
  --press-darken: brightness(0.86);
}

/* =====================================================================
   Round 14 (2026-10-14): the landing page's type scale, exactly (Chris:
   "The home page should follow the landing page conventions exactly where
   it can"). Copied, not imported, from featured-2026-10/dist/css/tokens.css
   (round 2 item 11, the 0.9 cut; round 4.2 titles). Round 13 value in
   brackets. Floors: nothing under 12px. Spacing is not scaled.
   See RECONCILE-r14.md for every difference and its decision.
   ===================================================================== */
:root {
  --fs-display-2: clamp(36px, 3.96vw, 57.6px);  /* [clamp(40px, 4.4vw, 64px)] New and Used heads, page heads */
  --fs-card-title: 39.6px;                      /* [44] */
  --fs-qv-title: 36px;                          /* [40] */
  --fs-h2: clamp(21.6px, 1.98vw, 28.8px);       /* [clamp(24px, 2.2vw, 32px)] the landing's x 0.9 rule */
  --fs-h2-xl: clamp(28.8px, 3.06vw, 43.2px);    /* [clamp(32px, 3.4vw, 48px)] the CTA card title */
  --fs-h3: 21.6px;                              /* [24] */
  --fs-lead: 16.2px;                            /* [18] */
  --fs-body: 14.4px;                            /* [16] */
  --fs-small: 12.6px;                           /* [14] */
  --fs-label: 12px;                             /* [13] */
  --fs-micro: 12px;                             /* [12] */
  --fs-nav: 14.4px;                             /* [16] nav links, the ticker (the landing's dateline) */
  --fs-button: 12.6px;                          /* [15] (every .btn is pinned to 16px in site.css, as the landing) */
  --fs-button-lg: 14.4px;                       /* [16] */
  --fs-price: 18px;                             /* [20] the quick view price */
  --lh-tight: 0.9;                              /* [0.92] */
  /* machine titles (landing round 4.2, default mode: the make stays out of display type) */
  --fs-ftitle: clamp(44px, 4.4vw, 64px);        /* unit and model page title [clamp(56px, 6.1vw, 88px)] */
  --fs-ctitle: 28px;                            /* card title [44 via --fs-card-title] */
  /* the landing nameplate, used for the Home H1 */
  --np-em: 6.1;
  --np-scale: 0.56;
}
@media (max-width: 640px) {
  :root {
    --fs-card-title: 36px;                      /* [40] */
    --fs-qv-title: 32.4px;                      /* [36] */
  }
}

/* =====================================================================
   Round 17 (2026-10-17): review options for the New field.
   Skreenquip's warm yellow is --c-yellow (#fcc000): Anaconda's own site
   accent, warmer than the machine paint (Chris, Sept 18: yellow comes in
   globally, warmer than the machines). Round 18: the yellow tint option
   (--c-sq-yellow-tint) was rejected and removed.
   ===================================================================== */
/* Round 19 (Chris, Oct 17): the New field is plain; the ?texture= options and their tiles are gone. */

/* =====================================================================
   Round 18 (2026-10-17): the PUSH button, site-wide on the solid variants.
   Each face sits on a solid base a darker step of its own colour; the
   footprint stays the control height (face = height minus the base).
   Dealer (Chris: "more contrast in the black on yellow version in the
   stroke or it's invisible"): the face lightens to --c-steel-dark #3b3a37
   (white label 11.4:1) on a black base (#000, 1.85:1 against the face,
   12.7:1 against the yellow).
   ===================================================================== */
:root {
  --push-base: 4px;
  --push-hover: 2px;
  --tag-base: 3px;
  --c-dealer-face: var(--c-steel-dark);
  --c-dealer-base: #000000;
}