/*
 * Elovaren. Hex Infrastructure's site, its pages, its sky and its shooting
 * stars, dressed in MGAM's design: MGAM's paper and greys, Georgia over Inter,
 * pill links and buttons, soft cards, the grey orb and its rings, and the dot
 * that opens into colours in the footer.
 */

:root {
  --bg: #f4f4f2;
  --surface: #fbfbfa;
  --surface-2: #e9e9e6;
  --text: #20201f;
  --muted: #666663;
  --line: #d5d5d1;
  --accent: #737373;
  --accent-strong: #505050;
  --accent-soft: #e3e3e0;
  --button-text: #ffffff;
  --selection-bg: #a3a3a3;
  --selection-text: #171717;
  --teal: #496b66;
  --teal-soft: #e0ebe8;
  --shadow: 0 1.125rem 3.75rem rgba(32, 32, 31, 0.10);
  --shadow-sm: 0 0.5rem 1.75rem rgba(32, 32, 31, 0.08);
  --shadow-up: 0 1.75rem 4rem rgba(32, 32, 31, 0.17);
  --radius-lg: 1.75rem;
  --radius-md: 1.125rem;
  --radius-sm: 0.75rem;
  --max: 73.75rem;
  --gutter: 1.5rem;
  --header-h: 4.875rem;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  /* The wordmark's shape (img/wordmark.png at 480 px), inline: see .wordmark. */
  --wordmark: url("data:image/png;base64,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");
  color-scheme: light;
}

* { box-sizing: border-box; }

::selection { background: var(--selection-bg); color: var(--selection-text); }

/* The whole site is sized in rem, so this one line sets how big it is (the
   owner, 2026-11-01: "Make UI bigger", with Precision Neuroscience's site as
   the example): the ordinary size up to a window 1280 px wide, then growing
   with the window, 1.44 times the size at 2560, and held back on a window too
   short to show it. Only hairlines and media queries are left in px. */
html {
  font-size: clamp(1rem, min(0.5556rem + 0.556vw, 1.95vh), 2.25rem);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 7% 0%, rgba(115, 115, 115, 0.12), transparent 28rem),
    radial-gradient(circle at 100% 30%, rgba(73, 107, 102, 0.07), transparent 32rem),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 0.2em; }
button { font: inherit; }
p, h1, h2, h3, h4 { margin-top: 0; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: 0.625rem;
  left: 0.625rem;
  z-index: 999;
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.wrap {
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

main { display: block; flex: 1 0 auto; overflow-x: clip; }

:focus-visible {
  outline: 0.1875rem solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 0.1875rem;
}

/* ── Header: Hex's logo-then-links, in MGAM's frosted bar and pills ─────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(1.125rem);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.site-header.scrolled {
  border-color: var(--line);
  box-shadow: 0 0.5rem 1.875rem rgba(50, 35, 27, 0.06);
}

/* On the home page the bar lies on the sky until the reader scrolls. */
.home .site-header:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
}

/* The bar runs the window's width, the wordmark at its left end. */
.nav {
  width: calc(100% - 2 * clamp(var(--gutter), 3vw, 5rem));
  min-height: var(--header-h);
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0;
  text-decoration: none;
}

/* Elovaren's wordmark, a transparent PNG used as a mask so it can take any
   colour: ink at rest, and (site.js) a random hue under the pointer, the way
   MGAM's dot does. The PNG sits in the stylesheet as a data: URI because a
   browser refuses a mask image from a file:// page, which left the logo blank
   when a page was opened straight from disk. */
.wordmark {
  display: block;
  width: 7.375rem;
  aspect-ratio: 1604 / 347;
  background-color: var(--logo-color, var(--text));
  -webkit-mask: var(--wordmark) center / contain no-repeat;
  mask: var(--wordmark) center / contain no-repeat;
  transition: background-color 180ms ease, transform 180ms ease;
  forced-color-adjust: none;
}

.brand:hover .wordmark,
.brand:focus-visible .wordmark { transform: scale(1.04); }

/* One rainbow pass over the header's wordmark as each page opens (site.js
   adds .is-seen), the same as the site's "superintelligence"; at rest the
   band is off the word, which keeps its own colour. */
.brand .wordmark {
  background: linear-gradient(90deg,
    var(--logo-color, var(--text)) 0%, var(--logo-color, var(--text)) 38%,
    hsl(352 70% 46%) 41%, hsl(32 70% 46%) 45%, hsl(50 85% 46%) 49%,
    hsl(96 70% 38%) 53%, hsl(204 70% 46%) 57%, hsl(276 70% 50%) 60%,
    var(--logo-color, var(--text)) 63%, var(--logo-color, var(--text)) 100%) 100% 0 / 300% 100% no-repeat;
}

.brand .wordmark.is-seen {
  animation: rainbow-pass 1s cubic-bezier(0.45, 0.05, 0.4, 1) 0.3s 1 both;
}

/* The header's wordmark folds into its "e" while the reader scrolls down,
   and opens again on the way back up (site.js adds .folded to the header;
   at the top of the page it is always whole). It is the wordmark's eight
   letters, each a slice of the same mask (each page's header): the seven
   after the "e" slide back into it, shrinking and fading, the last first; on
   the way out they spring back to their places, the nearest first. The
   rainbow pass crosses all eight as one word: --rp, its progress, places each
   letter's piece of the band by where the letter sits in the word. */
@property --rp { syntax: '<number>'; inherits: true; initial-value: 0; }

.brand .wordmark.fold {
  --full: 7.375rem;
  /* How much bigger the "e" is on its own (the owner, 2026-10-29: "bigger and more aligned"). */
  --e-scale: 1.55;
  --rp: 1;
  position: relative;
  width: var(--full);
  height: calc(var(--full) * 347 / 1604);
  aspect-ratio: auto;
  background: none;
  -webkit-mask: none;
  mask: none;
  transition: width 460ms cubic-bezier(0.65, 0, 0.35, 1), transform 180ms ease;
}

.brand .wordmark.fold.is-seen {
  animation: rainbow-fold 1s cubic-bezier(0.45, 0.05, 0.4, 1) 0.3s 1 both;
}

@keyframes rainbow-fold { from { --rp: 1; } to { --rp: 0; } }

.brand .wordmark.fold > i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--x0) * var(--full));
  width: calc((var(--x1) - var(--x0)) * var(--full));
  background: linear-gradient(90deg,
    var(--logo-color, var(--text)) 0%, var(--logo-color, var(--text)) 38%,
    hsl(352 70% 46%) 41%, hsl(32 70% 46%) 45%, hsl(50 85% 46%) 49%,
    hsl(96 70% 38%) 53%, hsl(204 70% 46%) 57%, hsl(276 70% 50%) 60%,
    var(--logo-color, var(--text)) 63%, var(--logo-color, var(--text)) 100%) no-repeat;
  background-size: calc(var(--full) * 3) 100%;
  background-position: calc((var(--rp) * -2 - var(--x0)) * var(--full)) 0;
  -webkit-mask: var(--wordmark) no-repeat;
  mask: var(--wordmark) no-repeat;
  -webkit-mask-size: var(--full) 100%;
  mask-size: var(--full) 100%;
  -webkit-mask-position: calc(var(--x0) * var(--full) * -1) 0;
  mask-position: calc(var(--x0) * var(--full) * -1) 0;
  transform-origin: left center;
  transition:
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 28ms),
    opacity 320ms ease calc(var(--i) * 28ms);
  forced-color-adjust: none;
}

/* Where each letter's slice starts and ends, as fractions of the word, measured from img/wordmark.png (halfway
   across the gaps between letters), and its place in the order the letters spring back out. */
.brand .wordmark.fold > i:nth-child(1) { --i: 0; --x0: 0; --x1: 0.1443; }
.brand .wordmark.fold > i:nth-child(2) { --i: 1; --x0: 0.1443; --x1: 0.1967; }
.brand .wordmark.fold > i:nth-child(3) { --i: 2; --x0: 0.1967; --x1: 0.3497; }
.brand .wordmark.fold > i:nth-child(4) { --i: 3; --x0: 0.3497; --x1: 0.4785; }
.brand .wordmark.fold > i:nth-child(5) { --i: 4; --x0: 0.4785; --x1: 0.6331; }
.brand .wordmark.fold > i:nth-child(6) { --i: 5; --x0: 0.6331; --x1: 0.7254; }
.brand .wordmark.fold > i:nth-child(7) { --i: 6; --x0: 0.7254; --x1: 0.8784; }
.brand .wordmark.fold > i:nth-child(8) { --i: 7; --x0: 0.8784; --x1: 1; }

.site-header.folded .brand .wordmark.fold { width: calc(var(--full) * 0.1443 * var(--e-scale)); }

.site-header.folded .brand .wordmark.fold > i:not(:first-child) {
  transform: translateX(calc((0.1443 - var(--x0)) * var(--full))) scale(0.35);
  opacity: 0;
  transition:
    transform 400ms cubic-bezier(0.55, 0, 0.7, 0.2) calc((7 - var(--i)) * 16ms),
    opacity 260ms ease calc((7 - var(--i)) * 16ms + 120ms);
}

/* The "e" takes them in: it grows from its left edge, so it stays in line
   with the page's edge, and rises from the line the word sits on to the
   middle of the bar, in line with the links (its middle is 66.57% of the
   word's height down: the word's box keeps room for the "l" above it). */
.brand .wordmark.fold > i:first-child { transform-origin: 0 66.57%; }

.site-header.folded .brand .wordmark.fold > i:first-child {
  transform: translateY(calc(var(--full) * 347 / 1604 * -0.1657)) scale(var(--e-scale));
  transition: transform 520ms cubic-bezier(0.34, 1.45, 0.64, 1) 170ms;
}

@media (prefers-reduced-motion: reduce) {
  .brand .wordmark.fold,
  .brand .wordmark.fold > i { transition: none; }
  .site-header.folded .brand .wordmark.fold > i { transition: none; animation: none; }
}

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.625rem;
  padding: 0.55rem 0.85rem;
  border-radius: 62.4375rem;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  background: var(--surface-2);
  color: var(--text);
}

/* Where there is room: a bigger wordmark and bigger links, the links in the
   middle of the bar, staying put as the wordmark folds. */
@media (min-width: 1000px) {
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; }
  .brand { justify-self: start; }
  .brand .wordmark.fold { --full: 10rem; }
  .nav-links { gap: 0.5rem; }
  .nav-links a { min-height: 2.75rem; padding: 0.6rem 1.1rem; font-size: 1.0625rem; }
}

/* On a phone the wordmark sits over the links, and the links tighten to fit
   one row. */
@media (max-width: 620px) {
  /* --header-h is what the home hero slides up under the header; generous is
     harmless (more sky above the title), short would leave a band. */
  :root { --gutter: 1rem; --header-h: 8.25rem; }
  .nav { min-height: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.25rem; padding: 0.5rem 0; }
  .site-header .wordmark { width: 6.5rem; }
  .site-header .wordmark.fold { --full: 6.5rem; }
  .nav-links { gap: 0; margin-left: -0.5rem; }
  .nav-links a { min-height: 2.25rem; padding: 0.35rem 0.5rem; font-size: 0.86rem; }
}

/* ── Type ───────────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.035em;
}

h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 1.02; }
h2, .h2 { font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.05; margin-bottom: 0; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; font-family: var(--sans); font-weight: 700; }

/* A link to a heading, or to a section, leaves it clear of the header. */
h2[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
section[id] { scroll-margin-top: var(--header-h); }

/* MGAM's emphasis: the second phrase steps back to grey, upright. */
h1 em, h2 em, .hero-line em { color: var(--accent); font-style: normal; }

.code { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Buttons, as MGAM sets them ─────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 62.4375rem;
  background: var(--accent);
  color: var(--button-text);
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 0.625rem 1.5rem rgba(32, 32, 31, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover { transform: translateY(-2px); box-shadow: 0 0.875rem 2.125rem rgba(32, 32, 31, 0.26); }

.button.secondary {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.button.secondary:hover { border-color: var(--accent); }

/*
 * ── The home hero: Hex's space, on MGAM's paper ────────────────────────────
 *
 * Hex's sky (img/space-sky.svg), its stars kept where they were, turned grey
 * on a pale ground whose foot is the page's own, so it runs into the rest of
 * the page with no seam. Shooting stars (sky.js) cross it in graphite, and
 * Hex's grain lies lightly over everything.
 */
.hero-scene {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + 1.5rem) 0 4.5rem;
  background: linear-gradient(180deg, #e2e2de 0%, #ebebe8 62%, var(--bg) 100%);
  overflow: hidden;
}

.hero-scene .scene {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* The stars and the grain thin out toward the hero's foot, so the sky runs
   into the page with no edge. */
.hero-scene .scene-sky {
  z-index: -4;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

.hero-scene .meteors {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}

/* A shooting star: a trail darkening to its head, laid along its line of
   flight; sky.js moves and turns it. */
.meteor {
  position: absolute;
  top: 0;
  right: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  transform-origin: 100% 50%;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(64, 64, 62, 0), rgba(52, 52, 50, 0.8));
  opacity: 0;
}

.meteor::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.5px;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: #2e2e2c;
  box-shadow: 0 0 6px 2px rgba(46, 46, 44, 0.25);
}

.hero-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("img/grain.png?v=1") 0 0 / 256px 256px;
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.hero-scene .wrap { text-align: center; }

.hero-scene h1 {
  margin: 0 auto;
  font-size: clamp(4rem, min(11vw, 15vh), 8.5rem);
  font-size: clamp(4rem, min(11vw, 15svh), 8.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.hero-line {
  margin: 0.875rem auto 0;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* One fast rainbow pass, left to right, in the footer dots' colours (with a
   yellow), that settles into the text's own grey: every "superintelligence"
   and "Rare indications.". site.js adds
   .is-seen as each comes into view, so each runs once, where it can be seen.
   The gradient is three times the text's width, grey either side of the band;
   moving it from its right end to its left end carries the band across. */
.rainbow {
  --rainbow-rest: var(--accent);
  background: linear-gradient(90deg,
    var(--rainbow-rest) 0%, var(--rainbow-rest) 38%,
    hsl(352 70% 46%) 41%, hsl(32 70% 46%) 45%, hsl(50 85% 46%) 49%,
    hsl(96 70% 38%) 53%, hsl(204 70% 46%) 57%, hsl(276 70% 50%) 60%,
    var(--rainbow-rest) 63%, var(--rainbow-rest) 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rainbow.is-seen {
  animation: rainbow-pass 1s cubic-bezier(0.45, 0.05, 0.4, 1) var(--rainbow-delay, 0.15s) 1 both;
}

@keyframes rainbow-pass {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

/* The hero's heading since 2026-10-29 (the owner: no "Hexi" above it, and
   its middle word spinning through others, fast, before it lands). The reel
   is one word wide and one line high, sized by the word it lands on
   (.reel-size, unseen); the words go by in a column under a clip, slowing to
   a stop on the last, "superintelligence", and the rainbow passes once it
   has. Each word has a taller line than the reel shows, so the words above
   and below never peek in; the column is lifted by half the difference to
   sit on the same baseline. With reduced motion the last word stands. */
.hero-scene .hero-head {
  margin: 0 auto;
  font-size: clamp(2rem, 7vw, 6rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.reel {
  position: relative;
  display: inline-block;
  clip-path: inset(-0.08em -0.25em);
  color: var(--accent);
}

.reel-size { visibility: hidden; }

.reel-words {
  --n: 10;
  position: absolute;
  top: -0.15em;
  left: 0;
  right: 0;
  text-align: center;
  animation: reel-spin 1.45s cubic-bezier(0.1, 0.55, 0.12, 1) 0.2s both;
}

.reel-words > span { display: block; height: 1.4em; line-height: 1.4; white-space: nowrap; }

@keyframes reel-spin {
  from { transform: translateY(0); }
  to { transform: translateY(calc((var(--n) - 1) * -1.4em)); }
}

.reel .rainbow,
.reel .rainbow.is-seen { animation: rainbow-pass 1s cubic-bezier(0.45, 0.05, 0.4, 1) 1.7s 1 both; }

@media (prefers-reduced-motion: reduce) {
  .reel-words { animation: none; transform: translateY(calc((var(--n) - 1) * -1.4em)); }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* One word, so it can be one box; the page has only just opened. */
.hero-line em { display: inline-block; }
.hero-line .rainbow,
.page-hero .rainbow { --rainbow-delay: 0.35s; }

/* "Why superintelligence" is ink, not grey, and settles back to ink; in a
   row's muted text, the word settles back to muted. */
.rainbow-ink { --rainbow-rest: var(--text); }
.rows dd .rainbow { --rainbow-rest: var(--muted); }

.hero-lede {
  max-width: 36em;
  margin: 1.375rem auto 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  text-wrap: balance;
}

/* Two tones, as Anthropic's hero sets its statement: the first sentence in
   ink, the rest stepping back to grey. */
.hero-lede .lede-lead { color: var(--text); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.hero-scene .hero-actions { justify-content: center; }

/* The hero's whole opening, the demo card included, fits the first screen of a
   desktop window (the owner, 2026-11-01: "nervous system widget make it not get
   clipped off"): the heading on one line, the words under it in two, a sentence
   to a line. html's font-size holds the site back on a short window, down to
   the ordinary size; under 800 px tall, where it can give no more, the gaps
   close up, and under 720 px the heading and the card close up too
   (nervous-system.css). */
.hero-scene .wrap { width: min(90rem, calc(100% - 2 * var(--gutter))); }

@media (min-width: 900px) {
  .hero-lede { max-width: 52em; }
  .hero-lede .lede-lead { display: block; }
}

@media (min-width: 761px) and (max-height: 799px) {
  .hero-scene { padding-top: calc(var(--header-h) + 0.5rem); }
  .hero-scene .hero-head { font-size: clamp(2rem, 7vw, 5rem); }
  .hero-lede { margin-top: 0.75rem; }
  .hero-actions { margin-top: 1.25rem; }
  .hero-scene .button { min-height: 2.75rem; padding-block: 0.5rem; }
}

@media (min-width: 761px) and (max-height: 719px) {
  .hero-scene { padding-top: calc(var(--header-h) + 0.25rem); }
  .hero-scene .hero-head { font-size: clamp(2rem, 7vw, 4.5rem); }
  .hero-actions { margin-top: 1rem; }
}

/*
 * ── The film ───────────────────────────────────────────────────────────────
 *
 * Hex's film under the nervous system: drawn on one canvas by film.js, with
 * its score (film-sound.js), ending on Elovaren's wordmark. The film keeps
 * its night; the frame around it is one of MGAM's cards. The still card is
 * the ending in plain HTML, for a page without scripting and for a screen
 * reader while the film plays.
 */
.film { padding: 0 0 clamp(3.5rem, 8vw, 6rem); }

.film-frame {
  position: relative;
  isolation: isolate;
  max-width: 65rem;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #05060a;
  box-shadow: var(--shadow);
  container-type: inline-size;
  -webkit-user-select: none;
  user-select: none;
}

.film-frame canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  width: 100%;
  height: 100%;
}

.film-frame.is-live canvas { display: block; }

.film-still {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4% 6%;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(closest-corner, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.45) 100%),
    #05060a;
}

.film-still::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/grain.png?v=1") 0 0 / 256px 256px;
  opacity: 0.24;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* The ending as the film leaves it: the wordmark, white, as wide as the
   film draws it (film.js, markBox), with the film's line under it as the
   section's heading (film.js takes the line and its serif from here).
   Hexi's face and name are gone from the film (2026-10-29). */
.film-mark {
  display: block;
  width: 46cqw;
  aspect-ratio: 1604 / 347;
  background-color: #fff;
  -webkit-mask: var(--wordmark) center / contain no-repeat;
  mask: var(--wordmark) center / contain no-repeat;
  forced-color-adjust: none;
}

.film-still h2 {
  max-width: none;
  margin: 2.6cqw 0 0;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-size: 3cqw;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
  color: rgba(243, 239, 232, 0.92);
}

/* As the film sets it: the emphasis in italic, not in the headings' grey. */
.film-still h2 em { color: inherit; font-style: italic; }

/* The two round buttons in the corner: the sound, off until it is asked
   for, and play, pause or play again. */
.film-controls {
  position: absolute;
  right: 0.875rem;
  bottom: 0.875rem;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}

.film-button,
.film-sound {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 8, 12, 0.45);
  color: #fff;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.film-frame:hover .film-button,
.film-frame:hover .film-sound,
.film-button:hover,
.film-sound:hover,
.film-button:focus-visible,
.film-sound:focus-visible {
  opacity: 1;
  background: rgba(8, 8, 12, 0.7);
}

.film-button:focus-visible,
.film-sound:focus-visible { outline: 2px solid #fff; outline-offset: 0.1875rem; }

.film-button[hidden],
.film-sound[hidden] { display: none; }

.film-button svg,
.film-sound svg { display: block; width: 1rem; height: 1rem; }
.film-button [class^="film-icon-"] { display: none; }
.film-button[data-state="pause"] .film-icon-pause,
.film-button[data-state="play"] .film-icon-play,
.film-button[data-state="replay"] .film-icon-replay { display: inline; }
.film-sound[aria-pressed="true"] .film-icon-muted,
.film-sound[aria-pressed="false"] .film-icon-waves { display: none; }

/* A phone gets a square frame, so the words keep a size that can be read. */
@media (max-width: 600px) {
  .film-frame { aspect-ratio: 1 / 1; border-radius: var(--radius-md); }
  .film-still h2 { font-size: 4.8cqw; }
  .film-controls { right: 0.5rem; bottom: 0.5rem; gap: 0.375rem; }
  .film-button,
  .film-sound { width: 2rem; height: 2rem; }
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.section { padding: 5.5rem 0; }
.section.compact { padding: 3.5rem 0; }

.section-heading {
  max-width: 53.125rem;
  margin-bottom: 2.2rem;
}

.section-heading p { margin: 1rem 0 0; color: var(--muted); font-size: 1.05rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 1.625rem;
  height: 2px;
  border-radius: 62.4375rem;
  background: currentColor;
}

/* MGAM's own hero, as a section of this page: words beside the orb. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(22.5rem, 0.95fr);
  align-items: center;
  gap: 4rem;
}

.split h1,
.split h2 { font-size: clamp(3rem, 6vw, 5.6rem); line-height: 1.08; letter-spacing: -0.04em; }

.split-copy {
  max-width: 41.25rem;
  margin: 1.55rem 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
}

.science-orbit {
  position: relative;
  min-height: 30rem;
  display: grid;
  place-items: center;
}

.orbit-core {
  position: relative;
  width: min(74vw, 21.875rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.92), transparent 18%),
    linear-gradient(145deg, #686868, #a1a1a1 60%, #d6d6d3);
  box-shadow: inset -1.5rem -1.875rem 4.375rem rgba(40, 40, 40, 0.16), 0 2.5rem 5.625rem rgba(48, 48, 47, 0.22);
}

.orbit-ring {
  position: absolute;
  inset: 9%;
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  border-radius: 50%;
  transform: rotate(22deg) scaleX(1.28) scaleY(0.58);
}

.orbit-ring.ring-2 { transform: rotate(-38deg) scaleX(1.18) scaleY(0.72); }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

.card {
  padding: 1.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-sm);
}

.card-number {
  display: grid;
  width: 2.625rem;
  height: 2.625rem;
  place-items: center;
  border-radius: 0.8125rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 850;
}

.card h3 { margin: 1.05rem 0 0.45rem; }
.card p { margin: 0; color: var(--muted); }

.cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--teal-soft) 60%, var(--surface)));
}

.cta-panel h2 { font-size: clamp(2.1rem, 4vw, 3.7rem); }
.cta-panel p { margin: 0.7rem 0 0; color: var(--muted); }

/* ── The image wall (home page) ─────────────────────────────────────────── */

/* The film's pictures (img/wall, cut from img/film: every one public domain
   or CC0, img/film/CREDITS.txt) as one mosaic under the hero, which spreads
   apart as it scrolls into view: each picture goes out from the middle, the
   nearer ones furthest, and shrinks, and the room left in the middle is
   Elovaren's line. site.js sets .is-live and --p, how far it has spread (0 to 1), and
   each picture's way out (--tx, --ty) and last size (--ts). With reduced
   motion it stands spread; without scripting, and on a phone, the words go
   under the pictures, which stay put. */
.wall {
  --p: 0;
  --gap: 0.5rem;
  position: relative;
  container-type: inline-size;
  padding: 3rem 0 4rem;
  overflow: hidden;
}

.wall-field {
  --side: min(90rem, calc(100cqw - 2 * var(--gutter)));
  position: relative;
  width: var(--side);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: calc((var(--side) - 11 * var(--gap)) / 12);
  grid-auto-flow: dense;
  gap: var(--gap);
}

.wall-field > img,
.mosaic-field > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.1875rem;
  background: var(--surface-2);
}

.wall-field > .t-big,
.mosaic-field > .t-big { grid-column: span 2; grid-row: span 2; }
.wall-field > .t-tall,
.mosaic-field > .t-tall { grid-row: span 2; }
.wall-field > .t-wide,
.mosaic-field > .t-wide { grid-column: span 2; }

/* The inner pages' picture walls (the owner, 2026-10-29: Life Sciences, For
   government and Company should have "a lot of images too"): the home
   wall's mosaic, standing still, under each page's opening. Fifteen to
   eighteen pictures to a page (the owner took five out), none of them used
   anywhere else on the site (img/life, img/government, img/company, each
   with its CREDITS.txt; cut by tools/page-pictures). Three rows on a wide
   screen, six on a phone; each wall's order of tile shapes fills both with
   no gap. */
.mosaic { container-type: inline-size; padding: 0 0 1rem; }

.mosaic-field {
  --gap: 0.5rem;
  --side: min(90rem, calc(100cqw - 2 * var(--gutter)));
  width: var(--side);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: calc((var(--side) - 11 * var(--gap)) / 12);
  grid-auto-flow: dense;
  gap: var(--gap);
}

@media (max-width: 620px) {
  .mosaic-field {
    --gap: 0.375rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: calc((var(--side) - 5 * var(--gap)) / 6);
  }
}

/* A picture on one of these walls pops out under the pointer, as the cards
   do (the owner, 2026-10-29): it grows a little over its neighbours, with a
   deeper shadow, springing a touch as it comes up, while its name shows. Only
   these walls: the home wall's pictures already move as it opens, and the
   pictures in cards pop with their card. */
.mosaic-field > img { transition: transform 320ms ease, box-shadow 320ms ease; }

@media (hover: hover) and (pointer: fine) {
  .mosaic-field > img:hover {
    z-index: 1;
    transform: scale(1.06);
    box-shadow: var(--shadow-up);
    transition-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1), ease;
  }
}

.wall.is-live .wall-field > img {
  transform:
    translate(calc(var(--tx, 0px) * var(--p)), calc(var(--ty, 0px) * var(--p)))
    scale(calc(1 - (1 - var(--ts, 0.6)) * var(--p)));
  will-change: transform;
}

.wall-message {
  position: relative;
  z-index: 1;
  width: min(38.75rem, calc(100% - 2 * var(--gutter)));
  margin: 2.5rem auto 0;
  text-align: center;
}

.wall-message h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
.wall-message p { max-width: 52ch; margin: 0.9rem auto 1.5rem; color: var(--muted); }

.wall.is-live { padding: 6rem 0 7rem; }

.wall.is-live .wall-message {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  /* In once the pictures are out of its way: from 78% spread to 98%. */
  opacity: clamp(0, calc(var(--p) * 5 - 3.9), 1);
}

.wall.is-live .wall-message h2 { font-size: clamp(2rem, 3.4vw, 3rem); }

.wall.is-live:not(.is-open) .wall-message { visibility: hidden; }

/* The line's rainbow waits for the line. */
.wall.is-live:not(.is-open) .rainbow.is-seen { animation: none; }

/* The page stops here for a moment (the owner, 2026-11-01: "something that
   stops you for a second or two"): the wall stays in the middle of the screen
   for most of a screen's height of scrolling, while its pictures finish
   spreading and the line comes in, and then the page moves on. It is plain
   sticky positioning, so a wheel, a trackpad, the keys and the scrollbar all
   keep working and no one is held for a set time. site.js sets .is-holding and
   --rest, where the wall's top comes to rest; with reduced motion, on a phone
   or without scripting there is no stop. */
.wall-hold.is-holding::after { content: ""; display: block; height: 70vh; }
.wall-hold.is-holding > .wall { position: sticky; top: var(--rest, 0px); }

/* Latest: what were Latest and Learn more, combined (the owner, 2026-11-01:
   "I meant to combine latest and learn more"), one heading over one row of
   cards as wide as the image wall. */
.more-title {
  margin-bottom: 1.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.more-tag {
  align-self: flex-start;
  padding: 0.2rem 0.7rem;
  border-radius: 62.4375rem;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

/* A row as wide as the image wall's (the owner, 2026-10-29: "widen these
   cards out"). */
.wrap.wide { width: min(90rem, calc(100% - 2 * var(--gutter))); }

/* As Anthropic's release cards: what and when, a drawn picture (img/art, so no
   picture on the page appears twice), two facts with a link each, and a way
   in. Four to a row, where each has room for its facts. */
.news-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

.news-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.3rem 1.3rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.news-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.news-card h3 { margin: 0.2rem 0 0; font-size: 1.3rem; }
.news-card .rainbow { --rainbow-rest: var(--muted); }
.news-card > p:not(.news-meta) { margin: 0; color: var(--muted); font-size: 0.95rem; }

.news-rows { margin: auto 0 0; padding-top: 0.6rem; }

.news-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.news-rows dt { color: var(--muted); }
.news-rows dd { margin: 0; text-align: right; }
.news-rows a { color: var(--text); font-weight: 650; text-decoration: none; }
.news-rows a:hover { text-decoration: underline; }

.news-button { width: 100%; min-height: 2.625rem; margin-top: 0.4rem; font-size: 0.92rem; }

/* Where the row's cards are narrowest a fact can take two lines; room for that
   in every card keeps the facts in line across the row. */
@media (min-width: 1201px) and (max-width: 1340px) {
  .news-rows { min-height: 7.5rem; }
}

@media (max-width: 1200px) {
  .news-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .news-cards { grid-template-columns: 1fr; }
}

/* What Hexi's nervous system does: MGAM's cards, with no number over them.
   Each card's picture is the wiring Hexi runs, with what that part of Hexi
   lit up in it (img/brain); two to a row between phone and desktop, since a
   card the page's width would make each picture as tall as a screen. */
.nerves-parts .card h3 { margin-top: 0; }
.nerves-parts .section-heading p a { color: var(--text); }
.nerves-parts .card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: 0 0 1.05rem;
  border-radius: var(--radius-sm);
}

@media (max-width: 900px) and (min-width: 621px) {
  .nerves-parts .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The system card's pictures, each over its section's panel, with what it
   shows under it. */
.figure { margin: 0 0 1.25rem; }
.figure-hero { margin: 2.4rem 0 0; }
.figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.figure figcaption { max-width: 82ch; margin: 0.75rem 0.25rem 0; color: var(--muted); font-size: 0.92rem; }

/* What Hexi's code holds it to, four of MGAM's numbered cards in a row, close
   under the opening of their page (how-hexi-behaves.html, off the home page
   since 2026-11-01). */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.page-hero.behaves-hero { padding-bottom: 2.2rem; }
.behaves-hero p a { color: var(--text); }
.section.compact.behaves { padding-top: 0; }

@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .wall { --gap: 0.375rem; padding: 2rem 0 3rem; }
  .wall-field { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: calc((var(--side) - 5 * var(--gap)) / 6); }
  .wall-field > :nth-child(n + 19) { display: none; }
}

/* Every card pops out under the pointer (the owner, 2026-10-29: "each card
   pop out, when you hover over it"): it rises and grows a little, springing a
   touch as it comes up, casts a deeper shadow, and settles back as the pointer
   leaves. Only where there is a pointer to hover with, so a tap on a phone
   leaves no card raised; a news card that the keyboard has reached comes up
   too. With reduced motion, the rule at the end of this file takes the movement
   away, and the card simply stands raised. */
.card,
.news-card { transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease; }

@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .news-card:hover {
    transform: translateY(-0.5rem) scale(1.03);
    transition-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1), ease, ease;
  }
  .card:hover,
  .news-card:hover { border-color: color-mix(in srgb, var(--text) 16%, var(--line)); box-shadow: var(--shadow-up); }
}

.news-card:has(:focus-visible) {
  transform: translateY(-0.5rem) scale(1.03);
  border-color: color-mix(in srgb, var(--text) 16%, var(--line));
  box-shadow: var(--shadow-up);
}

/* ── Inner pages ────────────────────────────────────────────────────────── */

.page-hero { padding: 5.5rem 0 3.3rem; }
.page-hero h1 { max-width: 20ch; }
.page-hero p { max-width: 47.5rem; margin: 1.25rem 0 0; color: var(--muted); font-size: 1.15rem; }

.hero-flag {
  width: 2.375rem;
  height: auto;
  margin: 0 0 1.4rem;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 2px;
  box-shadow: 0 2px 0.375rem rgba(25, 20, 18, 0.10);
}

/* Hex's rows (a label in the serif, what there is to say beside it), set
   inside one of MGAM's cards. */
.panel {
  padding: clamp(0.5rem, 2vw, 1rem) clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-sm);
}

.rows { margin: 0; }

.rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 0.375rem 2rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}

.rows > div:first-child { border-top: 0; }

.rows dt {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.rows dd {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  text-wrap: pretty;
}

.rows dd ul { margin: 0; padding-left: 1.25rem; }
.rows dd li { margin: 0.25rem 0; }

/* A list that waits behind its summary until asked for (the product service
   codes): closed when the page opens, with the footer's chevron. */
.codes > summary {
  display: inline-block;
  color: var(--text);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.codes > summary::-webkit-details-marker { display: none; }
.codes > summary:hover { text-decoration: underline; }

.codes > summary::after {
  content: "";
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-left: 0.5625rem;
  border-right: 1.5px solid;
  border-bottom: 1.5px solid;
  transform: translateY(-0.1875rem) rotate(45deg);
  transition: transform 200ms ease;
}

.codes[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.codes[open] > ul { margin-top: 0.5rem; }
.rows .code { color: var(--text); white-space: nowrap; }
.rows a { color: var(--text); }

@media (max-width: 760px) {
  .rows > div { grid-template-columns: 1fr; }
}

/* The company page's three companies, each with its own mark over its name:
   Elovaren's wordmark, Hex Infrastructure's hexagons, MGAM's dot. */
.companies .co-logo {
  display: flex;
  align-items: center;
  height: 2.125rem;
  margin-bottom: 0.5rem;
}

.companies .wordmark { width: 6.75rem; }
.companies .hex-mark { width: 2.125rem; height: 2.125rem; color: var(--text); }

.companies .mgam-dot {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--text);
}

/* How a name is said, after it, as MGAM's own site gave it: "(M-Gam)". */
.say {
  color: var(--muted);
  font-size: 0.8em;
  white-space: nowrap;
}

/* The quote on the company page: one of six, picked at random (site.js),
   with who said it and where under it. */
.quote { max-width: 53.75rem; margin: 0; }
.quote blockquote { margin: 0; }

.quote p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.quote figcaption { margin-top: 1.1rem; color: var(--muted); font-weight: 650; }

/* ── The pipeline table, as MGAM sets it ────────────────────────────────── */

.pipeline-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.pipeline-table { width: 100%; min-width: 55rem; border-collapse: collapse; }

.pipeline-table th,
.pipeline-table td {
  padding: 1.05rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.pipeline-table tr:last-child td { border-bottom: 0; }

.pipeline-table th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.program-id { color: var(--accent-strong); font-weight: 850; }
.program-title { font-weight: 750; }
.program-sub { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.86rem; }

.stage-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 62.4375rem;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

/* An unannounced program: grey instead of teal. */
.stage-pill.quiet { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.rows dd > .stage-pill { margin-right: 0.6rem; }

/* Gradus in the table and its heading open the program's own page. */
.program-link,
.program-heading-link { text-decoration: none; }
.program-link:hover,
.program-heading-link:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* ── Project Gradus: the site's one dark page, laid out like Anthropic's
   Project Glasswing page. The site's colours are turned over here, so the
   header and footer follow. ─────────────────────────────────────────────── */
body.dark {
  --bg: #141413;
  --surface: #1c1c1b;
  --surface-2: #2a2a28;
  --text: #f0efea;
  --muted: #a3a29d;
  --line: #31312e;
  --accent: #a3a29d;
  --accent-strong: #e4e3de;
  --accent-soft: #2a2a28;
  --selection-bg: #5d5d59;
  --selection-text: #ffffff;
  --shadow: 0 1.125rem 3.75rem rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.35);
  color-scheme: dark;
  background: var(--bg);
}

body.dark .site-header.scrolled { box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0.35); }

.gradus {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  padding: 3rem 0 4rem;
}

.gradus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.gradus-copy { justify-self: center; max-width: 25rem; text-align: center; }

.gradus-copy h1 {
  margin: 0 0 1.1rem;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.6vw, 4.6rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.gradus-copy p { margin: 0 auto 1.7rem; color: #fff; font-size: 1.08rem; line-height: 1.6; }

.gradus-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: 0.5rem;
  background: #fff;
  color: #141413;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

.gradus-button:hover { background: #e9e8e3; transform: translateY(-1px); }

/* The name rises into place a letter at a time (gradus.js wraps each letter),
   then a soft light passes along it every few seconds. */
.gradus-copy h1 .word { display: inline-block; white-space: nowrap; }

.gradus-copy h1 .ch {
  display: inline-block;
  animation:
    gradus-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.15s + var(--i) * 65ms) both,
    gradus-glint 7s ease-in-out calc(2.4s + var(--i) * 80ms) infinite;
}

@keyframes gradus-rise { from { opacity: 0; transform: translateY(0.42em); filter: blur(0.5rem); } }
@keyframes gradus-glint {
  0%, 14%, 100% { text-shadow: none; }
  7% { text-shadow: 0 0 0.3em rgba(255, 255, 255, 0.6); }
}

.gradus-figure { justify-self: center; width: min(100%, 35rem); margin: 0; }
.gradus-figure img { width: 100%; height: auto; animation: gradus-in 1.4s ease 0.15s both; }

/* The staircase as a 3D model (gradus.js draws it); it replaces the picture. */
.gradus-stairs {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.875rem;
  cursor: grab;
  touch-action: pan-y;
}

.gradus-stairs:active { cursor: grabbing; }
.gradus-stairs:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.45); outline-offset: 0.375rem; }

.gradus-hint {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
  transition: opacity 700ms ease;
}

.gradus-hint.is-gone { opacity: 0; }

@keyframes gradus-in { from { opacity: 0; transform: translateY(0.625rem); } }

@media (prefers-reduced-motion: reduce) {
  .gradus-figure img,
  .gradus-copy h1 .ch { animation: none; }
}

@media (max-width: 860px) {
  .gradus { min-height: 0; padding: 2.5rem 0 3rem; }
  .gradus-grid { grid-template-columns: 1fr; }
  .gradus-figure { width: min(100%, 26.25rem); }
}

@media (max-width: 760px) {
  .pipeline-table-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .pipeline-table { min-width: 0; border-collapse: separate; border-spacing: 0; }
  .pipeline-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .pipeline-table tbody { display: grid; gap: 1rem; }
  .pipeline-table tr {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .pipeline-table td { display: grid; gap: 0.28rem; width: 100%; padding: 0.85rem 1rem; }
  .pipeline-table td::before {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pipeline-table td:nth-child(1)::before { content: "Program"; }
  .pipeline-table td:nth-child(2)::before { content: "Indication"; }
  .pipeline-table td:nth-child(3)::before { content: "Candidate"; }
  .pipeline-table td:nth-child(4)::before { content: "Regulatory milestone"; }
  .pipeline-table tr:last-child td:not(:last-child) { border-bottom: 1px solid var(--line); }
  .pipeline-table td:last-child { border-bottom: 0; }
  .stage-pill { justify-self: start; max-width: 100%; line-height: 1.35; white-space: normal; }
}

/* ── The FDA letter, as MGAM shows it ───────────────────────────────────── */

.record-kicker {
  margin: 0 0 0.85rem;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.record { width: min(100%, 57.5rem); margin: 0 auto 1.6rem; }

.record-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  background: #fff;
  box-shadow: var(--shadow);
}

.record-scroll img { width: 57.5rem; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.record figcaption { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.82rem; text-align: center; }

/* ── Legal pages, as MGAM sets them ─────────────────────────────────────── */

.breadcrumb { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; color: var(--muted); font-size: 0.88rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-strong); }

.effective-date {
  display: inline-flex;
  padding: 0.4rem 0.7rem;
  border-radius: 62.4375rem;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.82rem;
}

.legal-layout { display: grid; grid-template-columns: 15rem minmax(0, 47.5rem); gap: 3rem; align-items: start; }

.legal-nav {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
}

.legal-nav strong { display: block; margin-bottom: 0.65rem; }

/* The rail beside the legal pages (the owner, 2026-10-29: markers to jump to
   a section, and holding the mouse button down to run up and down the page
   fast). A marker for each section sits on a track; the track is ink as far
   as the reader has come, a thumb marks where they are, and the section being
   read is in ink. A click on a section jumps to it. Pressing on the rail and
   moving up or down runs through the page as fast as the hand moves, the rail
   standing for the whole page (site.js). That works only beside the text,
   where the rail stays in view; on a narrow screen the rail is a list at the
   top, and its links still jump. */
.rail-body { position: relative; }
.rail ol { margin: 0; padding: 0; list-style: none; }

.rail-body::before,
.rail-fill {
  content: "";
  position: absolute;
  top: 0;
  left: 0.3125rem;
  width: 2px;
  border-radius: 2px;
}

.rail-body::before { bottom: 0; background: var(--line); }
.rail-fill { height: var(--fill, 0px); background: var(--text); }

.rail-thumb {
  position: absolute;
  top: var(--thumb, 0px);
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: -0.375rem;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--text) 14%, transparent);
  pointer-events: none;
}

.rail a {
  position: relative;
  display: block;
  padding: 0.38rem 0 0.38rem 1.45rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
  -webkit-user-drag: none;
  user-select: none;
}

.rail a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1px;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: -0.3125rem;
  box-sizing: border-box;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
}

.rail a:hover,
.rail a[aria-current] { color: var(--text); }
.rail a[aria-current] { font-weight: 650; }
.rail a.is-past::before { border-color: var(--text); }
.rail a[aria-current]::before { border-color: var(--text); background: var(--text); }

@media (min-width: 901px) {
  .rail-body { cursor: grab; touch-action: none; }
}

.is-scrubbing,
.is-scrubbing * { cursor: grabbing !important; user-select: none !important; }

.legal-copy h2 { margin: 2.5rem 0 0.65rem; font-family: var(--sans); font-size: 1.4rem; letter-spacing: -0.01em; scroll-margin-top: 6.5625rem; }
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p, .legal-copy li { color: var(--muted); }
.legal-copy ul { padding-left: 1.25rem; }

/* ── Footer: Hex's columns and facts, MGAM's dots ───────────────────────── */

.site-footer {
  margin-top: 4rem;
  padding: 3.5rem 0 1.5rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--muted);
  font-size: 0.92rem;
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}

/* MGAM's coloured dots, made Elovaren's: once the reader has scrolled and the
   footer is in view, they spring out of the wordmark's "o" one after another,
   arc up over the word and come down in a row under it, spread from the "e" to
   the "n", taking their colours as they land (site.js flies them). Everything
   is sized from the wordmark's width, --wm. */
.foot-brand {
  --wm: 7.375rem;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
}

.foot-brand .wordmark { width: var(--wm); }

.dots {
  display: flex;
  justify-content: space-between;
  width: var(--wm);
  margin-top: calc(var(--wm) * 0.06);
}

.dot {
  display: block;
  width: calc(var(--wm) * 0.076);
  height: calc(var(--wm) * 0.076);
  border-radius: 50%;
  background: var(--dot-color);
  opacity: 0;
}

.dot:nth-child(1) { --dot-color: hsl(352 70% 46%); }
.dot:nth-child(2) { --dot-color: hsl(32 70% 46%); }
.dot:nth-child(3) { --dot-color: hsl(96 70% 38%); }
.dot:nth-child(4) { --dot-color: hsl(204 70% 46%); }
.dot:nth-child(5) { --dot-color: hsl(276 70% 50%); }
.foot-brand.is-expanded .dot { opacity: 1; }

.foot-tag {
  max-width: 30ch;
  margin: 1.1rem 0 0;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.foot-tag em { color: var(--accent); font-style: normal; }
.foot-line { max-width: 28.75rem; margin: 0.6rem 0 0; }

.foot-facts { max-width: 30em; margin: 1.6rem 0 0; }
.foot-facts > div + div { margin-top: 0.875rem; }

.foot-facts dt {
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.foot-facts dd { margin: 0; color: var(--text); }
.foot-facts dd p { margin: 0; color: var(--muted); }
.foot-facts dd ul { margin: 0; padding: 0; list-style: none; }
.foot-facts dd li { margin: 0.375rem 0 0; color: var(--muted); }
.foot-facts .code { color: var(--text); }

.foot-facts summary {
  display: inline-block;
  margin-top: 0.375rem;
  cursor: pointer;
  list-style: none;
}

.foot-facts summary::-webkit-details-marker { display: none; }
.foot-facts summary:hover { text-decoration: underline; }

.foot-facts summary::after {
  content: "";
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-left: 0.5625rem;
  border-right: 1.5px solid;
  border-bottom: 1.5px solid;
  transform: translateY(-0.1875rem) rotate(45deg);
  transition: transform 200ms ease;
}

.foot-facts details[open] > summary::after { transform: translateY(1px) rotate(225deg); }

.foot-facts .holder { margin-top: 1rem; font-size: 0.82rem; }

.site-footer .label {
  margin: 0 0 0.75rem;
  color: var(--text);
  font-weight: 750;
}

.site-footer ul.links { margin: 0; padding: 0; list-style: none; }
.site-footer ul.links li { margin: 0.38rem 0; }
/* The footer's links as Hex's site sets them: in ink, and underlined under
   the pointer. */
.site-footer ul.links a { color: var(--text); text-decoration: none; }

.site-footer ul.links a:hover,
.site-footer ul.links a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.us-flag {
  width: 1.5rem;
  height: auto;
  margin-top: 1rem;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 2px;
  box-shadow: 0 2px 0.375rem rgba(25, 20, 18, 0.10);
}

.footer-disclaimer { max-width: 38.75rem; margin: 1rem 0 0; font-size: 0.76rem; line-height: 1.6; }

.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}

.foot-copy { display: flex; flex-direction: column; gap: 0.375rem; }
.foot-copy > span:first-of-type { color: var(--text); }

/* The mission, as Anthropic's footer carries its own. */
.foot-mission { max-width: 62ch; margin: 0 0 0.4rem; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.foot-mission strong { color: var(--text); }
.foot-legal-note { max-width: 62ch; font-size: 0.72rem; line-height: 1.45; }

.foot-badge a {
  display: inline-flex;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: #fff;
  line-height: 0;
  transition: transform 160ms ease;
}

.foot-badge a:hover { transform: translateY(-1px); }
.foot-badge img { width: auto; height: 2rem; }

/* The CSA AI Trustworthy Pledge, as one line of small bold black text under the
   NVIDIA badge: the owner signed it for Elovaren LLC on 1 November 2026 and chose
   this line over CSA's badge graphic. It turns white on the dark page. */
.foot-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; }
.foot-pledge { margin: 0; color: #000; font-size: 0.72rem; font-weight: 700; line-height: 1.35; }
body.dark .foot-pledge { color: #fff; }

/* MGAM's Claude for Startups membership, in the words and the plain text Anthropic's marketing team allowed in
   writing on 2 November 2026: no logo, no link and not bold, and nothing near it may imply sponsorship,
   endorsement, investment or a partnership with Anthropic. Hex's AWS Activate line has the same look: plain text,
   as Amazon's trademark team allowed in writing on 4 November 2026. */
.foot-member { margin: 0; color: #000; font-size: 0.72rem; font-weight: 400; line-height: 1.35; }
body.dark .foot-member { color: #fff; }
@media (max-width: 620px) { .foot-badge { align-items: flex-start; } }

/* The footer's last word, in dust (footer-dust.js): as wide as the page, with
   a little room above it (--lift, a part of the word's height), the whole word
   (--keep, how much of its height the band holds; the owner asked for it whole
   on 1 November 2026, after seeing it cut off by the page's edge), and room
   under it, drawn down over the footer's own bottom padding. The script shows
   it; without scripts it stays hidden. */
.foot-giant {
  --lift: 0.12;
  --keep: 1;
  position: relative;
  margin: clamp(1.5rem, 4vw, 3.5rem) 0 -1.5rem;
  padding: 0 clamp(0.75rem, 1.6vw, 1.75rem) clamp(4rem, 5vw, 5rem);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.foot-giant::before {
  content: "";
  display: block;
  aspect-ratio: 1602.7 / calc(344.3 * (var(--lift) + var(--keep)));
}

.foot-giant canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* On a phone the room under the word is a little taller, for what covers the
   page's end there: the browser's own bar. */
@media (max-width: 620px) {
  .foot-giant { padding-bottom: 5.5rem; }
}

/* ── Smaller screens ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .science-orbit { min-height: 25rem; }
  .grid-3 { grid-template-columns: 1fr; }
  .cta-panel { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-nav { position: static; }
  .rail-fill, .rail-thumb { display: none; }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .section { padding: 4rem 0; }
  .page-hero { padding: 3.5rem 0 2.5rem; }
  .hero-scene { padding-bottom: 3rem; }
  .science-orbit { min-height: 20rem; }
  .orbit-core { width: min(66vw, 16.25rem); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: column-reverse; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: 0.01ms !important; }
}