/*
DP-4 text/background pairing checklist — every rule below that sets both a text
color and a background is enumerated here against the approved/banned list.
Approved: Harbour/Chaff, Chart/Chaff, Sounding/Chaff, Chaff/Harbour, Straw/Harbour,
Fog/Harbour, Chaff/Chart, Harbour/Straw, white substitutes for Chaff on dark.
Banned: Straw<->Chaff/white, Fog on Chaff, Sounding on Harbour/Chart,
Straw<->Chart, Harbour<->Chart.

  .hero              bg Harbour, text Chaff (wordmark, tagline)  -> Chaff/Harbour   OK
  .hero-rule         Straw on Harbour                            -> Straw/Harbour   OK
  .body-copy         bg Chaff, text Harbour                      -> Harbour/Chaff   OK
  .contact-lead      Sounding on Chaff                           -> Sounding/Chaff  OK
  .contact-button    bg Chart, text white                        -> white/Chart     OK (white substitutes Chaff on dark)
  .contact-button:hover              bg Harbour, text Chaff      -> Chaff/Harbour   OK
  .contact-button:focus-visible      bg Harbour, text Chaff,
                                      outline Chart (ring sits on Chaff page ground,
                                      offset 3px past the Harbour button)          OK
  .contact-address   Chart on Chaff, underlined                  -> Chart/Chaff     OK
  .contact-address:focus-visible     outline Chart on Chaff      -> Chart/Chaff     OK
  .site-footer       bg Harbour, text Fog                        -> Fog/Harbour     OK

Note: :hover and :focus-visible are each fully self-contained rules (not a shared
selector with a separate "restore" rule) so their behaviour doesn't depend on
declaration order in this file.
*/

:root {
  --he-harbour:#14222f; --he-chart:#24425c; --he-straw:#c9a227;
  --he-chaff:#f2efe6; --he-fog:#7c8a97; --he-sounding:#596a78; --he-white:#ffffff;
  --he-bg:var(--he-chaff); --he-text:var(--he-harbour);
  --he-text-muted:var(--he-sounding); --he-link:var(--he-chart);
  --he-action:var(--he-chart); --he-accent:var(--he-straw);
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Inter-700.woff2') format('woff2');
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  font-weight: 400;
  background: var(--he-bg);
  color: var(--he-text);
  -webkit-font-smoothing: antialiased;
}

/* Hero — Harbour ground */
.hero {
  background: var(--he-harbour);
  color: var(--he-chaff);
  padding: 4rem 1.5rem 3.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-mark {
  width: 64px;
  height: 64px;
  display: block;
}

.hero-wordmark {
  margin: 1.25rem 0 0;
  font-size: clamp(1.5rem, 4vw + 1rem, 2.25rem);
  font-weight: 700;
  color: var(--he-chaff);
}

.hero-rule {
  width: 56px;
  max-width: 64px;
  height: 3px;
  border: none;
  background: var(--he-straw);
  margin: 1.25rem 0;
}

.hero-tagline {
  margin: 0;
  color: var(--he-chaff);
  font-size: 1.0625rem;
  max-width: 34ch;
}

/* Body — Chaff ground */
.body-copy {
  max-width: 62ch;
  margin: 0 auto;
  padding: 3rem 1.5rem 1rem;
  color: var(--he-text);
  font-size: 1.0625rem;
  line-height: 1.6;
}

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

/* Contact — Chaff ground */
.contact {
  max-width: 62ch;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3.5rem;
}

.contact-lead {
  margin: 0 0 1.25rem;
  color: var(--he-text-muted);
  font-size: 1.0625rem;
}

.contact-button {
  display: inline-block;
  background: var(--he-action);
  color: var(--he-white);
  font-weight: 600;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border-radius: 4px;
  margin: 0 1rem 1rem 0;
}

.contact-button:hover {
  background: var(--he-harbour);
  color: var(--he-chaff);
}

.contact-button:focus-visible {
  background: var(--he-harbour);
  color: var(--he-chaff);
  outline: 2px solid var(--he-chart);
  outline-offset: 3px;
}

.contact-address {
  color: var(--he-link);
  text-decoration: underline;
  font-weight: 400;
}

.contact-address:focus-visible {
  outline: 2px solid var(--he-chart);
  outline-offset: 3px;
}

/* Footer — Harbour ground */
.site-footer {
  background: var(--he-harbour);
  color: var(--he-fog);
  text-align: center;
  padding: 2rem 1.5rem;
  font-size: 0.875rem;
}

.site-footer p { margin: 0.25em 0; }

@media (max-width: 480px) {
  .contact-button { display: block; width: 100%; text-align: center; margin: 0 0 1rem; }
  .contact-address { display: inline-block; }
}