/* =========================================================================
   SUPREMATIST PLATE — index.html only (appendix pages keep site.css)

   Gamma taken directly from Malevich, «Untitled», c. 1916 (Guggenheim
   76.2553.42): chalk-white ground with visible brushwork; muted ("глухой")
   pigments — viridian green, ultramarine, raspberry, dusty red, rust,
   mustard ochre, orange, faded pink, teal, silver grey, soft black.

   The register is an expensive coated art catalogue: generous margins,
   hairline rules, serif display, small-caps folios — with the painted
   forms doing the suprematism.
   ========================================================================= */

:root{
  /* ground */
  --paper:      #fffffe;
  --paper-hi:   #f6f5ef;
  --paper-lo:   #edebe3;
  --plate:      #ffffff;   /* the white of a printed plate */

  /* ink */
  --ink:        #26241f;
  --ink-strong: #191813;
  --ink-soft:   #4c4a42;
  --ink-faint:  #6f6c62;
  --hairline:   #d5d3c9;
  --hairline-soft: #e0ded5;

  /* pigments — each as a light/dark pair so every form can be painted */
  --green-1:  #45774f;  --green-2:  #2b5540;
  --black-1:  #34322c;  --black-2:  #16150f;
  --blue-1:   #3a55b0;  --blue-2:   #22398c;
  --rasp-1:   #a83048;  --rasp-2:   #832338;
  --red-1:    #a94136;  --red-2:    #8a2f26;
  --rust-1:   #a05a22;  --rust-2:   #7b4116;
  --ochre-1:  #cfa03a;  --ochre-2:  #ab7f23;
  --orange-1: #c96f2d;  --orange-2: #a85417;
  --pink-1:   #cf9297;  --pink-2:   #b97a80;
  --teal-1:   #337e7b;  --teal-2:   #23615e;
  --silver-1: #b3b4ae;  --silver-2: #91938c;

  --display: "Fraunces", Georgia, serif;
  --body:    "Newsreader", Georgia, serif;
  --label:   "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --maxw: 1060px;
  --colw: 66ch;

  /* fine grain — the tooth of the paper / the dry brush */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  /* broad strokes — the weave of the canvas */
  --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012 0.02' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.6 0.6 0.6 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%}
body{
  margin:0;
  position:relative;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.72;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
/* paper tooth over everything, very quiet */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-image:var(--grain);
  opacity:.055; mix-blend-mode:multiply;
}

::selection{background:#d9c9a8; color:var(--ink-strong)}

a{color:inherit}

/* =========================================================
   PAINTED FORMS — the shared recipe
   A form = pigment gradient + light falling from upper left
   + pigment pooling toward the lower edge + dry-brush grain.
   ========================================================= */
.pt{
  position:relative;
  background-image:
    radial-gradient(130% 100% at 28% 18%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%),
    radial-gradient(150% 130% at 72% 88%, rgba(0,0,0,.22), rgba(0,0,0,0) 62%),
    linear-gradient(158deg, var(--p1), var(--p2));
}
.pt::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain);
  opacity:.28; mix-blend-mode:overlay;
}
.pt.brushy::after{
  background-image:var(--weave), var(--grain);
  opacity:.4;
}
.c-black.brushy::after{opacity:.22}

/* =========================================================
   TEXT-FORMS — the figure IS the text
   No border, no fill: a dense block of tiny bold monospace,
   broken per character, glyphs painted with the pigment
   gradient and cut to the figure's silhouette. Squint: a
   colored plane. Look closer: decoded reasoning.
   ========================================================= */
.tf{overflow:hidden}
.tf .fill{
  position:absolute; inset:0; display:block;
  font-family:var(--mono); font-weight:700;
  font-size:6.5px; line-height:.98; letter-spacing:-.05em;
  word-break:break-all; white-space:normal;
  background-image:
    radial-gradient(130% 100% at 28% 18%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%),
    radial-gradient(150% 130% at 72% 88%, rgba(0,0,0,.34), rgba(0,0,0,0) 62%),
    linear-gradient(158deg, var(--p1), var(--p2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* slanted figures: a float spacer pushes each line to follow the contour,
   so the text snakes along the shape instead of being cut flat */
.f-green .fill::before{
  content:""; float:left; width:100%; height:34%;
  shape-outside:polygon(0 0, 100% 0, 0 100%);
}
.f-rasp .fill::before{
  content:""; float:left; width:100%; height:50%;
  shape-outside:polygon(0 0, 100% 0, 0 100%);
}
.f-blue .fill::before{
  content:""; float:left; width:38%; height:100%;
  shape-outside:polygon(0 0, 100% 0, 0 100%);
}
.f-silver .fill::before{
  content:""; float:left; width:100%; height:24%;
  shape-outside:polygon(0 0, 100% 0, 0 100%);
}

/* =========================================================
   PEASANT GRADIENTS — after the late peasant cycle
   («Крестьянин в поле», 1928-32): a figure split down the
   middle, each half its own smooth vertical gradient. These
   sit in FRONT of the noisy text-forms — flat, silent, eerie.
   ========================================================= */
.pg{
  position:relative; overflow:hidden;
  background-image:
    linear-gradient(180deg, var(--ga1), var(--ga2)),
    linear-gradient(180deg, var(--gb1), var(--gb2));
  background-size:51% 100%, 50% 100%;
  background-position:0 0, 100% 0;
  background-repeat:no-repeat;
}
.pg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); opacity:.2; mix-blend-mode:overlay;
}
/* the same split gradient, but set in type: glyphs carry the two halves */
.tf.pgx .fill{
  background-image:
    linear-gradient(180deg, var(--ga1), var(--ga2)),
    linear-gradient(180deg, var(--gb1), var(--gb2));
  background-size:51% 100%, 50% 100%;
  background-position:0 0, 100% 0;
  background-repeat:no-repeat;
}
.pg-a{--ga1:#b23a30; --ga2:#1a1511; --gb1:#d9a13c; --gb2:#8a4a16}
.pg-b{--ga1:#4a7d54; --ga2:#101310; --gb1:#c2c3bd; --gb2:#3a3a34}
.pg-c{--ga1:#3f57ae; --ga2:#131b3a; --gb1:#a83048; --gb2:#20080e}
.pg-d{--ga1:#a83048; --ga2:#170408; --gb1:#cf9297; --gb2:#6e2c33}
.pg-e{--ga1:#b9bab4; --ga2:#3f403b; --gb1:#34322c; --gb2:#0d0c08}

/* the two peasants standing in the hero composition */
.f-peasant1{
  width:min(6.5vw,80px); height:min(24vw,300px);
  right:8.5%; top:34%; z-index:2;
  transform:rotate(1.5deg);
}
.f-peasant2{
  width:min(4vw,48px); height:min(4vw,48px);
  right:12%; top:10%;
  transform:rotate(-7deg);
}

/* the detonation: a clicked text-form bursts into flying letter-shards */
.shardbox{
  position:absolute; pointer-events:none; z-index:998;
}
.shard{
  position:absolute; display:block;
  font-family:var(--mono); font-weight:700;
  font-size:6.5px; line-height:1; letter-spacing:-.05em;
  white-space:nowrap;
  will-change:transform,opacity;
  transition:transform 1s cubic-bezier(.15,.8,.25,1), opacity 1s ease;
}

/* the long field: text-forms scattered down the page margins.
   Kept quiet (opacity) so the page breathes; a lifted one returns to full. */
.field{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
}
.field > *{position:absolute; scale:var(--s,1); opacity:.5; transition:opacity .3s ease}
.field > *.lifted{opacity:1}
/* the topmost LIVE primitive under the cursor floats up — driven by JS
   (stack-probing), so a form lifts even when it sits behind another */
.field .tf, .field .spiral, .comp .tf{
  transition:scale .3s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.tf.lifted, .spiral.lifted{
  scale:calc(var(--s,1) * 1.16);
  filter:brightness(1.14) saturate(1.18);
  z-index:50;
}
.bg1{left:-46px; top:11%; width:210px; height:540px;
  clip-path:polygon(20% 0, 80% 2%, 100% 98%, 0 100%); transform:rotate(6deg)}
.bg2{right:-40px; top:20%; width:230px; height:230px;
  clip-path:polygon(0 50%, 100% 0, 100% 100%); transform:rotate(-8deg)}
.bg2 .fill::before{content:""; float:left; width:100%; height:50%;
  shape-outside:polygon(0 0, 100% 0, 0 100%)}
.bg3{left:-50px; top:33%; width:200px; height:460px;
  clip-path:polygon(30% 0, 75% 0, 100% 100%, 0 96%); transform:rotate(-4deg)}
.bg4{right:-56px; top:47%; width:260px; height:140px;
  clip-path:polygon(0 24%, 100% 0, 97% 100%, 2% 92%); transform:rotate(-12deg)}
.bg5{left:-30px; top:59%; width:180px; height:330px;
  clip-path:polygon(0 0, 100% 4%, 84% 100%, 10% 96%); transform:rotate(7deg)}
.bg6{right:-36px; top:71%; width:150px; height:420px;
  clip-path:polygon(26% 0, 70% 0, 100% 97%, 0 100%); transform:rotate(3deg)}
.bg7{left:-40px; top:86%; width:240px; height:110px;
  clip-path:polygon(0 30%, 100% 0, 96% 78%, 3% 100%); transform:rotate(-14deg)}
.bg8{right:-20px; top:15%; width:170px; height:44px;
  clip-path:polygon(0 20%, 100% 0, 98% 90%, 2% 100%); transform:rotate(9deg)}
.bg9{left:-24px; top:27%; width:150px; height:56px;
  clip-path:polygon(2% 0, 100% 10%, 96% 100%, 0 88%); transform:rotate(-6deg)}
.bg10{right:-18px; top:41%; width:60px; height:140px;
  clip-path:polygon(12% 0, 100% 4%, 88% 100%, 0 94%); transform:rotate(14deg)}
.bg11{left:-20px; top:52%; width:190px; height:36px;
  transform:rotate(-11deg)}
.bg12{right:-26px; top:64%; width:130px; height:52px;
  clip-path:polygon(0 0, 96% 12%, 100% 92%, 4% 100%); transform:rotate(5deg)}
/* elongated strays in the whitespace pockets right of the prose column */
.bg13{left:calc(50% + 300px); top:19%; width:400px; height:28px;
  clip-path:polygon(0 18%, 100% 0, 98% 84%, 1% 100%); transform:rotate(-3deg)}
.bg14{left:calc(50% + 330px); top:30%; width:34px; height:380px;
  clip-path:polygon(14% 0, 92% 2%, 100% 98%, 0 96%); transform:rotate(5deg)}
.bg15{left:calc(50% + 300px); top:47%; width:360px; height:24px;
  transform:rotate(2deg)}
.bg16{left:calc(50% + 360px); top:56%; width:300px; height:32px;
  clip-path:polygon(2% 0, 100% 12%, 97% 100%, 0 90%); transform:rotate(-7deg)}
.bg17{left:calc(50% + 310px); top:64%; width:30px; height:320px;
  transform:rotate(-4deg)}
.bg18{left:calc(50% + 320px); top:76%; width:440px; height:26px;
  clip-path:polygon(0 0, 99% 16%, 100% 90%, 2% 100%); transform:rotate(3deg)}
.bg19{left:calc(50% + 340px); top:83.5%; width:320px; height:22px;
  transform:rotate(-9deg)}
.bg20{left:26px; top:44%; width:60px; height:280px; transform:rotate(4deg)}
.bg21{right:30px; top:69%; width:50px; height:240px; transform:rotate(-3deg)}

/* the heap — checkmarks and trapezoids piled up, after ЖБ-1332 */
.chev{clip-path:polygon(0 0, 50% 55%, 100% 0, 100% 42%, 50% 100%, 0 42%)}
.bgH1{right:36px;  top:37%;   width:150px; height:110px; transform:rotate(-12deg)}
.bgH2{right:-12px; top:38.3%; width:110px; height:82px;  transform:rotate(16deg)}
.bgH3{right:92px;  top:39.4%; width:96px;  height:62px;
  clip-path:polygon(16% 0, 84% 4%, 100% 100%, 0 92%); transform:rotate(-5deg)}
.bgH4{right:18px;  top:40.3%; width:130px; height:26px;  transform:rotate(8deg)}
.bgH5{right:64px;  top:41.2%; width:84px;  height:62px;  transform:rotate(-22deg)}

/* spirals — text entering the whirl from the rim, and escaping it */
.spiral{position:absolute; overflow:visible}
.spiral text{font-family:var(--mono); font-weight:700; font-size:8.5px}
.bgS1{left:calc(50% + 310px); top:21%; width:290px; height:290px; transform:rotate(8deg)}
.bgS2{left:calc(50% + 320px); top:59%; width:260px; height:260px; transform:rotate(-6deg)}

@media (prefers-reduced-motion: no-preference){
  .field > *{opacity:0; animation:settle 1s cubic-bezier(.22,.9,.24,1) forwards}
}
/* small screens: the forms don't leave — they drift further from the text */
@media (max-width:1280px){
  .bg13,.bg14,.bg15,.bg16,.bg17,.bg18,.bg19{left:auto; right:-150px}
  .bgS1,.bgS2{left:auto; right:-190px}
}
@media (max-width:1200px){
  .bg1,.bg3,.bg5,.bg7,.bg9,.bg11{left:-130px}
  .bg2,.bg4,.bg6,.bg8,.bg10,.bg12{right:-130px}
  .bg20{left:-70px}
  .bg21{right:-70px}
  .bgH1,.bgH2,.bgH3,.bgH4,.bgH5{right:-120px}
}

.c-green  {--p1:var(--green-1);  --p2:var(--green-2)}
.c-black  {--p1:var(--black-1);  --p2:var(--black-2)}
.c-blue   {--p1:var(--blue-1);   --p2:var(--blue-2)}
.c-rasp   {--p1:var(--rasp-1);   --p2:var(--rasp-2)}
.c-red    {--p1:var(--red-1);    --p2:var(--red-2)}
.c-rust   {--p1:var(--rust-1);   --p2:var(--rust-2)}
.c-ochre  {--p1:var(--ochre-1);  --p2:var(--ochre-2)}
.c-orange {--p1:var(--orange-1); --p2:var(--orange-2)}
.c-pink   {--p1:var(--pink-1);   --p2:var(--pink-2)}
.c-teal   {--p1:var(--teal-1);   --p2:var(--teal-2)}
.c-silver {--p1:var(--silver-1); --p2:var(--silver-2)}

/* =========================================================
   MASTHEAD
   ========================================================= */
nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
nav .inner{
  max-width:1280px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; gap:18px;
  height:64px;
  overflow-x:auto; scrollbar-width:none;
}
nav .inner::-webkit-scrollbar{display:none}
.brand{
  display:flex; align-items:center; gap:11px;
  font-family:var(--display); font-weight:560; font-size:14.5px;
  letter-spacing:.1em; text-transform:uppercase;
  font-variation-settings:"opsz" 30;
  text-decoration:none; color:var(--ink-strong);
  white-space:nowrap; margin-right:auto;
}
.brand .mark{
  width:15px; height:15px; flex:none;
  transform:rotate(-8deg);
}
.tab{
  font-family:var(--display); font-size:13px; font-weight:470;
  letter-spacing:.08em; text-transform:uppercase;
  font-variation-settings:"opsz" 30;
  text-decoration:none; color:var(--ink-soft);
  white-space:nowrap; padding:6px 2px 4px;
  border-bottom:3px solid transparent;
  transition:color .18s ease;
}
.tab:hover{color:var(--ink-strong)}
.tab.here{
  color:var(--ink-strong);
  border-image:linear-gradient(120deg, var(--ochre-1), var(--ochre-2)) 1;
  border-bottom:3px solid var(--ochre-2);
}
.tab.paper{
  color:var(--plate); padding:8px 14px 7px; border-bottom:none;
}

/* =========================================================
   HERO — the plate itself
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  padding:96px 32px 72px;
  border-bottom:1px solid var(--hairline);
}
.hero .wrap{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto;
}

/* the composition — after Malevich, Untitled, c. 1916 */
.comp{position:absolute; inset:0; z-index:1; pointer-events:none}
.comp > *{position:absolute; display:block}
.comp a{
  pointer-events:auto; cursor:pointer;
  transition:scale .32s cubic-bezier(.2,.8,.2,1), filter .32s ease;
}
.comp a:focus-visible{outline:2px dashed var(--ink-strong); outline-offset:5px}

.f-green{
  width:min(30vw,380px); height:min(11.5vw,142px);
  right:1.5%; top:14%;
  clip-path:polygon(0 34%, 97% 0, 100% 78%, 3% 100%);
  transform:rotate(-3deg);
}
.f-trunk{
  width:min(8vw,100px); height:min(34vw,420px);
  right:6%; top:22%;
  clip-path:polygon(30% 0, 66% 0, 100% 96%, 90% 100%, 0 100%);
  transform:rotate(2deg);
}
.f-blue{
  width:min(9vw,110px); height:min(15.5vw,192px);
  right:4.5%; top:3%;
  clip-path:polygon(38% 0, 78% 0, 100% 100%, 0 100%);
  transform:rotate(6deg);
}
.f-rasp{
  width:min(7vw,86px); height:min(7vw,86px);
  right:1%; top:6%;
  clip-path:polygon(0 50%, 100% 0, 100% 100%);
}
.f-rust{
  width:min(14vw,176px); height:min(1.5vw,18px);
  right:5.5%; top:1.5%;
  transform:rotate(38deg);
}
.f-redchip{
  display:none;
}
.f-silver{
  width:min(21vw,264px); height:min(4.2vw,52px);
  right:2%; top:43%;
  clip-path:polygon(0 22%, 100% 0, 98% 100%, 2% 92%);
  transform:rotate(-4deg);
}
.f-teal{
  width:min(12vw,148px); height:min(1.2vw,14px);
  right:.5%; top:52%;
  transform:rotate(-2deg);
}
.f-pink{
  width:min(10.5vw,130px); height:min(1vw,12px);
  right:9%; top:47.5%;
  transform:rotate(-5deg);
}
.f-ochre-bar{
  width:min(12vw,148px); height:min(2.4vw,30px);
  right:20%; top:58%;
  transform:rotate(28deg);
}
.f-orange{
  width:min(2.5vw,30px); height:min(4.6vw,56px);
  right:23.5%; top:67%;
  transform:rotate(14deg);
}
.f-ochre-post{
  width:min(2.7vw,32px); height:min(13.5vw,164px);
  right:21.5%; top:63%;
  transform:rotate(-6deg);
}
.f-redbar{
  width:min(9vw,112px); height:min(1.4vw,17px);
  right:23%; top:38%;
  transform:rotate(-3deg);
}
.f-bluebar{
  width:min(11vw,136px); height:min(1.2vw,14px);
  right:13%; bottom:5.5%;
  transform:rotate(-7deg);
}
.f-dash{
  display:none;
}

/* entrance — the forms settle onto the canvas once */
@media (prefers-reduced-motion: no-preference){
  .comp i{
    opacity:0;
    animation:settle 1.1s cubic-bezier(.22,.9,.24,1) forwards;
  }
  .comp > *:nth-child(1) {animation-delay:.05s}
  .comp > *:nth-child(2) {animation-delay:.16s}
  .comp > *:nth-child(3) {animation-delay:.24s}
  .comp > *:nth-child(4) {animation-delay:.32s}
  .comp > *:nth-child(5) {animation-delay:.40s}
  .comp > *:nth-child(6) {animation-delay:.46s}
  .comp > *:nth-child(7) {animation-delay:.52s}
  .comp > *:nth-child(8) {animation-delay:.58s}
  .comp > *:nth-child(9) {animation-delay:.64s}
  .comp > *:nth-child(10){animation-delay:.70s}
  .comp > *:nth-child(11){animation-delay:.76s}
  .comp > *:nth-child(12){animation-delay:.82s}
  .comp > *:nth-child(13){animation-delay:.88s}
  .comp > *:nth-child(14){animation-delay:.94s}
  .hero h1, .hero .authors, .hero .affil, .hero .equal,
  .hero .tldr, .hero .pills{
    opacity:0; animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;
  }
  .hero h1{animation-delay:.1s}
  .hero .authors{animation-delay:.3s}
  .hero .affil{animation-delay:.38s}
  .hero .equal{animation-delay:.44s}
  .hero .tldr{animation-delay:.52s}
  .hero .pills{animation-delay:.62s}
}
@keyframes settle{
  from{opacity:0; translate:0 -14px}
  to{opacity:1; translate:0 0}
}
@keyframes rise{
  from{opacity:0; translate:0 16px}
  to{opacity:1; translate:0 0}
}

.kicker{
  font-family:var(--label); font-size:11.5px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 30px;
  display:flex; align-items:center; gap:16px;
}
.kicker::after{content:""; height:1px; width:72px; background:var(--ink-faint); opacity:.5}

.hero h1{
  font-family:var(--display);
  font-size:clamp(42px, 6.4vw, 84px);
  font-weight:430;
  line-height:1.02;
  letter-spacing:-.018em;
  margin:0 0 42px;
  max-width:11em;
  color:var(--ink-strong);
  font-variation-settings:"opsz" 90;
}
.hero h1 em{
  font-style:italic; font-weight:400;
  color:var(--rasp-2);
}

.authors{
  font-family:var(--body); font-size:20px; font-weight:500; line-height:1.75;
  margin:0 0 26px; max-width:60em; color:var(--ink-strong);
}
.authors sup{font-size:.62em; color:var(--ink-faint)}
.authors sup b{font-weight:700}
.authors .a1{color:var(--red-2)}
.authors .a2{color:var(--blue-2)}
.authors .a3{color:var(--silver-2)}
.authors .a4{color:var(--green-2)}
.authors .a5{color:var(--ochre-2)}
.authors .a6{color:var(--rasp-2)}
.authors .a7{color:var(--teal-2)}
.authors .sup-mark{color:var(--ink-strong)}
/* affiliations as collage cuts: each institution a painted offcut,
   tilted, sized to its name — Max Planck a long bar, Snyk a chip */
.affil{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:9px 8px; margin:0 0 56px; max-width:60em;
}
.affil-break{flex-basis:100%; height:0}
.chip{
  display:inline-flex; align-items:baseline; gap:5px;
  padding:8px 20px 7px;
  font-family:var(--label); font-size:11px; font-weight:500;
  letter-spacing:.02em; line-height:1.1;
  color:var(--plate); white-space:nowrap;
  position:relative;
  filter:drop-shadow(4px 5px 0 rgba(25,24,19,.55));
  transition:translate .16s ease, filter .16s ease;
}
.chip:hover{translate:-1px -1px; filter:drop-shadow(5px 7px 0 rgba(25,24,19,.62)); z-index:9}
/* Each chip's shadow falls right/down toward the next chip. Later siblings
   paint on top and would cover it, so stack earlier chips above later ones —
   then every chip's shadow shows, not just the last. */
.affil > *:nth-child(1){z-index:8}
.affil > *:nth-child(2){z-index:7}
.affil > *:nth-child(3){z-index:6}
.affil > *:nth-child(5){z-index:5}
.affil > *:nth-child(6){z-index:4}
.affil > *:nth-child(7){z-index:3}
.affil > *:nth-child(8){z-index:2}
.chip sup{font-size:.72em; opacity:.75; font-weight:600}
/* each cut its own silhouette — trapezoids, slants, shaved corners, points */
.chip:nth-child(1){rotate:-1.6deg;              /* parallelogram → */
  clip-path:polygon(7% 0, 100% 0, 93% 100%, 0 100%)}
.chip:nth-child(2){rotate:1.1deg; padding-right:26px; /* right arrow-cut */
  clip-path:polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%)}
.chip:nth-child(3){rotate:-.6deg;               /* long trapezoid, both corners in */
  clip-path:polygon(2% 0, 98% 0, 100% 100%, 0 100%)}
.chip:nth-child(4){rotate:1.8deg;               /* trapezoid narrowing down */
  clip-path:polygon(0 0, 100% 0, 92% 100%, 8% 100%)}
.chip:nth-child(5){rotate:-1.2deg;              /* shaved top-left + bottom-right */
  clip-path:polygon(9% 0, 100% 0, 100% 62%, 91% 100%, 0 100%, 0 38%)}
.chip:nth-child(6){rotate:2.2deg; padding-bottom:13px; /* pennant point down */
  clip-path:polygon(0 0, 100% 0, 100% 66%, 50% 100%, 0 66%)}
.chip:nth-child(7){rotate:-.9deg;               /* parallelogram ← */
  clip-path:polygon(0 0, 93% 0, 100% 100%, 7% 100%)}
/* the silver cut needs dark ink to stay legible */
.chip.c-silver{color:var(--ink-strong)}
.chip.c-silver sup{opacity:.6}
.equal{
  font-family:var(--body); font-style:italic; font-size:13.5px;
  color:var(--ink-faint); margin:0 0 44px;
}

/* the standfirst */
.tldr{
  position:relative;
  max-width:37em;
  margin:0 0 44px;
  padding:6px 0 6px 34px;
  font-family:var(--display);
  font-size:clamp(18px, 2vw, 22.5px);
  font-weight:380;
  line-height:1.52;
  color:var(--ink);
  font-variation-settings:"opsz" 30;
}
.tldr b{
  display:block;
  font-family:var(--display); font-size:clamp(28px, 3vw, 40px);
  font-weight:600; letter-spacing:.03em;
  font-variation-settings:"opsz" 60;
  color:var(--rasp-2); margin:0 0 14px;
}
.tldr .tbar{
  position:absolute; left:-3px; top:-6px; bottom:-6px; width:13px;
  transform:rotate(1.8deg);
  clip-path:polygon(22% 0, 100% 2%, 78% 100%, 0 98%);
}

.pills{display:flex; gap:18px; flex-wrap:wrap; margin:0 0 70px}
.blockbtn{
  display:inline-block; text-decoration:none; border:none; cursor:pointer;
  font-family:var(--display); font-size:14.5px; font-weight:520;
  letter-spacing:.15em; text-transform:uppercase;
  font-variation-settings:"opsz" 30;
  padding:16px 30px 15px;
  color:var(--plate);
  transition:translate .16s ease, box-shadow .16s ease;
}
.blockbtn:hover{
  translate:-2px -2px;
  box-shadow:5px 6px 0 rgba(168,48,72,.32);
}
.blockbtn.ghost{
  background:none; color:var(--ink-strong);
  outline:1.5px solid var(--ink-strong); outline-offset:-1.5px;
}
.blockbtn.ghost:hover{box-shadow:5px 6px 0 rgba(38,36,31,.16)}
.blockbtn.ghost::after{display:none}

/* =========================================================
   PLATES — figures framed like catalogue reproductions
   ========================================================= */
figure{margin:56px 0}
.plate-frame{
  background:var(--plate);
  border:1px solid var(--hairline);
  padding:clamp(18px, 3vw, 40px);
  box-shadow:0 1px 0 rgba(25,24,19,.05), 0 14px 40px -22px rgba(25,24,19,.28);
}
.plate-frame img{display:block; width:100%; height:auto}
.scroller{overflow-x:auto}
.scroller img{min-width:640px}
figcaption{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--hairline);
  font-family:var(--display); font-size:clamp(15px,1.5vw,17px); line-height:1.5;
  font-weight:400; color:var(--ink-soft);
  font-variation-settings:"opsz" 30;
  max-width:72ch;
}
figcaption b{
  font-weight:500; color:var(--ink-strong);
}

.teaser{margin:0}

/* the attack, side by side: source trace → injected → jailbroken trace */
.traces{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  gap:clamp(10px,1.6vw,20px); margin:0;
  position:relative;
}
.trace{
  background:#faf9f4; border:1px solid var(--hairline);
  padding:16px 18px 18px; overflow-x:auto; min-width:0;
  box-shadow:0 10px 30px -22px rgba(25,24,19,.3);
}
.trace.src{transform:rotate(-.5deg)}
.trace.dst{transform:rotate(.5deg)}
.trace .cap{
  font-family:var(--label); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px;
  display:flex; align-items:center; gap:8px;
}
.trace.src .cap{color:var(--ink-soft)}
.trace.dst .cap{color:var(--rasp-2)}
.trace .cap::before{
  content:""; width:11px; height:11px; flex:none; transform:rotate(-8deg);
  background:linear-gradient(150deg, var(--silver-1), var(--silver-2));
}
.trace.dst .cap::before{background:linear-gradient(150deg, var(--rasp-1), var(--rasp-2))}
.trace pre{
  margin:0; font-family:var(--mono); font-size:11px; line-height:1.62;
  color:var(--ink); white-space:pre;
}
.trace .k{color:var(--blue-2); font-weight:500}
.trace .v{color:var(--green-2)}
.trace .dim{color:var(--ink-faint)}
.trace .sig{
  display:inline-block; padding:0 4px;
  background:linear-gradient(100deg, #f6dde2, #efc9d1);
  color:var(--rasp-2); font-weight:500;
}
/* the injection arrow runs straight from the source signature to the
   jailbroken signature — positioned by JS (both sit on the same row) */
.inject{
  position:absolute; height:0; z-index:4; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  translate:0 -50%;
}
.inject::before{               /* the shaft */
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  translate:0 -50%; background:var(--ink-strong);
}
.inject::after{                /* the arrowhead at the jailbroken end */
  content:""; position:absolute; right:0; top:0; translate:0 -50%;
  border:6px solid transparent; border-left-color:var(--ink-strong); border-right:0;
}
.inject span{
  position:relative; z-index:1;
  font-family:var(--label); font-size:9px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--plate);
  background:linear-gradient(120deg, var(--black-1), var(--black-2));
  padding:6px 12px 5px; white-space:nowrap;
}
@media (max-width:720px){
  .traces{grid-template-columns:1fr}
  .inject{display:none}
}

.teaser-note{
  margin:20px 0 0; max-width:none;
  font-family:var(--display); font-size:clamp(17px,1.8vw,20px); font-weight:380;
  line-height:1.5; color:var(--ink); font-variation-settings:"opsz" 30;
}
.teaser-note b{
  font-weight:560; color:var(--rasp-2);
}

/* =========================================================
   GUESS THE MODEL — swaps in for the teaser figure
   ========================================================= */
.guessgame{margin:0}
.gg-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin:0 0 6px;
}
.gg-q{
  font-family:var(--display); font-weight:520;
  font-size:clamp(24px, 3.4vw, 40px); letter-spacing:-.01em;
  line-height:1.05; margin:0; color:var(--ink-strong);
  font-variation-settings:"opsz" 60;
}
.gg-q span{color:var(--tint, var(--rasp-2)); font-style:italic}
/* each model keeps one locked colour, in the question and on the badges */
.gg-m-claude{--p1:var(--blue-1);   --p2:var(--blue-2);   --tint:var(--blue-2)}
.gg-m-gpt   {--p1:var(--ochre-1);  --p2:var(--ochre-2);  --tint:var(--ochre-2)}
.gg-m-kimi  {--p1:var(--teal-1);   --p2:var(--teal-2);   --tint:var(--teal-2)}
.gg-m-glm   {--p1:var(--orange-1); --p2:var(--orange-2); --tint:var(--orange-2)}
.gg-meta{display:flex; align-items:center; gap:18px; padding-bottom:6px}
.gg-score{
  font-family:var(--mono); font-size:13px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  background:var(--paper-hi); border:1px solid var(--hairline);
  padding:6px 14px;
}
.gg-score b{color:var(--ink-strong); font-weight:600}
.gg-x{
  border:none; background:none; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-faint);
  padding:4px 0;
}
.gg-x:hover{color:var(--rasp-2)}
.gg-hint{
  font-family:var(--body); font-style:italic; font-size:14px;
  color:var(--ink-faint); margin:0 0 20px; max-width:64ch;
}
.gg-hint:empty{margin:0}

.gg-cols{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
  align-items:start;
}
.gg-col{
  text-align:left; cursor:pointer; font:inherit;
  background:#f5f4ee; border:1px solid var(--hairline);
  padding:22px 22px 20px;
  display:flex; flex-direction:column; gap:12px;
  min-height:230px;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .2s ease;
}
.gg-col:nth-child(1){transform:rotate(-.7deg)}
.gg-col:nth-child(2){transform:rotate(.5deg)}
.gg-col:nth-child(3){transform:rotate(-.35deg)}
.gg-cols:not(.revealed) .gg-col:hover{
  transform:translateY(-5px) rotate(0deg);
  box-shadow:6px 9px 0 rgba(168,48,72,.14);
  border-color:var(--rasp-1);
}
.gg-tag{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
}
.gg-trace{
  font-family:var(--mono); font-size:12px; line-height:1.7;
  color:var(--ink); overflow-wrap:anywhere; flex:1;
}
.gg-name{
  font-family:var(--display); font-weight:520; font-size:16px;
  color:var(--ink-strong); opacity:0; height:0; overflow:hidden;
  transition:opacity .35s ease;
  display:flex; align-items:center; gap:9px;
}
.gg-name::before{
  content:""; width:13px; height:13px; flex:none;
  background:linear-gradient(150deg, var(--p1,var(--silver-1)), var(--p2,var(--silver-2)));
  transform:rotate(-8deg);
}
.gg-cols.revealed .gg-name{opacity:1; height:auto}
.gg-cols.revealed .gg-col{cursor:default}
/* correctness lives on the column frame; the name badge keeps the model colour */
.gg-col.is-truth{border-color:var(--green-1); background:#eff4ee}
.gg-col.is-wrongpick{border-color:var(--rasp-1); background:#f8f0ec}
.gg-col.dim{opacity:.62}
.gg-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px 20px; flex-wrap:wrap; margin-top:24px;
}
.gg-foot-r{display:flex; align-items:center; gap:22px}
.gg-next{margin:0; border:none}

@media (max-width:720px){
  .gg-cols{grid-template-columns:1fr}
  .gg-col{min-height:0}
}

/* =========================================================
   SECTIONS
   ========================================================= */
section{padding:88px 32px 40px}
section .wrap{max-width:var(--maxw); margin:0 auto; position:relative; z-index:1}

.sect-head{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:26px;
  align-items:start;
  margin-bottom:40px;
}
.sect-no{
  width:64px; height:64px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:30px; font-weight:500;
  color:var(--plate);
  transform:rotate(-5deg);
  margin-top:6px;
}
.sect-no.tilt-r{transform:rotate(4deg)}
.sect-head .folio{
  font-family:var(--label); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
  display:flex; align-items:center; gap:14px;
  margin:0 0 14px;
}
.sect-head .folio::after{content:""; height:1px; flex:1; background:var(--hairline)}
.sect-head h2{
  font-family:var(--display);
  font-size:clamp(28px, 3.6vw, 46px);
  font-weight:440; line-height:1.12; letter-spacing:-.014em;
  margin:0; max-width:20em; color:var(--ink-strong);
  font-variation-settings:"opsz" 60;
}

h3{
  font-family:var(--display); font-size:clamp(21px,2.4vw,27px);
  font-weight:480; letter-spacing:-.01em; line-height:1.25;
  margin:64px 0 16px; color:var(--ink-strong);
}
h4{
  font-family:var(--label); font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  margin:44px 0 14px; color:var(--rasp-2);
}

.lede{
  font-family:var(--display); font-weight:380;
  font-size:clamp(18px, 2vw, 21px); line-height:1.55;
  color:var(--ink); max-width:46em; margin:0 0 26px;
  font-variation-settings:"opsz" 30;
}
section p{
  max-width:var(--colw);
  font-family:var(--display); font-size:clamp(18px, 2vw, 21px); font-weight:380; line-height:1.55;
  font-variation-settings:"opsz" 30;
}
.folio, .tag, .coltag, .colmeta, .axis-title, .chart-foot{max-width:none !important}
/* `section p` sets a 66ch measure for prose. Card text is not prose — it fills
   its box, which is already the column. Without this the trace sat at 66ch
   inside a much wider card. */
.monobody, .serifbody, .col p, .blk .body, .trace pre{max-width:none}
section p a{
  color:var(--rasp-2);
  text-decoration-color:color-mix(in srgb, var(--rasp-1) 45%, transparent);
  text-underline-offset:3px;
}
section p a:hover{text-decoration-color:var(--rasp-1)}

strong{color:var(--ink-strong)}

/* painted highlight */
mark{
  background:linear-gradient(104deg,
    color-mix(in srgb, var(--rasp-1) 22%, transparent),
    color-mix(in srgb, var(--rasp-2) 15%, transparent));
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  padding:.08em .22em; color:inherit;
}
.redact{
  display:inline-block; min-width:3.2em; height:.95em;
  vertical-align:text-bottom;
  background:linear-gradient(150deg, var(--black-1), var(--black-2));
  transform:rotate(-.4deg);
}
.redact.key{min-width:2.6em; height:.85em; margin-left:.1em; transform:rotate(-1.2deg)}

/* =========================================================
   EXAMPLE PANELS (prompt / decoded / answer)
   ========================================================= */
.ex{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:8px 0 4px; align-items:start}
@media (max-width:720px){.ex{grid-template-columns:1fr}}
.blk{
  background:var(--plate);
  padding:30px 34px 28px;
  max-width:56em;
  position:relative;
}
.blk .tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--label); font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 14px;
}
.blk .tag::before{
  content:""; width:11px; height:11px;
  background:linear-gradient(150deg, var(--p1,var(--black-1)), var(--p2,var(--black-2)));
  transform:rotate(-8deg);
}
.blk .body{margin:0; max-width:none}
.blk.prompt{
  transform:rotate(-.9deg); background:#f0f1f0;
  clip-path:polygon(.7% 3.2%, 100% 0, 99.2% 96.8%, 0 100%);
}
.blk.prompt .tag{--p1:var(--silver-1); --p2:var(--silver-2)}
.blk.reason{
  transform:rotate(-.8deg);
  background:#f9f0ec;
  clip-path:polygon(0 0, 99.4% 2.6%, 100% 100%, .8% 97.2%);
}
.blk.reason::before{
  content:""; position:absolute; top:0; left:0; right:0; height:7px;
  background:linear-gradient(100deg, var(--rasp-1), var(--rasp-2));
}
.blk.reason .tag{--p1:var(--rasp-1); --p2:var(--rasp-2); color:var(--rasp-2)}
.blk.reason .body{font-family:var(--mono); font-size:13px; line-height:1.75}
.blk.answer{
  transform:rotate(-.55deg); background:#f0f4ee;
  clip-path:polygon(1.1% 0, 99% 1.8%, 100% 98.2%, 0 100%);
}
.blk.answer .tag{--p1:var(--green-1); --p2:var(--green-2)}

/* =========================================================
   SIDE-BY-SIDE DECODED COLUMNS
   ========================================================= */
.sbs{display:grid; grid-template-columns:1fr 1fr; gap:22px}
/* reasoning cards share the jailbreak look: warm ground, a curved cut,
   and a coloured chip on top keyed to the card's own hue */
.col{
  position:relative;
  background:#faf6f1;
  padding:30px 32px 26px;
  min-width:0;
  transform:rotate(-.6deg);
  clip-path:polygon(0 0, 99.5% 2.4%, 100% 100%, .6% 97.6%);
}
.col::before{
  content:""; position:absolute; top:0; left:0; right:0; height:7px;
  background:linear-gradient(100deg, var(--p1,var(--rasp-1)), var(--p2,var(--rasp-2)));
}
.col.alt{
  background:#f6f5ef;
  transform:rotate(.55deg);
  clip-path:polygon(.5% 2.4%, 100% 0, 99.4% 97.6%, 0 100%);
}
.coltag{
  font-family:var(--label); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-strong); margin:0 0 4px;
  display:flex; align-items:center; gap:9px;
}
.coltag::before{
  content:""; width:11px; height:11px; flex:none;
  background:linear-gradient(150deg, var(--p1,var(--blue-1)), var(--p2,var(--blue-2)));
  transform:rotate(-8deg);
}
.colmeta{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-faint);
  margin:0 0 14px; word-break:break-all;
}
.monobody{
  font-family:var(--mono); font-size:13px; line-height:1.75; margin:0;
  overflow-wrap:anywhere;
}
.serifbody{font-size:15px; line-height:1.68; margin:0}

/* =========================================================
   THE CHART — painted bars, catalogue axis
   ========================================================= */
/* the chart floats right; the Results prose wraps down its left side */
.chartfig{
  float:right; width:min(46%, 440px);
  margin:4px 0 20px 36px;
}
.chartwrap{
  background:none; border:none; padding:0; box-shadow:none;
}
.chartbox{width:100%}
.clearfix{clear:both}

/* the heap: stolen traces of every shape, piled on the ground */
.heap{
  position:relative; overflow:hidden;
  min-height:min(74vh,660px);
  margin-top:0;
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-lo) 100%);
}
.heap .pile{position:absolute; inset:0}
.heap .pile > *{position:absolute; bottom:0}

/* =========================================================
   CAROUSEL — arrows + dots + swipe, one system for Privacy & Gallery
   ========================================================= */
.carousel{position:relative; margin:0}
.car-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:2px;
}
.car-track::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 100%; min-width:0; scroll-snap-align:center}
.car-slide .col{transform:none; width:100%}
/* the gallery breaks out wider than the text column — a page-sized plate */
.gal-break{
  width:min(94vw, 1360px);
  margin-left:calc(50% - min(47vw, 680px));
}
/* gallery traces are full-length — fill the wide plate, cap height, scroll inside */
#gallery-track .monobody{max-width:none; max-height:400px; overflow-y:auto; scrollbar-width:thin}
#gallery-track .col{width:100%}
.car-arrow{
  position:absolute; top:calc(50% - 22px); z-index:6;
  width:44px; height:44px; border:none; cursor:pointer; color:var(--plate);
  background:linear-gradient(150deg, var(--black-1), var(--black-2));
  font-family:var(--display); font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px -12px rgba(25,24,19,.5);
  transition:translate .15s ease, opacity .15s ease;
}
.car-arrow.prev{left:-14px}
.car-arrow.next{right:-14px}
.car-arrow:hover{translate:0 -2px}
.car-arrow[disabled]{opacity:.22; cursor:default; translate:0 0}
.car-dots{display:flex; gap:9px; justify-content:center; margin-top:18px}
.car-dot{
  width:9px; height:9px; border:none; padding:0; cursor:pointer;
  background:var(--hairline); transform:rotate(45deg);
  transition:background .2s ease, scale .2s ease;
}
.car-dot.on{background:var(--rasp-2); scale:1.25}
@media (max-width:640px){
  .car-arrow.prev{left:-6px} .car-arrow.next{right:-6px}
}
@media (max-width:720px){
  .chartfig{float:none; width:100%; margin:22px 0}
}
.axis-title{
  font-family:var(--display); font-size:16px; font-weight:420; font-style:italic;
  color:var(--ink-faint); margin:0 0 22px;
  font-variation-settings:"opsz" 30;
}
.chart{
  display:flex; align-items:flex-end; gap:clamp(18px,3vw,40px);
  height:250px;
  border-bottom:2px solid var(--ink-strong);
  padding:0 8px;
}
.bar{
  flex:1; max-width:110px; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  position:relative;
}
.bar i{
  display:block; width:100%;
  background-image:
    radial-gradient(130% 100% at 30% 12%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%),
    radial-gradient(150% 130% at 70% 95%, rgba(0,0,0,.2), rgba(0,0,0,0) 60%),
    linear-gradient(168deg, var(--p1), var(--p2));
}
.bar .val{
  font-family:var(--display); font-size:23px; font-weight:500;
  color:var(--ink-strong); margin-bottom:8px;
}
.bar .lab{
  position:absolute; top:100%; padding-top:12px;
  font-family:var(--display); font-size:16px; font-weight:440;
  color:var(--ink-soft); text-align:center; line-height:1.3;
  font-variation-settings:"opsz" 40;
}
.chart-foot{
  margin:56px 0 0; font-family:var(--body); font-style:italic;
  font-size:12.5px; color:var(--ink-faint);
}

.breakdown{
  list-style:none; margin:0; padding:0;
  font-size:14.5px;
}
.breakdown li{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:8px 0; gap:12px;
  border-bottom:1px solid var(--hairline-soft);
}
.breakdown li:last-child{border-bottom:none}
.breakdown .c{
  font-family:var(--display); font-size:17px; font-weight:500;
  color:var(--rasp-2); font-variant-numeric:tabular-nums;
}

/* =========================================================
   MARGINALIA
   ========================================================= */
.note{
  position:relative;
  max-width:56em;
  margin:36px 0;
  padding:22px 28px 20px 34px;
  background:var(--paper-hi);
  border:1px solid var(--hairline);
  font-size:15.5px;
}
.note::before{
  content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:7px;
  background:linear-gradient(170deg, var(--ochre-1), var(--ochre-2));
}
.note.alarm::before{background:linear-gradient(170deg, var(--rasp-1), var(--rasp-2))}
.note strong{
  font-weight:600; color:var(--ink-strong);
}

/* =========================================================
   MITIGATION CARDS
   ========================================================= */
.mit{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:20px; margin:36px 0 8px;
}
.card{
  background:var(--plate); border:1px solid var(--hairline);
  padding:26px 26px 22px;
  position:relative;
  box-shadow:0 8px 26px -20px rgba(25,24,19,.3);
}
.card::before{
  content:""; position:absolute; top:16px; right:16px;
  width:13px; height:13px;
  background:linear-gradient(150deg, var(--p1,var(--silver-1)), var(--p2,var(--silver-2)));
  transform:rotate(-8deg);
}
.card:nth-child(6n+1)::before{--p1:var(--green-1);  --p2:var(--green-2)}
.card:nth-child(6n+2)::before{--p1:var(--blue-1);   --p2:var(--blue-2)}
.card:nth-child(6n+3)::before{--p1:var(--rasp-1);   --p2:var(--rasp-2)}
.card:nth-child(6n+4)::before{--p1:var(--ochre-1);  --p2:var(--ochre-2)}
.card:nth-child(6n+5)::before{--p1:var(--teal-1);   --p2:var(--teal-2)}
.card:nth-child(6n+6)::before{--p1:var(--rust-1);   --p2:var(--rust-2)}
.card h4{
  margin:0 34px 12px 0;
  font-size:11.5px; color:var(--ink-strong);
}
.card p{margin:0; font-size:14.5px; line-height:1.68; color:var(--ink-soft)}

/* =========================================================
   TABLES
   ========================================================= */
.scroll-x{overflow-x:auto; margin:32px 0}
.dt{
  border-collapse:collapse; width:100%; min-width:640px;
  background:var(--plate); border:1px solid var(--hairline);
  font-size:14.5px; line-height:1.6;
}
.dt caption{
  caption-side:top; text-align:left;
  font-family:var(--label); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); padding:0 0 12px;
}
.dt th{
  font-family:var(--label); font-size:10.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; text-align:left;
  color:var(--plate);
  background:linear-gradient(150deg, var(--black-1), var(--black-2));
  padding:12px 18px;
}
.dt td{
  padding:16px 18px; vertical-align:top;
  border-top:1px solid var(--hairline-soft);
  color:var(--ink-soft);
}
.dt td.lab{
  font-family:var(--label); font-size:11px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-strong); line-height:1.6;
}
.dt tr:nth-child(even) td{background:var(--paper-hi)}
code, .m{font-family:var(--mono); font-size:.86em}

/* formula */
.code{
  margin:32px 0; padding:26px 30px;
  background:linear-gradient(155deg, var(--black-1), var(--black-2));
  color:#e9e7de;
  position:relative;
  max-width:56em;
  transform:rotate(-.3deg);
  box-shadow:8px 9px 0 color-mix(in srgb, var(--rasp-2) 30%, transparent);
}
.code::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); opacity:.2; mix-blend-mode:overlay;
}
.code pre{
  margin:0; font-family:var(--mono); font-size:14.5px; line-height:1.7;
  white-space:pre-wrap; word-break:break-word;
}

/* =========================================================
   FOOTER — the black square closes the page
   ========================================================= */
footer{
  margin-top:88px;
  position:relative;
  background:linear-gradient(160deg, var(--black-1) 0%, var(--black-2) 70%);
  color:#c9c6ba;
  padding:80px 32px 64px;
}
footer::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--weave), var(--grain); opacity:.14; mix-blend-mode:overlay;
}
footer .wrap{max-width:var(--maxw); margin:0 auto; position:relative; z-index:1}
footer p{max-width:78ch; font-size:14.5px; line-height:1.75}
footer strong{
  font-family:var(--label); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:#f0eee4;
}
footer a{color:#e4d9a8; text-underline-offset:3px}
footer .fin{
  margin-top:40px; padding-top:26px;
  border-top:1px solid rgba(233,231,222,.18);
  color:#8d8a7e; font-style:italic;
}

.pagenav{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:16px; margin:0 0 48px;
}
.pagenav a{
  display:block; text-decoration:none;
  font-family:var(--label); font-size:11.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:#f0eee4; line-height:1.6;
  padding:18px 20px;
  border:1px solid rgba(233,231,222,.25);
  transition:border-color .16s ease, translate .16s ease, box-shadow .16s ease;
}
.pagenav a:hover{
  border-color:#e4d9a8;
  translate:-2px -2px;
  box-shadow:4px 5px 0 rgba(207,160,58,.35);
}
.pagenav a b{
  display:block; font-family:var(--display); font-weight:420;
  font-size:16px; letter-spacing:0; text-transform:none;
  margin-top:6px; color:#fbfaf7;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .hero{padding:64px 22px 56px}
  section{padding:64px 22px 28px}
  nav .inner{padding:0 22px; gap:18px}
  .comp{opacity:.5}
  .f-trunk{right:8%}
  .f-ochre-post,.f-orange,.f-ochre-bar,.f-redbar{display:none}
  .sbs{grid-template-columns:1fr}
  .chartwrap{grid-template-columns:1fr}
  .chart{height:210px}
  .sect-head{grid-template-columns:1fr; gap:18px}
  .sect-no{width:52px; height:52px; font-size:24px}
  .blk.reason{margin-left:0}
}
@media (max-width: 560px){
  body{font-size:16px}
  .hero h1{font-size:clamp(36px,11vw,52px)}
  .comp{opacity:.32}
  .pills{gap:12px}
  .blockbtn{padding:14px 22px 13px}
}

/* Kimi drift exhibit: three columns like the paper's figure, stacked on narrow
   screens. The prompt sits above them as a full-width band. */
.sbs.trio{grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px}
@media (max-width:860px){ .sbs.trio{grid-template-columns:1fr} }
.driftprompt .monobody{margin-bottom:10px}
.driftprompt .colmeta{margin-top:12px}

/* Untruncated reasoning: the columns differ by up to 20x in length, so every
   box is the SAME fixed size and scrolls inside itself. max-height would leave
   short columns short; a fixed height keeps the row even. */
.sbs.trio .col{height:440px; overflow-y:auto; scrollbar-width:thin}
.driftprompt{max-height:none; overflow:visible}