:root {
  --font-body: "Manrope";
  --font-display: "Barlow Condensed";
  --chart-gold: #f1c86b;
  --chart-gold-dark: #9d6e16;
}

.charts-page { background: #f7f3ee; }
.charts-page [hidden] { display: none !important; }
.charts-page .site-header { position: sticky; }
.charts-page .header-inner { gap: 25px; }
.charts-page .desktop-nav { gap: 23px; }
.charts-page .utility-bar { display: block; background: #090909; border-bottom: 1px solid rgba(255,255,255,.08); }
.charts-page .utility-inner { min-height: 30px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a8a19b; }
.charts-page .utility-inner > div { display: flex; gap: 18px; }
.charts-page .utility-inner a:hover { color: var(--pink); }
.charts-page .utility-tv { color: #ddd6d0; }
.charts-page .utility-tv span { color: var(--pink); }

.charts-hero { position: relative; overflow: hidden; background: #111; color: #fff; }
.charts-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 42%, rgba(255,102,128,.34), transparent 28%), linear-gradient(120deg, transparent 55%, rgba(255,255,255,.035)); }
.charts-hero::after { content: "♪"; position: absolute; right: -60px; top: -190px; color: rgba(255,255,255,.035); font-family: var(--font-display); font-size: 36rem; line-height: 1; transform: rotate(-7deg); }
.charts-hero-inner { position: relative; z-index: 1; min-height: 600px; padding-block: 78px 84px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 80px; align-items: center; }
.charts-hero-copy { max-width: 760px; }
.charts-hero h1 { margin: 12px 0 24px; max-width: 800px; font-family: var(--font-display); font-size: clamp(4.4rem, 9vw, 9rem); line-height: .78; letter-spacing: -.035em; text-transform: uppercase; }
.charts-hero h1 em { display: block; color: var(--pink); font-style: normal; }
.charts-hero-copy > p:not(.eyebrow):not(.test-ribbon) { max-width: 660px; color: #cfc9c4; font-size: 1.12rem; }
.charts-hero-copy .button { margin-top: 22px; }
.test-ribbon { display: inline-flex; margin: 0 0 12px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.25); color: var(--chart-gold); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero-chart-mark { min-height: 360px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,.035); box-shadow: 0 0 0 22px rgba(255,102,128,.08), 0 0 0 44px rgba(255,255,255,.025); text-align: center; }
.hero-chart-mark span, .hero-chart-mark small { font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--chart-gold); }
.hero-chart-mark strong { margin: -2px 0 -8px; font-family: var(--font-display); font-size: 10rem; line-height: 1; color: #fff; }

.winner-section { position: relative; padding-block: 105px; background: linear-gradient(105deg, #f8d8de 0 52%, #ff6680 52%); overflow: hidden; }
.winner-section::after { content: "1"; position: absolute; right: -30px; bottom: -170px; color: rgba(255,255,255,.18); font-family: var(--font-display); font-size: 39rem; font-weight: 800; line-height: 1; }
.winner-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr); gap: clamp(58px, 8vw, 110px); align-items: center; }
.winner-cover-wrap { position: relative; padding: 24px; background: #fff; box-shadow: var(--shadow); transform: rotate(-1.5deg); }
.winner-cover-wrap::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(17,17,17,.12); pointer-events: none; }
.winner-cover-wrap img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.winner-crown { position: absolute; z-index: 2; right: -24px; top: -26px; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #111; color: var(--chart-gold); font-size: 2rem; box-shadow: 0 14px 30px rgba(0,0,0,.24); }
.winner-copy { position: relative; max-width: 650px; }
.winner-kicker { margin: 0; font-size: .82rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.winner-copy h2 { margin: 12px 0 0; font-family: var(--font-display); font-size: clamp(4rem, 7vw, 7.5rem); line-height: .82; text-transform: uppercase; letter-spacing: -.02em; }
.winner-song { margin: 24px 0 14px; font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3.3rem); font-weight: 600; line-height: 1; }
.winner-copy > p:last-of-type { max-width: 580px; }
.winner-seal { position: absolute; right: -100px; bottom: -40px; width: 145px; height: 145px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #111; color: #fff; box-shadow: 0 16px 45px rgba(0,0,0,.2); transform: rotate(7deg); }
.winner-seal span, .winner-seal small { font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.winner-seal strong { margin: -4px 0 -8px; color: var(--pink); font-family: var(--font-display); font-size: 4.8rem; line-height: 1; }

.phase-notice { margin-block: 42px; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); border-left: 6px solid var(--pink); background: #fff; box-shadow: 0 12px 35px rgba(20,14,16,.05); }
.phase-notice .eyebrow { flex-wrap: wrap; line-height: 1.6; }
.phase-notice h2 { margin: 10px 0 16px; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.phase-notice-message { max-width: 920px; margin: 0 0 18px; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.6; }
.phase-notice a { color: inherit; font-size: .82rem; font-weight: 800; text-underline-offset: 4px; text-decoration-color: var(--pink-dark); }
.phase-notice[data-mode="review"] { border-color: #38332f; border-left-color: var(--pink); background: #211f1d; color: #fff; }
.phase-notice[data-mode="review"] .eyebrow { color: var(--pink); }
.phase-notice[data-mode="runoff"] { border-left-color: var(--chart-gold-dark); background: #fff5d9; }
.podium-section { padding-block: clamp(56px, 7vw, 90px); background: #171615; color: #fff; }
.podium-heading { max-width: 800px; margin-bottom: 40px; }
.podium-heading h2 { margin: 10px 0 20px; font-family: var(--font-display); font-size: clamp(3.3rem, 7vw, 6.4rem); line-height: .92; text-transform: uppercase; }
.podium-heading > p:not(.eyebrow) { margin: 9px 0 0; color: #d5cec8; }
.podium-heading [data-podium-round] { font-weight: 800; color: var(--pink) !important; }
.podium-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); align-items: end; }
.podium-grid[data-shared-winner="true"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.podium-card { min-width: 0; overflow: hidden; align-self: stretch; display: flex; flex-direction: column; background: #fff; color: #111; border-top: 5px solid #c9c2bc; }
.podium-card--winner { border-top-color: var(--pink); box-shadow: 0 0 0 2px var(--pink), 0 18px 45px rgba(0,0,0,.22); }
.podium-cover-wrap { position: relative; }
.podium-cover-wrap img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #292522; }
.podium-rank { position: absolute; left: 16px; bottom: 16px; min-width: 82px; min-height: 82px; padding: 10px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #111; color: #fff; font-size: .64rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 8px 25px rgba(0,0,0,.2); }
.podium-rank strong { font-family: var(--font-display); font-size: 2.8rem; line-height: 1; }
.podium-card--winner .podium-rank { background: var(--pink); color: #111; }
.podium-copy { padding: clamp(20px, 2.5vw, 30px); }
.podium-kicker { margin: 0 0 12px; color: var(--pink-dark); font-size: .67rem; font-weight: 900; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.podium-copy h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.podium-card--winner .podium-copy h3 { font-size: clamp(2.3rem, 4vw, 3.8rem); }
.podium-song { margin: 0 0 16px; color: #514942; font-weight: 700; overflow-wrap: anywhere; }
.podium-result { margin: 0; padding-top: 15px; border-top: 1px solid #e3ddd8; font-size: .8rem; font-weight: 800; }

.voting-section { padding-block: 105px 120px; }
.voting-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 50px; align-items: end; margin-bottom: 48px; }
.voting-heading h2, .rules-intro h2 { margin: 0; font-family: var(--font-display); font-size: clamp(3.2rem, 6vw, 6rem); line-height: .88; text-transform: uppercase; }
.voting-heading > div:first-child > p:last-child, .rules-intro > p:last-child { max-width: 660px; color: var(--muted); }
.voting-clock { min-width: 260px; padding: 24px 28px; background: #111; color: #fff; border-left: 5px solid var(--pink); }
.voting-clock small, .voting-clock span { display: block; color: #aaa39d; font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.voting-clock strong { display: block; margin: 4px 0 5px; color: var(--pink); font-family: var(--font-display); font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
.voter-registration { margin: 0 0 38px; padding: clamp(26px, 4vw, 44px); display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 64px); align-items: center; border: 1px solid var(--line); border-top: 5px solid var(--pink); background: #fff; box-shadow: 0 18px 55px rgba(17,17,17,.08); }
.registration-copy h3 { margin: 10px 0 14px; font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: .9; text-transform: uppercase; }
.registration-copy > p:last-child { margin: 0; color: var(--muted); }
.registration-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.registration-form label:not(.registration-consent) { display: grid; gap: 7px; }
.registration-form label > span:first-child { font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.registration-form input[type="text"], .registration-form input[type="email"] { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid #cfc8c2; background: #faf8f6; color: #111; font: inherit; }
.registration-form input:focus { outline: 3px solid rgba(255,102,128,.22); border-color: var(--pink-dark); }
.registration-consent { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; color: var(--muted); font-size: .78rem; }
.registration-consent input { margin-top: 3px; }
.registration-consent a { color: #111; font-weight: 750; }
.registration-form button { grid-column: 1 / -1; min-height: 56px; border: 0; background: var(--pink); color: #111; font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; text-transform: uppercase; }
.registration-form button:disabled { opacity: .5; }
.registration-success { margin: 0; padding: 20px 22px; background: #e7f7ec; color: #145c2e; font-weight: 800; }
.registration-message { grid-column: 1 / -1; margin: 0; color: #9d1f34; font-weight: 750; }
.vote-message { margin: -18px 0 30px; padding: 15px 18px; border-left: 4px solid #219653; background: #e5f6ec; font-weight: 700; }
.vote-message[data-type="error"] { border-left-color: #c92c45; background: #ffe8ed; }
.chart-list { display: flex; flex-direction: column; gap: 14px; }
.chart-entry { position: relative; display: grid; grid-template-columns: 96px 150px minmax(0, 1fr) 170px; align-items: center; gap: 26px; padding: 18px 20px 18px 0; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(20,14,16,.045); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.chart-entry:hover, .chart-entry.is-leading { transform: translateY(-2px); border-color: #f2a8b5; box-shadow: 0 15px 35px rgba(20,14,16,.085); }
.chart-entry.is-runoff-entry { outline: 3px solid var(--chart-gold); outline-offset: 2px; }
.chart-rank { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #111; color: #fff; }
.chart-rank span { font-size: .57rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; color: #a7a09b; }
.chart-rank strong { margin-top: -3px; font-family: var(--font-display); font-size: 3.8rem; line-height: 1; color: var(--pink); }
.chart-cover { width: 150px; height: 150px; object-fit: cover; background: #e7e1db; }
.chart-info { min-width: 0; }
.chart-artist { margin: 0; color: var(--pink-dark); font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.chart-info h3 { margin: 4px 0 16px; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.65rem); line-height: .94; text-transform: uppercase; overflow-wrap: anywhere; }
.vote-progress { height: 7px; overflow: hidden; background: #ece7e2; }
.vote-progress span { display: block; height: 100%; min-width: 0; background: linear-gradient(90deg, var(--pink-dark), var(--pink)); transition: width .45s ease; }
.chart-result { margin: 9px 0 0; color: var(--muted); font-size: .74rem; }
.chart-result strong { color: #111; }
.vote-button { min-height: 82px; padding: 14px 18px; border: 0; display: flex; flex-direction: column; justify-content: center; background: var(--pink); color: #111; text-transform: uppercase; transition: background .2s ease, color .2s ease, transform .2s ease; }
.vote-button span { font-size: .58rem; font-weight: 800; letter-spacing: .09em; }
.vote-button strong { font-family: var(--font-display); font-size: 1.55rem; line-height: 1; }
.vote-button:hover:not(:disabled) { background: #111; color: #fff; transform: translateY(-2px); }
.vote-button.is-runoff { background: var(--chart-gold); }
.vote-button:disabled { cursor: not-allowed; opacity: .43; }

.support-section { padding-block: 105px; background: #171615; color: #fff; }
.support-heading { margin-bottom: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr); gap: clamp(36px, 6vw, 90px); align-items: end; }
.support-heading > * { min-width: 0; }
.support-heading h2 { margin: 0; max-width: 720px; font-family: var(--font-display); font-size: clamp(3.2rem, 6vw, 6rem); line-height: .88; text-transform: uppercase; }
.support-heading > p { margin: 0; color: #c9c2bc; }
.support-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.support-card { min-width: 0; background: #fff; color: #111; border-bottom: 5px solid var(--pink); box-shadow: 0 16px 38px rgba(0,0,0,.2); }
.support-card img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #111; }
.support-card-copy { padding: 18px; }
.support-card-copy p { margin: 0; color: var(--pink-dark); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.support-card-copy h3 { min-height: 2.25em; margin: 5px 0 17px; font-family: var(--font-display); font-size: 1.35rem; line-height: .95; text-transform: uppercase; overflow-wrap: anywhere; }
.support-card-copy a { min-height: 48px; padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; background: var(--pink); color: #111; font-size: .72rem; font-weight: 900; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.support-card-copy a:hover { background: #111; color: #fff; }
.support-card-copy a span { font-size: 1.2rem; }
.support-note { margin: 28px 0 0; color: #aaa39d; font-size: .78rem; }

.benefits-section { padding-block: 110px; background: #111; color: #fff; }
.benefits-section .section-heading { justify-content: center; }
.benefits-section .section-heading p:last-child { max-width: 680px; margin: 20px auto 0; color: #bdb6b0; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.16); border-left: 1px solid rgba(255,255,255,.16); }
.benefit-grid article { min-height: 300px; padding: 34px; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.benefit-grid article > span { color: var(--pink); font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; }
.benefit-grid h3 { margin: 52px 0 15px; font-family: var(--font-display); font-size: 2.1rem; line-height: .95; text-transform: uppercase; }
.benefit-grid p { margin: 0; color: #bdb6b0; font-size: .9rem; }
.benefit-grid .benefit-final { grid-column: span 3; min-height: 250px; background: var(--pink); color: #111; }
.benefit-grid .benefit-final > span, .benefit-grid .benefit-final p { color: #111; }
.benefit-grid .benefit-final h3 { margin-top: 28px; font-size: clamp(2.8rem, 5vw, 5rem); }
.benefit-grid .benefit-final p { max-width: 760px; font-weight: 650; }
.application-callout { margin-top: 28px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.25fr); gap: clamp(36px, 6vw, 80px); align-items: start; border: 1px solid rgba(255,255,255,.22); background: #211f1d; }
.application-intro, .application-form { min-width: 0; }
.application-callout h3 { margin: 10px 0 14px; font-family: var(--font-display); font-size: clamp(2.3rem, 3.4vw, 3.7rem); line-height: .92; overflow-wrap: normal; hyphens: manual; word-break: normal; text-transform: uppercase; }
.application-callout p:last-child { max-width: 760px; margin: 0; color: #d5cec8; }
.application-callout p a { color: #fff; font-weight: 800; text-decoration-color: var(--pink); text-underline-offset: 4px; }
.application-button { min-width: 210px; padding: 20px 28px; background: var(--pink); color: #111; font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; line-height: 1; text-align: center; text-transform: uppercase; transition: background .2s ease, color .2s ease, transform .2s ease; }
.application-button:hover { background: #fff; color: #111; transform: translateY(-2px); }
.application-mail { margin-top: 18px !important; }
.application-mail a { overflow-wrap: anywhere; word-break: break-word; }
.application-form { padding: clamp(22px, 3vw, 34px); background: #fff; color: #111; border-top: 5px solid var(--pink); }
.application-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.application-form label { display: grid; gap: 7px; }
.application-form label > span:first-child { font-size: .72rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.application-form input[type="text"], .application-form input[type="email"], .application-form input[type="file"], .application-form textarea { width: 100%; border: 1px solid #cfc8c2; background: #faf8f6; color: #111; font: inherit; }
.application-form input[type="text"], .application-form input[type="email"] { min-height: 52px; padding: 12px 14px; }
.application-form textarea { padding: 14px; resize: vertical; }
.application-form input[type="file"] { min-width: 0; max-width: 100%; padding: 11px; }
.application-form input:focus, .application-form textarea:focus { outline: 3px solid rgba(255,102,128,.22); border-color: var(--pink-dark); }
.application-file small { color: var(--muted); font-size: .7rem; }
.application-message, .application-consent, .application-form .application-button, .application-status { grid-column: 1 / -1; }
.application-consent { display: grid !important; grid-template-columns: auto 1fr; gap: 11px !important; align-items: start; color: var(--muted); font-size: .78rem; }
.application-consent input { margin-top: 3px; }
.application-consent a { color: #111; font-weight: 750; }
.application-form .application-button { width: 100%; min-width: 0; margin-top: 22px; border: 0; cursor: pointer; }
.application-form .application-button:disabled { opacity: .55; cursor: wait; }
.application-status { margin: 18px 0 0; padding: 14px 16px; border-left: 4px solid #219653; background: #e5f6ec; color: #145c2e; font-weight: 750; }
.application-status[data-type="error"] { border-left-color: #c92c45; background: #ffe8ed; color: #9d1f34; }
.application-honeypot { position: absolute !important; left: -9999px !important; }
.rules-list a { color: #111; font-weight: 750; text-decoration-color: var(--pink-dark); text-underline-offset: 3px; }

.rules-section { padding-block: 110px 125px; display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(50px, 8vw, 120px); }
.rules-intro { position: sticky; top: 160px; align-self: start; }
.rules-list { margin: 0; padding: 0; list-style: none; counter-reset: chart-rules; border-top: 1px solid var(--line); }
.rules-list li { counter-increment: chart-rules; position: relative; padding: 28px 0 28px 72px; display: grid; gap: 5px; border-bottom: 1px solid var(--line); }
.rules-list li::before { content: counter(chart-rules, decimal-leading-zero); position: absolute; left: 0; top: 23px; color: var(--pink-dark); font-family: var(--font-display); font-size: 1.65rem; font-weight: 800; }
.rules-list strong { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; text-transform: uppercase; }
.rules-list span { color: var(--muted); font-size: .9rem; }

@media (max-width: 1080px) {
  .charts-page .desktop-nav { display: none; }
  .charts-page .mobile-menu { display: block; position: relative; margin-left: auto; }
  .charts-page .mobile-menu summary { width: 44px; height: 44px; display: grid; place-content: center; gap: 7px; list-style: none; border: 1px solid #d8d1cb; cursor: pointer; }
  .charts-page .mobile-menu summary::-webkit-details-marker { display: none; }
  .charts-page .mobile-menu summary span { display: block; width: 20px; height: 2px; background: var(--ink); }
  .charts-page .mobile-menu nav { position: fixed; left: 0; right: 0; top: 120px; padding: 28px 24px 34px; display: grid; gap: 4px; background: var(--white); color: var(--ink); border-top: 1px solid #e4ded8; box-shadow: 0 20px 40px rgba(0,0,0,.25); }
  .charts-page .mobile-menu nav a { padding: 12px; font-family: var(--font-display); font-size: 1.65rem; text-transform: uppercase; border-bottom: 1px solid #ebe5df; }
  .charts-hero-inner { grid-template-columns: 1fr .55fr; gap: 44px; }
  .hero-chart-mark { min-height: 280px; }
  .hero-chart-mark strong { font-size: 7rem; }
  .winner-seal { right: 0; }
  .chart-entry { grid-template-columns: 80px 130px minmax(0, 1fr) 145px; gap: 20px; }
  .chart-cover { width: 130px; height: 130px; }
  .support-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .application-callout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .application-callout h3 { max-width: 780px; font-size: clamp(2.7rem, 7vw, 4.5rem); }
}

@media (max-width: 760px) {
  .charts-page .utility-bar { display: none; }
  .charts-page .header-inner { min-height: 78px; }
  .charts-page .brand img { width: 54px; height: 54px; }
  .charts-page .brand strong { font-size: 1.06rem; }
  .charts-page .mobile-menu nav { top: 78px; }
  .shell { width: min(100% - 30px, 1180px); }
  .charts-hero-inner { min-height: auto; padding-block: 68px 78px; grid-template-columns: 1fr; }
  .charts-hero h1 { font-size: clamp(4rem, 20vw, 6.2rem); }
  .hero-chart-mark { display: none; }
  .winner-section { padding-block: 70px 82px; background: linear-gradient(180deg, #f8d8de 0 48%, #ff6680 48%); }
  .winner-shell { grid-template-columns: 1fr; gap: 52px; }
  .winner-cover-wrap { padding: 15px; }
  .winner-crown { right: -12px; }
  .winner-copy h2 { font-size: clamp(3.7rem, 17vw, 6rem); }
  .winner-seal { position: relative; right: auto; bottom: auto; margin: 28px 0 0 auto; }
  .phase-notice { margin-block: 28px; }
  .phase-notice .eyebrow { font-size: .66rem; letter-spacing: .07em; }
  .podium-grid, .podium-grid[data-shared-winner="true"] { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .podium-card { width: 100%; max-width: 480px; margin-inline: auto; }
  .podium-heading { margin-bottom: 28px; }
  .podium-copy h3 { font-size: clamp(2rem, 9vw, 3.2rem); }
  .podium-card--winner .podium-copy h3 { font-size: clamp(2.3rem, 10vw, 3.8rem); }
  .voting-clock { min-width: 0; }
  .voting-section { padding-block: 76px 88px; }
  .voting-heading { grid-template-columns: 1fr; gap: 24px; }
  .voting-clock { width: 100%; }
  .voter-registration { grid-template-columns: 1fr; }
  .registration-form { grid-template-columns: 1fr; }
  .chart-entry { grid-template-columns: 58px 92px minmax(0, 1fr); gap: 12px; padding: 10px 10px 10px 0; }
  .chart-rank { grid-row: 1 / span 2; }
  .chart-rank strong { font-size: 2.7rem; }
  .chart-cover { width: 92px; height: 92px; }
  .chart-info h3 { margin-bottom: 11px; font-size: 1.42rem; }
  .chart-result { font-size: .67rem; }
  .vote-button { grid-column: 2 / -1; min-height: 58px; flex-direction: row; align-items: center; gap: 8px; }
  .vote-button strong { font-size: 1.25rem; }
  .support-section { padding-block: 72px; }
  .support-heading { grid-template-columns: 1fr; gap: 22px; }
  .support-heading h2 { overflow-wrap: normal; hyphens: manual; word-break: normal; }
  .support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit-grid { grid-template-columns: minmax(0, 1fr); }
  .benefit-grid .benefit-final { grid-column: auto; }
  .benefit-grid article { min-width: 0; min-height: 240px; }
  .benefit-grid h3 { margin-top: 35px; }
  .application-callout { grid-template-columns: 1fr; gap: 24px; }
  .application-fields { grid-template-columns: 1fr; }
  .application-button { width: 100%; }
  .rules-section { grid-template-columns: 1fr; padding-block: 80px 95px; }
  .rules-intro { position: static; }
}

@media (max-width: 420px) {
  .application-mail a { font-size: .94em; letter-spacing: -.01em; }
  .support-grid { grid-template-columns: 1fr; }
  .support-card { display: grid; grid-template-columns: minmax(120px, .72fr) minmax(0, 1.28fr); align-items: stretch; }
  .support-card img { height: 100%; }
  .support-card-copy { display: flex; flex-direction: column; justify-content: center; }
  .support-card-copy h3 { min-height: 0; }
  .charts-page .brand small { display: none; }
  .charts-hero h1 { font-size: 3.8rem; }
  .chart-entry { grid-template-columns: 50px 78px minmax(0, 1fr); }
  .chart-cover { width: 78px; height: 78px; }
  .chart-info h3 { font-size: 1.15rem; }
  .chart-artist { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
