/* Palette and module accents live in theme.css, which loads after this block
   and is the single source of truth. The light values that used to sit here
   were from the pre-redesign build and were overridden on every page. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); overflow-x:clip;
  font:400 15.5px/1.5 "IBM Plex Sans", sans-serif;
  -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2{margin:0; font-family:"IBM Plex Sans", sans-serif; font-weight:600; line-height:1;
  letter-spacing:-.02em; font-variation-settings:"SOFT" 0,"WONK" 1}
.mono{font-family:"IBM Plex Sans", sans-serif; font-variant-numeric:tabular-nums}
/* Blue is the interactive colour everywhere on this site — nav, tabs, links,
   search. The focus ring was the one outlier in red. */
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.wrap{width:min(100% - 40px,1320px); margin-inline:auto}

/* ---------- top bar ---------- */
.bar{position:sticky; top:0; z-index:40; background:rgba(201,196,182,0.9);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--rule)}
.bar__in{display:flex; align-items:center; gap:18px; padding:13px 0}
.crest{display:flex; align-items:center; gap:11px; margin-right:auto}
.crest svg{width:30px; height:30px; flex:none}
.crest b{display:block; font-family:"IBM Plex Sans", sans-serif; font-weight:600; font-size:15.5px;
  line-height:1.1; letter-spacing:-.012em}
.crest small{display:block; font-family:"IBM Plex Sans", sans-serif; font-size:9px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:3px}
.pill{display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px;
  border:1px solid var(--rule-2); border-radius:999px; font-size:13px; font-weight:500;
  background:var(--card); transition:border-color .16s ease, background .16s ease}
.pill:hover{border-color:var(--ink); background:#c9c4b6}
.lang{display:flex; gap:2px; background:var(--card); border:1px solid var(--rule-2);
  border-radius:999px; padding:2px}
.lang a{border:0; background:none; cursor:pointer; font:500 12px/1 "IBM Plex Sans", sans-serif;
  color:var(--ink-3); padding:7px 11px; border-radius:999px}
.lang a[aria-current]{background:var(--ink); color:var(--card)}

/* ---------- head ---------- */
.head{padding:22px 0 16px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap}
.head h2{font-size:19px; font-weight:900; letter-spacing:-.02em}
.head__m{display:flex; gap:20px; font-family:"IBM Plex Sans", sans-serif; font-size:11px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}

/* ---------- hero ---------- */
.hero{position:relative; border-radius:14px; overflow:hidden; background:var(--ink);
  color:#2b281f; margin-bottom:18px; isolation:isolate;
  box-shadow:0 1px 0 rgba(49,38,32,0.016), 0 22px 50px -28px rgba(49,38,32,0.16)}
.hero__media{position:absolute; inset:0 0 0 46%; z-index:0}
.hero__media img{width:100%; height:100%; object-fit:cover;
  filter:grayscale(.62) contrast(1.12) brightness(.82)}
.hero__media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(96deg, var(--ink) 4%, rgba(238,232,218,0.72) 34%, rgba(255,180,168,0.3) 100%)}
.hero__net{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.13;
  background-image:linear-gradient(90deg, rgba(201,196,182,0.9) 1px, transparent 1px);
  background-size:38px 100%;
  mask-image:linear-gradient(90deg,#000 0 42%, transparent 78%)}
.hero__in{position:relative; z-index:2; padding:clamp(30px,3.6vw,54px);
  min-height:clamp(340px,38vw,430px); display:flex; flex-direction:column;
  justify-content:center; max-width:60%}
.hero__k{display:inline-flex; align-items:center; gap:9px; font-family:"IBM Plex Sans", sans-serif;
  font-size:10.5px; letter-spacing:.19em; text-transform:uppercase;
  color:rgba(43,40,31,0.7688); margin-bottom:18px}
.hero__k::before{content:""; width:22px; height:2px; background:var(--red)}
.hero h1{font-size:clamp(30px,4.3vw,58px); font-weight:900; letter-spacing:-.032em;
  line-height:.98; max-width:16ch}
.hero h1 b{font-weight:900; color:#892a25; display:block}
.hero p{margin:20px 0 0; max-width:44ch; font-size:16.5px; color:rgba(43,40,31,0.8474)}
.hero__cta{display:flex; gap:10px; margin-top:28px; flex-wrap:wrap}
.bt{display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 20px;
  border-radius:999px; font-size:14px; font-weight:600; border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease}
.bt--p{background:#c9c4b6; color:var(--ink)}
.bt--p:hover{transform:translateY(-2px); background:#c9c4b6}
.bt--g{border-color:rgba(127,122,109,0.544); color:#2b281f}
.bt--g:hover{border-color:#7f7a6d; background:rgba(201,196,182,0.08); transform:translateY(-2px)}
/* ---------- module grid ---------- */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px; padding-bottom:34px}
.mod{grid-column:span 4; background:var(--card); border:1px solid var(--rule);
  border-radius:12px; display:flex; flex-direction:column; min-height:0;
  height:auto; overflow:hidden; position:relative;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease}
.mod::before{content:""; position:absolute; inset:0 0 auto; height:3px; z-index:3;
  background:var(--accent,var(--rule-2)); opacity:.9}
.mod:hover{transform:translateY(-2px); border-color:var(--rule-2);
  box-shadow:0 18px 34px -24px rgba(49,38,32,0.1344)}
.mod--wide{grid-column:span 5}
.mod--half{grid-column:span 3}
.mod--row2{height:auto}
/* Contact takes the height its four lines need and no more. Splitting the
   column 1fr/1fr instead made the shorter module match the taller one, which
   doubled the stack and stretched the whole first row of the grid. */
.stack{grid-column:span 3; display:grid; grid-template-rows:1fr auto; gap:18px; min-height:0}
.stack .mod{height:auto; min-height:0}
.mod__h{display:flex; align-items:center; gap:10px; padding:17px 17px 14px;
  border-bottom:1px solid var(--rule); flex:none}
.mod__h h2{font-size:18px; letter-spacing:-.018em; font-weight:900}
.mod__ic{width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent,#c9c4b6) 15%, transparent);
  color:var(--accent,var(--ink-3)); flex:none}
.mod__h .n{font-family:"IBM Plex Sans", sans-serif; font-size:10.5px; color:var(--ink-3);
  border:1px solid var(--rule-2); border-radius:999px; padding:2px 7px; margin-left:auto}
.mod__b{flex:1; position:relative;
  overflow:visible}
.mod__b::-webkit-scrollbar{width:8px}
.mod__b::-webkit-scrollbar-thumb{background:var(--rule-2); border-radius:99px;
  border:2px solid var(--card)}
.mod__f{flex:none; border-top:1px solid var(--rule); padding:11px 13px}
.go{display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:10px 13px; border-radius:8px; font-size:13.5px; font-weight:600;
  background:var(--bg); transition:background .16s ease, color .16s ease}
.go:hover{background:var(--ink); color:var(--card)}
.go svg{transition:transform .18s ease}
.go:hover svg{transform:translateX(3px)}

/* list rows */
.li{display:grid; grid-template-columns:66px 1fr; gap:12px; align-items:baseline;
  padding:12px 17px; border-bottom:1px solid var(--rule); transition:background .14s ease}
.li:last-child{border-bottom:0}
.li:hover{background:var(--bg)}
.li__d{font-family:"IBM Plex Sans", sans-serif; font-size:12px; color:var(--ink-2);
  line-height:1.25}
.li__d i{display:block; font-style:normal; font-size:10px; color:var(--ink-3)}
.li__t{font-size:14.5px; line-height:1.32; font-weight:500}
.li:hover .li__t{color:var(--red)}
.li--img{grid-template-columns:56px 1fr; align-items:center}
.li__th{width:56px; aspect-ratio:1; border-radius:5px; overflow:hidden; background:var(--bg)}
.li__th img{width:100%; height:100%; object-fit:cover}
.li__th--none{background:repeating-linear-gradient(45deg,var(--bg) 0 6px,#c9c4b6 6px 12px)}
.li__c{min-width:0}
.li__m{display:block; font-family:"IBM Plex Sans", sans-serif; font-size:10.5px;
  color:var(--ink-3); margin-bottom:3px}
/* An event in progress is the one thing in this module worth spotting at a
   glance, so it gets a badge and a marked row instead of a word in grey. */
.evtag{display:inline-flex; align-items:center; gap:5px; border-radius:999px;
  padding:2px 8px; font-family:"IBM Plex Sans", sans-serif; font-size:10px;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:var(--rule); color:var(--ink-2)}
.evtag--live{background:rgba(146,215,170,0.16); color:#005629}
.evpip{width:6px; height:6px; border-radius:50%; background:currentColor;
  flex:none; animation:evpulse 1.9s ease-in-out infinite}
@keyframes evpulse{0%,100%{opacity:1} 50%{opacity:.35}}
.evwhere{margin-left:7px; color:var(--ink-3)}
.li--ev.is-live{background:rgba(146,215,170,0.06); box-shadow:inset 3px 0 0 rgba(49,38,32,0.32)}
.li--ev.is-live .li__d b{color:#005629}
@media (prefers-reduced-motion:reduce){ .evpip{animation:none} }
.li--doc{grid-template-columns:22px 1fr auto; align-items:center}
.li__ic{color:var(--ink-3)}
.li__x{font-family:"IBM Plex Sans", sans-serif; font-size:11px; color:var(--ink-3)}

/* gallery tiles */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:13px}
.tile{position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/3;
  background:var(--bg)}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tile:hover img{transform:scale(1.06)}
/* portrait album covers crop to chests in a landscape frame; take the
   crop from where the faces are instead */
.cov.is-tall{object-position:50% 30%}
/* Per-album crop corrections, homepage preview only. The tile is wider than a
   4:3 photograph, so a centred crop shaves the top and bottom; where a picture
   puts its subject near an edge, it gets its own focal point here. Keyed on the
   album slug, so it survives the cover being re-derived under a new hash. */
.a-gal .tile[data-album="turneul-republican-in-memoria-lui-mihail-polcanov"] .cov {
  /* The tile is far wider than 4:3 in this module (about 1.7:1), so the crop
     is deeper than it looks: at 40% the cut landed at 5% of the photograph,
     right across the top of their heads. Pull the window up to the frame. */
  object-position: 50% 15%;
}
.a-gal .tile[data-album="chempionat-respubliki-moldova-po-nastolnomu-tennisu-u-11"] .cov {
  /* A portrait photograph in a wide tile: only about 43% of it survives the
     crop. At 30% that window sat on the wall of photographs above the podium
     and left the girls themselves under the caption. Drop it to where they
     stand, so the faces clear the gradient. */
  object-position: 50% 55%;
}
.tile__c{position:absolute; inset:auto 0 0 0; padding:20px 9px 8px; color:#27241b;
  background:linear-gradient(transparent,rgba(243,237,222,0.82))}
.tile__c b{display:block; font-size:11.5px; font-weight:600; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tile__c i{font-style:normal; font-family:"IBM Plex Sans", sans-serif; font-size:9.5px;
  opacity:.75}

/* stat / notice modules */
.pad{padding:17px}
.empty{display:flex; flex-direction:column; justify-content:center; height:100%;
  padding:17px; gap:9px}
.empty p{margin:0; color:var(--ink-2); font-size:14px}
.dot{display:inline-flex; align-items:center; gap:7px; font-family:"IBM Plex Sans", sans-serif;
  font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--red-text)}
.dot::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--red)}
.mod--ink{background:var(--ink); border-color:var(--ink); color:#2c2820}
.mod--ink .mod__h{border-bottom-color:rgba(127,122,109,0.255)}
.mod--ink .mod__h .n{border-color:rgba(127,122,109,0.425); color:rgba(44,40,32,0.7551)}
.mod--ink .empty p{color:rgba(44,40,32,0.8089)}
.mod--ink .mod__f{border-top-color:rgba(127,122,109,0.255)}
.mod--ink .go{background:rgba(201,196,182,0.09)}
.mod--ink .go:hover{background:#c9c4b6; color:var(--ink)}
/* home ranking preview — top three of each ligas.io group; each row is a
   link to that player's matches on the ranking page */
.rk5{flex:1; min-height:0; overflow:auto; padding:11px 13px 13px; display:grid; gap:13px;
  align-content:start}
.rk5__lede{margin:0 0 2px; font-size:11.5px; line-height:1.45;
  color:rgba(44,40,32,0.7551)}
.rk5__t{margin:0 0 5px; font-family:"IBM Plex Sans", sans-serif; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(44,40,32,0.75)}
.rk5__r{display:grid; grid-template-columns:20px 1fr auto; align-items:baseline; gap:9px;
  padding:5px 0; border-bottom:1px solid rgba(127,122,109,0.17); color:inherit}
.rk5__g > .rk5__r:last-child{border-bottom:0}
.rk5__r{border-radius:5px; margin:0 -6px; padding-left:6px; padding-right:6px;
  transition:background .15s ease}
.rk5__r:hover{background:rgba(201,196,182,0.07)}
.rk5__r:hover .rk5__n{color:#27241b}
.rk5__r:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.rk5__p{font-family:"IBM Plex Sans", sans-serif; font-size:11px; font-weight:600;
  color:rgba(44,40,32,0.75)}
.rk5__r:nth-child(2) .rk5__p{color:#613500}
.rk5__n{font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rk5__v{font-family:"IBM Plex Sans", sans-serif; font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums; color:rgba(44,40,32,0.8845)}
.contact{display:grid; gap:9px; padding:17px; font-size:14px}
.contact a{color:var(--ink-2); border-bottom:1px solid var(--rule-2); padding-bottom:1px}
.contact a:hover{color:var(--red); border-color:var(--red)}
.contact span{font-family:"IBM Plex Sans", sans-serif; font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3)}

.foot{border-top:1px solid var(--rule); padding:20px 0 40px; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:"IBM Plex Sans", sans-serif; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3)}
.tri{height:2px; display:flex} .tri i{flex:1}
.tri i:nth-child(1){background:var(--blue)} .tri i:nth-child(2){background:var(--gold)}
.tri i:nth-child(3){background:var(--red)}

@media (max-width:1140px){
  .mod,.mod--wide{grid-column:span 6}
  .mod--half{grid-column:span 6}
  .stack{grid-column:span 6; grid-template-rows:auto auto}

}
@media (max-width:900px){
  .hero__media{inset:0}
  .hero__media::after{background:linear-gradient(180deg, rgba(238,232,218,0.86) 30%, rgba(255,180,168,0.42))}
  .hero__in{max-width:100%; min-height:320px}
}
@media (max-width:720px){
  .mod,.mod--wide,.mod--half{grid-column:span 12}
  .stack{grid-column:span 12}


  .head{padding-top:24px}
  .bar__in .pill{display:none}
}
/* the eyebrow is defined in pages.css for the inner pages; the home page
   needs its own copy, since it does not load that sheet */
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:10.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3)}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--red); flex:none}

/* ================= community bands =================
   The page used to end in four big numbers with small labels under them.
   These replace that: the same facts, but as the people they describe. */
.gen, .geo, .crew{display:grid; gap:clamp(24px,3.4vw,44px)}
.gen{margin:clamp(38px,5vw,60px) 0 4px; grid-template-columns:minmax(270px,.92fr) 1.45fr; align-items:end}
.geo, .crew{margin:clamp(44px,5.5vw,66px) 0 0; grid-template-columns:minmax(260px,.86fr) 1.5fr; align-items:start}
.gen__copy h2, .geo__copy h2, .crew__copy h2{
  margin:7px 0 11px; font-family:var(--display); font-weight:700;
  font-size:clamp(25px,2.9vw,39px); line-height:1.05; letter-spacing:-.012em}
.gen__copy h2 b{display:block; font-weight:inherit; color:var(--red-text)}
.gen__copy p, .geo__copy p, .crew__copy p{
  margin:0; max-width:44ch; font-size:14.5px; line-height:1.62; color:var(--ink-2)}

/* one dot per ranked player, dropped on the year they were born */
.gen__plot{margin:0}
.gen__dots{position:relative; height:232px; color:var(--blue)}
.gen__c{position:absolute; bottom:0; left:var(--x); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:1.5px}
.gen__c i{display:block; width:4px; height:4px; border-radius:50%;
  background:currentColor; opacity:.52}
.gen__axis{display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin:13px 0 0; padding-top:9px; border-top:1px solid var(--rule);
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.gen__axis em{font-style:normal; letter-spacing:.1em}

/* the photographs, edge to edge, no captions — just faces */
.wall{margin:clamp(44px,5.5vw,66px) calc(50% - 50vw) 0; width:100vw; max-width:100vw; overflow:hidden}
.wall__reel{display:flex; gap:6px; padding:0 6px; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none}
.wall__reel::-webkit-scrollbar{display:none}
.wall__p{flex:0 0 auto; width:clamp(146px,15vw,224px); aspect-ratio:4/3;
  overflow:hidden; border-radius:3px; background:var(--card)}
.wall__p img{width:100%; height:100%; object-fit:cover; display:block}
.wall__go{display:inline-flex; align-items:center; gap:9px;
  margin:15px 0 0 max(21px, calc(50vw - 690px));
  font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2)}
.wall__go:hover{color:var(--ink)}

/* every locality with a ranked player in it */
.towns{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px}
.towns li{display:inline-flex; align-items:baseline; gap:8px; padding:7px 13px;
  border:1px solid var(--rule); border-radius:999px; background:var(--card)}
.town__n{font-size:13.5px}
.town__v{font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* the names printed against each competition in the federation's calendar */
.orgs{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:10px}
.org{display:grid; grid-template-columns:38px 1fr; column-gap:12px;
  align-items:center; padding:11px 13px; border:1px solid var(--rule);
  border-radius:11px; background:var(--card)}
.org__i{grid-row:1/3; width:38px; height:38px; border-radius:50%; display:grid;
  place-items:center; background:rgba(166,194,255,0.14); font-size:12.5px;
  font-weight:600; letter-spacing:.03em}
.org__n{font-size:13.5px; font-weight:600; line-height:1.3}
.org__v{font-size:10.5px; color:var(--ink-3)}

@media (max-width:900px){
  .gen, .geo, .crew{grid-template-columns:1fr}
  .gen{align-items:start}
  .gen__dots{height:180px}
  .gen__c i{width:3px; height:3px; gap:1px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}