/* =========================================================
   StageDeck — shared theme
   A live-show / lighting-console aesthetic:
   dark house, warm tungsten spotlight, magenta gel accent.
   ========================================================= */

:root{
  /* House (background) */
  --house:      #0B0D12;
  --house-2:    #0F1219;
  --booth:      #161A23;
  --booth-2:    #1D222D;

  /* Lines */
  --line:       #272D38;
  --line-2:     #353C4A;

  /* Ink (text) */
  --ink:        #F4F1EA;
  --ink-dim:    #A7AEBC;
  --ink-faint:  #6E7686;

  /* Stage lights */
  --spot:       #FFB23E;   /* tungsten spotlight — primary accent */
  --spot-hot:   #FFCE7A;   /* hot centre of the beam */
  --gel:        #E5557C;   /* magenta gel — secondary accent */
  --gel-deep:   #B8324F;

  /* Type */
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Layout */
  --maxw: 1160px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;
  --radius-sm: 9px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--house);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Ambient house glow — faint warm wash from the top, like the stage wash */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(60rem 40rem at 78% -8%, rgba(255,178,62,.10), transparent 60%),
    radial-gradient(50rem 36rem at -5% 8%, rgba(229,85,124,.07), transparent 55%);
}

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; display:block; }

::selection{ background:var(--spot); color:#1a1205; }

:focus-visible{
  outline:2px solid var(--spot);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Layout helpers ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
  z-index:1;
}

.section{ padding-block:clamp(4rem, 9vw, 7.5rem); position:relative; z-index:1; }
.section--tight{ padding-block:clamp(3rem, 6vw, 5rem); }

/* Eyebrow / cue label */
.eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--spot);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:"";
  width:1.6rem;
  height:1px;
  background:var(--spot);
  display:inline-block;
}

/* Headings */
h1,h2,h3{ font-family:var(--display); font-weight:800; line-height:1.02; letter-spacing:-.02em; margin:0; }
.h-section{ font-size:clamp(2rem, 1.2rem + 3.4vw, 3.25rem); }
.lead{ color:var(--ink-dim); font-size:clamp(1.05rem,1rem + .4vw,1.25rem); max-width:42ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-family:var(--mono);
  font-weight:500;
  font-size:.92rem;
  letter-spacing:.02em;
  padding:.85rem 1.5rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.btn:active{ transform:translateY(1px); }

.btn--spot{
  background:linear-gradient(180deg, var(--spot-hot), var(--spot));
  color:#241803;
  box-shadow:0 0 0 0 rgba(255,178,62,.5);
}
.btn--spot:hover{ box-shadow:0 10px 34px -12px rgba(255,178,62,.8); transform:translateY(-2px); }

.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-2);
}
.btn--ghost:hover{ border-color:var(--spot); color:var(--spot); }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--house) 78%, transparent);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--display);
  font-weight:800;
  font-size:1.18rem;
  letter-spacing:-.02em;
}
.brand__lamp{
  width:11px; height:11px; border-radius:50%;
  background:var(--spot);
  box-shadow:0 0 0 3px rgba(255,178,62,.18), 0 0 16px 2px rgba(255,178,62,.7);
  flex:none;
}
.brand b{ color:var(--ink); }
.brand span{ color:var(--spot); }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav__links{ display:flex; gap:1.8rem; list-style:none; margin:0; padding:0; }
.nav__links a{
  font-size:.95rem;
  color:var(--ink-dim);
  position:relative;
  padding-block:.3rem;
  transition:color .2s;
}
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--ink); }
.nav__links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--spot);
}

.nav__toggle{
  display:none;
  background:transparent; border:1px solid var(--line-2);
  color:var(--ink); width:42px; height:42px; border-radius:10px;
  cursor:pointer; align-items:center; justify-content:center;
}
.nav__toggle svg{ width:20px; height:20px; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-block:clamp(3.5rem,7vw,6.5rem) clamp(4rem,8vw,7rem); overflow:hidden; }

/* the followspot beam + pool of light behind the wordmark */
.hero__beam{
  position:absolute;
  top:-12%; left:50%;
  width:120vw; height:80rem;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(38rem 30rem at 50% 22%, rgba(255,178,62,.20), transparent 62%),
    conic-gradient(from 180deg at 50% -6%, transparent 42%, rgba(255,206,122,.12) 50%, transparent 58%);
  filter:blur(2px);
}

.hero__grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}

.hero__marquee{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(3.1rem, 1.5rem + 9vw, 7.5rem);
  line-height:.92;
  letter-spacing:-.03em;
  margin:.4rem 0 1.3rem;
}
.hero__marquee .lit{
  background:linear-gradient(180deg,#fff5e2 0%, var(--spot-hot) 38%, var(--spot) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(255,178,62,.25);
}
.hero__sub{ color:var(--ink-dim); font-size:clamp(1.08rem,1rem+.5vw,1.3rem); max-width:38ch; margin:0 0 2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:1.6rem;
  margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.8rem; color:var(--ink-faint);
  letter-spacing:.04em;
}
.hero__meta b{ color:var(--ink); font-weight:500; }

/* ---------- Live console (hero signature) ---------- */
.console{
  background:linear-gradient(180deg, var(--booth), var(--house-2));
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.console__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1.1rem;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.015);
}
.console__title{ font-family:var(--mono); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); }
.console__live{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  color:var(--gel); display:inline-flex; align-items:center; gap:.45rem;
}
.console__live i{ width:7px;height:7px;border-radius:50%; background:var(--gel); box-shadow:0 0 10px var(--gel); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.cuelist{ list-style:none; margin:0; padding:.5rem; display:flex; flex-direction:column; gap:.2rem; }
.cue{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:.9rem;
  padding:.7rem .85rem;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:background .2s, border-color .2s;
}
.cue__q{ font-family:var(--mono); font-size:.8rem; color:var(--ink-faint); width:2.4rem; }
.cue__name{ font-size:.96rem; color:var(--ink-dim); }
.cue__time{ font-family:var(--mono); font-size:.78rem; color:var(--ink-faint); }
.cue.is-done .cue__name{ color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--line-2); }
.cue.is-done .cue__q{ color:var(--gel-deep); }
.cue.is-live{
  background:linear-gradient(90deg, rgba(255,178,62,.16), rgba(255,178,62,.03));
  border-color:rgba(255,178,62,.4);
}
.cue.is-live .cue__name{ color:var(--ink); }
.cue.is-live .cue__q{ color:var(--spot); }
.cue.is-next .cue__q{ color:var(--ink-dim); }

.console__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.1rem; border-top:1px solid var(--line);
  background:rgba(0,0,0,.18);
}
.console__next{ font-family:var(--mono); font-size:.76rem; color:var(--ink-dim); letter-spacing:.04em; }
.console__next b{ color:var(--ink); font-weight:500; }
.go{
  font-family:var(--mono); font-weight:700; letter-spacing:.14em;
  font-size:1rem; padding:.8rem 1.9rem; border:none; cursor:pointer;
  border-radius:10px; color:#241803;
  background:radial-gradient(120% 120% at 50% 0%, var(--spot-hot), var(--spot));
  box-shadow:0 6px 0 0 #b8761f, 0 14px 30px -10px rgba(255,178,62,.7);
  transition:transform .08s var(--ease), box-shadow .08s;
}
.go:hover{ filter:brightness(1.05); }
.go:active{ transform:translateY(4px); box-shadow:0 2px 0 0 #b8761f, 0 8px 18px -10px rgba(255,178,62,.6); }

/* ---------- Strip of stats ---------- */
.strip{ border-block:1px solid var(--line); background:var(--house-2); }
.strip__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:clamp(1.5rem,3vw,2.4rem) var(--gutter); border-left:1px solid var(--line); }
.stat:first-child{ border-left:none; }
.stat__n{ font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,1rem+2.4vw,2.8rem); line-height:1; }
.stat__n span{ color:var(--spot); }
.stat__l{ font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:.6rem; }

/* ---------- Features list ---------- */
.features__head{ max-width:54ch; margin-bottom:clamp(2.4rem,5vw,3.6rem); }
.sheet{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(180deg, var(--booth) 0%, var(--house-2) 100%);
}
.sheet__row{
  display:grid;
  grid-template-columns:5.5rem 1fr;
  gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.6rem,3vw,2.3rem) clamp(1.4rem,3vw,2.4rem);
  border-top:1px solid var(--line);
  transition:background .25s var(--ease);
}
.sheet__row:first-child{ border-top:none; }
.sheet__row:hover{ background:rgba(255,178,62,.04); }
.sheet__q{
  font-family:var(--mono); font-weight:700;
  font-size:1.05rem; color:var(--spot);
  letter-spacing:.04em;
  padding-top:.15rem;
}
.sheet__q small{ display:block; font-weight:400; font-size:.7rem; color:var(--ink-faint); letter-spacing:.1em; margin-top:.5rem; }
.sheet__body h3{ font-size:clamp(1.25rem,1rem+1vw,1.6rem); margin-bottom:.55rem; }
.sheet__body p{ color:var(--ink-dim); margin:0; max-width:60ch; }

/* ---------- Split / "how a show runs" ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.panel{
  background:linear-gradient(180deg,var(--booth),var(--house-2));
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2rem);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9);
}
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{
  display:flex; gap:1rem; padding:1rem 0; border-top:1px dashed var(--line);
}
.timeline li:first-child{ border-top:none; }
.timeline__t{ font-family:var(--mono); font-size:.8rem; color:var(--spot); width:4.5rem; flex:none; padding-top:.15rem; }
.timeline__d strong{ display:block; font-family:var(--display); font-size:1.05rem; }
.timeline__d span{ color:var(--ink-dim); font-size:.95rem; }

/* ---------- CTA band ---------- */
.band{ position:relative; overflow:hidden; border-top:1px solid var(--line); }
.band__glow{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(40rem 24rem at 50% 120%, rgba(255,178,62,.22), transparent 60%); }
.band .wrap{ text-align:center; }
.band h2{ font-size:clamp(2rem,1.2rem+3.4vw,3.5rem); margin-bottom:1rem; }
.band p{ color:var(--ink-dim); max-width:48ch; margin:0 auto 2rem; }
.band__cta{ display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--line); background:var(--house-2); padding-block:clamp(2.5rem,5vw,3.5rem); }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2rem; }
.foot__about{ color:var(--ink-dim); max-width:34ch; margin:1rem 0 0; font-size:.95rem; }
.foot__col h4{ font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 1rem; }
.foot__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.foot__col a{ color:var(--ink-dim); font-size:.95rem; }
.foot__col a:hover{ color:var(--spot); }
.foot__bar{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.4rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.78rem; color:var(--ink-faint);
}

/* ---------- Page header (sub pages) ---------- */
.phead{ position:relative; padding-block:clamp(3.5rem,7vw,6rem) clamp(2.5rem,5vw,4rem); overflow:hidden; }
.phead__beam{ position:absolute; top:-30%; left:60%; width:60rem;height:50rem; transform:translateX(-50%);
  background:radial-gradient(28rem 22rem at 50% 30%, rgba(255,178,62,.16), transparent 62%); pointer-events:none; z-index:0; }
.phead h1{ font-size:clamp(2.4rem,1.5rem+4vw,4.5rem); position:relative; z-index:1; }
.phead .lead{ position:relative; z-index:1; margin-top:1.1rem; }

/* ---------- Contact ---------- */
.contact__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.form{
  background:linear-gradient(180deg,var(--booth),var(--house-2));
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  padding:clamp(1.5rem,3.5vw,2.4rem);
}
.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:.5rem; }
.field input, .field textarea, .field select{
  width:100%; background:var(--house); border:1px solid var(--line-2); color:var(--ink);
  border-radius:10px; padding:.85rem 1rem; font:inherit; font-size:1rem;
  transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--spot); box-shadow:0 0 0 3px rgba(255,178,62,.16);
}
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form__note{ font-size:.85rem; color:var(--ink-faint); margin-top:1rem; }
.form__ok{
  display:none; align-items:flex-start; gap:.8rem;
  background:rgba(255,178,62,.08); border:1px solid rgba(255,178,62,.4);
  border-radius:10px; padding:1rem 1.1rem; color:var(--ink); margin-top:1.2rem; font-size:.95rem;
}
.form__ok.show{ display:flex; }
.form__ok b{ color:var(--spot); }

.contact__aside .ic{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.4rem; margin-bottom:1rem; background:var(--house-2);
}
.contact__aside h3{ font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--spot); font-weight:500; margin-bottom:.5rem; }
.contact__aside p{ margin:0; color:var(--ink-dim); }
.contact__aside a{ color:var(--ink); }
.contact__aside a:hover{ color:var(--spot); }

/* ---------- Legal / privacy ---------- */
.legal{ display:grid; grid-template-columns:240px 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.legal__toc{ position:sticky; top:90px; }
.legal__toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; border-left:1px solid var(--line); }
.legal__toc a{ display:block; padding:.2rem 0 .2rem 1rem; margin-left:-1px; border-left:2px solid transparent; color:var(--ink-dim); font-size:.9rem; }
.legal__toc a:hover{ color:var(--ink); border-left-color:var(--spot); }
.legal__body h2{ font-family:var(--display); font-size:clamp(1.4rem,1rem+1.4vw,1.9rem); margin:2.6rem 0 .9rem; scroll-margin-top:90px; }
.legal__body h2:first-child{ margin-top:0; }
.legal__body p, .legal__body li{ color:var(--ink-dim); }
.legal__body p{ margin:0 0 1rem; max-width:70ch; }
.legal__body ul{ margin:0 0 1.2rem; padding-left:1.2rem; display:flex; flex-direction:column; gap:.5rem; max-width:70ch; }
.legal__updated{ font-family:var(--mono); font-size:.8rem; color:var(--ink-faint); margin-bottom:2rem; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .console{ order:2; }
  .split{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
  .legal{ grid-template-columns:1fr; }
  .legal__toc{ position:static; }
  .legal__toc ul{ flex-direction:row; flex-wrap:wrap; border-left:none; gap:.4rem; }
  .legal__toc a{ border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem; margin:0; }
  .strip__grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:none; }
  .stat{ border-top:1px solid var(--line); }
  .stat:nth-child(-n+2){ border-top:none; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__about{ grid-column:1 / -1; }

  .nav__links{
    position:fixed; inset:68px 0 auto 0;
    flex-direction:column; gap:0;
    background:var(--house); border-bottom:1px solid var(--line);
    padding:.5rem var(--gutter) 1.2rem;
    transform:translateY(-130%);
    transition:transform .32s var(--ease);
    z-index:40;
  }
  .nav__links.open{ transform:translateY(0); }
  .nav__links li{ border-top:1px solid var(--line); }
  .nav__links a{ display:block; padding:1rem 0; font-size:1.05rem; }
  .nav__links a[aria-current="page"]::after{ display:none; }
  .nav__toggle{ display:inline-flex; }
}

@media (max-width:560px){
  .field--row{ grid-template-columns:1fr; }
  .sheet__row{ grid-template-columns:1fr; gap:.6rem; }
  .sheet__q small{ display:inline; margin-left:.6rem; }
  .strip__grid{ grid-template-columns:1fr 1fr; }
  .hero__meta{ gap:1rem 1.4rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}