/* Qatar Star League — one stylesheet, build.py links it. See DESIGN.md. */

/* Fonts are served from this origin, not from Google. One less third party
   that sees a reader's IP address, and the privacy page can say "none". */
@font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/barlow-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/barlow-condensed-700.woff2) format("woff2"); }

:root {
  --ink: #0f0d0c;
  --ink-2: #1c1816;
  --ink-3: #2b2522;
  --paper: #ffffff;
  --wash: #eeeae3;
  --maroon: #8a1538;
  --maroon-2: #6d102c;
  --maroon-lit: #c2667f;
  --line: #e2dcd2;
  --line-2: #cdc4b6;
  --grey: #6a6259;
  --grey-2: #8d857a;

  --c-champ: #8a1538;
  --c-cont: #1d7a52;
  --c-po: #b26a00;
  --c-rel: #a32020;

  --head: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --page: 1220px;
  --gutter: 18px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--wash);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--maroon); text-underline-offset: 2px; }
a:hover { color: var(--ink); }
/* The global hover darkens the link, which is invisible on the dark bars.
   Anything sitting on ink says what it does on hover for itself. */
.masthead a:hover, .topbar a:hover, .foot a:hover, .panel.dark a:hover { color: #fff; }
.brand:hover .wm { color: #fff; }
.brand:hover .wm b { color: var(--maroon-lit); }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* ============ Top bar ============ */

.topbar { background: var(--ink); color: #9b938a; font-size: 12.5px; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; padding-block: 6px; }
.topbar b { color: var(--maroon-lit); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.topbar .sep { margin-left: auto; }

/* ============ Masthead ============ */

.masthead { background: var(--ink-2); border-bottom: 3px solid var(--maroon); }
.masthead .wrap { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; padding-block: 11px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; }
.brand .wm { font: 700 clamp(23px, 3vw, 30px)/0.92 var(--head); text-transform: uppercase; }
.brand .wm b { color: var(--maroon-lit); font-weight: 700; }
.brand .sub { display: block; margin-top: 3px; font: 600 9.5px/1 var(--body); letter-spacing: .15em; text-transform: uppercase; color: #8e857c; }

.mainnav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a {
  padding: 8px 13px; color: #ddd6cf; text-decoration: none; white-space: nowrap;
  font: 600 15px/1 var(--head); letter-spacing: .08em; text-transform: uppercase;
}
.mainnav a:hover { background: var(--ink-3); color: #fff; }
.mainnav a.on { background: var(--maroon); color: #fff; }

/* ============ Club chip row ============ */

.chiprow { background: var(--paper); border-bottom: 1px solid var(--line); }
.chiprow .wrap { display: flex; gap: 8px; overflow-x: auto; padding-block: 9px; scrollbar-width: thin; }
.chip {
  display: flex; align-items: center; gap: 7px; flex: none;
  padding: 5px 11px 5px 6px; background: var(--wash); border: 1px solid var(--line);
  border-radius: 999px; text-decoration: none; color: var(--ink);
  font: 600 14px/1 var(--head); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============ Results strip ============ */

.scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(163px, 1fr)); gap: 9px; margin: 16px 0 0; }
.match { background: var(--paper); border: 1px solid var(--line); padding: 9px 11px 10px; }
.match .comp { display: flex; justify-content: space-between; gap: 8px; font: 600 10px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 7px; }
.match .side { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.match .side span { font: 600 16px/1.1 var(--head); text-transform: uppercase; }
.match .side em { margin-left: auto; font: 700 17px/1 var(--head); font-style: normal; }
.match .side.w em, .match .side.w span { color: var(--maroon); }

/* ============ Page shell ============ */

main { padding: 18px 0 8px; }

h1 { margin: 0 0 10px; font: 700 clamp(29px, 4.2vw, 42px)/1.06 var(--head); }
h2 { margin: 0 0 10px; font: 700 clamp(21px, 2.4vw, 27px)/1.1 var(--head); }
h3 { margin: 0 0 6px; font: 600 19px/1.17 var(--head); }
p { margin: 0 0 14px; max-width: 72ch; }
.dek { font-size: 19px; color: var(--grey); max-width: 64ch; }

/* The panel: a titled block with its own ground, the way a German sports
   front stacks Fussball / Newsticker / Handball one under the other. */
.panel { background: var(--paper); border: 1px solid var(--line); padding: 16px 18px 20px; margin-bottom: 16px; }
.panel.dark { background: var(--ink); border-color: var(--ink); color: #ddd6cf; }
.panel.dark h2, .panel.dark b { color: #fff; }
.panel.dark a { color: #fff; }
.panel.dark .ptitle { border-bottom-color: #3a322e; }

.ptitle { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.ptitle h2 { margin: 0; text-transform: uppercase; letter-spacing: .02em; }
.ptitle .tag { padding: 4px 9px 3px; background: var(--maroon); color: #fff; font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.ptitle .note { margin-left: auto; font: 600 11.5px/1 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--grey-2); }

.more { display: flex; justify-content: flex-end; margin-top: 14px; }
.more a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
  background: var(--wash); border: 1px solid var(--line); text-decoration: none; color: var(--ink);
  font: 600 12.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
}
.more a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ============ Hero ============ */

.hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }

.lead { position: relative; margin: 0; background: var(--ink); overflow: hidden; }
.lead img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .8; }
.lead .over {
  position: absolute; inset: auto 0 0 0; padding: 80px 22px 18px;
  background: linear-gradient(to top, rgba(8,7,6,.95) 12%, rgba(8,7,6,.5) 60%, rgba(8,7,6,0));
  color: #fff;
}
.lead .kick { display: inline-block; margin-bottom: 8px; padding: 4px 9px 3px; background: var(--maroon); font: 600 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.lead h1 { color: #fff; max-width: 22ch; margin-bottom: 7px; }
.lead p { color: #d6cec8; max-width: 58ch; margin: 0; font-size: 16.5px; }
.lead figcaption { position: absolute; right: 8px; top: 8px; padding: 3px 8px; background: rgba(8,7,6,.62); color: #d8d2cb; font-size: 12px; }
.lead figcaption a { color: #ece6e0; }

/* Dated season diary: the ticker column, except every line is a fact with a date */
.diary { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.diary h2 { margin: 0; padding: 9px 13px 8px; background: var(--ink); color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: .09em; }
.diary ol { margin: 0; padding: 0; list-style: none; flex: 1; }
.diary li { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--line); font-size: 15px; }
.diary time { font: 600 11px/1.35 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--maroon); padding-top: 2px; }
.diary .what { color: var(--ink); }

/* Next round: the same column slot as the diary, one row per match */
.fixlist { margin: 0; padding: 0; list-style: none; }
.fixlist li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--line); }
.fixlist li:last-child { border-bottom: 0; }
.fixlist .when { font: 600 11px/1.35 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--maroon); padding-top: 3px; }
.fixlist .tie { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font: 600 15px/1.2 var(--head); text-transform: uppercase; }
.fixlist .tie i { font-style: normal; color: var(--grey-2); font-size: 12px; letter-spacing: .1em; }
.fixlist .at { display: block; margin-top: 3px; font-size: 12.5px; color: var(--grey-2); }

.asof { display: block; margin: 10px 0 0; font-size: 13px; color: var(--grey-2); }

.scorerlist { margin: 0; padding: 0; list-style: none; }
.scorerlist li { display: flex; align-items: baseline; gap: 9px; padding: 7px 13px; border-bottom: 1px solid var(--line); font-size: 15px; }
.scorerlist li:last-child { border-bottom: 0; }
.scorerlist .who { font-weight: 600; }
.scorerlist .cl { color: var(--grey-2); font-size: 13px; }
.scorerlist .g { margin-left: auto; font: 700 17px/1 var(--head); color: var(--maroon); }

/* ============ Story cards ============ */

.stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.story { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.story img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.story .in { padding: 11px 13px 13px; }
.story .kick { display: block; margin-bottom: 4px; font: 600 10.5px/1 var(--body); letter-spacing: .13em; text-transform: uppercase; color: var(--maroon); }
.story h3 a { color: var(--ink); text-decoration: none; }
.story:hover { border-color: var(--line-2); }
.story:hover h3 a { color: var(--maroon); }
.story p { margin: 0; font-size: 15px; color: var(--grey); }

/* ============ Crests ============ */

.crest { flex: none; display: block; }
.crest-row { display: flex; align-items: center; gap: 9px; }

.clubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
.clubcard { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 11px; align-items: center;
  padding: 11px 12px; background: var(--wash); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.clubcard:hover { background: var(--paper); border-color: var(--line-2); }
.clubcard b { display: block; font: 600 17px/1.1 var(--head); text-transform: uppercase; }
.clubcard small { display: block; font-size: 13px; color: var(--grey); }
.clubcard .t { display: block; font: 600 11px/1 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--maroon); margin-top: 3px; }

/* ============ Tables ============ */

.tablewrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); }
.panel .tablewrap { border: 0; }
table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15.5px; }
caption { text-align: left; padding: 0 0 8px; font-size: 13px; color: var(--grey); }
th {
  padding: 9px 8px; background: var(--ink); color: #fff; text-align: right;
  font: 600 11.5px/1.1 var(--head); letter-spacing: .11em; text-transform: uppercase;
}
th:first-child, th.l, td.l { text-align: left; }
td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: #faf8f5; }
td.pos { width: 2.6em; color: var(--grey); }
td.team { text-align: left; }
td.team b { font: 600 16px/1 var(--head); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
td.pts { font-weight: 600; }
tr.m-champ td.pos { box-shadow: inset 4px 0 0 var(--c-champ); }
tr.m-cont td.pos { box-shadow: inset 4px 0 0 var(--c-cont); }
tr.m-po td.pos { box-shadow: inset 4px 0 0 var(--c-po); }
tr.m-rel td.pos { box-shadow: inset 4px 0 0 var(--c-rel); }

.legend { margin: 12px 0 6px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--grey); }
.legend li { display: flex; align-items: center; gap: 7px; }
.legend i { width: 13px; height: 4px; }
.legend .k-champ { background: var(--c-champ); }
.legend .k-cont { background: var(--c-cont); }
.legend .k-po { background: var(--c-po); }
.legend .k-rel { background: var(--c-rel); }
.source { font-size: 13.5px; color: var(--grey-2); }

/* ============ Two-column body ============ */

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.rail { position: sticky; top: 14px; display: grid; gap: 16px; }
.widget { background: var(--paper); border: 1px solid var(--line); }
.widget > h2 { margin: 0; padding: 9px 13px 8px; background: var(--ink); color: #fff; font-size: 15px; letter-spacing: .09em; text-transform: uppercase; }
.widget .foot-link { display: block; padding: 9px 13px; border-top: 1px solid var(--line); font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.widget table { min-width: 0; font-size: 14.5px; }
.widget td { padding: 6px 10px; }
.widget th { padding: 7px 10px; background: var(--wash); color: var(--ink); border-bottom: 1px solid var(--line); }

.rank { margin: 0; padding: 0; list-style: none; }
.rank li { display: flex; align-items: center; gap: 10px; padding: 8px 13px; border-bottom: 1px solid var(--line); font-size: 15px; }
.rank li:last-child { border-bottom: 0; }
.rank .n { margin-left: auto; font: 700 17px/1 var(--head); color: var(--maroon); }
.rank b { font: 600 16px/1 var(--head); text-transform: uppercase; }

.factlist { margin: 0; padding: 0 13px 11px; font-size: 15px; }
.factlist div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.factlist div:last-child { border-bottom: 0; }
.factlist dt { color: var(--grey); }
.factlist dd { margin: 0; font-weight: 600; text-align: right; }

/* ============ Article blocks ============ */

.summary { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--maroon); padding: 15px 17px 3px; margin-bottom: 16px; }
.summary .kick { display: block; margin-bottom: 8px; font: 600 11px/1 var(--body); letter-spacing: .15em; text-transform: uppercase; color: var(--maroon); }
.summary p:first-of-type { font-size: 18.5px; }

.notice { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--maroon); padding: 14px 16px; margin-bottom: 16px; }
.notice p:last-child { margin-bottom: 0; }

.photo { margin: 0 0 16px; background: var(--paper); border: 1px solid var(--line); }
.photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.photo figcaption, .credit { font-size: 12.5px; color: var(--grey-2); padding: 8px 12px 10px; }
.credit { padding: 6px 0 0; }

.ground { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; background: var(--paper); border: 1px solid var(--line); margin-bottom: 12px; }
.ground img { width: 100%; height: 100%; min-height: 175px; object-fit: cover; }
.ground .in { padding: 13px 16px 15px 0; }
.ground .meta { display: flex; flex-wrap: wrap; gap: 4px 15px; margin: 0 0 7px; padding: 0; list-style: none; font: 600 11.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--grey-2); }
.ground p { margin: 0; font-size: 15.5px; color: var(--grey); }

ul.body, ol.body { max-width: 72ch; }

/* ============ Footer ============ */

.foot { margin-top: 26px; background: var(--ink); color: #9b938a; font-size: 14.5px; }
.foot .wrap { padding-block: 24px 30px; }
.foot .cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 18px; }
.foot h3 { color: #fff; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li { padding: 3px 0; }
.foot a { color: #d6cfc8; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot .disclaimer { max-width: 86ch; margin: 0; padding-top: 15px; border-top: 1px solid #2d2724; font-size: 13.5px; }

/* ============ Narrow ============ */

@media (max-width: 950px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .ground { grid-template-columns: minmax(0, 1fr); }
  .ground img { min-height: 0; aspect-ratio: 16 / 9; }
  .ground .in { padding: 0 16px 15px; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .brand .sub { display: none; }
  .mainnav { width: 100%; margin-left: 0; }
  .lead .over { padding: 46px 14px 14px; }
  .lead figcaption { display: none; }
}