/* The live edition. Numbered versions remain available in the design review. */
.startup-page [data-version="modern"] {
  --pine: var(--pcg-pine);
  --deep: var(--pcg-deep);
  --ink: var(--pcg-ink);
  --paper: var(--pcg-paper);
  --light: var(--pcg-light);
  --bronze: var(--pcg-bronze);
  --gold: var(--pcg-soft-gold);
  --rule: var(--pcg-rule);
  --gutter: var(--pcg-gutter);
  --display: var(--pcg-font-sans);
}
.startup-page [data-version="modern"] .rule-title::before { content: none; }
.startup-page [data-version="modern"] h2 {
  font-family: var(--display);
  font-weight: 550;
  letter-spacing: -.055em;
  line-height: 1.01;
  text-wrap: pretty;
}
.startup-page [data-version="modern"] h2 em {
  color: inherit;
  font: italic 400 1.035em/.96 var(--pcg-font-accent);
  letter-spacing: -.052em;
}
.startup-page [data-version="modern"] p { text-wrap: pretty; }
.startup-page .hero-skip { display: none; }
.startup-page .hero-plate { display: contents; }

/* A fieldwork cover: the title crosses the edge of the photograph, and
   the shopfront, plans and keys stay visible on the right. */
#startup-hero[data-version="modern"] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  grid-template-rows: minmax(clamp(455px, 35vw, 610px), auto);
  padding: clamp(23px, 2.4vw, 43px) var(--gutter);
  background: #092e25;
  color: #f9f8ee;
}
#startup-hero[data-version="modern"] .hero-plate {
  position: relative;
  display: block;
  overflow: hidden;
  grid-column: 5 / -1;
  grid-row: 1;
}
#startup-hero[data-version="modern"] .hero-photo {
  position: absolute;
  inset: 0;
  min-height: 0;
  object-position: 59% 63%;
}
#startup-hero[data-version="modern"] .hero-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(0 22 15 / 74%), rgb(0 22 15 / 36%) 34%, transparent 64%),
              linear-gradient(0deg, rgb(0 20 14 / 18%), transparent 40%);
}
#startup-hero[data-version="modern"] .hero-title {
  position: relative;
  z-index: 1;
  grid-column: 1 / 10;
  grid-row: 1;
  align-self: center;
  padding: clamp(28px, 3vw, 48px) 0;
  pointer-events: none;
}
#startup-hero[data-version="modern"] .hero-title::before { content: none; }
#startup-hero[data-version="modern"] h1 {
  font: 550 clamp(71px, 7.55vw, 134px)/.92 var(--display);
  letter-spacing: -.067em;
  text-wrap: initial;
}
#startup-hero[data-version="modern"] h1 > span { display: block; }
#startup-hero[data-version="modern"] .hero-topic {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: clamp(25px, 3.2vw, 54px);
  color: #eddaab;
  font: 600 13px/1.2 var(--sans);
  text-transform: uppercase;
  letter-spacing: .19em;
}
#startup-hero[data-version="modern"] .hero-topic::before {
  content: ""; width: 27px; height: 1px; background: currentColor;
}
#startup-hero[data-version="modern"] h1 em { color: inherit; font: inherit; }
#startup-hero[data-version="modern"] .hero-development {
  color: #f1d394;
  font: italic 400 1.05em/.95 var(--pcg-font-accent);
  letter-spacing: -.064em;
}
#startup-hero[data-version="modern"] .hero-skip {
  grid-column: 12; grid-row: 1;
  align-self: end; justify-self: end;
  display: grid; place-items: center;
  position: relative; z-index: 1;
  margin: 0 16px 16px 0; width: 48px; height: 48px;
  border-radius: 50%; background: var(--light); color: var(--deep);
  transition: background .18s ease;
}
#startup-hero[data-version="modern"] .hero-skip:hover { background: var(--gold); }
#startup-hero[data-version="modern"] .hero-skip:focus-visible { outline: 3px solid white; outline-offset: 4px; }

/* Opening day is a change of pace. Let the doorway carry an entire column. */
.startup-page #opening-day[data-version="modern"] {
  background: #092e25; color: var(--light);
  padding-block: clamp(48px,6vw,96px);
}
.startup-page #opening-day[data-version="modern"] .wrap {
  grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
  grid-template-areas: "photo title" "photo body";
  grid-template-rows: auto 1fr;
  row-gap: clamp(26px,3vw,50px);
}
#opening-day[data-version="modern"] h2 { max-width: 16ch; font-size: clamp(38px,4.2vw,71px); }
#opening-day[data-version="modern"] h2 em { color: #f1d394; }
#opening-day[data-version="modern"] .feature-photo { position: relative; min-height: 380px; }
#opening-day[data-version="modern"] .feature-photo img { position: absolute; inset: 0; object-position: 88% center; }
#opening-day[data-version="modern"] .feature-body { color: #e3e9df; }
#opening-day[data-version="modern"] .feature-body p:first-child { color: var(--light); }
#opening-day[data-version="modern"] .feature-body p:last-child { border-top: 1px solid #567164; padding-top: 20px; }

#pcg-advantage[data-version="modern"] { background: var(--paper); }
.startup-page #pcg-advantage[data-version="modern"] .wrap {
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  grid-template-areas: "title title" "photo body";
  align-items: start;
}
#pcg-advantage[data-version="modern"] .rule-title { padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
#pcg-advantage[data-version="modern"] .feature-photo { aspect-ratio: 4/3; }
#pcg-advantage[data-version="modern"] .feature-photo img { object-position: 46% center; }
#pcg-advantage[data-version="modern"] .feature-body p:first-child { font: 500 clamp(23px,2vw,33px)/1.28 var(--sans); letter-spacing: -.032em; }

@media (max-width: 760px) {
  #startup-hero[data-version="modern"] {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto clamp(235px, min(66vw, 34svh), 340px);
    padding: 0;
  }
  #startup-hero[data-version="modern"] .hero-title {
    grid-column: 1; grid-row: 1; padding: 38px var(--gutter) 26px;
  }
  #startup-hero[data-version="modern"] h1 { font-size: clamp(49px,10.8vw,76px); }
  #startup-hero[data-version="modern"] .hero-topic { margin-bottom: 20px; }
  #startup-hero[data-version="modern"] .hero-plate { grid-column: 1; grid-row: 2; }
  #startup-hero[data-version="modern"] .hero-photo { height: 100%; object-position: 54% 56%; }
  #startup-hero[data-version="modern"] .hero-plate::after { content: none; }
  #startup-hero[data-version="modern"] .hero-skip { grid-column: 1; grid-row: 2; }
  .startup-page #opening-day[data-version="modern"] .wrap,
  .startup-page #pcg-advantage[data-version="modern"] .wrap {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "title" "photo" "body";
    grid-template-rows: auto auto auto;
  }
  #opening-day[data-version="modern"] .feature-photo { aspect-ratio: 4 / 3; min-height: 0; }
  #opening-day[data-version="modern"] .feature-photo img { object-position: 62% 30%; }
  #pcg-advantage[data-version="modern"] .rule-title { padding-bottom: 18px; }
}