/* The site's side navigation, shared by every page. Two levels: the pages, and under the page you are on, its
   numbered chapters, which unfold when you arrive and fold from the page's name. On narrow screens the side bar becomes a top bar, and the same list opens from a menu button.
   The nav markup is written into each page by tools/nav.py; colours and fonts come from each page's own tokens. */
.nav { display: flex; flex-direction: column; }
.nav a { display: flex; gap: 10px; align-items: baseline; text-decoration: none; opacity: 0.45; transition: opacity 120ms; }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="true"], .nav a[aria-current="page"] { opacity: 1; }
.nav .page { font: 400 15px/30px var(--sans); }
.nav button.page { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
.nav button.page::after { content: ""; width: 5px; height: 5px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.5; transition: transform 200ms, margin 200ms; }
.nav button.page[aria-expanded="false"]::after { transform: rotate(-45deg); margin-top: 0; }
.nav .chapters { display: grid; grid-template-rows: 1fr; margin: 2px 0 12px; transition: grid-template-rows 280ms ease, margin 280ms ease, opacity 220ms ease; }
.nav .chapters > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.nav .chapters[data-shut] { grid-template-rows: 0fr; margin: 0; opacity: 0; }
@media (scripting: none) { .nav .chapters[data-shut] { grid-template-rows: 1fr; margin: 2px 0 12px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nav .chapters, .nav button.page::after { transition: none; } }
.nav .chapters a { font: 400 14px/26px var(--sans); }
.nav .chapters a span { width: 18px; flex: none; font: 400 11px/26px var(--mono); }
.menu-btn { display: none; }

@media (max-width: 960px) {
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: 400 15px/26px var(--sans); text-align: left; }
  .menu-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-btn::after { content: ""; flex: none; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.6; transition: transform 120ms; }
  .side.open .menu-btn::after { transform: rotate(225deg); margin-top: 3px; }
  .side .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - 56px); overflow-y: auto; flex-direction: column; gap: 0; padding-block: 8px 20px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); background: var(--bg); border-bottom: 1px solid var(--rule); }
  .side.open .nav { display: flex; }
  .side .nav a { flex: none; }
  .nav .page { font-size: 17px; line-height: 40px; }
  .nav .chapters a { font-size: 15px; line-height: 34px; }
  .nav .chapters a span { line-height: 34px; }
}

/* Status labels, shared by every page: a small square in the label's colour and a quiet mono word, sized to the
   word. In a grid row they sit at the start of their cell instead of stretching across it. */
.tag { --tone: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: auto; padding: 0; background: none; white-space: nowrap; color: var(--ink-2); font: 400 11px/16px var(--mono); letter-spacing: 0.02em; }
.tag::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--tone); }
.tag.go { --tone: var(--signal); } .tag.warn { --tone: var(--haze); } .tag.no { --tone: var(--warn); } .tag.story { --tone: var(--pos); }

/* The corner logo, shared by every page: DEAD CUTE flat (brand/dead-cute.svg), with a light hologram on top, a pink and
   mint colour split and scanlines masked to the logo's own shape, and a rare flicker. 160 px wide in the side bar, 58 px
   in the top bar on narrow screens. */
.wordmark.logo { position: relative; display: block; width: 160px; line-height: 0; }
.wordmark.logo img { display: block; width: 100%; height: auto; filter: drop-shadow(1px 0 0 rgba(255, 70, 150, 0.55)) drop-shadow(-1px 0 0 rgba(70, 255, 225, 0.55)); }
.wordmark.logo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px);
  -webkit-mask: url(brand/dead-cute.svg?v=2) center / contain no-repeat; mask: url(brand/dead-cute.svg?v=2) center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) { .wordmark.logo img { animation: logo-flicker 7s steps(1) infinite; } }
@keyframes logo-flicker { 0%, 95%, 100% { opacity: 1; } 96% { opacity: 0.82; } 97% { opacity: 1; } 98% { opacity: 0.9; } }
@media (max-width: 960px) { .wordmark.logo { width: 58px; } }

/* References, shared by every page: sources grouped under subheads, one per ruled row, in the body style (the same
   20px Book as every paragraph and list), with the subheads at the pages' usual 24px. */
.refs h3 { margin: 40px 0 6px; font: 350 24px/1.1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.refs h2 + h3 { margin-top: 0; }
.refs ul { list-style: none; max-width: 680px; padding: 0; margin: 0 0 16px; }
.refs li { padding: 12px 0; margin: 0; border-bottom: 1px solid var(--rule); font: 350 20px/1.2 var(--sans); letter-spacing: 0.01em; color: var(--ink-body); }
.refs li b { font-weight: 500; color: var(--ink); }