:root{color-scheme:dark;--bg:#090d14;--text:#e9e4d9;--muted:#8e949b;--gold:#d8b77c;--line:#2a3038;--mono:'Cascadia Code','Consolas',monospace;--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--text);font-family:Arial,Helvetica,sans-serif;background:var(--bg);min-width:280px}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
button:disabled{cursor:default;opacity:.5}
button[hidden],[hidden]{display:none!important}
button{touch-action:manipulation}
#universe{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.shell{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;padding:0 clamp(22px,5.4vw,100px);overflow:hidden}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}
header{height:100px}
.dedication{font:11px var(--mono);letter-spacing:.16em;color:#b5b5af;white-space:nowrap}
.tiny-star{color:var(--gold);margin:0 13px;font-size:16px;vertical-align:-1px}
.quiet{border:0;background:none;padding:10px 0;color:var(--muted);font:12px var(--mono);line-height:1.5;transition:color .2s}
.quiet:hover{color:var(--text)}



main{display:flex;flex:1}
.screen{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;min-height:580px;padding:30px 0 50px;animation:appear .7s ease both}
.copy{max-width:540px;padding-bottom:8px}
.eyebrow{font:10px var(--mono);letter-spacing:.19em;color:var(--gold);margin:0 0 27px;line-height:1.6}
h1{font:normal clamp(55px,5.8vw,98px)/1.02 var(--serif);letter-spacing:-.055em;margin:0;text-wrap:balance}
h1 em{font-weight:normal;color:var(--gold)}

.primary{display:inline-flex;gap:48px;align-items:center;justify-content:space-between;background:var(--gold);border:1px solid var(--gold);color:#13171e;padding:18px 22px;font:12px var(--mono);min-height:54px;transition:background .2s,transform .2s}
.primary:hover{background:#e7c891;transform:translateY(-2px)}
.primary span{font-size:20px;line-height:1}
.art-space{height:100%;min-height:450px;position:relative;pointer-events:none}
.art-caption{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#737a84;font:9px var(--mono);letter-spacing:.13em;white-space:nowrap}




.letter h1{font-size:clamp(44px,4.4vw,70px);line-height:1.1}
.letter .eyebrow{margin-bottom:20px}
.message{font-size:16px;line-height:1.8;color:#b5b6b5;margin:28px 0 0;max-width:490px}
.message p{margin:0 0 16px}
.signature{font:italic 25px var(--serif);color:var(--gold);margin:24px 0 31px}
.letter-actions{display:flex;gap:26px;align-items:center}
.secondary{border:1px solid #5d5445;background:#10141bbb;padding:14px 17px;min-height:46px;font:11px var(--mono);transition:background .2s,border-color .2s}
.secondary:hover{background:#292720;border-color:var(--gold)}
.secondary span{margin-left:20px;color:var(--gold)}
.letter-art .art-caption{bottom:60px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.shell{max-width:1700px;margin:auto}.screen{min-height:660px}.copy{max-width:590px}}
@media(max-width:800px){
  .shell{padding:0 24px}header{height:76px}.screen{grid-template-columns:1fr;gap:0;padding:0 0 30px;min-height:0;align-content:start}.art-space{grid-row:1;height:300px;min-height:0}.intro-copy{grid-row:2;max-width:none;padding:0 0 10px}.intro h1{font-size:clamp(48px,8.8vw,74px);line-height:1.02}.intro h1 br:nth-of-type(2){display:none}.intro h1 em::before{content:' '}.intro .eyebrow{margin-bottom:16px}.art-caption{bottom:15px;font-size:8px;letter-spacing:.09em}.primary{min-height:52px;padding:16px 19px}.copy{max-width:none}.letter .art-space{height:235px}.letter-art .art-caption{bottom:0}.letter h1{font-size:clamp(40px,7.4vw,58px)}.message{font-size:15px;line-height:1.75;margin-top:22px;max-width:560px}.signature{margin:20px 0 24px;font-size:24px}.letter-actions{gap:22px}.secondary{font-size:10px;padding:13px 14px}.secondary span{margin-left:12px}.dedication{font-size:10px;letter-spacing:.1em}.tiny-star{margin:0 8px}}
@media(max-width:360px){.shell{padding:0 18px}.intro h1{font-size:45px}.art-space{height:250px}.letter .art-space{height:210px}.letter h1{font-size:38px}.message{font-size:14px}.letter-actions{gap:17px}}
@media(min-width:801px) and (max-height:760px){header{height:80px}.screen{min-height:540px;padding:15px 0 25px}h1{font-size:76px}.letter h1{font-size:55px}.message{font-size:14px;line-height:1.75;margin-top:22px}.signature{margin:18px 0 22px}.art-space{min-height:400px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.intro .primary{margin-top:36px}
.intro-copy{transition:opacity .45s ease,transform .45s ease}
.opening .intro-copy{opacity:0;transform:translateY(-6px);pointer-events:none}
.opening .intro .art-caption{opacity:0}

.letter-art{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.letter-art .art-caption{font-size:11px;letter-spacing:.02em;color:#929aa4;line-height:1.6;text-align:center;white-space:normal;width:max-content;max-width:100%}
@media(max-width:800px){.letter-art{margin-bottom:16px}}