/*
 * PoP: a story or a page: its layout, contents list, notes, videos, diagrams, drawings on the broadcast, the paywall, sharing and the discussion.
 * Cut from style.css; loaded only where it is used.
 */
.drawer__head .story__chips { margin: 0 0 .8rem; justify-content: flex-start; text-align: left; }
.drawer__head .story__dek { margin: 0 0 .8rem; font-size: 1.25rem; font-style: italic; line-height: 1.4; }
.drawer__head .story__byline { margin: 0 0 1.4rem; }
/* no end mark: the story goes on */
.drawer__body .paywall { margin-top: 1.6rem; }
.drawer__body .paywall::before { background: linear-gradient(to bottom, transparent, var(--card)); }
.story__byline .byline__name { background-image: linear-gradient(var(--bright), var(--bright)); background-size: 100% 2px; }
.story__byline .byline__name:hover { color: var(--red); }
.story { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.story__head { max-width: 50rem; margin: 3.2rem auto 2.4rem; text-align: center; }
.story__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 0 1rem; }
.story__chips .label--cat { font-size: 1rem; }
.story__title { margin: 0 0 1rem; font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
.story__dek { margin: 0 auto 1.3rem; max-width: 40rem; font-size: clamp(1.25rem, 2.6vw, 1.5rem); font-style: italic; line-height: 1.38; color: var(--muted); text-wrap: pretty; }
.story__byline { margin: 0; font-size: .95rem; color: var(--ink); }
.story__score { max-width: 21rem; margin: 2rem auto 0; text-align: left; }
.story__score .score__team { font-size: 2rem; }
/* 90′ and On the Bounce: the mark, headline, dek and byline, the photo, then the score card under it */
.story__figure--top { margin-bottom: 0; }
.story__figure.story__figure--scored { margin-bottom: 1.6rem; }
.story__score.story__score--under-photo { margin: 0 auto 2.8rem; }
/* the photo: up to 70rem wide at its own shape, nothing cut (Cutout Studio makes them 3:2, the ball large and
   running off the bottom) */
.story__figure { max-width: 70rem; margin: 0 auto 2.8rem; }
.story__banner { margin: 0 auto 2.8rem; padding: 0 var(--gutter); }
.story__banner .score-banner { margin-bottom: 0; }
/* PoP Companion's score banner, in place of the Featured Image */
.story__figure img { width: 100%; border: 3px solid var(--ink); }
.story__figure figcaption { max-width: var(--measure); margin: .6rem auto 0; font-size: .95rem; font-style: italic; color: var(--muted); }
/* a photo's caption: in its bottom right-hand corner, on a dark band (stories, and captioned photos in the text) */
.story__figure:not(.is-grammar *), .story__body .wp-caption { position: relative; }
.story__figure:not(.is-grammar *) figcaption, .story__body .wp-caption .wp-caption-text {
  position: absolute; right: 3px; bottom: 3px; z-index: 1; max-width: min(34rem, 72%); margin: 0; padding: .32em .7em .36em;
  background: rgba(26, 20, 24, .78); color: #fff7e8; font-size: .8rem; font-style: normal; line-height: 1.35; text-align: right;
}
.story__figure:not(.is-grammar *) figcaption a, .story__body .wp-caption .wp-caption-text a { color: inherit; }
.story__body .wp-caption .wp-caption-text { right: 2px; bottom: 2px; }
.story__body .wp-caption img { display: block; }
@media (max-width: 560px) {
  .story__figure:not(.is-grammar *) figcaption, .story__body .wp-caption .wp-caption-text { max-width: 86%; font-size: .7rem; padding: .25em .55em .3em; }
}
.story__body {
  max-width: var(--measure); margin: 0 auto;
  font-size: 1.32rem; line-height: 1.62;
  hyphens: manual; hanging-punctuation: first;
}
@media (max-width: 560px) {
  .story__body { font-size: 1.2rem; line-height: 1.6; }
}
.story__body > * { margin-top: 0; margin-bottom: 1.2em; }
.story__body p, .story__body li { text-wrap: pretty; }
/* no word alone on a paragraph's last line */
.story__body a { text-decoration-line: underline; text-decoration-color: var(--bright); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.story__body a:hover { background: color-mix(in srgb, var(--bright) 18%, transparent); }
.story__body h2 { font-size: 1.8rem; margin: 2em 0 .7em; }
.story__body h3 { font-size: 1.4rem; margin: 1.8em 0 .6em; }
.story__body h4 { font-size: 1rem; color: var(--red); margin: 2em 0 .6em; }
.story__body blockquote { margin: 1.6em 0; padding: 0 0 0 1.2em; border-left: 4px solid var(--bright); font-style: italic; }
.story__body blockquote p:last-child { margin-bottom: 0; }
.story__body hr, .story__body .wp-block-separator { border: 0; height: auto; margin: 2.2em 0; text-align: center; }
.story__body hr::before, .story__body .wp-block-separator::before { content: "\00D7 \00D7 \00D7"; letter-spacing: 1em; color: var(--bright); font-weight: 700; }
.story__body img { border: 2px solid var(--ink); }
.story__body .wp-caption-text, .story__body figcaption { font-size: .9rem; font-style: italic; color: var(--muted); margin-top: .5rem; }
.story__body .alignwide { width: min(60rem, calc(100vw - 2 * var(--gutter))); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.story__body .alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
.story__body .alignfull img { border-left: 0; border-right: 0; }
.story__body iframe { max-width: 100%; }
/* The first paragraph opens with a drop cap in the bright red */
.story__body > p:first-of-type::first-letter {
  float: left; font-weight: 700; font-size: 4.4em; line-height: .8; margin: .06em .08em 0 0; color: var(--bright);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .story__body > p:first-of-type::first-letter { float: none; margin: 0 .08em 0 0; font-size: 1em; line-height: 1; -webkit-initial-letter: 3; initial-letter: 3; }
}
/* The opening line in small capitals, after the drop cap (Mots Caps: lowercase letters become small caps) */
.story__body > p:first-of-type::first-line { font-family: var(--caps); }
/* no extra letter spacing here: Chrome drops it from a link in this line when the link is hovered, and the link squeezes up */
/* Pull quotes: a paragraph with the Pull quote format (Formats menu, or the Code tab's "pull quote" button) */
.story__body .pullquote {
  margin: 2.2em 0;
  padding: .8em 0 .9em;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-size: 1.55em; font-weight: 700; font-style: italic;
  line-height: 1.18; letter-spacing: -.005em;
  text-align: center; text-wrap: balance;
}
.story__body .pullquote::before {
  content: "\00D7 \00D7 \00D7";
  display: block; margin: 0 0 .5em;
  font-size: .5em; font-style: normal; letter-spacing: .8em; color: var(--bright);
}
/* a pull quote never takes the drop cap, small-caps opening or end mark */
.story__body p.pullquote::first-letter { float: none; margin: 0; padding: 0; font-size: inherit; color: inherit; -webkit-initial-letter: normal; initial-letter: normal; }
.story__body p.pullquote::first-line { font-family: inherit; letter-spacing: inherit; }
.story__body > p.pullquote:last-of-type::after { content: none; }
@media (min-width: 900px) {
  .story__body .pullquote { margin-inline: -3.5rem; }
}
/* The end mark: the section's icon after the last paragraph (a small square for anything else) */
.story__body > p:last-of-type::after {
  content: ""; display: inline-block; width: .82em; height: .82em; margin-left: .35em; vertical-align: -.06em;
  background: var(--bright);
  -webkit-mask: var(--end-mark, none) center / contain no-repeat; mask: var(--end-mark, none) center / contain no-repeat;
}
.category-nba { --end-mark: url("../end-marks/nba.svg"); }
/* basketball hoop */
.category-nfl { --end-mark: url("../end-marks/nfl.svg"); }
/* football */
.category-mlb { --end-mark: url("../end-marks/mlb.svg"); }
/* baseball */
.category-futbol, .category-soccer { --end-mark: url("../end-marks/futbol.svg"); }
/* ball in flight */
.category-tennis { --end-mark: url("../end-marks/tennis.svg"); }
/* tennis ball */
.category-hockey, .category-nhl { --end-mark: url("../end-marks/hockey.svg"); }
/* a cut-off Subscribers-only story ends at the paywall instead */
.story__body:has(> .paywall) > p:last-of-type::after { content: none; }
/* ---------- Table of contents and linkable sections ----------
   Stories with two or more section headings open with a Contents list; each section's number
   (1., 2., A.) sits above its heading and links to it. */
.story__body .toc {
  margin: 0 0 2.4em;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-size: 1.4rem;
  line-height: 1.25;
}
.toc__label {
  display: flex; justify-content: space-between; align-items: center;
  list-style: none; cursor: pointer;
  padding: .85em 0;
  font-size: .9rem; line-height: 1; color: var(--red);
}
.toc__label::-webkit-details-marker { display: none; }
.toc__label::after { content: "\2212"; font: 700 1.2rem/1 var(--text); color: var(--red-text); }
.toc:not([open]) .toc__label::after { content: "+"; }
.story__body .toc__list { list-style: none; margin: 0; padding: 0 0 .6em; }
.story__body .toc li { margin: 0; }
.story__body .toc a {
  display: grid; grid-template-columns: 1.6em minmax(0, 1fr); align-items: baseline;
  padding: .3em .4em;
  color: inherit; text-decoration: none; font-weight: 700;
  transition: background-color .15s;
}
.story__body .toc a:hover, .story__body .toc a:focus-visible { background: color-mix(in srgb, var(--bright) 14%, transparent); }
.toc__num { font-variant-numeric: lining-nums; color: var(--red-text); }
.story__body .toc__list > li > ol { list-style: none; margin: 0; padding: 0; font-size: .8em; }
.story__body .toc__list ol a { padding-left: 2.4em; grid-template-columns: 1.7em minmax(0, 1fr); font-weight: 400; font-style: italic; color: var(--muted); }
.toc__list ol .toc__num { font-style: normal; }
@media (max-width: 640px) {
  .story__body .toc { font-size: 1.2rem; }
}
/* each section heading's number, on its own line above it, is the link to the section */
.story__body .sec-num {
  display: block; width: max-content;
  margin-bottom: .2em;
  font-size: 1.15rem; font-weight: 700; font-style: normal;
  font-variant-numeric: lining-nums; letter-spacing: .04em;
  color: var(--red-text); text-decoration: none;
  background: none;
}
.story__body .sec-num:hover, .story__body .sec-num:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; background: none; }
.story__body h2[id], .story__body h3[id] { scroll-margin-top: calc(var(--strip-h, 0px) + 1.5rem); }
.story__body h2[id]:target .sec-num, .story__body h3[id]:target .sec-num { text-decoration: underline; }
/* ---------- Notes ----------
   PoP Companion's [note]. Narrow screens: the number opens the note below the line.
   Wide screens: the notes sit in the right margin beside their line. */
.sn-ref { line-height: 0; }
.story__body .sn-ref__btn {
  font: 700 .72em/1 var(--text);
  font-variant-numeric: lining-nums;
  color: var(--red-text);
  text-decoration: none; background: none;
  border: 0; padding: .45em .3em; margin: -.45em -.18em;
  cursor: pointer; vertical-align: super;
}
.story__body .sn-ref__btn:hover { text-decoration: underline; background: none; }
.sidenote {
  display: block;
  margin: .7em 0 .9em;
  padding: .75em 1em;
  border-left: 3px solid var(--bright);
  background: var(--card);
  font-size: .8em; line-height: 1.5;
  font-style: normal; letter-spacing: 0; text-indent: 0;
}
.story__body .sidenote__num {
  font: 700 .95em/1 var(--text); font-variant-numeric: lining-nums;
  color: var(--red-text); text-decoration: none; margin-right: .25em; background: none;
}
.has-sidenotes-js .sidenote { display: none; }
.has-sidenotes-js .sidenote.is-open { display: block; }
.story__body .sidenote:target, .story__body .sidenote.is-open { box-shadow: inset 0 0 0 1px var(--rule); }
@media (min-width: 1240px) {
  .story__body .sidenote, .story__body.has-sidenotes-js .sidenote {
    display: block;
    float: right; clear: right;
    width: 14.5rem;
    margin: .25em -17rem 1.2em 0;
    padding: 0 0 0 .9rem;
    border-left: 2px solid var(--bright);
    background: none; box-shadow: none;
    font-size: .95rem;
    color: var(--muted);
    transition: color .2s;
  }
  .story__body.has-sidenotes-js .sidenote.is-open { color: var(--ink); }
  .story__body .alignwide, .story__body .alignfull { clear: right; }
}
.story__body a.btn, .story__body a.btn:hover { text-decoration: none; }
.story__body a.btn--ghost:hover { background: var(--card); }
.story__body a.btn:not(.btn--ghost):hover { background: var(--red); }
/* ---------- Videos ----------
   A YouTube or Vimeo video (a link on its own line, or embed code): wider than the text on desktop,
   framed like the lead photo, with its title below. YouTube shows its picture and a play button
   until the reader presses play. */
.story__body .video { margin: 2.2em 0 2.4em; }
@media (min-width: 900px) {
  .story__body .video { width: min(66rem, calc(100vw - 2 * var(--gutter))); max-width: none; margin-left: 50%; transform: translateX(-50%); }
}
.story__body .video__poster { width: 100%; height: 100%; object-fit: cover; border: 0; transition: opacity .2s; }
.story__body .video figcaption { max-width: var(--measure); margin: .65rem auto 0; font-size: .95rem; font-style: italic; color: var(--muted); }
/* The paywall, added by PoP Companion where a Subscribers-only story is cut */
.paywall {
  position: relative; margin: 2.4rem 0 0; padding: 2rem 1.75rem 1.9rem;
  background: var(--card); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--shade);
  text-align: center;
}
.paywall::before { /* the text fades out into the box */
  content: ""; position: absolute; left: -3px; right: -3px; bottom: calc(100% + 3px); height: 7rem; /* ends above the top border, never over it */
  background: linear-gradient(to bottom, transparent, var(--paper)); pointer-events: none;
}
.paywall__kicker { margin: 0 0 .5rem; color: var(--red); font-size: .9rem; }
.paywall__title, .story__body .paywall .paywall__title { margin: 0 0 .6rem; font-size: 1.9rem; }
/* not a story's section heading: no space above it */
.paywall__text { margin: 0 auto 1.3rem; max-width: 28rem; font-size: 1.15rem; color: var(--muted); }
.paywall__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; margin: 0; }
.paywall__signin { font-size: 1rem; }
/* After the story: tags and the newsletter */
.story__foot { max-width: var(--measure); margin: 3rem auto 0; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.6rem; }
.tags a { padding: .35em .8em .42em; border: 2px solid var(--ink); text-decoration: none; font-size: .85rem; background: var(--card); }
.tags a:hover { background: var(--ink); color: var(--paper); }
/* The author box: picture, name, bio, profile links */
.author-box {
  display: flex; gap: 1.25rem; align-items: flex-start;
  margin: 0 0 2.6rem; padding-top: 1.4rem;
  border-top: 3px solid var(--ink);
}
.author-box__photo { flex: none; width: 5.5rem; height: 5.5rem; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--shade); object-fit: cover; }
.author-box__kicker { margin: 0 0 .2rem; font-size: .8rem; color: var(--red); }
.author-box__name { margin: 0 0 .35rem; font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.author-box__name a { text-decoration: none; background-image: linear-gradient(var(--bright), var(--bright)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; transition: background-size .25s ease; }
.author-box__name a:hover, .author-box__name a:focus-visible { background-size: 100% 2px; }
.author-box__bio { margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--muted); }
.author-box__links ul { list-style: none; margin: .5rem 0 0 -.65rem; padding: 0; display: flex; flex-wrap: wrap; }
.author-box__links .social-link { color: var(--ink); }
.author-box__links .social-link:hover, .author-box__links .social-link:focus-visible { color: var(--bright); }
@media (max-width: 480px) {
  .author-box__photo { width: 4.25rem; height: 4.25rem; }
}
.story__body img.newsletter__badge { border: 3px solid var(--ink); }
/* [subscribe]: the same box placed inside a story, a little more compact, set apart from the text around it */
.story__body > .newsletter--inline { margin: 2.4em 0 2.6em; padding: 1.7rem 1.5rem 1.5rem; font-size: 1.05rem; line-height: 1.45; box-shadow: 8px 8px 0 var(--shade); }
.story__body > .newsletter--inline { padding-top: calc(1.7rem + 26px); }
.story__body > .newsletter--inline { margin-top: 3.4em; }
.story__body .newsletter--inline a { color: inherit; text-decoration-color: var(--chip); }
.story__body .newsletter--inline a:hover { background: none; text-decoration-color: currentColor; }
.story__body .newsletter--inline p { margin-top: 0; }
@media (max-width: 560px) {
  .story__body > .newsletter--inline { padding: calc(1.4rem + 24px) 1.1rem 1.4rem; box-shadow: 6px 6px 0 var(--shade); }
}
.post-nav { max-width: 60rem; margin: 4rem auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.post-nav__link {
  display: block; padding: 1.1rem 1.25rem 1.2rem; text-decoration: none;
  background: var(--card); border: 2px solid var(--ink); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.post-nav__link:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--shade); }
.post-nav__link--next { grid-column: 2; text-align: right; }
.post-nav__label { display: block; font-size: .85rem; color: var(--red); margin-bottom: .3rem; }
.post-nav__title { font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
/* ---------- Comments ---------- */
/* ---------- The discussion (comments.php; who may post: PoP Companion's Settings › Discussion) ---------- */
.comments { max-width: var(--measure); margin: 4.5rem auto 0; padding: 0 var(--gutter); }
.comments__head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding-bottom: .5rem; border-bottom: 3px solid var(--ink); margin-bottom: .4rem; }
.comments__title { margin: 0; font-size: 1.6rem; }
.comments__chip { padding: .2em .55em; font: 700 .72rem/1.2 var(--caps); letter-spacing: .12em; text-transform: lowercase; color: var(--ink); background: var(--gold); }
.comment-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.comment-list .children { list-style: none; margin: 0; padding-left: 1.4rem; border-left: 2px solid var(--rule); }
.pc__body { padding: 1.1rem 0 1rem; border-bottom: 1px dashed var(--rule); }
.pc__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; margin-bottom: .35rem; }
.pc__name { font: 700 1rem/1.3 var(--caps); letter-spacing: .06em; text-transform: lowercase; color: var(--ink); }
.pc__tag { padding: .1em .45em; font: 700 .66rem/1.3 var(--caps); letter-spacing: .1em; text-transform: lowercase; color: var(--ink); background: var(--chip); border: 1px solid var(--rule); }
.pc__tag--writer { color: var(--cream); background: var(--red); border-color: var(--red); }
.pc__tag--founding { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.pop-founders { columns: 3 12rem; column-gap: 2rem; list-style: none; padding: 0; margin: 1.5rem 0; }
.pop-founders li { break-inside: avoid; padding: .3rem 0; border-bottom: 1px dashed var(--rule); }
.pc__time { margin-left: auto; font: .85rem/1.3 var(--text); color: var(--muted); text-decoration: none; }
.pc__time:hover { text-decoration: underline; }
.pc__text { font-size: 1.05rem; line-height: 1.6; }
.pc__text > :first-child { margin-top: 0; }
.pc__text > :last-child { margin-bottom: 0; }
.pc--writer > .pc__body { border-left: 3px solid var(--red); padding-left: .9rem; margin-left: -1rem; }
.pc__wait { margin: 0 0 .4rem; font-size: .9rem; font-style: italic; color: var(--muted); }
.pc__reply { margin: .5rem 0 0; }
.pc__reply a { font: 700 .78rem/1 var(--caps); letter-spacing: .12em; text-transform: lowercase; color: var(--red-text); text-decoration: none; }
.pc__reply a:hover { text-decoration: underline; }
.comment-reply-title { margin: 2rem 0 .8rem; font-size: 1.3rem; }
.comment-respond { margin-bottom: 1rem; }
.comment-list .comment-respond { margin: .5rem 0 1rem; padding: 1rem; background: var(--card); border: 2px solid var(--ink); }
.logged-in-as { margin: 0 0 .8rem; font-size: .9rem; color: var(--muted); }
.comment-form p { margin: 0 0 1rem; }
.comment-form label { display: block; margin-bottom: .3rem; font: 700 .8rem/1.2 var(--caps); letter-spacing: .1em; text-transform: lowercase; color: var(--ink); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; box-sizing: border-box; padding: .6rem .8rem; font: inherit; background: var(--card); border: 2px solid var(--ink); border-radius: 0;
}
.comment-form input[type="text"]:focus, .comment-form textarea:focus { outline: 3px solid var(--bright); outline-offset: 1px; }
.comment-form-name input { max-width: 22rem; }
.comment-form-hint { display: block; margin-top: .3rem; font-size: .85rem; color: var(--muted); }
.comment-form .form-submit input { min-height: 44px; padding: .55em 1.2em; font: 700 .9rem/1 var(--caps); letter-spacing: .12em; text-transform: lowercase; background: var(--red); color: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--shade); cursor: pointer; }
.comment-form .form-submit input:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shade); }
.comments__invite { margin: 1.4rem 0 1rem; padding: 1.2rem 1.3rem; background: var(--chip); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--shade); }
.comments__invite-text { margin: 0 0 .9rem; font-size: 1.08rem; line-height: 1.5; }
.comments__invite-btns { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.1rem; margin: 0; }
.comments__invite-or { font-size: .92rem; color: var(--muted); }
.wp-caption { max-width: 100%; }
@media (max-width: 760px) {
  /* the date is enough here */
  .post-nav { grid-template-columns: minmax(0, 1fr); }
  .post-nav__link--next { grid-column: 1; text-align: left; }
}
@media print {
  .post-nav, .comments, .toc, .sn-ref { display: none !important; }
  .story__body .sidenote, .has-sidenotes-js .sidenote { display: block !important; float: none; width: auto; margin: .4em 0 .8em; padding: 0 0 0 .8em; font-size: 9.5pt; color: #444; }
  .story__body { max-width: none; font-size: 11.5pt; }
  .story__body .pullquote { margin-inline: 0; break-inside: avoid; }
  .author-box__links { display: none; }
}
/* ---------- GIFs that play on request (inc/gifs.php, js/gifs.js) ----------
   A still with a "gif" tag until hovered, focused or tapped */
.pop-gif { position: relative; display: inline-block; max-width: 100%; line-height: 0; vertical-align: top; cursor: pointer; }
.pop-gif.aligncenter { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
.pop-gif img { display: block; max-width: 100%; height: auto; margin: 0; }
.pop-gif canvas { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.pop-gif.is-playing canvas { display: none; }
.pop-gif__badge {
  position: absolute; left: .7rem; bottom: .7rem; display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .6rem .42rem .55rem; background: var(--ink); color: var(--paper); border: 2px solid var(--paper);
  box-shadow: 3px 3px 0 var(--bright); font: 700 .74rem/1 var(--caps); letter-spacing: .14em; text-transform: lowercase;
  pointer-events: none; transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pop-gif__badge svg { color: var(--bright); flex: none; }
.pop-gif:hover .pop-gif__badge { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--bright); }
.pop-gif.is-playing .pop-gif__badge { opacity: 0; }
.pop-gif.is-playing.is-loading .pop-gif__badge { opacity: 1; animation: pop-gif-wait .9s ease-in-out infinite alternate; }
@keyframes pop-gif-wait { to { opacity: .45; } }
.pop-gif:focus-visible { outline: 3px solid var(--bright); outline-offset: 3px; }
/* ---------- Play diagrams ([play], inc/plays.php) ----------
   Drawn on the server as SVG: attackers (O) in ink, defenders (X) in red, on a card like the score cards.
   Sizes come from the diagram (--r, a player; --sw, a line), so every court looks the same weight. */
.play { margin: 2.4em 0; }
.play__title { margin: 0 0 .7rem; font-size: .92rem; color: var(--red); }
.play__svg { display: block; width: 100%; height: auto; background: var(--card); border: 2px solid var(--ink); box-shadow: var(--shadow); }
.play__court { fill: none; stroke: color-mix(in srgb, var(--ink) 30%, var(--card)); }
.play__court .play__dot { fill: color-mix(in srgb, var(--ink) 30%, var(--card)); stroke: none; }
.play__court .play__goal { fill: color-mix(in srgb, var(--ink) 10%, var(--card)); }
.play--pitch .play__svg, .play--half-pitch .play__svg {
  background: repeating-linear-gradient(90deg, var(--card) 0 10%, color-mix(in srgb, var(--chip) 70%, var(--card)) 10% 20%);
}
.play--half-pitch .play__svg { background: repeating-linear-gradient(180deg, var(--card) 0 12.5%, color-mix(in srgb, var(--chip) 70%, var(--card)) 12.5% 25%); }
.play__space { fill: color-mix(in srgb, var(--bright) 8%, transparent); stroke: var(--bright); stroke-width: calc(var(--sw) * .7px); stroke-dasharray: calc(var(--sw) * 2px) calc(var(--sw) * 2px); }
.play__move { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.play__move--d { stroke: var(--red); }
.play__move--pass { stroke-dasharray: calc(var(--sw) * 2.6px) calc(var(--sw) * 2.2px); }
.play__move--dribble { stroke-linejoin: miter; }
.play__head { fill: var(--ink); stroke: none; }
.play__head--d { fill: var(--red); }
.play__o circle { fill: var(--card); stroke: var(--ink); }
.play__o text { fill: var(--ink); font-family: var(--text); font-weight: 700; text-anchor: middle; font-variant-numeric: lining-nums; }
.play__x path { fill: none; stroke: var(--red); stroke-linecap: round; stroke-width: calc(var(--sw) * 1.55px); }
.play__x text { fill: var(--red); font-family: var(--text); font-weight: 700; font-variant-numeric: lining-nums; }
.play__name, .play__note { text-anchor: middle; paint-order: stroke; stroke: var(--card); stroke-width: calc(var(--sw) * 1.6px); stroke-linejoin: round; }
.play__name { fill: var(--ink); font-family: var(--caps); font-weight: 700; letter-spacing: .08em; }
.play__note { fill: var(--muted); font-family: var(--text); font-style: italic; }
.play__ball { fill: var(--bright); stroke: var(--ink); stroke-width: calc(var(--sw) * .8px); }
.story__body .play__caption, .play__caption { margin-top: .9rem; font-size: .95rem; font-style: italic; color: var(--muted); }
@media print {
  .play__svg { box-shadow: none; }
}
/* a diagram with steps moves (js/play-motion.js): the plan goes faint and each move is drawn as it happens;
   a dotted ring marks where a player started. Without the script it's the finished diagram and its steps. */
.play__plan { opacity: 0; transition: opacity .3s; }
.play.is-run .play__plan { opacity: .2; }
.play__was { fill: none; stroke: var(--ink); stroke-width: calc(var(--sw) * .6px); stroke-dasharray: calc(var(--sw) * 1.2px) calc(var(--sw) * 1.6px); opacity: 0; }
.play--photo .play__was { stroke: #fff; }
.play__ctl { display: flex; align-items: center; gap: .9rem; margin-top: .9rem; }
.play__btn { flex: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.1rem; border: 2px solid var(--ink); background: var(--ink); color: var(--cream); font: 700 .8rem/1 var(--caps); letter-spacing: .12em; text-transform: lowercase; cursor: pointer; box-shadow: 3px 3px 0 var(--bright); }
.play__btn::before { content: ""; width: 0; height: 0; border-left: .6rem solid currentColor; border-top: .38rem solid transparent; border-bottom: .38rem solid transparent; }
.play__btn[data-state="pause"]::before { width: .18rem; height: .76rem; border: 0; border-left: .2rem solid currentColor; border-right: .2rem solid currentColor; }
.play__btn:hover { background: var(--red); border-color: var(--red); }
.play__btn:focus-visible, .play__scrub:focus-visible, .play__steps button:focus-visible { outline: 3px solid var(--bright); outline-offset: 3px; }
.play__scrub { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.play__scrub::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--red) var(--p, 0%), var(--rule) var(--p, 0%)); }
.play__scrub::-moz-range-track { height: 4px; background: var(--rule); }
.play__scrub::-moz-range-progress { height: 4px; background: var(--red); }
.play__scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin-top: calc(-.625rem + 2px); border: 2px solid var(--ink); border-radius: 50%; background: var(--bright); }
.play__scrub::-moz-range-thumb { width: 1.05rem; height: 1.05rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--bright); }
.play .play__steps { display: grid; gap: .3rem; margin: .8rem 0 0; padding: 0; list-style: none; counter-reset: none; }
.play .play__steps li { display: flex; align-items: baseline; gap: .7rem; margin: 0; padding: .4rem .6rem; border-left: 3px solid var(--rule); color: var(--ink); font-size: 1rem; line-height: 1.35; transition: color .2s, border-color .2s, background .2s; }
.play .play__steps li::before, .play .play__steps li::marker { content: none; }
.play .play__steps button { display: flex; align-items: baseline; gap: .7rem; flex: 1; min-width: 0; margin: -.4rem -.6rem; padding: .4rem .6rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.play__n { flex: none; min-width: 1.5rem; background: var(--rule); color: var(--ink); font: 700 .8rem/1.5 var(--text); font-variant-numeric: lining-nums; text-align: center; }
.play.is-moving .play__steps li { color: var(--muted); }
.play.is-moving .play__steps li:hover { color: var(--ink); }
.play.is-moving .play__steps .is-done { color: var(--ink); border-left-color: var(--ink); }
.play.is-moving .play__steps .is-done .play__n { background: var(--ink); color: var(--cream); }
.play.is-moving .play__steps .is-on { color: var(--ink); border-left-color: var(--bright); background: color-mix(in srgb, var(--bright) 7%, transparent); }
.play.is-moving .play__steps .is-on .play__n { background: var(--bright); color: var(--cream); }
@media print {
  .play__ctl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .play__plan, .play .play__steps li { transition: none; }
}
.play__ring { fill: none; stroke: var(--ink); stroke-width: calc(var(--sw) * 1.3px); }
.play__ring--d { stroke: var(--red); stroke-dasharray: calc(var(--sw) * 3px) calc(var(--sw) * 1.6px); }
.play--photo .play__ring { stroke: #fff; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .85)); }
.play--photo .play__ring--d { stroke: #ff2a4e; }
/* a diagram over a photo: the marks get a halo so they read against crowds, jerseys and floor graphics */
.play--photo .play__svg { background: var(--ink); }
.play--photo .play__o circle { fill: #fff; }
.play--photo .play__o, .play--photo .play__x, .play--photo .play__ball { filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7)); }
.play--photo .play__x path { stroke: #ff2a4e; }
.play--photo .play__x text { fill: #fff; paint-order: stroke; stroke: #000; stroke-width: calc(var(--sw) * 1px); }
.play--photo .play__move { stroke: #fff; filter: drop-shadow(0 0 1.6px rgba(0, 0, 0, .95)); }
.play--photo .play__move--d { stroke: #ff2a4e; }
.play--photo .play__head { fill: #fff; }
.play--photo .play__head--d { fill: #ff2a4e; }
.play--photo .play__name { fill: #fff; stroke: rgba(0, 0, 0, .78); }
.play--photo .play__note { fill: #fff; stroke: rgba(0, 0, 0, .78); font-style: italic; }
.play--photo .play__space { fill: rgba(255, 255, 255, .14); stroke: #fff; }
/* ---------- Glossary: terms in stories, and the glossary page ---------- */
.story__body a.gloss { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; color: inherit; cursor: help; }
.story__body a.gloss:hover { background: color-mix(in srgb, var(--bright) 12%, transparent); }
.gloss-tip {
  position: absolute; z-index: 60; box-sizing: border-box; padding: .95rem 1.1rem 1rem;
  background: var(--card); color: var(--ink); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--shade);
  font-family: var(--text); text-align: left;
}
.gloss-tip::before { /* the little pointer, towards the term */
  content: ""; position: absolute; top: -8px; left: var(--arrow, 50%); width: 12px; height: 12px; margin-left: -7px;
  background: var(--card); border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(45deg);
}
.gloss-tip.is-above::before { top: auto; bottom: -8px; transform: rotate(225deg); }
.gloss-tip__term { margin: 0 0 .3rem; font: 700 .85rem/1.2 var(--caps); letter-spacing: .12em; text-transform: lowercase; color: var(--red); }
.gloss-tip__def { margin: 0 0 .55rem; font-size: 1.05rem; line-height: 1.42; }
.gloss-tip__more { font: 700 .8rem/1 var(--caps); letter-spacing: .1em; text-transform: lowercase; color: var(--ink); text-decoration: underline; text-decoration-color: var(--bright); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.gloss-tip__more:hover { color: var(--red); }
/* ---------- The end of a story: pass it on, and gift links ---------- */
.share { margin: 0 0 2.6rem; padding: 1.3rem 0 1.4rem; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.share__title { margin: 0 0 .8rem; font-size: .9rem; color: var(--red); }
.share__list { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; }
.share__btn {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .5em .95em .55em;
  border: 2px solid var(--ink); background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--shade);
  font: 700 .85rem/1 var(--caps); letter-spacing: .1em; text-transform: lowercase; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.share__btn svg { width: 1.05em; height: 1.05em; flex: none; }
.share__btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shade); background: var(--chip); }
.share__btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shade); }
.share__btn.is-done { background: var(--ink); color: var(--paper); }
/* Instagram story: phones and tablets only (a computer with a mouse can't post one) */
@media (hover: hover) and (pointer: fine) {
  .share__story { display: none; }
}
.share__gift { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px dashed var(--rule); }
.share__gift-btn svg { width: 1.1em; height: 1.1em; }
.share__gift-btn.is-done { background: var(--ink) !important; color: var(--paper) !important; }
.share__gift-note { flex: 1 1 16rem; margin: 0; font-size: 1rem; font-style: italic; color: var(--muted); line-height: 1.4; }
.share__status { margin: 0; height: 0; overflow: hidden; font-size: 1rem; font-style: italic; transition: height .2s ease, margin .2s ease; }
.share.is-saying .share__status { height: auto; margin-top: .8rem; }
.gift-note {
  max-width: var(--measure); margin: 0 auto 2rem; padding: .9rem 1.1rem 1rem;
  background: var(--chip); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--gold);
  font-size: 1.1rem; line-height: 1.45;
}
.gift-note a { display: inline-block; margin-left: .3em; font-weight: 700; text-decoration: underline; text-decoration-color: var(--bright); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media print {
  .share { display: none; }
}
/* ---------- Players: chips at the end of a story, and a player's page ---------- */
.players { margin: 0 0 1.6rem; }
.players__label { margin: 0 0 .6rem; font-size: .82rem; color: var(--red); }
.players__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.player-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .85rem .35rem .3rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1rem; line-height: 1.1; }
.player-chip:not(:has(img)) { padding-left: .85rem; }
.player-chip__photo { width: 1.9rem; height: 1.9rem; border-radius: 50%; object-fit: cover; border: 0; }
.player-chip:hover { background: var(--ink); color: var(--paper); }
/* ---------- Keep reading: three more like this one ---------- */
.related { max-width: var(--wide); margin: 4rem auto 3rem; padding: 0 var(--gutter); }
.related__title { margin: 0 0 1.6rem; padding-bottom: .5rem; font-size: clamp(1.8rem, 3vw, 2.3rem); letter-spacing: -.01em; border-bottom: 3px solid var(--ink); }
@media (min-width: 1100px) {
  .related__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.4rem; }
}
@media (max-width: 760px) {
  .related__cards { grid-template-columns: minmax(0, 1fr); }
}
.player-chip__num { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font: 400 .82rem/1 "Jersey Number", "Graduate", serif; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .18); }
.player-chip:has(.player-chip__num) { padding-left: .3rem; }
/* "Instagram card" (a glossary term) and "Instagram image" (a play diagram): editors only */
.ig-card-link {
  display: inline-flex; align-items: center; gap: .4rem; margin: .7rem 0 0; padding: .3rem .7rem .34rem;
  font: 700 .78rem/1 var(--caps); letter-spacing: .1em; text-transform: lowercase; color: var(--ink); text-decoration: none;
  background: var(--card); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--shade); cursor: pointer;
}
.ig-card-link::before { content: ""; width: .85rem; height: .85rem; border: 1.5px solid currentColor; border-radius: .25rem; box-shadow: inset 0 0 0 .17rem var(--card), inset 0 0 0 1rem currentColor; opacity: .9; }
.ig-card-link:hover, .ig-card-link:focus-visible { color: var(--red-text); background-image: none; }
.ig-card-link:disabled { opacity: .6; cursor: progress; }
figure.play .ig-card-link { margin-top: .8rem; }
/* ---------- Save for later (PoP Companion): beside the byline, on the cards, the Account page ---------- */
.story__byrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1.4rem; }
/* ---------- Quotes, shared (inc/quote-card.php, js/quote.js) ---------- */
.quote-bubble {
  position: absolute; z-index: 60; display: flex; align-items: stretch; gap: 0;
  background: var(--ink); color: var(--cream); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--bright);
}
.quote-bubble[hidden] { display: none; }
.quote-bubble__btn {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .4rem .85rem .45rem;
  font: 700 .82rem/1 var(--caps); letter-spacing: .1em; text-transform: lowercase; color: inherit;
  background: none; border: 0; cursor: pointer;
}
.quote-bubble__btn + .quote-bubble__btn { border-left: 1px solid rgb(255 247 232 / .25); }
.quote-bubble__btn:hover, .quote-bubble__btn:focus-visible { background: var(--red); outline: none; }
.quote-bubble__btn svg { width: 1rem; height: 1rem; flex: none; }
.quote-bubble.is-done .quote-bubble__btn[data-act="copy"] { background: var(--red); }
.quote-bubble__note { padding: .55rem .8rem .6rem; font-size: .9rem; line-height: 1.3; max-width: 17rem; }
.story .badge-type--bounce .bball { animation: badge-hop 1.1s cubic-bezier(.3,.7,.4,1) .4s 2 both; }
@keyframes badge-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 55% { transform: translateY(0) scale(1.08, .88); } 70% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .story .badge-type--bounce .bball { animation: none; }
}
/* ---------- Drawing on the broadcast ([broadcast], inc/broadcast.php, js/broadcast.js) ----------
   A still or a clip with the drawing laid over it. The marks themselves are drawn by the script. */
.bcast { margin: 2.4em 0; }
.bcast__stage { position: relative; overflow: hidden; background: #10140f; border: 2px solid var(--ink); box-shadow: var(--shadow); }
.bcast__media, .story__body .bcast__media { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border: 0; box-shadow: none; }
.bcast__draw { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity .25s ease; }
.bcast__draw.is-out { opacity: 0; }
.bcast-pop, .bc-pop { transform-box: fill-box; transform-origin: center; animation: bc-pop .38s cubic-bezier(.3, 1.5, .5, 1) both; }
.bc-fade { animation: bc-fade .35s ease both; animation-delay: var(--d, 0s); }
@keyframes bc-pop { from { transform: scale(.3); opacity: 0; } }
@keyframes bc-fade { from { opacity: 0; } }
.bcast__hold { position: absolute; left: .7rem; bottom: .7rem; display: flex; align-items: center; gap: .45rem; padding: .45em .7em; font: 700 .72rem/1 var(--caps); letter-spacing: .12em; color: var(--cream); background: rgb(26 20 24 / .8); }
.bcast__hold[hidden], .bcast__next[hidden] { display: none; }
.bcast__hold svg { width: 1.05rem; height: 1.05rem; }
.bcast__hold circle { fill: none; stroke-width: 3; }
.bcast__arcbg { stroke: rgb(255 247 232 / .3); }
.bcast__arc { stroke: var(--cream); stroke-dasharray: 47.1; stroke-dashoffset: 47.1; }
.bcast__next { position: absolute; right: .7rem; bottom: .7rem; padding: .7em 1em; font: 700 .85rem/1 var(--caps); letter-spacing: .12em; text-transform: lowercase; color: var(--ink); background: var(--cream); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.bcast__time { position: relative; height: 2.3rem; margin: .8rem 0 0; display: none; }
.bcast.is-live .bcast__time { display: block; }
.bcast__track { position: absolute; left: 0; right: 0; top: 1.05rem; height: 4px; background: var(--rule); }
.bcast__band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ink) 25%, var(--rule)); }
.bcast__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ink); }
.bcast__mark { position: absolute; top: .35rem; width: 1.6rem; height: 1.6rem; margin-left: -.8rem; display: grid; place-items: center; padding: 0; font: 700 .85rem/1 "Mots", Georgia, serif; color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: 50%; cursor: pointer; }
.bcast__mark[aria-current="step"] { background: var(--red); border-color: var(--red); color: var(--cream); }
.story__body .bcast__cap { margin-top: .7rem; font-size: 1rem; font-style: normal; color: var(--ink); }
.bcast__cap p, .bcast__cap li { font-style: normal; }
.bcast__cap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem 1rem; margin: .7rem 0 0; padding: .8rem 0 0; border-top: 3px solid var(--ink); font-style: normal; }
.bcast__ctl { display: none; flex-wrap: wrap; gap: .35rem; }
.bcast.is-live .bcast__ctl { display: flex; }
.bcast__nums { display: flex; gap: .35rem; }
.bcast__nums[hidden] { display: none; }
.bcast__num, .bcast__play { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .7rem; font: 700 1rem/1 "Mots", Georgia, serif; color: var(--ink); background: var(--card); border: 2px solid var(--ink); cursor: pointer; }
.bcast__play { font: 700 .78rem/1 var(--caps); letter-spacing: .1em; text-transform: lowercase; }
.bcast__num[aria-current="step"] { background: var(--red); border-color: var(--red); color: var(--cream); }
.bcast__num:focus-visible, .bcast__play:focus-visible, .bcast__mark:focus-visible, .bcast__next:focus-visible { outline: 3px solid var(--bright); outline-offset: 2px; }
.bcast__text { flex: 1 1 18rem; margin: 0; font-size: 1.05rem; line-height: 1.45; min-height: 2.9em; }
.bcast__text:empty { display: none; }
.bcast__text b { margin-right: .25em; font-family: var(--caps); letter-spacing: .06em; text-transform: lowercase; color: var(--red-text); }
.bcast__list { flex: 1 1 100%; margin: 0; padding-left: 1.3em; font-size: 1.02rem; }
.bcast__list b { font-family: var(--caps); letter-spacing: .06em; text-transform: lowercase; color: var(--red-text); }
.bcast.is-live .bcast__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bcast-missing { padding: .8rem 1rem; border: 2px dashed var(--red); color: var(--red-text); font-size: 1rem; }
/* a clip (a finished one from the Broadcast Studio, or a drawing on a clip): the size of any other video in a
   story (see Videos), wider than the text on desktop in the same frame; the steps under it at the text's width */
.bcast--clip .bcast__stage { border-width: 3px; box-shadow: none; }
.story__body .bcast--clip .bcast__cap { max-width: var(--measure); margin-left: auto; margin-right: auto; }
@media (min-width: 900px) {
  .story__body .bcast--clip { width: min(66rem, calc(100vw - 2 * var(--gutter))); max-width: none; margin-left: 50%; transform: translateX(-50%); }
}
/* a finished clip from the Broadcast Studio: the drawing is in the video; its steps are listed under it,
   the one on screen in ink and the rest a shade lighter */
.bcast--baked.is-live .bcast__list { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.bcast--baked .bcast__list li { transition: color .2s ease; }
.bcast--baked .bcast__list li + li { margin-top: .3em; }
.bcast--baked.is-live .bcast__list:has(li[aria-current]) li:not([aria-current]) { color: var(--muted); }
.bcast--baked .bcast__list li[aria-current]::marker { color: var(--red-text); font-weight: 700; }
.bcast--baked .bcast__list:has(li:only-child) { padding-left: 0; list-style: none; }
@media (prefers-reduced-motion: reduce) {
  .bc-pop, .bc-fade { animation: none; }
  .bcast__draw { transition: none; }
}
.paywall { scroll-margin: 2rem; }
.paywall:focus { outline: none; }
.paywall.is-called { animation: pop-called 1.2s ease-out; }
@keyframes pop-called { 0% { box-shadow: 0 0 0 0 var(--bright); } 25% { box-shadow: 0 0 0 8px var(--bright); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) {
  .paywall.is-called { animation: none; outline: 3px solid var(--bright); }
}
/* a team's abbreviation on a Bouncin' Around score card: the same link as on a 90′ or On the Bounce story's card
   (red, with the thick red underline), kept from the story's own link look (its underline and hover tint) */
.story__body .score .score__team-link, .story__body .score .score__team-link:hover, .story__body .score .score__team-link:focus-visible { text-decoration: none; background: none; }
.story__body .score .score__team-link:hover, .story__body .score .score__team-link:focus-visible { color: var(--red); }
.story__body .score .score__team-link:hover .score__abbr, .story__body .score .score__team-link:focus-visible .score__abbr { text-decoration: underline; text-decoration-color: var(--bright); text-decoration-thickness: 3px; text-underline-offset: .14em; }
/* ---------- The paywall, with the price on it ----------
   What is still to come is counted from the story itself (PoP Companion), each plan's button opens Stripe Checkout
   for that plan, and a free reader is offered this month's free story. The box and its fade are the paywall's own. */
.paywall--offer { padding: 1.8rem 1.75rem 1.5rem; }
.story__body .paywall__behind { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem .45rem; margin: 0 auto 1.5rem; padding: 0; max-width: 31rem; }
.story__body .paywall__behind li { margin: 0; padding: .28em .65em .34em; border: 1px solid var(--rule); background: var(--chip); font-size: .98rem; line-height: 1.25; font-variant-numeric: lining-nums; }
.story__body .paywall__behind li::before { content: none; }
.story__body .paywall__behind .paywall__behind-label { flex-basis: 100%; padding: 0; border: 0; background: none; font: 700 .72rem/1.2 var(--caps); letter-spacing: .14em; text-transform: lowercase; color: var(--muted); }
.paywall__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; max-width: 27rem; margin: 0 auto 1.1rem; }
.paywall__plan { display: flex; flex-direction: column; margin: 0; }
.story__body .paywall__plan .btn { flex-direction: column; gap: .3rem; width: 100%; min-height: 4.5rem; padding: .7rem .5rem .75rem; }
.paywall__amount { font: 700 1.75rem/1 var(--text); letter-spacing: 0; text-transform: none; font-variant-numeric: lining-nums; }
.paywall__per { font-size: .78rem; }
.paywall__note { display: block; margin-top: .6rem; font-size: .92rem; font-style: italic; color: var(--muted); }
.story__body .paywall__small { margin: 0; font-size: .95rem; color: var(--muted); }
.paywall__small a { white-space: nowrap; }
.paywall__small .paywall__signin { font-size: inherit; }
.paywall__drawer[hidden] { display: none; }
/* this month's free story, for a reader with a free account (or the way to one) */
.paywall__free { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1.1rem; margin: 1.4rem -1.75rem -1.5rem; padding: 1rem 1.5rem 1.1rem; border-top: 2px dashed var(--rule); background: var(--chip); text-align: left; }
.story__body .paywall__free p { flex: 1 1 14rem; margin: 0; font-size: 1rem; line-height: 1.4; }
.paywall__free b { display: block; font: 700 .76rem/1.3 var(--caps); letter-spacing: .14em; text-transform: lowercase; color: var(--red-text); }
.paywall__free form { margin: 0; }
.paywall__free .btn { white-space: nowrap; }
.paywall__free.is-used { background: none; }
.paywall__free.is-used b { color: var(--muted); }
/* the line above a story opened with the free one (the gift note's look) */
.gift-note--unlock { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; }
.gift-note--unlock a { margin-left: 0; }
@media (max-width: 480px) {
  .paywall--offer { padding: 1.5rem 1.1rem 1.3rem; }
  .paywall__plans { gap: .8rem; }
  .paywall__amount { font-size: 1.5rem; }
  .paywall__free { margin: 1.3rem -1.1rem -1.3rem; padding: 1rem 1.1rem; }
  .paywall__free form, .paywall__free .btn { width: 100%; }
}