/* ============================================================
   site.css — the 2026-10-21 redesign (Claude Design handoff
   "design_handoff_taitzdesign_redesign", kept beside the earlier handoff in
   ~/Claude/Projects/taitz-redesign-source/).

   Every value comes from design-system/tokens.css, which every page loads
   first. That file is GENERATED from design-system/tokens.json; never edit it
   here or there by hand.

   The block below holds the values the handoff's page references
   (Home.dc.html, LocumTenens Case Study.dc.html, Chef Volas Case Study.dc.html)
   use that tokens.json does not name: the case-page type sizes, the case
   layout's paddings, the device sizes on case pages, the wireframe artifact,
   the lightbox. They are copied exactly from the references, named here once,
   and used by name below. Nothing is invented.
   ============================================================ */

:root {
  /* ---- Case pages: type (from the case references) ---- */
  --type-case-h1-size: clamp(34px, 3.8vw, 54px);
  --type-case-h1-line: 1.1;
  --type-case-lead-size: clamp(17px, 1.4vw, 20px);
  --type-case-lead-line: 1.55;
  --type-chapter-size: clamp(26px, 2.4vw, 34px);
  --type-chapter-line: 1.2;
  --type-line-size: clamp(20px, 1.7vw, 23px);   /* the numbered serif lines */
  --type-line-line: 1.35;
  --type-outcome-size: clamp(22px, 2vw, 28px);   /* "What Happened" */
  --type-outcome-line: 1.3;
  --type-next-size: clamp(30px, 3.4vw, 48px);    /* Next Project */
  --type-next-line: 1.15;
  --type-item-title-size: 17px;                   /* a learning or step title */
  --type-item-title-line: 24px;
  --type-strip-line: 20px;                        /* captions under the phone strip */
  --type-dl-line: 22px;
  --type-row-project-size: 16px;                  /* the project name in the index */
  --type-row-project-line: 24px;
  --type-client-size: 16px;
  --type-client-line: 22px;
  --type-link-line: 26px;

  /* ---- Case pages: layout ---- */
  --case-pad-top: clamp(32px, 4vw, 56px);
  --case-pad-bottom: clamp(24px, 3vw, 40px);
  --case-body-pad: clamp(56px, 7vw, 96px);
  --chapter-gap: clamp(64px, 8vw, 104px);
  --art-pad: clamp(16px, 3vw, 40px);              /* blueprint mats */
  --strip-pad: clamp(20px, 3vw, 40px);
  --foot-pad: clamp(56px, 7vw, 96px);
  --case-nav-w: 200px;
  --case-nav-top: 24px;
  --case-title-min: 560px;
  --case-dl-w: 340px;
  --case-measure-lead: 58ch;
  --measure-body: 68ch;
  --measure-side: 52ch;
  --measure-tile: 56ch;
  --measure-hero: 34ch;
  --measure-contact: 24ch;
  --fig-min: 240px;
  --fig-min-lead: 260px;
  --fig-min-wide: 400px;
  --opps-min: 260px;
  --learn-min: 300px;
  --proto-side-min: 300px;
  --phone-mat: 420px;          /* a captioned phone on a case page */
  --phone-mat-lead: 480px;     /* the lead phones */
  --strip-phone: 340px;        /* the sideways strip */
  --strip-fig: 170px;
  --num-col: 36px;             /* numbered lines and steps */
  /* Device shadows and glows. They live on a rounded layer BEHIND the plate:
     a drop-shadow on the plate itself also falls inside its screen cutout and
     hazes the screen (Kevin, 2026-10-22: "it's dimming the product screen"). */
  --device-shadow: 0 16px 26px -6px rgba(20, 16, 12, .30), 0 3px 8px rgba(20, 16, 12, .14);
  --device-glow: 0 18px 30px -6px rgba(0, 0, 0, .55), 0 0 28px 2px rgba(108, 202, 210, .16);
  /* The dark tile's hover bloom: soft teal light behind the devices that
     spreads outward (Kevin, 2026-10-22: "organic — it emanates outward"). */
  --bloom: radial-gradient(closest-side, rgba(108, 202, 210, .5), rgba(108, 202, 210, .2) 48%, rgba(108, 202, 210, 0) 100%);
  --bloom-blur: 34px;
  --bloom-rest: .55;  --bloom-hover: 1.12;
  --bloom-in: opacity 600ms cubic-bezier(.2, .7, .2, 1), transform 900ms cubic-bezier(.16, .84, .3, 1);

  /* The working prototype: a 302x654 screen in a 312x664 phone, holding a
     402x872 iframe scaled to fit (402 x .7512 = 302). */
  --proto-w: 338px;   --proto-h: 691px;     /* the iPhone 17 plate at 338px wide */
  --proto-screen-w: 302px; --proto-screen-h: 656px;
  --proto-zoom-narrow: 0.84; /* the phone frame is wider than a phone's content column */
  --proto-frame-w: 402px;  --proto-frame-h: 874px;
  --proto-scale: .7512;
  --proto-poster-fade: .35;

  /* ---- Home ---- */
  --hero-side: 300px;
  --hero-main-min: 640px;
  --hero-main-max: 860px;
  --tile-wide-min: 560px;
  --tile-narrow-min: 400px;
  --tile-phone-h: 84%;
  --tile-gap: clamp(12px, 1.6vw, 20px);
  --tile-gap-band: clamp(12px, 2vw, 24px);
  --thumb-w: 240px;  --thumb-h: 180px;
  --thumb-pad: 16px; --grid-pad: 20px;
  --thumb-laptop: 82%;
  --thumb-tablet: 84%;
  --grid-min: 260px;
  --row-cols: 56px minmax(0, 4fr) minmax(0, 3fr) minmax(0, 1fr);
  --row-cols-mobile: 40px minmax(0, 1fr);
  --fact-min: 200px;
  --lane-min: 300px;
  --artifact-min-h: 380px;
  --ship-phone-h: 300px;
  --about-label-min: 240px; --about-label-max: 300px;
  --about-copy-min: 420px; --about-side-min: 280px; --about-cols-min: 520px;

  /* The spec panel and the wireframe in How I Build (Home reference). */
  --artifact-label-size: 11px;  --artifact-label-line: 14px;
  --spec-pad: 16px 18px;
  --spec-key-col: 28px;
  --spec-row-pad: 7px;
  /* The wireframe exhibit: Figma's own canvas grays and its annotation
     purple, scoped to the .wf artifact (an exhibit, not site chrome). */
  --wf-frame: #FFFFFF;  --wf-fill: #F2F2F2;  --wf-fill-2: #E3E3E3;
  --wf-stroke: #D9D9D9;  --wf-bar: #CFCFCF;  --wf-ink: #2C2C2C;
  --wf-name: #8A8A8A;  --wf-pin: #9747FF;  --wf-pin-ink: #FFFFFF;
  --wf-size: 9px;  --wf-name-size: 10px;  --wf-pin-d: 16px;  --wf-pin-size: 9px;
  --wf-note-size: 13px;  --wf-note-line: 18px;
  --wf-radius: 6px;  --wf-radius-s: 4px;
  --wf-phone-w: 42%;
  --wf-pad: 10px 9px 9px;

  /* The lightbox. */
  --lb-btn: 40px;
  --lb-bar-pad: 12px 20px;
}

/* ============================================================ Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--color-paper); color: var(--color-body);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.pad  { padding-left: var(--layout-margin); padding-right: var(--layout-margin); }
.wrap { max-width: var(--layout-max); margin: 0 auto; }

/* ============================================================ Header */
.hdr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-6); padding: var(--space-5) 0; }
.hdr--case { border-bottom: 1px solid var(--color-rule); }
.wordmark, .wordmark:hover { font-family: var(--font-serif); font-size: var(--type-wordmark-size); font-weight: var(--type-wordmark-weight); letter-spacing: var(--type-wordmark-tracking); color: var(--color-ink); text-decoration: none; }
.wordmark span { color: var(--color-rule-ui); }
.nav { display: flex; flex-wrap: wrap; gap: var(--space-2) 28px; }
.nav a, .back { color: var(--color-ink); text-decoration: none; font-size: var(--type-nav-size); line-height: var(--type-nav-line); }
.nav a:hover, .back:hover { color: var(--color-accent); }

/* ============================================================ Sections */
.sec { padding-top: var(--layout-section-gap); }
.sec__open { border-top: 1px solid var(--color-ink); padding-top: 20px; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: baseline; justify-content: space-between; }
.h2 { font-family: var(--font-serif); font-weight: var(--type-h2-weight); font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: var(--type-h2-tracking); color: var(--color-ink); }
.meta { font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--type-meta-line); font-weight: var(--type-meta-weight); letter-spacing: var(--type-meta-tracking); text-transform: uppercase; color: var(--color-muted); }
.meta--ink { color: var(--color-ink); }
.meta-s { font-family: var(--font-mono); font-size: var(--type-meta-s-size); line-height: var(--type-meta-s-line); font-weight: var(--type-meta-s-weight); letter-spacing: var(--type-meta-s-tracking); text-transform: uppercase; color: var(--color-muted); }
.chip { font-family: var(--font-mono); font-size: var(--type-meta-s-size); line-height: var(--type-meta-s-line); font-weight: var(--type-meta-s-weight); letter-spacing: var(--type-meta-s-tracking); text-transform: uppercase; color: var(--color-private-ink); background: var(--color-private-bg); padding: 2px 6px; }
.big-link { font-size: var(--type-body-s-size); line-height: var(--type-link-line); }

/* ============================================================ Devices
   The phone, tablet and laptop frames from design-system/tokens.css, with the
   sizes the references set per use. */
/* Real device plates. Cutouts measured from each PNG's alpha channel away from
   the island (2026-10-22 — the first numbers, 1206x2606 at (72,77), were taken
   through the island and left an 8px gap top and bottom):
   iPhone 17 portrait 1350x2760, hole 1206x2622 at (72,69) = exactly a 3x
   402x874 screenshot; iPad Air 11" landscape 2620x1900, hole 2360x1640 at
   (130,130) = exactly a 2x 1180x820 screenshot. */
.dev-phone { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 1350 / 2760; isolation: isolate; }
.dev-tablet { position: relative; width: 100%; aspect-ratio: 2620 / 1900; isolation: isolate; }
/* The shadow layer: the device's own silhouette, set just INSIDE its outline
   so its edge hides under the frame and only the soft shadow shows. Measured
   from the PNGs: the iPhone body sits 26px/28px in from the image edges with a
   ~232px corner; the iPad 20px in with a ~133px corner. (Sized to the image
   instead, it drew a pale slab around every device — Kevin, 2026-10-22.) */
.dev-phone::before, .dev-tablet::before { content: ''; position: absolute; z-index: -1; background: var(--color-ink); box-shadow: var(--device-shadow); transition: box-shadow var(--motion-hover); }
.dev-phone::before { inset: 1.4% 2.8%; border-radius: 17% / 8.1%; }
.dev-tablet::before { inset: 1.6% 1.2%; border-radius: 4.8% / 6.8%; }
.dev-screen { position: absolute; object-fit: cover; object-position: top; display: block; }
/* Screen corners follow the real display radius (iPhone ~55pt on a 402pt
   screen; iPad Air ~18pt on 1180pt), or a light screen's square corners poke
   out past the plate's rounded edge on a dark mat. */
.dev-phone > .dev-screen { left: 5.3333%; top: 2.5%; width: 89.3333%; height: 95%; border-radius: 13.7% / 6.3%; }
.dev-tablet > .dev-screen { left: 4.9618%; top: 6.8421%; width: 90.0763%; height: 86.3158%; border-radius: 1.6% / 2.3%; }
.dev-bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.on-band::before { box-shadow: var(--device-glow); }
/* Hover on a dark tile: light blooms out from behind the devices. Two
   offset blurred radial lights so the edge is soft and uneven, not a halo. */
.ftile__art--band { position: relative; isolation: isolate; }
.ftile__art--band::before, .ftile__art--band::after { content: ''; position: absolute; z-index: -1; pointer-events: none; background: var(--bloom); filter: blur(var(--bloom-blur)); opacity: 0; transition: var(--bloom-in); }
.ftile__art--band::before { left: 4%; top: -8%; width: 58%; height: 116%; transform: scale(var(--bloom-rest)); }
.ftile__art--band::after  { right: 2%; top: -2%; width: 56%; height: 108%; transform: scale(calc(var(--bloom-rest) * .9)); }
.ftile:hover .ftile__art--band::before { opacity: 1; transform: scale(var(--bloom-hover)); }
.ftile:hover .ftile__art--band::after  { opacity: .85; transform: scale(calc(var(--bloom-hover) * 1.04)); }
@media (prefers-reduced-motion: reduce) { .ftile__art--band::before, .ftile__art--band::after { transition: opacity var(--motion-hover); transform: none; } }
.dev-laptop { width: var(--thumb-laptop); display: flex; flex-direction: column; align-items: center; }
.dev-laptop__lid { width: 100%; background: var(--color-ink); border-radius: var(--radius-laptop) var(--radius-laptop) 0 0; padding: 3.5% 3.5% 3%; box-shadow: var(--shadow-soft); }
.dev-laptop__screen { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-raised); }
.dev-laptop__screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dev-laptop__base { width: 116%; height: 9px; background: var(--color-rule); border-top: 1px solid var(--color-rule-ui); border-radius: 0 0 var(--radius-laptop) var(--radius-laptop); position: relative; }
.dev-laptop__base::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 16%; height: var(--space-1); background: var(--color-rule-ui); border-radius: 0 0 var(--space-1) var(--space-1); }

/* ============================================================ Home: hero */
.hero { padding: var(--layout-hero-pad-top) 0 var(--layout-hero-pad-bottom); display: flex; flex-wrap: wrap; gap: 40px var(--space-5); align-items: flex-end; justify-content: space-between; }
.hero__main { flex: 1 1 var(--hero-main-min); min-width: 0; max-width: var(--hero-main-max); display: flex; flex-direction: column; gap: var(--space-5); }
.hero__h1 { font-family: var(--font-serif); font-variation-settings: 'opsz' 72; font-weight: var(--type-display-weight); font-size: var(--type-display-size); line-height: var(--type-display-line); letter-spacing: var(--type-display-tracking); color: var(--color-ink); }
.hero__lead { max-width: var(--measure-hero); font-size: var(--type-lead-size); line-height: var(--type-lead-line); color: var(--color-ink); text-wrap: pretty; }
.hero__side { flex: 0 1 var(--hero-side); display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--color-ink); padding-top: var(--space-4); }
.hero__avail { font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: 20px; font-weight: var(--type-meta-weight); letter-spacing: var(--type-meta-tracking); text-transform: uppercase; color: var(--color-ink); }
.links { display: flex; flex-wrap: wrap; gap: var(--space-2) 20px; font-size: var(--type-body-s-size); line-height: var(--type-link-line); }

/* ============================================================ Home: facts */
/* The light mat the project tiles sit on (2026-10-22, Kevin: the dark strip
   was "too much, too heavy"). The dividers are the mat's rule showing through
   a 1px gap, so they stay right however the four cells wrap. */
.facts { background: var(--color-rule); display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fact-min)), 1fr)); }
@media (max-width: 767px) { .facts { --fact-min: 140px; } .fact { padding: var(--space-4); } }
@media (min-width: 768px) and (max-width: 1099px) { .facts { --fact-min: 300px; } }
.fact { background: var(--color-mat); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.fact__n { font-family: var(--font-serif); font-size: var(--type-fact-size); line-height: var(--type-fact-line); font-weight: var(--type-fact-weight); letter-spacing: var(--type-fact-tracking); font-variant-numeric: lining-nums tabular-nums; color: var(--color-ink); }
.fact__l { font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--type-meta-line); font-weight: var(--type-meta-weight); letter-spacing: var(--type-meta-tracking); text-transform: uppercase; color: var(--color-muted); }

/* ============================================================ Home: featured */
.featured { margin-top: var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-5); }
.ftile, .ftile:hover { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); color: inherit; text-decoration: none; }
.ftile--wide { flex: 7 1 var(--tile-wide-min); }
.ftile--narrow { flex: 5 1 var(--tile-narrow-min); }
.ftile__art { height: var(--layout-tile-art); background: var(--color-mat); display: flex; justify-content: center; align-items: center; gap: var(--tile-gap); padding: var(--space-5); overflow: hidden; transition: background var(--motion-hover); }
.ftile__art--band { background: var(--color-band-mat); gap: var(--tile-gap-band); }
.ftile:hover .ftile__art { background: var(--color-mat-hover); }
.ftile:hover .ftile__art--band { background: var(--color-band-mat); }  /* the dark tile answers with its glow, not its color */
.ftile__art .dev-phone { height: var(--tile-phone-h); }
.ftile__cap { display: flex; flex-direction: column; gap: 6px; }
.ftile__title { font-family: var(--font-serif); font-weight: var(--type-tile-title-weight); font-size: var(--type-tile-title-size); line-height: var(--type-tile-title-line); letter-spacing: var(--type-tile-title-tracking); color: var(--color-ink); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.ftile:hover .ftile__title { text-decoration-line: underline; }
.ftile__p { font-size: var(--type-body-s-size); line-height: var(--type-body-s-line); max-width: var(--measure-tile); color: var(--color-body); text-wrap: pretty; }

/* ============================================================ Home: sample work */
.work-tools { display: flex; gap: var(--space-5); align-items: baseline; flex-wrap: wrap; }
.switch { display: flex; gap: 18px; align-items: baseline; }
.text-btn { all: unset; cursor: pointer; display: inline-flex; white-space: nowrap; font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--type-meta-line); font-weight: var(--type-meta-weight); letter-spacing: var(--type-meta-tracking); text-transform: uppercase; color: var(--color-muted); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.text-btn[aria-pressed="true"] { color: var(--color-ink); text-decoration-line: underline; }
.text-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.list-wrap { margin-top: var(--space-6); display: flex; gap: var(--space-5); align-items: stretch; position: relative; }
.list { flex: 1 1 auto; min-width: 0; border-top: 1px solid var(--color-ink); }
.list__head { display: grid; grid-template-columns: var(--row-cols); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-rule); }
.row, .row:hover { display: grid; grid-template-columns: var(--row-cols); gap: var(--space-1) var(--space-4); align-items: center; min-height: var(--layout-row-min); padding: 14px 0; border-bottom: 1px solid var(--color-rule); color: inherit; text-decoration: none; transition: background var(--motion-hover); }
.row:hover, .row.is-on { background: var(--color-row-hover); }
.row { scroll-margin-top: 30vh; }   /* "All work" lands on this row with the list around it */
.row__n, .row__year { font-family: var(--font-mono); font-size: var(--type-meta-size); font-weight: var(--type-meta-weight); letter-spacing: var(--type-meta-tracking); color: var(--color-muted); }
.row__year { font-variant-numeric: tabular-nums; }
.row__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row__co { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.row__name { font-family: var(--font-serif); font-weight: var(--type-row-title-weight); font-size: var(--type-row-title-size); line-height: var(--type-row-title-line); letter-spacing: var(--type-row-title-tracking); color: var(--color-ink); }
.row__proj { font-size: var(--type-row-project-size); line-height: var(--type-row-project-line); color: var(--color-ink); }
.row__line { font-size: var(--type-caption-size); line-height: var(--type-caption-line); color: var(--color-muted); text-wrap: pretty; }
.row__mob { display: none; margin-top: var(--space-1); }
.row__work { font-size: var(--type-caption-size); line-height: var(--type-caption-line); color: var(--color-body); text-wrap: pretty; }
@media (max-width: 767px) {
  .list__head { display: none; }
  .row, .row:hover { grid-template-columns: var(--row-cols-mobile); }
  .row__work, .row__year { display: none; }
  .row__mob { display: block; }
}

/* The hover thumbnail: a 240px column beside the list, 1100px and up, never
   under reduced motion. assets/site.js adds .js and moves it. */
.slot { display: none; flex: 0 0 var(--thumb-w); position: relative; }
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) { .js .slot { display: block; } }
/* The slot glides with transform (not top, which forced layout every frame)
   and the thumbnails crossfade instead of cutting (motion wave 1, 2026-10-22). */
.slot__in { position: absolute; left: 0; top: 0; width: var(--thumb-w); height: var(--thumb-h); transform: translateY(0); transition: transform var(--motion-hover) var(--ease-out); }
.slot .thumb { position: absolute; inset: 0; opacity: 0; transition: opacity var(--motion-hover) var(--ease-out); }
.slot .thumb.is-on { opacity: 1; }
.slot--snap .slot__in, .slot--snap .thumb { transition: none; }   /* placed instantly for the way back from a case */

.thumb { width: var(--thumb-w); height: var(--thumb-h); background: var(--color-mat); display: flex; align-items: center; justify-content: center; padding: var(--thumb-pad); overflow: hidden; }
.thumb--band { background: var(--color-band-mat); }
.thumb--card { width: auto; height: auto; aspect-ratio: 4 / 3; padding: var(--grid-pad); }
.thumb--flat { padding: 0; }
.thumb--pad-12 { padding: var(--space-3); }
.thumb--pad-16 { padding: var(--space-4); }
.thumb__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.thumb__img--contain { object-fit: contain; object-position: center; }
.thumb__img--center { object-position: center; }
.thumb .dev-tablet { width: var(--thumb-tablet); }

.grid { margin-top: var(--space-6); border-top: 1px solid var(--color-ink); padding-top: var(--space-6); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min)), 1fr)); gap: var(--space-7) var(--space-5); }
.card, .card:hover { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; color: inherit; text-decoration: none; }
.card__text { display: flex; flex-direction: column; gap: var(--space-1); }
.card__name { font-family: var(--font-serif); font-weight: var(--type-grid-title-weight); font-size: var(--type-grid-title-size); line-height: var(--type-grid-title-line); letter-spacing: var(--type-grid-title-tracking); color: var(--color-ink); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.card:hover .card__name { text-decoration-line: underline; }
.card__proj { font-size: var(--type-row-project-size); line-height: var(--type-row-project-line); color: var(--color-ink); }
.card__work { font-size: var(--type-caption-size); line-height: var(--type-caption-line); color: var(--color-muted); }

/* ============================================================ Home: how I build */
.sec-lead { margin-top: 20px; font-size: var(--type-lead-size); line-height: var(--type-lead-line); color: var(--color-ink); max-width: var(--measure-side); text-wrap: pretty; }
.lanes { margin-top: var(--space-7); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--lane-min)), 1fr)); gap: var(--space-7) var(--space-5); }
.lane { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.lane__open { display: flex; align-items: center; gap: 10px; border-top: 2px solid var(--color-ink); padding-top: 14px; }
.lane__rule { flex: 1; height: 1px; background: var(--color-rule); }
.lane__arrow { font-family: var(--font-mono); font-size: var(--type-meta-size); color: var(--color-ink); }
.lane__list { font-size: var(--type-body-s-size); line-height: var(--type-body-s-line); color: var(--color-ink); }
.lane__list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-rule); }
.artifact { min-height: var(--artifact-min-h); margin-top: auto; background: var(--color-mat); display: flex; padding: var(--space-5); }
.artifact--center { align-items: center; justify-content: center; }
.artifact--col { flex-direction: column; padding: 20px; gap: var(--space-3); }
.artifact--ship { flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.artifact__label { font-family: var(--font-mono); font-size: var(--artifact-label-size); line-height: var(--artifact-label-line); font-weight: var(--type-meta-weight); letter-spacing: var(--type-meta-tracking); text-transform: uppercase; color: var(--color-muted); }
.artifact--ship .artifact__label { align-self: flex-start; }
.artifact--ship .dev-phone { height: var(--ship-phone-h); }

.spec { width: 100%; align-self: stretch; background: var(--color-raised); border: 1px solid var(--color-rule); padding: var(--spec-pad); display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: var(--type-artifact-size); line-height: var(--type-artifact-line); color: var(--color-body); }
.spec__head { display: flex; justify-content: space-between; gap: var(--space-2); padding-bottom: 10px; border-bottom: 1px solid var(--color-rule); }
.spec__row { display: grid; grid-template-columns: var(--spec-key-col) 1fr; gap: var(--space-2); padding: var(--spec-row-pad) 0; border-bottom: 1px solid var(--color-mat); }
.spec__key { color: var(--color-rule-ui); }

.wf { flex: 1; min-height: 0; display: flex; gap: var(--space-4); align-items: stretch; }
.wf__frame { flex: 0 0 var(--wf-phone-w); display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.wf__name { font-size: var(--wf-name-size); line-height: 1.2; color: var(--wf-name); }
.wf__screen { flex: 1; min-height: 0; background: var(--wf-frame); border: 1px solid var(--wf-stroke); padding: var(--wf-pad); display: flex; flex-direction: column; gap: 7px; overflow: visible; }
.wf__nav { position: relative; display: flex; align-items: center; font-size: var(--wf-size); font-weight: 600; color: var(--wf-ink); padding-bottom: 6px; border-bottom: 1px solid var(--wf-stroke); margin: 0 -9px; padding-left: 9px; }
.wf__bar { display: block; height: 6px; border-radius: 3px; background: var(--wf-bar); width: 70%; }
.wf__bar--title { height: 10px; width: 62%; background: var(--wf-ink); opacity: .75; }
.wf__bar--m { width: 58%; }
.wf__bar--s { width: 42%; background: var(--wf-fill-2); }
.wf__card { position: relative; background: var(--wf-fill); border-radius: var(--wf-radius); padding: 7px; display: flex; flex-direction: column; gap: 6px; }
.wf__line { display: flex; align-items: center; gap: 6px; }
.wf__card.wf__line { flex-direction: row; }
.wf__stack { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wf__pill { font-size: 8px; font-weight: 600; color: var(--wf-ink); border: 1px solid var(--wf-ink); border-radius: 999px; padding: 1px 6px; }
.wf__meter { height: 4px; border-radius: 2px; background: var(--wf-fill-2); }
.wf__meter i { display: block; height: 100%; width: 55%; border-radius: 2px; background: var(--wf-ink); opacity: .55; }
.wf__avatar { flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--wf-fill-2); }
.wf__times { display: flex; gap: 5px; }
.wf__chip { flex: 1; text-align: center; font-size: var(--wf-size); color: var(--wf-ink); border: 1px solid var(--wf-stroke); border-radius: var(--wf-radius-s); padding: 4px 0; }
.wf__chip--on { border-color: var(--wf-ink); font-weight: 600; }
.wf__toggle { flex: 0 0 22px; height: 12px; border-radius: 6px; background: var(--wf-ink); opacity: .7; position: relative; }
.wf__toggle::after { content: ''; position: absolute; right: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--wf-frame); }
.wf__spacer { flex: 1; }
.wf__btn { position: relative; background: var(--wf-ink); border-radius: var(--wf-radius-s); padding: 7px; text-align: center; font-size: var(--wf-size); font-weight: 600; color: var(--wf-frame); }
.wf__pin { position: absolute; top: calc(var(--wf-pin-d) / -2); right: calc(var(--wf-pin-d) / -2); width: var(--wf-pin-d); height: var(--wf-pin-d); border-radius: 50%; background: var(--wf-pin); color: var(--wf-pin-ink); font-style: normal; font-size: var(--wf-pin-size); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--wf-frame); }
.wf__nav .wf__pin { top: -3px; right: -1px; }
.wf__notes { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.wf__note { display: flex; gap: var(--space-2); align-items: baseline; }
.wf__pin--key { position: static; flex: 0 0 var(--wf-pin-d); box-shadow: none; transform: translateY(2px); }
.wf__text { font-size: var(--wf-note-size); line-height: var(--wf-note-line); color: var(--color-ink); }

/* ============================================================ Home: about */
.about { padding-bottom: var(--layout-section-gap); }
.about .sec__open { justify-content: flex-start; gap: var(--space-6) var(--space-5); }
.about__label { flex: 1 1 var(--about-label-min); min-width: 0; max-width: var(--about-label-max); }
.about__cols { flex: 999 1 var(--about-cols-min); min-width: 0; display: flex; flex-wrap: wrap; gap: var(--space-7); }
.about__copy { flex: 2 1 var(--about-copy-min); min-width: 0; max-width: var(--measure-body); display: flex; flex-direction: column; gap: 20px; font-size: var(--type-body-size); line-height: var(--type-body-line); color: var(--color-body); }
.about__copy .ink { color: var(--color-ink); }
.about__side { flex: 1 1 var(--about-side-min); min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.skills { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-5); border-top: 1px solid var(--color-rule); }
.skills span { padding: 9px 0; border-bottom: 1px solid var(--color-rule); font-size: var(--type-client-size); line-height: var(--type-client-line); color: var(--color-ink); }

/* ============================================================ Band (footer) */
.band { background: var(--color-band); color: var(--color-band-ink); padding: var(--foot-pad) var(--layout-margin) 40px; }
.band--contact { padding-top: var(--layout-section-gap); }
.band__in { max-width: var(--layout-max); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.band a { color: var(--color-band-accent); }
.band a:hover { color: var(--color-band-ink); }
.band__open { border-top: 1px solid var(--color-band-ink); padding-top: 20px; display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-5); }
.band__label { flex: 1 1 var(--about-label-min); max-width: var(--about-label-max); }
.band__h2 { color: var(--color-band-ink); }
.band__main { flex: 999 1 var(--about-cols-min); min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.band__statement { font-family: var(--font-serif); font-variation-settings: 'opsz' 72; font-weight: var(--type-statement-weight); font-size: var(--type-statement-size); line-height: var(--type-statement-line); letter-spacing: var(--type-statement-tracking); color: var(--color-band-ink); max-width: var(--measure-contact); text-wrap: pretty; }
.band__statement a { text-decoration-thickness: 2px; text-underline-offset: 8px; }
.band__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; font-size: var(--type-body-s-size); line-height: var(--type-link-line); }
.band__foot { border-top: 1px solid var(--color-band-rule); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--type-meta-line); font-weight: var(--type-meta-weight); letter-spacing: var(--type-meta-tracking); text-transform: uppercase; color: var(--color-band-muted); }
.band__foot a { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: var(--type-caption-size); }
.band .next, .band .next:hover { border-top: 1px solid var(--color-band-ink); padding-top: 20px; display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: var(--color-band-ink); }
.next__label { color: var(--color-band-muted); }
.next__name { font-family: var(--font-serif); font-weight: var(--type-h2-weight); font-size: var(--type-next-size); line-height: var(--type-next-line); letter-spacing: var(--type-h2-tracking); color: var(--color-band-ink); text-decoration-thickness: 1px; text-underline-offset: 8px; }
.next:hover .next__name { text-decoration-line: underline; }

/* ============================================================ Case: title block */
.ctitle { padding: var(--case-pad-top) 0 var(--case-pad-bottom); display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); align-items: flex-end; justify-content: space-between; }
.ctitle__main { flex: 1 1 var(--case-title-min); min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ctitle__h1 { font-family: var(--font-serif); font-variation-settings: 'opsz' 72; font-weight: var(--type-h1-weight); font-size: var(--type-case-h1-size); line-height: var(--type-case-h1-line); letter-spacing: var(--type-h1-tracking); color: var(--color-ink); text-wrap: balance; }
.ctitle__lead { max-width: var(--case-measure-lead); font-size: var(--type-case-lead-size); line-height: var(--type-case-lead-line); color: var(--color-ink); text-wrap: pretty; }
.ctitle__dl { flex: 0 1 var(--case-dl-w); display: grid; grid-template-columns: auto 1fr; gap: 6px var(--space-4); font-size: var(--type-caption-size); line-height: var(--type-dl-line); color: var(--color-ink); }
.ctitle__dl dt { font-family: var(--font-mono); font-size: var(--type-meta-s-size); line-height: var(--type-dl-line); font-weight: var(--type-meta-s-weight); letter-spacing: var(--type-meta-s-tracking); text-transform: uppercase; color: var(--color-muted); }

/* ============================================================ Case: lead art */
.leadart { display: flex; flex-direction: column; gap: var(--space-6); }
.zoomable { all: unset; cursor: zoom-in; display: block; background: var(--color-mat); padding: var(--art-pad); }
.zoomable:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.zoomable img { width: 100%; height: auto; background: var(--color-raised); outline: 1px solid var(--color-hairline); }
.zoomable--bare img { background: transparent; outline: 0; }
.zoomable--sealed { cursor: pointer; }
.art { display: flex; flex-direction: column; gap: 14px; }
.art__cap { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: baseline; justify-content: space-between; }
.art__tags { display: flex; flex-wrap: wrap; gap: 6px var(--space-5); }
.link-btn { all: unset; cursor: pointer; font-size: var(--type-body-s-size); line-height: var(--type-link-line); color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link-btn:hover { color: var(--color-ink); }
.link-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ============================================================ Case: body */
.cbody { display: flex; gap: var(--space-7); align-items: flex-start; padding: var(--case-body-pad) 0; }
.cnav { display: none; flex: 0 0 var(--case-nav-w); position: sticky; top: var(--case-nav-top); flex-direction: column; border-top: 1px solid var(--color-ink); }
@media (min-width: 1024px) { .cnav { display: flex; } }
.cnav a { padding: 10px 0; border-bottom: 1px solid var(--color-rule); text-decoration: none; color: var(--color-ink); font-family: var(--font-mono); font-size: var(--type-meta-s-size); line-height: var(--type-meta-s-line); font-weight: var(--type-meta-s-weight); letter-spacing: var(--type-meta-s-tracking); text-transform: uppercase; }
.cnav a:hover { color: var(--color-accent); }
/* Reading progress (motion wave 1): with JS, chapters sit muted until you're
   reading one; a 2px ink rule on its left fills as you read it, and finished
   chapters keep a full rule. site.js writes --p (0..1) per link. */
.js .cnav a { position: relative; padding-left: var(--space-3); color: var(--color-muted); transition: color var(--motion-hover) var(--ease-out); }
.js .cnav a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--color-ink); transform: scaleY(var(--p, 0)); transform-origin: top; }
.js .cnav a[aria-current="true"] { color: var(--color-ink); }
.js .cnav a:hover { color: var(--color-accent); }
.chapters { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--chapter-gap); }
.ch { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: var(--space-5); }
.ch--prose { max-width: var(--measure-body); }
.ch__h { font-family: var(--font-serif); font-weight: var(--type-h2-weight); font-size: var(--type-chapter-size); line-height: var(--type-chapter-line); letter-spacing: var(--type-h2-tracking); color: var(--color-ink); }
.ch__p { font-size: var(--type-body-s-size); line-height: var(--type-body-s-line); color: var(--color-body); text-wrap: pretty; max-width: var(--measure-body); }
.ch__p--ink { color: var(--color-ink); }
.ch__small { font-size: var(--type-caption-size); line-height: var(--type-caption-line); color: var(--color-body); }
.ch__h3 { margin-top: var(--space-2); font-size: var(--type-h4-size); line-height: var(--type-h4-line); font-weight: var(--type-h4-weight); color: var(--color-ink); }

.rules { border-top: 1px solid var(--color-ink); font-size: var(--type-body-s-size); line-height: var(--type-body-s-line); color: var(--color-ink); }
.rules li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-rule); }
.lines { border-top: 1px solid var(--color-ink); }
.line, .step { display: grid; grid-template-columns: var(--num-col) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-rule); }
.line__n, .step__n { font-family: var(--font-mono); font-size: var(--type-meta-size); font-weight: var(--type-meta-weight); color: var(--color-muted); padding-top: 5px; }
.step__n { padding-top: 3px; }
.line__t { font-family: var(--font-serif); font-size: var(--type-line-size); line-height: var(--type-line-line); color: var(--color-ink); }
.step__body { display: flex; flex-direction: column; gap: var(--space-1); }
.item__t { font-size: var(--type-item-title-size); line-height: var(--type-item-title-line); font-weight: var(--type-h4-weight); color: var(--color-ink); }
.item__d { font-size: var(--type-caption-size); line-height: var(--type-caption-line); color: var(--color-body); }
.statement { font-family: var(--font-serif); font-size: var(--type-outcome-size); line-height: var(--type-outcome-line); color: var(--color-ink); }

.toggle { all: unset; cursor: pointer; align-self: flex-start; font-family: var(--font-mono); font-size: var(--type-meta-size); line-height: var(--type-meta-line); font-weight: var(--type-meta-weight); letter-spacing: var(--type-meta-tracking); text-transform: uppercase; color: var(--color-ink); text-decoration: underline; text-underline-offset: 6px; }
.toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.learn-all { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--learn-min)), 1fr)); gap: 0 var(--space-6); border-top: 1px solid var(--color-ink); }
.item { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-rule); display: flex; flex-direction: column; gap: 6px; }

.opps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--opps-min)), 1fr)); gap: var(--space-5); }
.opp { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--color-ink); padding-top: 10px; }
.opp span { padding: 6px 0; border-bottom: 1px solid var(--color-rule); font-size: var(--type-caption-size); line-height: var(--type-caption-line); }

/* Captioned phones and tablets on mats. */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fig-min)), 1fr)); gap: var(--space-6) var(--space-5); }
.figs--lead { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fig-min-lead)), 1fr)); }
.figs--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fig-min-wide)), 1fr)); }
.fig { display: flex; flex-direction: column; gap: 14px; }
.fig__mat { background: var(--color-mat); height: var(--phone-mat); display: flex; align-items: center; justify-content: center; padding: var(--space-5); }
.fig__mat--lead { height: var(--phone-mat-lead); }
.fig__mat--auto { height: auto; padding: var(--layout-mat-pad); }
/* A tablet leading a case page is sized by height: tokens.json layout.caseHeroArt. */
.fig__mat--hero { height: var(--layout-case-hero-art); padding: var(--layout-mat-pad); }
.fig__mat--hero .dev-tablet { width: auto; height: 100%; }
.figcap { display: flex; flex-direction: column; gap: var(--space-1); }
.figcap__p { font-size: var(--type-caption-size); line-height: var(--type-caption-line); color: var(--color-ink); }

/* Web screens on a case page: on the mat, outlined, open full size. */
.shots { display: flex; flex-direction: column; gap: var(--space-6); }
.shot { display: flex; flex-direction: column; gap: 14px; }
.pair { display: flex; gap: var(--space-5); align-items: flex-start; }
.pair > * { flex: var(--grow) 1 0; min-width: 0; }
@media (max-width: 767px) { .pair { flex-direction: column; } .pair > * { flex: none; width: 100%; } }

/* Two interfaces side by side (Chef Vola's, 2026-11-05): one card per audience.
   The grid matches .opps; the cards are raised because they hold prose, per the
   rule that the darker surface is the ground and the lighter one carries text. */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--opps-min)), 1fr)); gap: var(--space-5); }
.panel { display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-raised); border: 1px solid var(--color-rule); border-radius: var(--radius-web); padding: var(--space-5) var(--space-6); }

/* One turn of a spoken script: the line, then the lines for when it goes wrong. */
.turn { display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-raised); border: 1px solid var(--color-rule); border-radius: var(--radius-web); padding: var(--space-5) var(--space-6); max-width: var(--measure-body); }
.turn__line { font-size: var(--type-body-s-size); line-height: var(--type-body-s-line); color: var(--color-ink); }
.turn__alt { font-size: var(--type-caption-size); line-height: var(--type-caption-line); color: var(--color-body); }
.turn__label { font-family: var(--font-mono); font-size: var(--type-meta-s-size); font-weight: var(--type-meta-s-weight); letter-spacing: var(--type-meta-s-tracking); text-transform: uppercase; color: var(--color-muted); }

.meta--accent { color: var(--color-accent); }

/* The working prototype and the strip of screens beside it. */
.proto { display: flex; flex-wrap: wrap; gap: var(--space-6) 40px; align-items: center; }
.proto__mat { flex: 0 0 auto; max-width: 100%; background: var(--color-mat); display: flex; justify-content: center; padding: var(--strip-pad); }
.proto__phone { width: var(--proto-w); height: var(--proto-h); position: relative; isolation: isolate; }
.proto__phone::before { content: ''; position: absolute; z-index: -1; inset: 1.4% 2.8%; border-radius: 17% / 8.1%; background: var(--color-ink); box-shadow: var(--device-shadow); }
.proto__phone > .dev-bezel { z-index: 2; }
.proto__phone > .proto__poster, .proto__phone > .proto__screen { position: absolute; left: 5.3333%; top: 2.5%; }
.proto__screen { width: var(--proto-screen-w); height: var(--proto-screen-h); overflow: hidden; border-radius: var(--radius-phone-screen); background: var(--color-raised); }
.proto__screen iframe { width: var(--proto-frame-w); height: var(--proto-frame-h); border: 0; transform: scale(var(--proto-scale)); transform-origin: 0 0; }
.proto__poster { all: unset; cursor: pointer; position: relative; display: block; width: var(--proto-screen-w); height: var(--proto-screen-h); border-radius: var(--radius-phone-screen); overflow: hidden; }
.proto__poster img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: var(--proto-poster-fade); }
.proto__poster:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 420px) { .proto__phone { flex: 0 0 auto; zoom: var(--proto-zoom-narrow); } }
.proto__btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--color-ink); color: var(--color-paper); font-family: var(--font-mono); font-size: var(--type-meta-size); font-weight: var(--type-meta-weight); letter-spacing: var(--type-meta-tracking); text-transform: uppercase; padding: var(--space-3) var(--space-4); white-space: nowrap; }
.proto__side { flex: 1 1 var(--proto-side-min); min-width: 0; max-width: var(--measure-side); display: flex; flex-direction: column; gap: 14px; }
.proto__side .big-link { align-self: flex-start; }
.strip { margin-top: var(--space-5); background: var(--color-mat); padding: var(--strip-pad); overflow-x: auto; }
.strip__row { display: flex; gap: 20px; width: max-content; margin: 0 auto; }
.strip .fig { width: var(--strip-fig); gap: 10px; }
.strip .dev-phone { height: var(--strip-phone); width: auto; align-self: center; }  /* the fig is a flex column; without this it stretches the plate to the fig's width */
.strip figcaption { font-size: var(--type-caption-size); line-height: var(--type-strip-line); color: var(--color-ink); }

/* ============================================================ Lightbox */
.lb { position: fixed; inset: 0; z-index: 50; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; padding: 0; background: var(--color-scrim); display: none; flex-direction: column; color: var(--color-band-ink); }
.lb[open] { display: flex; }
.lb::backdrop { background: transparent; }
@media (prefers-reduced-motion: no-preference) { .lb[open] { animation: lb-in var(--motion-lightbox); } }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--lb-bar-pad); font-family: var(--font-mono); font-size: var(--type-meta-size); font-weight: var(--type-meta-weight); letter-spacing: var(--type-meta-tracking); text-transform: uppercase; }
.lb__btns { display: flex; gap: var(--space-2); }
.lb__btn { all: unset; cursor: pointer; min-width: var(--lb-btn); height: var(--lb-btn); display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-band-rule-ui); color: var(--color-band-ink); }
.lb__btn--text { padding: 0 var(--space-3); }
.lb__btn:focus-visible { outline: 2px solid var(--color-band-accent); outline-offset: 3px; }
.lb__stage { flex: 1; min-height: 0; overflow: auto; background: var(--color-raised); margin: 0 20px 20px; }
.lb__img { width: calc(var(--zoom, 1) * 100%); max-width: none; height: auto; margin: 0 auto; }

/* ============================================================ Motion: the one page transition */
/* A featured tile's art grows into its case's lead art (and back). Browsers
   without cross-document view transitions, and reduced motion, get a plain
   page load. Names come from build.mjs as --vt: art-<slug>, one per page. */
.ftile__art, .leadart { view-transition-name: var(--vt, none); }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: var(--motion-page); animation-timing-function: var(--ease-move); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--motion-move); animation-timing-function: var(--ease-out); }
  /* The page you're leaving goes quickly, so the two never sit on top of each
     other, and the case's title block rises in a beat after the art starts to
     grow: the art leads, the words follow (Kevin, 2026-10-23: the header
     arriving at once was jarring). */
  ::view-transition-old(root) { animation-duration: var(--motion-hover); }
  ::view-transition-new(case-title) { animation: vt-rise var(--motion-page) var(--ease-out) var(--motion-hover) both; }
  ::view-transition-old(case-title) { animation: vt-fade-out var(--motion-hover) var(--ease-out) both; }
}
.ctitle { view-transition-name: case-title; }
@keyframes vt-rise { from { opacity: 0; transform: translateY(var(--space-3)); } }
@keyframes vt-fade-out { to { opacity: 0; } }