/* hacKicker — "The Record, Mapped" — design system + experience styles */

/* ---------- fonts ---------- */
@font-face{
  font-family:"Clash"; src:url("../fonts/clash-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Clash"; src:url("../fonts/clash-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter"; src:url("../fonts/inter-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JB Mono"; src:url("../fonts/jbmono-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --ink:#06090b;
  --ink-2:#0a1114;
  --bone:#ecf2ed;
  --dim:#9aa5a6;
  --faint:#93a9a2;
  --mint:#63d9b2;
  --mint-soft:rgba(99,217,178,.55);
  --hair:rgba(236,231,219,.13);
  --hair-soft:rgba(236,231,219,.08);
  --max:76rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:"Inter",system-ui,sans-serif; font-size:1rem; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--mint); color:var(--ink)}
a{color:inherit; text-decoration:none}
main{display:block}

.eyebrow{
  font-family:"JB Mono",monospace; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mint); margin:0 0 1.4rem;
}
.display{
  font-family:"Clash",sans-serif; font-weight:600;
  font-size:clamp(2.9rem,6.6vw,5.6rem); line-height:.97; letter-spacing:-.02em;
  margin:0 0 1.5rem;
}
.display--s{ font-size:clamp(2.1rem,4.6vw,3.7rem); }
.lede{
  color:var(--dim); max-width:34em; font-size:clamp(1rem,1.35vw,1.12rem);
  margin:0 0 1.8rem;
}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem clamp(1.2rem,4vw,3rem);
  background:linear-gradient(rgba(4,7,8,.72),rgba(4,7,8,0));
}
.nav__brand{
  font-family:"Clash",sans-serif; font-weight:600; font-size:1.28rem; letter-spacing:-.01em;
}
.nav__dot{color:var(--mint)}
.nav__links{display:flex; gap:clamp(1.1rem,2.6vw,2.2rem)}
.nav__links a{
  font-family:"JB Mono",monospace; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); padding:.35rem 0;
  border-bottom:1px solid transparent; transition:color .25s,border-color .25s;
}
.nav__links a:hover{color:var(--bone); border-color:var(--mint)}

/* ---------- stage (shared: no-JS / still / full) ---------- */
.stage{position:relative; background:var(--ink)}
.stage__sticky{position:relative; min-height:100vh; min-height:100svh; overflow:hidden}
.stage__canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  background:radial-gradient(120% 100% at 50% 30%, var(--ink-2) 0%, var(--ink) 62%);
}
.stage__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(rgba(4,7,8,.5), rgba(4,7,8,0) 22%),
    radial-gradient(125% 95% at 50% 44%, rgba(0,0,0,0) 42%, rgba(3,5,6,.5) 78%, rgba(2,4,5,.92) 100%);
}
.stage__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.055; mix-blend-mode:overlay;
  background-image:none;
}
.stage__markers{position:absolute; inset:0; pointer-events:none; z-index:5}
.chapter{position:relative; z-index:6; padding:clamp(1.2rem,4vw,3rem)}
.chapter--a{ padding-top:22vh; max-width:56rem }
.chapter--b{ padding-top:6vh; max-width:56rem }
.scroll-cue{display:none}

/* ---------- full-motion mode (html.js) ---------- */
.experience-ready .stage{height:360vh}
.experience-ready .stage__sticky{position:sticky; top:0; height:100vh; height:100svh}
.experience-ready .chapter{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center}
.experience-ready .chapter--a{ padding-top:0; max-width:none }
.experience-ready .chapter--a > *{max-width:56rem}
.experience-ready .chapter--b{ padding-top:0; align-items:flex-start; max-width:44rem;
  left:0; right:auto; opacity:0; visibility:hidden; }
.experience-ready .chapter--b > *{max-width:44rem}
.experience-ready .scroll-cue{
  display:flex; align-items:center; gap:.8rem; margin:2.6rem 0 0;
  font-family:"JB Mono",monospace; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint);
}
.scroll-cue__line{
  width:1px; height:2.6rem; background:var(--mint); display:inline-block;
  transform-origin:top; animation:cue 2.4s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cue{
  0%{transform:scaleY(0)} 45%{transform:scaleY(1); transform-origin:top}
  55%{transform-origin:bottom; transform:scaleY(1)} 100%{transform-origin:bottom; transform:scaleY(0)}
}
body.paused .scroll-cue__line{animation-play-state:paused}

/* hero ledger */
.ledger{
  display:flex; flex-wrap:wrap; gap:1.6rem; margin:0 0 2.1rem;
  font-family:"JB Mono",monospace; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
.ledger b{color:var(--bone); font-weight:600; margin-right:.45em}
.ledger span{position:relative; padding-left:1.1rem}
.ledger span::before{
  content:""; position:absolute; left:0; top:50%; width:.42rem; height:.42rem;
  border-radius:50%; background:var(--mint); transform:translateY(-50%);
  box-shadow:0 0 10px var(--mint-soft);
}

.cta-row{display:flex; flex-wrap:wrap; gap:.9rem; margin:0}
.btn{
  font-family:"JB Mono",monospace; font-size:.78rem; letter-spacing:.12em;
  padding:.85rem 1.35rem; border:1px solid var(--hair); border-radius:2px;
  transition:border-color .25s, background .25s, color .25s;
}
.btn--solid{background:var(--bone); color:var(--ink); border-color:var(--bone)}
.btn--solid:hover{background:var(--mint); border-color:var(--mint)}
.btn--ghost{color:var(--dim)}
.btn--ghost:hover{color:var(--bone); border-color:var(--mint)}

/* chapter b cluster list */
.cluster-list{list-style:none; margin:0; padding:0; max-width:30rem}
.cluster-list li{border-top:1px solid var(--hair-soft)}
.cluster-list li:last-child{border-bottom:1px solid var(--hair-soft)}
.cluster-list a{
  display:block; padding:.72rem .2rem; font-family:"JB Mono",monospace;
  font-size:.82rem; letter-spacing:.04em; color:var(--dim); transition:color .2s, padding-left .25s;
}
.cluster-list a i{font-style:normal; color:var(--mint)}
.cluster-list a:hover{color:var(--bone); padding-left:.7rem}

/* 3d markers */
.marker{
  position:absolute; left:0; top:0; display:flex; align-items:center; gap:.55rem;
  pointer-events:auto; opacity:0; white-space:nowrap;
  font-family:"JB Mono",monospace; font-size:.68rem; letter-spacing:.12em;
  color:var(--dim); transition:color .2s;
}
.marker__dot{
  width:.5rem; height:.5rem; border-radius:50%; background:var(--mint);
  box-shadow:0 0 12px var(--mint);
}
.marker__text{border-bottom:1px solid transparent; padding-bottom:2px}
.marker:hover{color:var(--bone)}
.marker:hover .marker__text{border-color:var(--mint)}

/* ---------- motion toggle ---------- */
.motion-toggle{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:50;
  font-family:"JB Mono",monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
  background:rgba(6,9,11,.72); border:1px solid var(--hair); border-radius:2px;
  padding:.6rem .9rem; cursor:pointer; backdrop-filter:blur(6px);
  transition:color .2s,border-color .2s;
}
.motion-toggle:hover{color:var(--bone); border-color:var(--mint)}
.experience-ready .motion-toggle{ display:block }

/* ---------- responsive ---------- */
@media (max-width:760px){
  .nav__links a{ font-size:.66rem }
  .experience-ready .stage{height:330vh}
  .experience-ready .chapter--b{max-width:none; right:0}
  .experience-ready .chapter--b > *{max-width:none}
  .chapter--a{padding-top:14vh}
  .row{grid-template-columns:1fr auto; grid-template-areas:"id date" "title title" "link link"; row-gap:.3rem}
  .row__id{grid-area:id} .row__date{grid-area:date}
  .row__title{grid-area:title} .row__link{grid-area:link; text-align:left}
  .stage__markers{display:none}
}

/* ---------- reduced motion: composed still ---------- */
@media (prefers-reduced-motion:reduce){
  .experience-ready .stage{height:auto}
  .experience-ready .stage__sticky{position:relative; height:auto; min-height:100vh}
  .experience-ready .chapter{position:relative; inset:auto; opacity:1 !important; visibility:visible !important;
    transform:none !important; justify-content:flex-start}
  .experience-ready .chapter--a{padding-top:20vh}
  .experience-ready .scroll-cue{display:none}
  .scroll-cue__line{animation:none}
  .stage__markers{display:none}
  .motion-toggle{display:none !important}
}