/* ============================================================
   PNTXV — Colors & Type
   Black & white brutalism, rare orange accents.
   ============================================================ */

/* ---------- Webfonts ----------
   Substitutions until real font files arrive:
   - Display wordmark:  Archivo Black  (heavy geometric, poster-grade)
   - UI / Body:         Space Grotesk  (500–700)
   - Mono / Captions:   JetBrains Mono (timecodes, credits, labels)
*/
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ---------- Color: Ink & Paper ---------- */
  --ink:           #0A0A0A;  /* primary black — slightly warm, filmic */
  --ink-true:      #000000;  /* pure black — for negative fills / video gutters */
  --paper:         #F5F2EC;  /* warm paper white — default canvas */
  --paper-pure:    #FFFFFF;  /* pure white — for high-contrast cards on ink */

  /* ---------- Color: Ink scale (neutral grays) ---------- */
  --ink-95: #141414;
  --ink-80: #2B2B2B;
  --ink-60: #4F4F4F;
  --ink-40: #8A8A8A;
  --ink-25: #B8B6B0;
  --ink-15: #D6D2CA;
  --ink-08: #E7E3DA;
  --ink-04: #EFEBE2;

  /* ---------- Color: Accent ---------- */
  --orange:        #FF4D14;  /* vivid construction orange — used SPARINGLY */
  --orange-deep:   #D93C00;  /* press / hover state */
  --orange-tint:   #FFE2D2;  /* extremely rare wash, for highlights */

  /* ---------- Color: Semantic ---------- */
  --fg-1:          var(--ink);
  --fg-2:          var(--ink-80);
  --fg-3:          var(--ink-60);
  --fg-mute:       var(--ink-40);
  --fg-on-ink:     var(--paper);
  --fg-accent:     var(--orange);

  --bg-1:          var(--paper);
  --bg-2:          var(--ink-04);
  --bg-card:       var(--paper-pure);
  --bg-inverse:    var(--ink);

  --border:        var(--ink);          /* default border = full ink, brutalist */
  --border-hair:   var(--ink-15);       /* hairlines for tables/dividers */
  --border-on-ink: var(--paper);

  /* ---------- Type families ---------- */
  --font-display:  "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --font-sans:     "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- Type scale (modular, brutalist — big jumps) ---------- */
  --fs-mono:       11px;   /* labels, timecodes — ALL CAPS */
  --fs-caption:    13px;
  --fs-body:       16px;
  --fs-lead:       19px;
  --fs-h4:         22px;
  --fs-h3:         32px;
  --fs-h2:         48px;
  --fs-h1:         72px;
  --fs-display:    120px;  /* poster-scale wordmark / hero */
  --fs-monument:   200px;  /* full-bleed brutalist callout */

  /* ---------- Line heights ---------- */
  --lh-tight:      0.92;   /* display */
  --lh-snug:       1.06;   /* h1/h2 */
  --lh-normal:     1.4;    /* body */
  --lh-loose:      1.6;    /* long-form prose */

  /* ---------- Letter spacing ---------- */
  --ls-display:    -0.03em;
  --ls-tight:      -0.015em;
  --ls-normal:     0;
  --ls-mono:       0.08em;  /* mono labels — uppercase, tracked out */
  --ls-mono-wide:  0.18em;

  /* ---------- Spacing scale ---------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;
  --sp-11:  192px;

  /* ---------- Borders ---------- */
  --bw-hair:    1px;
  --bw-rule:    2px;   /* default brutalist rule */
  --bw-heavy:   3px;
  --bw-slab:    6px;   /* poster-grade slab borders */

  --radius-0:   0;       /* default — brutalism prefers sharp corners */
  --radius-1:   2px;     /* rare, when a control needs softening */
  --radius-pill: 999px;  /* only for tags/chips */

  /* ---------- Elevation ----------
     Brutalism rejects soft drop-shadows. We use HARD offset shadows only. */
  --shadow-0:   none;
  --shadow-1:   3px 3px 0 0 var(--ink);     /* hovered cards / chips */
  --shadow-2:   6px 6px 0 0 var(--ink);     /* lifted */
  --shadow-3:   10px 10px 0 0 var(--ink);   /* poster / hero */
  --shadow-orange: 6px 6px 0 0 var(--orange);

  /* ---------- Motion ----------
     Snap-to. No bounces. Short durations. */
  --dur-instant:   80ms;
  --dur-fast:      140ms;
  --dur-base:      200ms;
  --ease-snap:     cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Base element styles — semantic, ready to consume
   ============================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Headings --- */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.2;
  margin: 0;
}

/* --- Display & Monument --- */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.monument {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-monument);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* --- Body / Lead --- */
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0 0 1em 0;
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-1);
}
.caption {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-3);
}

/* --- Mono labels --- */
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--fg-2);
}
.mono--wide {
  letter-spacing: var(--ls-mono-wide);
}
.mono--accent {
  color: var(--orange);
}

/* --- Section numbering (filmic) --- */
.section-num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  display: inline-block;
  padding-right: var(--sp-3);
  color: var(--fg-mute);
}
.section-num::before {
  content: "";
  display: inline-block;
  width: 24px;
  border-top: var(--bw-rule) solid currentColor;
  vertical-align: middle;
  margin-right: var(--sp-2);
}

/* --- Rules / dividers --- */
hr, .rule {
  border: 0;
  border-top: var(--bw-rule) solid var(--ink);
  margin: var(--sp-6) 0;
}
.rule--hair { border-top-width: var(--bw-hair); border-top-color: var(--border-hair); }
.rule--heavy { border-top-width: var(--bw-heavy); }

/* --- Links --- */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-snap);
}
a:hover { color: var(--orange); }

/* --- Selection --- */
::selection { background: var(--orange); color: var(--paper); }