:root{color-scheme:light;font-family:system-ui,'Microsoft YaHei',sans-serif;color:#3c1747;background:#251032}*{box-sizing:border-box}body{margin:0}.book{max-width:590px;margin:auto;min-height:100svh;padding:clamp(24px,6vw,42px) clamp(16px,5vw,42px) 36px;background:#fff1da url('assets/concert-background.webp') center top/100% auto no-repeat}header{text-align:center;text-shadow:0 1px 8px #fff8ec}header p{margin:0;font-size:clamp(11px,3vw,14px);letter-spacing:.1em;font-weight:650}h1{font-family:'Songti SC',SimSun,serif;font-size:clamp(41px,11vw,64px);line-height:1.13;margin:11px 0 8px;letter-spacing:.07em}.date{font-size:13px;color:#754b27;letter-spacing:.12em}#pages{margin-top:23px;touch-action:pan-y}.page{border:1px solid #c19353aa;border-radius:16px;background:#fffaf0f5;box-shadow:0 12px 36px #38134728;padding:6px clamp(12px,4vw,25px)}ol{margin:0;padding:0;list-style:none}li{display:grid;grid-template-columns:29px minmax(0,1fr);gap:8px;padding:11px 0;border-bottom:1px solid #dbc7ae}li:last-child{border:0}.num{font:18px Georgia,serif;color:#855422;padding-top:1px}h2{font-size:clamp(16px,4.4vw,21px);line-height:1.36;margin:0 0 4px}li p,aside{font-size:clamp(12px,3.4vw,14px);line-height:1.55;margin:2px 0;color:#614752}aside{border-top:1px solid #dbc7ae;padding:9px 0}nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:15px 0 0}button{min-height:44px;padding:0 15px;border:1px solid #bd8b50;border-radius:30px;background:#3c1747;color:#fff8ea;font:inherit;font-size:14px;cursor:pointer}button:disabled{background:#fff6e9;color:#705d6a;cursor:default}button:focus-visible{outline:3px solid #b47b29;outline-offset:3px}#status,.hint{color:#4a2452;background:#fff8ebf0;padding:4px 11px;border-radius:18px;font-size:12px}.hint{width:max-content;margin:8px auto 0}

.concert-logo{display:block;width:114px;height:114px;object-fit:contain;margin:0 auto 5px;border-radius:50%}.concert-footer{margin:15px auto 0;padding:10px 8px;border-radius:12px;background:#fff8ebf0;color:#4a2452;font-size:clamp(10px,3.1vw,11px);line-height:1.65;text-align:center}.num{font-size:15px}

.concert-edition{font-size:clamp(17px,4.7vw,21px)}
.concert-title{font-size:clamp(23px,6.4vw,37px);letter-spacing:.02em}
.concert-title span{display:inline-block}

.book{position:relative;isolation:isolate;background-image:none}
.book::before{content:"";position:absolute;z-index:-1;inset:0;background:url("assets/concert-background.webp") center top/100% 100% no-repeat}


.concert-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Give program text more room on narrow screens. */
.page li {
  grid-template-columns: 17px minmax(0, 1fr);
  column-gap: 5px;
}
.page h2 {
  font-size: clamp(15px, 4vw, 20px);
}
.page li p {
  font-size: clamp(10.5px, 3vw, 13px);
}

/* Leave room for the venue details below the stage illustration. */
.book {
  display: flex;
  flex-direction: column;
  min-height: max(100svh, min(210vw, 1239px));
  padding-bottom: clamp(32px, 10vw, 62px);
}
.hint {
  margin-bottom: clamp(105px, 32vw, 235px);
}
.concert-footer {
  align-self: stretch;
  margin: auto 0 0;
}

.piece-info { background: none; border: 0; color: #642e70; font: inherit; padding: 0; min-height: 0; text-decoration: underline; text-underline-offset: 2px; }
.piece-dialog { box-sizing: border-box; width: min(360px, calc(100% - 32px)); padding: 22px; border: 1px solid #be945d; border-radius: 16px; color: #4a2452; background: #fff8eb; }
.piece-dialog::backdrop { background: #2d153a80; }
.piece-dialog p { font-size: 15px; line-height: 1.65; }
.piece-dialog form { text-align: right; }

#piece-description { white-space: pre-line; }

.concert-footer .choir-signup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #dbc7ae;
  text-align: left;
  text-decoration: none;
}
.choir-signup img { display: block; width: 120px; height: 120px; image-rendering: pixelated; }
.choir-signup strong { display: block; font-size: 15px; }
.choir-signup small { display: block; font-size: 11px; text-decoration: underline; }

.choir-shortcut {
  position: fixed;
  right: max(12px, calc((100vw - 590px) / 2 - 148px));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #bd8b50;
  border-radius: 24px;
  background: #3c1747;
  color: #fff8ea;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 0 3px 12px #38134735;
}
.choir-shortcut:focus-visible { outline: 3px solid #b47b29; outline-offset: 3px; }
@media (max-width: 890px) {
  .book { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

.concert-footer .choir-signup { width: 100%; border: 0; border-top: 1px solid #dbc7ae; border-radius: 0; background: transparent; color: inherit; }
#signup-dialog { box-sizing: border-box; width: min(540px, calc(100% - 20px)); height: min(740px, calc(100dvh - 24px)); padding: 0; border: 1px solid #bd8b50; border-radius: 16px; background: #fff8eb; color: #4a2452; }
#signup-dialog[open] { display: flex; flex-direction: column; }
#signup-dialog::backdrop { background: #2d153a80; }
.signup-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; }
.signup-heading form { margin: 0; }
#signup-dialog iframe { flex: 1; width: 100%; min-height: 0; border: 0; }