/* ============================================================
   CULTURE — THE BEAUTIFUL MACHINE
   Shared cold-machine design system
   ============================================================ */
:root{
  --ink:#000000;
  --ink-1:#060607;
  --ink-2:#0b0b0d;
  --ink-3:#101013;
  --line:#1a1a1c;
  --line-2:#27272b;
  --couture:#F4F4F0;
  --mid:#86868a;
  --dim:#56565c;
  --faint:#2e2e32;
  --red:#066CB1;
  --red-dim:#043a60;
  --green:#36C26B;
  --e1:cubic-bezier(.16,1,.3,1);
  --e2:cubic-bezier(.7,0,.84,0);
  --pad:clamp(20px,3.4vw,52px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--couture);
  font-family:'Space Mono',monospace;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* cinematic vignette + machine scanlines */
body::before{
  content:"";position:fixed;inset:0;z-index:8800;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 52%, rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}
::selection{background:var(--red);color:#000}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* film grain over everything */
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.04;
  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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:screen;
}

/* ---------- type ---------- */
.display{font-family:'Clash Display',sans-serif;font-weight:600;letter-spacing:-.03em;line-height:.92}
.mono{font-family:'Space Mono',monospace;text-transform:uppercase}
.lbl{font-family:'Space Mono',monospace;text-transform:uppercase;font-size:11px;letter-spacing:.2em;color:var(--couture)}
.lbl.dim{color:var(--mid)}
.lbl.faint{color:var(--dim)}
.num{font-family:'Clash Display',sans-serif;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.red{color:var(--red)}

/* registration crosshair */
.reg{position:absolute;width:13px;height:13px;opacity:.55;pointer-events:none}
.reg::before,.reg::after{content:'';position:absolute;background:var(--dim)}
.reg::before{left:6px;top:0;width:1px;height:13px}
.reg::after{top:6px;left:0;height:1px;width:13px}

/* ---------- top nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);background:linear-gradient(var(--ink),rgba(0,0,0,.6) 70%,transparent);backdrop-filter:blur(2px)}
.nav .brand{display:flex;align-items:center;gap:12px}
.nav .wordmark{font-family:'Clash Display',sans-serif;font-weight:600;font-size:16px;letter-spacing:.01em}
.nav .wordmark sup{font-size:9px;color:var(--mid)}
.nav .wordmark-img,.wordmark-img{height:17px;width:auto;display:block}
.nav .tick{width:20px;height:1px;background:var(--dim)}
.nav .links{display:flex;align-items:center;gap:clamp(14px,2vw,34px)}
.nav .links a{font-family:'Space Mono',monospace;text-transform:uppercase;font-size:11px;letter-spacing:.18em;color:var(--mid);
  position:relative;padding:4px 0;transition:color .3s}
.nav .links a:hover{color:var(--couture)}
.nav .links a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--e1)}
.nav .links a:hover::after{transform:scaleX(1)}
.nav .links a.on{color:var(--couture)}
.nav .links a.on::after{transform:scaleX(1)}
.nav .live{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;color:var(--couture)}
.nav .live .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* page shell */
.page{padding-top:84px;min-height:100vh}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);
  padding-bottom:14px;margin-bottom:30px;gap:20px;flex-wrap:wrap}
.section-head h2{font-family:'Clash Display',sans-serif;font-weight:600;letter-spacing:-.025em;
  font-size:clamp(24px,3.2vw,40px);line-height:1;text-transform:none}
.eyebrow{font-family:'Space Mono',monospace;text-transform:uppercase;font-size:10px;letter-spacing:.28em;color:var(--mid);
  display:flex;align-items:center;gap:10px;margin-bottom:18px}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--red)}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:80px;padding:34px var(--pad);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:flex-end}
.foot .big{font-family:'Clash Display',sans-serif;font-weight:600;font-size:clamp(34px,7vw,90px);letter-spacing:-.035em;line-height:.85}
.foot .meta{font-size:10px;letter-spacing:.2em;color:var(--dim);text-align:right;line-height:2}

/* reveal-on-scroll */
[data-rise]{opacity:0;transform:translateY(28px);filter:blur(7px);transition:opacity .85s var(--e1),transform .95s var(--e1),filter .85s var(--e1)}
[data-rise].in{opacity:1;transform:translateY(0);filter:blur(0)}
:focus-visible{outline:1px solid var(--red);outline-offset:3px}

/* generic chip */
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);padding:6px 11px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
.chip.qual{border-color:var(--red);color:var(--couture)}
.chip.qual .d{width:5px;height:5px;border-radius:50%;background:var(--red)}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important}
  body{animation:none!important}
  [data-rise]{opacity:1;transform:none;filter:none;transition:none}
}
@media (max-width:760px){
  .nav .links{display:none}
}