/* ==========================================================================
   WORK PAGES (option B): the Work index and the case study template, in
   English and Indonesian. Page-level additions only. Everything else comes
   from field.css, with the same tokens: no new colours, sharp corners,
   hairlines instead of cards. Live platform screens are opaque page captures:
   they always sit framed, a hairline on paper-2.
   ========================================================================== */

/* ---------- Visit the platform: the external link to a live platform ---------- */
.visit {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding-block: 6px;
  color: var(--ink);
  text-decoration: none;
}
.visit__label {
  font: 600 15px/1.25 var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 5px;
  transition: color .3s ease, text-decoration-color .3s ease;
}
.visit__icon { align-self: center; font-size: 15px; color: var(--cobalt-deep); transition: transform .4s var(--ease-out); }
.visit__url { font: 400 14px/1.35 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
@media (hover: hover) {
  .visit:hover .visit__label { color: var(--cobalt-deep); text-decoration-color: currentColor; }
  .visit:hover .visit__icon { transform: translate(2px, -2px); }
}
/* Pill variant (case hero): a ghost pill with the platform's address beside it. */
.visit--pill { align-items: center; gap: 10px 18px; padding: 0; }
.visit--pill .visit__url { font-size: 14.5px; }
.visit--pill:focus-visible { outline: none; }
.visit--pill:focus-visible .visit__btn { outline: 2px solid var(--cobalt-deep); outline-offset: 3px; }
@media (hover: hover) {
  .visit--pill:hover .btn--ghost::before { opacity: 1; }
  .visit--pill:hover .visit__btn i { transform: translate(2px, -2px); }
}

/* ---------- Work index: hero ---------- */
.wk-hero .page-hero__title { max-width: 10.5em; }
.wk-hero .page-hero__lede { max-width: 34ch; }
.wk-stats { list-style: none; gap: 20px clamp(40px, 6vw, 96px); }
.wk-stat { display: flex; align-items: baseline; gap: 14px; }
.wk-stat__fig {
  font: 300 clamp(2.7rem, 4vw, 3.9rem)/.9 var(--serif);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.035em;
  font-variant-numeric: lining-nums tabular-nums;
}
.wk-stat__plus { color: var(--cobalt); }
.wk-stat__label { max-width: 14ch; font: 500 15px/1.35 var(--sans); color: var(--ink-2); }

/* ---------- Work index: flagship features ---------- */
.wk-feat { padding-bottom: var(--section-y); }
.wk-feat__label {
  margin-bottom: clamp(48px, 8vh, 96px);
  padding-top: 14px;
  border-top: 1px solid var(--rule-strong);
}
.wk-feat .spread + .spread { margin-top: clamp(112px, 16vh, 184px); }
.wk-feat .spread__title { font-size: clamp(2.6rem, 4.6vw, 4.8rem); line-height: 1; margin-bottom: 14px; }
.wk-feat .spread__sub { font-size: clamp(1.15rem, 1.35vw, 1.3rem); }
.wk-feat .spread__visual--framed { padding: clamp(20px, 4.2vw, 72px) clamp(16px, 3.6vw, 64px); }
.wk-feat .spread__visual--framed img { width: min(100%, 720px); }
.spread__text .spread__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-top: 24px; }
.spread__text .spread__links .link-arrow { margin-top: 0; }
/* One sourced fact per flagship, with its source one click away. */
.wk-proof {
  max-width: 44ch;
  margin-bottom: 22px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--cobalt);
  font: 400 15px/1.55 var(--sans);
  color: var(--ink-2);
  text-wrap: pretty;
}
.wk-proof__fig { font: 400 1.35rem/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.wk-proof__src { display: block; margin-top: 6px; font-size: 14px; }
.wk-proof__src a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; transition: color .3s ease, text-decoration-color .3s ease; }
.wk-proof__src i { color: var(--cobalt-deep); }
@media (hover: hover) { .wk-proof__src a:hover { color: var(--cobalt-deep); text-decoration-color: currentColor; } }
@media (min-width: 768px) {
  .wk-feat .spread__visual { grid-column: 1 / span 8; }
  .wk-feat .spread__text { grid-column: 9 / span 4; padding-left: clamp(0px, 1.5vw, 24px); }
  /* Mirrored spread: text left, visual right. DOM order stays visual first for small screens. */
  .wk-feat .spread--flip .spread__visual { grid-column: 6 / span 7; grid-row: 1; }
  .wk-feat .spread--flip .spread__text { grid-column: 1 / span 4; grid-row: 1; padding-left: 0; }
}
@media (max-width: 560px) {
  .wk-stats { flex-wrap: nowrap; gap: 40px; }
  .wk-stat { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- Work index: filterable index ---------- */
.wk-index__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px var(--gutter);
  align-items: start;
}
.wk-rail { grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-h) + 40px); }
.wk-rail__title { max-width: 7em; }
.wk-results { grid-column: 4 / span 9; }
.wk-noscript { padding-top: 24px; }

.ix-filter { margin-top: clamp(28px, 4.5vh, 48px); }
.ix-filter + .ix-filter { margin-top: clamp(16px, 2.4vh, 26px); }
.ix-filter__label { margin-bottom: 6px; }
.ix-filter__list { list-style: none; display: grid; justify-items: start; }
/* The stage lens is four short words: one line (it wraps in Indonesian). */
.ix-filter__list--row { display: flex; flex-wrap: wrap; gap: 0 22px; }
.ix-filter__btn {
  display: inline-block;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  background: none;
  font: 500 16px/1.4 var(--sans);
  color: var(--ink-2);
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  text-decoration-color: transparent;
  cursor: pointer;
  transition: color .3s ease, text-decoration-color .3s ease;
}
.ix-filter__btn[aria-pressed="true"] { color: var(--ink); text-decoration-color: var(--cobalt); }
@media (hover: hover) {
  .ix-filter__btn:hover { color: var(--ink); }
  .ix-filter__btn[aria-pressed="false"]:hover { text-decoration-color: var(--rule-strong); }
}
/* Mouse users get a tighter rail (touch keeps 44px targets), so both lenses fit beside the list. */
@media (hover: hover) and (pointer: fine) and (min-width: 1101px) {
  .ix-filter__btn { min-height: 36px; padding-block: 6px; }
}
/* A sticky rail taller than the screen would hide its last filters: let it scroll with the page. */
@media (min-width: 1101px) and (max-height: 820px) {
  .wk-rail { position: static; }
}
.ix-count {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font: 500 14.5px/1.4 var(--sans);
  color: var(--ink-2);
}
.ix-count__n {
  margin-right: 3px;
  font: 400 1.6rem/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}

/* Index rows (Work index and "Related work"): one hairline between rows. */
.ix { position: relative; list-style: none; border-bottom: 1px solid var(--rule-strong); }
.ix__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 24px;
  gap: 10px var(--gutter);
  align-items: start;
  padding-block: clamp(24px, 3.4vh, 34px);
  border-top: 1px solid var(--rule-strong);
  background: var(--paper);
}
.ix__item[hidden] { display: none; }
.ix__name {
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 60;
  font-weight: 380;
  font-size: clamp(1.75rem, 2.3vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
  transition: transform .6s var(--ease-out), opacity .45s ease, color .3s ease;
}
.ix__link { text-decoration: none; }
.ix__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ix__partners { margin-top: 12px; font: 600 14.5px/1.4 var(--sans); }
.ix__summary { max-width: 48ch; padding-top: .3em; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.ix__areas { margin-top: 10px; font: italic 400 1.05rem/1.35 var(--serif); color: var(--ink-2); }
/* The live platform link sits above the row's stretched case link, clearly its own target. */
.ix__visit { margin-top: 10px; }
.ix__visit .visit { z-index: 2; }
.ix__arrow { justify-self: end; margin-top: .4em; font-size: 22px; color: var(--cobalt-deep); transition: transform .45s var(--ease-out); }
.ix__item--stub .ix__name { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  html.motion-ok .ix__item:not(.ix__item--stub):hover .ix__name { transform: translate3d(10px, 0, 0); }
  html.motion-ok .ix__item:hover .ix__arrow { transform: translate3d(4px, 0, 0); }
  .ix.has-preview:hover .ix__item:not(:hover) .ix__name { opacity: .32; }
}
/* Focus ring on the whole row when its (stretched) link is focused. */
@supports selector(:has(*)) {
  .ix__link:focus-visible { outline: none; }
  .ix__item:has(.ix__link:focus-visible) { outline: 2px solid var(--cobalt-deep); outline-offset: 4px; z-index: 2; }
  /* Hovering the external link must not look like the case link. */
  html.motion-ok .ix__item:has(.visit:hover) .ix__name,
  html.motion-ok .ix__item:has(.visit:hover) .ix__arrow { transform: none; }
}

/* Hover preview: typographic tile for projects without screenshots. */
.wk-follower .wk-tile {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 26px 28px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--rule);
  font: 360 clamp(2.3rem, 3vw, 3.3rem)/1 var(--serif);
  font-variation-settings: "opsz" 60;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--ink);
  opacity: 0;
  transition: opacity .35s ease;
}
.wk-follower .wk-tile.is-on { opacity: 1; }
.wk-follower img.is-contain { object-fit: contain; padding: 22px; }
/* Hover preview: a live page capture, framed (hairline on paper-2). */
.wk-follower .wk-frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--paper-2);
  opacity: 0;
  transition: opacity .35s ease;
}
.wk-follower .wk-frame.is-on { opacity: 1; }
.wk-follower .wk-frame img { position: static; width: 100%; height: auto; object-fit: fill; opacity: 1; outline: 1px solid var(--rule); }

/* ---------- Case: hero ---------- */
.case-hero { padding-bottom: clamp(48px, 8vh, 96px); }
.case-hero__title { max-width: 15em; }
.case-hero__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px var(--gutter);
  align-items: start;
  margin-top: clamp(32px, 5vh, 56px);
}
.case-hero__main { grid-column: 1 / span 7; }
.case-hero__lede { max-width: 36ch; }
.case-hero__visit { margin-top: clamp(28px, 4.2vh, 44px); }
.case-hero__meta { grid-column: 9 / span 4; }
.facts { border-bottom: 1px solid var(--rule); }
.facts > div {
  display: grid;
  grid-template-columns: minmax(6.5em, 7.5em) minmax(0, 1fr);
  gap: 4px 16px;
  padding-block: 12px;
  border-top: 1px solid var(--rule);
}
.facts > div:first-child { border-top-color: var(--rule-strong); }
.facts dt { font: 500 13.5px/1.5 var(--sans); color: var(--ink-2); }
.facts dd { margin: 0; font: 500 15.5px/1.45 var(--sans); text-wrap: pretty; }
/* A fact that leads somewhere (the stage, to the Work index filtered by it). */
.facts__link { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; transition: color .3s ease, text-decoration-color .3s ease; }
@media (hover: hover) { .facts__link:hover { color: var(--cobalt-deep); text-decoration-color: currentColor; } }
.case-hero__chips { margin-top: 18px; }

/* ---------- Case: hero visual ---------- */
.case-visual { padding-bottom: clamp(24px, 4vh, 48px); }
.case-visual__inner { display: flex; justify-content: center; }
.case-visual__inner img { width: min(100%, 1020px); }
.case-visual--framed .case-visual__inner { padding: clamp(32px, 7vw, 112px) clamp(20px, 5vw, 80px); background: var(--paper-2); }
.case-visual--framed .case-visual__inner img { width: min(100%, 560px); outline: 1px solid var(--rule); }
/* A screen from the live platform: large, framed, and it opens the lightbox. */
.case-visual--live .case-visual__inner { padding: clamp(18px, 4.6vw, 80px) clamp(14px, 5.6vw, 104px); }
.case-visual--live .case-visual__inner .shot { width: min(100%, 1040px); }
.case-visual--live .case-visual__inner img { width: 100%; }
.case-visual__cap { max-width: 62ch; }

/* A screen that opens the lightbox: the image is the button. No overlays on images. */
.shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
}
.shot img { width: 100%; background: var(--paper); outline: 1px solid var(--rule); transition: outline-color .3s ease; }
.shot:focus-visible { outline: 2px solid var(--cobalt-deep); outline-offset: 4px; }
@media (hover: hover) { .shot:hover img { outline-color: var(--rule-strong); } }

/* Typographic hero for projects without screenshots: the name, and its tags when the data has them. */
.case-type {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(48px, 9vh, 96px);
  min-height: clamp(380px, 58vh, 620px);
  padding: clamp(28px, 4.2vw, 72px);
  background: var(--paper-2);
}
.case-type__tree { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 0; }
.case-type__root {
  position: relative;
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 72;
  font-weight: 340;
  font-size: clamp(3.6rem, 12.5vw, 13rem);
  line-height: .9;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.case-type--l .case-type__root { font-size: clamp(3.2rem, 9vw, 9.5rem); }
.case-type--m .case-type__root { font-size: clamp(2.8rem, 6.6vw, 7rem); max-width: 7em; line-height: .95; }
.case-type__branches { position: relative; list-style: none; display: grid; gap: clamp(8px, 1.4vh, 16px); margin-left: clamp(28px, 3vw, 56px); }
.case-type__branches::before {
  content: "";
  position: absolute;
  left: 0; top: .62em; bottom: .62em;
  width: 1px;
  background: var(--ink);
}
.case-type__branches::after {
  content: "";
  position: absolute;
  right: 100%; top: 50%;
  width: clamp(28px, 3vw, 56px);
  height: 1px;
  background: var(--ink);
}
.case-type__branches li {
  position: relative;
  padding-left: clamp(40px, 4vw, 64px);
  font: italic 400 clamp(1.6rem, 3vw, 3.1rem)/1.12 var(--serif);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.case-type--long .case-type__branches li { font-size: clamp(1.3rem, 2.1vw, 2.15rem); }
.case-type__branches li::before {
  content: "";
  position: absolute;
  left: 0; top: 56%;
  width: clamp(28px, 3vw, 48px);
  height: 1.5px;
  background: var(--cobalt);
}
.case-type__foot { font: 600 14px/1.3 var(--sans); color: var(--ink-2); }

/* ---------- Case: context and role ---------- */
.case-context { padding-block: clamp(80px, 12vh, 144px) var(--section-y); }
.case-context__block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px var(--gutter);
  align-items: baseline;
}
.case-context__block + .case-context__block { margin-top: clamp(48px, 7vh, 88px); }
.case-context__label { grid-column: 1 / span 3; }
.case-context__body { grid-column: 4 / span 8; min-width: 0; }
.case-context__lede { max-width: 38ch; }
/* The rest of the context after its first sentence: body text under the serif lede. */
.case-context__more { max-width: 54ch; margin-top: clamp(22px, 3.4vh, 34px); font-size: 19px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.case-context__role { grid-column: 4 / span 6; max-width: 50ch; font-size: 19px; line-height: 1.6; text-wrap: pretty; }

/* Platform history (AKSARA): dated steps on hairlines; Etuya's parts carry a small cobalt tag. */
.case-history { align-items: start; }
.case-history .case-context__label { padding-top: 14px; }
.history { list-style: none; max-width: 62ch; border-bottom: 1px solid var(--rule); }
.history__item {
  display: grid;
  grid-template-columns: minmax(7em, 9.5em) minmax(0, 1fr);
  gap: 6px var(--gutter);
  align-items: baseline;
  padding-block: clamp(16px, 2.4vh, 22px);
  border-top: 1px solid var(--rule);
}
.history__item:first-child { border-top-color: var(--rule-strong); }
.history__when { font: italic 400 1.25rem/1.3 var(--serif); color: var(--ink-2); }
.history__item--ours .history__when { color: var(--cobalt-deep); }
.history__text { font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.history__cases { list-style: none; display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 6px; }
.history__cases .link-arrow { font-size: 14.5px; }
.history__tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 8px;
  border: 1px solid var(--cobalt-deep);
  font: 600 12.5px/1.2 var(--sans);
  color: var(--cobalt-deep);
}
.history__note { max-width: 62ch; }

/* A figure published on the live platform: the numeral set like .t-num, its source and date under it. */
.case-stat { align-items: start; }
.case-stat .case-context__label { padding-top: 14px; }
.stat { grid-column: 4 / span 9; padding-top: 14px; border-top: 1px solid var(--rule-strong); }
.stat__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px clamp(18px, 2vw, 32px); margin-top: clamp(12px, 2vh, 24px); }
.stat__num { margin-left: -.04em; }
.stat__plus { color: var(--cobalt); }
.stat__unit {
  font: 400 clamp(1.55rem, 2.45vw, 2.45rem)/1.2 var(--serif);
  font-variation-settings: "opsz" 40;
  letter-spacing: -.012em;
}
.stat__cap { max-width: 50ch; margin-top: clamp(20px, 3vh, 32px); }
.stat__label { font-size: 19px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.stat__source { margin-top: 14px; font: 500 14px/1.5 var(--sans); color: var(--ink-2); }
.stat__link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; transition: color .3s ease, text-decoration-color .3s ease; }
.stat__link i { font-size: .95em; color: var(--cobalt-deep); }
@media (hover: hover) { .stat__link:hover { color: var(--cobalt-deep); text-decoration-color: currentColor; } }

/* ---------- Case: what we built ---------- */
.case-built__title { margin-bottom: clamp(56px, 9vh, 112px); }
.built { display: grid; gap: clamp(96px, 14vh, 168px); }
.built__item {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px var(--gutter);
  align-items: center;
}
.built__media { grid-column: 1 / span 7; }
.built__media img { width: 100%; }
.built__media--framed { padding: clamp(14px, 2.6vw, 44px); background: var(--paper-2); }
.built__media--framed img { outline: 1px solid var(--rule); }
.built__text { grid-column: 9 / span 4; }
.built__text .t-h3 { margin-bottom: 16px; }
.built__text p { max-width: 40ch; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 768px) {
  .built__item--flip .built__media { grid-column: 6 / span 7; grid-row: 1; }
  .built__item--flip .built__text { grid-column: 1 / span 4; grid-row: 1; }
  .built__item--wide { row-gap: clamp(28px, 4vh, 44px); }
  .built__item--wide .built__media { grid-column: 3 / span 8; }
  .built__item--wide .built__text {
    grid-column: 3 / span 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px var(--gutter);
    align-items: baseline;
    padding-top: 22px;
    border-top: 1px solid var(--rule-strong);
  }
  .built__item--wide .built__text .t-h3 { margin: 0; }
}
.built__list { list-style: none; border-bottom: 1px solid var(--rule-strong); }
.built__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px var(--gutter);
  align-items: baseline;
  padding-block: clamp(28px, 4.5vh, 48px);
  border-top: 1px solid var(--rule-strong);
}
.built__row-title {
  grid-column: 1 / span 5;
  font: 400 clamp(1.6rem, 2.4vw, 2.5rem)/1.1 var(--serif);
  font-variation-settings: "opsz" 48;
  letter-spacing: -.016em;
  text-wrap: balance;
}
.built__row p { grid-column: 7 / span 5; max-width: 44ch; color: var(--ink-2); text-wrap: pretty; }

/* ---------- Case: how it works (flow) ---------- */
.case-flow__title { margin-bottom: clamp(52px, 8vh, 96px); }
.flow {
  --gap: clamp(56px, 6vw, 112px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: var(--gap);
}
.flow__node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: clamp(128px, 17vh, 184px);
  padding: clamp(20px, 2.1vw, 32px);
  border: 1px solid var(--rule-strong);
}
.flow__node--core { background: var(--paper-2); border-color: var(--paper-2); }
.flow__title {
  font: 400 clamp(1.35rem, 1.8vw, 1.9rem)/1.2 var(--serif);
  font-variation-settings: "opsz" 40;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.flow__detail { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.flow__link {
  position: absolute;
  left: 100%;
  top: 50%;
  display: flex;
  align-items: center;
  width: calc(var(--gap) + 1px);
  height: 20px;
  margin-top: -10px;
  padding-inline: 10px 4px;
  pointer-events: none;
}
.flow__line { flex: 1; height: 1.5px; background: var(--cobalt); transform-origin: left center; }
.flow__head { margin-left: -12px; font-size: 20px; line-height: 1; color: var(--cobalt); }

/* ---------- Case: how we delivered ---------- */
.case-process__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px var(--gutter);
  align-items: start;
}
.case-process__title { grid-column: 1 / span 5; max-width: 8em; }
.steps { grid-column: 7 / span 6; list-style: none; border-bottom: 1px solid var(--rule-strong); }
.step {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 6px var(--gutter);
  align-items: baseline;
  padding-block: clamp(20px, 3.2vh, 32px);
  border-top: 1px solid var(--rule-strong);
}
.step__verb { font: italic 400 clamp(1.8rem, 2.5vw, 2.6rem)/1.1 var(--serif); letter-spacing: -.012em; }
.step__text { color: var(--ink-2); text-wrap: pretty; }

/* ---------- Case: from the live platform (gallery) ----------
   One light table (paper-2) with the screens on it, each with a hairline.
   First line: the lead screen and the phone screen share one height (their widths
   follow their aspect ratios, set by render.js as --share). Then the other screens,
   three to a line. Under 768px: the lead full width, the phone beside a column of the rest. */
.case-live__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 48px;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.case-live__title { max-width: 10em; }
.case-live__visit { padding-bottom: 4px; }
.gal-panel { padding: clamp(14px, 3.6vw, 60px); background: var(--paper-2); }
.gal {
  --g: clamp(14px, 2.2vw, 36px);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(28px, 4.4vh, 52px) var(--g);
}
.gal__item { min-width: 0; }
.gal__item--lead, .gal__item--phone { width: calc((100% - var(--gaps, 0) * var(--g)) * var(--share, 1) - .5px); }
.gal__item--rest { width: calc((100% - 2 * var(--g)) / 3 - .5px); }
.gal__item--solo { width: min(100%, 300px); }
.gal__fig { display: grid; gap: 12px; }
.gal__cap { font: 500 14px/1.4 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.case-live__note { max-width: 62ch; }

/* ---------- Lightbox: a modal <dialog> on paper, the screen framed by a hairline ---------- */
html.lb-open { overflow: hidden; }
.lb {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb::backdrop { background: rgba(241, 243, 239, .9); }
.lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--nav-h);
  padding-inline: var(--margin);
  border-bottom: 1px solid var(--rule);
}
.lb__visit { min-width: 0; }
.lb__close { min-height: 42px; padding: 0 1.1em; font-size: 15px; }
.lb__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(14px, 3vh, 36px) var(--margin);
  touch-action: pan-y pinch-zoom;
}
.lb__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  background: var(--paper-2);
  outline: 1px solid var(--rule);
  transition: opacity .25s ease;
}
.lb__img.is-loading { opacity: 0; }
.lb__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 12px var(--margin) max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
}
.lb__cap { display: flex; align-items: baseline; gap: 16px; min-width: 0; font: 500 16px/1.4 var(--sans); }
.lb__count {
  flex: none;
  font: 400 1.4rem/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-2);
}
.lb__nav { flex: none; display: flex; gap: 10px; }
.lb__btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  transition: background-color .25s ease, transform .3s var(--ease-out);
}
.lb__btn:active { transform: scale(.95); }
@media (hover: hover) { .lb__btn:hover { background: var(--paper-2); } }
html.motion-ok .lb[open] { animation: lb-in .32s var(--ease-out); }
html.motion-ok .lb[open] .lb__stage { animation: lb-rise .55s var(--ease-out); }
.lb.is-closing { opacity: 0; transition: opacity .2s ease; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-rise { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- Case: the cobalt peak (the outcome: what the platform makes possible) ---------- */
.case-peak { padding-block: var(--section-y); }
/* Labels in the cobalt field stay full white: 86 percent white would fall below AA at this size. */
.case-peak__label { margin-bottom: clamp(20px, 3.4vh, 32px); font: italic 400 1.15rem/1.3 var(--serif); color: var(--on-cobalt); }
/* Our role signs the finding: a hairline, a label and one plain sentence, then the logo. */
.case-peak__role { max-width: 58ch; margin-top: clamp(36px, 6vh, 56px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .42); }
.case-peak__role-label { margin-bottom: 8px; font: italic 400 1.1rem/1.3 var(--serif); color: var(--on-cobalt); }
.case-peak__role p { font-size: 18px; line-height: 1.6; color: var(--on-cobalt); text-wrap: pretty; }
/* The section after the cobalt field needs no hairline on top. */
.case-peak + .section--rule { border-top-color: transparent; }

/* ---------- Case: sources (the public pages behind the facts) ---------- */
.case-sources { padding-block: clamp(64px, 10vh, 112px); border-top: 1px solid var(--rule); }
.case-sources__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px var(--gutter);
  align-items: start;
}
.case-sources__title { grid-column: 1 / span 3; padding-top: 14px; }
.case-sources__body { grid-column: 4 / span 8; min-width: 0; }
.sources { list-style: none; max-width: 70ch; border-bottom: 1px solid var(--rule); }
.sources__item { border-top: 1px solid var(--rule); }
.sources__item:first-child { border-top-color: var(--rule-strong); }
.source {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 20px;
  padding-block: 16px;
  color: var(--ink);
  text-decoration: none;
}
.source__label {
  font: 500 16.5px/1.45 var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 5px;
  text-wrap: pretty;
  transition: color .3s ease, text-decoration-color .3s ease;
}
.source__meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 2px 12px; font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.source__host { overflow-wrap: anywhere; }
.source__tag { padding-left: 12px; border-left: 1px solid var(--rule-strong); }
.source__icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 18px; color: var(--cobalt-deep); transition: transform .4s var(--ease-out); }
.source:focus-visible { outline: 2px solid var(--cobalt-deep); outline-offset: 4px; }
@media (hover: hover) {
  .source:hover .source__label { color: var(--cobalt-deep); text-decoration-color: currentColor; }
  .source:hover .source__icon { transform: translate(2px, -2px); }
}
.case-sources__note { max-width: 62ch; }

/* ---------- Case: related, pager, not found ---------- */
.case-related__title { margin-bottom: clamp(36px, 6vh, 72px); }
.pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pager__link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: clamp(36px, 6vh, 64px);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  text-decoration: none;
}
.pager__link--prev { padding-right: var(--gutter); }
.pager__link--next { align-items: flex-end; padding-left: var(--gutter); text-align: right; border-left: 1px solid var(--rule-strong); }
.pager__dir { display: inline-flex; align-items: center; gap: 8px; font: 500 14.5px/1.3 var(--sans); color: var(--ink-2); }
.pager__dir i { font-size: 17px; color: var(--cobalt-deep); transition: transform .45s var(--ease-out); }
.pager__name {
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 60;
  font-weight: 380;
  font-size: clamp(1.8rem, 3.2vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
  transition: color .3s ease;
}
@media (hover: hover) {
  .pager__link:hover .pager__name { color: var(--cobalt-deep); }
  .pager__link--prev:hover i { transform: translateX(-4px); }
  .pager__link--next:hover i { transform: translateX(4px); }
}
.case-missing { min-height: 56vh; }
.case-missing__text { max-width: 30ch; margin-top: clamp(24px, 4vh, 40px); }
.case-missing .link-arrow { margin-top: clamp(28px, 4.5vh, 44px); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .wk-rail, .wk-results { grid-column: 1 / -1; }
  .wk-rail { position: static; }
  .wk-rail__title { max-width: none; }
  .ix-filter__list { display: flex; flex-wrap: wrap; gap: 0 26px; }
  .ix-count { margin-top: 14px; padding-top: 0; border-top: 0; }
  .case-hero__main { grid-column: 1 / span 12; }
  .case-hero__lede { max-width: 34ch; }
  .case-hero__meta { grid-column: 1 / span 8; }
  .flow { --gap: 44px; }
  .flow__link { padding-inline: 6px 2px; }
}
@media (max-width: 767px) {
  .wk-index__layout, .case-hero__row, .case-context__block, .built__item, .built__row,
  .case-process__layout { grid-template-columns: minmax(0, 1fr); }
  .case-hero__main, .case-hero__meta, .case-context__label, .case-context__body, .case-context__role, .stat,
  .built__media, .built__text, .built__row-title, .built__row p, .case-process__title, .steps { grid-column: 1 / -1; }
  .case-context__more { font-size: 17px; }
  .case-peak__role p { font-size: 16.5px; }
  .case-history .case-context__label, .case-sources__title { padding-top: 0; }
  .history__item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .history__when { font-size: 1.15rem; }
  .history__text { font-size: 16px; }
  .case-sources__layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .case-sources__title, .case-sources__body { grid-column: 1 / -1; }
  .source { gap: 4px 14px; padding-block: 14px; }
  .source__label { font-size: 16px; }
  .source__meta { font-size: 13.5px; }
  .wk-feat .spread__title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .ix-filter__list { gap: 0 22px; }
  .ix__item { grid-template-columns: minmax(0, 1fr) 22px; gap: 8px 12px; }
  .ix__main { grid-column: 1; grid-row: 1; }
  .ix__body { grid-column: 1 / -1; grid-row: 2; }
  .ix__arrow { grid-column: 2; grid-row: 1; margin-top: .3em; font-size: 20px; }
  .ix__summary { padding-top: 2px; font-size: 16px; }
  .facts > div { grid-template-columns: 7em minmax(0, 1fr); }
  .case-type { min-height: 0; gap: 40px; }
  .case-type__tree { flex-direction: column; align-items: flex-start; gap: 28px; }
  .case-type__branches { margin-left: 0; }
  .case-type__branches::after { display: none; }
  .case-type__branches li { white-space: normal; }
  .case-context { padding-top: 64px; }
  .case-context__block { gap: 10px; }
  .case-context__role { font-size: 17px; }
  .case-stat .case-context__label { padding-top: 0; }
  .stat__label { font-size: 17px; }
  .built { gap: 72px; }
  .built__item { gap: 24px; }
  .built__row { gap: 10px; }
  .flow { --gap: 56px; grid-template-columns: minmax(0, 1fr); }
  .flow__node { min-height: 0; }
  .flow__link {
    left: 28px; top: 100%;
    flex-direction: column;
    width: 20px;
    height: calc(var(--gap) + 1px);
    margin: 0;
    padding: 8px 0 3px;
  }
  .flow__line { flex: 1; width: 1.5px; height: auto; transform-origin: center top; }
  .flow__head { margin: -12px 0 0; transform: rotate(90deg); }
  .step { grid-template-columns: minmax(0, 1fr); }
  .case-live__head { align-items: flex-start; flex-direction: column; }
  .gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; align-items: start; }
  .gal__item--lead, .gal__item--phone, .gal__item--rest { width: auto; }
  .gal__item--lead { grid-column: 1 / -1; }
  .gal__item--phone { grid-column: 1; grid-row: span var(--rows, 1); }
  .gal__item--solo { width: auto; }
  .gal__fig { gap: 8px; }
  .gal__cap { font-size: 13px; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager__link { padding-block: 28px; }
  .pager__link--next { border-left: 0; border-top: 0; padding-left: 0; }
  .pager__link--prev { padding-right: 0; }
  .lb__cap { flex-direction: column; gap: 4px; font-size: 15px; }
  .lb__count { font-size: 1.2rem; }
}
@media (max-width: 560px) {
  .lb__visit .visit__url { display: none; }
}