/* =============================================================
   Cinematic cohesion layer — dark gold/red theme over style.css
   Loaded AFTER style.css so it wins on equal specificity.
   Reversible: remove the <link> in base.html to restore the light site.
   Does NOT affect the standalone homepage prototype (it doesn't load style.css).
   ============================================================= */

:root{
    /* cinematic palette (matches the Investigation Board hero) */
    --ink:#0b0807;
    --ink-2:#100b08;
    --surface:#15100b;
    --surface-2:#1d1610;
    --paper:#ece6d9;
    --paper-dim:#b3aa98;
    --gold:#c8a86b;
    --gold-soft:#d8bd84;
    --red:#9e2b20;
    --red-hot:#e8553c;

    /* re-map the site's existing tokens to the dark palette */
    --text-color:var(--paper);
    --light-text:var(--paper-dim);
    --bg-light:var(--ink-2);
    --light-bg:var(--surface);
    --card-bg:var(--surface);
    --border-color:rgba(236,230,217,0.10);
    --accent-color:var(--gold);
    --accent:var(--gold);
    --accent-secondary:var(--red);
    --secondary-color:var(--gold);
    --silver:var(--paper-dim);
    /* slate was used for BOTH dark surfaces and heading text; surfaces (navbar,
       buttons) are overridden explicitly below, so remap the token to light text */
    --primary-color:var(--paper);
    --primary:var(--paper);
    --dark-charcoal:var(--ink-2);
    --shadow:0 6px 24px rgba(0,0,0,0.5);
    --shadow-lg:0 24px 60px rgba(0,0,0,0.6);
}

/* ---------- base ---------- */
body{background-color:var(--ink);color:var(--paper)}
.skip-link{background:var(--surface-2);color:var(--paper)}
main{background:transparent}
section{background-color:transparent}

/* headings default to light; page-specific dark ones are fixed per page */
h1,h2,h3,h4,h5,h6{color:var(--paper)!important}
.janus-review-title,.read-review-title,[class*="-review-title"],[class*="-rating-score"],[class*="-overall-score"],[class*="-overall-rating"],[class*="-format-title"],[class*="-trope-title"]{color:var(--paper)!important}

a{color:var(--gold)}
a:hover{color:var(--gold-soft)}

hr{border-color:rgba(236,230,217,0.12)}

/* ---------- navbar ---------- */
.navbar{background:rgba(10,7,5,0.9);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
    border-bottom:1px solid rgba(236,230,217,0.08);box-shadow:0 8px 30px rgba(0,0,0,0.45)}
.nav-menu>li>a{color:var(--paper)}
.nav-menu>li>a:hover,.nav-menu>li>a.active{color:var(--gold)}
.nav-inner-circle{color:var(--gold)!important}
.account-nav-icon,.cart-nav-icon{color:var(--paper)}
.account-nav-icon:hover,.cart-nav-icon:hover{color:var(--gold)}
.cart-count-badge{background:var(--red);color:#fff}
.hamburger span{background:var(--paper)}

/* ---------- buttons ---------- */
.btn-primary,.btn-accent{background:var(--gold);color:#1a1208;border-color:var(--gold)}
.btn-primary:hover,.btn-accent:hover{background:var(--gold-soft);color:#150f06}
.btn-secondary,.btn-outline{background:transparent;color:var(--paper);border:1px solid rgba(236,230,217,0.32)}
.btn-secondary:hover,.btn-outline:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.btn-secondary-light{background:transparent;color:var(--paper);border:1px solid rgba(236,230,217,0.32)}
.btn-secondary-light:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- cards / panels / surfaces ---------- */
.card,.book-item,.review-card,.benefit-card,.feature-card,.post-card,.blog-card,
.content-card,.info-card,.author-card,.format-card,.episode-card,.pricing-card{
    background:var(--surface);color:var(--paper);border-color:var(--border-color)}

/* ---------- forms (kept high-contrast) ---------- */
input,textarea,select{background:#0f0b08;color:var(--paper);border:1px solid rgba(236,230,217,0.2)}
input::placeholder,textarea::placeholder{color:#8a8170}
input:focus,textarea:focus,select:focus{border-color:var(--gold);outline:none}
label{color:var(--paper)}

/* ---------- footer ---------- */
footer,.footer,.site-footer,.main-footer{background:#070504;color:var(--paper-dim);border-top:1px solid rgba(236,230,217,0.08)}
footer a,.footer a,.site-footer a{color:var(--paper-dim)}
footer a:hover,.footer a:hover,.site-footer a:hover{color:var(--gold)}

/* ---------- white-island mop-up (page surfaces + shared modal) ---------- */
[class*="card"]{background:var(--surface);color:var(--paper);border-color:var(--border-color)}
/* Lotus character poster cards ARE the parchment image (transparent surround);
   keep them off the generic card surface so the torn paper sits pinned straight
   on the dark page instead of on a lighter-brown tile */
.lotus-character-card.lotus-character-poster{background:transparent;border:none;box-shadow:none}
.award-item,.philosophy-card,.value-item,.stat-item,.perk,.modal-perk,
.timeline-item,.faq-item,.info-box,.highlight-box,.feature-box,.quote-box{
    background:var(--surface);color:var(--paper);border-color:var(--border-color)}

/* newsletter modal (shared component, appears site-wide) */
.newsletter-modal,.newsletter-modal-content,.newsletter-modal-form,.newsletter-modal-body,
.newsletter-modal-header,.newsletter-modal-perks{background:var(--ink-2);color:var(--paper)}
.newsletter-modal-overlay,.modal-overlay,.modal-backdrop{background:rgba(0,0,0,0.72)}
.newsletter-input{background:#0f0b08;color:var(--paper);border:1px solid rgba(236,230,217,0.2)}
.modal-perk{background:var(--surface);color:var(--paper)}
.newsletter-modal-close{background:transparent;color:var(--paper)}
.newsletter-modal-close:hover{color:var(--gold)}

/* cookie consent banner (shared, site-wide) */
.cookie-consent-banner,.cookie-banner,.cookie-consent,.cookie-notice{
    background:var(--ink-2);color:var(--paper);border-top:1px solid rgba(236,230,217,0.1);box-shadow:0 -8px 30px rgba(0,0,0,0.55)}
.cookie-consent-banner a,.cookie-banner a,.cookie-consent a{color:var(--gold)}

/* ---------- book detail review UIs (janus / lotus / red-river share a class pattern) ---------- */
[class*="-reviews-section-light"]{background:var(--ink-2)!important}
[class*="-review-card-light"],[class*="-review-score"],[class*="-overall-rating"],
[class*="-modal-card"],[class*="-synopsis"],[class*="-stats-box"],[class*="-rating-box"],
[class*="-review-modal"]{
    background:var(--surface)!important;color:var(--paper)!important;border-color:var(--border-color)!important}
[class*="-filter-btn"],[class*="-page-btn"],[class*="-page-num"],[class*="-region-dropdown"]{
    background:var(--surface)!important;color:var(--paper)!important;border:1px solid rgba(236,230,217,0.18)!important}
[class*="-filter-btn"]:hover,[class*="-page-btn"]:hover,[class*="-page-num"]:hover{color:var(--gold)!important;border-color:var(--gold)!important}
[class*="-filter-btn"].active,[class*="-page-num"].active{background:var(--gold)!important;color:#1a1208!important;border-color:var(--gold)!important}

/* ---------- page stragglers + auth/commerce cards (force over higher-specificity light rules) ---------- */
.lotus-evidence-board,.evidence-board,.contact-email,.social-connect,.contact-card,.contact-method,
.login-card,.register-card,.account-card,.auth-card,.reset-card,.verify-card,.profile-card,
.order-card,.order-summary,.cart-card,.cart-item,.checkout-card,.summary-card,.payment-card{
    background:var(--surface)!important;color:var(--paper)!important;border-color:var(--border-color)!important}

/* ============================================================
   Shared cinematic shell — interior-page header + footer.
   Mirrors the homepage shell so every page matches it.
   (The homepage uses its own inline transparent fade-in version.)
   ============================================================ */
.siteheader{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.5rem 1.6rem;background:rgba(10,7,5,0.95);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
    border-bottom:1px solid rgba(236,230,217,0.09);box-shadow:0 8px 30px rgba(0,0,0,.45)}
.sh-brand{display:inline-flex;align-items:center;flex:0 0 auto}
.sh-brand img{height:42px;width:auto;display:block}
.sh-nav{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;justify-content:flex-end}
.sh-nav a{font-family:var(--font-body);font-size:.82rem;letter-spacing:.04em;color:var(--paper);text-decoration:none;transition:color .2s;white-space:nowrap}
.sh-nav a:hover,.sh-nav a.active{color:var(--gold)}
.sh-nav a.sh-ic{color:var(--gold)}
.sh-icon{position:relative;display:inline-flex;align-items:center;color:var(--paper);transition:color .2s}
.sh-icon:hover{color:var(--gold)}
.sh-icon svg{width:20px;height:20px;display:block}
.sh-cart-badge{position:absolute;top:-7px;right:-9px;background:var(--red);color:#fff;font-family:var(--font-body);font-size:.6rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.sh-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:36px;background:none;border:none;cursor:pointer;padding:7px 8px}
.sh-burger span{display:block;height:2px;width:100%;background:var(--paper);border-radius:2px;transition:transform .25s,opacity .25s}
.siteheader.open .sh-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.siteheader.open .sh-burger span:nth-child(2){opacity:0}
.siteheader.open .sh-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:880px){
    .sh-burger{display:inline-flex}
    .sh-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
        background:rgba(10,7,5,0.98);border-bottom:1px solid rgba(236,230,217,.1);max-height:0;overflow:hidden;
        opacity:0;pointer-events:none;transition:max-height .3s ease,opacity .25s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
    .siteheader.open .sh-nav{max-height:95vh;opacity:1;pointer-events:auto;padding:.3rem 1.2rem 1rem}
    .sh-nav a{padding:.8rem .3rem;font-size:.98rem}
}

.foot{background:#070504;border-top:1px solid rgba(236,230,217,.08);padding:3.6rem 0 2rem;margin-top:0}
.foot-grid{max-width:1180px;margin:0 auto;padding:0 1.6rem;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.foot-brand img{height:50px;opacity:.92}
.foot-brand p{color:var(--paper-dim);font-size:.84rem;line-height:1.6;margin-top:1rem;max-width:24rem}
.foot-social{display:flex;gap:.7rem;margin-top:1.2rem}
.foot-social a{width:30px;height:30px;display:inline-flex;opacity:.78;transition:opacity .2s}
.foot-social a:hover{opacity:1}
.foot-social img{width:100%;height:100%;object-fit:contain}
.foot-col h5{font-family:var(--font-body);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.foot-col a{display:block;color:var(--paper-dim);text-decoration:none;font-size:.88rem;padding:.3rem 0;transition:color .2s}
.foot-col a:hover{color:var(--paper)}
.foot-bottom{max-width:1180px;margin:3rem auto 0;padding:1.6rem 1.6rem 0;border-top:1px solid rgba(236,230,217,.08);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;color:var(--paper-dim);font-size:.8rem}
.foot-bottom a{color:var(--paper-dim);text-decoration:none}
.foot-bottom a:hover{color:var(--gold)}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* book-detail review text + grey copy: force readable on the darkened cards */
[class*="-review-text"],[class*="-review-body"],[class*="review-full"],[class*="review-truncated"],[class*="read-review-body"]{color:var(--paper)!important}
[class*="-review-attribution"],[class*="read-review-attribution"],[class*="-review-meta"],[class*="-review-date"]{color:var(--paper-dim)!important}