:root { --ink:#0c1114; --ash:#d8d8d2; --mist:#c5d0d4; --ember:#d99a51; --line:rgba(219,227,227,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; background:#101719; color:#e7e6df; font:16px/1.62 Georgia, 'Times New Roman', serif; }
a { color:inherit; text-decoration-color:rgba(217,154,81,.65); text-underline-offset:4px; }
.hero { min-height:100svh; position:relative; overflow:hidden; display:grid; align-items:end; padding:clamp(2rem,8vw,8rem); background:linear-gradient(180deg,rgba(14,25,30,.16),rgba(8,12,13,.83)),url('/assets/fredericus-banner.png') center/cover; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,10,10,.45),transparent 57%,rgba(7,10,10,.25)); pointer-events:none; }
.hero-copy { max-width:45rem; position:relative; z-index:2; text-shadow:0 2px 16px #000; }
.eyebrow { margin:0 0 .7rem; text-transform:uppercase; letter-spacing:.15em; font:700 .7rem/1.2 Arial,sans-serif; color:#d7b282; }
h1,h2,h3 { font-weight:400; line-height:1.04; margin:.1em 0 .45em; }
h1 { font-size:clamp(4rem,13vw,10rem); letter-spacing:-.065em; }
h2 { font-size:clamp(2rem,5vw,4.2rem); max-width:18ch; }
h3 { font-size:1.42rem; }
.tagline { font-size:clamp(1.2rem,2.5vw,1.8rem); margin:0; color:#f3efe7; }
.intro { max-width:37rem; color:#d6d8d2; }
.down { display:inline-block; margin-top:1.5rem; font-family:Arial,sans-serif; font-size:.9rem; }
.mist { position:absolute; border-radius:50%; filter:blur(44px); opacity:.35; background:rgba(221,231,230,.48); width:75vw; height:28vh; pointer-events:none; }
.mist-one { left:-18vw; bottom:16vh; animation:drift 22s ease-in-out infinite alternate; }
.mist-two { right:-25vw; bottom:38vh; opacity:.22; animation:drift 31s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform:translateX(16vw) translateY(-3vh); } }
.section { max-width:76rem; padding:clamp(4rem,10vw,9rem) clamp(1.5rem,8vw,8rem); margin:auto; border-top:1px solid var(--line); }
.listening { background:radial-gradient(circle at 83% 30%,rgba(217,154,81,.12),transparent 30%); }
.listening p,.origin>p,.notes>p { max-width:53ch; font-size:1.15rem; }
.action-row { display:flex; flex-wrap:wrap; align-items:center; gap:1.3rem; margin-top:2rem; }
.button { display:inline-block; padding:.8rem 1.15rem; border:1px solid rgba(217,154,81,.7); text-decoration:none; font-family:Arial,sans-serif; font-size:.84rem; }
.quiet-link { font-family:Arial,sans-serif; font-size:.86rem; }
.origin { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,8vw,9rem); background:#151d1e; }
.discography { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; align-items:start; }
.discography>.eyebrow,.discography>h2 { grid-column:1/-1; }
.release-card { min-height:16rem; padding:1.7rem; border:1px solid var(--line); background:linear-gradient(135deg,rgba(217,154,81,.07),transparent 58%); }
.origin-card { background:linear-gradient(135deg,rgba(181,201,206,.09),transparent 58%); }
.release-state,.capsule-note { font:700 .7rem/1.4 Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.release-state { color:#d7b282; }.capsule-note { color:#9eacac; }
.notes { background:linear-gradient(180deg,#101719,#0c1011); }
footer { border-top:1px solid var(--line); padding:2rem clamp(1.5rem,8vw,8rem); display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; color:#aeb8b6; font-size:.85rem; }
footer p { margin:0; } footer nav { display:flex; gap:1.5rem; }
@media (max-width:650px) { .origin,.discography { grid-template-columns:1fr; }.hero { min-height:88svh; }.discography>.eyebrow,.discography>h2 { grid-column:auto; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.mist { animation:none; } }