/* Sportaurus — design system.
   ---------------------------------------------------------------------------
   Measured off Sky Sports, Sofascore and formula1.com on 2026-09-02; the numbers
   below are theirs, the values are ours. What was taken:

     · container 1329, dividing into 2/3/4 columns at gap 16/24        (F1)
     · three card weights — 642x486 / 314x240 / text+thumb            (F1)
     · score row 48 high, time cell 72, team lines 16, unchanged
       between desktop and 390                                        (Sofascore)
     · matches grouped under the competition, never under the clock   (Sofascore)
     · radius only 0 and 8; shadows nowhere at all                    (all three)
     · root 18px, dropping to 16.1 on mobile — the whole scale rides
       the root rather than a stack of breakpoints                    (Sky)
     · the only motion in this category is a score changing: Sky ships
       zero transition rules and spends four of its ten keyframe sets
       on hiding / revealing / emphasising a score                    (Sky, F1)

   What was deliberately not taken: their colour. All three land on blue-black or
   navy with one hot accent, and so does every other scores site; copying it is how
   you end up looking like everyone. The roles are theirs, the values are ours —
   a warm near-black ground instead of a blue one, and the accent spent in exactly
   two places, live state and the primary action. */

/* ------------------------------------------------------------------- tokens */
:root{
  /* ground — warm near-black, not the blue-black of the category */
  --ground:#14110B;
  --ground-lift:#211C13;
  --ground-hair:rgba(255,255,255,.14);
  --on-ground:#FBFAF7;
  --on-ground-2:rgba(251,250,247,.62);

  /* page */
  --page:#FFFFFF;
  --page-2:#F4F2ED;
  --ink:#14110B;
  --ink-2:#4A443A;
  --muted:#7A7263;
  --hair:#E3DFD6;

  /* signal: live state and the primary action, and nothing else */
  --signal:#E03A11;
  --signal-soft:#FDEDE8;
  /* one semantic colour, used only to mark a champion in an archive table */
  --gold:#A97F1E;

  /* radius: two values and zero. F1 puts 8 on media, everything else is square */
  --r:8px;
  --r-chip:999px;

  /* geometry */
  --shell:1329px;          /* F1's container */
  --gut:clamp(16px,3.2vw,32px);
  --col-gap:24px;
  --col-gap-tight:16px;

  /* motion, by role — a single curve everywhere is the cheap tell */
  --t-state:.15s cubic-bezier(.4,0,.2,1);
  --t-control:.2s cubic-bezier(.4,0,.2,1);
  --t-layout:.25s cubic-bezier(0,0,.2,1);

  --sans:Archivo,'Helvetica Neue',Arial,sans-serif;
}

/* Width is the second axis of the one family we ship. Sky buys a separate face
   per sport and F1 buys a second font just for digits; the width axis does that
   work here out of a single file. */
.u-wide{font-stretch:112%}
.u-narrow{font-stretch:78%}

/* --------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{
  font-size:18px;               /* Sky's root; the whole scale rides it */
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (max-width:820px){ html{font-size:16.1px} }   /* Sky's own mobile ratio, x.895 */
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;background:var(--page);color:var(--ink);
  font:400 1rem/1.45 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.1}
ol,ul,dl,dd{margin:0;padding:0;list-style:none}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}

/* Scores are the one thing on this site that must never reflow while updating. */
.num,.score,td.n,th.n{font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.skiplink{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ground);color:var(--on-ground);padding:.7rem 1rem}
.skiplink:focus{left:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--gut)}

/* Small shared helpers that the page blocks below still name. */
.label{
  font:700 .63rem/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.dim{color:var(--muted)}
.ok{color:#2C6B4F;font-weight:600}
.bad{color:var(--signal);font-weight:600}
.mark{width:22px;height:22px;object-fit:contain;flex:0 0 auto}
/* The mark of a SPORT, as opposed to the crest of a club: drawn rather than fetched,
   so it takes its colour from the text it stands beside and follows it into the dark
   modules. Sized in px on purpose — it is a picture, not type, and should not grow
   with the heading next to it. */
.spicon{width:20px;height:20px;flex:0 0 auto;transition:color var(--t-state)}

/* ------------------------------------------------------------------ eyebrow */
/* Sky splits the kicker in two: a solid square badge for the genre, then the
   subject in plain text. Genre and subject never share a treatment. */
.eyebrow{display:flex;align-items:center;gap:.55rem;margin-bottom:.6rem}
.badge{
  display:inline-block;padding:.18em .45em;border-radius:0;
  background:var(--ground);color:var(--on-ground);
  font:700 .61rem/1.25 var(--sans);font-stretch:88%;
  letter-spacing:.1em;text-transform:uppercase;
}
.badge--live{background:var(--signal)}
.badge--sport{background:none;color:var(--muted);padding-left:0}

/* --------------------------------------------------------------------- spine */
/* Masthead, context strip and footer share one warm near-black. Sky runs a navy
   band over a white page and it is the single strongest thing about the site:
   the dark strip tells you where the furniture is and the white tells you where
   the reading is. */
.spine{background:var(--ground);color:var(--on-ground)}

.masthead{
  position:sticky;top:0;z-index:40;
  background:var(--ground);color:var(--on-ground);
}
.masthead__in{
  display:flex;align-items:center;gap:clamp(12px,2.2vw,30px);
  height:64px;
}
.brand{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;margin-right:auto}
.brand__mark{width:30px;height:30px;color:var(--on-ground);flex:0 0 auto}
.brand__word{
  font:800 1.16rem/1 var(--sans);font-stretch:105%;
  letter-spacing:-.03em;text-transform:uppercase;
}
.mastnav{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px)}
.mastnav a{
  font:600 .8rem/1 var(--sans);letter-spacing:-.005em;
  color:var(--on-ground);padding:.5rem 0;position:relative;
}
/* Reuters' 2px rule instead of a plate: one declaration serves hover and current. */
.mastnav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-state);
}
.mastnav a:hover::after,.mastnav a[aria-current]::after{transform:scaleX(1)}

/* ------------------------------------------------------------------- search */
.hunt{display:flex;align-items:center;gap:.5rem;position:relative}
.hunt__field{
  width:100%;height:44px;padding:0 1rem;border-radius:var(--r-chip);
  border:1px solid var(--hair);background:var(--page);color:var(--ink);
  font:400 .88rem/1 var(--sans);
  transition:border-color var(--t-control);
}
.hunt__field::placeholder{color:var(--muted)}
.hunt__field:focus{outline:none;border-color:var(--ink)}
.hunt__go{
  height:44px;padding:0 1.2rem;border-radius:var(--r-chip);flex:0 0 auto;
  background:var(--ink);color:var(--page);font:700 .82rem/1 var(--sans);
  transition:background var(--t-control);
}
.hunt__go:hover{background:var(--signal)}
form.hunt{margin-top:1.3rem;max-width:620px}

/* In the masthead the field sits on the dark spine, so it borrows the ground rather than
   punching a white hole in it. Sofascore does the same: a pill that reads as part of the bar. */
.hunt--mast{flex:0 1 300px;margin-top:0}
.hunt--mast .hunt__field{
  height:34px;font-size:.8rem;background:rgba(255,255,255,.09);
  border-color:transparent;color:var(--on-ground);
}
.hunt--mast .hunt__field::placeholder{color:var(--on-ground-2)}
.hunt--mast .hunt__field:focus{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
/* On a narrow screen the field is more use than the menu, not less: the sport rail below
   already carries the main destinations, while searching 4,000 clubs by scrolling is not a
   thing anyone can do. So the nav gives way to the field rather than the other way round —
   hiding the field below 1100px left a phone with no way to search at all. */
@media (max-width:1100px){
  .mastnav{display:none}
  .hunt--mast{flex:1 1 auto;max-width:none}
}

.hunt__drop{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;
  background:var(--page);border:1px solid var(--hair);border-radius:var(--r);
  overflow:hidden;max-height:70vh;overflow-y:auto;
}
.hunt__hit{
  display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;
  gap:.1rem .6rem;padding:.5rem .7rem;border-bottom:1px solid var(--hair);
}
.hunt__hit:last-child{border-bottom:0}
.hunt__hit:hover,.hunt__hit.is-on{background:var(--page-2)}
.hunt__hit img{width:22px;height:22px;object-fit:contain;grid-row:span 2}
.hunt__hit b{grid-column:2;font:700 .84rem/1.2 var(--sans);letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hunt__hit span{grid-column:2;font:400 .7rem/1.2 var(--sans);color:var(--muted)}
.hunt__hit i{
  grid-column:3;grid-row:1 / span 2;font-style:normal;
  font:600 .68rem/1 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------- sport rail */
/* Sofascore lists five sports and hides twenty-one behind "21 More". Breadth is
   the reason to have a catalogue, not a reason to pour it into the navigation. */
.sportrail{background:var(--ground-lift);color:var(--on-ground)}
.sportrail__in{display:flex;align-items:stretch;gap:2px;height:44px;overflow-x:auto;scrollbar-width:none}
.sportrail__in::-webkit-scrollbar{display:none}
.sportrail a,.sportrail button{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  padding:0 .8rem;color:var(--on-ground-2);
  font:600 .77rem/1 var(--sans);
  transition:color var(--t-state),background var(--t-state);
}
.sportrail a:hover,.sportrail button:hover{color:var(--on-ground);background:rgba(255,255,255,.07)}
.sportrail a[aria-current]{color:var(--ground);background:var(--on-ground)}
.sportrail__more{font-stretch:88%}
.sportrail__count{color:var(--signal);font-weight:700}

/* ------------------------------------------------------------ context strip */
/* F1 runs one dark line naming the round that is on now, and puts MY TIME beside
   TRACK TIME. For a site read from any timezone that is worth more than a strip of
   scores: it answers "what is on" and "is that my clock" in the same line. */
.context{background:var(--ground);color:var(--on-ground);border-top:1px solid var(--ground-hair)}
.context__in{display:flex;align-items:center;gap:1rem;min-height:46px;flex-wrap:wrap}
.context__now{display:flex;align-items:center;gap:.6rem;margin-right:auto;min-width:0}
.context__tag{
  font:700 .63rem/1 var(--sans);font-stretch:88%;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-ground-2);
}
.context__what{font:700 .92rem/1.2 var(--sans);letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.context__clocks{display:flex;align-items:center;gap:1.4rem;flex:0 0 auto}
.clock{display:grid;grid-template-columns:auto auto;column-gap:.5rem;align-items:baseline}
.clock b{
  grid-row:1;font:700 .58rem/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-ground-2);
}
.clock span{grid-row:1;font:700 .95rem/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* At 390 the strip was spending three rows on one line of information: the tag broke in
   two, then the clocks dropped below. One row, the label shortened to a mark, and the
   subject truncated — a context strip that costs a tenth of the screen is not context. */
@media (max-width:820px){
  .context__in{flex-wrap:nowrap;gap:.7rem;min-height:40px}
  .context__tag{display:none}
  .context__what{font-size:.8rem}
  .context__clocks{gap:.8rem}
  /* The labels shrink but stay. Two bare numbers side by side is worse than the wrap was:
     the entire point of the pair is knowing which clock you are looking at. */
  .clock{column-gap:.28rem}
  .clock b{font-size:.5rem;letter-spacing:.09em}
  .clock span{font-size:.82rem}
}
@media (max-width:420px){
  .context__clocks .clock:last-child{display:none}   /* below this, only the reader's own */
}

/* ---------------------------------------------------------------- live dot */
/* F1's LiveDot: a ring that breathes. The only ambient motion on the page. */
.dot{
  width:.5rem;height:.5rem;border-radius:999px;background:var(--signal);
  flex:0 0 auto;position:relative;
}
.dot::after{
  content:'';position:absolute;inset:-3px;border-radius:999px;
  border:1.5px solid var(--signal);
  animation:live-pulse 2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes live-pulse{
  0%  {transform:scale(.7);opacity:.9}
  70% {transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}

/* --------------------------------------------------------------------- hero */
/* The mass on the first screen is the crest wall — several hundred real marks from the
   register, composed into one file. The tint over it has to be directional, not a flat
   50% black: a sheet of black across the whole frame leaves the picture with noise and no
   light, which is exactly how a first version reads cheap. Dense down the left where the
   words sit, and nearly clear over the right where the marks do the work. */
.hero{
  position:relative;overflow:hidden;
  background:var(--ground) var(--wall,none) center/cover no-repeat;
  color:var(--on-ground);
}
@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){
  .hero{background-image:var(--wall2x,var(--wall,none))}
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(20,17,11,.96) 0%,rgba(20,17,11,.92) 30%,rgba(20,17,11,.55) 56%,rgba(20,17,11,.20) 100%),
    linear-gradient(to top,rgba(20,17,11,.82) 0%,rgba(20,17,11,0) 44%);
}
.hero__in{position:relative;z-index:1;padding-top:clamp(3.2rem,7vw,6rem);padding-bottom:clamp(2.4rem,5vw,4rem)}
.hero__eyebrow{
  font:700 .66rem/1 var(--sans);font-stretch:88%;letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal);margin-bottom:1rem;
}
/* Two lines, not three, and set tight. The copy was written to that shape rather than
   the shape stretched to fit the copy. */
.hero__title{
  font:800 clamp(2.6rem,6.4vw,5.2rem)/.9 var(--sans);font-stretch:106%;
  letter-spacing:-.035em;max-width:14ch;
}
.hero__lead{
  margin-top:1.2rem;max-width:46ch;
  font:400 clamp(1rem,1.4vw,1.14rem)/1.5 var(--sans);color:rgba(251,250,247,.82);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.hero .btn{background:var(--signal);color:#fff}
.hero .btn:hover{background:#fff;color:var(--ground)}
.hero .btn--ghost{background:transparent;color:var(--on-ground);border-color:rgba(251,250,247,.4)}
.hero .btn--ghost:hover{background:var(--on-ground);color:var(--ground);border-color:var(--on-ground)}
.hero__figures{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;
  margin-top:clamp(2.2rem,5vw,3.4rem);max-width:760px;
}
.hero__figures dt{
  font:700 .6rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(251,250,247,.6);
}
.hero__figures dd{
  margin:.3rem 0 0;font:800 clamp(1.15rem,2.2vw,1.7rem)/1 var(--sans);
  font-stretch:104%;letter-spacing:-.03em;
}
@media (max-width:640px){
  .hero__figures{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
  .hero__title{max-width:none}
}
/* A tint aimed across the frame does not survive the frame becoming narrow: at 390 the
   text column is the whole width, so a left-to-right wash leaves crests running straight
   through the paragraph. Narrow gets a vertical wash instead — dense under the words,
   clearing at the top where the marks can still be seen. Same trap as cropping: framing
   decisions have to be re-made for the narrow screen, not scaled down to it. */
@media (max-width:820px){
  .hero::before{
    background:
      linear-gradient(to bottom,rgba(20,17,11,.58) 0%,rgba(20,17,11,.88) 26%,rgba(20,17,11,.96) 52%,rgba(20,17,11,.97) 100%);
  }
  .hero__lead{max-width:none}
}

/* ------------------------------------------------------- sports catalogue */
.catalogue{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 var(--col-gap)}
.catalogue a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:.2rem .85rem;
  padding:.85rem 0;border-bottom:1px solid var(--hair);
  transition:color var(--t-state);
}
.catalogue a:hover{color:var(--signal)}
/* The mark spans both rows and centres against them. A glyph has no baseline to share with
   the name and the count, and aligned on theirs it sits low enough to read as a bullet that
   slipped. It is muted at rest so the fourteen names stay the thing being read, and picks up
   the signal on hover along with them. */
.catalogue .spicon{grid-row:1 / span 2;grid-column:1;align-self:center;width:22px;height:22px;color:var(--muted)}
.catalogue a:hover .spicon{color:var(--signal)}
.catalogue b{grid-column:2;font:700 1rem/1.2 var(--sans);letter-spacing:-.02em}
.catalogue span{
  grid-column:2;font:400 .74rem/1.2 var(--sans);color:var(--muted);
}
.catalogue em{
  grid-row:1;grid-column:3;font-style:normal;font-variant-numeric:tabular-nums;
  font:700 .82rem/1 var(--sans);color:var(--ink-2);
}

/* ------------------------------------------------------------- module heads */
/* Sky sets its section head at 36/39.6 in weight 400 and colours it #4A4A4A, not
   black — the proprietary face carries the recognition, so the weight does not
   have to. We have no proprietary face, so the width axis carries it instead. */
.modhead{
  display:flex;align-items:baseline;gap:1rem;
  padding-bottom:.6rem;margin-bottom:1.1rem;
  border-bottom:2px solid var(--ink);
}
.modhead h2{
  font:700 1.55rem/1.1 var(--sans);font-stretch:108%;
  letter-spacing:-.025em;margin-right:auto;
}
.modhead__more{
  font:600 .78rem/1 var(--sans);color:var(--ink-2);white-space:nowrap;
  transition:color var(--t-state);
}
.modhead__more:hover{color:var(--signal)}
.modhead--onDark{border-bottom-color:var(--ground-hair)}
.modhead--onDark h2{color:var(--on-ground)}
.modhead--onDark .modhead__more{color:var(--on-ground-2)}

.module{padding:2.4rem 0}
.module--band{background:var(--page-2)}
.module--dark{background:var(--ground);color:var(--on-ground)}
/* A white panel dropped into a dark band inherits the band's near-white text and goes
   invisible. The telemetry card is the one such panel, and it is the piece of this site
   nobody else has — it cannot be the piece that disappears. */
.module--dark .tele{color:var(--ink)}
.module--dark .tele a{color:var(--ink)}

/* -------------------------------------------------------------------- cards */
/* Three weights on one screen, the way F1 does it. The hierarchy is carried by
   the size of the frame, not by the size of the type: 642x486 with the headline
   laid over the image, 314x240 with the headline under it, and a text row with a
   thumbnail sitting on a hairline. */
.cards{display:grid;gap:var(--col-gap)}
.cards--lead{grid-template-columns:minmax(0,642fr) minmax(0,378fr)}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap-tight)}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap-tight)}
@media (max-width:1000px){
  .cards--lead,.cards--4,.cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cards--lead,.cards--4,.cards--3,.cards--2{grid-template-columns:minmax(0,1fr)}
}

.card{display:flex;flex-direction:column;min-width:0}
.card__pic{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--ground-lift);aspect-ratio:16/9;
}
.card__pic img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-layout)}
.card:hover .card__pic img{transform:scale(1.03)}
.card__title{
  font:700 1rem/1.15 var(--sans);letter-spacing:-.02em;
  margin-top:.6rem;
}
.card:hover .card__title{color:var(--signal)}
.card__meta{margin-top:.35rem;font:400 .72rem/1.3 var(--sans);color:var(--muted)}

/* lead — headline lies over the frame, as on F1 */
.card--lead .card__pic{aspect-ratio:4/3}
.card--lead .card__pic::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,17,11,.92) 0%,rgba(20,17,11,.55) 32%,rgba(20,17,11,0) 62%);
}
.card--lead .card__over{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.4rem;color:var(--on-ground);
}
.card--lead .card__title{
  font-size:1.75rem;line-height:1.06;letter-spacing:-.03em;font-stretch:104%;
  margin-top:0;color:var(--on-ground);
}
.card--lead:hover .card__title{color:var(--on-ground)}
.card--lead .card__meta{color:rgba(251,250,247,.72)}

/* small — text first, thumbnail right, neighbours divided by a hairline */
.rowcards{display:flex;flex-direction:column}
.card--row{
  flex-direction:row;align-items:flex-start;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--hair);
}
.card--row:first-child{padding-top:0}
.card--row .card__body{flex:1 1 auto;min-width:0}
.card--row .card__title{margin-top:0;font-size:.92rem}
.card--row .card__pic{flex:0 0 84px;width:84px;aspect-ratio:1;margin-top:.1rem}
.module--dark .card--row{border-bottom-color:var(--ground-hair)}
.module--dark .card__title{color:var(--on-ground)}
.module--dark .card__meta{color:var(--on-ground-2)}

/* --------------------------------------------------------------- score rows */
/* Sofascore's row, to its numbers: 48 high, a 72px time cell, two team lines of
   16 stacked in a flexible column. It keeps that height on a 390 screen and only
   narrows the name column — the rhythm of the list is a constant of the product,
   not a consequence of the width. */
.fixtures{border-top:1px solid var(--hair)}

/* The competition, not the clock, is what groups a list of matches. */
.grouphead{
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem 0 .55rem;border-bottom:1px solid var(--hair);
}
.grouphead__crest{width:20px;height:20px;object-fit:contain;flex:0 0 auto}
.grouphead__name{font:700 .82rem/1.15 var(--sans);letter-spacing:-.015em}
.grouphead__where{font:400 .72rem/1.15 var(--sans);color:var(--muted)}
.grouphead__more{margin-left:auto;font:600 .72rem/1 var(--sans);color:var(--muted)}
.grouphead__more:hover{color:var(--signal)}

.fx{
  display:grid;grid-template-columns:72px minmax(0,1fr) auto;
  align-items:center;height:48px;padding:0;
  border-bottom:1px solid var(--hair);
  transition:background var(--t-state);
}
.fx:hover{background:var(--page-2)}
.fx__when{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:2px;font-variant-numeric:tabular-nums;
}
.fx__time{font:600 .78rem/1 var(--sans);color:var(--ink-2)}
.fx__state{font:700 .61rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fx--live .fx__state{color:var(--signal)}
.fx__sides{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.fx__side{display:flex;align-items:center;gap:.45rem;height:16px;min-width:0}
.fx__side img{width:16px;height:16px;object-fit:contain;flex:0 0 auto}
.fx__name{
  font:500 .82rem/1 var(--sans);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fx--done .fx__side--lost .fx__name{color:var(--muted);font-weight:400}
.fx__scores{display:flex;flex-direction:column;justify-content:center;gap:4px;padding-left:.8rem}
.fx__score{
  height:16px;font:700 .84rem/16px var(--sans);font-variant-numeric:tabular-nums;
  text-align:right;min-width:1.2em;
}
.fx--done .fx__side--lost + .fx__score,
.fx__score--lost{color:var(--muted);font-weight:500}
/* a field event has one line, not two */
.fx--field .fx__sides{gap:0}
.fx--field .fx__side{height:auto}

/* A list that mixes competitions — a club's season, a whole day, a head-to-head — needs to
   say which is which. Same 48px row, one more column, so the rhythm does not change between
   a grouped list and a mixed one. */
.fx--mixed{grid-template-columns:64px 132px minmax(0,1fr) auto}
.fx__comp{
  font:600 .7rem/1.2 var(--sans);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:.7rem;
}
.fx--mixed .fx__time{font-size:.74rem}
@media (max-width:640px){
  /* The name column is the one that must survive; the competition drops to the state slot,
     where the date already lives, rather than squeezing four columns onto 390px. */
  .fx--mixed{grid-template-columns:64px minmax(0,1fr) auto}
  .fx__comp{display:none}
}

/* The score changing is the whole motion layer of this category. Sky spends four
   of ten keyframe sets on it: hide the old number, reveal the new, then emphasise
   it. Rendered here as one run rather than three, but the same three beats. */
@keyframes score-change{
  0%  {transform:translateY(0);opacity:1}
  22% {transform:translateY(-40%);opacity:0}
  23% {transform:translateY(40%);opacity:0}
  55% {transform:translateY(0);opacity:1;color:var(--signal)}
  100%{transform:translateY(0);opacity:1}
}
.fx__score.is-changed{animation:score-change .8s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){
  .fx__score.is-changed{animation:none}
  .dot::after{animation:none;opacity:.35}
  .card__pic img{transition:none}
}

/* --------------------------------------------------- page heads and sections */
/* The inner pages carried their own furniture in site.css — a page head that set its title
   in a different scale from the homepage, a section rule in mono, a table with its own
   borders. Three fixture rows and two heading styles on one site is not a system. Rebuilt
   here on the same tokens, keeping the old class names so fifteen templates do not have to
   be rewritten to say the same thing. */
.daysheet{padding:clamp(1.8rem,4vw,3rem) 0 1rem;border-bottom:2px solid var(--ink)}
.daysheet__head h1{display:flex;flex-direction:column;gap:.5rem}
.daysheet__head h1 span{
  font:700 .66rem/1 var(--sans);font-stretch:88%;letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal);
}
.daysheet__head h1 b{
  font:800 clamp(1.9rem,4.6vw,3.1rem)/.94 var(--sans);font-stretch:104%;
  letter-spacing:-.035em;
}
.daysheet__meta{margin-top:.8rem;font:400 .88rem/1.6 var(--sans);color:var(--muted);max-width:70ch}
.daysheet__meta a{border-bottom:1px solid var(--hair)}
.daysheet__meta a:hover{border-bottom-color:var(--signal);color:var(--signal)}
.daysheet__about{margin-top:.9rem;font:400 1.05rem/1.6 var(--sans);color:var(--ink-2);max-width:74ch}
/* The crest belongs beside the name, not beside the paragraph. Spanning it down both rows and
   centring it left it floating against the middle of a long league description, which reads
   as a stray image rather than as the mark of the thing being described. Crest and title share
   the first row; everything written sits underneath across the full width. */
.daysheet__head--league{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem 1.1rem;align-items:center}
.daysheet__head--league .mark{width:52px;height:52px;grid-row:1;grid-column:1}
.daysheet__head--league>h1{grid-row:1;grid-column:2}
.daysheet__head--league .daysheet__meta,
.daysheet__head--league .daysheet__about{grid-row:auto;grid-column:1 / -1}
/* A sport's mark earns the same place as a league's crest for the same reason: it is the
   mark OF the thing being named, so it sits on the title's line rather than beside the
   sentence underneath. The modifier is set only when a mark exists — lacrosse has none,
   and an empty 44px column beside a title reads as a picture that failed to load. */
.daysheet__head--sport{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem 1.1rem;align-items:center}
.daysheet__head--sport>h1{grid-row:1;grid-column:2}
.daysheet__head--sport .daysheet__meta{grid-row:auto;grid-column:1 / -1}
.spicon--head{width:52px;height:52px;grid-row:1;grid-column:1;color:var(--ink)}

/* The section rule, matching .modhead rather than being a second idea about the same thing */
.secline{
  margin:2.6rem 0 1rem;padding-bottom:.6rem;border-bottom:2px solid var(--ink);
  font:700 1.15rem/1.2 var(--sans);font-stretch:106%;letter-spacing:-.025em;color:var(--ink);
}

.daybar{display:flex;gap:.4rem;margin-top:1.4rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem}
.daybar::-webkit-scrollbar{display:none}
.daybar__day{
  display:flex;flex-direction:column;gap:.15rem;padding:.45rem .8rem;
  border:1px solid var(--hair);border-radius:var(--r-chip);white-space:nowrap;
  font:600 .74rem/1.15 var(--sans);color:var(--ink-2);
  transition:border-color var(--t-control),background var(--t-control),color var(--t-control);
}
.daybar__day b{font-weight:700;letter-spacing:.06em;color:var(--ink)}
.daybar__day:hover{border-color:var(--ink);background:var(--page-2)}
.daybar__day.is-on{background:var(--ink);border-color:var(--ink);color:rgba(255,255,255,.66)}
.daybar__day.is-on b{color:#fff}

/* The figures strip under a page head — matches on file, won, drawn, founded */
.ledger{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1rem;margin:1.6rem 0 .6rem;
}
.ledger__cell b{
  display:block;font:800 clamp(1.2rem,2.2vw,1.7rem)/1 var(--sans);
  font-stretch:104%;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.ledger__cell span{
  display:block;margin-top:.3rem;font:700 .6rem/1.2 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}

.fx__empty{padding:1.4rem 0;font:400 .95rem/1.6 var(--sans);color:var(--muted);border-bottom:1px solid var(--hair)}
.fx__score--text{font-size:.76rem;font-weight:600;min-width:6em}

/* -------------------------------------------------------------------- table */
/* `.grid` is the table; `.table` is what the inner pages already call it. They are the same
   table — the site had two, the way it had two fixture rows — so the old name is carried in
   the selector rather than edited out of eight templates. */
.grid,.table{font-variant-numeric:tabular-nums;width:100%;border-collapse:collapse}
.grid th,.table th{
  text-align:right;padding:.5rem;border-bottom:2px solid var(--ink);white-space:nowrap;
  font:700 .63rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}
.grid th:nth-child(-n+2),.grid td:nth-child(-n+2),
.table th:first-child,.table td:first-child,
.table th:nth-child(2),.table td:nth-child(2){text-align:left}
.grid td,.table td{padding:.5rem;border-bottom:1px solid var(--hair);font-size:.86rem;vertical-align:middle}
.table th:first-child,.table td:first-child{padding-left:0}
.table th:last-child,.table td:last-child{padding-right:0}
.grid tbody tr:hover,.table tbody tr:hover{background:var(--page-2)}
.grid__rank,.table__rank{color:var(--muted);width:2.4em;font-weight:600}
.grid__team,.table__club{display:flex;align-items:center;gap:.5rem;font-weight:500}
.grid__team img,.table__club .mark{width:18px;height:18px;object-fit:contain}
.grid__key,.table .num--pts{font-weight:700;color:var(--ink)}
.table .num{text-align:right;color:var(--ink-2);width:3.2rem}
/* The row for the club whose page you are on */
.table tr.is-here td{background:var(--signal-soft)}
.table tr.is-here .table__rank{color:var(--signal)}
.grid tr.is-champion .grid__team{color:var(--gold);font-weight:700}
.tablewrap{overflow-x:auto;margin-top:.3rem}
.table{min-width:520px}
.twoup{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 2.6rem}

/* ------------------------------------------------------- competition index */
/* The list of a sport's competitions, on the same treatment as the sports catalogue */
.leagues{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 var(--col-gap)}
.leagues__item{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:.1rem .7rem;align-items:center;
  padding:.8rem 0;border-bottom:1px solid var(--hair);transition:color var(--t-state);
}
/* The crest is optional, and the text must not care. Placed implicitly, an emblemless
   competition put its name into the 26px crest column and its country beside it, so
   "UEFA European Championship" wrapped to three lines with "Europe" printed over them.
   Same trap as the page head — an optional element in a grid needs every other cell placed
   explicitly, or the absent one shifts all of them. Already recorded once in memory as
   css-overflow-and-font-traps item 5, and it happened again here. */
.leagues__item .mark{width:26px;height:26px;grid-row:1 / span 2;grid-column:1}
.leagues__name{grid-row:1;grid-column:2;font:700 .95rem/1.2 var(--sans);letter-spacing:-.02em}
.leagues__where{grid-row:2;grid-column:2;font:400 .74rem/1.2 var(--sans);color:var(--muted)}
.leagues__item:hover{color:var(--signal)}

/* --------------------------------------------------------------- news grid */
.newsdesk__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem var(--col-gap-tight)}
.newsdesk__grid--flat{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.story{display:flex;flex-direction:column;gap:.4rem}
.story__pic{
  width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ground-lift);
  border-radius:var(--r);transition:transform var(--t-layout);
}
.story:hover .story__pic{transform:scale(1.03)}
.story h3{font:700 .98rem/1.2 var(--sans);letter-spacing:-.02em;margin-top:.4rem}
.story:hover h3{color:var(--signal)}
.story__meta{font:400 .72rem/1.3 var(--sans);color:var(--muted)}
.story__lead{font:400 .98rem/1.55 var(--sans);color:var(--ink-2)}
.story--lead{grid-column:span 2;grid-row:span 2}
.story--lead h3{font-size:1.5rem;line-height:1.1}
@media (max-width:1000px){
  .newsdesk__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story--lead{grid-column:span 2;grid-row:auto}
}
@media (max-width:640px){ .newsdesk__grid{grid-template-columns:minmax(0,1fr)} }

/* ---------------------------------------------------- small tables and notes */
.mini{width:100%;border-collapse:collapse;margin-top:.4rem;font-variant-numeric:tabular-nums}
.mini td{padding:.42rem 0;border-bottom:1px solid var(--hair);font-size:.88rem}
.mini td:nth-child(2){display:flex;align-items:center;gap:.5rem}
.mini__rank{width:2rem;font-weight:600;color:var(--muted);font-size:.8rem}
.mini__num{text-align:right;width:3.4rem;white-space:nowrap;color:var(--muted);font-size:.84rem}
.mini__pts{color:var(--ink);font-weight:700}
.desk__more{
  display:inline-block;margin-top:.8rem;font:600 .78rem/1 var(--sans);
  border-bottom:2px solid var(--hair);padding-bottom:2px;transition:border-color var(--t-state);
}
.desk__more:hover{color:var(--signal);border-bottom-color:var(--signal)}
.desk__note{margin-top:1rem;font:400 .78rem/1.55 var(--sans);color:var(--muted);max-width:74ch}
.desk__note a{border-bottom:1px solid var(--hair)}
.desk__note a:hover{color:var(--signal);border-bottom-color:var(--signal)}

/* ------------------------------------------------------------------ profile */
.profile{
  margin:1.2rem 0 .2rem;max-width:76ch;
  font:400 1.06rem/1.6 var(--sans);color:var(--ink-2);
}
.profile b{font-weight:700;color:var(--ink)}
.profile__links{display:inline-flex;gap:.9rem;margin-left:.5rem;white-space:nowrap}
.profile__links a{
  font:600 .8rem/1 var(--sans);color:var(--ink);
  border-bottom:2px solid var(--hair);padding-bottom:1px;
  transition:border-color var(--t-state);
}
.profile__links a:hover{border-bottom-color:var(--signal)}

/* ------------------------------------------------------------- head to head */
.record__line{
  margin:.9rem 0 1rem;max-width:70ch;
  font:400 1rem/1.55 var(--sans);color:var(--ink-2);
}
.record__line b{font-weight:700;color:var(--ink)}
.record__bar{display:flex;height:26px;overflow:hidden;border-radius:0;margin-bottom:1.6rem}
.record__bar span{
  display:flex;align-items:center;justify-content:center;min-width:0;
  font:700 .7rem/1 var(--sans);font-variant-numeric:tabular-nums;
}
.record__bar i{font-style:normal;padding:0 .3rem}
/* Both sides are ink, at two weights, and the draws are the hairline between them. The away
   band was the signal colour until it was looked at on a real page: the accent is reserved
   for live state and the primary action, and spending it on "wins for the other side" turns
   it from a signal into a paint. Two sides of one contest are not two states. */
.record__w{background:var(--ink);color:var(--page)}
.record__d{background:var(--hair);color:var(--ink-2)}
.record__l{background:var(--muted);color:var(--page)}

/* -------------------------------------------------------------------- chips */
/* F1's second navigation tier: outlined pills with a leading mark, plainly not
   competing with the bar above them. */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.42rem .8rem;border-radius:var(--r-chip);
  border:1px solid var(--hair);background:var(--page);
  font:600 .76rem/1 var(--sans);color:var(--ink);
  transition:border-color var(--t-control),background var(--t-control),color var(--t-control);
}
.chip:hover{border-color:var(--ink);background:var(--page-2)}
.chip[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--page)}
.module--dark .chip{border-color:var(--ground-hair);background:transparent;color:var(--on-ground)}
.module--dark .chip:hover{border-color:var(--on-ground);background:rgba(255,255,255,.08)}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:44px;padding:0 1.3rem;border-radius:0;
  background:var(--ink);color:var(--page);
  font:700 .82rem/1 var(--sans);letter-spacing:-.01em;
  transition:background var(--t-control);
}
.btn:hover{background:var(--signal)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--page)}

/* ------------------------------------------------------------------- footer */
/* Sky carries 40 links in six columns, F1 65 in eleven. The masthead makes a
   promise and the footer shows the real size of the thing. */
.foot{background:var(--ground);color:var(--on-ground);padding:2.6rem 0 2rem;margin-top:3rem}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.6rem 2rem}
.foot h3{
  font:700 .63rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-ground-2);margin-bottom:.8rem;
}
.foot li{margin-bottom:.45rem}
.foot a{font:400 .8rem/1.3 var(--sans);color:var(--on-ground);transition:color var(--t-state)}
.foot a:hover{color:var(--signal)}
.foot__legal{
  margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--ground-hair);
  font:400 .72rem/1.5 var(--sans);color:var(--on-ground-2);
}
.foot__legal a{font-size:.72rem;text-decoration:underline;text-underline-offset:2px}

/* ================================================================ page blocks
   The last of site.css, rebuilt here on the system's own tokens. That file is now empty
   and gone, and with it the bridge that let the old names resolve.

   One thing it was quietly doing had to be found first: it defined `.ledger` as well, and it
   loaded second, so the version rebuilt in this sheet never rendered at all. Two files
   defining one class is not a migration in progress, it is a coin toss decided by link order. */

main{max-width:var(--shell);margin:0 auto;padding:0 var(--gut) 4rem}
main.flush{max-width:none;padding:0}
.panel{padding:1.4rem 0}
.panel h2{font-size:1.5rem;margin:.35rem 0 .3rem}

/* -------------------------------------------------------- Formula 1 telemetry */
/* The one thing on this site that exists nowhere else: a lap rebuilt from raw GPS. */
.tele{
  margin:1.5rem 0 1.9rem;background:var(--page);border:1px solid var(--hair);
  border-radius:var(--r);padding:clamp(1rem,2.6vw,1.7rem);
}
.tele__head{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:flex-start;
  padding-bottom:.9rem;border-bottom:1px solid var(--hair);
}
.tele__title h2{font:700 clamp(1.25rem,2.7vw,1.7rem)/1.1 var(--sans);font-stretch:104%;letter-spacing:-.025em;margin-top:.4rem}
.tele__sub{margin-top:.5rem;max-width:66ch;font:400 .95rem/1.55 var(--sans);color:var(--ink-2)}
.tele__pick{display:flex;gap:.4rem;flex-wrap:wrap}
.tele__driver{
  display:flex;flex-direction:column;gap:.15rem;padding:.45rem .75rem;background:none;
  border:1px solid var(--hair);border-left:3px solid var(--team,var(--ink));cursor:pointer;
  border-radius:0;font:400 .7rem/1.2 var(--sans);color:var(--muted);
  transition:border-color var(--t-state),color var(--t-state),background var(--t-state);
}
.tele__driver b{font:700 .8rem/1.2 var(--sans);letter-spacing:.02em;color:var(--ink)}
.tele__driver i{font-style:normal;font-variant-numeric:tabular-nums}
.tele__driver:hover{border-color:var(--ink);border-left-color:var(--team,var(--ink))}
.tele__driver.is-on{background:var(--ink);color:rgba(255,255,255,.66)}
.tele__driver.is-on b{color:#fff}

.tele__stage{position:relative}
.tele__pane{display:none;margin:0}
.tele__pane.is-on{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1rem,2.6vw,2rem);align-items:center;padding-top:1rem}
.tele__map{width:100%;height:auto}
.tele__map polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}
.tele__brakes polyline{stroke:var(--ground);stroke-width:11;opacity:.9}
.tele__speeds polyline{stroke-width:5}
.tele__pins circle{fill:var(--ink)}
.tele__pins circle.is-max{fill:none;stroke:var(--ink);stroke-width:2}
.tele__pins text{font:700 11px var(--sans);fill:var(--ink);text-anchor:middle}
.tele__caption{grid-column:2;grid-row:1}
.tele__who{display:flex;flex-direction:column;gap:.15rem;padding-left:.7rem;border-left:4px solid var(--team,var(--ink))}
.tele__who b{font:800 1.15rem/1.1 var(--sans);font-stretch:104%;letter-spacing:-.025em}
.tele__who span{font:400 .76rem/1.2 var(--sans);color:var(--muted)}
.tele__facts{margin-top:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1rem}
.tele__facts div{border-top:1px solid var(--hair);padding-top:.35rem}
.tele__facts dt{font:700 .62rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tele__facts dd{margin:.25rem 0 0;font:700 1.02rem/1 var(--sans);font-variant-numeric:tabular-nums}
.tele__profile{grid-column:2;grid-row:2;margin-top:1.1rem}
.tele__profile-label{font:700 .62rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tele__profile svg{width:100%;height:62px;margin-top:.3rem;border-bottom:1px solid var(--hair)}
.tele__profile polyline{fill:none;stroke:var(--signal);stroke-width:1.4;vector-effect:non-scaling-stroke}
.tele__legend{
  display:flex;align-items:center;gap:.32rem;margin-top:1rem;padding-top:.8rem;
  border-top:1px solid var(--hair);font:400 .68rem/1 var(--sans);color:var(--muted);
}
.tele__legend i{width:34px;height:9px;display:block}
.tele__more{margin-left:auto;color:var(--ink);border-bottom:2px solid var(--hair);padding-bottom:1px}
.tele__more:hover{border-bottom-color:var(--signal);color:var(--signal)}
.tele--compact .tele__sub{font-size:.9rem}
/* The panel is white; inside the dark band it must not inherit the band's near-white text. */
.module--dark .tele,.module--dark .tele a{color:var(--ink)}

/* ------------------------------------------------------------- match board */
.board{padding:clamp(1.4rem,3.4vw,2.4rem) 0 1.4rem;border-bottom:2px solid var(--ink)}
.board__crumb{font:600 .74rem/1 var(--sans);color:var(--muted)}
.board__crumb a:hover{color:var(--signal)}
.board__face{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1rem,4vw,3rem);align-items:center;margin-top:1.4rem}
.board__team{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:.55rem}
.board__team--away{align-items:flex-start;text-align:left}
.board__team .mark{width:52px;height:52px}
.board__team h1{font:800 clamp(1.2rem,3.2vw,2rem)/1.06 var(--sans);font-stretch:104%;letter-spacing:-.03em}
.board__score{text-align:center;display:flex;flex-direction:column;gap:.35rem;align-items:center}
.board__score b{
  font:800 clamp(2.4rem,8vw,4.4rem)/1 var(--sans);font-stretch:104%;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;
}
.board__score b i{font-style:normal;color:var(--hair);margin:0 .06em}
.board__kick{font-size:clamp(1.5rem,4.6vw,2.5rem)!important}
.board__state{font:700 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.board__state .beat{color:var(--signal);font-style:normal}
.board__state .is-off{color:var(--signal);font-style:normal}
.board__note{font:400 .8rem/1.3 var(--sans);color:var(--ink-2)}
.board__facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem 1.6rem;
  margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--hair);
}
.board__facts dt{font:700 .62rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.board__facts dd{margin:.3rem 0 0;font-size:.92rem}
.form{display:flex;gap:3px}
.form i{
  display:grid;place-items:center;width:19px;height:19px;
  font:700 .62rem/1 var(--sans);font-style:normal;color:#fff;
}
.form__w{background:#2C6B4F}.form__d{background:var(--muted)}.form__l{background:var(--signal)}

/* --------------------------------------------------------------- an article */
.read{max-width:76ch;padding:clamp(1.4rem,3.4vw,2.4rem) 0 1rem}
.read__crumb{font:600 .74rem/1 var(--sans);color:var(--muted)}
.read h1{margin:.9rem 0 .7rem;font:800 clamp(1.7rem,4.4vw,2.6rem)/1.05 var(--sans);font-stretch:104%;letter-spacing:-.035em}
.read__meta{font:400 .78rem/1.5 var(--sans);color:var(--muted)}
.read__figure{margin:1.6rem 0}
.read__figure img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ground-lift);border-radius:var(--r)}
.read__figure figcaption{margin-top:.5rem;font:400 .72rem/1.4 var(--sans);color:var(--muted)}
.read__lead{margin-top:1.2rem;font:400 1.16rem/1.62 var(--sans);color:var(--ink)}
.read__out{margin-top:1.7rem}
.button{
  display:inline-flex;align-items:center;height:44px;padding:0 1.3rem;
  background:var(--ink);color:var(--page);font:700 .82rem/1 var(--sans);
  transition:background var(--t-control);
}
.button:hover{background:var(--signal)}
.read__note{margin-top:1rem;font:400 .74rem/1.6 var(--sans);color:var(--muted);max-width:64ch}

/* ------------------------------------------------------- the source register */
.srcrow{padding:1.3rem 0;border-bottom:1px solid var(--hair)}
.srcrow__head{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:baseline;justify-content:space-between}
.srcrow__head h2{font:700 1.14rem/1.2 var(--sans);letter-spacing:-.02em}
.srcrow__head h2 a:hover{color:var(--signal)}
.srcrow__licence{
  font:600 .7rem/1 var(--sans);color:var(--muted);
  padding:.3rem .55rem;border:1px solid var(--hair);border-radius:var(--r-chip);
}
/* A source that forbids commercial use is the one fact on this page that changes decisions. */
.srcrow--nc .srcrow__licence{color:var(--signal);border-color:var(--signal)}
.srcrow__attr{margin-top:.6rem;font:400 1rem/1.55 var(--sans)}
.srcrow__note{margin-top:.4rem;font:400 .82rem/1.55 var(--sans);color:var(--muted);max-width:82ch}
.srcrow__state{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem 1.4rem;margin-top:.9rem}
.srcrow__state dt{font:700 .62rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.srcrow__state dd{margin:.3rem 0 0;font:400 .85rem/1.3 var(--sans)}
.srcrow__err{
  margin-top:.7rem;padding:.55rem .7rem;background:var(--signal-soft);
  font:400 .78rem/1.5 var(--sans);color:#8C2110;border-radius:var(--r);
}
.runlog{margin-top:.4rem}
.runlog__row{
  display:grid;grid-template-columns:6.6rem 6.4rem 3.4rem minmax(0,1fr);gap:.8rem;
  padding:.45rem 0;border-bottom:1px solid var(--hair);
  font:400 .76rem/1.4 var(--sans);font-variant-numeric:tabular-nums;
}
.runlog__when{color:var(--muted)}
.runlog__items{text-align:right;color:var(--muted)}
.runlog__msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.runlog__row.is-bad .runlog__msg{color:var(--signal)}

@media (max-width:1000px){
  .tele__pane.is-on{grid-template-columns:minmax(0,1fr)}
  .tele__caption,.tele__profile{grid-column:1;grid-row:auto}
}
@media (max-width:720px){
  .board__face{grid-template-columns:1fr;gap:1.2rem;text-align:center}
  .board__team,.board__team--away{align-items:center;text-align:center}
  .runlog__row{grid-template-columns:5.4rem 1fr 2.6rem;grid-template-areas:"when job items" "msg msg msg"}
  .runlog__when{grid-area:when}.runlog__job{grid-area:job}.runlog__items{grid-area:items}.runlog__msg{grid-area:msg}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
}