/* ============================================================================
   RIPOSTE LABORATORIES INC. — BRAND STYLESHEET
   Single-file drop-in. Tokens + base + patterns.
   ----------------------------------------------------------------------------
   DOC NO. RL-BRAND-001   REV. A
   Source of truth: https://github.com/armeehn/riposte-brand

   Aesthetic: industrial spec-sheet x jester mi-parti.
   Ink on bone. Accents rotate pink -> orange -> teal. Radius 0. No blur. Ever.

   USAGE
     <link rel="stylesheet" href="riposte-brand.css">
     Optionally add data-theme="dark" or class="pinkfield" to any element.

   This file is generated-by-hand and hand-maintained. The modular sources in
   brand/tokens/*.css are the same values split by concern; if you edit one,
   run `node scripts/build-css.js` to check they still agree.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   00 · FONT
   One family, everywhere. JetBrains Mono carries chrome, labels, headlines and
   prose alike; the spec-sheet feel comes from one mono voice at three weights.
   Self-host from assets/fonts/ in production (see tools/web.md); the CDN import
   below is the zero-config path for prototypes and artifacts.
   ------------------------------------------------------------------------- */
/* SITE BUILD: the CDN @import from the upstream stylesheet is replaced here with
   the self-hosted subsets already served at /fonts/, so ripostelabs.xyz makes no
   third-party font request. The portable version (which does import from Google
   Fonts, for zero-config use elsewhere) lives at
   https://github.com/armeehn/riposte-brand/blob/main/brand/riposte-brand.css */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;
  src:url("/fonts/jetbrains-mono-latin.b058178d.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;
  src:url("/fonts/jetbrains-mono-latin-ext.e36841ed.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;
  src:url("/fonts/jetbrains-mono-vietnamese.ddf99e6e.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}

:root {
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular,
               Menlo, Consolas, "Liberation Mono", monospace;
  /* Back-compat alias. There is no second family: display text is mono too. */
  --font-display: var(--font-mono);
}

/* ---------------------------------------------------------------------------
   01 · COLOUR — the official values
   Base is ink on bone. The three accents are equal citizens and ROTATE
   (pink -> orange -> teal) across repeated elements; never pick a favourite.
   ------------------------------------------------------------------------- */
:root {
  /* Inks & papers */
  --ink:        #1d1a17;   /* near-black, warm. The line colour. */
  --ink-raised: #241f1b;   /* panel on an ink field */
  --ink-head:   #2b2723;   /* header fill on an ink field */
  --ink-line:   #5c554c;   /* dashed dividers on an ink field */
  --bone:       #f6f1e7;   /* paper */
  --bone-dim:   #eae4d6;   /* recessed paper */
  --white:      #ffffff;   /* hero field only — one per site */

  /* Mi-parti accents */
  --pink:   #f0477d;
  --orange: #fe9a0d;
  --teal:   #12b795;

  /* Deep accents — same hue and saturation, dropped in lightness until bone
     text on them clears WCAG AA 4.5:1. Use these whenever an accent fill has
     to carry BODY COPY. The bright three above are for fills, bars, chips and
     large display type only. See docs/07-accessibility.md. */
  --pink-deep:   #d81150;  /* bone on it = 4.53:1 */
  --orange-deep: #a15e01;  /* bone on it = 4.52:1 */
  --teal-deep:   #0c7a63;  /* bone on it = 4.69:1 */
  --teal-ink:    #04463a;  /* text on teal fills in diagrams; 9.60:1 on teal */

  /* Text-on-accent rules. Fixed. Never improvise. */
  --on-pink:   var(--bone);
  --on-orange: var(--ink);
  --on-teal:   var(--bone);
}

/* --- semantic layer, light (bone) context --------------------------------- */
:root {
  --bg: var(--bone);
  --surface: var(--bone);
  --surface-sunken: var(--bone-dim);
  --text: var(--ink);
  --text-muted: color-mix(in srgb, var(--ink) 65%, var(--bone));
  --text-faint: color-mix(in srgb, var(--ink) 55%, var(--bone));
  --line: var(--ink);          /* 2px rules take the current line colour */
  --line-dashed: var(--ink);   /* 1px dashed dividers */
  --accent: var(--pink);       /* working accent: bullets, arrows, .hi */
  --accent-contrast: var(--bone);
  --accent-text: var(--pink-deep); /* the accent when it must BE text on bone */
  --label-fill: var(--ink);    /* SEC.NN chips, spec headers */
  --label-ink: var(--bone);
  --ok: var(--teal);
  --warn: var(--orange);
  --danger: var(--pink);
  --focus-ring: var(--pink);
  --selection-bg: var(--pink);
  --selection-fg: var(--bone);
}

/* Explicit light scope — for bone islands nested inside dark subtrees */
[data-theme="light"], .light {
  --bg: var(--bone);
  --surface: var(--bone);
  --surface-sunken: var(--bone-dim);
  --text: var(--ink);
  --text-muted: color-mix(in srgb, var(--ink) 65%, var(--bone));
  --text-faint: color-mix(in srgb, var(--ink) 55%, var(--bone));
  --line: var(--ink);
  --line-dashed: var(--ink);
  --accent: var(--pink);
  --accent-contrast: var(--bone);
  --accent-text: var(--pink-deep);
  --label-fill: var(--ink);
  --label-ink: var(--bone);
  --focus-ring: var(--pink);
  --selection-bg: var(--pink);
  --selection-fg: var(--bone);
}

/* Ink inversion. Put data-theme="dark" (or .dark) on any element or section.
   The working accent flips pink -> teal: pink on ink is legal but teal reads
   better and keeps the dark field cooler. */
[data-theme="dark"], .dark {
  --bg: var(--ink);
  --surface: var(--ink-raised);
  --surface-sunken: var(--ink-head);
  --text: var(--bone);
  --text-muted: color-mix(in srgb, var(--bone) 62%, var(--ink));
  --text-faint: color-mix(in srgb, var(--bone) 45%, var(--ink));
  --line: var(--bone);
  --line-dashed: var(--ink-line);
  --accent: var(--teal);
  --accent-contrast: var(--bone);
  --accent-text: var(--teal);   /* 6.79:1 on ink — safe as text, no deepening */
  --label-fill: var(--teal);
  --label-ink: var(--bone);
  --focus-ring: var(--teal);
  --selection-bg: var(--bone);
  --selection-fg: var(--ink);
}

/* Pink field — full-colour sections (e.g. "Meet Esh"). Everything goes bone. */
[data-theme="pink"], .pinkfield {
  --bg: var(--pink);
  --surface: var(--pink);
  --surface-sunken: var(--ink);
  --text: var(--bone);
  --text-muted: color-mix(in srgb, var(--bone) 75%, var(--pink));
  --text-faint: color-mix(in srgb, var(--bone) 60%, var(--pink));
  --line: var(--bone);
  --line-dashed: var(--bone);
  --accent: var(--orange);
  --accent-contrast: var(--ink);
  --accent-text: var(--ink);
  --label-fill: var(--ink);
  --label-ink: var(--bone);
  --focus-ring: var(--ink);
  --selection-bg: var(--ink);
  --selection-fg: var(--bone);
}

/* A theme scope paints itself. Without this the blocks above only redefine the
   variables — the element keeps the page's background and inherits the page's
   text colour, so an ink field renders as ink-on-bone text over a bone page and
   every --surface card inside it goes dark-on-dark. */
[data-theme="light"], .light,
[data-theme="dark"],  .dark,
[data-theme="pink"],  .pinkfield {
  background: var(--bg);
  color: var(--text);
}

/* ---------------------------------------------------------------------------
   02 · TYPE SCALE
   Hierarchy comes from size + weight (400/700/800) + UPPERCASE + tracking.
   Tracking widens as type gets smaller and more "machine".
   ------------------------------------------------------------------------- */
:root {
  --text-xs:      10px;                      /* chip micro-labels */
  --text-label:   11px;                      /* kickers, spec headers, corner marks */
  --text-nav:     12px;                      /* nav, SEC chips, tags */
  --text-md:      14px;                      /* spec body, secondary prose */
  --text-body:    15px;                      /* prose (16px on the homepage) */
  --text-lead:    clamp(16px, 2vw, 19px);    /* lead paragraphs, usually 700 */
  --text-h3:      clamp(20px, 2.6vw, 30px);
  --text-h2:      clamp(24px, 3.2vw, 40px);
  --text-h1:      clamp(30px, 5vw, 54px);
  --text-display: clamp(30px, 6.6vw, 74px);  /* slide / hero statements */

  --leading-body: 1.55;
  --leading-tight: 1.15;
  --leading-display: 1.02;

  --tracking-display:  -.01em;  /* big statements tighten */
  --tracking-h:        .03em;   /* uppercase section headings */
  --tracking-nav:      .08em;   /* nav links, buttons */
  --tracking-label:    .1em;    /* chips, doc numbers */
  --tracking-tag:      .14em;   /* // slash tags, corner marks */
  --tracking-spec:     .16em;   /* spec-card headers, stamps */
  --tracking-kicker:   .3em;    /* pagehead kickers */
  --tracking-wordmark: .55em;   /* L A B O R A T O R I E S  I N C . */

  --weight-body:  400;
  --weight-bold:  700;
  --weight-black: 800;          /* deck headlines, stat numbers */
}

/* ---------------------------------------------------------------------------
   03 · SPACING
   A loose 2px grid lifted from the production site. Containers are
   viewport-capped so nothing ever touches the edge of a phone.
   ------------------------------------------------------------------------- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 34px;   /* column gap; space under a sechead */
  --space-7: 48px;
  --space-8: 64px;   /* section padding, subpages */
  --space-9: 72px;   /* section padding, homepage */

  --container:       1060px;  /* standard section: min(1060px, 92vw) */
  --container-wide:  1160px;  /* toc + content layouts: min(1160px, 94vw) */
  --container-prose:  900px;  /* blog / single column: min(900px, 92vw) */
  --measure: 66ch;            /* body max width; leads run 56-62ch */

  --gutter: 4vw;              /* min breathing room at any viewport */
}

/* ---------------------------------------------------------------------------
   04 · EFFECTS
   The system is DRAWN. Rules, flat fills, hard offsets. No blur, no glow, no
   gradients except the three functional patterns. Radius 0. Always.
   ------------------------------------------------------------------------- */
:root {
  --rule-w: 2px;
  --rule: 2px solid var(--line);                 /* the structural border */
  --rule-dashed: 1px dashed var(--line-dashed);  /* list rows, menu items */
  --bar-top: 6px;    /* accent top-border on cards and steps */
  --bar-left: 8px;   /* accent left-border on notes and pull quotes */

  --radius-0: 0;     /* sharp corners are the brand */

  /* Hard offset shadows. Pair with translate(-2px,-2px). */
  --shadow-pop-pink: 4px 4px 0 var(--pink);
  --shadow-pop-teal: 4px 4px 0 var(--teal);
  --shadow-pop-ink:  4px 4px 0 var(--ink);
  --shadow-stack:    8px 8px 0 var(--teal), 16px 16px 0 var(--pink); /* big CTAs only */

  /* Signature patterns */
  --checker:      repeating-conic-gradient(var(--ink) 0% 25%, var(--bone) 0% 50%);
  --checker-teal: repeating-conic-gradient(var(--teal) 0% 25%, var(--bone) 0% 50%);
  --checker-dark: repeating-conic-gradient(var(--teal) 0% 25%, var(--ink) 0% 50%);
  --checker-size: 22px;   /* tile; band height 26px = tile + 2 x 2px rule */
  --harlequin:      repeating-conic-gradient(from 45deg, var(--pink) 0% 25%, var(--teal) 0% 50%);
  --harlequin-size: 34px; /* tile; band height 38px */
  --triband: linear-gradient(105deg, var(--pink) 0 36%, var(--orange) 36% 64%, var(--teal) 64% 100%);

  --mark-drop: drop-shadow(5px 5px 0 rgba(234, 228, 214, .9)); /* hero mark only */
}

/* ---------------------------------------------------------------------------
   05 · MOTION
   Fast and mechanical. States swap like a signal flipping. No scroll-triggered
   fades, no parallax, no easing theatrics.
   ------------------------------------------------------------------------- */
:root {
  --dur-flick: 120ms;  /* colour swaps: nav, links, chips */
  --dur-snap:  150ms;  /* pops: CTA hover, arrow slide, caret rotate */
  --dur-move:  250ms;  /* progress bars, larger repositions */
  --ease-out: ease-out;
  --ease-linear: linear;
  --marquee-dur: 28s;
}

@keyframes rl-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------------
   06 · BASE
   Enough of a reset that a plain HTML document reads as Riposte on load.
   Scoped to elements only — no utility classes are clobbered.
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-h);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4, h5, h6 {
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-label);
}

p { margin: 0 0 var(--space-4); max-width: var(--measure); }

a {
  color: var(--accent-text);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: color var(--dur-flick) var(--ease-out),
              background var(--dur-flick) var(--ease-out);
}
a:hover { background: var(--accent); color: var(--accent-contrast); text-decoration: none; }

strong, b { font-weight: var(--weight-bold); }

/* Rules are 2px and never hairlines. */
hr {
  border: 0;
  border-top: var(--rule);
  margin: var(--space-6) 0;
}

/* Radius 0, everywhere. */
img, svg, video, canvas, input, textarea, select, button, table, fieldset {
  border-radius: var(--radius-0);
}
img, svg, video { max-width: 100%; height: auto; }

ul, ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-1); }

code, pre, kbd, samp { font-family: var(--font-mono); font-size: .92em; }
code { background: var(--surface-sunken); padding: 1px 5px; border: 1px solid var(--line); }
pre {
  background: var(--surface-sunken);
  border: var(--rule);
  padding: var(--space-4);
  overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; }

blockquote {
  margin: var(--space-5) 0;
  border-left: var(--bar-left) solid var(--pink);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  font-weight: var(--weight-bold);
  max-width: 60ch;
}

table { border-collapse: collapse; width: 100%; font-size: var(--text-md); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--rule-dashed); }
thead th {
  border-bottom: var(--rule);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-label);
}

button, input, textarea, select { font: inherit; color: inherit; }
button, .btn {
  background: transparent;
  border: var(--rule);
  color: var(--text);
  padding: var(--space-3) var(--space-5);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-nav);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur-snap) var(--ease-out);
}
button:hover, .btn:hover {
  background: var(--text);
  color: var(--bg);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-pop-pink);
}

input, textarea, select {
  background: var(--surface);
  border: var(--rule);
  padding: var(--space-2) var(--space-3);
}

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* ---------------------------------------------------------------------------
   07 · PATTERNS
   The site's recurring structures. Class names match production markup.
   All of these read semantic vars, so they survive .dark / .pinkfield.
   ------------------------------------------------------------------------- */

/* --- separator bands. Alternate flavours down a page; strips, never fields. */
.checker{height:26px;background:var(--checker) 0 0/var(--checker-size) var(--checker-size);border-top:var(--rule);border-bottom:var(--rule)}
.checker.teal{background:var(--checker-teal) 0 0/var(--checker-size) var(--checker-size)}
.dark .checker,[data-theme="dark"] .checker{background:var(--checker-dark) 0 0/var(--checker-size) var(--checker-size)}
.harlequin{height:38px;background:var(--harlequin) 0 0/var(--harlequin-size) var(--harlequin-size);border-top:var(--rule);border-bottom:var(--rule)}

/* --- page head banner (tri-band field) */
.pagehead{background:var(--triband);border-bottom:2px solid var(--ink);padding:56px 0 48px;color:var(--ink)}
.pagehead .inner{width:min(var(--container),92vw);margin:0 auto}
.pagehead h1{font-size:var(--text-h1);text-transform:uppercase;letter-spacing:.02em;margin:8px 0 0;line-height:var(--leading-tight)}
.pagehead p{max-width:62ch;margin:12px 0 0;font-size:14px}
.kicker{font-size:var(--text-label);letter-spacing:var(--tracking-kicker);text-transform:uppercase}

/* --- section head: SEC chip + title + right-aligned slash tag */
.sechead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:var(--rule);padding-bottom:14px;margin-bottom:34px}
.sechead .no{font-size:var(--text-nav);font-weight:700;letter-spacing:var(--tracking-label);background:var(--label-fill);color:var(--label-ink);padding:4px 10px}
.sechead.pinkno .no{background:var(--pink);color:var(--on-pink)}
.sechead.orangeno .no{background:var(--orange);color:var(--on-orange)}
.sechead.tealno .no{background:var(--teal);color:var(--on-teal)}
.sechead h2{font-size:var(--text-h2);text-transform:uppercase;letter-spacing:var(--tracking-h);margin:0;line-height:var(--leading-tight)}
.sechead .tag{margin-left:auto;font-size:var(--text-label);letter-spacing:var(--tracking-tag);opacity:.6;text-transform:uppercase}

/* --- spec card: header row + bulleted body */
.spec{border:var(--rule);background:var(--surface)}
.spec .spec-h{padding:8px 12px;font-size:var(--text-label);font-weight:700;letter-spacing:var(--tracking-spec);text-transform:uppercase;border-bottom:var(--rule);background:var(--surface-sunken);display:flex;justify-content:space-between;gap:8px}
.spec .spec-b{padding:16px 14px;font-size:var(--text-md)}
.spec ul{list-style:none;margin:0;padding:0}
.spec .spec-b ul{padding:0}
.spec>ul{padding:8px 14px 12px}
.spec li{padding:7px 0 7px 2.2ch;text-indent:-2.2ch;border-bottom:var(--rule-dashed)}
.spec li:last-child{border-bottom:none}
/* The marker is a fixed-width inline-block, so the gap survives (a trailing
   space inside a CSS unicode escape is eaten by the escape) and wrapped lines
   hang off the text edge instead of running back under the marker. */
.spec li::before{content:"\25B8";display:inline-block;width:2.2ch;text-indent:0;color:var(--accent);font-weight:700}
.spec.orangehead .spec-h{background:var(--orange);color:var(--on-orange)}
.spec.tealhead .spec-h{background:var(--teal);color:var(--on-teal)}
.spec.inkhead .spec-h{background:var(--ink);color:var(--bone)}

/* --- verdict card: yes / no / warn */
.verdict{border:var(--rule);font-size:13px;background:var(--surface)}
.verdict .v-h{padding:7px 11px;font-size:var(--text-label);font-weight:700;letter-spacing:var(--tracking-spec);text-transform:uppercase;border-bottom:var(--rule)}
.verdict.yes .v-h{background:var(--teal);color:var(--on-teal)}
.verdict.no .v-h{background:var(--pink);color:var(--on-pink)}
.verdict.warn .v-h{background:var(--orange);color:var(--on-orange)}
.verdict ul{list-style:none;margin:0;padding:10px 12px}
.verdict li{padding:7px 0 7px 2.2ch;text-indent:-2.2ch;border-bottom:var(--rule-dashed)}
.verdict li:last-child{border-bottom:none}
.verdict li::before{display:inline-block;width:2.2ch;text-indent:0;font-weight:700}
.verdict.yes li::before{content:"\2713";color:var(--teal)}
.verdict.no li::before{content:"\2715";color:var(--pink)}
.verdict.warn li::before{content:"!";color:var(--orange)}

/* --- flow: bordered steps + arrows, accent top-bars rotate */
.flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.flow .step{flex:1 1 150px;border:var(--rule);padding:16px 12px;text-align:center;font-size:var(--text-nav);letter-spacing:.06em;text-transform:uppercase;background:var(--surface);position:relative;margin-right:26px}
.flow .step:last-child{margin-right:0}
.flow .step::after{content:"\2192";position:absolute;right:-24px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:700;color:var(--accent)}
.flow .step:last-child::after{content:none}
.flow .step b{display:block;font-size:22px;margin-bottom:6px}
.flow .step:nth-child(4n+1){border-top:var(--bar-top) solid var(--pink)}
.flow .step:nth-child(4n+2){border-top:var(--bar-top) solid var(--orange)}
.flow .step:nth-child(4n+3){border-top:var(--bar-top) solid var(--teal)}
.flow .step:nth-child(4n){border-top:var(--bar-top) solid var(--line)}
@media(max-width:640px){
  .flow{gap:22px}
  .flow .step{flex:1 1 100%;margin-right:0}
  .flow .step::after{content:"\2193";right:50%;top:auto;bottom:-22px;transform:translateX(50%)}
}

/* --- chips, pills, stamps */
.chip{font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border:2px solid var(--line);white-space:nowrap;display:inline-block}
.chip.pink{background:var(--pink);color:var(--on-pink)}
.chip.orange{background:var(--orange);color:var(--on-orange)}
.chip.teal{background:var(--teal);color:var(--on-teal)}
.chip.ink{background:var(--label-fill);color:var(--label-ink);border-color:transparent}
.pill{border:var(--rule);padding:7px 12px;font-size:var(--text-nav);letter-spacing:.05em;text-transform:uppercase;display:inline-block}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.stamp{display:inline-block;padding:6px 12px;border:2px solid var(--orange);color:var(--orange);font-size:var(--text-label);font-weight:700;letter-spacing:var(--tracking-spec);text-transform:uppercase;transform:rotate(-2deg)}

/* --- note / pull quote: left accent bar */
.note{border:var(--rule);border-left:var(--bar-left) solid var(--orange);padding:14px 16px;font-size:var(--text-md);background:var(--surface-sunken)}
.note b{text-transform:uppercase;letter-spacing:var(--tracking-nav);font-size:var(--text-label);display:block;margin-bottom:4px}
.note a{font-weight:700}
.pull{border-left:var(--bar-left) solid var(--pink);padding:6px 0 6px 16px;font-weight:700;font-size:16px;max-width:60ch}

/* --- stat card */
.stat{border:var(--rule);background:var(--surface);padding:20px 18px}
.stat .n{font-size:clamp(26px,4vw,44px);font-weight:800;line-height:1;letter-spacing:-.02em}
.stat .n.pink{color:var(--pink)}.stat .n.orange{color:var(--orange)}.stat .n.teal{color:var(--teal)}
.stat .l{font-size:var(--text-nav);letter-spacing:.06em;text-transform:uppercase;margin-top:12px;opacity:.8;line-height:1.5}

/* --- partner / info card with rotating top bar */
.partner{border:var(--rule);padding:16px;background:var(--surface)}
.partner:nth-child(4n+1){border-top:var(--bar-top) solid var(--pink)}
.partner:nth-child(4n+2){border-top:var(--bar-top) solid var(--orange)}
.partner:nth-child(4n+3){border-top:var(--bar-top) solid var(--teal)}
.partner:nth-child(4n){border-top:var(--bar-top) solid var(--line)}

/* --- marquee ticker */
.marquee{overflow:hidden;white-space:nowrap;background:var(--ink);color:var(--bone);border-bottom:2px solid var(--ink);font-size:13px;text-transform:uppercase;letter-spacing:.18em;padding:9px 0}
.marquee .track{display:inline-block;animation:rl-marquee var(--marquee-dur) linear infinite}
.marquee .track span{margin:0 1.4em}
.marquee .c1{color:var(--pink)}.marquee .c2{color:var(--orange)}.marquee .c3{color:var(--teal)}
.marquee .r{color:var(--ink);background:var(--orange);padding:0 .4em}

/* --- block CTAs */
.bigmail{display:block;padding:26px 18px;border:var(--rule);text-align:center;text-decoration:none;font-size:clamp(15px,2.6vw,24px);font-weight:700;letter-spacing:.04em;transition:all var(--dur-snap);background:var(--surface);overflow-wrap:anywhere}
.bigmail:hover{background:var(--ink);color:var(--bone);box-shadow:var(--shadow-stack)}
.cta{display:inline-block;padding:14px 30px;border:2px solid var(--line);color:var(--text);text-decoration:none;text-transform:uppercase;font-weight:700;letter-spacing:.12em;font-size:13px;background:transparent;transition:all var(--dur-snap)}
.cta:hover{background:var(--text);color:var(--bg);transform:translate(-2px,-2px);box-shadow:var(--shadow-pop-pink)}

/* --- corner marks (spec-sheet chrome on hero and slide fields) */
.cornered{position:relative}
.corner{position:absolute;font-size:var(--text-label);letter-spacing:var(--tracking-tag);opacity:.75;text-transform:uppercase;z-index:3}
.corner.tl{top:12px;left:14px}.corner.tr{top:12px;right:14px;text-align:right}
.corner.bl{bottom:10px;left:14px}.corner.br{bottom:10px;right:14px;text-align:right}

/* --- colophon footer: ink left, tri-band right */
footer.colophon{border-top:2px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
footer.colophon>div{padding:18px 16px}
footer.colophon .l{background:var(--ink);color:var(--bone)}
footer.colophon .r{background:var(--triband);color:var(--ink);font-weight:700;text-align:right}
footer.colophon a{color:inherit}
@media(max-width:560px){footer.colophon{grid-template-columns:1fr}footer.colophon .r{text-align:left}}

/* --- prose helpers */
p.lead{font-size:var(--text-lead);max-width:56ch;font-weight:700}
.dim{opacity:.65}
.hi{color:var(--accent-text);font-weight:700}
.slashtag{font-size:var(--text-label);letter-spacing:var(--tracking-tag);opacity:.6;text-transform:uppercase}

/* --- layout helpers */
.wrap{width:min(var(--container),calc(100vw - 2*var(--gutter)));margin-inline:auto}
.wrap-wide{width:min(var(--container-wide),calc(100vw - 2*var(--gutter)));margin-inline:auto}
.wrap-prose{width:min(var(--container-prose),calc(100vw - 2*var(--gutter)));margin-inline:auto}
.section{padding-block:var(--space-8)}
.grid{display:grid;gap:var(--space-6)}
@media(min-width:760px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* ---------------------------------------------------------------------------
   08 · ACCESSIBILITY GUARDS
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .marquee .track { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .cta:hover, .btn:hover, button:hover { transform: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .marquee, .checker, .harlequin { display: none; }
  a { text-decoration: underline; }
}