/* V3, The door: AMPIRI parts and the river opens between the letters. */
body { background: var(--sand); }

/* the door: three screens of scroll, one pinned screen */
.door { position: relative; height: 320svh; background: var(--sand); }
.door__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.door__win { position: absolute; inset: 0; clip-path: inset(30% 49.6% 30% 49.6%); background: var(--canopy); }
.door__win picture, .door__win img { width: 100%; height: 100%; }
.door__win img { object-fit: cover; object-position: 50% 58%; }
.door__mark { position: relative; z-index: 2; margin: 0; font-size: clamp(76px, 19vw, 300px); line-height: .9; color: var(--ink); }
.door__mark .mk__l { margin-right: .06em; will-change: transform; }
.door__type { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14vh; display: grid; justify-items: center; gap: 14px; color: var(--paper); opacity: 0; text-align: center; padding: 0 var(--gut); }
.door__type .eyebrow { color: var(--paper); }
.door .cue { background: rgba(45,31,14,.25); }
.door .cue::after { background: var(--ink); }
html.is-home .bar:not(.is-solid) { color: var(--ink); }

/* inner pages: the title on the sand, the photograph growing out from under it */
.hero--inner { height: 230svh; background: var(--sand); color: var(--ink); overflow: visible; }
.hero--inner .hero__ph { position: sticky; top: 0; height: 100svh; clip-path: inset(64% 36% 8% 36%); background: var(--canopy); }
.hero--inner .hero__ph::after { display: none; }
.hero--inner .hero__type { position: absolute; inset: 0 0 auto; height: 100svh; justify-content: flex-start; padding-top: calc(var(--bar-h) + 9vh); }
.hero--inner .eyebrow--light { color: var(--red-t); opacity: 1; }
.hero--inner .hero__title { font-size: clamp(52px, 9vw, 140px); }
.hero--inner .cue { display: none; }
.bar { background: var(--sand); }
.bar::after { transform: scaleX(1); }

/* one idea per screen: chapters breathe further apart */
.ch { padding-top: var(--statement); padding-bottom: var(--statement); }
.ch__head .display { font-size: clamp(56px, 9vw, 150px); }
.ch .lede { font-size: clamp(30px, 3.6vw, 52px); max-width: 18em; text-align: center; }
.plate__win { width: 56%; aspect-ratio: 16 / 10; }
.ch--plate .plate__win { aspect-ratio: 16 / 10; }
@media (max-width: 860px) {
  .door__mark { font-size: 21vw; }
  .hero--inner .hero__ph { clip-path: inset(62% 14% 10% 14%); }
}
html.is-home .bar:not(.is-solid) { background: transparent; }
html.is-home .bar:not(.is-solid)::after { transform: scaleX(0); }