/* ============================================================
   extra.css — additions on top of base.css for the rebuilt site.
   Keep base.css untouched; everything new/changed lives here.
   ============================================================ */

:root {
  --bg: var(--paper);
  --blue-dark: #0d4e83;
}

/* Recent Results: drop the small dot base.css adds after a winning score
   (.res__score .win::after) — the bold score + W/L chip already make the
   win obvious, the dot just added visual noise. */
.res__score .win::after {
  content: none;
}

/* Homepage stats strip: 3 stats now instead of 4 (the standalone
   "Non-Profit" bubble was folded into the 100% stat's own subtext —
   it read as a stray filler tile since it was the only one of the four
   that didn't lead with a number). Keep 3-across down through tablet
   since these are short; only stack at real phone widths. */
.stats__grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 520px) {
  .stats__grid {
    grid-template-columns: 1fr;
  }
}

/* Leadership page: one unified Executive Board, laid out as a pyramid —
   the two title-holders (Executive Producer/Director) prominently
   centered on top, the other four in an even row directly beneath. Both
   rows share the single "Executive Board" label above them; there is no
   second "Team" heading, since all six report the same way. */
.crew-tier-label {
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 14px;
}
.crew--top {
  grid-template-columns: repeat(2, minmax(220px, 300px));
  justify-content: center;
  max-width: 660px;
  margin: 0 auto;
}
.crew--second {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 24px;
}
@media (max-width: 900px) {
  .crew--second {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .crew--top,
  .crew--second {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

/* Global text selection highlight (clean transparent tint that preserves underlying colors) */
::selection {
  background: rgba(18, 109, 182, 0.35) !important;
  color: inherit !important;
}
::-moz-selection {
  background: rgba(18, 109, 182, 0.35) !important;
  color: inherit !important;
}

/* Ensure display headings have adequate line boxes to prevent selection collision */
h1,
h2,
h3,
h4,
h5,
h6,
.hero h1,
.sec-head h1,
.sec-head h2,
.sarachek-hero h1,
.sarachek-hero h2,
.pull,
.story-header h1,
.article-title,
.art h3,
.art-card__title,
.feat-art__title {
  line-height: 1.15;
}

/* nav tabs are now real <a> links (was <button>) */
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tab.active::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--blue-bright);
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  margin-top: 0;
}


/* ---- game card: clickable + winner emphasis ---- */
.games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: 16px;
}
.gcard {
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
  min-width: 0;
  overflow: hidden;
}
.gcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(11, 14, 22, 0.28);
}
.gcard--live {
  border: 1.5px solid #cc0000;
  background: linear-gradient(
    180deg,
    rgba(204, 0, 0, 0.04) 0%,
    var(--paper) 35%
  );
  box-shadow:
    0 4px 20px -4px rgba(204, 0, 0, 0.22),
    0 0 0 1px rgba(204, 0, 0, 0.12);
  position: relative;
}
.gcard--live:hover {
  border-color: #e60000;
  transform: translateY(-3px);
  box-shadow:
    0 16px 32px -12px rgba(204, 0, 0, 0.35),
    0 0 0 1px rgba(204, 0, 0, 0.2);
}
.gcard--live .gcard__round {
  color: #cc0000;
  font-weight: 700;
}
.gcard:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.grow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  gap: 12px;
}
.gteam {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
/* Standard team-logo badge: a fixed-size white disc behind every opponent
   mark, sitewide. Guarantees contrast for dark-on-dark logos (e.g. navy
   Illinois Wesleyan) on dark cards, and gives every schedule row/score
   card/hero widget the same size, padding and vertical baseline. Size is
   set per usage via the --tb-size custom property (defaults to 22px). */
.team-badge {
  width: var(--tb-size, 22px);
  height: var(--tb-size, 22px);
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(11, 14, 22, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.team-badge img {
  width: 76%;
  height: 76%;
  object-fit: contain;
}
.team-badge__mono {
  font-family: var(--display);
  font-weight: 800;
  font-size: 10px;
  color: var(--blue-deep);
  letter-spacing: 0.02em;
}
.team-badge--tbd {
  background: var(--mist, #eef1f5);
  color: var(--slate, #6b7280);
}
.gteam .nm {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14.5px;
}
.grow--win {
  background: linear-gradient(90deg, var(--blue-wash), transparent 70%);
  border-radius: 6px;
}

/* ---- Opponent color options (scores page win/loss color fix) ----
   Blue means "this is Yeshiva," so a win/loss highlight can't also be
   blue or a losing Yeshiva card and a winning opponent card both read
   as "blue = good." --opp-color is the single switch below; the other
   two options stay defined so you can try them later by only changing
   the --opp-color line. */
:root {
  --opp-ink: #0b0e16; /* Option A — reuses existing --ink, safest */
  --opp-graphite: #3a4250; /* Option B — ACTIVE */
  --opp-maroon: #7a2e2e; /* Option C — "rival" feel, more decision */
  --opp-color: var(--opp-graphite);
}

.grow--opp .nm {
  color: var(--opp-color);
}
.grow--opp .gscore {
  color: var(--opp-color);
  opacity: 0.75;
}

.grow--win {
  background: linear-gradient(90deg, rgba(240, 165, 0, 0.14), transparent 70%);
  border-radius: 6px;
}
.grow--win .gscore {
  font-weight: 800;
}
.grow--yu.grow--win .gscore {
  color: var(--blue-deep);
}
.grow--opp.grow--win .gscore {
  color: var(--opp-color);
}
.gscore,
.gtime,
.g-year {
  white-space: nowrap;
}
.gscore {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.gcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--slate);
  min-width: 0;
}
.gcard__info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.gcard__info .gdate,
.gcard__info .gtime,
.gcard__info .dot {
  flex-shrink: 0;
  white-space: nowrap;
}
.gcard__info .gloc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.gcard__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.gcard__actions a {
  margin-left: 0;
}
.gstats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mist);
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  min-height: 26px;
  height: 26px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.gstats:hover {
  background: var(--line);
  color: var(--ink);
  border-color: var(--slate);
}
.gcal {
  flex-shrink: 0;
  color: var(--slate);
  font-weight: 600;
  white-space: nowrap;
  padding: 2px 4px;
  transition: color 0.15s;
}
.gcal:hover {
  color: var(--blue);
}
.gcard-cal-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-wash);
  color: var(--blue);
  border: 1px solid rgba(27, 85, 226, 0.28);
  border-radius: 6px;
  padding: 0 6px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  min-height: 26px;
  height: 26px;
  max-width: 38px;
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: max-width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.18s ease,
              color 0.18s ease,
              border-color 0.18s ease,
              padding 0.2s ease,
              box-shadow 0.18s ease;
}
.gcard-cal-pill .gcard-cal-icon {
  display: inline-flex;
  align-items: center;
  gap: 1.5px;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}
.gcard-cal-pill .gcard-cal-icon .gcal-plus {
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}
.gcard-cal-pill .gcard-cal-icon .gcal-emoji {
  font-size: 12px;
  line-height: 1;
}
.gcard-cal-pill .gcard-cal-label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-left: 0;
  transition: max-width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.18s ease,
              margin-left 0.18s ease;
}
.gcard-cal-pill:hover,
.gcard-cal-pill:focus-visible {
  max-width: 142px;
  padding: 0 9px;
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 2px 6px rgba(27, 85, 226, 0.25);
  outline: none;
}
.gcard-cal-pill:hover .gcard-cal-label,
.gcard-cal-pill:focus-visible .gcard-cal-label {
  max-width: 95px;
  opacity: 1;
  margin-left: 5px;
}
.gwatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-wash);
  color: var(--blue);
  border: 1px solid rgba(27, 85, 226, 0.28);
  border-radius: 6px;
  padding: 0 8px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  min-height: 26px;
  height: 26px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.gwatch:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.gwatch--live {
  background: #cc0000;
  color: #fff !important;
  border-color: #cc0000;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  min-height: 26px;
  height: 26px;
  box-sizing: border-box;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px -1px rgba(204, 0, 0, 0.4);
  transition:
    background 0.15s,
    transform 0.12s;
}
.gwatch--live:hover {
  background: #e60000;
  color: #fff !important;
  transform: scale(1.03);
}

/* ---- game detail modal ---- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 14, 22, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  background: var(--paper);
  border-radius: 14px;
  max-width: 440px;
  width: 100%;
  padding: 26px;
  position: relative;
  box-shadow: 0 30px 60px -20px rgba(11, 14, 22, 0.45);
  transform: translateY(8px);
  transition: transform 0.15s;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-backdrop.open .modal {
  transform: none;
}
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--slate);
  padding: 6px;
}
.modal__round {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--blue);
}
.modal h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  text-transform: uppercase;
  margin-top: 6px;
  line-height: 1.2;
}
.modal__meta {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--slate);
}
.modal__meta b {
  color: var(--ink);
}
.modal__actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.modal__actions .btn {
  padding: 10px 16px;
  font-size: 14px;
}
.modal__cal-box {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--wash, #f3f5f8);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
}
.modal__cal-title {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.modal__cal-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal__cal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line, #cbd5e1);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 42px;
  box-sizing: border-box;
}
.modal__cal-btn:hover {
  background: var(--paper, #fff);
  border-color: var(--blue);
  color: var(--blue);
}
.modal__cal-btn--apple {
  color: #000;
}
.modal__cal-btn--google {
  color: #1a73e8;
}
.modal__cal-btn--outlook {
  color: #0078d4;
}

/* ---- Sarachek Tournament Hub ---- */
/* Sarachek Tournament Hub keeps its own orange/navy/white brand accent —
   sampled from YU's official Red Sarachek tournament logo (#F08020) —
   instead of MacsLive's site-wide blue. Scoped to this page only so
   nothing else on the site changes. */
body[data-page="sarachek"] {
  --sarachek-orange: #f08020;
  --sarachek-orange-bright: #ff9d42;
  --sarachek-orange-wash: rgba(240, 128, 32, 0.12);
}
/* "Watch" CTAs (hero playlist button, biography CTA, etc.) use .btn--live
   sitewide, which is MacsLive's blue — override to orange on this page
   only, so every other page's watch buttons stay blue as normal. */
body[data-page="sarachek"] .btn--live {
  background: var(--sarachek-orange);
}
body[data-page="sarachek"] .btn--live:hover {
  background: var(--sarachek-orange-bright);
}
.sarachek-hero {
  background:
    radial-gradient(
      circle at 80% 20%,
      var(--sarachek-orange-wash, rgba(18, 109, 182, 0.32)) 0%,
      rgba(11, 14, 22, 0.98) 70%
    ),
    var(--ink);
  color: #fff;
  padding: clamp(52px, 7vw, 84px) 0 clamp(44px, 6vw, 72px);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line-dark);
}
.sarachek-hero .eyebrow {
  color: var(--sarachek-orange-bright, var(--blue-bright));
}
.sarachek-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sarachek-orange-wash, rgba(30, 139, 225, 0.14));
  border: 1px solid rgba(240, 128, 32, 0.4);
  color: var(--sarachek-orange-bright, var(--blue-bright));
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sarachek-hero__badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sarachek-orange-bright, var(--blue-bright));
  box-shadow: 0 0 8px var(--sarachek-orange-bright, var(--blue-bright));
  animation: tally 2.2s infinite;
}
.sarachek-hero h1,
.sarachek-hero h2 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(40px, 6.8vw, 78px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: 6px;
  color: #fff;
}
.sarachek-hero h1 span,
.sarachek-hero h2 span {
  color: var(--sarachek-orange-bright, var(--blue-bright));
}
.sarachek-hero p.hero-lead {
  margin-top: 18px;
  max-width: 44em;
  font-size: clamp(15px, 1.8vw, 17.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.sarachek-hero__actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.sarachek-hero__actions .btn {
  font-size: 13.5px;
  padding: 10px 18px;
}

.sarachek-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.sarachek-facts .stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 18px 20px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}
.sarachek-facts .stat:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 128, 32, 0.4);
  background: rgba(255, 255, 255, 0.08);
}
.sarachek-facts .stat .n {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.sarachek-facts .stat .n b {
  color: var(--sarachek-orange-bright);
}
.sarachek-facts .stat .l {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sarachek-orange-bright);
  margin-top: 6px;
}
.sarachek-facts .stat .sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 2px;
  line-height: 1.35;
}
.sarachek-note {
  background: var(--mist);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  color: var(--slate);
  font-size: 14px;
  margin-top: 28px;
}

/* Section Containers */
.sarachek-section {
  padding: clamp(44px, 5.5vw, 68px) 0;
  border-bottom: 1px solid var(--line);
}
.sarachek-section:not(.sarachek-section--mist):not(.sarachek-section--dark)
  .eyebrow {
  color: var(--sarachek-orange, var(--blue));
}
.sarachek-section--mist {
  background: var(--mist);
}
.sarachek-section--mist .eyebrow {
  color: #b45309;
}
.sarachek-history__year summary::before {
  color: #b45309;
}
.legacy-card:hover {
  border-color: rgba(180, 83, 9, 0.35);
  box-shadow: 0 14px 28px -10px rgba(180, 83, 9, 0.15);
}
.sarachek-section--dark {
  background:
    radial-gradient(
      circle at 10% 90%,
      var(--sarachek-orange-wash, rgba(18, 109, 182, 0.18)) 0%,
      rgba(11, 14, 22, 1) 80%
    ),
    var(--ink);
  color: #fff;
  border-bottom-color: var(--line-dark);
}
.sarachek-section--dark .eyebrow {
  color: var(--sarachek-orange-bright, var(--blue-bright));
}
.sarachek-section--dark h2 {
  color: #fff;
}
.sarachek-section--dark p.section-sub {
  color: rgba(255, 255, 255, 0.7);
}

/* Same dark "broadcast hub" treatment as a self-contained rounded card,
   for use inside a page that doesn't have full-bleed color bands
   (e.g. about.html, which is a single constrained-width column). */
.about-broadcast-band {
  background:
    radial-gradient(
      circle at 10% 90%,
      rgba(18, 109, 182, 0.18) 0%,
      rgba(11, 14, 22, 1) 80%
    ),
    var(--ink);
  color: #fff;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  margin-top: 44px;
}
.about-broadcast-band .eyebrow {
  color: var(--blue-bright);
}
.about-broadcast-band h2 {
  color: #fff;
}
.about-broadcast-band p.section-sub {
  color: rgba(255, 255, 255, 0.7);
}
p.section-sub {
  margin-top: 6px;
  font-size: 15px;
  color: var(--slate);
  max-width: 46em;
  line-height: 1.55;
}

/* Visual 4-Tier Interactive Breakdown */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.tier-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 2px 6px rgba(11, 14, 22, 0.03);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.tier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(11, 14, 22, 0.12);
}
.tier-card--t1 {
  border-color: rgba(217, 119, 6, 0.38);
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 38%);
}
.tier-card--t1 .tier-card__badge {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.tier-card--t2 {
  border-color: rgba(100, 116, 139, 0.38);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 38%);
}
.tier-card--t2 .tier-card__badge {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.tier-card--t3 {
  border-color: rgba(180, 83, 9, 0.32);
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 38%);
}
.tier-card--t3 .tier-card__badge {
  background: #ffedd5;
  color: #9a3412;
  border: 1px solid #fed7aa;
}
.tier-card--t4 {
  border-color: rgba(18, 109, 182, 0.32);
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 38%);
}
.tier-card--t4 .tier-card__badge {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}
.tier-card__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.tier-card h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 23px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 10px;
}
.tier-card p {
  color: var(--slate);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 16px;
  flex-grow: 1;
}
.tier-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tier-card__chip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--slate);
  background: rgba(0, 0, 0, 0.04);
  padding: 3px 8px;
  border-radius: 4px;
}

/* Tier 1 game cards on the Sarachek page carry a "Nationally Televised"
   badge — every Tier 1 game (not just the final) is broadcast live, per
   the tier breakdown copy above. See sarachek.js's row(). */
.gcard__top-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tier1-tv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

/* Format Progression / Schedule Timeline */
.sarachek-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.timeline-step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 22px;
  position: relative;
  transition:
    border-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.timeline-step:hover {
  border-color: var(--sarachek-orange, var(--blue));
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -12px rgba(11, 14, 22, 0.12);
}
.timeline-step__day {
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sarachek-orange, var(--blue));
  margin-bottom: 8px;
}
.timeline-step__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 10px;
}
.timeline-step__desc {
  font-size: 14.5px;
  color: var(--slate);
  line-height: 1.55;
}

/* Championship Legacy / Hall of Champions */
.legacy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.legacy-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 2px 6px rgba(11, 14, 22, 0.03);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.legacy-card:hover {
  transform: translateY(-3px);
  border-color: rgba(18, 109, 182, 0.4);
  box-shadow: 0 14px 28px -10px rgba(11, 14, 22, 0.1);
}
.legacy-card__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.legacy-card__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.legacy-card__school {
  overflow-wrap: break-word;
}
.legacy-team-logo {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(11, 14, 22, 0.06);
  border: 1.5px solid var(--line);
  background: #fff;
  padding: 5px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.legacy-card:hover .legacy-team-logo {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(11, 14, 22, 0.12);
}
.legacy-team-logo img,
.legacy-team-logo__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(11, 14, 22, 0.08));
}
.legacy-team-logo svg,
.legacy-team-logo__fallback {
  width: 30px;
  height: 30px;
  display: block;
}
.legacy-team-logo--drs {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-color: rgba(16, 185, 129, 0.4);
}
.legacy-team-logo--valley-torah {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border-color: rgba(239, 68, 68, 0.4);
}
.legacy-team-logo--frisch {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-color: rgba(59, 130, 246, 0.4);
}
.legacy-team-logo--shalhevet {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color: rgba(249, 115, 22, 0.4);
}
.legacy-team-logo--yula {
  background: linear-gradient(135deg, #eff6ff, #e0e7ff);
  border-color: rgba(59, 130, 246, 0.4);
}
.legacy-team-logo--flatbush {
  background: linear-gradient(135deg, #fefce8, #fef08a);
  border-color: rgba(245, 158, 11, 0.4);
}
.legacy-card__school {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.legacy-card__loc {
  font-size: 12px;
  color: var(--slate);
  margin-top: 3px;
}
.legacy-card__badge {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  white-space: nowrap;
}
.legacy-card__titles {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-deep);
  background: var(--blue-wash);
  border: 1px solid rgba(18, 109, 182, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  overflow-wrap: break-word;
}
.legacy-card__desc {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
}

/* Historical Standings — native <details>/<summary> accordion, one per
   tournament year, sourced from archived recap coverage. */
.sarachek-history {
  margin-top: 36px;
}
.sarachek-history__year {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.sarachek-history__year summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.sarachek-history__year summary::-webkit-details-marker {
  display: none;
}
.sarachek-history__year summary::before {
  content: "›";
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--blue);
  font-size: 20px;
  line-height: 1;
}
.sarachek-history__year[open] summary::before {
  transform: rotate(90deg);
}
.sarachek-history__year summary span {
  font-family: var(--body, inherit);
  font-weight: 500;
  font-size: 13px;
  color: var(--slate);
  text-transform: none;
  letter-spacing: normal;
}
.sarachek-history__body {
  padding: 0 18px 16px 46px;
  font-size: 13.5px;
  color: var(--slate);
  line-height: 1.7;
  border-top: 1px solid var(--line);
}
.sarachek-history__body div {
  padding-top: 10px;
}
.sarachek-history__body b {
  color: var(--ink);
}
.sarachek-history__subhead {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-dim);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.sarachek-standings,
.sarachek-allstars {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 3px 14px;
  padding: 6px 0 0;
  margin: 0;
  font-size: 13px;
}
.sarachek-standings li,
.sarachek-allstars li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sarachek-standings li b {
  color: var(--blue-deep);
  font-weight: 700;
  margin-right: 3px;
}
.sarachek-allteam {
  padding-top: 8px;
  font-size: 13px;
}

/* Tournament Programs Showcase Grid */
.tournament-programs-box {
  margin-top: 36px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 22px;
  box-shadow: 0 2px 8px rgba(11, 14, 22, 0.03);
}
.tournament-programs-box__head {
  margin-bottom: 18px;
}
.programs-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.program-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: all 0.15s ease;
}
.program-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(18, 109, 182, 0.4);
  background: #fff;
  box-shadow: 0 6px 16px -4px rgba(11, 14, 22, 0.08);
}
.program-badge__logo-wrap {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.program-badge__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(11, 14, 22, 0.06));
}
.program-badge__placeholder {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(18, 109, 182, 0.1),
    rgba(240, 165, 0, 0.15)
  );
  border: 1.5px dashed rgba(18, 109, 182, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  transition: all 0.15s ease;
}
.program-badge:hover .program-badge__placeholder {
  background: linear-gradient(
    135deg,
    rgba(18, 109, 182, 0.2),
    rgba(240, 165, 0, 0.25)
  );
  border-style: solid;
  border-color: var(--brand);
  color: var(--brand-dark);
  transform: scale(1.05);
}
.program-badge__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.15;
  text-transform: uppercase;
}
.program-badge__loc {
  font-size: 10.5px;
  color: var(--slate);
  margin-top: 3px;
}

/* Sarachek Biography CTA Portrait Cubby */
.sarachek-bio-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.sarachek-bio-cta__main {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1 1 540px;
}
.sarachek-bio-cta__avatar {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow:
    0 0 0 4px rgba(240, 165, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.35);
  background: var(--navy);
}
.sarachek-bio-cta__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
@media (max-width: 680px) {
  .sarachek-bio-cta__main {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .sarachek-bio-cta__avatar {
    width: 76px;
    height: 76px;
  }
}

/* Broadcast & Media Hub */
.broadcast-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: stretch;
  margin-top: 28px;
}
.broadcast-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.broadcast-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 20px 18px;
  transition: background 0.15s;
}
.broadcast-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(30, 139, 225, 0.35);
}
.broadcast-card__icon {
  font-size: 22px;
  margin-bottom: 8px;
}
.broadcast-card__icon {
  display: inline-flex;
  color: var(--blue-bright);
  margin-bottom: 10px;
}
.broadcast-card__icon svg {
  width: 22px;
  height: 22px;
}
.broadcast-card h4 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.broadcast-card p {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}
.broadcast-media-card {
  background:
    linear-gradient(135deg, rgba(18, 109, 182, 0.28), rgba(11, 14, 22, 0.92)),
    #171c28;
  border: 1px solid rgba(30, 139, 225, 0.38);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -16px rgba(11, 14, 22, 0.6);
}
.broadcast-media-card__play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #cc0000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 0 0 8px rgba(204, 0, 0, 0.25);
  margin-bottom: 18px;
}
.broadcast-media-card h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 8px;
}
.broadcast-media-card p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Responsive Rules */
@media (max-width: 1024px) {
  .sarachek-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
  .tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .legacy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .broadcast-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .sarachek-facts {
    grid-template-columns: 1fr 1fr;
  }
  .sarachek-timeline {
    grid-template-columns: 1fr;
  }
  .tier-grid {
    grid-template-columns: 1fr;
  }
  .legacy-grid {
    grid-template-columns: 1fr;
  }
  .broadcast-features {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .sarachek-facts {
    grid-template-columns: 1fr;
  }
}

/* ---- Logo sizing & visibility on dark backgrounds ---- */
.brand__logo {
  height: 36px !important;
  max-width: 190px;
  object-fit: contain;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
}
.brand--foot {
  display: inline-block;
  margin-bottom: 12px;
}
.brand__logo--foot {
  height: 34px !important;
  max-width: 180px;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.bug__logo {
  height: 22px;
  max-width: 120px;
  object-fit: contain;
  display: block;
}

/* ---- Header navbar layout & mobile breathing room ---- */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}
header.bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(11, 14, 22, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.45);
  transition:
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}
.bar__inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.bar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
@media (min-width: 901px) {
  nav.main {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }
  .bar__actions {
    margin-left: 12px;
  }
  .bar__actions .hamb {
    display: none !important;
  }
}
@media (max-width: 900px) {
  .bar__inner {
    height: 60px;
    gap: 12px;
  }
  .bar__actions {
    margin-left: auto;
    gap: 10px;
  }
  .bar__actions .live-pill {
    margin-left: 0;
  }
  .bar__actions .hamb {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: 0;
  }
  nav.main.open {
    top: 100%;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(11, 14, 22, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
    padding: 12px 18px 24px;
    gap: 4px;
  }
}
@media (max-width: 480px) {
  .bar__inner {
    padding: 0 14px;
  }
  .brand__logo {
    height: 30px !important;
    max-width: 135px;
    padding: 0 !important;
  }
  .bar__actions .live-pill {
    font-size: 12px;
    padding: 6px 9px;
    gap: 5px;
  }
  .bar__actions .hamb {
    padding: 4px;
  }
}

/* ---- Scores & Articles filters toolbar responsive scrolling ---- */
.filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}
@media (min-width: 768px) {
  .filters {
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 12px 18px;
  }
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.filter-group .filter-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-dim);
}

/* Segmented-pill track: one shared rounded background instead of loose
   floating pills, so Season/Type read as a single toggle control. */
.filter-group .chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  min-width: 0;
}
.filter-group .chips .art-chip {
  border: 0;
  background: transparent;
  padding: 6px 12px;
}
.filter-group .chips .art-chip:hover {
  background: var(--mist);
  transform: none;
}
.filter-group .chips .art-chip.active {
  background: var(--blue);
  box-shadow: none;
}
.filter-group .chips .art-chip-count {
  background: rgba(11, 14, 22, 0.06);
}
.filter-group .chips .art-chip.active .art-chip-count {
  background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 768px) {
  .filter-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
  }
  .filter-group .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
      to right,
      #000 calc(100% - 28px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 calc(100% - 28px),
      transparent 100%
    );
  }
  .filter-group .chips::-webkit-scrollbar {
    display: none;
  }
  .filter-group .chips .art-chip {
    flex-shrink: 0;
  }
  .art-search-wrap {
    max-width: 100%;
  }
  .art-categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  .art-chip {
    flex-shrink: 0;
  }
}

/* Scores page: keep the two header links as a compact row instead of
   stacking into full-width boxes on narrow screens. */
body[data-page="scores"] .sec-head__links {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  flex-wrap: wrap;
}
body[data-page="scores"] .sec-head__sublinks {
  display: flex;
  align-items: center;
  gap: 8px;
}
body[data-page="scores"] .sec-head__links .seemore,
body[data-page="scores"] .sec-head__links .seemore--cal,
.upcoming-sec .sec-head__links .seemore,
.upcoming-sec .sec-head__links .seemore--cal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 6px 14px;
  min-height: 36px;
  height: 36px;
  border-radius: 7px;
  box-sizing: border-box;
  text-decoration: none;
  line-height: 1;
  transition: all 0.15s ease;
}
body[data-page="scores"] .sec-head__links .seemore {
  width: auto;
  border-color: var(--slate-dim, #9aa4b2);
}
button.seemore {
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Scores page: bigger team-badge logos on each scoreboard card (set via
   teamBadgeHtml()'s size arg in scores.js) read as cramped at the site's
   default row spacing, so the row and badge-to-name gap grow to match —
   scoped to this page so the Sarachek/homepage cards sharing .grow/.gteam
   keep their original compact spacing. The horizontal padding also
   insets the winning row's highlight background from the card edge, so
   it doesn't hug the logo. */
body[data-page="scores"] .grow {
  padding: 10px 0 10px 14px;
  gap: 10px;
}
body[data-page="scores"] .gteam {
  gap: 10px;
}

@media (max-width: 640px) {
  body[data-page="scores"] .sec-head,
  .upcoming-sec .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }
  body[data-page="scores"] .sec-head__links,
  .upcoming-sec .sec-head__links {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  body[data-page="scores"] .sec-head__links .seemore--cal,
  .upcoming-sec .sec-head__links .seemore--cal {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 8px 12px;
    font-size: 12px;
    background: var(--blue-wash);
    border-color: var(--blue);
    color: var(--blue);
    border-radius: 7px;
    min-height: 38px;
    height: 38px;
    box-sizing: border-box;
  }
  .upcoming-sec .sec-head__links .seemore:not(.seemore--cal) {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 8px 12px;
    font-size: 12px;
    min-height: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  body[data-page="scores"] .sec-head__sublinks {
    display: flex;
    gap: 8px;
    width: 100%;
  }
  body[data-page="scores"] .sec-head__sublinks .seemore {
    flex: 1;
    text-align: center;
    justify-content: center;
    padding: 8px 12px;
    font-size: 12px;
    min-height: 38px;
    height: 38px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
}

@media (max-width: 520px) {
  .gcard__foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }
  .gcard__info {
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-start;
    font-size: 12px;
    min-width: 0;
  }
  .gcard__actions {
    width: auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
  }
  .gcard-cal-pill,
  .gstats,
  .gwatch {
    min-height: 28px;
    height: 28px;
  }
  .modal {
    padding: 20px 16px;
    width: calc(100% - 24px);
    margin: 12px;
  }
  .modal__actions {
    flex-direction: column;
    gap: 8px;
  }
  .modal__actions .btn {
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
    min-height: 42px;
  }
}
@media (max-width: 480px) {
  .games {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .gcard {
    padding: 14px;
  }
  .hero h1 {
    font-size: clamp(38px, 12vw, 56px);
    line-height: 1.15;
  }
  .hero__grid {
    padding: 40px 14px 24px;
  }
  /* Recent results mobile refinement (<480px) */
  .bug-wrap,
  .bug {
    min-width: 0;
    max-width: 100%;
  }
  .bug__top,
  .bug__foot {
    padding-left: 12px;
    padding-right: 12px;
  }
  .res__row {
    grid-template-columns: auto 44px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 11px 12px;
  }
  .res__badge {
    width: 22px;
    height: 22px;
    font-size: 13px;
  }
  .res__date {
    font-size: 11px;
  }
  .res__opp .loc {
    font-size: 10px;
    margin-right: 4px;
  }
  .res__opp .nm {
    font-size: 15px;
  }
  .res__score {
    font-size: 18px;
  }
  .res__score .win::after {
    width: 4px;
    height: 4px;
    margin-left: 3px;
  }
}

/* ============================================================
   Articles Page V2 Styles
   ============================================================ */
.sec-head h1 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  margin: 0;
}

/* Scope Selector Bar (All Coverage / YU Maccabees / Sarachek Tournament) */
.art-scope-bar {
  display: inline-flex;
  background: var(--paper);
  border: 1.5px solid var(--line);
  padding: 5px;
  border-radius: 999px;
  margin: 18px 0 24px;
  box-shadow: 0 2px 10px -2px rgba(11, 14, 22, 0.07);
  gap: 6px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.art-scope-btn {
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.art-scope-btn:hover {
  color: var(--ink);
  background: var(--mist);
}

/* All Coverage button active: Sleek Ink / Dark Navy with vibrant subtle border */
.art-scope-btn[data-scope="all"].active {
  background: var(--ink);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(11, 14, 22, 0.32);
}

/* YU Maccabees button active: MacsLive Royal Blue */
.art-scope-btn[data-scope="maccabees"].active,
.art-scope-btn.active:not([data-scope="all"]):not([data-scope="sarachek"]) {
  background: var(--blue);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px rgba(18, 109, 182, 0.35);
}

/* Sarachek Tournament button active: Vibrant Amber / Gold */
.art-scope-btn[data-scope="sarachek"].active {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
  color: #fff;
  border-color: rgba(254, 243, 199, 0.25);
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35);
}

/* Scope Badges on Article Cards */
.art-scope-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.art-scope-badge--yu {
  background: #0d4e83;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 6px rgba(13, 78, 131, 0.25);
}
.art-scope-badge--sarachek {
  background: #b45309;
  color: #ffffff;
  border: 1px solid rgba(254, 243, 199, 0.4);
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.25);
}
.art-card--sarachek {
  border-top: 3px solid #f59e0b;
}
.art-card--sarachek:hover {
  border-color: #d97706;
  box-shadow: 0 14px 28px -15px rgba(217, 119, 6, 0.3);
}
.feat-art--sarachek {
  border-left: 4px solid #f59e0b;
}

.art-toolbar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px -6px rgba(11, 14, 22, 0.06);
}

.art-toolbar__top {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 768px) {
  .art-toolbar__top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.art-search-wrap {
  position: relative;
  max-width: 440px;
  width: 100%;
}
.art-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-dim);
  pointer-events: none;
}
.art-search-input {
  width: 100%;
  padding: 10px 36px 10px 38px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--mist);
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  transition: all 0.15s ease;
}
.art-search-input:focus {
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}
.art-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--slate-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.art-search-clear:hover {
  color: var(--ink);
}

.art-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.art-select-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.art-select-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-dim);
  white-space: nowrap;
}
.art-select {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--mist);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
select.art-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--mist);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  line-height: 1.2;
}
.art-select:focus {
  border-color: var(--blue);
}

/* Season and Author fuzzy-find combo boxes */
.art-season-group,
.art-author-group {
  position: relative;
}
.art-season-combo,
.art-author-combo {
  position: relative;
}
.art-season-input,
.art-author-input {
  padding-right: 28px;
  cursor: text;
}
.art-season-input {
  width: 140px;
  max-width: 100%;
}
.art-author-input {
  width: 168px;
  max-width: 100%;
}
@media (max-width: 768px) {
  .art-select,
  select.art-select,
  .art-search-input,
  .art-season-input,
  .art-author-input {
    font-size: 16px;
  }
}
@media (max-width: 540px) {
  .art-season-group,
  .art-author-group,
  .art-select-group {
    flex: 1 1 calc(50% - 6px);
    min-width: 130px;
    box-sizing: border-box;
  }
  .art-season-combo,
  .art-author-combo {
    flex: 1;
    min-width: 0;
    width: 100%;
  }
  .art-season-input,
  .art-author-input {
    width: 100%;
    box-sizing: border-box;
  }
  .art-select-group select.art-select {
    flex: 1;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .art-select-group .art-select-wrap {
    flex: 1;
    min-width: 0;
    width: 100%;
  }
  .art-author-results {
    left: auto;
    right: 0;
    max-width: calc(100vw - 32px);
  }
}
@media (max-width: 380px) {
  .art-toolbar__controls {
    gap: 8px;
  }
  .art-season-group,
  .art-author-group,
  .art-select-group {
    flex: 1 1 100%;
    min-width: 100%;
    width: 100%;
  }
  .art-season-results,
  .art-author-results {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
  }
}
.art-combo-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-dim);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.art-season-combo.is-open .art-combo-chevron,
.art-author-combo.is-open .art-combo-chevron {
  transform: translateY(-50%) rotate(180deg);
}
/* When a selection is active (clear button visible), hide the chevron */
.art-season-combo.has-clear .art-combo-chevron,
.art-author-combo.has-clear .art-combo-chevron {
  display: none;
}
.art-season-clear,
.art-author-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--slate-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  z-index: 2;
}
.art-season-clear:hover,
.art-author-clear:hover {
  color: var(--ink);
}

/* Sort / Show selects: same combo-box look as Season/Author, without fuzzy find */
.art-select-wrap {
  position: relative;
}
.art-select-wrap select.art-select {
  background-image: none;
  background-color: var(--mist);
  border-radius: 8px;
  padding-right: 28px;
  line-height: 1.2;
}
.art-select-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-dim);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-season-results,
.art-author-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 190px;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px -8px rgba(11, 14, 22, 0.18);
  z-index: 20;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--blue) var(--mist);
}
.art-season-results::-webkit-scrollbar,
.art-author-results::-webkit-scrollbar {
  width: 6px;
}
.art-season-results::-webkit-scrollbar-track,
.art-author-results::-webkit-scrollbar-track {
  background: var(--mist);
  border-radius: 999px;
}
.art-season-results::-webkit-scrollbar-thumb,
.art-author-results::-webkit-scrollbar-thumb {
  background: var(--blue);
  border-radius: 999px;
}
.art-season-result,
.art-author-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.art-season-result:hover,
.art-season-result.is-active,
.art-author-result:hover,
.art-author-result.is-active {
  background: var(--blue-wash);
  color: var(--blue-deep);
}
.art-season-result span,
.art-author-result span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--slate-dim);
}
.art-season-result:hover span,
.art-season-result.is-active span,
.art-author-result:hover span,
.art-author-result.is-active span {
  color: var(--blue);
}
.art-season-empty,
.art-author-empty {
  padding: 10px;
  font-size: 13px;
  color: var(--slate-dim);
}

.art-categories-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.art-categories-row[hidden] {
  display: none !important;
}
.art-categories-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-dim);
  flex-shrink: 0;
}
.art-categories {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 540px) {
  .art-categories {
    min-height: 68px;
    align-content: flex-start;
  }
}
.art-chip {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--mist);
  color: var(--slate);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.art-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}
.art-chip.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 3px 10px rgba(18, 109, 182, 0.25);
}
.art-chip-count {
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.08);
}
.art-chip.active .art-chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Category & Tag badges */
.art__type {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
}
.art__type.recap {
  color: #15833f;
  background: #e7f6ec;
  border: 1px solid #c3e6cb;
}
.art__type.preview {
  color: #126db6;
  background: #e8f2fa;
  border: 1px solid #bcdbf3;
}
.art__type.oped {
  color: #7a3fb5;
  background: #f1e9fa;
  border: 1px solid #e0cff5;
}
.art__type.sarachek {
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
}
.art__type.feature {
  color: #0369a1;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
}

.art-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 3px 7px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--slate);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.art-tag.sarachek {
  color: #b45309;
  background: #fffbeb;
  border-color: #fde68a;
}
.art-tag.preview {
  color: #126db6;
  background: #f0f7fc;
  border-color: #bcdbf3;
}
.art-tag.recap {
  color: #15833f;
  background: #f0fdf4;
  border-color: #c3e6cb;
}
.art-tag.oped {
  color: #7a3fb5;
  background: #fbf7fe;
  border-color: #e0cff5;
}
.art-tag.feature {
  color: #0369a1;
  background: #f0f9ff;
  border-color: #bae6fd;
}

.art-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  z-index: 2;
}

/* Featured / Spotlight Story Card */
.featured-story-slot {
  margin-bottom: 32px;
}
.feat-art {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px -15px rgba(11, 14, 22, 0.1);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
@media (min-width: 860px) {
  .feat-art {
    grid-template-columns: 1.15fr 1fr;
    height: 380px;
    max-height: 380px;
  }
}
.feat-art:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(18, 109, 182, 0.2);
}
.feat-art__media {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  background: var(--ink);
}
.feat-art__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.feat-art:hover .feat-art__media img {
  transform: scale(1.03);
}
.feat-art__media--grad {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a2e52 0%, #126db6 100%);
}
.feat-art__watermark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 54px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.12);
  user-select: none;
}
.feat-art__body {
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feat-art__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.feat-art__badge {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-wash);
  padding: 3px 8px;
  border-radius: 4px;
}
.feat-art__season {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-dim);
}
.feat-art__meta-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.feat-art__readtime,
.feat-art__views {
  font-size: 12px;
  color: var(--slate-dim);
  font-weight: 500;
}
.feat-art__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feat-art__title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s;
}
.feat-art__title a:hover {
  color: var(--blue);
}
.feat-art__excerpt {
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feat-art__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.feat-art__author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.art-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.art-avatar--sm {
  width: 26px;
  height: 26px;
  font-size: 10px;
}
.art-author-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.2;
}
.art-author-date {
  font-size: 12px;
  color: var(--slate-dim);
}
.btn--blue {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13.5px;
  transition: background 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn--blue:hover {
  background: var(--blue-deep);
  color: #fff;
}

/* Stats bar & Filter pills */
.art-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.art-stats-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.art-count-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-dim);
}
.art-active-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.art-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue-wash);
  color: var(--blue-deep);
  border: 1px solid rgba(18, 109, 182, 0.3);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(11, 14, 22, 0.04);
  transition: all 0.15s ease;
}
.art-filter-pill b {
  font-weight: 700;
}
.art-filter-pill--scope {
  font-weight: 600;
}
.art-filter-pill--maccabees {
  background: #e8f2fa;
  border-color: #bcdbf3;
  color: #0d4e83;
}
.art-filter-pill--sarachek {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}
.art-filter-pill__del {
  background: rgba(0, 0, 0, 0.06);
  border: none;
  color: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: all 0.15s ease;
  margin-left: 2px;
}
.art-filter-pill__del:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.15);
  transform: scale(1.1);
}
.art-reset-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: underline;
  transition: color 0.15s ease;
}
.art-reset-btn:hover {
  color: var(--blue-deep);
}

/* Articles Grid V2 */
.arts-grid-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 680px) {
  .arts-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .arts-grid-v2 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.art-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.art-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 14px 28px -15px rgba(18, 109, 182, 0.25);
}
.art-card__media-link {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--mist);
  text-decoration: none;
}
.art-card__img {
  width: 100%;
  height: 100%;
}
.art-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.art-card:hover .art-card__img img {
  transform: scale(1.04);
}
.art-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #121c2e, #1b3563);
}
.art-card__content {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.art-card__meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--slate-dim);
  margin-bottom: 8px;
  gap: 8px;
}
.art-card__season {
  font-weight: 600;
  color: var(--slate);
  background: var(--mist);
  padding: 1px 6px;
  border-radius: 4px;
}
.art-card__meta-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.art-card__readtime,
.art-card__views {
  white-space: nowrap;
}
.art-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.art-card__title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s;
}
.art-card:hover .art-card__title a {
  color: var(--blue);
}
.art-card__excerpt {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate);
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.art-card__byline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.art-card__author-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate);
}
.art-card__action {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Pagination Controls */
.art-pagination-wrap {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
}
.art-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
@media (min-width: 640px) {
  .art-pagination {
    flex-direction: row;
    justify-content: space-between;
  }
}
.art-page-summary {
  font-size: 13.5px;
  color: var(--slate-dim);
}
.art-page-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.art-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}
.art-page-btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--slate);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.art-page-btn:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-wash);
}
.art-page-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 3px 8px rgba(18, 109, 182, 0.25);
}
.art-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.art-page-prev,
.art-page-next {
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 0 12px;
}
.art-page-dots {
  padding: 0 4px;
  color: var(--slate-dim);
  font-weight: 700;
}

/* Article Reader page badges header row */
.art-tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.art-readtime-pill,
.art-season-pill,
.art-views-pill {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate-dim);
  background: var(--mist);
  padding: 3px 8px;
  border-radius: 4px;
}

/* Empty & Loading state */
.art-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 20px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 14px;
}
.art-empty-icon {
  margin-bottom: 12px;
  color: var(--slate-dim);
}
.art-empty-icon svg {
  width: 40px;
  height: 40px;
}
.art-empty-state h3 {
  font-family: var(--display);
  font-size: 24px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.art-empty-state p {
  color: var(--slate);
  font-size: 14px;
  margin-bottom: 20px;
}
.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  font-weight: 700;
  border-radius: 8px;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn--ghost:hover {
  background: var(--blue);
  color: #fff;
}
.arts-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px;
  color: var(--slate);
  font-size: 16px;
}

/* ============================================================
   Article Reader Page V2 Styles
   ============================================================ */
.art-reader-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.art-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--blue-wash);
  transition: all 0.15s;
}
.art-back-btn:hover {
  background: var(--blue);
  color: #fff;
}
.art-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--slate);
  cursor: pointer;
  transition: all 0.15s;
}
.art-share-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
/* Home Page Article Cards with Cover Images */
.art--with-img {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  transition:
    transform 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.art--with-img:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 14px 28px -15px rgba(18, 109, 182, 0.25);
}
.art__img {
  width: 100%;
  height: 180px;
  position: relative;
  overflow: hidden;
  background: var(--mist);
}
.art__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.art--with-img:hover .art__img img {
  transform: scale(1.05);
}
.art__img--placeholder,
.art__img--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #121c2e, #1b3563);
}
/* Watermark-style monogram for article cards with no cover image — same
   treatment as .feat-art__watermark, used wherever an emoji placeholder
   used to sit (see js/home.js, js/articles.js). */
.art-card__tag-icon {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.22);
  user-select: none;
}
.art__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.art--with-img .art__type {
  align-self: flex-start;
  margin-bottom: 8px;
}

.art-hero-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 28px;
  background: var(--mist);
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.15);
}
.art-hero-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.art-body-fig {
  margin: 32px 0;
  padding: 0;
  width: 100%;
  display: block;
}
.art-body-fig img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 10px;
  display: block !important;
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.12);
  object-fit: contain;
}
.art-body-fig figcaption {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate-dim);
  margin-top: 10px;
  text-align: center;
  font-style: italic;
}
.art-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 32px 0;
}
.art-gallery-grid .art-body-fig {
  margin: 0;
}
.art-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  margin: 32px 0;
  background: #000;
}
.art-video-wrap iframe,
.art-video-wrap video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.article-content {
  font-family: "Inter", sans-serif;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #333;
}
.article-content img {
  position: static !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 8px;
  margin: 20px 0;
}
.article-content figure {
  margin: 24px 0;
  max-width: 100%;
}
.article-content figcaption {
  font-size: 13.5px;
  color: var(--slate-dim);
  margin-top: 8px;
  text-align: center;
  font-style: italic;
}
.art-byline-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.art-byline-bar .art-avatar {
  width: 44px;
  height: 44px;
  font-size: 15px;
}
.art-byline-info {
  display: flex;
  flex-direction: column;
}
.art-byline-author {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.art-byline-sub {
  font-size: 13px;
  color: var(--slate-dim);
}
.art-related-section {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 2px solid var(--line);
}
.art-related-title {
  font-family: var(--display);
  font-size: 26px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* ---- Leadership Anchor on About Page ---- */
#leadership {
  scroll-margin-top: 72px;
}

/* ============================================================
   Navigation Dropdown Menu (Desktop & Mobile)
   ============================================================ */
.nav-item--dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  padding: 8px 12px;
  border-radius: 6px;
  transition:
    color 0.15s,
    background 0.15s;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.nav-dropdown-trigger.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

.nav-dropdown-trigger.active::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--blue-bright);
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
}

.dropdown-chevron {
  width: 18px;
  height: 18px;
  transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1), color 0.1s ease;
  color: rgba(255, 255, 255, 0.82);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin: -4px -4px -4px 3px;
  touch-action: manipulation;
}

.nav-item--dropdown:hover .dropdown-chevron,
.nav-item--dropdown.is-open .dropdown-chevron {
  transform: rotate(180deg);
  color: #fff;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 280px;
  background: #111622;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 38px -10px rgba(0, 0, 0, 0.65);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 0.1s ease,
    transform 0.1s ease,
    visibility 0.1s;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

@media (min-width: 901px) {
  .nav-item--dropdown:hover .dropdown-menu,
  .nav-item--dropdown:focus-within .dropdown-menu,
  .nav-item--dropdown.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.dropdown-link {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}

.dropdown-link:hover,
.dropdown-link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

.dropdown-link.active {
  background: rgba(18, 109, 182, 0.22);
  border-left: 3px solid var(--blue-bright);
}

.dropdown-link__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
}

.dropdown-link.active .dropdown-link__title {
  color: var(--blue-bright);
}

.dropdown-link__desc {
  font-size: 12px;
  color: var(--slate-dim);
  margin-top: 2px;
  line-height: 1.35;
}

@media (max-width: 900px) {
  nav.main.open .tab {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
    font-size: 17px;
    padding: 12px 14px;
    border-radius: 8px;
  }
  nav.main.open .nav-item--dropdown {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  nav.main.open .nav-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
    padding: 12px 14px;
    text-align: left;
    border-radius: 8px;
  }
  nav.main.open .dropdown-chevron {
    width: 24px;
    height: 24px;
    color: #ffffff;
    padding: 6px;
    margin: -6px -2px -6px 0;
    touch-action: manipulation;
  }
  nav.main.open .nav-dropdown-trigger.active::after {
    display: none;
  }
  nav.main.open .dropdown-menu {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    margin: 4px 0 8px 0;
    padding: 6px;
    box-shadow: none;
    gap: 2px;
  }
  nav.main.open .nav-item--dropdown.is-open .dropdown-menu {
    display: flex;
    flex-direction: column;
  }
  nav.main.open .dropdown-link {
    padding: 10px 14px;
    text-align: left;
    border-radius: 6px;
  }
}

/* ============================================================
   Story & Biography Page Elements (About, Leadership, Sarachek)
   ============================================================ */
.story-header {
  margin-bottom: 32px;
}
.story-header h1 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.15;
  margin: 10px 0 16px;
}
.story-lead {
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 46em;
  font-weight: 500;
}
.story-body-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--slate);
  margin-bottom: 24px;
  max-width: 48em;
}
.story-body-text p + p {
  margin-top: 16px;
}
.quote-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 12px;
  padding: 26px 30px;
  margin: 32px 0;
  box-shadow: 0 8px 24px -12px rgba(18, 109, 182, 0.15);
}
.quote-card blockquote {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
  font-weight: 500;
}
.quote-card cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-deep);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--display);
}
.quote-card cite span {
  font-weight: 400;
  color: var(--slate);
  text-transform: none;
  font-family: var(--body);
  display: block;
  font-size: 12.5px;
  margin-top: 2px;
}

/* Feature 3-grid */
/* An editorial numbered list instead of 3 identical bordered boxes —
   the "01/02/03" tags were already there, so lean into that as a big
   ghost numeral instead of a small label repeated 3 times over. */
.story-grid {
  display: flex;
  flex-direction: column;
  margin: 36px 0;
  border-top: 1px solid var(--line);
}
.story-card {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 28px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.story-card:hover {
  background: var(--mist);
}
.story-card__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  color: var(--line);
  flex-shrink: 0;
  width: 76px;
}
.story-card__body {
  min-width: 0;
}
.story-card__tag {
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
  display: block;
}
.story-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 1.15;
}
.story-card p {
  color: var(--slate);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 60ch;
}
@media (max-width: 560px) {
  .story-card {
    gap: 16px;
  }
  .story-card__num {
    font-size: 38px;
    width: 48px;
  }
}

/* Sponsors page: one honest "nothing listed yet" note instead of a wall
   of empty dashed placeholder tiles each saying "Your logo here" — that
   read as an unfinished template rather than a real page. */
.sponsor-slate {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--mist);
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 36px;
}
.sponsor-slate h4 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 6px;
}
.sponsor-slate p {
  color: var(--slate-dim);
  font-size: 13.5px;
  max-width: 46ch;
  margin: 0 auto;
  line-height: 1.5;
}

/* Milestone / Stats Banner */
.milestones-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 32px 0 44px;
}
.milestone-item {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
}
.milestone-item .num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  color: var(--blue);
}
.milestone-item .label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 6px;
}
.milestone-item .sub {
  font-size: 12px;
  color: var(--slate);
  margin-top: 3px;
  line-height: 1.4;
}

/* Nav Sub-Cards (linking to siblings) */
.sub-nav-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.sub-nav-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 24px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.sub-nav-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(18, 109, 182, 0.35);
  background: var(--blue-wash);
}
.sub-nav-card__text h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--ink);
}
.sub-nav-card:hover .sub-nav-card__text h4 {
  color: var(--blue);
}
.sub-nav-card__text p {
  font-size: 13px;
  color: var(--slate);
  margin-top: 3px;
}
.sub-nav-card__arr {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  color: var(--blue);
  transition: transform 0.15s;
}
.sub-nav-card:hover .sub-nav-card__arr {
  transform: translateX(4px);
}

/* Shared "Explore MacsLive" cross-link section (js/cross-links.js).
   .cross-links--dark is used on red-sarachek.html's dark theme. */
.cross-links {
  display: block;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.cross-links__heading {
  font-family: var(--display);
  font-size: 28px;
  text-transform: uppercase;
  margin: 6px 0 18px;
  color: var(--ink);
}
.cross-links--dark {
  border-top-color: var(--red-border, rgba(255, 255, 255, 0.1));
}
.cross-links--dark .eyebrow {
  color: var(--red-accent, #ff9d42);
}
.cross-links--dark .cross-links__heading {
  color: #ffffff;
}

/* ============================================================
   Red Sarachek Commemorative Legacy Showcase & Biography
   ============================================================ */
body[data-page="red-sarachek"] {
  /* Page-scoped design tokens for the dark "commemorative legacy" theme.
     Kept off the global :root since this gold/navy accent palette only
     applies here; everything below reads these instead of raw hex so
     the palette lives in one place, matching the rest of the site's
     token-driven approach (see :root in base.css). */
  --red-gold-pale: #fde68a;
  --red-gold-bright: #fcd34d;
  --red-gold: #f59e0b;
  --red-gold-deep: #d97706;
  --red-gold-dark: #b45309;
  --red-accent: #ff9d42;
  --red-fg: #f3f4f6;
  --red-subtle: #d1d5db;
  --red-muted: #9ca3af;
  --red-surface: #131926;
  --red-surface-2: #0f1420;
  --red-border: rgba(255, 255, 255, 0.1);
  --red-border-soft: rgba(255, 255, 255, 0.06);

  background: var(--ink);
  color: var(--red-fg);
}

body[data-page="red-sarachek"] main {
  background: var(--ink);
}

.red-page-wrapper {
  background: var(--ink);
  color: var(--red-fg);
  position: relative;
  overflow: hidden;
}

/* Court lines overlay with warm legacy ambient lighting */
.red-ambient-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.red-ambient-glow-1 {
  position: absolute;
  top: -100px;
  right: -5%;
  width: 750px;
  height: 750px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(217, 119, 6, 0.14) 0%,
    rgba(18, 109, 182, 0.08) 45%,
    transparent 70%
  );
  filter: blur(50px);
}

.red-ambient-glow-2 {
  position: absolute;
  top: 40%;
  left: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(18, 109, 182, 0.12) 0%,
    rgba(217, 119, 6, 0.05) 50%,
    transparent 70%
  );
  filter: blur(60px);
}

.red-ambient-glow-3 {
  position: absolute;
  bottom: 5%;
  right: -5%;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(217, 119, 6, 0.1) 0%,
    rgba(18, 109, 182, 0.08) 50%,
    transparent 70%
  );
  filter: blur(50px);
}

.red-ambient-court {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  pointer-events: none;
}

.red-ambient-court svg {
  position: absolute;
  right: -5%;
  top: 60px;
  width: 900px;
  max-width: 95%;
  stroke: rgba(217, 119, 6, 0.35);
  fill: none;
  stroke-width: 1.5;
}

/* Back breadcrumb navigation */
.red-top-bar {
  position: relative;
  z-index: 2;
  padding: 24px 0 8px;
}

.red-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-subtle);
  background: var(--red-border-soft);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 7px 15px;
  border-radius: 999px;
  transition: all 0.2s ease;
}

.red-back-link:hover {
  color: var(--red-gold-bright);
  background: rgba(217, 119, 6, 0.15);
  border-color: rgba(217, 119, 6, 0.4);
  transform: translateX(-3px);
}

.red-back-link svg {
  transition: transform 0.2s ease;
}

.red-back-link:hover svg {
  transform: translateX(-2px);
}

/* Commemorative Hero */
.red-bio-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 380px;
  gap: 48px;
  align-items: center;
  padding: 32px 0 48px;
}

@media (min-width: 1200px) {
  .red-bio-hero {
    grid-template-columns: 1.2fr 420px;
    gap: 64px;
  }
}

@media (max-width: 960px) {
  .red-bio-hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 20px 0 36px;
  }
}

.red-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(
    135deg,
    rgba(217, 119, 6, 0.22) 0%,
    rgba(18, 109, 182, 0.2) 100%
  );
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: var(--red-gold-pale);
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  box-shadow: 0 0 20px -4px rgba(217, 119, 6, 0.3);
}

.red-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red-gold);
  box-shadow: 0 0 10px var(--red-gold);
}

.red-hero-title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(42px, 6.5vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 8px 0 18px;
}

.red-hero-title span {
  background: linear-gradient(
    135deg,
    var(--red-gold-pale) 0%,
    var(--red-gold) 50%,
    var(--red-accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.red-hero-lead {
  font-size: clamp(16.5px, 2vw, 19.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 400;
  max-width: 44em;
}

.red-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.red-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red-border-soft);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
}

.red-hero-tag strong {
  color: var(--red-gold-bright);
  font-weight: 600;
}

/* Portrait Card in Gold / Navy Frame */
.red-portrait-card {
  background: var(--red-surface);
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 20px 48px -12px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

.red-portrait-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 158, 11, 0.7);
  box-shadow:
    0 28px 56px -14px rgba(0, 0, 0, 0.8),
    0 0 28px -4px rgba(217, 119, 6, 0.3);
}

.red-portrait-card__wrap {
  position: relative;
  overflow: hidden;
  background: #0b0e16;
  aspect-ratio: 3 / 4;
}

.red-portrait-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s ease;
  filter: contrast(1.04) brightness(0.98);
}

.red-portrait-card:hover .red-portrait-card__img {
  transform: scale(1.03);
}

.red-portrait-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: linear-gradient(
    135deg,
    var(--red-gold-dark) 0%,
    var(--red-gold-deep) 100%
  );
  color: #ffffff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(254, 243, 199, 0.4);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.red-portrait-card__caption {
  padding: 20px 22px 22px;
  background: linear-gradient(
    180deg,
    var(--red-surface) 0%,
    var(--red-surface-2) 100%
  );
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.red-portrait-card__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
  line-height: 1.15;
}

.red-portrait-card__sub {
  font-size: 13.5px;
  color: var(--red-muted);
  margin-top: 5px;
  line-height: 1.4;
}

.red-portrait-card__honors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.red-portrait-card__honor {
  font-size: 11px;
  font-weight: 600;
  color: var(--red-gold-bright);
  background: rgba(217, 119, 6, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
}

/* Key Coaching Stats Grid */
.red-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 36px 0 52px;
  position: relative;
  z-index: 2;
}

@media (max-width: 990px) {
  .red-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .red-stats-grid {
    grid-template-columns: 1fr;
  }
}

.red-stat-card {
  background: linear-gradient(180deg, #161d2c 0%, #101522 100%);
  border: 1px solid var(--red-border);
  border-top: 3px solid var(--red-gold-deep);
  border-radius: 14px;
  padding: 24px 22px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.red-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow:
    0 16px 32px -12px rgba(0, 0, 0, 0.7),
    0 0 20px -6px rgba(217, 119, 6, 0.25);
}

.red-stat-card .num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 3.8vw, 44px);
  line-height: 1;
  color: var(--red-gold-bright);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.red-stat-card .num span {
  font-size: 20px;
  color: var(--red-accent);
}

.red-stat-card .label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  margin-top: 10px;
}

.red-stat-card .sub {
  font-size: 13px;
  color: var(--red-muted);
  margin-top: 5px;
  line-height: 1.45;
}

/* Sections on Red Sarachek Page */
.red-content-section {
  position: relative;
  z-index: 2;
  margin: 56px 0;
  padding-top: 40px;
  border-top: 1px solid var(--red-border);
}

.red-section-header {
  margin-bottom: 28px;
}

.red-section-header .eyebrow {
  color: var(--red-gold);
  font-weight: 700;
  letter-spacing: 0.16em;
}

.red-section-header h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0.01em;
  margin: 6px 0 10px;
}

.red-section-header p {
  font-size: 15.5px;
  color: var(--red-muted);
  max-width: 48em;
  line-height: 1.6;
}

/* 6-Node Career Milestone Timeline */
.red-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 32px;
}

@media (max-width: 980px) {
  .red-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .red-timeline {
    grid-template-columns: 1fr;
  }
}

.red-timeline-card {
  background: linear-gradient(180deg, #161d2a 0%, #101520 100%);
  border: 1px solid var(--red-border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.red-timeline-card:hover,
.red-timeline-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.6);
}
.red-timeline-card {
  cursor: pointer;
}
.red-timeline-card__hint {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--red-gold);
  opacity: 0.75;
  margin-top: 8px;
}
.red-timeline-card__more {
  display: none;
  color: var(--red-subtle);
  font-size: 13px;
  line-height: 1.55;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.red-timeline-card.is-expanded .red-timeline-card__more {
  display: block;
}

.red-timeline-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.red-timeline-card__year {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--red-gold-bright);
  background: rgba(217, 119, 6, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 3px 10px;
  border-radius: 6px;
}

.red-timeline-card__step {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-accent);
}

.red-timeline-card h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 10px;
}

.red-timeline-card p {
  color: var(--red-muted);
  font-size: 14px;
  line-height: 1.55;
  flex-grow: 1;
}

.red-timeline-card__badge {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: var(--red-subtle);
  display: flex;
  align-items: center;
  gap: 6px;
}

.red-timeline-card__badge i {
  color: var(--red-gold);
  font-style: normal;
}

/* Legacy & Tactical Innovations Showcase Cards */
.red-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 28px;
}

@media (max-width: 900px) {
  .red-pillars-grid {
    grid-template-columns: 1fr;
  }
}

.red-pillar-card {
  background: linear-gradient(180deg, #141a27 0%, var(--red-surface-2) 100%);
  border: 1px solid var(--red-border);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.red-pillar-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 157, 66, 0.45);
}

.red-pillar-card__icon {
  margin-bottom: 14px;
  display: inline-block;
  color: var(--red-gold);
}
.red-pillar-card__icon svg {
  width: 28px;
  height: 28px;
}

.red-pillar-card h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 10px;
}

.red-pillar-card p {
  color: var(--red-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Commemorative Styled Pull Quotes */
.red-quote-card {
  background:
    linear-gradient(
      135deg,
      rgba(217, 119, 6, 0.12) 0%,
      rgba(18, 109, 182, 0.1) 100%
    ),
    var(--red-surface);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-left: 5px solid var(--red-gold);
  border-radius: 14px;
  padding: 32px 36px;
  margin: 40px 0;
  box-shadow: 0 14px 36px -12px rgba(0, 0, 0, 0.5);
  position: relative;
}

.red-quote-card blockquote {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--red-fg);
  font-style: italic;
  font-weight: 400;
  position: relative;
}

.red-quote-card blockquote::before {
  content: "“";
  font-family: Georgia, serif;
  font-size: 60px;
  line-height: 0;
  position: absolute;
  top: 14px;
  left: -24px;
  color: rgba(245, 158, 11, 0.3);
  pointer-events: none;
}

.red-quote-card cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  color: var(--red-gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--display);
}

.red-quote-card cite span {
  font-weight: 400;
  color: var(--red-muted);
  text-transform: none;
  font-family: var(--body);
  display: block;
  font-size: 13.5px;
  margin-top: 3px;
}

/* Story prose in dark mode */
.red-story-prose {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--red-subtle);
  max-width: 52em;
  margin: 0 auto;
}

.red-story-prose p + p {
  margin-top: 20px;
}

.red-story-prose strong {
  color: #ffffff;
}

/* Sarachek Hub & Bracket Callout Bar */
.red-tournament-banner {
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(217, 119, 6, 0.25) 0%,
      rgba(18, 109, 182, 0.2) 60%
    ),
    #141a28;
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  border-radius: 16px;
  padding: 36px 36px;
  margin: 48px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}

@media (max-width: 860px) {
  .red-tournament-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
  }
}

.red-tournament-banner h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 8px;
}

.red-tournament-banner p {
  color: var(--red-subtle);
  font-size: 15px;
  line-height: 1.55;
  max-width: 520px;
  margin: 0;
}

.red-tournament-banner__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.btn--gold {
  background: linear-gradient(
    135deg,
    var(--red-gold) 0%,
    var(--red-gold-deep) 100%
  );
  color: #0b0e16;
  font-weight: 800;
  border: 1px solid var(--red-gold-bright);
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
}

.btn--gold:hover {
  background: linear-gradient(135deg, #fbbf24 0%, var(--red-gold) 100%);
  color: #0b0e16;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.5);
}

.btn--dark-ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.btn--dark-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Bottom Explore Links on Dark Background */
.red-sub-nav-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--red-surface);
  border: 1px solid var(--red-border);
  border-radius: 12px;
  padding: 20px 24px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.red-sub-nav-card:hover {
  border-color: rgba(255, 157, 66, 0.5);
  background: #192234;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
}

.red-sub-nav-card h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  color: #ffffff;
}

.red-sub-nav-card:hover h4 {
  color: var(--red-accent);
}

.red-sub-nav-card p {
  font-size: 13px;
  color: var(--red-muted);
  margin-top: 3px;
}

.red-sub-nav-card__arr {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  color: var(--red-accent);
  transition: transform 0.15s ease;
}

.red-sub-nav-card:hover .red-sub-nav-card__arr {
  transform: translateX(4px);
}

.sponsor-cta .btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}
.sponsor-cta .btn--ghost:hover {
  border-color: var(--blue-bright);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Footer: Balanced 4-Column Layout & Distinguishable Links
   ============================================================ */
.foot-top {
  display: flex;
  justify-content: space-between;
  gap: 48px 36px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.foot-brand {
  flex: 0 1 290px;
  min-width: 240px;
}

.foot-brand p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 10px;
  max-width: 24em;
}

.foot-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 36px 32px;
  flex: 1 1 660px;
}

.foot-col {
  display: flex;
  flex-direction: column;
}

.foot-col h4 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 14px;
  line-height: 1.2;
}

.foot-col a,
.foot-col .foot-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  padding: 5px 0;
  text-decoration: none;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
  line-height: 1.4;
}

.foot-col a:hover,
.foot-col .foot-link:hover {
  color: #ffffff;
  transform: translateX(2px);
}

/* Mobile & Tablet Responsive Adjustments */
@media (max-width: 1080px) {
  .foot-links {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 32px 28px;
  }
}

@media (max-width: 640px) {
  .foot-top {
    flex-direction: column;
    gap: 36px;
  }

  .foot-brand {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .foot-links {
    grid-template-columns: 1fr;
    gap: 28px;
    width: 100%;
    flex: 1 1 100%;
  }

  .foot-bot {
    flex-direction: column;
    gap: 12px;
  }
}

/* ---- Leadership Bio Modal ---- */
.person[role="button"],
.person:not(.person--open) {
  cursor: pointer;
}
.person:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.leader-modal {
  max-width: 520px;
  width: 100%;
  text-align: center;
  padding: 36px 32px 32px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.leader-modal__av {
  width: 220px;
  height: 250px;
  max-width: 100%;
  border-radius: 16px;
  margin: 0 auto 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px -8px rgba(11, 14, 22, 0.25);
  border: 3px solid #fff;
  background: var(--blue-wash);
  display: grid;
  place-items: center;
}
.leader-modal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.leader-modal__mono {
  font-family: var(--display);
  font-weight: 800;
  font-size: 58px;
  color: var(--blue);
  letter-spacing: 0.02em;
}
.leader-modal h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.leader-modal__role {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--slate);
  margin-top: 6px;
}
.leader-modal--exec .leader-modal__role {
  color: var(--blue);
}
.leader-modal__details {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--slate);
}
.leader-modal__detail-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.leader-modal__detail-item b {
  color: var(--ink);
  font-weight: 600;
}
.leader-modal__bio {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--slate);
  text-align: left;
  word-break: break-word;
}
.leader-modal__bio p {
  margin: 0 0 10px;
}
.leader-modal__bio p:last-child {
  margin-bottom: 0;
}
.leader-modal__bio a {
  color: var(--blue);
  text-decoration: underline;
}

/* ============================================================
   HOMEPAGE UPCOMING GAMES DISPLAY OPTIONS
   ============================================================ */

/* --- Option 1: Tabbed Scorebug --- */
.bug__tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid var(--line-dark);
  padding: 4px;
  gap: 4px;
}
.bug__tab {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.bug__tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.bug__tab.active {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(18, 109, 182, 0.4);
}
/* Fixed-height body so switching between the Upcoming and Recent Results
   tabs never jumps or snaps the card taller/shorter — Upcoming renders up
   to 5 rows (~71px each, ~355px) and Recent Results up to 6 rows (~60px
   each at most widths, but the row's own font-rendering can round up to
   ~60.8px depending on the card's width, so 6 of them can reach ~364px)
   into the same box, and the fade (driven from home.js) softens the
   content swap itself. 370px covers the taller of the two with a few
   pixels to spare. */
.bug__body {
  height: 360px;
  min-height: 360px;
  max-height: 360px;
  opacity: 1;
  transition: opacity 0.18s ease;
  overflow: hidden;
}
.bug__body .res__row {
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  box-sizing: border-box;
}
.bug__body .res__row--upcoming {
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  padding: 11px 18px;
  box-sizing: border-box;
}
.bug__body .res__empty {
  height: 360px;
  min-height: 360px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.res__row--upcoming {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--line-dark);
  color: #fff;
  transition: background 0.15s ease;
}
.res__row--upcoming:first-of-type {
  border-top: 0;
}
.res__row--upcoming:hover {
  background: rgba(255, 255, 255, 0.04);
}
.res__up-datecell {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
  min-height: 100%;
}
.res__up-date {
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  color: var(--blue-bright);
  line-height: 1.1;
  text-transform: uppercase;
}
.res__up-date span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
.res__up-info {
  min-width: 0;
}
.res__up-opp {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.res__up-loc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Time + "Watch" sit side by side (not stacked) specifically so a
   broadcast-linked row is the same height as every other row — a
   second stacked line here used to make that one row ~19px taller
   than its siblings, which is what made the Upcoming tab's own height
   vary game-to-game (see .bug__body's min-height comment). */
.res__up-action {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.res__up-time {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
}
.res__up-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue-bright);
  text-decoration: none;
  white-space: nowrap;
}
.res__up-btn:hover {
  color: #fff;
}

/* Countdown card sits above the Upcoming Games/Season Results panel in the hero */
.bug-wrap {
  min-width: 0;
}
/* The Hero Matchup Center card (.bug) used flat near-black (--ink), which
   read as a harsh, disconnected block next to the countdown card's softer
   navy-tinted glass panel right above it. Match that same navy gradient +
   blue-tinted border so the two stacked cards feel like one system. */
.bug {
  background: linear-gradient(180deg, #141b29 0%, #0d1420 100%);
  border-color: rgba(18, 109, 182, 0.3);
}
.bug-wrap .matchday-card {
  margin-top: 0;
  margin-bottom: 14px;
}

.matchday-card {
  margin-top: 26px;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(19, 25, 38, 0.85);
  border: 1px solid rgba(18, 109, 182, 0.4);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}
.matchday-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(240, 165, 0, 0.12);
  border: 1px solid rgba(240, 165, 0, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
}
.matchday-card__matchup {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 8px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.matchday-card__meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.matchday-card__timer {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.matchday-card__unit {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
  min-width: 52px;
}
.matchday-card__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.matchday-card__lbl {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 3px;
}
.matchday-card__cal {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-bright);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(18, 109, 182, 0.15);
  border: 1px solid rgba(18, 109, 182, 0.35);
  border-radius: 6px;
  transition: all 0.15s ease;
}
.matchday-card__cal:hover {
  background: var(--blue);
  color: #fff;
}

/* --- Option 2: Dedicated Upcoming Grid Section --- */
.upcoming-sec {
  padding: 48px 0 24px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.upcoming-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
@media (max-width: 900px) {
  .upcoming-grid {
    grid-template-columns: 1fr;
  }
}
.up-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}
.up-card:hover {
  transform: translateY(-3px);
  border-color: rgba(18, 109, 182, 0.4);
  box-shadow: 0 12px 28px -8px rgba(11, 14, 22, 0.1);
}
.up-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
/* When there's no boxed game-type tag (most cards), the date stops looking
   "lonely in the corner" by centering in the top row. */
.up-card__top:not(:has(.up-card__round)) {
  justify-content: center;
}
.up-card__top:not(:has(.up-card__round)) .up-card__tip {
  margin-left: 0;
  text-align: center;
}
/* Boxed game-type tags (Skyline / Skyline Championship / Non-Conference /
   Exhibition / NCAA Tournament / Sarachek) — one modular class applied via
   typeTagClass() in helpers.js, reused by schedule cards (.gcard__round),
   the homepage "Next Up for the Macs" grid (.up-card__round), the
   countdown card and the Sarachek page. Self-contained box styling so it
   doesn't depend on whatever legacy class it's paired with. */
.type-tag,
.gcard__round.type-tag,
.up-card__round.type-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid transparent;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Boxed game-type tag: hidden rule DISABLED so all game types show their tag again.
   Previously this block set `display: none !important` for every non-Skyline tag.
   Kept here (commented) for reference / easy re-enable. */
/*
.type-tag:not(.type-tag--skyline):not(.type-tag--skyline-championship):not(.type-tag--sarachek),
.gcard__round.type-tag:not(.type-tag--skyline):not(.type-tag--skyline-championship):not(.type-tag--sarachek),
.up-card__round.type-tag:not(.type-tag--skyline):not(.type-tag--skyline-championship):not(.type-tag--sarachek) {
  display: none !important;
}
*/

.gcard__top .chip,
.gcard__top .chip--upcoming,
.gcard__top .chip--final,
.gcard__top .chip--live {
  margin-left: auto;
}

.up-card__top .up-card__tip {
  margin-left: auto;
}

.matchday-card .matchday-card__badge {
  margin-left: auto;
}
.type-tag--default {
  color: var(--slate);
  background: var(--mist);
  border-color: var(--line);
}
.type-tag--skyline {
  color: var(--blue-deep);
  background: var(--blue-wash);
  border-color: rgba(18, 109, 182, 0.25);
}
.type-tag--skyline-championship,
.type-tag--sarachek {
  color: #92400e;
  background: #fef3c7;
  border-color: #fde68a;
}
.type-tag--ncaa {
  color: #6d28d9;
  background: #ede9fe;
  border-color: #ddd6fe;
}
.type-tag--nonconference {
  color: #c2410c;
  background: #ffedd5;
  border-color: #fed7aa;
}
.type-tag--sikma {
  color: var(--green);
  background: var(--green-wash);
  border-color: rgba(27, 127, 76, 0.25);
}
.type-tag--exhibition {
  color: var(--slate);
  background: transparent;
  border-color: var(--line);
  border-style: dashed;
}
/* Dark-card context (countdown card, hero "Upcoming Games"/"Season Results"
   panel): lighter tints so the box stays crisp against a dark background.
   Skyline keeps its own blue tint here too, rather than collapsing into
   the same neutral overlay as the default tag. Sikma Invitational is
   green (Illinois Wesleyan's own school color, as tournament host) and
   Non-Conference is orange, kept apart from every other category's hue
   (blue Skyline, gold Skyline Championship/Sarachek in light mode,
   purple NCAA, green Sikma). */
.matchday-card .type-tag--default,
.bug .type-tag--default {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}
.matchday-card .type-tag--skyline,
.bug .type-tag--skyline {
  color: var(--blue-bright);
  background: rgba(30, 139, 225, 0.16);
  border-color: rgba(30, 139, 225, 0.4);
}
.matchday-card .type-tag--nonconference,
.bug .type-tag--nonconference {
  color: #fb923c;
  background: rgba(249, 115, 22, 0.16);
  border-color: rgba(249, 115, 22, 0.4);
}
.matchday-card .type-tag--sikma,
.bug .type-tag--sikma {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.35);
}
.matchday-card .type-tag--exhibition,
.bug .type-tag--exhibition {
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  border-style: dashed;
}
.matchday-card .type-tag--skyline-championship,
.bug .type-tag--skyline-championship,
.matchday-card .type-tag--sarachek,
.bug .type-tag--sarachek {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}
/* These badges (Exhibition/Scrimmage, Skyline Championship, Sarachek)
   stay neutral everywhere on the site except the Sarachek Tournament Hub
   itself, where its own orange accent applies instead — see
   body[data-page="sarachek"] below. */
body[data-page="sarachek"] .type-tag--exhibition {
  color: var(--sarachek-orange);
  background: var(--sarachek-orange-wash);
  border-color: rgba(240, 128, 32, 0.4);
  border-style: dashed;
}
body[data-page="sarachek"] .matchday-card .type-tag--exhibition,
body[data-page="sarachek"] .bug .type-tag--exhibition,
body[data-page="sarachek"] .matchday-card .type-tag--skyline-championship,
body[data-page="sarachek"] .bug .type-tag--skyline-championship,
body[data-page="sarachek"] .matchday-card .type-tag--sarachek,
body[data-page="sarachek"] .bug .type-tag--sarachek {
  color: var(--sarachek-orange-bright);
  background: var(--sarachek-orange-wash);
  border-color: rgba(240, 128, 32, 0.35);
}
.matchday-card .type-tag--ncaa,
.bug .type-tag--ncaa {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(139, 92, 246, 0.4);
}
.up-card__tip {
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.up-card__teams {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 0px;
}
.up-card__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 90px;
}
.up-card__team-logo {
  margin-bottom: 4px;
}
.up-card__team-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.15;
}
.up-card__vs {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: var(--slate-dim);
}
.up-card__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px; /* Consistent space below the bottom divider */
  padding-bottom: 4px;
  font-size: 12px;
  color: var(--slate);
  margin-bottom: 0;
  line-height: 1.3;
}
.up-card__loc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.up-card__foot {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.up-card__btn {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
  min-height: 36px;
}
.up-card__btn--live {
  background: var(--blue);
  color: #fff;
}
.up-card__btn--live:hover {
  background: var(--blue-dark);
}
.up-card__btn--cal {
  background: var(--paper);
  color: var(--blue-deep);
  border-color: var(--line);
}
.up-card__btn--cal:hover {
  background: var(--blue-wash);
  border-color: var(--blue);
  color: var(--blue);
}
.up-card__btn--ghost {
  background: var(--mist);
  color: var(--ink);
  border: 1px solid var(--line);
}
.up-card__btn--ghost:hover {
  background: var(--line);
}

/* ---- Terms & Legal page ---- */
.legal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 0;
  margin-bottom: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--slate);
}
.legal-jump {
  display: flex;
  gap: 16px;
}
.legal-jump a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.legal-jump a:hover {
  text-decoration: underline;
}
.legal-body {
  max-width: 760px;
  margin-top: 8px;
}
.legal-body h2 {
  font-family: var(--display);
  font-size: 30px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 44px 0 6px;
  scroll-margin-top: 84px;
}
.legal-body h2:first-child {
  margin-top: 8px;
}
.legal-body h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 26px 0 8px;
}
.legal-body p,
.legal-body li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--slate);
}
.legal-body ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.legal-body li + li {
  margin-top: 6px;
}
.legal-body a {
  color: var(--blue);
}

/* ============================================================
   Ultra-Wide & TV Display Refinements (>= 1600px / 4K Displays)
   ============================================================ */
@media (min-width: 1600px) {
  /* Keep background court graphics aligned with the centered 1600px content grid */
  .court svg {
    right: max(0px, calc((100vw - 1600px) / 2 - 4%));
  }
  .red-ambient-court svg {
    right: max(0px, calc((100vw - 1600px) / 2 - 4%));
  }
}


/* Sponsor CTA action button group (copy email + mailto) */
.sponsor-cta > div:first-child {
  flex: 1 1 320px;
  min-width: 0;
}
.sponsor-cta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.sponsor-cta__actions .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
@media (max-width: 640px) {
  .sponsor-cta {
    padding: 24px;
  }
  .sponsor-cta > div:first-child {
    flex-basis: 100%;
  }
  .sponsor-cta__actions {
    justify-content: stretch;
    width: 100%;
  }
  .sponsor-cta__actions .btn {
    flex: 1 1 140px;
  }
}

/* Mini calendar badge tucked next to the date in hero Upcoming rows */
.res__up-cal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.res__up-cal:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}
.res__up-cal-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 44px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.res__up-cal-mo {
  background: var(--blue);
  color: #ffffff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.25;
  padding: 4px 0;
}
.res__up-cal-day {
  color: #ffffff;
  font-family: var(--display);
  font-weight: 900;
  font-size: 16px;
  text-align: center;
  line-height: 1.2;
  padding: 4px 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.res__up-cal {
  position: relative;
}
.res__up-cal-hint {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue-bright, #308be1);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 12px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

@media (max-width: 640px) {
  .res__row--upcoming {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    padding: 9px 14px;
    gap: 10px;
  }
  .res__up-cal-box {
    width: 38px;
    min-height: 36px;
  }
  .res__up-cal-day {
    font-size: 14px;
  }
}