/* ============================================================
   CARDINAL LABS — Ember Ledger
   coal ground · bone ink · signal red · mono metadata
   ============================================================ */

/* ---------- fonts (self-hosted) ---------- */
@font-face{ font-family:'Archivo Black'; src:url('assets/fonts/archivo-black-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Archivo'; src:url('assets/fonts/archivo-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Archivo'; src:url('assets/fonts/archivo-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Archivo'; src:url('assets/fonts/archivo-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'IBM Plex Mono'; src:url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'IBM Plex Mono'; src:url('assets/fonts/ibm-plex-mono-600.woff2') format('woff2'); font-weight:600; font-display:swap; }

/* ---------- tokens ---------- */
:root{
  --coal:#131014;
  --surface:#1E181B;
  --bone:#F3EDE8;
  --muted:#A69DA0;
  --hairline:rgba(243,237,232,.09);
  --red:#E8323C;
  --red-hot:#FF4B52;
  --amber:#B06A2A;
  --hairline-strong:rgba(243,237,232,.22);
  --mark:rgba(243,237,232,.6);
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --sans:'Archivo',system-ui,sans-serif;
  --disp:'Archivo Black','Archivo',system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(1.2rem,4vw,4rem);
}

/* ---------- base ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  background:var(--coal); color:var(--bone);
  font-family:var(--sans); font-size:1.02rem; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
.display em,.display-sm em,.nav-name em{ font-style:normal; color:var(--red); }
em{ font-style:normal; }
::selection{ background:var(--bone); color:var(--coal); }

.mono{ font-family:var(--mono); font-weight:400; letter-spacing:.18em; font-size:.68rem; text-transform:uppercase; color:var(--muted); }
.red{ color:var(--red-hot); }
.display{ font-family:var(--disp); font-weight:400; line-height:1.02; letter-spacing:-.015em; font-size:clamp(2.1rem,5.4vw,4.2rem); }
.display-sm{ font-family:var(--disp); font-weight:400; line-height:1.05; letter-spacing:-.01em; font-size:clamp(1.6rem,3.4vw,2.6rem); }
.display-xs{ font-family:var(--disp); font-weight:400; line-height:1.12; font-size:clamp(1.2rem,2.2vw,1.7rem); }
.spec{ letter-spacing:.18em; }

/* ---------- intro overlay ---------- */
.intro{
  position:fixed; inset:0; z-index:90; background:var(--coal);
  display:grid; place-items:center;
  animation:intro-exit .42s var(--ease-out) 1.28s forwards;
}
.intro-inner{ text-align:center; transform:translateY(6px); }
.intro-chevron{ margin-bottom:1.1rem; overflow:visible; }
.intro-chevron path{
  stroke:var(--red); stroke-width:6; stroke-linecap:square;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:draw .34s var(--ease-out) forwards;
}
.intro-chevron .ch-r{ animation-delay:.18s; }
.intro-word{
  font-family:var(--disp); font-size:clamp(1.6rem,5vw,2.6rem); letter-spacing:.3em; text-indent:.3em; color:var(--bone);
  display:flex; justify-content:center; overflow:hidden;
}
.intro-word span{
  display:inline-block; transform:translateY(115%);
  animation:rise .5s var(--ease-out) forwards;
}
.intro-word span:nth-child(1){animation-delay:.20s}.intro-word span:nth-child(2){animation-delay:.235s}
.intro-word span:nth-child(3){animation-delay:.27s}.intro-word span:nth-child(4){animation-delay:.305s}
.intro-word span:nth-child(5){animation-delay:.34s}.intro-word span:nth-child(6){animation-delay:.375s}
.intro-word span:nth-child(7){animation-delay:.41s}.intro-word span:nth-child(8){animation-delay:.445s}
.intro-word span:nth-child(9){animation-delay:.46s}.intro-word span:nth-child(10){animation-delay:.48s}
.intro-word span:nth-child(11){animation-delay:.515s}.intro-word span:nth-child(12){animation-delay:.55s}
.intro-word span:nth-child(13){animation-delay:.585s}
.intro-rule{
  height:1px; width:min(300px,60vw); margin:.9rem auto 0; background:var(--red);
  transform:scaleX(0); transform-origin:left center;
  animation:rulex .4s var(--ease-out) .7s forwards;
}
.intro-status{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; color:var(--muted); margin-top:.85rem;
  opacity:0; animation:fadein .4s ease .9s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes rise{ to{ transform:translateY(0); } }
@keyframes rulex{ to{ transform:scaleX(1); } }
@keyframes fadein{ to{ opacity:1; } }
@keyframes intro-exit{ to{ transform:translateY(-100%); } }
.intro.done, .no-intro .intro{ display:none; }
.intro-skip .intro{ animation:none; opacity:0; transition:opacity .15s ease; pointer-events:none; }
.intro-skip .intro *{ animation:none !important; }
@media (prefers-reduced-motion:reduce){ .intro{ display:none; } }

/* ---------- cursor ---------- */
.cursor-dot,.cursor-ring{ display:none; }
@media (hover:hover) and (pointer:fine){
  .cursor-dot{
    display:block; position:fixed; z-index:99; width:6px; height:6px; border-radius:50%;
    background:var(--red); top:0; left:0; pointer-events:none; transform:translate(-50%,-50%);
    opacity:0;
  }
  .cursor-active .cursor-dot,.cursor-active .cursor-ring{ opacity:1; }
  .cursor-ring{
    display:grid; place-items:center; position:fixed; z-index:98; width:34px; height:34px; border-radius:50%;
    border:1px solid rgba(232,50,60,.55); top:0; left:0; pointer-events:none;
    transform:translate(-50%,-50%); transition:width .25s var(--ease-out),height .25s var(--ease-out),background-color .25s;
    font-family:var(--mono); font-size:.5rem; letter-spacing:.14em; color:var(--coal);
    opacity:0;
  }
  .cursor-ring::after{ content:""; }
  .cursor-ring.is-view{ width:58px; height:58px; background:var(--red); border-color:transparent; }
  .cursor-ring.is-view::after{ content:"VIEW"; }
  .cursor-ring.is-link{ width:46px; height:46px; }
}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:1.6rem;
  padding:.8rem var(--pad);
  background:linear-gradient(color-mix(in srgb,var(--coal) 92%,transparent), transparent);
  transition:background-color .3s ease, box-shadow .3s ease;
}
.nav.scrolled{ background:rgba(19,16,20,.94); box-shadow:0 1px 0 var(--hairline); }
.nav-brand{ display:flex; align-items:center; gap:.55rem; }
.nav-name{ font-family:var(--disp); font-size:.92rem; letter-spacing:.22em; }
.nav-name em{ color:var(--red-hot); }
.nav-links{ display:flex; gap:1.5rem; margin-left:auto; }
.slide-link{ font-weight:500; font-size:.88rem; }
.sl-wrap{ display:inline-block; overflow:hidden; height:1.35em; }
.sl-wrap span{ display:block; transition:transform .3s cubic-bezier(.65,0,.35,1); }
.sl-wrap span:last-child{ color:var(--red-hot); }
.slide-link:hover .sl-wrap span,
.slide-link:focus-visible .sl-wrap span{ transform:translateY(-100%); }
.nav-right{ display:flex; align-items:center; gap:1.1rem; }
.nav-coords{ font-size:.6rem; }
@media (max-width:900px){ .nav-links,.nav-coords{ display:none; } .nav-right{ margin-left:auto; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:.92rem; letter-spacing:.02em;
  padding:.85rem 1.7rem; border:1px solid transparent;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease;
  will-change:transform;
}
.btn-red{ background:var(--red); color:#000; }
.btn-red:hover,.btn-red:focus-visible{ background:var(--red-hot); }
.btn-ghost{ border-color:var(--hairline); color:var(--bone); }
.btn-ghost:hover,.btn-ghost:focus-visible{ border-color:var(--red); color:var(--red-hot); }
.btn-sm{ padding:.5rem 1.05rem; font-size:.8rem; }
.btn-lg{ padding:1.05rem 2.3rem; font-size:1rem; }
.btn:active{ transform:scale(.97); }

/* ---------- shared: plates, ticks, reveals, sections ---------- */
.plate{
  position:relative; overflow:hidden; background:var(--surface);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.plate::after{ /* film grain */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}
.tick{ position:absolute; width:14px; height:14px; pointer-events:none; z-index:2; }
.tick::before,.tick::after{ content:""; position:absolute; background:var(--mark); }
.tick::before{ width:14px; height:1px; } .tick::after{ width:1px; height:14px; }
.tick.tl{ top:10px; left:10px; } .tick.tr{ top:10px; right:10px; transform:scaleX(-1); }
.tick.bl{ bottom:10px; left:10px; transform:scaleY(-1); } .tick.br{ bottom:10px; right:10px; transform:scale(-1); }
figcaption.mono{ margin-top:.7rem; font-size:.6rem; }

.js .reveal{ opacity:0; transform:translateY(26px); }
.js .reveal.in{
  opacity:1; transform:none;
  transition:opacity .6s ease,transform .7s var(--ease-out);
  transition-delay:calc(var(--i,0)*60ms);
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

.sec-head{ padding:0 var(--pad); max-width:1200px; margin:0 auto 2.6rem; }
.sec-num{ display:block; margin-bottom:1rem; color:var(--red-hot); font-weight:600; }
.sec-sub{ color:var(--muted); margin-top:.8rem; max-width:44ch; }

/* ---------- hero ---------- */
.hero{
  min-height:100svh; display:grid; align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem);
  padding:clamp(6.5rem,12vh,9rem) var(--pad) 4.5rem;
  max-width:1440px; margin:0 auto; position:relative;
}
.hero-copy .spec{ margin-bottom:1.4rem; }
.line-mask{ display:block; overflow:hidden; }
.js .line{ display:block; transform:translateY(112%); }
.js .line-mask:nth-child(2) .line{ transition-delay:.09s; }
.js.hero-loaded .line{ transform:none; transition:transform .8s var(--ease-out); }
.hero-sub{ color:var(--muted); max-width:46ch; margin-top:1.5rem; font-size:1.06rem; }
.hero-ctas{ display:flex; gap:.9rem; margin-top:2.1rem; flex-wrap:wrap; }
.hero-pulse{
  height:1px; width:min(340px,70%); margin-top:2.6rem;
  background:repeating-linear-gradient(90deg,var(--red) 0 7px,transparent 7px 13px);
  opacity:.8; animation:dashmove 2.8s linear infinite;
}
@keyframes dashmove{ to{ background-position:52px 0; } }
@media (prefers-reduced-motion:reduce){ .hero-pulse{ animation:none; } }

.hero-visual .plate{ aspect-ratio:6/5; }
.hero-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.8) saturate(1.05); }
.schematic{ position:absolute; inset:0; width:100%; height:100%; }
.schematic .trace{
  fill:none; stroke:var(--mark); stroke-width:1.4;
  stroke-dasharray:1; stroke-dashoffset:1;
}
.hero-loaded .schematic .trace{ animation:draw .7s var(--ease-out) forwards; animation-delay:var(--d,0s); }
.schematic .pulse-path{
  fill:none; stroke:var(--red); stroke-width:1.6;
  stroke-dasharray:.04 .1; stroke-dashoffset:1; opacity:0;
}
.hero-loaded .schematic .pulse-path{ opacity:.9; animation:pulseflow 3.6s linear 1.6s infinite; }
@keyframes pulseflow{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:-1; } }
.schematic .node rect{ fill:rgba(19,16,20,.85); stroke:var(--mark); stroke-width:1; }
.schematic .node text{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; fill:var(--bone); text-anchor:middle; dominant-baseline:middle;
}
.schematic .node{ opacity:0; }
.hero-loaded .schematic .node{ animation:fadein .4s ease forwards; animation-delay:var(--d,0s); }
.schematic .core rect{ stroke:var(--red); stroke-width:1.6; }
.schematic .core text{ fill:var(--red); font-weight:600; }
@media (prefers-reduced-motion:reduce){
  .schematic .trace,.hero-loaded .schematic .trace{ animation:none; stroke-dashoffset:0; }
  .schematic .node,.hero-loaded .schematic .node{ animation:none; opacity:1; }
  .schematic .pulse-path,.hero-loaded .schematic .pulse-path{ animation:none; opacity:.5; stroke-dashoffset:0; }
}
.scroll-cue{
  position:absolute; bottom:1.6rem; left:var(--pad);
  font-size:.6rem; letter-spacing:.26em; color:var(--muted);
}
.scroll-cue:hover{ color:var(--red-hot); }
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding-top:6rem; min-height:auto; }
  .scroll-cue{ display:none; }
}

/* ---------- systems (pinned act) ---------- */
.systems{ height:340vh; position:relative; }
.systems-sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  border-top:1px solid var(--hairline);
  background:
    radial-gradient(52% 42% at 82% 16%, rgba(176,106,42,.10), transparent 70%),
    var(--coal);
}
.systems .sec-head{ margin-bottom:1.6rem; width:100%; }
.systems-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem); align-items:center;
  padding:0 var(--pad); max-width:1200px; margin:0 auto; width:100%;
}
.stages{ position:relative; min-height:270px; }
.stage{ position:absolute; inset:0; opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity .45s ease,transform .5s var(--ease-out); }
.stage.active{ opacity:1; transform:none; pointer-events:auto; }
.stage-tag{ display:block; color:var(--red-hot); font-weight:600; margin-bottom:.9rem; }
.stage p{ color:var(--muted); margin-top:.9rem; max-width:42ch; }
.stage-dots{ position:absolute; bottom:-3.4rem; left:0; display:flex; gap:1.1rem; list-style:none; }
.stage-dots li{ font-size:.62rem; color:var(--muted); border-top:1px solid var(--hairline); padding-top:.5rem; width:2.6rem; transition:color .3s,border-color .3s; }
.stage-dots li.on{ color:var(--red); border-color:var(--red); }
.systems-visual .plate{ aspect-ratio:5/4; }
.systems-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (prefers-reduced-motion:reduce){
  .systems{ height:auto; }
  .systems-sticky{ position:static; height:auto; padding:4.5rem 0; }
  .stages{ min-height:0; display:grid; gap:2.4rem; }
  .stage{ position:static; opacity:1; transform:none; pointer-events:auto; transition:none; }
  .stage-dots{ display:none; }
  .sl-wrap span{ transition:none; }
  .btn:active{ transform:none; }
}
@media (max-width:900px){
  .systems{ height:auto; }
  .systems-sticky{ position:static; height:auto; padding:4.5rem 0; }
  .systems-grid{ grid-template-columns:1fr; }
  .stages{ min-height:0; display:grid; gap:2.4rem; }
  .stage{ position:static; opacity:1; transform:none; pointer-events:auto; }
  .stage-dots{ display:none; }
  .systems-visual{ order:-1; }
}

/* ---------- ledger ---------- */
.ledger{ padding:7rem 0 5.5rem; border-top:1px solid var(--hairline); }
.entry{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.6rem); align-items:center;
  padding:0 var(--pad); max-width:1200px; margin:0 auto 3.2rem;
}
.entry-visual{ display:block; }
.entry-visual img{ transition:filter .3s ease; }
.entry-visual:hover img{ filter:brightness(1.06); }
.entry-visual:hover .tick::before,.entry-visual:hover .tick::after{ background:var(--red); }
.entry-visual:focus-visible,.nav-brand:focus-visible{ outline:1px solid var(--red); outline-offset:4px; }
.entry-visual img{ width:100%; }
.entry-live{
  position:absolute; left:14px; bottom:12px; z-index:3;
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(19,16,20,.85); padding:.45rem .8rem; font-size:.68rem; color:var(--bone);
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--red); animation:pulse 2.4s ease-in-out infinite; }
.dot.amber{ background:#B06A2A; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.45} }
@media (prefers-reduced-motion:reduce){ .dot{ animation:none; } }
.entry-info .spec{ margin-bottom:1.1rem; }
.entry-info p:not(.spec){ color:var(--muted); margin-top:1rem; }
.text-link{ display:inline-block; margin-top:1.5rem; color:var(--red-hot); font-weight:600; border-bottom:1px solid transparent; transition:border-color .2s; }
.text-link:hover,.text-link:focus-visible{ border-color:var(--red); }
.entry.next{ display:block; max-width:1200px; }
.entry-slot{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  border:1px dashed var(--hairline-strong); padding:1.5rem 1.7rem;
}
.slot-status{ display:inline-flex; align-items:center; gap:.5rem; font-size:.68rem; color:var(--muted); }
.slot-note{ color:var(--muted); font-size:.85rem; margin-top:.8rem; }
@media (max-width:900px){ .entry{ grid-template-columns:1fr; } }

/* ---------- rules ---------- */
.rules{
  padding:7rem 0 5.5rem; border-top:1px solid var(--hairline);
  background:
    radial-gradient(46% 38% at 12% 88%, rgba(176,106,42,.08), transparent 70%),
    var(--coal);
}
.rules-grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
  padding:0 var(--pad); max-width:1200px; margin:0 auto;
}
.rules-list{ list-style:none; display:grid; gap:2.6rem; }
.rule{ display:flex; gap:1.4rem; align-items:flex-start; }
.rule-num{ font-size:clamp(2rem,3.6vw,2.9rem); color:transparent; -webkit-text-stroke:1px rgba(232,50,60,.75); line-height:1; padding-top:.2rem; flex:0 0 auto; }
.rule h3{ font-family:var(--disp); font-weight:400; font-size:1.15rem; margin-bottom:.45rem; }
.rule p{ color:var(--muted); font-size:.95rem; max-width:46ch; }
.rules-visual{ position:sticky; top:14vh; }
.rules-visual .plate{ aspect-ratio:4/5; }
.rules-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lab-note{
  margin:4rem auto 0; padding:0 var(--pad); max-width:62ch;
  color:var(--muted); font-size:1.02rem;
  border-left:2px solid var(--red); padding-left:1.4rem; margin-left:max(var(--pad),calc((100vw - 1200px)/2 + var(--pad)));
}
@media (max-width:900px){
  .rules-grid{ grid-template-columns:1fr; }
  .rules-visual{ position:static; order:-1; }
  .lab-note{ margin-left:var(--pad); margin-right:var(--pad); padding-left:1.1rem; }
}

/* ---------- contact ---------- */
.contact{
  border-top:1px solid var(--hairline); position:relative; overflow:hidden;
  padding:8rem var(--pad);
  background:
    linear-gradient(rgba(19,16,20,.92), rgba(19,16,20,.95)),
    url('assets/texture-bokeh.jpg') center/cover no-repeat var(--coal);
}
.contact-inner{ max-width:1200px; margin:0 auto; text-align:center; }
.contact .sec-num{ margin-bottom:1.4rem; }
.contact-sub{ color:var(--muted); margin-top:1.4rem; }
.contact-ctas{ display:flex; gap:1rem; justify-content:center; margin-top:2.4rem; flex-wrap:wrap; }
.contact-coords{ display:block; margin-top:3.4rem; font-size:.68rem; }

/* ---------- footer ---------- */
.footer{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.4rem var(--pad); border-top:1px solid var(--hairline);
}
.foot-brand{ display:flex; align-items:center; gap:.55rem; }
.foot-note{ font-size:.6rem; }