/* Text hierarchy: countdown, event times, locations, controls, supporting text. */
body{font-size:16px}
.brand{font-size:26px}
.game{font-size:12px}
.timezone{font-size:14px}
.timezone small{font-size:12px}
.intro{flex-wrap:wrap;gap:16px}
.intro h1{font-size:34px;line-height:1.5}
.clock{font-size:14px}
.clock strong{font-size:34px;font-weight:600}
.eyebrow,.section-title .eyebrow{font-size:12px}
.hero-content{padding:32px 36px;min-width:0}
.hero h2{font-size:16px}
.next-location{font-size:44px;line-height:1.45;margin:10px 0 18px}
.hero.inactive .next-location{font-size:34px}
.next-meta{flex-wrap:wrap;gap:12px}
.next-meta strong{font-size:28px;font-weight:600;line-height:1.45}
.time-icon{font-size:28px}
.hero-tag{font-size:13px;padding:3px 9px}
.hero-bottom{font-size:16px;flex-wrap:wrap;gap:16px;margin-top:24px}
.hero-bottom strong{font-size:64px;font-weight:600}
.unit{font-size:13px}
.next-strip{flex-wrap:wrap;padding:18px 24px;gap:12px 24px}
.next-strip>span:first-child{font-size:14px}
.next-strip strong{font-size:20px}
.next-strip>span:last-child{font-size:26px;font-weight:600;color:var(--accent)}
.upcoming-heading h2{font-size:18px}
.upcoming-heading>span{font-size:13px}
.upcoming-card{padding:20px;gap:14px;min-width:0}
.upcoming-card>div{min-width:0}
.card-time{font-size:30px;font-weight:600;line-height:1.35}
.card-time small{font-size:13px;font-weight:400}
.card-location{font-size:16px;line-height:1.6}
.card-number{font-size:13px}
.section-title h2{font-size:26px}
.today-button{font-size:14px;padding:9px 15px}
.toolbar{flex-wrap:wrap;gap:16px}
.arrow{width:40px;height:42px;font-size:28px}
input[type=date]{font-size:17px;width:190px;padding:7px 12px}
.filters{flex-wrap:wrap;gap:14px 22px}
select{font-size:15px;padding:9px 28px 9px 12px;max-width:260px}
.toggle{font-size:14px;gap:10px}
.switch{width:34px;height:20px}
.switch:after{width:14px;height:14px}
.toggle input{width:34px;height:20px}
.toggle input:checked+.switch:after{transform:translateX(14px)}
th{font-size:14px;padding:15px 22px}
th small{font-size:11px}
td{font-size:17px;padding:16px 22px}
td:first-child{font-size:30px;font-weight:600}
.badge{font-size:13px;padding:4px 9px}
tr.past{opacity:.7}
.empty{font-size:17px}
.empty small{font-size:14px}
.table-footer{font-size:12px;gap:10px;flex-wrap:wrap}
.cycle-note{font-size:13px}
.rotation-item{padding:18px 8px}
.rotation-number{font-size:12px}
.rotation-name{font-size:14px;min-height:45px}
.rotation-time{font-size:14px;font-weight:500;line-height:1.6}
.info{padding:20px 22px}
.info h3{font-size:15px}
.info p{font-size:13px;line-height:1.9}
.info-icon{width:20px;height:20px;line-height:18px;font-size:14px}
footer{font-size:12px;flex-wrap:wrap;line-height:1.9}
footer a{font-size:15px}
footer small{font-size:12px}
@media(max-width:850px){
  .brand{font-size:24px}
  .intro h1{font-size:30px}
  .hero-content{padding:28px}
  .next-location{font-size:38px}
  .next-meta strong{font-size:24px}
  .upcoming-card{padding:16px 12px;align-items:flex-start}
  .card-time{font-size:27px}
  .card-location{font-size:15px}
  td{padding:15px 16px}
  th{padding:14px 16px}
}
@media(max-width:600px){
  .brand{font-size:20px}
  .timezone{font-size:12px}
  .intro{gap:8px;align-items:center}
  .intro>div:first-child{width:100%}
  .intro h1{font-size:26px;margin:0;letter-spacing:0}
  .intro h1{text-wrap:balance}
  .clock{display:flex;align-items:center;gap:12px;text-align:left;font-size:13px}
  .clock strong{font-size:25px}
  .hero-content{padding:24px 20px;width:100%}
  .hero-art{display:none}
  .hero h2{font-size:15px}
  .next-location{font-size:34px;overflow-wrap:anywhere}
  .hero.inactive .next-location{font-size:28px}
  .next-meta{gap:8px}
  .next-meta strong{font-size:22px;letter-spacing:0}
  .hero-tag{font-size:12px}
  .hero-bottom{font-size:14px;gap:12px}
  .hero-bottom strong{font-size:56px}
  .unit{font-size:12px}
  .next-strip{padding:16px;gap:6px 12px}
  .next-strip strong{font-size:18px;overflow-wrap:anywhere}
  .next-strip>span:last-child{font-size:24px;margin-left:0;flex-basis:100%}
  .upcoming-heading h2{font-size:17px}
  .upcoming-heading>span{font-size:12px}
  .upcoming-card{align-items:center;padding:14px}
  .upcoming-card>div:nth-child(2){display:block}
  .card-time{font-size:28px}
  .card-time small{font-size:12px;margin-left:8px}
  .card-location{font-size:15px;margin-top:3px}
  .section-title{gap:12px;flex-wrap:wrap}
  .section-title h2{font-size:24px}
  .today-button{font-size:13px;padding:8px 12px}
  .filters{align-items:center;justify-content:flex-start;gap:12px}
  select{font-size:14px;max-width:100%}
  .toggle{font-size:13px}
  table{table-layout:fixed}
  th{font-size:12px;padding:12px 8px}
  th small{font-size:10px}
  th:first-child{width:26%}
  th:nth-child(2){width:50%}
  th:last-child{width:24%}
  td{font-size:14px;padding:14px 8px}
  td:first-child{font-size:24px;letter-spacing:0}
  .row-place{gap:0}
  .row-place .location-icon{display:none}
  .row-place>span:last-child{min-width:0;overflow-wrap:anywhere}
  .badge{font-size:11px;padding:3px 5px}
  .table-footer{font-size:12px;line-height:1.8}
  .cycle-note{font-size:12px}
  .rotation-item{padding:15px 10px;gap:8px}
  .rotation-item>div{min-width:0}
  .rotation-name{font-size:14px;min-height:0;overflow-wrap:anywhere}
  .rotation-time{font-size:13px}
  .rotation-number{font-size:11px}
  .info{padding:16px;gap:10px}
  .info h3{font-size:15px}
  .info p{font-size:13px}
  footer{font-size:12px}
}
@media(max-width:360px){td:first-child{font-size:22px}.hero-bottom strong{font-size:50px}}

header .clock{display:block;text-align:right;padding:0;font-size:13px}header .clock strong{font-size:30px;line-height:1.25}header .header-right{gap:18px}@media(max-width:600px){header{height:auto;min-height:90px;padding-top:14px;padding-bottom:14px;gap:12px;flex-wrap:wrap}header .header-right{margin-left:auto;gap:10px}header .clock{font-size:12px}header .clock strong{font-size:25px}}

.brand{font-weight:400;font-size:25px;letter-spacing:.5px}.brand-title{white-space:nowrap}.brand-title strong{font-weight:700}.brand-text small{display:block;margin-top:5px;font-size:12px;font-weight:400;letter-spacing:1px;color:var(--muted)}@media(max-width:600px){.brand{font-size:21px}.brand-text small{font-size:11px;letter-spacing:.5px}}@media(max-width:360px){.brand{font-size:19px}}
