/* NodeVSP site. Tokens are the brand's (brand/app.css, itself a snapshot of the
   survey's live app.css); copied here because site/ deploys on its own. */
/* Type: Archivo Expanded for display, Inter for reading, IBM Plex Mono for technical
   labels and data. Latin subsets served from assets/fonts (OFL licences beside them). */
@font-face { font-family: 'Archivo'; src: url(assets/fonts/archivo-latin.woff2) format('woff2'); font-weight: 600 800; font-stretch: 100% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(assets/fonts/inter-latin.woff2) format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(assets/fonts/plexmono-400-latin.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(assets/fonts/plexmono-500-latin.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
:root {
  --bg: #151515;
  --bg-2: #1a1a1a;
  --bg-3: #212121;
  --text: #ececec;
  --sub: #a3a3a3;
  --dim: #858585;
  --rule: #2e2e2e;
  --rule-strong: #3a3a3a;
  --accent: #E8501F;
  --accent-alt: #B8391A;
  --accent-hover: #f2622f;
  --accent-soft: #f0916c;
  --ink-on-accent: #151515;
  --model: #9fb4c8;          /* NodeVSP's default surface colour, read by viewer.js */
  --font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
/* Light theme: the survey's live :root.light values, same class, same toggle. */
:root.light {
  --bg: #fafafa;
  --bg-2: #ffffff;
  --bg-3: #f0f0f0;
  --text: #151515;
  --sub: #4b4b4b;
  --dim: #6b6b6b;
  --rule: #e5e5e5;
  --rule-strong: #d4d4d4;
  --accent: #C43D14;
  --accent-alt: #8f2d10;
  --accent-hover: #a93410;
  --accent-soft: #C43D14;
  --ink-on-accent: #ffffff;
  --model: #7f95aa;          /* the same blue-grey, one step darker so it holds on a light ground */
  color-scheme: light;
}

/* Language: both languages ship in the markup; the root lang hides the other. */
html[lang="es"] [lang="en"], html[lang="en"] [lang="es"] { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--rule-strong) var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--ink-on-accent); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 10px; border: 2px solid var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--accent-soft); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--text); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-stretch: 112%; text-wrap: balance; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 50; background: var(--accent); color: var(--ink-on-accent); padding: 8px 14px; border-radius: 6px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 28px;
  height: 64px; padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.brand span { font-family: var(--font-display); font-size: .8rem; font-weight: 800; font-stretch: 125%; letter-spacing: .1em; }
.nav-links { display: flex; gap: 22px; margin-left: 8px; }
.nav-links a { color: var(--sub); text-decoration: none; font-size: .92rem; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lang {
  min-height: 36px; padding: 0 12px;
  background: transparent; color: var(--sub);
  border: 1px solid var(--rule-strong); border-radius: 999px;
  font: 600 .8rem/1 var(--font-body); letter-spacing: .04em; cursor: pointer;
}
.lang:hover { color: var(--text); border-color: var(--dim); }
.theme {
  width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  background: transparent; color: var(--sub); cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: 50%;
}
.theme:hover { color: var(--text); border-color: var(--dim); }
.theme svg { width: 18px; height: 18px; }
@media (max-width: 440px) { .nav .brand span { display: none; } }
@media (max-width: 760px) {
  .nav { gap: 12px; }
  .nav-links { display: none; }
  .nav .lang { padding: 0 10px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid var(--rule-strong);
  color: var(--text); text-decoration: none;
  font-weight: 600; font-size: .98rem;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { border-color: var(--dim); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--ink-on-accent); }
.btn.sm { min-height: 36px; padding: 0 16px; font-size: .85rem; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(40px, 8vh, 96px) var(--gutter) clamp(56px, 9vh, 112px);
  background:
    radial-gradient(ellipse 1100px 560px at 62% -14%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 64%),
    var(--bg);
}
.hero-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-art { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hero-art .prompt { max-width: 560px; }

/* The prompt line: an example of what someone types to the agent. */
.prompt {
  display: grid;
  padding: 18px 20px 16px;
  background: var(--bg-2); border: 1px solid var(--rule-strong); border-radius: 14px;
}
.prompt-label { font-family: var(--font-mono); font-size: .75rem; color: var(--dim); letter-spacing: .02em; }
.prompt-msg {
  margin-top: 8px;
  color: var(--text); font-size: 1.02rem; line-height: 1.5;
}
.prompt-msg::after {
  content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 3px;
  vertical-align: -.15em; background: var(--accent);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.hero h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.7rem); font-weight: 800; font-stretch: 118%; line-height: 1.04; letter-spacing: -.02em;
}
/* "aeronave": the word that turns through the kinds (site.js), in the accent. Rotorcraft
   add a "próximamente" pill after it. */
/* Its own line, so every kind gives the headline the same height. */
.kind-w { display: table; white-space: nowrap; }
.kind { display: inline-block; color: var(--accent-soft); }
.kind.is-typing::after {
  content: ""; display: inline-block; width: .07em; height: .82em; margin-left: .04em;
  vertical-align: -.04em; background: currentColor;
}
.soon {
  display: inline-block; vertical-align: .55em; margin-left: .5em; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--rule-strong); color: var(--sub);
  font: 500 .8rem/1 var(--font-mono); letter-spacing: .02em;
}
.soon[hidden] { display: none; }
/* Small phones: word + pill would widen the column, so the pill takes its own line. */
@media (max-width: 389px) { .kind-w { white-space: normal; } .soon { display: block; width: fit-content; margin: .3em 0 .2em; } }
.stage.is-swapping canvas { opacity: .35; transition-duration: .2s; }
.hero .lead { color: var(--sub); font-size: 1.08rem; max-width: 46ch; }
.hero .eyebrow { margin-bottom: -12px; color: var(--accent-soft); font-family: var(--font-mono); font-size: .82rem; font-weight: 500; letter-spacing: .02em; }
.hero-note { margin-top: -14px; color: var(--dim); font-size: .88rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero-actions .text-link, .lab-side .text-link { color: var(--sub); font-size: .95rem; }
.hero-actions .text-link:hover, .lab-side .text-link:hover { color: var(--text); }

/* ---------- 3D stage ---------- */
.stage {
  position: relative; margin: 0;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
}
.stage::before {
  /* the floor the model stands over: node grid, fading out */
  content: ""; position: absolute; inset: 6% 0 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 16%, transparent) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 55%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 55%, #000 30%, transparent 75%);
}
.stage canvas { position: relative; width: 100%; height: 100%; opacity: 0; transition: opacity .8s var(--ease); cursor: grab; }
.stage canvas:active { cursor: grabbing; }
.stage.is-ready canvas { opacity: 1; }
.stage-msg { position: absolute; color: var(--dim); font-size: .9rem; }
.stage-error, .stage.is-ready .stage-loading, .stage.is-failed .stage-loading, .stage.is-still .stage-loading { display: none; }
/* touch screens: a still render until the visitor asks for the live model */
.stage-still, .stage-3d { display: none; }
.stage.is-still .stage-still { display: block; position: absolute; inset: 0; background: url(assets/model-still-dark.webp) center / contain no-repeat; }
:root.light .stage.is-still .stage-still { background-image: url(assets/model-still-light.webp); }
.stage.is-still:not(.is-loading) .stage-3d {
  display: inline-flex; align-items: center; position: absolute; right: 0; bottom: 0; min-height: 44px; padding: 0 16px;
  background: var(--bg-3); color: var(--text); border: 1px solid var(--rule-strong); border-radius: 999px;
  font: 600 .85rem/1 var(--font-body); cursor: pointer;
}
.stage.is-loading .stage-still { opacity: .55; transition: opacity .3s var(--ease); }
.stage.is-failed .stage-error { display: block; }
@media (pointer: coarse) { .drag-hint { display: none; } .stage canvas { cursor: auto; } }
@media (prefers-reduced-motion: reduce) { .prompt-msg::after { animation: none; } }
.slot-tag {
  position: absolute; left: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--rule-strong);
  color: var(--sub); font-family: var(--font-mono); font-size: .75rem;
}
.slot-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .stage { aspect-ratio: 4 / 3; }
}

/* ---------- sections ---------- */
.section { padding: clamp(72px, 12vh, 140px) var(--gutter); }
.section.has-video { padding-bottom: calc(clamp(72px, 12vh, 140px) + 48px); }
.wrap { max-width: var(--max); margin: 0 auto; }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vh, 72px); }
.section-head h2 { font-size: clamp(1.8rem, 3.3vw, 2.7rem); line-height: 1.08; letter-spacing: -.015em; }
.section-head p { margin-top: 18px; color: var(--sub); font-size: 1.08rem; max-width: 60ch; }

/* ---------- pipeline: one orange connector, a node per stage ---------- */
.pipeline { position: relative; list-style: none; margin: 0; padding: 0; }
.pipeline::before {
  content: ""; position: absolute; left: 11px; top: 14px; bottom: calc(-1 * clamp(72px, 12vh, 140px)); width: 3px; border-radius: 3px 3px 0 0;
  background: var(--accent-alt);
  transform-origin: top;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pipeline::before { animation: spine linear both; animation-timeline: view(); animation-range: entry 20% cover 70%; }
    @keyframes spine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}
.stage-row {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px); align-items: start;
  padding: 0 0 clamp(56px, 9vh, 104px) 64px;
}
.stage-row:last-child { padding-bottom: 0; }
.stage-row::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--bg);
}
.stage-row h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.18; letter-spacing: -.01em; }
.stage-row .body { display: flex; flex-direction: column; gap: 14px; }
.stage-row .body p { color: var(--sub); max-width: 48ch; }
.stage-row .body p strong { color: var(--text); font-weight: 600; }
@media (max-width: 900px) {
  .stage-row { grid-template-columns: 1fr; padding-left: 48px; }
  .stage-row::before { width: 21px; height: 21px; }
  .pipeline::before { left: 9px; }
}

.quote {
  margin: 0; padding: 26px 28px;
  background: var(--bg-2); border: 1px solid var(--rule-strong); border-radius: 14px;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.4; letter-spacing: -.01em;
}
.quote.small { font-size: 1rem; line-height: 1.6; letter-spacing: 0; }
.said { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.said figcaption { color: var(--dim); font-size: .85rem; }
.said .more { display: none; }
/* Phones: the full description is a wall of text; show six lines until asked. */
@media (max-width: 900px) {
  .said:not(.is-open) .quote.small > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
  .said:not(.is-open) .more {
    display: inline-flex; align-self: flex-start; min-height: 44px; align-items: center; padding: 0;
    background: none; border: 0; color: var(--accent-soft); font: 600 .92rem/1 var(--font-body);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }
}
.quote > span::before { content: "“"; color: var(--accent); }
.quote > span::after { content: "”"; color: var(--accent); }

/* the components the agent can place: nodes on a short connector */
.parts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.parts li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 12px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--rule-strong);
  font-size: .93rem;
}
.parts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.facts div { padding: 16px 16px 0 0; }
.facts b { display: block; font-family: var(--font-mono); font-size: 1rem; font-weight: 500; letter-spacing: .01em; }
.facts span { color: var(--dim); font-size: .85rem; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .facts div { padding: 12px 0; border-bottom: 1px solid var(--rule); } }

/* ---------- background videos: real screen recordings behind a section ----------
   The video is pinned to the viewport while its section scrolls past (sticky
   inside an absolute layer), so a tall section never crops it to a sliver. The
   scrim darkens it where the text sits and fades it into the neighbours. */
.has-video { position: relative; isolation: isolate; overflow: clip; }
.bg-video {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.has-video.is-in .bg-video { opacity: 1; }
/* Light theme: the recordings and the lab screenshot are dark app screens. They stay
   true to the app (no inversion), just faint, so dark text keeps its contrast over them. */
:root.light .bg-video video { opacity: .2; }
:root.light .lab-bg { opacity: .16; }
.bg-video video {
  /* right-aligned, so the recording's 3D viewport sits beside the text, not under it */
  position: sticky; top: 0; display: block;
  width: 72%; height: 100vh; margin-left: auto;
  object-fit: cover; object-position: 55% 50%;
  opacity: .7;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
}
/* Not sticky: parked at one end of the section, clear of where its text runs. */
.bg-video.at-top video { position: relative; }
.bg-video.at-bottom video { position: absolute; top: auto; right: 0; bottom: 0; }
.bg-video::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 38%, color-mix(in srgb, var(--bg) 20%, transparent) 70%, transparent 100%);
}
.bg-meta {
  position: absolute; right: var(--gutter); bottom: 24px; z-index: 1;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: .78rem; color: var(--dim); text-align: right;
}
.bg-meta b { color: var(--sub); font-weight: 500; }
/* the caption sits over moving footage: give it its own ground */
.bg-meta > span { padding: 5px 10px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 82%, transparent); }
.has-video.is-in .bg-meta { opacity: 1; visibility: visible; transition: opacity .6s var(--ease) .3s, visibility 0s; }
.bg-toggle {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--rule-strong); color: var(--sub);
}
.bg-toggle:hover { color: var(--text); border-color: var(--dim); }
.bg-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.bg-toggle .i-play, .bg-toggle.is-paused .i-pause { display: none; }
.bg-toggle.is-paused .i-play { display: block; }
@media (max-width: 900px) {
  .bg-video video { width: 100%; opacity: .4; object-position: 60% 50%; -webkit-mask-image: none; mask-image: none; }
  .bg-meta { left: var(--gutter); justify-content: space-between; text-align: left; }
}

/* ---------- the spine, continued: sections after the pipeline sit on the same line ---------- */
.on-line {
  position: relative;
  --line-x: calc(var(--gutter) + max(0px, (100% - 2 * var(--gutter) - var(--max)) / 2) + 11px);
  --ring: var(--bg);
}
.on-line::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--line-x); width: 3px;
  background: var(--accent-alt);
}
.on-line > .wrap { padding-left: 64px; }
/* the first section on the line: the connector starts at its heading's node, and grows with scroll */
.line-start::before { top: calc(clamp(72px, 12vh, 140px) + 14px); transform-origin: top; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .line-start::before { animation: spine linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  }
}
/* the pipeline on the shared line: its stages become nodes on it, no second connector */
.on-line .pipeline::before { display: none; }
.on-line .stage-row { padding-left: 0; }
.on-line .stage-row::before { left: -64px; box-shadow: 0 0 0 6px var(--ring); }
.node-h { position: relative; }
.node-h::before {
  content: ""; position: absolute; left: -64px; top: .12em;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 6px var(--ring);
}
@media (max-width: 900px) {
  .on-line { --line-x: calc(var(--gutter) + 9px); }
  .on-line > .wrap { padding-left: 48px; }
  .node-h::before { left: -48px; width: 21px; height: 21px; }
  .on-line .stage-row { padding-left: 0; }
  .on-line .stage-row::before { left: -48px; }
}

/* ---------- the modeler ---------- */
.modeler-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: center; min-height: 34vh; }
.motto { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.motto .quote { background: transparent; border: 0; padding: 0; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.3; letter-spacing: -.02em; font-weight: 600; }
.motto figcaption { color: var(--dim); font-size: .88rem; }
.tools { list-style: none; margin: clamp(40px, 6vh, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); border-top: 1px solid var(--rule-strong); }
.tools li { display: grid; grid-template-columns: 28px 1fr; gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid var(--rule-strong); }
.tools li::before { content: ""; grid-row: span 2; width: 13px; height: 13px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.tools b { font-size: 1.08rem; font-weight: 600; }
.tools span { color: var(--sub); font-size: .97rem; }
@media (max-width: 900px) { .modeler-grid, .tools { grid-template-columns: 1fr; } }

/* ---------- survey ---------- */
.survey {
  background:
    radial-gradient(ellipse 900px 520px at 20% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%),
    var(--bg);
}
.survey .bg-video video { height: 62vh; }
/* the recording is parked at the top of the band, so its caption and pause control sit there too,
   above the heading, instead of at the band's foot below the 60-minute panel */
.survey > .bg-meta { top: 20px; bottom: auto; }
.ask { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; }

/* words become parts: the example request beside the model it names, traced from the OBJ */
.words {
  margin: clamp(48px, 8vh, 96px) 0 0;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(24px, 4vw, 64px); align-items: center;
}
.words-text {
  font-size: clamp(1.35rem, 2.3vw, 1.95rem); line-height: 1.42; letter-spacing: -.015em; font-weight: 500;
  color: var(--sub); text-wrap: pretty;
}
.phrase {
  padding-bottom: .06em; border-radius: 2px; cursor: pointer;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: color .5s var(--ease), background-size .7s var(--ease);
}
.phrase.is-lit, .phrase:hover, .phrase:focus-visible { color: var(--text); }
.words-art { position: relative; }
.wire { width: 100%; height: auto; overflow: visible; }
.wire path { fill: none; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wire .base { stroke: color-mix(in srgb, var(--text) 26%, transparent); transition: stroke .4s var(--ease); }
/* the drawing in is anime.js (words.js), which owns the ink's dash attributes */
.wire .ink { stroke: var(--text); stroke-width: 1.8; transition: opacity .4s var(--ease); }
/* panel lines (cowling, canopy, flaps, ailerons, rudder, elevator): finer */
.wire .dt { stroke-width: 1; }
.wire .ink.dt { stroke: color-mix(in srgb, var(--text) 72%, transparent); stroke-width: 1.1; }
.wire [data-part="htail"] .ink { display: none; }   /* no phrase names the tail: it stays a base line */
.wire .node { fill: var(--accent); stroke: var(--bg); stroke-width: 5; paint-order: stroke; transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease), fill .4s var(--ease); }
.words figcaption { grid-column: 2; color: var(--dim); font-size: .85rem; }
/* Armed by site.js before the figure enters view: without the script, everything shows lit. */
.words.is-armed .phrase:not(.is-lit) { background-size: 0 2px; }
/* a phrase pointed at: its part stands out, the rest steps back */
.words.is-focus .part:not(.is-hot) .ink { opacity: .25; }
.words.is-focus .node:not(.is-hot) { fill: var(--rule-strong); }
.words .node.is-hot { transform: scale(1.35); }
.words .phrase.is-hot { color: var(--text); background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) {
  .phrase, .wire .ink, .wire .node { transition: none; }
}
@media (max-width: 900px) {
  .words { grid-template-columns: 1fr; }
  .words figcaption { grid-column: 1; }
}

.tasks-h { margin-top: clamp(56px, 9vh, 104px); margin-bottom: 18px; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.2; letter-spacing: -.01em; }
.tasks.row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin-bottom: 0; }
@media (max-width: 900px) { .tasks.row { grid-template-columns: 1fr; } }

/* follow and contact: after the two asks, the way to stay in touch */
.follow { margin-top: clamp(40px, 6vh, 64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.follow p { color: var(--sub); max-width: 46ch; }
.follow p b { color: var(--text); font-weight: 600; }
.follow ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.follow a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px;
  border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--bg-2);
  color: var(--text); text-decoration: none; font-size: .92rem; font-weight: 600;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.follow a:hover { border-color: var(--dim); background: var(--bg-3); }
.follow svg { width: 20px; height: 20px; stroke: var(--accent-soft); flex: none; }
.follow .handle { font-family: var(--font-mono); font-weight: 400; font-size: .82rem; color: var(--sub); }
.tasks { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--rule-strong); }
.tasks li { display: grid; grid-template-columns: 28px 1fr; gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid var(--rule-strong); }
.tasks li::before { content: ""; grid-row: span 2; width: 13px; height: 13px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.tasks b { font-size: 1.12rem; font-weight: 600; }
.tasks span { color: var(--sub); font-size: .97rem; }
.promise { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--sub); font-size: .9rem; }
.promise li { display: inline-flex; align-items: center; gap: 8px; }
.promise svg { width: 16px; height: 16px; stroke: var(--accent-soft); }
.lab {
  position: relative; isolation: isolate; overflow: clip;
  margin-top: clamp(48px, 8vh, 88px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--rule-strong); border-radius: 20px;
  background: var(--bg-2);
}
.lab-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  width: 62%; height: 100%; margin-left: auto;
  object-fit: cover; object-position: 60% 48%;
  opacity: .3;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 48%);
}
.lab h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -.015em; }
.lab p { margin-top: 14px; color: var(--sub); max-width: 58ch; }
.lab-goals { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 58ch; }
.lab-goals li { position: relative; padding-left: 26px; color: var(--sub); }
.lab-goals li::before { content: ""; position: absolute; left: 0; top: .5em; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.lab-goals b { color: var(--text); font-weight: 600; }
.lab-tools { margin-top: 26px; max-width: 58ch; }
.lab-tools h4 { margin: 0 0 6px; font: 500 .8rem/1.4 var(--font-mono); letter-spacing: .02em; color: var(--accent-soft); }
.lab-tools ul { list-style: none; margin: 0; padding: 0; }
.lab-tools li { padding: 9px 0; border-bottom: 1px solid var(--rule-strong); color: var(--sub); font-size: .95rem; }
.lab-tools li b { color: var(--text); font-weight: 600; margin-right: 6px; }
.lab-tools p { margin-top: 12px; font-size: .92rem; }
.lab-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; align-self: end; }
.lab .lab-toggle { position: absolute; top: 14px; right: 14px; }
.prose p:has(> .btn) { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
@media (max-width: 900px) {
  .lab { grid-template-columns: 1fr; }
  .lab-side { align-items: flex-start; }
  .lab-bg { width: 100%; opacity: .16; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- hook to the project page ---------- */
.hook {
  display: block; text-decoration: none; color: var(--text);
  padding: clamp(56px, 10vh, 120px) var(--gutter);
  border-top: 1px solid var(--rule);
  transition: background .4s var(--ease);
}
.hook:hover { background: var(--bg-2); color: var(--text); }
.hook.on-line::before { bottom: 50%; }
.hook.on-line > .wrap { padding-left: 128px; display: flex; flex-direction: column; gap: 20px; }
.hook h2 { font-size: clamp(2rem, 4.6vw, 3.9rem); font-weight: 800; font-stretch: 118%; line-height: 1.02; letter-spacing: -.02em; max-width: 16ch; }
.hook p { color: var(--sub); max-width: 58ch; font-size: 1.05rem; }
.hook .arrow {
  --size: 80px;
  position: absolute; top: 50%; left: calc(var(--line-x) + 1.5px - var(--size) / 2);
  width: var(--size); height: var(--size); border-radius: 50%;
  display: grid; place-items: center; background: var(--accent);
  box-shadow: 0 0 0 8px var(--bg);
  transform: translateY(-50%);
  transition: transform .45s var(--ease), box-shadow .4s var(--ease);
}
.hook .arrow svg { width: 40%; height: 40%; stroke: var(--ink-on-accent); }
.hook:hover .arrow { transform: translateY(-50%) scale(1.08); box-shadow: 0 0 0 8px var(--bg-2); }
.hook-h::before { display: none; }
/* narrow: no room to centre a big circle on the line, so the heading takes the
   last node and the arrow drops into the flow */
@media (max-width: 900px) {
  .hook.on-line::before { bottom: auto; height: calc(clamp(56px, 10vh, 120px) + 14px); }
  .hook.on-line > .wrap { padding-left: 48px; }
  .hook-h::before { display: block; --ring: var(--bg); }
  .hook .arrow { position: static; --size: 52px; transform: none; box-shadow: none; }
  .hook:hover .arrow { transform: translateX(6px); box-shadow: none; }
}

/* ---------- footer ---------- */
.foot { padding: 48px var(--gutter) 56px; border-top: 1px solid var(--rule); color: var(--dim); font-size: .85rem; }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; }
.foot p + p { margin-top: 10px; }
.foot .brand { margin-bottom: 14px; }
.foot a { color: var(--sub); }
@media (max-width: 760px) { .foot .wrap { grid-template-columns: 1fr; } }

/* ---------- project page ---------- */
.doc-hero { padding: clamp(56px, 11vh, 128px) var(--gutter) clamp(40px, 7vh, 80px);
  background: radial-gradient(ellipse 1000px 480px at 30% -20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 64%), var(--bg); }
.doc-hero h1 { font-size: clamp(2.3rem, 5.2vw, 4.4rem); font-weight: 800; font-stretch: 118%; line-height: 1.02; letter-spacing: -.02em; max-width: 16ch; }
.doc-hero p { margin-top: 24px; color: var(--sub); font-size: 1.15rem; max-width: 58ch; }
.doc-hero .people { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: .92rem; color: var(--sub); }
.doc-hero .people b { color: var(--text); font-weight: 600; }

.chapter { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); padding: clamp(48px, 8vh, 96px) 0; border-top: 1px solid var(--rule-strong); }
.chapter:first-child { border-top: 0; padding-top: 0; }
.chapter h2 { font-size: clamp(1.4rem, 2.3vw, 1.9rem); line-height: 1.12; letter-spacing: -.015em; position: sticky; top: 96px; }
.chapter .prose { display: flex; flex-direction: column; gap: 18px; max-width: 68ch; }
.chapter .prose p { color: var(--sub); }
.chapter .prose p strong { color: var(--text); font-weight: 600; }
.chapter .prose h3 { font-size: 1.05rem; color: var(--text); margin-top: 10px; }
@media (max-width: 900px) { .chapter { grid-template-columns: 1fr; } .chapter h2 { position: static; } }

.status { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.status li { display: grid; grid-template-columns: 16px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule-strong); }
.status li::before, .status-key li::before {
  content: ""; width: 13px; height: 13px; margin-top: .4em; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--accent);
}
.status li.todo::before, .status-key li.todo::before { background: transparent; }
.status p { color: var(--sub); }
.status p b { color: var(--text); font-weight: 600; }
.status-key { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; font-size: .85rem; color: var(--sub); }
.status-key li { display: inline-flex; gap: 8px; }
.status-key li::before { margin-top: .3em; width: 11px; height: 11px; }
/* touch screens: the small round controls grow to a full 44 px target */
@media (pointer: coarse) {
  .theme, .bg-toggle { width: 44px; height: 44px; }
  .lang, .btn.sm { min-height: 44px; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.back { display: inline-flex; align-items: center; gap: 8px; }
.back svg { width: 16px; height: 16px; }


.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(40px, 6vw, 64px); border-radius: 20px; background: var(--accent); color: var(--ink-on-accent); }
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.08; letter-spacing: -.015em; max-width: 20ch; }
.cta-band .btn { background: #151515; border-color: #151515; color: #ececec; }
.cta-band .btn:hover { background: #000; border-color: #000; color: #ececec; }