/* Three directions for the landing page. Only the first screen (and the canvas it sits on) differs. */
.chero { position: relative; isolation: isolate; min-height: min(94svh, 54rem); display: grid; align-items: center; overflow: clip; color: #fff; }
.chero__in { position: relative; z-index: 3; width: 100%; max-width: var(--shell); margin-inline: auto; padding: clamp(7rem, 15vh, 9rem) var(--gut) clamp(3rem, 8vh, 5rem); }
.chero__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 62rem) { .chero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.chero__place { margin: 0 0 1.4rem; display: flex; align-items: center; gap: 1rem; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.8; }
.chero__place .rule { width: 4.5rem; height: 1px; background: currentColor; opacity: 0.5; }
.chero__title { margin: 0; line-height: 0.95; }
.chero__title em { display: block; font-style: normal; }
.chero__lede { margin: 1.4rem 0 0; max-width: 29ch; font-size: var(--t-md); line-height: 1.65; }
.chero__acts { margin-top: 2rem; }
.flow .chero { background: transparent; }

/* ═══ A · Mauve garden: the photograph as a framed print, botanical plates behind it, everything in one rose canvas ═══ */
.cA .chero__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.9rem, 1.4rem + 4.6vw, 5.6rem); color: #fff; }
.cA .chero__title em { color: oklch(0.965 0.03 100); }
.cA .chero__lede { color: oklch(1 0 0 / 0.9); }
.chero--a .chero__wall { position: absolute; inset: 0; z-index: 0; opacity: 0.2; mix-blend-mode: multiply;
  background: url(../img/bairei-cherry.jpg) 100% 0 / auto 135% no-repeat; filter: sepia(0.35) saturate(0.7);
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 100%); mask-image: linear-gradient(90deg, transparent 38%, #000 100%); }
.chero__art { position: relative; display: grid; justify-items: center; }
.frame { position: relative; z-index: 2; margin: 0; width: min(100%, 26rem); aspect-ratio: 4 / 5; border-radius: 1.1rem; overflow: clip;
  box-shadow: 0 0 0 7px oklch(0.96 0.02 85), 0 40px 70px -28px oklch(0.15 0.05 355 / 0.7); }
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; }
.plate { position: absolute; z-index: 1; margin: 0; width: min(62%, 17rem); aspect-ratio: 3 / 4; padding: 0.5rem; background: oklch(0.95 0.025 88); box-shadow: 0 26px 50px -22px oklch(0.1 0.04 355 / 0.8); }
.plate img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.2); }
.plate--back { right: -2%; top: -3%; transform: rotate(5deg) translateX(18%); }
@media (max-width: 61.99rem) { .plate--back { display: none; } .frame { width: min(86%, 22rem); } }

/* ═══ B · Candlelight: a film still. The photograph full-bleed, dimmed into warm dark, amber glow rising from below ═══ */
.cB .flow { background: linear-gradient(180deg, #20121a 0%, #2a1822 55%, var(--ground) 100%); }
.chero--b { color: oklch(0.94 0.02 80); }
.chero__photo { position: absolute; inset: 0; z-index: 0; margin: 0; }
.chero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; display: block; transform: translateX(14%) scale(1.15); transform-origin: 70% 40%; filter: saturate(0.92) contrast(1.04) brightness(0.88); }
@media (max-width: 61.99rem) { .chero__photo img { transform: none; object-position: 50% 24%; } }
.chero__veil { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, #1d1017 0%, oklch(0.2 0.04 350 / 0.92) 26%, oklch(0.2 0.04 350 / 0.55) 46%, transparent 72%),
  linear-gradient(0deg, #20121a 0%, transparent 28%), linear-gradient(180deg, oklch(0.18 0.04 350 / 0.7), transparent 24%); }
@media (max-width: 61.99rem) { .chero__veil { background: linear-gradient(180deg, oklch(0.18 0.04 350 / 0.55) 0%, oklch(0.2 0.04 350 / 0.7) 55%, #20121a 100%); } }
.chero__ember { position: absolute; z-index: 1; inset: auto 0 -20% 20%; height: 70%; background: radial-gradient(60% 60% at 60% 100%, oklch(0.72 0.13 62 / 0.38), transparent 70%); mix-blend-mode: screen; }
.cB .chero__title { font-family: "Cormorant Garamond", var(--display); font-weight: 300; font-size: clamp(3.4rem, 1.6rem + 5.4vw, 6.6rem); letter-spacing: -0.01em; color: oklch(0.88 0.06 12); }
.cB .chero__title em { font-style: italic; color: oklch(0.82 0.08 12); }
.cB .chero__lede { font-family: "Cormorant Garamond", var(--display); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: oklch(0.93 0.025 80 / 0.9); }
.cB .chero__text { max-width: 36rem; }

/* ═══ C · Forest & rose: deep olive-teal ground, rose serif, the photograph in a circle ringed by fine lines ═══ */
.cC .flow { background: radial-gradient(60rem 36rem at 85% 18%, #36564b 0%, transparent 70%), linear-gradient(180deg, #1c2825 0%, #1f2d29 55%, #1a2220 100%); }
.chero--c { color: oklch(0.93 0.02 85); }
.chero--c .chero__wall { position: absolute; z-index: 0; left: -9%; bottom: -8%; width: 34%; height: 108%; opacity: 0.3; mix-blend-mode: luminosity;
  background: url(../img/bairei-peony.jpg) 50% 40% / cover no-repeat;
  -webkit-mask-image: radial-gradient(closest-side at 46% 55%, #000 22%, transparent 100%); mask-image: radial-gradient(closest-side at 46% 55%, #000 22%, transparent 100%); }
.cC .chero__title { font-family: "Cormorant Garamond", var(--display); font-weight: 300; font-size: clamp(3.4rem, 1.6rem + 5.4vw, 6.6rem); letter-spacing: -0.01em; color: oklch(0.82 0.07 10); }
.cC .chero__title em { font-style: italic; color: oklch(0.9 0.05 100); }
.cC .chero__lede { font-family: "Cormorant Garamond", var(--display); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: oklch(0.93 0.025 85 / 0.9); }
.chero--c .chero__art { aspect-ratio: 1; width: min(100%, 36rem); justify-self: center; }
.disc { position: absolute; inset: 7%; margin: 0; border-radius: 50%; overflow: clip; z-index: 2; box-shadow: 0 40px 80px -30px #000; }
.disc img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 34%; transform: scale(1.18); display: block; }
.ring { position: absolute; border-radius: 50%; border: 1px solid oklch(0.82 0.07 10 / 0.5); z-index: 1; }
.ring--1 { inset: 0; }
.ring--2 { inset: -7%; border-color: oklch(0.82 0.07 10 / 0.22); }
@media (max-width: 61.99rem) { .chero--c .chero__art { width: min(86%, 24rem); } }

/* ═══ C2 · the forest-and-rose text side, with the photograph bleeding in from the right edge ═══ */
.chero--d .chero__in { max-width: var(--shell); }
.chero--d .chero__text { max-width: 36rem; }
.dstage { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 60%; animation: sideIn 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.dphoto { position: absolute; inset: 0; margin: 0; overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 3%, rgb(0 0 0 / 0.1) 9%, rgb(0 0 0 / 0.4) 18%, rgb(0 0 0 / 0.78) 29%, #000 40%), linear-gradient(0deg, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, transparent 3%, rgb(0 0 0 / 0.1) 9%, rgb(0 0 0 / 0.4) 18%, rgb(0 0 0 / 0.78) 29%, #000 40%), linear-gradient(0deg, transparent 0, #000 14%);
  mask-composite: intersect; }
.dphoto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; transform: translateX(12%) scale(1.14); }
.chero--d .stage-bloom img { opacity: 0.7; }
@media (max-width: 61.99rem) {
  .dstage { position: relative; inset: auto; width: 100%; height: min(60vh, 28rem); }
  .chero--d { display: block; }
  .dphoto { -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 18%); mask-image: linear-gradient(0deg, transparent 0, #000 18%); }
  .dphoto img { transform: none; }
  .chero--d .chero__in { padding-top: 1.5rem; }
}

/* the Peakblossom mark as an emblem above the name: it fades in once, then rests */
.emblem { display: block; width: clamp(2.8rem, 3.6vw, 3.6rem); aspect-ratio: 454 / 549; margin: 0 0 1.6rem;
  background: linear-gradient(165deg, oklch(0.95 0.03 40), oklch(0.82 0.07 15) 60%, oklch(0.9 0.05 60));
  -webkit-mask: url(../img/logo.png) center / contain no-repeat; mask: url(../img/logo.png) center / contain no-repeat;
  filter: drop-shadow(0 0 14px oklch(0.85 0.06 15 / 0.35)); opacity: 0; animation: riseIn 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards; }
.chero--d .chero__place { opacity: 0; animation: riseIn 2s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards; }
.chero--d .chero__title { opacity: 0; animation: riseIn 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards; }
.chero--d .chero__lede { opacity: 0; animation: riseIn 2.2s cubic-bezier(0.22, 1, 0.36, 1) 1.15s forwards; }
.chero--d .chero__acts { opacity: 0; animation: riseIn 2.2s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards; }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.emblem { animation-name: riseIn; }
@media (prefers-reduced-motion: reduce) { .emblem, .chero--d .chero__place, .chero--d .chero__title, .chero--d .chero__lede, .chero--d .chero__acts { animation: none; opacity: 1; } }
.chero--d .chero__wall { opacity: 0.2; left: -12%; }
.chero--d .chero__in { padding-top: clamp(5.5rem, 12vh, 9rem); padding-bottom: clamp(2rem, 6vh, 4rem); }
@media (min-width: 62rem) and (max-height: 820px) {
  .chero--d .emblem { width: 2.5rem; margin-bottom: 0.9rem; }
  .chero--d .chero__place { margin-bottom: 1rem; }
  .cC .chero--d .chero__title { font-size: clamp(3rem, 10vh, 6.6rem); }
  .cC .chero--d .chero__lede { margin-top: 0.9rem; font-size: clamp(1.2rem, 2.9vh, 1.7rem); line-height: 1.5; }
  .chero--d .chero__acts { margin-top: 1.4rem; }
}