/* Tone Apart 2.1 — typography only.
   Keep the Design 02 art direction, title, imagery and player behavior.
   Load after styles.css so its old 6–11px label rules cannot win on mobile. */
:root {
  --ui-label: 14px;
  --ui-action: 16px;
  --muted: #c7c2b9;
}
.eyebrow { font-size: var(--ui-label); line-height: 1.6; letter-spacing: .07em; }
.text-link { font-size: var(--ui-action); line-height: 1.5; }
.header-origin { font-size: 13px; line-height: 1.55; letter-spacing: .045em; color: var(--ink); }
#main-nav { font-size: 17px; font-weight: 600; gap: 28px; letter-spacing: .015em; }
#main-nav a { min-height: 48px; }
.nav-book { margin-left: 12px; }
.nav-book svg { width: 19px; height: 19px; }
.hero-topline .eyebrow { font-size: 16px; font-weight: 600; letter-spacing: .09em; }
.hero-topline, .hero-intro, .hero-watch, .hero-bottom, .header-origin, #main-nav {
  text-shadow: 0 2px 9px #000b;
}
.hero-intro .eyebrow { font-size: 14px; color: var(--ink); line-height: 1.65; letter-spacing: .05em; }
.watch-note { font-size: 14px; letter-spacing: .04em; line-height: 1.5; color: var(--ink); }
.hero-bottom { font-size: 16px; letter-spacing: .045em; }
.scroll-cue { font-size: 16px; min-height: 44px; }
.scroll-cue span { font-size: 28px; }
.film-controls #film-status { font-size: 14px; line-height: 1.5; color: var(--ink); }
.motion-toggle { font-size: 15px; line-height: 1.5; min-height: 44px; }
.hero { padding-bottom: 66px; }
.hero-foot { padding-bottom: 42px; }
.section-number { font-size: 14px; }
.show-heading .text-link { font-size: 14px; }
.show-switch { gap: 24px; flex-wrap: wrap; }
.show-switch button { font-size: 16px; line-height: 1.5; min-height: 48px; }
.show-switch span:not(.table-note) { font-size: 14px; }
.table-note { font-size: 12px; line-height: 1.5; }
.show-row { grid-template-columns: 108px minmax(0,1fr) 156px 44px; gap: 18px; }
.month-year { font-size: 13px; line-height: 1.6; }
.show-title h3 { font-size: 26px; }
.show-tag { font-size: 12px; }
.show-kind { font-size: 13px; line-height: 1.5; }
.show-location { font-size: 19px; }
.show-time { font-size: 13px; line-height: 1.5; }
.show-details { min-width: 44px; }
.archive-note { font-size: 14px; line-height: 1.7; }
.watch-heading .text-link { font-size: 15px; }
.thumbnail-label { font-size: 13px; line-height: 1.4; }
.video-caption { gap: 20px; }
.video-caption h3 { line-height: 1.15; }
.video-caption p, .source-note, .video-pick p { font-size: 14px; line-height: 1.65; }
.picks-header { flex-wrap: wrap; gap: 8px 14px; }
.picks-header h3 { font-size: 16px; }
.picks-header span { font-size: 13px; }
.video-pick { grid-template-columns: 40% minmax(0,1fr); gap: 9px 16px; }
.photos-heading .text-link { font-size: 15px; }
.gallery-note { font-size: 13px; line-height: 1.65; letter-spacing: .025em; }
.image-caption { font-size: 13px; line-height: 1.6; letter-spacing: .025em; }
.about-copy>p:not(.eyebrow) { color: var(--muted); }
.members span { font-size: 14px; line-height: 1.6; }
.band-story summary { font-size: 15px; line-height: 1.5; }
.booking-section .section-number { font-size: 14px; }
.booking-email { font-size: 18px; overflow-wrap: anywhere; }
.site-footer { font-size: 13px; flex-wrap: wrap; gap: 16px 28px; }
.footer-socials { font-size: 14px; }
.footer-link, .site-footer>p { font-size: 13px; }
.footer-socials a, .footer-link { min-height: 44px; }
.button { font-size: 15px; }
.dialog-bottom-links { font-size: 13px; flex-wrap: wrap; }
.lightbox-controls { font-size: 15px; }
.show-date-banner { font-size: 14px; }
.all-photo-grid button { font-size: 14px; }
#toast { font-size: 14px; }
#preview-note { font-size: 12px; min-height: 54px; gap: 15px; }
#try-clip-button { font-size: 14px; min-height: 38px; }
#clip-tools { bottom: 68px; width: min(460px,calc(100% - 30px)); }
#clip-tools>p { font-size: 14px; line-height: 1.7; }
.clip-file-label { font-size: 15px; min-height: 48px; align-items: center; }
#clip-tools #clip-name { font-size: 14px; }
.clip-sliders label { font-size: 14px; line-height: 1.5; }
.clip-sliders input { flex-shrink: 0; }
#clear-clip { font-size: 14px; }
#clip-tools .clip-hint { font-size: 13px; }

@media (max-width: 1180px) {
  .header-origin { display: none; }
  #main-nav { gap: 22px; }
  .show-row { grid-template-columns: 94px minmax(0,1fr) 126px 44px; gap: 14px; }
  .show-title h3 { font-size: 24px; }
  .video-pick { grid-template-columns: 1fr; }
  .video-pick>.video-thumbnail { grid-row: auto; }
}
@media (max-width: 850px) {
  #main-nav { font-size: 15px; gap: 18px; }
  .hero-topline .eyebrow { font-size: 14px; }
  .hero-intro .eyebrow { font-size: 14px; max-width: 360px; }
  .hero-watch { column-gap: 16px; }
  .watch-note { font-size: 13px; max-width: 145px; }
  .hero-foot { gap: 24px; }
  .show-row { grid-template-columns: 100px minmax(0,1fr) 148px 44px; gap: 17px; }
  .table-note { display: none; }
  .video-picks { gap: 25px; }
  .video-pick { display: grid; grid-template-columns: 1fr; }
  .picks-header span { font-size: 13px; }
  .members span { font-size: 14px; }
  .gallery-note { flex-wrap: wrap; }
  .gallery-note span { display: none; }
}
@media (max-width: 600px) {
  .site-header { gap: 14px; }
  .header-origin { display: block; font-size: 11px; letter-spacing: 0; line-height: 1.55; }
  #main-nav { font-size: 18px; line-height: 1.5; }
  #main-nav a { min-height: 48px; }
  .hero { min-height: 900px; max-height: none; padding-bottom: 79px; }
  .hero-topline .eyebrow { font-size: 14px; letter-spacing: .025em; }
  .hero-intro>p:first-of-type { font-size: 22px; }
  .hero-intro .eyebrow { font-size: 13px; max-width: 220px; line-height: 1.6; letter-spacing: .02em; margin-top: 16px; }
  .hero-foot { gap: 18px; padding-top: 100px; padding-bottom: 25px; }
  .hero-watch { font-size: 21px; }
  .hero-bottom { font-size: 14px; gap: 10px 16px; flex-wrap: wrap; }
  .scroll-cue { font-size: 15px; gap: 14px; }
  .film-controls { gap: 2px; margin-left: auto; }
  .film-controls #film-status { font-size: 12px; letter-spacing: 0; }
  .motion-toggle { font-size: 14px; min-height: 44px; }
  .section-number, .photos-heading .section-number { font-size: 13px; }
  .show-heading .text-link { font-size: 13px; float: none; max-width: none; margin-top: 16px; }
  .show-heading .section-aside { display: block; }
  .show-switch { gap: 22px; }
  .show-switch button { font-size: 15px; }
  .show-switch span:not(.table-note) { font-size: 13px; }
  .show-row { grid-template-columns: 87px minmax(0,1fr) 44px; gap: 9px 10px; }
  .show-date { gap: 8px; }
  .day { font-size: 40px; }
  .month-year { font-size: 12px; }
  .show-title h3 { font-size: 24px; }
  .show-tag { font-size: 11px; }
  .show-location { font-size: 18px; gap: 7px; line-height: 1.3; }
  .show-time { font-size: 12px; line-height: 1.5; }
  .show-details { min-width: 44px; }
  .archive-note { font-size: 13px; }
  .watch-heading>.text-link { font-size: 14px; min-height: 44px; }
  .thumbnail-label { font-size: 12px; }
  .video-caption p, .source-note, .video-pick p { font-size: 13px; }
  .picks-header h3 { font-size: 15px; }
  .picks-header span { font-size: 12px; }
  .video-picks { gap: 18px; }
  .video-pick h4 { font-size: 24px; }
  .photos-heading { flex-wrap: wrap; gap: 10px 15px; }
  .photos-heading .text-link { font-size: 14px; min-height: 44px; }
  .gallery-note { font-size: 12px; }
  .image-caption { font-size: 12px; }
  .members span { font-size: 13px; }
  .members { gap: 22px 20px; }
  .band-story summary { font-size: 14px; }
  .booking-section .section-number { font-size: 13px; }
  .booking-email { font-size: 16px; }
  .site-footer { gap: 12px 20px; padding-bottom: 100px; }
  .footer-socials { margin-left: 0; font-size: 13px; flex-wrap: wrap; gap: 20px; }
  .site-footer>p, .footer-link { font-size: 12px; }
  .dialog-bottom-links { font-size: 12px; }
  .dialog-bottom-links p { max-width: none; }
  .all-photo-grid button { font-size: 13px; }
  .button { font-size: 14px; }
  #preview-note { font-size: 10px; padding: 8px 13px; min-height: 64px; line-height: 1.6; gap: 12px; }
  #preview-note>span { max-width: 47%; }
  #try-clip-button { font-size: 12px; line-height: 1.6; max-width: 49%; min-height: 44px; text-align: right; }
  #clip-tools { bottom: 77px; }
  .clip-sliders label { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .header-origin { display: none; }
  .hero-intro>p:first-of-type { font-size: 21px; }
  .hero { min-height: 950px; }
  .hero-topline .eyebrow { font-size: 13px; }
  .show-row { grid-template-columns: 81px minmax(0,1fr) 44px; gap: 8px; }
  .show-title h3 { font-size: 23px; }
  .day { font-size: 36px; }
}

/* Grow the hero rather than letting enlarged labels escape a fixed height. */
.hero { height: auto; min-height: max(850px,100svh); max-height: none; }
.hero-topline, .title-wrap, .hero-foot, .hero-bottom { flex-shrink: 0; }
@media (max-width: 600px) {
  .hero { min-height: max(900px,100svh); }
  .hero-watch { width: 88px; min-width: 88px; grid-template-columns: 1fr; flex-shrink: 0; }
  .hero-intro { min-width: 0; flex: 1; }
}
@media (max-width: 360px) { .hero { min-height: max(950px,100svh); } }