:root{
  /* colour: 5 values, warm neutrals tinted toward the accent hue */
  --paper:    oklch(0.973 0.008 78);
  --ink:      oklch(0.205 0.014 62);
  --ink-soft: oklch(0.505 0.020 66);
  --rule:     oklch(0.878 0.012 74);
  --accent:   oklch(0.545 0.128 52);

  /* space: 7 steps, top of scale actually used */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 96px; --s7: 128px;

  /* type: 8 steps from a 1.333 ratio */
  --fs-micro: 0.6875rem;
  --fs-small: 0.8125rem;
  --fs-base:  1.0625rem;
  --fs-lead:  1.25rem;
  --fs-h3:    1.375rem;
  --fs-h2:    2rem;
  --fs-num:   2.5rem;
  --fs-display: clamp(2.75rem, 7.2vw, 5.5rem);

  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --measure: 68ch;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:var(--fs-base); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1140px; margin:0 auto; padding:0 var(--s3)}
p{margin:0 0 var(--s3); max-width:var(--measure)}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--display); font-weight:500; margin:0}

/* ---- the signature: a source note rail on every claim ---- */
.src{
  display:block; font-family:var(--mono); font-size:var(--fs-micro);
  letter-spacing:0.02em; color:var(--ink-soft); margin-top:var(--s1);
}
.src::before{content:"↳ "; color:var(--accent)}

.eyebrow{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 var(--s3); max-width:none;
}

/* ---- hero, with the portrait beside it from 800px ---- */
header{padding:var(--s6) 0 var(--s5)}
.hero{display:grid; gap:var(--s4)}
.portrait{display:block; width:112px; height:112px; background:var(--accent)}
@media(min-width:800px){
  .hero{grid-template-columns:minmax(0,1fr) 240px; gap:var(--s5); align-items:start}
  .hero-text{grid-column:1; grid-row:1}
  .portrait{grid-column:2; grid-row:1; width:240px; height:240px}
}
h1{
  font-size:var(--fs-display); line-height:0.98; letter-spacing:-0.035em;
  font-weight:700; max-width:16ch; margin-bottom:var(--s4);
}
h1 em{font-style:normal; color:var(--accent)}
.lead{font-size:var(--fs-lead); max-width:58ch}
.facts{
  display:flex; flex-wrap:wrap; gap:var(--s3); list-style:none; padding:0;
  margin:var(--s4) 0 0; font-family:var(--mono); font-size:var(--fs-small);
  border-top:1px solid var(--rule); padding-top:var(--s3);
}
.facts b{color:var(--accent); font-weight:500}

/* ---- sections ---- */
section{padding:var(--s6) 0; border-top:1px solid var(--rule)}
h2{
  font-size:var(--fs-h2); letter-spacing:-0.025em; line-height:1.1;
  margin-bottom:var(--s5); max-width:24ch;
}
.num{
  font-family:var(--mono); font-size:var(--fs-micro); color:var(--accent);
  letter-spacing:0.12em; display:block; margin-bottom:var(--s2);
}
h3{font-size:var(--fs-h3); letter-spacing:-0.015em; margin-bottom:var(--s2)}
.grid{display:grid; gap:var(--s5)}
@media(min-width:800px){
  .grid-2{grid-template-columns:1fr 1fr; gap:var(--s5) var(--s6)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}
.item p:last-child{margin-bottom:0}
.big{font-family:var(--display); font-size:var(--fs-num); font-weight:700; letter-spacing:-0.03em; line-height:1; color:var(--accent)}

/* ---- a case study: problem, what I did, what changed ---- */
.label{
  display:block; font-family:var(--mono); font-size:var(--fs-micro);
  letter-spacing:0.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:var(--s1);
}

/* ---- artefact ---- */
.artefact{
  font-family:var(--mono); font-size:var(--fs-small); line-height:1.75;
  border:1px solid var(--rule); padding:var(--s3); overflow-x:auto;
  white-space:pre; color:var(--ink-soft); margin:0 0 var(--s3);
}
.artefact b{color:var(--accent); font-weight:500}

ul.plain{list-style:none; padding:0; margin:0 0 var(--s3); max-width:var(--measure)}
ul.plain li{padding:var(--s2) 0; border-bottom:1px solid var(--rule)}
ul.plain li:first-child{padding-top:0}

/* ---- cta ---- */
.actions{margin:var(--s4) 0 0; max-width:none}
.cta{display:inline-block; font-family:var(--display); font-weight:500;
  font-size:clamp(0.9375rem, 3.4vw, var(--fs-lead));
  color:var(--paper); background:var(--ink); text-decoration:none;
  padding:var(--s2) var(--s4); max-width:100%; overflow-wrap:anywhere;
  transition:background 150ms var(--ease);}
.cta:hover,.cta:focus-visible{background:var(--accent)}
.cta-alt{display:inline-block; margin:var(--s2) 0 0 var(--s1); font-family:var(--mono); font-size:var(--fs-small)}
footer{padding:var(--s5) 0 var(--s6); border-top:1px solid var(--rule); color:var(--ink-soft); font-size:var(--fs-small)}

/* ---- motion, gated on js so nothing hides without it ---- */
.js [data-reveal]{opacity:0; transform:translateY(14px)}
.js [data-reveal].in{opacity:1; transform:none;
  transition:opacity 380ms var(--ease), transform 380ms var(--ease)}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1; transform:none; transition:none}
}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}