/*
  Semantic heading, body-copy, button, and project-card typography system.
  Loaded last on every page so legacy page-specific declarations cannot
  override the shared hierarchy.
*/
:root {
  --am-font-heading: "Raleway", Arial, sans-serif;
  --am-font-editorial: "Lora", Georgia, serif;
  --am-font-body: "Inter", Arial, sans-serif;

  --am-ink: #2d2d2d;
  --am-blue: #023fa1;
  --am-muted: #666666;
  --am-panel: #2d2d2d;

  --am-copy-size: 18px;
  --am-copy-leading: 1.55;
  --am-copy-measure: 72ch;

  /* Mobile, up to 767px */
  --am-h1: 36px;
  --am-h2: 28px;
  --am-h3: 23px;
  --am-h4: 19px;
  --am-h5: 16px;
  --am-h6: 14px;

  --am-ui-size: 16px;
  --am-ui-weight: 500;
  --am-ui-leading: 1.2;
}

/* One body-copy system. */
html body.page-home,
html body.page-profile,
html body.page-resume,
html body.page-contact,
html body.project-page {
  color: var(--am-ink) !important;
  font-family: var(--am-font-body) !important;
  font-size: var(--am-copy-size) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: var(--am-copy-leading) !important;
}

html body.page-home main p,
html body.page-home main li,
html body.page-home main dd,
html body.page-home main dt,
html body.page-home main blockquote,
html body.page-home main figcaption,
html body.page-profile main p,
html body.page-profile main li,
html body.page-profile main dd,
html body.page-profile main dt,
html body.page-profile main blockquote,
html body.page-profile main figcaption,
html body.page-resume main p,
html body.page-resume main li,
html body.page-resume main dd,
html body.page-resume main dt,
html body.page-resume main blockquote,
html body.page-resume main figcaption,
html body.page-contact main p,
html body.page-contact main li,
html body.page-contact main dd,
html body.page-contact main dt,
html body.page-contact main blockquote,
html body.page-contact main figcaption,
html body.project-page main p,
html body.project-page main li,
html body.project-page main dd,
html body.project-page main dt,
html body.project-page main blockquote,
html body.project-page main figcaption {
  color: var(--am-ink) !important;
  font-family: var(--am-font-body) !important;
  font-size: var(--am-copy-size) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: var(--am-copy-leading) !important;
}

html body.page-profile .about-section__body,
html body.page-resume .resume-editorial__summary,
html body.page-resume .resume-editorial__job-copy,
html body.page-resume .resume-editorial__education,
html body.page-resume .resume-editorial__skills,
html body.page-contact .contact-content,
html body.project-page .project-summary,
html body.project-page .source-media-section p,
html body.project-page .source-case-section p {
  max-inline-size: var(--am-copy-measure) !important;
}

html body strong,
html body b {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

html body em,
html body i {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

/*
  Semantic hierarchy:
  H1 = one page title
  H2 = major page sections
  H3 = subsections within H2
  H4–H6 = progressively deeper detail levels
*/
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body.page-profile .about-name {
  margin-top: 0 !important;
  font-style: normal !important;
  text-transform: none !important;
  text-wrap: balance;
}

html body h1,
html body.page-profile .about-name {
  color: var(--am-ink) !important;
  font-family: var(--am-font-heading) !important;
  font-size: var(--am-h1) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
}

html body h2 {
  color: var(--am-blue) !important;
  font-family: var(--am-font-editorial) !important;
  font-size: var(--am-h2) !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.12 !important;
}

html body h3 {
  color: var(--am-ink) !important;
  font-family: var(--am-font-heading) !important;
  font-size: var(--am-h3) !important;
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.18 !important;
}

html body h4 {
  color: var(--am-blue) !important;
  font-family: var(--am-font-heading) !important;
  font-size: var(--am-h4) !important;
  font-weight: 600 !important;
  letter-spacing: -0.006em !important;
  line-height: 1.22 !important;
}

html body h5 {
  color: var(--am-ink) !important;
  font-family: var(--am-font-heading) !important;
  font-size: var(--am-h5) !important;
  font-weight: 600 !important;
  letter-spacing: 0.035em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

html body h6 {
  color: var(--am-muted) !important;
  font-family: var(--am-font-heading) !important;
  font-size: var(--am-h6) !important;
  font-weight: 500 !important;
  letter-spacing: 0.075em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
}

/* Profile uses one semantic H1 while preserving the repeated visual name. */
.semantic-page-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The resume role is supporting copy, not a skipped H4 level. */
html body.page-resume .resume-editorial__role {
  color: var(--am-blue) !important;
  font-family: var(--am-font-heading) !important;
  font-size: var(--am-h4) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

/* Every visible button uses the same typography as Explore Work. */
html body button,
html body .explore-work,
html body .resume-editorial__download,
html body .button,
html body .btn,
html body [role="button"],
html body .project-filter__toggle,
html body .project-filter__menu button,
html body .view-switcher__button,
html body .menu-work-toggle,
html body .interactive-book__controls button,
html body .source-carousel-arrow,
html body .source-browser-edge-arrow {
  font-family: var(--am-font-heading) !important;
  font-size: var(--am-ui-size) !important;
  font-style: normal !important;
  font-weight: var(--am-ui-weight) !important;
  letter-spacing: 0.01em !important;
  line-height: var(--am-ui-leading) !important;
  text-transform: none !important;
}

/* Keep icon-only controls visually icon-only. */
html body .menu-toggle,
html body .menu-close,
html body .menu-backdrop,
html body .back-to-top,
html body .project-nav__back,
html body .source-carousel-arrow,
html body .source-browser-edge-arrow {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  line-height: 0 !important;
}

/* Homepage project-card labels. */
html body.page-home .project-card__content {
  box-sizing: border-box !important;
  display: flex !important;
  min-height: 76px !important;
  padding: 0 24px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: var(--am-panel) !important;
  text-align: left !important;
}

html body.page-home .project-card__title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  color: #ffffff !important;
  font-family: var(--am-font-heading) !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

html body.page-home .project-card__meta {
  display: none !important;
}

@media (min-width: 768px) {
  :root {
    --am-h1: 44px;
    --am-h2: 34px;
    --am-h3: 27px;
    --am-h4: 21px;
    --am-h5: 17px;
    --am-h6: 15px;
    --am-copy-leading: 1.5;
  }

  html body.page-home .project-card__content {
    min-height: 80px !important;
    padding-inline: 28px !important;
  }

  html body.page-home .project-card__title {
    font-size: 19px !important;
  }
}

@media (min-width: 1024px) {
  :root {
    --am-h1: 56px;
    --am-h2: 42px;
    --am-h3: 32px;
    --am-h4: 23px;
    --am-h5: 19px;
    --am-h6: 16px;
    --am-copy-leading: 1.55;
  }

  html body.page-home .project-card__content {
    min-height: 84px !important;
    padding-inline: 32px !important;
  }

  html body.page-home .project-card__title {
    font-size: 20px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --am-copy-leading: 1.5;
    --am-copy-measure: 100%;
  }
}