/* ============================================================
   THE BUG JUDGE — foundational tokens
   Load this once at the top of every html file.
   ============================================================ */

/* --- Fonts: using Google Fonts as closest free matches to
       Editorial New / ABC Diatype / Söhne. If the real licensed
       fonts are dropped into /fonts/ later, the @font-face blocks
       below will pick them up first. ------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* Optional local overrides — drop licensed .woff2 into /fonts/ and these win */
@font-face {
  font-family: 'Editorial';
  src: local('PP Editorial Old'), local('Editorial New'), url('/fonts/EditorialOld-Italic.woff2') format('woff2');
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Editorial';
  src: local('PP Editorial Old'), local('Editorial New'), url('/fonts/EditorialOld-Regular.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- COLOR ---------- */
  --ink:           #141414;    /* primary type, dark surfaces */
  --ink-80:        #141414CC;
  --ink-60:        #14141499;
  --ink-40:        #14141466;
  --ink-10:        #1414141A;  /* hairlines */

  --paper:         #FBF8F2;    /* raised surfaces, cards on cream */
  --cream:         #F5F0E6;    /* default page background */
  --cream-dim:     #EDE6D6;

  --ochre:         #E8C547;    /* the "yellow" — refined, thread-coded */
  --ochre-dim:     #C9A832;
  --ochre-bright:  #F5D867;

  --oxblood:       #4A1213;    /* unexpected second — depth, secondary CTA */
  --oxblood-dim:   #330B0C;

  --news:          #8A847A;    /* newsprint grey — labels, meta */
  --news-dim:      #6B665E;
  --news-light:    #B8B2A8;

  /* on-dark variants */
  --on-dark:       #F5F0E6;    /* body type on ink — uses cream, not white */
  --on-dark-60:    rgba(245, 240, 230, 0.6);
  --on-dark-40:    rgba(245, 240, 230, 0.4);
  --on-dark-rule:  rgba(245, 240, 230, 0.14);

  /* semantic */
  --success:       #2F6B3A;
  --warn:          #B8720E;
  --danger:        var(--oxblood);

  /* ---------- TYPE ---------- */
  --font-serif:    'Editorial', 'Instrument Serif', 'Times New Roman', serif;
  --font-sans:     'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* scale — line-height and tracking paired per step */
  --fz-mega:       180px;   --lh-mega: 0.88; --tr-mega: -0.035em;
  --fz-h1:         96px;    --lh-h1:   0.94; --tr-h1:   -0.025em;
  --fz-h2:         64px;    --lh-h2:   0.98; --tr-h2:   -0.02em;
  --fz-h3:         40px;    --lh-h3:   1.05; --tr-h3:   -0.015em;
  --fz-h4:         24px;    --lh-h4:   1.2;  --tr-h4:   -0.01em;
  --fz-lead:       24px;    --lh-lead: 1.4;  --tr-lead: -0.01em;
  --fz-body:       17px;    --lh-body: 1.55; --tr-body: 0;
  --fz-small:      14px;    --lh-small:1.5;  --tr-small:0;
  --fz-micro:      12px;    --lh-micro:1.4;  --tr-micro:0;
  --fz-label:      12px;    --lh-label:1;    --tr-label:0.14em;

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  40px;
  --space-6:  72px;
  --space-7:  120px;
  --space-8:  200px;

  /* ---------- RADII ---------- */
  --r-0:  0;
  --r-1:  2px;
  --r-2:  8px;
  --r-3:  999px;

  /* ---------- SHADOWS ---------- */
  --shadow-1: 0 1px 0 rgba(20,20,20,0.04), 0 2px 6px rgba(20,20,20,0.04);
  --shadow-2: 0 4px 20px rgba(20,20,20,0.08);
  --shadow-3: 0 12px 40px rgba(20,20,20,0.14);

  /* ---------- MOTION ---------- */
  --ease:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1:  400ms;
  --dur-2:  900ms;
  --dur-3:  1400ms;
  --dur-4:  2000ms;

  /* ---------- LAYOUT ---------- */
  --gutter:    32px;
  --max-w:     1440px;
  --max-w-ed:  1600px;   /* editorial sections */
}

/* ============================================================
   SEMANTIC ELEMENTS — the styles most html tags should match
   without any class. Drop this CSS into a page and <h1>/<p>/
   <label>/<button> already look right.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .serif, .display {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fz-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2 { font-size: var(--fz-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fz-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
h4 { font-size: var(--fz-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-style: normal; }

p { margin: 0 0 var(--space-3) 0; text-wrap: pretty; }
p.lead { font-size: var(--fz-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-lead); color: var(--ink-80); }
p.small, small { font-size: var(--fz-small); line-height: var(--lh-small); color: var(--news-dim); }

a { color: inherit; text-decoration: none; transition: opacity var(--dur-1) var(--ease); }

/* The mono label — the single most-used non-body element. Eyebrow, nav item, data cell. */
.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fz-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--news-dim);
}

/* The one-word-italic moment — IG-coded quiet statement */
.whisper {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fz-h3);
  line-height: var(--lh-h3);
  color: var(--ink);
}

/* Big numeric — for prices, case numbers */
.numeric {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---------- buttons ---------- */
button, .btn {
  font-family: var(--font-sans);
  font-size: var(--fz-body);
  font-weight: 500;
  letter-spacing: 0;
  padding: 14px 28px;
  border-radius: var(--r-3);
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--on-dark);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
button:hover, .btn:hover { transform: translateY(-2px); }
button:active, .btn:active { transform: translateY(0) scale(0.99); transition-duration: 80ms; }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }

.btn-ochre { background: var(--ochre); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink-10); }
.btn-oxblood { background: var(--oxblood); color: var(--on-dark); }
.btn-caps {
  font-family: var(--font-mono);
  font-size: var(--fz-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------- form controls ---------- */
input, textarea, select {
  font-family: var(--font-sans);
  font-size: var(--fz-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-10);
  border-radius: 0;
  padding: 12px 0;
  width: 100%;
  outline: none;
  transition: border-color var(--dur-1) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--news-light); }
input:focus, textarea:focus, select:focus { border-bottom-color: var(--ochre); }

label {
  font-family: var(--font-mono);
  font-size: var(--fz-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--news-dim);
  display: block;
  margin-bottom: var(--space-2);
}

/* ---------- rules ---------- */
hr { border: 0; border-top: 1px solid var(--ink-10); margin: var(--space-5) 0; }

/* ---------- utility ---------- */
.ochre { color: var(--ochre); }
.oxblood { color: var(--oxblood); }
.news { color: var(--news-dim); }
.italic { font-style: italic; }

.on-dark { background: var(--ink); color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); }
.on-dark .label { color: var(--on-dark-60); }
.on-dark input, .on-dark textarea, .on-dark select { color: var(--on-dark); border-bottom-color: var(--on-dark-rule); }
.on-dark input::placeholder { color: var(--on-dark-40); }

/* ---------- motion primitive: reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* per-word split reveal */
.split-word { display: inline-block; overflow: hidden; }
.split-word > span { display: inline-block; transform: translateY(110%); transition: transform var(--dur-3) var(--ease); }
.split-word.in > span { transform: none; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 200ms !important;
  }
  .split-word > span { transform: none !important; }
}

/* ---------- responsive type ---------- */
@media (max-width: 900px) {
  :root {
    --fz-mega: 96px;
    --fz-h1:   56px;
    --fz-h2:   40px;
    --fz-h3:   28px;
    --fz-lead: 19px;
    --fz-body: 16px;
    --gutter: 20px;
    --space-7: 80px;
    --space-8: 120px;
  }
}