/* MTTF — deep-blue institutional sports theme */
:root {
  --barh: 93px;
  --bg: #f0eadc;
  --card: #ebe5d7;
  --ink: #2b271f;
  --ink-2: #3a362d;
  --ink-3: #454c5e;
  --rule: rgba(106,121,161,0.374);
  --rule-2: rgba(106,121,161,0.714);
  --red: #9d2522;
  /* 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: #903630;
  --blue: #354faa;
  --gold: #784e00;
  --acid: #41558d;
  --electric: #354faa;
  --orange: #9d2522;
  --night: #f2ecde;

  /* 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(230,224,210,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,224,210,0.18) 1px, transparent 1px),
    radial-gradient(circle at 50% 2%, #d3def8 0, #eee8da 35rem, #f2ecde 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: #c2d4ff; }
.tri i:nth-child(2) { background: #dac09d; }
.tri i:nth-child(3) { background: #fec4bc; }

/* Federation masthead */
.bar {
  top: 0;
  color: #27241b;
  background: rgba(242,236,222,0.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(49,38,32,0.1408));
}
.crest b {
  display: block;
  max-width: 560px;
  color: #2a261e;
  font: 700 clamp(23px, 2.4vw, 32px)/.94 var(--display);
  letter-spacing: .005em;
  text-transform: uppercase;
}
.crest small {
  display: block;
  margin-top: 6px;
  color: #403c33;
  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,122,156,0.816);
  border-radius: 7px;
  background: rgba(237,232,217,0.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: #27241b;
  border: 0;
  outline: 0;
  background: transparent;
  font: 500 13px/1 "IBM Plex Sans", sans-serif;
}
.search input::placeholder { color: #3d4353; opacity: 1; }
.search:focus-within { border-color: #6979a3; box-shadow: 0 0 0 3px rgba(49,38,32,0.0448); }
.search button {
  width: 48px;
  color: #2b375b;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 27px;
}
.lang { align-self: center; margin-top: 0; padding: 2px; background: #e9e3d5; border-color: rgba(107,121,159,0.646); }
.lang a { color: #403c33; padding-inline: 11px; }
.lang a[aria-current] { color: #27241b; background: #c5d4f9; }
.mainnav {
  background: linear-gradient(180deg, #c7d5f7, #d1dcf9);
  border-top: 1px solid rgba(106,121,161,0.578);
  border-bottom: 1px solid rgba(106,121,161,0.884);
  box-shadow: 0 10px 28px rgba(49,38,32,0.0896);
}
.mainnav__in { display: grid; grid-template-columns: repeat(6, 1fr); }
.mainnav a {
  min-height: 43px;
  display: grid;
  place-items: center;
  color: #2c2820;
  border-left: 1px solid rgba(107,121,158,0.272);
  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(107,121,158,0.272); }
.mainnav a:hover { color: #27241b; background: rgba(164,193,255,0.34); }

/* Competition hero */
main.wrap { overflow: visible; }
.hero {
  width: 100vw;
  min-height: 590px;
  margin-left: calc(50% - 50vw);
  margin-bottom: 0;
  color: #27241b;
  border-radius: 0;
  background: #efe9db;
  box-shadow: inset 0 -1px rgba(49,38,32,0.1088);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(125deg, transparent 0 53%, rgba(164,193,255,0.42) 53.1% 53.35%, transparent 53.45%),
    linear-gradient(145deg, transparent 0 68%, rgba(164,193,255,0.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;
}
/* DEAD — skins/tesut.pages.css loads after this sheet and sets
   .hero__media::after with no media query, so it wins at every width. The
   hero's scrim is edited there, not here. Left in place because the other
   skins (?tema=navy|sala|album) do not load that sheet. */
.hero__media::after {
  background:
    linear-gradient(90deg, rgba(242,236,222,0.98) 0%, rgba(239,233,219,0.91) 31%, rgba(239,233,219,0.38) 52%, rgba(242,236,222,0.08) 72%),
    linear-gradient(0deg, rgba(242,236,222,0.95), transparent 43%),
    linear-gradient(180deg, rgba(236,230,216,0.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: #293865;
  font: 600 11px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hero__k::before { width: 26px; height: 2px; background: #eeb4ac; }
.hero h1 {
  max-width: 13.6ch;
  color: #27241b;
  font: 700 clamp(46px, 5.2vw, 72px)/1.0 var(--display);
  letter-spacing: -.012em;
  text-transform: uppercase;
  text-shadow: 0 10px 32px rgba(49,38,32,0.1152);
}
.hero h1 b {
  display: block;
  margin-top: .12em;
  color: #324890;
  font: inherit;
}
.hero p { max-width: 47ch; margin-top: 22px; color: #38342b; 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: #27241b; background: linear-gradient(180deg, #b1c3f1, #c2d4ff); }
.bt--p:hover { background: linear-gradient(180deg, #b1c3f1, #b2c3ef); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(49,38,32,0.08); }
.bt--g { color: #312d25; border-color: rgba(109,122,153,0.935); background: rgba(235,229,215,0.54); }
.bt--g:hover { color: #27241b; border-color: #6a79a1; background: rgba(190,211,255,0.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(239,233,219,0.9);
  border-top: 1px solid rgba(106,121,160,0.578);
  backdrop-filter: blur(8px);
}
.hero__strip .tagline { color: #27241b; background: #c2d4ff; border-radius: 3px; }
.hero__strip .t { color: #2d2920; }
.hero__strip .d { color: #40485d; }

/* Information panels */
.head {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 45px max(21px, calc((100vw - 1380px) / 2)) 22px;
  color: #27241b;
  background: rgba(242,236,222,0.82);
}
.head::before { content: ""; width: 5px; height: 33px; background: #b2c3f0; }
.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: #444c60; font-size: 10px; }
.head__m span { padding-left: 16px; border-left: 1px solid rgba(107,121,157,0.442); }
.grid { gap: 14px; padding-bottom: 28px; }
.mod {
  height: auto;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(232,226,212,0.98), rgba(237,231,217,0.98));
  border: 1px solid rgba(104,121,166,0.816);
  border-radius: 8px;
  box-shadow: 0 18px 54px rgba(49,38,32,0.064);
}
.mod::before { inset: 0; width: 100%; height: 2px; opacity: .65; }
.mod::after { display: none; }
.mod:hover { transform: translateY(-3px); border-color: rgba(104,121,166,1.0); box-shadow: 0 22px 62px rgba(49,38,32,0.096); }
.mod--wide { grid-column: span 5; }
.mod--row2 { height: auto; }
.mod__h { min-height: 65px; padding: 17px 18px 13px; border-bottom-color: rgba(106,121,160,0.476); }
.mod__h h2 { color: #2a271e; 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: #2a3860; background: rgba(184,210,255,0.2); }
.mod__h .n { color: #3a4666; border-color: rgba(107,121,159,0.595); }
.mod__b { scrollbar-color: #6a79a0 transparent; }
.mod__b::-webkit-scrollbar-thumb { background: #c7d4f4; border-color: #717a8f; }
.mod__f { padding: 9px; border-top-color: rgba(106,121,160,0.476); }
.go { min-height: 42px; color: #302d24; background: rgba(199,217,255,0.62); border-radius: 5px; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.go:hover { color: #27241b; background: #c2d4ff; }
.li { padding: 12px 17px; border-bottom-color: rgba(107,121,159,0.374); }
.li:hover { background: rgba(191,211,255,0.3); }
.li--img { grid-template-columns: 64px 1fr; }
.li__th { width: 64px; border-radius: 6px; background: #ece6d8; }
.li__th--none { background: repeating-linear-gradient(45deg, #e6e1d2 0 6px, #e4ded0 6px 12px); }
.li__m { color: #314277; font-weight: 600; text-transform: uppercase; }
.li__t { color: #2f2c23; font-size: 13.5px; font-weight: 500; }
.li:hover .li__t { color: #27241b; }
.li__ic, .li__x { color: #3a4665; }
.tiles { gap: 8px; padding: 9px; }
.tile { border-radius: 5px; }
.tile::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(108,122,156,0.425); border-radius: inherit; pointer-events: none; }
.tile__c { padding: 46px 9px 8px; text-shadow: 0 1px 3px rgba(49,38,32,0.192);
  background: linear-gradient(to top, rgba(241,235,221,0.97) 0%, rgba(241,235,221,0.88) 32%,
    rgba(241,235,221,0.6) 62%, rgba(241,235,221,0.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: #354faa; }
.a-gal { --accent: #96302b; }
.a-doc { --accent: #784e00; }
.a-cal { --accent: #2e6544; }
.a-rank { --accent: #3e5495; }
.mod--ink { color: #27241b; background: linear-gradient(145deg, #cbd8f9, #e5e0d1); }
.mod--ink .mod__ic { color: #2e2a22; background: rgba(166,194,255,0.3); }
.mod--ink .dot { color: #283762; }
.mod--ink .dot::before { background: #b4c4e9; box-shadow: 0 0 12px rgba(49,38,32,0.128); }
.stack { gap: 14px; }
.stack .mod { border-radius: 8px; }
.stack .mod:last-child { color: var(--ink); background: linear-gradient(145deg, #e5dfd1, #eae4d6); }
.stack .mod:last-child .mod__ic { color: #2b3962; background: rgba(169,194,255,0.22); }
.stack .mod:last-child .contact a { color: #302d24; border-color: rgba(109,122,155,0.612); }
.stack .mod:last-child .contact span { color: #3a4769; }

/* 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, #e9e3d5, #ede7d9);
  border-top: 1px solid rgba(106,121,161,0.782);
  border-bottom: 1px solid rgba(106,121,161,0.544);
}
.stats div { min-height: 76px; display: grid; place-content: center; text-align: center; border-left: 1px solid rgba(108,122,156,0.408); }
.stats div:last-child { border-right: 1px solid rgba(108,122,156,0.408); }
.stats strong { color: #2b271f; font: 700 35px/1 "IBM Plex Sans", sans-serif; letter-spacing: .02em; }
.stats span { margin-top: 8px; color: #3d4558; 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: #3d4353;
  background: #f2ecde;
  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(108,122,155,0.374); }
.foot b { color: #2e2a22; text-transform: uppercase; letter-spacing: .04em; }
.foot a { color: #3f3c33; }
.foot a:hover { color: #304279; }
.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: #464f64; }
.foot p { grid-column: 1 / -1; margin: 28px 0 0; padding-top: 15px; color: #4a5267; border-top: 1px solid rgba(108,122,155,0.306); }

@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(242,236,222,0.97), rgba(239,233,219,0.8) 44%, rgba(239,233,219,0.2) 68%), linear-gradient(0deg, rgba(242,236,222,0.96), transparent 45%); }
  .hero__in { padding-right: 48%; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats div { border-bottom: 1px solid rgba(108,122,156,0.306); }
  .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(242,236,222,0.98) 2%, rgba(239,233,219,0.78) 54%, rgba(239,233,219,0.28)), linear-gradient(90deg, rgba(242,236,222,0.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(108,122,155,0.306); }
}
@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(240,234,220,0.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(240,234,220,0.92);
  border-bottom-color: rgba(106,121,161,0.306);
}
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px;
  background: linear-gradient(180deg, rgba(242,236,222,0.4), 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: #27241b; 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: #3a4666;
}

/* 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: #3b372e; border: 0; white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.mainnav a::after { display: none; }
.mainnav a:hover { background: rgba(201,196,182,0.1); color: #27241b; }
.mainnav a[aria-current="page"] { background: rgba(166,194,255,0.18); color: #27241b; }
.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,122,156,0.51); border-radius: 999px;
  background: rgba(201,196,182,0.04); color: #3a4666;
  transition: border-color .18s ease, background .18s ease; overflow: visible;
}
.search:focus-within { border-color: var(--blue); background: rgba(166,194,255,0.1); }
.search input {
  width: 118px; border: 0; background: none; outline: none; color: #2d2a21;
  font: 400 13px/1 "IBM Plex Sans", sans-serif; padding: 0;
}
.search input::placeholder { color: #414d6d; }
.search button { display: none; }

.lang {
  display: flex; gap: 2px; padding: 2px; background: rgba(201,196,182,0.05);
  border: 1px solid rgba(108,122,156,0.442); border-radius: 999px;
}
.lang a {
  border: 0; background: none; cursor: pointer; color: #38425c;
  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: #27241b; }
.lang button:hover:not([aria-pressed="true"]) { color: #2d2a21; }

/* mobile */
.navtoggle { display: none; width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
  background: rgba(201,196,182,0.05); border: 1px solid rgba(108,122,156,0.442);
  padding: 0; place-items: center; }
.navtoggle span { display: block; width: 16px; height: 1.6px; border-radius: 2px;
  background: #c9c4b6; 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(106,121,161,0.306); }
.drawer a { padding: 13px 21px; font-size: 15px; font-weight: 500; color: #332f27; }
.drawer a:hover { background: rgba(201,196,182,0.08); color: #27241b; }

@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: #27241b; 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: #314277; 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: #27241b; 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(49,38,32,0.256); 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(166,194,255,0.16); }
.sres:hover .sres__k, .sres.is-on .sres__k { border-color: var(--blue); color: #2d3958; }
.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(166,194,255,0.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(49,38,32,0.0448); }
.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(102,121,170,0.374);
  border-radius: 24px;
  background-color: rgba(235,230,215,0.64);
  box-shadow: inset 0 1px 0 rgba(49,38,32,0.0112), 0 24px 70px -44px rgba(49,38,32,0.32);
}
:root:not([data-tema]) .gen {
  background-image:
    radial-gradient(circle at 91% 18%, rgba(201,196,182,0.3) 0 5px, rgba(166,194,255,0.14) 6px 22px, transparent 23px),
    radial-gradient(circle at -2% 112%, transparent 0 170px, rgba(166,194,255,0.18) 171px 173px, transparent 174px),
    linear-gradient(109deg, transparent 0 73%, rgba(166,194,255,0.1) 73.1% 73.35%, transparent 73.45%),
    radial-gradient(circle at 82% 8%, rgba(185,211,255,0.18), transparent 38%);
}
:root:not([data-tema]) .geo {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 86px, rgba(166,194,255,0.055) 86px 87px),
    repeating-linear-gradient(0deg, transparent 0 86px, rgba(166,194,255,0.04) 86px 87px),
    radial-gradient(ellipse at 78% -12%, rgba(166,194,255,0.22), transparent 48%);
}
:root:not([data-tema]) .crew {
  background-image:
    radial-gradient(circle, rgba(176,195,244,0.17) 0 2px, transparent 2.5px),
    linear-gradient(135deg, rgba(190,211,255,0.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%
  );
}

/* The narrow-screen override reinstated the ellipse and the floating margins
   removed above — the shape survived on phones after it was taken off the
   desktop. The hero is the same full-bleed band at every width. */
/* 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: #583100; }
.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;
}
/* the brand colour is the point of this hover: the skin recolouring pass
   turned it into the skin's own blue, which is not Facebook. */
.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; these inline links
     were 17-21px tall because nothing gave them a box */
  .foot a, .wall__go, .contact a { display: inline-flex; align-items: center; min-height: 26px; }
}


/* ---- shared corrections ---- */
/* Decorative atmosphere shared by the three light skins.  The motifs sit
   behind the page and never intercept clicks or enter the accessibility tree. */
body {
  position: relative;
  isolation: isolate;
}
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

@media print {
  body::before,
  body::after { display: none !important; }
}

/* ===================================================================
   RECOVERED WORK — skins/tesut.theme.css
   Read back out of a browser tab that still had the good stylesheet parsed in
   memory after this file reverted to an older copy. Values are exact; the
   comments are rewritten, since cssRules serialisation drops them.
   =================================================================== */

/* The flag ribbon was three pastels (#c2d4ff / #dac09d / #fec4bc) and read as
   decoration. At full strength it reads as the flag. */
.tri i:nth-child(1) { background: #0d3b8f; }
.tri i:nth-child(2) { background: #e0a615; }
.tri i:nth-child(3) { background: #b4231f; }

/* ---- the hero -----------------------------------------------------
   It carried `border-radius: 50% / 34px` — a wide shallow ellipse — and a mask
   that faded its top and bottom edges to nothing, floating on cream below the
   masthead. A federation's masthead photo is architecture, not a sticker: it
   meets the bar, it has edges, and it closes on a woven hem.
   The narrow-screen block further down reinstated that ellipse, so the shape
   survived on phones after it was taken off the desktop — it is gone from both. */
.hero { margin-top: 0; margin-bottom: 0; border-radius: 0;
        -webkit-mask-image: none; mask-image: none; }
.hero::after {
  content: ""; display: block; position: absolute;
  z-index: 4;                /* over the plinth, whose lower edge it is */
  left: 0; right: 0; bottom: 0;
  height: var(--brau);
  pointer-events: none;
  background: url('/assets/tesut/brau-geo.webp') repeat-x center / auto var(--brau);
}

/* brightness(.72) sank the picture into a murky blue-grey; with the cold veil
   that used to sit over it, the one photograph on the page read as a dead
   rectangle. Lifted, and warmed a touch so it belongs to the cream. */
.hero__media img { width: 100%; height: 100%; object-fit: cover;
  object-position: center 46%;
  filter: saturate(.74) contrast(1.06) brightness(.9) sepia(.1);
  animation: heroZoom 12s ease-out both; }

.hero__strip { position: absolute; inset: auto 0 0; min-height: 62px;
  padding: 12px max(21px, calc(50vw - 690px)); background: rgba(239,233,219,.9);
  border-top: 1px solid rgba(96,74,44,.576); backdrop-filter: blur(8px); }
.hero__strip .tagline { color: #3d2a03; background: #e6cf9b; border-radius: 3px; }

/* cream on the blue, not ink — dark text on a mid-blue was 2.6, and 1.6 once
   the blue was deepened. This is a keyboard user's first control on the page. */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 0 0 8px 8px; background: var(--blue);
  color: #f4efe3; font: 600 14px/1 "IBM Plex Sans", sans-serif;
  transition: top .14s ease; }

/* the interface tint, ochre rather than the pale periwinkle it was */
.mainnav a[aria-current="page"] { background: rgba(196,142,42,.18); color: #27241b; }
.search:focus-within { border-color: var(--blue); background: rgba(196,142,42,.1); }
.sres:hover, .sres.is-on { background: rgba(196,142,42,.16); }
.spanel__all:hover { background: rgba(196,142,42,.12); }

/* brau-geo is a purpose-made strip: the star-and-meander border, drawn to
   repeat with no seam. It is the site's one border. */
.brau,
.head::after {
  background-image: url('/assets/tesut/brau-geo.webp');
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto var(--brau);
}

/* warm the footer's rules; they were blue-grey over a warm ground */
.foot > div + div { padding-left: 34px; border-left: 1px solid rgba(96,74,44,.373); }


a.foot__by:hover, a.foot__by:focus-visible { color: #E8B759; }

:root:not([data-tema]) .gen {
  background-image:
    radial-gradient(circle at 91% 18%, rgba(201,196,182,.3) 0 5px, rgba(196,142,42,.14) 6px 22px, transparent 23px),
    radial-gradient(circle at -2% 112%, transparent 0 170px, rgba(196,142,42,.18) 171px 173px, transparent 174px),
    linear-gradient(109deg, transparent 0 73%, rgba(196,142,42,.1) 73.1% 73.35%, transparent 73.45%),
    radial-gradient(circle at 82% 8%, rgba(185,211,255,.18), transparent 38%);
}
:root:not([data-tema]) .geo {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 86px, rgba(196,142,42,.055) 86px 87px),
    repeating-linear-gradient(0deg, transparent 0 86px, rgba(196,142,42,.04) 86px 87px),
    radial-gradient(ellipse at 78% -12%, rgba(196,142,42,.22), transparent 48%);
}

@media (max-width: 1140px) {
  /* dead below 861px too — see the note on .hero__media::after above */
  .hero__media::after { background:
    linear-gradient(90deg, rgba(242,236,222,.97), rgba(239,233,219,.8) 44%, rgba(239,233,219,.2) 68%),
    linear-gradient(0deg, rgba(242,236,222,.96), transparent 45%); }
  .hero__in { padding-right: 48%; }
  .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); }
  .hero { min-height: 620px; }
  .hero__media img { object-position: 58% center; }
  /* dead — see the note on .hero__media::after above */
  .hero__media::after { background:
    linear-gradient(0deg, rgba(242,236,222,.98) 2%, rgba(239,233,219,.78) 54%, rgba(239,233,219,.28)),
    linear-gradient(90deg, rgba(242,236,222,.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%; }
  .hero__strip { padding-inline: 15px; }
  .hero__strip .d { display: none; }
  .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(96,74,44,.306); }
}

/* ===================================================================
   RECOVERED WORK (2) — skins/tesut.theme.css
   The revert left this file's older copy, in which every rule and hairline was
   blue-grey — rgba(106,121,161,…), rgba(108,122,156,…) — over a warm cream
   page, which is what greyed the whole thing down. These are the warmed
   versions, read back out of the browser's parsed copy of the good sheet.
   They repeat selectors that appear earlier in the file and override them.
   =================================================================== */

:root {
  --barh: 93px;
  --bg: #f0eadc;
  --card: #ebe5d7;
  --ink: #2b271f;
  --ink-2: #3a362d;
  --ink-3: #454c5e;          /* tesut.pages.css warms this to #625646 */
  --rule:   rgba(96,74,44,0.374);
  --rule-2: rgba(96,74,44,0.714);
  --red: #9d2522;
  --red-text: #903630;
  /* the accent was a mid cornflower (#354faa); deepened it reads institutional
     rather than bright, and gains two points of contrast on every ground */
  --blue: #26407e;
  --gold: #784e00;
  --acid: #26407e;
  --electric: #26407e;
  --orange: #9d2522;
  /* the panel surface. This was #f2ecde on a #f0eadc page — a 1.01 contrast, so
     every ranked table, tab strip and result card dissolved into the page. */
  --night: #e4dac4;
  --display: "Fira Sans Condensed", "IBM Plex Sans", sans-serif;
}

/* the page-top wash was pale blue over warm cream, which is most of the
   grey-lavender cast; the same gradient in the paper's own colour */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(230,224,210,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,224,210,.18) 1px, transparent 1px),
    radial-gradient(circle at 50% 2%, #e2d5b8 0, #ece4d1 35rem, #f2ecde 72rem);
  background-size: 54px 54px, 54px 54px, auto;
  color: var(--ink);
  font-family: "IBM Plex Sans", sans-serif;
}

/* ---- warm hairlines throughout ------------------------------------
   Colour only. These selectors are restated later in the file with their real
   layout (the pill search, the inline nav); repeating the whole rule here put
   an older layout back on top of them. */
.lang a[aria-current] { color: #3d2a03; background: #e6cf9b; }
.mainnav { border-top-color: rgba(96,74,44,.576);
  border-bottom-color: rgba(96,74,44,.882); }
.mainnav a { border-left-color: rgba(96,74,44,.27); }
.mainnav a:last-child { border-right-color: rgba(96,74,44,.27); }
.bt--p { color: #f4efe3; background: linear-gradient(#2d4a8c, #223a72); }
.bt--p:hover { background: linear-gradient(#35549b, #27417f); transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(49,38,32,.08); }
.bt--g { color: #312d25; border-color: rgba(96,74,44,.933); background: rgba(235,229,215,.54); }
.head__m span { padding-left: 16px; border-left: 1px solid rgba(96,74,44,.443); }
.mod__h { min-height: 65px; padding: 17px 18px 13px; border-bottom-color: rgba(96,74,44,.475); }
.mod__h .n { color: #3a4666; border-color: rgba(96,74,44,.596); }
.mod__b { scrollbar-color: #a08a63 transparent; }
.mod__b::-webkit-scrollbar-thumb { background: #cbb48b; border-color: #8f7f65; }
.mod__f { padding: 9px; border-top-color: rgba(96,74,44,.475); }
.go { min-height: 42px; color: #3d2a03; background: rgba(224,203,161,.62); border-radius: 5px;
  text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.go:hover { color: #3d2a03; background: #e6cf9b; }
.li { padding: 12px 17px; border-bottom-color: rgba(96,74,44,.373); }
.tile::after { content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(96,74,44,.424); border-radius: inherit; pointer-events: none; }
.stack .mod:last-child .contact a { color: #302d24; border-color: rgba(96,74,44,.61); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); width: 100vw;
  margin-left: calc(50% - 50vw); padding: 28px max(21px, calc(50vw - 690px));
  background: linear-gradient(#e9e3d5, #ede7d9);
  border-top: 1px solid rgba(96,74,44,.78); border-bottom: 1px solid rgba(96,74,44,.545); }
.stats div { min-height: 76px; display: grid; place-content: center; text-align: center;
  border-left: 1px solid rgba(96,74,44,.408); }
.stats div:last-child { border-right: 1px solid rgba(96,74,44,.408); }
.bar.is-stuck { background: rgba(240,234,220,.92); border-bottom-color: rgba(96,74,44,.306); }

/* the ranked-players panel: gold accents rather than the pale blue ones */
.mod--ink { color: #f2ece0; background: linear-gradient(145deg, #2a4585, #1a2c58); }
.mod--ink .mod__h h2, .mod--ink b, .mod--ink strong { color: #fbf6ec; }
.mod--ink .mod__ic { color: #f0e6cf; background: rgba(224,166,21,.26); }
.mod--ink .dot { color: #e6cf9b; }
.mod--ink .dot::before { background: #e0a615; box-shadow: 0 0 12px rgba(224,166,21,.45); }
.mod--ink a { color: #e9dcc4; }
.mod--ink .go { color: #f2ece0; background: rgba(255,255,255,.1); }
.mod--ink .go:hover { color: #1a2c58; background: #e6cf9b; }
.mod--ink .rk5__lede, .mod--ink .rk5__t { color: rgba(242,236,224,.72); }
.mod--ink .rk5__n { color: #f2ece0; }
.mod--ink .rk5__p { color: rgba(242,236,224,.68); }
.mod--ink .rk5__v { color: #e6cf9b; }
.mod--ink .rk5__r:nth-child(2) .rk5__p { color: #e0a615; }
.mod--ink .rk5__r { border-bottom-color: rgba(242,236,224,.15); }
.mod--ink .rk5__r:hover { background: rgba(242,236,224,.09); }
.mod--ink .rk5__r:hover .rk5__n { color: #fff; }

/* the masthead controls — colour only, the layout is set earlier */
.search { border-color: rgba(96,74,44,.51); }
.lang { border-color: rgba(96,74,44,.443); }
.lang button[aria-pressed="true"] { background: var(--blue); color: #f4efe3; }
/* Colour only, as the heading says. Re-declaring display/width/height here
   re-hid the toggle: this block sits after the @media (max-width:1240px) rule
   that turns it on, and a later top-level rule beats an earlier media rule of
   the same specificity — so the hamburger was hidden at every width and the
   phone had no way to reach any section. */
.navtoggle { background: rgba(201,196,182,.05); border: 1px solid rgba(96,74,44,.443); }
/* The three bars are drawn with background-color, so the recolouring pass read
   them as a surface and lightened them: #c9c4b6 on the cream masthead is 1.43:1
   and the button looked empty. They are the icon, not a panel — ink them. */
.navtoggle span { background: var(--ink); }
.drawer { border-top: 1px solid rgba(96,74,44,.306); }

@media (max-width: 900px) {
  .stats div { border-bottom: 1px solid rgba(96,74,44,.306); }
}
@media (max-width: 720px) {
  .foot > div + div { padding: 18px 0 0; border-left: 0;
    border-top: 1px solid rgba(96,74,44,.306); }
}