@font-face{font-family:"Disket Mono";src:url("../assets/fonts/DisketMono.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Blackout 2AM";src:url("../assets/blackout-2am.ttf") format("truetype");font-display:swap}
:root{--bg:#000;--fg:#f2f2f2;--dim:#8a8a8a;--line:rgba(255,255,255,.16)}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:13px/1.6 "Disket Mono",ui-monospace,monospace;letter-spacing:.03em;
  text-transform:uppercase;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

.top{display:flex;align-items:center;gap:24px;padding:22px 36px;font-size:11px}
.logo{font-family:"Blackout 2AM",sans-serif;font-size:22px;background:#fff;color:#000;padding:0 6px;line-height:1.2;letter-spacing:0}
.rule{flex:1;height:1px;background:var(--line)}

main{max-width:1240px;margin:0 auto;padding:40px 36px 30px}
.brief h1{font-family:"Blackout 2AM",sans-serif;font-weight:400;font-size:clamp(26px,4.2vw,52px);line-height:1.05;
  letter-spacing:0;max-width:22ch;margin-bottom:28px}
.brief ol{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px;max-width:1000px;color:var(--dim);counter-reset:b}
.brief li{counter-increment:b;padding-left:34px;position:relative}
.brief li::before{content:counter(b,decimal-leading-zero);position:absolute;left:0;color:var(--fg)}
.brief b{color:var(--fg);font-weight:400}

.variants{display:grid;gap:18px;margin:56px 0 36px}
.card{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:18px 0 22px;border-top:1px solid var(--line)}
.card .head{display:flex;align-items:baseline;gap:18px}
.card .num{color:var(--dim)}
.card h2{font-family:"Blackout 2AM",sans-serif;font-weight:400;font-size:clamp(22px,2.6vw,32px);letter-spacing:0;line-height:1}
.card .go{margin-left:auto;font-size:11px;border:1px solid var(--line);padding:7px 11px;transition:background .2s,color .2s}
.card:hover .go,.card:focus-visible .go{background:#fff;color:#000}
.card img{display:block;width:100%;height:auto;aspect-ratio:2000/225;object-fit:cover;background:#111}
.card p{color:var(--dim);max-width:75ch}
.card .meta{font-size:11px}

.keys{display:flex;flex-wrap:wrap;gap:10px 26px;color:var(--dim);font-size:11px}
kbd{font:inherit;color:var(--fg);border:1px solid var(--line);padding:2px 6px;margin-right:4px}

footer{max-width:1240px;margin:0 auto;padding:22px 36px 40px;color:var(--dim);font-size:10px;border-top:1px solid var(--line)}

@media (max-width:760px){
  .top{padding:16px;gap:14px}
  .top span:last-child{display:none}
  main{padding:26px 16px 20px}
  footer{padding:18px 16px 30px}
  .brief ol{grid-template-columns:minmax(0,1fr)}
  .card .go{display:none}
}