/* ==========================================================================
   Cabine - design tokens v1 (Chamber)
   Import this first in every build. Never hard-code a hex outside this file.

   Rule: Live is the only saturated colour in the system. If something is red,
   it is on air. Everything at rest is neutral grey. Colour never carries
   meaning alone - always pair it with a text label.
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  /* SURFACE role - full-bleed backgrounds: nav, footer, promo bands, buttons.
     Must stay dark in every theme. Never remap this to a light green. */
  --c-chamber:        #1B4034;
  --c-chamber-hover:  #163429;
  --c-chamber-soft:   #24564A;  /* raised surfaces sitting on chamber */

  /* ACCENT role - links and interactive text ON a light surface.
     Separate token because a colour that reads well as text does not
     read well as a full-bleed background, and vice versa. */
  --c-accent:         #1B4034;
  --c-accent-hover:   #10281F;

  /* text on chamber surfaces - 6.56:1, do not lower with opacity */
  --c-on-chamber-dim: #B9C7C1;

  /* CHROME - nav and footer are neutral. Green is an accent, not a surface.
     A full-bleed brand colour across the top of every page reads as a brochure;
     neutral chrome with a restrained accent reads as a tool. */
  --c-chrome:         #FFFFFF;
  --c-chrome-text:    #14201C;
  --c-chrome-dim:     #5A6663;
  --c-chrome-border:  #D5DCD8;
  --c-footer-bg:      #14201C;
  --c-footer-text:    #9AA8A3;
  --c-footer-head:    #FFFFFF;

  /* --- state: live (on air) --------------------------------------------- */
  --c-live:           #D93A2B;  /* graphics, dots, bars, borders, large text (4.6:1 on paper) */
  --c-live-text:      #A8281B;  /* REQUIRED for text under 18px (6.2:1 on paper) */
  --c-live-surface:   #FDF0EE;
  --c-live-border:    #F0C6C0;

  /* --- state: rest (standby) - neutral by design, never a hue ----------- */
  --c-rest:           #6B7280;
  --c-rest-surface:   #F1F3F4;
  --c-rest-border:    #D5D9DC;

  /* --- neutrals --------------------------------------------------------- */
  --c-ink:            #14201C;  /* body text */
  --c-muted:          #5A6663;  /* secondary text, labels (5.5:1 on paper) */
  --c-line:           #DBE3DD;
  --c-tint:           #E6EDE8;  /* the only decorative surface */
  --c-canvas:         #F3F7F4;
  --c-paper:          #FFFFFF;
  --c-on-chamber:     #FFFFFF;
  --c-muted-invert:   #B9C7C1;

  /* illustration colours - line art must survive a theme switch */
  --c-illus-ink:      #1B4034;
  --c-illus-fill:     #E9EEEA;
  --c-illus-dim:      rgba(27, 64, 52, 0.28);
  --c-illus-panel:    rgba(27, 64, 52, 0.16);

  /* --- type ------------------------------------------------------------- */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Hierarchy comes from width, not from swapping typefaces.
     Every number, rate, duration, channel and booth code is set in mono. */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.8rem;
  --text-3xl:  2.4rem;
  --text-4xl:  clamp(2.5rem, 6.5vw, 4.5rem);

  --leading-tight: 1.08;
  --leading-snug:  1.3;
  --leading-body:  1.65;

  --tracking-display: -0.01em;
  --tracking-eyebrow:  0.18em;

  --weight-body:    400;
  --weight-medium:  500;
  --weight-display: 600;

  /* --- space (4px base) -------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;
  --sp-section: clamp(2rem, 6vw, 4.5rem);
  --sp-gutter:  clamp(1.25rem, 4vw, 3rem);

  /* --- shape ------------------------------------------------------------- */
  --r-sm: 6px;  --r-md: 9px;  --r-lg: 12px;  --r-xl: 16px;  --r-pill: 999px;
  --border: 1px solid var(--c-line);
  --border-live: 4px solid var(--c-live);
  --border-booth: 4px solid var(--c-chamber);

  /* --- elevation (restrained: two levels only) --------------------------- */
  --shadow-1: 0 1px 2px rgba(20, 32, 28, 0.05), 0 1px 1px rgba(20, 32, 28, 0.03);
  --shadow-2: 0 2px 4px rgba(20, 32, 28, 0.04), 0 12px 32px -8px rgba(20, 32, 28, 0.14);

  /* --- focus (WCAG 2.2 - 3:1 against adjacent colours) ------------------- */
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus-color: var(--c-chamber);
  --focus-color-invert: #FFFFFF;

  /* --- targets ------------------------------------------------------------ */
  --target-min: 44px;   /* our floor, above the WCAG 24px minimum */

  /* --- motion ------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(0.2, 0, 0.13, 1);
  --handover-cycle: 5s;  /* logo rotation, compressed from 20-30 real minutes */
}

/* Dark theme - APP ONLY, opt in with <html data-theme="dark">.
   Interpreters read run sheets on a phone in a darkened hall, so the app needs
   it. The marketing site does not, and auto-switching it via
   prefers-color-scheme produced a bright nav slab on a near-black page. */
[data-theme="dark"] {
    --c-paper:        #101A17;
    --c-canvas:       #0C1512;
    --c-tint:         #1B2A25;
    --c-ink:          #E8EFEB;
    --c-muted:        #9DAFA8;
    --c-line:         #2A3D36;
    --c-chamber:      #14332A;   /* surface stays dark, sits under the page */
    --c-chamber-hover:#1B4034;
    --c-accent:       #6FCBAF;   /* 8.4:1 on dark paper - was 3.46:1 and failing */
    --c-accent-hover: #8ADCC4;
    --c-on-chamber-dim:#A9C4B9;
    --c-illus-ink:    #7FB8A5;
    --c-illus-fill:   #1B2A25;
    --c-illus-dim:    rgba(127, 184, 165, 0.34);
    --c-illus-panel:  rgba(127, 184, 165, 0.18);
    --c-on-live:      #2B0F0A;
    --c-chrome:       #0F1614;
    --c-chrome-text:  #E8EFEB;
    --c-chrome-dim:   #9DAFA8;
    --c-chrome-border:#232F2B;
    --c-footer-bg:    #0A100E;
    --c-footer-text:  #8E9C97;
    --c-footer-head:  #FFFFFF;
    --c-live:         #FF6B58;
    --c-live-text:    #FF8B7A;
    --c-live-surface: #2B1714;
    --c-live-border:  #5A2A22;
    --c-rest:         #8A9691;
    --c-rest-surface: #1B2A25;
    --c-rest-border:  #2A3D36;
    --focus-color:    #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

.on-chamber :focus-visible { outline-color: var(--focus-color-invert); }

/* Numbers are the argument in this business - always mono. */
.num, .rate, .duration, .channel, .booth-no, time, output {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

button, [role="button"], a.btn, input, select, textarea { min-height: var(--target-min); }


/* --- theme toggle ------------------------------------------------------- */
.themetoggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; min-height:40px; padding:0; flex:none;
  background:transparent; border:1px solid var(--c-chrome-border);
  border-radius: var(--r-md); color: var(--c-chrome-dim); cursor:pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.themetoggle:hover{ background:var(--c-tint); color:var(--c-chrome-text); }
.themetoggle svg{ width:18px; height:18px; display:block; }
.themetoggle .moon{ display:none; }
html[data-theme="dark"] .themetoggle .moon{ display:block; }
html[data-theme="dark"] .themetoggle .sun{ display:none; }

/* --- illustration classes ---------------------------------------------- */
.il-s{ stroke: var(--c-illus-ink); }
.il-f{ fill: var(--c-illus-ink); }
.il-surface{ fill: var(--c-illus-fill); }
.il-dim{ fill: var(--c-illus-dim); }
.il-panel{ fill: var(--c-illus-panel); }
.il-live-f{ fill: var(--c-live); }
.il-live-s{ stroke: var(--c-live); }
.il-rest-f{ fill: var(--c-rest); }
.il-paper{ fill: var(--c-paper); }
.il-livesurface{ fill: var(--c-live-surface); }
.il-livetext{ fill: var(--c-live-text); }
.il-ink-text{ fill: var(--c-ink); }
.il-muted-text{ fill: var(--c-muted); }
.il-on-chamber{ fill: var(--c-on-chamber); }
.il-chamber{ fill: var(--c-chamber); }
.il-on-live{ fill: var(--c-on-live, #FFFFFF); }


/* --- channel rail: the structural motif ---------------------------------- */
.rail{display:flex;align-items:center;gap:.7rem;margin-bottom:var(--sp-5)}
.rail .no{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--c-accent);
  letter-spacing:.1em;font-weight:500}
.rail .bar{height:2px;width:28px;background:var(--c-accent);border-radius:2px;flex:none}
.rail .label{font-size:var(--text-sm);color:var(--c-muted)}

/* perforated acoustic panel, used as a quiet ground behind the hero */
.perf-ground{position:relative;isolation:isolate}
.perf-ground::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--c-line) 1px, transparent 1px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 0%, #000 0%, transparent 70%);
  mask-image:radial-gradient(ellipse 70% 60% at 70% 0%, #000 0%, transparent 70%);
  opacity:.85}


/* ==========================================================================
   SHARED PAGE SHELL - defined once, used by every page.
   Previously nav, container and footer were duplicated in three files and
   drifted apart. Nothing below should be redefined in a page <style> block.
   ========================================================================== */

/* --- container: one width, one left edge, on every page ----------------- */
.wrap{ max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-gutter); }
/* Reading column for article pages. MUST be px, not ch: ch resolves against
   each element's own font-size, so a crumb at 0.75rem and a heading at 1rem
   computed different widths from the same class and produced three different
   left edges on one page. */
.reading{ max-width: 720px; margin-left: auto; margin-right: auto; }
/* .wide = the full 1080px container. Card grids, pricing tables and index
   pages use this; only prose articles use .reading. Forcing every page into
   the reading column squeezed three pricing cards into 720px. */
.wide{ max-width: 1080px; }

/* .measure caps a TEXT BLOCK. Never put it on .wrap - .wrap carries
   margin:0 auto, so narrowing it re-centres the block and it drifts away from
   the page's left edge. Apply it to headings, paragraphs and lists instead. */
.measure{ max-width: 66ch; }
.measure-wide{ max-width: 78ch; }

/* --- nav ---------------------------------------------------------------- */
.nav{ background: var(--c-chrome); border-bottom: 1px solid var(--c-chrome-border);
  position: sticky; top: 0; z-index: 30; }
.navbar{ display: flex; align-items: center; gap: var(--sp-4); min-height: 64px; }
.nav a{ text-decoration: none; }
.brand{ display: flex; align-items: center; gap: .55rem; font-family: var(--font-display);
  font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em; color: var(--c-chrome-text);
  margin-right: auto; flex: none; }
.brand svg{ flex: none; }

.navmenu{ display: flex; align-items: center; gap: var(--sp-5); font-size: var(--text-sm); order: 2; }
.themetoggle{ order: 3; }
.navtoggle{ order: 4; }
.navmenu a{ color: var(--c-chrome-dim); }
.navmenu a:hover{ color: var(--c-chrome-text); text-decoration: underline; }
.navcta{ background: var(--c-chamber); color: #fff !important; padding: .5rem 1rem;
  border-radius: var(--r-md); font-weight: 500; display: inline-flex; align-items: center;
  min-height: 40px; }
.navcta:hover{ background: var(--c-chamber-hover); text-decoration: none !important; }

.navtoggle{ display: none; align-items: center; justify-content: center; gap: .45rem;
  width: 40px; height: 40px; min-height: 40px; padding: 0; flex: none;
  background: transparent; border: 1px solid var(--c-chrome-border);
  border-radius: var(--r-md); color: var(--c-chrome-text); cursor: pointer; }
.navtoggle svg{ width: 20px; height: 20px; }
.navtoggle .close{ display: none; }
.navtoggle[aria-expanded="true"] .close{ display: block; }
.navtoggle[aria-expanded="true"] .open{ display: none; }

@media (max-width: 800px){
  .navtoggle{ display: inline-flex; }
  .themetoggle{ order: 2; }
  .navmenu{
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-chrome); border-bottom: 1px solid var(--c-chrome-border);
    padding: var(--sp-3) var(--sp-gutter) var(--sp-5);
    box-shadow: var(--shadow-2);
  }
  .navmenu.open{ display: flex; }
  .navmenu a{ padding: .85rem 0; min-height: 44px; display: flex; align-items: center;
    border-bottom: 1px solid var(--c-chrome-border); font-size: var(--text-base); }
  .navcta{ justify-content: center; margin-top: var(--sp-4); border-bottom: 0 !important; }
  .nav{ position: relative; }
}

/* --- breadcrumb --------------------------------------------------------- */
.crumb{ padding-top: var(--sp-5); font-size: var(--text-xs); color: var(--c-muted); }
.crumb a{ color: var(--c-muted); text-decoration: none; }
.crumb a:hover{ color: var(--c-ink); text-decoration: underline; }
.crumb .sep{ padding: 0 .45rem; opacity: .5; }

/* --- footer ------------------------------------------------------------- */
.sitefooter{ background: var(--c-footer-bg); color: var(--c-footer-text);
  padding: var(--sp-10) 0; font-size: var(--text-sm); margin-top: var(--sp-12); }
.sitefooter a{ color: #fff; }
.sitefooter :focus-visible{ outline-color: #fff; }
.fgrid{ display: flex; gap: var(--sp-8); flex-wrap: wrap; justify-content: space-between; }
.fgrid p{ margin: 0 0 .45rem; }
.fbrand{ color: var(--c-footer-head); font-family: var(--font-display);
  font-weight: 600; font-size: 1.15rem; }

/* --- shared buttons ----------------------------------------------------- */
.btn{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--c-chamber); color: #fff; border: 0; border-radius: var(--r-md);
  padding: .8rem 1.4rem; font: inherit; font-weight: 500; text-decoration: none;
  cursor: pointer; min-height: 46px;
  transition: background var(--dur-fast) var(--ease); }
.btn:hover{ background: var(--c-chamber-hover); }
.btn.ghost{ background: transparent; color: var(--c-accent); border: 1px solid var(--c-line); }
.btn.ghost:hover{ background: var(--c-tint); }

/* --- global overflow guard --------------------------------------------- */
html, body{ overflow-x: hidden; }
img, svg, table, pre{ max-width: 100%; }