/* DiscoMcDisco brand layer: reusable identity treatment over the archive UI. */

.brand-mark{
  width:50px;
  height:42px;
  border-radius:10px;
  background:var(--brand-red);
  color:var(--brand-white);
  box-shadow:5px 5px 0 var(--brand-blue);
  transform:rotate(-1deg);
}

.brand-banner{
  position:relative;
  width:min(var(--max),calc(100% - 3rem));
  margin:1.25rem auto 0;
  overflow:hidden;
  border:1px solid var(--brand-banner-border);
  border-radius:22px;
  background:var(--brand-banner-surface);
  box-shadow:var(--brand-banner-shadow);
  isolation:isolate;
}
.brand-banner::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:var(--brand-banner-overlay);
}
.brand-banner img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
  filter:var(--brand-banner-filter);
}

.hero.brand-home-hero{
  min-height:500px;
  margin-top:.85rem;
  border-color:var(--brand-hero-border);
  background:var(--brand-hero-surface);
}
.hero-art.brand-hero-art{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 52% 42%,var(--brand-hero-glow),transparent 44%),
    var(--hero-art-bg);
}
.hero-art.brand-hero-art::before,
.hero-art.brand-hero-art::after{display:none}
.brand-hero-art .brand-sparkles{
  position:absolute;
  z-index:0;
  width:125%;
  max-width:none;
  height:125%;
  inset:-12% -10% auto auto;
  object-fit:contain;
  opacity:var(--brand-sparkle-opacity);
  filter:var(--brand-sparkle-filter);
  pointer-events:none;
}
.brand-hero-art>img:not(.brand-sparkles){z-index:1}
.brand-home-hero .hero-stamp{
  background:var(--brand-red);
  color:var(--brand-white);
  box-shadow:4px 4px 0 var(--brand-blue);
}
.brand-home-hero .button:not(.button-secondary){
  background:var(--brand-blue);
  color:#071217;
}
.brand-home-hero .button:not(.button-secondary):hover{
  box-shadow:4px 4px 0 var(--brand-red);
}

.about-portrait.brand-about-art{
  display:grid;
  place-items:center;
  padding:clamp(1.5rem,4vw,3rem);
  background:var(--brand-wordmark-surface);
  overflow:hidden;
}
.brand-about-art .brand-wordmark{
  width:min(82%,420px);
  max-height:470px;
  object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.18));
}

.art-card.brand-character-card{
  padding:1.5rem;
  background:var(--brand-wordmark-surface);
}
.art-card.brand-character-card img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.22));
}

.post-header,
.archive-header,
.series-header{position:relative;isolation:isolate}
.post-header::after,
.archive-header::after,
.series-header::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:220px;
  aspect-ratio:1;
  right:-75px;
  top:-72px;
  background:url('/media/brand/sparkles.png') center/contain no-repeat;
  opacity:var(--brand-header-sparkle-opacity);
  filter:var(--brand-sparkle-filter);
  pointer-events:none;
}

.site-nav a[aria-current="page"]{
  box-shadow:inset 0 -2px 0 var(--brand-blue);
}
.site-nav .nav-out{color:var(--brand-blue)}

.story-card.card-red{background:linear-gradient(140deg,color-mix(in srgb,var(--brand-red) 55%,#121618),#211318)}
.story-card.card-cyan{background:linear-gradient(140deg,color-mix(in srgb,var(--brand-blue) 30%,#183036),#152326)}

@media(max-width:860px){
  .brand-banner{border-radius:16px}
  .hero.brand-home-hero{grid-template-columns:1fr;min-height:0}
  .brand-hero-art{min-height:380px}
}

@media(max-width:650px){
  .brand-banner{
    width:calc(100% - 2rem);
    margin-top:.75rem;
    border-radius:12px;
  }
  .hero.brand-home-hero{margin-top:.75rem}
  .brand-hero-art{min-height:320px}
  .post-header::after,.archive-header::after,.series-header::after{width:150px;right:-55px;top:-45px}
}