/* «Жанри» (19.10.2026) — компоненти шаблону: сітка з лініями, sec-no, Tektur, кислотний акцент */
.gx{border-left:1px solid var(--line);border-right:1px solid var(--line)}
.gx-bc{font:400 11px var(--mono);letter-spacing:.08em;color:var(--gray)}.gx-bc a{color:var(--ink-dim)}
.gx-hero{display:grid;grid-template-columns:1.1fr .9fr;border-bottom:1px solid var(--line)}
.gx-hero .l{padding:44px 48px;display:flex;flex-direction:column;gap:20px;border-right:1px solid var(--line)}
.gx-hero h1{font:800 clamp(64px,8vw,132px)/.88 var(--display);text-transform:uppercase;margin:0}
.gx-hero .lead{max-width:520px;color:var(--ink-dim);font-size:15px;line-height:1.6;margin:0}.gx-hero .lead b{color:var(--ink)}
.gx-hero .r{position:relative;min-height:420px;background:center/cover}
.gx-hero .r:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050505 0,transparent 40%)}
.gx-hero .chero-hud{position:absolute;left:18px;top:18px;z-index:2}
.gx-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.gx-sw{display:inline-flex;border:1px solid var(--line-2)}
.gx-sw button{padding:12px 18px;font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray);background:none;border:0;cursor:pointer}
.gx-sw button.on{background:var(--acid);color:#000}
.gx-sec{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:40px 48px 24px;border-bottom:1px solid var(--line)}
.gx-sec h2{font:800 clamp(34px,4vw,58px)/.95 var(--display);text-transform:uppercase;margin:12px 0 0}
.gx-sec p{max-width:420px;color:var(--ink-dim);font-size:13px;line-height:1.6;margin:0}
.gx-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.gx-c{position:relative;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;color:var(--ink);min-height:300px;overflow:hidden;background:none;text-align:left;cursor:pointer;font:inherit}
.gx-grid>.gx-c:nth-child(4n+3){border-right:0}
.gx-c.big{grid-column:span 2}
.gx-c .no{font:400 11px var(--mono);color:var(--acid);letter-spacing:.14em}
.gx-c .cv{position:relative;display:block;height:120px;margin:4px 0 6px}
.gx-c .cv img{position:absolute;bottom:0;width:104px;height:104px;object-fit:cover;box-shadow:0 10px 24px rgba(0,0,0,.6);border:1px solid #000;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.gx-c .cv img:nth-child(1){left:0;transform:rotate(-6deg)}.gx-c .cv img:nth-child(2){left:52px;transform:rotate(-1deg);z-index:2}.gx-c .cv img:nth-child(3){left:104px;transform:rotate(4deg)}.gx-c .cv img:nth-child(4){left:156px;transform:rotate(8deg)}
.gx-c:hover .cv img:nth-child(1){transform:rotate(-10deg) translateY(-6px)}.gx-c:hover .cv img:nth-child(2){transform:rotate(-2deg) translateY(-12px)}.gx-c:hover .cv img:nth-child(3){transform:rotate(6deg) translateY(-8px)}.gx-c:hover .cv img:nth-child(4){transform:rotate(11deg) translateY(-4px)}
.gx-c.big .cv img{width:118px;height:118px}.gx-c.big .cv img:nth-child(2){left:70px}.gx-c.big .cv img:nth-child(3){left:140px}.gx-c.big .cv img:nth-child(4){left:210px}
.gx-c h3{font:800 28px/1 var(--display);text-transform:uppercase;margin:auto 0 0}
.gx-c.big h3{font-size:44px}
.gx-c .n{font:400 12px var(--mono);color:var(--ink-dim)}.gx-c .n em{font-style:normal;color:var(--acid)}
.gx-c .st{display:flex;flex-wrap:wrap;gap:6px}.gx-c .st span{font:400 10px var(--mono);letter-spacing:.06em;border:1px solid var(--line-2);padding:4px 7px;color:var(--ink-dim)}
.gx-c .go{position:absolute;right:20px;top:20px;color:var(--ink-dim);line-height:0}.gx-c .go .ar{transition:transform .25s}.gx-c:hover .go{color:var(--acid)}.gx-c:hover .go .ar{transform:translate(2px,-2px)}.gx-c[aria-expanded="true"] .go .ar{transform:rotate(135deg)}
.gx-c:hover{background:var(--panel)}.gx-c:hover h3{color:var(--acid)}
.gx-luckc{background:var(--acid)}.gx-luckc .no,.gx-luckc h3,.gx-luckc .n{color:#000!important}.gx-luckc:hover{background:#eaff5a}
.gx-qw{padding:24px 48px;border-bottom:1px solid var(--line)}
.gx-q{width:100%;background:transparent;border:1px solid var(--acid);color:var(--ink);font:400 16px var(--mono);padding:18px 20px;outline:0}
.gx-none{display:block;margin-top:12px;font:400 13px var(--mono);color:var(--acid)}
.gx-pro{display:grid;grid-template-columns:repeat(4,1fr)}
.gx-pg{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px}
.gx-pg:nth-child(4n){border-right:0}
.gx-pg h3{font:800 18px var(--display);text-transform:uppercase;margin:0 0 10px;display:flex;justify-content:space-between;gap:8px}.gx-pg h3 a{color:var(--ink)}.gx-pg h3 em{font:400 11px var(--mono);color:var(--acid);font-style:normal}
.gx-s{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line);font:400 12px var(--mono);color:var(--ink-dim)}.gx-s em{font-style:normal;color:var(--gray)}
.gx-s:hover,.gx-s.hit{color:var(--acid)}.gx-s.x{display:none}.gx-pg.all .gx-s.x{display:flex}
.gx-more{margin-top:8px;background:none;border:0;padding:4px 0;font:400 12px var(--mono);color:var(--acid);cursor:pointer}.gx-pg.all .gx-more{display:none}
.gx.q-on .gx-s{display:none}.gx.q-on .gx-s.hit{display:flex}.gx.q-on .gx-more{display:none}.gx.q-on .gx-pg.miss{display:none}
.gx-d{display:grid;grid-template-columns:140px minmax(0,1fr);border-bottom:1px solid var(--line)}
.gx-dy{padding:22px 24px;font:800 40px/1 var(--display);color:var(--acid);border-right:1px solid var(--line)}
.gx-dw{min-width:0;padding:18px 0 18px 18px}
.gx-drow{display:flex;gap:14px;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}
.gx-dc{flex:0 0 150px;color:var(--ink)}.gx-dc img{width:150px;height:150px;object-fit:cover;display:block;border:1px solid var(--line)}
.gx-dc b{display:block;margin-top:8px;font:400 12px/1.3 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-dc i{display:block;font:400 11px/1.3 var(--mono);font-style:normal;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-dc span{display:inline-block;margin-top:6px;font:400 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-2);padding:3px 6px;color:var(--ink-dim)}
.gx-dc:hover b{color:var(--acid)}
.gx-born{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;font:400 11px var(--mono);color:var(--gray)}.gx-born a{color:var(--ink-dim)}.gx-born a:hover{color:var(--acid)}
.gx-txt{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.gx-txt>div{padding:44px 48px}.gx-txt>div:first-child{border-right:1px solid var(--line)}
.gx-txt p{color:var(--ink-dim);font-size:14px;line-height:1.7;margin:0 0 14px}
@media(max-width:1100px){.gx-grid{grid-template-columns:repeat(3,1fr)}.gx-grid>.gx-c{border-right:1px solid var(--line)!important}.gx-pro{grid-template-columns:repeat(2,1fr)}.gx-pg:nth-child(4n){border-right:1px solid var(--line)}}
@media(max-width:700px){.gx-hero{grid-template-columns:1fr}.gx-hero .r{min-height:200px;order:-1}.gx-hero .l{padding:24px 16px;border-right:0}.gx-grid{grid-template-columns:1fr 1fr}.gx-grid>.gx-c:nth-child(2n+1){border-right:0!important}.gx-grid>.gx-c.big{border-right:0!important}.gx-c{min-height:230px;padding:16px}.gx-c.big{grid-column:span 2}.gx-c .cv{height:90px}.gx-c .cv img{width:76px;height:76px}.gx-c .cv img:nth-child(2){left:36px}.gx-c .cv img:nth-child(3){left:72px}.gx-c .cv img:nth-child(4){display:none}.gx-c.big .cv img{width:90px;height:90px}.gx-c.big .cv img:nth-child(2){left:50px}.gx-c.big .cv img:nth-child(3){left:100px}.gx-c.big .cv img:nth-child(4){display:block;left:150px}.gx-c h3{font-size:20px}.gx-c.big h3{font-size:32px}.gx-c .st span:nth-child(n+3){display:none}.gx-sec{padding:28px 16px 18px;flex-direction:column;align-items:flex-start;gap:10px}.gx-txt{grid-template-columns:1fr}.gx-txt>div{padding:28px 16px}.gx-txt>div:first-child{border-right:0;border-bottom:1px solid var(--line)}.gx-pro{grid-template-columns:1fr}.gx-pg{border-right:0!important}.gx-qw{padding:16px}.gx-d{grid-template-columns:1fr}.gx-dy{border-right:0;padding:16px 16px 0;font-size:30px}.gx-dw{padding:12px 0 16px 16px}.gx-dc{flex-basis:120px}.gx-dc img{width:120px;height:120px}}
.gx-luckc{grid-column:span 3}
.gx-dc{width:150px;min-width:0;overflow:hidden}
.gx-c .st span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1100px){.gx-luckc{grid-column:span 2}}
@media(max-width:700px){.gx-luckc{grid-column:span 2;min-height:160px}.gx-dc{width:120px}}
.gx-luckc{grid-column:1/-1;min-height:170px;border-right:0!important}

/* ящик відкривається на сторінці (як раніше) */
.gx-c[aria-expanded="true"]{background:var(--panel)}.gx-c[aria-expanded="true"] h3{color:var(--acid)}
.gx-c[aria-expanded="true"]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acid)}
.gx-dr{grid-column:1/-1;border-bottom:1px solid var(--line);background:#0b0b0b;padding:26px 28px 28px;display:flex;flex-direction:column;gap:18px;animation:gxIn .35s ease}
@keyframes gxIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.gx-drh{display:flex;align-items:baseline;gap:16px}.gx-drh h3{font:800 34px/1 var(--display);text-transform:uppercase;margin:0}.gx-drh span{font:400 12px var(--mono);color:var(--acid)}
.gx-x{margin-left:auto;background:none;border:1px solid var(--line-2);color:var(--ink-dim);font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;cursor:pointer}.gx-x:hover{color:var(--acid);border-color:var(--acid)}
.gx-chips{display:flex;flex-wrap:wrap;gap:8px}.gx-chips a{font:400 12px var(--mono);border:1px solid var(--line-2);padding:7px 10px;color:var(--ink)}.gx-chips a em{font-style:normal;color:var(--gray);margin-left:8px}.gx-chips a:hover{border-color:var(--acid);color:var(--acid)}
.gx-flip{display:flex;gap:14px;overflow-x:auto;padding:10px 4px 8px;scroll-behavior:smooth}
.gx-rec{flex:0 0 160px;width:160px;min-width:0;color:var(--ink);transition:transform .3s}
.gx-rec img{width:160px;height:160px;object-fit:cover;display:block;border:1px solid var(--line)}
.gx-rec b{display:block;margin-top:8px;font:400 12px/1.3 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-rec i{display:block;font:400 11px/1.3 var(--mono);font-style:normal;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-rec span{display:block;margin-top:4px;font:800 15px var(--display);color:var(--acid)}
.gx-rec:hover b{color:var(--acid)}
.gx-rec.lucky{transform:translateY(-6px)}.gx-rec.lucky img{outline:3px solid var(--acid);outline-offset:2px;box-shadow:0 0 24px rgba(225,255,39,.45)}
.gx-all{align-self:flex-start}
@media(max-width:700px){.gx-dr{padding:18px 16px}.gx-drh h3{font-size:26px}.gx-rec{flex-basis:130px;width:130px}.gx-rec img{width:130px;height:130px}}
.gx-dr[hidden]{display:none}

.gx-tag{align-self:center;background:var(--acid);color:#000;font:700 10px/1 var(--mono);letter-spacing:.14em;padding:5px 7px;text-transform:uppercase}
.gx-cnt{font:400 12px var(--mono);color:var(--gray)!important}
.gx-chips a.on{background:var(--acid);border-color:var(--acid);color:#000}.gx-chips a.on em{color:#000}
.gx-flip.wait{opacity:.35;transition:opacity .2s}
.gx-drh .gx-tag{color:#000;font:700 11px/1 var(--mono);padding:6px 8px}