/* ============================================================
   SITE NAV — shared header + full-screen menu for every page.
   To add it to a new page:
     1. In <head>:  <link rel="stylesheet" href="assets/site-nav.css">
                    <script src="assets/site-nav.js" defer></script>
        (use ../assets/ from pages inside media/)
     2. Paste the markup from assets/site-nav.html as the first thing in <body>.
   The header is fixed; pages pad their first section by var(--header-height).
   Add class "sn-header--sticky" to the header instead if the page has no top padding.
   Selectors are prefixed sn- and the header rules use #header so they beat any
   legacy .header / .header--scrolled rules a page still carries.
   ============================================================ */
@font-face { font-family: 'Right Grotesk Compact'; src: url('RightGroteskCompact-Black.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'ABC Monument Grotesk'; src: url('ABCMonumentGroteskEdu-Regular.otf') format('opentype'); font-weight: 100 900; font-display: swap; }

:root {
  --sn-red: #9b0041;
  --sn-pink: #f0a4c0;
  --sn-head: 'Right Grotesk Compact', 'Arial Narrow', Arial, sans-serif;
  --sn-body: 'ABC Monument Grotesk', Inter, -apple-system, 'Segoe UI', sans-serif;
  --sn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sn-h: var(--header-height, 76px);
}

/* ---- Bar ---- */
#header.sn-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--sn-h); margin: 0; padding: 0;
  background: var(--sn-red) !important; color: #fff;
  box-shadow: 0 2px 20px rgba(155, 0, 65, 0.25) !important;
  transform: none !important; opacity: 1 !important; transition: none !important;
  display: block;
}
#header.sn-header.sn-header--sticky { position: sticky; }
.sn-inner {
  min-width: 0;
  max-width: var(--max, var(--max-width, 1320px)); margin: 0 auto;
  padding: 0 var(--gutter, var(--page-margin, clamp(20px, 4vw, 56px)));
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.sn-logo { display: block; color: #fff; line-height: 0; min-width: 0; flex: 0 1 auto; }
/* The wordmark is 287px at full size; on narrow screens it shrinks so it never collides with the Menu button */
.sn-logo img { width: min(287px, calc(100vw - 150px)); height: auto; display: block; }
.sn-btn {
  display: inline-flex; align-items: center; gap: 14px; margin: 0; padding: 8px 0;
  background: none; border: 0; color: #fff; cursor: pointer;
  font-family: var(--sn-head) !important; font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: 0.02em;
}
.sn-btn i { width: 26px; height: 2px; background: currentColor; position: relative; display: block; transition: transform 0.4s var(--sn-ease); }
.sn-btn i::before, .sn-btn i::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; top: -8px; transition: transform 0.4s var(--sn-ease); }
.sn-btn i::after { top: 8px; }
.sn-btn--close i { background: transparent; }
.sn-btn--close i::before { transform: translateY(8px) rotate(45deg); }
.sn-btn--close i::after { transform: translateY(-8px) rotate(-45deg); }
.sn-btn:focus-visible, .sn-menu a:focus-visible { outline: 2px solid var(--sn-pink); outline-offset: 4px; }

/* ---- Overlay: wipes down from under the bar, then the links rise in one after another ---- */
.sn-menu {
  position: fixed; inset: 0; z-index: 1100; background: var(--sn-red); color: #fff;
  font-family: var(--sn-body); font-size: 16px; line-height: 1.5;
  clip-path: inset(0 0 100% 0); transition: clip-path 0.8s var(--sn-ease);
  visibility: hidden; overflow: auto; -webkit-font-smoothing: antialiased;
}
.sn-menu-open .sn-menu { clip-path: inset(0 0 0 0); visibility: visible; }
.sn-menu-open { overflow: hidden; }
.sn-menu__bar { height: var(--sn-h); }
.sn-menu__inner {
  height: auto; min-height: calc(100vh - var(--sn-h)); min-height: calc(100dvh - var(--sn-h));
  display: grid; grid-template-columns: 1fr 1fr; align-items: end;
  padding-top: clamp(24px, 4vh, 48px); padding-bottom: clamp(32px, 5vh, 56px);
}
.sn-menu__nav a {
  display: block; color: #fff; text-decoration: none;
  font-family: var(--sn-head) !important; font-weight: 700; font-size: clamp(40px, 4.6vw, 72px); line-height: 0.96; text-transform: none; letter-spacing: 0;
  opacity: 0; transform: translateY(24px);
  transition: color 0.3s ease, padding-left 0.4s var(--sn-ease), opacity 0.5s ease, transform 0.7s var(--sn-ease);
}
.sn-menu__nav a small { font-family: var(--sn-body) !important; font-weight: 400; font-size: 13px; color: var(--sn-pink); vertical-align: top; margin-right: 10px; }
.sn-menu__nav a:hover, .sn-menu__nav a[aria-current="page"] { color: var(--sn-pink); }
.sn-menu__nav a:hover { padding-left: 0.2em; }
.sn-menu-open .sn-menu__nav a { opacity: 1; transform: none; }
.sn-menu-open .sn-menu__nav a:nth-child(1) { transition-delay: 0.25s; }
.sn-menu-open .sn-menu__nav a:nth-child(2) { transition-delay: 0.3s; }
.sn-menu-open .sn-menu__nav a:nth-child(3) { transition-delay: 0.35s; }
.sn-menu-open .sn-menu__nav a:nth-child(4) { transition-delay: 0.4s; }
.sn-menu-open .sn-menu__nav a:nth-child(5) { transition-delay: 0.45s; }
.sn-menu-open .sn-menu__nav a:nth-child(6) { transition-delay: 0.5s; }
.sn-menu-open .sn-menu__nav a:nth-child(7) { transition-delay: 0.55s; }
.sn-menu__side { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.8); justify-self: end; text-align: right; opacity: 0; transition: opacity 0.6s ease 0.6s; }
.sn-menu__side b { display: block; color: #fff; font-family: var(--sn-head) !important; font-weight: 700; font-size: 22px; margin-bottom: 8px; }
.sn-menu__side a { color: inherit; text-decoration: none; }
.sn-menu__side a:hover { color: var(--sn-pink); }
.sn-menu-open .sn-menu__side { opacity: 1; }

@media (max-width: 860px) {
  .sn-btn { font-size: 20px; }
  .sn-menu__inner { grid-template-columns: 1fr; align-items: start; padding-top: 24px; }
  .sn-menu__nav a { font-size: clamp(40px, 11vw, 56px); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.22); }
  .sn-menu__nav a small { display: none; }   /* no numbers on mobile */
  .sn-menu__nav a:hover { padding-left: 0; }
  .sn-menu__side { justify-self: start; text-align: left; margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .sn-menu, .sn-menu__nav a, .sn-menu__side, .sn-btn i, .sn-btn i::before, .sn-btn i::after { transition: none !important; }
}

/* Lenis smooth scrolling (assets/site-lenis.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }