/* The scroll story at the top of the home page. */
.story { height: 1300vh; position: relative; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none; will-change: transform, opacity; }
.layer > * { pointer-events: auto; }
.tag { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 2px; color: var(--soft); text-transform: uppercase; }
.mini-card { background: var(--card); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.mini-card span { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1.2px; color: var(--soft); }
.mini-card b { font-size: 19px; }
.mini-card small { font-size: 15px; color: var(--soft); }
.scroll-hint { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 2px; color: var(--soft); }
@media (prefers-reduced-motion: reduce) {
  .story { height: auto; } .stage { position: relative; height: auto; overflow: visible; } .stage > canvas { display: none; }
  .layer { position: relative; inset: auto; padding: 48px 16px; } .scroll-hint { display: none; }
}

.side { width: 100%; max-width: 1100px; display: flex; justify-content: flex-start; }
.side > div { max-width: 360px; }
.side h2 { margin-top: 8px; }
.side p { margin-top: 12px; }
.big h1 { font-size: clamp(46px, 9vw, 100px); text-align: center; text-shadow: 0 2px 24px var(--ground); }
.end { text-align: center; }
.end .lock { display: flex; align-items: center; gap: 14px; justify-content: center; }
.end .lock span { font-size: clamp(48px, 9vw, 96px); font-weight: 800; letter-spacing: -2px; }

.quote { max-width: 760px; text-align: center; font-size: clamp(24px, 4vw, 42px); line-height: 1.25; font-weight: 700; text-shadow: 0 2px 24px var(--ground), 0 0 6px var(--ground); }
.quote .tag { display: block; margin-bottom: 14px; }
.finale { display: grid; gap: 32px; align-items: center; max-width: 1000px; width: 100%; }
@media (min-width: 860px) { .finale { grid-template-columns: 1fr auto; } }
.finale .phone { --scale: 0.66; }
.lock span { font-size: clamp(48px, 9vw, 96px); font-weight: 800; letter-spacing: -2px; text-shadow: 0 2px 24px var(--ground); }