/* peterkarth.com — layout for the "modular grid" composition (option 1c).
   Every section is a cell in one 12-column grid; the 1px gap over a
   divider-coloured backdrop is what draws the hairlines between them.
   Tokens and components come from ds/styles.css — nothing here redefines
   the design system, it only arranges it. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px 48px;
}

/* — masthead — */
.site-nav { padding: 20px 0; gap: 28px; }
.site-nav .resume-link { padding: 6px 14px; }

/* Eyebrow text. Mirrors the h6 treatment without spending a heading level
   on a label that sits above the h1. */
.eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 13px;
  line-height: 1.12;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  color: var(--color-accent-700);
}

/* — the grid — */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
  margin-top: 8px;
}
.cell { background: var(--color-bg); }
.grid [id] { scroll-margin-top: 16px; }

/* — hero — */
.hero {
  grid-column: span 8;
  padding: 40px 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}
.hero h1 {
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1;
  margin: 0;
  max-width: 640px;
  letter-spacing: -0.02em;
}
.hero-lede {
  font-size: 17px;
  line-height: 1.5;
  max-width: 560px;
  margin: 0;
}

/* — stat stack — */
.stats {
  grid-column: span 4;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-divider);
}
.stat { background: var(--color-bg); padding: 20px 24px; }
.stat-value {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 40px;
  line-height: 1;
  color: var(--color-accent-700);
}
.stat-label { font-size: 13px; margin-top: 6px; }

/* — section headers — */
.section-head {
  grid-column: span 12;
  padding: 28px 40px 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.section-head h2 { font-size: 30px; margin: 0; }
.section-note { font-size: 13px; }

/* — work — */
.job {
  grid-column: span 4;
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.job h3 { font-size: 24px; margin: 0; }
.job-role { font-size: 13px; color: var(--color-accent-700); margin: 0; }
.job ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.job li { margin: 0 0 6px; }
.job li::marker { color: var(--color-accent); }

/* — education — */
/* Full-width cell whose internal 3fr/9fr split echoes the outer 12-column
   rhythm, so the heading lines up with the skills column beneath it. */
.education {
  grid-column: span 12;
  padding: 28px 40px;
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: 32px;
}
.education h2 { font-size: 30px; margin: 0; }
.education h3 { font-size: 24px; margin: 0 0 2px; }
.education p { font-size: 15px; margin: 0; }

/* — skills — */
.skills-head { grid-column: span 3; padding: 28px 32px; }
.skills-head h2 { font-size: 30px; margin: 0; }
.skill-group { grid-column: span 3; padding: 28px 32px; }
.skill-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.skill-list { font-size: 16px; line-height: 1.6; }

/* — contact — */
.contact-lead {
  grid-column: span 3;
  background: var(--color-accent-900);
  color: var(--color-bg);
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-lead h2 { font-size: 34px; margin: 0; }
.contact-lead p { font-size: 15px; margin: 0; color: var(--color-accent-300); }

.contact-link {
  grid-column: span 2;
  padding: 28px 32px;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* The address is the one value too long for a 2-column cell, so it borrows a
   column from the lead: 3 + 3 + 2 + 2 + 2 still totals the row. */
.contact-link.is-email { grid-column: span 3; }
.contact-link:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.contact-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  color: var(--color-accent-700);
}
/* Never split an address across lines — a broken email reads as a typo.
   Since it can no longer wrap, it would overflow if the webfont failed and
   the text fell back to a normal-width face (220px in a 211px cell), so
   keep a condensed face in the fallback stack. */
.contact-value.is-address {
  white-space: nowrap;
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}
.contact-link:hover .contact-value { color: var(--color-accent-800); }

.site-footer { font-size: 12px; margin: 24px 0 0; }

/* ── Tablet: the 8/4 split stops earning its keep, so the hero takes the
      full width and the stat stack turns into a 2×2 block. ── */
@media (max-width: 1040px) {
  .page { padding: 0 32px 40px; }
  .hero { grid-column: span 12; padding: 36px 32px 40px; gap: 36px; }
  .stats {
    grid-column: span 12;
    grid-template-rows: none;
    grid-template-columns: repeat(2, 1fr);
  }
  .section-head { padding: 24px 32px 12px; }
  .education { padding: 24px 32px; }
  .job { grid-column: span 6; }
  .skills-head { grid-column: span 12; }
  .skill-group { grid-column: span 4; }
  .contact-lead { grid-column: span 12; }
  .contact-link, .contact-link.is-email { grid-column: span 6; }
}

/* ── Phone: one cell per row. ── */
@media (max-width: 700px) {
  .page { padding: 0 20px 32px; }
  .site-nav { padding: 16px 0; gap: 16px; flex-wrap: wrap; }
  .hero { padding: 28px 22px 32px; gap: 28px; }
  .hero-lede { font-size: 16px; }
  .stats { grid-template-columns: 1fr; }
  .stat { padding: 18px 22px; }
  .stat-value { font-size: 34px; }
  .section-head {
    padding: 22px 22px 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .job { grid-column: span 12; padding: 24px 22px 26px; }
  .education { padding: 24px 22px; grid-template-columns: 1fr; gap: 12px; }
  .skills-head { padding: 24px 22px; }
  .skill-group { grid-column: span 12; padding: 22px; }
  .contact-lead { padding: 28px 22px; }
  .contact-lead h2 { font-size: 30px; }
  .contact-link, .contact-link.is-email { grid-column: span 12; padding: 22px; }
}