@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url(4c517c74d508106d.2239cea544.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url(8a3351e100dac324.698f996092.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url(4c517c74d508106d.2239cea544.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url(8a3351e100dac324.698f996092.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:900;font-display:swap;src:url(4c517c74d508106d.2239cea544.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:900;font-display:swap;src:url(8a3351e100dac324.698f996092.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(051c24fa0fceeeb6.e622255294.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(6c8d02157d0a125d.e9110763c6.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(53e0234360e95721.3a00a32f02.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(6e68d19a888f32c8.5ed4d31c98.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(53e0234360e95721.3a00a32f02.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(6e68d19a888f32c8.5ed4d31c98.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url(53e0234360e95721.3a00a32f02.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url(6e68d19a888f32c8.5ed4d31c98.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Same Puck — the sheet.
   The page is a rink surface. Two things are objects bolted onto it: the board
   across the top and the scoreboard. Everything else is painted into the ice —
   ruled, not boxed. The party colours are rink paint: they clear every
   colourblind gate on the ice surface (CVD ΔE 19.8, normal-vision 33.0,
   all-pairs). Amber is the goal lamp and appears only on black. */

:root {
  color-scheme: light;               /* a rink is lit; there is no night mode */
  --ice:        #eaf2f6;
  --ice-shade:  #dde9f0;
  --ice-line:   #c3d6e0;
  --boards:     #0d1418;
  --boards-2:   #18242b;
  --paint-red:  #c8102e;
  --paint-blue: #0a53a8;
  --lamp:       #ffb100;
  --ink:        #0a1317;
  --ink-2:      #3f5560;
  --ink-3:      #6b818c;
  --liberal:      var(--paint-red);
  --conservative: var(--paint-blue);
  --line: var(--ink);
  --grid: var(--ice-line);
  --band-alpha: .10;
  --surface-1: var(--ice);
  --edge: var(--ice-line);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  /* A 4px spacing scale. Before this there were twenty-three distinct values
     in the sheet — 7, 9, 11, 13, 15 among them — which is not a rhythm, it is
     a hundred decisions made one at a time. */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--ice); color: var(--ink);
  font: 400 17px/1.55 var(--body);
  font-variant-numeric: tabular-nums;
}
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 var(--s-5) }

h1, h2, h3, .num, .board-title {
  font-family: var(--display); font-weight: 900;
  letter-spacing: -.005em; line-height: .92; text-transform: uppercase;
}
h2 { font-size: clamp(34px, 6vw, 62px); margin: 0 0 var(--s-1) }
h3 { font-size: clamp(21px, 3vw, 28px); margin: 0 0 var(--s-3); font-weight: 800 }
p { margin: 0 0 var(--s-4); max-width: 66ch }
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--ink-2); font-weight: 400; margin-bottom: var(--s-5) }
.note { font-size: 15px; color: var(--ink-2); max-width: 70ch; margin-bottom: var(--s-4) }
/* A computed figure inside a sentence is set in the scoreboard face and in full
   ink, so a paragraph can be scanned for its numbers the way the boards can. It
   is the same move the concession and the bench already make; the prose was the
   only place the figures were hiding. */
.fig {
  font-family: var(--display); font-weight: 900;
  font-size: 1.16em; line-height: 1; letter-spacing: .01em;
  color: var(--ink);
}
.scoreboard .fig, .callout .fig, #lastcall .fig { color: var(--lamp) }
a { color: var(--paint-blue); text-underline-offset: 3px }

/* ---- the board across the top ---------------------------------------- */
.boards {
  background: var(--boards);
  border-bottom: 7px solid var(--paint-red);
  color: #fff;
}
.boards .wrap { padding-top: 26px; padding-bottom: 0 }
.boards h1 {
  font-size: clamp(56px, 14.5vw, 168px);
  margin: 0; color: #fff;
}
.boards h1 span { display: block }
.boards .sub {
  font-family: var(--body); font-size: clamp(15px, 1.9vw, 18px);
  color: #9fb4bf; max-width: 60ch; margin: 16px 0 24px; line-height: 1.5;
}
.boards .sub b { color: #fff; font-weight: 600 }
.boards .lang {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--lamp); text-decoration: none; border-bottom: 2px solid var(--lamp);
}
.boards figure.bleed { margin: 0; width: 100% }
.boards figure.bleed img {
  /* the whole band, never a crop: it is eleven governments, and cropping it to
     fit a phone cuts the first and last ones off. It also lines the figures up
     under the rail above, which is the same eleven spans. */
  display: block; width: 100%; height: auto;
}
.boards .langline { margin: 0 0 22px }

/* ---- the scoreboard --------------------------------------------------- */
.scoreboard { background: var(--boards); color: #fff; padding: 34px 0 38px }
.scoreboard .wrap { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start }
.verdict h2 { color: #fff; font-size: clamp(40px, 7vw, 76px) }
.verdict p { color: #9fb4bf; font-size: 15.5px; max-width: 46ch; margin-top: 14px }
.panel { background: var(--boards-2); border: 2px solid #2b3c45; padding: 4px 16px 14px }
.panel .cap {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  text-transform: uppercase; color: #7f98a4; padding: 12px 0 10px;
  border-bottom: 1px solid #2b3c45;
}
.score-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 15px 0; border-bottom: 1px solid #2b3c45 }
.score-row:last-of-type { border-bottom: 0 }
.score-row .who { font-family: var(--display); font-weight: 800; font-size: clamp(19px, 2.6vw, 26px); text-transform: uppercase; color: #fff }
.score-row .who small { display: block; font-family: var(--body); font-weight: 400; font-size: 12.5px; text-transform: none; color: #7f98a4; letter-spacing: 0; margin-top: 3px }
.num { font-size: clamp(46px, 9vw, 74px); color: var(--lamp); line-height: .82 }
.panel .unit { font-size: 12.5px; color: #7f98a4; padding-top: 12px; line-height: 1.4 }

/* ---- sections painted on the ice -------------------------------------- */
section { padding: var(--s-12) 0 }
section + section { border-top: 2px solid var(--ice-line) }
.sec-head { margin-bottom: 18px }

/* ---- controls --------------------------------------------------------- */
.controls {
  display: grid; gap: 8px; margin: 0 0 18px; align-items: center;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}
.controls label {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  text-transform: uppercase; color: var(--ink-2);
}
.controls select, .controls button {
  font: 600 16px/1 var(--body); color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 0;
  padding: 12px; min-height: 46px; cursor: pointer;
}
.controls select { min-width: 0; width: 100% }
.controls button { min-width: 50px; font-weight: 700 }
.controls button:hover { background: var(--ink); color: var(--ice) }
:where(select, button, a, [tabindex]):focus-visible { outline: 3px solid var(--paint-blue); outline-offset: 2px }

/* ---- the bench, painted into the ice ---------------------------------- */
.bench {
  /* the chart's own hairlines have to win against the scuffs underneath */
  background: rgb(234 242 246 / .82);
}
.bench svg { display: block; width: 100%; height: auto; touch-action: pan-y }
.benchwrap { position: relative }
.band { cursor: pointer }
.band rect.fill { fill: var(--conservative); fill-opacity: var(--band-alpha) }
.band[data-party="liberal"] rect.fill { fill: var(--liberal) }
.band rect.rule { fill: var(--conservative) }
.band[data-party="liberal"] rect.rule { fill: var(--liberal) }
.band[data-party="pc"] rect.fill { fill: url(#hatch) }
/* both jerseys at once */
.band[data-paint="split"] rect.fill { fill: url(#split) }
.band[data-paint="split"] rect.rule { fill: url(#splitrule) }
.band.sel rect.fill { fill-opacity: calc(var(--band-alpha) * 2.8) }
.band text { fill: var(--ink-2); font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: .01em; pointer-events: none }
.band.sel text { fill: var(--ink) }
.sep { stroke: var(--ice-line); stroke-width: 1 }
.sep.party { stroke: var(--paint-red); stroke-width: 1.75 }  /* a change of party */
.grid { stroke: var(--ice-line); stroke-width: 1 }
.selbox { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 3 }
.caret { fill: var(--ink) }
.panel-title { fill: var(--ink); font-family: var(--display); font-size: 19px; font-weight: 800; text-transform: uppercase }
.panel-unit { fill: var(--ink-3); font-family: var(--body); font-size: 12px }
.ytick, .xtick { fill: var(--ink-3); font-family: var(--body); font-size: 11.5px }
.series { fill: none; stroke: var(--line); stroke-width: 2.75; stroke-linejoin: round; stroke-linecap: round }
.endcap { fill: var(--line) }
.cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3 }
.dot { fill: var(--ice); stroke: var(--line); stroke-width: 2.5 }

/* ---- readout: ruled columns, not cards -------------------------------- */
.readout { margin-top: 20px; display: grid; gap: 0 26px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) }
.card { border-top: 3px solid var(--ink); padding: var(--s-3) 0 var(--s-4); min-width: 0 }
.card.liberal { border-top-color: var(--paint-red) } .card.pc, .card.conservative { border-top-color: var(--paint-blue) }
.card[data-paint="split"] {
  border-top-color: transparent;
  border-image: repeating-linear-gradient(45deg, var(--paint-red) 0 4px, var(--paint-blue) 4px 8px) 3;
}
.card h3 { margin: 0 0 2px; font-size: 20px; font-weight: 800 }
.card .sub { font-size: 12.5px; color: var(--ink-3); margin-bottom: var(--s-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.card dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); font-size: 14.5px }
.card dt { color: var(--ink-2); min-width: 0; overflow-wrap: anywhere }
.card dd { margin: 0; font-weight: 700; white-space: nowrap }
.flag {
  display: inline-block; font-size: 12px; font-weight: 700; margin-top: 10px;
  color: var(--paint-red); border-left: 3px solid var(--paint-red); padding-left: 8px;
}

/* ---- tooltip ---------------------------------------------------------- */
.tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--boards); color: #fff; border: 0; border-left: 4px solid var(--lamp);
  padding: 9px 12px; font-size: 14px; line-height: 1.4; opacity: 0;
  transition: opacity .1s; max-width: 240px;
}
.tip.on { opacity: 1 }
.tip b {
  display: block; font-family: var(--display); font-weight: 800; font-size: 20px;
  color: var(--lamp); line-height: 1;
}
.tip strong { font-weight: 700 }

/* ---- lens tabs: bolted to the boards ---------------------------------- */
#lensbar { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 22px; border: 2px solid var(--ink) }
button.lens {
  flex: 1 1 190px; min-width: 0; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: #fff;
  border: 0; border-right: 2px solid var(--ink);
  padding: 13px 14px; min-height: 46px;
}
button.lens:last-child { border-right: 0 }
button.lens:hover { background: var(--ice-shade) }
button.lens.on { background: var(--boards); color: #fff }
button.lens .fr {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 20px; text-transform: uppercase; line-height: 1;
}
button.lens .en { display: block; font-size: 13px; color: var(--ink-3); margin-top: 5px; line-height: 1.3 }
button.lens.on .en { color: #9fb4bf }
#lensout .gloss { font-size: 15px; color: var(--ink-2); margin: 0 0 4px }
#lensout .note { margin-top: 14px }

/* ---- tables: ruled on ice --------------------------------------------- */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch }
table { border-collapse: collapse; font-size: 15px; min-width: 100%; width: 100% }
th, td { padding: 9px 12px; text-align: right; white-space: nowrap }
th:first-child, td:first-child { text-align: left }
thead th {
  font-family: var(--display); font-weight: 800; font-size: 15px;
  text-transform: uppercase; color: var(--ink-2);
  border-bottom: 2px solid var(--ink);
}
tbody td, tbody th { border-bottom: 1px solid var(--ice-line) }
tbody tr:nth-child(even) td, tbody tr:nth-child(even) th { background: var(--ice-shade) }
table.lenstable th[scope="row"] { font-family: var(--display); font-size: 19px; font-weight: 800; text-transform: uppercase }
table.lenstable tbody tr.here td, table.lenstable tbody tr.here th { background: var(--lamp); color: var(--ink) }
.pip { display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--paint-blue) }
.pip.liberal { background: var(--paint-red) }
.pip.pc { background: repeating-linear-gradient(45deg, var(--paint-blue) 0 2px, #fff 2px 4px) }
.pip.split { background: repeating-linear-gradient(45deg, var(--paint-red) 0 3px, var(--paint-blue) 3px 6px) }
details.tableview { margin-top: 22px; border-top: 2px solid var(--ice-line) }
details.tableview summary {
  cursor: pointer; padding: 14px 0; min-height: 46px; display: flex; align-items: center;
  font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase;
}
caption { caption-side: top }

/* ---- artwork ---------------------------------------------------------- */
figure.art { margin: 0 0 22px }
figure.art img { display: block; width: 100%; height: auto; border: 2px solid var(--ink) }
/* seven comic panels squeezed to a phone are unreadable; let them be swiped
   at a legible size instead of shrunk to fit */
@media (max-width: 760px) {
  figure.art.idioms .scroller { overflow-x: auto; -webkit-overflow-scrolling: touch }
  figure.art.idioms img { width: auto; height: 300px; max-width: none }
}

/* ---- sources ---------------------------------------------------------- */
.sources { font-size: 15px; color: var(--ink-2); padding-left: 0; list-style: none }
.sources li { margin-bottom: 14px; border-left: 3px solid var(--ice-line); padding-left: 14px }
.sources strong { color: var(--ink) }

@media (max-width: 560px) {
  .controls { grid-template-columns: auto minmax(0, 1fr) auto }
  .controls label { grid-column: 1 / -1; margin-bottom: 2px }
}
@media (max-width: 760px) {
  .scoreboard .wrap { grid-template-columns: 1fr; gap: 20px }
  .readout { grid-template-columns: 1fr; gap: 0 }
  .card { border-top-width: 3px }
  #lensbar { display: block }
  button.lens { width: 100%; border-right: 0; border-bottom: 2px solid var(--ink) }
  button.lens:last-child { border-bottom: 0 }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

/* ---- the rail: eleven spans at true width, one puck crossing them ------ */
.rail {
  position: relative; width: 100%; height: clamp(15px, 3.4vw, 18px);
  margin: 0; background: var(--boards-2);
}
/* the spans are clipped; the rail is not, so the puck can sit on top of it */
.rail .segs { display: flex; width: 100%; height: 100%; overflow: hidden }
.rail .seg { display: block; height: 100% }
.rail .seg[data-paint="liberal"] { background: var(--paint-red) }
.rail .seg[data-paint="conservative"], .rail .seg[data-paint="pc"] { background: var(--paint-blue) }
.rail .seg[data-paint="pc"] {
  background: repeating-linear-gradient(45deg, var(--paint-blue) 0 4px, #1d3f6b 4px 8px);
}
.rail .seg[data-paint="split"] {
  background: repeating-linear-gradient(45deg, var(--paint-red) 0 4px, var(--paint-blue) 4px 8px);
}
/* The puck. It was drawn in CSS and read as a dash on a rule — on a page
   called Same Puck, nobody could find the puck. It is the real one now, the
   same object the pro shop sells, riding along the top of the rail. */
.rail .puck {
  position: absolute; left: 0; bottom: 2px; width: clamp(34px, 5.2vw, 52px);
  height: auto; z-index: 3; filter: drop-shadow(0 4px 7px #0b0b0b66);
  animation: shift 17s linear infinite;
}
@keyframes shift {
  0%   { left: 0;    transform: translateX(0) }
  100% { left: 100%; transform: translateX(-100%) }
}
/* The drop: pressing the button drops it in, off the top, with a bounce and a
   settle. It runs once, then the travel resumes. */
.rail .puck.dropping { animation: puckdrop 1.15s cubic-bezier(.4,0,.7,1) 1 }
@keyframes puckdrop {
  0%   { transform: translateY(-260px) rotate(-14deg); opacity: 0 }
  8%   { opacity: 1 }
  46%  { transform: translateY(0) rotate(0deg) }
  58%  { transform: translateY(-26px) rotate(3deg) }
  72%  { transform: translateY(0) rotate(0deg) }
  82%  { transform: translateY(-8px) }
  92%  { transform: translateY(0) }
  100% { transform: translateY(0) }
}
@media (prefers-reduced-motion: reduce) {
  .rail .puck { animation: none; left: 100%; transform: translateX(-100%) }
  .rail .puck.dropping { animation: none }
}

/* ---- the player ------------------------------------------------------- */
.player { border-top: 3px solid var(--ink); padding-top: 16px }
.player[hidden] { display: none }
.pl-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.pl-play {
  width: 58px; height: 58px; flex: none; cursor: pointer;
  background: var(--boards); color: var(--lamp); border: 0; font-size: 20px; line-height: 1;
}
.pl-play:hover { background: var(--paint-red); color: #fff }
.pl-now { flex: 1 1 200px; min-width: 0 }
.pl-ch { display: block; font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1 }
.pl-time { font-size: 13.5px; color: var(--ink-3) }
.pl-follow { font-size: 14px; display: flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer }
.pl-follow input { width: 20px; height: 20px; accent-color: var(--paint-red) }
.pl-seek { width: 100%; margin: 14px 0 4px; accent-color: var(--paint-red) }
.pl-chapters { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--ice-line) }
.pl-chapters button {
  display: flex; gap: 12px; align-items: baseline; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--ice-line);
  padding: 11px 4px; min-height: 46px; cursor: pointer; font: inherit; color: var(--ink);
}
.pl-chapters button:hover { background: var(--ice-shade) }
.pl-chapters button.on { background: var(--lamp) }
.pl-n { font-family: var(--display); font-weight: 800; color: var(--ink-3) }
.pl-chapters button.on .pl-n { color: var(--ink) }
.pl-t { flex: 1; font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase }
.pl-d { font-size: 13px; color: var(--ink-3) }
.pl-chapters button.on .pl-d { color: var(--ink) }
.pl-transcript {
  max-height: 330px; overflow-y: auto; margin-top: 16px; padding: 4px 12px;
  background: var(--surface-1); border: 1px solid var(--ice-line); scroll-behavior: smooth;
}
.pl-transcript .cue { margin: 0 0 12px; font-size: 15.5px; color: var(--ink-2); cursor: pointer; max-width: none }
.pl-transcript .cue b {
  display: block; font-family: var(--display); font-weight: 800; font-size: 13px;
  text-transform: uppercase; color: var(--ink-3); letter-spacing: .03em;
}
.pl-transcript .cue.on { color: var(--ink); box-shadow: inset 4px 0 0 var(--paint-red); padding-left: 10px }
.pl-credit { margin-top: 12px }
@media (prefers-reduced-motion: reduce) { .pl-transcript { scroll-behavior: auto } }

/* ---- circulate -------------------------------------------------------- */
.tile-picks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) }
/* the card is the thing being chosen, so show it big enough to read. A 72px
   thumbnail of a 1080px card is a dark smudge and you end up picking by
   caption alone. */
.tile-pick {
  display: block; text-align: left; min-width: 0;
  background: #fff; border: 2px solid var(--ink); padding: 0; cursor: pointer;
  font: inherit; color: var(--ink);
}
.tile-pick:hover { background: var(--ice-shade) }
.tile-pick img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-bottom: 2px solid var(--ink) }
.tl-txt { min-width: 0; display: block; padding: 9px 11px 11px }
.tl-n { display: block; font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em }
.tl-c { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1.05 }
.sh-dialog {
  border: 0; padding: 0; max-width: 460px; width: calc(100% - 28px);
  background: var(--ice); color: var(--ink);
}
.sh-dialog::backdrop { background: rgb(6 12 15 / .72) }
.sh-close {
  all: unset; position: absolute; top: 8px; right: 10px; cursor: pointer;
  font-size: 22px; line-height: 1; padding: 8px; color: #fff; z-index: 2;
}
.sh-body { padding: 16px }
.sh-img { display: block; width: 100%; height: auto; border: 2px solid var(--ink) }
.sh-post { font-size: 15.5px; margin: 14px 0 }
.sh-acts { display: grid; gap: 7px }
.sh-btn {
  display: block; text-align: center; text-decoration: none; cursor: pointer;
  font: 600 15px/1 var(--body); color: var(--ink); background: #fff;
  border: 2px solid var(--ink); padding: 13px; min-height: 46px;
}
.sh-btn:hover { background: var(--ice-shade) }
.sh-pri { background: var(--boards); color: #fff; border-color: var(--boards) }
.sh-pri:hover { background: var(--paint-red); border-color: var(--paint-red); color: #fff }

/* ---- a card's own page ------------------------------------------------ */
.cardpage .wrap { padding-top: 34px; padding-bottom: 56px; max-width: 640px }
.cardpage h1 { font-size: clamp(32px, 7vw, 54px); margin: 6px 0 18px }
.cardpage .kicker a { color: var(--ink-3); text-decoration: none; font-family: var(--display); font-weight: 800; text-transform: uppercase }
.cardimg { display: block; width: 100%; height: auto; border: 2px solid var(--ink); margin-bottom: 18px }
.othersh { font-size: 22px; margin-top: 34px }
.others { list-style: none; padding: 0 }
.others li { border-bottom: 1px solid var(--ice-line) }
.others a { display: block; padding: 11px 0; color: var(--ink); text-decoration: none }
.others a:hover { color: var(--paint-red) }

/* ---- the call to listen, in the boards --------------------------------- */
.boards .heroplay { margin: 22px 0 16px }
.cta {
  display: inline-flex; align-items: center; gap: 14px; cursor: pointer;
  background: var(--lamp); color: var(--boards); border: 0;
  padding: 14px 22px 14px 18px; min-height: 60px; font: inherit;
  text-align: left; max-width: 100%;
}
.cta:hover { background: #ffc63d }
.cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px }
.cta-ico { font-size: 19px; line-height: 1 }
.cta-txt { min-width: 0 }
.cta-txt b {
  display: block; font-family: var(--display); font-weight: 900;
  font-size: clamp(26px, 5.4vw, 36px); text-transform: uppercase; line-height: .96;
}
.cta-txt small { display: block; font-size: 13px; opacity: .74; margin-top: 3px }

/* ---- the sticky bar ---------------------------------------------------- */
.minibar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  background: var(--boards); color: #fff; padding: 9px 12px;
  border-top: 3px solid var(--lamp);
}
.minibar[hidden] { display: none }
.mb-play {
  width: 46px; height: 46px; flex: none; cursor: pointer;
  background: var(--lamp); color: var(--boards); border: 0; font-size: 16px; line-height: 1;
}
.mb-now {
  flex: 1; min-width: 0; color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mb-x { all: unset; cursor: pointer; padding: 12px; color: #7f98a4; font-size: 16px; line-height: 1 }
.mb-x:hover { color: #fff }
body { padding-bottom: env(safe-area-inset-bottom) }

/* ---- the crossing ----------------------------------------------------- */
.cross { margin-bottom: 18px }
.cross svg { display: block; width: 100%; height: auto }
.xline { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: none }
.xline-a { stroke: var(--paint-red) }
.xline-b { stroke: var(--ink) }
.xmark { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 3 }
.xlabel { fill: var(--ink); font-family: var(--display); font-weight: 800; font-size: 17px }
.xkey { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 18px; font-size: 14px; margin: 8px 0 0; color: var(--ink-2) }
.k { width: 22px; height: 4px; display: inline-block; margin-right: -10px }
.k-a { background: var(--paint-red) } .k-b { background: var(--ink) }
.bridge-cta { margin-top: 18px; max-width: 66ch }
.bridge-go { display: inline-block; width: auto; margin: 14px 0 0; text-decoration: none }
.volumes { list-style: none; padding: 0; margin: 22px 0 0; border-top: 2px solid var(--ink) }
.volumes li { border-bottom: 1px solid var(--ice-line) }
.volumes a { display: block; padding: 13px 0; color: var(--ink); text-decoration: none }
.volumes a:hover b { color: var(--paint-red) }
.volumes b { display: block; font-family: var(--display); font-weight: 800; font-size: 21px; text-transform: uppercase; line-height: 1.05 }
.volumes span { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px }

/* ---- the calls -------------------------------------------------------- */
.callout {
  background: var(--boards); color: #fff; padding: 18px 20px;
  border-left: 7px solid var(--lamp); font-size: clamp(17px, 2.2vw, 20px);
  max-width: 62ch; margin: 18px 0 0;
}
.seats-h { margin: 30px 0 8px; font-size: clamp(20px, 3vw, 26px) }
.seats { list-style: none; padding: 0; margin: 16px 0 0; border-top: 2px solid var(--ink) }
.seats li {
  display: grid; gap: 2px 18px; padding: 14px 0; border-bottom: 1px solid var(--ice-line);
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
}
.s-when { font-family: var(--display); font-weight: 800; font-size: 21px; text-transform: uppercase; line-height: 1.05 }
.s-who { font-size: 13px; color: var(--ink-3); grid-column: 1 }
.s-what { grid-column: 2; grid-row: 1 / span 2; font-size: 15.5px; color: var(--ink-2) }
@media (max-width: 560px) {
  .seats li { grid-template-columns: 1fr }
  .s-what { grid-column: 1; grid-row: auto; margin-top: 6px }
}

/* ---- the resurfacing --------------------------------------------------- */
.zamboni { width: 100%; line-height: 0; background: #e6eef3 }
.zamboni canvas { display: block; width: 100%; height: 96px }

/* ---- lens tables, after Frank's layout -------------------------------- */
/* five columns of numbers and a portrait will not fit a phone. Give the table
   a floor and let its scroller take over, rather than crushing the cells into
   each other. */
table.lenstable { table-layout: fixed; min-width: 640px }
table.lenstable th[scope="col"]:first-child { width: 30% }
table.lenstable th[scope="row"] {
  padding: 0 10px 0 0; text-transform: none; font-family: var(--body); font-weight: 400;
}
table.lenstable th[scope="row"] .row-in { display: flex; align-items: center; gap: 0; min-height: 62px }
table.lenstable .face {
  width: auto; height: 62px; flex: none; display: block; margin-right: 10px;
  image-rendering: -webkit-optimize-contrast;
}
table.lenstable .face.pack { filter: drop-shadow(0 3px 5px #0f111333) }
/* Two governments have no pack. The slot is left open rather than filled
   with a stand-in: an empty slot on a checklist is a thing collectors read
   without being told, and it is the same fact the pro shop states in words. */
table.lenstable .face.slot {
  width: 39px; border: 1.5px dashed var(--ice-line); background: transparent;
  border-radius: 2px;
}
table.lenstable .face.slot.liberal { border-color: #e3494866 }
table.lenstable .face.slot.pc, table.lenstable .face.slot.conservative { border-color: #2a78d666 }
.slot-note { font-style: italic; margin-bottom: 4px }
table.lenstable .who { min-width: 0; overflow: hidden }
table.lenstable .who b {
  display: block; font-family: var(--display); font-weight: 900; font-size: 20px;
  text-transform: uppercase; line-height: .92; letter-spacing: -.01em;
  white-space: normal; overflow-wrap: anywhere;
}
table.lenstable .who small { display: block; font-size: 13px; color: var(--ink-3); font-weight: 600; margin-top: 3px }
table.lenstable td { font-weight: 700; font-size: 16px }
table.lenstable td.pos { color: #0a7a41 }
table.lenstable td.neg { color: var(--paint-red) }
table.lenstable tbody tr.here th[scope="row"], table.lenstable tbody tr.here td { background: var(--lamp) }
td.sharecell { padding-right: 10px }
td.sharecell .bar { display: flex; align-items: center; gap: 9px; justify-content: flex-end }
td.sharecell .meter { flex: 1; min-width: 46px; height: 14px; background: var(--ice-line); display: block }
td.sharecell .meter i { display: block; height: 100%; background: var(--paint-red) }
td.sharecell .meter i.good { background: #0a7a41 }
td.sharecell b { width: 58px; text-align: right; font-weight: 800 }
tbody tr td, tbody tr th { vertical-align: middle }
@media (max-width: 700px) {
  table.lenstable { min-width: 620px }
  table.lenstable .face { height: 46px; margin-right: 6px }
  table.lenstable .face.slot { width: 29px }
  table.lenstable .who b { font-size: 14px }
  table.lenstable th[scope="row"] .row-in { min-height: 48px }
  table.lenstable .who small { font-size: 10.5px }
  table.lenstable td { font-size: 13px }
  th, td { padding: 6px 7px }
  td.sharecell { gap: 5px }
  td.sharecell .meter { height: 9px; min-width: 24px }
  td.sharecell b { width: 42px; font-size: 12px }
}

/* ---- the mark ---------------------------------------------------------- */
.boards .wrap { position: relative }
.boards .mark {
  position: absolute; top: 4px; right: 20px; width: clamp(88px, 15vw, 168px);
  height: auto; z-index: 2;
}
.boards h1 { padding-right: clamp(96px, 17vw, 196px) }
@media (max-width: 560px) {
  .boards .mark { width: 76px; right: 16px; top: 2px }
  .boards h1 { padding-right: 84px }
}

/* ---- the concession board --------------------------------------------- */
.board { border: 3px solid var(--ink); background: var(--boards); color: #fff }
.board-head, .board-row {
  display: grid; grid-template-columns: minmax(0,1fr) 68px 68px minmax(120px,1.1fr);
  gap: 10px; align-items: center; padding: 10px 14px;
}
.board-head {
  font-family: var(--display); font-weight: 800; font-size: 14px; text-transform: uppercase;
  color: #7f98a4; border-bottom: 2px solid #2b3c45;
}
.board-head span:not(:first-child) { text-align: right }
.board-row { border-bottom: 1px solid #1d2c34; font-size: 15px }
.board-row:last-child { border-bottom: 0 }
.b-item { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; line-height: 1 }
.b-n { text-align: right; color: #9fb4bf; font-variant-numeric: tabular-nums }
.b-mult { display: flex; align-items: center; gap: 9px; justify-content: flex-end }
/* the track is the constant; the fill inside it carries the number. Putting
   flex on the fill makes every bar the same length and throws the argument away. */
.b-mult .track { flex: 1; min-width: 40px; height: 12px; background: #1d2c34; display: block }
.b-mult i { height: 100%; background: var(--paint-red); display: block }
.b-mult b { width: 62px; text-align: right; font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--lamp) }
.board-row.base { background: #16242c }
.board-row.base .b-mult .track { background: #223640 }
.board-row.base .b-mult i { background: #7d9dae }
.board-row.punch { background: var(--lamp); color: var(--ink) }
.board-row.punch .b-n { color: #6b4e00 }
.board-row.punch .b-mult .track { background: rgb(10 19 23 / .22) }
.board-row.punch .b-mult i { background: var(--ink) }
.board-row.punch .b-mult b { color: var(--ink) }
.conc-punch {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(24px, 4.6vw, 40px); line-height: 1; margin: 18px 0 14px; max-width: 20ch;
}
@media (max-width: 620px) {
  /* the 1968 index means nothing on its own; the multiple is the story */
  .board-head, .board-row { grid-template-columns: minmax(0,1fr) minmax(104px,.85fr); gap: 8px; padding: 10px }
  .b-then, .b-now { display: none }
  .b-item { font-size: 15px }
  .b-mult b { width: 48px; font-size: 18px }
  .board-head { font-size: 11px }
}

/* ---- away games: three counterparts on one axis ------------------------- */
/* Red and blue are spoken for — they are the parties. These three are the away
   teams, and the set is validated for colour-vision deficiency at every pair
   rather than picked by eye. */
.align { position: relative; margin: 0 0 18px }
.align svg { display: block; width: 100%; height: auto; touch-action: pan-y }
/* the party rules mark the question, they are not the answer: thinner and
   set back from the bench's own weight so three data lines stay primary */
.align .sep.party { stroke-width: 1.25; opacity: .5 }
.atick { fill: var(--paint-red); font-family: var(--display); font-weight: 800; font-size: 11.5px }
.aline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round }
.a-us { stroke: #b0560a } .a-ru { stroke: #00918a } .a-ir { stroke: #7226b0 }
.align .dot { stroke-width: 2.5 }
.align .dot.a-us { fill: #b0560a } .align .dot.a-ru { fill: #00918a } .align .dot.a-ir { fill: #7226b0 }
.alabel {
  font-family: var(--display); font-weight: 800; font-size: 13px;
  paint-order: stroke; stroke: var(--ice); stroke-width: 4px;
}
.alabel.a-us { fill: #b0560a } .alabel.a-ru { fill: #00918a } .alabel.a-ir { fill: #7226b0 }
.akey { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; font-size: 14px; color: var(--ink-2) }
.akey .ki { display: inline-flex; align-items: center }
.akey .k { width: 16px; height: 4px; flex: none; margin-right: 7px }
.akey .k.a-us { background: #b0560a } .akey .k.a-ru { background: #00918a } .akey .k.a-ir { background: #7226b0 }
.atip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .09s;
  background: var(--ink); color: var(--ice); padding: 8px 10px; font-size: 13px;
  line-height: 1.35; max-width: 260px; z-index: 3;
}
.atip.on { opacity: 1 }
.align-caveat { font-style: italic }
@media (max-width: 560px) { .akey { font-size: 12.5px; gap: 3px 12px } }

/* ---- the concession stand ---------------------------------------------- */
/* The artwork carries the marquee, the counter, the food and the frame. Only
   the board data is live, overlaid in the panel the art leaves for it, so the
   figures stay sourced instead of being baked into a picture. */
.stand { position: relative; max-width: 1024px; margin: 0 auto; aspect-ratio: 1024 / 1536 }
.stand-bg { display: block; width: 100%; height: auto }
.liveboard {
  position: absolute; left: 6.1%; right: 6.2%; top: 23%; height: 55.5%;
  /* fully opaque: at 98.5% the board painted into the artwork ghosts through
     behind the live rows and every label reads twice */
  background: linear-gradient(180deg, #080f12, #070d10);
  border: 3px solid #554a3d; box-shadow: inset 0 0 35px #000, 0 4px 8px #0008;
  padding: 0 13px; display: flex; flex-direction: column;
}
.liveboard .boardhead, .liveboard .row {
  display: grid; grid-template-columns: minmax(0, 1.58fr) 1fr 92px; align-items: center;
}
.liveboard .boardhead {
  flex: 0 0 7.5%; min-height: 40px; border-bottom: 2px solid #48545a; color: #929ca0;
  text-transform: uppercase; font-family: var(--display); font-size: 17px; font-weight: 800;
}
.liveboard .boardhead div:last-child { text-align: right }
.liveboard .rows { flex: 1; display: grid; grid-template-rows: repeat(11, 1fr) }
.liveboard .row { min-height: 0; border-bottom: 1px solid #2d393e }
.liveboard .item {
  display: flex; align-items: center; gap: 11px; text-transform: uppercase;
  font-family: var(--display); font-size: 22px; font-weight: 800; line-height: .88;
  padding-right: 8px; color: #f4ead6;
}
.liveboard .icon { width: 46px; flex: 0 0 46px; text-align: center; font-size: 30px; filter: drop-shadow(1px 2px 1px #000) }
.liveboard .track { height: 20px; background: #22323b; box-shadow: inset 0 1px 3px #0008 }
.liveboard .fill { height: 100%; background: #ec1735 }
.liveboard .value {
  text-align: right; color: #ffb616; font-family: var(--display);
  font-size: 31px; font-weight: 900;
}
.liveboard .total .fill { background: #91aebe }
.liveboard .sweater { background: #ffb515; color: #101416; margin: 0 -9px; padding: 0 9px; border-bottom: 0 }
.liveboard .sweater .item { color: #101416 }
.liveboard .sweater .icon { filter: none }
.liveboard .sweater .track { background: #d4960b }
.liveboard .sweater .fill { background: #11191d }
.liveboard .sweater .value { color: #111 }
@media (max-width: 760px) {
  .liveboard { padding: 0 5px; border-width: 2px }
  .liveboard .boardhead, .liveboard .row { grid-template-columns: minmax(0, 1.55fr) .9fr 50px }
  .liveboard .boardhead { min-height: 0; font-size: 10px }
  .liveboard .item { gap: 4px; font-size: 12px; padding-right: 2px }
  .liveboard .icon { width: 22px; flex-basis: 22px; font-size: 16px }
  .liveboard .track { height: 10px }
  .liveboard .value { font-size: 17px }
}

/* The French stand is its own picture, and its board sits smaller and further
   in than the English one: narrower panel, eleven rows in 41% of the height
   rather than 55%. Type is sized in cqw so the rows track the picture at every
   width instead of jumping at a breakpoint, and the icon column is dropped —
   the artwork it covers does not have one, and the French labels need the room. */
.stand-fr { container-type: inline-size }
.stand-fr .liveboard {
  /* the painted board's own header sits a shade above its first rule, so the
     panel starts at 22.35% rather than at the rule: at 23.2% the words FOIS
     PLUS peek out over the top edge and the column heading reads twice */
  left: 14%; right: 11.4%; top: 22.35%; height: 42.25%;
  padding: 0 1cqw; border-width: 2px;
}
.stand-fr .liveboard .boardhead, .stand-fr .liveboard .row {
  grid-template-columns: minmax(0, 46.2fr) 40.2fr 13.5fr;
}
.stand-fr .liveboard .boardhead { flex: 0 0 7.55%; min-height: 0; font-size: 1.35cqw }
.stand-fr .liveboard .item { gap: 0; font-size: 1.62cqw; padding-right: .6cqw }
.stand-fr .liveboard .icon { display: none }
.stand-fr .liveboard .track { height: 1.45cqw }
.stand-fr .liveboard .value { font-size: 2.5cqw; padding-left: .4cqw }
.stand-fr .liveboard .sweater { margin: 0 -1cqw; padding: 0 1cqw }

/* ---- the second rack: prime ministers ---------------------------------- */
/* ---- the sound control -------------------------------------------------- */
/* One control, and it sits with the player. It used to float in the corner,
   where it competed with the button that actually starts everything: a reader
   arriving met a hidden trigger, a call to action, a corner toggle and a
   checkbox, for one decision. */
.pl-sound {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--ink-2); border: 2px solid var(--ink-3);
  padding: 4px 9px; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
}
.pl-sound .at-ico {
  width: 12px; height: 12px; flex: none; background: var(--paint-red);
  clip-path: polygon(0 34%, 32% 34%, 62% 6%, 62% 94%, 32% 66%, 0 66%);
}
.pl-sound.off { border-color: var(--ice-line); color: var(--ink-3) }
.pl-sound.off .at-ico { background: var(--ink-3) }
.pl-sound:hover { border-color: var(--ink) ; color: var(--ink) }
.pl-sound:focus-visible { outline: 3px solid var(--paint-blue); outline-offset: 2px }

/* ---- last call --------------------------------------------------------- */
/* The last thing read before the receipts. One question, no answer, because
   the record does not have one — and the page has spent its whole length
   refusing to supply what it cannot source. The other edition's phrasing sits
   under it: the joke is sharper in French, where a beer league is a garage
   league, and the page already glosses its hockey idiom this way. */
#lastcall {
  background: var(--boards); color: var(--ice);
  margin: 0 calc(50% - 50vw); padding: 64px 20px 58px; width: 100vw;
  border-top: 7px solid var(--paint-red); text-align: center;
}
#lastcall > * { max-width: 1020px; margin-inline: auto }
.lc-k {
  font-family: var(--display); font-weight: 800; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lamp); margin: 0 0 14px;
}
.lc-q {
  font-family: var(--display); font-weight: 900; line-height: .95;
  font-size: clamp(34px, 7.2vw, 78px); text-transform: uppercase; margin: 0;
}
.lc-alt {
  font-family: var(--display); font-weight: 800; line-height: 1.05;
  font-size: clamp(18px, 3.2vw, 30px); text-transform: uppercase;
  color: #8ea6b3; margin: 14px 0 0;
}
/* Where Frank has supplied the poster, the poster is the section: it carries
   the kicker, the question, the French gloss, the diagram and the closing line,
   so printing any of them again in HTML would say everything twice. */
.lc-art { margin: 0 calc(50% - 50vw); width: 100vw; line-height: 0 }
.lc-art img { display: block; width: 100%; height: auto }
#lastcall:has(.lc-art) { padding: 0; border-top: 0 }

.venn { margin: 26px auto 4px; max-width: 660px }
.venn svg { display: block; width: 100%; height: auto; overflow: visible }
/* The circles are set far enough apart that the lens is narrow. The width of
   that overlap is the whole joke: one thing is in both, and it is the puck. */
.v-c { fill: none; stroke-width: 2 }
.v-l { stroke: var(--lamp); fill: #ffb1000f }
.v-r { stroke: var(--paint-red); fill: #c8102e14 }
.v-title {
  font-family: var(--display); font-weight: 900; font-size: 23px;
  text-transform: uppercase; letter-spacing: .01em;
}
.v-tl { fill: var(--lamp) } .v-tr { fill: #ff5d70 }
.v-item { font-family: var(--body); font-size: 15px; fill: #c2d3dc }
/* sized to sit inside the lens rather than spill into both circles: the
   overlap being narrow is the joke, and text crossing it undoes that */
.v-mid {
  font-family: var(--display); font-weight: 900; font-size: 18px;
  text-transform: uppercase; fill: var(--ice);
}
/* an actual puck, sitting in the lens — the same object the pro shop sells */
.v-puck { filter: drop-shadow(0 3px 5px #0b0b0b55) }
.v-puck-fb { fill: #05090b }
@media (max-width: 620px) {
  .venn { margin-top: 20px }
  .v-title { font-size: 19px }
  .v-item { font-size: 13.5px }
  .v-mid { font-size: 16px }
}

.lc-note { font-size: 15px; color: #7e939e; margin: 20px 0 0 }
@media (max-width: 760px) { #lastcall { padding: 44px 18px 40px } }

/* ---- arriving --------------------------------------------------------- */
/* The way in, above the title: you come up the stairs and the rink opens
   before anything is asked of you. Full-bleed because a tunnel with a margin
   around it is a photograph of a tunnel, not a way in. The picture carries its
   own signage in both languages, so it needs no caption and no edition split. */
.entry { margin: 0; width: 100%; line-height: 0; background: var(--boards) }
.entry img { display: block; width: 100%; height: auto }
/* the street outside, at the head of the concession */
.scalpers { margin: 0 auto 22px; max-width: 1024px; line-height: 0 }
.scalpers img { display: block; width: 100%; height: auto; border: 2px solid var(--ink) }
@media (max-width: 760px) { .scalpers { margin-bottom: 14px } .scalpers img { border-width: 1px } }

/* ---- the pro shop storefront ------------------------------------------- */
/* The artwork is the shop front and carries its own sign, so the section drops
   its heading rather than printing the name twice. The racks below it are the
   live goods; the case in the picture is scenery. */
.shopfront { margin: 0 auto 20px; max-width: 1024px }
.shopfront img {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--ink); box-shadow: 0 10px 28px #0b1c2a26;
}
.shop-lede { max-width: 62ch; margin: 0 0 4px }
/* The question a reader asks in the doorway is whether any of this is real,
   and the answer used to be four screens down in the fine print. It is the
   first thing in the room now, in the same face the findings are set in. */
.shop-rule {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(26px, 5vw, 46px); line-height: .98; letter-spacing: -.01em;
  margin: 10px 0 10px; max-width: 18ch;
}
.cards { margin-top: 26px; border-top: 2px solid var(--ink); padding-top: 18px }
.cards .tile-picks { margin-top: 14px }
@media (max-width: 760px) {
  .shopfront { margin-bottom: 14px }
  .shopfront img { border-width: 1px }
}

.pm-rack { margin-top: 30px; border-top: 2px solid var(--ink); padding-top: 20px }
.pm-rack[hidden] { display: none }
.rack-h { font-size: clamp(22px, 3.4vw, 30px); margin: 0 0 4px }
.pm-picks { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 14px }
.tile-pick.pm img { aspect-ratio: 750 / 1050; object-fit: contain; background: #111a20 }
.tile-pick.pm .tl-c { font-size: 16px }
.tile-pick.pm .tl-n { font-size: 11px }
@media (max-width: 480px) { .pm-picks { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) } }

/* ---- the packs board --------------------------------------------------- */
.packs { margin-top: 30px; border-top: 2px solid var(--ink); padding-top: 20px }
.packs-h { font-size: clamp(26px, 4.4vw, 40px); margin: 0 0 12px }
/* Ten packs on a peg rail, five to a shelf. The rail is the same 2px rule the
   rest of this board is built from, so the merchandise hangs off the page's
   own structure instead of sitting in a box of its own. Five is the largest
   number that leaves a pack wide enough to read the name on it at 1008px,
   and it is the same count on a phone, so the rack is two even shelves
   everywhere rather than a ragged row that reflows at every width. */
.rack {
  --rack-gap: clamp(7px, 1.5vw, 18px);
  display: flex; flex-wrap: wrap; gap: var(--rack-gap);
  align-items: flex-start; margin: 0 0 24px;
  padding-top: 18px; border-top: 2px solid var(--ink);
}
.rack img {
  width: calc((100% - 4 * var(--rack-gap)) / 5); height: auto; flex: 0 0 auto;
  transform-origin: top center;
  filter: drop-shadow(0 9px 15px #0f111330);
}
.rack img:nth-child(odd)  { transform: rotate(-2.2deg) }
.rack img:nth-child(even) { transform: rotate(1.9deg) translateY(7px) }
.rack-note { margin-top: -10px }

.packs-list { list-style: none; margin: 0 0 18px; padding: 0; max-width: 560px; border-top: 2px solid var(--ink) }
.packs-list li {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--ice-line);
}
.packs-list .p-n { font-family: var(--display); font-weight: 900; font-size: 24px; color: var(--ink-3) }
.packs-list .p-w { font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase }
.packs-list b { font-family: var(--display); font-weight: 900; font-size: 27px; color: var(--paint-red) }
.packs-claim {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(21px, 3.4vw, 32px); line-height: 1.02; margin: 0 0 12px; max-width: 24ch;
}
.packs-fine { font-style: italic; color: var(--ink-3) }

/* ---- the set list ------------------------------------------------------ */
/* A checklist printed on the back of a pack: tight rows, a hairline between
   them, the count in the display face at the end of each line. */
.setlist { margin-top: 30px; border-top: 2px solid var(--ink); padding-top: 20px }
.set-rows {
  list-style: none; margin: 14px 0 18px; padding: 0; max-width: 620px;
  border-top: 2px solid var(--ink);
}
.set-rows li {
  display: grid; grid-template-columns: minmax(84px, 24%) 1fr auto; gap: 8px 14px;
  align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ice-line);
}
.set-rows .s-t {
  font-family: var(--display); font-weight: 800; font-size: clamp(15px, 2vw, 19px);
  text-transform: uppercase; letter-spacing: .01em;
}
.set-rows .s-r { color: var(--ink-2) }
.set-rows .s-n {
  font-family: var(--display); font-weight: 900; font-size: clamp(19px, 2.6vw, 25px);
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
/* the combo row is the one the paragraph under the list is about, so its
   count is the only figure in the table wearing the paint */
.set-rows li:nth-child(4) .s-n { color: var(--paint-red) }
@media (max-width: 560px) {
  .set-rows li { grid-template-columns: 1fr auto; row-gap: 2px }
  .set-rows .s-t { grid-column: 1 }
  .set-rows .s-n { grid-column: 2; grid-row: 1 / span 2 ; align-self: center }
  .set-rows .s-r { grid-column: 1; font-size: 15px }
}

body { background-image: url(ice.77cdf031aa.png); background-size: 512px 512px; background-repeat: repeat; background-attachment: fixed }
@media (max-width: 760px) { body { background-attachment: scroll } }