/* ============ FONTS — TT Firs Neue ============ */
@font-face{font-family:"Firs";src:url("fonts/FirsNeue-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Firs";src:url("fonts/FirsNeue-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Firs";src:url("fonts/FirsNeue-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Firs";src:url("fonts/FirsNeue-DemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Firs";src:url("fonts/FirsNeue-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Firs";src:url("fonts/FirsNeue-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Firs";src:url("fonts/FirsNeue-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Firs";src:url("fonts/FirsNeue-BlackItalic.ttf") format("truetype");font-weight:900;font-style:italic;font-display:swap}

/* ============ TOKENS ============ */
:root{
  --ink:#080606;
  --ink-2:#0d0a0a;
  --paper:#f4f1ee;
  --white:#ffffff;
  --gray:#b3b3b3;
  --gray-d:#6f6a6a;
  --red:#c40606;
  --red-hot:#ff1e1e;
  --red-deep:#7a0303;
  --line:rgba(255,255,255,.12);
  --glow:1;            /* tweakable */
  --grain:.07;         /* tweakable */
  --maxw:1360px;
  --gut:clamp(20px,5vw,80px);
  --ff:"Firs","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff);
  background:var(--ink);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font-family:inherit}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);width:100%}

/* film grain overlay (global) */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:9000;opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
  animation:grain 1.1s steps(3) infinite;
}
.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;background:var(--red);z-index:9500;transform:scaleX(0);transform-origin:0 50%;will-change:transform}
@keyframes grain{
  0%{transform:translate(0,0)}33%{transform:translate(-4%,2%)}66%{transform:translate(3%,-3%)}100%{transform:translate(0,0)}
}

/* eyebrow / kicker */
.kicker{
  font-weight:600;font-size:clamp(11px,1vw,13px);
  letter-spacing:.42em;text-transform:uppercase;color:var(--red);
  display:inline-flex;align-items:center;gap:.9em;
}
.kicker::before{content:"";width:34px;height:1px;background:var(--red);display:inline-block}
.kicker.muted{color:var(--gray)}
.kicker.muted::before{background:var(--gray-d)}

/* reveal helpers — animation-driven (transitions get stuck in some engines) */
.reveal{opacity:0}
.reveal.in{animation:revRise .9s cubic-bezier(.16,1,.3,1) both}
.reveal.done{opacity:1;transform:none;animation:none}
@keyframes revRise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}
[data-reduce] .reveal,[data-reduce] .reveal.in{opacity:1;transform:none;animation:none}

/* line-mask reveal for headlines */
.lines{display:block}
.lines .ln{display:block;overflow:hidden}
.lines .ln > span{display:block;transform:translateY(110%)}
.lines.in .ln > span{animation:revLine 1.05s cubic-bezier(.16,1,.3,1) both}
.lines.in .ln:nth-child(2) > span{animation-delay:.09s}
.lines.in .ln:nth-child(3) > span{animation-delay:.18s}
.lines.in .ln:nth-child(4) > span{animation-delay:.27s}
.lines.done .ln > span{transform:none;animation:none}
@keyframes revLine{from{transform:translateY(110%)}to{transform:translateY(0)}}
[data-reduce] .lines .ln > span{transform:none;animation:none}