/* ============================================================
   StarNose "Shelf" theme layer — additive ambience for content
   pages. Linked AFTER each page's own styles; it never restyles
   layout, copy or colors of the underlying page. It adds:
   a navy/gold atmosphere at the top of the page, a gold rule,
   gentle card/button hover lift, reveal-on-scroll (JS-gated),
   and a reusable "shelf footer nav" component style.
   Palette: navy #0F2A44 · ink #0B1D33 · gold #C9A84C ·
   parchment #F5F0E8 · display "Fraunces" · body "Inter".
   ============================================================ */

:root{
  --shelf-navy:#0F2A44;
  --shelf-ink:#0B1D33;
  --shelf-gold:#C9A84C;
  --shelf-gold-bright:#E3B94E;
  --shelf-parchment:#F5F0E8;
}

/* --- Atmosphere: faint navy depth + one soft drifting glow --- */
body.shelf-page{
  background-image:
    radial-gradient(1100px 340px at 85% -60px, rgba(201,168,76,.10), rgba(201,168,76,0) 60%),
    linear-gradient(180deg, rgba(15,42,68,.055), rgba(15,42,68,0) 340px);
  background-repeat:no-repeat;
}
body.shelf-page::before{ /* slim gold rule across the very top */
  content:"";
  display:block;
  height:3px;
  background:linear-gradient(90deg, var(--shelf-ink), var(--shelf-gold) 30%, var(--shelf-gold-bright) 50%, var(--shelf-gold) 70%, var(--shelf-ink));
}
.shelf-glow{ /* injected by shelf-theme.js, decorative only */
  position:fixed;
  top:-140px; right:-120px;
  width:420px; height:420px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle at 50% 42%, rgba(201,168,76,.16), rgba(15,42,68,.05) 55%, rgba(15,42,68,0) 72%);
  filter:blur(18px);
  opacity:.55;
}
@media (prefers-reduced-motion: no-preference){
  .shelf-glow{ animation:shelfDrift 26s ease-in-out infinite alternate; }
  @keyframes shelfDrift{
    from{ transform:translate(0,0) scale(1); }
    to  { transform:translate(-70px,46px) scale(1.12); }
  }
}

/* --- Book-style hover: cards and buttons lift like a book
       being pulled a little way off the shelf ------------- */
body.shelf-page .card,
body.shelf-page .faq details{
  transition:transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease;
}
body.shelf-page .card:hover,
body.shelf-page .faq details:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(11,29,51,.16), 0 0 0 1px rgba(201,168,76,.35);
}
body.shelf-page a.btn,
body.shelf-page a.btn2,
body.shelf-page .btn{
  transition:transform .3s cubic-bezier(.22,.8,.3,1), box-shadow .3s ease, filter .3s ease;
}
body.shelf-page a.btn:hover,
body.shelf-page a.btn2:hover,
body.shelf-page .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(11,29,51,.22), 0 0 0 1px rgba(201,168,76,.45);
}

/* --- Reveal on scroll (only when JS adds .shelf-motion) --- */
html.shelf-motion .sr{
  opacity:0;
  transform:translateY(16px);
}
html.shelf-motion .sr.sr-in{
  opacity:1;
  transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1);
}
@media (prefers-reduced-motion: reduce){
  html.shelf-motion .sr{ opacity:1; transform:none; }
  body.shelf-page .card, body.shelf-page .faq details,
  body.shelf-page a.btn, body.shelf-page .btn{ transition:none; }
}

/* --- Shelf footer nav component (used by the homepage;
       available to any page that adopts the markup) -------- */
.shelf-footer-nav{
  background:linear-gradient(180deg, var(--shelf-navy), var(--shelf-ink));
  color:var(--shelf-parchment);
  border-top:3px solid var(--shelf-gold);
  padding:34px 20px 26px;
  font-family:'Inter', Arial, sans-serif;
}
.shelf-footer-nav .sfn-wrap{ max-width:1180px; margin:0 auto; }
.shelf-footer-nav .sfn-shelves{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  padding-bottom:16px; margin-bottom:16px;
  border-bottom:1px solid rgba(201,168,76,.35);
}
.shelf-footer-nav .sfn-shelves a{
  color:var(--shelf-parchment); text-decoration:none;
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
}
.shelf-footer-nav .sfn-shelves a:hover{ color:var(--shelf-gold-bright); }
.shelf-footer-nav .sfn-shelves .sfn-label{
  color:var(--shelf-gold); text-transform:uppercase;
  font-size:.72rem; letter-spacing:.18em; font-weight:700;
  align-self:center;
}
.shelf-footer-nav .sfn-meta{
  display:flex; flex-wrap:wrap; gap:8px 28px;
  font-size:.88rem; color:rgba(245,240,232,.82);
}
.shelf-footer-nav .sfn-meta a{ color:var(--shelf-gold-bright); text-decoration:none; }
.shelf-footer-nav .sfn-meta a:hover{ text-decoration:underline; }