/*
 * PoP: what every page uses (the masthead, the scoreboard, the front page, cards, archives, buttons, the footer).
 * Cut from style.css, like the other sheets here: a change is made in style.css, and these are cut again (inc/sheets.php says how the theme chooses).
 */
/* ---------- Mots, self-hosted from /fonts ---------- */
@font-face { font-family: "Mots"; src: url("../fonts/mots-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mots"; src: url("../fonts/mots-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Mots"; src: url("../fonts/mots-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mots"; src: url("../fonts/mots-bold-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
/* Mots Caps draws lowercase letters as small capitals: every label is set in it, in lowercase */
@font-face { font-family: "Mots Caps"; src: url("../fonts/mots-caps-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mots Caps"; src: url("../fonts/mots-caps-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --ink: #1a1418;
  --paper: #fff7e8;
  --card: #fffdf8;
  --chip: #fff3db;
  --muted: #6e696b;
  --rule: #d6cfc5;
  --shade: var(--ink);    /* the hard offset shadows */
  --cream: #fff7e8;       /* text on red, in either mode */
  --black: #1a1418;       /* text on gold and yellow, in either mode */

  /* Two reds, plus one for the dark band. (The red card on 90′ timelines is a football card, not a theme colour.) */
  --red: #c80f36;       /* the featured story's panel, labels, the top bar, photo stand-ins, small red text (5.5:1) */
  --bright: #ee1841;    /* the logo's red: rules, underlines and accents, never small text (4.1:1) */
  --red-night: #ff6b82; /* red text on the dark Arena Lights band */
  --red-text: var(--red);

  --night: #141016;     /* Arena Lights */
  --night-rule: #494343;
  --night-dim: #8d8287;

  --text: "Mots", Georgia, serif;
  --caps: "Mots Caps", "Mots", Georgia, serif;

  --wide: 93rem;
  --measure: 38rem;
  --gutter: 1.25rem;
  --shadow: 6px 6px 0 var(--shade);
  --gold: #ffc928;         /* Mots's gold: only the Subscribe and sign-up buttons use it, so the eye finds them */
  --card-yellow: #f6c700;  /* bookings on 90′ timelines */
  --card-red: #d3101f;
  --sub: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2022%22%3E%3Cg%20fill%3D%22none%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2020V3M2%208l5-5%205%205%22%20stroke%3D%22%23169c46%22%2F%3E%3Cpath%20d%3D%22M19%202v17M14%2014l5%205%205-5%22%20stroke%3D%22%23d3101f%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");  /* a substitution on 90′ timelines: on, green; off, red */
  --whistle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%225%2014%2088%2071%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M37%2035H52L55%2041H63V35H90A1%201%200%200%201%2091%2036V49L60.6%2058.4A24%2024%200%201%201%2037%2035ZM49%2059A12%2012%200%201%200%2025%2059A12%2012%200%201%200%2049%2059ZM46.6%2059A9.6%209.6%200%201%200%2027.4%2059A9.6%209.6%200%201%200%2046.6%2059Z%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%3E%3Cellipse%20cx%3D%2211%22%20cy%3D%2266.5%22%20rx%3D%224.6%22%20ry%3D%223.8%22%20transform%3D%22rotate%28-18%2011%2066.5%29%22%20stroke-width%3D%222.8%22%2F%3E%3Cpath%20d%3D%22M45.5%2020.5L49%2025.5M57.2%2017V23.5M68.8%2020.5L65.3%2025.5%22%20stroke-width%3D%223.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");  /* half time and full time on 90′ timelines */
  --assist: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2015%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.4%204.2C1.4%203.1%202.1%202.3%203.1%202.3h3.5c.7%200%201.2.4%201.4%201l.5%201.5c2.7.8%205.9%201.7%208.1%202.6%201.8.7%202.6%201.9%202.6%203.1v.5c0%20.5-.4.9-.9.9H2.3c-.5%200-.9-.4-.9-.9Z%20M9.6%206.2l1.5.45-.55%201.2-1.45-.45Z%20M12.3%207l1.5.47-.55%201.2-1.45-.47Z%22%2F%3E%3Cpath%20d%3D%22M2.6%2012.6h2v1.6h-2zM6.6%2012.6h2v1.6h-2zM10.9%2012.6h2v1.6h-2zM15.1%2012.6h2v1.6h-2z%22%2F%3E%3C%2Fsvg%3E");  /* an assist: a boot, beside a name in a lineup (a mask: drawn in ink) */
  --motm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%201.8l3.1%206.6%207.2.9-5.3%205%201.4%207.1L12%2017.9l-6.4%203.5L7%2014.3l-5.3-5%207.2-.9Z%22%20fill%3D%22%23ffc928%22%20stroke%3D%22%231a1418%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");  /* the Man of the Match: a gold star */
  --sub-on: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2016%22%3E%3Cpath%20d%3D%22M6%2015V2M1.5%206.5%206%202l4.5%204.5%22%20fill%3D%22none%22%20stroke%3D%22%23169c46%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");  /* a player who came on, beside his name in a lineup */
  --sub-off: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2016%22%3E%3Cpath%20d%3D%22M6%201v13M1.5%209.5%206%2014l4.5-4.5%22%20fill%3D%22none%22%20stroke%3D%22%23d3101f%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");  /* a player who went off */
  --ball-pen: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20transform%3D%22scale%28.86%29%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210.2%22%20fill%3D%22none%22%20stroke%3D%22%231a1418%22%20stroke-width%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M12%207.6l4.2%203-1.6%204.9H9.4L7.8%2010.6z%22%20fill%3D%22%231a1418%22%2F%3E%3Cpath%20d%3D%22M12%207.6V2.4M16.2%2010.6l4.9-1.7M14.6%2015.5l3%204.2M9.4%2015.5l-3%204.2M7.8%2010.6L2.9%208.9%22%20stroke%3D%22%231a1418%22%20stroke-width%3D%221.8%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2218.2%22%20cy%3D%2218.2%22%20r%3D%225.6%22%20fill%3D%22%23c80f36%22%20stroke%3D%22%23fff7e8%22%20stroke-width%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M16.6%2021.1v-5.6h1.9a1.65%201.65%200%200%201%200%203.3h-1.9%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");  /* a penalty goal beside a player's name: the ball with a P */
  --ball-miss: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20transform%3D%22scale%28.86%29%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210.2%22%20fill%3D%22none%22%20stroke%3D%22%23c80f36%22%20stroke-width%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M12%207.6l4.2%203-1.6%204.9H9.4L7.8%2010.6z%22%20fill%3D%22%23c80f36%22%2F%3E%3Cpath%20d%3D%22M12%207.6V2.4M16.2%2010.6l4.9-1.7M14.6%2015.5l3%204.2M9.4%2015.5l-3%204.2M7.8%2010.6L2.9%208.9%22%20stroke%3D%22%23c80f36%22%20stroke-width%3D%221.8%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2218.2%22%20cy%3D%2218.2%22%20r%3D%225.6%22%20fill%3D%22%231a1418%22%20stroke%3D%22%23fff7e8%22%20stroke-width%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M16.6%2021.1v-5.6h1.9a1.65%201.65%200%200%201%200%203.3h-1.9%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");  /* a missed (or saved) penalty: the penalty ball in red, its P in ink */
  --var: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%221.4%22%20y%3D%224.6%22%20width%3D%2221.2%22%20height%3D%2214.8%22%20rx%3D%221.8%22%20fill%3D%22%231a1418%22%2F%3E%3Cpath%20d%3D%22M4.3%208.5L6.35%2015.5L8.4%208.5M9.7%2015.5L11.75%208.5L13.8%2015.5M10.45%2013.2h2.6M15.3%2015.5V8.5h2.15a1.95%201.95%200%200%201%200%203.9h-2.15M17.5%2012.4l2.1%203.1%22%20fill%3D%22none%22%20stroke%3D%22%23fff7e8%22%20stroke-width%3D%221.55%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");  /* a VAR review (a goal ruled out, a penalty given or taken away): the screen */
  --ball: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210.2%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M12%207.6l4.2%203-1.6%204.9H9.4L7.8%2010.6z%22%2F%3E%3Cpath%20d%3D%22M12%207.6V2.4M16.2%2010.6l4.9-1.7M14.6%2015.5l3%204.2M9.4%2015.5l-3%204.2M7.8%2010.6L2.9%208.9%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);  /* the goal ball on 90′ timelines, drawn for this theme */
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.1875rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.08; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--bright);
  outline-offset: 3px;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem;
}
.skip-link:focus { left: 1rem; }
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; word-wrap: normal !important;
}
/* ---------- Labels in Mots Caps ----------
   Small capitals, letterspaced: set in lowercase so every letter is a small cap. Each component
   below sets its own size and color. */
.label, .chip, .badge-paid, .btn, .topbar, .nav__list, .score__event, .score__status, .score__foot,
.scoreboard__title, .tags a, .page-numbers, .post-nav__label, .comment-meta, .comment-form label,
.footer-nav, .site-footer__fine, .newsletter__kicker, .story__body h4, .search-submit,
.comment-form .form-submit input, .social-link--text, .page-links, .toc__label {
  font-family: var(--caps);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: .12em;
  font-variant-numeric: lining-nums;
}
.sep { white-space: pre-wrap; }
/* the line may break after the dot, never before it */
/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 44px;
  padding: .55em 1.2em .6em;
  background: var(--red); color: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--shade);
  font-size: 1rem; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shade); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shade); }
.btn--ghost { background: var(--card); color: var(--ink); }
/* ---------- Top bar ---------- */
.topbar { background: var(--red); color: var(--paper); font-size: .9rem; }
.topbar__inner {
  max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter);
  min-height: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.topbar__links { display: flex; gap: 1.5rem; margin-left: auto; }
.topbar a { color: var(--paper); text-decoration: none; padding: .55rem 0; }
.topbar a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.topbar__date-short { display: none; }
.topbar a:focus-visible { outline-color: var(--paper); }
/* ---------- Masthead: the logo centered, the Subscribe button at the right, the sections below ---------- */
.masthead { background: var(--paper); border-bottom: 3px solid var(--ink); }
.masthead__inner { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.masthead__row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 1.4rem 0 1.1rem;
}
.masthead__logo { grid-column: 2; margin: 0; line-height: 0; }
.masthead__logo a { display: block; }
.masthead__logo img { width: clamp(15rem, 26vw, 23.75rem); height: auto; }
.masthead__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .7rem; }
.btn--subscribe { font-size: 1.05rem; }
/* Sign in (or Account): a quiet person icon beside Subscribe (filled once signed in) */
.masthead__account { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); border-radius: 50%; transition: color .15s, background-color .15s; }
.masthead__account svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.masthead__account.is-signed-in .masthead__account-head { fill: currentColor; }
.masthead__account:hover, .masthead__account:focus-visible { color: var(--red-text); background: var(--chip); }
/* Search: a magnifying glass beside the account icon, opening a field under the masthead (phones: in the menu) */
.masthead__share { display: none; }
.masthead__said { display: none; }
.masthead__search { position: relative; }
.masthead__search summary { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); border-radius: 50%; cursor: pointer; list-style: none; transition: color .15s, background-color .15s; }
.masthead__search summary::-webkit-details-marker { display: none; }
.masthead__search summary svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.masthead__search summary:hover, .masthead__search summary:focus-visible, .masthead__search[open] summary { color: var(--red-text); background: var(--chip); }
.masthead__search-panel { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 40; width: min(26rem, calc(100vw - 2 * var(--gutter))); padding: .8rem; background: var(--paper); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.masthead__search-panel .search-form { max-width: none; }
.nav__search { display: none; }
.nav__signin { display: none; }
.menu-toggle { display: none; }
.nav { border-top: 1px solid var(--rule); }
.nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2.4rem;
  font-size: 1.08rem; letter-spacing: .14em;
}
.nav__list a {
  display: block; padding: .85rem 0 .75rem;
  color: var(--ink); text-decoration: none;
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat; background-position: 0 calc(100% - .5rem); background-size: 0 3px;
  transition: background-size .25s ease;
}
.nav__list a:hover, .nav__list a:focus-visible, .nav__list .current-menu-item > a, .nav__list .current-category-ancestor > a { background-size: 100% 3px; }
/* ---------- The scoreboard ---------- */
.scoreboard { margin: 0 0 2.6rem; }
.scoreboard__inner { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.scoreboard__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.9rem 0 1.1rem; }
.scoreboard__title { margin: 0; font-size: 1.05rem; letter-spacing: .16em; color: var(--red); line-height: 1.3; }
.scoreboard__swipe { display: none; white-space: nowrap; }
.scoreboard__arrows { display: flex; gap: .6rem; }
.scoreboard__arrow {
  width: 3.1rem; height: 3.1rem;
  display: grid; place-items: center;
  font: 400 1.5rem/1 var(--text);
  background: var(--card); color: var(--ink); border: 2px solid var(--ink);
  cursor: pointer; transition: background-color .15s, color .15s;
}
.scoreboard__arrow:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.scoreboard__arrow:disabled { opacity: .35; cursor: default; }
.scoreboard:not(.is-scrollable) .scoreboard__arrows { visibility: hidden; }
.scoreboard__list {
  --cols: 5; --gap: 1.25rem;
  list-style: none; margin: -4px 0 0 -4px; padding: 4px 8px 10px 4px; /* room for a card lifting on hover, which the strip would otherwise clip */
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.scoreboard__list::-webkit-scrollbar { display: none; }
/* the cards' hidden screen-reader text stays inside the strip (otherwise phones could scroll the page sideways) */
.scoreboard__list { position: relative; }
.scoreboard__list:focus-visible { outline-offset: 4px; }
/* One score. Cards: white card, ink border, hard shadow */
.score { scroll-snap-align: start; }
.score__link, div.score {
  display: flex; flex-direction: column; height: 100%;
  padding: .85rem 1.05rem .8rem;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.score__link:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--shade); }
button.score__link { width: 100%; font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
/* the drawer's button, made from the link by js/scoreboard.js */
.score__head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .25rem; }
.score__head + .score__team + .score__team { margin-bottom: .55rem; }
/* the second team: the gap above the foot, now that the foot is pushed down */
.score__event { min-width: 0; font-size: .82rem; line-height: 1.2; color: var(--red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* one line, so every card's teams line up; the whole name is its tooltip */
.score__status { flex: none; }
.score__status { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.score__team {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  font-weight: 700; font-size: 1.75rem; line-height: 1.12;
  font-variant-numeric: lining-nums tabular-nums;
}
.score__name { letter-spacing: .01em; }
/* a team logo in place of the abbreviation: the same height as the line, never cropped */
.score__team:has(.score__logo) { align-items: center; padding: .12em 0; }
.score__name--logo { display: flex; align-items: center; gap: .4em; }
.score__logo { display: block; flex: none; width: 1.55em; height: 1.55em; object-fit: contain; object-position: center; }
/* logos keep their full colors, win or lose */
/* a team without a logo: a disc in its colours, ringed in its second, the size of a logo */
.score__crest { box-sizing: border-box; width: 1.3em; height: 1.3em; margin: .125em; border-radius: 50%; background: var(--c1); border: .16em solid var(--c2); box-shadow: 0 0 0 1.5px var(--ink); }
.score__abbr { text-decoration: none; }
.score__pts { white-space: nowrap; }
.score__extra { font-size: .9em; }
.score__team.is-loss { color: var(--muted); font-weight: 400; }
.score__foot {
  margin-top: auto; padding-top: .55rem; border-top: 1px dashed var(--rule); /* at the foot of the card, whatever's above it */
  font-size: .8rem; color: var(--muted);
}
.score__link:hover .score__read { color: var(--red); }
/* The drawer: a score's story opening, under the scoreboard */
.score.is-open .score__link { box-shadow: 6px 6px 0 var(--bright); transform: translate(-2px, -2px); }
.scoreboard__drawer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s ease, opacity .25s ease; }
.scoreboard__drawer.is-open { grid-template-rows: 1fr; opacity: 1; }
.scoreboard__drawer > * { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .scoreboard__drawer { transition: none; }
}
.drawer {
  margin: 1.4rem 0 .4rem; padding: 2rem clamp(1.25rem, 4vw, 3rem) 1.6rem;
  background: var(--card); color: var(--ink); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--shade);
}
.drawer--loading p { margin: 0; font-style: italic; color: var(--muted); }
.drawer__head, .drawer__body, .drawer__actions { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.drawer__title { margin: 0 0 .6rem; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.05; }
.drawer__title a { color: inherit; text-decoration: none; }
.drawer__title a:hover { text-decoration: underline; text-decoration-color: var(--bright); text-decoration-thickness: 3px; text-underline-offset: .12em; }
.drawer__title:focus { outline: none; }
.drawer__body { font-size: 1.2rem; }
.drawer__body > :last-child { margin-bottom: 0; }
.scoreboard .drawer__body > :is(p, ul, ol):last-child::after, .scoreboard .drawer__body > p:last-of-type::after { content: none; }
/* fades into the drawer's white */
.drawer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.6rem; margin-bottom: 0; }
.drawer__close { font: inherit; font-family: var(--caps); font-weight: 700; text-transform: lowercase; letter-spacing: .1em; font-size: .95rem; color: var(--ink); background: none; border: 0; padding: .4rem 0; cursor: pointer; }
.drawer__close:hover, .drawer__close:focus-visible { text-decoration: underline; text-decoration-color: var(--bright); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.scoreboard--arena .drawer { margin: 0 var(--gutter) 1.4rem; box-shadow: 8px 8px 0 var(--bright); }
.drawer__lineups { max-width: 52rem; margin: 1.8rem auto 0; font-size: 1rem; line-height: 1.35; }
.drawer__lineups-toggle { display: none; }
.drawer__signin { font-size: 1rem; }
@media (max-width: 760px) {
  .drawer__lineups { margin-top: 1.2rem; }
  .drawer__lineups-toggle {
    display: block; width: 100%; padding: .7rem 0; background: none; border: 0; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule);
    font: inherit; font-family: var(--caps); font-weight: 700; text-transform: lowercase; letter-spacing: .1em; color: var(--ink); cursor: pointer; text-align: left;
  }
  .drawer__lineups-toggle::after { content: " +"; color: var(--red-text); }
  .drawer__lineups-toggle[aria-expanded="true"]::after { content: " −"; }
}
/* Arena Lights: a dark band the width of the window, the bright red line on top, scores in cells */
.scoreboard--arena { background: var(--night); color: var(--paper); border-top: 4px solid var(--bright); margin-bottom: 0; }
.scoreboard--arena .scoreboard__inner {
  max-width: none; padding: 0;
  display: grid; grid-template-columns: minmax(10rem, max(14rem, calc((100% - var(--wide)) / 2 + 10rem))) minmax(0, 1fr) auto;
}
.scoreboard--arena .scoreboard__head { display: contents; }
.scoreboard--arena .scoreboard__title {
  grid-column: 1; grid-row: 1; align-self: center;
  padding: 1rem 1.5rem 1rem max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter)));
  color: var(--red-night); font-size: 1rem; max-width: 100%;
}
.scoreboard--arena .scoreboard__arrows { grid-column: 3; grid-row: 1; display: flex; gap: 0; visibility: visible; }
.scoreboard--arena .scoreboard__arrow {
  width: 4rem; height: 100%; border: 0; border-left: 1px solid var(--night-rule);
  background: var(--night); color: var(--paper);
}
.scoreboard--arena .scoreboard__arrow--next { background: var(--bright); color: #fff; }
.scoreboard--arena .scoreboard__arrow--prev:disabled { display: none; }
.scoreboard--arena .scoreboard__arrow:disabled { opacity: .45; }
.scoreboard--arena .scoreboard__arrow:hover:not(:disabled) { background: var(--paper); color: var(--night); }
.scoreboard--arena .scoreboard__list {
  grid-column: 2; grid-row: 1; --cols: 5; --gap: 0px; padding: 0;
}
.scoreboard--arena .score__link {
  background: transparent; color: var(--paper); border: 0; border-left: 1px solid var(--night-rule); box-shadow: none;
  padding: 1rem 1.5rem 1.05rem;
}
.scoreboard--arena .score__link:hover { transform: none; box-shadow: none; background: #221b22; }
.scoreboard--arena .score__event { color: #e6dfe2; }
.scoreboard--arena .score__status { color: var(--red-night); }
.scoreboard--arena .score__team { font-size: 1.8rem; line-height: 1.15; }
@media (max-width: 1500px) {
  .scoreboard--arena .scoreboard__list { --cols: 4; }
}
.scoreboard--arena .score__team.is-loss { color: var(--night-dim); }
.scoreboard--arena .score__foot { display: none; }
.scoreboard--arena .score__link:focus-visible { outline-color: var(--paper); outline-offset: -4px; }
/* ---------- The featured story ---------- */
.lead { max-width: var(--wide); margin: 0 auto 4.5rem; padding: 0 var(--gutter); }
.scoreboard--arena + .lead { margin-top: 3rem; }
.lead__box {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  min-height: 34rem;
  border: 3px solid var(--ink); box-shadow: 12px 12px 0 var(--shade);
  background: var(--red);
}
.lead__media { position: relative; border-right: 3px solid var(--ink); background: var(--red); overflow: hidden; }
.lead__media img, .lead__media .field { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lead__panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem clamp(1.5rem, 3vw, 2.75rem);
  color: var(--paper);
}
.lead__chips { margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chip {
  display: inline-block; padding: .35em .75em .4em;
  background: var(--chip); color: var(--red);
  font-size: .9rem; line-height: 1.1;
}
.lead__title { margin: 0 0 1.1rem; font-size: clamp(2.3rem, 3.9vw, 3.9rem); line-height: 1.02; letter-spacing: -.012em; text-wrap: balance; }
.lead__cover { color: inherit; text-decoration: none; }
.lead__cover::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* the whole box opens the story */
.lead__cover:focus-visible { outline: none; }
/* the section chip and the author's name sit above the box-wide link, so they open their own pages */
.lead__chips a, .lead__byline a { position: relative; z-index: 2; }
.chip--link { text-decoration: none; transition: background-color .15s, color .15s; }
.chip--link:hover, .chip--link:focus-visible { background: var(--ink); color: var(--paper); }
.lead__byline a:focus-visible { outline-color: var(--paper); }
.lead__box:has(.lead__cover:focus-visible) { outline: 3px solid var(--bright); outline-offset: 5px; }
.lead__box:hover .lead__title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }
.lead__dek { margin: 0 0 1.4rem; font-size: 1.32rem; font-style: italic; line-height: 1.4; }
.lead__byline { margin: 0; font-size: .95rem; }
.lead .badge-paid { background: var(--ink); color: var(--paper); }
/* the stand-in for a missing photo: field lines on red */
.field { display: block; background: var(--red); color: rgba(255, 247, 232, .32); }
.field svg { display: block; width: 100%; height: 100%; }
/* ---------- From the archive ---------- */
.passages { max-width: var(--wide); margin: 0 auto 3rem; padding: 0 var(--gutter); }
.section-title {
  margin: 0 0 1.6rem; padding-bottom: .5rem;
  font-size: clamp(2rem, 3.2vw, 2.6rem); letter-spacing: -.01em;
  border-bottom: 3px solid var(--ink);
}
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2.4rem; }
/* desktop: four across, so the front page's four stories make one row */
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 2rem; }
}
.card { display: flex; flex-direction: column; }
.card__body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
/* fills the card, so the byline and Save sit on its bottom edge, level across the row */
.card__media { display: block; aspect-ratio: 4 / 3; border: 2px solid var(--ink); background: var(--red); overflow: hidden; margin-bottom: 1rem; }
.card__media img, .card__media .field { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__media img { transform: scale(1.03); }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: 0 0 .35rem; min-height: 1.6rem; }
.label--cat { font-size: .9rem; color: var(--red); text-decoration: none; }
a.label--cat:hover { text-decoration: underline; text-underline-offset: .25em; }
.badge-type {
  display: inline-block; padding: .14em .5em .2em;
  border: 2px solid var(--red-text); color: var(--red-text);
  font: 700 .78rem/1.1 var(--text); font-variant-numeric: lining-nums; letter-spacing: .02em;
}
.lead .badge-type { border-color: var(--chip); color: var(--chip); }
.badge-paid { display: inline-block; padding: .2em .55em .28em; background: var(--ink); color: var(--paper); font-size: .78rem; line-height: 1.1; }
.card__title { margin: 0 0 .5rem; font-size: 1.75rem; line-height: 1.08; letter-spacing: -.008em; text-wrap: balance; }
.card__title a {
  text-decoration: none;
  background-image: linear-gradient(var(--bright), var(--bright));
  background-repeat: no-repeat; background-position: 0 92%; background-size: 0 .14em;
  transition: background-size .3s ease;
}
.card__title a:hover, .card__title a:focus-visible { background-size: 100% .14em; }
.card__excerpt {
  margin: 0 0 .7rem; color: var(--muted); font-size: 1.12rem; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.card__byline { margin: auto 0 0; font-size: .82rem; color: var(--muted); }
/* the author's name in a byline is a link to their page */
.byline__name { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size .25s ease; }
.byline__name:hover, .byline__name:focus-visible { background-size: 100% 1px; }
.more { text-align: center; margin: 0 0 5rem; }
/* ---------- List pages: sections, writers, search ---------- */
.page-head { max-width: var(--wide); margin: 2.6rem auto 2.4rem; padding: 0 var(--gutter); }
.page-head__kicker { margin: 0 0 .4rem; color: var(--red); font-size: .95rem; }
.page-head__title { margin: 0; padding-bottom: .5rem; font-size: clamp(2.4rem, 5vw, 3.6rem); border-bottom: 3px solid var(--ink); }
.page-head__desc { max-width: 40rem; margin-top: 1rem; color: var(--muted); font-style: italic; font-size: 1.2rem; }
.page-head .search-form { margin-top: 1.2rem; }
.pagination { max-width: var(--wide); margin: 0 auto 5rem; padding: 0 var(--gutter); }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.page-numbers {
  display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .6rem;
  border: 2px solid var(--ink); background: var(--card); text-decoration: none; font-size: .95rem;
}
.page-numbers.current { background: var(--ink); color: var(--paper); }
.page-numbers.dots { border-color: transparent; background: none; }
a.page-numbers:hover { background: var(--red); color: var(--paper); }
/* ---------- A story ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 50; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--bright); transform: scaleX(0); transform-origin: 0 50%; }
.admin-bar .progress { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .progress { top: 46px; }
}
.story__body p, .story__body li, .card__excerpt, .lead__dek { text-wrap: pretty; }
/* puck */
/* ---------- Grammar of the Game: the long-form layout ----------
   The series name sits centered above the title (New Yorker style, like "Letters from SoHo"), the
   title is set large and light, the photo runs wide and borderless, the text has more air, and the
   drop cap falls four lines deep. */
.story__rubric { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 1.6rem; }
.story__rubric a { display: inline-flex; align-items: center; gap: .9rem; font: 700 1.02rem/1.2 var(--caps); letter-spacing: .24em; text-transform: lowercase; color: var(--red); text-decoration: none; }
.story__rubric a::before, .story__rubric a::after { content: ""; width: 2.2rem; height: 1px; background: currentColor; }
.story__rubric a:hover { color: var(--ink); }
@media (max-width: 560px) {
  .story__rubric a { font-size: .9rem; letter-spacing: .2em; gap: .6rem; }
  .story__rubric a::before, .story__rubric a::after { width: 1.3rem; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* ---------- Subscribe and Account (PoP Companion) ----------
   The plans ([pop_subscribe]), the Account page ([pop_account]): sign in by emailed link, plan,
   Manage billing, the newsletter list; and the notices after each form. */
.pop-form { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 30rem; margin: 0 0 1rem; }
.pop-form input[type="email"] {
  flex: 1 1 14rem; min-height: 48px; padding: .5rem .9rem;
  font: inherit; font-size: 1.1rem; color: var(--ink);
  background: var(--card); border: 2px solid var(--ink); border-radius: 0;
}
.pop-form input[type="email"]:focus, .newsletter__form input[type="email"]:focus { outline: 3px solid var(--bright); outline-offset: 1px; }
.pop-form__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pop-notice {
  margin: 0 0 1.2rem; padding: .7rem 1rem; max-width: 34rem;
  background: var(--chip); border-left: 4px solid var(--ink); font-size: 1.05rem; line-height: 1.4;
}
.pop-notice--error { border-left-color: var(--bright); }
.site-footer .pop-notice { color: var(--ink); }
.btn--small { min-height: 36px; padding: .4em .9em .45em; font-size: .9rem; box-shadow: 3px 3px 0 var(--shade); }
.video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--night); border: 3px solid var(--ink); overflow: hidden; }
.video__frame iframe, .video__frame video, .video__play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { display: block; padding: 0; margin: 0; background: var(--night); cursor: pointer; }
.video__play:hover .video__poster { opacity: .85; }
.video__icon {
  position: absolute; left: 50%; top: 50%; width: 5.2rem; height: 5.2rem; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--bright); box-shadow: 0 0 0 4px var(--paper);
  transition: transform .15s;
}
.video__icon::before {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: .95rem 0 .95rem 1.6rem; border-color: transparent transparent transparent var(--paper);
}
.video__play:hover .video__icon, .video__play:focus-visible .video__icon { transform: translate(-50%, -50%) scale(1.06); }
.video__play:focus-visible { outline: 3px solid var(--bright); outline-offset: 3px; }
@media (max-width: 560px) {
  .video__icon { width: 3.8rem; height: 3.8rem; }
  .video__icon::before { border-width: .7rem 0 .7rem 1.15rem; }
}
.video__source { margin-left: .4em; font-style: normal; font-family: var(--caps); text-transform: lowercase; letter-spacing: .06em; font-size: .9em; }
/* phones: the small-caps labels a little less spaced, so a long one ("Latest analysis · Swipe")
   reads as one phrase across a narrow screen */
@media (max-width: 560px) {
  .label, .chip, .badge-paid, .btn, .nav__list, .score__event, .score__status, .score__foot, .tags a, .newsletter__kicker { letter-spacing: .1em; }
  .scoreboard__title { letter-spacing: .11em; }
}
.page-head__links ul { margin-top: .8rem; }
.newsletter--story {
  padding: 2rem 1.75rem; text-align: center;
  background: var(--red); color: var(--paper);
  border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--shade);
}
.newsletter__kicker { margin: 0 0 .3rem; font-size: .9rem; color: var(--chip); }
/* the PP icon (with its envelope) on a cream tile, set into the top edge of the box like a stamp */
.newsletter--story { position: relative; margin-top: 3.4rem; padding-top: calc(2rem + 30px); }
.newsletter__badge { position: absolute; left: 50%; top: -36px; transform: translateX(-50%); width: 66px; height: 66px; box-sizing: border-box; padding: 2px; margin: 0; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--shade); }
.newsletter--story .newsletter__title { margin: 0 0 .5rem; font-size: 2rem; }
.newsletter__blurb { margin: 0 auto 1.2rem; max-width: 30rem; font-style: italic; font-size: 1.2rem; }
.newsletter__actions { margin: 0; }
.newsletter--story .btn { background: var(--paper); color: var(--ink); }
/* the sign-up form PoP Companion provides: an email box and a button */
.newsletter__form { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; max-width: 30rem; margin: 0 auto; }
.newsletter__form input[type="email"] {
  flex: 1 1 14rem; min-height: 48px; padding: .5rem .9rem;
  font: inherit; font-size: 1.1rem; color: var(--ink);
  background: var(--card); border: 2px solid var(--ink); border-radius: 0;
}
.newsletter__note { flex-basis: 100%; margin: .4rem 0 0; font-size: .95rem; font-style: italic; }
.newsletter--inline .newsletter__kicker { font-size: .85rem; }
.newsletter--inline .newsletter__badge { width: 58px; height: 58px; top: -32px; padding: 2px; border-radius: 12px; }
.newsletter--inline .newsletter__title { margin: 0 0 .45rem; font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.newsletter--inline .newsletter__blurb { margin-bottom: 1rem; font-size: 1.1rem; }
.newsletter--inline .newsletter__signin { margin: .9rem 0 0; font-size: .98rem; }
.pc__reply a, #cancel-comment-reply-link { font: 700 .78rem/1 var(--caps); letter-spacing: .12em; text-transform: lowercase; color: var(--red-text); text-decoration: none; }
.pc__reply a:hover, #cancel-comment-reply-link:hover { text-decoration: underline; }
#cancel-comment-reply-link { margin-left: .8rem; }
/* ---------- Search form ---------- */
.search-form { display: flex; gap: .5rem; max-width: 32rem; }
.search-people { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.search-people a { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem .35rem .4rem; background: var(--card); border: 2px solid var(--ink); color: var(--ink); text-decoration: none; font-weight: 700; }
.search-people a:hover { background: var(--chip); }
.search-people img { width: 26px; height: 26px; object-fit: contain; }
.search-people .label { color: var(--muted); font-size: .7rem; }
.search-form label { flex: 1; }
.search-field { width: 100%; min-height: 48px; padding: .5rem .9rem; font: inherit; background: var(--card); border: 2px solid var(--ink); border-radius: 0; }
.search-submit { min-height: 48px; padding: 0 1.1rem; background: var(--ink); color: var(--paper); border: 2px solid var(--ink); font-size: .95rem; cursor: pointer; }
/* ---------- Not found ---------- */
.not-found { max-width: 40rem; margin: 4rem auto 5rem; padding: 0 var(--gutter); text-align: center; }
.not-found__score { display: flex; justify-content: center; gap: .5rem; margin: 0 0 1.2rem; }
.not-found__score span {
  display: grid; place-items: center; width: 5.5rem; height: 7rem;
  background: var(--night); color: var(--bright); border: 3px solid var(--ink); box-shadow: var(--shadow);
  font-weight: 700; font-size: 4.6rem; font-variant-numeric: lining-nums;
}
.not-found__title { font-size: clamp(2.4rem, 6vw, 3.4rem); margin: 0 0 .6rem; }
.not-found .search-form { margin: 1.4rem auto; }
/* ---------- Footer ---------- */
.site-footer { margin-top: 6rem; background: var(--ink); color: var(--paper); }
.site-footer__inner {
  max-width: var(--wide); margin: 0 auto; padding: 3.5rem var(--gutter) 2rem;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem 4rem;
}
.newsletter--footer .newsletter__title { margin: 0 0 .4rem; font-size: 2.2rem; color: var(--paper); }
.newsletter--footer .newsletter__blurb { margin: 0 0 1.2rem; max-width: none; color: #d9d1cb; }
.newsletter--footer .newsletter__form { justify-content: flex-start; margin: 0; }
.newsletter--footer .newsletter__form input[type="email"] { border-color: var(--paper); }
.newsletter--footer .btn { border-color: var(--paper); box-shadow: 4px 4px 0 var(--bright); }
.site-footer__side { text-align: right; }
.site-footer__title { font-size: 1.6rem; font-weight: 700; font-style: italic; text-decoration: none; }
.footer-nav { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 1.5rem; font-size: .95rem; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-decoration-color: var(--bright); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.site-footer a:focus-visible { outline-color: var(--paper); }
/* Also by Mark Travis: the other two sites, each with its icon */
.family { margin-top: 1.8rem; }
.family__label { margin: 0 0 .6rem; font-family: var(--caps); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: lowercase; color: #b3aaa5; }
.family__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 1.6rem; }
.family__list a { display: inline-flex; align-items: center; gap: .65rem; min-height: 48px; text-decoration: none; }
.family__list img { display: block; width: 40px; height: 40px; border-radius: 8px; transition: transform .15s ease; }
.family__list a:hover img, .family__list a:focus-visible img { transform: translateY(-2px); }
.family__list a:hover span { text-decoration: underline; text-decoration-color: var(--bright); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.site-footer__base {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.2rem;
  padding-top: 1.4rem; border-top: 1px solid #3a3236;
}
.site-footer__fine { margin: 0; font-size: .88rem; color: #b3aaa5; }
.footer-social ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  text-decoration: none; transition: color .2s ease, transform .2s ease;
}
.social-link:hover, .social-link:focus-visible { transform: translateY(-2px); }
.social-link--text { padding: 0 .5rem; font-size: .88rem; }
.footer-social .social-link { color: #b3aaa5; }
.footer-social .social-link:hover, .footer-social .social-link:focus-visible { color: var(--paper); }
.social-icon { display: block; width: 21px; height: 21px; }
/* ---------- WordPress core classes ---------- */
.alignleft { float: left; margin: .3em 1.4em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.4em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.sticky, .bypostauthor, .gallery-caption { outline: 0; }
/* ---------- Narrower screens ---------- */
@media (max-width: 1180px) {
  .scoreboard__list { --cols: 4; }
  .scoreboard--arena .scoreboard__list { --cols: 4; }
}
@media (max-width: 1000px) {
  .scoreboard__list, .scoreboard--arena .scoreboard__list { --cols: 3; }
  .lead__box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 30rem; }
}
@media (max-width: 760px) {
  :root { --gutter: 1.35rem; --shadow: 5px 5px 0 var(--shade); }
  body { font-size: 1.125rem; }
  .topbar { font-size: .85rem; }
  .topbar__date-long, .topbar__newsletter { display: none; }
  .topbar__date-short { display: inline; }
  /* Masthead on phones: ☰ at the left, the logo, Subscribe at the right; the sections open from ☰ */
  .masthead__row { grid-template-columns: auto 1fr auto; padding: .9rem 0; gap: .75rem; }
  .masthead__logo { grid-column: 2; justify-self: center; }
  .masthead__logo img { width: min(13.5rem, 100%); }
  .menu-toggle {
    display: grid; place-items: center; grid-column: 1; grid-row: 1;
    width: 3.1rem; height: 3.1rem; padding: 0;
    background: var(--card); border: 2px solid var(--ink); cursor: pointer;
  }
  .menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
    content: ""; display: block; width: 1.25rem; height: 2px; background: var(--ink); position: relative; transition: transform .2s ease, background-color .2s ease;
  }
  .menu-toggle__bars::before { position: absolute; top: -6px; }
  .menu-toggle__bars::after { position: absolute; top: 6px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .btn--subscribe { font-size: .95rem; padding: .5em .85em .55em; }
  .nav { border-top: 2px solid var(--ink); }
  /* folded behind the menu button only once the script is running; without it, the sections show as a list */
  .js .nav:not(.is-open) { display: none; }
  html:not(.js) .menu-toggle { display: none; }
  .nav__list { flex-direction: column; gap: 0; padding: .3rem 0 .6rem; }
  .nav__list a { padding: .8rem 0; border-bottom: 1px solid var(--rule); background-position: 0 calc(100% - .45rem); }
  .nav__list li:last-child a { border-bottom: 0; }
  .masthead__account, .masthead__search { display: none; }
  /* phones: Sign in and Search are in the menu, so the logo keeps its room */
  .nav__search { display: block; padding: .8rem 0 .6rem; border-top: 1px solid var(--rule); }
  .nav__search .search-form { max-width: none; }
  .nav__signin { display: block; padding: .8rem 0 1rem; border-top: 1px solid var(--rule); font-family: var(--caps); font-weight: 700; text-transform: lowercase; letter-spacing: .1em; color: var(--ink); text-decoration: none; }
  /* A story on a phone: the masthead stays at the top of the window all the way down. Once the story
     scrolls it slims to ☰, the logo and Share, with the reading line along its foot (js/header.js; the
     space it gives up is kept below it, so the story doesn't jump) */
  .has-sticky-mast .masthead { position: sticky; top: 0; z-index: 110; }
  .has-sticky-mast .masthead__row { transition: padding .22s ease; }
  .has-sticky-mast .masthead__logo img, .has-sticky-mast .menu-toggle, .has-sticky-mast .masthead__share { transition: width .22s ease, height .22s ease; }
  .masthead-room { height: 0; transition: height .22s ease; }
  .has-sticky-mast .masthead.is-measuring, .has-sticky-mast .masthead.is-measuring *, .masthead-room.is-measuring { transition: none !important; }
  .masthead.is-compact .masthead__row { padding: .5rem 0; }
  .masthead.is-compact .masthead__logo img { width: 7.75rem; }
  .masthead.is-compact .menu-toggle { width: 2.65rem; height: 2.65rem; }
  .masthead.is-compact .btn--cta { display: none; }
  .masthead.is-compact .masthead__share {
    display: grid; place-items: center; grid-column: 3; width: 2.65rem; height: 2.65rem; padding: 0;
    color: var(--ink); background: var(--card); border: 2px solid var(--ink); cursor: pointer;
  }
  .masthead__share svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .masthead__share:focus-visible { outline: 3px solid var(--bright); outline-offset: 2px; }
  .masthead__said:not(:empty) {
    display: block; position: absolute; top: calc(100% + .7rem); right: var(--gutter); padding: .55rem .9rem .5rem;
    background: var(--ink); color: var(--paper); font-family: var(--caps); font-weight: 700; font-size: .85rem; text-transform: lowercase; letter-spacing: .14em;
  }
  /* the reading line, along the foot of the masthead (over its rule) */
  .has-sticky-mast .progress { position: absolute; top: auto; bottom: -3px; height: 3px; z-index: 2; }
  .admin-bar.has-sticky-mast .progress { top: auto; }
  /* the sections drop down over the story, rather than pushing it down */
  .has-sticky-mast .masthead .nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; padding: 0 var(--gutter); background: var(--paper); border-top: 0; border-bottom: 3px solid var(--ink); max-height: calc(100vh - var(--mast-h, 4rem)); max-height: calc(100dvh - var(--mast-h, 4rem)); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 10px 0 rgba(26, 20, 24, .08); }
  .has-sticky-mast .masthead .nav.is-open { border-top: 3px solid var(--ink); margin-top: 0; }
  /* links and jumps within the story stop below it */
  html { scroll-padding-top: var(--mast-h, 0px); }
  /* Scoreboard: two and a bit cards, so it's clear they swipe */
  .scoreboard { margin-bottom: 2rem; }
  .scoreboard__head { padding: 1.4rem 0 .9rem; }
  .scoreboard__title { font-size: .92rem; }
  .scoreboard__swipe { display: inline; }
  .scoreboard:not(.is-scrollable) .scoreboard__swipe { display: none; }
  /* nothing past the edge, as when a ball leaves one game */
  .scoreboard__arrows { display: none; }
  .scoreboard__list { --gap: 1rem; grid-auto-columns: min(15.5rem, 64%); margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scroll-padding-left: 0; }
  .score__link, div.score { padding: .75rem .85rem .7rem; }
  .score__team { font-size: 1.55rem; }
  .score__event, .score__status, .score__foot { font-size: .8rem; }
  .scoreboard--arena .scoreboard__inner { grid-template-columns: minmax(0, 1fr); }
  .scoreboard--arena .scoreboard__title { grid-row: 1; padding: .9rem var(--gutter) .3rem; font-size: .9rem; }
  .scoreboard--arena .scoreboard__arrows { display: none; }
  .scoreboard--arena .scoreboard__list { grid-column: 1; grid-row: 2; grid-auto-columns: min(15rem, 60%); margin: 0; padding: 0; }
  .scoreboard--arena .score__link { padding: .75rem 1rem .9rem; }
  .scoreboard--arena .score__link { border-left: 0; border-right: 1px solid var(--night-rule); }
  .scoreboard--arena .score__team { font-size: 1.65rem; }
  /* Featured story: the photo above, the red panel below */
  .lead { margin-bottom: 3.2rem; }
  .lead__box { grid-template-columns: minmax(0, 1fr); min-height: 0; box-shadow: 8px 8px 0 var(--shade); }
  .lead__media { aspect-ratio: 4 / 3; border-right: 0; border-bottom: 3px solid var(--ink); }
  .lead__panel { padding: 1.6rem 1.4rem 1.7rem; }
  .lead__title { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .lead__dek { font-size: 1.18rem; }
  .lead__byline { font-size: .85rem; }
  /* Archive: a small square photo beside each title, and two lines of the story to draw readers in */
  .section-title { font-size: 2rem; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .card { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
  .card__media { aspect-ratio: 1; margin: 0; }
  .card__title { font-size: 1.4rem; }
  .card__excerpt { margin: .2rem 0 0; font-size: 1rem; line-height: 1.4; }
  .card__byline { margin-top: .4rem; }
  .card__byline .byline__author, .card__byline .byline__author + .sep { display: none; }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); padding-top: 2.6rem; }
  .site-footer__side { text-align: left; }
  .footer-nav { justify-content: flex-start; }
  .family__list { justify-content: flex-start; }
  .site-footer__base { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .has-sticky-mast .masthead *, .masthead-room { transition: none !important; }
}
@media (min-width: 601px) and (max-width: 760px) {
  .admin-bar.has-sticky-mast .masthead { top: 46px; }
}
@media (max-width: 420px) {
  .card { grid-template-columns: 6.5rem minmax(0, 1fr); gap: .9rem; }
  .card__title { font-size: 1.25rem; }
  .btn--subscribe { font-size: .85rem; padding: .5em .65em; }
  .masthead__logo img { width: min(11.5rem, 100%); }
}
/* ---------- Print ---------- */
@media print {
  .topbar, .masthead .nav, .menu-toggle, .btn--subscribe, .scoreboard, .progress, .newsletter, .post-nav, .comments, .site-footer, .toc, .sn-ref { display: none !important; }
  body { background: #fff; font-size: 11.5pt; }
  .lead__box, .score__link, div.score { box-shadow: none; }
}
/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* ---------- Who writes this: after the front page's stories, and above the Subscribe page's plans ---------- */
.writer { max-width: var(--wide); margin: 0 auto 3.2rem; padding: 0 var(--gutter); }
.writer__inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem 2.4rem; align-items: center;
  padding: 2rem 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.writer .writer__photo { width: 9.5rem; height: 9.5rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--ink); display: block; }
.writer__kicker { margin: 0 0 .35rem; font-size: .9rem; color: var(--red); }
.writer__name { margin: 0 0 .5rem; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05; }
.writer__name a { color: inherit; text-decoration: none; }
.writer__name a:hover { text-decoration: underline; text-decoration-color: var(--bright); text-decoration-thickness: 3px; text-underline-offset: .12em; }
.writer__bio { margin: 0 0 1.2rem; max-width: 46rem; font-size: 1.2rem; line-height: 1.5; font-style: italic; }
.writer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.writer__links ul { list-style: none; margin: 0 0 0 -.65rem; padding: 0; display: flex; flex-wrap: wrap; }
.writer__links .social-link { color: var(--ink); }
.writer__links .social-link:hover, .writer__links .social-link:focus-visible { color: var(--bright); }
.writer--subscribe { max-width: 48rem; margin-top: 2.6rem; margin-bottom: 1.5rem; }
.writer--subscribe .writer__photo { width: 7rem; height: 7rem; }
.writer--subscribe .writer__bio { font-size: 1.1rem; margin-bottom: .8rem; }
@media (max-width: 760px) {
  .writer__inner { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.6rem 0; }
  .writer .writer__photo { width: 6rem; height: 6rem; }
  .writer__bio { font-size: 1.1rem; }
}
/* ---------- The calls to action: gold ----------
   .btn--cta: Subscribe in the header, the writer box and the drawer, the paywall, the yearly plan, the
   Account page's Subscribe, and the sign-up forms. Nothing else on the site is gold. */
.btn.btn--cta { background: var(--gold); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--shade); }
.btn.btn--cta:hover { background: var(--gold); box-shadow: 6px 6px 0 var(--shade); }
.btn.btn--cta:active { box-shadow: 1px 1px 0 var(--shade); }
/* the dark footer: a gold edge and a bright red shadow */
.newsletter--footer .btn.btn--cta { border-color: var(--gold); box-shadow: 4px 4px 0 var(--bright); }
.newsletter--footer .btn.btn--cta:hover { box-shadow: 6px 6px 0 var(--bright); }
/* ---------- 90′ and 4Q badges as links: every story of that type ---------- */
a.badge-type { text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
a.badge-type:hover, a.badge-type:focus-visible { background: var(--red); border-color: var(--red); color: var(--paper); }
.lead a.badge-type:hover, .lead a.badge-type:focus-visible { background: var(--chip); border-color: var(--chip); color: var(--red); }
.label--no { font-size: .9rem; color: var(--muted); }
/* ---------- Team pages and team links ---------- */
.score__team-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; }
.score__team-link .score__abbr { text-decoration: none; }
.score__team-link:hover, .score__team-link:focus-visible { color: var(--red); }
.score__team-link:hover .score__abbr, .score__team-link:focus-visible .score__abbr, .score__team-link:not(:has(.score__abbr)):hover { text-decoration: underline; text-decoration-color: var(--bright); text-decoration-thickness: 3px; text-underline-offset: .14em; }
.page-head--team { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.4rem; align-items: end; }
.page-head--team .team-head__logo { grid-row: 1 / span 2; width: clamp(4.5rem, 9vw, 7rem); height: clamp(4.5rem, 9vw, 7rem); object-fit: contain; margin-bottom: .7rem; }
.page-head--team .page-head__kicker, .page-head--team .page-head__title, .page-head--team .page-head__titlerow { grid-column: 2; }
/* the name and Follow on one line, over the name's rule */
.page-head__titlerow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .4rem 1.2rem; padding-bottom: .5rem; border-bottom: 3px solid var(--ink); }
.page-head__titlerow .page-head__title { padding-bottom: 0; border-bottom: 0; min-width: 0; }
/* phones: Follow shrinks to its star, so it stays beside the name (the name wraps instead) */
@media (max-width: 640px) {
  .page-head__titlerow { flex-wrap: nowrap; }
}
.page-head--team .page-head__desc { grid-column: 1 / -1; }
/* said by the button's tooltip and to screen readers */
/* ---------- The scoreboard's sport filter ---------- */
.scoreboard__head { flex-wrap: wrap; }
.scoreboard__filter { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-right: auto; margin-left: 1.2rem; }
/* the balls: as on the tactical analysis board at mark-travis.com; the pressed one fills in, the others dim */
.scoreboard__ball {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  background: var(--card); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--shade);
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, opacity .15s, filter .15s;
}
.scoreboard__ball svg { display: block; width: 26px; height: 26px; }
.scoreboard__ball:hover, .scoreboard__ball:focus-visible { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shade); opacity: 1; filter: none; }
.scoreboard__ball:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.scoreboard__ball[aria-pressed="true"] { background: var(--bright); box-shadow: 4px 4px 0 var(--shade); }
.scoreboard__ball:is([data-sport="basketball"], [data-sport="football"])[aria-pressed="true"] { background: var(--gold); }
/* the orange and brown balls read better on gold than on red */
.scoreboard__filter.is-narrowed .scoreboard__ball:not([aria-pressed="true"]) { opacity: .5; filter: saturate(.35); }
.scoreboard--arena .scoreboard__ball { border-color: var(--paper); box-shadow: 3px 3px 0 var(--night-rule); background: var(--night); }
.scoreboard--arena .scoreboard__ball[aria-pressed="true"] { background: var(--bright); border-color: var(--paper); }
.scoreboard--arena .scoreboard__ball:is([data-sport="basketball"], [data-sport="football"])[aria-pressed="true"] { background: var(--gold); }
.score[hidden] { display: none !important; }
@media (max-width: 640px) {
  .scoreboard__filter { margin-left: .9rem; }
}
/* ---------- Grammar of the Game: its number, and the series page ---------- */
.story__rubric .story__no { font: 700 1.02rem/1.2 var(--caps); letter-spacing: .2em; text-transform: lowercase; color: var(--ink); }
.story__rubric > span:first-child { display: inline-flex; align-items: center; gap: .9rem; font: 700 1.02rem/1.2 var(--caps); letter-spacing: .24em; text-transform: lowercase; color: var(--red); }
.story__rubric > span:first-child::before, .story__rubric > span:first-child::after { content: ""; width: 2.2rem; height: 1px; background: currentColor; }
/* ---------- The Supreme Court: a slip opinion ----------
   Set in TeX Gyre Schola (a Century Schoolbook, as the Court prints in), justified, with indented
   paragraphs and no space between them, centred numerals for the parts, capitals for the caption and
   small capitals for the justices. Each opinion is a white page on the paper. */
@font-face { font-family: "Schola"; src: url("../fonts/schola/schola-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Schola"; src: url("../fonts/schola/schola-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Schola"; src: url("../fonts/schola/schola-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Schola"; src: url("../fonts/schola/schola-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
:root { --court: "Schola", "Century Schoolbook", "New Century Schoolbook", "C059", Georgia, serif; --sheet: #fffefb; --sheet-ink: #161314; }
/* Arena Lights: the sport filter sits under the title, at the left of the band */
.scoreboard--arena .scoreboard__filter { grid-column: 1; grid-row: 1; align-self: end; margin: 0; padding: 0 1.5rem 1rem max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter))); }
.scoreboard--arena:has(.scoreboard__filter:not([hidden])) .scoreboard__title { align-self: start; padding-top: 1.1rem; }
@media (max-width: 760px) {
  .scoreboard--arena .scoreboard__filter { grid-row: 2; align-self: auto; padding: .2rem var(--gutter) .8rem; }
  .scoreboard--arena:has(.scoreboard__filter:not([hidden])) .scoreboard__list { grid-row: 3; }
}
.page-head__kicker a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.page-head__kicker a:hover { color: var(--ink); }
/* ---------- A player's jersey (inc/jersey.php): the back of it, in his team's colours ---------- */
@font-face { font-family: "Jersey Name"; src: url("../fonts/jersey/oswald-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Jersey Name"; src: url("../fonts/jersey/oswald-700-latin-ext.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jersey Number"; src: url("../fonts/jersey/graduate.woff2") format("woff2"); font-weight: 400; font-display: swap; }
.jersey { display: block; overflow: visible; filter: drop-shadow(4px 5px 0 rgba(26, 20, 24, .9)); }
.jersey__name { font-family: "Jersey Name", "Oswald", "Arial Narrow", sans-serif; font-weight: 700; letter-spacing: .12em; }
.jersey__number { font-family: "Jersey Number", "Graduate", "Rockwell", serif; letter-spacing: -.02em; }
.badge-type--around { display: inline-flex; align-items: center; gap: .4rem; padding: .12em .55em .14em .35em; font-family: var(--caps); font-size: .74rem; text-transform: lowercase; letter-spacing: .12em; }
.badge-type--around .around-badge { display: block; width: auto; height: 1.05rem; overflow: visible; }
.badge-type--rondo { display: inline-flex; align-items: center; gap: .4rem; padding: .12em .55em .14em .35em; font-family: var(--caps); font-size: .74rem; text-transform: lowercase; letter-spacing: .12em; }
.badge-type--rondo .rondo-badge { display: block; width: auto; height: 1.05rem; overflow: visible; }
.save {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .35rem .85rem .4rem .65rem;
  font: 700 .8rem/1 var(--caps); letter-spacing: .12em; text-transform: lowercase; color: var(--ink); text-decoration: none;
  background: var(--card); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--shade); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s;
}
.save:hover, .save:focus-visible { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shade); color: var(--ink); background-image: none; }
.save:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shade); }
.save__icon { width: 1.05rem; height: 1.05rem; flex: none; }
.save.is-on { background: var(--gold); --save-fill: var(--ink); }
.save--card { min-height: 0; width: 34px; height: 34px; padding: 0; justify-content: center; margin-left: auto; box-shadow: 2px 2px 0 var(--shade); border-width: 1.5px; }
.save--card .save__icon { width: .95rem; height: .95rem; }
.card__byline { display: flex; align-items: center; gap: .6rem; }
.card__by { min-width: 0; }
::highlight(pop-quote) { background-color: rgb(255 201 40 / .55); color: inherit; }
/* ---------- On the Bounce (PoP Companion's [dish], inc/bounce.php; js/bounce.js) ----------
   The story told dish by dish: each a numbered section, its number a basketball that links to it;
   above them a row of the numbered balls that jump to each one, staying at the top of the window. */
.badge-type--bounce { display: inline-flex; align-items: center; gap: .35rem; padding: .12em .55em .14em .2em; font-family: var(--caps); font-size: .74rem; text-transform: lowercase; letter-spacing: .12em; }
.badge-type--bounce .bball { width: 1.15rem; height: 1.15rem; }
.bball__skin { fill: #e8742a; stroke: var(--ink); stroke-width: 2.4; }
.bball__seams { stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; }
.bball__patch { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.bounce.is-bouncing-target .bnum, .is-bouncing { animation: b-bounce .75s cubic-bezier(.3,.6,.4,1); transform-origin: 50% 100%; }
@keyframes b-bounce { 0% { transform: translateY(0); } 30% { transform: translateY(-14px); } 52% { transform: translateY(0) scale(1.12, .84); } 66% { transform: translateY(-6px) scale(.97, 1.03); } 82% { transform: translateY(0) scale(1.05, .93); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .is-bouncing, .story .badge-type--bounce .bball { animation: none; }
}
/* Start here: On the Bounce's ball in place of the badge's letters */
.badge-type--ball { padding: 0; border: 0; background: none; width: 2.2em; height: 2.2em; display: inline-grid; place-items: center; }
.badge-type--ball svg { width: 100%; height: 100%; }
/* ---------- 90′: the stopwatch in place of the chips (like the Rondo mark) ---------- */
.story__ninety { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 0 1.3rem; }
.story__ninety a { display: block; text-decoration: none; background: none; }
.watch { display: block; width: 5.4rem; height: auto; overflow: visible; }
.watch__ink, .watch__ticks line { stroke: var(--ink); }
.watch__ht { stroke: var(--bright); }
.watch__sweep { stroke: var(--bright); opacity: .9; stroke-dashoffset: 0; }
.watch__hand line { stroke: var(--ink); }
.watch__hand circle { fill: var(--ink); }
.watch__hand { transform-box: view-box; transform-origin: 100px 120px; transform: rotate(360deg); }
.watch__ninety { font: 700 30px var(--text); fill: var(--paper); }
.watch.is-on .watch__hand { animation: watch-hand 2.6s .2s both; }
.watch.is-on .watch__sweep { animation: watch-sweep 2.6s .2s both; }
.watch.is-on .watch__ninety { animation: watch-ninety 2.6s .2s both; }
@keyframes watch-hand { 0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45, 0, .3, 1); } 40% { transform: rotate(180deg); } 57% { transform: rotate(180deg); animation-timing-function: cubic-bezier(.45, 0, .3, 1); } 94%, 100% { transform: rotate(360deg); } }
@keyframes watch-sweep { 0% { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(.45, 0, .3, 1); } 40% { stroke-dashoffset: 50; } 57% { stroke-dashoffset: 50; animation-timing-function: cubic-bezier(.45, 0, .3, 1); } 94%, 100% { stroke-dashoffset: 0; } }
@keyframes watch-ninety { 0%, 90% { opacity: 0; } 100% { opacity: 1; } }
.story__ninety a:hover .watch__ink { stroke: var(--red); }
@media (prefers-reduced-motion: reduce) {
  .watch.is-on .watch__hand, .watch.is-on .watch__sweep, .watch.is-on .watch__ninety { animation: none; }
}
:root { --lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M4 8V5.5a4 4 0 0 1 8 0V8h1.5A1.5 1.5 0 0 1 15 9.5v7A1.5 1.5 0 0 1 13.5 18h-11A1.5 1.5 0 0 1 1 16.5v-7A1.5 1.5 0 0 1 2.5 8H4zm2 0h4V5.5a2 2 0 0 0-4 0V8z'/%3E%3C/svg%3E"); }
/* The front page's "New here?" row: signed-out readers, their first three visits (hidden after, or once closed) */
.formats { max-width: var(--wide); margin: -2rem auto 2.6rem; padding: 0 var(--gutter); }
.pop-known .formats { display: none; }
.formats__in { padding: 1rem 0 1.1rem; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.formats__head { display: flex; align-items: baseline; gap: 1rem; margin: 0 0 .9rem; font: 700 .78rem/1 var(--caps); letter-spacing: .14em; text-transform: lowercase; }
.formats__title { color: var(--red-text); }
.formats__start { margin-left: auto; color: var(--ink); text-decoration: none; }
.formats__start:hover { text-decoration: underline; text-decoration-color: var(--bright); text-underline-offset: 3px; }
.formats__close { margin-left: .4rem; padding: 0 .2rem; background: none; border: 0; color: var(--muted); font: 400 1.4rem/1 var(--serif, serif); cursor: pointer; }
.formats__start + .formats__close { margin-left: .4rem; }
.formats__head > .formats__close:only-of-type:not(.formats__start + *) { margin-left: auto; }
.formats__close:hover { color: var(--ink); }
.formats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.formats__link { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .8rem; align-items: start; color: var(--ink); text-decoration: none; font-size: .98rem; line-height: 1.4; }
.formats__link strong { display: block; margin-bottom: .15rem; font-size: 1.08rem; }
.formats__link:hover strong { text-decoration: underline; text-decoration-color: var(--bright); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.formats__text { color: var(--muted); }
.formats__text strong { color: var(--ink); }
.formats__icon svg, .formats__icon .watch { display: block; width: 2.6rem; height: auto; }
@media (max-width: 1000px) {
  .formats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .formats__list { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .formats__link { font-size: .95rem; }
}
.formats__start { white-space: nowrap; }
@media (max-width: 560px) {
  .formats__title-more { display: none; }
}
.byline__author { white-space: nowrap; }
.score__rec { align-self: center; margin-left: .1em; font: 400 .5em/1 var(--text); letter-spacing: .02em; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
/* ====== 3.93 ====== */
/* the front page's two buttons under the archive: More from the archive, Every game */
.more--two { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.2rem; }
/* ====== 3.94 ====== */
/* ---------- The front page's pitch (template-parts/welcome.php): signed-out readers, under the featured story ----------
   What the site is, the box to join free, and what's free and what the monthly plan buys. "New here?" follows in the same block,
   under a lighter rule; when that row has gone (a reader's fourth visit), the pitch closes the block itself. */
.welcome { max-width: var(--wide); margin: -1.6rem auto 0; padding: 0 var(--gutter); scroll-margin-top: 1rem; }
.welcome__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 1.6rem 4rem; padding: 2rem 0 2.1rem; border-top: 3px solid var(--ink); }
.welcome__kicker { margin: 0 0 .5rem; font-size: .9rem; letter-spacing: .16em; color: var(--red-text); }
.welcome__title { margin: 0; font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.04; letter-spacing: -.012em; text-wrap: balance; }
.welcome__join .newsletter__form { justify-content: flex-start; max-width: none; margin: 0; }
.welcome__join .newsletter__form input[type="email"] { flex-basis: 12rem; }
.welcome__join .pop-notice { margin-bottom: .9rem; }
.welcome__note { margin: .9rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--muted); }
.welcome__free, .welcome__paid { display: block; }
.welcome__paid { margin-top: .15rem; }
.welcome__note a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--bright); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.welcome + .formats { margin-top: 0; }
.welcome + .formats .formats__in { border-top: 1px dashed var(--rule); }
.pop-known .welcome { margin-bottom: 2.6rem; }
.pop-known .welcome__in { border-bottom: 1px solid var(--ink); }
.formats__swipe { display: none; }
@media (max-width: 1000px) {
  .welcome__in { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
}
@media (max-width: 760px) {
  .welcome { margin-top: -1rem; }
  .welcome__in { padding: 1.5rem 0 1.6rem; }
  /* The masthead on phones, with the theme's own logo: the name on one line (images/logo-line.svg), in a lower bar */
  .masthead--line .masthead__row { padding: .65rem 0; }
  .masthead--line .masthead__logo img { width: min(14.5rem, 100%); }
  .masthead--line .menu-toggle { width: 2.75rem; height: 2.75rem; }
  .masthead--line.is-compact .masthead__logo img { width: min(12.5rem, 100%); }
}
/* Phones. The pitch: the headline, the box and the two lines under it, in about the room "New here?" gives back.
   "New here?": one strip to swipe, each way a game is told a small card, where four rows were stacked. */
@media (max-width: 560px) {
  .welcome__in { gap: 1rem; padding: 1.2rem 0 1.3rem; }
  .welcome__kicker { margin-bottom: .35rem; font-size: .78rem; letter-spacing: .1em; }
  .welcome__title { font-size: 1.9rem; }
  .welcome__join .newsletter__form input[type="email"] { flex-basis: 8rem; min-width: 0; }
  .welcome__note { margin-top: .7rem; font-size: .95rem; }
  .formats__swipe { display: inline; color: var(--muted); }
  .formats__list { display: flex; grid-template-columns: none; gap: .8rem; margin: 0 calc(-1 * var(--gutter)) 0 -4px; padding: 4px var(--gutter) 6px 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 4px; scrollbar-width: none; }
  .formats__list::-webkit-scrollbar { display: none; }
  .formats__item { flex: 0 0 min(15.5rem, 70%); scroll-snap-align: start; }
  .formats__link { height: 100%; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .65rem; padding: .75rem .8rem .8rem; background: var(--card); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--shade); font-size: .92rem; line-height: 1.35; }
  .formats__icon svg, .formats__icon .watch { width: 2.1rem; }
  .formats__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
}
@media (max-width: 420px) {
  .masthead--line .masthead__logo img { width: min(13.5rem, 100%); }
}