/* ============================================================
   Scapes — program.css (1 of 2: hero, premise, founder)
   Shared page patterns for programs, foundations, services.
   ============================================================ */

/* ============================================================
   PROGRAM HERO — full-bleed photographic opener
   ============================================================ */
.pg-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.pg-hero__plate { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pg-hero__plate-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.88) brightness(0.72) contrast(1.04);
  animation: pgHeroKen 24s var(--ease-out) forwards;
}
.pg-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(10,8,7,0.20) 0%,
      rgba(10,8,7,0.08) 32%,
      rgba(10,8,7,0.55) 78%,
      rgba(10,8,7,0.92) 100%);
}
.pg-hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(64px, 10.1vw, 112px) clamp(24px, 4vw, 80px) clamp(56px, 6.5vw, 84px);
}
/* The fixed back-trail pill parks bottom-left (~72px tall incl. offset). On
   short viewports the hero lead's last line ran underneath it — lift the copy
   clear rather than move the pill (Jason m0122). */
@media (max-height: 700px) {
  .pg-hero__inner { padding-bottom: 104px; }
}
.pg-hero__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(44px, 5.2vw, 84px);
  line-height: 1.02; letter-spacing: -0.022em;
  color: var(--linen);
  margin: clamp(20px, 2.8vw, 32px) 0 0;
  max-width: 18ch; text-wrap: balance;
}
.pg-hero__title em {
  font-style: normal;  font-weight: 400;
  color: var(--scapes-sandstone);
}
.pg-hero__lead {
  font-family: var(--font-text); font-style: normal;
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.5;
  color: var(--linen); opacity: 0.92;
  max-width: 44ch; text-wrap: pretty;
  margin: clamp(22px, 2.8vw, 32px) 0 0;
}
@keyframes pgHeroKen { from { transform: scale(1.08); } to { transform: scale(1.0); } }

/* ============================================================
   PREMISE — Register A, Quiet Luxury opener
   ============================================================ */
.pg-premise {
  background: var(--ink);
  padding: clamp(52px, 6.2vw, 88px) clamp(24px, 4vw, 80px);
}
.pg-premise__inner {
  max-width: 1480px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(200px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(40px, 4.4vw, 80px);
  align-items: start;
}
@media (max-width: 880px) { .pg-premise__inner { grid-template-columns: 1fr; } }
.pg-premise__body {
  font-family: var(--font-text);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.72;
  color: var(--linen);
  max-width: 60ch;
}
/* Closing line under a spec table — quiet, centered, sits below the rows. */
.pg-anatomy__foot {
  font-family: var(--font-text); font-style: italic; font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; color: var(--stone);
  text-align: center; text-wrap: balance;
  max-width: 54ch; margin: clamp(34px, 4vw, 52px) auto 0;
}
/* A ™ at display size renders as wide as a capital letter and reads like a
   third word. Scale and lift it wherever a headline carries one. */
.tm { font-size: 0.42em; vertical-align: 0.72em; letter-spacing: 0.02em; }
.pg-premise__body p + p { margin-top: 1.1em; }
/* Emphasis inside a spec paragraph: sandstone, no size bump — the 1.34em
   premise treatment is far too loud at this scale (Jason m0187). */
.pg-anatomy__prose em { font-style: normal; color: var(--scapes-sandstone); }
.pg-premise__body em {
  
  font-style: normal; font-weight: 400;
  color: var(--scapes-sandstone);
  font-size: 1.34em;
  line-height: 1.25;
}

/* ============================================================
   FOUNDER'S NOTE — Register B, declarative
   ============================================================ */
.pg-founder {
  background: linear-gradient(180deg, var(--ink) 0%, var(--charcoal) 50%, var(--ink) 100%);
  padding: clamp(52px, 6.2vw, 88px) clamp(24px, 4vw, 80px);
}
.pg-founder__inner { max-width: 1480px; margin: 0 auto; }
.pg-founder__tag {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--scapes-sandstone); font-weight: 500;
  margin-bottom: clamp(28px, 3.6vw, 44px);
}
.pg-founder__tag::before {
  content: ""; width: 48px; height: 1px; background: currentColor;
}
/* The founder's lines are a STATEMENT, so they carry the display serif like every
   other large voice on the site — the body sans at 34px read as a different brand
   (Jason m0474). */
.pg-founder__lines {
  font-family: var(--font-display); font-style: normal; font-weight: 300;
  font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.14; letter-spacing: -0.015em; color: var(--linen);
  max-width: 24ch; margin: 0; text-wrap: pretty;
}
.pg-founder__lines p { margin: 0; font-size: inherit; line-height: inherit; }
.pg-founder__lines p + p { margin-top: 0.5em; }
.pg-founder__lines em {
  color: var(--scapes-sandstone); font-style: italic;
}
.pg-founder__closing em { font-style: italic; color: var(--linen); }
.pg-founder__closing {
  margin-top: clamp(24px, 3vw, 40px);
  font-family: var(--font-text); font-style: normal;
  font-size: clamp(17px, 1.32vw, 20px);
  line-height: 1.45;
  color: var(--scapes-sandstone);
  max-width: 42ch;
}
.pg-founder__signature {
  margin-top: clamp(28px, 3.6vw, 40px);
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--stone); font-weight: 500;
}

/* Split founder note (process.html, Jason 8/4) — the block was one narrow column
   in a 1480px container: dead right half + a vertical void above the tag. On wide
   screens the declarative lines sit left, the closing paragraph right, tag across the top. */
.pg-founder--split{padding-top:clamp(38px,4vw,58px);padding-bottom:clamp(38px,4vw,58px)}
.pg-founder--split .pg-founder__tag{margin-bottom:clamp(20px,2.4vw,30px)}
@media (min-width:1040px){
  .pg-founder--split .pg-founder__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,6vw,110px);row-gap:0;align-items:start}
  .pg-founder--split .pg-founder__tag{grid-column:1/-1}
  .pg-founder--split .pg-founder__lines{grid-column:1;max-width:26ch}
  .pg-founder--split .pg-founder__closing{grid-column:2;grid-row:2/span 2;margin-top:0;max-width:34ch;border-left:1px solid rgba(212,175,110,.22);padding-left:clamp(24px,2.6vw,44px)}
  .pg-founder--split .pg-founder__signature{grid-column:1;align-self:end;margin-top:clamp(26px,3vw,40px)}
}