/* ═══════════════════════════════════════════════════════════════
v2.css — shared design system for the pixel-editorial redesign.
Tokens mirror the reference system: paper #fafafa, card-dark
#1a1a1a, accent #f24e1e, Editorial serif / Geist / Geist Mono /
Departure Mono (pixel font for labels).
─────────────────────────────────────────────────────────────── */
@font-face{
font-family:'Departure Mono';
src:url('/assets/fonts/DepartureMono-Regular.woff2') format('woff2');
font-weight:400;font-style:normal;font-display:swap;
}
:root{
--serif:'Instrument Serif',Georgia,serif;
--sans:'Geist',system-ui,sans-serif;
--mono:'Geist Mono',ui-monospace,monospace;
--px-font:'Departure Mono',ui-monospace,monospace;
--bg-page:#fafafa;
--bg-card-dark:#1a1a1a;
--bg-card-light:#fff;
--bg-image-frame:#e7e7e7;
--bg-footer:#2b2a28;
--text-primary:#000;
--text-secondary:rgba(0,0,0,.64);
--text-tertiary:rgba(0,0,0,.5);
--text-mono-label:#646464;
--text-inverse:#f3f2ef;
--text-inverse-muted:#8a8884;
--inverse-50:rgba(255,255,255,.5);
--accent:#f24e1e;
--border-subtle:rgba(0,0,0,.07);
--border-on-dark:rgba(243,242,239,.13);
--surface-on-dark:rgba(243,242,239,.13);
--surface-on-dark-hover:rgba(243,242,239,.25);
--r-media:12px;
--r-card:16px;
--r-about:24px;
--r-playing:26px;
--r-pill:9999px;
--mw:1280px;
/* tokens some shared site.css rules read */
--bg:var(--bg-page);--surface:var(--bg-card-light);--border:#e4e2dd;--text:#111;--subtext:var(--text-mono-label);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg-page);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{font:inherit;color:inherit}
::selection{background:#111;color:#fafafa}
.wrap{max-width:var(--mw);margin:0 auto;padding:0 32px}
/* type helpers */
.lbl{font-family:var(--px-font);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mono-label)}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.005em}
/* ════ SCROLL REVEALS ════ */
@media (prefers-reduced-motion: no-preference){
.js-loaded .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.js-loaded .reveal.in-view{opacity:1;transform:none}
}
/* ════ PILL NAV ════ */
.pill-wrap{position:absolute;top:30px;left:50%;transform:translateX(-50%);z-index:20;width:min(780px,calc(100% - 40px))}
.pill-wrap.on-light{position:static;transform:none;margin:26px auto 0}
.pill{display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--r-pill);padding:9px 10px 9px 26px}
.on-light .pill{background:rgba(0,0,0,.045);border-color:var(--border-subtle)}
.pill-name{font-family:var(--px-font);font-size:13px;letter-spacing:.14em;color:var(--text-inverse);white-space:nowrap}
.on-light .pill-name{color:var(--text-primary)}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--text-inverse-muted);transition:color .15s}
.nav a:hover,.nav a.active{color:#fff}
.on-light .nav a{color:var(--text-mono-label)}
.on-light .nav a:hover,.on-light .nav a.active{color:#000}
.pill-contact{font-family:var(--mono);font-size:13px;letter-spacing:.08em;background:#0a0a0a;color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);padding:11px 24px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.pill-contact:hover{background:#f3f2ef;color:#0a0a0a}
.on-light .pill-contact{border-color:#0a0a0a}
.on-light .pill-contact:hover{background:#333;color:#fff}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--text-inverse)}
.on-light .burger{color:var(--text-primary)}
.burger svg{width:22px;height:22px}
/* ════ SPOTLIGHT PIXEL HOVER ════
.px-hover holds a base ![]()
/