/* The tournament page's own rules (templates/tournament.html, its deck fragment and the
   tournament not-found page).
   Linked after site.css. On a page where a deck list can open, deck-view.css follows it. */

.tournament-page h1 { max-width: 30ch; margin: 0; font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -.04em; }
.tournament-credit { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; }
.tournament-deck-layout { margin-top: .4rem; }
/* Scripting turns the native disclosures into one list beside one reserved pane. The standings
   are taller than the pane, so the pane adds no page height. */
.js-deck-pane .tournament-deck-layout.has-pane { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 1.4rem 2.2rem; align-items: start; }
/* The tournament's target ring belongs to the shell, which wraps the row and its source
   together; drawing the family's ring here as well nests two gold outlines. */
.tournament-row-shell > .deck-list-source:target { border-radius: 0; outline: none; }
.tournament-list-column { min-width: 0; }
.tournament-row-shell { border-bottom: 1px solid var(--line); }
.tournament-row-shell:target, .tournament-row-shell:has(> .tournament-row-details:target) { border-radius: .4rem; outline: 2px solid var(--gold); outline-offset: 2px; }
.tournament-row-shell > .deck-list-row { grid-template-columns: 6.6rem minmax(0, 1fr) 1.1rem; gap: .2rem .7rem; width: 100%; padding: .42rem .45rem; }
.tournament-row-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; min-width: 0; }
.tournament-row-place { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tournament-row-place small { color: var(--muted); }
.tournament-row-player { min-width: 0; }
.tournament-row-shell > .deck-list-row .tournament-row-player { overflow: hidden; color: var(--muted); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.tournament-row-player a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tournament-row-archetype { min-width: 0; overflow: hidden; }
/* The pips and the name are one unit: a long name shortens, it never drops below its pips. */
.tournament-row-archetype .archetype-label { flex-wrap: nowrap; max-width: 100%; }
.tournament-row-archetype .archetype-name { min-width: 0; white-space: nowrap; }
.tournament-row-details { border: 0; }
.tournament-row-details > summary { padding: .45rem; color: var(--blue); cursor: pointer; list-style: none; }
.tournament-row-details > summary::-webkit-details-marker, .tournament-tail > summary::-webkit-details-marker { display: none; }
.tournament-row-details[open] > .deck-list-content { padding-top: .35rem; }
/* Scoped on the content's own class, not on the disclosure: `deck-pane.js` moves this node into
   the reserved pane, so a selector rooted at the `<details>` stops matching the moment a reader
   picks a list, which is the state the page ships in. */
.tournament-deck-content { padding-bottom: .3rem; }
.tournament-deck-content > .deck-pane-head > b { font-size: 1.1rem; }
.tournament-row-affordance { color: var(--quiet); font-size: .7rem; text-align: right; white-space: nowrap; }
.tournament-row-shell > .deck-list-row.is-picked .tournament-row-affordance { color: var(--gold); }
.tournament-row-deckless { color: var(--muted); }
.archetype-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.archetype-name { overflow: hidden; text-overflow: ellipsis; }
/* A row with no published list is not a picker, so it keeps three columns of its own: the same
   proportions it had before the pane, on the picker's place track so interleaved rows line up.
   The reserved gutter on its right went with the toggle that used to sit in it. */
.tournament-row-summary { display: grid; grid-template-columns: 6.6rem minmax(11rem, 1.4fr) minmax(8rem, 1fr); gap: .2rem .6rem; align-items: baseline; min-width: 0; padding: .42rem .45rem; cursor: default; }
/* The gutter is always reserved and thin. It comes out of the maindeck measure, so changing to a
   list that needs a scrollbar does not move or re-truncate the card names. */
.tournament-deck-layout .deck-list-pane { min-width: 0; }
.js-deck-pane .tournament-deck-layout .deck-list-pane { position: sticky; top: 1rem; max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; }
.js-deck-pane .tournament-row-details { display: none; }
.tournament-deck-layout .deck-list-pane .deck-body { gap: 0 1rem; padding: .4rem 0 1rem 2.2rem; }
.tournament-deck-layout .deck-list-pane .deck-cols { columns: 1; }
.field-seg.is-picked { outline: 2px solid var(--gold); outline-offset: -3px; }
.bracket-player.is-picked { outline: 1px solid var(--gold); outline-offset: 1px; }
.tournament-tail > summary { padding: .6rem .35rem; color: var(--blue); cursor: pointer; list-style: none; }
.tournament-disclosure-panel { margin-top: 1.25rem; }
.tournament-page > .promo-728 { margin-top: 1.5rem; }
.playoff-section { margin-top: 2rem; }
.bracket-visual { position: relative; display: grid; grid-template-columns: 30fr 5fr 30fr 5fr 30fr; grid-template-rows: repeat(4, minmax(3.4rem, 1fr)); gap: 0; min-width: 54rem; margin-top: .4rem; overflow-x: auto; }
.bracket-round { display: contents; }
.bracket-round h3 { display: none; margin: 0; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bracket-round-quarterfinals .bracket-match-qf-0 { grid-column: 1; grid-row: 1; }
.bracket-round-quarterfinals .bracket-match-qf-1 { grid-column: 1; grid-row: 2; }
.bracket-round-quarterfinals .bracket-match-qf-2 { grid-column: 1; grid-row: 3; }
.bracket-round-quarterfinals .bracket-match-qf-3 { grid-column: 1; grid-row: 4; }
.bracket-round-semifinals .bracket-match-sf-0 { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.bracket-round-semifinals .bracket-match-sf-1 { grid-column: 3; grid-row: 3 / span 2; align-self: center; }
.bracket-round-final .bracket-match-final, .bracket-round-final .bracket-champion-only { grid-column: 5; grid-row: 1 / -1; align-self: center; }
.bracket-match, .bracket-champion-only { position: relative; z-index: 1; min-width: 0; align-self: center; }
.bracket-match { margin-block: .3rem; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: .55rem; box-shadow: var(--shadow); }
.bracket-match-empty { background: transparent; border-style: dashed; }
.bracket-slot { min-width: 0; }
.bracket-slot-right { border-top: 1px solid var(--line); }
.bracket-match-empty .bracket-slot-right { border-top-style: dashed; }
.bracket-player { display: flex; gap: .45rem; align-items: baseline; min-width: 0; padding: .4rem .6rem; color: var(--text); text-decoration: none; }
.bracket-player:hover { color: var(--blue); }
.bracket-player-winner { box-shadow: inset 3px 0 var(--gold); }
.bracket-match-final .bracket-player-winner { background: linear-gradient(90deg, rgb(224 180 88 / 14%), transparent); }
.bracket-player-winner .bracket-score { color: var(--gold); }
.bracket-player:not(.bracket-player-winner, .bracket-player-champion) .bracket-player-name { color: var(--muted); font-weight: 500; }
.bracket-player-champion { background: color-mix(in srgb, var(--gold) 10%, var(--panel-strong)); box-shadow: inset 3px 0 var(--gold); }
.bracket-player-name { overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.bracket-player .archetype-label { flex: 1; flex-wrap: nowrap; min-width: 0; overflow: hidden; color: var(--muted); font-size: .76rem; white-space: nowrap; }
.bracket-player .archetype-name { overflow: hidden; text-overflow: ellipsis; }
.bracket-player .color-identity { min-height: 0; gap: .2rem; }
.bracket-player .color-pip { width: .95rem; height: .95rem; }
.bracket-art-chip { order: -1; flex: none; width: 1.25rem; height: 1.25rem; align-self: center; object-fit: cover; border: 1px solid var(--line); border-radius: .3rem; }
.bracket-art-missing { display: grid; place-items: center; color: var(--muted); font-size: .8rem; font-weight: 700; border-style: dashed; }
.bracket-score { margin-left: auto; color: var(--muted); font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bracket-empty { display: block; padding: .4rem .6rem; color: var(--muted); font-size: .78rem; font-style: italic; }
.bracket-match > .bracket-note { display: block; padding: .35rem .6rem; color: var(--muted); font-size: .68rem; text-transform: uppercase; border-top: 1px solid var(--line); }
.bracket-connectors { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: var(--line); stroke-width: 1.5; }
.bracket-connector-dashed { stroke-dasharray: 2 2; stroke: var(--muted); }
.bracket-champion-only { display: grid; gap: .55rem; align-content: center; width: 100%; }
.bracket-champion-only .bracket-player { padding: .65rem; background: var(--panel-strong); border: 1px solid var(--gold); border-radius: .4rem; }
.bracket-champion-only .bracket-note { position: static; margin: 0; color: var(--muted); font-size: .68rem; }
.bracket-ranked-list { display: grid; gap: .35rem; margin: .85rem 0 0; padding-left: 1.5rem; }
.bracket-ranked-list li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .6rem; align-items: baseline; }
.bracket-ranked-place, .bracket-ranked-record { color: var(--muted); font-variant-numeric: tabular-nums; }
.bracket-narrative-round h4 { margin: 0 0 .45rem; color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.bracket-narrative-round ol { display: grid; gap: .45rem; margin: 0; padding-left: 1.2rem; }
.bracket-narrative-round li { color: var(--text); font-size: .84rem; }
.bracket-narrative-outcome { margin: 0 .25rem; color: var(--muted); font-size: .72rem; }
.bracket-narrative-score { margin-left: .25rem; color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.bracket-narrative-round small { display: block; margin-top: .2rem; color: var(--muted); font-size: .72rem; }
/* The tree has a 54rem floor, so it drags sideways inside its own box rather than pushing the
   page wide. */
.bracket-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }

/* ---- redesign ticket 10: the field of one event (efforts/redesign/issues/10-build-tournament.md)
   One bar, one segment per published list, blocks ordered by size. Share is the only quantity a
   single event can measure, so share is the only quantity the picture draws. A block's length is
   its list count, which is a function of the request, so it arrives as `--block-lists` in the
   response's nonced <style>, scoped to the bar's own id. */

.field-section { margin-top: 2rem; }
.field-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
/* `flex-basis: 0` makes the grow factor the exact share. The per-segment floor is what keeps a
   one-list block clickable on a 60-list event: past that the bar drags sideways in its own box. */
.field-bar { display: flex; height: 7rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.field-block { position: relative; flex: var(--block-lists, 1) 1 0; display: flex; min-width: calc(var(--block-lists, 1) * .55rem); overflow: hidden; background: var(--panel-strong); }
.field-block + .field-block { border-left: 2px solid var(--bg); }
.field-block:first-child { border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }
.field-block:last-child { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; }
/* Blocks are ordered by size, so one wider gap is enough to say where the one-list run starts.
   Without it a two-list block and a one-list block are both anonymous slivers. The gap replaces
   the hairline rather than sitting beside it. */
.field-block.is-edge { margin-left: 1.1rem; border-left: 0; border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }
/* Art runs out long before archetypes do (10 of 18 on one 2025 event). The block keeps its width
   on a hatched ground, because that is the page showing the hole rather than hiding it. */
.field-block.is-blank { background: repeating-linear-gradient(135deg, #22283400 0 5px, #1b202b 5px 10px), var(--panel-strong); }
.field-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.field-scrim { position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(to top, #05060af2 0%, #05060ab8 50%, #05060a00 100%); pointer-events: none; }
.field-seg { position: relative; flex: 1 1 0; min-width: 0; }
.field-seg + .field-seg { border-left: 1px solid rgb(5 6 10 / 45%); }
.field-seg:hover { background: rgb(255 255 255 / 14%); }
.field-seg:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.field-seg.is-champion { box-shadow: inset 0 -3px var(--gold); }
.field-label { position: absolute; inset: auto 0 0 0; padding: .5rem .55rem; pointer-events: none; }
.field-label b { display: block; overflow: hidden; color: #fff; font-size: .8rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.field-label span { display: block; margin-top: .05rem; color: #c9d0e0; font-size: .72rem; font-variant-numeric: tabular-nums; }
/* Under a tenth of the field there is no width to print a name in. The tooltip and the row below
   still carry it, so nothing is lost by dropping the label here. */
.field-block.is-narrow .field-label { display: none; }
/* Both keys under a picture read the same way: short items on one wrapped line, quiet. */
/* A paper event's field (paperbuild 12): only the archetypes with 3% of the lists or more keep a
   block, and Other sits after the gap at a fixed width, not to scale. Above 200 lists a block is
   one link that filters the standings, so it needs no width per list. */
.field-bar.is-blocks .field-block { min-width: 2.2rem; }
.field-bar.is-cut .field-block.is-other { flex: 0 0 8.5rem; min-width: 0; background: repeating-linear-gradient(135deg, #22283400 0 3px, #2a3040 3px 6px), var(--panel); }
.field-block-link { position: relative; z-index: 2; flex: 1 1 auto; display: block; }
.field-block-link:hover { background: rgb(255 255 255 / 14%); }
.field-block-link:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.field-block-link[aria-current] { box-shadow: inset 0 0 0 2px var(--text); }
/* The picked block stays bright and the rest dim, under a scrim rather than an opacity, so a
   winner's gold underline stays gold on a dimmed block. */
.field-block.is-dim::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(5 6 10 / 62%); pointer-events: none; }
.field-block.has-champion::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: 3; height: 3px; background: var(--gold); pointer-events: none; }
.field-bar.is-cut .field-seg.is-champion { z-index: 2; }
/* The standings filter: one quiet strip above the rows and as wide as them. A small label sits
   over each compact field, so the strip reads the same with one field or two. A phone gives the
   archetype its own line. */
.standings-filter { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; align-items: end; gap: .55rem .6rem; margin: 0 0 .85rem; padding: .6rem .7rem .7rem; background: var(--panel); border: 1px solid var(--line); border-radius: .6rem; }
.standings-filter:not(:has(.is-archetype)) { grid-template-columns: minmax(0, 1fr) auto; }
.standings-filter-field { display: grid; gap: .28rem; min-width: 0; }
.standings-filter-field > label { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.standings-filter select, .standings-filter input { width: 100%; height: 2.3rem; padding: 0 .65rem; font-size: .9rem; background: var(--panel-strong); border-radius: .45rem; }
.standings-filter button { height: 2.3rem; padding: 0 1.05rem; font-size: .88rem; border-radius: .45rem; }
/* Its own line under the fields, so a filtered page never squeezes the archetype it names. */
.standings-filter-reset { grid-column: 1 / -1; margin: 0; font-size: .85rem; }
/* With scripting the filter applies as the reader picks or types, so the button goes. */
.standings-filter.is-live { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.standings-filter.is-live:not(:has(.is-archetype)) { grid-template-columns: minmax(0, 1fr); }
.standings-filter.is-live > button[type="submit"] { display: none; }
/* A filtered table opens the fold, and its summary would only say rows are folded. */
.standings-results.is-filtered .tournament-tail > summary { display: none; }
.standings-results[aria-busy="true"] { opacity: .6; transition: opacity .15s .1s; }
.standings-results:focus { outline: none; }
/* The archetype picker: the select drawn as a field that opens a list. Each archetype carries its
   share of the lists on the right, in the style of the header search panel. */
.arch-picker { position: relative; min-width: 0; }
.standings-filter .arch-picker-button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: 0 .65rem; color: var(--text); font-weight: 600; text-align: left; background: var(--panel-strong); border: 1px solid var(--line); }
.arch-picker-button::after { content: ""; flex: none; width: .45rem; height: .45rem; margin: 0 .1rem; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-.15rem) rotate(45deg); }
.arch-picker-button[aria-expanded="true"]::after { transform: translateY(.1rem) rotate(-135deg); }
.arch-picker-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.arch-picker-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-picker-button > i, .arch-picker-list [role="option"] > i { margin-left: auto; color: var(--muted); font-size: .76rem; font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arch-picker-list { position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0; min-width: 100%; width: max-content; max-width: min(28rem, calc(100vw - 2rem)); max-height: min(24rem, 60vh); overflow-y: auto; padding-bottom: .3rem; background: var(--panel-strong); border: 1px solid var(--line); border-radius: .55rem; box-shadow: var(--shadow); }
.arch-picker-list:focus { outline: none; }
.arch-picker-heading { margin: 0; padding: .6rem .85rem .2rem; color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
[role="group"] > .arch-picker-heading { margin-top: .3rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.arch-picker-list [role="option"] { display: flex; align-items: baseline; gap: 1.2rem; padding: .4rem .85rem; color: var(--text); font-size: .88rem; cursor: pointer; }
.arch-picker-list [role="option"] > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-picker-list [role="option"][aria-selected="true"] { color: var(--gold); font-weight: 700; }
.arch-picker-list [role="option"].is-active { color: #18150d; background: var(--gold); }
.arch-picker-list [role="option"].is-active > i { color: #3a3018; }
.tournament-standings [hidden] { display: none; }
.standings-empty { margin: .4rem 0 0; color: var(--muted); }
.standings-pager { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; margin: .8rem 0; color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.standings-pager > span:first-child { margin-right: .4rem; }
.standings-pager b { color: var(--text); }
.deck-pane-empty { margin: .6rem 0; color: var(--muted); }
.field-legend, .mark-key { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; color: var(--quiet); font-size: .78rem; }
.field-legend { margin: .75rem 0 0; }
.field-legend em { font-style: normal; }
.field-key-champion { display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; background: var(--gold); border-radius: .15rem; vertical-align: -1px; }

/* The event as one list of record: every player, in order, with the published list under the row
   that names it. */
.event-section { margin-top: 2rem; }
/* The two label caveats, printed only where the list actually used one. */
.mark-key { margin: .7rem 0 0; }
.mark-key b { color: var(--muted); font-weight: 800; }
.label-mark { margin-left: .1rem; color: var(--gold); font-size: .78em; cursor: help; }
.tournament-archetype-missing { color: var(--quiet); }

@media screen and (max-width: 62rem) {
  /* The pane becomes the next block after the list. It no longer follows the viewport or owns a
     scrollbar, so the phone has one ordinary page scroll. */
  .js-deck-pane .tournament-deck-layout.has-pane { grid-template-columns: minmax(0, 1fr); }
  .js-deck-pane .tournament-deck-layout .deck-list-pane { position: static; max-height: none; overflow: visible; scrollbar-gutter: auto; }
}

@media screen and (max-width: 900px) {
  .bracket-player .archetype-label { display: none; }
  .bracket-player .bracket-art-chip { width: 1.5rem; height: 1.5rem; }
}

@media screen and (max-width: 640px) {
  /* No block has room for a name on a phone. The select under the bar carries the names. */
  .field-bar.is-cut .field-label { display: none; }
  .field-bar.is-cut .field-block.is-other { flex-basis: 4.5rem; }
  .bracket-visual { display: flex; flex-direction: column; min-width: 0; gap: 1.4rem; overflow-x: visible; }
  .bracket-round { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: auto; grid-column: auto; gap: .7rem; padding: 0; }
  .bracket-round h3 { display: block; }
  .bracket-round .bracket-match, .bracket-round .bracket-champion-only { grid-column: auto; grid-row: auto; align-self: stretch; }
  .bracket-match { margin-block: 0; }
  .bracket-connectors { display: none; }
  .tournament-row-shell > .deck-list-row { grid-template-columns: 5.4rem minmax(0, 1fr) 1.1rem; }
  .tournament-deck-layout .deck-list-pane .deck-body { display: block; padding-left: .35rem; }
  .tournament-row-summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "place archetype" "player player"; align-items: baseline; }
  .tournament-row-summary > .tournament-row-place { grid-area: place; }
  .tournament-row-summary > .tournament-row-archetype { grid-area: archetype; justify-self: end; }
  .tournament-row-summary > .tournament-row-player { grid-area: player; }
  .tournament-row-affordance { display: inline-block; }
  .standings-filter { grid-template-columns: minmax(0, 1fr) auto; }
  .standings-filter.is-live { grid-template-columns: minmax(0, 1fr); }
  .arch-picker-list { width: 100%; max-width: none; }
  /* A phone has no room for a name beside an archetype, so every row puts the player on a line
     of its own, not only the rows whose names happen to be long. */
  .tournament-row-main { flex-direction: column; align-items: stretch; gap: .1rem; }
  .standings-filter > .is-archetype { grid-column: 1 / -1; }
  /* A shorter bar on the phone. The blocks keep their per-segment floor, so a wide field drags
     sideways inside `.field-scroll` and the page itself never does. */
  .field-bar { height: 5.5rem; }
}

/* ---- redesign ticket 06: the home page (efforts/redesign/issues/06-build-home.md) ------------
   The scouting band over one band per format. The band is a strip of art whose three crops are
   sized against each other rather than against the format — Modern's three biggest decks are
   under a quarter of it, and three slivers beside a hatched wall is not a picture. The width is
   only the shape: the number printed on each crop is the real share, and it arrives as
   `--crop-flex` in the response's nonced <style>, scoped to that strip's own id. */


/* The tournament page's "Recent <format> events" section (moreevents ticket 02) reuses the
   homepage band's head and table as they are. Only the heading differs: it is the page's own
   `h2.section-head`, whose stand-alone margins would push the link out off its baseline inside the
   flex head, so the section carries the spacing instead: the 2.75rem the heading's own top margin
   gives every other section here. */
.recent-format-events { margin-top: 2.75rem; }
.recent-format-events .section-head { margin: 0; }