/* ============================================================
   ciaran-keogh.com — site.css
   Concept: Scale / Precision / Systems
   An editorial operating manual. Hairline diagram rails,
   figure numbers, evidence chips, generous negative space.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Palette — from 04_DESIGN/creative-direction.md */
  --bone: #f2ede2;
  --paper: #e7dfd0;
  --charcoal: #101312;
  --ink: #1a1d1b;
  --shallot: #8c3040;
  --shallot-deep: #5b1f2a;
  --brass: #bc9252;
  --sea: #356e68;
  --mist: #aab4ae;

  /* Accessible variants of the accent colours for use as text on light
     surfaces. Brass and sea at full strength fail AA below ~18px. */
  --brass-ink: #7d5a1c;
  --sea-ink: #2b5c57;

  /* Derived surfaces */
  --rule: #cdc2ae;
  --rule-soft: #dcd3c2;
  --rule-dark: #2c322f;
  --ink-60: #55594f;
  --bone-70: rgba(242, 237, 226, 0.72);
  --bone-55: rgba(242, 237, 226, 0.58);

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scale */
  /* Caps matter more than the fluid middle. Large desktops are often running
     OS display scaling on top of this, so a ceiling that looks right at 1440
     is oversized on a scaled 1080p screen. */
  --step-hero: clamp(2.6rem, 6.2vw, 4.5rem);
  --step-h2: clamp(1.95rem, 4vw, 3rem);
  --step-h3: clamp(1.3rem, 2.2vw, 1.6rem);
  --step-lead: clamp(1.05rem, 1.5vw, 1.2rem);
  --step-body: 1rem;
  --step-small: 0.8125rem;
  --step-micro: 0.6875rem;

  /* Measure */
  --measure: 42rem;      /* ~672px body copy */
  --measure-case: 62rem; /* case-study content */
  --canvas: 90rem;       /* diagram / image canvas */

  /* Rhythm */
  --gutter: 6vw;
  --scene-y: clamp(4rem, 8vh, 6rem);

  /* Motion */
  --fast: 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --mid: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 60rem) {
  :root { --gutter: 5.5rem; }
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem; /* clears the sticky masthead on anchor jumps */
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-body);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
/* Browsers give <figure> a default 40px inline margin. Every image on this
   site sits in one, so without this they are all 80px narrower than their
   container. */
figure { margin: 0; }
svg { display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 42;
  line-height: 1.03;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: 0.45em; }

/* ---------- 3. Accessibility furniture ---------- */
.skip {
  position: absolute; left: 0.5rem; top: -6rem; z-index: 100;
  background: var(--charcoal); color: var(--bone);
  padding: 0.75rem 1.1rem; font: 500 var(--step-small)/1 var(--body);
  transition: top var(--fast);
}
.skip:focus { top: 0.5rem; }

:focus-visible {
  outline: 2px solid var(--shallot);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-dark :focus-visible, .scene--dark :focus-visible { outline-color: var(--brass); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 4. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.scene {
  padding-block: var(--scene-y);
  border-top: 1px solid var(--rule);
  position: relative;
  scroll-margin-top: 4.5rem;
}
.scene:first-of-type { border-top: 0; }

.scene--dark {
  background: var(--charcoal);
  color: var(--bone);
  border-top-color: var(--rule-dark);
}
.scene--dark a { color: var(--brass); }

.scene--paper { background: var(--paper); }

.scene--sea {
  background: var(--sea);
  color: #f4f8f6;
  border-top-color: rgba(255, 255, 255, 0.16);
}

.scene--shallot {
  background: var(--shallot);
  color: #fdf7f2;
  border-top-color: rgba(255, 255, 255, 0.2);
}

.stack > * + * { margin-top: 1.35rem; }
.stack > h2 + *, .stack > h3 + * { margin-top: 1rem; }
.stack > * + h2, .stack > * + h3 { margin-top: 2rem; }
.stack-lg > * + * { margin-top: clamp(2rem, 4.5vw, 3.25rem); }

/* Editorial split: content column + evidence/visual column */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .split--wide-first { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .split--flip > *:first-child { order: 2; }
}

/* An image column that resolved to nothing should not leave a hole: the
   remaining column takes the full width. */
.split > *:empty { display: none; }
@media (min-width: 60rem) {
  .split:has(> *:empty) { grid-template-columns: minmax(0, 1fr); }
  .split:has(> *:empty) p { max-width: 48rem; }
  .split:has(> *:empty) .lead { max-width: 44rem; }
}
.gallery__item:empty { display: none; }

/* ---------- 5. The rail — signature diagrammatic device ---------- */
/* Figure numbers and a hairline route mark every scene, the way a
   technical manual numbers its plates. Purely structural, never decorative. */
.rail {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.rail__fig {
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--shallot);
  white-space: nowrap;
}
.scene--dark .rail__fig, .scene--sea .rail__fig, .scene--shallot .rail__fig { color: var(--brass); }
.scene--shallot .rail__fig { color: #f6dcc6; }

.rail__line {
  flex: 1;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
}
.scene--dark .rail__line { background: var(--rule-dark); }
.scene--sea .rail__line, .scene--shallot .rail__line { background: rgba(255, 255, 255, 0.28); }

.rail__label {
  font: 400 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The rail is decorative and aria-hidden; its label always repeats a visible
   eyebrow. Below 30rem the line itself carries the structure. */
@media (max-width: 30rem) { .rail__label { display: none; } }
.scene--dark .rail__label { color: var(--mist); }
.scene--sea .rail__label, .scene--shallot .rail__label { color: rgba(255, 255, 255, 0.8); }

/* ---------- 6. Type roles ---------- */
.eyebrow {
  font: 500 var(--step-micro)/1.4 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--shallot);
  margin: 0 0 1.1rem;
}
.scene--dark .eyebrow { color: var(--brass); }
.scene--sea .eyebrow, .scene--shallot .eyebrow { color: rgba(255, 255, 255, 0.86); }

.h-hero { font-size: var(--step-hero); }
.h-scene { font-size: var(--step-h2); }
.h-sub { font-size: var(--step-h3); letter-spacing: -0.01em; }

.lead {
  font-size: var(--step-lead);
  line-height: 1.52;
  max-width: 34rem;
}

.note {
  font: 400 var(--step-small)/1.6 var(--body);
  color: var(--ink-60);
  max-width: 36rem;
}
.scene--dark .note { color: var(--mist); }

/* ---------- 7. Evidence chips — the site's honesty mechanism ---------- */
.evidence {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.4rem 0.6rem 0.38rem;
  border: 1px solid currentColor;
  color: var(--ink-60);
  white-space: nowrap;
}
.evidence::before {
  content: "";
  width: 0.42rem; height: 0.42rem;
  background: currentColor;
  flex: none;
}
/* Shape encodes level so meaning never rests on colour alone. */
.evidence--measured { color: var(--sea-ink); }
.evidence--measured::before { border-radius: 50%; }
.evidence--documented { color: var(--shallot); }
.evidence--documented::before { border-radius: 0; }
.evidence--observed, .evidence--account { color: var(--brass-ink); }
.evidence--observed::before, .evidence--account::before { transform: rotate(45deg); }
.evidence--inferred { color: var(--ink-60); }
.evidence--inferred::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }
/* Not claimed is an anti-claim, so it reads as a struck bar rather than a mark. */
.evidence--notclaimed { color: var(--ink-60); }
.evidence--notclaimed::before { background: currentColor; height: 2px; align-self: center; border-radius: 0; }

.scene--dark .evidence--inferred, .scene--dark .evidence { color: var(--mist); }
.scene--dark .evidence--documented { color: #d98a99; }
.scene--dark .evidence--measured { color: #7fbdb4; }
.scene--dark .evidence--observed, .scene--dark .evidence--account { color: var(--brass-ink); }
.scene--dark .evidence--notclaimed { color: var(--mist); }

.evidence-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---------- 8. Buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.875rem;
  padding: 0.7rem 1.35rem;
  font: 500 var(--step-small)/1 var(--body);
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--fast), color var(--fast), transform var(--fast);
}
.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: var(--shallot);
  border-color: var(--shallot);
  color: #fff;
}
.btn--primary:hover { background: var(--shallot-deep); border-color: var(--shallot-deep); }

.scene--dark .btn--primary { background: var(--brass); border-color: var(--brass); color: var(--charcoal); }
.scene--dark .btn--primary:hover { background: #cfa869; border-color: #cfa869; }
.scene--shallot .btn--primary { background: var(--bone); border-color: var(--bone); color: var(--shallot-deep); }
.scene--shallot .btn--primary:hover { background: #fff; border-color: #fff; }

.btn--ghost:hover { background: rgba(0, 0, 0, 0.055); }
.scene--dark .btn--ghost:hover, .scene--sea .btn--ghost:hover, .scene--shallot .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Text link with a route mark rather than an arrow cliché */
.link-route {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: 500 var(--step-small)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--shallot);
  padding-block: 0.4rem;
}
.link-route::after {
  content: "";
  width: 2.25rem; height: 1px;
  background: currentColor;
  transition: width var(--fast);
}
.link-route:hover::after { width: 3.25rem; }
.scene--dark .link-route { color: var(--brass); }

/* ---------- 9. Header ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bone-70);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.075rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wordmark__mark { width: 1.4rem; height: 1.4rem; flex: none; color: var(--shallot); }
.wordmark__name { font-family: var(--display); }
.wordmark__suffix {
  font: 400 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-60);
  padding-left: 0.6rem;
  margin-left: 0.15rem;
  border-left: 1px solid var(--rule);
  white-space: nowrap;
}
@media (max-width: 40rem) { .wordmark__suffix { display: none; } }

.nav { display: none; }
.nav__list { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav__list a {
  font: 500 var(--step-small)/1 var(--body);
  text-decoration: none;
  padding-block: 0.65rem;
  display: inline-block;
  border-bottom: 1px solid transparent;
}
.nav__list a:hover, .nav__list a[aria-current="page"] { border-bottom-color: var(--shallot); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  margin-right: -0.75rem;
  background: none;
  border: 0;
  cursor: pointer;
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
}
.nav-toggle__bars { width: 1.05rem; display: grid; gap: 0.24rem; }
.nav-toggle__bars span { height: 1px; background: currentColor; transition: transform var(--fast), opacity var(--fast); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(0.365rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-0.365rem) rotate(-45deg); }

.nav-drawer {
  border-top: 1px solid var(--rule);
  background: var(--bone);
}
.nav-drawer[hidden] { display: none; }
.nav-drawer ul { list-style: none; margin: 0; padding: 0.5rem 0 1.25rem; }
.nav-drawer li { margin: 0; border-bottom: 1px solid var(--rule-soft); }
.nav-drawer a {
  display: block;
  padding: 0.95rem 0;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.4rem;
}

@media (min-width: 56rem) {
  .nav { display: block; }
  .nav-toggle, .nav-drawer { display: none !important; }
}

/* ---------- 10. Hero ---------- */
.hero {
  background: var(--charcoal);
  color: var(--bone);
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vh, 5.5rem) clamp(3rem, 6vh, 4.5rem);
}
.hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}
.hero__inner { position: relative; z-index: 1; }
.hero h1 { max-width: 17ch; margin-bottom: 1.5rem; }
.hero .lead { color: var(--bone-70); max-width: 38rem; }
.hero .btns { margin-top: 2.25rem; }
.hero__docs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  font: 400 var(--step-small)/1.6 var(--body);
}
.hero__docs-label {
  font: 500 var(--step-micro)/1.6 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.hero__docs a {
  color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.hero__docs a:hover { color: var(--bone); }

.hero__foot {
  margin-top: clamp(2rem, 5vh, 3.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font: 400 var(--step-micro)/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}

/* ---------- 11. Proof metrics ---------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}
@media (min-width: 44rem) { .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.metric {
  background: var(--bone);
  box-shadow: 0 0 0 1px var(--rule);
  padding: 1.4rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.metric__value {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 42;
}
.metric__value { overflow-wrap: anywhere; }
.metric__value--text { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.15; }
.metric__label { font-size: var(--step-small); line-height: 1.4; color: var(--ink-60); }
.metric__ev { margin-top: auto; padding-top: 0.9rem; }

/* ---------- 12. Range control — the signature interaction ---------- */
.range { border: 1px solid var(--rule); background: var(--paper); }

.range__panes { display: grid; grid-template-columns: 1fr 1fr; }
.range__pane {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  transition: opacity var(--mid), background var(--mid);
  border-right: 1px solid var(--rule);
}
.range__pane:last-child { border-right: 0; }
.range__pane h3 { margin-bottom: 0.75rem; }
.range__pane p { font-size: var(--step-small); color: var(--ink-60); max-width: 26rem; }
.range__pane ul { font-size: var(--step-small); color: var(--ink-60); margin-top: 0.85rem; margin-bottom: 0; }

.range__controls {
  border-top: 1px solid var(--rule);
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem) 1.5rem;
  display: grid;
  gap: 0.75rem;
}
.range__scale {
  display: flex;
  justify-content: space-between;
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.range__readout { font: 400 var(--step-small)/1.5 var(--mono); color: var(--shallot); }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.75rem;
  background: transparent;
  cursor: ew-resize;
  margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 1px; background: var(--ink); border: 0;
}
input[type="range"]::-moz-range-track { height: 1px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.9rem; height: 2rem;
  background: var(--shallot);
  border: 0; border-radius: 0;
  margin-top: -1rem;
}
input[type="range"]::-moz-range-thumb {
  width: 0.9rem; height: 2rem;
  background: var(--shallot);
  border: 0; border-radius: 0;
}

@media (max-width: 44rem) {
  .range__panes { grid-template-columns: 1fr; }
  .range__pane { border-right: 0; border-bottom: 1px solid var(--rule); }
  .range__pane:last-child { border-bottom: 0; }
}

/* ---------- 12b. Craft band ---------- */
/* Two halves of one argument: repetition at volume, and the single plate.
   Deliberately the only image-led section on the homepage. */
.band {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 56rem) { .band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.band__half { background: var(--bone); padding: 1.25rem 1.25rem 1.4rem; }
.band__label {
  font: 500 var(--step-micro)/1.4 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sea-ink);
  margin: 0 0 1rem;
}
.band__label--alt { color: var(--shallot); }

.band__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.band__cell { min-width: 0; }
.band__shot { border: 0; background: none; overflow: hidden; }
/* These are all taller than wide, so the generic portrait cap would catch them
   and shrink them to nothing. Override it explicitly. */
.band__shot.shot--portrait img,
.band__shot img {
  width: 100%;
  max-height: none;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  background: none;
  margin-inline: 0;
}

@media (max-width: 30rem) {
  .band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band__cell:last-child { display: none; }
}

/* Compact culinary provenance beneath the craft band. This is intentionally
   shorter than the About chronology: it answers "can he actually cook across
   different environments?" without turning the homepage into another CV. */
.career-markers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-top: 0;
}
.career-marker {
  background: var(--bone);
  padding: 1.15rem 1.2rem 1.3rem;
}
.career-marker__when {
  margin: 0 0 0.45rem;
  font: 500 var(--step-micro)/1.3 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--shallot);
}
.career-marker h3 {
  font-size: 1.16rem;
  margin-bottom: 0.5rem;
}
.career-marker p:last-child {
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--ink-60);
}
@media (min-width: 44rem) {
  .career-markers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 74rem) {
  .career-markers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

#proof { padding-block: clamp(3.5rem, 7vh, 5.25rem); }

.metric--culinary {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--shallot) 7%, var(--bone)), var(--bone) 58%);
}
.metric--culinary .metric__value {
  font-family: var(--mono);
  font-size: clamp(1rem, 1.45vw, 1.3rem);
  line-height: 1.1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--shallot);
}
.metric--culinary .metric__label {
  max-width: 36ch;
}

/* ---------- 12c. Quick links ---------- */
/* Four destinations directly under the hero. Static by design: a rotator
   would hide three of them at any moment and cannot be read at a glance. */
.scene--quick { padding-block: clamp(2.25rem, 5vh, 3.25rem); }
.ql { display: grid; gap: 1px; margin-top: 1.1rem; }
@media (min-width: 40rem) { .ql { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .ql { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ql__item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.15rem 1.2rem 1.3rem;
  background: var(--bone);
  box-shadow: 0 0 0 1px var(--rule);
  text-decoration: none;
  position: relative;
  transition: background var(--fast), box-shadow var(--fast), transform var(--fast);
}
.ql__item:hover {
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--shallot);
  transform: translateY(-2px);
}
.ql__n {
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--shallot);
}
.ql__label { font-family: var(--display); font-size: 1.2rem; line-height: 1.15; }
.ql__text { font-size: var(--step-small); line-height: 1.5; color: var(--ink-60); }
.ql__ext {
  margin-top: auto;
  padding-top: 0.5rem;
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea-ink);
}

/* ---------- 12d. Folds ---------- */
/* Native details/summary: works with JavaScript off, keyboard accessible,
   and the summary carries enough scent that nothing is hidden by accident. */
.fold { margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--rule); }
.fold__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.1rem 0;
  font: 500 var(--step-small)/1.5 var(--body);
  color: var(--shallot);
}
.fold__summary::-webkit-details-marker { display: none; }
.fold__summary::after {
  content: "+";
  margin-left: auto;
  font: 400 1.35rem/1 var(--mono);
  color: var(--shallot);
  transition: transform var(--fast);
}
.fold[open] .fold__summary::after { content: "–"; }
.fold__summary:hover { color: var(--shallot-deep); }
.fold__summary:focus-visible { outline: 2px solid var(--shallot); outline-offset: 3px; }
.fold__body { padding-bottom: 1.5rem; }
.fold__body > * + * { margin-top: 1.25rem; }

/* ---------- 13. Pillars ---------- */
.pillars { display: grid; gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
@media (min-width: 40rem) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 76rem) { .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pillar {
  background: var(--charcoal);
  padding: 1.6rem 1.4rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.pillar__n { font: 500 var(--step-micro)/1 var(--mono); letter-spacing: 0.16em; color: var(--brass); }
.pillar h3 { font-size: 1.45rem; }
.pillar p { font-size: var(--step-small); color: var(--bone-70); }
.pillar__mech {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-dark);
  font: 400 var(--step-micro)/1.55 var(--mono);
  letter-spacing: 0.06em;
  color: var(--mist);
  text-transform: uppercase;
}

/* ---------- 14. Lineage ---------- */
.lineage { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 52rem) { .lineage { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stage {
  background: var(--bone);
  padding: 1.5rem 1.25rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
}
.stage__shot { border: 0; background: none; margin: -1.5rem -1.25rem 0.35rem; }
.stage__shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-bottom: 1px solid var(--rule); }

.stage__step { font: 500 var(--step-micro)/1 var(--mono); letter-spacing: 0.16em; color: var(--shallot); }
.stage h3 { font-size: 1.35rem; }
.stage__q { font-size: var(--step-small); color: var(--ink-60); font-style: italic; }
.stage__gain {
  margin-top: auto; padding-top: 0.9rem;
  font: 500 var(--step-micro)/1.4 var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sea-ink);
}

/* ---------- 15. Shots ---------- */
.shot {
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}
.shot img { width: 100%; object-fit: cover; object-position: top center; }
.shot--square img { max-width: 22rem; margin-inline: auto; }

.shot--portrait img {
  max-height: 34rem;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
  background: var(--paper);
}

/* Portraits carry their own frame — no card border, no paper backing. */
.shot--figure { border: 0; background: none; }
.shot--figure img {
  max-height: 38rem;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
  background: none;
}

.shot figcaption {
  padding: 0.85rem 1rem 0.95rem;
  border-top: 1px solid var(--rule);
  font: 400 var(--step-micro)/1.55 var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink-60);
  text-transform: uppercase;
}
.scene--dark .shot { border-color: var(--rule-dark); background: #171b19; }

.shot figcaption { border-top-color: var(--rule-dark); color: var(--mist); }

/* Placeholder frame for assets still outstanding — visible, never faked */
.pending {
  border: 1px dashed var(--rule);
  background: repeating-linear-gradient(-45deg, transparent, transparent 9px, rgba(140, 48, 64, 0.045) 9px, rgba(140, 48, 64, 0.045) 18px);
  padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
  display: grid;
  gap: 0.6rem;
  align-content: center;
  min-height: 15rem;
}
.pending__tag {
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--shallot);
}
.pending p { font: 400 var(--step-small)/1.55 var(--body); color: var(--ink-60); margin: 0; }
.scene--dark .pending { border-color: var(--rule-dark); }
.scene--dark .pending p { color: var(--mist); }
.scene--dark .pending__tag { color: var(--brass); }

/* ---------- 16. Method ---------- */
.method { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.method__row {
  display: grid;
  gap: 0.35rem 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 46rem) {
  .method__row { grid-template-columns: 3.5rem 11rem minmax(0, 1fr); align-items: baseline; }
}
.method__n { font: 500 var(--step-micro)/1.6 var(--mono); letter-spacing: 0.14em; color: var(--shallot); }
.method__verb { font-family: var(--display); font-size: 1.5rem; line-height: 1.1; }
.method__desc { font-size: var(--step-small); color: var(--ink-60); max-width: 40rem; margin: 0; }

/* ---------- 17. Services ---------- */
.services { display: grid; gap: 1px; }
@media (min-width: 46rem) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 74rem) { .services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service { background: var(--bone); box-shadow: 0 0 0 1px var(--rule); padding: 1.45rem 1.3rem 1.6rem; }
.service__meta {
  font: 500 var(--step-micro)/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shallot);
  margin: 0 0 0.7rem;
}
.service h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.service p { font-size: var(--step-small); color: var(--ink-60); margin: 0; }

/* ---------- 18. Work index cards ---------- */
.cases { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 52rem) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.case-card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 1.5rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-decoration: none;
  transition: border-color var(--fast), transform var(--fast);
}
.case-card:hover { border-color: var(--shallot); transform: translateY(-2px); }
.case-card h2 { font-size: clamp(1.45rem, 2.4vw, 1.75rem); }
.case-card p { font-size: var(--step-small); color: var(--ink-60); margin: 0; }
.case-card__foot { margin-top: auto; padding-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }

.status {
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.4rem 0.6rem 0.38rem;
  border: 1px solid var(--rule);
  color: var(--ink-60);
}
.status--research { color: var(--sea-ink); border-color: currentColor; }
.status--collecting { color: var(--brass-ink); border-color: currentColor; }

/* ---------- 19. Case-study template ---------- */
.case-head { padding-block: clamp(3rem, 9vh, 6rem) clamp(2rem, 5vh, 3.5rem); }
.case-head h1 { max-width: 20ch; margin-bottom: 1.25rem; }

.case-meta {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 40rem) { .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 66rem) { .case-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case-meta__cell { background: var(--bone); padding: 1rem 1.1rem 1.15rem; }
.case-meta__k {
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-60); margin-bottom: 0.55rem;
}
.case-meta__v { font-size: var(--step-small); line-height: 1.45; }

.case-body { max-width: var(--measure-case); margin-inline: auto; }
.case-body > h2 { margin: clamp(2.25rem, 5vw, 3rem) 0 0.9rem; }
.case-body > h3 { margin: clamp(1.9rem, 4vw, 2.4rem) 0 0.7rem; }
.case-body > h2:first-child, .case-body > h3:first-child { margin-top: 0; }
.case-body > .roles { margin-top: 0; }
.case-section { padding-block: clamp(2.25rem, 5vh, 3.5rem); border-top: 1px solid var(--rule); }
.case-section > h2 { font-size: clamp(1.65rem, 2.8vw, 2.1rem); margin-bottom: 1.35rem; }
.case-section > h3 { font-size: 1.25rem; margin: 2rem 0 0.7rem; }
.case-section ul { max-width: var(--measure); }

.outcomes { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 46rem) { .outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.outcome { background: var(--bone); padding: 1.35rem 1.25rem 1.5rem; }
.outcome h3 { font-size: 1.2rem; margin: 0 0 0.7rem; }
.outcome ul { font-size: var(--step-small); color: var(--ink-60); margin: 0; padding-left: 1.05em; }

/* Evidence ledger — stacks into cards on mobile per responsive spec */
.ledger { border: 1px solid var(--rule); }
.ledger__row {
  display: grid;
  gap: 0.55rem;
  padding: 1.05rem 1.1rem 1.15rem;
  border-bottom: 1px solid var(--rule);
}
.ledger__row:last-child { border-bottom: 0; }
@media (min-width: 46rem) {
  .ledger__row { grid-template-columns: minmax(0, 1fr) 12rem; align-items: center; gap: 1.5rem; }
}
.ledger__claim { font-size: var(--step-small); line-height: 1.5; margin: 0; }

.pullquote {
  border-left: 2px solid var(--shallot);
  padding: 0.35rem 0 0.35rem 1.35rem;
  margin: 1.75rem 0;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  max-width: 34rem;
}

.related { display: grid; gap: 0.75rem; }
.related a {
  display: flex; align-items: baseline; gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.25rem;
}
.related a:hover { color: var(--shallot); }

/* ---------- 19a. Product milestones ---------- */
.milestone {
  border-top: 1px solid var(--rule);
  padding-top: 1.4rem;
  margin-top: 2.25rem;
  scroll-margin-top: 5rem;
}
.milestone__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}
.milestone__n,
.milestone__gain {
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.milestone__n { color: var(--ink-60); }
.milestone__gain { color: var(--shallot); }
.milestone > h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: 0.5rem; }
.milestone__q {
  font-family: var(--display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink-60);
  max-width: 34rem;
  margin-bottom: 1.15rem;
}
.milestone__shot { margin-bottom: 1.15rem; }
.milestone__shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.milestone__shot.shot img[src*="mobile"] { aspect-ratio: auto; object-fit: contain; max-height: 30rem; background: var(--paper); }
/* Documents must be shown whole. A cropped standard is not a smaller standard,
   it is a misleading one, so these are contained rather than covered. */
.shot--document img { aspect-ratio: auto !important; object-fit: contain !important; width: 100%; height: auto; background: var(--bone); }
.milestone__shot.shot--document img { max-height: 34rem; }
.gallery .shot--document img { max-height: 26rem; }

.milestone__notes { margin: 1.15rem 0 0; display: grid; gap: 0.15rem; }
.milestone__notes dt {
  font: 500 var(--step-micro)/1.5 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--shallot);
  margin-top: 0.85rem;
}
.milestone__notes dd { margin: 0; font-size: var(--step-small); line-height: 1.55; max-width: var(--measure); }

@media (min-width: 52rem) {
  .milestone__notes { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; }
  .milestone__notes dt { margin-top: 0.7rem; }
  .milestone__notes dd { margin-top: 0.7rem; }
}

/* ---------- 19b. Case-study gallery ---------- */
.gallery__group {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.gallery__group:first-of-type { margin-top: 1.25rem; }
.gallery__note {
  font: 400 var(--step-small)/1.6 var(--body);
  color: var(--mist);
  max-width: 46rem;
  margin: 0.35rem 0 0;
}
.gallery { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: 1.25rem; }
@media (min-width: 46rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery__item { min-width: 0; }
.gallery .shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.gallery .shot--portrait img {
  aspect-ratio: auto;
  object-fit: contain;
  max-height: 30rem;
  width: auto;
  margin-inline: auto;
  background: var(--paper);
}
.gallery .pending { min-height: 11rem; }

/* ---------- 19b2. Narrative stages ---------- */
.arcs { border-top: 1px solid var(--rule); margin: 1.1rem 0 0; }
.arc {
  display: grid;
  gap: 0.3rem 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 46rem) { .arc { grid-template-columns: 3rem minmax(0, 1fr); } }
.arc__n {
  font: 500 var(--step-micro)/1.6 var(--mono);
  letter-spacing: 0.14em;
  color: var(--shallot);
  margin: 0;
}
.arc__when {
  font: 500 var(--step-micro)/1.6 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0 0 0.25rem;
}
.arc h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.arc__text { font-size: var(--step-small); line-height: 1.55; margin: 0; }

/* ---------- 19c. Career roles ---------- */
.roles { border-top: 1px solid var(--rule); margin: 1.1rem 0 0; }
.role {
  display: grid;
  gap: 0.3rem 1.75rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 46rem) { .role { grid-template-columns: 8rem minmax(0, 1fr); } }
.role__period {
  font: 500 var(--step-micro)/1.6 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--shallot);
  margin: 0;
}
.role h3 { font-size: 1.2rem; margin: 0 0 0.2rem; }
.role__place { font-size: var(--step-small); color: var(--ink-60); margin: 0 0 0.55rem; }
.role__note { font-size: var(--step-small); line-height: 1.55; margin: 0; }
.role__scope {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  margin: 0.75rem 0 0;
}
.role__scope span {
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
  border: 1px solid var(--rule);
  padding: 0.38rem 0.5rem 0.34rem;
}

.role__bullets {
  margin: 0.7rem 0 0;
  padding-left: 1.05em;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--ink-60);
}
.role__bullets li { margin-bottom: 0.4em; }
.role__ev { margin: 0.9rem 0 0; }
.role--pending .role__period { color: var(--ink-60); }
.role--pending h3 { color: var(--ink-60); }

/* A labelled block usable on any background. .footer__col is footer-only. */
.detail-block h3 {
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--shallot);
  margin: 0 0 0.4rem;
}

/* ---------- 19d. Contact list ---------- */
/* Inherits nothing. Used on the light contact page and inside the dark
   footer, so both cases are stated explicitly rather than assumed. */
.contact-list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.contact-list li {
  display: grid;
  gap: 0.2rem 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step-small);
  line-height: 1.5;
}
@media (min-width: 30rem) { .contact-list li { grid-template-columns: 6.5rem minmax(0, 1fr); } }
.contact-list li:last-child { border-bottom: 0; }
.contact-list .k {
  font: 500 var(--step-micro)/1.6 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.contact-list a { color: var(--shallot); word-break: break-word; }
.contact-list a:hover { color: var(--shallot-deep); }

.footer .contact-list li { border-bottom-color: var(--rule-dark); }
.footer .contact-list .k { color: var(--mist); }
.footer .contact-list { color: var(--bone-70); }
.footer .contact-list a { color: var(--brass); }
.footer .contact-list a:hover { color: var(--bone); }

/* ---------- 19e. Document gallery and lightbox ---------- */
/* Dense document plates need the full content width, not half of it. */
.gallery--wide { grid-template-columns: minmax(0, 1fr) !important; gap: clamp(1.5rem, 3vw, 2.25rem); }
.gallery--wide .shot { background: var(--bone); }
.gallery--wide .shot img { aspect-ratio: auto; object-fit: contain; width: 100%; max-height: none; }

a.zoom { display: block; text-decoration: none; position: relative; }
a.zoom .shot { transition: border-color var(--fast); }
a.zoom:hover .shot { border-color: var(--shallot); }
a.zoom::after {
  content: "Enlarge";
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(16, 19, 18, 0.82);
  padding: 0.45rem 0.6rem 0.4rem;
  opacity: 0;
  transition: opacity var(--fast);
}
a.zoom:hover::after, a.zoom:focus-visible::after { opacity: 1; }
@media (hover: none) { a.zoom::after { opacity: 1; } }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(16, 19, 18, 0.94);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 1rem clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem);
  overflow: auto;
}
.lightbox[hidden] { display: none; }
.lightbox__close {
  justify-self: end;
  margin-bottom: 0.75rem;
  background: none;
  border: 1px solid var(--mist);
  color: var(--bone);
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.lightbox__close:hover { border-color: var(--bone); }
.lightbox__figure { margin: 0; display: grid; gap: 0.9rem; align-content: start; justify-items: center; }
.lightbox__figure img {
  width: auto;
  max-width: 100%;
  /* Documents are wide; allow horizontal room and let the container scroll. */
  min-width: min(1100px, 100%);
  background: var(--bone);
}
.lightbox__figure figcaption {
  font: 400 var(--step-small)/1.6 var(--body);
  color: var(--mist);
  max-width: 46rem;
  text-align: center;
}

/* ---------- 19f. Live project link ---------- */
.case-live { margin-top: clamp(1.5rem, 3vw, 2rem); }
.case-live__note {
  margin: 0.75rem 0 0;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--ink-60);
}

/* ---------- 19g. Thinking notes ---------- */
.statuskey { display: grid; gap: 1px; margin-top: clamp(1.75rem, 4vw, 2.5rem); }
@media (min-width: 46rem) { .statuskey { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.statuskey__item {
  background: var(--bone);
  box-shadow: 0 0 0 1px var(--rule);
  padding: 0.9rem 1rem 1rem;
  display: grid;
  gap: 0.3rem;
}
.statuskey__k {
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--shallot);
}
.statuskey__d { font-size: var(--step-small); line-height: 1.45; color: var(--ink-60); }

.tnote { border-top: 1px solid var(--rule); padding-top: 1.5rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
.tnote:first-child { margin-top: 0; }
.tnote__head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.8rem; }
.tnote__n {
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink-60);
}
.tnote__status {
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.4rem 0.6rem 0.36rem;
  border: 1px solid currentColor;
}
.tnote__status--speculative { color: var(--brass-ink); }
.tnote__status--designed { color: var(--sea-ink); }
.tnote__status--prototyped { color: var(--shallot); }
.tnote > h2 { font-size: clamp(1.65rem, 2.8vw, 2.1rem); margin: 0 0 0.7rem; }
.tnote .lead { max-width: 40rem; margin-bottom: 1.35rem; }
.tnote p { max-width: var(--measure); }
.tnote ul { max-width: var(--measure); }
.note__h {
  font-family: var(--display);
  font-size: 1.2rem;
  margin: 2rem 0 0.7rem;
}

/* ---------- 20. Form ---------- */
.form { display: grid; gap: 1.15rem; max-width: 38rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font: 500 var(--step-small)/1.4 var(--body); }
.field__hint { font: 400 var(--step-small)/1.5 var(--body); color: var(--ink-60); }

.field input, .field select, .field textarea {
  font: 400 1rem/1.5 var(--body);
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid var(--rule);
  padding: 0.75rem 0.85rem;
  min-height: 2.875rem;
  width: 100%;
  border-radius: 0;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--shallot); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--shallot); border-width: 2px; }

.field__error {
  font: 500 var(--step-small)/1.45 var(--body);
  color: var(--shallot-deep);
  display: flex; gap: 0.4rem;
}
.field__error:empty { display: none; }
.field__error::before { content: "!"; font-family: var(--mono); }

.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.consent input { width: 1.15rem; height: 1.15rem; min-height: 0; margin-top: 0.28rem; accent-color: var(--shallot); }
.consent label { font-size: var(--step-small); line-height: 1.5; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  border: 1px solid var(--rule);
  padding: 1rem 1.1rem;
  font-size: var(--step-small);
  line-height: 1.55;
}
.form-status[hidden] { display: none; }
.form-status--ok { border-color: var(--sea-ink); color: var(--sea-ink); }
.form-status--err { border-color: var(--shallot); color: var(--shallot-deep); }

.privacy-note {
  border-left: 2px solid var(--brass);
  padding-left: 1.1rem;
  font: 400 var(--step-small)/1.6 var(--body);
  color: var(--ink-60);
  max-width: 34rem;
}

/* ---------- 20b. Mail card ---------- */
.mailcard { border: 1px solid var(--rule); background: var(--paper); padding: clamp(1.5rem, 4vw, 2.25rem); }
.mailcard__addr { font-family: var(--display); font-size: clamp(1.35rem, 3vw, 1.8rem); line-height: 1.2; margin: 0 0 1rem; word-break: break-word; }
.mailcard__addr a { color: var(--shallot); text-decoration-thickness: 1px; }
.mailcard__addr a:hover { color: var(--shallot-deep); }
.mailcard__body { font-size: var(--step-small); line-height: 1.6; color: var(--ink-60); margin: 0; }

/* ---------- 21. Footer ---------- */
.footer {
  background: var(--charcoal);
  color: var(--bone);
  padding-block: clamp(3rem, 8vh, 5rem) 2rem;
}
.footer__grid { display: grid; gap: 2.25rem; }
@media (min-width: 52rem) { .footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }
.footer h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); max-width: 18ch; margin-bottom: 1.1rem; }
.footer .footer__col h3 {
  font: 500 var(--step-micro)/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 0.9rem;
}
.footer .footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer .footer__col li { margin-bottom: 0.55rem; font-size: var(--step-small); }
.footer .footer__col a { text-decoration: none; color: var(--bone-70); }
.footer .footer__col a:hover { color: var(--bone); text-decoration: underline; }
.footer__base {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  font: 400 var(--step-micro)/1.6 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mist);
}

/* ---------- 22. Motion ---------- */
/* Reveals explain relationship, not decoration: content lifts once and stops. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--slow), transform var(--slow);
}
.reveal.is-in:nth-child(2) { transition-delay: 60ms; }
.reveal.is-in:nth-child(3) { transition-delay: 120ms; }
.reveal.is-in:nth-child(4) { transition-delay: 180ms; }

.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- 23. Print ---------- */
@media print {
  .masthead, .nav-drawer, .hero__grid, .btns, .range__controls { display: none !important; }
  body { background: #fff; color: #000; }
  .scene, .hero { background: #fff !important; color: #000 !important; border-color: #999; }
  a::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}

/* --------------------------------------------------------------------------
   Top-margin utilities.

   These replace inline style attributes. The Content-Security-Policy sets
   style-src without 'unsafe-inline', which blocks style="..." attributes as
   well as inline <style> blocks — so every inline margin in the generated HTML
   was being silently dropped in production while still working in any local
   preview served without the header. Classes keep the CSP strict.

   Named by their rem value so a future edit does not have to guess a scale.
   -------------------------------------------------------------------------- */
.mt-035 { margin-top: 0.35rem; }
.mt-100 { margin-top: 1rem; }
.mt-125 { margin-top: 1.25rem; }
.mt-150 { margin-top: 1.5rem; }
.mt-175 { margin-top: 1.75rem; }
.mt-200 { margin-top: 2rem; }
.mt-250 { margin-top: 2.5rem; }