/* ==========================================================================
   base.css — reset, document defaults, typography, focus
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------
   Note what is NOT here: `outline: 0`. The reference applies it as a blanket
   reset; DESIGN.md §9 #6 explains why we don't.                            */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + var(--space-5));
}

body {
  min-height: 100svh;

  background-color: var(--bg);

  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  -webkit-tap-highlight-color: transparent;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
figcaption {
  overflow-wrap: break-word;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

/* --- Typographic roles --------------------------------------------------- */

h1,
h2,
h3,
h4 {
  color: var(--text);
  text-wrap: balance;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-display);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

/* h3/h4 are the grotesque, not the display face. The face changing — not
   just the size — is what keeps the hierarchy obvious at a squint.
   DESIGN.md §3.                                                            */
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

h4 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

small {
  font-size: var(--fs-2xs);
  line-height: var(--lh-lead);
}

strong,
b {
  font-weight: var(--fw-semibold);
}

/* --- Links ---------------------------------------------------------------
   Underline is present by default and never removed on hover — it moves.
   Colour is never the only signal.                                          */

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition:
    color var(--dur-fast) var(--ease),
    text-underline-offset var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--accent-ink);
  text-underline-offset: 0.12em;
}

/* --- Focus ---------------------------------------------------------------
   Every interactive element gets a visible ring. Verified ≥6.62:1 against
   every ground it can land on — DESIGN.md §2.                              */

:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* Only suppress the default ring where :focus-visible is supported and the
   element was focused by pointer.                                          */
:focus:not(:focus-visible) {
  outline: none;
}

/* --- Selection ----------------------------------------------------------- */

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

/* --- Utilities that belong to the document, not to a component ----------- */

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — visible the moment it receives focus. */
.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: calc(var(--z-nav) + 1);

  padding-block: var(--space-3);
  padding-inline: var(--space-5);

  background-color: var(--ink);

  color: var(--text-on-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-decoration: none;

  border-radius: var(--radius-sm);
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--dur-base) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Reduced motion ------------------------------------------------------ */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;      /* stylelint-disable-line declaration-no-important */
    animation-iteration-count: 1 !important;    /* stylelint-disable-line declaration-no-important */
    transition-duration: 0.01ms !important;     /* stylelint-disable-line declaration-no-important */
    scroll-behavior: auto !important;           /* stylelint-disable-line declaration-no-important */
  }
}
/* The four !important declarations above are the single exception to the
   no-!important rule. A reduced-motion override must beat every component
   rule unconditionally; this is the documented, standard pattern.          */