:root{
  --page-bg:#F5F0E8;--card:#FFFFFF;--card-border:rgba(28,20,16,0.09);
  --dark:#1C1410;--dark-2:#0E0A07;--text:#1A1410;--text-2:#3A2A20;--text-3:#5C4030;--text-4:#7A5C48;
  --sep:rgba(28,20,16,0.08);--red:#C0392B;--red-text:#991B1B;--red-soft:#FEE2E2;
  --amber-pill:#FEF3C7;--amber-text:#78350F;--blue-pill:#DBEAFE;--blue-text:#1E40AF;
  --green-pill:#D1FAE5;--green-text:#065F46;--bar-a:#FFD166;--bar-b:#E76F51;--bar-c:#C0392B;
  --on-dark:#E6DACF;--on-dark-mute:#A8907E;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{background:var(--dark);color:var(--on-dark);font-family:'DM Sans',sans-serif;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px;}

/* HEADER */
.cp-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:0.85rem 1.3rem;background:rgba(14,10,7,0.85);backdrop-filter:blur(14px);border-bottom:1px solid rgba(230,218,207,0.08);}
.cp-logo{font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:0.06em;color:var(--page-bg);text-decoration:none;}
.cp-back{font-family:'Space Mono',monospace;font-size:0.72rem;letter-spacing:0.05em;color:var(--on-dark-mute);text-decoration:none;text-transform:uppercase;}
.cp-back:hover{color:var(--page-bg);}

/* MAIN */
.cp-wrap{max-width:920px;margin:0 auto;padding:2rem 1.2rem 4rem;}
.cp-eyebrow{font-family:'Space Mono',monospace;font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--on-dark-mute);
  display:flex;align-items:center;gap:0.7rem;margin-bottom:1.2rem;justify-content:center;flex-wrap:wrap;}
.cp-eyebrow .dot{width:4px;height:4px;border-radius:50%;background:var(--red);}
.cp-trending{color:#FFB000;}

/* COMIC ARTIFACT */
.cp-figure{position:relative;background:var(--dark-2);border:1px solid rgba(230,218,207,0.12);border-radius:10px;
  padding:0.6rem;box-shadow:0 30px 80px rgba(0,0,0,0.5);cursor:zoom-in;}
.cp-figure img{width:100%;height:auto;border-radius:5px;}
.cp-zoomhint{position:absolute;bottom:1rem;right:1rem;background:rgba(14,10,7,0.8);color:var(--on-dark);
  font-family:'Space Mono',monospace;font-size:0.6rem;letter-spacing:0.05em;padding:0.3rem 0.6rem;border-radius:5px;
  text-transform:uppercase;opacity:0.85;pointer-events:none;}

/* META */
.cp-meta{text-align:center;margin-top:2.2rem;}
.cp-pills{display:flex;gap:0.4rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.1rem;}
.pill{font-family:'Space Mono',monospace;font-size:0.62rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;padding:0.24rem 0.62rem;border-radius:5px;}
.pill-red{background:var(--red-soft);color:var(--red-text);}
.pill-amber{background:var(--amber-pill);color:var(--amber-text);}
.pill-blue{background:var(--blue-pill);color:var(--blue-text);}
.pill-green{background:var(--green-pill);color:var(--green-text);}
.pill-fire{background:#3a2410;color:#FFB000;}
.cp-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,7vw,3.6rem);line-height:0.95;letter-spacing:0.02em;color:var(--page-bg);margin-bottom:1.4rem;}
.cp-setup{font-family:'Space Mono',monospace;font-size:0.86rem;font-style:italic;line-height:1.7;color:var(--on-dark-mute);max-width:620px;margin:0 auto 1.6rem;}
.cp-quote{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,5vw,3rem);line-height:1.02;color:var(--page-bg);margin:1.6rem auto;max-width:720px;}
.cp-quote::before{content:'\201C';color:var(--red);}
.cp-quote::after{content:'\201D';color:var(--red);}
.cp-reaction{font-family:'Space Mono',monospace;font-size:0.86rem;line-height:1.7;color:var(--on-dark);max-width:620px;margin:0 auto 1.6rem;}
.cp-score{font-family:'Space Mono',monospace;font-size:0.74rem;color:var(--on-dark-mute);}
.cp-score b{color:#FFB000;}

/* INTERACTION */
.cp-interact{background:rgba(245,240,232,0.04);border:1px solid rgba(230,218,207,0.12);border-radius:14px;padding:1.6rem;margin:2.4rem auto 0;max-width:620px;}
.cp-vote-q{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;letter-spacing:0.02em;color:var(--page-bg);text-align:center;margin-bottom:1.1rem;}
.cp-vote-btns{display:flex;gap:0.7rem;margin-bottom:1.5rem;}
.cp-vote{flex:1;font-family:'Space Mono',monospace;font-size:0.8rem;font-weight:700;padding:0.8rem 0.7rem;border-radius:10px;
  border:2px solid rgba(230,218,207,0.2);background:transparent;color:var(--on-dark);cursor:pointer;transition:all 0.15s;
  display:flex;align-items:center;justify-content:center;gap:0.45rem;}
.cp-vote:hover{border-color:rgba(230,218,207,0.5);transform:translateY(-1px);}
.cp-vote .ve{font-size:1.05rem;}
.cp-vote.yes.active{background:var(--green-pill);border-color:var(--green-pill);color:var(--green-text);}
.cp-vote.no.active{background:var(--red-soft);border-color:var(--red-soft);color:var(--red-text);}
.cp-react-label{font-family:'Space Mono',monospace;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--on-dark-mute);text-align:center;margin-bottom:0.8rem;}
.cp-react-bar{display:flex;gap:0.5rem;justify-content:center;flex-wrap:wrap;}
.emoji{font-size:1.6rem;line-height:1;background:transparent;border:2px solid rgba(230,218,207,0.18);border-radius:11px;
  padding:0.45rem 0.6rem;cursor:pointer;transition:all 0.15s;filter:grayscale(0.5);opacity:0.65;}
.emoji:hover{transform:translateY(-3px) scale(1.12);filter:grayscale(0);opacity:1;border-color:rgba(230,218,207,0.45);}
.emoji.active{filter:grayscale(0);opacity:1;border-color:var(--red);background:rgba(192,57,43,0.18);transform:scale(1.08);}
@keyframes pop{0%{transform:scale(1);}50%{transform:scale(1.4);}100%{transform:scale(1.08);}}
.emoji.pop{animation:pop 0.35s ease;}

/* SHARE */
.cp-share{text-align:center;margin:2.4rem auto 0;max-width:620px;}
.cp-share-btn{display:inline-flex;align-items:center;gap:0.6rem;background:var(--red);color:#fff;border:none;border-radius:12px;
  font-family:'Space Mono',monospace;font-size:0.92rem;font-weight:700;letter-spacing:0.02em;padding:1.05rem 2rem;cursor:pointer;
  transition:transform 0.15s,opacity 0.15s;width:100%;justify-content:center;box-shadow:0 10px 30px rgba(192,57,43,0.35);}
.cp-share-btn:hover{transform:translateY(-2px);opacity:0.95;}
.cp-share-sub{font-family:'Space Mono',monospace;font-size:0.68rem;color:var(--on-dark-mute);margin-top:0.7rem;}

/* PREV / NEXT */
.cp-nav-comics{display:flex;gap:1rem;margin:3rem auto 0;max-width:620px;}
.cp-navlink{flex:1;background:rgba(245,240,232,0.04);border:1px solid rgba(230,218,207,0.12);border-radius:12px;
  padding:1rem 1.1rem;text-decoration:none;transition:all 0.15s;min-width:0;}
.cp-navlink:hover{border-color:rgba(230,218,207,0.4);background:rgba(245,240,232,0.07);}
.cp-navlink .dir{font-family:'Space Mono',monospace;font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--on-dark-mute);display:block;margin-bottom:0.3rem;}
.cp-navlink .nm{font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:0.02em;color:var(--page-bg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cp-navlink.next{text-align:right;}

/* EMAIL */
.cp-email{margin:3rem auto 0;max-width:620px;text-align:center;border-top:1px solid rgba(230,218,207,0.12);padding-top:2.4rem;}
.cp-email h3{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:0.02em;color:var(--page-bg);margin-bottom:0.4rem;}
.cp-email p{font-family:'Space Mono',monospace;font-size:0.72rem;color:var(--on-dark-mute);margin-bottom:1.1rem;line-height:1.6;}
.cp-email-form{display:flex;gap:0.5rem;flex-wrap:wrap;}
.cp-email-form input{flex:1;min-width:180px;background:rgba(245,240,232,0.06);border:1.5px solid rgba(230,218,207,0.2);border-radius:9px;
  padding:0.8rem 1rem;font-family:'DM Sans',sans-serif;font-size:0.95rem;color:var(--page-bg);outline:none;}
.cp-email-form input::placeholder{color:var(--on-dark-mute);}
.cp-email-form input:focus{border-color:var(--red);}
.cp-email-form button{background:var(--page-bg);color:var(--dark);border:none;border-radius:9px;font-family:'Space Mono',monospace;
  font-size:0.78rem;font-weight:700;padding:0.8rem 1.3rem;cursor:pointer;white-space:nowrap;}
.cp-email-form button:hover{opacity:0.9;}
.cp-email-ok{display:none;font-family:'Space Mono',monospace;font-size:0.82rem;color:#FFB000;}

/* SOCIAL */
.cp-social{margin:2.2rem auto 0;max-width:620px;text-align:center;}
.cp-social a{display:inline-block;font-family:'Space Mono',monospace;font-size:0.74rem;color:var(--on-dark-mute);text-decoration:none;margin:0 0.7rem;letter-spacing:0.04em;}
.cp-social a:hover{color:var(--page-bg);}

/* FOOTER */
.cp-footer{text-align:center;padding:2.5rem 1rem;border-top:1px solid rgba(230,218,207,0.08);margin-top:3rem;}
.cp-footer .fl{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:0.06em;color:var(--page-bg);margin-bottom:0.5rem;}
.cp-footer .fc{font-family:'Space Mono',monospace;font-size:0.66rem;color:var(--on-dark-mute);letter-spacing:0.05em;}

/* ZOOM OVERLAY */
.cp-zoom{display:none;position:fixed;inset:0;z-index:200;background:rgba(14,10,7,0.97);overflow:auto;padding:1rem;cursor:zoom-out;}
.cp-zoom.open{display:flex;align-items:center;justify-content:center;}
.cp-zoom img{max-width:100%;max-height:94vh;width:auto;height:auto;margin:auto;border-radius:6px;}
.cp-zoom-close{position:fixed;top:1.2rem;right:1.2rem;z-index:210;width:44px;height:44px;border-radius:50%;border:none;
  background:rgba(245,240,232,0.95);color:var(--dark);font-size:1.3rem;cursor:pointer;}

@media(max-width:600px){
  .cp-wrap{padding:1.4rem 1rem 3rem;}
  .cp-vote-btns{flex-direction:column;}
  .cp-nav-comics{flex-direction:row;}
  .cp-navlink .nm{font-size:1rem;}
}