/* Liquid Energy · site.css
   One system for every page. White page, warm ink, the sunrise as the only
   colour story, teal once (the section indices). Big type is light and tight,
   small type is bold and spaced. Hairlines, no shadows, no rounded corners. */

/* ------------------------------------------------------------------ tokens */
@font-face {
  font-family: Inter;
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #171310;
  --soft: #494440;
  --mut: #6f6862;
  --line: #e7e2d9;
  --paper: #ffffff;
  --bone: #f9f6ee;
  --dawn: #ffd27a;
  --gold: #f5a623;
  --amber: #e8821e;
  --ember: #dc741a;      /* text accent: the warmest tone that passes 3:1 for large type */
  --accent: #E68A12;   /* the bold golden accent words: sunlight, photon, token */
  --brown: #5a2f08;
  --teal: #1a6f5e;

  --shell: 1200px;
  --pad: clamp(24px, 5.8vw, 82px);
  --edge: clamp(16px, 2.2vw, 28px);   /* the footer runs to the page edges, inset by this */
  --hdr: 64px;
  --room: clamp(96px, 12vw, 168px);
  --ease: cubic-bezier(.22, 1, .36, 1);

  --fs-hero: clamp(3.05rem, 10.4vw, 9.35rem);
  --fs-mega: clamp(2.7rem, 5.5vw, 5rem);
  --fs-lead: clamp(1.06rem, 1.5vw, 1.36rem);
  --fs-body: clamp(15px, 1.3vw, 17.5px);
  --fs-micro: 11px;
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr) + 12px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  /* no global tabular-nums: in Inter it also swaps the hyphen for a
     figure-width one, which opened a gap in every "off-grid" */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, picture, canvas, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
b, strong { font-weight: 700; }
::selection { background: var(--dawn); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; z-index: 300; top: 12px; left: 12px;
  padding: 12px 18px; background: var(--ink); color: var(--paper);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transform: translateY(-220%); transition: transform .2s var(--ease);
}
.skip:focus-visible { transform: none; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }

/* --------------------------------------------------------------- type kit */
.micro {
  font-size: var(--fs-micro); font-weight: 700; line-height: 1.4;
  letter-spacing: .2em; text-transform: uppercase;
}
.mega {
  font-size: var(--fs-mega); font-weight: 100; line-height: .98;
  letter-spacing: -.055em; color: var(--ink);
}
.mega b { font-weight: 900; letter-spacing: -.035em; color: var(--accent); }
.lead {
  text-wrap: balance;
  font-size: var(--fs-lead); font-weight: 300; line-height: 1.45;
  letter-spacing: -.012em; color: var(--ink);
}
.body { color: var(--soft); line-height: 1.65; letter-spacing: -.01em; }
.note { font-size: 12.5px; line-height: 1.6; color: var(--mut); }

/* The section index: "01 / Vision" on the left, a context line on the right,
   both on one hairline. The number is the page's single teal. */
.meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding-top: 16px; border-top: 1px solid var(--line);
  margin-bottom: clamp(40px, 5.4vw, 72px);
  color: var(--mut);
}
.meta b { color: var(--teal); font-weight: 700; }

/* Heading on the left, its copy on the right, bottoms aligned. */
.intro {
  display: grid; grid-template-columns: 1.55fr 1fr;
  align-items: end; gap: clamp(28px, 6vw, 96px);
}
.intro .lead + .body { margin-top: 18px; }

/* The one button. At rest it is the coming-soon page's pill: white, with a
   sunrise comet running round a faint ring and a soft glow spilling outside
   it. On hover the ring and glow step aside, the corners square off and the
   sunrise ramp fills it, so it becomes the squared brand button. */
@property --spin { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 24px;
  font-size: var(--fs-micro); font-weight: 700; line-height: 1;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink);
  border-radius: 24px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    conic-gradient(from var(--spin),
      rgba(23, 19, 16, .22) 0deg 150deg,
      #dc741a 265deg, #f5a623 315deg, #ffd27a 350deg,
      rgba(23, 19, 16, .22) 360deg) border-box;
  animation: spin 3.2s linear infinite;
  transition: border-radius .32s var(--ease), transform .16s var(--ease);
}
/* the squared sunrise fill, waiting underneath */
.btn::before {
  content: ""; position: absolute; z-index: -1; inset: -1.5px;
  border-radius: inherit;
  background-image: linear-gradient(100deg, var(--dawn) 0%, var(--gold) 34%, var(--amber) 62%, var(--gold) 86%, var(--dawn) 100%);
  background-size: 220% 100%; background-position: 0 0;
  opacity: 0;
  transition: opacity .28s var(--ease), background-position .6s var(--ease);
}
/* the glow: the same comet blurred, masked to the band outside the pill */
.btn::after {
  content: ""; position: absolute; z-index: -1;
  inset: -12px; padding: 12px; border-radius: 36px;
  background: conic-gradient(from var(--spin),
      transparent 0deg 150deg,
      rgba(220, 116, 26, .55) 265deg, #f5a623 315deg, #ffd27a 350deg,
      transparent 360deg) content-box;
  filter: blur(8px); opacity: .9;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .25s var(--ease);
  pointer-events: none;
}
.btn:hover, .btn:focus-visible { border-radius: 0; }
.btn:hover::before, .btn:focus-visible::before { opacity: 1; background-position: 100% 0; }
.btn:hover::after, .btn:focus-visible::after { opacity: 0; }
.btn:active { transform: translateY(1px); }
/* the hover flare's canvas (flare.js): under the label, outside the button, never a target */
.flare { position: absolute; z-index: -1; pointer-events: none; display: block; max-width: none; }
.btn-arrow { width: 15px; height: 15px; flex: none; transition: transform .25s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.link {
  font-weight: 600; color: var(--ink);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 2px; transition: background-size .3s var(--ease);
}
.link:hover { background-size: 100% 2px; }

/* ------------------------------------------------------------------ header */
.hdr {
  position: fixed; z-index: 150; inset: 0 0 auto;
  height: var(--hdr);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}
@supports not (backdrop-filter: blur(2px)) { .hdr { background: rgba(255, 255, 255, .97); } }
.hdr-in {
  height: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.wm { display: flex; align-items: center; gap: 10px; }
.wm-mark { width: clamp(34px, 3.6vw, 44px); height: auto; aspect-ratio: 1; }
.wm-word { height: clamp(23px, 2.4vw, 30px); width: auto; }
.nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 38px); }
.nav-a { color: var(--mut); transition: color .2s ease; }
.nav-a:hover { color: var(--ink); }
.nav .btn { padding: 12px 20px; }

/* -------------------------------------------------------------------- hero */
/* The opening (intro.js marks the page, site.js steps it): the star sits cold
   and dark with the header away; the first two lines of the title rise in;
   then "Solar" ignites with the star; then the collector shell
   comes out from behind it. The header stays away until the first scroll. */
.hdr { transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s linear 0s; }
.le-hdr-wait .hdr { opacity: 0; transform: translateY(-14px); visibility: hidden; pointer-events: none; transition: none; }
.swarm-hero { transition: filter 1s ease; }
.le-intro .swarm-hero { filter: grayscale(.94) brightness(.36) contrast(1.28); }
.le-intro.i-lit .swarm-hero { filter: none; }
.hero-h, .facts { transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.hero-h b { transition: color 1.1s ease, text-shadow 1.6s ease; }
.le-intro .hero-h { opacity: 0; transform: translateY(26px); }
.le-intro.i-text .hero-h { opacity: 1; transform: none; }
/* SOLAR arrives cold and dark like the star, then catches with it: it lights to
   the accent with a brief warm bloom as the star ignites */
.le-intro .hero-h b { color: #3a3531; text-shadow: none; }
.le-intro.i-lit .hero-h b { color: var(--accent); text-shadow: 0 0 34px rgba(245, 166, 35, .55), 0 0 2px rgba(255, 210, 122, .6); }
.le-intro.i-swarm .hero-h b { text-shadow: 0 0 0 rgba(245, 166, 35, 0); }
.le-intro .facts { opacity: 0; transform: translateY(14px); }
.le-intro.i-swarm .facts { opacity: 1; transform: none; }

.hero {
  position: relative; overflow: hidden;
  height: 100vh; height: 100dvh; min-height: 560px;
  display: flex; flex-direction: column;
  padding-top: calc(var(--hdr) + 26px);
}
.hero > *:not(.swarm-hero):not(.ignite-burst):not(.ignite-dots) { position: relative; z-index: 1; }
/* a soft white lift under the copy band, so the swarm never fights the type */
.hero::after {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: radial-gradient(86% 36% at 50% 57%,
    rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .76) 40%,
    rgba(255, 255, 255, .32) 68%, rgba(255, 255, 255, 0) 88%);
}
.swarm-hero { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: .9; }
.ignite-dots, .ignite-burst { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.hero-h {
  margin-top: auto; padding: 0 var(--pad) 7.4vh; margin-bottom: 9vh; text-align: center;
  font-size: var(--fs-hero); font-weight: 100; line-height: .84; letter-spacing: -.052em;
}
.hero-h b { font-weight: 900; letter-spacing: -.03em; color: var(--accent); }
.backers { padding: 0 var(--pad) 4vh; text-align: center; }
.backers-label { color: var(--mut); letter-spacing: .42em; margin-bottom: 15px; }
.backers-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.3vw, 36px); flex-wrap: wrap;
}
.yc { display: flex; align-items: center; gap: 8px; }
.yc svg { width: clamp(21px, 2vw, 27px); height: auto; aspect-ratio: 1; }
.yc-word { font-weight: 500; font-size: clamp(13px, 1.3vw, 18px); letter-spacing: -.01em; }
.backer-nv { height: clamp(26px, 2.8vw, 39px); width: auto; }
.backer-uw { height: clamp(20px, 2.1vw, 29px); width: auto; }
/* the facts row inside the strip; on phones it runs as a ticker (site.js
   adds a hidden copy so the loop is seamless) */
.facts-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px clamp(24px, 4vw, 64px); }
.facts-row[aria-hidden] { display: none; }
.facts {
  padding: 15px var(--pad);
  background: var(--paper);
  color: var(--mut);
}

/* ------------------------------------------------------------------- rooms */
.room { position: relative; padding-block: var(--room); }

/* 01 Vision · three plain principles under the claim */
.pillars {
  /* a staircase, top left to bottom right: each step a third across and down */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(96px, 12.5vw, 180px);   /* a full blurb's height below the intro */
}
.pillar:nth-child(2) { margin-top: clamp(96px, 9.7vw, 140px); }
.pillar:nth-child(3) { margin-top: clamp(192px, 19.4vw, 280px); }
/* Ra, the sun, standing at the right end of his step's rule */
.pillar-ra { position: relative; --rah: clamp(90px, 9vw, 130px); }
/* the sun on Ra's head pours light down onto the rest of the rule: a cone
   with its apex at the disc (10% down the figure, 39% in from its right) */
.ra-beam {
  position: absolute; left: 0; bottom: 100%; pointer-events: none;
  right: calc(var(--rah) * .146); height: calc(var(--rah) * .9);
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(118deg, rgba(255, 210, 122, 0) 0 14px, rgba(255, 210, 122, .55) 14px 17px, rgba(255, 210, 122, 0) 17px 34px),
    linear-gradient(200deg, rgba(245, 166, 35, .55) 0%, rgba(255, 210, 122, .22) 45%, rgba(255, 210, 122, 0) 100%);
  background-size: 200% 100%, 100% 100%;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 100%);
          mask-image: linear-gradient(to left, #000 30%, transparent 100%);
  animation: ra-rays 3.2s linear infinite, ra-pulse 3.2s ease-in-out infinite;
}
@keyframes ra-rays { from { background-position: 0 0, 0 0; } to { background-position: -68px 0, 0 0; } }
@keyframes ra-pulse { 0%, 100% { filter: brightness(.92) saturate(.9); } 50% { filter: brightness(1.08) saturate(1.1); } }
.ra { position: absolute; right: 0; bottom: 100%; margin-bottom: -1px; pointer-events: none; }
/* the step figures arrive last, one by one in step order (site.js) */
.ra-wait .ra, .ra-wait .ra-beam, .ra-wait .unplug, .ra-wait .models { opacity: 0; transform: translateY(10px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.ra-wait .ra.fig-in, .ra-wait .unplug.fig-in, .ra-wait .models.fig-in { opacity: 1; transform: none; }
.ra-wait .ra-beam { transform: none; transition-duration: 1.6s; }
.ra-wait .ra-beam.fig-in { opacity: 1; }
.ra img { height: var(--rah); width: auto;
  /* his feet fade into the rule rather than standing hard on it */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
/* open-weight models riding along the last step's rule, left to right */
.pillar-models { position: relative; }
.models {
  position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mq { display: flex; width: max-content; animation: mq-run 26s linear infinite; }
.mq-set { display: flex; align-items: flex-end; gap: 22px; padding-right: 22px; height: 40px; padding-bottom: 6px; }
.mq img { width: 22px; height: 22px; animation: mq-hop 1.8s var(--ease) infinite; transform-origin: 50% 100%; }
.mq img:nth-child(2n) { animation-delay: -.3s; } .mq img:nth-child(3n) { animation-delay: -.6s; }
.mq img:nth-child(4n) { animation-delay: -.9s; } .mq img:nth-child(5n) { animation-delay: -1.2s; }
@keyframes mq-run { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes mq-hop {
  0%, 55%, 100% { transform: translateY(0) scale(1, 1); }
  12% { transform: translateY(0) scale(1.12, .86); }
  28% { transform: translateY(-9px) scale(.94, 1.08) rotate(-6deg); }
  42% { transform: translateY(0) scale(1.08, .92); }
}
/* off grid: a plug on the first step's rule takes a couple of tugs, pops free
   of its extension socket with a small arc, rests, then is pushed home again */
.pillar-plug { position: relative; }
.unplug { position: absolute; left: 0; bottom: 100%; margin-bottom: -2px; width: clamp(180px, 17vw, 250px); height: auto; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.unplug .up-cord { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.unplug .up-relief { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.unplug .up-shell { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.unplug .up-rib { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.unplug .up-face { fill: none; stroke: var(--ink); stroke-width: 1; }
.unplug .up-blade { fill: var(--gold); stroke: none; }   /* the only colour: the pins */
.unplug .up-ground { fill: var(--gold); stroke: none; }
.unplug .up-slot { fill: var(--ink); }
.unplug .up-spark path { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.unplug .up-flash { display: none; }
.up-plug { transform-box: view-box; transform-origin: 74px 36px; animation: up-pull 5.6s infinite; }
.up-sock { transform-box: view-box; animation: up-sock 5.6s infinite; }
.up-spark { opacity: 0; transform-box: view-box; transform-origin: 119px 36px; animation: up-spark 5.6s infinite; }
@keyframes up-pull {
  0%, 22% { transform: translateX(6px); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  27% { transform: translateX(3.5px) rotate(-.6deg); animation-timing-function: cubic-bezier(.4,0,.6,1); }   /* a tug */
  31% { transform: translateX(5.5px); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  36% { transform: translateX(2px) rotate(-.8deg); animation-timing-function: cubic-bezier(.2,.9,.2,1); }    /* a harder one */
  37.5% { transform: translateX(-3px); animation-timing-function: cubic-bezier(.16,1,.3,1); }                  /* it lets go */
  50% { transform: translateX(-28px) rotate(-3deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  56%, 78% { transform: translateX(-25px) rotate(-2deg); animation-timing-function: cubic-bezier(.6,0,.2,1); } /* settles, rests */
  90% { transform: translateX(7px); animation-timing-function: cubic-bezier(.3,0,.3,1); }                     /* pushed home */
  93%, 100% { transform: translateX(6px); }
}
@keyframes up-sock {
  0%, 35% { transform: translateX(0); }
  37.5% { transform: translateX(-1.6px); }              /* dragged a touch, then springs back */
  42%, 89% { transform: translateX(0); }
  91% { transform: translateX(.8px); }
  94%, 100% { transform: translateX(0); }
}
@keyframes up-spark {
  0%, 37% { opacity: 0; transform: scale(.4); }
  38.5% { opacity: 1; transform: scale(1.05); }
  41% { opacity: .55; transform: scale(.85); }
  42.5% { opacity: .9; transform: scale(1); }
  48% { opacity: 0; transform: scale(1.25); }
  100% { opacity: 0; }
}
.pillar { padding-top: 22px; border-top: 1px solid var(--ink); }
.pillar h3 {
  font-size: clamp(19px, 1.75vw, 24px); font-weight: 500; line-height: 1.2;
  letter-spacing: -.03em; margin-bottom: 12px;
}
.pillar p { color: var(--soft); font-size: 15px; line-height: 1.6; max-width: 34ch; }

/* 02 Arrival · the 3D sequence, scrubbed by the page, narrated underneath */
.arrival { padding-bottom: 0; }
.scrub-track { position: relative; height: 440vh; margin-top: clamp(48px, 6vw, 80px); }
.scrub-sticky {
  position: sticky; top: var(--hdr);
  height: calc(100vh - var(--hdr)); height: calc(100dvh - var(--hdr));
  overflow: hidden; background: var(--paper);
}
.scrub-frame {
  width: 100%; height: 100%; border: 0; background: var(--paper);
  pointer-events: none; opacity: 0; transition: opacity .45s var(--ease);
}
.scrub-ready .scrub-frame { opacity: 1; }
/* phones: the pre-rendered sequence (site.js), a square frame with its edges
   melting into the page, and the photoreal end frame over it */
.seq { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%); aspect-ratio: 1; }
.seq canvas, .seq-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.seq canvas, .seq-photo {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}
/* desktops: the 16:9 render fills the stage edge to edge, no mask */
.seq-d { inset: 0; top: 0; transform: none; aspect-ratio: auto; }
.seq-d canvas, .seq-d .seq-photo { -webkit-mask-image: none; mask-image: none; }
.seq-d .seq-photo { object-fit: cover; }
.seq-photo { opacity: 0; transition: opacity 1.1s cubic-bezier(.45, 0, .2, 1); will-change: opacity; }
.seq-end .seq-photo { opacity: 1; }
.scrub-fallback .scrub-track { height: auto; }
.scrub-fallback .scrub-sticky { position: relative; top: 0; height: clamp(520px, 74vh, 760px); }

/* the narration: one chapter at a time, bottom right, over a white lift */
.story {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 0 var(--pad) clamp(24px, 4vh, 44px);
  pointer-events: none;
}
.story-in { max-width: var(--shell); margin-inline: auto; padding-inline: 0; position: relative; }
.chapters { position: relative; height: 5.6em; max-width: 420px; margin-left: auto; text-align: right; }
.chapter {
  position: absolute; inset: 0 auto auto 0; width: 100%;
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.chapter.on { opacity: 1; transform: none; }
.chapter .micro { color: var(--mut); }
.chapter .micro b { color: var(--teal); }
.chapter h3 {
  margin-top: 8px;
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; line-height: 1.1; letter-spacing: -.035em;
}
.chapter h3 b { font-weight: 800; color: var(--accent); letter-spacing: -.02em; }
.rail {
  display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 6px;
  max-width: 420px; margin: 18px 0 0 auto;
}
.rail i { height: 2px; background: var(--line); position: relative; overflow: hidden; }
.rail i::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform-origin: 0 50%; transform: scaleX(var(--f, 0));
}
.story::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 220px; z-index: -1;
  background: linear-gradient(to top, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0));
}
.scrub-fallback .story { display: none; }

/* 03 Scale · the comparison, framed like a drawing */
.frame {
  /* no border: the figure stands on the page, a little wider than the text column */
  position: relative; margin: clamp(48px, 6vw, 80px) calc(-1 * min(80px, 5vw, max(0px, (100vw - 600px) * .1))) 0;
}
.frame-label {
  position: absolute; top: 14px; left: 18px; z-index: 1; color: var(--mut);
}
.deploy { position: relative; }
.deploy .dstage { position: relative; aspect-ratio: 2.4 / 1; }
.deploy .dstage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.readout { display: grid; grid-template-columns: 1fr 1fr; }
.tcol {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  min-width: 0; padding: clamp(20px, 2.6vw, 30px) clamp(18px, 2.4vw, 30px);
  font-size: var(--fs-micro);
}
.tcol + .tcol { border-left: 1px solid var(--line); }
.tv {
  display: inline-block; height: 1em; color: rgba(23, 19, 16, .3);
  font-size: clamp(2.4rem, 4.6vw, 4.2rem); font-weight: 100; line-height: 1;
  letter-spacing: -.05em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tv.g { display: inline-flex !important; align-items: flex-start; color: var(--accent); -webkit-text-fill-color: var(--accent); }
.tk { color: var(--mut); }
.tv.g .od-d {
  height: 1em; display: inline-block; overflow: hidden; vertical-align: top;
  -webkit-mask-image: linear-gradient(transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(transparent 0, #000 16%, #000 84%, transparent 100%);
}
.tv.g .od-r { display: flex; flex-direction: column; will-change: transform; transition: transform .55s cubic-bezier(.33, .9, .2, 1); }
.tv.g .od-r > span { height: 1em; display: block; line-height: 1; text-align: center; }
.tv.g .od-s { height: 1em; display: inline-block; line-height: 1; }
@keyframes le-tokpop { 0% { transform: scale(1); } 22% { transform: scale(1.18); } 55% { transform: scale(.98); } 100% { transform: scale(1); } }
.tv.g.le-pop { animation: le-tokpop .55s cubic-bezier(.3, 1.4, .5, 1); }
.model-note { margin-top: 18px; max-width: 70ch; }


/* Scale, phones only (site.js): the desktop comparison as a light 2D race on
   the same week clock. One conventional site grinds through its phases to
   week 104; the NanoDC fleet is live by week 6 and twenty acres by week ~84. */
.unitgrid { display: none; }
@media (max-width: 760px) {
  /* no panel, no shading: four corner marks frame it, everything inside is flat */
  .unitgrid { display: block; margin-top: 44px; padding: 22px 20px 20px; --cm: rgba(23, 19, 16, .55);
    background:
      linear-gradient(var(--cm), var(--cm)) 0 0 / 14px 1px, linear-gradient(var(--cm), var(--cm)) 0 0 / 1px 14px,
      linear-gradient(var(--cm), var(--cm)) 100% 0 / 14px 1px, linear-gradient(var(--cm), var(--cm)) 100% 0 / 1px 14px,
      linear-gradient(var(--cm), var(--cm)) 0 100% / 14px 1px, linear-gradient(var(--cm), var(--cm)) 0 100% / 1px 14px,
      linear-gradient(var(--cm), var(--cm)) 100% 100% / 14px 1px, linear-gradient(var(--cm), var(--cm)) 100% 100% / 1px 14px;
    background-repeat: no-repeat; }
  .c2-week { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
  .c2-week span { color: var(--mut); }
  .c2-week b { font-size: 52px; font-weight: 200; line-height: .85; letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
  .c2-lane + .c2-lane { margin-top: 24px; }
  .c2-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
  .c2-head b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
  .c2-dot { width: 8px; height: 8px; border-radius: 50%; background: #E03A2E; transition: background-color .4s ease, box-shadow .4s ease; }
  .c2-lane.live .c2-dot { background: #1BA46A; }
  .c2-st { margin-top: 8px; font-size: 13px; color: var(--mut); min-height: 1.4em; }
  .c2-score { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(23, 19, 16, .1); }
  .c2-score > p { color: var(--mut); margin-bottom: 10px; }
  .c2-score > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .c2-score span { display: flex; flex-direction: column; gap: 6px; }
  .c2-score span + span { padding-left: 12px; border-left: 1px solid rgba(23, 19, 16, .1); }
  .c2-score b { font-size: 30px; font-weight: 200; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
  .c2-sn b { color: var(--accent); }
  .c2-so b { color: rgba(23, 19, 16, .35); }
  .c2-score small { font-size: 12px; color: var(--mut); }
  .c2-track { position: relative; height: 22px; overflow: hidden; border: 1px solid rgba(23, 19, 16, .18); }
  .c2-track i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
    background: #5A6B7A; }
  .c2-acres { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
  .c2-acres i { position: relative; aspect-ratio: 1; border: 1px solid rgba(23, 19, 16, .18); overflow: hidden; }
  .c2-acres i::after { content: ""; position: absolute; inset: 0; transform-origin: 50% 100%; transform: scaleY(var(--f, 0));
    /* the desktop NANODC FLEET title's flowing sunrise: one gradient ten tiles wide,
       each column showing its own slice, so a single glow sweeps left to right
       across the whole fleet */
    background: repeating-linear-gradient(90deg, var(--ember) 0, var(--gold) 11.25%, var(--dawn) 22.5%, var(--gold) 33.75%, var(--ember) 45%);
    background-size: 1000% 100%;
    animation: c2-flow 2.9s linear infinite; animation-delay: calc((var(--c, 0) - 9) * .3222s); }
  @keyframes c2-flow { from { background-position: 100% 0; } to { background-position: 0 0; } }
}
/* About us */
.team-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 7vw, 96px); align-items: center; }
.team-intro .body { max-width: 36ch; margin-top: 30px; }
.team-intro .body + .body { margin-top: 14px; }
.team-backers { padding: 0; margin-top: 36px; text-align: left; }
.team-backers .backers-row { justify-content: flex-start; gap: 14px clamp(16px, 2vw, 26px); }
.team-backers .yc-word { font-size: 16px; }
.team-backers .backer-nv { height: 32px; }
.team-backers .backer-uw { height: 22px; }
.team-group img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 52%; }
.team-group figcaption { padding-top: 14px; color: var(--mut); font-size: 10px; }
.team {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px); margin-top: clamp(48px, 6vw, 80px);
}
.portrait { overflow: hidden; aspect-ratio: 4 / 5; background: var(--bone); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform .8s var(--ease); }
.member:hover .portrait img { transform: scale(1.025); }
.member .who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 20px; }
.member h3 { font-size: clamp(18px, 2vw, 25px); font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
.member p { margin-top: 8px; color: var(--mut); font-size: 10px; }
.member .socials { display: flex; gap: 4px; margin: 0 0 0 auto; }   /* flush with the photo's right edge */
.socials a {
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--line); color: var(--ink);
  transition: border-color .2s ease, color .2s ease;
}
.socials a:hover, .socials a:focus-visible { border-color: var(--ink); color: var(--ember); }
.socials svg { width: 13px; height: 13px; }

.rv { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease) var(--rv-d, 0ms), transform .9s var(--ease) var(--rv-d, 0ms); }
.rv.rv-in { opacity: 1; transform: none; }

/* 05 Contact + footer · the sun cresting from the bottom of the page */
.finale {
  background:
    radial-gradient(150% 92% at 15% 116%,
      #ffe7b8 0%, #ffc24d 10%, #f5a623 26%, #e8821e 44%, #fbe3c2 56%, rgba(255, 255, 255, 0) 66%),
    var(--paper);
}
.finale-sm {
  background:
    radial-gradient(150% 175% at 15% 132%,
      #ffe7b8 0%, #ffc24d 10%, #f5a623 26%, #e8821e 44%, #fbe3c2 56%, rgba(255, 255, 255, 0) 66%),
    var(--paper);
}
/* the arrival follows the staircase directly, so its last step leads into it */
#vision { padding-bottom: 0; }
/* the hidden dot texture under the cursor, from About us down (dotfield.js).
   It is laid over that stretch of the page (the footer's sunrise is opaque, so
   it cannot sit behind it); the dots keep off every piece of copy and artwork,
   so it only ever shows in the open space between them. */
.finale { position: relative; }
.dotfield { position: absolute; left: 0; width: 100%; max-width: none; z-index: 5; pointer-events: none; }
/* the close follows the team directly: a short step down from the portraits */
#about { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(56px, 7vw, 112px); }   /* closer to the comparison above */
.contact { text-align: center; padding-top: clamp(72px, 9vw, 150px); padding-bottom: clamp(120px, 14vw, 230px); }
.contact .mega { font-size: clamp(1.55rem, 8.3vw, 5.6rem); line-height: .98; white-space: nowrap; }   /* two lines at every width */
.contact-actions .btn { padding: 20px 34px; font-size: 13px; gap: 16px; border-radius: 32px; white-space: nowrap; }
.contact-actions .btn:hover, .contact-actions .btn:focus-visible { border-radius: 0; }
@media (max-width: 520px) { .contact-actions .btn { padding: 18px 24px; font-size: 12px; letter-spacing: .18em; } }
.contact-actions .btn .btn-arrow { width: 18px; height: 18px; }
.contact-actions {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 16px 30px; margin-top: clamp(32px, 4vw, 48px);
}

.ftr { padding: clamp(40px, 5vw, 64px) 0 clamp(16px, 2.2vw, 28px); }
.ftr-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 48px;
  margin-inline: var(--edge); padding-top: 28px; border-top: 1px solid rgba(90, 47, 8, .22);
}
.ftr-line { font-size: 14px; color: var(--ink); line-height: 1.5; }
.ftr-nav, .ftr-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 40px; }
.ftr-links { gap: 12px 28px; margin-bottom: 20px; }
.ftr-nav a, .ftr-links a { color: var(--ink); }
.ftr-nav a:hover, .ftr-links a:hover, .ftr-links a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
/* the base: the wordmark set large on the sun in the bottom left corner, the
   legal links and fine print together in the bottom right */
.ftr-base {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: 28px clamp(28px, 4.5vw, 64px); margin-top: clamp(220px, 28vw, 480px);
  padding-inline: var(--edge);
}
.ftr-helios img { display: block; width: 100%; height: auto; }
/* SOL INVICTUS, lettered like the painting above it, under Helios at the right */
.ftr-helios .sol { display: block; width: 24%; height: auto; margin: 6px 3% 0 auto; }
/* Helios's chariot (redrawn from a c. 430 BC krater) driving across the sun */
.ftr-base { position: relative; }
.ftr-helios { position: absolute; left: 31.1%; bottom: calc(5.34vw - clamp(16px, 2.2vw, 28px)); width: min(37.8vw, calc(68.9vw - 470px)); max-width: 760px; height: auto; opacity: .5; pointer-events: none; }   /* placed by hand at 1780px (left 553, 95 up, 672 wide) and scaled with the screen */
.ftr-mark { position: relative; z-index: 1; display: block; width: min(100%, clamp(260px, 47vw, 700px)); }
.ftr-mark img { display: block; width: 100%; height: auto; }
.ftr-legal { font-size: 11.5px; line-height: 1.6; color: var(--ink); text-align: right; }
.ftr-legal p + p { margin-top: 12px; }
.ftr-tm { white-space: nowrap; }   /* two lines, broken by hand */
.ftr-copy { display: block; margin-top: 4px; color: var(--mut); }

/* ------------------------------------------------------------ inner pages */
.page { padding: calc(var(--hdr) + clamp(56px, 8vw, 104px)) 0 var(--room); }
.prose { max-width: 720px; }
.prose h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 100; line-height: 1; letter-spacing: -.05em; }
.prose .legal-meta { margin-top: 18px; color: var(--mut); font-size: 13px; }
.prose h2 { margin-top: 44px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.prose p, .prose li { color: var(--soft); line-height: 1.7; }
.prose p { margin-top: 14px; }
.prose ul { margin-top: 12px; padding-left: 0; }
.prose li { position: relative; padding-left: 20px; margin-top: 8px; }
.prose li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; background: var(--gold); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.notfound { position: relative; min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
/* Ra, sketched in the same faded ink as the footer's SOL INVICTUS */
.nf-ra { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); height: min(62vh, 520px); width: auto; opacity: .5; pointer-events: none; }
@media (max-width: 760px) { .nf-ra { position: static; order: 3; transform: none; align-self: flex-end; height: 34vh; margin-top: 28px; opacity: .4; } }
.notfound .lead { margin-top: 22px; color: var(--soft); }
.notfound .nf-line { font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--soft); }
.notfound .btn { margin-top: 28px; align-self: flex-start; }

/* ---------------------------------------------------------------- responsive */
@media (min-width: 961px) and (max-width: 1365px) {
  .ftr-helios { left: auto; right: calc(var(--edge) + 24px); bottom: 112px; width: clamp(300px, 35vw, 460px); }   /* no room beside the fine print: ride above it */
}
@media (max-width: 960px) {
  .ftr-base { grid-template-columns: 1fr; margin-top: clamp(150px, 30vw, 240px); }
  .ftr-legal { order: -1; max-width: 46ch; text-align: left; }
  .ftr-helios { position: static; order: -2; width: min(78%, 420px); margin-left: auto; }
  .ftr-tm { white-space: normal; }
  .ftr-links { justify-content: flex-start; }
  .intro { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .team-story { gap: 32px; }
}
@media (max-width: 760px) {
  :root { --hdr: 58px; }
  .nav-a { display: none; }
  .nav .btn { padding: 11px 15px; letter-spacing: .14em; }
  /* phones: the three ideas become a swipeable row of cards. Each card leads
     with a big index and its title; the line under it is small and quiet, so
     the section reads as three beats rather than a block of copy. One card fills
     most of the width and the next one peeks in, which says "swipe". */
  .pillars {
    display: flex; gap: 12px; margin: 48px calc(-1 * var(--pad)) 0; padding: 4px var(--pad) 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
    -webkit-overflow-scrolling: touch; scrollbar-width: none; counter-reset: pillar;
  }
  .pillars::-webkit-scrollbar { display: none; }
  .pillar:nth-child(n) { margin: 0; }
  .pillar {
    flex: 0 0 78%; scroll-snap-align: start; counter-increment: pillar;
    border: 0; padding: 22px 20px 24px; background: var(--bone); border-radius: 4px;
    display: flex; flex-direction: column; min-height: 220px;
  }
  .pillar::before {
    content: "0" counter(pillar); display: block; margin-bottom: auto; padding-bottom: 28px;
    font-size: 44px; font-weight: 200; line-height: 1; letter-spacing: -.04em; color: var(--gold);
  }
  .pillar h3 { font-size: 22px; margin-bottom: 8px; }
  .pillar p { font-size: 14px; line-height: 1.5; max-width: none; color: var(--mut); }
  /* the comparison model is a desktop figure; phones go straight from the
     Scale copy to About us */
  #scale .frame { display: none; }
  #scale { padding-bottom: 24px; }   /* About us sits close under the race */
  #about { padding-top: 32px; }
  .deploy .dstage { aspect-ratio: 9 / 16; }   /* stacked: the two halves one above the other (compare.js) */
  .readout { grid-template-columns: 1fr; }
  .tcol + .tcol { border-left: 0; border-top: 1px solid var(--line); }
  .team-story { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; gap: 26px; }
  .member { display: grid; grid-template-columns: clamp(96px, 28vw, 116px) 1fr; align-items: center; gap: clamp(16px, 5vw, 22px); }
  .member h3 { font-size: 20px; }
  .member .who { margin-top: 0; gap: 6px 10px; }
  .member .socials { margin-left: 0; }
  .ftr-top { flex-direction: column; }
  .ftr-nav { justify-content: flex-start; }
  .story::before { height: 180px; }
  .chapters { height: 6.4em; }
}
@media (max-width: 520px) {
  .meta span + span { display: none; }
  .hero-h { padding-bottom: 5.8vh; }
  .backers { padding-bottom: 3vh; }
  .facts { padding-block: 12px; }
  .hero-h { margin-bottom: 21vh; }   /* phones: the title sits higher, just under the swarm */
  .facts-row { gap: 8px 22px; }
  .facts.ticker { display: flex; overflow: hidden; padding-inline: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .facts.ticker .facts-row, .facts.ticker .facts-row[aria-hidden] {
    display: flex; flex: none; flex-wrap: nowrap; gap: 0; justify-content: flex-start;
    animation: facts-run 16s linear infinite;
  }
  .facts.ticker li { white-space: nowrap; padding-right: 28px; }
  .facts.ticker li::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 28px; border-radius: 50%; background: var(--gold); vertical-align: middle; }
  @keyframes facts-run { to { transform: translateX(-100%); } }
}

/* ----------------------------------------------------------- reduced motion */
/* the narrowest phones: Sid's name and the two icons no longer share a line,
   so all three members drop their icons below the name, alike */
@media (max-width: 374px) {
  .member .who { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .mq, .mq img { animation: none !important; }
  .facts.ticker .facts-row { animation: none !important; }
  .c2-acres i::after { animation: none !important; background: var(--gold); }
  .ra-beam { animation: none !important; }
  .up-plug, .up-sock { animation: none !important; } .up-plug { transform: translateX(-25px) rotate(-2deg); } .up-spark { display: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .btn { animation: none; }
}