/* Hallmark · genre: modern-minimal (dark) · macrostructure: Feature Stack + Map/Diagram · theme: custom
 * tone: technical-austere · anchor hue: 205 (cyan) · enrichment: Tier A canvas network + Tier B hand-built SVG diagrams
 * nav: N10 · footer: Ft1 · HP3 cursor-aware hero network
 * Homepage chapters. Default (no-JS / reduced motion) state is fully readable; home.js layers motion on top.
 */

/* ---------- 01 hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding-top: 6rem;
  isolation: isolate;
}
.hero__net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero::after { /* fade the network into the next chapter */
  content: ""; position: absolute; inset: auto 0 0; height: 30%; z-index: -1;
  background: linear-gradient(transparent, var(--color-paper));
  pointer-events: none;
}
.hero__inner { display: grid; align-content: end; gap: var(--space-xl); padding-bottom: var(--space-2xl); }
.hero__h { font-size: var(--text-display); line-height: 0.95; letter-spacing: -0.05em; max-width: 12ch; }
.hero__h .line { display: block; overflow: clip; padding-bottom: 0.06em; }
.hero__h .line > span { display: inline-block; }
.hero__foot { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); align-items: end; }
.hero__lede { font-size: var(--text-md); line-height: 1.5; color: var(--color-muted); max-width: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__meta { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 60rem) {
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto; }
  .hero__cta { justify-content: end; }
}

/* ---------- 02 philosophy ---------- */
.thinks { padding-block: var(--space-4xl); }
.thinks__stage { display: grid; gap: var(--space-2xs); }
.thinks__word, .thinks__line, .thinks__sign {
  font: 300 var(--text-display-s)/1 var(--font-display); letter-spacing: -0.045em; color: var(--color-ink);
}
.thinks__line { color: var(--color-neutral); }
.thinks__sign { margin-top: var(--space-xl); font-size: var(--text-xl); letter-spacing: -0.03em; }
/* pinned (desktop, motion) — lines stack in one cell and swap */
.thinks.is-pinned .thinks__stage { min-height: 100svh; align-content: center; grid-template-areas: "word" "line" "sign"; }
.thinks.is-pinned .thinks__word { grid-area: word; font-size: var(--text-display); }
.thinks.is-pinned .thinks__line { grid-area: line; font-size: var(--text-display); color: var(--color-ink); }
.thinks.is-pinned .thinks__sign { grid-area: sign; }
.thinks.is-pinned { padding-block: 0; }

/* ---------- 03 capabilities (Feature Stack) ---------- */
.caps { padding-block: var(--space-3xl) var(--space-4xl); border-top: var(--rule-hair) solid var(--color-rule); }
.caps__grid { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); }
.caps__side {
  position: sticky; top: 4.5rem; z-index: var(--z-raised);
  display: grid; gap: var(--space-sm);
  padding-block: var(--space-md);
  background: var(--color-paper);
}
.caps__h { font-size: var(--text-2xl); }
.caps__visual { margin: 0; display: grid; gap: var(--space-xs); }
.morph { width: 100%; height: 30svh; }
.caps__readout { color: var(--color-accent); }
.caps__list { display: grid; gap: var(--space-3xl); padding-top: var(--space-xl); }
.cap { display: grid; gap: var(--space-md); align-content: start; transition: opacity var(--dur-long) var(--ease-out); }
.js .cap:not(.is-active) .cap__title { color: var(--color-neutral); }
.cap__title { transition: color var(--dur-long) var(--ease-out); }
.cap__title { font: 300 var(--text-xl)/1.05 var(--font-display); letter-spacing: -0.035em; }
.cap__body { color: var(--color-muted); }
.cap__more { justify-self: start; font-size: var(--text-sm); }
@media (min-width: 64rem) {
  .caps__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); }
  .caps__side { top: 0; height: 100svh; align-content: center; padding-block: 5rem var(--space-xl); background: none; }
  .morph { height: min(58svh, 36rem); }
  .caps__list { gap: 0; padding-top: 0; }
  .cap { min-height: 88svh; align-content: center; }
}

/* morph diagram primitives */
.morph__edge { stroke: var(--color-rule-2); stroke-width: 1; fill: none; }
.morph__edge.is-hot { stroke: var(--color-accent); }
.morph__node { fill: var(--color-paper); stroke: var(--color-neutral); stroke-width: 1.25; }
.morph__node.is-core { fill: var(--color-accent); stroke: var(--color-accent); }
.morph__node.is-alt { stroke: var(--color-signal-2); fill: var(--color-signal-2); }
.morph__label { fill: var(--color-muted); font: 400 12px var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase; }

/* ---------- 04 pipeline ---------- */
.pipe { padding-block: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.pipe__h { font-size: var(--text-2xl); max-width: 14ch; }
.pipe__lede { margin-top: var(--space-md); color: var(--color-muted); max-width: 48ch; }
.pipe__viewport { position: relative; margin-top: var(--space-2xl); padding-inline: var(--page-gutter); }
.pipe__track { display: grid; gap: var(--space-md); padding-left: var(--space-xl); }
.pipe__step, .pipe__end { display: grid; gap: var(--space-2xs); }
.pipe__name { font: 300 var(--text-xl)/1.05 var(--font-display); letter-spacing: -0.035em; color: var(--color-ink); white-space: nowrap; }
.pipe__end .pipe__name { color: var(--color-accent); white-space: normal; }
.pipe__end { margin-top: var(--space-lg); }
.pipe__rail { position: absolute; left: calc(var(--page-gutter) + 0.4rem); top: 0; bottom: 0; width: 1px; background: var(--color-rule); }
.pipe__rail span { position: absolute; inset: 0; background: var(--color-accent); transform-origin: top; transform: scaleY(1); }
/* pinned horizontal (desktop, motion) */
.pipe.is-pinned { padding-block: 0; }
.pipe.is-pinned .pipe__pin { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--space-2xl); padding-block: 5rem var(--space-xl); }
.pipe.is-pinned .pipe__viewport { margin-top: 0; padding: 0; min-width: 0; overflow: clip; }
.pipe.is-pinned .pipe__track { display: flex; align-items: end; gap: var(--space-2xl); width: max-content; padding: var(--space-2xl) var(--page-gutter) 0; }
.pipe.is-pinned .pipe__step { opacity: 0.25; }
.pipe.is-pinned .pipe__step .pipe__name { font-size: var(--text-2xl); }
.pipe.is-pinned .pipe__end { margin: 0 0 0 var(--space-2xl); }
.pipe.is-pinned .pipe__end .pipe__name { font-size: var(--text-display-s); white-space: nowrap; }
.pipe.is-pinned .pipe__rail { left: var(--page-gutter); right: var(--page-gutter); top: 0; bottom: auto; width: auto; height: 1px; }
.pipe.is-pinned .pipe__rail span { transform-origin: left; }

/* ---------- 05 AI architecture ---------- */
.arch { padding-block: var(--space-4xl); border-top: var(--rule-hair) solid var(--color-rule); overflow: clip; }
.arch__grid { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1fr); }
.arch__h { font-size: var(--text-2xl); max-width: 16ch; }
.arch__h2 { display: block; color: var(--color-neutral); }
.arch__lede { margin-top: var(--space-lg); color: var(--color-muted); max-width: 44ch; }
.arch__active { margin-top: var(--space-xl); color: var(--color-accent); display: none; }
.arch__stack-wrap { position: relative; perspective: 1400px; }
.arch__stack { display: grid; gap: var(--space-xs); transform-style: preserve-3d; }
.layer {
  display: grid; gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
}
.layer:nth-child(2), .layer:nth-child(3) { border-color: var(--color-signal-2); }
.layer.is-hot { border-color: var(--color-accent); }
.layer__name { display: flex; gap: var(--space-sm); align-items: baseline; font: 300 var(--text-lg)/1.1 var(--font-display); letter-spacing: -0.02em; }
.layer__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font: 400 var(--text-xs)/1.5 var(--font-mono); text-transform: uppercase; color: var(--color-neutral); }
.arch__signal { position: absolute; top: 0; bottom: 0; right: var(--space-xl); width: 1px; background: var(--color-accent); opacity: 0; }
@media (min-width: 64rem) {
  .arch.is-pinned { padding-block: 0; }
  .arch.is-pinned .arch__grid { min-height: 100svh; align-items: center; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .arch.is-pinned .arch__active { display: block; }
  .arch.is-pinned .arch__stack { transform: rotateX(28deg) rotateZ(-4deg); }
  .layer { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: baseline; }
}

/* ---------- 06 selected work ---------- */
.work { border-top: var(--rule-hair) solid var(--color-rule); }
.work__head { padding-block: var(--space-3xl) var(--space-xl); display: grid; gap: var(--space-md); }
.work__h { font-size: var(--text-display-s); }
.work__lede { color: var(--color-muted); }
.proj { position: relative; padding-block: var(--space-2xl); background: var(--color-paper); color: var(--color-muted); }
.proj__sticky { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
.proj__media {
  margin: 0; overflow: hidden;
  aspect-ratio: 1440 / 860;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
}
.proj__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.proj__info { display: grid; gap: var(--space-md); align-content: start; }
.proj__name { font: 300 var(--text-2xl)/1 var(--font-display); letter-spacing: -0.04em; }
.proj__summary { max-width: 46ch; }
.env-light {
  --color-paper: var(--light-paper);
  --color-paper-2: var(--light-paper-2);
  --color-rule: var(--light-rule);
  --color-rule-2: var(--light-rule);
  --color-neutral: var(--light-neutral);
  --color-muted: var(--light-neutral);
  --color-ink: var(--light-ink);
  --color-accent: var(--light-accent);
  --color-focus: var(--light-accent);
  color: var(--color-muted);
}
@media (min-width: 64rem) {
  .proj { padding-block: 0; min-height: 170svh; }
  .proj__sticky {
    position: sticky; top: 0; min-height: 100svh;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: center; gap: var(--space-2xl);
    padding-block: 5.5rem var(--space-xl);
  }
  .proj__media { transform-origin: 30% 50%; }
}

.more { padding-block: var(--space-3xl); display: grid; gap: var(--space-xl); justify-items: start; }
.more__h { font: 300 var(--text-xl)/1 var(--font-display); letter-spacing: -0.03em; }
.more__grid { width: 100%; display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); }
.more__row {
  display: grid; gap: var(--space-2xs) var(--space-lg);
  grid-template-columns: minmax(0, 1fr) auto;
  padding-block: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted); text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}
.more__name { color: var(--color-ink); font: 300 var(--text-lg)/1.15 var(--font-display); letter-spacing: -0.02em; }
.more__ind { grid-column: 1; font-size: var(--text-sm); color: var(--color-neutral); }
.more__reg { grid-row: 1; grid-column: 2; align-self: center; }
.more__row:hover .more__name, .more__row:focus-visible .more__name { color: var(--color-accent); }
.more__preview { display: none; margin: 0; }
@media (min-width: 64rem) {
  .more__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
  .more__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: baseline; }
  .more__ind, .more__reg { grid-row: auto; grid-column: auto; }
  .more__preview {
    display: block; position: sticky; top: 6rem;
    aspect-ratio: 1440 / 860; overflow: hidden;
    border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md);
  }
  .more__preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity var(--dur-short) var(--ease-out); }
}

/* ---------- 07 engineering scale ---------- */
.scale { padding-block: var(--space-4xl); border-top: var(--rule-hair) solid var(--color-rule); }
.scale__head { display: grid; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.scale__h { font-size: var(--text-display-s); max-width: 12ch; }
.scale__lede { color: var(--color-muted); max-width: 52ch; }
@media (min-width: 64rem) { .scale__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.scale__scroll { overflow-x: auto; overscroll-behavior-x: contain; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }
.infra { min-width: 760px; width: 100%; height: auto; padding: var(--space-md); }
.infra__boundary { fill: none; stroke: var(--color-rule-2); stroke-dasharray: 4 6; }
.infra__lane { stroke: var(--color-rule-2); stroke-width: 1; }
.infra__tick { stroke: var(--color-rule-2); stroke-dasharray: 2 5; fill: none; }
.infra__lane-label { fill: var(--color-neutral); font: 400 10px var(--font-mono); letter-spacing: 0.06em; }
.infra__edges path { fill: none; stroke: var(--color-neutral); stroke-width: 1.25; }
.infra__packets circle { fill: var(--color-accent); }
.infra__node rect { fill: var(--color-paper-2); stroke: var(--color-rule-2); }
.infra__node .infra__replica { fill: var(--color-paper); stroke: var(--color-rule); }
.infra__node.is-ai rect:last-of-type { stroke: var(--color-signal-2); }
.infra__t { fill: var(--color-ink); font: 600 13px var(--font-body); }
.infra__s { fill: var(--color-neutral); font: 400 10px var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.scale__tags { margin-top: var(--space-xl); }

/* ---------- 08 industries ---------- */
.ind { position: relative; border-top: var(--rule-hair) solid var(--color-rule); }
.ind__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.field { width: 100%; height: 100%; }
.field circle { fill: var(--color-rule-2); }
.field circle.is-hot { fill: var(--color-accent); }
.ind__content { position: relative; margin-top: -100svh; padding-block: var(--space-4xl) 30svh; }
.ind__h { font-size: var(--text-2xl); max-width: 12ch; }
.ind__list { display: grid; }
.ind__item {
  min-height: 80svh; display: grid; align-content: center; gap: var(--space-sm);
  max-width: 40rem;
}
.ind__name { font: 300 var(--text-display-s)/1 var(--font-display); letter-spacing: -0.045em; color: var(--color-ink); }
.ind__line { font-size: var(--text-md); color: var(--color-muted); }
.ind__proof { color: var(--color-accent); }
.ind__item { text-shadow: 0 0 24px var(--color-paper), 0 0 8px var(--color-paper); } /* legibility over the dot field */

/* ---------- 09 process ---------- */
.proc { padding-block: var(--space-4xl); border-top: var(--rule-hair) solid var(--color-rule); }
.proc__grid { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1fr); }
.proc__head { display: grid; gap: var(--space-md); align-content: start; }
.proc__h { font-size: var(--text-display-s); }
.proc__lede { color: var(--color-muted); }
.proc__body { position: relative; padding-left: var(--space-xl); }
.proc__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--color-rule); }
.proc__rail span { position: absolute; inset: 0; background: var(--color-accent); transform-origin: top; }
.proc__list { display: grid; }
.proc__step {
  display: grid; gap: var(--space-2xs) var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.proc__name { font: 300 var(--text-xl)/1.05 var(--font-display); letter-spacing: -0.035em; }
.proc__tag { color: var(--color-accent); }
@media (min-width: 64rem) {
  .proc__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .proc__head { position: sticky; top: 7rem; }
  .proc__step { grid-template-columns: 3rem minmax(0, 12rem) minmax(0, 1fr); align-items: baseline; }
  .proc__line { grid-column: 3; grid-row: 1; }
  .proc__tag { grid-column: 3; }
}

/* ---------- 10 why ---------- */
.why { padding-block: var(--space-4xl); border-top: var(--rule-hair) solid var(--color-rule); }
.why__h { font: 400 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-neutral); margin-bottom: var(--space-2xl); }
.why__list { display: grid; gap: var(--space-3xl); }
.why__item { display: grid; gap: var(--space-md); }
.why__item:nth-child(even) { justify-self: end; text-align: right; }
.why__item:nth-child(even) .why__small { margin-left: auto; }
.why__big { font: 300 var(--text-display-s)/0.98 var(--font-display); letter-spacing: -0.045em; max-width: 14ch; }
.why__small { color: var(--color-muted); max-width: 40ch; }

/* ---------- 11 cta ---------- */
.cta { position: relative; min-height: 100svh; display: grid; align-items: center; isolation: isolate; border-top: var(--rule-hair) solid var(--color-rule); }
.cta__net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.cta__inner { display: grid; gap: var(--space-xl); padding-block: var(--space-4xl); }
.cta__h { font-size: var(--text-display); line-height: 0.95; letter-spacing: -0.05em; max-width: 10ch; }
.cta__lede { font-size: var(--text-md); color: var(--color-muted); max-width: 46ch; }
.cta__btns { display: flex; flex-wrap: wrap; gap: var(--space-sm); }