:root{--bg:#f3efe6;--ink:#141414;--mut:#555;--acc:#e8a33d;--line:#141414;--blue:#1f3fbf}
*{box-sizing:border-box}body{margin:0;background:var(--bg) linear-gradient(#0000000a 1px,transparent 1px) 0 0/24px 24px,var(--bg);background-image:linear-gradient(#00000009 1px,transparent 1px),linear-gradient(90deg,#00000009 1px,transparent 1px);background-size:24px 24px;color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--blue)}.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px}
.top{display:flex;align-items:center;gap:24px;padding:14px 5vw;border-bottom:1px solid var(--line);flex-wrap:wrap}
.logo{font:700 15px ui-monospace,monospace;letter-spacing:.1em;color:var(--ink);text-decoration:none;display:flex;gap:8px;align-items:center}
.mark{width:18px;height:18px;background:conic-gradient(var(--ink) 25%,#fff 0 50%,var(--ink) 0 75%,#fff 0);border:1px solid var(--ink)}
nav{flex:1}nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}nav a[aria-current]{border-bottom:2px solid var(--ink)}
.yt{background:var(--ink);color:#fff;padding:8px 14px;border-radius:4px;text-decoration:none;font-size:13px;font-weight:600}
main{max-width:1100px;margin:auto;padding:0 5vw}.kicker{font:12px ui-monospace,monospace;letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}
.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;padding:56px 0;align-items:center;border-bottom:1px solid var(--line)}
h1{font-size:clamp(40px,7vw,76px);line-height:1;margin:.2em 0;letter-spacing:-.03em}.lead{max-width:40ch}
.chips{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0}.chips li{border:1px solid var(--ink);padding:3px 10px;font:12px ui-monospace,monospace;background:#fff}
.board{margin:0}.board div{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--ink);aspect-ratio:1;max-width:320px}
.board span{display:grid;place-items:center;font-size:44px}.l{background:#fff}.d{background:var(--ink);color:#fff}.k{color:var(--blue)}.o{background:var(--acc)}
figcaption{font:12px ui-monospace,monospace;color:var(--mut);margin-top:8px}
.sec{padding:48px 0;border-bottom:1px solid var(--line)}h2{font-size:28px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;border:1px solid var(--ink);background:#fff}
.cards li{padding:22px;border-right:1px solid var(--ink)}.cards li:last-child{border:0}.ico{font-size:26px;display:block}.cards small{font:12px ui-monospace,monospace;color:var(--mut)}.cards h3{margin:.3em 0}.cards p{font-size:14px;color:var(--mut)}
.posts{list-style:none;padding:0}.posts a{display:flex;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--ink);color:var(--ink);text-decoration:none}
.tag{background:var(--ink);color:#fff;font:12px ui-monospace,monospace;padding:2px 10px;min-width:130px;text-align:center}.t{flex:1;font-weight:600;font-size:18px}time{font:12px ui-monospace,monospace;color:var(--mut)}
.post{max-width:70ch}.post img{max-width:100%}
footer{background:var(--ink);color:#fff;display:flex;justify-content:space-between;padding:22px 5vw;font:12px ui-monospace,monospace;margin-top:48px;flex-wrap:wrap;gap:8px}
a:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
@media(max-width:800px){.hero{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}.cards li{border-bottom:1px solid var(--ink)}.posts a{flex-wrap:wrap}.tag{min-width:0}}