/* Site header: the black "Split" bar and its dossier menu, shared by every page.
   Red Menu square on the left, ASIA APOSTOL, the page you are on in big type on the right.
   Menu drops the dossier: the name plate (red, like the front of the professional business card) on the left,
   the five places on the right. On phones the five places come first.
   The faded HELLO is a CSS ::before, so it is decoration, not page text.
   Contrast (WCAG 2.0 AA, as AODA requires): cream on ink 16.6:1, cream on red #AE2D23 5.9:1, MENU label on
   #C6352A 4.8:1, page number #E0705F on ink 5.8:1, hints #57514A on cream 7.1:1. Focus rings 3:1 or more.
   Self-contained colours so it works on pages with and without tokens.css. */
.nb, .nb-menu {
  --nb-ink: #161413; --nb-ink-3: #24211F; --nb-ink-line: #3A3633; --nb-cream: #F7F3EB; --nb-mute: #57514A; --nb-on-ink-mute: #A8A197;
  --nb-red: #AE2D23; --nb-red-brand: #C6352A; --nb-red-light: #E0705F; --nb-red-ghost: #9C281F;
  --nb-sign: "Anton", Impact, sans-serif; --nb-mono: "DM Mono", ui-monospace, monospace;
  --nb-ease: cubic-bezier(0.23, 1, 0.32, 1); --nb-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --nb-h: 72px;
}
@media (max-width: 700px) { .nb, .nb-menu { --nb-h: 60px; } }

.nb { position: sticky; top: 0; z-index: 120; flex: none; display: flex; align-items: center; gap: 20px; height: var(--nb-h); padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 0; background: var(--nb-ink); color: var(--nb-cream); border-bottom: 1px solid var(--nb-ink-line); }
.nb * { box-sizing: border-box; }
.nb__menu { display: grid; place-items: center; align-content: center; gap: 5px; width: var(--nb-h); height: var(--nb-h); flex: none; margin: 0; padding: 0; border: 0; background: var(--nb-red-brand); color: var(--nb-cream); font: inherit; cursor: pointer; transition: background-color 200ms var(--nb-ease); }
.nb__menu:hover, .nb__menu[aria-expanded="true"] { background: var(--nb-red); }
.nb__menu:active .nb__burger { transform: scale(.94); }
.nb__menu:focus-visible { outline: 3px solid var(--nb-cream); outline-offset: -6px; }
.nb__label { font-family: var(--nb-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.nb__burger { display: inline-grid; gap: 5px; width: 20px; transition: transform 140ms var(--nb-ease); }
.nb__burger i { display: block; height: 2px; background: currentColor; transition: transform 250ms var(--nb-ease), opacity 150ms; }
.nb__menu[aria-expanded="true"] .nb__burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nb__menu[aria-expanded="true"] .nb__burger i:nth-child(2) { opacity: 0; }
.nb__menu[aria-expanded="true"] .nb__burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nb__name { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--nb-sign); font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--nb-cream); text-decoration: none; white-space: nowrap; }
.nb__name:focus-visible, .nb-menu a:focus-visible { outline: 2px solid var(--nb-red-light); outline-offset: 3px; }
.nb-plate a:focus-visible { outline-color: var(--nb-cream); }
.nb-words a:focus-visible { outline-color: var(--nb-red); }
.nb__pg { display: flex; align-items: baseline; gap: 12px; margin: 0 0 0 auto; color: var(--nb-cream); }
.nb__pg small { font-family: var(--nb-mono); font-size: 13px; color: var(--nb-red-light); }
.nb__pg b { font-family: var(--nb-sign); font-weight: 400; font-size: 44px; line-height: 1; text-transform: uppercase; }
@media (max-width: 700px) {
  .nb { gap: 12px; padding-right: max(14px, env(safe-area-inset-right, 0px)); }
  .nb__name { font-size: 22px; }
  .nb__pg small { display: none; }
  .nb__pg b { font-size: 26px; }
}

/* the dossier */
.nb-dim { position: fixed; inset: var(--nb-h, 72px) 0 0; z-index: 118; background: rgba(22, 20, 19, .35); opacity: 0; pointer-events: none; transition: opacity 300ms var(--nb-ease); }
html[data-nb-open] .nb-dim { opacity: 1; pointer-events: auto; }
.nb-menu { position: fixed; top: var(--nb-h); left: 0; right: 0; z-index: 119; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-height: calc(100vh - var(--nb-h)); max-height: calc(100dvh - var(--nb-h)); overflow: auto; overscroll-behavior: contain; background: var(--nb-cream); color: var(--nb-ink); border-bottom: 3px solid var(--nb-ink); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 380ms var(--nb-drawer), visibility 0s 380ms; }
html[data-nb-open] .nb-menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 380ms var(--nb-drawer), visibility 0s; }
.nb-menu * { box-sizing: border-box; }
.nb-plate { position: relative; overflow: hidden; background: var(--nb-red); color: var(--nb-cream); padding: 28px 36px 30px 28px; }
.nb-plate::before { content: "HELLO"; position: absolute; left: -8px; bottom: -70px; margin: 0; font-family: var(--nb-sign); font-size: 330px; line-height: 1; color: var(--nb-red-ghost); text-transform: uppercase; pointer-events: none; user-select: none; }
.nb-plate > * { position: relative; }
.nb-plate__name { display: inline-block; margin: 0; padding: 6px 16px 4px; background: var(--nb-ink); font-family: var(--nb-sign); font-size: 52px; line-height: 1; text-transform: uppercase; color: var(--nb-cream); }
.nb-plate__role { display: block; width: max-content; max-width: 100%; margin: 0 0 0 18px; padding: 4px 12px; background: var(--nb-cream); color: var(--nb-ink); font-family: var(--nb-mono); font-size: 13px; letter-spacing: .06em; }
.nb-plate__quip { margin: 22px 0 0; max-width: 44ch; font-family: var(--nb-mono); font-weight: 500; font-size: 15px; line-height: 1.55; }
.nb-plate hr { height: 0; border: 0; border-top: 1.5px dashed rgba(247, 243, 235, .7); margin: 22px 0 16px; }
.nb-plate ul { list-style: none; margin: 0; padding: 0; font-family: var(--nb-mono); font-size: 15px; line-height: 2; }
.nb-plate ul a { color: var(--nb-cream); text-decoration: none; }
.nb-plate ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nb-plate ul i { display: inline-block; width: 28px; font-style: normal; color: var(--nb-cream); }
.nb-words { list-style: none; margin: 0; padding: 18px 28px 26px 36px; }
.nb-words li { border-bottom: 1.5px dashed var(--nb-ink); }
.nb-words a { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding: 8px 0 6px; color: var(--nb-ink); text-decoration: none; transition: color 200ms var(--nb-ease), padding-left 250ms var(--nb-ease); }
.nb-words__w { font-family: var(--nb-sign); font-size: 70px; line-height: 1; text-transform: uppercase; }
.nb-words small { font-family: var(--nb-mono); font-size: 13px; color: var(--nb-mute); text-align: right; }
@media (hover: hover) and (pointer: fine) { .nb-words a:hover { color: var(--nb-red); padding-left: 8px; } }
.nb-here { display: block; width: max-content; margin: 4px 0 0; line-height: 1.5; padding: 2px 8px; background: var(--nb-red); color: var(--nb-cream); font-family: var(--nb-mono); font-size: 12px; letter-spacing: .06em; vertical-align: middle; }
.nb-words li, .nb-plate > * { opacity: 0; transform: translateY(-8px); transition: opacity 240ms var(--nb-ease), transform 320ms var(--nb-ease); }
html[data-nb-open] .nb-words li, html[data-nb-open] .nb-plate > * { opacity: 1; transform: none; }
html[data-nb-open] .nb-words li:nth-child(2) { transition-delay: 40ms; } html[data-nb-open] .nb-words li:nth-child(3) { transition-delay: 80ms; } html[data-nb-open] .nb-words li:nth-child(4) { transition-delay: 120ms; } html[data-nb-open] .nb-words li:nth-child(5) { transition-delay: 160ms; }
@media (max-width: 860px) {
  .nb-menu { grid-template-columns: minmax(0, 1fr); bottom: 0; border-bottom: 0; }
  .nb-words { order: -1; padding: 8px 16px 12px; }
  .nb-words a { padding: 6px 0 4px; }
  .nb-words__w { font-size: 44px; }
  .nb-words a { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .nb-words__w { white-space: nowrap; }
  .nb-words small { font-size: 12px; line-height: 1.3; }
  .nb-here { font-size: 12px; padding: 1px 6px; margin-top: 2px; }
  .nb-plate { padding: 20px 16px 24px; }
  .nb-plate__name { font-size: 34px; padding: 4px 10px 2px; }
  .nb-plate__role { font-size: 12px; margin-left: 10px; padding: 3px 8px; }
  .nb-plate__quip { font-size: 13px; margin-top: 14px; }
  .nb-plate hr { margin: 14px 0 10px; }
  .nb-plate ul { font-size: 13px; line-height: 2.2; }
  .nb-plate::before { font-size: 200px; bottom: -44px; }
}
html[data-nb-open], html[data-nb-open] body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .nb *, .nb-menu, .nb-menu *, .nb-dim { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* Landing page: the bar floats over the horizon art (fixed, no page scroll) and sits under the red portal
   that carries visitors into the comic, so it is never seen during the comic sequence. The page name is
   replaced by the sound toggle. */
.nb--landing { position: fixed; left: 0; right: 0; z-index: 30; }
.nb--landing ~ .nb-menu { z-index: 29; } .nb--landing ~ .nb-dim { z-index: 28; }
.nb__sound { margin-left: auto; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--nb-cream); font: 500 12px var(--nb-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.nb__sound b { font-weight: 500; color: var(--nb-on-ink-mute); }
.nb__sound[aria-pressed="true"] b { color: var(--nb-red-light); }
@media (hover: hover) and (pointer: fine) { .nb__sound:hover { border-bottom-color: var(--nb-cream); } }
.nb__sound:focus-visible { outline: 2px solid var(--nb-red-light); outline-offset: 3px; }
body:has(.scene[data-stage="leaving"]) .nb--landing { opacity: 0; pointer-events: none; transition: opacity 200ms var(--nb-ease); }
@media (max-width: 700px) { body:has(.nb--landing) .wm { top: calc(60px + 5vh); } }