/* Jellytot. Tokens lifted off the Figma header rather than guessed:
   ground #FDFAF3, ink #341B55, PP Right Grotesk Medium at +0.5% tracking. */
:root{
  --ground:#FDFAF3; --panel:#F4F1E9; --sand:#E7E3DA;
  /* --muted was #7A7286: 4.40:1 on ground, 4.06:1 on panel, 3.58:1 on sand, and it is the
     colour of .small, figcaption, th, .kicker, .toc .n and .fac .k - all real text, most
     of it under 16px. It failed the 4.5:1 floor everywhere it was used. #635A70 is the
     same hue at 6.24 / 5.77 / 5.08. */
  --ink:#341B55; --sec:#4A3861; --muted:#635A70; --rule:#E0DCD3;
  --plum:#341B55; --on-plum:#CFC7DC; --rule-plum:#563E77;
  --purple:#6B4C9A; --gold:#F5B731; --orange:#E87529; --teal:#4DB6AC;
  /* TEXT-SAFE ACCENTS. Measured 2026-08-03 against --ground #FDFAF3: orange 2.87:1,
     gold 1.72:1, teal 2.34:1 - all three fail WCAG 2.2 SC 1.4.3 (4.5:1) and all three
     were being used for SMALL text (.num at 12px, .star .lbl at 11px). The brand colours
     are unchanged and stay the fills and the art; these are the same hues taken down far
     enough to be read. A separate token rather than a darker brand, because the failure
     is about the ROLE (small text on a light ground), not about the colour. */
  /* CORRECTED 2026-08-04, second pass. The first pass checked these against the PAGE
     ground only and shipped three values that fail on the panel and sand bands: orange
     4.41/3.89, gold 4.76/4.20, teal 4.17/3.67. A colour is not "accessible", it is
     accessible AGAINST SOMETHING, and .num and .star .lbl both sit inside .band--panel
     and .band--sand. These clear all three grounds at 4.6:1 or better, taken from the
     brand value with hue and saturation held. Aligned with the design system's
     tokens/a11y-corrections.css. */
  --orange-ink:#A24B11; --gold-ink:#845D06; --teal-ink:#2D6E68;
  --measure:760px; --pad:115px;
}

/* SELF-HOSTED, 2026-08-04. This was `src:local('PP Right Grotesk')`, which resolves only on
   a machine that already has the font installed - i.e. this one. Every visitor, and every
   phone, fell through to Instrument Sans and never saw the brand face. PP Acma was not
   loaded at all, though the brand specifies it as the BODY face
   (HANDOVER-brand-2026-07-28.md:71). ~19KB each, subset to Latin. */
@font-face{font-family:'PP Right Grotesk';src:url('/fonts/PPRightGrotesk-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'PP Acma';src:url('/fonts/PPAcma-Book.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PP Acma';src:url('/fonts/PPAcma-Medium.woff2') format('woff2');font-weight:500;font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'PP Right Grotesk','Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit}

.wrap{max-width:1440px; margin:0 auto; padding:0 var(--pad)}
.band{position:relative; overflow:hidden; padding:88px 0}
.band--panel{background:var(--panel)}
.band--sand{background:var(--sand)}
.band--plum{background:var(--plum); color:var(--ground)}

/* the faded marginal washes: decorative, behind the copy, running off the edge */
.wash{position:absolute; z-index:0; pointer-events:none; user-select:none}
.wash img{width:100%; height:auto}
.wash--r{right:-14%; width:48%}
.wash--l{left:-16%; width:52%}
.band > .wrap{position:relative; z-index:1}

/* type */
.kicker{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  font-weight:500; margin:0 0 26px; display:flex; align-items:center; gap:14px}
.kicker img{width:40px; height:40px; object-fit:contain; opacity:.85}
/* The DISPLAY face, named explicitly. body is now PP Acma (the brand's body face), and
   headings inherited from it - so without this line every headline on the site would have
   quietly become Acma the moment the body font was corrected. */
h1,h2,h3,.head__sub,.btn{font-family:'PP Right Grotesk','Instrument Sans',-apple-system,sans-serif}
h1{font-size:clamp(40px,5.2vw,69px); letter-spacing:.005em; line-height:1.15; font-weight:500; margin:0}
h2{font-size:clamp(30px,3.4vw,44px); letter-spacing:.005em; line-height:1.22; font-weight:500;
   margin:0 0 30px; max-width:var(--measure)}
h3{font-size:22px; line-height:1.3; font-weight:500; margin:0 0 12px}
p{font-size:20px; line-height:1.75; color:var(--sec); max-width:var(--measure); margin:0 0 26px}
.lede{font-family:'PP Right Grotesk','Instrument Sans',sans-serif; font-size:clamp(26px,3vw,34px);
  line-height:1.45; color:var(--ink); max-width:900px}
.small{font-size:15px; color:var(--muted); line-height:1.6; max-width:var(--measure)}

/* header */
.head{padding:50px 0 0}
.head__mark{display:inline-block; line-height:0; text-decoration:none}
.head__mark img{width:144px; height:auto; display:block}
.head__row{display:flex; justify-content:space-between; align-items:flex-start; gap:60px;
  margin:120px 0 0; flex-wrap:wrap}
.head__sub{font-size:clamp(18px,1.9vw,27px); line-height:1.35; font-weight:500; max-width:300px; margin:14px 0 0}
.head__meta{font-size:16px; color:var(--muted); margin:22px 0 0}

.hero{margin:0; width:100%}
.hero img{width:100%; height:auto}
/* One still, deliberately. The reel of 32 plates was replaced by the single
   strands plate: the hero is an image, not a carousel. */
.hero__still{width:100%; height:auto; display:block}

/* grids */
.cols{display:grid; gap:0; grid-template-columns:repeat(3,1fr); margin-top:44px}
.cols--2{grid-template-columns:repeat(2,1fr)}
.cols--4{grid-template-columns:repeat(4,1fr)}
.cols > div{padding:30px 44px 0 0}
.cols > div + div{border-left:1px solid var(--rule); padding-left:44px}
.cols h3{font-size:24px; letter-spacing:.005em}
.cols p{font-size:16px; line-height:1.7; margin:0}
.num{font-size:12px; letter-spacing:.14em; color:var(--orange-ink); font-weight:500; margin:0 0 12px}

/* table */
table{width:100%; border-collapse:collapse; margin:36px 0 34px}
th{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
   font-weight:500; text-align:left; padding:0 28px 12px 0; border-bottom:1px solid var(--ink)}
td{font-size:17px; line-height:1.6; color:var(--sec); padding:22px 28px 22px 0;
   border-bottom:1px solid var(--rule); vertical-align:top}
td:first-child{font-size:18px; font-weight:500; color:var(--ink); width:24%}
td:nth-child(2){width:26%}

/* art */
figure{margin:40px 0 0}
figure img{width:100%; height:auto; background:var(--ground)}
figcaption{font-size:15px; color:var(--muted); line-height:1.6; margin-top:14px; max-width:var(--measure)}
.trip{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:44px}
.trip figure{margin:0}
.trip figcaption{margin-top:18px}
.strip{height:130px; background-repeat:repeat-x; background-size:auto 100%; background-position:center}

/* pull quote */
.pull{background:var(--sand); padding:44px 48px; margin:40px 0 0}
.pull p{font-family:'PP Right Grotesk','Instrument Sans',sans-serif; font-size:clamp(24px,2.6vw,32px);
  line-height:1.4; color:var(--ink); max-width:1000px; margin:0}
.pull .src{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:16px}

/* north star + faculties */
.star{display:flex; align-items:center; gap:32px; background:var(--ink); color:var(--ground);
  padding:32px 40px; flex-wrap:wrap}
.star .lbl{font-size:11px; letter-spacing:.16em; color:var(--gold-ink); font-weight:500; min-width:130px}
.star .ttl{font-size:26px; font-weight:500; letter-spacing:.005em}
.star .txt{font-size:17px; line-height:1.6; color:var(--on-plum); flex:1; min-width:280px; margin:0}
.fac{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px}
.fac > div{background:var(--ground); padding:26px}
.fac .k{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
.fac h3{font-size:20px; margin:0 0 10px}
.fac p{font-size:14px; line-height:1.6; margin:0}

/* toc */
.toc{display:grid; grid-template-columns:repeat(2,1fr); gap:0}
.toc > div + div{border-left:1px solid var(--rule); padding-left:48px}
.toc > div{padding-right:48px}
.toc a{display:flex; gap:22px; padding:14px 0; border-bottom:1px solid var(--rule);
  text-decoration:none; font-size:18px; color:var(--ink)}
.toc a:hover{color:var(--purple)}
.toc .n{color:var(--muted); font-size:14px; min-width:44px; letter-spacing:.08em}

/* cta */
.cta h2{font-size:clamp(38px,4.8vw,62px); color:var(--ground); line-height:1.1; max-width:900px}
.cta p{color:var(--on-plum); max-width:700px}
.btn{display:inline-block; background:var(--gold); color:var(--ink); text-decoration:none;
  padding:17px 30px; border-radius:999px; font-size:16px; font-weight:500; margin-top:14px}
.btn--ghost{background:transparent; color:var(--ground); border:1px solid var(--rule-plum)}

/* footer */
footer{background:var(--plum); color:var(--ground); padding:76px 0 56px}
.foot__top{display:flex; justify-content:space-between; gap:60px; flex-wrap:wrap}
.foot__mark{font-size:22px; letter-spacing:.22em; font-weight:500; color:#fff}
.foot__tag{font-size:16px; color:var(--on-plum); line-height:1.6; max-width:330px; margin:24px 0 0}
.foot__links{display:flex; gap:72px}
.foot__links ul{list-style:none; margin:0; padding:0}
.foot__links li{font-size:16px; line-height:1.95; color:var(--on-plum)}
.foot__links a{text-decoration:none}
.foot__links a:hover{color:#fff}
.foot__rule{height:1px; background:var(--rule-plum); margin:40px 0}
.foot__base{display:flex; justify-content:space-between; font-size:14px; color:#9A8FAD; flex-wrap:wrap; gap:12px}

@media (max-width:1100px){
  :root{--pad:48px}
  .cols,.cols--4,.fac,.trip{grid-template-columns:1fr}
  .cols > div + div{border-left:0; border-top:1px solid var(--rule); padding-left:0; padding-top:30px}
  .toc{grid-template-columns:1fr}
  .toc > div + div{border-left:0; padding-left:0}
  .toc > div{padding-right:0}
  table,thead,tbody,th,td,tr{display:block}
  thead{display:none}
  td{padding:8px 0; border:0}
  td:first-child{width:auto; padding-top:20px}
  tr{border-bottom:1px solid var(--rule); padding-bottom:16px; display:block}
  .wash{display:none}
}
@media (max-width:640px){ :root{--pad:24px} .head__row{margin-top:70px} }