/* ═══════════════════════════════════════════════════════════════════════════
   Хроника футбола (hronikafutbola.ru) — оформление печатного справочника

   Правило одно: страница должна выглядеть набранной, а не свёрстанной из
   блоков. Отсюда всё остальное — ни одного скругления и ни одной тени,
   разделяют не рамки, а линейки и воздух; шрифт всюду один и тот же
   антиквенный, включая подписи и цифры (гротеск — самый заметный признак
   интерфейса, а не книги); краски две, как в типографии: чёрная и охра.

   Раскладка повторяет книжную полосу: слева поле для колонцифр, минут и
   помет, справа — набор в 690 пикселей. Широкие вещи (таблицы, сетки
   снимков, схема поля) выходят из набора вправо, а не растягивают его:
   длинная строка нечитаема, а пустое поле слева — это поле, а не дыра.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* краски: бумага, чёрная и вторая охряная — как второй прогон в типографии */
  --paper:#F4EFE3;
  --paper-2:#EFE8D8;
  --ink:#1A1712;
  --ink-2:#453D31;
  --muted:#7C7264;
  --rule:rgba(26,23,18,.30);
  --rule-2:rgba(26,23,18,.13);
  --accent:#9A4A22;
  --accent-soft:#E7DCC4;
  --verde:#2F6B45;
  --azul:#2A4A80;

  /* полоса набора */
  --mgn:190px;                                   /* поле слева */
  --msr:690px;                                   /* ширина набора */
  --gap:clamp(18px,2.6vw,44px);
  --page:min(1240px, 100% - clamp(26px,5vw,84px));
  --indent:calc(var(--mgn) + var(--gap));   /* сдвиг до начала набора */

  --serif:"Literata","PT Serif",Georgia,"Times New Roman",serif;
  --display:"Old Standard TT","Literata",Georgia,"Times New Roman",serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#14120F;
    --paper-2:#1B1814;
    --ink:#EDE6D7;
    --ink-2:#C4BAA8;
    --muted:#8E8474;
    --rule:rgba(237,230,215,.30);
    --rule-2:rgba(237,230,215,.13);
    --accent:#D2854F;
    --accent-soft:#33261A;
    --verde:#4E9A6C;
    --azul:#6C93D2;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 18.5px/1.64 var(--serif);
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* Внутри полосы набора цифры идут «книжные» (строчные), в таблицах — таблич-
   ные: иначе колонка очков разъедется. */
.prose,.lead,.tl__body,.rel__lead{font-variant-numeric:oldstyle-nums proportional-nums}
table,.facts b,.gtable,.scorers,.tm__score,.board__score,.squad__list{
  font-variant-numeric:lining-nums tabular-nums;
}

/* ── книжная полоса ──────────────────────────────────────────────────────── */
.topbar,.crumbs,.hero,.block,.foot{
  width:var(--page);margin-left:auto;margin-right:auto;
  display:grid;
  grid-template-columns:
    [full-start] var(--mgn)
    [main-start] minmax(0,var(--msr))
    [main-end] minmax(0,1fr) [full-end];
  column-gap:var(--gap);
  align-content:start;
}
.topbar > *,.crumbs > *,.hero > *,.block > *,.foot > *{grid-column:main}

/* Что выходит за набор вправо: всё, что делится на колонки или несёт снимки. */
.block > .gtables,.block > .symbols,.block > .cups,.block > .squads,
.block > .rel,.block > .phgrid,.block > .vgrid,.block > .tmatches,
.block > .pitch,.hero > .facts,.hero > .board,
.block > .tfacts,.block > .vfacade,.block > .vplayer,.block > .tl{
  grid-column:main-start/full-end;
}

@media (max-width:1080px){
  :root{--mgn:0px;--indent:0px}
  .topbar,.crumbs,.hero,.block,.foot{
    grid-template-columns:[full-start main-start] minmax(0,1fr) [main-end full-end];
    column-gap:0;
  }
}

/* ── колонтитул ──────────────────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  position:relative;padding:26px 0 15px;
}
.brand{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.02em;
}
.brand__mark{width:23px;height:23px;color:var(--accent);flex:none}
.brand__mark svg{width:100%;height:100%}
.topnav{
  display:flex;gap:22px;flex:none;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
}
.topnav a{color:var(--muted);text-decoration:none;transition:color .15s}
.topnav a:hover{color:var(--accent)}

/* Двойная линейка «толстая + волосяная» — как под шапкой титульного листа. */
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:4px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);
}

.crumbs{
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  margin-top:14px;padding-left:var(--indent);
  font-size:12.5px;color:var(--muted);letter-spacing:.02em;
}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span:not(:last-child){opacity:.4}

/* ── шапка полосы ────────────────────────────────────────────────────────── */
.hero{padding:34px 0 4px}
/* Надзаголовок уходит в поле — там же, где на книжной полосе стоят пометы. */
.hero__kicker{
  grid-column:full-start/main-start;
  margin:.5em 0 12px;text-align:right;
  font-size:12px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.hero__h1{
  margin:0 0 26px;font-family:var(--display);font-weight:700;
  font-size:clamp(30px,5.4vw,50px);line-height:1.06;letter-spacing:-.005em;
  text-wrap:balance;
}
@media (max-width:1080px){
  .hero__kicker{grid-column:main;text-align:left;margin-top:0}
}

/* ── табло матча: набрано, а не собрано из плашек ────────────────────────── */
.board{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(10px,3.4vw,30px);
  padding:22px 0 20px;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
}
.board__team{display:flex;align-items:center;gap:15px;min-width:0}
.board__team--away{flex-direction:row-reverse;text-align:right}
.flag{width:44px;height:31px;flex:none;box-shadow:0 0 0 1px var(--rule)}
.board__name{
  font-family:var(--display);font-weight:700;
  font-size:clamp(20px,4.2vw,30px);line-height:1.1;
}
.board__score{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:5px;
  font-family:var(--display);font-weight:700;font-size:clamp(34px,8.4vw,52px);line-height:1;
}
.board__score i{font-style:normal;color:var(--accent);margin:0 3px}
.board__score em{
  flex:0 0 100%;text-align:center;font-style:italic;font-family:var(--serif);
  font-size:13px;letter-spacing:.02em;color:var(--muted);font-weight:400;margin-top:10px;
}

/* ── строка выходных данных: где, когда, при ком ─────────────────────────── */
.facts{
  list-style:none;margin:0;padding:16px 0 18px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:0;border-bottom:1px solid var(--rule);
}
.facts li{padding:0 20px;display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--rule-2)}
.facts li:first-child{padding-left:0;border-left:0}
.facts b{font-weight:700;font-size:16.5px;line-height:1.3}
.facts span{font-size:11.5px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* ── врез ────────────────────────────────────────────────────────────────── */
.lead{
  margin:28px 0 0;font-size:clamp(20px,2.5vw,22.5px);line-height:1.48;
  font-style:italic;color:var(--ink-2);
  padding-left:22px;border-left:2px solid var(--accent);
}

/* ── рубрики ─────────────────────────────────────────────────────────────── */
.block{padding:52px 0 0}
.h2{
  grid-column:main-start/full-end;
  margin:0 0 8px;font-family:var(--display);font-weight:700;
  font-size:clamp(23px,3.4vw,30px);line-height:1.16;
  padding-top:14px;border-top:1px solid var(--rule);
}
.h2 span{display:block;max-width:var(--msr)}
.h2sub{margin:0 0 24px;font-size:13.5px;font-style:italic;color:var(--muted);line-height:1.5}
.h2 + .prose,.h2 + .vfacade,.h2 + .pitch,.h2 + .tl,.h2 + .notes,.h2 + .srcs,
.h2 + .rel,.h2 + .squads,.h2 + .cups{margin-top:24px}

.prose p{margin:0 0 1.1em;hyphens:auto}
.prose p:last-child{margin-bottom:0}
.prose--tight{font-size:17.5px}
.dropcap::first-letter{
  float:left;font-family:var(--display);font-weight:700;
  font-size:3.6em;line-height:.84;padding:.05em .09em 0 0;color:var(--ink);
}

/* ── видео: не «плитка сервиса», а вклейка с подписью ────────────────────── */
.vfacade{
  position:relative;display:block;width:100%;padding:0;border:1px solid var(--rule);
  background:#0c0b09;overflow:hidden;cursor:pointer;
  aspect-ratio:16/9;color:#fff;text-align:left;transition:border-color .15s;
}
.vfacade:hover{border-color:var(--accent)}
.vfacade:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vfacade--wide{aspect-ratio:16/8.4}
.vfacade__thumb{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06);transition:filter .25s;
}
.vfacade:hover .vfacade__thumb{filter:grayscale(0) contrast(1.03)}
.vfacade__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(8,7,6,.90) 0%, rgba(8,7,6,.34) 48%, rgba(8,7,6,.10) 100%);
}
.vfacade__play{
  position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);
  width:56px;height:56px;border:1px solid rgba(255,255,255,.85);
  background:rgba(12,11,9,.42);color:#fff;
  display:grid;place-items:center;transition:background .18s,color .18s;
}
.vfacade__play svg{width:26px;height:26px;margin-left:3px}
.vfacade:hover .vfacade__play{background:var(--accent);border-color:var(--accent)}
.vfacade__meta{position:absolute;left:0;right:0;bottom:0;padding:15px 17px;display:block}
.vfacade__label{
  display:block;font-family:var(--display);font-weight:700;
  font-size:17px;line-height:1.24;color:#fff;
}
.vfacade__chan{
  display:block;margin-top:4px;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.66);
}
.vfacade__chan b{color:#E5B98A;font-weight:600}
.vplayer{width:100%;aspect-ratio:16/9;border:1px solid var(--rule);display:block;background:#000}
.vwrap__out{
  display:block;margin-top:12px;padding:10px 14px;
  border-left:2px solid var(--accent);background:var(--accent-soft);
  font-size:13.5px;line-height:1.5;color:var(--ink-2);text-decoration:none;
}
.vwrap__out b{color:var(--ink);font-weight:700}
.vwrap__out:hover{color:var(--accent)}
.undervideo{margin:13px 0 0;font-size:14px;font-style:italic;color:var(--muted);line-height:1.55}
.undervideo a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule-2)}

/* ── ход матча: минуты вынесены на поле, как в книжной хронике ───────────── */
.tl{list-style:none;margin:0;padding:0;display:block}
.tl__item{
  display:grid;
  grid-template-columns:var(--mgn) minmax(0,var(--msr));
  column-gap:var(--gap);
  padding:26px 0 28px;border-top:1px solid var(--rule-2);
}
.tl__item:first-child{border-top:0;padding-top:4px}
.tl__rail{
  grid-column:1;display:flex;align-items:baseline;align-content:flex-start;
  justify-content:flex-end;gap:10px;padding-top:.15em;
}
.tl__rail .flag{width:22px;height:15px;transform:translateY(3px)}
.tl__min{
  font-family:var(--display);font-size:23px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:lining-nums;
}
.tl__icon{width:19px;height:19px;flex:none;color:var(--muted);transform:translateY(3px)}
.tl__icon svg{width:100%;height:100%}
.tl__item--goal .tl__icon{color:var(--accent)}
.tl__item--moment .tl__icon{color:var(--accent)}
.tl__item--card .tl__icon{color:#9A7A12}
.tl__item--final .tl__icon{color:var(--ink)}

.tl__body{grid-column:2;min-width:0;border-left:0;padding-left:0}
/* Сторону различаем и цветом, и рисунком линейки: у команд бывают близкие
   палитры (Уругвай и Аргентина в финале 1930-го), да и не все читатели
   различают оттенки. */
.tl__item--home .tl__body{border-left:2px solid var(--rule);padding-left:18px}
.tl__item--away .tl__body{border-left:2px dashed var(--rule);padding-left:18px}

.tl__head{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;margin-bottom:5px}
.tl__head h3{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(20px,2.6vw,24px);line-height:1.2;
}
.tl__score{
  font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.02em;
  color:var(--accent);white-space:nowrap;font-variant-numeric:lining-nums;
}
.tl__who{
  margin:0 0 11px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
}
.tl__who span{font-weight:400;text-transform:none;letter-spacing:.02em;color:var(--muted);font-style:italic}

.caveat{
  margin:15px 0 0;padding:11px 15px;
  background:var(--accent-soft);border-left:2px solid var(--accent);
  font-size:13.5px;line-height:1.55;color:var(--ink-2);font-style:italic;
}
.tl__videos{margin-top:18px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tl__videos .vfacade__label{font-size:15px}
.tl__videos .vfacade__play{width:44px;height:44px}
.tl__videos .vfacade__play svg{width:21px;height:21px}

@media (max-width:1080px){
  .tl__item{grid-template-columns:64px minmax(0,1fr);column-gap:18px}
  .tl__rail{flex-direction:row;align-items:baseline;align-content:flex-start;gap:7px;flex-wrap:wrap}
  .tl__min{font-size:19px}
}

/* ── вклейки: снимки и сетки роликов ─────────────────────────────────────── */
.vgrid{margin-top:16px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.vgrid .vfacade__label{font-size:15px}
.vgrid .vfacade__play{width:44px;height:44px}
.vgrid .vfacade__play svg{width:21px;height:21px}

.phgrid{margin-top:20px;display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ph{margin:0}
.ph--wide{grid-column:1/-1}
.ph img{
  width:100%;height:auto;display:block;background:var(--paper-2);
  filter:grayscale(1) contrast(1.07);border:1px solid var(--rule-2);
}
.ph figcaption{padding:9px 0 0;display:block}
.ph__cap{display:block;font-size:14px;line-height:1.45;color:var(--ink-2);font-style:italic}
.ph__cred{display:block;margin-top:5px;font-size:11px;letter-spacing:.05em;color:var(--muted)}
.ph__cred a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--rule-2)}
.ph__cred a:hover{color:var(--accent)}
.tl__body .ph{margin-top:18px;max-width:430px}

.nofoot{
  margin:15px 0 0;font-size:13.5px;font-style:italic;color:var(--muted);
  padding-left:15px;border-left:1px solid var(--rule);line-height:1.55;
}

/* ── схема поля: чертёж тушью, а не зелёный газон ────────────────────────── */
.pitch{
  position:relative;width:min(500px,100%);margin:0;aspect-ratio:.58;
  background:var(--paper-2);border:1px solid var(--rule);
}
.pitch__lines{position:absolute;inset:10px;border:1px solid var(--rule)}
.pitch__lines::before{
  content:"";position:absolute;left:-1px;right:-1px;top:50%;height:1px;background:var(--rule);
}
.pitch__lines::after{
  content:"";position:absolute;left:50%;top:50%;width:19%;aspect-ratio:1;transform:translate(-50%,-50%);
  border:1px solid var(--rule);border-radius:50%;
}
.dot{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;width:86px;text-align:center;
}
.dot i{
  width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-style:normal;font-size:13px;font-weight:700;
  background:var(--paper);color:var(--ink);
  font-variant-numeric:lining-nums;
}
.dot b{
  font-size:10px;font-weight:400;color:var(--ink-2);line-height:1.12;
  background:var(--paper-2);padding:0 2px;
}
.dot--home i{box-shadow:0 0 0 2px var(--team-home)}
.dot--away i{box-shadow:0 0 0 2px var(--team-away)}

/* ── составы: два столбца печатного протокола ────────────────────────────── */
.squads{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(276px,100%),1fr));gap:0 44px;margin-top:30px}
.squad{padding:0 0 12px}
.squad + .squad{border-left:1px solid var(--rule-2);padding-left:44px;margin-left:-44px}
.squad h3{
  display:flex;align-items:center;gap:11px;margin:0 0 13px;padding-bottom:9px;
  font-family:var(--display);font-size:21px;font-weight:700;
  border-bottom:2px solid var(--ink);
}
.squad h3 .flag{width:30px;height:21px}
.squad__form{
  margin-left:auto;font-family:var(--serif);font-size:12px;font-weight:400;letter-spacing:.09em;
  color:var(--muted);font-variant-numeric:lining-nums;
}
.squad__list{list-style:none;margin:0;padding:0;font-size:15px}
.squad__list li{display:flex;align-items:center;gap:11px;padding:5px 0;border-bottom:1px solid var(--rule-2)}
.squad__list li:last-child{border-bottom:0}
.squad__n{
  flex:none;width:24px;text-align:right;
  font-family:var(--display);font-size:14px;font-weight:700;color:var(--muted);
}
.squad__n--pos{font-family:var(--serif);font-size:10.5px;letter-spacing:.06em}
.squad__name{flex:1;min-width:0}
.squad__name abbr{text-decoration:none;color:var(--muted);font-size:11.5px;font-style:italic}
.squad__marks{display:flex;align-items:center;gap:7px;flex:none}
.mk--card{width:8px;height:12px;background:#9A7A12;display:block}
.mk--red{width:8px;height:12px;background:#A3261C;display:block}
.mk--off{font-size:11px;color:var(--accent);font-style:italic}
.squad__subs,.squad__coach{margin:13px 0 0;font-size:13.5px;color:var(--muted);line-height:1.55}
.squad__subs b,.squad__coach b{color:var(--ink-2);font-weight:700}

@media (max-width:700px){
  .squad + .squad{border-left:0;padding-left:0;margin-left:0;padding-top:22px}
}

/* ── оглавление тома: перечень чемпионатов ───────────────────────────────── */
.cups{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--rule)}
.cups li{border-bottom:1px solid var(--rule-2)}
.cup{
  display:grid;grid-template-columns:78px 1fr 1.15fr auto;gap:16px;align-items:baseline;
  padding:11px 4px;text-decoration:none;color:inherit;font-size:15.5px;transition:background .15s;
}
a.cup:hover{background:var(--accent-soft)}
.cup__y{font-family:var(--display);font-weight:700;font-size:24px;font-variant-numeric:lining-nums}
.cup__host{color:var(--muted)}
.cup__win{display:flex;align-items:center;gap:10px;min-width:0}
.cup__win .flag{width:26px;height:18px}
.cup__win b{font-weight:700}
/* Отточие от чемпиона до числа матчей — примета печатного содержания. */
.cup__win::after{
  content:"";flex:1;min-width:26px;height:2px;align-self:center;margin-top:.4em;
  background:radial-gradient(circle at 1px 1px, var(--rule) 1px, transparent 1.4px) 0 0/7px 2px repeat-x;
}
.cup__n{font-size:12px;letter-spacing:.06em;color:var(--muted);white-space:nowrap;font-style:italic}
a.cup .cup__n{color:var(--accent);font-style:normal}
/* Строка о турнире под заголовком: от хозяина до конца строки, мельче и тише основного текста. */
.cup__fact{grid-column:2 / -1;margin-top:-4px;font-size:14px;line-height:1.5;color:var(--ink-2)}

/* ── шапка турнира ───────────────────────────────────────────────────────── */
.tchamp{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:20px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
}
.tchamp .flag{width:52px;height:37px}
.tchamp__label{
  display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.tchamp__name{display:block;font-family:var(--display);font-weight:700;font-size:30px;line-height:1.12}
.tchamp__rest{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.tchamp__rest b{color:var(--ink-2);font-weight:700}

.tfacts{
  margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));
  column-gap:38px;border-top:1px solid var(--rule);
}
.tfacts > div{padding:11px 0 12px;border-bottom:1px solid var(--rule-2)}
.tfacts dt{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.tfacts dd{margin:0;font-size:15px;line-height:1.4}

/* ── символы турнира: мяч, талисман, кубок ───────────────────────────────── */
.symbols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:34px;margin-top:30px}
.sym{margin:0;display:flex;flex-direction:column}
.sym img{
  width:100%;aspect-ratio:1/1;max-height:280px;object-fit:contain;
  background:var(--paper-2);border:1px solid var(--rule-2);padding:12px;display:block;
}
.sym__nopic{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.sym figcaption{padding:11px 0 0;display:flex;flex-direction:column;gap:4px}
.sym__kind{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.sym__title{font-family:var(--display);font-size:18px;font-weight:700;line-height:1.18}
.sym__text{font-size:13px;color:var(--ink-2);line-height:1.5}

.tfirsts{margin:0;padding-left:24px;font-size:17px;line-height:1.6}
.tfirsts li{margin-bottom:10px}
.tfirsts li::marker{color:var(--accent)}

/* ── турнирные таблицы: как в спортивном ежегоднике ──────────────────────── */
/* min(…,100%) — на телефоне 320 пикселей полоса уже 310, и таблица вылезала за край */
.gtables{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:34px;margin-top:26px}
.gtable{overflow-x:auto}
.gtable h3{
  margin:0 0 10px;font-family:var(--display);font-size:18px;font-weight:700;
  letter-spacing:.02em;
}
.gtable__warn{margin:0 0 10px;font-size:12.5px;font-style:italic;color:var(--accent)}
.gtable table{width:100%;border-collapse:collapse;font-size:14px}
.gtable th{
  text-align:center;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:400;padding:0 4px 7px;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding-top:7px;
}
.gtable th:nth-child(2){text-align:left}
.gtable td{text-align:center;padding:7px 4px;border-bottom:1px solid var(--rule-2)}
.gtable tr:last-child td{border-bottom:1px solid var(--rule)}
.gt__pos{color:var(--muted);width:20px;font-style:italic}
/* Ссылки на команды не подчёркиваем: различаем их цветом при наведении. */
.gt__team{text-align:left !important;font-weight:700}
.gt__team a,.gt__team > span{display:flex;align-items:center;gap:10px}
.gt__team a{color:inherit;text-decoration:none;transition:color .15s}
.gt__team a:hover{color:var(--accent)}
.sc__team a{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;transition:color .15s}
.sc__team a:hover{color:var(--accent)}
.rel__teamlink{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;transition:color .15s}
.rel__teamlink:hover{color:var(--accent)}
.gt__team .flag{width:24px;height:17px;flex:none}
.gt__g{color:var(--muted);white-space:nowrap}
.gt__pts{font-family:var(--display);font-weight:700;font-size:16px}
.gtable__first td{background:var(--accent-soft)}

/* ── бомбардиры ──────────────────────────────────────────────────────────── */
.scorers{list-style:none;margin:26px 0 0;padding:0;border-top:2px solid var(--ink)}
.scorers li{
  display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:baseline;
  padding:9px 4px;font-size:15.5px;border-bottom:1px solid var(--rule-2);
}
.sc__n{font-family:var(--display);font-weight:700;font-size:20px;color:var(--accent);text-align:right}
.sc__name{font-weight:700}
.sc__team{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;align-self:center}
.sc__team .flag{width:24px;height:17px}

/* ── перечень матчей ─────────────────────────────────────────────────────── */
.tstage{
  display:flex;align-items:baseline;gap:14px;margin:34px 0 10px;
  font-family:var(--display);font-size:21px;font-weight:700;
}
.tstage span{
  font-family:var(--serif);font-size:11.5px;font-weight:400;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
}
.tstage::after{content:"";flex:1;height:1px;background:var(--rule)}
.tmatches{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-2)}
.tmatches li{border-bottom:1px solid var(--rule-2)}
.tmatches a{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 18px;
  text-decoration:none;color:inherit;padding:10px 4px;transition:background .15s;
}
.tmatches a:hover{background:var(--accent-soft)}
.tm__stage{
  grid-row:1;grid-column:2;justify-self:end;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.tm__row{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:16px}
.tm__row .flag{width:28px;height:20px}
.tm__team{font-weight:700}
.tm__score{font-family:var(--display);font-weight:700;font-size:18px;color:var(--accent);padding:0 3px}
.tm__score small{display:block;font-family:var(--serif);font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.02em;text-align:center;white-space:nowrap}
.tm__date{grid-column:2;justify-self:end;font-size:12.5px;color:var(--muted);font-style:italic}

@media (max-width:620px){
  .cup{grid-template-columns:60px 1fr;row-gap:4px}
  .cup__win{grid-column:2}
  .cup__n{grid-column:2;justify-self:start}
  .cup__fact{grid-column:2;margin-top:0}
  .tchamp__rest{margin-left:0;width:100%}
  .tmatches a{grid-template-columns:1fr}
  .tm__stage,.tm__date{grid-column:1;justify-self:start}
}

/* ── путь команд по турниру ──────────────────────────────────────────────── */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(285px,100%),1fr));gap:0 44px}
.rel__col{padding:0}
.rel__col + .rel__col{border-left:1px solid var(--rule-2);padding-left:44px;margin-left:-44px}
.rel__col h3{
  display:flex;align-items:center;gap:11px;margin:0 0 12px;padding-bottom:9px;
  font-family:var(--display);font-size:20px;font-weight:700;
}
.rel__col h3 .flag{width:30px;height:21px}
.rel__col--home h3{border-bottom:2px solid var(--team-home)}
.rel__col--away h3{border-bottom:2px dashed var(--team-away)}
.rel__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-2)}
.rel__list li{border-bottom:1px solid var(--rule-2)}
.rel__list a{
  display:grid;grid-template-columns:26px 1fr auto;gap:4px 11px;align-items:baseline;
  text-decoration:none;padding:9px 3px;font-size:14.5px;transition:background .15s;
}
.rel__list a:hover{background:var(--accent-soft)}
.rel__res{
  /* 1/-1 — чтобы буква тянулась на все строки: с фразой о матче их три, без неё две */
  grid-row:1/-1;align-self:start;width:22px;height:22px;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;
  font-family:var(--display);color:var(--paper);
}
/* Подпись к буквам: без неё «В», «Н» и «П» приходится угадывать. */
.rel__legend{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:18px 0 14px;font-size:13px;color:var(--muted);font-style:italic;
}
.rel__legend .rel__res{grid-row:auto;margin-left:12px}
.rel__legend .rel__res:first-child{margin-left:0}
.rel__res--w{background:var(--verde)}
.rel__res--l{background:var(--accent)}
.rel__res--d{background:var(--muted)}
.rel__opp{font-weight:700;min-width:0}
.rel__score{font-family:var(--display);font-weight:700;font-size:16px;color:var(--accent)}
.rel__meta{grid-column:2/4;font-size:12px;color:var(--muted)}
/* Фраза о матче — тот же врез, что и на самой странице матча. */
.rel__lead{grid-column:2/4;margin-top:3px;font-size:13px;line-height:1.5;color:var(--ink-2);font-style:italic}
.rel__empty{margin:0;font-size:14px;color:var(--muted);font-style:italic}

@media (max-width:700px){
  .rel__col + .rel__col{border-left:0;padding-left:0;margin-left:0;padding-top:26px}
}

/* ── примечания и источники ──────────────────────────────────────────────── */
.notes{
  list-style:none;margin:0 0 22px;padding:0 0 0 18px;
  border-left:2px solid var(--accent);
  font-size:14px;line-height:1.6;color:var(--ink-2);
}
.notes li + li{margin-top:9px}
.srcs{margin:0;padding-left:24px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.srcs li{margin-bottom:8px}
.srcs a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.srcs a:hover{color:var(--accent);border-color:var(--accent)}

/* ── концовка полосы ─────────────────────────────────────────────────────── */
.foot{margin-top:64px;padding:0 0 48px}
/* Наборный «фонарик» вместо линейки — так закрывают полосу в книге. */
.foot::before{
  content:"❧";grid-column:full;text-align:center;
  font-family:var(--display);font-size:19px;color:var(--muted);
  padding:26px 0 22px;border-top:1px solid var(--rule);margin-bottom:14px;
}
.foot p{margin:0;font-size:13px;color:var(--muted);font-style:italic}

/* ── узкий экран ─────────────────────────────────────────────────────────── */
@media (max-width:620px){
  body{font-size:17.5px}
  .topnav{display:none}
  .topbar > .brand{grid-column:main}
  .board{grid-template-columns:1fr;gap:16px;text-align:center}
  .board__team,.board__team--away{flex-direction:row;justify-content:center;text-align:center}
  .board__score{order:3}
  .facts{grid-template-columns:1fr}
  .facts li{padding:9px 0;border-left:0;border-bottom:1px solid var(--rule-2)}
  .facts li:last-child{border-bottom:0}
  
  .dot{width:58px}
  .dot i{width:22px;height:22px;font-size:11.5px}
  .dot b{font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

@media print{
  .topnav,.vfacade,.vplayer,.vwrap__out{display:none}
  body{background:#fff;color:#000;font-size:11pt}
}
