/* Live intermission: countdown + next-up title, description and picture.
   Landscape 1920×1080 and portrait 1080×1920. Layout comes from ?layout=. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow: hidden; background: transparent; }
/* ?checker=1 only: a checkerboard so transparency is visible. Off by default. */
html.preview body { background: #2a2a2a repeating-conic-gradient(#3a3a3a 0 25%, transparent 0 50%) 0 0 / 40px 40px; }
:root { --ink: #1f1f1f; --pink: #e5177f; --card: #fff; }

.stage { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0;
  font-family: Barlow, sans-serif; color: var(--ink); text-transform: uppercase; }
.landscape .stage { width: 1920px; height: 1080px; }
.portrait  .stage { width: 1080px; height: 1920px; }
.stage > * { position: absolute; }
.stage:not(.ready) { visibility: hidden; }

.logo img { width: 100%; display: block; }
.card { background: var(--card); border-radius: 44px; }
.line { white-space: nowrap; line-height: 1; }

.pic { background: var(--card); border: 8px solid var(--card); border-radius: 48px; overflow: hidden; }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No picture: transparent frame, the wall's backdrop shows through. */
.pic.no-picture { background: transparent; }
.pic.no-picture { display: flex; align-items: center; justify-content: center; }
.pic.no-picture img { object-fit: contain; width: 50%; height: 70%; }
.nopic .logo { display: none; }

.countdown { text-align: center; }
.cd-label { font-weight: 800; }
.cd-digits { font-weight: 900; font-variant-numeric: tabular-nums; }
.cd-digits .unit { font-size: .36em; font-weight: 800; text-transform: uppercase; margin: 0 .5em 0 .14em; letter-spacing: .02em; }
.cd-digits .unit:last-child { margin-right: 0; }
.kicker { font-weight: 800; color: var(--pink); letter-spacing: .04em; }
.title { font-weight: 900; line-height: 1.02; }
.desc { font-weight: 600; line-height: 1.12; }
.title, .desc { text-wrap: balance; }
.info { padding: 0 48px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }

/* --- landscape ---------------------------------------------------------- */
.landscape .pic       { left: 60px;   top: 60px;  width: 1216px; height: 640px; }
.landscape .logo      { left: 1360px; top: 60px;  width: 400px; }
.landscape .countdown { left: 1316px; top: 320px; width: 544px; height: 380px; padding-top: 62px; }
.landscape .cd-label  { font-size: 40px; }
.landscape .cd-digits { font-size: 150px; margin-top: 26px; }
.landscape .info      { left: 60px;   top: 730px; width: 1800px; height: 290px; }
.landscape .kicker    { font-size: 38px; }
.landscape .title     { font-size: 116px; }
.landscape .desc      { font-size: 52px; }

/* --- portrait ----------------------------------------------------------- */
.portrait .countdown  { left: 60px;  top: 60px;  width: 960px; height: 570px; padding-top: 88px; }
.portrait .cd-label   { font-size: 99px; }
.portrait .cd-digits  { font-size: 300px; margin-top: 34px; }
.portrait .logo       { left: 340px; top: 664px; width: 400px; }
.portrait .pic        { left: 60px;  top: 930px; width: 960px; height: 520px; }
.portrait .info       { left: 60px;  top: 1480px; width: 960px; height: 380px; text-align: center; align-items: center; padding: 0 44px; }
.portrait .kicker     { font-size: 40px; }
.portrait .title      { font-size: 84px; }
.portrait .desc       { font-size: 46px; }

/* Content swap. */
.swap { transition: opacity .35s ease; }
.swap.out { opacity: 0; }

/* Without a picture the logo lives inside the picture frame, so its slot is given back. */
.landscape.nopic .countdown { top: 60px; height: 640px; padding-top: 170px; }
.landscape.nopic .cd-digits { font-size: 170px; }
.portrait.nopic .pic { top: 664px; height: 786px; }