/* ==========================================================================
   Masera & Co — story page additions to site.css (body.story-page.v2 only):
   the Boston skyline page head, the pull statement in chapter 01, the
   closing statement in the navy chapter, and per-photo focal points.
   ========================================================================== */

/* Header: like the homepage hero, the bar is clear over the photo until the
   page scrolls (main.css then makes it solid via .scrolled). */
body.story-page:not(.scrolled) .header { --background-color: transparent; }
body.story-page:not(.scrolled) .header .sitename { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }

/* Page head: the Boston skyline runs behind the clear header. The shade
   darkens beneath the copy and leaves the business district visible. */
body.v2 .story-head {
  min-height: clamp(440px, 58vh, 620px);
  padding-top: 160px;
}

body.v2 .story-head .mc-pagehead-media img { object-position: 50% 48%; }

body.v2 .story-head .mc-pagehead-shade {
  background:
    linear-gradient(180deg, rgba(11, 25, 44, 0.45) 0%, rgba(11, 25, 44, 0.06) 22%, rgba(11, 25, 44, 0.1) 44%, rgba(11, 25, 44, 0.66) 70%, rgba(11, 25, 44, 0.9) 100%),
    linear-gradient(90deg, rgba(11, 25, 44, 0.66) 0%, rgba(11, 25, 44, 0.36) 46%, rgba(11, 25, 44, 0) 72%);
}

body.v2 .story-head-inner { max-width: min(48rem, 100%); }
body.v2 .story-head .mc-h1 { max-width: 12em; }

/* Place label, bottom right of the photo */
body.v2 .story-head-tag {
  position: absolute;
  right: max(1.5rem, 5vw);
  bottom: 18px;
  margin: 0;
  font-family: var(--mc-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* 01 Where it started: lead, prose, then the pull statement */
body.v2 .story-start .mc-lead { margin-top: clamp(24px, 2.6vw, 40px); }
body.v2 .story-start .mc-prose { margin-top: 20px; }

body.v2 .story-pull {
  position: relative;
  margin-top: clamp(40px, 4vw, 64px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--mc-hair);
}

body.v2 .story-pull::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--mc-gold-ink-strong);
}

body.v2 .story-pull .mc-statement { color: var(--mc-ink); }
body.v2 .story-pull .mc-body { margin-top: 16px; }

/* 02 How we've grown: aligned landscape plates. */
@media (min-width: 1200px) {
  body.v2 .story-grew .mc-entries--stagger > :nth-child(even) { margin-top: 0; }
  body.v2 .story-grew .mc-frame { aspect-ratio: 4 / 3; }
}

/* 03 Where we're going */
body.v2 .story-vision-body { padding-top: clamp(40px, 4vw, 64px); }
body.v2 .story-vision .mc-statement { margin-top: clamp(24px, 2.6vw, 40px); }
body.v2 .story-vision-text .mc-prose { margin-top: 20px; }

body.v2 .story-close {
  grid-column: 2 / span 10;
  max-width: 30em;
  font-family: var(--mc-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.6rem);
  line-height: 1.35;
  color: var(--mc-ink);
  text-wrap: pretty;
}

body.v2 .story-close em { color: var(--mc-gold); font-style: italic; }

/* Focal points */
body.v2 .op-grow-field { object-position: 50% 35%; }
body.v2 .op-grow-roads { object-position: 55% 50%; }
body.v2 .op-grow-people { object-position: 46% 35%; }
body.v2 .story-vision .mc-band img { object-position: 30% 34%; }
body.v2 .op-nx-about { object-position: 50% 30%; }
body.v2 .op-nx-careers { object-position: 50% 40%; }
body.v2 .op-nx-contact { object-position: 48% 35%; }

@media (min-width: 992px) {
  body.v2 .story-head-tag { right: max(3rem, 7.5vw); }
}

/* Keep the skyline in view beneath the transparent desktop header. */
@media (min-width: 1200px) {
  body.v2 .story-head .mc-pagehead-media img { object-position: 50% 48%; }
}

@media (max-width: 1199px) {
  body.v2 .story-close { grid-column: 1 / -1; }
  body.v2 .story-start .mc-plate .mc-frame--4x5 { aspect-ratio: 4 / 5; max-height: 80vh; }
}

@media (max-width: 767px) {
  body.v2 .story-head { min-height: 0; padding-top: 176px; }
  body.v2 .story-head .mc-pagehead-media img { object-position: 52% 40%; }

  /* Band before Vision: a panorama-shaped strip, caption on the image and
     only a short fade into the navy chapter */
  body.v2 .story-vision .mc-band { height: max(220px, 56vw); }
  body.v2 .story-vision .mc-band img { object-position: 50% 35%; }
  body.v2 .story-vision .mc-band::after {
    background: linear-gradient(180deg, rgba(11, 25, 44, 0.12) 0%, rgba(11, 25, 44, 0) 30%, rgba(11, 25, 44, 0.35) 72%, #0B192C 100%);
  }
  body.v2 .story-vision .mc-band-caption { bottom: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
  body.v2 .story-vision-body { padding-top: 24px; }

  /* Growth entries: numeral above the title so wrapped titles align */
  body.v2 .story-grew .mc-entry-text { display: flex; flex-direction: column; gap: 4px; }
  body.v2 .story-grew .mc-entry-text .mc-num { font-size: 2.5rem; line-height: 1; }
  body.v2 .story-grew .mc-entry-text .mc-body { margin-top: 8px; }
  body.v2 .story-head .mc-pagehead-shade {
    background: linear-gradient(180deg, rgba(11, 25, 44, 0.5) 0%, rgba(11, 25, 44, 0.12) 22%, rgba(11, 25, 44, 0.55) 52%, rgba(11, 25, 44, 0.9) 100%);
  }
  body.v2 .story-head-tag { display: none; }
}

@media (min-width: 1800px) {
  body.v2 .story-close { font-size: 3rem; }
  body.v2 .story-head-tag { font-size: 0.95rem; }
}