/* ============================================================
       FIXED UNDERLAY NAVIGATION
       A single "Menu" toggle slides the whole page (.ul-shell) aside to
       reveal a nav panel (.ul-menu) pinned underneath on the right.
       Header (logo + toggle) stays fixed on top and does not move.
       ============================================================ */
    :root { --ul-shift: min(27rem, 84vw); --ul-ease: cubic-bezier(.76,0,.24,1); }

    /* The panel that lives underneath the page */
    .ul-menu {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: var(--ul-shift); z-index: 1;
      background: var(--espresso); color: var(--bone);
      display: flex; flex-direction: column; justify-content: center;
      padding: clamp(5rem,10vh,7rem) clamp(1.5rem,4vw,3rem) clamp(1.5rem,5vh,3rem);
      /* Stays painted (occluded by the opaque shell when closed) so the dark panel
         is visible for the whole close slide — no light flash. `inert` (set by
         nav.js) keeps it out of tab order / AT when closed. */
    }
    /* The root background fills the iOS safe-area / overscroll and tints the
       Safari toolbar; it follows the same dark/light signal as the header, so it
       is brown over the dark hero and while the (dark) menu is open, cream over
       the light content. Also serves as the dark backdrop behind the sliding
       shell, so no light flash on close. */
    body.nav-ondark, body.nav-open, body.nav-closing { background: var(--espresso); }
    .ul-menu__links { display: flex; flex-direction: column; gap: clamp(.1rem,1vh,.5rem); }
    .ul-menu__link {
      font-family: "Coconat", serif; letter-spacing: -1px; font-weight: 400;
      font-size: clamp(1.8rem,5.5vw,3rem); line-height: 1.14;
      color: var(--bone); text-decoration: none; width: max-content; max-width: 100%;
      transform: translateX(14px); opacity: 0;
      transition: color .25s ease, transform .5s var(--ul-ease), opacity .5s ease;
    }
    .ul-menu__link:hover { color: var(--bronze-bright); }
    body.nav-open .ul-menu__link { transform: none; opacity: 1; }
    /* stagger the links in */
    body.nav-open .ul-menu__link:nth-child(1) { transition-delay: .12s; }
    body.nav-open .ul-menu__link:nth-child(2) { transition-delay: .17s; }
    body.nav-open .ul-menu__link:nth-child(3) { transition-delay: .22s; }
    body.nav-open .ul-menu__link:nth-child(4) { transition-delay: .27s; }
    body.nav-open .ul-menu__link:nth-child(5) { transition-delay: .32s; }
    body.nav-open .ul-menu__link:nth-child(6) { transition-delay: .37s; }
    .ul-menu__cta {
      margin-top: clamp(1.4rem,4vh,2.4rem); align-self: flex-start;
      opacity: 0; transform: translateX(14px);
      transition: transform .5s var(--ul-ease) .42s, opacity .5s ease .42s, background .2s ease;
    }
    body.nav-open .ul-menu__cta { opacity: 1; transform: none; }
    .ul-menu__meta {
      margin-top: auto; padding-top: 2rem; font-size: .8rem; line-height: 1.7;
      color: rgba(243,236,221,.55); letter-spacing: .02em;
    }
    .ul-menu__meta a { color: rgba(243,236,221,.8); text-decoration: none; }
    .ul-menu__meta a:hover { color: var(--bronze-bright); }

    /* Fixed header on top — never moves */
    .ul-header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 30;
      height: clamp(60px,9vw,84px);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 clamp(1.25rem,4vw,2rem); pointer-events: none;
    }
    .ul-header > * { pointer-events: auto; }
    .ul-header .logo { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; text-decoration: none; color: var(--espresso); }
    .ul-toggle {
      display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
      background: none; border: 0; padding: .4rem 0; color: var(--espresso);
      font-family: "Coconat", serif; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem;
      transition: color .3s ease;
    }
    body.nav-open .ul-toggle { color: var(--bone); }   /* sits over the dark panel */
    .ul-toggle__bars { position: relative; width: 20px; height: 12px; flex: none; }
    .ul-toggle__bars span {
      position: absolute; left: 0; right: 0; height: 1.6px; background: currentColor; border-radius: 2px;
      transition: transform .35s var(--ul-ease), opacity .2s ease;
    }
    .ul-toggle__bars span:nth-child(1) { top: 0; }
    .ul-toggle__bars span:nth-child(2) { top: 5.2px; }
    .ul-toggle__bars span:nth-child(3) { top: 10.4px; }
    body.nav-open .ul-toggle__bars span:nth-child(1) { transform: translateY(5.2px) rotate(45deg); }
    body.nav-open .ul-toggle__bars span:nth-child(2) { opacity: 0; }
    body.nav-open .ul-toggle__bars span:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); }
    .ul-toggle__label { min-width: 3.2em; text-align: right; }

    /* The sliding page layer — solid bg so it fully hides the panel when closed */
    .ul-shell {
      position: relative; z-index: 10; min-height: 100vh; background: var(--cream);
      transition: transform .8s var(--ul-ease), border-radius .8s var(--ul-ease), box-shadow .8s var(--ul-ease);
      will-change: transform;
    }
    body.nav-open .ul-shell {
      transform: translateX(calc(-1 * var(--ul-shift)));
      overflow: hidden;
      /* No border-radius: the shell is the full (tall) page, so rounded corners
         would land at the very top/bottom of the document, off-screen mid-page,
         not at the viewport edge. The reference (Osmo) slides a flat panel too. */
      box-shadow: -30px 0 60px rgba(0,0,0,.28);
    }
    body.nav-open { overflow: hidden; }         /* lock page scroll while open */

    /* Dimming scrim over the page while the menu is open; click to close */
    .ul-scrim {
      position: absolute; inset: 0; z-index: 40;
      background: rgba(24,18,12,.34); opacity: 0; pointer-events: none;
      transition: opacity .6s ease;
    }
    body.nav-open .ul-scrim { opacity: 1; pointer-events: auto; }

    @media (prefers-reduced-motion: reduce) {
      .ul-shell, .ul-menu__link, .ul-menu__cta, .ul-scrim, .ul-toggle__bars span { transition-duration: .01ms !important; }
    }

    /* Header colour adapts to what's behind it: light over the dark hero,
       dark over the light content below. nav.js toggles body.nav-ondark. */
    .ul-header .logo, .ul-toggle { color: var(--espresso); transition: color .3s ease, opacity .3s ease; }
    body.nav-ondark .ul-header .logo span { color: var(--bone); }
    body.nav-ondark .ul-header .logo span:last-child { color: var(--bronze-bright); }
    body.nav-ondark .ul-toggle { color: var(--bone); }
    body.nav-open .ul-toggle, body.nav-closing .ul-toggle { color: var(--bone); }  /* over the dark panel */
    body.nav-open .ul-header .logo { opacity: 0; pointer-events: none; }  /* fade logo when open */

    /* Solid navbar bar, self-contained (also overrides any page's own header{}
       rule on the legal/style pages). Adapts: light (cream) over the light
       content, dark (espresso) over the dark hero, transparent while the menu is
       open so the bar doesn't sit across the revealed panel. */
    .ul-header {
      background: var(--cream); border: 0; border-bottom: 1px solid var(--hairline);
      backdrop-filter: none; transition: background .3s ease, border-color .3s ease;
    }
    body.nav-ondark .ul-header { background: var(--espresso); border-bottom-color: rgba(243,236,221,0.12); }
    /* Header is always solid (never transparent) so scrolling content can't show
       through it. While the menu is open or closing it's espresso, matching the
       dark panel/backdrop — which also means no cream can flash during the close
       slide. */
    body.nav-open .ul-header, body.nav-closing .ul-header { background: var(--espresso); border-bottom-color: transparent; }
    .ul-header .logo { flex-direction: column; gap: 0; line-height: 1.05; }
    .ul-header .logo span {
      font-family: "Coconat", serif; text-transform: uppercase;
      letter-spacing: .02em; font-weight: 400; font-size: 1rem;
    }
    @media (min-width: 640px) { .ul-header .logo span { font-size: 1.4rem; } }
    .ul-header .logo span:last-child { color: var(--bronze-ink); }  /* default (light pages) */

    /* Self-contained CTA button (works on pages that don't load site.css's .btn) */
    .ul-menu__cta {
      background: var(--bronze-bright); color: var(--espresso);
      font-family: "Coconat", serif; font-weight: 700; text-transform: uppercase;
      letter-spacing: .09em; font-size: .8rem; line-height: 1;
      padding: .95rem 2rem; border-radius: 9999px; border: 0; text-decoration: none;
      display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .ul-menu__cta:hover { background: var(--bronze); }

    /* Mobile: links + CTA stay at the bottom (in thumb reach); the description
       and Privacy/Terms move to the top, out of reach. */
    @media (max-width: 640px) {
      .ul-menu { justify-content: flex-start; }
      .ul-menu__meta { order: -1; margin: 0 0 0.5rem; padding-top: 0; }
      .ul-menu__links { margin-top: auto; }   /* pushes links + CTA to the bottom */
    }