:root{
  --paper:#eceae3;
  --ink:#141310;
  --ink-soft:#c9c6bc;
  --measure:64ch;
  --font-mono:'Fira Code',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}

html,body{
  height:100%;
  height:100dvh;
  height:var(--app-height, 100dvh);
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:pan-x pan-y;
}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:#70653E;
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:16px;line-height:1.5;
}
/* ---------- video poster (small, centered, thick frame) ---------- */
.bg{
  position:relative;z-index:2;flex-shrink:0;
  height:min(94.6vh,946px);
  aspect-ratio:0.82;
  max-width:99vw;
  overflow:hidden;
  background:#70653E;
  border:28px solid #D1CCD1;
}
.bg video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:contrast(1.15);
}
.bg::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.15;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* faint print grain over everything */
body::after{
  content:"";position:fixed;inset:0;z-index:3;pointer-events:none;
  opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit;text-decoration:none}

/* ---------- loading screen ---------- */
.loader{
  position:fixed;inset:0;z-index:50;
  background-color:#232a26;
  background-image:url('../assets/background.png');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease;
}
.loader-logo{
  width:clamp(220px,55vw,560px);height:auto;
}
.loader.hide{
  opacity:0;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .loader{transition:none}
}

.remind-wrap{
  position:absolute;z-index:2;
  top:80%;left:0;right:0;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8.8px;
}

.stage{
  position:relative;z-index:2;
  height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(clamp(16px,3vh,40px) + env(safe-area-inset-top)) calc(clamp(20px,4vw,56px) + env(safe-area-inset-right)) calc(clamp(16px,3vh,40px) + env(safe-area-inset-bottom)) calc(clamp(20px,4vw,56px) + env(safe-area-inset-left));
}

/* ---------- center ---------- */
.center{
  position:absolute;z-index:2;
  top:50%;left:0;right:0;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  gap:clamp(6.6px,1.32vmin,13.2px);
  padding:0 12px;
}
.tagline{
  max-width:38ch;font-size:clamp(14px,1.6vw,17px);line-height:1.5;
  color:var(--ink-soft);
}

/* ---------- countdown ---------- */
.countdown{
  display:flex;align-items:baseline;gap:clamp(6.6px,1.43vmin,14.3px);
  font-family:var(--font-mono);
}
.cd-unit{display:flex;flex-direction:column;align-items:center;gap:3.3px}
.cd-num{
  font-weight:600;letter-spacing:.12em;font-variant-numeric:tabular-nums;
  font-size:clamp(11px,2.2vmin,14.3px);line-height:1;color:var(--paper);
  padding-left:.12em; /* optically re-center the opened tracking */
}
.cd-label{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(5.5px,1.21vmin,6.05px);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.cd-sep{
  font-weight:600;font-size:clamp(7.7px,1.54vmin,9.9px);color:var(--paper);
  transform:translateY(-2.2px);
}
.cd-date{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(6.6px,1.65vmin,8.8px);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}

.remind-btn{
  border:0.2px solid var(--paper);background:transparent;color:var(--paper);
  font-family:var(--font-mono);font-weight:600;font-size:clamp(11px,2.2vmin,14.3px);letter-spacing:.12em;
  text-transform:uppercase;
  padding:clamp(9.9px,1.65vmin,13.2px) clamp(22px,3.74vmin,30.8px);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background .18s,color .18s,border-color .18s,transform .05s;
}
.remind-btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.remind-btn:active{transform:translateY(1px)}
.remind-btn.done{border-color:var(--paper);color:var(--paper);background:transparent}

.scroll-hint{display:none}

/* ---------- load reveal (single moment) ---------- */
.reveal{opacity:0;transform:translateY(10px)}
.revealed .reveal{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.revealed .reveal.d1{transition-delay:.05s}
.revealed .reveal.d2{transition-delay:.18s}
.revealed .reveal.d3{transition-delay:.32s}

/* ---------- sign up dialog ---------- */
.signup{
  position:fixed;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background:rgba(20,19,16,.55);
  opacity:0;transition:opacity .25s ease;
}
.signup[hidden]{display:none}
.signup.open{opacity:1}
.signup-panel{
  position:relative;
  width:100%;max-width:400px;max-height:100%;overflow-y:auto;
  background:#70653E;
  border:16px solid #D1CCD1;
  padding:24px;
  display:flex;flex-direction:column;gap:8px;
}
.signup-close{
  position:absolute;top:19px;right:20px;
  background:none;border:0;color:var(--paper);
  font-family:var(--font-mono);font-size:22px;line-height:1;padding:4px;cursor:pointer;
}
.signup-title{
  font-weight:600;font-size:14.3px;letter-spacing:.12em;text-transform:uppercase;
  padding-right:32px; /* clear the close button */
}
.signup-body{display:flex;flex-direction:column;gap:16px;margin-top:4px}
.signup-copy{display:flex;flex-direction:column;gap:16px}
.signup-note{font-size:12px;line-height:1.6;color:var(--ink-soft)}
.signup-colophon{font-size:12px;line-height:1.6;color:var(--paper)}
.signup-note i{font-style:italic}
.signup-date{
  font-weight:500;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.signup-form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:4px}
.field span{
  font-weight:500;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.field input{
  width:100%;
  background:transparent;color:var(--paper);
  border:0;border-bottom:0.5px solid var(--paper);border-radius:0;
  font-family:var(--font-mono);font-size:16px; /* 16px stops iOS zoom on focus */
  padding:6px 0;
  -webkit-appearance:none;appearance:none;
}
.field input:focus{outline:none;border-bottom-color:var(--paper);box-shadow:0 1px 0 var(--paper)}
.field input[aria-invalid="true"]{border-bottom-style:dashed}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.signup-submit{align-self:stretch;margin-top:8px}
.signup-submit[disabled]{opacity:.6;cursor:default}
.signup-submit.done{opacity:1}
@media (min-width:720px){
  .signup-panel{max-width:760px;padding:32px}
  .signup-close{top:27px;right:28px}
  .signup-body{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:16px}
  .signup-submit{margin-top:auto}
  /* date shares the Submit button's centre line: same box height as the button */
  .signup-date{
    margin-top:auto;display:flex;align-items:center;
    min-height:calc(2 * clamp(9.9px,1.65vmin,13.2px) + 1.5 * clamp(11px,2.2vmin,14.3px) + 0.4px);
  }
}
@media (prefers-reduced-motion:reduce){
  .signup{transition:none}
}

:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

@media (max-width:640px){
  .bg{height:84vh;height:calc(var(--app-height, 100dvh) * .84);max-width:88vw;border-width:16px}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none!important}
}