/* The site header, the same as the other marketing pages. Used by the gift pages that carry it. */
:root {
  --gold-bg: rgba(176,137,48,0.11); --gold-dim: rgba(176,137,48,0.22); --line: rgba(28,31,30,0.13);
    --font-wordmark: 'Great Vibes', cursive; --font-display: 'Cormorant Garamond', Georgia, serif; --font-ui: 'Raleway', system-ui, sans-serif;
    --shadow-nav: 0 2px 16px rgba(28,31,30,0.08); --container: 1080px;
}
nav.site { font-family: var(--font-ui); line-height: 1.6; }
:where(nav.site) a { color: inherit; text-decoration: none; }
/* ─── Nav ─── */
nav.site { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; }
nav.site.scrolled { background: rgba(250,248,243,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-nav); }
.nav-inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; height: 66px; display: flex; align-items: center; justify-content: space-between; }
.nav-wordmark { font-family: var(--font-wordmark); font-size: 31px; color: var(--ink); line-height: 1; transition: color .3s; }
nav.site.scrolled .nav-wordmark { color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 30px); }
.nav-link { font-size: 12.5px; font-weight: 500; letter-spacing: 0.05em; color: var(--mist); transition: color .2s; white-space: nowrap; }
.nav-link:hover { color: var(--ink); }
nav.site.scrolled .nav-link { color: var(--mist); }
nav.site.scrolled .nav-link:hover { color: var(--ink); }
.nav-link.current { color: var(--gold); }
.btn-nav { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: none; border: 1px solid var(--gold-dim); border-radius: 3px; padding: 10px 20px; cursor: pointer; transition: background .2s, border-color .2s, color .3s; display: inline-block; white-space: nowrap; }
.btn-nav:hover { background: var(--gold-bg); border-color: var(--gold); }
nav.site.scrolled .btn-nav { color: var(--ink); border-color: var(--gold-dim); }
nav.site.scrolled .btn-nav:hover { background: var(--gold-bg); border-color: var(--gold); }
/* ── Mobile navigation (burger + panel, ≤760px) ──────────────
   Every destination in the desktop bar stays reachable on a
   phone: the "Palaio for" popover flattens into a labelled list
   instead of a 540px-wide card that runs off the screen edge,
   and the plain links are shown rather than display:none'd.
   ──────────────────────────────────────────────────────────── */
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 11px; background: none; border: none; cursor: pointer; color: var(--ink); position: relative; z-index: 3; }
.nav-burger span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
nav.site.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.site.open .nav-burger span:nth-child(2) { opacity: 0; }
nav.site.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.nav-open { overflow: hidden; }

@media (max-width: 760px) {
  nav.site { --nav-h: 67px; background: rgba(250,248,243,0.985) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-nav); }
  nav.site .nav-wordmark { color: var(--ink) !important; position: relative; z-index: 3; }
  .nav-burger { display: flex; }

  /* Scrim — tap anywhere off the panel to close. */
  nav.site::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; background: rgba(28,31,30,0.38); opacity: 0; pointer-events: none; transition: opacity .28s ease; z-index: 1; }
  nav.site.open::after { opacity: 1; pointer-events: auto; }

  /* The panel. Scrolls internally so a long menu never gets cut off. */
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; z-index: 2;
    flex-direction: column; align-items: stretch !important; gap: 0 !important;
    max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background: var(--parchment); border-bottom: 1px solid var(--line); box-shadow: 0 18px 44px rgba(28,31,30,0.16);
    padding: 4px 24px calc(24px + env(safe-area-inset-bottom));
    transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .28s var(--ease-out), opacity .2s ease, visibility 0s linear .28s; }
  nav.site.open .nav-links { transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .28s var(--ease-out), opacity .2s ease, visibility 0s; }

  /* "Palaio for" becomes a section label; its rows become the list. */
  .nav-links .nav-group { display: block; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-links .nav-trigger { pointer-events: none; width: 100%; text-align: left;
    padding: 16px 2px 4px; font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist) !important; }
  .nav-links .nav-trigger .car, .nav-links .dd-arrow { display: none !important; }
  .nav-links .nav-dd { position: static !important; display: block !important; width: auto !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important;
    background: none !important; border: none !important; box-shadow: none !important;
    border-radius: 0 !important; padding: 0 0 6px !important; }
  /* The rows above are forced visible, so a closed menu has to switch them off or they catch taps on the page below. */
  nav.site:not(.open) .nav-links .nav-dd { visibility: hidden !important; pointer-events: none !important; }
  .nav-links .dd-row { flex-direction: row !important; flex-wrap: wrap; align-items: baseline; gap: 0 10px;
    min-height: 52px; padding: 10px 2px !important; border-radius: 0 !important;
    border-bottom: 1px solid var(--line-soft); background: none !important; }
  .nav-links .dd-row:last-child { border-bottom: none; }
  .nav-links .dd-row .nm { font-size: 18px; }
  .nav-links .dd-row .ds { font-size: 13.5px; flex: 1 1 100%; }
  .nav-links .dd-row[aria-current="page"] .nm { color: #7E611D; }

  /* Primary links — 52px tap targets, one per row. */
  .nav-links > .nav-link { display: flex !important; align-items: center; width: 100%; min-height: 52px;
    padding: 14px 2px !important; border-bottom: 1px solid var(--line-soft);
    font-size: 17px !important; font-weight: 500; letter-spacing: 0.01em;
    color: var(--ink) !important; text-align: left; white-space: normal; }
  .nav-links > .nav-link[aria-current="page"] { color: var(--gold) !important; font-weight: 600; }

  /* CTA — filled, so the one action on the page reads as one. */
  .nav-links .btn-nav, .nav-links .btn-primary { display: block; width: 100%; margin-top: 20px !important;
    padding: 17px 20px; text-align: center; font-size: 12px; letter-spacing: 0.18em;
    background: var(--gold) !important; border-color: var(--gold) !important; color: var(--ink) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links, nav.site::after, .nav-burger span { transition-duration: 0.01ms !important; }
}

.nav-trigger { color: var(--mist); }
.nav-trigger:hover, .nav-group:hover .nav-trigger { color: var(--ink); }
.nav-group { position: relative; display: flex; align-items: center; }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0; padding: 0; font-size: 12.5px; font-weight: 500; letter-spacing: 0.05em; font-family: var(--font-ui); transition: color .2s; white-space: nowrap; }
.nav-trigger .car { font-size: 9.5px; color: var(--gold); margin-left: 1px; transition: transform .25s ease; }
.nav-group:hover .nav-trigger .car { transform: rotate(180deg); }
.nav-dd { position: absolute; top: calc(100% + 16px); left: 50%; width: 540px; max-width: min(540px, 92vw); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 60px rgba(28,31,30,0.16); padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px); transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 200; }
.nav-dd .dd-arrow { position: absolute; top: -7px; left: 50%; margin-left: -6px; width: 13px; height: 13px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
@media (hover: hover) { .nav-group:hover .nav-dd { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } }
.dd-row { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: 10px; text-align: left; transition: background .15s; }
.dd-row:hover { background: var(--parchment2); }
.dd-row.hi { background: var(--gold-bg); }
.dd-row.hi:hover { background: rgba(176,137,48,0.16); }
.dd-row .nm { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--ink); line-height: 1.15; }
.dd-row .ds { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 15px; color: var(--mist); line-height: 1.4; }
/* Mobile (≤760px) is owned entirely by #mobile-nav-css — nothing here. */