/* ── 00-tokens.css ─── */
/* =============================================================
   00-tokens.css — Design Token System
   OPEN QUESTION #2: Final typeface selection (Fable/Dejan)
   OPEN QUESTION #1: Final tagline/headline (Fable/Dejan)
   ============================================================= */

:root {

  /* ─── Color ──────────────────────────────────────────────── */
  --c-bg:             #080808;
  --c-surface:        #111111;
  --c-surface-2:      #171717;
  --c-surface-3:      #1e1e1e;
  /* Minimum contrast 4.5:1 against #080808 at normal text sizes */
  --c-text-primary:   #f0f0f0;   /* 17.9:1 */
  --c-text-secondary: #999999;   /* 7.1:1  */
  --c-text-tertiary:  #808080;   /* 5.1:1  */
  /* Decorative-only: use on large (18px+) text with aria-hidden="true" */
  --c-text-dim:       #4a4a4a;
  /* Placeholder accent — final rose-gold/champagne locked in E2 from Lina asset */
  --c-accent:         #c9a070;
  --c-accent-subtle:  rgba(201,160,112,0.12);
  --c-border:         rgba(255,255,255,0.07);
  --c-border-hover:   rgba(255,255,255,0.14);

  /* ─── Typography ─────────────────────────────────────────── */
  /* OPEN QUESTION #2: Replace with Fable/Dejan-selected typefaces before E2 */
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Helvetica, Arial, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* Fluid type — min at 320px viewport, max at 1440px */
  --text-2xs:  clamp(0.625rem,  0.58rem  + 0.22vw,  0.75rem);   /*  10–12px */
  --text-xs:   clamp(0.75rem,   0.70rem  + 0.25vw,  0.875rem);  /*  12–14px */
  --text-sm:   clamp(0.875rem,  0.82rem  + 0.28vw,  1rem);      /*  14–16px */
  --text-base: clamp(1rem,      0.95rem  + 0.25vw,  1.125rem);  /*  16–18px */
  --text-lg:   clamp(1.125rem,  1.05rem  + 0.38vw,  1.25rem);   /*  18–20px */
  --text-xl:   clamp(1.25rem,   1.15rem  + 0.5vw,   1.5rem);    /*  20–24px */
  --text-2xl:  clamp(1.5rem,    1.3rem   + 1vw,     2rem);      /*  24–32px */
  --text-3xl:  clamp(2rem,      1.6rem   + 2vw,     3rem);      /*  32–48px */
  --text-4xl:  clamp(2.5rem,    1.8rem   + 3.5vw,   4.5rem);    /*  40–72px */
  --text-hero: clamp(3rem,      2rem     + 5vw,     7rem);      /*  48–112px */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;
  --ls-widest:   0.2em;

  /* Font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ─── Spacing (4px base grid) ────────────────────────────── */
  --sp-1:   0.25rem;   /*   4px */
  --sp-2:   0.5rem;    /*   8px */
  --sp-3:   0.75rem;   /*  12px */
  --sp-4:   1rem;      /*  16px */
  --sp-5:   1.25rem;   /*  20px */
  --sp-6:   1.5rem;    /*  24px */
  --sp-8:   2rem;      /*  32px */
  --sp-10:  2.5rem;    /*  40px */
  --sp-12:  3rem;      /*  48px */
  --sp-16:  4rem;      /*  64px */
  --sp-20:  5rem;      /*  80px */
  --sp-24:  6rem;      /*  96px */
  --sp-32:  8rem;      /* 128px */
  --sp-40:  10rem;     /* 160px */
  --sp-48:  12rem;     /* 192px */

  /* ─── Grid / Layout ──────────────────────────────────────── */
  --grid-cols:     12;
  --grid-gutter:   clamp(1rem, 2.5vw, 1.5rem);
  --container-max: 1440px;
  --container-pad: clamp(1.5rem, 5vw, 4rem);

  /* ─── Navigation ─────────────────────────────────────────── */
  --nav-rail-w:    56px;
  --nav-drawer-w:  320px;
  --nav-mobile-h:  56px;

  /* ─── Z-Index layers ─────────────────────────────────────── */
  --z-base:        0;
  --z-raised:      10;
  --z-sticky:      50;
  --z-nav-rail:    100;
  --z-nav-overlay: 190;
  --z-nav-drawer:  200;
  --z-nav-mobile:  300;
  --z-modal:       400;
  --z-toast:       500;

  /* ─── Motion ─────────────────────────────────────────────── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);

  --dur-instant:   80ms;
  --dur-fast:      150ms;
  --dur-base:      250ms;
  --dur-slow:      400ms;
  --dur-reveal:    600ms;
  --dur-cinematic: 900ms;

  /* ─── Border Radius ──────────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-full: 9999px;
}


/* ── 01-base.css ─── */
/* =============================================================
   01-base.css — Reset + base typography + layout foundation
   ============================================================= */

/* Modern reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}

body {
  background-color: var(--c-bg);
  color: var(--c-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Skip link — accessible keyboard nav */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-accent);
  color: var(--c-bg);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top var(--dur-fast);
}

.skip-link:focus {
  top: var(--sp-4);
}

/* List resets */
ul,
ol {
  list-style: none;
}

/* Media defaults */
img,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* Form element inheritance */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Button reset */
button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Link defaults */
a {
  color: inherit;
  text-decoration: none;
}

/* Focus styles — consistent across interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Heading scale */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-primary);
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
  max-width: 65ch;
}

/* Content area: offset for left nav rail on desktop */
.page-content {
  margin-left: var(--nav-rail-w);
  min-height: 100vh;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Visually hidden (screen-reader only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Mobile: remove rail offset, add top-bar offset ─────── */
@media (max-width: 1023px) {
  .page-content {
    margin-left: 0;
    padding-top: var(--nav-mobile-h);
  }
}


/* ── 02-nav.css ─── */
/* =============================================================
   02-nav.css — Left rail · Drawer · Mobile top bar
   Spec §1.9: desktop thin left rail (DEMOS · LINA · INDUSTRIES · WORK)
              click → large drawer (+ DESIGN · SYSTEMS · STUDIO · CONTACT)
              mobile: DL logo left, hamburger right, full-screen drawer
   ============================================================= */

/* ─── LEFT RAIL (desktop ≥1024px) ─────────────────────────── */

.nav-rail {
  position: fixed;
  inset-block: 0;
  left: 0;
  width: var(--nav-rail-w);
  height: 100vh;
  background: var(--c-bg);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--sp-5);
  z-index: var(--z-nav-rail);
}

/* Logo mark */
.nav-rail__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--sp-8);
  flex-shrink: 0;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out);
}

.nav-rail__logo:hover {
  background: var(--c-surface-2);
}

.nav-rail__logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-primary);
  user-select: none;
}

/* Nav item list */
.nav-rail__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
}

/* Rail trigger buttons — rotated text */
.nav-rail__btn {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-tertiary);     /* #808080 — 5.1:1 contrast */
  padding: var(--sp-2) var(--sp-1);
  border-radius: var(--radius-sm);
  transition: color var(--dur-base) var(--ease-out);
  position: relative;
}

/* Active indicator dot */
.nav-rail__btn::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + var(--sp-1));
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--c-accent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* ─── F-7: rail depression microinteraction ───────────────────────
   The item sinks into the rail surface. The groove is drawn on the <li>
   and spans the full rail width, so it reads as part of the rail rather
   than a button chip — no pill, no rectangle, no glow.

   `translate` is used instead of `transform` because .nav-rail__btn
   already carries `transform: rotate(180deg)` for the vertical label;
   the independent property composes with it instead of clobbering it.

   Press ~220ms, release ~330ms — the slower release is the base
   duration, so LINA → INDUSTRIES reads as one continuous handoff:
   LINA eases back out while INDUSTRIES settles in. */

.nav-rail__list li {
  position: relative;
}

.nav-rail__list li::before {
  content: '';
  position: absolute;
  top:    calc(-1 * var(--sp-2));
  bottom: calc(-1 * var(--sp-2));
  left: 50%;
  width: var(--nav-rail-w);
  translate: -50% 0;
  background: rgba(0, 0, 0, 0.5);
  box-shadow:
    inset 0  1px 2px rgba(0, 0, 0, 0.85),
    inset 0 -1px 0   rgba(255, 255, 255, 0.045);
  opacity: 0;
  pointer-events: none;
  transition: opacity 330ms var(--ease-out);
}

.nav-rail__btn {
  transition:
    color 330ms var(--ease-out),
    translate 330ms var(--ease-out);
}

/* Keyboard parity — deliberately outside the pointer-fine query so it
   also applies to keyboard users on touch hardware. The global
   :focus-visible outline stays as the accessible indicator. */
.nav-rail__list li:has(.nav-rail__btn:focus-visible)::before {
  opacity: 1;
  transition-duration: 220ms;
}

.nav-rail__btn:focus-visible {
  translate: -1px 0;
  transition-duration: 220ms;
}

/* Hover motion is desktop-pointer only: no sticky hover on touch. */
@media (hover: hover) and (pointer: fine) {
  .nav-rail__list li:has(.nav-rail__btn:hover)::before {
    opacity: 1;
    transition-duration: 220ms;
  }

  .nav-rail__btn:hover {
    color: var(--c-text-secondary);
    translate: -1px 0;
    transition-duration: 220ms;
  }
}

/* Non-hover pointers keep the colour change without the depression. */
@media not all and (hover: hover) and (pointer: fine) {
  .nav-rail__btn:hover {
    color: var(--c-text-secondary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-rail__list li::before,
  .nav-rail__btn {
    transition: none;
  }

  .nav-rail__btn:hover,
  .nav-rail__btn:focus-visible {
    translate: none;
  }
}

.nav-rail__btn[aria-expanded="true"] {
  color: var(--c-text-primary);
}

.nav-rail__btn[aria-expanded="true"]::after {
  opacity: 1;
}

/* ─── DRAWER OVERLAY (behind drawer, above content) ───────── */

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: var(--z-nav-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-in-out);
}

.nav-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─── NAVIGATION DRAWER ────────────────────────────────────── */

.nav-drawer {
  position: fixed;
  top: 0;
  left: var(--nav-rail-w);
  width: var(--nav-drawer-w);
  height: 100vh;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  transform: translateX(calc(-100% - var(--nav-rail-w)));
  transition: transform var(--dur-reveal) var(--ease-out-expo);
  z-index: var(--z-nav-drawer);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nav-drawer.is-open {
  transform: translateX(0);
}

/* Drawer header */
.nav-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  min-height: var(--nav-mobile-h);
}

.nav-drawer__logo {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-primary);
}

.nav-drawer__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-tertiary);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.nav-drawer__close:hover {
  color: var(--c-text-primary);
  background: var(--c-surface-2);
}

/* Drawer scrollable nav */
.nav-drawer__nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border) transparent;
  padding-bottom: var(--sp-8);
}

/* Section row */
.nav-drawer__section {
  border-bottom: 1px solid var(--c-border);
}

.nav-drawer__section:last-child {
  border-bottom: none;
}

/* Section heading link */
.nav-drawer__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-secondary);
  transition: color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-fast) var(--ease-out);
}

.nav-drawer__heading:hover {
  color: var(--c-text-primary);
  padding-left: calc(var(--sp-5) + var(--sp-2));
}

/* Active section highlight */
.nav-drawer__section.is-active > .nav-drawer__heading {
  color: var(--c-accent);
}

/* Sub-navigation links */
.nav-drawer__sub {
  padding: 0 0 var(--sp-3);
}

.nav-drawer__sub a {
  display: block;
  padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-8);
  font-size: var(--text-sm);
  color: var(--c-text-tertiary);
  transition: color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-fast) var(--ease-out);
}

.nav-drawer__sub a:hover {
  color: var(--c-text-primary);
  padding-left: calc(var(--sp-8) + var(--sp-2));
}

/* ─── MOBILE TOP BAR (≤1023px only) ───────────────────────── */

.nav-mobile-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-mobile-h);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--sp-4);
  z-index: var(--z-nav-mobile);
}

.nav-mobile-bar__logo {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-primary);
}

.nav-mobile-bar__toggle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-primary);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out);
}

.nav-mobile-bar__toggle:hover {
  background: var(--c-surface-2);
}

/* Hamburger icon: three bars via pseudo-elements */
.nav-mobile-bar__hamburger,
.nav-mobile-bar__hamburger::before,
.nav-mobile-bar__hamburger::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  border-radius: var(--radius-full);
  transition: transform var(--dur-base) var(--ease-in-out),
              opacity var(--dur-base) var(--ease-in-out);
}

.nav-mobile-bar__hamburger {
  position: relative;
}

.nav-mobile-bar__hamburger::before,
.nav-mobile-bar__hamburger::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-mobile-bar__hamburger::before { top: -6px; }
.nav-mobile-bar__hamburger::after  { top:  6px; }

/* × (close) state when drawer is open */
.nav-mobile-bar__toggle[aria-expanded="true"] .nav-mobile-bar__hamburger {
  background: transparent;
}

.nav-mobile-bar__toggle[aria-expanded="true"] .nav-mobile-bar__hamburger::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-mobile-bar__toggle[aria-expanded="true"] .nav-mobile-bar__hamburger::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ─── RESPONSIVE BREAKPOINT ────────────────────────────────── */

@media (max-width: 1023px) {
  /* Hide desktop rail */
  .nav-rail { display: none; }

  /* Show mobile bar */
  .nav-mobile-bar { display: flex; }

  /* Drawer fills full screen on mobile */
  .nav-drawer {
    left: 0;
    width: 100vw;
    max-width: 100vw;
    transform: translateX(-100vw);
  }

  .nav-drawer.is-open {
    transform: translateX(0);
  }
}

/* Tablet-specific drawer sizing */
@media (min-width: 1024px) and (max-width: 1279px) {
  --nav-drawer-w: 280px;
}


/* ── 03-pages.css ─── */
/* =============================================================
   03-pages.css — Skeleton page styles
   E1: placeholder chrome for homepage hero + scenes + interior pages
   E2+ will replace hero placeholder; E3+ will replace scene placeholders
   ============================================================= */

/* ─── HOMEPAGE — Hero placeholder (replaced in E2) ─────────── */

.hero-placeholder {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  overflow: hidden;
}

.hero-placeholder__inner {
  text-align: center;
  padding: var(--container-pad);
  position: relative;
  z-index: 1;
}

.hero-placeholder__label {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-6);
}

.hero-placeholder__headline {
  font-size: var(--text-hero);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-secondary);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-6);
}

.hero-placeholder__note {
  font-size: var(--text-sm);
  color: var(--c-text-tertiary);  /* #808080 — 5.1:1 contrast against bg */
  font-family: var(--font-mono);
}

/* Decorative corner mark */
.hero-placeholder__corner {
  position: absolute;
  bottom: var(--sp-8);
  right: var(--sp-8);
  font-size: var(--text-2xs);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-dim);
  text-transform: uppercase;
  pointer-events: none;
}

/* ─── HOMEPAGE — Scene pack placeholders (replaced in E3) ─── */

/* ─── INTERIOR PAGES ─────────────────────────────────────────── */

.page-header {
  padding-block: var(--sp-32) var(--sp-20);
  border-bottom: 1px solid var(--c-border);
}

.page-header__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  margin-bottom: var(--sp-5);
}

.page-header__title {
  font-size: var(--text-4xl);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-primary);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-6);
}

.page-header__desc {
  font-size: var(--text-lg);
  color: var(--c-text-secondary);
  max-width: 55ch;
  line-height: var(--lh-relaxed);
}

/* Body content area */
.page-body {
  padding-block: var(--sp-20);
}

/* Placeholder section row */
.placeholder-section {
  padding-block: var(--sp-16);
  border-bottom: 1px solid var(--c-border);
}

.placeholder-section:last-child {
  border-bottom: none;
}

.placeholder-section__label {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
}

.placeholder-section__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* Open question callout */
.open-question {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--c-accent);
  background: var(--c-accent-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.open-question__label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}

.open-question__text {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  font-family: var(--font-mono);
  line-height: var(--lh-relaxed);
  max-width: none;
}

/* ─── 404 PAGE ───────────────────────────────────────────────── */

.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--container-pad);
}

.error-page__code {
  font-size: clamp(6rem, 20vw, 12rem);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--c-surface-3);
  user-select: none;
}

.error-page__message {
  font-size: var(--text-xl);
  color: var(--c-text-secondary);
  margin-block: var(--sp-5) var(--sp-8);
}

.error-page__link {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.error-page__link:hover {
  opacity: 0.7;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 767px) {
  .page-header {
    padding-block: var(--sp-20) var(--sp-12);
  }

  .hero-placeholder__corner {
    display: none;
  }

}


/* ── 04-hero.css ─── */
/* =============================================================
   04-hero.css — E2/F-4 Hero: Lina + Earth autoplay cinematic
   Normal page flow; GSAP time-driven animation with scroll-to-skip
   Three art-directions: desktop ≥1280 · tablet 1024–1279 · mobile <1024
   ============================================================= */

/* ─── Normal-flow, single-viewport hero ─────────────────────── */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  /* Full-bleed: escape page-content's left margin on desktop */
  margin-left: calc(-1 * var(--nav-rail-w));
  width: 100vw;
}

/* Class retained to preserve the approved markup and art direction. */
.hero__sticky {
  position: relative;
  left: 0;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  background: var(--c-bg);
}

/* ─── Image scene ────────────────────────────────────────────── */

.hero__scene {
  position: absolute;
  inset: 0;
  opacity: 0;           /* GSAP: 0 → 1 at sequence start */
  will-change: opacity;
}

/* Media wrapper: poster + video sit in one box with identical geometry.
   No transform/drift is applied here — the approved video already carries
   its own camera and Earth motion, and compounding the old still-image
   drift on top of it produced visible double movement. */
.hero__media {
  position: absolute;
  inset: 0;
}

.hero__picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Approved hero video (AV1/WebM + H.264 fallback). Sources are attached by
   hero.js only after load, so this element costs nothing until then. */
.hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;   /* desktop art direction — matches .hero__img */
  opacity: 0;
  transition: opacity 700ms var(--ease-in-out);
  pointer-events: none;
  will-change: opacity;
}

/* Handoff: the poster stays underneath, so there is never a blank frame. */
.hero--video-live .hero__video { opacity: 1; }

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;     /* desktop: keeps the whole satellite in frame */
}

/* ─── E2: cinematic exposure veil ────────────────────────────
   Near-black layer that lifts slowly so the scene "comes online".
   Sits above the image, below overlay/statuses. Compositor-only. */

.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #050505;
  opacity: 1;               /* GSAP: 1 → 0 over ~3s */
  will-change: opacity;
}

/* ─── Readability gradients ──────────────────────────────────── */

.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,  rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.1) 55%, rgba(8,8,8,0) 100%),
    linear-gradient(to top,    rgba(8,8,8,0.85) 0%, rgba(8,8,8,0)   45%);
}

/* ─── Status lines (time-sequenced) ─────────────────────────── */

.hero__statuses {
  position: absolute;
  /* minimum left = rail (56px) + sp-3 so text never overlaps the rail */
  left:   clamp(calc(var(--nav-rail-w) + var(--sp-3)), 8vw, var(--sp-32));
  bottom: clamp(var(--sp-16), 14vh, var(--sp-32));
  width: min(32rem, calc(100vw - var(--nav-rail-w) - var(--sp-16)));
  height: 1.5rem;
  pointer-events: none;
}

.hero__status {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0;
  transform: translateY(6px);
  will-change: opacity, transform;
  white-space: nowrap;
}

.hero__status::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

/* ─── Final state: Meet Lina. ────────────────────────────────── */

.hero__cta {
  position: absolute;
  left:   clamp(calc(var(--nav-rail-w) + var(--sp-3)), 8vw, var(--sp-32));
  bottom: clamp(var(--sp-16), 14vh, var(--sp-32));
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}

/* OPEN QUESTION #1: Final headline — "Meet Lina." placeholder */
.hero__headline {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-text-primary);
  max-width: 12ch;
  margin-bottom: var(--sp-6);
}

.hero__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  transition: gap var(--dur-base) var(--ease-out);
}

.hero__cta-link:hover {
  gap: var(--sp-5);
}

.hero__cta-link svg {
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}

.hero__cta-link:hover svg {
  transform: translateX(var(--sp-2));
}

/* ─── Corner telemetry label ─────────────────────────────────── */

.hero__telemetry {
  position: absolute;
  top:   var(--sp-8);
  right: var(--sp-8);
  pointer-events: none;
}

/* --tele-signal 0 → 1 drives the whole power-up: dimness, champagne
   tone and the restrained signal-lock glow move together. */
.hero__telemetry-label {
  --tele-signal: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  color: color-mix(in srgb,
                   var(--c-text-tertiary),
                   var(--c-accent) calc(var(--tele-signal) * 100%));
  text-shadow:
    0 0 calc(var(--tele-signal) * 6px)  rgba(201, 160, 112, calc(var(--tele-signal) * 0.40)),
    0 0 calc(var(--tele-signal) * 18px) rgba(201, 160, 112, calc(var(--tele-signal) * 0.16));
  opacity: calc(0.05 + var(--tele-signal) * 0.5);
  will-change: opacity;
  max-width: none;
}

/* ─── Scroll hint ─────────────────────────────────────────────── */

.hero__scroll-hint {
  position: absolute;
  bottom: var(--sp-6);
  left:   50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  max-width: none;
  opacity: 0.6;
  animation: hero-scroll-pulse 2.5s var(--ease-in-out) 1.8s infinite alternate;
}

@keyframes hero-scroll-pulse {
  from { opacity: 0.3; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0.7; transform: translateX(-50%) translateY(-4px); }
}

/* ─── Mobile: <1024px ────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* On mobile the page-content has no left margin, so no full-bleed correction needed */
  .hero {
    margin-left: 0;
    width: 100%;
    height: calc(100vh - var(--nav-mobile-h));
    height: calc(100svh - var(--nav-mobile-h));
  }

  /* The page-content offset already places the hero below the mobile bar. */
  .hero__sticky {
    height: 100%;
    width: 100%;
  }

  /* OQ-7: Lina face/torso crop for mobile — awaiting Dejan/Fable final decision.
     Proposal: top-left 30% shows upper Lina area in typical left-composition image. */
  /* Portrait crop lives in the aspect-ratio block below so that portrait
     tablets get it too; only the mobile-specific chrome stays here. */

  /* Simplified vertical overlay for portrait */
  .hero__overlay {
    background: linear-gradient(to top, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.1) 55%, rgba(8,8,8,0) 100%);
  }

  .hero__statuses {
    left:   var(--sp-5);
    right:  var(--sp-5);
    width: auto;
    bottom: clamp(var(--sp-24), 22vh, var(--sp-40));
  }

  .hero__status {
    font-size: var(--text-2xs);
    white-space: normal;
  }

  .hero__cta {
    left:   var(--sp-5);
    right:  var(--sp-5);
    bottom: clamp(var(--sp-24), 22vh, var(--sp-40));
  }

  .hero__headline {
    font-size: clamp(2.5rem, 11vw, 4rem);
  }

  /* Satellite excluded per spec §1.15 for mobile */
  .hero__satellite { display: none; }

  /* Scroll hint not needed on touch devices */
  .hero__scroll-hint { display: none; }

  /* Telemetry simpler on mobile */
  .hero__telemetry { display: none; }
}

/* ─── Tablet: 1024–1279px ─────────────────────────────────────── */

@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__headline {
    font-size: clamp(3rem, 5.5vw, 5.5rem);
  }

  /* Ensure CTA/status stay clear of the 56px rail at all tablet widths */
  .hero__statuses,
  .hero__cta {
    left: clamp(calc(var(--nav-rail-w) + var(--sp-4)), 7vw, calc(var(--nav-rail-w) + var(--sp-12)));
  }

  /* Tablet landscape: Lina and the satellite cannot both survive a 1.44 crop.
     Lina wins; only the satellite outer panel tip leaves the frame. */
  .hero__img,
  .hero__video { object-position: 66% center; }
}

/* ─── Portrait art direction (any width) ─────────────────────────
   Mirrors the hero.js video gate exactly: below 5/4 the 16:9 frame
   cannot hold Lina + Earth + satellite, so portrait is a deliberate
   static poster crop and the video never loads. Declared AFTER the
   tablet band so a 1024x1366 tablet gets the portrait crop, not the
   landscape one. */

@media (max-aspect-ratio: 5/4) {
  .hero__img  { object-position: 15% center; }
  .hero__video { display: none; }
}

/* Narrow phones: tighten onto Lina head/torso instead of shrinking her. */

@media (max-width: 640px) {
  .hero__img { object-position: 16% center; }
}

/* ─── Reduced motion: final state immediately; no timeline/delay ── */

@media (prefers-reduced-motion: reduce) {
  .hero__scene { opacity: 1 !important; }
  .hero__statuses,
  .hero__scroll-hint { display: none; }
  .hero__cta   { opacity: 1 !important; transform: none !important; }
  .hero__veil { opacity: 0 !important; }
  .hero__video { display: none !important; }
  .hero__telemetry-label { --tele-signal: 1 !important; }
}

/* ─── No-JS fallback (SPEC F-3) ───────────────────────────────────
   The cinematic first frame is deliberately black and is opened by
   GSAP. Without JS that would leave a black screen, so a no-JS
   visitor gets the finished hero immediately instead. `.js` is set
   by an inline head script, so JS users never see this state. */

html:not(.js) .hero__scene { opacity: 1; }
html:not(.js) .hero__veil  { opacity: 0; }
html:not(.js) .hero__cta   { opacity: 1; transform: none; }
html:not(.js) .hero__statuses,
html:not(.js) .hero__scroll-hint { display: none; }
html:not(.js) .hero__telemetry-label { --tele-signal: 1; }

/* ─── Screenshot / QC preview mode (?preview URL param) ─────── */
/* Activated by main.js adding .hero-preview to <body> */

.hero-preview .hero__scene    { opacity: 1 !important; }
.hero-preview .hero__cta      { opacity: 1 !important; transform: none !important; }
.hero-preview .hero__statuses { display: none !important; }
.hero-preview .hero__scroll-hint { display: none !important; }
.hero-preview .hero__veil    { opacity: 0 !important; }
.hero-preview .hero__video   { display: none !important; }
.hero-preview .hero__telemetry-label { --tele-signal: 1 !important; }


/* ── 05-palette-light.css ─── */
/* =============================================================
   05-palette-light.css — Light palette tokens for OQ-9 comparison
   Activate via data-theme="light" on <html> or <body>
   All colors verified ≥4.5:1 contrast for normal text.
   ============================================================= */

[data-theme="light"] {
  /* Backgrounds */
  --c-bg:             #f5f4f0;   /* warm off-white */
  --c-surface:        #ffffff;
  --c-surface-2:      #eeede7;
  --c-surface-3:      #e4e2d9;

  /* Text (all verified ≥4.5:1 on --c-bg) */
  --c-text-primary:   #0d0d0a;   /* near-black      — 18.4:1 */
  --c-text-secondary: #383836;   /* dark gray        — 10.2:1 */
  --c-text-tertiary:  #6a6a67;   /* mid gray         —  4.6:1 */
  --c-text-dim:       #9a9a97;   /* decorative only  —  2.5:1 (aria-hidden only) */

  /* Accent — darker amber/gold for light background */
  --c-accent:         #8a6010;   /* 4.6:1 on #f5f4f0 */
  --c-accent-subtle:  rgba(138,96,16,0.09);

  /* Borders */
  --c-border:         rgba(0,0,0,0.08);
  --c-border-hover:   rgba(0,0,0,0.16);
}


/* ── 07-scenes.css ─── */
/* =============================================================
   07-scenes.css — E3 Scene pack: project worlds 02–06
   One idea per viewport. Worlds share typography/grid/motion/
   spacing/image treatment; only the media inside changes.
   Reveal is opacity/transform only → never causes layout shift.
   ============================================================= */

/* ─── Scene shell ─────────────────────────────────────────────── */

.scene-list {
  display: block;
}

.scene {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: var(--sp-24) var(--container-pad);
  border-top: 1px solid var(--c-border);
}

/* The world index sits in the page margin as a quiet anchor. */
.scene__index {
  position: absolute;
  top: var(--sp-10);
  left: var(--container-pad);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  color: var(--c-text-tertiary);
}

.scene__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(var(--sp-10), 6vw, var(--sp-24));
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Alternating rhythm: the media changes side world to world, so the
   pack reads as a sequence of places rather than a repeated template. */
.scene--flip .scene__copy  { order: 2; }
.scene--flip .scene__media { order: 1; }

/* ─── Copy column ─────────────────────────────────────────────── */

.scene__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent);
}

.scene__eyebrow::before {
  content: '';
  width: var(--sp-8);
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.scene__title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-primary);
  max-width: 16ch;
  margin-bottom: var(--sp-6);
}

.scene__lead {
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--c-text-secondary);
  max-width: 46ch;
  margin-bottom: var(--sp-8);
}

.scene__points {
  list-style: none;
  margin: 0 0 var(--sp-8);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.scene__points li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-tertiary);
}

.scene__points li::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--c-accent);
  flex-shrink: 0;
  transform: translateY(-3px);
}

.scene__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  transition: gap var(--dur-base) var(--ease-out);
}

.scene__link:hover { gap: var(--sp-5); }
.scene__link svg   { flex-shrink: 0; }

.scene__anchor {
  display: block;
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-tertiary);
}

/* ─── Media slot ──────────────────────────────────────────────────
   Deliberately asset-agnostic: today it holds an inline SVG figure,
   later it takes a poster/video pair from the IMAGE_TO_VIDEO lane
   with no change to the section markup around it. */

.scene__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  overflow: hidden;
}

/* Poster/video pair — same discipline as the hero: identical geometry,
   video fades in over the poster, never a blank frame. */
.scene__media picture,
.scene__poster,
.scene__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.scene__poster,
.scene__video {
  object-fit: cover;
  object-position: center center;
}

.scene__video {
  opacity: 0;
  transition: opacity 700ms var(--ease-in-out);
  pointer-events: none;
}

.scene--video-live .scene__video { opacity: 1; }

/* Inline SVG figure (current state, no asset yet) */
.scene__figure {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.scene__figure svg { display: block; width: 100%; height: 100%; }

/* Shared figure vocabulary so the five worlds stay one system. */
.fig-line   { stroke: var(--c-border-hover); stroke-width: 1; fill: none; }
.fig-panel  { fill: var(--c-surface-2); stroke: var(--c-border-hover); stroke-width: 1; }
.fig-panel-2{ fill: var(--c-surface-3); stroke: var(--c-border-hover); stroke-width: 1; }
.fig-mute   { fill: var(--c-text-dim); }
.fig-dim    { fill: var(--c-border-hover); }
.fig-accent { fill: var(--c-accent); }
.fig-stroke-accent { stroke: var(--c-accent); stroke-width: 1.25; fill: none; }
.fig-label  {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 1.2px;
  fill: var(--c-text-tertiary);
  text-transform: uppercase;
}

/* ─── Reveal — OQ-8 (approved 2026-08-27) ─────────────────────────
   Scene copy is VISIBLE in base CSS. The hidden state exists only under
   `.scene-motion`, which scenes.js adds itself immediately before it
   arms the observer. If that script never runs, throws, or is blocked,
   the class is absent and the content simply stays visible — fail open.

   Whole sequence resolves in 700ms end to end (not per item):
   eyebrow 0 → heading 110 → copy 220 → bullets 330 → CTA 440,
   each 260ms. Opacity + 12px rise only: no scale, rotation, spring,
   blur or horizontal slide. Content resolves into place.

   The media slot is deliberately NOT part of this choreography — it
   stays structurally stable and carries its own motion later. */

.scene-motion .scene__copy > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 260ms var(--ease-out),
    transform 260ms var(--ease-out);
}

.scene-motion .scene[data-revealed] .scene__copy > * {
  opacity: 1;
  transform: none;
}

.scene-motion .scene[data-revealed] .scene__eyebrow { transition-delay:   0ms; }
.scene-motion .scene[data-revealed] .scene__title   { transition-delay: 110ms; }
.scene-motion .scene[data-revealed] .scene__lead    { transition-delay: 220ms; }
.scene-motion .scene[data-revealed] .scene__points  { transition-delay: 330ms; }
.scene-motion .scene[data-revealed] .scene__link,
.scene-motion .scene[data-revealed] .scene__anchor  { transition-delay: 440ms; }

/* ─── Tablet ──────────────────────────────────────────────────── */

@media (max-width: 1279px) {
  .scene__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-10);
  }

  /* Portrait tablets read top-to-bottom: idea first, then the world. */
  .scene--flip .scene__copy,
  .scene--flip .scene__media { order: 0; }

  .scene { min-height: auto; padding-block: var(--sp-20); }
  .scene__title { max-width: 20ch; }
  .scene__media { aspect-ratio: 16 / 9; }
}

/* ─── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .scene {
    padding: var(--sp-16) var(--sp-5);
  }

  /* Stays out of flow: .scene is a flex row, so a static index would
     become a sibling column and wrap mid-height. */
  .scene__index {
    top: var(--sp-6);
    left: var(--sp-5);
  }

  .scene__title { font-size: clamp(2rem, 8.5vw, 2.75rem); max-width: 14ch; }
  .scene__lead  { font-size: var(--text-base); }
  .scene__media { aspect-ratio: 4 / 3; }
}

/* ─── Reduced motion: finished state, immediately ─────────────── */

@media (prefers-reduced-motion: reduce) {
  /* scenes.js never arms .scene-motion here; this is belt-and-braces. */
  .scene-motion .scene__copy > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .scene__video { display: none !important; }
}

/* ─── Scene QC mode (?scenes) ─────────────────────────────────────
   Screenshot harness only: drops the hero and the per-scene viewport
   height so the whole pack fits one capture. Never active in normal use. */

.scenes-qc .hero { display: none; }
.scenes-qc .scene { min-height: auto; padding-block: var(--sp-16); }

/* Transitions off so a headless capture is deterministic rather than
   catching the reveal mid-flight. */
.scenes-qc .scene__copy > * {
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}


/* ── 08-service.css ─── */
/* =============================================================
   08-service.css — E4 service landing pages
   SPEC §1.12 / §3: full unique SEO copy per page, real intent,
   no pricing tables (discreet "from" anchors only).
   Static layout: no reveal choreography, no CLS risk.
   ============================================================= */

.svc {
  padding-block: clamp(var(--sp-16), 10vh, var(--sp-32)) var(--sp-32);
}

/* ─── Header ──────────────────────────────────────────────────── */

.svc-header {
  max-width: 62ch;
  margin-bottom: clamp(var(--sp-16), 9vh, var(--sp-32));
}

.svc-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent);
}

.svc-eyebrow::before {
  content: '';
  width: var(--sp-8);
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.svc-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-primary);
  margin-bottom: var(--sp-6);
}

.svc-lead {
  font-size: var(--text-xl);
  line-height: var(--lh-relaxed);
  color: var(--c-text-secondary);
}

.svc-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-top: var(--sp-10);
}

.svc-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.svc-cta:hover {
  background: var(--c-accent);
  color: var(--c-bg);
}

/* Discreet price anchor — never a pricing table (SPEC §1.10). */
.svc-anchor {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-tertiary);
}

/* ─── Sections ────────────────────────────────────────────────── */

.svc-section {
  padding-block: clamp(var(--sp-10), 5vh, var(--sp-16));
  border-top: 1px solid var(--c-border);
}

.svc-section__title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  margin-bottom: var(--sp-8);
}

.svc-prose p {
  max-width: 68ch;
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--c-text-secondary);
}

.svc-prose p + p { margin-top: var(--sp-5); }

/* ─── Steps ───────────────────────────────────────────────────── */

.svc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.svc-steps__n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}

.svc-steps h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-text-primary);
  margin-bottom: var(--sp-3);
}

.svc-steps p {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-tertiary);
}

/* ─── Feature / case lists ────────────────────────────────────── */

.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.svc-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-secondary);
}

.svc-list li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--c-accent);
  flex-shrink: 0;
  transform: translateY(-3px);
}

.svc-list strong {
  color: var(--c-text-primary);
  font-weight: var(--fw-semibold);
}

/* ─── FAQ ─────────────────────────────────────────────────────── */

.svc-faq {
  margin: 0;
  display: grid;
  gap: var(--sp-8);
}

.svc-faq dt {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  margin-bottom: var(--sp-3);
}

.svc-faq dd {
  margin: 0;
  max-width: 68ch;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-tertiary);
}

/* ─── Related ─────────────────────────────────────────────────── */

.svc-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.svc-related__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  transition:
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.svc-related__list a:hover {
  border-color: var(--c-border-hover);
  color: var(--c-text-primary);
}

.svc-related__list span[aria-hidden] { color: var(--c-accent); }

/* ─── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .svc-lead  { font-size: var(--text-lg); }
  .svc-prose p { font-size: var(--text-base); }
  .svc-actions { gap: var(--sp-4); }
}


/* ── 09-industry.css ─── */
/* =============================================================
   09-industry.css — E5 Industries V1
   SPEC §1.13: every industry page carries a real function.
   Tool UI is static layout — the results panel replaces its own
   contents, so nothing above it can shift (no CLS).
   ============================================================= */

.ind { padding-block: clamp(var(--sp-16), 10vh, var(--sp-32)) var(--sp-32); }

/* ─── Header ──────────────────────────────────────────────────── */

.ind-header { max-width: 62ch; margin-bottom: clamp(var(--sp-12), 7vh, var(--sp-24)); }

.ind-title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-primary);
  margin-bottom: var(--sp-6);
}

.ind-lead {
  font-size: var(--text-xl);
  line-height: var(--lh-relaxed);
  color: var(--c-text-secondary);
}

/* ─── Tool ────────────────────────────────────────────────────── */

.tool-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-8), 4vw, var(--sp-16));
  align-items: start;
  padding-block: clamp(var(--sp-10), 5vh, var(--sp-16));
  border-top: 1px solid var(--c-border);
}

/* Reset the browser's default fieldset chrome — the legend is styled
   as a section marker, not as a notch in a border box. */
.tool__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.tool__legend {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-6);
  padding: 0;
}

.tool__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  border: 0;
  padding: 0;
  margin: 0;
}

.tool__field { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; }

.tool__field--wide { grid-column: 1 / -1; }

.tool__field label,
.tool__field > span {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
}

.tool__field input[type="number"],
.tool__field select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--dur-base) var(--ease-out);
}

.tool__field input[type="number"]:hover,
.tool__field select:hover { border-color: var(--c-border-hover); }

.tool__check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-secondary);
  text-transform: none;
}

.tool__check input { accent-color: var(--c-accent); width: 16px; height: 16px; }

/* Chips (hospitality) */
.tool__chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.tool__chip {
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--c-text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  transition:
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.tool__chip:hover { border-color: var(--c-border-hover); color: var(--c-text-secondary); }

.tool__chip[aria-pressed="true"] {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-subtle);
}

/* ─── Results ─────────────────────────────────────────────────── */

.tool__out {
  display: block;
  padding: var(--sp-8);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

.tool__result { margin: 0; display: grid; gap: var(--sp-4); }

.tool__result > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}

.tool__result > div:last-child { border-bottom: 0; padding-bottom: 0; }

.tool__result dt {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
}

.tool__result dd {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--c-text-primary);
  text-align: right;
}

.tool__result--lead {
  font-family: var(--font-heading);
  font-size: var(--text-2xl) !important;
  font-weight: var(--fw-bold);
  color: var(--c-accent) !important;
}

.tool__result-title,
.tool__notes-title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-4);
}

.tool__result-title:first-child { margin-top: 0; }

.tool__notes,
.tool__qs,
.tool__ks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-tertiary);
}

.tool__notes li,
.tool__qs li,
.tool__ks li { display: flex; gap: var(--sp-3); }

.tool__notes li::before,
.tool__qs li::before,
.tool__ks li::before {
  content: '';
  width: 3px;
  height: 3px;
  margin-top: 0.6em;
  border-radius: var(--radius-full);
  background: var(--c-border-hover);
  flex-shrink: 0;
}

.tool__qs li::before { background: var(--c-accent); }

p.tool__notes { display: block; margin-top: var(--sp-5); }

.tool__empty,
.tool__nojs {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-tertiary);
  margin: 0;
}

.tool__muted { color: var(--c-text-dim); font-size: var(--text-sm); }

/* ─── Industry index grid ─────────────────────────────────────── */

.ind-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.ind-grid a {
  display: block;
  height: 100%;
  padding: var(--sp-8);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-base) var(--ease-out);
}

.ind-grid a:hover { border-color: var(--c-border-hover); }

.ind-grid h2 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  margin-bottom: var(--sp-3);
}

.ind-grid p {
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-tertiary);
  margin-bottom: var(--sp-4);
}

.ind-grid span {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent);
}

/* ─── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .tool-wrap { grid-template-columns: minmax(0, 1fr); }
  .ind-lead  { font-size: var(--text-lg); }
  .tool__out { padding: var(--sp-6); }
  .tool__result dd { font-size: var(--text-base); }
}


/* ── 06-lenis.css ─── */
/* ─── F-5 Lenis A/B support (active only when html.lenis is present) ── */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}