/* politic.design — magazine covers of Brantopic's news-coverage series */
.covers{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.covers{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.covers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.cover{--bg:#111418;--fg:#F2F4F6;--ac:#F0B347;--hi:#F0B347;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg);color:var(--fg);container-type:inline-size;display:flex;flex-direction:column;gap:1.9%;padding:6%;box-shadow:0 10px 24px -14px rgba(0,0,0,.55);min-width:0;cursor:zoom-in;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;animation:cv-deal .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes cv-deal{from{opacity:0;transform:translateY(24px) rotate(-2deg)}}
:is(.cover,.cv-stage).v1{--bg:#E8A33D;--fg:#14171C;--ac:#14171C;--hi:#7A1F1A}
:is(.cover,.cv-stage).v2{--bg:#F4F6F8;--fg:#14171C;--ac:#2A58C4;--hi:#2A58C4;outline:1px solid #C2CBD3;outline-offset:-1px}
:is(.cover,.cv-stage).v3{--bg:#2A58C4;--fg:#fff;--ac:#fff;--hi:#FFD166}
:is(.cover,.cv-stage).v4{--bg:#0E5E66;--fg:#E9FBF7;--ac:#9FE3D6;--hi:#FFD166}
:is(.cover,.cv-stage).v5{--bg:#3B1F4A;--fg:#FBEFF6;--ac:#F2A7C3;--hi:#F2A7C3}
:is(.cover,.cv-stage).v6{--bg:#17402E;--fg:#F1F8E6;--ac:#C9E36B;--hi:#C9E36B}
.cover:hover,.cover:focus-visible,.cover.open{transform:scale(1.06);z-index:2;box-shadow:0 24px 40px -18px rgba(0,0,0,.6)}
.cover>*:not(.cv-full){transition:opacity .3s}
.cover:hover>*:not(.cv-full),.cover:focus-visible>*:not(.cv-full),.cover.open>*:not(.cv-full){opacity:0}
.cv-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cv-area{fill:var(--ac);fill-opacity:.22;animation:cv-fade .8s ease-out both;animation-delay:calc(var(--d,0ms) + 900ms)}
.cv-line{fill:none;stroke:var(--ac);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;animation:cv-draw 1.4s ease-out both;animation-delay:calc(var(--d,0ms) + 400ms)}
.cv-ed{stroke:var(--fg);stroke-opacity:.5;stroke-dasharray:3 3}
.cv-art circle{fill:#F0B347;stroke:var(--bg);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:cv-pop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--d,0ms) + 1600ms)}
@keyframes cv-draw{from{stroke-dashoffset:1}}
@keyframes cv-fade{from{opacity:0}}
@keyframes cv-pop{from{opacity:0;transform:scale(.1)}}
.cover>*:not(svg):not(.cv-full){position:relative}
.cv-mast{display:flex;justify-content:space-between;align-items:baseline;gap:4px;font-family:'IBM Plex Mono',monospace;font-size:max(9px,4cqi);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:1.5cqi}
.cv-mast span:first-child{font-family:Montserrat,Arial,sans-serif;font-weight:900;font-size:max(11px,7cqi);text-transform:none}
.cv-mast i{font-style:normal;opacity:.7}
.cv-title{margin:1cqi 0 0;font-family:Montserrat,Arial,sans-serif;font-weight:900;text-transform:uppercase;font-size:var(--ts,20cqi);line-height:.86;color:var(--hi);text-wrap:balance}
.cover.v2 .cv-title{border-top:2.4cqi solid var(--ac);padding-top:2cqi}
.cover.v3 .cv-title{text-align:center}
.cv-dek{font-family:'Source Serif 4',Georgia,serif;font-size:max(11px,5.4cqi);line-height:1.2;font-weight:600;margin:0;text-shadow:0 1px 3px var(--bg)}
.cv-lines{list-style:none;margin:0;padding:0;display:grid;gap:2cqi;font-size:max(10px,4.3cqi);line-height:1.2;text-shadow:0 1px 3px var(--bg)}
.cv-lines li{border-top:1px solid color-mix(in srgb,currentColor 35%,transparent);padding-top:1.5cqi}
.cv-lines span{display:block;font-family:'IBM Plex Mono',monospace;font-size:max(8.5px,3.4cqi);opacity:.75}
.cv-foot{margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:max(8.5px,3.5cqi);line-height:1.3;background:var(--bg);padding:1.5cqi 2cqi;margin-left:-2cqi;margin-right:-2cqi}
.cv-foot b{font-size:max(11px,5cqi)}
.cv-full{position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;background:var(--bg)}
.cover:hover .cv-full,.cover:focus-visible .cv-full,.cover.open .cv-full{opacity:1}
.cv-full svg{width:100%;height:100%;display:block}
.cv-full text{font-family:'IBM Plex Mono',monospace;fill:var(--fg);font-size:9px}
.cv-full .fh{font-family:Montserrat,Arial,sans-serif;font-weight:900;font-size:22px;text-transform:uppercase;fill:var(--hi)}
.cv-full .fs{font-size:9.5px;opacity:.8}.cv-full .ax{font-size:8.5px;opacity:.75}
.cv-full .g{stroke:var(--fg);stroke-opacity:.18}.cv-full .ed{stroke:var(--fg);stroke-opacity:.6;stroke-dasharray:3 3}
.cv-full .fa{fill:var(--ac);fill-opacity:.22}.cv-full .fl{fill:none;stroke:var(--ac);stroke-width:1.6}
.cv-full circle{fill:#F0B347;stroke:var(--bg);stroke-width:1.5}
.cv-full circle+text{font-size:8.5px;font-weight:600;fill:#F0B347}
@media (prefers-reduced-motion:reduce){.cover,.cv-area,.cv-line,.cv-art circle{animation:none}}

/* picked mode: covers shrink to a strip of thumbnails, the chosen one opens large below */
.covers.picked{grid-template-columns:repeat(7,minmax(0,92px));gap:10px;justify-content:start}
@media (max-width:640px){.covers.picked{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}}
.covers.picked .cover{cursor:pointer;padding:8%}
.covers.picked .cover>:is(.cv-dek,.cv-lines,.cv-foot,.cv-mast),.covers.picked .cv-full{display:none}
.covers.picked .cv-title{font-size:min(var(--ts,20cqi),13cqi)}
.covers.picked .cover:hover,.covers.picked .cover:focus-visible{transform:translateY(-3px)}
.covers.picked .cover:hover>*:not(.cv-full),.covers.picked .cover:focus-visible>*:not(.cv-full){opacity:1}
.covers.picked .cover:not(.sel){opacity:.55;filter:saturate(.6)}
.covers.picked .cover:not(.sel):hover{opacity:1;filter:none}
.covers.picked .cover.sel{outline:3px solid var(--gold,#F2B33D);outline-offset:3px;opacity:1}
.cv-stage{--bg:#111418;--fg:#F2F4F6;--ac:#F0B347;--hi:#F0B347;background:var(--bg);color:var(--fg);margin-top:16px;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px 32px;padding:28px;position:relative;animation:cv-open .45s cubic-bezier(.2,.8,.2,1) both}
.cv-stage[hidden]{display:none}
@keyframes cv-open{from{opacity:0;transform:translateY(16px) scale(.98)}}
@media (max-width:820px){.cv-stage{grid-template-columns:1fr;padding:20px}}
.cv-stage .st-k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.cv-stage h3{font-family:Montserrat,Arial,sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(36px,4.6vw,60px);line-height:.88;color:var(--hi);margin:8px 0 12px}
.cv-stage .st-dek{font-family:'Source Serif 4',Georgia,serif;font-size:19px;line-height:1.3;font-weight:600;margin:0 0 16px}
.cv-stage .st-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:1px solid color-mix(in srgb,currentColor 35%,transparent);padding-top:12px}
.cv-stage .st-n b{display:block;font-family:Montserrat,Arial,sans-serif;font-weight:900;font-size:26px;line-height:1}
.cv-stage .st-n span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.cv-stage ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;font-size:15px;line-height:1.3}
.cv-stage li{border-top:1px solid color-mix(in srgb,currentColor 35%,transparent);padding-top:8px}
.cv-stage li span{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;opacity:.7}
.cv-stage a{color:var(--hi)}
.cv-stage .st-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:1px solid currentColor;background:transparent;color:var(--fg);font:20px/1 Montserrat,Arial,sans-serif;cursor:pointer;border-radius:2px}
.cv-stage .st-x:hover{background:var(--fg);color:var(--bg)}
.cv-big{width:100%;height:auto;display:block;align-self:center}
.cv-big text{font-family:'IBM Plex Mono',monospace;fill:var(--fg);font-size:12px}
.cv-big .ax{opacity:.7}
.cv-big .g{stroke:var(--fg);stroke-opacity:.16}
.cv-big .ed{stroke:var(--fg);stroke-opacity:.6;stroke-dasharray:4 4}
.cv-big .fa{fill:var(--ac);fill-opacity:.22;animation:cv-fade .8s ease-out .5s both}
.cv-big .fl{fill:none;stroke:var(--ac);stroke-width:2.4;stroke-dasharray:1;animation:cv-draw 1.3s ease-out both}
.cv-big circle{fill:#F0B347;stroke:var(--bg);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:cv-pop .5s cubic-bezier(.3,1.6,.5,1) 1.1s both}
.cv-big .sl{font-weight:600;fill:#F0B347;animation:cv-fade .4s ease-out 1.3s both}
@media (prefers-reduced-motion:reduce){.cv-stage,.cv-big .fa,.cv-big .fl,.cv-big circle,.cv-big .sl{animation:none}}

/* enlarged text: covers keep masthead, title and count only */
.bigtext .cover>:is(.cv-dek,.cv-lines){display:none}
.bigtext .cv-mast i{display:none}