/* Selected reel composition. A hero has an exact viewport/safe-area anchor;
   its supporting reading field is independent of that anchor. */
.copy[data-page] {
  --safe-top: max(132px, 12vh);
  --safe-bottom: 116px;
  --hero-left: auto;
  --hero-right: calc(var(--gutter) + 76px);
  --hero-top: 50%;
  --hero-bottom: auto;
  --hero-transform: translateY(-50%);
  --hero-align: left;
  --hero-width: min(700px, 43vw);
  --reel-size: clamp(42px, min(4.25vw, 7vh), 78px);
  --reading-left: var(--gutter);
  --reading-right: auto;
  --reading-width: min(530px, 33vw);
  --reading-height: min(24vh, 255px);
  --reading-bottom: 112px;
  --reading-columns: 1;
}
.copy[data-page] :is(.copy-content, .chapter-layout) {
  display: contents;
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
  transform: none;
}
.copy[data-page] :is(.hero, .chapter-hero) {
  position: absolute;
  inset: var(--hero-top) var(--hero-right) var(--hero-bottom) var(--hero-left);
  width: fit-content;
  max-width: min(var(--hero-width), calc(100vw - var(--gutter) * 2 - 76px));
  margin: 0;
  transform: var(--hero-transform);
  text-align: var(--hero-align);
}
.copy[data-page] :is(.hero h1, .hero h2, .chapter-hero h3) {
  margin: 0;
  color: var(--paper);
  font-size: var(--reel-size);
  font-weight: 780;
  line-height: 1.25;
  letter-spacing: -.055em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgb(9 11 11 / .48);
}
.copy[data-page] :is(.hero-opening, .hero-statement, .chapter-kicker, .chapter-line) {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: normal;
  color: var(--paper);
  background: none;
}
.copy[data-page] :is(.hero-opening, .chapter-kicker) { margin-bottom: .13em; }
.copy[data-page] :is(.hero-opening, .hero-statement, .chapter-kicker, .chapter-line, .chapter-mark)::before {
  content: none;
  background: none;
  mask: none;
  -webkit-mask: none;
  animation: none;
}
.copy[data-page] :is(.hero-accent, .chapter-mark) {
  display: inline;
  margin: 0;
  padding: .015em .09em .055em;
  color: var(--charcoal);
  background: var(--gold);
  font-size: inherit;
  font-style: normal;
  text-shadow: none;
  font-weight: inherit;
  line-height: 1.28;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.copy[data-page] .hero .eyebrow { display: none; }
.copy[data-page] .scene-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.copy[data-page] :is(.scene-graphic, .chapter-geometry) { display: none; }
.copy[data-page] .chapter-layout::after { content: none; }
.copy[data-page] .scene-subtitle {
  position: absolute;
  left: var(--reading-left);
  right: var(--reading-right);
  bottom: calc(var(--reading-bottom) + var(--reading-height) + 18px);
  top: auto;
  width: var(--reading-width);
  max-width: calc(100vw - var(--gutter) * 2);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--paper);
  font-size: clamp(18px, 1.3vw, 23px);
  font-weight: 560;
  line-height: 1.5;
  letter-spacing: -.035em;
  text-shadow: 0 1px 6px rgb(9 11 11 / .45);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.copy[data-page] .scene-subtitle::before {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin-bottom: 16px;
  background: rgb(216 183 71 / .75);
}
.copy--opening[data-page] {
  --reel-size: clamp(100px, min(9vw, 14vh), 150px);
  --hero-width: min(440px, 31vw);
}
.copy--opening[data-page] .scene-subtitle {
  bottom: 142px;
  width: fit-content;
  max-width: 46vw;
  font-size: clamp(27px, 2.25vw, 38px);
  font-weight: 620;
  line-height: 1.35;
}
.copy--opening[data-page] .scene-subtitle::before { content: none; }
.copy--meeting[data-page] { --reel-size: clamp(40px, min(3.65vw, 6.5vh), 68px); --hero-top: var(--safe-top); --hero-transform: none; }
.scene--world[data-page] { --reel-size: clamp(40px, min(3.75vw, 6.5vh), 72px); }
.scene--relationship[data-page] { --reading-height: min(28vh, 255px); --hero-left: var(--gutter); --hero-right: auto; --hero-top: var(--safe-top); --hero-transform: none; }
.scene--community[data-page] { --hero-top: var(--safe-top); --hero-transform: none; --reel-size: clamp(40px, min(3.8vw, 6.7vh), 74px); }
.scene--origin[data-page] {
  --hero-left: 50%; --hero-right: auto; --hero-top: var(--safe-top); --hero-transform: translateX(-50%); --hero-align: center;
  --hero-width: min(1180px, 78vw); --reel-size: clamp(40px, min(3.7vw, 6.5vh), 72px);
  --reading-width: min(1040px, 70vw); --reading-columns: 2;
}
.scene--origin[data-page] :is(.chapter-kicker, .chapter-line) { margin-inline: auto; }
.scene--origin[data-page] .scene-subtitle { width: min(530px, 33vw); }
.scene--identity[data-page] { --hero-left: var(--gutter); --hero-right: auto; --hero-top: var(--safe-top); --hero-transform: none; --reading-width: min(560px, 35vw); --reading-height: min(29vh, 310px); }
.scene--business[data-page] { --hero-left: var(--gutter); --hero-right: auto; --hero-top: var(--safe-top); --hero-transform: none; --hero-width: min(890px, 49vw); --reel-size: clamp(35px, min(3.1vw, 5.5vh), 58px); --reading-left: auto; --reading-right: calc(var(--gutter) + 76px); --reading-width: min(570px, 35vw); --reading-height: min(29vh, 310px); }
.scene--products[data-page] { --hero-left: var(--gutter); --hero-right: auto; --hero-top: var(--safe-top); --hero-transform: none; --reading-left: auto; --reading-right: calc(var(--gutter) + 76px); --reading-width: min(600px, 37vw); --reading-height: min(34vh, 365px); }
.scene--research[data-page] { --hero-top: var(--safe-top); --hero-transform: none; --reading-height: min(29vh, 310px); }

/* Shallow desktop preserves exact anchors while scaling the whole hero uniformly. */
@media (min-width: 761px) and (max-height: 850px) {
  .copy[data-page] { --safe-top: 110px; --reading-bottom: 106px; --reading-height: min(25vh, 205px); --reel-size: clamp(32px, min(3.6vw, 6.8vh), 60px); }
  .copy--opening[data-page] { --reel-size: clamp(78px, min(8vw, 14vh), 118px); }
  .copy--opening[data-page] .scene-subtitle { bottom: 124px; }
  .scene--identity[data-page], .scene--research[data-page], .scene--business[data-page], .scene--relationship[data-page] { --reading-height: min(32vh, 260px); }
  .scene--products[data-page] { --reading-height: min(37vh, 300px); }
}

/* Portrait is a deliberate upper hero / lower reading composition, not a
   squeezed desktop layout. Every hero uses the same two 24px safe-area edges. */
@media (max-width: 760px) {
  .copy[data-page] {
    --gutter: 24px;
    --safe-top: 118px;
    --hero-top: var(--safe-top); --hero-bottom: auto;
    --hero-left: 24px; --hero-right: 24px; --hero-transform: none; --hero-align: left;
    --hero-width: calc(100vw - 48px);
    --reel-size: clamp(29px, 8.3vw, 52px);
    --reading-left: 24px; --reading-right: 24px; --reading-width: auto;
    --reading-height: 254px; --reading-bottom: 146px; --reading-columns: 1;
  }
  .copy[data-page] :is(.hero, .chapter-hero) { max-width: var(--hero-width); }
  .copy[data-page] .scene-subtitle { max-width: none; font-size: 17px; line-height: 1.45; }
  .copy[data-page] .scene-subtitle::before { width: 32px; margin-bottom: 12px; }
  .copy--opening[data-page] { --hero-top: var(--safe-top); --hero-transform: none; --reel-size: clamp(80px, 25vw, 112px); }
  .copy--opening[data-page] .scene-subtitle { bottom: 160px; max-width: calc(100vw - 48px); font-size: clamp(22px, 6vw, 27px); }
  .scene--business[data-page] { --reel-size: clamp(27px, 7.1vw, 44px); }
  .scene--origin[data-page] .scene-subtitle { width: auto; }
  .scene--origin[data-page] :is(.chapter-kicker, .chapter-line) { margin-inline: 0; }
  .scene--products[data-page], .scene--research[data-page], .scene--identity[data-page] { --reading-height: 272px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .copy[data-page] { --safe-top: 94px; --reading-height: 220px; --reading-bottom: 106px; --reel-size: 29px; }
  .copy--opening[data-page] { --hero-top: var(--safe-top); --reel-size: 76px; }
  .copy[data-page] .scene-subtitle { font-size: 15px; }
  .copy--opening[data-page] .scene-subtitle { bottom: 136px; font-size: 20px; }
  .scene--business[data-page] { --reel-size: 26px; }
  .scene--products[data-page], .scene--research[data-page], .scene--identity[data-page] { --reading-height: 238px; }
}
@media (min-width: 761px) and (max-height: 480px) {
  .copy[data-page] {
    --safe-top: 100px;
    --hero-left: var(--gutter); --hero-right: auto; --hero-top: var(--safe-top); --hero-transform: none; --hero-align: left;
    --hero-width: calc(48vw - var(--gutter) - 26px); --reel-size: 29px;
    --reading-left: auto; --reading-right: calc(var(--gutter) + 72px); --reading-width: min(355px, 40vw); --reading-height: 224px; --reading-bottom: 60px; --reading-columns: 1;
  }
  .copy--opening[data-page] { --hero-top: 50%; --hero-transform: translateY(-50%); --reel-size: 62px; }
  .copy--opening[data-page] .scene-subtitle { left: auto; right: calc(var(--gutter) + 72px); bottom: 60px; max-width: 40vw; font-size: 21px; }
  .copy[data-page] .scene-subtitle { left: var(--gutter); right: auto; bottom: 60px; width: calc(48vw - var(--gutter) - 26px); font-size: 14px; line-height: 1.4; }
  .copy[data-page] .scene-subtitle::before { content: none; }
  .copy--opening[data-page] .scene-subtitle { left: auto; right: calc(var(--gutter) + 72px); width: fit-content; font-size: 21px; }
  .scene--origin[data-page] :is(.chapter-kicker, .chapter-line) { margin-inline: 0; }
}

/* A quiet, flat reading label only where the actual film is bright. */
.copy--meeting[data-page] .scene-subtitle,
.copy[data-page]:is(.scene--world, .scene--community, .scene--origin, .scene--products, .scene--research) .scene-subtitle {
  padding: 8px 12px;
  box-sizing: border-box;
  background: rgb(9 11 11 / .48);
}
.copy--meeting[data-page] .scene-subtitle::before,
.copy[data-page]:is(.scene--world, .scene--community, .scene--origin, .scene--products, .scene--research) .scene-subtitle::before { content: none; }
@media (max-width: 760px) {
  .copy--meeting[data-page] .scene-subtitle,
  .copy[data-page]:is(.scene--world, .scene--community, .scene--origin, .scene--products, .scene--research) .scene-subtitle { padding: 7px 10px; }
}