@charset "UTF-8";

/* ==========================================================================
   Crossing the Line / Franchir la ligne
   Shared stylesheet for index.html (en) and fr.html (fr).

   Design note: the red centre line is the organising device. Montreal sits
   to its left, Philadelphia to its right, and the ledger bars diverge from
   it. It appears in three places only: the masthead, the ledger axis, and
   the 1987 card, where it breaks.
   ========================================================================== */

:root {
  /* Surfaces: arena ice under lights, not paper */
  --ice:        #EDF1F5;
  --board:      #FFFFFF;
  --board-edge: #D2DCE5;

  /* Ink */
  --ink:        #0B1420;
  --ink-soft:   #3E4C5A;

  /* Club colours. Each has a fill token and a darker text token, because
     the Flyers orange is only ~3.1:1 on ice and fails AA for body text. */
  --mtl:        #A6192E;
  --mtl-text:   #8E1526;
  --phi:        #F74902;
  --phi-text:   #B03500;

  /* Rink markings */
  --centre-red: #C8102E;
  --blue-line:  #041E42;

  --focus:      #041E42;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --font-display: "Big Shoulders Display", "Oswald", "Arial Narrow",
                  "Helvetica Neue Condensed", sans-serif;
  --font-body:    "Spectral", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ice);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  left: 0;
  top: -100%;
  z-index: 50;
  padding: 0.75rem 1.25rem;
  background: var(--blue-line);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-decoration: none;
}

.skip:focus { top: 0; }

/* --------------------------------------------------------------------------
   Focus. WCAG 2.4.11 wants a 2px+ perimeter at 3:1 against the unfocused
   state, so this is a 3px ring plus a white outer ring for coloured fills.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}

.masthead :focus-visible,
.footer :focus-visible {
  outline-color: var(--blue-line);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}

h1 { font-size: clamp(3rem, 11vw, 8.5rem); }
h2 { font-size: clamp(1.75rem, 5vw, 3.25rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: 0.02em; }

p { margin: 0 0 1.1em; max-width: var(--measure); }

a { color: var(--blue-line); text-underline-offset: 0.18em; }
a:hover { color: var(--centre-red); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}

.deck {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100% - (var(--gutter) * 2), 78rem);
  margin-inline: auto;
}

.section {
  padding-block: clamp(3.5rem, 9vw, 7rem);
  border-top: 2px solid var(--blue-line);
}

.section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head .deck { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   Masthead. The centre line makes its first appearance here, dividing the
   two clubs before a single word of the story.
   -------------------------------------------------------------------------- */

.masthead {
  padding-block: clamp(2rem, 5vw, 3.5rem) 0;
}

/* Small screens: stacked, switch centred above the tagline. */
.utility {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-bottom: clamp(2.5rem, 7vw, 4.5rem);
}

/* max-width:none defeats the global p{max-width:68ch}, which otherwise
   caps the box narrower than the page and centres the text inside it. */
.utility .eyebrow { margin: 0; max-width: none; text-align: center; }
.lang-switch { align-self: center; }

/* 800px and up: tagline left, switch right, one line. The nav
   comes first in the DOM so it stays first for keyboard users on mobile;
   row-reverse puts it on the right here without reordering the markup. */
@media (min-width: 50rem) {
  .utility {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .utility .eyebrow { text-align: left; }
  .lang-switch { align-self: auto; }
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.9rem;
  border: 2px solid var(--blue-line);
  color: var(--blue-line);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.lang-switch a:hover {
  background: var(--blue-line);
  color: #FFFFFF;
}

/* Centre ice. The two clubs meet at the faceoff circle, the red line runs
   through it, and the series count sits either side like a scoreclock.
   This is where every one of the seven series actually began. */
.faceoff {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(0.75rem, 3vw, 2.25rem);
  row-gap: 0.35rem;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-bottom: clamp(1rem, 2.5vw, 1.75rem);
}

.circle {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

/* The two counts take the faceoff: one either side of the line, inside
   the circle. Absolute so they sit on the draw rather than beside it. */
.faceoff-circle {
  position: relative;
  width: clamp(10rem, 27vw, 15.5rem);
  margin-block: -1.1rem;
}

.side {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: none;
}

.side-mtl { align-items: flex-end; text-align: right; }
.side-phi { align-items: flex-start; text-align: left; }

.club {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 3vw, 1.9rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.side-mtl .club { color: var(--mtl-text); }
.side-phi .club { color: var(--phi-text); }

.founded {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.45rem;
}

.count {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 6.5vw, 3.75rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.count-mtl { right: 54%; color: var(--mtl); }
.count-phi { left: 54%; color: var(--phi); }

.faceoff-label {
  grid-column: 1 / -1;
  margin: 0.9rem 0 0;
  max-width: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.masthead h1 {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  color: var(--ink);
}

.masthead .deck {
  margin: 1.5rem auto 0;
  max-width: 46ch;
  text-align: center;
}

/* --------------------------------------------------------------------------
   The ledger. A diverging bar chart on the centre line: each series pushes
   away from the middle toward whichever club won it. The numbers are real
   text in the table, so the bars carry aria-hidden.
   -------------------------------------------------------------------------- */

.ledger-scroll { overflow-x: auto; }

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.ledger caption {
  caption-side: top;
  text-align: left;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  margin-bottom: 1.5rem;
  max-width: var(--measure);
}

.ledger th,
.ledger td {
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--board-edge);
  text-align: left;
  vertical-align: middle;
}

/* The centre line belongs to the data, not the column headings, so the
   header cell does not paint it. Without this the red runs up past the
   navy header rule with nothing above it to relate to. */
.ledger thead .col-bars { background-image: none; }

.ledger thead th {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  border-bottom: 2px solid var(--blue-line);
  white-space: nowrap;
}

.ledger .col-year { font-weight: 600; font-size: 1rem; white-space: nowrap; }
.ledger .col-round { font-family: var(--font-body); color: var(--ink-soft); }

.col-score { text-align: center; width: 2.5rem; font-weight: 600; }
.score-mtl { color: var(--mtl-text); }
.score-phi { color: var(--phi-text); }

/* The centre line is painted as a cell background rather than per row, so it
   runs unbroken from the header down through every series. The 4px middle
   grid column below sits exactly on top of it. */
.col-bars {
  width: 42%;
  min-width: 14rem;
  padding-inline: 0;
  background-image: linear-gradient(
    to right,
    transparent calc(50% - 2px),
    var(--centre-red) calc(50% - 2px),
    var(--centre-red) calc(50% + 2px),
    transparent calc(50% + 2px)
  );
}

.bars {
  display: grid;
  grid-template-columns: 1fr 4px 1fr;
  align-items: center;
}

.bar-track { display: flex; height: 1.4rem; }
.bar-track.to-left  { justify-content: flex-end; }
.bar-track.to-right { justify-content: flex-start; }

/* Spacer only. The red line itself comes from the cell background above. */
.bar-axis { align-self: stretch; }

.bar {
  display: block;
  height: 100%;
  width: calc(var(--games) / 4 * 100%);
}

.bar-mtl { background: var(--mtl); }
.bar-phi { background: var(--phi); }

.ledger-key {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.ledger-key span::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 0.6rem;
  margin-right: 0.5rem;
  vertical-align: 0;
}

.key-mtl::before { background: var(--mtl); }
.key-phi::before { background: var(--phi); }

/* Explains the bars, so it goes when the bars go. */
.bar-note {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Series cards
   -------------------------------------------------------------------------- */

.series-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.series {
  background: var(--board);
  border: 1px solid var(--board-edge);
  border-left: 8px solid var(--board-edge);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.series.won-mtl { border-left-color: var(--mtl); }
.series.won-phi { border-left-color: var(--phi); }

.series-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.series-year {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1;
}

.series-result {
  font-weight: 600;
  letter-spacing: 0.1em;
}

.won-mtl .series-result { color: var(--mtl-text); }
.won-phi .series-result { color: var(--phi-text); }

.series p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Moments
   -------------------------------------------------------------------------- */

.moments {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  max-width: 64rem;
}

.moment {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 2rem;
  padding-bottom: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--board-edge);
}

.moments > .moment:last-child { border-bottom: 0; padding-bottom: 0; }

.moment-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.moment h3 { margin-bottom: 0.75rem; }

@media (min-width: 48rem) {
  .moment {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   Crossings: people who changed sides of the line
   -------------------------------------------------------------------------- */

.crossings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.crossing {
  position: relative;
  padding: 1.4rem 0 0;
}

/* The rule colour is the club the player ended up at. */
.crossing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--board-edge);
}

.crossing.to-phi::before  { background: var(--phi); }
.crossing.to-mtl::before  { background: var(--mtl); }
.crossing.to-both::before {
  background: linear-gradient(to right, var(--mtl) 50%, var(--phi) 50%);
}

.crossing h3 { margin-bottom: 0.35rem; }

.direction {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.direction .from-mtl { color: var(--mtl-text); font-weight: 600; }
.direction .from-phi { color: var(--phi-text); font-weight: 600; }
.direction .arrow { color: var(--centre-red); font-weight: 600; }

.crossing p { font-size: 0.9375rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Numbers
   -------------------------------------------------------------------------- */

.numbers {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0 0 2rem;
}

.numbers > div {
  border-top: 3px solid var(--blue-line);
  padding: 1.25rem 0 0;
}

.numbers dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.numbers dd {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.numbers .note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 0.6rem;
  text-transform: none;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Sources
   -------------------------------------------------------------------------- */

.ref {
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  padding: 0 0.15em;
}

.ref:hover { text-decoration: underline; }

.sources {
  margin: 0;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.sources li { margin-bottom: 0.85rem; }
.sources li::marker { font-family: var(--font-mono); color: var(--ink-soft); }
.sources a { word-break: break-word; }

.sources cite { font-style: italic; }

/* --------------------------------------------------------------------------
   Footer and the disclosure
   -------------------------------------------------------------------------- */

.footer {
  border-top: 4px solid var(--centre-red);
  background: var(--board);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.footer p {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.disclosure {
  border-left: 4px solid var(--blue-line);
  padding-left: 1.25rem;
  max-width: var(--measure);
}

.disclosure strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Small screens: the bar column is redundant with the printed scores,
   so it goes rather than forcing a horizontal scroll.
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .col-bars,
  .bar-note { display: none; }

  .faceoff { grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; }
  .side-mtl { grid-column: 1; grid-row: 1; }
  .side-phi { grid-column: 2; grid-row: 1; }
  .faceoff-circle {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    margin-top: 1rem;
    width: 10rem;
  }
  .faceoff-label { grid-row: 3; }
  .crests { grid-template-columns: 1fr auto 1fr; }
  .tally { gap: 1.5rem 2rem; }
}

@media (min-width: 60rem) {
  .series-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}