/* storytogether.app, the live site while the app is coming (founder, Oct 30, 2026): a coming-soon home and a support
   page. Brand tokens from ../shared/apps.css; Open Sans self-hosted so no visitor's address goes to Google. */
@font-face {
  font-family: "Open Sans";
  src: url("OpenSans-Variable.ttf") format("truetype");
  font-weight: 300 800; font-stretch: 75% 100%; font-display: swap;
}
:root {
  --paper: #FBF5EA; --paper-raised: #FFFDF8; --ink: #2A2420; --ink-soft: #6E6157; --hairline: #E6DCCB;
  --indigo: #2E3570; --tangerine-ink: #B4521F;
  --display: "Open Sans", system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 18px/1.5 var(--text); }
main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 48px 20px 40px; text-align: center; }
a { color: var(--indigo); }
.burst { display: block; width: min(560px, 100%); height: auto; margin: 0 auto; }
/* the landing's hero reveal (assets/reveal.js, copied from the landing): the lockup assembles from its layers */
.hero-burst { width: min(100%, 680px); margin: 0 auto; }
#hero-reveal { display: block; width: 100%; aspect-ratio: 595.3 / 375; opacity: 0; transition: opacity .2s ease-out; }
#hero-reveal.ready { opacity: 1; }
.hero-fallback { display: none; width: 100%; height: auto; }
.reveal-failed #hero-reveal { display: none; }
.reveal-failed .hero-fallback { display: block; }
h1 { font: 800 clamp(28px, 6vw, 44px)/1.15 var(--display); letter-spacing: -0.015em; margin: 28px auto 14px; max-width: 18em; text-wrap: balance; }
.lede { color: var(--ink-soft); font-size: clamp(18px, 2.4vw, 21px); max-width: 32em; margin: 0 auto; text-wrap: balance; }
.soon { display: inline-block; margin: 28px 0 0; padding: 10px 20px; border-radius: 999px; background: var(--indigo); color: var(--paper-raised); font: 700 16px/1 var(--text); }
.cast { display: block; width: min(640px, 100%); height: auto; margin: 44px auto 0; }
.small-logo { display: block; width: 260px; max-width: 70%; height: auto; margin: 0 auto 8px; }
.card { text-align: left; background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 20px; padding: 26px 26px 22px; margin: 28px auto 0; max-width: 34em; }
.card h2 { font: 700 20px/1.3 var(--display); margin: 0 0 8px; }
.card p { margin: 0 0 12px; color: var(--ink-soft); }
.card p:last-child { margin-bottom: 0; }
.email { font: 700 clamp(20px, 3.4vw, 26px)/1.3 var(--display); word-break: break-word; }
footer { border-top: 1px solid var(--hairline); padding: 20px; text-align: center; font-size: 14px; color: var(--ink-soft); }
footer a { margin: 0 10px; color: var(--ink-soft); }