/* thebrandonschmidt.com — page styles.
   Every value here comes from ds.css tokens; see design-handoff.md for the spec
   these classes implement. Layout only — component looks live in ds.css. */

/* — page shell — */
.page {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

.band {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--space-8);
}
.band + .band,
.site-footer { border-top: 1px solid var(--color-divider); }

/* Skip link — visually hidden until focused. */
.skip-link {
  position: absolute;
  left: var(--space-8);
  top: 0;
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-140%);
}
.skip-link:focus-visible { transform: translateY(0); }

/* — shared type helpers — */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
.label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
/* The section-heading pattern for bands 3–5. */
.section-label {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

/* — 1. header — */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-divider);
}
.wordmark {
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-header .label { letter-spacing: 0.16em; }

/* — 2. hero — */
.hero { padding-top: clamp(40px, 7vw, 96px); }
.split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
}
.hero-eyebrow { margin-bottom: var(--space-4); }
.hero-name {
  font-size: clamp(56px, 9vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0;
}
.hero-lede {
  margin: var(--space-6) 0 0;
  font-size: 19px;
  line-height: 1.5;
  max-width: 34ch;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}
.hero-actions .btn { text-decoration: none; }

/* The headline plate. */
.plate { padding: var(--space-8) var(--space-6); }
.plate .label { margin-bottom: var(--space-6); }
.plate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.plate-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--space-3);
  align-items: baseline;
}
.plate-index {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-accent-700);
}
.plate-text {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.15;
}

/* — 3–5. label + content bands — */
.row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(24px, 4vw, 64px);
}

/* — 3. about — */
.prose { max-width: 62ch; }
.prose-lead {
  font-size: 21px;
  line-height: 1.5;
  margin-top: 0;
  text-wrap: pretty;
}
.prose p:last-child { margin-bottom: 0; }
.prose-body {
  font-size: 16px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-wrap: pretty;
}

/* — 4. experience — */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-divider);
}
.timeline li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-divider);
}
.timeline-when {
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--color-accent-700);
}
.timeline-role {
  margin: 0 0 var(--space-1);
  font-size: 24px;
}
.timeline-detail {
  margin: 0;
  font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

/* — 5. elsewhere — */
.row-label-sub {
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  margin: var(--space-3) 0 0;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8) var(--space-6);
  /* "Dictionaries" blows out a track without this. */
  overflow-wrap: anywhere;
}
.link-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--space-6);
}
.link-card .card-kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--color-accent-700);
}
.link-card h3 {
  margin: var(--space-3) 0 var(--space-2);
  font-size: 24px;
}
.link-card p {
  margin: 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.link-card-go {
  margin-top: var(--space-6);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.link-card:hover { border-color: color-mix(in srgb, var(--color-text) 40%, transparent); }

/* — 6. footer — */
.site-footer {
  background: var(--color-accent-900);
  color: var(--color-neutral-100);
  padding: clamp(48px, 7vw, 88px) var(--space-8);
}
.site-footer .split {
  max-width: 1180px;
  margin: 0 auto;
}
.footer-title {
  font-size: clamp(34px, 5vw, 52px);
  margin: 0;
  line-height: 1.02;
  color: var(--color-neutral-100);
}
.footer-body {
  margin: var(--space-4) 0 0;
  font-size: 17px;
  max-width: 38ch;
  color: color-mix(in srgb, #fff 78%, transparent);
  text-wrap: pretty;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}
.footer-link {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--color-accent-300);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, #fff 35%, transparent);
}
.footer-link:hover {
  color: var(--color-accent-200);
  border-bottom-color: color-mix(in srgb, #fff 70%, transparent);
}
/* The footer sits on the dark field; the page-level accent focus ring
   disappears against it. */
.site-footer :focus-visible { outline-color: var(--color-accent-300); }
.footer-legal {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* 45% in the spec measures 4.1:1 on the dark field; 55% clears AA. */
  color: color-mix(in srgb, #fff 55%, transparent);
}

/* — primary button: the accent fill puts its 14px label at 3.7:1. accent-700
     holds the same hue at 5.8:1. Hover/active darken from there rather than
     lightening the way ds.css does. — */
.hero-actions .btn-primary,
.notfound .btn-primary {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
}
.hero-actions .btn-primary:hover,
.notfound .btn-primary:hover {
  background: var(--color-accent-800);
  border-color: var(--color-accent-800);
}
.hero-actions .btn-primary:active,
.notfound .btn-primary:active {
  background: var(--color-accent-900);
  border-color: var(--color-accent-900);
}

/* — body-copy links: accent at paragraph size fails contrast on this ground.
     Scoped to prose only — a blanket `.page a` outranks .footer-link and drops
     the footer link to 2.2:1 against the dark field. — */
.prose a,
.timeline-detail a,
.row-label-sub a { color: var(--color-accent-700); }
.prose a:hover,
.timeline-detail a:hover,
.row-label-sub a:hover { color: var(--color-accent-900); }

/* — 404 — */
/* These lived in a <style> block in 404.html. The CSP has no 'unsafe-inline'
   for styles, so the browser dropped them and the page rendered unstyled. */
.notfound {
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: var(--space-6);
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-8);
}
.notfound h1 {
  font-size: clamp(56px, 9vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0;
}
.notfound p { font-size: 19px; max-width: 34ch; margin: 0; }
/* The wordmark is a link on this page only; it carried a style attribute,
   which the CSP blocks outright — hashes do not apply to style attributes. */
a.wordmark { color: inherit; text-decoration: none; }

/* — responsive: one breakpoint — */
@media (max-width: 820px) {
  .split,
  .row { grid-template-columns: 1fr; }
  .hero-name { font-size: 56px; }
  .timeline li { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* — print — */
@media print {
  .skip-link { display: none; }
  .page { min-height: 0; }
  .site-footer { background: none; color: var(--color-text); }
  .footer-title, .footer-body, .footer-link, .footer-legal { color: var(--color-text); }
}