/* ==========================================================================
   Daybook -- base: reset, type system, layout primitives
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The UA rule for [hidden] is display:none at the lowest specificity, so any
   component class that sets display (.ctl is inline-flex, .margin-mark is
   block) silently defeats it and ships a "hidden" control that is visible and
   focusable. Restore it once, here. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- headings: one h1 per page, ordered levels ------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

h1 {
  font-family: var(--serif);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: -0.014em;
}
h2 {
  font-family: var(--serif);
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.008em;
}
h3 {
  font-family: var(--sans);
  font-size: var(--t-h3);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.003em;
}

p { margin: 0 0 var(--s4); }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.25em; }
li { margin: 0 0 var(--s2); }

a {
  color: inherit;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

/* ---- focus: visible everywhere, never removed ------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--decided);
  outline-offset: 2px;
  border-radius: 1px;
}
.on-night :focus-visible,
.night :focus-visible { outline-color: var(--promised-rule); }

/* ---- skip link --------------------------------------------------------- */
.skip {
  position: absolute;
  left: var(--s4);
  top: calc(-1 * var(--s9));
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--t-ui);
  padding: var(--s3) var(--s4);
  text-decoration: none;
  transition: top var(--d-control) var(--ease);
}
.skip:focus-visible { top: var(--s4); }

/* ---- screen-reader only ----------------------------------------------- */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* An anchor target must clear the sticky masthead, or every in-page link
   lands with its heading hidden behind the header. */
section[id], [id]:target { scroll-margin-top: 86px; }
@media (max-width: 860px) {
  section[id], [id]:target { scroll-margin-top: var(--s4); }
}

/* ---- layout primitives ------------------------------------------------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Band: the primary structural device. Full-bleed, ground may change. */
.band {
  padding-block: clamp(var(--s8), 9vw, var(--s10));
  border-top: var(--hair) solid var(--rule);
}
.band--tight { padding-block: clamp(var(--s7), 6vw, var(--s8)); }
.band--sheet { background: var(--sheet); }
.band--night {
  background: var(--night);
  color: var(--ivory);
  border-top-color: var(--night-rule);
}
.band--first { border-top: 0; }

/* Prose column: serif, generous leading, real measure. */
.prose {
  font-family: var(--serif);
  font-size: var(--t-prose);
  line-height: var(--lh-prose);
  max-width: var(--measure);
}
.lede {
  font-family: var(--sans);
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.58;
  color: var(--ink-muted);
  max-width: var(--measure-ui);
}
.band--night .lede { color: var(--ivory-muted); }

/* Micro label. Not an eyebrow: used only on legends, states and status. */
.micro {
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
}
.band--night .micro { color: var(--ivory-faint); }

.mono {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Section head: a rule that belongs to the heading. */
.sec-head { margin-bottom: var(--s7); }
.sec-head h2 { max-width: 30ch; }
.sec-head .micro { display: block; margin-bottom: var(--s4); }
.sec-head .lede { margin-top: var(--s4); }

hr.rule {
  border: 0;
  border-top: var(--hair) solid var(--rule);
  margin: var(--s7) 0;
}
.band--night hr.rule { border-top-color: var(--night-rule); }

/* Utility */
.stack > * + * { margin-top: var(--s4); }
.flow-end { margin-bottom: 0; }
img, svg { max-width: 100%; }