/* ===========================================================================
   Base styles. Mobile first throughout — every media query widens, never
   narrows. If you find yourself writing max-width, something has gone wrong.
   ======================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;   /* stop iOS inflating text in landscape */
  scroll-behavior: smooth;
  /* Offset for the sticky header when jumping to an anchor */
  scroll-padding-top: 5rem;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;              /* dvh, not vh — mobile browser chrome */
  overflow-x: hidden;              /* belt and braces against overflow */
}

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

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;              /* stops orphaned words in headings */
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); margin-block-start: var(--space-lg); }
h3 { font-size: var(--text-xl);  margin-block-start: var(--space-md); }
h4 { font-size: var(--text-lg);  margin-block-start: var(--space-md); font-family: var(--font-ui); }

p, ul, ol, blockquote, table {
  margin-block-end: var(--space-sm);
}

p { text-wrap: pretty; }

a {
  color: var(--accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent); }

blockquote {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: var(--space-sm);
  color: var(--fg-muted);
  font-style: italic;
}

code, pre { font-family: var(--font-mono); font-size: 0.9em; }

hr {
  border: 0;
  border-block-start: 1px solid var(--border);
  margin-block: var(--space-lg);
}

/* Eyebrow labels, metadata, small caps chrome */
.label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* --- Layout -------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The reading column. Body text must never exceed this, at any width. */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
}

.prose > * + * { margin-block-start: var(--space-sm); }
.prose h2 + *, .prose h3 + * { margin-block-start: var(--space-xs); }

.stack     { display: flex; flex-direction: column; gap: var(--space-sm); }
.stack-lg  { display: flex; flex-direction: column; gap: var(--space-lg); }

/* Cards reflow by available space, not viewport width, so they behave the same
   in the main column and inside a narrower sidebar. */
.grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-sm);
  box-shadow: var(--shadow-sm);
}

/* --- Header and navigation ----------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--border);
  padding-block: var(--space-2xs);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap-min);
}

.site-header__brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
  margin-inline-end: auto;
}

/* Search is primary navigation on mobile. Nobody browses a 500-page hierarchy
   on a phone, so it stays visible in the header at every width. */
.site-search {
  flex: 1 1 auto;
  max-width: 22rem;
}

/* Drawer nav below the tablet breakpoint, persistent sidebar above it. */
.nav-toggle { display: inline-flex; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--z-drawer);
  width: min(20rem, 85vw);
  background: var(--bg-raised);
  border-inline-end: 1px solid var(--border);
  padding: var(--space-sm);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease);
}
.drawer[data-open] { transform: translateX(0); }

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgb(0 0 0 / 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.drawer-scrim[data-open] { opacity: 1; pointer-events: auto; }

@media (min-width: 60rem) {
  .nav-toggle, .drawer-scrim { display: none; }
  .drawer {
    position: sticky;
    top: 5rem;
    transform: none;
    height: fit-content;
    max-height: calc(100dvh - 6rem);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .with-sidebar {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
  }
}

/* --- Forms --------------------------------------------------------------- */

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

input, select, textarea {
  /* 16px minimum. Anything smaller makes iOS Safari zoom the viewport on focus,
     which looks broken and strands the user at the wrong scale. */
  font-size: max(1rem, var(--text-base));
  font-family: var(--font-ui);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-block-end: var(--space-3xs);
}

.field { margin-block-end: var(--space-sm); }

.field__hint {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  margin-block-start: var(--space-3xs);
}

/* Errors state what happened and what to do. They don't apologise. */
.field__error {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--danger);
  margin-block-start: var(--space-3xs);
}
.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea {
  border-color: var(--danger);
  background: var(--danger-wash);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-height: var(--tap-min);
  padding-inline: var(--space-md);
  font-family: var(--font-ui);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent-strong);
  color: var(--paper-raised);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--quiet {
  background: transparent;
  color: var(--fg);
  border-color: var(--rule-strong);
}
.btn--quiet:hover { background: var(--paper-sunken); }

.btn--danger { background: var(--danger); }

/* Full-width primary actions on mobile. A thumb should not have to aim. */
.btn--block { width: 100%; }
@media (min-width: 40rem) {
  .btn--block { width: auto; }
}

/* --- Multi-step forms ---------------------------------------------------- */

.steps {
  display: flex;
  gap: var(--space-3xs);
  list-style: none;
  padding: 0;
  margin-block-end: var(--space-md);
}
.steps li {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--rule);
}
.steps li[data-done]    { background: var(--accent); }
.steps li[data-current] { background: var(--accent-strong); }

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

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

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-2xs);
  inset-block-start: -100%;
  z-index: calc(var(--z-header) + 1);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--accent-strong);
  color: var(--paper-raised);
  border-radius: var(--radius);
}
.skip-link:focus { inset-block-start: var(--space-2xs); }

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

@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;
  }
}

/* --- Tables, which are the usual cause of horizontal overflow ------------ */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table { border-collapse: collapse; width: 100%; font-family: var(--font-ui); }
th, td {
  text-align: start;
  padding: var(--space-2xs);
  border-block-end: 1px solid var(--border);
}
th { font-size: var(--text-sm); color: var(--fg-muted); font-weight: 600; }