/* ==========================================================================
   BASE
   Resets and default element styling — the "ground floor" of the site.
   This file should rarely need editing. If you want to change a COLOUR
   or FONT, do it in variables.css instead — everything here just reads
   those variables.
   ========================================================================== */

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

html {
  font-size: 100%; /* respects the visitor's browser text-size setting */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7; /* generous line-height — typewriter fonts read better with room to breathe */
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/* Guarantees the `hidden` HTML attribute actually hides an element.
   Without this, a class like .btn that sets its own `display` value
   has EQUAL CSS specificity to the browser's built-in "[hidden] {
   display:none }" rule, and wins on source order — so an element with
   both `hidden` and a display-setting class silently stays visible.
   (This bit the "Read the Book" link in the book info panel — it has
   `hidden` AND class="btn", and .btn's display:inline-block was
   winning.) */
[hidden] {
  display: none !important;
}

/* --- HEADINGS -------------------------------------------------------- */
/* Default heading font is the elegant serif (--font-secondary), NOT the
   calligraphy font. Reserve the calligraphy font for one-off "big
   moment" titles using the .display-title class in components.css —
   it's too hard to read for everyday headings. */

h1, h2, h3, h4 {
  font-family: var(--font-secondary);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 var(--space-md);
  color: var(--color-ink);
  scroll-margin-top: var(--space-xl); /* headroom for anchor jumps, e.g. from a table of contents */
}

h1 { font-size: 2.4rem; }
h2 { font-size: 1.85rem; }
h3 { font-size: 1.4rem; }

/* A heading directly after a paragraph needs more breathing room than
   the paragraph's own margin-bottom (--space-md) gives it on its own —
   otherwise the heading reads as glued to the text above it. Margins
   collapse between adjacent siblings, so this takes over as the larger
   of the two (rather than stacking on top of the paragraph's own
   margin-bottom) — one standard gap, site-wide, for every "paragraph
   then subheading" moment instead of one-off inline margins per page. */
p + h2,
p + h3,
p + h4 {
  margin-top: var(--space-lg);
}
h4 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

p {
  margin: 0 0 var(--space-md);
  max-width: 38em; /* keeps paragraphs a comfortable reading width */
}

/* --- LINKS ------------------------------------------------------------ */

a {
  color: var(--color-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-ink-soft);
}

/* --- FOCUS STATES ------------------------------------------------------
   Always show a clear focus outline for keyboard users. Never remove
   this without replacing it with something equally visible. */

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

/* --- SELECTION ---------------------------------------------------------- */

::selection {
  background-color: var(--color-ink-soft);
  color: var(--color-paper);
}

/* --- VISUALLY HIDDEN -------------------------------------------------------
   For text that screen readers should announce but sighted visitors
   don't need to see — e.g. a label on a button that's just an image.
   Don't use display:none for this; that hides it from screen readers
   too. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- REDUCED MOTION ------------------------------------------------------
   If a visitor's system says "reduce motion", almost all animation and
   smooth-scrolling is switched off site-wide automatically. Any new
   animation you add later should be written so it's covered by this. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}