:root {
  --bg: #f7f6f2;
  --ink: #14161a;
  --muted: #8a8f98;
  --line: #14161a;
  --slab: rgba(20, 22, 26, .045);
  --glow-l: 46%;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1013;
    --ink: #eceef2;
    --muted: #6f7580;
    --line: #eceef2;
    --slab: rgba(236, 238, 242, .06);
    --glow-l: 60%;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* ---- hero ---- */
.hero { height: 320vh; position: relative; }
.stage {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem;
  padding: 0 6vw;
}
.figure { margin: 0; width: min(100%, 720px); position: relative; z-index: 1; }
.brand { position: relative; z-index: 1; }
.cue { z-index: 1; }

/* ---- horizon grid (canvas) ----
   The stage is always dark: the effect is a glowing horizon on black. */
.stage {
  --bg: #050507; --ink: #eceef2; --muted: #7a808a; --line: #eceef2;
  --slab: rgba(236, 238, 242, .06); --glow-l: 60%;
  background: var(--bg); color: var(--ink);
}
.stage .disp { mix-blend-mode: screen; }
.horizon { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: block; width: 100%; height: 100%; }

.figure svg { display: block; width: 100%; height: auto; overflow: visible; }

.slab { fill: var(--slab); stroke: var(--line); stroke-width: 1.2; }
.normal { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; opacity: .35; }
.ray { stroke-width: 2; stroke-linecap: round; }
.beam { stroke: var(--line); }
.reflect { stroke: var(--line); stroke-width: 1.2; }
.disp { stroke-width: 1.6; opacity: 0; mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { .disp { mix-blend-mode: screen; } }

.brand h1 {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 28px var(--bg), 0 0 14px var(--bg), 0 0 6px var(--bg);
}
.cue {
  position: absolute; bottom: 2rem; left: 0; right: 0;
  margin: 0; text-align: center;
  font-size: .75rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--muted);
}

/* ---- essay ---- */
.essay { padding: 10vh 6vw 6vh; }
.chapter {
  max-width: 60ch;
  margin: 0 auto 22vh;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.65;
}
.chapter p { margin: 0 0 1.2em; }
.eyebrow {
  font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.4rem !important; font-weight: 400;
}
.chapter h2 {
  margin: 0 0 1.2em;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.closing { text-align: center; margin-bottom: 8vh; }
.wordmark-small { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.03em; margin-bottom: .4rem !important; }
.est { font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

.foot {
  max-width: 60ch;
  margin: 0 auto;
  padding: 4vh 6vw 4rem;
  font-size: .85rem; font-weight: 400; line-height: 1.6;
  color: var(--muted); text-align: center;
}
.foot p { margin: 0 0 .35rem; }
.foot a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--muted); }
.foot-copy { margin-top: 1.2rem !important; }

/* ---- scaling chart (chapter 1) ---- */
.chart {
  --s-flops: #2a78d6; --s-dram: #eb6834; --s-ic: #1baf7a;
  --grid: rgba(20, 22, 26, .10); --axis: rgba(20, 22, 26, .25);
  margin: 2.5rem 0 2rem; font-size: .85rem;
}
@media (prefers-color-scheme: dark) {
  .chart { --s-flops: #3987e5; --s-dram: #d95926; --s-ic: #199e70; --grid: rgba(236, 238, 242, .10); --axis: rgba(236, 238, 242, .25); }
}
.chart-legend { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; color: var(--muted); }
.chart-legend li { display: flex; align-items: center; gap: .5rem; }
.chart-legend .key { display: inline-block; width: 18px; height: 2px; border-radius: 1px; }
.chart-legend .rate { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; opacity: .8; }
.key.s-flops, .trend.s-flops, .dot.s-flops { background: var(--s-flops); stroke: var(--s-flops); fill: var(--s-flops); }
.key.s-dram,  .trend.s-dram,  .dot.s-dram  { background: var(--s-dram);  stroke: var(--s-dram);  fill: var(--s-dram); }
.key.s-ic,    .trend.s-ic,    .dot.s-ic    { background: var(--s-ic);    stroke: var(--s-ic);    fill: var(--s-ic); }
.chart-wrap { position: relative; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.chart-svg .grid { stroke: var(--grid); stroke-width: 1; }
.chart-svg .axis { stroke: var(--axis); stroke-width: 1; }
.chart-svg .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-svg .trend { stroke-width: 2; stroke-linecap: round; opacity: .9; }
.chart-svg .dot { stroke: var(--bg); stroke-width: 2; }
.chart-svg .pl { fill: var(--muted); font-size: 10.5px; }
.chart-svg .hit { fill: transparent; cursor: default; outline: none; }
.chart-svg .hit:focus-visible { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 2; }
.chart-tip { position: absolute; z-index: 3; pointer-events: none; padding: .45rem .65rem; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--muted); box-shadow: 0 6px 20px rgba(0,0,0,.2); white-space: nowrap; display: flex; flex-direction: column; gap: .1rem; }
.chart-tip[hidden] { display: none; }
.chart-tip strong { font-weight: 500; color: var(--ink); font-size: .95rem; }
.chart-tip span { color: var(--ink); font-size: .8rem; }
.chart-tip small { color: var(--muted); font-size: .72rem; }
.chart figcaption { margin-top: .8rem; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.chart figcaption a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* ---- integrated-photonics schematic (careers) ---- */
.light { stroke-width: 6; }
.wg { stroke: var(--line); stroke-width: 1.4; }
.flow { stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2 12; animation: flow 1s linear infinite; }
.lbl { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .08em; fill: var(--muted); stroke: none; }
@keyframes flow { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) { .flow { animation: none; } }
@media (max-width: 600px) { .lbl { font-size: 16px; } }

/* ---- sub pages (careers) ---- */
.topbar { padding: 1.4rem 6vw; }
.topbar .home { color: var(--ink); text-decoration: none; font-weight: 400; letter-spacing: -0.02em; font-size: 1.05rem; }
.careers { padding: 3vh 4vw 6vh; display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.careers .chapter { margin: 0 auto 4vh; }
/* readout */
.readout {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem 1.5rem;
  margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--muted);
}
.ro-item { min-width: 0; }
.readout dt { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem; }
.readout dd { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 300; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ro-unit { font-size: .7em; color: var(--muted); margin-left: .3em; letter-spacing: 0; }
@media (max-width: 720px) { .readout { grid-template-columns: repeat(3, 1fr); } }
.heater { fill: #ff6a3d; stroke: var(--line); stroke-width: 1; opacity: .25; }
.challenge { padding-left: 1rem; border-left: 1px solid var(--muted); }
.email { margin-top: 2rem; font-size: 1.15rem; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.obf { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; letter-spacing: .01em; white-space: nowrap; }
.obf .at { color: var(--muted); }
.copy { font: inherit; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
        background: none; border: 1px solid var(--muted); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; }
.copy:hover { color: var(--ink); border-color: var(--ink); }
.foot-links { margin-bottom: 1rem !important; }
.foot-links a { color: var(--ink); font-weight: 300; font-size: .95rem; text-decoration: none; border-bottom: 1px solid var(--muted); }

/* ---- mesh (careers) ---- */
.meshpage { padding: 2vh 3vw 4vh; display: flex; justify-content: center; }
.meshfig { width: min(100%, 1100px); margin: 0; }
.meshfig svg { display: block; width: 100%; height: auto; overflow: visible; }
.meshfig .light { stroke-width: 4; }
.meshfig .wg { stroke-width: 1; opacity: .8; }
.heater.mh { opacity: .5; }
.port { fill: var(--bg); stroke: var(--muted); stroke-width: 1.2; cursor: pointer; }
.port:hover { stroke: var(--ink); }
.port.on { fill: var(--ink); stroke: var(--ink); }
.obar { opacity: .85; }
.meshfig .spec line { stroke: var(--line); opacity: .3; }
.sline { fill: none; stroke-width: 1.2; opacity: .8; }
.cursor { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }