@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&family=Cinzel:wght@400;600;900&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ═══ CONSTANTS ══════════════════════════════════════════ */
:root{
  --header-h:68px; --footer-h:42px;
  --hdr-gold:#c8a96e; --hdr-gold-dim:rgba(200,169,110,.15);
  --hdr-gold-bdr:rgba(200,169,110,.22); --hdr-text:rgba(240,235,227,.62);
}

/* ═══ LIGHT THEME ════════════════════════════════════════ */
html[data-theme="light"]{
  --gold:#8c6d3f; --gold-dim:rgba(140,109,63,.12); --gold-bdr:rgba(140,109,63,.22);
  --page-bg:#faf8f4; --content-bg:rgba(245,240,232,.82); --content-bdr:rgba(140,109,63,.20);
  --content-text:#1d1b18; --content-muted:rgba(29,27,24,.55); --content-heading:#0f0d0b;
  --content-accent:#8c6d3f; --content-code-bg:rgba(0,0,0,.055); --content-pre-bg:rgba(0,0,0,.038);
  --content-bdr-subtle:rgba(0,0,0,.09); --content-bq-col:rgba(29,27,24,.52);
  --content-td-bdr:rgba(0,0,0,.07); --content-th-col:#8c6d3f;
}

/* ═══ DARK THEME ═════════════════════════════════════════ */
html[data-theme="dark"]{
  --gold:#c8a96e; --gold-dim:rgba(200,169,110,.15); --gold-bdr:rgba(200,169,110,.22);
  --page-bg:#0c0b09; --content-bg:rgba(6,6,6,.72); --content-bdr:rgba(200,169,110,.22);
  --content-text:rgba(240,235,227,.83); --content-muted:rgba(240,235,227,.50);
  --content-heading:#f0ebe3; --content-accent:#c8a96e;
  --content-code-bg:rgba(200,169,110,.10); --content-pre-bg:rgba(0,0,0,.52);
  --content-bdr-subtle:rgba(200,169,110,.15); --content-bq-col:rgba(240,235,227,.50);
  --content-td-bdr:rgba(200,169,110,.09); --content-th-col:#c8a96e;
}

/* ═══ BACKGROUND LAYERS ══════════════════════════════════
   filter:blur is on the <img> child, never on the
   position:fixed wrapper — avoids all browser rendering bugs.
   HTML: <div class="bg-dark"><img src="/assets/bg/dark.jpg" alt=""></div>
══════════════════════════════════════════════════════════ */
.bg-dark,.bg-light{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  transition:opacity .70s ease; pointer-events:none; will-change:opacity;
}
.bg-dark { background:#060606; }
.bg-light{ background:#f0ebe2; }

.bg-dark img,.bg-light img{
  position:absolute; top:-15%; left:-15%;
  width:130%; height:130%;
  object-fit:cover; object-position:center;
  filter:blur(60px); display:block;
}

html[data-theme="dark"]  .bg-dark {opacity:1;} html[data-theme="dark"]  .bg-light{opacity:0;}
html[data-theme="light"] .bg-dark {opacity:0;} html[data-theme="light"] .bg-light{opacity:1;}

/* ═══ HEADER ═════════════════════════════════════════════ */
header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 2rem; z-index:1000;
  background:rgba(6,6,6,.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(200,169,110,.10);
}
.site-title{font-family:'Cinzel',serif;font-size:.88rem;font-weight:900;letter-spacing:.52em;color:var(--hdr-gold);text-decoration:none;text-transform:uppercase;justify-self:start;transition:opacity .2s;}
.site-title:hover{opacity:.62;}
nav{display:flex;justify-self:center;border:1px solid var(--hdr-gold-bdr);}
.nav-btn{font-family:'Cinzel',serif;font-size:.58rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--hdr-text);text-decoration:none;padding:.55rem 1.1rem;white-space:nowrap;transition:color .18s,background .18s;}
.nav-btn+.nav-btn{border-left:1px solid var(--hdr-gold-bdr);}
.nav-btn:hover,.nav-btn.active{color:var(--hdr-gold);background:var(--hdr-gold-dim);}

/* Header right — flex row: social icons + theme toggle */
.header-right{justify-self:end;display:flex;align-items:center;gap:.5rem;}

/* ═══ SOCIAL BUTTONS ════════════════════════════════════ */
.social-btn{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  border:1px solid rgba(200,169,110,.18);
  color:rgba(240,235,227,.50); text-decoration:none;
  transition:color .18s,border-color .18s,background .18s;
  flex-shrink:0;
}
.social-btn:hover{color:var(--hdr-gold);border-color:var(--hdr-gold-bdr);background:var(--hdr-gold-dim);}
.social-btn svg{width:13px;height:13px;fill:currentColor;display:block;}

/* ═══ THEME TOGGLE ═══════════════════════════════════════ */
.theme-toggle{
  display:flex;align-items:center;gap:.45rem;
  font-family:'Cinzel',serif;font-size:.56rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(240,235,227,.52); background:none; border:1px solid rgba(200,169,110,.18);
  padding:.45rem .9rem; cursor:pointer; white-space:nowrap;
  transition:color .18s,border-color .18s,background .18s;
}
.theme-toggle:hover{color:var(--hdr-gold);border-color:var(--hdr-gold-bdr);background:var(--hdr-gold-dim);}
.mode-dot{width:5px;height:5px;border-radius:50%;background:var(--hdr-gold);opacity:.7;flex-shrink:0;}

/* ═══ FOOTER (injected by /js/footer.js) ════════════════ */
footer{
  position:fixed;bottom:0;left:0;right:0;height:var(--footer-h);
  display:flex;align-items:center;justify-content:center;
  z-index:1000; background:rgba(6,6,6,.50);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(200,169,110,.08);
  font-family:'Cinzel',serif;font-size:.50rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(240,235,227,.28); pointer-events:none;
}
footer a{color:inherit;text-decoration:none;pointer-events:all;transition:color .2s;}
footer a:hover{color:var(--hdr-gold);}

/* ═══ VOLUME CONTROL ════════════════════════════════════ */
.vol-ctrl{
  position:fixed;bottom:calc(var(--footer-h) + 1.1rem);left:2rem;
  display:flex;align-items:center;gap:.65rem;z-index:500;opacity:.32;transition:opacity .25s;
}
.vol-ctrl:hover,.vol-ctrl.playing{opacity:.85;}
.vol-icon{background:none;border:none;cursor:pointer;color:var(--gold);padding:0;line-height:1;flex-shrink:0;transition:color .3s;}
.vol-icon svg{width:17px;height:17px;fill:currentColor;display:block;}
.vol-slider{
  -webkit-appearance:none;appearance:none;width:88px;height:2px;outline:none;cursor:pointer;border-radius:0;
  background:linear-gradient(to right,var(--gold) 0%,var(--gold) var(--fill,70%),rgba(200,169,110,.22) var(--fill,70%),rgba(200,169,110,.22) 100%);
}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;border-radius:50%;background:var(--gold);cursor:pointer;}
.vol-slider::-moz-range-thumb{width:9px;height:9px;border-radius:50%;border:none;background:var(--gold);cursor:pointer;}
.play-hint{font-family:'Cinzel',serif;font-size:.50rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);white-space:nowrap;animation:hintPulse 2.8s ease-in-out infinite;}
@keyframes hintPulse{0%,100%{opacity:.22}50%{opacity:.60}}

/* ═══ ARTICLE DATE (above h1) ═══════════════════════════ */
.article-date{display:block;font-family:'Cinzel',serif;font-size:.60rem;font-weight:400;letter-spacing:.20em;text-transform:uppercase;color:var(--content-muted);margin-bottom:.55rem;transition:color .4s;}

/* ═══ STORY LISTING — BADGES, ARC, DATE ═════════════════ */
.badge{font-family:'Cinzel',serif;font-size:.48rem;font-weight:600;letter-spacing:.20em;text-transform:uppercase;padding:.22rem .55rem;border:1px solid;white-space:nowrap;align-self:center;flex-shrink:0;}
.badge-latest{color:var(--gold);border-color:var(--gold-bdr);transition:color .4s,border-color .4s;}
.badge-upcoming{color:var(--content-muted);border-color:var(--content-bdr-subtle);transition:color .4s,border-color .4s;}
.entry-arc{display:inline-block;font-family:'Cinzel',serif;font-size:.48rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-bdr);padding:.14rem .40rem;margin-right:.55rem;vertical-align:middle;transition:color .4s,border-color .4s;}
.entry-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem;margin-top:.25rem;}
.entry-date{font-family:'Cinzel',serif;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--content-muted);transition:color .4s;}

/* ═══ MUSIC CUE MARKER ══════════════════════════════════ */
.music-cue{display:block;height:1px;overflow:hidden;margin:0;padding:0;opacity:0;pointer-events:none;}

/* ═══ CHARACTER PAGE ════════════════════════════════════ */
.char-nav{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:2rem;}
.char-arrow{background:none;border:1px solid var(--content-bdr);color:var(--content-muted);cursor:pointer;font-family:'Cinzel',serif;font-size:.80rem;padding:.4rem .9rem;line-height:1;transition:color .18s,border-color .18s,background .18s;}
.char-arrow:hover:not(:disabled){color:var(--gold);border-color:var(--gold-bdr);background:var(--gold-dim);}
.char-arrow:disabled{opacity:.25;cursor:default;}
.char-counter{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--content-muted);min-width:5rem;text-align:center;transition:color .4s;}
.char-card{display:grid;grid-template-columns:280px 1fr;gap:3rem;width:100%;max-width:820px;background:var(--content-bg);border:1px solid var(--content-bdr);padding:2.5rem;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:fadeSwap .35s ease both;transition:background-color .5s,border-color .5s;}
@keyframes fadeSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.char-left{display:flex;flex-direction:column;align-items:stretch;}
.char-image-wrap{width:280px;height:280px;overflow:hidden;background:var(--content-bdr-subtle);flex-shrink:0;}
.char-image-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.char-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--content-muted);opacity:.5;}
.char-illust{font-family:'Cinzel',serif;font-size:.50rem;letter-spacing:.14em;text-transform:uppercase;color:var(--content-muted);text-align:center;margin-top:.55rem;line-height:1.5;transition:color .4s;}
.char-info{display:flex;flex-direction:column;}
.char-name{font-family:'Cormorant Garamond',serif;font-size:2.1rem;font-weight:300;line-height:1.15;color:var(--content-heading);margin-bottom:.3rem;transition:color .4s;}
.char-birthdate{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--content-muted);margin-bottom:1.4rem;transition:color .4s;}
.char-divider{border:none;border-top:1px solid var(--content-bdr-subtle);margin-bottom:1.4rem;transition:border-color .4s;}
.char-body{font-family:'Cormorant Garamond',serif;}
.char-body p{font-size:1.08rem;line-height:1.85;font-weight:300;color:var(--content-text);margin-bottom:1rem;transition:color .4s;}
.char-body em{font-style:italic;}.char-body strong{font-weight:600;color:var(--content-heading);}
.char-body h2,.char-body h3{font-family:'Cormorant Garamond',serif;font-weight:400;color:var(--content-accent);margin:1.2rem 0 .4rem;transition:color .4s;}
.char-body h2{font-size:1.3rem;}.char-body h3{font-size:1.1rem;}
.char-body ul,.char-body ol{padding-left:1.4rem;margin-bottom:1rem;}
.char-body li{font-size:1.05rem;line-height:1.8;color:var(--content-text);transition:color .4s;}
@media(max-width:700px){.char-card{grid-template-columns:1fr;gap:1.5rem;padding:1.5rem;}.char-image-wrap{width:100%;height:260px;}}

/* ═══ ANIMATIONS ════════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}