/* ============================================================
   UNDERSTUDY — backstage / marquee design system
   Palette sampled from a theatre work-light on a dark stage.
   ============================================================ */

:root{
  --ink:     #0B0A09;  /* deep warm black — backstage */
  --ink-2:   #121010;  /* raised panel */
  --ink-3:   #211D1B;  /* hairline / border */
  --bone:    #F0EAE0;  /* warm off-white type */
  --muted:   #9C938A;  /* secondary type */
  --amber:   #E8B04B;  /* the work light */
  --amber-d: #C8902F;
  --crimson: #8E1D24;  /* the curtain */

  --display: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --serif:   "Instrument Serif", Georgia, serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 56px);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{ color:var(--amber); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--bone); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:var(--ink); padding:12px 18px;
  font-weight:700; border-radius:0 0 6px 0;
}
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }

/* ---------- type ---------- */
.kicker{
  font-family:var(--body);
  font-size:.72rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber);
  margin:0 0 20px;
  display:flex; align-items:center; gap:12px;
}
.kicker::before{
  content:""; width:28px; height:2px; background:var(--amber); flex:none;
}

h1,h2,h3{ font-family:var(--display); font-weight:900; letter-spacing:.005em; }

h2.big{
  font-size:clamp(1.95rem, 4.6vw, 3.35rem);
  line-height:1.04;
  text-transform:uppercase;
  margin:0 0 22px;
}

.lede{
  font-size:clamp(1.05rem, 2.1vw, 1.3rem);
  color:var(--muted);
  max-width:62ch;
  margin:0 0 34px;
}

em.stage{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--amber);
  text-transform:none;
  letter-spacing:0;
}

/* ---------- marquee bulb rule ---------- */
.bulbs{
  display:flex; gap:14px; align-items:center;
  margin:0 0 30px;
}
.bulbs span{
  width:7px; height:7px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 10px 1px rgba(232,176,75,.55);
}
.bulbs span:nth-child(2){ opacity:.55; }
.bulbs span:nth-child(3){ opacity:.3; }
.bulbs span:nth-child(4){ opacity:.16; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  /* opaque by default: below 901px there is no backdrop blur, and a
     translucent bar lets the page scroll straight through it */
  background:var(--ink);
  border-bottom:1px solid var(--ink-3);
}
@media (min-width:901px){
  .nav{
    background:rgba(11,10,9,.86);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:68px; gap:14px;
}
@media (max-width:560px){
  .nav .wrap{ height:60px; }
}
.brand{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(.98rem, 3.6vw, 1.32rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone);
  text-decoration:none;
  display:flex; align-items:center; gap:11px;
}
.brand:hover{ color:var(--bone); }
.brand i{
  width:9px; height:9px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 12px 2px rgba(232,176,75,.6);
  flex:none;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--body); font-weight:700; font-size:.95rem;
  letter-spacing:.02em;
  padding:15px 28px;
  border-radius:3px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn-primary{ background:var(--amber); color:var(--ink); }
.btn-primary:hover{ background:#F4C468; color:var(--ink); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--ink-3); color:var(--bone); background:transparent; }
.btn-ghost:hover{ border-color:var(--amber); color:var(--bone); transform:translateY(-2px); }
.btn-sm{ padding:11px 20px; font-size:.86rem; }
@media (max-width:560px){
  .btn-sm{ padding:10px 14px; font-size:.78rem; white-space:nowrap; }
  .brand i{ width:7px; height:7px; }
}

@media (prefers-reduced-motion: reduce){
  .btn:hover{ transform:none; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:clamp(70px, 13vh, 130px) 0 clamp(60px, 10vh, 110px);
  overflow:hidden;
}
/* video stage plate */
.hero-media{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-vid{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.8;
  filter:saturate(.85) contrast(1.05);
}
/* scrim keeps headline contrast well above 4.5:1 over any frame */
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(11,10,9,.92) 42%, rgba(11,10,9,.55) 72%, rgba(11,10,9,.72) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 34%, transparent 66%, rgba(11,10,9,.85) 100%);
}
@media (prefers-reduced-motion: reduce){
  .hero-vid{ display:none; }
}

/* the work light */
.hero::before{
  content:"";
  z-index:1;
  position:absolute; inset:-40% 0 auto 50%;
  width:min(1100px, 150vw); aspect-ratio:1/1;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 35%,
      rgba(232,176,75,.17) 0%,
      rgba(232,176,75,.06) 32%,
      transparent 62%);
  pointer-events:none;
}
.hero .wrap{ position:relative; z-index:2; }

h1.marquee{
  font-size:clamp(2.35rem, 6.6vw, 4.85rem);
  line-height:.98;
  text-transform:uppercase;
  letter-spacing:.005em;
  margin:0 0 26px;
  max-width:none;
}
h1.marquee .l1,
h1.marquee .l2{ display:block; white-space:nowrap; }
@media (max-width:560px){
  h1.marquee .l1,
  h1.marquee .l2{ white-space:normal; }
}
h1.marquee .l2{ color:var(--amber); }

.hero-sub{
  font-size:clamp(1.08rem, 2.2vw, 1.38rem);
  color:var(--muted);
  max-width:56ch;
  margin:0 0 38px;
}
.hero-sub strong{ color:var(--bone); font-weight:600; }

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

.hero-note{
  margin:26px 0 0;
  font-size:.86rem;
  color:var(--muted);
}

/* ---------- section frame ---------- */
section{ padding:clamp(64px, 9vw, 108px) 0; position:relative; }
.sec-line{ border-top:1px solid var(--ink-3); }

/* ---------- the handoff list ---------- */
.handoff{
  list-style:none; padding:0; margin:0;
  display:grid; gap:1px;
  background:var(--ink-3);
  border:1px solid var(--ink-3);
  border-radius:4px;
  overflow:hidden;
}
.handoff li{
  background:var(--ink);
  padding:22px 24px;
  display:flex; align-items:baseline; gap:18px;
  font-size:1.02rem;
}
.handoff li b{
  font-family:var(--display);
  font-weight:900;
  font-size:.95rem;
  letter-spacing:.14em;
  color:var(--amber);
  flex:none;
  min-width:3.2ch;
}
.handoff li span{ color:var(--muted); }
.handoff li span em{ color:var(--bone); font-style:normal; font-weight:600; }

/* ---------- tracks ---------- */
.tracks{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(275px, 1fr));
  margin-top:44px;
}
.track{
  background:var(--ink-2);
  border:1px solid var(--ink-3);
  border-radius:5px;
  padding:32px 28px 30px;
  position:relative;
  overflow:hidden;
}
.track::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--amber), transparent 70%);
}
.track h3{
  font-size:1.45rem;
  text-transform:uppercase;
  margin:0 0 6px;
  line-height:1.05;
}
@media (min-width:860px){
  .track h3{ min-height:2.1em; }
}
.track .who{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); font-weight:700; margin:0 0 18px;
}
.track p{ color:var(--muted); margin:0 0 18px; font-size:.98rem; }
.track ul{ margin:0; padding:0 0 0 18px; color:var(--muted); font-size:.95rem; }
.track ul li{ margin-bottom:8px; }
.track ul li::marker{ color:var(--crimson); }

/* ---------- the ladder ---------- */
.rungs{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
  margin-top:44px;
  counter-reset:rung;
}
.rung{
  border:1px solid var(--ink-3);
  border-radius:5px;
  padding:30px 26px;
  background:var(--ink);
}
.rung .num{
  font-family:var(--display);
  font-weight:900;
  font-size:2.6rem; line-height:1;
  /* 3.24:1 on --ink — decorative, but still clears the WCAG
     large-text floor rather than relying on aria-hidden */
  color:#67615B;
  display:block; margin-bottom:14px;
}
.rung h3{ font-size:1.3rem; text-transform:uppercase; margin:0 0 10px; }
.rung p{ color:var(--muted); margin:0; font-size:.97rem; }

/* ---------- proof ---------- */
.proof{ background:var(--ink-2); }
.proof-grid{
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  margin-top:40px;
}
.pf{
  border-left:2px solid var(--crimson);
  padding:4px 0 4px 22px;
}
.pf b{
  display:block;
  font-family:var(--display); font-weight:900;
  font-size:1.65rem; line-height:1.1;
  color:var(--amber);
  margin-bottom:9px;
  text-transform:uppercase;
}
.pf span{ color:var(--muted); font-size:.96rem; }

.operator{
  margin-top:52px;
  padding:28px 30px;
  border:1px solid var(--ink-3);
  border-radius:5px;
  background:var(--ink);
  max-width:74ch;
}
.operator p{ margin:0; color:var(--muted); font-size:1.02rem; }
.operator p strong{ color:var(--bone); font-weight:600; }
.operator .sig{
  margin-top:16px; font-size:.84rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber); font-weight:700;
}

/* ---------- waitlist form ---------- */
.join{ position:relative; overflow:hidden; }
.join::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:100%;
  background:
    repeating-linear-gradient(90deg,
      rgba(142,29,36,.10) 0 2px,
      transparent 2px 26px);
  pointer-events:none;
}
.join .wrap{ position:relative; }

.form-card{
  background:var(--ink-2);
  border:1px solid var(--ink-3);
  border-radius:6px;
  padding:clamp(26px, 4vw, 44px);
  max-width:700px;
  margin-top:38px;
}

.form-card label{
  display:block;
  font-size:.79rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--bone);
  margin:0 0 8px;
}
.form-card input[type=text],
.form-card input[type=email],
.form-card select,
.form-card textarea{
  width:100%;
  background:var(--ink);
  border:1px solid var(--ink-3);
  border-radius:3px;
  color:var(--bone);
  font-family:var(--body);
  font-size:1rem;
  padding:13px 15px;
  margin:0 0 22px;
}
.form-card textarea{ min-height:112px; resize:vertical; }
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{ border-color:var(--amber); outline:none; }
.form-card input::placeholder,
.form-card textarea::placeholder{ color:#6E6660; }

.form-card select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--amber) 50%),
                   linear-gradient(135deg,var(--amber) 50%,transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 14px) center;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.form-card option{ background:var(--ink); color:var(--bone); }

.row2{ display:grid; gap:0 20px; grid-template-columns:1fr 1fr; }
@media (max-width:620px){ .row2{ grid-template-columns:1fr; } }

.form-card button{ width:100%; }

.hp{ position:absolute; left:-9999px; }

.fine{
  font-size:.82rem; color:var(--muted);
  margin:18px 0 0; line-height:1.55;
}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--ink-3);
  padding:44px 0 56px;
  font-size:.88rem;
  color:var(--muted);
}
footer .wrap{
  display:flex; flex-wrap:wrap; gap:16px 30px;
  align-items:center; justify-content:space-between;
}
footer .fbrand{
  font-family:var(--display);
  font-weight:900;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone); font-size:1rem;
}
footer nav{ display:flex; gap:22px; flex-wrap:wrap; }

/* ---------- reveals: TRANSFORM ONLY (no opacity — keeps text
   readable if JS never runs, and avoids Lighthouse contrast
   false-positives on faded text) ---------- */
html.js .reveal{
  transform:translateY(22px);
  transition:transform .62s cubic-bezier(.22,.7,.28,1);
  will-change:transform;
}
html.js .reveal.in{ transform:none; }
html.js .reveal.d1{ transition-delay:.07s; }
html.js .reveal.d2{ transition-delay:.14s; }
html.js .reveal.d3{ transition-delay:.21s; }

@media (prefers-reduced-motion: reduce){
  html.js .reveal{ transform:none; transition:none; }
}

/* ---------- inner pages ---------- */
.doc{ padding:60px 0 90px; }
.doc h1{ font-size:clamp(2rem,6vw,3.2rem); text-transform:uppercase; margin:0 0 10px; }
.doc h2{ font-family:var(--display); font-weight:900; font-size:1.35rem; text-transform:uppercase;
         margin:38px 0 12px; color:var(--amber); }
.doc p, .doc li{ color:var(--muted); }
.doc strong{ color:var(--bone); }

/* ============================================================
   WATCH IT WORK — the live demo
   ============================================================ */

.watch{ position:relative; overflow:hidden; }

.demo{
  margin-top:42px;
  border:1px solid var(--ink-3);
  border-radius:6px;
  background:var(--ink-2);
  overflow:hidden;
}

/* --- tabs --- */
.demo-tabs{
  display:flex; flex-wrap:wrap;
  border-bottom:1px solid var(--ink-3);
  background:rgba(0,0,0,.25);
}
.demo-tab{
  appearance:none; border:0; background:transparent;
  font-family:var(--body); font-size:.86rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
  padding:16px 22px;
  cursor:pointer;
  position:relative;
  transition:color .18s ease;
  white-space:nowrap;
}
.demo-tab::after{
  content:""; position:absolute; left:22px; right:22px; bottom:-1px;
  height:2px; background:var(--amber);
  transform:scaleX(0); transform-origin:left;
  transition:transform .26s cubic-bezier(.22,.7,.28,1);
}
.demo-tab:hover{ color:var(--bone); }
.demo-tab.is-on{ color:var(--bone); }
.demo-tab.is-on::after{ transform:scaleX(1); }

/* --- progress --- */
.demo-bar{ height:2px; background:var(--ink-3); }
.demo-fill{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--crimson), var(--amber));
  box-shadow:0 0 12px rgba(232,176,75,.5);
}

/* --- body --- */
.demo-body{
  display:grid;
  grid-template-columns:1.25fr .95fr;
  gap:0;
  min-height:330px;
}
@media (max-width:820px){
  .demo-body{ grid-template-columns:1fr; }
}

/* --- the log --- */
.demo-log{
  list-style:none; margin:0; padding:26px 26px 26px 28px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.82rem; line-height:1.5;
  border-right:1px solid var(--ink-3);
}
@media (max-width:820px){
  .demo-log{ border-right:0; border-bottom:1px solid var(--ink-3); }
}
.demo-log li{
  display:grid;
  grid-template-columns:3.4em 5.9em 1fr;
  gap:10px;
  padding:7px 0;
  /* transform-only entry: readable even if the script never runs */
  transform:translateX(-10px);
  animation:logIn .34s cubic-bezier(.22,.7,.28,1) forwards;
}
@media (prefers-reduced-motion: reduce){
  .demo-log li{ transform:none; animation:none; }
}
@keyframes logIn{ to{ transform:none; } }

.demo-log .t{ color:#6E6660; }
.demo-log .tag{
  font-weight:700; letter-spacing:.04em; font-size:.72rem;
  align-self:center; text-align:center;
  border-radius:2px; padding:3px 0;
}
.tag-trigger{ color:var(--crimson); border:1px solid rgba(142,29,36,.55); }
.tag-think  { color:var(--amber);   border:1px solid rgba(232,176,75,.35); }
.tag-act    { color:#7FB069;        border:1px solid rgba(127,176,105,.4); }
.demo-log .txt{ color:var(--muted); }
.demo-log .txt b{ color:var(--bone); font-weight:600; }

.demo-log li.is-live .txt::after{
  content:"▌"; color:var(--amber);
  animation:blink .9s steps(2,start) infinite;
  margin-left:3px;
}
@keyframes blink{ to{ visibility:hidden; } }

/* --- the drafted output --- */
.demo-out{ padding:26px; display:flex; flex-direction:column; gap:14px; }
.demo-out-head{
  display:flex; align-items:center; gap:9px;
  font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.demo-out-head .dot{
  width:7px; height:7px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 10px 1px rgba(232,176,75,.6); flex:none;
}
.demo-out-body{
  flex:1;
  background:var(--ink);
  border:1px solid var(--ink-3);
  border-radius:10px;
  padding:16px 18px;
  color:var(--bone);
  font-size:.95rem; line-height:1.55;
  white-space:pre-wrap;
  min-height:96px;
}
.demo-out-body .cur{ color:var(--amber); }

/* --- foot --- */
.demo-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--ink-3);
  padding:16px 26px;
  background:rgba(0,0,0,.25);
}
.demo-result{
  margin:0; font-size:.95rem; color:var(--muted);
  min-height:1.5em;
}
.demo-result b{ color:var(--amber); font-weight:600; }
.demo-replay{
  appearance:none; cursor:pointer;
  background:transparent; color:var(--bone);
  border:1px solid var(--ink-3); border-radius:3px;
  font-family:var(--body); font-size:.82rem; font-weight:700;
  letter-spacing:.02em; padding:10px 18px;
  transition:border-color .18s ease, transform .15s ease;
  white-space:nowrap;
}
.demo-replay:hover{ border-color:var(--amber); transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .demo-replay:hover{ transform:none; } }

.demo-note{
  margin:20px 0 0; font-size:.86rem; color:var(--muted); max-width:60ch;
}

/* ============================================================
   SCROLL-DRIVEN STAGE LIGHT — the work light follows the reader
   ============================================================ */
.stagelight{
  position:fixed; z-index:0; pointer-events:none;
  left:50%; top:0;
  width:min(1500px, 190vw); aspect-ratio:1/1;
  margin-left:calc(min(1500px, 190vw) / -2);
  margin-top:calc(min(1500px, 190vw) / -2);
  background:radial-gradient(circle at 50% 50%,
      rgba(232,176,75,.085) 0%,
      rgba(232,176,75,.028) 30%,
      transparent 58%);
  will-change:transform;
}
html.js main{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ .stagelight{ display:none; } }

/* ============================================================
   LIVE SYSTEMS PANEL — real pings, shown as they land
   ============================================================ */
.live{
  margin-top:46px;
  border:1px solid var(--ink-3);
  border-radius:6px;
  background:var(--ink);
  overflow:hidden;
  max-width:760px;
}
.live-head{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:16px 22px;
  border-bottom:1px solid var(--ink-3);
  background:rgba(0,0,0,.25);
}
.live-pulse{
  width:8px; height:8px; border-radius:50%; background:#7FB069;
  box-shadow:0 0 0 0 rgba(127,176,105,.55);
  animation:pulse 2.4s ease-out infinite; flex:none;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(127,176,105,0); }
  100%{ box-shadow:0 0 0 0 rgba(127,176,105,0); }
}
@media (prefers-reduced-motion: reduce){ .live-pulse{ animation:none; } }
.live-title{
  font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone);
}
.live-when{
  margin-left:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.76rem; color:#7FB069;
}
.live-when.is-bad{ color:var(--amber); }

.live-list{ list-style:none; margin:0; padding:0; }
.live-row{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:14px;
  padding:13px 22px;
  border-bottom:1px solid rgba(33,29,27,.7);
}
.live-row:last-child{ border-bottom:0; }
.live-row .lamp{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:#7FB069; box-shadow:0 0 9px 1px rgba(127,176,105,.5);
}
.live-row.is-down .lamp{ background:var(--crimson); box-shadow:0 0 9px 1px rgba(142,29,36,.6); }
.live-row .who{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.live-row .who b{ font-size:.94rem; font-weight:600; color:var(--bone); }
.live-row .who i{
  font-style:normal; font-size:.78rem; color:var(--muted);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow:hidden; text-overflow:ellipsis;
}
.live-row .ms{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.8rem; color:var(--muted); white-space:nowrap;
}
.live-row.is-down .ms{ color:var(--crimson); }

.live.is-busy .live-list{ opacity:.45; transition:opacity .2s ease; }

.live-foot{
  margin:0; padding:15px 22px;
  border-top:1px solid var(--ink-3);
  background:rgba(0,0,0,.25);
  font-size:.83rem; color:var(--muted); line-height:1.55;
}
.live-again{
  appearance:none; cursor:pointer; background:transparent;
  border:0; padding:0; margin-left:4px;
  font:inherit; color:var(--amber);
  text-decoration:underline; text-underline-offset:3px;
}
.live-again:hover{ color:var(--bone); }

/* ============================================================
   HOW THIS COMPANY RUNS — the honest disclosure
   ============================================================ */
.split{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(290px,1fr));
  margin-top:44px;
}
.col{
  border:1px solid var(--ink-3);
  border-radius:5px;
  background:var(--ink-2);
  padding:28px 26px 26px;
}
.col-h{
  display:flex; flex-direction:column; gap:12px;
  font-size:1.25rem; text-transform:uppercase;
  margin:0 0 16px; line-height:1.1;
}
.col-tag{
  align-self:flex-start;
  font-family:var(--body); font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:5px 10px; border-radius:2px;
  color:var(--amber); border:1px solid rgba(232,176,75,.4);
}
.col-tag.is-human{ color:#7FB069; border-color:rgba(127,176,105,.45); }
.col-list{ margin:0; padding:0; list-style:none; }
.col-list li{
  position:relative;
  padding:0 0 13px 20px;
  color:var(--muted); font-size:.97rem; line-height:1.55;
}
.col-list li:last-child{ padding-bottom:0; }
.col-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:1px; background:var(--crimson);
}

.timezone{
  margin-top:40px;
  border-left:2px solid var(--amber);
  padding:6px 0 6px 26px;
  max-width:70ch;
}
.timezone p{
  margin:0;
  font-size:clamp(1.02rem, 2vw, 1.18rem);
  color:var(--bone);
  line-height:1.6;
}

/* ============================================================
   OPERATIONS LOG
   ============================================================ */
.log-updated{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.8rem; color:var(--amber); margin:0 0 6px;
}
.log{ margin-top:34px; }
.log-entry{
  border-top:1px solid var(--ink-3);
  padding:30px 0 6px;
}
.log-date{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.78rem; color:var(--muted);
  margin:0 0 10px; letter-spacing:.04em;
}
.log-h{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.3rem, 3vw, 1.75rem);
  line-height:1.15; text-transform:none;
  color:var(--bone); margin:0 0 16px;
}
.log-items{ margin:0; padding:0; list-style:none; }
.log-items li{
  position:relative; padding:0 0 11px 20px;
  color:var(--muted); font-size:.98rem; line-height:1.6;
}
.log-items li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:7px; height:1px; background:var(--crimson);
}
.log-count{
  margin:14px 0 0; font-size:.9rem; color:var(--muted);
  border-left:2px solid var(--amber); padding-left:14px;
}
.log-count b{ color:var(--amber); font-weight:600; }
.log-foot{
  margin:38px 0 26px; font-size:.86rem; color:var(--muted);
  max-width:62ch;
}


/* ---------- cohort state: one attribute flips the copy ---------- */
.join[data-cohort="open"] .when-full{ display:none; }
.join[data-cohort="full"] .when-open{ display:none; }