/* Home: the host. Welcome, the turning carte (the peak), everything in
   between, the room, reply. */

/* -------------------------------------------------------------- welcome -- */
.welcome { position: relative; }
.welcome__stage { --q: clamp(0, calc((var(--sc-p, 0.5) - 0.5) * 2), 1); position: relative; height: 100svh; min-height: 640px; overflow: clip; }
.welcome__ring {
  --d: min(92vmin, 900px);
  position: absolute; left: 50%; top: 44%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%; border: 1px solid color-mix(in oklab, var(--gold) 38%, transparent); pointer-events: none;
  transform: translate3d(calc(var(--mx, 0) * 5px), calc(var(--my, 0) * 4px), 0) scale(calc(1 + var(--q) * 0.1));
  opacity: calc(1 - var(--q) * 0.6);
}
.welcome__ring::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--gold) 20%, transparent); }
.welcome__copy { position: absolute; z-index: 3; left: 50%; top: calc(var(--bar-h) + 7svh); width: min(46rem, 88vw); transform: translateX(-50%); display: grid; justify-items: center; gap: 1.4rem; text-align: center; }
.welcome__mark { margin: 0; width: min(560px, 62vw); line-height: 0; color: var(--gold); }
.welcome__mark svg { width: 100%; height: auto; }
.welcome__copy .lede { max-width: 30ch; color: var(--sc-ink-soft); }
.welcome__plate { position: absolute; z-index: 2; margin: 0; }
.welcome__plate .photo { position: absolute; inset: 0; box-shadow: var(--sc-e3); }
.welcome__plate--caviar {
  left: 6vw; bottom: -9svh; height: 46svh; aspect-ratio: 1080 / 1522;
  transform: translate3d(calc(var(--mx, 0) * -9px), calc(var(--my, 0) * -7px + var(--q) * -6svh), 0) rotate(-2.2deg);
}
.welcome__plate--charcuterie {
  right: 6vw; bottom: -13svh; height: 42svh; aspect-ratio: 1100 / 1108; z-index: 4;
  transform: translate3d(calc(var(--mx, 0) * 15px), calc(var(--my, 0) * 11px + var(--q) * -14svh), 0) rotate(1.8deg);
}
.welcome__plate figcaption { position: absolute; left: 0; bottom: calc(100% + 0.6rem); font: 500 0.62rem/1.2 var(--sc-font-text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--sc-ink-soft); white-space: nowrap; }
@media (max-width: 860px) {
  .welcome__stage { min-height: 600px; }
  .welcome__copy { top: calc(var(--bar-h) + 4svh); gap: 1rem; }
  .welcome__mark { width: min(420px, 82vw); }
  .welcome__plate--caviar { left: var(--sc-gutter); height: 30svh; bottom: calc(58px + 3svh); }
  .welcome__plate--charcuterie { right: var(--sc-gutter); height: 25svh; bottom: calc(58px - 1svh); }
  .welcome__plate figcaption { display: none; }
}

/* ------------------------------------------------ the turning carte --- */
.turnact__stage { height: 100svh; overflow: clip; display: grid; place-items: center; perspective: 1900px; }
.turnact__ground { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.turnact__ground--dark { background: radial-gradient(ellipse 70% 70% at 50% 45%, #202226, #121315 70%); opacity: var(--dark, 0); }
.turnact__ground--light { background: radial-gradient(ellipse 70% 70% at 50% 45%, #f7f1e4, #efe6d3 72%); opacity: var(--light, 0); }
.turnact__title { position: absolute; z-index: 3; top: calc(var(--bar-h) + 5svh); left: 0; right: 0; text-align: center; font-size: clamp(2rem, 1.2rem + 2.8vw, 3.8rem); padding-inline: var(--sc-gutter); }
.turnact__after { position: absolute; z-index: 3; bottom: 7svh; left: 0; right: 0; text-align: center; margin: 0; color: #1e2847; font: italic 400 clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem)/1.4 var(--sc-font-display); padding-inline: var(--sc-gutter); }
.turnact__scene { position: relative; z-index: 2; width: min(29rem, 74vw, calc(62svh * 0.75)); aspect-ratio: 3 / 4; margin-top: 6svh; }
.turnact__shadow {
  position: absolute; left: 8%; right: 8%; bottom: -6%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(20 16 10 / 0.42), transparent);
  transform: scaleX(var(--shadow, 1)); opacity: var(--shadow-o, 0.6); filter: blur(4px);
}
.turnact__card {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translate3d(0, var(--lift-y, 0), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--turn, 0deg)) scale(var(--scale, 1));
}
.turnact__card .face { padding: 11% 10%; gap: 0.85rem; }
.turnact__card .face .medallion { width: 46%; }
.turnact__card .face__emblem { width: 58%; height: auto; filter: drop-shadow(0 10px 16px rgb(62 48 20 / 0.22)); }
.face__line { margin: 0; font-size: 0.9rem; line-height: 1.45; max-width: 26ch; }
.face--caviar .face__line { color: #b9bec5; }
.face--charcuterie .face__line { color: #465070; }
.face .label { color: inherit; opacity: 0.8; }
.face .link { color: inherit; }
.face--caviar .link { text-decoration-color: rgb(197 202 209 / 0.5); }

@media (max-width: 420px) {
  .turnact__card .face { padding: 10% 8%; gap: 0.5rem; }
  .turnact__card .face .medallion { width: 40%; }
  .turnact__card .face__emblem { width: 48%; }
  .turnact__card .face__name { font-size: 1.35rem; }
  .face__line { font-size: 0.8rem; }
  .turnact__card .face .label { font-size: 0.58rem; letter-spacing: 0.18em; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .welcome__plate--caviar { height: 24svh; }
  .welcome__plate--charcuterie { height: 20svh; }
  .welcome__copy { gap: 0.8rem; }
}

/* ----------------------------------------------------------- private ---- */
.private__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.private__intro { display: grid; gap: 1.2rem; justify-items: start; position: sticky; top: calc(var(--bar-h) + 2rem); }
@media (max-width: 860px) { .private__grid { grid-template-columns: 1fr; } .private__intro { position: static; } }

/* --------------------------------------------------------- the room ---- */
.room .field__item .cap b { font-size: 1rem; }

/* ------------------------------------------------------------- reply --- */
.reply { padding-block: clamp(4.5rem, 10vw, 9rem); }
.reply .card-plain { max-width: 50rem; margin-inline: auto; }
.reply__contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.8rem; margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: 0.95rem; }
.reply__contacts a { color: var(--sc-ink); text-underline-offset: 0.3em; text-decoration-color: var(--rule); }

@media (prefers-reduced-motion: reduce) {
  .turnact__card { transform: none !important; }
  .turnact__card .face { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity 200ms linear; }
  .turnact__card .face--back { transform: none; opacity: var(--light, 0); }
  .turnact__card .face--caviar { opacity: calc(1 - var(--light, 0)); }
  .welcome__ring, .welcome__plate--caviar, .welcome__plate--charcuterie { transform: none !important; }
  .welcome__plate--caviar { transform: rotate(-2.2deg) !important; }
  .welcome__plate--charcuterie { transform: rotate(1.8deg) !important; }
}