@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root{--bg:#080808;--fg:#eeeae2;--muted:#8e8a82;--gold:#c6a879;--line:#2a2824}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:'DM Sans',sans-serif}.noise{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.045;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.page{width:min(1000px,calc(100% - 44px));margin:auto}header,footer{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font:9px 'DM Mono',monospace;letter-spacing:.14em;color:#aaa}.brand{display:flex;align-items:center;gap:11px}.mark{width:29px;height:29px;border:1px solid #76664c;display:grid;place-items:center;color:var(--gold);font:11px 'Playfair Display',serif;letter-spacing:0}.status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:7px}.hero{min-height:620px;padding:105px 0 55px;position:relative}.kicker,.section-head,.hint,.index,.signoff,.closing span{font:10px 'DM Mono',monospace;letter-spacing:.17em;color:var(--gold)}h1{font:500 clamp(64px,12vw,132px)/.83 'DM Sans',sans-serif;letter-spacing:-.085em;margin:28px 0 27px}h1 em{font:italic 500 1em 'Playfair Display',serif;color:var(--gold);letter-spacing:-.06em}.tagline{font:10px 'DM Mono',monospace;letter-spacing:.2em;color:#c4bba9}.intro{color:#999;font-size:14px;margin:25px 0 31px}.primary,.upload{border:1px solid #8b7654;background:transparent;color:#eee4d3;padding:16px 19px;font:10px 'DM Mono',monospace;letter-spacing:.14em;cursor:pointer;transition:.2s}.primary span{padding-left:25px;color:var(--gold)}.primary:hover,.upload:hover{background:var(--gold);color:#080808}.index{position:absolute;bottom:32px;color:#666}.index span{color:var(--gold);padding:0 10px}.hidden{display:none}.content{padding:30px 0 80px}.section-head{display:flex;justify-content:space-between;padding:14px 2px;border-bottom:1px solid var(--line);color:#a99a80}.player{margin-top:15px;background:#030303;aspect-ratio:16/9;position:relative;display:grid;place-items:center;border:1px solid #292723;overflow:hidden}.player video{display:none;width:100%;height:100%;max-height:72vh;background:#000}.player.loaded video{display:block}.player.loaded .placeholder{display:none}.placeholder{text-align:center;padding:20px}.play-icon{width:53px;height:53px;border:1px solid #756348;color:var(--gold);border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;padding-left:3px}.placeholder h2{font:500 25px 'Playfair Display',serif;margin:0 0 8px}.placeholder p{font-size:12px;color:#888;margin:0 0 23px}.upload{display:inline-block}input{display:none}.hint{text-align:right;color:#666;font-size:8px;margin:12px 0 55px}.message-head{margin-bottom:22px}.letter{max-width:690px;margin:auto;padding:20px 0 38px;font:16px/1.9 'DM Sans',sans-serif;color:#d2cec6}.letter p{margin:0 0 18px}.letter .salute{font:italic 27px 'Playfair Display',serif;color:var(--gold)}.signoff{padding-top:24px;color:#82745e}.closing{border-top:1px solid var(--line);padding:26px 0 0;display:flex;justify-content:space-between;gap:20px;align-items:center}.closing strong{font:10px 'DM Mono',monospace;letter-spacing:.12em;color:#d5c6ac}footer{height:70px;border-top:1px solid var(--line);border-bottom:0;color:#666;font-size:8px}
@media(max-width:600px){.page{width:calc(100% - 28px)}header{height:65px;font-size:7px}.status{font-size:7px}.hero{min-height:570px;padding-top:110px}h1{font-size:clamp(58px,15vw,88px)}.intro{font-size:13px}.section-head{font-size:8px}.player{aspect-ratio:16/9}.placeholder h2{font-size:20px}.placeholder p{font-size:10px}.upload{font-size:8px;padding:12px}.letter{font-size:14px}.closing{align-items:flex-start;flex-direction:column}.closing strong{font-size:9px}footer{font-size:7px}}
