/* Portfolio remix: "Graphite Field". Tokens from presets/portfolio-4b/tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--g-0); color: var(--text);
  font-family: var(--font-text); font-variation-settings: var(--fvs-text); font-size: var(--step-0); line-height: var(--leading-text);
}
h1, h2, h3, p, ol, ul, dl, figure { margin: 0; }
ol, ul { list-style: none; padding: 0; }
a { color: inherit; }
svg { display: block; }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); border-radius: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:not(.js) [data-requires-js] { display: none !important; }
.skip { position: absolute; left: var(--margin); top: -80px; z-index: 100; background: var(--ion); color: var(--on-ion); padding: var(--s-3) var(--s-4); text-decoration: none; }
.skip:focus { top: var(--s-3); }
.mono { font-family: var(--font-mono); font-variation-settings: var(--fvs-mono); font-size: var(--step--2); letter-spacing: var(--tracking-mono); text-transform: uppercase; line-height: 1.5; }
.dim { color: var(--text-3); }
.placeholder { font-family: var(--font-mono); font-variation-settings: var(--fvs-mono); font-size: 0.86em; color: var(--text-3); letter-spacing: 0.01em; }
kbd { font-family: var(--font-mono); border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 0.3em; }

/* ---------- Buttons, pills, chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--target); padding: 0 var(--s-5);
  border: 1px solid var(--line-strong); border-radius: var(--radius-1); background: transparent; color: var(--text);
  font: inherit; font-size: var(--step--1); font-variation-settings: var(--fvs-text-strong); text-decoration: none; cursor: pointer;
  transition: border-color var(--d-2) var(--ease-out), background var(--d-2) var(--ease-out), color var(--d-2);
}
.btn:hover { border-color: var(--ion); }

.btn[aria-pressed="true"] { background: var(--ion); color: var(--on-ion); border-color: var(--ion); }
.draft-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ember); font-family: var(--font-mono); font-variation-settings: var(--fvs-mono); font-size: var(--step--2); letter-spacing: var(--tracking-mono); text-transform: uppercase; white-space: nowrap; }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s-6);
  min-height: 64px; padding: 0 var(--margin);
  background: rgb(11 12 14 / 0.78); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.wordmark { font-family: var(--font-display); font-variation-settings: var(--fvs-display-strong); font-size: var(--step-1); letter-spacing: -0.01em; text-decoration: none; min-height: var(--target); display: inline-flex; align-items: center; }
.site-nav { display: flex; gap: var(--s-1); margin-left: auto; }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--s-3); color: var(--text-2); text-decoration: none; font-size: var(--step--1); border-radius: var(--radius-1); }
.site-nav a:hover { color: var(--text); background: var(--g-2); }
.site-nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--ion); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; min-height: min(92vh, 880px); display: grid; align-items: end; padding: var(--s-8) var(--margin) var(--s-8); overflow: hidden; border-bottom: 1px solid var(--line); }

.hero-copy { max-width: 46rem; display: grid; gap: var(--s-5); }
.kicker { color: var(--ion); }
.hero-title { font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.018em; max-width: 17ch; text-wrap: balance; }
.hero-lede { color: var(--text-2); font-size: var(--step-1); line-height: 1.5; max-width: 50ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- Sections ---------- */
.work, .approach, .about { padding: var(--s-8) var(--margin) 0; max-width: calc(var(--max) + 2 * var(--margin)); margin: 0 auto; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); margin-bottom: var(--s-6); }
.section-title { font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--step-3); line-height: 1.05; letter-spacing: -0.012em; }

/* ---------- Work: list + lit stage ---------- */

.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-left: calc(2.6rem + var(--s-3)); }
.case .tags { padding-left: 0; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-variation-settings: var(--fvs-mono); font-size: var(--step--2); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-2); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tc, var(--ion)); }
.tag[data-d="0"] { --tc: var(--data-1); } .tag[data-d="1"] { --tc: var(--data-2); } .tag[data-d="2"] { --tc: var(--data-3); } .tag[data-d="3"] { --tc: var(--data-4); } .tag[data-d="4"] { --tc: var(--data-5); }

.stage { position: sticky; top: 92px; aspect-ratio: 16 / 11; border-radius: var(--radius-2); background: var(--g-1); border: 1px solid var(--line); overflow: hidden; perspective: 1400px; }

.mock { width: 100%; height: auto; }
.stage-mock { filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.65)) drop-shadow(0 0 30px rgb(125 227 210 / 0.08)); }
.layer-front { filter: drop-shadow(-10px 16px 24px rgb(0 0 0 / 0.55)); }
.svg-t { font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: 18px; fill: var(--text); }
.svg-m { font-family: var(--font-mono); font-variation-settings: var(--fvs-mono); font-size: 10px; letter-spacing: 0.06em; fill: var(--text-3); }

 html:not(.js) polyline.draw, .lit-frame polyline.draw { stroke-dashoffset: 0; }

/* ---------- Approach ---------- */
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gutter); counter-reset: s; }
.steps li { position: relative; padding-top: var(--s-5); border-top: 1px solid var(--line-strong); display: grid; gap: var(--s-2); align-content: start; }
.steps li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ion); box-shadow: 0 0 10px var(--ion); }
.steps .mono { color: var(--text-3); }
.steps h3 { font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--step-1); }
.steps p { color: var(--text-2); font-size: var(--step--1); }

/* ---------- About & media slots ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
.media-slot { display: grid; gap: var(--s-2); }
.slot-frame {
  aspect-ratio: 16 / 10; border: 1px dashed var(--line-strong); border-radius: var(--radius-2);
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgb(255 255 255 / 0.025) 14px 15px), var(--g-1);
}

.lede { font-size: var(--step-1); line-height: 1.5; max-width: 52ch; color: var(--text); }

/* ---------- Footer ---------- */
.site-foot { margin-top: var(--s-9); padding: var(--s-7) var(--margin) var(--s-6); border-top: 1px solid var(--line); display: grid; gap: var(--s-3); }
.foot-line a { font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--step-3); text-decoration: none; display: inline-flex; min-height: var(--target); align-items: center; background: linear-gradient(var(--ion), var(--ion)) left 92% / 0 1px no-repeat; transition: background-size var(--d-3) var(--ease-out); }
.foot-line a:hover, .foot-line a:focus-visible { background-size: 100% 1px; }

/* ---------- Case study ---------- */
.case-hero { padding: var(--s-7) var(--margin) var(--s-6); max-width: calc(var(--max) + 2 * var(--margin)); margin: 0 auto; display: grid; gap: var(--s-4); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--target); min-width: var(--target); color: var(--ion); }
.case-title { font-family: var(--font-display); font-variation-settings: var(--fvs-display-strong); font-size: var(--step-5); line-height: 0.98; letter-spacing: -0.025em; }
.case-type { color: var(--text-2); font-size: var(--step-1); }
.case-sum { font-size: var(--step-1); max-width: 52ch; }
.case-stage { max-width: calc(var(--max) + 2 * var(--margin)); margin: 0 auto; padding: 0 var(--margin); display: grid; gap: var(--s-4); }
.annotate-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.lit-stage { position: relative; border-radius: var(--radius-2); border: 1px solid var(--line); background: var(--stage-light), radial-gradient(70% 40% at 50% 110%, rgb(125 227 210 / 0.07), transparent 70%), var(--g-1); padding: clamp(1rem, 4vw, 3.5rem) clamp(1rem, 8vw, 7rem) var(--s-6); perspective: 1400px; display: grid; gap: var(--s-4); }
.lit-frame { position: relative; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--d-3) var(--ease-out); }
.lit-stage figcaption { text-align: center; }
.pin {
  position: absolute; transform: translate(-50%, -50%) scale(0.6); width: var(--target); height: var(--target); border-radius: 50%;
  display: grid; place-items: center; background: var(--ion); color: var(--on-ion); text-decoration: none;
  font-family: var(--font-mono); font-variation-settings: "wdth" 87.5, "wght" 700; font-size: var(--step--1);
  box-shadow: 0 0 0 6px rgb(125 227 210 / 0.18), 0 0 24px rgb(125 227 210 / 0.45);
  visibility: hidden; opacity: 0; transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out), visibility 0s linear var(--d-2);
}
.lit-frame.is-annotating .pin { visibility: visible; opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: 0s; }
.pin.is-lit { outline: 2px solid var(--ember); outline-offset: 3px; }
.ann-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.ann-notes li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-1); color: var(--text-2); font-size: var(--step--1); }
.ann-notes li.is-lit, .ann-notes li:target { border-color: var(--ion); color: var(--text); }
.note-n { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--ion); color: var(--on-ion); font-family: var(--font-mono); font-size: var(--step--2); }
.case-body { max-width: calc(var(--max) + 2 * var(--margin)); margin: 0 auto; padding: 0 var(--margin); display: grid; gap: var(--s-8); margin-top: var(--s-8); }
.block { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gutter); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.block-label { color: var(--ion); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; align-self: start; }
.block > :not(.block-label) { grid-column: 2; }
.decisions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.decision { background: var(--g-2); border: 1px solid var(--line); border-radius: var(--radius-2); padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; box-shadow: var(--shadow-1); }
.decision h3 { font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--step-1); line-height: 1.2; }
.decision > p:not(.mono) { color: var(--text-2); font-size: var(--step--1); }
.inspect summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); cursor: pointer; color: var(--ion); list-style: none; }
.inspect summary::-webkit-details-marker { display: none; }
.inspect summary::before { content: "+"; font-family: var(--font-mono); }
.inspect[open] summary::before { content: "−"; }
.inspect p { border-left: 2px solid var(--ember); padding-left: var(--s-3); color: var(--text-2); font-size: var(--step--1); }
.media-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.result { border-top: 2px solid var(--ember); padding-top: var(--s-3); }
.result dd { margin: var(--s-2) 0 0; font-size: var(--step-1); }
.pager { max-width: calc(var(--max) + 2 * var(--margin)); margin: var(--s-8) auto 0; padding: 0 var(--margin); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.pager a { display: grid; gap: var(--s-1); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-2); text-decoration: none; font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--step-2); transition: border-color var(--d-2), background var(--d-2); }
.pager a + a { text-align: right; }
.pager a:hover { border-color: var(--ion); background: var(--g-1); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-6); }
  .decisions, .media-slots, .results, .ann-notes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .site-head { flex-wrap: wrap; gap: 0 var(--s-4); padding-top: var(--s-2); }
  .site-nav { order: 3; width: 100%; margin-left: calc(var(--s-3) * -1); overflow-x: auto; }
  .draft-pill { margin-left: auto; }
  .hero { min-height: auto; padding-top: 0; align-items: start; }
  
  
  .stage { display: none; }
  
  
  .about-grid, .block { grid-template-columns: 1fr; }
  .block > :not(.block-label) { grid-column: 1; }
  .decisions, .media-slots, .results, .ann-notes, .pager { grid-template-columns: 1fr; }
  .pager a + a { text-align: left; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; }  .tags { padding-left: 0; } }

/* =====================================================================
 * Phase 4C overrides: one fixed field behind the page, smaller intro, integrated filter,
 * transparent lit stage (clusters visible around the media), modular case variants.
 * ===================================================================== */
html { background: var(--g-0); }
body { background: transparent; }
@view-transition { navigation: auto; }
.field-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; view-transition-name: field;
  background: radial-gradient(34% 40% at 72% 42%, rgb(125 227 210 / 0.12), transparent 70%), radial-gradient(26% 30% at 80% 64%, rgb(169 155 255 / 0.09), transparent 70%); }
.field-layer canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--d-4) var(--ease-out); }
.field-layer.is-live { background: none; }
.field-layer.is-live canvas { opacity: 1; }
/* scrim: keeps the reading column clear of particles (contrast protection) */
.field-layer::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--g-0) 0%, rgb(11 12 14 / 0.92) 30%, rgb(11 12 14 / 0.55) 46%, transparent 62%); }
.case .field-layer::after { background: linear-gradient(180deg, transparent 0%, rgb(11 12 14 / 0.4) 40%, rgb(11 12 14 / 0.85) 100%); }
/* A/B: simple = 4B hero-only field */

/* ---------- smaller, balanced intro (copy unchanged) ---------- */
.hero { min-height: min(78vh, 760px); padding: var(--s-8) var(--margin) var(--s-7); align-items: center; border-bottom: 0; background: none; overflow: visible; }
.hero-copy { max-width: 38rem; gap: var(--s-4); }
.hero-title { font-size: clamp(2rem, 1.25rem + 2.3vw, 3.4rem); line-height: 1.06; letter-spacing: -0.015em; max-width: 19ch; text-wrap: balance; }
.hero-lede { font-size: var(--step-0); max-width: 46ch; text-wrap: pretty; }

/* ---------- work: header with quiet filter disclosure ---------- */
.work { padding-top: var(--s-7); outline: none; }

.filter { position: relative; }
.filter summary { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--target); padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; list-style: none; color: var(--text-2); font-size: var(--step--1); background: rgb(17 19 22 / 0.7); }
.filter summary::-webkit-details-marker { display: none; }
.filter summary::after { content: "▾"; font-size: 0.8em; color: var(--text-3); }
.filter[open] summary { border-color: var(--ion); color: var(--text); }

/* discipline labels on rows double as filters */

/* ---------- stage: transparent so the project clusters glow around the media ---------- */
.stage { background: transparent; border-color: transparent; overflow: visible; }

/* ---------- sections after the work sit on solid graphite ---------- */
.approach { position: relative; }
.about-teaser { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-7); }
.text-link { display: inline-flex; align-items: center; min-height: var(--target); color: var(--ion); text-decoration: none; border-bottom: 1px solid transparent; }
.text-link:hover { border-bottom-color: var(--ion); }
.site-foot a { color: var(--text-2); }

/* ---------- case template ---------- */
.facts-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: var(--s-3); }
.facts-strip dd { margin: var(--s-1) 0 0; font-size: var(--step--1); }
.case-hero--product .case-title { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5rem); }
.case-hero--experiment .case-question { font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1.08; max-width: 24ch; text-wrap: balance; }
.exp-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: center; margin-top: var(--s-4); }
.exp-grid .facts-strip { grid-template-columns: 1fr 1fr; border: 0; }
.exp-visual { border-radius: var(--radius-2); padding: var(--s-4); background: var(--stage-light), rgb(17 19 22 / 0.8); border: 1px solid var(--line); }
.case--experiment .block--approach .block-body { display: grid; gap: var(--s-5); }
.steps-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); counter-reset: s; }
.steps-strip li { border-top: 2px solid var(--ion); padding-top: var(--s-3); display: grid; gap: var(--s-1); color: var(--text-2); font-size: var(--step--1); }
.steps-strip .mono { color: var(--ion); }
.built { display: grid; gap: var(--s-2); }
.built li { padding-left: var(--s-4); border-left: 2px solid var(--line-strong); }
.challenges { display: grid; gap: var(--s-4); }
.challenges h3 { font-family: var(--font-display); font-variation-settings: var(--fvs-display); font-size: var(--step-1); }
.verify { color: var(--ember); margin-top: var(--s-2) !important; font-size: var(--step--2); }
.result[data-verification="verified"] .verify { color: var(--ion); }
.lit-stage { background: radial-gradient(70% 60% at 50% 48%, rgb(11 12 14 / 0.75), rgb(11 12 14 / 0.35) 70%, transparent), transparent; }

@media (max-width: 860px) {
  .field-layer::after { background: linear-gradient(180deg, transparent 0%, transparent 22vh, rgb(11 12 14 / 0.86) 46vh, rgb(11 12 14 / 0.9) 100%); }
  .hero { min-height: auto; padding: 26vh var(--margin) var(--s-6); }
  
  .hero-title { font-size: clamp(1.75rem, 1.3rem + 2.4vw, 2.3rem); }
  
  .facts-strip, .exp-grid, .steps-strip { grid-template-columns: 1fr; }
  .exp-grid .facts-strip { grid-template-columns: 1fr 1fr; }
}
/* contrast fix (measured): the hint sits on the project-cluster ring, so it gets an opaque backing */

/* =====================================================================
 * Observatory Field overrides (DRAFT): larger field, grounding, constellation labels,
 * interface discipline (eyebrows, selected states, ticked panels), 44px targets.
 * ===================================================================== */
.field-layer { 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%); }
/* narrower scrim: the reading column stays protected, the field owns ~70% of the width */
.field-layer::after { background: radial-gradient(44% 58% at 14% 52%, rgb(11 12 14 / 0.9) 0%, rgb(11 12 14 / 0.72) 48%, transparent 100%), linear-gradient(90deg, rgb(11 12 14 / 0.6) 0%, transparent 30%); }

/* grounding: faint horizon + low-contrast contours, drifting slightly with journey progress */

/* constellation labels (decorative; aria-hidden; real navigation is the list) */

/* section eyebrows: [ 01 ] Selected work */
.eyebrow { color: var(--obs-2); letter-spacing: 0.14em; flex-basis: 100%; }
.block-label .eyebrow { flex-basis: auto; margin-left: var(--s-2); color: var(--text-3); font-size: 0.92em; }

/* selected-state readout: structured panel with geometric corner ticks */

.stage { border-color: rgb(127 230 200 / 0.12); }
.stage::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 6px; pointer-events: none;
  border: solid rgb(156 235 255 / 0.25); border-width: 0 1px 1px 1px; }

/* strong selected row */

/* 44px targets (4C had 32px row labels) */

.tag[data-d="0"] { --tc: var(--obs-1); } .tag[data-d="1"] { --tc: var(--obs-2); } .tag[data-d="2"] { --tc: var(--obs-3); } .tag[data-d="3"] { --tc: var(--obs-4); } .tag[data-d="4"] { --tc: var(--obs-5); }

/* keep a soft luminous body under the live points: one coherent bright region (painted once, composited) */
.home .field-layer::before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; pointer-events: none; opacity: clamp(0, calc(1 - var(--jp, 0) * 1.6), 1);
  background: radial-gradient(34% 38% at 62% 47%, rgb(127 230 200 / 0.10), transparent 70%), radial-gradient(22% 26% at 72% 56%, rgb(157 184 255 / 0.07), transparent 70%); }

/* restrained labels: index only until selected; the selected formation carries its full name */

@media (max-width: 860px) {
  .home .field-layer::before { background: radial-gradient(60% 26% at 50% 20%, rgb(127 230 200 / 0.10), transparent 70%); }
}
/* footer text links: 44px tall hit area without changing the line */
.site-foot p a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }

/* =====================================================================
 * Observatory MENU (obs2, DRAFT): centred light hero over an inclined galaxy with one luminous core,
 * orbital constellation navigation with a centre display, explicit list as the reliable layer,
 * framed case formation. Old overlay pieces (floating labels, readout panel, filter pill) are gone.
 * ===================================================================== */
/* hero scrim: a soft pool under the centred copy, gone once the stars have converged */
.home .field-layer::after { background: radial-gradient(52% 30% at 50% 88%, rgb(11 12 14 / 0.82), rgb(11 12 14 / 0.45) 55%, transparent 100%);
  opacity: clamp(0, calc(1 - var(--jp, 0) * 1.6), 1); }
/* the central anchor: one luminous, cool-white core, painted once and composited */
.home .field-layer::before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(circle at var(--core-x, 50%) var(--core-y, 40%), var(--core-glow) 0, rgb(160 235 225 / 0.09) calc(var(--core-r, 600px) * 0.1), transparent calc(var(--core-r, 600px) * 0.42));
  opacity: clamp(0, calc(1 - var(--jp, 0) * 1.25), 1); }

.home .hero { min-height: calc(100vh - 64px); display: grid; align-items: end; justify-items: center; text-align: center;
  padding: 0 var(--margin) clamp(36px, 7vh, 88px); }
.home .hero-copy { max-width: 40rem; display: grid; gap: var(--s-3); justify-items: center; }
.home .kicker { color: var(--obs-1); }
.home .hero-title { font-family: var(--font-display); font-variation-settings: var(--fvs-hero); font-size: var(--hero-size); line-height: 1.2; letter-spacing: -0.008em; max-width: 26ch; text-wrap: balance; color: var(--text); }
.home .hero-lede { font-size: var(--step-0); color: var(--text-2); max-width: 44ch; }
.hero-link { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); padding: 0 var(--s-2); color: var(--obs-2); text-decoration: none;
  font-family: var(--font-mono); font-variation-settings: var(--fvs-mono); font-size: var(--step--1); letter-spacing: var(--tracking-mono); text-transform: uppercase; border-bottom: 1px solid rgb(156 235 255 / 0.35); }
.hero-link:hover { border-bottom-color: var(--obs-2); color: var(--text); }

/* ---------- work: explicit list + orbital stage ---------- */
.home .work { padding: var(--s-7) var(--margin) var(--s-6); }
.orbit-grid { display: grid; grid-template-columns: minmax(17rem, 4fr) minmax(0, 8fr); gap: var(--s-6); align-items: center; }
.orbit-nav { display: grid; gap: var(--s-3); align-content: center; }
.orbit-nav .section-title { font-variation-settings: var(--fvs-hero); font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem); }
.orbit-help { margin-bottom: var(--s-2); }
.olist { display: grid; border-top: 1px solid var(--line); }
.oitem { position: relative; border-bottom: 1px solid var(--line); transition: background var(--d-2) var(--ease-out); }
.oitem::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--c); transform: scaleY(0); transform-origin: center; transition: transform var(--d-2) var(--ease-out); box-shadow: 0 0 10px var(--c); }
.oitem.is-selected { background: linear-gradient(90deg, rgb(255 255 255 / 0.035), transparent 80%); }
.oitem.is-selected::before { transform: scaleY(1); }
.olink { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-2); min-height: 52px; padding: 6px 12px 0 16px; text-decoration: none; color: inherit; }
.olink:focus-visible { outline: 2px solid var(--obs-2); outline-offset: -2px; border-radius: 2px; }
.oidx { color: var(--text-3); }
.oname { font-family: var(--font-display); font-variation-settings: var(--fvs-list); font-size: var(--step-1); color: var(--text-2); transition: color var(--d-2); }
.oform { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); }
.oform i, .c-form i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.osum { font-size: var(--step--1); color: var(--text-3); padding: 0 12px 10px calc(2.3rem + 16px + var(--s-2)); }
.oitem.is-selected .oname, .olink:hover .oname { color: var(--text); }
.oitem.is-selected .oidx { color: var(--c); }
.orbit-note { margin-top: var(--s-2); }

.orbit-stage { position: relative; height: clamp(520px, calc(100vh - 64px - 40px), var(--orbit-stage-max)); touch-action: pan-y; }

.orbit-hits { position: absolute; inset: 0; }
.orbit-hit { position: absolute; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.orbit-hit:not(.is-selected):hover { box-shadow: inset 0 0 0 1px rgb(156 235 255 / 0.18); }
.orbit-hit.is-selected { cursor: alias; }
.centre { position: absolute; left: 50%; top: 50%; width: var(--centre-w); transform: translate(-50%, -50%); display: grid; }
.centre::before { content: ""; position: absolute; left: 50%; top: 42%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(11 12 14 / 0.86) 0 34%, rgb(127 230 200 / 0.05) 52%, transparent 70%); }
.centre-item { grid-area: 1 / 1; position: relative; display: grid; gap: 6px; justify-items: center; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); }
.centre-item.is-shown { opacity: 1; transform: none; }
.c-preview { width: 100%; margin: 0 0 4px; }
.c-mock { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 26px rgb(0 0 0 / 0.6)); }
.c-form { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.c-name { font-family: var(--font-display); font-variation-settings: var(--fvs-list); font-size: var(--step-2); line-height: 1.1; }
.c-sum { display: none; }
.c-tags { display: grid; gap: 2px; justify-items: center; color: var(--text-3); font-size: 0.68rem; }
.c-open { display: inline-flex; align-items: center; gap: 6px; min-height: var(--target); padding: 0 14px; border: 1px solid var(--c); border-radius: 999px; color: var(--text); text-decoration: none; font-size: var(--step--1); }
.c-open:hover { background: rgb(255 255 255 / 0.05); }
.c-open:focus-visible { outline: 2px solid var(--obs-2); outline-offset: 2px; }

/* ---------- case: the formation sits inside a framed plate beside the title ---------- */
.case-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); align-items: stretch; }
.case-head-text { display: grid; gap: var(--s-4); align-content: start; }
.form-plate { position: relative; margin: 0; min-height: 300px; border: 1px solid rgb(156 235 255 / 0.13); border-radius: var(--radius-2);
  background: radial-gradient(70% 60% at 50% 44%, rgb(127 230 200 / 0.045), transparent 72%); }
.form-plate::before, .form-plate::after { content: ""; position: absolute; width: 10px; height: 10px; border: solid var(--c); }
.form-plate::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.form-plate::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.form-plate figcaption { position: absolute; left: 14px; bottom: 10px; color: var(--text-2); }
.case .field-layer::after { background: linear-gradient(180deg, transparent 0%, transparent 38%, rgb(11 12 14 / 0.55) 70%, rgb(11 12 14 / 0.85) 100%); }

@media (max-width: 860px) {
  .home .hero { min-height: calc(100vh - 96px); }
  .orbit-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .orbit-nav { display: contents; }
  .orbit-nav > .eyebrow, .orbit-nav > .section-title, .orbit-nav > .orbit-help { order: 0; }
  .orbit-stage { order: 1; height: clamp(360px, 105vw, 440px); }
  .olist { order: 2; } .orbit-note { order: 3; }
  .centre { width: var(--centre-w-mobile); }
  .c-tags, .c-form { display: none; }
  .c-name { font-size: var(--step-1); }
  .c-open { padding: 0 12px; }
  .case-head { grid-template-columns: 1fr; }
  .form-plate { min-height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .centre-item, .oitem, .oitem::before, .oname { transition: none; }
  .centre-item { transform: none; }
}
/* framing fixes: a shorter, lower hero block (keeps the galaxy disc clear) and a centre display that scales with the stage */
.home .hero { padding-bottom: clamp(24px, 5vh, 64px); }
.home .hero-title { max-width: 34ch; }
.home .hero-copy { gap: var(--s-2); }
.centre { width: clamp(176px, calc((100vh - 104px) * 0.34), var(--centre-w)); }
@media (max-height: 820px) and (min-width: 861px) { .c-tags { display: none; } }
@media (max-width: 860px) { .centre { width: var(--centre-w-mobile); } }
/* contrast: unselected names stay readable over passing light (measured over the brightest 1 % of the background) */
.oname { color: rgb(196 201 207); }
/* centre display: sequential crossfade (outgoing leaves fast, incoming arrives after it) so two names never overlap */
.centre-item { transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out); }
.centre-item.is-shown { transition: opacity 260ms var(--ease-out) 130ms, transform 260ms var(--ease-out) 130ms; }
@media (prefers-reduced-motion: reduce) { .centre-item, .centre-item.is-shown { transition: none; } }

/* =====================================================================
 * Observatory menu v3 (DRAFT polish): no drawn boundaries (containment stays in code), one living environment on every
 * page, restrained interior typography benchmarked on the hero, a colour-matched aura on the selected constellation.
 * ===================================================================== */
/* 1 · boundaries: nothing traces the orbit, the hit areas or the case plate */
.orbit-hit, .orbit-hit:not(.is-selected):hover { box-shadow: none; background: none; border: 0; cursor: pointer; }
.orbit-aura { position: absolute; left: 0; top: 0; width: 160px; height: 160px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, color-mix(in oklab, var(--sel-c, var(--obs-1)) 26%, transparent) 0%, color-mix(in oklab, var(--sel-c, var(--obs-1)) 9%, transparent) 38%, transparent 68%);
  opacity: var(--aura-o, 0); transition: opacity var(--d-3) var(--ease-out); will-change: transform; }
.centre::before { background: radial-gradient(circle, rgb(11 12 14 / 0.8) 0 30%, rgb(11 12 14 / 0.35) 48%, transparent 66%); }
.form-plate { border: 0; background: none; min-height: 280px; }
.form-plate::before, .form-plate::after { display: none; }
.form-plate figcaption { left: 50%; bottom: 4px; transform: translateX(-50%); white-space: nowrap; color: var(--text-3); font-size: 0.68rem; }

/* 2 · atmosphere: interior pages keep the sky (far stars + falling light); scrims only soften, never black out */
.case .field-layer::after { background: linear-gradient(180deg, transparent 0%, rgb(11 12 14 / 0.22) 55%, rgb(11 12 14 / 0.42) 100%); }

/* 3 · typography: the centred hero is the benchmark — light, narrow display; small mono eyebrows; calm ledes */
.section-title { font-variation-settings: var(--fvs-hero); font-size: clamp(1.6rem, 1.15rem + 1.15vw, 2.3rem); line-height: 1.12; letter-spacing: -0.008em; }
.case-hero { gap: var(--s-3); padding-top: var(--s-6); }
.case-head { align-items: center; }
.case-head-text { gap: var(--s-3); }
.case-title, .case-hero--product .case-title { font-variation-settings: var(--fvs-title); font-size: clamp(2.1rem, 1.5rem + 1.6vw, 3.1rem); line-height: 1.06; letter-spacing: -0.014em; }
.case-hero--experiment .case-question { font-variation-settings: var(--fvs-hero); font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.5rem); line-height: 1.16; max-width: 24ch; }
.case-type { font-size: var(--step-0); color: var(--text-2); }
.case-type.mono { font-size: var(--step--2); color: var(--obs-1); letter-spacing: 0.1em; }
.case-sum { font-size: var(--step-0); line-height: 1.6; color: var(--text-2); max-width: 46ch; }
.lede { font-size: 1.08rem; line-height: 1.6; max-width: 54ch; }
.decision h3, .challenges h3, .steps h3 { font-variation-settings: var(--fvs-list); }
.pager a { font-variation-settings: var(--fvs-list); }
.foot-line a { font-variation-settings: var(--fvs-hero); font-size: var(--step-2); }
.exp-grid { align-items: start; margin-top: var(--s-5); }
.case-hero--experiment .form-plate { min-height: 290px; }

/* 5 · mobile header: one calm row at 390 px (the draft status stays in the hero kicker, case crumbs and footer) */
@media (max-width: 520px) {
  .site-head { flex-wrap: nowrap; gap: var(--s-2); padding: 0 12px; min-height: 56px; }
  .site-head .draft-pill { display: none; }
  .wordmark { font-size: 1rem; white-space: nowrap; }
  .site-nav { order: 0; width: auto; margin-left: auto; overflow: visible; gap: 0; }
  .site-nav a { padding: 0 7px; font-size: 0.84rem; }
}
@media (prefers-reduced-motion: reduce) { .orbit-aura { transition: none; } }
.oitem.is-selected .osum { color: var(--text-2); } /* selected row tint lowers contrast: lift its type line */

/* =====================================================================
 * Observatory menu v4 (DRAFT): one continuous cool sky, star-led formations, Pause Motion.
 * ===================================================================== */
.motion-toggle { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 6px; background: none; border: 0; border-bottom: 1px solid transparent;
  color: var(--text-2); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.motion-toggle:hover { color: var(--text); border-bottom-color: var(--line-strong); }
.motion-toggle:focus-visible { outline: 2px solid var(--obs-2); outline-offset: 2px; }
.orbit-help .motion-toggle { min-height: 44px; margin-left: 2px; }
.foot-motion .motion-toggle { font-family: var(--font-mono); font-variation-settings: var(--fvs-mono); font-size: var(--step--2); letter-spacing: var(--tracking-mono); text-transform: uppercase; }
html:not(.js) .motion-toggle { display: none; }
@media (max-width: 860px) { .centre { width: min(var(--centre-w-mobile), 41vw); } } /* v4: larger formations need a slightly narrower centre on small phones */

/* v4: small-viewport units only where supported (with var() inside, an unsupported unit would fail at computed time and fall back to auto) */
@supports (height: 100svh) {
  .home .hero { min-height: calc(100svh - 64px); }
  @media (min-width: 861px) { .orbit-stage { height: clamp(520px, calc(100svh - 64px - 40px), var(--orbit-stage-max)); } }
  @media (min-width: 861px) { .centre { width: clamp(176px, calc((100svh - 104px) * 0.34), var(--centre-w)); } }
  @media (max-width: 860px) { .home .hero { min-height: calc(100svh - 96px); } }
}
/* Focus: one focus shape per orbit row, in the row's own colour. The ring wraps
   link + summary + rail via a non-interactive pseudo-element on the link, positioned against the row (.oitem). */
.olink:focus-visible { outline: none; }
.olink::after { content: ""; position: absolute; inset: 4px 0; border-radius: 4px; pointer-events: none; }
.olink:focus-visible::after { outline: 2px solid var(--c); outline-offset: 0; }

/* =====================================================================
 * Observatory menu v5 (DRAFT): descent from space into a night sky; a closer galaxy with one compact nucleus.
 * ===================================================================== */
/* the descent: an empty stretch of scroll between the hero and the work, so the sky has a beat before the convergence */
.home .descent { height: 70vh; pointer-events: none; }
@supports (height: 100svh) { .home .descent { height: 70svh; } }
@media (max-width: 860px) { .home .descent { height: 56vh; } @supports (height: 100svh) { .home .descent { height: 56svh; } } }
/* the sky: large, low-frequency atmospheric light only (no clouds, scenery or nebula art). Two full-frame layers screen
   over the stars, below the reading scrims; their strengths come from the scroll position (--sky-v, --sky-n). Levels are
   capped so text and controls keep their contrast (measured; the sky level is tuned, not the type). */
.sky-violet, .sky-night { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.sky-violet { opacity: var(--sky-v, 0);
  background:
    radial-gradient(130% 70% at 50% 118%, var(--sky-violet-glow), transparent 72%),
    radial-gradient(70% 55% at 6% 40%, var(--sky-violet-side), transparent 70%),
    radial-gradient(70% 55% at 94% 34%, var(--sky-violet-side), transparent 70%),
    linear-gradient(180deg, var(--sky-violet-top), var(--sky-violet-base)); }
.sky-night { opacity: var(--sky-n, 0);
  background:
    radial-gradient(120% 60% at 50% 112%, var(--sky-night-glow), transparent 70%),
    radial-gradient(90% 50% at 50% -12%, var(--sky-night-zenith), transparent 70%),
    linear-gradient(180deg, var(--sky-night-top), var(--sky-night-base)); }
/* no-JS: the sky stays off (the page is already complete without it) */
html:not(.js) .sky-violet, html:not(.js) .sky-night { display: none; }
/* the nucleus glow: one compact, soft, near-white glow on the core that falls off into the bulge (painted once, composited;
   an ellipse matching the inclined disc). It fades as the core stars leave for the constellations. */
.home .field-layer::before {
  background:
    radial-gradient(calc(var(--core-r, 600px) * 0.13) calc(var(--core-r, 600px) * 0.075) at var(--core-x, 50%) var(--core-y, 40%), var(--core-glow) 0, rgb(236 238 240 / 0.12) 45%, transparent 100%),
    radial-gradient(calc(var(--core-r, 600px) * 0.46) calc(var(--core-r, 600px) * 0.22) at var(--core-x, 50%) var(--core-y, 40%), rgb(170 200 230 / 0.10) 0, rgb(150 190 220 / 0.04) 50%, transparent 100%);
  opacity: clamp(0, calc(1 - var(--jp, 0) * 1.4), 1); }
/* the hero scrim (a soft pool under the centred copy) leaves with the copy, so it never reads as a dark hole in the sky */
.home .field-layer::after { opacity: var(--hs, 1); }
@media (max-width: 860px) { .sky-violet { opacity: calc(var(--sky-v, 0) * 0.85); } .sky-night { opacity: calc(var(--sky-n, 0) * 0.72); } } /* phones: the copy and list cover more of the frame */
/* =====================================================================
 * Observatory menu v5b (DRAFT): the "Selected work" column appears once the first constellation has formed (its
 * visibility follows the scroll position; layout and page length are unchanged). Keyboard focus always shows it.
 * ===================================================================== */
html.js .home .orbit-nav { opacity: var(--navr, 1); }
html.js .home .orbit-nav:focus-within { opacity: 1; }
@media (max-width: 860px) { /* phones: the column is display: contents, so its children carry the reveal */
  html.js .home .orbit-nav { opacity: 1; }
  html.js .home .orbit-nav > * { opacity: var(--navr, 1); }
  html.js .home .orbit-nav:focus-within > * { opacity: 1; }
}
/* the centre display joins the same reveal, so the work UI appears together after the first shape */
html.js .home .centre { opacity: var(--navr, 1); }
html.js .home .centre:focus-within { opacity: 1; }

/* v1 · one-row phone header (as obs3): the name and three links, every target at least 44 x 44 px, no wrap.
   About is linked from the footer and Contact is the footer, so both leave the phone header. */
@media (max-width: 520px) {
  .site-head { flex-wrap: nowrap; gap: 4px; padding: 0 10px; min-height: 56px; }
  .site-nav { order: 0; width: auto; margin-left: auto; overflow: visible; gap: 0; flex: none; }
  .site-nav a { min-width: 44px; justify-content: center; padding: 0 7px; font-size: 0.84rem; white-space: nowrap; }
  .site-nav a[href$="about.html"], .site-nav a[href$="#contact"] { display: none; }
  .wordmark { font-size: 1rem; white-space: nowrap; flex: none; }
}
@media (max-width: 345px) {
  .site-head { padding: 0 6px; gap: 0; }
  .site-nav a { padding: 0 5px; font-size: 0.8rem; }
  .wordmark { font-size: 0.94rem; }
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); margin: 0; }