/* =====================================================
   VERRELLI — Interior template (bio / issues)
   Reusable chrome + body for Meet Anthony, Issues, Endorsements, Gallery, FAQ.
   Type sizes are transform-corrected PSD px: proportional vw on the 1440
   artboard, capped at the PSD px (clamp ceiling) with rem floors for mobile —
   the same proportional system as the home cutup. Tokens (--navy, --yellow,
   --text-dark, --font-display) come from _cutup/styles.css :root; brand hex is
   never hardcoded. The locked home vw system is untouched.
   ===================================================== */


/* =====================================================
   HERO BAND  (full-width, NEVER cropped — the people across the diagonal stay
   intact). The band is a real <img> at width:100% / height:auto so the section
   height follows the image; navy bg-color shows only as a fallback. Nav + gold
   H1 ride on top via the grid overlay.
   ===================================================== */
.hero--interior {
  position: relative;
  background-color: var(--navy);
  overflow: hidden;
  min-height: 0;         /* override home .hero min-height; the band img drives height */
}
.hero-interior__band {
  display: block;
  width: 100%;
  height: auto;          /* in-flow: defines the section height exactly, never cropped */
}
.hero--interior .hero__grid {
  position: absolute;
  inset: 0;              /* overlay the band — adds no height, no dead space below */
  z-index: 1;
}

/* Gold H1 vertically centered in the navy area BELOW the nav, left at the
   container edge. The grid is a flex column (nav, then this wrap); flex:1 makes
   this wrap fill the space beneath the nav and align-items:center centres the H1
   within it — reserving the nav's actual rendered height (scales with vw, unlike
   the static --header-h). The grid itself is absolute (no-dead-space fix), so
   this adds no height to the section. */
.hero-interior__headwrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
.hero-interior__title {
  /* PSD text-box ~33.33vw (=480px @1440): wraps "MEET ANTHONY" to MEET / ANTHONY
     (ANTHONY stays whole) while single words like "ISSUES" stay on one line. vw
     so the wrap holds at every width as the font scales. */
  max-width: 33.33vw;
  font-family: var(--font-display);
  font-weight: 900;                              /* Montserrat Black */
  font-size: max(2.25rem, 6.13vw);               /* 88.28px @1440, uncapped above */
  line-height: 0.909;                            /* 80.25 / 88.28 ratio */
  letter-spacing: 0;
  text-transform: uppercase;                     /* field stays mixed-case for SEO */
  color: var(--yellow);
}


/* =====================================================
   ANCHOR SUB-NAV  (Issues only — renders when sections are titled)
   ===================================================== */
.interior-anchors {
  background-color: #fbf1d5;     /* cream, exact from the Issues PSD */
}
.interior-anchors__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 1.1rem;
  padding-block: clamp(1rem, 2vw, 1.6rem);
}
.interior-anchors__link {
  font-family: var(--font-display);
  font-weight: 800;                              /* ExtraBold */
  font-size: clamp(1rem, 1.875vw, 27px);         /* 27px @1440 */
  line-height: 1.519;                            /* 41 / 27 */
  letter-spacing: 0;
  color: var(--navy);
  text-decoration: none;
}
.interior-anchors__link:hover { text-decoration: underline; }
.interior-anchors__sep {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 1.875vw, 27px);
  line-height: 1.519;
  color: var(--yellow);                          /* gold pipe */
  user-select: none;
}


/* =====================================================
   BODY  (sections: navy subheader/title + body copy)
   ===================================================== */
.interior {
  background: var(--white);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.interior-section + .interior-section {
  margin-top: clamp(2rem, 4.4vw, 3.5rem);
}

/* Section title — Issues mode (present when section_title is filled) */
.interior-section__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 800;                              /* Montserrat ExtraBold */
  font-size: clamp(1.6rem, 2.43vw, 35px);        /* 35px @1440 */
  line-height: 0.914;                            /* 32 / 35 */
  letter-spacing: 0;
  color: var(--navy);
}

/* Subheader — Meet Anthony = ExtraBold; Issues mode = Regular */
.interior-section__subheader {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 800;                              /* ExtraBold (Meet Anthony) */
  font-size: clamp(1.6rem, 2.43vw, 35px);        /* 35px @1440 */
  line-height: 1.314;                            /* 46 / 35 */
  letter-spacing: -0.02em;
  color: var(--navy);
}
.interior-section--titled .interior-section__subheader {
  font-weight: 400;                              /* Regular when titled (Issues) */
}

/* Body + closing copy */
.interior-section__body {
  font-family: var(--font-display);
  font-weight: 400;                              /* Montserrat Regular */
  font-size: clamp(1.05rem, 1.6vw, 23px);        /* 23px @1440 */
  line-height: 1.391;                            /* 32 / 23 */
  letter-spacing: 0;
  color: var(--text-dark);
}
.interior-section__body p {
  margin: 0 0 1.1rem;
}
.interior-section__body p:last-child {
  margin-bottom: 0;
}
.interior__closing {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Gold rule between titled (Issues) sections */
.interior-section--titled + .interior-section--titled {
  margin-top: clamp(2rem, 4.4vw, 3.5rem);
  padding-top: clamp(2rem, 4.4vw, 3.5rem);
  border-top: 4px solid var(--yellow);
}


/* =====================================================
   YELLOW CTA BAND  (shared interior chrome, body → footer)
   ===================================================== */
.cta-band {
  background: var(--yellow);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.cta-band__inner {
  text-align: center;
}
.cta-band__line {
  margin-inline: auto;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 900;                              /* Montserrat Black */
  font-size: clamp(1.75rem, 3.758vw, 54.11px);   /* 54.11px @1440 */
  line-height: 1.109;                            /* 60 / 54.11 */
  letter-spacing: 0;
  color: var(--navy);
}


/* =====================================================
   RESPONSIVE — mirror the home cutup breakpoints
   ===================================================== */
@media (max-width: 1024px) {
  /* Keep the H1 LEFT-aligned at the container edge (as on desktop). At <=1024
     the home .container becomes width:auto, and its margin-inline:auto then
     shrink-wraps + centres the headwrap. Pin it full-width with no auto margin
     so the H1 sits at the container's left padding, never centred. */
  .hero-interior__headwrap {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
  /* home stylesheet widens .container to padded full-width + swaps nav drawer */
  .cta-band__line { max-width: 100%; }
}
@media (max-width: 600px) {
  /* On narrow screens the band is a short strip and the navy area narrows; size
     the H1 with vw so the two-line title stays in the navy area, left of the
     band photo, ANTHONY whole. Capped at 2.25rem — equal to the desktop floor,
     so there's no jump at the 600px boundary; desktop stays uncapped vw. */
  .hero-interior__title {
    font-size: clamp(1.5rem, 8vw, 2.25rem);
    max-width: 45vw;
  }
  .interior-anchors__inner { gap: 0.3rem 0.7rem; }
  .cta-band__line { max-width: 18ch; }
}