/* Site menu (Oct 2026): Clay-style bar with hover mega panels. Markup from functions/_middleware.js. */
header.site-header.mn-host { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 75; background: transparent !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); font-family: 'Sora', system-ui, sans-serif; }
.mn { --mn-ink: #1F3D3B; --mn-muted: #5A6B6F; --mn-dim: #9AA6A3; --mn-teal: #0B6B70; --mn-bg: #fff; --mn-line: #E2E6E1; --mn-hover: #F2F4F1; --mn-soft: #EEF1EC; --mn-card: #F6F7F4; position: relative; max-width: 1240px; margin: 0 auto; }
html[data-theme="dark"] .mn { --mn-ink: #e7f1f0; --mn-muted: #98aeac; --mn-dim: #5f7472; --mn-teal: #3fd0d6; --mn-bg: #15201f; --mn-line: #2a3a39; --mn-hover: #1d2b2a; --mn-soft: #1d2b2a; --mn-card: #101c1b; }
.mn__bar { position: relative; background: var(--mn-bg); border: 1px solid var(--mn-line); border-radius: 18px; box-shadow: 0 8px 24px rgba(20,50,50,.06); transition: border-radius .25s cubic-bezier(.165,.84,.44,1), box-shadow .25s ease; }
.mn.is-open .mn__bar { border-radius: 18px 18px 0 0; box-shadow: 0 24px 50px rgba(20,50,50,.12); }
.mn__row { display: flex; align-items: center; gap: 6px; height: 58px; padding: 0 10px 0 18px; }
.mn__brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; margin-right: 14px; white-space: nowrap; }
.mn__brand b { color: var(--mn-ink); font-size: 16px; font-weight: 700; }
.mn__brand span { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: var(--mn-muted); }
.mn__items { display: flex; align-items: center; gap: 2px; flex: 1; }
.mn__it { border: 0; background: transparent; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--mn-ink); padding: 9px 12px; border-radius: 10px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .25s cubic-bezier(.075,.82,.165,1), color .2s ease; }
.mn__it:hover { background: var(--mn-hover); color: var(--mn-ink); }
.mn.is-open .mn__it { color: var(--mn-dim); }
.mn.is-open .mn__it.is-on { color: var(--mn-ink); }
.mn__it[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--mn-teal); border-radius: 10px 10px 4px 4px; }
.mn__it:focus-visible, .mn__btn:focus-visible, .mn__burger:focus-visible { outline: 2px solid var(--mn-teal); outline-offset: 2px; }
.mn__right { display: flex; align-items: center; gap: 8px; }
.mn__right .theme-toggle { order: -1; margin: 0; width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent; color: var(--mn-ink); display: grid; place-items: center; cursor: pointer; }
.mn__right .theme-toggle:hover { background: var(--mn-hover); }
.mn__right .theme-toggle svg { width: 18px; height: 18px; }
.mn__btn { font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 12px; text-decoration: none; white-space: nowrap; transition: background-color .3s cubic-bezier(.075,.82,.165,1); }
.mn__btn--soft { background: var(--mn-soft); color: var(--mn-ink); }
.mn__btn--soft:hover { background: var(--mn-hover); color: var(--mn-ink); }
.mn__btn--teal { background: #0B6B70; color: #fff; }
.mn__btn--teal:hover { background: #095A5E; color: #fff; }
.mn__burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--mn-soft); color: var(--mn-ink); cursor: pointer; }
.mn__burger svg { width: 18px; height: 18px; }

.mn__panel { position: absolute; left: -1px; right: -1px; top: 100%; background: var(--mn-bg); border: 1px solid var(--mn-line); border-top: 0; border-radius: 0 0 18px 18px; overflow: hidden; height: 0; opacity: 0; visibility: hidden; transition: height .35s cubic-bezier(.165,.84,.44,1), opacity .2s ease, visibility 0s linear .35s; box-shadow: 0 30px 50px rgba(20,50,50,.12); }
.mn.is-open .mn__panel { opacity: 1; visibility: visible; transition: height .35s cubic-bezier(.165,.84,.44,1), opacity .2s ease; }
.mn__pane { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 290px; gap: 8px 20px; padding: 18px 18px 20px 26px; opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden; transition: opacity .22s ease, transform .3s cubic-bezier(.165,.84,.44,1), visibility 0s linear .3s; }
.mn__pane.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .22s ease .05s, transform .3s cubic-bezier(.165,.84,.44,1) .05s; }
.mn__col h6 { margin: 6px 0 10px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mn-dim); font-weight: 600; }
.mn__col a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin-left: -8px; border-radius: 10px; color: var(--mn-ink); text-decoration: none; font-size: 14px; font-weight: 500; transition: background-color .25s cubic-bezier(.075,.82,.165,1); }
.mn__col a:hover { background: var(--mn-hover); color: var(--mn-ink); }
.mn__col a small { display: block; font-size: 12px; color: var(--mn-muted); font-weight: 400; }
.mn__ic { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--c); color: #1F3D3B; display: grid; place-items: center; transition: transform .3s cubic-bezier(.215,.61,.355,1); }
.mn__ic svg { width: 15px; height: 15px; }
.mn__col a:hover .mn__ic { transform: scale(1.08); }
.mn__feat { grid-row: span 2; background: var(--mn-card); border-radius: 14px; padding: 10px; text-decoration: none; color: var(--mn-ink); display: flex; flex-direction: column; gap: 8px; }
.mn__feat:hover { color: var(--mn-ink); }
.mn__feat img, .mn__feat video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; display: block; background: var(--mn-hover); }
.mn__feat small { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mn-teal); }
.mn__feat b { font-size: 14.5px; font-weight: 600; line-height: 1.35; }

/* phones and small tablets: burger + simple list */
.mn__mobile { display: none; }
@media (max-width: 980px) {
  .mn__items, .mn__btn--soft, .mn__panel { display: none; }
  .mn__burger { display: grid; place-items: center; }
  .mn__btn--teal { padding: 9px 13px; }
  .mn__mobile { position: absolute; left: -1px; right: -1px; top: calc(100% - 1px); background: var(--mn-bg); border: 1px solid var(--mn-line); border-top: 0; border-radius: 0 0 18px 18px; box-shadow: 0 24px 40px rgba(20,50,50,.14); padding: 6px 18px 18px; max-height: calc(100vh - 90px); overflow-y: auto; }
  .mn.is-mobile .mn__mobile { display: block; }
  .mn.is-mobile .mn__bar { border-radius: 18px 18px 0 0; }
  .mn__mobile h6 { margin: 14px 0 6px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mn-dim); }
  .mn__mobile a { display: block; padding: 9px 0; color: var(--mn-ink); text-decoration: none; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--mn-line); }
  .mn__mobile a[aria-current="page"] { color: var(--mn-teal); }
}
@media (max-width: 520px) { .mn__brand span { display: none; } .mn__row { padding-left: 14px; } }
@media (prefers-reduced-motion: reduce) { .mn__panel, .mn__pane, .mn__bar, .mn__ic, .mn__it { transition: none; } }
/* links centred in the bar: brand | links | buttons */
@media (min-width: 981px) {
  .mn__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .mn__items { flex: none; justify-self: center; }
  .mn__right { justify-self: end; }
  .mn__brand { justify-self: start; margin-right: 0; }
}
@media (min-width: 981px) and (max-width: 1180px) { .mn__brand span { display: none; } .mn__it { padding: 9px 9px; } }
/* The right group also carries .site-header-inner (theme.js puts the dark-mode toggle there); undo old page styles for that class. */
.mn .mn__right.site-header-inner { padding: 0 !important; margin: 0 !important; max-width: none !important; width: auto !important; height: auto !important; min-height: 0 !important; border: 0 !important; background: none !important; gap: 8px !important; justify-content: flex-end !important; }
.mn__row { height: 60px; padding: 0 10px 0 18px; }
.mn__btn, .mn__right .theme-toggle { height: 40px; display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; line-height: 1; box-sizing: border-box; }
.mn__pane > .mn__feat { grid-column: -2 / -1; grid-row: 1 / span 2; }
.mn__col--plain { padding-top: 6px; }
@media (max-width: 980px) {
  .mn .mn__right .mn__btn--soft { display: none !important; }
  .mn__row { padding-right: 8px; }
  .mn .mn__right.site-header-inner { gap: 6px !important; flex-shrink: 0; }
  .mn__brand { min-width: 0; overflow: hidden; }
  .mn__brand b { white-space: nowrap; }
}
@media (max-width: 360px) { .mn__right .theme-toggle { display: none !important; } }

/* Compact dropdown (Oct 31): a floating card under the hovered item, sized to its links. */
@media (min-width: 981px) {
  .mn.is-open .mn__bar { border-radius: 18px; box-shadow: 0 8px 24px rgba(20,50,50,.06); }
  .mn__panel { left: var(--mn-x, 0px); right: auto; width: var(--mn-w, 300px); top: calc(100% + 8px); border: 1px solid var(--mn-line); border-radius: 16px; box-shadow: 0 24px 50px rgba(20,50,50,.14); transition: height .3s cubic-bezier(.165,.84,.44,1), width .3s cubic-bezier(.165,.84,.44,1), left .3s cubic-bezier(.165,.84,.44,1), opacity .2s ease, visibility 0s linear .3s; }
  .mn.is-open .mn__panel { transition: height .3s cubic-bezier(.165,.84,.44,1), width .3s cubic-bezier(.165,.84,.44,1), left .3s cubic-bezier(.165,.84,.44,1), opacity .2s ease; }
  .mn__pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 210px); gap: 4px 18px; right: 0; width: auto; padding: 12px 12px 12px 16px; align-items: start; }
  .mn__col { min-width: 0; }
  .mn__col h6 { margin: 4px 0 4px; }
  .mn__col a { padding: 6px 8px; font-size: 14px; white-space: nowrap; gap: 9px; overflow: hidden; }
  .mn__col a > span { overflow: hidden; text-overflow: ellipsis; }
  .mn__col a em { font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--mn-dim); margin-left: 3px; }
  .mn__ic { width: 24px; height: 24px; border-radius: 7px; }
  .mn__ic svg { width: 13px; height: 13px; }
}
@media (min-width: 981px) and (max-width: 1240px) { .mn__col a em { display: none; } .mn__col a { font-size: 13.5px; } }
@media (min-width: 981px) {
  .mn__pane > .mn__feat { grid-column: auto; grid-row: auto; padding: 8px; border-radius: 12px; gap: 6px; }
  .mn__feat small { font-size: 10px; }
  .mn__feat b { font-size: 13.5px; }
  .mn__col h6 + a { margin-top: 0; }
  .mn__col a + h6 { margin-top: 10px; }
}