:root { color-scheme: dark; --navy:#12283e; --text:#f8fbfe; --muted:#b6c8d8; --blue:#437cac; --gold:#e9bf76; font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; background:var(--navy); color:var(--text); display:flex; flex-direction:column; padding:clamp(1.4rem,4vw,4rem) clamp(1.4rem,6vw,6rem); }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid var(--gold); outline-offset:8px; border-radius:3px; }
header, footer { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; }
.wordmark { font-size:2.8rem; font-weight:700; letter-spacing:-.09em; line-height:1; }
.wordmark span, h1 span { color:var(--gold); }
.author { font-size:1rem; padding:.4rem 0; color:var(--muted); }
.author:hover { color:var(--text); text-decoration:underline; text-underline-offset:5px; }
main { flex:1; display:flex; align-items:center; justify-content:space-between; gap:3rem; padding:5rem 0; }
.title-block { position:relative; z-index:1; }
h1 { margin:0 0 1.8rem; font-size:clamp(3.6rem,10vw,9.5rem); line-height:1.1; font-weight:700; letter-spacing:-.065em; }
p { font-size:clamp(1.05rem,1.8vw,1.3rem); color:var(--muted); line-height:1.6; margin:0; }
.status { display:inline-block; color:var(--gold); font-size:1rem; margin-top:2.4rem; border:1px solid #64707a; padding:.5rem 1rem; border-radius:2rem; }
.grid { width:clamp(10rem,23vw,22rem); aspect-ratio:1; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; transform:rotate(-8deg); flex-shrink:0; }
.grid i { background:#1d3b56; border-radius:8px; }
.grid i:nth-child(6), .grid i:nth-child(7), .grid i:nth-child(10) { background:var(--blue); }
.grid i:nth-child(11) { background:var(--gold); }
.grid i:nth-child(1), .grid i:nth-child(4), .grid i:nth-child(13), .grid i:nth-child(16) { opacity:.35; }
footer { color:var(--muted); font-size:.875rem; line-height:1.6; }
@media (max-width:760px) { main { flex-direction:column; align-items:flex-start; justify-content:center; gap:3rem; padding:4rem 0; } .grid { width:10rem; margin-left:auto; gap:5px; } .grid i { border-radius:5px; } footer { flex-wrap:wrap; gap:.4rem 2rem; } }