@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');
/* MTTF — inner pages. Extends theme.css; uses its tokens only. */

.page { padding: 30px 0 68px; }

/* breadcrumb */
.crumb {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 22px;
}
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--blue); }
.crumb b { color: var(--ink-2); font-weight: 500; max-width: 46ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb span { color: var(--rule-2); }

/* month jump chips */
.rail { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 26px; }
.rail a {
  font-size: 12px; letter-spacing: .08em; padding: 8px 13px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--card); color: var(--ink-2);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.rail a:hover { background: var(--blue); border-color: var(--blue); color: #27241b; }

/* a .mod that lists everything instead of scrolling internally */
.grid--stack { display: grid; grid-template-columns: 1fr; gap: 18px; }
.mod--full { height: auto; }
.mod--full .mod__b { overflow: visible; mask-image: none; }

/* article */
.art { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 34px; align-items: start; }
.art__main { min-width: 0; }
.art__date {
  display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 12px;
}
/* Headlines are sentences, not labels, so they are set in the case they were
   written in: caps strip the word shapes readers scan by, and these run to 122
   characters. Mixed case at display size wants tighter tracking and a little
   more leading than caps did, for the descenders. */
.art__title {
  font-family: "IBM Plex Sans", sans-serif; font-weight: 600; text-transform: none;
  font-size: clamp(30px, 4.4vw, 58px); line-height: 1.14; letter-spacing: -.015em;
  margin: 0 0 26px; color: #27241b;
}
.art__hero { margin: 0 0 28px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--rule); background: var(--card); }
.art__hero img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover;
  display: block; }
.art__body { font-size: 17px; line-height: 1.75; color: var(--ink-2);
  display: flow-root; }   /* contain the floated image deck */
/* Keep prose to a readable measure, but let tables and figures use the column.
   `ch` is the width of a zero, which is narrower than the average lowercase
   letter here — 70ch measured out at 85 real characters, so this is tuned by
   what lands on screen rather than by the nominal number. */
.art__body > p, .art__body > h2, .art__body > h3 { max-width: 60ch; }
.art__body p { margin: 0 0 18px; }
.art__body a { color: var(--blue); border-bottom: 1px solid var(--rule-2); }
.art__body a:hover { border-bottom-color: var(--blue); }
.art__body strong { color: var(--ink); }
.art__body h2, .art__body h3 { font-family: "IBM Plex Sans", sans-serif; text-transform: none;
  font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: #27241b; margin: 30px 0 12px; }
.art__body figure { margin: 26px 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--rule); }
.art__body img { width: 100%; display: block; }
.art__back { margin-top: 30px; }
.art__side { position: sticky; top: calc(var(--barh) + 14px); }

@media (max-width: 1040px) {
  .art { grid-template-columns: 1fr; }
  .art__side { position: static; }
}
@media (max-width: 720px) {
  .page { padding: 20px 0 48px; }
  .rail { gap: 6px; }
  .rail a { font-size: 11px; padding: 7px 10px; }
}

/* standing note under a listing */
.pnote {
  margin: 22px 0 0; padding: 16px 18px;
  border: 1px solid var(--rule); border-left: 3px solid var(--gold);
  border-radius: 8px; background: var(--card);
  color: var(--ink-3); font-size: 14.5px; max-width: 78ch;
}

/* the masthead is sticky (~127px) — keep anchored sections clear of it */
.mod[id], [id^="m2"] { scroll-margin-top: calc(var(--barh) + 32px); }

/* page lede */
.lede { max-width: 74ch; margin: 0 0 24px; color: var(--ink-2); font-size: 17px; line-height: 1.66; }

/* leadership */
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--rule); }
.role { background: var(--card); padding: 18px 20px 20px; }
.role h3 { margin: 0 0 12px; font-family: "IBM Plex Sans", sans-serif;
  text-transform: uppercase; font-size: 15px; letter-spacing: .06em; color: #314277; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.person { font-size: 14.5px; color: #2f2c23; display: flex; align-items: center; gap: 8px; }
.person--ru { color: var(--ink-3); }
.person .ru { font-size: 9.5px; letter-spacing: .1em; padding: 2px 5px; border-radius: 3px;
  border: 1px solid var(--rule-2); color: var(--ink-3); }

/* fair play */
.princs { list-style: none; margin: 0; padding: 0; }
.princ { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start;
  padding: 16px 18px; border-bottom: 1px solid var(--rule); }
.princ:last-child { border-bottom: 0; }
.princ__n { font-family: "IBM Plex Sans", sans-serif; font-size: 26px;
  line-height: 1; color: #314277; letter-spacing: .02em; }
.princ__t { font-size: 15px; line-height: 1.6; color: #2f2c23; }
.modtext { margin: 0; padding: 18px; font-size: 15.5px; line-height: 1.7;
  color: var(--ink-2); max-width: 82ch; }

/* national squads */
.squads { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); }
.squad { background: var(--card); padding: 16px 18px 18px; }
.squad h3 { margin: 0 0 12px; font-family: "IBM Plex Sans", sans-serif;
  text-transform: uppercase; font-size: 14px; letter-spacing: .07em; color: #314277; }
.aths { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ath { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: baseline; }
.ath__n { color: var(--ink-3); font-size: 12px; }
.ath__name { color: #2f2c23; font-size: 14.5px; font-weight: 500; }
.ath__meta { grid-column: 2; color: var(--ink-3); font-size: 11.5px; letter-spacing: .04em; }

/* contact cards */
.ccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; background: var(--rule); }
.ccard { background: var(--card); padding: 18px 20px 20px; display: grid; gap: 7px; }
.ccard h3 { margin: 0 0 6px; font-family: "IBM Plex Sans", sans-serif;
  text-transform: uppercase; font-size: 14px; letter-spacing: .07em; color: #314277; }
.ccard a, .ccard span { color: #2f2c23; font-size: 14.5px; }
.ccard a:hover { color: var(--blue); }
.kv { cursor: default; }
.kv .li__x { color: #2f2c23; font-size: 13px; letter-spacing: .02em; }

/* ===================================================================
   Page hero — structure borrowed from the ATTP site, rebuilt on the
   federation's own tokens (deep blue, condensed display, spaced meta).
   =================================================================== */
.flow { position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #e5e0d1 0%, var(--bg) 700px); }

.phero { position: relative; min-height: clamp(380px, 40vw, 520px);
  overflow: hidden; isolation: isolate; }
.phero__art { position: absolute; z-index: -2; inset: 0 0 0 auto;
  width: min(62vw, 900px); height: 100%; object-fit: cover; object-position: center;
  filter: saturate(.92) contrast(1.04);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 12%, #000 38%),
                      linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 12%, #000 38%),
              linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  mask-composite: intersect; }
.phero::before { content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(circle at 82% 34%, rgba(166,194,255,0.16), transparent 30%),
              linear-gradient(90deg, #ebe5d7 0%, rgba(235,229,215,0.97) 29%,
                              rgba(235,229,215,0.55) 52%, rgba(235,229,215,0.06) 78%); }
.phero__in { min-height: inherit; display: flex; align-items: center;
  padding-block: clamp(56px, 6vw, 92px); }
.phero__copy { width: min(620px, 52%); }
.phero__copy h1 { font-family: var(--display);
  text-transform: uppercase; color: #27241b;
  font-size: clamp(40px, 5.6vw, 78px); line-height: 1.04; letter-spacing: .004em;
  margin: 0; }
.breadcrumb { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb b { color: var(--ink-2); font-weight: 500; max-width: 46ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb span { color: var(--rule-2); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px;
  font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: #314277; margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--red); }
.phero .lede { font-size: 17.5px; color: var(--ink-2); max-width: 540px; margin: 16px 0 0;
  line-height: 1.62; }
.phero__note { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--rule); border-radius: 999px;
  padding: 7px 14px; background: rgba(235,229,215,0.55); }
.phero__note b { color: #314277; font-weight: 600; }

.section-tight { padding: 46px 0 68px; }

@media (max-width: 900px) {
  .phero { min-height: 0; }
  /* The photograph is the only one on most of these pages; at .34 under a
     flat veil it read as a stain rather than a picture. On a phone the copy
     is full-width, so there is no column to hide the veil in — the two were
     simply stacked on top of each other. They are separated instead: the
     picture takes a band across the top at full strength, and the copy sits
     below it on cream, the way it sits beside it on a desktop. The stops are
     in pixels, not percentages, because the band is a fixed padding while the
     hero's height moves with the length of the lede.

     Keep the ramp and .phero__in's top padding in step: the cream has to be
     up to full before the breadcrumb, which is the smallest text on the page. */
  /* These are wide action photographs and the players sit low in the frame,
     so a full-height fit put the empty ceiling in the clear part of the band
     and dissolved the game itself into the fade. The frame is tightened —
     the element is wider than the card and the card clips it — which is what
     makes object-position bite vertically at all: at 390x300 the cover fit is
     height-bound, the whole height already shows, and there is nothing to
     pan. Widening it puts the scale on the width instead and buys 85px of
     travel, spent on dropping the ceiling and lifting the players. */
  .phero__art { width: 148%; left: 50%; right: auto; transform: translateX(-50%);
    height: 300px; opacity: 1; object-position: center 82%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%); }
  /* the ball above his head is the subject here, and 82% cropped it off */
  [data-page="contacte"] .phero__art { object-position: center 60%; }
  .phero::before { background: linear-gradient(180deg,
      rgba(240,234,220,.04) 0px,
      rgba(240,234,220,.10) 112px,
      rgba(240,234,220,.86) 160px,
      rgba(240,234,220,.97) 196px,
      var(--bg) 238px); }
  .phero__copy { width: 100%; }
  .phero__in { padding-block: 40px 34px; }
  /* Four pages carry no photograph — the two legal ones in each language — so
     the band is asked for by the picture itself rather than set on every hero.
     The art precedes the copy in the markup, which is what makes this work. */
  .phero__art ~ .phero__in { padding-block: 182px 34px; }
}

/* article pages: same gradient ground, no full hero */
.flow--soft { background: linear-gradient(180deg, #e5e0d1 0%, var(--bg) 420px); }
.flow--soft .page { padding-top: 26px; }
.flow--soft .breadcrumb { margin-bottom: 18px; }

/* ===== structure copied from ATTP, recoloured to the federation palette ===== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; align-items: start; }
.dim { color: var(--ink-2); }
.mt-16 { margin-top: 16px; } .mt-40 { margin-top: 40px; } .mb-16 { margin-bottom: 16px; }

.section-tight h2 { font-family: var(--display); text-transform: uppercase;
  color: #27241b; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.02; letter-spacing: .004em; margin: 0; }
.section-tight h3 { font-family: "IBM Plex Sans", sans-serif; text-transform: uppercase;
  color: #27241b; font-size: 20px; letter-spacing: .03em; margin: 0; }

.rule-list { margin-top: 24px; }
.rule-item { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--rule); }
.rule-item:first-child { border-top: 0; }
.rule-item p { margin: 0; font-size: 15px; line-height: 1.62; }
.rule-num { font-family: "IBM Plex Sans", sans-serif; color: #314277; font-weight: 700;
  flex: 0 0 auto; font-size: 15px; }

.sanction-box { background: rgba(255,167,156,0.1); border: 1px solid rgba(169,101,93,0.612);
  border-radius: 10px; padding: 22px; margin-top: 28px; }
.sanction-box h3 { color: #632b26; margin-bottom: 10px; }
.sanction-box p { margin: 0; font-size: 15px; line-height: 1.62; }

.resource-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.resource-links a { padding: 12px 16px; border: 1px solid var(--rule-2); border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: #2f2c23; transition: background .16s ease, border-color .16s ease; }
.resource-links a:hover { background: var(--card); border-color: var(--blue); color: #27241b; }

.fairplay-content { position: relative; z-index: 1; padding-top: clamp(48px, 6vw, 84px); }

@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; gap: 34px; } }
@media (max-width: 600px) { .resource-links { grid-template-columns: 1fr; } }

/* ---- ATTP news-list-item ---- */
.news-list-item { display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  padding: 24px 0; border-top: 1px solid var(--rule); align-items: start; }
.news-list-item:first-child { border-top: 0; }
.news-list-cover { aspect-ratio: 4/3; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, #e6e1d2, #e4ded0); }
.news-list-cover img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.news-list-item:hover .news-list-cover img { transform: scale(1.05); }
.news-list-item h3 { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; text-transform: none;
  color: #27241b; font-size: clamp(19px, 2vw, 26px); line-height: 1.18; margin: 0 0 8px;
  letter-spacing: -.012em; transition: color .16s ease; }
.news-list-item:hover h3 { color: #314277; }
.news-list-item p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.news-list-item .muted { font-family: "IBM Plex Sans", sans-serif; font-size: 12px;
  display: block; margin-top: 10px; color: var(--ink-3); }
.tag { display: inline-block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px; border: 1px solid var(--rule-2); color: #314277; }
.tag-muted { color: var(--ink-3); }
.mb-8 { margin-bottom: 8px; }

/* ---- ATTP doc-row ---- */
.doc-cat { margin: 40px 0 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; }
.doc-cat:first-child { margin-top: 0; }
.doc-cat small { color: var(--ink-3); font-family: "IBM Plex Sans", sans-serif;
  font-size: 10.5px; font-weight: 500; }
.doc-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: 10px; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.doc-row:hover { background: var(--card); border-color: var(--rule); transform: translateX(3px); }
.doc-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(166,194,255,0.12);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #314277; }
.doc-title { min-width: 0; flex: 1; }
.doc-title strong { display: block; font-size: 14.5px; color: #2f2c23; font-weight: 500; }
.doc-meta { display: block; margin-top: 3px; color: var(--ink-3);
  font-family: "IBM Plex Sans", sans-serif; font-size: 10.5px; }
.doc-open { color: #314277; font-family: "IBM Plex Sans", sans-serif; font-size: 11px;
  flex: 0 0 auto; letter-spacing: .08em; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-3);
  border: 1px dashed var(--rule-2); border-radius: 10px; }

@media (max-width: 700px) {
  .news-list-item { grid-template-columns: 1fr; gap: 14px; }
  .news-list-cover { aspect-ratio: 16/9; }
  .doc-row { align-items: flex-start; padding: 13px 8px; }
  .doc-open { display: none; }
}

/* ===================== calendar 2026 ===================== */
.calbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }

.ystrip { display: flex; align-items: flex-end; gap: 4px; }
.ystrip__m { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 7px 8px; border-radius: 8px; transition: background .16s ease; }
.ystrip__m:hover { background: var(--card); }
.ystrip__bar { width: 22px; border-radius: 3px; display: block;
  background: linear-gradient(180deg, #b4c4ea, #c7d4f4); }
.ystrip__m:hover .ystrip__bar { background: linear-gradient(180deg, #b8c4e2, #b2c3f0); }
.ystrip__lbl { font-family: "IBM Plex Sans", sans-serif; font-size: 9.5px; letter-spacing: .1em;
  color: var(--ink-3); }
.ystrip__n { font-family: "IBM Plex Sans", sans-serif; font-size: 11px; color: #2a3860; font-weight: 600; }

.calfilter { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--rule);
  border-radius: 999px; padding: 3px; }
.calfilter button { border: 0; background: none; cursor: pointer; color: var(--ink-3);
  font: 500 12.5px/1 "IBM Plex Sans", sans-serif; padding: 9px 15px; border-radius: 999px;
  transition: background .16s ease, color .16s ease; }
.calfilter button[aria-pressed="true"] { background: var(--blue); color: #27241b; }
.calfilter button:hover:not([aria-pressed="true"]) { color: #2f2c23; }

.camonth { padding: 30px 0 8px; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--barh) + 32px); }
.camonth:last-of-type { border-bottom: 0; }
.camonth--run { background: rgba(235,229,215,0.5); border: 1px solid var(--rule);
  border-radius: 12px; padding: 22px 22px 10px; margin: 26px 0 8px; }
.camonth__h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.camonth__h h3 { font-family: var(--display); text-transform: uppercase;
  color: #27241b; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: .02em; margin: 0; }
.camonth__n { font-family: "IBM Plex Sans", sans-serif; font-size: 11px; color: var(--ink-3); }

.daygrid { display: grid; grid-template-columns: repeat(31, 1fr); gap: 3px; margin-bottom: 18px; }
.dg__d { font-family: "IBM Plex Sans", sans-serif; font-size: 9.5px; text-align: center;
  padding: 5px 0; border-radius: 4px; color: var(--ink-3);
  background: rgba(201,196,182,0.03); }
.dg__d.is-on { background: rgba(166,194,255,0.9); color: #48526c; font-weight: 700; }

.evlist { display: grid; gap: 8px; }
.ev { display: grid; grid-template-columns: 74px 1fr auto; gap: 16px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px;
  background: rgba(232,226,212,0.55); transition: border-color .16s ease, transform .16s ease; }
.ev:hover { border-color: var(--rule-2); transform: translateX(3px); }
.ev--i { background: rgba(232,226,212,0.28); }
.ev__date { text-align: center; }
.ev__date b { display: block; font-family: "IBM Plex Sans", sans-serif;
  font-size: 20px; color: #27241b; line-height: 1; letter-spacing: .02em; }
.ev__date i { display: block; font-style: normal; font-family: "IBM Plex Sans", sans-serif;
  font-size: 9.5px; letter-spacing: .12em; color: #314277; margin-top: 3px; }
.ev__body { min-width: 0; }
.ev__body h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: #2d2a21; line-height: 1.32; }
.ev__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ev__where, .ev__ref { font-family: "IBM Plex Sans", sans-serif; font-size: 10.5px; color: var(--ink-3); }
.ev__note { display: block; margin-top: 5px; font-size: 10.5px; color: var(--gold); }
.ev__tag { font-family: "IBM Plex Sans", sans-serif; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--rule-2); color: #343f5d; white-space: nowrap; }
.ev__tag--i { border-color: rgba(169,101,93,0.85); color: #62302b; }
.cal__empty { color: var(--ink-3); font-size: 13.5px; padding: 6px 2px 14px; margin: 0; }
/* Running now / still to come / already over. A year of dates all rendered the
   same way gives the reader nothing to aim at; the badge and the dimming do. */
.ev--live { border-color: rgba(85,136,103,0.935); background: rgba(146,215,170,0.1); }
.ev--live .ev__date b { color: #005629; }
.ev--live .ev__date i { color: #006034; }
.ev__state { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 5px;
  font-family: "IBM Plex Sans", sans-serif; font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; border-radius: 999px;
  padding: 2px 8px; background: rgba(146,215,170,0.18); color: #005629; }
.ev__state[hidden] { display: none; }
/* finished events stay legible but stop competing for attention */
.ev--past { opacity: .55; }
.ev--past:hover { opacity: 1; }

/* Official result sheets — a card index of the competition's categories.
   These are the federation's own paper: handwritten group tables and printed
   draws. Two things were wrong with showing them as a photo grid. They were
   sized like thumbnails, so a dense A4 page became an unreadable smudge; and
   they carried no labels, so fourteen of them said nothing about which category
   was which. The name the federation gave each scan is the label. */
.sheets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 26px 20px;
  margin: 18px 0 0;
}
.sheet { margin: 0; }

/* paper on a dark desk: the preview keeps the top of the page, where the
   heading and the first rows are, and the label carries the identity */
.sheet__img {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: 4px; background: #c9c4b6;
  box-shadow: 0 1px 0 rgba(49,38,32,0.032), 0 10px 22px -14px rgba(49,38,32,0.272);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sheet__img img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: top center;
}
.sheet__img::after {                       /* the page edge, not a UI border */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(49,38,32,0.0448);
}
.sheet__img:hover { transform: translateY(-3px); box-shadow: 0 2px 0 rgba(49,38,32,0.0448), 0 18px 30px -16px rgba(49,38,32,0.288); }
.sheet__img:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.sheet figcaption {
  margin: 9px 1px 0; font-family: "IBM Plex Sans", sans-serif;
  font-size: 12.5px; line-height: 1.35; color: var(--ink-2);
  letter-spacing: .005em;
}

.sheet__cap { margin: 22px 0 0; font-family: "IBM Plex Sans", sans-serif;
  font-size: 12.5px; color: var(--ink-3); }
.sheet__cap a { color: var(--blue); border-bottom: 1px solid var(--rule-2); }
.sheet__cap a:hover { border-bottom-color: var(--blue); }

@media (prefers-reduced-motion: reduce) { .sheet__img { transition: none; } }
@media (max-width: 620px) {
  .sheets { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 18px 12px; }
  .sheet figcaption { font-size: 11.5px; }
}

.ev.is-hidden { display: none; }

@media (max-width: 820px) {
  .daygrid { grid-template-columns: repeat(16, 1fr); }
  .ev { grid-template-columns: 60px 1fr; }
  .ev__tag { grid-column: 2; justify-self: start; margin-top: 6px; }
  .ystrip__bar { width: 14px; }
}

/* calendar column is wider than the document column */
.grid-2--cal { grid-template-columns: 1.55fr 1fr; gap: 40px; }
.calcol { min-width: 0; }
.docol { min-width: 0; }

/* the calendar inside a column: tighter than full-width */
.calcol .calbar { flex-direction: column; align-items: stretch; gap: 14px; }
.calcol .ystrip { justify-content: space-between; }
.calcol .ystrip__m { padding: 4px 3px 6px; }
.calcol .ystrip__bar { width: 100%; min-width: 12px; }
.calcol .calfilter { align-self: flex-start; }
.calcol .ev { grid-template-columns: 62px 1fr; gap: 12px; padding: 11px 12px; }
.calcol .ev__tag { grid-column: 2; justify-self: start; margin-top: 6px; }
.calcol .ev__date b { font-size: 17px; }
.calcol .daygrid { gap: 2px; }
.calcol .dg__d { font-size: 8.5px; padding: 4px 0; }

@media (max-width: 1100px) {
  .grid-2--cal { grid-template-columns: 1fr; gap: 34px; }
  .calcol .ev { grid-template-columns: 74px 1fr auto; }
  .calcol .ev__tag { grid-column: auto; margin-top: 0; }
}

/* month selector: active month highlighted */
.ystrip__m { border: 0; background: none; cursor: pointer; font: inherit; }
.ystrip__m[aria-pressed="true"] { background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); }
.ystrip__m[aria-pressed="true"] .ystrip__bar { background: linear-gradient(180deg, #b9c4e0, #b2c3f0); }
.ystrip__m[aria-pressed="true"] .ystrip__lbl { color: #2f2c23; }
.camonth--panel[hidden] { display: none; }
.camonth--panel { border-bottom: 0; padding-top: 22px; }

/* selector sticks under the masthead while you read the month */
.calcol .calbar { position: sticky; top: var(--barh); z-index: 6;
  background: linear-gradient(180deg, var(--bg) 72%, rgba(240,234,220,0.0));
  padding-top: 10px; padding-bottom: 14px; margin-bottom: 0; border-bottom: 0; }

/* prev / next in the month header */
.camonth__h { align-items: center; }
.mnav { border: 1px solid var(--rule); background: var(--card); color: #2d3958;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; flex: 0 0 auto;
  font: 400 17px/1 "IBM Plex Sans", sans-serif; display: grid; place-items: center;
  transition: background .16s ease, color .16s ease, border-color .16s ease; }
.mnav:hover { background: var(--blue); color: #27241b; border-color: var(--blue); }
.camonth--run .camonth__h { margin-top: 6px; }
.camonth--panel { padding-top: 6px; }
.camonth--run { margin-top: 26px; }

/* document list that shows N rows then scrolls */
.doclist--scroll.is-scrollable { overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #6a79a0 transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 46px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 46px), transparent 100%); }
/* at the bottom of the list there is nothing more to promise */
.doclist--scroll.is-scrollable.is-end { -webkit-mask-image: none; mask-image: none; }
.doclist--scroll.is-scrollable:focus-visible { outline: 2px solid var(--blue);
  outline-offset: 3px; border-radius: 4px; }
.doclist--scroll::-webkit-scrollbar { width: 8px; }
.doclist--scroll::-webkit-scrollbar-thumb { background: #c7d4f4; border-radius: 99px;
  border: 2px solid var(--bg); }
.doclist--scroll::-webkit-scrollbar-track { background: transparent; }

/* leadership: the last card spans the row so there is no empty cell,
   and its members lay out in columns instead of one long list */
.roles .role:last-child { grid-column: 1 / -1; }
.roles .role:last-child .people {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px 20px;
}

/* ===================== galerie ===================== */
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }
.album { position: relative; border-radius: 12px; overflow: hidden; display: block;
  border: 1px solid var(--rule); background: var(--card);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.album:hover { transform: translateY(-3px); border-color: var(--rule-2);
  box-shadow: 0 20px 40px -26px rgba(49,38,32,0.192); }
.album__img { display: block; aspect-ratio: 4/3; overflow: hidden; background: #ede7d9; }
.album__img img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.album:hover .album__img img { transform: scale(1.05); }
/* Album titles sit on the photo itself, and the covers run from a dark hall to
   a white-lit podium — a single-stop scrim left the first line unreadable on
   the bright ones. Ramp it earlier and carry a shadow under the text. */
.album__c { position: absolute; inset: auto 0 0 0; padding: 52px 14px 12px; color: #27241b;
  background: linear-gradient(to top, rgba(241,235,221,0.97) 0%, rgba(241,235,221,0.9) 30%,
    rgba(241,235,221,0.66) 60%, rgba(241,235,221,0.22) 84%, rgba(241,235,221,0.0) 100%);
  text-shadow: 0 1px 3px rgba(49,38,32,0.192); }
.album__c b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.28; }
.album__c i { font-style: normal; font-family: "IBM Plex Sans", sans-serif; font-size: 10px;
  color: #2d3958; }

.albumhead { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.albumhead .art__title { margin: 0 0 6px; font-size: clamp(24px, 3.4vw, 44px); }
.albumhead .art__date { margin: 0; }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.shot { display: block; aspect-ratio: 1; border-radius: 9px; overflow: hidden;
  background: #ede7d9; border: 1px solid transparent; transition: border-color .16s ease; }
.shot:hover { border-color: var(--blue); }
.shot img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease; }
.shot:hover img { transform: scale(1.06); }

.albumnav { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px;
  padding-top: 20px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.albumnav a { font-size: 13.5px; color: var(--ink-2); }
.albumnav a:hover { color: var(--blue); }

@media (max-width: 640px) {
  .albums { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .shots { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 7px; }
}

/* ===================== lightbox ===================== */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid;
  grid-template-columns: 64px 1fr 64px; align-items: center;
  background: rgba(243,237,223,0.93); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[hidden] { display: none; }
.lb__stage { grid-column: 2; margin: 0; display: grid; place-items: center; gap: 12px;
  max-height: 100vh; padding: 26px 0; }
.lb__stage img { max-width: 100%; max-height: calc(100vh - 96px); object-fit: contain;
  border-radius: 6px; box-shadow: 0 30px 80px rgba(49,38,32,0.192); }
.lb__count { font-family: "IBM Plex Sans", sans-serif; font-size: 12px; letter-spacing: .12em;
  color: #2d3958; }
.lb__nav { width: 46px; height: 46px; border-radius: 50%; justify-self: center; cursor: pointer;
  background: rgba(201,196,182,0.07); border: 1px solid rgba(112,122,146,0.476); color: #2f2b23;
  font: 400 26px/1 "IBM Plex Sans", sans-serif; display: grid; place-items: center;
  transition: background .16s ease, border-color .16s ease; }
.lb__nav:hover { background: var(--blue); border-color: var(--blue); color: #27241b; }
.lb__prev { grid-column: 1; } .lb__next { grid-column: 3; }
.lb__close { position: absolute; top: 16px; right: 18px; width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer; background: rgba(201,196,182,0.07);
  border: 1px solid rgba(112,122,146,0.476); color: #2f2b23; font-size: 24px; line-height: 1;
  display: grid; place-items: center; }
.lb__close:hover { background: var(--red); border-color: var(--red); color: #27241b; }

@media (max-width: 700px) {
  .lightbox { grid-template-columns: 1fr; }
  .lb__stage { grid-column: 1; padding: 60px 10px 76px; }
  .lb__nav { position: absolute; bottom: 16px; }
  .lb__prev { left: 26%; } .lb__next { right: 26%; }
}

/* year separator on the news archive */
.yearhead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin: 46px 0 10px; padding-bottom: 10px; border-bottom: 2px solid var(--rule-2);
  scroll-margin-top: calc(var(--barh) + 32px); }
.yearhead:first-child { margin-top: 0; }
.yearhead span { font-family: "IBM Plex Sans", sans-serif; font-size: clamp(30px,4vw,46px);
  color: #27241b; letter-spacing: .02em; line-height: 1; }
.yearhead small { font-family: "IBM Plex Sans", sans-serif; font-size: 11px; color: var(--ink-3); }

/* ===================== rezultate ===================== */
.rescards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rescard { display: block; padding: 18px 20px 20px; border: 1px solid var(--rule);
  border-radius: 12px; background: var(--card);
  transition: transform .2s ease, border-color .2s ease; }
.rescard:hover { transform: translateY(-3px); border-color: var(--blue); }
.rescard__d { font-family: "IBM Plex Sans", sans-serif; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #314277; }
.rescard h2 { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; text-transform: none;
  color: #27241b; font-size: 21px; line-height: 1.2; margin: 8px 0 6px; letter-spacing: -.01em; }
.rescard__m { font-size: 12.5px; color: var(--ink-3); }

.resgroup { margin-top: 34px; }
.resgroup h2 { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; text-transform: none;
  color: #27241b; font-size: clamp(22px,2.6vw,30px); margin: 0 0 14px; letter-spacing: -.012em; }

/* podium */
.pods { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
  margin-bottom: 18px; }
.pod { padding: 14px 16px; border-radius: 10px; background: var(--card);
  border: 1px solid var(--rule); border-left-width: 3px; display: grid; gap: 3px; }
.pod--gold   { border-left-color: #93744a; }
.pod--silver { border-left-color: #7f7a6d; }
.pod--bronze { border-left-color: #8d7657; }
.pod__p { font-family: "IBM Plex Sans", sans-serif; font-size: 15px; color: #2d3958;
  letter-spacing: .08em; }
.pod__n { font-size: 15px; font-weight: 600; color: #2b281f; line-height: 1.25; }
.pod__m { font-family: "IBM Plex Sans", sans-serif; font-size: 10.5px; color: var(--ink-3); }

/* results table */
.rt__wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--card); }
.rt { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.rt caption { text-align: left; padding: 13px 16px; font-family: "IBM Plex Sans", sans-serif;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule); }
.rt th { font-family: "IBM Plex Sans", sans-serif; font-size: 10.5px; font-weight: 500;
  letter-spacing: .08em; color: var(--ink-3); text-align: center; padding: 10px 8px;
  border-bottom: 1px solid var(--rule); white-space: nowrap; }
.rt td { padding: 11px 8px; text-align: center; color: #322e25;
  border-bottom: 1px solid rgba(106,121,161,0.17); font-variant-numeric: tabular-nums; }
.rt tbody tr:last-child td { border-bottom: 0; }
.rt tbody tr:hover td { background: rgba(166,194,255,0.07); }
.rt__pos { color: var(--ink-3); width: 40px; }
.rt__team { text-align: left !important; font-weight: 600; color: #27241b; white-space: nowrap; }
.rt__pts { font-weight: 700; color: #27241b; }
.rt__pts small { display: block; font-size: 9.5px; font-weight: 400; color: var(--ink-3);
  font-family: "IBM Plex Sans", sans-serif; }
.rt__place { font-family: "IBM Plex Sans", sans-serif; font-size: 16px; }
.rt__place.gold { color: #542e00; } .rt__place.silver { color: #363229; }
.rt__place.bronze { color: #5b3f12; }
.rt td.is-self { background: repeating-linear-gradient(45deg, rgba(173,195,250,0.14) 0 4px,
  transparent 4px 8px); color: transparent; }

/* knockout draw */
.ko { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ko__round { background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 15px 16px 16px; }
.ko__round h2, .ko__round h3 { font-family: "IBM Plex Sans", sans-serif; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; font-weight: 500; }
.ko__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ko__m { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
  font-size: 13px; padding: 8px 0; border-bottom: 1px solid rgba(106,121,161,0.17); }
.ko__m:last-child { border-bottom: 0; }
.ko__m span { color: var(--ink-2); }
.ko__m span:last-child { text-align: right; }
.ko__m span.is-win { color: #27241b; font-weight: 600; }
.ko__m b { font-family: "IBM Plex Sans", sans-serif; font-size: 12px; color: #314277;
  font-variant-numeric: tabular-nums; }

/* ===================== placements ===================== */
.places { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px; margin: 22px 0; }
.place { background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 14px 16px 12px; }
.place h2, .place h3, .place h4 { margin: 0 0 10px; font-family: "IBM Plex Sans", sans-serif;
  text-transform: uppercase; font-size: 15px; letter-spacing: .06em; color: #314277;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.place ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.place li { display: grid; grid-template-columns: 22px 62px 1fr; gap: 10px;
  align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(106,121,161,0.153); }
.place li:last-child { border-bottom: 0; }
.place li i { font-style: normal; font-size: 14px; line-height: 1; }
.place li b { font-family: "IBM Plex Sans", sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.place li span { font-size: 14px; color: #2d2a21; line-height: 1.35; }

/* consecutive placement blocks in one article sit together as one grid */
.art__body .places + .places { margin-top: -6px; }

@media (max-width: 560px) {
  .place li { grid-template-columns: 20px 56px 1fr; gap: 8px; }
  .place li span { font-size: 13.5px; }
}

/* a highlighted line that follows a results list (congratulations, titles won) */
.laurel { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  margin: 14px 0; padding: 14px 18px; border-radius: 12px;
  background: rgba(166,194,255,0.08); border: 1px solid var(--rule);
  border-left: 3px solid var(--blue); font-size: 15.5px; color: var(--ink-2); max-width: none; }
.laurel i { font-style: normal; font-size: 19px; line-height: 1.2; }
.laurel span { line-height: 1.55; }
.laurel--win { background: rgba(229,189,133,0.1); border-left-color: var(--gold); color: #2f2c23; }
.laurel--win span { color: #2e2a21; }

/* a section label above a group of result tables (Bărbați / Femei / …) */
.places__section { margin: 26px 0 10px; padding: 9px 16px; border-radius: 10px;
  display: inline-block; font-family: "IBM Plex Sans", sans-serif;
  text-transform: uppercase; font-size: 17px; letter-spacing: .07em; color: #27241b;
  background: linear-gradient(135deg, rgba(166,194,255,0.3), rgba(166,194,255,0.12));
  border: 1px solid var(--rule-2); }
.art__body .places__section:first-child { margin-top: 6px; }

/* ===================== photo strip (contact sheet) =====================
   The photos on a report are the full take from one afternoon in a sports
   hall — two to thirty-odd frames, unedited. A contact strip is the honest
   form: fixed height, so the band costs the page the same whether there are
   three frames or thirty, and nothing is cropped — every frame keeps its own
   width at a common height, portrait beside landscape. */
.strip { margin: 40px 0 4px; width: max-content; max-width: 100%; }

.strip__h { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.strip__h h2 { margin: 0; font-family: "IBM Plex Sans", sans-serif;
  text-transform: uppercase; letter-spacing: .04em; font-size: 21px;
  font-weight: 600; color: var(--ink); line-height: 1; }
.strip__n { font-family: "IBM Plex Sans", sans-serif; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap; }

/* the well — darker than the page, so the strip sits into it rather than on it */
.strip__reel { display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  background: var(--night); border: 1px solid var(--rule); border-top: 0;
  border-radius: 0 0 10px 10px; width: 100%; }
.strip__reel::-webkit-scrollbar { height: 10px; }
.strip__reel::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 0;
  border: 3px solid var(--night); }
.strip__reel::-webkit-scrollbar-thumb:hover { background: var(--blue); }
.strip__reel::-webkit-scrollbar-track { background: rgba(173,195,250,0.1); }

/* one strip, not a row of cards: square inner corners, hairline splices */
.frame { flex: 0 0 auto; scroll-snap-align: start; display: grid;
  grid-template-rows: 1fr auto; border-right: 1px solid var(--rule);
  text-decoration: none; position: relative; }
.frame:last-child { border-right: 0; }
.strip .frame img { display: block; height: 160px; width: auto; max-width: none;
  filter: brightness(.9); transition: filter .18s ease; }
.frame:hover img, .frame:focus-visible img { filter: none; }
.frame:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; z-index: 1; }

/* the rail: frame numbers are shooting order — information, not decoration */
.frame__n { font-family: "IBM Plex Sans", sans-serif; font-size: 10px;
  letter-spacing: .14em; color: var(--ink-3); text-align: center;
  padding: 7px 10px 8px; border-top: 1px solid var(--rule);
  transition: color .14s ease; }
.frame:hover .frame__n, .frame:focus-visible .frame__n { color: var(--blue); }

@media (hover: none) { .strip .frame img { filter: none; } }

@media (max-width: 640px) {
  .strip { margin-top: 30px; }
  .strip__h h2 { font-size: 18px; }
  .strip .frame img { height: 124px; }
  .frame__n { font-size: 9px; padding: 5px 6px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .strip__reel { scroll-behavior: auto; }
  .strip .frame img, .frame__n { transition: none; }
}

/* documents filed alongside a post's photos — same band as the contact strip,
   because they answer the same question: what else came with this report */
.artdocs { margin-top: 34px; width: 100%; }
.artdocs__list { border: 1px solid var(--rule); border-top: 0;
  border-radius: 0 0 10px 10px; overflow: hidden; background: var(--night); }
.artdocs__list .li--doc { border-bottom: 1px solid var(--rule); }
.artdocs__list .li--doc:last-child { border-bottom: 0; }

/* ---- contact page: the address block spans, so no empty cell is left over */
/* Office, president and address sit as three equal cards; below them the
   address gets an actual map, because it is the one contact detail people act
   on by travelling to it. */
.ccards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ccards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

/* spans both columns of .grid-2, below them */
.cmap { margin: 40px 0 0; border: 1px solid var(--rule); border-radius: 12px;
  overflow: hidden; background: var(--card); }
.cmap iframe { display: block; width: 100%; height: 420px; border: 0;
  filter: saturate(.9) contrast(1.02); }
.cmap__cap { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 11px 16px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-3); }
.cmap__cap a { color: var(--blue); border-bottom: 1px solid var(--rule-2);
  padding-bottom: 1px; white-space: nowrap; }
.cmap__cap a:hover { border-bottom-color: var(--blue); }
@media (max-width: 640px) { .cmap iframe { height: 240px; } }
/* bank details are values to copy, not files to open */
.kvrow .mono-val { font-family: "IBM Plex Sans", sans-serif; letter-spacing: .04em;
  -webkit-user-select: all; user-select: all; }

/* ---- outbound links say so, like the document rows do */
.resource-links a { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; }
.resource-links .ext { color: var(--ink-3); font-size: 12px; flex: none; }
.resource-links a:hover .ext { color: var(--blue); }

/* ---- 404 */
.notfound { padding: clamp(50px, 9vw, 110px) 0 clamp(60px, 10vw, 130px); max-width: 62ch; }
.notfound h1 { font-family: var(--display);
  text-transform: uppercase; letter-spacing: .005em;
  font-size: clamp(32px, 5.4vw, 60px); margin: 12px 0 18px; }
.notfound .lede { color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.notfound__go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* ---- print: coaches and referees print the regulations and the result sheets */
@media print {
  .tri, .bar, .skip, .phero__art, .mainnav, .foot, .search, .lang,
  .art__side, .rail, .strip, .lightbox, .bt { display: none !important; }
  html, body { background: #c9c4b6 !important; color: #6d695f !important; }
  .wrap, .page, .art { width: auto !important; max-width: none !important;
    display: block !important; margin: 0 !important; padding: 0 !important; }
  a { color: #6d695f !important; text-decoration: none !important; border: 0 !important; }
  /* a printed link is useless without its destination */
  .art__body a[href^="http"]::after,
  .doc-row[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt;
    word-break: break-all; }
  h1, h2, h3 { color: #6d695f !important; page-break-after: avoid; }
  .places, .doc-row, .li, tr { page-break-inside: avoid; }
  .phero { min-height: 0 !important; padding: 0 0 12pt !important; }
  .phero__in, .phero__copy { position: static !important; padding: 0 !important; }
  img { max-width: 100% !important; }
}

/* a report with a photo strip says so in the listing, next to its date */
.news-list-shots { position: relative; margin-left: 16px; padding-left: 17px; }
.news-list-shots::before { content: ""; position: absolute; left: 0; top: 50%;
  width: 10px; height: 8px; margin-top: -4px; border: 1.5px solid currentColor;
  border-radius: 2px; opacity: .8; }

/* the strip shows about four frames; its album holds the whole set */
.strip__all { font-family: "IBM Plex Sans", sans-serif; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
  white-space: nowrap; border-bottom: 1px solid var(--rule-2); padding-bottom: 1px; }
.strip__all:hover { border-bottom-color: var(--blue); }
.strip__all::after { content: " \2192"; }

/* an album built from a report links back to what was written about it */
.albumsrc { display: inline-block; margin-top: 10px; font-size: 13.5px;
  color: var(--blue); border-bottom: 1px solid var(--rule-2); padding-bottom: 1px; }
.albumsrc:hover { border-bottom-color: var(--blue); }



/* ===================== clasament =====================
   Five hundred–odd players, so the table is one scannable column set with a
   filter over it rather than a paged list — a parent looking for one name
   should type it, not click through pages. */
.rbar { display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.rtabs { display: flex; gap: 6px; background: var(--night); padding: 4px;
  border: 1px solid var(--rule); border-radius: 999px; }
.rtab { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 0; background: none; border-radius: 999px; padding: 9px 16px;
  font: 600 13.5px/1 "IBM Plex Sans", sans-serif; color: var(--ink-2); }
.rtab:hover { color: #27241b; }
.rtab.is-on { background: var(--blue); color: #27241b; }
.rtab__n { font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }

.rsearch { display: flex; align-items: center; gap: 9px; height: 42px;
  padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 10px;
  background: var(--card); color: var(--ink-3); width: min(320px, 100%); }
.rsearch:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(49,38,32,0.0448); }
.rsearch input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
  color: var(--ink); font: 400 14.5px/1 "IBM Plex Sans", sans-serif; }
.rsearch input::placeholder { color: var(--ink-3); }

/* Age band and town. They sit with the search box as one control group, so the
   tabs stay pinned left and the filters flow together on the right. */
.rbar { justify-content: flex-start; }
.rtabs { margin-right: auto; }

.rfilt { position: relative; display: inline-flex; }
.rfilt select {
  appearance: none; height: 42px; padding: 0 34px 0 14px; max-width: 210px;
  border: 1px solid var(--rule-2); border-radius: 10px; background: var(--card);
  color: var(--ink); font: 500 13.5px/1 "IBM Plex Sans", sans-serif;
  cursor: pointer; text-overflow: ellipsis;
}
.rfilt select:hover { border-color: var(--blue); }
.rfilt select:focus-visible { outline: 0; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(49,38,32,0.0448); }
/* a chevron, drawn rather than fetched */
.rfilt::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px;
  margin-top: -5px; border-right: 1.6px solid var(--ink-3);
  border-bottom: 1.6px solid var(--ink-3); transform: rotate(45deg);
  pointer-events: none;
}
/* the browser paints the open list in its own colours, not the page's */
.rfilt option { background: var(--card); color: var(--ink); }

.rfilt__n { font: 500 12.5px/1 "IBM Plex Sans", sans-serif; color: var(--ink-3);
  font-variant-numeric: tabular-nums; min-width: 0; }

@media (max-width: 700px) {
  .rbar { gap: 10px; }
  .rtabs { margin-right: 0; }
  .rsearch, .rfilt, .rfilt select { width: 100%; max-width: none; }
  .rfilt { flex: 1 1 46%; }
}

.rpanel { display: none; }
.rpanel.is-on { display: block; }
.rk { width: 100%; border-collapse: collapse; background: var(--night);
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.rk th { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rule-2);
  font: 600 10.5px/1 "IBM Plex Sans", sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.rk td { padding: 11px 16px; border-bottom: 1px solid var(--rule);
  font-size: 14.5px; color: var(--ink-2); }
.rk tbody tr:last-child td { border-bottom: 0; }
.rk tbody tr:hover td { background: rgba(166,194,255,0.08); }
.rk__p { width: 68px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.rk__n { color: var(--ink); font-weight: 500; }
.rk__v { width: 96px; font-variant-numeric: tabular-nums; color: #2d3958; font-weight: 600; }
.rk__c { width: 150px; }
.rk__y { width: 76px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
/* the top three carry the same medal colours the result pages use */
.rk tbody tr:nth-child(1) .rk__p { color: var(--gold); font-weight: 700; }
.rk tbody tr:nth-child(2) .rk__p { color: #38342b; font-weight: 700; }
.rk tbody tr:nth-child(3) .rk__p { color: #634105; font-weight: 700; }

.rk__none { margin: 18px 0 0; color: var(--ink-2); font-size: 15px; }
.rk__none b { color: var(--ink); display: block; margin-bottom: 4px; }
.rfoot { margin: 16px 0 0; font-size: 13px; color: var(--ink-3); }
.rfoot a { color: var(--blue); border-bottom: 1px solid var(--rule-2); }
.rfoot a:hover { border-bottom-color: var(--blue); }

@media (max-width: 720px) {
  .rbar { gap: 12px; }
  .rsearch { width: 100%; }
  .rk__c, .rk__y { display: none; }
  .rk th, .rk td { padding: 10px 12px; }
}

/* a player's row opens the matches behind their rating */
.rk__row { cursor: pointer; }
.rk__row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.rk__row.is-open td { background: rgba(166,194,255,0.12); }
.rk__row.is-open .rk__n::after { content: " ▾"; color: var(--blue); font-size: 11px; }
.rh td { padding: 0; border-bottom: 1px solid var(--rule); background: var(--card); }
.rh__in { padding: 16px 16px 18px; }
.rh__in h3 { margin: 0 0 10px; font: 600 10.5px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rh__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 9px;
  overflow: hidden; }
.rh__m { display: grid; grid-template-columns: 104px minmax(0,1fr) 132px 68px;
  gap: 12px; align-items: baseline; padding: 9px 13px; background: var(--night);
  font-size: 13.5px; }
.rh__d { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rh__e { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh__r { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rh__delta { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.rh__delta--up { color: #00542a; }
.rh__delta--down { color: var(--red-text); }
.rh__delta--flat { color: var(--ink-3); }
.rh__none { margin: 0; color: var(--ink-3); font-size: 13.5px; }
@media (max-width: 720px) {
  .rh__m { grid-template-columns: 1fr auto; gap: 3px 10px; }
  .rh__d { grid-column: 1; } .rh__delta { grid-column: 2; grid-row: 1; }
  .rh__e { grid-column: 1 / -1; } .rh__r { grid-column: 1 / -1; }
}

/* Album covers are shown in landscape frames with object-fit: cover. A portrait
   source then gets cropped to a band across its middle, which on a photograph of
   people is their chests — the faces sit at roughly a third of the way down, so
   that is where the crop is taken from. Landscape covers are untouched. */
.cov.is-tall { object-position: 50% 30%; }

/* The two legal pages. Prose, so it gets a measure — the children are capped
   rather than the section, which keeps the column aligned with the page gutter
   instead of centring a narrow block against a left-aligned hero. */
.legal > * { max-width: 68ch; }
.legal h2 { margin: 36px 0 10px; }
.legal h2:first-of-type { margin-top: 26px; }
.legal p { margin: 0 0 13px; line-height: 1.62; }
.legal__stamp {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: 0;
}

/* 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; }


/* ---- mobile refinements (see the matching block in theme.css) ---- */
@media (max-width: 700px) {
  /* breadcrumb links measured 17px tall */
  .crumb a, .crumb b, .crumb span,
  .breadcrumb a, .breadcrumb b, .breadcrumb span,
  .strip__all, .albumnav a, .rfoot a, .albumsrc, .doc-open, .resource-links a,
  .ccard a, .cmap__cap a, .art__back {
    display: inline-flex; align-items: center; min-height: 26px;
  }

  /* the search bar is already 42px, but the input inside it was only 21px,
     so half the bar did not respond to a tap */
  .rsearch input { align-self: stretch; height: 100%; }

  /* twelve months across 320px left 24px per button with 4px between them.
     Give each month a comfortable width and let the strip scroll rather
     than squeezing the year into the viewport. */
  /* min-width:0 is what actually lets a flex item shrink below its content
     and hand the overflow to its own scroller — without it the strip just
     grows to 570px and an ancestor clips the last four months away. */
  .ystrip { overflow-x: auto; scrollbar-width: none; gap: 6px;
    min-width: 0; max-width: 100%; scroll-snap-type: x proximity; }
  .ystrip::-webkit-scrollbar { display: none; }
  .ystrip__m, .calcol .ystrip__m { flex: 0 0 auto; min-width: 42px; padding: 6px 7px 8px;
    scroll-snap-align: start; }
}


/* ---- shared corrections ---- */
/* Applies to every skin. Corrections that belong to the light-ground
   inversion generally, not to any one theme's identity. */

/* Breadcrumb separators were a faint light-blue on navy; inverted they land
   too pale to see against paper. */
.crumb span, .breadcrumb span { color: currentColor; opacity: .42; }

/* Focus has to stay obvious on a light ground. */
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }


/* ---- signature layer ---- */


/* ============================================================
   ȚESUT — Moldovan woven textile. Cream ground, indigo, the red
   of the covor, marigold. A national federation that looks like
   its own country without falling back on a flag stripe.

   Signature: the woven band. Two crossing 45° repeats make a
   diamond lattice; run at 9px it reads as the border of a woven
   runner. It caps every card, and the tricolour strip at the top
   of the page becomes three woven segments instead of three
   flat bars — the flag, expressed as cloth.
   ============================================================ */

:root {
  color-scheme: light;
  --display: "Alumni Sans", "Manrope", sans-serif;
  --w-indigo: #354fa8;
  --w-red: #ab2f27;
  --w-gold: #d99a26;
  --w-ink: #2b2720;
  --covor:
    repeating-linear-gradient(45deg,  var(--w-red) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(-45deg, var(--w-red) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, transparent 0 15px, var(--w-gold) 15px 17px, transparent 17px 32px);
}

body { font-family: "Manrope", system-ui, sans-serif; }

h1, h2, h3, .hero h1, .art__title, .phero__copy h1, .mod__h h2, .crest b {
  font-family: var(--display);
  font-weight: 800;          /* Alumni Sans runs light; 800 is its 700 */
  letter-spacing: .002em;
}
.hero h1 { font-size: clamp(52px, 8.2vw, 108px); line-height: .92; letter-spacing: -.005em; }
.mod__h h2, .head h2 { text-transform: uppercase; letter-spacing: .028em; }

/* data reads as data */
.rk__v, .rk__p, .ev__date b, .ev__date i, .stats strong, .rt__pts, .li__d, .doc-meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
}

/* ---- the woven band ---- */
.tri { height: 9px; display: flex; }
.tri i { flex: 1; }
.tri i:nth-child(1) {
  background:
    repeating-linear-gradient(45deg,  var(--w-indigo) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(-45deg, var(--w-indigo) 0 3px, transparent 3px 6px),
    #eee7d8;
}
.tri i:nth-child(2) {
  background:
    repeating-linear-gradient(45deg,  var(--w-gold) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(-45deg, var(--w-gold) 0 3px, transparent 3px 6px),
    #eee7d8;
}
.tri i:nth-child(3) {
  background:
    repeating-linear-gradient(45deg,  var(--w-red) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(-45deg, var(--w-red) 0 3px, transparent 3px 6px),
    #eee7d8;
}

/* every card is capped by the band, in the colour of its own section */
.mod { position: relative; overflow: hidden; border-color: rgba(90, 78, 56, .28); }
.mod::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  opacity: 1; border-radius: 0;
  background:
    repeating-linear-gradient(45deg,  var(--accent, var(--w-indigo)) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(-45deg, var(--accent, var(--w-indigo)) 0 3px, transparent 3px 6px);
}
.mod__h { padding-top: 20px; }

/* section divider: the same lattice, run thin */
.head { position: relative; }
.head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 7px;
  background:
    repeating-linear-gradient(45deg,  var(--w-red) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(-45deg, var(--w-red) 0 3px, transparent 3px 6px);
  opacity: .8;
}

.hero__media::after {
  background:
    linear-gradient(100deg, rgba(240,234,220,.97) 0%, rgba(240,234,220,.70) 34%, rgba(240,234,220,.05) 62%),
    linear-gradient(rgba(255,247,228,.24), rgba(53,79,168,.10));
}
.hero__net { opacity: .10; }
.hero__k::before, .eyebrow::before { background: var(--w-red); }

/* ---- community bands ----
   Leaning into the source: the romb (lozenge) is the central motif of
   Moldovan embroidery on the ie and the covor, and it carries the whole
   marking system here — eyebrows, band edges, chips, monograms. */

/* the eyebrow's dash becomes a romb */
.eyebrow::before {
  width: 9px; height: 9px;
  background: var(--w-red);
  transform: rotate(45deg);
}

/* A band across the top of these three cards lived here, from an earlier
   iteration of this skin. It was drawn on the same ::before the placed motifs
   use, and its `top: 0` outranked the `bottom` they set — so the birds hung off
   the top edge of the card instead of standing on its floor. The motifs carry
   these sections now; the band is gone. */
.gen, .geo, .crew { position: relative; padding-top: 26px; }

/* the plot sits on a woven baseline, and its dots are little rombs */
.gen__axis {
  border-top: 0;
  padding-top: 14px;
  background: var(--covor) top / 100% 9px no-repeat;
}
/* the diagonal clipping of chips and monograms, and the 45° dots, belonged to
   an earlier iteration of this skin — see tesut.pages.extra.css */
.town__v { color: var(--w-red); font-weight: 700; }
.org { border-color: rgba(90, 78, 56, .3); }

/* the wall is bounded by the runner */
.wall::before {
  content: ""; display: block; height: 11px; margin-bottom: 12px;
  background: var(--covor);
}

/* The hero scrim runs left-to-right, which works while the copy sits in the
   left half. On a phone the copy is full width and runs onto the player, so
   the scrim has to come up from the bottom instead. */
@media (max-width: 860px) {
  .hero__media::after {
    background:
      linear-gradient(to top,
        rgba(240,234,220,1) 0%,
        rgba(240,234,220,.94) 40%,
        rgba(240,234,220,.62) 66%,
        rgba(240,234,220,.06) 96%);
  }
}

/* ===================================================================
   RECOVERED WORK — skins/tesut.pages.css
   These rules were lost when this file reverted to an older copy. They were
   read back out of a browser tab that still had the good stylesheet parsed in
   memory, so the values are exact; only the original comments were lost with
   the file, and are rewritten here.
   =================================================================== */

/* ---- palette ------------------------------------------------------
   Sampled from the embroidery rather than invented: across the nine motifs the
   saturated thread is 42% red and 50% ochre at 29% lightness, with essentially
   no blue or green. The page had a bright blue accent and blue-grey rules over
   warm cream, which is what made it read washed out. */
:root {
  color-scheme: light;
  --display: "Alumni Sans", "Manrope", sans-serif;
  --m-blue: #174d8d;
  --m-red: #c91f2b;
  --m-gold: #efa817;
  --m-green: #17622f;
  --m-ink: #25231f;

  --t-ink:     #1B1512;   /* the dominant thread; the footer ground */
  --t-oxblood: #6E1B18;
  --t-crimson: #A62520;
  --t-bronze:  #8A5A18;
  --t-linen:   #E4DAC4;

  /* The brâu is the site's one border. It ran at three weights — 30, 44 and 56 —
     which reads as three different borders rather than one. A belt is a belt. */
  --brau: 30px;

  /* these were blue-grey (#454c5e, rgba(106,121,161,…)) over a warm ground */
  --ink-3: #625646;
  --rule:   rgba(96, 74, 44, .22);
  --rule-2: rgba(96, 74, 44, .42);
}

/* the page-top wash was a near-white glow, the brightest thing on the page and
   right where the eye lands; warm sand instead */
body {
  font-family: Manrope, system-ui, sans-serif;
  background-image:
    radial-gradient(circle at 48% -10%, rgba(224, 203, 161, .58), transparent 58rem),
    repeating-linear-gradient(0deg, rgba(74, 58, 34, .024) 0 1px, transparent 1px 5px);
  background-size: auto, auto;
  background-attachment: scroll, fixed;
}

/* the flag at full strength: it was three pastels and read as decoration */
.tri {
  height: 7px;
  display: block;
  background: linear-gradient(90deg,
    var(--m-blue) 0 33.333%,
    var(--m-gold) 33.333% 66.666%,
    var(--m-red) 66.666% 100%);
}
.tri i { display: none; }

.mod { position: relative; overflow: hidden; border-color: rgba(83, 69, 47, .27); }
.mod::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  width: auto; height: 4px; border-radius: 0; opacity: .72;
  background: linear-gradient(90deg,
    var(--m-blue) 0 33.333%,
    var(--m-gold) 33.333% 66.666%,
    var(--m-red) 66.666% 100%);
}
.mod__h { padding-top: 18px; }

/* ---- the interface tint -------------------------------------------
   Every hover, chip, focus ring and texture used a pale periwinkle
   (166,194,255) — a cool wash over a warm cream page, which greys it wherever
   the two meet. Same alphas, the ochre thread instead. */
.doc-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(196,142,42,.12);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #314277; }
.rt tbody tr:hover td { background: rgba(196,142,42,.07); }
.rk tbody tr:hover td { background: rgba(196,142,42,.08); }
.rk__row.is-open td { background: rgba(196,142,42,.12); }
.laurel { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  margin: 14px 0; padding: 14px 18px; border-radius: 12px; background: rgba(196,142,42,.08);
  border-left: 3px solid var(--blue); font-size: 15.5px; color: var(--ink-2); max-width: none; }
.places__section { margin: 26px 0 10px; padding: 9px 16px; border-radius: 10px;
  display: inline-block; font-family: "IBM Plex Sans", sans-serif; text-transform: uppercase;
  font-size: 17px; letter-spacing: .07em; color: #27241b;
  background: linear-gradient(135deg, rgba(196,142,42,.3), rgba(196,142,42,.12));
  border: 1px solid var(--rule-2); }
.rail a:hover { background: var(--blue); border-color: var(--blue); color: #f4efe3; }
.mnav:hover { background: var(--blue); color: #f4efe3; border-color: var(--blue); }
.rtab.is-on { background: var(--blue); color: #f4efe3; }
.lb__nav { width: 46px; height: 46px; border-radius: 50%; justify-self: center; cursor: pointer;
  background: rgba(201,196,182,.07); border: 1px solid rgba(96,74,44,.475); color: #2f2b23;
  font: 400 26px/1 "IBM Plex Sans", sans-serif; display: grid; place-items: center;
  transition: background .16s, border-color .16s; }
.lb__nav:hover { background: var(--blue); border-color: var(--blue); color: #f4efe3; }
.lb__close { position: absolute; top: 16px; right: 18px; width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer; background: rgba(201,196,182,.07);
  border: 1px solid rgba(96,74,44,.475); color: #2f2b23; font-size: 24px; line-height: 1;
  display: grid; place-items: center; }
.rt td { padding: 11px 8px; text-align: center; color: #322e25;
  border-bottom: 1px solid rgba(96,74,44,.17); font-variant-numeric: tabular-nums; }
.ko__m { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
  font-size: 13px; padding: 8px 0; border-bottom: 1px solid rgba(96,74,44,.17); }
.place li { display: grid; grid-template-columns: 22px 62px 1fr; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid rgba(96,74,44,.153); }
.town__v { color: var(--m-red); font-weight: 700; }
.org { border-radius: 8px; border-color: rgba(83,69,47,.28); }
.org__i { border-radius: 7px;
  background: linear-gradient(135deg, rgba(23,77,141,.16), rgba(201,31,43,.12));
  color: #263e69; font-size: 11px; }
.gen__axis { border-top: 0; padding-top: 13px;
  background: linear-gradient(90deg, var(--m-blue), var(--m-gold), var(--m-red)) top / 100% 2px no-repeat; }
.gen__c i { border-radius: 1px; width: 4px; height: 4px; opacity: .6; }
.towns li { border-radius: 7px; border-color: rgba(83,69,47,.3); background: rgba(255,253,246,.74); }
.hero__k::before, .eyebrow::before { background: var(--m-red); }

/* the year's competitions, month by month — pale periwinkle bars barely
   registered as bars; the chosen month steps out into the federation blue */
.ystrip__bar { width: 22px; border-radius: 3px; display: block;
  background: linear-gradient(180deg, #c1932f, #dcbc79); }
.ystrip__m:hover .ystrip__bar { background: linear-gradient(180deg, #ad8123, #cba95f); }
.ystrip__m[aria-pressed="true"] .ystrip__bar { background: linear-gradient(180deg, #26407e, #41599b); }
.calfilter button[aria-pressed="true"] { background: var(--blue); color: #f4efe3; }
/* a day carrying a competition: was pale blue with blue-grey numerals at 4.37 */
.dg__d.is-on { background: rgba(224,166,21,.32); color: #4a3204; font-weight: 700; }

/* Scoped. This is the warm re-tint of the desktop veil, and it carried no
   media query while the phone's own veil is written earlier in the file — so
   it won on phones too, and every inner hero got the sideways gradient meant
   for a 52%-wide column: opaque cream over the left third of the picture,
   clearing only past the middle. On a phone the copy is full-width, so that
   veil sat squarely over the photograph and left a ghost of it. */
@media (min-width: 901px) {
  .phero::before { content: ""; position: absolute; z-index: -1; inset: 0;
    background: radial-gradient(circle at 82% 34%, rgba(196,142,42,.16), transparent 30%),
                linear-gradient(90deg, #ebe5d7 0%, rgba(235,229,215,.97) 29%,
                                rgba(235,229,215,.55) 52%, rgba(235,229,215,.06) 78%); }
}

.doclist--scroll.is-scrollable { overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #a08a63 transparent;
  mask-image: linear-gradient(#000 0, #000 calc(100% - 34px), transparent 100%); }
.doclist--scroll::-webkit-scrollbar-thumb { background: #cbb48b; border-radius: 99px;
  border: 2px solid var(--bg); }

.shots--sheets { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.shot--sheet { aspect-ratio: 3 / 4; background: #c9c4b6; border-color: var(--rule-2); }
.shot--sheet img { object-fit: contain; object-position: center; transform: none; }
.shot--sheet:hover img { transform: none; }
.shot--sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(49,38,32,.027); }
.sheet__cap { margin: 12px 0 0; font-family: "IBM Plex Sans", sans-serif;
  font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 620px) {
  .shots--sheets { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
}

/* ---- the hero -----------------------------------------------------
   This sheet loads last, so this is the treatment that renders. It was
   previously restated in three other places. The base theme draws two hairline
   rays across the hero; they read as a scratch on the picture in any colour and
   encode nothing, so the hero simply does not have them. */
.hero::before { display: none; }
.hero__media::after {
  background:
    linear-gradient(100deg, rgba(240,234,220,.97) 0%, rgba(240,234,220,.94) 32%,
                    rgba(240,234,220,.74) 44%, rgba(240,234,220,.12) 55%,
                    rgba(240,234,220,.02) 70%),
    linear-gradient(0deg, rgba(90,58,26,.20), transparent 34%),
    linear-gradient(rgba(255,247,228,.14), rgba(110,60,24,.06));
}
/* On a phone the copy is full-width, so it and the photograph were competing
   for the same band: the media box ran to 66% of the hero and the copy began
   at 31% of it, which put the player squarely behind the headline. No scrim
   solves that — lift it and the text goes; keep it and the picture does. The
   two are separated instead, the way the inner heroes are: the photograph
   takes a band across the top at nearly full strength, the copy sits below it
   on cream, and the crop is aimed at the player rather than the banner.

   Note for whoever edits this next: the hero's scrim lives HERE. This sheet
   loads last and this rule has no media query, so it beats every
   .hero__media::after in tesut.theme.css at every width — those are dead. */
@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero__media {
    bottom: auto; height: 330px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 72%, rgba(0,0,0,.35) 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0 72%, rgba(0,0,0,.35) 92%, transparent 100%);
  }
  .hero__media img { object-position: 62% center; }
  .hero__media::after {
    background: linear-gradient(to top, rgba(240,234,220,.62) 0%, rgba(240,234,220,.24) 24%,
                rgba(240,234,220,.05) 56%, rgba(240,234,220,.03) 100%);
  }
  /* clears the band; the copy then reads as ink on cream rather than on a
     photograph, which is also why it measures far above AA now */
  .hero__in { min-height: 0; padding-top: 342px; }
}

/* The hero had nothing to stand on: photograph, then straight into cream. It
   closes on a plinth of the federation's own numbers, in the ink the footer is
   set in, so the page opens and closes on the same dark. */
.hero__rail { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: 18px 0 44px; background: var(--t-ink); color: #B9AC98;
  box-shadow: inset 0 1px rgba(224,203,161,.20); }
.hero__figs { width: min(100% - 84px, 1380px); margin: 0 auto; display: flex;
  gap: clamp(28px, 5vw, 76px); align-items: baseline; }
.hero__figs > div { display: flex; align-items: baseline; gap: 10px; }
.hero__figs dt { font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(19px, 2vw, 26px); font-weight: 500; line-height: 1; color: #E0A615; }
.hero__figs dd { margin: 0; font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: #B9AC98; }
.hero__in { padding-bottom: 150px; }
@media (max-width: 700px) {
  .hero__rail { padding: 13px 0 34px; }
  .hero__figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hero__figs > div { flex-direction: column; align-items: flex-start; gap: 3px; }
  .hero__figs dt { font-size: 20px; }
  .hero__figs dd { font-size: 9.5px; letter-spacing: .07em; line-height: 1.25; }
  .hero__in { padding-bottom: 128px; }
}

/* ---- the two long cards on the home row ---------------------------
   Their height is set by the rank + contact stack beside them, and neither
   filled it. The album grid is sized by the card, so it contributes no height
   of its own and can never become the tallest cell in the row. */
@media (min-width: 721px) {
  .a-news .mod__b,
  .a-doc  .mod__b { display: flex; flex-direction: column; }
  .a-news .mod__b > .li,
  .a-doc  .mod__b > .li { flex: 1 1 auto; }

  .a-gal .mod__b > .tiles { height: 100%; grid-auto-rows: 1fr; }
  .a-gal .mod__b > .tiles .tile { aspect-ratio: auto; min-height: 0; }
  .a-gal .mod__b > .tiles .tile img { position: absolute; inset: 0; }
}

/* ---- the placed motifs --------------------------------------------
   Each sits where it means something: the map on the card about where people
   play, the birds on the card about the youngest and oldest players, the
   pitcher on the people who host the season. */
.gen, .geo, .crew { position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(24px, 3vw, 38px); border: 1px solid rgba(83,69,47,.20);
  border-radius: 12px; background: rgba(255,251,241,.66);
  box-shadow: inset 0 1px rgba(255,255,255,.75), 0 22px 56px -46px rgba(57,40,18,.68); }
.gen > *, .geo > *, .crew > * { position: relative; z-index: 1; }
/* The copy in this band is half the height of the list of towns beside it, so
   top-aligning it left a hole under the paragraph. Set it on the same baseline
   instead: the room moves to the top of the column, where the map already is. */
.geo { align-items: end; }
.geo::before { content: ""; position: absolute; z-index: 0;
  pointer-events: none; background-repeat: no-repeat; background-position: left bottom;
  background-size: contain; }
/* the reissued map is a taller outline than the first (0.676 against 0.785), so
   the box follows the artwork — at the old 90x114 `contain` letterboxed it */
.geo::before { left: 28.6%; top: 15px; bottom: auto; width: 83px; height: 123px;
  transform: rotate(-13deg); background-position: center;
  background-image: url('/assets/tesut/harta.webp'); }
/* The youngest ranked player is 9, the oldest 78 — so: the same bird twice, one
   large and one small, on one branch. It sits at the head of the sentence that
   says so, in flow above the copy, rather than in a reserved band under the
   card; it keeps the artwork's own 267:87 rather than a separate height. */
.gen__copy::before {
  content: "";
  display: block;
  width: clamp(172px, 18.2vw, 267px);
  aspect-ratio: 267 / 87;
  margin: 0 0 clamp(15px, 1.7vw, 24px) -2px;
  pointer-events: none;
  background: url('/assets/tesut/panglica.webp') left bottom / contain no-repeat;
}
/* Romanian and Russian set that copy at different lengths, so whichever column
   is shorter used to leave the gap. The plot fills its column instead: the dots
   are anchored to the baseline, so the spare room becomes headroom above the
   tallest year — air inside the chart rather than a hole in the card. */
@media (min-width: 901px) {
  .gen__plot { display: flex; flex-direction: column; justify-content: flex-end;
    height: 100%; }
  .gen__dots { flex: 1 1 auto; }
}
/* an ulcior cu flori on the card about the people who host the season. Placed
   at 1470 as right:878px, held as a share of the card so it keeps its distance
   from the organiser cards as the card narrows. */
.crew::after { content: ""; position: absolute; z-index: 0; left: 28.62%; bottom: -5px;
  width: 107px; height: 163px; pointer-events: none;
  background: url('/assets/tesut/ulcior.webp') center / contain no-repeat; }
/* and the copy stops short of it — the last line ran into the flower head */
@media (min-width: 901px) { .crew__copy { padding-right: 25%; } }
@media (max-width: 900px) {
  .geo::before, .crew::after { display: none; }
  .gen__copy::before { width: 170px; margin-bottom: 14px; opacity: .8; }
}
@media (max-width: 620px) { .gen__copy::before { width: 134px; opacity: .68; } }

/* Crossed paddles round an embroidered ball, on the fair-play page.
   Scoped by data-page: .grid-2 is the two-column layout used by eight pages —
   despre, contacte, competiții and their Russian twins among them — so an
   unscoped rule would put the paddles on all of them. */
[data-page="fair-play"] .grid-2 { position: relative; }
[data-page="fair-play"] .grid-2 > * { position: relative; z-index: 1; }
[data-page="fair-play"] .grid-2::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 254px;
  bottom: -18px;
  width: 160px;
  height: 159px;
  pointer-events: none;
  background: url('/assets/tesut/fairplay.webp') center / contain no-repeat;
}
/* the two columns stack at 900px and the space it sits in stops existing */
@media (max-width: 900px) { [data-page="fair-play"] .grid-2::after { display: none; } }

/* twelve flowers, one for each month, behind the competition year */
.grid-2--cal { position: relative; }
.grid-2--cal > * { position: relative; z-index: 1; }
.grid-2--cal::after {
  content: ""; position: absolute; z-index: 0;
  right: 24px; bottom: 7px;
  /* 474px is the placed size and renders exactly from ~1270px up; below that the
     columns narrow and a fixed motif would slide under the calendar column */
  width: min(474px, 38%);
  aspect-ratio: 474 / 465;
  pointer-events: none;
  background: url('/assets/tesut/calendar.webp') center / contain no-repeat;
}
/* this grid restacks at 1100px, not the 900px the other motifs use */
@media (max-width: 1100px) { .grid-2--cal::after { display: none; } }

/* the band at every page edge, and Moldova's emblem closing the page */
.head { position: relative; padding-bottom: 50px; }
.head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px;
  height: var(--brau);
  background: url('/assets/tesut/brau-geo.webp') repeat-x center / auto var(--brau); }
@media (max-width: 700px) { .head { padding-bottom: 44px; } }
.wall { border-top: 0; padding-top: 0; }
.wall::before { content: ""; display: block; width: 100%; height: var(--brau);
  margin-bottom: 18px; pointer-events: none;
  background: url('/assets/tesut/brau-geo.webp') repeat-x center / auto var(--brau); }
.phero { position: relative; }
.phero::after { content: ""; position: absolute; 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); }
@media (max-width: 700px) { .phero::after { height: 34px; background-size: auto 34px; } }

/* ---- the footer ---------------------------------------------------
   The page was one unbroken field of cream from masthead to copyright. The
   footer takes the darkest thread in the embroidery as its ground. */
.foot { position: relative; isolation: isolate; overflow: hidden;
  background: var(--t-ink); color: #B9AC98; padding-top: 104px; }
.foot b, .foot strong, .foot__brand b { color: #EFE7D8; }
.foot > div:not(.foot__brand):not(.temabar) > b { color: #D9A441; letter-spacing: .09em; }
.foot a { color: #D6C8B0; }
.foot a:hover { color: #E8B759; }
.foot .foot__brand small, .foot small, .foot p, .foot .temabar span { color: #9A8C78; }
.foot .temabar a { color: #C6B79F; border-color: rgba(239,231,216,.22); }
.foot .temabar a[aria-current], .foot .temabar a:hover { color: #EFE7D8; border-color: rgba(239,231,216,.5); }
.foot hr, .foot .rule { border-color: rgba(239,231,216,.16); }
.foot::before { content: ""; position: absolute; z-index: 0; inset: 22px 0 auto;
  height: var(--brau); pointer-events: none;
  background: url('/assets/tesut/brau-geo.webp') repeat-x center / auto var(--brau); }
.foot::after { content: ""; position: absolute; z-index: 0; right: clamp(14px, 4vw, 58px);
  bottom: 14px; width: clamp(112px, 12vw, 168px); height: clamp(80px, 8.6vw, 120px);
  pointer-events: none; opacity: .9;
  background: url('/assets/tesut/struguri.webp') center / contain no-repeat; }
.foot > * { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .foot { padding-top: 78px; }
  .foot::before { inset: 16px 0 auto; height: 40px; background-size: auto 40px; }
  .foot::after { width: 96px; height: 68px; opacity: .55; right: 12px; bottom: 10px; }
}

/* Chișinău's own arch beside the address; its top deliberately sits above the
   card, so the cards are lifted over the page and the arc runs under them */
.ccards { position: relative; z-index: 3; }
.ccards::after { content: ""; position: absolute; left: 26.6%; bottom: -248px;
  width: 310px; height: 264px; pointer-events: none;
  background: url('/assets/tesut/arc.webp') center / contain no-repeat; }
@media (max-width: 1300px) { .ccards::after { width: 280px; height: 238px; bottom: -222px; } }
@media (max-width: 900px)  { .ccards::after { left: auto; right: 0; bottom: -170px;
  width: 200px; height: 170px; } }
@media (max-width: 620px)  { .ccards::after { display: none; } }

/* the rooster, for the page that is not there */
.notfound { position: relative; }
.notfound::after { content: ""; position: absolute; left: calc(100% + clamp(20px, 3vw, 48px));
  top: 50%; transform: translateY(-50%); width: clamp(190px, 22vw, 300px);
  height: clamp(128px, 14.8vw, 201px); pointer-events: none;
  background: url('/assets/tesut/cocos.webp') center / contain no-repeat; }
@media (max-width: 1140px) {
  .notfound::after { position: static; transform: none; display: block; left: auto;
    width: 210px; height: 141px; margin: 30px 0 0; }
}

@media (max-width: 700px) {
  .gen, .geo, .crew { padding: 22px 16px; border-radius: 9px; }
  .wall::before { height: 40px; margin-bottom: 12px; background-size: auto 40px; }
}

/* the arc shrinks again on the narrowest two-column layout; this override sat
   after the block above in the good sheet and is restored with it */
@media (max-width: 900px) { .ccards::after { width: 92px; height: 78px; } }


/* ================= mobile navigation: side sheet =================
   The menu used to toggle display:none inside the masthead, so it snapped
   open, pushed the page down and left the page scrolling behind it. It is
   now a sheet that slides in from the right over a scrim, covers the page
   under the masthead and locks what is behind it.

   Open/closed is a class, not the hidden attribute: display:none cannot be
   transitioned. visibility carries the transition delay so the panel still
   leaves the tab order once it has slid away, rather than sitting invisible
   but focusable off-screen.

   Everything here lives inside the masthead's stacking context, because
   pages.py lifts the whole <header> to build the inner pages — so the scrim
   and the sheet are layered against .bar__in rather than the document. */
@media (max-width: 1240px) {
  /* the masthead row stays above both, so the crest reads normally and the
     toggle — now an X — is still there to close the sheet */
  .bar__in { position: relative; z-index: 3; }

  .navscrim {
    position: fixed; inset: 0; z-index: 1;
    background: rgba(24, 18, 10, .44);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
  }
  .navscrim.is-open {
    opacity: 1; visibility: visible;
    transition: opacity .28s ease, visibility 0s;
  }

  .drawer {
    position: fixed; inset: 0 0 0 auto; z-index: 2;
    display: flex; flex-direction: column;
    width: min(86vw, 360px);
    padding: calc(var(--barh) + 22px) 20px 32px;
    background: var(--bg);
    border-top: 0;
    border-left: 1px solid var(--rule);
    box-shadow: -22px 0 50px -28px rgba(24, 18, 10, .55);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    /* deceleration on arrival — it settles rather than stopping dead */
    transition: transform .34s cubic-bezier(.22, .61, .36, 1),
                visibility 0s linear .34s;
  }
  .drawer.is-open {
    transform: none; visibility: visible;
    transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s;
  }

  /* a sheet this size can hold a proper tap target per row */
  .drawer a {
    display: flex; align-items: center;
    min-height: 48px; padding: 4px 2px;
    font-size: 16px;
    border-bottom: 1px solid var(--rule);
  }
  .drawer a:last-child { border-bottom: 0; }
  .search--drawer { margin-bottom: 14px; }
}

/* the page must not scroll behind the sheet */
html.nav-open, html.nav-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .navscrim { transition: none; }
}


/* backdrop-filter on the masthead makes it the containing block for every
   fixed-position descendant, so the sheet and its scrim were being sized
   against the header's 93px box instead of the viewport. The sheet has to
   escape that, so on small screens the blur comes off and the bar goes
   near-opaque instead — which is also cheaper to paint on a phone. */
@media (max-width: 1240px) {
  .bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(240, 234, 220, .97);
  }
}


/* The sheet's rows arrive just behind it rather than the whole panel landing
   at once — the detail that separates a drawer from a sheet. Exit is instant
   and undelayed: leaving should feel quicker than arriving. */
@media (max-width: 1240px) {
  .drawer > * {
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .01s linear, transform .01s linear;
  }
  .drawer.is-open > * {
    opacity: 1;
    transform: none;
    transition: opacity .26s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
  }
  .drawer.is-open > *:nth-child(1) { transition-delay: .10s; }
  .drawer.is-open > *:nth-child(2) { transition-delay: .13s; }
  .drawer.is-open > *:nth-child(3) { transition-delay: .16s; }
  .drawer.is-open > *:nth-child(4) { transition-delay: .19s; }
  .drawer.is-open > *:nth-child(5) { transition-delay: .22s; }
  .drawer.is-open > *:nth-child(6) { transition-delay: .25s; }
  .drawer.is-open > *:nth-child(7) { transition-delay: .28s; }
  .drawer.is-open > *:nth-child(8) { transition-delay: .31s; }
  .drawer.is-open > *:nth-child(9) { transition-delay: .34s; }

  /* nothing outside the sheet should rubber-band while it is open */
  html.nav-open { overscroll-behavior: none; }
  .navscrim { touch-action: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer > *, .drawer.is-open > * {
    transition: none;
    transition-delay: 0s;
    opacity: 1;
    transform: none;
  }
}


/* The footer is the last thing in the document, so an overscroll bounce past
   it reveals the canvas — which carries the body's cream and reads as a white
   band under the near-black footer. The shadow paints the footer's own colour
   from its top edge to well below the document, so the bottom of the page
   stays dark however far it is dragged. Spread and offset are equal, so the
   rect starts exactly at the footer's top and nothing is painted above it;
   box-shadow never affects layout or scrollable overflow. */
.foot { box-shadow: 0 50vh 0 50vh var(--t-ink); }


/* The overscroll gutter — the strip a rubber-band drag reveals past either end
   of the document — is filled with the canvas background colour. Painted
   content, box-shadows included, is not drawn into it, which is why casting a
   shadow below the footer did nothing there.

   So two things. The bounce is switched off, which is what an app does and
   means there is no gutter to colour in the first place. And where a browser
   ignores that (Safari before 16.4), the canvas carries the footer's ink
   rather than the body's cream, so the gutter is dark instead of white.

   The canvas takes html's background once html has one, so body has to keep
   painting the cream over its own box — and cover the viewport on pages whose
   content is shorter than the screen. */
html {
  overscroll-behavior-y: none;
  background-color: var(--t-ink);
}
body { min-height: 100vh; }


/* Without viewport-fit=cover an iPhone insets the page above the home
   indicator and fills that strip with the page background — the cream — which
   is the white bar under the footer. The meta now lets the page reach the
   physical bottom of the screen, so the footer's own colour paints there, and
   its padding grows by the inset so the text is not sat under the indicator.
   env() resolves to 0px everywhere that has no inset, so nothing else moves. */
.foot { padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }

/* the sheet has to clear the indicator too */
@media (max-width: 1240px) {
  .drawer { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
}