/* Shared layout for the six static portfolio pages. */
.case-page {
  max-width: 1450px;
  margin-inline: auto;
  padding: 64px clamp(22px, 5vw, 96px) 48px;
}
.page-heading { margin-bottom: 42px; }
.page-heading h1 {
  max-width: none;
  margin: 0 0 12px;
  font-family: "Be Vietnam Pro", "Inter", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(34px, 4vw, 62px);
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.page-subtitle { font-size: clamp(17px, 1.55vw, 23px); margin: 0; }
.case-page figure { margin: 0; }
.case-page img { display: block; max-width: 100%; width: 100%; height: auto; }
.case-page figcaption { font-size: 14px; margin-top: 12px; line-height: 1.5; }
.project-cover { margin-bottom: 60px !important; }
.project-cover img { max-height: 730px; object-fit: contain; }
.project-cover.skyline img { max-height: none; }
.project-overview {
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.8fr);
  gap: clamp(32px, 5vw, 86px);
  margin-block: 52px;
}
.project-overview dl { margin: 0; font-family: "Anuphan", "Inter", Arial, sans-serif; }
.project-overview dt { font-weight: 600; font-size: 18px; margin-bottom: 10px; }
.project-overview dd { font-size: 18px; line-height: 1.65; margin: 0 0 28px; }
.case-section { margin-block: 68px; }
.case-section h2 {
  font-family: "Be Vietnam Pro", "Inter", Arial, sans-serif;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 22px;
}
.case-section h3 { font-weight: 600; font-size: 20px; margin: 0 0 16px; }
.case-section p, .case-section li {
  font-family: "Anuphan", "Inter", Arial, sans-serif;
  font-size: 19px;
  line-height: 1.7;
}
.case-section p { max-width: 960px; margin: 0 0 26px; }
.case-section ul { padding-left: 22px; margin: 0; }
.case-section li { margin-bottom: 12px; }
.project-overview .case-section { margin: 0; }
.project-overview h2 { font-size: 24px; }
.strategy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding-block: 42px;
  margin-block: 40px 70px;
  border-block: 1px solid var(--rule);
}
.strategy-grid .case-section { margin: 0; }
.strategy-grid h2 { font-size: 22px; }
.strategy-grid li { font-size: 17px; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
.gallery-single { grid-template-columns: 1fr; gap: 40px; }
.gallery-single img { max-height: 530px; object-fit: contain; }
.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.highlight-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); text-align: center; gap: 24px; }
.social-pair { align-items: center; }
.social-pair img { max-height: 650px; object-fit: contain; }
.phone-example { max-width: 280px; margin: 38px auto 0 !important; }
.logo-comparison { max-width: 900px; margin-inline: auto; text-align: center; gap: 12%; }
.logo-comparison img { max-height: 380px; object-fit: contain; }
.publication-logo { max-width: 180px; margin: 64px auto 0 !important; }
.about-intro { display: grid; grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.2fr); gap: 65px; align-items: start; }
.about-intro .case-section:first-child { margin-top: 0; }
.portrait img { max-height: 740px; object-fit: contain; object-position: top; }
.experience-list { margin: 0; }
.experience-list > div {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 24px;
  padding-block: 24px;
  border-bottom: 1px solid var(--rule);
}
.experience-list dt { font-weight: 600; }
.experience-list dd { margin: 0; }
.experience-date { font-size: 14px; text-align: right; }
.skills-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px; text-align: center; }
.skills-gallery img { height: 70px; width: 70px; object-fit: contain; margin-inline: auto; }
.work-cta { font-size: 24px; margin-block: 45px; }
.return-link { border-top: 1px solid var(--rule); margin: 68px 0 0; padding-top: 26px; }
.case-page + .site-footer { border-top: 2px solid var(--rule); }
@media (max-width: 1050px) {
  .strategy-grid { grid-template-columns: 1fr; gap: 30px; }
  .strategy-grid li { font-size: 18px; }
  .about-intro { gap: 36px; }
  .experience-list > div { grid-template-columns: 1fr 1.3fr; }
  .experience-date { grid-column: 2; text-align: left; }
}
@media (max-width: 700px) {
  .case-page { padding-top: 40px; }
  .page-heading { margin-bottom: 30px; }
  .project-overview, .about-intro { grid-template-columns: 1fr; gap: 25px; }
  .project-overview { margin-block: 35px; }
  .project-overview dl { display: grid; grid-template-columns: 70px 1fr; gap: 14px 20px; }
  .project-overview dd, .project-overview dt { margin: 0; font-size: 16px; }
  .case-section { margin-block: 44px; }
  .case-section p, .case-section li { font-size: 17px; }
  .gallery, .three-up { grid-template-columns: 1fr; gap: 26px; }
  .highlight-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .logo-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .skills-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skills-gallery img { width: 54px; height: 54px; }
  .portrait { max-width: 380px; margin-inline: auto !important; }
  .about-intro .case-section { margin-top: 28px; }
  .experience-list > div { grid-template-columns: 1fr; gap: 8px; }
  .experience-date { grid-column: auto; }
}
@media print {
  .case-page { padding: 24px; }
  .site-header, .site-footer, .return-link, .skip-link { display: none; }
  .page-frame { margin: 0; border: 0; }
  figure { break-inside: avoid; }
}