:root{color-scheme:dark;--cream:#e8dfcf;--muted:#a9977e;--gold:#b89b65;--background:#0b0a09}
*{box-sizing:border-box}
body{margin:0;background:var(--background);color:var(--cream);font-family:Arial,Helvetica,sans-serif}
main{width:100%;min-height:100svh;margin:auto;padding:0 24px 56px;display:flex;flex-direction:column;align-items:center}
.hero{position:relative;width:min(100vw,1440px);aspect-ratio:3/1;margin-top:clamp(32px,7vh,80px);isolation:isolate;overflow:hidden;flex-shrink:0}
.photograph{position:relative;width:100%;aspect-ratio:3/1;mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}
.stage-image{display:block;width:100%;height:auto}
#cremant-bubbles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--background),transparent 12%,transparent 90%,var(--background));pointer-events:none}
.departure{width:min(100%,780px);margin-top:20px}
.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.digits{display:flex;justify-content:center;gap:6px}
.unit-label{text-align:center;text-transform:uppercase;color:var(--muted);letter-spacing:.23em;font-size:10px;margin-top:17px}
.flap{position:relative;display:block;flex:1;min-width:0;max-width:78px;aspect-ratio:.7;background:#141210;border:1px solid #b89b6538;border-radius:5px;perspective:600px;box-shadow:0 8px 14px #0005;isolation:isolate;font:500 clamp(30px,5.3vw,66px)/1 Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;color:var(--gold)}
.half{position:absolute;left:0;top:0;width:100%;height:50%;overflow:hidden;backface-visibility:hidden;background:#1a1714;border-radius:4px 4px 0 0}
.half span{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;height:200%}
.bottom{top:50%;background:#141210;border-radius:0 0 4px 4px}
.bottom span{top:-100%}
.flap::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:#080706;z-index:5;box-shadow:0 1px #b89b651a}
.turn-top{transform-origin:bottom;animation:fold .24s ease-in forwards;z-index:3}
.turn-bottom{top:50%;transform-origin:top;transform:rotateX(90deg);animation:unfold .24s .24s ease-out forwards;z-index:4}
@keyframes fold{to{transform:rotateX(-90deg)}}
@keyframes unfold{to{transform:rotateX(0)}}
.bock{margin:45px 0 0;color:#d9b77b;font-size:clamp(40px,5vw,64px);line-height:1;font-weight:700;text-align:center;letter-spacing:-.035em}
.member-message{margin-top:32px!important;max-width:100%;overflow-wrap:anywhere}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fallback{text-align:center;line-height:1.6}
@media(max-width:600px){main{padding:0 20px 40px}.hero{height:260px;aspect-ratio:auto;margin-top:24px}.photograph{position:absolute;width:780px;left:calc(50% - 460px)}.departure{margin-top:16px}.countdown{gap:14px}.digits{gap:3px}.flap{font-size:clamp(25px,7vw,42px)}.unit-label{font-size:8px;letter-spacing:.12em;margin-top:12px}.bock{margin-top:34px}}
@media(max-width:360px){.countdown{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:260px;margin:auto}.flap{max-width:50px;font-size:40px}.unit-label{font-size:9px}.hero{height:240px}.photograph{width:720px;left:calc(50% - 420px)}}
@media(prefers-reduced-motion:reduce){.turn-top,.turn-bottom{animation:none}.turn-bottom{transform:none}}

/* Portrait composition: three breathing spaces, sized to Safari's safe viewport.
   Minimum row sizes allow short screens to scroll instead of squeezing content. */
@media(max-width:600px) and (orientation:portrait){
  main{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(260px,1.25fr) minmax(110px,1fr) minmax(120px,1fr);justify-items:center;align-items:center;gap:16px;padding:24px 20px max(28px,env(safe-area-inset-bottom));height:100svh;min-height:574px}
  .hero{margin-top:0;align-self:start}
  .departure{margin-top:0}
  .bock{margin:0;font-size:clamp(44px,12vw,60px)}
  .member-message{margin-top:0!important;padding-bottom:12px}
}

@media(max-width:360px) and (orientation:portrait){main{min-height:700px;grid-template-rows:minmax(240px,1.25fr) minmax(220px,1fr) minmax(120px,1fr)}}