/* ==========================================================================
   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;
  --c-footer-status:  #4ADE80;
  --c-footer-status-bg: rgba(74, 222, 128, 0.08);
  --c-footer-status-border: rgba(74, 222, 128, 0.25);
  --c-footer-status-dot: #27C93F;

  /* --- 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;
  --c-live-green:     #15803D;
  --c-live-green-bg:  rgba(39, 201, 63, 0.12);

  /* --- state: warn ------------------------------------------------------ */
  --c-warn:           #F59E0B;
  --c-warn-text:      #92400E;
  --c-warn-surface:   #FFFBEB;
  --c-warn-border:    #FDE68A;

  /* --- 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);

  /* --- window chrome dots ------------------------------------------------ */
  --c-dot-close: #FF5F56;
  --c-dot-min:   #FFBD2E;
  --c-dot-max:   #27C93F;

  /* --- 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 */
}



@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; scrollbar-gutter: stable; }

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);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}

.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); }

/* --- 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); }

/* --- brand mark: exact specifications from Brand Kit --- */
.brand-mark-frame { stroke: var(--c-chamber); fill: none; stroke-width: 2.4; }
.brand-mark-live { fill: var(--c-live); }
.brand-mark-rest { fill: var(--c-rest); }


/* --- 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-muted) 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:.35}


/* ==========================================================================
   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: 880px){
  .navtoggle{ display: inline-flex; }
  .themetoggle{ order: 2; }
}

/* --- 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; }

/* --- sitefooter --------------------------------------------------------- */
.sitefooter{ background: var(--c-footer-bg); color: var(--c-footer-text);
  padding: clamp(3.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3rem); font-size: var(--text-sm); margin-top: clamp(4rem, 8vw, 6rem);
  border-top: 1px solid rgba(255,255,255,0.08); }
.sitefooter a{ color: var(--c-footer-text); text-decoration: none !important; transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); display: inline-block; }
.sitefooter a:hover{ color: #FFFFFF !important; text-decoration: none !important; transform: translateX(2px); }
.sitefooter :focus-visible{ outline-color: #fff; }
.fgrid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
@media (min-width: 600px) { .fgrid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .fgrid{ grid-template-columns: 1.35fr repeat(4, 1fr); gap: var(--sp-5); } }
.fbrand{ display: inline-block; margin: 0 0 1rem; text-decoration: none !important; line-height: 1; }
.fbrand svg{ display: block; flex: none; }
.fbrand:hover{ text-decoration: none !important; opacity: 0.9; transform: none !important; }
.fdesc{ color: var(--c-footer-text); font-size: var(--text-sm); line-height: 1.6; margin: 0; max-width: 32ch; }
.fcol-head{ font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-footer-head); margin: 0 0 var(--sp-4); font-weight: 700; }
.sitefooter ul.flist, .sitefooter ul, .sitefooter ol{ list-style: none !important; list-style-type: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: .65rem; }
.sitefooter li{ margin: 0 !important; padding: 0 !important; list-style: none !important; list-style-type: none !important; display: block !important; }
.sitefooter li::before, .sitefooter li::marker{ content: "" !important; display: none !important; }
.fbottom{ margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-4);
  font-size: var(--text-xs); color: rgba(255,255,255,0.55); }
.fstatus{ display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: var(--text-xs); color: #4ade80; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.25);
  padding: .35rem .75rem; border-radius: var(--r-pill); line-height: 1; }
.fstatus svg{ display: block; flex: none; filter: drop-shadow(0 0 3px #27C93F); }
.fstatus svg circle{ fill: #27C93F !important; }
.fstatus-dot{ width: 7px; height: 7px; min-width: 7px; min-height: 7px; border-radius: 50%; background: #27C93F; display: inline-block; flex: none; box-shadow: 0 0 6px #27C93F; }

/* --- 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%; }