/* ============================================================================
   case.css · the work pages: work/<slug>/ (prefix cs-) and work/ (prefix wi-)
   Design language revision 6 (October 2026: the sheet, the stage, the
   year ledger). Loaded after styles.css and ui.css, and built only from
   the tokens and components in ui/css/00-tokens.css and the product table
   in ui/css/00b-products.css: container, rows, plates, buttons, labels, the
   disclosure mark and the contact card. One typeface on the seven-step
   scale, no chips, no eyebrows. Words never arrive: the text is there when
   the page is; only plates and their objects move.

   A case study reads in a minute and holds its depth one click away:
     hero        "the sheet": icon, name, the homepage's one-liner, store
                 pills, Role / Dates / Status / Stack, the other links;
                 beside it the project's own Work plate (the page morph
                 lands in it)
     stage       every screen on one wide plate, the lead in the middle
                 (a sideways swipe on phones)
     In short    three points on one plate
     parts       architecture board, challenges, decisions table, figures,
                 Working with AI tools
     notes       ONE disclosure with everything else, under the old ids
   /work/ is the homepage's Selected work, then the archive as a year
   ledger whose rows open into plates.
   Every object is a real capture or drawn from the case study's own data.
   Everything reads with no script.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Page frame. The pill is fixed, so the first block clears it the way the
   homepage hero does. Without script the pill is a static row.
   ------------------------------------------------------------------------ */
.cs-main, .wi-main { padding-top: clamp(104px, 15vh, 168px); }
html.no-js .cs-main, html.no-js .wi-main { padding-top: var(--s-6); }
/* The copy button needs script; without it the address is still there to select. */
html.no-js #ctCopy { display: none; }

/* A case study's rhythm is a step tighter than the homepage's: 48 → 64
   between a part's content and the next hairline. */
.cs-main { --sec-gap: clamp(3rem, 2rem + 3vw, 4rem); }

/* ---------------------------------------------------------------------------
   App icons: the iOS mask (22.5%), a 1px inset hairline, no shadow. The
   dark pair shows in dark mode where an app ships one.
   ------------------------------------------------------------------------ */
.cs-appicon {
  --appicon: 28px;
  position: relative; flex: none;
  display: inline-block; width: var(--appicon); height: var(--appicon);
  border-radius: 22.5%; overflow: hidden;
  background: var(--plate);
}
.cs-appicon-64 { --appicon: 64px; }
.cs-appicon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-appicon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hairline); pointer-events: none; }
.cs-appicon-dark { display: none !important; }
:root[data-theme="dark"] .cs-appicon-dark { display: block !important; }
:root[data-theme="dark"] .cs-appicon-light { display: none !important; }

/* ---------------------------------------------------------------------------
   Hero, "the sheet": the identity and the facts on the left, the project's
   own Work plate on the right (the same object on the same tint, read from
   the homepage partial, so the page morph is the plate opening). Left, top
   to bottom: the app icon, the name, the homepage's one-liner, the store
   pills (or the one place to try it), then Role, Dates, Status and Stack
   as a ruled sheet read in one pass, then every other destination in ink.
   On phones the facts come before the plate.
   ------------------------------------------------------------------------ */
.cs-hero-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) {
  .cs-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); }
}
.cs-hero-copy { display: grid; justify-items: start; gap: var(--s-4); min-width: 0; }
.cs-hero-icon { margin-bottom: var(--s-1); }

.cs-title {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--ink);
}
.cs-summary { margin: 0; max-width: 34ch; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--muted); text-wrap: pretty; }
.cs-nb { white-space: nowrap; }

/* The stores, as quiet pills by the title. */
.cs-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-1) 0 0; }

/* The sheet: a label column and the facts, one hairline between rows. */
.cs-sheet { width: 100%; margin: var(--s-2) 0 0; border-top: 1px solid var(--hairline); }
.cs-sheet-row { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); column-gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--hairline); }
.cs-sheet dt { margin: 0; padding-top: 2px; }
.cs-sheet dd { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink); text-wrap: pretty; }
@media (max-width: 399.98px) { .cs-sheet-row { grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: var(--s-3); } }

/* The other destinations: 44px targets whose extra height is handed back. */
.cs-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 0; font-size: var(--fs-sm); }
.cs-link-item { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); }
.cs-links a { min-height: 44px; }
.cs-link-note { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--muted); }

/* The facts beside the copy from 900px: Role, Dates, Status, Stack and
   every other destination, read in one pass. Under it on phones. */
.cs-hero-facts { min-width: 0; }
@media (min-width: 900px) {
  .cs-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; }
  .cs-hero-facts .cs-sheet { margin-top: 0; }
}

/* ---------------------------------------------------------------------------
   The highlights (November 2026): one card per screen, on the product's
   own ground, a short headline over the capture. The capture is always
   whole: it is contained by the card, never cut by it, on every width.
   The row scrolls sideways with snap points; its first card lines up
   with the page's column and the row runs out to the window's edge. One
   card height for phones and windows alike, so a mixed row stays level;
   a row of windows alone is shorter. A card opens its capture full size.
   ------------------------------------------------------------------------ */
.cs-hl {
  --hl-h: clamp(520px, 44vw + 120px, 680px);
  --hl-w-phone: calc((var(--hl-h) - var(--hl-cap) - var(--hl-pad)) * .462 + 2 * var(--hl-pad));
  --hl-w-wide: min(820px, 84vw);
  --hl-pad: clamp(20px, 2.2vw, 32px);
  --hl-cap: 6.75rem;
  --hl-ink: #f5f5f7;
  --hl-soft: rgb(245 245 247 / .64);
  --hl-edge: rgb(255 255 255 / .1);
  margin-top: var(--s-8);
}
.cs-hl[data-shape="windows"] { --hl-h: auto; }
.cs-hl-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.cs-hl-t { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: var(--ink); text-wrap: balance; }
.cs-hl-ctrl { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.cs-hl-ctrl[hidden] { display: none; }
.cs-hl-count { margin-right: var(--s-2); color: var(--muted); font-variant-numeric: tabular-nums; }
.cs-hl-btn, .cs-lb-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--tint); color: var(--ink);
  transition: background-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out), opacity var(--d-fast) var(--ease-out);
}
.cs-hl-btn .ico, .cs-lb-btn .ico { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .cs-hl-btn:not(:disabled):hover { background: var(--tint-2); } }
.cs-hl-btn:not(:disabled):active, .cs-lb-btn:active { transform: scale(.94); transition-duration: var(--d-press); }
.cs-hl-btn:disabled { opacity: .35; cursor: default; }
.cs-hl-btn:focus-visible, .cs-lb-btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* The row: the page's column on the left, the window's edge on the right. */
.cs-hl-viewport { position: relative; }
.cs-hl-track {
  --hl-inset: max(var(--gutter), (100% - var(--container)) / 2);
  display: flex; align-items: stretch; gap: clamp(12px, 1.6vw, 20px);
  margin: 0; padding: 0 var(--hl-inset) var(--s-3); list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--hl-inset);
  scrollbar-width: none;
}
.cs-hl-track::-webkit-scrollbar { display: none; }
.cs-hl-track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-card); }
/* One card alone sits in the column, not against the window's edge. */
.cs-hl[data-one] .cs-hl-track { overflow: visible; }

.cs-hl-card {
  position: relative; flex: none; scroll-snap-align: start;
  display: flex; flex-direction: column;
  width: var(--hl-w-phone); height: var(--hl-h);
  border-radius: var(--r-card); overflow: clip; isolation: isolate;
  background: var(--hl-ground);
  box-shadow: inset 0 0 0 1px var(--hl-edge);
}
.cs-hl-card[data-shape="landscape"] { width: var(--hl-w-wide); }
.cs-hl[data-shape="mixed"] .cs-hl-card[data-shape="landscape"] { width: min(var(--hl-w-wide), (var(--hl-h) - var(--hl-cap) - var(--hl-pad)) * 1.62 + 2 * var(--hl-pad)); }
.cs-hl[data-one] .cs-hl-card[data-shape="landscape"] { width: min(100%, 1000px); }
.cs-hl[data-one] .cs-hl-track { padding-inline: 0; width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

.cs-hl-cap {
  flex: none; margin: 0;
  padding: var(--hl-pad) var(--hl-pad) var(--s-4);
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--hl-soft); text-wrap: pretty;
}
.cs-hl-cap-in { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.cs-hl-cap strong { color: var(--hl-ink); font-weight: var(--fw-strong); }

/* The capture: the space left under the caption is a size container, so
   the picture is held to it by its own width and height and is always
   whole, centred, with breathing room to the card's edge. */
.cs-hl-open {
  flex: 1 1 0; min-height: 0;
  container-type: size;
  display: grid; place-items: center;
  margin: 0 var(--hl-pad) var(--hl-pad); padding: 0;
  border: 0; background: none; cursor: zoom-in; color: inherit;
}
.cs-hl-open:focus-visible { outline: none; }
.cs-hl-open:focus-visible .cs-hl-img { box-shadow: var(--focus-ring); }
.cs-hl-img {
  display: block; width: auto; height: auto; max-width: 100cqw; max-height: 100cqh;
  border-radius: clamp(14px, 1.6vw, 22px);
  box-shadow: 0 0 0 1px var(--hl-edge), 0 12px 32px rgb(0 0 0 / .28);
  transition: transform var(--d-page) var(--ease-enter);
}
.cs-hl-card[data-shape="landscape"] .cs-hl-img { border-radius: clamp(8px, .9vw, 12px); }
/* A card with no set height (windows alone; a window among phones on a
   phone) takes the picture's own height instead. */
.cs-hl[data-shape="windows"] .cs-hl-open { flex: none; container-type: normal; }
.cs-hl[data-shape="windows"] .cs-hl-img { width: 100%; max-width: 100%; max-height: none; }
@media (hover: hover) and (pointer: fine) { .cs-hl-open:hover .cs-hl-img { transform: scale(1.012); } }
.cs-hl-open:active .cs-hl-img { transform: scale(.985); transition-duration: var(--d-press); }

/* A light ground (Adelante's paper, Photoshoot's print) takes dark words. */
[data-tone="light"] { --hl-ink: #111113; --hl-soft: rgb(17 17 19 / .62); --hl-edge: rgb(0 0 0 / .08); }
.cs-hl[data-tone="light"] .cs-hl-img { box-shadow: 0 0 0 1px var(--hl-edge), 0 12px 32px rgb(0 0 0 / .14); }
/* On the dark page a dark ground needs one ring to read as a card. */
:root[data-theme="dark"] .cs-hl[data-tone="dark"] { --hl-edge: rgb(255 255 255 / .12); }

@media (max-width: 639.98px) {
  .cs-hl { --hl-h: min(640px, 160vw); --hl-w-wide: 88vw; --hl-cap: 6.75rem; margin-top: var(--s-7); }
  .cs-hl-card { width: min(78vw, var(--hl-w-phone)); }
  /* A wide screen among phones keeps the row's height (no strip of page
     under it): its caption reads in full and the screen sits centred in
     the rest of the card. */
  .cs-hl[data-shape="mixed"] .cs-hl-card[data-shape="landscape"] { width: 88vw; }
  .cs-hl[data-shape="mixed"] .cs-hl-card[data-shape="landscape"] .cs-hl-cap-in { -webkit-line-clamp: 8; line-clamp: 8; }
  .cs-hl[data-shape="mixed"] .cs-hl-card[data-shape="landscape"] .cs-hl-cap { font-size: var(--fs-body); line-height: var(--lh-body); }
  .cs-hl-head { margin-bottom: var(--s-4); }
  .cs-hl-btn { width: 40px; height: 40px; }
  .cs-hl-count { display: none; }
}

/* The viewer: the capture as large as the window allows, its caption under
   it, the walk buttons at the sides and the close at the top right. */
.cs-lb {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: #f5f5f7;
  overscroll-behavior: contain;
}
.cs-lb::backdrop { background: rgb(8 8 10 / .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cs-lb[open] { animation: lb-in var(--d-page) var(--ease-enter); }
@keyframes lb-in { from { opacity: 0; transform: scale(.98); } }
.cs-lb-in { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 64px clamp(16px, 7vw, 96px) 24px; box-sizing: border-box; }
.cs-lb-fig { display: grid; justify-items: center; gap: var(--s-4); margin: 0; max-width: 100%; max-height: 100%; min-height: 0; }
.cs-lb-img { display: block; width: auto; height: auto; max-width: min(100%, 1400px); max-height: calc(100dvh - 64px - 24px - 6.5rem); border-radius: 14px; box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.cs-lb[data-shape="portrait"] .cs-lb-img { border-radius: 24px; }
.cs-lb-cap { max-width: 60ch; font-size: var(--fs-sm); line-height: var(--lh-sm); color: rgb(245 245 247 / .7); text-align: center; text-wrap: pretty; }
.cs-lb-cap strong { color: #f5f5f7; }
.cs-lb-btn { position: absolute; background: rgb(255 255 255 / .12); color: #f5f5f7; }
@media (hover: hover) and (pointer: fine) { .cs-lb-btn:hover { background: rgb(255 255 255 / .2); } }
.cs-lb-close { top: 12px; right: 12px; }
.cs-lb-prev { left: clamp(8px, 2vw, 24px); top: 50%; translate: 0 -50%; }
.cs-lb-next { right: clamp(8px, 2vw, 24px); top: 50%; translate: 0 -50%; }
.cs-lb[data-one] .cs-lb-prev, .cs-lb[data-one] .cs-lb-next { display: none; }
@media (max-width: 639.98px) {
  .cs-lb-in { padding: 60px 12px 88px; }
  .cs-lb-img { max-height: calc(100dvh - 60px - 88px - 5.5rem); }
  .cs-lb-prev, .cs-lb-next { top: auto; bottom: 20px; translate: none; }
  .cs-lb-prev { left: calc(50% - 52px); }
  .cs-lb-next { right: calc(50% - 52px); }
}
html.lb-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .cs-lb[open] { animation: none; }
  .cs-hl-img, .cs-hl-btn, .cs-lb-btn { transition: none; }
}

/* ---------------------------------------------------------------------------
   Next case study: one banner on the next project's ground, the words on
   the left and its lead capture rising from the bottom edge on the right.
   ------------------------------------------------------------------------ */
.cs-next-sec { margin-top: var(--sec-gap); }
.cs-next {
  --hl-ink: #f5f5f7; --hl-soft: rgb(245 245 247 / .66);
  position: relative; isolation: isolate; overflow: clip;
  display: grid; align-items: center; gap: var(--s-5);
  min-height: 280px; padding: clamp(24px, 4vw, 48px);
  border-radius: var(--r-card); background: var(--hl-ground);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
  color: var(--hl-ink); text-decoration: none;
  transition: transform var(--d-fast) var(--ease-out);
}
.cs-next[data-tone="light"] { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.cs-next:active { transform: scale(.992); transition-duration: var(--d-press); }
.cs-next:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cs-next-copy { display: grid; gap: var(--s-3); min-width: 0; }
.cs-next-k { color: var(--hl-soft); }
.cs-next-name { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
.cs-next-line { max-width: 40ch; color: var(--hl-soft); text-wrap: pretty; }
.cs-next-media { position: relative; align-self: stretch; min-height: 220px; }
.cs-next-media img { position: absolute; left: 50%; translate: -50% 0; display: block; height: auto; max-width: none; box-shadow: 0 12px 32px rgb(0 0 0 / .3); transition: translate var(--d-page) var(--ease-enter); }
.cs-next-media[data-shape="portrait"] img { top: 0; width: 200px; border-radius: 22px; }
.cs-next-media[data-shape="landscape"] img { top: 12px; width: min(100%, 520px); border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .cs-next:hover .cs-next-media img { translate: -50% -6px; } }
@media (min-width: 760px) {
  .cs-next { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 0; }
  .cs-next-copy { padding-bottom: clamp(24px, 4vw, 48px); }
  .cs-next-media { margin-top: -8px; }
}
@media (max-width: 759.98px) {
  .cs-next { padding-bottom: 0; }
  .cs-next-media { margin-inline: calc(-1 * clamp(24px, 4vw, 48px)); }
}
.cs-next-all { margin: var(--s-4) 0 0; font-size: var(--fs-sm); }
.cs-next-all a { min-height: 44px; }

/* ---------------------------------------------------------------------------
   The body: "On this page" and the parts. From 1100px the index is a sticky
   column where the empty paper was (headings never stick). Narrower, it is
   a short row of plain text links under the hero.
   ------------------------------------------------------------------------ */
.cs-body { margin-top: var(--s-8); }
.cs-toc { min-width: 0; }
.cs-toc-t { margin: 0 0 var(--s-3); }
.cs-toc-track { position: relative; }
.cs-toc-list { display: flex; flex-wrap: wrap; column-gap: var(--s-5); margin: 0 0 var(--s-5); padding: 0; list-style: none; }

/* A link: muted text that comes to ink, with the tint drawn as the nav
   indicator's pill (36px, fully rounded) 10px past the text. */
.cs-toc-link {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-sm); font-weight: var(--fw-ui); line-height: var(--lh-ui);
  color: var(--muted); text-decoration: none;
  transition: color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.cs-toc-link::before {
  content: ""; position: absolute; z-index: -1;
  left: -10px; right: -10px; top: 50%; height: 36px; translate: 0 -50%;
  border-radius: var(--r-pill); background: var(--tint);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.cs-toc-link[aria-current="true"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .cs-toc-link:hover { color: var(--ink); }
  .cs-toc-link:hover::before { opacity: 1; }
}
.cs-toc-link:active { transform: scale(var(--press-text)); transition-duration: var(--d-press); }
.cs-toc-link:active::before { opacity: 1; background: var(--tint-2); }
.cs-toc-link:focus-visible { box-shadow: none; color: var(--ink); }
.cs-toc-link:focus-visible::before { opacity: 1; box-shadow: var(--focus-ring); }

/* The sliding tint: one span, 100px wide and scaled on X so only transform
   animates; the horizontal radius is pre-divided by the scale so the ends
   stay semicircles. Shown only beside the parts (1100px and up). */
.cs-toc-ind {
  --ind-x: 0px; --ind-y: 0px; --ind-sx: 1;
  position: absolute; top: 0; left: 0; z-index: 0;
  display: none; width: 100px; height: 36px;
  border-radius: calc(18px / var(--ind-sx)) / 18px;
  background: var(--tint-2);
  transform: translate(var(--ind-x), var(--ind-y)) scaleX(var(--ind-sx));
  transform-origin: 0 50%;
  opacity: 0; pointer-events: none;
  transition: transform var(--d-in) var(--spring), opacity var(--d-fast) var(--ease-out);
}
.cs-toc-ind.is-on { opacity: 1; }

/* Narrow: the label is for screen readers, and only the key parts show. */
@media (max-width: 1099px) {
  .cs-toc-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cs-toc-more { display: none; }
}
/* On a phone the six shortcuts sit in two tidy rows of three; on the
   narrowest, three rows of two. */
@media (max-width: 639px) {
  .cs-toc-list { display: grid; grid-template-columns: repeat(3, max-content); }
}
@media (max-width: 419px) {
  .cs-toc-list { grid-template-columns: repeat(2, max-content); }
}

@media (min-width: 1100px) {
  .cs-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-8); }
  .cs-toc { position: sticky; top: var(--s-9); align-self: start; padding-top: var(--sec-top); }
  .cs-toc-t { margin-bottom: var(--s-4); }
  .cs-toc-list { display: grid; justify-items: start; margin: 0; }
  .cs-toc-link { min-height: 36px; padding-inline: var(--s-3); margin-left: calc(-1 * var(--s-3)); border-radius: var(--r-pill); }
  .cs-toc-link::before { inset: 0; left: 0; right: 0; height: auto; translate: none; }
  .cs-toc-ind { display: block; }
  .cs-toc-link[aria-current="true"]::before { opacity: 0; }
}
/* A short window keeps the whole index reachable. */
@media (min-width: 1100px) and (max-height: 700px) {
  .cs-toc { top: var(--s-8); }
  .cs-toc-link { min-height: 30px; }
}

/* ---------------------------------------------------------------------------
   Parts: the hairline introduces the heading, the heading states the point,
   the content follows at the head gap.
   ------------------------------------------------------------------------ */
.cs-part { min-width: 0; padding-block: var(--sec-top) var(--sec-gap); border-top: 1px solid var(--hairline); }
.cs-part[tabindex="-1"]:focus { outline: none; box-shadow: none; }
.cs-part-t {
  margin: 0 0 var(--s-6); max-width: 28ch;
  font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2);
  color: var(--ink); text-wrap: balance;
}
.cs-item-t {
  margin: 0;
  font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3);
  color: var(--ink); text-wrap: balance;
}
.cs-prose { margin: 0; max-width: var(--prose); color: var(--ink); text-wrap: pretty; }
.cs-more-link { margin: var(--s-4) 0 0; font-size: var(--fs-sm); }
.cs-more-link a { min-height: 44px; }

/* In short: three points on one plate, each a short title beside a
   sentence; stacked on phones. */
.cs-inshort {
  list-style: none; margin: 0;
  padding: var(--s-2) var(--card-pad);
  background: var(--plate); border-radius: var(--r-card);
}
.cs-inshort-item { display: grid; gap: var(--s-1); padding-block: var(--s-5); }
.cs-inshort-item + .cs-inshort-item { border-top: 1px solid var(--hairline); }
.cs-inshort-t { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: var(--lh-h3); color: var(--ink); }
.cs-inshort p { margin: 0; max-width: var(--prose); color: var(--ink); text-wrap: pretty; }
@media (min-width: 640px) {
  .cs-inshort-item { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); column-gap: var(--s-6); align-items: baseline; }
}

/* A capture beside a challenge: one frame, the label under it. */
.cs-shot-fig { display: grid; gap: var(--s-3); align-content: start; margin: 0; min-width: 0; }
.cs-shot-frame img { display: block; width: 100%; height: auto; }
.cs-shot-fig figcaption { color: var(--muted); }

/* Architecture, drawn from the case study's own data: where each part runs
   as lanes on one plate, each part a box on the paper. */
.cs-board { margin: 0; }
.cs-lanes {
  list-style: none; margin: 0; padding: var(--s-2);
  display: grid; gap: var(--s-2);
  background: var(--plate); border-radius: var(--r-card);
}
.cs-lane { display: grid; align-content: start; gap: var(--s-3); min-width: 0; padding: var(--s-4); }
.cs-lane-t {
  margin: 0;
  font-size: var(--fs-label); font-weight: var(--fw-label); line-height: var(--lh-label); letter-spacing: var(--tr-label);
  color: var(--muted);
}
.cs-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cs-tile {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: var(--fs-sm); font-weight: var(--fw-ui); line-height: var(--lh-sm); color: var(--ink);
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .cs-lanes[data-lanes="2"] { grid-template-columns: 2fr 1fr; }
  .cs-lanes[data-lanes="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cs-board-cap { margin-top: var(--s-4); max-width: 62ch; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.cs-board-more { margin-left: var(--s-1); }

/* Challenges: each title and what came of it, ruled rows. */
.cs-challenges { list-style: none; margin: 0; padding: 0; }
.cs-challenge { display: grid; gap: var(--s-5); padding-block: var(--s-5); }
.cs-challenge:first-child { padding-top: 0; }
.cs-challenge + .cs-challenge { border-top: 1px solid var(--hairline); }
.cs-challenge-text { display: grid; gap: var(--s-2); min-width: 0; }
.cs-challenge-text p { margin: 0; max-width: var(--prose); color: var(--ink); text-wrap: pretty; }
.cs-challenge-fig { width: min(100%, 11rem); }
@media (min-width: 900px) {
  .cs-challenge.has-fig { grid-template-columns: minmax(0, 1fr) 11rem; column-gap: var(--s-6); align-items: start; }
}

/* Decisions: one table. Phones read each row as a block, the column names
   above their cells. */
.cs-dec { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.cs-dec th, .cs-dec td { padding: var(--s-4) var(--s-5) var(--s-4) 0; text-align: left; vertical-align: baseline; }
.cs-dec :is(th, td):last-child { padding-right: 0; }
.cs-dec thead th {
  padding-top: 0; padding-bottom: var(--s-3);
  font-size: var(--fs-label); font-weight: var(--fw-label); line-height: var(--lh-label); letter-spacing: var(--tr-label);
  color: var(--muted); border-bottom: 1px solid var(--hairline-strong);
}
.cs-dec tbody tr + tr > * { border-top: 1px solid var(--hairline); }
.cs-dec tbody th { width: 32%; font-weight: var(--fw-strong); color: var(--ink); }
.cs-dec td { color: var(--ink); }
.cs-dec td:last-child { color: var(--muted); }
@media (max-width: 639px) {
  .cs-dec, .cs-dec tbody, .cs-dec tr, .cs-dec th, .cs-dec td { display: block; width: auto; }
  .cs-dec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cs-dec tbody tr { padding-block: var(--s-4); }
  .cs-dec tbody tr:first-child { padding-top: 0; }
  .cs-dec tbody tr + tr { border-top: 1px solid var(--hairline); }
  .cs-dec tbody tr + tr > * { border-top: 0; }
  .cs-dec th, .cs-dec td { padding: 0; }
  .cs-dec tbody th { width: auto; }
  .cs-dec td { margin-top: var(--s-2); }
  .cs-dec td::before {
    content: attr(data-label); display: block;
    font-size: var(--fs-label); font-weight: var(--fw-label); line-height: var(--lh-label); letter-spacing: var(--tr-label); color: var(--muted);
  }
}

/* Results: real figures at the h3 step, each label under its number, one
   footnote. No tabular figures (Schibsted's widen the punctuation). */
.cs-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); margin: 0; }
@media (min-width: 640px) {
  .cs-numbers[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-numbers[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cs-number { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-1); min-width: 0; padding-top: var(--s-4); border-top: 1px solid var(--hairline-strong); }
.cs-number dt, .cs-number dd { margin: 0; }
.cs-number dd {
  font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3);
  color: var(--ink); white-space: nowrap;
}
.cs-number dt { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); text-wrap: pretty; }
.cs-numbers-note { margin: var(--s-5) 0 0; max-width: 62ch; font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--tr-label); color: var(--muted); }

/* ---------------------------------------------------------------------------
   The notes: one disclosure. The summary is the part's heading with the
   size of what it holds beneath; the plus turns into the cross. Opening it
   is instant: no height animation over twenty screens of text.
   ------------------------------------------------------------------------ */
.cs-part-notes { padding-bottom: var(--sec-gap); }
.cs-notes > summary {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-5); row-gap: var(--s-2); align-items: center;
  list-style: none; cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out);
}
.cs-notes > summary::-webkit-details-marker { display: none; }
.cs-notes > summary::before {
  content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--s-3));
  border-radius: var(--r-sm); background: var(--tint);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.cs-notes > summary .cs-part-t { margin: 0; grid-column: 1; }
.cs-notes-meta { grid-column: 1; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.cs-notes > summary .dis-ico { grid-column: 2; grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--muted); transition: transform var(--d-base) var(--ease-out), color var(--d-fast) var(--ease-out); }
.cs-notes > summary:active { transform: scale(var(--press-row)); transition-duration: var(--d-press); }
.cs-notes > summary:active::before { opacity: 1; background: var(--tint-2); }
.cs-notes > summary:focus-visible { box-shadow: none; }
.cs-notes > summary:focus-visible::before { opacity: 1; box-shadow: var(--focus-ring); }
@media (hover: hover) and (pointer: fine) {
  .cs-notes > summary:hover::before { opacity: 1; }
  .cs-notes > summary:hover .dis-ico { color: var(--ink); }
}
.cs-notes-body { padding-top: var(--s-6); }
.cs-note { padding-block: var(--s-6); border-top: 1px solid var(--hairline); scroll-margin-top: 6.5rem; }
.cs-note:last-child { padding-bottom: 0; }
.cs-note[tabindex="-1"]:focus { outline: none; box-shadow: none; }
.cs-note-t {
  margin: 0 0 var(--s-5);
  font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3);
  color: var(--ink);
}

/* Type inside the notes. */
.cs-lead { margin: 0; max-width: var(--prose); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink); text-wrap: pretty; }
.cs-note .cs-lead + * { margin-top: var(--s-5); }
.cs-h4 { margin: 0 0 var(--s-3); font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: var(--lh-h3); color: var(--ink); }
.cs-note-item + .cs-note-item { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--hairline); }
.cs-note-item .cs-item-t { margin-bottom: var(--s-4); }

/* Rows: a title beside its body, hairlines between. One column edge with
   the beats, the architecture table and the figures (14rem + 32px). */
.cs-rows { list-style: none; margin: 0; padding: 0; }
.cs-rows > li { display: grid; gap: var(--s-2); padding-block: var(--s-4); }
.cs-rows > li:first-child { padding-top: 0; }
.cs-rows > li:last-child { padding-bottom: 0; }
.cs-rows > li + li { border-top: 1px solid var(--hairline); }
.cs-row-t { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: var(--lh-h3); color: var(--ink); }
.cs-rows p { margin: 0; max-width: var(--prose); color: var(--ink); }
@media (min-width: 768px) {
  .cs-rows > li { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: var(--s-6); align-items: baseline; }
  .cs-rows > li > p:only-child { grid-column: 1 / -1; }
}

/* Real lists. */
.cs-list { display: grid; gap: var(--s-2); margin: 0; padding-left: 1.25em; max-width: var(--prose); }
.cs-list li { padding-left: .2em; color: var(--ink); }
.cs-list li::marker { color: var(--muted); }
.cs-list-muted li { color: var(--muted); }
.cs-split, .cs-lessons { display: grid; gap: var(--s-6); }

/* Product flow: a numbered list, the browser's own numerals at label size. */
.cs-flow { margin: 0; }
.cs-steps { display: grid; gap: var(--s-4) var(--s-6); margin: 0; padding: 0 0 0 1.75em; list-style: decimal; }
.cs-steps li { padding-left: .35em; }
.cs-steps li::marker { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: var(--fw-label); color: var(--muted); }
.cs-step-t { margin: 0 0 var(--s-1); font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: var(--lh-h3); color: var(--ink); }
.cs-steps p { margin: 0; color: var(--ink); }
@media (min-width: 640px) { .cs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-flow > figcaption { margin-top: var(--s-4); max-width: 60ch; }

/* Architecture in detail: one ruled table grouped by where each part runs,
   then the connections. */
.cs-arch-table { width: 100%; border-collapse: collapse; }
.cs-arch-table th, .cs-arch-table td { padding: 0; text-align: left; vertical-align: baseline; }
.cs-arch-table .cs-arch-tier th {
  padding: var(--s-7) 0 var(--s-3);
  font-size: var(--fs-sm); font-weight: var(--fw-ui); line-height: var(--lh-sm);
  color: var(--muted);
  border-bottom: 1px solid var(--hairline-strong);
}
.cs-arch-table > tbody:first-of-type .cs-arch-tier th { padding-top: 0; }
.cs-arch-table .cs-arch-row > * { padding-block: var(--s-4); }
.cs-arch-row + .cs-arch-row > * { border-top: 1px solid var(--hairline); }
.cs-arch-table .cs-arch-row > th {
  width: calc(14rem + var(--s-6)); padding-right: var(--s-6);
  font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: var(--lh-h3);
  color: var(--ink);
}
.cs-arch-row { scroll-margin-top: 6.5rem; }
.cs-arch-row:target > * { background: var(--tint); }
.cs-arch-nodes { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.cs-arch-nodes li { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink); }
.cs-arch-note { margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.cs-arch .cs-h4 { margin-top: var(--s-7); }
@media (max-width: 639px) {
  .cs-arch-table, .cs-arch-table tbody, .cs-arch-table tr, .cs-arch-table th, .cs-arch-table td { display: block; }
  .cs-arch-table .cs-arch-row > th { width: auto; padding: var(--s-4) 0 var(--s-2); }
  .cs-arch-table .cs-arch-row > td { padding-top: 0; }
  .cs-arch-row + .cs-arch-row > td { border-top: 0; }
}

/* Connections: from → to, then why, one row each. The part names link to
   their rows, in ink with no underline; hover draws the underline. */
.cs-arch-edges { list-style: none; margin: 0; padding: 0; }
.cs-arch-edges li { display: grid; gap: 2px; padding-block: var(--s-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.cs-arch-edges li + li { border-top: 1px solid var(--hairline); }
.cs-arch-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-2); color: var(--ink); }
.cs-arch-pair a {
  display: inline-block;
  padding-block: var(--s-1); margin-block: calc(-1 * var(--s-1));
  font-weight: var(--fw-ui); color: var(--ink); text-decoration: none;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  border-radius: var(--r-xs);
}
.cs-arch-pair b { font-weight: var(--fw-ui); }
.cs-arch-arr { color: var(--muted); --ico-stroke: 2.2; }
.cs-arch-via { color: var(--muted); }

/* Beats: a small label beside a paragraph, on the rows' column edge. */
.cs-beats { display: grid; gap: var(--s-3); margin: 0; }
.cs-beats > div { display: grid; gap: var(--s-1); }
.cs-beats dt, .cs-beats dd { margin: 0; }
.cs-beats dd p { margin: 0; max-width: var(--prose); color: var(--ink); }
.cs-beats .cs-list { margin: 0; }
@media (min-width: 768px) {
  .cs-beats > div { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: var(--s-6); align-items: baseline; }
}

/* Testing: the numbers as ruled rows on the same columns. */
.cs-stats { margin: var(--s-5) 0 var(--s-6); padding: 0; border-block: 1px solid var(--hairline); }
.cs-stat { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--s-3); }
@media (min-width: 768px) {
  .cs-stat { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: var(--s-6); }
}
.cs-stat + .cs-stat { border-top: 1px solid var(--hairline); }
.cs-stat dt, .cs-stat dd { margin: 0; }
.cs-stat dt { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.cs-stat dd { font-size: var(--fs-lead); font-weight: var(--fw-strong); line-height: var(--lh-lead); color: var(--ink); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   More work: the other case studies as ruled rows, each led by its icon;
   the whole row is the link, with the mark at its end.
   ------------------------------------------------------------------------ */
.cs-related { margin: 0; }
.cs-related > .row > .row-link { --row-pt: 0px; --row-pb: 0px; align-items: center; }
.cs-rel-text { display: grid; gap: var(--s-1); min-width: 0; }
.cs-rel-name { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
.cs-rel-line { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.cs-rel > :is(.cs-appicon, .cs-appicon-slot) { align-self: start; margin-top: 1px; }
.cs-appicon-slot { flex: none; width: 28px; height: 28px; }

/* ---------------------------------------------------------------------------
   work/: the homepage's Selected work (styled by ui.css), then the archive
   as ruled rows.
   ------------------------------------------------------------------------ */
.wi-main { --sec-gap: clamp(3rem, 2rem + 4vw, 6rem); }

/* The archive, a year ledger. The year sits in the left column (muted, at
   the h3 step); the rows on the right: icon, name and what it is, then
   where its link goes (one column, aligned through every year) and the +
   at the row's end. The + opens the row's own sentences in place and the
   row becomes a plate in the project's tint (00b-products.css), holding
   its real object where it has one; the plate keeps the hover tint's own
   12px outdent on both sides, so it sits square in the ledger. */
.wi-archive-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin-bottom: var(--head-gap); }
.wi-archive-head h2 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: var(--ink); }
.wi-count { margin: 0; color: var(--muted); }
.wi-years { display: grid; gap: var(--s-7); }
.wi-year { display: grid; gap: var(--s-2); }
.wi-year-t { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--muted); }
@media (min-width: 900px) {
  .wi-year { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-8); }
  .wi-year-t { padding-top: var(--s-3); }
}
.wi-rows { display: grid; margin: 0; padding: 0; list-style: none; }

.wi-row {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem; grid-template-areas: "sum go" "more more";
  align-items: center; column-gap: var(--s-5);
  padding: var(--s-2) 44px var(--s-2) 0;
  transition: padding var(--d-page) var(--ease-enter);
}
.wi-row + .wi-row { border-top: 1px solid var(--hairline); }
.wi-row[data-open], .wi-row[data-open] + .wi-row { border-top-color: transparent; }
.wi-row::before {
  content: ""; position: absolute; z-index: -1; inset: 2px calc(-1 * var(--s-3));
  border-radius: var(--r-sm); background: var(--tint); opacity: 0; pointer-events: none;
  transition: opacity var(--d-fast) var(--ease-out), background-color var(--d-base) var(--ease-out), border-radius var(--d-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .wi-row:has(.wi-sum:hover)::before { opacity: 1; } }
.wi-row:has(.wi-sum:active)::before { opacity: 1; background: var(--tint-2); }
.wi-row[data-open]::before { opacity: 1; inset: 0 calc(-1 * var(--s-3)); border-radius: var(--r-card); background: var(--plate-bg, var(--plate)); box-shadow: inset 0 0 0 1px var(--plate-edge); }
.wi-row:has(.wi-sum:focus-visible)::before { opacity: 1; box-shadow: var(--focus-ring); }

.wi-sum {
  grid-area: sum; position: static;
  display: flex; align-items: center; gap: var(--s-4); min-height: 48px; min-width: 0;
  margin: 0; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out);
}
.wi-sum:active { transform: scale(var(--press-row)); transition-duration: var(--d-press); }
.wi-sum:focus-visible { outline: none; box-shadow: none; }
.wi-label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); min-width: 0; }
.wi-name { font-weight: var(--fw-strong); color: var(--ink); }
.wi-c { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.wi-ico { flex: none; }
.wi-plus {
  position: absolute; right: 12px; top: calc(var(--s-2) + 14px);
  width: 20px; height: 20px; color: var(--muted);
  transition: rotate var(--d-base) var(--ease-out), color var(--d-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .wi-sum:hover .wi-plus { color: var(--ink); } }
.wi-row[data-open] .wi-plus { rotate: 45deg; color: var(--ink); }
.wi-go { grid-area: go; justify-self: start; min-height: 44px; font-size: var(--fs-sm); white-space: nowrap; }

/* The opened depth: height, then the words fade up behind it. */
.wi-more { grid-area: more; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-out) var(--ease-out); }
.wi-more-in {
  min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--s-6);
  padding-left: calc(28px + var(--s-4));
  opacity: 0; translate: 0 -4px;
  transition: opacity var(--d-press) var(--ease-in), translate var(--d-base) var(--ease-out);
}
.wi-row[data-open] { padding-bottom: 0; }
.wi-row[data-open] .wi-more { grid-template-rows: 1fr; transition-duration: var(--d-page); transition-timing-function: var(--ease-enter); }
.wi-row[data-open] .wi-more-in { opacity: 1; translate: 0 0; transition: opacity var(--d-base) var(--ease-out) 60ms, translate var(--d-in) var(--ease-enter) 60ms; }
.wi-text { padding-bottom: var(--s-5); min-width: 0; }
.wi-blurb { margin: var(--s-1) 0 0; max-width: 62ch; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-soft, var(--ink)); text-wrap: pretty; }
.wi-meta { display: grid; gap: var(--s-1); margin: var(--s-3) 0 0; max-width: 62ch; font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--tr-label); color: var(--muted); }

/* The object, standing on the plate's bottom edge: a phone shows its top,
   the game stands whole across. */
.wi-row.has-obj .wi-more-in { grid-template-columns: minmax(0, 1fr) auto; }
.wi-obj { position: relative; align-self: stretch; width: 124px; min-height: 176px; overflow: clip; }
.wi-obj[data-shape="wide"] { width: 232px; }
.wi-obj-img { position: absolute; left: 0; display: block; width: 100%; height: auto; max-width: none; box-shadow: var(--shadow-float); outline: 1px solid color-mix(in oklab, var(--ink), transparent 90%); outline-offset: -1px; background: #0c0c0d; }
.wi-obj[data-shape="phone"] .wi-obj-img { top: var(--s-4); border-radius: 16px; }
.wi-obj[data-shape="wide"] .wi-obj-img { bottom: -10px; border-radius: var(--r-xs) var(--r-xs) 0 0; image-rendering: auto; }
:root[data-theme="dark"] .wi-obj-img { outline-color: rgb(255 255 255 / .16); }
.wi-obj-dark { display: none; }
:root[data-theme="dark"] .wi-obj:has(.wi-obj-dark) .wi-obj-light { display: none; }
:root[data-theme="dark"] .wi-obj-dark { display: block; }

@media (max-width: 1099.98px) {
  .wi-label { flex-direction: column; }
  .wi-sum .cs-appicon { align-self: flex-start; margin-top: 2px; }
}
/* Phones: the link goes under the name; the object under the words. */
@media (max-width: 639.98px) {
  .wi-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sum" "go" "more"; padding-block: var(--s-3); }
  .wi-label { flex-direction: column; }
  .wi-sum { align-items: flex-start; }
  .wi-plus { top: calc(var(--s-3) + 4px); }
  .wi-go { margin: -4px 0 0 calc(28px + var(--s-4)); min-height: 36px; }
  .wi-more-in, .wi-row.has-obj .wi-more-in { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .wi-text { padding-bottom: var(--s-4); }
  .wi-obj, .wi-obj[data-shape="wide"] { width: 100%; min-height: 0; height: 168px; }
  .wi-obj[data-shape="phone"] .wi-obj-img { left: 50%; width: 120px; margin-left: -60px; }
  .wi-obj[data-shape="wide"] .wi-obj-img { left: 50%; width: 260px; margin-left: -130px; }
}
/* Without script every row shows its sentences, open, on the paper. */
html.no-js .wi-more { grid-template-rows: 1fr; }
html.no-js .wi-more-in { opacity: 1; translate: none; }
html.no-js .wi-plus { display: none; }
html.no-js .wi-sum { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .wi-row, .wi-more, .wi-more-in, .wi-plus, .wi-row::before, .wi-sum { transition-duration: 0ms !important; transition-delay: 0ms !important; }
  .wi-sum:active { transform: none; }
}

/* ---------------------------------------------------------------------------
   Motion and print
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cs-toc-link, .cs-notes > summary { transition-duration: 0ms; }
  .cs-toc-ind { transition: none; }
  .cs-toc-link:active, .cs-notes > summary:active { transform: none; }
}

@media print {
  .nv, .ft, .skip-link, .cs-toc, .cs-next-sec, .cs-hl-ctrl, .cs-lb, .cs-more-link, .cs-board-more, .ct-actions, .ct-links, .cs-notes .dis-ico { display: none !important; }
  .cs-notes > .cs-notes-body { display: block; }
  .cs-main, .wi-main { padding-top: 0; }
  .cs-body { display: block; }
  .cs-hl-track { flex-wrap: wrap; overflow: visible; }
  .wi-more { grid-template-rows: 1fr !important; }
  .wi-more-in { opacity: 1 !important; translate: none !important; }
  .cs-part, .cs-hero, .cs-challenge, .cs-note-item, .cs-rows > li, .cs-arch-row, .cs-dec tr { break-inside: avoid; }
  :root, :root[data-theme="dark"], :root[data-theme="light"] { --bg: #fff; --ink: #000; --muted: #333; --plate: #f2f2f2; }
  body { background: #fff !important; color: #000 !important; }
}

/* ---------------------------------------------------------------------------
   /work/ (owner, 14 Oct 2026: "selected work in the archive should appear
   smaller"): the homepage's five rows become a compact index of cards,
   plate on top and the copy under it, so the archive below is not pushed
   down by five full-width rows. Same markup and objects as the homepage.
   ------------------------------------------------------------------------ */
@media (min-width: 700px) {
  .wi-main .wk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: var(--s-7); align-items: start; }
  .wi-main .wk > .wk-head { grid-column: 1 / -1; }
  .wi-main .wk .wk-rows, .wi-main .wk-others, .wi-main .wk-grid { display: contents; }
  .wi-main .wk-others-t { display: none; }
  .wi-main .wk-card, .wi-main .wk-card.wk-flip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "name" "status" "line" "stack" "links";
    row-gap: 0; margin: 0; padding: 0;
  }
  .wi-main .wk-copy { display: contents; }
  .wi-main .wk-media, .wi-main .wk-lead .wk-media { aspect-ratio: 16 / 10; margin: 0 0 var(--s-4); }
  .wi-main .wk-lead .wk-line, .wi-main .wk-line { font-size: var(--fs-body); line-height: var(--lh-body); max-width: none; }
  .wi-main .wk-title { font-size: var(--fs-h3); }
  .wi-main .wk-status { justify-self: start; text-align: left; margin: var(--s-1) 0 var(--s-3); color: var(--muted); font-size: var(--fs-sm); }
  .wi-main .wk-links { gap: var(--s-2); flex-wrap: wrap; }
}
@media (min-width: 1200px) {
  .wi-main .wk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* November 2026 polish: a list under a lead sentence gets the head gap; the
   board's "Parts and connections" sits on its own line under the caption,
   not as a pill inside the sentence; the 3-up /work/ cards use the small
   pill so a row of three destinations stays on one or two tidy lines. */
.cs-part .cs-lead + .cs-list, .cs-part .cs-lead + .cs-rows { margin-top: var(--s-5); }
.cs-board-cap .cs-board-more { display: flex; width: max-content; margin: var(--s-3) 0 0; }
.wi-main .wk-links a { min-height: 36px; padding-inline: 12px; }
/* A light ground (Adelante's paper, Photoshoot's print) takes dark words on
   the next-case banner too. */
.cs-next[data-tone="light"] { --hl-ink: #111113; --hl-soft: rgb(17 17 19 / .62); }
/* Air between "All work and archive" and the contact card under it. */
.cs-next-all { margin-bottom: var(--sec-gap); }