/* ==========================================================================
   EPOCH · shared site styles — loaded by every page BEFORE its inline
   <style>, so page rules always win the cascade.

   Each page sets its palette in its own :root using these canonical vars:
     --bg --bg2 --line --frost --bright --snow --accent --accent2
     --accent-rgb --bg-rgb        (RGB triplets, for translucent surfaces)
   The defaults below are the ice/ember palette used by the ice-family pages
   (index, token, projects, bounties, contact). Season pages override them
   and also load assets/season.css.
   ========================================================================== */
:root {
  --bg:#13171a; --bg2:#1b2125; --line:#2c363b;
  --frost:#94a3a0; --bright:#dde3e1; --snow:#eef1f0;
  --accent:#e23b2e; --accent2:#e8a23d;
  --accent-rgb:226,59,46; --bg-rgb:19,23,26;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}

/* ---- reset + base ---- */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
html, body { max-width:100%; }
body {
  background:var(--bg);
  color:var(--bright); font-family:var(--font-body); font-weight:300;
  line-height:1.7; letter-spacing:0.01em; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
canvas.atmo { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

/* ---- layout + type ---- */
.wrap { max-width:1080px; margin:0 auto; padding:0 28px; position:relative; z-index:2; }
.kicker { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.32em; text-transform:uppercase; color:var(--accent); display:inline-block; }
h1,h2,h3 { font-family:var(--font-display); font-weight:600; line-height:1.05; color:var(--snow); }
.mono { font-family:var(--font-mono); } .frost { color:var(--frost); }
em { color:var(--accent2); font-style:italic; }
strong { color:var(--snow); font-weight:600; }

/* ---- nav ---- */
nav { position:sticky; top:0; z-index:100; backdrop-filter:blur(12px); background:rgba(var(--bg-rgb),0.72); border-bottom:1px solid var(--line); }
nav .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { font-family:var(--font-mono); font-weight:600; letter-spacing:0.18em; color:var(--snow); font-size:0.95rem; text-decoration:none; display:inline-flex; align-items:center; gap:9px; }
.brand .btxt { color:var(--snow); }
.brand .btxt span { color:var(--accent); }
.brandmark { width:22px; height:22px; flex:none; }
.navlinks { display:flex; gap:24px; align-items:center; }
.navlinks a { font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--frost); text-decoration:none; transition:color 0.25s; }
.navlinks a:hover { color:var(--accent); }
.navlinks a.here { color:var(--accent); }
.navlinks a.cta { color:var(--bright); border:1px solid var(--line); padding:7px 14px; border-radius:7px; }
.navlinks a.cta:hover { border-color:var(--accent); color:var(--accent); }
.navlinks a.now { color:var(--accent); border:1px solid var(--accent); padding:7px 13px; border-radius:7px; display:inline-flex; align-items:center; gap:8px; }
.navlinks a.now:hover { background:rgba(var(--accent-rgb),0.10); }
.navlinks a.now::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:nowpulse 2.2s ease-in-out infinite; }
@keyframes nowpulse { 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }

/* ---- sections ---- */
section { padding:52px 0; border-top:1px solid var(--line); position:relative; }
.sec-head { max-width:720px; margin-bottom:32px; }
.sec-head h2 { font-size:clamp(1.9rem,4.5vw,3rem); margin:14px 0 0; letter-spacing:-0.015em; }
.sec-head p { margin-top:16px; color:var(--frost); font-size:1.1rem; }

/* ---- buttons ---- */
.btn { font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--bg); background:var(--accent); padding:14px 24px; border-radius:9px; text-decoration:none; font-weight:600; white-space:nowrap; transition:transform 0.2s, background 0.2s; }
.btn:hover { transform:translateY(-2px); background:var(--accent2); }
.btn.ghost { background:none; color:var(--accent); border:1px solid var(--line); }
.btn.ghost:hover { border-color:var(--accent); background:rgba(var(--accent-rgb),0.08); }

/* ---- footer ---- */
footer { padding:44px 0; border-top:1px solid var(--line); position:relative; }
footer .wrap { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }
footer .disc { font-family:var(--font-mono); font-size:0.73rem; color:var(--frost); max-width:640px; line-height:1.7; }
footer .fmeta { display:flex; align-items:center; gap:22px; }
footer .flink { font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--frost); text-decoration:none; border:1px solid var(--line); padding:7px 14px; border-radius:7px; transition:color 0.25s, border-color 0.25s; }
footer .flink:hover { color:var(--accent); border-color:var(--accent); }

/* ---- reveal + a11y ---- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity 0.9s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity:1; transform:none; }
a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  canvas.atmo { display:none; }
  .navlinks a.now::before { animation:none; }
}

/* ---- mobile comfort ---- */
@media (max-width:640px){
  .wrap { padding:0 20px; }
  .navlinks { gap:10px; }
  .navlinks a:not(.cta):not(.now){ display:none; }
  .navlinks a.cta, .navlinks a.now { font-size:0.66rem; letter-spacing:0.07em; padding:6px 10px; white-space:nowrap; }
  .brand { font-size:0.88rem; letter-spacing:0.14em; gap:7px; }
  .brandmark { width:19px; height:19px; }
  section { padding:40px 0; }
  .sec-head { margin-bottom:24px; }
  .btn { width:100%; text-align:center; padding:13px 18px; }
  footer { padding:36px 0; }
}