/* Home: a Moment. Ivory paper with the headline in Newsreader and the black card floating below it; when the camera
   dives into the card's court the felt spreads across the page (ambient.js), the text turns cream, and it all draws
   back as the card returns. */
.page { display: flex; flex-direction: column; }
.hero { position: relative; z-index: 5; width: min(1160px, calc(100% - 80px)); margin: 0 auto; padding-top: clamp(112px, 15vh, 152px); display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: end; color: var(--cream); }
.hero h1 { font: 500 72px/1.02 var(--moment); letter-spacing: -.02em; }
.hero h1 span { display: block; }
.hero h1 em { font-style: italic; color: var(--em); transition: color .4s; }
.hero h1, .hero .sub, .band a.nav, .band .word, .band .signin, .lang, .floor, .motion-toggle { transition: color .4s, border-color .4s; }
.hero-copy { padding-bottom: 8px; max-width: 340px; justify-self: end; text-align: right; }
.hero .sub { font-size: 16px; line-height: 1.6; color: var(--cream-muted); text-wrap: pretty; }
.hero h1, .hero .sub { animation: hero-drop .6s cubic-bezier(.16, 1, .3, 1) both; }
.hero h1 { animation-delay: .07s; }
.hero .sub { animation-delay: .14s; }
.felt-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; visibility: hidden; }
.ambient { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#stage { --st-pad: 60px; position: absolute; inset: var(--st-top, 320px) 0 0; z-index: 2; pointer-events: none; }
#stage:not(.h3) { bottom: var(--st-pad); } /* the CSS fallback card keeps the old frame */
#stage.h3 { top: 0; } /* the 3D canvas covers the whole page; hero3d frames the shot below the headline */
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.moment-bar { position: absolute; z-index: 4; bottom: 56px; right: max(40px, calc((100% - 1160px)/2)); }
/* Secondary on felt: cream text, a white hairline that turns cream on hover. */
.motion-toggle { height: 36px; padding: 0 16px; color: var(--cream); background: transparent; border: 1px solid var(--cream-line); border-radius: 999px; font: 500 12px var(--work); cursor: pointer; }
.motion-toggle:hover { border-color: var(--cream); }
.floor { position: absolute; inset: auto 0 0; height: 44px; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 28px; font-size: 12px; color: var(--cream-faint); }
.floor nav { display: flex; gap: 16px; }
.floor a { text-decoration: none; }
.floor a:hover { color: var(--cream); }
/* The note that follows each world: a small ivory slip resting on the felt, the lime dot beside "Payé". */
.lp-note { position: absolute; z-index: 3; padding: 12px 16px; min-width: 224px; border-radius: 8px; opacity: 0; overflow: hidden; background: var(--sheet); color: var(--ink); font-size: 12px; box-shadow: var(--sheet-shadow); }
.lp-note-top { display: flex; align-items: center; gap: 8px; }
.lp-note-top b { font-weight: 600; flex: 1; }
.lp-mk { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: inset 0 0 0 1px rgb(125 146 41 / .55); }
.lp-amt { font-weight: 600; }
.lp-note-line { margin-top: 4px; padding-left: 18px; font-size: 12px; color: var(--muted); }
.scene-still { width: min(72%, 540px); height: 88%; object-fit: cover; display: block; margin: 0 auto; border-radius: 16px; }
@media (max-width: 900px) {
  .hero { width: calc(100% - 48px); gap: 24px; padding-top: 104px; }
  .hero h1 { font-size: 48px; }
  .hero .sub { font-size: 14px; }
  .moment-bar { right: 24px; bottom: 76px; }
  .floor { height: 60px; flex-direction: column; justify-content: center; gap: 4px; padding: 0 20px; text-align: center; }
  #stage { --st-pad: 126px; }
  #stage .lp-note { top: auto; bottom: var(--st-pad); min-width: 0; white-space: nowrap; }
}
@media (max-width: 600px) {
  .hero { display: block; padding-top: 96px; }
  .hero-copy { max-width: 34ch; margin-top: 16px; justify-self: start; text-align: left; }
  .hero .sub { font-size: 14px; line-height: 1.55; }
}
@media (max-height: 650px) and (min-width: 601px) {
  .hero { padding-top: 88px; }
  .hero h1 { font-size: 48px; }
}
@media (max-height: 740px) and (max-width: 600px) {
  .hero { padding-top: 88px; }
  .hero h1 { font-size: 48px; }
  .hero-copy { margin-top: 12px; }
}