/* MTTF — deep-blue institutional sports theme */
:root {
  --barh: 93px;
  --bg: #030d20;
  --card: #061936;
  --ink: #f1f5fb;
  --ink-2: #c1ccda;
  --ink-3: #8496ad;
  --rule: rgba(96, 158, 224, .22);
  --rule-2: rgba(96, 158, 224, .42);
  --red: #d04f4a;
  /* the brand red is a 4.08 on card — fine for a rule or a hover, short of
     AA for the small numerals it was being used on */
  --red-text: #e37b75;
  --blue: #3d8ee8;
  --gold: #c7a555;
  --acid: #6da6dc;
  --electric: #3d8ee8;
  --orange: #d04f4a;
  --night: #020a19;

  /* Display face, used only on the uppercase headings that carry the brand:
     the wordmark, the hero, page titles and the big section heads. Everything
     that is read as a sentence stays in Plex.
     Fira Sans Condensed rather than IBM Plex Sans Condensed, which Google
     serves without the `cyrillic` subset (U+0400–045F) — every Russian heading
     would have dropped to a system font. Fira ships full Cyrillic, and is a
     humanist grotesque like Plex, so the two sit together. */
  --display: "Fira Sans Condensed", "IBM Plex Sans", sans-serif;
}

html { scroll-behavior: smooth; }
/* Tells the browser this is a dark UI: native scrollbars, form controls and
   the overscroll area follow, instead of rendering light on a dark page. */
:root { color-scheme: dark; }

body {
  /* an explicit colour under the gradients — the shorthand alone leaves the
     canvas transparent, which shows through when the page is over-scrolled */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(8, 37, 76, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 37, 76, .18) 1px, transparent 1px),
    radial-gradient(circle at 50% 2%, #0b2b59 0, #03122b 35rem, #020a18 72rem);
  background-size: 54px 54px, 54px 54px, auto;
  color: var(--ink);
  font-family: "IBM Plex Sans", sans-serif;
}
h1, h2 { font-family: "IBM Plex Sans", sans-serif; font-variation-settings: normal; }
.wrap { width: min(100% - 42px, 1380px); }
.tri { position: fixed; z-index: 90; inset: 0 0 auto; height: 3px; }
.tri i:nth-child(1) { background: #1b67bd; }
.tri i:nth-child(2) { background: #d6b447; }
.tri i:nth-child(3) { background: #bd403d; }

/* Federation masthead */
.bar {
  top: 0;
  color: #fff;
  background: rgba(2, 10, 25, .94);
  border-bottom: 0;
  backdrop-filter: blur(18px) saturate(130%);
}
.bar__in {
  min-height: 82px;
  padding: 9px 0 8px;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 270px auto;
  align-items: center;
  gap: 22px;
}
.crest { gap: 13px; min-width: 0; }
.crest img {
  width: 64px;
  height: 64px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 10px 28px rgba(0, 57, 126, .44));
}
.crest b {
  display: block;
  max-width: 560px;
  color: #f5f7fb;
  font: 700 clamp(23px, 2.4vw, 32px)/.94 var(--display);
  letter-spacing: .005em;
  text-transform: uppercase;
}
.crest small {
  display: block;
  margin-top: 6px;
  color: #aebed2;
  font: 500 9px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.search {
  position: relative;
  display: flex;
  height: 40px;
  border: 1px solid rgba(108, 158, 216, .48);
  border-radius: 7px;
  background: rgba(4, 19, 44, .72);
  overflow: hidden;
}
.search label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.search input {
  min-width: 0;
  width: 100%;
  padding: 0 14px;
  color: #fff;
  border: 0;
  outline: 0;
  background: transparent;
  font: 500 13px/1 "IBM Plex Sans", sans-serif;
}
.search input::placeholder { color: #9babc0; opacity: 1; }
.search:focus-within { border-color: #68a9ee; box-shadow: 0 0 0 3px rgba(61, 142, 232, .14); }
.search button {
  width: 48px;
  color: #9cc9f7;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 27px;
}
.lang { align-self: center; margin-top: 0; padding: 2px; background: #071d3f; border-color: rgba(93, 148, 211, .38); }
.lang a { color: #aebed2; padding-inline: 11px; }
.lang a[aria-current] { color: #fff; background: #16549a; }
.mainnav {
  background: linear-gradient(180deg, #0d4382, #082f61);
  border-top: 1px solid rgba(100, 164, 229, .34);
  border-bottom: 1px solid rgba(100, 164, 229, .52);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
.mainnav__in { display: grid; grid-template-columns: repeat(6, 1fr); }
.mainnav a {
  min-height: 43px;
  display: grid;
  place-items: center;
  color: #eaf3fc;
  border-left: 1px solid rgba(118, 177, 237, .16);
  font: 600 15px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .045em;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}
.mainnav a:last-child { border-right: 1px solid rgba(118, 177, 237, .16); }
.mainnav a:hover { color: #fff; background: rgba(35, 123, 215, .34); }

/* Competition hero */
main.wrap { overflow: visible; }
.hero {
  width: 100vw;
  min-height: 590px;
  margin-left: calc(50% - 50vw);
  margin-bottom: 0;
  color: #fff;
  border-radius: 0;
  background: #041027;
  box-shadow: inset 0 -1px rgba(87, 151, 219, .34);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(125deg, transparent 0 53%, rgba(39, 126, 219, .42) 53.1% 53.35%, transparent 53.45%),
    linear-gradient(145deg, transparent 0 68%, rgba(39, 126, 219, .22) 68.1% 68.3%, transparent 68.4%);
}
.hero::after { display: none; }
.hero__media { inset: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  filter: saturate(.86) contrast(1.04) brightness(.72);
  animation: heroZoom 12s ease-out both;
}
.hero__media::after {
  background:
    linear-gradient(90deg, rgba(2, 10, 25, .98) 0%, rgba(3, 15, 36, .91) 31%, rgba(3, 16, 38, .38) 52%, rgba(2, 9, 22, .08) 72%),
    linear-gradient(0deg, rgba(2, 9, 22, .95), transparent 43%),
    linear-gradient(180deg, rgba(4, 22, 52, .35), transparent 35%);
}
.hero__net {
  display: none;
}
.hero__in {
  width: min(100% - 84px, 1380px);
  max-width: none;
  min-height: 528px;
  margin-inline: auto;
  padding: 70px 56% 92px 0;
  justify-content: center;
}
.hero__in::before { display: none; }
.hero__k {
  width: max-content;
  margin-bottom: 15px;
  color: #8ec5ff;
  font: 600 11px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hero__k::before { width: 26px; height: 2px; background: #d04f4a; }
.hero h1 {
  max-width: 13.6ch;
  color: #fff;
  font: 700 clamp(46px, 5.2vw, 72px)/1.0 var(--display);
  letter-spacing: -.012em;
  text-transform: uppercase;
  text-shadow: 0 10px 32px rgba(0, 0, 0, .36);
}
.hero h1 b {
  display: block;
  margin-top: .12em;
  color: #3f93ea;
  font: inherit;
}
.hero p { max-width: 47ch; margin-top: 22px; color: #c6d2e1; font-size: 16px; line-height: 1.55; }
.hero__cta { gap: 10px; margin-top: 28px; }
.bt {
  height: 45px;
  padding: 0 19px;
  border-radius: 5px;
  font: 600 13px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bt--p { color: #fff; background: linear-gradient(180deg, #2584df, #1268bd); }
.bt--p:hover { background: linear-gradient(180deg, #3496f1, #1974ca); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20, 111, 201, .25); }
.bt--g { color: #d8e5f2; border-color: rgba(122, 172, 224, .55); background: rgba(4, 24, 54, .54); }
.bt--g:hover { color: #fff; border-color: #69abed; background: rgba(17, 73, 132, .72); transform: translateY(-2px); }
.hero__strip {
  position: absolute;
  inset: auto 0 0;
  min-height: 62px;
  padding: 12px max(21px, calc((100vw - 1380px) / 2));
  background: rgba(3, 15, 36, .9);
  border-top: 1px solid rgba(93, 154, 216, .34);
  backdrop-filter: blur(8px);
}
.hero__strip .tagline { color: #fff; background: #176cbf; border-radius: 3px; }
.hero__strip .t { color: #e9f1f9; }
.hero__strip .d { color: #88a1ba; }

/* Information panels */
.head {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 45px max(21px, calc((100vw - 1380px) / 2)) 22px;
  color: #fff;
  background: rgba(2, 10, 25, .82);
}
.head::before { content: ""; width: 5px; height: 33px; background: #3d8ee8; }
.head h2 { margin-right: auto; font: 700 clamp(30px, 3.2vw, 46px)/1 "IBM Plex Sans", sans-serif; letter-spacing: .015em; text-transform: uppercase; font-family: var(--display); }
.head__m { color: #8297b0; font-size: 10px; }
.head__m span { padding-left: 16px; border-left: 1px solid rgba(98, 151, 210, .26); }
.grid { gap: 14px; padding-bottom: 28px; }
.mod {
  height: auto;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(8, 32, 67, .98), rgba(4, 20, 45, .98));
  border: 1px solid rgba(68, 139, 211, .48);
  border-radius: 8px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .2);
}
.mod::before { inset: 0; width: 100%; height: 2px; opacity: .65; }
.mod::after { display: none; }
.mod:hover { transform: translateY(-3px); border-color: rgba(89, 165, 239, .72); box-shadow: 0 22px 62px rgba(0, 0, 0, .3); }
.mod--wide { grid-column: span 5; }
.mod--row2 { height: auto; }
.mod__h { min-height: 65px; padding: 17px 18px 13px; border-bottom-color: rgba(83, 145, 207, .28); }
.mod__h h2 { color: #f3f7fb; font: 600 21px/1 "IBM Plex Sans", sans-serif; letter-spacing: .025em; text-transform: uppercase; }
.mod__ic { width: 31px; height: 31px; border-radius: 5px; color: #93c7fa; background: rgba(34, 112, 191, .2); }
.mod__h .n { color: #7ea5cc; border-color: rgba(94, 153, 214, .35); }
.mod__b { scrollbar-color: #245d98 transparent; }
.mod__b::-webkit-scrollbar-thumb { background: #245d98; border-color: #061936; }
.mod__f { padding: 9px; border-top-color: rgba(83, 145, 207, .28); }
.go { min-height: 42px; color: #d8e7f6; background: rgba(14, 55, 102, .62); border-radius: 5px; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.go:hover { color: #fff; background: #176fc5; }
.li { padding: 12px 17px; border-bottom-color: rgba(78, 136, 196, .22); }
.li:hover { background: rgba(22, 76, 132, .3); }
.li--img { grid-template-columns: 64px 1fr; }
.li__th { width: 64px; border-radius: 6px; background: #07162d; }
.li__th--none { background: repeating-linear-gradient(45deg, #0b2448 0 6px, #0d2b54 6px 12px); }
.li__m { color: #69a9e9; font-weight: 600; text-transform: uppercase; }
.li__t { color: #e2e9f2; font-size: 13.5px; font-weight: 500; }
.li:hover .li__t { color: #fff; }
.li__ic, .li__x { color: #7fa6cc; }
.tiles { gap: 8px; padding: 9px; }
.tile { border-radius: 5px; }
.tile::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(117, 174, 229, .25); border-radius: inherit; pointer-events: none; }
.tile__c { padding: 46px 9px 8px; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  background: linear-gradient(to top, rgba(3,12,28,.97) 0%, rgba(3,12,28,.88) 32%,
    rgba(3,12,28,.60) 62%, rgba(3,12,28,0) 100%); }
/* album titles are names, not labels — long ones were unreadable in caps */
.tile__c b { font: 600 12.5px/1.28 "IBM Plex Sans", sans-serif; letter-spacing: -.005em;
  text-transform: none; }
.a-news { --accent: #3d8ee8; }
.a-gal { --accent: #bd4e49; }
.a-doc { --accent: #c7a555; }
.a-cal { --accent: #4f9b86; }
.a-rank { --accent: #5da0df; }
.mod--ink { color: #fff; background: linear-gradient(145deg, #0b3974, #082650); }
.mod--ink .mod__ic { color: #dceeff; background: rgba(56, 145, 232, .3); }
.mod--ink .dot { color: #91c8ff; }
.mod--ink .dot::before { background: #56a6ef; box-shadow: 0 0 12px rgba(86, 166, 239, .4); }
.stack { gap: 14px; }
.stack .mod { border-radius: 8px; }
.stack .mod:last-child { color: var(--ink); background: linear-gradient(145deg, #0a294f, #071c39); }
.stack .mod:last-child .mod__ic { color: #8dc4f6; background: rgba(40, 120, 196, .22); }
.stack .mod:last-child .contact a { color: #d9e7f5; border-color: rgba(110, 165, 218, .36); }
.stack .mod:last-child .contact span { color: #79a3cb; }

/* Federation metrics and footer */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 28px max(21px, calc((100vw - 1380px) / 2));
  background: linear-gradient(180deg, #071d3b, #05152d);
  border-top: 1px solid rgba(85, 148, 211, .46);
  border-bottom: 1px solid rgba(85, 148, 211, .32);
}
.stats div { min-height: 76px; display: grid; place-content: center; text-align: center; border-left: 1px solid rgba(97, 153, 209, .24); }
.stats div:last-child { border-right: 1px solid rgba(97, 153, 209, .24); }
.stats strong { color: #f0f5fb; font: 700 35px/1 "IBM Plex Sans", sans-serif; letter-spacing: .02em; }
.stats span { margin-top: 8px; color: #91a8c0; font: 500 11px/1 "IBM Plex Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.foot {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 36px max(21px, calc((100vw - 1380px) / 2)) 22px;
  color: #9bacc1;
  background: #020a19;
  border-top: 0;
  font: 400 12px/1.65 "IBM Plex Sans", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.foot > div { display: flex; flex-direction: column; align-items: flex-start; }
.foot > div + div { padding-left: 34px; border-left: 1px solid rgba(87, 139, 192, .22); }
.foot b { color: #e6edf5; text-transform: uppercase; letter-spacing: .04em; }
.foot a { color: #aebfd2; }
.foot a:hover { color: #68a9ed; }
.foot__brand { flex-direction: row !important; align-items: center !important; gap: 16px; }
.foot__brand img { width: 72px; height: 72px; object-fit: contain; }
.foot__brand span { display: flex; flex-direction: column; }
.foot__brand small { color: #7990aa; }
.foot p { grid-column: 1 / -1; margin: 28px 0 0; padding-top: 15px; color: #657a93; border-top: 1px solid rgba(87, 139, 192, .18); }

@keyframes heroZoom { from { transform: scale(1.04); } to { transform: scale(1); } }

@media (max-width: 1140px) {
  .bar__in { grid-template-columns: minmax(330px, 1fr) 230px auto; }
  .crest b { font-size: 26px; }
  .hero__in { padding-right: 50%; }
  .mod, .mod--wide, .mod--half { grid-column: span 6; }
  .stack { grid-column: span 6; }
}
@media (max-width: 900px) {
  .bar__in { min-height: 74px; grid-template-columns: 1fr auto; }
  .crest img { width: 54px; height: 54px; }
  .crest b { font-size: 23px; }
  .crest small { font-size: 8px; }
  .search { display: none; }
  .lang { align-self: center; margin-top: 0; }
  .mainnav__in { display: flex; overflow-x: auto; scrollbar-width: none; }
  .mainnav a { min-width: 145px; padding-inline: 16px; }
  .hero__media::after { background: linear-gradient(90deg, rgba(2,10,25,.97), rgba(3,15,36,.8) 44%, rgba(3,16,38,.2) 68%), linear-gradient(0deg, rgba(2,9,22,.96), transparent 45%); }
  .hero__in { padding-right: 48%; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats div { border-bottom: 1px solid rgba(97, 153, 209, .18); }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; margin-bottom: 12px; }
}
@media (max-width: 720px) {
  .wrap, .hero__in { width: min(100% - 30px, 1380px); }
  .bar__in { min-height: 66px; padding-block: 7px; }
  .crest { gap: 10px; }
  .crest img { width: 46px; height: 46px; }
  .crest b { font-size: 20px; }
  .crest small { margin-top: 5px; font-size: 8px; letter-spacing: .12em; }
  .lang a { padding-inline: 8px; }
  .mainnav a { min-height: 39px; min-width: 116px; font-size: 14px; }
  .hero { min-height: 620px; }
  .hero__media img { object-position: 58% center; }
  .hero__media::after { background: linear-gradient(0deg, rgba(2,10,25,.98) 2%, rgba(3,15,36,.78) 54%, rgba(3,16,38,.28)), linear-gradient(90deg, rgba(2,10,25,.72), transparent); }
  .hero__in { min-height: 558px; padding: 245px 0 92px; justify-content: flex-end; }
  .hero h1 { max-width: 13.6ch; font-size: clamp(34px, 11.5vw, 52px); }
  .hero p { max-width: 36ch; font-size: 14px; }
  .hero__cta { width: 100%; }
  .bt { flex: 1; justify-content: center; }
  .hero__strip { padding-inline: 15px; }
  .hero__strip .d { display: none; }
  .head { padding: 35px 15px 18px; }
  .head h2 { font-size: 34px; }
  .head__m { width: 100%; gap: 12px; overflow-x: auto; }
  .head__m span { flex: none; }
  .grid { gap: 12px; }
  .mod, .mod--wide, .mod--half { grid-column: span 12; height: auto; }
  .stack { grid-column: span 12; gap: 12px; }
  .mod--row2 { height: auto; }
  .mod--row2[style] { grid-column: span 12 !important; }
  .stats { padding-inline: 15px; }
  .stats strong { font-size: 29px; }
  .stats span { font-size: 9px; }
  .foot { grid-template-columns: 1fr; padding-inline: 15px; }
  .foot__brand { grid-column: auto; }
  .foot > div + div { padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(87,139,192,.18); }
}
@media (max-width: 460px) {
  .crest b { font-size: 20px; }
  .crest small { display: none; }
  .hero__k { font-size: 9px; }
  .hero__cta { flex-direction: column; }
  .hero__strip .tagline { display: none; }
  .hero__strip .t { white-space: normal; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .hero__media img { animation: none; }
}

/* =====================================================================
   Masthead — single row, translucent, no second navigation band.
   Overrides the earlier .bar / .mainnav rules above.
   ===================================================================== */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.bar {
  position: sticky; top: 0; z-index: 90;
  background: rgba(3, 13, 32, .72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.bar.is-stuck {
  background: rgba(3, 13, 32, .92);
  border-bottom-color: rgba(96, 158, 224, .18);
}
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px;
  background: linear-gradient(180deg, rgba(2, 10, 25, .40), transparent);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.bar.is-stuck::after { opacity: 1; }

.bar__in {
  display: flex; align-items: center; gap: 26px;
  min-height: var(--barh); padding: 13px 0; grid-template-columns: none;
}

.crest { display: flex; align-items: center; gap: 11px; margin-right: auto; min-width: 0; }
.crest img { width: 62px; height: 62px; object-fit: contain; flex: 0 0 auto; display: block; }
.crest picture { display: block; flex: 0 0 auto; }
.crest b {
  /* condensed earns its keep here: «Федерация настольного тенниса» is half
     again as long as the Romanian and this line is clipped, not wrapped */
  display: block; font-family: var(--display);
  font-weight: 700; font-size: 17.5px; line-height: 1.05; letter-spacing: .005em;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}
.crest small {
  display: block; margin-top: 2px; font-family: "IBM Plex Sans", sans-serif;
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: #7ea5cc;
}

/* the old blue band is gone — links are inline pills */
.mainnav {
  display: flex; align-items: center; gap: 2px;
  background: none; border: 0; box-shadow: none; padding: 0;
}
.mainnav__in { display: contents; }
.mainnav a {
  position: relative; padding: 9px 13px; border-radius: 8px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13.5px; font-weight: 500; letter-spacing: .005em;
  text-transform: none; color: #b9cbdf; border: 0; white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.mainnav a::after { display: none; }
.mainnav a:hover { background: rgba(160, 205, 255, .10); color: #fff; }
.mainnav a[aria-current="page"] { background: rgba(61, 142, 232, .18); color: #fff; }
.mainnav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--blue);
}

.bar__tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.search {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border: 1px solid rgba(108, 158, 216, .30); border-radius: 999px;
  background: rgba(255, 255, 255, .04); color: #7ea5cc;
  transition: border-color .18s ease, background .18s ease; overflow: visible;
}
.search:focus-within { border-color: var(--blue); background: rgba(61, 142, 232, .10); }
.search input {
  width: 118px; border: 0; background: none; outline: none; color: #e6eefa;
  font: 400 13px/1 "IBM Plex Sans", sans-serif; padding: 0;
}
.search input::placeholder { color: #6f93b8; }
.search button { display: none; }

.lang {
  display: flex; gap: 2px; padding: 2px; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(108, 158, 216, .26); border-radius: 999px;
}
.lang a {
  border: 0; background: none; cursor: pointer; color: #8fb0d0;
  font: 500 11.5px/1 "IBM Plex Sans", sans-serif; letter-spacing: .05em;
  padding: 7px 10px; border-radius: 999px; transition: background .16s ease, color .16s ease;
}
.lang button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.lang button:hover:not([aria-pressed="true"]) { color: #e6eefa; }

/* mobile */
.navtoggle { display: none; width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(108,158,216,.26);
  padding: 0; place-items: center; }
.navtoggle span { display: block; width: 16px; height: 1.6px; border-radius: 2px;
  background: #cfe0f2; margin: 3px auto; transition: transform .2s ease, opacity .2s ease; }
.navtoggle.is-open span:nth-child(1) { transform: translateY(4.6px) rotate(45deg); }
.navtoggle.is-open span:nth-child(2) { opacity: 0; }
.navtoggle.is-open span:nth-child(3) { transform: translateY(-4.6px) rotate(-45deg); }

.drawer { display: none; flex-direction: column; padding: 6px 0 14px;
  border-top: 1px solid rgba(96,158,224,.18); }
.drawer a { padding: 13px 21px; font-size: 15px; font-weight: 500; color: #cfe0f2; }
.drawer a:hover { background: rgba(160,205,255,.08); color: #fff; }

@media (max-width: 1180px) {
  .mainnav a { padding: 9px 8px; font-size: 12.5px; }
  .search input { width: 84px; }
}
@media (max-width: 1240px) {
  .mainnav { display: none; }
  .navtoggle { display: grid; }
  /* the drawer carries [hidden] until the toggle opens it — a bare
     `display:flex` here would beat that attribute and pin it open */
  .drawer:not([hidden]) { display: flex; }
  .search { display: none; }
}

@media (max-width: 620px) {
  .navtoggle { width: 44px; height: 44px; }
  .bar__in { gap: 12px; }
  .crest img { width: 46px; height: 46px; }
  .crest b { font-size: 14px; white-space: normal; line-height: 1; }
  .crest small { display: none; }
}
@media (max-width: 430px) {
  .crest span { display: none; }   /* emblem only — the page title carries the name */
}

/* homepage calendar module: ongoing / upcoming events */
.li--ev { grid-template-columns: 58px 1fr; align-items: center; }
.li--ev .li__d { text-align: center; line-height: 1; }
.li--ev .li__d b { display: block; font-family: "IBM Plex Sans", sans-serif;
  font-size: 17px; color: #fff; letter-spacing: .02em; }
.li--ev .li__d i { display: block; font-style: normal; font-family: "IBM Plex Sans", sans-serif;
  font-size: 9px; letter-spacing: .12em; color: #69a9e9; margin-top: 3px; }
.cal__empty { color: var(--ink-3); font-size: 13px; padding: 14px 17px; margin: 0; }

/* 6 tiles in 3 rows; the aspect is chosen so the grid lands on the row height
   set by the taller neighbour (5 news rows) without stretching anything */
.mod__b > .tiles .tile { aspect-ratio: 14 / 9; }

/* Skip link — the masthead and a full-bleed hero sit between the top of every
   page and its content, which is a long way to tab through. */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 0 0 8px 8px; background: var(--blue);
  color: #fff; font: 600 14px/1 "IBM Plex Sans", sans-serif;
  transition: top .14s ease; }
.skip:focus { top: 0; }
#continut:focus { outline: none; }

/* ===================== search =====================
   The box sits in the masthead on every page. Results drop under it as a
   ranked list — kind on the left so a reader can tell a report from a
   regulation at a glance, date on the right. */
.search { position: relative; }
/* the box sits at the right end of the masthead, so the panel hangs from its
   right edge — anchored left it ran off the window */
.spanel { position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 60;
  width: min(460px, calc(100vw - 32px));
  max-height: min(70vh, 460px); overflow-y: auto;
  background: var(--night); border: 1px solid var(--rule-2); border-radius: 12px;
  box-shadow: 0 26px 60px -20px rgba(0,0,0,.8); padding: 6px; }
.sres { display: grid; grid-template-columns: 78px minmax(0,1fr) auto; gap: 10px;
  align-items: baseline; padding: 9px 10px; border-radius: 8px; }
.sres__k { font-family: "IBM Plex Sans", sans-serif; font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 999px; padding: 3px 0;
  text-align: center; }
.sres__t { font-size: 14px; line-height: 1.35; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sres__d { font-family: "IBM Plex Sans", sans-serif; font-size: 10.5px;
  color: var(--ink-3); white-space: nowrap; }
.sres:hover, .sres.is-on { background: rgba(61,142,232,.16); }
.sres:hover .sres__k, .sres.is-on .sres__k { border-color: var(--blue); color: #9dc6ee; }
.spanel__none { margin: 0; padding: 14px 12px; font-size: 13.5px; color: var(--ink-2);
  line-height: 1.55; }
.spanel__all { display: block; margin-top: 4px; padding: 10px;
  border-top: 1px solid var(--rule); font-family: "IBM Plex Sans", sans-serif;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); text-align: center; }
.spanel__all:hover { background: rgba(61,142,232,.12); }

/* the drawer copy, for phones — the masthead box is hidden there */
/* in the drawer the panel is a flow sibling, so it has to wrap onto its own
   line instead of sitting beside the input as a third flex item */
.search--drawer { display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 10px; }
.search--drawer .spanel { position: static; flex: 1 0 100%; width: auto;
  margin-top: 10px; max-height: 46vh; box-shadow: none; }

/* ---- /cauta/ */
.spage { padding-bottom: clamp(60px, 9vw, 120px); }
.spage h1 { margin: 10px 0 20px; }
.spage__form { display: flex; align-items: center; gap: 10px; max-width: 560px;
  padding: 0 16px; height: 52px; border: 1px solid var(--rule-2); border-radius: 12px;
  background: var(--card); color: var(--ink-3); margin-bottom: 28px; }
.spage__form:focus-within { border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(61,142,232,.14); }
.spage__form input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
  color: var(--ink); font: 400 16px/1 "IBM Plex Sans", sans-serif; }
.spage__form input::placeholder { color: var(--ink-3); }
.spage__list { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: var(--night); }
.spage__list .sres { border-radius: 0; border-bottom: 1px solid var(--rule);
  padding: 13px 16px; }
.spage__list .sres:last-child { border-bottom: 0; }
.spage__none { color: var(--ink-2); font-size: 15.5px; line-height: 1.65; max-width: 58ch; }

@media (max-width: 720px) {
  .sres { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .sres__k { grid-column: 1; justify-self: start; padding: 3px 9px; }
  .sres__d { grid-column: 2; }
  .sres__t { grid-column: 1 / -1; white-space: normal; }
}

/* the language switcher is a pair of links now — it has somewhere to go */
.lang a { display: inline-flex; align-items: center; border-radius: 999px;
  font: 500 12px/1 "IBM Plex Sans", sans-serif; padding: 7px 11px; }

/* On a phone this is a thumb target, not a pointer target — and on a bilingual
   site it is one of the most-reached-for controls. 39x26 was too small.
   NB: three separate `.lang a` rules exist above; this one is last and wins. */
@media (max-width: 620px) {
  .lang a { padding: 12px 15px; font-size: 12.5px; }
}


/* The wordmark is set in whichever language the page is in, and "Федерация
   настольного тенниса" is half again as long as the Romanian. Cap it so it can
   never push into the navigation. */
/* the wordmark takes the width its text needs; the navigation absorbs the
   difference between the Romanian and the longer Russian name */
.crest { flex: 0 0 auto; }
.crest span { min-width: 0; }
.crest b, .crest small { display: block; white-space: nowrap; }
/* Only the narrowest phones need the wordmark clipped; above that the drawer
   has already freed the room for it. */
@media (max-width: 560px) { .crest b, .crest small { max-width: 17ch;
  overflow: hidden; text-overflow: ellipsis; } }



/* ===================== masthead fit =====================
   The bar carries a wordmark, seven navigation items, a search box and the
   language pair. The Russian labels run about a sixth longer than the
   Romanian, so the bar is tuned to the longer of the two and both use the
   same rules — no per-language patching. */
.bar__in { gap: 13px; }
.crest { gap: 10px; }
.crest img, .crest picture { width: 54px; height: 54px; }
.crest b { font-size: 13px; letter-spacing: -.005em; }
.crest small { font-size: 8.5px; letter-spacing: .07em; }
.mainnav a { padding-inline: 8px; font-size: 12.5px; letter-spacing: 0; }
.bar__tools .search { width: clamp(132px, 13vw, 190px); }


/* ===================== one type system =====================
   The site is set in IBM Plex Sans throughout — it is the only family here
   that covers both the Romanian diacritics and the Cyrillic the Russian side
   needs, so weight, size and tracking do the work three families used to.
   Figures line up wherever they are read as data. */
:root { font-variant-numeric: tabular-nums; }
.li__d, .li__m, .li__x, .art__date, .strip__n, .frame__n, .sres__d,
.stats strong, .lb__count, .ystrip__n, .camonth__n, .doc-meta, .mono-val,
.pod__p, .pod__m, .place ol li b, .ko__m b, .rescard__d, .rescard__m,
.news-list-shots, .li--ev .li__d b, .li--ev .li__d i {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ===================== NOCTURN atmosphere =====================
   The dark skin needs objects in its quiet areas too: the faint geometry of
   a table/court, pools of arena light and a softly speckled crowd beyond it.
   These panels only apply when no light-skin stylesheet is active. */
:root:not([data-tema]) .gen,
:root:not([data-tema]) .geo,
:root:not([data-tema]) .crew {
  padding: clamp(22px, 3vw, 38px);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(78, 153, 235, .22);
  border-radius: 24px;
  background-color: rgba(5, 24, 51, .64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 24px 70px -44px #000;
}
:root:not([data-tema]) .gen {
  background-image:
    radial-gradient(circle at 91% 18%, rgba(233,244,255,.30) 0 5px, rgba(61,142,232,.14) 6px 22px, transparent 23px),
    radial-gradient(circle at -2% 112%, transparent 0 170px, rgba(61,142,232,.18) 171px 173px, transparent 174px),
    linear-gradient(109deg, transparent 0 73%, rgba(61,142,232,.10) 73.1% 73.35%, transparent 73.45%),
    radial-gradient(circle at 82% 8%, rgba(28,96,171,.18), transparent 38%);
}
:root:not([data-tema]) .geo {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 86px, rgba(61,142,232,.055) 86px 87px),
    repeating-linear-gradient(0deg, transparent 0 86px, rgba(61,142,232,.04) 86px 87px),
    radial-gradient(ellipse at 78% -12%, rgba(46,121,209,.22), transparent 48%);
}
:root:not([data-tema]) .crew {
  background-image:
    radial-gradient(circle, rgba(130,187,246,.17) 0 2px, transparent 2.5px),
    linear-gradient(135deg, rgba(21,71,129,.18), transparent 50%);
  background-size: 34px 34px, auto;
  background-position: right 20px top 16px, 0 0;
}

@media (max-width: 700px) {
  :root:not([data-tema]) .gen,
  :root:not([data-tema]) .geo,
  :root:not([data-tema]) .crew { padding: 20px 16px; border-radius: 18px; }
}

/* ===================== hero edge finish =====================
   A shallow continuous arc removes the hard horizontal crop at both ends of
   the photograph. The short alpha feather lets the image dissolve into the
   surrounding theme without softening any of the actual hero content. */
.hero {
  margin-top: clamp(8px, 1.15vw, 16px);
  margin-bottom: clamp(18px, 2.2vw, 32px);
  border-radius: 50% / clamp(20px, 2.4vw, 34px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0,0,0,.72) 9px,
    #000 20px,
    #000 calc(100% - 24px),
    rgba(0,0,0,.78) calc(100% - 10px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0,0,0,.72) 9px,
    #000 20px,
    #000 calc(100% - 24px),
    rgba(0,0,0,.78) calc(100% - 10px),
    transparent 100%
  );
}

@media (max-width: 700px) {
  .hero {
    margin-top: 6px;
    margin-bottom: 20px;
    border-radius: 50% / 20px;
  }
}
/* the copyright bar: copyright left, credit centred in the bar itself */
.foot p {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 14px;
}
.foot__by { justify-self: center; white-space: nowrap; }
@media (max-width: 760px) {
  .foot p { grid-template-columns: 1fr; gap: 6px; }
  .foot__by { justify-self: start; }
}

/* The credit, and the signature inside it. The signature file is white ink on
   transparent and is used as a mask, not an image: the box is painted with
   currentColor, so the mark takes the link colour and follows it on hover and
   focus. Black ink on a near-black footer would otherwise be invisible. */
.foot__by { display: inline-flex; align-items: center; gap: 8px; }
a.foot__by { text-decoration: none; }
a.foot__by:hover, a.foot__by:focus-visible { color: #E8B759; }
.foot__sig {
  display: inline-block;
  height: 36px;
  width: auto;
  aspect-ratio: var(--sig-ratio, 2.75);
  background-color: currentColor;
  -webkit-mask: url('/assets/signature.webp') left center / contain no-repeat;
  mask: url('/assets/signature.webp') left center / contain no-repeat;
  transform: translateY(1px);   /* sit the handwriting on the type's baseline */
}
@media (max-width: 760px) { .foot__sig { height: 30px; } }

/* The Facebook mark, used on its own as a button — no heading, no URL beside
   it. It inherits the surrounding link colour rather than carrying Facebook
   blue, so it sits with the phone number and the address instead of shouting
   over them. */
.fbmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: 2px;
  border-radius: 8px;
  color: inherit;
  transition: color .16s ease, background-color .16s ease;
}
.fbmark:hover, .fbmark:focus-visible { color: #1877F2; background: rgba(24,119,242,.10); }
.contact__soc { margin-top: 2px; }

/* On the home page the mark rides in the card's header row, pushed to the far
   end, so it costs the card no height — that card sets the height of the whole
   news/gallery row beside it. */
.mod__h .fbmark { margin-left: auto; margin-top: 0; width: 30px; height: 30px; }

/* ============================================================
   Mobile refinements
   Measured at 320 / 375 / 414. The layout already held up — no
   horizontal overflow and no distorted images at any width — so
   these are hit-area, legibility and truncation fixes only, and
   nothing here changes the desktop rendering.
   ============================================================ */
@media (max-width: 700px) {
  /* .bt is given flex:1 at <=720px so the two hero buttons share a row.
     At <=460px .hero__cta becomes a column and that same flex:1 starts
     governing HEIGHT instead of width, overriding height:45px and
     collapsing the primary call to action to its 17px text box. */
  .hero__cta .bt { flex: 0 0 auto; min-height: 46px; width: 100%; }

  /* 9px is below the legible floor on a phone */
  .hero__k { font-size: 10.5px; }

  /* The stacked copy pushes the hero to ~900px, so a 3:2 photo has to cover
     a 0.41 frame — a 3.6x crop that magnifies the background and pushes the
     player out of shot. The lower half already sits under the opaque end of
     the scrim, so bound the photo to the band that is actually visible and
     aim the crop at the player rather than the banner behind him. */
  .hero__media { bottom: auto; height: 66%; }
  .hero__media img { object-position: 68% 40%; }
  /* Bounding the photo leaves a hard edge where it stops. Masking the media
     box itself dissolves the photo into the hero background, so there is no
     seam to line up and it works whether that background is paper or navy. */
  .hero__media {
    -webkit-mask-image: linear-gradient(to bottom, #000 0 56%, rgba(0,0,0,.35) 84%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 0 56%, rgba(0,0,0,.35) 84%, transparent 99%);
  }

  /* the tile title was ellipsised after ~113px — a third of a word at
     320px. Two lines costs nothing here and keeps the album nameable. */
  .tile__c b {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

}

/* WCAG 2.2 asks for 24x24 CSS px pointer targets, and it asks it of pointers,
   not of phones — a mouse needs the box as much as a thumb does. These links
   were 17-21px tall at every width because nothing gave them one. */
.foot a, .wall__go, .contact a { display: inline-flex; align-items: center; min-height: 26px; }
/* the masthead search bar is tall enough; the input inside it was 17px, so
   most of the bar did not respond to a click. Lives here rather than in
   pages.css because the home page does not load that sheet. */
.search input { align-self: stretch; height: 100%; }