/* Марафоны мира 2027 (/marathons/): постеры в стиле каждой страны.
   SVG постеров (собирает runningbuddies-tools/marathons/build.mjs) красится классами отсюда:
   .k силуэт, .l подсветка, .s снег, .f дальний план, .w вода, .pt/.pf/.pg орнамент. */

@font-face { font-family: "Unbounded"; font-weight: 800; font-display: swap;
  src: url("/assets/fonts/unbounded-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 800; font-display: swap;
  src: url("/assets/fonts/unbounded-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.page-marathons { --display: "Unbounded", "Inter Tight", sans-serif; --dark: #121110; }

/* ---------- Первый экран ---------- */
.mhero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(56px, 9vw, 130px)) 0 0;
  background:
    radial-gradient(1200px 520px at 85% 0%, rgba(226, 73, 43, 0.35), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(30, 180, 230, 0.16), transparent 60%),
    var(--dark);
  color: #fff;
}
.mhero__title {
  margin-top: 26px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 9.4vw, 152px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.mhero__title span { display: block; }
.mhero__title em {
  display: block;
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
}
.mhero__lead {
  max-width: 640px;
  margin-top: clamp(26px, 3vw, 40px);
  font-size: clamp(17px, 1.5vw, 20px);
  color: rgba(255, 255, 255, 0.78);
}
.mhero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-top: clamp(32px, 4vw, 52px);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}
.mhero__stats b {
  display: block;
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.02em;
  color: #fff;
}
.mhero__strip {
  display: flex;
  gap: 10px;
  width: max-content;
  margin-top: clamp(56px, 7vw, 96px);
  padding: 18px 0 22px;
  animation: m-strip 60s linear infinite;
}
.mhero__strip svg {
  width: 48px;
  height: 32px;
  flex: none;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* веер из трёх постеров справа (только широкие экраны) */
.mhero__inner { position: relative; }
.mhero__fan { display: none; }
@media (min-width: 1100px) {
  .mhero__fan {
    display: block;
    position: absolute;
    top: 10px;
    right: var(--pad);
    width: 34%;
    max-width: 440px;
    aspect-ratio: 1 / 1.05;
  }
  .mhero__card {
    position: absolute;
    left: 0;
    width: 78%;
    aspect-ratio: 400 / 250;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
  .mhero__card .mc__art { display: block; width: 100%; height: 100%; }
  .mhero__card:nth-child(1) { top: 0; left: 18%; transform: rotate(5deg); }
  .mhero__card:nth-child(2) { top: 33%; left: 0; transform: rotate(-4deg); }
  .mhero__card:nth-child(3) { top: 64%; left: 22%; transform: rotate(3deg); }
  .mhero__card .mc__city { font-size: 22px; }
  .mhero__title { max-width: 62%; font-size: clamp(44px, 6.6vw, 112px); }
  .mhero__lead { max-width: 560px; }
}

@keyframes m-strip { to { transform: translateX(-50%); } }

/* ---------- Панель фильтров ---------- */
.mbar {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: rgba(245, 244, 241, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.mbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.mbar__months .chip { min-height: 34px; padding: 0 12px; text-transform: capitalize; }

/* ---------- Месяцы ---------- */
.mlist { padding-bottom: var(--section); }
.mm { padding-top: clamp(56px, 7vw, 104px); scroll-margin-top: calc(var(--header-h) + 64px); }
.mm[hidden] { display: none; }
.mm__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(22px, 3vw, 36px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.mm__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5.6vw, 84px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.mm__count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.mm__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: clamp(18px, 2vw, 28px);
}

/* ---------- Карточка-постер ---------- */
.mc,
.mhero__card {
  --sky1: #ccc; --sky2: #eee; --sun: #fff; --far: #999; --ink: #111; --lit: #fc0; --snow: #fff;
  --water: var(--far); --ground: #222; --pat: #fff; --btn: var(--ground); --btn-ink: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: var(--paper);
  color: #0d0d0d;
  box-shadow: 0 1px 0 rgba(13, 13, 13, 0.06), 0 18px 40px -28px rgba(13, 13, 13, 0.45);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.mc[hidden] { display: none; }
.mc:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(13, 13, 13, 0.06), 0 28px 50px -28px rgba(13, 13, 13, 0.55); }

.mc__poster { position: relative; aspect-ratio: 400 / 250; overflow: hidden; background: var(--sky2); }
.mc__art { display: block; width: 100%; height: 100%; }
.mc__art .s1 { stop-color: var(--sky1); }
.mc__art .s2 { stop-color: var(--sky2); }
.mc__art .sun { fill: var(--sun); transition: transform 0.8s var(--ease); transform-origin: center; transform-box: fill-box; }
.mc__art .sky-pat { opacity: 0.09; }
.mc__art .mark { transition: transform 0.8s var(--ease); }
.mc__art .k { fill: var(--ink); }
.mc__art .kst { fill: none; stroke: var(--ink); stroke-linecap: round; }
.mc__art .l { fill: var(--lit); }
.mc__art .s { fill: var(--snow); }
.mc__art .f { fill: var(--far); }
.mc__art .w { fill: var(--water); }
.mc__art .grd { fill: var(--ground); }
.mc__art .grd-pat { opacity: 0.5; }
.mc__art .grd-line { fill: var(--pat); opacity: 0.6; }
.mc__art .pt { fill: none; stroke: var(--pat); stroke-width: 1.4; }
.mc__art .pf { fill: var(--pat); }
.mc__art .pg { fill: var(--ground); }
.mc:hover .mc__art .mark { transform: translateY(-3px); }
.mc:hover .mc__art .sun { transform: scale(1.08); }

/* штамп с датой — как печать в паспорте */
.mc__stamp {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2px solid currentColor;
  border-radius: 50%;
  outline: 1px dashed currentColor;
  outline-offset: 3px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--stamp, var(--ground));
  line-height: 1;
  text-align: center;
  transform: rotate(-8deg);
}
.mc__stamp b { font-family: var(--display); font-size: 24px; letter-spacing: -0.02em; }
.mc__stamp span { margin-top: -14px; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.mc__flag {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 24px;
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 4px 10px rgba(0, 0, 0, 0.25);
}
.mc__major {
  position: absolute;
  top: 50px;
  right: 16px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #0d0d0d;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mc__city {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6%;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--city, #fff);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.mc__body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.mc__place {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mc__tbc {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border: 1px dashed currentColor;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.mc__title { margin-top: 8px; font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
.mc__title a:hover { color: var(--accent); }
.mc__blurb { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #3d3c39; }

/* блок перелёта — как отрывной корешок посадочного */
.mc__fly {
  position: relative;
  margin: 18px -22px 0;
  padding: 16px 22px 0;
  border-top: 2px dashed rgba(13, 13, 13, 0.16);
}
.mc__fly::before,
.mc__fly::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg);
}
.mc__fly::before { left: -10px; }
.mc__fly::after { right: -10px; }
.mc__price b {
  display: block;
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.mc__price span { font-size: 13px; color: var(--muted); }
.mc__via { margin-top: 8px; font-size: 14px; color: #3d3c39; }
.mc__route {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #ece9e2;
  font-size: 12px;
  font-weight: 600;
}
.mc__route--direct { background: #1f8a4c; color: #fff; }

.mc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; padding-top: 18px; }
.mc__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}
.mc__btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mc__btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.mc__link { font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line); }
.mc__link:hover { border-color: currentColor; }

.mlist__empty { padding: 80px 0 0; font-size: 18px; color: var(--muted); text-align: center; }
.mnote {
  max-width: 820px;
  margin-top: clamp(64px, 8vw, 110px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 22px;
  background: var(--paper);
  font-size: 15px;
  color: #3d3c39;
}
.mnote__title { margin-bottom: 12px; font-size: 20px; font-weight: 700; color: var(--ink); }
.mnote p + p { margin-top: 10px; }

@media (max-width: 760px) {
  .mbar__inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mbar__inner .chips { flex-wrap: nowrap; }
  .mbar__months { display: none; }
  .mc__body { padding: 18px 18px 20px; }
  .mc__fly { margin: 16px -18px 0; padding: 14px 18px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mhero__strip { animation: none; }
}

/* ---------- Темы стран ---------- */
.mc--ae { --sky1: #f2b866; --sky2: #fde9c6; --sun: #e8743b; --far: #e2b47a; --ink: #2a1d16; --lit: #d9a441; --water: #0f5e5a; --ground: #0f5e5a; --pat: #f0cf8e; }
.mc--in { --sky1: #ff9933; --sky2: #ffe0b0; --sun: #fff4d6; --far: #e8853f; --ink: #3b1a1a; --lit: #ffb703; --water: #2a7f8f; --ground: #138808; --pat: #ffd166; }
.mc--vn { --sky1: #da251d; --sky2: #f8a070; --sun: #ffde00; --far: #b51c16; --ink: #3a0d0b; --lit: #ffde00; --water: #7a1410; --ground: #1d5b3a; --pat: #ffde00; }
.mc--ma { --sky1: #c1272d; --sky2: #f4b06a; --sun: #fde2b0; --far: #d98a5a; --ink: #3b1410; --lit: #f2c14e; --snow: #fff6ea; --ground: #006233; --pat: #f2d6a2; }
.mc--th { --sky1: #2d2a7a; --sky2: #d77fb4; --sun: #ffcf5c; --far: #6d4aa0; --ink: #1b1440; --lit: #f4c542; --water: #3d2f86; --ground: #a51931; --pat: #f4c542; }
.mc--jp { --sky1: #efe4cc; --sky2: #f8f2e4; --sun: #bc002d; --far: #c4cbe0; --ink: #1d2b53; --snow: #ffffff; --ground: #1d2b53; --pat: #efe4cc; --stamp: #bc002d; --city: #f8f2e4; }
.mc--es { --sky1: #ffb238; --sky2: #ffe6ab; --sun: #c60b1e; --far: #ef9a4a; --ink: #5a1010; --lit: #ffc400; --water: #1f4e8c; --ground: #1f4e8c; --pat: #f6d36b; --stamp: #c60b1e; }
.mc--kr { --sky1: #d5e2f1; --sky2: #f6f3ec; --sun: #cd2e3a; --far: #a7bcd6; --ink: #0f2a5a; --lit: #cd2e3a; --ground: #0047a0; --pat: #ffffff; }
.mc--it { --sky1: #f0ae78; --sky2: #fce6c8; --sun: #fff6e0; --far: #d08a5c; --ink: #3a2416; --lit: #ce2b37; --ground: #009246; --pat: #f4efe6; --stamp: #ce2b37; }
.mc--fr { --sky1: #1d3c78; --sky2: #f2b0a4; --sun: #ffe7d1; --far: #5a6aa0; --ink: #0f1a3d; --lit: #ffd166; --ground: #ef4135; --pat: #ffffff; --stamp: #1d3c78; }
.mc--tr { --sky1: #e30a17; --sky2: #ff9a6a; --sun: #fff2e0; --far: #b30812; --ink: #33060a; --lit: #6fd3e0; --water: #0b6e8a; --ground: #0b6e8a; --pat: #8fe0ea; --stamp: #e30a17; }
.mc--uz { --sky1: #1eb4e6; --sky2: #c8eef7; --sun: #fff4c2; --far: #86cde3; --ink: #10354a; --lit: #19b5a5; --ground: #1eb53a; --pat: #ffffff; }
.mc--rs { --sky1: #0c4076; --sky2: #d0646a; --sun: #ffe9c7; --far: #33558a; --ink: #0b1630; --lit: #e8c35a; --ground: #c6363c; --pat: #ffffff; }
.mc--at { --sky1: #ed2939; --sky2: #f9c0bc; --sun: #fff7ec; --far: #c81e2c; --ink: #3a0c10; --lit: #d4af37; --ground: #2b2b2b; --pat: #d4af37; --stamp: #ed2939; }
.mc--us { --sky1: #0a3161; --sky2: #f2b48a; --sun: #fde7c9; --far: #2c4a7a; --ink: #08142e; --lit: #e8b04a; --water: #1b3a6b; --ground: #b31942; --pat: #ffffff; --stamp: #0a3161; }
.mc--gb { --sky1: #8fa9c4; --sky2: #ece4d6; --sun: #fff3dc; --far: #9aa6b5; --ink: #12213f; --lit: #f5d36b; --water: #5d7391; --ground: #c8102e; --pat: #ffffff; --stamp: #012169; }
.mc--cz { --sky1: #11457e; --sky2: #edc0aa; --sun: #ffeccc; --far: #4a6c96; --ink: #0d1b33; --lit: #f1c40f; --water: #3e5f8c; --ground: #d7141a; --pat: #ffffff; --stamp: #11457e; }
.mc--za { --sky1: #de3831; --sky2: #ffc44d; --sun: #fff3c2; --far: #9c2a22; --ink: #1a1a1a; --lit: #ffffff; --water: #0d3b8c; --ground: #002395; --pat: #ffb612; --stamp: #007a4d; }
.mc--au { --sky1: #00247d; --sky2: #5fb0e2; --sun: #ffcd00; --far: #2a5aa8; --ink: #0b1a3f; --lit: #fffaf0; --water: #0b3f8f; --ground: #00843d; --pat: #ffcd00; }
.mc--de { --sky1: #f2c230; --sky2: #fae8ad; --sun: #dd0000; --far: #e2b25a; --ink: #111111; --lit: #dd0000; --ground: #111111; --pat: #f2c230; --stamp: #111111; }
.mc--kz { --sky1: #00afca; --sky2: #c4eff5; --sun: #fec50c; --far: #4fb7cf; --ink: #0f3a48; --snow: #ffffff; --ground: #0a7f95; --pat: #fec50c; }
.mc--am { --sky1: #f2a800; --sky2: #f8dca0; --sun: #d90012; --far: #c98a5a; --ink: #13234f; --snow: #ffffff; --ground: #d90012; --pat: #f2a800; --stamp: #0033a0; }
.mc--cn { --sky1: #de2910; --sky2: #f99a6a; --sun: #ffde00; --far: #a8190a; --ink: #2b0703; --lit: #ffde00; --water: #8c1a10; --ground: #8c1a10; --pat: #ffde00; --stamp: #de2910; }
.mc--nl { --sky1: #9fc3e7; --sky2: #eef4fb; --sun: #ff7f00; --far: #b7cbe0; --ink: #1f3a93; --lit: #ff7f00; --water: #21468b; --ground: #21468b; --pat: #ffffff; }
.mc--gr { --sky1: #0d5eaf; --sky2: #a8d0f2; --sun: #ffd56b; --far: #2f6fb5; --ink: #f6f1e6; --ground: #0d5eaf; --pat: #ffffff; --stamp: #0d5eaf; }