/* ============================================================
   IIHF 2.0 · One Game. One World.
   Aivaz Omorkanov · Candidate for President, IIHF
   Brand: IIHF blue #041e42 / #062f63 · IIHF mid blue #0057b8
          green #8dc73d · light green #b6e06a
   ============================================================ */

:root{
  --navy:#041e42;
  --hero-bg:#011431;   /* ровная кромка баннера: страница продолжает картинку */
  --navy-2:#062f63;
  --navy-3:#0a4a95;
  --green:#8dc73d;
  --green-lt:#b6e06a;
  --green-dk:#5d8f22;
  --blue:#8ec4f0;
  --blue-dk:#0057b8;
  --ink:#0a2240;
  --grey:#48607f;
  --grey-2:#8ba3c2;
  --line:#d7e2f0;
  --paper:#ffffff;
  --paper-2:#eef4fb;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,
    "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  /* Антиквы на сайте больше нет: один шрифт на весь документ.
     Переменная оставлена, чтобы не править 12 старых правил, но
     указывает на тот же Inter — ничто не может проскочить мимо. */
  --serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,
    "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --wrap:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------------------------------------------------- NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(4,30,66,.86);backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s;
}
.nav-in{
  max-width:var(--wrap);margin:0 auto;padding:0 28px;height:66px;
  display:flex;align-items:center;gap:28px;
}
.brand{
  font-weight:800;font-size:16px;letter-spacing:.02em;color:#fff;
  text-decoration:none;white-space:nowrap;
}
.brand span{color:var(--green)}
.nav-links{display:flex;gap:22px;margin-left:auto;list-style:none}
.nav-links a{
  color:#c6d6ee;text-decoration:none;font-size:13.5px;font-weight:600;
  letter-spacing:.03em;transition:color .2s;white-space:nowrap;
}
.nav-links a:hover{color:var(--green)}
.langs{display:flex;gap:2px;margin-left:18px;border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:2px;flex:none}
.langs button{
  background:none;border:0;color:#8fa5c4;font:inherit;font-size:12px;font-weight:700;
  letter-spacing:.06em;padding:5px 8px;border-radius:4px;cursor:pointer;transition:.18s;white-space:nowrap;
}
.langs button:hover{color:#fff}
.langs button.on{background:var(--green);color:var(--navy)}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.burger i{display:block;width:22px;height:2px;background:#fff;margin:4px 0;transition:.25s}

@media(max-width:900px){
  .burger{display:block}
  .nav-links{
    position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--navy);padding:0 28px;max-height:0;overflow:hidden;
    transition:max-height .3s ease,padding .3s ease;margin:0;
  }
  /* 340px хватало не на все пункты: «О себе» и «Контакты» обрезались.
     Берём с запасом и разрешаем прокрутку на низких экранах. */
  .nav.open .nav-links{max-height:min(78vh,560px);padding:10px 28px 22px;overflow-y:auto}
  .nav-links a{display:block;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px}
  .langs{margin-left:14px;order:3}
}

/* ---------------------------------------------------------- HERO */
/* Слева тёмная колонка с лок-апом, справа портрет. На телефоне
   фотография уходит наверх и обрезается вертикально, отдельный файл. */
.hero{padding-top:66px;background:var(--hero-bg)}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
  min-height:calc(100vh - 66px);min-height:calc(100svh - 66px);
}
.hero-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:34px 56px 38px max(28px,calc((100vw - var(--wrap))/2 + 28px));
}
/* Шайба из баннера, живой лок-ап под ней. Края кадра сведены
   к цвету фона, поэтому границы картинки не видно. */
.hero-puck{width:clamp(215px,26vw,340px);height:auto;margin:-18px 0 -46px -36px}
@media(max-height:820px){.hero-puck{width:clamp(190px,21vw,264px);margin:-14px 0 -36px -28px}}
@media(max-height:640px){.hero-puck{display:none}}
.hero-photo{position:relative;background:var(--hero-bg);overflow:hidden}
/* снимок вынут из потока: высоту первого экрана задаёт колонка с текстом,
   а не собственные пропорции фотографии */
.hero-photo picture{position:absolute;inset:0;display:block}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.hero-photo::after{
  content:"";position:absolute;inset:0 auto 0 0;width:180px;
  background:linear-gradient(90deg,var(--hero-bg) 6%,rgba(1,20,47,0));
}

.eyebrow{
  font-size:11.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;
  color:var(--green);margin-bottom:16px;
}
.mark{
  font-size:clamp(46px,6.4vw,84px);line-height:.92;font-weight:800;
  letter-spacing:-.04em;color:#fff;margin-bottom:10px;
}
.mark b{color:var(--green);font-weight:800}
.mark-tag{
  font-family:var(--serif);font-style:italic;color:var(--blue);
  font-size:clamp(18px,2.1vw,26px);margin-bottom:24px;letter-spacing:.01em;
}
.hero-copy .who{
  font-size:15.5px;color:#dce7f7;max-width:42ch;line-height:1.5;
  padding-left:16px;border-left:3px solid var(--green);
}
.hero-copy .who b{color:#fff;font-weight:700;display:block;font-size:19px;margin-bottom:4px}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:14px;font-weight:700;letter-spacing:.04em;padding:14px 26px;border-radius:6px;
  transition:.2s;border:1.5px solid transparent;
}
.btn-p{background:var(--green);color:var(--navy)}
.btn-p:hover{background:#9ed84a;transform:translateY(-1px)}
.btn-s{border-color:rgba(255,255,255,.28);color:#fff}
.btn-s:hover{border-color:var(--green);color:var(--green)}

/* countdown */
.count{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.count div{min-width:56px}
.count b{
  display:block;font-size:34px;font-weight:800;color:#fff;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.count span{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-2);margin-top:7px;
}
.count-lab{
  margin-top:28px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);margin-bottom:14px;
}

:root[lang^="zh"] h2{letter-spacing:0}
/* разрядка, рассчитанная на латиницу, разваливает иероглифы */
:root[lang^="zh"] .kicker,:root[lang^="zh"] .eyebrow,:root[lang^="zh"] .count-lab,
:root[lang^="zh"] .sub,:root[lang^="zh"] .built .yr,:root[lang^="zh"] .sig span,
:root[lang^="zh"] .chan span,:root[lang^="zh"] .prog-head em,
:root[lang^="zh"] .count span,:root[lang^="zh"] .foot-brand em{letter-spacing:.06em}
:root[lang^="zh"] .deck,:root[lang^="zh"] .pull{font-family:var(--sans);font-style:normal}

/* ---------------------------------------------------------- SECTION FURNITURE */
section{padding:96px 0}
.sec-dark{background:var(--navy);color:#eaf1fb}
.sec-tint{background:var(--paper-2)}
.kicker{
  font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;
  color:var(--green-dk);margin-bottom:18px;
}
.sec-dark .kicker{color:var(--green)}
h2{
  font-size:clamp(30px,4.6vw,52px);line-height:1.04;font-weight:800;
  letter-spacing:-.032em;margin-bottom:22px;
}
h2 em{color:var(--green-dk);font-style:normal}
.sec-dark h2{color:#fff}
.sec-dark h2 em{color:var(--green)}
.deck{
  font-family:var(--serif);font-size:clamp(19px,2.3vw,25px);line-height:1.42;
  color:var(--grey);max-width:34ch;
}
.sec-dark .deck{color:var(--blue)}
/* Правило в цветах ИИХФ: синий переходит в зелёный */
.rule{width:72px;height:3px;margin:0 0 26px;
  background:linear-gradient(90deg,var(--blue-dk) 0 46%,var(--green) 46%)}
.sec-dark .rule{background:linear-gradient(90deg,var(--blue) 0 46%,var(--green) 46%)}

/* ---------------------------------------------------------- LETTER */
.letter{max-width:70ch;margin:6px 0 0}
.letter p{margin-bottom:19px;color:#cfe0f5;font-size:17px;line-height:1.68}
.letter p strong{color:#fff;font-weight:700}
.letter .open{
  font-family:var(--serif);font-style:italic;font-size:22px;color:#fff;margin-bottom:26px;
}
.letter .pull{margin:34px 0 34px;font-size:clamp(21px,2.5vw,29px)}
.letter .lead-in{color:#fff;font-weight:700;margin-bottom:14px}

.letter-amb{list-style:none;margin:0 0 26px;display:grid;gap:1px;
  background:rgba(255,255,255,.1);border-left:3px solid var(--green)}
.letter-amb li{background:var(--navy);padding:16px 20px}
.letter-amb b{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green);margin-bottom:6px;
}
.letter-amb span{display:block;font-size:15.5px;color:#cfe0f5;line-height:1.55}
.letter .sig{max-width:none}

/* закрывающий лок-ап */
.lockup{
  margin:60px 0 0;padding:34px;text-align:center;
  border:1px solid rgba(255,255,255,.16);border-radius:10px;
  background:linear-gradient(135deg,rgba(0,87,184,.28),rgba(141,199,61,.12));
}
.lockup .lock-1{
  font-size:13px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;margin-bottom:12px;
}
.lockup .lock-2{
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,21px);
  color:var(--green-lt);line-height:1.45;margin:0;
}
@media(max-width:640px){
  .letter .open{font-size:19px}
  .lockup{padding:24px 20px}
}
:root[lang^="zh"] .letter .open,:root[lang^="zh"] .lockup .lock-2{
  font-family:var(--sans);font-style:normal}
:root[lang^="zh"] .letter-amb b,:root[lang^="zh"] .lockup .lock-1{letter-spacing:.08em}

/* ---------------------------------------------------------- STATEMENT */
.stmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.pull{
  font-family:var(--serif);font-size:clamp(23px,3vw,34px);line-height:1.3;
  color:#fff;font-style:italic;border-left:4px solid var(--green);
  padding-left:26px;margin:8px 0 30px;
}
.stmt-grid p{margin-bottom:17px;color:#c6d6ee;font-size:16.5px}
.stmt-grid p strong{color:#fff;font-weight:700}
.sig{margin-top:32px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.sig b{display:block;font-size:20px;color:#fff;font-weight:800;letter-spacing:-.01em}
.sig span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}

/* ---------------------------------------------------------- NEWS */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.news-card{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:.24s;text-decoration:none;color:inherit;
}
.news-card:hover{transform:translateY(-4px);box-shadow:0 16px 44px -22px rgba(12,27,51,.42);border-color:#c3d2e6}
.news-card img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--hero-bg)}
.news-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.news-date{
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-dk);margin-bottom:11px;font-variant-numeric:tabular-nums;
}
.news-card h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px}
.news-card p{font-size:14.5px;color:var(--grey);line-height:1.55}
.news-link{
  margin-top:16px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--blue-dk);
}
.news-more{
  display:block;margin:34px auto 0;background:none;border:1.5px solid var(--line);
  border-radius:6px;padding:13px 26px;font:inherit;font-size:14px;font-weight:700;
  letter-spacing:.04em;color:var(--ink);cursor:pointer;transition:.2s;
}
.news-more:hover{border-color:var(--green);color:var(--green-dk)}
.news-empty{
  grid-column:1/-1;padding:34px 0;font-family:var(--serif);font-size:19px;color:var(--grey-2);
}

/* ---------------------------------------------------------- AMBITIONS */
.amb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
.amb{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:32px 26px 30px;
  position:relative;overflow:hidden;transition:.25s;
}
.amb::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--green)}
.amb:hover{transform:translateY(-4px);box-shadow:0 16px 44px -20px rgba(12,27,51,.42);border-color:#c3d2e6}
.amb-n{
  font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--green-dk);margin-bottom:16px;
}
.amb h3{font-size:23px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px;line-height:1.12}
.amb p{font-size:15px;color:var(--grey);line-height:1.55}

/* ---------------------------------------------------------- PROGRAMME */
.prog-block{margin-top:64px}
.prog-head{display:flex;align-items:baseline;gap:18px;margin-bottom:26px;flex-wrap:wrap}
.prog-head h3{
  font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-.028em;text-transform:uppercase;
  font-style:italic;
}
.prog-head h3 span{color:var(--green-dk)}
.prog-head em{font-style:normal;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-2)}
.prog-line{height:1px;background:var(--line);flex:1;min-width:40px}
.init-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.init{
  background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:26px 24px;
  transition:.22s;display:flex;flex-direction:column;
}
.init:hover{border-color:var(--green);box-shadow:0 12px 34px -22px rgba(12,27,51,.5)}
.init .no{
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--green-dk);margin-bottom:12px;
}
.init h4{font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.2;margin-bottom:9px}
.init p{font-size:14.5px;color:var(--grey);line-height:1.55}

/* ---------------------------------------------------------- RECORD */
.rec-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:66px;align-items:start}
.rec-photo{border-radius:10px;overflow:hidden;position:relative}
.rec-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.tl{position:relative;padding-left:30px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.16)}
.tl-row{position:relative;padding-bottom:34px}
.tl-row:last-child{padding-bottom:0}
.tl-row::before{
  content:"";position:absolute;left:-30px;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px var(--navy);
}
.tl-y{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--green);margin-bottom:8px}
.tl-row h4{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:8px;line-height:1.2}
.tl-row p{font-size:15.5px;color:#c6d6ee;line-height:1.55}
.stat-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:60px;
  padding-top:44px;border-top:1px solid rgba(255,255,255,.14);
}
.stat b{display:block;font-size:46px;font-weight:800;color:var(--green);line-height:1;letter-spacing:-.04em}
.stat span{display:block;font-size:13.5px;color:#9fb3d1;margin-top:12px;line-height:1.45}

/* ---------------------------------------------------------- BANNER PLATE */
.plate{padding:0;background:var(--navy);line-height:0}
.plate img{width:100%;height:auto;display:block}

/* ---------------------------------------------------------- WHAT WAS BUILT */
.built{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.built figure{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:.24s;margin:0;
}
.built figure:hover{transform:translateY(-4px);box-shadow:0 18px 46px -24px rgba(12,27,51,.45);border-color:#c3d2e6}
.built img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 40%}
.built figcaption{padding:24px 24px 26px;flex:1;display:flex;flex-direction:column}
.built .yr{
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--green-dk);
  text-transform:uppercase;margin-bottom:11px;
}
.built h4{font-size:18px;font-weight:800;letter-spacing:-.018em;line-height:1.2;margin-bottom:10px}
.built p{font-size:14.5px;color:var(--grey);line-height:1.55}
.built .tall{grid-column:span 2}
.built .tall img{aspect-ratio:16/9}

/* ---------------------------------------------------------- ABOUT */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;margin-top:8px}
.port{position:relative;border-radius:10px;overflow:hidden;margin:0;outline:none}
.port img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 22%;transition:transform .6s}
.port:hover img,.port:focus img{transform:scale(1.04)}
.port figcaption{
  position:absolute;inset:auto 0 0 0;padding:64px 26px 26px;color:#fff;
  background:linear-gradient(180deg,rgba(4,30,66,0),rgba(4,30,66,.93));
  transform:translateY(calc(100% - 74px));transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.port:hover figcaption,.port:focus figcaption,.port:focus-within figcaption{transform:translateY(0)}
.port figcaption b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.port figcaption span{display:block;font-size:14.5px;line-height:1.55;color:#c6d6ee}
@media(hover:none){.port figcaption{transform:none}}
.roles{list-style:none}
.roles li{padding:17px 0;border-bottom:1px solid var(--line)}
.roles li:first-child{border-top:1px solid var(--line)}
.roles b{display:block;font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:-.012em}
.roles span{display:block;font-size:13.5px;color:var(--grey-2);margin-top:4px}
.sec-dark .roles li,.sec-dark .roles li:first-child{border-color:rgba(255,255,255,.14)}
.sec-dark .roles b{color:#fff}
.sec-dark .roles span{color:var(--blue)}

.sub{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-dk);margin:0 0 16px}
.edu{list-style:none;margin-bottom:34px}
.edu li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.45}
.edu li b{font-weight:700;color:var(--ink)}
.edu li span{display:block;font-size:13px;color:var(--grey-2);margin-top:3px}

.aside{
  margin-top:56px;padding-top:44px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:start;
}
.aside-pics{display:grid;gap:14px}
.aside-pics img{border-radius:9px;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 45%}
.aside p{font-size:15.5px;color:var(--grey);line-height:1.6;margin-bottom:13px}
.aside p:last-child{margin-bottom:0}
.aside strong{color:var(--ink);font-weight:700}
.personal{
  margin-top:34px;padding-top:24px;border-top:1px solid var(--line);
  font-size:15.5px;color:var(--grey);
}
.personal b{color:var(--ink);font-weight:700}

/* ---------------------------------------------------------- CONTACT */
.contact-in{text-align:center;max-width:760px}
.contact-in .deck{margin:0 auto 34px;max-width:52ch}
.contact-in .btn{font-size:16px;padding:17px 34px}
.social{list-style:none;display:flex;gap:14px;justify-content:center;margin-top:38px}
.social a{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:#c6d6ee;transition:.2s;
}
.social a:hover{background:var(--green);border-color:var(--green);color:var(--navy);transform:translateY(-2px)}
.social svg{width:20px;height:20px;fill:currentColor}
.chan{list-style:none;margin-top:30px}
.chan li{border-top:1px solid rgba(255,255,255,.14)}
.chan li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.chan a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 2px;
  text-decoration:none;color:#eaf1fb;font-size:16px;font-weight:600;transition:.2s;
}
.chan a:hover{color:var(--green);padding-left:8px}
.chan span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}

/* ---------------------------------------------------------- FOOTER */
footer{background:#040a15;color:#7a90b0;padding:56px 0 40px;font-size:13.5px}
.foot-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.09);
}
.foot-brand{font-size:15px;font-weight:800;color:#fff;letter-spacing:.02em}
.foot-brand span{color:var(--green)}
.foot-brand em{
  display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green);margin-top:7px;
}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{color:#9fb3d1;text-decoration:none;font-weight:600;transition:.2s}
.foot-links a:hover{color:var(--green)}
.disclaim{
  margin-top:26px;font-size:12px;line-height:1.65;color:#5f7799;max-width:82ch;
  display:flex;flex-wrap:wrap;gap:6px 18px;
}
.disclaim .cp{color:#465c78}

/* ---------------------------------------------------------- RESPONSIVE */
@media(max-width:1080px){
  .amb-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .built{grid-template-columns:repeat(2,1fr)}
  .built .tall{grid-column:span 2}
}
@media(max-width:900px){
  section{padding:70px 0}
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-photo{order:-1;aspect-ratio:4/5;background:var(--hero-bg)}
  .hero-photo picture{position:absolute;inset:0}
  .hero-puck{display:block;width:min(74vw,340px);margin:6px 0 -40px -16px}
  .hero-photo img{object-position:center 20%}
  .hero-photo::after{inset:auto 0 0 0;width:auto;height:120px;
    background:linear-gradient(0deg,var(--hero-bg),rgba(1,20,47,0))}
  .hero-copy{padding:6px 0 56px}
  .hero-copy>*{padding-left:20px;padding-right:20px}
  .hero-copy .who{margin-left:20px;margin-right:20px;padding-left:14px}
  .about-grid{gap:34px}
  .port img{aspect-ratio:4/3}
  .stmt-grid,.rec-grid,.contact-grid,.about-grid{grid-template-columns:1fr;gap:40px}
  .init-grid{grid-template-columns:1fr}
  .built{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .built .tall{grid-column:span 1}
  .built .tall img{aspect-ratio:4/3}
  .aside{grid-template-columns:1fr;gap:20px}
  .aside-pics{grid-template-columns:1fr 1fr;max-width:520px}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:30px}
  .rec-photo img{aspect-ratio:16/10}
  .hero{min-height:auto;padding-top:110px}
  .hero-in{padding-bottom:64px;padding-top:0}
  .count{gap:20px;margin-top:36px}
  .count b{font-size:28px}
}
@media(max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .nav-in{padding:0 20px}
  .amb-grid{grid-template-columns:1fr}
  .roles b{font-size:15.5px}
  .btn{padding:13px 20px;font-size:13px}
  .cta-row{gap:10px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Появление при прокрутке это только надстройка. Без JS (или если скрипт упал)
   контент виден сразу: класс .js ставится инлайном в <head> до отрисовки. */
.rv{transition:opacity .7s ease,transform .7s ease}
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{opacity:1;transform:none}

/* ---------------------------------------------------------- ASIA (пять лет) */
.asia-intro{display:grid;grid-template-columns:1.55fr 1fr;gap:56px;align-items:start;margin-top:44px}
.asia-intro p{margin-bottom:17px;color:var(--grey);font-size:16.5px;line-height:1.65}
.asia-intro p strong{color:var(--ink);font-weight:700}
.asia-nums{
  background:var(--navy);border-radius:12px;padding:30px 30px 34px;
  position:sticky;top:88px;
}
.asia-nums div + div{margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.asia-nums b{display:block;font-size:40px;font-weight:800;color:var(--green);line-height:1;letter-spacing:-.04em}
.asia-nums span{display:block;font-size:13.5px;color:#a8c0dd;margin-top:10px;line-height:1.45}

.asia-break{
  list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:46px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.asia-break li{background:var(--paper);padding:22px 20px}
.asia-break b{display:block;font-size:28px;font-weight:800;color:var(--blue-dk);line-height:1;letter-spacing:-.03em}
.asia-break span{display:block;font-size:13px;color:var(--grey);margin-top:9px;line-height:1.4}

.asia-feat{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center;
  margin-top:56px;padding-top:56px;border-top:1px solid var(--line);
}
.asia-feat:nth-of-type(even) .asia-feat-img{order:2}
.asia-feat-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.asia-feat .yr{
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-dk);margin-bottom:12px;
}
.asia-feat h3{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.028em;line-height:1.14;margin-bottom:16px}
.asia-feat p{font-size:15.5px;color:var(--grey);line-height:1.62;margin-bottom:13px}

.asia-log{margin-top:56px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.asia-log summary{
  cursor:pointer;padding:20px 24px;font-size:14px;font-weight:700;letter-spacing:.03em;
  color:var(--blue-dk);list-style:none;
}
.asia-log summary::-webkit-details-marker{display:none}
.asia-log summary::after{content:" +";font-weight:800}
.asia-log[open] summary::after{content:" –"}
.asia-log-in{padding:4px 24px 28px;border-top:1px solid var(--line)}
.asia-log h5{
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin:24px 0 10px;
}
.asia-log ul{list-style:none;margin:0}
.asia-log li{font-size:13.5px;color:var(--grey);line-height:1.6;padding:2px 0}
.asia-log li b{color:var(--ink);font-weight:600}

.asia-close{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center;
  margin-top:56px;padding-top:56px;border-top:1px solid var(--line);
}
.asia-close img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 35%;border-radius:10px}
.asia-close p{font-size:16.5px;color:var(--grey);line-height:1.65}
.asia-close p + p{margin-top:14px}
.asia-close strong{color:var(--ink);font-weight:700}

@media(max-width:900px){
  .asia-intro{grid-template-columns:1fr;gap:34px}
  .asia-nums{position:static}
  .asia-break{grid-template-columns:repeat(2,1fr)}
  .asia-feat,.asia-close{grid-template-columns:1fr;gap:26px;margin-top:44px;padding-top:44px}
  .asia-feat:nth-of-type(even) .asia-feat-img{order:0}
}
@media(max-width:560px){
  .asia-break{grid-template-columns:1fr}
}
:root[lang^="zh"] .asia-feat .yr,:root[lang^="zh"] .asia-log summary,
:root[lang^="zh"] .asia-log h5{letter-spacing:.06em}


/* ============================================================
   ПЕРВЫЙ ЭКРАН, версия 2: баннер как есть
   Кромка баннера залита ровным #001232, тем же цветом залита
   страница, поэтому у картинки не видно ни рамки, ни стыка.
   object-fit:contain + привязка к низу: при любом соотношении
   сторон пустое место оказывается сверху и по бокам, а там
   у баннера как раз ровный фон.
   ============================================================ */
.hero{
  background:var(--hero-bg);padding-top:66px;
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100svh;
}
/* Баннер не обрезаем и не расширяем: по бокам страница продолжается
   однопиксельной кромкой самого баннера, растянутой по ширине.
   Стык невозможен по построению, это те же пиксели. */
.hero-banner{flex:1 1 0;min-height:0;overflow:hidden;background:var(--hero-bg)}
/* Кромка баннера залита тем же цветом, что и --hero-bg, поэтому contain
   не даёт полей: картинка не обрезается ни при какой форме окна,
   а страница просто продолжает её ровным фоном. */
.hero-banner img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.hero-grid{display:none}

.hero-bar{
  flex:0 0 auto;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:20px 28px 34px;display:flex;align-items:flex-end;gap:32px;
  justify-content:space-between;flex-wrap:nowrap;
}
.hero-role{
  font-size:13.5px;line-height:1.45;color:#cfe0f5;flex:0 1 27ch;min-width:0;
  padding-left:14px;border-left:3px solid var(--green);
}
.hero-bar .cta-row{flex:none}
.hero-bar .cta-row{margin-top:0}
.hero-count{margin-left:auto;text-align:right}
.hero-count .count-lab{margin-top:0;margin-bottom:10px}
.hero-count .count{margin-top:0;justify-content:flex-end;gap:22px}

@media(max-width:1080px){
  .hero-bar{gap:24px}
  .hero-role{display:none}
}
@media(max-width:900px){
  .hero{display:block;min-height:0;padding-top:66px}
  .hero-banner{display:none}
  .hero-grid{display:grid;grid-template-columns:1fr}
  .hero-role{display:none}
  .hero-bar{
    display:block;max-width:none;padding:0 20px 52px;text-align:left;
  }
  .hero-bar .cta-row{margin-top:26px}
  .hero-count{margin-left:0;text-align:left}
  .hero-count .count{justify-content:flex-start}
  .hero-photo{order:0;aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--hero-bg)}
  .hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
  .hero-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:130px;
    background:linear-gradient(0deg,var(--hero-bg),rgba(0,18,50,0))}
  .hero-copy{display:block;padding:14px 0 0}
  .hero-copy>*{padding-left:20px;padding-right:20px}
  .hero-copy .who{margin:0 20px;padding-left:14px}
  .hero-puck{display:block;width:min(72vw,320px);margin:0 0 6px 6px}
}

/* ============================================================
   ПРАВКИ ВТОРОГО КРУГА
   ============================================================ */

/* Азия, продолжение раздела «Результат», а не отдельная секция */
.sec-cont{padding-top:78px}
.sub-h2{
  font-size:clamp(24px,3.2vw,38px);line-height:1.08;font-weight:800;
  letter-spacing:-.028em;margin-bottom:20px;color:var(--ink);
}
.sub-h2 em{color:var(--green-dk);font-style:normal}

/* Выключка по формату. Переносов нет: дефис рвал слова.
   Ширина колонок и исключения — в блоке ВЫКЛЮЧКА ниже. */
.letter p,.asia-intro p,.asia-feat p,.asia-close p,
.init p,.abt-note p,.aside p{
  text-align:justify;hyphens:none;-webkit-hyphens:none;text-wrap:pretty;
}
.letter .open,.letter .pull,.letter .lead-in,.lockup p{text-align:left;hyphens:manual}
:root[lang^="zh"] .letter p,:root[lang^="zh"] .asia-intro p,
:root[lang^="zh"] .asia-feat p,:root[lang^="zh"] .asia-close p,
:root[lang^="zh"] .init p,:root[lang^="zh"] .built figcaption p,
:root[lang^="zh"] .aside p{hyphens:none;text-align:justify}
@media(max-width:560px){
  .letter p,.asia-intro p,.asia-feat p,.asia-close p,
  .init p,.built figcaption p,.aside p{text-align:left}
}

/* Письмо: колонка по центру, подпись от руки */
#vision .wrap{text-align:center}
#vision .kicker,#vision h2,#vision .rule{margin-left:auto;margin-right:auto}
#vision .rule{margin-bottom:30px}
.letter{max-width:70ch;margin:0 auto;text-align:left}
.sig-hand{text-align:left}
.sig-hand img{width:min(320px,66%);height:auto;margin:0 0 6px -8px;opacity:.96}
.lockup{text-align:center}

/* Двенадцать приоритетов: у каждой цели свой оттенок, чтобы полотно
   не читалось монотонно сверху вниз */
.prog-block{--accent:var(--blue-dk)}
.prog-block:nth-of-type(2){--accent:#0f7fae}
.prog-block:nth-of-type(3){--accent:#3f9e57}
.prog-block:nth-of-type(4){--accent:var(--green-dk)}
.prog-block .prog-line{background:linear-gradient(90deg,var(--accent),rgba(0,0,0,0))}
.init{border-top:3px solid var(--accent)}
.init .no{color:var(--accent)}
.init h4{color:var(--ink)}

/* Азия: цифры крупнее и заметнее */
.asia-nums b{font-size:clamp(44px,5vw,58px)}
.asia-nums span{font-size:14px}
.asia-break b{font-size:clamp(30px,3.4vw,38px)}
.asia-break span{font-size:13.5px}
.asia-break li{padding:26px 22px}

/* Подпись под письмом на телефоне поменьше */
@media(max-width:560px){.sig-hand img{width:82%}}

/* ============================================================
   ВХОД НА САЙТ
   Первый экран собирается: баннер проявляется и чуть приближается,
   зелёная линия проходит под навигацией, полоса снизу поднимается,
   счётчик докручивается до своего значения. Один раз за сессию,
   и никогда при prefers-reduced-motion.
   ============================================================ */
.js.intro .hero-banner img{
  opacity:0;transform:scale(1.045);
  animation:heroIn 1150ms cubic-bezier(.16,.84,.3,1) 90ms forwards;
}
.js.intro-done .hero-banner img{opacity:1;transform:none}
@keyframes heroIn{to{opacity:1;transform:scale(1)}}

.js.intro .hero-bar>*{opacity:0;transform:translateY(16px);
  animation:barIn 700ms cubic-bezier(.16,.84,.3,1) forwards}
.js.intro .hero-bar>*:nth-child(1){animation-delay:640ms}
.js.intro .hero-bar>*:nth-child(2){animation-delay:740ms}
.js.intro .hero-bar>*:nth-child(3){animation-delay:840ms}
@keyframes barIn{to{opacity:1;transform:none}}

.sweep{
  position:fixed;left:0;top:66px;height:2px;width:0;z-index:99;pointer-events:none;
  background:linear-gradient(90deg,rgba(141,199,61,0),var(--green),var(--blue),rgba(142,196,240,0));
}
.js.intro .sweep{animation:sweep 1250ms cubic-bezier(.5,0,.2,1) 60ms forwards}
@keyframes sweep{0%{width:0;opacity:1}70%{width:100%;opacity:1}100%{width:100%;opacity:0}}

@media(prefers-reduced-motion:reduce){
  .js.intro .hero-banner img,.js.intro .hero-bar>*{animation:none;opacity:1;transform:none}
  .sweep{display:none}
}


/* Обращение читается длинно, поэтому помогаем глазу:
   крупнее кегль, свободнее интерлиньяж, буквица в начале и
   тонкие разделители в духе разметки площадки вместо картинок. */
.letter p{font-size:17.5px;line-height:1.78;margin-bottom:22px}

.rink-rule{margin:38px auto 34px;width:min(240px,62%)}
.rink-rule svg{width:100%;height:auto;display:block;overflow:visible}
.rink-rule line{stroke:rgba(142,196,240,.34);stroke-width:1.4}
.rink-rule circle{fill:none;stroke:rgba(142,196,240,.5);stroke-width:1.4}
.rink-rule .dot{fill:var(--green);stroke:none}


/* Шапка: рядом с лок-апом имя и статус, чтобы было понятно, чей это сайт */
.brand{display:flex;align-items:center;gap:14px;line-height:1.05}
.brand-mark{font-weight:800;font-size:16px;letter-spacing:.02em;white-space:nowrap}
.brand-who{
  display:flex;flex-direction:column;gap:2px;padding-left:14px;
  border-left:1px solid rgba(255,255,255,.22);white-space:nowrap;
}
.brand-who b{font-size:13px;font-weight:700;color:#fff;letter-spacing:.01em}
.brand-who i{
  font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);
}
@media(max-width:1500px){
  .nav-links{gap:17px}
  .nav-links a{font-size:13px}
  .nav-in{gap:20px}
}
@media(max-width:1180px){.brand-who{display:none}}
:root[lang^="zh"] .brand-who i{letter-spacing:.05em}

/* Обращение: первый абзац крупнее, дальше обычный кегль.
   Так текст входит мягче и не выглядит сплошной стеной. */
.letter .lede{
  font-size:22px;line-height:1.55;color:#eaf3ff;font-weight:500;
  text-align:left;margin-bottom:26px;
}
.letter .lead-in{margin-top:6px}

/* ============================================================
   ПРАВКИ ТРЕТЬЕГО КРУГА
   ============================================================ */

/* Фотография в шапке каждой из четырёх целей: полотно из двенадцати
   карточек перестаёт читаться как сплошной текст. */
.prog-pic{margin:0 0 26px;position:relative;border-radius:11px;overflow:hidden}
.prog-pic img{width:100%;aspect-ratio:21/6;object-fit:cover;display:block}
.prog-pic figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 22px 14px;
  font-size:13.5px;font-weight:700;letter-spacing:.02em;color:#fff;
  background:linear-gradient(0deg,rgba(0,18,50,.86),rgba(0,18,50,0));
}
.prog-block + .prog-block{margin-top:58px}
@media(max-width:700px){.prog-pic img{aspect-ratio:16/7}}

/* Приоритеты: воздуха больше, текст короче, шрифт чуть крупнее */
.init{padding:24px 22px 26px}
.init p{font-size:15px;line-height:1.62}
.init h4{margin-bottom:9px}

/* Манифест отдельным документом */
.man-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.man-in .deck{max-width:40ch;margin-bottom:26px}
.man-cover img{
  width:100%;border-radius:12px;box-shadow:0 30px 60px -34px rgba(4,30,66,.55);
}
.btn-o{border-color:var(--blue-dk);color:var(--blue-dk)}
.btn-o:hover{background:var(--blue-dk);color:#fff}
@media(max-width:900px){
  .man-in{grid-template-columns:1fr;gap:30px}
  .man-cover{order:-1}
}

/* Триатлон: колонка текста выровнена по фотографиям */
.aside{grid-template-columns:300px 1fr;gap:40px;align-items:stretch}
.aside-pics{grid-template-rows:1fr 1fr}
.aside-pics img{height:100%;aspect-ratio:auto;min-height:130px}
.aside-text{display:flex;flex-direction:column;justify-content:center}
@media(max-width:900px){
  .aside{grid-template-columns:1fr}
  .aside-pics{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .aside-pics img{aspect-ratio:4/3;height:auto}
}

/* ============================================================
   ЧЕТВЁРТЫЙ КРУГ: плотность и графика
   ============================================================ */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* --- Обращение: читается блоками, а не одной лентой --- */
.letter{max-width:1000px}
.letter p{font-size:16.5px;line-height:1.7;margin-bottom:16px}
.letter .lede{
  font-size:clamp(21px,2.5vw,27px);line-height:1.42;font-weight:600;color:#f2f8ff;
  max-width:26ch;margin:0 auto 30px;text-align:center;letter-spacing:-.01em;
}
/* середина и финал идут в две колонки: свиток вдвое короче */
.letter-cols{columns:2;column-gap:52px;margin-bottom:6px}
.letter-cols p{break-inside:avoid;margin-bottom:15px}
.letter-cols p:first-child{margin-top:0}
.letter .pull{
  columns:auto;max-width:none;margin:8px auto 10px;text-align:center;
  border:0;padding:0 0 0 0;font-size:clamp(22px,2.7vw,31px);line-height:1.32;
  position:relative;
}
.letter .pull::before,.letter .pull::after{
  content:"";display:block;width:54px;height:2px;margin:0 auto;
  background:linear-gradient(90deg,var(--blue),var(--green));
}
.letter .pull::before{margin-bottom:22px}
.letter .pull::after{margin-top:22px}
.letter .lead-in{text-align:center;color:#fff;font-size:15px;letter-spacing:.02em;margin-bottom:18px}
.letter .found{
  text-align:center;font-size:19px;color:#fff;max-width:30ch;margin:6px auto 26px;
}
.letter .found strong{font-weight:800}
.letter .open{text-align:center;margin-bottom:22px}

/* четыре цели плиткой 2×2 */
.amb-2x2{
  grid-template-columns:1fr 1fr;background:rgba(255,255,255,.09);
  border-left:0;border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;
}
.amb-2x2 li{padding:20px 22px 22px;position:relative}
.amb-2x2 li::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);
}
.amb-2x2 span{font-size:15px}

/* подпись: чернила поверх строки, слегка от руки */
.sig-hand{
  margin-top:26px;padding-top:0;border-top:0;position:relative;text-align:center;
}
.sig-hand img{
  width:min(320px,64%);margin:0 auto -14px;opacity:.97;
  transform:rotate(-2.2deg);filter:drop-shadow(0 1px 0 rgba(255,255,255,.16));
}
.sig-hand b{font-size:17px;letter-spacing:.01em}
.sig-hand span{letter-spacing:.14em}

@media(max-width:1000px){
  .letter{max-width:70ch}
  .letter-cols{columns:1}
  .amb-2x2{grid-template-columns:1fr}
}

/* --- Приоритеты: иконка вместо фотографии --- */
.init{position:relative;padding-top:26px}
.init-ico{
  width:26px;height:26px;display:block;margin-bottom:12px;
  fill:none;stroke:var(--accent);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.init:hover .init-ico{stroke:var(--ink)}
.prog-block + .prog-block{margin-top:52px}
.prog-head{align-items:center}

/* --- Азия: текст в две колонки, цифры широкой полосой --- */
.asia-intro{display:block;margin-top:40px}
.asia-copy{columns:2;column-gap:52px;margin-bottom:44px}
.asia-copy p{break-inside:avoid;margin-bottom:15px;font-size:16px;line-height:1.68}
.asia-copy p:first-child{margin-top:0}
.asia-copy p:last-child{
  columns:auto;break-before:column;background:var(--paper);
  border-left:3px solid var(--green);padding:16px 20px;color:var(--ink);
}
.asia-nums{
  position:static;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.16);padding:0;border-radius:12px;overflow:hidden;
}
.asia-nums div{background:var(--navy);padding:30px 26px 32px;margin:0;border:0}
.asia-nums div + div{margin-top:0;padding-top:30px;border-top:0}
.asia-nums b{font-size:clamp(46px,5.4vw,64px)}
.asia-nums span{font-size:13.5px;max-width:24ch}
@media(max-width:900px){
  .asia-copy{columns:1}
  .asia-nums{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.asia-nums{grid-template-columns:1fr}}

/* --- Триатлон: одна крупная вертикальная и одна широкая --- */
.aside{grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:64px;padding-top:52px}
.aside-pics{
  display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;
  gap:12px;margin:0;position:relative;
}
.aside-pics .pic-tall{grid-row:1 / span 2;aspect-ratio:3/4;height:100%;border-radius:11px}
.aside-pics .pic-wide{grid-column:2;grid-row:1;aspect-ratio:4/3;border-radius:11px}
.aside-pics figcaption{
  grid-column:2;grid-row:2;align-self:end;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-2);line-height:1.5;
}
@media(max-width:900px){
  .aside{grid-template-columns:1fr;gap:26px;align-items:start}
  .aside-pics{grid-template-columns:1.25fr 1fr}
}
:root[lang^="zh"] .aside-pics figcaption{letter-spacing:.05em}

/* ============================================================
   ПЯТЫЙ КРУГ
   ============================================================ */

/* Четыре цели в письме: имена, номера, ничего лишнего */
.amb-chips{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin:6px 0 30px;counter-reset:none;
}
.amb-chips li{
  position:relative;padding:22px 18px 20px;border-radius:10px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  text-align:center;transition:.24s;
}
.amb-chips li::after{
  content:"";position:absolute;left:22%;right:22%;bottom:0;height:2px;border-radius:2px;
  background:var(--green);opacity:.85;
}
.amb-chips li:nth-child(1)::after{background:var(--blue)}
.amb-chips li:nth-child(2)::after{background:#4fb3d9}
.amb-chips li:nth-child(3)::after{background:#7fce7a}
.amb-chips .n{
  display:block;font-size:11px;font-weight:800;letter-spacing:.2em;
  color:var(--grey-2);margin-bottom:8px;
}
.amb-chips b{
  display:block;font-size:clamp(15px,1.5vw,18px);font-weight:800;color:#fff;
  letter-spacing:-.012em;line-height:1.2;
}
@media(max-width:760px){.amb-chips{grid-template-columns:1fr 1fr}}

/* Подпись компактнее и спокойнее */
/* Подпись: чернила и набранное имя не должны наезжать друг на друга */
.sig-hand{display:flex;flex-direction:column;align-items:center;gap:0}
.sig-hand img{
  width:min(196px,42%);height:auto;margin:0 0 6px;
  transform:rotate(-1.4deg);opacity:.9;
}
.sig-hand b{font-size:15.5px;font-weight:700;letter-spacing:.01em}
.sig-hand span{font-size:10px;letter-spacing:.18em;margin-top:2px}

/* ============================================================
   ОБРАЩЕНИЕ: разворот с опорной колонкой
   ============================================================ */
#vision .wrap{text-align:left}
.msg{display:grid;grid-template-columns:minmax(260px,.72fr) 1.28fr;gap:56px;align-items:start}
.msg-rail{position:sticky;top:96px}
.msg-rail h2{margin-bottom:18px}
.msg-rail .rule{margin-bottom:26px}
.msg-pull{
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.7vw,23px);
  line-height:1.44;color:var(--blue);margin:0 0 30px;
  padding-left:20px;border-left:2px solid rgba(142,196,240,.45);
}
.msg-rail .sig-hand{align-items:flex-start;text-align:left;margin-top:34px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.msg-rail .sig-hand img{margin-left:-6px;width:min(200px,72%)}

.msg-body{max-width:none}
.msg-body .open{font-family:var(--serif);font-style:italic;font-size:20px;color:#dbe9fb;
  margin-bottom:16px;text-align:left}
.msg-body .lede{
  font-size:clamp(21px,2vw,26px);line-height:1.44;font-weight:600;color:#f2f8ff;
  letter-spacing:-.012em;margin-bottom:30px;max-width:30ch;
}
.msg-cols{columns:2;column-gap:44px;margin-bottom:8px}
.msg-cols p{
  break-inside:avoid;margin-bottom:15px;font-size:15.8px;line-height:1.72;
  color:#cfe0f5;text-align:left;
}
.msg-body .found{
  columns:auto;margin:22px 0 26px;padding:20px 24px;border-radius:10px;
  background:rgba(255,255,255,.06);border-left:3px solid var(--green);
  font-size:17px;color:#fff;text-align:left;
}
.msg-body .lead-in{
  font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);margin:0 0 14px;text-align:left;
}
.msg-body > p[data-i18n="vision.l13"],
.msg-body > p[data-i18n="vision.l14"]{
  font-size:16px;line-height:1.72;color:#cfe0f5;margin-bottom:15px;max-width:64ch;
}
.msg-body .amb-chips{margin:0 0 30px}

@media(max-width:1040px){
  .msg{grid-template-columns:1fr;gap:34px}
  .msg-rail{position:static}
  .msg-cols{columns:1}
}
@media(max-width:560px){
  .msg-cols p,.msg-body > p{text-align:left}
}

/* ============================================================
   ЧЕТЫРЕ ЦЕЛИ: ступени, а не одинаковые карточки.
   Каждая опирается на предыдущую, поэтому идут лесенкой
   и соединены линией.
   ============================================================ */
.ladder{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px;position:relative;
}
.ladder::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--blue-dk),#0f7fae 34%,#3f9e57 68%,var(--green));
}
.step{padding:34px 30px 34px 0;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0;padding-right:0}
.step + .step{padding-left:30px}
.step::before{
  content:"";position:absolute;left:0;top:-7px;width:13px;height:13px;border-radius:50%;
  background:#fff;border:3px solid var(--accent-s);
}
.step + .step::before{left:30px}
.step-1{--accent-s:var(--blue-dk)} .step-2{--accent-s:#0f7fae}
.step-3{--accent-s:#3f9e57}       .step-4{--accent-s:var(--green-dk)}
.step-n{
  display:block;font-size:12px;font-weight:800;letter-spacing:.2em;
  color:var(--accent-s);margin-bottom:16px;
}
.step h3{
  font-size:clamp(19px,1.9vw,23px);font-weight:800;letter-spacing:-.022em;
  line-height:1.16;margin-bottom:12px;color:var(--ink);
}
.step p{font-size:14.5px;line-height:1.6;color:var(--grey);margin-bottom:18px}
.step-tag{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-s);
  padding:6px 12px;border:1px solid currentColor;border-radius:100px;
}
@media(max-width:900px){
  .ladder{grid-template-columns:1fr 1fr}
  .ladder::before{display:none}
  .step{border-right:0;border-top:3px solid var(--accent-s);padding:26px 20px 30px 0}
  .step + .step{padding-left:0}
  .step::before,.step + .step::before{display:none}
}
@media(max-width:560px){.ladder{grid-template-columns:1fr}}

/* ============================================================
   ПРОГРАММА: цель слева, её три приоритета строками справа
   ============================================================ */
#program{background:var(--paper)}
.prio-block{
  display:grid;grid-template-columns:minmax(220px,.62fr) 1.38fr;gap:52px;
  padding:52px 0;border-top:1px solid var(--line);align-items:start;
}
.prio-block:first-of-type{margin-top:46px}
.prio-head{position:sticky;top:96px}
.prio-head .pb-n{
  display:block;font-size:12px;font-weight:800;letter-spacing:.22em;
  color:var(--accent-p);margin-bottom:14px;
}
.prio-head h3{
  font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;
  line-height:1.08;color:var(--ink);margin-bottom:12px;
}
.prio-head h3 span{color:var(--accent-p)}
.prio-head em{
  font-style:normal;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-2);
}
.pb-1{--accent-p:var(--blue-dk)} .pb-2{--accent-p:#0f7fae}
.pb-3{--accent-p:#3f9e57}        .pb-4{--accent-p:var(--green-dk)}

.prio-list{list-style:none;display:grid;gap:0}
.prio-list li{
  display:grid;grid-template-columns:44px 1fr;gap:20px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.prio-list li:first-child{padding-top:0}
.prio-list li:last-child{border-bottom:0;padding-bottom:0}
.prio-ico{
  width:34px;height:34px;margin-top:2px;fill:none;stroke:var(--accent-p);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.prio-n{
  font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey-2);margin-bottom:5px;
}
.prio-list h4{
  font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
  color:var(--ink);margin-bottom:7px;
}
.prio-list li > div > p:last-child{
  font-size:15px;line-height:1.62;color:var(--grey);max-width:56ch;text-align:left;
}
@media(max-width:900px){
  .prio-block{grid-template-columns:1fr;gap:26px;padding:38px 0}
  .prio-head{position:static}
  .prio-list li{grid-template-columns:34px 1fr;gap:16px}
  .prio-ico{width:28px;height:28px}
}

/* ============================================================
   АЗИЯ: сначала цифры, потом объяснение, потом фотографии
   ============================================================ */
.asia-lede{
  font-size:clamp(20px,2.3vw,27px);line-height:1.44;font-weight:600;color:var(--ink);
  letter-spacing:-.015em;max-width:38ch;margin:38px 0 40px;
}
.asia-nums{margin-bottom:1px}
.asia-break{margin-top:0;border-radius:0 0 12px 12px;border-top:0}
.asia-nums{border-radius:12px 12px 0 0}
.asia-copy{columns:2;column-gap:56px;margin:52px 0 0}
.asia-copy p{break-inside:avoid;margin-bottom:15px;font-size:15.5px;line-height:1.7;
  color:var(--grey);text-align:left}
.asia-copy p:last-child{
  columns:auto;background:var(--paper);border-left:3px solid var(--green);
  padding:16px 20px;color:var(--ink);
}
.asia-turn{
  display:flex;align-items:center;gap:22px;margin:56px 0 4px;
}
.asia-turn .line{flex:1;height:1px;background:var(--line)}
.asia-turn p{
  font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;
  color:var(--green-dk);white-space:nowrap;
}
@media(max-width:900px){.asia-copy{columns:1}}

/* ============================================================
   ЗА ПРЕДЕЛАМИ ХОККЕЯ: две одинаковые фотографии, текст рядом
   ============================================================ */
.aside{
  display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
  margin-top:64px;padding-top:52px;border-top:1px solid var(--line);
}
.aside-pics{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
.aside-pics img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:11px;
  object-position:center 42%;
}
.aside-pics figcaption{
  grid-column:1 / -1;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-2);margin-top:2px;
}
.aside-text .sub{margin-bottom:14px}
.aside-text p:last-child{font-size:15.5px;line-height:1.68;text-align:left}
@media(max-width:900px){
  .aside{grid-template-columns:1fr;gap:28px}
  .aside-pics{order:-1}
}

/* --- Обращение: одна лента, ровный ритм абзацев --- */
.msg-body > p[data-i18n^="vision.l"]{
  font-size:16.5px;line-height:1.74;color:#cfe0f5;margin-bottom:17px;
  max-width:62ch;text-align:left;
}
.msg-body .open{font-size:19px;margin-bottom:14px}
.msg-body .lede{font-size:clamp(21px,2vw,26px);line-height:1.44;max-width:30ch;margin-bottom:26px}
.msg-body .found{max-width:62ch;font-size:17px}
.msg-body .lead-in{font-size:12px;margin:30px 0 14px}
.msg-body .amb-chips{max-width:none}

/* ============================================================
   ЗА ПРЕДЕЛАМИ ХОККЕЯ: один шрифт, один размер, ровный ритм.
   Смешение антиквы и гротеска в коротком блоке выглядело пёстро.
   ============================================================ */
.aside-text p,
.aside-text p:nth-of-type(2),
.aside-text p:last-child{
  font-family:var(--sans);font-style:normal;
  font-size:16px;line-height:1.72;color:var(--grey);
  text-align:left;margin-bottom:15px;max-width:52ch;
}
.aside-text p:last-child{margin-bottom:0}
.aside-text strong{color:var(--ink);font-weight:700}
.aside-text .sub{
  font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green-dk);margin-bottom:16px;
}

/* ============================================================
   АЗИЯ: текст спокойнее, ширина ограничена, воздуха больше
   ============================================================ */
.asia-copy{columns:auto;max-width:none;display:grid;grid-template-columns:1fr 1fr;
  gap:14px 56px;margin:56px 0 0;align-items:start}
.asia-copy p{
  margin:0;font-size:16px;line-height:1.74;color:var(--grey);text-align:left;max-width:52ch;
}
.asia-copy p:nth-child(5){grid-column:1 / -1;max-width:none}
.asia-copy p:last-child{
  grid-column:1 / -1;max-width:none;background:var(--paper);
  border-left:3px solid var(--green);padding:20px 24px;color:var(--ink);font-size:17px;
  margin-top:10px;
}
.asia-nums span{font-size:13px;line-height:1.5}
.asia-break span{font-size:13px;line-height:1.45}
@media(max-width:900px){.asia-copy{grid-template-columns:1fr;gap:15px}}

/* ============================================================
   АЗИЯ, версия «отчёт»: главное число и из чего оно сложилось.
   Полоса это те же 68 мероприятий, разбитые по типам, ширина
   сегмента пропорциональна количеству.
   ============================================================ */
.asia-hero{
  display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;
  margin:44px 0 0;padding:44px;border-radius:14px;background:var(--navy);color:#fff;
}
.asia-hero .asia-lede{
  font-size:clamp(20px,2.2vw,26px);line-height:1.44;color:#fff;font-weight:600;
  margin:0;max-width:24ch;letter-spacing:-.015em;
}
.big-n{
  font-size:clamp(72px,9vw,116px);font-weight:800;line-height:.86;color:var(--green);
  letter-spacing:-.05em;
}
.big-c{font-size:13.5px;color:#a8c0dd;margin:12px 0 26px;max-width:40ch;line-height:1.5}
/* полоса показывает пропорцию, подписи идут отдельной сеткой:
   в узкий сегмент подпись не помещается и превращается в кашу */
.bar{display:flex;gap:3px;height:14px;margin-bottom:20px}
.bar i{display:block;border-radius:3px;background:var(--blue)}
.bar i:nth-child(2){background:#4fb3d9} .bar i:nth-child(3){background:#7fce7a}
.bar i:nth-child(4){background:var(--green)} .bar i:nth-child(5){background:#c8e08a}
.bar-key{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.bar-key span{display:block;border-top:2px solid rgba(255,255,255,.16);padding-top:12px}
.bar-key span:nth-child(1){border-color:var(--blue)}
.bar-key span:nth-child(2){border-color:#4fb3d9}
.bar-key span:nth-child(3){border-color:#7fce7a}
.bar-key span:nth-child(4){border-color:var(--green)}
.bar-key span:nth-child(5){border-color:#c8e08a}
.bar-key b{display:block;font-size:24px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.03em}
.bar-key em{display:block;font-style:normal;font-size:11.5px;line-height:1.4;color:#8fa9c9;margin-top:7px}
.asia-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:2px;
  background:var(--line);border:1px solid var(--line);border-radius:0 0 14px 14px;overflow:hidden;
}
.asia-facts div{background:var(--paper);padding:26px 24px 28px}
.asia-facts b{
  display:block;font-size:clamp(34px,4vw,46px);font-weight:800;color:var(--blue-dk);
  line-height:1;letter-spacing:-.04em;
}
.asia-facts span{display:block;font-size:13px;color:var(--grey);margin-top:10px;line-height:1.5}
.asia-hero{border-radius:14px 14px 0 0}

@media(max-width:900px){
  .asia-hero{grid-template-columns:1fr;gap:30px;padding:32px 26px}
  .asia-facts{grid-template-columns:1fr}
  .bar-key{grid-template-columns:repeat(2,1fr);gap:14px}
}

/* ============================================================
   ОБРАЩЕНИЕ: открытое письмо. Одна колонка удобной ширины,
   ровный ритм абзацев, вынесенная строка и подпись в конце.
   Никаких колонок и врезок: они мешали читать.
   ============================================================ */
#vision .wrap{text-align:left}
.letter-head{max-width:820px;margin:0 auto 46px;text-align:center}
.letter-head h2{margin-bottom:20px}
.letter-head .rule{margin:0 auto}

.letter{
  max-width:680px;margin:0 auto;display:block;
}
.letter > p{
  font-size:17px;line-height:1.78;color:#cfe0f5;margin-bottom:20px;text-align:left;
}
.letter .salut{
  font-family:var(--serif);font-style:italic;font-size:19px;color:#dbe9fb;margin-bottom:22px;
}
.letter .found{
  font-size:18px;color:#fff;margin:30px 0 32px;padding:20px 24px;border-radius:10px;
  background:rgba(255,255,255,.06);border-left:3px solid var(--green);
}
.letter-q{
  font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,26px);
  line-height:1.42;color:#fff;margin:34px 0 38px;padding-left:26px;
  border-left:2px solid var(--green);
}
.letter .amb-chips{margin:14px 0 34px;grid-template-columns:repeat(4,1fr)}
.letter .amb-chips li{padding:18px 14px 16px}
.letter .amb-chips b{font-size:15px}

.letter-sign{
  margin-top:44px;padding-top:30px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-direction:column;align-items:flex-start;
}
.letter-sign img{width:min(200px,52%);margin:0 0 8px -6px;opacity:.9;transform:rotate(-1.4deg)}
.letter-sign b{font-size:16px;font-weight:700;color:#fff}
.letter-sign span{
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);margin-top:3px;
}
@media(max-width:700px){
  .letter .amb-chips{grid-template-columns:1fr 1fr}
  .letter > p{font-size:16.5px}
}
:root[lang^="zh"] .letter .salut,:root[lang^="zh"] .letter-q{font-family:var(--sans);font-style:normal}

/* четыре цели внутри письма: одна строка, не четыре плитки.
   Раскрытие идёт в следующем разделе, дублировать его незачем */
.amb-inline{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:6px 0 30px;padding:16px 20px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
}
.amb-inline b{font-size:15.5px;font-weight:800;color:#fff;letter-spacing:-.01em}
.amb-inline i{font-style:normal;color:var(--green);opacity:.8}

/* в письме выключка по левому краю, переносы не нужны */
.letter > p,.letter .salut,.letter .found,.letter-q{hyphens:none;-webkit-hyphens:none}

/* ============================================================
   ОБРАЩЕНИЕ, чистая версия: текст и подпись.
   ============================================================ */
.letter .found,.letter-q,.letter .amb-chips,.letter .amb-inline{all:unset}
.letter > p{
  font-size:17px;line-height:1.8;color:#cfe0f5;margin:0 0 22px;
  text-align:left;hyphens:none;
}
.letter > p strong{color:#fff;font-weight:700}
.letter .salut{
  font-family:var(--serif);font-style:italic;font-size:19px;color:#dbe9fb;margin-bottom:24px;
}
.letter .amb-line{color:#fff}
.letter .amb-line b{font-weight:700;color:#fff}
.letter-sign{
  display:block;margin:44px 0 0;padding-top:0;border-top:0;
}
.letter-sign img{
  width:190px;height:auto;display:block;margin:0 0 8px -6px;opacity:.9;
}
.letter-sign b{display:block;font-size:16px;font-weight:700;color:#fff;letter-spacing:.01em}
.letter-sign span{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);margin-top:4px;
}
:root[lang^="zh"] .letter .salut{font-family:var(--sans);font-style:normal}

/* ============================================================
   ОБРАЩЕНИЕ: метки на полях.
   Текст остаётся непрерывным, но у читателя появляются
   ориентиры, по которым письмо можно просмотреть за пять секунд.
   ============================================================ */
.letter{max-width:860px}
.lgroup{
  display:grid;grid-template-columns:150px 1fr;gap:34px;align-items:start;
  padding:26px 0;border-top:1px solid rgba(255,255,255,.1);
}
.lgroup:first-of-type{border-top:0;padding-top:6px}
.lmark{
  position:sticky;top:96px;margin:0;
  font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);line-height:1.5;
}
.ltext > p{
  font-size:17px;line-height:1.8;color:#cfe0f5;margin:0 0 20px;
  text-align:left;hyphens:none;max-width:64ch;
}
.ltext > p:last-child{margin-bottom:0}
.ltext > p strong{color:#fff;font-weight:700}
.letter .amb-line{
  margin:4px 0 20px;color:#fff;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
}
.letter .amb-line b{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.01em}
.letter .amb-line i{font-style:normal;color:var(--green);opacity:.75}
.letter-sign{margin-top:40px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
@media(max-width:820px){
  .lgroup{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .lmark{position:static}
  .ltext > p{max-width:none}
}
:root[lang^="zh"] .lmark{letter-spacing:.08em}
.lmark{text-align:left !important;text-wrap:balance}

/* ============================================================
   ПРАВКИ ПО ЗАМЕЧАНИЯМ: видение и миссия, «Ambition 01»,
   подпись по колонке текста, новые числа Азии, благодарность.
   ============================================================ */

/* «Ambition 01» вместо голой цифры: это уже подпись, не число */
.step-n,.prio-head .pb-n{text-transform:uppercase}

/* ВИДЕНИЕ И МИССИЯ: концепт без них не читается, поэтому они
   стоят перед четырьмя целями, а не спрятаны в манифесте */
.vm{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:38px 0 8px;
}
.vm-card{
  padding:30px 32px 32px;border-radius:12px;background:#fff;
  border:1px solid var(--line);border-top:4px solid var(--blue-dk);
}
.vm-m{border-top-color:var(--green-dk)}
.vm-lab{
  font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue-dk);margin:0 0 12px;
}
.vm-m .vm-lab{color:var(--green-dk)}
.vm-txt{
  margin:0;font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.6;
  color:var(--ink);font-weight:500;letter-spacing:-.01em;
}
@media(max-width:820px){
  .vm{grid-template-columns:1fr;gap:16px;margin-top:30px}
  .vm-card{padding:24px 22px 26px}
}

/* «Dear friends» той же величины, что и обращение целиком:
   мелкая курсивная строчка выглядела припиской */
.letter .salut{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(26px,2.8vw,34px);line-height:1.25;color:#fff;
  margin:0 0 30px;letter-spacing:-.015em;
}

/* подпись: без разделительной линии, по левому краю колонки текста */
.letter-sign.sign-inline{
  margin-top:36px;padding-top:0;border-top:0;
  margin-left:184px;
}
@media(max-width:820px){.letter-sign.sign-inline{margin-left:0}}

/* пять чисел Азии: 349 · 65 · 505 · 12 · 17 */
.asia-facts.af5{grid-template-columns:repeat(5,1fr)}
.asia-facts.af5 div{padding:24px 20px 26px}
.asia-facts.af5 b{font-size:clamp(30px,3.2vw,40px)}
.asia-facts.af5 span{font-size:12.5px}
@media(max-width:1100px){.asia-facts.af5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.asia-facts.af5{grid-template-columns:1fr}}

/* строка про женскую программу стоит отдельно от прозы */
.asia-flag{
  margin:44px 0 0;padding:20px 24px;border-radius:10px;
  background:rgba(0,87,184,.06);border-left:3px solid var(--green-dk);
  font-size:16.5px;line-height:1.6;color:var(--ink);font-weight:600;
}

/* благодарность вместо групповой фотографии */
.thanks{
  margin-top:52px;padding-top:40px;border-top:1px solid var(--line);
  max-width:860px;
}
.thanks-lab{
  font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green-dk);margin:0 0 14px;
}
.thanks-lede{
  font-size:clamp(21px,2.3vw,27px);font-weight:700;letter-spacing:-.022em;
  line-height:1.24;color:var(--ink);margin:0 0 16px;
}
.thanks p:last-child{
  margin:0;font-size:16.5px;line-height:1.7;color:var(--grey);text-align:justify;
  hyphens:none;-webkit-hyphens:none;
}
@media(max-width:700px){.thanks p:last-child{text-align:left;hyphens:none}}

/* «Stay tuned» под анонсом манифеста */
.man-soon{
  margin:-6px 0 22px;font-size:11.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green-dk);
}

/* длинные вступления: 34ch превращают абзац в узкую колбасу */
#program .deck,#contact .deck{
  max-width:none;font-size:clamp(17px,1.6vw,19.5px);line-height:1.55;
}
#program .deck{columns:2;column-gap:56px;text-align:justify;hyphens:none}
#contact .deck{max-width:70ch;margin-inline:auto}
@media(max-width:820px){
  #program .deck{columns:auto;text-align:left;hyphens:none}
}

/* Азия: вводный текст стал абзацем, а не одной фразой,
   поэтому и кегль у него теперь абзацный */
.asia-hero{grid-template-columns:1.55fr .95fr;align-items:center}
.asia-hero .asia-lede{
  font-size:clamp(16px,1.45vw,18px);line-height:1.7;font-weight:400;
  color:#dbe9fb;max-width:62ch;letter-spacing:0;text-align:justify;hyphens:none;
}
.asia-hero-r{text-align:left}
.big-c{margin:12px 0 0;max-width:34ch}
@media(max-width:900px){
  .asia-hero{grid-template-columns:1fr}
  .asia-hero .asia-lede{text-align:left;hyphens:none;max-width:none}
}

/* ============================================================
   ВЫКЛЮЧКА ПО ФОРМАТУ, но без переносов.
   Дефисные переносы рвали слова («oppor-tunities»), поэтому
   hyphens:none везде. Выключка остаётся только там, где колонка
   достаточно широкая: на узкой колонке она даёт дыры между слов.
   Порог примерно 45 знаков в строке.
   ============================================================ */
.ltext > p,.asia-lede,.asia-copy p,.asia-feat p,.asia-close p,
.thanks p,.aside p,.aside-text p,.init p,.abt-note p,
#program .deck,#contact .deck,.role-note{
  text-align:justify;
  hyphens:none;-webkit-hyphens:none;
  text-wrap:pretty;
}
/* последняя строка центрованного блока не должна уезжать влево */
#contact .deck{text-align-last:center}

/* Узкие колонки и служебные строки выключке не подлежат:
   карточки «The deliverables» — примерно 310px, там дыры. */
.built figcaption p,.asia-log li,.log-math,.lmark,
.roles span,.edu span,.bar-key em,.asia-facts span,.big-c{
  text-align:left;hyphens:none;-webkit-hyphens:none;
}
.turn-note{text-align:center;hyphens:none;-webkit-hyphens:none}

/* На узком экране выключка вредна в любом блоке */
@media(max-width:820px){
  .ltext > p,.asia-lede,.asia-copy p,.asia-feat p,.asia-close p,
  .thanks p,.aside p,.aside-text p,.init p,.abt-note p,
  #program .deck,#contact .deck,.role-note,.turn-note{
    text-align:left;text-align-last:auto;
  }
}

/* «Ничего из перечисленного не в одиночку» — врез под заголовком блока */
.turn-note{
  max-width:74ch;margin:-6px auto 34px;font-size:16.5px;line-height:1.65;
  color:var(--ink);font-weight:600;text-align:center !important;
}
@media(max-width:700px){.turn-note{text-align:left !important;margin-bottom:26px}}

/* пояснения под должностями и под образованием */
.role-note{
  margin:18px 0 0;font-size:14.5px;line-height:1.68;color:var(--grey);
  padding-left:14px;border-left:2px solid var(--green);
}

/* ============================================================
   ПОЛНАЯ ЗАПИСЬ: раскрывающийся журнал активностей.
   Сводка-кнопка со счётчиком, внутри — карточки групп с иконкой
   и числом. Открывается и закрывается как раньше (details).
   ============================================================ */
.asia-log{
  margin-top:56px;border:1px solid var(--line);border-radius:14px;
  background:var(--paper);overflow:hidden;
}
.asia-log summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:22px 26px;font-size:14px;font-weight:700;color:var(--ink);
  letter-spacing:0;transition:background .18s ease;
}
.asia-log summary:hover{background:#eef3fa}
.asia-log summary::-webkit-details-marker,
.asia-log summary::marker{display:none;content:""}
.asia-log summary::after{content:none}
.log-sum-t{flex:1 1 auto;min-width:0}
.log-sum-n{
  flex:0 0 auto;font-size:12px;font-weight:800;letter-spacing:.06em;
  color:#fff;background:var(--blue-dk);border-radius:100px;padding:5px 12px;
}
.log-chev{
  flex:0 0 auto;width:11px;height:11px;border-right:2px solid var(--blue-dk);
  border-bottom:2px solid var(--blue-dk);transform:rotate(45deg);
  transition:transform .2s ease;margin:-4px 2px 0 0;
}
.asia-log[open] .log-chev{transform:rotate(225deg);margin:2px 2px 0 0}

.asia-log-in{
  padding:0 22px 22px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;
}
.log-math{
  grid-column:1/-1;margin:18px 0 4px;padding:14px 18px;border-radius:10px;
  background:#eaf1fb;border-left:3px solid var(--green);
  font-size:12.5px;line-height:1.6;color:var(--ink);font-weight:600;
}
.log-card{
  border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:16px 18px 14px;
}
.log-card.log-wide{grid-column:1/-1}
.log-card header{
  display:flex;align-items:center;gap:10px;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line);
}
.asia-log h5{
  flex:1 1 auto;min-width:0;margin:0;font-size:11px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--grey-2);line-height:1.4;
}
.log-chip{
  flex:0 0 auto;min-width:30px;text-align:center;font-size:13px;font-weight:800;
  color:var(--blue-dk);background:#eaf1fb;border-radius:100px;padding:3px 9px;
  letter-spacing:-.02em;
}
.asia-log ul{list-style:none;margin:0;padding:0}
.log-card.log-wide ul{columns:2;column-gap:34px}
.asia-log li{
  font-size:13px;color:var(--grey);line-height:1.55;padding:3px 0;
  break-inside:avoid;
}
.asia-log li b{color:var(--ink);font-weight:700}
@media(max-width:900px){
  .asia-log-in{grid-template-columns:1fr}
  .log-card.log-wide ul{columns:auto}
  .asia-log summary{padding:18px 20px;gap:12px}
}
/* старый текстовый маркер +/– заменён шевроном, гасим его и в [open] */
.asia-log summary::after,.asia-log[open] summary::after{content:none !important}

/* добиваем остатки автопереноса: специфичность прежних правил выше */
.asia-hero .asia-lede,.lmark,#asia .asia-lede{hyphens:none;-webkit-hyphens:none}

/* ============================================================
   АЗИЯ, личное заявление перед «The Deliverables».
   Абзац звучит иначе, чем операционный текст вокруг: это не отчёт,
   а признание. Поэтому и оформлен иначе — тёмная плашка во всю
   ширину, крупнее кегль, зелёный акцент сверху. Заодно снимается
   вид «осиротевшего» абзаца под двумя колонками.
   ============================================================ */
.asia-copy p.asia-said{
  grid-column:1 / -1;max-width:none;
  margin:30px 0 4px;padding:34px 40px 36px;border-radius:14px;
  background:var(--navy);color:#dbe9fb;
  font-size:clamp(16.5px,1.5vw,19px);line-height:1.62;
  text-align:justify;hyphens:none;-webkit-hyphens:none;
  position:relative;overflow:hidden;
}
/* зелёная черта сверху: тот же акцент, что у сводки ниже */
.asia-copy p.asia-said::before{
  content:"";position:absolute;left:0;top:0;height:4px;width:132px;
  background:linear-gradient(90deg,var(--blue) 0 46%,var(--green) 46%);
}
@media(max-width:900px){
  .asia-copy p.asia-said{padding:26px 24px 28px;text-align:left;margin-top:22px}
}

/* Превью новости 2:1. У баннера кромка залита фоном страницы и по краям
   есть запас, поэтому cover срезает только фон, а лок-ап цел. */

/* ============================================================
   НОВОСТИ: карточка-ссылка. Когда у поста задан link, main.js
   отдаёт <a class="news-card">, и кликается вся карточка,
   а не только строчка «Read more».
   ============================================================ */
a.news-card{text-decoration:none;color:inherit;cursor:pointer;display:flex;flex-direction:column}
a.news-card:focus-visible{outline:3px solid var(--green);outline-offset:3px}
a.news-card .news-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;
}
a.news-card .news-link::after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg);
  transition:transform .18s ease;
}
a.news-card:hover .news-link{color:var(--green-dk)}
a.news-card:hover .news-link::after{transform:rotate(45deg) translate(2px,-2px)}
a.news-card:hover h3{color:var(--blue-dk)}
a.news-card img{transition:transform .35s cubic-bezier(.16,.84,.3,1)}
a.news-card{overflow:hidden}
a.news-card:hover img{transform:scale(1.03)}
/* пост без ссылки не должен выглядеть кликабельным */
div.news-card{cursor:default}
div.news-card:hover{transform:none;box-shadow:0 10px 30px -18px rgba(12,27,51,.28)}

/* ============================================================
   Журнал без иконок: пиктограммы из программы к этим рубрикам
   не подходили по смыслу. Графику держат число, разрядка
   заголовка и тонкая цветная черта — тот же приём, что у
   разделителей разделов.
   ============================================================ */
.log-card{position:relative;padding-top:18px}
.log-card::before{
  content:"";position:absolute;left:18px;top:0;height:3px;width:44px;
  background:linear-gradient(90deg,var(--blue-dk) 0 46%,var(--green) 46%);
  border-radius:0 0 2px 2px;
}
.log-card header{gap:14px}
.asia-log h5{font-size:11.5px;letter-spacing:.14em;color:var(--ink)}
.log-chip{
  background:transparent;border:1.5px solid #cfdcee;color:var(--blue-dk);
  padding:2px 10px;font-size:13.5px;
}
/* «Asia Committee» — абзац, а не список */
.log-note ul{list-style:none;margin:0;padding:0}
.log-note li{font-size:13.5px;line-height:1.6;color:var(--grey);max-width:88ch}



/* ============================================================
   ЖУРНАЛ: возврат к карточкам — так компактнее и читается лучше,
   чем одна длинная таблица во всю ширину. Иконок нет, ритм держат
   счётчик, цветная черта и разрядка заголовка.
   Сверху итог 85 и полоса, из чего он складывается.
   ============================================================ */
.asia-log-in{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  padding:0 22px 22px;align-items:start;
}

/* ── шапка: итог и пропорции, на всю ширину сетки */
.log-head{
  grid-column:1 / -1;margin:20px 0 4px;padding:20px 24px;
  background:#eaf1fb;border-radius:12px;border-left:3px solid var(--green);
}
.log-total{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.log-total b{
  font-size:clamp(38px,4vw,50px);font-weight:800;line-height:.85;
  color:var(--blue-dk);letter-spacing:-.05em;font-variant-numeric:tabular-nums;
}
.log-total span{font-size:13px;line-height:1.5;color:var(--grey);max-width:38ch}
.log-bar{display:flex;gap:3px;height:10px;border-radius:100px;overflow:hidden}
.log-bar i{display:block}
.log-bar i:nth-child(1){background:var(--blue-dk)} .log-bar i:nth-child(2){background:#1c6fc0}
.log-bar i:nth-child(3){background:#2f93bf}       .log-bar i:nth-child(4){background:#4faf8e}
.log-bar i:nth-child(5){background:#6cc06a}       .log-bar i:nth-child(6){background:var(--green)}
.log-bar i:nth-child(7){background:#c3e08c}
.log-head .log-math{
  margin:12px 0 0;padding:0;background:none;border:0;border-radius:0;
  font-size:11.5px;line-height:1.55;color:var(--grey-2);font-weight:400;text-align:left;
}

/* ── карточки рубрик */
.log-card{
  position:relative;border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:18px 18px 14px;border-bottom:1px solid var(--line);
}
.log-card.log-wide{grid-column:1 / -1}
.log-card::before{
  content:"";position:absolute;left:18px;top:0;height:3px;width:44px;
  background:linear-gradient(90deg,var(--blue-dk) 0 46%,var(--green) 46%);
  border-radius:0 0 2px 2px;
}
.log-card header{
  display:flex;align-items:center;gap:14px;background:none;
  padding:0 0 10px;margin:0 0 10px;border-bottom:1px solid var(--line);
}
.asia-log h5{
  flex:1 1 auto;margin:0;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);line-height:1.4;
}
.log-chip{
  flex:0 0 auto;background:transparent;border:1.5px solid #cfdcee;color:var(--blue-dk);
  padding:2px 10px;border-radius:100px;font-size:13.5px;font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* ── строки: дата и событие в одну строку, без точки-разделителя */
.asia-log ul{list-style:none;margin:0;padding:0;columns:auto}
.log-card.log-wide ul{columns:2;column-gap:34px}
.asia-log li{
  display:block;padding:3px 0;background:none;border:0;break-inside:avoid;
  font-size:13px;line-height:1.55;color:var(--grey);
}
.asia-log li:hover{background:none}
.asia-log li b{
  color:var(--blue-dk);font-weight:700;margin-right:8px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.asia-log li span{color:var(--grey)}
.asia-log li.li-full{font-size:13.5px;line-height:1.6;color:var(--ink);max-width:none}
.log-note li{max-width:none}

@media(max-width:900px){
  .asia-log-in{grid-template-columns:1fr;padding:0 18px 20px}
  .log-card.log-wide ul{columns:auto}
  .log-head{padding:18px 20px}
}

/* ============================================================
   ИННОВАЦИИ: два флагманских предложения.
   На сайте — краткий текст и компактная схема, полный текст
   уходит в манифест. Графика собрана вёрсткой, а не картинкой:
   переводится вместе с сайтом и остаётся резкой на любом экране.
   ============================================================ */
.inn{
  margin-top:44px;padding:0;border:1px solid var(--line);border-radius:16px;
  background:#fff;overflow:hidden;
}
.inn-head{padding:26px 30px 22px;border-bottom:1px solid var(--line)}
.inn-n{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;background:var(--green-dk);
  padding:5px 12px;border-radius:100px;margin-bottom:14px;
}
.inn-head h3{
  font-size:clamp(21px,2.3vw,28px);font-weight:800;letter-spacing:-.03em;
  line-height:1.14;color:var(--ink);margin:0 0 8px;max-width:26ch;
}
.inn-sub{
  margin:0;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-dk);
}
.inn-body{display:grid;grid-template-columns:.85fr 1.15fr;gap:38px;padding:28px 30px 26px}
.inn-copy p{font-size:15.5px;line-height:1.7;color:var(--grey);margin:0 0 20px}
.inn-link{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;
  letter-spacing:.03em;color:var(--blue-dk);text-decoration:none;
}
.inn-link::after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease;
}
.inn-link:hover::after{transform:rotate(45deg) translate(2px,-2px)}
.inn-foot{
  margin:0;padding:15px 30px;background:var(--navy);color:#fff;text-align:center;
  font-size:11.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
}

/* ── схема офиса */
.org{display:grid;grid-template-columns:1.25fr .95fr;gap:12px;align-items:start}
.org-spine{display:flex;flex-direction:column;gap:8px;position:relative}
.org-box{
  border:1px solid #cfdcee;border-radius:10px;padding:11px 14px;background:#f4f8fd;
  position:relative;
}
.org-box + .org-box::before{
  content:"";position:absolute;left:50%;top:-9px;width:1px;height:9px;background:#c3d2e6;
}
.org-box b{display:block;font-size:13px;font-weight:800;color:var(--ink);line-height:1.25}
.org-box span{display:block;font-size:11px;line-height:1.45;color:var(--grey-2);margin-top:3px}
.org-top{background:var(--navy);border-color:var(--navy)}
.org-top b{color:#fff} .org-top span{color:#a8c0dd}
.org-coo{background:#e7f3e2;border-color:#bcd9ae}
.org-side{display:flex;flex-direction:column;gap:8px}
.org-aside{
  border:1px dashed #c3d2e6;border-radius:10px;padding:11px 14px;background:#fff;
}
.org-aside b{display:block;font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.25}
.org-aside span{display:block;font-size:10.5px;line-height:1.5;color:var(--grey-2);margin-top:4px}
.org-ai{border-style:solid;border-color:#bcd9ae;background:#f6fbf3}
.org-reg{
  grid-column:1 / -1;margin-top:4px;border:1px solid #cfdcee;border-radius:10px;
  padding:13px 16px;background:#f4f8fd;
}
.org-reg-h{margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.org-reg-h b{font-size:13px;font-weight:800;color:var(--ink)}
.org-reg-h em{font-style:normal;font-size:11.5px;color:var(--blue-dk);font-weight:700}
.org-roles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 16px}
.org-roles li{
  font-size:11.5px;line-height:1.45;color:var(--grey);padding-left:13px;position:relative;
}
.org-roles li::before{
  content:"";position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;
  background:var(--green);
}

/* ── пути в хоккей */
.path{display:flex;flex-direction:column;gap:14px}
.path-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.path-step{
  position:relative;border-radius:10px;padding:16px 16px 18px;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:112px;
}
.ps-1{background:linear-gradient(160deg,#4a9b3f,#2f7a2a)}
.ps-2{background:linear-gradient(160deg,#1c7fc0,#115a92)}
.ps-3{background:linear-gradient(160deg,#0d3b73,var(--navy))}
.path-step b{font-size:15px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.path-step span{font-size:11.5px;line-height:1.45;opacity:.86;margin-top:5px}
.path-step + .path-step::before{
  content:"";position:absolute;left:-8px;top:50%;width:8px;height:2px;background:#cfdcee;
}
.path-ben{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.path-ben li{
  border:1px solid #cfdcee;border-radius:9px;padding:11px 12px;background:#f4f8fd;
  font-size:11.5px;font-weight:700;line-height:1.35;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.path-ben li::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--green);
}

@media(max-width:980px){
  .inn-body{grid-template-columns:1fr;gap:26px;padding:24px 22px}
  .inn-head{padding:22px 22px 18px}
  .org{grid-template-columns:1fr}
}
@media(max-width:620px){
  .path-row{grid-template-columns:1fr}
  .path-step{min-height:0}
  .path-step + .path-step::before{left:50%;top:-8px;width:2px;height:8px}
  .path-ben{grid-template-columns:1fr 1fr}
  .org-roles{grid-template-columns:1fr}
}

/* ============================================================
   ГЕРОЙ: одна поверхность.
   Цвет фона и кромка баннера совпадают с точностью до единицы,
   но у баннера есть фотографическое зерно, а заливка страницы
   идеально гладкая. При одинаковом цвете это читается как разный
   оттенок. Поэтому фон героя получает то же зерно (σ≈0.85)
   и лёгкое свечение к центру, как в самом баннере.
   ============================================================ */
.hero{
  background-color:var(--hero-bg);
  background-image:
    radial-gradient(120% 90% at 50% 42%, rgba(255,255,255,.022) 0%, rgba(255,255,255,0) 62%),
    url(../img/hero-grain.png?v=2);
  background-repeat:no-repeat,repeat;
  background-size:auto,128px 128px;
}
.hero-banner{background:transparent}

/* ============================================================
   ГЕРОЙ НА ТЕЛЕФОНЕ: шайба возвращается на своё место.
   В разметке она стоит первой (так нужно рабочему порядку
   чтения), и на узком экране оказывалась между портретом и
   текстом, оторванной от лок-апа. В баннере шайба стоит НАД
   надписью IIHF 2.0 — тот же порядок собираем и здесь.
   ============================================================ */
@media(max-width:900px){
  .hero-copy{display:flex;flex-direction:column;padding-top:18px}
  .hero-copy .eyebrow{order:1;margin-bottom:14px}
  .hero-copy .hero-puck{order:2}
  .hero-copy .mark{order:3}
  .hero-copy .mark-tag{order:4}
  .hero-copy .who{order:5}
  /* шайба вплотную к лок-апу, как в баннере.
     padding у .hero-copy>* уже есть, свой не добавляем: он давал
     ширину 290+20 и картинка вылезала за экран на планшете */
  .hero-puck{
    display:block;width:min(62vw,280px);
    /* просвет до лок-апа примерно в толщину штриха, как в баннере */
    margin:0 0 10px 12px;padding:0;
  }
  .hero-copy .mark{margin-top:0}
}
@media(max-width:420px){
  .hero-puck{width:min(72vw,260px)}
}

/* ============================================================
   ОДИН ШРИФТ НА ВЕСЬ САЙТ.
   Вводки разделов, «Dear friends», слоган под лок-апом и врезы
   были набраны антиквой — на фоне остального документа это
   читалось как чужой шрифт. Везде Inter, иерархию держат кегль,
   насыщенность и цвет, а не смена гарнитуры.
   ============================================================ */
.deck,.mark-tag,.letter .salut,.letter .open,.letter-q,.pull,
.lockup .lock-2,.news-empty,.msg-pull,.msg-body .open{
  font-family:var(--sans);
  font-style:normal;
}
/* Inter на том же кегле выглядит крупнее антиквы — слегка убираем */
.deck{font-size:clamp(17px,1.9vw,21px);line-height:1.5;letter-spacing:-.005em}
#program .deck,#contact .deck{font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.62}
.mark-tag{font-size:clamp(16px,1.8vw,22px);letter-spacing:.005em}
.letter .salut{font-size:clamp(23px,2.4vw,30px);letter-spacing:-.02em;font-weight:700}

/* Чередование картинок в крупных блоках Азии.
   nth-of-type считал все соседние div подряд, поэтому после
   перестановки два блока подряд оказались с картинкой справа.
   Теперь сторона задаётся явно по номеру блока. */
.asia-feat:nth-of-type(even) .asia-feat-img{order:0}
.asia-feat.feat-2 .asia-feat-img{order:2}
@media(max-width:900px){
  .asia-feat.feat-2 .asia-feat-img{order:0}
}

/* ── полное предложение инновации, раскрывается на странице */
.inn-link{
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
  font-size:13px;font-weight:800;letter-spacing:.03em;color:var(--blue-dk);
}
.inn-link:focus-visible{outline:3px solid var(--green);outline-offset:4px;border-radius:4px}
.inn-link.is-open::after{transform:rotate(-45deg)}
.inn-full{
  grid-column:1 / -1;margin:4px 30px 0;padding:22px 0 4px;
  border-top:1px solid var(--line);
}
.inn-full p{
  font-size:15px;line-height:1.72;color:var(--grey);margin:0 0 16px;
  max-width:88ch;text-align:justify;hyphens:none;
}
.inn-full p:last-child{margin-bottom:0}
.inn-next{
  margin:26px 0 0;text-align:center;font-size:12px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2);
}
@media(max-width:980px){
  .inn-full{margin:4px 22px 0}
  .inn-full p{text-align:left}
}

/* Кадр с Её Величеством — портретный. В общий слот 4:3 он влезает
   только ценой срезанных фигур, поэтому у этого блока свои пропорции. */
.asia-feat.feat-1 .asia-feat-img img{aspect-ratio:4/5;object-position:center 42%}
.asia-feat.feat-1{align-items:center}
@media(max-width:900px){
  .asia-feat.feat-1 .asia-feat-img img{aspect-ratio:4/5}
}

/* ── Head Office Operations: полоса между операционным директором и
   региональными офисами. Центр ИИ показан внутри неё, но своей
   рамкой и цветом — он часть операций головного офиса и при этом
   самостоятельная единица. */
.org-ho{
  grid-column:1 / -1;margin-top:10px;
  display:grid;grid-template-columns:1.25fr .95fr;gap:10px;
  padding:12px;border:1px solid #cfdcee;border-radius:10px;background:#eef4fb;
  position:relative;
}
.org-ho::before{
  content:"";position:absolute;left:24%;top:-11px;width:1px;height:11px;background:#c3d2e6;
}
.org-ho-l b,.org-ho-ai b{display:block;font-size:13px;font-weight:800;color:var(--ink);line-height:1.25}
.org-ho-l span,.org-ho-ai span{
  display:block;font-size:10.5px;line-height:1.5;color:var(--grey-2);margin-top:4px;
}
.org-ho-l{padding:8px 10px}
.org-ho-ai{
  padding:10px 12px;border:1px solid #bcd9ae;border-radius:8px;background:#f6fbf3;
}
.org-roles{grid-template-columns:1fr 1fr}
@media(max-width:980px){
  .org-ho{grid-template-columns:1fr}
  .org-ho::before{left:50%}
}

/* Лого в шапке белое. Прежнее правило .brand span красило зелёным
   весь блок «IIHF 2.0», потому что он сам по себе span. Селектор
   с двумя классами нужен, чтобы перебить его по специфичности. */
.brand .brand-mark,.brand .brand-mark span{color:#fff}

/* Вводка к инновациям — целый абзац, а не одна фраза: 34 знака в
   строке превращали её в узкую полосу с пустотой справа.
   Даём полную ширину в две колонки, как во вводке к программе. */
#innovations .deck,#program .deck{
  max-width:none;columns:2;column-gap:56px;
  font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.62;
  text-align:justify;hyphens:none;margin-bottom:6px;
}
@media(max-width:820px){
  #innovations .deck{columns:auto;text-align:left}
}

/* Текст рядом со схемой — тоже по формату, без переносов */
.inn-copy p{text-align:justify;hyphens:none;-webkit-hyphens:none}
@media(max-width:820px){
  .inn-copy p{text-align:left}
}

/* ============================================================
   ВЫКЛЮЧКА ПО ФОРМАТУ ДЛЯ ВСЕГО СВЯЗНОГО ТЕКСТА.
   Задаётся одним правилом. !important нужен потому, что за годы
   правок накопилось несколько слоёв старых объявлений выключки,
   и часть из них перебивает обычный селектор по специфичности.
   Переносов нет нигде: дефис рвал слова пополам.
   ============================================================ */
.ltext > p,.asia-lede,.asia-copy p,.asia-feat p,.asia-close p,.asia-said,
.asia-flag,.thanks p,.aside p,.aside-text p,.init p,.abt-note p,.role-note,
.deck,#program .deck,#contact .deck,#innovations .deck,
.vm-txt,.inn-copy p,.inn-full p,
.built figcaption p,.tl-row p,.step p,
.prio-list p,.log-note li,.li-full,.disclaim span{
  text-align:justify !important;
  hyphens:none !important;-webkit-hyphens:none !important;
  text-wrap:pretty;
}

/* Не выключаются: метки, строки данных, подписи под числами,
   роли в схемах, короткие ярлыки и центрованные врезы. */
.lmark,.asia-log li,.log-math,.roles span,.edu span,.edu b,
.asia-facts span,.big-c,.org-roles li,.path-ben li,
.org-box span,.org-aside span,.org-ho-l span,.org-ho-ai span,
.bar-key em,.news-date,.step-tag,.prio-n,.yr,.kicker,.inn-sub,
.org-reg-h,.foot-links a,.count-lab{
  text-align:left !important;hyphens:none !important;
}
.asia-log li.li-full{text-align:justify !important}
.turn-note{text-align:center !important}

/* На узком экране выключка вредна в любом блоке */
@media(max-width:820px){
  .ltext > p,.asia-lede,.asia-copy p,.asia-feat p,.asia-close p,.asia-said,
  .asia-flag,.thanks p,.aside p,.aside-text p,.init p,.abt-note p,.role-note,
  .deck,#program .deck,#contact .deck,#innovations .deck,
  .vm-txt,.inn-copy p,.inn-full p,.built figcaption p,.tl-row p,.step p,
  .prio-list p,.log-note li,.li-full,.disclaim span,.turn-note{
    text-align:left !important;text-align-last:auto;
  }
}


/* ============================================================
   ШАЙБА В РАЗДЕЛЕ КОНТАКТОВ.
   Стоит сбоку, уходит за край секции и работает как фактура,
   а не как предмет по центру. Радиальная маска гасит сияние,
   унаследованное из баннера: прямоугольная вырезка обрезала его
   рамкой, и на ровном фоне была видна светлая плашка.
   ============================================================ */
#contact{background:var(--hero-bg);position:relative;overflow:hidden}
#contact .wrap{position:relative;z-index:1}
.contact-puck{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  left:max(-90px,-6vw);top:50%;transform:translateY(-52%) rotate(-7deg);
  width:clamp(280px,30vw,440px);height:auto;opacity:.42;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 48%,#000 52%,transparent 82%);
          mask-image:radial-gradient(ellipse 62% 58% at 50% 48%,#000 52%,transparent 82%);
}
@media(max-width:1080px){
  .contact-puck{left:max(-120px,-12vw);width:clamp(240px,34vw,360px);opacity:.3}
}
@media(max-width:700px){
  /* на телефоне шайба уходит в правый нижний угол: по центру она
     оказывалась прямо под иконками соцсетей и мешала их читать */
  .contact-puck{
    left:auto;right:-32%;top:auto;bottom:-110px;
    transform:rotate(-5deg);
    width:min(70vw,300px);opacity:.2;
  }
}

/* ============================================================
   ЛАБОРАТОРИИ (инновации III-V).
   У каждой своя структура: сетка испытаний, дерево ценности,
   слои фундамента. Общими остаются рамка карточки, палитра,
   плашки участников и тёмная строка внизу — так блоки читаются
   как одна семья, но не повторяют друг друга.
   ============================================================ */
.lab{display:flex;flex-direction:column;gap:12px}
.lab-sec{
  font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey-2);margin:2px 0 0;
}
.lab-in{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.lab-in li{
  font-size:11px;font-weight:700;line-height:1.3;color:var(--ink);
  background:#f4f8fd;border:1px solid #cfdcee;border-radius:100px;padding:5px 11px;
}
.inn-lab3 .inn-n{background:var(--green-dk)}
.inn-lab4 .inn-n{background:var(--blue-dk)}
.inn-lab5 .inn-n{background:#2f93bf}

/* ── III · сетка испытаний: что именно проверяет лаборатория */
.lab-grid .lab-core{
  border-radius:12px;padding:13px 18px;color:#fff;
  background:linear-gradient(120deg,#2f7a2a,#4a9b3f 58%,#6cc06a);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.lab-grid .lab-core b{font-size:15px;font-weight:800}
.lab-grid .lab-core span{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.grid-4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid-4 li{
  position:relative;border-radius:11px;padding:30px 14px 14px;color:#fff;
  font-size:12.5px;font-weight:700;line-height:1.35;min-height:76px;
  display:flex;align-items:flex-end;
}
.grid-4 li span{display:block}
.grid-4 li:nth-child(1){background:linear-gradient(150deg,#0d3b73,#1c6fc0)}
.grid-4 li:nth-child(2){background:linear-gradient(150deg,#12628f,#2f93bf)}
.grid-4 li:nth-child(3){background:linear-gradient(150deg,#1f7a5e,#4faf8e)}
.grid-4 li:nth-child(4){background:linear-gradient(150deg,#3f8f33,#7ec24f)}
.grid-4 i{
  position:absolute;top:10px;left:14px;font-style:normal;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;opacity:.6;
}

/* ── IV · дерево: один источник, четыре получателя */
.lab-tree .tree-core{
  border-radius:12px;padding:14px 18px;color:#fff;text-align:center;
  background:linear-gradient(120deg,#0d3b73,var(--blue-dk) 62%,#2f93bf);
}
.lab-tree .tree-core b{display:block;font-size:15px;font-weight:800}
.lab-tree .tree-core span{display:block;font-size:11.5px;opacity:.85;margin-top:2px}
.tree-stem{height:16px;position:relative}
.tree-stem::before{
  content:"";position:absolute;left:50%;top:0;width:2px;height:8px;background:#cfdcee;
}
.tree-stem::after{
  content:"";position:absolute;left:12.5%;right:12.5%;top:8px;height:2px;background:#cfdcee;
}
.tree-out{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tree-out li{
  position:relative;border-radius:10px;padding:14px 12px;background:#fff;
  border:1px solid #cfdcee;border-top:3px solid var(--blue-dk);
  font-size:11.5px;font-weight:700;line-height:1.35;color:var(--ink);
}
.tree-out li::before{
  content:"";position:absolute;left:50%;top:-10px;width:2px;height:10px;background:#cfdcee;
}
.tree-out li:nth-child(1){border-top-color:#0d3b73}
.tree-out li:nth-child(2){border-top-color:var(--blue-dk)}
.tree-out li:nth-child(3){border-top-color:#2f93bf}
.tree-out li:nth-child(4){border-top-color:#4faf8e}

/* ── V · слои: фундамент снизу, польза сверху */
.stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.stack li{
  border-radius:9px;padding:13px 16px;color:#fff;
  font-size:12.5px;font-weight:700;line-height:1.3;
}
.stack li b{font-weight:700}
.stack .sl-1{background:linear-gradient(90deg,#8dc73d,#b9dd7a);color:#14321a;
  width:100%;}
.stack .sl-2{background:linear-gradient(90deg,#4faf8e,#7ec9a8);color:#0b2c24;width:94%}
.stack .sl-3{background:linear-gradient(90deg,#2f93bf,#6fb9d6);width:88%}
.stack .sl-4{background:linear-gradient(90deg,#0d3b73,#1c6fc0);width:82%}
.stack-base{
  border-radius:10px;padding:13px 18px;background:var(--navy);color:#fff;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:3px;
}
.stack-base b{font-size:14.5px;font-weight:800}
.stack-base span{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.75}

@media(max-width:820px){
  .tree-out{grid-template-columns:1fr 1fr}
  .tree-stem::after{left:25%;right:25%}
}
@media(max-width:620px){
  .grid-4{grid-template-columns:1fr}
  .tree-out{grid-template-columns:1fr}
  .tree-out li::before{display:none}
  .tree-stem{display:none}
  .stack li{width:100% !important}
}

/* Схема офиса без соединительных линий: только блоки. */
.org-box + .org-box::before,.org-ho::before{content:none !important}
.org-spine{gap:9px}

/* Ремарка под инновациями */
.inn-note{
  margin:22px auto 0;max-width:62ch;text-align:center;
  font-size:13.5px;line-height:1.6;color:var(--ink);font-weight:700;
  padding:14px 20px;border-radius:10px;background:#eaf1fb;
  border-left:3px solid var(--green);
}
@media(max-width:700px){.inn-note{text-align:left;margin-top:18px}}

/* «17 Allocated» — слово рядом с числом */
.asia-facts em{
  display:block;font-style:normal;font-size:11px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-dk);
  margin-top:4px;
}

/* ============================================================
   РЕЖИМ САЙТА.
   data-mode="campaign" на <html> — предвыборная версия.
   data-mode="personal" — личный сайт после выборов: отсчёт,
   раздел инноваций и предвыборные подписи уходят, остальное
   остаётся. Переключается одним словом в разметке.
   ============================================================ */
:root[data-mode="personal"] .camp{display:none !important}

/* ============================================================
   ОГОВОРКА ПО GENERAL DIRECTIVE #1 (15.09.2026).
   Директива требует ясно указать в материале кампании, что цели
   за пределами срока до 2030 зависят от переизбрания. Материал
   один — сайт, поэтому и указаний два: у самого долгосрочного
   заявления в письме и в подвале, где видно с любого экрана.
   Оформление сдержанное: это сноска, а не предупреждение.
   ============================================================ */
.term-note{
  margin:6px 0 20px;padding:0 0 0 14px;
  border-left:2px solid rgba(141,199,61,.55);background:none;
  font-size:12px;line-height:1.6;color:#93a9c6;font-weight:400;
  max-width:64ch;text-align:left !important;hyphens:none;
}
.foot-term{
  display:block;margin-bottom:8px;font-size:11px;line-height:1.55;
  color:#7b8ca6;
}
@media(max-width:700px){.term-note{font-size:11.5px;margin-bottom:16px}}

/* ============================================================
   ЛАБОРАТОРИИ IV и V: тот же каркас, что у третьей, но своя
   палитра. Соединительных линий нет ни в одной схеме.
   ============================================================ */
.lab-tree .tree-stem,.tree-out li::before{display:none !important}

/* шапка «The Lab · Who takes part» в цвете своей лаборатории */
.inn-lab4 .lab-core{background:linear-gradient(120deg,#0d3b73,var(--blue-dk) 60%,#2f93bf)}
.inn-lab5 .lab-core{background:linear-gradient(120deg,#12628f,#2f93bf 58%,#6fb9d6)}

/* плитки результата четвёртой: синяя гамма */
.inn-lab4 .grid-4 li:nth-child(1){background:linear-gradient(150deg,#08284f,#0d3b73)}
.inn-lab4 .grid-4 li:nth-child(2){background:linear-gradient(150deg,#0d3b73,#1c6fc0)}
.inn-lab4 .grid-4 li:nth-child(3){background:linear-gradient(150deg,#12628f,#2f93bf)}
.inn-lab4 .grid-4 li:nth-child(4){background:linear-gradient(150deg,#1f7a5e,#4faf8e)}

/* пятая: ступени идут после подписи «What it delivers» */
.inn-lab5 .stack{margin-top:2px}

/* Инновация II: новая ступень «Floor hockey» перед street hockey */
.path-row{grid-template-columns:repeat(4,1fr)}
.ps-0{background:linear-gradient(160deg,#7ec24f,#5aa63a)}
@media(max-width:820px){.path-row{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.path-row{grid-template-columns:1fr}}


/* ── v115 · примечание о сроке полномочий + видимый адрес почты ── */

/* оговорка о непринадлежности: тот же регистр, что и сноска о сроке */
.foot-affil{display:block;margin:8px 0;font-size:11px;line-height:1.55;color:#7b8ca6;max-width:78ch}


/* ============================================================
   Благодарность в конце азиатского блока. Была строкой-кикером
   в 11px, теперь это отдельная тёмная панель: заголовок того же
   кегля, что «Ice hockey meets Asia», и зелёное свечение в углу.
   ============================================================ */
.thanks.thanks-card{
  position:relative;overflow:hidden;max-width:none;border:0;
  margin-top:56px;padding:clamp(26px,3.4vw,44px);border-radius:18px;
  background:linear-gradient(135deg,#0c1c3f 0%,#041e42 46%,#123057 100%);
  box-shadow:0 18px 44px rgba(4,30,66,.22);
}
.thanks-card .thanks-glow{
  position:absolute;right:-8%;bottom:-48%;width:min(440px,54%);aspect-ratio:1;
  background:radial-gradient(circle,rgba(141,199,61,.30),transparent 68%);
  pointer-events:none;
}
.thanks-card .thanks-lab{
  position:relative;margin:0 0 18px;color:#fff;text-transform:none;
  font-size:clamp(22px,2.6vw,30px);font-weight:800;
  letter-spacing:-.028em;line-height:1.16;
}
.thanks-card .thanks-lab::after{
  content:"";display:block;width:78px;height:3px;margin-top:16px;border-radius:2px;
  background:linear-gradient(90deg,#8dc73d,#2f93bf);
}
.thanks-card p:last-child{position:relative;color:#cfe0f5}
@media(max-width:700px){.thanks-card{border-radius:14px}}


/* ============================================================
   Выключка отключается там, где колонка слишком узкая.
   Переносы по слогам запрещены, поэтому в узкой колонке длинные
   слова растягивают межсловные пробелы в «реки». Замерено:
   карточки целей дают 220-250 px на строку, этого мало.
   ============================================================ */
.step p,
.cp,.yr,.sub,.prio-n,.tl-y,.amb-line,.thanks-lab,.step-tag{
  text-align:left !important;
}

/* на узких экранах по той же причине выключка снимается везде */
@media(max-width:900px){
  .ltext > p,.asia-lede,.asia-copy p,.asia-feat p,.asia-close p,.asia-said,
  .asia-flag,.thanks p,.aside p,.aside-text p,.init p,.abt-note p,.role-note,
  .deck,#program .deck,#contact .deck,#innovations .deck,
  .vm-txt,.inn-copy p,.inn-full p,
  .built figcaption p,.tl-row p,
  .prio-list p,.log-note li,.li-full,.disclaim span{
    text-align:left !important;
  }
}

/* схема office: одна колонка */
.org{grid-template-columns:1fr}

/* вводные строки разделов: 34ch давали два коротких обрывка */
#asia .deck,#record .deck{max-width:62ch}
@media(max-width:700px){#asia .deck,#record .deck{max-width:none}}

/* ============================================================
   ФОТО В ШАПКЕ НА ТЕЛЕФОНЕ — САМАЯ ПРОСТАЯ КОНСТРУКЦИЯ.
   Раньше высоту блока задавал aspect-ratio, а снимок лежал
   внутри абсолютом. Если браузер почему-либо не отрабатывал
   aspect-ratio, блок получал нулевую высоту, и на первом
   экране оставалась одна шайба.
   Файл 880x1100 — это ровно 4:5, поэтому обычная картинка в
   потоке даёт тот же кадр, но зависеть ей уже не от чего.
   ============================================================ */
@media(max-width:900px){
  .hero-photo{
    aspect-ratio:auto;position:relative;overflow:hidden;
    background:var(--hero-bg);line-height:0;
  }
  .hero-photo img{
    position:static;display:block;width:100%;height:auto;
    max-width:100%;object-fit:fill;
  }
}

/* ============================================================
   ЧИТАЕМОСТЬ НА ТЕЛЕФОНЕ.
   Основной текст (17px/1.8) на телефоне читался хорошо, но всё
   служебное вокруг него верстальщик уменьшал под десктоп, где
   эти подписи стоят в узких колонках. На экране 390px они
   оказались на 11-12px: подзаголовки инноваций, подписи плиток,
   строки оргструктуры, даты в журнале, сноски в подвале.
   Рядом с 17-м кеглем это читается как мелкий шрифт договора.

   Правило простое: то, что человек ЧИТАЕТ, не мельче 13px;
   то, что он лишь опознаёт как метку (капитель с разрядкой),
   не мельче 12px. Кегль поднят, интерлиньяж вслед за ним.
   Десктоп не тронут: всё внутри max-width:900px.
   ============================================================ */
@media(max-width:900px){

  /* --- подводки разделов и лид-абзацы --- */
  .deck{font-size:16.5px;line-height:1.62}
  .asia-lede{font-size:17px}
  .role-note{font-size:15.5px;line-height:1.65}
  .big-c{font-size:15px;line-height:1.5}
  .li-full{font-size:15px}

  /* --- инновации: подзаголовок и нижняя строка --- */
  .inn-sub{font-size:14px;line-height:1.5;letter-spacing:.04em}
  .inn-foot{font-size:13.5px;line-height:1.5;letter-spacing:.06em}

  /* --- оргструктура: названия блоков и пояснения под ними --- */
  .org-box b,.org-ho-l b,.org-ho-ai b,.org-reg-h b{font-size:14.5px}
  .org-box span,.org-ho-l span,.org-ho-ai span{font-size:13px;line-height:1.5}
  .org-reg-h em{font-size:13px}
  .org-roles li{font-size:13.5px;line-height:1.5}

  /* --- дорожка форматов и её выгоды --- */
  .path-step b{font-size:15px}
  .path-step span{font-size:13.5px;line-height:1.45}
  .path-ben li{font-size:13.5px;line-height:1.5}

  /* --- лаборатории: участники, плитки, списки --- */
  .lab-in li{font-size:13.5px}
  .lab li span,.lab-grid li span,.lab-tree li span,.lab-stack li span{font-size:14px;line-height:1.45}
  .sl-1 b,.sl-2 b,.sl-3 b,.sl-4 b{font-size:14px}
  .lab-core span,.lab-sec{font-size:11.5px;letter-spacing:.14em}

  /* --- журнал результатов: заголовки групп, даты, итог --- */
  #record h5,#asia h5{font-size:13px;line-height:1.45;letter-spacing:.1em}
  .log-math{font-size:13px;line-height:1.5}
  .log-total span{font-size:14px;line-height:1.5}
  #record li b,#asia li b{font-size:14px}
  .yr{font-size:13px;line-height:1.5;letter-spacing:.08em}

  /* --- «о себе» и подписи к снимкам --- */
  .sub{font-size:13px;letter-spacing:.12em}
  .aside-pics figcaption{font-size:12.5px;letter-spacing:.08em}

  /* --- подвал: дисклеймеры читаются, а не угадываются --- */
  .disclaim,.disclaim span,.foot-term,.foot-affil{font-size:13px;line-height:1.6}
  .cp,.cp span{font-size:13px}
  .foot-brand em{font-size:12px}

  /* --- метки и капитель: опознаваемый минимум 12px --- */
  .eyebrow,.kicker,.count-lab,.vm-lab,.prio-n,.inn-n,
  .step-tag,.prio-head em,.asia-turn p{font-size:12px}
  .step-n,.pb-n{font-size:12.5px}
  .hero-count .count span{font-size:12px}

  /* --- навигация и кнопки: палец и глаз --- */
  .nav a,.btn{font-size:15px}
  .nav a{padding-top:10px;padding-bottom:10px}
}

/* Добёр: эти подписи задавались более частными селекторами
   (.built .yr, .log-head .log-math, .aside-text .sub, .lab-core span)
   и блок выше их не перебивал. Повторяем с той же частностью. */
@media(max-width:900px){
  .built .yr,.asia-feat .yr,figcaption .yr,div .yr{font-size:13px;line-height:1.5}
  .log-head .log-math{font-size:13px;line-height:1.5}
  .aside-text .sub,div .sub{font-size:13px;letter-spacing:.12em}
  .lab .lab-core span,.lab-core span{font-size:11.5px;letter-spacing:.14em}
  .letter-sign span,p.letter-sign span{font-size:12px;letter-spacing:.1em}
}

/* ============================================================
   ПОДПИСЬ «CANDIDATE FOR PRESIDENT…» НАД ФОТОГРАФИЕЙ.
   На телефоне первое, что видит человек, — кто это и на что
   он идёт, а уже потом снимок и лок-ап.
   Строка продублирована в разметке: та, что в .hero-copy,
   работает на десктопе, эта — на телефоне, лишняя всегда
   выключена display:none, поэтому её не читает и озвучка.
   Переставить одну строку порядком нельзя: она лежит внутри
   .hero-copy, а order работает только между соседями.
   ============================================================ */
.eyebrow-m{display:none}
@media(max-width:900px){
  .eyebrow-m{
    display:block;order:-1;
    margin:16px 0 18px;padding:0 20px;
  }
  .hero-copy .eyebrow{display:none}
  .hero-copy{padding-top:6px}
}

/* ============================================================
   ДВЕНАДЦАТЬ ПРИОРИТЕТОВ НА ТЕЛЕФОНЕ — В ОДНУ КОЛОНКУ.
   Значок стоял в отдельной левой колонке, и весь текст —
   номер, заголовок и описание — уезжал во вторую. На экране
   390px это забирало 50px слева, описание оставалось в узком
   столбце и читалось тяжело.
   Значок поднимаем над текстом, описание идёт во всю ширину:
   строка вырастает с 300 до 350px, это примерно на шесть слов
   меньше переносов на абзац.
   ============================================================ */
@media(max-width:700px){
  .prio-list li{
    grid-template-columns:1fr;gap:12px;
  }
  .prio-ico{width:26px;height:26px}
  .prio-list li > div > p:last-child{max-width:none}
}

/* ============================================================
   ПОДВОДКИ РАЗДЕЛОВ — НА ТЕЛЕФОНЕ ВСЕГДА ОДНА КОЛОНКА.
   Вводка к двенадцати приоритетам вёрстана в две колонки: на
   широком экране это правильно, абзац длинный. Но правило
   columns:2 стояло в файле дважды, и второй раз — ниже
   мобильного сброса и без медиазапроса. По каскаду побеждало
   оно, и на телефоне абзац оставался в двух колонках шириной
   по 147px: примерно двадцать знаков в строке.
   Дубликат убран, а этот блок стоит последним в файле, чтобы
   сброс уже ничем нельзя было перебить.
   ============================================================ */
@media(max-width:820px){
  #program .deck,#innovations .deck,#contact .deck,
  .deck,.letter-cols,.msg-cols,.asia-copy,.log-card.log-wide ul{
    columns:auto !important;column-count:auto !important;
  }
}

/* Вводка к инновациям — одна колонка и на широком экране.
   В две колонки абзац читался как газетная полоса: глаз
   доходил до низа первой колонки и возвращался наверх.
   Ширину держим по мере строки, иначе на 1440px получится
   полтораста знаков в строке. */
#innovations .deck,#program .deck{
  columns:auto;column-count:auto;
  max-width:78ch;
}

/* ============================================================
   ШАЙБА В КОНЦЕ СТРАНИЦЫ — В ПРАВЫЙ НИЖНИЙ УГОЛ.
   Она стояла слева и по вертикали ровно посередине секции:
   висела рядом с текстом и читалась как обрезанная картинка,
   а не как фон. В углу она ведёт себя как подпись — уходит
   за кадр по двум сторонам сразу, поэтому обрез выглядит
   намеренным. Края и так сведены радиальной маской.
   ============================================================ */
.contact-puck{
  left:auto;right:-5%;top:auto;bottom:-15%;
  transform:rotate(-7deg);
  width:clamp(300px,27vw,430px);
  opacity:.42;
}
@media(max-width:1080px){
  .contact-puck{right:-9%;bottom:-13%;width:clamp(260px,32vw,360px);opacity:.34}
}
@media(max-width:700px){
  .contact-puck{right:-20%;bottom:-80px;width:min(66vw,290px);opacity:.24}
}

/* Шайба в конце: видна целиком, стоит у правого края.
   Прошлый вариант уходил за два края сразу — читался как
   обрез. Теперь она внутри секции, с отступом от угла, а
   маска ослаблена: она только смягчает собственные края
   кадра, а не срезает сам предмет. */
.contact-puck{
  left:auto;right:clamp(16px,3.4vw,64px);
  top:auto;bottom:clamp(26px,4vw,64px);
  transform:rotate(-6deg);
  width:clamp(220px,21vw,320px);
  opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 80% 76% at 50% 50%,#000 72%,transparent 97%);
          mask-image:radial-gradient(ellipse 80% 76% at 50% 50%,#000 72%,transparent 97%);
}
@media(max-width:1080px){
  .contact-puck{width:clamp(210px,26vw,290px);opacity:.42}
}
@media(max-width:700px){
  /* на телефоне иконкам соцсетей и шайбе тесно в одной полосе:
     добавляем секции нижнее поле и ставим шайбу в него */
  #contact{padding-bottom:180px}
  .contact-puck{right:12px;bottom:18px;width:min(44vw,175px);opacity:.36}
}

/* ============================================================
   ШАПКА НА ТЕЛЕФОНЕ — КАК НА КОМПЬЮТЕРЕ.
   Имя и статус были скрыты с 1180px и ниже. На телефоне это
   лишнее: там вместо строки меню стоит бургер, и место у
   лок-апа свободно. Возвращаем их, чуть уменьшив кегль, чтобы
   блок не доходил до кнопки меню даже на узком экране.
   Промежуток 901-1180px не трогаем: там строка ссылок ещё
   разложена и имя ей мешало бы.
   ============================================================ */
@media(max-width:900px){
  .brand-who{display:flex}
  .brand{gap:11px}
  .brand-mark{font-size:15px}
  .brand-who{padding-left:11px;gap:1px}
  .brand-who b{font-size:12.5px}
  .brand-who i{font-size:9px;letter-spacing:.115em}
}
@media(max-width:374px){
  .brand{gap:9px}
  .brand-mark{font-size:14px}
  .brand-who{padding-left:9px}
  .brand-who b{font-size:11.5px}
  .brand-who i{font-size:8.2px;letter-spacing:.09em}
}

/* ============================================================
   ЛОК-АП НА ТЕЛЕФОНЕ — ПО ПРОПОРЦИЯМ БАННЕРА.
   Замеры с hero-banner-wide.jpg (2200x1000):
     шайба            611px
     «IIHF 2.0»       558px   → шайба шире надписи в 1,095 раза
     «ONE GAME…»      594px   → 1,065 от надписи
     просвет шайба→надпись 9px, левые края всех трёх вровень.
   На телефоне было иначе: в puck.png сама шайба занимает 84,2%
   кадра и отступает от левого края на 11,6%, поэтому картинка
   шириной 260px давала шайбу всего 219px, сдвинутую вправо от
   надписи. Надпись при этом была 159px — втрое мельче нужного
   соотношения.
   Считаем от ширины картинки --pw: видимая шайба = 0,842*--pw,
   значит надпись = 0,842/1,095 = 0,769 от --pw, а отрицательный
   левый отступ гасит пустое поле внутри кадра.
   ============================================================ */
@media(max-width:900px){
  .hero-copy .hero-puck{
    --pw:min(77.3vw,336px);
    box-sizing:content-box;
    width:var(--pw);padding:0;
    margin:0 0 4px calc(20px - var(--pw) * .116);
  }
  .hero-copy .mark{
    font-size:min(17.2vw,75px);line-height:.94;margin-top:0;
  }
  .hero-copy .mark-tag{
    font-size:min(5.8vw,25px);letter-spacing:.005em;margin-top:8px;
  }
}
@media(max-width:420px){
  .hero-copy .hero-puck{--pw:min(77.3vw,336px)}
}

/* ============================================================
   ТЕЛЕФОН: ШАПКА ОТДАНА ЛОК-АПУ, СНИМОК УШЁЛ НИЖЕ.
   Открыв сайт с телефона, человек сразу видит то же, что на
   баннере: шайбу с картой, под ней «IIHF 2.0» и слоган. Тот же
   порядок, что в баннере — шайба, лок-ап, слоган, имя, статус.
   Портрет перенесён в отдельную полосу между отсчётом и
   обращением. На компьютере полоса скрыта: там снимок и так
   стоит в самом баннере, второй раз он был бы повтором.
   ============================================================ */
.port-band{display:none}

@media(max-width:900px){
  /* снимок уходит из шапки */
  .hero-photo{display:none}
  .hero{padding-top:66px}
  .hero-copy{padding-top:22px}

  /* порядок как в баннере: шайба, IIHF 2.0, слоган, имя, статус */
  .hero-copy .hero-puck{order:1}
  .hero-copy .mark{order:2}
  .hero-copy .mark-tag{order:3}
  .hero-copy .who{order:4;margin-top:22px}
  .hero-copy .eyebrow{display:block;order:5;margin:16px 0 0}

  /* полоса с портретом */
  .port-band{
    display:block;position:relative;overflow:hidden;
    background:var(--hero-bg);line-height:0;
  }
  .port-band img{
    display:block;width:100%;height:auto;max-width:100%;
  }
  /* края снимка сводим к фону соседних секций, чтобы полоса
     не читалась как вклеенный прямоугольник */
  .port-band::before,.port-band::after{
    content:"";position:absolute;left:0;right:0;height:86px;pointer-events:none;
  }
  .port-band::before{top:0;background:linear-gradient(180deg,var(--hero-bg),rgba(1,20,47,0))}
  .port-band::after{bottom:0;background:linear-gradient(0deg,var(--hero-bg),rgba(1,20,47,0))}
}