/* Generated by scripts/build-site.mjs from src/brand/brand.json. Do not edit. */
:root {
  /*
   * Light only, and declared so.
   *
   * The palette below is the whole palette. There is no dark variant: this is
   * a white page, and declaring the colour-scheme as light stops the browser
   * painting form controls and scrollbars dark underneath it on a dark system.
   */
  color-scheme: light;

  /* ---------------------------------------------------------- foundation */
  --paper: #ffffff;
  --surface: #ffffff;
  --tint: #FBFAF7;
  --sunk: color-mix(in srgb, #171A1F 4%, #ffffff);
  --ink: #171A1F;
  --ink-soft: #3A4049;
  --muted: #5C6270;
  --clay: #B4552D;
  --clay-deep: color-mix(in srgb, #B4552D 82%, #171A1F);
  --clay-wash: color-mix(in srgb, #B4552D 8%, #ffffff);
  --on-clay: #ffffff;
  --moss: #3F6B4E;
  /* The one colour reserved for something having gone wrong. */
  --danger: #A63D4A;
  --line: color-mix(in srgb, #171A1F 11%, #ffffff);
  --line-strong: color-mix(in srgb, #171A1F 20%, #ffffff);
  --glow: #E0815026;
  --screen-bg: #171A1F;
  --screen-edge: color-mix(in srgb, #171A1F 86%, #ffffff);

  /*
   * The tile hues.
   *
   * A tile picks one with `--hue`, and derives its wash, border and text from
   * it. Those three are deliberately *not* declared here: a custom property
   * containing `var()` is substituted where it is declared, so deriving them
   * on `:root` would freeze them against `:root`'s hue and every tile would
   * come out the same colour. They are declared on the tile itself, in
   * styles.css, against the base and amounts below.
   */
  --hue-0: #B4552D;
  --hue-1: #3F6B4E;
  --hue-2: #C08A2E;
  --hue-3: #5C6270;
  --hue-4: #A63D4A;
  --hue-5: #6FA983;
  --hue: var(--hue-0);
  --wash-base: #ffffff;
  --wash-amount: 9%;
  --wash-line: 22%;
  /*
   * 62%, not the 74% that looks right in isolation.
   *
   * A tile's heading is its hue darkened towards the ink. At 74% the four dark
   * hues clear WCAG AA comfortably and the two light ones — amber and the light
   * moss — land at 4.28:1 and 3.94:1 against their own wash, which fails for
   * text this size. 62% takes all six to 4.9:1 or better and costs a little
   * saturation that nobody looking at one tile will notice.
   */
  --wash-ink: 62%;
  --ink-base: #171A1F;

  /* ------------------------------------------------------------- shape */
  --r-sm: 0.625rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px -1px color-mix(in srgb, #171A1F 18%, transparent);
  --shadow-md: 0 6px 20px -8px color-mix(in srgb, #171A1F 26%, transparent),
    0 1px 3px -1px color-mix(in srgb, #171A1F 12%, transparent);
  --shadow-lg: 0 28px 64px -24px color-mix(in srgb, #171A1F 34%, transparent),
    0 6px 18px -10px color-mix(in srgb, #171A1F 18%, transparent);
  --shadow-clay: 0 10px 28px -10px color-mix(in srgb, #B4552D 52%, transparent);

  /* -------------------------------------------------------------- type */
  --font-display: ui-serif, 'New York', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-ui: var(--font-body);

  --step-1: clamp(2.6rem, 6.4vw, 4.4rem);
  --step-2: clamp(2rem, 4.6vw, 3.1rem);
  --step-3: clamp(1.35rem, 2.4vw, 1.6rem);
}


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

.notify {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.notify input {
  font: inherit;
  font-size: 0.9688rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  min-width: 14rem;
}

.notify__status {
  flex-basis: 100%;
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}