:root{
  /* ============================================================
     LIGHT-FIRST SYSTEM
     The canvas is warm ivory. Dark is a deliberate contrast tool,
     applied per section with .dark, never the default.
     Every text pair below is verified against WCAG AA.
     ============================================================ */

  /* surfaces */
  --paper:#F7F4EF;          /* primary canvas, warm ivory */
  --stone:#EDE7DD;          /* secondary panels, soft stone */
  --card:#FFFDFA;           /* cards lift toward the light */
  --ink:#16181A;            /* dark contrast band. deep charcoal, never black */

  /* type on light */
  --graphite:#1F211F;       /* 14.77 on paper */
  --charcoal:#565550;       /*  6.81 on paper */
  --slate:#696761;          /*  5.15 on paper, 4.60 on stone */

  /* type on dark */
  --bone:#F2EEE7;           /* 15.39 on ink */
  --bone-mid:#BFBAB2;       /*  9.22 on ink */

  /* the single accent. three cuts, because one value cannot clear
     AA on both surfaces and still read as the same colour */
  --brass:#B98A4B;          /* the accent proper. large graphic use */
  --brass-edge:#B28344;     /* marks and rules on light, 3.08 non-text */
  --brass-ink:#7C5A28;      /* accent TEXT on light, 5.71 */
  --brass-lit:#D9A863;      /* accent text on dark, 8.25 */
  --brass-soft:rgba(185,138,75,.26);

  /* ---- scoped surface roles. .dark re-points these ---- */
  --surface:var(--paper);
  --text:var(--graphite);
  --text-2:var(--charcoal);
  --text-3:var(--slate);
  --accent-text:var(--brass-ink);
  --accent-mark:var(--brass-edge);
  --rule:rgba(31,33,31,.15);
  --rule-soft:rgba(31,33,31,.08);
  --panel:var(--stone);
  --danger:#B35039;      /* 4.64 on paper */

  --serif:'Instrument Serif', 'Times New Roman', serif;
  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --gut:clamp(24px, 6vw, 120px);
  --band:clamp(7rem, 15vw, 15rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* A dark section re-points the surface roles. Everything inside it
   inherits correct colours with no per-component overrides. */
.dark{
  --surface:var(--ink);
  --text:var(--bone);
  --text-2:var(--bone-mid);
  --text-3:var(--bone-mid);
  --accent-text:var(--brass-lit);
  --accent-mark:var(--brass);
  --rule:rgba(242,238,231,.16);
  --rule-soft:rgba(242,238,231,.09);
  --panel:#1E2124;
  --danger:#E8998A;      /* 7.4 on ink */
  background:var(--surface);
  color:var(--text);
}

/* ============================================================
   SHARED SYSTEM — used by every case study page.
   index.html keeps its own inline copy of the tokens above; the two
   must stay in step until the homepage is migrated onto this file.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{background:var(--surface);color:var(--text);font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,.92rem + .3vw,1.15rem);line-height:1.68;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--brass);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass-ink);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bone);
  padding:14px 22px;border-radius:0 0 4px 0}
.skip:focus{left:0}

.wrap{width:min(1320px,100% - var(--gut)*2);margin-inline:auto}
.narrow{width:min(760px,100% - var(--gut)*2);margin-inline:auto}
.band{padding-block:clamp(4.5rem,10vw,9rem)}

.display{font-family:var(--serif);font-weight:400;line-height:.96;letter-spacing:-.025em;text-wrap:balance}
.display em{font-style:italic}
h1.display{font-size:clamp(2.3rem,min(5.4vw,9vh),5rem)}
h2.display{font-size:clamp(1.8rem,4vw,3.2rem)}
.label{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-3)}
.lede{font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);line-height:1.5;color:var(--text-2);max-width:44ch}
p{color:var(--text-2);max-width:66ch}
p + p{margin-top:1.3em}
strong{color:var(--text);font-weight:400}

/* nav */
.nav{position:sticky;top:0;z-index:50;padding-block:clamp(16px,2.2vw,26px);
  background:color-mix(in srgb, var(--surface) 88%, transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule-soft)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.mark{display:inline-flex;align-items:center;gap:.72rem;font-size:.8rem;letter-spacing:.42em;text-transform:uppercase}
.mark svg{width:1.55em;height:1.55em;flex:none}
.nav-cta{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--rule);padding:.8em 1.4em;border-radius:999px;white-space:nowrap;
  transition:border-color .6s var(--ease),background .6s var(--ease),color .6s var(--ease)}
.nav-cta:hover{border-color:var(--brass);background:var(--brass);color:var(--ink)}

/* breadcrumb */
.crumb{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.crumb a:hover{color:var(--text)}
.crumb i{font-style:normal;opacity:.5}

/* case hero */
.case-hero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,3rem)}
.case-kicker{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}
.case-h1{margin-top:1.6rem;max-width:18ch}
.case-h1 span{display:block}
.case-h1 .to{color:var(--text-3)}
.case-sub{margin-top:1.6rem}
.case-shot{margin-top:clamp(2rem,5vw,3.5rem);border:1px solid var(--rule);border-radius:2px;
  overflow:hidden;background:var(--panel);box-shadow:0 30px 70px -40px rgba(31,33,31,.34)}
.case-shot img{width:100%;height:auto}

/* body */
.chapter{border-top:1px solid var(--rule);padding-top:clamp(1.6rem,3vw,2.2rem);
  margin-top:clamp(2.5rem,6vw,4rem);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);
  gap:clamp(1.5rem,4vw,4rem)}
@media (max-width:820px){ .chapter{grid-template-columns:1fr;gap:1.2rem} }
.chapter h2{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent-text);font-weight:400}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.facts li{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--rule);border-radius:999px;padding:.5em 1em}

/* next + cta */
.next{border-top:1px solid var(--rule);margin-top:clamp(3rem,7vw,5rem);padding-top:clamp(2rem,4vw,3rem);
  display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-end;flex-wrap:wrap}
.next-name{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1;letter-spacing:-.02em;
  color:var(--text);margin-top:.5rem;transition:color .5s var(--ease)}
.next a:hover .next-name{color:var(--brass-ink)}
.cta-band{text-align:center}
.cta-band h2{max-width:20ch;margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:.9em;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.24em;text-transform:uppercase;padding:1.1em 2.1em;border-radius:999px;
  border:1px solid var(--brass);position:relative;overflow:hidden;isolation:isolate;
  margin-top:2rem;transition:color .7s var(--ease)}
.btn::before{content:'';position:absolute;inset:0;background:var(--brass);transform:scaleY(0);
  transform-origin:bottom;transition:transform .7s var(--ease);z-index:-1}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:scaleY(1)}

footer.foot{border-top:1px solid var(--rule);padding-block:clamp(2rem,4vw,3rem);margin-top:clamp(3rem,7vw,5rem)}
.foot-in{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}