/* ==========================================================================
   APEX NOIR / landing
   White · dark grey · oxblood accent
   ========================================================================== */

:root{
  /* palette ------------------------------------------------------------- */
  --paper:      #f5f4f2;   /* warm off-white, the "page" */
  --white:      #ffffff;
  --ink:        #111214;   /* dark grey / near-black, figures + type */
  --ink-soft:   #1b1c1f;
  --grey-700:   #3a3c40;
  --grey-500:   #6a6d72;   /* AA against --paper at label sizes */
  --grey-400:   #9a9da2;   /* AA against --ink */
  --grey-300:   #c2c3c5;
  --grey-150:   #e2e1de;
  --red:        #82000d;   /* brand accent */
  --red-lift:   #a10312;

  /* type ---------------------------------------------------------------- */
  --sans:  'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* metrics ------------------------------------------------------------- */
  --gutter: clamp(20px, 5vw, 72px);
  --head-h: 58px;
  --hair: 1px solid var(--grey-150);
  --ease: cubic-bezier(.16,.84,.32,1);
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,p,dl,dd,dt,blockquote,figure,ol,ul{ margin:0; padding:0; }
ol,ul{ list-style:none; }
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }

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

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:fixed; top:-100px; left:var(--gutter); z-index:200;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; font:500 11px/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip:focus{ top:12px; }

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

/* ------------------------------------------------------- shared atoms -- */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font:500 10px/1 var(--mono);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--grey-500);
}
.eyebrow .rule{
  flex:0 1 clamp(28px, 7vw, 90px);
  height:1px; background:currentColor; opacity:.45;
}
.eyebrow > span:first-child{ color:var(--red); }
.eyebrow--inv{ color:var(--grey-300); }
.eyebrow--inv > span:first-child{ color:#d9414d; }

.btn{
  --btn-fg:var(--paper); --btn-bg:var(--ink);
  display:inline-flex; align-items:center; gap:14px;
  padding:15px 24px;
  background:var(--btn-bg); color:var(--btn-fg);
  font:500 11px/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--btn-bg);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; transition:transform .4s var(--ease); }
.btn:hover{ background:var(--red); border-color:var(--red); color:var(--paper); }
.btn:hover svg{ transform:translateX(5px); }

/* reveal-on-scroll */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ================================================================ HEAD == */
.head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.head::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--red);
}
.head.is-stuck{
  border-bottom-color:var(--grey-150);
  background:color-mix(in srgb, var(--paper) 96%, transparent);
}
.head__inner{
  height:var(--head-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:0 var(--gutter);
}
.head__brand{ display:flex; align-items:center; gap:11px; }
.head__mark{ width:26px; height:auto; }
.head__word{
  font:700 12px/1 var(--sans);
  letter-spacing:.3em; text-transform:uppercase;
}
.head__nav{ display:flex; gap:clamp(18px,3vw,40px); }
.head__nav a{
  font:400 10px/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey-500);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.head__nav a:hover{ color:var(--ink); border-bottom-color:var(--red); }

.head__status{
  display:flex; align-items:center; gap:8px;
  font:400 10px/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey-500);
}
.head__status .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--red);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.22} }
@media (prefers-reduced-motion: reduce){ .head__status .dot{ animation:none } }

@media (max-width: 860px){
  .head__status{ display:none; }
  .head__nav{ gap:16px; }
}
@media (max-width: 560px){
  .head__nav a{ font-size:9px; letter-spacing:.12em; }
  .head__word{ font-size:10px; letter-spacing:.24em; }
}
@media (max-width: 400px){
  .head__nav a:not(:last-child){ display:none; }
}

/* ================================================================ HERO == */
.hero{
  min-height:100svh;
  padding:calc(var(--head-h) + clamp(28px,6vh,64px)) var(--gutter) clamp(18px,3vh,30px);
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(16px,3vh,34px);
  position:relative;
}
/* faint vertical grid, the technical underlay */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, var(--grey-150) 1px, transparent 1px) 0 0/25% 100%;
  opacity:.55;
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.hero > *{ position:relative; }

.hero__type{ text-align:center; display:grid; justify-items:center; gap:clamp(14px,2.4vh,26px); }

.display{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px, 6.3vw, 96px);
  line-height:.94;
  letter-spacing:-.015em;
  text-transform:uppercase;
  display:grid;
  gap:.02em;
  white-space:nowrap;
}
.display__l2{ font-weight:700; }
.display em{
  font-style:italic;
  font-weight:400;
  color:var(--red);
  text-transform:lowercase;
  letter-spacing:-.01em;
}

.hero__sub{
  max-width:44ch;
  font-size:clamp(13px,1.35vw,15px);
  line-height:1.7;
  color:var(--grey-700);
}

/* ------------------------------------------------------------- stage --- */
.stage{
  display:grid; grid-template-rows:1fr auto;
  gap:12px; justify-items:center;
  min-height:0;
}
.stage__frame{
  position:relative;
  width:min(100%, 380px);
  height:100%;
  min-height:280px;
  display:grid; place-items:center;
}
.stage__canvas{
  width:100%; height:100%;
  /* the figure is drawn by js/glitch.js */
}

.tick{ position:absolute; width:13px; height:13px; opacity:.85; }
.tick::before,.tick::after{ content:""; position:absolute; background:var(--ink); }
.tick::before{ width:100%; height:1px; }
.tick::after{ width:1px; height:100%; }
.tick--tl{ top:0; left:0 }
.tick--tr{ top:0; right:0 }
.tick--tr::before{ right:0 } .tick--tr::after{ right:0 }
.tick--bl{ bottom:0; left:0 }
.tick--bl::before{ bottom:0 } .tick--bl::after{ bottom:0 }
.tick--br{ bottom:0; right:0 }
.tick--br::before{ bottom:0; right:0 } .tick--br::after{ bottom:0; right:0 }

.stage__label{
  position:absolute; top:50%;
  font:400 9px/1 var(--mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--grey-500);
  white-space:nowrap;
}
.stage__label--l{ left:0;  transform:translate(-50%,-50%) rotate(-90deg); }
.stage__label--r{ right:0; transform:translate(50%,-50%) rotate(90deg); }
.stage__label span{ transition:opacity .18s linear; }
.stage__label.is-glitching span{ opacity:.25; }

.stage__caption{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font:400 9.5px/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey-500);
  text-align:center;
}
.stage__caption .sq{ width:5px; height:5px; background:var(--red); }

@media (max-width: 700px){
  .stage__label{ display:none; }
  .stage__frame{ min-height:230px; }
}

/* -------------------------------------------------------------- rail --- */
.rail{
  border-top:var(--hair);
  padding-top:16px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.rail__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,auto));
  gap:clamp(18px,4vw,64px);
}
.rail__grid dt{
  font:400 9px/1.5 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey-500);
}
.rail__grid dd{
  font:500 11px/1.5 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
}
@media (max-width: 700px){
  .rail{ justify-content:center; }
  .rail__grid{ grid-template-columns:repeat(2,1fr); width:100%; }
  .rail .btn{ width:100%; justify-content:space-between; }
}

/* =========================================================== MANIFESTO == */
.manifesto{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(80px,14vh,180px) var(--gutter);
}
.manifesto__inner{ max-width:1180px; margin:0 auto; display:grid; gap:clamp(38px,7vh,80px); }

.statement{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(28px,5.4vw,72px);
  line-height:1.06;
  letter-spacing:-.015em;
  max-width:20ch;
}
.statement em{ color:#c8333f; font-style:italic; }

.manifesto__cols{
  display:grid; gap:clamp(26px,4vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  max-width:900px; margin-left:auto;
}
.manifesto__cols p{
  font-size:14.5px; line-height:1.75;
  color:var(--grey-300);
}
.manifesto__cols p:nth-child(2){ transition-delay:.12s; }

/* ============================================================== TICKER == */
.ticker{
  background:var(--red);
  color:var(--paper);
  overflow:hidden;
  padding:13px 0;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.ticker__track{
  display:flex; width:max-content;
  animation:slide 34s linear infinite;
}
.ticker__track span{
  font:500 10.5px/1 var(--mono);
  letter-spacing:.3em; text-transform:uppercase;
  padding:0 26px;
  white-space:nowrap;
}
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none } }

/* ============================================================ DOCTRINE == */
.doctrine{
  padding:clamp(80px,14vh,170px) var(--gutter);
  display:grid; gap:clamp(38px,6vh,70px);
  max-width:1400px; margin:0 auto;
}
.doctrine__grid{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  background:var(--grey-150);
  border:var(--hair);
}
.card{
  background:var(--paper);
  padding:clamp(28px,3.4vw,48px);
  display:grid; align-content:start; gap:16px;
  position:relative;
  transition:background .5s var(--ease), color .5s var(--ease);
}
.card:nth-child(2){ transition-delay:.1s }
.card:nth-child(3){ transition-delay:.2s }
.card__no{
  font-family:var(--serif); font-style:italic;
  font-size:22px; color:var(--red);
  text-transform:uppercase; letter-spacing:.05em;
}
.card h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px,3vw,40px);
  line-height:1.05;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.card p{ font-size:14px; line-height:1.75; color:var(--grey-700); max-width:38ch; }
.card__meta{
  margin-top:8px;
  font:400 9px/1 var(--mono);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--grey-500);
}
.card:hover{ background:var(--white); }

/* ============================================================ WAITLIST == */
.waitlist{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(80px,15vh,190px) var(--gutter);
  position:relative;
  overflow:hidden;
}
.waitlist::after{
  content:""; position:absolute; inset:auto -10% -60% 40%;
  height:70vh;
  background:radial-gradient(closest-side, rgba(130,0,13,.55), transparent 72%);
  pointer-events:none;
}
.waitlist__inner{
  position:relative; z-index:1;
  max-width:820px; margin:0 auto;
  display:grid; gap:clamp(22px,3.6vh,38px);
}
.waitlist__title{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(44px,9vw,120px);
  line-height:.9;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.waitlist__title em{ font-weight:400; color:#c8333f; }
.waitlist__note{
  max-width:46ch;
  font-size:14.5px; line-height:1.75;
  color:var(--grey-300);
}

/* --------------------------------------------------------------- form -- */
.form__row{
  display:flex; align-items:stretch; gap:0;
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:border-color .35s var(--ease);
}
.form__row:focus-within{ border-bottom-color:var(--paper); }
.form.is-error .form__row{ border-bottom-color:#e0505c; }

.form__input{
  flex:1 1 auto; min-width:0;
  background:none; border:0; color:var(--paper);
  font:400 clamp(17px,2.6vw,26px)/1.2 var(--sans);
  letter-spacing:.01em;
  padding:16px 4px 16px 0;
}
.form__input::placeholder{ color:rgba(245,244,242,.32); }
.form__input:focus{ outline:none; }
.form__input:-webkit-autofill{
  -webkit-text-fill-color:var(--paper);
  transition:background-color 9999s;
}

.form__trap{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.form__submit{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:12px;
  background:none; border:0; cursor:pointer;
  color:var(--paper);
  font:500 11px/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  padding:0 2px 0 22px;
  transition:color .3s var(--ease), opacity .3s var(--ease);
}
.form__submit svg{ width:20px; height:20px; transition:transform .4s var(--ease); }
.form__submit:hover{ color:#e2606b; }
.form__submit:hover svg{ transform:translateX(5px); }
.form__submit:disabled{ opacity:.4; cursor:default; }
.form__submit:disabled svg{ transform:none; }

.form__msg{
  min-height:1.3em; margin-top:14px;
  font:400 10.5px/1.5 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey-300);
}
.form__msg.is-error{ color:#e0505c; }
.form__msg.is-ok{ color:var(--paper); }

/* success state: the form collapses into a confirmation */
.form.is-done .form__row{ opacity:.28; pointer-events:none; }

.waitlist__fine{
  font-size:11.5px; line-height:1.7;
  color:var(--grey-400);
  max-width:52ch;
}

/* ================================================================ FOOT == */
.foot{
  background:var(--ink);
  color:var(--grey-400);
  border-top:1px solid rgba(255,255,255,.1);
  padding:clamp(44px,7vh,80px) var(--gutter);
}
.foot__inner{
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:36px; flex-wrap:wrap;
}
.foot__logo{
  width:96px; height:auto;
  filter:invert(1) brightness(1.4);
  opacity:.85;
}
.foot__nav{ display:flex; gap:clamp(16px,2.6vw,34px); flex-wrap:wrap; }
.foot__nav a{
  font:400 10px/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase;
  transition:color .3s var(--ease);
}
.foot__nav a:hover{ color:var(--paper); }
.foot__legal{
  display:flex; gap:20px; flex-wrap:wrap;
  font:400 9.5px/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey-400);
  opacity:.8;
}

@media (max-width: 760px){
  .foot__inner{ flex-direction:column; align-items:flex-start; gap:26px; }
}

/* --------------------------------------------------------- no-script --- */
.no-js .stage__frame{ min-height:200px; }