/* Root theme tokens */
:root{
  --cs-primary: #940003; /* brand Dark Red as default if not provided */
  --cs-accent:  #999B9B; /* brand Metallic Silver */
  --cs-tag   :  #f4f4f4; /* brand white */
  --cs-bg:      #f4f4f4;
  --cs-nav:     #f4f4f4;
  --cs-text:    #555555;
  --cs-radius:  10px;
}

/* Body & link baseline */
html,body{background:var(--cs-bg); color:var(--cs-text)}
a{color:#f4f4f4; text-decoration:none}
a:hover{color:var(--cs-accent)}

/* Header */
.cs-header{background:var(--cs-primary); color:#f4f4f4}
.cs-header-grid{row-gap:0}
.cs-social a{color:#f4f4f4}
.cs-social a:hover{color:#ffffff}

/* Footer */
.cs-footer{background:var(--cs-primary); color:#f4f4f4}


/* Tagline pill */
.cs-badge-pill{
  background:#555555
  color:#f4f4f4;
  font-weight:700;
  border-radius:999px;
  padding:.35rem .85rem;
}

/* Tagline pill */
.cs-badge-pill1{
  background:var(--cs-tag);
  color:#000;
  font-weight:700;
  border-radius:999px;
  padding:.35rem .85rem;
}

/* Top navigation */
.cs-nav .nav-link{
  color:#f4f4f4;
  font-weight:600;
  border-radius:999px;
  padding:.35rem .85rem;
}
.cs-nav .nav-link:hover,
.cs-nav .nav-link.active{
  background:var(--cs-nav);
  color:#555555;
}

/* Breadcrumb bar */
.cs-breadcrumb-bar{
  background:var(--cs-accent);
  color:#f4f4f4;
  border-top:6px solid rgba(244,244,244,1);
  border-bottom:1px solid rgba(244,244,244,1);
}
.cs-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before{
  color:#f4f4f4;
}
.cs-breadcrumb-bar a{ color:#f4f4f4; font-weight:600 }
.cs-breadcrumb-bar a:hover{ text-decoration:underline }
.breadcrumb-item.active {  color:#f4f4f4;}


.breadcrumb-item active{
  color:#f4f4f4;
  }
/* Cards/boxes */
.cs-box{
  background:#ffffff;
  color:#222;
  border-radius:var(--cs-radius);
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}

/* Utility badges */
.cs-badge{
  background:#555555;
  color:#f4f4f4;
  font-weight:700;
  border-radius:999px;
  padding:.35rem .75rem;
}

/* CTA buttons (yellow) */
.cs-btn-yellow{
  display:inline-block;
  background:#555555;
  color:#f4f4f4;
  font-weight:700;
  border-radius:12px;
  padding:.5rem 1rem;
}
.cs-btn-yellow:hover{ filter:brightness(0.95); color:#000 }

/* Art 3-up strip */
.art-3up{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.art-img{
  width:100%;
  height:clamp(240px,28vw,420px);
  object-fit:contain;
  display:block;
  border-radius:12px;
  border:1px solid #d0d0d0;          /* thin gray line for white covers */
  box-shadow:0 0 0 1px rgba(0,0,0,.04) inset;
  border-radius:12px;
}
.caption{font-size:.85rem; color:#555}

/* Creator Spotlight */
/* Larger spotlight image (~250px tall), centered, with subtle border */
.spot-img-lg{
  height:350px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  border:1px solid #d0d0d0;          /* thin gray line for white covers */
  box-shadow:0 0 0 1px rgba(0,0,0,.04) inset;
  border-radius:12px;
}

.spot-artist{
  font-size:1.65rem;
  font-weight:800;               /* bigger/bold */
  line-height:1.2;
}
.spot-badge-black{
  background:#000;
  color:#fff;
  font-weight:700;
  border-radius:999px;
  padding:.35rem .75rem;
}
.spot-badge-yellow{
  background:var(--cs-accent);   /* same yellow as site */
  color:#000;
  font-weight:700;
  border-radius:999px;
  padding:.35rem .75rem;
}
.spot-badge-red{
  background:#c03232;            /* brand red */
  color:#fff;
  font-weight:700;
  border-radius:999px;
  padding:.35rem .75rem;
}

/* Archive year card */
.cs-archive-year{
  background: #f1f1f1; /* light gray */
  border: 1px solid rgba(0,0,0,.06);
}

/* Scoped link color for About page */
.about-body a { color:#0d6efd; }
.about-body a:hover { color:#0a58ca; }




/* Header background + text */
.cs-header {background:var(--cs-primary); color:#f4f4f4}

/* Pills and nav look (unchanged from your theme) */
.cs-badge-pill {
  background: #f4f4f4;
  color: #555555;
  font-weight: 700;
  border-radius: 999px;
  padding: .35rem .75rem;
}
.cs-nav .nav-link {
  font-weight: 600;
  border-radius: 999px;
  padding: .5rem .9rem;
  color: #f4f4f4;
}
.cs-nav .nav-link:hover,
.cs-nav .nav-link.active {
  background: #f4f4f4;
  color: #555555;
}
.cs-social a { color: #f4f4f4; }
.cs-social a:hover { color: #555555; }

/* Mobile navbar toggler icon contrast */
.navbar-toggler { border-color: #f4f4f4 !important; color: #f4f4f4 ;} 
.navbar-toggler .navbar-toggler-icon {
  color: #f4f4f4 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(244,244,244,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.nav-link:focus, .nav-link:hover {
    color: #f4f4f4;
}

.navbar-nav {
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: #f4f4f4;
    --bs-nav-link-hover-color: #f4f4f4;
    --bs-nav-link-disabled-color: #999b9b;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #999b9b;
}








/* Responsive */
@media (max-width: 992px){
  .cs-header .col-lg-9{margin-top:.5rem}
}
@media (max-width: 768px){
  .art-3up{grid-template-columns:1fr}
  .art-img{height:auto}
}

    .cs-box{position:relative;border-radius:14px;background:#fff;color:#222;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:box-shadow .2s,transform .2s}
    .cs-box:hover{box-shadow:0 0 0 3px rgba(192,50,50,.75),0 10px 28px rgba(0,0,0,.28);transform:translateY(-2px)}
    .cs-boxA{position:relative;border-radius:14px;background:#fff;color:#222;}
    .cs-hdr{display:flex;align-items:end;justify-content:space-between;gap:1rem}
    .cs-sub{color:#666}
    .badge-week{background:#555555;color:#f4f4f4;font-weight:800;border-radius:999px}
    .cs-btn-yellow{background:#555555;color:#f4f4f4;font-weight:800;border:none;border-radius:999px;padding:.45rem .9rem;text-decoration:none}
    .cs-btn-yellow:hover{filter:brightness(.95)}
    .facts{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;margin-top:.25rem}
    .facts th,.facts td{padding:.35rem .5rem;border-bottom:1px solid #eee;vertical-align:top}
    .facts th{color:#555;width:36%;font-weight:600}
    .tile-img{width:100%;height:auto;border-radius:12px;display:block}
    .art-2up{display:flex;gap:1rem;flex-wrap:nowrap}
    .art-2up img{width:50%;height:auto;max-width:100%;display:block;border-radius:12px;object-fit:contain}
    @media (max-width: 768px){ .art-2up{flex-wrap:wrap} .art-2up img{width:100%} }
    .small-muted{color:#6c757d}
    .caption{font-size:.85rem;color:#666}
    .aeo-box { border-radius: 14px; background: #940003; color:#f4f4f4; }
    .aeo-badges .badge { background: #333; color:#f4f4f4; border-radius:999px; margin-right:.35rem; }
    .catalog-img{max-width:220px;height:auto}
    .creator-img{max-width:220px;height:auto}
    .cs-badge{background:#555555;color:#f4f4f4;font-weight:700;border-radius:999px}
  .art-3up{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  .art-img{width:100%;height:clamp(240px, 28vw, 420px);object-fit:contain;display:block}
  @media (max-width: 768px)
  { .art-3up{grid-template-columns:1fr}
  .art-img{height:auto} }
  .preview-synopsis p{line-height:1.5}
  
  
  
  
  
    .marvel-archive-year-btn {
      background: #000000;
      color: #fff !important;
      font-weight: 800;
      letter-spacing: .02em;
      border: 0 !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }
    .marvel-archive-year-btn:not(.collapsed) {
      background: #940003;
      color: #fff !important;
      box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
    }
    .marvel-archive-year-btn::after {
      filter: brightness(0) invert(1);
  }