:root { color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,sans-serif; --paper:#f1e6ce; --gold:#ffd34e; --cyan:#8edfd0; }
* { box-sizing:border-box; }
html,body { margin:0; min-width:320px; min-height:100%; background:radial-gradient(circle at 25% 0,#1b2948,#090b14 58%); color:var(--paper); }
body { padding:clamp(18px,4vw,54px); }
header,main,footer { width:min(1120px,100%); margin-inline:auto; }
header>p:first-child { margin:0 0 7px; color:var(--cyan); font-size:10px; font-weight:950; letter-spacing:.18em; }
h1,h2 { margin:0; font-family:Georgia,serif; text-transform:capitalize; }
h1 { font-size:clamp(36px,7vw,76px); }
.lede { max-width:760px; color:#bed0d4; line-height:1.55; }
main { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:28px; }
article { padding:clamp(18px,3vw,28px); border:1px solid #f1e6ce42; border-radius:20px 6px; background:#10162fe8; box-shadow:0 18px 54px #0007,inset 0 1px #fff2; }
article>p { margin:0 0 6px; color:var(--cyan); font-size:9px; font-weight:900; letter-spacing:.13em; }
h2 { font-size:clamp(24px,4vw,38px); }
dl { display:grid; grid-template-columns:2fr 1fr; gap:1px; margin:18px 0; background:#f1e6ce25; }
dl div { padding:10px; background:#0c142b; }
dt { color:#95afba; font-size:9px; font-weight:900; text-transform:uppercase; }
dd { margin:4px 0 0; color:var(--gold); font:800 12px ui-monospace,monospace; }
a { display:inline-block; padding:12px 15px; border:1px solid #ffe58d; border-radius:11px 4px; color:#09121e; background:linear-gradient(135deg,#ffd34e,#ff8c55); font-size:13px; font-weight:900; text-decoration:none; }
a:hover,a:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
footer { margin-top:24px; color:#94aab1; font-size:12px; line-height:1.5; }
@media(max-width:700px){main{grid-template-columns:1fr}}