/* ===========================================================================
   THE BEAUTIFUL GAMES, Full Time archive
   The post-tournament state: six stacked surfaces on the same cream paper and
   poster palette as the live guide. Nothing here is live. All tokens (--paper,
   --ink, --subway, --shadow, the type roles) come from styles.css :root.
   ========================================================================== */

/* the archive freezes the hero to the champion's kit (set by the inline head
   script from FINAL.championKit), so the live kit-shuffle vars are unused here. */
.fta-hero{position:relative;overflow:hidden;border-bottom:3px solid var(--ink);
  background:var(--kit)}
.fta-hero-deco{position:absolute;right:-38px;top:-46px;color:var(--kit-ball-ink);
  opacity:.9;pointer-events:none;z-index:0;width:380px;height:250px}
.fta-hero-deco svg{width:100%;height:100%;display:block;--bg-ball-face:var(--kit-ball-face)}
@media (max-width:820px){ .fta-hero-deco{display:none} }
.fta-hero-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:38px 22px 40px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);
  gap:40px;align-items:end}
@media (max-width:820px){ .fta-hero-inner{grid-template-columns:1fr;gap:28px} }

/* The champion lockup IS the hero's h1. The masthead used to stack a Full Time
   pill, the wordmark and a subhead above it, all of which the site header at the
   top of the page already says: four things competing before the one that
   matters. Now the page opens on who won. */
.fta-champline{margin:0 0 30px;font-weight:400}
/* the gold band: the title stated outright, on the one colour the page reserves
   for the trophy. Sits above the name so the lockup reads award-then-winner. */
.fta-champband{display:inline-flex;align-items:center;gap:11px;background:var(--taxi);
  color:var(--ink);border:3px solid var(--ink);border-radius:40px;padding:8px 20px 8px 15px;
  box-shadow:var(--shadow-sm);margin-bottom:20px;font-weight:800;text-transform:uppercase;
  letter-spacing:.13em;font-size:clamp(12px,1.35vw,15px)}
.fta-champname{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* Flags are emoji, not colour boxes: no border or background to draw, just a
   glyph. This one is the hero's only flag, so it is not width-locked the way the
   stamp and bracket flags are (those keep names in a column). */
.fta-swatch{font-size:clamp(34px,4.4vw,46px);line-height:1;flex:none}
/* the page's headline now, so it takes the scale the wordmark used to */
.fta-champline .name{font-family:var(--font-display);font-size:clamp(52px,8.2vw,86px);
  color:var(--paper);letter-spacing:.02em;line-height:.88}
/* Hero rhythm. The band, the name and the lede were spaced 12 / 22 / 20, so the
   tightest gap on the page sat between the two largest elements while the
   buttons below carried 22px of their own padding on top of a 20px gap: the top
   of the hero read cramped against a roomy bottom. Now 20 / 30 / 26, opening up
   as it descends, with the band and name still closer to each other than to the
   body because they are one lockup. */
.fta-hero-lede{max-width:540px;font-size:18px;line-height:1.55;color:var(--kit-lede);margin:0 0 26px}
.fta-hero-cta{display:flex;flex-wrap:wrap;gap:14px}

/* result stamp */
.fta-stamp{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow);padding:20px 22px 18px}
.fta-stamp-head{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-soft);margin-bottom:14px;border-bottom:2px dotted var(--ink-soft);padding-bottom:10px}
.fta-stamp-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.fta-stamp-row:last-of-type{margin-bottom:0}
.fta-stamp-sw{font-size:23px;line-height:1;width:30px;flex:none;text-align:center}
.fta-stamp-name{flex:1;font-weight:800;font-size:20px;color:var(--ink);min-width:0}
.fta-stamp-goals{font-family:var(--font-display);font-size:34px;line-height:.8}
.fta-stamp-goals.win{color:var(--subway)}
.fta-stamp-goals.lose{color:var(--ink-soft)}
.fta-stamp-ft{display:flex;justify-content:flex-end;margin-top:4px}
.fta-stamp-ft span{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cup)}

/* the green highlighter swipe, one shared treatment (winning names everywhere) */
.fta-hl{background-image:linear-gradient(transparent 56%, color-mix(in srgb, var(--subway) 42%, transparent) 56% 92%, transparent 92%);
  background-size:100% 1lh;background-repeat:repeat-y;padding:0 3px}

/* ticker: the final result, running on the live guide's own marquee. The 38s
   loop and the duplicated-track trick come from .marquee-track in styles.css;
   this only supplies the band and the type. */
.fta-ticker{background:var(--ink);color:var(--paper);border-bottom:3px solid var(--ink);overflow:hidden}
.fta-ticker .ftk-ft{font-family:var(--font-display);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--taxi)}
.fta-ticker .sep{opacity:.35;padding:0 15px}
.fta-ticker b{color:var(--taxi);font-weight:700;padding:0 2px}
/* a loop that never stops is exactly what this setting is for */
@media (prefers-reduced-motion:reduce){.fta-ticker .marquee-track{animation:none}}

.fta-kicker{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  color:var(--postal);margin-bottom:14px}

/* shared section shell */
.fta-section{padding:66px 0}
.fta-section.band{background:var(--paper-2);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.fta-wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.fta-wrap.narrow{max-width:920px}
.fta-wrap.bracketw{max-width:760px}
/* Every section head is a kicker and a heading now, nothing else: the standfirst
   paragraphs were restating what the kicker and the heading already said. The
   heading's old 12px bottom margin existed to clear that paragraph, so it goes
   with it rather than leaving dead space under every heading on the page. */
.fta-head{max-width:720px;margin:0 0 34px}
.fta-head h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(32px,5.4vw,54px);letter-spacing:.01em;margin:0;line-height:1}

/* ---- storyline resolution cards ---- */
/* Filter bar. Reuses .theme-nav-pill from styles.css (the live storyline nav)
   so the archive and the guide read as one site; unlike that bar this one wraps
   instead of scrolling, because it sits in a page column, not a sticky toolbar. */
.fta-res-nav{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px}
.fta-res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
/* Show more. The grid opens on two rows: 53 cards is too long a scroll to meet
   cold. [hidden] on the wrapper is set by archive.js when nothing is left. */
.fta-res-more-wrap{display:flex;justify-content:center;margin-top:28px}
.fta-res-more-wrap[hidden]{display:none}
.fta-res-more{font-family:inherit;font-weight:800;font-size:14px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--paper);background:var(--ink);border:3px solid var(--ink);
  border-radius:30px;padding:13px 30px;cursor:pointer;box-shadow:var(--shadow);
  transition:background .12s ease,color .12s ease}
.fta-res-more:hover{background:var(--paper);color:var(--ink)}
.fta-res{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column}
/* display:flex above outranks the UA's [hidden]{display:none}, so the filter's
   hidden cards would still occupy the grid without this. */
.fta-res[hidden]{display:none}
.fta-res-tag{align-self:flex-start;color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;padding:5px 12px;border-radius:30px;margin-bottom:15px}
.fta-res h3{font-family:var(--font-editorial);font-size:26px;line-height:1.04;margin:0 0 12px;color:var(--ink)}
.fta-res-who{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-soft);margin-bottom:14px}
/* The card body is now pulled from the live STORYLINES/THEMES card, and those
   run from 147 to 1611 characters, so it is clamped to keep 53 cards in a
   readable grid. The closing line below is never clamped: it is the whole
   reason the card is here. */
/* Context, not the point: the body recedes so the closing line can land. */
.fta-res-body{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
/* expanded by the card's own Read more, so a clamped body is never a dead end */
.fta-res.is-open .fta-res-body{-webkit-line-clamp:unset;overflow:visible}
.fta-res-expand{align-self:flex-start;font-family:inherit;font-weight:800;font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--postal);background:none;border:0;
  padding:0 0 16px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fta-res-expand[hidden]{display:none}
.fta-res-expand:hover{color:var(--ink)}
/* The payoff. This is the only thing the archive adds to the live card, so it is
   the loudest element after the headline: bigger than the body above it, in full
   ink, under the card's one divider. It used to be SMALLER than the body it was
   supposed to conclude. */
.fta-res-foot{border-bottom:2px dotted var(--ink-soft);padding-bottom:16px;margin-bottom:15px}
.fta-res-foot .rlabel{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  color:var(--postal);margin-bottom:7px}
.fta-res-foot p{margin:0;font-size:16.5px;line-height:1.45;color:var(--ink);font-weight:500}

/* ---- rewatch shelf ---- */
.fta-rw-list{display:flex;flex-direction:column;gap:14px}
.fta-rw{display:flex;gap:18px;align-items:flex-start;background:var(--paper);
  border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:18px 20px}
.fta-rw-rank{font-family:var(--font-display);font-size:54px;line-height:.72;color:var(--cup);
  flex:none;width:42px;text-align:center}
.fta-rw-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.fta-rw-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fta-rw-round{background:var(--ink);color:var(--paper);font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px;flex:none}
/* FIX (design review): pin each team-and-score so a scoreline can never wrap
   onto its own line and read like a stray footnote. Each "Team N" is one nowrap
   unit; the whole score group stays together. */
.fta-rw-score{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px;
  font-weight:800;font-size:16px;color:var(--ink)}
.fta-rw-side{white-space:nowrap}
/* listing metadata, not a headline: the scoreline beside it is the loud thing.
   margin-left:auto parks it on the right of the meta row on a wide card and
   lets it drop to its own line when the row wraps. */
.fta-rw-aired{margin-left:auto;white-space:nowrap;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft)}
.fta-rw-method{font-size:12px;font-weight:800;color:var(--cup);text-transform:uppercase;letter-spacing:.03em}
.fta-rw-reason{margin:0;font-family:var(--font-editorial);font-size:17px;line-height:1.32;color:var(--ink)}

/* ---- ledger ---- */
.fta-ledger-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.fta-led{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:20px 22px;display:flex;flex-direction:column;gap:9px}
.fta-led .llabel{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.fta-led-big{display:flex;align-items:baseline;gap:9px}
.fta-led-big b{font-family:var(--font-display);font-weight:400;font-size:56px;line-height:.8;color:var(--ink)}
.fta-led-big span{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.fta-led-name{font-family:var(--font-editorial);font-size:19px;line-height:1.1;color:var(--ink)}
.fta-led p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
/* provenance, at the bottom edge of the card and at footnote scale: outlet name
   only. Colour arrives on hover, so the citation never competes with the number
   it is backing. Cards with no line are derived from the snapshot. */
.fta-led-src{margin-top:auto;padding-top:13px;display:flex;flex-wrap:wrap;gap:12px}
.fta-led-srclink{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-soft);opacity:.75;text-decoration:none;border-bottom:1px solid transparent}
.fta-led-srclink:hover{color:var(--cup);border-bottom-color:var(--cup);opacity:1}

/* ---- champion's-path bracket ---- */
.fta-tie-row{display:grid;grid-template-columns:74px minmax(0,1fr)}
.fta-spine{position:relative;display:flex;justify-content:center}
.fta-spine-line{position:absolute;top:0;bottom:0;width:6px;border-radius:3px;background:var(--subway)}
.fta-spine-line.cap-top{top:26px;bottom:0}
.fta-spine-line.cap-bot{top:0;height:26px}
.fta-node{position:relative;z-index:1;margin-top:16px;width:50px;height:50px;border-radius:50%;
  background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:14px;color:var(--ink);letter-spacing:.02em}
.fta-node.is-final{background:var(--taxi)}
.fta-tie-col{padding:0 0 20px 20px}
.fta-cap{padding:0 0 8px 20px}
.fta-cap span{font-family:var(--font-display);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)}
.fta-tie{width:100%;text-align:left;cursor:pointer;font-family:var(--font-body);
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);
  padding:18px 20px;display:flex;flex-direction:column;gap:14px;
  transition:transform .1s ease, box-shadow .1s ease}
.fta-tie:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.fta-tie-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.fta-tie-round{font-family:var(--font-display);font-size:16px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.fta-tie-window{font-size:12px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.fta-tie-teams{display:flex;flex-direction:column;gap:10px}
.fta-tie-team{display:flex;align-items:center;gap:11px}
.fta-tie-sw{font-size:23px;line-height:1;width:30px;flex:none;text-align:center}
.fta-tie-name{flex:1;min-width:0;font-weight:800;font-size:19px;color:var(--ink)}
.fta-tie-score{font-family:var(--font-display);font-size:28px;line-height:.8}
.fta-tie-score.win{color:var(--subway)}
.fta-tie-score.lose{color:var(--ink-soft)}
.fta-tie-detail{border-top:2px dotted var(--ink-soft);padding-top:13px;display:flex;flex-direction:column;gap:8px}
.fta-tie-method{font-family:var(--font-display);font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--cup)}
.fta-tie-recap{margin:0;font-family:var(--font-editorial);font-size:17px;line-height:1.32;color:var(--ink)}
.fta-tie-venue{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.fta-tie-hint{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cup)}
.fta-champ-cap{padding:8px 0 0 20px;display:flex;flex-direction:column;justify-content:center}
.fta-champ-cap .lab{font-family:var(--font-display);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--subway)}
.fta-champ-cap .name{font-family:var(--font-display);font-size:clamp(28px,4vw,40px);
  letter-spacing:.02em;color:var(--ink);line-height:1}
/* The champion node was green with color:#fff, and the Echo ball's face defaults
   to #fff too, so the panels were white on white: the mark vanished and the node
   read as a blank disc on a stem. Gold face with navy panels makes the mark
   legible, and gold outranks the final's node instead of stepping down from it.
   Biggest node on the spine, because it is the last one. */
.fta-node.champ{margin-top:12px;width:68px;height:68px;background:var(--taxi);
  color:var(--ink);--bg-ball-face:var(--taxi)}
.fta-node.champ svg{width:40px;height:40px}
.fta-champ-cap{padding-top:14px}
/* the starburst: the spine ends in a burst rather than a dot. Rays are drawn
   behind the node's own background, inside the stacking context the node's
   z-index already creates, so nothing else on the page is affected. */
/* masked so the rays fade outward instead of ending on a hard circular edge,
   which reads as a cog rather than a burst, and so they thin out before they
   reach the caption beside the spine. */
.fta-node.champ::before{content:"";position:absolute;inset:-26px;z-index:-1;
  background:repeating-conic-gradient(var(--taxi) 0 5deg, transparent 5deg 20deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 40%,transparent 100%)}
@media (prefers-reduced-motion:no-preference){
  .fta-node.champ::before{animation:fta-burst 26s linear infinite}
}
@keyframes fta-burst{to{transform:rotate(360deg)}}

/* colophon */
.fta-colophon{background:var(--ink);color:var(--paper);padding:48px 0}
.fta-colophon-inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:flex;flex-direction:column;gap:16px}
.fta-colophon-brand{display:flex;align-items:center;gap:12px;color:var(--paper)}
.fta-colophon-brand .echo-mark{width:58px;height:38px}
.fta-colophon-brand strong{font-family:var(--font-display);font-weight:400;letter-spacing:.04em;font-size:20px}
.fta-colophon p{font-size:14px;line-height:1.6;color:rgba(244,233,207,.82);max-width:760px;margin:0}
.fta-colophon p a{color:var(--taxi)}
.fta-colophon .signoff{font-family:var(--font-editorial);font-size:22px;margin:6px 0 0;color:var(--paper)}

@media (max-width:520px){
  .fta-section{padding:52px 0}
  .fta-rw-rank{font-size:44px;width:34px}
  /* the meta row wraps here, so the date lands on its own line: pushed right by
     margin-left:auto it would sit alone against the right edge, which reads as a
     stray rather than a caption. */
  .fta-rw-aired{margin-left:0}
}

/* Filters row: the team picker (.country-pick, from styles.css, same control the
   live storylines view used) sits beside the register pills. */
.fta-res-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 26px}
.fta-res-filters .fta-res-nav{margin:0}
.theme-nav-pill[hidden]{display:none}
/* Sources. Every storyline and theme carries them and the live card showed them;
   the archive should not be the one surface that drops its provenance. */
/* Sources are a footnote, so they get footnote weight: no divider of their own
   (one rule per card, above the payoff), no accent colour and no bold. The live
   card's .src-title is 13.5px bold in --cup, which made the least important text
   on the card the boldest and the only coloured thing in the stack. Colour comes
   back on hover, where it means "this is a link" rather than "read me first". */
/* margin-top:auto now lives here: with the payoff moved to the top, the body is
   the slack, and the footnote sits on the bottom edge of every card in a row. */
.fta-res-src{margin-top:auto;padding-top:15px;display:flex;flex-direction:column;gap:4px}
/* one line per source: the titles are long and near-identical ("Spain 1-0
   Argentina (Jul 19, 2026) Final Score"), so they ellipsise rather than wrapping
   a footnote onto six lines. Full title stays in the link's own tooltip. */
.fta-res-src .src-link{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fta-res-src-label{font-size:9px;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-soft);opacity:.7;margin-bottom:2px}
.fta-res-src .src-title{color:var(--ink-soft);font-weight:500;font-size:11.5px;border-bottom:0}
.fta-res-src .src-from{margin-left:6px;font-size:9px;font-weight:700;opacity:.65}
.fta-res-src .src-link:hover .src-title{color:var(--cup);border-bottom:1px solid var(--cup)}