/* =============================================================================
   CINEMA — the 2026 flagship identity.
   A cinematic, gallery-grade look: obsidian stages, a single disciplined gold,
   large Playfair display type on warm ivory content. Built for full-bleed
   video / slider heroes and editorial section rhythm.
   ============================================================================= */

:root {
    /* --- obsidian (used as "primary" by shared components) --- */
    --c-primary:        #0E1116;
    --c-primary-700:    #07090C;
    --c-primary-500:    #171B22;
    --c-primary-400:    #262C36;
    --c-primary-300:    #7A828F;
    --c-primary-100:    #E7E9ED;

    /* --- signature gold --- */
    --c-accent:         #C9A227;
    --c-accent-700:     #A9871A;
    --c-accent-800:     #86690F;
    --c-accent-300:     #EBCF7B;
    --c-accent-100:     #FBF3DC;
    --c-accent-glow:    rgba(201,162,39,.42);

    /* --- surfaces (warm ivory, not clinical white) --- */
    --c-surface:        #FBFAF7;
    --c-surface-2:      #FFFFFF;
    --c-surface-alt:    #F3F0EA;

    --c-ink:            #0B0E12;
    --c-ink-2:          #333A44;
    --c-muted:          #6C7381;
    --c-line:           #E2DED6;
    --c-line-soft:      #EFEBE3;

    --c-danger:         #C0392B;
    --c-success:        #1B8A5A;

    /* --- gradients --- */
    --g-accent:  linear-gradient(135deg, #EBCF7B 0%, #C9A227 52%, #A9871A 100%);
    --g-hero:    linear-gradient(155deg, #07090C 0%, #10151C 52%, #1B1408 100%);
    --g-soft:    linear-gradient(180deg, var(--c-surface) 0%, var(--c-surface-alt) 100%);
    --g-flame:   linear-gradient(180deg, #EBCF7B 0%, #A9871A 100%);

    /* --- type --- */
    --f-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* --- elevation --- */
    --sh-1: 0 1px 2px rgba(11,14,18,.05), 0 8px 20px -14px rgba(11,14,18,.28);
    --sh-2: 0 12px 34px -16px rgba(11,14,18,.38), 0 3px 10px -5px rgba(11,14,18,.14);
    --sh-3: 0 36px 70px -28px rgba(11,14,18,.48), 0 12px 28px -14px rgba(201,162,39,.22);
    --sh-glow: 0 20px 50px -14px var(--c-accent-glow);

    /* --- platform brand colours --- */
    --brand-youtube:   #FF0033;
    --brand-podcast:   #C9A227;
    --brand-spotify:   #1DB954;
    --brand-apple:     #A855F7;
    --brand-whatsapp:  #25D366;
    --brand-instagram: #E1306C;
    --brand-facebook:  #1877F2;
    --brand-tiktok:    #00E5DA;
    --brand-x:         #FFFFFF;
    --brand-linkedin:  #0A66C2;
    --brand-books:     #C9A227;
    --brand-web:       #38BDF8;
    --brand-radio:     #FB7185;
}

/* ============================================================================
   GLOBAL ATMOSPHERE
   ============================================================================ */
body {
    background:
        radial-gradient(58% 38% at 100% -6%, rgba(201,162,39,.09), transparent 62%),
        radial-gradient(45% 35% at -10% 104%, rgba(11,14,18,.05), transparent 62%),
        var(--c-surface);
}

/* Display type is a true serif here — tighter tracking, generous size. */
h1, h2, h3 { letter-spacing: -.018em; font-weight: 600; }
h1 { line-height: 1.02; }
h4 { font-family: var(--f-sans); letter-spacing: -.01em; }
.lead { font-weight: 400; color: var(--c-muted); }

/* Editorial eyebrow: hairline + letterspaced caps, no pill. */
.eyebrow {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--c-accent-700);
    letter-spacing: .22em;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}
.eyebrow::before {
    content: '';
    display: inline-block;
    width: 26px; height: 1px;
    background: currentColor;
    margin-right: .7rem;
    vertical-align: middle;
    border-radius: 0;
}

/* ============================================================================
   HEADER — hairline, ivory, gold underline on the active item
   ============================================================================ */
.site-header { background: rgba(251,250,247,.80); border-bottom: 1px solid var(--c-line-soft); }
.site-header.is-stuck { background: rgba(251,250,247,.94); box-shadow: 0 1px 0 var(--c-line); }
.brand-mark {
    background: var(--c-ink);
    color: var(--c-accent-300);
    font-family: var(--f-display);
    border: 1px solid rgba(201,162,39,.35);
}
.brand-text small { color: var(--c-accent-700); letter-spacing: .18em; }
.nav-links a { border-radius: 0; }
.nav-links a:hover { background: transparent; color: var(--c-ink); }
.nav-links a.is-active {
    background: transparent;
    color: var(--c-ink);
    box-shadow: inset 0 -2px 0 var(--c-accent);
}

/* Header sits over the full-bleed hero on the homepage until you scroll. */
.page-home .site-header:not(.is-stuck) {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.page-home .site-header:not(.is-stuck) .brand-mark {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.28);
    color: #fff;
}
.page-home .site-header:not(.is-stuck) .nav-links a,
.page-home .site-header:not(.is-stuck) .brand-text span,
.page-home .site-header:not(.is-stuck) .lang-toggle,
.page-home .site-header:not(.is-stuck) .menu-toggle { color: #fff; }
.page-home .site-header:not(.is-stuck) .brand-text small { color: var(--c-accent-300); }
.page-home .site-header:not(.is-stuck) .nav-links a.is-active { box-shadow: inset 0 -2px 0 var(--c-accent-300); }
.page-home .site-header:not(.is-stuck) .lang-toggle { border-color: rgba(255,255,255,.28); }
.page-home .site-header:not(.is-stuck) .menu-toggle { background: rgba(255,255,255,.12); color: #fff; }

/* ============================================================================
   HERO
   ============================================================================ */
.hero { background: var(--g-hero); }
.hero h1 { font-weight: 500; color: #fff; }
.hero h1 em { font-style: italic; color: var(--c-accent-300); }
.hero .lead { color: rgba(255,255,255,.80); font-size: 1.15rem; }
.hero .eyebrow { color: var(--c-accent-300); background: transparent; border: 0; }

.page-hero { background: var(--g-hero); }
.page-hero .eyebrow { color: var(--c-accent-300); background: transparent; border: 0; }
.page-hero h1 { font-weight: 500; }

/* ============================================================================
   BUTTONS — squarer, quieter, gold as the single loud voice
   ============================================================================ */
.btn { border-radius: 4px; letter-spacing: .02em; font-weight: 600; }
.btn-primary {
    background: var(--g-accent);
    color: #14100A;
    box-shadow: 0 14px 34px -16px var(--c-accent-glow);
}
.btn-primary:hover { color: #14100A; box-shadow: 0 20px 46px -16px rgba(201,162,39,.7); }
.btn-accent { background: var(--c-ink); color: #fff; }
.btn-accent:hover { color: var(--c-accent-300); }
.btn-ghost { border-color: var(--c-line); }
.btn-ghost:hover { background: transparent; border-color: var(--c-ink); color: var(--c-ink); }
.hero .btn-ghost, .band-dark .btn-ghost, .page-hero .btn-ghost, .hero-media .btn-ghost {
    background: rgba(255,255,255,.05); color: #fff; border-color: rgba(255,255,255,.34);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero .btn-ghost:hover, .band-dark .btn-ghost:hover,
.page-hero .btn-ghost:hover, .hero-media .btn-ghost:hover {
    background: rgba(255,255,255,.14); color: #fff; border-color: #fff;
}

/* ============================================================================
   MARQUEE — thin obsidian rule with gold type
   ============================================================================ */
.marquee { background: var(--c-ink); color: var(--c-accent-300); border-block: 1px solid rgba(201,162,39,.22); }
.marquee span { color: var(--c-accent-300); font-family: var(--f-display); font-style: italic; letter-spacing: 0; text-transform: none; }
.marquee span::after { color: rgba(201,162,39,.5); }

/* ============================================================================
   CARDS — flatter, hairline, gold reveal
   ============================================================================ */
.card { border-radius: 6px; border-color: var(--c-line-soft); box-shadow: none; }
.card:hover { border-color: var(--c-accent); box-shadow: var(--sh-2); transform: translateY(-4px); }
.card-title { color: var(--c-ink); font-weight: 600; }
.book-card { border-radius: 6px; }
/* Covers sit on plain paper, the way a bookshop or Amazon shows them: no
   frame, no dark plate — just the artwork with its own shadow, so the cover
   itself is the object on the page rather than a picture inside a box. */
.book-card .book-cover {
    background: var(--c-surface-2);
    display: grid;
    place-items: center;
    padding: var(--s-6) var(--s-5) var(--s-5);
    aspect-ratio: 3 / 4;
}

.channel-card {
    border-radius: 6px;
    background: linear-gradient(160deg, #10151C 0%, #07090C 100%);
    border: 1px solid rgba(255,255,255,.07);
}
.channel-card:hover { border-color: rgba(201,162,39,.45); }
.platform-card { border-radius: 6px; }
.platform-icon { background: var(--c-ink); color: var(--c-accent-300); border-radius: 6px; }
.platform-card:hover { border-color: var(--c-accent); }
.platform-card:hover .platform-icon { background: var(--g-accent); color: #14100A; }

/* ============================================================================
   SECTION RHYTHM
   ============================================================================ */
.section-alt { background: var(--c-surface-alt); }
.band-dark { background: var(--g-hero); }
.band-dark .eyebrow { color: var(--c-accent-300); background: transparent; border: 0; }

.gold-rule { height: 2px; width: 56px; background: var(--g-accent); }

/* Hairline divider between ivory sections — quiet editorial rhythm. */
.section + .section:not(.band-dark):not(.section-alt) { border-top: 1px solid var(--c-line-soft); }

/* ============================================================================
   QUOTE / MISSION
   ============================================================================ */
.quote-card { border-radius: 6px; }
.quote-card blockquote { font-family: var(--f-display); font-style: italic; font-weight: 400; }
.mission-banner { border-radius: 6px; }

/* ============================================================================
   FOOTER
   ============================================================================ */
.site-footer { background: var(--g-hero); border-top: 1px solid rgba(201,162,39,.35); }
.footer-brand .brand-mark { background: var(--g-accent); color: #14100A; }
.site-footer a:hover { color: var(--c-accent-300); }

/* ============================================================================
   BOTTOM NAV + FLOATING BITS
   ============================================================================ */
.bottom-nav { background: rgba(7,9,12,.92); }
.bottom-nav a.is-active svg { color: var(--c-accent-300); }
.radio-float-pill { background: var(--c-ink); }
.radio-float-pill .radio-float-icon { background: var(--g-accent); color: #14100A; }

/* ============================================================================
   FORMS
   ============================================================================ */
input, textarea, select { border-radius: 4px; }
input:focus, textarea:focus, select:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px rgba(201,162,39,.18);
}

/* ============================================================================
   AMAZON BUTTON — the stock orange fights the gold, so it becomes an
   understated outline that still reads as "buy".
   ============================================================================ */
.btn-amazon {
    background: transparent;
    color: var(--c-ink);
    border: 1px solid var(--c-ink);
    box-shadow: none;
}
.btn-amazon:hover {
    background: var(--c-ink);
    color: var(--c-accent-300);
    box-shadow: var(--sh-2);
}
.band-dark .btn-amazon, .page-hero .btn-amazon {
    color: #fff; border-color: rgba(255,255,255,.4);
}
.band-dark .btn-amazon:hover, .page-hero .btn-amazon:hover {
    background: #fff; color: var(--c-ink);
}

/* ============================================================================
   CHANNEL WALL — three across on desktop, so six tiles form a clean 3 × 2
   block instead of a four-plus-two orphan row.
   ============================================================================ */
@media (min-width: 1024px) {
    .channel-card { flex-basis: calc(33.333% - (var(--s-4) * 2 / 3)); }
}

/* Quieter vertical rhythm around ornaments */
.ornament { margin: var(--s-5) 0 var(--s-7); }

/* Book covers sit on an obsidian plate, contained rather than cropped */
.book-card .book-cover img {
    width: auto; height: 100%;
    max-width: 100%;
    object-fit: contain;
    padding: 0;
    border-radius: 2px;
    /* a real book edge: a tight contact shadow plus a soft cast one */
    filter:
        drop-shadow(0 1px 1px rgba(11,14,18,.28))
        drop-shadow(0 14px 26px rgba(11,14,18,.30));
}
.book-card:hover .book-cover img {
    filter:
        drop-shadow(0 2px 2px rgba(11,14,18,.30))
        drop-shadow(0 22px 38px rgba(11,14,18,.38));
}
/* the card itself stays quiet — the cover is the thing being looked at */
.book-card { background: var(--c-surface-2); }
.book-card:hover { border-color: var(--c-line); box-shadow: var(--sh-2); }

/* Section headings get a little more air above the rule */
.section-head h2 { margin-top: var(--s-4); }

/* ============================================================================
   INNER-PAGE HEADER — the same photograph, pushed far back, so About / Books /
   Videos / Podcast / Contact all open on the same cinematic stage.
   ============================================================================ */
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.page-hero::before {
    content: '';
    position: absolute; inset: 0; z-index: -2;
    background-image: var(--page-hero-img);
    background-size: cover;
    background-position: center 22%;
    opacity: .26;
    filter: grayscale(.35) contrast(1.05);
}
.page-hero::after {
    /* keep the existing glow, but add a bottom-weighted scrim for legibility */
    background:
        linear-gradient(to top, rgba(4,6,9,.96) 0%, rgba(4,6,9,.55) 55%, rgba(4,6,9,.35) 100%);
    inset: 0; z-index: -1; opacity: 1;
}
.page-hero .container { position: relative; z-index: 1; }

/* ============================================================================
   ARCH → editorial plate. The rounded "portal" belongs to the old identity;
   here the portrait sits in a squared frame with an offset gold rule.
   ============================================================================ */
.arch {
    border-radius: 4px;
    background: linear-gradient(165deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
    border: 1px solid rgba(255,255,255,.14);
}
.arch::before, .arch::after { display: none; }
.arch-img { border-radius: 3px; }
.arch-badge {
    border-radius: 3px;
    background: rgba(7,9,12,.72);
    border: 1px solid rgba(201,162,39,.45);
    color: var(--c-accent-300);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ============================================================================
   FILTER CHIPS — squared, hairline, gold when active
   ============================================================================ */
.chip { border-radius: 3px; border-color: var(--c-line); font-weight: 600; letter-spacing: .01em; }
.chip:hover { border-color: var(--c-ink); color: var(--c-ink); background: transparent; }
.chip.is-active { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-accent-300); }

/* ============================================================================
   MISC POLISH
   ============================================================================ */
.iframe-16x9 { border-radius: 4px; overflow: hidden; box-shadow: var(--sh-3); }
.empty { border-radius: 4px; border-style: solid; border-color: var(--c-line); }
.video-card .play-icon svg { filter: drop-shadow(0 12px 26px rgba(0,0,0,.6)); }
.featured-badge { border-radius: 3px; background: var(--g-accent); color: #14100A; }
.podcast-brand { border-radius: 4px; }
.mission-banner-body { max-width: 52ch; }

/* ---- specificity fixes: match the base selectors so the squarer geometry wins ---- */
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=url], input[type=number], input[type=date], input[type=file], textarea, select {
    border-radius: 4px;
    border-width: 1px;
}
.book-card .featured-badge {
    border-radius: 3px;
    background: var(--g-accent);
    color: #14100A;
    letter-spacing: .12em;
}
.info-list li { border-radius: 4px; }
.info-list .ico { border-radius: 4px; background: var(--c-accent-100); color: var(--c-accent-700); }
.alert { border-radius: 4px; }
.card, .book-card, .video-card, .platform-card, .channel-card, .quote-card,
.mission-banner, .admin-card { border-radius: 6px; }

/* ============================================================================
   BRAND MARK — now a photograph, so the lettered-tile styling from the themes
   (solid fills, borders, display font) must not paint over or behind it.
   ============================================================================ */
img.brand-mark,
.footer-brand img.brand-mark,
.mobile-panel img.brand-mark,
.page-home .site-header:not(.is-stuck) img.brand-mark {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(201,162,39,.5), 0 2px 8px -2px rgba(0,0,0,.45);
}
.footer-brand img.brand-mark,
.mobile-panel img.brand-mark,
.page-home .site-header:not(.is-stuck) img.brand-mark {
    box-shadow: 0 0 0 1px rgba(255,255,255,.4);
}