/* A complete coastline: centered ridges, a flat ocean, and a short research fade. */
.hero,
.work-section > .section-heading,
.site-rail {
  --green: #b4c3a5;
  --orange: #ff885f;
  --paper: #eee8db;
  --line: rgba(238, 232, 219, 0.17);
}

.site-rail { background: rgba(22, 24, 21, 0.96); }
.rail-note span { box-shadow: 0 0 10px rgba(159, 180, 156, 0.25); }
main { position: relative; isolation: isolate; overflow: clip; background: #191b19; }
.hero { position: relative; isolation: isolate; color: var(--paper); background: transparent; }
.hero-copy { position: relative; }
.hero .hero-history { color: #a3a89c; }
.hero .hero-roles dd { color: #c7cbbf; }
.hero .portrait-frame { background: #20231f; border-color: rgba(180, 195, 165, 0.25); }
.hero .portrait-frame::before { display: none; }
.hero .portrait-image {
  /* Only the outer three pixels soften; retain the full illustration and caption. */
  --portrait-mask-x: linear-gradient(90deg, transparent, #000 3px, #000 calc(100% - 3px), transparent);
  --portrait-mask-y: linear-gradient(180deg, transparent, #000 3px, #000 calc(100% - 3px), transparent);
  -webkit-mask-image: var(--portrait-mask-x), var(--portrait-mask-y);
  mask-image: var(--portrait-mask-x), var(--portrait-mask-y);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero .portrait-frame figcaption span { color: #a3ad9d; }
.hero .portrait-frame figcaption span:first-child { color: var(--green); }

/* Normal flow owns the scene's space. No measured heights, zoom, or side cropping. */
.coastal-scene { position: relative; height: clamp(15rem, 18vw, 19rem); }
.coastal-art {
  position: absolute;
  z-index: -1;
  inset: -48px 0 -32px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 64px), transparent 100%);
}
.coastal-art img { width: 100%; height: 100%; object-fit: fill; }

/* Only the first 32px carry the ocean fade; every line of research copy is below it. */
.work-section {
  position: relative;
  padding-top: clamp(3rem, 3vw, 3.5rem);
  background: linear-gradient(180deg, transparent 0, var(--research-bg) 32px);
}
.work-section > .section-heading { position: relative; }

.terrain-caption {
  position: absolute;
  right: max(4vw, calc((100vw - var(--rail) - var(--max)) / 2));
  bottom: 0.2rem;
  margin: 0;
  color: #a3ad9d;
  font: 400 0.48rem/1.6 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.terrain-caption span { margin-inline: 0.55rem; color: #ff885f; }
.terrain-caption a { text-underline-offset: 0.3em; }
.terrain-caption a:hover { color: #eee8db; text-decoration: underline; }

@media (max-width: 900px) {
  .coastal-scene { height: clamp(12rem, 30vw, 16rem); }
  .terrain-caption { right: 4vw; }
}
@media (max-width: 620px) {
  .coastal-scene { height: clamp(11.25rem, 45vw, 15.625rem); }
  .terrain-caption { right: 5vw; font-size: 0.42rem; letter-spacing: 0.06em; }
}