/* Image motion and reveals share a stable, unclipped observation frame. */
* { letter-spacing: 0 !important; }
[hidden] { display: none !important; }
html, body { overscroll-behavior-y: none; }
html.invite-locked { overflow: hidden; }
body.invite-locked { position: fixed; inset: 0; width: 100%; height: 100svh; overflow: hidden; }
svg { width: 18px; height: 18px; flex: 0 0 auto; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid #d49460; outline-offset: 5px; }
.motion-frame { position: relative; overflow: hidden; isolation: isolate; margin: 0; background: #dae4de; }
.motion-frame[data-motion-state="loading"] { background: linear-gradient(110deg, #d9e3de 20%, #edf1ec 40%, #d9e3de 60%); background-size: 200% 100%; animation: motion-placeholder-shimmer 1.8s ease-in-out infinite; }
.motion-frame .motion-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-focal, 50% 50%); transform: var(--motion-base-transform, none); transform-origin: var(--photo-focal, 50% 50%); transition: none; border-radius: 0; }
.motion-frame[data-motion-state="running"] .motion-image { will-change: transform, opacity, filter; }
.photo:hover img { transform: none; }
.photo::after { content: none; }
.photo > svg { position: absolute; z-index: 2; bottom: 14px; right: 14px; width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 1px 3px #000); }
.cover-image.motion-frame, .hero-photo.motion-frame { position: absolute; inset: 0; background-image: none; transform: none; }
.cover, .hero { isolation: isolate; overflow: hidden; }
.cover { min-height: 100svh; height: 100svh; }
.cover-overlay { pointer-events: none; background: linear-gradient(0deg, rgb(10 28 22 / .66), transparent 70%); }
.cover-copy { z-index: 2; width: min(100% - 48px, 760px); align-self: end; padding: 30px 12px 60px; border: 0; background: none; box-shadow: none; animation: none; }
.cover-copy button { position: relative; overflow: visible; }
/* A single sheet lift is driven by app.js; keep only the tactile button response. */
.cover.is-opening { position: fixed; inset: 0; z-index: 30; }
.cover.is-opening .cover-copy button { animation: button-press 260ms ease-out both; }
@keyframes button-press { 0%, 100% { transform: scale(1); } 45% { transform: scale(.97); } }
@keyframes motion-placeholder-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.cover h1 { font-size: 52px; line-height: 1.3; white-space: nowrap; }
.cover-copy .heart { margin: 12px 0; font-size: 26px; }
.cover-copy p { margin: 16px 0 24px; }
.cover-date { left: 28px; right: auto; bottom: 20px; font-size: 12px; }
.cover-copy button { border-radius: 4px; min-width: 148px; justify-content: center; }
.cover-copy button:disabled { cursor: default; }
.hero { min-height: 88svh; }
.hero h2 { font-size: 72px; line-height: 1.15; }
.hero::after { background: linear-gradient(0deg, rgb(10 28 22 / .62), transparent 75%); pointer-events: none; }
.hero-next { display: inline-flex; margin-top: 24px; padding: 12px 0; }
.hero-next svg { width: 22px; height: 22px; }
.manifesto { grid-template-columns: 30px minmax(0, 1fr) minmax(0, .9fr); gap: 48px; }
.manifesto h2, .section-title h2, .date h2, .reply h2 { font-size: 48px; line-height: 1.3; }
.manifesto-image { width: 100%; aspect-ratio: var(--photo-ratio, 2 / 3); min-width: 0; }
.chapter { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
.chapter-media { width: 100%; aspect-ratio: var(--photo-ratio, 3 / 2); }
.chapter-media .motion-image { aspect-ratio: auto; }
.chapter:nth-child(even) .chapter-media { order: 2; }
.chapter h3 { font-size: 34px; line-height: 1.4; }
.chapter p, .manifesto-copy > p, .date-copy > p, .note { line-height: 1.95; font-size: 15px; }
.poster { padding: 26px; gap: 24px; }
.poster strong { font-size: 148px; }
.count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 400px); }
.count span { min-width: 0; margin-right: 0; padding: 0 12px; text-align: center; }
.count b { font-size: 36px; font-variant-numeric: tabular-nums; }
.photo { aspect-ratio: var(--photo-ratio, 3 / 2); }
.place { grid-template-columns: 1fr 1fr; overflow: hidden; }
.place-photo { min-height: 0; aspect-ratio: var(--photo-ratio, 3 / 2); align-self: center; background-image: none !important; }
.place-photo .motion-image { position: absolute; inset: 0; }
.place h2 { font-size: 56px; line-height: 1.3; }
.place-copy { min-width: 0; padding-left: 54px; padding-right: 54px; }
.place-copy a { display: inline-flex; align-items: center; gap: 8px; }
.reply button { display: inline-flex; gap: 12px; align-items: center; }
.reply h2 { font-size: 52px; }
.reply { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.reply-note { max-width: 360px; margin: 28px 0 0; font-size: 13px; line-height: 1.9; opacity: .72; }
.reply-body { min-width: 0; }
.reply-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.reply-form label { display: grid; gap: 12px; min-width: 0; font-size: 14px; }
.reply-form input, .reply-form select, .reply-form textarea { width: 100%; min-width: 0; padding: 12px; color: var(--ink); background: rgb(255 255 255 / .32); border: 1px solid var(--line); border-radius: 3px; font: inherit; font-size: 16px; line-height: 1.5; }
.reply-form input::placeholder, .reply-form textarea::placeholder { color: var(--ink); opacity: .6; }
.reply-form textarea { resize: vertical; min-height: 130px; }
.reply-message, .reply-form > button, .reply-form .reply-status { grid-column: 1 / -1; }
.reply-form > button { justify-content: center; min-height: 48px; margin-top: 0; background: var(--forest); }
.reply-form > button:disabled { cursor: wait; opacity: .6; }
.reply-body > .reply-success { margin: 0; padding: 32px 24px; border: 1px solid var(--line); font-size: 18px; line-height: 1.8; text-align: left; }
.closing { padding-bottom: 120px; }
.music-credit { max-width: 740px; margin: 36px auto 16px; font-size: 11px; line-height: 2.1; color: #ddd; }
.evaluation-link { font-size: 11px; color: #ddd; }

.variant-mountain .manifesto { background: #f0f4f2; }
.variant-mountain .chapters { background: #dce9e8; }
.variant-mountain .date, .variant-mountain .album { background: #fafafa; }
.variant-mountain .reply { background: #edd9d9; }
.variant-mountain .reply em { color: #93564f; }

.music-player { position: fixed; z-index: 45; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 6px; padding: 5px; color: #fff; background: rgb(19 38 30 / .94); border: 1px solid #ffffff40; border-radius: 6px; }
.music-toggle { position: static; display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; color: #fff; background: none; border: 0; border-radius: 4px; animation: none; }
.music-toggle .pause-icon { display: none; }
.music-toggle[data-state="playing"] .play-icon { display: none; }
.music-toggle[data-state="playing"] .pause-icon { display: block; }
.music-toggle[data-state="loading"] { opacity: .6; }
.music-toggle[data-state="error"] { color: #ffc6bb; }
.modal-open { overflow: hidden; }
.lightbox { overflow: auto; }
.lightbox img { max-width: min(94vw, 1400px); }
.lightbox button, .reply-panel > button { display: grid; place-items: center; }
.reply-panel > button { color: #244334; border-color: #24433470; }
.reply-panel { max-height: calc(100dvh - 40px); overflow-y: auto; }
.reply-panel h2 { font-size: 34px; }
.reply-panel form > button { display: flex; align-items: center; justify-content: center; gap: 10px; }

@media (max-width: 900px) {
  .manifesto { gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
  .number { display: none; }
  .manifesto h2, .section-title h2, .date h2, .reply h2 { font-size: 38px; }
  .date { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  .place-copy { padding-left: 30px; padding-right: 30px; }
  .place h2 { font-size: 42px; }
}
@media (max-width: 700px) {
  .motion-frame .motion-image { object-position: var(--photo-focal-mobile, 50% 50%); transform-origin: var(--photo-focal-mobile, 50% 50%); }
  .cover-copy { width: calc(100% - 32px); padding: 20px 0 82px; }
  .cover h1 { font-size: 34px; }
  .cover-date { left: 22px; bottom: 20px; }
  .micro { font-size: 9px; }
  .hero h2 { font-size: 48px; }
  .hero.section { padding-bottom: 36px; }
  .manifesto, .date, .place { grid-template-columns: minmax(0, 1fr); }
  .manifesto { gap: 32px; }
  .manifesto-image { margin-top: 0; }
  .manifesto h2, .section-title h2, .date h2 { font-size: 34px; }
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .chapter:nth-child(even) .chapter-media { order: 0; }
  .chapter h3 { font-size: 28px; }
  .chapter-media { aspect-ratio: var(--photo-ratio, 3 / 2); }
  .poster { width: 100%; grid-template-columns: 1fr 1fr; }
  .poster strong { font-size: 128px; }
  .poster small { font-size: 11px; }
  .count b { font-size: 30px; }
  .album-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .photo.p1, .photo.p4 { grid-column: 1 / -1; aspect-ratio: 3 / 2; margin-top: 0; }
  .photo.p2 { grid-column: 1; margin-top: 0; }
  .photo.p3 { grid-column: 2; margin-top: 30px; }
  .place-photo { min-height: 0; aspect-ratio: var(--photo-ratio, 3 / 2); }
  .place h2 { font-size: 44px; }
  .place-copy { padding-left: 24px; padding-right: 24px; }
  .reply h2 { font-size: 34px; }
  .reply { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .reply-form { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .music-player { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
  .reply-panel { padding: 44px 24px 28px; }
  .reply-panel h2 { font-size: 28px; }
}
@media (max-width: 360px) {
  .cover h1 { font-size: 28px; }
  .manifesto h2, .reply h2 { font-size: 29px; }
  .count span { padding: 0 7px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .motion-image, .motion-frame { animation: none !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .motion-frame[data-motion-state="loading"] { background: #dae4de; }
  .cover.is-opening .cover-copy button::before, .cover.is-opening .cover-copy button::after { animation: none !important; }
}