/* ============================================================
 * /css/baked-page.css — Path A (Full-Bake) Shared Stylesheet
 * ----------------------------------------------------------------
 * One stylesheet · used by /work, /systems, /contact.
 * Doctrine: BAKED-PAGE-IMPLEMENTATION-DOCTRINE.md
 *
 * THREE LAYERS:
 *   1) VISUAL    — the baked master WebP is the only visible UI
 *   2) INTERACTION — invisible <a> hotspots over baked CTAs/links
 *   3) SEMANTIC  — sr-only HTML mirror for SEO + a11y
 *
 * INVIOLATE RULES:
 *   - Hotspots NEVER render visually on mouse hover.
 *   - Hotspots may render ONLY on :focus-visible (keyboard).
 *   - No global a:hover, button:hover, .cta:hover style can leak through.
 *   - Mobile fallback (below 1024px) is a separate layer; hotspots hide there.
 * ============================================================ */

/* ---------- RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  /* --bake-edge-color is set per-page in each page's <style> block to
   * the master's corner pixel color, so framing bars blend seamlessly
   * with the master's vignette (Hollywood-style edge match). */
  background: var(--bake-edge-color, #0a0b0c);
  color: #EEEAE1;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.baked-page nav.global { display: none !important; }
a { color: inherit; text-decoration: none; }

/* CINEMATIC FRAME LOCK · Phase 5K · 2026-05-14
 * RLIS pages are fixed cinematic frames on desktop · NO scrolling below.
 * Mobile keeps overflow auto for the .baked-fallback scrolling experience. */
@media (min-width: 1025px) {
  html, body.baked-page { height: 100vh; overflow: hidden; }
}

/* ---------- SCREEN-READER MIRROR ---------- */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- SKIP LINK ---------- */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 999;
  padding: 12px 16px;
  background: #14171A;
  color: #EEEAE1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ============================================================
 * BAKE CONTAINER
 * Hosts the master WebP as background-image at 1672:941 ratio.
 * Each page sets its own --bake-url variable.
 * ============================================================ */
/* ============================================================
 * FULL-BLEED COVER LAW (Phase 5G · 2026-05-14)
 * ----------------------------------------------------------------
 * Why cover, not contain:
 *   - `contain` always produces a visible transition where the image
 *     meets the page bg color (even with edge-color matching). On any
 *     viewport whose aspect ratio differs from the master's 1672:941,
 *     bars/cutoffs appear. This reads as "amateur web layout."
 *   - `cover` fills the entire viewport with the image — edge to edge.
 *     The image is centered and scaled to cover both axes. On non-
 *     matching aspect ratios, small parts of the image are cropped
 *     symmetrically. Since master vignette edges are dark/sacrificial,
 *     this crop is visually invisible.
 *
 * Hotspot alignment trick:
 *   - The .baked-stage is sized via max() to MATCH the cover-scaled
 *     image dimensions exactly. Hotspots positioned at % of the stage
 *     stay aligned with image content even when image overflows viewport.
 *   - Math: image is at min scale needed to cover viewport.
 *     stage-width  = max(100vw, 100vh * 1672/941)
 *     stage-height = max(100vh, 100vw * 941/1672)
 *
 * Edge-color is now a fallback only (visible during slow image load).
 * Vignette extension overlay deprecated (no longer needed with cover).
 * ============================================================ */
.baked-canvas {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* Master fills the viewport edge-to-edge · NO bars · NO transition */
  background-image: var(--bake-url);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /* Fallback during slow load only · invisible once image paints */
  background-color: var(--bake-edge-color, #0a0b0c);
  overflow: hidden;
}

/* Stage matches the COVER-SCALED image dimensions exactly.
 * Hotspots positioned in % of stage stay aligned with baked content
 * even on non-16:9 viewports (16:10 MacBook, 21:9 ultrawide, etc.). */
.baked-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, calc(100vh * 1672 / 941));
  height: max(100vh, calc(100vw * 941 / 1672));
  z-index: 1;
}

/* ============================================================
 * HOTSPOTS · INVISIBLE INTERACTION LAYER
 * These rules are written with maximum specificity and !important
 * to defeat ANY global a:hover / button:hover / .cta:hover style.
 * ============================================================ */
.baked-hotspot,
a.baked-hotspot,
body .baked-hotspot,
body.baked-page .baked-hotspot {
  position: absolute;
  display: block;
  cursor: pointer;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 6px;
  outline: none;
  box-shadow: none !important;
  color: transparent !important;
  text-decoration: none !important;
  text-shadow: none !important;
  font: inherit;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* HOVER · STATE MUST REMAIN 100% INVISIBLE */
.baked-hotspot:hover,
a.baked-hotspot:hover,
body .baked-hotspot:hover,
body.baked-page .baked-hotspot:hover,
.baked-hotspot:active,
.baked-hotspot:visited,
.baked-hotspot:focus:not(:focus-visible) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  color: transparent !important;
  text-decoration: none !important;
  outline: none !important;
}

/* KEYBOARD FOCUS · subtle champagne ring · ONLY :focus-visible */
.baked-hotspot:focus-visible {
  outline: 1.5px solid rgba(232, 205, 150, 0.78) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(232, 205, 150, 0.12) !important;
  border-radius: 6px;
}

/* Hide any inner text/spans inside hotspots (paranoia — anchors should be empty) */
.baked-hotspot * { display: none !important; }

/* DISABLED HOTSPOT · for routes that don't exist yet (Freq43, Eclipse) */
.baked-hotspot[aria-disabled="true"] {
  cursor: not-allowed;
}
.baked-hotspot[aria-disabled="true"]:focus-visible {
  outline-color: rgba(180, 180, 180, 0.6) !important;
  box-shadow: 0 0 0 4px rgba(180, 180, 180, 0.10) !important;
}

/* ============================================================
 * MOBILE STRATEGY · below 1024px the bake's baked text is illegible
 * Hide hotspots, expose semantic CSS fallback (each page provides its own)
 * ============================================================ */
@media (max-width: 1024px) {
  .baked-canvas {
    min-height: auto;
    background-size: cover;
    align-items: stretch;
    padding: 0;
  }
  .baked-stage {
    width: 100%;
    aspect-ratio: auto;
    min-height: 100vh;
  }
  .baked-hotspot { display: none !important; }
  .baked-fallback {
    display: flex !important;
    flex-direction: column;
    gap: 22px;
    padding: 24px 18px 40px;
    background: linear-gradient(180deg, rgba(10,11,12,0.92), rgba(10,11,12,0.98));
    min-height: 100vh;
  }
}
@media (min-width: 1025px) {
  .baked-fallback { display: none !important; }
}

/* ---------- FALLBACK COMPONENTS (shared) ---------- */
.fb-nav { display: flex; justify-content: center; gap: 22px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.82); padding: 12px 0 20px; }
.fb-nav a { padding: 6px 8px; }
.fb-nav a.is-active { border-bottom: 2px solid #B89870; color: #fff; }
.fb-h1 { text-align: center; font-family: 'Inter', system-ui, sans-serif; font-size: clamp(28px, 7vw, 42px); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin: 8px 0 28px; }
.fb-card { padding: 24px; background: rgba(16,17,16, 0.72); border: 1px solid rgba(245,238,220, 0.22); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; }
.fb-card__label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(238,234,225,0.58); margin: 0; }
.fb-card__title { font-family: 'Inter', system-ui, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #EEEAE1; margin: 0; }
.fb-card__desc { font-family: 'Inter', system-ui, sans-serif; font-size: 14.5px; line-height: 1.55; color: rgba(238,234,225,0.74); margin: 0; }
.fb-card__cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 16px; border: 1px solid rgba(245,238,220,0.20); border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #EEEAE1; background: rgba(8,9,9, 0.28); margin-top: 8px; text-align: center; }
.fb-explore { display: inline-flex; justify-content: center; margin: 16px auto 0; padding: 16px 36px; border: 1px solid rgba(184,152,112,0.34); border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: #EEEAE1; }

/* ============================================================
 * RLIS v2 · LIVE GLOBAL CHROME (Phase 5H · 2026-05-14)
 * ----------------------------------------------------------------
 * Doctrine evolution: render-locked BODY + live shared CHROME.
 * Top nav drifted ~0.3% between bakes (each master rendered nav
 * independently in ChatGPT). Fix: mask the baked nav with a soft
 * top veil, then render canonical live chrome on top.
 *
 * Result: mathematically identical chrome across every RLIS page.
 * The body stays cinematic; the nav stops feeling like 4 posters.
 * ============================================================ */

/* ============================================================
 * RLIS v2 TOP VEIL · DISABLED in V1 (Phase 5J · 2026-05-14 revert)
 * ----------------------------------------------------------------
 * The veil was an attempt to mask baked chrome so live chrome could
 * sit on top. It worked physically but created a harsh horizontal
 * seam at the veil's bottom edge — visually worse than the bleed
 * it was trying to fix.
 *
 * Permanent solution: regenerate masters CHROME-LESS (V2 work),
 * then re-enable .site-chrome below. Until then, V1 uses baked
 * chrome + invisible hotspots (the original RLIS v1 architecture).
 *
 * To re-enable when chrome-less masters exist: uncomment this rule.
 * No veil needed because there's no baked chrome to mask.
 * ============================================================ */
/*
body.baked-page .baked-canvas::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 15vh;
  background: linear-gradient(180deg, rgba(8,9,10,0.96), transparent);
  backdrop-filter: blur(14px);
  pointer-events: none;
  z-index: 50;
}
*/

.site-chrome { display: none !important; }