/* ===========================================================================
   Cristian Malpica — Product Manager / Product Owner
   Design system: "instrument, not artwork" — now made of glass.

   The register is unchanged: hairline rules, tabular figures, a grid you can
   see, the sans carrying the substance. What changed is the material. Surfaces
   are translucent and lit from above, corners are generous, and motion settles
   rather than stops. The type is modern throughout — a variable grotesk for
   everything that informs, and a contemporary high-contrast serif reserved for
   identity. The classical old-style serif that used to hold that role read as
   traditional editorial, which is not what the rest of this is.

   One rule governs the glass: it is only ever used where what sits behind it
   is flat ground. Chrome that scrolling text passes under stays effectively
   opaque, because a legible ghost is a defect, not a material.
   =========================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('assets/fonts/geist.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Fraunces roman, instanced at weight 500 and optical size 72 and then subset:
   one static cut rather than a variable font, because every roman display use
   on this site is a single weight, and because the flight from the hero to the
   bar scales one copy of the name between two sizes — it can only land true if
   the two ends differ in nothing but size. opsz 72 sits close to the hero's own
   80px and still holds up at the 16px the wordmark uses; the 144 cut thins too
   far at that size and the 32 cut is wide enough to wrap the name. */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
/* Personal reflections use a genuine italic rather than a browser-generated
   slant. Keeping it as a separate face preserves the exact roman wordmark. */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Ground — a touch cooler than before, so it reads as a screen rather than a room */
  --ground:  #07090A;
  --raise:   #0C1113;   /* cards, panels */
  --raise-2: #11181A;   /* hover, active */

  /* ── Glass ───────────────────────────────────────────────────────────────
     Three surfaces, in order of how much they let through. Each is a tint plus
     a light gradient from the top edge; the specular hairline that makes it
     read as glass is a separate token so it can be applied as an inset shadow
     without fighting a component's own border. */
  --glass:      linear-gradient(180deg, rgba(236,239,238,0.055), rgba(236,239,238,0.012) 38%, rgba(236,239,238,0) 72%), rgba(14,20,22,0.62);
  --glass-2:    linear-gradient(180deg, rgba(236,239,238,0.075), rgba(236,239,238,0.018) 38%, rgba(236,239,238,0) 72%), rgba(18,25,27,0.74);
  --glass-solid:linear-gradient(180deg, rgba(236,239,238,0.05), rgba(236,239,238,0.01) 40%, rgba(236,239,238,0) 70%), rgba(9,12,13,0.94);
  /* 20px here cost 16 dropped frames in every 79 through the hero scroll, and
     the sticky bar re-runs it on every scrolled frame. At 10px the same scroll
     drops 2, and the difference between the two is not visible over a ground
     this dark. Blur radius, not the glass, was the stutter. */
  --glass-blur: saturate(150%) blur(10px);
  --specular:   inset 0 1px 0 rgba(236,239,238,0.10), inset 0 0 0 1px rgba(236,239,238,0.045);
  --specular-2: inset 0 1px 0 rgba(236,239,238,0.16), inset 0 0 0 1px rgba(236,239,238,0.07);

  /* Ink. Body is 400 at 1rem: light-on-dark optically thins, and the old 300 was
     below the floor for sustained reading. */
  --ink:   #ECEFEE;
  --ink-2: #BFC6C5;
  --ink-3: #8E9896;

  --rust: #D08A5C;      /* interactive, emphasis */
  --teal: #77B0A6;      /* measured, verified */
  --sand: #DCCFB8;

  /* Blueprint-only hues, kept out of the main pages */
  --moss: #93B089; --clay: #C08A63; --amber: #D6A866; --bone: #DDD6C8;

  --line:   rgba(236, 239, 238, 0.10);
  --line-2: rgba(236, 239, 238, 0.20);
  --line-3: rgba(236, 239, 238, 0.34);

  --display: 'Fraunces', 'Iowan Old Style', Palatino, Georgia, serif;
  --text: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --pad: clamp(1.15rem, 0.4629rem + 2.819vw, 3rem);
  --max: 74rem;
  --sticky-offset: 4.1rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Type ────────────────────────────────────────────────────────────────
     Eight text steps and three display steps. The sheet had 36 declared sizes
     rendering as 31, twenty-two of them inside nine pixels — a range where the
     eye reads no difference, so the steps carried no hierarchy and the page
     never quite settled. Every step below lands within ~1.5px of a value that
     was already in use, so nothing jumps; it only stops drifting.

     The four fluid steps share one formula: interpolate min → max across
     390px → 1440px, with a rem term so a reader's own font-size setting still
     scales them. Thirteen separate clamp() expressions, no two alike, are now
     four instances of one shape. */
  --fs-label: 0.6875rem;                                        /* 11px — uppercase labels, eyebrows */
  --fs-micro: 0.75rem;                                          /* 12px — captions, dates, source notes */
  --fs-small: 0.8125rem;                                        /* 13px — nav, buttons, chips */
  --fs-tight: 0.875rem;                                         /* 14px — dense lists, table cells */
  --fs-body:  1rem;                                             /* 16px — anything read for more than a phrase */
  --fs-lead:  1.125rem;                                         /* 18px — lead paragraphs, card titles */
  --fs-h3:    1.25rem;                                          /* 20px */
  --fs-personal: var(--fs-lead);                               /* 18px — personal reflections */
  --fs-quote: clamp(1.25rem,  1.1107rem + 0.571vw, 1.625rem);   /* 20 → 26px — pull quotes, the hero claim */
  --fs-h2:    clamp(1.625rem, 1.3464rem + 1.143vw, 2.375rem);   /* 26 → 38px */
  --fs-h1:    clamp(2.125rem, 1.6607rem + 1.905vw, 3.375rem);   /* 34 → 54px */

  /* Leading, five steps. Sixteen distinct ratios is a continuum, not a scale,
     and it is the quietest of the four drifts — the reader feels it as the page
     never quite settling rather than as anything they could point at. */
  --lh-hero:   0.96;   /* the name */
  --lh-tight:  1.15;   /* headings */
  --lh-snug:   1.32;   /* sub-heads, quotes, card titles */
  --lh-normal: 1.45;   /* dense lists, table cells, captions */
  --lh-body:   1.6;    /* running text */

  /* Measure. Comfortable reading sits between 45 and 75 characters; running
     text on this site spanned 33 to 181, and the widest offenders were at the
     bottom of pages where attention is already thin. These are ceilings, not a
     redesign — a block only moves if it was already too wide. */
  --measure:       68ch;   /* body paragraphs, list items */
  --measure-wide:  78ch;   /* incidental notes and colophons */
  --measure-tight: 66ch;   /* open questions — the most re-read text on a page */

  /* ── Space ─────────────────────────────────────────────────────────────── */
  /* A 2px grid at the small end, 4px above it. Spacing had drifted to 71
     distinct values across 341 uses — the same continuum the type was in, and
     the reason edges never quite lined up between one component and the next. */
  --space-1: 0.125rem; --space-2: 0.25rem;  --space-3: 0.375rem; --space-4: 0.5rem;
  --space-5: 0.625rem; --space-6: 0.75rem;  --space-7: 0.875rem; --space-8: 1rem;
  --space-9: 1.25rem;  --space-10: 1.5rem;  --space-11: 1.75rem; --space-12: 2rem;
  --space-13: 2.5rem;  --space-14: 3rem;    --space-15: 4rem;    --space-16: 6rem;

  /* ── Shape ───────────────────────────────────────────────────────────────
     Radius is a signal about size and softness. Seventeen of them in one
     visual family is noise, so: four steps plus the two circular cases. The
     asymmetric variants were duplicating the job of the coloured border they
     sit beside — the border already does it. */
  --r-sm: 10px;     /* chips, buttons, nav items, inline controls */
  --r-md: 18px;     /* cards, panels, sticky bars */
  --r-lg: 26px;     /* large panels and figures */
  --r-xl: 34px;     /* the modal, and the hero-scale surfaces */
  --r-pill: 999px;

  /* ── Elevation ───────────────────────────────────────────────────────────
     Thirteen shadows with no two alike means nothing reads as one level above
     anything else, which is the entire job of a shadow. Two steps. */
  --e1: 0 1px 2px rgba(0,0,0,0.28), 0 8px 24px -18px rgba(0,0,0,0.65);
  --e2: 0 2px 6px rgba(0,0,0,0.36), 0 18px 44px -22px rgba(0,0,0,0.8);

  /* ── Motion ──────────────────────────────────────────────────────────────
     Hover feedback ran at 0.2 / 0.22 / 0.24 / 0.25 / 0.4s. The first four are
     perceptually identical: not a system, four people's worth of typing. */
  --t-state: 160ms;   /* colour, border, background */
  --t-move:  220ms;   /* transform, opacity — immediate, with enough continuity to track */
  --t-enter: 520ms;   /* a composed surface entering the layout */
  --t-attention: 760ms; /* one-time orientation after an explicit journey */
  --t-handoff-delay: 80ms; /* lets the nav clear before the compact identity appears */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* the site-wide curve */
  --ease-spring: cubic-bezier(0.34, 1.42, 0.42, 1); /* overshoots, barely */

  /* Weights: four steps. 500, 550, 650 and 750 were hand-tuning, not a scale. */
  --weight-normal: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-black: 800;
}

*, *::before, *::after { box-sizing: border-box; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
html {
  max-width: 100%; overflow-x: hidden; overflow-x: clip;
  -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--sticky-offset) + 0.75rem);
}
body, h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd, dt { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; }

body {
  background: var(--ground);
  /* Two very soft lobes, fixed to the viewport. Glass over flat black reads as
     a grey card; glass over a slow gradient reads as glass. Kept far below the
     contrast floor — measured, not guessed. */
  background-image:
    radial-gradient(58% 44% at 78% -6%, rgba(208,138,92,0.055), transparent 68%),
    radial-gradient(52% 40% at 6% 34%, rgba(119,176,166,0.038), transparent 70%),
    radial-gradient(70% 50% at 50% 112%, rgba(147,176,137,0.030), transparent 72%);
  background-attachment: fixed;
  color: var(--ink-2);
  font-family: var(--text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  max-width: 100%; overflow-x: hidden; overflow-x: clip;
}
/* Native dialog focus trapping does not prevent the page beneath it from
   moving on every browser. Fix the document at its current offset while the
   Perspective panel is open, then app.js restores that exact reading position. */
html.mind-scroll-locked, html.mind-scroll-locked body { overflow: hidden; overscroll-behavior: none; }
html.mind-scroll-locked body {
  position: fixed; inset: var(--mind-lock-top, 0) 0 auto; width: 100%; padding-inline-end: var(--mind-lock-gutter, 0px);
}
/* Figures are compared, so they line up. */
b, strong, time{ font-variant-numeric: tabular-nums; }

::selection { background: var(--rust); color: var(--ground); }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }

/* A modal dialog receives focus when it opens, but it is a layout container,
   not an interactive control. Keep the visible focus treatment on the
   dialog's buttons and links without outlining the two-card stage. */
.mind-panel:focus, .mind-panel:focus-visible { outline: none; }

/* A compound word the line breaker is allowed to split at its hyphen, and
   should not: "post-" ending a line reads as a typo. */
.nb { white-space: nowrap; }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; font-size: var(--fs-label);
}
.wrap { width: min(100%, var(--max)); min-width: 0; margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: fixed; top: 0; left: 0; z-index: 200; padding: 0.875rem 1.25rem;
  background: var(--rust); color: var(--ground); font-weight: 700; font-size: var(--fs-small);
  text-decoration: none; transform: translateY(-120%); transition: transform var(--t-state) var(--ease);
}
.skip:focus { transform: none; }

/* ── type roles ───────────────────────────────────────────────────────────
   The small uppercase tracked label is the most-used element on the site and
   the clearest expression of the "instrument" idea. It was defined from
   scratch in twenty separate rules, with four sizes, three weights and nine
   trackings — all producing visually the same thing. One rule now, at the
   median of what was already there, so most labels move by less than a third
   of a pixel per character. Colour is the only variable, because colour is the
   only thing that ever carried meaning here: rust is interactive, teal is
   measured, ink-3 is neutral.

   Two labels legitimately sit one step up, because they title a whole panel
   rather than a row: .node em and .case-bridge__core span. They take the same
   tracking at --fs-micro. */
.label,
.glance dt, .scope dt, .watch dt, .seek dt, .caps__row dt,
.case-snapshot dt, .case-abstract dt, .artifact-grid dt, .decision-card dt,
.outcome > b:first-child, .rule__stops b, .map__core p, .map__relationships b,
.mind-panel__action small, .readiness-console li em,
.opportunity-frame span, .backlog-example__intent span,
.node em, .case-bridge__core span {
  font-size: var(--fs-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.node em, .case-bridge__core span { font-size: var(--fs-micro); }
.label { font-size: var(--fs-micro); }
.label--rust { color: var(--rust); }
.label--teal { color: var(--teal); }

h1, h2, h3, h4 { font-weight: 600; color: var(--ink); line-height: var(--lh-tight); letter-spacing: -0.012em; text-wrap: balance; }
.h-xl { font-size: var(--fs-h1); }
.h-lg { font-size: var(--fs-h2); }

/* Geist explains and evidences. The serif is reserved for identity and
   personal reflection. (This comment was left unclosed by an over-eager dead-rule
   sweep, which silently commented out both .quote rules below on six pages.) */
.quote {
  font-family: var(--text); font-weight: 600; letter-spacing: -0.015em;
  font-size: var(--fs-quote); line-height: var(--lh-snug); color: var(--ink);
}
.quote--personal {
  font-family: var(--display); font-weight: 400; font-style: italic; letter-spacing: -0.005em;
  font-size: var(--fs-personal); line-height: var(--lh-snug); color: var(--sand);
}

/* ── section frame: one labelled rule, varied fills. ─────────────────────── */
.sec { padding-block: clamp(3.2rem, 8vh, 5.5rem); }
.sec__head { display: grid; gap: 0.875rem; margin-bottom: clamp(1.8rem, 4vh, 2.8rem); }
.sec__aside { max-width: min(var(--measure), 38rem); }
.sec__aside--stack { display: grid; gap: 0.75rem; }
.sec__meta { display: flex; align-items: center; gap: 1rem; }
.sec__meta .label { flex: 0 1 auto; min-width: 0; }
.sec__meta::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }
@media (min-width: 60rem) {
  .sec__head { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: start; gap: 1.5rem 3rem; }
  .sec__head--solo { grid-template-columns: minmax(0, 1fr); }
  .sec__meta { grid-column: 1 / -1; }
  .sec__aside { padding-bottom: 0.375rem; }
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 48px; padding: 0.75rem 1.5rem;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--glass); box-shadow: var(--specular);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
  transition: border-color var(--t-state) var(--ease-out), background var(--t-state) var(--ease-out),
              color var(--t-state) var(--ease-out), transform var(--t-move) var(--ease-spring),
              box-shadow var(--t-move) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) { .btn { backdrop-filter: var(--glass-blur); } }
.btn:hover { border-color: var(--line-3); background: var(--glass-2); transform: translateY(-1px); box-shadow: var(--e1), var(--specular-2); }
.btn:active { transform: translateY(0); }
.btn--go {
  border-color: transparent; color: #10171A;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rust) 92%, white), var(--rust));
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn--go:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--rust) 84%, white), color-mix(in srgb, var(--rust) 96%, white));
  border-color: transparent; box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,0.34);
}
.btn__icon {
  width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* Was transitioning width, which runs layout on the parent every frame for a
   6px growth on a 1px rule. transform-origin plus scaleX is free. */
.btn__arrow { width: 21px; height: 1px; background: currentColor; transform: scaleX(0.714); transform-origin: 0 50%; transition: transform var(--t-move) var(--ease); }
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow,
a.card:hover .card__go .btn__arrow,
a.card:focus-visible .card__go .btn__arrow,
.world__to:hover .btn__arrow,
.world__to:focus-visible .btn__arrow { transform: scaleX(1); }


/* ── top bar ─────────────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 70;
  background: rgba(7, 9, 10, 0.94); border-bottom: 1px solid var(--line);
}
.bar-shield { display: none; }
/* 0.76 left a quarter of whatever scrolled underneath showing through — a
   ~1.93:1 step against the bar, comfortably readable as a ghost. At 0.92 the
   step drops below the perceptual threshold and the blur stops being
   load-bearing for legibility. */
@supports (backdrop-filter: blur(1px)) { .bar { background: var(--glass-solid); backdrop-filter: var(--glass-blur); } }
.bar__in {
  display: flex; align-items: center; gap: clamp(0.5rem, 0.0357rem + 1.905vw, 1.75rem);
  width: min(100%, var(--max)); min-width: 0; max-width: 100%; margin-inline: auto; padding: 0.5rem var(--pad);
}
.mark {
  display: inline-flex; align-items: center; gap: 0.625rem; margin-right: auto;
  min-height: 40px; text-decoration: none; white-space: nowrap;
}
.mark__portrait {
  width: 2rem; height: 2rem; flex: 0 0 2rem; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--raise-2);
}
.mark__portrait img { width: 100%; height: 100%; object-fit: cover; }
/* The serif, because this is the same word that lands here from the hero and a
   flight that changes typeface halfway is a swap, not a move. At this size the
   face still has its ascenders, and it distinguishes the name from the nav. */
.mark__name {
  font-family: var(--display); font-size: var(--fs-body); font-weight: 500; color: var(--ink);
  /* Tracking and leading match the hero's h1 exactly, in ratio units. The
     flight scales one copy of this word from there to here, and a uniform
     scale only lands true if the two ends differ in nothing but size. */
  letter-spacing: -0.03em; line-height: var(--lh-hero);
}
.mark__text { min-width: 0; }
.mark__role { font-size: var(--fs-small); font-weight: 400; color: var(--ink-3); }
.mark__role::before { content: '— '; }
/* Below this the header used to collapse to a 32px portrait with the name at
   zero width: the identity on the screen most of the audience uses was an
   unlabelled photograph. A 28px portrait buys back the room for the name. */
@media (max-width: 46rem) {
  .mark__portrait { width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; }
  .mark { gap: 0.5rem; }
  .mark__text { display: grid; gap: var(--space-1); }
  .mark__name { font-size: var(--fs-tight); }
  .mark__role { display: block; font-size: var(--fs-label); line-height: var(--lh-tight); }
  .mark__role::before { content: none; }
}

.bar__actions {
  display: flex; flex: none; align-items: center; gap: 0.0625rem; padding: 0.1875rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: rgba(236,239,238,0.035); box-shadow: var(--specular);
}
.bar__icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid transparent; border-radius: 50%; color: var(--ink-3);
  text-decoration: none;
  transition: color var(--t-state) var(--ease), border-color var(--t-state) var(--ease), background-color var(--t-state) var(--ease);
}
.bar__icon svg {
  width: 1.0625rem; height: 1.0625rem; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.bar__icon--mail { color: var(--rust); }

/* The nav carries a scroll-driven transform on the home page — see the
   identity flight. Promoting it keeps that on the compositor. */
.nav { display: flex; min-width: 0; gap: 0.125rem; will-change: transform; }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.625rem;
  font-size: var(--fs-small); font-weight: var(--weight-medium); color: var(--ink-3); text-decoration: none;
  border-radius: var(--r-pill); transition: color var(--t-state) var(--ease-out),
    background-color var(--t-state) var(--ease-out), box-shadow var(--t-state) var(--ease-out);
}
.nav a:focus-visible, .case-nav a:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--rust); }
.nav a.is-on { color: var(--ink); }
.nav a[aria-current='page'] { color: var(--rust); }
@media (min-width: 56.01rem) {
  .nav a.is-on {
    background-color: rgba(119,176,166,0.055);
  }
}
/* Below the breakpoint the nav moves to its own row and scrolls sideways.
   It used to be hidden outright, which left a phone reader — the largest part of
   the audience — with no way to reach a section or the other two pages except by
   scrolling the whole document. */
@media (max-width: 56rem) {
  :root { --sticky-offset: 6.625rem; }
  .bar__in { flex-wrap: wrap; row-gap: 0.25rem; padding-bottom: 0; }
  .nav {
    order: 3; width: calc(100% + var(--pad) * 2); margin-inline: calc(var(--pad) * -1);
    max-width: calc(100% + var(--pad) * 2); padding-inline: var(--pad); margin-top: 0.25rem;
    display: grid; grid-template-columns: repeat(5, max-content); justify-content: space-between;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    border-top: 1px solid var(--line);
  }
  /* JS adds these attributes only when links exist off-screen. The fade gives
     touch users a scroll cue without adding noise to the accessible name. */
  .nav[data-scroll-right]:not([data-scroll-left]) {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.75rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.75rem), transparent 100%);
  }
  .nav[data-scroll-left][data-scroll-right] {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2.75rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2.75rem), transparent 100%);
  }
  .nav[data-scroll-left]:not([data-scroll-right]) {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 100%);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { min-height: 42px; padding: 0 var(--space-1); font-size: var(--fs-micro); }
}
@media (min-width: 30rem) and (max-width: 56rem) {
  .nav a { padding-inline: var(--space-2); font-size: var(--fs-small); }
}
@media (min-width: 46.01rem) and (max-width: 56rem) {
  :root { --sticky-offset: 7.125rem; }
}
@media (max-width: 22rem) {
  .bar__in { gap: 0.375rem; }
  .mark { gap: 0.5rem; }
  .mark__name { font-size: var(--fs-tight); }
}
@media (max-width: 32rem) {
  :root { --sticky-offset: 6.125rem; }
  .bar__in { row-gap: 0.25rem; padding-top: 0.375rem; }
  .mark__role { display: none; }
  .nav {
    grid-template-columns: 0.82fr 1.2fr 1.04fr 0.86fr 1.08fr;
    justify-content: stretch; gap: 0; margin-top: 0; padding-inline: 0.5rem;
    overflow: visible; -webkit-mask-image: none !important; mask-image: none !important;
  }
  .nav a {
    position: relative; justify-content: center; min-width: 0; min-height: 44px; padding-inline: 0.125rem;
    border: 1px solid transparent; border-radius: var(--r-sm);
    font-size: var(--fs-micro); white-space: nowrap;
  }
  .nav a.is-on, .nav a[aria-current='page'] {
    border-color: transparent;
    background-color: rgba(119,176,166,0.085);
    box-shadow: inset 0 0 0 1px rgba(119,176,166,0.12);
  }
  .bar__rail { display: none; }
}
/* The name used to be hidden entirely below 26rem — 416px, which is most
   phones — leaving an unlabelled photograph as the identity on the screen the
   largest part of the audience uses. The 28px portrait above buys back the
   room, so the name stays. */
/* One hairline in the accent, sitting on the header's own border. The warm-to-
   cool gradient makes progress legible without turning the rail into a second
   visual element; 1px keeps it integrated with the header border. */
.bar__rail {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--rust), var(--sand) 48%, var(--teal));
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero { --hero-measure: 40.875rem; padding-block: clamp(2.2rem, 5.5vh, 3.6rem) clamp(2.4rem, 6vh, 4rem); }
.hero__grid { display: grid; gap: clamp(1.5rem, 0.9429rem + 2.286vw, 2.5rem); }
@media (min-width: 58rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-content: start; align-items: start;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
}

/* The face, at a size that reads as a person rather than as an avatar. It used
   to be a 4rem chip inside the glance card, beside a label — a photograph
   demoted to a bullet. It is also the start of the flight into the bar, which
   is why it is a circle at both ends: the radius never has to interpolate
   between a length and a percentage. */
/* Photograph, then name, then role — each starting at the page's left edge, the
   same one the claim, the paragraph and the row of buttons start at, and the
   same one every section heading below uses. Beside the name the photograph
   pushed the name and role in to clear it, which put two left edges inside one
   block of text: the thing that reads as crooked no matter how well the rest is
   set. One axis is what makes this look composed rather than arranged. */
.hero__id { display: grid; justify-items: start; gap: clamp(0.9rem, 2vh, 1.35rem); }
.hero__who { min-width: 0; }
.hero__who .label { display: block; margin-top: clamp(0.35rem, 0.9vh, 0.6rem); }

.hero__portrait {
  --d: clamp(4.25rem, 3.1rem + 3vw, 6.25rem);
  width: var(--d); height: var(--d); margin: 0; position: relative; isolation: isolate;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--e2), var(--specular);
}
.hero__portrait::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: linear-gradient(150deg, rgba(208,138,92,0.14), transparent 46%, rgba(119,176,166,0.12));
}
.hero__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__portrait { flex: none; }

/* The name sits at the h1 step the case pages use, not a size of its own. At
   80px it was the loudest thing on a page whose argument is the sentence
   underneath it, and it needed a step in the scale that nothing else wanted. */
.hero__name { font-family: var(--display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-hero); letter-spacing: -0.03em; }
/* The hero's three widths used to descend in the wrong order against their
   sizes: the name ran 728px, the claim 416px, and the smaller paragraph beneath
   it 520px — so the most important sentence was in the narrowest column, over
   five short lines with a very ragged right edge. The claim now sits between
   the two, and balance evens the rag. Narrowing it further reads well only for
   a shorter sentence than this one. */
/* Both are capped to the same measure as the action row, keeping the hero on
   one composed axis as content and reader font size change. */
.hero__claim { margin-top: clamp(1.4rem, 3vh, 2rem); font-size: var(--fs-quote); font-weight: var(--weight-medium); line-height: var(--lh-snug); color: var(--ink); max-width: var(--hero-measure); text-wrap: pretty; }
/* This paragraph used to open and close with the two facts the glance card
   states beside it, verbatim. What is left is the part only prose can carry. */
.hero__sub { margin-top: 1rem; max-width: var(--hero-measure); color: var(--ink-2); }
.hero__acts { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.75rem; }

/* At a glance — the same bordered cells the contact panel uses, so the two
   scannable fact blocks on the page are one component rather than two designs. */
.glance {
  display: grid; gap: 1px; align-content: start;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.glance__k { margin: 0; padding: 0.75rem 1rem 0.625rem; background: var(--glass-2); }
.glance dl { display: grid; gap: 1px; background: var(--line); }
.glance dl > div { display: grid; gap: 0.25rem; padding: 0.75rem 1rem; background: var(--raise); }
.glance dt { color: var(--rust); }
.glance dd { font-size: var(--fs-tight); line-height: var(--lh-normal); color: var(--ink-2); }
@media (min-width: 40rem) and (max-width: 57.99rem) {
  .glance dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── recruiter-first professional evidence ────────────────────────────────
   The implemented product now arrives immediately after the hero. Its visual
   is explicitly a reconstructed interaction model: enough to make the product
   legible without suggesting that confidential UI has been reproduced. */
.work-first { padding-top: clamp(2.6rem, 6vh, 4.25rem); }
.flagship-case {
  display: grid; grid-template-areas: "copy" "visual" "action"; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background:
    radial-gradient(46rem 26rem at -5% -15%, rgba(208,138,92,0.11), transparent 68%),
    radial-gradient(38rem 24rem at 105% 105%, rgba(119,176,166,0.10), transparent 70%),
    var(--glass);
  box-shadow: var(--e2), var(--specular); color: inherit; text-decoration: none;
  transition: border-color var(--t-state) var(--ease-out), transform var(--t-move) var(--ease-spring), box-shadow var(--t-move) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) { .flagship-case { backdrop-filter: var(--glass-blur); } }
.flagship-case:is(:hover, :focus-visible) { border-color: var(--line-3); transform: translateY(-2px); box-shadow: var(--e2), var(--specular-2); }
.flagship-case__copy { grid-area: copy; min-width: 0; padding: clamp(1.25rem, 1.064rem + 0.762vw, 1.75rem) clamp(1.25rem, 0.971rem + 1.143vw, 2rem) 0.75rem; }
.flagship-case__copy h3 { max-width: 23ch; margin-top: 0.75rem; font-size: clamp(1.4rem, 1.177rem + 0.914vw, 2rem); }
.flagship-case__summary { max-width: 55ch; margin-top: 0.7rem; color: var(--ink-2); }
.flagship-case__proof { margin-top: 0.9rem; border-left: 2px solid var(--teal); }
.flagship-case__proof > div { display: grid; gap: 0.25rem; min-width: 0; padding: 0.625rem 0 0.625rem 0.875rem; }
.flagship-case__proof dt { color: var(--teal); }
.flagship-case__proof dd { font-size: var(--fs-tight); line-height: var(--lh-normal); color: var(--ink-2); }
.flagship-case__go {
  grid-area: action; margin: 0; padding: 0.5rem clamp(1.25rem, 0.971rem + 1.143vw, 2rem) clamp(1.25rem, 1.064rem + 0.762vw, 1.75rem);
}
.flagship-case__visual {
  grid-area: visual; display: grid; align-content: center; gap: 0.75rem; min-width: 0;
  padding: clamp(1.1rem, 0.914rem + 0.762vw, 1.6rem);
  border-top: 1px solid var(--line); background: rgba(5,9,10,0.54);
}
.flagship-case__visual-k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
.flagship-case__visual-k span {
  font-size: var(--fs-label); font-weight: var(--weight-bold); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal);
}
.flagship-case__visual-k small { font-size: var(--fs-micro); color: var(--ink-3); }
.product-flow { display: grid; gap: 0.5rem; }
.product-flow li {
  position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.125rem 0.7rem;
  min-width: 0; padding: 0.7rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(9,14,16,0.88);
  transition: transform var(--t-move) var(--ease-spring), border-color var(--t-state) var(--ease-out), background-color var(--t-state) var(--ease-out);
}
.product-flow li::after {
  content: ''; position: absolute; z-index: 2; left: 1.72rem; top: 100%; width: 1px; height: 0.5rem;
  background: linear-gradient(var(--rust), var(--teal)); opacity: 0.46; transform-origin: top;
  transition: opacity var(--t-state) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.product-flow li:last-child::after { content: none; }
.product-flow li span {
  grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid var(--line-2); border-radius: 50%; font-size: var(--fs-label); font-weight: var(--weight-black); color: var(--rust);
}
.product-flow li b { font-size: var(--fs-tight); color: var(--ink); }
.product-flow li small { font-size: var(--fs-micro); line-height: var(--lh-normal); color: var(--ink-3); }
.product-flow li.is-output { background: linear-gradient(100deg, rgba(119,176,166,0.11), transparent 78%), rgba(9,14,16,0.88); }
.product-flow li.is-output span { border-color: color-mix(in srgb, var(--teal) 52%, var(--line)); color: var(--teal); }
.flagship-case__reconstruction { padding-top: 0.625rem; border-top: 1px solid var(--line); font-size: var(--fs-micro); line-height: var(--lh-normal); color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) {
  .flagship-case:is(:hover, :focus-visible) .product-flow li { transform: translateY(-2px); border-color: var(--line-2); }
  .flagship-case:is(:hover, :focus-visible) .product-flow li:nth-child(2) { transition-delay: 35ms; }
  .flagship-case:is(:hover, :focus-visible) .product-flow li:nth-child(3) { transition-delay: 70ms; }
  .flagship-case:is(:hover, :focus-visible) .product-flow li::after { opacity: 0.95; transform: scaleY(1.1); }
}
@media (min-width: 48rem) {
  .flagship-case {
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
    grid-template-areas: "copy visual" "action visual"; align-items: stretch;
  }
  .flagship-case__visual { border-top: 0; border-left: 1px solid var(--line); }
}
@media (min-width: 68rem) {
  .product-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
  .product-flow li { display: flex; min-height: 8.25rem; flex-direction: column; align-items: flex-start; gap: 0.375rem; }
  .product-flow li span { flex: none; }
  .product-flow li::after { left: 100%; top: 1.72rem; width: 0.625rem; height: 1px; transform-origin: left; }
  .flagship-case:is(:hover, :focus-visible) .product-flow li::after { transform: scaleX(1.1); }
}

/* The identity lives in the hero until it passes beneath the header. The
   compact portrait and portfolio mark then settle into the bar as one short,
   reversible handoff rather than tracking the scrollbar frame by frame. */
.js.handoff-boot .mark,
.js.has-hero .mark {
  opacity: 0; visibility: hidden; transform: translateY(0.55rem) scale(0.96); transform-origin: 0 50%;
  transition: opacity var(--t-move) var(--ease-out), transform var(--t-move) var(--ease-out),
              visibility 0s linear var(--t-move);
}
.js.has-hero.is-marked .mark {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-move) var(--ease-out), transform var(--t-move) var(--ease-spring),
              visibility 0s;
}
@media (min-width: 56.01rem) {
  .js.has-hero .nav {
    transform: translate3d(var(--nav-shift, 0px), 0, 0);
    transition: transform var(--t-move) var(--ease-out);
  }
  .js.has-hero.is-marked .nav { transform: none; }
}

/* At the narrowest one-row header widths, the nav still crosses the mark's
   landing area. Let that movement clear before the identity becomes visible. */
@media (min-width: 56.01rem) and (max-width: 64rem) {
  .js.has-hero.is-marked .mark {
    transition: opacity var(--t-move) var(--ease-out) var(--t-handoff-delay),
                transform var(--t-move) var(--ease-spring), visibility 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js.has-hero .mark { transition: none; }
  .js.has-hero .nav { transform: none; transition: none; }
}

/* ── evidence: roles ─────────────────────────────────────────────────────── */
.role { border-top: 1px solid var(--line); padding-block: clamp(1.6rem, 3.6vh, 2.4rem); }
.role:last-of-type { border-bottom: 1px solid var(--line); }
/* The current role flows directly into the optional career disclosure. Let
   the disclosure's own leading rule separate them; a trailing role border plus
   a second rule twelve pixels later read as an accidental empty strip. */
.roles:not(.roles--earlier) > .role:last-child { border-bottom: 0; }
@media (min-width: 60rem) { .role { display: grid; grid-template-columns: 17rem 1fr; gap: 3rem; align-items: start; } }
@media (min-width: 52rem) and (max-width: 59.99rem) {
  .role { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 2rem; align-items: start; }
  .role__what { margin-top: 0; }
}
.role__id { display: grid; gap: 0.25rem; }
@media (min-width: 60rem) { .role__id { position: sticky; top: 5.5rem; } }
.role__title { font-size: var(--fs-lead); font-weight: 700; color: var(--ink); }
.role__org { font-size: var(--fs-tight); color: var(--ink-2); }
.role__time { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.06em; color: var(--ink-3); }
.role__what { margin-top: 1rem; font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--ink); max-width: 54ch; }
@media (min-width: 60rem) { .role__what { margin-top: 0; } }
.did__k { margin-top: 1.25rem; }
.did { margin-top: 1rem; display: grid; gap: 0.7rem; max-width: 62ch; }
.did__k + .did { margin-top: 0.75rem; }
.did li { position: relative; padding-left: 1rem; font-size: var(--fs-tight); line-height: var(--lh-body); }
.did li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 6px; height: 1px; background: var(--rust); }
.did strong { color: var(--ink); font-weight: 700; }
.did--continuation { margin-top: 0.7rem; }

/* ── progressive disclosure: preserve the evidence, reduce first-read load ─
   The complete role scope remains in the document and in print. JavaScript
   only gives secondary detail a concise control; without it, everything is
   visible. The grid-row transition moves content immediately, with no delayed
   opacity change that could make the copy appear to lag behind the control. */
.disclosure--role { max-width: 62ch; }
.disclosure--career { margin-top: 0; }
.disclosure--career > .disclosure__toggle { margin-top: 0; padding-block: 0.9rem; }
.disclosure--career.is-open > .disclosure__toggle { color: var(--ink); border-color: var(--line-2); }
.roles--earlier .role:first-child { border-top: 0; }
.disclosure__panel { display: grid; grid-template-rows: 1fr; }
.disclosure__inner { min-height: 0; overflow: hidden; }
.disclosure-bound.is-collapsible:not(.is-open) > .disclosure__panel {
  grid-template-rows: 0fr; pointer-events: none;
}
.disclosure-ready > .disclosure__panel {
  transition: grid-template-rows var(--t-state) var(--ease-out);
}
.disclosure-skip-transition > .disclosure__panel { transition: none !important; }
.disclosure--role.disclosure-ready > .disclosure__panel,
.disclosure--career.disclosure-ready > .disclosure__panel { transition: none; }
.disclosure__toggle {
  display: flex; width: 100%; min-height: 48px; margin-top: 0.75rem;
  align-items: center; gap: 0.625rem; padding: 0.7rem 0.25rem 0.7rem 1rem;
  border-bottom: 1px solid var(--line); color: var(--ink-2); cursor: pointer;
  text-align: left;
  transition: color var(--t-state) var(--ease-out), border-color var(--t-state) var(--ease-out);
}
.disclosure__toggle[hidden] { display: none; }
.disclosure__toggle:hover { color: var(--ink); border-color: var(--line-3); }
.disclosure__label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-small); font-weight: var(--weight-medium); }
.disclosure__meta {
  flex: none; padding: 0.25rem 0.5rem; border: 1px solid var(--line);
  border-radius: var(--r-pill); color: var(--ink-3); font-size: var(--fs-label);
  font-weight: var(--weight-bold); letter-spacing: 0.14em; text-transform: uppercase;
}
.disclosure__meta:empty { display: none; }
.disclosure__icon {
  width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-state) var(--ease-out);
}
.disclosure.is-open > .disclosure__toggle .disclosure__icon,
.caps-shell.is-open > .disclosure__toggle .disclosure__icon { transform: rotate(180deg); }
.disclosure--case-patterns {
  border-bottom: 1px solid var(--line);
}
.disclosure--case-patterns > .disclosure__toggle {
  margin-top: 0; padding: 1rem 0.25rem 1rem 1rem; border-bottom: 0;
}
.disclosure--case-patterns .disclosure__inner > .case-phase:first-child { border-top: 1px solid var(--line); }
.disclosure--case-detail { margin-top: 0.75rem; }
.disclosure--case-detail > .disclosure__toggle { margin-top: 0; padding-inline: 0 0.25rem; }
.disclosure--case-detail.is-open > .disclosure__toggle { color: var(--ink); border-color: var(--line-2); }
.disclosure--case-detail.disclosure-ready > .disclosure__panel { transition: none; }
@media (max-width: 25rem) {
  .disclosure__toggle { gap: 0.5rem; }
  .disclosure__meta { padding-inline: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .disclosure-ready > .disclosure__panel, .disclosure__icon { transition: none; }
}
.outcome {
  margin-top: 1rem; max-width: 62ch; padding: 0.875rem 1rem;
  border: 1px solid var(--line); border-left: 2px solid var(--teal); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--glass); font-size: var(--fs-tight); line-height: var(--lh-body); color: var(--ink-2);
}
/* Scoped to the leading label. Unscoped, any <b> later in the paragraph turned
   into a block-level uppercase eyebrow in the middle of a sentence. */
.outcome > b:first-child { display: block; margin-bottom: 0.125rem; color: var(--teal); }
.outcome b { color: var(--ink); font-weight: 600; }

/* ── scope: the magnitude of a role, stated before the verbs ──────────────
   The first audit fixed positioning; the second found that every figure on the
   site came from coursework while the paid work was described entirely in
   verbs. This is where a role's real numbers go, above its responsibilities. */
.scope {
  display: grid; gap: 1px; margin-top: 1rem; max-width: 62ch;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
@media (min-width: 34rem) { .scope { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .scope { grid-template-columns: repeat(4, 1fr); } }
.scope > div { background: var(--raise); padding: 0.75rem 1rem; }
.scope dt { color: var(--ink-3); }
.scope dd { margin-top: 0.25rem; font-size: var(--fs-h3); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.scope small { display: block; margin-top: 0.25rem; font-size: var(--fs-micro); font-weight: 400; line-height: var(--lh-normal); color: var(--ink-3); }

/* ── watch: the measures a role is actually run from ─────────────────────
   "I hold the launch to its KPIs" is a sentence anyone can write. Naming the
   dozen indicators the portfolio is reviewed against is the version a hiring
   manager can ask a follow-up question about. */
.watch {
  margin-top: 1rem; max-width: 62ch; overflow: hidden;
  border: 1px solid var(--line); border-left: 2px solid var(--rust); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--glass);
}
.watch__k { padding: 0.75rem 1rem 0; }
.watch dl { display: grid; gap: 1px; margin-top: 0.75rem; background: var(--line); border-top: 1px solid var(--line); }
.watch dl > div { background: var(--raise); padding: 0.75rem 1rem; }
@media (min-width: 40rem) {
  .watch dl > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: baseline; }
}
.watch dt { color: var(--ink-3); }
.watch dd { font-size: var(--fs-tight); line-height: var(--lh-body); color: var(--ink-2); }
@media (max-width: 40rem) { .watch dd { margin-top: 0.25rem; } }
.watch dd b { color: var(--ink); font-weight: 600; }

/* ── capabilities: category cards and individually legible tags ─────────── */
/* Eight cards in a rigid three-column grid gave rows of 3, 3 and 2 — a dangling
   empty cell, and rows stretched to the tallest card so short ones carried a
   void at the bottom. auto-fit at a 15rem minimum yields four columns in the
   same container, and align-items: start lets each card size to its content. */
.caps-shell { margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.caps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start; gap: 0.75rem; margin-top: 0;
}
.caps--secondary { margin-top: 0.75rem; }
@media (min-width: 40rem) and (max-width: 69.99rem) {
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .caps > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 70rem) {
  .caps { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
  .caps > :nth-child(-n + 4) { grid-column: span 3; }
  .caps > :nth-child(n + 5) { grid-column: span 4; }
  .caps--secondary > :nth-child(n) { grid-column: span 4; }
}
.caps__row {
  display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 0.75rem;
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: linear-gradient(145deg, rgba(208,138,92,0.045), transparent 52%), var(--raise);
}
.caps__row dt {
  width: 100%; padding-bottom: 0.625rem; border-bottom: 1px solid var(--line);
  color: var(--rust);
}
.caps__row dd { display: flex; min-width: 0; flex-wrap: wrap; gap: 0.5rem; color: var(--ink-2); }
.caps__row dd span {
  min-width: 0; max-width: 100%; padding: 0.375rem 0.625rem;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--raise-2);
  font-size: var(--fs-micro); line-height: var(--lh-snug); white-space: normal; overflow-wrap: anywhere;
}

/* ── method: numbered decision principles ───────────────────────────────── */
.rules {
  display: grid; gap: 1px; overflow: visible; isolation: isolate;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--line);
}
.rule {
  position: relative; display: grid; min-width: 0;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  grid-template-areas:
    "number title"
    ". body"
    ". risk";
  gap: 0.625rem 0.875rem;
  padding: clamp(1.1rem, 0.9857rem + 0.476vw, 1.35rem);
  border: 0; border-radius: 0;
  background: linear-gradient(145deg, rgba(119,176,166,0.026), transparent 52%), var(--raise);
  box-shadow: none;
  transform: translateX(0); transform-origin: left center;
  transition: transform var(--t-state) var(--ease-out), background-color var(--t-state) var(--ease-out),
              box-shadow var(--t-state) var(--ease-out);
}
.rule:first-child { border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.rule:last-child { border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px); }
.rule:nth-child(even) {
  background: linear-gradient(145deg, rgba(208,138,92,0.026), transparent 52%), var(--raise);
}
.rule::before {
  content: ''; position: absolute; inset: 0.875rem auto 0.875rem 0; width: 2px;
  background: linear-gradient(180deg, var(--rust), var(--teal)); opacity: 0.58;
  transition: opacity var(--t-state) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .rule:hover {
    z-index: 2; transform: translateX(3px);
    background-color: var(--raise-2);
    box-shadow: var(--e1);
  }
  .rule:hover::before { opacity: 1; }
}
.rule__n {
  grid-area: number;
  display: grid; place-items: center; width: 2.35rem; height: 2.35rem;
  border: 1px solid color-mix(in srgb, var(--rust) 44%, var(--line)); border-radius: var(--r-sm);
  background: rgba(208,138,92,0.055); font-size: var(--fs-label); font-weight: 800;
  letter-spacing: 0.12em; color: var(--rust);
}
.rule h3 {
  grid-area: title; align-self: center; max-width: 27ch;
  font-size: var(--fs-body); font-weight: 700; line-height: var(--lh-snug);
}
.rule > p:not(.rule__n):not(.rule__stops) {
  grid-area: body; font-size: var(--fs-tight); line-height: var(--lh-body); color: var(--ink-2);
}
.rule__stops {
  grid-area: risk; padding-top: 0.75rem; border-top: 1px solid var(--line);
  font-size: var(--fs-micro); line-height: var(--lh-body); color: var(--ink-3);
}
.rule__stops b { display: block; margin-bottom: 0.35rem; color: var(--teal); }

.approach-case {
  position: relative; display: grid; gap: 0.75rem; align-items: center;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem); padding: clamp(1.1rem, 2.5vw, 1.4rem);
  border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line)); border-left: 3px solid var(--teal);
  border-radius: var(--r-md);
  background:
    radial-gradient(32rem 13rem at 0% 50%, rgba(119,176,166,0.13), transparent 70%),
    linear-gradient(120deg, rgba(119,176,166,0.055), rgba(208,138,92,0.018) 72%),
    #0a1214;
  box-shadow: var(--e1), var(--specular); color: inherit; text-decoration: none;
  transition: border-color var(--t-state) var(--ease-out), background var(--t-state) var(--ease-out), transform var(--t-move) var(--ease-spring);
}
.approach-case:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--teal) 58%, var(--line));
  background:
    radial-gradient(32rem 13rem at 0% 50%, rgba(119,176,166,0.17), transparent 70%),
    linear-gradient(120deg, rgba(119,176,166,0.075), rgba(208,138,92,0.024) 72%),
    #0b1517;
  transform: translateY(-1px);
}
.approach-case__copy { display: grid; gap: 0.25rem; min-width: 0; }
.approach-case__copy b { font-size: var(--fs-body); color: var(--ink); }
.approach-case__copy small { max-width: var(--measure); font-size: var(--fs-tight); line-height: var(--lh-normal); color: var(--ink-2); }
.approach-case__go { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); font-weight: var(--weight-medium); color: var(--rust); }
.approach-case:hover .btn__arrow, .approach-case:focus-visible .btn__arrow { transform: scaleX(1); }
@media (min-width: 58rem) {
  .approach-case { grid-template-columns: 13.5rem minmax(0, 1fr) auto; gap: 1.5rem; padding: 1rem 1.25rem; }
  .approach-case__go { justify-self: end; }
}

@media (min-width: 44rem) {
  .rule {
    grid-template-columns: 2.35rem minmax(11.5rem, 0.72fr) minmax(0, 1.28fr);
    grid-template-areas:
      "number title body"
      ". title risk";
    column-gap: clamp(1rem, 2vw, 1.5rem);
  }
  .rule h3 { align-self: start; padding-top: 0.325rem; }
}

@media (min-width: 72rem) {
  .rule {
    grid-template-columns: 2.35rem minmax(12rem, 0.72fr) minmax(17rem, 1.35fr) minmax(12rem, 0.93fr);
    grid-template-areas: "number title body risk";
    align-items: start;
  }
  .rule__stops {
    min-height: 100%; padding: 0 0 0 clamp(1rem, 1.5vw, 1.35rem);
    border-top: 0; border-left: 1px solid var(--line);
  }
}

/* ── cards (work, links) ─────────────────────────────────────────────────── */
.cards { display: grid; gap: 1rem; }
@media (min-width: 52rem) { .cards--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 46rem) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 46rem) and (max-width: 69.99rem) {
  .cards--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .case-library__grid > :last-child:nth-child(odd) > p:not(.card__k):not(.card__tags) { max-width: 60ch; }
}
@media (min-width: 70rem) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: clamp(1.375rem, 1.0771rem + 1.1vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--glass); box-shadow: var(--e1), var(--specular);
  text-decoration: none;
  transition: border-color var(--t-state) var(--ease-out), background var(--t-state) var(--ease-out),
              transform var(--t-move) var(--ease-spring), box-shadow var(--t-move) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) { .card { backdrop-filter: var(--glass-blur); } }
a.card:not(.card--featured):is(:hover, :focus-visible) { border-color: var(--line-3); background: var(--glass-2); box-shadow: var(--e2), var(--specular-2); }
a.card:is(:hover, :focus-visible) { transform: translateY(-2px); }
.card--featured {
  border-color: rgba(208,138,92,0.42);
  background:
    radial-gradient(80% 110% at 0% 0%, rgba(208,138,92,0.11), transparent 58%),
    radial-gradient(70% 90% at 100% 100%, rgba(119,176,166,0.06), transparent 64%), var(--raise);
  box-shadow: inset 0 1px rgba(255,255,255,0.025);
}
/* The generic card hover used to replace this whole background with flat
   --raise-2, so the most important link on the page went plain on contact.
   The gradients are restated here, one step warmer. */
a.card--featured:is(:hover, :focus-visible) {
  border-color: rgba(208,138,92,0.7);
  background:
    radial-gradient(80% 110% at 0% 0%, rgba(208,138,92,0.16), transparent 58%),
    radial-gradient(70% 90% at 100% 100%, rgba(119,176,166,0.09), transparent 64%), var(--raise-2);
}
.card__k { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.card h3, .card h4 { font-size: var(--fs-lead); font-weight: 700; }
.card p { font-size: var(--fs-tight); line-height: var(--lh-body); }
.card__go { margin-top: auto; padding-top: 0.375rem; font-size: var(--fs-small); font-weight: 600; color: var(--rust); display: flex; align-items: center; gap: 0.5rem; }

.card__status { margin-left: auto; font-size: var(--fs-label); font-weight: 700; color: var(--ink-3); }
.card .card__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.125rem; }
.card__tags span {
  padding: 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: rgba(236,239,238,0.018); font-size: var(--fs-label); font-weight: 700; color: var(--ink-3);
}

.case-library { display: grid; gap: 0.875rem; }
.case-library .card { gap: 0.625rem; padding: clamp(1.125rem, 0.985rem + 0.57vw, 1.5rem); }
.case-library .card__go { padding-top: 0.25rem; }
.case-library .card__tags { gap: 0.3rem; margin-top: 0; }
.case-library__intro {
  display: grid; gap: 0.5rem; margin-top: 0; padding: 0.25rem 0 0.875rem;
  border-bottom: 1px solid var(--line);
}
.case-library__intro p:last-child { max-width: 70ch; font-size: var(--fs-tight); line-height: var(--lh-body); }
.case-library__intro--second { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.case-library__professional .card, .case-library__grid .card { min-height: 0; }
.academic-archive { padding-top: clamp(2.8rem, 7vh, 4.75rem); }
.academic-cards { display: grid; gap: 1rem; }
.academic-cards .card { min-height: 0; }
.card--academic-featured {
  border-color: color-mix(in srgb, var(--teal) 36%, var(--line));
  background:
    radial-gradient(34rem 20rem at 0% 0%, rgba(119,176,166,0.10), transparent 68%),
    radial-gradient(28rem 18rem at 100% 100%, rgba(208,138,92,0.06), transparent 70%),
    var(--glass);
}
.card--academic-featured h3 { max-width: 24ch; font-size: clamp(1.25rem, 1.1107rem + 0.571vw, 1.625rem); }
.course-route {
  --route-steps: 4; display: grid; grid-template-columns: repeat(var(--route-steps), minmax(0, 1fr));
  min-width: 0; margin-top: 0.125rem; padding: 0.35rem 0 0.2rem; overflow-x: auto;
  scrollbar-width: none; overscroll-behavior-inline: contain;
}
.course-route::-webkit-scrollbar { display: none; }
.course-route--3 { --route-steps: 3; }
.course-route li {
  position: relative; min-width: 0; padding: 1.05rem 0.4rem 0 0;
  font-size: var(--fs-label); font-weight: var(--weight-bold); line-height: var(--lh-normal); color: var(--ink-3);
}
.course-route li::before {
  content: ''; position: absolute; z-index: 1; left: 0; top: 0.36rem; width: 0.46rem; height: 0.46rem;
  border: 1px solid var(--line-3); border-radius: 50%; background: var(--ground);
  transition: transform var(--t-move) var(--ease-spring), border-color var(--t-state) var(--ease-out), background-color var(--t-state) var(--ease-out);
}
.course-route li::after {
  content: ''; position: absolute; left: 0.46rem; right: 0; top: 0.56rem; height: 1px;
  background: linear-gradient(90deg, var(--line-2), var(--line));
  transition: background-color var(--t-state) var(--ease-out), opacity var(--t-state) var(--ease-out);
}
.course-route li:last-child::after { content: none; }
.card--academic-featured .course-route li:first-child::before,
.card--academic-featured .course-route li:last-child::before { border-color: var(--teal); }
@media (hover: hover) and (pointer: fine) {
  .academic-cards .card:is(:hover, :focus-visible) .course-route li::before { transform: translateY(-2px) scale(1.12); border-color: var(--rust); background: rgba(208,138,92,0.16); }
  .academic-cards .card:is(:hover, :focus-visible) .course-route li:nth-child(2)::before { transition-delay: 30ms; }
  .academic-cards .card:is(:hover, :focus-visible) .course-route li:nth-child(3)::before { transition-delay: 60ms; }
  .academic-cards .card:is(:hover, :focus-visible) .course-route li:nth-child(4)::before { transition-delay: 90ms; }
  .academic-cards .card:is(:hover, :focus-visible) .course-route li::after { opacity: 0.9; background: var(--rust); }
}
@media (min-width: 46rem) {
  .academic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--academic-featured { grid-column: 1 / -1; }
}
@media (min-width: 70rem) {
  .academic-cards { grid-template-columns: minmax(0, 1.18fr) repeat(2, minmax(0, 0.91fr)); align-items: stretch; }
  .card--academic-featured { grid-column: auto; grid-row: auto; }
}
@media (max-width: 24rem) {
  .case-library .card { gap: 0.625rem; padding: 1rem; }
}

/* ── contact ──────────────────────────────────────────────────────────────
   One closing surface, with three jobs and no nested dashboard card: ambition,
   opportunity fit, and a full-width contact rail. The rail becomes the primary
   object on a phone; on wider screens it completes both columns. */
.contact {
  display: grid; margin-top: clamp(1.5rem, 4vh, 2.5rem); overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background:
    radial-gradient(54rem 28rem at -8% -12%, rgba(208,138,92,0.10), transparent 66%),
    radial-gradient(42rem 24rem at 108% 8%, rgba(119,176,166,0.08), transparent 68%),
    var(--glass);
  box-shadow: var(--e1), var(--specular);
}
#contact .sec__head { margin-bottom: 0; }
@supports (backdrop-filter: blur(1px)) { .contact { backdrop-filter: var(--glass-blur); } }
.contact__lead,
.contact__fit { min-width: 0; padding: clamp(1.25rem, 0.9714rem + 1.143vw, 2rem); }
.contact__lead { display: grid; align-content: start; }
.contact__thesis {
  max-width: 46ch; margin-top: 0.875rem; text-wrap: balance;
  font-family: var(--text); font-size: var(--fs-h3); font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.32; color: var(--ink);
}
.contact__note {
  max-width: 60ch; margin-top: 0.875rem; padding-top: 0.875rem;
  border-top: 1px solid var(--line); font-size: var(--fs-tight); color: var(--ink-3);
}
.contact__fit {
  border-top: 1px solid var(--line);
  background: rgba(236,239,238,0.012);
}
.seek { display: grid; margin-top: 0.75rem; }
.seek div { display: grid; gap: 0.25rem; padding-block: 0.875rem; border-top: 1px solid var(--line); }
.seek dt { color: var(--rust); }
.seek dd { max-width: 52ch; font-size: var(--fs-tight); line-height: var(--lh-normal); color: var(--ink-2); }

.contact__links {
  grid-column: 1 / -1; display: grid; min-width: 0; gap: 1px;
  border-top: 1px solid var(--line-2); background: var(--line-2);
}
.contact-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.875rem;
  min-width: 0; min-height: 76px; padding: 0.875rem clamp(1rem, 0.8143rem + 0.762vw, 1.5rem);
  background: rgba(8,12,13,0.92); color: var(--ink); text-decoration: none;
  transition: background var(--t-state) var(--ease-out), color var(--t-state) var(--ease-out);
}
.contact-link:hover { background: linear-gradient(135deg, rgba(208,138,92,0.075), transparent 62%), rgba(13,18,19,0.96); }
.contact-link:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--rust); }
.contact-link__icon,
.contact-link__arrow {
  width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.contact-link__icon { color: var(--rust); }
.contact-link__arrow {
  width: 1rem; height: 1rem; color: var(--ink-3);
  transition: transform var(--t-state) var(--ease-out), color var(--t-state) var(--ease-out);
}
.contact-link:hover .contact-link__arrow { color: var(--rust); transform: translateX(3px); }
.contact-link__copy { display: grid; min-width: 0; gap: 0.2rem; }
.contact-link__copy small { color: var(--ink-3); }
.contact-link__copy b {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-tight); font-weight: var(--weight-medium); color: var(--ink);
}
.contact-link--email .contact-link__copy b { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .seek { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .seek div { align-content: start; }
  .contact__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-link--email { grid-column: 1 / -1; }
}
@media (min-width: 48rem) {
  .contact__lead,
  .contact__fit {
    display: grid; grid-template-columns: minmax(9rem, 0.22fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start;
  }
  .contact__lead > .label { grid-column: 1; grid-row: 1 / 3; padding-top: 0.25rem; }
  .contact__thesis, .contact__note { grid-column: 2; }
  .contact__thesis { margin-top: 0; }
  .contact__fit > .label { grid-column: 1; padding-top: 0.125rem; }
  .contact__fit .seek {
    grid-column: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 0;
  }
  .contact__fit .seek div {
    align-content: start; padding: 0.125rem 1.25rem 0; border-top: 0; border-left: 1px solid var(--line);
  }
  .contact__fit .seek div:first-child { padding-left: 0; border-left: 0; }
}
@media (min-width: 64rem) {
  .contact__lead,
  .contact__fit {
    grid-template-columns: minmax(9rem, 0.22fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  .contact__lead {
    padding-block: clamp(1.75rem, 3vw, 2.5rem);
    padding-inline: clamp(1.25rem, 0.9714rem + 1.143vw, 2rem);
  }
  .contact__fit { padding-block: 1.5rem; border-left: 0; }
  .contact__links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 27rem) {
  .contact-link { padding-inline: 1rem; }
}

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line); padding-block: clamp(1.75rem, 4vw, 2.75rem);
  background: linear-gradient(180deg, rgba(119,176,166,0.025), transparent 72%);
}
.foot__main {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "identity return" "privacy privacy";
  align-items: center; gap: 1rem 2rem;
}
.foot__id { display: grid; min-width: 0; gap: 0.25rem; }
.foot__id { grid-area: identity; }
.foot__id b { font-family: var(--display); font-size: var(--fs-body); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.foot__id span { font-size: var(--fs-micro); color: var(--ink-3); }
.foot__top svg {
  width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.colophon {
  grid-area: privacy; display: flex; align-items: center; gap: 0.625rem;
  padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: var(--fs-micro); color: var(--ink-3);
}
.colophon i { width: 0.375rem; height: 0.375rem; flex: none; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px rgba(119,176,166,0.42); }
.foot__top {
  grid-area: return;
  display: inline-flex; min-height: 44px; align-items: center; gap: 0.5rem; width: max-content;
  color: var(--ink-3); font-size: var(--fs-small); text-decoration: none;
}
.foot__top:hover { color: var(--ink); }
@media (min-width: 64rem) {
  .foot__main {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "identity privacy return";
  }
  .colophon { padding: 0 2rem; border-top: 0; border-inline: 1px solid var(--line); }
  .foot__top { justify-self: end; }
}

/* ── note / callout ──────────────────────────────────────────────────────── */
code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.875em;
  padding: 0.1em 0.36em;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--raise-2);
  color: var(--sand);
}

.note {
  padding: 0.875rem 1rem; border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  font-size: var(--fs-tight); color: var(--ink-3);
}

/* ── reveal (enhancement only) ───────────────────────────────────────────── */
/* Content stays visible until app.js has successfully installed its observer,
   so a failed or blocked module can never leave the document blank. */
/* Fade only, and quickly. The translate-up variant is the single most
   template-coded effect on the web and it is the only one a reader consciously
   notices. The gating is what matters here and that is unchanged: nothing can
   be left blank. */
.js.reveal-ready .r:not(.is-in) { opacity: 0; }
.js.reveal-ready .r.is-in { opacity: 1; transition: opacity var(--t-state) var(--ease-out); }
/* During an explicit section journey, movement belongs to the scroll itself.
   Intermediate content may become visible, but it must not launch a second
   full-surface opacity animation while the viewport is already moving. */
.js.is-section-travelling.reveal-ready .r { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js.reveal-ready .r, .js.reveal-ready .r.is-in { opacity: 1; transition: none; }
  .rule:hover { transform: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===========================================================================
   Blueprint section — the atmosphere lives here, and only here
   =========================================================================== */
.bp { position: relative; }
/* The stage is bounded to the head and the map. Stretched behind the whole
   section it produced a canvas several thousand pixels tall — most of it
   never on screen, and half the frame budget at 1920px. */
.bp__head { position: relative; overflow: hidden; padding-bottom: clamp(1.5rem, 4vh, 3rem); }
.bp__head::after {
  content: ''; position: absolute; z-index: 5; inset: auto 0 0; height: clamp(5rem, 15vh, 9rem);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7,9,10,0), rgba(7,9,10,0.56) 54%, var(--ground));
}
.bp__stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bp__stage canvas { width: 100%; height: 100%; }
/* Two layers, and the top one is not decoration: the heading sits over a moving
   light lobe, and without a scrim its measured contrast drops to 5:1. */
.bp__vig {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(3,5,6,0.88) 0%, rgba(3,5,6,0.62) 20%, rgba(3,5,6,0.18) 36%, transparent 50%),
    radial-gradient(78% 66% at 50% 50%, transparent 34%, rgba(3,5,6,0.55) 78%, rgba(3,5,6,0.9) 100%);
}
.bp__grain {
  position: absolute; inset: -50%; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bp__body { position: relative; z-index: 10; }
/* Without a canvas the stage is an empty box with a vignette over nothing. */

.map { --layout: map; position: relative; width: min(100%, 70rem); margin-inline: auto; aspect-ratio: 16 / 9.4; max-height: 62svh; }
/* No canvas — with scripting off, or if the 2D context is refused. The stage
   becomes an empty box with a vignette over nothing and the nodes become eight
   labels floating in a void, so both are dropped and the map falls back to the
   same readable column it uses on a phone. Declared after .map so it wins. */
.no-atlas .bp__stage, .no-atlas .bp__vig, .no-atlas .bp__grain { display: none; }
.no-atlas .bp__head { background: radial-gradient(60% 45% at 50% 45%, rgba(208,138,92,0.10), transparent 70%); }
.no-atlas .map { --layout: list; aspect-ratio: auto; max-height: none; display: grid; gap: 1.25rem; }
.no-atlas .map__core { position: static; transform: none; width: 100%; text-align: left; }
.no-atlas .node { position: static; transform: none !important; }
.no-atlas .node a { flex-direction: row; align-items: center; gap: 0.75rem; width: 100%; max-width: none; text-align: left; justify-content: flex-start; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--line); }
.no-atlas .node em { margin-left: auto; }
/* The written relationships are the map's fallback, so they hide only when a
   running canvas is drawing those lines instead. */
.js:not(.no-atlas) .map__relationships,
.js:not(.no-atlas) .node__connections,
.js:not(.no-atlas) .node__links,
.js:not(.no-atlas) [data-connections] { display: none; }
.map__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(20rem, 68%); text-align: center; }
.map__core p { color: var(--bone); text-shadow: 0 2px 14px rgba(3,5,6,0.95); }
.node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.node a { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; width: max-content; max-width: 10rem; min-height: 44px; justify-content: center; padding: 0.5rem; text-align: center; text-decoration: none; }
/* Was transitioning box-shadow over 0.4s — a blurred shadow repainted every
   frame, at double the duration of everything else, so the blueprint's hover
   felt laggy against the rest of the site. The glow now lives on a pseudo
   element and only its opacity and scale move, which the compositor handles. */
.node i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 12px var(--hue); transition: transform var(--t-move) var(--ease); }
.node i::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: color-mix(in srgb, var(--hue) 14%, transparent);
  opacity: 0; transition: opacity var(--t-move) var(--ease);
}
.node b { font-size: var(--fs-tight); font-weight: 700; color: var(--ink); text-shadow: 0 2px 14px rgba(3,5,6,0.95); }
.node em { font-style: normal; line-height: var(--lh-snug); color: var(--bone); text-shadow: 0 2px 12px rgba(3,5,6,0.95); }
.node a:hover i, .node a:focus-visible i { transform: scale(1.35); }
.node a:hover i::after, .node a:focus-visible i::after { opacity: 1; }
.node a:hover em, .node a:focus-visible em { color: var(--hue); }
.node--key i { width: 14px; height: 14px; }

/* Native modal detail for the Blueprint nodes. The linked reflections remain
   in the document, while this gives pointer and keyboard users a concise view. */
.mind-panel {
  --panel-hue: var(--teal);
  width: min(42rem, calc(100% - 2rem)); max-width: 42rem;
  max-height: min(90svh, 49rem); max-height: min(90dvh, 49rem);
  margin: auto; padding: clamp(1.15rem, 0.9271rem + 0.914vw, 1.75rem);
  overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid rgba(236,239,238,0.20); border-radius: var(--r-xl);
  background: rgba(12,17,19,0.94); color: var(--ink-2);
  box-shadow: var(--e2), inset 0 1px rgba(255,255,255,0.06), inset 0 2px var(--panel-hue);
}
@supports (color: color-mix(in srgb, white, black)) {
  .mind-panel {
    border-color: color-mix(in srgb, var(--panel-hue) 34%, rgba(236,239,238,0.18));
    background: radial-gradient(90% 64% at 100% 0%, color-mix(in srgb, var(--panel-hue) 11%, transparent), transparent 68%), rgba(12,17,19,0.86);
  }
}
.mind-panel[open] {
  transform-origin: 50% 42%;
  animation: mind-panel-in 0.42s var(--ease-spring) both;
}
.mind-panel[open]::backdrop { animation: mind-backdrop-in 0.28s ease-out both; }
@keyframes mind-panel-in {
  from { opacity: 0; transform: translateY(18px) scale(0.975); }
  to { opacity: 1; transform: none; }
}
/* Paging between influences swaps the content in place. Without this the text
   simply replaces itself and the panel reads as a list, not as a journey. */
.mind-panel__body { animation: mind-swap 0.34s var(--ease-out) both; }
@keyframes mind-swap {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes mind-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@supports (backdrop-filter: blur(1px)) {
  .mind-panel { backdrop-filter: blur(26px) saturate(140%); }
}
.mind-panel::backdrop { background: rgba(2,4,5,0.62); backdrop-filter: blur(14px) saturate(120%); }
.mind-panel__top {
  position: sticky; top: 0; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.625rem;
  height: 54px; min-height: 54px; margin: 0 0 0.25rem; padding: 4px;
  overflow: hidden; border: 1px solid color-mix(in srgb, var(--panel-hue) 20%, var(--line));
  border-radius: var(--r-pill);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--panel-hue) 5%, transparent), transparent 45%),
    rgba(8,12,13,0.98);
  box-shadow: inset 0 1px rgba(255,255,255,0.05), var(--e1);
}
.mind-panel__identity { display: flex; align-items: center; gap: 0.5rem; min-width: 0; min-height: 44px; padding-left: 0.5rem; }
.mind-panel__dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--panel-hue); box-shadow: 0 0 12px var(--panel-hue); }
.mind-panel__k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-tight); color: var(--teal); }
.mind-panel__position {
  display: flex; align-items: center; height: 44px;
  font-size: var(--fs-label); font-weight: 800; line-height: var(--lh-tight); letter-spacing: 0.08em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.mind-panel__close {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid transparent; border-radius: 50%; background: var(--raise-2);
  color: var(--ink-2); cursor: pointer;
}
.mind-panel__close:hover { border-color: var(--line-3); color: var(--ink); }
.mind-panel__close:focus-visible,
.mind-panel__preview-top button:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--rust); }
.mind-panel__close svg, .mind-panel__action svg, .mind-panel__pager svg,
.mind-panel__preview-top svg, .mind-panel__travel svg {
  width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.mind-panel__layout, .mind-panel__content { display: grid; min-width: 0; }
.mind-panel__layout { position: relative; }
.mind-panel__primary { min-width: 0; }
.mind-panel h2 { margin-top: 1rem; max-width: 22ch; font-size: var(--fs-h2); }
.mind-panel__quote {
  margin-top: 0.875rem; padding-left: 1rem; border-left: 2px solid var(--panel-hue);
  font-family: var(--display); font-size: var(--fs-personal);
  font-weight: 400; font-style: italic; letter-spacing: -0.005em;
  line-height: var(--lh-snug); color: var(--sand);
}
.mind-panel__reflection { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.mind-panel__reflection > .label { color: var(--ink-3); }
.mind-panel__copy { margin-top: 0.625rem; }
.mind-panel__copy p { font-size: var(--fs-body); line-height: var(--lh-body); }
.mind-panel__copy p + p { margin-top: 0.75rem; }
.mind-panel__action {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.25rem; min-height: 62px; padding: 0.875rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--panel-hue) 34%, var(--line-2));
  border-radius: var(--r-md); text-align: left; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-hue) 12%, transparent), transparent 70%), var(--glass);
  box-shadow: var(--specular);
  color: var(--ink);
  overflow: hidden; max-height: var(--mind-action-open-h, 10rem);
  transition: border-color var(--t-state) var(--ease-out), background var(--t-state) var(--ease-out),
              transform var(--t-move) var(--ease-spring), box-shadow var(--t-move) var(--ease-out),
              opacity var(--t-state) var(--ease-out), max-height var(--t-move) cubic-bezier(.2,.8,.2,1),
              min-height var(--t-move) cubic-bezier(.2,.8,.2,1), margin var(--t-move) cubic-bezier(.2,.8,.2,1),
              padding var(--t-move) cubic-bezier(.2,.8,.2,1), border-width var(--t-move) cubic-bezier(.2,.8,.2,1);
}
.mind-panel__action small { display: block; color: var(--ink-3); }
.mind-panel__action b { display: block; margin-top: 0.125rem; font-size: var(--fs-tight); line-height: var(--lh-snug); }
.mind-panel__action svg { flex: none; color: var(--rust); }
.mind-panel__action:hover { border-color: var(--rust); background: rgba(208,138,92,0.07); transform: translateY(-1px); }
.mind-panel__action[aria-expanded='true'] { border-color: var(--panel-hue); background: rgba(119,176,166,0.07); }
.mind-panel.has-preview:not(.is-preview-closing) .mind-panel__action {
  min-height: 0; max-height: 0; margin-top: 0; padding-block: 0;
  border-width: 0; opacity: 0; transform: scale(0.985); pointer-events: none;
}
.mind-panel.is-preview-closing .mind-panel__action { opacity: 0; pointer-events: none; }

.mind-panel__preview {
  position: relative; min-width: 0; margin-top: 1rem; padding: clamp(1rem, 0.8143rem + 0.762vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--panel-hue) 28%, var(--line));
  border-radius: var(--r-lg); background:
    radial-gradient(115% 80% at 100% 0%, color-mix(in srgb, var(--panel-hue) 10%, transparent), transparent 68%),
    rgba(17,24,26,0.82);
  box-shadow: var(--specular);
  animation: mind-preview-in var(--t-move) var(--ease-out) both;
  transform-origin: 0 0;
}
.mind-panel__preview[hidden] { display: none; }
.mind-panel__morph-proxy {
  position: absolute; z-index: 12; display: block; margin: 0;
  border: 1px solid color-mix(in srgb, var(--panel-hue) 42%, var(--line-2));
  border-left: 2px solid var(--panel-hue); border-radius: var(--r-md);
  background:
    radial-gradient(115% 80% at 100% 0%, color-mix(in srgb, var(--panel-hue) 14%, transparent), transparent 68%),
    rgba(14,20,22,0.98);
  box-shadow: var(--e2), var(--specular), inset 0 1px rgba(255,255,255,0.05);
  transform-origin: 0 0; pointer-events: none; contain: paint;
}
.mind-panel__morph-proxy[hidden] { display: none; }
.mind-panel.is-proxy-morph [data-mind-action] { opacity: 0; pointer-events: none; }
.mind-panel.is-proxy-morph [data-mind-action] > *,
.mind-panel.is-proxy-morph [data-mind-preview] > * { visibility: hidden; }
.mind-panel.is-proxy-morph [data-mind-preview] {
  border-color: transparent !important; background: transparent !important;
  box-shadow: none !important; animation: none !important; pointer-events: none;
}
.mind-panel.is-proxy-morph [data-mind-preview]::before,
.mind-panel.is-proxy-morph [data-mind-preview]::after { opacity: 0 !important; }
.mind-panel.is-return-measuring .mind-panel__primary,
.mind-panel.is-return-measuring .mind-panel__action,
.mind-panel.is-return-measuring .mind-panel__preview { transition: none !important; animation: none !important; }
.mind-panel.is-return-settling .mind-panel__action { transition: none !important; }
.mind-panel .mind-panel__morph-copy {
  position: absolute !important; z-index: 13 !important; margin: 0 !important;
  right: auto !important; bottom: auto !important; grid-area: auto !important;
  max-width: none !important; max-height: none !important; pointer-events: none !important;
  overflow: hidden !important; contain: paint; transform-origin: 0 0;
  border-color: transparent !important; background: transparent !important; box-shadow: none !important;
  transition: none !important; animation: none !important; will-change: opacity, transform;
}
.mind-panel .mind-panel__morph-copy.mind-panel__action {
  display: flex !important; min-height: 0 !important; padding: 0.875rem 1.25rem !important;
  border-width: 1px !important; transform: none;
}
.mind-panel.is-proxy-morph .mind-panel__morph-copy.mind-panel__preview {
  display: block !important; padding: clamp(1rem, 0.8143rem + 0.762vw, 1.5rem) !important;
  border: 1px solid transparent !important; border-radius: var(--r-lg) !important;
  background: transparent !important; box-shadow: none !important;
}
.mind-panel__morph-copy::before, .mind-panel__morph-copy::after { content: none !important; }
@keyframes mind-preview-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.mind-panel__preview-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mind-panel__preview-top button {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink-3); cursor: pointer;
}
.mind-panel__preview-top button:hover { color: var(--ink); border-color: var(--line-3); background: var(--raise-2); }
.mind-panel__preview h3 { margin-top: 0.875rem; font-size: var(--fs-lead); line-height: var(--lh-snug); }
.mind-panel__preview-copy { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.mind-panel__preview-copy p { font-size: var(--fs-tight); line-height: var(--lh-body); color: var(--ink-2); }
.mind-panel__preview-copy p:last-child { padding-top: 0.75rem; border-top: 1px solid var(--line); color: var(--ink-3); }
.mind-panel__travel {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 58px; margin-top: 1rem; padding: 0.75rem 1rem;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--raise);
  color: var(--ink); text-decoration: none; box-shadow: var(--specular);
}
.mind-panel__travel small { display: block; font-size: var(--fs-label); font-weight: var(--weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.mind-panel__travel b { display: block; margin-top: 0.125rem; font-size: var(--fs-tight); line-height: var(--lh-snug); }
.mind-panel__travel svg { flex: none; color: var(--rust); }
.mind-panel__travel:hover { border-color: var(--rust); background: rgba(208,138,92,0.07); }
.mind-panel__pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.mind-panel__pager button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 0.25rem; color: var(--ink-3); font-size: var(--fs-micro); font-weight: 700; cursor: pointer; }
.mind-panel__pager button:hover { color: var(--ink); }
@media (min-width: 72rem) {
  /* The dialog becomes a transparent stage. Its primary reflection remains a
     complete card in the centre; revealing the relationship moves that card
     left and lets a second card emerge from its right-hand edge. Only opacity
     and transforms animate, so the effect remains smooth. */
  .mind-panel {
    width: min(72rem, calc(100% - 3rem)); max-width: 72rem; max-height: none;
    padding: 0; overflow: visible; border: 0; background: transparent;
    box-shadow: none; backdrop-filter: none;
  }
  .mind-panel__layout { position: relative; }
  .mind-panel__primary {
    width: 42rem; max-height: min(88svh, 49rem); max-height: min(88dvh, 49rem);
    align-self: start; margin-inline: auto; padding: clamp(1.15rem, 0.9271rem + 0.914vw, 1.75rem);
    overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid color-mix(in srgb, var(--panel-hue) 34%, rgba(236,239,238,0.18));
    border-radius: var(--r-xl); background:
      radial-gradient(90% 64% at 100% 0%, color-mix(in srgb, var(--panel-hue) 11%, transparent), transparent 68%),
      rgba(12,17,19,0.94);
    box-shadow: var(--e2), inset 0 1px rgba(255,255,255,0.06), inset 0 2px var(--panel-hue);
    transform: translateX(0); transition: transform var(--t-move) cubic-bezier(.2,.8,.2,1);
  }
  .mind-panel.has-preview .mind-panel__primary { transform: translateX(-12.5rem); }
  .mind-panel.has-preview .mind-panel__preview,
  .mind-panel.is-preview-closing .mind-panel__preview {
    position: absolute; right: 0; top: 0; bottom: 0; width: 26rem; height: max-content;
    max-height: min(78svh, 42rem); max-height: min(78dvh, 42rem);
    margin: auto 0; overflow: visible;
    border: 1px solid color-mix(in srgb, var(--panel-hue) 34%, var(--line-2));
    border-left: 2px solid var(--panel-hue); border-radius: var(--r-lg);
    background:
      radial-gradient(115% 80% at 100% 0%, color-mix(in srgb, var(--panel-hue) 13%, transparent), transparent 68%),
      rgba(14,20,22,0.97);
    box-shadow: var(--e2), var(--specular);
    transform-origin: 0 50%;
    animation: mind-preview-born var(--t-enter) var(--ease-spring) both;
  }
  .mind-panel.has-preview .mind-panel__preview::before {
    content: ''; position: absolute; right: 100%; top: 50%; width: 1.5rem; height: 1px;
    background: linear-gradient(90deg, rgba(208,138,92,0.15), var(--panel-hue));
    transform-origin: 100% 50%; animation: mind-preview-bridge var(--t-state) var(--ease-out) both;
  }
  .mind-panel.has-preview .mind-panel__preview::after {
    content: ''; position: absolute; right: calc(100% + 1.25rem); top: calc(50% - 3px);
    width: 7px; height: 7px; border-radius: 50%; background: var(--panel-hue);
    box-shadow: 0 0 12px var(--panel-hue); animation: mind-preview-node var(--t-state) var(--ease-out) 20ms both;
  }
  @keyframes mind-preview-born {
    from { opacity: 0; transform: translateX(-2.25rem) scale(0.94); }
    to { opacity: 1; transform: none; }
  }
  @keyframes mind-preview-bridge {
    from { opacity: 0; transform: scaleX(0); }
    to { opacity: 1; transform: scaleX(1); }
  }
  @keyframes mind-preview-node {
    from { opacity: 0; transform: scale(0.4); }
    to { opacity: 1; transform: scale(1); }
  }
}
.mind-panel-ready .mind-panel.has-preview .mind-panel__preview,
.mind-panel-ready .mind-panel.is-preview-closing .mind-panel__preview { animation: none; }
@media (max-width: 71.99rem) {
  /* On compact screens the related card takes the launch control's place in
     the reading order, rather than appearing below the pager and forcing a
     compensating scroll after the animation. */
  .mind-panel__primary { display: contents; }
  .mind-panel__top { grid-row: 1; }
  .mind-panel__content { grid-row: 2; }
  .mind-panel__preview { grid-row: 3; }
  .mind-panel__pager { grid-row: 4; }
  .mind-panel.is-proxy-morph .mind-panel__action { transition: none !important; }
}
@media (max-width: 32rem) {
  .mind-panel {
    width: calc(100% - 0.75rem); max-height: calc(100svh - 0.75rem); max-height: calc(100dvh - 0.75rem);
    margin: auto auto 0.375rem; padding: 0.875rem max(0.875rem, env(safe-area-inset-right)) max(0.875rem, env(safe-area-inset-bottom)) max(0.875rem, env(safe-area-inset-left));
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-lg);
  }
  .mind-panel__top { top: 0; margin-inline: 0; }
  .mind-panel h2 { margin-top: 0.875rem; }
  .mind-panel__action { min-height: 62px; }
}

.worlds { display: grid; gap: 0.75rem; background: none; border: 0; border-radius: 0; overflow: visible; }
@media (min-width: 46rem) { .worlds { grid-template-columns: 1fr 1fr; } }
.world {
  position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: linear-gradient(145deg, color-mix(in srgb, var(--hue) 5%, transparent), transparent 48%), var(--glass);
  padding: clamp(1.2rem, 1.0143rem + 0.762vw, 1.7rem); scroll-margin-top: 6rem;
  transition: transform var(--t-move) var(--ease-spring), border-color var(--t-state) var(--ease-out), background var(--t-state) var(--ease-out);
}
.world::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--hue), transparent 72%); opacity: 0.72; }
.world:target { background: var(--raise-2); }
.world__k { display: flex; align-items: center; gap: 0.5rem; }
.world__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hue); flex: none; }
.world h3 { margin-top: 0.625rem; font-size: var(--fs-lead); font-weight: 700; }
.world__line { margin-top: 0.5rem; font-family: var(--display); font-weight: 400; font-style: italic; font-size: var(--fs-personal); letter-spacing: -0.005em; line-height: var(--lh-snug); color: var(--sand); }
.world__body { margin-top: 0.75rem; }
.world__body p { font-size: var(--fs-tight); line-height: var(--lh-body); }
.world__body p + p { margin-top: 0.75rem; }
.world__to { margin-top: auto; padding-top: 1rem; font-size: var(--fs-small); font-weight: 600; color: var(--rust); text-decoration: none; display: inline-flex; gap: 0.5rem; align-items: center; min-height: 44px; }
/* Named links carry a destination, so they get the label that says what the
   destination is for. */
.world__to--named::before {
  content: 'The habit this became';
  display: block; width: 100%;
  font-size: var(--fs-label); font-weight: var(--weight-bold); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.25rem;
}
.world__to--named { flex-wrap: wrap; }
.world__to:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .world:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--hue) 38%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--hue) 8%, transparent), transparent 52%), var(--glass-2); }
}

/* Fit the living relationship map into common short work-laptop viewports.
   Its list fallback remains content-sized at every width. */
@media (min-width: 56rem) and (max-height: 50rem) {
  .bp__head { padding-bottom: clamp(0.9rem, 2vh, 1.2rem); }
  .bp__body > .wrap:first-child { padding-top: clamp(1.25rem, 3vh, 1.6rem) !important; }
  .bp__head .sec__head { gap: 0.5rem; margin-bottom: clamp(0.7rem, 1.6vh, 0.95rem); }
  /* The fixed height fits the animated constellation, not its touch/no-canvas
     list fallback. Applying it to both compressed eight rows plus the written
     relationship summary into the same box on landscape iPads. */
  .js:not(.no-atlas) .map {
    width: min(100%, 64rem); height: clamp(20rem, 49svh, 24rem); aspect-ratio: auto; max-height: none;
  }
}

@media (max-width: 56rem) {
  .map { --layout: list; aspect-ratio: auto; max-height: none; display: grid; gap: 1.25rem; }
  .map__core { display: none; }
  .node { position: static; transform: none !important; }
  .node a { flex-direction: row; align-items: center; gap: 0.75rem; width: 100%; max-width: none; text-align: left; justify-content: flex-start; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--line); }
  .node a > * { min-width: 0; }
  .node em { max-width: 48%; margin-left: auto; text-align: right; }
  .map__relationships, [data-connections] { display: none; }
}

/* Coarse-pointer tablets also use the readable list instead of allocating a
   large DPR canvas. The row labels already carry the complete set of
   influences; the constellation's centre and relationship transcript are
   fallback aids for non-touch/no-script contexts and become visual duplicates
   in this layout. */
@media (hover: none) and (pointer: coarse) {
  .js.no-atlas .map__core,
  .js.no-atlas .map__relationships { display: none; }
}

.case-question .quote { max-width: 44ch; }
@media (min-width: 60rem) {
  .case-question .label { padding-top: 0.25rem; }
}

.case-bridge {
  display: grid; gap: 1px; margin-top: 1.25rem; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--line);
}
.case-bridge__side { min-width: 0; padding: clamp(1.1rem, 0.9514rem + 0.610vw, 1.5rem); background: var(--raise); }
.case-bridge__side h3 { margin-top: 0.5rem; font-size: var(--fs-body); line-height: var(--lh-snug); }
.case-bridge__side ul { display: grid; gap: 0.5rem; margin-top: 0.875rem; }
.case-bridge__side li { position: relative; padding-left: 0.875rem; font-size: var(--fs-small); line-height: var(--lh-normal); }
.case-bridge__side li::before {
  content: ''; position: absolute; left: 0; top: 0.68em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--teal);
}
.case-bridge__side--system li::before { background: var(--rust); }
.case-bridge__core {
  display: flex; min-width: 0; min-height: 9rem; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.375rem; padding: 1.25rem;
  text-align: center; background:
    radial-gradient(circle at 50% 45%, rgba(208,138,92,0.17), transparent 58%), var(--raise-2);
}
.case-bridge__core span { color: var(--sand); }
.case-bridge__core b { font-size: var(--fs-tight); color: var(--ink); }
.case-bridge__core i { position: relative; width: min(8rem, 70%); height: 1px; margin-top: 0.5rem; background: linear-gradient(90deg, var(--teal), var(--amber), var(--rust)); }
.case-bridge__core i::before, .case-bridge__core i::after {
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px;
  border-radius: 50%; background: currentColor; transform: translateY(-50%);
}
.case-bridge__core i::before { left: 0; color: var(--teal); }
.case-bridge__core i::after { right: 0; color: var(--rust); }
@media (min-width: 48rem) {
  .case-bridge { grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.72fr) minmax(0, 1fr); align-items: stretch; }
}
@media (min-width: 42rem) { }
@media (min-width: 68rem) { }
@media (min-width: 42rem) { }
@media (min-width: 68rem) { }

.case-next { margin-top: clamp(2rem, 5vh, 3rem); }
.case-close {
  display: grid; gap: 1.25rem; align-items: end; margin-top: 1rem; padding: clamp(1.25rem, 0.9714rem + 1.143vw, 2rem);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background:
    radial-gradient(32rem 18rem at 0% 100%, rgba(119,176,166,0.08), transparent 70%),
    radial-gradient(28rem 18rem at 100% 0%, rgba(208,138,92,0.07), transparent 72%),
    var(--glass);
  box-shadow: var(--e1), var(--specular);
}
.case-close h2 { max-width: 28ch; margin-top: 0.5rem; font-size: var(--fs-lead); }
.case-close > div > p:last-child { max-width: 58ch; margin-top: 0.5rem; font-size: var(--fs-tight); color: var(--ink-2); }
.case-close__actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
@media (min-width: 58rem) { .case-close { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; } }
@media (min-width: 40rem) { }
@media (min-width: 58rem) { }
@media (max-width: 58rem) { }
@media (min-width: 44rem) { }
@media (min-width: 34rem) { }

/* ── Pricing Control App: lifecycle narrative ───────────────────────────── */
.case-hero { padding-top: clamp(2.8rem, 7vh, 4.8rem); }
.case-thesis {
  display: grid; gap: 0.75rem; padding: clamp(1.3rem, 1.04rem + 1.067vw, 2rem);
  border: 1px solid var(--line-2); border-left: 3px solid var(--rust); border-radius: var(--r-lg);
  background:
    radial-gradient(80% 180% at 0% 40%, rgba(208,138,92,0.14), transparent 64%),
    radial-gradient(70% 140% at 100% 100%, rgba(119,176,166,0.07), transparent 68%), var(--raise);
}
.case-thesis .quote { max-width: 38ch; }
.case-thesis > p:last-child { max-width: 62ch; }
.case-thesis__path {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--line);
}
.case-thesis__path li {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.625rem 0.75rem;
  background: rgba(9,14,16,0.82); font-size: var(--fs-tight); font-weight: var(--weight-medium); color: var(--ink-2);
}
.case-thesis__path span { font-size: var(--fs-label); font-weight: var(--weight-black); color: var(--rust); }
@media (min-width: 60rem) {
  .case-thesis { grid-template-columns: 9rem minmax(0, 1fr); gap: 0.75rem 2rem; align-items: start; }
  .case-thesis .label { padding-top: 0.25rem; }
  .case-thesis > p:nth-child(n + 2) { grid-column: 2; }
  .case-thesis__path { grid-column: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.case-snapshot {
  display: grid; gap: 1px; margin-top: 1rem; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--line);
}
.case-snapshot div { min-width: 0; padding: 1rem 1rem; background: var(--raise); }
.case-snapshot dt { color: var(--ink-3); }
.case-snapshot dd { margin-top: 0.25rem; font-size: var(--fs-tight); font-weight: 600; line-height: var(--lh-normal); color: var(--ink); }
@media (min-width: 42rem) { .case-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .case-snapshot { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case-snapshot--proof { margin-top: 0; border-left: 2px solid var(--teal); }
.case-snapshot--proof + .case-thesis { margin-top: 1rem; }
.case-thesis--decision b { color: var(--teal); }

.case-boundary {
  margin-top: 1rem; padding: 0.875rem 1rem; border: 1px dashed var(--line-2); border-radius: var(--r-md);
  background: rgba(119,176,166,0.035); font-size: var(--fs-tight); line-height: var(--lh-body); color: var(--ink-3);
}
.case-boundary--integrated {
  margin-bottom: 0; padding: 1rem clamp(1.3rem, 1.04rem + 1.067vw, 2rem);
  border: 1px solid var(--line-2); border-bottom-color: var(--line); border-left: 3px solid var(--teal);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background:
    radial-gradient(70% 150% at 0% 30%, rgba(119,176,166,0.13), transparent 68%),
    rgba(12,21,21,0.94);
  color: var(--ink-3);
}
.case-boundary--integrated + .case-thesis {
  border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.case-boundary--compact {
  border-style: solid; border-left: 2px solid var(--teal); background: rgba(119,176,166,0.04);
}

.product-screen {
  display: grid; gap: 1.2rem; margin-top: 1.25rem; padding: clamp(1.1rem, 0.9143rem + 0.762vw, 1.6rem) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.product-screen__caption { display: grid; align-content: start; gap: 0.55rem; }
.product-screen__caption h2 { max-width: 30ch; font-size: var(--fs-lead); }
.product-screen__caption > p:not(.product-screen__note) { max-width: 42ch; font-size: var(--fs-tight); color: var(--ink-2); }
.product-screen__note { margin-top: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: var(--fs-micro); line-height: var(--lh-normal); color: var(--ink-3); }
.product-screen__app {
  min-width: 0; overflow: hidden; border: 1px solid rgba(191,198,197,0.18); border-radius: var(--r-lg);
  background: linear-gradient(145deg, rgba(119,176,166,0.025), transparent 44%), #0b1113;
  box-shadow: var(--e2), var(--specular);
}
.product-screen__bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7rem;
  min-height: 3.75rem; padding: 0.72rem 0.9rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.012);
}
.product-screen__bar > div:nth-child(2) { display: grid; gap: 0.08rem; min-width: 0; }
.product-screen__bar b { font-size: var(--fs-tight); color: var(--ink); }
.product-screen__bar small { overflow: hidden; font-size: var(--fs-micro); color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.product-screen__brand { display: flex; align-items: end; gap: 2px; width: 1.65rem; height: 1.65rem; padding: 0.35rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: rgba(119,176,166,0.06); }
.product-screen__brand span { flex: 1; border-radius: var(--r-pill); background: var(--teal); }
.product-screen__brand span:nth-child(1) { height: 42%; opacity: 0.58; }
.product-screen__brand span:nth-child(2) { height: 78%; }
.product-screen__brand span:nth-child(3) { height: 58%; opacity: 0.78; }
.product-screen__state, .product-screen__tag, .product-screen__output-state, .product-screen__count {
  display: inline-flex; align-items: center; width: fit-content; border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--fs-micro); line-height: 1.25;
}
.product-screen__state { gap: 0.4rem; padding: 0.42rem 0.58rem; color: var(--ink-2); white-space: nowrap; }
.product-screen__state i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--rust); outline: 3px solid rgba(208,138,92,0.1); }
.product-screen__context { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1.25rem; padding: 0.72rem 0.9rem; border-bottom: 1px solid var(--line); }
.product-screen__context p { display: grid; gap: 0.14rem; min-width: 0; }
.product-screen__context span, .product-screen__check-meta span { font-size: var(--fs-micro); color: var(--ink-3); }
.product-screen__context b, .product-screen__check-meta b { overflow: hidden; font-size: var(--fs-micro); color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.product-screen__workspace { display: grid; gap: 1rem; padding: 0.95rem 0.9rem; }
.product-screen__table { min-width: 0; }
.product-screen__table-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0 0 0.65rem; border-bottom: 1px solid var(--line-2); }
.product-screen__table-head > div { display: grid; gap: 0.12rem; }
.product-screen__table-head b { font-size: var(--fs-tight); }
.product-screen__count { padding: 0; border: 0; color: var(--ink-3); white-space: nowrap; }
.product-screen__table table { width: 100%; border-collapse: collapse; font-size: var(--fs-micro); }
.product-screen__table th, .product-screen__table td { padding: 0.64rem 0.45rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.product-screen__table thead th { color: var(--ink-3); font-weight: 600; }
.product-screen__table tbody th { font-weight: 400; }
.product-screen__table tbody th b, .product-screen__table tbody th small { display: block; }
.product-screen__table tbody th b { color: var(--ink-2); }
.product-screen__table tbody th small { margin-top: 0.1rem; color: var(--ink-3); font-weight: 400; }
.product-screen__table tbody tr:last-child > * { border-bottom: 0; }
.product-screen__table tbody tr.is-selected { background: linear-gradient(90deg, rgba(208,138,92,0.07), transparent 74%); }
.product-screen__tag { padding: 0.28rem 0.42rem; }
.product-screen__tag.is-ready { border-color: rgba(119,176,166,0.28); background: rgba(119,176,166,0.07); color: var(--teal); }
.product-screen__tag.is-review { border-color: rgba(208,138,92,0.3); background: rgba(208,138,92,0.08); color: var(--rust); }
.product-screen__check { display: grid; align-content: start; gap: 0.55rem; padding: 0.1rem 0 0.1rem 0.85rem; border-left: 2px solid rgba(208,138,92,0.55); }
.product-screen__check h3 { font-size: var(--fs-body); }
.product-screen__check > p:not(.label) { font-size: var(--fs-micro); line-height: var(--lh-normal); color: var(--ink-2); }
.product-screen__check-meta { display: grid; gap: 0.12rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.product-screen__output { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.78rem 0.9rem; border-top: 1px solid var(--line); background: rgba(119,176,166,0.02); }
.product-screen__output p { display: flex; align-items: center; gap: 0.58rem; min-width: 0; }
.product-screen__output p > span:last-child { display: grid; gap: 0.1rem; }
.product-screen__output b { font-size: var(--fs-micro); color: var(--teal); }
.product-screen__output small { font-size: var(--fs-micro); color: var(--ink-3); }
.product-screen__output-mark { display: grid; flex: 0 0 auto; place-items: center; width: 1.65rem; height: 1.65rem; border: 1px solid rgba(119,176,166,0.3); border-radius: 50%; color: var(--teal); }
.product-screen__output-state { flex: 0 0 auto; padding: 0.38rem 0.5rem; border-color: rgba(208,138,92,0.24); color: var(--rust); white-space: nowrap; }
@media (min-width: 42rem) {
  .product-screen__workspace { grid-template-columns: minmax(0, 1.65fr) minmax(12.5rem, 0.7fr); gap: 1.2rem; }
}
@media (min-width: 68rem) {
  .product-screen { grid-template-columns: minmax(14.5rem, 0.34fr) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
}
@media (max-width: 34rem) {
  .product-screen__state { padding: 0; border: 0; }
  .product-screen__state { font-size: 0; }
  .product-screen__state i { width: 0.5rem; height: 0.5rem; }
  .product-screen__context { grid-template-columns: 1fr; }
  .product-screen__context p { grid-template-columns: 5.2rem minmax(0, 1fr); align-items: baseline; }
  .product-screen__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .product-screen__table tbody, .product-screen__table tr, .product-screen__table th, .product-screen__table td { display: block; }
  .product-screen__table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0.62rem 0; border-bottom: 1px solid var(--line); }
  .product-screen__table th, .product-screen__table td { padding: 0.24rem 0; border: 0; }
  .product-screen__table th { grid-column: 1 / -1; margin-bottom: 0.28rem; }
  .product-screen__table td::before { content: attr(data-label); display: block; margin-bottom: 0.18rem; color: var(--ink-3); }
  .product-screen__table tbody tr:last-child { border-bottom: 0; }
  .product-screen__output { align-items: flex-start; }
  .product-screen__output-state { display: none; }
}

/* ── case abstract: the whole case in five lines ─────────────────────────
   These pages are long. A reader who stops at the top of one should still
   leave with the case, so the decision, the evidence, the role, the result and
   what is unproven all sit above the phase navigation. */
.case-abstract {
  margin-top: 1rem; border: 1px solid var(--line); border-left: 2px solid var(--rust);
  border-radius: var(--r-md); background: var(--glass); overflow: hidden;
}
.case-abstract__k { padding: 0.875rem 1rem 0; }
.case-abstract dl { display: grid; gap: 1px; margin-top: 0.75rem; background: var(--line); border-top: 1px solid var(--line); }
.case-abstract dl > div { background: var(--raise); padding: 0.75rem 1rem; }
@media (min-width: 46rem) {
  .case-abstract dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.25rem; align-items: baseline; }
}
.case-abstract dt { color: var(--ink-3); }
.case-abstract dd { font-size: var(--fs-tight); line-height: var(--lh-body); color: var(--ink-2); }
@media (max-width: 46rem) { .case-abstract dd { margin-top: 0.25rem; } }
.case-abstract dd b { color: var(--ink); font-weight: 600; }
.case-abstract .is-open-question { color: var(--ink-3); }
.disclosure--case-summary > .disclosure__toggle {
  margin-top: 0.625rem; padding: 0.7rem 0.875rem; border-bottom: 0;
}
.disclosure--case-summary .disclosure__panel { min-width: 0; }
@media (min-width: 50rem) {
  .case-page--electric .case-abstract--compact dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-page--electric .case-abstract--compact dl > div {
    display: block; min-width: 0; padding: 0.875rem 1rem;
  }
  .case-page--electric .case-abstract--compact dd { margin-top: 0.3rem; }
}
.case-boundary b { color: var(--teal); }

/* Academic cases separate what exists from what is modelled and what comes
   next. The key is deliberately visual: a recruiter should not need to infer
   certainty from paragraphs of disclaimer copy. */
.evidence-key {
  display: grid; gap: 1px; margin-top: 1rem; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--line);
}
.evidence-key > div { min-width: 0; padding: 0.875rem 1rem; background: var(--raise); }
.evidence-key dt {
  font-size: var(--fs-label); font-weight: var(--weight-bold); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.evidence-key > div:first-child dt { color: var(--teal); }
.evidence-key > div:last-child dt { color: var(--rust); }
.evidence-key dd { margin-top: 0.25rem; font-size: var(--fs-tight); line-height: var(--lh-normal); }
@media (min-width: 42rem) { .evidence-key { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.decision-rule {
  display: grid; gap: 1px; margin-top: 1.25rem; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--line);
}
.decision-rule article { min-width: 0; padding: 1rem; background: var(--raise); }
.decision-rule h3 { font-size: var(--fs-tight); }
.decision-rule p { margin-top: 0.375rem; font-size: var(--fs-tight); line-height: var(--lh-normal); }
.decision-rule article:first-child h3 { color: var(--teal); }
.decision-rule article:nth-child(2) h3 { color: var(--rust); }
.decision-rule article:last-child h3 { color: var(--ink-3); }
@media (min-width: 48rem) { .decision-rule { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Docked, not floating. It used to sit 4px below the header with rounded top
   corners, so page content streamed through the slot and past the corners on
   scroll — a rendering seam rather than a design. The negative box-shadow layer
   paints the gutter above it in the ground colour so the two bars read as one
   unit; the top corners are square because they meet the bar above them. */
.case-nav {
  position: sticky; top: var(--sticky-offset); z-index: 60; min-width: 0;
  margin-top: clamp(1.5rem, 4vh, 2.4rem); overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--line-2); border-top-color: transparent;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: rgba(8,12,13,0.94); box-shadow: 0 -0.5rem 0 var(--ground), var(--e2);
  overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch;
}
/* Same reason as .bar — and on a case page these two stack. */
@supports (backdrop-filter: blur(1px)) { .case-nav { background: var(--glass-solid); backdrop-filter: var(--glass-blur); } }
.case-nav::-webkit-scrollbar { display: none; }
.case-nav ol { display: flex; width: max-content; min-width: 100%; padding-inline: 0.375rem; }
.case-nav li { flex: 1 0 auto; }
.case-nav a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 46px; padding: 0.25rem 0.75rem;
  border-radius: var(--r-sm); color: var(--ink-3); font-size: var(--fs-micro); font-weight: 700; text-decoration: none;
  transition: color var(--t-state) var(--ease), background-color var(--t-state) var(--ease);
}
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .case-nav ol { padding-inline: 0.25rem; }
  .case-nav a { gap: 0.375rem; padding-inline: 0.5rem; }
}
.case-nav a span { font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--rust); }
.case-nav a[aria-current='location'] {
  color: var(--ink); background-color: var(--raise-2);
  background-image: linear-gradient(var(--teal), var(--teal));
  background-position: bottom; background-repeat: no-repeat; background-size: 100% 2px;
}
.case-nav a[aria-current='location']:focus-visible { box-shadow: inset 0 0 0 2px var(--rust); }

/* Hover belongs to devices that can actually leave a pointer over a control.
   Touch browsers otherwise retain the hover paint after a tap, which reads as
   delayed navigation even though the scroll has already finished. */
@media (hover: hover) and (pointer: fine) {
  .bar__icon:hover { color: var(--ink); border-color: var(--line); background: var(--raise-2); }
  .nav a:hover { color: var(--ink); background: rgba(236,239,238,0.055); }
  .case-nav a:hover { color: var(--ink); background: var(--raise-2); }
}

.nav a, .bar__icon, .case-nav a { touch-action: manipulation; }
@media (hover: none) and (pointer: coarse) {
  .bar a { -webkit-tap-highlight-color: transparent; }
  .nav a:active { color: var(--ink); }
  .case-nav a:active { color: var(--ink); background-color: rgba(119,176,166,0.10); }
  .bar__icon:active { color: var(--ink); border-color: var(--line-2); background: var(--raise-2); }
}
.case-nav[data-scroll-right]:not([data-scroll-left]) {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.75rem), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.75rem), transparent);
}
.case-nav[data-scroll-left][data-scroll-right] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2.75rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2.75rem), transparent);
}
.case-nav[data-scroll-left]:not([data-scroll-right]) {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000);
  mask-image: linear-gradient(90deg, transparent, #000 2rem, #000);
}
@media (max-width: 39.99rem) {
  .case-nav {
    margin-top: 1rem;
  }
  .case-nav a { min-height: 44px; padding-inline: 0.625rem; }
}
/* On a short phone, the two sticky bars consumed more than a quarter of the
   viewport. Keep the global navigation available and let the case journey
   remain in the document flow; one stable sticky layer leaves room to read. */
@media (max-width: 56rem) and (max-height: 40rem) {
  .case-page .case-nav {
    position: relative; top: auto; z-index: 1;
    border-top-color: var(--line-2); border-radius: var(--r-md);
    box-shadow: var(--e1);
  }
  .case-page .case-phase { scroll-margin-top: 0.75rem; }
}

.case-story { position: relative; }
.case-phase {
  position: relative; display: grid; gap: 1.25rem; padding-block: clamp(2.5rem, 6vh, 4.5rem);
  border-top: 1px solid var(--line); scroll-margin-top: 4.2rem;
}
.case-phase:first-child { border-top: 0; }
.case-phase__meta { display: grid; gap: 0.5rem; align-self: start; align-content: start; }

/* ── the phase rail ───────────────────────────────────────────────────────
   Position in the sequence, and the way out of it in either direction. Both
   are injected from the phases already in the document; without scripting the
   rail is simply the label and the heading, and the horizontal navigator at
   the top of the page still does the job. */
.phase-pos { display: flex; align-items: baseline; gap: 0.375rem; font-variant-numeric: tabular-nums; line-height: var(--lh-hero); }
.phase-pos b { font-size: var(--fs-h3); font-weight: var(--weight-black); color: var(--rust); letter-spacing: -0.02em; }
.phase-pos span { font-size: var(--fs-micro); font-weight: var(--weight-medium); color: var(--ink-3); }

.phase-jump { display: none; }
@media (min-width: 60rem) {
  .phase-jump {
    display: grid; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem;
    border-top: 1px solid var(--line);
  }
  .phase-jump a {
    display: grid; gap: 0.125rem; min-height: 44px; align-content: center;
    font-size: var(--fs-tight); line-height: var(--lh-snug); font-weight: var(--weight-medium);
    color: var(--ink-2); text-decoration: none;
    transition: color var(--t-state) var(--ease);
  }
  .phase-jump a span {
    font-size: var(--fs-label); font-weight: var(--weight-bold); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .phase-jump a[rel='next'] span::after { content: ' ↓'; }
  .phase-jump a[rel='prev'] span::before { content: '↑ '; }
  .phase-jump a:hover, .phase-jump a:focus-visible { color: var(--rust); }
  .phase-jump a:hover span, .phase-jump a:focus-visible span { color: var(--rust); }
}
.case-phase__meta h2 { max-width: 18ch; font-size: clamp(1.375rem, 1.2821rem + 0.381vw, 1.625rem); font-weight: 600; }
.case-phase__body { min-width: 0; }
.case-phase__intro { max-width: 68ch; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink); }
.case-page--electric .case-phase { padding-block: clamp(2.25rem, 1.786rem + 1.905vw, 3.5rem); }
@media (min-width: 60rem) {
  .case-story::before {
    content: ''; position: absolute; top: 2.9rem; bottom: 3rem; left: 0.3rem; width: 1px;
    background: linear-gradient(var(--rust), var(--amber) 46%, var(--teal)); opacity: 0.5;
  }
  .case-phase { grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; padding-left: 1.75rem; }
  .case-phase::before {
    content: ''; position: absolute; left: 0; top: 3.25rem; width: 11px; height: 11px; border-radius: 50%;
    background: var(--ground); border: 2px solid var(--rust); box-shadow: 0 0 0 5px rgba(208,138,92,0.08);
  }
  .case-phase:nth-of-type(n+5)::before { border-color: var(--teal); box-shadow: 0 0 0 5px rgba(119,176,166,0.08); }
  .case-phase__meta { position: sticky; top: calc(var(--sticky-offset) + 4.2rem); }
  .case-page--electric .case-phase { grid-template-columns: 10.75rem minmax(0, 1fr); gap: 2rem; }
}

.opportunity-frame { display: grid; gap: 1px; margin-top: 1.25rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--line); }
.opportunity-frame article { min-width: 0; padding: 1rem; background: var(--raise); }
.opportunity-frame article:nth-child(odd) { background: linear-gradient(145deg, rgba(119,176,166,0.055), transparent 54%), var(--raise); }
.opportunity-frame span { color: var(--ink-3); }
.opportunity-frame h3 { margin-top: 0.375rem; font-size: var(--fs-body); }
.opportunity-frame p { margin-top: 0.375rem; font-size: var(--fs-tight); line-height: var(--lh-normal); }
@media (min-width: 40rem) { .opportunity-frame { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.case-artifact {
  margin-top: 1.25rem; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(119,176,166,0.055), transparent 45%), var(--raise);
}
.case-artifact--rust { background: linear-gradient(135deg, rgba(208,138,92,0.085), transparent 45%), var(--raise); }
.artifact-disclaimer {
  max-width: var(--measure); margin-top: 1.25rem; color: var(--ink-3); font-size: var(--fs-micro); line-height: var(--lh-normal);
}
.artifact-disclaimer::before {
  content: ''; display: inline-block; width: 1rem; height: 1px; margin: 0 0.45rem 0.25em 0;
  background: var(--teal);
}
.artifact-disclaimer + .decision-ledger,
.artifact-disclaimer + .case-bridge,
.artifact-disclaimer + .case-steps,
.artifact-disclaimer + .opportunity-frame,
.artifact-disclaimer + .case-artifact { margin-top: 0.625rem; }
.artifact-disclaimer--inset {
  display: flex; align-items: flex-start; gap: 0.45rem; max-width: none; margin: 0; padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line); background: rgba(119,176,166,0.035);
}
.artifact-disclaimer--inset::before { flex: 0 0 auto; margin: 0.55em 0 0; }
.artifact-disclaimer--inset span { display: block; max-width: var(--measure); }
.case-artifact figcaption, .backlog-example figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.625rem 1rem; padding: 1rem 1rem; border-bottom: 1px solid var(--line); }
.case-artifact figcaption h3, .backlog-example figcaption h3 { font-size: var(--fs-body); }
.artifact-grid { display: grid; gap: 1px; background: var(--line); }
.artifact-grid div { min-width: 0; padding: 1rem 1rem; background: var(--raise); }
.artifact-grid dt { color: var(--teal); }
.artifact-grid dd { margin-top: 0.375rem; font-size: var(--fs-tight); line-height: var(--lh-body); }
@media (min-width: 42rem) { .artifact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .artifact-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.artifact-question { padding: 1rem; font-family: var(--text); font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; line-height: var(--lh-normal); color: var(--ink); }

.discovery-questions { display: grid; gap: 0.625rem; margin-top: 1.25rem; }
.discovery-questions li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raise); }
.discovery-questions > li > span { font-size: var(--fs-label); font-weight: 800; letter-spacing: 0.08em; color: var(--rust); }
.discovery-questions h3 { font-size: var(--fs-tight); }
.discovery-questions p { margin-top: 0.25rem; font-size: var(--fs-tight); line-height: var(--lh-normal); }
@media (min-width: 42rem) { .discovery-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.decision-ledger { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.decision-card { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--glass); }
.decision-card h3 { margin-top: 0.5rem; font-size: var(--fs-tight); line-height: var(--lh-snug); }
.decision-card dl { display: grid; gap: 0.75rem; margin-top: 0.875rem; }
.decision-card dl div { padding-top: 0.625rem; border-top: 1px solid var(--line); }
.decision-card dt { color: var(--teal); }
.decision-card dd { margin-top: 0.25rem; font-size: var(--fs-tight); line-height: var(--lh-normal); }
@media (min-width: 68rem) { .decision-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.priority-stack { position: relative; display: grid; gap: 0.5rem; margin-top: 1.25rem; }
.priority-stack::before { content: ''; position: absolute; left: 1.28rem; top: 1.4rem; bottom: 1.4rem; width: 1px; background: linear-gradient(var(--rust), var(--teal)); opacity: 0.55; }
.priority-stack li { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.875rem; align-items: start; padding: 1rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raise); }
.priority-stack li > span { z-index: 1; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border: 1px solid var(--line-2); border-radius: 50%; background: var(--ground); font-size: var(--fs-label); font-weight: 800; color: var(--rust); }
.priority-stack b { color: var(--ink); font-size: var(--fs-tight); }
.priority-stack p { margin-top: 0.25rem; font-size: var(--fs-tight); line-height: var(--lh-normal); }

.scope-boundary { display: grid; gap: 1px; margin-top: 1.25rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--line); }
.scope-boundary section { min-width: 0; padding: 1rem; background: var(--raise); }
.scope-boundary h3 { margin-top: 0.5rem; font-size: var(--fs-tight); }
.scope-boundary section > p:last-child { margin-top: 0.375rem; font-size: var(--fs-tight); line-height: var(--lh-normal); }
@media (min-width: 48rem) { .scope-boundary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.portfolio-map { margin-top: clamp(1.25rem, 0.9714rem + 1.143vw, 2rem); }
.portfolio-map a {
  display: inline-flex; align-items: center; min-height: 2rem;
  color: var(--rust); font-weight: 700; text-underline-offset: 0.2em;
}
.case-related { margin-top: 1.25rem; }
.case-related > div { display: grid; gap: 0.625rem; }
@media (min-width: 46rem) {
  .case-page--electric #business .decision-ledger,
  .case-page--electric #chile .decision-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-page--electric #chile .decision-ledger > .decision-card:last-child { grid-column: 1 / -1; }
  .case-page--electric #chile .decision-ledger > .decision-card:last-child h3 { max-width: var(--measure); }
  .case-page--electric #chile .decision-ledger > .decision-card:last-child dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* These concise evidence blocks used to become horizontal carousels on a
   phone. That hid most of the second and third entries beyond the viewport and
   made complete copy look like an overflow bug. The base single-column grid is
   clearer here: every boundary remains visible and no lateral gesture is
   required to finish a sentence. */
@media (max-width: 39.99rem) {
  .case-page--electric .evidence-key,
  .case-page--electric .portfolio-map {
    grid-template-columns: minmax(0, 1fr); overflow: hidden;
  }
}
.case-page--electric .case-story + .case-next { margin-top: 0; }

.backlog-example { margin-top: 1.25rem; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--glass); }
.backlog-example__intent { display: grid; gap: 0.375rem; padding: 1rem 1rem; border-bottom: 1px solid var(--line); }
.backlog-example__intent span { color: var(--rust); }
.backlog-example__intent p { color: var(--ink); }
.backlog-example blockquote { margin: 0; padding: clamp(1.1rem, 0.9514rem + 0.610vw, 1.5rem); border-bottom: 1px solid var(--line); font-family: var(--text); font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; line-height: var(--lh-normal); color: var(--ink); }
.backlog-criteria { padding: 1rem 1rem; }
.backlog-criteria ul { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.backlog-criteria li { display: grid; gap: 0.125rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.backlog-criteria b { color: var(--ink); font-size: var(--fs-tight); }
.backlog-criteria span { font-size: var(--fs-tight); line-height: var(--lh-normal); }
@media (min-width: 42rem) { .backlog-criteria ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem 1.25rem; } }

.readiness-console { margin-top: 1.25rem; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-md); background: linear-gradient(rgba(236,239,238,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(236,239,238,0.018) 1px, transparent 1px), var(--raise); background-size: 26px 26px; }
.readiness-console > header, .learning-loop > header { padding: 1rem 1rem; border-bottom: 1px solid var(--line); }
.readiness-console > header h3, .learning-loop > header h3 { margin-top: 0.375rem; font-size: var(--fs-body); }
.readiness-console ol { display: grid; gap: 1px; background: var(--line); }
.readiness-console li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; min-width: 0; padding: 1rem; background: rgba(12,17,19,0.96); }
.readiness-console li > span { font-size: var(--fs-label); font-weight: 800; color: var(--rust); }
.readiness-console li b { color: var(--ink); font-size: var(--fs-tight); }
.readiness-console li p { margin-top: 0.25rem; font-size: var(--fs-tight); line-height: var(--lh-normal); }
.readiness-console li em { grid-column: 2; font-style: normal; color: var(--teal); }
@media (min-width: 42rem) { .readiness-console ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── case steps: a sequence of things I actually did, in order ───────────── */
.case-steps { display: grid; gap: 1px; margin-top: 1.25rem; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.case-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; min-width: 0; padding: 1rem 1rem; background: var(--raise); }
.case-steps li > span { font-size: var(--fs-label); font-weight: 800; letter-spacing: 0.08em; color: var(--rust); font-variant-numeric: tabular-nums; }
.case-steps h3 { font-size: var(--fs-tight); font-weight: 700; color: var(--ink); }
.case-steps p { margin-top: 0.25rem; font-size: var(--fs-tight); line-height: var(--lh-body); }
@media (min-width: 60rem) { .case-steps li { grid-template-columns: auto 15rem minmax(0, 1fr); align-items: baseline; gap: 1.5rem; } .case-steps li > div { display: contents; } .case-steps p { margin-top: 0; } }

.release-path { display: grid; gap: 0.75rem; margin-top: 1.25rem; align-items: stretch; }
.release-path article { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--glass); }
.release-path article > span { font-size: var(--fs-label); font-weight: 800; color: var(--rust); }
.release-path h3 { margin-top: 0.375rem; font-size: var(--fs-tight); }
.release-path p { margin-top: 0.375rem; font-size: var(--fs-tight); line-height: var(--lh-normal); }
.release-path > i { align-self: center; justify-self: center; width: 1px; height: 1.2rem; background: linear-gradient(var(--rust), var(--teal)); }
@media (min-width: 68rem) {
  .release-path { grid-template-columns: minmax(0,1fr) 2rem minmax(0,1fr) 2rem minmax(0,1fr); }
  .release-path > i { width: 100%; height: 1px; }
}
.established-outcome { padding: clamp(1.2rem, 1.0143rem + 0.762vw, 1.7rem); border: 1px solid rgba(119,176,166,0.34); border-radius: var(--r-md); background: radial-gradient(100% 160% at 0% 0%, rgba(119,176,166,0.14), transparent 64%), var(--raise); }
.established-outcome .quote { margin-top: 0.625rem; max-width: 38ch; }
.evidence-ledger { display: grid; gap: 1px; margin-top: 1.25rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--line); }
.evidence-ledger section { min-width: 0; padding: 1rem; background: var(--raise); }
.evidence-ledger h3 { margin-top: 0.5rem; font-size: var(--fs-tight); }
.evidence-ledger ul { display: grid; gap: 0.375rem; margin-top: 0.75rem; }
.evidence-ledger li { position: relative; padding-left: 0.875rem; font-size: var(--fs-tight); line-height: var(--lh-normal); }
.evidence-ledger li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.evidence-ledger section:last-child li::before { background: var(--ink-3); }
@media (min-width: 42rem) { .evidence-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.learning-loop { margin-top: 1.25rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--glass); }
.learning-loop > div { display: grid; gap: 1px; background: var(--line); }
.learning-loop article { min-width: 0; padding: 1rem; background: var(--raise); }
.learning-loop article span { font-size: var(--fs-label); font-weight: 800; color: var(--rust); }
.learning-loop article p { max-width: var(--measure); margin-top: 0.375rem; font-size: var(--fs-tight); line-height: var(--lh-normal); }
@media (min-width: 42rem) { .learning-loop > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 42rem) {
  .case-page :is(.backlog-criteria ul, .readiness-console ol, .learning-loop > div) > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.case-insight { margin: 1.25rem 0 0; padding: 1rem 1.25rem; border-left: 2px solid var(--teal); background: rgba(119,176,166,0.055); font-family: var(--text); font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.006em; line-height: var(--lh-normal); color: var(--ink); }
.case-source-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: var(--fs-tight); line-height: var(--lh-body); color: var(--ink-3); }

/* Academic cases use the same instrument-like system, with a faint atmospheric
   field so each long-form decision journey has its own spatial character. */
.case-page { position: relative; isolation: isolate; }
.case-page::before {
  content: ''; position: fixed; z-index: -1; inset: var(--sticky-offset) 0 auto; height: min(60rem, 88vh);
  pointer-events: none; opacity: 0.7;
  background:
    radial-gradient(52rem 30rem at 83% 4%, rgba(119,176,166,0.055), transparent 72%),
    radial-gradient(42rem 26rem at 5% 36%, rgba(208,138,92,0.045), transparent 74%);
}
.case-page--electric::before {
  background:
    radial-gradient(54rem 34rem at 82% 0%, rgba(92,151,157,0.11), transparent 72%),
    radial-gradient(38rem 26rem at 3% 42%, rgba(208,138,92,0.05), transparent 74%);
}
.case-page--zenhome::before {
  background:
    radial-gradient(48rem 30rem at 84% 4%, rgba(214,168,102,0.10), transparent 72%),
    radial-gradient(40rem 30rem at 0% 46%, rgba(119,176,166,0.055), transparent 74%);
}
.case-page--mcy::before {
  background:
    radial-gradient(52rem 34rem at 86% 2%, rgba(119,176,166,0.12), transparent 72%),
    radial-gradient(38rem 28rem at 0% 48%, rgba(102,134,111,0.07), transparent 74%);
}
.case-page--professional::before {
  background:
    radial-gradient(54rem 34rem at 84% 2%, rgba(119,176,166,0.09), transparent 72%),
    radial-gradient(44rem 30rem at 2% 46%, rgba(208,138,92,0.065), transparent 74%);
}
@media (min-width: 60rem) {
  .case-page--professional .case-phase { grid-template-columns: 15.5rem minmax(0, 1fr); }
  .case-page--professional .case-phase__meta h2 { max-width: 18ch; }
}
.case-page .case-thesis,
.case-page .case-artifact,
/* One elevation for cards, one for chrome. Thirteen shadows with no two alike
   meant nothing read as a level above anything else, which is a shadow's whole
   job. Glows on the map (0 0 Npx in a hue) are a different role and stay. */
.card, .case-page .decision-card, .case-page .release-path article,
.case-page .learning-loop, .case-page .readiness-console,
.case-artifact, .backlog-example, .watch, .scope, .case-abstract { box-shadow: var(--e1); }
.case-page :is(.decision-card, .release-path article, .discovery-questions li, .priority-stack li) {
  transition: border-color var(--t-state) var(--ease-out), background-color var(--t-state) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  /* Static evidence can acknowledge the pointer without pretending to be a
     destination. Only linked cards lift; informational cards receive a quiet
     surface change and never move beneath the reader. */
  .case-page :is(.decision-card, .release-path article, .discovery-questions li, .priority-stack li):hover {
    border-color: var(--line-2); background-color: var(--raise-2);
  }
}

/* ── education ────────────────────────────────────────────────────────────
   It used to be a row in the capability grid, where full sentences sat in
   rounded pills among single-word chips — a different kind of thing wearing
   the same shape. It reads as what it is next to the roles instead. */
.edu {
  display: grid; gap: 1px; margin-top: clamp(1.6rem, 3.5vh, 2.2rem);
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
@media (min-width: 52rem) { .edu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.edu > div { background: var(--raise); padding: 0.875rem 1rem; }
.edu dt { font-size: var(--fs-tight); font-weight: var(--weight-medium); line-height: var(--lh-snug); color: var(--ink); }
.edu dd { margin-top: 0.25rem; font-size: var(--fs-micro); line-height: var(--lh-normal); color: var(--ink-3); }

/* ── target size ──────────────────────────────────────────────────────────
   Every control clears the WCAG 2.2 minimum of 24px. The header actions use
   40px circles to balance touch comfort with the compact identity handoff;
   isolated inline destinations receive the full 44px touch target. */
.world__to { min-height: 44px; }
.case-related .card__go, .case-next .card__go { min-height: 44px; }

/* ── glass, applied ───────────────────────────────────────────────────────
   The blur sits behind an @supports because without it the fallback tint is
   what shows, and that has to be legible on its own. The specular hairline is
   what actually makes a surface read as a material rather than a lighter
   rectangle: one bright line along the top edge, one very faint one round. */
.glance, .scope, .watch, .case-abstract, .case-artifact, .backlog-example,
.readiness-console, .learning-loop, .decision-card, .release-path article,
.case-thesis, .caps__row, .edu, .outcome, .case-boundary, .rules, .world,
.case-snapshot, .evidence-ledger, .case-steps, .worlds, .evidence-key, .decision-rule {
  box-shadow: var(--e1), var(--specular);
}
@supports (backdrop-filter: blur(1px)) {
  .glance, .scope, .watch, .case-abstract, .case-artifact, .backlog-example,
  .readiness-console, .learning-loop, .decision-card, .release-path article,
  .case-thesis, .caps__row, .edu, .outcome, .case-boundary, .rules, .world,
  .case-snapshot, .evidence-ledger, .case-steps, .worlds, .evidence-key, .decision-rule {
    backdrop-filter: var(--glass-blur);
  }
}
/* Grid-gap panels draw their own hairlines, so the outer specular would double
   up on every cell. They get it once, on the container. */
.worlds > .world, .evidence-ledger > section, .caps > .caps__row,
.edu > div, .scope > div, .watch dl > div, .case-abstract dl > div,
.case-snapshot > div, .evidence-key > div, .decision-rule > article { box-shadow: none; backdrop-filter: none; }

/* ── the influences, as an index ──────────────────────────────────────────
   Each card carries its full reflection in the markup, because that is what
   the panel reads from and what a reader without scripting needs. With
   scripting the panel is the way in, so the card collapses to its claim and
   the section stops repeating itself at length. */
.mind-panel-ready [data-mind-fallback] { display: none; }
.mind-panel-ready #worlds { min-height: 0; padding-block: 0; }
.mind-panel-ready #worlds > .quote { margin-top: 0 !important; }
.mind-panel-ready .bp + #contact {
  position: relative; isolation: isolate; padding-top: clamp(1.75rem, 4vh, 3rem);
}
.mind-panel-ready .bp + #contact::before {
  content: ''; position: absolute; z-index: -1; top: -5rem; left: 50%;
  width: 100vw; height: 11rem; transform: translateX(-50%); pointer-events: none;
  background:
    radial-gradient(48% 110% at 54% 0%, rgba(119,176,166,0.075), transparent 72%),
    radial-gradient(32% 100% at 30% 0%, rgba(208,138,92,0.04), transparent 74%);
}
.mind-panel-ready .world { min-height: 15rem; padding-block: 1.25rem; }
.worlds { box-shadow: none; backdrop-filter: none; }
.case-boundary--integrated { box-shadow: var(--specular); }
.case-boundary--integrated + .case-thesis { box-shadow: var(--e1), var(--specular); }
@media (max-width: 45.99rem) { .mind-panel-ready .world { min-height: 0; } }

/* ── touch rendering budget ───────────────────────────────────────────────
   Fixed backgrounds and large backdrop-filter surfaces are repainted during
   every mobile scroll. Their opaque fallbacks already carry the visual system,
   so compact layouts use those directly and keep movement on the compositor. */
@media (max-width: 56rem), (hover: none) and (pointer: coarse) {
  body {
    background-attachment: scroll;
    background-image: radial-gradient(105% 34rem at 78% -5rem, rgba(208,138,92,0.045), transparent 72%);
    background-repeat: no-repeat;
    background-size: 100% 34rem;
  }
  .case-page::before { position: absolute; }
  .nav { will-change: auto; -webkit-overflow-scrolling: auto; }
  /* Mobile Safari can briefly drop a sticky composited layer during a scripted
     in-page jump. The touch path uses native fragments; this solid backing
     removes the high-contrast ghost without forcing another GPU layer. */
  .bar {
    background: var(--ground); will-change: auto; isolation: isolate;
  }
  .bp__head { contain: paint; }
  .bp__grain { display: none; }
  .bar, .btn, .card, .flagship-case, .contact, .mind-panel, .case-nav,
  .glance, .scope, .watch, .case-abstract, .case-artifact, .backlog-example,
  .readiness-console, .learning-loop, .decision-card, .release-path article,
  .case-thesis, .caps__row, .edu, .outcome, .case-boundary, .rules, .world,
  .case-snapshot, .evidence-ledger, .case-steps, .evidence-key, .decision-rule {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .case-nav { background: rgba(9,12,13,0.985); }
  .case-nav[data-scroll-left], .case-nav[data-scroll-right] {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .mind-panel { background: rgba(10,14,16,0.985); }
  .mind-panel::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(2,4,5,0.78); }

  /* A case phase can be several phone screens tall. Fading that whole raster is
     expensive and adds no useful hierarchy; compact readers get its content
     immediately while smaller headings and cards retain the reveal rhythm. */
  .js.reveal-ready .case-phase.r {
    opacity: 1;
    transition: none;
  }
}

/* A direct header jump is orientation, not part of the identity handoff. On a
   coarse pointer the destination state lands immediately, while natural
   scrolling still keeps the portrait/name transition in both directions. */
@media (hover: none) and (pointer: coarse) {
  /* WebKit can omit a sticky element from one composited frame while an
     in-page fragment is committed. On touch hardware the header is fixed
     instead, while this normal-flow spacer preserves its exact footprint.
     Its independent fixed backing also prevents high-contrast page content
     showing through if Safari ever misses the header's paint itself. */
  .bar-shield {
    display: block;
    height: var(--sticky-offset);
  }
  .bar-shield::before {
    content: '';
    position: fixed;
    z-index: 69;
    inset: 0 0 auto;
    height: var(--sticky-offset);
    background: var(--ground);
    pointer-events: none;
  }
  .bar-shield + .bar {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
  }
  .js.is-touch-nav-jump .mark,
  .js.is-touch-nav-jump .nav a,
  .js.is-touch-nav-jump .bar__icon { transition: none !important; }
}

/* Expanding the supporting-pattern collection can add more than ten thousand
   phone pixels. Animating that height forces layout on every frame; the icon
   still rotates, but the document itself opens in one stable pass. */
.disclosure--case-patterns.disclosure-ready > .disclosure__panel { transition: none; }

/* ── the arrival mark ─────────────────────────────────────────────────────
   Applied only after scrolling settles: a short local ring identifies the
   exact principle without animating the whole card for several seconds. */
.is-linked {
  position: relative;
  isolation: isolate;
  scroll-margin-top: calc(var(--sticky-offset) + 2rem);
}
.is-linked::after {
  content: ''; position: absolute; z-index: 2; inset: 0.3rem; pointer-events: none;
  border: 1px solid var(--rust); border-radius: calc(var(--r-md) - 0.2rem);
  outline: 3px solid rgba(208,138,92,0.1); outline-offset: 0;
  animation: arrive var(--t-attention) var(--ease-out) both;
}
@keyframes arrive {
  0% { opacity: 0; transform: scale(0.985); }
  24% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .is-linked::after { animation: none; opacity: 1; transform: none; }
}

/* ── measure ──────────────────────────────────────────────────────────────
   Applied where the block had no ceiling at all and was inheriting the full
   column. Every value here is a max-width, so a narrower context still wins. */
.colophon { max-width: var(--measure-wide); }
.case-source-note { max-width: var(--measure-wide); }
.case-boundary p { max-width: var(--measure-wide); }
.case-phase__body > p.note, .note { max-width: 72ch; }
dd.is-open-question { max-width: var(--measure-tight); }
.case-phase__intro { max-width: var(--measure); }
.case-phase__body > p { max-width: var(--measure); }
.backlog-example__intent p { max-width: var(--measure); }
.case-library__intro p:last-child { max-width: var(--measure-wide); }
.did li { max-width: var(--measure); }
.case-abstract dd, .watch dd { max-width: var(--measure); }
.evidence-ledger p, .decision-card dd { max-width: var(--measure); }
.case-related p { max-width: var(--measure-wide); }
.case-thesis p { max-width: var(--measure-wide); }
.case-hero .sec__aside { max-width: min(var(--measure), 38rem); }
.priority-stack p, .readiness-console li p, .case-steps p { max-width: var(--measure); }

/* ── print ───────────────────────────────────────────────────────────────── */
/* ── print ───────────────────────────────────────────────────────────────
   Recruiters save candidate pages to PDF and forward them. Two things used to
   make that document mostly blank: the scroll-reveal system leaves everything
   below the fold at opacity 0, and the ink tokens are built for a dark ground,
   so what did print came out near-white on white. Both are fixed at the token
   and reveal level rather than per-component, so a new section inherits it.
   ------------------------------------------------------------------------ */
@media print {
  /* Paper is the other theme. One override here fixes every colour
     declaration downstream instead of patching them one at a time. */
  :root {
    --ground: #fff; --raise: #fff; --raise-2: #fff;
    --ink: #111; --ink-2: #333; --ink-3: #555;
    --rust: #8A4A1C; --teal: #1F5F56; --sand: #6B5A3C;
    --moss: #3F5B37; --clay: #7A4F2E; --amber: #7A5A1E; --bone: #4A4438;
    --line: #ccc; --line-2: #bbb; --line-3: #999;
  }

  /* Nothing may print at opacity 0. This is the whole bug. */
  .r, .r:not(.is-in), .is-in { opacity: 1 !important; transform: none !important; animation: none !important; }
  /* Including the header mark, which is hidden until it arrives: print from the
     top of the page and it would otherwise print as a blank space. */
  .mark { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .nav { transform: none !important; }

  .bar, .bar-shield, .skip, .case-nav, .bp__stage, .bp__vig, .bp__grain, .mind-panel,
  .motion, .bar__rail { display: none !important; }
  body { background: #fff; color: #111; }
  .case-page::before { content: none !important; }
  a { color: #111; }
  main, section, article { break-inside: auto; }
  h1, h2, h3, h4 { break-after: avoid; }
  .card, .rule, .world, .outcome, .glance, .case-artifact, .case-abstract, .scope > div,
  .decision-card, .backlog-example, .readiness-console, .established-outcome, .learning-loop,
  .release-path article, .case-library__intro {
    border-color: #ccc; background: none; break-inside: avoid;
  }
  .contact, .contact__links, .contact__fit,
  .case-boundary--integrated, .case-boundary--integrated + .case-thesis {
    background: #fff !important; box-shadow: none !important; backdrop-filter: none !important;
    border-color: #ccc;
  }
  .foot { background: #fff !important; }
  .mind-panel-ready [data-mind-fallback] { display: grid !important; }
  .mind-panel-ready #worlds { padding-block: clamp(3.2rem, 8vh, 5.5rem); }
  .mind-panel-ready #worlds > .quote { margin-top: clamp(2rem,5vh,3rem) !important; }
  .map__relationships { display: block !important; }
  .hero__name { color: #111; }
  .map { --layout: list; aspect-ratio: auto; max-height: none; }
  .node { position: static; transform: none !important; }
  [data-disclosure-panel] { grid-template-rows: 1fr !important; }
  [data-disclosure-toggle], [data-disclosure-close] { display: none !important; }
}