/*
 * avesla.com — one stylesheet, no build step, no framework.
 *
 * The tokens below are lifted from `web/app/globals.css`, which is the app's
 * Tailwind 4 `@theme` block. They are copied rather than imported on purpose:
 * the site must not acquire the app's toolchain, which is the thing that has
 * been failing to deploy for twenty-two days. The cost of copying is that the
 * two can drift; `tests/test_site.py` asserts the brand ramp still matches.
 *
 * The palette was chosen for a phone held outdoors in Dar es Salaam — high
 * contrast, no thin light-grey body text, white on the primary clears WCAG AA
 * at body size. Gold is the accent and is never a button, so "the gold thing"
 * is never also "the thing you must press".
 */

:root {
  /* brand */
  --avesla-50: #eef7f3;
  --avesla-100: #d3ebe1;
  --avesla-200: #a6d7c4;
  --avesla-500: #1f7a5e;
  --avesla-600: #17614b;
  --avesla-700: #124d3c;
  --avesla-800: #0e3c2f;
  --avesla-900: #0a2b22;

  /* accent — badges and markers only */
  --gold-100: #fbefd8;
  --gold-300: #f0c56a;
  --gold-500: #c88a1a;
  --gold-700: #8a5c08;

  /*
   * Site-only, and deliberately not in the app's palette.
   *
   * `--gold-700` on `--gold-100` measures 5.10:1 — comfortably AA at 14px bold,
   * and the lowest ratio anywhere on this page. That is fine for a badge. It is
   * not obviously fine for *these two* badges, which are the "Not licensed"
   * chip and the rule beside "nothing here has touched a customer or a
   * shilling" — the two things a reader doing diligence is looking for, on a
   * page whose audience may well open it on a phone in daylight.
   *
   * `--gold-800` is 7.82:1 on the chip and 7.89:1 on the notice, so both clear
   * AAA. Same hue, four steps darker.
   *
   * It is site-only because the app has no equivalent element; inventing a
   * matching token over in `web/` to keep two palettes symmetrical would be
   * changing the app to satisfy the site.
   */
  --gold-800: #654305;

  /* neutrals */
  --ink-900: #101a17;
  --ink-700: #33423d;
  --ink-500: #5b6b65;
  --ink-200: #cfd7d3;
  --ink-100: #e6ebe8;
  --ink-50: #f4f7f5;

  /* state */
  --warn-100: #fdf0d5;
  --warn-700: #7d4e04;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --radius-card: 1rem;
  --radius-control: 0.75rem;
  --shadow-card: 0 1px 2px rgb(16 26 23 / 0.05), 0 8px 24px rgb(16 26 23 / 0.06);

  /* One measure, one gutter. Everything on the page uses these two. */
  --measure: 62rem;
  --gutter: 1.25rem;
}

/* --------------------------------------------------------------------- base */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  /* 17px, not 16 — this page is read on a phone at arm's length outdoors. */
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-900);
  background: #fff;
}

/* A visible focus ring everywhere, including for mouse users. Removing it for
 * the mouse is the commonest way a site becomes unusable by keyboard, because
 * nobody notices it is gone. */
:focus-visible {
  outline: 3px solid var(--avesla-500);
  outline-offset: 2px;
  border-radius: 4px;
}

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

a:hover {
  color: var(--avesla-500);
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 7vw, 3.25rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 700;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 700;
}

p {
  margin: 0 0 1rem;
  max-width: 42rem;
}

/* Skip link — the first thing in the tab order, invisible until focused. */
.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--gutter);
  top: var(--gutter);
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--avesla-900);
  color: #fff;
  border-radius: var(--radius-control);
}

/* ------------------------------------------------------------------ layout */

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  padding-block: clamp(2.5rem, 8vw, 4.5rem);
  border-top: 1px solid var(--ink-100);
}

.lede {
  font-size: 1.1875rem;
  color: var(--ink-700);
}

/* ------------------------------------------------------------------- header */

.masthead {
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--ink-100);
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
}

.wordmark {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--avesla-800);
}

.masthead p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------- hero */

.hero {
  border-top: 0;
  background: linear-gradient(180deg, var(--avesla-50), #fff 70%);
}

.hero h1 {
  max-width: 20ch;
}

.hero .lede {
  font-size: clamp(1.125rem, 2.6vw, 1.375rem);
  max-width: 46rem;
}

.origin {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--ink-500);
}

/* ------------------------------------------------------------------- chips */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--avesla-100);
  color: var(--avesla-800);
}

/* The two chips that say what Avesla is *not* carry the accent, because those
 * are the two facts a reader doing diligence is looking for and the two a
 * brochure normally buries. */
.chip--note {
  background: var(--gold-100);
  color: var(--gold-800);
}

/* -------------------------------------------------------------------- cards */

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 46rem) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

.card {
  padding: 1.5rem;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.card h3 {
  color: var(--avesla-800);
}

.card p:last-child {
  margin-bottom: 0;
}

.card .swahili {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------- list */

.points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.points li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--ink-100);
  max-width: 46rem;
}

.points li:first-child {
  padding-top: 0;
}

.points li:last-child {
  border-bottom: 0;
}

.points strong {
  color: var(--avesla-800);
}

/* -------------------------------------------------------------------- table */

.facts {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  text-align: left;
}

.facts caption {
  text-align: left;
  color: var(--ink-500);
  font-size: 0.9375rem;
  padding-bottom: 0.75rem;
}

.facts th,
.facts td {
  padding: 0.75rem 0.5rem 0.75rem 0;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
}

.facts th {
  font-weight: 600;
  color: var(--ink-700);
  width: 11rem;
}

.facts thead th {
  color: var(--avesla-800);
  border-bottom-width: 2px;
}

/*
 * The rails table is three columns of prose, which is unreadable on a phone as
 * a table. Below 46rem each row becomes a small stacked block with its own
 * heading — the same information, in the order somebody reads it aloud. The
 * `th` is promoted to a block heading and the two cells are labelled from
 * `data-label`, so the column meaning is not lost when the columns are.
 */
.facts--rails th[scope="col"] {
  width: auto;
}

.facts--rails td {
  padding-right: 1rem;
}

/*
 * 45.9375rem, not 46rem — and the odd number is load-bearing.
 *
 * `.cards` opens at `min-width: 46rem`. A `max-width: 46rem` here would mean
 * **both blocks apply at exactly 736px**: the cards would go two-up while the
 * rails table stacked, with desktop rules bleeding into the stacked layout. It
 * is invisible at every width except one, which is the kind of bug that is
 * found by a person resizing a window and never by a test that checks two
 * widths. Found in a browser on 3 September; 45.9375rem is 735px at a 16px
 * root, so the two blocks are now strictly adjacent and never simultaneous.
 */
@media (max-width: 45.9375rem) {
  .facts--rails thead {
    /* Not `display: none` — that removes it from the accessibility tree too,
     * and the column meanings are still carried by `data-label` below. This
     * hides it visually while leaving it available. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .facts--rails tr {
    display: block;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--ink-100);
  }

  .facts--rails tr:last-child {
    border-bottom: 0;
  }

  .facts--rails th[scope="row"],
  .facts--rails td {
    display: block;
    width: auto;
    border-bottom: 0;
    padding: 0;
  }

  .facts--rails th[scope="row"] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--avesla-800);
    margin-bottom: 0.5rem;
  }

  .facts--rails td {
    margin-bottom: 0.75rem;
  }

  .facts--rails td:last-child {
    margin-bottom: 0;
  }

  .facts--rails td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin-bottom: 0.15rem;
  }
}

/* ------------------------------------------------------------------- notice */

/*
 * The notice carries the single most important sentence on the page — that
 * nothing here has touched a customer or a shilling. It was originally a 1px
 * gold-300 hairline on the warn-100 tint, which measures 1.44:1 against its own
 * background; on a cheap phone screen in Dar es Salaam sunlight that is not a
 * border, it is a rumour, and the tint itself is only 1.13:1 against the page.
 * The solid gold-700 rule at 5.15:1 is what makes the block unmistakably a
 * block. Non-text contrast (WCAG 1.4.11) does not strictly require it — this is
 * a decorative border by the letter of the spec — but the reason for the border
 * is that the callout must survive being read outdoors, and the letter of the
 * spec is not that reason.
 */
.notice {
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-card);
  background: var(--warn-100);
  border: 1px solid var(--gold-300);
  border-left: 5px solid var(--gold-800);
  color: var(--warn-700);
}

.notice p {
  margin-bottom: 0;
  color: var(--warn-700);
  max-width: none;
}

.notice strong {
  color: var(--warn-700);
}

/* ------------------------------------------------------------------ contact */

.contact-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

/* ------------------------------------------------------------------- footer */

footer {
  padding-block: 2.5rem;
  border-top: 1px solid var(--ink-100);
  background: var(--ink-50);
  color: var(--ink-500);
  font-size: 0.9375rem;
}

footer p {
  max-width: 46rem;
}

footer p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------- misc */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}