/* ===========================================================
   Viewing directory — /where-to-watch/minnesota-vikings-vs-chicago-bears/
   Prefix .vdr-  ·  white page, dark text, restrained purple and navy
   =========================================================== */
:root{ --vdr-navy:#1d2a44; }

.vdr-wrap{max-width:920px;margin:0 auto;padding-left:var(--space-2);padding-right:var(--space-2)}
.vdr-page{background:var(--card);padding-block:var(--space-5) var(--space-6)}

.vdr-h1{font-family:var(--display);text-transform:uppercase;line-height:1.04;
  font-size:clamp(28px,5.4vw,46px);max-width:18ch}
.vdr-sub{margin-top:10px;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.12em;font-size:12.5px;color:var(--vdr-navy)}

/* ---------- fixture panel ---------- */
.vdr-panel{margin-top:var(--space-3);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.vdr-panel table{width:100%;border-collapse:collapse}
.vdr-panel caption{text-align:left;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.1em;font-size:11.5px;color:#fff;background:var(--purple);padding:10px var(--space-2)}
.vdr-panel th,.vdr-panel td{text-align:left;padding:11px var(--space-2);
  border-top:1px solid var(--line);vertical-align:top}
.vdr-panel thead th{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
  font-size:11px;color:var(--text-muted);border-top:0}
.vdr-panel tbody th{font-weight:600;width:44%;color:var(--vdr-navy)}
.vdr-panel tbody tr.is-alt td,.vdr-panel tbody tr.is-alt th{background:#f7f6fa}

.vdr-lede{margin-top:var(--space-3);font-size:17px;max-width:66ch}
.vdr-jump{margin-top:var(--space-2);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);
  padding-block:var(--space-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vdr-jump a{color:var(--purple);text-decoration:underline;text-underline-offset:4px;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:13.5px;
  padding:12px 2px;min-height:44px;display:inline-flex;align-items:center}
.vdr-checked{margin-top:var(--space-2);font-size:13px;color:var(--text-muted);max-width:66ch}

/* ---------- body ---------- */
.vdr-page h2{font-family:var(--display);text-transform:uppercase;line-height:1.1;
  font-size:clamp(21px,3.2vw,28px);margin-top:var(--space-5);margin-bottom:var(--space-2)}
.vdr-page h3{font-family:var(--display);text-transform:uppercase;font-size:17px;
  letter-spacing:.04em;margin-bottom:8px}
.vdr-page p{max-width:66ch;margin-bottom:var(--space-2)}
.vdr-page a{color:var(--purple);text-decoration:underline;text-underline-offset:3px}
.vdr-page h2:focus-visible,.vdr-page h3:focus-visible{outline:2px solid var(--purple);outline-offset:4px}

/* two city profiles */
.vdr-cities{display:grid;gap:var(--space-4);margin-top:var(--space-3)}
@media (min-width:820px){.vdr-cities{grid-template-columns:1fr 1fr;align-items:start}}
.vdr-city{min-width:0}
.vdr-city img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);
  margin-bottom:var(--space-2)}
.vdr-city p{max-width:none}
.vdr-note{margin-top:var(--space-2);border-left:3px solid var(--gold);
  background:#fbf7ec;padding:12px var(--space-2);border-radius:0 var(--radius) var(--radius) 0}
.vdr-note b{display:block;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.06em;font-size:12px;margin-bottom:4px}
.vdr-note p{margin:0;font-size:15px}

/* decision table */
.vdr-scroll{overflow-x:auto;margin-bottom:var(--space-3)}
.vdr-table{width:100%;border-collapse:collapse;border:1px solid var(--line)}
.vdr-table caption{text-align:left;font-size:13px;color:var(--text-muted);padding-bottom:8px}
.vdr-table th,.vdr-table td{text-align:left;padding:13px var(--space-2);
  border-top:1px solid var(--line);vertical-align:top}
.vdr-table thead th{background:var(--vdr-navy);color:#fff;border-top:0;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-size:11.5px}
.vdr-table tbody th{font-weight:600;width:42%;color:var(--vdr-navy)}
.vdr-table tbody tr.is-alt th,.vdr-table tbody tr.is-alt td{background:#f7f6fa}

@media (max-width:600px){
  .vdr-table,.vdr-table caption,.vdr-table tbody,.vdr-table tr,.vdr-table th,.vdr-table td{display:block;width:auto}
  .vdr-table thead{position:absolute;left:-9999px}
  .vdr-table tr{border-top:1px solid var(--line);padding:4px 0}
  .vdr-table tbody th,.vdr-table tbody td{border-top:0;padding:6px var(--space-2)}
  .vdr-table tbody th::before{content:"Your local listing";display:block;
    font-family:var(--display);text-transform:uppercase;font-size:10.5px;
    letter-spacing:.08em;color:var(--text-muted);margin-bottom:2px}
  .vdr-table tbody td::before{content:"Route";display:block;
    font-family:var(--display);text-transform:uppercase;font-size:10.5px;
    letter-spacing:.08em;color:var(--text-muted);margin-bottom:2px}
  .vdr-table tbody th{width:auto}
}

/* closing note */
.vdr-rule{border:0;border-top:2px solid var(--line);margin:var(--space-5) 0 var(--space-3)}
.vdr-coverage{background:#f7f6fa;border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-3)}
.vdr-coverage b.vdr-label{display:block;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.1em;font-size:11.5px;color:var(--vdr-navy);margin-bottom:8px}
.vdr-coverage p{font-size:15px}
.vdr-coverage p:last-child{margin-bottom:0}