@font-face{font-family:"DM Serif Display";src:url("fonts/DMSerifDisplay.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/Archivo.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{
  --night:#0b0d1c;
  --cream:#faf1dc;
  --text:#ece3cf;
  --muted:#c4baa4;
  --gold:#f2bd50;
  --gold-soft:#f4d58e;
  --serif:"DM Serif Display",Georgia,serif;
  --sans:"Archivo",system-ui,sans-serif;
  --shadow:0 1px 2px rgba(0,0,0,.55),0 2px 18px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:linear-gradient(90deg,rgba(9,10,24,.9) 0,rgba(9,10,24,.84) calc(clamp(24px,5.5vw,96px) + 600px),rgba(9,10,24,.4) calc(clamp(24px,5.5vw,96px) + 780px),rgba(9,10,24,0) calc(clamp(24px,5.5vw,96px) + 980px)) fixed,var(--night) url("media/datacentre-dusk.webp") right center/cover no-repeat fixed;color:var(--text);
  font:400 1rem/1.6 var(--sans)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.page{min-height:100svh;display:grid;grid-template-rows:1fr auto;padding:clamp(22px,4vh,48px) clamp(24px,5.5vw,96px) clamp(16px,3vh,30px)}
.content{align-self:center;max-width:600px;text-shadow:var(--shadow)}

.logo{margin:0 0 clamp(18px,3vh,32px);width:min(520px,100%)}
.logo img{width:100%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}

.question{margin:0 0 12px;font:400 clamp(1.8rem,2.4vw,2.35rem)/1.12 var(--serif);color:var(--cream);letter-spacing:.005em;text-wrap:balance}
.opener{margin:0 0 10px;font-size:clamp(1.08rem,1.25vw,1.22rem);line-height:1.5;color:var(--text);max-width:46ch}
.mission{margin:0 0 clamp(16px,2.6vh,26px);font-size:.97rem;line-height:1.58;color:var(--muted);max-width:52ch}

.signup{max-width:520px}
.signup h2{margin:0 0 2px;font:400 clamp(1.4rem,1.9vw,1.7rem)/1.2 var(--serif);color:var(--gold-soft)}
.signup-what{margin:0 0 10px;font-size:.98rem;color:var(--text)}
.field{display:flex;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(250,241,220,.55),0 10px 30px rgba(0,0,0,.35);text-shadow:none}
.field input{flex:1;min-width:0;height:52px;padding:0 18px;border:0;background:rgba(11,13,28,.82);color:var(--cream);font:400 1rem var(--sans)}
.field input::placeholder{color:#a79e8a}
.field input:focus{outline:none;background:rgba(11,13,28,.95)}
.field:focus-within{box-shadow:0 0 0 2px var(--gold),0 10px 30px rgba(0,0,0,.35)}
.field button{height:52px;padding:0 26px;border:0;background:var(--gold);color:#16120a;font:700 1rem var(--sans);letter-spacing:.01em;cursor:pointer}
.field button:hover{background:#ffcd63}
.status{margin:6px 0 0;font-size:.9rem;color:var(--gold-soft)}

.foot{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;padding-top:14px;text-shadow:var(--shadow)}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 30px}
.foot a{display:inline-flex;align-items:center;gap:10px;font:600 .98rem/1 var(--sans);color:var(--text);text-decoration:none;padding:6px 0}
.foot a:hover{color:#fff}
.foot img,.foot svg{width:22px;height:22px;flex:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.foot a[aria-disabled="true"]{cursor:not-allowed}

@media (max-width:760px){
  body{background:var(--night)}
  body::before{content:"";display:block;height:42svh;background:url("media/datacentre-dusk.webp") 72% center/cover no-repeat}
  .page{min-height:auto;padding:0 20px 24px}
  .content{margin-top:-18svh;max-width:none}
  .logo{width:100%;margin-bottom:24px}
  .logo{width:min(100%,520px)}
  .question{font-size:1.9rem}
  .field{flex-direction:column;border-radius:6px}
  .field input,.field button{flex:none;height:52px;width:100%}
  .foot{flex-direction:column;align-items:flex-start;padding-top:32px}
}
@media (prefers-reduced-motion:reduce){body{background-attachment:scroll}}

/* Join the cause: the channels, above email */
.join{margin:0 0 clamp(14px,2.4vh,22px)}
.join h2,.signup h2{margin:0 0 2px;font:400 clamp(1.4rem,1.9vw,1.7rem)/1.2 var(--serif);color:var(--gold-soft)}
.join-what{margin:0 0 10px;font-size:.98rem;color:var(--text)}
.channels{display:flex;flex-wrap:wrap;gap:10px}
.channels a{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 14px;border-radius:6px;text-decoration:none;
  font:600 .98rem/1 var(--sans);color:var(--cream);background:rgba(11,13,28,.78);box-shadow:0 0 0 1px rgba(250,241,220,.4);text-shadow:none}
.channels a:hover{box-shadow:0 0 0 1px var(--cream);background:rgba(11,13,28,.92)}
.channels img{width:24px;height:24px}
.channels a[aria-disabled="true"]{cursor:not-allowed}
.foot{justify-content:flex-start;gap:12px 32px}
.foot .privacy{font-weight:500;color:var(--muted)}
.foot .privacy:hover{color:var(--cream)}
@media (max-width:760px){.channels a{flex:1 1 30%;justify-content:center;padding:0 10px}.foot{flex-direction:row;padding-top:28px}}

/* stacked: Join the cause, then email updates */
.actions{max-width:520px}
.status:empty{display:none}
.opener.next{margin-top:-2px}