/* ═══════════════════════════════════════════════════════════
   THE MONUMENT — desktop only.
   Studied from ThoughtLab (styles.refero.design/style/82d52a5f…):
   void-black canvas · type so large it is architecture · one
   crimson action per view · no glow, no fills — space is the design.
   Mobile keeps the glass. Desktop becomes the monument.
   August's forever rules still outrank: interactive = pill,
   nothing readable ever drops below the contrast floor.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1000px){

:root{
  --void:#000000;
  --void-2:#000000;
  --glass:transparent;
  --glass-2:transparent;
  --edge:#1c1c1c;
  --edge-hi:#3a3a3a;
  --ink:#ffffff;
  --ink-2:#cccccc;
  --crimson:#fc1c46;
  --r-ctl:14px; --r-pane:18px;
}

/* ═══ THE COVER ═══ the sheet over the whole system, on every page and every
   screen. THE ORB IS THE ONLY WAY THROUGH IT — showing the circuit anywhere
   else would make the looking glass decorative.

   It is declared HERE because this is the last stylesheet every page loads.
   It used to say "absolute black, no atmosphere, no grain", and that one line
   was silently undoing every background change made upstream: the film was
   display:none, so nothing tuned in semble.css could ever have shown. */
.atmos{background:
  radial-gradient(58% 40% at 18% 4%, rgba(0,168,216,.16), transparent 68%),
  radial-gradient(46% 36% at 88% 22%, rgba(92,225,255,.09), transparent 70%),
  radial-gradient(62% 46% at 50% 104%, rgba(255,207,138,.05), transparent 72%),
  linear-gradient(168deg, rgba(134,148,168,.175) 0%, rgba(112,126,148,.135) 46%,
                  rgba(96,110,132,.155) 100%),
  #05070d}
.grain{display:block;opacity:.5;background-size:190px 190px}
body{background:#05070d;font-size:17px}

/* space is the design */
.wrap{max-width:1400px;padding-inline:clamp(48px,9vw,126px)}
/* .wrap ties .wrap--narrow on specificity and this file loads last, so the reading
   measure lost silently on every desktop width. Restated, not changed: the monument's
   side space comes from centring a 790px column, not from padding inside it. */
.wrap--narrow{max-width:790px;padding-inline:22px}
section{padding-top:108px;padding-bottom:108px}

/* ── TYPE AS ARCHITECTURE ── */
h1{font-size:clamp(4rem,11vw,9.5rem);font-weight:700;text-transform:uppercase;
  letter-spacing:-.055em;line-height:.94}
h2{font-size:clamp(2.6rem,5.6vw,4.6rem);font-weight:700;text-transform:uppercase;
  letter-spacing:-.04em;line-height:.98}
h3{font-weight:600}
/* the kicker is a LABEL, not a whisper. #4c4c4c on this ground measured a
   contrast ratio of 2.35 — unreadable, and it was set here, in the last
   stylesheet, so every readable value declared upstream lost silently. */
.kick{color:var(--signal);opacity:.95;letter-spacing:.3em}
p{color:#cccccc}
p.lede{color:#fff}

/* ── WEIGHTLESS SURFACES — hierarchy from scale, not containers ── */
.pane,.lx,.step,.node,.f,.tx,.note,.demo,
.card.d1,.card.d2,.card.d3{
  background:transparent;border-color:#1c1c1c;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.pane::before,.tx::before,.demo::before{display:none}
.lx--lead,.node.here,.card--hero,.s-confirmed,.s-filling,.s-live,.demo.done{
  background:transparent;box-shadow:none}
.s-confirmed{border-color:#3a2a10}
.s-live{border-color:#20343a}
.s-filling{border-color:#1c1c1c}
.s-open{border-color:#1c1c1c}
.s-past{background:transparent;border-color:#141414}

/* glow is banished from resting chrome — state may keep a pulse of light */
.chip i{box-shadow:none}
.tb__fill,.sr__arc,.dfill,.arc{filter:none;box-shadow:none}
.seat--taken{box-shadow:none}
.seat--you{box-shadow:0 0 0 2px var(--gold)}
.tline__p,.tline__n,.tline__n.gold{filter:none}
.mk{filter:none}

/* ── ONE CRIMSON ACTION ── */
.btn{background:#fc1c46;border-color:#fc1c46;color:#fff;
  border-radius:999px;font-weight:600;box-shadow:none}
.btn:hover{background:#ff3358;border-color:#ff3358;transform:none;box-shadow:none}
.btn--gold{background:#fc1c46;border-color:#fc1c46;color:#fff}
.btn--ghost{background:transparent;border:1px solid #3a3a3a;color:#fff}
.btn--ghost:hover{border-color:#fff;color:#fff;background:transparent}

/* ── NAV — a hairline over the void ── */
.nav{background:rgba(0,0,0,.9);border-bottom:1px solid #1c1c1c;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.nav__links a{color:#cccccc}
.nav__links a:hover{color:#fff}
.nav__links a.on{color:#fff}
.brand b{color:#fff}

/* ── THE APP, IN THE MONUMENT ── */
.app{max-width:760px}
.hd h1{font-size:clamp(2.4rem,4.2vw,3.6rem)}
.tabs{background:rgba(0,0,0,.94);border-top:1px solid #1c1c1c;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.tab.on{color:#fff}
.tab.on svg{filter:none}
.pv{color:#cccccc;border-color:#3a2a10}
.card__k{color:#cccccc}
.s-confirmed .card__k,.card.done .card__k{color:var(--gold)}
.fld input,.fld textarea,.ccstart input{
  background:transparent;border:0;border-bottom:1px solid #3a3a3a;
  border-radius:0;padding-left:2px;padding-right:2px}
.fld input:focus,.fld textarea:focus,.ccstart input:focus{
  border-color:#fff;outline:none}
.guide h3{text-transform:none;letter-spacing:-.02em}
.stat,.mot__c,.cd div{background:transparent;border-color:#1c1c1c}
.mot__big{background:transparent;border-color:#3a2a10}

/* ── THE CC ROOM — the monument at its purest ── */
.cc{max-width:820px}
.cc .hd h1{font-size:clamp(3rem,6.5vw,5.5rem);text-transform:uppercase;
  letter-spacing:-.05em;line-height:.94}
.cc .card{background:transparent;border-color:#1c1c1c}
.mic{background:#fc1c46;border-color:#fc1c46}
.mic svg{stroke:#fff}
.mic.off{background:transparent;border-color:#3a3a3a}
.mic.off svg{stroke:#cccccc}
.folk{background:transparent;border-color:#1c1c1c}
.folk.talk .folk__a::after{border-color:var(--gold)}
.reacts button{border-color:#1c1c1c}
.bdg{border-color:#1c1c1c;color:#cccccc}
.share{border-color:#1c1c1c}

/* the marketing pages breathe wider */
.grid2{gap:1px 48px}
.lex{gap:1px 48px}
.notes{gap:1px 48px}

/* ═══ THE APP, REDEFINED FOR THE BIG DISPLAY ═══
   The thumb furniture goes. Navigation becomes a left rail; content
   flows in two columns; the lead card of each screen spans them. */
body.is-app{padding-bottom:60px;
  /* the app goes monochrome on the monument: white where cyan was.
     Crimson is the one action; gold is the one confirmation. */
  --signal:#ffffff; --signal-2:#9a9a9a; --signal-3:#5a5a5a}
body.is-app .tabs{left:0;right:auto;top:var(--nav-h);bottom:0;width:228px;
  flex-direction:column;justify-content:flex-start;gap:6px;
  padding:26px 16px;border-top:0;border-right:1px solid #1c1c1c;
  background:#000}
body.is-app .tab{flex:0 0 auto;width:100%;min-height:54px;flex-direction:row;
  justify-content:flex-start;gap:14px;padding:0 16px;
  font-size:13px;letter-spacing:.06em;border-radius:999px}
body.is-app .tab.on{background:#141414;color:#fff}
body.is-app .tab.on svg{filter:none}
body.is-app .app{max-width:none;margin:0;padding:0 clamp(40px,5vw,90px) 60px 268px}
body.is-app .hd{max-width:1200px;padding-top:34px}
body.is-app .hd h1{font-size:clamp(2.6rem,3.8vw,3.8rem)}
body.is-app .screen.on{display:block;max-width:1200px;columns:2;column-gap:28px}
body.is-app .screen.on > *{break-inside:avoid;margin-bottom:28px}
body.is-app .screen.on > .card.d3,body.is-app .screen.on > .guide,
body.is-app .screen.on > .card--hero,body.is-app .screen.on > .s-confirmed,
body.is-app .screen.on > .back,body.is-app .screen.on > .kick{column-span:all}
body.is-app .card{padding:26px}
body.is-app .toast{left:auto;right:40px;bottom:40px;max-width:420px}
body.is-app .modeseg{margin-top:18px}
body.is-app .seg button.on{color:#fff;border-color:#5a5a5a;background:#141414}
body.is-app .card__k{color:#8a8a8a}
body.is-app .s-confirmed .card__k,body.is-app .card.done .card__k{color:var(--gold)}
body.is-app .dotlive{background:#fff;box-shadow:none}
body.is-app .s-live{border-color:#2c2c2c}
body.is-app .stp.done{background:#0f0f0f;border-color:#2c2c2c}
body.is-app .stp.done .stp__box{background:#fff;border-color:#fff}
body.is-app .tb__fill{background:#fff;box-shadow:none}
body.is-app .card.done .tb__fill{background:var(--gold)}
body.is-app .sr__arc{stroke:#fff}
body.is-app .sr__ring.full .sr__arc{stroke:var(--gold)}
body.is-app .seat--taken{background:#e8e8e8;color:#000}
body.is-app .av{background:#e8e8e8;color:#000}
body.is-app .led__i.out{color:#ccc;background:#101010;border-color:#2c2c2c}
body.is-app .open{color:#fff}

}