@import url("tokens.css");

* {
  box-sizing: border-box;
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
body::before {
  position: fixed;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  content: "";
}
a {
  color: inherit;
  text-decoration: none;
}
.context-link {
  color: var(--red-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.context-link:hover {
  color: var(--ink);
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
.next-case a:focus-visible {
  outline-color: var(--paper);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-right: var(--gutter);
  padding-left: var(--gutter);
}
.mono {
  font: var(--text-label) / 1.4 var(--font-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
/* Archivo Black ships at 400 only, and the case-study h1 carries this class.
   Without the weight, WebKit synthesises the bold an h1 asks for and sets the
   headline about 5% wider than Chromium. */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
}

.topline {
  position: relative;
  z-index: 1;
  min-height: 73px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.back {
  grid-column: span 4;
  display: inline-flex;
  gap: 10px;
  width: fit-content;
  font:
    11px/1.2 "DM Mono",
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.back:hover {
  color: var(--olive);
}
.topline .case-name {
  grid-column: 6 / span 3;
  justify-self: center;
  font:
    500 16px "Libre Baskerville",
    Georgia,
    serif;
  letter-spacing: -0.05em;
}
.topline .contact {
  grid-column: 11 / span 2;
  justify-self: end;
  font:
    11px/1.2 "DM Mono",
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topline .contact:hover {
  color: var(--olive);
}

.case-hero {
  padding-top: clamp(44px, 7vw, 103px);
  padding-bottom: clamp(62px, 8vw, 125px);
  border-bottom: 1px solid var(--line);
}
.case-eyebrow {
  grid-column: span 3;
  align-self: start;
  color: var(--olive);
}
.case-hero h1 {
  grid-column: 3 / span 8;
  max-width: 9ch;
  margin: 0;
  font-size: clamp(63px, 9.8vw, 157px);
  line-height: 0.77;
}
.case-hero h1 em,
.chapter h2 em,
.next-case h2 em {
  color: var(--red);
  font-family: "Libre Baskerville", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.1em;
}
.case-intro {
  grid-column: 3 / span 6;
  margin: 36px 0 0;
  font:
    italic clamp(20px, 2vw, 29px) / 1.13 "Libre Baskerville",
    Georgia,
    serif;
}
.case-side {
  grid-column: 10 / span 3;
  align-self: end;
  margin: 38px 0 0;
  color: var(--olive);
  font-size: var(--text-small);
  line-height: 1.5;
}

.facts {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--ink);
}
.fact {
  grid-column: span 3;
  min-height: 180px;
  padding: 21px 23px 25px;
  border-right: 1px solid var(--ink);
}
/* A strip with a fifth beat (Fleet Manager: product, bet, revenue, adoption,
   role) needs five equal columns; four-card strips keep the 12-column span.
   Scoped by card count so neither has to know about the other. */
@media (min-width: 900px) {
  .facts:has(.fact:nth-child(5)) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .facts:has(.fact:nth-child(5)) .fact {
    grid-column: span 1;
    padding-right: 19px;
    padding-left: 19px;
  }
  .facts:has(.fact:nth-child(5)) .fact:first-child {
    padding-left: 0;
  }
}
/* Below that, five columns get too narrow for the serif stat to wrap, and a
   12-column span would strand the fifth card alone on a second row. Stack. */
/* Touch targets. These links are deliberately set tight — the rule sits just
   under the type — so the target is grown with an invisible overlay instead
   of by padding the box out, which would drag the underline away from the
   text and change the composition. 44px is the comfortable minimum.

   Inline links inside sentences (.now-question-link, .context-link) are left
   alone on purpose: the guidance exempts links in running text, and an
   overlay there would sit over the surrounding words and steal their clicks. */
.back,
.topline .contact,
.notes-ledger-detail a {
  position: relative;
}
.back::after,
.topline .contact::after,
.notes-ledger-detail a::after {
  position: absolute;
  inset: 50% 0 auto;
  height: 44px;
  content: "";
  transform: translateY(-50%);
}

@media (max-width: 899px) {
  .facts:has(.fact:nth-child(5)) .fact {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .facts:has(.fact:nth-child(5)) .fact:last-child {
    border-bottom: 0;
  }
  .facts:has(.fact:nth-child(5)) .fact .mono {
    margin-bottom: 20px;
  }
}
.fact:first-child {
  padding-left: 0;
}
.fact:last-child {
  border-right: 0;
}
.fact .mono {
  display: block;
  margin-bottom: 44px;
  color: var(--olive);
}
.fact strong {
  display: block;
  max-width: 14ch;
  font:
    400 clamp(19px, 1.9vw, 25px) / 0.98 "Libre Baskerville",
    Georgia,
    serif;
  letter-spacing: -0.06em;
}
.fact p {
  max-width: 220px;
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

/* Endorsement band. Currently unused — the markup is parked in
   private/endorsements/ awaiting a cleared quote. Kept live so restoring it is
   a single paste. */
.case-endorsement {
  padding-top: clamp(42px, 5vw, 68px);
  padding-bottom: clamp(42px, 5vw, 68px);
  border-bottom: 1px solid var(--ink);
}
.case-endorsement-label {
  grid-column: span 2;
  padding-top: 7px;
  color: var(--olive);
}
.case-endorsement-quote {
  grid-column: 3 / span 8;
  margin: 0;
}
.case-endorsement-quote p {
  max-width: 29ch;
  margin: 0;
  font:
    400 clamp(28px, 3.5vw, 48px) / 0.98 var(--font-serif);
  letter-spacing: -0.065em;
}
.case-endorsement-quote footer {
  margin-top: var(--space-4);
  color: var(--olive);
  font: var(--text-label) / 1.4 var(--font-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.case-endorsement-quote footer span::before {
  margin: 0 8px;
  color: var(--red);
  content: "/";
}

.project-timeline {
  align-items: center;
  padding-top: 19px;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--ink);
}
.timeline-label {
  grid-column: span 2;
  color: var(--olive);
}
.timeline-range {
  grid-column: 3 / span 10;
  display: grid;
  grid-template-columns: max-content minmax(70px, 1fr) max-content;
  align-items: center;
  gap: 14px;
  font:
    11px/1.4 "DM Mono",
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.timeline-track {
  position: relative;
  height: 1px;
  background: var(--ink);
}
.timeline-track::before,
.timeline-track::after {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  content: "";
  transform: translateY(-50%);
}
.timeline-track::before {
  left: 0;
  border-radius: 50%;
  background: var(--red);
}
.timeline-track::after {
  right: 0;
  background: var(--olive);
}
.timeline-detail {
  grid-column: 3 / span 10;
  margin: 12px 0 0;
  color: var(--olive);
  font: var(--text-label) / 1.45 var(--font-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.artifact {
  padding-top: clamp(55px, 8vw, 110px);
  padding-bottom: clamp(55px, 8vw, 110px);
  color: var(--paper);
  background: var(--olive);
}
.artifact-label {
  grid-column: span 2;
  padding-top: 8px;
  color: var(--paper);
}
/* An artifact band split in two: explainer on one side, a live mockup on the
   other, set at an angle. Second use earns its place here — the Fleet Manager
   page carried it alone until iAquaLink wanted the same thing.

   Both bands so far sit on olive, where every accent has to be paper: the site
   red reads 1.6:1 against it. The four colours are variables so a band on
   paper later only has to reset them. */
.artifact--split {
  --art-body: rgba(238, 232, 218, 0.86);
  --art-rule: rgba(238, 232, 218, 0.3);
  --art-num: rgba(238, 232, 218, 0.62);
  --art-label: var(--paper);
  align-items: center;
  row-gap: 44px;
}
.artifact-copy {
  grid-column: 1 / span 4;
}
/* Scoped through the copy column so it outranks .artifact-copy p, which would
   otherwise hand the label the body colour. */
.artifact-copy .artifact-label {
  display: block;
  grid-column: auto;
  margin: 0 0 20px;
  padding-top: 0;
  color: var(--art-label);
}
.artifact-copy p {
  max-width: 42ch;
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--art-body);
}
.artifact-steps {
  list-style: none;
  max-width: 42ch;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--art-rule);
}
.artifact-steps li {
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--art-rule);
  font-size: 15px;
  line-height: 1.45;
}
.artifact-steps span {
  font:
    500 11px/1.6 "DM Mono",
    monospace;
  letter-spacing: 0.06em;
  color: var(--art-num);
}

/* The stage holds the perspective so the tilt can't fight its grid track; the
   shadow goes on the mockup itself, which is the thing with corners. */
.artifact-stage {
  grid-column: 6 / span 8;
  perspective: 2200px;
  perspective-origin: 20% 50%;
}
.artifact-tilt {
  transform: rotateY(-15deg) rotateX(5deg) rotate(-0.8deg);
  transform-origin: left center;
  box-shadow: -26px 42px 70px -30px rgba(24, 25, 23, 0.55);
}
/* A phone is far narrower than its grid track, so the tilt shrink-wraps it —
   otherwise a track-wide box casts a track-wide shadow beside a 292px device. */
.artifact-stage--phone .artifact-tilt {
  width: fit-content;
  margin-inline: auto;
  border-radius: 24px;
}
.artifact-note {
  grid-column: 6 / span 8;
  margin: 22px 0 0;
  font:
    500 11px/1.5 "DM Mono",
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--art-num);
}
.artifact-note a {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.artifact-note a:hover {
  color: var(--paper);
}
@media (max-width: 1080px) {
  .artifact-copy {
    grid-column: 1 / span 5;
  }
  .artifact-stage,
  .artifact-note {
    grid-column: 6 / span 7;
  }
  .artifact-tilt {
    transform: rotateY(-11deg) rotateX(4deg);
  }
}
@media (max-width: 900px) {
  .artifact-copy,
  .artifact-stage,
  .artifact-note {
    grid-column: 1 / -1;
  }
  .artifact-stage {
    perspective: none;
  }
  .artifact-tilt {
    transform: none;
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .artifact-tilt {
    transition: none;
  }
}

.chapter {
  padding-top: clamp(67px, 9vw, 130px);
  padding-bottom: clamp(67px, 9vw, 130px);
  border-bottom: 1px solid var(--line);
}
.chapter-label {
  grid-column: span 2;
  padding-top: 8px;
  color: var(--olive);
}
.chapter-copy {
  grid-column: 3 / span 7;
}
.chapter h2 {
  max-width: 10ch;
  margin-bottom: 31px;
  font:
    clamp(45px, 5.4vw, 84px) / 0.84 "Archivo Black",
    Impact,
    sans-serif;
  letter-spacing: -0.078em;
}
.chapter-copy > p {
  max-width: 635px;
  margin-bottom: 17px;
  font-size: 17px;
  line-height: 1.58;
}
.chapter-copy > p:last-child {
  margin-bottom: 0;
}
.chapter-note {
  grid-column: 10 / span 3;
  align-self: end;
  margin: 0;
  padding: 2px 0 3px clamp(16px, 1.7vw, 24px);
  border-left: 1px solid var(--ink);
  color: var(--ink-soft);
  font:
    italic 22px/1.07 "Libre Baskerville",
    Georgia,
    serif;
}

/* "The spread": one build on the left, the parts of the company it changed
   fanned off a spine on the right. Drawn with borders rather than an SVG so
   it stays selectable, translatable, and reflows on small screens. */
.spread-map {
  grid-column: 3 / span 9;
  display: grid;
  grid-template-columns: minmax(130px, 0.26fr) minmax(0, 1fr);
  gap: 0 40px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--ink);
}
.spread-source {
  position: relative;
  align-self: center;
  margin: 0;
  font:
    400 20px/1.1 "Libre Baskerville",
    Georgia,
    serif;
  letter-spacing: -0.04em;
  text-align: right;
}
.spread-source .mono {
  display: block;
  margin-bottom: 9px;
  color: var(--red);
}
.spread-source::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -40px;
  width: 40px;
  height: 1px;
  background: var(--ink);
}
.spread-list {
  margin: 0;
  padding: 0 0 0 40px;
  border-left: 1px solid var(--ink);
  list-style: none;
}
.spread-list li {
  position: relative;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.spread-list li:last-child {
  border-bottom: 0;
}
.spread-list li::before {
  content: "";
  position: absolute;
  top: 28px;
  left: -40px;
  width: 28px;
  height: 1px;
  background: var(--ink);
}
.spread-list .mono {
  display: block;
  margin-bottom: 7px;
  color: var(--olive);
}
.spread-list p {
  max-width: 56ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Lab vs Kit: two front doors onto one practice. Two columns split by a
   hairline, each a term/description list, stacking on small screens. */
.compare-grid {
  grid-column: 3 / span 9;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--ink);
}
.compare-col {
  padding-right: 34px;
}
.compare-col + .compare-col {
  padding-right: 0;
  padding-left: 34px;
  border-left: 1px solid var(--line);
}
.compare-name {
  margin: 0 0 18px;
  /* --red is 3.7:1 on paper, under AA for 11px labels; --red-deep is 5.3:1. */
  color: var(--red-deep);
}
.compare-col dl {
  margin: 0;
}
.compare-col dl > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.compare-col dl > div:last-child {
  border-bottom: 0;
}
.compare-col dt {
  margin-bottom: 5px;
  color: var(--olive);
  font: var(--text-label) / 1.4 var(--font-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.compare-col dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Tabbed release sequence: V1/V2/V3 each carry their spec and their outcome,
   so the story steps forward without alternating panel and prose. */
.releases {
  grid-column: 3 / span 9;
  margin: 34px 0 34px;
}
.release-tabs {
  display: flex;
  margin-bottom: -1px;
}
.release-tab {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 18px 12px;
  border: 1px solid var(--ink);
  border-right: 0;
  background: transparent;
  color: var(--olive);
  font:
    500 11px/1 "DM Mono",
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.release-tab:last-child {
  border-right: 1px solid var(--ink);
}
.release-tab span {
  font-size: 10px;
  letter-spacing: 0.04em;
}
.release-tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}
.release-tab[aria-selected="true"] span {
  color: rgba(238, 232, 218, 0.72);
}
.release-outcome {
  max-width: 66ch;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.55;
}
.release-outcome .mono {
  display: block;
  margin-bottom: 7px;
  color: var(--olive);
}

/* The panel body under the tabs: bordered card, washed background, ruled
   columns, matching the encased interactives elsewhere on the site. */
.release {
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--ink);
  background: rgba(238, 232, 218, 0.62);
}
.release dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.release dl > div {
  padding-right: 26px;
}
.release dl > div + div {
  padding-left: 26px;
  border-left: 1px solid var(--line);
}
.release dt {
  margin-bottom: 7px;
  color: var(--olive);
  font: var(--text-label) / 1.4 var(--font-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.release dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* A titled panel variant of the moves grid, matching the Product Lab release
   panels: encased card, washed background, inverted tag, ruled columns.
   Scoped by the presence of a header, so the plain moves grids on the other
   case studies are untouched. */
.moves:has(.moves-head) {
  margin-top: 44px;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--ink);
  background: rgba(238, 232, 218, 0.62);
}
.moves-head {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 13px;
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.moves-tag {
  display: inline-flex;
  padding: 6px 10px 5px;
  background: var(--ink);
  color: var(--paper);
  font:
    500 11px/1 "DM Mono",
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.moves-title {
  color: var(--olive);
}
.moves:has(.moves-head) .move {
  min-height: 0;
  padding: 0 26px 0 0;
  border: 0;
}
.moves:has(.moves-head) .move + .move {
  padding-left: 26px;
  border-left: 1px solid var(--line);
}
.moves:has(.moves-head) .move .mono {
  margin-bottom: 20px;
}

.moves {
  grid-column: 3 / span 9;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 55px;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.move {
  min-height: 221px;
  padding: 20px 22px 24px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.move .mono {
  display: block;
  margin-bottom: 39px;
  color: var(--olive);
}
.move h3 {
  margin-bottom: 13px;
  font:
    400 25px/0.94 "Libre Baskerville",
    Georgia,
    serif;
  letter-spacing: -0.06em;
}
.move p {
  max-width: 255px;
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.5;
}

.detail-band {
  padding-top: clamp(55px, 7vw, 103px);
  padding-bottom: clamp(55px, 7vw, 103px);
  color: var(--paper);
  background: var(--ink);
}
.detail-band .chapter-label {
  color: rgba(238, 232, 218, 0.76);
}
.detail-band .chapter-copy {
  grid-column: 3 / span 8;
}
.detail-band h2 {
  max-width: 9ch;
  margin-bottom: 30px;
  font:
    clamp(45px, 5.4vw, 84px) / 0.84 "Archivo Black",
    Impact,
    sans-serif;
  letter-spacing: -0.078em;
}
.detail-band h2 em {
  color: var(--red);
  font-family: "Libre Baskerville", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.1em;
}
.detail-band p {
  max-width: 630px;
  color: rgba(238, 232, 218, 0.85);
  font-size: 17px;
  line-height: 1.58;
}
/* The ladder of trust. Same encased treatment as the Product Lab release
   panels, inverted for the dark band: light hairlines, paper-on-ink tag. */
.ladder {
  grid-column: 3 / span 9;
  margin-top: 46px;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid rgba(238, 232, 218, 0.32);
  background: rgba(238, 232, 218, 0.05);
}
.ladder-head {
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(238, 232, 218, 0.22);
}
.ladder-tag {
  display: inline-flex;
  padding: 6px 10px 5px;
  background: var(--paper);
  color: var(--ink);
  font:
    500 11px/1 "DM Mono",
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ladder dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.ladder dl > div {
  padding-right: 26px;
}
.ladder dl > div + div {
  padding-left: 26px;
  border-left: 1px solid rgba(238, 232, 218, 0.22);
}
.ladder dt {
  margin-bottom: 7px;
  color: var(--paper);
  font: var(--text-label) / 1.4 var(--font-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.ladder dd {
  margin: 0;
  color: rgba(238, 232, 218, 0.8);
  font-size: 14px;
  line-height: 1.5;
}

.detail-list {
  grid-column: 3 / span 9;
  margin-top: 56px;
  border-top: 1px solid rgba(238, 232, 218, 0.4);
}
.detail-list article {
  display: grid;
  grid-template-columns: 2fr 4fr;
  gap: 30px;
  padding: 20px 0 22px;
  border-bottom: 1px solid rgba(238, 232, 218, 0.4);
}
.detail-list .mono {
  color: var(--paper);
}
.detail-list p {
  max-width: 510px;
  margin: 0;
  color: rgba(238, 232, 218, 0.8);
  font-size: 14px;
  line-height: 1.5;
}

.secondary-artifact {
  grid-column: 3 / span 9;
  margin-top: 54px;
}
.secondary-artifact figure {
  min-height: clamp(180px, 32vw, 460px);
  margin: 0;
  padding: 10px;
  border: 1px solid var(--ink);
  background: rgba(238, 232, 218, 0.58);
}
.secondary-artifact img {
  display: block;
  width: 100%;
  height: auto;
}
.secondary-artifact figcaption {
  padding-top: 9px;
  color: var(--olive);
  font:
    10px/1.4 "DM Mono",
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.next-case {
  padding-top: clamp(64px, 8vw, 118px);
  padding-bottom: 38px;
  color: var(--paper);
  background: var(--red);
}
.next-case h2 {
  grid-column: 3 / span 8;
  max-width: 10ch;
  margin: 0;
  font:
    clamp(47px, 6.1vw, 94px) / 0.83 "Archivo Black",
    Impact,
    sans-serif;
  letter-spacing: -0.078em;
}
.next-case h2 em {
  color: var(--ink);
}
.next-case-bridge {
  grid-column: 3 / span 7;
  max-width: 38ch;
  margin: 26px 0 0;
  color: var(--paper);
  font: italic clamp(18px, 1.8vw, 25px) / 1.12 var(--font-serif);
}
.next-links {
  grid-column: 3 / span 9;
  display: flex;
  flex-wrap: wrap;
  gap: 13px 33px;
  margin-top: 47px;
  padding-top: 16px;
  border-top: 1px solid rgba(238, 232, 218, 0.65);
  font:
    11px/1.4 "DM Mono",
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.next-case-bridge + .next-links {
  margin-top: 28px;
}
.next-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}
.next-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.note-hero {
  padding-top: clamp(52px, 8vw, 124px);
  padding-bottom: clamp(64px, 9vw, 136px);
  border-bottom: 1px solid var(--line);
}
.note-label {
  grid-column: span 3;
  padding-top: 8px;
  color: var(--olive);
}
.note-hero h1 {
  grid-column: 3 / span 8;
  max-width: 10ch;
  margin: 0;
  font:
    clamp(58px, 8.7vw, 142px) / 0.78 "Archivo Black",
    Impact,
    sans-serif;
  letter-spacing: -0.078em;
}
.note-hero h1 em,
.note-content h2 em {
  color: var(--red);
  font-family: "Libre Baskerville", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.1em;
}
.note-dek {
  grid-column: 3 / span 7;
  max-width: 670px;
  margin: 38px 0 0;
  font:
    italic clamp(21px, 2.2vw, 31px) / 1.14 "Libre Baskerville",
    Georgia,
    serif;
}
.note-meta {
  grid-column: 10 / span 3;
  align-self: end;
  margin: 44px 0 0;
  color: var(--olive);
  font:
    11px/1.45 "DM Mono",
    monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.note-content {
  padding-top: clamp(64px, 9vw, 132px);
  padding-bottom: clamp(74px, 10vw, 150px);
}
.note-body {
  grid-column: 3 / span 7;
}
.note-body > p {
  max-width: 650px;
  margin-bottom: 25px;
  font-size: 18px;
  line-height: 1.62;
}
.note-body > p:last-child {
  margin-bottom: 0;
}
.note-body h2 {
  max-width: 11ch;
  margin: 73px 0 27px;
  font:
    clamp(41px, 4.8vw, 73px) / 0.86 "Archivo Black",
    Impact,
    sans-serif;
  letter-spacing: -0.078em;
}
.note-body h2 + p {
  margin-top: 0;
}
.note-pullquote {
  grid-column: 10 / span 3;
  align-self: start;
  margin: 0;
  padding: 2px 0 3px clamp(16px, 1.7vw, 24px);
  border-left: 1px solid var(--ink);
  color: var(--ink-soft);
  font:
    italic 23px/1.08 "Libre Baskerville",
    Georgia,
    serif;
}
.note-principles {
  grid-column: 3 / span 9;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 62px;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.note-principles article {
  min-height: 225px;
  padding: 21px 22px 25px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.note-principles .mono {
  display: block;
  margin-bottom: 40px;
  color: var(--olive);
}
.note-principles h3 {
  max-width: 11ch;
  margin-bottom: 13px;
  font:
    400 26px/0.94 "Libre Baskerville",
    Georgia,
    serif;
  letter-spacing: -0.06em;
}
.note-principles p {
  max-width: 260px;
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.5;
}
.ai-gap-specimen {
  grid-column: 3 / span 9;
  margin: 62px 0 4px;
  padding: clamp(14px, 2vw, 26px);
  border: 1px solid var(--ink);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 8px 8px 0 rgba(24, 25, 23, 0.14);
}
.ai-gap-specimen figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0 2px;
  color: var(--olive);
  font:
    10px/1.4 "DM Mono",
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ai-gap-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.ai-gap-flow article {
  min-height: 236px;
  padding: 21px 22px 25px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.ai-gap-flow .mono {
  display: block;
  margin-bottom: 40px;
  color: var(--olive);
}
.ai-gap-flow h3 {
  max-width: 12ch;
  margin-bottom: 13px;
  font:
    400 26px/0.94 "Libre Baskerville",
    Georgia,
    serif;
  letter-spacing: -0.06em;
}
.ai-gap-flow p {
  max-width: 28ch;
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.5;
}
.note-artifact {
  grid-column: 3 / span 9;
  margin: 62px 0 0;
  padding: clamp(10px, 1.6vw, 20px);
  color: var(--paper);
  background: var(--ink);
  box-shadow: 9px 9px 0 rgba(24, 25, 23, 0.18);
}
.note-artifact img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
.note-artifact figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 2px 0;
  color: rgba(238, 232, 218, 0.8);
  font:
    10px/1.4 "DM Mono",
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.note-video {
  grid-column: 3 / span 9;
  margin: 62px 0 0;
  padding: clamp(10px, 1.6vw, 20px);
  color: var(--paper);
  background: var(--ink);
  box-shadow: 9px 9px 0 rgba(24, 25, 23, 0.18);
}
.note-video-label {
  margin: 1px 2px 11px;
  color: rgba(238, 232, 218, 0.8);
}
.note-video video {
  display: block;
  width: 100%;
  height: auto;
  background: #111;
}
.note-video figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 2px 0;
  color: rgba(238, 232, 218, 0.8);
  font:
    10px/1.4 "DM Mono",
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.notes-archive {
  padding-top: clamp(64px, 9vw, 132px);
  padding-bottom: clamp(74px, 10vw, 150px);
}
.notes-archive-head {
  grid-column: 3 / span 9;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ink);
}
.notes-archive-head .mono {
  margin: 0;
  color: var(--olive);
}
.notes-ledger {
  grid-column: 3 / span 9;
  border-bottom: 1px solid var(--ink);
}
.notes-ledger article {
  display: grid;
  grid-template-columns: minmax(48px, 1fr) minmax(0, 3.2fr) minmax(190px, 2fr);
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--ink);
}
.notes-ledger article:last-child {
  border-bottom: 0;
}
.notes-ledger-index {
  margin: 3px 0 0;
  color: var(--olive);
}
.notes-ledger-main .mono {
  margin-bottom: 19px;
  color: var(--olive);
}
.notes-ledger h2 {
  max-width: 14ch;
  margin: 0;
  font:
    400 clamp(31px, 3.7vw, 53px) / 0.89 "Libre Baskerville",
    Georgia,
    serif;
  letter-spacing: -0.07em;
}
.notes-ledger-detail {
  align-self: end;
}
.notes-ledger-detail p {
  max-width: 30ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}
.notes-ledger-detail a {
  display: inline-flex;
  gap: 10px;
  margin-top: 22px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  font:
    10px/1.3 "DM Mono",
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.notes-ledger-detail a:hover {
  color: var(--red-deep);
  border-color: var(--red-deep);
}
.market-map {
  grid-column: 3 / span 9;
  margin-top: 62px;
  padding: clamp(18px, 2.5vw, 34px);
  border: 1px solid var(--ink);
  background: rgba(238, 232, 218, 0.62);
  box-shadow: 8px 8px 0 rgba(24, 25, 23, 0.11);
}
.market-map-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--ink);
}
.market-map-head .mono {
  margin: 0;
  color: var(--olive);
}
.market-map-head p:last-child {
  max-width: 30ch;
  margin: 0;
  font:
    italic 17px/1.12 "Libre Baskerville",
    Georgia,
    serif;
}
.market-map-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.market-map-axis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 17px 0 8px;
  color: var(--olive);
  font:
    10px/1.35 "DM Mono",
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.market-map-axis span:last-child {
  text-align: right;
}
.market-map-card {
  min-height: 178px;
  padding: 20px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.market-map-card .mono {
  display: block;
  margin-bottom: 30px;
  color: var(--olive);
}
.market-map-card h3 {
  max-width: 13ch;
  margin-bottom: 12px;
  font:
    400 clamp(21px, 2.1vw, 30px) / 0.92 "Libre Baskerville",
    Georgia,
    serif;
  letter-spacing: -0.06em;
}
.market-map-card p {
  max-width: 27ch;
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.5;
}

@media (max-width: 860px) {
  .case-hero h1 {
    grid-column: 3 / span 8;
  }
  .case-intro {
    grid-column: 3 / span 7;
  }
  .case-side {
    display: none;
  }
  .spread-map {
    grid-column: 3 / span 8;
  }
  .compare-grid {
    grid-column: 3 / span 8;
  }
  .releases {
    grid-column: 3 / span 8;
  }
  .chapter-copy {
    grid-column: 3 / span 8;
  }
  .chapter-note {
    display: block;
    grid-column: 3 / span 8;
    align-self: start;
    max-width: 34ch;
    margin: 32px 0 0;
  }
  .detail-band .chapter-copy {
    grid-column: 3 / span 8;
  }
  .note-hero h1 {
    grid-column: 3 / span 8;
  }
  .note-dek {
    grid-column: 3 / span 8;
  }
  .note-meta {
    display: none;
  }
  .note-pullquote {
    display: block;
    grid-column: 3 / span 8;
    align-self: start;
    max-width: 34ch;
    margin: 34px 0 0;
  }
  .note-body,
  .notes-archive-head,
  .notes-ledger {
    grid-column: 3 / span 8;
  }
}
@media (max-width: 600px) {
  .grid {
    padding-right: 22px;
    padding-left: 22px;
  }
  /* Matches the homepage header — see header.js. Mobile already drops
     .case-name, so the condensed bar is a way back and a way to write, which is
     exactly what it should be. Paper background is required: the topline is
     transparent by default and copy would scroll through it. */
  .topline {
    position: sticky;
    top: 0;
    z-index: 12;
    min-height: 65px;
    background: var(--paper);
    /* Transform only — see the matching note in site.css. Animating min-height
       trips Chrome's scroll anchoring and the bar re-opens as it tries to hide. */
    transition: transform 0.28s ease;
  }
  .topline.is-condensed {
    min-height: 52px;
  }
  .topline.is-hidden {
    transform: translateY(-100%);
  }
  [id] {
    scroll-margin-top: 60px;
  }
  .back {
    grid-column: span 7;
    font-size: 10px;
  }
  .topline .case-name {
    display: none;
  }
  .topline .contact {
    grid-column: 10 / span 3;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .case-hero {
    padding-top: 51px;
    padding-bottom: 72px;
  }
  .case-eyebrow {
    grid-column: span 5;
  }
  .case-hero h1 {
    grid-column: 1 / -1;
    margin-top: 41px;
    font-size: clamp(61px, 15vw, 85px);
    line-height: 0.8;
  }
  .case-intro {
    grid-column: 1 / -1;
    margin-top: 31px;
    font-size: 21px;
  }
  .fact {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .fact:first-child {
    padding-left: 0;
  }
  .fact:last-child {
    border-bottom: 0;
  }
  .fact .mono {
    margin-bottom: 20px;
  }
  .project-timeline {
    padding-top: 17px;
    padding-bottom: 19px;
  }
  .timeline-label {
    grid-column: span 5;
  }
  .timeline-range {
    grid-column: 1 / -1;
    margin-top: 17px;
    gap: 10px;
    font-size: 10px;
  }
  .timeline-detail {
    grid-column: 1 / -1;
    margin-top: 12px;
  }
  .artifact {
    padding-top: 65px;
    padding-bottom: 65px;
  }
  .artifact-label {
    grid-column: span 5;
  }
  .chapter {
    padding-top: 74px;
    padding-bottom: 74px;
  }
  .chapter-label {
    grid-column: span 5;
  }
  .chapter-copy {
    grid-column: 1 / -1;
    padding-top: 37px;
  }
  .releases {
    grid-column: 1 / -1;
    margin: 26px 0;
  }
  .release {
    padding: 20px;
  }
  .release-tab {
    flex: 1 1 0;
    padding: 10px 6px 11px;
    text-align: center;
  }
  .release-tab span {
    display: none;
  }
  .release-outcome {
    font-size: 14px;
  }
  .release dl {
    grid-template-columns: minmax(0, 1fr);
  }
  .release dl > div,
  .release dl > div + div {
    padding: 13px 0 0;
    border-left: 0;
  }
  .release dl > div + div {
    margin-top: 13px;
    border-top: 1px solid var(--line);
  }
  .compare-grid {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 30px;
    padding-top: 22px;
  }
  .compare-col {
    padding-right: 0;
  }
  .compare-col + .compare-col {
    margin-top: 26px;
    padding-top: 24px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  /* Stack the spread: the source sits above its spine instead of beside it. */
  .spread-map {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 32px;
    padding-top: 24px;
  }
  .spread-source {
    margin-bottom: 22px;
    text-align: left;
  }
  .spread-source::after {
    top: auto;
    right: auto;
    bottom: -12px;
    left: 0;
    width: 40px;
  }
  .spread-list {
    padding-left: 22px;
  }
  .spread-list li::before {
    left: -22px;
    width: 14px;
  }
  /* See note above — unused while the quote is parked in private/endorsements/. */
  .case-endorsement {
    padding-top: 39px;
    padding-bottom: 42px;
  }
  .case-endorsement-label {
    grid-column: span 5;
  }
  .case-endorsement-quote {
    grid-column: 1 / -1;
    margin-top: 31px;
  }
  .case-endorsement-quote p {
    font-size: clamp(28px, 8.2vw, 39px);
    line-height: 1.01;
  }
  .chapter-note {
    grid-column: 1 / -1;
    max-width: 32ch;
    margin-top: 28px;
  }
  .chapter h2,
  .detail-band h2,
  .next-case h2,
  .note-body h2 {
    font-size: 49px;
    line-height: 0.9;
  }
  .chapter-copy > p {
    font-size: 16px;
  }
  .moves {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    margin-top: 43px;
  }
  .moves:has(.moves-head) {
    padding: 20px;
  }
  .moves:has(.moves-head) .move,
  .moves:has(.moves-head) .move + .move {
    padding: 16px 0 0;
    border-left: 0;
  }
  .moves:has(.moves-head) .move + .move {
    margin-top: 16px;
    border-top: 1px solid var(--line);
  }
  .move {
    min-height: 0;
    padding: 22px;
  }
  .move .mono {
    margin-bottom: 23px;
  }
  .detail-band {
    padding-top: 74px;
    padding-bottom: 74px;
  }
  .detail-band .chapter-copy {
    grid-column: 1 / -1;
    padding-top: 37px;
  }
  .detail-band p {
    font-size: 16px;
  }
  .ladder {
    grid-column: 1 / -1;
    margin-top: 34px;
    padding: 20px;
  }
  .ladder dl {
    grid-template-columns: minmax(0, 1fr);
  }
  .ladder dl > div,
  .ladder dl > div + div {
    padding: 14px 0 0;
    border-left: 0;
  }
  .ladder dl > div + div {
    margin-top: 14px;
    border-top: 1px solid rgba(238, 232, 218, 0.22);
  }
  .detail-list {
    grid-column: 1 / -1;
    margin-top: 42px;
  }
  .detail-list article {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 20px 0;
  }
  .secondary-artifact {
    grid-column: 1 / -1;
    margin-top: 41px;
  }
  .next-case {
    padding-top: 74px;
  }
  .next-case h2 {
    grid-column: 1 / -1;
  }
  .next-case-bridge {
    grid-column: 1 / -1;
  }
  .next-links {
    grid-column: 1 / -1;
    margin-top: 48px;
  }
  .note-hero {
    padding-top: 51px;
    padding-bottom: 74px;
  }
  .note-label {
    grid-column: span 5;
  }
  .note-hero h1 {
    grid-column: 1 / -1;
    margin-top: 40px;
    font-size: clamp(59px, 15.2vw, 84px);
    line-height: 0.8;
  }
  .note-dek {
    grid-column: 1 / -1;
    margin-top: 32px;
    font-size: 21px;
  }
  .note-content {
    padding-top: 74px;
    padding-bottom: 82px;
  }
  .note-body {
    grid-column: 1 / -1;
  }
  .note-body > p {
    font-size: 17px;
    line-height: 1.58;
  }
  .note-body h2 {
    margin-top: 62px;
    margin-bottom: 24px;
  }
  .note-artifact,
  .note-video,
  .ai-gap-specimen,
  .market-map,
  .notes-archive-head,
  .notes-ledger {
    grid-column: 1 / -1;
    margin-top: 48px;
  }
  .notes-archive {
    padding-top: 74px;
    padding-bottom: 82px;
  }
  .notes-archive-head {
    display: block;
    margin-top: 0;
    padding-bottom: 18px;
  }
  .notes-ledger {
    margin-top: 0;
  }
  .notes-ledger article {
    grid-template-columns: 1fr;
    gap: 19px;
    padding: 31px 0 34px;
  }
  .notes-ledger-index {
    margin: 0;
  }
  .notes-ledger-main .mono {
    margin-bottom: 16px;
  }
  .notes-ledger h2 {
    font-size: 36px;
  }
  .notes-ledger-detail p {
    max-width: 37ch;
  }
  .note-artifact figcaption,
  .note-video figcaption {
    display: block;
  }
  .note-artifact figcaption span,
  .note-video figcaption span {
    display: block;
    margin-top: 4px;
  }
  .market-map-head {
    display: block;
  }
  .market-map-head p:last-child {
    margin-top: 12px;
  }
  .market-map-card {
    min-height: 0;
    padding: 17px;
  }
  .market-map-card .mono {
    margin-bottom: 22px;
  }
  .market-map-card h3 {
    font-size: 21px;
  }
  .market-map-card p {
    font-size: 12px;
  }
  .note-principles {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    margin-top: 48px;
  }
  .note-principles article {
    min-height: 0;
    padding: 22px;
  }
  .ai-gap-specimen {
    margin-top: 48px;
    padding: 16px;
  }
  .ai-gap-specimen figcaption {
    display: block;
  }
  .ai-gap-specimen figcaption span + span {
    display: block;
    margin-top: 4px;
  }
  .ai-gap-flow {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }
  .ai-gap-flow article {
    min-height: 0;
    padding: 22px;
  }
  .ai-gap-flow .mono {
    margin-bottom: 23px;
  }
  .note-principles .mono {
    margin-bottom: 23px;
  }
  .note-pullquote {
    grid-column: 1 / -1;
    max-width: 32ch;
    margin-top: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  /* The mobile topline still hides and returns — behaviour, not decoration.
     It arrives instantly instead of sliding. */
  .topline {
    transition: none;
  }
}