@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600&display=swap');

:root{--bg:#101010;--panel:#181818;--panel-hover:#202020;--line:#303030;--text:#e7e7e7;--muted:#858585}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Manrope,Arial,sans-serif}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.018) 50%,transparent 52%);opacity:.45}
a{color:inherit;text-decoration:none}
.shell{width:min(1120px,calc(100% - 56px));margin:auto;min-height:100vh;padding:26px 0 32px}
.header{height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font:10px "DM Mono",monospace;letter-spacing:.16em}
.logo{font-size:13px;letter-spacing:.08em;font-weight:500}
.header-right{display:flex;gap:28px;color:var(--muted)}
.header-right b{color:var(--text);font-weight:400}
.hero{padding:82px 0 62px}
.kicker{margin:0 0 17px;color:var(--muted);font:9px "DM Mono",monospace;letter-spacing:.16em}
h1{margin:0;font-size:clamp(48px,7vw,82px);line-height:.95;font-weight:500;letter-spacing:-.06em}
.hero-note{max-width:650px;margin:24px 0 0;color:#8b8b8b;font-size:12px;line-height:1.7}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.post-card{position:relative;min-height:148px;padding:21px 22px 20px;display:grid;grid-template-columns:30px 1fr 20px;gap:12px;background:var(--panel);border:1px solid #262626;transition:transform .25s ease,background .25s ease,border-color .25s ease}
.post-card:hover{transform:translateY(-3px);background:var(--panel-hover);border-color:#464646}
.index{color:#666;font:9px "DM Mono",monospace;padding-top:2px}
.meta{color:#777;font:8px "DM Mono",monospace;letter-spacing:.1em}
.post-card h2{margin:12px 0 8px;font-size:20px;line-height:1.1;font-weight:500;letter-spacing:-.025em}
.post-card p{max-width:460px;margin:0;color:#777;font-size:11px;line-height:1.55}
.go{color:#777;font-size:17px;transition:transform .25s ease,color .25s ease}
.post-card:hover .go{color:#ddd;transform:translate(3px,-3px)}
.footer{display:flex;justify-content:space-between;padding-top:52px;color:#5b5b5b;font:8px "DM Mono",monospace;letter-spacing:.13em}
@media(max-width:720px){.shell{width:min(100% - 30px,1120px)}.hero{padding:68px 0 48px}.grid{grid-template-columns:1fr}}
@media(max-width:430px){.header-right span:first-child{display:none}.header-right{gap:0}.logo{font-size:11px;letter-spacing:.13em}.post-card{min-height:135px;padding:18px}.post-card h2{font-size:18px}.post-card p{font-size:10px}}