/* ============================================================
   SECTIONS: one chapter each, each on its own ground.
   Grammar: chaptered editorial (see skills_website/shreyansh-panda-site).
   ============================================================ */

/* ═══════════════ TITLE PAGE ═══════════════ */
.cover { position: relative; }

/* Sticks while Approach slides over it. --hero-top is set by the
   thread module when the hero is taller than the viewport, so the
   bottom of the title page (the CTA) is always seen before it's covered. */
.hero {
  position: sticky;
  top: var(--hero-top, 0px);
  z-index: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: clip;
  isolation: isolate;
}

/* Far plane: the OS1 field. The centre stays at full vermilion (text
   contrast is measured against it); only the edges fall off. */
.hero__field {
  position: absolute;
  inset: -4%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(125% 100% at 42% 44%, transparent 58%, rgb(214 52 20 / 0.22) 100%),
    radial-gradient(60% 40% at 50% 106%, rgb(196 44 14 / 0.14), transparent 70%);
  transform: scale(var(--field-s, 1));
  will-change: transform;
}

.hero__body {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--s-4) var(--gut) clamp(2.25rem, 7vh, 5rem);
  display: flex;
  flex-direction: column;
  transform: translate3d(0, var(--body-y, 0px), 0);
  will-change: transform;
}

.hero__mark {
  margin-top: auto;
  width: min(300px, 62vw);
  color: var(--white);
  margin-bottom: var(--s-4);
}
.js .hero__mark { display: none; }

/* a title page: the headline takes the optical centre of whatever
   room the masthead and the foot leave it */
.hero__title {
  margin-block: auto;
  padding-block: var(--s-4) var(--s-5);
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: var(--tr-display);
  color: var(--white);
}
/* Two set lines only where they fit; narrower screens let it wrap. */
.hero__title .line,
.hero__title .line > span { display: inline; }
@media (min-width: 1200px) {
  .hero__title .line {
    display: block;
    overflow: hidden;
    /* room for descenders inside the mask */
    padding: 0 0.04em 0.12em;
    margin: 0 -0.04em -0.12em;
  }
  .hero__title .line > span { display: inline-block; }
}

html:not(.js) .hero__mark + .hero__title { margin-top: 0; }

/* The foot is set on a hairline, the way a title page sets its imprint. */
.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s-5);
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid rgb(255 255 255 / 0.42);
}
.hero__sub {
  grid-column: 1;
  max-width: 40ch;
  font-size: var(--t-o-body);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.hero__cta {
  grid-column: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: clamp(1.4rem, 3.5vh, 2.25rem);
}
.hero__cta .link {
  font-family: var(--f-mono);
  font-size: var(--t-o-label);
  letter-spacing: -0.02em;
}

.hero__avail {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  justify-self: end;
  font-family: var(--f-mono);
  font-size: var(--t-o-label);
  font-weight: 700;
  letter-spacing: -0.02em;
  padding-bottom: 1rem;
}

/* The two strands. Positioned by thread.js on the gap between the
   headline's lines, back plane under the type, front plane over it. */
.strand {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--band-h, 34vh);
  pointer-events: none;
  transform: translate3d(0, calc(var(--band-y, 40vh) - 50% + var(--strand-y, 0px)), 0);
  will-change: transform;
}
.strand--back  { z-index: 1; }
.strand--front { z-index: 3; }
html:not(.js) .strand { display: none; }

@media (max-width: 760px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr); }
  .hero__avail { grid-column: 1; grid-row: auto; justify-self: start; padding: 0; margin-top: var(--s-4); }
  .hero__sub { max-width: none; }
}

/* ═══════════════ I · APPROACH ═══════════════
   Slides over the stuck title page. The shadow on its top edge is
   what sells the overlap: a raised sheet casting onto the orange. */
.approach {
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  box-shadow: 0 -22px 48px -26px rgb(var(--shade) / 0.42);
}
.approach__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-6) var(--s-6);
}
.approach__statement { grid-column: 1 / -1; }
.approach__statement .line { display: block; }
.approach__statement .line + .line { padding-left: clamp(0rem, 11vw, 13rem); }
.approach__body {
  grid-column: 2;
  display: grid;
  gap: var(--s-3);
}

@media (max-width: 860px) {
  .approach__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .approach__body { grid-column: 1; }
  .approach__statement .line + .line { padding-left: 0; }
}

/* ═══════════════ II · SERVICES ═══════════════ */
.services { padding-top: var(--s-7); }
.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: var(--s-5) var(--s-6);
  align-items: start;
}
.services__head { position: sticky; top: var(--s-6); }
.services__head .h2 { max-width: 13ch; }

.ledger { border-top: 1px solid var(--line-strong); }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 0.5rem var(--s-4);
  align-items: baseline;
  padding: clamp(1.15rem, 2vw, 1.6rem) 0;
  border-bottom: 1px solid var(--line);
}
.ledger__name {
  position: relative;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--tr-head);
  color: var(--display);
  text-wrap: balance;
  transition: transform var(--d-slow) var(--e-out);
}
/* a short length of thread draws in ahead of the name on hover */
.ledger__name::before {
  content: "";
  position: absolute;
  left: -1.9rem;
  top: 0.56em;
  width: 1.3rem;
  height: 1.5px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
}
.ledger__desc {
  font-size: var(--t-body);
  line-height: 1.55;
  max-width: 42ch;
  text-wrap: pretty;
}
@media (hover: hover) and (pointer: fine) {
  .ledger__row:hover .ledger__name { transform: translateX(1.9rem); }
  .ledger__row:hover .ledger__name::before { transform: scaleX(1); }
}

@media (max-width: 900px) {
  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .services__head { position: static; }
  .services__head .h2 { max-width: 18ch; }
  .ledger__row { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════ III · METHOD (the peak) ═══════════════ */
.method[data-ground] {
  position: relative;
  isolation: isolate;
  background: var(--white);
  padding-bottom: var(--s-8);
}

/* The orange ground: one viewport tall and sticky, so it always fills
   whatever part of the chapter is on screen. It floods down from the
   chapter's top edge once, when the chapter arrives (motion.css). */
.method__ground {
  position: sticky;
  top: 0;
  z-index: -1;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  background-color: var(--orange);
  background-image: var(--noise);
}

.method__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  column-gap: clamp(2rem, 6vw, 7rem);
  padding-top: var(--s-8);
}
.method__head { grid-column: 1; grid-row: 1; padding-bottom: var(--s-5); }
.method__h .line { display: block; }
.method__intro {
  margin-top: var(--s-4);
  max-width: 32ch;
  font-size: var(--t-o-body);
  line-height: 1.4;
  text-wrap: pretty;
}

.method__viz { grid-column: 2; grid-row: 1 / span 3; }
.method__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
}
.method__canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-height: 80svh;
}

.method__steps { grid-column: 1; grid-row: 2; }
.mstep {
  min-height: 60vh;
  min-height: 60svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
}
.mstep__n {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--f-mono);
  font-size: var(--t-o-label);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
/* the active stage gets a length of thread beside its number */
.mstep__n::after {
  content: "";
  width: 3.2rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
}
.mstep.is-on .mstep__n::after { transform: scaleX(1); }

.mstep__t {
  margin-top: var(--s-2);
  font-family: var(--f-display);
  font-size: clamp(2.3rem, 1.35rem + 2.9vw, 4.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tr-display);
}
.mstep__d {
  margin-top: var(--s-3);
  max-width: 30ch;
  font-size: var(--t-o-body);
  line-height: 1.4;
  text-wrap: pretty;
}
.mstep__out {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0;
  margin-top: var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-o-label);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mstep__out li:not(:last-child)::after {
  content: "·";
  margin-inline: 0.7em;
}

.method__foot {
  grid-column: 1;
  grid-row: 3;
  max-width: 30ch;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: var(--tr-head);
}

@media (max-width: 900px) {
  .method__grid { grid-template-columns: minmax(0, 1fr); }
  .method__head, .method__viz, .method__steps, .method__foot { grid-column: 1; grid-row: auto; }
  /* the thread becomes a strip pinned above the stages */
  .method__viz {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 36vh;
    height: 36svh;
    margin-inline: calc(var(--gut) * -1);
    background-color: var(--orange);
    background-image: var(--noise);
    border-bottom: 1px solid var(--line);
  }
  .method__sticky { position: static; height: 100%; }
  .method__canvas { width: auto; height: 100%; max-height: none; }
  .mstep { min-height: 54svh; }
}

/* ═══════════════ IV · STACK: the process ═══════════════
   Five worlds in one pinned act (process.js). Live, each world is a
   full-stage layer with no background of its own: the stage carries
   the ground (JS sets its data-ground), and the globe and the paint
   are canvases either side of the text. Static (reduced motion, no
   engine, no JS), the worlds are plain blocks with their own grounds. */
.stack { position: relative; }
.proc {
  --proc-top: clamp(5.25rem, 13.5vh, 8.25rem);
  --proc-foot: clamp(6.5rem, 17vh, 9.5rem);
}
.proc__stage { height: 100vh; height: 100svh; }

.proc__globe,
.proc__paint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.proc__globe { z-index: 1; }
.proc__paint { z-index: 3; }

.proc--live .proc__stage { isolation: isolate; }
.proc--live .proc__worlds { position: absolute; inset: 0; }
.proc--live .world {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: none;
  pointer-events: none;
}
.proc--live .world.is-shown { opacity: 1; }
.proc--live .world.is-entering { opacity: 1; z-index: 4; }

/* the section heading belongs to the first world */
.proc__h { max-width: 15ch; }
.proc--live .proc__h {
  position: absolute;
  z-index: 2;
  top: var(--proc-top);
  left: max(var(--gut), (100% - var(--wrap)) / 2 + var(--gut));
  opacity: 0;
}
.proc--live .proc__h.is-shown { opacity: 1; }

/* ── one world: name top left, globe right, the working detail low ── */
.world__grid {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head orb"
    ".    orb"
    "cap  orb";
  column-gap: var(--s-5);
  padding-block: var(--proc-top) var(--proc-foot);
}
/* intake sits under the section heading, so its name comes down */
.world[data-world="0"] .world__grid {
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    ".    orb"
    "head orb"
    "cap  orb";
}
.world[data-world="0"] .world__cap { margin-top: var(--s-4); }

/* entering behind the paint: each block settles in once the stroke has
   covered its place (process.js), with the page's one entrance */
.proc--live .world.is-entering :is(.world__head, .world__cap, .world__route) {
  opacity: 0;
  translate: 0 14px;
  transition: opacity var(--d-slow) var(--e-out), translate 620ms var(--e-out);
}
.proc--live .world.is-entering :is(.world__head, .world__cap, .world__route).is-in {
  opacity: 1;
  translate: none;
}

.world__head { grid-area: head; }
.world__meta {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  margin-bottom: 1.1rem;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}
.world__name {
  margin-left: -0.06em;
  font-family: var(--f-display);
  font-size: clamp(3.1rem, 0.55rem + 8.1vw, 8.6rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--display);
}

.world__cap { grid-area: cap; max-width: 30rem; }
.world__t {
  font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.55rem);
  line-height: 1.34;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.world__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4em;
  margin-top: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}
/* each tool on its own port, so a wrapped line never starts on a separator */
.world__tools li { display: inline-flex; align-items: center; gap: 0.6em; }
.world__tools li::before {
  content: "";
  flex: none;
  width: 0.42em;
  height: 0.42em;
  background: currentColor;
}
.world__loop {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-top: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.world__loop::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
}

/* On orange everything stays at the large-text floor (tokens.css).
   Scoped to the world: the stage above it carries a ground too. */
.world[data-ground="orange"] .world__meta,
.world[data-ground="orange"] .world__tools {
  font-size: var(--t-o-label);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
}
.world[data-ground="orange"] .world__t { font-size: clamp(var(--t-o-body), 1.2rem + 0.55vw, 1.75rem); }
.world[data-ground="orange"] .world__tools { gap: 0.3rem 1.2em; }

/* where the globe sits in this world; the canvas draws it here */
.world__orb {
  grid-area: orb;
  place-self: center;
  width: min(100%, 68vh);
  aspect-ratio: 1;
  translate: var(--orb-x, 0%) var(--orb-y, 0%);
  scale: var(--orb-s, 1);
}
.world[data-world="0"] { --orb-s: 0.86; --orb-y: 4%; }
.world[data-world="1"] { --orb-s: 1;    --orb-x: -2%; }
.world[data-world="2"] { --orb-s: 0.92; --orb-y: -2%; }
.world[data-world="3"] { --orb-s: 1;    --orb-x: -5%; }
.world[data-world="4"] { --orb-s: 0.86; --orb-x: 2%; }

/* the route: five ports, the current one larger, the passed ones filled */
.world__route {
  position: absolute;
  top: calc(var(--proc-top) + 0.2rem);
  right: var(--gut);
  display: flex;
  align-items: center;
  gap: 1.4rem;
  color: var(--display);
}
.world__route::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.world__route i {
  position: relative;
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  background: var(--ground);
}
.world[data-world="0"] .world__route i:nth-child(-n+1),
.world[data-world="1"] .world__route i:nth-child(-n+2),
.world[data-world="2"] .world__route i:nth-child(-n+3),
.world[data-world="3"] .world__route i:nth-child(-n+4),
.world[data-world="4"] .world__route i { background: currentColor; }
.world[data-world="0"] .world__route i:nth-child(1),
.world[data-world="1"] .world__route i:nth-child(2),
.world[data-world="2"] .world__route i:nth-child(3),
.world[data-world="3"] .world__route i:nth-child(4),
.world[data-world="4"] .world__route i:nth-child(5) { width: 15px; height: 15px; }

/* phones: name, then the globe, then the detail; same story */
@media (max-width: 760px) {
  .proc { --proc-top: 4.5rem; --proc-foot: 6rem; }
  .proc__h { max-width: 17ch; font-size: 1.45rem; }
  .world__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "head" "orb" "cap";
    column-gap: 0;
  }
  .world[data-world="0"] .world__grid {
    grid-template-rows: 5.5rem minmax(0, 1fr) auto auto;
    grid-template-areas: "." "orb" "head" "cap";
  }
  .world[data-world="0"] .world__cap { margin-top: var(--s-2); }
  .world__meta { margin-bottom: 0.6rem; }
  .world__name { font-size: clamp(2.6rem, 1.2rem + 7vw, 3.6rem); }
  .world__orb {
    width: auto;
    height: min(100%, 86vw);
    max-width: 100%;
    margin-block: 0.5rem;
  }
  .world[data-world] { --orb-x: 0%; --orb-y: 0%; }
  .world[data-world="3"] { --orb-x: -6%; }
  .world__route { gap: 0.9rem; top: calc(var(--proc-top) + 0.1rem); }
  .world[data-world="0"] .world__route { display: none; }
  .world__route i { width: 7px; height: 7px; }
  .world[data-world="0"] .world__route i:nth-child(1),
  .world[data-world="1"] .world__route i:nth-child(2),
  .world[data-world="2"] .world__route i:nth-child(3),
  .world[data-world="3"] .world__route i:nth-child(4),
  .world[data-world="4"] .world__route i:nth-child(5) { width: 11px; height: 11px; }
  .world__t { font-size: 1.15rem; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .proc { --proc-top: 3.75rem; --proc-foot: 5.25rem; }
  .proc__h { font-size: 1.25rem; }
  .world[data-world="0"] .world__grid { grid-template-rows: 4.5rem minmax(0, 1fr) auto auto; }
  .world__name { font-size: 2.35rem; }
  .world__t { font-size: 1.05rem; }
  .world[data-ground="orange"] .world__t { font-size: var(--t-o-body); line-height: 1.25; }
}

/* ── static: reduced motion, no engine, no JS ── */
.proc:not(.proc--live) .proc__stage { height: auto; }
.proc:not(.proc--live) .proc__globe,
.proc:not(.proc--live) .proc__paint,
.proc:not(.proc--live) .world__route { display: none; }
.proc:not(.proc--live) .proc__h {
  box-sizing: content-box;
  margin-left: max(0px, (100% - var(--wrap)) / 2);
  padding: var(--s-8) var(--gut) var(--s-6);
}
.proc:not(.proc--live) .world { position: relative; }
.proc:not(.proc--live) .world__grid,
.proc:not(.proc--live) .world[data-world="0"] .world__grid {
  height: auto;
  grid-template-rows: auto auto;
  grid-template-areas: "head orb" "cap orb";
  row-gap: var(--s-4);
  padding-block: var(--s-7);
}
.proc:not(.proc--live) .world[data-world="0"] .world__grid { padding-top: 0; }
.proc:not(.proc--live) .world[data-world="0"] .world__cap { margin-top: 0; }
.proc:not(.proc--live) .world__head { align-self: end; }
.proc:not(.proc--live) .world__cap { align-self: start; }
.proc:not(.proc--live) .world__orb {
  width: min(100%, 24rem);
  translate: none;
  scale: none;
}
.proc:not(.proc--live) .world__orb canvas { display: block; width: 100%; height: 100%; }
/* no JS: nothing to draw, so the text takes the width */
.proc:not(.proc--live):not(.proc--static) .world__orb { display: none; }
.proc:not(.proc--live):not(.proc--static) .world__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "cap"; }
@media (max-width: 760px) {
  .proc:not(.proc--live) .world__grid,
  .proc:not(.proc--live) .world[data-world="0"] .world__grid {
    grid-template-areas: "head" "orb" "cap";
    grid-template-rows: auto auto auto;
    padding-block: var(--s-6);
  }
  .proc:not(.proc--live) .world__orb { width: min(100%, 18rem); height: auto; margin: 0; }
}

/* after the pin: the whole stack, as a spec */
.stack__after { padding-block: var(--s-6) var(--s-8); }

.spec { border-top: 1px solid var(--line-strong); }
.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr);
  gap: 0.4rem var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.spec dt {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--tr-head);
  color: var(--display);
}
.spec dd ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0;
  font-size: var(--t-lead);
  line-height: 1.55;
}
.spec dd li:not(:last-child)::after {
  content: "·";
  margin-inline: 0.6em;
}

.stack__pull {
  max-width: 28ch;
  margin: var(--s-6) 0 0 auto;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: var(--tr-head);
  color: var(--display);
  text-align: right;
  text-wrap: balance;
}

@media (max-width: 760px) {
  .spec__row { grid-template-columns: minmax(0, 1fr); }
  .stack__pull { text-align: left; margin-left: 0; }
}

/* ═══════════════ V · WORK ═══════════════ */
.work { padding-top: calc(var(--s-8) * 0.7); }
.work__h { max-width: 17ch; margin-bottom: var(--s-6); }

.case__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
  gap: var(--s-3) var(--s-6);
  padding-block: var(--s-6);
}
/* the rule sits on the text column edges, not the padded box */
.case__grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gut);
  right: var(--gut);
  height: 1px;
  background: var(--line-strong);
}
.case__num {
  align-self: start;
  font-family: var(--f-display);
  font-size: clamp(3.8rem, 2rem + 5.6vw, 8.5rem);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--display);
}

.case__tag { margin-bottom: var(--s-2); }
.case__t {
  max-width: 22ch;
  margin-bottom: var(--s-5);
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.35rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--tr-head);
  color: var(--display);
  text-wrap: balance;
}

.case__dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
}
.case__dl dt { margin-bottom: 0.45rem; }
.case__dl dd { font-size: var(--t-body); line-height: 1.6; text-wrap: pretty; }

/* Results as one typographic line, not a row of tiles. */
.case__res {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) clamp(2rem, 5vw, 4.5rem);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.case__res > div { display: flex; flex-direction: column-reverse; gap: 0.3rem; }
.case__res dd {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tr-head);
  color: var(--display);
  font-variant-numeric: tabular-nums;
}
.case__res dt { font-size: var(--t-sm); }

@media (max-width: 860px) {
  .case__grid { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-5); }
  .case__num { font-size: 3.8rem; }
  .case__dl { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
}

/* ═══════════════ VI · PROOF ═══════════════ */
.proof__h { max-width: 18ch; margin-bottom: var(--s-6); }

.pquote blockquote {
  position: relative;
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: var(--tr-head);
  text-wrap: pretty;
}
.pquote blockquote::before {
  content: "“";
  position: absolute;
  right: 100%;
  margin-right: 0.08em;
}
.pquote figcaption {
  margin-top: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-o-label);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pquote--lead blockquote {
  max-width: 23ch;
  font-size: clamp(1.75rem, 0.95rem + 2.6vw, 3.4rem);
  line-height: 1.12;
}

.proof__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-6);
  width: min(100%, 980px);
  margin: var(--s-7) 0 0 auto;
}
.proof__pair .pquote:nth-child(2) { margin-top: var(--s-6); }
/* the supporting quotes are read, not looked at: text face, not display */
.proof__pair blockquote {
  font-family: var(--f-text);
  font-size: clamp(1.5rem, 1.3rem + 0.45vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.36;
}

@media (max-width: 860px) {
  .proof__pair { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-6); }
  .proof__pair .pquote:nth-child(2) { margin-top: 0; }
  .pquote blockquote::before { position: static; margin: 0; }
}

/* ═══════════════ VII · ABOUT ═══════════════ */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: var(--s-6);
  align-items: start;
}
.about__statement { max-width: 13ch; margin-bottom: var(--s-5); }
.about__copy { display: grid; gap: var(--s-3); max-width: 60ch; }
.about__copy p { font-size: var(--t-lead); line-height: 1.66; text-wrap: pretty; }

.about__meta {
  position: sticky;
  top: var(--s-5);
  margin-top: 0.6rem;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-strong);
}
.about__meta dl { display: grid; gap: var(--s-3); }
.about__meta dt { margin-bottom: 0.35rem; }
.about__meta dd { font-size: var(--t-body); line-height: 1.55; }

@media (max-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); }
  .about__meta { position: static; }
  .about__meta dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
}
@media (max-width: 520px) {
  .about__meta dl { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════ CLOSE ═══════════════
   Left-anchored, a full screen, and it holds: the last thing on the
   page is the one action, with the thread lying straight under it. */
.close {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: var(--s-6);
}
.close__inner {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--s-6);
  padding-bottom: var(--s-5);
}
.close__lead { grid-column: 1; grid-row: 1; }
/* the action resolves where the eye ends: bottom right */
.close__act {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  padding-top: var(--s-5);
}

.close__t {
  max-width: 20ch;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 0.95rem + 2.9vw, 3.7rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
.close__sub {
  max-width: 32ch;
  margin-top: var(--s-4);
  font-size: var(--t-o-body);
  line-height: 1.4;
  text-wrap: pretty;
}

.close__cta {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  --draw-c: clamp(0, calc((var(--sc-p, 1) - 0.1) * 3.6), 1);
}
.close__book {
  display: inline-grid;
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 1.2rem + 4.1vw, 5.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}
.close__book-t { display: inline-flex; align-items: baseline; gap: 0.18em; white-space: nowrap; }
.close__arr {
  font-family: var(--f-text);
  font-size: 0.5em;
  font-weight: 400;
  transition: transform var(--d-base) var(--e-out);
}
.close__thread {
  /* width 0 + min-width 100%: span the words without widening the link */
  width: 0;
  min-width: 100%;
  height: 0.16em;
  margin-top: 0.08em;
  overflow: visible;
}
.close__line,
.close__wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: opacity var(--d-base) var(--e-out);
}
.close__line { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw-c)); }
.close__wave { opacity: 0; }
.close__book:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .close__book:hover .close__line { opacity: 0; }
  .close__book:hover .close__wave { opacity: 1; }
  .close__book:hover .close__arr { transform: translateX(0.12em); }
}
.close__book:focus-visible { outline-offset: 8px; }

.close__len {
  max-width: 32ch;
  font-family: var(--f-mono);
  font-size: var(--t-o-label);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.close__alt {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--t-o-body);
  line-height: 1.4;
}
.close__alt .link { font-weight: 400; }

@media (max-width: 1000px) {
  .close__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .close__lead, .close__act { grid-column: 1; grid-row: auto; }
  .close__act { align-self: start; padding-top: var(--s-5); }
}

.colophon {
  border-top: 1px solid var(--line);
  padding-block: var(--s-3) max(var(--s-3), env(safe-area-inset-bottom));
}
.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-o-label);
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media (max-width: 640px) {
  .colophon__inner { flex-direction: column; }
}