/* Unified Learn More cards and responsive scaling — July 23, 2026 */

/* Global fluid safeguards */
html {
  max-width: 100%;
  overflow-x: clip;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Keep all primary page shells inside the viewport. */
.page-home .projects,
.page-profile .about-page,
.page-resume .resume-page,
.page-contact .contact-page,
.project-page .project-main,
.project-page .project-intro,
.project-page .source-case-section__inner,
.project-page .final-work-showcase__inner,
.project-page .project-static-gallery,
.project-page .learn-more__inner {
  min-width: 0;
  max-width: 100%;
}

/* Homepage cards remain the visual source of truth. */
.page-home .project-card__link,
.project-page .learn-more-card__link {
  overflow: hidden !important;
  border-radius: 2px !important;
  background: var(--brown, #3d332c) !important;
  color: var(--cream, #f8f4f0) !important;
  box-shadow: 0 9px 22px rgba(61, 51, 44, 0.09) !important;
  text-decoration: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}

.page-home .project-card__link:hover,
.page-home .project-card__link:focus-visible,
.project-page .learn-more-card__link:hover,
.project-page .learn-more-card__link:focus-visible {
  transform: translateY(-4px) !important;
  box-shadow: 0 15px 30px rgba(61, 51, 44, 0.16) !important;
}

/* Learn More: homepage-style cards at a deliberately smaller scale. */
.project-page .learn-more {
  display: block !important;
  margin-top: clamp(54px, 7vw, 96px) !important;
  padding: clamp(44px, 5vw, 70px) clamp(24px, 4vw, 52px) clamp(58px, 7vw, 92px) !important;
  border-top: 1px solid var(--line, rgba(61, 51, 44, 0.16)) !important;
  background: var(--page-bg, #f8f4f0) !important;
}

.project-page .learn-more__inner {
  width: min(100%, 1180px) !important;
  margin-inline: auto !important;
}

.project-page .learn-more__title {
  margin: 0 0 clamp(24px, 3vw, 34px) !important;
  color: var(--brown, #3d332c) !important;
  font-family: "Raleway", Arial, sans-serif !important;
  font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}

.project-page .learn-more__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(16px, 2vw, 24px) !important;
}

.project-page .learn-more__grid > .learn-more-card,
.project-page .learn-more__grid > .learn-more-card:nth-child(n) {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

.project-page .learn-more-card__link {
  display: grid !important;
  grid-template-rows: auto minmax(88px, auto) !important;
  width: 100% !important;
  height: 100% !important;
}

.project-page .learn-more-card__cover {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #eee7de !important;
  object-fit: cover !important;
  object-position: center !important;
  box-shadow: none !important;
  transform: none !important;
}

.project-page .learn-more-card__content {
  display: block !important;
  min-width: 0 !important;
  min-height: 88px !important;
  height: auto !important;
  padding: 14px 15px 13px !important;
  background: var(--brown, #3d332c) !important;
  color: var(--cream, #f8f4f0) !important;
  text-align: left !important;
}

.project-page .learn-more-card__title {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: "Raleway", Arial, sans-serif !important;
  font-size: clamp(12.5px, 1.05vw, 14px) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.project-page .learn-more-card__meta {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: "Raleway", Arial, sans-serif !important;
  font-size: clamp(9px, 0.78vw, 10.5px) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
  opacity: 0.92 !important;
  text-align: left !important;
}

/* Project-page fluid type and consistent page gutters. */
.project-page .project-intro {
  width: min(calc(100% - clamp(40px, 8vw, 96px)), 900px) !important;
  padding-top: clamp(46px, 6vw, 76px) !important;
  padding-bottom: clamp(38px, 5vw, 58px) !important;
}

.project-page .project-title {
  overflow-wrap: anywhere;
  font-size: clamp(2.35rem, 6vw, 5rem) !important;
  line-height: 0.98 !important;
}

.project-page .project-summary {
  max-width: 72ch !important;
  font-size: clamp(1rem, 1.65vw, 1.22rem) !important;
  line-height: 1.58 !important;
}

.project-page .project-meta-line,
.project-page .back-link {
  font-size: clamp(0.75rem, 1.2vw, 0.92rem) !important;
}

.project-page .menu-panel {
  width: min(88vw, 430px) !important;
  max-width: 100% !important;
}

.project-page .menu-panel__inner {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* Galleries and custom showcases must never create horizontal scrolling. */
.project-page .project-static-gallery,
.project-page .project-static-gallery.project-static-gallery--three,
.project-page .final-work-showcase,
.project-page .source-case-section,
.project-page .source-media-sections {
  max-width: 100% !important;
}

.project-page .project-static-gallery__item,
.project-page .source-infinite-carousel__item,
.project-page .source-browser-carousel__item,
.project-page .life-line-stack__item,
.project-page .interactive-book__page {
  min-width: 0 !important;
  max-width: 100% !important;
}

.project-page .project-static-gallery__item img,
.project-page .source-infinite-carousel__item img,
.project-page .source-browser-carousel__item img,
.project-page .showcase-static img,
.project-page .life-line-stack__item img,
.project-page .interactive-book__page img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

.project-page .source-website-frame,
.project-page .source-website-frame__viewport,
.project-page .interactive-book,
.project-page .interactive-book__stage,
.project-page .showcase-static,
.project-page .showcase-static video {
  width: 100% !important;
  max-width: 100% !important;
}

/* Supporting pages */
.page-profile .about-shell,
.page-resume .resume-page,
.page-contact .contact-page {
  width: min(calc(100% - clamp(40px, 8vw, 96px)), 1220px) !important;
  margin-inline: auto !important;
}

.page-profile .about-name,
.page-profile .about-section__title,
.page-resume .resume-title,
.page-contact .contact-title {
  overflow-wrap: anywhere;
}

.page-resume .resume-preview img,
.page-profile .person-image,
.page-profile .work-portrait {
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 1100px) {
  .project-page .learn-more__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .project-page .learn-more__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  .project-page .learn-more-card__link {
    grid-template-rows: auto minmax(92px, auto) !important;
  }

  .project-page .learn-more-card__content {
    min-height: 92px !important;
    padding: 15px 16px 14px !important;
  }

  .project-page .learn-more-card__title {
    font-size: 14px !important;
  }

  .project-page .learn-more-card__meta {
    font-size: 10.5px !important;
  }

  .page-profile .about-layout,
  .page-profile .person-layout,
  .page-contact .contact-layout {
    grid-template-columns: 1fr !important;
  }

  .page-profile .about-visual,
  .page-profile .person-collage,
  .page-profile .about-content,
  .page-profile .person-content,
  .page-contact .contact-header,
  .page-contact .contact-list {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  .page-home .hero {
    min-height: calc(100svh - 62px) !important;
    height: calc(100svh - 62px) !important;
  }

  .page-home .hero__lockup {
    width: min(88vw, 560px) !important;
  }

  .page-home .projects {
    padding-inline: 24px !important;
  }

  .page-home .project-grid {
    grid-template-columns: 1fr !important;
    width: min(100%, 440px) !important;
    margin-inline: auto !important;
  }

  .project-page .project-nav {
    padding-inline: 20px !important;
  }

  .project-page .project-intro {
    width: calc(100% - 40px) !important;
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .project-page .project-title {
    font-size: clamp(2rem, 11vw, 3.25rem) !important;
    line-height: 1 !important;
  }

  .project-page .project-summary {
    font-size: clamp(0.98rem, 4.1vw, 1.08rem) !important;
    line-height: 1.55 !important;
  }

  .project-page .learn-more {
    margin-top: 44px !important;
    padding: 38px 24px 54px !important;
  }

  .project-page .learn-more__inner {
    width: min(100%, 390px) !important;
  }

  .project-page .learn-more__title {
    margin-bottom: 22px !important;
    font-size: clamp(1.9rem, 9vw, 2.35rem) !important;
  }

  .project-page .learn-more__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .project-page .learn-more-card__link {
    grid-template-rows: auto minmax(88px, auto) !important;
  }

  .project-page .learn-more-card__content {
    min-height: 88px !important;
    padding: 14px 15px 13px !important;
  }

  .project-page .learn-more-card__title {
    font-size: 15px !important;
  }

  .project-page .learn-more-card__meta {
    font-size: 11px !important;
  }

  .project-page .project-static-gallery,
  .project-page .project-static-gallery.project-static-gallery--three {
    width: calc(100% - 32px) !important;
    padding-inline: 0 !important;
  }

  .project-page .source-case-section,
  .project-page .final-work-showcase,
  .project-page .source-media-sections {
    padding-inline: 16px !important;
  }

  .project-page .source-case-section__inner,
  .project-page .final-work-showcase__inner {
    width: 100% !important;
  }

  .project-page .source-carousel-arrow,
  .project-page .source-browser-edge-arrow {
    width: 38px !important;
    height: 38px !important;
  }

  .page-profile .about-shell,
  .page-resume .resume-page,
  .page-contact .contact-page {
    width: calc(100% - 40px) !important;
  }

  .page-profile .about-name {
    font-size: clamp(2.75rem, 15vw, 4rem) !important;
  }

  .page-profile .about-section__title,
  .page-resume .resume-title,
  .page-contact .contact-title {
    font-size: clamp(2.25rem, 12vw, 3.5rem) !important;
    line-height: 1 !important;
  }

  .page-profile .about-section__body,
  .page-contact .contact-item__value,
  .page-resume .resume-download {
    font-size: clamp(0.95rem, 4vw, 1.05rem) !important;
  }

  .page-profile .person-collage {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 390px) {
  .page-home .projects,
  .project-page .learn-more {
    padding-inline: 18px !important;
  }

  .project-page .project-intro,
  .page-profile .about-shell,
  .page-resume .resume-page,
  .page-contact .contact-page {
    width: calc(100% - 32px) !important;
  }

  .project-page .project-nav {
    padding-inline: 16px !important;
  }

  .project-page .learn-more-card__title {
    font-size: 14px !important;
  }

  .project-page .learn-more-card__meta {
    font-size: 10px !important;
  }
}