/* ═══════════════════════════════════════════════════════════════════════════
   Site shell — the chrome every page shares: nav, progress chip, footer, and
   the layout primitives pages compose with.

   Tokens and component classes live in nocturne.css and are never redefined
   here. Per-page composition lives in home.css / story.css / reader.css /
   archive.css.
   ═══════════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

/* Images carry `width`/`height` attributes so the browser can reserve their
   space before they load. Those attributes are also a USED height unless CSS
   says otherwise, so a rule like `width: 100%` without this line renders the
   cover at a literal 1537px tall: stretched, and shoving everything beside it
   half a page down. With `height: auto` the attributes go back to being what
   they are meant to be, an aspect ratio, and the reserved space is still
   correct. */
img { height: auto; }

/* `hidden` must actually hide.
   The UA stylesheet's `[hidden] { display: none }` loses to any author rule
   that sets `display` on the same element, and this site sets `display:flex`
   on a lot of containers that toggle. The reader's end card shipped with both
   its states painted at once for exactly this reason: the block carried
   `hidden`, and an id-level `display:flex` outranked it. Pages toggle state by
   setting `.hidden = true`, so this line is what makes that mean anything. */
[hidden] { display: none !important; }

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Numerals in interface text line up in columns. Book prose is exempt. */
.tabular { font-variant-numeric: tabular-nums; }

/* — skip link — */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 8px 14px; border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  text-decoration: none; font-size: 13px;
  box-shadow: var(--shadow-md);
}
.skip-link:focus { top: 12px; }

/* — top nav — */
.site-nav {
  display: flex; align-items: center; gap: 28px;
  padding: 18px clamp(20px, 5vw, 56px);
}
.site-nav--sticky {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.site-nav__brand {
  color: var(--color-text); text-decoration: none;
  font-weight: 500; font-size: 15px;
  letter-spacing: 0.32em; text-transform: uppercase;
  margin-right: auto;
}
.site-nav__brand:hover { color: var(--color-text); }
.site-nav__links { display: flex; gap: 24px; align-items: center; }
.site-nav__links a {
  color: var(--color-text); text-decoration: none; font-size: 14px;
  white-space: nowrap;
}
.site-nav__links a:hover,
.site-nav__links a[aria-current='page'] { color: var(--color-accent); }

.progress-chip {
  text-decoration: none; font-size: 12px;
  color: var(--color-accent-300);
  border: 1px solid var(--color-accent-800);
  border-radius: 999px; padding: 5px 12px;
  letter-spacing: 0.04em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.progress-chip:hover { color: var(--color-accent-200); border-color: var(--color-accent); }

/* — footer — */
.site-footer {
  padding: 18px clamp(20px, 5vw, 56px);
  display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent) no-repeat top / 100% 1px;
}
/* neutral-500, not 600. At 11.5px and 12px these are body text by WCAG's
   reckoning and need 4.5:1; neutral-600 measured 3.9:1 against the ground and
   failed on both palettes this site has worn. Measured, not guessed. */
.site-footer__brand {
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-neutral-500);
}
.site-footer__note { font-size: 12px; color: var(--color-neutral-500); }
.site-footer a { font-size: 12px; }
.site-footer .push { margin-left: auto; }

/* — shared page furniture — */
.kicker {
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--color-accent); margin: 0 0 16px;
}
/* Section labels carry their OWN typography rather than inheriting it from an
   <h6>. They used to be marked up as h6 purely for the look, which produced
   h1 -> h6 -> h2 heading order on two pages: a real screen-reader fault in
   service of a font size. The label's rank and the label's appearance are
   separate concerns, so the rank now follows the document (a <p> where the
   label sits above a real heading, an <h2> where the label IS the heading)
   and the appearance lives here. */
.section-label,
.home-strip__h {
  /* No font-family here on purpose: the THEME owns which face a label
     wears, and this file loads after it. Setting it here would silently
     outrank the theme's mono file-heading rule. */
  font-size: 13px;
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin: 0 0 6px;
}
.home-strip__h { margin-bottom: 10px; }
.section-h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 8px;
}

/* Screen-reader-only, for labels the design carries visually by other means. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The nav links WRAP on to a second row rather than disappearing.
   The prototypes hide them under 860px and put nothing in their place, which
   leaves the sample chapter reachable on a phone only through an in-page
   button and the archive only through the progress chip. There are three
   links. They fit. No hamburger, no JavaScript, no menu to open. */
@media (max-width: 860px) {
  .site-nav {
    flex-wrap: wrap;
    gap: 12px 20px;
    padding-bottom: 12px;
  }
  .site-nav__links {
    order: 3;
    width: 100%;
    gap: 22px;
    padding-top: 10px;
    background: linear-gradient(to right,
      var(--color-divider), transparent 78%) no-repeat top / 100% 1px;
  }
  /* 44px minimum touch target. The links are 20px of text, so the padding is
     doing the work; negative inline margin keeps the row visually flush with
     the brand above it despite the added box. */
  .site-nav__links a {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 4px;
    margin-inline: -4px;
  }
  .site-nav__links { padding-top: 0; gap: 26px; }
}

/* Touch targets.
   Nocturne's .btn is 29px tall, which is right for a mouse and too small for a
   thumb. This raises the interactive chrome to the 44px minimum on touch
   pointers ONLY, so the desktop proportions the design specifies are untouched.
   Keyed on the pointer, not the viewport: a small window on a laptop is still
   a mouse, and a large tablet is still a thumb. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .progress-chip { display: inline-flex; align-items: center; min-height: 44px; }
  .site-nav__brand { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Scrollbars ──────────────────────────────────────────────────────────────
   Every scrolling surface on this site is a dark panel, and a default
   scrollbar puts a bright system-grey slab down the edge of it. These are
   token-driven, so they follow whichever palette is loaded rather than
   pinning a colour, and the thumb takes the accent on hover like every other
   interactive edge here.

   Both syntaxes are present on purpose: `scrollbar-width`/`scrollbar-color` is
   the standard property Firefox honours, and the `::-webkit-scrollbar`
   pseudo-elements are what Chrome and Safari read. Neither covers both. */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-text) 24%, transparent) transparent;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-text) 20%, transparent);
  border-radius: 999px;
  /* A transparent border plus padding-box clipping is what makes the thumb a
     slim capsule floating in the gutter instead of a full-width slab. */
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-accent) 60%, transparent);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
  background: color-mix(in srgb, var(--color-accent) 80%, transparent);
  background-clip: padding-box;
}

/* Touch surfaces hide their scrollbars anyway; do not reserve the gutter. */
@media (pointer: coarse) {
  ::-webkit-scrollbar { width: 0; height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}