:root { --space:#1f0150; --cream:#f5e6ca; --paper:#fff1d4; --ink:#35105f; --aqua:#00f5d4; --pink:#ff4da6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--space); color:var(--cream); font-family:"Inter",sans-serif; overflow-x:hidden; }
.skip-link { position:fixed; top:1rem; left:1rem; z-index:100; padding:.7rem 1rem; background:var(--cream); color:var(--space); transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.star-field { position:fixed; inset:0; z-index:-1; background:radial-gradient(circle at 74% 14%,rgba(155,93,229,.18),transparent 22rem),radial-gradient(circle at 16% 76%,rgba(0,245,212,.07),transparent 18rem),var(--space); }
.star-field::after { content:""; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(rgba(255,248,230,.8) 1px,transparent 1px),radial-gradient(rgba(255,248,230,.35) .8px,transparent .8px); background-size:120px 120px,185px 185px; background-position:12px 20px,70px 40px; }
.site-header { min-height:76px; padding:0 clamp(20px,5vw,72px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(245,230,202,.28); background:rgba(31,1,80,.88); position:sticky; top:0; z-index:30; backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:.65rem; color:var(--cream); text-decoration:none; font:700 .8rem "Inter",sans-serif; letter-spacing:.12em; }
.brand img { width:42px; height:42px; object-fit:contain; }
.back-link { color:var(--cream); font:700 .7rem "Space Mono",monospace; letter-spacing:.06em; text-decoration:none; }
.back-link:hover { color:var(--aqua); }
main { width:min(1120px,calc(100% - 36px)); margin:0 auto; padding:clamp(4rem,8vw,7rem) 0; }
.paper-letter { position:relative; width:min(860px,100%); margin:0 auto; padding:clamp(3rem,7vw,6rem) clamp(2rem,9vw,7.5rem); background-color:var(--paper); background-image:linear-gradient(rgba(53,16,95,.035) 1px,transparent 1px); background-size:100% 30px; color:#26183a; border:1px solid rgba(255,255,255,.7); border-radius:5px 9px 4px 8px; box-shadow:12px 18px 0 rgba(8,2,30,.24),0 35px 90px rgba(8,2,30,.32); transform:rotate(-.22deg); }
.paper-letter::before { content:""; position:absolute; inset:10px; border:1px solid rgba(53,16,95,.12); border-radius:8px 4px 9px 5px; pointer-events:none; }
.letter-kicker { margin:0 0 1.1rem; color:#7a3caf; font:700 .72rem "Space Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }
h1 { max-width:620px; margin:0 0 2.8rem; color:var(--ink); font:600 clamp(2.8rem,7vw,5.2rem)/.98 "Lexend",sans-serif; letter-spacing:-.055em; }
h2 { margin:3.8rem 0 1.25rem; color:var(--ink); font:600 clamp(1.65rem,4vw,2.45rem)/1.08 "Lexend",sans-serif; letter-spacing:-.035em; }
p { margin:0 0 1.25rem; font-size:clamp(1rem,1.5vw,1.12rem); line-height:1.75; }
.pull-question { margin:1.8rem 0 2.3rem; padding:1.3rem 1.45rem; border-left:4px solid #9b5de5; background:rgba(155,93,229,.08); color:var(--ink); font-size:clamp(1.15rem,2vw,1.38rem); line-height:1.55; }
.bridge-line { margin:2rem 0; color:var(--ink); font-size:1.25rem; }
.letter-signoff { display:grid; gap:.1rem; margin-top:3.5rem; color:var(--ink); font-family:"Caveat",cursive; font-size:1.15rem; }
.letter-signoff strong { font-size:2rem; font-weight:600; }
a:focus-visible { outline:3px solid var(--aqua); outline-offset:5px; }
@media(max-width:760px){ .paper-letter{padding:3.2rem 2rem;} }
@media(max-width:420px){ .site-header{padding:0 14px;} .brand span{display:none;} main{width:calc(100% - 22px);padding:2.5rem 0 4rem;} .paper-letter{padding:2.8rem 1.35rem;} h1{margin-bottom:2.1rem;} }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}