/* Portfolio V1: real media frames, decision pairs, Experience (60/40).
   Layered on top of remix.css (Observatory v5); tokens from presets/portfolio-obs5. */

/* ---------- visible review markers ---------- */
mark.confirm {
  background: rgb(242 184 128 / 0.13); color: var(--text); border-bottom: 1px dashed var(--ember);
  padding: 0 0.25em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.confirm-k {
  font-family: var(--font-mono); font-variation-settings: var(--fvs-mono); font-size: 0.72em; letter-spacing: 0.08em;
  color: var(--ember); margin-right: 0.45em; text-transform: uppercase;
}
.confirm-k::after { content: ":"; }

/* ---------- real screens: fixed 16:10 frames, a labelled empty state when the local file is absent ---------- */
.shot {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-2);
  border: 1px solid var(--line-strong); background: linear-gradient(160deg, var(--g-2), var(--g-1));
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.55);
}
.shot img, .shot video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot.is-missing img, .shot.is-missing video { visibility: hidden; }
.shot.is-missing::after {
  content: attr(data-pending); position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-mono); font-variation-settings: var(--fvs-mono); font-size: var(--step--2); color: var(--text-3); letter-spacing: 0.08em;
}

/* home: the settled preview is a real screen */
.c-preview .c-shot { box-shadow: 0 18px 36px rgb(0 0 0 / 0.6); }
.c-role { font-size: var(--step--2); color: var(--text-2); letter-spacing: 0.04em; margin: 0; }
.ofeat {
  display: inline-block; margin-left: var(--s-2); padding: 0 0.5em; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 0.78em; color: var(--ember); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px;
}

/* case stage: a large, readable screen */
.lit-frame--shot { max-width: 1180px; margin: 0 auto; width: 100%; }
.stage-shot { box-shadow: 0 30px 60px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.04); }

/* ---------- decisions: text beside the before/after evidence ---------- */
.decisions--v1 { grid-template-columns: 1fr; gap: var(--s-6); }
.decision--v1 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: start; }
.decision--v1 .d-text { display: grid; gap: var(--s-3); align-content: start; }
.decision--v1 .d-text > p:not(.mono):not(.d-confirm) { color: var(--text-2); }
.d-confirm { font-size: var(--step--1); }
.d-evidence { font-size: var(--step--2); color: var(--text-2); line-height: 1.6; }
.status { display: inline-block; margin-left: var(--s-2); padding: 0 0.55em; border-radius: 999px; border: 1px solid currentColor; font-size: 0.92em; letter-spacing: 0.06em; text-transform: uppercase; }
.status--shipped { color: var(--ion); }
.status--proposal { color: var(--ember); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-content: start; }
.pair--single { grid-template-columns: 1fr; }
.pair-fig { margin: 0; display: grid; gap: var(--s-2); }
.pair-fig figcaption { font-size: var(--step--2); color: var(--text-2); }
.pair-fig.is-before .shot { filter: saturate(0.85); }

/* ---------- artifacts ---------- */
.media-slot { align-content: start; }
.media-slot--wide { grid-column: 1 / -1; }
.media-slot--wide .shot { max-width: 1180px; }
.slot-cap { font-size: var(--step--1); color: var(--text-2); }
.result dd.verify { font-size: var(--step--2); color: var(--text-2); }
.block-body > p, .built li, .d-text > p, .challenges p { max-width: 72ch; }

/* ---------- Experience: role list (~60%) + a smaller capabilities column (~40%) ---------- */
.experience { padding: var(--s-8) var(--margin) 0; max-width: calc(var(--max) + 2 * var(--margin)); margin: 0 auto; position: relative; scroll-margin-top: 72px; }
.experience:focus { outline: none; }
.xp-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.xp-list { list-style: none; margin: 0; padding: 0; display: grid; }
.xp-entry { padding: var(--s-5) 0; border-top: 1px solid var(--line); display: grid; gap: var(--s-1); }
.xp-entry:first-child { border-top: 0; padding-top: 0; }
.xp-line1 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-4); margin: 0; }
.xp-role { font-family: var(--font-display); font-variation-settings: var(--fvs-list, var(--fvs-display)); font-size: var(--step-1); line-height: 1.25; color: var(--text); }
.xp-dates { font-size: var(--step--2); color: var(--text-2); letter-spacing: 0.04em; white-space: nowrap; }
.xp-org { margin: 0; color: var(--text-2); }
.xp-bullets { margin: var(--s-2) 0 0; padding-left: 1.1em; display: grid; gap: var(--s-1); color: var(--text-2); font-size: var(--step--1); max-width: 64ch; }
.xp-bullets li::marker { color: var(--text-3); }
.xp-case { justify-self: start; display: inline-flex; align-items: center; min-height: var(--target); color: var(--ion); text-decoration: none; font-size: var(--step--1); }
.xp-case:hover { text-decoration: underline; }
.xp-case:focus-visible, .xp-resume a:focus-visible { outline: 2px solid var(--obs-2); outline-offset: 2px; }
.xp-entry.is-pending .xp-role, .xp-entry.is-pending .xp-org { color: var(--text-2); }
.xp-sub { font-size: var(--step--2); color: var(--obs-2); letter-spacing: 0.14em; text-transform: uppercase; margin: var(--s-6) 0 var(--s-3); }
.xp-caps .xp-sub:first-child { margin-top: 0; }
.xp-add { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.xp-add-t { margin: 0; color: var(--text); }
.xp-add-d { margin: var(--s-1) 0 0; color: var(--text-2); font-size: var(--step--1); max-width: 64ch; }
.xp-caps { position: sticky; top: 88px; display: grid; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-2); background: rgb(17 19 22 / 0.72); }
.cap-h { font-size: var(--step--2); color: var(--text-2); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 var(--s-2); }
.cap-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--step--1); color: var(--text); }
.cap-group li:not(:last-child)::after { content: " ·"; color: var(--text-3); }
.xp-resume { margin: 0; }

@media (max-width: 1100px) {
  .decision--v1 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .xp-grid { grid-template-columns: 1fr; }
  .xp-caps { position: static; }
  .pair { grid-template-columns: 1fr; }
}

.xp-case, .xp-resume a, .c-open { gap: 0.4em; }


/* v1 framing: the settled preview keeps one short role line (the full detail lives on the case page);
   on narrow screens the "01 · Formation" label (already in the list) gives way so the centre stays as compact as v5's */
.c-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 860px) { .centre .c-form { display: none; } .c-role { font-size: 0.66rem; } }
.c-role { display: flex; align-items: baseline; justify-content: center; gap: 0.5em; }
.c-role-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.confirm--chip { flex: none; padding: 0 0.35em; }
.confirm--chip .confirm-k { margin: 0; font-size: 0.86em; }
.confirm--chip .confirm-k::after { content: none; }
.c-role-t { text-transform: none; letter-spacing: 0; }
@media (max-width: 860px) { .c-role { flex-wrap: wrap; row-gap: 2px; } }

/* review 2 · readability: decisions stack (text, then a full-width before/after pair); every case screen can be enlarged */
.decision--v1 { grid-template-columns: 1fr; }
.decision--v1 .d-text { max-width: 72ch; }
.shot-zoom { cursor: zoom-in; color: inherit; text-decoration: none; }
.shot-zoom:focus-visible { outline: 2px solid var(--obs-2); outline-offset: 3px; }
.zoom-hint {
  position: absolute; right: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; font-size: var(--step--2);
  background: rgb(11 12 14 / 0.82); color: var(--text); border: 1px solid var(--line-strong); letter-spacing: 0.06em; pointer-events: none;
}
.shot-zoom.is-missing .zoom-hint { display: none; }
@media (hover: hover) { .zoom-hint { opacity: 0; transition: opacity var(--d-2, 160ms) ease; } .shot-zoom:hover .zoom-hint, .shot-zoom:focus-visible .zoom-hint { opacity: 1; } }
.lightbox { width: min(96vw, 1800px); max-width: none; max-height: 94vh; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-2); background: #0b0c0e; color: var(--text); }
.lightbox::backdrop { background: rgb(0 0 0 / 0.82); }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.lightbox-cap { margin: 0; font-size: var(--step--2); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox img { display: block; width: 100%; height: auto; max-height: calc(94vh - 60px); object-fit: contain; cursor: zoom-out; }
@media (max-width: 860px) {
  .lightbox { width: 100vw; max-height: 100vh; border-radius: 0; }
  .lightbox img { width: 100%; max-width: 100vw; height: auto; max-height: calc(100vh - 56px); object-fit: contain; } /* phones: the whole capture, fitted to the width (pinch to zoom) */
  .lightbox { overflow-x: hidden; overflow-y: auto; max-width: 100vw; border-left: 0; border-right: 0; }
}
/* review 2 · mobile cases: a shorter formation plate so the real screen arrives sooner */
@media (max-width: 860px) { .form-plate { min-height: 170px; } }

/* v1 project colours (home orbit, list dots, preview accents, aura, case plates). The --obs-* tokens keep their UI roles. */
:root {
  --proj-1: #F4F6FF;  /* Steplight: white stairs */
  --proj-2: #E0662A;  /* Favente: ember-orange dust (v1 polish: layered, with --proj-2-deep and --proj-2-hi) */
  --proj-3: #4D7DFF;  /* Marketing: cobalt dust */
  --proj-4: #1FB283;  /* Automation: jade dust */
  --proj-2-deep: #B8441C; --proj-2-hi: #FFB347;   /* deeper ember / amber highlights */
  --proj-3-deep: #2F4FD6; --proj-3-hi: #A8DCFF;   /* deeper cobalt / icy-blue highlights */
  --proj-4-deep: #15876A; --proj-4-hi: #A6F5D0;   /* deeper jade / mint highlights */
  --proj-5: #B3A4FF;
  --proj-gold: #FFC21A;  /* Steplight's ONE top star (brand amber dot) */
  --proj-amber: #FFB347; /* Favente's bright anchor points */
}

.pair-note { grid-column: 1 / -1; margin: 0; font-size: var(--step--1); color: var(--text-2); max-width: 80ch; border-left: 2px solid var(--line-strong); padding-left: var(--s-3); }
.status--merged { color: var(--ion); }

/* v1 northern lights (home): a half-resolution procedural canvas, screen-blended over the sky (black = no light), below the
   reading scrims. Without WebGL: a static soft gradient approximation. */
.field-layer canvas.aurora { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; image-rendering: auto; }
.field-layer canvas.aurora.aurora--static { opacity: calc(var(--sky-n, 0) * 0.8);
  background: radial-gradient(60% 30% at 70% 42%, rgb(77 209 174 / 0.16), transparent 70%), radial-gradient(50% 35% at 82% 26%, rgb(120 96 214 / 0.14), transparent 72%); }

/* v1 break-up: the painted core glow fades as the core releases its last stars (convergence progress ~0.15 -> 0.6) */
.home .field-layer::before { opacity: clamp(0, calc(1.33 - var(--jp, 0) * 2.2), 1); }

/* v1 opening screen (home): charcoal, a centred italic-serif name, a faint gold wireframe and two fine gold lines drawing
   inward. It covers loading only until the galaxy's first complete frame is presented (remix/opener.js). Decorative,
   aria-hidden, never captures input; hidden without JS. */
/* Playfair Display 1.203 (OFL-1.1), Latin subsets as WOFF2. A subset is a Modified Version under the OFL, so the files
   carry the family name "Portfolio Serif Web" instead of the Reserved Font Name; the copyright notice is kept. */
@font-face { font-family: "Portfolio Serif"; font-style: italic; font-weight: 400; font-display: block;
  src: url("../assets/fonts/portfolio-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Portfolio Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/portfolio-serif-latin-400-regular.woff2") format("woff2"); }
.opener { display: none; }
html.js .opener { --gold: #C9A65E; position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 46%, #17181c 0%, #101114 60%, #0b0c0e 100%); transition: opacity 320ms ease-out, visibility 0s linear 320ms; }
html.js .opener.is-out { opacity: 0; visibility: hidden; }
.opener[hidden] { display: none !important; }
.opener-name { position: relative; z-index: 2; margin: 0; font-family: "Portfolio Serif", "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(2.6rem, 2rem + 4vw, 5.4rem); letter-spacing: 0.01em; color: #EFE6D2; text-shadow: 0 0 40px rgb(201 166 94 / 0.18); }
.opener-wire { position: absolute; width: min(62vmin, 560px); height: min(62vmin, 560px); color: var(--gold); opacity: 0.22; z-index: 1; }
.opener-line { position: absolute; top: 50%; height: 1px; width: calc(50vw - min(24vw, 300px)); background: linear-gradient(90deg, transparent, var(--gold)); opacity: 0.75; z-index: 1;
  transform: scaleX(0); animation: opener-draw 1100ms cubic-bezier(.2,.7,.2,1) 120ms forwards; }
.opener-line--l { left: 0; transform-origin: left center; }
.opener-line--r { right: 0; transform-origin: right center; background: linear-gradient(270deg, transparent, var(--gold)); }
@keyframes opener-draw { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .opener-line, .opener-wire { display: none; }
  html.js .opener { transition: opacity 200ms linear, visibility 0s linear 200ms; }
}
/* the canvas must not fade in behind the opener: the first revealed frame is fully opaque */
html.js .home .field-layer canvas { transition: none; }

/* v1 break-up: while galaxy stars stream past the hero copy, a soft, feathered text-backed dim keeps the hero AA.
   Invisible at scroll 0 (the intact galaxy sits above the copy); it fades in with the break-up (--jp = progress). */
.home .hero-copy { position: relative; isolation: isolate; }
.home .hero-copy::before { content: ""; position: absolute; inset: -90px -170px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(11 12 14 / 0.88) 0%, rgb(11 12 14 / 0.86) 58%, rgb(11 12 14 / 0.5) 80%, transparent 100%);
  opacity: clamp(0, calc(var(--jp, 0) * 9), 1); }
@media (max-width: 520px) { .home .hero-copy::before { inset: -150px -70px -80px; } }
/* opener fallback: an opaque static sky over the field (same gradients as the no-WebGL layer); faded out on a late frame */
.field-layer .static-sky { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 700ms ease-out;
  background: radial-gradient(46% 52% at 60% 46%, rgb(127 230 200 / 0.11), transparent 72%), radial-gradient(30% 34% at 70% 62%, rgb(157 184 255 / 0.08), transparent 70%), var(--g-0, #0b0c0e); }
.field-layer .static-sky.is-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .field-layer .static-sky { transition: none; } }


/* v1 trailer title cards (home): one at a time, centred in the open sky, a large title with a small subline beneath.
   Without JS they read as a plain list. Each card carries a soft dim behind it so the text stays AA over stars/aurora. */
.beats { max-width: 40rem; margin: 0 auto; padding: var(--s-6) var(--margin); display: grid; gap: var(--s-5); text-align: center; }
.beat-title { margin: 0; font-family: var(--font-display); font-variation-settings: var(--fvs-hero, var(--fvs-display)); font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.6rem); line-height: 1.05; color: #F2EFE8; text-wrap: balance; }
.beat-sub { margin: var(--s-3) 0 0; font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: #C9D2DC; }
html.js .home .beats { position: static; max-width: none; padding: 0; margin: 0; height: 0; display: block; }
html.js .home .beat { position: fixed; inset: 0; display: grid; place-content: center; padding: 0 var(--margin); text-align: center; pointer-events: none; z-index: 5;
  opacity: var(--k, 0); visibility: hidden; }
html.js .home .beat.is-on { visibility: visible; }
html.js .home .beat > * { position: relative; }
html.js .home .beat .beat-title { filter: blur(calc((1 - var(--k, 0)) * 10px)); letter-spacing: calc((1 - var(--k, 0)) * 0.12em + 0.005em); transform: translateY(calc(var(--out, 0) * (1 - var(--k, 0)) * -18px)); }
html.js .home .beat::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(92vw, 980px); height: min(52vh, 420px); transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(11 12 14 / 0.82) 0%, rgb(11 12 14 / 0.74) 52%, rgb(11 12 14 / 0.35) 78%, transparent 100%); }
@media (prefers-reduced-motion: reduce) { html.js .home .beat .beat-title { filter: none; letter-spacing: 0.005em; transform: none; } }

/* the hero copy clears (0.30h -> 0.44h) before the first title card arrives; cards fit the phone width */
html.js .home .hero-copy { opacity: var(--hf, 1); }
html.js .home .beat > * { max-width: min(94vw, 1100px); margin-left: auto; margin-right: auto; }
@media (max-width: 520px) { .beat-title { font-size: clamp(1.9rem, 1.1rem + 4vw, 2.6rem); } .beat-sub { letter-spacing: 0.12em; } }
/* cards: a centred flex column with an explicit width, so long titles wrap instead of overflowing */
html.js .home .beat { display: flex; flex-direction: column; justify-content: center; align-items: center; }
html.js .home .beat > .beat-title, html.js .home .beat > .beat-sub { width: min(92vw, 1100px); max-width: none; }
/* the hero dim must not widen the page on phones (it overflowed by ~52 px at 390 and made mobile browsers zoom out) */
.home .hero { overflow-x: clip; }
/* the dim must be much wider than the title so the ends of long titles sit inside its solid centre */
html.js .home .beat::before { width: min(150vw, 1300px); height: min(58vh, 480px); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(11 12 14 / 0.9) 0%, rgb(11 12 14 / 0.88) 62%, rgb(11 12 14 / 0.45) 84%, transparent 100%); }

/* v1 typography: Playfair Display (OFL) for the opener name (italic) and for headings and title cards (regular);
   body copy, controls and the project list keep the existing sans. */
:root { --font-serif: "Portfolio Serif", "Iowan Old Style", Georgia, serif; }
.hero-title, .section-title, .case-title, .case-question, .c-name, .beat-title {
  font-family: var(--font-serif); font-variation-settings: normal; font-weight: 400; letter-spacing: -0.005em; text-wrap: balance; }
.home .hero-title { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.4rem); line-height: 1.1; }
.section-title { line-height: 1.12; }
.case-title { line-height: 1.06; }
.case-question { line-height: 1.12; }
.c-name { line-height: 1.12; hyphens: manual; }
.beat-title { letter-spacing: -0.01em; }
html.js .home .beat .beat-title { letter-spacing: calc((1 - var(--k, 0)) * 0.12em - 0.01em); }
@media (max-width: 520px) {
  .home .hero-title { font-size: clamp(1.9rem, 1.3rem + 3vw, 2.4rem); }
  .case-title { font-size: clamp(2rem, 1.2rem + 5vw, 2.8rem); }
  .c-name { font-size: 1.08rem; }
}

/* typography follow-ups: the hero rule in remix.css is more specific; hyphenated words stay whole in card titles;
   the preview's role line may wrap on phones instead of truncating */
.home .hero .hero-title { font-family: var(--font-serif); font-variation-settings: normal; font-weight: 400; letter-spacing: -0.005em; }
.nowrap { white-space: nowrap; }
@media (max-width: 520px) { .c-role-t { font-size: 0.58rem; letter-spacing: 0; } .c-role .confirm--chip { font-size: 0.58rem; } }   /* one line that fits the 154-160 px centre; keeps the centre height */
@media (max-width: 520px) { .c-role { flex-wrap: wrap; justify-content: center; row-gap: 2px; } .c-role-t { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; text-wrap: balance; } }
@media (max-width: 520px) { .c-role { flex-wrap: nowrap; } .c-role-t { white-space: nowrap; font-size: 0.54rem; } }   /* phones: one line keeps the centre compact (framing incl. drift) */
body.case .case-title, body.case .case-question { font-family: var(--font-serif); font-variation-settings: normal; font-weight: 400; letter-spacing: -0.005em; text-wrap: balance; }
.status--live { color: var(--ion); }   /* Favente flows confirmed live (updated résumé) */

/* v1 polish: NO shade behind the trailer titles or the hero copy (the aurora and stars show through). A tight halo sits on the
   letters themselves, and the field keeps its brightest particles clear of the lettering (remix.js exclusionAt). */
html.js .home .beat::before, .home .hero-copy::before { content: none; display: none; }
.beat-title { text-shadow: 0 0 1px rgb(8 9 12 / 0.95), 0 0 4px rgb(8 9 12 / 0.92), 0 0 10px rgb(8 9 12 / 0.85), 0 0 18px rgb(8 9 12 / 0.6), 0 1px 2px rgb(8 9 12 / 0.9); }
.beat-sub { text-shadow: 0 0 1px rgb(8 9 12 / 1), 0 0 3px rgb(8 9 12 / 1), 0 0 7px rgb(8 9 12 / 0.95), 0 0 12px rgb(8 9 12 / 0.8); }
.home .hero-copy > * { text-shadow: 0 0 1px rgb(8 9 12 / 0.95), 0 0 4px rgb(8 9 12 / 0.9), 0 0 12px rgb(8 9 12 / 0.7); }

/* v1 polish: the discipline labels live on the opening screen, directly under the name (small tracked caps). On the page
   itself the hero line stays as text for screen readers, and stays visible without JS (no opener then). */
.opener-id { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(10px, 1.4vw, 18px); text-align: center; padding: 0 16px; }
.opener-tags { margin: 0; font-size: clamp(0.66rem, 0.6rem + 0.25vw, 0.8rem); letter-spacing: 0.22em; text-transform: uppercase; color: var(--obs-1, #7DE3D2); }
html.js .home .hero-kicker { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* v1 content 3: contact row under the email (phone, LinkedIn, the official PDF or its "coming soon" note) */
.foot-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); margin: 0; }
.foot-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.pdf-soon { color: var(--text-2); font-size: var(--step--1); }

/* v1 hero copy (user's exact text): the question as the Playfair headline, the supporting copy beneath it, and the
   Favente role as a quieter line before the calls to action */
.home .hero .hero-title { max-width: 22ch; }
.home .hero-lede { max-width: 46ch; text-wrap: pretty; }
.home .hero-role { margin: 0; font-size: var(--step--1); letter-spacing: 0.02em; color: var(--text-2); opacity: 0.86; }
@media (max-width: 520px) { .home .hero .hero-title { max-width: 16ch; } }

/* ---------- media pass (Steplight): the screen arrives in the first view, one focused crop per decision,
   a poster-first close-day clip, and video insertion points that stay stills until the clip is supplied ---------- */
.case--lead .case-hero--lead { padding-bottom: var(--s-4); }
@media (min-width: 861px) { .case--lead .case-hero--lead .form-plate { min-height: 200px; } }
.case--lead .lit-stage { padding: clamp(0.75rem, 1.6vw, 1.5rem) clamp(0.75rem, 1.6vw, 1.5rem) var(--s-4); }
.case--lead .lit-frame--shot { max-width: none; }
.case-facts { max-width: calc(var(--max) + 2 * var(--margin)); margin: var(--s-5) auto 0; padding: 0 var(--margin); }
.case-facts .facts-strip { margin-top: 0; }
.focus-fig { max-width: var(--fig-max, 860px); }
.shot--focus { aspect-ratio: var(--ar); }
.shot--focus img, .shot--focus video { object-position: center; }
.inspect-fig { margin: var(--s-3) 0 0; max-width: 520px; display: grid; gap: var(--s-2); }
.inspect-fig figcaption { font-size: var(--step--2); color: var(--text-2); }
.media-slots--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .media-slots--2 { grid-template-columns: 1fr; } }
.shot--poster-first .clip-play {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); min-height: var(--target); padding: 0.55em 1.1em;
  border-radius: 999px; border: 1px solid var(--line-strong); background: rgb(11 12 14 / 0.78); color: var(--text);
  font-size: var(--step--1); letter-spacing: 0.06em; cursor: pointer; white-space: nowrap;
}
.clip-play:hover { background: rgb(11 12 14 / 0.92); }
.clip-play:focus-visible { outline: 2px solid var(--obs-2); outline-offset: 3px; }
.shot--poster-first.is-playing .clip-play, .shot.is-missing .clip-play { display: none; }
@media (hover: none) { .kbd-hint { display: none; } }   /* touch screens have no A / Esc keys */
@media (max-width: 600px) {
  .shot--art { aspect-ratio: var(--ar-phone); }
  .shot--art img { object-position: center; }
  .focus-fig[style*="--ar-phone"] .shot--focus { aspect-ratio: var(--ar-phone); }
  .case--lead .shot--art ~ .pin, .case--lead .annotate-bar { display: none; }   /* pins sit on the full screen, not the phone crop; the notes stay listed */
}
/* media pass: in each decision the crop follows the explanation; the confirm note, evidence and rejected option come after it */
.case--lead .decision--v1 { gap: var(--s-3); }
.case--lead .decision--v1 .d-text { display: contents; }
.case--lead .decision--v1 > .pair { order: 1; margin: var(--s-2) 0 var(--s-3); }
.case--lead .decision--v1 .d-confirm, .case--lead .decision--v1 .d-evidence, .case--lead .decision--v1 .inspect { order: 2; }
.case--lead .decision--v1 .d-text > p:not(.mono):not(.d-confirm) { max-width: 72ch; }
.shot--focus .zoom-hint { top: 10px; bottom: auto; }

/* ---------- cases pass: Favente, Marketing, Automation ---------- */
.pair--stack { grid-template-columns: 1fr; max-width: 860px; }
.pair .focus-fig, .pair .slot-fig { grid-column: 1 / -1; }
.pair--focus .focus-fig + .focus-fig, .pair--focus .focus-fig + .slot-fig { margin-top: var(--s-3); }
.pair > .focus-fig:not(:first-child) { margin-top: var(--s-3); }
/* a labelled video slot with no still: a frame of text, never an empty player */
.slot-fig { max-width: min(100%, 560px); }
.shot--slot {
  aspect-ratio: var(--ar, 16 / 9); max-height: 520px; display: grid; place-content: center; justify-items: center; gap: var(--s-2);
  padding: var(--s-4); text-align: center; border-style: dashed; box-shadow: none;
  background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.02) 0 10px, transparent 10px 20px), var(--g-1);
}
.slot-fig[style*="9 / 16"] { max-width: 220px; }
.slot-k { font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ion); }
.slot-t { font-size: var(--step-0); color: var(--text); max-width: 26ch; }
.slot-s { font-size: var(--step--2); color: var(--text-3); letter-spacing: 0.06em; }
.slot-fig .shot--video { aspect-ratio: var(--ar, 16 / 9); }
/* a lead without a screenshot */
.case-stage--text { gap: var(--s-4); }
.case-stage--text .slot-fig { margin: 0 auto; }
.stage-intro { max-width: 72ch; color: var(--text-2); font-size: var(--step-0); margin: 0; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-3); }
.flow-step { position: relative; display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-2); background: var(--g-2); }
.flow-step:not(:last-child)::after {   /* the arrow to the next step */
  content: ""; position: absolute; top: 50%; right: calc(-1 * var(--s-3) / 2 - 5px); width: 10px; height: 10px;
  border-top: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); transform: translateY(-50%) rotate(45deg);
}
.flow-who { margin: 0; font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ion); }
.flow-step:nth-child(4) .flow-who { color: var(--ember); }   /* the step that is Victor's decision */
.flow-t { margin: 0; font-size: var(--step-0); }
.flow-d { margin: 0; font-size: var(--step--1); color: var(--text-2); }
@media (max-width: 1100px) { .flow { grid-auto-flow: row; grid-template-columns: 1fr; } .flow-step:not(:last-child)::after { top: auto; bottom: calc(-1 * var(--s-3) / 2 - 5px); right: auto; left: var(--s-5); transform: rotate(135deg); } }
.case--lead .case-hero--experiment .form-plate { min-height: 200px; }
@media (max-width: 860px) { .case--lead .case-hero--experiment .form-plate { min-height: 170px; } }
/* touch screens: a compact enlarge mark that doesn't cover the crop (cases pass; Steplight unchanged) */
@media (hover: none) {
  body.case--lead:not([data-case-group="0"]) .zoom-hint { font-size: 0; padding: 5px 7px; line-height: 1; }
  body.case--lead:not([data-case-group="0"]) .zoom-hint::before { content: "⤢"; font-size: 13px; }
}
.pair .slot-fig[style*="16 / 9"] { max-width: 420px; }

/* v1 Dreamy Night, site-wide grade (BACKGROUND ONLY). One fixed layer at z-index -1: above the opaque field canvas, below
   every piece of content, so text, screenshots and controls keep their own colours and sharpness (no filter, no blend).
   Home: the canvas carries the hero (lighting B); this adds a rose-violet wash that fades as the journey starts and a faint
   violet horizon under the orbit (clear of the formations and the list). Cases: a faint glow in the project's own colour
   where the media sits, under a soft violet haze. */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.home::after {
  background:
    radial-gradient(70% 46% at 50% 28%, rgb(200 40 94 / calc(0.07 * (1 - min(1, var(--jp, 0) * 1.6)))), transparent 72%),
    radial-gradient(60% 40% at 18% 12%, rgb(118 40 90 / calc(0.06 * (1 - min(1, var(--jp, 0) * 1.6)))), transparent 70%),
    radial-gradient(90% 30% at 60% 104%, rgb(110 70 200 / calc(0.07 * var(--jp, 0))), transparent 70%); }
body.case { --case-c: 244 246 255; }
body.case[data-case-group="0"] { --case-c: 255 214 140; }   /* Steplight: faint white / gold */
body.case[data-case-group="1"] { --case-c: 224 102 42; }    /* Favente: ember */
body.case[data-case-group="2"] { --case-c: 77 125 255; }    /* Marketing: cobalt */
body.case[data-case-group="3"] { --case-c: 31 178 131; }    /* Automation: jade */
body.case::after {
  background:
    radial-gradient(75% 50% at 50% 72%, rgb(var(--case-c) / 0.16), transparent 74%),
    radial-gradient(70% 40% at 80% 6%, rgb(118 40 140 / 0.08), transparent 70%),
    radial-gradient(50% 36% at 8% 30%, rgb(67 99 138 / 0.06), transparent 72%); }
@media print { body::after { display: none; } }
/* phones: the list sits over the lower sky, so the violet horizon stays off there (it lowered the list's small type line) */
@media (max-width: 860px) {
  .home::after { background:
    radial-gradient(70% 46% at 50% 28%, rgb(200 40 94 / calc(0.07 * (1 - min(1, var(--jp, 0) * 1.6)))), transparent 72%),
    radial-gradient(60% 40% at 18% 12%, rgb(118 40 90 / calc(0.06 * (1 - min(1, var(--jp, 0) * 1.6)))), transparent 70%); }
}
/* the project glow must not lower caption contrast: softer overall, and much fainter on phones, where captions sit in it */
body.case::after {
  background:
    radial-gradient(75% 50% at 50% 66%, rgb(var(--case-c) / 0.11), transparent 74%),
    radial-gradient(70% 40% at 80% 6%, rgb(118 40 140 / 0.08), transparent 70%),
    radial-gradient(50% 36% at 8% 30%, rgb(67 99 138 / 0.06), transparent 72%); }
@media (max-width: 860px) {
  body.case::after { background:
    radial-gradient(90% 40% at 50% 60%, rgb(var(--case-c) / 0.05), transparent 74%),
    radial-gradient(80% 30% at 80% 4%, rgb(118 40 140 / 0.07), transparent 70%); }
}
@media (max-width: 860px) {   /* phones: captions sit across the whole width, so only a faint haze at the very top */
  body.case::after { background: radial-gradient(80% 22% at 80% 0%, rgb(118 40 140 / 0.07), transparent 70%); }
}
/* phone follow-up (Steplight D1): the enlarge badge can sit top-left, over scenery, so it never covers checklist text;
   D1's two images use the card's full width on phones so the rows stay readable */
@media (max-width: 600px) {
  .shot--focus.hint-left .zoom-hint { left: 10px; right: auto; }
  body[data-case-group="0"] .decision--v1:first-child .pair--focus .focus-fig { margin-inline: calc(-1 * var(--s-5) + 6px); max-width: none; }
}

/* Hero (?hero=a | b): one opening composition. The intro and the large galaxy share the first screen; the default hero
   (no parameter, or no JS) is unchanged. The galaxy position per layout is set in remix.js (galaxy()). */
.hero2, .work-question { display: none; }
html[data-hero] .home .hero-copy { display: none; }
html[data-hero] .home .hero { min-height: auto; display: block; text-align: left; padding: clamp(150px, 15vh, 190px) var(--margin) clamp(28px, 5vh, 56px); }
html[data-hero] .hero2 { display: grid; gap: var(--s-5); max-width: var(--max); margin: 0 auto; width: 100%; }
html.js[data-hero] .home .hero2 { opacity: var(--hf, 1); }
.hero2-main { display: grid; gap: var(--s-4); justify-items: start; }
.hero2 > * > *, .hero2-card { text-shadow: 0 0 1px rgb(8 9 12 / 0.95), 0 0 4px rgb(8 9 12 / 0.9), 0 0 12px rgb(8 9 12 / 0.7); }
.hero2-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px; border: 1px solid rgb(125 227 210 / 0.35); border-radius: 999px;
  background: rgb(11 12 14 / 0.62); color: var(--text); font-size: var(--step--1); line-height: 1.2; text-shadow: none; }
.hero2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ion); box-shadow: 0 0 10px rgb(125 227 210 / 0.6); flex: none; }
.hero2-name { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(3rem, 1.9rem + 3.6vw, 5.6rem); line-height: 1.02; letter-spacing: -0.01em; color: var(--text); }
.hero2-sub { margin: 0; max-width: 34ch; font-size: var(--step-1); line-height: 1.35; color: var(--text); }
.hero2-proof { margin: 0; max-width: 56ch; font-size: var(--step-0); line-height: 1.55; color: var(--text-2); }
.hero2-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-2) 0 0; }
.hero2-cta .btn { border-radius: 999px; padding: 0 var(--s-5); text-shadow: none; background: rgb(11 12 14 / 0.55); }
.btn--primary, .hero2-cta .btn--primary { background: var(--ion); color: var(--on-ion); border-color: var(--ion); font-variation-settings: var(--fvs-text-strong); }
.hero2-cta .btn--primary:hover { background: #a3eee1; border-color: #a3eee1; }
.hero2-cta .btn:focus-visible { outline: 2px solid var(--ion); outline-offset: 3px; }
.btn-ic { width: 16px; height: 16px; flex: none; }
.hero2-card { margin: 0; padding: var(--s-5); border: 1px solid var(--line-strong); border-radius: 18px; background: rgb(12 13 18 / 0.72); }
.hero2-eyebrow { margin: 0 0 var(--s-2); font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ion); }
.hero2-card-title { margin: 0 0 var(--s-2); font-size: var(--step-1); line-height: 1.25; font-weight: 400; font-variation-settings: var(--fvs-text-strong); color: var(--text); }
.hero2-card-body { margin: 0; font-size: var(--step--1); line-height: 1.55; color: var(--text-2); }
html[data-hero] .work-question { display: block; margin: 0 0 var(--s-2); font-family: var(--font-serif); font-style: italic; font-size: var(--step-1); line-height: 1.3; color: var(--text-2); max-width: 30ch; }
/* A: a 7/12 intro column and a 4/12 card column; the card sits low, under the galaxy core in the upper right */
@media (min-width: 861px) {
  html[data-hero="a"] .home .hero { padding-top: clamp(190px, 23vh, 270px); }
  html[data-hero="a"] .hero2 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: end; }
  html[data-hero="a"] .hero2-main { grid-column: 1 / span 7; }
  html[data-hero="a"] .hero2-card { grid-column: 9 / span 4; }
  /* B: centred under the core, with a compact horizontal card */
  html[data-hero="b"] .home .hero { padding-top: clamp(220px, 29vh, 330px); }
  html[data-hero="b"] .hero2 { justify-items: center; text-align: center; max-width: 880px; }
  html[data-hero="b"] .hero2-main { justify-items: center; }
  html[data-hero="b"] .hero2-sub { max-width: 40ch; }
  html[data-hero="b"] .hero2-cta { justify-content: center; }
  html[data-hero="b"] .hero2-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--s-5); align-items: center; text-align: left; padding: var(--s-4) var(--s-5); width: 100%; }
  html[data-hero="b"] .hero2-card .hero2-eyebrow, html[data-hero="b"] .hero2-card .hero2-card-title { grid-column: 1; }
  html[data-hero="b"] .hero2-card .hero2-card-body { grid-column: 2; grid-row: 1 / span 2; }
  html[data-hero="b"] .hero2-card-title { margin: 0; font-size: var(--step-0); }
}
/* phones: the intro first (name, role, the primary button in the first screen), the card after */
@media (max-width: 860px) {
  html[data-hero] .home .hero { padding-top: clamp(150px, 26svh, 230px); }
  html[data-hero] .hero2-name { font-size: clamp(2.5rem, 1.6rem + 4vw, 3.2rem); }
  html[data-hero] .hero2-sub { font-size: var(--step-0); }
  html[data-hero] .hero2-proof { font-size: var(--step--1); }
  html[data-hero] .hero2-main { gap: var(--s-3); }
  html[data-hero] .hero2-cta .btn { min-height: 44px; padding: 0 var(--s-4); }
  html[data-hero="b"] .hero2, html[data-hero="b"] .hero2-main { justify-items: center; text-align: center; }
  html[data-hero="b"] .hero2-cta { justify-content: center; }
}
@media (max-width: 400px) and (max-height: 700px) { html[data-hero] .home .hero { padding-top: 132px; } html[data-hero] .hero2-proof { line-height: 1.45; } }

/* ---------- Selected Work: one shared "Open case" button ----------
   Before: the button sat in an auto grid row of a stretched centre item, so the free height of the shared cell was
   spread over its rows and the button grew with shorter titles (58 / 58 / 44 / 51 px at 1440). Now every item is a
   column whose button is pinned to the bottom of the shared cell: one footprint and one position for all four
   projects. The project colour is an accent (border, glow, arrow), never a size change. */
.centre-item { display: flex; flex-direction: column; align-items: center; }
.centre-item > * { flex: none; }
.c-open {
  --btn-w: 9rem; --btn-h: 44px;
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  inline-size: var(--btn-w); block-size: var(--btn-h); min-height: var(--btn-h); padding: 0 1em; margin-top: auto;
  border: 1px solid var(--c); border-radius: 999px; color: var(--text);
  font-size: var(--step--1); line-height: 1; letter-spacing: 0.01em; white-space: nowrap; text-decoration: none;
  /* a little light at rest: a soft top highlight on a dark glassy surface, and a faint glow in the project colour */
  background: linear-gradient(180deg, rgb(255 255 255 / 0.10), rgb(255 255 255 / 0.015) 55%, rgb(255 255 255 / 0) 100%), rgb(10 12 22 / 0.55);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 0 14px -4px color-mix(in srgb, var(--c) 55%, transparent);
  transition: background-color 160ms ease, box-shadow 220ms ease, border-color 160ms ease;
}
.c-open > span[aria-hidden] { display: inline-block; color: var(--c); transition: transform 220ms var(--ease-out, ease); }
.c-open::after {   /* the hover glint: one short pass of light, never looping */
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / 0.20) 48%, rgb(255 255 255 / 0.05) 56%, transparent 68%);
  transform: translateX(-110%); opacity: 0;
}
.c-open:hover { background-color: rgb(18 20 34 / 0.7); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 0 20px -4px color-mix(in srgb, var(--c) 75%, transparent); }
.c-open:hover::after { opacity: 1; transform: translateX(110%); transition: transform 620ms cubic-bezier(0.2, 0.6, 0.2, 1), opacity 120ms linear; }
.c-open:hover > span[aria-hidden] { transform: translateX(2px); }
.c-open:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
@media (max-width: 860px) { .c-open { --btn-w: 8.25rem; padding: 0 0.9em; } }
@media (prefers-reduced-motion: reduce) {
  .c-open, .c-open > span[aria-hidden] { transition: none; }
  .c-open::after, .c-open:hover::after { display: none; }   /* the static highlight stays; no glint */
  .c-open:hover > span[aria-hidden] { transform: none; }
}
/* Open case follows its project's role line at one shared gap. The button was pinned to the bottom
   of the shared cell (sized by Marketing's three-line title), which left up to a 78 px gap under shorter titles. Every
   item's content starts at the same top, so the image and title never move; only the button sits 0-2 title lines higher
   for shorter titles, and items cross-fade on selection, so nothing jumps. Same box, accent, light and focus as before. */
.centre { --open-gap: 14px; }
.c-open { margin-top: calc(var(--open-gap) - 6px); }   /* 6 px is the centre item's own row gap: total = --open-gap */
@media (max-width: 860px) { .centre { --open-gap: 12px; } }

/* Selected Work: the Automation preview is a still of its workflow diagram (inline SVG drawn by render.py from the case's own
   steps): two lanes, Me and Agent, five numbered steps, my decision in ember. Same frame as the screen previews. */
.c-flow { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-2);
  border: 1px solid var(--line-strong); background: linear-gradient(160deg, var(--g-2), var(--g-1)); box-shadow: 0 18px 36px rgb(0 0 0 / 0.6); }
.c-flow svg { display: block; width: 100%; height: 100%; }
.c-flow .cf-lane { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; fill: var(--text-2); text-anchor: middle; }
.c-flow .cf-div { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.c-flow .cf-a path { fill: none; stroke: var(--text-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c-flow .cf-n rect { fill: #1c2026; stroke: var(--ion); stroke-width: 1.6; }
.c-flow .cf-n--ember rect { stroke: var(--ember); }
.c-flow .cf-n text { font-family: var(--font-text); font-size: 18px; font-variation-settings: var(--fvs-text-strong); fill: var(--text); text-anchor: middle; }

/* ---------- Evidence exhibits (review pass): a 9:16 social-video frame with a click-to-load TikTok player, a "Watch on
   TikTok" link and an analytics block that shows only real figures. Empty state: data-evidence="pending" (a designed card,
   same footprint). Driven from data/cases.json ("exhibit") via render.py; v1.js loads the player on Play. */
.ev { margin: 0; width: 100%; max-width: 320px; display: grid; gap: var(--s-3); justify-items: stretch; justify-self: center; }
.ev-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius-2);
  border: 1px solid var(--line-strong); background: linear-gradient(160deg, var(--g-2), var(--g-1)); box-shadow: 0 24px 48px rgb(0 0 0 / 0.55); }
.ev-empty, .ev-card { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-3); padding: var(--s-5); text-align: center; }
.ev-empty::before { content: ""; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); margin-bottom: var(--s-2);
  background: radial-gradient(circle at 50% 50%, rgb(125 227 210 / 0.18), transparent 70%); }
.ev-card-k { font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ion); }
.ev-empty-t { font-family: var(--font-serif); font-style: italic; font-size: var(--step-1); line-height: 1.25; color: var(--text); max-width: 15ch; }
.ev-empty-s, .ev-card-t { font-size: var(--step--1); color: var(--text-2); }
.ev-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; display: block; }
.ev-play:focus-visible { outline: 2px solid var(--ion); outline-offset: -4px; }
.ev-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-play-pill { position: absolute; left: 50%; bottom: var(--s-6); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 44px; padding: 0 var(--s-5); border-radius: 999px; background: var(--ion); color: var(--on-ion); font-size: var(--step--1); white-space: nowrap; }
.ev-play:hover .ev-play-pill { background: #a3eee1; }
.ev-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ev-meta { display: grid; gap: var(--s-1); }
.ev-meta:empty { display: none; }
.ev-cap { font-size: var(--step--1); color: var(--text-2); }
.ev-link { display: inline-flex; align-items: center; gap: 0.35em; min-height: 44px; color: var(--ion); font-size: var(--step--1); text-underline-offset: 3px; }
.ev-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--radius-2); background: rgb(17 19 22 / 0.6); }
.ev-stats--empty { display: grid; place-items: center; min-height: 5.5rem; font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; }
.ev-stat { display: grid; gap: 2px; }
.ev-stat dt { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; }
.ev-stat dd { margin: 0; font-size: var(--step-1); font-variation-settings: var(--fvs-text-strong); }
.ev-stat .ev-src { font-size: var(--step--2); font-variation-settings: normal; }
.ev-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--s-6); align-items: start; }
@media (max-width: 860px) { .ev-row { grid-template-columns: 1fr; } .ev { max-width: 300px; justify-self: start; } }
.ev-stats--empty { grid-template-columns: 1fr; text-align: center; }
.decision--v1.decision--ev { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
@media (max-width: 860px) { .decision--v1.decision--ev { grid-template-columns: 1fr; } }
.case--lead .decision--v1.decision--ev .d-text { display: grid; gap: var(--s-3); align-content: start; }
.case--lead .decision--v1.decision--ev .d-evidence { order: 0; }

/* review pass: once playing, TikTok's embed player shows the video with its caption below, so the frame grows to fit it */
.ev[data-evidence="playing"] .ev-frame { aspect-ratio: 325 / 740; }
/* the Marketing loop preview (same frame as the Automation flow still) */
.c-loop .cf-lane { letter-spacing: 0.14em; }
.c-loop .cf-note { font-family: var(--font-mono); font-size: 11px; fill: var(--text-2); text-anchor: middle; letter-spacing: 0.04em; }

/* review pass (edits 3): every Experience entry uses one layout: role on the left, dates pinned top-right; on phones the
   dates sit under the role for all entries alike */
.xp-line1 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-4); row-gap: var(--s-1); }
.xp-line1 .xp-dates { justify-self: end; text-align: right; }
@media (max-width: 600px) { .xp-line1 { grid-template-columns: 1fr; } .xp-line1 .xp-dates { justify-self: start; text-align: left; } }
/* case headers: the constellation fills the right column beside the title block (about 1.8x the previous size) */
@media (min-width: 861px) {
  .case-hero .form-plate, .case--lead .case-hero--lead .form-plate, .case--lead .case-hero--experiment .form-plate { min-height: 340px; align-self: stretch; }
}
@media (max-width: 860px) {
  .case-hero .form-plate, .case--lead .case-hero--experiment .form-plate { min-height: 210px; }
}
.crumbs a { text-decoration: none; }
.crumbs a > span[aria-hidden] { margin-right: 0.45em; }
/* Selected Work without the number and formation columns: the name takes the full row, the summary aligns under it */
.olink { grid-template-columns: minmax(0, 1fr); }
.osum { padding-left: 16px; }
/* Selected Work: the Pause motion control is a small, quiet button at the right end of the heading row */
.work-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.work-head .section-title { margin: 0; }
.motion-toggle--quiet { flex: none; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 8px; margin-right: -8px; border-radius: 4px; border-bottom: 0;
  font-size: var(--step--2); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-3); }
.motion-toggle--quiet:hover { color: var(--text); background: rgb(255 255 255 / 0.04); }
.motion-toggle--quiet:focus-visible { outline: 2px solid var(--obs-2); outline-offset: 0; color: var(--text); }
.mt-ico { width: 11px; height: 11px; fill: currentColor; }
.mt-play { display: none; }
.motion-toggle--quiet[aria-pressed="true"] .mt-pause { display: none; }
.motion-toggle--quiet[aria-pressed="true"] .mt-play { display: inline; }
@media (max-width: 860px) { .orbit-nav > .work-head { order: 0; } }

/* ---------- Marketing evidence pass: two stories (audience, what I did, what happened) with the TikTok numbers.
   Account totals and per-post stats are separate, each labelled with its account or post and its date range. */
.case-stage--intro .stage-intro { max-width: 72ch; }
.story-links { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.story-link { display: grid; gap: var(--s-1); min-height: 44px; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-2); background: var(--g-2); color: var(--text); text-decoration: none; }
.story-link:hover { border-color: var(--line-strong); }
.story-link:focus-visible { outline: 2px solid var(--ion); outline-offset: 2px; }
.story-link-k { font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ion); }
.story-link-t { font-size: var(--step-0); }
.block--story { scroll-margin-top: 80px; }
.block--story:focus { outline: none; }
.block--story .block-body { display: grid; gap: var(--s-5); }
.story-facts { margin: 0; font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--s-6); align-items: start; }
.story-text, .story-results { display: grid; gap: var(--s-3); align-content: start; }
.story-text > p, .story-results > p { margin: 0; max-width: 68ch; }
.story-text h3, .story-results h3 { margin: var(--s-2) 0 0; font-size: var(--step-0); font-variation-settings: var(--fvs-text-strong); color: var(--text); }
.story-text h3:first-child, .story-results h3:first-child { margin-top: 0; }
.story-ev { display: grid; gap: var(--s-3); justify-items: stretch; }
.story-ev .ev { justify-self: stretch; }
.ev-linked { display: grid; gap: var(--s-1); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-2); background: rgb(17 19 22 / 0.6); }
.ev-linked p { margin: 0; }
.ev-linked-k { font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ion); }
.ev-linked-t { font-size: var(--step-0); color: var(--text); }
.ev-linked-d { font-size: var(--step--1); color: var(--text-2); }
.ev-then { margin: 0; text-align: center; font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.fmt { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.fmt li { position: relative; display: grid; gap: var(--s-1); align-content: start; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-2); background: var(--g-2); }
.fmt li:not(:last-child)::after { content: "→"; position: absolute; right: calc(-1 * var(--s-3) / 2 - 0.4em); top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: var(--step--1); }
.fmt-k { font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ion); }
.fmt li:last-child .fmt-k { color: var(--ember); }
.fmt-t { font-size: var(--step--1); color: var(--text); }
.totals, .posts { margin: 0; display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-2); background: rgb(17 19 22 / 0.6); }
.totals figcaption { display: grid; gap: 2px; }
.tot-label { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.tot-acct { font-size: var(--step--1); color: var(--text); }
.tot-grid { margin: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); align-items: end; }
.tot { display: grid; gap: 2px; }
.tot dt { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; }
.tot dd { margin: 0; font-size: var(--step-1); font-variation-settings: var(--fvs-text-strong); font-variant-numeric: tabular-nums; }
.tot--lead dd { font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--step-3); line-height: 1; color: var(--text); }
.posts-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--step--1); }
.posts-table th, .posts-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: baseline; }
.posts-table tbody tr:last-child th, .posts-table tbody tr:last-child td { border-bottom: 0; }
.posts-table th[scope="row"] { text-align: left; font-weight: 400; color: var(--text-2); width: 40%; }
.posts-table thead th { font-family: var(--font-mono); font-variation-settings: var(--fvs-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ion); font-weight: 400; }
.posts-table td { font-variant-numeric: tabular-nums; color: var(--text); }
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-ev { max-width: 320px; }
  .tot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tot--lead { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .story-links, .fmt { grid-template-columns: 1fr; }
  .fmt li:not(:last-child)::after { content: "↓"; right: auto; left: var(--s-4); top: auto; bottom: calc(-1 * var(--s-3) / 2 - 0.65em); transform: none; }
  .posts-table th, .posts-table td { padding: 7px 4px; }
}
/* Marketing audit fixes: "What happened" sits under the text in the left column (the evidence column spans both rows, so
   the tall player no longer leaves a gap); clear block headings; a note under each player; the two-story home preview */
.story-grid { grid-template-areas: "text ev" "res ev"; grid-template-rows: auto 1fr; row-gap: var(--s-5); }
.story-text { grid-area: text; } .story-ev { grid-area: ev; } .story-results { grid-area: res; }
.tot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tot--lead { grid-column: 1 / -1; }
.totals figcaption, .posts figcaption { display: grid; gap: 2px; }
.tot-h { font-size: var(--step-0); font-variation-settings: var(--fvs-text-strong); color: var(--text); }
.ev-note { margin: 0; font-size: var(--step--2); line-height: 1.45; color: var(--text-2); }
.c-stories .cf-n--sm text { font-size: 12.5px; }
@media (max-width: 1100px) { .tot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .story-grid { grid-template-areas: "text" "ev" "res"; grid-template-rows: auto; } }
.c-stories .cf-n--xs text { font-size: 10.5px; }
/* the two-story preview on phones: real text (11.5 px) instead of the drawing, same order and colours */
.c-stories .cs-ph { display: none; }
@media (max-width: 860px) {
  .c-flow.c-stories { aspect-ratio: auto; min-height: 0; }
  .c-stories .cs-svg { display: none; }
  .c-stories .cs-ph { display: grid; gap: 7px; padding: 9px 10px 10px; }
  .cs-row { display: grid; gap: 2px; }
  .cs-row + .cs-row { padding-top: 7px; border-top: 1px dashed var(--line-strong); }
  .cs-lane { font-size: 10px; letter-spacing: 0.14em; color: var(--text-2); }
  .cs-steps { font-size: 11.5px; line-height: 1.32; font-variation-settings: var(--fvs-text-strong); color: var(--text); }
  .cs-step { color: var(--ion); }
  .cs-step.cs-end { color: var(--ember); }
  .cs-arr { color: var(--text-2); }
}
@media (max-width: 860px) { .cs-step { white-space: nowrap; } }
@media (max-width: 860px) {   /* compact: keeps the selected preview short enough for the formations to stay inside the stage */
  .c-stories .cs-ph { gap: 5px; padding: 7px 9px 8px; }
  .cs-row + .cs-row { padding-top: 5px; }
  .cs-lane { font-size: 9.5px; line-height: 1.2; }
  .cs-steps { font-size: 11px; line-height: 1.25; }
}
/* Marketing opening (first-person review): one intro with more width, the two story cards in the first screen,
   the constellation balanced in the right column */
@media (min-width: 861px) { .case-marketing .case-head { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-6); } }
.case-marketing .case-sum { max-width: 64ch; }
.case-marketing .case-hero--experiment .case-question { max-width: 26ch; }
.story-links--hero { margin: var(--s-2) 0 0; gap: var(--s-3); }
.story-links--hero .story-link { padding: var(--s-3) var(--s-4); }
.case-marketing .case-hero--lead .form-plate { min-height: 300px; }
@media (max-width: 860px) {
  .story-links--hero { grid-template-columns: 1fr; gap: var(--s-2); }
  .story-links--hero .story-link { min-height: 56px; align-content: center; }
  .case-marketing .case-hero--lead .form-plate { min-height: 180px; }
}
/* Marketing on phones (review): normal section spacing and the two story cards in the first screen.
   Spacing only; no text gets smaller. */
@media (max-width: 860px) {
  .case-marketing .case-hero { padding-top: var(--s-3); padding-bottom: var(--s-2); gap: var(--s-2); }
  .case-marketing .case-head { gap: var(--s-3); }
  .case-marketing .case-head-text { gap: var(--s-2); }
  .case-marketing .crumbs a { margin-block: -8px; }   /* the 44 px tap target stays; it just overlaps the padding */
  .case-marketing .case-sum { line-height: 1.5; }
  .case-marketing .case-hero .tags { gap: var(--s-1) var(--s-2); }
  .case-marketing .case-hero .tags, .case-marketing .case-hero .tags * { letter-spacing: 0.02em; }
  .case-marketing .story-links--hero { margin-top: var(--s-1); gap: 6px; }
  .case-marketing .story-links--hero .story-link { padding: 9px 14px; min-height: 52px; gap: 2px; }
  .case-marketing .case-hero--lead .form-plate { min-height: 120px; }
  .case-marketing .case-facts { margin-top: var(--s-3); }
  .case-marketing .case-body { margin-top: var(--s-5); gap: var(--s-6); }
}
/* Marketing on phones (≤600 px), measured targets: ~28 px card -> stars, ~28 px stars -> ROLE, ONE rule between the facts
   and the first story (~44 px), the band from the cards to the story ~400-430 px. Desktop unchanged. */
@media (max-width: 600px) {
  .case-marketing .case-head { gap: var(--s-3); }
  .case-marketing .case-hero { padding-bottom: 0; }
  .case-marketing .case-hero--lead .form-plate { min-height: 114px; }
  .case-marketing .case-facts { margin-top: 0; }
  .case-marketing .case-facts .facts-strip { padding: var(--s-3) 0 0; border-bottom: 0; gap: var(--s-3); }
  .case-marketing .case-body { margin-top: 16px; }
}