/* ==========================================================================
   Base — reset and element defaults
   ========================================================================== */

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

html {
  /* The palette is a fixed light one, so say so. Without this, phone browsers
     with a dark theme apply their own automatic inversion and repaint the
     brand colours — the sand backgrounds go black and the greens wash out. */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--header-inset) * 2);
}

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

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

body {
  margin: 0;
  background-color: var(--surface-light);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--text-on-light);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--step-h2);
}

h3 {
  font-size: var(--step-h3);
}

h4 {
  font-size: var(--step-h4);
}

h5,
h6 {
  font-size: var(--step-h5);
}

p {
  margin: 0;
  text-wrap: pretty;
}

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

a {
  color: inherit;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}

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

/* `display: contents` rather than `block`: a <picture> box would become the
   flex or grid item and stretch, leaving the image inside it aligned to the
   start while the parent's centring silently applied to the wrapper. Taking
   the box out of the layout makes the image itself the item, so alignment and
   percentage widths resolve against the container the author was aiming at. */
picture {
  display: contents;
}

img {
  height: auto;
}

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

button {
  border: 0;
  background: none;
  cursor: pointer;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

/* On light surfaces the lime ring has too little contrast — darken it. */
.surface-light :where(a, button, summary, input, [tabindex]):focus-visible,
.surface-muted :where(a, button, summary, input, [tabindex]):focus-visible,
.surface-wash :where(a, button, summary, input, [tabindex]):focus-visible,
.surface-accent :where(a, button, summary, input, [tabindex]):focus-visible {
  outline-color: var(--focus-ring-on-light);
}

::selection {
  background-color: var(--gm-lime-500);
  color: var(--gm-green-900);
}

/* Skip link ------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: var(--z-overlay);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  background-color: var(--gm-lime-500);
  color: var(--gm-green-900);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transform: translateY(-200%);
}

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

/* Visually hidden, still announced --------------------------------------- */

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