:root { --ink:#18211c; --paper:#f5f1e8; --lime:#d8ff5f; --coral:#e96e47; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:ui-monospace,Consolas,monospace; }
main, footer { width:min(100% - 2.5rem, 900px); margin:auto; }
main { padding:5rem 0; }
.tag { margin:0; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.tag i { display:inline-block; width:.55rem; height:.55rem; margin-right:.5rem; background:var(--coral); border-radius:50%; }
.intro { display:grid; grid-template-columns:1.5fr .5fr; gap:2rem; align-items:end; margin:2rem 0 4rem; }
h1,h2 { font-family:Georgia,serif; letter-spacing:-.07em; }
h1 { margin:0; font-size:clamp(4rem,9vw,6.5rem); line-height:.9; white-space:nowrap; }
h1 span { color:var(--coral); }
.intro p { max-width:19rem; margin:0; line-height:1.7; }
.ring { border:2px solid var(--ink); background:var(--lime); box-shadow:8px 8px 0 var(--ink); }
.ring-head, nav { display:flex; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; border-bottom:2px solid var(--ink); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.ring-head h2 { margin:0; font:inherit; }.current { padding:2rem 1.2rem; margin:0; font-size:.72rem; line-height:2; text-transform:uppercase; }.current a { color:var(--ink); font-family:Georgia,serif; font-size:clamp(1.5rem,4vw,2.4rem); font-weight:bold; letter-spacing:-.05em; text-transform:none; }
nav { padding:0; border-bottom:0; } nav a, nav button { flex:1; padding:1rem .5rem; border:0; border-right:2px solid var(--ink); background:transparent; color:var(--ink); font:inherit; font-size:.72rem; text-align:center; text-decoration:none; text-transform:uppercase; cursor:pointer; } nav a:last-child { border-right:0; } nav a:hover,nav a:focus-visible,nav button:hover,nav button:focus-visible { background:var(--ink); color:var(--lime); outline:0; }
.directory { padding-top:6rem; }.directory h2 { margin:.9rem 0 2rem; font-size:clamp(2.8rem,8vw,5rem); line-height:.9; }.directory ul { padding:0; margin:0; list-style:none; border-top:2px solid var(--ink); }.directory li { border-bottom:2px solid var(--ink); }.directory a { display:flex; justify-content:space-between; gap:1rem; padding:1.3rem 0; color:var(--ink); font:1.6rem Georgia,serif; letter-spacing:-.04em; text-decoration:none; }.directory a:hover { padding-left:1rem; color:var(--coral); }.directory a small { font:inherit; font-family:ui-monospace,Consolas,monospace; font-size:.75rem; align-self:center; }
footer { padding:1.5rem 0 2.5rem; border-top:2px solid var(--ink); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:600px) { main,footer { width:min(100% - 1.5rem,900px); } main { padding-top:3rem; }.intro { grid-template-columns:1fr; }.intro h1 { font-size:clamp(3rem,15vw,4rem); }.intro p { margin-top:1rem; } nav { flex-wrap:wrap; } nav button { order:-1; flex-basis:100%; border-right:0; border-bottom:2px solid var(--ink); } }