/* Mirovia landing page. One poster, one destination.
   The design language is "the machine room": four flat inks screened onto
   a warm near-black ground — no gradient washes — with engraved hairlines
   for the financial register and CRT glow confined to instruments. The one
   motion idea is gone to print: only the instruments blink. The brand core
   (inks, faces, scales) is rendered by tools/brandgen into
   generated/tokens.css — the console reads the same bytes; the :root below
   carries only what this surface alone wears. */

@import url("generated/tokens.css");

@font-face {
  font-family: Audiowide;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/audiowide-latin.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root {
  /* CRT presentation, worn by this surface alone */
  --phosphor: var(--ink-ochre-lit); /* data inside black fields, nowhere else */
  --glow: 0 0 8px rgb(242 236 220 / 40%); /* phosphor bloom on lit content */
  --glow-phosphor: 0 0 7px rgb(236 169 46 / 40%); /* the lit ochre's own bloom */
  --scanline: repeating-linear-gradient(180deg, transparent 0 2px, rgb(0 0 0 / 55%) 2px 3px);

  /* motion: one interaction transition; reduced-motion zeroes the token */
  --transition: background 0.15s ease, color 0.15s ease;

  /* the parent's yellow, sampled from panthalassa.com on 2026-10-29;
     worn by the parent's mark in the footer and by nothing else */
  --parent-yellow: #fdb802;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* macOS rubber-band: no bounce, and never a white canvas behind it. */
  overscroll-behavior-y: none;
  background-color: var(--ground);
}

body {
  min-height: 100svh;
  overflow-x: clip;
  background: var(--ground);
  color: var(--cream);
  font-family: var(--font-display);
}

::selection {
  background: var(--ink-red-deep);
  color: var(--cream);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* --- the sea --------------------------------------------------------------
   Full-bleed under the grain, the keyline and the poster; the ground
   stays beneath it for the frames before the first one lands. */

.sea {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* --- the ground's grain --------------------------------------------------- */

.defs {
  position: absolute;
  width: 0;
  height: 0;
}

.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.2;
  z-index: 1;
}

.keyline {
  position: fixed;
  inset: 18px;
  border: 1px solid var(--edge);
  pointer-events: none;
  z-index: 2;
}

main {
  position: relative;
  z-index: 3;
}

/* --- the poster -------------------------------------------------------------
   The teaser is one screen: the poster centers in it, and only viewports
   shorter than the mark itself ever scroll. */

.teaser {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.poster {
  flex: 1;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3.5svh, var(--sp-4));
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  text-align: center;
}

/* The word is the poster (2026-11-04): display size over the sea. */
.brand {
  font-size: clamp(1.5rem, 4.5vmin, 2.6rem);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  text-indent: var(--ls-wide);
}

/* The swell O inside the word: an inline box the tracking does not reach,
   so it carries the tracking itself. Its size and seat ride inline, from
   the face's own metrics. */
.brand .glyph {
  display: inline-block;
  overflow: visible;
  margin-right: var(--ls-wide);
}

.kicker {
  font-size: clamp(1.05rem, 3vmin, 1.5rem);
  letter-spacing: var(--ls-kicker);
  text-indent: var(--ls-kicker);
  line-height: 1;
}

.kicker:first-child {
  margin-bottom: var(--sp-2);
}

.kicker:last-child {
  margin-top: var(--sp-2);
}

/* --- the instruments -------------------------------------------------------
   Every black field is a powered-on CRT: faint scanlines over the content,
   phosphor bloom on what it displays. The print stays flat; only the
   instruments glow. */

.code-card::after,
.cta::after,
.topnav::after,
.rate-card::after,
.plate-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--scanline);
  opacity: 0.32;
}

/* --- the chaos plates ------------------------------------------------------
   Each panel keeps one instrument running its equations; plates.js draws
   them. Without JS the frames stay dark instruments under the stars. */

.plate {
  margin: var(--sp-4) 0 0;
}

.plate-face {
  position: relative;
  width: clamp(200px, 34vmin, 260px);
  aspect-ratio: 1;
  background: var(--field);
  border: 1px solid var(--rule-c);
}

.plate-face svg,
.plate-face canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.plate-label {
  margin-top: 0.9rem;
  font-size: var(--text-xs);
  letter-spacing: var(--ls-head);
  opacity: 0.75;
}

/* --- calls to action ------------------------------------------------------ */

.cta {
  position: relative;
  display: inline-block;
  padding: 0.9rem 2.2rem;
  font-family: inherit;
  font-size: var(--text-s);
  letter-spacing: var(--ls-kicker);
  text-indent: var(--ls-kicker);
  text-decoration: none;
  color: var(--cream);
  /* glass over the sea: the field at partial alpha, mixed in oklab */
  background: color-mix(in oklab, var(--field) 72%, transparent);
  border: 1px solid var(--rule-c);
  text-shadow: var(--glow);
  transition: var(--transition);
}

.cta:hover,
.cta:focus-visible {
  color: var(--ground);
  background: var(--cream);
  border-color: var(--cream);
  text-shadow: none;
}

.panel .cta {
  margin-top: var(--sp-4);
}

/* The knife switch: open at rest, thrown on hover. */
.cta .switch {
  width: 1.6em;
  height: auto;
  vertical-align: -0.2em;
  margin-right: 0.7em;
  overflow: visible;
}

.cta .lever {
  transform-box: view-box;
  transform-origin: 5px 15px;
  transform: rotate(-26deg);
  transition: transform 0.18s ease;
}

.cta:hover .lever,
.cta:focus-visible .lever {
  transform: rotate(0deg);
}

/* The one plain sentence on the page: information, so the muted paper ink. */
.poster-line {
  max-width: 30rem;
  font-family: var(--font-mono);
  font-size: var(--text-m);
  line-height: 1.8;
  color: var(--ink-grey);
}

/* --- the quickstart ------------------------------------------------------ */

.code-card {
  position: relative;
  margin: var(--sp-4) 0 0;
  max-width: 34rem;
  background: var(--field);
  border: 1px solid var(--rule-c);
  text-align: left;
}

.code-card pre {
  margin: 0;
  padding: var(--sp-3) var(--sp-3);
  overflow-x: auto;
}

.code-card code {
  font-family: var(--font-mono);
  font-size: var(--text-s);
  line-height: 1.7;
  color: var(--cream);
  text-shadow: var(--glow);
}

.code-card .copy {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.3rem 0.8rem;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: var(--ls-head);
  color: var(--cream);
  background: transparent;
  border: 1px solid var(--rule-c);
  cursor: pointer;
  transition: var(--transition);
}

.code-card .copy:hover,
.code-card .copy:focus-visible {
  color: var(--ground);
  background: var(--cream);
}

/* --- links: one hover grammar, the cream chip ---------------------------- */

.docs-link,
footer a,
.legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-c);
  transition: var(--transition);
}

.docs-link:hover,
.docs-link:focus-visible,
footer a:hover,
footer a:focus-visible,
.legal a:hover,
.legal a:focus-visible {
  color: var(--ground);
  background: var(--cream);
  border-bottom-color: var(--cream);
}

.docs-link {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-kicker);
}

/* The rate card holds the cards (or the curl invitation). */
.rate-card {
  position: relative;
  margin: var(--sp-4) 0 0;
  max-width: 44rem;
  padding: var(--sp-3);
  background: var(--field);
  border: 1px solid var(--rule-c);
  font-family: var(--font-mono);
  text-align: left;
}

.rate-card .rate-fallback {
  color: var(--phosphor);
  font-size: var(--text-s);
  text-shadow: var(--glow-phosphor);
}

.rate-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s);
}

.rate-card th {
  color: var(--cream);
  opacity: 0.7;
  font-weight: 400;
  letter-spacing: var(--ls-head);
  font-size: var(--text-xs);
  text-align: right;
  padding: 0 0 0.6rem 1rem;
}

.rate-card td {
  color: var(--phosphor);
  text-shadow: var(--glow-phosphor);
  text-align: right;
  padding: 0.25rem 0 0.25rem 1rem;
  font-variant-numeric: tabular-nums;
}

.rate-card th:first-child,
.rate-card td:first-child {
  text-align: left;
  padding-left: 0;
}

.rate-card td:first-child {
  color: var(--cream);
  text-shadow: none;
}

.rate-card .rate-note {
  margin-top: var(--sp-3);
  color: var(--cream);
  opacity: 0.55;
  font-size: var(--text-xs);
}

/* --- the panels ------------------------------------------------------------
   Caption grammar from the posters: left-anchored, a dot stack opening
   each section. */

.panel {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4);
  text-align: left;
  scroll-margin-top: var(--sp-5);
}

.panel::before {
  content: "•\A•\A•";
  white-space: pre;
  display: block;
  line-height: 0.85;
  font-size: var(--text-s);
  opacity: 0.5;
  margin-bottom: var(--sp-3);
}

.panel-kicker {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  opacity: 0.75;
  margin-bottom: var(--sp-2);
}

.panel h2 {
  font-size: var(--text-l);
  font-weight: 400;
  letter-spacing: var(--ls-head);
  line-height: 1.35;
  margin-bottom: var(--sp-3);
}

.panel > p:last-of-type {
  font-family: var(--font-mono);
  font-size: var(--text-m);
  line-height: 1.8;
}

.panel p code {
  font-family: var(--font-mono);
  border: 1px solid var(--rule-c);
  padding: 0 0.3em;
}

.panel-night {
  color: var(--cream);
}

/* --- footer ------------------------------------------------------------- */

footer {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  text-align: left;
  color: var(--cream);
}

footer p,
footer nav {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-head);
}

footer nav {
  margin-top: var(--sp-2);
}

/* The parent's line, centred under the poster: the mark in its yellow,
   the words in the display face, the hairline under the words alone. */
.parent {
  text-align: center;
  padding-top: 0;
}

.parent a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-head);
  border-bottom: none;
}

.parent a span {
  border-bottom: 1px solid var(--rule-c);
  transition: var(--transition);
}

.parent a:hover span,
.parent a:focus-visible span {
  border-bottom-color: var(--cream);
}

.parent-mark {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  fill: var(--parent-yellow);
}

/* --- the nav: absent on the poster, present past it -----------------------
   Ordered after the generic link and footer rules: selector groups stay in
   ascending specificity, so no rule can be shadowed by an earlier one. */

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem var(--sp-3);
  background: var(--field);
  border-bottom: 1px solid var(--rule-c);
  color: var(--cream);
  transform: translateY(-100%);
  transition: transform 0.25s ease;
}

body.past-poster .topnav {
  transform: translateY(0);
}

.topnav-brand {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

.topnav nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.topnav nav a {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-head);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}

.topnav nav a:hover,
.topnav nav a:focus-visible {
  color: var(--ground);
  background: var(--cream);
}

.topnav-console {
  border: 1px solid var(--rule-c);
  padding: 0.15rem 0.7rem;
}

/* --- legal pages --------------------------------------------------------- */

.legal-page {
  min-height: 100svh;
  background: var(--ground);
  color: var(--cream);
}

.legal {
  position: relative;
  z-index: 3;
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
}

.legal .brand {
  text-align: center;
  margin-bottom: var(--sp-5);
}

/* The blown fuse: the 404's circuit diagram. */
.legal .fuse {
  display: block;
  width: 7rem;
  height: auto;
  margin: 0 auto var(--sp-3);
  color: var(--ink-red); /* mark */
}

.legal h1 {
  font-size: var(--text-l);
  font-weight: 400;
  letter-spacing: var(--ls-head);
  text-align: center;
}

.legal .effective {
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: var(--ls-kicker);
  opacity: 0.7;
  margin: var(--sp-2) 0 var(--sp-5);
}

.legal h2 {
  font-size: var(--text-s);
  font-weight: 400;
  letter-spacing: var(--ls-head);
  margin: var(--sp-4) 0 var(--sp-1);
}

.legal p,
.legal code {
  font-family: var(--font-mono);
  font-size: var(--text-m);
  line-height: 1.8;
}

.legal footer {
  padding: var(--sp-5) 0 0;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: none;
  }

  html {
    scroll-behavior: auto;
  }

  .cta .lever {
    transition: none;
  }

  .topnav {
    transition: none;
  }
}