:root{
  --bg:#07070a;
  --panel:#0c0c12;
  --text:#f3f0ff;
  --muted:rgba(243,240,255,.72);
  --line:rgba(243,240,255,.12);
  --accent:#c7a3ff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(199,163,255,.12), transparent 55%),
              radial-gradient(900px 500px at 80% 10%, rgba(255,120,200,.10), transparent 60%),
              var(--bg);
  color:var(--text);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  line-height:1.5;
}

a{color:inherit;text-decoration:none}
.wrap{width:min(1100px,92%);margin:0 auto}

.topbar{
  position:sticky;top:0;z-index:20;
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
  background: rgba(7,7,10,.55);
}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex;align-items:baseline;gap:10px}
.brand__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--line);
  border-radius:999px;
  letter-spacing:.08em;
}
.brand__name{letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--muted)}
.nav{display:flex;gap:18px}
.nav a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav a:hover{color:var(--text)}

.hero{
  position:relative;
  padding:86px 0 56px;
  border-bottom:1px solid var(--line);
}
.hero__inner{max-width:760px}
.eyebrow{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
.title{
  font-size:48px;line-height:1.05;margin:14px 0 10px;
  letter-spacing:.02em;
}
.subtitle{font-size:18px;color:var(--muted);max-width:52ch}
.hero__cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.hero__fade{
  position:absolute;inset:auto 0 0 0;height:60px;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:999px;
  border:1px solid var(--line);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.btn--primary{
  border-color:rgba(199,163,255,.45);
  background: rgba(199,163,255,.14);
}
.btn--primary:hover{background: rgba(199,163,255,.22)}
.btn--ghost{color:var(--muted)}
.btn--ghost:hover{color:var(--text)}

.section{padding:54px 0}
.section--thin{padding:38px 0}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.h2{margin:0;font-size:24px;letter-spacing:.02em}
.muted{color:var(--muted)}
.copy{max-width:70ch}

.h3{
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.series{
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.series__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 16px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}

.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.card{
  grid-column: span 6;
  background: rgba(12,12,18,.72);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(199,163,255,.35);
  background: rgba(12,12,18,.88);
}
.card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.tag{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.pill{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(199,163,255,.25);
  background: rgba(199,163,255,.05);
  color:var(--muted);
}
.card__title{margin:0;font-size:22px}
.card__sub{margin:6px 0 10px;color:var(--accent)}
.card__desc{margin:0;color:var(--muted);max-width:60ch}
.card__link{display:inline-block;margin-top:14px;color:var(--muted)}
.card:hover .card__link{color:var(--text)}

.card--locked{
  cursor: default;
  opacity: .75;
}
.card--locked:hover{
  transform: none;
  border-color: var(--line);
  background: rgba(12,12,18,.72);
}

.footer{
  border-top:1px solid var(--line);
  padding:18px 0;
}
.footer__inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width: 780px){
  .title{font-size:36px}
  .card{grid-column: span 12}
}

/* --- Image enhancements --- */
.card{
  padding:0;
  overflow:hidden;
}
.card__img{
  width:100%;
  height:240px;
  object-fit:contain;
  display:block;
  box-sizing:border-box;
  padding:18px;
  background:#000;
  border-bottom: 1px solid var(--line);
}

.card__img--coin{
  width:240px;
  height:240px;
  padding:14px;
  margin:18px auto 0;
  border-radius:999px;
  border: 1px solid var(--line);
}
 (max-width: 980px){
  .card__img--coin{width:220px;height:220px;}
}
.card__body{padding:18px}

.profile{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:start;
  margin-top: 14px;
}
.poster{
  width:100%;
  height:auto;
  display:block;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.2);
}
.coa{
  margin-top: 12px;
}
.coa summary{
  cursor:pointer;
  user-select:none;
  color: var(--muted);
  letter-spacing:.14em;
  text-transform: uppercase;
  font-size: 12px;
}
.coa[open] summary{color: var(--text);}
.coa__img{margin-top:12px}

@media (max-width: 980px){
  .profile{grid-template-columns: 1fr;}
  .card__img{height:220px}
}

/* --- Veil & Vice: watermark background + footer stamp (safe overrides) --- */

body{ position:relative; }

/* Faint brand watermark behind everything */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: url("/images/brand/Veil_and_Vice_Logo (GOLD).png") center 120px / min(820px, 70vw) no-repeat;
  opacity: .045;
  filter: blur(1.25px);
  transform: translateZ(0);
  z-index:0;
}

/* Keep page content above watermark */
body > *{ position:relative; z-index:1; }

@media (max-width: 720px){
  body::before{
    background-position: center 140px;
    background-size: min(520px, 82vw);
    opacity: .035;
  }
}

/* Index roster images: show full PNG (no crop) + breathe */
.card__img{
  object-fit: contain !important;
  background: #000;
  box-sizing: border-box;
  padding: 18px;
}

/* Coins: optional circle treatment if class is present */
.card__img--coin{
  width: 240px;
  height: 240px;
  margin: 18px auto 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  border-bottom: none;
  padding: 14px;
}

@media (max-width: 980px){
  .card__img{ padding: 16px; }
  .card__img--coin{ width: 220px; height: 220px; }
}

/* Footer brand stamp */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 26px 0 34px;
  margin-top: 42px;
  background: rgba(7,7,10,.35);
}
.site-footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.site-footer__brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.site-footer__logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  opacity: .92;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}
.site-footer__title{
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
}
.site-footer__note{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.08em;
}

/* Footer logo stamp (works with existing footer) */
.footer{
  background: rgba(7,7,10,.35);
}
.footer__brand{display:flex;align-items:center;gap:12px}
.footer__logo{width:44px;height:44px;object-fit:contain;opacity:.92;filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));}


/* --- Filters + series intro (archive tabs) --- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
/* Make filters feel like quiet archive tabs (visible, not loud) */
.filter-btn{cursor:pointer;background:rgba(7,7,10,.38);border-color:rgba(255,255,255,.10);color:rgba(214,214,224,.82);padding:10px 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
.filter-btn:hover{border-color:rgba(199,163,255,.35);color:var(--text);background:rgba(7,7,10,.52);} 
.filter-btn.is-active{border-color:rgba(199,163,255,.65);background:rgba(199,163,255,.12);color:var(--text);box-shadow:0 0 0 1px rgba(199,163,255,.12), 0 12px 30px rgba(0,0,0,.35);} 
.filter-btn:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(199,163,255,.35), 0 12px 30px rgba(0,0,0,.35);} 
.series__sub{margin:6px 0 0;max-width:70ch;font-size:13px;color:var(--muted);letter-spacing:.02em;}

/* --- Filters (archive-style tabs) override --- */
.filters{align-items:center}
.filter-btn{
  background: rgba(7,7,10,.42);
  border-color: rgba(255,255,255,.10);
  color: rgba(230,230,240,.72);
  letter-spacing: .18em;
  font-size: 11px;
  padding: 10px 14px;
}
.filter-btn:hover{
  border-color: rgba(222, 184, 94, .40);
  background: rgba(7,7,10,.55);
  color: rgba(245,245,255,.86);
}
.filter-btn.is-active{
  border-color: rgba(222, 184, 94, .78);
  background: rgba(222, 184, 94, .14);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(222, 184, 94, .12), 0 12px 28px rgba(0,0,0,.35);
}
.filter-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(222, 184, 94, .38), 0 12px 28px rgba(0,0,0,.35);
}

/* ================================
   V&V Patch — Gold Filters + Image Fit
   (safe overrides)
   ================================ */

:root{ --gold:#d6b15a; }

/* Gold archive-tab styling */
.filter-btn:hover{
  border-color: rgba(214,177,90,.55);
  color: var(--text);
  background: rgba(7,7,10,.52);
}
.filter-btn.is-active{
  border-color: rgba(214,177,90,.80);
  background: rgba(214,177,90,.10);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(214,177,90,.12), 0 12px 30px rgba(0,0,0,.35);
}
.filter-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(214,177,90,.35), 0 12px 30px rgba(0,0,0,.35);
}

/* Zoom images out slightly so transparent PNGs "fit" cleanly */
.card__img{
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
}
.card__img.card__img--coin{
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
}


/* V2.2 Luxury video fade-in */
.vv-video{
  opacity: 0;
  transition: opacity 0.6s ease;
}
.vv-video.is-loaded{
  opacity: 1;
}


/* --- V4.6 After Hours Cover Zoom --- */
.card__img:not(.card__img--coin){
  padding: 8px; /* was 18px */
}


/* =========================================================
   V5 Roster Polish (Hover + Series Distinction + Hierarchy)
   ========================================================= */

/* Series header hierarchy */
.series{ margin-top: 26px; }
.series__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding: 8px 0 10px; }
.series__sub{ max-width: 60ch; opacity: 0.82; }
.series__rule{
  height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  margin: 10px 0 18px;
}

/* Series distinction (subtle, luxury) */
.series--after-hours .h3{ color: var(--text); text-shadow: 0 0 18px rgba(199,163,255,0.18); }
.series--after-hours .series__rule{
  background: linear-gradient(90deg, rgba(199,163,255,0.22), rgba(255,255,255,0.02));
}
.series--myth-moon .h3{ color: var(--text); text-shadow: 0 0 18px rgba(201,164,106,0.16); }
.series--myth-moon .series__rule{
  background: linear-gradient(90deg, rgba(201,164,106,0.22), rgba(255,255,255,0.02));
}

/* Hover interaction: richer but restrained */
.card{ position: relative; overflow: hidden; }
.card::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1200px 240px at 20% 0%, rgba(255,255,255,0.05), transparent 60%);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events:none;
}
.card:hover::after{ opacity: 1; }

/* After Hours: tighter cover + gentle zoom */
.card__img--after-hours{
  padding: 2px; /* V5.1 ultra-tight, nearly flush */
}
.card--after-hours .card__img{
  transition: transform .22s ease, filter .22s ease;
}
.card--after-hours:hover .card__img{
  transform: scale(1.035);
  filter: saturate(1.05) contrast(1.02);
}

/* Keep Myth & Moon coins pristine */
.card__img--coin{ transition: transform .22s ease; }
.card--myth-moon:hover .card__img--coin{ transform: translateY(-1px); }

@media (max-width: 980px){
  .series__head{ flex-direction: column; align-items: flex-start; }
  .series__rule{ margin-top: 8px; }
  .card__img--after-hours{ padding: 6px; } /* slightly less tight on mobile */
}

/* --- V5.1 Ultra-tight After Hours --- */
.card--after-hours:hover .card__img{
  transform: scale(1.055);
}