/* ============================================================================
   RTR home (/) — page-specific widgets only, on tokens.css + campaign.css.
   The shell (.page), header, sections, demands grid, callout, cta-band, share,
   closing, colophon and skip-link all live in campaign.css. This file owns ONLY
   the sticky ACT bar, the hero, the go-deeper teasers, and the three letter
   helpers shared with /act/ (which also loads this file).
   Load order: tokens.css → campaign.css → home.css  (+ play.css for the game)
   ============================================================================ */

/* --- sticky ACT bar (revealed on scroll by the inline script) --- */
.actbar { position: sticky; top: 0; z-index: 50; background: var(--accent); color: var(--on-accent);
  transform: translateY(-100%); max-height: 0; overflow: hidden; transition: transform .3s var(--ease), max-height .3s var(--ease); }
.actbar.show { transform: translateY(0); max-height: 72px; }
.actbar a { display: flex; align-items: center; gap: var(--sp-2); justify-content: center;
  color: var(--on-accent); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .5px;
  padding: .7rem var(--sp-4); }
.actbar a:hover { text-decoration: none; }
.actbar .bang { background: var(--on-accent); color: var(--accent); padding: .1rem .4rem; border-radius: var(--radius); font-weight: 700; }
.actbar .arrow { font-weight: 700; }

/* --- HERO: the number and the void ---
   ₹4.66 is self-evidently nothing — no comparison, no chart, no proof needed.
   The number is monumental; everything around it is quiet; the empty space is
   the argument. Boldness spent entirely on scale + silence. */
.hero { border-bottom: 2px solid var(--accent); padding: var(--sp-6) 0 var(--sp-8);
  min-height: 70vh; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; }
.hero-eyebrow { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--sp-2); }
.hero-num { font-family: var(--font-display); font-weight: 700; color: var(--accent);
  font-size: clamp(5rem, 28vw, 12rem); line-height: .82; letter-spacing: -.02em; margin: 0; }
.hero-sub { font-size: clamp(1.15rem, 1rem + 1.1vw, 1.55rem); line-height: 1.35; color: var(--text);
  margin: var(--sp-4) 0 0; }
.hero-ask { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 1rem + 2.4vw, 2.2rem); line-height: 1.05; color: var(--text);
  margin: var(--sp-6) 0 var(--sp-5); }
.hero-ask .red { color: var(--accent); }
.hero-cta { align-self: center; font-size: 1.05rem; padding: .9rem 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .hero-num  { animation: heroIn .7s var(--ease) both; }
  .hero-sub  { animation: heroIn .7s var(--ease) .12s both; }
  .hero-ask  { animation: heroIn .7s var(--ease) .2s both; }
  .hero-cta  { animation: heroIn .7s var(--ease) .28s both; }
  @keyframes heroIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* --- go-deeper teasers (past / present / research) --- */
.teasers { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin: var(--sp-6) 0; }
@media (min-width: 620px) { .teasers { grid-template-columns: repeat(3, 1fr); } }
.teaser { display: block; border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--sp-4); color: var(--text); background: var(--surface); }
.teaser:hover { border-color: var(--accent); text-decoration: none; }
.teaser .tz { font-family: var(--font-mono); font-size: var(--t-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.teaser .tt { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; margin-top: var(--sp-2); }
.teaser .tg { font-family: var(--font-mono); font-size: var(--t-eyebrow); color: var(--accent); margin-top: var(--sp-3); }

/* --- letter helpers — shared with /act/ (the write-to-CM page) --- */
.cta-note { font-size: .85rem; color: var(--text-muted); line-height: 1.45; }
#letter-pre { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--sp-4); font-family: var(--font-mono); font-size: .8rem; line-height: 1.55; color: var(--text-soft); overflow-x: auto; }
.cta-howto summary { font-family: var(--font-mono); font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .8px; color: var(--accent); cursor: pointer; }
.cta-howto ol { padding-left: 1.2rem; }
.cta-howto li { margin-bottom: var(--sp-3); font-size: .92rem; line-height: 1.5; }