/* One owner for page geometry. This loads after the demo styles so the old
   page chrome cannot override the Night Bench reading layout. */
.night-bench {
  --panel-2: #232019;
  --muted: #b0ada4;
  --faint: #7f7c73;
  --line: #2b2820;
  --line-2: #433f35;
  --reader-bar: 60px;
  --reader-gutter: clamp(24px, 3vw, 64px);
  --chrome-gutter: 32px;
  --reader-prose: 660px;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}
.reader-skip { position: fixed; top: 8px; left: 12px; z-index: 120; padding: 10px 16px; background: var(--work); color: var(--bg); transform: translateY(-160%); }
.reader-skip:focus { transform: none; }
.article-site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  /* Equal side tracks keep the article title centred, regardless of the
     different widths of the logo and current chapter name. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  width: 100%;
  height: var(--reader-bar);
  padding: 0 var(--chrome-gutter);
  background: var(--panel);
  border-bottom: 1px solid var(--line-2);
}
.article-brand { display: inline-flex; align-items: center; gap: 9px; width: max-content; color: var(--ink); text-decoration: none; }
.article-brand img { display: block; width: 22px; height: 22px; }
.article-brand-convex { font-size: 15px; font-weight: 700; }
.article-brand-explained { margin-left: -3px; color: var(--work); font: 600 21px/1 "Caveat", cursive; }
.article-title { min-width: 0; color: var(--ink); text-align: center; font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; }
.chapter-picker { position: relative; display: flex; align-items: center; justify-self: end; width: 280px; max-width: 100%; min-width: 0; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel-2); }
.chapter-picker-number { position: absolute; left: 12px; color: var(--accent); font: 600 12px "IBM Plex Mono", monospace; pointer-events: none; }
.chapter-picker select { appearance: none; width: 100%; min-width: 0; padding: 8px 30px 8px 39px; background: transparent; border: 0; color: var(--ink); font: 14px/20px "Public Sans", sans-serif; cursor: pointer; text-overflow: ellipsis; }
.chapter-picker svg { position: absolute; right: 12px; stroke: var(--muted); stroke-width: 1.6; fill: none; pointer-events: none; }
.article-site-header .scroll-progress { position: absolute; inset: auto 0 -1px; width: 100%; height: 3px; background: var(--line); z-index: 1; }
.article-site-header .scroll-progress-bar { background: var(--work); }
/* The separate site footer supplies the bottom breathing room. */
.article-reader { padding: 56px var(--reader-gutter) 0; }
.article-stage { width: 100%; max-width: 1600px; margin-inline: auto; min-width: 0; }

.article-byline { margin: 0 0 28px; }
.article-byline .byline-author { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.article-byline img { width: 32px; height: 32px; border-radius: 50%; }
.article-byline .byline-author > span { display: grid; gap: 2px; }
.article-byline strong { font: 600 13px/1.4 "Public Sans", sans-serif; }
.article-byline small { color: var(--faint); font: 12px/1.4 "Public Sans", sans-serif; }

/* Prose and demos share a centre line. Each wide example declares its own
   --demo-max-width in its template; unused screen space is not a reason to
   stretch a small diagram. New examples default to a modest two-panel width. */
.read-chapter[hidden] { display: none !important; }
.read-chapter { padding: 0; }
.read-chapter .col { width: 100%; max-width: var(--reader-prose); margin-inline: auto; padding-inline: 0; }
.night-bench .read-chapter .wide { width: 100%; max-width: var(--demo-max-width, 940px); margin-inline: auto; padding-inline: 0; min-width: 0; container: demo / inline-size; }
.read-chapter :is(.demo, .iv-example, .commit-window)[id] { scroll-margin-top: calc(var(--reader-bar) + 24px); }
.night-bench .read-chapter .col .col { max-width: 100%; }
.read-chapter .col > p, .read-chapter .database-jobs { font-size: 18px; line-height: 1.6; }
.read-chapter .col > p { margin-bottom: 20px; }
.read-chapter .col > .doc-link { font-size: 13px; }
.read-chapter h2 { margin: 64px 0 18px; font-size: 32px; line-height: 1.2; letter-spacing: -.015em; }
.read-chapter > .col:first-child h2 { margin-top: 0; }
.read-chapter h2 .secno { display: block; margin: 0 0 8px; color: var(--accent); font: 600 12px/1.3 "IBM Plex Mono", monospace; letter-spacing: .1em; }
.read-chapter :is(h2, h3)[id] { scroll-margin-top: calc(var(--reader-bar) + 40px); }
.read-chapter :is(h2, h3)[tabindex="-1"]:focus { outline: none; }
.night-bench header.hero { padding: 0 0 24px; }
.night-bench header.hero h1 { font-size: clamp(36px, 3.3vw, 48px); margin: 0 0 26px; }
.read-chapter .article-deep-dive { width: 100%; margin-inline: auto; }
.read-chapter .article-deep-dive > .col { padding: 18px 20px 6px; }
.read-end { display: flex; align-items: center; gap: 16px; width: 100%; max-width: var(--reader-prose); margin: 48px auto 0; padding: 32px 0; border-top: 1px solid var(--line-2); }
.read-end button { min-height: 44px; border-radius: 6px; font: 500 15px/1.35 "Public Sans", sans-serif; text-transform: none; letter-spacing: 0; }
.read-previous { flex: none; min-width: 44px; }
.read-next-title { min-width: 0; margin-right: auto; color: var(--muted); font-size: 14px; }
.read-next { margin-left: auto; background: var(--work); border-color: var(--work); color: var(--bg); padding: 12px 18px; }
.read-next:hover { border-color: var(--work); background: #ffc13d; }
/* Match the top bar's inset. Keep the bottom row above the fixed sound toggle. */
.article-site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; margin: 32px 0 0; padding: 30px var(--chrome-gutter) 64px; border-top: 1px solid var(--line); }
.article-site-footer .article-brand img { width: 20px; height: 20px; }
.article-site-footer .article-brand-convex { font-size: 14px; }
.article-site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 12px; }
.article-site-footer nav a { color: var(--muted); }
.night-bench :is(a, button, select):focus-visible { outline: 2px solid var(--work); outline-offset: 3px; }

@media (max-width: 800px) {
  .night-bench { --reader-gutter: 24px; --chrome-gutter: 24px; }
  .article-site-header { gap: 16px; }
  .article-site-header .article-brand-convex, .article-site-header .article-brand-explained { display: none; }
  .article-reader { padding-top: 36px; }
}
@media (max-width: 600px) {
  .night-bench { --reader-bar: 56px; --reader-gutter: 20px; --chrome-gutter: 16px; }
  .article-site-header { grid-template-columns: 22px minmax(0, 1fr) minmax(100px, 36%); gap: 10px; }
  .article-title { font-size: 12px; }
  .chapter-picker { width: 100%; }
  .chapter-picker-number { left: 8px; font-size: 10px; }
  .chapter-picker select { min-height: 40px; padding: 8px 22px 8px 29px; font-size: 12px; }
  .chapter-picker svg { right: 8px; width: 9px; }
  .read-chapter h2 { font-size: 27px; }
  .read-chapter .col > p, .read-chapter .database-jobs { font-size: 16px; }
  .read-chapter h2 .secno { font-size: 11px; }
  .read-next-title { display: none; }
  .read-end button { font-size: 13px; }
  .article-site-footer { align-items: flex-start; flex-direction: column; }
}