/*
 * iq.tennis — "Broadsheet Violet" (design direction 2a)
 *
 * The design system for the redesigned site: hairline-ruled rectangular
 * panels, a condensed uppercase display face, flat score bars and no
 * rounded corners or drop shadows anywhere. Separation comes from 1px
 * rules only.
 *
 * Linked after a page's Google Fonts link:
 *   <link rel="stylesheet" href="/redesign.css">
 * (For subdir pages, ../redesign.css.) The page's <body> must carry
 * class="bs" — the nav and footer rules are scoped under it.
 *
 * Live on every page except frozen generator output: the homepage, the
 * players index, all 265 player profiles, the 2,415 compare pages, the 10
 * brand pages and brands/index.html, the 46 articles and the racquets guide,
 * both comparison tools, and 404 / glossary / site map / privacy.
 *
 * Two stylesheets sit on top of it, each owning its own layer:
 * players/player.css (profile pages) and articles/article.css (reviews).
 *
 * Every rule that restyles the shared nav/footer is scoped under
 * `body.bs` on purpose: scripts/nav.js appends its own <style> to <head>
 * at parse time, so its rules come after this file in document order and
 * win at equal specificity. The extra class outranks them.
 *
 * Still on the old design: strings/ (~68 pages) and the 265 racquet
 * sub-pages — both frozen output whose generators were removed on
 * 2026-09-11 and never rebuilt. When those generators come back, extend
 * this file — page = stack of bordered panels with small-caps header bars,
 * any 0-10 metric uses a flat track with a square fill (.bs-bar here;
 * .score-row in the compare and brand generators).
 */

/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   Light only. The broadsheet look depends on ink-on-paper contrast,
   so there is no dark variant in this pass.
   ═══════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --paper:       #e9e7f7;   /* page background */
  --panel:       #fbfaff;   /* panel / card body */
  --panel-head:  #dcd9f1;   /* panel header bars, tagline strip, table head */
  --ink:         #191735;   /* borders, headings, footer background */
  --accent:      #3b3cd4;   /* scores, rank numbers, links, primary button */
  --accent-hover:#2a2ba8;
  --muted:       #615e86;   /* small-caps meta text */
  --body:        #45435e;   /* body paragraphs */
  --rule:        #e6e3f5;   /* row dividers inside panels */
  --hairline:    #e2dff2;   /* dividers inside cards */
  --track:       #d5d2ec;   /* score-bar track */
  --slot:        #dedbf2;   /* image placeholder background */
  --chip-border: #b7b3d6;
  --note-bg:     #f4f2fc;
  --footer-text: #b7b3d6;

  --display: 'Archivo Narrow', 'Arial Narrow', sans-serif;
  /* The body face is --font-body, NOT --text. The legacy pages and
     scripts/nav.js both use --text as an ink COLOUR ([data-theme="light"]
     sets it to #140f2b), and nav.js's <style> is appended at parse time so it
     lands after this file and wins at equal specificity. A font token named
     --text therefore resolved to a colour and font-family: var(--text) was
     invalid — which is how the homepage shipped in Times New Roman. Do not
     rename it back. */
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --gutter: 22px;
}

/* ═══════════════════════════════════════════════════════════════════
   2. BASE
   ═══════════════════════════════════════════════════════════════════ */
body.bs {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
body.bs *, body.bs *::before, body.bs *::after { box-sizing: border-box; }
body.bs h1, body.bs h2, body.bs h3, body.bs p, body.bs figure { margin: 0; }
body.bs img { max-width: 100%; display: block; }

body.bs a { color: var(--accent); text-decoration: none; }
body.bs a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Square everything. The design has no radius and no shadow anywhere,
   so this also flattens the shared nav/footer without touching nav.js. */
body.bs *,
body.bs .ted-nav *,
body.bs .ted-footer * { border-radius: 0 !important; box-shadow: none !important; }

body.bs :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The page body itself is a ruled sheet. */
.bs-sheet {
  max-width: 1360px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════
   3. TYPE HELPERS
   ═══════════════════════════════════════════════════════════════════ */
.bs-meta {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.bs-eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bs-heading {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   4. MASTHEAD — the shared nav, repapered
   scripts/nav.js keeps owning the markup and the links; this only
   changes how its output looks.
   ═══════════════════════════════════════════════════════════════════ */
body.bs .ted-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  height: auto;
  padding: 14px 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: var(--display);
}

/* Wordmark: IQ badge + TENNIS, built from the existing brand link so the
   link text stays in the accessibility tree. */
body.bs .ted-nav-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 0;
  line-height: 1;
  margin: 0;
  padding: 0;
  color: var(--ink);
}
body.bs .ted-nav-brand:hover { opacity: 1; text-decoration: none; }
body.bs .ted-nav-brand::before {
  content: 'IQ';
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.02em;
  padding: 2px 10px 3px;
}
body.bs .ted-nav-brand::after {
  content: 'Tennis';
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
body.bs .ted-nav-brand-sub { display: none; }

body.bs .ted-nav-items { display: flex; align-items: center; gap: 30px; }
body.bs .ted-nav-item { position: relative; }
body.bs .ted-nav-link {
  padding: 0;
  background: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 120ms ease;
}
body.bs .ted-nav-item:hover .ted-nav-link,
body.bs .ted-nav-link:hover,
body.bs .ted-nav-link.active {
  background: none;
  color: var(--accent);
  text-decoration: underline;
}
body.bs .ted-nav-dropdown {
  border: 1px solid var(--ink);
  background: var(--panel);
  padding: 0;
  /* Offset from the nav link. nav.js derives both `top` and the invisible
     hover bridge that spans this gap from --dd-gap, so set the variable
     rather than `top` — a bare `top` here would leave the bridge behind
     and the dropdown would close as the pointer crossed the gap. */
  --dd-gap: 14px;
  min-width: 240px;
}
body.bs .ted-nav-dropdown a {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
}
body.bs .ted-nav-dropdown a:last-child { border-bottom: none; }
body.bs .ted-nav-dropdown a:hover,
body.bs .ted-nav-dropdown a.active { background: var(--note-bg); color: var(--accent); }
body.bs .ted-nav-cta {
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 12px 18px;
  transition: background-color 120ms ease;
}
body.bs .ted-nav-cta:hover { background: var(--accent-hover); color: #fff; opacity: 1; text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════
   4b. BREADCRUMB — a meta strip under the masthead
   Shared by the player profile and compare pages, both of which emit
   .breadcrumb / .breadcrumb-sep from their generator.
   ═══════════════════════════════════════════════════════════════════ */
body.bs .breadcrumb {
  padding: 9px 22px;
  background: var(--panel-head);
  border-bottom: 1px solid var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
body.bs .breadcrumb a { color: var(--ink); }
body.bs .breadcrumb a:hover { color: var(--accent); }
body.bs .breadcrumb-sep { margin: 0 8px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════
   5. TAGLINE STRIP
   ═══════════════════════════════════════════════════════════════════ */
.bs-strip {
  background: var(--panel-head);
  border-bottom: 1px solid var(--ink);
  padding: 14px 22px 10px;
}
.bs-strip p {
  font-size: 16px;
  line-height: 1.45;
  max-width: 860px;
  color: var(--ink);
  text-wrap: pretty;
}
.bs-strip p strong { color: var(--accent); }
.bs-strip .bs-meta { display: block; text-align: right; margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════
   6. PANEL
   ═══════════════════════════════════════════════════════════════════ */
.bs-panel { background: var(--panel); border: 1px solid var(--ink); }
.bs-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--panel-head);
  border-bottom: 1px solid var(--ink);
  padding: 9px 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bs-panel__head em {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════
   7. SCORE BAR
   ═══════════════════════════════════════════════════════════════════ */
.bs-bars { display: flex; flex-direction: column; gap: 9px; }
.bs-bar {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
}
.bs-bar__label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.bs-bar__track { display: block; height: 7px; background: var(--track); }
.bs-bar__fill  { display: block; height: 7px; background: var(--accent); }
.bs-bar__val {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════
   8. BUTTONS & CHIPS
   ═══════════════════════════════════════════════════════════════════ */
.bs-btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 0;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
body.bs .bs-btn--primary { background: var(--accent); color: #fff; }
body.bs .bs-btn--primary:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
body.bs .bs-btn--secondary { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
body.bs .bs-btn--secondary:hover { background: var(--ink); color: var(--panel); text-decoration: none; }

.bs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; border: 0; padding: 0; }
.bs-chip {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 7px 13px;
  border: 1px solid var(--chip-border);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.bs-chip:hover { border-color: var(--ink); }
.bs-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--panel);
  border: 0;
  padding: 8px 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   9. VERDICT BAND
   ═══════════════════════════════════════════════════════════════════ */
.bs-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 22px;
  padding: 22px;
  align-items: start;
}
.bs-verdict__body { display: grid; grid-template-columns: 330px minmax(0, 1fr); }
.bs-verdict__shot {
  position: relative;
  background: var(--slot);
  border-right: 1px solid var(--ink);
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.bs-verdict__shot img { max-height: 386px; width: auto; object-fit: contain; }
.bs-verdict__badge {
  position: absolute;
  left: 0;
  bottom: 16px;
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  pointer-events: none;
}
.bs-verdict__text { padding: 20px 22px 18px; }
.bs-verdict__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.bs-verdict__brand {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.bs-verdict__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-top: 2px;
}
.bs-verdict__score {
  font-family: var(--display);
  font-weight: 700;
  font-size: 54px;
  line-height: 0.9;
  color: var(--accent);
}
.bs-verdict__out {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.bs-verdict__lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
  margin-top: 14px;
  max-width: 460px;
  text-wrap: pretty;
}
.bs-verdict .bs-bars { margin-top: 18px; max-width: 470px; }
.bs-verdict__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.bs-verdict__disclosure { margin-top: 12px; }

/* ═══════════════════════════════════════════════════════════════════
   10. SIDEBAR — racket finder + this week
   ═══════════════════════════════════════════════════════════════════ */
.bs-side { display: flex; flex-direction: column; gap: 22px; }
.bs-finder__body { padding: 16px; }
.bs-finder__q { margin-top: 16px; }
.bs-finder__q:first-child { margin-top: 0; }
.bs-finder__divider { height: 1px; background: var(--hairline); margin: 18px 0 14px; }
.bs-finder__result { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.bs-finder__shot {
  background: var(--slot);
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bs-finder__shot img { max-height: 96px; width: auto; object-fit: contain; }
.bs-finder__kicker { color: var(--accent); }
.bs-finder__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-top: 3px;
}
.bs-finder__why { font-size: 14px; line-height: 1.5; color: var(--body); margin-top: 6px; text-wrap: pretty; }

.bs-week__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 0 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}
.bs-week__row:last-child { border-bottom: none; }
.bs-week__day {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--accent);
}
.bs-week__event {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.bs-week__where { letter-spacing: 0.10em; }

/* ═══════════════════════════════════════════════════════════════════
   11. TESTED-RACKETS TABLE
   ═══════════════════════════════════════════════════════════════════ */
.bs-section { padding: 0 22px 22px; }
.bs-table__title { padding: 16px 18px 12px; border-bottom: 1px solid var(--ink); }
.bs-table__title .bs-meta { margin-top: 5px; }
.bs-row {
  display: grid;
  grid-template-columns: 70px 1.5fr 2fr 90px 90px 90px 120px;
  gap: 0 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: background-color 120ms ease;
}
.bs-row:last-of-type { border-bottom: none; }
.bs-row:hover { background: var(--note-bg); }
.bs-row--head {
  padding: 9px 18px;
  background: var(--panel-head);
  border-bottom: 1px solid var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4c4a6b;
}
.bs-row--head:hover { background: var(--panel-head); }
.bs-row__score {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
}
.bs-row__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.bs-row__name:hover { color: var(--accent); }
.bs-row__verdict { font-size: 15px; line-height: 1.45; color: var(--body); }
.bs-row__spec { font-size: 15px; }
.bs-row__specmeta { display: none; }
.bs-note {
  padding: 11px 18px;
  border-top: 1px solid var(--ink);
  background: var(--note-bg);
  letter-spacing: 0.10em;
}

/* ═══════════════════════════════════════════════════════════════════
   12. SECTION HEAD + PRO CARDS
   ═══════════════════════════════════════════════════════════════════ */
.bs-sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.bs-sechead .bs-meta { margin-top: 5px; }
.bs-sechead__link {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--accent);
  color: var(--ink);
  white-space: nowrap;
}
.bs-sechead__link:hover { color: var(--accent); text-decoration: none; }

.bs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bs-card { border: 1px solid var(--ink); background: var(--panel); }
/* The slot is portrait because the source photos are: 158 of the 254 files in
   images/ are taller than they are wide (330x495 is the single most common
   size) and only 35 are landscape. A wide slot cropped those to a band across
   the face — roughly 70% of each frame thrown away, at a zoom that varied
   card to card with the source's own shape. 4:5 is close enough to the 2:3
   sources to take head and shoulders off every one of them. */
.bs-card__photo {
  aspect-ratio: 4 / 5;
  background: var(--slot);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
}
/* Faces sit high in a sports portrait, so the crop is taken off the bottom. */
.bs-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.bs-card__body { padding: 13px 15px 15px; }
.bs-card__rank { color: var(--accent); }
.bs-card__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-top: 2px;
  color: var(--ink);
}
.bs-card__name:hover { color: var(--accent); }
.bs-card__who { letter-spacing: 0.09em; margin-top: 2px; }
.bs-card__divider { height: 1px; background: var(--hairline); margin: 11px 0; }
.bs-card__gear { font-size: 14px; line-height: 1.7; color: var(--body); }
.bs-card__gear strong { color: var(--ink); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   13. GEAR LISTS
   ═══════════════════════════════════════════════════════════════════ */
.bs-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.bs-list__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
}
.bs-list__row:last-child { border-bottom: none; }
.bs-list__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--ink);
}
.bs-list__name:hover { color: var(--accent); }
.bs-list__rank { color: var(--accent); margin-right: 10px; }
.bs-list__count { font-size: 15px; color: var(--muted); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════
   14. FOOTER — shared footer repapered, plus the disclosure bar
   ═══════════════════════════════════════════════════════════════════ */
body.bs .ted-footer {
  background: var(--ink);
  /* nav.js sets "Plus Jakarta Sans" on this container; every descendant that
     doesn't name a face inherits it, so the container itself must be repapered. */
  font-family: var(--font-body);
  border-top: 1px solid var(--ink);
  color: var(--footer-text);
  padding: 0;
}
body.bs .ted-footer-inner { max-width: 1360px; padding: 22px; }
body.bs .ted-footer-top { grid-template-columns: 2.5fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 18px; }
body.bs .ted-footer-brand,
body.bs .ted-footer-brand-block .ted-footer-brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
body.bs .ted-footer-tagline,
body.bs .ted-footer-brand-block .ted-footer-tagline { color: var(--footer-text); font-family: var(--font-body); }
body.bs .ted-footer-col-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
body.bs .ted-footer-col a,
body.bs .ted-footer-copy,
body.bs .ted-footer-legal a { color: var(--footer-text); font-family: var(--font-body); }
body.bs .ted-footer-col a:hover,
body.bs .ted-footer-legal a:hover { color: #fff; }
body.bs .ted-footer-bottom { border-top: 1px solid #3a3860; padding-top: 16px; }

.bs-colophon {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--ink);
  color: var(--footer-text);
  padding: 16px 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   15. RESPONSIVE
   Designed at 1360px. Nothing below it takes a fixed pixel width.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .bs-band { grid-template-columns: minmax(0, 1fr); }
  .bs-lists { grid-template-columns: minmax(0, 1fr); }
  .bs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.bs .ted-footer-top { grid-template-columns: 1fr 1fr; }

  /* The table keeps all seven columns down to 820px, so tighten the spec
     cells rather than letting the racket name wrap to three lines. */
  .bs-row {
    grid-template-columns: 58px minmax(0, 1.6fr) minmax(0, 2fr) 72px 72px 72px 100px;
    gap: 0 12px;
    padding: 12px 14px;
  }
  .bs-row--head { padding: 9px 14px; }
  .bs-row__name { font-size: 17px; }
  .bs-row__score { font-size: 22px; }
  .bs-row__verdict, .bs-row__spec { font-size: 14px; }
}

@media (max-width: 820px) {
  .bs-verdict__body { grid-template-columns: minmax(0, 1fr); }
  .bs-verdict__shot {
    min-height: 260px;
    height: 260px;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .bs-verdict__shot img { max-height: 216px; }
  .bs-verdict__name { font-size: 38px; }

  /* Drop head / weight / pattern out of the grid and reprint them as a
     meta line under the racket name. */
  .bs-row { grid-template-columns: 62px minmax(0, 1.4fr) minmax(0, 2fr) 110px; }
  .bs-row__spec { display: none; }
  .bs-row__specmeta { display: block; margin-top: 4px; }
  .bs-row--head .bs-row__spec { display: none; }
}

@media (max-width: 560px) {
  body.bs .ted-nav { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  body.bs .ted-nav-items { gap: 18px; flex-wrap: wrap; }
  .bs-strip, .bs-band, .bs-section, .bs-colophon { padding-left: 16px; padding-right: 16px; }
  body.bs .breadcrumb { padding: 9px 16px; }
  .bs-band { padding-top: 16px; padding-bottom: 16px; gap: 16px; }
  .bs-strip .bs-meta { text-align: left; }
  /* One column makes the card full-width, where a portrait photo would run
     most of a phone screen. Lay the card out sideways instead: the photo keeps
     its crop at a third of the width and the rule moves to its right edge. */
  .bs-cards { grid-template-columns: minmax(0, 1fr); }
  .bs-card { display: grid; grid-template-columns: 36% minmax(0, 1fr); }
  .bs-card__photo { border-bottom: 0; border-right: 1px solid var(--ink); }
  .bs-heading { font-size: 24px; }
  .bs-verdict__name { font-size: 32px; }
  .bs-verdict__score { font-size: 42px; }
  .bs-row { grid-template-columns: 56px minmax(0, 1fr); }
  .bs-row__verdict { grid-column: 1 / -1; }
  .bs-row > .bs-row__spec:last-child { display: block; grid-column: 1 / -1; }
  .bs-row--head { display: none; }
  .bs-sechead { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  body.bs *, body.bs *::before, body.bs *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
