/* Big headlines, human-sized fine print. Libre Franklin is self-hosted. */
:root {
  --body: 'Libre Franklin', 'Helvetica Neue', sans-serif;
}

body { font-size: 17px; line-height: 1.65; }
button, input { font-family: var(--body); }
.eyebrow, .section-label, .stat-label {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .65px;
}
.button, .text-link {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .3px;
}
.button { min-height: 58px; text-align: left; }
.button > span { flex-shrink: 0; }
.brand-lockup .wordmark > span, .wordmark span { font-size: 11px; }
.site-header nav { font-size: 13px; gap: 28px; letter-spacing: .4px; }
.header-cta { font-size: 13px; line-height: 1.3; letter-spacing: .3px; }

/* A loyalty test people can read without borrowing the referee's glasses. */
.gate-top > .eyebrow { font-size: 12px; letter-spacing: .7px; }
.gate-layout { max-width: 1370px; gap: 50px; }
.gate-copy { padding: 32px; }
.gate-kicker { font-size: 12px; letter-spacing: .7px; }
.gate-copy > p { font-size: 16px; line-height: 1.7; color: #525650; }
.fan-pledge { padding: 16px 14px; font-size: 17px; line-height: 1.4; align-items: flex-start; }
.fan-pledge small { font-size: 13px; line-height: 1.6; margin-top: 5px; }
.checkbox-art { flex-shrink: 0; margin-top: 1px; }
#enter-button { min-height: 62px; font-size: 14px; line-height: 1.5; letter-spacing: .15px; padding: 15px 18px; }
.rival-arena { height: 140px; }
.rival-button { max-width: 100%; min-height: 46px; padding: 12px 16px; font-size: 14px; line-height: 1.4; letter-spacing: 0; white-space: normal; }
.gate-copy .rival-status { font-size: 13px; line-height: 1.6; min-height: 42px; color: #555953; }
.gate-art-label { font-size: 12px; line-height: 1.5; letter-spacing: .7px; }
.gate-bottom { font-size: 12px; line-height: 1.5; letter-spacing: .5px; gap: 25px; }

/* Match details are useful information, including the small bits on the pass. */
.hero-topline { font-size: 13px; letter-spacing: .7px; line-height: 1.5; gap: 18px; }
.hero-eyebrow { flex-wrap: wrap; font-size: 12px; line-height: 1.5; letter-spacing: .6px; white-space: normal; }
.hero-pill { font-size: 12px; line-height: 1.4; letter-spacing: .5px; }
.hero-copy p { max-width: 430px; font-size: 17px; line-height: 1.75; }
.hero-copy .button { max-width: 100%; font-size: 14px; line-height: 1.5; padding: 17px 21px; letter-spacing: .15px; }
.hero-supporting, .hero-supporting b { font-size: 12px; line-height: 1.5; letter-spacing: .5px; }
.hero-supporting b { color: #aeb3b4; }
.hero-art { min-width: 0; }
.matchup-ticket { padding: 20px 23px 18px; max-width: 410px; }
.ticket-top { font-size: 11px; line-height: 1.5; letter-spacing: .4px; }
.ticket-teams small { font-size: 11px; line-height: 1.4; letter-spacing: .25px; }
.ticket-info { gap: 14px; }
.ticket-info > span { font-size: 11px; line-height: 1.5; letter-spacing: .25px; }
.ticket-info b { font-size: 23px; line-height: 1.1; }
.ticket-info > span:last-child b { font-size: 29px; line-height: 1; }
.ticket-bottom { gap: 12px; }
.ticket-bottom > span:last-child { font-size: 11px; line-height: 1.5; letter-spacing: .1px; }
.ticket-barcode { width: 85px; flex-shrink: 0; }
.stat-label { font-size: 12px; line-height: 1.5; letter-spacing: .65px; }
.score-strip strong { line-height: 1.1; }
.ticker { padding-block: 14px; font-size: 13px; line-height: 1.5; letter-spacing: .8px; }

.intro > .section-label, .attendance-label .section-label,
.section-heading .section-label, .suite-break .section-label,
.rules-heading .section-label, .final-call .eyebrow {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .65px;
}
.intro > .section-label { color: #53575a; }
.intro-content > p, .attendance-copy > p,
.attendance-copy .attendance-punchline, .section-heading > p,
.timeline-copy p, .suite-break p, .menu-card p,
.rules-heading > p, .rules-list p {
  font-size: 17px;
  line-height: 1.75;
}
.intro-content > p { color: #53575a; }
.intro-tags { gap: 10px 24px; }
.intro-tags span { font-size: 12px; line-height: 1.5; letter-spacing: .35px; }
.attendance-stamp small { font-size: 12px; line-height: 1.3; letter-spacing: .5px; }
.attendance-stats, .attendance-stats > span { font-size: 12px; line-height: 1.5; letter-spacing: .5px; }
.attendance-stats b { font-size: 24px; line-height: 1.1; }
.section-heading > p { max-width: 290px; color: #55595b; }
.section-heading .section-label { color: #585d60; }
.section-heading .section-label::before { flex-shrink: 0; }

/* No decorative step numbers: time, plan, heckling. */
.timeline-row { grid-template-columns: 145px minmax(0, 1fr) 190px; gap: 26px; }
.timeline-number { display: none; }
.timeline-copy { max-width: 600px; min-width: 0; }
.timeline-copy h3 { font-size: 29px; line-height: 1.08; }
.timeline-copy p { color: #555a5d; }
.time { font-size: 40px; line-height: 1; }
.time > span { font-size: 12px; line-height: 1.5; letter-spacing: .5px; color: #5b6164; }
.timeline-copy .location, .timeline-copy .text-link { font-size: 13px; line-height: 1.6; letter-spacing: .2px; }
.row-tag { max-width: 100%; font-size: 12px; line-height: 1.5; letter-spacing: .3px; white-space: normal; text-align: center; }
.postgame-time { font-size: 34px; }
.suite-photo::after { font-size: 12px; line-height: 1.5; letter-spacing: .65px; }
.suite-break p { max-width: 450px; color: #c6c9ca; }
.suite-break .text-link { font-size: 14px; line-height: 1.6; letter-spacing: .3px; }
.suite-break .section-label { color: #bcc2c5; }
.menu-card .eyebrow { font-size: 12px; line-height: 1.6; letter-spacing: .5px; color: #50565a; }
.menu-card p { color: #50565a; }
.menu-footnote { font-size: 12px; line-height: 1.7; letter-spacing: .3px; color: #464c50; }
.rules-heading .section-label { color: var(--cream); }
.rules-heading > p, .rules-list p { color: var(--cream); }
.rules-list article > span { display: none; }
.rules-list h3 { font-size: 30px; line-height: 1.1; }
.rules-stamp { position: static; margin-top: 30px; }
.final-call .eyebrow { color: #bcc2c5; }
.final-call .button { font-size: 14px; line-height: 1.5; }
.final-call p { font-size: 14px; line-height: 1.7; color: #bcc2c5; }
footer p { font-size: 12px; line-height: 1.8; color: #b3b9bd; }
footer button { font-size: 12px; line-height: 1.5; letter-spacing: .3px; }
.asset-credits { font-size: 12px; line-height: 1.8; padding-block: 20px; }

@media (max-width: 1100px) {
  .timeline-row { grid-template-columns: 135px minmax(0, 1fr); }
  .timeline-row .row-tag { display: none; }
  .site-header nav { gap: 18px; }
  .gate-layout { gap: 28px; padding-inline: 32px; }
  .gate-copy { padding: 26px; }
  .gate-copy h1 { font-size: 47px; }
  .hero-copy .button { padding-inline: 16px; gap: 16px; }
  .matchup-ticket { padding-inline: 17px; }
  .ticket-top { letter-spacing: 0; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .site-header { padding-inline: 20px; }
  .header-cta { font-size: 12px; padding: 11px 12px; gap: 8px; }
  .brand-lockup .wordmark > span { font-size: 11px; }
  .gate-top { gap: 20px; padding-inline: 20px; }
  .gate-top > .eyebrow { font-size: 11px; max-width: 130px; line-height: 1.5; letter-spacing: .2px; }
  .gate-layout { max-width: 500px; padding: 20px; gap: 18px; }
  .gate-art { height: 165px; margin-bottom: 0; }
  .gate-art-label { max-width: 165px; font-size: 11px; line-height: 1.5; letter-spacing: .35px; }
  .gate-art-caption { font-size: 19px; bottom: 12px; }
  .gate-copy { padding: 25px 21px 22px; }
  .gate-copy h1 { font-size: clamp(38px, 10.5vw, 49px); line-height: .98; }
  .gate-kicker { font-size: 12px; margin-bottom: 17px; }
  .gate-copy > p { font-size: 16px; line-height: 1.65; }
  .fan-pledge { margin-top: 22px; padding: 14px 12px; gap: 12px; font-size: 16px; line-height: 1.5; }
  .fan-pledge small { font-size: 13px; line-height: 1.6; }
  .checkbox-art, .fan-pledge input { width: 24px; height: 24px; }
  #enter-button { font-size: 14px; padding: 16px 14px; min-height: 68px; gap: 12px; }
  .rival-arena { height: 155px; }
  .rival-button { font-size: 13px; min-height: 46px; padding: 11px 12px; }
  .gate-copy .rival-status { font-size: 12px; min-height: 42px; line-height: 1.7; }
  .gate-bottom { font-size: 11px; line-height: 1.6; letter-spacing: .2px; padding: 18px 20px; gap: 20px; }
  .gate-bottom > span { max-width: 47%; }
  .hero-topline { flex-wrap: wrap; align-items: start; font-size: 12px; line-height: 1.5; letter-spacing: .3px; gap: 5px 18px; }
  .hero-topline > span { max-width: 100%; }
  .hero-eyebrow { font-size: 12px; gap: 10px; margin-bottom: 27px; }
  .hero-pill { font-size: 12px; padding: 7px 10px; }
  .hero-copy p { max-width: 100%; font-size: 16px; line-height: 1.8; }
  .hero-copy .button { font-size: 13px; line-height: 1.6; padding: 16px 18px; min-height: 65px; gap: 15px; }
  .hero-supporting, .hero-supporting b { font-size: 12px; line-height: 1.5; letter-spacing: .2px; }
  .hero-art { height: 565px; max-width: 380px; margin-top: 35px; }
  .hero-rally { top: 31%; }
  .matchup-ticket { padding: 17px 18px; width: 93%; max-width: 350px; left: 3.5%; }
  .ticket-top { font-size: 11px; line-height: 1.5; letter-spacing: .1px; padding-bottom: 12px; }
  .ticket-teams { grid-template-columns: 1fr 30px 1fr; }
  .ticket-teams small { font-size: 11px; line-height: 1.4; letter-spacing: 0; }
  .ticket-teams b { font-size: 34px; }
  .ticket-info > span { font-size: 11px; line-height: 1.5; letter-spacing: .1px; }
  .ticket-info b { font-size: 22px; line-height: 1.15; }
  .ticket-info > span:last-child b { font-size: 29px; }
  .ticket-bottom > span:last-child { font-size: 11px; line-height: 1.5; letter-spacing: 0; }
  .ticket-barcode { width: 65px; }
  .stat-label { font-size: 12px; letter-spacing: .3px; }
  .score-strip strong { font-size: 28px; }
  .score-strip > div:last-child strong { font-size: 25px; }
  .ticker { font-size: 12px; letter-spacing: .6px; }
  .intro > .section-label, .attendance-label .section-label,
  .section-heading .section-label, .suite-break .section-label,
  .rules-heading .section-label, .final-call .eyebrow { font-size: 12px; line-height: 1.7; letter-spacing: .5px; }
  .intro-content > p, .attendance-copy > p, .attendance-copy .attendance-punchline,
  .section-heading > p, .timeline-copy p, .suite-break p,
  .menu-card p, .rules-heading > p, .rules-list p { font-size: 16px; line-height: 1.8; }
  .intro-tags { gap: 8px 20px; }
  .intro-tags span { font-size: 12px; line-height: 1.5; }
  .attendance-label .section-label { max-width: 160px; }
  .attendance-stamp { flex-shrink: 0; font-size: 39px; padding-inline: 12px; }
  .attendance-stamp small { font-size: 11px; line-height: 1.4; letter-spacing: .1px; }
  .attendance-stats > span { padding: 16px 13px; font-size: 12px; letter-spacing: .25px; }
  .attendance-stats b { font-size: 22px; line-height: 1.15; }
  .section-heading > p { max-width: 100%; }
  .timeline-row { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding-block: 27px; }
  .time { font-size: 32px; letter-spacing: -.5px; }
  .time > span { font-size: 12px; line-height: 1.5; letter-spacing: .3px; }
  .timeline-copy h3 { font-size: 26px; line-height: 1.1; }
  .timeline-copy .location, .timeline-copy .text-link { font-size: 12px; line-height: 1.7; letter-spacing: .1px; }
  .postgame-time { font-size: 29px; }
  .suite-photo::after { left: 23px; font-size: 12px; letter-spacing: .5px; }
  .suite-break .text-link { font-size: 13px; line-height: 1.7; letter-spacing: .15px; }
  .menu-card { padding: 29px 24px; }
  .menu-card::before { top: 78px; width: 110px; height: 110px; opacity: .7; }
  .menu-card .eyebrow { font-size: 12px; line-height: 1.6; letter-spacing: .35px; margin-bottom: 30px; }
  .menu-card h3 { min-height: 110px; max-width: 80%; }
  .menu-footnote { font-size: 12px; line-height: 1.75; letter-spacing: .15px; }
  .rules-stamp { margin-top: 25px; font-size: 25px; padding: 14px 18px; }
  .rules-list h3 { font-size: 28px; line-height: 1.1; }
  .final-call .button { font-size: 14px; line-height: 1.6; min-height: 68px; }
  .final-call p { font-size: 13px; line-height: 1.8; }
  footer p { font-size: 12px; line-height: 1.8; }
  footer button { font-size: 12px; line-height: 1.6; }
  .asset-credits { font-size: 12px; line-height: 1.8; padding: 20px 23px; }
}

@media (max-width: 360px) {
  .gate-top { gap: 12px; padding-inline: 16px; }
  .gate-top > .eyebrow { max-width: 105px; font-size: 11px; }
  .gate-top .brand-lockup .wordmark { font-size: 25px; }
  .gate-top .brand-lockup > img { width: 29px; height: 29px; }
  .gate-layout { padding: 16px; }
  .gate-copy { padding-inline: 18px; }
  .gate-art-label { max-width: 140px; }
  .gate-art-caption { right: 10px; font-size: 17px; }
  #enter-button { font-size: 13px; padding-inline: 12px; }
  .rival-button { font-size: 12px; padding-inline: 10px; }
  .header-cta { padding-inline: 10px; font-size: 11px; }
  .site-header { padding-inline: 18px; }
  .hero-art { height: 550px; }
  .matchup-ticket { padding-inline: 14px; }
  .ticket-teams small { font-size: 11px; }
  .ticket-info { gap: 9px; }
  .ticket-info b { font-size: 20px; }
  .ticket-bottom { gap: 8px; }
  .ticket-barcode { width: 43px; }
  .score-strip > div, .score-strip > div:first-child { padding-inline: 12px !important; }
  .score-strip > div:nth-child(even) { padding-left: 12px !important; }
  .score-strip strong { font-size: 26px; }
  .score-strip > div:last-child strong { font-size: 23px; }
  .attendance-label { gap: 12px; }
  .attendance-label .section-label { max-width: 135px; }
  .attendance-stamp { font-size: 34px; padding-inline: 10px; }
  .attendance-stats > span { padding-inline: 10px; }
  .attendance-stats b { font-size: 21px; }
  .timeline-row { grid-template-columns: 77px minmax(0, 1fr); gap: 13px; }
  .time { font-size: 29px; }
  .postgame-time { font-size: 25px; }
  .timeline-copy h3 { font-size: 25px; }
  .menu-card { padding-inline: 20px; }
  .menu-card::before { right: 4px; width: 100px; height: 100px; }
  .menu-card h3 { max-width: 82%; }
  .final-call h2 { font-size: 60px; }
}