/* Shared layout primitives for the portfolio's page families. */
:root {
  --layout-wide: 1320px;
  --layout-story: 1100px;
  --layout-gallery: 1240px;
  --layout-campaign: 1220px;
  --layout-gutter: 48px;
  --layout-gutter-mobile: 40px;
  --layout-prose: 700px;
  --layout-gap: clamp(38px, 6vw, 60px);
}

/* Page-family canvases share deliberate gutters and responsive behavior. */
body.home-page .wrap { width:min(var(--layout-wide),calc(100% - 64px)); }
body.case-study main .wrap { width:min(var(--layout-story),calc(100% - var(--layout-gutter))); }
body.campaign-page .wrap { width:min(var(--layout-campaign),calc(100% - var(--layout-gutter))); }
body.gallery-page .wrap { width:min(var(--layout-gallery),calc(100% - var(--layout-gutter))); }

/* A single editorial stack keeps each case-study section's hierarchy intact. */
body.case-study .case-study__prose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

body.case-study .case-study__prose-grid .copy {
  max-width: var(--layout-prose);
}

/* Hello Bank has three equally weighted system pillars. */
body.case-study .system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* Home-page About follows the same editorial hierarchy. */
#about .about-layout {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: var(--layout-gap);
}

#about .about-layout h2 {
  margin-top: 0;
}

#about .about-visual {
  align-content: start;
  display: grid;
  position: relative;
}

#about .about-content {
  position: relative;
}

#about .about-content .section-kicker {
  left: 0;
  position: absolute;
  top: -28px;
}

#about .about-portrait {
  margin: 0;
}

#about .about-portrait > img {
  display: block;
  height: auto;
  width: 100%;
}

@media (max-width: 720px) {
  body.home-page .wrap,
  body.case-study main .wrap,
  body.campaign-page .wrap,
  body.gallery-page .wrap { width:min(100% - var(--layout-gutter-mobile),var(--layout-wide)); }

  body.case-study .case-study__prose-grid,
  body.case-study .system-grid,
  #about .about-layout {
    grid-template-columns: 1fr;
  }
}