/* Hero and contour field (hero B, open water: the field fills the hero). */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* Field: positions the map so the island centre lands on (--ix, --iy). */
.hero__field { --w: 533cqw; --ix: 50cqw; --iy: 40cqh; position: absolute; inset: 0; container-type: size; z-index: 0; }
.map-clip { position: absolute; inset: 0; overflow: hidden; }
.map {
  position: absolute;
  width: var(--w);
  aspect-ratio: 2667 / 2629;
  left: calc(var(--ix) - var(--w) * 0.5139);
  top: calc(var(--iy) - var(--w) * 0.4837);
}
.map__drift, .layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.layer { transform-origin: 51.39% 49.06%; overflow: visible; }
.layer path { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.layer--deep { color: rgba(27, 79, 138, 0.34); }
.layer--deep .ix, .layer--slope .ix { stroke-width: 1.5px; }
.layer--slope { color: rgba(27, 79, 138, 0.55); }
.layer--shelf { color: rgba(27, 79, 138, 0.32); }
.layer--rim { color: var(--coral); }
.layer--rim path { stroke-width: 2px; }
.layer--island { color: var(--navy); }

/* Fade the field under the nav so lines never run through the logo or links */
.hero--b .map-clip {
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero__inner { position: relative; z-index: 2; margin-top: auto; padding-bottom: 24px; }
.hero__title { grid-column: 1 / -1; }
.hero__lede { grid-column: 1 / -1; margin-top: 16px; }
.hero__inner .btns { grid-column: 1 / -1; margin-top: 20px; }
.hero__inner .btn { flex: 1 1 0; padding-inline: 12px; }

@media (min-width: 768px) {
  .hero__inner .btn { flex: none; padding-inline: 22px; }
  .hero__lede { grid-column: 1 / span 8; }
}

@media (min-width: 1024px) {
  :root { --fs-hero: clamp(4rem, 6.5vw, 6rem); } /* 64 to 96px: two lines across 8 columns */
  .hero { min-height: max(700px, min(100svh, 980px)); }
  .hero__inner { padding-bottom: 64px; }
  .hero__title { grid-column: 1 / span 8; }
  .hero__lede { grid-column: 1 / span 5; margin-top: 24px; }
  .hero__inner .btns { margin-top: 32px; }
}

/* B: open water. The field fills the hero and runs behind the copy: the headline stands in
   its halo, the buttons are solid, and depths.js clears the lines round the subline. The
   mask below fades the lines under the nav; depths.js replaces it with the same fade plus
   the clearing. */
.hero--b .hero__field { --w: 533cqw; --ix: 56cqw; --iy: 25cqh; }
.hero--b .map-clip {
  -webkit-mask-image: linear-gradient(to bottom, transparent 24px, #000 96px);
  mask-image: linear-gradient(to bottom, transparent 24px, #000 96px);
}

/* Phones: the island sits a quarter of the way down the screen, but never under the nav, and the
   copy never starts above its foot. The island is about 38.4% of the screen width tall (19.2vw
   either side of its centre), so short phones (320 by 640) grow the hero a little instead of
   running the headline into it. */
@media (max-width: 767px) {
  .hero--b { --island-y: max(calc(var(--nav-gap) + var(--nav-h) + 16px + 19.5vw), 25svh); }
  .hero--b .hero__field { --iy: var(--island-y); }
  .hero--b { padding-top: calc(var(--island-y) + 19.5vw + 20px); }
}

@media (min-width: 1024px) {
  .hero--b .hero__field { --w: 245cqw; --ix: 81cqw; --iy: 30cqh; }
  .hero--b .map-clip {
    -webkit-mask-image: linear-gradient(to bottom, transparent 40px, #000 120px);
    mask-image: linear-gradient(to bottom, transparent 40px, #000 120px);
  }
}

/* About */
.about { background: var(--mist); padding: 64px var(--margin); }
.about > .wrap { padding-inline: 0; max-width: var(--maxw); }
/* Body text on the left, the Chair's quote on the right, both under the heading */
.about__title { grid-column: 1 / -1; }
.about__body { grid-column: 1 / -1; margin-top: 24px; }
.about__quote { grid-column: 1 / -1; margin: 48px 0 0; }
.about__quote blockquote { margin: 0; max-width: 24ch;
  font-weight: 300; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--navy); }
.about__quote::before {
  content: ""; display: block; width: 32px; height: 2px; margin-bottom: 20px; background: var(--coral);
}
.about__credit { margin-top: 16px; max-width: 30ch; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-muted); }

@media (min-width: 1024px) {
  .about { padding: 128px var(--margin); }
  .about__body { grid-column: 1 / span 7; grid-row: 2; align-self: start; }
  /* The quote's first line lines up with the body's; the coral rule sits in the gap above */
  .about__quote { grid-column: 9 / span 4; grid-row: 2; margin-top: 2px; }
  .about__quote blockquote { font-size: 2.25rem; max-width: 22ch; }
}

/* The island never fades: only the depth lines are masked */
.hero__field .map-clip.map-clip--island { -webkit-mask-image: none; mask-image: none; }

/* B: the island sits in a second field above the copy layer, outside the contour mask */
.hero .hero__field--top { z-index: 3; background: none; pointer-events: none; }