/* ───────────────────────────────────────────────────────────────
   Strata Match — Refined system (v4)
   Light / paper default · navy + photography as punctuation
   Brand family (navy · paper · terracotta) + two derived complements:
     Teal  (complement of terracotta)  → data / trust surfaces
     Amber (analogous-warm)            → editorial / support surfaces
   Type: Instrument Serif (display) · system sans (body) · JetBrains Mono (meta)
   ─────────────────────────────────────────────────────────────── */

/* ───────────────────────── @font-face ───────────────────────── */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/instrument-serif-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;
  src:url('fonts/newsreader-latin-wght-italic.woff2') format('woff2-variations');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');}
@font-face{font-family:'JetBrains Mono';font-style:italic;font-weight:100 800;font-display:swap;
  src:url('fonts/jetbrains-mono-latin-wght-italic.woff2') format('woff2-variations');}

:root{
  /* ── Type ── */
  --font-display:'Instrument Serif','Cormorant Garamond',Georgia,serif;
  --font-sans:'Source Sans 3 Variable','Source Sans 3',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:var(--font-sans);
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --w-body:470; --w-body-em:600; --w-body-b:680;

  /* ── Raw brand palette (the only place hex lives) ── */
  --paper:#FAF8F3; --ink:#0A0A08; --navy:#050D1E; --terracotta:#D46A2E;

  /* Neutral ramp (warm) */
  --n-50:#FBF9F4; --n-100:#F1EEE5; --n-200:#E3DECF; --n-300:#C4BDA9;
  --n-400:#8C8676; --n-500:#5C594F; --n-600:#3C3A33; --n-700:#262420;
  --n-800:#16150F; --n-900:#0A0A08;

  /* Navy ramp */
  --navy-50:#EDF3FB; --navy-100:#D3E1F2; --navy-200:#A2BFE0; --navy-300:#6F98C8;
  --navy-400:#3F6FAE; --navy-500:#23528F; --navy-600:#1B4274; --navy-700:#153459;
  --navy-800:#0D2340; --navy-900:#07172B;

  /* Terracotta ramp */
  --t-50:#FDF1E9; --t-100:#FADDCA; --t-200:#F5C5A6; --t-300:#EFAC7E; --t-400:#E78549;
  --t-500:#D46A2E; --t-600:#B85522; --t-700:#8F3E17;

  /* Teal — data / trust complement */
  --teal-50:#EEF4F4; --teal-100:#D6E5E6; --teal-200:#AECccd; --teal-300:#7FAEB0;
  --teal-500:#3F7E84; --teal-600:#2F6166; --teal-700:#234A4E; --teal-900:#0E2A2E;

  /* Amber — editorial / support complement */
  --amber-50:#F9F2E2; --amber-100:#F3EAD5; --amber-200:#E7D5AC; --amber-300:#D2B36F;
  --amber-500:#9A7531; --amber-600:#7E5E26; --amber-700:#5E4619; --amber-900:#2A2418;

  /* Semantic — LIGHT (default) */
  --bg:var(--paper);
  --bg-elevated:#FFFFFF;
  --bg-sunken:var(--n-100);
  --surface-data:var(--teal-50);
  --surface-edit:var(--amber-50);
  --surface-ink:var(--navy-900);          /* dark punctuation block */

  --fg:var(--ink);
  --fg-muted:#494640;                      /* darkened for AA on paper */
  --fg-subtle:#6A6557;
  --on-ink:var(--paper);                   /* text on dark blocks */
  --on-ink-muted:#DCE6F2;                  /* cool muted text on dark photo overlay */
  --on-ink-muted-warm:#DACBB8;             /* warm equivalent for terracotta/amber pages */

  --border:var(--n-200);
  --border-strong:var(--n-300);
  --hairline:var(--n-200);
  --hairline-ink:rgba(255,255,255,0.12);

  --accent:var(--terracotta);
  --accent-text:#A8481A;                   /* AA: 5.4:1 on paper, 5.3:1 on cream cards (#f9f2e2). #B85522 was 4.49/4.31, failing small text. Audit 2026-06-03 */
  --success:#15803D;                       /* semantic — on light surfaces */
  --warning:#B45309;
  --danger:#B91C1C;
  --success-ink:#5FBF84;                    /* semantic — legible on dark/navy surfaces */
  --warning-ink:#E8983C;
  --rule-data:var(--teal-500);
  --rule-edit:var(--amber-600);

  --shadow-card:0 1px 2px rgba(10,10,8,.04), 0 8px 24px -12px rgba(10,10,8,.12);
  --shadow-lift:0 2px 4px rgba(10,10,8,.05), 0 20px 48px -16px rgba(10,10,8,.20);

  /* Type scale */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-17:17px;
  --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-28:28px; --fs-32:32px; --fs-40:40px;
  --fs-48:48px; --fs-60:60px; --fs-72:72px; --fs-96:96px;

  /* Spacing / radii / motion */
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-24:24px; --s-32:32px;
  --s-48:48px; --s-64:64px; --s-80:80px; --s-96:96px; --s-112:112px;
  /* spacing between sibling actions/chips — tokenized, never hardcode inline */
  --gap-actions:var(--s-16); --gap-chips:var(--s-8);
  --r-sm:2px; --r-md:4px; --r-pill:999px;
  --ease-out:cubic-bezier(.33,1,.68,1);
  --dur-fast:160ms; --dur-med:220ms; --dur-slow:400ms;
}

/* ── Base ── */
*{box-sizing:border-box;}
html{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-18);font-weight:var(--w-body);
  line-height:1.72;letter-spacing:.003em;color:var(--fg);
  font-feature-settings:"kern","liga","calt";
  font-variant-numeric:lining-nums proportional-nums;}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:-0.015em;
  line-height:1.04;color:var(--fg);margin:0;font-feature-settings:"kern","liga","dlig";}
h1{font-size:clamp(44px,5.8vw,84px);letter-spacing:-0.02em;line-height:.98;}
h2{font-size:clamp(34px,4.4vw,56px);letter-spacing:-0.018em;line-height:1.02;}
h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-0.012em;}
h4{font-size:var(--fs-20);letter-spacing:-0.01em;}
p{margin:0;}
a{color:inherit;}
em,i,.italic{font-style:italic;}
.display-italic{font-family:var(--font-display);font-style:italic;}

::selection{background:var(--terracotta);color:var(--paper);}

/* ── Typographic utilities ── */
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-12);font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;color:var(--fg-muted);font-variant-numeric:tabular-nums;}
.eyebrow-accent{color:var(--accent-text);}
.eyebrow-sm{font-family:var(--font-mono);font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;color:var(--fg-subtle);}
.fig-no{font-family:var(--font-mono);font-size:10px;font-weight:500;text-transform:uppercase;
  letter-spacing:.28em;color:var(--accent-text);font-variant-numeric:tabular-nums;}
.tnum{font-variant-numeric:tabular-nums lining-nums slashed-zero;font-feature-settings:"tnum","lnum","zero";}
.stat{font-family:var(--font-display);font-weight:400;line-height:.9;letter-spacing:-0.03em;
  font-variant-numeric:lining-nums tabular-nums slashed-zero;font-feature-settings:"tnum","lnum","zero";}

.pullquote{font-family:var(--font-display);font-style:italic;font-weight:400;line-height:1.18;
  letter-spacing:-0.01em;text-wrap:pretty;hanging-punctuation:first;}

.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-family:var(--font-mono);
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--fg-subtle);
  font-variant-numeric:tabular-nums;}

/* horizontal sibling group — real flex container so the gap token applies.
   .row = action/CTA groups (token gap); .row-tight = chip/badge groups. */
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-actions);}
.row-tight{gap:var(--gap-chips);}
.meta-row .sep{color:var(--border-strong);user-select:none;}
.meta-row .accent{color:var(--accent-text);}

/* Hairline rules */
.rule{border:0;height:1px;background:var(--hairline);margin:0;}
.rule-accent{border:0;height:1px;background:var(--accent);margin:0;}
.rule-double{border:0;height:5px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:transparent;}
.rule-double-accent{border:0;height:5px;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);}

/* ── Surfaces ── */
.surface-page{background:var(--bg);color:var(--fg);}
.surface-data{background:var(--surface-data);color:var(--fg);}
.surface-edit{background:var(--surface-edit);color:var(--fg);}
.surface-ink{background:var(--surface-ink);color:var(--on-ink);}
.surface-ink h1,.surface-ink h2,.surface-ink h3,.surface-ink h4{color:var(--paper);}
.surface-ink .eyebrow{color:var(--navy-200);}
.surface-ink .fig-no{color:var(--t-400);}

/* ── Corner tick (the L-shape signature) ── */
.tick{position:relative;}
.tick::before{content:"";position:absolute;top:0;right:0;width:24px;height:24px;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);pointer-events:none;}
.tick-lg::before{width:40px;height:40px;border-width:3px;}

/* ───────────────────────── BUTTONS ─────────────────────────
   Mix: squared editorial buttons + pills for CTAs                  */

.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;
  border:1px solid transparent;font-family:var(--font-mono);font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;font-variant-numeric:tabular-nums;
  transition:background-color var(--dur-med) var(--ease-out),
             border-color var(--dur-med) var(--ease-out),
             color var(--dur-med) var(--ease-out),transform var(--dur-fast) var(--ease-out);}
.btn .arr{display:inline-block;transition:transform var(--dur-med) var(--ease-out);}
.btn:hover .arr{transform:translateX(4px);}

/* PILL — for primary CTAs */
.btn-pill{border-radius:var(--r-pill);padding:15px 28px;}
/* WCAG AA: white on --terracotta (#D46A2E) is only 3.55:1. --t-600 (#B85522)
   gives 4.82:1 with white, so primary CTAs use the darker brand shade; hover
   steps to --t-700. (A11y audit 2026-06-03.) */
.btn-pill-primary{background:var(--t-600);color:#fff;}
.btn-pill-primary:hover{background:var(--t-700);}
.btn-pill-ink{background:var(--navy-900);color:#fff;}
.btn-pill-ink:hover{background:var(--navy-700);}
.btn-pill-ghost{background:transparent;color:var(--fg);border-color:var(--border-strong);}
.btn-pill-ghost:hover{border-color:var(--accent);color:var(--accent-text);}

/* SQUARED — editorial secondary actions */
.btn-sq{border-radius:var(--r-sm);padding:14px 24px;}
.btn-sq-fill{background:var(--ink);color:#fff;}
.btn-sq-fill:hover{background:var(--n-700);}
.btn-sq-line{background:transparent;color:var(--fg);border-color:var(--border-strong);}
.btn-sq-line:hover{border-color:var(--ink);background:var(--ink);color:var(--paper);}
/* wipe — fills terracotta from the left */
.btn-sq-wipe{background:transparent;color:var(--fg);border-color:var(--border-strong);position:relative;overflow:hidden;z-index:0;}
.btn-sq-wipe>*{position:relative;z-index:1;}
.btn-sq-wipe::before{content:"";position:absolute;inset:0;background:var(--terracotta);
  transform:scaleX(0);transform-origin:left;z-index:0;transition:transform var(--dur-slow) var(--ease-out);}
.btn-sq-wipe:hover{color:var(--paper);border-color:var(--terracotta);}
.btn-sq-wipe:hover::before{transform:scaleX(1);}

/* TEXT link — underline sweep + arrow */
.btn-text{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--accent-text);
  text-decoration:none;padding-bottom:4px;border-bottom:1px solid var(--accent);
  transition:gap var(--dur-med) var(--ease-out);}
.btn-text:hover{gap:14px;}
.btn-text .arr{transition:transform var(--dur-med) var(--ease-out);}
.btn-text:hover .arr{transform:translateX(3px);}

/* sizes + states */
.btn-lg{padding:18px 34px;font-size:13px;}
.btn-sm{padding:10px 18px;font-size:11px;letter-spacing:.18em;}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none;}

/* subtle premium micro-motion — token-eased hover lift, settles on press.
   No scale, no color flash (per brand). Bypassed under reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  .btn-pill:hover,.btn-sq:hover{transform:translateY(-1px);}
  .btn-pill:active,.btn-sq:active{transform:translateY(0);}
}

/* on dark surfaces */
.surface-ink .btn-pill-ghost{color:var(--paper);border-color:var(--hairline-ink);}
.surface-ink .btn-pill-ghost:hover{border-color:var(--t-400);color:var(--t-400);}
.surface-ink .btn-sq-line{color:var(--paper);border-color:var(--hairline-ink);}
.surface-ink .btn-sq-line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}

/* ───────────────────────── TAGS / CHIPS ───────────────────────── */
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;
  font-weight:500;letter-spacing:.04em;padding:5px 11px;border-radius:var(--r-sm);
  border:1px solid transparent;font-variant-numeric:tabular-nums;}
.tag .dot{width:5px;height:5px;border-radius:999px;background:currentColor;flex:none;}
.tag-neutral{background:var(--n-100);color:var(--n-600);border-color:var(--n-200);}
.tag-data{background:var(--teal-50);color:var(--teal-700);border-color:var(--teal-100);}
.tag-edit{background:var(--amber-50);color:var(--amber-700);border-color:var(--amber-100);}
.tag-accent{background:var(--t-50);color:var(--t-700);border-color:var(--t-100);}
.tag-line{background:transparent;color:var(--fg-muted);border-color:var(--border-strong);}

/* ───────────────────────── CARDS ───────────────────────── */
.card{background:var(--bg-elevated);border:1px solid var(--border);padding:28px 32px;position:relative;}
.card-flat{background:transparent;border:1px solid var(--border);padding:28px 32px;}
.card-lift{background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow-card);}
.card-accent{border-left:3px solid var(--accent);}
.card-data{background:var(--teal-50);border:1px solid var(--teal-100);}
.card-edit{background:var(--amber-50);border:1px solid var(--amber-100);}

/* photo card — image zoom on hover */
.photo-card{position:relative;overflow:hidden;background:var(--bg-elevated);border:1px solid var(--border);}
.photo-card .ph{overflow:hidden;}
.photo-card .ph img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out);}
.photo-card:hover .ph img{transform:scale(1.045);}