/*
 * PoP: the ways a game is told: 90′ and 4 Quarters, the match strip, lineups and ratings, On the Bounce, Rondo, Bouncin’ Around, Letters from… and the Grammar of the Game essay.
 * Cut from style.css; loaded only where it is used.
 */
.drawer__lineups .lineups__title { margin-bottom: 1rem; }
@media (max-width: 760px) {
  .drawer__lineups .lineups { display: none; margin-top: 1rem; }
  .drawer__lineups.is-shown .lineups { display: block; }
}
.story__body > .beat:not(:has(~ :is(.beat, p, .paywall))) .beat__body > :is(p, ul, ol):last-child::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"); }
.category-nfl { --end-mark: url("../end-marks/nfl.svg"); }
.category-mlb { --end-mark: url("../end-marks/mlb.svg"); }
.category-futbol, .category-soccer { --end-mark: url("../end-marks/futbol.svg"); }
.category-tennis { --end-mark: url("../end-marks/tennis.svg"); }
.category-hockey, .category-nhl { --end-mark: url("../end-marks/hockey.svg"); }
.is-grammar .story__head { max-width: 58rem; margin: 4.4rem auto 3rem; }
.is-grammar .story__title { font-weight: 400; font-size: clamp(3rem, 8.2vw, 6.6rem); line-height: .96; letter-spacing: -.028em; margin-bottom: 1.4rem; }
.is-grammar .story__dek { max-width: 38rem; margin-bottom: 1.8rem; font-size: clamp(1.35rem, 2.8vw, 1.8rem); line-height: 1.34; color: var(--ink); }
.is-grammar .story__byline { font-size: .92rem; letter-spacing: .14em; }
.is-grammar .story__head::after { content: ""; display: block; width: 3.2rem; height: 2px; margin: 2.2rem auto 0; background: var(--bright); }
.is-grammar .story__figure { max-width: 78rem; margin-bottom: 3.6rem; }
.is-grammar .story__figure img { border: 0; }
.is-grammar .story__figure figcaption { text-align: center; }
.is-grammar .story__body { font-size: 1.32rem; line-height: 1.72; }
.is-grammar .story__body > p:first-of-type::first-letter { font-size: 5.6em; color: var(--red); }
@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
  .is-grammar .story__body > p:first-of-type::first-letter { font-size: 1em; -webkit-initial-letter: 4; initial-letter: 4; margin-right: .1em; }
}
.is-grammar .story__body h2 { font-weight: 400; font-style: italic; font-size: 2rem; text-align: center; margin: 2.2em 0 1em; }
.is-grammar .story__body blockquote { border-left: 0; padding: 0; margin: 2em auto; max-width: 32rem; text-align: center; font-size: 1.15em; }
@media (max-width: 560px) {
  .is-grammar .story__head { margin-top: 2.6rem; }
  .is-grammar .story__body { font-size: 1.22rem; line-height: 1.66; }
}
.story__body > .beat:not(:has(~ :is(.beat, p, .paywall))) .beat__body > :is(ul, ol):last-child::after { display: block; margin: .6em 0 0; }
/* ---------- 90′ and 4 Quarters ----------
   PoP Companion's [minute 23] and [quarter 1] entries. Phones: the marker sits above its entry.
   Wide screens: the marker sits in the left margin (as notes sit in the right); 90′ entries hang on
   a thin timeline (a ball beside goals, a red dot beside everything else), and each quarter opens
   with a heavy rule across the text column. */
.beat { position: relative; }
/* a 90′ or 4 Quarters story opens like any other, with the drop cap and a small-caps line; its intro
   is at least three lines tall, so the drop cap never runs into the lineups or the first entry,
   and its end mark comes after the last entry */
.story-type-minutes .story__body > p:first-of-type, .story-type-quarters .story__body > p:first-of-type { min-height: 4.86em; min-height: 3lh; }
.story__body > p:last-of-type:has(~ .beat)::after { content: none; }
.beat__body > :first-child { margin-top: 0; }
.beat__body > :last-child { margin-bottom: 0; }
.story__body .beat__mark {
  display: block; width: max-content;
  font-weight: 700; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em;
  color: var(--ink); text-decoration: none; background: none; /* black, like a match clock; red stays for the accents */
}
.story__body .beat__mark:hover, .story__body .beat__mark:focus-visible { text-decoration: underline; text-decoration-color: var(--bright); text-decoration-thickness: 2px; text-underline-offset: .15em; background: none; }
.beat { scroll-margin-top: calc(var(--strip-h, 0px) + 1.5rem); }
/* below the match strip, where it stays at the top of the window (js/reading.js measures it) */
.beat:target .beat__mark { text-decoration: underline; }
.beat--minute { margin: 0 0 1.1em; padding: 0 0 1.1em; border-bottom: 1px dashed var(--rule); }
.beat--minute .beat__mark { font-size: 1.3rem; line-height: 1.1; margin-bottom: .2em; }
/* phones: a goal's ball sits after its minute */
@media (max-width: 1099px) {
  .beat--minute.is-goal .beat__mark::after {
    content: ""; display: inline-block; width: .78em; height: .78em; margin-left: .35em; vertical-align: -.04em;
    background: var(--ink); -webkit-mask: var(--ball) center / contain no-repeat; mask: var(--ball) center / contain no-repeat;
  }
}
/* phones: a yellow or red card sits after its minute */
@media (max-width: 1099px) {
  .beat--minute:is(.is-yellow, .is-red) .beat__mark::after {
    content: ""; display: inline-block; width: .5em; height: .7em; margin-left: .4em; vertical-align: -.02em;
    border-radius: 1.5px; background: var(--card-yellow); transform: rotate(8deg); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18);
  }
  .beat--minute.is-red .beat__mark::after { background: var(--card-red); }
}
/* phones: a penalty's ball has a red P; a missed penalty's ball is crossed out */
@media (max-width: 1099px) {
  .beat--minute.is-pen .beat__mark::after { width: .9em; height: .9em; vertical-align: -.1em; background: var(--ball-pen) center / contain no-repeat; -webkit-mask: none; mask: none; }
  .beat--minute.is-miss .beat__mark::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: .35em; vertical-align: -.1em; background: var(--ball-miss) center / contain no-repeat; }
  .beat--minute.is-var .beat__mark::after { content: ""; display: inline-block; width: 1.05em; height: .9em; margin-left: .35em; vertical-align: -.1em; background: var(--var) center / contain no-repeat; }
}
/* phones: a substitution's arrows, or the whistle, sit after the minute */
@media (max-width: 1099px) {
  .beat--minute.is-sub .beat__mark::after {
    content: ""; display: inline-block; width: .95em; height: .8em; margin-left: .4em; vertical-align: -.05em;
    background: var(--sub) center / contain no-repeat;
  }
  .beat--minute.is-whistle .beat__mark::after {
    content: ""; display: inline-block; width: 1.2em; height: .97em; margin-left: .35em; vertical-align: -.1em;
    background: var(--ink); -webkit-mask: var(--whistle) center / contain no-repeat; mask: var(--whistle) center / contain no-repeat;
  }
}
.beat--minute + :not(.beat) { margin-top: 1.6em; }
/* the Passage of the Game ([minute 54 goal pog]): a faint red outline round the entry, its name on the
   outline's top edge. Phones: round the minute and the text. Wide screens: round the text, its left
   edge on the timeline, so the entry's ball or dot sits on it */
.beat.is-pog .beat__body { position: relative; z-index: 0; }
/* its own layer: the white box sits behind the text */
.story__body .beat__pog {
    position: absolute; z-index: 2; margin: 0; padding: 0 .45em;
  background: linear-gradient(var(--paper) 50%, #fff 50%); /* on the outline: paper above it, the box's white below */
  font: 700 .8rem/1.5 var(--caps); text-transform: lowercase; letter-spacing: .08em; color: var(--red-text); white-space: nowrap;
}
.story__body .beat__pog::after { content: none !important; }
.story__body .beat__pog + * { margin-top: 0; }
/* the label is out of the flow: the text starts the entry */
@media (max-width: 1099px) {
  .beat--minute.is-pog { margin: 1.6em -.75rem 1.4em; padding: 1.1em .75rem 1em; border: 1px solid rgb(238 24 65 / .45); border-radius: 6px; box-shadow: 0 0 0 4px rgb(238 24 65 / .07); background: #fff; }
  .beat.is-pog .beat__body { position: static; }
  .story__body .beat.is-pog .beat__pog { top: -.78em; right: .55rem; }
}
@media (min-width: 1100px) {
  .beat--minute.is-pog { margin-top: 2.1em; padding-bottom: 1.6em; border-bottom-color: transparent; }
  .beat--minute.is-pog::before { z-index: 1; }
  .beat--minute.is-pog .beat__body::before {
    content: ""; position: absolute; left: calc(-1.05rem + 3px); top: -1.15em; right: -1.3rem; bottom: -1em;
    border: 1px solid rgb(238 24 65 / .45); border-radius: 0 6px 6px 0;
        box-shadow: 0 0 0 4px rgb(238 24 65 / .07); pointer-events: none;
    z-index: -1; background: #fff; /* pure white inside: the passage stands off the page */
  }
  .story__body .beat.is-pog .beat__pog { top: -2.6em; right: .2rem; }
}
/* The match strip (PoP Companion): above a 90′ story's first entry, every goal, card, substitution
   and whistle at its minute; the first team's above the line, the second's below. It fills in red as
   the story is read (js/reading.js) and, on wide screens, stays at the top of the window. */
.strip {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .9rem; align-items: stretch;
  margin: 1.4em 0 2em; padding: .5rem 0 .3rem; background: var(--paper);
  font-family: var(--caps); font-size: 1rem; line-height: 1;
  --rowh: 1.15rem; --gapline: .5rem;
}
.strip__teams { display: grid; grid-template-rows: 1fr 1fr; align-items: center; padding-bottom: 1.15rem; font-weight: 700; font-size: .78rem; letter-spacing: .1em; color: var(--muted); }
.strip__teams span:first-child { align-self: end; padding-bottom: .55rem; }
.strip__teams span:last-child { align-self: start; padding-top: .55rem; }
.strip__track { position: relative; min-height: calc(2 * (var(--gapline) + 2 * var(--rowh)) + 3px); padding-bottom: 1.15rem; }
.strip__track::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .575rem - 1.5px); height: 3px; background: var(--ink); }
.strip__fill { position: absolute; left: 0; top: calc(50% - .575rem - 1.5px); height: 3px; width: var(--progress, 0%); background: var(--bright); transition: width .25s ease; z-index: 1; }
.strip__marks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0 0 1.15rem; }
.strip__mark { position: absolute; left: var(--at); width: 1.05rem; height: 1.05rem; margin: 0 0 0 -.525rem; z-index: 2; }
.strip__mark.is-a { bottom: calc(50% + var(--gapline) + var(--row) * var(--rowh)); }
.strip__mark.is-b { top: calc(50% + var(--gapline) + var(--row) * var(--rowh)); }
.strip__mark:not(.is-a):not(.is-b) { top: 50%; margin-top: -.525rem; }
/* a thin stem from each mark to the line */
.strip__mark.is-a::after, .strip__mark.is-b::after { content: ""; position: absolute; left: 50%; width: 1px; margin-left: -.5px; background: var(--rule-strong, var(--muted)); height: calc(var(--gapline) + var(--row) * var(--rowh) - .1rem); }
.strip__mark.is-a::after { top: 100%; }
.strip__mark.is-b::after { bottom: 100%; }
.story__body .strip__mark :is(a, .strip__dot) { display: block; width: 100%; height: 100%; background: none; text-decoration: none; transition: transform .15s ease, opacity .3s ease; }
.strip__mark a:hover, .strip__mark a:focus-visible { transform: scale(1.3); }
/* no link underline or red tint on the marks: they only grow */
.story__body .strip__mark :is(a, .strip__dot), .story__body .strip__mark :is(a, .strip__dot):hover { text-decoration: none; }
.strip__mark a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 50%; }
.story__body .strip__mark--goal :is(a, .strip__dot) { background: var(--ink); -webkit-mask: var(--ball) center / contain no-repeat; mask: var(--ball) center / contain no-repeat; }
.story__body .strip__mark--pen :is(a, .strip__dot) { background: var(--ball-pen) center / contain no-repeat; }
.story__body .strip__mark--miss :is(a, .strip__dot) { background: var(--ball-miss) center / contain no-repeat; }
.story__body .strip__mark--var :is(a, .strip__dot) { background: var(--var) center / contain no-repeat; }
.story__body .strip__mark--yellow :is(a, .strip__dot), .story__body .strip__mark--red :is(a, .strip__dot) { width: .62rem; height: .86rem; margin: .1rem auto 0; border-radius: 1.5px; background: var(--card-yellow); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); transform: rotate(8deg); }
.story__body .strip__mark--red :is(a, .strip__dot) { background: var(--card-red); }
.strip__mark--yellow a:hover, .strip__mark--red a:hover { transform: rotate(8deg) scale(1.3); }
.story__body .strip__mark--sub :is(a, .strip__dot) { background: var(--sub) center / contain no-repeat; }
.strip__mark--whistle { width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem !important; }
.story__body .strip__mark--whistle :is(a, .strip__dot) { border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); position: relative; }
.story__body .strip__mark--whistle :is(a, .strip__dot)::before { content: ""; position: absolute; inset: .3rem .25rem; background: var(--ink); -webkit-mask: var(--whistle) center / contain no-repeat; mask: var(--whistle) center / contain no-repeat; }
.strip__mark:not(.is-a):not(.is-b).strip__mark--whistle { top: 50%; }
/* centred on the line */
/* an entry with no goal, card or substitution: a small note on the line, a link to it */
.strip__mark--note { width: .78rem; height: .78rem; margin: -.39rem 0 0 -.39rem !important; top: 50% !important; z-index: 1; }
.story__body .strip__mark--note :is(a, .strip__dot) { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M3%201.5h7l3%203v10H3z%22%20fill%3D%22%23fff7e8%22%20stroke%3D%22%231a1418%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5.5%207.5h5M5.5%2010.5h5%22%20stroke%3D%22%231a1418%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
/* a mark typed in the lineups (no entry): the same icon, not a link; the lineup's icon for it jumps here and it pulses */
.strip__dot { display: block; width: 100%; height: 100%; cursor: help; }
.strip__mark.is-typed:target .strip__dot { animation: pop-strip-pulse 1.4s ease 2; }
@keyframes pop-strip-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.7); } }
/* while reading, the marks still to come wait in grey */
.strip.is-reading .strip__mark:not(.is-past) :is(a, .strip__dot) { opacity: .38; }
.strip__scale { position: absolute; left: 0; right: 0; bottom: 0; height: .9rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.strip__scale span { position: absolute; left: var(--at); transform: translateX(-50%); }
.strip__scale span:first-child { transform: none; }
.strip__scale span.is-end { transform: translateX(-100%); }
/* the last mark, when it's at the very end */
/* wide screens: the team names hang in the left margin, right-aligned with the entries' minutes,
   so the line starts where the text does and runs its full width */
@media (min-width: 1100px) {
  .strip { grid-template-columns: minmax(0, 1fr); }
  .strip__teams { position: absolute; top: .5rem; bottom: .3rem; right: calc(100% + 1.75rem); text-align: right; }
}
@media (min-width: 1100px) {
  .strip { position: sticky; top: 4px; z-index: 20; }
  /* paper behind it, out into the margins, so the entries' minutes and timeline pass under it */
  .strip::before { content: ""; position: absolute; z-index: -1; top: -4px; bottom: 0; left: -16rem; right: -16rem; background: var(--paper); border-bottom: 1px solid var(--rule); }
}
@media (max-width: 640px) {
  .strip { --rowh: 1rem; gap: 0 .6rem; }
  .strip__mark { width: .92rem; height: .92rem; margin-left: -.46rem; }
  .strip__mark--whistle { width: 1.3rem; height: 1.3rem; margin: -.65rem 0 0 -.65rem !important; }
  .strip--et .strip__scale span:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .strip__fill, .strip__mark a { transition: none; }
  .strip__mark.is-typed:target .strip__dot { animation: none; outline: 2px solid var(--bright); outline-offset: 2px; }
}
.beat--quarter { margin: 2.2em 0 0; padding-top: .9em; border-top: 3px solid var(--ink); }
.beat--quarter + .beat--quarter { margin-top: 1.8em; }
.beat--quarter .beat__mark { font-size: 1.9rem; line-height: 1; margin-bottom: .45em; }
.beat--quarter ul, .beat--quarter ol { margin: 0; padding: 0; list-style: none; }
.beat--quarter li { position: relative; margin: 0 0 .6em; padding-left: 1.35em; }
.beat--quarter ul > li::before {
  content: ""; position: absolute; left: .1em; top: .62em;
  width: .42em; height: .42em; background: var(--bright);
}
/* 4 Quarters: a basketball for each point, an empty one for a point under it */
.story-type-quarters { --bball: 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%22%23e2702a%22%20stroke%3D%22%231a1418%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M12%201.8v20.4M1.8%2012h20.4M5%204.8c3.6%203.6%203.6%2010.8%200%2014.4M19%204.8c-3.6%203.6-3.6%2010.8%200%2014.4%22%20fill%3D%22none%22%20stroke%3D%22%231a1418%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); --bball-empty: 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%231a1418%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M12%201.8v20.4M1.8%2012h20.4M5%204.8c3.6%203.6%203.6%2010.8%200%2014.4M19%204.8c-3.6%203.6-3.6%2010.8%200%2014.4%22%20fill%3D%22none%22%20stroke%3D%22%231a1418%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); }
.story-type-quarters .beat--quarter ul > li, .story-type-quarters .story__body > ul > li { padding-left: 1.6em; }
.story-type-quarters .beat--quarter ul > li::before, .story-type-quarters .story__body > ul > li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: .9em; height: .9em;
  background: var(--bball) center / contain no-repeat;
}
.story-type-quarters .beat--quarter ul ul, .story-type-quarters .story__body > ul ul { margin: .45em 0 0; padding: 0; list-style: none; }
.story-type-quarters .beat--quarter ul ul > li, .story-type-quarters .story__body > ul ul > li { margin-bottom: .35em; }
.story-type-quarters .beat--quarter ul ul > li::before, .story-type-quarters .story__body > ul ul > li::before { top: .38em; width: .75em; height: .75em; background-image: var(--bball-empty); }
.beat--quarter ol { counter-reset: beat; }
.beat--quarter ol > li { counter-increment: beat; }
.beat--quarter ol > li::before { content: counter(beat) "."; position: absolute; left: 0; font-weight: 700; color: var(--red-text); font-variant-numeric: lining-nums; }
@media (min-width: 1100px) {
  .story__body .beat__mark {
    position: absolute; top: 0; right: calc(100% + 1.75rem);
    margin: 0; text-align: right;
  }
  .beat--minute .beat__mark { font-size: 1.65rem; top: -.05em; }
  /* the timeline: a dot beside each entry, joined by a thin line */
  .beat--minute::before {
    content: ""; position: absolute; left: -1.05rem; top: .55em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--bright);
  }
  .beat--minute::after {
    content: ""; position: absolute; left: calc(-1.05rem + 3px); top: 1.15em; bottom: -1.2em;
    width: 1px; background: var(--rule);
  }
  .beat--minute:not(:has(+ .beat--minute))::after { display: none; }
  /* a goal: a ball on the timeline in place of the dot */
  .beat--minute.is-goal::before {
    width: 15px; height: 15px; left: calc(-1.05rem - 4px); top: .36em;
    border-radius: 0; background: var(--ink);
    -webkit-mask: var(--ball) center / contain no-repeat; mask: var(--ball) center / contain no-repeat;
  }
  .beat--minute.is-goal::after { top: 1.45em; }
  /* a penalty goal: the ball with a red P */
  .beat--minute.is-pen::before {
    width: 18px; height: 18px; left: calc(-1.05rem - 5.5px); top: .3em;
    background: var(--ball-pen) center / contain no-repeat; -webkit-mask: none; mask: none;
  }
  /* a missed penalty: the ball, crossed out */
  .beat--minute.is-miss::before {
    width: 18px; height: 18px; left: calc(-1.05rem - 5.5px); top: .3em;
    border-radius: 0; background: var(--ball-miss) center / contain no-repeat; -webkit-mask: none; mask: none;
  }
  .beat--minute.is-miss::after { top: 1.45em; }
  /* a VAR review: the screen */
  .beat--minute.is-var::before {
    width: 19px; height: 19px; left: calc(-1.05rem - 6px); top: .3em;
    border-radius: 0; background: var(--var) center / contain no-repeat; -webkit-mask: none; mask: none;
  }
  .beat--minute.is-var::after { top: 1.45em; }
  /* a yellow or red card: a small card on the timeline */
  .beat--minute:is(.is-yellow, .is-red)::before {
    width: 10px; height: 14px; left: calc(-1.05rem - 1.5px); top: .4em;
    border-radius: 1.5px; background: var(--card-yellow); transform: rotate(8deg); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18);
  }
  .beat--minute.is-red::before { background: var(--card-red); }
  .beat--minute:is(.is-yellow, .is-red)::after { top: 1.5em; }
  /* a substitution: a green arrow up beside a red arrow down */
  .beat--minute.is-sub::before {
    width: 19px; height: 16px; left: calc(-1.05rem - 6px); top: .38em;
    border-radius: 0; background: var(--sub) center / contain no-repeat;
  }
  .beat--minute.is-sub::after { top: 1.5em; }
  /* half time, full time: the whistle */
  .beat--minute.is-whistle::before {
    width: 22px; height: 18px; left: calc(-1.05rem - 7.5px); top: .22em;
    border-radius: 0; background: var(--ink);
    -webkit-mask: var(--whistle) center / contain no-repeat; mask: var(--whistle) center / contain no-repeat;
  }
  .beat--minute.is-whistle::after { top: 1.55em; }
  .beat--quarter .beat__mark { font-size: 2.6rem; top: .3em; }
}
/* ---------- Lineups ----------
   PoP Companion's Starting XIs (90′) and starting fives (4 Quarters), between the intro and the first
   entry. Wider than the text so the two teams sit side by side; stacked below 900px. Each team is
   drawn in its own colours: --team (bubble), --team-on (number), --team-ring, --team-ink (names). */
.story__body .lineups {
  width: min(66rem, calc(100vw - 2 * var(--gutter))); max-width: none;
  margin: 2.2em 0 2.6em 50%; transform: translateX(-50%);
  font-size: 1rem; line-height: 1.35; hyphens: none;
}
.lineups__title {
  margin: 0 0 1.4rem; padding: 0 0 .55rem; border-bottom: 3px solid var(--ink);
  font-family: var(--caps); font-weight: 700; text-transform: lowercase; letter-spacing: .08em; font-size: 1.1rem;
}
.lineups__teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 3rem; align-items: start; }
.lineups__teams > .lineup:only-child { grid-column: 1 / -1; width: 100%; max-width: 32rem; justify-self: center; }
/* the competition, between the two teams' badges (a link to its section) */
.lineups__teams { position: relative; }
.lineups__comp { display: flex; align-items: center; justify-content: center; width: 7rem; height: 56px; text-decoration: none; background: none; color: var(--red-text); }
:is(.story__body, .drawer__lineups) .lineups__comp-logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 56px; border: 0; margin: 0; object-fit: contain; mix-blend-mode: multiply; }
/* a logo uploaded with a white background shows none on the cream */
.lineups__comp-name { font-family: var(--caps); font-weight: 700; text-transform: lowercase; letter-spacing: .08em; font-size: .9rem; line-height: 1.15; text-align: center; }
a.lineups__comp:hover .lineups__comp-logo { transform: scale(1.06); }
a.lineups__comp:hover .lineups__comp-name { text-decoration: underline; text-decoration-color: var(--bright); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .lineups__comp { position: absolute; top: 0; left: 50%; margin-left: -3.5rem; z-index: 1; }
}
@media (max-width: 899px) {
  .lineups__comp { justify-self: center; margin: 0 0 -1.2rem; height: auto; min-height: 40px; }
}
.story__body a.lineups__comp, .story__body a.lineups__comp:hover { text-decoration: none; background: none; }
@media (max-width: 899px) {
  .lineups__teams { grid-template-columns: minmax(0, 1fr); }
  .lineups__teams > .lineup { width: 100%; max-width: 34rem; justify-self: center; }
}
.lineup { --team: var(--ink); --team-on: var(--paper); --team-ring: var(--ink); --team-ink: var(--ink); --b: 2.2rem; min-width: 0; }
.lineup__head { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin: 0 0 1rem; text-align: center; }
:is(.story__body, .drawer__lineups) .lineup__logo { width: 56px; height: 56px; object-fit: contain; border: 0; margin: 0 0 .4rem; }
.lineup__team { font-weight: 700; font-size: 1.15rem; color: var(--team-ink); }
.lineup__formation { font-weight: 700; font-size: 1.55rem; line-height: 1.1; font-variant-numeric: lining-nums; letter-spacing: .02em; }
.lineup__manager { font-family: var(--caps); text-transform: lowercase; letter-spacing: .05em; font-size: .95rem; color: var(--muted); }
/* the pitch: the keeper at the bottom, attack at the top */
.pitch {
  position: relative; aspect-ratio: 5 / 4; container-type: inline-size;
  border: 1px solid var(--rule);
  background: linear-gradient(var(--rule), var(--rule)) center / 100% 1px no-repeat, var(--card);
}
@media (max-width: 560px) {
  .pitch { aspect-ratio: 1 / 1.08; }
}
.pitch::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 24%; aspect-ratio: 1;
  border: 1px solid var(--rule); border-radius: 50%; transform: translate(-50%, -50%);
}
.pitch__box { position: absolute; left: 30%; width: 40%; height: 8%; border: 1px solid var(--rule); }
.pitch__box--top { top: -1px; border-top: 0; }
.pitch__box--bottom { bottom: -1px; border-bottom: 0; }
.pitch__player {
  --b: clamp(1.7rem, 7.2cqi, 2.35rem);
  position: absolute; z-index: 1; left: var(--x); top: var(--y);
  width: calc(92% / var(--k) - .25rem); max-width: 10rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transform: translate(-50%, calc(var(--b) / -2));
}
.lineup__num {
  position: relative; flex: none; display: grid; place-items: center;
  width: var(--b); height: var(--b); border-radius: 50%;
  background: var(--team); color: var(--team-on); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--team-ring);
  font-weight: 700; font-size: calc(var(--b) * .44); line-height: 1; font-variant-numeric: lining-nums tabular-nums;
}
.lineup__c {
  position: absolute; top: -.32rem; right: -.5rem; width: 1.05rem; height: 1.05rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink);
  font-size: .62rem; font-weight: 700;
}
.lineup__name {
  margin-top: .35rem; color: var(--team-ink);
  font-family: var(--caps); font-weight: 700; text-transform: lowercase; letter-spacing: .03em;
    font-size: clamp(.74rem, 2.9cqi, 1rem); line-height: 1.1; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* one line, always: js/lineup-fit.js sets a long name smaller to fit */
}
.lineup__name[data-long] { letter-spacing: 0; font-size: clamp(.68rem, 2.6cqi, .92rem); }
/* a narrow pitch (phones): names set tighter so a back four fits side by side */
@container (max-width: 26rem) {
  .pitch .lineup__name { letter-spacing: 0; font-size: .7rem; }
  .pitch .lineup__name[data-long] { font-size: .64rem; }
}
/* a player in a lineup links to his page (PoP Companion's Players) */
.lineup__link, .lineup__sublink { color: inherit; text-decoration: none !important; background: none !important; }
.pitch__player > .lineup__link { display: flex; flex-direction: column; align-items: center; width: 100%; }
.lineup__list .lineup__link { display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 0; }
.lineup__link .lineup__num { transition: box-shadow .15s, transform .15s; }
.lineup__link:is(:hover, :focus-visible) .lineup__num { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); transform: scale(1.08); }
.lineup__link:is(:hover, :focus-visible) .lineup__name, .lineup__sublink:is(:hover, :focus-visible) .lineup__subname { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--bright); }
.lineup__link:focus-visible, .lineup__sublink:focus-visible { outline: none; }
.lineup__link:focus-visible .lineup__num { outline: 2px solid var(--ink); outline-offset: 5px; }
/* the starting five (and an XI without a formation): a list */
:is(.story__body, .drawer__lineups) .lineup__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
:is(.story__body, .drawer__lineups) .lineup__list li { display: flex; align-items: center; gap: .8rem; margin: 0; padding: .55rem .2rem; border-bottom: 1px dashed var(--rule); }
.lineup__list .lineup__name { flex: 1; margin: 0; font-size: 1.05rem; text-align: left; }
.lineup__pos { margin-left: auto; font-weight: 700; color: var(--muted); text-decoration: none; letter-spacing: .04em; }
/* substitutes and the bench, in two columns */
/* the timeline's marks beside a player (PoP Companion 2.22): a ball per goal, his cards, an arrow up
   for coming on or down for going off, a P on a penalty's ball; each opens its entry */
.lineup__events { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; margin-top: .25rem; line-height: 0; }
/* on the pitch: to the right of the circle, past where the captain's C sits, wrapping after three */
.pitch__player > .lineup__events {
  position: absolute; z-index: 2; top: -.28rem; left: calc(50% + var(--b) / 2 + .62rem);
  width: max-content; max-width: 2.9rem; margin: 0; justify-content: flex-start; gap: 2px 3px;
}
.lineup__ev { display: block; flex: none; width: .82rem; height: .82rem; text-decoration: none !important; transition: transform .15s; }
.lineup__ev:is(:hover, :focus-visible) { transform: scale(1.25); outline: none; }
.lineup__ev:focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.lineup__ev--goal { background: var(--ink) !important; -webkit-mask: var(--ball) center / contain no-repeat; mask: var(--ball) center / contain no-repeat; }
.lineup__ev--yellow, .lineup__ev--red { width: .52rem; height: .72rem; border-radius: 1.5px; background: var(--card-yellow) !important; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); transform: rotate(8deg); }
.lineup__ev--red { background: var(--card-red) !important; }
.lineup__ev--pen { width: .95rem; height: .95rem; background: var(--ball-pen) center / contain no-repeat !important; }
.lineup__ev--miss { width: .95rem; height: .95rem; background: var(--ball-miss) center / contain no-repeat !important; }
/* a Rondo's Team of the Week (PoP Companion): each player in his club's colours, its crest to the left
   of his circle; his goals and assists (to the right, as in a Starting XI) go to his club's match */
.lineups--totw .lineups__teams > .lineup:only-child { max-width: 34rem; }
.totw__note { margin-top: .15rem; font-family: var(--caps); font-weight: 700; text-transform: lowercase; letter-spacing: .06em; font-size: .8rem; color: var(--muted); }
:is(.story__body, .drawer__lineups) .totw__crest {
  position: absolute; z-index: 2; top: -.2rem; left: calc(50% - var(--b) / 2 - 1.75rem);
  width: 1.4rem; height: 1.4rem; margin: 0; padding: 2px; border: 0; border-radius: 50%; box-sizing: border-box;
  object-fit: contain; background: var(--paper); box-shadow: 0 0 0 1px var(--rule);
}
/* a narrow pitch (phones): the crest tucks onto the circle's shoulder, and the goals and assists go
   under the name, so a back four's marks don't run into each other */
@container (max-width: 26rem) {
  :is(.story__body, .drawer__lineups) .lineups--totw .totw__crest { top: -.4rem; left: calc(50% - var(--b) / 2 - .6rem); width: 1.15rem; height: 1.15rem; padding: 1.5px; }
  .lineups--totw .pitch__player > .lineup__events { position: static; width: auto; max-width: none; margin-top: .2rem; justify-content: center; }
}
.lineup__list .totw__row { display: flex; align-items: center; gap: .6rem; width: 100%; }
.lineup__list .totw__crest { position: static; flex: none; }
.lineup__ev--var { width: 1rem; height: .95rem; background: var(--var) center / contain no-repeat !important; }
.lineup__ev--assist { width: 1.1rem; height: .82rem; background: var(--ink) !important; -webkit-mask: var(--assist) center / contain no-repeat; mask: var(--assist) center / contain no-repeat; }
.lineup__ev--yellow:is(:hover, :focus-visible), .lineup__ev--red:is(:hover, :focus-visible) { transform: rotate(8deg) scale(1.25); }
/* marks typed after a name (no entry to go to): they don't grow, and their tooltip says what they are */
span.lineup__ev { cursor: help; }
span.lineup__ev:hover { transform: none; }
span.lineup__ev:is(.lineup__ev--yellow, .lineup__ev--red):hover { transform: rotate(8deg); }
.lineup__ev--on { width: .6rem; background: var(--sub-on) center / contain no-repeat !important; }
.lineup__ev--off { width: .6rem; background: var(--sub-off) center / contain no-repeat !important; }
.lineup__list .lineup__events, .lineup__bench .lineup__events { margin: 0 0 0 .4rem; justify-content: flex-start; }
.lineup__bench .lineup__events { align-self: center; }
.lineup__bench { margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
.lineup__label { margin: 0 0 .55rem; text-align: center; font-family: var(--caps); font-weight: 700; text-transform: lowercase; letter-spacing: .08em; font-size: .95rem; }
.story__body .lineup__bench ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.story__body .lineup__bench li { display: flex; gap: .5rem; margin: 0 0 .3rem; break-inside: avoid; font-size: .95rem; }
.lineup__subnum { flex: none; min-width: 1.6em; text-align: right; font-weight: 700; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.lineup__subname { font-family: var(--caps); font-weight: 700; text-transform: lowercase; letter-spacing: .03em; display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lineup__bench li > .lineup__sublink, .rlist__who > .lineup__sublink { display: block; min-width: 0; overflow: hidden; }
/* who missed the game (PoP Companion 3.55): one quiet line under the bench, a cross for an injury and a
   red card for a suspension, the reason in grey */
.lineup__out { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--rule); }
.lineup__out .lineup__label { margin-bottom: .3rem; color: var(--muted); font-size: .85rem; }
.story__body .lineup__outlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem 0; font-size: .92rem; line-height: 1.45; }
.story__body .lineup__outlist li { margin: 0; padding: 0; white-space: nowrap; }
.lineup__outp:not(:last-child)::after { content: "·"; margin: 0 .5rem; color: var(--muted); }
/* after a name, so a wrapped line never starts with one */
.lineup__outname { font-family: var(--caps); font-weight: 700; text-transform: lowercase; letter-spacing: .03em; }
.lineup__sublink:is(:hover, :focus-visible) .lineup__outname { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--bright); }
.lineup__why { color: var(--muted); font-size: .88em; }
.lineup__outmark { display: inline-block; margin-right: .3rem; vertical-align: -.02em; }
.lineup__outmark--hurt { width: .7rem; height: .7rem; vertical-align: -.04em; /* the medical cross: arms 30% of its width, #c00 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23c00' d='M34.85 0h30.3v34.85H100v30.3H65.15V100h-30.3V65.15H0v-30.3h34.85z'/%3E%3C/svg%3E") center / contain no-repeat; }
.lineup__outmark--ban { width: .5rem; height: .68rem; border-radius: 1px; background: #d71920; transform: rotate(8deg); }
@media (max-width: 560px) {
  .story__body .lineup__outlist { font-size: .86rem; }
}
@media (max-width: 560px) {
  .story__body .lineup__bench li { font-size: .86rem; }
  .story__body .lineup__bench ul { column-gap: 1rem; }
  .lineup__subname { letter-spacing: 0; }
}
/* [xi] (PoP Companion 3.10): one team's shape at a moment, drawn like the Starting XIs, as a figure
   in the story (a title above it like a play diagram's, a caption under it) */
.story__body .xi-figure { max-width: 32rem; margin: 2.4em auto; font-size: 1rem; line-height: 1.35; hyphens: none; }
.xi-figure .play__title { text-align: center; }
.xi-figure .lineup__head { margin-bottom: .8rem; }
.story__body .xi-figure .lineup__logo { width: 40px; height: 40px; margin-bottom: .2rem; }
.xi-figure .lineup__team { font-size: 1rem; }
.xi-figure .lineup__formation { font-size: 1.3rem; }
.xi-figure .play__caption { margin-top: .6rem; text-align: center; }
/* the Player ratings (PoP Companion 3.09): the XIs again at the end of a 90′ story, each player's grade
   to the left of his circle (the marks sit to the right), coloured from green (8 and up, or an A) through
   amber to red (below 5, or an F); the substitutes who played, with theirs at the end of the line */
.story__body .lineups--ratings { margin-top: 3.2em; }
.lineup__grade {
  --g: var(--ink); --g-on: var(--paper);
  display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.2rem; padding: 0 .3rem; border-radius: .6rem;
  background: var(--g); color: var(--g-on);
  font: 700 .78rem/1 var(--text); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; text-transform: none;
}
.lineup__grade--top { --g: #0f6b32; --g-on: #fff; }
.lineup__grade--good { --g: #3d8b3d; --g-on: #fff; }
.lineup__grade--fair { --g: #f0b323; --g-on: var(--black); }
.lineup__grade--poor { --g: #e8782a; --g-on: var(--black); }
.lineup__grade--bad { --g: #c80f36; --g-on: #fff; }
.lineup__num > .lineup__grade { position: absolute; top: -.36rem; right: calc(100% + .1rem); box-shadow: 0 0 0 2px var(--paper); }
.lineup__list .lineup__num > .lineup__grade { top: 50%; right: auto; left: calc(100% + .35rem); transform: translateY(-50%); }
/* a list (no formation): beside the circle */
/* the Man of the Match: a gold star at the foot of his circle (a substitute: after his name) */
.lineup__motm { display: inline-block; flex: none; width: 1.15rem; height: 1.15rem; background: var(--motm) center / contain no-repeat; vertical-align: -.15em; }
.lineup__num > .lineup__motm { position: absolute; right: -.55rem; bottom: -.4rem; width: 1.25rem; height: 1.25rem; filter: drop-shadow(0 0 1.5px var(--paper)) drop-shadow(0 0 1px var(--paper)); }
.lineup__bench .lineup__motm { margin-left: .35rem; align-self: center; }
.story__body .lineup__bench li > .lineup__grade { margin-left: auto; align-self: center; flex: none; min-width: 1.6rem; height: 1.1rem; font-size: .72rem; }
@media (max-width: 560px) {
  .story__body .lineups--ratings .lineup__bench ul { columns: 1; max-width: 20rem; margin-inline: auto; }
  /* one substitute a line: name, marks, grade */
  .story__body .lineups--ratings .lineup__bench li { font-size: .92rem; margin-bottom: .4rem; }
}
@container (max-width: 26rem) {
  .lineup__num > .lineup__grade { min-width: 1.5rem; height: 1.05rem; padding: 0 .22rem; font-size: .68rem; top: -.42rem; right: calc(100% - .2rem); }
}
/* the Player ratings as a short list (PoP Companion's "list" layout): number, name, star, goals and
   cards, grade; the starters in lineup order, then the substitutes who played */
.lineups--rlist .lineups__teams { gap: 2rem 3.5rem; }
.rlist__head { display: flex; align-items: center; gap: .6rem; margin: 0 0 .3rem; padding: 0 0 .5rem; border-bottom: 2px solid var(--team-ink); }
:is(.story__body, .drawer__lineups) .rlist__logo { width: 32px; height: 32px; object-fit: contain; border: 0; margin: 0; }
.rlist__head .lineup__team { font-size: 1.05rem; }
.story__body .rlist { list-style: none; margin: 0; padding: 0; }
.story__body .rlist__row {
  display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) auto 2.1rem; align-items: center; gap: .65rem;
  margin: 0; padding: .36rem .3rem; border-bottom: 1px dashed var(--rule);
}
.rlist__row .lineup__num { --b: 1.55rem; font-size: .7rem; box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--team-ring); }
.rlist__who { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.rlist__name { font-family: var(--caps); font-weight: 700; text-transform: lowercase; letter-spacing: .03em; font-size: .98rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlist__on { flex: none; color: var(--muted); font-size: .82rem; font-variant-numeric: lining-nums; }
.rlist .lineup__events { margin: 0; justify-content: flex-end; flex-wrap: nowrap; }
.rlist__row > .lineup__grade { justify-self: end; }
.rlist__row.is-motm { background: linear-gradient(90deg, rgb(255 201 40 / .22), rgb(255 201 40 / 0) 75%); }
.rlist .lineup__motm { width: 1.05rem; height: 1.05rem; }
.lineup__grade--none { background: none; color: var(--muted); }
/* the manager, graded with his players: a clipboard where the number would be */
.rlist__mgr { justify-self: center; width: 1.1rem; height: 1.3rem; background: var(--team-ink, var(--ink)); -webkit-mask: var(--clipboard) center / contain no-repeat; mask: var(--clipboard) center / contain no-repeat;
  --clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M7 1h6a1 1 0 0 1 1 1v1h3a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3V2a1 1 0 0 1 1-1zm0 2v2h6V3H7zM4 9v2h12V9H4zm0 4v2h12v-2H4zm0 4v2h8v-2H4z'/%3E%3C/svg%3E"); }
.lineup__mlink { color: inherit; text-decoration: none !important; background: none !important; }
.rlist__who > .lineup__mlink { display: block; min-width: 0; overflow: hidden; }
.lineup__mlink:is(:hover, :focus-visible), .lineup__mlink:is(:hover, :focus-visible) .rlist__name { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; text-decoration-color: var(--bright) !important; }
.lineup__mlink:focus-visible { outline: none; }
.lineup__manager .lineup__grade { margin-left: .3rem; vertical-align: .05em; }
.rlist__label { margin: 1rem 0 .1rem; padding-left: .3rem; font-family: var(--caps); font-weight: 700; text-transform: lowercase; letter-spacing: .08em; font-size: .85rem; color: var(--muted); }
/* the shorter team's list padded with empty rows (PoP Companion 3.55), so the two managers sit level;
   once the teams stack, one under the other, there's nothing to line up */
.rlist__row--pad, .rlist__pad { visibility: hidden; }
@media (max-width: 899px) {
  .story__body .rlist__row--pad, .rlist__pad { display: none; }
}
/* and the two headers the same height, crest or none, the name on one line */
.rlist__head { box-sizing: border-box; min-height: calc(32px + .5rem + 2px); }
.rlist__head .lineup__team { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .story__body .rlist__row { gap: .5rem; padding-inline: .1rem; }
  .rlist__name { font-size: .92rem; letter-spacing: .01em; }
}
@media (max-width: 760px) {
  .has-sticky-mast .brack { top: var(--mast-h, 0px); }
}
.story__body .play__caption, .play__caption { margin-top: .9rem; font-size: .95rem; font-style: italic; color: var(--muted); }
/* Grammar of the Game: a section's number centred over its centred heading */
.is-grammar .story__body h2 .sec-num { margin-left: auto; margin-right: auto; }
/* Grammar of the Game: old-style figures in the essay's text, so years sit in the line like lowercase
   (labels, scores in diagrams and section numbers keep full-height figures) */
.is-grammar .story__body { font-variant-numeric: oldstyle-nums proportional-nums; }
/* ---------- Rondo: the mark above the title (PoP Companion's Rondo story type) ---------- */
.story__rondo { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 0 1.3rem; }
.story__rondo a { display: block; text-decoration: none; background: none; }
/* the On the Bounce mark (inc/template-tags.php): its name, the O of Bounce a ball; at the top of the story the
   letters drop in one by one and the ball comes in last, bouncing three times (CSS only, once) */
.story__bounce { display: flex; justify-content: center; margin: 0 0 1.3rem; }
.story__bounce a { display: block; text-decoration: none; background: none; color: var(--ink); }
.story__bounce a:hover { color: var(--red); }
.bounce-mark { display: inline-flex; align-items: baseline; gap: .55em; font: 700 1.3rem/1 var(--caps); color: inherit; }
.bounce-mark__word { display: inline-flex; align-items: baseline; gap: .1em; }
.bounce-mark__l { display: inline-block; transform-origin: 50% 100%; }
.bounce-mark__ball { position: relative; display: inline-block; width: .74em; height: .74em; }
.bounce-mark__ball svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; }
.bounce-mark__ball::after { content: ""; position: absolute; left: -.14em; right: -.14em; bottom: -.22em; height: .13em; border-radius: .1em; background: var(--red); }
.bounce-mark__skin { fill: var(--card); stroke: currentColor; }
.bounce-mark__seams { stroke: currentColor; transform-box: fill-box; transform-origin: center; }
.bounce-mark.is-on .bounce-mark__l { animation: bm-drop .56s calc(.15s + var(--i) * .075s) both; }
.bounce-mark.is-on .bounce-mark__ball svg { animation: bm-ball 1.05s calc(.27s + var(--n) * .075s) both; }
.bounce-mark.is-on .bounce-mark__seams { animation: bm-spin 1.05s calc(.27s + var(--n) * .075s) both; }
.bounce-mark.is-on .bounce-mark__ball::after { animation: bm-line .22s calc(.65s + var(--n) * .075s) both; }
@keyframes bm-drop {
  0% { transform: translateY(-2.2em); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  12% { opacity: 1; }
  46% { transform: translateY(0); animation-timing-function: ease-out; }
  54% { transform: translateY(0) scale(1.08, .86); }
  62% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  80% { transform: translateY(-.2em); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  100% { transform: none; opacity: 1; }
}
@keyframes bm-ball {
  0% { transform: translateY(-3.4em); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  6% { opacity: 1; }
  36% { transform: translateY(0); animation-timing-function: ease-out; }
  40% { transform: translateY(0) scale(1.2, .78); }
  43% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  58% { transform: translateY(-1.05em); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  72% { transform: translateY(0); animation-timing-function: ease-out; }
  74% { transform: translateY(0) scale(1.1, .88); }
  76% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  84% { transform: translateY(-.38em); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  91% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  95.5% { transform: translateY(-.1em); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  100% { transform: none; opacity: 1; }
}
@keyframes bm-spin { from { transform: rotate(-320deg); } to { transform: none; } }
@keyframes bm-line { from { opacity: 0; transform: scaleX(.3); } }
@media (prefers-reduced-motion: reduce) {
  .bounce-mark.is-on .bounce-mark__l, .bounce-mark.is-on .bounce-mark__ball svg, .bounce-mark.is-on .bounce-mark__seams, .bounce-mark.is-on .bounce-mark__ball::after { animation: none; }
}
/* the Bouncin' Around mark (inc/template-tags.php; played once by js/around.js) and its badge */
.around-mark { display: block; overflow: visible; }
.around-mark__trail { stroke: var(--ink); }
.around-mark__pin { fill: var(--card); stroke: var(--ink); }
.around-mark__dot { fill: var(--ink); }
.around-mark__pin--red { fill: var(--red); stroke: var(--red); }
.around-mark__ball circle { fill: var(--card); stroke: var(--ink); }
.around-mark__ball g { stroke: var(--ink); }
.around-mark__burst line { stroke: var(--ink); }
.around-mark__burst line:nth-child(even) { stroke: var(--red); }
.story__around { display: flex; align-items: center; justify-content: center; margin: 0 0 1.3rem; }
.story__around a { display: block; text-decoration: none; background: none; }
.story__around .around-mark { width: 6.5rem; height: auto; }
.story__around a:hover .around-mark__trail, .story__around a:hover .around-mark__pin:not(.around-mark__pin--red) { stroke: var(--red); }
.story__around a:hover .around-mark__dot { fill: var(--red); }
/* a numbered ball: the number on a cream patch, clear of the seams */
.bnum { position: relative; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; }
.bnum .bball { position: absolute; inset: 0; width: 100%; height: 100%; }
.bnum b { position: relative; font-weight: 700; font-size: .95rem; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
/* the row of balls */
.brack { position: sticky; top: 0; z-index: 20; margin: 0 0 2rem; padding: .7rem 0 .55rem; background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
.story__body .brack__balls { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.story__body .brack__balls li { margin: 0; padding: 0; }
.story__body .brack__balls li::before, .story__body .brack__balls li::after { content: none; }
.brack__ball { display: block; text-decoration: none !important; background: none !important; transition: filter .25s, opacity .25s; }
.brack__ball .bnum { width: 2.35rem; height: 2.35rem; transition: transform .15s; }
.brack__ball.is-read { opacity: .45; filter: grayscale(.85); }
.brack__ball.is-here .bnum, .brack__ball:hover .bnum, .brack__ball:focus-visible .bnum { transform: translateY(-3px); }
.brack__ball.is-here .bball__skin { stroke: var(--red); stroke-width: 3.2; }
.brack__ball.is-pog .bnum::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgb(238 24 65 / .6), 0 0 0 5px rgb(238 24 65 / .08); }
/* the Passage of the Game's ball: ringed like its box */
@media (max-width: 560px) {
  .story__body .brack__balls { gap: .2rem; }
  .brack__ball .bnum { width: 1.95rem; height: 1.95rem; }
  .brack__ball .bnum b { font-size: .8rem; }
}
/* the intro, then the dishes */
.bounce__intro { font-size: 1.08em; }
.bounce__intro > :last-child { margin-bottom: 1.6em; }
.bounce { position: relative; margin: 0 0 1.4em; padding: 0 0 1.4em; border-bottom: 1px dashed var(--rule); scroll-margin-top: 5.5rem; }
.bounce__no { display: inline-block; margin-bottom: .4rem; text-decoration: none !important; background: none !important; }
@media (min-width: 1100px) {
  .bounce__no { position: absolute; right: calc(100% + 1.4rem); top: -.2rem; margin: 0; }
}
.story__body .bounce__head { margin: 0 0 .35rem; font-size: 1.45rem; line-height: 1.15; }
.story__body .bounce__ctx { display: flex; flex-wrap: wrap; gap: .2rem .7rem; margin: 0 0 .55rem; font: 700 .78rem/1.2 var(--caps); text-transform: lowercase; letter-spacing: .1em; }
.bounce__when { font-variant-numeric: lining-nums; }
.bounce__tag { color: var(--red-text); }
.story__body .bounce__text > p { margin: 0 0 .8em; }
.bounce__text > :last-child { margin-bottom: 0; }
/* its points: a black dot, and a hollow one for a point under it */
.story__body .bounce__text ul { margin: 0 0 .8em; padding-left: 1.25em; list-style: disc; }
.story__body .bounce__text ul ul { margin: .35em 0 .15em; list-style: circle; }
.story__body .bounce__text li { margin: 0 0 .45em; padding-left: .15em; }
.story__body .bounce__text li::marker { color: var(--ink); }
.story__body .bounce__text ul ul li { margin-bottom: .3em; }
.bounce.is-bouncing-target .bnum { 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; } }
.bounce:target .bounce__head { background: linear-gradient(transparent 62%, rgb(255 201 40 / .45) 62%); }
/* the end mark after the last dish */
.story__body > .bounce:last-of-type .bounce__text > p:last-child::after, .story__body > .bounce:last-of-type .bounce__text > :is(ul, ol):last-child > li:last-child::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;
}
/* the Passage of the Game: drawn exactly as in a 90′ story. A faint red outline, pure white inside,
   its name on the outline's top edge. Phones: round the whole dish. Wide screens: round the text, its
   left edge through the number's ball, as the 90′ one runs along the timeline through its mark */
.story__body .bounce__pog {
  position: absolute; z-index: 2; margin: 0; padding: 0 .45em;
  background: linear-gradient(var(--paper) 50%, #fff 50%); /* on the outline: paper above it, the box's white below */
  font: 700 .8rem/1.5 var(--caps); text-transform: lowercase; letter-spacing: .08em; color: var(--red-text); white-space: nowrap;
}
.story__body .bounce__pog::after { content: none !important; }
@media (max-width: 1099px) {
  .bounce.is-pog { margin: 1.6em -.75rem 1.4em; padding: 1.1em .75rem 1em; border: 1px solid rgb(238 24 65 / .45); border-radius: 6px; box-shadow: 0 0 0 4px rgb(238 24 65 / .07); background: #fff; }
  .story__body .bounce.is-pog .bounce__pog { top: -.78em; right: .55rem; }
}
@media (min-width: 1100px) {
  .bounce.is-pog { z-index: 0; margin-top: 2.1em; padding-bottom: 1.6em; border-bottom-color: transparent; }
  .bounce.is-pog::before {
    content: ""; position: absolute; left: -2.7rem; top: -1.3rem; right: -1.3rem; bottom: .7rem;
    border: 1px solid rgb(238 24 65 / .45); border-radius: 0 6px 6px 0;
    box-shadow: 0 0 0 4px rgb(238 24 65 / .07); pointer-events: none;
    z-index: -1; background: #fff; /* pure white inside: the passage stands off the page */
  }
  .story__body .bounce.is-pog .bounce__pog { top: -1.9rem; right: .2rem; }
}
/* ---------- Letters from… (PoP Companion's story type: inc/letters.php; template-parts/letter-head.php) ----------
   A long-form story from a place: the airmail stripe, "Letter from Lisbon" with a postmark stamped beside
   it, the title set to the left, the photograph wide with its credit, a dateline, paragraphs set as in a
   magazine (no gap, a first-line indent), the ticket stub for the game, and the sign-off. */
.story-type-letters { --air-red: var(--red); --air-blue: #1f3a68; }
.airmail { height: 10px; background: repeating-linear-gradient(-45deg, var(--air-red) 0 16px, var(--paper) 16px 24px, var(--air-blue) 24px 40px, var(--paper) 40px 48px); }
.story__head.letter__head { max-width: 52rem; margin: 2.6rem auto 2rem; padding: 0 var(--gutter); text-align: left; }
.letter__kicker { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.letter__rubric { margin: 0; }
.letter__rubric a { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.letter__from { font: 700 .95rem/1 var(--caps); text-transform: lowercase; letter-spacing: .2em; color: var(--red-text); }
.letter__place { margin-top: .25rem; font: italic 400 clamp(2.6rem, 6vw, 4rem)/1 var(--text); letter-spacing: -.01em; }
.postmark { flex: none; width: clamp(8.5rem, 18vw, 11.5rem); height: auto; color: var(--red); transform: rotate(-9deg); opacity: .9; animation: pm-stamp .55s cubic-bezier(.2, 1.4, .4, 1) .25s both; }
.postmark__ink { stroke: currentColor; }
.postmark text { fill: currentColor; font-family: var(--caps); font-weight: 700; }
.postmark__ring { font-size: 10px; letter-spacing: .12em; }
.postmark__day { font-size: 15px; letter-spacing: .08em; }
.postmark__year { font-size: 13px; letter-spacing: .14em; }
@keyframes pm-stamp { from { transform: rotate(-20deg) scale(1.6); opacity: 0; } 60% { opacity: .95; } to { transform: rotate(-9deg) scale(1); opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .postmark { animation: none; }
}
.letter__head .story__title.letter__title { margin: 0 0 1rem; font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.03; letter-spacing: -.015em; text-align: left; text-wrap: balance; }
.letter__head .story__dek.letter__dek { margin: 0 0 1.2rem; max-width: 40rem; font-size: clamp(1.2rem, 2.4vw, 1.45rem); font-style: italic; line-height: 1.38; color: var(--muted); text-align: left; text-wrap: pretty; }
.letter__head .story__byrow { justify-content: flex-start; }
.letter__byline { margin: 0; font-size: .85rem; letter-spacing: .12em; color: var(--ink); text-align: left; }
.letter__photo { max-width: 74rem; margin: 0 auto 2.6rem; padding: 0 var(--gutter); }
.letter__photo img { display: block; width: 100%; height: auto; border: 0; }
.letter__photo figcaption { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .55rem 0 0; font-size: .92rem; font-style: italic; color: var(--muted); }
.letter__credit { font: 700 .8rem/1.3 var(--caps); font-style: normal; text-transform: lowercase; letter-spacing: .1em; }
.dateline { font-family: var(--caps); font-weight: 700; text-transform: lowercase; letter-spacing: .08em; color: var(--red-text); }
.letter__body > p:first-of-type::first-letter { all: unset; }
/* the dateline opens the letter, not a drop cap */
.letter__body > p:first-of-type::first-line { font: inherit; letter-spacing: inherit; text-transform: none; }
.letter__body > p { margin-bottom: 0; text-indent: 1.5em; }
.letter__body > p:first-of-type, .letter__body > :not(p) + p, .letter__body > .letter__signoff { text-indent: 0; }
/* flush after the dateline, a stub, a photo or a heading */
.letter__body > :not(p) { margin-top: 1.6em; margin-bottom: 1.6em; }
.letter__body > .letter__signoff { margin-top: 1.6em; text-align: right; font-style: italic; color: var(--muted); }
.story__body.letter__body > p:last-of-type::after { content: none; }
.letter__signoff::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; }
/* the ticket stub ([stub]) */
.stub { position: relative; display: flex; margin: 2em 0 2.2em; background: var(--card); border: 2px solid var(--ink); box-shadow: var(--shadow); font-size: 1rem; line-height: 1.3; text-indent: 0; }
.stub::before, .stub::after { content: ""; position: absolute; right: 5.6rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); transform: translateX(50%); }
.stub::before { top: -.6rem; clip-path: inset(50% 0 0 0); }
.stub::after { bottom: -.6rem; clip-path: inset(0 0 50% 0); }
.stub__main { flex: 1; padding: 1rem 1.2rem 1.1rem; }
.story__body .stub p { margin: 0; text-indent: 0; }
.story__body .stub .stub__kicker { margin: 0 0 .3rem; font-size: .72rem; color: var(--red-text); }
.story__body .stub__match { font-weight: 700; font-size: 1.55rem; line-height: 1.1; }
.stub__match span { font-weight: 400; font-style: italic; color: var(--muted); }
.story__body .stub .stub__comp { margin: .35rem 0 .8rem; font-size: .75rem; color: var(--muted); }
.stub__facts { display: grid; grid-template-columns: repeat(4, auto); gap: .2rem 1.2rem; margin: 0; }
.stub__facts dt { font: 700 .66rem/1.2 var(--caps); text-transform: lowercase; letter-spacing: .12em; color: var(--muted); }
.stub__facts dd { margin: .1rem 0 0; font-size: .95rem; }
.stub__tear { width: 0; margin: .5rem 0; border-left: 2px dashed var(--ink); }
.stub__side { flex: none; width: 5.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; background: var(--gold); }
.stub__side .label { font-size: .7rem; }
.stub__side b { font-size: 1.4rem; font-variant-numeric: lining-nums; letter-spacing: .04em; }
@media (max-width: 560px) {
  .story__head.letter__head { margin-top: 1.6rem; }
  .letter__kicker { align-items: flex-start; }
  .stub__facts { grid-template-columns: repeat(2, auto); }
  .stub__side { width: 4.4rem; }
  .stub::before, .stub::after { right: 4.4rem; }
}
/* ---------- Quick Passes ---------- */
.live-dot { display: inline-block; width: .5em; height: .5em; margin-right: .4em; border-radius: 50%; background: var(--bright); vertical-align: .08em; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}
/* 90′ and On the Bounce for a reader who hasn't paid: every minute or dish shows, the first open, the rest locked */
.is-locked.beat--minute { padding-bottom: .8em; }
.beat__body.is-locked, .bounce__text.is-locked { margin: .15em 0 0; }
.entry-lock { display: inline-flex; align-items: center; gap: .45em; color: var(--muted); text-decoration: none; font: 700 .68rem/1 var(--caps); letter-spacing: .14em; text-transform: lowercase; }
.entry-lock:hover, .entry-lock:focus-visible { color: var(--red-text); }
.entry-lock__icon { display: inline-block; width: .95rem; height: 1.05rem; background: currentColor; -webkit-mask: var(--lock) center / contain no-repeat; mask: var(--lock) center / contain no-repeat; }
.is-locked.bounce .bounce__head { opacity: .9; }
/* ---------- Bouncin' Around: the night on a map, then a paragraph or two a game (PoP Companion) ----------
   The map runs the page's full width, a pin in each home team's city with the winner's logo (the
   loser's small in its corner); the games follow, each its score card beside its recap. */
.around__intro { font-size: 1.08em; }
.around__intro > :last-child { margin-bottom: 1.8em; }
.story__body > .around__intro > p:first-child::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 > .around__intro > p:first-child::first-letter { float: none; margin: 0 .08em 0 0; font-size: 1em; line-height: 1; -webkit-initial-letter: 3; initial-letter: 3; }
}
.story__body > .around__intro > p:first-child::first-line { font-family: var(--caps); }
.story__body .around-map, .story__body .around {
  width: min(64rem, calc(100vw - 2 * var(--gutter))); max-width: none; margin-left: 50%; transform: translateX(-50%);
}
.story__body .around-map { width: min(calc(var(--wide) - 2 * var(--gutter)), calc(100vw - 2 * var(--gutter))); margin-top: .4em; margin-bottom: 3.2rem; scroll-margin-top: 1.5rem; }
.around-map__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1.2rem; margin: 0 0 1rem; }
.story__body .around-map__title { margin: 0; font: 700 1.05rem/1.3 var(--caps); letter-spacing: .16em; text-transform: lowercase; color: var(--red); }
.around-map__note { margin: 0; font: 700 .82rem/1.3 var(--caps); letter-spacing: .12em; text-transform: lowercase; color: var(--muted); }
.around-map__card { background: #f6ecd8; border: 2px solid var(--ink); box-shadow: var(--shadow); padding: clamp(.5rem, 2vw, 1.6rem); }
.around-map__frame { position: relative; max-width: 100%; }
.around-map__frame svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.around-map__us { fill: var(--card); stroke: #8f857d; stroke-width: .9; stroke-linejoin: round; }
.around-map__ca { fill: #ebe1cd; stroke: #c9bba2; stroke-width: 1; stroke-linejoin: round; }
/* a pin: the winner's logo on a round head, a needle down to the city */
.story__body .apin {
  --head: clamp(30px, 4.2vw, 58px);
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; min-width: 44px; padding-top: 6px;
  color: var(--ink); text-decoration: none; background: none;
}
.apin__head {
  position: relative; display: grid; place-items: center; width: var(--head); height: var(--head); border-radius: 50%;
  background: var(--card); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--shade);
  transition: transform .15s ease, box-shadow .15s ease;
}
.story__body .apin__head > .apin__logo { width: 74%; height: 74%; object-fit: contain; border: 0; }
.apin__head > .score__crest { width: 62%; height: 62%; margin: 0; }
.apin__lost {
  position: absolute; right: -16%; bottom: -14%; width: 46%; height: 46%; border-radius: 50%;
  display: grid; place-items: center; background: var(--card); border: 1.5px solid var(--ink);
}
.story__body .apin__lost .apin__logo { width: 76%; height: 76%; object-fit: contain; border: 0; opacity: .55; filter: grayscale(.6); }
.apin__lost .score__crest { width: 64%; height: 64%; margin: 0; opacity: .6; }
.pop-around-solo .apin__lost { display: none; }
/* Customizer: the winner's logo alone */
.apin__needle { width: 2px; height: calc(var(--head) * .5); background: var(--ink); }
.apin__tip { width: 7px; height: 7px; margin-top: -1px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgb(26 20 24 / .12); }
.apin__tag {
  position: absolute; top: calc(6px + var(--head) / 2); transform: translateY(-50%);
  padding: .32em .6em .36em; background: var(--ink); color: var(--paper); white-space: nowrap;
  font: 700 .8rem/1 var(--caps); letter-spacing: .1em; text-transform: lowercase; font-variant-numeric: lining-nums tabular-nums;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.apin__tag--right { left: calc(50% + var(--head) * .7 + 8px); }
.apin__tag--left { right: calc(50% + var(--head) / 2 + 8px); }
.pop-around-solo .apin__tag--right { left: calc(50% + var(--head) / 2 + 8px); }
.story__body .apin:hover, .story__body .apin:focus-visible, .story__body .apin.is-on { z-index: 100 !important; background: none; }
.apin:hover .apin__head, .apin:focus-visible .apin__head { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--shade); }
.apin:hover .apin__tag, .apin:focus-visible .apin__tag, .apin.is-on .apin__tag { opacity: 1; }
.apin.is-on .apin__head { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--bright); }
.story__body .apin:focus-visible { outline: none; }
.apin:focus-visible .apin__head { outline: 3px solid var(--bright); outline-offset: 3px; }
/* under the map on phones: the games as a row of logos (the pins are too close to tap there) */
.around-jump { display: none; gap: .5rem; margin: 1rem calc(-1 * var(--gutter)) 0 0; padding: 0 var(--gutter) .4rem 0; overflow-x: auto; scrollbar-width: none; }
.around-jump::-webkit-scrollbar { display: none; }
.story__body .around-jump__game {
  flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .75rem;
  background: var(--card); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--shade); text-decoration: none;
  font: 700 .8rem/1 var(--caps); letter-spacing: .12em; text-transform: lowercase; white-space: nowrap;
}
.story__body .around-jump__game:hover { background: var(--chip); }
.story__body .around-jump__game.is-on { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--bright); }
.story__body .around-jump__logo { width: 24px; height: 24px; object-fit: contain; border: 0; }
.around-jump .score__crest { width: 20px; height: 20px; margin: 0; }
/* the games */
.story__body .around {
  display: grid; grid-template-columns: 21rem minmax(0, 1fr); gap: 1.3rem 2.8rem; align-items: start;
  margin-bottom: 0; padding: 2.6rem 0; border-top: 3px solid var(--ink); scroll-margin-top: 1.5rem;
}
.story__body .around:last-of-type { border-bottom: 1px solid var(--ink); margin-bottom: 2.6rem; }
.story__body .around__where {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; margin: 0;
  font: 700 1.05rem/1.3 var(--caps); letter-spacing: .12em; text-transform: lowercase;
}
.story__body .around__title {
  color: var(--red); text-decoration: none; padding-block: .35em;
  background-image: linear-gradient(var(--bright), var(--bright)); background-repeat: no-repeat; background-position: 0 calc(100% - .2em); background-size: 0 2px;
  transition: background-size .25s ease;
}
.story__body .around__where .around__title:hover, .story__body .around__where .around__title:focus-visible {
  /* the story's link hover sets the whole background, so the underline is drawn again here */
  background: linear-gradient(var(--bright), var(--bright)) no-repeat 0 calc(100% - .2em) / 100% 2px; color: var(--red);
}
.around__city { color: var(--muted); font-size: .8em; }
.around.is-on .around__where::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--bright); align-self: center; }
.story__body .around .score { height: auto; box-shadow: var(--shadow); }
/* the card keeps its own height, however long the recap beside it */
.story__body .around .score__logo { border: 0; }
.around__body { min-width: 0; max-width: var(--measure); }
.around__recap > :last-child { margin-bottom: 0; }
.around__recap > * { margin-top: 0; margin-bottom: 1em; }
.around__links { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.6rem; margin: 1.1rem 0 0; padding-top: .7rem; border-top: 1px dashed var(--rule); }
.story__body .around__back, .around__pass {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: 0;
  font: 700 .85rem/1 var(--caps); letter-spacing: .12em; text-transform: lowercase; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.story__body .around__back:hover, .around__pass:hover, .around__pass[aria-expanded="true"] { color: var(--red); background: none; }
.around__pass svg { width: 1.05em; height: 1.05em; }
.around__share { flex-basis: 100%; padding: .2rem 0 .3rem; }
.story__body .around__share .share__list { margin: 0; padding: 0; }
.story__body .around__share li { margin: 0; padding: 0; }
.story__body .around__share li::before, .story__body .around__share li::after { content: none; }
.story__body .around__share .share__btn { text-decoration: none; }
.around__share .share__status { margin: 0; height: 0; overflow: hidden; font-size: 1rem; font-style: italic; }
.around__share.is-saying .share__status { height: auto; margin-top: .7rem; }
/* the end mark after the last game's recap */
.story__body > .around:last-of-type .around__recap > p:last-child::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;
}
.around:target .around__title { background-size: 100% 2px; }
@media (max-width: 760px) {
  .story__body .apin { --head: 28px; min-width: 32px; padding-top: 3px; }
  .apin__head { border-width: 1.5px; box-shadow: 2px 2px 0 var(--shade); }
  .apin__tip { width: 5px; height: 5px; box-shadow: none; }
  .apin__tag, .apin__lost { display: none; }
  .around-map__card { box-shadow: 4px 4px 0 var(--shade); }
  .around-jump { display: flex; }
  .story__body .around { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: 2rem 0; }
  .story__body .around .score { max-width: 21rem; }
}
@media (prefers-reduced-motion: reduce) {
  .apin__head, .apin__tag, .story__body .around__title { transition: none; }
}
/* Bouncin' Around, 3.40: each recap's mini drop cap; the records on the score card; the pins laid out by js/around.js */
.story__body .around__recap > p:first-child::first-letter {
  float: left; font-weight: 700; font-size: 2.9em; line-height: .8; margin: .07em .07em 0 0; color: var(--bright);
}
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .story__body .around__recap > p:first-child::first-letter { float: none; margin: 0 .07em 0 0; font-size: 1em; line-height: 1; -webkit-initial-letter: 2; initial-letter: 2; }
}
.around-map__ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.around-map__ink line { stroke: var(--ink); stroke-width: 2; }
.around-map__ink circle { fill: var(--ink); }
.story__body .around-map__frame.is-laid .apin { transform: translate(-50%, -50%); padding-top: 0; min-height: 44px; justify-content: center; }
.around-map__frame.is-laid .apin__needle, .around-map__frame.is-laid .apin__tip { display: none; }
.around-map__frame.is-laid .apin__tag { top: 50%; }
.around-map__frame.is-laid .apin__tag--above { left: 50%; right: auto; top: auto; bottom: calc(50% + var(--head) / 2 + 8px); transform: translateX(-50%); }
@media (max-width: 760px) {
  .story__body .around-map__frame.is-laid .apin { min-height: 32px; }
}
/* Rondo (European football): the map of Europe, closed in on the weekend's pins */
.around-map--europe .around-map__us, .around-map--europe .around-map__ca { vector-effect: non-scaling-stroke; stroke-width: 1; }
.around-map--europe .around-map__frame { overflow: hidden; }
/* a country's Rondo map (PoP Companion 3.40): Spain's Canary Islands in a box at the bottom left */
.around-map__inset { fill: #f6ecd8; stroke: #b9ab92; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
/* a draw: both crests in the pin's head, side by side */
.apin__drew { display: flex; align-items: center; justify-content: center; gap: 4%; width: 84%; height: 100%; }
.apin__drew .score__crest, .apin__drew img { width: 48% !important; height: auto !important; max-height: 70%; margin: 0; object-fit: contain; border: 0 !important; }
/* The Rondo mark at the top of a story (pop_rondo_mark()): the pins' rondo, in step with Bouncin' Around */
.rondo-mark { display: block; }
.rondo-mark__pins { display: block; width: 6.5rem; height: auto; overflow: visible; }
.rondo-mark__pin { fill: var(--card); stroke: var(--ink); stroke-width: 8; stroke-linejoin: round; }
.rondo-mark__dot { fill: var(--ink); }
.rondo-mark__pass { stroke: var(--ink); stroke-width: 6; stroke-dasharray: 13 11; }
.rondo-mark__head { stroke: var(--ink); stroke-width: 6; }
.rondo-mark__x { stroke: var(--red); stroke-width: 9; }
.rondo-mark__skin { fill: var(--card); stroke: var(--ink); }
.rondo-mark__patch { fill: var(--ink); }
.rondo-mark__seam { stroke: var(--ink); fill: none; }
.story__rondo a:hover .rondo-mark__pass, .story__rondo a:hover .rondo-mark__head, .story__rondo a:hover .rondo-mark__pin { stroke: var(--red); }
.story__rondo a:hover .rondo-mark__dot { fill: var(--red); }