@layer pages {
  /* ---- Rookie Watch insert sheet ---- */
  .insert-sheet {
    margin-top: var(--space-8);
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border-radius: 22px;
    background:
      repeating-linear-gradient(135deg, rgb(245 200 75 / 0.05) 0 2px, transparent 2px 18px),
      radial-gradient(900px 300px at 50% 0%, rgb(245 200 75 / 0.16), transparent 70%),
      #0a0d16;
    border: 1px solid rgb(245 200 75 / 0.35);
    box-shadow: inset 0 1px 0 rgb(255 241 181 / 0.35), 0 30px 60px rgb(0 0 0 / 0.4);
  }

  .insert-sheet--page { margin-top: 0; }
  .insert-sheet__header { text-align: center; margin-bottom: var(--space-6); }
  .insert-sheet__set { font: 700 0.75rem/1 var(--font-label); letter-spacing: 0.3em; text-transform: uppercase; color: rgb(255 241 181 / 0.75); }
  .insert-sheet__title {
    font: 400 clamp(3rem, 8vw, 5.5rem)/1.1 var(--font-script);
    font-style: normal;
    background: linear-gradient(100deg, #8a5a12, #ffe68a 30%, #c58b1c 50%, #fff1b5 65%, #a8741a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 0 rgb(0 0 0 / 0.6));
    transform: rotate(-3deg);
    padding-inline: 0.2em;
  }
  .insert-sheet__subtitle { font-size: 1.5rem; text-transform: uppercase; margin: var(--space-7) 0 var(--space-4); color: #ffe68a; }
  .insert-sheet__note { color: #b9b3a0; margin-top: var(--space-2); }
  .card-grid--insert { grid-template-columns: repeat(auto-fill, minmax(min(200px, calc(50% - 0.8rem)), 1fr)); }
  .insert-sheet > .button { display: flex; width: max-content; margin-inline: auto; }

  /* ---- Teams ---- */
  .division-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--space-5); }
  .division { padding: var(--space-4); border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
  .division__title { font-size: 1.2rem; text-transform: uppercase; margin-bottom: var(--space-3); color: var(--ink-muted); }
  .team-list { display: grid; gap: 0.3rem; }
  .team-row {
    display: grid;
    grid-template-columns: 1.5rem 2.4rem 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: 0.45rem 0.7rem;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(90deg, color-mix(in srgb, var(--team-primary) 45%, transparent), transparent 60%);
    border-left: 3px solid var(--team-accent);
  }
  .team-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--team-primary) 75%, transparent), transparent 80%); }
  .team-row__rank { color: var(--ink-muted); font-family: var(--label-font); font-size: 0.8rem; }
  .team-row__logo { width: 2.4rem; height: 2.4rem; }
  .team-row__record { color: var(--ink-muted); }
  .team-row__points { font: 800 0.95rem/1 var(--label-font); min-width: 4.5rem; text-align: right; }

  .team-banner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border-radius: 22px;
    background:
      repeating-linear-gradient(108deg, transparent 0 22px, color-mix(in srgb, var(--team-secondary) 14%, transparent) 22px 24px),
      linear-gradient(120deg, var(--team-primary), color-mix(in srgb, var(--team-primary) 55%, #000));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--team-accent) 60%, transparent), 0 30px 60px rgb(0 0 0 / 0.4);
    color: #fff;
    flex-wrap: wrap;
  }
  .team-banner .display-title { background: none; color: #fff; }
  /* A team page header's rafters (teams/_rafters, rafters_controller): each Cup and retired number as a small banner in
     its arena's shape and colors, hung in rows behind the header inside its border, faint and fading out behind the
     name; they don't make it taller. Opened (the corner button), they come forward above the name, every one a link.
     Each row holds the same number (--per-row, from the controller): to the right behind the header, to the left in
     front of it; without it they simply wrap. */
  .team-banner:has(.team-banner__rafters) { --team-banner-pad: clamp(1.25rem, 3vw, 2.5rem); position: relative; isolation: isolate; overflow: hidden; padding: var(--team-banner-pad); }
  .team-banner > :not(.team-banner__rafters, .team-banner__expand) { position: relative; z-index: 1; }
  .team-banner__rafters {
    --rafter-width: 1.9rem;
    position: absolute;
    inset: 2px;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0 1.4rem;
    overflow: hidden;
    border-radius: 20px;
    pointer-events: none;
    mask-image: linear-gradient(100deg, transparent 22%, #000 62%);
  }
  /* A thin light outline around each banner's shape, so one in its club's own colors still stands off the header. */
  .rafter { --rafter-outline: rgb(255 255 255 / 0.45); filter: drop-shadow(1px 0 0 var(--rafter-outline)) drop-shadow(-1px 0 0 var(--rafter-outline)) drop-shadow(0 1px 0 var(--rafter-outline)) drop-shadow(0 -1px 0 var(--rafter-outline)); }
  .team-banner__rafters .rafter { opacity: 0.22; }
  .team-banner.is-open .team-banner__rafters {
    --rafter-width: 2.6rem;
    position: static;
    order: -1;
    flex: 1 0 100%;
    min-width: 0;
    gap: var(--space-3);
    margin-top: calc(2px - var(--team-banner-pad));
    /* Clear of the button: in front, every banner is a link. */
    padding: 0 2rem var(--space-2) 0;
    overflow: visible;
    border-radius: 0;
    pointer-events: auto;
    mask-image: none;
  }
  .team-banner.is-open .rafters-row { justify-content: start; }
  /* Few enough to share a line: the Cups to the left, the numbers to the right. */
  .team-banner.is-open .team-banner__rafters { column-gap: var(--space-5); }
  .team-banner.is-open .team-banner__rafters.is-side-by-side { flex-direction: row; justify-content: space-between; }
  .team-banner.is-open .rafter { opacity: 1; filter: drop-shadow(1px 0 0 var(--rafter-outline)) drop-shadow(-1px 0 0 var(--rafter-outline)) drop-shadow(0 1px 0 var(--rafter-outline)) drop-shadow(0 -1px 0 var(--rafter-outline)) drop-shadow(0 4px 5px rgb(0 0 0 / 0.5)); }
  /* The rafters' button, an aside more than a feature: a faint chevron in the corner that turns over once they're
     forward. */
  .team-banner__expand {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgb(255 255 255 / 0.55);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
  }
  .team-banner__expand:hover, .team-banner__expand:focus-visible, .team-banner.is-open .team-banner__expand { color: #fff; background: rgb(0 0 0 / 0.25); }
  .team-banner__expand svg { width: 1.1rem; height: 1.1rem; fill: currentColor; transition: rotate 0.3s ease; }
  .team-banner.is-open .team-banner__expand svg { rotate: 180deg; }
  .rafters-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: start; gap: 0.8rem 0.3rem; margin: 0; padding: 0; list-style: none; }
  .rafters-row[style*="--per-row"] { display: grid; grid-template-columns: repeat(var(--per-row), round(var(--rafter-width), 1px)); justify-content: end; }
  .team-banner.is-open { row-gap: var(--space-3); }
  .rafter { --rafter-clip: none; width: round(var(--rafter-width, 1.9rem), 1px); container-type: inline-size; }
  .rafter--pennant { --rafter-clip: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); }
  .rafter--swallowtail { --rafter-clip: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); }
  .rafter--shield { --rafter-clip: polygon(0 0, 100% 0, 100% 80%, 84% 92%, 50% 100%, 16% 92%, 0 80%); }
  .rafter > a { display: block; color: inherit; text-decoration: none; }
  .rafter__cloth {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4cqw;
    aspect-ratio: 1 / 1.9;
    padding: 0 0 12cqw;
    /* A bordered banner's edge is the cloth's own border, painted with it, so no hairline of the cloth shows past it at
       a fractional size; without one, a hem runs edge to edge. */
    border: 0 solid transparent;
    background: linear-gradient(var(--rafter-bg), var(--rafter-bg)) padding-box, linear-gradient(var(--rafter-border, var(--rafter-bg)), var(--rafter-border, var(--rafter-bg))) border-box;
    color: var(--rafter-text);
    clip-path: var(--rafter-clip);
  }
  .rafter[style*="--rafter-border"] .rafter__cloth { border-width: max(1px, 6cqw); }
  :is(.rafter--pennant, .rafter--swallowtail, .rafter--shield) .rafter__cloth { padding-bottom: 32cqw; }
  .rafter--disc .rafter__cloth { aspect-ratio: 1; padding: 0; border-radius: 50%; }
  .rafter__cup { width: 62cqw; height: auto; fill: currentColor; filter: none; }
  .rafter__year { font: 800 30cqw/1 var(--font-body); }
  .rafter__number { font: 800 56cqw/1 var(--font-body); letter-spacing: -0.02em; }
  .rafter__hem { position: absolute; inset-inline: 0; bottom: 12%; height: 9%; background: var(--rafter-hem); }
  :is(.rafter--pennant, .rafter--swallowtail, .rafter--shield) .rafter__hem { bottom: 24%; }
  .rafter a:hover .rafter__cloth, .rafter a:focus-visible .rafter__cloth { filter: brightness(1.15); }
  .team-banner .eyebrow { color: var(--team-accent); }
  .team-banner__logo { width: clamp(6rem, 14vw, 10rem); filter: drop-shadow(0 8px 16px rgb(0 0 0 / 0.5)); }
  .team-banner__stats { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-4); }
  .team-banner__stats dt { font: 700 0.68rem/1.2 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
  .team-banner__stats dd { font: 900 1.6rem/1.1 var(--font-label); }
  .team-banner__stats .team-banner__wordy { font-size: 1.05rem; line-height: 1.5; }
  .team-banner__honors { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; font: 700 0.8rem/1.2 var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--team-accent); }
  .team-banner__honors li { display: flex; align-items: center; gap: 0.4rem; }
  .team-banner__honors .trophy-icon { color: #f5c84b; }

  /* The inserts size an inline trophy by their card's width; on a page it's type-sized. */
  :is(.franchise-seasons, .franchise-trophies, .team-banner__honors) .trophy-icon--inline { width: 0.85rem; height: 1.15rem; margin-right: 0.35rem; }

  /* A franchise's history: its rafters, each banner in its arena's style (teams/histories/_banner, Teams::BannerStyle,
     config/team_banners/). The cloth is the border color, clipped to the shape; the field inside it the banner. */
  .rafters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  /* Every banner in a set is the same size, as they are in the rafters: the cloth's proportions are fixed (--aspect),
     and what it says fits inside them rather than stretching it. Every length inside is a fraction of the banner's
     width (cqw), as a club's measurements are (BannersHelper::MEASUREMENTS), so a banner keeps its proportions at any
     size; the defaults below are those measurements' when a club gives none. */
  .banner { --banner-width: 7.75rem; --aspect: 1 / 2; --clip: none; width: var(--banner-width); container-type: inline-size; color: var(--banner-text); }
  .banner--wide { --banner-width: 12rem; }
  .banner--disc { --banner-width: 9rem; }
  .banner--pennant { --clip: polygon(0 0, 100% 0, 100% var(--point-from, 88%), 50% 100%, 0 var(--point-from, 88%)); }
  .banner--swallowtail { --clip: polygon(0 0, 100% 0, 100% 100%, 50% var(--notch-depth, 89%), 0 100%); }
  .banner--deep { --notch-depth: 82%; }
  .banner--shield { --clip: polygon(0 0, 100% 0, 100% 84%, 86% 93%, 50% 100%, 14% 93%, 0 84%); }
  .banner--jersey { --clip: polygon(0 0, 37% 0, 50% 4.5%, 63% 0, 100% 0, 100% 100%, 0 100%); }
  .banner__cloth {
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--aspect);
    min-height: 0;
    overflow: hidden;
    padding: var(--banner-border-top, var(--banner-border-width)) var(--banner-border-width) var(--banner-border-bottom, var(--banner-border-width));
    background: var(--banner-border, var(--banner-bg));
    clip-path: var(--clip);
  }
  .banner__field {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--banner-bg);
    clip-path: var(--clip);
    box-shadow: inset 0 0 0 var(--banner-inset-offset) var(--banner-bg), inset 0 0 0 calc(var(--banner-inset-offset) + var(--banner-inset-width)) var(--banner-inset, transparent);
  }
  .banner--square { --aspect: 1 / 1.15; }
  .banner--squat { --aspect: 1 / 1.3; }
  .banner--tall { --aspect: 1 / 2.4; }
  .banner--narrow { --banner-width: 5.75rem; --aspect: 1 / 2.8; }
  .banner--wide { --aspect: auto; }
  .banner--wide .banner__logo { width: 34%; }
  .banner--disc .banner__cloth, .banner--disc .banner__field { border-radius: 50%; }
  .banner--disc { --aspect: 1; }
  .banner--disc .banner__field { justify-content: center; }
  .banner__field:has(.banner__foot--logo_overlap) { overflow: visible; }
  /* Vegas's: a stripe down the middle, behind the body. */
  .banner--striped .banner__field::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: var(--stripe-width, 30cqw); translate: -50% 0; background: var(--banner-stripe); }
  .banner--striped .banner__body { position: relative; }
  .banner__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: var(--gap, 4.5cqw);
    padding: var(--padding-top, 10cqw) var(--padding-side, 5cqw) var(--padding-bottom, 10cqw);
    text-align: center;
  }
  :is(.banner--pennant, .banner--swallowtail, .banner--shield) .banner__body { padding-bottom: var(--padding-bottom, 23cqw); }
  :is(.banner--pennant, .banner--swallowtail, .banner--shield).banner--wide .banner__body { padding-bottom: var(--padding-bottom, 28cqw); }
  .banner--disc .banner__body { flex: none; justify-content: center; padding: 15.5cqw; gap: 1cqw; }
  .banner--top .banner__body { justify-content: flex-start; }
  /* Space above one field in particular (space_before), beside the gap between them all. */
  .banner__body > .banner__club { margin-top: var(--before-club, 0px); }
  .banner__body > .banner__city { margin-top: var(--before-city, 0px); }
  .banner__body > .banner__nickname { margin-top: var(--before-nickname, 0px); }
  .banner__body > .banner__title { margin-top: var(--before-title, 0px); }
  .banner__body > .banner__cup { margin-top: var(--before-cup, 0px); }
  .banner__body > .banner__year { margin-top: var(--before-year, 0px); }
  .banner__body > .banner__year-list { margin-top: var(--before-years-list, 0px); }
  .banner__body > .banner__name { margin-top: var(--before-name, 0px); }
  .banner__body > .banner__number { margin-top: var(--before-number, 0px); }
  .banner__body > .banner__years { margin-top: var(--before-years, 0px); }
  .banner__body > .banner__years-split { margin-top: var(--before-years-split, 0px); }
  .banner__body > .banner__portrait { margin-top: var(--before-portrait, 0px); }
  .banner__body > .banner__stars { margin-top: var(--before-stars, 0px); }

  /* Panels and stripes: a band across the top (one color or several), a jersey's yoke, a head panel, the hem, the
     foot. Montreal's chest band runs behind the number; Colorado's bands rise to a peak. */
  .banner__band { height: var(--band-height, 12.9cqw); flex: none; background: var(--banner-band); }
  .banner--peaks .banner__band { height: var(--band-height, 20.6cqw); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 45%, 0 100%); margin-bottom: calc(var(--band-height, 20.6cqw) / -2); }
  .banner--peaks .banner__foot { clip-path: polygon(0 32%, 50% 0, 100% 32%, 100% 100%, 0 100%); padding-top: 15.5cqw; }
  .banner__yoke { height: 20.6cqw; flex: none; background: var(--banner-yoke); }
  .banner__head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.6cqw;
    min-height: var(--head-height, 0);
    padding: 7.1cqw 3.9cqw;
    background: var(--banner-head-bg);
    color: var(--banner-head-text, var(--banner-text));
    text-align: center;
  }
  .banner__hem { height: var(--hem-height, 23cqw); flex: none; margin-top: var(--hem-gap, 0); background: var(--banner-hem); }
  :is(.banner--pennant, .banner--swallowtail, .banner--shield) .banner__hem { margin-bottom: 16.8cqw; }
  .banner__foot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5.2cqw;
    height: var(--foot-height, auto);
    min-height: var(--foot-height, 23cqw);
    padding: 5.2cqw 3.9cqw;
    background: var(--banner-foot-bg);
    color: var(--banner-foot-text, var(--banner-bg));
    text-align: center;
  }
  .banner__foot--stacked { flex-direction: column; height: var(--foot-height, 30%); gap: 3.2cqw; }
  .banner__foot--logo_left { justify-content: space-between; height: var(--foot-height, 22%); padding-inline: 6.5cqw; text-align: right; }
  .banner__foot.banner__foot--logo_left .banner__logo { width: 38%; }
  /* Detroit's: a fixed white panel, the years large and right-aligned across it, centered in it; the winged wheel on
     the cloth above, reaching into the panel (--logo-drop). */
  .banner__foot--logo_overlap { position: relative; height: var(--foot-height, 32cqw); overflow: visible; justify-content: flex-end; align-items: center; padding: 0 var(--years-right, 10cqw) 0 0; }
  .banner__foot.banner__foot--logo_overlap .banner__logo { position: absolute; left: var(--logo-left, 9cqw); bottom: calc(100% - var(--logo-drop, 10cqw)); width: var(--logo-width, 39cqw); margin: 0; }
  .banner__foot--logo_overlap .banner__years { width: 100%; text-align: right; font-weight: 800; white-space: nowrap; }
  .banner__foot--logo_overlap .banner__years > span { transform-origin: right; }
  /* A foot holding the Cup takes the rest of the banner, unless it's measured (Vegas's gold from about a third down). */
  .banner__foot:has(.banner__cup) { flex: 1; flex-direction: column; }
  .banner[style*="--foot-height"] .banner__foot:has(.banner__cup) { flex: none; }
  :is(.banner--pennant, .banner--swallowtail, .banner--shield) .banner__foot { padding-bottom: 20.6cqw; }
  .banner__foot .banner__logo { width: 25.8cqw; }
  .banner__foot--stacked .banner__logo { width: 33.5cqw; }
  :is(.banner__head, .banner__foot) :is(.banner__year, .banner__year-list, .banner__years, .banner__title) { color: inherit; }
  /* Carolina's hurricane-warning flag: red tiles, each with a black square, set in black. */
  .banner__flags { display: flex; gap: 1.6cqw; padding: 1.6cqw; flex: none; background: #111; }
  .banner__flags span { flex: 1; aspect-ratio: 1; background: var(--banner-flag, #CE1126); display: grid; place-items: center; }
  .banner__flags span::after { content: ""; width: 42%; aspect-ratio: 1; background: #111; }

  /* Lettering. Each kind's size, line height (--*-leading), tracking (--*-tracking), and how much narrower or wider
     than its face it's drawn (--*-condense) come from the club's measurements; --skew slants the club, title, and
     year as some arenas letter them. A name or a years line too long for the cloth is set smaller to fit: --ems is
     its width in its face (BannersHelper#banner_text_ems), the room what it may fill. */
  .banner__club {
    display: flex;
    flex-direction: column;
    font: 800 var(--club-size, 10.3cqw)/var(--club-leading, 1) var(--font-body);
    letter-spacing: var(--club-tracking, 0.06em);
    text-transform: uppercase;
    color: var(--banner-club, var(--banner-text));
    transform: skewX(var(--skew, 0deg));
  }
  .banner__club > span { transform: scaleX(var(--club-condense, 1)); }
  .banner__club span:last-child:not(:first-child) { font-size: 1.3em; }
  .banner--even-club .banner__club span:last-child { font-size: 1em; }
  .banner__club--large { font-size: var(--club-size, 12.9cqw); }
  .banner__city, .banner__nickname {
    font: 800 var(--city-size, 12.3cqw)/var(--club-leading, 1) var(--font-body);
    letter-spacing: var(--club-tracking, 0.06em);
    text-transform: uppercase;
    color: var(--banner-club, var(--banner-text));
    transform: skewX(var(--skew, 0deg)) scaleX(var(--club-condense, 1));
  }
  .banner__nickname { font-size: var(--nickname-size, 12.3cqw); }
  .banner__city--small { font-size: var(--city-size, 9.7cqw); }
  /* The NHL's logo files carry a wide transparent margin: sized past the cloth, and pulled in, the mark itself fills it.
     --logo-size: how wide the mark itself is drawn; its file's margin (about a sixth each side) is let past. */
  .banner__logo { --logo-margin: -10%; width: 80%; height: auto; margin-block: var(--logo-margin); }
  .banner[style*="--logo-size"] .banner__body .banner__logo { width: calc(var(--logo-size) * 1.36); max-width: none; --logo-margin: calc(var(--logo-size) * -0.18); }
  .banner__logo--large { width: 118%; max-width: none; --logo-margin: -16%; }
  .banner__logo--small { width: 56%; --logo-margin: -6%; }
  .banner__body > .banner__logo { margin-top: calc(var(--logo-margin) + var(--before-logo, 0px)); }
  .banner--tinted .banner__logo { filter: brightness(0) invert(1); }
  .banner__title {
    display: flex;
    flex-direction: column;
    font: 800 var(--title-size, 12.3cqw)/var(--title-leading, 1.02) var(--font-body);
    letter-spacing: var(--title-tracking, 0.04em);
    text-transform: uppercase;
    text-shadow: var(--banner-title-shadow, none);
    transform: skewX(var(--skew, 0deg));
  }
  .banner__title > span > span { display: inline-block; white-space: nowrap; transform: scaleX(var(--title-condense, 1)); }
  .banner__title--large { font-size: var(--title-size, 15.5cqw); }
  .banner__title--small { font-size: var(--title-size, 9.7cqw); }
  /* Strips of color behind lines of the title, frame to frame. */
  .banner__title--bands { align-self: stretch; gap: 0; margin-inline: calc(var(--padding-side, 5cqw) * -1); }
  .banner__title--bands > span { padding: var(--title-band-padding, 3.2cqw) 2.6cqw; }
  .banner__line--large { font-size: 1.55em; }
  .banner__line--small { font-size: 0.75em; }
  .banner__cup { position: relative; display: grid; place-items: center; width: var(--cup-size, 48%); }
  .banner__cup--large { width: var(--cup-size, 82%); }
  .banner__cup .trophy-icon { width: 100%; height: auto; fill: var(--banner-cup, #c6cacf); filter: none; }
  .banner__cup-logo { position: absolute; left: 50%; bottom: var(--cup-logo-bottom, 18%); width: 56%; translate: -50% 0; }
  .banner[style*="--cup-logo-size"] .banner__cup-logo { width: calc(var(--cup-logo-size) * 1.36); max-width: none; }
  .banner__cup-band {
    display: grid;
    place-items: center;
    align-self: stretch;
    margin: -6.5cqw calc(var(--padding-side, 5cqw) * -1) 0;
    padding: 3.2cqw 0;
    border-block: 1.6cqw solid var(--banner-border, transparent);
  }
  .banner__cup-band img { width: 34%; }
  .banner[style*="--cup-band-logo-size"] .banner__cup-band img { width: calc(var(--cup-band-logo-size) * 1.36); max-width: none; margin-block: calc(var(--cup-band-logo-size) * -0.18); }
  .banner__year {
    font: 800 var(--year-size, 18.7cqw)/var(--year-leading, 1) var(--font-body);
    letter-spacing: var(--year-tracking, normal);
    color: var(--banner-year, var(--banner-text));
    text-shadow: var(--banner-year-shadow, none);
    transform: skewX(var(--skew, 0deg)) scaleX(var(--year-condense, 1));
  }
  .banner__year--large { font-size: var(--year-size, 24.5cqw); }
  .banner__year--small { font-size: var(--year-size, 12.3cqw); }
  /* A strip of color behind the year, frame to frame (Vegas's red bar). */
  .banner[style*="--banner-year-band"] .banner__year { align-self: stretch; margin-inline: calc(var(--padding-side, 5cqw) * -1); padding-block: var(--title-band-padding, 3.2cqw); background: var(--banner-year-band); }
  /* Rules either side of the year (St. Louis's Cups): a line, or two (year_rules: double). */
  :is(.banner--year-rules, .banner--year-rules-double) .banner__year { display: flex; align-items: center; justify-content: center; gap: 0.25em; }
  :is(.banner--year-rules, .banner--year-rules-double) .banner__year::before,
  :is(.banner--year-rules, .banner--year-rules-double) .banner__year::after { content: ""; width: 0.7em; height: 0.08em; background: currentColor; }
  .banner--year-rules-double .banner__year::before, .banner--year-rules-double .banner__year::after { height: 0.24em; background: none; border-block: 0.07em solid currentColor; }
  .banner__year-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.3cqw 7cqw; font: 800 var(--year-size, 12.3cqw)/var(--year-leading, 1.3) var(--font-body); color: var(--banner-year, var(--banner-text)); }
  .banner--wide .banner__year-list { font-size: var(--year-size, 7.9cqw); }
  .banner__year-list--columns { display: grid; grid-template-columns: 1fr 1fr; }
  .banner__name {
    display: flex;
    flex-direction: column;
    align-items: center;
    font: 800 var(--name-size, 12.3cqw)/var(--name-leading, 0.9) var(--font-body);
    letter-spacing: var(--name-tracking, 0.04em);
    text-transform: uppercase;
    text-shadow: var(--banner-name-shadow, none);
  }
  .banner__name > span { font-size: min(1em, calc(var(--name-room, 90cqw) / (var(--ems, 3) * var(--name-condense, 1)))); white-space: nowrap; transform: scaleX(var(--name-condense, 1)); }
  .banner__name--large { font-size: var(--name-size, 16.1cqw); }
  .banner__name--stacked span:first-child { font-size: 0.7em; }
  .banner__name > .banner__name-arched { display: flex; align-items: flex-start; font-size: min(1em, calc(var(--name-room, 88cqw) / (var(--ems, 3) * var(--name-condense, 1)))); padding-bottom: var(--name-arch-room, 0); }
  .banner__name-arched > span { display: inline-block; transform: translateY(var(--drop)) rotate(var(--turn)); }
  .banner__name--rules span::before, .banner__name--rules span::after { content: "—"; margin: 0 0.3em; }
  .banner__name a { color: inherit; text-decoration: none; }
  .banner__name a:hover { text-decoration: underline; }
  .banner__number {
    font: 800 var(--number-size, 51.6cqw)/var(--number-leading, 0.95) var(--font-body);
    letter-spacing: var(--number-tracking, normal);
    color: var(--banner-number, var(--banner-text));
    text-shadow: var(--banner-number-shadow, none);
  }
  .banner__number > span { display: inline-block; transform: scaleX(var(--number-condense, 1)); }
  .banner__number--large { font-size: var(--number-size, 64.5cqw); }
  .banner__number--small { font-size: var(--number-size, 19.4cqw); }
  /* The faces a name or a number can be set in (name_font, number_font); the default is the body face. */
  .banner__number--varsity { font-family: var(--font-collegiate); font-weight: 400; font-size: var(--number-size, 42.6cqw); }
  .banner__number--slab { font-family: var(--font-slab); font-weight: 400; font-size: var(--number-size, 41.3cqw); }
  :is(.banner__number--block, .banner__name--block) { font-family: var(--font-block); font-weight: 400; }
  :is(.banner__number--gothic, .banner__name--gothic) { font-family: var(--font-gothic); font-weight: 700; }
  :is(.banner__number--serif, .banner__name--serif) { font-family: var(--font-serif); font-weight: 700; }
  .banner__name--slab { font-family: var(--font-slab); font-weight: 400; }
  .banner__name--collegiate { font-family: var(--font-collegiate); font-weight: 400; }
  .banner__number--chest {
    align-self: stretch;
    padding: 2.6cqw 0;
    background: linear-gradient(transparent var(--chest-top, 22%), #fff var(--chest-top, 22%) calc(var(--chest-top, 22%) + 4%),
      var(--banner-chest) calc(var(--chest-top, 22%) + 4%) calc(var(--chest-bottom, 78%) - 4%), #fff calc(var(--chest-bottom, 78%) - 4%) var(--chest-bottom, 78%), transparent var(--chest-bottom, 78%));
  }
  /* Boston's numbers sit on a plate inside the club's roundel. */
  .banner__number--plate span { display: grid; place-items: center; width: 46cqw; aspect-ratio: 1; border-radius: 50%; background: var(--banner-plate); box-shadow: 0 0 0 4.5cqw #111; font-size: 28cqw; }
  .banner__years {
    display: flex;
    flex-direction: column;
    font: 700 var(--years-size, 9.7cqw)/var(--years-leading, 1.16) var(--font-body);
    letter-spacing: var(--years-tracking, 0.04em);
    color: var(--banner-years, inherit);
  }
  .banner__years > span { font-size: min(1em, calc(var(--years-room, 84cqw) / (var(--ems, 4) * var(--years-condense, 1)))); white-space: nowrap; transform: scaleX(var(--years-condense, 1)); }
  .banner__years-split { display: flex; align-items: center; justify-content: center; gap: 4.5cqw; font: 800 var(--years-size, 10.3cqw)/1 var(--font-body); letter-spacing: var(--years-tracking, normal); color: var(--banner-years, inherit); }
  .banner__years-split .banner__logo { width: 28cqw; margin: 0; }
  .banner__years-separator { color: var(--banner-year, currentColor); }
  .banner__years-corners { position: absolute; inset: auto 0 5cqw; display: flex; justify-content: space-between; padding: 0 6cqw; font: 800 var(--years-size, 9.3cqw)/1 var(--font-body); letter-spacing: var(--years-tracking, normal); color: var(--banner-years, inherit); }
  .banner__portrait { width: 86%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); }
  .banner__portrait--bleed {
    width: calc(100% + 2 * var(--padding-side, 5cqw));
    max-width: none;
    flex: 1;
    min-height: 50cqw;
    margin: 0 calc(var(--padding-side, 5cqw) * -1) calc(var(--padding-bottom, 10cqw) * -1);
    object-position: top;
  }
  .banner__stars { display: grid; grid-template-columns: repeat(var(--stars-across, 6), 1fr); gap: 1cqw; padding: 0 6cqw; font-size: var(--stars-size, 9cqw); line-height: 1.1; color: var(--banner-year, #B4975A); }
  .banner__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--banner-text); font: 800 7.2px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
  .banner--disc .banner__name, .banner--disc .banner__years { display: none; }
  .banner--serif :is(.banner__title, .banner__year, .banner__club, .banner__city, .banner__nickname) { font-family: var(--font-serif); }
  .banner--gothic :is(.banner__title, .banner__year, .banner__club, .banner__city, .banner__nickname, .banner__years) { font-family: var(--font-gothic); font-weight: 700; }
  .banner--squared :is(.banner__title, .banner__year, .banner__club, .banner__city, .banner__nickname, .banner__years) { font-family: var(--font-block); font-weight: 400; }
  .banner--script .banner__title { font: 400 var(--title-size, 15.5cqw)/var(--title-leading, 1.15) var(--font-script); text-transform: none; letter-spacing: 0; }
  .banner--script .banner__club { font: 400 var(--club-size, 11.6cqw)/var(--club-leading, 1.15) var(--font-script); text-transform: none; letter-spacing: 0; }
  .banner--script .banner__year { font-family: var(--font-serif); }

  .franchise-trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3); margin: 0; }
  .franchise-trophies > div { padding: var(--space-3) var(--space-4); border-radius: 12px; background: var(--surface-raised); }
  .franchise-trophies dt { display: flex; align-items: center; gap: 0.45rem; font: 800 0.85rem/1.2 var(--font-label); }
  .franchise-trophies dt small { margin-left: auto; color: var(--ink-muted); }
  .franchise-trophies dd { margin: var(--space-2) 0 0; }
  .franchise-trophies ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; font-size: 0.9rem; }
  .franchise-trophies li span { display: inline-block; min-width: 4.6rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
  .franchise-also { margin: var(--space-4) 0 0; color: var(--ink-muted); line-height: 1.6; }
  .franchise-also span { font: 700 0.72rem/1 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; margin-right: 0.4rem; }
  .franchise-seasons tr.is-champion th, .franchise-seasons tr.is-champion td { background: color-mix(in srgb, #f5c84b 12%, transparent); }


  @media (max-width: 640px) {
    .team-banner__rafters { --rafter-width: 1.5rem; padding: 0 0.8rem; mask-image: linear-gradient(180deg, #000 20%, transparent 75%); }
    .team-banner__rafters .rafter { opacity: 0.13; }
    .team-banner.is-open .team-banner__rafters { --rafter-width: 2.1rem; }
    /* Four banners to a row: a club with two dozen Cups shouldn't fill the phone. Everything scales down with them. */
    .rafters { gap: var(--space-2); }
    .banner { --banner-width: calc((100% - 3 * var(--space-2)) / 4); font-size: 0.62rem; }
    .banner--wide { --banner-width: 100%; }
    .banner--wide .banner__logo { width: 4.5rem; }
    .banner--disc { --banner-width: calc((100% - 2 * var(--space-2)) / 3); }
  }

  /* ---- Scores ---- */
  .date-nav { display: flex; gap: var(--space-2); }
  .date-nav .button { margin-top: 0; }
  .game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: var(--space-4); }
  .game-card { padding: var(--space-4); border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: var(--space-3); }
  .game-card__score { display: grid; gap: 0.4rem; color: var(--ink); text-decoration: none; }
  .game-card__team { display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: var(--space-3); color: var(--ink-muted); font-weight: 600; font-size: 1.15rem; }
  .game-card__team.is-winner { color: var(--ink); font-weight: 800; }
  .game-card__logo { width: 2.4rem; height: 2.4rem; }
  .game-card__goals { font: 900 1.6rem/1 var(--font-label); }
  .game-card__status { font: 700 0.72rem/1 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon); }
  .stars { display: grid; gap: 0.3rem; border-top: 1px solid var(--line); padding-top: var(--space-3); }
  .stars__item { display: grid; grid-template-columns: 7rem 1fr; gap: 0 var(--space-2); }
  .stars__rank { grid-row: span 2; font: 700 0.68rem/1.6 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
  .stars__line { color: var(--ink-muted); font-size: 0.95rem; }
  .game-title { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: baseline; }
  .game-title__at { font-size: 0.5em; color: var(--ink-muted); }
  .goalie-table { margin-top: var(--space-4); }

  /* The scoring summary: a scoresheet, period by period. */
  .scoring { display: grid; gap: var(--space-4); }
  .scoring__period { padding: var(--space-3) var(--space-4); border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
  .scoring__period-title { font: 700 0.8rem/1.2 var(--font-label); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon); margin-bottom: var(--space-2); }
  .scoring__goals { display: grid; }
  .scoring__none { color: var(--ink-muted); padding-block: 0.3rem; }
  .goal {
    display: grid;
    grid-template-columns: 3rem 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding-block: 0.55rem;
    border-top: 1px solid var(--line);
    border-left: 3px solid var(--team-accent);
    padding-left: var(--space-2);
  }
  .goal:first-child { border-top: 0; }
  .goal__time { font: 700 0.95rem/1 var(--font-label); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
  .goal__logo { width: 2rem; height: 2rem; }
  .goal__body { display: grid; gap: 0.1rem; min-width: 0; }
  .goal__scorer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; font-weight: 700; font-size: 1.1rem; }
  .goal__count { color: var(--ink-muted); font-weight: 600; }
  .goal__tag { padding: 0.1rem 0.45rem; border-radius: 999px; font: 700 0.68rem/1.3 var(--font-label); letter-spacing: 0.1em; color: #04060d; background: var(--gold); }
  .goal__assists { color: var(--ink-muted); font-size: 0.95rem; }
  .goal__score { font: 800 0.9rem/1.2 var(--font-label); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

  /* Phones: the running score drops under the play, beside the logo. */
  @media (max-width: 640px) {
    .scoring__period { padding: var(--space-2) var(--space-3); }
    .goal { grid-template-columns: 2.6rem 1.6rem minmax(0, 1fr); column-gap: var(--space-2); }
    .goal__logo { width: 1.6rem; height: 1.6rem; }
    .goal__score { grid-column: 3; text-align: left; font-size: 0.8rem; color: var(--ink-muted); }
  }

  /* ---- Leaders ---- */
  .leader-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--space-5); }
  .leader-grid + .leader-grid { margin-top: var(--space-5); }
  /* Four goalie boards: one row on wide screens, two by two below, never three and one. */
  .leader-grid--goalies { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 640px) { .leader-grid--goalies { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .leader-grid--goalies { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  /* Each board spans three of its grid's rows (header, card, list) as a subgrid, so a title that wraps
     in a narrow board moves its whole row's cards down together. */
  .leader-board { padding: var(--space-4); border-radius: 18px; background: var(--surface); border: 1px solid var(--line); display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-3); align-content: start; }
  .leader-board__header { align-self: start; }
  .leader-board__title { font-size: 1.4rem; text-transform: uppercase; }
  .leader-board__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-2); }
  .leader-board__note { color: var(--ink-muted); font-size: 0.8rem; white-space: nowrap; }
  .leader-board__card { width: min(13rem, 70%); margin-inline: auto; }
  .leader-board__list { display: grid; gap: 0.3rem; counter-reset: leader 1; }
  .leader-board__list li { display: grid; grid-template-columns: 1.6rem 1fr auto auto; gap: var(--space-2); align-items: baseline; counter-increment: leader; }
  .leader-board__list li::before { content: counter(leader); font: 700 0.8rem/1 var(--font-label); color: var(--ink-muted); }
  .leader-board__team { color: var(--ink-muted); font-size: 0.85rem; }
  .leader-board__value { font: 800 1rem/1 var(--font-label); min-width: 3.5rem; text-align: right; }

  /* Touch: the runners-up are links on short lines; give each row a finger's height. */
  @media (pointer: coarse) {
    .leader-board__list { gap: 0; }
    .leader-board__list li { align-items: center; }
    .leader-board__list a { display: inline-block; padding-block: 0.45rem; }
  }

  [data-edition="vintage"] :is(.division, .game-card, .leader-board) { background: var(--noise-light), #f3e8cf; border-radius: 4px; border: 3px double rgb(70 45 20 / 0.45); }

  /* ---- Legends: the set and sort switches above the grid ---- */
  .legends-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
  .rookies-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5); }
  .rookies-toolbar__note { color: #b9b3a0; font-size: 0.8rem; }
  @media (max-width: 480px) {
    .rookies-toolbar .edition-switch { flex-basis: 100%; }
  }

  /* The switch in the sheet's gold: a gilt edge, and the pick a soft gold pill rather than the neon ring. */
  .insert-sheet .edition-switch {
    background: rgb(10 13 22 / 0.75);
    border-color: rgb(245 200 75 / 0.35);
    box-shadow: inset 0 1px 0 rgb(255 241 181 / 0.12);
  }
  .insert-sheet .edition-switch__label { color: rgb(255 241 181 / 0.6); }
  .insert-sheet .edition-switch__option { color: #b9b3a0; }
  .insert-sheet .edition-switch__option:hover { color: #ffe68a; }
  .insert-sheet .edition-switch__option.is-active {
    background: linear-gradient(180deg, rgb(255 230 138 / 0.18), rgb(197 139 28 / 0.12));
    color: #ffe68a;
    box-shadow: inset 0 0 0 1px rgb(245 200 75 / 0.6), inset 0 1px 0 rgb(255 241 181 / 0.25);
  }

  /* ---- The season archive: one tile per series ---- */
  .series-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-4); }
  .series { position: relative; display: grid; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
  .series__link { display: grid; gap: 0.2rem; padding: var(--space-4) var(--space-4) var(--space-3); text-decoration: none; color: var(--ink); }
  .series__link:hover { background: var(--surface-raised); }
  .series__season { font: italic 900 2.2rem/1 var(--font-display); }
  .series__count { font-weight: 700; color: var(--ink-muted); }
  .series__stock { font: 700 0.7rem/1.4 var(--label-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon); }
  .series__leaders { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); font: 700 0.75rem/1.4 var(--label-font); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
  .series--vintage { background: var(--noise-light), linear-gradient(170deg, #f8efd8, #efe2c4); border-color: rgb(110 80 40 / 0.4); }
  .series--vintage :is(.series__link, .series__season) { color: #2c2017; font-family: var(--font-slab); font-style: normal; }
  .series--vintage .series__link:hover { background: rgb(255 255 255 / 0.35); }
  .series--vintage .series__count { color: #6f5b46; }
  .series--vintage .series__stock, .series--vintage .series__leaders { color: #9b2a22; border-color: rgb(110 80 40 / 0.3); }

  /* ---- Phones ---- */
  @media (max-width: 640px) {
    /* The sheet's frame gives back some width so its two-up cards stay readable. */
    .insert-sheet { padding: var(--space-5) var(--space-3); }
    .insert-sheet__header { margin-bottom: var(--space-5); }

    /* Standings: a narrower logo and points column leave the team name room for one line. */
    .division { padding: var(--space-3); }
    .team-row { grid-template-columns: 1rem 1.8rem 1fr auto auto; gap: var(--space-2); padding-inline: 0.5rem; line-height: 1.2; }
    .team-row__logo { width: 1.8rem; height: 1.8rem; }
    .team-row__points { min-width: 3.4rem; }

    /* The archive two-up: 109 full-width tiles made a very long scroll. */
    .series-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .series__link { padding: var(--space-3); }
    .series__season { font-size: 1.6rem; }
    .series__leaders { padding: var(--space-3); }
  }
}