/* ==========================================================================
   KOSH MEDIA — DESIGN SYSTEM  (single source of truth)
   --------------------------------------------------------------------------
   Every colour, font, type size, button and spacing value on the website comes
   from THIS file. To restyle the site, change a token in section 1 — nothing
   else. Page stylesheets only handle layout; they must not redefine these.

   1. Tokens        colours · fonts · type scale · spacing · motion
   2. Base          reset · body · links · focus
   3. Typography    h1–h6 · paragraphs · lede · sub text · eyebrow
   4. Buttons       primary · secondary · light · text link
   5. Layout        container · section
   6. Legacy names  old per-page variable names mapped to the tokens above
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* ── Brand colours ──────────────────────────────────────────────────── */
  --color-primary:    #141210;  /* Primary   — buttons, headings, dark sections          */
  --color-secondary:  #6F0000;  /* Secondary — maroon: button hover, footer, header line */
  --color-tertiary:   #C4938A;  /* Tertiary  — blush: accents on dark backgrounds        */
  --color-accent:     #7A8FA4;  /* Steel blue — rare accent (gradient rule)              */

  /* ── Text colours ───────────────────────────────────────────────────── */
  --text-primary:     #141210;  /* headings, strong text                       */
  --text-secondary:   #3F3B37;  /* paragraphs, body copy                       */
  --text-tertiary:    #66605A;  /* sub text: captions, meta, helper text       */
  --text-on-dark:     #FFFFFF;  /* headings on dark backgrounds                */
  --text-on-dark-2:   rgba(255, 255, 255, .72);  /* paragraphs on dark         */
  --text-on-dark-3:   rgba(255, 255, 255, .62);  /* sub text on dark           */

  /* ── Surfaces & lines ───────────────────────────────────────────────── */
  --bg-page:          #FFFFFF;
  --bg-tint:          #F7F5F2;  /* alternate section background                */
  --bg-sand:          #F0EDE8;
  --bg-dark:          #141210;
  --bg-dark-2:        #1C1A18;
  --line:             #E9E5DF;  /* hairlines and borders                       */
  --line-on-dark:     rgba(255, 255, 255, .12);

  /* ── Font families ──────────────────────────────────────────────────── */
  --font-heading: Georgia, 'Times New Roman', serif;    /* h1–h6, big numbers */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;  /* everything else */

  /* ── Heading scale (h1 → h6) ────────────────────────────────────────── */
  --fs-h1: clamp(40px, 4.4vw, 64px);
  --fs-h2: clamp(34px, 3.6vw, 50px);
  --fs-h3: clamp(24px, 2.4vw, 34px);
  --fs-h4: clamp(20px, 1.8vw, 24px);
  --fs-h5: 18px;
  --fs-h6: 14px;                 /* h6 is a small uppercase label */
  --fw-heading: 400;
  --lh-heading: 1.12;
  --ls-heading: -.015em;

  /* ── Text scale ─────────────────────────────────────────────────────── */
  --fs-lede:    clamp(16px, 1.25vw, 18px);  /* intro paragraph under a headline */
  --fs-body:    16px;                       /* paragraphs                       */
  --fs-small:   15px;                       /* card text, lists                 */
  --fs-caption: 14px;                       /* sub text, captions, counters     */
  --fs-label:   12px;                       /* eyebrows, tags                   */
  --fs-button:  13px;
  --fs-stat:    clamp(36px, 3.2vw, 48px);   /* big numbers, badges              */
  --fs-num:     clamp(48px, 5vw, 72px);     /* step numbers                     */
  --fw-body: 300;
  --fw-medium: 500;
  --lh-body: 1.7;
  --lh-lede: 1.75;

  /* ── Buttons ────────────────────────────────────────────────────────── */
  --btn-pad-y: 16px;
  --btn-pad-x: 28px;
  --btn-radius: 0;
  --btn-ls: .06em;

  /* ── Layout & spacing ───────────────────────────────────────────────── */
  --container: 1200px;
  --gutter: 40px;
  --section-y: clamp(58px, 7.2vw, 96px);     /* 20% tighter than the original 72/9vw/120 */
  --section-y-sm: clamp(38px, 4.8vw, 64px); /* strips, quotes, banners (also 20% tighter) */
  --pad: max(var(--gutter), calc((100vw - var(--container)) / 2));  /* full-bleed sections: content stays on the 1200px grid */
  --header-h: 64px;
  --radius-img: 5px;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 860px) {
  :root { --gutter: 22px; --header-h: 58px; }
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
body {
  background: var(--bg-page);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
strong, b { font-weight: var(--fw-medium); color: var(--text-primary); }
/* Text selection: soft tint, text colour untouched, so Ctrl+A stays readable */
::selection { background: rgba(196, 147, 138, .35); color: inherit; }
.section--dark ::selection, .site-footer ::selection, .dark ::selection { background: rgba(196, 147, 138, .4); color: #fff; }


/* ==========================================================================
   3. TYPOGRAPHY
   --------------------------------------------------------------------------
   Headings: every heading tag AND the page-level heading classes share one
   look, so a class never needs its own font-size.
     .h1 = page title            .h2 = section title
     .h3 = statement / sub-title .h4 = card title
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.hero-hl, .hl, .page-hl, .art-hl, .hero__title, .hero-big,
.section-hl, .sec-hl, .cta-hl, .cap-hl, .featured-hl, .section-title, .confirm-hl,
.del-name, .arc-name, .guar-title, .rel-hl, .vs-hl, .sidebar-cta-hl, .apart-hl,
.info-hl, .note-hl, .related-hl {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-primary);
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); }
h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Existing heading classes → the same standard sizes */
.hero-hl, .hl, .page-hl, .art-hl, .hero__title, .hero-big {                     /* page title  = h1 */
  font-size: var(--fs-h1);
}
.section-hl, .sec-hl, .cta-hl, .cap-hl, .featured-hl, .section-title, .confirm-hl { /* section title = h2 */
  font-size: var(--fs-h2);
}
.del-name, .arc-name, .guar-title, .rel-hl, .vs-hl, .sidebar-cta-hl, .apart-hl {  /* card title = h4 */
  font-size: var(--fs-h4);
}
.info-hl, .note-hl, .related-hl {  /* sub-section title = h3 */
  font-size: var(--fs-h3);
}

/* Emphasis inside a heading: italic, in the brand accent */
h1 em, h2 em, h3 em, h4 em,
.h1 em, .h2 em, .h3 em, .h4 em,
.hero-hl em, .hl em, .page-hl em, .art-hl em, .hero__title em, .hero-big em,
.section-hl em, .sec-hl em, .cta-hl em, .cap-hl em, .featured-hl em, .section-title em {
  font-style: italic;
  font-weight: var(--fw-heading);
  color: var(--color-secondary);
}

/* Headings on dark backgrounds */
.dark h1, .dark h2, .dark h3, .dark h4,
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--dark .section-title { color: var(--text-on-dark); }
.dark em, .section--dark em { color: var(--color-tertiary); }

/* Paragraphs ---------------------------------------------------------------*/
p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }

/* Lede — the intro paragraph that sits under a headline */
.lede, .section-lede, .hero-sub, .hero-body, .page-sub, .hero__lede, .art-deck {
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  font-weight: var(--fw-body);
}

/* Body copy — standard paragraph */
.body-copy, .sec-body, .cta-body, .featured-body, .body-text, .post-text,
.bio-text, .cap-body, .sp__copy, .aud__body, .pr__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
}

/* Small text — card and list descriptions (any class ending in -desc, plus the named ones) */
[class$="-desc"], [class*="-desc "],
.small, .result-desc, .svc-desc, .type-desc, .pr-desc, .fw-desc, .wc-desc, .pc-desc,
.ps-desc, .an-desc, .fr-desc, .arc-desc, .del-desc, .plat-desc, .res-desc, .guar-desc,
.ev-desc, .mr-desc, .fc-desc, .truth-desc, .ms-desc, .rc-desc, .eng-desc, .expect-text,
.note-body, .q-text, .sidebar-cta-body, .stack-card__text {
  font-size: var(--fs-small);
  line-height: 1.65;
  font-weight: var(--fw-body);
}

/* Sub text — captions, meta, helper text (the tertiary text colour) */
.subtext, .caption, .rel-meta, .confirm-sub, .info-sub, .submit-note {
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--text-tertiary);
}

/* Eyebrow — small uppercase label above a headline */
.eyebrow, .hero-eyebrow, .page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 22px;
}
.eyebrow::before, .hero-eyebrow::before, .page-eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; }
.eyebrow.lt, .dark .eyebrow, .section--dark .eyebrow { color: var(--color-tertiary); }

/* Big numbers */
.stat   { font-family: var(--font-heading); font-size: var(--fs-stat); line-height: 1; color: var(--text-primary); }
.number { font-family: var(--font-heading); font-size: var(--fs-num);  line-height: 1; color: var(--text-primary); }


/* ==========================================================================
   4. BUTTONS
   --------------------------------------------------------------------------
     .btn            primary   — dark fill, maroon on hover        (default)
     .btn--secondary secondary — outline, fills dark on hover
     .btn--light     on dark backgrounds — white fill
     .text-link      text button with underline
   Legacy class names (btn-dark, btn-cr, btn-wh, btn-submit, cta-link, case-cta)
   are mapped to these so every button on the site looks the same.
   ========================================================================== */
.btn, .btn-primary, .btn-dark, .btn-cr, .btn-wh, .btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--btn-ls);
  text-transform: uppercase;
  border: 1px solid var(--color-primary);
  border-radius: var(--btn-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease);
}
.btn svg, .btn-primary svg, .btn-dark svg, .btn-cr svg, .btn-wh svg, .btn-submit svg {
  width: 14px; height: 14px; flex: none;
  transition: transform .35s var(--ease);
}
.btn:hover, .btn-primary:hover, .btn-dark:hover, .btn-cr:hover, .btn-wh:hover, .btn-submit:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}
.btn:hover svg, .btn-primary:hover svg, .btn-dark:hover svg, .btn-cr:hover svg, .btn-wh:hover svg, .btn-submit:hover svg {
  transform: translateX(4px);
}
.btn:disabled, .btn-primary:disabled, .btn-submit:disabled { opacity: .55; pointer-events: none; }

/* Secondary — outline */
.btn--secondary, .btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: rgba(20, 18, 16, .25);
}
.btn--secondary:hover, .btn--ghost:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Light — for dark backgrounds */
.btn--light, .btn-wh {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}
.btn--light:hover, .btn-wh:hover {
  background: var(--color-tertiary);
  border-color: var(--color-tertiary);
  color: var(--color-primary);
}

/* Text link */
.text-link, .cta-link, .case-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  letter-spacing: var(--btn-ls);
  text-transform: uppercase;
  color: var(--color-primary);
  padding-bottom: 4px;
  border: 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color .3s, gap .35s var(--ease);
}
.text-link svg, .cta-link svg, .case-cta svg { width: 13px; height: 13px; flex: none; }
.text-link:hover, .cta-link:hover, .case-cta:hover { color: var(--color-secondary); gap: 14px; }
.text-link--plain { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); font-weight: 400; }
.text-link.lt, .cta-link.lt, .dark .text-link, .section--dark .text-link { color: #fff; }
.text-link.lt:hover, .cta-link.lt:hover, .dark .text-link:hover, .section--dark .text-link:hover { color: var(--color-tertiary); }


/* ==========================================================================
   5. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section        { padding: var(--section-y) 0; }
.section--tint  { background: var(--bg-tint); }
.section--dark  { background: var(--bg-dark); color: var(--text-on-dark-2); }
.section-head   { margin-bottom: clamp(48px, 6vw, 72px); max-width: 720px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-lede   { margin-top: 20px; max-width: 520px; }
/* Same grid as .container, for page stylesheets that use .wrap */
.wrap { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }


/* ==========================================================================
   6. LEGACY NAMES
   --------------------------------------------------------------------------
   Older page stylesheets used their own short variable names. They now simply
   point at the tokens above, so every page follows the design system.
   Do not use these in new code — use the --color-* / --text-* / --font-* tokens.
   ========================================================================== */
:root {
  /* colours */
  --cr: var(--color-primary);   --crimson: var(--color-primary);   --k-crimson: var(--color-primary);
  --maroon: var(--color-secondary); --k-maroon: var(--color-secondary);
  --rs: var(--color-tertiary);  --k-blush: var(--color-tertiary);
  --bl: var(--color-accent);    --k-steel: var(--color-accent);
  --ink: var(--text-primary);   --k-ink: var(--text-primary);
  --text: var(--text-secondary);
  --mid: var(--text-secondary); --k-mid: var(--text-secondary);
  --muted: var(--text-tertiary); --light: var(--text-tertiary);
  --wh: var(--bg-tint);         --k-paper: var(--bg-tint);   --tint: var(--bg-tint);
  --snd: var(--bg-sand);        --k-sand: var(--bg-sand);
  --dk: var(--bg-dark);         --dark: var(--bg-dark);       --k-dark: var(--bg-dark-2);
  --dk2: var(--bg-dark-2);
  --rul: var(--line);           --k-rule: var(--line);
  --white: #fff;                --k-white: #fff;
  --k-sky: var(--bg-page);
  --crimson-soft: rgba(20, 18, 16, .06);

  /* fonts */
  --serif: var(--font-heading); --k-serif: var(--font-heading);
  --sans: var(--font-body);     --k-sans: var(--font-body);

  /* type scale (homepage names) */
  --t-display: var(--fs-h1);  --t-h2: var(--fs-h2);  --t-h3: var(--fs-h3);  --t-h4: var(--fs-h4);
  --t-num: var(--fs-num);     --t-stat: var(--fs-stat);
  --t-lede: var(--fs-lede);   --t-body: var(--fs-body); --t-small: var(--fs-small); --t-caption: var(--fs-caption);
  --w-serif: var(--fw-heading);

  /* layout & motion */
  --k-container: var(--container); --k-gutter: var(--gutter); --k-header-h: var(--header-h);
  --k-ease: var(--ease); --k-radius-img: var(--radius-img);
}