/* ==========================================================================
   Base — reset, typography, browser surfaces, layout primitives
   Requires tokens.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }

/* ---- Browser surfaces, themed --------------------------------------- */
::selection { background: var(--ot-navy); color: var(--ot-ivory); }
.surface-inverse ::selection, [data-surface="navy"] ::selection { background: var(--ot-gold); color: var(--ot-navy); }
html { scrollbar-color: color-mix(in srgb, var(--ot-gold) 70%, var(--ot-ivory)) var(--ot-ivory); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ot-ivory); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ot-gold) 70%, var(--ot-ivory)); border: 3px solid var(--ot-ivory); }
input, textarea { caret-color: var(--ot-gold-ink); }
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.tabular, .stat__value, table { font-variant-numeric: tabular-nums lining-nums; }

/* ---- Type ------------------------------------------------------------ */
.display-xl, .display-l, .display-m, h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-display);
  color: var(--text-display);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  font-optical-sizing: auto;
}
.display-xl { font-size: var(--step-display-xl); font-weight: var(--weight-display); line-height: var(--leading-display); letter-spacing: -0.02em; }
.display-l  { font-size: var(--step-display-l);  font-weight: var(--weight-display); line-height: 1.04; letter-spacing: -0.016em; }
.display-m  { font-size: var(--step-display-m);  font-weight: var(--weight-display); line-height: 1.06; }
h1, .h1 { font-size: var(--step-h1); font-weight: var(--weight-display); line-height: 1.08; }
h2, .h2 { font-size: var(--step-h2); font-weight: var(--weight-display); line-height: 1.1; }
h3, .h3 { font-size: var(--step-h3); }
h4, .h4 { font-size: var(--step-h4); line-height: var(--leading-tight); }
h5, .h5 { font-size: var(--step-h5); font-weight: var(--weight-heading-strong); line-height: var(--leading-tight); letter-spacing: 0; }
h6, .h6 {
  font-family: var(--font-sans); font-size: var(--step-h6); font-weight: var(--weight-label);
  letter-spacing: 0.06em; color: var(--text-display); line-height: var(--leading-tight);
}
/* Two-line "answering" headline — the publication's signature construction */
.answer > span { display: block; }
.answer em, .italic { font-style: italic; }
.lead { font-size: var(--step-lead); line-height: 1.6; color: var(--text-body); max-width: var(--measure-narrow); font-weight: 300; }
.body-l { font-size: var(--step-body-l); }
.body-s { font-size: var(--step-body-s); line-height: 1.6; }
.caption { font-size: var(--step-caption); line-height: 1.5; color: var(--text-muted); }
.caption--serif { font-family: var(--font-display); font-style: italic; font-size: 1rem; }
.label {
  font-family: var(--font-sans); font-size: var(--step-label); font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1.4;
  color: var(--text-accent);
}
.label--quiet { color: var(--text-muted); }
.muted { color: var(--text-muted); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.1em; }
.prose li + li { margin-top: 0.35em; }
.prose li::marker { color: var(--ot-gold); }
p + p { margin-top: 1em; }

a { color: var(--text-link); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--rule-gold); transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }

/* ---- Layout primitives ---------------------------------------------- */
.container { width: 100%; max-width: calc(var(--content-max) + 2 * var(--page-margin)); margin-inline: auto; padding-inline: var(--page-margin); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-7); }
.stack > * + * { margin-top: var(--stack, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, var(--space-4)); align-items: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -4rem; z-index: 100; background: var(--ot-navy); color: var(--ot-ivory); padding: var(--space-3) var(--space-4); }
.skip-link:focus { top: var(--space-4); }

/* ---- Lines from the publication ------------------------------------- */
.rule { border: 0; border-top: var(--rule) solid var(--rule-gold); margin: 0; }
.rule--hair { border-top-color: var(--rule-hair); }
/* Dimension line: architectural rule with end ticks (from p7 linework) */
.dim-rule { position: relative; height: var(--tick); border: 0; margin: 0; }
.dim-rule::before { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1px solid var(--rule-gold); }
.dim-rule::after { content: ""; position: absolute; inset: 0; border-inline: 1px solid var(--rule-gold); }

/* Folio frame: the inset double hairline of the p1 cover and p8 back cover */
.folio-frame { position: relative; isolation: isolate; }
.folio-frame::before, .folio-frame::after { content: ""; position: absolute; pointer-events: none; z-index: 2; border: 1px solid var(--ot-gold); }
.folio-frame::before { inset: var(--frame-inset); }
.folio-frame::after { inset: calc(var(--frame-inset) + var(--frame-gap)); opacity: 0.45; }
.folio-frame--single::after { display: none; }

/* Running head and folio — page furniture */
.running-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
.folio-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: baseline;
  border-top: 1px solid var(--rule-gold); padding-top: var(--space-3);
  font-size: var(--step-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); font-weight: 500;
}
.folio-bar > :last-child { text-align: right; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0; color: var(--text-accent); text-transform: none; }

@media (max-width: 40rem) {
  .folio-bar { grid-template-columns: 1fr auto; }
  .folio-bar > :nth-child(2) { display: none; }
}

/* ---- Column layouts (moved from docs.css: the site uses them too) ---------- */
.cols { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: var(--space-6) var(--gutter); }
.cols--3 { --cols: 3; } .cols--4 { --cols: 4; }
@media (max-width: 60rem) { .cols--4 { --cols: 2; } .cols--3 { --cols: 2; } }
@media (max-width: 40rem) { .cols, .cols--3, .cols--4 { --cols: 1; } }
.col-rule > * { border-top: 1px solid var(--rule-gold); padding-top: var(--space-4); }

/* ---- Scrolling tables (moved from docs.css) -------------------------------- */
/* Tables keep a readable width and scroll sideways on phones. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: 36rem; }

/* ---- Motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}