/* Visual decisions agreed on 20 October 2026. Loaded after the base theme. */
:root {
  --brand-yellow: #ffd46a;
  --brand-yellow-rgb: 255, 212, 106;
  --gold: var(--brand-yellow);
  --orange: #f58b1b;
}

/* Match the approved reference: white Neucha lettering at the lower left. */
#mss-app .slide-copy {
  inset: auto 0 0;
  min-height: 0;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  text-align: left;
  background: linear-gradient(0deg, rgba(10, 8, 6, .6), rgba(10, 8, 6, .2) 70%, transparent);
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: none;
}
#mss-app .slide-copy h2 {
  margin: 0;
  width: 100%;
  font-family: Neucha, 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: clamp(34px, 7.4cqw, 64px);
  line-height: 1.04;
  letter-spacing: .035em;
  text-align: left;
  text-transform: none;
  color: #fff9f1;
  -webkit-text-fill-color: #fff9f1;
  -webkit-text-stroke: .35px #fff9f1;
  opacity: 1;
  text-shadow: 0 2px 3px #000b, 0 0 8px rgba(255, 228, 172, .16);
}

/* One button treatment across the carousel, booking, and format pages. */
#mss-app .action:not(.action-disabled),
#mss-app .big-btn,
#mss-app .slide-cta {
  color: #fff;
  background: rgba(8, 7, 6, .72);
  border: 1px solid var(--gold);
  box-shadow: inset 0 1px 0 #ffffff12;
  text-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#mss-app .slide-cta {
  align-self: flex-start;
  margin: 0;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 9px;
  font: 700 14px/1 Arial, sans-serif;
  text-transform: none;
  color: #ffd46a;
}
#mss-app .action:not(.action-disabled):hover,
#mss-app .big-btn:hover,
#mss-app .hero-slide:hover .slide-cta {
  color: #fff;
  background: rgba(25, 21, 14, .9);
  border-color: #ffe2a3;
  box-shadow: inset 0 1px 0 #ffffff18;
}
#mss-app .hero-slide:hover .slide-cta { color: #ffd46a; }
#mss-app .action-disabled {
  color: #a99c90;
  background: #191512;
  border-color: #695a4d;
  box-shadow: none;
}

/* Restore the complete seven-day row and the aligned event-card layout. */
#mss-app .date-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  overflow: visible;
  padding: 3px 0 5px;
  scroll-snap-type: none;
}
#mss-app .calendar-day {
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 7px 2px;
  border-radius: 10px;
}
#mss-app .calendar-day small { font-size: 11px; letter-spacing: -.01em; }
#mss-app .calendar-day strong { font-size: 24px; }
#mss-app .event-tile-body { padding: 16px; gap: 11px; }
#mss-app .tile-date { flex-wrap: nowrap; }
#mss-app .tile-date time { min-width: 0; }
#mss-app .tile-date strong { margin-left: auto; white-space: nowrap; }
#mss-app .event-place > span { min-width: 0; }
#mss-app .venue-location span,
#mss-app .event-location span { display: block; }
#mss-app .venue-location span + span { margin-top: 3px; }
#mss-app .tile-booking { gap: 11px; padding-top: 6px; }
#mss-app .booking-block { display: grid; gap: 8px; width: 100%; }
#mss-app .booking-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#mss-app .booking-actions .action {
  width: 100%;
  min-width: 0;
  padding-inline: 9px;
  font-size: 13px;
  white-space: nowrap;
}
#mss-app .booking-choice-note {
  margin: 0;
  text-align: left;
  color: #cdb9a7;
  font-size: 13px;
  line-height: 1.5;
}
#mss-app .booking-block.detail-action { max-width: 520px; margin-bottom: 12px; }
#mss-app .event-facts .event-location { font-size: 16px; line-height: 1.45; }
#mss-app .event-facts .event-location span + span { margin-top: 4px; }

@media (max-width: 390px) {
  #mss-app .date-strip { gap: 3px; }
  #mss-app .calendar-day { min-height: 61px; padding-inline: 1px; border-radius: 9px; }
  #mss-app .calendar-day small { font-size: 10px; }
  #mss-app .calendar-day strong { font-size: 22px; }
  #mss-app .slide-copy { padding: 16px 16px 20px; }
  #mss-app .slide-copy h2 { font-size: 34px; }
  #mss-app .slide-cta { padding-inline: 19px; }
  #mss-app .booking-actions .action { font-size: 12px; gap: 5px; }
}
@media (min-width: 650px) {
  #mss-app .slide-copy { padding: 24px 32px 28px; }
  #mss-app .calendar-day { min-height: 70px; padding-inline: 6px; }
  #mss-app .calendar-day small { font-size: 12px; }
  #mss-app .calendar-day strong { font-size: 26px; }
  #mss-app .event-tile h3 { min-height: 2.5em; }
  #mss-app .event-place { min-height: 82px; }
  #mss-app .tile-booking { display: grid; grid-template-rows: auto minmax(96px, auto); }
  #mss-app .tile-booking > .action { align-self: start; }
  #mss-app .tile-booking .booking-block { align-self: start; }
}


/* Inter from Google Fonts. SIL Open Font License 1.1; assets/Inter-OFL.txt. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1.2.5: type, contrast, and navigation readability. */
#mss-app {
  --mss-font: Inter, Arial, sans-serif;
  --mss-body-size: 18px;
  --mss-h1-size: 32px;
  --mss-h2-size: 28px;
  font-family: var(--mss-font);
  font-size: var(--mss-body-size);
  line-height: 1.6;
  color: #fff9f1;
}
#mss-app button,
#mss-app input,
#mss-app select,
#mss-app textarea {
  font-family: var(--mss-font);
}
#mss-app p,
#mss-app li {
  font-size: var(--mss-body-size);
  line-height: 1.6;
}
#mss-app h1,
#mss-app h2,
#mss-app h3 {
  font-family: var(--mss-font);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: break-word;
}
#mss-app h1 {
  font-size: var(--mss-h1-size);
  line-height: 1.18;
}
#mss-app h2 {
  font-size: var(--mss-h2-size);
  line-height: 1.22;
}
#mss-app h3 {
  font-size: 22px;
  line-height: 1.3;
}
#mss-app .section-heading h2,
#mss-app .format-about h2,
#mss-app .atmosphere h2,
#mss-app .faq h2,
#mss-app .event-description h2,
#mss-app .contact-content h2,
#mss-app .format-index-item h2 {
  font-size: var(--mss-h2-size);
  line-height: 1.22;
}
#mss-app .story-banner .story-head,
#mss-app .community-panel h2 {
  max-width: 21ch;
  font-size: var(--mss-h1-size);
  line-height: 1.18;
}
#mss-app .format-summary,
#mss-app .large-copy {
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.6;
}
#mss-app .event-description p,
#mss-app .faq details p,
#mss-app .story-banner p,
#mss-app .venue-description {
  max-width: 65ch;
}
#mss-app .story-banner p:not(.sec-small) { margin-top: 16px; }
#mss-app .eyebrow,
#mss-app .sec-small,
#mss-app .footer-label {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
}
#mss-app .breadcrumbs {
  font-size: 14px;
  line-height: 1.5;
}
#mss-app .breadcrumbs a { min-height: 36px; }

/* A visible panel, rather than a gradient that depends on the video frame. */
#mss-app .slide-copy {
  inset: auto 12px 16px;
  width: auto;
  min-height: 0;
  padding: 16px;
  gap: 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#mss-app .slide-copy h2 {
  font-family: Neucha, 'Arial Narrow', sans-serif;
  font-size: clamp(32px, 7.4cqw, 56px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .015em;
  color: #fff9f1;
  -webkit-text-fill-color: #fff9f1;
  -webkit-text-stroke: .35px #fff9f1;
  text-shadow: 0 2px 3px #0008;
}
#mss-app .action,
#mss-app .big-btn,
#mss-app .slide-cta {
  min-height: 48px;
  padding: 12px 18px;
  font-family: var(--mss-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
}
#mss-app .slide-cta { color: #ffd46a; }
#mss-app .booking-actions .action {
  padding-inline: 8px;
  gap: 6px;
  font-size: 16px;
}
#mss-app .action .icon { margin: 0; font-size: 16px; }
#mss-app .action:focus-visible,
#mss-app a:focus-visible,
#mss-app button:focus-visible,
#mss-app select:focus-visible,
#mss-app input:focus-visible,
#mss-app summary:focus-visible {
  outline: 2px solid #ffd46a;
  outline-offset: 3px;
}

/* Dates and filters remain readable without reducing labels to fit. */
#mss-app .date-rail-bar { gap: 12px; }
#mss-app .calendar-month { font-size: 16px; line-height: 1.4; font-weight: 600; text-transform: none; }
#mss-app .calendar-day { min-height: 72px; padding: 8px 1px; }
#mss-app .calendar-day small { font-size: 14px; line-height: 1.4; letter-spacing: normal; }
#mss-app .calendar-day strong { font-size: 24px; line-height: 1.2; }
#mss-app .filter-fields label,
#mss-app .date-picker-label {
  font-size: 14px;
  line-height: 1.45;
}
#mss-app .filter-fields select,
#mss-app .date-picker-label input {
  min-height: 48px;
  height: 48px;
  font-size: 16px;
  font-weight: 400;
}
#mss-app .quick-filters { flex-wrap: wrap; overflow: visible; }
#mss-app .quick-filters button {
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
#mss-app .extra-filters summary,
#mss-app .extra-filters summary span,
#mss-app .calendar-count,
#mss-app .reset-link {
  font-size: 14px;
  line-height: 1.5;
}
#mss-app .calendar-meta { gap: 12px; flex-wrap: wrap; }

/* Event cards: titles, address, price, and booking use the same hierarchy. */
#mss-app .event-tile h3 { font-size: 22px; line-height: 1.3; }
#mss-app .format-tag,
#mss-app .age,
#mss-app .poster-badge {
  font-size: 14px;
  line-height: 1.4;
}
#mss-app .format-tag { white-space: normal; }
#mss-app .age { flex-shrink: 0; }
#mss-app .tile-date { font-size: 18px; line-height: 1.4; font-weight: 600; gap: 8px; }
#mss-app .tile-date strong { font-size: 22px; line-height: 1.3; }
#mss-app .event-place { font-size: 16px; line-height: 1.5; }
#mss-app .event-place small { font-size: 16px; line-height: 1.55; color: #d6c9bd; }
#mss-app .event-price { font-size: 20px; line-height: 1.4; font-weight: 700; }
#mss-app p.detail-price { font-size: 24px; line-height: 1.3; }
#mss-app .event-facts p,
#mss-app .event-facts strong,
#mss-app .event-facts .event-location {
  font-size: 18px;
  line-height: 1.5;
}
#mss-app .booking-choice-note,
#mss-app .schedule-note,
#mss-app .caption-note {
  font-size: 14px;
  line-height: 1.55;
}
#mss-app .event-tile-body { gap: 12px; }

/* Information pages, cards, and text on images. */
#mss-app .venue-copy h3,
#mss-app .resident-list .comedian-card h2,
#mss-app .work-steps h2,
#mss-app .holiday-card h3 { font-size: 22px; line-height: 1.3; }
#mss-app .venue-copy p { font-size: 16px; line-height: 1.5; }
#mss-app .venue-address { font-size: 16px !important; line-height: 1.55; }
#mss-app .comedian-card-copy > p { font-size: 16px !important; line-height: 1.6; }
#mss-app .format-facts > span,
#mss-app .media-label,
#mss-app .placeholder-tag,
#mss-app .comic-gallery figcaption,
#mss-app .holiday-card span,
#mss-app .work-steps > div > span,
#mss-app .comedian-placeholder small {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: normal;
}
#mss-app .faq summary { font-size: 18px; line-height: 1.45; font-weight: 700; }
#mss-app .faq details p { font-size: var(--mss-body-size); line-height: 1.6; }
#mss-app .format-details li { font-size: var(--mss-body-size); line-height: 1.6; }
#mss-app .video-placeholder h3 { font-size: 22px; line-height: 1.3; }
#mss-app .video-placeholder p { font-size: 16px; line-height: 1.6; }
#mss-app .story-facts { gap: 10px; }
#mss-app .story-facts strong { font-size: 16px; line-height: 1.4; }
#mss-app .story-facts small { font-size: 14px; line-height: 1.45; }
#mss-app .text-link,
#mss-app .resident-link,
#mss-app .sub-link {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  min-height: 44px;
}
#mss-app .community-panel p,
#mss-app .contact-content p:not(.eyebrow) {
  max-width: 58ch;
  font-size: var(--mss-body-size);
  line-height: 1.6;
}
#mss-app .community-panel .community-cat { opacity: .3; }
#mss-app .community-panel h2,
#mss-app .community-panel p { text-shadow: 0 2px 4px #000; }
#mss-app .community-actions { max-width: none; }
#mss-app .holiday-card > div { background: linear-gradient(0deg, #000e, #0009 75%, #0000); }
#mss-app .format-index-item p { margin-block: 16px; }
#mss-app .booking-dialog h2 { font-size: 26px; line-height: 1.25; }
#mss-app .booking-dialog-content { font-size: 16px; line-height: 1.6; }

/* Navigation and footer are useful text, rather than miniature captions. */
#mss-app .mobile-menu a { font-size: 18px; line-height: 1.45; min-height: 48px; }
#mss-app .desktop-nav { font-size: 18px; font-weight: 600; gap: 20px; }
#mss-app .bottomnav a { font-size: 15px; line-height: 1.25; font-weight: 500; }
#mss-app .footer-grid p:not(.footer-label) { font-size: 16px; line-height: 1.6; }
#mss-app .footer-grid a,
#mss-app .footer-service button { font-size: 17px; line-height: 1.55; min-height: 44px; }
#mss-app .footer-bottom { font-size: 14px; line-height: 1.5; color: #cdb9a7; }
#mss-app .preview-banner { font-size: 14px; line-height: 1.45; }

/* Clear header actions with enough room for the logo, including at 320px. */
#mss-app .header-inner { height: 76px; gap: 8px; }
#mss-app .brand { min-height: 48px; }
#mss-app .brand img { width: 112px; height: 56px; }
#mss-app .header-actions { gap: 8px; flex-shrink: 0; }
#mss-app .telegram-short {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: 48px;
  padding: 0 10px;
  gap: 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
#mss-app .telegram-short > span:not(.icon) { display: inline; }
#mss-app .telegram-short .icon { width: 18px; height: 18px; font-size: 18px; }
#mss-app .menu-toggle { width: 48px; height: 48px; }
#mss-app .menu-toggle .icon { font-size: 22px; color: #fff9f1; opacity: 1; margin: 0; }
#mss-app .mobile-menu { max-height: calc(100dvh - 108px); }
#mss-app .mobile-menu a { padding-block: 14px; font-weight: 500; }
#mss-app .desktop-nav a { display: inline-flex; align-items: center; min-height: 48px; }
#mss-app .bottomnav { height: calc(76px + env(safe-area-inset-bottom)); }
#mss-app .bottomnav a {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding-inline: 4px;
  gap: 6px;
  align-content: center;
}
#mss-app .bottomnav a span:first-child { font-size: 22px; }
#mss-app .date-rail-arrows button { width: 44px; height: 44px; }
#mss-app .reset-link { min-height: 44px; }
#mss-app .dialog-close { min-width: 44px; min-height: 44px; }

/* Footer links use a quiet readable color; yellow remains an accent. */
#mss-app .footer-grid { gap: 28px 24px; }
#mss-app .footer-label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: normal;
  color: #ffd46a;
  margin-bottom: 10px;
}
#mss-app .footer-grid a,
#mss-app .footer-service button {
  color: #f0e8df;
  font-weight: 400;
  padding-block: 10px;
}
#mss-app .footer-grid a:hover,
#mss-app .footer-service button:hover {
  color: #ffd46a;
  text-decoration: underline;
  text-underline-offset: 4px;
}
#mss-app .footer-grid p:not(.footer-label) { color: #d6c9bd; }
#mss-app .footer-grid .footer-brand { padding: 0; }
#mss-app .footer-brand img { width: 144px; height: auto; }
#mss-app .site-footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

/* Long copy needs a stable dark background and softer hierarchy. */
#mss-app .story-banner {
  background-image: linear-gradient(rgba(12, 9, 7, .88), rgba(12, 9, 7, .84)), url('assets/about-texture.webp');
}
#mss-app .story-banner p:not(.sec-small),
#mss-app .event-description p:not(.eyebrow),
#mss-app .contact-content p:not(.eyebrow),
#mss-app .format-summary,
#mss-app .large-copy { color: #e7ded5; }
#mss-app .event-facts .event-location { color: #d6c9bd; font-weight: 400; }
#mss-app .booking-choice-note,
#mss-app .schedule-note,
#mss-app .caption-note { color: #d6c9bd; }
#mss-app strong,
#mss-app b,
#mss-app .calendar-day strong { font-weight: 700; }

@media (max-width: 479px) {
  #mss-app .primary-filter-fields { grid-template-columns: minmax(0, 1fr); }
  #mss-app .date-picker-label { width: 100%; justify-content: space-between; }
  #mss-app .story-facts { grid-template-columns: minmax(0, 1fr); }
  #mss-app .story-facts div { padding: 12px; }
}
@media (min-width: 650px) {
  #mss-app { --mss-h1-size: 40px; --mss-h2-size: 32px; }
  #mss-app .slide-copy { inset: auto 24px 24px; padding: 24px; gap: 18px; }
  #mss-app .calendar-day strong { font-size: 28px; }
  #mss-app .event-tile h3 { min-height: 2.6em; }
  #mss-app .event-place { min-height: 92px; }
  #mss-app .community-panel .community-cat { opacity: .4; }
  #mss-app .hero-slide .slide-media video { object-position: center 25%; }
}
@media (min-width: 1000px) {
  #mss-app { --mss-body-size: 18px; --mss-h1-size: 48px; --mss-h2-size: 36px; }
  #mss-app .brand img { width: 128px; height: 60px; }
  #mss-app .site-footer { padding-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  #mss-app *, #mss-app *::before, #mss-app *::after { scroll-behavior: auto; }
}