@font-face{font-family:"Cormorant Garamond";src:url("/fonts/cormorant-300-v1.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("/fonts/cormorant-300i-v1.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/fonts/grotesk-300-v1.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/fonts/grotesk-500-v1.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Maison Mono";src:url("/fonts/mono-400-v1.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --onyx:#07090A;
  --bone:#ECEAE3;
  --bone-dim:#9AA0A0;
  --smoke:#6E7676;
  --methane:#54D6BC;
  --methane-shade:#317A6C;
  --sky:#6FA8E0;
  --champagne:#C5A572;
  --gold-soft:#D8C29B;
  --hairline:rgba(236,234,227,.12);
  --serif:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Maison Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:clamp(24px,6vw,80px);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--onyx);color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;background:var(--onyx);color:var(--bone);font:300 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;overflow-x:hidden}
p,h1,h2{margin:0;font-weight:inherit}
a{color:inherit}
::selection{background:rgba(84,214,188,.3);color:var(--bone)}
:focus-visible{outline:1px solid var(--methane);outline-offset:4px}

body::before{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;background:radial-gradient(130% 100% at 50% 42%,rgba(7,9,10,0) 56%,rgba(0,0,0,.48) 100%)}
body::after{content:"";position:fixed;inset:0;z-index:21;pointer-events:none;background:url("/grain.svg") 0 0/240px 240px repeat;opacity:.075;mix-blend-mode:overlay}

.hero{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100vh;min-height:100svh;padding:clamp(64px,11svh,128px) var(--gutter);overflow:hidden}
.hero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:64rem;text-align:center}

.air{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 0,#000 64%,transparent 100%);mask-image:linear-gradient(#000 0,#000 64%,transparent 100%)}
.air i{position:absolute;display:block;border-radius:50%;will-change:transform}
.air-methane{--d:max(118vmin,72vmax);width:var(--d);height:var(--d);left:calc(24% - var(--d)/2);top:calc(30% - var(--d)/2);background:radial-gradient(closest-side,rgba(84,214,188,.25),rgba(84,214,188,.1) 44%,rgba(84,214,188,0));animation:drift-a 41s ease-in-out -17s infinite alternate}
.air-sky{--d:max(126vmin,78vmax);width:var(--d);height:var(--d);left:calc(80% - var(--d)/2);top:calc(52% - var(--d)/2);background:radial-gradient(closest-side,rgba(111,168,224,.21),rgba(111,168,224,.085) 46%,rgba(111,168,224,0));animation:drift-b 57s ease-in-out -29s infinite alternate}
.air-champagne{--d:max(104vmin,62vmax);width:var(--d);height:var(--d);left:calc(50% - var(--d)/2);top:calc(96% - var(--d)/2);background:radial-gradient(closest-side,rgba(197,165,114,.12),rgba(197,165,114,.045) 48%,rgba(197,165,114,0));animation:drift-c 73s ease-in-out -41s infinite alternate}
@keyframes drift-a{from{transform:translate3d(-3vw,-2vh,0)}to{transform:translate3d(4vw,3vh,0)}}
@keyframes drift-b{from{transform:translate3d(3vw,-3vh,0)}to{transform:translate3d(-4vw,2vh,0)}}
@keyframes drift-c{from{transform:translate3d(-4vw,1vh,0)}to{transform:translate3d(3vw,-2.5vh,0)}}

.eyebrow{font:400 .6875rem/2 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--bone-dim)}
.eyebrow span{display:block;margin-right:-.28em}
.eyebrow .dot{display:none}

.lockup{display:inline-flex;align-items:center;gap:.42em;margin-top:1.75rem;font:500 1.5rem/1 var(--sans);letter-spacing:-.005em;color:var(--bone);white-space:nowrap}
.spark{display:block;flex:none;width:1.3em;height:1.3em}
.spark-shade{fill:var(--methane-shade)}
.spark-light{fill:var(--methane)}
.wordmark{display:inline-block}

.headline{margin-top:2.25rem;max-width:13.5em;font:300 clamp(2.5rem,1.25rem + 5.1vw,5.4rem)/1.05 var(--serif);letter-spacing:-.008em;text-wrap:balance}
.deck{margin-top:1.375rem;max-width:25em;color:var(--bone-dim);text-wrap:balance}
.headline span,.deck span,.statement span,.epigraph span{display:inline-block}

.call{display:inline-flex;align-items:center;gap:.95em;min-height:48px;margin-top:2.5rem;padding:0 1.7em 0 calc(1.7em + .2em);border:1px solid var(--smoke);border-radius:2px;font:400 .75rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--bone);transition:border-color .6s var(--ease)}
.call:hover{border-color:var(--bone-dim)}
.tri{display:block;flex:none;width:.7em;height:.7em;fill:var(--methane);transition:transform .6s var(--ease)}
.call:hover .tri,.submit:hover .tri{transform:translateX(2px)}

.statement{max-width:57rem;margin:0 auto;padding:clamp(104px,17vh,184px) var(--gutter) clamp(64px,10vh,112px);text-align:center;font:300 clamp(1.5rem,1.2rem + 1.45vw,2.375rem)/1.34 var(--serif)}
.statement p{text-wrap:balance}
.statement p+p{margin-top:.9em}
.statement .close{margin-top:1.9em;font-style:italic}

.dispatch{position:relative;isolation:isolate;overflow-x:clip;padding:clamp(56px,9vh,104px) var(--gutter) clamp(96px,15vh,160px);text-align:center;outline:none}
.dispatch::before{content:"";position:absolute;z-index:-1;left:50%;top:44%;width:min(150vw,1280px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(84,214,188,.075),rgba(197,165,114,.032) 40%,rgba(7,9,10,0) 72%);pointer-events:none}
.dispatch h2{font:300 clamp(2.25rem,1.8rem + 1.9vw,3.25rem)/1.1 var(--serif)}
.lede{max-width:30em;margin:1.25rem auto 0;color:var(--bone-dim);text-wrap:pretty}

.petition{max-width:28rem;margin:2.75rem auto 0;text-align:left}
.field+.field{margin-top:1.875rem}
.petition label{display:block;font:400 .6875rem/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}
.petition input{display:block;width:100%;margin:.5rem 0 0;padding:.5rem 0 .6rem;border:0;border-bottom:1px solid var(--smoke);border-radius:0;background:transparent;color:var(--bone);font:300 1.0625rem/1.4 var(--sans);caret-color:var(--methane);transition:border-color .5s var(--ease)}
.petition input:focus,.petition input:focus-visible{outline:none;border-bottom-color:var(--methane);box-shadow:0 1px 0 var(--methane)}
.petition input[aria-invalid="true"]{border-bottom-color:var(--champagne)}
.petition input:-webkit-autofill{-webkit-text-fill-color:var(--bone);box-shadow:0 0 0 1000px var(--onyx) inset;caret-color:var(--methane)}
.error{margin-top:.625rem;color:var(--champagne);font-size:.9375rem;line-height:1.45}
.form-error{margin-top:1.75rem}
.introduction{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.submit{display:flex;align-items:center;justify-content:center;gap:.95em;width:100%;min-height:52px;margin-top:2.375rem;padding:0 1.5em;border:0;border-radius:2px;background:var(--methane);color:var(--onyx);font:400 .75rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}
.submit .tri{fill:var(--onyx)}
.petition.is-sending .submit{cursor:progress}

.confirmation{max-width:30rem;margin:2.5rem auto 0;outline:none}
.confirmation-text{font:300 clamp(1.375rem,1.2rem + .75vw,1.75rem)/1.42 var(--serif);text-wrap:pretty}
.receipt{margin-top:1.75rem;font:400 .6875rem/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}

.colophon{padding:3.5rem var(--gutter) calc(3.5rem + env(safe-area-inset-bottom));border-top:1px solid var(--hairline);text-align:center}
.motto{font:300 italic 1.5rem/1.2 var(--serif);color:var(--gold-soft)}
.imprint{margin-top:1rem;font:400 .6875rem/2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}
.imprint span,.imprint a{display:block;margin-right:-.2em}
.imprint .dot{display:none}
.imprint a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em;text-decoration-color:var(--smoke);transition:color .5s var(--ease),text-decoration-color .5s var(--ease)}
.imprint a:hover{color:var(--bone);text-decoration-color:var(--bone-dim)}

.page{position:relative}
.page .air{bottom:auto;height:min(92vh,780px)}
.still i{animation:none!important}
a.lockup{text-decoration:none;border-radius:2px}
.masthead{position:relative;z-index:1;display:flex;justify-content:center;padding:clamp(40px,7vh,72px) var(--gutter) 0}
.masthead .lockup{margin-top:0;font-size:1.375rem}

.notes{position:relative;z-index:1;padding:clamp(64px,11vh,120px) var(--gutter) clamp(88px,14vh,144px)}
.notes h1{text-align:center;font:300 clamp(2.4rem,1.85rem + 2.3vw,3.5rem)/1.08 var(--serif);text-wrap:balance}
.epigraph{max-width:20em;margin:1.75rem auto 0;text-align:center;font:300 italic clamp(1.375rem,1.2rem + .8vw,1.8rem)/1.35 var(--serif);text-wrap:balance}
.notes-body{max-width:34rem;margin:3rem auto 0}
.notes-body p{color:var(--bone-dim);line-height:1.72;text-wrap:pretty}
.notes-body p+p{margin-top:1.3em}
.notes-body a{color:var(--bone);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:var(--smoke);transition:text-decoration-color .5s var(--ease)}
.notes-body a:hover{text-decoration-color:var(--bone-dim)}

.room{position:relative;z-index:1;display:grid;place-items:center;min-height:calc(100vh - 12rem);min-height:calc(100svh - 12rem);padding:clamp(48px,8vh,96px) var(--gutter) clamp(72px,12vh,128px);text-align:center}
.room-in{display:flex;flex-direction:column;align-items:center}
.room-title{margin-top:1.5rem;font:300 clamp(2.4rem,1.6rem + 3.4vw,4.25rem)/1.06 var(--serif);text-wrap:balance}
.room-line{margin-top:.9rem;font:300 italic clamp(1.375rem,1.15rem + 1vw,2rem)/1.3 var(--serif);color:var(--bone-dim)}

@media (min-width:46rem){
  .eyebrow span,.eyebrow .dot{display:inline;margin-right:0}
  .eyebrow{margin-right:-.28em}
  .lockup{font-size:1.875rem}
  .imprint span,.imprint a,.imprint .dot{display:inline;margin-right:0}
  .imprint{margin-right:-.2em}
  .submit{width:auto;min-width:100%}
}

@media (prefers-reduced-motion:no-preference){
  .hero .spark-light{animation:breath-light 7s ease-in-out infinite}
  .hero .spark-shade{animation:breath-shade 7s ease-in-out infinite}
}
@media (prefers-reduced-motion:no-preference){.petition.is-sending .submit .tri{animation:sending 1.2s ease-in-out infinite}}
@keyframes sending{50%{opacity:.2}}
@keyframes breath-light{0%,100%{fill:#54D6BC}42.857%{fill:#317A6C}}
@keyframes breath-shade{0%,100%{fill:#317A6C}42.857%{fill:#54D6BC}}

.enter .hero .air{opacity:.4}
.enter .hero .spark{opacity:0;filter:blur(6px)}
.enter .hero .wordmark{opacity:0;filter:blur(8px)}
.enter .hero .eyebrow,.enter .hero .deck,.enter .hero .call{opacity:0}
.enter .hero .headline{opacity:0;transform:translateY(6px)}
.enter:not(.go) .hero :is(.air,.spark,.wordmark,.eyebrow,.headline,.deck,.call){animation:failsafe 0s 2.5s forwards}
.go .hero .air{animation:air-in 1.4s var(--ease) both}
.go .hero .spark{animation:condense-spark 1s var(--ease) .2s both}
.go .hero .wordmark{animation:condense-word 1.4s var(--ease) .6s both}
.go .hero .eyebrow{animation:fade 1s var(--ease) 1.3s both}
.go .hero .headline{animation:rise 1.1s var(--ease) 1.55s both}
.go .hero .deck{animation:fade 1s var(--ease) 1.8s both}
.go .hero .call{animation:fade 1s var(--ease) 2.05s both}
@keyframes air-in{from{opacity:.4}to{opacity:1}}
@keyframes condense-spark{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@keyframes condense-word{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes failsafe{to{opacity:1;filter:none;transform:none}}

@media (prefers-reduced-motion:reduce){
  .air i{animation:none}
  .tri{transition:none}
}
