/* =========================================================
   Adel Metni Foundation – core stylesheet
   Palette: asphalt black + signal yellow
   Contrast rule: signal yellow NEVER on white, black NEVER on
   anything but yellow/paper. Every pair below passes WCAG AA.
   ========================================================= */

:root {
  /* Surfaces */
  --asphalt:      #0B0B0C;
  --graphite:     #141518;
  --graphite-hi:  #1C1D21;
  --paper:        #FAFAF7;

  /* Lines */
  --line:         #2A2C31;
  --line-strong:  #3A3D44;

  /* ---- Semantic accents (Option A) ------------------------------
     Each colour carries one meaning and never strays from it:
       blue   = safety, training, instruction
       red    = risk, statistics, warnings
       yellow = motorsport, and anything you click
     The logo uses pure print primaries. On screen pure blue is 2.3:1 on
     black and pure yellow is 1.03:1 on white, so each hue needs a bright
     tone for dark sections and a deep one for light sections. The hue is
     unchanged, so the family still reads as the mark.
     Every pair below passes WCAG AA on its intended background. */

  --signal:       #FFC200;  /* 12.2:1 on asphalt */
  --signal-deep:  #8F6A00;  /*  4.8:1 on paper   */

  --safety:       #4DA3FF;  /*  7.5:1 on asphalt */
  --safety-deep:  #0B57C4;  /*  6.3:1 on paper   */

  --alert:        #FF6152;  /*  6.6:1 on asphalt */
  --alert-deep:   #C41F14;  /*  5.7:1 on paper   */

  /* Text on dark */
  --ink-hi:       #FAFAF7;
  --ink-mid:      #B4B8BF;  /* 9.5:1 */
  --ink-low:      #8A8F98;  /* 6.1:1 */

  /* Type */
  --display: "Saira Condensed", "Arial Narrow", sans-serif;
  --body:    "Archivo", system-ui, -apple-system, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, monospace;

  /* Rhythm */
  --shell: 1140px;
  --pad:   clamp(20px, 5vw, 48px);
  --r:     8px;
  --r-lg:  14px;
}

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

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

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

body {
  margin: 0;
  background: var(--asphalt);
  color: var(--ink-mid);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #FFD34D; }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
  border-radius: 2px;
}

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--signal); color: var(--asphalt);
  padding: 12px 20px; font-weight: 600; z-index: 200; border-radius: 0 0 var(--r) 0;
}
.skip:focus-visible { left: 0; }

/* Programmatic focus target for the back-to-top button. Never outlined,
   because the user did not tab here. */
#main:focus { outline: none; }

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

/* ---------- Type scale ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink-hi);
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: 0; }
h4 { font-size: 1.05rem; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.02rem, 1.9vw, 1.2rem); color: var(--ink-mid); max-width: 56ch; }
.measure { max-width: 68ch; }

/* Pit-board eyebrow: mono label behind a short signal rule */
.eyebrow {
  font-family: var(--data);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--signal);
  flex: none;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body); font-size: .93rem; font-weight: 600;
  padding: 13px 24px; border-radius: var(--r);
  text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease;
  justify-content: center;
  text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--signal); color: var(--asphalt); }
.btn-primary:hover { background: #FFD34D; color: var(--asphalt); }

.btn-ghost { border-color: var(--line-strong); color: var(--ink-hi); background: transparent; }
.btn-ghost:hover { border-color: var(--ink-low); background: var(--graphite); color: var(--ink-hi); }

.btn-sm { padding: 9px 17px; font-size: .84rem; }

/* ---------- Header ---------- */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,11,12,.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead-in {
  display: flex; align-items: center; gap: 22px;
  min-height: 66px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand img { width: 30px; height: 30px; }
.brand span {
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  color: var(--ink-hi); letter-spacing: .01em; line-height: 1.1;
}

/* Brand at the start, links centred in the space between, language and
   donate at the end. flex:1 on the nav is what does the centring. */
.nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.masthead-end {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-donate { display: none; }

.nav a {
  color: var(--ink-mid); text-decoration: none;
  font-size: .89rem; padding: 8px 12px; border-radius: var(--r);
  transition: color .15s ease, background .15s ease;
}
.nav a:hover { color: var(--ink-hi); background: var(--graphite); }
.nav a[aria-current="page"] { color: var(--signal); }

.langs { display: flex; align-items: center; gap: 2px; }
.langs a {
  font-family: var(--data); font-size: .74rem; letter-spacing: .04em;
  color: var(--ink-low); text-decoration: none; padding: 6px 8px; border-radius: 5px;
}
.langs a:hover { color: var(--ink-hi); background: var(--graphite); }
.langs a[aria-current="true"] { color: var(--signal); }

.burger {
  display: none; flex: none;
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--ink-hi); width: 42px; height: 40px; border-radius: var(--r);
  cursor: pointer; font-size: 1.1rem; align-items: center; justify-content: center;
}

@media (max-width: 900px) {
  .burger { display: inline-flex; }

  /* The language switcher stays visible in the bar. Burying it in a menu
     hides the fact that the site exists in Arabic and French at all, which
     is the single most important thing to signal on a trilingual site. */
  .masthead-end { margin-inline-start: auto; gap: 8px; }
  .end-donate { display: none; }
  .nav-donate { display: inline-flex; }

  .nav {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--asphalt); border-bottom: 1px solid var(--line);
    padding: 8px var(--pad) 20px; margin: 0;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav .btn { margin-top: 16px; justify-content: center; border-bottom: 0; }

  /* Three targets side by side need clear separation, or a thumb catches
     the wrong one. 42px each with a 6px gap is the minimum that works. */
  .langs { gap: 6px; }
  .langs a {
    min-width: 42px; min-height: 42px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-strong); border-radius: 7px;
    font-size: .78rem;
  }
  .langs a[aria-current="true"] { border-color: var(--signal); }
}

/* ---------- Sections ---------- */

.band { padding-block: clamp(56px, 9vw, 104px); }
.band + .band { border-top: 1px solid var(--line); }
.band-tint { background: var(--graphite); }

.head-block { max-width: 62ch; margin-bottom: 44px; }
.head-block p { margin-top: 16px; color: var(--ink-mid); }

/* ---------- Hero ---------- */

.hero { padding-block: clamp(56px, 8vw, 92px) clamp(40px, 6vw, 64px); }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 20px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- Stopping-distance module (signature) ---------- */

.sd {
  margin-top: clamp(44px, 6vw, 68px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--graphite);
  overflow: hidden;
}

.sd-top {
  display: flex; flex-wrap: wrap; gap: 20px 32px;
  align-items: flex-end; justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}

.sd-title { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--ink-hi); }
.sd-title + p { font-size: .87rem; color: var(--ink-low); margin: 5px 0 0; max-width: 46ch; }

.sd-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

.sd-speed { display: flex; align-items: center; gap: 13px; }
.sd-speed label { font-family: var(--data); font-size: .74rem; letter-spacing: .1em; color: var(--ink-low); text-transform: uppercase; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 190px; height: 4px; border-radius: 2px;
  background: var(--line-strong); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--signal); border: 3px solid var(--asphalt); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--signal); border: 3px solid var(--asphalt); cursor: pointer;
}

.sd-readout {
  font-family: var(--data); font-weight: 500; font-size: 1.15rem;
  color: var(--signal); min-width: 86px; font-variant-numeric: tabular-nums;
}

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; }
.seg button {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--body); font-size: .82rem; font-weight: 500;
  color: var(--ink-low); padding: 8px 15px;
  transition: background .15s ease, color .15s ease;
}
.seg button[aria-pressed="true"] { background: var(--signal); color: var(--asphalt); font-weight: 600; }
.seg button:not([aria-pressed="true"]):hover { color: var(--ink-hi); background: var(--graphite-hi); }

/* Road strip */
.sd-road {
  position: relative;
  height: 118px;
  background: var(--asphalt);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* hazard kerbing top + bottom */
.sd-road::before, .sd-road::after {
  content: ""; position: absolute; inset-inline: 0; height: 7px;
  background: repeating-linear-gradient(135deg,
    var(--signal) 0 11px, var(--asphalt) 11px 22px);
  opacity: .5;
}
.sd-road::before { top: 0; }
.sd-road::after { bottom: 0; }

.sd-bars { position: absolute; inset: 7px 0; display: flex; align-items: center; }

.sd-bar {
  height: 34px; position: relative;
  transition: width .28s cubic-bezier(.22,.61,.36,1);
  display: flex; align-items: center;
}
.sd-bar-think { background: var(--line-strong); }
.sd-bar-brake { background: var(--signal); }

.sd-bar b {
  font-family: var(--data); font-size: .72rem; font-weight: 500;
  position: absolute; inset-inline-start: 10px; white-space: nowrap;
}
.sd-bar-think b { color: var(--ink-hi); }
.sd-bar-brake b { color: #3A2900; }

/* the hazard the driver is reacting to */
.sd-hazard {
  position: absolute; top: 7px; bottom: 7px;
  width: 3px; background: var(--ink-hi);
  transition: inset-inline-start .28s cubic-bezier(.22,.61,.36,1);
}
.sd-hazard::after {
  content: "stop"; position: absolute; top: 8px; inset-inline-start: 9px;
  font-family: var(--data); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-hi); white-space: nowrap;
}

.sd-legend {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sd-legend div { padding: 17px 24px; }
.sd-legend div + div { border-inline-start: 1px solid var(--line); }
.sd-legend dt {
  font-family: var(--data); font-size: .7rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-low); margin: 0 0 6px;
  display: flex; align-items: center; gap: 8px;
}
.sd-legend dt i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.sd-legend dd {
  margin: 0; font-family: var(--data); font-size: 1.5rem; font-weight: 500;
  color: var(--ink-hi); font-variant-numeric: tabular-nums;
}
.sd-legend .total dd { color: var(--alert); }  /* a stopping distance is a risk figure, not an action */

.sd-foot {
  padding: 13px 24px; border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--ink-low);
}

@media (max-width: 700px) {
  .sd-legend { grid-template-columns: 1fr; }
  .sd-legend div + div { border-inline-start: 0; border-top: 1px solid var(--line); }
  input[type="range"] { width: 100%; }
  .sd-speed { width: 100%; }
}

/* ---------- Stats band ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.stats > div { padding: 30px var(--pad); border-inline-start: 1px solid var(--line); }
.stats > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.stats dt {
  font-family: var(--display); font-size: clamp(2rem, 4.4vw, 2.9rem);
  font-weight: 600; color: var(--signal); line-height: 1;
}
.stats dd { margin: 9px 0 0; font-size: .89rem; color: var(--ink-low); }

@media (max-width: 620px) {
  .stats > div { border-inline-start: 0; border-top: 1px solid var(--line); padding-inline: 0; }
  .stats > div:first-child { border-top: 0; padding-top: 0; }
}

/* ---------- Cards ---------- */

.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.card {
  background: var(--graphite);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex; flex-direction: column;
  transition: border-color .18s ease;
}
.card:hover { border-color: var(--line-strong); }
.card h3 { margin-bottom: 9px; }
.card p { font-size: .93rem; color: var(--ink-low); }
.card .card-foot { margin-top: auto; padding-top: 18px; }

.card-flag { border-top: 2px solid var(--signal); border-radius: 0 0 var(--r-lg) var(--r-lg); }

.tag {
  display: inline-block;
  font-family: var(--data); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--signal);
  border: 1px solid var(--line-strong); border-radius: 4px;
  padding: 4px 9px; margin-bottom: 15px;
}
.tag-quiet { color: var(--ink-low); }

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

.table-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
caption { text-align: start; padding: 0 0 14px; color: var(--ink-low); font-size: .88rem; }
thead th {
  text-align: start; background: var(--graphite);
  font-family: var(--data); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-low); font-weight: 500; padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
tbody td { padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-mid); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--graphite); }
td.date { font-family: var(--data); color: var(--signal); white-space: nowrap; font-size: .86rem; }
td.name { color: var(--ink-hi); font-weight: 500; }

.status { font-family: var(--data); font-size: .74rem; letter-spacing: .05em; white-space: nowrap; }
.status-open { color: var(--signal); }
.status-few { color: var(--ink-hi); }
.status-full { color: var(--ink-low); }

@media (max-width: 760px) {
  thead { display: none; }
  tbody td { display: block; padding: 4px 16px; border: 0; }
  tbody td.date { padding-top: 16px; }
  tbody tr { display: block; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
}

/* ---------- Forms ---------- */

.form { display: grid; gap: 17px; max-width: min(100%, 560px); }
.field { display: grid; gap: 7px; }
.field label { font-size: .87rem; color: var(--ink-hi); font-weight: 500; }
.field .hint { font-size: .8rem; color: var(--ink-low); }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font-family: var(--body); font-size: .95rem;
  background: var(--asphalt); color: var(--ink-hi);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 12px 14px; width: 100%;
}
textarea { min-height: 130px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #6C7079; }
input:focus, select:focus, textarea:focus { border-color: var(--signal); outline: none; box-shadow: 0 0 0 3px rgba(255,194,0,.2); }

.err { color: #FF8A80; font-size: .82rem; }

.note {
  border-inline-start: 2px solid var(--signal);
  background: var(--graphite);
  padding: 16px 20px; border-radius: 0 var(--r) var(--r) 0;
  font-size: .9rem;
}

/* ---------- Supporters ---------- */

.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(50%, 140px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.logos a {
  background: var(--asphalt); min-height: 84px;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
  font-family: var(--data); font-size: .76rem; letter-spacing: .04em;
  color: var(--ink-low); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.logos a:hover { background: var(--graphite); color: var(--ink-hi); }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 72px) 30px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px 28px; }
.footer h4 {
  font-family: var(--data); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-low); font-weight: 500; margin-bottom: 14px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer ul a { color: var(--ink-mid); text-decoration: none; font-size: .89rem; }
.footer ul a:hover { color: var(--signal); }

.newsletter { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.newsletter input { flex: 1 1 190px; }

.social { display: flex; gap: 8px; margin-top: 18px; }
.social a {
  width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mid); text-decoration: none; font-size: .74rem; font-family: var(--data);
}
.social a:hover { border-color: var(--signal); color: var(--signal); }

/* Three zones: links at the start, the build credit centred, copyright at
   the end. `end` rather than `right` so the copyright lands on the left in
   Arabic without a separate rule. */
.colophon {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px 26px;
  font-size: .82rem; color: var(--ink-low);
}
.colophon p { margin: 0; }
.colophon-end { text-align: end; }
.colophon a { color: var(--ink-low); text-decoration: none; }
.colophon a:hover { color: var(--signal); }

.credit {
  text-align: center;
  font-family: var(--data);
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--ink-low);
  white-space: nowrap;
}
.credit-name {
  color: var(--ink-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.credit-name:hover { color: var(--signal); border-color: var(--signal); }
.credit:hover .credit-name { color: var(--signal); border-color: var(--signal); }

/* Stack and centre once there is no room for three zones */
@media (max-width: 780px) {
  .colophon { grid-template-columns: 1fr; text-align: center; gap: 16px; }
  .colophon-end { text-align: center; }
  .credit { order: 3; }
}

@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Page header (interior pages) ---------- */

.pagehead { padding-block: clamp(46px, 6vw, 76px) clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.pagehead h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
.pagehead .lede { margin-top: 18px; }

.crumbs { font-family: var(--data); font-size: .74rem; letter-spacing: .06em; color: var(--ink-low); margin-bottom: 20px; }
.crumbs a { color: var(--ink-low); text-decoration: none; }
.crumbs a:hover { color: var(--signal); }

/* ---------- Prose ---------- */

.prose h2 { margin-top: 46px; margin-bottom: 16px; }
.prose h3 { margin-top: 32px; margin-bottom: 10px; }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-inline-start: 20px; }
.prose li { margin-bottom: 8px; }

.pull {
  font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600;
  color: var(--ink-hi); line-height: 1.2; margin: 40px 0;
  border-inline-start: 3px solid var(--signal); padding-inline-start: 22px;
}

/* ---------- Split ---------- */

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(28px, 5vw, 60px); align-items: start; }

/* ---------- Amount picker (donate) ---------- */

.amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(45%, 112px), 1fr)); gap: 10px; }
.amounts button {
  background: var(--graphite); border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: 16px 10px; cursor: pointer;
  font-family: var(--body); color: var(--ink-hi); text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.amounts button strong { display: block; font-family: var(--data); font-size: 1.15rem; font-weight: 500; }
.amounts button small { display: block; color: var(--ink-low); font-size: .76rem; margin-top: 5px; }
.amounts button[aria-pressed="true"] { border-color: var(--signal); background: rgba(255,194,0,.09); }
.amounts button[aria-pressed="true"] strong { color: var(--signal); }
.amounts button:hover { border-color: var(--ink-low); }

/* ---------- Floating "back to top" ----------
   A car seen from above, nose pointing up: the direction it faces is the
   direction it takes you. Sits inline-end so it flips to the left in Arabic.
   Hidden until the reader is far enough down to want it.
   ---------------------------------------------------------------- */

.to-top {
  position: fixed;
  inset-inline-end: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 90;
  width: 54px; height: 54px;
  padding: 0;
  border-radius: 50%;
  background: var(--graphite);
  border: 1px solid var(--line-strong);
  color: var(--ink-mid);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease,
              border-color .18s ease, color .18s ease, background .18s ease;
}

.to-top.show { opacity: 1; visibility: visible; transform: none; }

.to-top svg { width: 27px; height: 27px; transition: transform .22s ease; }

/* Window glass reads as a cutout: it matches whatever sits behind the car */
.to-top .glass { fill: var(--graphite); transition: fill .18s ease; }

.to-top:hover, .to-top:focus-visible {
  color: var(--signal);
  border-color: var(--signal);
  background: var(--asphalt);
}
.to-top:hover .glass, .to-top:focus-visible .glass { fill: var(--asphalt); }

/* The car pulls away from the kerb */
.to-top:hover svg, .to-top:focus-visible svg { transform: translateY(-3px); }
.to-top:active svg { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .to-top svg { transition: none; }
  .to-top:hover svg, .to-top:focus-visible svg { transform: none; }
}

@media (max-width: 560px) {
  .to-top { width: 48px; height: 48px; }
  .to-top svg { width: 24px; height: 24px; }
}

/* =========================================================
   Semantic accent utilities
   Colour classifies; it never decorates. If a colour is not
   saying something, it should not be on the page.
   ========================================================= */

.eyebrow-safety { color: var(--safety); }
.eyebrow-safety::before { background: var(--safety); }
.eyebrow-alert  { color: var(--alert); }
.eyebrow-alert::before  { background: var(--alert); }

.tag-safety { color: var(--safety); }
.tag-alert  { color: var(--alert); }

.card-safety { border-top: 2px solid var(--safety); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.card-alert  { border-top: 2px solid var(--alert);  border-radius: 0 0 var(--r-lg) var(--r-lg); }

.btn-safety { border: 1px solid var(--safety); color: var(--safety); background: transparent; }
.btn-safety:hover { background: var(--safety); color: var(--asphalt); }

/* Red is reserved for figures that describe danger */
.figure-alert { color: var(--alert); }
.pull-alert  { border-inline-start-color: var(--alert); }
.pull-safety { border-inline-start-color: var(--safety); }

/* ---------- Light sections ----------
   Alternating backgrounds break up a long dark page. The pattern is fixed
   by position, not by content, so Arabic, English and French keep the same
   rhythm even though their text runs to different lengths. */

/* A light band needs no divider line: the change of background is the
   division. Borders are suppressed on both sides so the seam stays clean. */
.band-light { background: var(--paper); color: #4A4D53; border-top: 0; }
.band-light + .band, .band + .band-light { border-top: 0; }
.band-light h1, .band-light h2, .band-light h3, .band-light h4 { color: #101113; }
.band-light .lede { color: #4A4D53; }
.band-light .eyebrow { color: var(--signal-deep); }
.band-light .eyebrow::before { background: var(--signal-deep); }
.band-light .eyebrow-safety { color: var(--safety-deep); }
.band-light .eyebrow-safety::before { background: var(--safety-deep); }
.band-light .eyebrow-alert { color: var(--alert-deep); }
.band-light .eyebrow-alert::before { background: var(--alert-deep); }
.band-light a { color: var(--safety-deep); }
.band-light a:hover { color: var(--alert-deep); }
.band-light .card { background: #FFFFFF; border-color: #E2E2DD; color: #4A4D53; }
.band-light .card p { color: #55585E; }
.band-light .tag { color: var(--signal-deep); border-color: #D8D8D2; }
.band-light .tag-safety { color: var(--safety-deep); }
.band-light .tag-alert { color: var(--alert-deep); }
.band-light .btn-ghost { border-color: #C9C9C2; color: #101113; }
.band-light .btn-ghost:hover { background: #EFEFEA; border-color: #A8A8A0; }
.band-light .pull { color: #101113; }
.band-light .logos { background: #E2E2DD; border-color: #E2E2DD; }
.band-light .logos a { background: #FFFFFF; color: #6A6D73; }
.band-light .logos a:hover { background: #F4F4EF; color: #101113; }
.band-light .figure-alert { color: var(--alert-deep); }
.band-light .stats > div { border-color: #E2E2DD; }
.band-light .stats dt { color: var(--signal-deep); }
.band-light .stats dd { color: #6A6D73; }
.band-light + .band { border-top: 0; }

/* ---------- Tagline ---------- */

.tagline {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--data); font-size: .76rem;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--signal); margin-top: 22px;
}
.tagline::before {
  content: ""; width: 3px; height: 17px;
  background: var(--signal); flex: none;
}
.band-light .tagline { color: var(--signal-deep); }
.band-light .tagline::before { background: var(--signal-deep); }

/* ---------- Real logo ---------- */

.brand-logo { height: 30px; width: auto; color: var(--ink-hi); display: block; }
.band-light .brand-logo { color: #101113; }
.footer-logo { height: 58px; width: auto; color: var(--ink-hi); display: block; }

/* ---------- Footer brand stack ---------- */

.brand-stack {
  display: grid;
  justify-items: start;
  gap: 9px;
  text-decoration: none;
}
.brand-name {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink-hi);
  letter-spacing: .01em;
}
.brand-tagline {
  font-family: var(--data);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--signal);
}
.brand-stack:hover .brand-name { color: var(--signal); }


/* =========================================================
   Tinted pills
   A coloured outline alone is too quiet to register. A soft wash of
   the same hue behind it makes the label read as a coloured object
   while keeping the text at full contrast.
   ========================================================= */

.tag {
  background: rgba(255, 194, 0, .10);
  border-color: rgba(255, 194, 0, .35);
  color: var(--signal);
}
.tag-safety {
  background: rgba(77, 163, 255, .12);
  border-color: rgba(77, 163, 255, .38);
  color: var(--safety);
}
.tag-alert {
  background: rgba(255, 97, 82, .12);
  border-color: rgba(255, 97, 82, .38);
  color: var(--alert);
}
.tag-quiet {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-low);
}

.band-light .tag {
  background: rgba(143, 106, 0, .09);
  border-color: rgba(143, 106, 0, .30);
  color: var(--signal-deep);
}
.band-light .tag-safety {
  background: rgba(11, 87, 196, .09);
  border-color: rgba(11, 87, 196, .30);
  color: var(--safety-deep);
}
.band-light .tag-alert {
  background: rgba(196, 31, 20, .09);
  border-color: rgba(196, 31, 20, .30);
  color: var(--alert-deep);
}

/* Status pills on the schedule */
.status {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid;
}
.status-open {
  color: var(--safety);
  background: rgba(77, 163, 255, .12);
  border-color: rgba(77, 163, 255, .38);
}
.status-few {
  color: var(--signal);
  background: rgba(255, 194, 0, .12);
  border-color: rgba(255, 194, 0, .38);
}
.status-full {
  color: var(--ink-low);
  background: transparent;
  border-color: var(--line-strong);
}
.band-light .status-open {
  color: var(--safety-deep);
  background: rgba(11, 87, 196, .09);
  border-color: rgba(11, 87, 196, .30);
}
.band-light .status-few {
  color: var(--signal-deep);
  background: rgba(143, 106, 0, .09);
  border-color: rgba(143, 106, 0, .30);
}

/* Stat figures take the colour of what they describe */
.stat-safety dt { color: var(--safety); }
.band-light .stat-safety dt { color: var(--safety-deep); }
.stat-alert dt { color: var(--alert); }
.band-light .stat-alert dt { color: var(--alert-deep); }

/* Legend swatches in the stopping-distance module */
.sd-legend dt i { border-radius: 999px; width: 10px; height: 10px; }

/* ---------- Red where it means danger ---------- */

/* The hazard marker is the thing you are about to hit. */
.sd-hazard-alert { background: var(--alert); }
.sd-hazard-alert::after { color: var(--alert); }

/* Wet is the higher-risk surface, so the active state turns red. */
.seg button[data-surface="wet"][aria-pressed="true"] {
  background: var(--alert);
  color: var(--asphalt);
}

/* Form errors */
.err { color: var(--alert); }
.band-light .err { color: var(--alert-deep); }

/* A warning callout, distinct from the neutral note */
.note-alert { border-inline-start-color: var(--alert); }
.band-light .note-alert { border-inline-start-color: var(--alert-deep); }

/* Numbered risk cards: the tag is a filled counter, not an outline */
.card-alert .tag {
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: center;
}

/* ---------- Schedule action column ---------- */

td.act { white-space: nowrap; text-align: end; }
td.name a { color: var(--ink-hi); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
td.name a:hover { color: var(--safety); border-color: var(--safety); }
.band-light td.name a { color: #101113; }
.band-light td.name a:hover { color: var(--safety-deep); border-color: var(--safety-deep); }

@media (max-width: 760px) {
  td.act { text-align: start; padding-top: 10px; }
}

/* Prefill confirmation on the contact form */
.note-safety { border-inline-start-color: var(--safety); }
.band-light .note-safety { border-inline-start-color: var(--safety-deep); }

/* ---------- Gallery placeholders ---------- */

.ph {
  aspect-ratio: 3 / 2;
  border-radius: var(--r);
  margin-bottom: 16px;
  background:
    repeating-linear-gradient(135deg,
      var(--line) 0 10px, transparent 10px 20px);
  border: 1px solid var(--line);
}
.band-light .ph { background:
    repeating-linear-gradient(135deg, #E2E2DD 0 10px, transparent 10px 20px);
  border-color: #E2E2DD; }

/* ---------- Inline link rows ---------- */

.linkrow { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* =========================================================
   Mobile
   Not a shrunken desktop. Things that only make sense with a
   mouse or a wide viewport are reworked, not scaled down.
   ========================================================= */

/* Nothing may push the page wider than the screen. A single overflowing
   element gives the whole document a horizontal scrollbar, which reads as
   broken even when everything else is correct. */
/* clip, not hidden. overflow-x: hidden on html/body creates a scroll
   container, which silently disables position: sticky on the header, so the
   navigation stops following the reader down the page. clip prevents the
   sideways scroll without that side effect. */
html, body { overflow-x: clip; }
body { overflow-wrap: break-word; }

@media (max-width: 900px) {
  /* Tap targets. 44px is the smallest reliably hittable size with a thumb. */
  .nav a { min-height: 46px; display: flex; align-items: center; }
  .nav .btn { min-height: 48px; }

  /* Full-width buttons stack better than a wrapped row of half-width ones */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
}

@media (max-width: 700px) {
  /* The stopping-distance module: the road strip carries the meaning, so it
     keeps its height, but the chrome around it tightens. */
  .sd-top { padding: 16px 16px; gap: 14px; }
  .sd-title { font-size: 1.08rem; }
  .sd-controls { width: 100%; }
  .seg { width: 100%; }
  .seg button { flex: 1; min-height: 44px; }
  .sd-speed { justify-content: space-between; }
  .sd-readout { min-width: auto; }
  .sd-road { height: 96px; }
  .sd-bar { height: 28px; }
  .sd-legend div { padding: 13px 16px; }
  .sd-legend dd { font-size: 1.3rem; }
  .sd-foot { padding: 12px 16px; font-size: .75rem; }

  /* Trim the vertical rhythm: on a phone the generous desktop spacing turns
     into a lot of scrolling past empty space. */
  .band { padding-block: 46px; }
  .hero { padding-block: 34px 30px; }
  .head-block { margin-bottom: 28px; }
  .card { padding: 20px; }
  .pull { margin: 28px 0; padding-inline-start: 16px; }
}

@media (max-width: 760px) {
  /* The schedule stops being a table and becomes a stack of cards. A four
     column table cannot be read on a phone, and a horizontally scrolling
     one is worse. */
  .table-wrap { border: 0; border-radius: 0; }
  tbody tr {
    background: var(--graphite);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    margin-bottom: 12px;
  }
  .band-light tbody tr { background: #FFFFFF; border-color: #E2E2DD; }
  tbody tr:hover td { background: transparent; }
  tbody td { padding: 2px 0; }
  td.date { font-size: .8rem; padding-top: 0; }
  td.name { font-size: 1.02rem; padding: 4px 0 6px; }
  td.act { padding-top: 14px; white-space: normal; text-align: start; }
  td.act .btn { width: 100%; }
}

@media (max-width: 560px) {
  /* Headline: the desktop minimum is still large on a narrow screen. */
  h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero h1 { max-width: 100%; }
  .pagehead h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }

  /* Statistics read better as two columns than one tall list */
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
    padding: 18px 0;
  }
  .stats > div:nth-child(-n+2) { border-top: 0; padding-top: 0; }
  .stats dt { font-size: 1.9rem; }
  .stats dd { font-size: .8rem; }

  .logos { grid-template-columns: 1fr 1fr; }
  .logos a { min-height: 72px; font-size: .72rem; }

  /* Donation amounts: two per row, never a cramped four */
  .amounts { grid-template-columns: 1fr 1fr; }

  .sd-legend dd { font-size: 1.15rem; }
  .card .card-foot .btn { width: 100%; }
}

@media (max-width: 380px) {
  /* Smallest phones still in use. Everything must still fit. */
  .grid-2, .grid-3, .split { grid-template-columns: 1fr; }
  .btn { padding: 12px 16px; font-size: .88rem; }
  .brand-logo { height: 26px; }
  .masthead-in { min-height: 58px; gap: 12px; }
}


@media (max-width: 420px) {
  /* Smallest phones: take the space from the logo and the gaps, not from the
     language buttons. Shrinking a tap target below 40px makes it unusable. */
  .langs { gap: 5px; }
  .langs a { min-width: 40px; min-height: 42px; font-size: .74rem; }
  .brand-logo { height: 24px; }
  .masthead-in { gap: 8px; }
  .burger { width: 40px; }
}