:root { --bg: #07080b; --surface: #0e1116; --surface-2: #141820; --line: #29303b; --text: #f4f6f9; --muted: #aab2bf; --faint: #6f7988; --acid: #caff46; --acid-ink: #101408; --max: 1240px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--text); background: var(--bg); font-family: Inter, Arial, sans-serif; }
body::before { position: fixed; z-index: -1; inset: 0; pointer-events: none; content: ""; background: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse at center top, #000 0%, transparent 75%); }
a { color: inherit; }
.site-header, main, footer { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 78px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font: 700 21px/1 "Chakra Petch", Arial, sans-serif; letter-spacing: .05em; text-decoration: none; }
.brand > span:last-child span { color: var(--acid); }
.brand-mark { display: grid; width: 31px; height: 31px; place-items: center; color: var(--acid-ink); background: var(--acid); font: 700 18px/1 "Chakra Petch", Arial, sans-serif; clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
nav { display: flex; height: 100%; }
nav a { display: inline-flex; align-items: center; gap: 8px; padding: 0 17px; color: var(--muted); border-left: 1px solid var(--line); font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: .06em; text-decoration: none; }
nav a:hover, nav a:focus-visible { color: var(--acid); outline: none; background: var(--surface); }
nav span { color: var(--acid); }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 42px; min-height: 345px; padding: 78px 0 62px; border-bottom: 1px solid var(--line); }
.hero > div:first-child { max-width: 755px; }
.eyebrow { margin: 0 0 13px; color: var(--acid); font: 600 11px/1.2 "JetBrains Mono", monospace; letter-spacing: .13em; }
h1, h2, h3 { font-family: "Chakra Petch", Arial, sans-serif; }
h1 { max-width: 700px; margin: 0; font-size: clamp(42px, 6vw, 76px); line-height: .96; letter-spacing: -.045em; text-transform: uppercase; }
.intro { max-width: 650px; margin: 24px 0 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.summary { display: grid; grid-template-columns: repeat(2, minmax(112px, 1fr)); gap: 1px; min-width: 267px; margin: 0; border: 1px solid var(--line); background: var(--line); }
.summary div { padding: 22px 18px; background: var(--surface); }
.summary dt { color: var(--acid); font: 700 33px/1 "Chakra Petch", Arial, sans-serif; }
.summary dd { margin: 7px 0 0; color: var(--faint); font: 600 9px/1.35 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.collection { padding: 66px 0 74px; scroll-margin-top: 18px; }
.display-collection { border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 34px; margin-bottom: 28px; }
.section-heading h2 { margin: 0; font-size: clamp(30px, 4vw, 43px); line-height: 1; letter-spacing: -.035em; text-transform: uppercase; }
.section-heading > p { max-width: 430px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.display-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); background: var(--surface); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.article-card:hover { border-color: var(--acid); background: var(--surface-2); transform: translateY(-4px); }
.card-image { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #151a22; }
.card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.image-card-slot { position: relative; display: grid; place-items: center; color: var(--acid); background: linear-gradient(135deg, rgba(32,149,214,.1), transparent 42%), var(--surface); text-align: center; }.image-card-slot::before { position: absolute; inset: 9px; content: ""; border: 1px dashed rgba(202,255,70,.24); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }.image-card-slot span { position: relative; z-index: 1; font: 600 10px/1.3 "JetBrains Mono", monospace; letter-spacing: .08em; }
.article-card:hover .card-image img { transform: scale(1.035); }
.card-image:focus-visible, .card-link:focus-visible, .card-body h3 a:focus-visible, footer a:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.card-body { display: flex; flex: 1; flex-direction: column; align-items: start; padding: 22px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 15px; color: var(--acid); font: 600 9px/1 "JetBrains Mono", monospace; letter-spacing: .08em; }
.card-meta span + span { padding-left: 7px; color: var(--faint); border-left: 1px solid var(--line); }
.card-body h3 { margin: 0; font-size: 23px; line-height: 1.08; letter-spacing: -.02em; }
.card-body h3 a { text-decoration: none; }
.card-body h3 a:hover { color: var(--acid); }
.card-body > p:not(.card-meta) { margin: 15px 0 26px; color: var(--muted); font-size: 14px; line-height: 1.58; }
.card-link { margin-top: auto; color: var(--acid); font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: .07em; text-decoration: none; }
.card-link:hover { color: #e1ff9b; }
.card-link span { display: inline-block; margin-left: 7px; transition: transform .16s ease; }
.card-link:hover span { transform: translateX(4px); }
.empty-state { display: flex; align-items: center; gap: 28px; min-height: 180px; padding: 30px; border: 1px dashed #3c4655; background: linear-gradient(135deg, rgba(202,255,70,.04), transparent 55%), var(--surface); }
.empty-index { color: var(--acid); font: 700 clamp(46px, 8vw, 88px)/1 "Chakra Petch", Arial, sans-serif; letter-spacing: -.06em; }
.empty-state h3 { margin: 0 0 8px; font-size: 25px; }
.empty-state p { max-width: 500px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
footer { display: flex; justify-content: space-between; padding: 23px 0 30px; color: var(--faint); border-top: 1px solid var(--line); font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: .08em; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--acid); }
@media (max-width: 860px) { .article-grid { grid-template-columns: repeat(2, 1fr); } .article-card:last-child { grid-column: 1 / -1; } .display-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .display-grid .article-card:last-child { grid-column: auto; } }
@media (max-width: 680px) { .site-header, main, footer { width: min(calc(100% - 30px), var(--max)); } .site-header { min-height: 66px; } nav a { padding-inline: 10px; font-size: 9px; } .hero { display: block; min-height: 0; padding: 56px 0 42px; } .summary { width: 100%; margin-top: 32px; } .section-heading { display: block; } .section-heading > p { margin-top: 16px; } .article-grid { grid-template-columns: 1fr; gap: 16px; } .article-card:last-child { grid-column: auto; } .collection { padding: 48px 0; } .empty-state { align-items: start; gap: 18px; } footer { gap: 16px; font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; } }