/* Hennibros — Dos tintas / Two inks.
   Two inks on one sheet; text is the colour they make where they overlap.
   Motion identity (see NOTES.md): things arrive a little out of register and settle into register. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --paper: #F4F5F2;
  --blue: #2438FF;
  --red: #FF4B33;
  --over: #241033;            /* blue × red, multiplied */
  --rule: #C9CBC6;
  --gutter: clamp(1.125rem, 4vw, 4rem);
  --head: 4.5rem;
  --band: 3.5rem;             /* width of the overprint band around the seam */
  --ease: cubic-bezier(.2, .7, .2, 1);   /* signature: quick start, long soft landing, no overshoot */
  --quick: .14s; --std: .32s; --slow: .72s;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.nojs-only { display: none; }
html:not(.js) .nojs-only { display: block; }
html:not(.js) .contact .form, html:not(.js) .contact .proto:not(.nojs-only) { display: none; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--over);
  font: 430 1.0625rem/1.5 "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul { list-style: none; }
a { color: inherit; }
svg { display: block; }
i { font-style: normal; }

:focus-visible { outline: 3px solid var(--over); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 50; padding: .75rem 1rem; background: var(--over); color: var(--paper); font-weight: 700; }
.skip:focus { top: .5rem; }

/* ---------- wordmark ---------- */
.mark {
  font-weight: 850; font-stretch: 86%; font-size: 1.75rem; line-height: 1;
  letter-spacing: -.025em; text-decoration: none; color: var(--over);
  display: inline-flex; align-items: center; min-height: 3rem;
}
.mark .n1 { color: var(--blue); }
.mark .n2 { color: var(--red); mix-blend-mode: multiply; display: inline-block; margin-left: -.075em; transform: translate(0, .045em); }
.mark--big { font-size: clamp(3.5rem, 13vw, 11rem); letter-spacing: -.035em; min-height: 0; }

/* ---------- header ---------- */
.head {
  position: relative; z-index: 20;
  height: var(--head); padding: 0 var(--gutter);
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem);
}
.nav { margin-left: auto; display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); }
.nav a, .lang {
  font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .55rem) / 0 2px no-repeat;
  transition: background-size .2s var(--ease);
}
.nav a:hover, .lang:hover { background-size: 100% 2px; }
.menu-btn { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .6rem 1.25rem;
  font: inherit; font-weight: 700; font-stretch: 92%; text-decoration: none; line-height: 1.15;
  border: 0; border-radius: 0; cursor: pointer;
  transition: transform .12s var(--ease);
}
.btn:active { transform: translateY(2px); }
.btn--paper { background: var(--paper); color: var(--over); }
.btn--over { background: var(--over); color: var(--paper); }
.btn--blue { background: var(--blue); color: var(--paper); }
.btn--big { min-height: 3.5rem; padding-inline: 1.75rem; font-size: 1.125rem; }
@media (hover: hover) {
  .btn--paper:hover { background: var(--over); color: var(--paper); }
  .btn--over:hover, .btn--blue:hover { background: var(--red); color: var(--over); }
}

/* ---------- hero ---------- */
.hero { min-height: calc(100svh - var(--head)); display: flex; flex-direction: column; }
.hero__text {
  padding: clamp(1rem, 3.2vw, 2.75rem) var(--gutter) clamp(1.25rem, 2.6vw, 2.25rem);
  display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1rem 3rem; align-items: end;
}
h1 {
  font-weight: 800; font-stretch: 72%;
  font-size: clamp(2.375rem, 4.5vw, 4.5rem); line-height: .96; letter-spacing: -.012em;
  text-wrap: balance;
}
h1 span { display: block; }
.hero__sub { font-size: 1.0625rem; line-height: 1.45; max-width: 34ch; padding-bottom: .35em; }

.stage {
  --s: 50;
  position: relative; flex: 1; min-height: 25rem;
  isolation: isolate; background: var(--paper); overflow: clip;
}
.plane {
  position: absolute; top: 0; bottom: 0;
  mix-blend-mode: multiply;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  padding: clamp(1rem, 2vw, 1.75rem) var(--gutter) clamp(1.25rem, 2.4vw, 2.25rem);
  overflow: hidden;
}
.plane--ours {
  left: 0; width: calc(var(--s) * 1% + var(--band) / 2);
  background: var(--blue); color: var(--paper);
  padding-right: calc(var(--band) + 1.25rem);
}
.plane--yours {
  right: 0; width: calc((100 - var(--s)) * 1% + var(--band) / 2);
  background: var(--red); color: var(--over);
  padding-left: calc(var(--band) + 1.25rem);
}
.plane__word {
  color: var(--paper);          /* knocked out of the ink: the paper shows through */
  font-weight: 900; line-height: .8; letter-spacing: -.004em; white-space: nowrap;
  font-size: clamp(3rem, 9.2vw, 10rem); font-variation-settings: "wdth" 62;   /* no-JS setting; main.js fits it live */
  margin-top: .06em; padding-bottom: .14em;
}
.plane__word span { display: inline-block; transform-origin: 0 0; }
.plane__more { max-width: 30rem; display: grid; gap: 1.1rem; justify-items: start; }
.plane__more p { font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); line-height: 1.35; font-weight: 500; }
/* the narrow side reduces to its word and a compact call to action: the path never disappears */
.plane[data-narrow] { cursor: pointer; }
.plane[data-narrow] .plane__more p { display: none; }
.plane[data-narrow] .btn { min-height: 2.75rem; padding: .45rem .8rem; font-size: .9375rem; font-stretch: 84%; text-align: left; justify-content: flex-start; }

.seam {
  position: absolute; top: 0; bottom: 0; z-index: 5;
  left: calc(var(--s) * 1% - var(--band) / 2); width: var(--band);
  cursor: col-resize; user-select: none; -webkit-user-select: none;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.seam__hit { width: 3rem; height: 3rem; display: grid; place-items: center; touch-action: none; }
.stage[data-dragging] { user-select: none; -webkit-user-select: none; }
.seam__grip { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--paper); stroke-width: 2.5; stroke-linecap: square; transition: transform .15s var(--ease); }
.seam:hover .seam__grip, .seam[data-dragging] .seam__grip { transform: scale(1.12); }
/* without JS the seam cannot move: no grip, no hint, a clean static half and half */
html:not(.js) .seam, html:not(.js) .js-only { display: none; }
.seam:focus-visible { outline: 3px solid var(--paper); outline-offset: -6px; }
.plane--ours :focus-visible { outline-color: var(--paper); }

/* the load moment: both inks land off-register, then settle */
.motion .plane--ours { animation: reg-a var(--slow) var(--ease) both; }
.motion .plane--yours { animation: reg-b var(--slow) var(--ease) both; }
.motion .head .mark .n2 { animation: reg-n var(--slow) var(--ease) both; }
@keyframes reg-a { from { transform: translate(-22px, 14px); } }
@keyframes reg-b { from { transform: translate(18px, -16px); } }
@keyframes reg-n { from { transform: translate(.16em, -.12em); } }

/* ---------- sections ---------- */
.sec { padding: clamp(4rem, 9vw, 8.5rem) var(--gutter) 0; }
.sec__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 26rem); gap: 1.25rem 4rem; align-items: end;
  padding-bottom: clamp(1.5rem, 3vw, 2.75rem); border-bottom: 2px solid var(--over);
}
.sec__title {
  font-weight: 900; font-stretch: 62%; line-height: .82; letter-spacing: -.008em; word-spacing: .06em;
  font-size: clamp(4.25rem, 13.5vw, 13rem);
  margin-left: -.03em;
}
.ink-blue { color: var(--blue); }
.ink-red { color: var(--red); }
.sec__intro { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.35; font-weight: 500; padding-bottom: .3em; }

/* a word printed twice, once per ink, a hair out of register */
.twice { position: relative; color: var(--blue); isolation: isolate; width: fit-content; }
.twice::after {
  content: attr(data-text) / "";
  position: absolute; left: 0; top: 0; color: var(--red); mix-blend-mode: multiply;
  transform: translate(max(2px, .014em), max(1px, .005em)); width: 100%;   /* wraps exactly like the word under it */
}

/* crop marks: the corners of a trimmed sheet */
.crop { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--over); }
.crop::before { width: 14px; height: 1px; }
.crop::after { width: 1px; height: 14px; }
.crop--tl { left: -22px; top: -22px; } .crop--tl::before { top: 21px; left: 0; } .crop--tl::after { left: 21px; top: 0; }
.crop--tr { right: -22px; top: -22px; } .crop--tr::before { top: 21px; right: 0; } .crop--tr::after { right: 21px; top: 0; }
.crop--bl { left: -22px; bottom: -22px; } .crop--bl::before { bottom: 21px; left: 0; } .crop--bl::after { left: 21px; bottom: 0; }
.crop--br { right: -22px; bottom: -22px; } .crop--br::before { bottom: 21px; right: 0; } .crop--br::after { right: 21px; bottom: 0; }
.crop--tl::before, .crop--bl::before { transform: translateX(-8px); }
.crop--tr::before, .crop--br::before { transform: translateX(8px); }
.crop--tl::after, .crop--tr::after { transform: translateY(-8px); }
.crop--bl::after, .crop--br::after { transform: translateY(8px); }

/* printer's colour bar: the two inks and their overprint */
.bars { display: inline-flex; }
.bars i { width: 1.25rem; height: 1.25rem; background: var(--blue); }
.bars i:nth-child(2) { background: var(--over); }
.bars i:nth-child(3) { background: var(--red); }
.bars--big i { width: 2.25rem; height: 2.25rem; }

/* ---------- shared bits ---------- */
.status { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; }
.status__dot { width: .8rem; height: .8rem; background: currentColor; }
.small { font-size: .9375rem; line-height: 1.45; }

/* ---------- yours: four lines of work ---------- */
.lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 6vw, 6rem); }
.lines li { display: grid; grid-template-columns: clamp(4.5rem, 8vw, 6.5rem) minmax(0, 1fr); gap: clamp(1.1rem, 2.4vw, 2.25rem); align-items: start; padding: clamp(1.75rem, 3.2vw, 2.75rem) 0; border-bottom: 1px solid var(--rule); }
.fig { width: 100%; height: auto; isolation: isolate; }
.lines h3 { font-weight: 800; font-stretch: 84%; font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1; letter-spacing: -.015em; margin-bottom: .55rem; }
.lines p { max-width: 40ch; }
.fit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem clamp(2.5rem, 6vw, 6rem); padding-top: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.fit__lead { font-weight: 800; font-stretch: 84%; font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.fit p:last-child { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4; max-width: 44ch; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; gap: 2.25rem clamp(2.5rem, 6vw, 6rem); padding-top: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.contact .proto { grid-column: 2; grid-row: 1; }
.contact .form { grid-column: 1; grid-row: 1 / span 2; }
.contact .proof { grid-column: 2; grid-row: 2; }
.form { display: grid; gap: 2rem; justify-items: start; }
.form > * { width: 100%; }
.form > .btn { width: auto; }
legend, .field label { display: block; font-weight: 800; font-stretch: 88%; font-size: 1.375rem; line-height: 1.15; padding: 0; }
.chips__row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 2.875rem; padding: .4rem 1rem; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--over); }
.chips input:checked + span { background: var(--blue); color: var(--paper); box-shadow: none; }
.chips input:focus-visible + span { outline: 3px solid var(--over); outline-offset: 3px; }
@media (hover: hover) { .chips label:hover input:not(:checked) + span { box-shadow: inset 0 0 0 3px var(--over); } }
.hint { margin-top: .3rem; font-size: .9375rem; }
textarea, input[type="text"] {
  display: block; width: 100%; margin-top: .7rem; padding: .85rem 1rem;
  font: inherit; color: var(--over); background: #fff;
  border: 0; border-radius: 0; box-shadow: inset 0 0 0 1.5px var(--over);
}
textarea { resize: vertical; min-height: 9rem; }
textarea:focus-visible, input[type="text"]:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; box-shadow: none; }
textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 3px var(--red); }
.err { margin-top: .6rem; padding: .6rem .85rem; background: var(--red); color: var(--over); font-weight: 700; }

.proof { display: grid; gap: 2.25rem; }
.proto { padding: 1rem 1.1rem; border-left: .5rem solid var(--red); background: #fff; font-size: .9375rem; line-height: 1.45; }
.slip { position: relative; margin: 22px; background: #fff; padding: 1.25rem 1.25rem 1.4rem; }
.slip__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .85rem; border-bottom: 2px solid var(--over); }
.slip h3 { font-weight: 800; font-stretch: 84%; font-size: 1.375rem; line-height: 1; }
.slip pre { margin: 0; padding: 1rem 0 1rem; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.slip__note { padding: .75rem 0 1rem; border-top: 1px solid var(--rule); font-size: .9375rem; font-weight: 600; }
.slip__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.slip__status { font-weight: 700; }
.motion .slip[data-ready] { animation: reg-slip .5s var(--ease); }
@keyframes reg-slip { from { transform: translate(8px, -8px); } }

/* ---------- medium ---------- */
@media (max-width: 80rem) {
  .hero__text, .sec__head { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 62rem) {
  .hero { min-height: min(calc(100svh - var(--head)), 48rem); }
  .hero__sub { max-width: 46ch; }
  .sec__intro { max-width: 38ch; }
  .contact, .fit { grid-template-columns: 1fr; }
  .contact { grid-template-rows: none; }
  .contact .proto, .contact .form, .contact .proof { grid-column: 1; grid-row: auto; }

  /* the sheet turns, the seam runs across: a narrow column would squeeze the word to nothing */
  :root { --band: 3rem; }
  .stage { min-height: 34rem; }   /* two stacked planes each need room for word, sentence and button */
  .plane { left: 0; right: 0; width: auto; padding: .9rem var(--gutter) 1rem; gap: .5rem; }
  .plane--ours { bottom: auto; height: calc(var(--s) * 1% + var(--band) / 2); padding-right: var(--gutter); padding-bottom: calc(var(--band) + .6rem); }
  .plane--yours { top: auto; height: calc((100 - var(--s)) * 1% + var(--band) / 2); padding-left: var(--gutter); padding-top: calc(var(--band) + .6rem); }
  .plane__word { font-size: clamp(3rem, 21vw, 7rem); margin-top: 0; }
  .plane__more { gap: .7rem; max-width: 40rem; }
  .plane[data-narrow] { flex-direction: row; align-items: center; }
  .plane[data-narrow] .plane__word { padding-bottom: 0; }
  .plane[data-narrow] .plane__more { flex: none; max-width: 46%; }
  .seam { left: 0; right: 0; width: auto; bottom: auto; top: calc(var(--s) * 1% - var(--band) / 2); height: var(--band); cursor: row-resize; }
  .seam__grip { transform: rotate(90deg); }
  .seam:hover .seam__grip, .seam[data-dragging] .seam__grip { transform: rotate(90deg) scale(1.12); }
}

/* ---------- narrow ---------- */
@media (max-width: 45rem) {
  :root { --head: 4rem; }
  .head .mark { font-size: 1.5rem; }
  .nav { display: none; }
  .lang { margin-left: auto; }
  .menu-btn { order: 3; }
  .js .menu-btn {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem;
    font: inherit; font-weight: 700; color: var(--paper); background: var(--over); border: 0; border-radius: 0; cursor: pointer;
  }
  .js .menu-btn[aria-expanded="true"] { background: var(--blue); }
  .nav[data-open], html:not(.js) .nav {
    display: grid; position: absolute; left: 0; right: 0; top: 100%; margin: 0; gap: 0;
    background: var(--paper); border-bottom: 2px solid var(--over); padding: 0 var(--gutter) .75rem;
  }
  html:not(.js) .nav { position: static; display: flex; flex-wrap: wrap; gap: 0 1rem; border: 0; padding: 0; }
  html:not(.js) .head { height: auto; flex-wrap: wrap; padding-block: .5rem; }
  .nav[data-open] a { font-weight: 800; font-stretch: 84%; font-size: 1.75rem; min-height: 3.5rem; border-top: 1px solid var(--rule); background: none; }

  .hero__text { padding-top: .75rem; }
  h1 { font-size: clamp(2.375rem, 11.2vw, 3.25rem); }
  .js-only { display: none; }        /* on a phone the sentence explains; the grip speaks for itself */
  .plane__more p { font-size: 1rem; line-height: 1.3; }

  .lines { grid-template-columns: 1fr; }
  .slip { margin: 22px 14px; }
}

/* ---------- scroll-linked values ----------
   --p runs 0 → 1 as a [data-scroll] element crosses the viewport (site.js). Without JS, or with
   reduced motion, it stays at 1: every composition is drawn in its final, settled state. */
[data-scroll] { --p: 1; }

/* ---------- chapter: selected work ---------- */
.chapter {
  position: relative; isolation: isolate; overflow: clip;
  margin-top: var(--gutter); min-height: 100svh;
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--gutter) clamp(1.5rem, 3.5vw, 3rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
  background: var(--blue); color: var(--paper);
}
/* one pass of red ink crosses the sheet while the title opens from condensed to extended */
.chapter__pass {
  position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 36%;
  background: var(--red); mix-blend-mode: multiply;
  transform: translateX(calc(var(--p) * 278% - 100%));   /* comes to rest on the sheet: both inks stay in the picture */
}
.chapter__title {
  font-weight: 900; line-height: .8; letter-spacing: -.012em;
  font-size: clamp(3.25rem, 10.6vw, 13rem);
  font-stretch: calc(62% + var(--p) * 63%);
  margin-left: -.03em; padding-top: .06em;
}
.chapter__title span { display: block; white-space: nowrap; }
.chapter__foot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem clamp(2.5rem, 6vw, 6rem); align-items: end; }
.chapter__foot p { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.35; font-weight: 500; max-width: 26ch; }
.chapter__index { list-style: none; margin: 0; padding: 0; border-bottom: 1.5px solid var(--paper); }
.chapter__index a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .7rem 0 .8rem; border-top: 1.5px solid var(--paper); text-decoration: none;
}
.chapter__index b { font-weight: 800; font-stretch: 84%; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1; letter-spacing: -.02em; transition: font-stretch var(--std) var(--ease); }
.chapter__index span { font-weight: 600; }
.chapter__index a:focus-visible { outline-color: var(--paper); }
@media (hover: hover) { .chapter__index a:hover b { font-stretch: 112%; } }

/* ---------- work: one sheet per project ----------
   Every project is printed with the same two inks; which ink leads is the project's own voice.
   Adding a project = adding one <article class="work">. */
.work {
  position: relative; isolation: isolate; overflow: clip;
  padding: clamp(4rem, 9vw, 8.5rem) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2.5rem, 6vw, 6rem);
  grid-template-areas: "head fig" "body fig"; grid-template-rows: auto 1fr; align-items: start;
}
.work__head { grid-area: head; display: grid; gap: 1.1rem; justify-items: start; }
.work__fig { grid-area: fig; align-self: center; min-width: 0; }
.work__body { grid-area: body; display: grid; gap: 1.1rem; justify-items: start; max-width: 34rem; }
.work__name { font-weight: 900; font-stretch: 70%; font-size: clamp(4rem, 9.6vw, 9.5rem); line-height: .82; letter-spacing: -.02em; margin-left: -.03em; }
.work__lead { font-weight: 800; font-stretch: 84%; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; padding-bottom: .2em; }
.work__now { font-weight: 700; }
.work__shows { width: 100%; font-size: .9375rem; line-height: 1.45; font-weight: 600; padding-top: 1rem; margin-top: .4rem; border-top: 1.5px solid currentColor; }
.work__body .btn { margin-top: .4rem; }
/* the project's ink fills the sheet; what settles into register is the printed figure */
.work__ink { position: absolute; inset: 0; z-index: -1; }
.sheet { position: relative; margin: 22px; background: #fff; isolation: isolate; transition: transform var(--slow) var(--ease); }
.motion .work:not(.is-in) .sheet { transform: translate(16px, -12px); }
.sheet svg { width: 100%; height: auto; }
.work__fig figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-size: .9375rem; line-height: 1.4; }
.sheet figcaption { padding: .2rem 6.25% 1.1rem; color: var(--over); }
.work--forge .crop::before, .work--forge .crop::after { background: var(--paper); }

/* Introvert: the lead project. Both inks; full-width name; the largest figure on the page. */
.work--introvert { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head head" "fig body"; padding-top: clamp(4.5rem, 10vw, 9.5rem); align-items: center; }
.work--introvert .work__name { font-size: clamp(4.5rem, 20.4vw, 26rem); font-stretch: 96%; line-height: .78; letter-spacing: -.035em; }
.work--introvert .work__lead { font-size: clamp(2rem, 3.7vw, 3.5rem); line-height: 1; }
.circle svg { width: 100%; max-width: 44rem; height: auto; overflow: visible; isolation: isolate; }
.circle__a, .circle__b { transform-box: fill-box; transform-origin: center; }
.motion .circle__a { transform: translateX(calc((1 - var(--q, 1)) * -105px)) scale(calc(.2 + .8 * var(--g, 1))); }
.motion .circle__b { transform: translateX(calc((1 - var(--q, 1)) * 105px)) scale(calc(.2 + .8 * var(--g, 1))); }
.circle__steps { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; max-width: 44rem; }
.circle__steps li { display: inline-flex; align-items: center; gap: .55rem; font-weight: 500; }
.circle__steps li::before { content: ""; width: .7rem; height: .7rem; box-shadow: inset 0 0 0 1.5px var(--over); }
.circle:not([data-step]) li:last-child, .circle[data-step="1"] li:nth-child(1), .circle[data-step="2"] li:nth-child(2), .circle[data-step="3"] li:nth-child(3) { font-weight: 800; }
.circle:not([data-step]) li:last-child::before, .circle[data-step="1"] li:nth-child(1)::before, .circle[data-step="2"] li:nth-child(2)::before, .circle[data-step="3"] li:nth-child(3)::before { background: var(--over); }

/* Forge: blue. Done, printed over planned. Stepped and measured. */
.work--forge { color: var(--paper); }
.work--forge .work__ink { background: var(--blue); }
.work--forge :focus-visible { outline-color: var(--paper); }
.log__done rect, .log__plan rect { transform-box: fill-box; transform-origin: left center; }
.log__done rect { transition: transform .42s steps(7, end); }
.log__done rect:nth-child(2) { transition-delay: .07s; } .log__done rect:nth-child(3) { transition-delay: .14s; }
.log__done rect:nth-child(4) { transition-delay: .21s; } .log__done rect:nth-child(5) { transition-delay: .28s; }
.log__done rect:nth-child(6) { transition-delay: .35s; }
.motion .work:not(.is-in) .log__done rect { transform: scaleX(0); }
/* the plan answers what was done: it starts flat, then each line adjusts */
.log__plan rect { transition: transform .5s var(--ease) 1s; }
.log__plan rect:nth-child(1) { transform: scaleX(1.18); } .log__plan rect:nth-child(3) { transform: scaleX(.76); }
.log__plan rect:nth-child(4) { transform: scaleX(1.3); } .log__plan rect:nth-child(5) { transform: scaleX(.9); }
.log__plan rect:nth-child(6) { transform: scaleX(.6); }
.motion .work:not(.is-in) .log__plan rect { transform: none; }
.log__key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; font-weight: 600; }
.log__key li { display: inline-flex; align-items: center; gap: .5rem; }
.log__key i { width: .8rem; height: .8rem; }
.k-blue { background: var(--blue); } .k-red { background: var(--red); } .k-over { background: var(--over); }

/* TierRival: red. A ranking that keeps moving; more energy than the rest of the page. */
.work--tierrival { color: var(--over); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "fig head" "fig body"; }
.work--tierrival .work__ink { background: var(--red); }
.rank__board { --lab: 5.25rem; --g: .6rem; --w: calc((100% - var(--lab) - 5 * var(--g)) / 5);
  position: relative; display: grid; grid-template-columns: var(--lab) repeat(5, 1fr); gap: var(--g); max-width: 42rem; }
.rank__board i { aspect-ratio: 1; background: var(--paper); }
.rank__board span { grid-column: 1; grid-row: calc(var(--r) + 1); align-self: center; font-weight: 700; font-size: .9375rem; line-height: 1.2; }
/* two places change division: one goes up while the other comes down */
.rank__board b { position: absolute; top: 0; left: calc(var(--lab) + var(--g) + var(--c) * (var(--w) + var(--g))); width: var(--w); aspect-ratio: 1; background: var(--over);
  transform: translateY(calc(var(--r) * (100% + var(--g))));
  transition: transform var(--slow) var(--ease); }
.work--tierrival .work__fig figcaption { margin-top: 1.1rem; }

/* ---------- the end: both inks in register ---------- */
.end { margin-top: clamp(5rem, 10vw, 9rem); }
.end__stage {
  position: relative; isolation: isolate; overflow: clip; background: var(--paper); color: var(--paper);
  min-height: min(92svh, 58rem); padding: clamp(1.5rem, 4vw, 3.5rem) var(--gutter) clamp(1.5rem, 3.5vw, 3rem);
  display: grid; grid-template-rows: auto 1fr auto; align-items: center; justify-items: start; gap: 1.5rem;
}
.end__plane { position: absolute; inset: 0; z-index: -1; mix-blend-mode: multiply; }
/* in register, but a sliver of each ink still shows at the edges: you can see it was printed twice */
.end__plane--a { background: var(--blue); transform: translateX(calc((1 - var(--p)) * -34% - 1.6%)); }
.end__plane--b { background: var(--red); transform: translateX(calc((1 - var(--p)) * 34% + 1.6%)); }
.end__line { font-weight: 800; font-stretch: 84%; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1; letter-spacing: -.015em; }
.end__mark {
  display: block; color: var(--paper); text-decoration: none; white-space: nowrap;
  font-weight: 900; line-height: .8; letter-spacing: -.035em; margin-left: -.03em;
  font-size: clamp(4rem, 21vw, 26rem); font-stretch: calc(62% + var(--p) * 24%);
}
.end__mark:focus-visible, .end__cta:focus-visible { outline-color: var(--paper); }
.end__meta { padding: 1.5rem var(--gutter) 2rem; display: grid; grid-template-columns: 1fr 1.4fr auto; gap: .75rem clamp(2rem, 5vw, 5rem); font-size: .9375rem; line-height: 1.45; }

@media (max-width: 62rem) {
  .chapter { min-height: 0; gap: clamp(4rem, 14vw, 9rem); }
  .chapter__foot { grid-template-columns: 1fr; }
  .work, .work--introvert, .work--tierrival { grid-template-columns: 1fr; grid-template-areas: "head" "fig" "body"; grid-template-rows: none; }
  .work__body { max-width: 40rem; }
  .end__meta { grid-template-columns: 1fr; }
}
@media (max-width: 45rem) {
  .chapter { min-height: 0; padding-top: 2.5rem; gap: 2.5rem; }
  .chapter__title { font-size: clamp(2.75rem, 13.4vw, 7rem); font-stretch: calc(62% + var(--p) * 22%); }

  .work { padding-block: 3.5rem; }
  .work--introvert .work__name { font-size: clamp(4rem, 21.5vw, 9rem); font-stretch: 92%; }
  .sheet { margin: 22px 14px; }
  .work__fig figcaption { margin: 0 14px; }
  .end__stage { min-height: min(82svh, 40rem); }
  .end__mark { font-size: clamp(4rem, 22vw, 9rem); font-stretch: calc(62% + var(--p) * 10%); }
}

/* short, wide screens (laptops): the whole hero, calls to action included, fits above the fold */
@media (min-width: 62.01rem) and (max-height: 50rem) {
  .hero__text { padding-block: .5rem 1rem; gap: .5rem 3rem; }
  h1 { font-size: clamp(2rem, 3.5vw, 3.25rem); }
  .hero__sub { font-size: 1rem; }
  .stage { min-height: 20rem; }
  .plane { padding-block: .9rem 1.1rem; }
}