/* ════════════════════════════════════════════════════════
   Digital Guide · Page Shell CSS v1.0
   Shared layout styles: nav, header, footer, typography.
   All colors use CSS vars — overridden by config.json via lux-page.js.
   ════════════════════════════════════════════════════════ */

:root{--gold:#d4af37;--gold-dk:#b8860b;--gold-lt:#f0d060;--gold-dim:rgba(212,175,55,.10);--black:#0b0b0b;--white:#fff;--grey-bg:#f8f7f2;--grey-brd:#e8e0ca;--blue-dk:#133a7c;--text:#1a1a1a;--text-2:#555;--pill:999px;--radius:14px;--radius-sm:9px;--t:.2s ease;--ff-serif:'Cormorant Garamond',Georgia,serif;--ff-sans:'DM Sans',-apple-system,sans-serif;--green:#10b981;--green-dk:#059669;--nero:#0a0a0a;
/* Foundation v1 · Tappa 1 (Mossa 1) — fluid responsive system */
--container-w:clamp(1440px,95vw,2200px);--container-w-narrow:clamp(1080px,95vw,2000px);--container-w-reading:780px;--container-pad:clamp(16px,4vw,64px);
--fs-display:clamp(22px,.457rem + 2.83vw,48px);--fs-h1:clamp(20px,.543rem + 2.17vw,40px);--fs-h2:clamp(18px,.701rem + 1.30vw,30px);--fs-h3:clamp(15px,.690rem + .76vw,22px);--fs-body:clamp(13px,.707rem + .33vw,16px);--fs-small:clamp(11px,.617rem + .22vw,13px);--fs-tiny:clamp(9px,.492rem + .22vw,11px);
--space-1:clamp(4px,.25rem + .1vw,8px);--space-2:clamp(8px,.5rem + .15vw,12px);--space-3:clamp(12px,.75rem + .25vw,18px);--space-4:clamp(16px,1rem + .4vw,28px);--space-5:clamp(20px,1.25rem + .6vw,40px);--space-6:clamp(24px,1.5rem + 1vw,56px);--space-8:clamp(32px,2rem + 1.5vw,72px)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff-sans);background:var(--grey-bg);color:var(--text);min-height:100dvh;overflow-x:hidden}

/* ── TOP NAV ─────────────────────────────────────────── */
.topnav{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--nero,var(--black));border-bottom:1.5px solid var(--green-dk);flex-wrap:wrap}
.topnav a,.topnav span{font-size:.7rem;font-weight:600;text-decoration:none;color:rgba(255,255,255,.55);letter-spacing:.05em;transition:color var(--t)}
.topnav a:hover{color:var(--gold)}
.topnav .sep{color:rgba(255,255,255,.2);font-size:.6rem}
.topnav .cur{color:var(--green)}
.topnav-actions{margin-left:auto;display:flex;gap:6px}
.tnbtn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--pill);font-size:.65rem;font-weight:700;text-decoration:none;border:1px solid rgba(212,175,55,.3);color:rgba(255,255,255,.7);background:transparent;transition:var(--t);cursor:pointer}
.tnbtn:hover{border-color:var(--gold);color:var(--gold)}

/* ── PAGE HEADER ─────────────────────────────────────── */
.page-header{position:relative;background:linear-gradient(160deg,#071a0e,#0a1208);padding:20px 16px 24px;overflow:hidden}
.page-header::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,var(--green-dk) 20%,var(--green) 50%,var(--green-dk) 80%,transparent)}
.header-inner{position:relative;z-index:1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.header-icon{width:42px;height:42px;border-radius:10px;background:rgba(16,185,129,.15);border:1.5px solid rgba(16,185,129,.4);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--green);flex-shrink:0}
.header-titles{flex:1}
.header-label{font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);display:block;margin-bottom:2px}
.header-title{font-family:var(--ff-serif);font-size:clamp(1.55rem,.794rem + 1.79vw,2.6rem);font-weight:600;color:var(--green);line-height:1}
.header-sub{font-size:clamp(.72rem,.523rem + .25vw,.95rem);color:rgba(255,255,255,.5);margin-top:3px;display:block}

/* ── CONTENT ─────────────────────────────────────────── */
.content{padding:12px var(--container-pad,16px);width:min(100%,var(--container-w-narrow,1080px));margin:0 auto}
@media(min-width:1024px){.content{padding-top:20px;padding-bottom:20px}}

/* ── BOTTOM NAV / FOOTER ─────────────────────────────── */
.bottom-section{padding:16px 16px 24px;display:flex;flex-direction:column;gap:10px}
.bnav{display:flex;gap:8px;flex-wrap:wrap}
.bnav-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:var(--pill);font-size:.75rem;font-weight:700;text-decoration:none;transition:var(--t);flex:1;min-width:130px;justify-content:center}
.bnav-btn--gold{background:linear-gradient(135deg,var(--gold),var(--gold-dk));color:var(--white);box-shadow:0 4px 14px rgba(212,175,55,.28)}
.bnav-btn--dark{background:var(--nero,var(--black));color:rgba(255,255,255,.8);border:1.5px solid rgba(212,175,55,.25)}
.bnav-btn--dark:hover{border-color:var(--gold);color:var(--white)}
.info-foot{font-size:.65rem;color:var(--text-2);text-align:center;line-height:1.6}
.info-foot a{color:var(--gold-dk);text-decoration:none}