/* mayfield.technology — single-page site styles.
   Everything visual comes from the vendored design-system tokens (design-system/styles.css);
   this file only lays the page out. Keep brand values in tokens, not here. */

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

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-16) var(--page-pad-x) var(--space-10);
}

/* Shared prose measure — keeps lines to a comfortable reading width. */
.prose {
  margin: 0;
  max-width: 36em;
  font-size: var(--fs-body);
  color: var(--text-body);
}

/* ── Hero ── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding-bottom: var(--space-14);
  border-bottom: 1px solid var(--border-hairline);
}

.hero__logo {
  height: auto;
  max-width: 320px;
  width: 100%;
  margin-bottom: var(--space-4);
  /* Safety net: if the wordmark webfont is slow/unavailable, the fallback font is wider than
     the viewBox — let it overflow into the empty space to the right rather than clip the "d". */
  overflow: visible;
}

.hero__heading {
  margin: 0;
  max-width: 16em;
  font-weight: var(--fw-bold);
  font-size: 32px; /* between --fs-h1 and --fs-display: a full sentence, so smaller than the old short tagline */
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  text-wrap: balance;
}

/* Amber-gold accent bar — decoration only, per brand (gold is never text). */
.hero__accent {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}

.hero__lede {
  margin: 0;
  max-width: 34em;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--text-strong);
}

.hero__status {
  margin: var(--space-2) 0 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-tight);
  color: var(--text-label);
}

.hero__status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ── Content sections ── */
main {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding: var(--section-gap) 0;
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-label);
}

.section__heading {
  margin: 0;
  max-width: 20em;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  text-wrap: balance;
}

/* ── Contact ── */
.contact-link {
  align-self: flex-start;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--text-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}

.contact-link:hover,
.contact-link:focus-visible {
  color: var(--text-link-hover);
  border-bottom-color: currentColor;
}

/* ── Footer ── */
.site-footer {
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-tight);
  color: var(--text-muted);
}

/* ── Small screens ── */
@media (max-width: 560px) {
  .page { padding: var(--space-12) var(--space-6) var(--space-8); }
  .hero__heading { font-size: var(--fs-h2); }
  .hero__lede { font-size: var(--fs-body); }
  .section__heading { font-size: var(--fs-h2); }
  main { gap: var(--space-12); padding: var(--space-12) 0; }
}

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