/* Brand: aid-labs/brand.md (palette, Lexend, coral i-dot wordmark) */
@font-face {
  font-family: "Lexend";
  src: url("/fonts/lexend-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --field: #DCEAE7;
  --ink: #1C4752;
  --ink-soft: #4A6F6A;
  --accent: #D4563B;
  --pad: clamp(20px, 4.5vw, 56px);
  --max: 1440px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --field: #10303A; --ink: #A8C8C3; --ink-soft: #7A9F9B; --accent: #FF8A6E; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--field); }
body {
  margin: 0 auto; max-width: var(--max); min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: var(--pad); gap: 2rem;
  background: var(--field); color: var(--ink);
  font-family: "Lexend", system-ui, sans-serif;
}
header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .75rem 2rem; }
p {
  margin: 0; max-width: 20ch; color: var(--ink-soft);
  font-size: clamp(1.25rem, 2.4vw, 1.85rem); line-height: 1.25; font-weight: 400; letter-spacing: -.01em;
}
a {
  color: var(--ink); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 500;
  text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .3em;
}
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 2px; }
h1 {
  grid-row: 3; margin: 0 0 -.05em; /* baseline sits ~1.4x --pad above the bottom edge: heavy type flush with the padding looked low */
  font-size: min(19.5vw, 42vh, var(--max) * .21); font-weight: 700; letter-spacing: -.035em; line-height: 1; white-space: nowrap;
  overflow: hidden; overflow: clip; /* hidden for Safari < 16. The glyphs' descent area reaches below the box and made the page scroll; "Aid Labs" has no descenders */
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The coral dot: a true circle laid over the i's tittle (Lexend 700 draws it as a .191 x .165em oval).
   Centred on the tittle at .16em across and .719em above the baseline, which sits .873em down this
   line-height: 1 box; .2em wide so it covers the oval. */
.dot { position: relative; display: inline-block; line-height: 1; }
.dot::before {
  content: ""; position: absolute; left: .06em; top: .054em; width: .2em; height: .2em;
  border-radius: 50%; background: var(--accent);
}