:root {
  --ground: #ECEBE6;
  --panel: #FBFAF9;
  --ink: #17181A;
  --muted: #5D6166;
  --hairline: #CFCDC8;
  --accent: #6C0F11;
  --label: #6C0F11;
  --linktext: #6C0F11;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #101012;
    --panel: #1A1A1D;
    --ink: #DEDDDB;
    --muted: #93928F;
    --hairline: #2C2C30;
    --accent: #6C0F11;
    --label: #93928F;
    --linktext: #DEDDDB;
  }
}

html { background: var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  font-size: 1.0625rem;
}
.mono {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

.col {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- banner ---------- */
.banner {
  background: #FBFAF9;
  border-bottom: 3px solid var(--accent);
}
.banner .col { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.banner .lockup { margin: 0; padding: 1.15rem 0; }
.banner img { height: clamp(60px, 11vw, 92px); width: auto; display: block; }
/* The banner stays light in both themes, so its nav text is set explicitly. */
.banner .sections { font-size: 0.9rem; letter-spacing: 0.04em; color: #5D6166; padding-bottom: 0.25rem; }
.banner .sections a {
  color: #17181A;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.banner .sections a:hover { text-decoration-thickness: 2.5px; }
.banner .sections a:focus-visible { outline: 2px solid #17181A; outline-offset: 3px; }

.tagline {
  margin: 3rem 0 0;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- sections ---------- */
main { display: flex; flex-direction: column; gap: 4rem; padding: 4rem 0 0; }
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.intro p { margin: 0; max-width: 65ch; }
.intro strong { font-weight: 650; }

a.def {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a.def:hover { text-decoration-thickness: 2.5px; }
a.def:focus-visible {
  outline: 2px solid var(--linktext);
  outline-offset: 3px;
}

.caps { display: flex; flex-direction: column; gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); }
.cap {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  background: var(--ground);
}
.cap dt {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label);
  padding-top: 0.3rem;
}
.cap dd { margin: 0; }
.cap h3 { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 650; }
.cap p { margin: 0; color: var(--muted); max-width: 58ch; }
@media (max-width: 34rem) {
  .cap { grid-template-columns: 1fr; gap: 0.5rem; }
}

.contact p { margin: 0 0 1rem; max-width: 60ch; }
.contact a {
  display: inline-block;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  color: var(--linktext);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.1rem;
}
.contact a:hover { border-bottom-width: 3px; }
.contact a:focus-visible {
  outline: 2px solid var(--linktext);
  outline-offset: 4px;
}

/* ---------- footer ---------- */
footer {
  margin-top: 5rem;
  border-top: 1px solid var(--hairline);
  padding: 1.5rem 0 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
}
footer p { margin: 0; }

/* 2026-09-09 SEO pass: the tagline and the section eyebrows became the pages'
   single <h1> (the logo lockup is no longer a heading). Keep their weight and
   the intro spacing exactly as the <p> versions rendered. */
.tagline, .eyebrow { font-weight: 400; }
.intro > .eyebrow { margin: 0; }