:root {
  /* Warm paper, graphite ink, one terracotta accent used sparingly. The scale
     runs light → lighter so a section can step without ever going dark. */
  --paper-deep:#EFEDEA;   /* deepest band — footer, contact, full-bleed rests */
  --paper:#FFFFFF;        /* the page — white, not cream */
  --paper-alt:#F7F6F4;    /* alternating band */
  --surface:#FFFFFF;      /* cards and plates — same white, held apart by their rules */
  --surface-2:#FAFAF9;

  --ink:#1C1B18;          /* graphite — body and headlines */
  --ink-mid:#3F3D38;
  --ink-soft:#5E5B54;
  /* Was #928D84, which is 2.98:1 on the alt paper and 2.82:1 on the deep one —
     it never passed AA for text, and the light wash took it a shade further.
     #6C6862 is the LIGHTEST this tier can be and still clear 4.5:1 on the
     darkest surface it sits on, under the wash. The scale compresses as a
     result: a four-step grey whose bottom step must be legible on near-white
     has nowhere lighter to go. Legibility wins. */
  --ink-faint:#6C6862;

  /* #A9502A came to 4.50:1 on the deep paper under the wash — exactly on the
     line, which is not a place to stand. One unit darker clears it. */
  --accent:#A74F2A;       /* terracotta — kickers, marks, the live state */
  --accent-deep:#8C4020;

  --line:rgba(28,27,24,.14);
  --line-strong:rgba(28,27,24,.3);
  --card:rgba(28,27,24,.022);
  --card-hover:rgba(28,27,24,.045);

  --on-accent:#FFFFFF;

  /* One grotesk, differentiated by weight, size and case rather than by mixing
     families. The content-security policy blocks third-party stylesheets and
     fonts, so this is the system stack — SF Pro on Apple, Segoe on Windows,
     Roboto on Android — which at heavy weight with tight tracking is exactly
     the register this design wants and costs nothing to load. */
  --font-display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Inter", Arial, sans-serif;
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Paper casts a shadow. Two depths: a card at rest and a card under the
     pointer. Warm-tinted rather than neutral grey, so it sits on this paper. */
  /* Light from the upper left, so the shadow falls down and to the RIGHT.
     A shadow straight down reads as a UI card; an offset one reads as paper
     lying on a surface, which is the whole point of the reference. */
  --lift: 2px 3px 4px rgba(28,27,24,.045), 14px 20px 34px -16px rgba(28,27,24,.20);
  --lift-hi: 3px 5px 7px rgba(28,27,24,.055), 26px 40px 60px -20px rgba(28,27,24,.30);

  --maxw:1240px;
  --gutter:16px;
  --radius:0px;
  --head-h:64px;
}
@media (min-width:640px) { :root { --gutter:24px; } }
@media (min-width:1024px) { :root { --gutter:40px; } }

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3 { font-family:var(--font-display); font-weight:700; letter-spacing:-.022em; line-height:1.08; margin:0; }
p { margin:0 0 1.1em; }
a { color:inherit; }
img { max-width:100%; height:auto; display:block; }
ul,ol { margin:0; padding:0; list-style:none; }
address { font-style:normal; }

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

.sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--paper-deep); font-weight:600;
  padding:12px 20px; border-radius:0 0 var(--radius) 0; text-decoration:none;
}
.skip:focus { left:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius); }

.kicker {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin:0 0 16px;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.site-head {
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper-deep) 82%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.head-in { display:flex; align-items:center; gap:16px; min-height:var(--head-h); }

.wordmark { display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.wordmark-mark {
  display:grid; place-items:center; width:30px; height:30px; flex:none;
  border:1px solid var(--accent); color:var(--accent);
  font-family:var(--font-display); font-size:13px; letter-spacing:.02em;
}
.wordmark-text { font-family:var(--font-display); font-size:17px; letter-spacing:-.01em; white-space:nowrap; }

.site-nav { margin-left:auto; display:flex; gap:26px; }
.site-nav a {
  font-size:14px; letter-spacing:.015em; color:var(--ink-soft); text-decoration:none;
  padding:6px 0; border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.site-nav a:hover { color:var(--ink); }
.site-nav a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--accent); }

.nav-toggle {
  display:none; margin-left:auto; width:42px; height:42px; padding:0;
  background:transparent; border:1px solid var(--line-strong); color:var(--ink);
  border-radius:var(--radius); cursor:pointer;
}
.nav-toggle-bars { display:grid; gap:5px; justify-items:center; }
.nav-toggle-bars i { display:block; width:17px; height:1.5px; background:currentColor; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child { transform:translateY(3.2px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child { transform:translateY(-3.2px) rotate(-45deg); }

/* The drawer takes over at 1080px, not 860.
   The horizontal header needs 1006px in English and 1110px in Russian — the
   Russian labels are simply longer. Below that it used to "fit" only because
   the flex row squashed the boxed control until its text painted outside its
   own border. A row that does not fit has to become a drawer; it must not be
   made to fit by crushing the thing inside it. */
@media (max-width:1079px) {
  .nav-toggle { display:grid; place-items:center; }
  .site-nav {
    position:absolute; top:100%; left:0; right:0; margin:0;
    flex-direction:column; gap:0; align-items:stretch;
    background:var(--paper-deep); border-bottom:1px solid var(--line);
    padding:6px var(--gutter) 18px;
  }
  html.js .site-nav { display:none; }
  html.js .site-nav[data-open] { display:flex; }
  .site-nav a { padding:13px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .site-nav a[aria-current="page"] { border-bottom-color:var(--accent); }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-sans); font-size:14.5px; font-weight:600; letter-spacing:.01em;
  padding:14px 26px; border-radius:var(--radius); text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background:var(--accent); color:var(--paper-deep); border-color:var(--accent); }
.btn-primary:hover { background:#BE5F34; border-color:#BE5F34; transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.btn-quiet { background:transparent; color:var(--ink-soft); border-color:transparent; padding-inline:8px; }
.btn-quiet:hover { color:var(--ink); }

/* ── Hero: identity + intent router ───────────────────────────────────── */
.hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(130% 100% at 85% 0%, rgba(169,80,42,.07), transparent 62%),
    linear-gradient(180deg, var(--paper-deep), var(--paper) 78%);
  border-bottom:1px solid var(--line);
}
/* ── Sections ─────────────────────────────────────────────────────────── */
/* Was clamp(64px,9vw,112px) — up to 224px of air per section, and with a
   dozen sections that is 2,700px of nothing at all. Tightened, and the gap now
   scales with the viewport rather than with an arbitrary 9vw. */
.section { padding-block:clamp(48px,6vw,84px); }
/* The first section after a page hero sits closer — the hero already supplied
   the breathing room above it. */
.page-hero + .section { padding-top:clamp(48px,5.5vw,72px); }
.section[id], .page-hero[id] { scroll-margin-top:calc(var(--head-h) + 12px); }
:target { scroll-margin-top:calc(var(--head-h) + 12px); }

.section-head { max-width:64ch; margin-bottom:clamp(26px,3vw,38px); }
.section-head h2 { font-size:clamp(28px,4.6vw,44px); letter-spacing:-.024em; }
.section-lead { color:var(--ink-soft); margin-top:16px; font-size:17px; }
.section-note { margin-top:30px; color:var(--ink-faint); font-size:14.5px; max-width:70ch; }
.section-more { margin-top:36px; }

/* Counterpoint bands. In a light system the contrast comes from paper weight,
   not from inverting to black — a section steps onto white or onto the deepest
   paper tone and the ink stays exactly where it is. */
.section-featured, .section-capabilities, .section-credentials { background:var(--surface); }
.section-current, .section-principle { background:var(--paper-alt); }

/* ── Thesis ───────────────────────────────────────────────────────────── */
.thesis-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px); }
@media (max-width:860px) { .thesis-grid { grid-template-columns:minmax(0,1fr); } }
.thesis-lead h2 { font-size:clamp(28px,4.4vw,42px); letter-spacing:-.024em; }
.thesis-body { color:var(--ink-soft); font-size:17.5px; }
.thesis-body p:last-child { margin-bottom:0; }

/* ── Hairline grids ───────────────────────────────────────────────────────
   Rules come from the CELLS, never from a 1px gap showing a filled container
   background: with `auto-fit`, a short last row would otherwise paint a solid
   block of border colour where the missing cells would have been. */
.hairline-grid { display:grid; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.hairline-grid > * { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ── Company cards ────────────────────────────────────────────────────── */
.company-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr)); }
/* Four featured companies read best as a 2x2 block; a 3+1 row leaves the
   fourth card stranded across the full width. The min() guard is what keeps a
   430px track from overflowing a 390px phone. */
.company-grid--featured { grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr)); gap:20px; }
.company-grid--portfolio { grid-template-columns:repeat(auto-fit,minmax(min(284px,100%),1fr)); }

.company-card {
  display:flex; flex-direction:column; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; text-decoration:none; color:inherit;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
a.company-card:hover { background:var(--card-hover); border-color:var(--line-strong); transform:translateY(-2px); }
.company-card[hidden] { display:none; }

.company-top { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }
.company-category { font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); }
.company-status {
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-faint); border:1px solid var(--line); padding:3px 8px; border-radius:var(--radius);
}
.company-status.is-building { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.company-name { font-size:21px; letter-spacing:-.015em; }
.company-card--featured .company-name { font-size:24px; }
.company-tagline { color:var(--ink-soft); font-size:15px; margin:0; }
.company-detail { color:var(--ink-faint); font-size:14.5px; margin:0; }

.company-caps { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.company-caps li {
  font-size:11.5px; color:var(--ink-soft); background:var(--card-hover);
  border:1px solid var(--line); padding:4px 9px; border-radius:var(--radius);
}
.company-meta { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:auto; padding-top:6px; }
.company-role { font-size:12.5px; color:var(--ink-faint); }
.company-audience {
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent);
}
.company-foot { padding-top:12px; border-top:1px solid var(--line); }
.company-link { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); }
a.company-card:hover .company-link { color:var(--accent); }
.company-nolink { font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }

/* ── Selected work ────────────────────────────────────────────────────── */
.selected-grid { grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.selected-item {
  display:block; background:transparent; padding:28px 26px 30px; text-decoration:none;
  transition:background-color .2s ease;
}
.selected-item:hover { background:rgba(28,27,24,.04); }
.selected-index { display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; color:var(--accent); margin-bottom:14px; }
.selected-kind { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:9px; }
.selected-title { display:block; font-family:var(--font-display); font-size:21px; letter-spacing:-.015em; margin-bottom:9px; }
.selected-body { display:block; color:var(--ink-soft); font-size:14.5px; line-height:1.6; }

/* ── Timeline ─────────────────────────────────────────────────────────── */
.section-timeline { background:var(--paper-alt); }
.timeline { border-top:1px solid var(--line); }
.timeline-item { display:grid; grid-template-columns:140px minmax(0,1fr); gap:26px; padding:26px 0; border-bottom:1px solid var(--line); }
@media (max-width:640px) { .timeline-item { grid-template-columns:minmax(0,1fr); gap:8px; } }
.timeline-year { font-family:var(--font-display); font-size:28px; color:var(--accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.timeline-item.is-undated .timeline-year { color:var(--ink-faint); font-size:22px; }
.timeline-body h3 { font-size:19px; margin-bottom:7px; }
.timeline-body p { color:var(--ink-soft); font-size:15.5px; margin:0; }
.timeline-note { margin-top:26px; color:var(--ink-faint); font-size:14px; max-width:78ch; }

/* ── Current focus ────────────────────────────────────────────────────── */
.current-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:20px; }
.current-card { border-top:2px solid var(--paper); padding-top:22px; }
.current-label {
  display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-mid); margin-bottom:12px;
}
.current-label.is-building { color:var(--accent-deep); }
.current-card h3 { font-size:21px; margin-bottom:10px; }
.current-card p { color:var(--ink-mid); font-size:15px; margin:0; }

/* ── Insights ─────────────────────────────────────────────────────────── */
.insight-list { border-top:1px solid var(--line); }
.insight a { display:block; padding:22px 0; border-bottom:1px solid var(--line); text-decoration:none; transition:padding-left .2s ease; }
.insight a:hover { padding-left:10px; }
.insight-meta { display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:7px; }
.insight-title { display:block; font-family:var(--font-display); font-size:21px; letter-spacing:-.015em; }
.insights-cta { margin-top:30px; }

/* ── Contact ──────────────────────────────────────────────────────────── */
.section-contact { background:var(--paper-deep); border-top:1px solid var(--line); }
.contact-in { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,64px); align-items:start; }
@media (max-width:860px) { .contact-in { grid-template-columns:minmax(0,1fr); } }
.contact-lead h2 { font-size:clamp(28px,4.4vw,42px); letter-spacing:-.024em; }
.contact-cards { display:grid; gap:14px; }
.contact-card {
  display:block; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; text-decoration:none;
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
}
a.contact-card:hover { border-color:var(--accent); background:var(--card); transform:translateY(-2px); }
.contact-card--static { background:var(--card); }
.contact-label { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.contact-value { display:block; font-family:var(--font-display); font-size:22px; letter-spacing:-.012em; word-break:break-word; }
.contact-address { font-size:19px; line-height:1.45; }

/* ── Page hero (inner pages) ──────────────────────────────────────────── */
.page-hero {
  background:linear-gradient(180deg, var(--paper-deep), var(--paper));
  border-bottom:1px solid var(--line);
  padding-block:clamp(56px,9vw,104px) clamp(40px,6vw,72px);
}
.page-hero h1 { font-size:clamp(34px,6.4vw,62px); letter-spacing:-.028em; max-width:18ch; }
.page-hero-lead { margin-top:22px; color:var(--ink-soft); font-size:clamp(16.5px,2vw,19px); max-width:62ch; }
.page-hero-meta { margin-top:20px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); }
.page-hero-meta a { color:var(--accent); }
.nf-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }

/* ── About: story ─────────────────────────────────────────────────────── */
.story { max-width:72ch; }
.story-chapter { padding:30px 0; border-top:1px solid var(--line); }
.story-chapter:first-of-type { border-top:0; padding-top:0; }
.story-marker { display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--accent); margin-bottom:12px; }
.story-chapter h3 { font-size:clamp(23px,3.4vw,31px); letter-spacing:-.022em; margin-bottom:14px; }
.story-chapter p { color:var(--ink-soft); font-size:17.5px; }
.story-chapter p:last-child { margin-bottom:0; }

.discipline-list { grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); }
.discipline-list li { padding:20px 22px; display:flex; gap:14px; align-items:baseline; font-size:15.5px; color:var(--ink-soft); }
.discipline-list li span { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--accent); flex:none; }

.cred-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:18px; }
.cred-card { border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:rgba(28,27,24,.03); }
.cred-label { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:12px; }
.cred-line { font-family:var(--font-mono); font-size:12.5px; line-height:1.85; color:var(--ink-mid); margin:0; }
.cred-note { margin:14px 0 0; font-size:13.5px; color:#928D84; }

/* ── Development ──────────────────────────────────────────────────────── */
.cap-grid { grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); }
.cap-card { padding:24px 22px; }
.cap-card h3 { font-size:19px; margin-bottom:8px; }
.cap-card p { color:var(--ink-mid); font-size:14.5px; margin:0; }

.project-list { display:grid; gap:0; }
.project {
  display:grid; gap:clamp(22px,3vw,36px);
  padding-block:clamp(36px,5vw,64px);
  border-top:1px solid var(--line);
}
.project:first-child { border-top:0; padding-top:0; }

/* The figure reserves its exact aspect ratio before the image loads, so nothing
   below it moves when the photograph arrives. */
.project-figure {
  /* 3:2 outright. This was var(--ar) from a style attribute, which the CSP
     refused, so the fallback was doing the work regardless. Every CRDP
     rendition is 4:3 or wider and clamps to 3:2 — a test holds that. */
  margin:0; aspect-ratio:3 / 2; overflow:hidden;
  background:var(--paper-alt); border:1px solid var(--line);
}
.project-figure img { width:100%; height:100%; object-fit:cover; display:block; }

.project-body { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(24px,4vw,52px); align-items:start; }
@media (max-width:860px) { .project-body { grid-template-columns:minmax(0,1fr); } }
.project-main { min-width:0; }
.project-meta { min-width:0; }

.project-top { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.project-index { font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--accent); }
.project-status {
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); border:1px solid var(--line); padding:4px 10px; border-radius:var(--radius);
}
.project-status.is-active { color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }

.project-address { font-size:clamp(25px,3.6vw,36px); letter-spacing:-.024em; margin-bottom:8px; }
.project-place { font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--ink-faint); margin:0 0 20px; }
.project-narrative { color:var(--ink-soft); font-size:16.5px; }
.project-narrative:last-of-type { margin-bottom:0; }

.project-specs { margin:0; display:grid; gap:0; border-top:1px solid var(--line); }
.spec { display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; padding:11px 0; border-bottom:1px solid var(--line); }
.spec dt { font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); }
.spec dd { margin:0; font-size:14.5px; color:var(--ink-soft); }

.project-materials { margin-top:22px; }
.project-materials-label {
  display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.project-materials ul { display:flex; flex-wrap:wrap; gap:6px; }
.project-materials li {
  font-size:11.5px; color:var(--ink-soft); background:var(--card);
  border:1px solid var(--line); padding:5px 10px; border-radius:var(--radius);
}

.project-views { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:26px; }
.project-views img {
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border:1px solid var(--line); background:var(--paper-alt);
}

.project-link { margin:22px 0 0; }
.project-link a {
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:11.5px; letter-spacing:.03em; color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:3px;
}
.project-link a:hover { color:var(--accent); border-bottom-color:var(--accent); }

.why-in { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,64px); }
@media (max-width:860px) { .why-in { grid-template-columns:minmax(0,1fr); } }
.why-in h2 { font-size:clamp(26px,4vw,38px); letter-spacing:-.024em; }
.why-body { color:var(--ink-soft); font-size:17px; }
.why-body p:last-child { margin-bottom:0; }

/* ── Technology ───────────────────────────────────────────────────────── */
.focus-list { display:grid; gap:0; border-top:1px solid var(--line); }
.focus-area { display:grid; grid-template-columns:72px minmax(0,1fr); gap:20px; padding:32px 0; border-bottom:1px solid var(--line); }
@media (max-width:640px) { .focus-area { grid-template-columns:minmax(0,1fr); gap:10px; } }
.focus-index { font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--accent); padding-top:6px; }
.focus-problem { font-size:clamp(21px,3vw,27px); letter-spacing:-.02em; margin-bottom:14px; }
.focus-response { color:var(--ink); font-size:16.5px; opacity:.9; }
.focus-label {
  display:inline-block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-right:8px; vertical-align:2px;
}
.focus-detail { color:var(--ink-soft); font-size:15.5px; }
.focus-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.focus-tags li { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-faint); border:1px solid var(--line); padding:4px 9px; border-radius:var(--radius); }

.principle { max-width:none; }
.principle h2 { font-size:clamp(27px,4.4vw,42px); letter-spacing:-.024em; margin-bottom:40px; max-width:20ch; }
.principle-steps { grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }
.principle-steps li { padding:28px 24px; }
.principle-step {
  display:grid; place-items:center; width:32px; height:32px; margin-bottom:16px;
  border:1px solid var(--accent-deep); color:var(--accent-deep);
  font-family:var(--font-mono); font-size:13px;
}
.principle-steps h3 { font-size:19px; margin-bottom:10px; }
.principle-steps p { color:var(--ink-mid); font-size:15px; margin:0; }

/* ── Filters (companies page) ─────────────────────────────────────────── */
html:not(.js) .filters, html:not(.js) .filter-status { display:none; }
.filters { margin-bottom:32px; }
.filters-label { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.filter-row { display:flex; flex-wrap:wrap; gap:8px; }
.filter {
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans);
  font-size:13.5px; color:var(--ink-soft); background:transparent;
  border:1px solid var(--line); border-radius:var(--radius); padding:9px 15px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.filter:hover { color:var(--ink); border-color:var(--line-strong); }
.filter[aria-pressed="true"] { color:var(--paper-deep); background:var(--accent); border-color:var(--accent); font-weight:600; }
.filter-count { font-family:var(--font-mono); font-size:10.5px; opacity:.75; }
.filter-status { font-size:13.5px; color:var(--ink-faint); margin:0 0 20px; min-height:1.4em; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-foot { background:var(--paper-deep); border-top:1px solid var(--line); padding-block:56px 64px; }
.foot-top { display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start; padding-bottom:32px; border-bottom:1px solid var(--line); }
.foot-name { font-family:var(--font-display); font-size:22px; letter-spacing:-.015em; }
.foot-role { color:var(--ink-faint); font-size:13.5px; margin:8px 0 0; max-width:48ch; }
.foot-nav { display:flex; flex-wrap:wrap; gap:8px 22px; }
.foot-nav a { font-size:13.5px; color:var(--ink-soft); text-decoration:none; }
.foot-nav a:hover, .foot-nav a[aria-current="page"] { color:var(--accent); }

.foot-licensing { padding-block:32px; border-bottom:1px solid var(--line); }
.foot-h { font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:400; margin:0 0 16px; }
.lic-line { font-family:var(--font-mono); font-size:11.5px; line-height:1.9; color:var(--ink-soft); }
.lic-meta { margin-top:14px; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:13.5px; color:var(--ink-faint); }
.lic-meta a { color:var(--ink-soft); }
.lic-badges { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0; }
.badge {
  display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:var(--radius); padding:7px 12px;
}
.badge-link { text-decoration:none; }
.badge-link:hover { color:var(--accent); border-color:var(--accent); }

.foot-disclosure { padding-block:28px; color:var(--ink-faint); font-size:12.5px; line-height:1.72; max-width:92ch; }
.foot-disclosure p { margin:0 0 10px; }
.foot-disclosure strong { color:var(--ink-soft); }
.foot-base { display:flex; flex-wrap:wrap; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-faint); padding-top:22px; border-top:1px solid var(--line); }

/* ── Reveal on scroll ─────────────────────────────────────────────────── */
html.js .reveal { opacity:0; transform:translateY(16px); }
html.js .reveal.is-in { opacity:1; transform:none; transition:opacity .65s ease, transform .65s cubic-bezier(.22,.8,.26,1); }

/* ── Motion off ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  html.js .reveal { opacity:1; transform:none; }
  .btn:hover, .company-card:hover, .contact-card:hover, .insight a:hover { transform:none; padding-left:0; }
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print {
  .site-head, .nav-toggle, .hero-canvas, .filters { display:none; }
  body { background:#fff; color:#000; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE SCENES
   Each section gets one visual idea of its own; none of them is a card grid.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ecosystem graph ──────────────────────────────────────────────────────── */
.section-ecosystem { background:var(--paper-alt); overflow:hidden; }
.eco { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,4vw,56px); align-items:center; }
@media (max-width:940px) { .eco { grid-template-columns:minmax(0,1fr); } }

.eco-graph { position:relative; }
.eco-svg { width:100%; height:auto; overflow:visible; transition:transform .5s cubic-bezier(.22,.8,.26,1); will-change:transform; }
.eco-edge { fill:none; stroke:var(--accent); stroke-width:1.2; opacity:.16; transition:opacity .3s ease, stroke-width .3s ease; }
.eco-edge.is-lit { opacity:.9; stroke-width:2; }
.eco-spoke { stroke:var(--line-strong); stroke-width:1; opacity:.5; transition:opacity .3s ease; }
.eco-spoke.is-lit { opacity:1; stroke:var(--accent); }
.eco-core { fill:var(--surface); stroke:var(--accent); stroke-width:1.2; }
.eco-core-name { font-family:var(--font-display); font-size:19px; letter-spacing:-.01em; fill:var(--ink); }
.eco-core-sub { font-family:var(--font-mono); font-size:8.5px; letter-spacing:.14em; fill:var(--ink-faint); }

.eco-node { cursor:pointer; opacity:0; animation:row-in .5s ease forwards; animation-delay:calc(var(--i) * .08s); }
.eco-node-disc { fill:var(--surface); transition:fill .3s ease; }
.eco-node-ring { fill:none; stroke:var(--line-strong); stroke-width:1; transition:stroke .3s ease, stroke-width .3s ease; }
.eco-node-name { font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; fill:var(--ink-soft); transition:fill .3s ease; }
.eco-node:hover .eco-node-disc, .eco-node.is-active .eco-node-disc { fill:var(--surface-2); }
.eco-node:hover .eco-node-ring, .eco-node.is-active .eco-node-ring { stroke:var(--accent); stroke-width:1.6; }
.eco-node:hover .eco-node-name, .eco-node.is-active .eco-node-name { fill:var(--accent); }
.eco-node:focus { outline:none; }
.eco-node:focus-visible .eco-node-ring { stroke:var(--accent); stroke-width:2.4; }

.eco-readout { position:relative; min-height:clamp(230px,26vw,290px); }
html.js .eco-card[data-inactive] { display:none; }
html.js .eco-card { animation:panel-in .45s cubic-bezier(.22,.8,.26,1); }
html:not(.js) .eco-card + .eco-card { margin-top:26px; padding-top:26px; border-top:1px solid var(--line); }
.eco-card-kicker { display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.eco-card h3 { font-size:clamp(24px,3.2vw,34px); letter-spacing:-.024em; margin-bottom:10px; }
.eco-card-line { font-family:var(--font-display); font-size:17.5px; color:var(--ink); opacity:.9; margin-bottom:10px; }
.eco-card-body { color:var(--ink-soft); font-size:15.5px; }
.eco-card-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.eco-card-list li { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); border:1px solid var(--line); padding:4px 9px; }

/* ── Scenarios ────────────────────────────────────────────────────────────── */
.scenarios { border-top:1px solid var(--line); }
.scenario { border-bottom:1px solid var(--line); }
.scenario-head { margin:0; font-weight:400; }
.scenario-toggle {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline; gap:10px 20px;
  width:100%; background:transparent; border:0; color:inherit; cursor:pointer;
  padding:clamp(22px,2.6vw,32px) 4px; text-align:left; font-family:inherit;
  transition:padding-left .25s cubic-bezier(.22,.8,.26,1);
}
.scenario-toggle:hover { padding-left:12px; }
.scenario-num { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--accent); }
.scenario-title { font-family:var(--font-display); font-size:clamp(26px,4.6vw,48px); letter-spacing:-.028em; line-height:1.05; }
.scenario-line { grid-column:2; font-size:14.5px; color:var(--ink-faint); }
.scenario-mark { position:relative; width:16px; height:16px; align-self:center; }
.scenario-mark::before, .scenario-mark::after {
  content:""; position:absolute; inset:50% 0 auto; height:1px; background:var(--accent); transition:transform .3s ease;
}
.scenario-mark::after { transform:rotate(90deg); }
.scenario.is-open .scenario-mark::after { transform:rotate(0deg); }
.scenario.is-open .scenario-title { color:var(--accent); }

.scenario-body { overflow:hidden; }
html.js .scenario-body { max-height:0; transition:max-height .45s cubic-bezier(.22,.8,.26,1); }
html.js .scenario.is-open .scenario-body { max-height:560px; }
.scenario-inner { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(20px,3vw,48px); padding:0 4px clamp(26px,3vw,40px); }
@media (max-width:820px) { .scenario-inner { grid-template-columns:minmax(0,1fr); } }
.scenario-copy { color:var(--ink-soft); font-size:16.5px; margin:0; }
.scenario-aside { display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.scenario-companies { display:flex; flex-wrap:wrap; gap:6px; }
.scenario-companies li { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); border:1px solid var(--line); padding:5px 10px; }
.scenario-companies a { text-decoration:none; }
.scenario-companies a:hover { color:var(--accent); }

/* ── Build Lab ────────────────────────────────────────────────────────────── */
.section-lab { background:var(--surface); }
.lab-head { max-width:68ch; margin-bottom:clamp(36px,4vw,56px); }
.lab-head h2 { font-size:clamp(28px,4.6vw,46px); letter-spacing:-.026em; }
.lab-intro { color:var(--ink-mid); margin-top:18px; font-size:17px; }

.lab-track { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-bottom:clamp(26px,3vw,40px); }
@media (max-width:760px) { .lab-track { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 0; } }
.lab-stage {
  position:relative; background:transparent; border:0; cursor:pointer; font-family:inherit;
  padding:26px 10px 0; text-align:left; color:inherit;
}
.lab-stage-rail { position:absolute; top:10px; left:0; right:0; height:1px; background:var(--line); }
.lab-stage:first-child .lab-stage-rail { left:50%; }
.lab-stage:last-child .lab-stage-rail { right:50%; }
.lab-stage-dot {
  position:absolute; top:5px; left:calc(50% - 5.5px); width:11px; height:11px; border-radius:50%;
  background:var(--ink); border:1px solid var(--line-strong); transition:background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.lab-stage-label {
  display:block; text-align:center; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); transition:color .3s ease;
}
.lab-stage:hover .lab-stage-label { color:var(--paper); }
.lab-stage.is-done .lab-stage-dot { background:var(--accent-deep); border-color:var(--accent-deep); }
.lab-stage[aria-selected="true"] .lab-stage-dot { background:var(--accent-deep); border-color:var(--accent-deep); transform:scale(1.5); }
.lab-stage[aria-selected="true"] .lab-stage-label { color:var(--paper); font-weight:600; }

.lab-panels { min-height:120px; max-width:72ch; }
html.js .lab-panel[data-inactive] { display:none; }
html.js .lab-panel { animation:panel-in .4s ease; }
html:not(.js) .lab-panel + .lab-panel { margin-top:14px; }
.lab-panel-step { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--accent-deep); margin-bottom:12px; }
.lab-panel p { font-size:clamp(17px,2.2vw,21px); line-height:1.5; color:var(--paper); margin:0; }

.lab-output { margin-top:clamp(32px,4vw,52px); padding-top:26px; border-top:1px solid var(--line); }
.lab-output-label { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; }
.lab-capabilities { display:flex; flex-wrap:wrap; gap:8px; }
.lab-capabilities li {
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em; color:var(--ink-mid);
  border:1px solid var(--line); padding:8px 13px; background:var(--card);
  opacity:.35; transform:translateY(4px); transition:opacity .45s ease, transform .45s ease, border-color .45s ease, color .45s ease;
  transition-delay:calc(var(--i) * .03s);
}
.lab.is-lit .lab-capabilities li { opacity:1; transform:none; border-color:var(--accent-deep); color:var(--paper); }
.lab-cta { margin-top:30px; }

/* ── Evidence sequence ────────────────────────────────────────────────────── */
.section-evidence { background:var(--paper-deep); }
.ev-head { margin-bottom:clamp(30px,4vw,50px); }
/* The photograph and its overlay are gone; this is a list and the film below
   it. No bleed, no sticky figure, no SVG layers. */
.ev { max-width:none; }

.ev-stages { padding-left:0; max-width:78ch; }
.ev-stage { border-top:1px solid var(--line); }
.ev-stage:last-child { border-bottom:1px solid var(--line); }
.ev-stage-btn {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 16px; width:100%;
  background:transparent; border:0; color:inherit; text-align:left; cursor:pointer;
  font-family:inherit; padding:clamp(18px,2.4vw,28px) 4px;
}
.ev-stage-num { grid-row:span 2; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--ink-faint); padding-top:6px; }
.ev-stage-label { font-family:var(--font-display); font-size:clamp(20px,2.8vw,28px); letter-spacing:-.02em; transition:color .3s ease; }
.ev-stage-body { color:var(--ink-faint); font-size:15px; line-height:1.55; transition:color .35s ease, max-height .4s ease, opacity .35s ease; }
html.js .ev-stage-body { max-height:0; opacity:0; overflow:hidden; }
html.js .ev-stage.is-active .ev-stage-body { max-height:200px; opacity:1; }
.ev-stage.is-active .ev-stage-label { color:var(--accent); }
.ev-stage.is-active .ev-stage-num { color:var(--accent); }
.ev-stage.is-active .ev-stage-body { color:var(--ink-soft); }

.ev-reveal { margin-top:clamp(44px,5vw,72px); max-width:62ch; }
.ev-reveal h3 { font-size:clamp(30px,5vw,52px); letter-spacing:-.03em; margin:8px 0 16px; }
.ev-reveal p { color:var(--ink-soft); font-size:17px; }

/* ── StateCourse board ────────────────────────────────────────────────────── */
.section-statecourse { background:var(--paper); border-block:1px solid var(--line); }
.sc-head { max-width:64ch; margin-bottom:clamp(34px,4vw,54px); }
.sc-name { font-size:clamp(40px,8vw,88px); letter-spacing:-.035em; display:block; line-height:1; }
.sc-lead { font-family:var(--font-display); font-size:clamp(19px,2.8vw,28px); color:var(--accent); letter-spacing:-.016em; margin:22px 0 16px; }
.sc-body { color:var(--ink-soft); font-size:16.5px; margin:0; }

.sc-board { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(26px,4vw,56px); align-items:start; }
@media (max-width:940px) { .sc-board { grid-template-columns:minmax(0,1fr); } }
.sc-map { width:100%; height:auto; }
.sc-cell { cursor:pointer; opacity:0; animation:row-in .4s ease forwards; animation-delay:calc(var(--i) * .009s); }
.sc-cell-box { fill:rgba(28,27,24,.05); stroke:var(--line); stroke-width:1; transition:fill .25s ease, stroke .25s ease; }
.sc-cell-code { font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; fill:var(--ink-faint); transition:fill .25s ease; }
.sc-cell:hover .sc-cell-box, .sc-cell.is-hot .sc-cell-box { fill:rgba(169,80,42,.18); stroke:var(--accent); }
.sc-cell:hover .sc-cell-code, .sc-cell.is-hot .sc-cell-code { fill:var(--accent); }
.sc-cell:focus { outline:none; }
.sc-cell:focus-visible .sc-cell-box { stroke:var(--accent); stroke-width:2.4; }
.sc-cell.is-dim { opacity:.25; }
.sc-readout { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-soft); margin:18px 0 0; min-height:1.6em; }

.sc-legend { border-top:1px solid var(--line); margin-bottom:26px; }
.sc-legend-item {
  display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:4px 12px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line); cursor:default;
}
.sc-swatch { width:11px; height:11px; border:1px solid var(--line-strong); background:rgba(28,27,24,.05); }
.sc-swatch[data-stage="approved"], .sc-swatch[data-stage="live"] { border-color:var(--accent); background:rgba(169,80,42,.35); }
.sc-swatch[data-stage="review"], .sc-swatch[data-stage="submission"] { border-color:var(--accent); background:rgba(169,80,42,.16); }
.sc-legend-label { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.sc-legend-count { font-family:var(--font-mono); font-size:13px; color:var(--accent); font-variant-numeric:tabular-nums; }
.sc-legend-note { grid-column:2 / -1; font-size:12.5px; color:var(--ink-faint); }
.sc-honesty { font-size:14px; color:var(--ink-faint); border-left:2px solid var(--accent); padding-left:16px; margin-bottom:26px; }
.sc-ctas { display:flex; flex-wrap:wrap; gap:12px; }

.sc-stage-list { border-top:1px solid var(--line); max-width:72ch; }
.sc-stage-row { display:grid; grid-template-columns:56px minmax(0,1fr); gap:18px; padding:20px 0; border-bottom:1px solid var(--line); }
.sc-stage-row h3 { font-size:19px; margin-bottom:6px; }
.sc-stage-row p { color:var(--ink-soft); font-size:15px; margin:0; }
.sc-stage-num { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--accent); padding-top:5px; }
.sc-join { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,4vw,56px); }
@media (max-width:860px) { .sc-join { grid-template-columns:minmax(0,1fr); } }
.sc-join h2 { font-size:clamp(26px,4vw,38px); letter-spacing:-.024em; }
.sc-join-body p { color:var(--ink-soft); font-size:16.5px; }

/* ── Opportunities ────────────────────────────────────────────────────────── */
.opp-list { border-top:1px solid var(--line); }
.opp { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px clamp(24px,4vw,52px); align-items:center; padding:clamp(22px,2.6vw,30px) 0; border-bottom:1px solid var(--line); }
@media (max-width:760px) { .opp { grid-template-columns:minmax(0,1fr); } }
.opp-title { font-size:clamp(20px,2.6vw,26px); letter-spacing:-.02em; margin-bottom:8px; }
.opp-body { color:var(--ink-soft); font-size:15.5px; margin:0; max-width:62ch; }
.opp-openings { margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.opp-openings li { font-family:var(--font-mono); font-size:11px; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding:5px 10px; }
.opp-open { margin:12px 0 0; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--ink-faint); }
.opp-side { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.opp-company { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-faint); }
.opp-note { font-size:14px; color:var(--ink-faint); border-left:2px solid var(--accent); padding-left:18px; max-width:80ch; margin:0; }

/* ── Currently building ───────────────────────────────────────────────────── */
.section-now { background:var(--paper-alt); }
/* ── The wall of sheets ───────────────────────────────────────────────────
   Grid cells pulled onto each other with negative margins, each leaning a
   degree or two. The overlap and the lean are purely visual: the markup order
   is 1..n and the keyboard walks it in that order, which is the whole reason
   this is done in CSS rather than by reordering anything.

   Later sheets paint over earlier ones by document order, so the wall stacks
   like a hand of cards without a single z-index until something is pointed at. */
/* The sheet's own shadow, heavier than a card's: it has to fall ON the sheet
   underneath and be seen doing it, or the overlap is invisible. */
.now-wall { --sheet-shadow:3px 4px 6px rgba(28,27,24,.05), 18px 26px 40px -14px rgba(28,27,24,.30); }
.now-wall {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding-top:14px;
  --overlap:clamp(26px,4.4vw,66px);
  --overlap-y:clamp(18px,2.8vw,42px);
  --sheet-pad:clamp(20px,2.2vw,28px);
}
.now-sheet { display:flex; }
.now-sheet:nth-child(3n+2), .now-sheet:nth-child(3n+3) { margin-left:calc(var(--overlap) * -1); }
.now-sheet:nth-child(n+4) { margin-top:calc(var(--overlap-y) * -1); }

/* A sheet that another one lies over has to keep its text out from under it.
   The overlap is a strip of the right edge (and, for the first row, of the
   bottom edge) that belongs to the neighbour, so it is padding, not margin —
   otherwise the words simply disappear beneath the sheet on top, which is
   exactly what happened. */
.now-sheet:not(:nth-child(3n)) > a { padding-right:calc(var(--sheet-pad) + var(--overlap)); }
.now-sheet:nth-child(-n+3) > a { padding-bottom:calc(var(--sheet-pad) + var(--overlap-y)); }

.now-sheet > a {
  display:grid; grid-template-rows:auto auto auto 1fr; gap:8px; width:100%;
  padding:var(--sheet-pad); text-decoration:none; color:inherit;
  background:var(--surface); border:0; box-shadow:var(--sheet-shadow);
  transform:rotate(var(--lean,0deg));
  transition:transform .32s cubic-bezier(.22,.8,.26,1), box-shadow .32s cubic-bezier(.22,.8,.26,1);
}
.now-sheet:nth-child(1) > a { --lean:-2.6deg; }
.now-sheet:nth-child(2) > a { --lean:1.8deg; }
.now-sheet:nth-child(3) > a { --lean:-1.2deg; }
.now-sheet:nth-child(4) > a { --lean:2.2deg; }
.now-sheet:nth-child(5) > a { --lean:-2deg; }
.now-sheet:nth-child(6) > a { --lean:1.1deg; }

/* Pointing at a sheet straightens it and lifts it clear of the others. */
.now-sheet > a:hover, .now-sheet > a:focus-visible {
  transform:rotate(0deg) translateY(-12px) scale(1.015);
  box-shadow:6px 8px 12px rgba(28,27,24,.06), 34px 48px 72px -18px rgba(28,27,24,.38);
  z-index:5; position:relative;
}
.now-sheet > a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.now-stage { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); }
.now-stage.is-building { color:var(--accent); }
.now-title { font-family:var(--font-display); font-size:clamp(18px,1.9vw,23px); letter-spacing:-.022em; }
.now-line { font-size:14.5px; color:var(--ink); opacity:.85; }
.now-body { color:var(--ink-faint); font-size:13.5px; }

/* Two sheets overlapping on a 358px screen just cover each other up. */
@media (max-width:860px) {
  .now-wall { grid-template-columns:minmax(0,1fr); gap:14px; padding-top:0; --overlap:0px; --overlap-y:0px; }
  .now-sheet:nth-child(n) { margin:0; }
  /* `.now-sheet:nth-child(N) > a` sets --lean at (0,2,1); a plain
     `.now-sheet > a` here is (0,1,1) and loses to it whatever the media query
     says. Matching the specificity is what actually unwinds the lean — without
     this the sheets stay rotated on a phone and their corners get cut off. */
  .now-sheet:nth-child(n) > a { --lean:0deg; padding:var(--sheet-pad); }
  .now-sheet > a:hover { transform:none; }
}

/* ── Work-with-me router ──────────────────────────────────────────────────── */
.nav-cta {
  border:1px solid var(--accent); color:var(--accent) !important; padding:9px 16px;
  border-radius:var(--radius); font-weight:600; letter-spacing:.01em;
  transition:background-color .2s ease, color .2s ease;
}
.nav-cta:hover { background:var(--accent); color:var(--paper-deep) !important; border-bottom-color:var(--accent); }
.site-nav a.nav-cta[aria-current] { border-bottom-color:var(--accent); }

.router { border:0; padding:0; max-width:none; width:100%; height:100%; max-height:none; background:var(--paper-deep); color:var(--ink); }
.router::backdrop { background:rgba(28,27,24,.55); backdrop-filter:blur(6px); }
.router-in { max-width:var(--maxw); margin-inline:auto; padding:clamp(56px,8vh,96px) var(--gutter); }
.router-close {
  position:absolute; top:22px; right:22px; width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:var(--radius); cursor:pointer;
}
.router-close:hover { border-color:var(--accent); color:var(--accent); }
.router-kicker { font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
.router-h { font-size:clamp(30px,6vw,60px); letter-spacing:-.03em; margin-bottom:clamp(30px,4vh,50px); }
.router-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.router-door {
  display:block; padding:clamp(22px,3vh,34px) clamp(18px,2vw,28px); text-decoration:none;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background-color .2s ease, padding-left .25s cubic-bezier(.22,.8,.26,1);
}
.router-door:hover { background:rgba(169,80,42,.08); padding-left:calc(clamp(18px,2vw,28px) + 8px); }
.router-door-num { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; color:var(--accent); margin-bottom:12px; }
.router-door-label { display:block; font-family:var(--font-display); font-size:clamp(22px,2.8vw,30px); letter-spacing:-.022em; margin-bottom:8px; }
.router-door-line { display:block; color:var(--ink-soft); font-size:14px; }

/* ── Mobile: intentional, not collapsed ───────────────────────────────────── */
@media (max-width:700px) {
  
  .scenario-toggle:hover { padding-left:4px; }
  .sc-cell-code { font-size:15px; }
}

/* Persistent action on phones — the CTA never scrolls away. */
.mobile-cta { display:none; }
@media (max-width:860px) {
  html.js .mobile-cta {
    display:block; position:fixed; left:var(--gutter); right:var(--gutter); bottom:14px; z-index:50;
    text-align:center; padding:15px 20px; border-radius:var(--radius);
    background:var(--accent); color:var(--paper-deep); text-decoration:none;
    font-weight:600; font-size:15px; letter-spacing:.01em;
    box-shadow:0 10px 30px rgba(28,27,24,.22);
    transform:translateY(120%); transition:transform .4s cubic-bezier(.22,.8,.26,1);
  }
  html.js .mobile-cta.is-in { transform:none; }
  body { padding-bottom:0; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-verbs span, .eco-node, .sc-cell {
    opacity:1 !important; animation:none !important; transform:none !important;
  }
  html.js .eco-card, html.js .lab-panel { animation:none; }
  .lab-capabilities li { opacity:1; transform:none; }
  .eco-svg { transition:none; }
  html.js .mobile-cta { transition:none; }
}

/* ── Tap targets ──────────────────────────────────────────────────────────
   Inline links inside footers, notes and chip lists render around 16–20px
   tall, which is fine for a cursor and too small for a thumb. Give them a
   comfortable box on touch-sized screens without disturbing the type. */
@media (max-width:860px) {
  .foot-nav a, .lic-meta a, .section-note a, .opp-note a, .timeline-note a {
    display:inline-block; padding-block:8px; line-height:1.4;
  }
  .scenario-companies li { padding:0; }
  .scenario-companies li a, .scenario-companies li > span { display:block; padding:9px 12px; }
  .scenario-companies li:not(:has(a)) { padding:9px 12px; }
}
@media (max-width:860px) {
  .project-link a, .page-hero-meta a { display:inline-block; padding-block:8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EDITORIAL LAYER — warm paper, large type, real photography.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero { background:var(--paper); border-bottom:1px solid var(--line); overflow:hidden; }
.hero-top {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(24px,4vw,64px); align-items:center;
  padding-block:clamp(40px,5vw,78px) clamp(36px,4.4vw,64px);
}
@media (max-width:900px) { .hero-top { grid-template-columns:minmax(0,1fr); } }

.hero-identity { margin:0; }
.hero-name {
  font-size:clamp(44px,7.4vw,104px); line-height:.92; letter-spacing:-.04em;
  margin:0 0 16px; max-width:9ch;
}
.hero-line {
  font-family:var(--font-display); font-size:clamp(20px,2.6vw,31px); line-height:1.22;
  letter-spacing:-.018em; color:var(--accent); margin:0 0 18px; max-width:20ch;
}
.hero-verbs { display:flex; flex-wrap:wrap; gap:0 16px; margin:0 0 20px; }
.hero-verbs span {
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); opacity:0; animation:verb-in .5s ease forwards;
  animation-delay:calc(var(--i) * .11s + .25s);
}
@keyframes verb-in { from { opacity:0; transform:translateY(6px); } to { opacity:.95; transform:none; } }
.hero-support { font-size:clamp(15.5px,1.7vw,18px); color:var(--ink-soft); margin:0; max-width:38ch; }

/* The portrait carries its own alpha, so it meets the paper directly. A hairline
   ground rule sits behind it to stop it floating. */
.hero-portrait { position:relative; margin:0; }
.hero-portrait::before {
  content:""; position:absolute; left:0; right:0; bottom:9%;
  border-bottom:1px solid var(--line);
}
.hero-portrait img { position:relative; width:100%; height:auto; display:block; }
@media (max-width:900px) {
  .hero-portrait { max-width:460px; margin-inline:auto; }
  .hero-portrait::before { bottom:8%; }
}

/* ── Marquee ──────────────────────────────────────────────────────────── */
.marquee { overflow:hidden; border-block:1px solid var(--line); background:var(--paper); padding-block:clamp(14px,2vw,26px); }
.marquee-track { display:flex; width:max-content; will-change:transform; animation:marquee 68s linear infinite; }
.marquee-track span {
  font-family:var(--font-display); font-size:clamp(34px,6vw,84px); line-height:1.05;
  letter-spacing:-.02em; white-space:nowrap; padding-right:.4em;
  color:transparent; -webkit-text-stroke:1px rgba(28,27,24,.16);
}
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .marquee-track { animation:none; } }

/* ── Selected projects ────────────────────────────────────────────────── */
/* ── Selected projects ─────────────────────────────────────────────────────
   One frame, one index. The eight-plate spread this replaced cost three
   screens on desktop and nearly four on a phone; the homepage is a person,
   not a portfolio. Every row is a real link, so the index works with the swap
   switched off — that is the enhancement, not the way in. */
.section-selected { background:var(--paper); padding-block:clamp(56px,7vw,104px); }
.sel-head { max-width:62ch; margin-bottom:clamp(26px,3.4vw,44px); }
.sel-head h2 { font-size:clamp(30px,5vw,58px); line-height:1.02; letter-spacing:-.03em; }
.sel-lead { color:var(--ink-soft); font-size:16.5px; margin:16px 0 0; }

/* Mobile-first on purpose: `sizes` on the frame declares the two-column layout
   from 860px up, and a `max-width:860px` rule here would claim the single
   column at exactly 860 as well. Both boundaries have to be the same one, or
   the browser serves a rendition a third too small at that width. */
.sel { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,3.4vw,52px); align-items:start; }
@media (min-width:860px) { .sel { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } }

/* The frame is a fixed box; the photographs cross-fade inside it, so the page
   never reflows when the index changes what is showing. Only the SHOTS are
   taken out of flow — the caption stays in it. It used to be absolute at
   top:100%, which on a phone, where the index sits directly under the frame,
   landed it on top of row 01. */
.sel-frame { position:relative; aspect-ratio:5 / 4; }
.sel-shot {
  width:100%; height:100%; object-fit:cover; display:block;
  background:var(--surface); border:1px solid var(--line);
}
html.js .sel-shot { position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
html.js .sel-shot:not([data-inactive]) { opacity:1; }
/* Without scripting there is one photograph and a working index under it. */
html:not(.js) .sel-frame { aspect-ratio:auto; }
html:not(.js) .sel-shot { height:auto; aspect-ratio:5 / 4; }
html:not(.js) .sel-shot[data-inactive] { display:none; }

.sel-frame-caption {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line);
}
.sel-frame-kind { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); }
.sel-frame-name { font-family:var(--font-display); font-size:clamp(17px,1.9vw,21px); letter-spacing:-.014em; }

.sel-index { border-top:1px solid var(--line); }
.sel-row { border-bottom:1px solid var(--line); }
.sel-row a {
  display:grid; grid-template-columns:30px minmax(0,1fr); gap:2px 14px; align-items:baseline;
  padding:13px 0; text-decoration:none; color:inherit;
  transition:color .2s ease, padding-left .25s cubic-bezier(.22,.8,.26,1);
}
.sel-num { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-faint); transition:color .2s ease; }
.sel-name { font-family:var(--font-display); font-size:clamp(17px,1.9vw,21px); letter-spacing:-.014em; }
/* Type, place and year share one mono line. Three separate lines ran the
   index 340px past the bottom of the photograph beside it. */
.sel-meta {
  grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:0 6px; margin-top:3px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-faint);
}
.sel-kind { color:var(--ink-soft); }
.sel-row.is-active a, .sel-row a:hover, .sel-row a:focus-visible { color:var(--accent); padding-left:10px; }
.sel-row.is-active .sel-num, .sel-row a:hover .sel-num { color:var(--accent); }
.sel-row a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* The one door out. It is the whole point of the band being this short. */
.sel-out { margin:clamp(28px,3.6vw,46px) 0 0; }
.sel-out a {
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--line-strong); padding:8px 0 6px;
  transition:color .2s ease, border-color .2s ease;
}
.sel-out a strong { font-weight:inherit; color:var(--accent); }
.sel-out a:hover, .sel-out a:focus-visible { color:var(--accent); border-color:var(--accent); }

@media (prefers-reduced-motion:reduce) {
  html.js .sel-shot { transition:none; }
  .sel-row a { transition:none; }
}

/* ── Light-system corrections ─────────────────────────────────────────── */
.site-head { background:color-mix(in srgb, var(--paper) 88%, transparent); }
.site-foot { background:var(--paper-deep); }
.section-contact { background:var(--paper-deep); }
.section-ecosystem { background:var(--paper-alt); }
.section-timeline { background:var(--paper-alt); }
.section-now { background:var(--paper-alt); }
.section-opp-group.is-alt { background:var(--paper-alt); }
.section-statecourse { background:var(--surface); }
.section-evidence { background:var(--paper-deep); }
.page-hero { background:var(--paper); }
/* Of the four selectors this rule used to carry, only .project-figure is still
   rendered anywhere — .project-visual, .plate-figure and .hero-plate belong to
   markup that has since been replaced. */
.project-figure { border-color:var(--line); }
.router { background:var(--paper); color:var(--ink); }
.router::backdrop { background:rgba(28,27,24,.55); }
.eco-core, .eco-node-disc { fill:var(--surface); }
.eco-node:hover .eco-node-disc, .eco-node.is-active .eco-node-disc { fill:var(--paper-deep); }
.company-card { background:var(--surface); }
a.company-card:hover { background:var(--surface-2); }
.lab-stage-dot { background:var(--surface); }
.filter[aria-pressed="true"] { color:var(--on-accent); }
.btn-primary { color:var(--on-accent); }
.skip { color:var(--on-accent); }
.nav-cta:hover { color:var(--on-accent) !important; }
html.js .mobile-cta { color:var(--on-accent); }
.sc-verify { margin:-10px 0 24px; }
.sc-verify a {
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--accent);
  text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:4px;
}
@media (max-width:860px) { .sc-verify a { padding-block:6px 4px; } }

/* A state at `building` has to look different from one at `research`, or the
   legend count is the only place the progress shows. */
.sc-cell[data-stage="building"] .sc-cell-box { fill:rgba(169,80,42,.10); stroke:rgba(169,80,42,.42); }
.sc-cell[data-stage="building"] .sc-cell-code { fill:var(--accent); }
.sc-swatch[data-stage="building"] { border-color:rgba(169,80,42,.42); background:rgba(169,80,42,.10); }
.ev-reveal-actions { display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 0; }
.contact-sub { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--ink-faint); margin-top:8px; }

/* ── Ecosystem: make the movement visible ────────────────────────────────── */
.eco-hint {
  display:flex; align-items:center; gap:10px; margin:0 0 20px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint);
}
.eco-hint-dot {
  width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none;
  animation:eco-pulse 3.8s ease-in-out infinite;
}
@keyframes eco-pulse { 0%,100% { opacity:.25; transform:scale(.8); } 50% { opacity:1; transform:scale(1); } }
.eco.is-held .eco-hint-dot { animation:none; opacity:1; }

/* The lit lineage flows from the area it grew out of towards the one selected. */
.eco-edge.is-lit { stroke-dasharray:7 7; animation:eco-flow 1.5s linear infinite; }
@keyframes eco-flow { to { stroke-dashoffset:-28; } }

/* The active node reads as chosen even before anyone touches it. */
.eco-node.is-active .eco-node-ring { animation:eco-ring 3.8s ease-in-out infinite; }
@keyframes eco-ring { 0%,100% { stroke-width:1.6; } 50% { stroke-width:2.6; } }
.eco.is-held .eco-node.is-active .eco-node-ring { animation:none; stroke-width:2.2; }

@media (prefers-reduced-motion:reduce) {
  .eco-hint-dot, .eco-edge.is-lit, .eco-node.is-active .eco-node-ring { animation:none !important; }
  .eco-edge.is-lit { stroke-dasharray:none; }
}
/* Company chips link out where the company has a public site; the ones that do
   not are visibly flat, so nothing looks clickable and then refuses to click. */
.eco-card-list li a, .eco-card-list li span { display:block; padding:4px 9px; text-decoration:none; }
.eco-card-list li { padding:0; }
.eco-card-list li a:hover { color:var(--accent); border-color:var(--accent); }
.eco-card-list li:has(a) { transition:border-color .2s ease; }
.eco-card-list li:has(a):hover { border-color:var(--accent); }

/* ═══ EMIADA ══════════════════════════════════════════════════════════════
   The section is a conversation, so it is built like one: a pressure line, two
   replies, and a read-out that changes when you choose. Direction is never
   carried by colour alone — every signal prints its own arrow and value. */
.section-emiada { background:var(--paper-alt); border-block:1px solid var(--line); }
.em-head { max-width:66ch; margin-bottom:clamp(32px,4vw,52px); }
.em-name { font-size:clamp(40px,8vw,88px); letter-spacing:-.035em; display:block; line-height:1; }
.em-expansion {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin:14px 0 0;
}
.em-lead {
  font-family:var(--font-display); font-size:clamp(19px,2.8vw,28px); color:var(--accent);
  letter-spacing:-.016em; margin:20px 0 14px;
}
.em-body { color:var(--ink-soft); font-size:16.5px; margin:0 0 20px; }
.em-marks { display:flex; flex-wrap:wrap; gap:8px; }
.em-marks li {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-strong); color:var(--ink-soft); padding:6px 10px;
}
.em-mark-status { border-color:var(--accent) !important; color:var(--accent) !important; }

.em-stage { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(26px,4vw,56px); align-items:start; }
@media (max-width:980px) { .em-stage { grid-template-columns:minmax(0,1fr); } }

.em-tabs { display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--line); margin-bottom:26px; }
.em-tab {
  display:flex; flex-direction:column; gap:4px; align-items:flex-start; text-align:left;
  background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:12px 18px 13px 0; margin-right:26px; cursor:pointer; color:var(--ink-faint);
  font-family:inherit; transition:color .2s ease, border-color .2s ease;
}
.em-tab-label { font-family:var(--font-display); font-size:18px; letter-spacing:-.014em; }
.em-tab-note { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.em-tab[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--accent); }
.em-tab[aria-selected="true"] .em-tab-note { color:var(--accent); }
.em-tab:hover { color:var(--ink); }
.em-tab:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

html.js .em-panel[data-inactive] { display:none; }
html.js .em-panel { animation:panel-in .4s cubic-bezier(.22,.8,.26,1); }
.em-panel:focus { outline:none; }
.em-track-line { font-family:var(--font-display); font-size:clamp(20px,3vw,26px); letter-spacing:-.018em; margin:0 0 10px; }
.em-track-body { color:var(--ink-soft); font-size:15.5px; margin:0 0 26px; max-width:62ch; }

.em-card { background:var(--surface); border:1px solid var(--line); padding:clamp(20px,3vw,30px); }
.em-card-top { display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:space-between; align-items:baseline; }
.em-persona, .em-turn {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint);
}
.em-moment {
  font-family:var(--font-display); font-size:clamp(20px,3.2vw,29px); letter-spacing:-.02em;
  line-height:1.24; margin:14px 0 26px; padding-left:18px; border-left:2px solid var(--accent);
}
.em-prompt {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 12px;
}

.em-options { display:grid; gap:12px; }
.em-option { border:1px solid var(--line); background:var(--paper-alt); transition:border-color .22s ease, background .22s ease; }
.em-option[data-chosen] { border-color:var(--accent); background:var(--surface); }
.em-option-btn {
  display:grid; grid-template-columns:18px minmax(0,1fr); gap:12px; align-items:start; width:100%;
  text-align:left; background:none; border:none; cursor:pointer; color:inherit;
  font-family:inherit; font-size:16px; line-height:1.5; padding:16px 18px;
}
.em-option-btn:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.em-option-mark {
  width:14px; height:14px; border:1px solid var(--line-strong); border-radius:50%; margin-top:5px;
  transition:border-color .22s ease, box-shadow .22s ease;
}
.em-option[data-chosen] .em-option-mark { border-color:var(--accent); box-shadow:inset 0 0 0 3px var(--accent); }
.em-option-text { display:block; }

html.js .em-read[data-inactive] { display:none; }
.em-read { padding:0 18px 18px 48px; border-top:1px dashed var(--line); margin-top:0; padding-top:16px; }
.em-verdict {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 12px; color:var(--ink-soft);
}
.em-verdict[data-dir="up"] { color:var(--accent); }
.em-signals { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.em-signals li {
  display:flex; gap:8px; align-items:baseline; border:1px solid var(--line);
  padding:5px 10px; background:var(--paper-alt);
}
.em-signals li[data-dir="up"] { border-color:var(--accent); }
.em-signal-k { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.em-signal-v { font-family:var(--font-mono); font-size:12px; color:var(--ink); font-variant-numeric:tabular-nums; }
.em-signals li[data-dir="up"] .em-signal-v { color:var(--accent); }
.em-read-body { font-size:15px; color:var(--ink-soft); margin:0; max-width:56ch; }

.em-replay { margin:18px 0 0; }
.em-replay-btn {
  display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-faint); padding:8px 0; transition:color .2s ease;
}
.em-replay-btn:hover { color:var(--accent); }
.em-replay-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
html:not(.js) .em-replay { display:none; }

.em-illustration { font-size:13px; color:var(--ink-faint); margin:18px 0 0; max-width:62ch; }

.em-loop { border-top:1px solid var(--line); margin-bottom:28px; }
.em-loop-step {
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:3px 14px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.em-loop-n { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--accent); padding-top:3px; }
.em-loop-title { font-family:var(--font-display); font-size:17px; letter-spacing:-.012em; }
.em-loop-body { grid-column:2 / -1; font-size:14px; color:var(--ink-soft); }

.em-packs { border-top:1px solid var(--line); margin-bottom:26px; }
.em-pack {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.em-pack-state {
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  border:1px solid var(--line-strong); color:var(--ink-faint); padding:3px 7px; align-self:start;
}
.em-pack[data-state="live"] .em-pack-state { border-color:var(--accent); color:var(--accent); }
.em-pack-name { font-family:var(--font-display); font-size:17px; letter-spacing:-.012em; }
.em-pack-body { grid-column:2 / -1; font-size:13.5px; color:var(--ink-soft); }

.em-honesty { font-size:14px; color:var(--ink-faint); border-left:2px solid var(--accent); padding-left:16px; margin-bottom:26px; }
.em-ctas { display:flex; flex-wrap:wrap; gap:12px; }

/* ═══ Bring an idea ═══════════════════════════════════════════════════════
   Every starting point is a real mailto, so this block works with scripting
   switched off and there is nothing here to submit to. */
.section-idea { background:var(--surface); border-block:1px solid var(--line); }
.idea-top { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(26px,4vw,64px); align-items:start; }
@media (max-width:900px) { .idea-top { grid-template-columns:minmax(0,1fr); } }

.idea-quote { margin:0; background:var(--paper-alt); border:1px solid var(--line); padding:clamp(22px,3vw,34px); }
.idea-quote blockquote { margin:0; }
.idea-quote-head { font-family:var(--font-display); font-size:clamp(22px,3.4vw,30px); letter-spacing:-.02em; margin:0 0 4px; }
.idea-quote-sub { font-family:var(--font-display); font-size:clamp(18px,2.6vw,23px); letter-spacing:-.016em; color:var(--ink-mid); margin:0 0 20px; }
.idea-quote-body { font-size:15.5px; color:var(--ink-soft); margin:0 0 20px; padding-top:20px; border-top:1px solid var(--line); }
.idea-quote-q { font-size:16px; color:var(--ink); margin:0; padding-top:20px; border-top:1px solid var(--line); font-weight:500; }

.idea-lead h2 { font-size:clamp(28px,4.6vw,46px); letter-spacing:-.026em; }
.idea-steps { margin:30px 0 0; border-top:1px solid var(--line); }
.idea-steps li { display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.idea-step-n { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--accent); padding-top:4px; }
.idea-step-body { font-size:15.5px; color:var(--ink-soft); }
.idea-cta { margin:28px 0 0; }

.idea-starts { margin-top:clamp(40px,5vw,66px); }
.idea-starts-h {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:400; margin-bottom:18px;
}
/* Five cells, so auto-fit is wrong: at four columns it strands the fifth alone
   in its own row. Fixed tracks instead, with the last cells widened to fill the
   short row — 3 + 2 on desktop, 2 + 2 + 1 (full width) on tablet. */
.idea-grid { grid-template-columns:minmax(0,1fr); }
@media (min-width:640px) {
  .idea-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .idea-cell:nth-child(5) { grid-column:span 2; }
}
@media (min-width:1020px) {
  .idea-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .idea-cell { grid-column:span 2; }
  .idea-cell:nth-child(4), .idea-cell:nth-child(5) { grid-column:span 3; }
}
.idea-cell { display:flex; }
.idea-start {
  display:flex; flex-direction:column; gap:10px; width:100%; text-decoration:none;
  padding:clamp(20px,2.6vw,28px); transition:background .22s ease;
}
.idea-start:hover, .idea-start:focus-visible { background:var(--card-hover); }
.idea-start:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.idea-start-title { font-family:var(--font-display); font-size:19px; letter-spacing:-.016em; }
.idea-start-body { font-size:14.5px; color:var(--ink-soft); }
.idea-start-next { font-size:14px; color:var(--ink-mid); padding-top:12px; border-top:1px solid var(--line); margin-top:auto; }
.idea-start-go {
  display:inline-flex; align-items:center; gap:7px; margin-top:4px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent); opacity:0; transform:translateX(-4px); transition:opacity .22s ease, transform .22s ease;
}
.idea-start:hover .idea-start-go, .idea-start:focus-visible .idea-start-go { opacity:1; transform:none; }
@media (hover:none) { .idea-start-go { opacity:1; transform:none; } }
.idea-honesty { margin:clamp(30px,4vw,44px) 0 0; font-size:14px; color:var(--ink-faint); border-left:2px solid var(--accent); padding-left:16px; max-width:76ch; }

/* ═══ Social ══════════════════════════════════════════════════════════════
   Only the profiles in src/data/social.js render. No greyed-out icons for
   platforms he is not on. */
.section-social { background:var(--paper-alt); }
.social-grid { grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr)); }
.social-cell { display:flex; }
.social-card {
  display:flex; flex-direction:column; gap:8px; width:100%; text-decoration:none;
  padding:clamp(20px,2.6vw,28px); background:var(--surface); transition:background .22s ease, color .22s ease;
}
.social-card:hover, .social-card:focus-visible { background:var(--card-hover); }
.social-card:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.social-icon { color:var(--ink-faint); transition:color .22s ease; }
.social-card:hover .social-icon, .social-card:focus-visible .social-icon { color:var(--accent); }
.social-platform { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.social-handle { font-family:var(--font-display); font-size:19px; letter-spacing:-.016em; overflow-wrap:anywhere; }
.social-note { font-size:14px; color:var(--ink-soft); }

@media (prefers-reduced-motion:reduce) {
  html.js .em-panel { animation:none; }
  .idea-start-go { transition:none; }
}

/* ═══ Language switch ═════════════════════════════════════════════════════
   Two real pages, not a widget: each option is a link to the same route in the
   other language, so it works with scripting off and can be bookmarked. */
.lang-switch { display:flex; align-items:center; gap:2px; margin-left:4px; }
.lang-opt {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.09em;
  padding:8px 8px; text-decoration:none; color:var(--ink-faint);
  border:1px solid transparent; transition:color .2s ease, border-color .2s ease;
}
.lang-opt[aria-current="true"] { color:var(--ink); border-color:var(--line-strong); }
a.lang-opt:hover, a.lang-opt:focus-visible { color:var(--accent); border-color:var(--accent); }
a.lang-opt:focus-visible { outline:none; }
@media (max-width:900px) {
  /* In the open mobile drawer the switch is a row of its own, above the fold of
     the nav list, with tap targets that clear 24px. */
  .lang-switch { margin:8px 0 0; padding-top:12px; border-top:1px solid var(--line); }
  .lang-opt { padding:10px 14px; font-size:13px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POSTER LAYER
   ───────────────────────────────────────────────────────────────────────────
   The studio register: one heavy grotesk, set uppercase and tight for the
   things that are titles, and a card system that behaves like printed paper —
   it has an edge, it casts a shadow, and it lifts under the pointer.

   This layer comes last on purpose. Everything above it still describes the
   structure; this decides how it looks, so the direction can be changed or
   reverted by editing one block rather than forty rules.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The masthead ─────────────────────────────────────────────────────────
   The name in the accent, the statement in ink, one sentence across two
   weights — and the year behind it as a ghost numeral. */
.hero-identity { position:relative; }
.hero-name {
  display:flex; flex-direction:column; max-width:none;
  font-size:clamp(34px,5.6vw,76px); line-height:.94; letter-spacing:-.035em;
  text-transform:uppercase; font-weight:800; margin:0 0 20px;
}
.hero-brand { color:var(--accent); }
.hero-since { color:var(--ink); }
@media (max-width:520px) { .hero-name { font-size:clamp(29px,8.4vw,44px); } }

/* The ghost sits behind the type and drifts a little as the page moves, which
   is the only parallax on the site — enough to feel alive, not enough to
   distract. Pointer events off so it can never intercept a click. */
/* Anchored to the top of the identity block, not to the section, so it can
   never climb behind the sticky header — and the hero clips it either way. */
.hero-ghost {
  position:absolute; left:-.05em; top:0; z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:800; font-size:clamp(150px,25vw,340px);
  line-height:.8; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px rgba(28,27,24,.085);
  transform:translate3d(0, var(--ghost-y, 0px), 0);
  will-change:transform;
}
.hero-identity > *:not(.hero-ghost) { position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce) { .hero-ghost { transform:none; } }

.hero-line {
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(18px,2.1vw,25px); line-height:1.24; letter-spacing:-.018em;
  color:var(--ink-mid); max-width:22ch;
}

/* ── Titles ───────────────────────────────────────────────────────────────
   Uppercase is for things that are NAMES — a company, a project, a product.
   Section headlines stay sentence case: a three-line uppercase sentence in
   Russian shouts, and this design is quiet. */
.section-head h2, .thesis-lead h2, .sel-head h2, .idea-lead h2,
.lab-head h2, .sc-head h2, .em-head h2, .page-hero h1, .why-in h2, .sc-join h2 {
  font-weight:750; letter-spacing:-.03em; line-height:1.04;
}
.page-hero h1 { font-size:clamp(32px,5.4vw,62px); }

.company-name, .sel-name, .now-title, .project-address,
.em-name, .sc-name, .social-handle, .idea-start-title {
  text-transform:uppercase; font-weight:750; letter-spacing:-.018em;
}
.em-name, .sc-name { letter-spacing:-.035em; font-weight:800; }
.hero-brand, .hero-since { font-weight:800; }

/* ── Poster cards ─────────────────────────────────────────────────────────
   Paper with an edge and a shadow. The lift on hover is the whole "dynamic"
   brief: nothing moves until you point at it, and then it answers. */
.company-card, .social-card, .idea-start, .em-card, .idea-quote {
  background:var(--surface); box-shadow:var(--lift);
  transition:box-shadow .3s cubic-bezier(.22,.8,.26,1), transform .3s cubic-bezier(.22,.8,.26,1);
}
a.company-card:hover, .social-card:hover, .social-card:focus-visible,
.idea-start:hover, .idea-start:focus-visible {
  box-shadow:var(--lift-hi); transform:translateY(-3px);
}
a.company-card:hover { background:var(--surface); border-color:var(--accent); }

/* A hairline grid and a shadow fight each other — the shadow falls on the rule
   of the cell below it. Where cells are posters, drop the grid's own rules and
   let the gap do the separating. */
.social-grid, .idea-grid {
  border:0; gap:clamp(12px,1.6vw,20px);
  grid-auto-rows:1fr;
}
.social-grid > *, .idea-grid > * { border:0; }
.social-cell, .idea-cell { display:flex; }

/* ── The project index as a set of posters ────────────────────────────────
   The frame keeps its shadow; the index rows get the accent bullet the
   reference uses on its meta rows. */
.sel-frame { box-shadow:var(--lift); }
.sel-shot { border:0; }
.sel-meta > span[aria-hidden="true"] { color:var(--accent); }
.sel-name { font-size:clamp(15px,1.7vw,19px); }

/* ── Meta rows ────────────────────────────────────────────────────────────
   Small mono, wide tracking, an accent dot between values. Used anywhere a
   line of facts sits under a title. */
.company-category, .em-pack-state, .sel-kind, .sel-frame-kind {
  font-weight:500;
}

/* ── Kickers ──────────────────────────────────────────────────────────────
   A rule before the label, the way a studio marks a section. */
.kicker { display:inline-flex; align-items:center; gap:10px; }
.kicker::before {
  content:""; width:22px; height:1px; background:var(--accent); flex:none;
}

/* ── The marquee reads as a masthead now, not as a serif flourish. ──────── */
/* Uppercase carries more weight than the serif did, so the band comes down a
   size and the stroke comes down with it — it is a texture, not a headline. */
.marquee-track span {
  font-weight:800; text-transform:uppercase; letter-spacing:-.025em;
  font-size:clamp(24px,4.2vw,58px);
  -webkit-text-stroke:1px rgba(28,27,24,.13);
}

@media (prefers-reduced-motion:reduce) {
  .company-card, .social-card, .idea-start, .now-sheet > a { transition:none; }
  a.company-card:hover, .social-card:hover, .idea-start:hover { transform:none; }
  /* The lean stays — it is a static posture, not motion. The lift does not. */
  .now-sheet > a:hover, .now-sheet > a:focus-visible { transform:rotate(var(--lean,0deg)); }
}

/* Between the drawer and the full width the row is tight; close the gaps up
   rather than shrink anything inside them. */
@media (min-width:1080px) and (max-width:1279px) { .site-nav { gap:18px; } }

/* `.nav-cta` declares padding:9px 16px, but `.site-nav a` is one class more
   specific and says `padding:6px 0` — so the boxed control has had NO
   horizontal padding since it was written, and its text has been sitting on
   its own border. The serif was narrow enough to hide it; the grotesk is not.
   Match the specificity rather than reaching for !important. */
.site-nav a.nav-cta { padding:9px 16px; white-space:nowrap; }
.site-nav a, .lang-switch, .lang-opt { flex:none; }

/* The ghost sits a touch lower and a touch stronger — behind the statement
   rather than crowding the name, and visible enough to read as a device. */
.hero-ghost { top:.06em; -webkit-text-stroke-color:rgba(28,27,24,.1); }

/* ── The Measured Decision film ───────────────────────────────────────────
   The payoff of the evidence sequence: the argument is made over a real
   construction photograph, and then the company that does it gets to speak.
   Click-to-play with a poster, never autoplay — there is a presenter talking,
   and a page that starts talking at you is a page people close. */
/* `max-width:62ch` was set on this block when it was a single column of text.
   It is a grid now, so that measure was squeezing BOTH columns into 62ch and
   the film came out 290px wide. A line measure belongs on the lines. */
.ev-reveal {
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,3.4vw,54px); align-items:start; max-width:none;
}
@media (max-width:900px) { .ev-reveal { grid-template-columns:minmax(0,1fr); } }
.ev-reveal-body { max-width:58ch; }
/* "Measured Decision AI" filled its column to within 2px at 1440 — enough to
   wrap into two lines on any machine whose grotesk sets a hair wider. Size it
   to the column it actually has, not to the page. */
.ev-reveal h3 { font-size:clamp(27px,3.4vw,44px); }

.ev-film { margin:0; }
.ev-film-player {
  display:block; width:100%; height:auto; aspect-ratio:16 / 9;
  background:var(--ink); border:1px solid var(--line); box-shadow:var(--lift);
}
.ev-film-fallback { padding:24px; color:var(--paper); font-size:15px; }
.ev-film-fallback a { color:var(--paper); }
.ev-film-caption {
  display:grid; gap:3px; padding-top:12px; margin-top:12px; border-top:1px solid var(--line);
}
.ev-film-title { font-family:var(--font-display); font-weight:750; font-size:clamp(15px,1.7vw,18px); letter-spacing:-.014em; }
.ev-film-line { font-size:13.5px; color:var(--ink-soft); }
.ev-film-credit {
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent); margin-top:2px;
}
.ev-reveal-body p:last-of-type { margin-bottom:0; }

/* ── Density on narrow screens ────────────────────────────────────────────
   "Bring an idea" and EMIADA were 44% of the phone page between them, not
   because either says too much but because every card carried desktop padding
   down a 358px column. Nothing here removes content; it stops six stacked
   blocks each reserving 28px of air on all four sides. */
@media (max-width:640px) {
  .idea-start { padding:18px 16px; gap:7px; }
  .idea-start-title { font-size:17px; }
  .idea-start-body, .idea-start-next { font-size:13.5px; }
  .idea-start-next { padding-top:9px; }
  .idea-steps li { padding:10px 0; }
  .idea-quote { padding:20px 18px; }
  .idea-quote-body, .idea-quote-q { padding-top:14px; margin-bottom:14px; }
  .idea-starts { margin-top:30px; }

  .em-card { padding:18px 16px; }
  .em-option-btn { padding:13px 14px; font-size:15px; }
  .em-read { padding:13px 16px 14px 42px; }
  .em-loop-step, .em-pack { padding:11px 0; }
  .em-loop, .em-packs { margin-bottom:20px; }
  .em-track-body { margin-bottom:20px; }
  .em-moment { margin:12px 0 20px; }

  .social-card { padding:18px 16px; }
  .now-sheet > a { padding:18px 16px; }
}

/* ── The light across the paper ───────────────────────────────────────────
   In the reference the shadow is not on each card separately — it is one
   broad diagonal band falling across the whole group, the way daylight from a
   window falls across sheets laid out on a table. So it is painted on the
   SECTION, over everything in it, and multiplied into what is underneath
   rather than laid on top as a grey film.

   The darkest stop is 6%. That is deliberate: it has to read as light, not as
   a scrim over the text. On #1C1B18 ink over #FFFFFF paper the contrast ratio
   goes from about 17:1 to about 15:1 — still far past what anything requires.

   `isolation` keeps the multiply inside the section instead of blending into
   whatever is behind it, and the layer never takes a pointer event. */
.section-now, .section-social, .section-idea, .section-portfolio {
  position:relative; isolation:isolate;
}
.section-now::after, .section-social::after,
.section-idea::after, .section-portfolio::after {
  content:""; position:absolute; inset:0; z-index:3;
  pointer-events:none; mix-blend-mode:multiply;
  background:linear-gradient(112deg,
    rgba(28,27,24,0)    0%,
    rgba(28,27,24,0)    9%,
    rgba(28,27,24,.060) 23%,
    rgba(28,27,24,.022) 37%,
    rgba(28,27,24,0)    47%,
    rgba(28,27,24,0)    61%,
    rgba(28,27,24,.048) 74%,
    rgba(28,27,24,.014) 86%,
    rgba(28,27,24,0)    96%);
}

/* On a phone the band would cross a single column of stacked cards at almost
   a right angle and read as a smudge rather than as light. Flatten the angle
   and halve it. */
@media (max-width:860px) {
  .section-now::after, .section-social::after,
  .section-idea::after, .section-portfolio::after {
    background:linear-gradient(165deg,
      rgba(28,27,24,0)    0%,
      rgba(28,27,24,.030) 26%,
      rgba(28,27,24,0)    48%,
      rgba(28,27,24,.024) 72%,
      rgba(28,27,24,0)    92%);
  }
}

/* Under a forced-colors or high-contrast setting the wash is exactly the kind
   of decoration that must not survive. */
@media (forced-colors: active) {
  .section-now::after, .section-social::after,
  .section-idea::after, .section-portfolio::after { display:none; }
}

/* White sheets on near-white paper have no edge to read. The surface under the
   wall steps down to the deepest paper tone so the sheets sit ON something —
   without that the overlap is invisible and six cards look like a table. */
.section-now { background:var(--paper-deep); }

/* ═══════════════════════════════════════════════════════════════════════════
   SHEETS, EVERYWHERE
   ───────────────────────────────────────────────────────────────────────────
   One treatment for every card surface on the site: white paper, no outline,
   a shadow that falls down and to the right from the same upper-left light,
   and a lift when it is pointed at. Paper has no outline — its shadow is its
   edge. Six outlined rectangles read as a table; six shadowed ones read as
   sheets on a desk.

   The LEAN is deliberately not part of this. It belongs to a small wall of six
   in "Currently building"; twenty-one company cards all leaning would be
   noise, not craft.
   ═══════════════════════════════════════════════════════════════════════════ */
.company-card,
.cap-card,
.cred-card,
.contact-card,
.opp,
.social-card,
.idea-start,
.idea-quote,
.em-card,
.discipline-list li,
.principle-steps li {
  background:var(--surface); border:0; border-radius:0;
  box-shadow:var(--lift);
  transition:box-shadow .3s cubic-bezier(.22,.8,.26,1), transform .3s cubic-bezier(.22,.8,.26,1);
}

/* Only the ones that are actually a link or a control lift. A credential card
   is paper you read, not paper you press. */
a.company-card:hover, a.company-card:focus-visible,
.social-card:hover, .social-card:focus-visible,
.idea-start:hover, .idea-start:focus-visible,
.contact-card:hover, .contact-card:focus-visible {
  box-shadow:var(--lift-hi); transform:translateY(-4px);
}

/* A hairline grid draws rules on its cells. A sheet casts a shadow onto the
   cell below it. Both at once is a shadow landing on a line, so wherever the
   cells became sheets the rules come off and a gap does the separating. */
.cap-grid, .discipline-list, .principle-steps, .idea-grid, .social-grid {
  border:0; gap:clamp(12px,1.6vw,18px);
}
.cap-grid > *, .discipline-list > *, .principle-steps > *,
.idea-grid > *, .social-grid > * { border:0; }

.contact-cards { gap:clamp(12px,1.6vw,18px); }
.opp-list { display:grid; gap:clamp(12px,1.6vw,18px); }
.opp { border:0; padding:clamp(20px,2.2vw,28px); }
.cap-card, .cred-card { padding:clamp(20px,2.2vw,28px); }
.contact-card { padding:20px 22px; }
.discipline-list li { padding:18px 20px; }
.principle-steps li { padding:clamp(20px,2.2vw,28px); }

/* ── The same light over every wall of sheets ─────────────────────────────
   Declared once, for every section that now holds paper. */
.section-now, .section-social, .section-idea, .section-portfolio,
.section-capabilities, .section-credentials, .section-disciplines,
.section-stack, .section-principle, .section-opp-group, .section-contact {
  position:relative; isolation:isolate;
}
.section-now::after, .section-social::after, .section-idea::after,
.section-portfolio::after, .section-capabilities::after, .section-credentials::after,
.section-disciplines::after, .section-stack::after, .section-principle::after,
.section-opp-group::after, .section-contact::after {
  content:""; position:absolute; inset:0; z-index:3;
  pointer-events:none; mix-blend-mode:multiply;
  background:linear-gradient(112deg,
    rgba(28,27,24,0)    0%,
    rgba(28,27,24,0)    9%,
    rgba(28,27,24,.060) 23%,
    rgba(28,27,24,.022) 37%,
    rgba(28,27,24,0)    47%,
    rgba(28,27,24,0)    61%,
    rgba(28,27,24,.048) 74%,
    rgba(28,27,24,.014) 86%,
    rgba(28,27,24,0)    96%);
}
@media (max-width:860px) {
  .section-now::after, .section-social::after, .section-idea::after,
  .section-portfolio::after, .section-capabilities::after, .section-credentials::after,
  .section-disciplines::after, .section-stack::after, .section-principle::after,
  .section-opp-group::after, .section-contact::after {
    background:linear-gradient(165deg,
      rgba(28,27,24,0)    0%,
      rgba(28,27,24,.030) 26%,
      rgba(28,27,24,0)    48%,
      rgba(28,27,24,.024) 72%,
      rgba(28,27,24,0)    92%);
  }
}
@media (forced-colors: active) {
  .section-now::after, .section-social::after, .section-idea::after,
  .section-portfolio::after, .section-capabilities::after, .section-credentials::after,
  .section-disciplines::after, .section-stack::after, .section-principle::after,
  .section-opp-group::after, .section-contact::after { display:none; }
}

/* Sheets need a surface to lie on. Every section that holds them steps down
   off white, or white paper on white paper has no edge at all. */
.section-portfolio, .section-capabilities, .section-credentials,
.section-disciplines, .section-stack, .section-opp-group, .section-social {
  background:var(--paper-alt);
}
.section-now, .section-contact { background:var(--paper-deep); }
.section-idea, .section-principle { background:var(--paper-alt); }
.section-opp-group.is-alt { background:var(--paper-deep); }

@media (prefers-reduced-motion:reduce) {
  a.company-card:hover, .social-card:hover, .idea-start:hover, .contact-card:hover { transform:none; }
}

/* ── Targets ──────────────────────────────────────────────────────────────
   These were two pixels short on desktop and had been since they were
   written; the phone rules already covered them, which is why it never
   showed up. The language switch was the worst — "RU" carries no border, so
   it measured 19px wide against "EN"'s bordered box. */
.site-nav a { padding-block:7px; }
.lang-opt { min-width:30px; text-align:center; }
.lic-meta a, .foot-nav a { display:inline-block; padding-block:2px; }