/* Beth Chappell — portfolio redesign
   Identity: "Discernment made visible" (Visual Identity Field Guide)
   Field: warm near-black + warm parchment. Signal: olive, once per section.
   Trace: ghosted prior states, crossed-out options, dotted paths. */

@font-face {
  font-family: "HauteCouture";
  src: url("assets/HauteCouture.otf") format("opentype");
  font-display: swap;
}

:root {
  --ink: #0D0D0B;
  --ink-2: #171714;
  --ink-3: #23231F;
  --ink-4: #34342E;
  --cream: #EFE6D5;
  --cream-2: #E1D5C3;
  --cream-3: #D0C2AD;
  --cream-4: #B9AA93;
  --olive: #8F9163;
  --olive-deep: #5F623E;
  --link-green: #93A187;  /* headline and feature links */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hand: "HauteCouture", "Segoe Script", cursive;

  --max: 1320px;
  /* Line measure. Body text reads at --measure; the lede at --measure-lede.
     Headings and callouts take the width of the text they sit with. */
  --measure: 38rem;
  --measure-lede: 44rem;
  --gutter: clamp(20px, 4vw, 56px);
  --rail: 196px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* default field = dark; sections override */
  --field: var(--ink);
  --fg: var(--cream);
  --fg-muted: #B3A891;
  --fg-faint: #7E7663;
  --ghost: rgba(239, 230, 213, .38);
  --rule: rgba(239, 230, 213, .16);
  --rule-strong: rgba(239, 230, 213, .34);
  --plate: var(--ink-2);
  --signal: var(--olive);
}

.field-dark {
  --field: var(--ink);
  --fg: var(--cream);
  --fg-muted: #B3A891;
  --fg-faint: #7E7663;
  --ghost: rgba(239, 230, 213, .38);
  --rule: rgba(239, 230, 213, .16);
  --rule-strong: rgba(239, 230, 213, .34);
  --plate: var(--ink-2);
  --signal: var(--olive);
  --link-green: #93A187;
  background: var(--field);
  color: var(--fg);
}

.field-light {
  --field: var(--cream);
  --fg: var(--ink);
  --fg-muted: #5E5A4C;
  --fg-faint: #8C8571;
  --ghost: rgba(13, 13, 11, .40);
  --rule: rgba(13, 13, 11, .16);
  --rule-strong: rgba(13, 13, 11, .34);
  --plate: var(--cream-2);
  --signal: var(--olive-deep);
  --link-green: #748566;  /* #93A187 deepened to 3.2:1 on cream */
  background: var(--field);
  color: var(--fg);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
h1, h2, h3, h4, p, dl, dd, dt, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Text selection: deep olive with cream text, one pair for every field.
   Text on highlight 5.1:1; highlight vs cream page 5.1:1, vs dark page 3.1:1.
   Literal colors on purpose: custom properties are unreliable inside ::selection. */
::selection { background-color: #5F623E; color: #EFE6D5; text-shadow: none; }
svg ::selection { fill: #EFE6D5; }

[id] { scroll-margin-top: 96px; }  /* anchor jumps land below the pinned header */

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type roles ----------
   Fluid sizes reach their cap by roughly a 1320px window (--max). Past that,
   type stops growing and the extra width becomes margin. */
.display {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  letter-spacing: -.015em;
  line-height: 1.02;
  text-wrap: balance;
}
.statement {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  letter-spacing: -.01em;
  line-height: 1.12;
  text-wrap: balance;
}
.eyebrow {
  font: 500 12px/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.meta {
  font: 400 13.5px/1.45 var(--sans);
  letter-spacing: .02em;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.lede {
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.5;
  max-width: var(--measure-lede);
}
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }
.prose em { font-family: var(--serif); font-style: italic; font-size: 1.06em; }
.muted { color: var(--fg-muted); }
.hand {
  font-family: var(--hand);
  font-size: 30px;
  line-height: 1;
  color: var(--signal);
  letter-spacing: .01em;
}

/* Links that behave like index entries */
.idx {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding-block: 12px;
  border-top: 1px solid var(--rule-strong);
  font: 500 14px/1.3 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.idx .arrow { font-family: var(--serif); font-size: 18px; line-height: 1; transition: transform .35s var(--ease); }
.idx:hover { border-color: var(--signal); color: var(--signal); }
.idx:hover .arrow { transform: translateX(4px); }
.idx.down:hover .arrow { transform: translateY(4px); }
.inline-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color .3s var(--ease);
}
.inline-link:hover { text-decoration-color: var(--signal); }

/* ---------- Header / footer ---------- */
.site-head {
  border-bottom: 1px solid var(--rule);
}
.site-head > .wrap {
  display: grid;
  grid-template-columns: var(--rail) 1fr auto;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 24;
}
.site-nav { display: flex; gap: 28px; }
.site-nav a, .site-head .cta {
  font: 500 13px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color .3s var(--ease);
}
.site-nav a:hover, .site-head .cta:hover { color: var(--fg); }
.site-head .cta { color: var(--fg); border-bottom: 1px solid var(--rule-strong); padding-bottom: 4px; }
.site-head .cta:hover { border-color: var(--signal); }

.site-head {
  position: sticky; top: 0; z-index: 50;
  transition: transform .4s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
/* slide away while reading down; come back on the way up (never while the menu is open) */
:root.nav-past.nav-hidden:not(.menu-open) .site-head { transform: translateY(-100%); }
/* the scroll lock for the open menu stops sticky from working, so pin the header outright */
.menu-open .site-head { position: fixed; top: 0; left: 0; right: 0; transform: none; }

/* Back-to-top tab: hangs from the centre of the header once you are past the top */
.to-top {
  position: absolute; left: 50%; bottom: 0; z-index: 3;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: var(--field); color: var(--fg); cursor: pointer;
  transform: translate(-50%, 50%) scale(.6); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .45s var(--ease), background-color .35s var(--ease);
}
.to-top svg { display: block; overflow: visible; }
.to-top .tt-track { fill: var(--field); stroke: var(--rule-strong); stroke-width: 1; transition: fill .35s var(--ease); }
.to-top .tt-progress { fill: none; stroke: var(--olive); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 20px 20px; transition: stroke-dashoffset .15s linear; }
.to-top .tt-chevron { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
:root.nav-past:not(.nav-hidden):not(.menu-open) .to-top { opacity: 1; pointer-events: auto; transform: translate(-50%, 50%); }
.to-top:hover .tt-chevron, .to-top:focus-visible .tt-chevron { transform: translateY(-2.5px); }
.to-top:hover .tt-track { stroke: var(--olive); }
.to-top:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .site-head, .to-top, .to-top * { transition: none !important; } }
.site-head > .wrap { position: relative; z-index: 2; }
.brand { display: flex; align-items: center; gap: 2px; min-width: 0; }
.menu-toggle {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  margin: 0 0 0 -4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: color .3s var(--ease);
}
.menu-toggle svg { transition: transform .45s var(--ease); }
.menu-toggle:hover, .menu-open .menu-toggle { color: var(--signal); }
.menu-open .menu-toggle svg { transform: rotate(180deg); }
.menu-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: -4px; }
.menu-panel { display: none; }

.site-foot { padding-block: 72px 40px; }
.site-foot .wrap { display: grid; grid-template-columns: var(--rail) 1fr; gap: 32px 48px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 32px; }
.foot-end { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* ---------- Sections with a rail ---------- */
.sec { padding-block: clamp(56px, 8vw, 112px); }
.sec .wrap {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 28px 48px;
  align-items: start;
}
.sec .wrap > hr { grid-column: 1 / -1; }
.rail {
  position: sticky;
  top: 100px;  /* clears the pinned header */
  display: grid;
  gap: 10px;
}
.rail .eyebrow { color: var(--fg); }
.rail .q {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.35;
  color: var(--fg-muted);
  max-width: 18ch;
}
.body { min-width: 0; }
.sec-title {
  font-size: clamp(30px, 3vw, 40px);
  max-width: none;  /* section headlines span the content they introduce */
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* ---------- Plates (photography) ---------- */
.plate {
  position: relative;
  background: var(--plate);
  overflow: hidden;
}
.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.plate.ratio-43 { aspect-ratio: 4 / 3; }
.plate.ratio-34 { aspect-ratio: 3 / 4; }
.plate.ratio-32 { aspect-ratio: 3 / 2; }
.plate.ratio-11 { aspect-ratio: 1 / 1; }
/* ---------- Snapshot prints (About reel, Contact stack) ----------
   A photo on a paper border with a slight tilt; straightens and lifts on hover. */
/* tilt follows the scroll directly (no easing, so it never lags); only the hover lift eases */
.snap { --h: clamp(200px, 22vw, 290px); flex: none; rotate: var(--tilt, 0deg); transition: translate .4s var(--ease), scale .4s var(--ease); }
.snap figure { width: min-content; background: #FBF7EF; padding: 10px 10px 0; box-shadow: 0 1px 2px rgba(13,13,11,.08), 0 10px 28px -12px rgba(13,13,11,.28); }
.snap-img { height: var(--h); overflow: hidden; background: var(--cream-4); }
.snap.p45 .snap-img { width: calc(var(--h) * .8); }
.snap.p11 .snap-img { width: var(--h); }
.snap.p43 .snap-img { width: calc(var(--h) * 4 / 3); }
.snap.p34 .snap-img { width: calc(var(--h) * .75); }
.snap-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(.97); transition: filter .5s var(--ease); }
.snap figcaption { font: 400 clamp(17px, 1.4vw, 20px)/1.2 var(--hand); color: #2A2924; padding: 12px 4px 14px; text-align: center; text-wrap: balance; }
.snap:hover { translate: 0 -6px; scale: 1.03; z-index: 1; }
.snap:hover .snap-img img { filter: none; }
@media (prefers-reduced-motion: reduce) { .snap { transition: none; } }
/* a reel of prints you can swipe, drag or nudge with page scroll (snapshots.js) */
.snap-reel { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: 28px 36px; cursor: grab; }
.snap-reel::-webkit-scrollbar { display: none; }
.snapshots.is-dragging .snap-reel { cursor: grabbing; user-select: none; }
.snap-reel:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.snap-reel img { -webkit-user-drag: none; user-select: none; }
.snap-track { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); width: max-content; padding-inline: var(--gutter); }

/* product mockup over a darkened photo: the photo sets the mood, the product sits on top with room to breathe */
.plate.scrim::after { content: ""; position: absolute; inset: 0; background: rgba(8, 8, 8, .9); pointer-events: none; }
.plate .plate-mockup { position: absolute; z-index: 1; inset: 10% 9%; width: 82%; height: 80%; object-fit: contain; }
/* company wordmark centered over a story image */
.plate-logo { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; width: 44%; pointer-events: none;
  -webkit-mask: var(--logo) no-repeat center / contain; mask: var(--logo) no-repeat center / contain; }
.plate-logo.logo-whoop { --logo: url("assets/logo-whoop.png"); aspect-ratio: 600 / 99; background: #FFFFFF; }
.plate-logo.logo-articulate { --logo: url("assets/logo-articulate.svg"); aspect-ratio: 800 / 143; background: #111111; }
/* a mask clips its own shadow, so the shadow lives on a wrapping layer: wide, faint, and warm enough to melt into the image */
.plate-logo-shadow { position: absolute; inset: 0; z-index: 1; pointer-events: none; filter: drop-shadow(0 6px 24px rgba(40,34,28,.34)) drop-shadow(0 1px 3px rgba(40,34,28,.16)); }
/* a soft pool of the image's own tone behind the wordmark, so it reads over busy detail */
.logo-plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.logo-plate.dark::after { background: radial-gradient(ellipse 42% 26% at 50% 50%, rgba(12,13,14,.82), rgba(12,13,14,0) 75%); }
.logo-plate.light::after { background: radial-gradient(ellipse 42% 26% at 50% 50%, rgba(240,239,236,.9), rgba(240,239,236,0) 75%); }
figcaption.meta { margin-top: 10px; display: flex; justify-content: space-between; gap: 16px; }

/* ---------- Ledger (Evidence mode) ---------- */
.ledger { border-top: 1px solid var(--rule-strong); }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.3fr) minmax(96px, .8fr) minmax(70px, .9fr) minmax(110px, .9fr) minmax(180px, 1.4fr);
  gap: 16px 24px;
  align-items: baseline;
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
}
.ledger-head { padding-block: 10px; border-bottom: 1px solid var(--rule); }
.ledger-head span { font: 500 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.ledger-row .label { font: 500 15px/1.35 var(--sans); display: flex; align-items: center; gap: 10px; }
.ledger-row .before,
.ledger-row .after {
  font-family: var(--serif);
  font-variation-settings: "opsz" 36;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger-row .before { color: var(--ghost); font-weight: 300; }
.ledger-row .after { font-weight: 400; }
.ledger-row .before small, .ledger-row .after small { font: 400 12px/1 var(--sans); letter-spacing: .04em; margin-left: 4px; }
.ledger-row .path { position: relative; height: 12px; align-self: center; }
.ledger-row .path::before {
  content: "";
  position: absolute; left: 0; right: 10px; top: 50%;
  height: 2px;
  background-image: radial-gradient(circle, var(--ghost) 1px, transparent 1.3px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  transform-origin: left center;
  transform: scaleX(1);
}
.ledger-row .path::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1px solid var(--ghost); border-right: 1px solid var(--ghost);
  transform: translateY(-50%) rotate(45deg);
}
.ledger-row .note { color: var(--fg-muted); font-size: 14px; line-height: 1.45; }
.ledger-row.signal .after { color: var(--signal); }
.ledger-row.signal .label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal); flex: none;
}
.ledger-row.signal .path::before { background-image: radial-gradient(circle, var(--signal) 1px, transparent 1.3px); }
.ledger-row.signal .path::after { border-color: var(--signal); }

/* path draws in when the row enters view (values are always visible) */
@media (prefers-reduced-motion: no-preference) {
  .ledger-row .path::before { transform: scaleX(0); transition: transform 1.1s var(--ease); }
  .ledger-row .path::after { opacity: 0; transition: opacity .4s var(--ease) .9s; }
  .ledger-row.in .path::before { transform: scaleX(1); }
  .ledger-row.in .path::after { opacity: 1; }
}

/* ---------- Trace: prior state ---------- */
.prior {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ghost);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--signal);
}

/* ---------- Testimonials ---------- */
.voice { display: grid; gap: 14px; }
.voice blockquote {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 20;
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.42;
  text-wrap: pretty;
}
.voice cite { font-style: normal; display: flex; align-items: center; gap: 14px; }
.voice cite b { display: block; font-weight: 600; font-size: 14px; color: var(--fg); }
/* the face of the person speaking, in the same grayscale as the portrait */
.voice .avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--plate); filter: grayscale(1) contrast(.98); }
.voice.lead .avatar { width: 56px; height: 56px; }
.voice .avatar.initials { display: grid; place-items: center; background: none; filter: none; border: 1.5px solid var(--signal); color: var(--signal); font: 500 14px/1 var(--sans); letter-spacing: .06em; }

/* ---------- Navigation state ---------- */
.site-nav a[aria-current="page"] { color: var(--signal); }
.site-nav a[aria-current="page"]:hover { color: var(--signal); }

/* ---------- Page hero (rail + body, optional aside) ---------- */
.page-hero { padding-block: clamp(48px, 7vw, 104px) clamp(48px, 6vw, 80px); }
.page-hero .wrap {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 32px 48px;
  align-items: start;
}
.page-hero.has-aside .wrap { grid-template-columns: var(--rail) minmax(0, 1fr) minmax(220px, 300px); }
.page-hero .rail { position: static; }
.page-hero h1 { font-size: clamp(42px, 5vw, 66px); max-width: 15ch; }
.page-hero h1.long { font-size: clamp(38px, 4.2vw, 56px); max-width: 20ch; }
.page-hero .lede { margin-top: clamp(24px, 3vw, 40px); }
.now { display: grid; gap: 6px; }
.now .eyebrow { color: var(--fg); display: flex; align-items: center; gap: 10px; }
.now .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; }
.now .meta { max-width: 20ch; }
.ctas { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; max-width: 720px; }
.ctas .idx { display: flex; justify-content: space-between; }
.portrait { display: grid; gap: 10px; }
.portrait .plate img { object-position: 50% 18%; filter: grayscale(1) contrast(.98); }

/* ---------- Scope ---------- */
.scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.scope li { padding: 26px 28px 28px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 8px; align-content: start; }
.scope h3 { font: 600 15px/1.3 var(--sans); letter-spacing: .01em; }
.scope p { font-size: 15.5px; line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }

/* ---------- Evidence by role ---------- */
.roles { border-top: 1px solid var(--rule-strong); }
.role {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(0, 1.1fr));
  gap: 20px 28px;
  padding-block: 26px 30px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.role .who { display: grid; gap: 6px; }
.role .who b { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 36; font-size: clamp(21px, 1.8vw, 24px); line-height: 1.15; letter-spacing: -.01em; }
.role .who .meta { margin-top: 2px; }
.role .who .meta { max-width: 22ch; }
.role .who a.inline-link { font-size: 13.5px; }
.role .m-short { display: none; }
.role .role-link { white-space: nowrap; }
.roles .stat { display: grid; gap: 6px; align-content: start; }
.roles .stat .n {
  font-family: var(--serif);
  font-variation-settings: "opsz" 36;
  font-weight: 300;
  font-size: clamp(30px, 2.6vw, 36px);
  line-height: 1;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.roles .stat .n small { font: 400 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; margin-left: 5px; }
.roles .stat .l { font-size: 14px; line-height: 1.45; color: var(--fg-muted); max-width: 26ch; text-wrap: pretty; }
.roles .stat .prior-n {
  font-family: var(--serif); font-weight: 300; color: var(--fg-muted);
  font-size: .6em; letter-spacing: 0;
}
.source-note { margin-top: 16px; max-width: 70ch; }
/* rows with a second line of stats keep the role column on the left */
.role.two-tier .who { grid-row: span 2; }
.roles .stat .n .prior-n small { margin-left: 3px; }
.roles .stat .n .to { font-family: var(--serif); font-size: .6em; color: var(--fg-muted); margin: 0 8px; }
/* the number stays whole; a long label drops below it rather than overflowing */
.roles .stat .n { white-space: normal; }
.roles .stat .n small { white-space: normal; line-height: 1.3; }
/* slope lines: only the endpoints we know (before, after), drawn in the brand's ink-and-olive style */
.roles .spark { display: block; width: 96px; height: 24px; overflow: visible; margin: 2px 0 1px; }
.spark .sp-base { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 1 3.5; stroke-linecap: round; }
.spark .sp-line { fill: none; stroke: var(--fg); stroke-width: 1.25; stroke-linecap: round; }
.spark .sp-start { fill: var(--fg-muted); }
.spark .sp-end { fill: var(--fg); }
/* once a row is armed (just below the fold), its lines wait to draw until it scrolls in */
.role.is-armed .spark .sp-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.role.is-armed .spark .sp-end { opacity: 0; }
.role.is-armed.is-counted .spark .sp-line { stroke-dashoffset: 0; }
.role.is-armed.is-counted .spark .sp-end { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .roles .spark .sp-line { transition: stroke-dashoffset 1s var(--ease) .15s; }
  .roles .spark .sp-end { transition: opacity .3s var(--ease) 1s; }
}

/* ---------- Stories ---------- */
.story {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px 56px;
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--rule);
  align-items: start;
}
.story.flip { grid-template-columns: 7fr 5fr; }
.story.flip figure { order: 2; }
.story figure { display: grid; gap: 10px; }
.story a.plate-link { display: block; }
.story h3 { font-size: clamp(26px, 2.4vw, 32px); max-width: var(--measure); }
.story .kind { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.story.featured .kind::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; }
.story .deck { margin-top: 18px; max-width: var(--measure); color: var(--fg-muted); font-size: 16.5px; text-wrap: pretty; }
.story dl { margin-top: 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; border-top: 1px solid var(--rule); padding-top: 14px; }
.story dt { font: 500 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.story dd { font-size: 14px; line-height: 1.4; margin-top: 4px; }
.story .idx { margin-top: 28px; }
.story .chapters { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.story .chapters a { font-size: 14px; color: var(--fg-muted); }
.story .chapters a::before { content: "§ "; color: var(--fg-faint); }
.story .chapters a:hover { color: var(--signal); }
.story:hover .plate img { transform: scale(1.025); }
.story:hover h3 a { text-decoration-color: var(--signal); }
.story h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; text-decoration-color: transparent; transition: text-decoration-color .4s var(--ease); }

/* ---------- Index list (earlier work, methods, essays) ---------- */
.index-list { border-top: 1px solid var(--rule-strong); }
.index-list > li { border-bottom: 1px solid var(--rule); }
.index-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
  gap: 8px 28px;
  padding-block: 20px 22px;
  align-items: baseline;
}
a.index-row { transition: color .3s var(--ease); }
a.index-row:hover h3 { color: var(--signal); }
.index-row .when { font: 400 13.5px/1.4 var(--sans); letter-spacing: .02em; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.index-row h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; transition: color .3s var(--ease); text-wrap: balance; }
.index-row p { font-size: 15px; line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }
.index-row .tag { font: 500 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); white-space: nowrap; }
.index-row .go { font-family: var(--serif); font-size: 18px; color: var(--fg-muted); }
/* earlier work: a photo beside each project, no lock column */
.work-list { border-top: 1px solid var(--rule-strong); }
.work-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px 28px; padding-block: 22px; border-bottom: 1px solid var(--rule); align-items: start; }
.work-row .work-thumb { aspect-ratio: 1 / 1; border-radius: 4px; }
.work-row .when { display: block; margin-bottom: 6px; }
.work-row h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; text-wrap: balance; }
.work-row p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--fg-muted); max-width: var(--measure); text-wrap: pretty; }
.earlier-ask { margin: -8px 0 clamp(24px, 3vw, 36px); padding-top: 0; border-top: 0; }  /* sits between the headline and the list, no rule of its own */
.logo-tile { display: grid; place-items: center; background: var(--plate); }
.logo-dell-tile { position: static; translate: none; width: 64%; aspect-ratio: 600 / 76; background: var(--fg-muted); --logo: url("assets/logo-dell.png"); }
@media (max-width: 760px) { .work-row { grid-template-columns: 88px minmax(0, 1fr); gap: 6px 16px; } }
.empty-state { padding-block: 26px 28px; display: grid; gap: 10px; border-bottom: 1px solid var(--rule); }
.empty-state p { color: var(--fg-muted); max-width: var(--measure); }

/* ---------- Threshold ---------- */
.threshold { position: relative; background: var(--ink); line-height: 0; margin-top: -1px; }  /* close any sub-pixel gap with the dark section above */
.threshold + .field-light { position: relative; margin-top: -1px; }  /* the light section tucks a pixel under the wave so no dark seam shows */
.threshold svg { width: 100%; height: clamp(44px, 8vw, 112px); display: block; }

/* ---------- Principles + habits ---------- */
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; border-top: 1px solid var(--rule-strong); }
.principles li { padding-block: 28px 32px; border-bottom: 1px solid var(--rule); display: grid; gap: 12px; align-content: start; }
.principles h3 { font-size: clamp(22px, 2vw, 26px); max-width: var(--measure); }
.principles p { color: var(--fg-muted); font-size: 16px; max-width: var(--measure); text-wrap: pretty; }
.habits { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; align-items: start; }
.habits h4 { font: 600 13px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.habits ol { display: grid; }
.habits ol li { padding-block: 10px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 110px 1fr; gap: 16px; font-size: 15.5px; }
.habits ol li:last-child { border-bottom: 1px solid var(--rule); }
.habits ol li b { font-weight: 600; }
.habits ol li span { color: var(--fg-muted); }
.habits .applied p { font-size: 15.5px; color: var(--fg-muted); max-width: 40ch; }
.habits .applied .idx { margin-top: 14px; }

/* ---------- Values ---------- */
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; border-top: 1px solid var(--rule-strong); }
.values li { padding-block: 28px 32px; border-bottom: 1px solid var(--rule); display: grid; gap: 12px; align-content: start; }
.values h3 { font-size: clamp(22px, 2vw, 26px); }
.values p { color: var(--fg-muted); font-size: 16px; max-width: var(--measure); text-wrap: pretty; }

/* ---------- Testimonials: highlight reel ---------- */
.voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; border-top: 1px solid var(--rule-strong); }
.voice-grid .voice { padding-block: 28px 30px; border-bottom: 1px solid var(--rule); align-content: start; }
.voice-grid .voice.lead { grid-column: 1 / -1; }
.voice-grid .voice.lead blockquote { font-size: clamp(22px, 2vw, 26px); line-height: 1.3; max-width: var(--measure-lede); }
.voice-grid .voice blockquote { font-size: clamp(19px, 1.6vw, 21px); line-height: 1.35; }
.voice details { margin-top: 2px; }
.voice summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-block: 6px;
  font: 500 13px/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color .3s var(--ease);
}
.voice summary::-webkit-details-marker { display: none; }
.voice summary::after { content: "+"; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--rule-strong); border-radius: 50%; font: 400 18px/1 var(--serif); letter-spacing: 0; transition: border-color .3s var(--ease); }
.voice details[open] summary::after { content: "–"; }
.voice summary:hover { color: var(--signal); }
.voice summary:hover::after { border-color: var(--signal); }
/* the full note opens as a pulled-out callout, like the question on Thinking, a size up */
.voice details p {
  margin-top: 16px;
  padding: .15em 0 .15em 20px;
  border-left: 2px solid var(--signal);
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--fg);
  max-width: var(--measure);
  text-wrap: pretty;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .voice details { interpolate-size: allow-keywords; }
    .voice details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
    .voice details[open]::details-content { height: auto; }
  }
}

/* ---------- Talks ---------- */
.talks { border-top: 1px solid var(--rule-strong); }
.talk-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 28px; padding-block: 24px 28px; border-bottom: 1px solid var(--rule); }
.talk-item .when { font: 400 13.5px/1.4 var(--sans); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.talk-item .event { font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--signal); margin-bottom: 10px; }
/* Item titles (talks, methods) share one treatment and the width of their summary */
:is(.talk-item, .method) h3 { font-size: clamp(22px, 1.9vw, 25px); line-height: 1.18; max-width: var(--measure); }
:is(.talk-item, .method) .summary { margin-top: 10px; max-width: var(--measure); font: 400 15.5px/1.55 var(--sans); color: var(--fg-muted); text-wrap: pretty; }

/* ---------- Methods ---------- */
.methods-list { border-top: 1px solid var(--rule-strong); }
.method { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: 16px 32px; padding-block: 24px 28px; border-bottom: 1px solid var(--rule); align-items: start; }
.method .plate { aspect-ratio: 1 / 1; display: block; background: var(--field); }  /* illustrations sit on the page's own cream */
.talk-links { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-top: 18px; }
.talk-links .idx { margin-top: 0; }
.talk-item.signal .when { color: var(--signal); }

/* ---------- Continue to another page ---------- */
.continue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--rule-strong); }
.continue a { display: grid; gap: 8px; padding-block: 22px 26px; align-content: start; }
.continue .label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--serif); font-size: clamp(23px, 2.1vw, 28px); line-height: 1.1; transition: color .3s var(--ease); }
.continue .label span { font-size: .7em; transition: transform .35s var(--ease); }
.continue p { font-size: 15px; color: var(--fg-muted); max-width: 34ch; }
.continue a:hover .label { color: var(--signal); }
.continue a:hover .label span { transform: translateX(4px); }

@media (max-width: 1000px) {
  .page-hero.has-aside .wrap { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .page-hero.has-aside .portrait { grid-column: 2; max-width: 260px; }
  .scope { grid-template-columns: 1fr 1fr; }
  .role { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 22px; }
  .role .who { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; margin-bottom: 6px; }
  .role .who b { grid-column: 1; }
  .role .who .meta { grid-column: 1; max-width: none; }
  .role .role-link { grid-column: 2; grid-row: 1; align-self: baseline; }
  .role.two-tier .who { grid-row: auto; }
  .story, .story.flip { grid-template-columns: 1fr; }
  .story.flip figure { order: 0; }
  .index-row { grid-template-columns: 120px minmax(0, 1fr) auto; }
  .index-row p { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  .page-hero .wrap, .page-hero.has-aside .wrap { grid-template-columns: 1fr; }
  .page-hero.has-aside .portrait { grid-column: 1; }
  :root body .page-hero h1 { font-size: clamp(40px, 11.6vw, 54px); letter-spacing: -.02em; line-height: 1; }
  :root body .page-hero h1.long { font-size: clamp(34px, 9.6vw, 46px); line-height: 1.04; }
  .ctas { grid-template-columns: 1fr; }
  .scope { grid-template-columns: 1fr; }
  .scope li { padding-right: 0; }
  .role { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 26px 22px; }
  .role .who { margin-bottom: 10px; }
  .role .who b { font-size: 23px; }
  .role .who .meta { font-size: 13px; }
  .role .role-link { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 28px; margin-block: -6px; text-decoration: none; font-size: 16px; color: var(--fg-muted); }
  .role .role-link .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .roles .stat { grid-template-columns: 7rem minmax(0, 1fr); gap: 0 16px; align-items: baseline; padding-block: 14px; border-top: 1px solid var(--rule); }
  .roles .stat .n { grid-column: 1; font-size: 30px; white-space: normal; }
  .roles .stat .n small { font-size: 10px; margin-left: 3px; letter-spacing: .04em; }
  .roles .stat .n small { display: block; margin: 6px 0 0; white-space: normal; line-height: 1.3; }
  .roles .stat .n.ba small { display: inline; margin: 0 0 0 3px; }  /* before → after stays on one line */
  .roles .spark { grid-column: 1; grid-row: 2; width: 84px; margin-top: 8px; }
  .roles .stat .l { grid-column: 2; grid-row: 1 / span 2; font-size: 14px; line-height: 1.45; max-width: none; }
  .story dl { grid-template-columns: 1fr 1fr; }
  .index-row { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .index-row .when { grid-column: 1; }
  .index-row .tag, .index-row .go { grid-column: 2; grid-row: 1; justify-self: end; }
  .index-row h3, .index-row p { grid-column: 1 / -1; }
  .principles, .habits, .values, .voice-grid, .continue { grid-template-columns: 1fr; }
  .practice { grid-template-columns: 1fr; }
  .practice-mark { max-width: 240px; }
  .continue a + a { border-top: 1px solid var(--rule); }
  .talk-item { grid-template-columns: 1fr; }
  :is(.talk-item, .method) h3 { font-size: 21px; }
  .method { grid-template-columns: 1fr; }
  .method .plate { aspect-ratio: 3 / 2; }
}

/* ---------- Dividers: one rule per boundary ----------
   1. A section opens with one full-width rule (the <hr>). Nothing else
      draws a line directly beneath it.
   2. A component draws its own strong top rule only when a heading sits
      between it and the section rule, as in The evidence.
   3. Rows inside a component use the faint rule.
   4. Where the field changes color, the color is the boundary: no rule. */
.body > :is(.scope, .roles, .index-list, .principles, .values, .voice-grid, .continue, .talks, .moments, .quests, .methods-list):first-child { border-top: 0; }
.body > .story:first-child { border-top: 0; padding-top: 0; }
/* pull the first row up so its first line sits level with the rail eyebrow */
.body > :is(.roles, .talks, .moments, .methods-list):first-child > :first-child,
.body > .index-list:first-child > li:first-child:is(.index-row, .empty-state),
.body > .index-list:first-child > li:first-child > .index-row { padding-top: 0; }
.body > .scope:first-child { margin-top: -26px; }
.body > :is(.values, .voice-grid):first-child { margin-top: -28px; }
.body > :is(.continue, .quests):first-child { margin-top: -22px; }

/* Links inside a row, or right after a list, are text links: the row rule
   is already doing the separating work. */
:is(.story, .moments, .talk-item, .applied, .method, .practice, .moment-text) .idx,
:is(.index-list, .talks, .moments, .roles) + .idx,
:is(.index-list, .talks, .moments, .roles) + .resume-cta .idx {
  border-top-color: transparent;
  padding-top: 0;
}
:is(.index-list, .talks, .moments, .roles) + :is(.idx, .resume-cta) { margin-top: 20px; }
:is(.story, .moments, .talk-item, .applied, .method, .practice, .moment-text) .idx:hover { border-top-color: transparent; }

/* A testimonial after a ruled list shares the list's closing rule */
:is(.timeline, .lessons, .steps, .ledger, .features, .personas, .arc, .innovations) + .voice-row { border-top: 0; padding-top: 0; }

/* Closing section: one rule above "Keep reading", tighter before the footer */
.sec.keep { padding-block-end: clamp(32px, 4vw, 56px); }
/* On a dark page the footer needs the same full-width rule; on light
   pages the change to the dark footer field is the boundary. */
main:has(> :last-child.field-dark) + .site-foot > .wrap::before {
  content: "";
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
}

/* ---------- Method illustrations ----------
   Ink line on the warm plate, one olive element for the heart of each
   method, a faint dotted trace. They move when the row is hovered or focused. */
.mi { display: block; width: 100%; height: 100%; color: var(--fg); overflow: visible; }
.mi .ink { stroke: currentColor; }
.mi .faint { stroke: var(--fg-faint); }
.mi .ol { stroke: var(--olive); }
.mi .olf { fill: var(--olive); }
.mi-vision .crop { transform-box: view-box; transform-origin: 100px 100px; }
.mi-vision .rays { opacity: 0; transform-box: view-box; transform-origin: 100px 110px; transform: scale(.7); }
.mi-arcs .traveler { offset-path: path("M58 128C80 56 120 56 142 128"); offset-distance: 50%; offset-rotate: 0deg; }
.mi-frame .goal { fill-opacity: .35; }
.mi-frame .climber { offset-path: path("M60 136H84V112H108V88H132V64H150"); offset-distance: 0%; offset-rotate: 0deg; }
.mi-research .orbit { offset-path: path("M64 106C64 72 136 72 136 106C136 140 64 140 64 106Z"); offset-distance: 75%; offset-rotate: 0deg; }
.mi-research .bubble { opacity: 0; transform-box: fill-box; transform-origin: 30% 100%; transform: scale(.6); }

@media (prefers-reduced-motion: no-preference) {
  .mi-vision .crop, .mi-vision .sun, .mi-vision .rays, .mi-research .bubble { transition: transform .6s var(--ease), opacity .4s var(--ease); }
  .mi-frame .goal { transition: fill-opacity .4s var(--ease); }

  /* Visionscaping: the frame tightens, a possible future rises */
  .method:is(:hover, :focus-within) .mi-vision .crop { transform: scale(.9); }
  .method:is(:hover, :focus-within) .mi-vision .sun { transform: translateY(-12px); }
  .method:is(:hover, :focus-within) .mi-vision .rays { opacity: 1; transform: scale(1); transition-delay: .25s; }
  .method:is(:hover, :focus-within) .mi-vision .road { animation: mi-march 1s linear infinite; }

  /* Relationship arcs: the arc draws, a moment travels between person and product */
  .method:is(:hover, :focus-within) .mi-arcs .arc { stroke-dasharray: 1; animation: mi-draw .9s var(--ease) both; }
  .method:is(:hover, :focus-within) .mi-arcs .traveler { animation: mi-travel 2.2s ease-in-out .3s infinite alternate both; }
  .method:is(:hover, :focus-within) .mi-arcs .person { animation: mi-nod .9s var(--ease) .1s; }

  /* Experience Frame: progress climbs from Today to Best */
  .method:is(:hover, :focus-within) .mi-frame .stair { stroke-dasharray: 1; animation: mi-draw 1.1s var(--ease) both; }
  .method:is(:hover, :focus-within) .mi-frame .climber { animation: mi-climb 1.1s var(--ease) both; }
  .method:is(:hover, :focus-within) .mi-frame .goal { fill-opacity: 1; transition-delay: .9s; }

  /* Research programs: feedback keeps looping, a customer speaks up */
  .method:is(:hover, :focus-within) .mi-research .orbit { animation: mi-orbit 2.4s linear infinite; }
  .method:is(:hover, :focus-within) .mi-research .bubble { opacity: 1; transform: scale(1); transition-delay: .15s; }
}
@keyframes mi-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mi-march { to { stroke-dashoffset: -14; } }
@keyframes mi-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes mi-climb { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes mi-orbit { from { offset-distance: 75%; } to { offset-distance: 175%; } }
@keyframes mi-nod { 0%, 100% { transform: none; } 40% { transform: translateY(-3px); } }

/* ---------- Design value illustrations ----------
   Same language as the method illustrations: ink line, one olive idea,
   a faint trace. They move when the value is hovered. */
.value-mark { display: block; width: 170px; max-width: 100%; aspect-ratio: 200 / 140; margin-bottom: 6px; }
.vi .ink-fill { fill: currentColor; }
/* Confidence: an opinion, seen whole, becomes one data point among the evidence */
.vi-confidence .bubble { transform-box: view-box; transform-origin: 100px 57px; }
.vi-confidence .dots circle, .vi-confidence .opinion-dot { fill: var(--olive); }
.vi-confidence .dots circle { opacity: 0; }
.vi-confidence .axes, .vi-confidence .opinion-dot { opacity: 0; }
.vi-confidence .trend { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* Others: one voice echoes over everyone; on hover the volume is shared */
.vi-others .echo circle, .vi-others .shared circle { transform-box: fill-box; transform-origin: center; }
.vi-others .e1 { opacity: .9; } .vi-others .e2 { opacity: .55; } .vi-others .e3 { opacity: .3; }
.vi-others .shared circle { opacity: 0; transform: scale(.3); }
.vi-others .quiet { stroke: var(--fg-faint); }
.vi-others .loud { fill: var(--fg); stroke: var(--fg); transform-box: fill-box; transform-origin: center; }
.vi-futures .cone { transform-box: view-box; transform-origin: 34px 70px; }
.vi-futures .target-ring { transform-box: fill-box; transform-origin: center; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {

  .vi-futures .cone { transition: transform .6s var(--ease); }
  .vi-confidence .bubble { transition: transform .55s var(--ease), opacity .2s linear; }
  .vi-confidence .opinion-dot, .vi-confidence .axes, .vi-confidence .dots circle { transition: opacity .3s var(--ease); }
  .vi-confidence .trend { transition: stroke-dashoffset .7s var(--ease); }
  .vi-others .echo circle, .vi-others .shared circle, .vi-others .loud { transition: transform .6s var(--ease), opacity .45s var(--ease), fill .45s var(--ease); }
  .vi-others .quiet { transition: stroke .45s var(--ease); }

  /* Emotion: the journey keeps moving; the person rides its lows and highs */
  .values li:hover .vi-emotion .wave { animation: vi-flow 3.2s linear infinite; }
  .values li:hover .vi-emotion .rider { animation: vi-ride 3.2s ease-in-out infinite; }

  /* Futures: the cone of possibility widens; the preferable path draws */
  .values li:hover .vi-futures .cone { transform: scaleY(1.12); }
  .values li:hover .vi-futures .path { stroke-dasharray: 1; animation: mi-draw 1s var(--ease) both; }
  .values li:hover .vi-futures .target-ring { animation: vi-ring 1.6s ease-out .8s infinite; }
}
/* State changes apply for everyone; the transitions above add the motion */
/* Confidence: zoom out from the opinion; it lands as one point; the evidence forms a line */
.values li:hover .vi-confidence .bubble { transform: translate(12px, 5px) scale(.05); opacity: 0; transition-delay: 0s, .35s; }
.values li:hover .vi-confidence .opinion-dot { opacity: 1; transition-delay: .45s; }
.values li:hover .vi-confidence .axes { opacity: 1; transition-delay: .5s; }
.values li:hover .vi-confidence .dots circle { opacity: .85; }
.values li:hover .vi-confidence .dots circle:nth-child(1) { transition-delay: 0.50s; }
.values li:hover .vi-confidence .dots circle:nth-child(2) { transition-delay: 0.53s; }
.values li:hover .vi-confidence .dots circle:nth-child(3) { transition-delay: 0.56s; }
.values li:hover .vi-confidence .dots circle:nth-child(4) { transition-delay: 0.59s; }
.values li:hover .vi-confidence .dots circle:nth-child(5) { transition-delay: 0.62s; }
.values li:hover .vi-confidence .dots circle:nth-child(6) { transition-delay: 0.65s; }
.values li:hover .vi-confidence .dots circle:nth-child(7) { transition-delay: 0.68s; }
.values li:hover .vi-confidence .dots circle:nth-child(8) { transition-delay: 0.71s; }
.values li:hover .vi-confidence .dots circle:nth-child(9) { transition-delay: 0.74s; }
.values li:hover .vi-confidence .dots circle:nth-child(10) { transition-delay: 0.77s; }
.values li:hover .vi-confidence .dots circle:nth-child(11) { transition-delay: 0.80s; }
.values li:hover .vi-confidence .dots circle:nth-child(12) { transition-delay: 0.83s; }
.values li:hover .vi-confidence .dots circle:nth-child(13) { transition-delay: 0.86s; }
.values li:hover .vi-confidence .dots circle:nth-child(14) { transition-delay: 0.89s; }
.values li:hover .vi-confidence .dots circle:nth-child(15) { transition-delay: 0.92s; }
.values li:hover .vi-confidence .dots circle:nth-child(16) { transition-delay: 0.95s; }
.values li:hover .vi-confidence .dots circle:nth-child(17) { transition-delay: 0.98s; }
.values li:hover .vi-confidence .dots circle:nth-child(18) { transition-delay: 1.01s; }
.values li:hover .vi-confidence .dots circle:nth-child(19) { transition-delay: 1.04s; }
.values li:hover .vi-confidence .trend { stroke-dashoffset: 0; transition-delay: 1.15s; }

/* Others: the loud voice quiets, its echo recedes, everyone gets a share */
.values li:hover .vi-others .loud { transform: scale(.7); fill: transparent; }
.values li:hover .vi-others .e1 { transform: scale(.64); opacity: 1; }
.values li:hover .vi-others .e2 { transform: scale(.33); opacity: 0; }
.values li:hover .vi-others .e3 { transform: scale(.22); opacity: 0; }
.values li:hover .vi-others .quiet { stroke: var(--fg); transition-delay: .25s; }
.values li:hover .vi-others .shared circle { opacity: 1; transform: none; }
.values li:hover .vi-others .shared circle:nth-child(1) { transition-delay: .3s; }
.values li:hover .vi-others .shared circle:nth-child(2) { transition-delay: .4s; }
.values li:hover .vi-others .shared circle:nth-child(3) { transition-delay: .5s; }
.values li:hover .vi-others .shared circle:nth-child(4) { transition-delay: .6s; }

@keyframes vi-flow { to { transform: translateX(-100px); } }
@keyframes vi-ride { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-50px); } }
@keyframes vi-ring { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.8); } }

/* ---------- What I lead illustrations (dark field: cream line, olive accent) ---------- */
.scope .value-mark { margin-bottom: 12px; }
.si-direction .insights circle { fill: var(--fg-muted); }
.si-direction .needle { transform-box: view-box; transform-origin: 40px 110px; transform: rotate(-43deg); }
.si-ai .marks rect:not(.m1), .si-ai .conns path { opacity: 0; }
.si-ai .spine { stroke-dasharray: 1; stroke-dashoffset: 1; }
.si-research .flow circle { opacity: 0; }
.si-research .flow .p1 { opacity: 1; transform: translateX(32px); }
.si-research .span { transform-box: fill-box; transform-origin: left center; }
.si-team .hire { opacity: 0; }
.si-team .plinth { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(.22); }
.si-quality .needle { transform-box: view-box; transform-origin: 100px 96px; transform: rotate(-60deg); }
.si-quality .checks path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.si-decision .strands path { transform-box: fill-box; transform-origin: center; }
.si-decision .s1 { transform: rotate(-28deg); } .si-decision .s2 { transform: rotate(18deg); } .si-decision .s3 { transform: rotate(-12deg); }
.si-decision .s4 { transform: rotate(30deg); } .si-decision .s5 { transform: rotate(-20deg); }
.si-decision .commit { stroke-dasharray: 1; stroke-dashoffset: 1; }
.si-decision .commit-head { opacity: 0; }
.si-decision .goal { fill: transparent; }

@media (prefers-reduced-motion: no-preference) {
  .si-direction .needle, .si-team .plinth, .si-team .lift, .si-quality .needle, .si-research .span, .si-decision .strands path { transition: transform .7s var(--ease); }
  .si-ai .marks rect, .si-ai .conns path, .si-team .hire, .si-team .open, .si-decision .commit-head { transition: opacity .3s var(--ease); }
  .si-ai .spine, .si-quality .checks path, .si-decision .commit { transition: stroke-dashoffset .6s var(--ease); }
  .si-decision .goal { transition: fill .4s var(--ease); }
  .scope li:hover .si-research .flow circle { animation: si-flow 1.2s linear infinite; }
  .scope li:hover .si-research .flow .p2 { animation-delay: .4s; }
  .scope li:hover .si-research .flow .p3 { animation-delay: .8s; }
}
@keyframes si-flow { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(66px); } }

/* Hover states (apply for everyone; the transitions above add motion) */
.scope li:hover .si-direction .needle { transform: none; }
.scope li:hover .si-ai .marks rect, .scope li:hover .si-ai .conns path { opacity: 1; }
.scope li:hover .si-ai .m2, .scope li:hover .si-ai .c2 { transition-delay: .15s; }
.scope li:hover .si-ai .m3, .scope li:hover .si-ai .c3 { transition-delay: .3s; }
.scope li:hover .si-ai .m4, .scope li:hover .si-ai .c4 { transition-delay: .45s; }
.scope li:hover .si-ai .spine { stroke-dashoffset: 0; transition-delay: .2s; }
.scope li:hover .si-research .span { transform: scaleX(.08); transition-delay: .2s; }
.scope li:hover .si-team .open { opacity: 0; }
.scope li:hover .si-team .hire { opacity: 1; }
.scope li:hover .si-team .plinth { transform: none; transition-delay: .3s; }
.scope li:hover .si-team .lift { transform: translateY(-14px); transition-delay: .3s; }
.scope li:hover .si-quality .needle { transform: rotate(57deg); }
.scope li:hover .si-quality .checks path { stroke-dashoffset: 0; }
.scope li:hover .si-quality .k1 { transition-delay: .55s; }
.scope li:hover .si-quality .k2 { transition-delay: .7s; }
.scope li:hover .si-quality .k3 { transition-delay: .85s; }
.scope li:hover .si-decision .s1 { transform: translateY(32px); }
.scope li:hover .si-decision .s2 { transform: translateY(16px); }
.scope li:hover .si-decision .s3 { transform: none; }
.scope li:hover .si-decision .s4 { transform: translateY(-16px); }
.scope li:hover .si-decision .s5 { transform: translateY(-32px); }
.scope li:hover .si-decision .commit { stroke-dashoffset: 0; transition-delay: .45s; }
.scope li:hover .si-decision .commit-head { opacity: 1; transition-delay: .95s; }
.scope li:hover .si-decision .goal { fill: var(--olive); transition-delay: 1s; }

/* ---------- Leadership principles illustrations (light field) ---------- */
.principles .value-mark { margin-bottom: 4px; }
.pi-front .leader { transform-box: view-box; }
.pi-front .ghost { opacity: 0; }
.pi-swing .blocks .b4, .pi-swing .blocks .b5, .pi-swing .blocks .b6 { opacity: 0; }
.pi-swing .arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pi-swing .target { fill: transparent; }
.pi-opinion .chosen { fill-opacity: 0; }
.pi-opinion .strikes path, .pi-opinion .stance { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pi-middle .beam { transform-box: view-box; transform-origin: 100px 80px; transform: rotate(-9deg); }
.pi-practice .strike { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pi-practice .carry, .pi-practice .carry-head { opacity: .35; }
.pi-practice .new path { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }

/* In practice: a sketched callout, read left to right */
.practice { position: relative; margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 20px 40px; align-items: center; padding: clamp(24px, 3vw, 36px); }
.sketch-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sketch-frame path { fill: none; stroke: var(--fg); stroke-opacity: .55; stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sketch-frame .second { stroke-opacity: .22; }
.practice-mark { display: block; aspect-ratio: 240 / 110; }
.practice-text { display: grid; gap: 10px; align-content: start; }
.practice-text h4 { font: 600 13px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.practice-text p { font-size: 16px; color: var(--fg-muted); max-width: var(--measure); }
@media (max-width: 1000px) {  /* after the base rule so it wins: stack the mark above the text */
  .practice { grid-template-columns: minmax(0, 1fr); }
  .practice-mark { max-width: 240px; }
}

@media (prefers-reduced-motion: no-preference) {
  .pi-front .leader, .pi-middle .beam, .pi-practice .new path { transition: transform .7s var(--ease); }
  .pi-front .ghost, .pi-front .tether, .pi-swing .blocks rect, .pi-opinion .card, .pi-practice .old, .pi-practice .slot, .pi-practice .carry, .pi-practice .carry-head { transition: opacity .35s var(--ease); }
  .pi-swing .arc, .pi-opinion .strikes path, .pi-opinion .stance, .pi-practice .strike { transition: stroke-dashoffset .6s var(--ease); }
  .pi-swing .target { transition: fill .4s var(--ease); }
  .pi-opinion .chosen { transition: fill-opacity .4s var(--ease); }
}

/* Hover states (apply for everyone; the transitions above add motion) */
.principles li:hover .pi-front .leader { transform: translate(-64px, 66px); }
.principles li:hover .pi-front .tether { opacity: 0; }
.principles li:hover .pi-front .ghost { opacity: 1; transition-delay: .2s; }
.principles li:hover .pi-swing .blocks rect { opacity: 1; }
.principles li:hover .pi-swing .b4 { transition-delay: .1s; }
.principles li:hover .pi-swing .b5 { transition-delay: .2s; }
.principles li:hover .pi-swing .b6 { transition-delay: .3s; }
.principles li:hover .pi-swing .arc { stroke-dashoffset: 0; transition-delay: .45s; }
.principles li:hover .pi-swing .target { fill: var(--olive); transition-delay: 1s; }
.principles li:hover .pi-opinion .card:not(.c3) { opacity: .35; }
.principles li:hover .pi-opinion .strikes path { stroke-dashoffset: 0; }
.principles li:hover .pi-opinion .x2 { transition-delay: .1s; }
.principles li:hover .pi-opinion .x4 { transition-delay: .2s; }
.principles li:hover .pi-opinion .chosen { fill-opacity: .45; transition-delay: .25s; }
.principles li:hover .pi-opinion .stance { stroke-dashoffset: 0; transition-delay: .5s; }
.principles li:hover .pi-middle .beam { transform: none; }
.practice:hover .pi-practice .strike { stroke-dashoffset: 0; }
.practice:hover .pi-practice .old { opacity: .4; transition-delay: .3s; }
.practice:hover .pi-practice .carry, .practice:hover .pi-practice .carry-head { opacity: 1; transition-delay: .35s; }
.practice:hover .pi-practice .slot { opacity: 0; transition-delay: .55s; }
.practice:hover .pi-practice .new path { transform: none; transition-delay: .55s; }
.practice:hover .pi-practice .new path + path { transition-delay: .7s; }

/* ---------- About: the journey (creative résumé) ---------- */
.journey-wrap { position: relative; --j-when: 150px; --j-gap: 16px; --j-line: 84px; }
.journey-line { position: absolute; top: 0; left: calc(var(--j-when) + var(--j-gap)); width: var(--j-line); height: 100%; overflow: visible; pointer-events: none; }
.journey-dots { fill: none; stroke: var(--fg-muted); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .1 7; }
.j-node.role-node { fill: var(--field); stroke: var(--fg); stroke-width: 1.5; }
.j-node.moment-node { fill: var(--olive); }
.journey > li { display: grid; grid-template-columns: var(--j-when) var(--j-line) minmax(0, 1fr); column-gap: var(--j-gap); padding-block: 16px 22px; }
.j-when { grid-column: 1; text-align: right; padding-top: 3px; font: 400 14px/1.3 var(--sans); letter-spacing: .02em; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.j-body { grid-column: 3; min-width: 0; }
.j-role h3 { font: 600 16px/1.35 var(--sans); }
.j-role .j-org { font-size: 14px; color: var(--fg-muted); margin-top: 2px; }
.j-role .j-org + p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--fg-muted); max-width: var(--measure); }
.moment { padding-block: clamp(36px, 4vw, 52px); }
.moment .j-when { font-family: var(--serif); font-size: clamp(22px, 1.8vw, 25px); letter-spacing: 0; color: var(--signal); line-height: 1.1; padding-top: 0; white-space: normal; }
/* shaping moments: sketched callouts (same language as "In practice"), illustration stacked above text */
.moment-card { position: relative; display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 32px) clamp(22px, 2.6vw, 32px); }
.moment-mark { display: block; width: 180px; max-width: 100%; aspect-ratio: 200 / 140; }
.moment-text .eyebrow { color: var(--signal); }
.moment-text h3 { font-size: clamp(23px, 2.1vw, 28px); margin: 6px 0 10px; max-width: var(--measure); }
.moment-text p:not(.eyebrow) + p { margin-top: .85em; }
.moment-text > p:not(.eyebrow) { font-size: 16px; line-height: 1.6; color: var(--fg-muted); max-width: var(--measure); text-wrap: pretty; }
.moment-text .idx { margin-top: 14px; }
.moment-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.essay-link, .essay-link:hover { margin-bottom: clamp(28px, 3vw, 40px); padding-top: 0; border-top-color: transparent; }  /* a note under a section headline, pointing to the essay behind it */
.journey-key { display: grid; gap: 8px; margin-top: 6px; }
.journey-key li { display: flex; align-items: center; gap: 10px; }
.journey-key i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.journey-key .k-moment { background: var(--olive); width: 12px; height: 12px; }
.journey-key .k-role { border: 1.5px solid var(--fg); background: var(--field); }

/* company marks: one-color logos in the page ink, a bracket groups each company's roles */
.j-logo { position: relative; display: block; height: 18px; width: 100%; max-width: 116px; margin: 0 0 16px auto; opacity: .78; transition: opacity .2s ease; }
.j-logo::before { content: ""; position: absolute; inset: 0; background-color: var(--fg);
  -webkit-mask: var(--logo) no-repeat right center / contain; mask: var(--logo) no-repeat right center / contain; }
.j-logo-articulate { --logo: url("assets/logo-articulate.svg"); height: 17px; }
.j-logo-whoop { --logo: url("assets/logo-whoop.png"); height: 15px; }
.j-logo-ibm { --logo: url("assets/logo-ibm.png"); height: 24px; }
.j-logo-dell { --logo: url("assets/logo-dell.png"); height: 16px; }
.j-logo:hover, .j-logo:focus-visible { opacity: 1; }
.j-logo:focus-visible { outline: 2px solid var(--signal); outline-offset: 5px; }
.j-cluster { position: absolute; left: calc(var(--j-when) + var(--j-gap) / 2); width: 1px; background: var(--rule-strong); pointer-events: none; }
.j-cluster::before, .j-cluster::after { content: ""; position: absolute; left: -4px; width: 4px; height: 1px; background: var(--rule-strong); }
.j-cluster::before { top: 0; } .j-cluster::after { bottom: 0; }
/* moment illustrations: resting state */
.ji-voice .mine { opacity: 0; transform: translateX(36px); }
.ji-voice .dots-cream { stroke: var(--field); }
.ji-path .circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ji-overlap .left { transform: translateX(-16px); }
.ji-overlap .right { transform: translateX(16px); }
.ji-overlap .lens { opacity: 0; }
.ji-room .note { fill: var(--field); stroke: var(--fg); transform-box: fill-box; transform-origin: center; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
.ji-data .spike { fill: var(--fg); }
.ji-data .annot { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ji-leap .jumper { offset-path: path("M45 86L60 58C84 6 140 14 158 100"); offset-distance: 0%; offset-rotate: 0deg; }

@media (prefers-reduced-motion: no-preference) {
  .ji-voice .mine, .ji-voice .seat, .ji-path .me, .ji-path .ladder, .ji-overlap .left, .ji-overlap .right, .ji-room .note, .ji-leap .hatch { transition: transform .7s var(--ease), opacity .4s var(--ease), fill .4s var(--ease); }
  .ji-overlap .lens { transition: opacity .4s var(--ease); }
  .ji-path .circle, .ji-data .annot { transition: stroke-dashoffset .7s var(--ease); }
  .ji-data .spike { transition: fill .3s var(--ease); }
  .ji-leap .jumper { transition: offset-distance 1.1s cubic-bezier(.45, 0, .3, 1); }
  .moment:is(:hover, .is-active) .ji-voice .talk path { animation: ji-talk 1.2s ease-in-out infinite; }
  .moment:is(:hover, .is-active) .ji-voice .talk path:nth-child(2) { animation-delay: .2s; }
  .moment:is(:hover, .is-active) .ji-voice .talk path:nth-child(3) { animation-delay: .4s; }
}
@keyframes ji-talk { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* moment illustrations: hover (or in view on touch) — applies for everyone */
.moment:is(:hover, .is-active) .ji-voice .mine { opacity: 1; transform: none; transition-delay: .1s; }
.moment:is(:hover, .is-active) .ji-voice .seat { opacity: 0; transition-delay: .3s; }
.moment:is(:hover, .is-active) .ji-path .me { transform: translateX(38px); }
.moment:is(:hover, .is-active) .ji-path .ladder { opacity: .3; }
.moment:is(:hover, .is-active) .ji-path .circle { stroke-dashoffset: 0; transition-delay: .55s; }
.moment:is(:hover, .is-active) .ji-overlap .left, .moment:is(:hover, .is-active) .ji-overlap .right { transform: none; }
.moment:is(:hover, .is-active) .ji-overlap .lens { opacity: 1; transition-delay: .55s; }
.moment:is(:hover, .is-active) .ji-room .note { transform: none; }
.moment:is(:hover, .is-active) .ji-room .note.key { fill: var(--olive); stroke: var(--olive); transition-delay: 0s, 0s, .6s; }
.moment:is(:hover, .is-active) .ji-data .annot { stroke-dashoffset: 0; transition-delay: .2s; }
.moment:is(:hover, .is-active) .ji-data .spike { fill: var(--olive); }
.moment:is(:hover, .is-active) .ji-leap .jumper { offset-distance: 100%; }
.moment:is(:hover, .is-active) .ji-leap .hatch { opacity: .3; transition-delay: .4s; }

@media (max-width: 760px) {
  .journey-wrap { --j-gap: 12px; --j-line: 40px; }
  .journey-line { left: 0; }
  .journey > li { grid-template-columns: var(--j-line) minmax(0, 1fr); }
  .j-when { grid-column: 2; grid-row: 1; text-align: left; margin-bottom: 6px; }
  .j-logo { margin: 0 0 12px 0; }
  .j-logo::before { -webkit-mask-position: left center; mask-position: left center; }
  .j-cluster { display: none; }
  .j-body { grid-column: 2; }
  .moment-mark { width: 160px; }
}

/* ---------- Method viewer (lightbox) ----------
   Dark field = focus and scrutiny. The header anchors place; olive marks
   where you are in the set. "Look closer" moves from the whole artifact to
   its detail (macro → micro). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button.idx { background: none; border-left: 0; border-right: 0; border-bottom: 0; padding-inline: 0; color: inherit; cursor: pointer; text-align: left; }
.method .idx { margin-top: 16px; }
.method .plate-button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.method .plate-button .plate { display: block; }
.method .plate-button:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

.lb-open, .lb-open body { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  overflow: hidden;
}
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lightbox::backdrop { background: rgba(13, 13, 11, .9); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lb-in .35s var(--ease); }
  .lb-stage img { transition: opacity .3s var(--ease); }
  .lb-stage.is-changing img { opacity: 0; }
}
@keyframes lb-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.lb-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px;
  min-height: 64px; padding-inline: var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.lb-place { display: flex; align-items: center; gap: 20px; min-width: 0; }
.lb-place .eyebrow { color: var(--fg); white-space: nowrap; }
.lb-count { font: 400 13.5px/1 var(--sans); color: var(--fg-muted); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-count b { color: var(--signal); font-weight: 500; }
.lb-ticks { display: flex; gap: 6px; }
.lb-ticks button { position: relative; width: 30px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.lb-ticks button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--rule-strong); transition: background .3s var(--ease); }
.lb-ticks button:hover::before { background: var(--fg-muted); }
.lb-ticks button[aria-current="true"]::before { background: var(--signal); }
.lb-controls { display: flex; align-items: center; gap: 2px; }
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 44px; padding: 0 10px;
  border: 0; background: none; color: var(--fg-muted); cursor: pointer;
  font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  transition: color .3s var(--ease);
}
.lb-btn .arrow { font-family: var(--serif); font-size: 22px; letter-spacing: 0; line-height: 1; }
.lb-btn:hover:not([disabled]) { color: var(--signal); }
.lb-btn[disabled] { opacity: .3; cursor: default; }
.lb-sep { width: 1px; height: 22px; background: var(--rule); margin-inline: 8px; }

.lb-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 32px 56px; min-height: 0;
  padding: 32px var(--gutter) 40px;
}
/* the stage scrolls: artifacts open as wide as it allows and scroll when taller (zoom.js) */
.lb-stage {
  position: relative; margin: 0; min-height: 0;
  display: flex; overflow: auto; scrollbar-gutter: stable; overscroll-behavior: contain;
  background: #F8F8F8; user-select: none;
}
.lb-stage img { flex: none; margin: auto; max-width: none; }
.lb-stage.can-pan { cursor: grab; }
.lb-stage.can-zoom img { cursor: zoom-in; }
.lb-stage.is-dragging, .lb-stage.is-dragging img { cursor: grabbing; }

.lb-text { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding-top: 4px; }
.lb-text h2 { font-size: clamp(27px, 2.4vw, 34px); max-width: none; }
.lb-text .summary { font: 400 16px/1.6 var(--sans); color: var(--fg-muted); text-wrap: pretty; }
/* zoom: − 100% + Fit, shown whenever the artifact has more detail than fits */
.lb-zoombar { display: flex; align-items: center; gap: 4px; padding-top: 14px; border-top: 1px solid var(--rule); }
.lb-zoombar[hidden] { display: none; }
.lb-z, .lb-fit { height: 36px; border: 1px solid var(--rule-strong); background: none; color: var(--fg); cursor: pointer; font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; transition: color .3s var(--ease), border-color .3s var(--ease); }
.lb-z { width: 36px; border-radius: 50%; font: 400 20px/1 var(--sans); letter-spacing: 0; }
.lb-fit { margin-left: 10px; padding: 0 14px; border-radius: 18px; }
.lb-z:hover:not([disabled]), .lb-fit:hover:not([disabled]) { color: var(--signal); border-color: var(--signal); }
.lb-z[disabled], .lb-fit[disabled] { opacity: .35; cursor: default; }
.lb-pct { min-width: 58px; text-align: center; font: 400 13.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--fg-muted); }
.lb-hint { font: 400 13px/1.5 var(--sans); color: var(--fg-faint); }
.lb-up { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule); display: grid; gap: 8px; }
.lb-up button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 0; border: 0; background: none; color: var(--fg); cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: 22px; line-height: 1.2;
  transition: color .3s var(--ease);
}
.lb-up button .arrow { transition: transform .35s var(--ease); }
.lb-up button:hover { color: var(--signal); }
.lb-up button:hover .arrow { transform: translateX(4px); }

@media (max-width: 760px) {
  .lb-head { min-height: 56px; }
  .lb-place { gap: 12px; }
  .lb-ticks { display: none; }
  .lb-close .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lb-sep { margin-inline: 2px; }
  .lb-body { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; overflow-y: auto; gap: 20px; padding: 16px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
  .lb-stage { aspect-ratio: 1 / 1; }
  .lb-text { overflow: visible; }
  .lb-up { margin-top: 12px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  :root { --rail: 160px; }
  .ledger-row { grid-template-columns: minmax(150px, 1.2fr) minmax(90px, .8fr) minmax(50px, .6fr) minmax(100px, .9fr); }
  .ledger-row .note { grid-column: 1 / -1; padding-left: 0; margin-top: -6px; }
  .ledger-head .h-note { display: none; }
}
@media (max-width: 760px) {
  .sec .wrap { grid-template-columns: 1fr; gap: 20px; }
  .rail { position: static; }
  .rail .q { max-width: none; }
  .site-head > .wrap { grid-template-columns: 1fr auto; min-height: 64px; }
  .site-nav { display: none; }
  .menu-toggle { display: grid; }
  .site-head .cta { font-size: 12px; }

  /* Full-screen index under the header */
  .menu-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1;
    padding-top: 65px;
    background: var(--field);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transition: opacity .35s var(--ease), visibility 0s linear .35s;
  }
  .menu-open .menu-panel {
    visibility: visible;
    opacity: 1;
    transition: opacity .35s var(--ease), visibility 0s;
  }
  .menu-open, .menu-open body { overflow: hidden; }
  .menu-panel .wrap {
    flex: 1 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-block: 12px calc(28px + env(safe-area-inset-bottom));
  }
  .menu-foot { margin-top: auto; }
  .menu-list li { border-bottom: 1px solid var(--rule); }
  .menu-list a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-block: 18px 16px;
    transform: translateY(6px);
    transition: transform .5s var(--ease), color .3s var(--ease);
  }
  .menu-open .menu-list a { transform: none; }
  .menu-list li:nth-child(2) a { transition-delay: .03s; }
  .menu-list li:nth-child(3) a { transition-delay: .06s; }
  .menu-list li:nth-child(4) a { transition-delay: .09s; }
  .m-label {
    font-family: var(--serif);
    font-weight: 300;
    font-variation-settings: "opsz" 60;
    font-size: clamp(36px, 11vw, 48px);
    line-height: 1;
    letter-spacing: -.015em;
  }
  .m-note { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--fg-muted); text-align: right; }
  .menu-list a:hover .m-label, .menu-list a:focus-visible .m-label { color: var(--signal); }
  .menu-list a.is-current .m-label { display: inline-flex; align-items: center; gap: 12px; }
  .menu-list a.is-current .m-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; }
  .menu-foot { display: grid; }
  .menu-foot .idx { display: flex; justify-content: space-between; }

  /* Headings use the full measure on phones instead of a desktop ch cap */
  :root body :is(.display, .statement, .sec-title, .pull) { max-width: none; text-wrap: pretty; }
  :root body :is(.story-hero, .about-hero) h1 { font-size: clamp(36px, 10.4vw, 48px); letter-spacing: -.02em; line-height: 1.02; }
  .site-foot .wrap { grid-template-columns: 1fr; }
  .ledger-row { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .ledger-row .label { grid-column: 1 / -1; }
  .ledger-row .path { display: none; }
  .ledger-row .after { text-align: right; }
  .ledger-head { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-list a, .menu-toggle svg { transition: none !important; transform: none !important; }
}