/* Three opening compositions; handbook.css and drawn-details.css stay intact. */
.harbor-opening { position: relative; isolation: isolate; }
.harbor-opening .hero { position: relative; display: block; }
.harbor-opening .hero-copy { position: relative; z-index: 1; }
.harbor-opening .hero-copy > p:not(.eyebrow) { max-width: 440px; }
.harbor-opening .harbor-scene { margin: 0; pointer-events: none; }
.harbor-scene img { width: 100%; mix-blend-mode: multiply; }
.harbor-scene figcaption {
  color: var(--muted);
  font-size: .875rem;
  font-style: italic;
  line-height: 1.5;
  text-align: right;
}
.harbor-scene .figure-index { margin-right: .25rem; }
.harbor-opening .hero-copy .button { background-color: var(--paper); }
.harbor-opening .hero-copy .button:hover { background-color: #e9e2d2; }

/* A. An illustration printed into the opening spread itself. */
.layout-backdrop .hero {
  min-height: 570px;
  padding-block: 66px 74px;
  display: flex;
  align-items: center;
}
.layout-backdrop .harbor-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.layout-backdrop .harbor-scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 53%;
  opacity: .58;
  transform: scaleX(-1);
  /* The transform also mirrors the mask; keep the paper fade behind the text. */
  mask-image: linear-gradient(270deg, transparent 3%, #000 78%),
    linear-gradient(180deg, transparent, #000 15%, #000 76%, transparent 98%);
  mask-composite: intersect;
}
.layout-backdrop .harbor-scene figcaption { position: absolute; right: 12px; bottom: 22px; }
.layout-backdrop .hero-copy {
  width: 610px;
  max-width: 100%;
  background: radial-gradient(ellipse at 18% 48%, var(--paper) 30%, #f5f1e7e8 50%, #f5f1e700 74%);
}

/* B. A harbor vignette opens the page and dissolves into the working manual. */
.layout-harbor .harbor-opening { overflow: hidden; }
.layout-harbor .harbor-opening > .hero { width: 100%; margin-inline: 0; }
.layout-harbor .hero { min-height: 565px; padding-block: 64px 70px; }
.layout-harbor .hero-copy { width: 49%; }
.layout-harbor .harbor-scene {
  --harbor-image-width: 840px;
  position: absolute;
  right: 0;
  top: -46px;
  width: calc(50% + 75px);
  z-index: -1;
}
/* The illustration keeps its scale; this window ends at the shared .wrap edge. */
.layout-harbor .harbor-visual {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, #000 calc(100% - clamp(32px, 6vw, 96px)), transparent);
}
.layout-harbor .harbor-scene img {
  width: var(--harbor-image-width);
  max-width: none;
  opacity: .88;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 92%, transparent),
    linear-gradient(180deg, #000 62%, transparent 99%);
  mask-composite: intersect;
}
.layout-harbor .harbor-scene figcaption {
  position: absolute;
  top: 488px;
  left: 145px;
  right: 16px;
  text-align: left;
}
.layout-harbor .hero-copy::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -40px -65px -40px -35px;
  background: linear-gradient(90deg, var(--paper) 64%, #f5f1e7e8 77%, #f5f1e700);
  pointer-events: none;
}

/* C. A centered frontispiece, with a separate, quiet title beneath it. */
.layout-frontispiece .hero { padding-block: 4px 58px; }
.layout-frontispiece .harbor-scene { width: min(100%, 840px); margin: 0 auto 28px; }
.layout-frontispiece .harbor-scene img { height: 315px; object-fit: cover; object-position: center 47%; }
.layout-frontispiece .harbor-scene figcaption { text-align: center; margin-top: 0; }
.layout-frontispiece .hero-copy { max-width: 740px; margin-inline: auto; padding: 0; text-align: center; }
.layout-frontispiece .hero-copy > p:not(.eyebrow) { max-width: 590px; margin-inline: auto; }
.layout-frontispiece .hero-copy .actions { justify-content: center; }
.layout-frontispiece h1 br { display: none; }

@media (min-width: 1500px) {
  .layout-harbor .harbor-scene { --harbor-image-width: 920px; top: -68px; }
  .layout-harbor .harbor-scene figcaption { top: 512px; }
}

@media (max-width: 1000px) {
  .layout-harbor .hero-copy { width: 55%; }
  .layout-harbor .harbor-scene { width: 54%; --harbor-image-width: 780px; top: -5px; }
  .layout-harbor .harbor-scene figcaption { left: 125px; top: 470px; max-width: 250px; }
  .layout-harbor .hero-copy::before { inset-inline-end: -50px; }
  .layout-frontispiece .harbor-scene img { height: 285px; }
}

/* On small screens the scene becomes a short opening plate. Text stays on paper. */
@media (max-width: 700px) {
  .harbor-opening .hero { min-height: 0; padding-block: 18px 38px; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .harbor-opening .harbor-scene {
    position: relative;
    inset: auto;
    width: 100%;
    z-index: auto;
    margin: 0 0 26px;
    order: -1;
  }
  .harbor-opening .harbor-scene img {
    height: clamp(190px, 51vw, 310px);
    width: 100%;
    object-fit: cover;
    object-position: center 47%;
    opacity: .9;
    mask-image: linear-gradient(180deg, #000 70%, transparent);
    mask-composite: add;
  }
  .harbor-opening .harbor-scene figcaption {
    position: relative;
    inset: auto;
    max-width: none;
    text-align: center;
    font-size: .8125rem;
    margin: 0;
  }
  .harbor-opening .hero-copy { width: 100%; max-width: none; padding: 0; background: none; text-align: left; }
  .harbor-opening .hero-copy::before { display: none; }
  .harbor-opening .hero-copy > p:not(.eyebrow) { max-width: 100%; }
  .harbor-opening .hero-copy .actions { justify-content: flex-start; }
  .layout-frontispiece h1 br { display: initial; }
}