:root { --ink:#0b0b0b; --paper:#f3e6c4; --gold:#d8a030; --hot:#e8c547; --brown:#a07038; --line:#4a3419; --muted:#b89a6a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; color:var(--paper); background:radial-gradient(circle at 80% 0%, #2c1c09 0, var(--ink) 38rem); font-family:Manrope, sans-serif; line-height:1.6; }
.masthead { height:74px; padding:0 4vw; position:sticky; top:0; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid rgba(216,160,48,.35); background:rgba(11,11,11,.88); backdrop-filter:blur(12px); }
.brand { display:flex; gap:10px; align-items:center; color:var(--paper); text-decoration:none; font:20px/.82 Anton, Impact, sans-serif; letter-spacing:.04em; }
.brand img, footer img { width:36px; height:36px; object-fit:cover; border:1px solid var(--gold); border-radius:50%; }
.masthead-meta, .contact, .eyebrow, .section-number, .contents, .ticker-strip span, .facts dt, .phases b, .roadmap b { font:500 11px/1.2 "IBM Plex Mono", monospace; letter-spacing:.12em; }
.masthead-meta { color:var(--muted); } .masthead-meta span { color:var(--gold); margin-left:8px; }
.contact { justify-self:end; color:var(--paper); text-decoration:none; } .contact:hover { color:var(--hot); }
.hero { min-height:min(560px, calc(100vh - 74px)); display:grid; place-items:end end; position:relative; overflow:hidden; isolation:isolate; }
.hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; filter:contrast(1.08) saturate(.85); }
.hero-overlay { position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(5,5,5,.45),transparent 34%); }
/* The supplied hero art is the headline: keep both Pablo and the FUM mark clear. */
.hero-content { display:none; }
.eyebrow,.section-number { color:var(--gold); margin:0 0 18px; }
h1,h2,h3 { font-family:Anton, Impact, sans-serif; font-weight:400; letter-spacing:.02em; }
h1 { margin:0; font-size:clamp(2.85rem,5.5vw,5.5rem); line-height:.9; text-wrap:balance; } h1 em { color:var(--gold); font-style:normal; }
.lede { margin:16px 0 0; font-size:clamp(.95rem,1.3vw,1.15rem); font-weight:700; } .sublede { margin:0; color:var(--muted); font-size:.85rem; }
.scroll-cue { position:absolute; right:5vw; bottom:28px; color:var(--paper); text-decoration:none; font:500 11px "IBM Plex Mono",monospace; letter-spacing:.1em; } .scroll-cue span { color:var(--gold); font-size:24px; vertical-align:middle; margin-left:8px; }
.ticker-strip { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#110e08; }
.ticker-strip div { min-height:90px; padding:20px 4vw; border-right:1px solid var(--line); font-size:13px; } .ticker-strip div:last-child { border:0; } .ticker-strip span { display:block; color:var(--gold); margin-bottom:7px; }
.content { max-width:1240px; margin:auto; display:grid; grid-template-columns:190px minmax(0,1fr); padding:clamp(3rem,6vw,5.5rem) 5vw; gap:clamp(2.5rem,6vw,6rem); }
.contents { position:sticky; top:110px; align-self:start; color:var(--muted); } .contents p { color:var(--gold); margin:0 0 16px; } .contents a { display:block; color:inherit; text-decoration:none; padding:7px 0; border-bottom:1px solid rgba(74,52,25,.7); } .contents a:hover { color:var(--paper); }
.paper { max-width:760px; } .paper section { padding:0 0 clamp(3.5rem,6vw,5.5rem); border-bottom:1px solid var(--line); margin-bottom:clamp(3.5rem,6vw,5.5rem); } .paper section:last-child { border:0; margin:0; }
h2 { font-size:clamp(2.25rem,3.8vw,3.7rem); line-height:.94; margin:0 0 18px; } p { font-size:14px; } .lead-copy { font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.45; color:#fff4d7; max-width:650px; }
.stages { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:38px; } .stages div { padding:24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .stages b,.principles span { color:var(--gold); font:500 12px "IBM Plex Mono",monospace; } .stages h3,.principles h3,.risk-grid h3 { margin:17px 0 7px; font-size:26px; } .stages p,.principles p,.risk-grid p { margin:0; font-size:13px; color:var(--muted); }
.coin-section { display:grid; grid-template-columns:minmax(220px,.65fr) 1fr; gap:clamp(2rem,6vw,6rem); align-items:start; } .coin-art { border:1px solid var(--line); background:linear-gradient(135deg,#21170a,#070707); padding:17px; position:sticky; top:110px; } .coin-art img { width:100%; aspect-ratio:1; object-fit:cover; }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); margin:30px 0 0; } .facts div { padding:14px 0; border-bottom:1px solid var(--line); } .facts dt { color:var(--gold); } .facts dd { margin:4px 0 0; font-size:13px; }
.principles { display:grid; grid-template-columns:1fr 1fr; gap:30px 45px; margin-top:34px; } .principles h3 { margin-top:10px; }
.phases { list-style:none; margin:35px 0 0; padding:0; border-top:1px solid var(--line); } .phases li { display:grid; grid-template-columns:100px 1fr 1.5fr; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); } .phases b { color:var(--gold); } .phases strong { font-size:16px; } .phases span { color:var(--muted); font-size:13px; }
.roadmap { border-top:1px solid var(--line); } .roadmap div { display:grid; grid-template-columns:120px 1fr; gap:25px; padding:26px 0; border-bottom:1px solid var(--line); } .roadmap b { color:var(--gold); } .roadmap p { margin:0; }
.risk-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin-top:35px; } .risk-grid div { background:#100d08; padding:25px; }
footer { max-width:1400px; margin:auto; display:grid; grid-template-columns:auto 1fr 2fr auto; gap:16px; align-items:center; padding:35px 5vw 48px; border-top:1px solid var(--line); } footer div { font:22px/.9 Anton,Impact,sans-serif; } footer div span { display:block; margin-top:5px; font:500 10px "IBM Plex Mono",monospace; color:var(--gold); letter-spacing:.12em; } footer p { color:var(--muted); font-size:12px; margin:0; } footer a { color:var(--paper); font:500 11px "IBM Plex Mono",monospace; text-decoration:none; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; } .reveal.visible { opacity:1; transform:none; }
@keyframes rise { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
@media (max-width:760px) { .masthead { grid-template-columns:1fr auto; padding:0 20px; } .masthead-meta,.contact { display:none; } .hero { min-height:500px; } .hero-art { object-position:18% center; } .hero-overlay { background:linear-gradient(0deg,rgba(5,5,5,.56),transparent 34%); } .ticker-strip { grid-template-columns:1fr; } .ticker-strip div { min-height:0; border-right:0; border-bottom:1px solid var(--line); } .content { display:block; padding:48px 24px; } .contents { display:none; } .coin-section,.phases li { display:block; } .coin-art { position:static; max-width:260px; margin-bottom:30px; } .phases li > * { display:block; margin:7px 0; } footer { grid-template-columns:auto 1fr; } footer p { grid-column:1/-1; } footer a { display:none; } }
@media (max-width:480px) { .stages,.principles,.risk-grid,.facts { grid-template-columns:1fr; } h1 { font-size:2.85rem; } h2 { font-size:2.25rem; } }