/* ==========================================================================
   PAUL SAUNDERSON — DESIGN SYSTEM
   01. TOKENS — colour, type, spacing, layout primitives
   ========================================================================== */

:root{
  /* colour */
  --paper:#0a0e1a;
  --paper-2:#131a2c;
  --ink:#f1ece1;
  --mid:#a8a196;
  --line: rgba(241,236,225,0.12);
  --accent:#b33f35;   /* muted cinematic red */
  --gold:#c9a961;      /* restrained gold */

  /* layout */
  --max:1180px;
  --gutter:32px;

  /* type scale (fluid, clamp-based — see components.css for usage) */
  --font-display:'Archivo', sans-serif;
  --font-body:'Lora', serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur-fast:.2s;
  --dur-med:.4s;
  --dur-slow:.7s;
}

/* Light variant — reserved for sections that intentionally invert
   (e.g. the intro/bio band). Toggle by adding class="light" to a section. */
.light{
  --paper:#f6f4ef;
  --paper-2:#efece3;
  --ink:#17160f;
  --mid:#6f6a5f;
  --line: rgba(23,22,15,0.14);
  background:var(--paper);
  color:var(--ink);
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent); color:var(--ink);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter);}
.wrap--narrow{max-width:820px;}
.wrap--article{max-width:720px;}

section{position:relative; padding:100px 0;}
section.section--tight{padding:56px 0;}
section.bordered{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
section.border-b{border-bottom:1px solid var(--line);}
section.border-t{border-top:1px solid var(--line);}

h1,h2,h3{font-family:var(--font-display); font-weight:700; margin:0; letter-spacing:-0.01em;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
}

.section-head{max-width:640px; margin-bottom:48px;}
.section-head.center{text-align:center; margin-left:auto; margin-right:auto;}
.section-head h1,
.section-head h2{font-size:clamp(28px,3.6vw,40px); line-height:1.05;}
.section-head p{color:var(--mid); font-size:15px; margin-top:14px; line-height:1.6;}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity var(--dur-slow) ease, transform var(--dur-slow) ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media(prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important; transition-duration:.001s !important;}
}