:root { color-scheme:dark; --paper:#0b1115; --paper2:#111b20; --ink:#f3eee4; --soft:#a6adb0; --line:#29363c; --red:#e24a3b; --cyan:#31c6cf; --amber:#e6a64b; --night:#10191e; --light:#f3eee4; --deep:#071216; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:1rem/1.65 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--cyan); }
a:focus-visible, .poster:focus-visible, .card:focus-visible { outline:3px solid var(--amber); outline-offset:3px; }
.wrap { width:100%; max-width:68rem; margin:0 auto; padding:0 1.25rem; }
.mono { font:600 .72rem/1.3 ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:.2em; text-transform:uppercase; }
.eyebrow { color:var(--amber); }
header.top { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 1.25rem; }
header.top .wordmark { color:var(--light); font:900 1.2rem/1 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.12em; text-decoration:none; }
header.top .logo { text-decoration:none; }
header.top nav { display:flex; gap:1.4rem; flex-wrap:wrap; }
header.top nav a { color:var(--light); text-decoration:none; }
header.top nav a:hover { color:var(--amber); }
.hero { padding:clamp(1.3rem,3.5vw,2.6rem); margin-bottom:3rem; display:grid; grid-template-columns:.78fr 1.22fr; gap:1.5rem; align-items:center; background:var(--deep); color:var(--light); border:1px solid var(--line); border-radius:10px; }
.hero > * { min-width:0; }
.hero-logo { display:block; width:100%; height:auto; }
.hero h1 { font-size:clamp(2.2rem,6vw,4rem); line-height:.98; margin:.7rem 0 1rem; font-weight:900; letter-spacing:-.025em; }
.hero h1 em { font-style:normal; color:var(--amber); }
.hero p { color:#c4c7cb; font-size:1.1rem; margin:0; max-width:30rem; }
.hero .eyebrow { color:var(--cyan); }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:8px; margin:0 0 4rem; background:var(--night); color:var(--light); }
.stats div { min-width:0; padding:1rem 1.2rem; border-right:1px solid var(--line); }
.stats div:last-child { border-right:0; }
.stats .v { display:block; font:900 1.8rem/1.2 ui-monospace,Menlo,Consolas,monospace; }
.stats .k { color:#c4c7cb; }
.redact { display:inline-block; height:.75em; width:3.2em; background:#354248; border-radius:2px; vertical-align:-.02em; }
h2 { font-size:1.9rem; line-height:1.1; margin:0 0 .4rem; font-weight:900; letter-spacing:-.02em; }
.lede { color:var(--soft); margin:0 0 1.6rem; }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; padding:0; margin:0 0 5rem; list-style:none; }
.poster { position:relative; display:flex; flex-direction:column; background:var(--night); color:var(--light); border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:not-allowed; transition:transform .2s, box-shadow .2s, border-color .2s; }
.poster:hover, .poster:focus-visible { transform:translateY(-3px); border-color:var(--amber); box-shadow:0 8px 24px rgba(0,0,0,.24); }
.art { position:relative; aspect-ratio:2/3; display:grid; place-items:center; background:repeating-linear-gradient(45deg, #121d22 0 10px, #172329 10px 20px); border-bottom:1px solid var(--line); }
.art svg { width:78%; height:auto; overflow:visible; }
.ring { fill:none; stroke:var(--light); stroke-width:11; stroke-linecap:round; }
.dot { fill:var(--amber); }
.lockico { stroke:var(--light); fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.badge { position:absolute; left:.6rem; bottom:.6rem; background:var(--amber); color:var(--night); padding:.15rem .5rem; border-radius:2px; }
.no { position:absolute; left:.6rem; top:.5rem; color:#c4c7cb; }
.info { padding:.8rem .9rem 1rem; }
.info h3 { margin:0 0 .6rem; font:900 1.15rem/1.2 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.25em; }
.info dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:.25rem .8rem; }
.info dt { color:#c4c7cb; }
.info dd { margin:0; text-align:right; font:700 .85rem ui-monospace,Menlo,Consolas,monospace; }
.stars { color:var(--amber); letter-spacing:.08em; }
.elsewhere { margin-bottom:5rem; }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.card { display:flex; flex-direction:column; justify-content:space-between; gap:2.2rem; min-height:17rem; padding:1.8rem; border-radius:6px; text-decoration:none; transition:transform .2s, box-shadow .2s; }
.card:hover, .card:focus-visible { transform:translateY(-4px); }
.card h3 { margin:.5rem 0 .6rem; font-size:1.9rem; line-height:1.05; }
.card p { margin:0; max-width:26rem; }
.card .go { display:inline-flex; gap:.6rem; align-items:center; }
.card.me { background:#172228; color:var(--light); border:1px solid var(--line); font-family:Georgia,"Times New Roman",serif; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.card.me h3 { font-weight:400; letter-spacing:-.01em; font-size:2.2rem; }
.card.me p { color:#c1c7c7; font-size:1.05rem; }
.card.me .mono, .card.me .go { font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--amber); }
.card.me:hover { box-shadow:0 12px 30px rgba(0,0,0,.28); }
.card.gdd { background:var(--deep) radial-gradient(24rem 14rem at 80% 0%, rgba(49,198,207,.12), transparent 70%); color:#e7f6fa; border:1px solid #27535a; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.card.gdd h3 { font-weight:900; letter-spacing:.01em; text-shadow:0 0 22px rgba(49,198,207,.28); }
.card.gdd p { color:#a6b9bc; }
.card.gdd .mono { color:var(--cyan); }
.card.gdd:hover { box-shadow:0 12px 30px rgba(0,0,0,.3); }
.about { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; padding:2.5rem 1.25rem; border-top:1px solid var(--line); }
.about p { color:var(--soft); margin:.5rem 0 0; }
.contact-box { background:var(--night); color:var(--light); border:1px solid var(--line); border-radius:8px; padding:1.4rem; }
.contact-box p { color:#c4c7cb; }
.contact-box .eyebrow { color:var(--amber); }
.contact-box a.big { color:var(--cyan); font:800 1.1rem ui-monospace,Menlo,Consolas,monospace; word-break:break-all; }
footer { border-top:1px solid var(--line); padding:1.6rem 0 3rem; color:var(--soft); }
footer .wrap { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
footer a { color:var(--light); margin-right:1.2rem; text-decoration:none; }
footer a:hover { color:var(--amber); }
.doc { max-width:44rem; padding:2.5rem 0 4rem; }
.doc h1 { font-size:clamp(2rem,6vw,3rem); line-height:1.05; margin:.4rem 0; font-weight:900; letter-spacing:-.02em; }
.doc h2 { font-size:1.2rem; margin:2.2rem 0 .3rem; }
.doc p, .doc li { color:#c5cccd; }
.doc .upd { color:var(--soft); }
@media (max-width:60rem) { .grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:44rem) { header.top { flex-wrap:wrap; } header.top nav { gap:.5rem .8rem; } .hero { grid-template-columns:minmax(0,1fr); gap:1rem; } .hero-logo { width:100%; max-width:100%; min-width:0; margin:0 auto; } .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .cards { grid-template-columns:1fr; } .about { grid-template-columns:1fr; gap:1.5rem; } .stats .v { font-size:1.3rem; } .stats div { padding:.8rem; } header.top .wordmark { font-size:1rem; } }
@media (prefers-reduced-motion:reduce) { .poster, .card { transition:none; } .poster:hover, .poster:focus-visible, .card:hover { transform:none; } html { scroll-behavior:auto; } }