/* ==========================================================================
   02 · BASE
   Reset, document defaults, and the typographic primitives every page uses.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-400);
  font-weight: 300;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video { display: block; max-width: 100%; height: auto; }


h1, h2, h3, h4, h5,
p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--mulberry); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

[hidden] { display: none !important; }


/* --- Accessibility helpers ------------------------------------------------ */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--on-dark);
  transition: top 0.2s var(--ease);
}

.skip-link:focus { top: calc(var(--admin-bar) + var(--s-4)); }


/* --- Headings ------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.page-title {
  font-size: var(--fs-800);
  line-height: var(--lh-tight);
}


/* --- Eyebrow -------------------------------------------------------------- */

.eyebrow {
  margin-bottom: var(--s-4);
  color: var(--gilt);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

.eyebrow a:hover { color: var(--mulberry); }


/* --- Section headers ------------------------------------------------------ */

.section__header {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: var(--measure);
  margin-bottom: var(--s-7);
}

.section__header--row {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  max-width: none;
}

.section__title  { font-size: var(--fs-700); }
.section__intro  { max-width: var(--measure); color: var(--ink-2); }
.section__footer { margin-top: var(--s-6); }

.is-center .section__header { margin-inline: auto; align-items: center; text-align: center; }
.is-center .section__intro  { margin-inline: auto; }

/* Left is what a section does with no modifier, but the option still has to be
   an instruction — otherwise "Levo" only works while nothing else overrides it. */
.is-left .section__header { margin-inline: 0; align-items: flex-start; text-align: left; }

@media (max-width: 700px) {
  .section__header--row { flex-direction: column; align-items: flex-start; }
}


/* --- Running text --------------------------------------------------------- */

.lede {
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: var(--fs-500);
}

.prose {
  max-width: var(--measure);
  color: var(--ink-2);
}

.prose p + p,
.prose p + ul,
.prose ul + p { margin-top: var(--s-4); }

/* Headings inside editor content. The `content` layout ships the full toolbar,
   so an editor can insert these at any time — without rules they inherit
   margin:0 from the reset and jam against the paragraph above. */
.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  color: var(--ink);
}

.prose h2 { font-size: var(--fs-600); }
.prose h3 { font-size: var(--fs-500); }

.prose h4 {
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.prose > :first-child { margin-top: 0; }

.prose ol {
  counter-reset: prose-ol;
  margin-top: var(--s-4);
}

.prose li { position: relative; padding-left: var(--s-5); }
.prose li + li { margin-top: var(--s-2); }

/* A gilt rule instead of a bullet — quieter, and it matches the eyebrows. */
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--gilt);
}

/* Ordered lists keep their numbers — a dash would lose the sequence, which in
   a legal or procedural document is the information. */
.prose ol > li {
  counter-increment: prose-ol;
  padding-left: var(--s-6);
}

.prose ol > li::before {
  content: counter(prose-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gilt);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
}

.prose hr {
  height: 0;
  margin: var(--s-7) 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.prose strong { color: var(--ink); font-weight: 500; }

.prose a {
  color: var(--mulberry);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose--lead { font-size: var(--fs-500); }


/* --- Editor-only notice --------------------------------------------------- */

.notice-missing {
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--mulberry-lt);
  color: var(--mulberry);
  font-size: var(--fs-200);
  letter-spacing: 0.04em;
}


/* --- Arrival animation ----------------------------------------------------
   The page is fully readable at rest; JS only adds .will-reveal when motion
   is welcome, so nothing is ever stuck invisible waiting on an observer. */

.will-reveal {
  opacity: 0.001;
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.will-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .will-reveal { opacity: 1 !important; transform: none !important; }
}