/* ===== Base styles shared across pages ===== */

:root { --gold:#c9a84c; --gold-light:#e8d5a0; --navy:#1a4427; }
* { box-sizing:border-box; }
body { font-family:"Lato",sans-serif; margin:0; }
a { color:inherit; }
#main-nav { background:white; border-bottom:2px solid var(--gold); position:sticky; top:0; z-index:50; }
.nav-logo { font-family:"Playfair Display",serif; color:var(--navy); white-space:nowrap; text-decoration:none; }
.nav-link { display:flex; align-items:center; gap:4px; padding:18px 10px; font-size:.88rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); transition:color .2s; white-space:nowrap; text-decoration:none; }
.dropdown { display:none; position:absolute; top:100%; left:0; background:white; min-width:220px; border-top:3px solid var(--gold); box-shadow:0 8px 32px rgba(0,0,0,.10); z-index:100; }
.dropdown a { display:block; padding:11px 20px; font-size:.84rem; color:var(--navy); border-bottom:1px solid #f3f0e8; transition:background .15s,color .15s; text-decoration:none; }
.dropdown a:hover, .dropdown a.active { background:#fdf8ee; color:var(--gold); font-weight:700; }
#hamburger { cursor:pointer; background:none; border:none; }
.mob-link { display:block; padding:13px 28px; font-size:.95rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--navy); border-bottom:1px solid #f0ebe0; cursor:pointer; }
.mob-sub { display:none; background:#fdf8ee; }
.mob-sub a { display:block; padding:10px 44px; font-size:.85rem; color:#4a5568; border-bottom:1px solid #ece8df; text-decoration:none; }
.breadcrumb { text-decoration:none; }
.page-hero { background:linear-gradient(120deg,#9de17b 0%,#fff 60%,#e8eeff 100%); border-bottom:3px solid #c7d2fe; }
.card { background:white; border-radius:4px; box-shadow:0 4px 18px rgba(0,0,0,.07); transition:transform .2s,box-shadow .2s; overflow:hidden; }
.card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,.12); }
.filter-btn { padding:8px 18px; border-radius:20px; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:#f3f0e8; color:var(--navy); border:none; cursor:pointer; transition:background .2s,color .2s; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .5s,transform .5s; }
.btn-primary { background:var(--navy); color:white; padding:14px 32px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; border-radius:2px; transition:background .2s,transform .15s; display:inline-block; text-decoration:none; border:none; cursor:pointer; }
.btn-primary:hover { background:var(--gold); transform:translateY(-2px); }
.btn-outline { border:2px solid var(--navy); color:var(--navy); padding:12px 28px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; border-radius:2px; transition:all .2s; display:inline-block; text-decoration:none; background:transparent; }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }

.nav-item { position:relative; }
.nav-link svg { width:12px; height:12px; transition:transform .2s; }
.nav-item:hover > .nav-link svg { transform:rotate(180deg); }
.nav-item:hover > .dropdown { display:block; }
.dropdown a:last-child { border-bottom:none; }
#mobile-menu { display:none; position:fixed; inset:0; z-index:200; background:white; overflow-y:auto; padding:80px 0 40px; }
#mobile-menu.open { display:block; }
.mob-sub.open { display:block; }
footer { background:var(--navy); color:#c8d1e0; }
.reveal.visible { opacity:1; transform:none; }
h1, h2, h3, h4 { font-family:"Playfair Display",serif; }
.nav-link:hover, .nav-link.active { color:var(--gold); }
.mob-sub a.active { color:var(--gold); font-weight:700; }
.breadcrumb a { color:var(--gold); }
.tab-link { padding:12px 22px; font-size:.82rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; border-bottom:3px solid transparent; color:#9ca3af; transition:color .2s,border-color .2s; white-space:nowrap; }
.tab-link:hover { color:var(--navy); }
.tab-link.active { color:var(--gold); border-bottom-color:var(--gold); }
h1, h2, h3 { font-family:"Playfair Display",serif; }
.tag { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border-radius:20px; }
.thumb { position:relative; }
.thumb-placeholder { width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:3rem; }
.play-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.play-circle { width:56px; height:56px; background:rgba(255,255,255,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.2); transition:transform .2s; }
.card:hover .play-circle { transform:scale(1.1); }
.dropdown-sep { height:1px; background:#f0ebe0; margin:4px 0; }
.dropdown .book-link { font-size:.78rem; padding:8px 20px 8px 28px; color:#6b7280; }
.dropdown .book-link:hover { color:var(--gold); background:#fdf8ee; }
.inner-tab:hover { color:var(--navy); }
.content-card { background:white; border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.07); overflow:hidden; }
.other-book-card { background:white; border-radius:6px; box-shadow:0 3px 14px rgba(0,0,0,.07); overflow:hidden; transition:transform .2s,box-shadow .2s; }
.other-book-card:hover { transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.12); }