.cp-card{display:grid;grid-template-columns:340px minmax(0,1fr);gap:56px;align-items:start}
.cp-card__art{position:sticky;top:var(--cp-sticky-top);border:1px solid var(--cp-ink-border);background:var(--cp-placeholder);aspect-ratio:733/1024}
.cp-card__art img{width:100%;height:100%;object-fit:cover}
.cp-card__sub{display:block;font-size:.5em;font-weight:500;color:var(--cp-text-mute);letter-spacing:.06em;margin-top:6px}
.cp-card .cp-lead{margin:18px 0 28px}
.cp-rules{border-left:2px solid var(--cp-ink);background:var(--cp-panel);padding:16px 18px;margin-bottom:12px;font-size:17px;line-height:1.75;color:var(--cp-text)}
.cp-rules p{margin:0}.cp-rules--en{border-left-color:var(--cp-line-4);color:var(--cp-text-2);font-size:15px}
.cp-rules__label{font-family:var(--cp-font-head);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-text-mute);margin-bottom:8px!important}
.cp-kwlegend{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start;margin:4px 0 12px}
.cp-kwlegend dt{margin:0}.cp-kwlegend dd{margin:2px 0 0;font-size:13px;color:var(--cp-text-mute)}
.cp-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--cp-line-2);border:1px solid var(--cp-line-2);margin:20px 0 0}
.cp-meta>div{background:var(--cp-panel);padding:12px 14px}.cp-meta dt{font-family:var(--cp-font-head);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-text-mute)}.cp-meta dd{margin:4px 0 0;font-size:14px}
/* Liczba wierszy meta zależy od karty (legalność, wydanie) — ostatni kafel domyka rząd siatki, bez pustych pól tła. */
.cp-meta>div:last-child:nth-child(3n+1){grid-column:1/-1}.cp-meta>div:last-child:nth-child(3n+2){grid-column:span 2}
@media (max-width:640px){.cp-meta>div:last-child:nth-child(n){grid-column:auto}.cp-meta>div:last-child:nth-child(odd){grid-column:1/-1}}
.cp-printings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cp-printings li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:10px 12px;align-items:center}.cp-printings li.is-primary{border-left:2px solid var(--cp-ink)}
.cp-printings span{display:block;font-size:13px;color:var(--cp-text-mute)}
.cp-printings__zoom{display:block;aspect-ratio:733/1024;border:1px solid var(--cp-ink-border);background:var(--cp-placeholder);cursor:zoom-in;transition:border-color .15s}
.cp-printings__zoom:hover{border-color:var(--cp-accent-line)}.cp-printings__zoom img{width:100%;height:100%;object-fit:cover}
.cp-zoom{padding:0;border:1px solid var(--cp-ink-border);background:var(--cp-bg);max-width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:visible}
.cp-zoom::backdrop{background:rgb(0 0 0 / .8)}
.cp-zoom img{display:block;width:100%;height:auto;max-height:calc(100dvh - 34px);object-fit:contain;cursor:zoom-out}
.cp-zoom__close{position:absolute;top:-14px;right:-14px;width:32px;height:32px;border:1px solid var(--cp-line-3);background:var(--cp-panel);color:var(--cp-text-hi);font-size:20px;line-height:1}
.cp-zoom__close:hover{border-color:var(--cp-accent-line);color:var(--cp-accent)}
.cp-h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin:24px 0 10px}
.cp-faq{display:grid;gap:8px}.cp-faq summary{padding:14px 16px;cursor:pointer;font-family:var(--cp-font-head);font-weight:600;font-size:15px;color:var(--cp-text-hi)}
.cp-faq p{padding:0 16px 16px;margin:0;color:var(--cp-text-2)}
/* Oficjalne FAQ wydawcy (tłumaczenie) nad pytaniami generowanymi: etykieta, akcent przy pozycjach, nota ze źródłem. */
.cp-faq-official{margin-bottom:20px}
/* Etykieta jest nagłówkiem H3 (nawigacja po nagłówkach między FAQ wydawcy a pytaniami generowanymi) — wygląd jak dotąd. */
.cp-faq__label{font-family:var(--cp-font-head);font-size:10px;font-weight:400;line-height:1.65;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-accent);margin:0 0 8px}
.cp-faq details[data-official]{border-left:2px solid var(--cp-ink)}
.cp-faq__note{margin:8px 0 0;font-size:13px;color:var(--cp-text-mute)}.cp-faq__note a{color:var(--cp-accent);text-decoration:underline;text-decoration-color:var(--cp-accent-line);text-underline-offset:3px}.cp-faq__note a:hover{text-decoration-color:currentColor}
.cp-related{margin-top:24px}
.cp-rail{display:flex!important;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.cp-rail .cp-tile{flex:0 0 220px;scroll-snap-align:start;content-visibility:visible}
.cp-rail-nav{display:flex;gap:6px}.cp-rail-nav button{width:34px;height:34px;border:1px solid var(--cp-line-3);color:var(--cp-text-2)}.cp-rail-nav button:hover{border-color:var(--cp-accent-line);color:var(--cp-accent)}
@media (max-width:1024px){.cp-card{grid-template-columns:1fr;gap:28px}.cp-card__art{position:static;width:100%;max-width:340px;margin:0 auto}}
@media (max-width:640px){.cp-meta{grid-template-columns:1fr 1fr}.cp-printings{grid-template-columns:1fr}.cp-rail .cp-tile{flex-basis:160px}}
/* ≤1024px: jawne width:100% — z samym margin:auto element siatki ma szerokość „fit-content” liczoną z grafiki,
   więc zanim obrazek się wczyta, ramka ma ~0 px, a potem rośnie do 340×475 i spycha treść (CLS 0,40 w Lighthouse). */