/* MILANOEXPO 2015 — скин прогона 27.09.2026. Ни одного внешнего запроса. */
:root{
  --paper:#f6f3ec; --ink:#15140f; --grey:#5b574c; --rule:#e4dfd2; --soft:#efeadf;
  --accent:#b3402a;
  --grotesk:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
  --w-text:760px; --w-grid:888px; --w-wide:1120px;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.25rem; --s5:3.5rem; --s6:5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--serif);
  text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--grotesk);font-weight:700;line-height:1.1;letter-spacing:-.015em;margin:0}
p{margin:0 0 1.15em}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s4) 0}

.mex-wide{max-width:var(--w-wide);margin:0 auto;padding:0 20px}
.mex-grid-w{max-width:var(--w-grid);margin:0 auto;padding:0 20px}
.mex-text-w{max-width:var(--w-text);margin:0 auto;padding:0 20px}
.mex-skip{position:absolute;left:-9999px}
.mex-skip:focus{position:static;display:block;padding:var(--s1) 20px;background:var(--ink);color:var(--paper)}

/* ---------- шапка ---------- */
.mex-masthead{border-bottom:2px solid var(--ink);background:var(--paper)}
.mex-bar{display:flex;align-items:center;gap:var(--s3);padding-top:var(--s2);padding-bottom:var(--s2)}
.mex-logo{font-family:var(--grotesk);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;
  text-decoration:none;text-transform:uppercase;white-space:nowrap}
.mex-logo span{color:var(--accent)}
.mex-tag{font-style:italic;color:var(--grey);font-size:.9375rem;margin-left:auto}
.mex-navwrap{border-top:1px solid var(--rule)}
/* ⚠️ та же ловушка, что у `.mex-lead`: класс висит на узле вместе с
   `.mex-wide`, и сокращённый `padding:.6rem 0` съедал боковые 20 px —
   ряд рубрик начинался у самого края окна, а логотип над ним стоял по
   контейнеру (жалоба «строка меню уехала влево», гейт R20). 27.09.2026 */
.mex-nav{padding:.6rem 20px;
  font-family:var(--grotesk);font-size:.8125rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.mex-nav-list{display:flex;flex-wrap:wrap;gap:var(--s3);
  list-style:none;margin:0;padding:0}
.mex-nav a{text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent}
.mex-nav a:hover,.mex-nav a[aria-current]{border-bottom-color:var(--accent)}
.mex-burger,.mex-burger-lbl{display:none}

/* язык — <details>, без скриптов */
.mex-lang{position:relative;margin-left:auto;font-family:var(--grotesk);font-size:.8125rem}
.mex-lang>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem;
  border:1px solid var(--rule);padding:.3rem .55rem;text-transform:uppercase;letter-spacing:.06em}
.mex-lang>summary::-webkit-details-marker{display:none}
.mex-lang svg{width:18px;height:12px;display:block;border:1px solid rgba(0,0,0,.18)}
.mex-lang ul{position:absolute;right:0;top:calc(100% + 4px);z-index:20;margin:0;padding:.3rem;
  list-style:none;background:var(--paper);border:1px solid var(--ink);min-width:170px}
.mex-lang li a{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;text-decoration:none}
.mex-lang li a:hover{background:var(--soft)}

/* ---------- обложка и сетки ---------- */
.mex-kicker{font-family:var(--grotesk);font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--accent);margin:0 0 .5rem}
/* ⚠️ `.mex-lead` висит на том же узле, что и `.mex-grid-w`, и стоит в скине
   НИЖЕ — сокращённый `padding:… 0 …` обнулял боковые 20 px контейнера. На
   десктопе это не видно (колонку держит max-width), а на 390 px заголовок и
   подзаголовок лида упирались в край окна на всех шести хабах разом (гейт
   рендера R7 «текст у края»). Боковое значение печатаем явно. 27.09.2026 */
.mex-lead{padding:var(--s5) 20px var(--s4);border-bottom:1px solid var(--rule)}
.mex-lead h1{font-size:clamp(2rem,5.2vw,3.5rem)}
.mex-lead h1 a{color:inherit;text-decoration:none}
.mex-lead h1 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.mex-lead .mex-stand{font-size:1.25rem;color:var(--grey);margin-top:var(--s2);max-width:60ch}
.mex-lead figure{margin:var(--s3) 0 0}

.mex-cards{display:grid;gap:var(--s4) var(--s3);grid-template-columns:repeat(3,1fr);
  padding-top:var(--s4);padding-bottom:var(--s4)}
.mex-card{display:flex;flex-direction:column;gap:.55rem}
.mex-card a{text-decoration:none}
.mex-card h3{font-size:1.1875rem}
.mex-card:hover h3{text-decoration:underline;text-underline-offset:3px}
.mex-card .mex-thumb{aspect-ratio:3/2;overflow:hidden;background:var(--soft)}
.mex-card .mex-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mex-card p{font-size:.9375rem;color:var(--grey);margin:0}
.mex-meta{font-family:var(--grotesk);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grey)}

/* ---------- лента новостей ---------- */
.mex-feed{list-style:none;margin:0;padding:var(--s3) 0 var(--s5)}
.mex-feed li{padding:var(--s3) 0;border-bottom:1px solid var(--rule);display:grid;
  grid-template-columns:130px 1fr;gap:var(--s3)}
.mex-feed time,.mex-feed .mex-when{font-family:var(--grotesk);font-size:.8125rem;
  color:var(--grey);text-transform:uppercase;letter-spacing:.05em}
.mex-feed h3{font-size:1.125rem;margin-bottom:.35rem}
.mex-feed p{margin:0;font-size:.9688rem;color:var(--grey)}

/* ---------- крошки и дата ---------- */
.mex-crumbs{font-family:var(--grotesk);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grey);padding-top:var(--s3)}
.mex-crumbs a{color:var(--grey);text-decoration:none}
.mex-crumbs a:hover{text-decoration:underline}
.mex-crumb-sep{margin:0 .45rem;color:var(--rule)}

/* ---------- редакционный блок хаба и витрины (§09.24) ----------
   ⛔ в ДВЕ колонки: одна колонка на 74ch под сеткой во всю ширину оставляет
   пустой правую половину полосы. `columns` с шириной, а не с числом, сам
   схлопывается в одну колонку на телефоне. */
.mex-intro{padding:var(--s3) 0 var(--s4);border-bottom:1px solid var(--rule)}
.mex-intro h2{font-family:var(--grotesk);font-size:.8125rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--grey);margin-bottom:var(--s2)}
.mex-two{columns:30ch 2;column-gap:var(--s4)}
.mex-two p{margin:0 0 .9rem;font-size:1rem;line-height:1.6;break-inside:avoid}
.mex-two p:last-child{margin-bottom:0}
.mex-two a{color:var(--accent)}

/* ---------- подпись редакции (§09.28-п) ---------- */
.mex-sign{display:grid;grid-template-columns:44px 1fr;gap:var(--s3);
  margin:var(--s5) 0 var(--s6);padding-top:var(--s3);border-top:2px solid var(--ink)}
.mex-sign-mark{width:44px;height:44px;display:block}
.mex-sign p{margin:0 0 .5rem;font-size:.9375rem;color:var(--grey);max-width:62ch}
.mex-sign-who{font-family:var(--grotesk);font-weight:700;font-size:.8125rem;
  text-transform:uppercase;letter-spacing:.07em;color:var(--ink)!important}
.mex-sign a{color:var(--accent)}
.mex-sign-date{font-family:var(--grotesk);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:0!important}

/* ---------- статья ---------- */
.mex-art{padding:var(--s3) 0 0}
.mex-art h1{font-size:clamp(1.75rem,4.2vw,2.75rem)}
/* ⚠️ у h1 в сбросе `margin:0`, и подзаголовок статьи прилипал к последней
   строке заголовка: на лиде отбивку даёт своё правило, на статье её не было */
.mex-stand{font-size:1.1875rem;color:var(--grey);margin-top:var(--s2)}
.mex-byline{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--rule)}
.mex-figure{margin:var(--s4) 0}
/* ⚠️ `height:auto` обязателен рядом с `width:100%`: у кадра в разметке стоят
   настоящие width/height (резерв места), и без этой строки браузер берёт
   высоту из атрибута — вертикальный кадр 1067→2880 сплющивается */
.mex-figure img{width:100%;height:auto;display:block}
.mex-figure figcaption{font-family:var(--grotesk);font-size:.75rem;color:var(--grey);
  margin-top:.5rem;line-height:1.45}
.mex-prose{padding-bottom:var(--s5)}
.mex-prose h2{font-size:1.5rem;margin:var(--s4) 0 var(--s2)}
.mex-prose h3{font-size:1.1875rem;margin:var(--s3) 0 .6rem}
.mex-prose ul,.mex-prose ol{margin:0 0 1.15em;padding-left:1.25em}
.mex-prose li{margin:.3em 0}
.mex-prose li>p{margin:0}
.mex-prose li>p+p{margin-top:.4em}
/* блок автопостинга на /news приходит своей разметкой h4+p — не ломаем её */
/* ⚠️ `:not(.mex-wire)` — иначе полоса робота, будучи прямым `div` ленты,
   получает СВОЮ рамку и отступ поверх рамок своих анонсов: пустая строка с
   линейкой над первым анонсом */
.mex-blog>div:not(.mex-wire){padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.mex-blog h4{font-family:var(--grotesk);font-size:1.125rem;margin:0 0 .35rem}
.mex-blog h4 a{text-decoration:none}
.mex-blog h4 a:hover{text-decoration:underline;text-underline-offset:3px}
.mex-blog p{margin:0;color:var(--grey);font-size:.9688rem}
/* ⚠️ полоса, куда робот автопостинга кладёт свежий анонс: пока анонсов нет,
   это пустой контейнер с рамкой на видном месте — `:empty` его прячет
   (комментарий внутри элемента пустоту не отменяет). Анонс приезжает голым
   `<div>` с инлайновым `margin-bottom:20px` и обёрток сборщика не получит
   никогда, поэтому вид задаётся отсюда, а инлайн перебивается. */
/* подпись над хроникой: сама лента верхнего отступа не имеет — первая полоса
   начинается сразу рамкой, поэтому отбивку держит заголовок */
.mex-blog>.mex-kicker{padding-top:var(--s4)}
.mex-wire:empty{display:none}
.mex-wire>div{padding:var(--s3) 0;border-bottom:1px solid var(--rule);
  margin-bottom:0!important}
.mex-wire h4{font-family:var(--grotesk);font-size:1.125rem;margin:0 0 .35rem}
.mex-wire h4 a{text-decoration:none}
.mex-wire h4 a:hover{text-decoration:underline;text-underline-offset:3px}
.mex-wire p{margin:0;color:var(--grey);font-size:.9688rem}
.mex-prose blockquote{margin:var(--s3) 0;padding-left:var(--s2);border-left:3px solid var(--accent);
  font-style:italic;color:var(--grey)}
.mex-prose a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.mex-prose img{height:auto}
.mex-prose table{width:100%;border-collapse:collapse;margin:var(--s3) 0;font-size:.9375rem;
  display:block;overflow-x:auto}
.mex-prose th,.mex-prose td{border:1px solid var(--rule);padding:.5rem .65rem;text-align:left;
  vertical-align:top}
.mex-prose th{background:var(--soft);font-family:var(--grotesk);font-size:.8125rem;
  text-transform:uppercase;letter-spacing:.04em}
/* ⚠️ у таблицы стоит `display:block;overflow-x:auto` — широкая таблица
   прокручивается, и подпись уезжает вместе с содержимым и обрезается по
   правому краю коробки. `sticky` + `min-width:100%` держат её на месте
   (этап 12, крайний случай «самая широкая таблица»). 27.09.2026 */
.mex-prose caption{caption-side:top;text-align:left;font-family:var(--grotesk);
  font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);
  padding-bottom:.4rem;position:sticky;left:0;width:min-content;min-width:100%}
/* схема псевдографикой: своя ширина, прокрутка вместо разъезда полосы */
.mex-ascii{margin:var(--s3) 0;background:var(--soft);border-left:3px solid var(--accent);
  padding:var(--s2);overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8125rem;line-height:1.45;white-space:pre}

/* ---------- врезки и подвал ---------- */
.mex-also{border-top:2px solid var(--ink);padding-top:var(--s2);margin-bottom:var(--s5)}
.mex-also h2{font-family:var(--grotesk);font-size:.8125rem;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:var(--s2)}
.mex-part{border-top:1px solid var(--rule);padding:var(--s3) 0;display:flex;flex-wrap:wrap;
  gap:var(--s3);align-items:center}
/* ⚠️ Правило 4: разметку проданных баннеров не трогаем. У баннера italia.it в
   самой разметке стоит `style="width:150px"`, а полоса держит max-height:38px —
   при файле 736×306 знак сплющивался (гейт рендера: «перекос»). Поправка идёт
   ТОЛЬКО стилем полосы: object-fit:contain вписывает знак в коробку, не меняя
   ни байта баннера. 27.09.2026 */
.mex-part img{max-height:38px;width:auto;object-fit:contain}
.mex-foot{border-top:2px solid var(--ink);margin-top:var(--s5);padding:var(--s4) 0 var(--s5);
  font-size:.9375rem}
.mex-foot-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s4)}
.mex-foot h2{font-family:var(--grotesk);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--grey);margin-bottom:.75rem}
.mex-foot ul{list-style:none;margin:0;padding:0}
.mex-foot li{margin:.35rem 0}
.mex-foot a{text-decoration:none}
.mex-foot a:hover{text-decoration:underline}
.mex-colophon{margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid var(--rule);
  color:var(--grey);font-size:.8125rem}

/* ---------- мобильная ---------- */
@media (max-width:900px){
  .mex-cards{grid-template-columns:repeat(2,1fr)}
  .mex-foot-cols{grid-template-columns:1fr 1fr}
  .mex-tag{display:none}
  /* ⚠️ цель пальца — 44×44 (норма гейта N1 и WCAG 2.5.8), полоски внутри
     остаются прежними 26 px: растёт область нажатия, не рисунок. 27.09.2026 */
  .mex-burger-lbl{display:flex;flex-direction:column;justify-content:center;
    align-items:center;gap:4px;width:44px;height:44px;margin-left:-10px;
    cursor:pointer;order:-1}
  .mex-burger-lbl span{display:block;width:26px;height:2px;background:var(--ink)}
  .mex-nav{display:none}
  /* ⚠️ `~` — соседи, а не потомки. Чекбокс лежит ПЕРЕД `<header>`, а
     `.mex-navwrap` — внутри него, поэтому `:checked ~ .mex-navwrap` не
     совпадал никогда: бургер рисовался, нажимался и не открывал ничего
     (гейт меню N3). Спускаемся через саму шапку. 27.09.2026 */
  .mex-burger:checked ~ .mex-masthead .mex-nav{display:block}
  .mex-nav-list{flex-direction:column;gap:0}
  .mex-nav a{display:block;padding:.7rem 0;border-bottom:1px solid var(--rule);width:100%}
}
@media (max-width:640px){
  body{font-size:1.0625rem}
  .mex-cards{grid-template-columns:1fr}
  .mex-feed li{grid-template-columns:1fr;gap:.35rem}
  .mex-foot-cols{grid-template-columns:1fr}
  .mex-lead{padding-top:var(--s4)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}