/* Final brand, card, and typography specification — 2026-07-29 */
:root {
  --portfolio-nav: #2d2d2d;
  --portfolio-white: #ffffff;
  --portfolio-chevron: #cccc33;
  --portfolio-red: #023fa1;
  --portfolio-copy: #2d2d2d;
  --portfolio-heading-font: "Raleway", Arial, sans-serif;
  --portfolio-body-font: "Inter", Arial, sans-serif;
}

/* Consistent typography hierarchy */
html {
  font-size: 16px;
}

body,
p,
li,
dd,
dt,
blockquote,
figcaption,
input,
textarea,
select,
button {
  font-family: var(--portfolio-body-font) !important;
}

body,
p,
li,
dd,
dt,
blockquote {
  font-size: 1rem !important;
  line-height: 1.62 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-nav__link,
.project-nav__brand,
.project-card__title,
.learn-more__title,
.learn-more-card__title,
.menu-primary,
.menu-work-toggle,
.menu-work-submenu a {
  font-family: var(--portfolio-heading-font) !important;
}

h1:not(.visually-hidden),
.project-title,
.contact-title,
.about-name,
.resume-title {
  font-size: clamp(3rem, 5.8vw, 4.75rem) !important;
  font-weight: 400 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
}

h2:not(.project-card__title),
.about-section__title,
.learn-more__title {
  font-size: clamp(1.9rem, 3.2vw, 2.75rem) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
}

h3:not(.learn-more-card__title),
h4,
h5,
h6 {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.012em !important;
}

/* Navigation */
.site-header,
.site-nav,
.project-site-header,
.project-nav {
  background-color: var(--portfolio-nav) !important;
}

.site-nav,
.site-nav a,
.site-nav__link,
.project-nav,
.project-nav a,
.project-nav button,
.project-nav__brand,
.linkedin-link,
.menu-toggle {
  color: var(--portfolio-white) !important;
}

.menu-toggle__line {
  background-color: var(--portfolio-white) !important;
}

/* Arrows and chevrons */
.hero-scroll-indicator,
.project-filter__arrow,
.source-carousel-arrow,
.source-browser-edge-arrow,
.image-lightbox__arrow,
.contact-item__arrow,
.back-to-top {
  color: var(--portfolio-chevron) !important;
}

.project-filter__arrow::before,
.project-nav__back::before,
.project-nav__back span::before,
.back-to-top::before,
.back-to-top span::before {
  border-color: var(--portfolio-chevron) !important;
}

.project-nav__back,
.project-nav__back:hover,
.project-nav__back:focus-visible,
.back-to-top,
.back-to-top:hover,
.back-to-top:focus-visible {
  border: 1px solid var(--portfolio-white) !important;
  background-color: var(--portfolio-nav) !important;
  color: var(--portfolio-chevron) !important;
}

/* Homepage project grid and cards */
.page-home .project-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.page-home .project-card,
.page-home .project-card__link {
  height: auto !important;
}

.page-home .project-card {
  align-self: start !important;
  background-color: var(--portfolio-nav) !important;
}

.page-home .project-card__link {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  grid-template-rows: none !important;
  background-color: var(--portfolio-nav) !important;
}

.page-home .project-card__media {
  order: 1 !important;
}

.page-home .project-card__cover {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.page-home .project-card__content {
  order: 2 !important;
  display: flex !important;
  min-height: 50px !important;
  height: auto !important;
  padding: 12px 32px 13px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  background-color: var(--portfolio-nav) !important;
}

.page-home .project-card__title {
  margin: 0 !important;
  color: var(--portfolio-white) !important;
  font-size: clamp(0.8125rem, 0.9vw, 0.875rem) !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

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

/* Learn More cards retain links and grid, but show only covers */
.project-page .learn-more-card,
.project-page .learn-more-card__link {
  height: auto !important;
}

.project-page .learn-more-card__link {
  display: block !important;
  overflow: hidden !important;
  grid-template-rows: none !important;
  background: transparent !important;
  color: inherit !important;
}

.project-page .learn-more-card__content {
  display: none !important;
}

.project-page .learn-more-card__cover {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* White canvas throughout project pages */
.project-page,
.project-page main,
.project-page .project-main,
.project-page .project-intro,
.project-page .final-work-showcase,
.project-page .final-work-showcase__inner,
.project-page .learn-more,
.project-page .project-static-gallery,
.project-page .interactive-book__stage,
.project-page .showcase-static,
.project-page .cornerstone-video-section,
.project-page .source-case-section,
.project-page .source-media-sections,
.project-page .source-showcase,
.project-page .source-browser-stage,
.project-page .source-book-stage {
  background-color: var(--portfolio-white) !important;
}

@media (max-width: 900px) {
  .page-home .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 608px) {
  .page-home .project-grid {
    grid-template-columns: 1fr !important;
  }

  .page-home .project-card__content {
    min-height: 48px !important;
    padding: 12px 24px 13px !important;
  }
}

/* White site canvas — 2026-07-29 */
:root {
  --page-bg: #ffffff !important;
}

html,
body,
.page-home,
.page-home .hero,
.page-home .projects,
.page-profile,
.page-profile .about-page,
.page-resume,
.page-resume .resume-page,
.page-contact,
.page-contact .contact-page,
.project-page,
.project-page main,
.project-page .project-main,
.project-page .project-intro,
.project-page .final-work-showcase,
.project-page .final-work-showcase__inner,
.project-page .learn-more,
.project-page .project-static-gallery,
.project-page .interactive-book__stage,
.project-page .showcase-static,
.project-page .cornerstone-video-section,
.project-page .source-case-section,
.project-page .source-media-sections,
.project-page .source-showcase,
.project-page .source-browser-stage,
.project-page .source-book-stage {
  background-color: #ffffff !important;
}