/* =============================================================
   Eden Platform — Vast Monochrome
   Visual system v20260527-vast-03
   Static, accessible, no dependencies.

   Direction:
   • Pure black-and-white world, depth through luminance only.
   • Foreground — rails, inscription. Crisp, no blur.
   • Mid-ground — horizon line, four named map-points.
   • Far ground — sky/haze gradients, a quiet white sun.

   Token note: legacy --green / --gold / --crimson / --ultra names are
   kept for call-site stability but their values are now grayscale.
   ============================================================= */

:root {
  color-scheme: dark;

  /* type stacks */
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-display: "Iowan Old Style", "Charter", "Source Serif Pro",
    ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono",
    Menlo, monospace;

  /* grid & rails */
  --grid: 48px;
  --rail: 48px;
  --side-nav: 58px;
  --gap: 28px;
  --max: 1680px;

  /* surface — pure black through graphite */
  --page: #050608;
  --page-2: #080a0c;
  --surface: #0b0d10;
  --surface-2: #101216;
  --surface-3: #15181c;

  /* ink — pure white through silver, no warmth */
  --ink: #f4f6f6;
  --ink-soft: color-mix(in srgb, var(--ink) 86%, var(--muted));
  --muted: #b5b8b8;
  --faint: #7a7d7e;
  --quiet: #4a4d4e;

  /* hairlines — all neutral */
  --line: rgba(220, 222, 222, 0.24);
  --line-strong: rgba(220, 222, 222, 0.38);
  --grid-line: rgba(220, 222, 222, 0.065);
  --grid-line-strong: rgba(220, 222, 222, 0.12);
  --hairline: rgba(244, 246, 246, 0.10);
  --hairline-warm: rgba(244, 246, 246, 0.06);

  /* signals — collapsed onto a single luminance scale.
     --green now = pure white-ink (the selected/active signal).
     --gold now = mid silver.    --crimson now = darker silver. */
  --green: #f4f6f6;
  --green-deep: #b8babc;
  --green-soft: rgba(244, 246, 246, 0.08);
  --green-glow: rgba(244, 246, 246, 0.16);
  --gold: #c9ccce;
  --gold-soft: rgba(201, 204, 206, 0.10);
  --crimson: #8c9092;
  --crimson-soft: rgba(140, 144, 146, 0.12);
  --ultra: #b5b8b8;
  --ultra-soft: rgba(181, 184, 184, 0.08);

  /* atmosphere */
  --selected-wash: rgba(237, 240, 232, 0.06);
  --selected-wash-strong: rgba(237, 240, 232, 0.115);
  --shadow: rgba(0, 0, 0, 0.42);
  --shadow-deep: rgba(0, 0, 0, 0.62);
  --shadow-long: 0 60px 120px -28px rgba(0, 0, 0, 0.7),
    0 28px 56px -22px rgba(0, 0, 0, 0.5);
  --edge-shadow: rgba(0, 0, 0, 0.5);
  --edge-glow: rgba(240, 242, 238, 0.06);
  --spot: rgba(240, 242, 238, 0.07);

  /* deep atmosphere — pure monochrome sky → horizon → haze.
     Sharper contrast: brighter horizon band, deeper ground shadow. */
  --sky-top: rgba(4, 5, 7, 0.98);
  --sky-mid: rgba(8, 10, 12, 0.78);
  --sky-bottom: rgba(4, 5, 7, 0.0);
  --horizon: rgba(244, 246, 246, 0.26);
  --horizon-soft: rgba(244, 246, 246, 0.10);
  --horizon-ink: rgba(232, 234, 234, 0.38);
  --haze: rgba(0, 0, 0, 0.56);              /* deeper ground shadow */
  --far-ink: rgba(180, 184, 184, 0.65);
  --paper-grain: transparent;
  --paper-crease: transparent;

  /* the quiet sun — defined center, faster falloff */
  --sun-glow: radial-gradient(
    circle at center,
    rgba(244, 246, 246, 0.46) 0%,
    rgba(244, 246, 246, 0.28) 14%,
    rgba(244, 246, 246, 0.13) 32%,
    rgba(244, 246, 246, 0.04) 58%,
    transparent 82%
  );

  /* rail-symbol */
  --rail-item: 48px;
  --rail-icon: 16px;
  --rail-label: 10px;
  --rail-glass: color-mix(in srgb, var(--page) 86%, transparent);
  --rail-symbol: color-mix(in srgb, var(--ink) 86%, var(--muted));
  --rail-symbol-active: var(--ink);
  --side-panel-bg: color-mix(in srgb, #121515 72%, var(--page));
  --side-panel-bg-glass: color-mix(in srgb, var(--side-panel-bg) 94%, transparent);
  --side-panel-bg-lift: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ink) 4.5%, transparent),
    transparent 42%
  );

  /* type scale — smaller, more confident. The title sits like a
     small white sun over a vast valley, not a marketing centerpiece. */
  --display-title: clamp(2.4rem, 4.6vw, 4rem);
  --display-2: clamp(1.6rem, 2.6vw, 2.05rem);
  --hero-line: clamp(0.95rem, 1.1vw, 1.06rem);

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 4px;

  /* pointer spot (set by app.js) */
  --spot-x: 50%;
  --spot-y: 50%;

  /* fixed horizon plane */
  --horizon-y: 70%;
  --horizon-scroll-y: 70vh;
  --horizon-y-pos: var(--horizon-y);
  --horizon-scroll-y-pos: var(--horizon-scroll-y);
  --orb-x: 55%;
  --mobile-bottom-inset: 0px;
  --mobile-viewport-bottom: 0px;
  --mobile-fixed-bottom: calc(
    var(--mobile-bottom-inset) + var(--mobile-viewport-bottom)
  );

  /* grid reveal (armed before CSS, animated by app.js) */
  --grid-reveal: 140%;
  --grid-opacity: 1;

  /* Atlas globe orb — dark mode tokens */
  --orb-base: var(--page);
  --orb-dot: color-mix(in srgb, #e6f3e0 78%, var(--ink) 22%);
  --orb-glow: color-mix(in srgb, #b8e0c2 60%, var(--ink) 40%);
  --orb-continent-opacity: 1;
  --orb-grid: rgba(220, 232, 220, 0.18);
  --orb-arc: rgba(220, 232, 220, 0.26);
  --orb-rim: rgba(220, 232, 220, 0.22);
  --orb-tick: rgba(220, 232, 220, 0.55);
  --orb-highlight: rgba(220, 236, 222, 0.16);
  --orb-shadow: rgba(0, 0, 0, 0.55);
  --orb-halo: #d8efe0;
  --orb-halo-strength: 0.85;
}

/* ---------- DAY MODE — Printed Studio Plate ---------- */
html[data-theme="light"] {
  color-scheme: light;

  /* Day mode — review light on white paper. Cool, neutral, no warmth.
     Charcoal ink on near-white stock. A printed studio plate. */
  --page: #f3f4f4;
  --page-2: #f6f7f7;
  --surface: #f9fafa;
  --surface-2: #e9eaea;
  --surface-3: #dadbdb;

  --ink: #14161a;
  --ink-soft: color-mix(in srgb, var(--ink) 88%, var(--muted));
  --muted: #555759;
  --faint: #7c7f81;
  --quiet: #a4a6a8;

  --line: rgba(20, 22, 26, 0.25);
  --line-strong: rgba(20, 22, 26, 0.42);
  --grid-line: rgba(20, 22, 26, 0.085);
  --grid-line-strong: rgba(20, 22, 26, 0.15);
  --hairline: rgba(20, 22, 26, 0.08);
  --hairline-warm: rgba(20, 22, 26, 0.05);

  /* Signals collapsed to luminance scale on paper.
     --green = charcoal ink (selected).
     --gold = mid gray.   --crimson = darker mid gray. */
  --green: #14161a;
  --green-deep: #000000;
  --green-soft: rgba(20, 22, 26, 0.06);
  --green-glow: rgba(20, 22, 26, 0.14);
  --gold: #555759;
  --gold-soft: rgba(85, 87, 89, 0.10);
  --crimson: #767879;
  --crimson-soft: rgba(118, 120, 121, 0.10);
  --ultra: #555759;
  --ultra-soft: rgba(85, 87, 89, 0.08);

  --selected-wash: rgba(20, 22, 26, 0.04);
  --selected-wash-strong: rgba(20, 22, 26, 0.08);

  /* Neutral, directional, gray shadows — paper drop, no warmth */
  --shadow: rgba(0, 0, 0, 0.10);
  --shadow-deep: rgba(0, 0, 0, 0.16);
  --shadow-long: 0 36px 64px -22px rgba(0, 0, 0, 0.14),
    0 18px 32px -16px rgba(0, 0, 0, 0.10);
  --edge-shadow: rgba(0, 0, 0, 0.10);
  --edge-glow: rgba(20, 22, 26, 0.04);
  --spot: rgba(20, 22, 26, 0.035);

  /* Paper field — diffuse cool light from above, with neutral shadow
     near the bottom edge. The page-wide Day crease is intentionally
     removed so fixed horizon lines do not cut through lower content. */
  --sky-top: rgba(255, 255, 255, 0.50);
  --sky-mid: rgba(230, 232, 234, 0.0);
  --sky-bottom: rgba(140, 142, 144, 0.16);
  --horizon: rgba(20, 22, 26, 0.06);
  --horizon-soft: rgba(20, 22, 26, 0.10);
  --horizon-ink: rgba(20, 22, 26, 0.38);    /* sharper ink hairlines */
  --haze: rgba(120, 122, 124, 0.16);        /* stronger paper shadow */
  --far-ink: rgba(60, 62, 64, 0.60);

  /* Paper grain — neutral, no warm cast. Layered into the body. */
  --paper-grain: repeating-linear-gradient(
    102deg,
    rgba(20, 22, 26, 0.020) 0 1px,
    transparent 1px 3px
  );
  --paper-crease: linear-gradient(
    180deg,
    transparent calc(52% - 1px),
    rgba(20, 22, 26, 0.10) 52%,
    transparent calc(52% + 1px)
  );

  /* sun on paper — a defined cool-ink disc, sharper falloff */
  --sun-glow: radial-gradient(
    circle at center,
    rgba(20, 22, 26, 0.30) 0%,
    rgba(20, 22, 26, 0.18) 14%,
    rgba(20, 22, 26, 0.08) 34%,
    rgba(20, 22, 26, 0.03) 58%,
    transparent 82%
  );

  --rail-glass: color-mix(in srgb, var(--page) 94%, transparent);
  --rail-symbol: color-mix(in srgb, var(--ink) 76%, var(--muted));
  --rail-symbol-active: var(--ink);
  --side-panel-bg: color-mix(in srgb, var(--surface-2) 72%, var(--page));
  --side-panel-bg-glass: color-mix(in srgb, var(--side-panel-bg) 94%, transparent);
  --side-panel-bg-lift: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ink) 4%, transparent),
    transparent 42%
  );

  /* Atlas globe orb — day mode tokens */
  --orb-base: var(--page);
  --orb-dot: color-mix(in srgb, #2a3a2d 92%, var(--ink) 8%);
  --orb-glow: rgba(36, 52, 38, 0.08);
  --orb-continent-opacity: 0.86;
  --orb-grid: rgba(20, 30, 22, 0.18);
  --orb-arc: rgba(20, 30, 22, 0.24);
  --orb-rim: rgba(20, 30, 22, 0.20);
  --orb-tick: rgba(20, 30, 22, 0.5);
  --orb-highlight: rgba(255, 255, 255, 0);
  --orb-shadow: rgba(20, 30, 22, 0.16);
  --orb-halo: #1a2a1d;
  --orb-halo-strength: 0.32;
}

/* =============================================================
   BASE
   ============================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

html.grid-reveal-armed {
  --grid-reveal: -4%;
  --grid-opacity: 0.18;
}

html.grid-reveal-complete {
  --grid-reveal: 140%;
  --grid-opacity: 1;
}

/* The body owns the foreground (grid + page color, scrolls with content).
   A fixed pseudo-element behind it owns the far-ground atmosphere
   (sky, horizon, haze, corner washes) — so the horizon stays in
   viewport even as the page scrolls, like a real horizon. */
body {
  position: relative;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(
      900px 620px at var(--spot-x) var(--spot-y),
      var(--spot),
      transparent 70%
    ),
    var(--page);
  background-size: auto, auto;
  color: var(--ink);
  font-family: var(--font-ui);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Far-ground atmosphere — fixed in viewport, behind content.
   Pure monochrome — light above, shadow below, ink horizon.
   Horizon anchor sits on --horizon-y. Stops tighter than
   before so the horizon reads as a defined band, not a soft haze.
   Light from above-left, shadow from below-right. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* 1. Back horizon rule — fixed behind the scrolling grid */
    linear-gradient(
      180deg,
      transparent calc(var(--horizon-y-pos) - 0.5px),
      color-mix(in srgb, var(--ink) 38%, transparent) calc(var(--horizon-y-pos) - 0.5px),
      color-mix(in srgb, var(--ink) 38%, transparent) calc(var(--horizon-y-pos) + 0.5px),
      transparent calc(var(--horizon-y-pos) + 0.5px)
    ),
    /* 2. Horizon glow — tight, sharp band at the fixed horizon plane */
    linear-gradient(
      180deg,
      transparent calc(var(--horizon-y-pos) - 3%),
      var(--horizon) var(--horizon-y-pos),
      var(--horizon-soft) calc(var(--horizon-y-pos) + 1.5%),
      transparent calc(var(--horizon-y-pos) + 5%)
    ),
    /* 3. Sky → haze, with sharper transition through the horizon */
    linear-gradient(
      180deg,
      var(--sky-top),
      var(--sky-mid) calc(var(--horizon-y-pos) - 25%),
      var(--sky-bottom) calc(var(--horizon-y-pos) - 2%),
      var(--haze) calc(var(--horizon-y-pos) + 3%),
      var(--haze)
    ),
    /* 4. Light wash from above-left (sky source) */
    radial-gradient(
      1200px 760px at 6% 4%,
      color-mix(in srgb, var(--ink) 9%, transparent),
      transparent 60%
    ),
    /* 5. Shadow wash from below-right (the ground vignette) */
    radial-gradient(
      1400px 900px at 98% 100%,
      rgba(0, 0, 0, 0.26),
      transparent 62%
    );
}

/* Global grid — one stable scrolling layer for both pages.
   It reveals once on entry from the lower-left into the full field,
   then moves with the page while the horizon stays fixed. */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  min-height: 100%;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:
    calc(var(--grid) * 4) calc(var(--grid) * 4),
    calc(var(--grid) * 4) calc(var(--grid) * 4),
    var(--grid) var(--grid),
    var(--grid) var(--grid);
  opacity: var(--grid-opacity);
  -webkit-mask-image: linear-gradient(
    24deg,
    #000 0,
    #000 var(--grid-reveal),
    rgba(0, 0, 0, 0.72) calc(var(--grid-reveal) + 9%),
    transparent calc(var(--grid-reveal) + 28%)
  );
  mask-image: linear-gradient(
    24deg,
    #000 0,
    #000 var(--grid-reveal),
    rgba(0, 0, 0, 0.72) calc(var(--grid-reveal) + 9%),
    transparent calc(var(--grid-reveal) + 28%)
  );
}

/* Day mode replaces the dark sky stack with a paper field.
   No warm tints anywhere. The page-wide fixed crease is omitted; the
   hero/workfield canvases draw their own horizon lines where needed. */
html[data-theme="light"] body::before {
  background:
    /* back horizon rule on paper, fixed behind the scrolling grid */
    linear-gradient(
      180deg,
      transparent calc(var(--horizon-y-pos) - 0.5px),
      color-mix(in srgb, var(--ink) 26%, transparent) calc(var(--horizon-y-pos) - 0.5px),
      color-mix(in srgb, var(--ink) 26%, transparent) calc(var(--horizon-y-pos) + 0.5px),
      transparent calc(var(--horizon-y-pos) + 0.5px)
    ),
    /* cool light from above, sharp transition to paper-shadow below */
    linear-gradient(
      180deg,
      var(--sky-top),
      transparent calc(var(--horizon-y-pos) - 6%),
      transparent var(--horizon-y-pos),
      var(--sky-bottom) calc(var(--horizon-y-pos) + 5%),
      var(--haze)
    ),
    /* gentle ink shadow in lower-right corner */
    radial-gradient(
      1200px 800px at 96% 100%,
      color-mix(in srgb, var(--ink) 9%, transparent),
      transparent 64%
    );
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
ol,
ul,
dl {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--green-glow);
  color: var(--ink);
}

/* =============================================================
   FRAME — top / left / right inspector / bottom
   ============================================================= */

.frame-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 90;
  height: var(--rail);
  display: grid;
  grid-template-columns: var(--side-nav) minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--rail-glass);
  box-shadow:
    0 22px 56px color-mix(in srgb, var(--edge-shadow) 60%, transparent),
    inset 0 -1px 0 var(--hairline);
  backdrop-filter: blur(20px) saturate(140%);
}

.top-ep {
  display: grid;
  place-items: center;
  width: var(--side-nav);
  height: var(--rail);
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--edge-glow) 72%, transparent), transparent),
    transparent;
  color: var(--green);
  box-shadow: inset -1px 0 0 var(--hairline);
}

.top-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 0 22px 0 22px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}

.top-meta-tick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.top-meta-tick::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green-glow);
}

.top-meta-tick.is-quiet::before {
  background: var(--quiet);
  box-shadow: none;
}

.top-meta-divider {
  display: inline-block;
  width: 1px;
  height: 11px;
  background: var(--line);
  opacity: 0.8;
}

.top-marquee {
  justify-self: end;
  padding: 0 18px 0 12px;
  color: var(--faint);
  white-space: nowrap;
}

.top-ep,
.theme-toggle,
.frame-left a,
.frame-inspector > *,
.top-meta,
.top-marquee,
.frame-bottom > *,
.system-label {
  font-family: var(--font-mono);
  font-size: var(--rail-label);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* =============================================================
   ICONS — small CSS marks
   ============================================================= */

.ui-icon {
  position: relative;
  display: inline-block;
  width: var(--rail-icon);
  height: var(--rail-icon);
  border: 1.4px solid currentColor;
  color: inherit;
  vertical-align: -1px;
  filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--shadow) 44%, transparent));
}

.ui-icon::before,
.ui-icon::after {
  content: "";
  position: absolute;
  border-color: currentColor;
}

.ui-icon.world {
  border-radius: 50%;
}
.ui-icon.world::before {
  inset: 2px 4px;
  border-right: 1px solid currentColor;
  border-left: 1px solid currentColor;
}
.ui-icon.world::after {
  top: 50%;
  right: 1px;
  left: 1px;
  border-top: 1px solid currentColor;
}

.ui-icon.slot {
  border-radius: 2px;
}
.ui-icon.slot::before {
  inset: 3px;
  border: 1px solid currentColor;
}
.ui-icon.slot::after {
  top: 6px;
  right: 2px;
  left: 2px;
  border-top: 1px solid currentColor;
}

.ui-icon.doc {
  border-radius: 2px;
}
.ui-icon.doc::before {
  top: 3px;
  right: 3px;
  left: 3px;
  border-top: 1px solid currentColor;
}
.ui-icon.doc::after {
  top: 7px;
  right: 3px;
  left: 3px;
  border-top: 1px solid currentColor;
}

.ui-icon.board {
  border-radius: 2px;
}
.ui-icon.board::before {
  inset: 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: scale(0.5);
}
.ui-icon.board::after {
  top: 50%;
  right: 0;
  left: 0;
  border-top: 1px solid currentColor;
}

.ui-icon.info {
  border-radius: 50%;
}
.ui-icon.info::before {
  top: 2px;
  left: 50%;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}
.ui-icon.info::after {
  top: 5px;
  left: 50%;
  height: 4px;
  border-left: 1.25px solid currentColor;
  transform: translateX(-50%);
}

.ui-icon.user {
  border-radius: 2px;
}
.ui-icon.user::before {
  top: 2px;
  left: 3px;
  width: 3px;
  height: 3px;
  border: 1.25px solid currentColor;
  border-radius: 50%;
}
.ui-icon.user::after {
  right: 2px;
  bottom: 2px;
  left: 2px;
  height: 3px;
  border: 1.25px solid currentColor;
  border-top: 0;
}

.ui-icon.sync {
  border-radius: 50%;
  border-right-color: transparent;
}
.ui-icon.sync::after {
  top: -2px;
  right: -1px;
  width: 3px;
  height: 3px;
  border-top: 1.25px solid currentColor;
  border-right: 1.25px solid currentColor;
  transform: rotate(30deg);
}

.ui-icon.team {
  border-radius: 2px;
}
.ui-icon.team::before,
.ui-icon.team::after {
  top: 2px;
  width: 3px;
  height: 3px;
  border: 1.25px solid currentColor;
  border-radius: 50%;
}
.ui-icon.team::before {
  left: 2px;
}
.ui-icon.team::after {
  right: 2px;
}

/* =============================================================
   LEFT RAIL
   ============================================================= */

.frame-left {
  position: fixed;
  top: var(--rail);
  bottom: 0;
  left: 0;
  z-index: 80;
  width: var(--side-nav);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--side-panel-bg-lift), var(--side-panel-bg-glass);
  box-shadow:
    24px 0 60px color-mix(in srgb, var(--edge-shadow) 58%, transparent),
    inset -1px 0 0 var(--hairline);
  backdrop-filter: blur(20px) saturate(130%);
}

.frame-left a {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--rail-item);
  border-bottom: 1px solid var(--line);
  color: var(--rail-symbol);
  transition: color 160ms var(--ease), background 200ms var(--ease);
}

.frame-left a::before,
.frame-inspector > *::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 3px;
  background: var(--green);
  opacity: 0;
  box-shadow: 0 0 14px var(--green-glow);
  transition: opacity 180ms var(--ease);
}

.frame-left a.is-active,
.frame-inspector > .is-active {
  background:
    linear-gradient(90deg, var(--green-soft), transparent 72%),
    linear-gradient(180deg, var(--selected-wash-strong), var(--selected-wash)),
    transparent;
  color: var(--rail-symbol-active);
  box-shadow:
    inset 0 1px 0 var(--hairline),
    inset 0 -1px 0 color-mix(in srgb, var(--page) 32%, transparent),
    0 12px 28px color-mix(in srgb, var(--edge-shadow) 38%, transparent);
}

.frame-left a.is-active::before,
.frame-inspector > .is-active::before {
  opacity: 1;
}

.frame-left a span,
.frame-inspector b {
  display: none;
}

/* Nav hover — small-element only. No background wash on the link
   container. Color brightens, and the left-edge ::before marker fades
   in at low opacity (active state keeps it at full opacity). */
.frame-left a:hover,
.frame-left a:focus-visible {
  color: var(--rail-symbol-active);
  outline: none;
}

.frame-left a:hover::before,
.frame-left a:focus-visible::before {
  opacity: 0.45;
}

.frame-left a.is-active:hover::before,
.frame-left a.is-active:focus-visible::before {
  opacity: 1;
}

.frame-left .ui-icon,
.frame-inspector .ui-icon {
  filter:
    drop-shadow(0 8px 14px color-mix(in srgb, var(--shadow) 54%, transparent))
    drop-shadow(0 0 5px color-mix(in srgb, currentColor 22%, transparent));
}

.theme-toggle {
  display: inline-grid;
  grid-template-columns: 24px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--rail-item);
  margin: auto 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 1px 0 var(--hairline);
  transition: color 160ms var(--ease);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--green);
  outline: none;
}

.theme-toggle span {
  display: none;
}

.theme-toggle i {
  position: relative;
  width: 24px;
  height: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--page) 42%, transparent);
}

.theme-toggle i::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  transition: transform 200ms var(--ease);
}

html[data-theme="dark"] .theme-toggle i::before {
  transform: translateX(12px);
}

/* =============================================================
   INSPECTOR RAIL — right edge contextual chips
   ============================================================= */

.frame-inspector {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 82;
  width: var(--rail);
  height: min(46vh, calc(var(--grid) * 8));
  display: grid;
  align-content: start;
  border: 1px solid var(--line);
  border-right: 0;
  border-bottom: 0;
  background: var(--side-panel-bg-lift), var(--side-panel-bg-glass);
  box-shadow:
    -22px 0 60px color-mix(in srgb, var(--edge-shadow) 60%, transparent),
    inset 1px 0 0 var(--hairline),
    inset 0 1px 0 var(--hairline);
  backdrop-filter: blur(20px) saturate(130%);
}

.frame-inspector > * {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--rail-item);
  border-bottom: 1px solid var(--line);
  color: var(--rail-symbol);
}

.frame-inspector b {
  position: absolute;
  right: calc(100% + 10px);
  display: block;
  min-width: max-content;
  border: 1px solid var(--line);
  padding: 7px 10px;
  background: var(--rail-glass);
  color: color-mix(in srgb, var(--ink) 80%, var(--muted));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--shadow) 42%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}

.frame-inspector > *:hover b,
.frame-inspector > *:focus-visible b {
  opacity: 1;
}

.frame-inspector::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  right: 14px;
  width: 1px;
  background:
    repeating-linear-gradient(
      180deg,
      var(--hairline) 0 1px,
      transparent 1px 9px
    );
  pointer-events: none;
}

/* =============================================================
   BOTTOM FRAME
   ============================================================= */

.frame-bottom {
  position: fixed;
  bottom: 0;
  left: var(--side-nav);
  z-index: 78;
  width: min(540px, calc(100vw - var(--side-nav) - var(--rail)));
  height: var(--rail-item);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  background: var(--rail-glass);
  box-shadow:
    22px -22px 60px color-mix(in srgb, var(--edge-shadow) 58%, transparent),
    inset 0 1px 0 var(--hairline),
    inset -1px 0 0 var(--hairline);
  backdrop-filter: blur(20px);
}

.frame-bottom > * {
  display: grid;
  align-items: center;
  min-width: 0;
  padding: 0 18px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer-contact {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
}

.footer-contact h2 {
  color: var(--green);
  font: inherit;
}

.footer-contact a {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  text-overflow: ellipsis;
  transition: color 160ms var(--ease);
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: var(--green);
  outline: none;
}

.frame-bottom-status {
  justify-self: end;
  border-left: 1px solid var(--line);
  color: var(--faint);
}

.frame-bottom-status::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green-glow);
}

/* =============================================================
   SHELL
   ============================================================= */

.site-shell {
  position: relative;
  z-index: 2;
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: calc(var(--rail) + 14px) calc(var(--rail) + 24px) 112px
    calc(var(--side-nav) + 22px);
}

.site-shell > * {
  position: relative;
  z-index: 3;
}

.shell-home,
.shell-atlas {
  min-height: 100vh;
}

/* =============================================================
   SYSTEM LABEL — small monospace inscription
   ============================================================= */

.system-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: color-mix(in srgb, var(--ink) 76%, var(--muted));
  letter-spacing: 0.12em;
}

.system-label::before {
  content: "";
  display: inline-block;
  width: 18px;
  border-top: 1px solid currentColor;
  opacity: 0.6;
}

.system-label.is-signal::before {
  border-top-color: var(--green);
  opacity: 1;
  box-shadow: 0 0 12px var(--green-glow);
}

/* =============================================================
   DISPLAY TYPE
   ============================================================= */

.display {
  position: relative;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: var(--display-title);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.display-line {
  display: block;
}

.display-line + .display-line {
  margin-left: clamp(12px, 2vw, 28px);
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
  font-style: italic;
  font-weight: 400;
}

/* The outline-echo behind the title was atmospheric at large scale,
   but at the new smaller scale it clutters the inscription. Suppressed. */
.display-echo {
  display: none;
}

.display-2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--display-2);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.008em;
  color: var(--ink);
  max-width: 22ch;
}

.hero-line {
  max-width: 30rem;
  margin-top: 4px;
  color: color-mix(in srgb, var(--ink) 92%, var(--muted));
  font-size: var(--hero-line);
  line-height: 1.5;
  font-weight: 400;
}

/* =============================================================
   HOME — OPENING / OPEN CREATIVE VIEW
   ============================================================= */

/* OPENING — a single vast monochrome plate.
   On the homepage, the inscription is a small typographic mark in the
   upper-left quadrant, overlaid on the workfield canvas behind it.
   On the Atlas page, the inscription sits in normal flow above the
   separate workfield section (overridden below by body[data-page]). */
.opening {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--rail) - 72px);
  padding: 0;
}

.opening-inscription {
  position: absolute;
  top: clamp(8px, 3vh, 36px);
  left: 0;
  z-index: 3;
  width: min(440px, 56%);
  padding: clamp(8px, 1.6vw, 18px) 0;
  pointer-events: none;             /* inner links remain clickable */
}

.opening-inscription > * {
  pointer-events: auto;
}

.opening-inscription .system-label::after {
  content: "";                       /* no /01 affix in the new system */
}

/* On the Atlas page the opening section contains only the inscription
   (the workfield lives in its own section below). The inscription
   needs to be in normal flow, not absolutely positioned, so the section
   actually has height. */
body[data-page="atlas"] .opening {
  min-height: auto;
  padding-bottom: 12px;
}

body[data-page="atlas"] .opening-inscription {
  position: static;
  width: min(680px, 100%);
  pointer-events: auto;
}

/* — atlas open-view panel — */

/* The homepage workfield is no longer a panel. It is the entire opening
   canvas — a vast monochrome valley with a horizon and a sun. The whole
   thing is a single quiet link to the Atlas page. No border, no UI bar,
   no fill. Just air, light, and the horizon. */
.opening-atlas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: calc(100vh - var(--rail) - 72px);
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: var(--ink-soft);
}

.opening-atlas:hover,
.opening-atlas:focus-visible {
  outline: none;
}

/* No transform, no border highlight on hover — the workfield holds
   still. Light cascades through it via the per-letter rules above. */
.opening-atlas:hover,
.opening-atlas:focus-visible {
  outline: none;
}

/* Caption — a small typographic mark at the bottom-left of the canvas.
   No card, no border-bottom strip. Sits like a printed label on a
   landscape photograph. */
.opening-atlas-meta {
  position: absolute;
  left: clamp(8px, 1.6vw, 22px);
  top: var(--home-proof-top, calc(var(--horizon-scroll-y-pos) - clamp(112px, 14vh, 152px)));
  bottom: auto;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 4px;
  max-width: min(380px, 58%);
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.opening-atlas-meta .oa-kicker {
  color: var(--muted);
}

.opening-atlas-meta .oa-divider {
  display: none;
}

.opening-atlas-meta .oa-name {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  letter-spacing: 0;
  text-transform: none;
}

.opening-atlas-meta .oa-name::after {
  content: "→";
  display: inline-block;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.95em;
  opacity: 0.55;
  transition: opacity 320ms var(--ease-out), color 320ms var(--ease-out);
}

.opening-atlas:hover .oa-name::after,
.opening-atlas:focus-visible .oa-name::after {
  color: var(--ink);
  opacity: 1;
}

.opening-atlas-meta .oa-line {
  max-width: 28rem;
  color: var(--faint);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  line-height: 1.5;
}

.opening-atlas-meta .oa-cta {
  display: none;                /* replaced by the arrow on .oa-name */
}

/* — the workfield interior — */

/* The field is the canvas itself. No grid, no axis lines, no fills.
   The fixed shell horizon/orb carries the atmosphere; nodes are placed
   as map-points on top. */
.opening-atlas-field {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(420px, 68vh, 640px);
  overflow: visible;
  background: transparent;
}

/* Local horizon/sun marks are suppressed. They now live on the fixed
   shell layer so the horizon reads as one sticky optical plane. */
.opening-atlas-field::before,
.opening-atlas-field::after {
  display: none;
}

/* Decorative axis lines, angled rules, and the corner arc are
   intentionally suppressed in the vast monochrome composition.
   Any of these elements still present in HTML remain hidden so
   the canvas stays open and atmospheric. */
.field-axis,
.field-axis-h,
.field-axis-v,
.field-rule,
.field-rule-1,
.field-rule-2,
.field-rule-3,
.field-arc {
  display: none;
}

/* Map-point nodes — typographic marks placed across the landscape.
   No borders, no fills, no long shadows. A small dot, an uppercase
   mono label, and a small role caption. The label sits to the right
   of the dot for near nodes, to the left for far nodes — so the dot
   always anchors the actual map position. */
/* Right-aligned dot column shared by every node on the workfield.
   Every node has right: var(--dot-column), so the dots line up on
   a single vertical axis. Labels flow leftward via row-reverse. */
.opening-atlas-field {
  --dot-column: clamp(56px, 7vw, 110px);
}

.field-node {
  position: absolute;
  right: var(--dot-column);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-direction: row-reverse;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: none;
  /* Per-item base delay — items light from top to bottom. */
  transition: color 320ms var(--ease-out);
  transition-delay: calc(var(--base, 0) * 110ms);
}

.field-node > span {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.field-node > span > b {
  display: block;
  color: var(--muted);
  font: inherit;
  transition: color 320ms var(--ease-out);
  transition-delay: calc(var(--base, 0) * 110ms);
}

.field-node > span > em {
  display: block;
  font: inherit;
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.14em;
}

/* Caption letters — each <i> is a single character. Letters live at
   low opacity by default and brighten in left-to-right sequence on
   hover, scheduled by --base (per item) and --i (per letter). */
.field-node em > i {
  display: inline-block;
  font-style: normal;
  color: var(--ink);
  opacity: 0.42;
  transition: opacity 380ms var(--ease-out);
  transition-delay: calc(var(--base, 0) * 110ms + var(--i, 0) * 50ms);
}

.field-node em > i:nth-child(1) { --i: 0; }
.field-node em > i:nth-child(2) { --i: 1; }
.field-node em > i:nth-child(3) { --i: 2; }
.field-node em > i:nth-child(4) { --i: 3; }
.field-node em > i:nth-child(5) { --i: 4; }
.field-node em > i:nth-child(6) { --i: 5; }
.field-node em > i:nth-child(7) { --i: 6; }
.field-node em > i:nth-child(8) { --i: 7; }

/* The dot — currentColor follows the node's color, so its brighten
   transition rides on .field-node's color transition. */
.field-node::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Per-item stagger base — top items light first. */
.field-node-world { --base: 0; top: 22%; }
.field-node-doc   { --base: 1; top: 38%; }
.field-node-story { --base: 2; top: 54%; }
.field-node-team  { --base: 3; top: 70%; }

/* Hover — dot column + label brightens, letters cascade left-to-right.
   No size or position changes anywhere. Only luminance. */
.opening-atlas:hover .field-node,
.opening-atlas:focus-visible .field-node {
  color: var(--ink);
}

.opening-atlas:hover .field-node > span > b,
.opening-atlas:focus-visible .field-node > span > b {
  color: var(--ink);
}

.opening-atlas:hover .field-node em > i,
.opening-atlas:focus-visible .field-node em > i {
  opacity: 1;
}

/* World is the selected surface — full ink at rest. Its caption letters
   start at higher base opacity than other items so it always reads
   as the one already-illuminated surface. */
.field-node-world {
  color: var(--ink-soft);
}

.field-node-world > span > b {
  color: var(--ink);
}

.field-node-world em > i {
  opacity: 0.68;
}

.field-node-world::before {
  background: var(--ink);
  box-shadow:
    0 0 0 4px transparent,
    0 0 0 5px color-mix(in srgb, var(--ink) 50%, transparent);
}

.field-node-world::after {
  display: none;
}

/* The connecting hairline — permanent structural mark on the dot
   column. Sharper at rest (more visible as structure), brightens to
   full on hover. */
.field-line {
  position: absolute;
  right: calc(var(--dot-column) + 3px);   /* center on the 6px dots */
  top: 22%;
  bottom: 26%;                            /* World (22%) → Team (70%+~4%) */
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--ink) 56%, transparent) 8%,
    color-mix(in srgb, var(--ink) 56%, transparent) 92%,
    transparent
  );
  opacity: 0.28;
  pointer-events: none;
  transition: opacity 480ms var(--ease-out);
}

.opening-atlas:hover .field-line,
.opening-atlas:focus-visible .field-line {
  opacity: 1;
}

/* =============================================================
   HOME — TOOL LEDGER
   ============================================================= */

.ledger {
  margin-top: clamp(48px, 6vw, 96px);
  padding-top: clamp(28px, 3vw, 48px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(220px, 0.38fr) minmax(360px, 0.62fr);
  gap: clamp(24px, 4vw, 72px);
}

.ledger-head {
  position: sticky;
  top: calc(var(--rail) + 28px);
  align-self: start;
  padding-right: 12px;
}

.ledger-head p {
  margin-bottom: 18px;
}

.ledger-list {
  display: grid;
  border-top: 1px solid var(--line);
}

/* The row is a container — it holds still on hover. No padding shift,
   no background wash. Only the small elements inside (icon, index,
   label letters, description, tag letters) react to hover. */
.ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px 22px 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--line);
}

/* Left-edge marker — a small vertical hairline that lights on hover.
   Sits outside the row's content rhythm; doesn't shift the layout. */
.ledger-row::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 30%;
  bottom: 30%;
  width: 1px;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out);
}

.ledger-row:hover::before,
.ledger-row:focus-within::before {
  opacity: 1;
}

/* Index numeral — a small symbol that brightens. */
.ledger-index {
  position: relative;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: color 320ms var(--ease-out);
}

.ledger-row:hover .ledger-index,
.ledger-row:focus-within .ledger-index {
  color: var(--ink);
}

/* Icon symbol — brightens to full ink on hover. */
.ledger-row .ui-icon {
  align-self: center;
  color: color-mix(in srgb, var(--ink) 76%, var(--muted));
  transition: color 320ms var(--ease-out);
}

.ledger-row:nth-child(1) .ui-icon {
  color: var(--green);     /* rebound: white-ink */
}

.ledger-row:nth-child(3) .ui-icon {
  color: var(--crimson);   /* rebound: darker silver */
}

.ledger-row:nth-child(4) .ui-icon {
  color: var(--gold);      /* rebound: mid silver */
}

.ledger-row:hover .ui-icon,
.ledger-row:focus-within .ui-icon {
  color: var(--ink);
}

.ledger-body {
  min-width: 0;
}

.ledger-body h3 {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Row label letters — each <i> a single character, cascading left-to-right
   on row hover. Same grammar as the workfield captions. */
.ledger-body h3 > i {
  display: inline-block;
  font-style: normal;
  color: var(--ink);
  opacity: 0.72;
  transition: opacity 320ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 36ms);
}

.ledger-body h3 > i:nth-child(1)  { --i: 0; }
.ledger-body h3 > i:nth-child(2)  { --i: 1; }
.ledger-body h3 > i:nth-child(3)  { --i: 2; }
.ledger-body h3 > i:nth-child(4)  { --i: 3; }
.ledger-body h3 > i:nth-child(5)  { --i: 4; }
.ledger-body h3 > i:nth-child(6)  { --i: 5; }
.ledger-body h3 > i:nth-child(7)  { --i: 6; }
.ledger-body h3 > i:nth-child(8)  { --i: 7; }
.ledger-body h3 > i:nth-child(9)  { --i: 8; }
.ledger-body h3 > i:nth-child(10) { --i: 9; }

.ledger-row:hover .ledger-body h3 > i,
.ledger-row:focus-within .ledger-body h3 > i {
  opacity: 1;
}

/* Description text — brightens whole, no cascade (too long for letters). */
.ledger-body p {
  max-width: 36rem;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  transition: color 360ms var(--ease-out);
}

.ledger-row:hover .ledger-body p,
.ledger-row:focus-within .ledger-body p {
  color: var(--ink-soft);
}

/* Tag — a small mono label. Border holds still; only letters animate. */
.ledger-tag {
  align-self: center;
  display: inline-block;
  min-width: 56px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.ledger-row:nth-child(1) .ledger-tag {
  border-color: color-mix(in srgb, var(--green) 36%, var(--line));
  color: var(--green);
}

.ledger-row:nth-child(3) .ledger-tag {
  border-color: color-mix(in srgb, var(--crimson) 36%, var(--line));
  color: var(--crimson);
}

.ledger-row:nth-child(4) .ledger-tag {
  border-color: color-mix(in srgb, var(--gold) 36%, var(--line));
  color: var(--gold);
}

/* Tag letters cascade left-to-right, like the row label. */
.ledger-tag > i {
  display: inline-block;
  font-style: normal;
  opacity: 0.72;
  transition: opacity 320ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 36ms);
}

.ledger-tag > i:nth-child(1) { --i: 0; }
.ledger-tag > i:nth-child(2) { --i: 1; }
.ledger-tag > i:nth-child(3) { --i: 2; }
.ledger-tag > i:nth-child(4) { --i: 3; }
.ledger-tag > i:nth-child(5) { --i: 4; }
.ledger-tag > i:nth-child(6) { --i: 5; }
.ledger-tag > i:nth-child(7) { --i: 6; }

.ledger-row:hover .ledger-tag > i,
.ledger-row:focus-within .ledger-tag > i {
  opacity: 1;
}

/* =============================================================
   ATLAS PAGE
   ============================================================= */

.shell-atlas .opening {
  grid-template-columns: minmax(280px, 0.56fr) minmax(220px, 0.44fr);
}

/* =============================================================
   ATLAS GLOBE ORB
   ============================================================= */

body[data-page="atlas"] .opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.86fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding-top: clamp(12px, 4vh, 48px);
  padding-bottom: clamp(24px, 5vh, 56px);
}

.atlas-orb {
  position: relative;
  width: 100%;
  max-width: min(520px, 100%);
  margin: 0 0 0 auto;
  padding: 0;
  isolation: isolate;
  --orb-proximity: 0;
  filter:
    drop-shadow(0 24px 60px var(--orb-shadow))
    drop-shadow(0 6px 18px color-mix(in srgb, var(--orb-shadow) 60%, transparent));
}

.atlas-orb-home {
  position: absolute;
  top: clamp(120px, 46vh, 420px);
  right: clamp(10px, 7vw, 128px);
  z-index: 2;
  width: min(520px, 46vw);
  max-width: none;
  margin: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

.atlas-orb-arcs {
  opacity: calc(0.62 + 0.38 * var(--orb-proximity));
  transition: opacity 220ms var(--ease);
}

.atlas-orb-ticks-major {
  opacity: calc(0.78 + 0.22 * var(--orb-proximity));
  transition: opacity 220ms var(--ease);
}

.atlas-orb-ticks-minor {
  opacity: calc(0.42 + 0.32 * var(--orb-proximity));
  transition: opacity 220ms var(--ease);
}

.atlas-orb-mark {
  opacity: calc(0.55 + 0.40 * var(--orb-proximity));
  transition: opacity 220ms var(--ease);
}

.atlas-orb-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
}

.atlas-orb-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 6px 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.atlas-orb-caption span:first-child::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  margin-right: 10px;
  vertical-align: 0.32em;
  background: currentColor;
  opacity: 0.55;
}

.atlas-orb-coord {
  color: var(--faint);
  letter-spacing: 0.18em;
}

/* Strata list — suppressed entirely. The four surfaces are represented
   as map-points on the workfield below, not as a UI module. Any
   atlas-strata HTML stays hidden so the opening reads as open white space. */
.atlas-strata,
.atlas-strata li,
.atlas-strata li i,
.atlas-strata li span,
.atlas-strata li::after {
  display: none;
}

/* — actions — */

.atlas-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.action {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    border-color 240ms var(--ease),
    color 240ms var(--ease),
    background 240ms var(--ease);
}

.action::after {
  content: "";
  display: inline-block;
  width: 16px;
  border-top: 1px solid currentColor;
  opacity: 0.5;
  transition: opacity 240ms var(--ease);
}

.action:hover::after,
.action:focus-visible::after {
  opacity: 1;
}

.action.primary {
  border-color: color-mix(in srgb, var(--green) 56%, var(--line));
  background:
    linear-gradient(90deg, var(--green-soft), transparent),
    color-mix(in srgb, var(--surface-2) 66%, transparent);
  color: var(--ink);
}

/* No transform — the action button holds its place. Light cues only:
   the border brightens, the trailing hairline lights up, and (via
   :has() in the Atlas page rules above) the workfield illuminates too. */
.action:hover,
.action:focus-visible {
  border-color: color-mix(in srgb, var(--green) 64%, var(--line));
  color: var(--green);
  outline: none;
}

/* No background swap on the primary action's container. Color and
   border brighten via the shared .action:hover rule; the trailing
   hairline ::after lights up. Container holds. */
.action.primary:hover,
.action.primary:focus-visible {
  color: var(--ink);
}

.atlas-boundary {
  max-width: 27rem;
  margin: 18px 0 0;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* =============================================================
   ATLAS — WORKFIELD (Open Creative View, full)
   ============================================================= */

.atlas-workfield-section {
  margin-top: clamp(40px, 5vw, 80px);
}

/* ATLAS WORKFIELD — a vast monochrome valley.
   No border, no fill, no grid, no UI furniture. The fixed shell
   horizon/orb carries the optical field; map-points sit across it. */
.atlas-workfield {
  position: relative;
  min-height: clamp(540px, 70vh, 760px);
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* Local horizon/sun marks are suppressed. They now live on the fixed
   shell layer so the horizon reads as one sticky optical plane. */
.atlas-workfield::before,
.atlas-workfield::after {
  display: none;
}

/* Workfield bar (top strip) — suppressed in vast mode.
   Any wf-bar element still in HTML is hidden so the workfield is open. */
.wf-bar,
.wf-bar-mid,
.wf-bar-right,
.wf-bar-tick {
  display: none;
}

/* The plane now fills the entire workfield — no top bar, no foot. */
.wf-plane {
  position: absolute;
  inset: 0;
}

/* The wf-horizon element is suppressed; the .atlas-workfield::before
   draws the horizon now, extending beyond the workfield's own bounds. */
.wf-horizon {
  display: none;
}

/* Legacy decorative spans — axis, arcs, angled rules, threads — are
   suppressed in vast mode. Any of these elements still present in
   HTML stay hidden so the workfield stays open. */
.wf-axis,
.wf-arc,
.wf-arc-1,
.wf-arc-2,
.wf-rule,
.wf-rule-1,
.wf-rule-2,
.wf-thread,
.wf-thread-1,
.wf-thread-2 {
  display: none;
}

/* Map-point nodes on the Atlas workfield — same grammar as the homepage
   field-nodes. A dot anchors the position, the label sits beside it,
   a small role caption sits under the label. Near nodes (below horizon)
   are full-presence; far nodes (above horizon) use faded ink. */
/* Atlas workfield map-points — six surfaces in a single right-aligned
   vertical column. Every node has right: var(--dot-column), so the
   dots line up on a strict vertical axis. Labels flow leftward. */
.atlas-workfield {
  --dot-column: clamp(80px, 9vw, 180px);
}

.wf-node {
  position: absolute;
  right: var(--dot-column);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-direction: row-reverse;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: none;
  transition: color 320ms var(--ease-out);
  transition-delay: calc(var(--base, 0) * 110ms);
}

.wf-node::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.wf-node > span {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
}

.wf-node > span > b {
  display: block;
  font: inherit;
  font-weight: 700;
  color: var(--muted);
  transition: color 320ms var(--ease-out);
  transition-delay: calc(var(--base, 0) * 110ms);
}

.wf-node > span > small {
  display: block;
  font: inherit;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.14em;
}

/* Caption letters — same cascade pattern as the homepage. Each <i> is
   a single character with its --i index derived from nth-child. */
.wf-node small > i {
  display: inline-block;
  font-style: normal;
  color: var(--ink);
  opacity: 0.42;
  transition: opacity 380ms var(--ease-out);
  transition-delay: calc(var(--base, 0) * 110ms + var(--i, 0) * 50ms);
}

.wf-node small > i:nth-child(1) { --i: 0; }
.wf-node small > i:nth-child(2) { --i: 1; }
.wf-node small > i:nth-child(3) { --i: 2; }
.wf-node small > i:nth-child(4) { --i: 3; }
.wf-node small > i:nth-child(5) { --i: 4; }
.wf-node small > i:nth-child(6) { --i: 5; }
.wf-node small > i:nth-child(7) { --i: 6; }
.wf-node small > i:nth-child(8) { --i: 7; }

/* Per-item stagger base + vertical positions, top → bottom. */
.node-world   { --base: 0; top: 14%; }
.node-team    { --base: 1; top: 26%; }
.node-gdd     { --base: 2; top: 38%; }
.node-aspects { --base: 3; top: 50%; }
.node-story   { --base: 4; top: 62%; }
.node-levels  { --base: 5; top: 74%; }

/* Hover — letters cascade, label and dot column brighten. Nothing moves. */
.atlas-workfield:hover .wf-node,
.atlas-workfield:focus-within .wf-node {
  color: var(--ink);
}

.atlas-workfield:hover .wf-node > span > b,
.atlas-workfield:focus-within .wf-node > span > b {
  color: var(--ink);
}

.atlas-workfield:hover .wf-node small > i,
.atlas-workfield:focus-within .wf-node small > i {
  opacity: 1;
}

/* World is the selected surface — full ink at rest, brighter base
   opacity on its caption letters than the other items. */
.node-world {
  color: var(--ink-soft);
}

.node-world > span > b {
  color: var(--ink);
}

.node-world small > i {
  opacity: 0.7;
}

.node-world::before {
  background: var(--ink);
  box-shadow:
    0 0 0 4px transparent,
    0 0 0 5px color-mix(in srgb, var(--ink) 52%, transparent);
}

.node-world::after {
  display: none;
}

/* The connecting hairline — permanent structural mark on the dot
   column. Sharper at rest, brightens to full on hover. */
.wf-line {
  position: absolute;
  right: calc(var(--dot-column) + 3px);   /* center on the 7px dots */
  top: 14%;
  bottom: 22%;                            /* World (14%) → Levels (74%+~4%) */
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--ink) 58%, transparent) 6%,
    color-mix(in srgb, var(--ink) 58%, transparent) 94%,
    transparent
  );
  opacity: 0.26;
  pointer-events: none;
  transition: opacity 520ms var(--ease-out);
}

.atlas-workfield:hover .wf-line,
.atlas-workfield:focus-within .wf-line {
  opacity: 1;
}

/* CTA → environment — hovering "Open workspace" or "Request access"
   lights up the workfield's cascade. The grid stays still; the
   environment responds to interaction. */
body[data-page="atlas"]:has(.action:hover) .wf-node {
  color: var(--ink);
}

body[data-page="atlas"]:has(.action:hover) .wf-node > span > b {
  color: var(--ink);
}

body[data-page="atlas"]:has(.action:hover) .wf-node small > i {
  opacity: 1;
}

body[data-page="atlas"]:has(.action:hover) .wf-line {
  opacity: 0.95;
}

/* Foot strip is suppressed — no stats badge under the valley. */
.wf-foot,
.wf-foot span,
.wf-foot span b {
  display: none;
}

/* =============================================================
   ATLAS — CAPABILITY ROWS
   ============================================================= */

.atlas-rows {
  margin-top: clamp(48px, 6vw, 96px);
  padding-top: clamp(28px, 3vw, 48px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(320px, 0.58fr);
  gap: clamp(24px, 4vw, 72px);
}

.atlas-rows-head {
  position: sticky;
  top: calc(var(--rail) + 28px);
  align-self: start;
  padding-right: 12px;
}

.atlas-rows-head p {
  margin-bottom: 18px;
}

.atlas-row-list {
  display: grid;
  border-top: 1px solid var(--line);
}

/* Same principle as ledger-row — the container holds still. Only the
   small elements inside (icon, index, label letters, description, tag
   letters, left-edge marker) react to hover. */
.atlas-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px 22px 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line);
}

/* Left-edge marker — a thin vertical hairline that lights on hover.
   Outside the content rhythm; doesn't shift the layout. */
.atlas-row::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 30%;
  bottom: 30%;
  width: 1px;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out);
}

.atlas-row:hover::before,
.atlas-row:focus-within::before {
  opacity: 1;
}

.atlas-row .atlas-row-index {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: color 320ms var(--ease-out);
}

.atlas-row:hover .atlas-row-index,
.atlas-row:focus-within .atlas-row-index {
  color: var(--ink);
}

.atlas-row .ui-icon {
  align-self: center;
  color: color-mix(in srgb, var(--ink) 76%, var(--muted));
  transition: color 320ms var(--ease-out);
}

.atlas-row:nth-child(1) .ui-icon {
  color: var(--green);
}
.atlas-row:nth-child(3) .ui-icon {
  color: var(--crimson);
}
.atlas-row:nth-child(4) .ui-icon {
  color: var(--gold);
}

.atlas-row:hover .ui-icon,
.atlas-row:focus-within .ui-icon {
  color: var(--ink);
}

.atlas-row h3 {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Label letters — cascade left-to-right on row hover. */
.atlas-row h3 > i {
  display: inline-block;
  font-style: normal;
  color: var(--ink);
  opacity: 0.72;
  transition: opacity 320ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 36ms);
}

.atlas-row h3 > i:nth-child(1)  { --i: 0; }
.atlas-row h3 > i:nth-child(2)  { --i: 1; }
.atlas-row h3 > i:nth-child(3)  { --i: 2; }
.atlas-row h3 > i:nth-child(4)  { --i: 3; }
.atlas-row h3 > i:nth-child(5)  { --i: 4; }
.atlas-row h3 > i:nth-child(6)  { --i: 5; }
.atlas-row h3 > i:nth-child(7)  { --i: 6; }
.atlas-row h3 > i:nth-child(8)  { --i: 7; }
.atlas-row h3 > i:nth-child(9)  { --i: 8; }
.atlas-row h3 > i:nth-child(10) { --i: 9; }

.atlas-row:hover h3 > i,
.atlas-row:focus-within h3 > i {
  opacity: 1;
}

.atlas-row p {
  max-width: 38rem;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  transition: color 360ms var(--ease-out);
}

.atlas-row:hover p,
.atlas-row:focus-within p {
  color: var(--ink-soft);
}

.atlas-row-tag {
  align-self: center;
  display: inline-block;
  min-width: 60px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.atlas-row:nth-child(1) .atlas-row-tag {
  border-color: color-mix(in srgb, var(--green) 36%, var(--line));
  color: var(--green);
}
.atlas-row:nth-child(3) .atlas-row-tag {
  border-color: color-mix(in srgb, var(--crimson) 36%, var(--line));
  color: var(--crimson);
}
.atlas-row:nth-child(4) .atlas-row-tag {
  border-color: color-mix(in srgb, var(--gold) 36%, var(--line));
  color: var(--gold);
}

/* Tag letters cascade left-to-right, like the row label. */
.atlas-row-tag > i {
  display: inline-block;
  font-style: normal;
  opacity: 0.72;
  transition: opacity 320ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 36ms);
}

.atlas-row-tag > i:nth-child(1) { --i: 0; }
.atlas-row-tag > i:nth-child(2) { --i: 1; }
.atlas-row-tag > i:nth-child(3) { --i: 2; }
.atlas-row-tag > i:nth-child(4) { --i: 3; }
.atlas-row-tag > i:nth-child(5) { --i: 4; }
.atlas-row-tag > i:nth-child(6) { --i: 5; }
.atlas-row-tag > i:nth-child(7) { --i: 6; }

.atlas-row:hover .atlas-row-tag > i,
.atlas-row:focus-within .atlas-row-tag > i {
  opacity: 1;
}

/* =============================================================
   ATLAS — CLOSE
   ============================================================= */

.atlas-close {
  margin-top: clamp(48px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(24px, 4vw, 56px);
  padding-top: clamp(28px, 3vw, 48px);
  border-top: 1px solid var(--line);
}

.atlas-close-body p:not(.system-label) {
  max-width: 38rem;
  margin: 0 0 22px;
  color: color-mix(in srgb, var(--ink) 88%, var(--muted));
  font-size: 1.02rem;
  line-height: 1.6;
}

.atlas-close-aside {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent), transparent),
    color-mix(in srgb, var(--surface) 64%, transparent);
  box-shadow:
    inset 0 1px 0 var(--hairline),
    0 28px 64px color-mix(in srgb, var(--edge-shadow) 40%, transparent);
}

.atlas-close-aside h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.008em;
}

.atlas-close-aside p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.atlas-close-aside .action {
  align-self: start;
}

/* =============================================================
   DAY MODE — intentional paper / review light
   These overrides only apply when [data-theme="light"] is set on <html>.
   The goal is a printed studio plate you'd review under afternoon light,
   not an inverted dark mode. No bright glows, no glass blur, warm shadows.
   ============================================================= */

html[data-theme="light"] body {
  /* Replace the dark sky/horizon stack with a paper field:
     diffuse cool light from above, a faint neutral shadow near the
     bottom edge. No warmth, and no page-wide fixed crease. */
  background:
    radial-gradient(
      720px 480px at var(--spot-x) var(--spot-y),
      var(--spot),
      transparent 70%
    ),
    var(--paper-grain),
    var(--page);
  background-size: auto, auto, auto;
}

/* Rails on paper — no glass blur, just paper with a soft warm edge. */
html[data-theme="light"] .frame-top,
html[data-theme="light"] .frame-left,
html[data-theme="light"] .frame-inspector,
html[data-theme="light"] .frame-bottom {
  backdrop-filter: none;
  background: var(--rail-glass);
}

html[data-theme="light"] .frame-top {
  box-shadow:
    0 12px 24px -8px color-mix(in srgb, var(--shadow) 80%, transparent),
    inset 0 -1px 0 var(--hairline);
}

html[data-theme="light"] .frame-left {
  box-shadow:
    12px 0 24px -8px color-mix(in srgb, var(--shadow) 70%, transparent),
    inset -1px 0 0 var(--hairline);
}

html[data-theme="light"] .frame-inspector {
  box-shadow:
    -12px 0 24px -8px color-mix(in srgb, var(--shadow) 70%, transparent),
    inset 1px 0 0 var(--hairline),
    inset 0 1px 0 var(--hairline);
}

html[data-theme="light"] .frame-bottom {
  box-shadow:
    12px -12px 24px -8px color-mix(in srgb, var(--shadow) 70%, transparent),
    inset 0 1px 0 var(--hairline),
    inset -1px 0 0 var(--hairline);
}

/* The workfields are now open canvas (no panel, no frame) in both
   themes, so no Day-mode panel override is needed. */

/* Letterpress ink shadow on display type — a single ink-dark hairline
   below the glyph baseline. Reads like printed ink on paper. */
html[data-theme="light"] .display {
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent),
    0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}

html[data-theme="light"] .display-echo {
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 14%, transparent);
  text-stroke: 1px color-mix(in srgb, var(--ink) 14%, transparent);
  transform: translate(5px, 6px);
}

/* Selection chip on the World map-point in Day mode — same static
   ring, no luminance halo on paper. */
html[data-theme="light"] .field-node-world::before,
html[data-theme="light"] .node-world::before {
  box-shadow:
    0 0 0 4px transparent,
    0 0 0 5px color-mix(in srgb, var(--ink) 40%, transparent);
}

/* Top contact / inspector dots become small ink marks on paper. */
html[data-theme="light"] .top-meta-tick::before,
html[data-theme="light"] .frame-bottom-status::before {
  box-shadow: none;
}

/* The pointer spotlight is a cool ink wash on paper, not warm. */
html[data-theme="light"] body {
  --spot: rgba(20, 22, 26, 0.035);
}

/* =============================================================
   MOTION
   ============================================================= */

/* (removed) @keyframes breath — replaced by a static selection chip
   on the active "World" node. The site now has no looping animations;
   only the IntersectionObserver one-shot reveal remains. */

@keyframes draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html.reveal-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

html.reveal-enabled [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

/* — Wide desktop: rail expands and shows labels — */
@media (min-width: 1320px) {
  :root {
    --side-nav: 168px;
    --gap: 18px;
    --max: 1720px;
    --horizon-y: 69%;
    --horizon-scroll-y: 69vh;
    --orb-x: 56%;
  }

  .frame-top {
    grid-template-columns: var(--side-nav) minmax(0, 1fr) auto;
  }

  .theme-toggle,
  .frame-bottom > * {
    font-size: 9.5px;
  }

  .theme-toggle {
    grid-template-columns: auto 24px auto;
    gap: 8px;
    padding: 0 18px;
  }

  .theme-toggle span {
    display: inline;
  }

  .frame-left a {
    grid-template-columns: var(--rail-icon) minmax(0, 1fr);
    place-items: center start;
    gap: 14px;
    padding: 0 18px;
    font-size: var(--rail-label);
  }

  .frame-left a span {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: color-mix(in srgb, var(--ink) 74%, var(--muted));
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .frame-left a.is-active span,
  .frame-left a:hover span,
  .frame-left a:focus-visible span {
    color: var(--ink);
  }

  .site-shell {
    width: 100%;
    max-width: none;
    padding: calc(var(--rail) + 18px) calc(var(--rail) + 24px) 92px
      calc(var(--side-nav) + 22px);
  }
}

/* — Narrow desktop (~1280px) — */
@media (min-width: 1101px) and (max-width: 1320px) {
  .opening-atlas {
    min-height: clamp(560px, 76vh, 720px);
  }

  .atlas-workfield {
    min-height: clamp(580px, 76vh, 720px);
  }

  .opening-inscription {
    width: min(420px, 50%);
  }
}

/* — Tablet — inscription leaves overlay and stacks above the workfield.
   The opening behaves like a block flow again. */
@media (max-width: 1100px) {
  .opening {
    min-height: auto;
    padding-bottom: 56px;
  }

  body[data-page="atlas"] .opening {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 56px);
  }

  .opening-inscription {
    position: static;
    width: min(560px, 100%);
    padding: 14px 0 24px;
  }

  .opening-atlas {
    min-height: clamp(440px, 60vh, 580px);
  }

  .atlas-orb {
    max-width: 380px;
    margin: 0 auto;
  }

  .atlas-orb-home {
    top: 54%;
    right: clamp(20px, 8vw, 72px);
    width: min(380px, 58vw);
    margin: 0;
  }

  .ledger,
  .atlas-rows,
  .atlas-close {
    grid-template-columns: 1fr;
  }

  .ledger-head,
  .atlas-rows-head {
    position: static;
    padding-right: 0;
  }
}

/* — Mobile — */
@media (max-width: 700px) {
  :root {
    --rail: 48px;
    --side-nav: 48px;
    --grid: 36px;
    --gap: 14px;
    --display-title: clamp(2rem, 7vw, 2.5rem);
    --horizon-y: 66%;
    --horizon-scroll-y: 66vh;
    --orb-x: 54%;
    --mobile-bottom-inset: max(16px, env(safe-area-inset-bottom));
  }

  body {
    overflow-x: hidden;
  }

  .frame-left a,
  .frame-inspector > * {
    font-size: 8.5px;
  }

  .frame-inspector {
    bottom: calc(var(--rail-item) + var(--mobile-fixed-bottom));
    height: min(34svh, calc(var(--grid) * 5));
  }

  .frame-left {
    bottom: 0;
    height: calc(100svh - var(--rail));
    padding-bottom: var(--mobile-fixed-bottom);
  }

  .top-meta {
    display: none;
  }

  .top-marquee {
    padding: 0 14px;
    font-size: 9px;
  }

  .site-shell {
    width: auto;
    margin: 0;
    overflow-x: hidden;
    padding: calc(var(--rail) + var(--gap)) calc(var(--rail) + var(--gap))
      calc(64px + var(--mobile-fixed-bottom))
      calc(var(--rail) + var(--gap));
  }

  .opening,
  .shell-atlas .opening {
    padding-bottom: 16px;
  }

  .opening-inscription {
    padding: 8px 0 24px;
  }

  .opening-atlas {
    min-height: 460px;
  }

  .atlas-orb,
  .atlas-orb-home {
    max-width: 300px;
  }

  .atlas-orb-home {
    top: 54%;
    right: 50%;
    width: min(300px, 72vw);
    transform: translate(50%, -50%);
  }

  .atlas-orb-caption {
    margin-top: 10px;
    font-size: 8.5px;
  }

  .opening-atlas-meta {
    left: 4px;
    bottom: 12px;
    max-width: 86%;
  }

  .opening-atlas-meta .oa-line {
    display: none;
  }

  .field-node {
    font-size: 9px;
    gap: 8px;
  }

  .field-node > span > b {
    font-size: 10px;
  }

  .field-node > span > em {
    font-size: 8px;
  }

  /* Mobile dot-column — narrower so the labels have room. The vertical
     positions inherit from desktop (top: 22/38/54/70%). */
  .opening-atlas-field {
    --dot-column: clamp(36px, 8vw, 64px);
  }

  .display-line + .display-line {
    margin-left: 18px;
  }

  .display-echo {
    display: none;
  }

  .ledger,
  .atlas-rows {
    margin-top: 36px;
    padding-top: 26px;
  }

  .ledger-row,
  .atlas-row {
    grid-template-columns: 36px 20px 1fr;
    grid-template-rows: auto auto;
    gap: 12px 14px;
    padding: 16px 0 18px;
  }

  .ledger-row .ui-icon,
  .atlas-row .ui-icon {
    grid-row: 1;
  }

  .ledger-index,
  .atlas-row-index {
    grid-row: 1;
  }

  .ledger-body,
  .atlas-row-body {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .ledger-tag,
  .atlas-row-tag {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
    min-width: 0;
    padding: 3px 7px;
    font-size: 8.5px;
  }

  .atlas-workfield {
    min-height: 540px;
  }

  .wf-plane {
    inset: 0;
  }

  .wf-node {
    font-size: 9.5px;
    gap: 10px;
  }

  .wf-node > span > b {
    font-size: 10.5px;
  }

  .wf-node > span > small {
    font-size: 8px;
  }

  /* Mobile Atlas workfield — narrower dot column so the longer labels
     (Storyboard, Aspects, Levels) have room. Vertical positions
     inherit from desktop (top: 14/26/38/50/62/74%). */
  .atlas-workfield {
    --dot-column: clamp(44px, 9vw, 80px);
  }

  /* Mobile selection chip — tighter ring on the dots. */
  .node-world::before,
  .field-node-world::before {
    box-shadow:
      0 0 0 3px transparent,
      0 0 0 4px color-mix(in srgb, var(--ink) 50%, transparent);
  }

  .atlas-close {
    grid-template-columns: 1fr;
    margin-top: 36px;
    padding-top: 26px;
    gap: 22px;
  }

  .atlas-close-aside {
    padding: 18px;
  }

  .atlas-actions {
    margin-top: 22px;
  }

  .action {
    min-height: 32px;
    padding: 0 12px;
    font-size: 9.5px;
  }

  .frame-bottom {
    bottom: 0;
    left: 0;
    width: 100vw;
    height: calc(var(--rail-item) + var(--mobile-fixed-bottom));
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    border-right: 0;
    padding: 0 var(--rail) var(--mobile-fixed-bottom) var(--side-nav);
  }

  .frame-bottom::after {
    content: none;
  }

  .frame-bottom-status {
    display: none;
  }

  .frame-bottom > * {
    height: var(--rail-item);
    padding: 0 12px;
    font-size: 8.5px;
    letter-spacing: 0.075em;
  }

  .footer-contact {
    gap: 10px;
  }
}

@media (max-width: 380px) {
  :root {
    --display-title: clamp(1.9rem, 7.4vw, 2.3rem);
  }

  .opening-inscription {
    padding: 8px 0 0;
  }
}

/* =============================================================
   FOCUS
   ============================================================= */

a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--green);
  outline-offset: 3px;
}

.opening-atlas:focus-visible {
  outline: 1px solid var(--green);
  outline-offset: 4px;
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */

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

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}