/* ════════════════════════════════════════════════════════════════
   GLOBAL STYLESHEET — Daniel Sanchez Portfolio
   Shared across all environments
════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   RESET & BASE
────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ────────────────────────────────────────────────────────────────
   TYPOGRAPHY — Font Loading
────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=Michroma&display=swap');

/* ────────────────────────────────────────────────────────────────
   TYPE SCALE — Consistent sizing across pages
   Serif environment (articles, essays)
────────────────────────────────────────────────────────────────── */
:root {
  /* ── Font Aliases ─────────────────────────────────────────────── */
  --sans:  'Space Grotesk', sans-serif;
  --mono:  'Space Mono', monospace;
  --serif: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;

  /* Display & Headlines */
  --type-h1-size: clamp(24px, 2.4vw, 36px);
  --type-h1-weight: 400;
  --type-h1-line-height: 1.30;

  --type-h2-size: 24px;
  --type-h2-weight: 600;
  --type-h2-line-height: 1.35;

  --type-article-list-h2-size: clamp(18px, 1.8vw, 24px);
  --type-article-list-h2-weight: 600;
  --type-article-list-h2-line-height: 1.30;

  /* Body Text */
  --type-body-lg-size: 20px;
  --type-body-lg-weight: 400;
  --type-body-lg-line-height: 1.75;

  --type-body-md-size: 18px;
  --type-body-md-weight: 400;
  --type-body-md-line-height: 1.75;

  --type-body-sm-size: 14px;
  --type-body-sm-weight: 400;
  --type-body-sm-line-height: 1.80;

  /* Metadata & Labels */
  --type-meta-size: 11px;
  --type-meta-weight: 400;
  --type-meta-line-height: 1;
  --type-meta-letter-spacing: 0.20em;

  --type-label-size: 8px;
  --type-label-weight: 400;
  --type-label-line-height: 1;
  --type-label-letter-spacing: 0.40em;

  --type-list-index-size: 9px;
  --type-list-index-weight: 400;
  --type-list-index-letter-spacing: 0.22em;

  --type-list-heading-size: 14px;
  --type-list-heading-weight: 500;
  --type-list-heading-line-height: 1;
  --type-list-heading-letter-spacing: 0.1em;

  /* Cockpit/Pod environment (case studies) */
  --cockpit-display-size: clamp(36px, 5vw, 64px);
  --cockpit-display-weight: 600;
  --cockpit-display-letter-spacing: 0.08em;
  --cockpit-display-line-height: 1.0;

  --cockpit-subtitle-size: 15px;
  --cockpit-subtitle-weight: 600;
  --cockpit-subtitle-letter-spacing: 0.12em;

  --cockpit-h2-size: clamp(20px, 2vw, 26px);
  --cockpit-h2-weight: 600;
  --cockpit-h2-letter-spacing: 0.09em;
  --cockpit-h2-line-height: 1.0;

  --cockpit-body-size: clamp(15px, 1.3vw, 17px);
  --cockpit-body-weight: 400;
  --cockpit-body-line-height: 1.68;
  --cockpit-body-letter-spacing: 0.01em;

  --cockpit-list-size: clamp(15px, 1.3vw, 17px);
  --cockpit-list-weight: 400;
  --cockpit-list-line-height: 1.55;
  --cockpit-list-letter-spacing: 0.01em;

  --cockpit-stat-size: 38px;
  --cockpit-stat-weight: 600;
  --cockpit-stat-letter-spacing: 0.03em;
  --cockpit-stat-line-height: 1.0;

  --cockpit-label-size: 8px;
  --cockpit-label-weight: 400;
  --cockpit-label-letter-spacing: 0.38em;

  --cockpit-tag-size: 9px;
  --cockpit-tag-weight: 600;
  --cockpit-tag-letter-spacing: 0.45em;

  --cockpit-id-size: 9px;
  --cockpit-id-letter-spacing: 0.2em;

  /* ──────────────────────────────────────────────────────────────
     COLORS — Discovery One / Cockpit Environment
     ────────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --cockpit-bg-primary: #F0EDE8;
  --cockpit-bg-secondary: #E9E5DE;
  --cockpit-bg-overlay: rgba(253, 251, 248, 0.92);

  /* Text */
  --cockpit-text-primary: #141210;
  --cockpit-text-secondary: #2E2A26;
  --cockpit-text-tertiary: #6A5E54;
  --cockpit-text-dim: #8A7E74;
  --cockpit-text-faded: rgba(80, 77, 72, 0.90);

  /* Accents & UI */
  --cockpit-accent-primary: #C41E2A;
  --cockpit-accent-secondary: #C51E2A;
  --cockpit-border: rgba(20, 18, 14, 0.78);
  --cockpit-shadow-light: rgba(0, 0, 0, 0.03);
  --cockpit-shadow-medium: rgba(0, 0, 0, 0.07);
  --cockpit-shadow-heavy: rgba(0, 0, 0, 0.92);

  /* Discovery One Doorway Panel */
  --cockpit-bg-frame: #D8D4CE;           /* doorway structural frame */
  --cockpit-text-label-dim: rgba(60, 40, 30, 0.40);  /* faded metadata label */
  --cockpit-scrollbar: rgba(196, 137, 76, 0.3);       /* warm amber scrollbar */

  /* ──────────────────────────────────────────────────────────────
     COLORS — EVA Pod Environment
     ────────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --pod-bg-primary: #1A0705;
  --pod-bg-secondary: #1e0e0e;
  --pod-bg-overlay: rgba(8, 4, 4, 0.88);

  /* Text */
  --pod-text-primary: rgba(220, 210, 200, 0.70);
  --pod-text-secondary: #A8A4A0;
  --pod-text-tertiary: rgba(200, 190, 180, 0.45);
  --pod-text-dim: rgba(200, 190, 180, 0.28);
  --pod-text-faded: rgba(200, 160, 160, 0.30);

  /* Accents & UI */
  --pod-accent-primary: rgba(80, 180, 160, 0.5);
  --pod-accent-secondary: rgba(80, 180, 160, 0.45);
  --pod-border: rgba(255, 255, 255, 0.04);
  --pod-shadow-light: rgba(255, 255, 255, 0.025);
  --pod-shadow-medium: rgba(255, 255, 255, 0.06);
  --pod-shadow-heavy: rgba(0, 0, 0, 0.92);

  /* ──────────────────────────────────────────────────────────────
     COLORS — Articles Environment (Dawn of Man)
     ────────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --articles-sky-crown: #040101;
  --articles-sky-horizon: #DA8430;
  --articles-ground: #120804;

  /* Text */
  --articles-text-primary: rgba(210, 228, 225, 0.92);
  --articles-text-secondary: rgba(195, 215, 210, 0.65);
  --articles-text-tertiary: rgba(185, 208, 203, 0.40);

  /* Accents & Highlights */
  --articles-amber: #C4894C;
  --articles-amber-warm: rgba(196, 137, 76, 0.75);
  --articles-amber-dim: rgba(196, 137, 76, 0.35);
  --articles-amber-ghost: rgba(196, 137, 76, 0.16);

  /* ──────────────────────────────────────────────────────────────
     COLORS — HAL Memory Room Environment
     ────────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --memory-bg:           #050000;
  --memory-bg-panel:     #160002;
  --memory-bg-console:   rgba(5, 1, 1, 0.8);
  --memory-band-a:       #860000;
  --memory-band-b:       #8D0303;
  --memory-screen:       #080808;

  /* Text */
  --memory-text:         #FF7777;
  --memory-text-secondary: #CCCCCC;
  --memory-text-dim:     rgba(255, 255, 255, 0.5);
  --memory-text-label:   #D32F2F;
  --memory-stat:         #FF5555;

  /* Borders & UI */
  --memory-border-color: #4A0C0C;
  --memory-panel-border: 1px solid #4A0C0C;
  --memory-cell-gap:     3px;
  --memory-status-idle:  #3A0C0C;
  --memory-status-lit:   #FF3333;

  /* ──────────────────────────────────────────────────────────────
     COLORS — White Room Environment (Process / Beyond the Infinite)
     ────────────────────────────────────────────────────────────── */

  /* Room surfaces */
  --wr-bg-primary:       #8a9aa0;   /* Wall slate — main room background       */
  --wr-cornice:          #748690;   /* Ceiling trim — slightly darker than wall */
  --wr-floor-grout:      #4a5860;   /* Grid gap / grout — shadow tone          */
  --wr-floor-tile:       #dce8ec;   /* Tile surface — cool light               */

  /* Monolith surface */
  --wr-monolith:         #080808;   /* The Monolith — lifted black             */

  /* Text on monolith */
  --wr-text-primary:     rgba(215, 232, 238, 0.92);   /* Title, H2 — bright teal-white      */
  --wr-text-secondary:   rgba(175, 210, 222, 0.46);   /* Mid teal — atmospheric              */
  --wr-text-dim:         rgba(175, 210, 222, 0.40);   /* Labels — ghost teal                 */
  --wr-text-body:        rgba(210, 212, 208, 0.65);   /* Body, lede — warm-neutral off-white  */
  --wr-text-list:        rgba(195, 200, 196, 0.58);   /* List items — slightly dimmer        */
  --wr-text-strong:      rgba(215, 220, 215, 0.80);   /* Bold emphasis in lists              */
  --wr-text-caption:     rgba(255, 255, 255, 0.30);   /* Captions, placeholder text          */
  --wr-border:           rgba(175, 210, 222, 0.16);   /* Rule lines — near-invisible         */

  /* Atmosphere */
  --wr-glow-floor:       rgba(220, 238, 248, 0.72);   /* Upward floor light         */
  --wr-glow-wall:        rgba(200, 224, 236, 0.22);   /* Wall base glow             */
}

/* ════════════════════════════════════════════════════════════════
   ENVIRONMENT CONTAINERS
   Each class aliases environment-specific tokens to --env-* names.
   Component classes consume only --env-* tokens — never environment-
   specific ones directly. Switching an element's environment class
   is the only change needed to shift its entire voice.

   SELECTOR NOTE: .env-cockpit and .env-pod use comma-joined selectors
   with .case-env-discovery / .case-env-pod so the JS-driven class
   toggle on case study pages resolves --env-* tokens automatically.
   No HTML or JS changes required.
════════════════════════════════════════════════════════════════ */

.env-cockpit,
.case-env-discovery {
  /* Typography */
  --env-font-display:      var(--sans);
  --env-font-body:         var(--sans);
  --env-font-mono:         var(--mono);
  --env-display-size:      var(--cockpit-display-size);
  --env-display-weight:    var(--cockpit-display-weight);
  --env-display-tracking:  var(--cockpit-display-letter-spacing);
  --env-display-leading:   var(--cockpit-display-line-height);
  --env-subtitle-size:     var(--cockpit-subtitle-size);
  --env-subtitle-weight:   var(--cockpit-subtitle-weight);
  --env-subtitle-tracking: var(--cockpit-subtitle-letter-spacing);
  --env-h2-size:           var(--cockpit-h2-size);
  --env-h2-weight:         var(--cockpit-h2-weight);
  --env-h2-tracking:       var(--cockpit-h2-letter-spacing);
  --env-h2-leading:        var(--cockpit-h2-line-height);
  --env-body-size:         var(--cockpit-body-size);
  --env-body-weight:       var(--cockpit-body-weight);
  --env-body-leading:      var(--cockpit-body-line-height);
  --env-body-tracking:     var(--cockpit-body-letter-spacing);
  --env-list-size:         var(--cockpit-list-size);
  --env-list-leading:      var(--cockpit-list-line-height);
  --env-stat-size:         var(--cockpit-stat-size);
  --env-stat-weight:       var(--cockpit-stat-weight);
  --env-label-size:        var(--cockpit-label-size);
  --env-label-tracking:    var(--cockpit-label-letter-spacing);
  --env-tag-size:          var(--cockpit-tag-size);
  --env-tag-weight:        var(--cockpit-tag-weight);
  --env-tag-tracking:      var(--cockpit-tag-letter-spacing);
  --env-id-size:           var(--cockpit-id-size);
  --env-id-tracking:       var(--cockpit-id-letter-spacing);

  /* Color */
  --env-bg:                var(--cockpit-bg-primary);
  --env-bg-secondary:      var(--cockpit-bg-secondary);
  --env-text:              var(--cockpit-text-primary);
  --env-text-secondary:    var(--cockpit-text-secondary);
  --env-text-dim:          var(--cockpit-text-tertiary);
  --env-accent:            var(--cockpit-accent-primary);
  --env-border:            var(--cockpit-border);
}

.env-pod,
.case-env-pod {
  /* Typography — pod reuses cockpit type scale */
  --env-font-display:      var(--sans);
  --env-font-body:         var(--sans);
  --env-font-mono:         var(--mono);
  --env-display-size:      var(--cockpit-display-size);
  --env-display-weight:    var(--cockpit-display-weight);
  --env-display-tracking:  var(--cockpit-display-letter-spacing);
  --env-display-leading:   var(--cockpit-display-line-height);
  --env-subtitle-size:     var(--cockpit-subtitle-size);
  --env-subtitle-weight:   var(--cockpit-subtitle-weight);
  --env-subtitle-tracking: var(--cockpit-subtitle-letter-spacing);
  --env-h2-size:           var(--cockpit-h2-size);
  --env-h2-weight:         var(--cockpit-h2-weight);
  --env-h2-tracking:       var(--cockpit-h2-letter-spacing);
  --env-h2-leading:        var(--cockpit-h2-line-height);
  --env-body-size:         var(--cockpit-body-size);
  --env-body-weight:       var(--cockpit-body-weight);
  --env-body-leading:      var(--cockpit-body-line-height);
  --env-body-tracking:     var(--cockpit-body-letter-spacing);
  --env-list-size:         var(--cockpit-list-size);
  --env-list-leading:      var(--cockpit-list-line-height);
  --env-stat-size:         var(--cockpit-stat-size);
  --env-stat-weight:       var(--cockpit-stat-weight);
  --env-label-size:        var(--cockpit-label-size);
  --env-label-tracking:    var(--cockpit-label-letter-spacing);
  --env-tag-size:          var(--cockpit-tag-size);
  --env-tag-weight:        var(--cockpit-tag-weight);
  --env-tag-tracking:      var(--cockpit-tag-letter-spacing);
  --env-id-size:           var(--cockpit-id-size);
  --env-id-tracking:       var(--cockpit-id-letter-spacing);

  /* Color — pod-specific */
  --env-bg:                var(--pod-bg-primary);
  --env-bg-secondary:      var(--pod-bg-secondary);
  --env-text:              var(--pod-text-primary);
  --env-text-secondary:    var(--pod-text-secondary);
  --env-text-dim:          var(--pod-text-tertiary);
  --env-accent:            var(--pod-accent-primary);
  --env-border:            var(--pod-border);
}

.env-dawn {
  /* Typography — serif, warm editorial scale */
  --env-font-display:      var(--serif);
  --env-font-body:         var(--serif);
  --env-font-mono:         var(--mono);
  --env-display-size:      clamp(32px, 3.2vw, 48px);
  --env-display-weight:    400;
  --env-display-tracking:  0.20em;
  --env-display-leading:   1.25;
  --env-h2-size:           var(--type-article-list-h2-size);
  --env-h2-weight:         var(--type-article-list-h2-weight);
  --env-h2-tracking:       0.04em;
  --env-h2-leading:        var(--type-article-list-h2-line-height);
  --env-body-size:         var(--type-body-md-size);
  --env-body-weight:       var(--type-body-md-weight);
  --env-body-leading:      var(--type-body-md-line-height);
  --env-body-tracking:     0.01em;
  --env-label-size:        var(--type-label-size);
  --env-label-tracking:    var(--type-label-letter-spacing);
  --env-id-size:           var(--type-list-index-size);
  --env-id-tracking:       var(--type-list-index-letter-spacing);

  /* Color */
  --env-bg:                var(--articles-ground);
  --env-text:              var(--articles-text-primary);
  --env-text-secondary:    var(--articles-text-secondary);
  --env-text-dim:          var(--articles-text-tertiary);
  --env-accent:            var(--articles-amber);
}

.env-memory {
  /* Typography — monospaced, small-scale data aesthetic */
  --env-font-display:      var(--mono);
  --env-font-body:         var(--sans);
  --env-font-mono:         var(--mono);
  --env-display-size:      14px;
  --env-display-weight:    700;
  --env-display-tracking:  0.05em;
  --env-display-leading:   1.3;
  --env-h2-size:           11px;
  --env-h2-weight:         700;
  --env-h2-tracking:       0.05em;
  --env-h2-leading:        1.2;
  --env-body-size:         8px;
  --env-body-weight:       400;
  --env-body-leading:      1.8;
  --env-body-tracking:     0.02em;
  --env-stat-size:         38px;
  --env-stat-weight:       600;
  --env-label-size:        9px;
  --env-label-tracking:    0.12em;
  --env-id-size:           8px;
  --env-id-tracking:       0.15em;

  /* Color */
  --env-bg:                var(--memory-bg);
  --env-bg-secondary:      var(--memory-bg-panel);
  --env-text:              var(--memory-text);
  --env-text-secondary:    var(--memory-text-secondary);
  --env-text-dim:          var(--memory-text-dim);
  --env-accent:            var(--memory-stat);
  --env-border:            var(--memory-border-color);
}

.env-white-room {
  /* ── Fonts ── */
  --env-font-display:      'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --env-font-body:         var(--sans);
  --env-font-mono:         'IBM Plex Mono', 'Courier New', monospace;

  /* ── Title (H1 monument) ── */
  --wr-title-size:         52px;
  --wr-title-weight:       400;
  --wr-title-tracking:     0.08em;
  --wr-title-leading:      1.0;

  /* ── Display (subtitle) ── */
  --env-display-size:      28px;
  --env-display-weight:    400;
  --env-display-tracking:  0em;
  --env-display-leading:   1.3;

  /* ── H2 (phase headings) ── */
  --env-h2-size:           22px;
  --env-h2-weight:         400;
  --env-h2-tracking:       0.02em;
  --env-h2-leading:        1.2;

  /* ── Body ── */
  --env-body-size:         16px;
  --env-body-weight:       400;
  --env-body-leading:      1.9;
  --env-body-tracking:     0em;

  /* ── Lede paragraph ── */
  --env-lede-size:         24px;
  --env-lede-weight:       500;
  --env-lede-leading:      1.2;

  /* ── List items ── */
  --env-list-leading:      1.8;

  /* ── Labels ── */
  --env-label-size:        9px;
  --env-label-tracking:    0.35em;

  /* ── Captions / IDs ── */
  --env-id-size:           11px;
  --env-id-tracking:       0.30em;
  --env-caption-leading:   1.7;

  /* ── Color ── */
  --env-bg:                var(--wr-bg-primary);
  --env-text:              var(--wr-text-primary);
  --env-text-primary:      var(--wr-text-primary);
  --env-text-secondary:    var(--wr-text-body);
  --env-text-dim:          var(--wr-text-dim);
  --env-accent:            var(--wr-cornice);
  --env-border:            var(--wr-border);
}

/* ════════════════════════════════════════════════════════════════
   SHARED COMPONENTS — Environment-agnostic
   Consume --env-* tokens set by an environment container.
   Work correctly inside any .env-* class.
════════════════════════════════════════════════════════════════ */

/* Hero / page title */
.cs-display {
  font-family:    var(--env-font-display);
  font-size:      var(--env-display-size);
  font-weight:    var(--env-display-weight);
  letter-spacing: var(--env-display-tracking);
  line-height:    var(--env-display-leading);
  text-transform: uppercase;
  color:          var(--env-text);
}

/* Context line below hero (role, discipline, environment) */
.cs-subtitle {
  font-family:    var(--env-font-display);
  font-size:      var(--env-subtitle-size);
  font-weight:    var(--env-subtitle-weight);
  letter-spacing: var(--env-subtitle-tracking);
  text-transform: uppercase;
  color:          var(--env-text-dim);
}

/* Section heading */
.cs-h2 {
  font-family:    var(--env-font-display);
  font-size:      var(--env-h2-size);
  font-weight:    var(--env-h2-weight);
  letter-spacing: var(--env-h2-tracking);
  line-height:    var(--env-h2-leading);
  text-transform: uppercase;
  color:          var(--env-text);
}

/* Body prose */
.cs-body {
  font-family:    var(--env-font-body);
  font-size:      var(--env-body-size);
  font-weight:    var(--env-body-weight);
  line-height:    var(--env-body-leading);
  letter-spacing: var(--env-body-tracking);
  color:          var(--env-text-secondary);
}

/* Body list items */
.cs-list {
  font-family:    var(--env-font-body);
  font-size:      var(--env-list-size);
  line-height:    var(--env-list-leading);
  letter-spacing: var(--env-body-tracking);
  color:          var(--env-text-secondary);
}

/* Stat number callout */
.cs-stat {
  font-family:    var(--env-font-display);
  font-size:      var(--env-stat-size);
  font-weight:    var(--env-stat-weight);
  letter-spacing: 0.03em;
  line-height:    1.0;
  color:          var(--env-text);
}

/* Stat label (below a stat number) */
.cs-label {
  font-family:    var(--env-font-mono);
  font-size:      var(--env-label-size);
  letter-spacing: var(--env-label-tracking);
  text-transform: uppercase;
  color:          var(--env-text-dim);
}

/* Tag / case identifier */
.cs-tag {
  font-family:    var(--env-font-mono);
  font-size:      var(--env-tag-size);
  font-weight:    var(--env-tag-weight);
  letter-spacing: var(--env-tag-tracking);
  text-transform: uppercase;
  color:          var(--env-text-dim);
}

/* System ID / reference code */
.cs-id {
  font-family:    var(--env-font-mono);
  font-size:      var(--env-id-size);
  letter-spacing: var(--env-id-tracking);
  color:          var(--env-text-dim);
}

/* Reflections — vertical stack */
.reflections-grid {
  display: flex; flex-direction: column; gap: 40px; max-width: 800px; margin: 0 auto;
}
.reflection-label {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.38em;
  text-transform: uppercase; margin-bottom: 12px;
}
#cs-page.case-env-discovery .reflection-label { color: var(--cockpit-text-dim); }
#cs-page.case-env-pod       .reflection-label { color: rgba(200,200,200,0.18); }
.reflection-text {
  font-family: var(--sans); font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 400; line-height: 1.65; letter-spacing: 0.01em;
}
#cs-page.case-env-discovery .reflection-text { color: var(--cockpit-text-secondary); }
#cs-page.case-env-pod       .reflection-text { color: var(--pod-text-secondary); }

/* Optional external link — appears in hero below subtitle
   Add to both Discovery and Pod hero blocks on pages that need it */
.hero-ext-link {
  display:         inline-flex;
  align-items:     center;
  gap:             12px;
  margin-top:      24px;
  font-family:     var(--env-font-mono);
  font-size:       10px;
  font-weight:     500;
  letter-spacing:  0.35em;
  text-transform:  uppercase;
  text-decoration: none;
  color:           var(--env-accent);
  border:          2px solid var(--env-accent);
  padding:         10px 18px 10px 16px;
  transition:
    color           var(--env-t, 200ms) var(--env-ease, ease),
    border-color    var(--env-t, 200ms) var(--env-ease, ease),
    background-color var(--env-t, 200ms) var(--env-ease, ease);
  cursor:          pointer;
}
.hero-ext-link:hover {
  background-color: var(--env-accent);
  color:            var(--env-bg-primary);
  border-color:     var(--env-accent);
}
.hero-ext-link-arrow {
  font-size:  13px;
  line-height: 1;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────
   DISCOVERY TELEMETRY — Self-contained block style
   Apply .tel-screen to any component to skin it with the
   high-density monospaced typewriter/CRT data look.
   Does not affect Discovery One or Primary environments.
────────────────────────────────────────────────────────────────── */

/* ── Font references ── */
/* UI Layer  → Michroma      (wide geometric sans — display, h2, label, tag, subtitle) */
/* Data Layer → IBM Plex Mono (monospace typewriter — body, list, stat, id)            */

.tel-screen {

  /* ── Color Tokens (Analog/Filmic Palette) ────────────────────── */
  --tel-bg:            #080808;   /* Lifted Black — screen glass             */
  --tel-white:         #F0EDE8;   /* Projector White — warm film stock       */
  --tel-red:           #C41E2A;   /* Aviation Red — NAV subsystem            */
  --tel-blue:          #4A5570;   /* Command Blue — COM subsystem            */
  --tel-green:         #00FF41;   /* Phosphor Green — GDE & active values    */

  /* ── UI Layer Tokens (Michroma) ───────────────────────────────── */
  --tel-display-size:           32px;
  --tel-display-weight:         400;
  --tel-display-letter-spacing: 0.14em;
  --tel-display-line-height:    1.1;
  --tel-display-font:           'Michroma', sans-serif;

  --tel-subtitle-size:           10px;
  --tel-subtitle-weight:         400;
  --tel-subtitle-letter-spacing: 0.22em;
  --tel-subtitle-line-height:    1.1;
  --tel-subtitle-font:           'Michroma', sans-serif;

  --tel-h2-size:           18px;
  --tel-h2-weight:         400;
  --tel-h2-letter-spacing: 0.12em;
  --tel-h2-line-height:    1.1;
  --tel-h2-font:           'Michroma', sans-serif;

  --tel-label-size:           8px;
  --tel-label-weight:         400;
  --tel-label-letter-spacing: 0.38em;
  --tel-label-line-height:    1.1;
  --tel-label-font:           'Michroma', sans-serif;

  --tel-tag-size:           9px;
  --tel-tag-weight:         400;
  --tel-tag-letter-spacing: 0.40em;
  --tel-tag-line-height:    1.1;
  --tel-tag-font:           'Michroma', sans-serif;

  /* ── Data Layer Tokens (IBM Plex Mono) ────────────────────────── */
  --tel-body-size:           13px;
  --tel-body-weight:         400;
  --tel-body-letter-spacing: 0.04em;
  --tel-body-line-height:    1.1;
  --tel-body-font:           'IBM Plex Mono', monospace;

  --tel-list-size:           13px;
  --tel-list-weight:         400;
  --tel-list-letter-spacing: 0.04em;
  --tel-list-line-height:    1.1;
  --tel-list-font:           'IBM Plex Mono', monospace;

  --tel-stat-size:           28px;
  --tel-stat-weight:         700;
  --tel-stat-letter-spacing: 0.06em;
  --tel-stat-line-height:    1.1;
  --tel-stat-font:           'IBM Plex Mono', monospace;

  --tel-id-size:           9px;
  --tel-id-letter-spacing: 0.22em;
  --tel-id-line-height:    1.1;
  --tel-id-font:           'IBM Plex Mono', monospace;

  /* ── Base Block Styles ────────────────────────────────────────── */
  background:    var(--tel-bg);
  color:         var(--tel-white);
  font-family:   'IBM Plex Mono', monospace;   /* Data Layer as default */
  font-size:     var(--tel-body-size);
  line-height:   var(--tel-body-line-height);
  text-transform: uppercase;
  border-radius: 0;

  /* Light-bleed: 16mm rear-projection simulation */
  text-shadow: 0 0 1px rgba(240, 237, 232, 0.3);
}

/* ── Telemetry Grid — Typeball grid layout ────────────────────── */
.tel-screen .tel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2ch;
  row-gap: 6px;
  align-items: baseline;
}

/* ── Inverted Status Blocks (NAV / COM / GDE) ─────────────────── */
.tel-screen .telemetry-block {
  display:         inline-block;
  font-family:     var(--tel-label-font);
  font-size:       var(--tel-label-size);
  font-weight:     var(--tel-label-weight);
  letter-spacing:  var(--tel-label-letter-spacing);
  line-height:     1.1;
  text-transform:  uppercase;
  text-shadow:     none;   /* inverted chips: no bleed on solid bg */
  color:           var(--tel-white);
  padding:         2px 5px;
  border-radius:   0;
}
.tel-screen .telemetry-block.nav { background: var(--tel-red); }
.tel-screen .telemetry-block.com { background: var(--tel-blue); color: var(--tel-white); }
.tel-screen .telemetry-block.gde { background: var(--tel-green); color: var(--tel-bg); }

/* ── Telemetry Typography Classes ─────────────────────────────── */
.tel-screen .tel-display {
  font-family:    var(--tel-display-font);
  font-size:      var(--tel-display-size);
  font-weight:    var(--tel-display-weight);
  letter-spacing: var(--tel-display-letter-spacing);
  line-height:    var(--tel-display-line-height);
}
.tel-screen .tel-subtitle {
  font-family:    var(--tel-subtitle-font);
  font-size:      var(--tel-subtitle-size);
  font-weight:    var(--tel-subtitle-weight);
  letter-spacing: var(--tel-subtitle-letter-spacing);
  line-height:    var(--tel-subtitle-line-height);
}
.tel-screen .tel-h2 {
  font-family:    var(--tel-h2-font);
  font-size:      var(--tel-h2-size);
  font-weight:    var(--tel-h2-weight);
  letter-spacing: var(--tel-h2-letter-spacing);
  line-height:    var(--tel-h2-line-height);
}
.tel-screen .tel-stat {
  font-family:    var(--tel-stat-font);
  font-size:      var(--tel-stat-size);
  font-weight:    var(--tel-stat-weight);
  letter-spacing: var(--tel-stat-letter-spacing);
  line-height:    var(--tel-stat-line-height);
  color:          var(--tel-green);
}
.tel-screen .tel-label {
  font-family:    var(--tel-label-font);
  font-size:      var(--tel-label-size);
  font-weight:    var(--tel-label-weight);
  letter-spacing: var(--tel-label-letter-spacing);
  line-height:    var(--tel-label-line-height);
  color:          var(--tel-green);
}
.tel-screen .tel-id {
  font-family:    var(--tel-id-font);
  font-size:      var(--tel-id-size);
  letter-spacing: var(--tel-id-letter-spacing);
  line-height:    var(--tel-id-line-height);
  color:          rgba(240, 237, 232, 0.40);
}
.tel-screen .tel-rule {
  border: none;
  border-top: 1px solid rgba(240, 237, 232, 0.12);
  margin: 10px 0;
}

/* ────────────────────────────────────────────────────────────────
   GLOBAL NAVIGATION — Universal (dark)
   Used across all page environments
────────────────────────────────────────────────────────────────── */
.site-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background: rgba(6, 7, 12, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nav-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(221, 227, 240, 0.92);
  text-decoration: none;
  padding: 0 48px;
}

.nav-center {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 48px;
}

.nav-center a,
.nav-center span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(154, 170, 191, 0.55);
  text-decoration: none;
  cursor: default;
  transition: color 0.2s ease;
}

.nav-center a {
  cursor: pointer;
}

.nav-center a:hover {
  color: rgba(200, 210, 230, 0.82);
}

.nav-center .nav-active {
  color: rgba(200, 210, 230, 0.82);
  cursor: default;
}

.nav-caret {
  font-size: 8px;
  line-height: 1;
  margin-left: 4px;
  opacity: 0.55;
  vertical-align: middle;
  display: inline-block;
  transition: transform 0.2s ease;
}

/* ────────────────────────────────────────────────────────────────
   NAV — CASE STUDIES DROPDOWN
────────────────────────────────────────────────────────────────── */

/* Wrapper */
.nav-cs-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
}

/* Trigger */
.nav-cs-trigger {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(154, 170, 191, 0.55);
  text-decoration: none;
  cursor: default;
  user-select: none;
  transition: color 0.2s ease;
}
a.nav-cs-trigger { cursor: pointer; }
.nav-cs-wrap:hover .nav-cs-trigger,
.nav-cs-wrap.is-open .nav-cs-trigger { color: rgba(200, 210, 230, 0.82); }
.nav-cs-trigger.nav-active { color: rgba(200, 210, 230, 0.82); }

/* Caret rotates when open */
.nav-cs-wrap.is-open .nav-caret { transform: rotate(180deg); }

/* ── Panel — full-width bar, lives outside <nav> in the DOM ── */
.nav-cs-panel {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 99;
  background: #06070C;
  border-top: 2px solid rgba(196, 30, 42, 0.60);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.20s ease, transform 0.20s ease;
}
.nav-cs-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Inner grid — 4 columns, 2 rows for 8 entries */
.nav-cs-panel-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 48px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px 8px;
}

/* Close button — hidden on desktop */
.nav-cs-close { display: none; }

/* Each item */
.nav-cs-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.nav-cs-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: rgba(196, 30, 42, 0.40);
}
.nav-cs-item-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-cs-code {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(154, 170, 191, 0.28);
  flex-shrink: 0;
  transition: color 0.14s ease;
}
.nav-cs-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(154, 170, 191, 0.58);
  transition: color 0.14s ease;
}
.nav-cs-sub {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(154, 170, 191, 0.20);
  padding-left: 33px; /* aligns under title past code + gap */
  transition: color 0.14s ease;
}
.nav-cs-item:hover .nav-cs-code  { color: rgba(196, 30, 42, 0.65); }
.nav-cs-item:hover .nav-cs-title { color: rgba(200, 210, 230, 0.92); }
.nav-cs-item:hover .nav-cs-sub   { color: rgba(154, 170, 191, 0.40); }

/* Current page item */
.nav-cs-item.is-current { border-left-color: rgba(196, 30, 42, 0.70); }
.nav-cs-item.is-current .nav-cs-code  { color: rgba(196, 30, 42, 0.60); }
.nav-cs-item.is-current .nav-cs-title { color: rgba(200, 210, 230, 0.88); }
.nav-cs-item.is-current .nav-cs-sub   { color: rgba(154, 170, 191, 0.35); }

/* ── Mobile: full-screen takeover ── */
@media (max-width: 768px) {
  .nav-cs-trigger { cursor: pointer; }

  .nav-cs-panel {
    top: 0;
    bottom: 0;
    z-index: 150;
    border-top: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: none;
    transition: opacity 0.22s ease;
  }
  .nav-cs-panel.is-open { transform: none; }

  .nav-cs-panel-inner {
    grid-template-columns: 1fr;
    padding: 40px;
    gap: 0;
  }

  .nav-cs-close {
    display: block;
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.30);
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 8px 14px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .nav-cs-close:hover {
    color: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.30);
  }

  .nav-cs-item {
    padding: 18px 0;
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 6px;
  }
  .nav-cs-item:last-child { border-bottom: none; }
  .nav-cs-item:hover { background: transparent; }
  .nav-cs-item.is-current { border-left: none; }

  .nav-cs-title { font-size: 20px; }
  .nav-cs-sub   { font-size: 10px; padding-left: 0; }
}

/* ────────────────────────────────────────────────────────────────
   SCREENSHOT CAROUSEL
────────────────────────────────────────────────────────────────── */
.screenshot-carousel { max-width: 1120px; width: 100%; margin: 0 auto; overflow: hidden; }
.carousel-screen { position: relative; width: 100%; aspect-ratio: auto; height: auto; display: grid; overflow: hidden; }
.carousel-slide {
  position: relative; inset: auto; grid-column: 1; grid-row: 1;
  display: flex; align-items: flex-start; justify-content: center;
  opacity: 0; transition: opacity 0.45s ease;
  pointer-events: none;
}
.carousel-slide.active { opacity: 1; pointer-events: auto; }
.carousel-slide .media-img { width: 100%; height: auto; object-fit: contain; object-position: top center; cursor: zoom-in; }
.carousel-slide-label {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase;
}
.carousel-controls {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 20px;
}
.carousel-counter { font-family: var(--mono); font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase; }

#cs-page.case-env-discovery .carousel-screen      { background: #0C0A08; }
#cs-page.case-env-discovery .carousel-controls    { background: #161210; border-top: 1px solid rgba(255,255,255,0.04); }
#cs-page.case-env-discovery .carousel-counter     { color: rgba(180,160,130,0.45); }
#cs-page.case-env-discovery .carousel-slide-label { color: rgba(100,90,80,0.72); }
#cs-page.case-env-pod .carousel-screen            { background: #04060F; }
#cs-page.case-env-pod .carousel-controls          { background: #0C0306; border-top: 1px solid rgba(200,80,80,0.08); }
#cs-page.case-env-pod .carousel-counter           { color: rgba(200,210,240,0.65); }
#cs-page.case-env-pod .carousel-slide-label       { color: rgba(100,90,80,0.72); }

/* Push-button controls */
.pb {
  position: relative;
  width: 128px; height: 42px;
  border-radius: 2px;
  cursor: pointer; user-select: none;
  overflow: hidden;
  background: transparent;
  border: none; box-shadow: none;
  flex-shrink: 0;
}
.pb-light {
  position: absolute;
  top: 10%; left: 10%; right: 10%; bottom: 10%;
  background: none;
  filter: blur(11px);
  transition: background 0.15s ease;
}
.pb.is-lit .pb-light {
  background:
    radial-gradient(ellipse 22% 88% at 13% 50%, rgba(242,195,158,1.00) 0%, rgba(235,212,196,0.70) 35%, transparent 68%),
    radial-gradient(ellipse 22% 88% at 50% 50%, rgba(242,195,158,1.00) 0%, rgba(233,210,194,0.65) 35%, transparent 68%),
    radial-gradient(ellipse 22% 88% at 87% 50%, rgba(242,195,158,1.00) 0%, rgba(235,212,196,0.68) 35%, transparent 68%);
}
.pb:hover:not(.is-lit) .pb-light {
  background:
    radial-gradient(ellipse 22% 88% at 13% 50%, rgba(255,255,252,0.30) 0%, transparent 68%),
    radial-gradient(ellipse 22% 88% at 50% 50%, rgba(255,255,252,0.26) 0%, transparent 68%),
    radial-gradient(ellipse 22% 88% at 87% 50%, rgba(255,255,252,0.28) 0%, transparent 68%);
}
.pb-face {
  position: absolute; inset: 0;
  background: rgba(58, 56, 52, 0.90);
  box-shadow: inset 0 0 12px 4px rgba(0,0,0,0.38);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.pb.is-lit .pb-face {
  background: rgba(162, 158, 150, 0.70);
  box-shadow: inset 0 0 14px 5px rgba(0,0,0,0.32);
}
.pb:hover:not(.is-lit) .pb-face { background: rgba(80, 77, 72, 0.90); }
.pb.is-lit:hover .pb-face        { background: rgba(172, 168, 160, 0.70); }
.pb.is-pressed .pb-face {
  box-shadow: inset 0 0 20px 8px rgba(0,0,0,0.58) !important;
}
.pb-inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pb-label {
  font-family: var(--sans);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  color: rgba(255,255,255,0.22);
  transition: color 0.15s ease;
}
.pb.is-lit .pb-label             { color: rgba(20,18,14,0.78); }
.pb:hover:not(.is-lit) .pb-label { color: rgba(255,255,255,0.32); }
.pb-stem {
  position: absolute; inset: 3px;
  border: 6px solid rgba(0,0,0,0.65); background: transparent;
  filter: blur(2px); pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
────────────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .nav-center {
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .nav-logo,
  .nav-center {
    padding: 0 24px;
  }
  .nav-center {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .nav-logo,
  .nav-center {
    padding: 0 24px;
  }
  .nav-center {
    gap: 14px;
  }
  .nav-center a,
  .nav-center span {
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════
   STARFIELD BACKGROUND — Shared across all void environments
   Three-layer depth system. Parallax rates applied per-page via JS.
   Layer 1: largest/brightest stars (foreground)
   Layer 2: medium stars (mid-depth)
   Layer 3: smallest/dimmest stars (background) — opacity: 0.6
════════════════════════════════════════════════════════════════ */
.space-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--void);
  pointer-events: none;
}

.star-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.star-layer-1 {
  background-image:
    /* ── Rare: 2 glow stars with diffuse halo ── */
    radial-gradient(7px 7px at 23% 41%, rgba(255,255,255,0.88) 0%, rgba(220,235,255,0.18) 55%, transparent 100%),
    radial-gradient(6px 6px at 78% 67%, rgba(255,255,255,0.82) 0%, rgba(220,235,255,0.15) 58%, transparent 100%),
    /* ── Medium: slightly larger, stand out from field ── */
    radial-gradient(2.5px 2.5px at 8%  24%, rgba(255,255,255,0.84) 0%, rgba(255,255,255,0.06) 70%, transparent 100%),
    radial-gradient(2px   2px   at 45% 11%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 87% 34%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.06) 70%, transparent 100%),
    radial-gradient(2px   2px   at 61% 83%, rgba(255,255,255,0.76) 0%, transparent 100%),
    radial-gradient(2px   2px   at 15% 72%, rgba(255,255,255,0.78) 0%, transparent 100%),
    radial-gradient(2px   2px   at 94% 18%, rgba(255,255,255,0.74) 0%, transparent 100%),
    /* ── Small: the bulk of the field ── */
    radial-gradient(1.5px 1.5px at 4%   7%, rgba(255,255,255,0.72) 0%, transparent 100%),
    radial-gradient(1px   1px   at 11% 54%, rgba(255,255,255,0.64) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 17% 33%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px   1px   at 26%  5%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px   1px   at 32% 79%, rgba(255,255,255,0.62) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 46%, rgba(255,255,255,0.68) 0%, transparent 100%),
    radial-gradient(1px   1px   at 43% 92%, rgba(255,255,255,0.58) 0%, transparent 100%),
    radial-gradient(1px   1px   at 50% 27%, rgba(255,255,255,0.66) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 61%, rgba(255,255,255,0.72) 0%, transparent 100%),
    radial-gradient(1px   1px   at 60%  2%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px   1px   at 65% 86%, rgba(255,255,255,0.62) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 21%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(1px   1px   at 79% 52%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px   1px   at 83% 77%, rgba(255,255,255,0.58) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 13%, rgba(255,255,255,0.74) 0%, transparent 100%),
    radial-gradient(1px   1px   at 96% 64%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px   1px   at 30% 38%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px   1px   at 52% 16%, rgba(255,255,255,0.58) 0%, transparent 100%),
    radial-gradient(1px   1px   at 76% 94%, rgba(255,255,255,0.56) 0%, transparent 100%),
    radial-gradient(1px   1px   at 19% 88%, rgba(255,255,255,0.52) 0%, transparent 100%),
    radial-gradient(1px   1px   at 98% 43%, rgba(255,255,255,0.58) 0%, transparent 100%),
    radial-gradient(1px   1px   at 6%  61%, rgba(255,255,255,0.54) 0%, transparent 100%);
}

.star-layer-2 {
  background-image:
    /* ── 1 soft glow star ── */
    radial-gradient(4px 4px at 42% 57%, rgba(240,248,255,0.68) 0%, rgba(220,235,255,0.10) 62%, transparent 100%),
    /* ── Small-medium field stars ── */
    radial-gradient(1.5px 1.5px at 7%  44%, rgba(240,248,255,0.52) 0%, transparent 100%),
    radial-gradient(1px   1px   at 13% 17%, rgba(240,248,255,0.46) 0%, transparent 100%),
    radial-gradient(1px   1px   at 18% 73%, rgba(240,248,255,0.42) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 25% 30%, rgba(240,248,255,0.56) 0%, transparent 100%),
    radial-gradient(1px   1px   at 31% 87%, rgba(240,248,255,0.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 36%  9%, rgba(240,248,255,0.48) 0%, transparent 100%),
    radial-gradient(1px   1px   at 44% 68%, rgba(240,248,255,0.38) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 49%  3%, rgba(240,248,255,0.54) 0%, transparent 100%),
    radial-gradient(1px   1px   at 54% 80%, rgba(240,248,255,0.42) 0%, transparent 100%),
    radial-gradient(1px   1px   at 58% 25%, rgba(240,248,255,0.44) 0%, transparent 100%),
    radial-gradient(1px   1px   at 63% 52%, rgba(240,248,255,0.38) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 90%, rgba(240,248,255,0.50) 0%, transparent 100%),
    radial-gradient(1px   1px   at 73% 36%, rgba(240,248,255,0.44) 0%, transparent 100%),
    radial-gradient(1px   1px   at 81% 13%, rgba(240,248,255,0.46) 0%, transparent 100%),
    radial-gradient(1px   1px   at 86% 63%, rgba(240,248,255,0.36) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 40%, rgba(240,248,255,0.52) 0%, transparent 100%),
    radial-gradient(1px   1px   at 97% 78%, rgba(240,248,255,0.38) 0%, transparent 100%),
    radial-gradient(1px   1px   at 21% 50%, rgba(240,248,255,0.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 47% 32%, rgba(240,248,255,0.36) 0%, transparent 100%),
    radial-gradient(1px   1px   at 56% 95%, rgba(240,248,255,0.38) 0%, transparent 100%),
    radial-gradient(1px   1px   at 76%  7%, rgba(240,248,255,0.44) 0%, transparent 100%),
    radial-gradient(1px   1px   at 3%  26%, rgba(240,248,255,0.34) 0%, transparent 100%),
    radial-gradient(1px   1px   at 88% 97%, rgba(240,248,255,0.36) 0%, transparent 100%),
    radial-gradient(1px   1px   at 34% 59%, rgba(240,248,255,0.34) 0%, transparent 100%);
}

.star-layer-3 {
  background-image:
    radial-gradient(1px   1px   at 8%  33%, rgba(220,235,255,0.55) 0%, transparent 100%),
    radial-gradient(1px   1px   at 16% 71%, rgba(220,235,255,0.48) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 24% 18%, rgba(220,235,255,0.52) 0%, transparent 100%),
    radial-gradient(1px   1px   at 33% 55%, rgba(220,235,255,0.44) 0%, transparent 100%),
    radial-gradient(1px   1px   at 41% 88%, rgba(220,235,255,0.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 50% 23%, rgba(220,235,255,0.50) 0%, transparent 100%),
    radial-gradient(1px   1px   at 57% 67%, rgba(220,235,255,0.42) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 66% 10%, rgba(220,235,255,0.54) 0%, transparent 100%),
    radial-gradient(1px   1px   at 74% 80%, rgba(220,235,255,0.38) 0%, transparent 100%),
    radial-gradient(1px   1px   at 82% 44%, rgba(220,235,255,0.46) 0%, transparent 100%),
    radial-gradient(1px   1px   at 91% 92%, rgba(220,235,255,0.36) 0%, transparent 100%),
    radial-gradient(1px   1px   at 27% 40%, rgba(220,235,255,0.42) 0%, transparent 100%),
    radial-gradient(1px   1px   at 46%  5%, rgba(220,235,255,0.44) 0%, transparent 100%),
    radial-gradient(1px   1px   at 62% 48%, rgba(220,235,255,0.36) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 95% 27%, rgba(220,235,255,0.52) 0%, transparent 100%);
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════
   PORTHOLE STAR LAYERS — distinct from the background field.
   Left and right portholes have different star positions so each
   window looks like it's facing a different region of space.
   Parallax rates defined in each page's JS (port-l: 0.35/0.18, port-r: 0.35/0.18)
════════════════════════════════════════════════════════════════ */

/* ── Left porthole ── */
.star-layer-port-l1 {
  background-image:
    /* 1 glow star — upper left cluster */
    radial-gradient(5px 5px at 28% 22%, rgba(255,255,255,0.84) 0%, rgba(220,235,255,0.15) 55%, transparent 100%),
    /* medium */
    radial-gradient(2px   2px   at 72% 38%, rgba(255,255,255,0.78) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 44% 64%, rgba(255,255,255,0.72) 0%, transparent 100%),
    radial-gradient(2px   2px   at 18% 76%, rgba(255,255,255,0.70) 0%, transparent 100%),
    /* small */
    radial-gradient(1px   1px   at 14% 47%, rgba(255,255,255,0.64) 0%, transparent 100%),
    radial-gradient(1px   1px   at 56% 17%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px   1px   at 83% 73%, rgba(255,255,255,0.62) 0%, transparent 100%),
    radial-gradient(1px   1px   at 36% 86%, rgba(255,255,255,0.54) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 63% 51%, rgba(255,255,255,0.68) 0%, transparent 100%),
    radial-gradient(1px   1px   at 89% 29%, rgba(255,255,255,0.58) 0%, transparent 100%),
    radial-gradient(1px   1px   at 22% 58%, rgba(255,255,255,0.52) 0%, transparent 100%),
    radial-gradient(1px   1px   at 77% 11%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px   1px   at 50% 40%, rgba(255,255,255,0.55) 0%, transparent 100%);
}

.star-layer-port-l2 {
  background-image:
    radial-gradient(1px   1px   at 31% 34%, rgba(240,248,255,0.48) 0%, transparent 100%),
    radial-gradient(1px   1px   at 59% 79%, rgba(240,248,255,0.42) 0%, transparent 100%),
    radial-gradient(1px   1px   at 11% 61%, rgba(240,248,255,0.44) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 79% 44%, rgba(240,248,255,0.50) 0%, transparent 100%),
    radial-gradient(1px   1px   at 46% 27%, rgba(240,248,255,0.38) 0%, transparent 100%),
    radial-gradient(1px   1px   at 93% 89%, rgba(240,248,255,0.34) 0%, transparent 100%),
    radial-gradient(1px   1px   at 24% 14%, rgba(240,248,255,0.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 67% 63%, rgba(240,248,255,0.36) 0%, transparent 100%),
    radial-gradient(1px   1px   at 40% 52%, rgba(240,248,255,0.32) 0%, transparent 100%);
}

/* ── Right porthole — different region of space ── */
.star-layer-port-r1 {
  background-image:
    /* 1 glow star — lower right cluster */
    radial-gradient(5px 5px at 68% 72%, rgba(255,255,255,0.82) 0%, rgba(220,235,255,0.14) 55%, transparent 100%),
    /* medium */
    radial-gradient(2px   2px   at 22% 55%, rgba(255,255,255,0.76) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 51% 28%, rgba(255,255,255,0.74) 0%, transparent 100%),
    radial-gradient(2px   2px   at 84% 18%, rgba(255,255,255,0.72) 0%, transparent 100%),
    /* small */
    radial-gradient(1px   1px   at 38% 82%, rgba(255,255,255,0.62) 0%, transparent 100%),
    radial-gradient(1px   1px   at 75% 44%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px   1px   at 16% 31%, rgba(255,255,255,0.58) 0%, transparent 100%),
    radial-gradient(1px   1px   at 60% 91%, rgba(255,255,255,0.54) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 33% 15%, rgba(255,255,255,0.66) 0%, transparent 100%),
    radial-gradient(1px   1px   at 90% 62%, rgba(255,255,255,0.56) 0%, transparent 100%),
    radial-gradient(1px   1px   at 47% 48%, rgba(255,255,255,0.52) 0%, transparent 100%),
    radial-gradient(1px   1px   at 12% 77%, rgba(255,255,255,0.58) 0%, transparent 100%),
    radial-gradient(1px   1px   at 80% 35%, rgba(255,255,255,0.54) 0%, transparent 100%);
}

.star-layer-port-r2 {
  background-image:
    radial-gradient(1px   1px   at 62% 58%, rgba(240,248,255,0.48) 0%, transparent 100%),
    radial-gradient(1px   1px   at 28% 21%, rgba(240,248,255,0.44) 0%, transparent 100%),
    radial-gradient(1px   1px   at 85% 37%, rgba(240,248,255,0.42) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 14% 68%, rgba(240,248,255,0.50) 0%, transparent 100%),
    radial-gradient(1px   1px   at 48% 84%, rgba(240,248,255,0.38) 0%, transparent 100%),
    radial-gradient(1px   1px   at 73% 12%, rgba(240,248,255,0.36) 0%, transparent 100%),
    radial-gradient(1px   1px   at 36% 45%, rgba(240,248,255,0.40) 0%, transparent 100%),
    radial-gradient(1px   1px   at 91% 76%, rgba(240,248,255,0.34) 0%, transparent 100%),
    radial-gradient(1px   1px   at 55% 33%, rgba(240,248,255,0.32) 0%, transparent 100%);
}

/* ════════════════════════════════════════════════════════════════
   GATE ENVIRONMENT — index.html Splash page
════════════════════════════════════════════════════════════════ */
.env-gate {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #0e0f11;
}

/* ── Gate layout ── */
.env-gate .gate {
  display: flex;
  width: 100vw;
  height: 100vh;
}

.env-gate .panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* ── Monolith divider ── */
.env-gate .gate-monolith {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%) rotate(-6deg) translateY(50px) scaleX(-1);
  z-index: 20;
  pointer-events: none;
  height: 104vh;
  width: auto;
  display: block;
}

/* ════════════════════════════
   LEFT — Standard Edition (Visiting Style)
════════════════════════════ */
.env-gate .panel-standard {
  background: #f2f5fb;
}

.env-gate .panel-standard .panel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 40px;
}

.env-gate .panel-standard .panel-name {
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111827;
}

.env-gate .panel-standard .panel-title {
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(10px, 0.9vw, 12px);
  font-weight: 400;
  color: #9ca3af;
  letter-spacing: 0.01em;
}

.env-gate .panel-standard .panel-rule {
  width: 24px;
  height: 1px;
  background: #f25116;
  margin: 6px 0;
}

.env-gate .panel-standard .panel-edition {
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(8px, 0.8vw, 10px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #034aa6;
}

.env-gate .panel-link {
  text-decoration: none;
  cursor: pointer;
}

.env-gate .panel-standard .panel-enter {
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  background: #f25116;
  padding: 12px 24px;
  margin-top: 28px;
  border-radius: 2px;
  transition: background 0.3s ease, color 0.3s ease;
  display: inline-block;
}

.env-gate .panel-standard .panel-link:hover .panel-enter {
  background: #c44312;
}

/* ════════════════════════════
   RIGHT — Cinematic Edition
════════════════════════════ */
.env-gate .panel-cinematic {
  background: #0e0f11;
}

/* Starfield layers */
.env-gate .star-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.env-gate .panel-cinematic .panel-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 40px;
}

.env-gate .panel-cinematic .panel-designation {
  font-family: var(--mono);
  font-size: clamp(7px, 0.6vw, 9px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(175, 200, 218, 0.22);
  margin-bottom: 4px;
}

.env-gate .panel-cinematic .panel-name {
  font-family: var(--mono);
  font-size: clamp(15px, 1.7vw, 22px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(210, 228, 242, 0.92);
}

.env-gate .panel-cinematic .panel-title {
  font-family: var(--mono);
  font-size: clamp(8px, 0.75vw, 11px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(175, 200, 218, 0.42);
}

.env-gate .panel-cinematic .panel-rule {
  width: 36px;
  height: 1px;
  background: rgba(196, 30, 42, 0.65);
  margin: 4px 0;
}

.env-gate .panel-cinematic .panel-edition {
  font-family: var(--mono);
  font-size: clamp(8px, 0.8vw, 10px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #c41e2a;
}

.env-gate .panel-cinematic .panel-enter {
  font-family: var(--mono);
  font-size: clamp(8px, 0.8vw, 10px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(175, 200, 218, 0.55);
  border: 1px solid rgba(175, 200, 218, 0.2);
  padding: 12px 28px;
  margin-top: 20px;
  transition: color 0.3s ease, border-color 0.3s ease;
  display: inline-block;
}

.env-gate .panel-cinematic .panel-link:hover .panel-enter {
  color: rgba(210, 228, 242, 0.88);
  border-color: rgba(175, 200, 218, 0.45);
}

/* ── Mobile: stack vertically ── */
@media (max-width: 600px) {
  .env-gate .gate {
    flex-direction: column;
  }

  .env-gate .gate-monolith {
    height: auto;
    width: 18vw;
  }
}

/* ════════════════════════════════════════════════════════════════
   ARRIVAL TRANSITIONS — page-load overlay effects
════════════════════════════════════════════════════════════════ */

/* Flicker — solid black (Deep Space, HAL Memory Room, Case Studies) */
.arrival-flicker {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 1;
  pointer-events: none;
  z-index: 9999;
}

/* Sunrise — warm ochre gradient (Dawn of Man)
   Sits below the flicker overlay; armed by JS once flicker drops */
.arrival-sunrise {
  position: fixed;
  inset: 0;
  background: linear-gradient(to top, #3A1800 0%, #200E00 45%, #000000 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
}

/* Stargate — color sequence (The White Room) */
.arrival-stargate {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 120% 120% at 50% 50%, #c41818 0%, #800e0c 45%, #0a0508 100%);
  opacity: 1;
  pointer-events: none;
  z-index: 9999;
}