/* Atkinson Hyperlegible Bold, for headings and buttons: served from this
   site, Latin letters only, under the SIL Open Font License (fonts/OFL.txt). */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-700.woff2") format("woff2");
}

/* DriveThere's brand tokens. Contrast notes are against the colour each
   is used on; keep text pairs at WCAG AA or better. */
:root {
  --deep: #0D2240;        /* hero and header base; white text 15.91:1 */
  --teal: #2F7FD6;        /* the hero gradient's far end only (white on it 4.10:1) */
  --mid: #1D5FA6;         /* links and body-size accent text (6.20:1 on bg, 5.72:1 on panel) */
  --light: #8DB8EE;       /* highlights on deep (7.75:1) */
  --accent: #FFC629;      /* the call to action and route accent (deep on it 10.12:1); never text on bg (1.50:1) */
  --ink: #1B2330;         /* body text (15.11:1 on bg, 13.93:1 on panel) */
  --muted: #566173;       /* secondary text (5.99:1 on bg, 5.53:1 on panel) */
  --bg: #FAFAF8;          /* page background */
  --panel: #EDF1F7;
  --heading: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.1875rem;   /* 19px: never below 18px for body text */
  line-height: 1.65;
  overflow-wrap: break-word;
}

.wrap {
  max-width: 40rem;       /* short lines, about 65 characters */
  margin: 0 auto;
  padding: 0 1.25rem;
}

h1, h2, h3 {
  font-family: var(--heading);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: 2.1rem; margin: 0 0 1rem; }
h2 { font-size: 1.6rem; margin: 2.75rem 0 1rem; }
h3 { font-size: 1.25rem; margin: 0 0 0.4rem; }

p { margin: 0 0 1rem; }

a { color: var(--mid); text-underline-offset: 0.15em; }

/* Focus: a navy outline on the light page (15.22:1 on bg), a yellow one
   on navy (10.12:1). */
a:focus-visible, button:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
.hero a:focus-visible, .bar a:focus-visible { outline-color: var(--accent); }

/* The logo: the reversed lockup, on navy, 36px high. */
.wordmark { margin: 0 0 1.5rem; line-height: 0; }
.wordmark img { display: block; height: 2.25rem; width: auto; }
.wordmark a { display: inline-block; }

/* The hero: navy where the text sits, easing to teal at the far corner.
   White text is 15.91:1 on navy and still 7.01:1 at the bottom-right
   corner, where the gradient is lightest. */
.hero {
  background: linear-gradient(135deg, var(--deep) 55%, var(--teal) 130%);
  color: #FFFFFF;
  padding: 2.5rem 0 2.75rem;
}
.hero h1 { color: #FFFFFF; font-size: 2.4rem; }
.hero-lede { font-size: 1.25rem; max-width: 34rem; }

.bar {
  background: var(--deep);
  padding: 1.1rem 0 0.1rem;
}
.bar .wordmark { margin-bottom: 1rem; }
.bar + main { padding-top: 2rem; }

/* Buttons: yellow with navy text everywhere (10.12:1). */
.button, button {
  display: inline-block;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: 0.6rem;
  background: var(--accent);
  color: var(--deep);
  font: inherit;
  font-family: var(--heading);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.points { list-style: none; margin: 0; padding: 0; }
.points li {
  border-left: 4px solid var(--accent);
  padding: 0.1rem 0 0.1rem 1rem;
  margin: 0 0 1.5rem;
}
.points p { margin: 0; }

.columns { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) {
  .columns { grid-template-columns: 1fr 1fr; }
}

.status {
  background: var(--panel);
  border-radius: 0.8rem;
  padding: 0.25rem 1.25rem 1rem;
  margin-top: 2.75rem;
}
.status h2 { margin-top: 1.25rem; }

.small, footer { color: var(--muted); font-size: 1.05rem; }

.notice {
  background: var(--panel);
  border-radius: 0.6rem;
  padding: 0.85rem 1.1rem;
}

.code {
  background: var(--panel);
  border-radius: 0.6rem;
  padding: 0.85rem 1.1rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
}

footer {
  margin-top: 3.5rem;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid #D9E0EA;
}
footer p { margin: 0 0 0.5rem; }