/* ============================================================
   ALIVE in Hong Kong — special-edition skin.
   Layered OVER style.css and loaded by booth.html and studio.html
   so both pages match the landing. Loaded LAST on each page.

   style.css (and studio.css) route their chrome through four
   design tokens, so overriding them here re-skins everything
   cohesively in one place.
   ============================================================ */
:root {
  /* type — match the landing's watercolour-editorial system */
  --display:    "Fraunces", Georgia, serif;          /* big romantic moments */
  --mono:       "Bricolage Grotesque", system-ui, sans-serif; /* UI + body */
  --display-kr: "Gothic A1", system-ui, sans-serif;  /* the 애니 / 스튜디오 hangul */
  /* palette — the HK coral + warm cream + concert navy */
  --accent:   #e8536f;
  --accent-2: #2b2f7a;
  --paper:    #fdf3ee;
}

/* soft pink watercolour wash, same recipe as the landing, replacing the
   flat paper + grain */
body {
  background:
    radial-gradient(60% 50% at 15% 0%,   rgba(255,125,151,.30), transparent 70%),
    radial-gradient(55% 45% at 95% 10%,  rgba(255,201,77,.20),  transparent 70%),
    radial-gradient(70% 60% at 80% 100%, rgba(232,83,111,.22),  transparent 70%),
    var(--paper);
  background-attachment: fixed;
}

/* Fraunces reads best with optical sizing on and a slightly lighter display
   weight — editorial, not utilitarian */
.wordmark, .result-title, .fallback-title, .countdown, .studio-title {
  font-optical-sizing: auto;
  font-weight: 600;
}

/* masthead lockup: the ALIVE image (recoloured to ink to read on the cream
   page, like the landing) stacked over a smaller "with 애니" line */
.masthead .wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.masthead .alive-logo {
  width: clamp(150px, 30vw, 250px);
  height: auto;
  display: block;
  filter: brightness(0); /* source lockup is white */
}
.masthead .with-annie {
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 600;
}

/* keep tracked UI labels + number tabs in the grotesque so they stay crisp
   and legible (serif small-caps would muddy at these sizes) */
.booth-status, .editor-title, .cell-tab { font-family: var(--mono); font-weight: 700; }

/* buttons stay in the grotesque for a decisive voice — matches the landing's
   ENTER THE BOOTH / capture CTAs */
.big-button { font-family: var(--mono); font-weight: 800; letter-spacing: .04em; }

/* ---- limited-edition ribbon (also the way back to the landing) ---- */
.hk-ribbon {
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .26em;
  color: #fff;
  background: var(--accent);
  padding: 9px 12px;
  text-decoration: none;
  transition: background .15s ease;
}
.hk-ribbon:hover { background: #d8455f; }

/* warm the masthead kicker to the coral, like the landing's eyebrow */
.kicker { color: var(--accent); opacity: 1; }

/* active option card: a coral offset edge so the selected state feels
   on-theme rather than a flat black invert */
.option-card.selected { box-shadow: 1px 1px 0 var(--accent); }

/* the progress dots + print-slot already use --accent, so they pick up the
   new coral automatically */

/* ---- top rule: the same watercolour strip that opens the landing ---- */
.spectrum-rule {
  height: 6px;
  background: linear-gradient(90deg, #ff7d97, var(--accent) 55%, #ffc94d);
  position: relative; z-index: 1;
}