/* Root theme tokens */
:root{
  --cs-primary: #b82529; /* brand red  / blue003b7a / as default if not provided */
  --cs-accent:  #f4dd00; /* brand yellow / gold f4c430 */
  --cs-bg:      #333333;
  --cs-text:    #333333;
  --cs-radius:  10px;
}

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

/* Header */
.cs-header{background:var(--cs-primary); color:#b82529}
.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:var(--cs-accent);
  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-accent);
  color:#000;
}

/* Breadcrumb bar */
.cs-breadcrumb-bar{
  background:var(--cs-accent);
  color:#333333;
}
.cs-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before{
  color:#000;
}
.cs-breadcrumb-bar a{ color:#000; font-weight:600 }
.cs-breadcrumb-bar a:hover{ text-decoration:underline }

/* 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: #cccccc;
  color:#000;
  font-weight:700;
  border-radius:999px;
  padding:.35rem .75rem;
}

/* CTA buttons (yellow) */
.cs-btn-yellow{
  display:inline-block;
  background: #cccccc;
  color:#000;
  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 var(--cs-primary, #b82529);

/* Pills and nav look (unchanged from your theme) */
.cs-badge-pill {
  background: var(--cs-accent, #f3d911);
  color: var(--cs-primary, #c03232);
  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: var(--cs-accent, #f3d911);
  color: var(--cs-primary, #c03232);
}
.cs-social a { color: #f4f4f4; }
.cs-social a:hover { color: #f3d911; }

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

.navbar-nav .nav-link.active{
 color: #f4f4f4;
 }
 
/* 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:10px;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(0,84,164,1.000),0 10px 28px rgba(0,0,0,.28);transform:translateY(-2px)}
    .cs-boxA{position:relative;border-radius:10px;background:#fff;color:#222;}
    .cs-hdr{display:flex;align-items:end;justify-content:space-between;gap:1rem}
    .cs-sub{color:#666}
    .badge-week{background:#cccccc;color:#000;font-weight:800;border-radius:999px}
    .cs-btn-yellow{background:#b82529;color:#ffffff;font-weight:700;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: 10px; background: #b82529; color:#f4f4f4; }
    .aeo-badges .badge { background: #f4dd00; color:#f4f4f4; border-radius:10px; margin-right:.35rem; }
    .catalog-img{max-width:220px;height:auto}
    .creator-img{max-width:220px;height:auto}
    .cs-badge{background:#cccccc;color:#000;font-weight:700;border-radius:10px;padding:.45rem .9rem;text-decoration:none}
  .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}