/* HN12 public navigation and footer.
   Sub-pages: a top bar with the logo on the left, the Program dropdown in the centre, Sign in and Apply on the right.
   Home page: no top bar. The dropdown, Apply and Sign in sit in the hero (see .home-nav). */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #0d0d0d; color: #f5f5f3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem;
  padding: 0.85rem 3rem;
  font-family: 'DM Mono', monospace;
}
.site-nav a, .site-nav button, .home-nav a, .home-nav button { font-family: 'DM Mono', monospace; color: inherit; }
.sn-left { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.sn-brand { display: block; line-height: 0; text-decoration: none; }
/* HN¹² as lettering, no frame, in the bold grotesque of the boxed mark on the home page */
.sn-word { display: block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: calc(var(--box) * 0.82); line-height: 1; letter-spacing: -0.01em; color: #f5f5f3; white-space: nowrap; }
/* the boxed HN¹² logo (cropped copy of the home page mark, the "12" hangs off the top right) */
.sn-logo { display: block; height: calc(var(--mark) * 1.05); width: auto; }
.sn-word sup { font-family: inherit; font-weight: 700; font-size: 0.45em; line-height: 0; vertical-align: 0.95em; margin-left: 0.06em; }
.sn-panel { display: contents; }
.sn-right { display: flex; align-items: center; justify-content: flex-end; gap: 2.5rem; }
.sn-link {
  font-size: 0.82rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none;
  background: none; border: 0; padding: 0.4rem 0; cursor: pointer; white-space: nowrap; color: rgba(245,245,243,0.9);
}
.sn-link:hover, .sn-link[aria-current="page"] { color: #f5f5f3; }
.sn-apply {
  background: none; border: 1px solid #f5f5f3; color: #f5f5f3 !important; padding: 0.5rem 1.5rem; text-decoration: none; white-space: nowrap;
  font-size: 0.82rem; letter-spacing: 0.15em; text-transform: uppercase; display: inline-block;
}
.sn-drop { position: relative; justify-self: center; }
.sn-drop-btn::after { content: ''; display: inline-block; margin-left: 0.55rem; width: 0.38rem; height: 0.38rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-0.2rem) rotate(45deg); transition: transform 0.2s; }
.sn-drop.open .sn-drop-btn::after { transform: translateY(0) rotate(225deg); }
.sn-sub {
  list-style: none; margin: 0; padding: 0.6rem 0; position: absolute; top: calc(100% + 0.9rem); left: 50%; transform: translateX(-50%); min-width: 13rem;
  background: #0d0d0d; border: 1px solid rgba(245,245,243,0.16); display: none; text-align: left; z-index: 5;
}
.sn-drop.open .sn-sub { display: block; }
.sn-sub a {
  display: block; padding: 0.6rem 1.4rem; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; color: rgba(245,245,243,0.8);
}
.sn-sub a:hover, .sn-sub a[aria-current="page"] { color: #f5f5f3; background: rgba(245,245,243,0.07); }
.sn-menu { display: none; }
.site-nav a:focus-visible, .site-nav button:focus-visible, .home-nav a:focus-visible, .home-nav button:focus-visible { outline: 2px solid #f5f5f3; outline-offset: 3px; }
/* The dropdown opens on click only (assets/js/site.js), never on hover. */

/* ── HOME PAGE: no top bar. Program (left), Apply (centre), Sign in (right) under the logo ── */
.home-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem;
  color: #f5f5f3; margin-top: 2rem; width: min(100%, 44rem);
}
.home-nav .sn-drop { justify-self: end; display: flex; align-items: center; }
.home-nav .home-signin { justify-self: start; }
/* Program and Sign in: same box, same baseline, same distance from Apply, no arrow on Program */
.home-nav .sn-link { display: inline-flex; align-items: center; height: 2.2rem; padding: 0; line-height: 1; }
.home-nav .sn-drop-btn::after { display: none; }
.home-nav .sn-sub { left: 0; transform: none; }

/* --box: the height of the links on the right and of the phone Menu button; the lettering is sized from it. */
.site-nav { --mark: 2.6rem; --box: calc(var(--mark) * 0.818); }
@media (min-width: 821px) {
  /* Sign in and Apply as plain words, no boxes, in the style of the Program menu */
  .site-nav .sn-right { gap: 2rem; }
  .site-nav .sn-right .sn-link, .site-nav .sn-right .sn-apply {
    height: var(--box); display: inline-flex; align-items: center; padding: 0; line-height: 1; font-size: 0.82rem; letter-spacing: 0.15em;
  }
  /* Apply alone keeps a box: a thin white frame, not filled */
  .site-nav .sn-right .sn-apply { box-sizing: border-box; font-weight: 400; padding: 0 1.1rem; }
  .sn-apply:hover { background: rgba(245,245,243,0.08); }
}

@media (max-width: 820px) {
  .site-nav { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0.7rem 1.25rem; gap: 0; }
  .site-nav { --mark: 2.1rem; }
  .sn-menu {
    display: inline-block; background: none; border: 1px solid rgba(245,245,243,0.4); cursor: pointer;
    font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0 0.9rem; height: var(--box); box-sizing: border-box; line-height: 1; align-self: center;
  }
  .site-nav .sn-panel {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch;
    margin-top: 1rem; padding: 0.25rem 0 0.75rem; border-top: 1px solid rgba(245,245,243,0.14);
    max-height: calc(100vh - 5rem); overflow-y: auto;
  }
  .site-nav.open .sn-panel { display: flex; }
  .site-nav .sn-panel .sn-drop { justify-self: auto; }
  /* in the phone menu every page is listed, so the label that names the current page is not needed */
  .site-nav .sn-panel .sn-drop-btn { display: none; }
  .site-nav .sn-panel .sn-sub { display: block; position: static; transform: none; border: 0; padding: 0; min-width: 0; }
  .site-nav .sn-panel .sn-sub a { padding: 0.7rem 0; font-size: 0.8rem; color: rgba(245,245,243,0.9); }
  .site-nav .sn-panel .sn-sub a:hover, .site-nav .sn-panel .sn-sub a[aria-current="page"] { background: none; }
  .site-nav .sn-right { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid rgba(245,245,243,0.14); margin-top: 0.5rem; }
  .site-nav .sn-right .sn-link { display: block; font-size: 0.8rem; padding: 0.85rem 0; }
  .site-nav .sn-panel .sn-apply { display: block; text-align: center; margin-top: 0.4rem; padding: 0.85rem 1rem; }

  .home-nav { gap: 1rem; margin-top: 1.5rem; }
  .home-nav .sn-link { font-size: 0.66rem; letter-spacing: 0.12em; }
  .home-nav .sn-apply { font-size: 0.66rem; padding: 0.6rem 1.2rem; }
  .home-nav .sn-sub { min-width: 11rem; }
}

/* ── FOOTER ── */
.site-footer {
  border-top: 1px solid rgba(13,13,13,0.14); padding: 1.25rem 3rem; background: #f5f5f3; color: #0d0d0d;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem;
  font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2.5rem; list-style: none; margin: 0; padding: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; }
.site-footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.125rem; color: inherit; text-decoration: none; opacity: 0.75; }
.site-footer-links a:hover, .site-footer-links a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.site-footer-links a:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 4px; }
.site-footer-note { opacity: 0.5; }
@media (max-width: 820px) {
  .site-footer { padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .site-footer-links { gap: 0.5rem 2rem; }
}

/* ── PUBLIC SUB-PAGES: CENTRED (26 Oct 2026) ──
   This file loads only on public pages, so these rules never reach the members area.
   Titles and the line under them are centred, and so are the scout and team cards;
   forms and the FAQ question rows stay flush left so they read easily. */
body .page-head { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
body .page-head .page-lede { margin-left: auto; margin-right: auto; }
body .people-grid:not(.people-grid--wide) .profile-body { text-align: center; align-items: center; }
body .team-card .profile-body { text-align: center; align-items: center; }

/* ── THE MENUS, CENTRED ── */
.sn-sub a { text-align: center; }
@media (max-width: 820px) {
  .site-nav .sn-panel .sn-sub a, .site-nav .sn-right .sn-link { text-align: center; }
}

/* ── THE MENU AS A FULL-SCREEN CURTAIN (27 Oct 2026) ──
   Program (and Menu on phones) opens one black screen built by site.js: the five student pages in
   large thin letters, a short rule, then HN¹² Ventures and Partner with us in small capitals.
   The small dropdown boxes in the page markup stay closed while this is in use. */
html.sno-open, html.sno-open body { overflow: hidden; }
.sn-overlay {
  position: fixed; inset: 0; z-index: 1000; background: #0d0d0d; color: #f5f5f3;
  display: flex; flex-direction: column; opacity: 0; visibility: hidden; overflow: hidden;
  overscroll-behavior: none; touch-action: none;                 /* it never scrolls, and the page behind stays put */
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.sn-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.35s ease, visibility 0s; }
.sno-top {
  display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 0.85rem) 3rem 0.85rem;
}
.sno-logo { display: block; line-height: 0; }
.sno-logo img { display: block; height: 2.7rem; width: auto; }
.sno-close {
  background: none; border: 0; padding: 0.4rem 0; cursor: pointer; color: rgba(245,245,243,0.9);
  font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.sno-close:hover { color: #f5f5f3; }
.sno-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.6rem, 4.5vh, 2.8rem); padding: 1rem 1.5rem 4rem; overflow: hidden; }
.sno-main, .sno-more { list-style: none; margin: 0; padding: 0; text-align: center; }
.sno-main a {
  display: inline-block; padding: 0.08em 0; text-decoration: none; color: rgba(245,245,243,0.5);
  font-family: 'Inter Tight', sans-serif; font-weight: 200; font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1.12; letter-spacing: -0.035em;
  transition: color 0.25s;
}
.sno-main a:hover, .sno-main a:focus-visible, .sno-main a[aria-current="page"] { color: #f5f5f3; }
.sno-rule { display: block; width: 2.5rem; height: 1px; background: rgba(245,245,243,0.35); }
.sno-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 3rem; }
.sno-more a {
  text-decoration: none; color: rgba(245,245,243,0.5);
  font-family: 'Inter Tight', sans-serif; font-weight: 200; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.2; letter-spacing: -0.025em; transition: color 0.25s;
}
/* HN¹² as in the logo: a small raised 12 that does not push the line apart */
.sno-more sup { font-size: 0.5em; line-height: 0; vertical-align: 0.85em; margin-left: 0.04em; letter-spacing: 0; }
.sno-more a:hover, .sno-more a:focus-visible, .sno-more a[aria-current="page"] { color: #f5f5f3; }
.sn-overlay a:focus-visible, .sno-close:focus-visible { outline: 2px solid #f5f5f3; outline-offset: 4px; }
/* Apply: small, at the bottom, only on phones */
.sno-foot { display: none; }
/* the entries rise into place one after another */
.sno-main li, .sno-rule, .sno-more { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2,.7,.2,1); }
.sn-overlay.open .sno-main li, .sn-overlay.open .sno-rule, .sn-overlay.open .sno-more { opacity: 1; transform: none; transition-delay: calc(0.08s + var(--k, 0) * 0.055s); }
@media (prefers-reduced-motion: reduce) {
  .sn-overlay, .sno-main li, .sno-rule, .sno-more { transition: none !important; transform: none !important; }
}
@media (max-width: 820px) {
  .sno-top { padding: calc(env(safe-area-inset-top, 0px) + 0.7rem) 1.25rem 0.7rem; }
  .sno-logo img { height: 2.2rem; }
  .sno-more { flex-direction: column; align-items: center; gap: 0.35rem; }
  /* everything fits on one screen, also on short phones: the sizes follow the screen height */
  .sno-body { gap: min(1.6rem, 3.2svh); padding: 0.5rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 3.5rem); }
  .sno-main a { font-size: min(2.6rem, 11vw, 6.2svh); }
  .sno-more a { font-size: min(1.45rem, 6vw, 3.4svh); }
  .sno-foot { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex: 0 0 auto; padding: 0 1.25rem calc(env(safe-area-inset-bottom, 0px) + min(2rem, 4svh)); }
  .sno-foot .sno-signin { color: #f5f5f3; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; }
  .sno-foot .sno-apply {
    border: 1px solid #f5f5f3; color: #f5f5f3; text-decoration: none; padding: 0.5rem 1.2rem;
    font-family: 'DM Mono', monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  }
  .sno-body { padding-bottom: 1rem; }
  /* the old drop-down panel of the phone top bar is no longer used */
  .site-nav.open .sn-panel { display: none; }
}

/* Shared native visibility/focus rules for the public landing pages. */
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }