/* Reset and the typographic baseline. Mobile first: every rule here is what a
 * phone gets, and larger screens only add. */

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

html {
  -webkit-text-size-adjust: 100%;          /* stop iOS inflating text on rotate */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The bottom bar is fixed over the page on phones; this keeps the last card
   * clear of it, including the home-indicator strip on an iPhone. */
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  min-height: 100svh;
}

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

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;              /* tightens as size grows */
  text-wrap: balance;                     /* no single orphaned word */
}
h1 { font-size: var(--t-2xl); font-weight: 800; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

p { text-wrap: pretty; }

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

/* The reset above is right for cards, chips and nav, where the whole block is
 * the target. It is wrong inside a sentence: an inline link ends up looking
 * exactly like the words around it. Wherever text is read as prose, put the
 * colour and the underline back. */
.prose a, .guide-hero a, .safety-note a, .hint a, .lede a, p.muted a, .menu a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  font-weight: 600;
}
.prose a:hover, .guide-hero a:hover, .safety-note a:hover, .hint a:hover,
.lede a:hover, p.muted a:hover, .menu a:hover { color: var(--ink); }

/* Prices and counts: tabular figures stop numbers shifting as they change. */
.price, .count, time { font-variant-numeric: tabular-nums; }

.muted { color: var(--muted); font-size: var(--t-sm); }
.small { font-size: var(--t-sm); }

/* Visible only to a screen reader — used for the labels a sighted person
 * reads from an icon. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0;
}

/* One focus style everywhere, and only for keyboards. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

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