/* ─────────────────────────────────────────────
   TOKENS
   ───────────────────────────────────────────── */
:root{
  /* ── Layout, shared by both themes ── */
  --gap:        clamp(4.5rem, 9vw, 8.5rem);
  --pad:        clamp(1.25rem, 5vw, 4.5rem);
  --measure:    62ch;
  --notch:      10px;
  --ease:       cubic-bezier(.22,.61,.28,1);

  /* ── NIGHT (default; also what you get with JS off) ── */
  --void:       #0E0D0D;
  --raise:      #171414;
  --rule:       #2B2626;
  --bone:       #F2EFEA;
  --bone-soft:  #9A928A;
  --red:        #FD010B;   /* brand red, for fills */
  --red-lift:   #FF3038;
  --red-text:   #FF4A50;   /* lifted for legible red text on dark */

  /* The viewport is a screen, so it stays dark in both themes */
  --screen:     #0A0809;
  --screen-lip: #050303;
  --edge:       #F2EFEA;
}

/* ── DAY ── */
:root[data-theme="light"]{
  --void:       #F2F0EB;
  --raise:      #E4E1D9;
  --rule:       #CFCBC1;
  --bone:       #171514;
  --bone-soft:  #6A635B;
  --red:        #EC0008;   /* nudged down so white-on-red clears AA */
  --red-lift:   #C90007;
  --red-text:   #C10006;
}

:root{ color-scheme:dark; }
:root[data-theme="light"]{ color-scheme:light; }

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.94rem + .28vw,1.125rem);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Paper grain — an SVG fractal-noise filter laid over the whole page */
.grain{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9;
  mix-blend-mode:overlay;
  opacity:.55;
  transition:opacity .5s var(--ease);
}

::selection{ background:var(--red); color:#fff; }

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

.shell{
  max-width:1180px;
  margin:0 auto;
  padding-inline:var(--pad);
}

/* ─────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────── */
.top{
  position:relative; z-index:4;
  display:flex; align-items:center; gap:1.5rem;
  padding-block:1.6rem 1.4rem;
  border-bottom:1px solid var(--rule);
}

.mark{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:inherit;
  margin-right:auto;
}
.mark__marks{
  display:grid;
  flex:none;
  transition:transform .5s var(--ease);
}
.mark__marks img{
  grid-area:1 / 1;
  height:34px; width:auto;
}
.mark:hover .mark__marks,
.mark:focus-visible .mark__marks{ transform:translateY(-2px); }
.mark__word{
  height:19px; width:auto;
  transition:opacity .4s var(--ease);
}
.mark:hover .mark__word,
.mark:focus-visible .mark__word{ opacity:.75; }

.status{
  display:flex; align-items:center; gap:.5rem;
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--bone-soft);
}
.status__dot{
  width:.42rem; height:.42rem; border-radius:50%;
  background:var(--red);
  animation:breathe 3.4s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:.28} 50%{opacity:1} }

.top__nav{ display:flex; gap:1.4rem; }
.navlink{
  position:relative;
  color:var(--bone);
  text-decoration:none;
  font-size:.88rem;
  font-weight:500;
  padding-block:.15rem;
}
.navlink::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--bone);
  transform:scaleX(0); transform-origin:right;
  transition:transform .38s var(--ease);
}
.navlink:hover::after,
.navlink:focus-visible::after{ transform:scaleX(1); transform-origin:left; }

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.hero{ padding-block:clamp(3rem,7vw,5.5rem) 0; }

.hero__title{
  margin:0;
  font-size:clamp(2.6rem,9vw,6.6rem);
  font-weight:700;
  font-stretch:80%;
  line-height:.94;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.hero__title span{ display:block; }

.vh{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

.hero__body{
  max-width:var(--measure);
  margin:clamp(1.6rem,3vw,2.4rem) 0 0;
  color:var(--bone-soft);
}
.hero__body b{ color:var(--bone); font-weight:500; }

/* ─────────────────────────────────────────────
   VIEWPORT — the one loud element on the page
   ───────────────────────────────────────────── */
.viewport{
  position:relative;
  margin-top:clamp(2.2rem,5vw,3.6rem);
  background:var(--screen);
  border:1px solid var(--screen-lip);
  box-shadow:0 0 0 1px rgba(253,1,11,.10), 0 30px 70px -40px #000;
  overflow:hidden;
}

.viewport__stage{
  position:relative;
  aspect-ratio:16/9;
  touch-action:none;
  cursor:grab;
}
.viewport__stage:active{ cursor:grabbing; }
.viewport__stage canvas{
  display:block; width:100%; height:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* CRT treatment: scanlines + vignette, layered over the canvas */
.viewport__glass{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.14) 0 2px,
      rgba(0,0,0,0) 2px 4px
    ),
    radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(3,7,6,.72) 100%);
  opacity:.7;
}

.viewport__hint{
  text-transform:lowercase;
  position:absolute; left:1rem; bottom:1rem;
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:.7rem; letter-spacing:.05em;
  color:var(--bone);
  opacity:.45;
  pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.viewport.is-touched .viewport__hint{ opacity:0; transform:translateY(4px); }

/* Engine readout — mono is earned here: it's screen furniture, not a label style */
.readout{
  display:flex; flex-wrap:wrap; gap:.35rem 1.75rem;
  padding:.75rem 1rem;
  border-top:1px solid rgba(253,1,11,.18);
  background:var(--screen-lip);
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:.72rem;
  letter-spacing:.04em;
}
.readout div{ display:flex; gap:.55rem; }
.readout dt{ color:rgba(242,239,234,.34); }
.readout dd{ margin:0; color:var(--bone); }

[data-theme="light"] .grain{ mix-blend-mode:multiply; opacity:.45; }

[data-theme="light"] .viewport{
  box-shadow:0 0 0 1px rgba(20,16,16,.08), 0 26px 55px -36px rgba(20,16,16,.5);
}

/* ─────────────────────────────────────────────
   THEME SWITCH
   ───────────────────────────────────────────── */
.themer{
  display:flex; gap:2px;
  padding:2px;
  border:1px solid var(--rule);
  clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.themer__opt{
  display:grid; place-items:center;
  width:29px; height:24px;
  padding:0; border:0; background:none;
  color:var(--bone-soft);
  cursor:pointer;
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
.themer__opt:hover{ color:var(--bone); }
.themer__opt[aria-checked="true"]{ background:var(--raise); color:var(--red-text); }
.themer__opt svg{ display:block; }

/* Crossfade the two logo variants rather than hard-swapping them */
.mark__words,
.foot__logo{ display:grid; }
.mark__marks img,
.mark__words img,
.foot__logo img{ grid-area:1 / 1; transition:opacity .45s var(--ease); }
.only-light{ opacity:0; }
.only-dark{ opacity:1; }
[data-theme="light"] .only-light{ opacity:1; }
[data-theme="light"] .only-dark{ opacity:0; }

/* Brief window where every colour animates, added only while switching */
.is-theming,
.is-theming *,
.is-theming *::before,
.is-theming *::after{
  transition:background-color .5s var(--ease),
             color .5s var(--ease),
             border-color .5s var(--ease),
             box-shadow .5s var(--ease) !important;
}

/* ─────────────────────────────────────────────
   STANDING — asymmetric two-column facts
   ───────────────────────────────────────────── */
.standing{ padding-block:var(--gap); }

.standing__head{
  margin:0 0 clamp(2rem,4vw,3rem);
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  font-weight:500;
  font-stretch:92%;
  letter-spacing:-.012em;
}

.facts{ margin:0; border-top:1px solid var(--rule); }
.facts__row{
  display:grid;
  grid-template-columns:minmax(0,7rem) minmax(0,1fr);
  gap:.35rem clamp(1.5rem,5vw,4rem);
  padding-block:clamp(1.3rem,2.6vw,1.9rem);
  border-bottom:1px solid var(--rule);
}
.facts dt{
  font-weight:600;
  font-stretch:108%;
  font-size:.9rem;
  letter-spacing:.02em;
  padding-top:.22rem;
}
.facts dd{
  margin:0;
  max-width:56ch;
  color:var(--bone-soft);
}

/* ─────────────────────────────────────────────
   SIGNUP
   ───────────────────────────────────────────── */
.signup{
  padding-block:var(--gap);
  border-top:1px solid var(--rule);
}
.signup__title{
  margin:0;
  font-size:clamp(2rem,5.5vw,3.4rem);
  font-weight:600;
  font-stretch:86%;
  line-height:1.02;
  letter-spacing:-.02em;
}
.signup__note{
  max-width:44ch;
  margin:1rem 0 clamp(1.8rem,3.5vw,2.6rem);
  color:var(--bone-soft);
}

.form{
  display:flex; flex-wrap:wrap; gap:.7rem;
  max-width:34rem;
}
.field{
  flex:1 1 15rem;
  min-width:0;
  padding:.85rem 1rem;
  background:var(--raise);
  border:1px solid var(--rule);
  border-radius:0;
  color:var(--bone);
  clip-path:polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
  font:inherit; font-size:.98rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field::placeholder{ color:#6E6862; }
.field:hover{ border-color:#463F3F; }
.field:focus{ outline:none; border-color:var(--red); background:#1E1A1A; }

.btn{
  padding:.85rem 1.5rem;
  border:0;
  background:var(--red);
  color:#fff;
  clip-path:polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
  font:inherit; font-size:.95rem; font-weight:500;
  cursor:pointer;
  transition:background .28s var(--ease), color .28s var(--ease), transform .12s var(--ease);
}
.btn:hover{ background:var(--red-lift); }
.btn:active{ transform:translateY(1px); }

.form__reply{
  flex-basis:100%;
  min-height:1.5rem;
  margin:.2rem 0 0;
  font-size:.9rem;
  color:var(--red);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.form__reply{ color:var(--red-text); }
.form__reply.is-shown{ opacity:1; transform:none; }

.signup__alt{
  margin-top:1.6rem;
  font-size:.92rem;
  color:var(--bone-soft);
}
.signup__alt a{ color:var(--bone); text-decoration-thickness:1px; text-underline-offset:3px; }
.signup__alt a:hover{ color:var(--red-text); }

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
.foot{
  display:flex; flex-direction:column; gap:1.6rem;
  padding-block:2.4rem 3rem;
  border-top:1px solid var(--rule);
  font-size:.82rem;
  color:var(--bone-soft);
}
.foot__logo{ width:118px; height:auto; opacity:.9; }
.foot__meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.5rem;
}
.foot__links{ display:flex; gap:1.2rem; margin-left:auto; }
.foot a{ color:var(--bone-soft); text-decoration:none; }
.foot a:hover{ color:var(--red-text); }

/* ─────────────────────────────────────────────
   ONE ORCHESTRATED PAGE-LOAD SEQUENCE
   ───────────────────────────────────────────── */
.lift{
  opacity:0;
  transform:translateY(14px);
}
body.is-ready .lift{
  opacity:1;
  transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d,0ms);
}

@media (max-width:640px){
  .top{ flex-wrap:wrap; gap:.9rem 1.2rem; }
  .mark{ margin-right:auto; }
  .mark__marks img{ height:28px; }
  .mark__word{ height:16px; }
  .status{ order:3; flex-basis:100%; }
  .viewport__stage{ aspect-ratio:4/3; }
  .readout{ gap:.3rem 1.1rem; font-size:.67rem; }
  .facts__row{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .lift{ opacity:1; transform:none; }
}