/* ===========================================================================
   Caspian Eleven — Floodlight
   The site's design system. Everything public is built from these tokens.

   Colour, type and the 60/20/10/5/3/2 usage ratio come from the brand identity
   set and are not open for reinterpretation here. Tokens below are the only
   place a value is written down; nothing further in this file hard-codes a hex.

   Sections
     1  Tokens
     2  Base and shared elements
     3  Header, navigation, footer
     4  Homepage: fixture rail, lead, news, match centre, feature band
     5  Article
     6  States: empty, stale, error
     7  Responsive
     8  Motion
     9  Reference pages: club dossier, grounds toolbar
   =========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Core palette, brand identity asset 10 */
  --ink:        #0B0B0B;   /* Deep Black   — primary surface, 60% */
  --ink-raised: #1A1A1A;   /* Graphite     — raised surface, 20% */
  --grey:       #6B6B6B;   /* Gray         — neutral, 10% */
  --paper:      #F5F5F5;   /* Off White    — light surface, 5% */
  --white:      #FFFFFF;   /* White        — 3% */
  --blue:       #0066FF;   /* Caspian Blue — accent, 2% */
  /* Secondary */
  --sky:        #00C2FF;
  --navy:       #001A3D;
  --silver:     #C9CDD4;

  /* Applied roles. #0066FF on #0B0B0B is 4.07:1, which is fine for a 2px rule or
     a large control but fails AA for body-size text, so links on dark use --link
     (#5E9EFF, 7.4:1) and reserve the true brand blue for rules, focus and fills. */
  --link:       #5E9EFF;
  --link-dark:  #004FC7;   /* on the light reading surface, 7.6:1 on #F5F5F5 */
  --text:       var(--white);
  --text-quiet: var(--silver);
  --rule:       #3D3D3D;   /* hairline between rows */
  --rule-firm:  #494949;   /* section boundary */
  --rule-loud:  #626262;   /* section opening */

  /* Type. Display is Unbounded, everything else Inter. Both self-hosted,
     latin + latin-ext, so Azerbaijani letters render in the brand faces. */
  --display: Unbounded, 'Arial Black', Arial, sans-serif;
  --text-face: Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Spacing, a 4px base. Named by use, not by number. */
  --gap-hair: 8px;
  --gap-tight: 14px;
  --gap: 24px;
  --gap-wide: 36px;
  --gap-section: 64px;

  --measure: 1320px;       /* page width */
  --gutter: 48px;          /* page side gutter */
  --reading: 720px;        /* article column */

  /* Motion, from the approved design review */
  --t-control: 180ms;
  --t-reveal: 320ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
}

/* --- 2. Base and shared elements ---------------------------------------- */
.ce {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.6 var(--text-face);
  -webkit-font-smoothing: antialiased;
}
.ce * { box-sizing: border-box; }
.ce a { color: inherit; text-decoration: none; }
.ce a:hover { color: var(--link); }
.ce a:focus-visible,
.ce summary:focus-visible,
.ce-header a:focus-visible,
.ce-menu summary:focus-visible { outline: 3px solid var(--link); outline-offset: 5px; }

.ce h1, .ce h2 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}
.ce h3 {
  font: 700 24px/1.3 var(--text-face);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.ce img { display: block; max-width: 100%; object-fit: cover; }
.ce figure { margin: 0; }
.ce figcaption { font: 12px/1.5 var(--text-face); color: var(--text-quiet); padding: 10px 0; }
.ce svg { vertical-align: middle; flex-shrink: 0; }

.ce table { width: 100%; border-collapse: collapse; background: none; border: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.ce th, .ce td { padding: 12px 8px; border-bottom: 1px solid #444; text-align: right; }
.ce th:first-child, .ce td:first-child { text-align: left; }
.ce th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-quiet); font-weight: 600; }

.ce-header, .ce-wrap, .ce-footer { width: min(var(--measure), calc(100% - var(--gutter) * 2)); margin-inline: auto; }

.ce-skip { position: absolute; left: -9999px; }
.ce-skip:focus { left: 12px; top: 12px; background: var(--white); color: var(--ink); padding: 12px; z-index: 10; }

/* Arrow link. One shape, used for every "go on" affordance on the site. */
.ce-link {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 12px 0; border-bottom: 1px solid var(--blue);
}
.ce-link svg, .ce-section-head svg { color: var(--link); }

/* --- 3. Header, navigation, footer -------------------------------------- */
.ce-header {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 100px; gap: 28px;
  border-bottom: 1px solid var(--rule-firm);
}
.ce-logo { width: 260px; height: auto; background: transparent; padding: 0; }
.ce-header > a { flex-shrink: 0; }
.ce-header > nav { display: flex; gap: 20px; }
.ce-header nav a {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  padding: 14px 0; white-space: nowrap;
}
.ce-header [aria-current] { border-bottom: 2px solid var(--blue); }
.ce-menu { display: none; position: relative; }
.ce-menu summary { padding: 12px; font: 14px var(--text-face); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.ce-menu nav {
  position: absolute; right: 0; top: 46px; width: 240px; z-index: 10;
  max-height: calc(100dvh - 140px); overflow-y: auto;
  background: var(--ink-raised); border: 1px solid #555; padding: 18px;
  display: flex; flex-direction: column; gap: 0;
}
.ce-menu nav a { padding: 12px; }

.ce-footer { padding: 38px 0; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.ce-footer > a { display: block; flex-shrink: 0; }
.ce-footer > a img { width: 180px; height: auto; }
.ce-footer p { font-size: 13px; color: var(--text-quiet); margin: 0; }
.ce-footer nav { margin-left: auto; display: flex; gap: 22px; font-size: 13px; flex-wrap: wrap; }
.ce-footer small {
  display: block; width: 100%; border-top: 1px solid #444;
  padding-top: 18px; font-size: 11px; color: var(--text-quiet);
}

/* --- 4. Homepage -------------------------------------------------------- */
.ce-fixture-rail {
  display: flex; gap: 28px; align-items: center; font-size: 12px;
  border-bottom: 1px solid var(--rule-firm); padding: 20px 0;
}
.ce-fixture-rail b { text-transform: uppercase; letter-spacing: .16em; }
.ce-fixture-rail > span { color: var(--text-quiet); }
.ce-fixture-rail a { margin-left: auto; display: flex; gap: 20px; align-items: center; }

/* Lead. Two shapes share this block: a real lead story, and the brand
   statement that stands in when no story qualifies to lead. */
.ce-lead {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: var(--gap-wide); align-items: start;
  padding: 40px 0 var(--gap-section);
}
.ce-lead > div { padding-top: 4px; }
.ce-lead h1 { font-size: clamp(32px, 4.15vw, 62px); margin: 0 0 var(--gap); }
.ce-lead p { font-size: 22px; line-height: 1.5; max-width: 32ch; color: var(--text-quiet); margin: 0 0 30px; }
.ce-lead figure img {
  width: 100%; height: 440px;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%, 0 11%);
}
.ce-lead-eyebrow {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-quiet); margin: 0 0 22px;
}
.ce-lead-eyebrow b { color: var(--white); border-left: 3px solid var(--blue); padding-left: 12px; white-space: nowrap; }
.ce-lead-eyebrow span { min-width: 0; }

/* Text-only lead: one column, headline allowed to run wider. */
.ce-lead-textonly { grid-template-columns: 1fr; }
.ce-lead-textonly h1 { max-width: 16ch; font-size: clamp(34px, 6vw, 84px); }
.ce-lead-textonly p { max-width: 52ch; }
.ce-lead .ce-meta { font-size: 12px; margin-top: 22px; display: block; }

.ce-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  border-top: 1px solid var(--rule-loud); border-bottom: 1px solid var(--rule-firm);
  padding: var(--gap) 0;
}
.ce-section-head h2 { font-size: 28px; margin: 0; }
.ce-section-head a { font-size: 13px; white-space: nowrap; }
.ce-section-head nav { display: flex; gap: 20px; flex-wrap: wrap; }

.ce-news-row {
  display: grid; grid-template-columns: 40px 1fr 170px 24px;
  gap: 26px; align-items: center;
  padding: 25px 0; border-bottom: 1px solid var(--rule);
}
.ce-news-row h3 { margin: 0; font-size: 25px; max-width: 40ch; }
.ce-meta, .ce-number { font-size: 12px; color: var(--text-quiet); }

.ce-match { padding: var(--gap-section) 0; }
.ce-match-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; padding-top: 20px; align-items: start; }
.ce-match-grid h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-quiet); font-weight: 600; margin: 0 0 var(--gap-hair); }
.ce-match-row { padding: 20px 0; border-bottom: 1px solid #444; }
.ce-match-row time { display: block; font-size: 12px; color: var(--text-quiet); }
.ce-match-row b { font-size: 18px; }
.ce-match-row span { font-weight: 400; color: var(--text-quiet); }

/* Feature band. Deliberate light surface against the dark page: the one place
   the reader changes footing. Two features, equal media, unequal type weight. */
.ce-culture { background: var(--paper); color: var(--ink); padding: 56px 0 var(--gap-section); }
.ce-culture .ce-section-head { border-top: 0; border-bottom: 1px solid #d6d6d6; padding-top: 0; }
.ce-culture h2 { font-size: clamp(28px, 3.2vw, 40px); }
.ce-culture .ce-link { border-bottom-color: var(--link-dark); }
.ce-culture a:hover { color: var(--link-dark); }
.ce-features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-wide); padding-top: 40px; }
.ce-features > a { display: flex; flex-direction: column; gap: 20px; }
.ce-features img { width: 100%; aspect-ratio: 16 / 10; height: auto; }
.ce-features h3 { margin: 0 0 10px; font-size: clamp(22px, 2vw, 28px); }
.ce-features p { color: #555; margin: 0 0 14px; font-size: 15px; }
.ce-features span { font-size: 13px; color: var(--link-dark); }

/* --- 5. Article --------------------------------------------------------- */
.ce-back { display: inline-block; padding: 32px 0; font-size: 13px; }
.ce-article-head { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; padding-bottom: var(--gap-wide); }
.ce-article-head h1 { font-size: clamp(28px, 3.6vw, 54px); margin: 0; overflow-wrap: anywhere; }
.ce-article-head p { font-size: 19px; line-height: 1.55; margin-top: 0; color: var(--text-quiet); }
.ce-article-head .ce-meta { font-size: 12px; }
.ce-article-image img { width: 100%; max-height: 600px; height: auto; }
.ce-reading { background: var(--paper); color: var(--ink-raised); padding: 56px var(--gap); }
.ce-reading > div { max-width: var(--reading); margin-inline: auto; font: 18px/1.85 var(--text-face); overflow-wrap: anywhere; }
.ce-reading p { margin: 0 0 var(--gap); }
.ce-reading a { color: var(--link-dark); text-decoration: underline; }
.ce-related { padding: 40px 0 var(--gap-section); }
.ce-also {
  margin-top: var(--gap-wide); padding-top: 18px;
  border-top: 1px solid #d6d6d6;
  font-size: 14px; color: #555;
}
.ce-also a { color: var(--link-dark); }

/* Said quietly, because it is a note about the story rather than part of it. */
.ce-brief-note {
  font-size: 13px; line-height: 1.6; color: #666;
  border-left: 2px solid var(--blue); padding-left: 14px;
}

/* --- 6. States ---------------------------------------------------------- */
.ce-empty { padding: var(--gap) 0; color: var(--text-quiet); }
.ce-stale {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-quiet); border: 1px solid var(--rule-firm);
  padding: 7px 12px; margin-bottom: 20px;
}
.ce-stale::before { content: ''; width: 7px; height: 7px; background: var(--grey); flex-shrink: 0; }

/* --- 7. Responsive ------------------------------------------------------ */
@media (max-width: 1150px) {
  .ce-header > nav { display: none; }
  .ce-menu { display: block; }
}
@media (max-width: 1000px) {
  :root { --gutter: 24px; }
  .ce-logo { width: 210px; }
  .ce-lead { grid-template-columns: 1fr; gap: 28px; padding-top: 30px; }
  .ce-lead h1 { font-size: clamp(30px, 6vw, 46px); }
  .ce-news-row { grid-template-columns: 30px 1fr 120px 24px; gap: 16px; }
  .ce-features { grid-template-columns: 1fr; gap: var(--gap-section); }
  .ce-match-grid { grid-template-columns: 1fr; gap: var(--gap-wide); }
  .ce-article-head { grid-template-columns: 1fr; gap: var(--gap); }
}
@media (max-width: 700px) {
  .ce-header { min-height: 88px; }
  .ce-logo { width: 170px; }
  .ce-fixture-rail { gap: 12px; }
  .ce-fixture-rail > span { display: none; }
  .ce-lead p { font-size: 18px; }
  .ce-lead figure img { height: auto; aspect-ratio: 3 / 2; }
  .ce-lead h1 { font-size: clamp(26px, 7.5vw, 42px); }
  /* On a phone the picture pulls the reader in before the words do. */
  .ce-lead figure { order: -1; }

  /* Heading and its link stacked: side by side they collided at this width. */
  .ce-section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ce-section-head h2 { font-size: 22px; }
  .ce-section-head a, .ce-section-head nav a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
  .ce-section-head nav { flex-direction: row; gap: 20px; }

  .ce-news-row { grid-template-columns: 1fr 24px; gap: 12px; padding: 22px 0; }
  .ce-news-row .ce-number { display: none; }
  .ce-news-row h3 { font-size: 20px; grid-column: 1; }
  .ce-news-row .ce-meta { grid-row: 2; }
  .ce-news-row > svg { grid-column: 2; grid-row: 1; }

  .ce-match { padding: 40px 0; }
  .ce-culture { padding: 40px 0 44px; }
  .ce-features { gap: 44px; }
  .ce-footer { gap: 18px; }
  .ce-footer > a img { width: 150px; }
  .ce-footer nav { margin-left: 0; gap: 18px; }
  .ce-article-head h1 { font-size: 30px; }
  .ce-reading { padding: 32px var(--gap); }
  .ce-reading > div { font-size: 17px; }
}

/* --- 8. Motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ce a { transition: color var(--t-control) var(--ease); }
  .ce-features img { transition: filter var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
  .ce-features a:hover img { filter: brightness(1.06); }
  .ce-news-row { transition: padding-left var(--t-control) var(--ease); }
  .ce-news-row:hover { padding-left: 10px; }
}

/* --- 9. Reference pages: club dossier and the grounds toolbar ------------
   The club and stadium pages still load site.css, the Alov theme. This file
   loads after it, so these blocks are where those two components are moved
   onto the brand tokens. Nothing is added to site.css, which is closed.

   Two shared control tokens live here rather than in section 1 because they
   describe interface furniture, not the design system's palette or scale. */
.ce-reference {
  --ctl-h: 44px;          /* one height for every control in a toolbar row */
  --ctl-pad: 15px;
  --ctl-edge: var(--grey);/* #6B6B6B is 3.70:1 on Deep Black and 3.27:1 on
                             Graphite, so a control's boundary is visible on
                             both surfaces without reaching for a new value */

  /* reference.css rebinds --blue to the link colour (#5E9EFF) for everything
     inside .ce-reference, and a custom property resolves against the element
     using it, so var(--blue) here would silently give the link colour rather
     than the brand blue. Measurement caught it: white on #5E9EFF is 2.69:1 and
     would have failed. The brand accent therefore needs its own name on these
     pages. It stays a two percent colour: rules, focus rings and one fill. */
  --accent: #0066FF;
}

/* 9a. Club dossier ------------------------------------------------------- */
/* Eight values, one grid, four columns. Four divides by four, by two and by
   one, so the grid fills every row at every breakpoint and never leaves a cell
   stranded on a line of its own. The 1px gap over a rule-coloured background
   draws the hairlines: no per-cell borders to reset when the column count
   changes, and the outer edge stays open. */
/* The hero already drew a full-width rule immediately above this panel, and two
   parallel rules 27px apart read as a mistake rather than as a boundary. The
   panel's own blue rule is the better opening, so the hero's is dropped. */
.ce-reference .club-hero { border-bottom: 0; padding-bottom: 18px; margin-bottom: 0; }
/* The panel is shared by the player and stadium pages, which each set a club
   accent on an ancestor. Where none is set it falls back to the site's blue. */
.ce-reference .cf-panel { border-top: 2px solid var(--club-accent, var(--accent)); margin: 0 0 34px; }
.ce-reference .cf-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--rule); margin: 0;
}
.ce-reference .cf-cell { background: var(--ink); padding: 26px 22px; min-width: 0; }
.ce-reference .cf-cell:nth-child(4n+1) { padding-left: 0; }
.ce-reference .cf-cell:nth-child(4n)   { padding-right: 0; }

.ce-reference .cf-cell dt {
  font: 600 11px/1.4 var(--text-face);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-quiet); margin: 0 0 14px;
}
.ce-reference .cf-cell dd {
  margin: 0; font: 700 19px/1.35 var(--text-face);
  letter-spacing: -.02em; color: var(--text); overflow-wrap: anywhere;
}
.ce-reference .cf-cell dd a { color: var(--text); border-bottom: 1px solid var(--rule-loud); }
.ce-reference .cf-cell dd a:hover { color: var(--link); border-bottom-color: var(--link); text-decoration: none; }

/* The figures carry the first read, so they get the display face, tabular
   numerals so digits line up between cells, and the ordinal set small enough
   to read as a suffix rather than as part of the number. */
.ce-reference .cf-fig {
  display: inline-block; font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 3.2vw, 44px); line-height: 1; letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.ce-reference .cf-fig i { font-style: normal; font-size: .42em; letter-spacing: 0; margin-left: .12em; color: var(--club-ink, var(--text)); }
.ce-reference .cf-none { font: 600 17px/1.4 var(--text-face); color: var(--text-quiet); letter-spacing: -.01em; }
.ce-reference .cf-note {
  display: block; margin-top: 10px;
  font: 400 13px/1.55 var(--text-face); letter-spacing: 0; color: var(--text-quiet);
}
/* Swatches sit on their own line under the colour name, aligned to the same
   left edge as the text, rather than floating after it off the baseline. */
.ce-reference .cf-sw { display: flex; gap: 7px; margin-top: 12px; }
.ce-reference .cf-sw i { width: 20px; height: 20px; border: 1px solid var(--ctl-edge); }
/* When no colour name is stored the swatches carry the cell on their own, so
   they are set at value size rather than as a footnote to missing words. */
.ce-reference .cf-sw-lead { margin-top: 2px; }
.ce-reference .cf-sw-lead i { width: 26px; height: 26px; }
/* Last season closes the panel instead of taking a ninth cell and breaking the
   four-column rhythm. */
.ce-reference .cf-foot {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline;
  border-top: 1px solid var(--rule); margin: 0; padding: 16px 0 0;
  font: 400 14px/1.6 var(--text-face); color: var(--text-quiet);
}
.ce-reference .cf-foot span {
  font: 600 11px/1.4 var(--text-face); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text);
}

/* Honours tiles sit directly under the dossier, so they follow it onto the
   same system: the count is the figure, the trophy is the label, and the
   legacy gold is gone. */
.ce-reference .honour { background: var(--ink-raised); border: 1px solid var(--rule); padding: 15px 18px; }
.ce-reference .honour b {
  font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1;
  letter-spacing: -.055em; color: var(--text); font-variant-numeric: tabular-nums;
}
.ce-reference .honour span {
  font: 600 11px/1.4 var(--text-face); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-quiet);
}

/* 9b. Grounds toolbar ---------------------------------------------------- */
/* One row, one control height, one border treatment, so the bar reads as a
   single object. Search takes only the width it needs because filtering, not
   searching, is what people do on this page. Ordering is a different job from
   narrowing, so it is pushed to the far end behind a hairline. */
.ce-reference .cf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 30px 0 16px; }
.ce-reference .cf-search {
  display: inline-flex; align-items: center; gap: 10px;
  height: var(--ctl-h); padding: 0 var(--ctl-pad); width: 264px; max-width: 100%;
  background: var(--ink-raised); border: 1px solid var(--ctl-edge); color: var(--text-quiet);
}
.ce-reference .cf-search input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: 0; outline: 0; color: var(--text);
  font: 400 15px var(--text-face);
}
.ce-reference .cf-search input::placeholder { color: var(--text-quiet); opacity: 1; }
.ce-reference .cf-search input::-webkit-search-cancel-button { filter: invert(1); }

.ce-reference .cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ce-reference .cf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: var(--ctl-h); padding: 0 16px; cursor: pointer;
  background: var(--ink-raised); border: 1px solid var(--ctl-edge);
  color: var(--text-quiet); font: 600 14px var(--text-face); letter-spacing: -.01em;
}
.ce-reference .cf-chip b { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .7; }
.ce-reference .cf-chip:hover { color: var(--text); border-color: var(--rule-loud); }
/* White on Caspian Blue measures 4.83:1 and Deep Black on it measures 4.07:1,
   so the label is white on measurement rather than on preference. */
.ce-reference .cf-chip.on { background: var(--accent); border-color: var(--accent); color: var(--white); }
.ce-reference .cf-chip.on b { opacity: .85; }

.ce-reference .cf-sort {
  display: flex; align-items: center; gap: 12px;
  margin-left: auto; padding-left: 20px; border-left: 1px solid var(--rule-loud);
}
.ce-reference .cf-sort > label {
  font: 600 11px/1 var(--text-face); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-quiet);
}
/* A real select underneath, so keyboard and screen reader behaviour is the
   browser's own and no script is needed; only the platform's arrow and box are
   replaced, because those carry the operating system's look rather than ours. */
.ce-reference .cf-select { position: relative; display: inline-flex; align-items: center; }
.ce-reference .cf-select select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  height: var(--ctl-h); padding: 0 42px 0 var(--ctl-pad);
  background: var(--ink-raised); border: 1px solid var(--ctl-edge);
  color: var(--text); font: 600 14px var(--text-face); letter-spacing: -.01em; cursor: pointer;
}
.ce-reference .cf-select select option { background: var(--ink-raised); color: var(--text); }
.ce-reference .cf-select svg {
  position: absolute; right: var(--ctl-pad); top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--text-quiet);
}

.ce-reference .cf-showing {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin: 0 0 26px; font: 400 14px var(--text-face); color: var(--text-quiet);
}
.ce-reference .cf-showing b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.ce-reference .cf-clear {
  background: none; border: 0; border-bottom: 1px solid var(--accent); cursor: pointer;
  padding: 2px 0; color: var(--text); font: 600 13px var(--text-face);
}
.ce-reference .cf-clear:hover { color: var(--link); border-bottom-color: var(--link); }

/* One focus treatment for every control in the bar. Caspian Blue measures
   4.07:1 on Deep Black, past the 3:1 a focus indicator has to reach, and the
   offset keeps the ring clear of the control's own border. */
.ce-reference .cf-search:focus-within,
.ce-reference .cf-chip:focus-visible,
.ce-reference .cf-select select:focus-visible,
.ce-reference .cf-clear:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* 9c. Reference responsive ----------------------------------------------- */
@media (max-width: 1000px) {
  .ce-reference .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-reference .cf-cell { padding: 22px 20px; }
  .ce-reference .cf-cell:nth-child(4n+1),
  .ce-reference .cf-cell:nth-child(4n)   { padding-left: 20px; padding-right: 20px; }
  .ce-reference .cf-cell:nth-child(2n+1) { padding-left: 0; }
  .ce-reference .cf-cell:nth-child(2n)   { padding-right: 0; }
  .ce-reference .cf-sort { margin-left: 0; padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .ce-reference .cf-grid { grid-template-columns: minmax(0, 1fr); }
  .ce-reference .cf-cell,
  .ce-reference .cf-cell:nth-child(4n+1), .ce-reference .cf-cell:nth-child(4n),
  .ce-reference .cf-cell:nth-child(2n+1), .ce-reference .cf-cell:nth-child(2n) {
    padding: 20px 0;
  }
  .ce-reference .cf-tools { gap: 12px; }
  .ce-reference .cf-search { width: 100%; }
  /* The chips keep one row and scroll sideways rather than wrapping into a
     ragged stack. The scrollbar is hidden because the row is clearly cut off
     at the edge, which is the affordance. */
  .ce-reference .cf-chips {
    width: 100%; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-scroll-behavior: auto;
  }
  .ce-reference .cf-chips::-webkit-scrollbar { display: none; }
  .ce-reference .cf-chip { flex: 0 0 auto; }
  .ce-reference .cf-sort { width: 100%; }
  .ce-reference .cf-select { flex: 1; }
  .ce-reference .cf-select select { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .ce-reference .cf-chip, .ce-reference .cf-search,
  .ce-reference .cf-select select, .ce-reference .cf-clear,
  .ce-reference .cf-cell dd a {
    transition: color var(--t-control) var(--ease), border-color var(--t-control) var(--ease),
                background-color var(--t-control) var(--ease);
  }
}

/* 9d. Three column variant --------------------------------------------
   The player page has six values rather than eight, and six divides by three,
   two and one. Same hairline-from-the-grid-gap trick, different column count,
   so the first and last cell in a row still sit flush with the page edge. */
.ce-reference .cf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ce-reference .cf-grid-3 .cf-cell:nth-child(4n+1),
.ce-reference .cf-grid-3 .cf-cell:nth-child(4n)   { padding-left: 22px; padding-right: 22px; }
.ce-reference .cf-grid-3 .cf-cell:nth-child(3n+1) { padding-left: 0; }
.ce-reference .cf-grid-3 .cf-cell:nth-child(3n)   { padding-right: 0; }
@media (max-width: 1000px) {
  .ce-reference .cf-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-reference .cf-grid-3 .cf-cell:nth-child(3n+1),
  .ce-reference .cf-grid-3 .cf-cell:nth-child(3n)   { padding-left: 20px; padding-right: 20px; }
  .ce-reference .cf-grid-3 .cf-cell:nth-child(2n+1) { padding-left: 0; }
  .ce-reference .cf-grid-3 .cf-cell:nth-child(2n)   { padding-right: 0; }
}
@media (max-width: 640px) {
  .ce-reference .cf-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .ce-reference .cf-grid-3 .cf-cell,
  .ce-reference .cf-grid-3 .cf-cell:nth-child(2n+1), .ce-reference .cf-grid-3 .cf-cell:nth-child(2n),
  .ce-reference .cf-grid-3 .cf-cell:nth-child(3n+1), .ce-reference .cf-grid-3 .cf-cell:nth-child(3n) {
    padding: 20px 0;
  }
}

/* --- 10. Club page ------------------------------------------------------
   Four bands: who the club is, where they stand this season, the four things
   a reader looks up, and how last season ended.

   The page is accented in the club's own colour. Three custom properties are
   set on the wrapper by the view, which has already measured them in Node:
   --club-accent draws rules, fills and icons and is only ever a colour that
   reaches 3:1 on Deep Black; --club-ink sets text in the accent and falls back
   to white when the accent is under 4.5:1; --club-on is what goes on top of the
   accent when it is used as a fill. Six of the twelve clubs store a colour that
   qualifies, the other six fall back to Caspian Blue. Nothing here recomputes
   any of that, and the accent never leaves this block, so the header, footer,
   navigation and links stay the site's blue. */

.ce-reference .cb { margin: 0 0 36px; }
.ce-reference .cb-none { color: var(--text-quiet); font-weight: 600; }
.ce-reference .cb-lab {
  margin: 0 0 12px; font: 600 11px/1.4 var(--text-face);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-quiet);
}
.ce-reference .cb-sub { margin: 12px 0 0; font: 400 13px/1.55 var(--text-face); color: var(--text-quiet); }
.ce-reference .cb-empty { margin: auto 0 0; font: 600 16px var(--text-face); color: var(--text-quiet); }

/* 10a. Hero -------------------------------------------------------------- */
/* No photograph exists for any club, so the band is carried by the crest, the
   name at true display size and a wash of the club colour standing in for the
   image. The wash is generated from the accent, not loaded, so it costs
   nothing and is correct for every club. */
.ce-reference .cb-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 46px; align-items: center;
  padding: 30px 0 40px; border-bottom: 2px solid var(--club-accent);
}
.ce-reference .cb-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .14;
  background: linear-gradient(100deg, transparent 38%, var(--club-accent) 132%);
}
.ce-reference .cb-hero > * { position: relative; z-index: 1; }
/* A grid child will not shrink below its content unless told to, and the club
   name is display type, so without this the hero can push the page wider than
   the screen while the web font is still loading and the wider fallback face is
   standing in for it. */
.ce-reference .cb-id { min-width: 0; }
.ce-reference .cb-crest { width: 150px; height: 150px; object-fit: contain; }
.ce-reference .cb-eyebrow {
  margin: 0 0 18px; font: 600 11px/1 var(--text-face);
  letter-spacing: .24em; text-transform: uppercase; color: var(--text-quiet);
}
.ce-reference .cb-eyebrow span { color: var(--club-ink); }
.ce-reference .cb .cb-id h1 { margin: 0; display: flex; flex-direction: column; gap: 8px; text-transform: none; }
.ce-reference .cb-lead {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 5.2vw, 74px); line-height: .96; letter-spacing: -.055em;
  text-transform: uppercase; color: var(--text);
  overflow-wrap: break-word; hyphens: none;
}
.ce-reference .cb-tail {
  font: 600 clamp(13px, 1.5vw, 21px)/1.2 var(--text-face);
  letter-spacing: .32em; text-transform: uppercase; color: var(--text-quiet);
}
.ce-reference .cb-nick { margin: 20px 0 0; font: 400 17px/1.5 var(--text-face); color: var(--text); }
.ce-reference .cb-meta { margin: 6px 0 0; font: 400 14px/1.55 var(--text-face); color: var(--text-quiet); }
.ce-reference .cb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.ce-reference .cb-chip {
  display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px;
  border: 1px solid var(--club-accent); color: var(--text);
  font: 600 11.5px var(--text-face); letter-spacing: .1em; text-transform: uppercase;
}
.ce-reference .cb-chip svg { width: 16px; height: 16px; color: var(--club-accent); }

/* 10b. Season band ------------------------------------------------------- */
/* Five figures on one row, divided by hairlines drawn as a 1px grid gap over a
   rule-coloured background, so the lines redraw themselves when the column
   count changes. The form cell takes the full width as soon as five no longer
   fit, which is what stops a single figure being stranded on a row. */
.ce-reference .cb-season { position: relative; padding: 32px 0 34px; }
.ce-reference .cb-season::before {
  content: ''; position: absolute; top: 0; left: 0; width: 170px; height: 3px; background: var(--club-accent);
}
.ce-reference .cb-band-head {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline;
  justify-content: space-between; margin: 0 0 28px;
}
.ce-reference .cb .cb-band-label {
  margin: 0; font-family: var(--text-face); font-weight: 700; font-size: 12px; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase; color: var(--club-ink);
}
/* No text-transform here. CSS uppercasing turns the Azerbaijani dotted i into a
   plain I outside an Azerbaijani locale, which misspells the league's name, so
   the capitals are written out in the markup instead. */
.ce-reference .cb-league {
  display: inline-flex; align-items: center; gap: 9px; color: var(--link);
  font: 600 11px var(--text-face); letter-spacing: .16em;
  border-bottom: 1px solid transparent;
}
.ce-reference .cb-league:hover { border-bottom-color: var(--link); text-decoration: none; }

.ce-reference .cb-figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--rule); }
.ce-reference .cb-fig { background: var(--ink); padding: 2px 24px; min-width: 0; }
.ce-reference .cb-fig:nth-child(5n+1) { padding-left: 0; }
.ce-reference .cb-fig:nth-child(5n)   { padding-right: 0; }
.ce-reference .cb-num {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(32px, 3.4vw, 50px); line-height: 1; letter-spacing: -.055em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.ce-reference .cb-num i { font-style: normal; font-size: .4em; letter-spacing: .02em; margin-left: .09em; color: var(--club-ink); }
.ce-reference .cb-num-none { margin: 0; font: 600 17px/1.3 var(--text-face); color: var(--text-quiet); }
.ce-reference .cb-points { display: flex; align-items: flex-start; gap: 18px; }
.ce-reference .cb-wdl {
  margin: 0; padding: 4px 0 0; list-style: none;
  font: 400 13px/1.5 var(--text-face); color: var(--text-quiet); font-variant-numeric: tabular-nums;
}
/* A win is the club's own colour, a draw is Silver, a loss is a Gray outline.
   The mockup used green, which is not in this palette. */
.ce-reference .cb-form { display: flex; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ce-reference .cb-r {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  font: 700 14px var(--text-face); letter-spacing: .02em;
}
.ce-reference .cb-r-w { background: var(--club-accent); color: var(--club-on); }
.ce-reference .cb-r-d { border: 1px solid var(--silver); color: var(--silver); }
.ce-reference .cb-r-l { border: 1px solid var(--grey); color: var(--text-quiet); }

/* 10c. Detail cards ------------------------------------------------------ */
/* Deliberately uneven: the ground is wide and carries the only real photograph
   we hold, the coach is tall, and management sits above squad in one column.
   Explicit areas at every breakpoint, so the row always fills. */
.ce-reference .cb-cards {
  display: grid; gap: 14px; margin: 26px 0 0;
  grid-template-columns: 4fr 3fr 3fr 2fr;
  grid-template-areas:
    "ground coach mgmt    colours"
    "ground coach squad   colours";
}
.ce-reference .cb-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--ink-raised); border: 1px solid var(--rule); padding: 20px;
}
.ce-reference .cb-ground  { grid-area: ground; }
.ce-reference .cb-coach   { grid-area: coach; }
.ce-reference .cb-mgmt    { grid-area: mgmt; }
.ce-reference .cb-squad   { grid-area: squad; }
.ce-reference .cb-colours { grid-area: colours; }

.ce-reference .cb .cb-card h3 { margin: 0; font: 700 19px/1.3 var(--text-face); letter-spacing: -.02em; color: var(--text); text-transform: none; }
.ce-reference .cb-card h3 a { color: var(--text); border-bottom: 1px solid var(--rule-loud); }
.ce-reference .cb-card h3 a:hover { color: var(--link); border-bottom-color: var(--link); text-decoration: none; }
.ce-reference .cb-mark { display: inline-flex; color: var(--club-accent); }
.ce-reference .cb-coach .cb-mark { margin-bottom: 14px; }
.ce-reference .cb-coach .cb-mark svg { width: 30px; height: 30px; }

.ce-reference .cb-shot { display: block; margin: 0 0 16px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.ce-reference .cb-shot img { width: 100%; height: 100%; object-fit: cover; }
.ce-reference .cb-ground-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; }
.ce-reference .cb-place { display: flex; align-items: center; gap: 7px; margin: 9px 0 0; font: 400 13px var(--text-face); color: var(--text-quiet); }
.ce-reference .cb-place svg { color: var(--club-accent); }
.ce-reference .cb-cap { margin: 0; text-align: right; border-left: 1px solid var(--rule); padding-left: 16px; flex-shrink: 0; }
.ce-reference .cb-cap b {
  display: block; font-family: var(--display); font-weight: 800; font-size: 22px;
  line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--text);
}
.ce-reference .cb-cap span { display: block; margin-top: 7px; font: 600 10px var(--text-face); letter-spacing: .14em; text-transform: uppercase; color: var(--text-quiet); }
.ce-reference .cb-credit { margin: 14px 0 0; font: 400 11px/1.5 var(--text-face); color: var(--text-quiet); }

/* Neither of these cards has an image, and both stand two rows tall beside the
   ground card, so their content is centred in the space rather than sitting at
   the bottom of an empty box. The label stays at the top where the other cards
   keep theirs. */
.ce-reference .cb .cb-coach > :nth-child(2),
.ce-reference .cb .cb-colours > :nth-child(2) { margin-top: auto; }
.ce-reference .cb .cb-coach > :last-child,
.ce-reference .cb .cb-colours > :last-child { margin-bottom: auto; }
.ce-reference .cb-squad-row { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.ce-reference .cb-squad-row b {
  font-family: var(--display); font-weight: 800; font-size: 38px; line-height: 1;
  letter-spacing: -.055em; font-variant-numeric: tabular-nums; color: var(--text);
}
/* Squares, not the mockup's circles, because every other shape on this site is
   square and the dossier swatches already read this way. */
.ce-reference .cb-sw { display: flex; gap: 12px; margin: 0 0 18px; }
.ce-reference .cb-sw i { width: 44px; height: 44px; border: 1px solid var(--grey); }

/* 10d. Last season ------------------------------------------------------- */
/* A closing strip rather than a sixth card, opened by a short accent bar. */
.ce-reference .cb-last {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
  margin: 14px 0 0; padding: 20px 0 20px 22px;
  border-top: 1px solid var(--rule); border-left: 4px solid var(--club-accent);
}
.ce-reference .cb-last .cb-lab { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ce-reference .cb-last .cb-lab span { color: var(--text-quiet); letter-spacing: .16em; }
.ce-reference .cb-last-fig {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1;
  letter-spacing: -.055em; font-variant-numeric: tabular-nums; color: var(--text);
}
.ce-reference .cb-last-fig i { font-style: normal; font-size: .44em; margin-left: .08em; color: var(--club-ink); }
.ce-reference .cb-last-rest { margin: 0; font: 600 13px var(--text-face); letter-spacing: .1em; text-transform: uppercase; color: var(--text-quiet); }

/* 10e. Club page responsive ---------------------------------------------- */
@media (max-width: 1200px) {
  .ce-reference .cb-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ce-reference .cb-fig { padding: 2px 22px; }
  .ce-reference .cb-fig:nth-child(4n+1) { padding-left: 0; }
  .ce-reference .cb-fig:nth-child(4n)   { padding-right: 0; }
  .ce-reference .cb-fig-form { grid-column: 1 / -1; padding: 24px 0 2px; }
}
@media (max-width: 1100px) {
  .ce-reference .cb-cards {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "ground  ground"
      "coach   mgmt"
      "squad   colours";
  }
  .ce-reference .cb .cb-coach > :nth-child(2), .ce-reference .cb .cb-colours > :nth-child(2) { margin-top: 0; }
  .ce-reference .cb .cb-coach > :last-child, .ce-reference .cb .cb-colours > :last-child { margin-bottom: 0; }
  .ce-reference .cb-coach .cb-mark { margin: 2px 0 14px; }
}
@media (max-width: 900px) {
  .ce-reference .cb-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-reference .cb-fig { padding: 2px 20px; }
  .ce-reference .cb-fig:nth-child(2n+1) { padding-left: 0; }
  .ce-reference .cb-fig:nth-child(2n)   { padding-right: 0; }
  .ce-reference .cb-fig-form { grid-column: 1 / -1; padding: 24px 0 2px; }
}
@media (max-width: 820px) {
  .ce-reference .cb-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 20px; }
  .ce-reference .cb-crest { width: 96px; height: 96px; }
  .ce-reference .cb-nick { margin-top: 16px; font-size: 16px; }
}
@media (max-width: 640px) {
  .ce-reference .cb-cards {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ground" "coach" "squad" "mgmt" "colours";
  }
  .ce-reference .cb-points { gap: 14px; }
  .ce-reference .cb-r { width: 34px; height: 34px; }
  .ce-reference .cb-last { gap: 16px; padding-left: 18px; }
  .ce-reference .cb-last-fig { font-size: 34px; }
  .ce-reference .cb-sw i { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ce-reference .cb-card h3 a, .ce-reference .cb-league {
    transition: color var(--t-control) var(--ease), border-color var(--t-control) var(--ease);
  }
}

/* 10f. Player page -------------------------------------------------------
   No player has a photograph, so the shirt number takes the position the crest
   holds on a club page: same size, same weight in the composition, drawn in the
   club's own colour. */
.ce-reference .cb-shirt {
  display: flex; align-items: center; justify-content: center;
  width: 150px; height: 150px; margin: 0;
  background: var(--ink-raised); border: 2px solid var(--club-accent);
  font-family: var(--display); font-weight: 800; font-size: 62px; line-height: 1;
  letter-spacing: -.06em; font-variant-numeric: tabular-nums; color: var(--text);
}
.ce-reference .cb-chips li { display: flex; }
.ce-reference a.cb-chip { gap: 10px; }
.ce-reference a.cb-chip img { width: 20px; height: 20px; object-fit: contain; }
.ce-reference a.cb-chip:hover { color: var(--text); border-color: var(--club-ink); text-decoration: none; }

/* 10g. Stadium page ------------------------------------------------------
   The photographic hero stays, its three figures move onto the display face
   with lining numerals so they read as figures rather than as labels. */
.ce-reference .st-hero-stats b {
  font-family: var(--display); font-weight: 800; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .ce-reference .cb-shirt { width: 96px; height: 96px; font-size: 40px; }
}

/* 10h. Capacity bars and the comparison rows -----------------------------
   These carry over from the Alov theme, where the bar was a rounded gradient
   between the old cyan and a sky blue, the leading club was marked in cyan, and
   the figures were set in a condensed face. All three are off the system. The
   bar becomes a square rule in the page's accent, the marked row takes a short
   accent bar on its left rather than a tinted background, and the figures move
   onto the display face with lining numerals. */
.ce-reference .st-bar { border-radius: 0; background: #262626; }
.ce-reference .st-bar i { border-radius: 0; background: var(--club-accent, var(--accent)); }
.ce-reference .st-bar i.league { background: var(--club-accent, var(--accent)); }
.ce-reference .st-bar i.major  { background: var(--silver); }
.ce-reference .st-bar i.other  { background: var(--grey); }

.ce-reference .st-compare { background: var(--ink-raised); border: 1px solid var(--rule); border-radius: 0; }
.ce-reference .st-row b {
  font-family: var(--display); font-weight: 800; font-size: 15px;
  letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--text-quiet);
}
.ce-reference .st-row.is-this { background: none; border-left: 3px solid var(--club-accent, var(--accent)); }
.ce-reference .st-row.is-this a { color: var(--text); }
.ce-reference .st-row.is-this b { color: var(--text); }

/* 10i. The opening sentence ----------------------------------------------
   Answer first. One sentence built from stored fields, sitting between the hero
   and the detail, saying what the page is about before any layout has to be read.
   It is the same text as the meta description, so a reader and a crawler are
   given the same answer. Measured for reading rather than for filling the width. */
.ce-reference .cb-answer {
  max-width: 74ch; margin: 22px 0 0;
  font: 400 17px/1.65 var(--text-face); color: var(--text);
}
.ce-reference .cb-hero + .cb-answer { margin-top: 24px; }
.ce-reference .cb-answer + .cb-season { padding-top: 26px; }
@media (max-width: 640px) { .ce-reference .cb-answer { font-size: 16px; } }
.ce-reference .cb-updated {
  margin: 10px 0 0; font: 400 13px/1.5 var(--text-face); color: var(--text-quiet);
}

/* --- 11. The season calendar --------------------------------------------
   The fixtures page is a calendar with one matchday open beneath it. All of its
   state is in the URL, so every day in the grid is a link and the whole thing
   works with scripting switched off. The months are <details> elements for the
   same reason: opening one needs no script either. */
.ce-reference .cal { margin: 0 0 34px; }
.ce-reference .cal-filters { margin-bottom: 22px; }
.ce-reference .cal-month { border-top: 1px solid var(--rule); }
.ce-reference .cal-month:last-of-type { border-bottom: 1px solid var(--rule); }
.ce-reference .cal-month > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 16px 0; cursor: pointer; list-style: none;
}
.ce-reference .cal-month > summary::-webkit-details-marker { display: none; }
.ce-reference .cal-month > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ce-reference .cal-mname {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  letter-spacing: -.04em; text-transform: uppercase; color: var(--text);
}
.ce-reference .cal-mcount { font: 400 13px var(--text-face); color: var(--text-quiet); }
.ce-reference .cal-month[open] > summary .cal-mname { color: var(--text); }

.ce-reference .cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px; padding: 4px 0 22px;
}
.ce-reference .cal-dow {
  font: 600 10px/1 var(--text-face); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-quiet); padding: 0 0 8px;
}
.ce-reference .cal-day {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 58px; padding: 7px 8px; border: 1px solid var(--rule);
  font: 400 12px var(--text-face); color: var(--text-quiet);
}
.ce-reference .cal-day i { font-style: normal; font-variant-numeric: tabular-nums; }
/* A day with no football is visibly a day with no football rather than a hole. */
.ce-reference .cal-day.empty { background: none; border-style: dotted; }
.ce-reference .cal-day.has {
  background: var(--ink-raised); border-color: var(--grey); color: var(--text); text-decoration: none;
}
.ce-reference .cal-day i { font: 600 12px var(--text-face); color: var(--text); }
.ce-reference .cal-day.empty i { color: var(--text-quiet); font-weight: 400; }
/* The date leads and the count follows it, because the grid is read as dates
   first. The count is what the day is for, not what it is. */
.ce-reference .cal-day.has b {
  align-self: flex-start; font: 400 11px var(--text-face);
  font-variant-numeric: tabular-nums; color: var(--text-quiet);
}
.ce-reference .cal-day.has u {
  display: block; width: 100%; height: 2px; background: var(--accent); margin-top: 4px;
}
.ce-reference .cal-day.has:hover { border-color: var(--accent); color: var(--text); }
.ce-reference .cal-day.has:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* A whole matchday is three or four days, so filling each one solid put Caspian
   Blue across a tenth of the grid. It is a two percent colour: it marks the
   selection with a rule and the date, and leaves the surface alone. */
.ce-reference .cal-day.sel { border-color: var(--accent); box-shadow: inset 0 3px 0 0 var(--accent); }
.ce-reference .cal-day.sel i { color: var(--link); font-weight: 700; }
.ce-reference .cal-day.sel b { color: var(--text); }
.ce-reference .cal-day.today { box-shadow: inset 0 0 0 1px var(--silver); }
.ce-reference .cal-pad { min-height: 58px; }

/* The open matchday. */
.ce-reference .md-head {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; justify-content: space-between;
  border-top: 2px solid var(--accent); padding: 18px 0 16px;
}
.ce-reference .cb .md-head h2, .ce-reference .md-head h2 {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -.05em; text-transform: uppercase; color: var(--text);
}
.ce-reference .md-when { margin: 8px 0 0; font: 400 14px var(--text-face); color: var(--text-quiet); }
/* The state is a word first. The border is decoration on top of the word, never
   the only thing carrying the meaning. */
.ce-reference .md-state {
  margin: 0; padding: 7px 14px; border: 1px solid var(--grey);
  font: 600 11px var(--text-face); letter-spacing: .12em; text-transform: uppercase; color: var(--text);
}
.ce-reference .md-complete { border-color: var(--silver); color: var(--silver); }
.ce-reference .md-part { border-color: var(--accent); }
.ce-reference .md-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }

/* A postponed match, and a European tie among league fixtures. */
.ce-reference .fx-pst .score { color: var(--text-quiet); }
.ce-reference .fx-euro { border-left: 3px solid var(--accent); }
.ce-reference .fx .venue { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ce-reference .fx .venue span + span::before { content: ''; }

@media (max-width: 700px) {
  .ce-reference .cal-grid { gap: 4px; }
  .ce-reference .cal-day, .ce-reference .cal-pad { min-height: 46px; padding: 5px; }
  .ce-reference .cal-day.has b { font-size: 12px; }
  .ce-reference .md-head { gap: 10px; }
}
.ce-reference .fx-group {
  margin: 22px 0 10px; font: 600 11px var(--text-face);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-quiet);
}
.ce-reference .fx-group:first-of-type { margin-top: 0; }

/* The standing line.
 *
 * Two rules, deliberately. The plain `.ce-standing` rule is the safe one and
 * works wherever the element is; `.ce-header > .ce-standing` is the treatment it
 * gets in the header row.
 *
 * The reason for the split is a deployment, not a design. Stylesheets are files
 * on disk and markup comes from a running process, so between copying new files
 * up and restarting, a browser can be handed the new stylesheet and the old
 * markup. When this rule assumed the element was a flex item in the header, that
 * pairing put the line in the top left corner of the window with a stray rule
 * beside it. Written this way, the old markup still gets a sensible centred line
 * and the new markup gets the design, so a restart improves the page instead of
 * being the thing that stops it looking broken.
 */
.ce-standing {
  width: min(var(--measure), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
  padding: 14px 0 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: none;
  color: var(--text-quiet);
}
.ce-standing span { display: inline; }

/* In the header row: last in the row, after the navigation, three short lines
 * stacked. A single long line at this size would be a thin grey stripe across
 * the header and would not be read.
 *
 * The separator is a pseudo-element rather than a left border, so its height is
 * chosen rather than inherited from the text. One hairline, 46px against a 100px
 * row, which reads as a divider between two things rather than the edge of a box
 * around one of them.
 *
 * It is --rule-loud, not --rule-firm. Measured, --rule-firm is 2.19:1 against the
 * page and a rule needs 3; --rule-loud is 3.23:1 and was already in the palette.
 * The header's own bottom rule is still --rule-firm and so is still under 3,
 * which is a separate decision and not one to make quietly here.
 *
 * text-transform stays none. The capitals are written into the markup in
 * chrome.js, because CSS uppercasing applies English rules and breaks the
 * Azerbaijani dotted i. There is no dotted i in these three words, but the site
 * does it this way everywhere so nobody has to remember the exceptions.
 */
.ce-header > .ce-standing {
  position: relative;
  flex-shrink: 0;
  width: auto;
  margin: 0;
  padding: 0 0 0 26px;
  text-align: left;
  font-size: 9.5px;
  line-height: 1.5;
  letter-spacing: .15em;
}
.ce-header > .ce-standing span { display: block; }
.ce-header > .ce-standing::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 46px;
  background: var(--rule-loud);
}

/* Tablets: the strapline sits beside the wordmark.
 *
 * The principle, which is the same one the phone rule below follows: a strapline
 * belongs to the mark, not to the page. It is a descriptor of the title, so it
 * is set against the title. That is how a masthead is built, and it is why the
 * version this replaces read badly: a 10.5px line centred across the whole
 * window, touching nothing, belonging to nothing.
 *
 * On a tablet there is room to put it where it belongs and keep one row. At
 * 768px the row needs about 210 for the logo, 180 for this block and 61 for the
 * menu button, which is 475 of the 720 available. At 1149 there are 1053. It
 * fits everywhere in this band with room to spare.
 *
 * margin-right: auto is what holds it against the logo. The header is
 * space-between, so without it the three items would spread across the row and
 * the strapline would float in the middle, belonging to nothing again.
 *
 * The header gets shorter as a side effect, because it goes back to one row.
 */
@media (max-width: 1150px) {
  .ce-header { flex-wrap: wrap; min-height: 0; padding: 16px 0; column-gap: 24px; row-gap: 14px; }
  /* Only the logo gets the height. The menu is a <details> whose panel is pinned
     46px from its own top, which is just under a 44px summary. Giving the details
     a height of its own, as an earlier version of this rule did, left the summary
     floating in the middle of an 86px box with the panel still pinned at 46px,
     so the menu opened across the masthead instead of below the button. */
  .ce-header > a { min-height: 62px; display: flex; align-items: center; }

  .ce-header > .ce-standing {
    order: 0;
    flex: 0 1 auto;
    margin: 0 auto 0 0;
    padding: 1px 0 1px 12px;
    border-left: 3px solid var(--blue);
    text-align: left;
    color: var(--white);
    font-size: clamp(14px, 1.6vw, 17px);
    line-height: 1.16;
    letter-spacing: .075em;
  }
  .ce-header > .ce-standing span { display: block; }
  .ce-header > .ce-standing::before { content: none; }
}

/* Phones: the same strapline, under the wordmark instead of beside it.
 *
 * Below about 540px there is no longer room to set it against the logo on one
 * row: at 390 the logo takes 178 of the 342 available and the menu button takes
 * 61, which leaves 79, and the word AZERBAIJANI alone needs 81 at eight pixels.
 * So the lockup stacks rather than breaks. Same idea, one arrangement down.
 *
 * The break is at 700, which is past every phone and short of an iPad upright at
 * 768, and it leaves the 540 to 700 band on the stacked arrangement where it has
 * room to breathe rather than squeezing it onto one row.
 *
 * The type is a step smaller than the tablet band on purpose. On a small screen
 * the strapline sits directly above the first headline, and it has to read as a
 * descriptor of the title rather than as a headline of its own.
 */
@media (max-width: 700px) {
  .ce-header { padding: 14px 0 16px; row-gap: 10px; column-gap: 12px; }
  .ce-header > a { min-height: 0; }
  .ce-logo { width: 178px; }

  .ce-header > .ce-standing {
    order: 1;
    flex-basis: 100%;
    margin: 0;
    /* A step down from clamp(12px, 3.6vw, 15px), which read as a second headline
       stacked on the first. At roughly three quarters of that it sits as a
       descriptor of the wordmark instead of arguing with it.

       The floor is 10px and it is deliberate. The version this design replaced
       was 10.5px, and the reason it failed was not its size: it was centred,
       full width, in Silver, on one line, attached to nothing. This is White at
       19.68:1, left aligned to the logo, stacked, and marked. Small type that
       belongs somewhere reads as a strapline; small type floating in the middle
       of a screen reads as a disclaimer. */
    font-size: clamp(10px, 2.7vw, 11.5px);
    line-height: 1.2;
    /* Opened from .075em. Letterforms this size lose their colour on a dark
       ground when they are set as tightly as display type, and the extra
       tracking is what keeps three short lines reading as a considered block
       rather than as small print. */
    letter-spacing: .095em;
  }

  /* The menu panel drops from the button and lands where this sits, cutting the
     words in half. A dropdown covering what is under it is normal; a masthead
     sliced down the middle is not, because the part still showing looks like a
     rendering fault. visibility rather than display, so the header keeps its
     height and nothing below it jumps. A browser without :has() keeps the old
     overlap, which is untidy rather than broken. */
  .ce-header:has(.ce-menu[open]) > .ce-standing { visibility: hidden; }
}

/* The plain rule, for the element outside a header. */
@media (max-width: 640px) {
  .ce-standing { font-size: 9px; letter-spacing: .16em; }
}

/* The fixture row itself, which the calendar, the club pages and the stadium
   pages all use. It carried over from the Alov theme with the score set in a
   condensed face and a cyan to red gradient behind a finished result, both of
   which are off this system. The score is a figure, so it goes on the display
   face with lining numerals, and the surface behind it is Graphite with a
   hairline rather than two colours we do not use. */
.ce-reference .fx .score {
  font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; border-radius: 0;
  background: var(--ink-raised); border: 1px solid var(--rule); padding: 6px 12px;
}
.ce-reference .fx .score.ft { background: var(--ink-raised); border-color: var(--rule-loud); }
.ce-reference .fx-pst .score { border-style: dashed; }
/* The note line sits under the match, centred with it, rather than adrift on the
   left edge of a row whose content is in the middle. */
.ce-reference .fx .venue { justify-content: center; text-align: center; }
.ce-reference .fx { padding: 14px 18px; }
@media (max-width: 700px) {
  .ce-reference .fx .venue { justify-content: flex-start; text-align: left; }
}