/* Dreaming Arts — header, nav, footer */

.site-header {
  position: sticky; top: 0; z-index: 60;
  /* solid-ish background, no backdrop-filter: combined with position:sticky it
     breaks compositing in some browser engines (header detaches to the bottom
     of its containing block on scroll) */
  background: rgba(37,31,27,0.98);
  border-bottom: 1px solid rgba(245,240,231,0.12);
}
.site-header-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 14px clamp(18px, 4vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; text-decoration: none; }
.brand-mark { width: clamp(66px, 8vw, 96px); height: auto; }
.brand-name {
  font-family: Cinzel, serif; font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.16em; color: var(--cream); text-transform: uppercase;
}

.main-nav { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 28px); align-items: center; }
.nav-link {
  font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-dark-1); padding: 6px 0; border-bottom: 1px solid transparent;
}
.nav-link:hover, .nav-link.is-active { color: var(--cream); border-bottom-color: var(--gold); }
.nav-item-menu { position: relative; display: flex; align-items: center; gap: 7px; }
.nav-caret {
  font-size: 10px; line-height: 1; color: var(--muted-dark-1);
  padding: 6px 2px; background: none; border: none;
}
.nav-caret:hover { color: var(--gold-on-dark); }
.nav-dropdown {
  position: absolute; top: 100%; left: 0; z-index: 60;
  display: none; flex-direction: column; min-width: 250px; padding: 8px 0;
  background: var(--bark-deep); border: 1px solid rgba(245,240,231,0.14);
}
.nav-item-menu.is-open .nav-dropdown { display: flex; }
.nav-dropdown a {
  padding: 10px 18px; font-family: Karla, sans-serif; font-size: 13px;
  letter-spacing: 0.06em; color: var(--body-dark-2);
}
.nav-dropdown a:hover { color: var(--gold-on-dark); }
.nav-dropdown a.is-active { color: var(--gold-on-dark); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid rgba(245,240,231,0.3);
  color: var(--cream); padding: 8px 12px; font-size: 20px; line-height: 1;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .main-nav {
    display: none;
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: var(--bark-deep);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 90px 28px 40px; gap: 4px; overflow-y: auto; z-index: 55;
  }
  .main-nav.is-open { display: flex; }
  .nav-link { padding: 14px 0; border-bottom: 1px solid rgba(245,240,231,0.1); }
  .nav-item-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-caret { align-self: flex-end; margin-top: -42px; }
  .nav-dropdown { position: static; border: none; background: none; padding: 0 0 8px 16px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-close { display: inline; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
  .nav-toggle-close { display: none; }
}

/* ---- Footer ---- */
.site-footer { background: var(--bark-deep); padding: clamp(60px, 7vw, 100px) clamp(20px, 5vw, 48px) 40px; }
.footer-grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(36px, 5vw, 72px); align-items: start;
}
.footer-logo { width: clamp(180px, 20vw, 240px); height: auto; }
.footer-address { margin: 20px 0 0; font-size: 14.5px; line-height: 1.7; color: #9C9184; }
.footer-heading {
  margin: 0 0 16px; font-family: Cinzel, serif; font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-on-dark);
}
.footer-text { margin: 0 0 18px; font-size: 14.5px; line-height: 1.7; color: var(--muted-dark-1); }
.footer-follow { display: flex; flex-direction: column; gap: 12px; }
.footer-follow a { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--muted-dark-1); }
.footer-follow a:hover { color: var(--gold-hover); }
.footer-follow img, .footer-follow svg { width: 17px; height: 17px; }
.footer-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px 18px; }
.footer-pages a { font-size: 14.5px; color: var(--muted-dark-1); }
.footer-pages a:hover { color: var(--gold-hover); }
.footer-bottom { margin-top: clamp(44px, 5vw, 72px); padding-top: 32px; border-top: 1px solid rgba(245,240,231,0.12); }
.footer-ack { margin: 0 auto; max-width: 900px; font-size: 13.5px; line-height: 1.85; color: #9C9184; text-align: center; }
.footer-copy { margin: 28px 0 0; font-size: 12.5px; letter-spacing: 0.1em; color: #7E7367; text-align: center; }

/* ---- Book sub-nav ---- */
.subnav { background: var(--bark); border-top: 1px solid rgba(245,240,231,0.12); border-bottom: 1px solid rgba(245,240,231,0.12); }
.subnav-inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); display: flex; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }
.subnav-link {
  padding: 16px 2px; font-family: Cinzel, serif; font-size: clamp(11px, 1.2vw, 13.5px);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-dark-1);
  border-bottom: 2px solid transparent;
}
.subnav-link:hover { color: var(--cream); }
.subnav-link.is-active { color: var(--cream); border-bottom-color: var(--gold); }

/* ---- Collections strip / back-link band ---- */
.strip-band { background: var(--cream); border-bottom: 1px solid rgba(43,37,33,0.12); padding: 18px clamp(20px, 5vw, 48px); }
.strip-inner { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px clamp(18px, 2.4vw, 30px); }
.strip-label { font-family: Cinzel, serif; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brown-link-hover); }
.strip-link { font-family: Karla, sans-serif; font-size: 13px; letter-spacing: 0.08em; color: var(--brown-link); border-bottom: 1px solid rgba(112,84,63,0.35); }
.strip-link:hover { color: var(--brown-link-hover); border-bottom-color: var(--brown-link-hover); }
.back-link { font-family: Karla, sans-serif; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brown-link); }
.back-link:hover { color: var(--brown-link-hover); }