:root { --night:#11110e; --ivory:#ead9ad; --gold:#bd8e3f; --rust:#8e2d1f; --line:rgba(234,217,173,.24); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--night); }
body { margin:0; color:var(--ivory); background:var(--night) url("assets/mona-landscape.png") center top/cover fixed no-repeat; font-family:"Manrope",Arial,sans-serif; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(13,13,10,.9),rgba(13,13,10,.48) 49%,rgba(13,13,10,.84)),linear-gradient(180deg,rgba(11,11,8,.52),rgba(12,11,8,.7) 52%,rgba(10,10,8,.9)); }
.texture { position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.18; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.46'/%3E%3C/svg%3E"); }
.site-header { position:fixed; z-index:40; inset:0 0 auto; min-height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,4vw,64px); border-bottom:1px solid var(--line); background:rgba(15,15,11,.68); backdrop-filter:blur(15px); }
.wordmark { color:var(--ivory); font:600 1rem/1 "Manrope",sans-serif; letter-spacing:.18em; text-decoration:none; }
.wordmark span { color:var(--rust); }
.top-actions { display:flex; height:72px; }
.nav-action { height:72px; padding:0 clamp(12px,2vw,28px); display:inline-flex; align-items:center; gap:9px; border:0; border-left:1px solid var(--line); color:var(--ivory); background:transparent; font:500 .65rem/1 "DM Mono",monospace; letter-spacing:.08em; text-decoration:none; cursor:pointer; transition:.22s ease; }
.nav-action i { width:5px; height:5px; border-radius:50%; background:var(--rust); }
.nav-action:hover,.nav-action:focus-visible { background:var(--ivory); color:var(--night); outline:0; }
.chapter { position:relative; min-height:100svh; padding:clamp(108px,12vw,160px) clamp(24px,6vw,96px) clamp(70px,9vw,120px); }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.72fr); align-items:center; gap:clamp(24px,5vw,88px); }
.kicker { margin:0 0 22px; color:var(--gold); font:500 .68rem/1 "DM Mono",monospace; letter-spacing:.2em; }
h1,h2 { margin:0; font-weight:400; }
h1 { font:400 clamp(5.2rem,14vw,13rem)/.72 "Italiana",Georgia,serif; letter-spacing:-.07em; text-shadow:0 24px 80px rgba(0,0,0,.55); }
h1 span { color:var(--gold); font-style:italic; }
.tagline { margin:clamp(32px,5vw,66px) 0 0; padding-left:25px; border-left:1px solid var(--rust); font:500 clamp(.8rem,1.2vw,1.05rem)/1.75 "DM Mono",monospace; letter-spacing:.12em; }
.mona-frame { margin:0; position:relative; isolation:isolate; }
.mona-frame img { width:100%; display:block; filter:saturate(.74) sepia(.12) contrast(1.05) brightness(.82); box-shadow:0 35px 100px rgba(0,0,0,.58); }
.hero-mona { width:min(100%,590px); justify-self:end; }
.down-link { position:absolute; left:clamp(24px,6vw,96px); bottom:34px; color:rgba(234,217,173,.62); font:400 .62rem/1 "DM Mono",monospace; letter-spacing:.13em; text-decoration:none; }
.down-link b { margin-left:12px; color:var(--rust); }
.story { min-height:110svh; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(180deg,transparent,rgba(17,17,14,.5) 20%,rgba(17,17,14,.7) 75%,transparent); }
.story-rule { position:absolute; top:15%; left:6vw; right:6vw; display:flex; align-items:center; gap:14px; color:var(--rust); font:.55rem "DM Mono",monospace; }
.story-rule i { height:1px; flex:1; background:var(--line); }
.story h2,.final h2 { font:400 clamp(4.5rem,11vw,10.5rem)/.77 "Italiana",Georgia,serif; letter-spacing:-.055em; }
.story h2 em,.final h2 em { color:var(--gold); font-weight:400; }
.story-copy { width:min(100%,760px); margin:52px 0 0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:44px; padding-top:26px; border-top:1px solid var(--line); }
.story-copy p,.final-lore { margin:0; font:400 clamp(.75rem,1.2vw,.95rem)/1.8 "DM Mono",monospace; letter-spacing:.04em; }
.signal { min-height:92svh; display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:hidden; text-align:center; }
.signal::before { content:""; position:absolute; width:min(78vw,980px); aspect-ratio:1; border:1px solid rgba(189,142,63,.15); border-radius:50%; }
.signal-mark { width:clamp(120px,17vw,220px); height:clamp(95px,14vw,180px); position:relative; margin-bottom:44px; }
.signal-mark span { position:absolute; left:50%; border:clamp(6px,.8vw,11px) solid transparent; border-top-color:var(--gold); border-radius:50%; transform:translateX(-50%); }
.signal-mark span:nth-child(1) { width:100%; aspect-ratio:1; top:0; }
.signal-mark span:nth-child(2) { width:68%; aspect-ratio:1; top:21%; }
.signal-mark span:nth-child(3) { width:36%; aspect-ratio:1; top:42%; }
.signal-mark b { position:absolute; left:50%; bottom:0; width:9%; aspect-ratio:1; border-radius:50%; background:var(--rust); transform:translateX(-50%); }
.signal-line { position:relative; margin:0; font:400 clamp(2.7rem,7vw,6.5rem)/.95 "Italiana",Georgia,serif; letter-spacing:-.03em; }
.signal-line.muted { color:rgba(234,217,173,.28); }
.signal-line.accent { color:var(--gold); font-style:italic; }
.final { min-height:120svh; display:grid; grid-template-columns:minmax(300px,.75fr) minmax(0,1.05fr); align-items:center; gap:clamp(42px,7vw,110px); padding-bottom:115px; }
.final::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent,rgba(13,13,10,.72) 25%,rgba(13,13,10,.94)); }
.final-mona { width:min(100%,510px); }
.final-copy { min-width:0; }
.final h2 { font-size:clamp(3.8rem,7.6vw,7.2rem); }
.final-lore { margin-top:35px; }
.connection-grid { margin-top:52px; border-top:1px solid var(--line); }
.connection { width:100%; min-height:88px; padding:18px 4px; display:grid; grid-template-columns:1fr 1.4fr auto; align-items:center; gap:18px; border:0; border-bottom:1px solid var(--line); color:var(--ivory); background:transparent; text-align:left; text-decoration:none; cursor:pointer; transition:.22s ease; }
.connection span { color:var(--gold); font:400 .56rem/1 "DM Mono",monospace; letter-spacing:.11em; }
.connection strong { font:600 clamp(.8rem,1.3vw,1rem)/1 "Manrope",sans-serif; letter-spacing:.06em; }
.connection b { font:400 1.25rem/1 "Manrope",sans-serif; }
.connection:hover,.connection:focus-visible { padding-inline:18px; color:var(--night); background:var(--ivory); outline:0; }
.connection:hover span { color:var(--rust); }
footer { position:absolute; left:clamp(24px,6vw,96px); right:clamp(24px,6vw,96px); bottom:0; min-height:76px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); }
footer p { margin:0; color:rgba(234,217,173,.5); font:.55rem "DM Mono",monospace; letter-spacing:.1em; }
footer nav { display:flex; gap:18px; }
.footer-link { padding:8px 0; border:0; color:var(--ivory); background:transparent; font:.6rem "DM Mono",monospace; text-decoration:none; cursor:pointer; }
.footer-link:hover { color:var(--gold); }
.toast { position:fixed; z-index:60; left:50%; bottom:24px; transform:translate(-50%,18px); padding:13px 20px; color:var(--night); background:var(--ivory); font:500 .66rem "DM Mono",monospace; opacity:0; pointer-events:none; transition:.2s ease; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:800px) { body{background-attachment:scroll}.site-header{padding-inline:18px}.nav-action{padding-inline:10px}.nav-action i{display:none}.hero,.final{grid-template-columns:1fr}.hero{padding-top:130px}.hero-mona{width:min(86vw,500px);justify-self:center}.down-link{display:none}.story-copy{grid-template-columns:1fr;gap:12px;margin-top:34px}.final-mona{width:min(82vw,480px);justify-self:center}.final-copy{width:100%}footer p{display:none} }
@media (max-width:480px) { .wordmark{font-size:.82rem}.nav-action{font-size:.57rem}h1{font-size:clamp(4.6rem,27vw,7rem)}.story h2,.final h2{font-size:clamp(4rem,20vw,6rem)}.connection{grid-template-columns:1fr auto}.connection span{grid-column:1/-1} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} }