/* The Launch Look (1 Content/Style Guides/2026-10-30 The Launch Look.pdf), midnight mode, for the web.
   One sky behind the whole page, paper stars and clouds, Fraunces only, one pink word per headline, gold for asks. */
:root{color-scheme:dark;--base:#06101f;--ink:#f7f0e1;--body:rgba(247,240,225,.88);--soft:rgba(247,240,225,.72);--pink:#f27aaa;--gold:#e9c27a;--gold-light:#f1cf86;--gold-deep:#bf9248;--paper:#fbf1dd;--paper-shade:#d9c6a2;--navy:#0c2445;--line:rgba(233,194,122,.24);--front-cloud:#0b213f}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:48px;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--base);color:var(--ink);font-family:'Fraunces',Georgia,serif;font-weight:380;font-variation-settings:'opsz' 24,'SOFT' 50,'WONK' 0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:'';position:fixed;inset:0;z-index:50;pointer-events:none;background:url(assets/grain.webp) 0 0/360px;mix-blend-mode:overlay;opacity:.22}
a{color:inherit}
button,input{font:inherit}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
::selection{background:var(--pink);color:var(--base)}
.skip-link{position:fixed;left:16px;top:-80px;z-index:60;padding:12px 18px;border-radius:8px;background:var(--paper);color:var(--navy)}
.skip-link:focus{top:16px}

/* One sky for the whole page */
.sky{position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,#040b18 0%,#081a33 42%,#0c2445 74%,#0f2b50 100%)}
.sky svg{position:absolute;inset:0;width:100%;height:100%}

/* Type */
h1,h2,h3,p{margin:0}
h1,h2{font-weight:560;font-variation-settings:'opsz' 144,'SOFT' 60,'WONK' 0;letter-spacing:-.02em;text-wrap:balance;text-shadow:0 4px 24px rgba(0,0,0,.35)}
h1{font-size:clamp(42px,5.4vw,78px);line-height:1.04}
h2{font-size:clamp(34px,4.3vw,58px);line-height:1.06}
h1 em,h2 em{font-style:italic;color:var(--pink);font-variation-settings:'opsz' 144,'SOFT' 100,'WONK' 1}
.sub{margin-top:16px;font-style:italic;font-weight:430;font-variation-settings:'opsz' 72,'SOFT' 100,'WONK' 1;color:var(--gold);font-size:clamp(20px,2vw,27px);line-height:1.3;text-shadow:0 2px 16px rgba(0,0,0,.3)}
.lede{max-width:620px;margin:18px auto 0;font-size:clamp(18px,1.45vw,21px);line-height:1.5;color:var(--body);text-wrap:pretty;text-shadow:0 2px 16px rgba(0,0,0,.3)}

/* Header: the real wordmark, reversed for the night sky */
.site-header{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:center;padding:34px 24px 0}
.logo{display:block;border-radius:6px}
.logo img{display:block;width:clamp(148px,14vw,196px);height:auto}

/* Hanging stars and moon */
.hang{position:absolute;top:0;z-index:2;width:clamp(116px,25vw,360px);aspect-ratio:360/420;pointer-events:none}
.hang svg{display:block;width:100%;height:100%;overflow:visible}
.hang-left{left:0}.hang-right{right:0}

/* Hero */
.hero{position:relative;min-height:max(840px,100svh);display:flex;flex-direction:column;padding:150px 24px 0;text-align:center;overflow:hidden}
.hero-copy{position:relative;z-index:4;width:100%;max-width:880px;margin:0 auto;padding-bottom:36px}
.horizon{position:relative;z-index:1;flex:none;height:max(220px,22.3vw);margin:auto -24px 0;pointer-events:none}
.horizon::before{content:'';position:absolute;left:max(-4%,calc(50% - 760px));bottom:10%;width:clamp(260px,30vw,460px);aspect-ratio:1;background:radial-gradient(closest-side,rgba(255,214,150,.17),rgba(255,214,150,0));z-index:1}
.clouds{position:absolute;inset:0}
.clouds svg{display:block;width:100%;height:100%}
.clouds-back{z-index:1}.clouds-front{z-index:3}
.quill{position:absolute;z-index:2;left:max(5%,calc(50% - 640px));bottom:16%;width:clamp(160px,17vw,260px);height:auto;filter:drop-shadow(4px 10px 9px rgba(0,0,0,.45))}

/* Signup: a lit spot like a story sticker */
.signup{position:relative;max-width:560px;margin:32px auto 0;text-align:left}
.signup::before{content:'';position:absolute;inset:-90px -150px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,214,150,.17),rgba(255,214,150,0))}
.signup label{display:block;margin:0 0 9px 4px;font-size:16px;font-style:italic;font-variation-settings:'opsz' 24,'SOFT' 100,'WONK' 1;color:var(--gold)}
.form-row{display:flex;gap:8px;padding:7px;border-radius:12px;background:var(--paper);box-shadow:inset 0 -3px 0 var(--paper-shade),0 12px 30px rgba(0,0,0,.45)}
.form-row input{flex:1;min-width:0;border:0;border-radius:7px;background:transparent;color:var(--navy);font-size:18px;padding:12px 14px}
.form-row input::placeholder{color:rgba(12,36,69,.55);opacity:1}
.form-row input:focus-visible{outline:2px solid var(--gold-deep);outline-offset:0}
.consent{margin:12px 4px 0;font-size:14px;line-height:1.5;color:var(--soft)}
.form-status{margin:10px 4px 0;font-size:15px;line-height:1.4;color:var(--gold)}
.form-status:empty{display:none}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Buttons: gold paper with a shade edge */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 24px;border:0;border-radius:9px;background:var(--gold);color:#0b1b33;font-size:18px;font-weight:620;font-variation-settings:'opsz' 24,'SOFT' 100,'WONK' 0;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:inset 0 -3px 0 var(--gold-deep),0 8px 20px rgba(0,0,0,.3);transition:background .15s,transform .15s}
.button:hover{background:var(--gold-light);transform:translateY(-1px)}
.button:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 var(--gold-deep),0 4px 10px rgba(0,0,0,.3)}
.button:disabled{cursor:wait;opacity:.75;transform:none}
.button-ghost{background:rgba(247,240,225,.06);color:var(--gold);box-shadow:inset 0 0 0 1.5px rgba(233,194,122,.7)}
.button-ghost:hover{background:rgba(233,194,122,.14)}
.button-ghost:active{box-shadow:inset 0 0 0 1.5px var(--gold)}

/* Sections on the same sky */
.section{position:relative;max-width:1120px;margin:0 auto;padding:104px 28px;text-align:center}
.below-clouds{max-width:none;padding-top:48px;background:linear-gradient(180deg,var(--front-cloud) 0,rgba(11,33,63,0) 340px)}
.below-clouds>*{max-width:1064px;margin-left:auto;margin-right:auto}
.section .button{margin-top:34px}

/* Steps on one gold thread */
.steps{position:relative;list-style:none;padding:0;margin:72px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.steps li{position:relative;z-index:1}
.steps li:nth-child(2){margin-top:64px}
.paper-star{display:block;width:72px;height:72px;margin:0 auto 18px}
.paper-star svg{display:block;width:100%;height:100%;overflow:visible}
.steps h3{margin-bottom:10px;font-size:24px;font-weight:560;line-height:1.2;letter-spacing:-.01em;font-variation-settings:'opsz' 48,'SOFT' 60,'WONK' 0;text-shadow:0 2px 16px rgba(0,0,0,.3)}
.steps p{max-width:310px;margin:0 auto;font-size:17px;line-height:1.55;color:var(--body)}
.thread{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}

/* Questions */
.faq-list{max-width:720px;margin:48px auto 0;text-align:left;border-bottom:1px solid var(--line)}
.faq-list details{border-top:1px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 4px;font-size:20px;font-weight:480;line-height:1.35;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{flex:none;color:var(--gold);font-size:28px;line-height:1;transition:transform .2s}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list details p{max-width:640px;margin:0 4px 24px;font-size:17px;line-height:1.6;color:var(--body)}

/* Download options */
.get{display:flex;justify-content:center;gap:20px;margin:34px auto 0;max-width:760px}
.get-option{flex:1;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:12px}
.get-option .button{width:100%}
.get-option p{font-size:15px;line-height:1.45;color:var(--soft);text-wrap:balance}
.get-option p a{color:var(--gold);text-underline-offset:3px}

/* A first message to send */
.first-message{max-width:760px;margin:36px auto 0;padding:30px 34px;border-radius:14px;background:var(--paper);color:var(--navy);text-align:left;font-size:21px;line-height:1.5;font-style:italic;font-variation-settings:'opsz' 36,'SOFT' 100,'WONK' 1;box-shadow:inset 0 -4px 0 var(--paper-shade),0 14px 34px rgba(0,0,0,.4)}
.first-message+.button{margin-top:26px}
.note{margin-top:14px;font-size:15px;color:var(--soft)}

/* Sunrise: the download page's sky comes up behind the clouds */
.hero.sunrise{background:linear-gradient(180deg,rgba(10,26,56,0) 0%,rgba(27,51,100,.75) 42%,#424c84 62%,#93607f 78%,#df8b6c 90%,#f6c27e 100%)}
.sun{position:absolute;z-index:0;left:50%;top:46%;width:min(600px,82vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.sun svg{display:block;width:100%;height:100%;overflow:visible}
.sunrise .horizon::before{display:none}
.sunrise+.below-clouds{background:linear-gradient(180deg,#5a4677 0,rgba(90,70,119,.55) 160px,rgba(11,33,63,0) 420px)}

/* Footer rises out of the last clouds */
.site-footer{position:relative;margin-top:24px;text-align:center}
.site-footer .horizon{margin:0;height:max(170px,22.3vw)}
.site-footer .horizon::before{display:none}
.footer-band{padding:4px 24px 44px;background:var(--front-cloud)}
.footer-band img{display:block;width:150px;height:auto;margin:0 auto}
.footer-band p{margin-top:14px;font-size:15px;font-style:italic;color:var(--soft)}
.footer-band a{color:var(--gold);text-underline-offset:3px}

@media(max-width:760px){
  .site-header{padding-top:26px}
  .hero{min-height:0;padding:118px 20px 0}
  .lede{max-width:440px}
  .signup{margin-top:28px}
  .hero-copy{padding-bottom:8px}
  .horizon{margin:20px -20px 0;height:240px}
  .quill{left:4%;width:164px}
  .section{padding:84px 22px}
  .below-clouds{padding-top:32px}
  .sunrise .hero-copy{padding-bottom:56px}
  .steps{grid-template-columns:1fr;gap:42px;max-width:420px;margin-top:52px;padding-left:66px;text-align:left}
  .steps li:nth-child(2){margin-top:0}
  .paper-star{position:absolute;left:-74px;top:-14px;width:56px;height:56px;margin:0}
  .steps p{margin:0}
  .get{flex-direction:column;align-items:center;gap:26px}
  .get-option{width:100%}
  .first-message{padding:24px 22px;font-size:19px}
}
@media(max-width:520px){
  .form-row{flex-direction:column;gap:6px}
  .form-row input{padding:13px 12px}
  .form-row .button{width:100%}
  .faq-list summary{font-size:18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}