/* Game Day Programs: the booklet on screen, plus the buttons that lead to it. */

.rt-pg .rt-container { max-width: min(1200px, 94vw); margin: 0 auto; }

/* Head: our helmet left, theirs right, facing each other around the matchup (the home hero's shape). */
.rt-pg-head { display: grid; gap: 1rem; padding: .4rem 0 1.2rem; }
.rt-pg-matchup { display: grid; grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr); align-items: center; gap: .6rem 1rem; text-align: center; }
.rt-pg-helm { display: flex; justify-content: center; align-items: center; }
.rt-pg-helm--home { justify-content: flex-end; }
.rt-pg-helm--away { justify-content: flex-start; }
.rt-pg-helmet { display: block; width: clamp(96px, 16vw, 220px); height: auto; max-height: clamp(72px, 12vw, 160px); object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); }
.rt-pg-helm--away .rt-pg-helmet { transform: scaleX(-1); }
.rt-pg-helm--home .rt-pg-helmet--flip { transform: scaleX(-1); }
.rt-pg-helm--away .rt-pg-helmet--flip { transform: none; }
.rt-pg-head-text { min-width: 0; }
.rt-pg-title { margin: 0; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.15; }
.rt-pg-when { margin: .35rem 0 0; color: var(--rt-ink-muted, #555); font-weight: 600; }
.rt-pg-kicker { margin: 0 0 .3rem; color: var(--rt-primary); font-size: .85rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.rt-pg-at { color: var(--rt-primary); font-weight: 900; margin-right: .15em; }
.rt-pg-where { white-space: nowrap; }
a.rt-pg-venue { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
a.rt-pg-venue:hover { color: var(--rt-primary) !important; }
.rt-pg-dot { opacity: .5; }
.rt-pg-theme { display: inline-block; margin-left: .5rem; padding: .15rem .6rem; border-radius: 999px; background: var(--rt-primary); color: var(--rt-on-primary, #111); font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.rt-pg-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.rt-pg-actions .rt-btn { white-space: nowrap; }
.rt-pg-actions .rt-btn i { margin-right: .3em; }
.rt-pg-foot .rt-pg-actions { width: 100%; }
@media (max-width: 560px) { .rt-pg-matchup { grid-template-columns: 1fr 1fr; } .rt-pg-head-text { grid-column: 1 / -1; grid-row: 1; } .rt-pg-helm--home { grid-row: 2; } .rt-pg-helm--away { grid-row: 2; } .rt-pg-actions { justify-content: center; } }

/* The pages: stacked on the program's own dark ground, each a sheet with a shadow. */
.rt-pg-pages { display: grid; gap: 18px; padding: clamp(14px, 3vw, 32px) clamp(8px, 2vw, 24px); margin: 0 0 1.4rem; border-radius: 18px; background: var(--rt-black, #111); }
.rt-pg-page { margin: 0; width: min(900px, 100%); min-width: 0; max-width: 100%; justify-self: center; }
.rt-pg-pages { max-width: 100%; overflow: hidden; }
.rt-pg-page img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 12px 34px rgba(0, 0, 0, .55); background: #000; }
.rt-pg-page figcaption { margin: .35rem 0 0; text-align: right; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }

.rt-pg-foot { display: grid; gap: .8rem; justify-items: center; padding: 0 0 2rem; }
.rt-pg-credit { margin: 0; color: var(--rt-ink-muted, #555); font-style: italic; }
.rt-pg-empty, .rt-pg-intro { text-align: center; max-width: 720px; margin: 1rem auto 1.4rem; }
.rt-pg-more { text-align: center; margin: 1.4rem 0 2rem; }

/* The season list: cards, band carries the title, cover under it. */
.rt-pg-cards { display: grid; gap: 1.2rem; justify-content: center; margin: 0 0 1rem; grid-template-columns: repeat(3, minmax(0, 360px)); }
.rt-pg-cards--n1 { grid-template-columns: repeat(1, minmax(0, 360px)); }
.rt-pg-cards--n2 { grid-template-columns: repeat(2, minmax(0, 360px)); }
@media (max-width: 900px) { .rt-pg-cards, .rt-pg-cards--n2 { grid-template-columns: repeat(2, minmax(0, 360px)); } }
@media (max-width: 600px) { .rt-pg-cards, .rt-pg-cards--n2, .rt-pg-cards--n3 { grid-template-columns: minmax(0, 420px); } }
.rt-pg-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 10px 28px rgba(0, 0, 0, .12); }
.rt-pg-card-band { display: block; padding: .8rem 1rem .7rem; color: #fff !important; text-decoration: none; background-color: var(--rt-black, #111); background-image: var(--rt-brand-tex, none); box-shadow: inset 0 -4px 0 var(--rt-primary); }
.rt-pg-card-title { display: block; font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.rt-pg-card-date { display: block; margin-top: .2rem; font-size: .8rem; opacity: .85; }
.rt-pg-card-art { display: block; background: #000; aspect-ratio: 4 / 5; overflow: hidden; }
.rt-pg-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .3s ease; }
.rt-pg-card:hover .rt-pg-card-art img { transform: scale(1.03); }
.rt-pg-card-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; padding: .9rem 1rem 1rem; }

/* Where the schedule and the game-day slate point at a program. */
.rt-schedule-program { display: inline-flex; align-items: center; gap: .35em; margin-top: .3rem; padding: .2rem .6rem; border-radius: 999px; background: var(--rt-primary); color: var(--rt-on-primary, #111) !important; font-size: .78rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; }
.rt-schedule-program:hover { filter: brightness(1.08); }
.rt-btn.rt-matchup-program::after { content: none; }

/* Ghost buttons sit on the light page here, so they take the ink outline. */
.rt-pg .rt-btn--ghost { color: var(--rt-black, #111) !important; border-color: var(--rt-black, #111); background: transparent; }
.rt-pg .rt-btn--ghost:hover { background: var(--rt-black, #111); color: var(--rt-primary-bright, var(--rt-primary)) !important; }

/* The reader bar: sticks under the site header; counter + prev/next + Pages on the left, section chips on the right. */
.rt-pg { --rt-pg-top: 84px; --rt-pg-bar-h: 56px; }
.rt-pg-bar { position: sticky; top: var(--rt-pg-top); z-index: 20; display: flex; align-items: center; gap: .6rem 1rem; padding: .5rem .8rem; margin: 0 0 .9rem; border-radius: 14px; color: #fff; background-color: var(--rt-black, #111); background-image: var(--rt-brand-tex, none); box-shadow: 0 10px 24px rgba(0, 0, 0, .3), inset 0 -3px 0 var(--rt-primary); }
.rt-pg-bar-left { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.rt-pg-count { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: .9; padding: 0 .2rem; }
.rt-pg-count b { color: var(--rt-primary-bright, var(--rt-primary)); font-size: 1rem; }
.rt-pg-nav { display: inline-flex; align-items: center; gap: .35rem; min-width: 36px; height: 36px; padding: 0 .6rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.rt-pg-nav:hover, .rt-pg-nav[aria-expanded="true"] { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-on-primary, #111); }
.rt-pg-chips { display: flex; gap: .4rem; flex: 1 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: .15rem 0; touch-action: pan-x; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.rt-pg-chips::-webkit-scrollbar { display: none; }
.rt-pg-chips { cursor: grab; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.rt-pg-chips.is-dragging { cursor: grabbing; user-select: none; }
.rt-pg-chip { flex: 0 0 auto; padding: .35rem .8rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
/* The theme's content-link hover (a:not(...):hover, very high specificity) paints links black; these sit on dark or brand grounds, so their colors are pinned. */
.rt-pg-chip { color: #fff !important; }
.rt-pg-chip:hover { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-on-primary, #fff) !important; }
.rt-pg-chip.is-here { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-on-primary, #fff) !important; }
@media (max-width: 720px) { .rt-pg-bar { flex-wrap: wrap; border-radius: 0 0 14px 14px; margin-left: calc(-1 * clamp(8px, 3vw, 24px)); margin-right: calc(-1 * clamp(8px, 3vw, 24px)); } .rt-pg-bar-left { width: 100%; justify-content: center; } .rt-pg-chips { width: 100%; } }

/* Every page lands under the bar, never behind it. */
.rt-pg-page { scroll-margin-top: calc(var(--rt-pg-top) + var(--rt-pg-bar-h) + 12px); }

/* The Pages drawer: every page small, tap to jump. */
.rt-pg-thumbs { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 21; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; padding: .8rem; max-height: min(62vh, 640px); overflow-y: auto; border-radius: 14px; background: var(--rt-black, #111); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.rt-pg-thumbs[hidden] { display: none; }
.rt-pg-thumb { position: relative; display: block; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.rt-pg-thumb img { display: block; width: 100%; height: auto; }
.rt-pg-thumb { color: #fff !important; }
.rt-pg-thumb span { position: absolute; left: 6px; bottom: 6px; padding: .1rem .45rem; border-radius: 999px; background: var(--rt-primary); color: var(--rt-on-primary, #111); font-size: .72rem; font-weight: 800; }
.rt-pg-thumb:hover { outline: 3px solid var(--rt-primary); }
@media (max-width: 900px) { .rt-pg-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rt-pg-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* What is inside, on the season card. */
.rt-pg-card-inside { display: block; margin-top: .35rem; font-size: .76rem; opacity: .8; }

/* The theme slides an arrow in on .rt-btn hover; these buttons carry their own icons. */
.rt-pg .rt-btn::after, .rt-pg-card .rt-btn::after { content: none !important; }