:root { color-scheme: light; font-family: Georgia, serif; background: #f4f0e8; color: #1d2925; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

main { width: min(42rem, 100%); padding: 2rem 1rem; }
h1 { font-size: clamp(2rem, 9vw, 4rem); margin: 0 0 1.5rem; }
form { display: grid; gap: 1rem; }
label { display: grid; gap: .35rem; font-size: 1.1rem; }
input { font: inherit; padding: .7rem; border: 2px solid #1d2925; border-radius: 2px; }
.file-control { cursor: pointer; padding: 1rem; background: #e7d6b5; border: 2px solid #1d2925; text-align: center; }
.file-control input { display: none; }
#gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 1.5rem; }
#gallery figure { aspect-ratio: 1; margin: 0; overflow: hidden; background: #d4c8b4; position: relative; }
#gallery img { width: 100%; height: 100%; object-fit: cover; }
#gallery .media-placeholder { display: grid; place-content: center; gap: .35rem; padding: .5rem; box-sizing: border-box; text-align: center; color: #1d2925; }
#gallery .media-placeholder small { overflow-wrap: anywhere; }
#gallery figcaption { position: absolute; inset: auto 0 0; padding: .3rem; background: #1d2925cc; color: white; font-size: .75rem; }
#gallery button { position: absolute; inset: .4rem .4rem auto auto; z-index: 1; }
#guestbook { margin-top: 2rem; }
#guestbook textarea { min-height: 6rem; resize: vertical; font: inherit; padding: .7rem; border: 2px solid #1d2925; border-radius: 2px; }
#guestbook-entries { display: grid; gap: .75rem; margin-top: 1rem; }
#guestbook-entries article { padding: .75rem; background: #e7d6b5; }
#guestbook-entries p { margin: .35rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.wall-page { background: #101417; color: #f8f7f2; overflow: hidden; }
.wall-page #wall { width: 100vw; height: 100vh; position: relative; }
.wall-stage { display: grid; grid-template-columns: minmax(7rem, 18vw) minmax(0, 1fr) minmax(7rem, 18vw); height: 100%; gap: clamp(.5rem, 2vw, 2rem); padding: clamp(.5rem, 2vw, 2rem); box-sizing: border-box; }
.stage-frame { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .75rem; }
.stage { min-width: 0; min-height: 0; display: grid; place-items: center; background: #050708; border: 1px solid #4c5557; overflow: hidden; }
.stage img, .stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.wall-status { margin: 0; min-height: 1.4em; text-align: center; color: #d6dfdc; font-size: clamp(.8rem, 1.3vw, 1.1rem); }
.rain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(3rem, 10vw); gap: clamp(.3rem, 1vw, .8rem); overflow: hidden; align-content: space-around; }
.rain-tile { min-width: 0; aspect-ratio: 1; background: #273033; border: 1px solid #687273; overflow: hidden; color: #cdd6d3; display: grid; place-items: center; font-size: .6rem; position: relative; }
.rain-tile img { width: 100%; height: 100%; object-fit: cover; }
.video-indicator { position: absolute; inset: auto .25rem .25rem auto; padding: .15rem .25rem; background: #101417dd; color: #fff; font-size: .55rem; font-weight: 700; }
.wall-qr { position: absolute; right: clamp(.6rem, 2vw, 2rem); bottom: clamp(.6rem, 2vw, 2rem); width: clamp(7rem, 14vw, 12rem); padding: .8rem; box-sizing: border-box; background: #fff; color: #101417; border: .5rem solid #fff; outline: 2px solid #101417; isolation: isolate; display: grid; gap: .3rem; z-index: 5; }
.qr-mark { display: block; width: 100%; aspect-ratio: 1; background: #fff; }
.qr-title, .qr-host, .qr-help { overflow-wrap: anywhere; line-height: 1.1; }.qr-title { font-size: .8rem; }.qr-host { font-size: .65rem; font-weight: 700; }.qr-help { font-size: .62rem; }
@media (max-width: 700px) {
  .wall-stage { grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem; gap: .35rem; padding: .35rem; }
  .rain { grid-template-columns: 1fr; grid-auto-rows: 3.2rem; gap: .3rem; }
  .wall-qr { width: 6.7rem; padding: .45rem; border-width: .3rem; right: .45rem; bottom: .45rem; }
  .qr-help { display: none; }
  .wall-status { font-size: .75rem; }
}