:root {
  color-scheme: dark;
  --bg: #071013;
  --bg-elevated: rgba(12, 24, 29, 0.88);
  --text: #d8e4e8;
  --muted: #8ca0a8;
  --line: rgba(180, 217, 229, 0.2);
  --cyan: #87d8ff;
  --teal: #5ca9a2;
  --amber: #f3aa4e;
  --frame-wall: 5px;
  --frame-depth: 30px;
  --rail-width: 316px;
  --page-gutter: clamp(24px, 5vw, 84px);
  --focus-ring: 0 0 0 3px rgba(135, 216, 255, 0.45);
  background: var(--bg);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #edf3f2;
  --bg-elevated: rgba(245, 249, 248, 0.92);
  --text: #17282e;
  --muted: #5b7078;
  --line: rgba(29, 67, 78, 0.2);
  --cyan: #176b8b;
  --teal: #317c76;
  --amber: #9f6115;
  background: var(--bg);
}

/*
 * UI round 9: the Podium (Serras v1 "Immersive") token layer. Values are the
 * measured Podium tokens (podium-spec SPEC.md §1-§9); the base scheme tokens
 * above keep their names, so every surface reads these through var().
 * Hairlines are teal (#1c3a44 / #2b4e59 ramp), never whitish; surfaces are
 * translucent wells and sheets floating on the veil; translucency comes only
 * from fill alpha (and backdrop blur on glass), never from element opacity.
 */
:root {
  --line: #1c3a44;
  --line-strong: #2b4e59;
  --line-lift: #22454f;
  --line-detail: rgba(33, 69, 79, .7);
  --line-sheet: rgba(42, 78, 89, .75);
  --rule: rgba(28, 58, 68, .5);
  --rule-soft: rgba(28, 58, 68, .35);
  --text-hi: #def6ff;
  --text-body: #cfe0e8;
  --text-2: #9fc3d2;
  --text-label: rgba(159, 195, 210, .82);
  --glass: rgba(10, 20, 26, .84);
  --glass-bar: rgba(8, 16, 22, .5);
  --glass-bar-line: #21454f;
  --well: rgba(8, 16, 22, .55);
  --well-hover: rgba(6, 11, 16, .6);
  --well-press: rgba(8, 16, 22, .64);
  --well-quiet: rgba(8, 16, 22, .5);
  --chip-ground: rgba(6, 11, 16, .38);
  --raised: rgba(15, 30, 38, .72);
  --plate: linear-gradient(180deg, rgba(12, 22, 29, .72), rgba(6, 11, 16, .62));
  --sheet: linear-gradient(180deg, rgba(19, 31, 39, .82), rgba(12, 22, 29, .78));
  --lip: inset 0 1px 0 rgba(203, 228, 238, .05);
  --groove: inset 0 1px 2px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(203, 228, 238, .04);
  --groove-quiet: inset 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-plate: inset 0 1px 0 rgba(203, 228, 238, .05), 0 10px 26px rgba(0, 0, 0, .34);
  --shadow-sheet: inset 0 1px 0 rgba(203, 228, 238, .06), 0 14px 34px rgba(0, 0, 0, .4);
  --shadow-raised: 0 8px 22px rgba(0, 0, 0, .42), 0 4px 18px rgba(207, 238, 255, .06), inset 0 1px 0 rgba(203, 228, 238, .09);
  --key-ground: #def6ff;
  --key-ground-hover: #e9f9ff;
  --key-ink: #04080b;
  --key-shadow: 0 5px 18px rgba(2, 10, 13, .5), 0 0 12px rgba(222, 246, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .12);
  --key-shadow-press: 0 2px 7px rgba(28, 46, 56, .55), 0 0 18px rgba(222, 246, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .12);
  --key-pool: radial-gradient(50% 100% at 50% 0%, rgba(222, 246, 255, .20), transparent 72%);
  --key-pool-press: radial-gradient(50% 100% at 50% 0%, rgba(222, 246, 255, .36), transparent 72%);
  --key-outline: rgba(28, 58, 68, .30);
  --key-outline-hover: rgba(28, 58, 68, .50);
  --utility-key: rgba(8, 16, 22, .55);
  --utility-key-line: rgba(33, 69, 79, .75);
  --jade-word: #7fdca6;
  --jade-line: rgba(91, 208, 140, .55);
  --jade-ground: rgba(20, 54, 40, .4);
  --warn-word: #f2c94c;
  --warn-line: rgba(242, 201, 76, .6);
  --warn-ground: rgba(60, 50, 18, .42);
  --chip-line: rgba(126, 157, 170, .4);
  /* Interactive control boundaries (chips, outline and utility keys, inputs)
     clear 3:1 against their ground; wells and plates keep the quiet Podium
     hairline because their text identifies them (WCAG 1.4.11). */
  --control-line: #4d727e;
  --control-line-strong: #6c93a0;
  --substrate: 0 1px 3px rgba(3, 9, 11, .35), 0 0 1px rgba(3, 9, 11, .28);
  --ease-fog: cubic-bezier(.33, 0, .18, 1);
  --ease-fog-out: cubic-bezier(.45, .05, .6, 1);
  --ease-press: cubic-bezier(.16, 1, .3, 1);
  --ease-release: cubic-bezier(.22, 1, .36, 1);
  --radius-well: 12px;
  --radius-sheet: 14px;
  --radius-key: 10px;
  --radius-plate: 10px;
  --radius-control: 8px;
  --app-gap: 24px;
  --app-top: 24px;
  --bar-h: 56px;
  /* Calmer display ramp (operator decision: toward Podium's 26px station titles). */
  --title-size: clamp(2rem, 1.3rem + 1.8vw, 2.75rem);
  --title-size-sub: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);
  --lede-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  --body-size: 1rem;
  /* No label under 10px (operator decision). */
  --label-size: .625rem;
}
@media (max-width: 1023px) { :root { --app-gap: 20px; --app-top: 20px; } }
@media (max-width: 720px) { :root { --app-gap: 16px; --app-top: max(16px, calc(env(safe-area-inset-top, 0px) + 6px)); } }

/* Light: Podium ships no light scheme. The structure (radii, lips, strokes,
   translucency ratios) is kept and the values are re-derived from the light
   tokens; every text pair clears 4.5:1 and every boundary that identifies a
   control clears 3:1 (measured in the round 9 browser proof). */
:root[data-theme="light"] {
  --line: rgba(29, 67, 78, .2);
  --line-strong: rgba(29, 67, 78, .42);
  --line-lift: rgba(29, 67, 78, .24);
  --line-detail: rgba(29, 67, 78, .24);
  --line-sheet: rgba(29, 67, 78, .26);
  --rule: rgba(29, 67, 78, .16);
  --rule-soft: rgba(29, 67, 78, .12);
  --text-hi: #17282e;
  --text-body: #20343b;
  --text-2: #3f5d67;
  --text-label: #3f5d67;
  --glass: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  --glass-bar: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  --glass-bar-line: rgba(29, 67, 78, .22);
  --well: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  --well-hover: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
  --well-press: color-mix(in srgb, var(--bg) 92%, var(--text));
  --well-quiet: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
  --chip-ground: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  --raised: rgba(255, 255, 255, .78);
  --plate: linear-gradient(180deg, rgba(250, 252, 252, .92), rgba(236, 243, 242, .88));
  --sheet: linear-gradient(180deg, rgba(252, 253, 253, .9), rgba(242, 247, 246, .86));
  --lip: inset 0 1px 0 rgba(255, 255, 255, .5);
  --groove: inset 0 1px 2px rgba(23, 40, 46, .07), inset 0 1px 0 rgba(255, 255, 255, .5);
  --groove-quiet: inset 0 1px 2px rgba(23, 40, 46, .06);
  --shadow-plate: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 26px rgba(23, 40, 46, .08);
  --shadow-sheet: inset 0 1px 0 rgba(255, 255, 255, .6), 0 14px 34px rgba(23, 40, 46, .1);
  --shadow-raised: 0 8px 22px rgba(23, 40, 46, .1), inset 0 1px 0 rgba(255, 255, 255, .6);
  --key-ground: #17282e;
  --key-ground-hover: #22383f;
  --key-ink: #f5f9f8;
  --key-shadow: 0 5px 16px rgba(23, 40, 46, .22), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .2);
  --key-shadow-press: 0 2px 6px rgba(23, 40, 46, .26), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .2);
  --key-pool: radial-gradient(50% 100% at 50% 0%, rgba(23, 40, 46, .12), transparent 72%);
  --key-pool-press: radial-gradient(50% 100% at 50% 0%, rgba(23, 40, 46, .18), transparent 72%);
  --key-outline: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  --key-outline-hover: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
  --utility-key: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  --utility-key-line: rgba(29, 67, 78, .42);
  --jade-word: #14663f;
  --jade-line: rgba(20, 102, 63, .5);
  --jade-ground: rgba(20, 102, 63, .07);
  --warn-word: #6f5200;
  --warn-line: rgba(111, 82, 0, .5);
  --warn-ground: rgba(111, 82, 0, .07);
  --chip-line: rgba(29, 67, 78, .42);
  --control-line: rgba(29, 67, 78, .62);
  --control-line-strong: rgba(29, 67, 78, .82);
  --substrate: none;
}

/*
 * UI round 13 (operator-directed, AMD-20261001-WORK-CASE-STUDY): story role
 * colours and status-pill tones for the Work case study. Hues are the Serras
 * theme's (tarva-ui-library src/themes/serras/palette.ts at commit 7d1969a,
 * copied, not imported): problem = ember (danger #F26B54 / bright #FF8B76,
 * light solid #8F3E30), system = teal (#3F8A9B / soft #6EA6B3), outcome = the
 * site's jade, proof = info (#60A5FA / bright #87D8FF), role = neutral steel.
 * Each role has a word colour (text, >= 4.5:1 on its tinted card), an edge
 * (UI, >= 3:1 against the card and against the veil beside it: the dark
 * scheme's system edge is the soft teal and its role edge a lighter steel for
 * that reason) and a faint ground. Ember is never a ground for white text:
 * a solid role or status fill takes --status-ink (#04080B).
 */
:root {
  --role-problem: #ff8b76;
  --role-problem-edge: #f26b54;
  --role-problem-ground: rgba(242, 107, 84, .075);
  --role-system: #6ea6b3;
  --role-system-edge: #6ea6b3;
  --role-system-ground: rgba(63, 138, 155, .1);
  --role-outcome: var(--jade-word);
  --role-outcome-edge: #5bd08c;
  --role-outcome-ground: rgba(91, 208, 140, .07);
  --role-proof: #87d8ff;
  --role-proof-edge: #60a5fa;
  --role-proof-ground: rgba(96, 165, 250, .075);
  --role-role: var(--text-2);
  --role-role-edge: #8aacb8;
  --role-role-ground: rgba(126, 157, 170, .06);
  --status-ink: #04080b;
  --status-live: var(--jade-word);
  --status-live-dot: #5bd08c;
  --status-live-line: var(--jade-line);
  --status-live-ground: var(--jade-ground);
  --status-beta: var(--warn-word);
  --status-beta-dot: #f3aa4e;
  --status-beta-line: var(--warn-line);
  --status-beta-ground: var(--warn-ground);
  --status-build: #87d8ff;
  --status-build-dot: #87d8ff;
  --status-build-line: rgba(135, 216, 255, .5);
  --status-build-ground: rgba(135, 216, 255, .08);
  --status-still: var(--text-2);
  --status-still-dot: #6c93a0;
  --status-still-line: var(--control-line);
  --status-still-ground: var(--chip-ground);
  --bloom-strength: 55%;
  --dot-glow: 55%;
}
:root[data-theme="light"] {
  --role-problem: #8f3e30;
  --role-problem-edge: #b4513f;
  --role-problem-ground: rgba(143, 62, 48, .06);
  --role-system: #1f5f6e;
  --role-system-edge: #2f7687;
  --role-system-ground: rgba(63, 138, 155, .09);
  --role-outcome-edge: #1f8a57;
  --role-outcome-ground: rgba(20, 102, 63, .06);
  --role-proof: #1c5a96;
  --role-proof-edge: #2f76c9;
  --role-proof-ground: rgba(47, 118, 201, .06);
  --role-role-edge: #647f86;
  --role-role-ground: rgba(29, 67, 78, .04);
  --status-live-dot: #1f8a57;
  --status-beta-dot: #9f6115;
  --status-build: #176b8b;
  --status-build-dot: #176b8b;
  --status-build-line: rgba(23, 107, 139, .5);
  --status-build-ground: rgba(23, 107, 139, .07);
  --status-still-dot: #647f86;
  --bloom-strength: 34%;
  --dot-glow: 0%;
}

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

html {
  min-width: 320px;
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 22% 18%, rgba(67, 129, 139, 0.14), transparent 34rem),
    linear-gradient(145deg, var(--bg), color-mix(in srgb, var(--bg) 91%, var(--teal)));
  font-family: "Instrument Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: 0.2em; }
/* Podium never tints links cyan on hover: cyan is focus and interaction chrome only (UI round 9). */
a:hover { color: var(--text-hi, var(--text)); }
:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
[hidden] { display: none !important; }
[inert] { pointer-events: none; user-select: none; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 50%;
  translate: -50% -180%;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  color: var(--text);
  background: var(--bg-elevated);
  transition: translate 160ms cubic-bezier(.16, 1, .3, 1);
}
.skip-link:focus { translate: -50% 0; }

#vessel-canvas {
  position: fixed;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.vessel-frame {
  position: fixed;
  z-index: 90;
  inset: 0;
  border: var(--frame-wall) solid color-mix(in srgb, var(--text) 30%, transparent);
  box-shadow: inset 0 0 var(--frame-depth) color-mix(in srgb, var(--bg) 82%, transparent);
  pointer-events: none;
}

.shell { min-height: 100vh; }

.site-main {
  position: relative;
  z-index: 1;
  width: min(100%, 1160px);
  min-height: 100vh;
  padding: clamp(108px, 14vh, 168px) var(--page-gutter) max(150px, calc(var(--frame-depth) + 88px));
}

.home-identity { max-width: 760px; }
.home-identity h1 {
  max-width: 10ch;
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(5rem, 13vw, 12rem);
  font-weight: 440;
  font-variation-settings: "opsz" 72, "SOFT" 20, "WONK" 0;
  letter-spacing: -0.065em;
  line-height: 0.84;
}

.eyebrow,
.rail-main-grid span,
.site-rail {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.eyebrow { margin: 0 0 20px; color: var(--muted); }

/* ---- Partner-firm logos (UI round 19; AMD-20261001-ABOUT-LOGOS) ---------
   A partner link shown by the firm's own logo. The firm name stays in the link
   (visually hidden) as its accessible name. The image box is trimmed to its
   visible ink by the margins the renderer supplies, so the two logos sit at a
   matched optical size. The artwork is never recoloured: EIGHT32 ships a
   variant per scheme; Libre Labs publishes white lettering only, so in the
   light scheme it sits on a dark plate. */
[data-partner-link] {
  position: relative;
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  vertical-align: middle;
}
.partner-logo__art {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  opacity: .9;
  transition: opacity .25s ease;
}
[data-partner-link]:hover .partner-logo__art,
[data-partner-link]:focus-visible .partner-logo__art { opacity: 1; }
.partner-logo__img {
  display: block;
  flex: none;
  max-width: none;
}
.partner-logo__img--light { display: none; }
:root[data-theme="light"] .partner-logo__img--dark,
body[data-scheme="light"] .partner-logo__img--dark { display: none; }
:root[data-theme="light"] .partner-logo__img--light,
body[data-scheme="light"] .partner-logo__img--light { display: block; }
.partner-logo__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* In an attribution line the plate is a small chip around the logo. */
:root[data-theme="light"] [data-partner-link="line"] .partner-logo__art--plate,
body[data-scheme="light"] [data-partner-link="line"] .partner-logo__art--plate {
  padding: 5px 8px;
  background: #071013;
}
/* In the Partner firms pair each logo sits in its own quiet well. */
[data-partner-link="block"] {
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--control-line);
  border-radius: 999px;
  background: var(--chip-ground);
  transition: border-color .25s ease, background-color .25s ease;
}
[data-partner-link="block"]:hover {
  border-color: var(--control-line-strong);
  background: var(--well-hover);
}
:root[data-theme="light"] [data-partner-link="block"][data-partner-plate],
body[data-scheme="light"] [data-partner-link="block"][data-partner-plate],
:root[data-theme="light"] [data-partner-link="block"][data-partner-plate]:hover,
body[data-scheme="light"] [data-partner-link="block"][data-partner-plate]:hover {
  border-color: #071013;
  background: #071013;
}
@media (prefers-reduced-motion: reduce) {
  .partner-logo__art,
  [data-partner-link="block"] { transition: none; }
}
.inline-action { display: inline-flex; min-height: 44px; align-items: center; margin-top: 32px; color: var(--cyan); }

/*
 * The docked lockup is the header's logo and the way home (UI round 11): it sits at the left
 * end of the glass header bar, mirroring the scheme seal at the right end. Its 44px box is
 * the seal's target height, centred on the bar's centre line, starting 4px inside the bar
 * with 8px of padding, so the ink starts 12px inside the bar, the bar's padding (the seal's
 * disc sits 12px from the right end). The whole box is the tap target. The lockup artwork is
 * 20px tall, centred in that box. The approved horizontal lockup is shown through a window
 * cropped to its ink band (512 x 79.9 units, starting 216 units down its square artboard);
 * the asset itself is never altered.
 */
.site-home-mark {
  --tarva-dock-size: 44px;
  --tarva-dock-inset: 12px;
  --tarva-dock-pad: 8px;
  --tarva-dock-ink: calc(var(--tarva-dock-size) - (2 * var(--tarva-dock-inset)));
  position: fixed;
  z-index: 85;
  top: calc(var(--app-top) + (var(--bar-h) / 2) - (var(--tarva-dock-size) / 2));
  left: calc(var(--app-gap) + env(safe-area-inset-left, 0px) + 4px);
  display: block;
  width: calc((var(--tarva-dock-ink) * 6.408) + (2 * var(--tarva-dock-pad)));
  height: var(--tarva-dock-size);
  padding: 0 var(--tarva-dock-pad);
  text-decoration: none;
  cursor: pointer;
}
.site-home-lockup.tarva-identity {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: filter 500ms cubic-bezier(.33, 0, .18, 1);
}
.site-home-lockup.tarva-identity > img {
  position: absolute;
  top: calc(var(--tarva-dock-inset) - (var(--tarva-dock-ink) * 2.7034));
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
/* The lockup is LED light on the dark field: a tight, non-directional bloom. */
:root:not([data-theme="light"]) .site-home-lockup.tarva-identity {
  filter:
    drop-shadow(0 0 3px rgba(207, 238, 255, .30))
    drop-shadow(0 0 8px rgba(135, 216, 255, .12));
}
/* Escape hatch: pointer plus a subtle lamp-brighten on hover and keyboard focus; no
   underline, no box. */
a.site-home-mark:focus-visible {
  outline: none;
  box-shadow: none;
}
:root:not([data-theme="light"]) .site-home-mark:hover .site-home-lockup,
:root:not([data-theme="light"]) a.site-home-mark:focus-visible .site-home-lockup {
  filter:
    brightness(1.22)
    drop-shadow(0 0 4px rgba(160, 225, 255, .62))
    drop-shadow(0 0 12px rgba(135, 216, 255, .26));
}
:root[data-theme="light"] .site-home-mark:hover .site-home-lockup,
:root[data-theme="light"] a.site-home-mark:focus-visible .site-home-lockup {
  filter:
    brightness(1.22)
    drop-shadow(0 0 5px color-mix(in srgb, var(--cyan) 42%, transparent));
}
.site-wordmark { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.05em; }
.site-home-mark-lamp-target { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; }

/* Later in the session Home opens straight on its settled state: no entrance, no flash. */
.arrival-seen [data-arrival] { display: none !important; }

.utilities {
  position: fixed;
  z-index: 70;
  top: max(22px, calc(env(safe-area-inset-top) + 22px));
  right: max(24px, calc(env(safe-area-inset-right) + 24px));
}
.utilities:empty { display: none; }

/*
 * The scheme control is the top-right seal of the shell: a quiet steel-ring disc (28px) in a
 * 44px target, never amber. It sits in the header row, above the guide pane.
 */
.utilities { top: max(21px, calc(env(safe-area-inset-top) + 21px)); right: max(22px, calc(env(safe-area-inset-right) + 22px)); }
@media (min-width: 1024px) {
  .utilities { top: max(30px, calc(env(safe-area-inset-top) + 30px)); right: max(28px, calc(env(safe-area-inset-right) + 28px)); }
}
.scheme-switch {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--rail-ink-strong, var(--text));
  cursor: pointer;
}
.scheme-switch::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1.25px solid rgba(159, 195, 210, .45);
  border-radius: 50%;
  background: rgba(8, 16, 22, .55);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(203, 228, 238, .05);
  transition: transform .12s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
}
:root[data-theme="light"] .scheme-switch::before {
  border-color: color-mix(in srgb, var(--muted) 55%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.scheme-switch:hover::before { border-color: rgba(159, 195, 210, .62); }
:root[data-theme="light"] .scheme-switch:hover::before { border-color: var(--muted); }
.scheme-switch:active::before { transform: translateY(1px); }
.scheme-switch-glyph {
  position: relative;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}
.scheme-switch-glyph path { fill: currentColor; stroke: none; }
.scheme-switch-word {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body .utilities .scheme-switch:focus-visible {
  outline: 2px solid var(--rail-focus, var(--cyan));
  outline-offset: -2px;
  box-shadow: none;
}

.site-rail {
  position: fixed;
  z-index: 50;
  top: var(--frame-depth);
  right: var(--frame-depth);
  bottom: var(--frame-depth);
  width: var(--rail-width);
  overflow: auto;
  padding: 72px 24px 88px;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: blur(24px) saturate(1.08);
}
.site-rail ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-rail a {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid transparent;
  text-decoration: none;
}
.site-rail a[aria-current="page"] { border-color: var(--cyan); color: var(--cyan); }

.rail-main-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rail-main-grid li:first-child:last-child { grid-column: 1 / -1; }
.rail-main-grid a {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
  text-decoration: none;
}
.nojs-main-menu { max-width: 560px; margin-bottom: clamp(64px, 10vw, 120px); }
.js .nojs-main-menu { display: none; }
.no-js .site-rail, .no-js .rail-scrim, .no-js .rail-trigger, .no-js .js-only { display: none !important; }

.arrival {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  transition: opacity 460ms cubic-bezier(.16, 1, .3, 1), visibility 460ms;
}
/* The still field: the no-WebGL, light-scheme and pre-render ground of the entrance. */
.arrival::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(80, 174, 190, 0.16), transparent 25rem),
    color-mix(in srgb, var(--bg) 97%, transparent);
  transition: opacity 600ms cubic-bezier(.33, 0, .18, 1);
}
/* With the live fog running, the entrance plays on it: the rising mark is its lamp. */
:root:not([data-theme="light"]) body.gl-ready[data-scheme="dark"] .arrival::before { opacity: 0; }

/*
 * The entrance, in three beats on the live timeline (data-arrival-phase):
 * void -> rise (BEAT 1: the mark rises and lights) -> hold -> word (BEAT 2: the word ignites
 * beneath it, letter by letter) -> line (BEAT 3: Begin is delivered through the haze) -> seat.
 * Begin plays descend: the stacked lockup travels to the header lockup and resolves
 * into it (the mark settles left of the word), then the page is revealed.
 * The stacked geometry is the approved lockup's own: the word is 381.1 x 73.35 units, the mark
 * 79.9 units, 150px of word as on the live entrance.
 */
.arrival-stage { position: absolute; inset: 0; }
.js .arrival:not([data-arrival-phase]) .arrival-stage { visibility: hidden; }
.arrival-mark {
  position: absolute;
  top: calc(40% - 43px);
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  color: var(--cyan);
  line-height: 0;
  pointer-events: none;
}
.tarva-arrival-lockup {
  --arrival-word: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--arrival-word) * .1707);
  opacity: 0;
  transform: translate3d(0, var(--arrival-rise, 0px), 0);
  transition:
    opacity 1.8s cubic-bezier(.33, 0, .18, 1),
    filter 1.6s cubic-bezier(.33, 0, .18, 1);
}
.arrival[data-arrival-skipped] .tarva-arrival-lockup {
  transition:
    opacity .8s cubic-bezier(.33, 0, .18, 1),
    filter 1.2s cubic-bezier(.33, 0, .18, 1),
    transform .8s cubic-bezier(.33, 0, .18, 1);
}
.arrival[data-arrival-phase]:not([data-arrival-phase="void"]) .tarva-arrival-lockup { opacity: 1; }
.tarva-arrival-sign {
  flex: none;
  width: calc(var(--arrival-word) * .20966);
  height: calc(var(--arrival-word) * .20966);
  transform-origin: 0 0;
}
.tarva-arrival-word {
  position: relative;
  flex: none;
  display: block;
  width: var(--arrival-word);
  height: calc(var(--arrival-word) * .19247);
  transform-origin: 0 0;
}
.tarva-arrival-letter.tarva-identity {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  filter: blur(3px);
  transition:
    opacity .9s cubic-bezier(.33, 0, .18, 1) calc(var(--i, 0) * .14s),
    filter .9s cubic-bezier(.33, 0, .18, 1) calc(var(--i, 0) * .14s);
}
.tarva-arrival-letter.tarva-identity > img {
  position: absolute;
  top: calc(var(--arrival-word) * -.57531);
  left: calc(var(--arrival-word) * -.34348);
  width: calc(var(--arrival-word) * 1.34348);
  max-width: none;
  height: calc(var(--arrival-word) * 1.34348);
}
/* One window per letter, split at the midpoints of the gaps between letters. */
.tarva-arrival-letter:nth-child(1) { --i: 0; clip-path: inset(-40% 80.506% -40% -6%); }
.tarva-arrival-letter:nth-child(2) { --i: 1; clip-path: inset(-40% 59.827% -40% 19.494%); }
.tarva-arrival-letter:nth-child(3) { --i: 2; clip-path: inset(-40% 40.331% -40% 40.173%); }
.tarva-arrival-letter:nth-child(4) { --i: 3; clip-path: inset(-40% 18.827% -40% 59.669%); }
.tarva-arrival-letter:nth-child(5) { --i: 4; clip-path: inset(-40% -6% -40% 81.173%); }
.arrival:is([data-arrival-phase="word"], [data-arrival-phase="line"], [data-arrival-phase="seat"], [data-arrival-phase="descend"]) .tarva-arrival-letter {
  opacity: 1;
  filter: none;
}
/* Seated, the word does not breathe: a slow silk ripple travels T to A; the mark holds still. */
.arrival[data-arrival-phase="seat"] .tarva-arrival-letter {
  --ra: calc(.4px + var(--i, 0) * .2px);
  animation: markRipple 4.6s ease-in-out calc((var(--i, 0) - 6) * .46s) infinite;
}
/* The lockup is LED light: crisp letterforms with a tight core bloom; while it travels and
   lights the word it burns brighter, it is the lamp. */
:root:not([data-theme="light"]) .tarva-arrival-lockup {
  filter:
    drop-shadow(0 0 3px rgba(135, 216, 255, .50))
    drop-shadow(0 0 10px rgba(135, 216, 255, .20))
    drop-shadow(0 0 26px rgba(135, 216, 255, .09));
}
:root:not([data-theme="light"]) .arrival:is([data-arrival-phase="rise"], [data-arrival-phase="hold"], [data-arrival-phase="word"]) .tarva-arrival-lockup {
  filter:
    drop-shadow(0 0 4px rgba(160, 225, 255, .80))
    drop-shadow(0 0 14px rgba(135, 216, 255, .36))
    drop-shadow(0 0 40px rgba(135, 216, 255, .15));
}
/* Descend: one composite glide to the header seat; the bloom trims to the docked lamp. */
.arrival[data-arrival-phase="descend"] .tarva-arrival-sign {
  transform: translate3d(var(--dock-sign-x, 0px), var(--dock-sign-y, 0px), 0) scale(var(--dock-sign-s, 1));
  transition: transform 2.2s cubic-bezier(.65, 0, .35, 1) .35s;
}
.arrival[data-arrival-phase="descend"] .tarva-arrival-word {
  transform: translate3d(var(--dock-word-x, 0px), var(--dock-word-y, 0px), 0) scale(var(--dock-word-s, 1));
  transition: transform 2.2s cubic-bezier(.65, 0, .35, 1) .35s;
}
:root:not([data-theme="light"]) .arrival[data-arrival-phase="descend"] .tarva-arrival-lockup {
  filter:
    drop-shadow(0 0 3px rgba(207, 238, 255, .30))
    drop-shadow(0 0 8px rgba(135, 216, 255, .12))
    drop-shadow(0 0 26px rgba(135, 216, 255, 0));
  transition: filter 2.2s cubic-bezier(.65, 0, .35, 1) .35s;
}
.arrival-begin {
  position: absolute;
  top: calc(40% + 84px);
  left: 50%;
  min-width: 112px;
  min-height: 48px;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  color: var(--text);
  background: rgba(7, 16, 19, 0.42);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  translate: -50% 0;
}
/* BEAT 3: Begin blooms blurred in the haze first, then its body resolves. */
.arrival:is([data-arrival-phase="line"], [data-arrival-phase="seat"]) .arrival-begin {
  opacity: 1;
  visibility: visible;
  animation: btnEmerge 1.4s cubic-bezier(.33, 0, .18, 1) .5s both;
}
.arrival[data-arrival-phase="descend"] .arrival-begin {
  visibility: visible;
  pointer-events: none;
  animation: cardLeave .5s cubic-bezier(.33, 0, .18, 1) both;
}
.arrival-begin:active { transform: translateY(2px); }
.arrival-complete { opacity: 0; visibility: hidden; pointer-events: none; }
/* The docked lockup takes over in the same frame; the travelling copy never cross-fades. */
.arrival.arrival-complete .arrival-stage { visibility: hidden; }
.js:not(.arrival-seen) body[data-arrival-state="pending"] > :not(.arrival):not(.skip-link):not(.vessel-frame):not(#vessel-canvas):not(script):not(noscript) { visibility: hidden; }
/* Nothing of the page shows through the open fog while the entrance owns the root. */
.js:not(.arrival-seen) body[data-arrival-state="pending"] :is(.shell, .utilities) * { visibility: hidden !important; }

/* ---- UI round 9: Podium polish (shell level) ---------------------------------
 * SPEC/MAPPING refs in brackets. Everything here is CSS over existing markup.
 */

/* Plain text on the veil carries Podium's whisper substrate [SPEC 1.2, P:1199]. */
.site-main { text-shadow: var(--substrate); }
.site-main :where(.inline-action, input, textarea, button, img) { text-shadow: none; }

/* Mono sub-line / eyebrow grammar [SPEC 6 .c-sub; MAPPING 6]: 10px floor. */
.site-main .eyebrow {
  margin: 0 0 14px;
  color: var(--text-label);
  font: 500 var(--label-size)/1.5 var(--font-meta, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Actions [SPEC 8.7; MAPPING 7, 9]. Every inline action is a 44px key; the
   outline key is the default, the lit steel key marks a surface's one primary
   action, and continuation links are the mono utility key. Press moves down,
   never up: keys 2px, outline and utility keys 1px; release is softer. */
.site-main .inline-action {
  position: relative;
  min-height: 44px;
  align-items: center;
  gap: .5rem;
  padding: 0 18px;
  border: 1px solid var(--control-line);
  border-radius: var(--radius-key);
  color: var(--text-hi);
  background: var(--key-outline);
  font: 600 .875rem/1.2 var(--font-body, "Instrument Sans", sans-serif);
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out, box-shadow .28s var(--ease-release), transform .28s var(--ease-release);
}
.site-main .inline-action:hover { color: var(--text-hi); background: var(--key-outline-hover); border-color: var(--control-line-strong); }
.site-main .inline-action:active { transform: translateY(1px); transition-duration: .12s; transition-timing-function: var(--ease-press); }

.site-main :is([data-home-actions] .inline-action:first-child, [data-home-closing-action], .idea-lab-actions .inline-action, [data-contact-recovery], .not-found-surface .inline-action, [data-screen-id="SCR-NOT-FOUND"] .inline-action) {
  isolation: isolate;
  border-color: transparent;
  color: var(--key-ink);
  background: var(--key-ground);
  box-shadow: var(--key-shadow);
}
.site-main :is([data-home-actions] .inline-action:first-child, [data-home-closing-action], .idea-lab-actions .inline-action, [data-contact-recovery], .not-found-surface .inline-action, [data-screen-id="SCR-NOT-FOUND"] .inline-action)::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -9px;
  width: 118%;
  height: 22px;
  transform: translateX(-50%);
  opacity: .7;
  background: var(--key-pool);
  pointer-events: none;
  transition: opacity .28s var(--ease-release), transform .28s var(--ease-release), height .28s var(--ease-release);
}
.site-main :is([data-home-actions] .inline-action:first-child, [data-home-closing-action], .idea-lab-actions .inline-action, [data-contact-recovery], .not-found-surface .inline-action, [data-screen-id="SCR-NOT-FOUND"] .inline-action):hover {
  color: var(--key-ink);
  background: var(--key-ground-hover);
  border-color: transparent;
}
.site-main :is([data-home-actions] .inline-action:first-child, [data-home-closing-action], .idea-lab-actions .inline-action, [data-contact-recovery], .not-found-surface .inline-action, [data-screen-id="SCR-NOT-FOUND"] .inline-action):hover::after { opacity: .85; }
.site-main :is([data-home-actions] .inline-action:first-child, [data-home-closing-action], .idea-lab-actions .inline-action, [data-contact-recovery], .not-found-surface .inline-action, [data-screen-id="SCR-NOT-FOUND"] .inline-action):active {
  transform: translateY(2px);
  box-shadow: var(--key-shadow-press);
}
.site-main :is([data-home-actions] .inline-action:first-child, [data-home-closing-action], .idea-lab-actions .inline-action, [data-contact-recovery], .not-found-surface .inline-action, [data-screen-id="SCR-NOT-FOUND"] .inline-action):active::after {
  opacity: 1;
  height: 15px;
  transform: translateX(-50%) scale(.9);
  background: var(--key-pool-press);
}

/* The glass header bar [SPEC 8.4; MAPPING 2]. It holds the docked lockup (the
   logo and way home) at its left end and the scheme seal at its right end
   (the tenant plate, search ring and notch are left out: operator decision).
   It sits on the one-gap law the docked rail already uses (rail top = app-top
   + 56 + gap) and inside the safe area; Menu stays alone in the bottom-right
   corner. The bar itself is decorative: pointer-transparent, never focusable,
   never covering a control (the lockup and seal ride above it). */
.shell::before {
  content: "";
  position: fixed;
  z-index: 60;
  top: var(--app-top);
  right: calc(var(--app-gap) + env(safe-area-inset-right, 0px));
  left: calc(var(--app-gap) + env(safe-area-inset-left, 0px));
  height: var(--bar-h);
  border: 1px solid var(--glass-bar-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  box-shadow: var(--lip);
  pointer-events: none;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .shell::before {
    background: var(--glass-bar);
    -webkit-backdrop-filter: blur(8px) saturate(1.12);
    backdrop-filter: blur(8px) saturate(1.12);
  }
}
/* The top scroll edge [SPEC 2 scroll-edge fades]: content dissolves as it
   passes under the bar instead of being cut by it. */
body::before {
  content: "";
  position: fixed;
  z-index: 45;
  top: 0;
  right: 0;
  left: 0;
  height: calc(var(--app-top) + var(--bar-h) + 28px);
  pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 78%, transparent) 0, color-mix(in srgb, var(--bg) 52%, transparent) 55%, transparent);
}
.js:not(.arrival-seen) body[data-arrival-state="pending"]::before { visibility: hidden; }
/* The scheme seal sits inside the bar, 12px from its right end, on its centre line. */
.utilities { top: calc(var(--app-top) + (var(--bar-h) / 2) - 22px); right: calc(var(--app-gap) + env(safe-area-inset-right, 0px) + 4px); }
@media (min-width: 1024px) {
  .utilities { top: calc(var(--app-top) + (var(--bar-h) / 2) - 22px); right: calc(var(--app-gap) + env(safe-area-inset-right, 0px) + 4px); }
}
/* Content starts one gap below the bar. */
.site-main { padding-top: calc(var(--app-top) + var(--bar-h) + var(--app-gap) + clamp(16px, 3.4vh, 40px)); }

/* The room recedes while the overlay guide owns it [SPEC 2; MAPPING 4.7]
   (below 1024px only; the docked rail never dims the page). Visual only:
   the page is already inert behind the modal guide. */
.site-main, .site-home-mark { transition: opacity .45s ease; }
body[data-guide-overlay="open"] .site-main { opacity: .35; }
body[data-guide-overlay="open"] .shell::before { opacity: .35; }
/* The header lockup recedes with its bar, and sleeps (inert) while the guide owns the room. */
body[data-guide-overlay="open"] .site-home-mark { opacity: .35; }

/* The seam at the content column's right edge (x = 1076 at 1440 with the rail
   docked) was main#main's focus ring: the arrival and the skip link focus the
   landmark programmatically, and its ring drew one cyan vertical line. The
   landmark is not a control; its focus is not painted (the skip link and every
   control keep their ring). */
main#main[tabindex="-1"]:focus,
main#main[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* 404: the quiet placeholder in the left column [SPEC 8.9; MAPPING 13]. */
[data-screen-id="SCR-NOT-FOUND"] h1 { margin: 0 0 .6rem; color: var(--text-hi); font-size: var(--title-size); letter-spacing: .005em; line-height: 1.08; }
[data-screen-id="SCR-NOT-FOUND"] h1 + p { max-width: 52ch; margin: 0; color: var(--text-2); font-size: var(--lede-size); line-height: 1.55; }

/* Home organizations (shown only when confirmed): the mono section label. */
.home-surface .client-roster > h2 {
  margin: 0 0 .75rem;
  color: var(--text-2);
  font: 500 var(--label-size)/1.5 var(--font-meta, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: .2em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .site-main { width: calc(100% - var(--rail-width) - var(--frame-depth)); }
}

@media (max-width: 1023px) {
  .site-main { width: 100%; }
  .site-rail {
    width: min(var(--rail-width), calc(100vw - (2 * var(--frame-depth))));
    translate: 110% 0;
    transition: translate 260ms cubic-bezier(.16, 1, .3, 1), opacity 260ms;
  }
  .rail-open .site-rail { translate: 0 0; }
}

@media (max-width: 767px) {
  .site-main { padding-inline: max(24px, calc(env(safe-area-inset-left) + 24px)); }
  .site-rail { left: var(--frame-depth); width: auto; }
  .home-identity h1 { font-size: clamp(4.5rem, 24vw, 7rem); }
}

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