/* Fixed header, brand mark, primary nav and dropdown, mobile toggle */
/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:1000;transition:.4s ease;padding:22px 0}
header .container{display:flex;align-items:center;justify-content:space-between;gap:20px}
header.scrolled{background:rgba(251,249,241,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px -22px rgba(31,61,43,.6);padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
/* Rounded square, matching the favicon and logo lockups.
   background-color and background-image are set separately (never via the
   shorthand) so the two header states can swap cleanly. */
.brand .mark{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background-color:var(--forest);
  background-image:radial-gradient(circle at 30% 30%,var(--moss-2),var(--forest));
  color:#f4f1e6;line-height:1;box-shadow:var(--shadow);flex:none;
  /* 2rem of a 44px tile ≈ 72%, the same glyph-to-block ratio as the favicon */
  font-size:2rem;
  /* .mark is a <span>, so it also matches `.brand span`, which sets
     letter-spacing for the subtitle. Tracking is added AFTER the glyph, so
     the box grows to 1.24em while the ink stays in the left 1em — centring
     the box then shifts the icon visibly left. Reset it here. */
  letter-spacing:0}
.brand b{font-family:'Cormorant Garamond';font-size:1.5rem;font-weight:700;color:var(--forest);line-height:1}
.brand span{display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
header:not(.scrolled) .brand b{color:#f4f1e4}
header:not(.scrolled) .brand span{color:#ffdf8a}
header.scrolled .brand b{color:var(--forest)}
header.scrolled .brand span{color:var(--gold-deep)}
/* The tile inverts with the header, the same way the wordmark does:
   cream over the dark hero (matching the favicon), green once the header
   turns light — so the mark stays legible in both states. */
header:not(.scrolled):not(.solid) .brand .mark{
  background-color:var(--bg);background-image:none;color:var(--forest)}
/* .mark is itself a <span>, so it must out-rank the wordmark's span rules */
header.scrolled .brand .mark,footer .brand .mark{color:#f4f1e6}

/* solid header — interior pages with no dark hero behind it */
header.solid{background:rgba(251,249,241,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px -22px rgba(31,61,43,.6)}
header.solid nav>ul>li>a{color:var(--ink)}
header.solid .brand b{color:var(--forest)}
header.solid .brand span{color:var(--gold-deep)}
header.solid .menu-toggle{color:var(--forest)}
header.solid .brand .mark{color:#f4f1e6}
nav ul{display:flex;gap:26px;list-style:none;align-items:center}
nav a{font-size:.86rem;font-weight:500;color:var(--ink);position:relative;padding:4px 0;opacity:.85;transition:.25s}
header:not(.scrolled):not(.solid) nav>ul>li>a{color:#f2efe2}
nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);transition:.3s}
nav a:hover,nav a.active{opacity:1}
nav a:hover::after,nav a.active::after{width:100%}
/* nav dropdown */
nav .has-sub{position:relative}
.sub-caret{font-size:.58rem;margin-left:5px;transition:transform .3s;vertical-align:middle}
nav .has-sub:hover .sub-caret{transform:rotate(180deg)}
/* width:max-content keeps the panel snug to its longest label; stretch makes
   each row fill that width so the hover highlight covers the whole row rather
   than just the text (nav ul otherwise centres them). */
nav .sub{position:absolute;top:100%;left:50%;flex-direction:column;align-items:stretch;
  gap:2px;width:max-content;min-width:0;
  margin-top:14px;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;z-index:20}
nav .sub::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
nav .has-sub:hover .sub,nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
nav .sub a{display:block;padding:10px 14px;border-radius:9px;font-size:.86rem;opacity:1;color:var(--ink)}
nav .sub a::after{display:none}
nav .sub a:hover{background:rgba(63,112,67,.1);color:var(--forest)}

.menu-toggle{display:none;font-size:1.4rem;cursor:pointer;color:#f2efe2;
  background:none;border:0;padding:4px;line-height:1;font-family:inherit}
.menu-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
header.scrolled .menu-toggle{color:var(--forest)}