/* Two neighboring chapters share a type scale and editorial spacing. */
.startup-page :is(#opening-day, #pcg-advantage) .wrap {
  display: grid;
  gap: clamp(24px, 3.8vw, 62px) clamp(30px, 5.5vw, 90px);
}
.startup-page :is(#opening-day, #pcg-advantage) .wrap > * { min-width: 0; }
.startup-page :is(#opening-day, #pcg-advantage) .rule-title { grid-area: title; }
.startup-page :is(#opening-day, #pcg-advantage) .feature-photo {
  grid-area: photo;
  overflow: hidden;
}
.startup-page :is(#opening-day, #pcg-advantage) .feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.startup-page :is(#opening-day, #pcg-advantage) .feature-body { grid-area: body; }
.startup-page :is(#opening-day, #pcg-advantage) .feature-body p { max-width: 70ch; }
.startup-page :is(#opening-day, #pcg-advantage) .feature-body p:first-child {
  font: 500 clamp(23px, 2.1vw, 33px)/1.28 var(--serif);
  letter-spacing: -.018em;
  text-wrap: pretty;
}

/* Opening, 1: a cream magazine spread, portrait photograph opposite the narrative. */
#opening-day[data-version="1"] { background: var(--light); }
#opening-day[data-version="1"] .wrap {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas: "title photo" "body photo";
}
#opening-day[data-version="1"] .feature-photo {
  align-self: stretch;
  min-height: 340px;
  border-block-end: 4px solid var(--bronze);
}
#opening-day[data-version="1"] .feature-photo img { object-position: 58% center; }
#opening-day[data-version="1"] .feature-body p:last-child {
  margin-block-start: 1.6em;
  padding-inline-start: 1em;
  border-inline-start: 2px solid var(--bronze);
}

/* Opening, 2: a photographic chapter opener followed by two reading columns. */
.startup-page #opening-day[data-version="2"] { background: var(--deep); color: var(--light); padding-top: 0; }
#opening-day[data-version="2"] .wrap {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "photo" "body";
  row-gap: clamp(32px, 4vw, 64px);
}
#opening-day[data-version="2"] .feature-photo { position: relative; height: clamp(370px, 34vw, 590px); }
#opening-day[data-version="2"] .feature-photo img { object-position: 50% 8%; }
#opening-day[data-version="2"] .feature-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,27,22,.88), rgba(3,27,22,.41) 57%, rgba(3,27,22,.04)),
    linear-gradient(0deg, rgba(3,27,22,.67), transparent 54%);
}
#opening-day[data-version="2"] .rule-title {
  grid-area: photo;
  align-self: end;
  z-index: 1;
  margin: 0 max(var(--gutter), calc((100vw - 1320px) / 2)) clamp(34px, 4.4vw, 72px);
  max-width: 17em;
  font-size: clamp(37px, 4.55vw, 76px);
}
#opening-day[data-version="2"] h2 { font-size: inherit; text-wrap: pretty; }
#opening-day[data-version="2"] .rule-title::before { background: var(--gold); }
#opening-day[data-version="2"] .rule-title em { color: var(--gold); }
#opening-day[data-version="2"] .feature-body {
  width: min(1320px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  grid-template-areas: "lead detail" "lead continued" "close close";
  gap: 18px clamp(30px, 6vw, 100px);
}
#opening-day[data-version="2"] .feature-body p { margin: 0; max-width: none; color: #e0e7df; }
#opening-day[data-version="2"] .feature-body p:first-child { grid-area: lead; color: var(--light); max-width: 22ch; }
#opening-day[data-version="2"] .feature-body p:nth-child(2) { grid-area: detail; }
#opening-day[data-version="2"] .feature-body p:nth-child(3) { grid-area: continued; }
#opening-day[data-version="2"] .feature-body p:last-child {
  grid-area: close;
  color: var(--gold);
  border-top: 1px solid #6d806a;
  padding-top: 20px;
  margin-top: 10px;
  font: 500 clamp(22px, 1.85vw, 29px)/1.4 var(--serif);
}

/* Opening, 3: a narrow reading column, a wide scene, and a centered title. */
#opening-day[data-version="3"] { background: #ede8da; }
#opening-day[data-version="3"] .wrap { grid-template-columns: 1fr; grid-template-areas: "title" "photo" "body"; }
#opening-day[data-version="3"] .rule-title { max-width: 52rem; margin-inline: auto; text-align: center; }
#opening-day[data-version="3"] .rule-title::before { margin-inline: auto; }
#opening-day[data-version="3"] .feature-photo { height: clamp(230px, 28vw, 420px); }
#opening-day[data-version="3"] .feature-body { max-width: 76ch; margin-inline: auto; }

/* Advantage, 1: a pine panel with a framed documentary photograph. */
#pcg-advantage[data-version="1"] { background: var(--pine); color: var(--light); }
#pcg-advantage[data-version="1"] .wrap {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas: "title body" "photo body";
  grid-template-rows: auto 1fr;
}
#pcg-advantage[data-version="1"] .feature-photo { align-self: start; padding: 9px; border: 1px solid #998257; }
#pcg-advantage[data-version="1"] .feature-photo img { aspect-ratio: 4/3; }
#pcg-advantage[data-version="1"] .rule-title::before { background: var(--gold); }
#pcg-advantage[data-version="1"] .rule-title em,
#pcg-advantage[data-version="1"] .feature-body strong { color: var(--gold); }

/* Advantage, 2: an open paper spread, with the client image beneath its headline. */
#pcg-advantage[data-version="2"] { background: var(--paper); }
#pcg-advantage[data-version="2"] .wrap {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  grid-template-areas: "title body" "photo body";
  grid-template-rows: auto 1fr;
  row-gap: clamp(25px, 3vw, 44px);
}
#pcg-advantage[data-version="2"] .feature-photo {
  position: relative;
  overflow: visible;
  align-self: start;
  margin: 0 12px 12px 0;
}
#pcg-advantage[data-version="2"] .feature-photo::before {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 1px solid var(--bronze);
}
#pcg-advantage[data-version="2"] .feature-photo img { position: relative; aspect-ratio: 4/3; }
#pcg-advantage[data-version="2"] .feature-body { padding-left: clamp(23px, 3.5vw, 56px); border-left: 1px solid var(--rule); }
#pcg-advantage[data-version="2"] .feature-body p:nth-child(3) { color: #76531a; }

/* Advantage, 3: a broad masthead with a full-width inset and a two-column essay. */
#pcg-advantage[data-version="3"] { background: var(--light); }
#pcg-advantage[data-version="3"] .wrap {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-areas: "title photo" "body body";
}
#pcg-advantage[data-version="3"] .rule-title { align-self: center; }
#pcg-advantage[data-version="3"] .feature-photo img { height: clamp(235px, 26vw, 400px); object-position: 50% 48%; }
#pcg-advantage[data-version="3"] .feature-body {
  border-top: 1px solid var(--rule);
  padding-top: clamp(24px, 3vw, 42px);
  columns: 2;
  column-gap: clamp(34px, 5vw, 72px);
}
#pcg-advantage[data-version="3"] .feature-body p { break-inside: avoid; }

@media (max-width: 760px) {
  .startup-page :is(#opening-day, #pcg-advantage):not(#opening-day[data-version="2"]) .wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "photo" "body";
    grid-template-rows: auto;
    row-gap: 26px;
  }
  #opening-day[data-version="1"] .feature-photo { min-height: 0; height: clamp(210px, 56vw, 390px); }
  #opening-day[data-version="2"] .rule-title { font-size: clamp(34px, 7vw, 44px); margin-bottom: 24px; }
  #opening-day[data-version="2"] .feature-photo { height: clamp(350px, 77vw, 470px); }
  #opening-day[data-version="2"] .feature-photo img { object-position: 95% 12%; }
  #opening-day[data-version="2"] .feature-photo::after { background: linear-gradient(0deg,#042a23ed,#042a23ad 42%,#042a2315); }
  #opening-day[data-version="2"] .feature-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lead" "detail" "continued" "close";
  }
  #pcg-advantage[data-version="2"] .feature-body { padding-left: 0; border-left: 0; }
  #pcg-advantage[data-version="3"] .feature-body { columns: 1; }
}