/* Shared navigation additions: ABOUT dropdown (desktop) + ABOUT accordion (mobile).
   Loaded after each page's own nav styles, so it only adds/overrides what the
   dropdown needs. Fonts, sizes and tracking come from the page's own tokens. */

/* ── Desktop: spacing + dropdown ── */
@media (min-width: 901px) {
  .n-nav-group { gap: 96px; }
}
.n-links .n-dd { position: relative; }
.n-links .n-dd-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; margin: 0; padding: 0; cursor: pointer;
  font-family: var(--font-meta, var(--mono, var(--sans, 'DM Sans', sans-serif)));
  font-size: var(--nav-size, 16px);
  font-weight: var(--n-nav-weight, 500);
  letter-spacing: var(--nav-tracking, .13em);
  line-height: 1.2; text-transform: uppercase; white-space: nowrap;
  color: var(--forest, #1C3328);
  transition: color .4s ease, opacity .22s ease;
  position: relative;
}
.n-links .n-dd-trigger:hover { opacity: .7; }
.n-dd-chev { width: 10px; height: 6px; flex-shrink: 0; transition: transform .25s ease; }
.n-dd-trigger[aria-expanded="true"] .n-dd-chev { transform: rotate(180deg); }
.n-links .n-dd-trigger[aria-expanded="true"]::after,
.n-links .n-dd-trigger.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: currentColor;
}
/* Dropdown colours derive from the nav state, never from page-level overrides:
     --nav-surface  opaque nav fill (pages set it on nav#nav; .on = scrolled/solid)
     --dd-bg / --dd-fg / --dd-shadow / --dd-blur  default to surface + forest text.
   Photo heroes mark nav#nav[data-nav-hero="photo"]: while the nav is transparent
   the menu is transparent too and inherits the nav's light text colour; once the
   nav goes solid (.on) the menu takes the nav's opaque surface + dark text. */
:root { --nav-surface: var(--ivory, #F4F3EF); }
nav#nav[data-nav-hero="photo"] { --dd-fg: currentColor; }
nav#nav[data-nav-hero="photo"]:not(.on) { --dd-bg: transparent; --dd-shadow: none; --dd-blur: none; }
.n-dd-menu {
  --dd-pad-x: 18px;
  position: absolute; top: calc(100% + 18px); left: calc(-1 * var(--dd-pad-x)); z-index: 520;
  min-width: 0; width: max-content; margin: 0; padding: 16px var(--dd-pad-x) 17px; list-style: none;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--dd-bg, var(--nav-surface)); color: var(--dd-fg, var(--forest, #1C3328)); border: 0;
  border-radius: 0; box-shadow: var(--dd-shadow, 0 2px 10px rgba(28,51,40,.05));
  -webkit-backdrop-filter: var(--dd-blur, none); backdrop-filter: var(--dd-blur, none);
  transition: background-color .4s ease, color .4s ease;
}
.n-dd-menu[hidden] { display: none; }
.n-links .n-dd-menu a {
  display: block; position: relative; color: inherit; opacity: 1;
  font-size: 14px; font-weight: 400; letter-spacing: .02em; text-transform: none;
  line-height: 1.3; text-decoration: none; white-space: nowrap;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.n-links .n-dd-menu a:hover { opacity: 1; text-decoration: underline; text-decoration-color: currentColor; }
.n-links .n-dd-menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background-color: currentColor;
}
/* Current page already has its ::after underline; never stack a text-decoration on top. */
.n-links .n-dd-menu a[aria-current="page"],
.n-links .n-dd-menu a[aria-current="page"]:hover,
.n-links .n-dd-menu a[aria-current="page"]:focus-visible { text-decoration: none; }
.n-links .n-dd-trigger:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }
.n-links .n-dd-menu a:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; text-decoration: underline; }
.n-links .n-dd-menu a[aria-current="page"]:focus-visible { text-decoration: none; }

/* ── Mobile menu panel (identical on every page) ──
   Solid ivory panel with dark forest text, so links stay readable over photo
   heroes. Values are fixed here on purpose, not inherited from the page's nav
   colour. It slides in under the 84px bar and scrolls internally on short
   screens. Hidden (transform + visibility) at every width until opened. */
.n-mobile-menu {
  --mm-bg: #F4F3EF; --mm-fg: #1C3328; --mm-rule: rgba(24,23,20,.09);
  --mm-pad: 24px; --mm-top: var(--nav-height, 84px);
  position: fixed; top: var(--mm-top); left: 0; right: 0;
  max-height: calc(100vh - var(--mm-top)); max-height: calc(100dvh - var(--mm-top));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--mm-bg); color: var(--mm-fg);
  border-bottom: 1px solid var(--mm-rule); z-index: 490;
  padding: 32px var(--mm-pad) calc(40px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 28px;
  transform: translateY(-110%); visibility: hidden; pointer-events: none;
  transition: transform .35s cubic-bezier(.16,1,.3,1), visibility 0s .35s;
}
.n-mobile-menu.open {
  transform: translateY(0); visibility: visible; pointer-events: all;
  transition: transform .35s cubic-bezier(.16,1,.3,1), visibility 0s 0s;
}
.n-mobile-menu a {
  display: flex; align-items: center; min-height: 44px; padding: 6px 0;
  font-family: 'DM Sans', Arial, sans-serif; font-size: 17px; font-weight: 400;
  letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; text-decoration: none;
  color: var(--mm-fg); border-bottom: 1px solid var(--mm-rule); position: relative;
}
.n-mobile-menu a:last-child { border-bottom: none; }
.n-mobile-menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background-color: currentColor;
}
.n-mobile-menu a:focus-visible, .n-mobile-menu .n-m-trigger:focus-visible { outline: 1.5px solid var(--mm-fg); outline-offset: 4px; }
@media (max-width: 480px) { .n-mobile-menu { --mm-pad: 20px; } }

/* ── ABOUT accordion inside the panel ── */
.n-mobile-menu .n-m-trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 44px; padding: 6px 0; margin: 0; background: none; border: 0;
  border-bottom: 1px solid var(--mm-rule); cursor: pointer; text-align: left;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 17px; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; font-weight: 400;
  color: var(--mm-fg);
}
.n-m-trigger .n-dd-chev { width: 12px; height: 7px; }
.n-m-trigger[aria-expanded="true"] .n-dd-chev { transform: rotate(180deg); }
.n-m-trigger.is-current > span { position: relative; }
.n-m-trigger.is-current > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; }
.n-m-sub { display: flex; flex-direction: column; padding-left: 18px; }
.n-m-sub[hidden] { display: none; }
.n-mobile-menu .n-m-sub a { font-size: 15px; }