/* CP Ratings — works on dark and light themes; colours of stars come from settings. */
.cpr-rating{margin:.5em 0 1.25em;line-height:1.5}
.cpr-stars{position:relative;width:calc(var(--cpr-size,30px) * 10);max-width:100%;height:var(--cpr-size,30px)}
.cpr-stars-bg,.cpr-stars-fill{position:absolute;top:0;left:0;height:100%;background-repeat:repeat-x;background-size:var(--cpr-size,30px) var(--cpr-size,30px);pointer-events:none}
.cpr-stars-bg{width:100%;background-image:var(--cpr-empty)}
.cpr-stars-fill{width:var(--cpr-pct,0%);background-image:var(--cpr-filled);transition:width .12s ease}
.cpr-stars.is-hover .cpr-stars-fill{width:var(--cpr-hover-pct,0%);background-image:var(--cpr-hover);transition:none}
.cpr-stars-hit{position:absolute;inset:0;display:flex}
.cpr-star{flex:1 1 0;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;border-radius:3px}
.cpr-star:focus-visible{outline:2px solid var(--cpr-fill-color,#9e1a1b);outline-offset:2px}
.cpr-rating.is-busy .cpr-stars{opacity:.6}
.cpr-text{margin-top:.25em}
.cpr-msg:not(:empty){display:block;font-size:.875em;opacity:.85}
.cpr-ranks{margin-top:.15em;font-size:.9em}
.cpr-ranks a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.cpr-ranks a:hover{color:var(--cpr-fill-color,#9e1a1b)}
.cpr-ranks strong{color:var(--cpr-fill-color,#9e1a1b)}
.cpr-breakdown{margin-top:.35em;font-size:.875em;max-width:calc(var(--cpr-size,30px) * 10)}
.cpr-breakdown summary{cursor:pointer;opacity:.85;width:max-content}
.cpr-bd{list-style:none;margin:.4em 0 0;padding:0}
.cpr-bd li{display:grid;grid-template-columns:1.6em 1fr 7.5em;gap:.5em;align-items:center;margin:.15em 0}
.cpr-bd-score{text-align:right;font-variant-numeric:tabular-nums}
.cpr-bd-bar{height:.6em;border-radius:3px;background:rgba(127,127,127,.25);overflow:hidden}
.cpr-bd-bar span{display:block;height:100%;background:var(--cpr-fill-color,#9e1a1b)}
.cpr-bd-n{font-variant-numeric:tabular-nums;white-space:nowrap}
.cpr-bd-n small{opacity:.7}

/* Read-only mini stars */
.cpr-mini{position:relative;display:inline-block;vertical-align:-2px;width:calc(var(--cpr-size,16px) * 10);height:var(--cpr-size,16px);background:var(--cpr-empty) repeat-x;background-size:var(--cpr-size,16px) var(--cpr-size,16px)}
.cpr-mini-fill{position:absolute;inset:0 auto 0 0;background:var(--cpr-filled) repeat-x;background-size:var(--cpr-size,16px) var(--cpr-size,16px)}

/* Ranking lists */
.cpr-filters{display:flex;flex-wrap:wrap;gap:.75em 1em;align-items:flex-end;margin:0 0 1.5em;padding:1em;border:1px solid rgba(127,127,127,.3);border-radius:8px}
.cpr-f{display:flex;flex-direction:column;gap:.25em;font-size:.875em;min-width:11em;flex:1 1 11em}
.cpr-f span{opacity:.8}
.cpr-f select,.cpr-f input{width:100%;padding:.45em .6em;border-radius:6px;border:1px solid rgba(127,127,127,.45);background:transparent;color:inherit;font:inherit}
.cpr-f select option{color:#111}
.cpr-apply{padding:.55em 1.2em;border-radius:6px;border:0;background:var(--cpr-fill-color,#9e1a1b);color:#fff;font:inherit;cursor:pointer}
.cpr-reset{font-size:.875em;color:inherit;align-self:center}
.cpr-grid{display:grid;grid-template-columns:repeat(var(--cpr-cols,3),minmax(0,1fr));gap:1.5em}
@media (max-width:900px){.cpr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cpr-grid{grid-template-columns:1fr}.cpr-f{flex-basis:100%}}
.cpr-card{display:flex;flex-direction:column;border:1px solid rgba(127,127,127,.25);border-radius:8px;overflow:hidden}
.cpr-card-thumb{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden}
.cpr-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.cpr-card:hover .cpr-card-thumb img{transform:scale(1.03)}
.cpr-card-noimg{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.35em;width:100%;height:100%;padding:1em 1.1em;box-sizing:border-box;background:radial-gradient(120% 90% at 20% 15%,hsl(var(--h,0) 55% 14% / .9),transparent 60%),radial-gradient(circle at 80% 90%,#2a0606,#050404 70%);overflow:hidden}
.cpr-card-noimg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.cpr-card-noimg-cat{font-size:.68em;letter-spacing:.14em;text-transform:uppercase;color:var(--cpr-fill-color,#9e1a1b);font-weight:700}
.cpr-card-noimg-title{font-family:Cinzel,Georgia,serif;font-size:1.25em;line-height:1.15;color:#e9e2d6;text-shadow:0 2px 12px #000}
.cpr-card-rank{position:absolute;top:.5em;left:.5em;padding:.15em .55em;border-radius:4px;background:var(--cpr-fill-color,#9e1a1b);color:#fff;font-weight:700;font-size:.9em}
.cpr-card-body{display:flex;flex-direction:column;gap:.4em;padding:1em}
.cpr-card-title{margin:0;font-size:1.15em;line-height:1.3}
.cpr-card-title a{color:inherit;text-decoration:none}
.cpr-card-title a:hover{color:var(--cpr-fill-color,#9e1a1b)}
.cpr-card-rating{font-size:.9em}
.cpr-card-votes,.cpr-card-meta{opacity:.75;font-size:.85em}
.cpr-card-meta a{color:inherit}
.cpr-card-excerpt{margin:0;font-size:.95em;opacity:.9}
.cpr-card-more{margin-top:.6rem;align-self:flex-start;font-size:.9em;font-weight:600;color:var(--cpr-fill-color,#9e1a1b);text-decoration:none}
.cpr-pagination{margin:2em 0 0;display:flex;flex-wrap:wrap;gap:.35em;justify-content:center}
.cpr-pagination .page-numbers{padding:.35em .75em;border:1px solid rgba(127,127,127,.35);border-radius:6px;color:inherit;text-decoration:none}
.cpr-pagination .current{background:var(--cpr-fill-color,#9e1a1b);border-color:transparent;color:#fff}
.cpr-empty{opacity:.8}

/* Compact top list */
.cpr-toplist{margin:0;padding-left:1.6em}
.cpr-toplist li{margin:0 0 .7em}
.cpr-toplist a{font-weight:600}
.cpr-toplist-meta{display:block;font-size:.85em;opacity:.75}

/* Story of the Day hero */
.cpr-sotd{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;border:1px solid rgba(127,127,127,.25);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.35)}
.cpr-sotd-img{position:relative;display:block;min-height:240px;background:#111;overflow:hidden}
.cpr-sotd-img img,.cpr-sotd-img .cpr-card-noimg{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;display:block}
.cpr-sotd-img .cpr-card-noimg-title{font-size:2em}
.cpr-sotd-body{padding:clamp(1em,2vw,1.75em);display:flex;flex-direction:column;gap:.6em;justify-content:center}
.cpr-sotd-kicker{margin:0;font-size:.8em;letter-spacing:.12em;text-transform:uppercase;color:var(--cpr-fill-color,#9e1a1b);font-weight:700}
.cpr-sotd-title{margin:0;font-size:clamp(1.3em,2.2vw,1.8em);line-height:1.15}
.cpr-sotd-title a{color:inherit;text-decoration:none}
.cpr-sotd-excerpt{margin:.2em 0 .4em;opacity:.9}
.cpr-sotd-btn{align-self:flex-start;padding:.7em 1.4em;border-radius:6px;background:var(--cpr-fill-color,#9e1a1b);color:#fff!important;text-decoration:none;font-weight:600}
@media (max-width:760px){.cpr-sotd{grid-template-columns:1fr}.cpr-sotd-img{min-height:0;aspect-ratio:16/9}}

/* Archive sort bar */
.cpr-sortbar{grid-column:1/-1;width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:.4em;margin:0 0 1.5em;font-size:.875rem}
.cpr-sortbar span{opacity:.7;margin-right:.2em}
.cpr-sortbar a{padding:.3em .8em;border-radius:999px;border:1px solid rgba(127,127,127,.4);color:inherit;text-decoration:none}
.cpr-sortbar a[aria-current]{border-color:var(--cpr-fill-color,#9e1a1b);background:var(--cpr-fill-color,#9e1a1b);color:#fff}

/* Image tiles (categories / collections) */
.cpr-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:.9rem;margin:0 0 2rem}
.cpr-tile{position:relative;display:flex;align-items:flex-end;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,hsl(calc(355deg + var(--h,0) * 1deg) 70% 18%),#070505 70%);text-decoration:none!important;isolation:isolate;border:1px solid rgba(255,255,255,.07);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.cpr-tile-img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;z-index:-2;filter:grayscale(.35) contrast(1.1) brightness(.75);transform:scale(1.02);transition:transform .5s ease,filter .5s ease}
.cpr-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,3,3,.05) 0%,rgba(5,3,3,.35) 45%,rgba(5,3,3,.92) 100%)}
.cpr-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cpr-fill-color,#e6141d);transform:scaleX(.18);transform-origin:0 50%;transition:transform .3s ease}
.cpr-tile-body{display:block;padding:.85rem .95rem .95rem}
.cpr-tile strong{display:block;color:#f6f0e6;font-size:1.02rem;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.cpr-tile small{display:block;margin-top:.3rem;font-family:Inter,system-ui,sans-serif;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cpr-fill-color,#e6141d)}
.cpr-tile:hover{transform:translateY(-3px);border-color:rgba(230,20,29,.55);box-shadow:0 12px 30px rgba(0,0,0,.6),0 0 0 1px rgba(230,20,29,.25)}
.cpr-tile:hover .cpr-tile-img{transform:scale(1.08);filter:grayscale(0) contrast(1.1) brightness(.85)}
.cpr-tile:hover::after{transform:scaleX(1)}
@media (max-width:600px){.cpr-tiles{grid-template-columns:repeat(2,1fr);gap:.6rem}.cpr-tile strong{font-size:.92rem}}
@media (prefers-reduced-motion:reduce){.cpr-tile,.cpr-tile-img,.cpr-tile::after{transition:none}}

.cpr-tile-img.cpr-tile-art{filter:brightness(1.35) saturate(1.1)!important;transform:scale(1.18) translateY(-9%)!important;transform-origin:50% 0}
.cpr-tile:has(.cpr-tile-art)::before{background:linear-gradient(180deg,transparent 0%,transparent 48%,rgba(5,3,3,.7) 72%,rgba(5,3,3,.95) 100%)!important}
.cpr-tile:hover .cpr-tile-img.cpr-tile-art{filter:brightness(1.55) saturate(1.15)!important}

.cpr-unread-toggle{display:flex;align-items:center;gap:.45em;font-size:.85em;white-space:nowrap;cursor:pointer;align-self:center}
.cpr-unread-toggle input{accent-color:var(--cpr-fill-color,#e6141d);width:1.05em;height:1.05em}
.cpr-hide-read .cpr-card.is-read{display:none}
.cpr-card.is-read .cpr-card-thumb:after{content:"✓ Read";position:absolute;right:.6em;top:.6em;background:rgba(0,0,0,.75);color:#fff;font-size:.72em;font-weight:700;padding:.2em .55em;border-radius:999px;border:1px solid rgba(255,255,255,.25)}
.cpr-card.is-read{opacity:.82}