:root { --bg:#07111f; --surface:#0e2032; --surface-2:#132b40; --blue:#16b9e8; --cyan:#61f1dd; --sand:#e6bd70; --text:#eff8f8; --muted:#9ab0bd; }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(circle at 80% -20%,#10415c 0,transparent 38%),var(--bg); color:var(--text); font:16px/1.6 Inter,ui-sans-serif,system-ui,sans-serif; } a { color:var(--cyan); } .shell { width:min(1120px,calc(100% - 2rem)); margin:auto; } header { border-bottom:1px solid #18334a; } nav { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; gap:1rem; } nav .links { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; } .brand { color:var(--text); font-size:1.25rem; font-weight:800; text-decoration:none; letter-spacing:.04em; } .brand span { color:var(--blue); } main { padding:2rem 0 7rem; } .hero { display:grid; grid-template-columns:1.4fr .8fr; gap:2rem; align-items:center; min-height:360px; } .eyebrow { color:var(--sand); font:700 .8rem/1.2 ui-monospace,monospace; letter-spacing:.13em; text-transform:uppercase; } h1,h2,h3 { line-height:1.1; letter-spacing:-.03em; } h1 { font-size:clamp(2.7rem,7vw,5.5rem); margin:.5rem 0 1rem; } h2 { font-size:2rem; } .lede { color:var(--muted); font-size:1.2rem; max-width:650px; } .button { display:inline-block; border:0; border-radius:999px; background:var(--cyan); color:#04202b; font-weight:800; padding:.75rem 1.1rem; text-decoration:none; cursor:pointer; } .button.secondary { background:var(--surface-2); color:var(--text); } .art { aspect-ratio:1; border-radius:1.5rem; overflow:hidden; background:linear-gradient(135deg,var(--blue),#074b73 45%,var(--sand)); box-shadow:0 18px 55px #0008; } .art img { display:block; width:100%; height:100%; object-fit:cover; } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; } .card { background:linear-gradient(145deg,var(--surface),#0b1929); border:1px solid #1b3a52; border-radius:1rem; padding:1rem; } .card h3 { margin:.8rem 0 .4rem; font-size:1.25rem; } .card p { color:var(--muted); } .meta { color:var(--muted); font: .8rem ui-monospace,monospace; } .chips { display:flex; gap:.4rem; flex-wrap:wrap; } .chip { color:var(--cyan); border:1px solid #1e586c; border-radius:99px; padding:.1rem .5rem; font-size:.75rem; } .section-head { display:flex; justify-content:space-between; align-items:end; margin:3rem 0 1rem; } article { max-width:780px; } .prose { color:#d4e5e7; white-space:pre-wrap; } audio { width:100%; margin:1rem 0; } input,textarea { width:100%; border:1px solid #28516b; border-radius:.6rem; background:#071725; color:var(--text); padding:.7rem; margin:.3rem 0 .8rem; } textarea { min-height:120px; } label { color:var(--muted); font-size:.9rem; } footer { border-top:1px solid #18334a; color:var(--muted); padding:2rem 0; } @media(max-width:700px) { .hero { grid-template-columns:1fr; } .hero .art { max-width:260px; margin:auto; } nav { align-items:flex-start; flex-direction:column; } }