:root{
  --wk-fg:#e7e9ee; --wk-muted:#b6bdc9; --wk-bg:#0b1220;
  --surface:#0e1729; --surface2:#0b1220; --border:#1b2642;
  --shadow:0 10px 30px rgba(0,0,0,.25);

  --hof:#c084fc;   /* purple */
  --pre:#22d3ee;   /* cyan   */
  --reg:#22c55e;   /* green  */
  --post:#f97316;  /* orange */
}

/* Hero */
.weeks-hero{
  background: radial-gradient(1200px 280px at 50% -20%, rgba(46,167,255,.35), transparent 60%),
              linear-gradient(180deg, #0e1729 0%, #0b1220 100%);
  color:var(--wk-fg); border-radius:16px; padding:28px 18px; margin-top:8px; box-shadow:var(--shadow);
  text-align:center;
}
.weeks-hero h1{ margin:0 0 6px; font-weight:800; }
.weeks-hero p{ margin:0; color:var(--wk-muted); }

/* Quick jump */
.weeks-jump{ max-width:520px; margin:14px auto 6px; }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }

/* Tabs */
.weeks-tabs .nav-link{
  border-radius:999px; margin:4px; font-weight:700; color:#cdd3df; background:#101a2e; border:1px solid var(--border);
}
.weeks-tabs .nav-link.active{ color:#fff; background:#152242; border-color:#26324f; }
.weeks-tabs .count{ font-weight:700; margin-left:6px; opacity:.75 }

/* Panels */
.weeks-panels{ margin-top:10px; }

/* Week list (vertical, compact) */
.week-list{ max-width:820px; margin:0 auto; }
.week-row{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);
  color:var(--wk-fg); text-decoration:none;
  border:1px solid var(--border); border-radius:14px;
  padding:12px 14px; margin:10px 0; box-shadow:var(--shadow);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  position:relative; overflow:hidden;
}
.week-row .title{ font-weight:800; letter-spacing:.2px; }
.week-row .cta{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#2ea7ff; }
.week-row .cta svg{ width:18px; height:18px; }
.week-row:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,.35); border-color:#2a385a; }

/* Colored stripe by season */
.week-row .stripe{
  position:absolute; left:0; top:0; bottom:0; width:6px; border-top-left-radius:14px; border-bottom-left-radius:14px;
  background: var(--reg);
}
.week-row.hof .stripe{ background:var(--hof); }
.week-row.pre .stripe{ background:var(--pre); }
.week-row.reg .stripe{ background:var(--reg); }
.week-row.post .stripe{ background:var(--post); }

/* Tight on mobile */
@media (max-width: 576px){
  .week-row{ padding:12px; }
}

/* --- Desktop polish / contrast --- */

/* 1) Make hero text pure white + add subtle readability shadow */
.weeks-hero h1,
.weeks-hero p { color: #fff; }
.weeks-hero h1 { text-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* 2) Desktop sizing + breathing room */
@media (min-width: 992px){
  .weeks-hero { padding: 40px 28px; border-radius: 18px; margin-top: 12px; }
  .weeks-hero h1 { font-size: 2rem; }
  .weeks-hero p  { font-size: 1rem; opacity: .9; }

  /* 3) Convert week list to a two-column grid (calmer scan, less “novice” vibe) */
  .week-list {
    max-width: none;              /* let it fill the container */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .week-row {
    margin: 0;                    /* grid handles spacing */
    padding: 14px 16px;
  }
  .week-row .title { font-size: 1.06rem; }
}

/* 4) Subtle hover refinement on desktop */
@media (min-width: 992px){
  .week-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 38px rgba(0,0,0,.32);
    border-color: #334166;
  }
}

/* 5) Slightly stronger CTA accent for desktop */
@media (min-width: 992px){
  .week-row .cta { color: #39b0ff; }
}