@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@400;500&family=Newsreader:opsz,wght@6..72,300;6..72,600&display=swap');

:root {
    color-scheme: dark;
    --ink: #240d02;
    --paper: #f8e6bd;
    --amber: #c96707;
    --amber-hot: #f0aa35;
    --green: #593005;
    --line: rgba(248, 230, 189, 0.28);
    --muted: rgba(248, 230, 189, 0.8);
    font-family: "Newsreader", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #5f2706; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 72% 16%, rgba(221, 119, 21, .3), transparent 36%), linear-gradient(180deg, #8b3c0a 0%, #a84d08 48%, #713006 100%); background-attachment: fixed; color: var(--paper); font-size: 1.08rem; line-height: 1.55; overflow-x: hidden; }
a { color: inherit; }

@media (pointer: fine) {
    html, body, body * { cursor: url('/assets/cursor-unclicked.png') 10 8, auto !important; }
    html.cursor-clicked, html.cursor-clicked body, html.cursor-clicked body * { cursor: url('/assets/cursor-clicked.png') 10 8, auto !important; }
}

.pour-intro { position: fixed; z-index: 100; inset: 0; overflow: hidden; background: #020100; }
.pour-fill { position: absolute; inset: 0; background: radial-gradient(circle at 72% 16%, rgba(221, 119, 21, .3), transparent 36%), linear-gradient(180deg, #8b3c0a 0%, #a84d08 48%, #713006 100%); backface-visibility: hidden; contain: paint; transform: translate3d(0, 100%, 0); transition: transform var(--pour-duration, 3.2s) cubic-bezier(.32, 0, .16, 1); will-change: transform; }
.pour-intro.is-pouring .pour-fill { transform: translate3d(0, 0, 0); }
.pour-foam { position: absolute; inset: 0 0 auto; height: clamp(150px, 20vw, 270px); overflow: hidden; transform: translateY(-42%); }
.pour-foam img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

#beer-atmosphere { position: fixed; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.site-header, main, .site-footer { position: relative; z-index: 1; }

.site-header { position: fixed; z-index: 110; inset: 0 auto 0 0; width: 86px; border-right: 1px solid var(--line); background: rgba(36, 13, 2, .88); backdrop-filter: blur(12px); }
.nav { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 22px 0 28px; }
.brand { writing-mode: vertical-rl; transform: rotate(180deg); font-family: "Archivo Black", sans-serif; font-size: .94rem; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.brand-mark { display: none; }
.nav-links { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.nav-links a { writing-mode: vertical-rl; transform: rotate(180deg); font-family: "DM Mono", monospace; color: var(--muted); font-size: .68rem; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--amber-hot); }

main { margin-left: 86px; min-height: 100vh; }
.home-main { isolation: isolate; }

.signal-stage { position: relative; min-height: 100svh; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(96, 30, 3, .08), rgba(116, 42, 3, .2)); }
.foam-cap { position: absolute; z-index: 2; inset: 0 0 auto; width: 100%; height: clamp(150px, 20vw, 270px); object-fit: cover; object-position: center top; pointer-events: none; }
.signal-copy { position: relative; z-index: 3; min-height: 100svh; padding: clamp(180px, 22vw, 300px) clamp(34px, 6vw, 86px) clamp(48px, 7vw, 100px); display: grid; place-items: center; }
.hero-content { width: 100%; text-align: center; }
.hero-brand { display: block; position: relative; z-index: 1; font-family: "Archivo Black", sans-serif; font-size: clamp(4.5rem, 14vw, 13rem); letter-spacing: -.075em; line-height: .78; text-decoration: none; text-transform: uppercase; }
.kicker { margin: 0; font-family: "DM Mono", monospace; color: var(--amber-hot); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.signal-title { margin: 38px auto 28px; font-family: "Archivo Black", sans-serif; font-size: clamp(2.5rem, 6.5vw, 6.2rem); line-height: .92; letter-spacing: -.055em; text-transform: uppercase; }
.signal-intro { width: min(620px, 88%); margin: 0 auto; font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.28; }

.manifesto { padding: clamp(80px, 12vw, 170px) clamp(30px, 8vw, 120px); background: rgba(49, 16, 2, .64); }
.manifesto-header { display: grid; grid-template-columns: 1fr 2fr; gap: 8vw; align-items: end; margin-bottom: 90px; }
.manifesto h2 { margin: 0; font-family: "Archivo Black", sans-serif; font-size: clamp(2.9rem, 7vw, 7rem); line-height: .88; letter-spacing: -.05em; text-transform: uppercase; }
.manifesto-lead { margin: 0; max-width: 620px; font-size: clamp(1.3rem, 2.1vw, 1.8rem); line-height: 1.3; }
.route-list { border-top: 1px solid var(--paper); }
.route-step { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 34px; align-items: baseline; padding: 34px 0; border-bottom: 1px solid var(--line); }
.route-step b { font-family: "DM Mono", monospace; color: var(--amber-hot); font-size: 1rem; }
.route-step h3 { margin: 0; font-family: "Archivo Black", sans-serif; font-size: clamp(1.8rem, 3.5vw, 3.3rem); line-height: 1.08; text-transform: uppercase; }
.route-step p { margin: 0; color: var(--muted); font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.5; }


.ticker { overflow: hidden; padding: 16px 0; background: var(--paper); color: var(--ink); font-family: "DM Mono", monospace; font-size: .74rem; letter-spacing: .12em; white-space: nowrap; text-transform: uppercase; }
.ticker span { display: inline-block; padding-left: 100%; animation: marquee 24s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

.legal-page { width: min(860px, calc(100% - 64px)); margin: 0 auto; padding: 92px 0 140px; }
.legal-page h1 { margin: 0 0 12px; font-family: "Archivo Black", sans-serif; font-size: clamp(3.8rem, 10vw, 8.4rem); line-height: .82; letter-spacing: -.07em; text-transform: uppercase; }
.legal-page h2 { margin: 58px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); font-family: "DM Mono", monospace; color: var(--amber-hot); font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; }
.legal-page p, .legal-page li { color: rgba(248, 230, 189, .9); }
.legal-page a { text-decoration-color: var(--amber); text-underline-offset: 4px; }
.updated { margin: 22px 0 0; color: var(--amber-hot) !important; font-family: "DM Mono", monospace; font-size: .75rem; text-transform: uppercase; }
.notice { margin: 48px 0; padding: 26px 30px; border: 1px solid var(--amber-hot); background: rgba(43, 18, 4, .34); color: var(--paper) !important; font-family: "DM Mono", monospace; font-size: .85rem; }
.support-grid { margin-top: 50px; border-top: 1px solid var(--paper); }
.support-item { display: grid; grid-template-columns: .8fr 1.2fr; gap: 46px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.support-item h2 { margin: 0; padding: 0; border: 0; color: var(--paper); font-family: "Archivo Black", sans-serif; font-size: 1.35rem; letter-spacing: -.02em; }
.support-item p { margin: 0; }

.site-footer { margin-left: 86px; border-top: 1px solid var(--line); background: rgba(36, 13, 2, .92); }
.footer-inner { min-height: 92px; padding: 24px clamp(30px, 6vw, 90px); display: flex; align-items: center; justify-content: space-between; gap: 28px; font-family: "DM Mono", monospace; color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--amber-hot); }

@media (max-width: 820px) {
    .site-header { inset: 0 0 auto; width: 100%; height: 64px; border-right: 0; border-bottom: 1px solid var(--line); }
    .nav { height: 64px; flex-direction: row; padding: 0 20px; }
    .brand, .nav-links a { writing-mode: initial; transform: none; }
    .nav-links { flex-direction: row; gap: 13px; }
    .nav-links a { font-size: .6rem; }
    .nav-links a:nth-child(3) { display: none; }
    main { margin-left: 0; padding-top: 64px; }
    .foam-cap { height: 150px; }
    .signal-copy { min-height: 78svh; padding: 176px 22px 58px; }
    .hero-brand { font-size: clamp(3.7rem, 17vw, 7rem); }
    .signal-title { margin-top: 28px; }
    .signal-intro { width: 92%; }
    .manifesto-header { grid-template-columns: 1fr; gap: 34px; }
    .route-step { grid-template-columns: 50px 1fr; gap: 18px; }
    .route-step b { font-size: .86rem; }
    .route-step p { grid-column: 2; }
    .support-item { grid-template-columns: 1fr; gap: 8px; }
    .legal-page { width: min(100% - 40px, 760px); padding-top: 64px; }
    .site-footer { margin-left: 0; }
    .footer-inner { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ticker span { animation: none; padding-left: 20px; }
    .pour-fill { transition: none; }
}