/* Final site-wide typography and homepage chevron consistency — 2026-07-29 */
:root {
  --type-display: "Raleway", Arial, sans-serif;
  --type-body: "Inter", Arial, sans-serif;
  --type-editorial: "Lora", Georgia, serif;
  --type-charcoal: #2d2d2d;
  --type-blue: #023fa1;
  --type-lime: #cccc33;
  --type-body-size: 1rem;
  --type-body-leading: 1.68;
  --type-h1: 2.25rem;   /* 36px mobile */
  --type-h2: 1.6875rem; /* 27px mobile */
  --type-h3: 1.375rem;  /* 22px mobile */
  --type-h4: 1.1875rem; /* 19px mobile */
  --type-h5: 1rem;      /* 16px mobile */
}

/* A single body-copy system across every page. */
html,
body {
  font-family: var(--type-body) !important;
  color: var(--type-charcoal) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

body,
p,
li,
dd,
dt,
blockquote,
figcaption,
label,
input,
textarea,
select,
.about-section__body,
.resume-editorial__summary,
.resume-editorial__company,
.resume-editorial__location,
.contact-copy,
.project-summary,
.source-media-section p,
.source-case-section p {
  font-family: var(--type-body) !important;
  font-size: var(--type-body-size) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: var(--type-body-leading) !important;
}

/* Use emphasis sparingly and consistently without heavy bolding. */
strong,
b {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

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

/* One shared semantic heading scale across the home, profile, resume,
   contact, project, and Learn More sections. */
h1,
.project-title,
.contact-title,
.about-name,
.resume-editorial h1 {
  margin-top: 0;
  font-family: var(--type-display) !important;
  font-size: var(--type-h1) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  letter-spacing: -0.038em !important;
  line-height: 1.04 !important;
}

h2,
.about-section__title,
.learn-more__title,
.resume-editorial__section > h2,
.source-media-section > h2 {
  font-family: var(--type-display) !important;
  font-size: var(--type-h2) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: -0.024em !important;
  line-height: 1.12 !important;
}

h3,
.resume-editorial__job-copy h3,
.resume-editorial__job-identity h3,
.resume-editorial__education h3,
.source-media-section > h3 {
  font-family: var(--type-display) !important;
  font-size: var(--type-h3) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: -0.016em !important;
  line-height: 1.22 !important;
}

h4 {
  font-family: var(--type-display) !important;
  font-size: var(--type-h4) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

h5 {
  font-family: var(--type-display) !important;
  font-size: var(--type-h5) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}

/* H2-level subheads use the same visual size everywhere. */
.page-profile .about-section__title,
.page-resume .resume-editorial__section > h2 {
  color: var(--type-blue) !important;
}

.project-page .learn-more__title {
  color: var(--type-charcoal) !important;
}

/* The two branded profile subheads share one intentional editorial treatment. */
.page-profile .about-section__title--mindset,
.page-profile .about-section__title--portfolio-motion {
  font-family: var(--type-editorial) !important;
  font-size: var(--type-h2) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.024em !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}

/* Profile and resume narrative copy are identical in size and leading. */
.page-profile .about-section__body,
.page-resume .resume-editorial__summary,
.page-resume .resume-editorial__job-copy li,
.page-resume .resume-editorial__education li,
.page-resume .resume-editorial__skills dd,
.page-resume .resume-editorial__company,
.page-resume .resume-editorial__location {
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-leading) !important;
}

/* Supporting labels remain light and controlled. */
.site-nav__link,
.menu-panel a,
.menu-work-toggle,
.project-filter__toggle,
.project-filter__menu button,
.view-switcher__button,
.explore-work,
.resume-editorial__download,
.back-link {
  font-family: var(--type-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

.resume-editorial__eyebrow,
.resume-editorial__date,
.project-card__meta,
.learn-more-card__meta {
  font-family: var(--type-body) !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

.page-resume .resume-editorial__role {
  font-family: var(--type-display) !important;
  font-size: var(--type-h4) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

/* Card labels are interface text rather than page headings. */
.page-home .project-card__title,
.project-page .learn-more-card__title {
  font-family: var(--type-display) !important;
  font-size: 1rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}

/* Thicken only the floating lime V below the homepage hero.
   The filter arrow beside the dropdown remains unchanged. */
.page-home .hero-scroll-indicator {
  color: var(--type-lime) !important;
}

.page-home .hero-scroll-indicator::before,
.page-home .hero-scroll-indicator::after {
  width: 23px !important;
  height: 4px !important;
  border-radius: 4px !important;
  background: currentColor !important;
}

/* Tablet: 768px–1023px, all values stay inside the requested ranges. */
@media (min-width: 768px) {
  :root {
    --type-h1: 2.75rem;  /* 44px */
    --type-h2: 2.125rem; /* 34px */
    --type-h3: 1.625rem; /* 26px */
    --type-h4: 1.3125rem;/* 21px */
    --type-h5: 1.0625rem;/* 17px */
  }
}

/* Desktop: 1024px and up, all values stay inside the requested ranges. */
@media (min-width: 1024px) {
  :root {
    --type-h1: 3.5rem;   /* 56px */
    --type-h2: 2.625rem; /* 42px */
    --type-h3: 1.875rem; /* 30px */
    --type-h4: 1.4375rem;/* 23px */
    --type-h5: 1.125rem; /* 18px */
  }
}