/* MAGAZINE — kleuren via vars: bg fg ac ac2 card ink mut fh fb */
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--fb,Inter,system-ui)}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:auto;padding:28px 5vw}
.hd{display:flex;align-items:center;gap:28px;padding:16px 5vw;background:var(--ink);color:var(--ac)}
.lg{font:400 27px var(--fh,"Archivo Black");letter-spacing:-1px;color:var(--ac);white-space:nowrap}.lg b{background:var(--ac);color:var(--ink);padding:0 8px;margin-left:4px;border-radius:4px;font-weight:400}
.nav{display:flex;gap:20px;font-weight:700;font-size:14px;overflow-x:auto;white-space:nowrap;color:#fff}.nav a:hover{color:var(--ac)}
.srch{margin-left:auto}.srch input{border:0;border-radius:30px;padding:9px 18px;width:260px;font:inherit;background:var(--ac2);color:var(--ink)}
.th{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0003;border-radius:10px}.th img{width:100%;height:100%;object-fit:cover}
.dur{position:absolute;right:6px;bottom:6px;background:#000c;color:#fff;font:600 11px/1 system-ui;padding:3px 5px;border-radius:3px;font-style:normal}
.hero{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;margin-bottom:40px;background:var(--ink);color:#fff;border-radius:22px;padding:22px}
.hero .big .th{border:4px solid var(--ac);border-radius:14px}.kick{display:inline-block;font:800 12px var(--fb);text-transform:uppercase;letter-spacing:2px;background:var(--ac);color:var(--ink);padding:4px 10px;border-radius:4px}
.ht{font:400 32px/1.1 var(--fh);margin:12px 0;color:var(--ac)}.hp{color:#ccc;font-size:14px}.hp a{text-decoration:underline}
.picks h3,.side h3{font:400 18px var(--fh);margin:6px 0 12px;color:var(--ac)}.pick{display:grid;grid-template-columns:110px 1fr;gap:12px;margin-bottom:14px;align-items:center}.pick .th{border-radius:8px}
.pick b{font-size:13px;line-height:1.3;display:block}.pick small{color:#aaa}
.sec{margin-bottom:44px}.sec h2{font:400 25px var(--fh);display:flex;align-items:baseline;gap:12px;margin:0 0 14px;flex-wrap:wrap}.sec h2 span{font:600 13px var(--fb);color:var(--mut)}
.row,.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.grid{margin-bottom:24px}
.card{background:var(--card);border-radius:14px;padding:8px 8px 12px;box-shadow:4px 4px 0 var(--ink);color:var(--ink)}.card .th{margin-bottom:8px}
.card b{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card small{color:#666;font-size:12px}
.cats,.taglist{display:flex;flex-wrap:wrap;gap:10px}.cats a,.taglist a{background:var(--ink);color:var(--ac);padding:9px 16px;border-radius:30px;font-weight:700;font-size:13px}.taglist small{opacity:.6;margin-left:4px}
.adslot{margin:0 auto 40px;max-width:900px;overflow:hidden}
.v{display:grid;grid-template-columns:1fr 340px;gap:32px;margin-bottom:30px}.player{aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;border:4px solid var(--ink)}.player iframe{width:100%;height:100%;border:0}
.vt{font:400 27px/1.15 var(--fh);margin:18px 0 6px}.mut{color:var(--mut);font-size:13px}.perf a{text-decoration:underline;font-weight:700}
.tags a{display:inline-block;background:var(--ink);color:var(--ac);border-radius:20px;padding:4px 11px;font-size:12px;font-weight:700;margin:0 6px 6px 0}
.desc{max-width:760px}.side{background:var(--ink);color:#fff;border-radius:18px;padding:18px 20px;align-self:start}
.lhead{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}.lhead h1{font:400 30px var(--fh);margin:0}.lhead small{font:600 14px var(--fb);color:var(--mut)}
.seg{display:flex;gap:6px;flex-wrap:wrap}.seg a{background:var(--card);color:var(--ink);padding:6px 12px;border-radius:20px;font-weight:700;font-size:13px}.seg a.on{background:var(--ink);color:var(--ac)}
.pager{display:flex;gap:6px;justify-content:center;margin:24px 0}.pager a,.pager b{padding:8px 14px;border-radius:8px;background:var(--card);color:var(--ink);font-weight:700}.pager b{background:var(--ink);color:var(--ac)}
.intro{max-width:860px;margin:10px auto 30px;font-size:14px;line-height:1.7;color:var(--mut)}
.ft{border-top:3px solid var(--ink);margin-top:20px}.flinks{display:flex;gap:18px;flex-wrap:wrap;font-weight:700}.fnote{font-size:12px;color:var(--mut)}
.textpage{max-width:800px}.gone{background:var(--card);color:var(--ink);padding:14px;border-radius:10px}
@media(max-width:820px){.nav,.srch{display:none}.hero,.v{grid-template-columns:1fr}.row,.grid{grid-template-columns:1fr 1fr;gap:12px}.ht{font-size:24px}.hero{padding:14px}.wrap{padding:18px 4vw}}
