/* ============================================================
   Shared theme — used by every page
   (nav bar, fixed background, page-title header, palette, type)
   ============================================================ */
:root {
  --navy:      #071d35;
  --navy-deep: #05152b;
  --blue:      #0e3358;
  --ivory:     #fff8ef;
  --muted:     rgba(255, 248, 239, 0.82);
  --gold:      #c9a65a;
  --gold-soft: rgba(201, 166, 90, 0.55);
  --nav-h:     4rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--ivory);
  font-family: "EB Garamond", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fixed botanical background shared across content pages.
   Sections render directly over this — no central "ribbon". */
body.has-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("assets/bg/bg_story1.jpg") center / cover no-repeat;
}
body.has-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
              rgba(5, 21, 43, 0.55) 0%,
              rgba(5, 21, 43, 0.40) 45%,
              rgba(5, 21, 43, 0.65) 100%);
}

/* ---------------- Top menu bar ---------------- */
.topnav {
  position: fixed;
  inset: 0 0 auto 0;      /* left:0 + right:0 already span the viewport width */
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3.2vw, 3rem);
  padding: 0 1.5rem;
  background: rgba(7, 29, 53, 0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gold-soft);
}
.topnav a {
  color: var(--ivory);
  text-decoration: none;
  font-family: "Raleway", "EB Garamond", sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.35rem 0;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.topnav a:hover { color: var(--gold); }
.topnav a.active { color: var(--gold); border-bottom-color: var(--gold); }

/* keep all six items on one line on phones */
@media (max-width: 620px) {
  .topnav {
    gap: clamp(0.45rem, 2.4vw, 0.9rem);
    padding: 0 0.8rem;
  }
  .topnav a { font-size: 0.6rem; letter-spacing: 0.06em; }
}
@media (max-width: 360px) {
  .topnav a { font-size: 0.54rem; letter-spacing: 0.03em; }
}

/* ---------------- Prominent page title ---------------- */
.page-title {
  text-align: center;
  padding: calc(var(--nav-h) + clamp(2.5rem, 7vw, 5rem)) 1rem 0;
}
.page-title h1 {
  font-family: "Italianno", cursive;
  font-weight: 400;
  color: var(--ivory);
  font-size: clamp(4rem, 12vw, 8.5rem);
  line-height: 0.95;
  margin: 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.page-title .subtitle {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: clamp(0.62rem, 1.7vw, 0.8rem);
  color: var(--gold);
  margin: 0.6rem 0 0;
  padding-left: 0.34em;
}
.page-title .title-rule {
  width: 68px;
  height: 1px;
  background: var(--gold-soft);
  margin: 1.5rem auto 0;
}