/* =========================================================
   khevin-mituti / portfolio — v2
   Editorial · ink-on-paper · numbered sections · moleskine.
   Adapted from the design handoff: terracotta accent (#C44536),
   crooked strike on "problems," staircase headline, hats + wine
   glass illustrations, two-roster client wall, left-border
   discipline + process tiles. Plus the namespace-switcher nav
   carried forward from v1 so this surface stays kin with
   khev-tools/design-expert.
   ========================================================= */

:root {
  /* Type */
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ink palette */
  --paper: #F8F5EE;
  --paper-warm: #F2EDE2;
  --paper-deep: #ECE5D4;
  --rule: #1A1815;
  --ink: #1A1815;
  --ink-2: #2C2926;
  --ink-soft: #545454;
  --ink-faint: #9A958A;
  --ink-faintest: #C9C2B2;

  --accent: #C44536;        /* terracotta */
  --accent-deep: #9F3829;
  --accent-soft: #E9C8C0;

  --max: 1240px;
  --gutter: 32px;

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  --m-fast: 120ms;
  --m-base: 200ms;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "kern", "liga";
  overflow-x: hidden;   /* guards against 100vw pseudo-element scroll on Windows */
}
a { color: inherit; text-decoration: none; }

/* Keyboard focus — visible everywhere unless an explicit override applies */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.brand-switch:focus-visible,
.ns-panel li[role="option"]:focus-visible {
  /* These manage their own focus state via background change */
  outline: none;
}
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
em, i { font-style: italic; }
button { font: inherit; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }

/* ---------- shell ---------- */
.shell {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- nav (with namespace switcher) ----------
   Width + gutter + background match khev-tools/design-expert
   so the brand-switch sits at the same pixel position when
   the user round-trips between sites — the dropdown swap
   feels like a tab change, not a navigation. */
nav.top {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  background: color-mix(in oklch, var(--paper) 86%, transparent);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
}
nav.top .inner {
  max-width: 1400px;                          /* matches design-expert --max */
  margin: 0 auto;
  padding: 14px clamp(20px, 4vw, 56px);       /* matches design-expert --gutter clamp */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
}

/* namespace switcher trigger replaces the static brand block */
.brand-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 10px 12px;
  margin: -10px -12px;
  border-radius: 2px;
  min-height: 44px;
  transition: background var(--m-fast);
}
.brand-switch:hover, .brand-switch:focus-visible {
  background: var(--paper-warm);
  outline: none;
}
.brand-switch .ns { color: var(--ink); }
.brand-switch .slash { color: var(--ink-faint); margin: 0 1px; }
.brand-switch .child { color: var(--accent); }
.brand-switch .chev {
  font-size: 14px;
  color: var(--ink-soft);
  margin-left: 6px;
  transition: transform var(--m-fast) var(--ease-out), color var(--m-fast);
}
.brand-switch:hover .chev { color: var(--ink); }
.brand-switch[aria-expanded="true"] .chev {
  transform: rotate(180deg);
  color: var(--ink);
}

.ns-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: clamp(20px, 4vw, 56px);   /* matches the nav gutter, anchors below brand-switch */
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  min-width: 360px;
  box-shadow: 0 8px 32px -16px rgba(26, 24, 21, 0.16);
  z-index: 60;
}
.ns-panel[hidden] { display: none; }
.ns-panel li[role="option"] {
  display: block;
  padding: 14px 16px;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--m-fast);
}
.ns-panel li[role="option"]:hover,
.ns-panel li[role="option"]:focus-visible {
  background: var(--paper-deep);
  outline: none;
}
.ns-panel li[role="option"].current {
  background: var(--accent-soft);
}
.ns-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.ns-row .mark { width: 12px; color: var(--accent-deep); font-size: 10px; }
.ns-row .slash { color: var(--ink-faint); }
.ns-row .child { color: var(--accent); }
.ns-desc {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 4px;
  margin-left: 20px;
  text-wrap: pretty;
}

/* Primary nav links — inline text, not touch-buttons.
   Match design-expert's lighter visual weight. The links
   are hidden on mobile (max-width: 800px) so dropping
   min-height here doesn't affect touch-target compliance. */
nav.top ul.primary {
  display: flex; gap: 22px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  margin: 0;
  padding: 0;
  list-style: none;
}
nav.top ul.primary a {
  color: var(--ink-soft);
  transition: color var(--m-fast);
}
nav.top ul.primary a:hover { color: var(--ink); }

/* ——— Mobile nav toggle (hamburger) ———
   Hidden on desktop; appears at <=760px and toggles the primary nav
   into a dropdown panel anchored to the right of the nav.
   Mirrors the design-expert pattern (system.md → "responsive nav-toggle"). */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  border-radius: 4px;
  margin-left: auto;
  transition: background 150ms;
}
.nav-toggle:hover { background: var(--rule-soft, color-mix(in oklch, var(--ink) 4%, transparent)); }
.nav-toggle:focus { outline: none; }
.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-toggle .nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (max-width: 800px) {
  .ns-panel { left: var(--gutter); right: var(--gutter); min-width: 0; }
  .nav-toggle { display: inline-flex; }
  nav.top ul.primary {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: clamp(20px, 4vw, 56px);
    margin: 0;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(20,18,14,0.06), 0 12px 32px rgba(20,18,14,0.10);
    flex-direction: column;
    gap: 0;
    min-width: 180px;
    z-index: 60;
  }
  nav.top ul.primary[data-open="true"] { display: flex; }
  nav.top ul.primary li { width: 100%; }
  nav.top ul.primary a {
    display: block;
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-soft);
    border-radius: 4px;
    min-height: 44px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    text-transform: lowercase;
  }
  nav.top ul.primary a:hover {
    color: var(--ink);
    background: var(--rule-soft, color-mix(in oklch, var(--ink) 4%, transparent));
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 88px 0 64px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

/* ============================================================
   V5 — Editorial dispatches
   Two-column h-block (italic-led headline + signed kicker)
   above a 3-up dispatches grid. Full-bleed inside the same
   1400px container as the nav. Editorial rules at #4a4540
   (--v5-rule), 20% brighter than ink, vertical lines reach
   their touchpoints — top to bottom of their region.
   ============================================================ */
.hero.v5 {
  --v5-rule: #4a4540;
  padding: 0;
  border-bottom: 1px solid var(--v5-rule);   /* full-window divider below dispatches */
  overflow: visible;
}

.hero.v5 .h-block {
  display: grid;
  grid-template-columns: 1fr 0.6fr;
  align-items: stretch;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}
/* Full-window divider between h-block and dispatches — extends beyond
   the 1400px content frame using a 100vw pseudo-element. */
.hero.v5 .h-block::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--v5-rule);
  pointer-events: none;
}
.hero.v5 .h-block .left {
  padding: clamp(48px, 6vw, 80px) clamp(28px, 3vw, 56px) clamp(48px, 6vw, 80px) clamp(20px, 4vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero.v5 .h-block h1.hx-display {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 7.5vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero.v5 .h-block h1 .a { display: block; }
.hero.v5 .h-block h1 .b {
  display: block;
  padding-left: 6vw;
  font-style: italic;
  color: var(--accent);
}
.hero.v5 .h-block .right {
  border-left: 1px solid var(--v5-rule);
  padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 80px) clamp(48px, 6vw, 80px) clamp(28px, 3vw, 36px);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  display: flex;
  align-items: flex-end;
}
.hero.v5 .h-block .right p {
  margin: 0;
  text-wrap: pretty;
  max-width: 36ch;
}
.hero.v5 .h-block .right em {
  font-style: italic;
  color: var(--accent);
}

/* Name link in the kicker — 2px terracotta underline.
   Color matches "Design that" in the display headline (var(--ink))
   so the name reads as the same weight as the lead. */
.hero.v5 .h-block .right .name-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  transition: color var(--m-fast);
}
.hero.v5 .h-block .right .name-link:hover {
  color: var(--accent);
}

.hero.v5 .dispatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}
.hero.v5 .dispatches .d {
  padding: 40px 36px 36px 56px;
  border-right: 1px solid var(--v5-rule);
  display: block;
  position: relative;
  color: inherit;
}
.hero.v5 .dispatches .d:first-child { padding-left: clamp(20px, 4vw, 80px); }
.hero.v5 .dispatches .d:last-child {
  border-right: 0;
  padding-right: clamp(20px, 4vw, 80px);
}
.hero.v5 .dispatches .n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
  display: block;
}
.hero.v5 .dispatches h4 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  line-height: 1.05;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hero.v5 .dispatches h4 em {
  font-style: italic;
  color: var(--accent);
}
.hero.v5 .dispatches p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
  max-width: 38ch;
}

/* ── Manifesto transitions ──
   "Build the right thing" → over the divider between Right Problem
   and Right Solution. "Build the thing right" → over the divider
   between Right Solution and Done Right. Same words, inverted —
   the visual move IS the inversion, sitting astride each rule.
   The label punches through the top horizontal hairline of the
   dispatches block by riding a paper background. */
.hero.v5 .dispatches.manifesto .d[data-transition-after]::before {
  content: attr(data-transition-after);
  position: absolute;
  top: 0;
  right: -1px;
  transform: translate(50%, -50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--paper);
  padding: 6px 14px;
  z-index: 2;
  pointer-events: none;
}

/* On narrow viewports the columns stack — transitions become
   horizontal labels riding the horizontal dividers between cards. */
@media (max-width: 800px) {
  .hero.v5 .dispatches.manifesto .d[data-transition-after]::before {
    top: auto;
    bottom: 0;
    right: auto;
    left: 50%;
    transform: translate(-50%, 50%);
  }
}

@media (max-width: 800px) {
  .hero.v5 .h-block { grid-template-columns: 1fr; }
  .hero.v5 .h-block .right {
    border-left: 0;
    border-top: 1px solid var(--v5-rule);
  }
  .hero.v5 .dispatches { grid-template-columns: 1fr; }
  .hero.v5 .dispatches .d {
    border-right: 0;
    border-bottom: 1px solid var(--v5-rule);
    padding-left: clamp(20px, 4vw, 80px) !important;
    padding-right: clamp(20px, 4vw, 80px) !important;
  }
  .hero.v5 .dispatches .d:last-child { border-bottom: 0; }
}

/* ---------- moleskine details ---------- */
.moleskine .shell { position: relative; }

/* faint ruled-line bleed across the hero, like notebook paper */
.moleskine .ruled {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    rgba(26,24,21,0.06) 31px,
    rgba(26,24,21,0.06) 32px
  );
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  z-index: 0;
}

/* small red ribbon bookmark — barely visible, balanced */
.moleskine .ribbon {
  position: absolute;
  top: 0;
  right: 14%;
  width: 14px;
  height: 70px;
  background: linear-gradient(
    to right,
    #9F3829 0%,
    #C44536 35%,
    #D45B4C 55%,
    #9F3829 100%
  );
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  box-shadow: 0 4px 8px rgba(26,24,21,0.18);
  z-index: 1;
  transform: rotate(0.6deg);
  transform-origin: top center;
}
.moleskine .ribbon::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 60%;
  width: 1px;
  background: rgba(26,24,21,0.2);
}

/* purple elastic closure strap on the right edge */
.moleskine .elastic {
  position: absolute;
  top: -12px;
  bottom: -12px;
  right: 22px;
  width: 6px;
  background: linear-gradient(to right, #2E1F4D 0%, #49317A 50%, #2E1F4D 100%);
  border-radius: 2px;
  box-shadow: -1px 0 0 rgba(26,24,21,0.15), 1px 0 4px rgba(26,24,21,0.12);
  z-index: 1;
  transform: rotate(0.3deg);
}

/* hero content sits above the paper details */
.moleskine .shell > * { position: relative; z-index: 2; }

/* margin-note in red "pen" — arrow scribble in the right gutter */
.margin-note {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
.margin-note svg { display: block; width: 100%; height: 100%; }
.margin-note-1 {
  top: 30px;
  right: -8px;
  width: 80px;
  height: 60px;
  transform: rotate(4deg);
}

/* page folio — bottom right of hero, like a notebook */
.moleskine .folio {
  position: absolute;
  bottom: 18px;
  right: 60px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  z-index: 2;
}

@media (max-width: 900px) {
  .moleskine .ribbon { right: 8%; height: 50px; width: 12px; }
  .moleskine .elastic { right: 8px; width: 4px; }
  .margin-note-1 { display: none; }
  .moleskine .folio { right: 24px; }
}

/* ---------- display headline (staircase) ---------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(60px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.display em { color: var(--accent); font-style: italic; font-weight: 400; }
.display .l1 { display: block; }
.display .l2 { display: block; padding-left: clamp(40px, 8vw, 120px); }
.display .l3 { display: block; padding-left: clamp(80px, 14vw, 220px); }

/* the crooked terracotta strike on "problems" */
.under {
  display: inline-block;
  position: relative;
  margin-right: 0.22em;
}
.under::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: 52%;
  height: 0.17em;
  background-image: linear-gradient(115deg,
    transparent 0 1.5%,
    var(--accent) 1.5% 98.5%,
    transparent 98.5% 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: rotate(-2.4deg) skewX(-3deg);
  transform-origin: left center;
  border-radius: 1px;
  pointer-events: none;
}

/* hero rows */
.hero-row {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: end;
}
.hero-row .kicker-block { grid-column: span 5; }
.hero-row .copy-block { grid-column: 7 / span 6; }
.hero-row p {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 12px;
  text-wrap: pretty;
}
.hero-row p.small {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 48ch;
}

/* hero stats strip */
.hero-art-strip {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: stretch;
}
.hero-art-strip .stat {
  grid-column: span 3;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  font-family: var(--mono);
}
.hero-art-strip .stat .num {
  display: block;
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.hero-art-strip .stat .num em { color: var(--accent); font-style: italic; }
.hero-art-strip .stat .lab {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- section scaffolding ---------- */
.section {
  padding: 96px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  scroll-margin-top: 80px;
}
.section:last-of-type { border-bottom: 0; }
/* Section header — single column, no top hairline. The
   .section border-bottom alone separates regions; an extra
   line at the top of each header read as misplaced. */
.s-head {
  display: block;
  margin-bottom: 56px;
}
.s-head.sm .num { padding-top: 6px; }
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.section-title em { color: var(--accent); font-style: italic; font-weight: 400; }

.section-title.with-glass { position: relative; display: block; }
.section-title .glass-art {
  position: absolute;
  right: 38%;
  top: 50%;
  transform: translateY(-50%) rotate(4deg);
  width: clamp(80px, 8vw, 120px);
  height: auto;
  display: block;
  pointer-events: none;
}
.section-title .glass-art svg { width: 100%; height: auto; display: block; }
/* iPad and smaller — pin glass to the right edge of the title and
   shrink it so it never crowds the headline at narrow widths. */
@media (max-width: 900px) {
  .section-title .glass-art {
    right: 0;
    width: clamp(56px, 12vw, 96px);
  }
}

.body-lg {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
  color: var(--ink-2);
}

/* ---------- 01 about ---------- */
.about-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  align-items: start;
}
.about-grid .lead {
  grid-column: span 6;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: pretty;
}
.about-grid .lead em { color: var(--accent); font-style: italic; }
.about-grid .hats-art {
  grid-column: 8 / span 5;
  align-self: end;
  /* The PNG has the hat shapes flush with its bottom edge, so the
     illustration reads as cropped against the section divider below.
     Pad the wrapper to give the bases breathing room. */
  padding-bottom: 32px;
}
.about-grid .hats-art svg,
.about-grid .hats-art img { width: 100%; height: auto; display: block; }

/* Inline variant — sits to the right of the section title at iPad
   and smaller, hidden on desktop where the .about-grid copy is shown. */
.hats-art--inline { display: none; }
.hats-art--inline img { width: 100%; height: auto; display: block; }

/* discipline grid — terracotta left border, 1em padding.
   Top border matches the vertical accents — 2px terracotta. */
.disciplines {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--accent);
}
.disciplines .d {
  border-right: 1px solid var(--ink-faintest);
  border-left: 2px solid var(--accent);
  padding: 24px 24px 28px 1em;
  position: relative;
}
.disciplines .d:last-child { border-right: 0; }
.disciplines .d h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  white-space: nowrap;
}
.disciplines .d h4 em { color: inherit; font-style: normal; }
.disciplines .d p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- 02 clients ---------- */
.clients-strip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  align-items: start;
}
.clients-strip .col-l {
  grid-column: span 4;
  display: flex; flex-direction: column; gap: 24px;
}
.clients-strip .col-r { grid-column: span 8; }
.clients-strip .col-l h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 14px 0 0;
}
.clients-strip .col-l h3 em { color: var(--accent); font-style: italic; }

.client-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
}
.client-list .c {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 18px 0;
  border-bottom: 1px dashed var(--ink-faintest);
  align-items: baseline;
  gap: 16px;
  padding-right: 8px;
}
.client-list .c .name {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.005em;
}
.client-list .c .tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.client-list .c.right {
  padding-left: 32px;
  border-left: 1px dashed var(--ink-faintest);
}

/* Pre-rendered client-logo lockups. Horizontal asset on desktop,
   vertical asset on mobile (swap handled by <picture media>). */
.client-strip-img {
  display: block;
}
.client-strip-img img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
  /* Tint every logo into the same dark grey so the strip reads as a
     single uniform row regardless of each brand's source colors. */
  filter: brightness(0);
  opacity: 0.7;
}
/* Inter-strip rhythm. Compensates for the 20% width drop on desktop
   so the gap between section titles stays the same. */
.clients-strip--next {
  margin-top: 91px;
}

/* ---------- 03 work ---------- */
.work-feature {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  margin-bottom: 24px;
  border-top: 1px solid var(--rule);
  padding-top: 32px;
}
.work-feature .visual {
  grid-column: span 7;
  aspect-ratio: 4 / 3;
  background: var(--paper-deep);
  border: 1px solid var(--ink-faintest);
  position: relative;
  overflow: hidden;
}
.work-feature .info { grid-column: span 5; padding-top: 8px; }
.work-feature .info .n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.work-feature .info .n .pill {
  background: var(--accent);
  color: var(--paper);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  font-size: 10px;
}
.work-feature .info h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(54px, 6vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.work-feature .info h3 em { color: var(--accent); font-style: italic; }
.work-feature .info p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0 0 24px;
  text-wrap: pretty;
}
.work-feature .info .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.work-feature .info .stats .s .v {
  display: block;
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -0.01em;
}
.work-feature .info .stats .s .v em { color: var(--accent); font-style: italic; }
.work-feature .info .stats .s .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.work-feature .info .read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding: 6px 0 6px;
  min-height: 44px;
  transition: color var(--m-fast), border-color var(--m-fast);
}
.work-feature .info .read-more:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* viz placeholder for FAVO featured card */
.viz-favo {
  background:
    radial-gradient(circle at 30% 30%, rgba(196,69,54,0.18), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(26,24,21,0.08), transparent 50%),
    var(--paper-deep);
}
.viz-favo::before, .viz-favo::after { content: ""; position: absolute; }
.viz-favo::before {
  inset: 12% 18% 18% 12%;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 12px 12px 0 var(--accent);
}
.viz-favo::after {
  left: 16%; top: 18%; width: 38%; height: 8px;
  background: var(--ink);
}
.viz-favo .grid {
  position: absolute;
  left: 16%; right: 26%; top: 32%; bottom: 28%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
}
.viz-favo .grid div {
  background: var(--paper-warm);
  border: 1px solid var(--ink-faintest);
}
.viz-favo .grid div:nth-child(2) { background: var(--accent-soft); }
.viz-favo .grid div:nth-child(5) { background: var(--ink); }

/* work list */
.work-list { border-top: 1px solid var(--rule); }
.work-list .item {
  display: grid;
  grid-template-columns: 1fr auto 60px;
  /* Title + desc stack on the left; meta and arrow each span both rows
     so they can vertical-center against the combined title+desc block. */
  grid-template-areas:
    "title meta arrow"
    "desc  meta arrow";
  column-gap: 32px;
  row-gap: 14px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  position: relative;
  cursor: pointer;
  transition: background var(--m-base) var(--ease-out);
}
.work-list .item .title { grid-area: title; }
.work-list .item .desc { grid-area: desc; }
.work-list .item .meta-tags { grid-area: meta; align-self: center; }
.work-list .item .arrow { grid-area: arrow; align-self: center; }
.work-list .item:hover { background: var(--paper-warm); }
.work-list .item:hover .title em { color: var(--accent); }
.work-list .item:hover .arrow {
  transform: translateX(4px);
  color: var(--accent);
}
.work-list .item .title {
  font-family: var(--serif);
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.work-list .item .title em {
  /* Project name reads in ink by default; the accent only ignites on
     row hover (see :hover rule above). Keeps the work list quiet
     until the visitor reaches in to engage. */
  color: var(--ink);
  font-style: italic;
  transition: color var(--m-base);
}
.work-list .item .desc {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 64ch;
}
.work-list .item .meta-tags {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.work-list .item .arrow {
  justify-self: end;
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
  color: var(--ink-faint);
  transition: transform var(--m-base) var(--ease-out), color var(--m-base);
}

/* ---------- 04 process ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
/* Top line in terracotta — extends slightly past the left edge,
   ends at the right edge of .process where the arrow takes over. */
.process::before {
  content: "";
  position: absolute;
  top: 0;
  left: -40px;
  right: 0;
  height: 2px;
  background: var(--accent);
  pointer-events: none;
}
/* Arrow at the right end of the line — pointing right, terracotta,
   tip extends ~14px past .process to feel like the line is going somewhere. */
.process::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -14px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 14px solid var(--accent);
  pointer-events: none;
}
.process .step {
  border-right: 1px solid var(--ink-faintest);
  border-left: 2px solid var(--accent);
  padding: 28px 24px 32px 1em;
  position: relative;
}
.process .step:last-child { border-right: 0; }
.process .step .top {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.process .step .top .big {
  font-family: var(--serif);
  font-size: 44px;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.process .step h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.process .step p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* CTA after the four process cards on the homepage. Picks up the
   same red left-border vocabulary as the steps so it reads as the
   continuation rather than a new section. */
.process-more {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 24px;
  margin-top: 40px;
  padding: 24px 24px 24px 1em;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--m-base) var(--ease-out);
}
.process-more:hover { background: var(--paper-warm); }
.process-more:focus { outline: none; }
.process-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.process-more .lead {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}
.process-more .lead em { color: var(--accent); font-style: italic; font-weight: 400; }
.process-more .arrow {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  color: var(--ink-faint);
  transition: transform var(--m-base) var(--ease-out), color var(--m-base);
}
.process-more:hover .arrow { transform: translateX(6px); color: var(--accent); }

@media (max-width: 900px) {
  .process-more {
    gap: 16px;
    padding: 20px 18px 20px 14px;
  }
  .process-more .lead { font-size: 19px; }
  .process-more .arrow { font-size: 24px; align-self: center; }
}

/* ---------- 05 snippets ----------
   Two-column invisible grid. Each snippet is a tappable <button> that
   opens a paper-card popover. The thumbnail is masked: it lives at
   width 0 by default and reveals left-to-right on hover with a soft
   ease-out, then collapses back with a faster ease-in on hover-out.
   The image inside the thumb is fixed-width so it appears to slide
   into view from the left edge rather than stretch. */
/* The grid breaks out of .shell to span full viewport — horizontal
   hairlines extend edge-to-edge of the screen. Each cell uses
   asymmetric outer padding to push content back into the shell width
   so titles align with the section heading above. */
.snip-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Top hairline only — bottom is open so the vertical centre line
     can extend down to the section's --rule divider unimpeded. */
  border-top: 1px solid var(--ink-faintest);
}
.snip-grid::before {
  /* Vertical centre hairline — extends from the grid top to the
     section's bottom border (96px below grid bottom, matching the
     .section padding-bottom). */
  content: '';
  position: absolute;
  top: 0;
  bottom: -96px;
  left: 50%;
  width: 1px;
  background: var(--ink-faintest);
  pointer-events: none;
}
.snip {
  /* Reset native <button> chrome so the trigger reads like a div */
  background: transparent;
  border: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  /* Internal breathing room — vertical pad shared across cells; the
     outer (viewport-side) horizontal pad uses the gutter formula so
     content aligns with the shell's content area at any viewport. */
  padding: 40px 32px;
  border-bottom: 1px solid var(--ink-faintest);
  display: flex;
  align-items: flex-start;
  position: relative;
}
/* Outer-side padding lines content up with the shell content edge.
   Inner-side padding clears the vertical centre line by 32px. */
.snip:nth-child(2n+1) {
  padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-right: 32px;
}
.snip:nth-child(2n) {
  padding-left: 32px;
  padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
/* Last row drops its border-bottom so the grid ends without a
   horizontal line — the vertical centre hairline carries down into
   the section's bottom rule on its own. */
.snip:nth-last-child(-n+2) {
  border-bottom: 0;
}
.snip:focus { outline: none; }
.snip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 2px;
}
.snip .thumb {
  width: 0;
  height: 154px;
  margin-right: 0;
  flex-shrink: 0;
  background: var(--paper-warm);
  position: relative;
  overflow: hidden;
  /* Default = leaving hover. Faster, slight ease-in so the thumb
     collapses cleanly without lingering. */
  transition:
    width 380ms cubic-bezier(0.7, 0, 0.84, 0),
    margin-right 380ms cubic-bezier(0.7, 0, 0.84, 0);
}
.snip:hover .thumb,
.snip:focus-visible .thumb {
  width: 154px;
  margin-right: 28px;
  /* On enter: longer, expressive ease-out (anticipate-ease) so the
     thumb feels confidently revealed rather than sliding mechanically. */
  transition:
    width 720ms cubic-bezier(0.16, 1, 0.3, 1),
    margin-right 720ms cubic-bezier(0.16, 1, 0.3, 1);
}
.snip .thumb img {
  /* Image stays at full 154x154 anchored to the left edge of the
     thumb. As the thumb's width animates 0 -> 154, the image is
     progressively revealed from left-to-right (the right portion
     of the image is clipped by the thumb's overflow:hidden until
     the thumb reaches full width). No stretch, no skew. */
  position: absolute;
  top: 0;
  left: 0;
  width: 154px;
  height: 154px;
  object-fit: cover;
  display: block;
  /* High-quality scaling — force a GPU compositing layer so Chromium
     uses its high-quality image filter when downsampling these large
     PNGs to thumbnail size, rather than falling back to a sharp
     bilinear that exposes aliasing in fine type / device chrome. */
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* iOS / Android touch hardening — block long-press preview menus */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.snip .info {
  flex: 1 1 0;
  min-width: 0;
}
.snip .info h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  transition: color var(--m-base);
}
.snip:hover .info h4 { color: var(--accent); }
.snip .info p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.snip .info .meta-tags {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Reduced-motion users get an instant on/off swap, no slide. */
@media (prefers-reduced-motion: reduce) {
  .snip .thumb,
  .snip:hover .thumb,
  .snip:focus-visible .thumb {
    transition: none;
  }
}

/* ——— Snippet popover (native <dialog>) ———
   Click any item in "A few more, briefly" → modal with project image,
   name, scope, duration, and a fuller summary. Two-column layout on
   desktop (image glued edge-to-edge on the left, content panel on the
   right with the same paper-card register as design-expert's lib-pop).
   Stacks vertically on mobile — image on top, content below. */
.snip-pop {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  /* Hug content — width is driven by the inner card (visual + body
     together). max-content forces the dialog to size to its children
     instead of filling viewport like the default <dialog> behavior.
     Safety cap at 96vw for narrow viewports. */
  width: max-content;
  max-width: 96vw;
  max-height: calc(100vh - 4rem);
  margin: auto;
  overflow: visible;
}
.snip-pop::backdrop {
  background: rgba(26, 24, 21, 0.55);
  backdrop-filter: blur(2px);
}
.snip-pop__card {
  position: relative;
  /* Hug-content layout: body width is clamped to a comfortable reading
     column, body's natural content height drives the row, visual
     stretches to that height and uses an inline aspect-ratio (set by
     JS per image) to derive its width. Card width = visual + body. */
  display: flex;
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden; /* keep the image flush with the rounded corner on the left */
  box-shadow: 0 1px 2px rgba(20,18,14,0.06), 0 12px 32px rgba(20,18,14,0.10);
}
/* Image panel — glued to the left edge of the card, no padding/border.
   The body column drives the card height (its content's natural size).
   JS measures body's height after open and sets the visual's height
   inline; the image then sits at width: auto / height: 100% of the
   visual, rendering at its natural aspect. */
.snip-pop__visual {
  margin: 0;
  padding: 0;
  background: var(--paper);
  position: relative;
  flex: 0 0 auto;
  /* height set inline by JS in pixels; default fallback for first paint */
  height: 320px;
  display: flex;
  align-items: stretch;
}
.snip-pop__visual img {
  display: block;
  width: auto;
  height: 100%;
  /* High-quality scaling on the large popover image too — keeps fine
     type and device chrome smooth at the downsampled size. */
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Match the touch hardening from snippet thumbnails — no iOS preview menu. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* Content panel — keeps the original padding so type breathes.
   Width clamped to a comfortable reading column at clamp(320px, 36vw, 460px)
   so the body doesn't sprawl when the visual hugs the image. */
.snip-pop__body {
  position: relative;
  padding: 32px 36px 24px;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: clamp(320px, 36vw, 460px);
  min-width: 0;
}
.snip-pop__close-form { margin: 0; }
.snip-pop__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  color: var(--ink-faint);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.snip-pop__close:hover {
  color: var(--ink);
  background: color-mix(in oklch, var(--paper-warm) 70%, transparent);
}
.snip-pop__close:focus { outline: none; }
.snip-pop__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.snip-pop__head {
  padding-right: 44px; /* clear of close button */
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.snip-pop__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 16px;
}
.snip-pop__meta {
  display: grid;
  gap: 6px;
}
.snip-pop__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.snip-pop__k { color: var(--ink-faint); }
.snip-pop__v { color: var(--ink-soft); }
.snip-pop__summary {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 22px 0 24px;
  text-wrap: pretty;
}
.snip-pop__foot {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.snip-pop__brand { color: var(--ink-soft); }
.snip-pop__brand .slash {
  color: var(--accent);
  margin: 0 1px;
}

@media (max-width: 720px) {
  /* Stack vertically — image on top, content below. The flex layout
     switches to column; visual goes full-width-auto-height since the
     "image hugs the body height" idea doesn't apply at narrow widths. */
  .snip-pop { width: auto; max-width: 96vw; }
  .snip-pop__card { flex-direction: column; }
  .snip-pop__visual { aspect-ratio: 16/10; flex: 0 0 auto; }
  .snip-pop__visual img { width: 100%; height: 100%; object-fit: cover; }
  .snip-pop__body { width: auto; padding: 24px 22px 18px; }
  .snip-pop__name { font-size: 24px; }
  .snip-pop__row { grid-template-columns: 70px 1fr; }
  .snip-pop__summary { font-size: 15.5px; }
  .snip-pop__foot { flex-wrap: wrap; gap: 8px; }
}

/* ---------- 06 contact ---------- */
.contact-block {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  align-items: end;
}
.contact-block .l { grid-column: span 8; }
.contact-block .r { grid-column: span 4; }
.contact-block .l h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 7vw, 116px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.contact-block .l h2 em { color: var(--accent); font-style: italic; }
.contact-block .l p {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}
/* Contact links · shared component (used in #contact and on /about).
   Markup is rendered from CONTACT_LINKS in script.js — keep styling here. */
.contact-links {
  border-top: 1px dashed var(--ink-faintest);
}
.contact-links a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px dashed var(--ink-faintest);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  min-height: 44px;
  text-decoration: none;
  transition: color var(--m-fast), padding-left var(--m-base);
}
.contact-links a:hover {
  color: var(--accent);
  padding-left: 8px;
}
.contact-links a .v {
  font-family: var(--serif);
  font-size: 18px;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* ---------- footer ----------
   V5 editorial colophon — three columns, two vertical strokes
   between, matching the dispatches grid above. The page closes
   on the same grammar it opened with. Same --v5-rule color so
   every editorial line on the page agrees with itself. */
.foot.v5 {
  --v5-rule: #4a4540;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  max-width: 1400px;
  margin: 0 auto;
}
.foot.v5 .colophon {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.foot.v5 .col {
  padding: 36px 36px 40px 56px;
  border-right: 1px solid var(--v5-rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.foot.v5 .col:first-child { padding-left: clamp(20px, 4vw, 80px); }
.foot.v5 .col:last-child {
  border-right: 0;
  padding-right: clamp(20px, 4vw, 80px);
}
.foot.v5 .col .lab {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.foot.v5 .col span { line-height: 1.6; }
.foot.v5 a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color var(--m-fast), color var(--m-fast);
}
.foot.v5 a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 800px) {
  .foot.v5 .colophon { grid-template-columns: 1fr; }
  .foot.v5 .col {
    border-right: 0;
    border-bottom: 1px solid var(--v5-rule);
    padding-left: clamp(20px, 4vw, 80px) !important;
    padding-right: clamp(20px, 4vw, 80px) !important;
  }
  .foot.v5 .col:last-child { border-bottom: 0; }
}

/* Legacy .foot rules retained for any non-v5 surfaces */
.foot { border-top: 1px solid var(--rule); padding: 24px 0 32px; background: var(--paper); }
.foot .colophon {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-wrap: wrap;
  gap: 16px;
}
.foot .colophon .l { display: flex; gap: 24px; flex-wrap: wrap; }
.foot .colophon a:hover { color: var(--accent); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .display .l2 { padding-left: 24px; }
  .display .l3 { padding-left: 48px; }
  .hero-row .kicker-block, .hero-row .copy-block { grid-column: span 12; }
  .hero-art-strip .stat { grid-column: span 6; }
  .s-head { grid-template-columns: 1fr; gap: 20px; }
  .about-grid .lead, .about-grid .hats-art { grid-column: span 12; }
  .about-grid .hats-art { display: none; }
  .s-head--with-art {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
  }
  .hats-art--inline {
    display: block;
    width: clamp(180px, 33vw, 330px);
    margin-right: -12px;  /* let the brim of the rightmost hat kiss past the column edge — charming, intentional */
  }
  .disciplines, .process, .clients-strip, .client-list, .snip-grid { grid-template-columns: 1fr; }
  .disciplines .d,
  .disciplines .d:last-child { border-right: 2px solid var(--accent); }
  .process::before { display: none; }
  .process::after {
    top: auto;
    right: auto;
    bottom: -14px;
    left: -5px;
    border-top: 14px solid var(--accent);
    border-bottom: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
  }
  .process .step,
  .process .step:last-child { border-right: 0; }
  .clients-strip .col-l, .clients-strip .col-r { grid-column: span 12; }
  .client-list .c.right { padding-left: 0; border-left: 0; }
  .clients-strip--next { margin-top: 56px; }
  .work-list .item { grid-template-columns: 1fr 60px; grid-template-areas: "title arrow" "desc arrow"; }
  .work-list .item .desc, .work-list .item .meta-tags { display: none; }
  .work-feature .visual, .work-feature .info { grid-column: span 12; }
  .contact-block .l, .contact-block .r { grid-column: span 12; }
}

/* Phone — vertical asset takes most of the column, slightly inset. */
@media (max-width: 600px) {
  .client-strip-img img { width: 90%; }
}

/* =========================================================
   CASE STUDY PAGES — projects/{favo,spaces,amway}.html
   Hero (crumbs + title-grid + meta-table), case-section
   (lab + body-block with h2/p/pull/figures), kpi-row,
   mock-screen / phone placeholders, next-case CTA.
   ========================================================= */

/* case hero */
.case-hero {
  padding: 56px 0 72px;
  border-bottom: 1px solid var(--rule);
}
.case-hero .crumbs {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 32px;
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
}
.case-hero .crumbs a:hover { color: var(--accent); }
.case-hero .crumbs .sep { color: var(--ink-faint); }

.case-hero .title-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: end;
}
.case-hero .title-grid .l { grid-column: span 8; }
.case-hero .title-grid .r {
  grid-column: span 4;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
}
.case-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(72px, 11vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.case-hero h1 em { color: var(--accent); font-style: italic; }
.case-hero .sub {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.35;
  color: var(--ink-2);
  max-width: 50ch;
  margin: 0;
  text-wrap: pretty;
}
.case-hero .meta-table { border-top: 1px solid var(--rule); }
.case-hero .meta-table .row {
  display: grid;
  grid-template-columns: 100px 1fr;
  padding: 10px 0;
  border-bottom: 1px dashed var(--ink-faintest);
}
.case-hero .meta-table .row .k {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.case-hero .meta-table .row .v {
  font-family: var(--serif);
  color: var(--ink-2);
  font-size: 15px;
}

/* case content blocks */
.case-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 80px;
}
.case-section:last-of-type { border-bottom: 0; }
.case-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 40px;
  align-items: start;
}
.case-grid .lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.case-grid .lab .n {
  color: var(--ink-soft);
  display: block;
  margin-bottom: 4px;
}
.case-grid .body-block h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.case-grid .body-block h2 em { color: var(--accent); font-style: italic; }
.case-grid .body-block p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: 62ch;
  text-wrap: pretty;
  color: var(--ink-2);
}
.case-grid .body-block p em { font-style: italic; }
.case-grid .body-block .pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  color: var(--ink);
  max-width: 50ch;
}

/* KPI row at the bottom of each case */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  margin-top: 32px;
}
.kpi-row .k {
  border-right: 1px solid var(--ink-faintest);
  padding: 20px 16px 20px 0;
}
.kpi-row .k:last-child { border-right: 0; }
.kpi-row .k .v {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-style: italic;
  margin-bottom: 6px;
}
.kpi-row .k .l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* case figures (visual placeholders) */
.case-figure { margin: 32px 0; }
.case-figure .frame {
  background: var(--paper-deep);
  border: 1px solid var(--ink-faintest);
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
}
.case-figure .cap {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.case-figure .cap .num { color: var(--ink-faint); }

.case-figure-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 32px 0;
}
.case-figure-grid .frame {
  background: var(--paper-deep);
  border: 1px solid var(--ink-faintest);
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}

.case-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 32px 0;
}
.case-strip .frame {
  aspect-ratio: 3 / 4;
  background: var(--paper-deep);
  border: 1px solid var(--ink-faintest);
  position: relative;
  overflow: hidden;
}
.case-strip .frame .num {
  position: absolute;
  top: 10px;
  left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* visual placeholders (intentional, not lazy) — reused on case pages */
.viz-spaces {
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(26,24,21,0.04) 12px 13px),
    var(--paper-warm);
}
.viz-spaces .road {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
}
.viz-spaces .road > div { border-left: 2px dashed var(--ink-faint); }
.viz-spaces .car {
  position: absolute;
  left: 22%; top: 30%; width: 56%; height: 36%;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 18px;
  box-shadow: 8px 8px 0 var(--accent);
}
.viz-spaces .car::before {
  content: "P";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-size: 86px;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-style: italic;
}

.viz-amway { background: var(--ink); }
.viz-amway .iso {
  position: absolute; inset: 18%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  transform: rotateX(35deg) rotateZ(-20deg);
  transform-origin: center;
}
.viz-amway .iso div {
  background: var(--paper);
  border: 1px solid var(--paper);
  aspect-ratio: 1;
}
.viz-amway .iso div:nth-child(odd) {
  background: var(--accent);
  border-color: var(--accent);
}
.viz-amway .iso div:nth-child(3n) {
  background: var(--paper-deep);
  border-color: var(--paper-deep);
}
.viz-amway::after {
  content: "A";
  position: absolute;
  bottom: 12px; left: 16px;
  font-family: var(--serif);
  font-size: 80px;
  color: var(--paper);
  letter-spacing: -0.04em;
  font-style: italic;
}

/* mock app frames */
.mock-screen {
  position: absolute;
  inset: 8% 10%;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 12px 12px 0 var(--accent);
  display: flex;
  flex-direction: column;
}
.mock-screen .bar {
  height: 22px;
  background: var(--ink);
  display: flex; align-items: center; gap: 5px;
  padding: 0 8px;
}
.mock-screen .bar i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--paper-warm);
  display: block;
}
.mock-screen .bar i:nth-child(1) { background: var(--accent); }
.mock-screen .body-mock {
  flex: 1;
  padding: 14px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
}
.mock-screen .body-mock .side {
  background: var(--paper-warm);
  border-radius: 4px;
}
.mock-screen .body-mock .main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-screen .body-mock .main .row {
  height: 14px;
  background: var(--paper-deep);
  border-radius: 2px;
}
.mock-screen .body-mock .main .row.short { width: 60%; }
.mock-screen .body-mock .main .row.accent {
  background: var(--accent-soft);
  width: 40%;
}
.mock-screen .body-mock .main .row.dark {
  background: var(--ink);
  width: 25%;
}

/* phone mock */
.phone {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 60%; height: 78%;
  background: var(--ink);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 8px 8px 0 var(--accent);
}
.phone .screen {
  width: 100%; height: 100%;
  background: var(--paper);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.phone .screen .h {
  height: 8px;
  background: var(--ink);
  width: 30%;
  border-radius: 2px;
}
.phone .screen .card {
  flex: 1;
  background: var(--paper-deep);
  border-radius: 4px;
}
.phone .screen .row {
  height: 6px;
  background: var(--paper-warm);
  border-radius: 2px;
}
.phone .screen .row.accent { background: var(--accent-soft); }

/* next-case CTA */
.next-case {
  padding: 64px 0 96px;
}
.next-case .lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 16px;
}
.next-case a {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: end;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 32px 0;
  transition: background var(--m-base);
}
.next-case a:hover { background: var(--paper-warm); }
.next-case a .l { grid-column: span 8; }
.next-case a .l h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.next-case a .l h3 em { color: var(--accent); font-style: italic; }
.next-case a .l p {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 8px 0 0;
}
.next-case a .r {
  grid-column: 11 / span 2;
  justify-self: end;
}
.next-case a .r .arrow {
  font-family: var(--serif);
  font-size: 80px;
  line-height: 1;
  color: var(--ink-faint);
  transition: transform var(--m-base), color var(--m-base);
}
.next-case a:hover .r .arrow {
  transform: translateX(8px);
  color: var(--accent);
}

@media (max-width: 900px) {
  .case-hero .title-grid .l,
  .case-hero .title-grid .r { grid-column: span 12; }
  .case-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .case-figure-grid, .case-strip { grid-template-columns: 1fr; }
  .next-case a .l, .next-case a .r { grid-column: span 12; }
  .next-case a .r { justify-self: start; }
}

/* =========================================================
   STEP 6 — Distinctive interactive moments per case study.
   Three different idioms — reveal, state-machine, drag-to-compare.
   Each communicates the case's actual decision; each
   degrades cleanly under prefers-reduced-motion.
   ========================================================= */

/* ---------- FAVO · field-cut reveal ---------- */
.field-cut {
  margin: 32px 0;
  background: var(--paper-warm);
  border: 1px solid var(--ink-faintest);
  padding: 32px;
}
.field-cut .header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.field-cut .header .lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field-cut .toggle {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  min-height: 44px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--m-fast);
}
.field-cut .toggle:hover { background: var(--accent); }
.field-cut .fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.field-cut .field {
  background: var(--paper);
  border: 1px solid var(--ink-faintest);
  border-left: 2px solid transparent;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.field-cut .field .num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  width: 28px;
  flex-shrink: 0;
}
.field-cut .field .label {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-2);
  flex: 1;
}
.field-cut .field .check {
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink-faintest);
  border-radius: 2px;
  flex-shrink: 0;
}
.field-cut[data-state="cut"] .field:not(.keep) {
  opacity: 0.22;
}
.field-cut[data-state="cut"] .field.keep {
  border-left-color: var(--accent);
  background: var(--paper);
}
.field-cut[data-state="cut"] .field.keep .check {
  background: var(--accent);
  border-color: var(--accent);
}
.field-cut .caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 16px 0 0;
}
@media (max-width: 720px) {
  .field-cut .fields { grid-template-columns: 1fr; }
}

/* ---------- SPACES · park-and-go state machine ---------- */
.park-proto {
  margin: 32px 0;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: center;
  padding: 32px;
  background: var(--paper-warm);
  border: 1px solid var(--ink-faintest);
}
.park-proto .device {
  width: 280px;
  aspect-ratio: 9 / 19;
  background: var(--ink);
  border-radius: 28px;
  padding: 10px;
  box-shadow: 12px 12px 0 var(--accent);
  position: relative;
  margin: 0 auto;
}
.park-proto .face {
  width: 100%;
  height: 100%;
  background: var(--paper);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.park-proto .state {
  position: absolute;
  inset: 0;
  padding: 28px 22px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
  pointer-events: none;
}
.park-proto[data-state="idle"] .state-idle,
.park-proto[data-state="active"] .state-active,
.park-proto[data-state="done"] .state-done {
  opacity: 1;
  pointer-events: auto;
}
.park-proto .zone {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.park-proto .state .head h5 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  color: var(--ink);
}
.park-proto .state .head .sub {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.park-proto .timer {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-style: italic;
  display: block;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.park-proto .amount {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-style: italic;
  display: block;
  margin: 0;
}
.park-proto .meta-line {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 6px 0 0;
}
.park-proto button.action {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 22px;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  width: 100%;
  transition: background var(--m-fast), color var(--m-fast);
}
.park-proto button.action.start {
  background: var(--accent);
  color: var(--paper);
}
.park-proto button.action.start:hover { background: var(--accent-deep); }
.park-proto button.action.stop {
  background: var(--ink);
  color: var(--paper);
}
.park-proto button.action.reset {
  background: transparent;
  border: 1px solid var(--ink-faintest);
  color: var(--ink-soft);
}
.park-proto .copy {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 32ch;
}
.park-proto .copy p { margin: 0 0 12px; }
.park-proto .copy em { color: var(--accent); font-style: italic; }
.park-proto .copy .hint {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 16px 0 0;
  display: block;
}
@media (max-width: 720px) {
  .park-proto { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .park-proto .device { width: 240px; }
}

/* ---------- AMWAY · before/after image-comparison slider ---------- */
.compare-slider {
  position: relative;
  margin: 32px 0;
  border: 1px solid var(--ink-faintest);
  background: var(--paper-deep);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  --pos: 50;
}
.compare-slider .layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px;
  justify-content: center;
}
.compare-slider .layer.before {
  background: var(--paper-warm);
}
.compare-slider .layer.before::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent 0 18px, rgba(26,24,21,0.06) 18px 19px);
  pointer-events: none;
}
.compare-slider .layer.before .row {
  height: 14px;
  background: var(--paper-deep);
  border-radius: 2px;
  position: relative;
  z-index: 1;
}
.compare-slider .layer.before .row.short { width: 60%; }
.compare-slider .layer.before .row.shorter { width: 40%; }
.compare-slider .layer.before .row.varied { width: 80%; background: var(--accent-soft); }
.compare-slider .layer.before .row.dark { background: var(--ink); width: 30%; }
.compare-slider .layer.before .row.tilt-1 { transform: rotate(-1deg); }
.compare-slider .layer.before .row.tilt-2 { transform: rotate(0.6deg); }

.compare-slider .layer.after {
  background: var(--ink);
  clip-path: inset(0 0 0 calc(var(--pos) * 1%));
}
.compare-slider .layer.after .row {
  height: 14px;
  background: var(--paper-deep);
  border-radius: 2px;
}
.compare-slider .layer.after .row.short { width: 50%; }
.compare-slider .layer.after .row.accent { background: var(--accent); width: 40%; }
.compare-slider .layer.after .row.muted { background: var(--ink-soft); width: 70%; opacity: 0.5; }
.compare-slider .layer.after .row.token { background: var(--paper-warm); width: 60%; }

.compare-slider .divider {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--pos) * 1%);
  width: 2px;
  background: var(--accent);
  pointer-events: none;
  z-index: 2;
}
.compare-slider .divider .knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: var(--paper);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(196,69,54,0.3);
  letter-spacing: -0.02em;
}
.compare-slider .handle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
  z-index: 3;
}
.compare-slider .handle::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}
.compare-slider .handle::-moz-range-thumb {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}
.compare-slider .handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.compare-slider .label {
  position: absolute;
  top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--ink-faintest);
  background: var(--paper);
  color: var(--ink-soft);
  pointer-events: none;
  z-index: 2;
}
.compare-slider .label.before-label { left: 16px; }
.compare-slider .label.after-label {
  right: 16px;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* =========================================================
   STEP 7 — Process page (process.html)
   ========================================================= */

.page-hero {
  padding: 56px 0 64px;
  border-bottom: 1px solid var(--rule);
}
/* Flush variant — drops the rule beneath the hero so the next section
   reads as continuous with the title block. Used on the process page
   where the principles array sits directly under the title. */
.page-hero.page-hero--flush { border-bottom: 0; }
.page-hero .crumbs {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 32px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.page-hero .crumbs a:hover { color: var(--accent); }
.page-hero .crumbs .sep { color: var(--ink-faint); }

.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 40px;
  align-items: end;
}
.page-hero-grid .l h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.page-hero-grid .l h1 em { color: var(--accent); font-style: italic; }
.page-hero-grid .l .sub {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}
.page-hero-aside {
  width: 80px;
  height: 80px;
  align-self: end;
  margin-bottom: 8px;
}
.page-hero-aside svg { width: 100%; height: auto; display: block; }
@media (max-width: 720px) {
  .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero-aside { width: 56px; height: 56px; }
}

/* Principles grid — 6 cards, 2 columns */
.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.principle {
  background: var(--paper);
  padding: clamp(36px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Eyebrow labels (Discovery / Framing / Subtraction / etc.) and the
   hairline beneath them are hidden — the principle's own h2 carries
   the identity, and the card reads cleaner without the chrome. */
.principle .p-head { display: none; }
.principle .p-head--legacy {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-faintest);
  margin-bottom: 4px;
}
/* The .num (P · 01) was removed; .disc (Discovery, Framing, etc.)
   now carries the principle's identity in its place. */
.principle .p-head .disc { color: var(--accent-deep); }
.principle h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
  text-wrap: balance;
}
.principle h2 em { color: var(--accent); font-style: italic; }
.principle p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 50ch;
  text-wrap: pretty;
}
.principle p em { color: var(--accent); font-style: italic; }
.principle .aside {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-transform: none;
  /* Red rule-bar removed — the italic mono caption stands on its own,
     no chrome around it, just whitespace. */
  border-left: 0;
  padding: 4px 0;
  margin-top: 8px;
  font-style: italic;
}
.principle .aside .link {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transition: border-color 150ms;
}
.principle .aside .link:hover { border-bottom-color: var(--accent); }
.principle .aside .mono {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--paper-warm);
  padding: 2px 6px;
  border-radius: 2px;
}
.principle p .mono {
  font-family: var(--mono);
  font-size: 13.5px;
  background: var(--paper-warm);
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0;
}
@media (max-width: 720px) {
  .principles { grid-template-columns: 1fr; }
}

/* Closing block on the process page — full-width single lead.
   No top rule (the section divider above already separates it). */
.page-closing {
  display: block;
}
.page-closing .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 64ch;
  margin: 0;
  text-wrap: pretty;
}

/* =========================================================
   ABOUT-ME page (about-me.html)
   Two columns: 4:5 portrait on the left, bio prose on the right.
   ========================================================= */

.about-page-grid {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.about-portrait {
  margin: 0;
  aspect-ratio: 4 / 5;
  background: var(--paper-deep);
  border: 1px solid var(--ink-faintest);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--ink-mute);
}
.about-portrait svg {
  width: 60%;
  height: auto;
  max-height: 78%;
  display: block;
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-portrait .placeholder-label {
  position: absolute;
  bottom: 14px;
  left: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.about-page-grid .bio {
  font-family: var(--serif);
  color: var(--ink-2);
}
.about-page-grid .bio .lead {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 24px;
  text-wrap: pretty;
  max-width: 38ch;
}
.about-page-grid .bio p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 56ch;
  text-wrap: pretty;
}
.about-page-grid .bio p em {
  font-style: italic;
  color: var(--accent);
}
.about-page-grid .bio .bar {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.36;
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 20px;
  margin: 32px 0 28px;
  color: var(--ink);
  max-width: 40ch;
}
.about-page-grid .bio .bar em {
  font-style: italic;
  color: var(--accent);
}

.bio-meta {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.bio-meta li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--ink-faintest);
}
.bio-meta .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bio-meta .v {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-2);
}

.bio .contact-links {
  margin-top: 32px;
}

@media (max-width: 800px) {
  .about-page-grid { grid-template-columns: 1fr; }
  .about-portrait { max-width: 320px; }
  .bio-meta li { grid-template-columns: 1fr; gap: 4px; }
}

/* =========================================================
   STEP 8 — Notes / writing index page (notes.html)
   ========================================================= */

.notes-list {
  /* Top + bottom of the list are clean — only the year-dividers in the
     middle are visible. */
}
.notes-year {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.notes-year:last-child { border-bottom: 0; }
.notes-year .year {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  position: sticky;
  top: 80px;
  padding-top: 6px;
}
.notes-year .year em {
  font-style: normal;
  font-family: var(--serif);
  font-size: 32px;
  font-style: italic;
  color: var(--accent);
  letter-spacing: -0.02em;
  display: block;
  margin-top: 4px;
}
.notes-year .entries {
  display: flex;
  flex-direction: column;
}
.note-entry {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--ink-faintest);
  align-items: baseline;
  transition: padding-left 180ms var(--ease-out);
}
.note-entry:last-child { border-bottom: 0; }
.note-entry:hover { padding-left: 8px; }
.note-entry:hover .arrow {
  transform: translateX(4px);
  color: var(--accent);
}
.note-entry:hover .title em { color: var(--accent-deep); }
.note-entry .date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.note-entry .title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.note-entry .title em {
  font-style: italic;
  color: var(--accent);
  transition: color 150ms;
}
.note-entry .title .where {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 6px;
  font-style: normal;
}
.note-entry .arrow {
  justify-self: end;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-faint);
  transition: transform 180ms var(--ease-out), color 150ms;
}
@media (max-width: 720px) {
  .notes-year { grid-template-columns: 1fr; gap: 16px; }
  .notes-year .year { position: static; padding-top: 0; }
  .note-entry { grid-template-columns: 80px 1fr 32px; gap: 16px; }
}

/* =========================================================
   CASE-STUDY CHROME — accent = ink
   Inside every case study (favo / spaces / amway), italic ems,
   pull-quote rules, KPI numerals, and hover affordances tint to
   the same dark grey as the body type. The result reads like an
   editorial spread — hierarchy through weight and italics, not
   through color shifts.
   ========================================================= */

body[data-project] {
  --case-accent: var(--ink);
  --case-accent-soft: color-mix(in oklch, var(--ink) 8%, transparent);
  /* Inside case studies the brand accent (terracotta) does not work — case
     studies are editorial and want monochrome chrome. Override --accent
     itself so any rule that reaches for it inside body[data-project]
     resolves to ink, not red. */
  --accent: var(--ink);
}

body[data-project] .case-hero h1 em,
body[data-project] .case-title em,
body[data-project] .case-grid .body-block h2 em,
body[data-project] .case-prose h2 em,
body[data-project] .case-prose p em,
body[data-project] .next-case a .l h3 em,
body[data-project] .work-feature .info h3 em,
body[data-project] .feature-highlight h3 em {
  color: var(--case-accent);
}
body[data-project] .case-grid .body-block .pull,
body[data-project] .case-prose .pull {
  border-left-color: var(--case-accent);
  color: var(--case-accent);
}
body[data-project] .kpi-row .k .v,
body[data-project] .kpi-stack .num {
  color: var(--case-accent);
}
body[data-project] .case-hero .crumbs a:hover,
body[data-project] .work-feature .info .read-more:hover {
  color: var(--case-accent);
  border-color: var(--case-accent);
}
body[data-project] .next-case a:hover .r .arrow {
  color: var(--case-accent);
}
body[data-project] .case-hero {
  border-bottom-color: var(--rule);
}

/* No section dividers inside case studies — the composition
   does the work; the rules were redundant and visually noisy. */
body[data-project] .case-section {
  border-bottom: 0;
  padding: 64px 0;
}
body[data-project] .case-section:first-of-type { padding-top: 80px; }

/* Real images inside case-figure frames */
.case-figure .frame img,
.case-figure-grid .frame img,
.case-strip .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-figure .frame.contain img {
  object-fit: contain;
  padding: clamp(20px, 4vw, 56px);
  background: var(--paper-warm);
}

/* Bare frame — for high-quality mockups that carry their own contrast.
   No background, no border, no aspect-ratio cap, no padding. The image
   defines its own height; the figcaption sits beneath. */
.case-figure .frame.bare {
  background: transparent;
  border: 0;
  aspect-ratio: auto;
  height: auto;
  padding: 0;
  overflow: visible;
}
.case-figure .frame.bare img {
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 0;
  background: transparent;
  display: block;
}

/* Clutter strip — three subdued before-state thumbnails in a row,
   each with a corner label. Used to acknowledge inheritance without
   framing it as portfolio-quality work. */
.case-figure .clutter-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.case-figure .clutter-strip .item {
  position: relative;
  background: var(--paper-deep);
  overflow: hidden;
  border: 1px solid var(--ink-faintest);
}
.case-figure .clutter-strip .item img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(0.45) brightness(0.92);
}
.case-figure .clutter-strip .item .label {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(26, 24, 21, 0.88);
  color: var(--paper);
  padding: 6px 10px;
  z-index: 1;
}
@media (max-width: 720px) {
  .case-figure .clutter-strip { grid-template-columns: 1fr; }
}

/* Feature highlight — full-width card on paper-warm, used to
   spotlight a single feature like the Notes cross-reference panel.
   Notes.png is a transparent PNG so it sits comfortably on the warm
   background without needing its own card. */
.feature-highlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(36px, 5vw, 56px);
  background: var(--paper-warm);
  border: 1px solid var(--ink-faintest);
  margin: 32px 0;
}
.feature-highlight .content .lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.feature-highlight .content h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.018em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.feature-highlight .content h3 em {
  font-style: italic;
  color: var(--accent);
}
.feature-highlight .content p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 38ch;
  text-wrap: pretty;
}
.feature-highlight .art {
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-highlight .art img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}
@media (max-width: 800px) {
  .feature-highlight { grid-template-columns: 1fr; }
}

/* Side quest — a small "while we were at it" aside, used at the end
   of a case to reference adjacent work without giving it its own
   case section. Image left, italic caption right. */
.side-quest {
  margin: 48px 0 0;
  padding: 32px 0 0;
  border-top: 1px dashed var(--ink-faintest);
}
.side-quest .lab {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
}
.side-quest figure {
  margin: 0;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
}
.side-quest figure img {
  width: 100%;
  height: auto;
  display: block;
}
.side-quest figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 19px);
  color: var(--ink-2);
  line-height: 1.45;
  max-width: 36ch;
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .side-quest figure { grid-template-columns: 1fr; }
}

/* =========================================================
   FAVO · Aiyu → Favo logo evolution
   A click-driven A/B toggle that animates between two brand
   marks. Replaces the v2 field-cut for the FAVO case study
   since the real narrative is rebrand, not field reduction.
   ========================================================= */
.logo-evolution {
  margin: 32px 0;
  background: var(--paper-warm);
  border: 1px solid var(--ink-faintest);
  padding: 32px;
}
.logo-evolution .stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper);
  border: 1px solid var(--ink-faintest);
  margin-bottom: 16px;
  overflow: hidden;
}
.logo-evolution .mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 480ms var(--ease-out);
}
.logo-evolution[data-state="aiyu"] .mark.aiyu { opacity: 1; }
.logo-evolution[data-state="favo"] .mark.favo { opacity: 1; }
.logo-evolution .mark img {
  max-width: 50%;
  max-height: 70%;
  object-fit: contain;
}
.logo-evolution .controls {
  display: flex;
  gap: 4px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.logo-evolution .controls button {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 20px;
  min-height: 44px;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--m-fast), border-color var(--m-fast);
  border-bottom: 2px solid transparent;
}
.logo-evolution .controls button:hover { color: var(--ink); }
.logo-evolution .controls button.active {
  color: var(--ink);
  border-bottom-color: var(--case-accent, var(--accent));
}
.logo-evolution .caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 16px 0 0;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   SPACES CASE-STUDY EXTENSIONS
   The shared .case-* scaffolding stays available for favo/amway.
   This file replaces the right-rail meta-table with a horizontal
   fact ribbon, drops section eyebrow labels in favor of h2 alone,
   and lets each section pick its own grid based on the images it
   carries — symmetric where the images are paired, asymmetric where
   one image dominates, full-bleed where the moment earns it.
   ========================================================= */

/* — Hero — title 12-col, subtitle below capped at reading width — */
.case-hero.case-hero--wide .case-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(72px, 11vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.case-hero.case-hero--wide .case-title em { color: var(--accent); font-style: italic; }
.case-hero.case-hero--wide .case-sub {
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.35;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 56px;
  text-wrap: pretty;
}

/* — Fact ribbon — six cells, no inter-cell rules. Spacing alone. — */
.fact-ribbon {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
}
.fact-ribbon > div { padding: 0; }
.fact-ribbon .k {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.fact-ribbon .v {
  display: block;
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}
@media (max-width: 900px) {
  .fact-ribbon { grid-template-columns: repeat(3, 1fr); gap: 22px 28px; }
}
@media (max-width: 560px) {
  .fact-ribbon { grid-template-columns: repeat(2, 1fr); gap: 20px 28px; }
}

/* — Key visual — first impression image directly under the hero — */
.case-key {
  padding: 64px 0 72px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.case-key__fig { margin: 0; }
.case-key__fig figcaption {
  margin-top: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  text-wrap: pretty;
}

/* — Paper-frame — soft mount for hero-quality screens — */
.frame.paper {
  background: var(--paper);
  border: 1px solid var(--ink-faintest);
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(20,18,14,0.04), 0 12px 32px rgba(20,18,14,0.06);
  overflow: hidden;
}
.frame.paper img { width: 100%; display: block; border-radius: 2px; }

/* — Reading column — body prose constrained for readability —
   Figures live as siblings of .case-prose inside the shell, free to
   use their own grid arrangements at the full container width. */
.case-prose {
  max-width: 65ch;
  margin: 0 auto;
}
.case-prose h2 {
  margin: 0 0 24px;
  text-wrap: balance;
}
.case-prose p { margin: 0 0 18px; }
.case-prose p:last-child { margin-bottom: 0; }
.case-prose .pull {
  margin: 32px 0;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
  font-style: italic;
  color: var(--ink-2);
}
.case-prose.case-caption {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* — Evidence wall — left-anchored trio of before-shots, packed
   neatly within the left two-thirds of the grid. The description
   sits below the wall, also left-anchored, leaving the right
   third as deliberate breathing room. */
.evidence-wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin: 56px 0 16px;
}
.evidence-wall .ev-item { margin: 0; }
.evidence-wall .ev-item .frame {
  border: 1px solid var(--ink-faintest);
  background: var(--paper-warm);
  padding: 8px;
}
.evidence-wall .ev-item .frame img { width: 100%; display: block; }
.evidence-wall .ev-1 { grid-column: 1 / span 3; }
.evidence-wall .ev-2 { grid-column: 4 / span 3; }
.evidence-wall .ev-3 { grid-column: 7 / span 3; }
@media (max-width: 900px) {
  .evidence-wall .ev-1 { grid-column: 1 / span 4; }
  .evidence-wall .ev-2 { grid-column: 5 / span 4; }
  .evidence-wall .ev-3 { grid-column: 9 / span 4; }
}
.evidence-wall .ev-caption {
  grid-column: 1 / span 9;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 18px 0 0;
  max-width: 62ch;
  text-wrap: pretty;
}
@media (max-width: 600px) {
  .evidence-wall { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .evidence-wall .ev-1,
  .evidence-wall .ev-2,
  .evidence-wall .ev-3,
  .evidence-wall .ev-caption { grid-column: 1; }
}

/* — Bare images — case-key and side-quest figures dropped their
   paper-frame wrappers; the bare img needs to render full-width
   with a small radius so the bitmap doesn't sit naked-edged. */
.case-key__fig > img,
.side-quest figure > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* — V2 figures — three distinct anchors so the V2 section reads
   as a varied composition, not a stack of equally-mounted screens.
   Lead = center-offset; hands = left-anchored; right = right-anchored.
   No paper-frame: these are device renders / context shots that
   already carry their own physical framing. */
.v2-fig {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin: 56px 0;
}
.v2-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.v2-fig--lead     { margin-top: 32px; }
.v2-fig--lead img { grid-column: 2 / span 9; }
.v2-fig--hands img { grid-column: 1 / span 8; }
.v2-fig--right img { grid-column: 4 / span 9; }
@media (max-width: 900px) {
  .v2-fig--lead img { grid-column: 1 / span 11; }
  .v2-fig--hands img { grid-column: 1 / span 10; }
  .v2-fig--right img { grid-column: 2 / -1; }
}
@media (max-width: 600px) {
  .v2-fig img { grid-column: 1 / -1; }
}

/* — Wide figure — full container width, generous vertical breathing — */
.case-figure.case-figure--wide {
  margin: 56px 0;
}
.case-figure.case-figure--wide .frame.paper { padding: 12px; }

/* — KPI stack — oversized italic serif numerals, one per row — */
.kpi-stack {
  display: grid;
  grid-template-columns: 1fr;
  margin: 56px 0 16px;
  border-top: 1px solid var(--rule);
}
.kpi-stack .k {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.kpi-stack .num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--accent);
}
.kpi-stack .num .unit { font-size: 0.55em; letter-spacing: -0.02em; }
.kpi-stack .num .arr {
  color: var(--ink-faint);
  padding: 0 6px;
  font-style: normal;
  font-size: 0.7em;
  vertical-align: middle;
}
.kpi-stack .lab {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-wrap: balance;
  max-width: 32ch;
  justify-self: end;
}
@media (max-width: 760px) {
  .kpi-stack .k { grid-template-columns: 1fr; gap: 6px; }
  .kpi-stack .lab { justify-self: start; max-width: none; }
}

/* — Side quest — small closer for the marketing-site companion piece —
   no eyebrow label; the figure and a serif italic caption are enough. */
.side-quest {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px dashed var(--ink-faintest);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.side-quest figure { margin: 0; }
.side-quest figure figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 14px;
  max-width: 60ch;
  text-wrap: pretty;
}

/* =========================================================
   EDITORIAL REGISTER — case-study rail-and-body
   The Work&Co/Pentagram-style long-form layout for case studies.
   A narrow rail holds chapter numbers and small section labels;
   a wider body column holds prose and figures. Numbered chapter
   anchors are display-sans, oversized, and lead each section.
   See craft.md § Editorial layouts and system.md § editorial register.
   ========================================================= */

/* Rail-and-body container — replaces .case-section's centered prose
   layout when an editorial chapter is in use. The rail column is
   ~280px wide; the body fills the remainder, capped at ~700px reading
   width. Both align to the top so the chapter number sits flush with
   the chapter title. */
.chapter {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(64px, 8vw, 112px) 0;
  border-top: 4px solid var(--ink);
}
.chapter:first-of-type { border-top: 4px solid var(--ink); }

/* The rail — chapter number + small kicker label sit together. */
.chapter__rail { position: relative; }
.chapter__num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: block;
  margin: 0 0 20px;
}
.chapter__kicker {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  max-width: 18ch;
  line-height: 1.4;
}

/* The body — chapter title leads, prose follows, figures break out
   of the reading-width cap when the prose ends. */
.chapter__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.chapter__body > h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  max-width: 26ch;
}
.chapter__body > h2 em {
  font-style: italic;
  font-weight: 400;
}
.chapter__body > p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0;
  text-wrap: pretty;
}
.chapter__body > p em { font-style: italic; }
.chapter__body > .pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  border-left: 2px solid var(--ink);
  padding: 4px 0 4px 24px;
  margin: 12px 0;
  color: var(--ink);
  max-width: 44ch;
}

/* Sub-section hairline divider — used for the rare in-chapter break.
   Most sub-sections rely on whitespace alone. */
.chapter__body .hr-soft {
  border: 0;
  border-top: 1px solid var(--ink-faintest);
  margin: 16px 0 8px;
  width: 100%;
}

/* When a figure or aside lives inside .chapter__body, let it break
   out past the 62ch prose cap and use the full body-column width. */
.chapter__body > figure,
.chapter__body > .evidence-wall,
.chapter__body > .v2-fig,
.chapter__body > .feature-highlight,
.chapter__body > .takeaways,
.chapter__body > .suite-carousel,
.chapter__body > .amway-status-table {
  max-width: none;
  margin: 0;
}

/* Pre-summary block — "Three big takeaways" sits between the hero
   and chapter 01 as a courtesy table-of-contents. Three numbered
   rows, each a one-sentence claim. */
.takeaways {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--ink-faintest);
}
.takeaways__head {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
  align-self: start;
  padding-top: 6px;
}
.takeaways__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.takeaways__list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--ink-faintest);
}
.takeaways__list li:first-child { border-top: 0; padding-top: 0; }
.takeaways__list .n {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.takeaways__list .t {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
  max-width: 50ch;
}
.takeaways__list .t em { font-style: italic; }

/* Editorial KPI block — display-sans numerals stacked with hairline
   dividers between rows. Anchors the outcome chapter. */
.kpi-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 16px 0 0;
  border-top: 1px solid var(--ink-faintest);
}
.kpi-editorial .row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--ink-faintest);
}
.kpi-editorial .num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi-editorial .num .unit { font-size: 0.55em; letter-spacing: -0.02em; font-weight: 400; }
.kpi-editorial .num .arr {
  color: var(--ink-faint);
  padding: 0 6px;
  font-size: 0.55em;
  vertical-align: 0.18em;
  font-style: normal;
  font-weight: 400;
}
.kpi-editorial .lab {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
  max-width: 38ch;
}

/* Mobile — rail and body stack; chapter number stays large but
   inline with the kicker, sitting above the title. */
@media (max-width: 900px) {
  .chapter,
  .takeaways {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 56px 0;
  }
  .chapter__num { font-size: clamp(48px, 14vw, 72px); margin-bottom: 8px; }
  .chapter__kicker { max-width: none; }
  .takeaways__head { padding-top: 0; }
  .kpi-editorial .row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
}

/* =========================================================
   SPACES2 · HYBRID LAYOUT EXTENSIONS
   New components for the v2 case study scoped to data-project="spaces2":
   vertical-split, square-highlight, cinematic-break, multi-shape-grid.
   Per spaces2.DESIGN.md.
   ========================================================= */

body[data-project] .case-hero.case-hero--wide .case-title {
  font-size: clamp(56px, 8vw, 88px);
  line-height: 1;
}

/* Drop all the rule lines bracketing the hero key visual — case-hero
   loses its bottom border (the line above the image), fact-ribbon
   loses both top and bottom borders, case-key loses its bottom border.
   The composition reads cleaner with whitespace doing the separation. */
body[data-project] .case-hero {
  border-bottom: 0;
}
body[data-project] .fact-ribbon {
  border-top: 0;
  border-bottom: 0;
}
body[data-project] .case-key {
  border-bottom: 0;
}

/* =========================================================
   AMWAY · SUITE CAROUSEL
   Card-stack with peek effect for the five complementary tools.
   Two-column: stack on the left, content on the right with arrow
   controls. Arrow / click cycles which card is on top; cards behind
   peek out at increasing offsets, scaled down, beige-tinted.
   ========================================================= */

/* Hide chapter kicker label below the chapter numeral — the chapter title
   carries the narrative, the numeral carries the rhythm, the kicker is redundant. */
body[data-project="amway"] .chapter__kicker {
  display: none;
}

body[data-project="amway"] .suite-carousel {
  display: grid;
  /* 1.7fr : 1fr — stack column is ~20% wider than the original 1.1fr : 1fr,
     scaling every card up by 20% in width while preserving the equalized
     area ratios between cards. */
  grid-template-columns: 1.7fr 1fr;
  /* Tighter gap so cards and text read as one composition rather than
     two distant blocks separated by an editorial dead-zone. */
  gap: clamp(48px, 6vw, 96px);
  /* Top-anchor: cards' top and the text column's top (now starting with
     the controls bar) line up at the same baseline. */
  align-items: start;
  margin: clamp(40px, 6vw, 72px) 0;
}

/* Chapter 1's lead figure sits flush-left with the body text instead of
   the default centre-offset (col 2 / span 9). Reads as a documentary
   photograph alongside the prose, not a hero set apart from it. */
body[data-project="amway"] .v2-fig--lead img { grid-column: 1 / span 9; }

/* Closing iPad / tablet mocks in both amway and spaces case studies
   align flush-left with the body text instead of the default --right
   offset. Keeps the colored device shots reading as evidence inline
   with the prose rather than floating to the right margin. */
body[data-project="amway"] .v2-fig--right img,
body[data-project="spaces"] .v2-fig--right img { grid-column: 1 / span 9; }

/* Pull quotes lose the rule-bar — the italic display type and the
   whitespace around it carry the emphasis on their own. */
body[data-project="amway"] .chapter__body > .pull {
  border-left: 0;
  padding-left: 0;
}

/* Tighten the bottom padding of every section by ~20% so chapters,
   hero, key visual, and the next-case CTA all sit closer to the
   following block. The composition reads denser without losing
   editorial breathing room at the top. */
body[data-project="amway"] .case-hero    { padding-bottom: 58px; }
body[data-project="amway"] .case-key     { padding-bottom: 58px; }
body[data-project="amway"] .case-section { padding-bottom: 51px; }
body[data-project="amway"] .chapter      { padding-bottom: clamp(51px, 6.4vw, 90px); }
body[data-project="amway"] .next-case    { padding-bottom: 77px; }

/* Controls sit at the TOP of the text column (above the title), visually
   aligned with the top edge of the card stack thanks to align-items:start.
   This anchors the arrows to the cards' top — they're now part of the
   carousel composition rather than floating in the rail. */
body[data-project="amway"] .suite-carousel .carousel-controls {
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-faintest);
  gap: 4px;
}
body[data-project="amway"] .carousel-controls button {
  width: 36px;
  height: 36px;
  font-size: 22px;
}
body[data-project="amway"] .carousel-counter {
  margin-left: auto;
}

body[data-project="amway"] .carousel-stack {
  display: grid;
  width: 100%;
  position: relative;
  perspective: 1200px;
  justify-items: center;
  align-items: center;
}

body[data-project="amway"] .carousel-card {
  /* All cards stack in the same grid cell; cell sizes to the largest card.
     Per-card width set via --card-w (inline) so card areas equalise — width
     scales with sqrt(aspect-ratio) to compensate for the height set by the
     image aspect-ratio. Same display area for every card, regardless of
     whether the source asset is portrait or landscape. */
  grid-column: 1;
  grid-row: 1;
  width: var(--card-w, 100%);
  position: relative;
  /* aspect-ratio set inline per-card so each card sizes to its own image */
  border: 1px solid var(--ink-faintest);
  background: #fff;
  cursor: pointer;
  transform-origin: center center;
  transition: transform 500ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 500ms cubic-bezier(0.32, 0.72, 0, 1);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20,18,14,0.08), 0 1px 2px rgba(20,18,14,0.04);
  padding: 0;
}
body[data-project="amway"] .carousel-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
body[data-project="amway"] .carousel-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}

/* Cards behind the active one are opaque-tinted with a darker-beige overlay,
   progressively darker as they go further back. Active card has no overlay. */
body[data-project="amway"] .carousel-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: transparent;
  transition: background 500ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Stack positions: 0 = front; higher = further back */
body[data-project="amway"] .carousel-card[data-pos="0"] {
  transform: translate(0, 0) scale(1) rotate(0deg);
  z-index: 10;
  opacity: 1;
}
body[data-project="amway"] .carousel-card[data-pos="0"]::after {
  background: transparent;
}

/* Progressive beige tint — hand-picked hex values that hold the warm
   yellow hue all the way down. (oklch-mixing with black gave an
   achromatic-gray that read as red-brown against the page.) Each step
   is ~6-8% darker than the one in front of it; the page bg is
   #F8F5EE (--paper) and pos=1 is the first noticeable step beneath it. */
body[data-project="amway"] .carousel-card[data-pos="1"] {
  transform: translate(18px, 12px) scale(0.97) rotate(1.5deg);
  z-index: 9;
  opacity: 1;
}
body[data-project="amway"] .carousel-card[data-pos="1"]::after {
  background: #E8DEC6;
}

body[data-project="amway"] .carousel-card[data-pos="2"] {
  transform: translate(36px, 24px) scale(0.94) rotate(3deg);
  z-index: 8;
  opacity: 1;
}
body[data-project="amway"] .carousel-card[data-pos="2"]::after {
  background: #DAC9A8;
}

body[data-project="amway"] .carousel-card[data-pos="3"] {
  transform: translate(54px, 36px) scale(0.91) rotate(4.5deg);
  z-index: 7;
  opacity: 1;
}
body[data-project="amway"] .carousel-card[data-pos="3"]::after {
  background: #CAB58A;
}

body[data-project="amway"] .carousel-card[data-pos="4"] {
  transform: translate(72px, 48px) scale(0.88) rotate(6deg);
  z-index: 6;
  opacity: 1;
}
body[data-project="amway"] .carousel-card[data-pos="4"]::after {
  background: #B79F6D;
}

/* Sixth card in the stack — was missing before, leaving its image
   showing through with no tint. Now sits as the deepest beige. */
body[data-project="amway"] .carousel-card[data-pos="5"] {
  transform: translate(90px, 60px) scale(0.85) rotate(7.5deg);
  z-index: 5;
  opacity: 1;
}
body[data-project="amway"] .carousel-card[data-pos="5"]::after {
  background: #A28851;
}

body[data-project="amway"] .carousel-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
body[data-project="amway"] .carousel-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
body[data-project="amway"] .carousel-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
  max-width: 22ch;
}
body[data-project="amway"] .carousel-desc {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 50ch;
  margin: 0;
}

body[data-project="amway"] .carousel-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
body[data-project="amway"] .carousel-controls button {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms, transform 150ms;
  padding: 0;
}
body[data-project="amway"] .carousel-controls button:hover {
  color: var(--ink-soft);
  transform: translateY(-1px);
}
body[data-project="amway"] .carousel-controls button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
body[data-project="amway"] .carousel-counter {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-left: 6px;
}

@media (max-width: 760px) {
  body[data-project="amway"] .suite-carousel {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body[data-project="amway"] .carousel-card[data-pos="1"] { transform: translate(16px, 10px) scale(0.96) rotate(2deg); }
  body[data-project="amway"] .carousel-card[data-pos="2"] { transform: translate(32px, 20px) scale(0.92) rotate(4deg); }
  body[data-project="amway"] .carousel-card[data-pos="3"] { transform: translate(48px, 30px) scale(0.88) rotate(6deg); }
  body[data-project="amway"] .carousel-card[data-pos="4"] { transform: translate(64px, 40px) scale(0.84) rotate(8deg); }
  body[data-project="amway"] .carousel-card[data-pos="5"] { transform: translate(80px, 50px) scale(0.80) rotate(10deg); }
}

/* =========================================================
   AMWAY · STATUS TABLE (Carbon Design System inspired)
   Replaces the inline figure in chapter 3 ("Data-heavy by design").
   Shows recommendation models with Carbon-style status pills.
   ========================================================= */

body[data-project="amway"] .amway-status-table {
  margin: 40px 0;
  border: 1px solid var(--ink-faintest);
  overflow: hidden;
}
body[data-project="amway"] .status-table-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 14px 20px;
  border-bottom: 1px solid var(--ink-faintest);
  background: var(--paper-warm);
}
body[data-project="amway"] .status-table-title {
  font-weight: 500;
}
body[data-project="amway"] .status-table-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-2);
}
body[data-project="amway"] .filter-glyph {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--ink-soft);
}
body[data-project="amway"] .amway-status-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-feature-settings: "tnum" 1;
}
body[data-project="amway"] .amway-status-table thead {
  background: color-mix(in oklch, var(--paper-warm) 60%, transparent);
  border-bottom: 1px solid var(--ink-faintest);
}
body[data-project="amway"] .amway-status-table th {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
}
body[data-project="amway"] .amway-status-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink-faintest);
  vertical-align: middle;
}
body[data-project="amway"] .amway-status-table tbody tr:last-child td {
  border-bottom: 0;
}
body[data-project="amway"] .amway-status-table tbody tr:hover {
  background: color-mix(in oklch, var(--paper-warm) 40%, transparent);
}
body[data-project="amway"] .amway-status-table td strong {
  color: var(--ink);
  font-weight: 600;
}

/* Header sort + filter affordances */
body[data-project="amway"] .header-glyph {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  vertical-align: middle;
  color: var(--ink-soft);
  opacity: 0.45;
  transition: opacity 120ms ease;
}
body[data-project="amway"] .amway-status-table th:hover .header-glyph {
  opacity: 0.85;
}
body[data-project="amway"] .header-glyph.header-sort-active {
  opacity: 1;
  color: var(--ink);
}

/* Status indicator — icon + label, no chip background (Carbon-inspired) */
body[data-project="amway"] .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1.2;
  background: transparent;
}
body[data-project="amway"] .status-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}
/* Status variants — text reads in ink, icon carries the semantic color */
body[data-project="amway"] .status-active,
body[data-project="amway"] .status-testing,
body[data-project="amway"] .status-paused,
body[data-project="amway"] .status-failed,
body[data-project="amway"] .status-archived {
  color: var(--ink-2);
}
body[data-project="amway"] .status-active .status-icon { color: #24a148; }
body[data-project="amway"] .status-testing .status-icon { color: #0f62fe; }
body[data-project="amway"] .status-paused .status-icon { color: #f1c21b; }
body[data-project="amway"] .status-failed .status-icon { color: #da1e28; }
body[data-project="amway"] .status-archived .status-icon { color: var(--ink-soft); }

@media (max-width: 760px) {
  body[data-project="amway"] .amway-status-table {
    overflow-x: auto;
  }
  body[data-project="amway"] .amway-status-table table {
    min-width: 640px;
  }
}

/* Product list — used in chapter 2 to enumerate the suite of tools */
body[data-project="amway"] .product-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 16px;
  border-top: 1px solid var(--ink-faintest);
}
body[data-project="amway"] .product-list li {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-faintest);
}
body[data-project="amway"] .product-list li strong {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: inline-block;
  margin-right: 8px;
}

/* 5-col fact ribbon for spaces specifically (Surfaces cell removed; 5 cells total) */
body[data-project="spaces"] .fact-ribbon {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 900px) {
  body[data-project="spaces"] .fact-ribbon {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  body[data-project="spaces"] .fact-ribbon {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Chapter 1 clutter figure: full-width inside chapter body, bare image
   showing one of the inherited admin screenshots. Replaces the earlier
   vertical-split (which assumed a vertical mock; chapter 1 now uses a
   wide horizontal admin clutter shot instead). */
body[data-project] .ch1-clutter {
  margin: 40px 0;
}
body[data-project] .ch1-clutter img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--ink-faintest);
}
body[data-project] .ch1-clutter figcaption {
  margin-top: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  text-wrap: pretty;
}
body[data-project] .ch1-clutter__tag {
  display: inline-block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--ink-faintest);
  padding: 3px 8px;
  margin-right: 10px;
  vertical-align: 2px;
}

/* Vertical-split: chapter 1's vertical mockup alongside prose */
body[data-project] .vertical-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(32px, 5vw, 56px);
  margin: 40px 0;
  align-items: start;
}
body[data-project] .vertical-split .vs-fig { margin: 0; }
body[data-project] .vertical-split .vs-fig img {
  width: 100%; height: auto; display: block; border-radius: 4px;
}
body[data-project] .vertical-split .vs-prose p {
  font-family: var(--serif);
  font-size: 18px; line-height: 1.55; color: var(--ink-2);
  margin: 0 0 16px;
}
body[data-project] .vertical-split .vs-prose p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  body[data-project] .vertical-split {
    grid-template-columns: 1fr; gap: 24px;
  }
  body[data-project] .vertical-split .vs-fig img { max-width: 320px; }
}

/* Square-highlight: chapter 2's balanced detail callout. No background or
   border — image and text float in the prose flow, structure carried by
   the grid alone. */
body[data-project] .square-highlight {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(32px, 5vw, 48px);
  align-items: center;
  padding: clamp(28px, 4vw, 40px) 0;
  background: transparent;
  border: 0;
  margin: 40px 0;
}
body[data-project] .square-highlight .sq-fig {
  margin: 0; aspect-ratio: 1/1; overflow: hidden;
}
body[data-project] .square-highlight .sq-fig img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
body[data-project] .square-highlight h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15;
  font-weight: 400; margin: 0 0 12px;
}
body[data-project] .square-highlight h3 em {
  font-style: italic; color: var(--case-accent);
}
body[data-project] .square-highlight p {
  font-family: var(--serif);
  font-size: 17px; line-height: 1.5; color: var(--ink-2); margin: 0;
}
@media (max-width: 760px) {
  body[data-project] .square-highlight {
    grid-template-columns: 1fr; gap: 24px;
  }
}

/* Cinematic-break: ultra-wide V2.0 reveal between chapters 2 and 3.
   No dark band, no eyebrow label — just the picture and the caption,
   so the photograph carries the moment on its own. */
body[data-project] .cinematic-break {
  margin: clamp(64px, 8vw, 112px) calc(50% - 50vw);
  padding: 0 clamp(32px, 5vw, 56px);
  background: transparent;
}
body[data-project] .cinematic-break .cb-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center; margin: 0 0 24px;
}
body[data-project] .cinematic-break .cb-fig {
  max-width: 1600px; margin: 0 auto;
  aspect-ratio: auto;
  border-radius: 4px;
  overflow: visible;
}
body[data-project] .cinematic-break .cb-fig img {
  width: 100%; height: auto;
  object-fit: contain; display: block;
  background: transparent;
}
body[data-project] .cinematic-break .cb-caption {
  font-family: var(--serif);
  font-style: italic; font-size: 17px; line-height: 1.5;
  color: var(--ink-2); text-align: center; max-width: 56ch; margin: 24px auto 0;
}
@media (max-width: 760px) {
  body[data-project] .cinematic-break {
    padding: 48px 16px; margin: 56px 0;
  }
  body[data-project] .cinematic-break .cb-fig { aspect-ratio: 16/9; }
}

/* Multi-shape-grid: chapter 3's varied-aspect figure rhythm */
body[data-project] .multi-shape-grid {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1.3fr;
  gap: 16px;
  margin: 40px 0;
  align-items: end;
}
body[data-project] .multi-shape-grid .msg-fig { margin: 0; }
body[data-project] .multi-shape-grid .msg-fig img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px;
}
body[data-project] .multi-shape-grid .msg-fig.square { aspect-ratio: 1/1; }
body[data-project] .multi-shape-grid .msg-fig.vertical { aspect-ratio: 4/5; }
body[data-project] .multi-shape-grid .msg-fig.horizontal { aspect-ratio: 3/2; }
@media (max-width: 760px) {
  body[data-project] .multi-shape-grid {
    grid-template-columns: 1fr; gap: 12px;
  }
  body[data-project] .multi-shape-grid .msg-fig.vertical img {
    max-height: 480px; object-fit: contain;
  }
}

/* =========================================================
   FAVO · SIGNATURE COMPOSITIONS — chapter 2 brand-comparison
   pair (the wordmark side-by-side, A-treatment) + the Aiyu
   archive strip (4-up retired-artifacts grid, D-treatment).
   Both are scoped to body[data-project="favo"] only. Per
   favo.DESIGN.md § Components.
   ========================================================= */

/* 5-col fact-ribbon for favo (matches spaces — Stack row removed) */
body[data-project="favo"] .fact-ribbon {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 900px) {
  body[data-project="favo"] .fact-ribbon { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  body[data-project="favo"] .fact-ribbon { grid-template-columns: repeat(2, 1fr); }
}

/* Brand-comparison — wordmark pair, static, with a small connector
   between them so the relationship reads as "Aiyu became Favo" rather
   than as two unrelated marks placed near each other. The Aiyu mark
   anchors toward the centre (right-aligned within its column), the
   connector sits in the middle, the Favo mark anchors toward the
   centre from the other side (left-aligned within its column). */
body[data-project="favo"] .brand-comparison {
  display: grid;
  /* auto-sized columns — each cell hugs its content. The single `gap`
     value becomes the only visual separator between the three blocks,
     so the Aiyu→arrow distance and the arrow→Favo distance are equal
     by construction (no asymmetry from oversized parent columns). */
  grid-template-columns: auto auto auto;
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(40px, 5vw, 72px) 0;
  align-items: center;
  /* Block sits naturally at the left edge of the chapter body —
     matches the figure below without needing an explicit width %. */
  justify-content: start;
  margin: 24px 0;
}
body[data-project="favo"] .brand-comparison .bc-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Pull quote loses the left rule-bar — the italic display type and
   the whitespace around it carry the emphasis on their own (matches
   the discipline used in amway). */
body[data-project="favo"] .chapter__body > .pull {
  border-left: 0;
  padding-left: 0;
}

/* Hide chapter kicker label below the chapter numeral — the chapter
   title carries the narrative, the numeral carries the rhythm, the
   kicker is redundant. (Matches the discipline used in amway.) */
body[data-project="favo"] .chapter__kicker,
body[data-project="spaces"] .chapter__kicker {
  display: none;
}
body[data-project="favo"] .brand-comparison .bc-mark {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 96px;
  max-height: 200px;
}
body[data-project="favo"] .brand-comparison .bc-mark img {
  max-height: 128px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Aiyu and Favo logo files have very different content-to-frame ratios:
   the Aiyu circle nearly fills its 278x278 frame, while the Favo hexagon
   sits with substantial padding inside the same frame. To balance visual
   weight, scale Favo's render larger so its hexagon reads at roughly the
   same on-page size as the Aiyu circle. */
body[data-project="favo"] .brand-comparison .bc-side--from .bc-mark img {
  max-height: 112px;
}
body[data-project="favo"] .brand-comparison .bc-side--to .bc-mark img {
  max-height: 192px;
}
/* Arrow + caption between the two marks. Quiet ink-faint colour, mono
   caption in the editorial timestamp register — same vocabulary the
   page uses for archival markers. */
body[data-project="favo"] .brand-comparison .bc-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink-faint);
}
body[data-project="favo"] .brand-comparison .bc-arrow__svg {
  width: clamp(48px, 6vw, 72px);
  height: auto;
  display: block;
  color: var(--ink-faint);
}
body[data-project="favo"] .brand-comparison .bc-arrow__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
@media (max-width: 720px) {
  /* Stack vertically on mobile; the arrow rotates to point down. */
  body[data-project="favo"] .brand-comparison {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  body[data-project="favo"] .brand-comparison .bc-side--from,
  body[data-project="favo"] .brand-comparison .bc-side--to {
    align-items: center;
  }
  body[data-project="favo"] .brand-comparison .bc-side--from .bc-mark,
  body[data-project="favo"] .brand-comparison .bc-side--to .bc-mark {
    justify-content: center;
  }
  body[data-project="favo"] .brand-comparison .bc-arrow__svg {
    transform: rotate(90deg);
    width: 48px;
  }
}

/* Bleed-aside — a 2-column block where the image sits to the left
   (bleeding -4rem toward the rail column for visual continuity with
   the chapter rail) and a single accompanying paragraph sits to the
   right, vertically centered. The block is sandwiched between
   full-width prose paragraphs above and below — paragraph, image+P,
   paragraph again. Used in chapter 1 (me-aiyu) and chapter 3
   (favo-lider). */
body[data-project="favo"] .bleed-aside {
  display: grid;
  grid-template-columns: clamp(220px, 32%, 340px) 1fr;
  gap: 32px;
  align-items: center;
  margin: 8px 0;
}
body[data-project="favo"] .bleed-aside .bleed-aside__img {
  margin-left: -4rem;
}
body[data-project="favo"] .bleed-aside img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  /* iOS / Android touch hardening — no image preview menu */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
body[data-project="favo"] .bleed-aside p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 44ch;
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 760px) {
  body[data-project="favo"] .bleed-aside {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  body[data-project="favo"] .bleed-aside .bleed-aside__img {
    margin-left: 0;
  }
}

/* Aiyu archive — 4-up grid of retired Aiyu artifacts. Each tile
   is a paper-warm square with a hairline border, the artifact image
   contained inside with padding so the image floats off the tile bg,
   and a small mono RETIRED · 2020 caption below. */
body[data-project="favo"] .aiyu-archive {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 32px 0 40px;
}
body[data-project="favo"] .aiyu-archive .aa-tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body[data-project="favo"] .aiyu-archive .aa-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  background: var(--paper-warm);
  border: 1px solid var(--ink-faintest);
  padding: 16px;
  /* iOS / Android touch hardening — no image preview menu */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
body[data-project="favo"] .aiyu-archive .aa-tile figcaption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}
@media (max-width: 960px) {
  body[data-project="favo"] .aiyu-archive { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  body[data-project="favo"] .aiyu-archive { grid-template-columns: 1fr; gap: 16px; }
}

/* Favo's chapter-3 lead figure aligns flush-left with the body text
   (matches the pattern set in amway). The --right variant also
   left-aligns for the in-hand internal-tools shot. */
body[data-project="favo"] .v2-fig--lead img,
body[data-project="favo"] .v2-fig--right img { grid-column: 1 / span 9; }

/* =========================================================
   library / books page  (books.html)
   Editorial grid of books per category. Books rest spine-out
   (rotateY -85deg, transform-origin right edge); hover opens
   to cover (rotateY -8deg, lift). Click opens native <dialog>.
   3D vocabulary lifted from claude.ai/design bundle's
   bookshelf.html, adapted to: wrapped flex (no horizontal scroll),
   numbered category sections (matching index.html rhythm),
   hairline ledge instead of wood plank, native <dialog> instead
   of div-overlay, no backdrop blur (no glassmorphism slop).
   ========================================================= */
body[data-page="library"] { background: var(--paper); }
.library-page { min-height: 60vh; padding: 0 0 96px; }

/* ---------- masthead ---------- */
.library-head {
  padding: 88px 0 40px;
  position: relative;
}
.library-crumbs {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 28px;
}
.library-crumbs a { color: var(--ink-soft); text-decoration: none; transition: color var(--m-fast); }
.library-crumbs a:hover { color: var(--accent); }
.library-crumbs .sep { color: var(--ink-faintest); }
.library-title-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px;
  align-items: end;
}
.library-h1 {
  font-family: var(--serif);
  font-size: clamp(56px, 8vw, 116px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
.library-h1 em { font-style: italic; color: var(--accent); font-weight: 400; }
.library-blurb {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
  border-left: 1px solid var(--rule);
  padding-left: 28px;
  margin: 0;
}
.library-blurb em { font-style: italic; color: var(--accent); }

/* ---------- shelf section ---------- */
.shelf {
  padding: 64px 0 0;
}
.shelf + .shelf { padding-top: 56px; }

/* shelf section uses two layout states (data-state attribute):
     collapsed → single horizontal-scroll row driven by Embla
     expanded  → multi-row wrapped grid, Embla destroyed
   The + / − toggle in shelf-head flips between them. */

.shelf-head {
  display: grid;
  grid-template-columns: 80px 1fr auto 32px;
  gap: 28px;
  align-items: center;
  margin-bottom: 16px;
}
/* short hairline anchored at the LEFT of every shelf-head, vertically
   centered with the title's text height (align-items:center on the
   parent puts every cell at the row's vertical center). */
.shelf-rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}
.shelf-title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
}

/* + / − toggle button on the right of every shelf-head. Default
   state shows '+' (expand the books to a multi-row grid); when
   the section is data-state="expanded", shows '−' (collapse back
   to a single horizontal-scroll row). */
.shelf-toggle {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-faint);
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 1;
  user-select: none;
  align-self: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--m-fast);
}
.shelf-toggle::before { content: '+'; }
.shelf[data-state="expanded"] .shelf-toggle::before { content: '\2013'; }   /* en-dash */
.shelf-toggle:hover { color: var(--ink); }
.shelf-toggle:focus { outline: none; }
.shelf-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* expanded state — books wrap into a multi-row grid, Embla is
   destroyed externally so the container's inline transform is gone
   and normal flex-wrap layout applies. The viewport is no longer a
   draggable surface, so cursor and overflow revert. */
.shelf[data-state="expanded"] .shelf-grid {
  overflow: visible;
  cursor: auto;
  user-select: auto;
}
.shelf[data-state="expanded"] .embla__container {
  flex-wrap: wrap;
  row-gap: 24px;
  /* line up to the left edge so wrapped rows pack flush; books
     within a row stay baseline-aligned via align-items:flex-end. */
  justify-content: flex-start;
}
.shelf-title em { font-style: italic; color: var(--accent); font-weight: 400; }
.shelf-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: right;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shelf-meta .v { color: var(--ink); }
.shelf-meta-sub { text-transform: none; letter-spacing: 0.04em; font-style: italic; font-family: var(--serif); font-size: 13px; color: var(--ink-soft); }

/* ---------- shelf grid → Embla Carousel viewport ----------
   Each .shelf-grid is the Embla viewport (overflow:hidden so Embla
   can translate the inner .embla__container freely). The container
   is the flex row of books; each .book-items is a slide. KKEdXOa
   inner book CSS (main-book-wrap > book-cover > book-inside +
   book-image > effect + light) is unchanged below. */
.shelf-grid-wrap { position: relative; }
.shelf-grid {
  overflow: hidden;
  padding: 24px 0 32px;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.shelf-grid:active { cursor: grabbing; }
.shelf-grid .embla__container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 8px;
  /* Embla translates this element via transform: translate3d, so it
     handles overflow itself — no need for overflow: auto here. */
  touch-action: pan-y pinch-zoom;
}

/* ---------- single book — KKEdXOa "3D Book Flip Cover" by realvjy ----
   Class names + visual structure mirror the pen exactly; values
   adapted to the portfolio's parchment + ink palette so the white +
   grey page-stack inset shadow blends with the cream canvas. */
.book-items {
  position: relative;
  cursor: pointer;
  padding: 16px;
  margin: 0;
  display: grid;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  min-height: 320px;
  align-items: end;
  font: inherit;
  color: inherit;
}
.book-items:focus { outline: none; }
.book-items:focus-visible .book-image {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.main-book-wrap {
  position: relative;
  width: var(--cw, 187px);
  height: var(--bh, 280px);
}

.book-cover {
  position: relative;
  width: 100%;
  height: 100%;
}

/* book-inside — the page-stack panel that sits behind the cover.
   The multi-stop inset box-shadow paints alternating cream / mute
   1px stripes on the right edge that read as the visible page-edges
   of a closed book (vertical lines). Recoloured from the pen's
   white/grey to the portfolio's parchment tones. */
.book-cover .book-inside {
  position: absolute;
  width: 90%;
  height: 96%;
  top: 1%;
  left: 16px;
  border: 1px solid var(--ink-faintest);
  border-radius: 2px 6px 6px 2px;
  background: var(--paper);
  box-shadow:
    10px 40px 40px -10px rgba(26, 24, 21, 0.20),
    inset -2px 0 0 var(--ink-faintest),
    inset -3px 0 0 var(--paper-deep),
    inset -4px 0 0 var(--paper),
    inset -5px 0 0 var(--paper-deep),
    inset -6px 0 0 var(--paper),
    inset -7px 0 0 var(--paper-deep),
    inset -8px 0 0 var(--paper),
    inset -9px 0 0 var(--paper-deep);
}

/* book-image — the cover. At rest, tilted -15° on Y, shifted left
   and slightly squished, so the right-edge page-stack peeks out
   from behind. On hover the cover snaps flat (rotateY 0, full
   width) to face the viewer head-on. */
.book-cover .book-image {
  line-height: 0;
  position: relative;
  border-radius: 2px 6px 6px 2px;
  box-shadow:
    6px 6px 18px -2px rgba(0, 0, 0, 0.2),
    24px 28px 40px -6px rgba(0, 0, 0, 0.1);
  transition: all 300ms ease-in-out;
  transform: perspective(2000px) rotateY(-15deg) translateX(-10px) scaleX(0.94);
  cursor: pointer;
}
.book-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px 6px 6px 2px;
}
.book-items:hover .book-image,
.book-items:focus-visible .book-image {
  transform: perspective(2000px) rotateY(0deg) translateX(0px) scaleX(1);
  transform-style: preserve-3d;
  box-shadow:
    6px 6px 12px -1px rgba(0, 0, 0, 0.1),
    20px 14px 16px -6px rgba(0, 0, 0, 0.1);
}

/* effect — narrow gradient strip at the spine/binding edge */
.effect {
  position: absolute;
  width: 20px;
  height: 100%;
  margin-left: 16px;
  top: 0;
  border-left: 2px solid rgba(0, 0, 0, 0.06);
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  transition: all 500ms ease;
  z-index: 5;
}
.book-items:hover .effect { margin-left: 14px; }

/* light — soft sheen on the cover's right side */
.light {
  width: 90%;
  height: 100%;
  position: absolute;
  border-radius: 3px;
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
  top: 0;
  right: 0;
  opacity: 0.1;
  transition: all 500ms ease;
  z-index: 4;
}

/* ---------- detail dialog ---------- */
.book-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  width: min(900px, 92vw);
  max-height: 84vh;
  overflow: visible;
}
.book-dialog::backdrop {
  background: rgba(26, 24, 21, 0.55);
}
.book-dialog[open] {
  animation: book-dialog-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes book-dialog-in {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.book-dialog-form {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  /* the one earned shadow on this page — editorial poster offset,
     not chrome blur. Ink-tinted, not raw black, per the editorial
     elevation strategy in DESIGN.md. */
  box-shadow:
    18px 18px 0 var(--accent),
    0 18px 40px color-mix(in oklch, var(--ink) 24%, transparent);
  overflow: auto;
  max-height: 84vh;
}
.book-dialog-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
}
.book-dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  color: var(--ink);
  transition: background var(--m-fast), color var(--m-fast);
}
.book-dialog-close:hover { background: var(--ink); color: var(--paper); }
.book-dialog-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.book-dialog-pic {
  background: var(--paper-deep);
  border-right: 1px solid var(--rule);
  padding: 36px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-dialog-pic img {
  width: 100%;
  max-width: 240px;
  display: block;
  border: 1px solid var(--rule);
}

.book-dialog-body {
  padding: 36px 36px 32px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.book-dialog-cat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.book-dialog-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
.book-dialog-title em { font-style: italic; color: var(--accent); }
.book-dialog-author {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.book-dialog-blurb {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
  max-width: 60ch;
}
.book-dialog-blurb em { font-style: italic; color: var(--accent); }
.book-dialog-why {
  border-top: 1px solid var(--ink-faintest);
  padding-top: 14px;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.book-dialog-why strong {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 6px;
  font-weight: 400;
}
.book-dialog-why em { font-style: italic; color: var(--accent); }
.book-dialog-meta {
  margin: 14px 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- prefers-reduced-motion ----------
   Static fallback: skip the cover's rotation animation. At rest the
   book-image still uses the -15° transform (it's a static visual
   cue, not motion); on hover it snaps to flat without easing. The
   dialog opens without scale-in. */
@media (prefers-reduced-motion: reduce) {
  .book-cover .book-image,
  .effect,
  .light {
    transition: none;
  }
  .book-dialog[open] { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .library-title-grid { grid-template-columns: 1fr; gap: 28px; }
  .library-blurb { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; }
  .book-dialog-grid { grid-template-columns: 1fr; }
  .book-dialog-pic { border-right: 0; border-bottom: 1px solid var(--rule); padding: 28px; }
  .book-dialog-pic img { max-width: 200px; }
  .book-dialog-body { padding: 28px 24px 24px; }
}
@media (max-width: 760px) {
  .library-head { padding: 64px 0 32px; }
  .shelf-head {
    grid-template-columns: 40px 1fr 32px;
    gap: 12px 14px;
  }
  .shelf-rule { grid-column: 1; grid-row: 1; }
  .shelf-title { grid-column: 2; grid-row: 1; }
  .shelf-toggle { grid-column: 3; grid-row: 1; }
  .shelf-meta { grid-column: 1 / -1; text-align: left; flex-direction: row; gap: 10px; align-items: baseline; }
  .shelf-meta-sub { font-size: 12px; }
  .book-dialog { width: 96vw; }
  .book-dialog-form { box-shadow: 8px 8px 0 var(--accent), 0 12px 28px rgba(0,0,0,0.28); }
}