/* hub.css — единственная таблица стилей хаба. До 2026-08-09 каждая страница носила
   свой инлайн-CSS, и любая правка расходилась по четырём файлам.

   Тема: бумага и типографская краска. Светло, резко, контрастно, с характером —
   решение автора 08-09 («тёмное читается как сон, хочу чтобы всё было резко видно»).
   Правила стиля: нулевые скругления · линии толстые, а не волосяные · заголовки
   секций — чёрные плашки, а не серый мелкий текст · у медиа жёсткая тень со
   смещением и без размытия, будто вырезано и положено сверху. */

:root{
  --paper:#F7F4EE;      /* тёплая бумага, не клинический белый */
  --ink:#14110E;
  --mute:#6B635A;
  --accent:#D93A00;     /* киноварь — единственный громкий цвет */
  --hair:#DBD4C7;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%}
::selection{background:var(--accent);color:var(--paper)}

/* ── верхняя панель: имя слева, контакты справа ─────────────────────
   Решение автора 08-10: все контакты в верхней панели, а не в подвале.
   Чёрная полоса во всю ширину — та же резкость, что у плашек-заголовков.
   Панель липкая (08-27, слово автора): при прокрутке остаётся на экране, чтобы
   переключатель языка и контакты были под рукой на любой глубине страницы. */
.topbar{background:var(--ink);color:var(--paper);display:flex;flex-wrap:wrap;gap:10px 22px;
  align-items:baseline;justify-content:space-between;padding:11px 28px;
  position:sticky;top:0;z-index:50}
.topbar a{color:var(--paper);text-decoration:none}
.topbar .me{font:700 14px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.01em}
.topbar .links{display:flex;align-items:center;gap:20px}
.topbar .links a{display:inline-flex;align-items:center;line-height:0;
  border-bottom:2px solid transparent;padding-bottom:2px}
.topbar .links svg{width:17px;height:17px;display:block}
.topbar .links a:hover{color:var(--accent);border-color:var(--accent)}
.topbar .links .ru{font:600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;
  border:1px solid currentColor;padding:2px 2px 1px;margin-left:4px;align-self:flex-start;opacity:.8}
/* Переключатель языка. Стоит за чертой от контактов, потому что это не способ
   связи, а другая дверь в то же собрание работ. Подпись — язык, КУДА ведёт. */
.topbar .links a.lang{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;line-height:1;padding-left:20px;margin-left:-2px;
  border-left:1px solid rgba(247,244,238,.3)}
.topbar .links a.lang:hover{border-bottom-color:var(--accent)}
@media(max-width:560px){.topbar{padding:11px 18px}.topbar .links{gap:14px;font-size:10.5px}
  .topbar .links a.lang{padding-left:14px}}

.wrap{max-width:1180px;margin:0 auto;padding:5vh 28px 8vh}
.wrap.page{max-width:940px}

/* ── заголовки и служебные подписи ─────────────────────────────────── */
h1{font-size:clamp(38px,6.4vw,72px);font-weight:800;letter-spacing:-.035em;line-height:.97;margin:0}
.who{font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  margin:0 0 .7rem}
.sub{max-width:44em;color:var(--mute);font-size:16px;margin:0 0 3rem}

/* ── внешние ссылки под лидом: код · стор · демо ───────────────────────
   Решение автора 08-16: «ссылки на продукт-гит-иной ресурс должны быть на
   видном месте, это важная информация чтобы перейти и посмотреть/пощупать
   вживую. Это культура». До этого единственная ссылка на живую вещь пряталась
   внутрь предложения в подвале. Чип — та же вещь, что карточка каталога:
   рамка в две линии, жёсткая тень при наведении, поднимается со стола. */
.ext{display:flex;flex-wrap:wrap;gap:12px;margin:1.7rem 0 .4rem}
.ext a{display:inline-flex;align-items:baseline;gap:10px;border:2px solid var(--ink);background:var(--paper);
  padding:9px 13px 8px;color:var(--ink);text-decoration:none;
  font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;text-transform:uppercase;
  transition:transform .12s,box-shadow .12s}
.ext a .w{font:400 13px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:0;text-transform:none;color:var(--mute)}
.ext a:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink);border-color:var(--accent);color:var(--accent)}
.ext a:hover .w{color:var(--accent)}

/* ── схематичная строка вместо абзаца ──────────────────────────────────
   Решение автора 08-16: «более схематично, меньше прозы, больше хайлайтов».
   Имя · что это · как себя ведёт. Абзац о трёх вещах превращается в три строки,
   которые сравниваются глазом. */
.spec{margin:1.2rem 0 0;border-top:2px solid var(--ink);max-width:58em}
.spec .r{display:grid;grid-template-columns:11em 1fr 15em;gap:8px 18px;padding:12px 0;
  border-bottom:1px solid var(--hair);align-items:baseline}
.spec .r b{font:600 13px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
.spec .r span{font-size:15.5px}
.spec .r i{font-style:normal;color:var(--mute);font-size:13.5px;text-align:right}
.spec .r em{font-style:normal;font-weight:600}
@media(max-width:640px){.spec .r{grid-template-columns:1fr;gap:2px}.spec .r i{text-align:left}}

/* ── колофон: признание, набранное как правка корректора ───────────────
   Решение автора 08-16. Смысл несёт не фраза, а вычерк: сделано НЕ ИИ —
   сделано С НИМ. Инструментом управляют, а не наоборот. Поэтому «by»
   зачёркнуто от руки (линия чуть под углом, как карандашом), а «with»
   вписано киноварью — тем же единственным громким цветом, что и всё,
   на что стоит смотреть. Стоит сразу под строкой-заявлением, мелко. */
.colophon{margin:0 0 .2rem;font:400 13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--mute);letter-spacing:.01em}
.colophon del{text-decoration:none;position:relative;padding:0 1px}
.colophon del::after{content:"";position:absolute;left:-3px;right:-3px;top:53%;height:2px;
  background:var(--ink);transform:rotate(-5deg);transform-origin:center}
.colophon ins{text-decoration:none;color:var(--accent);font-weight:600}

h2{display:inline-block;background:var(--ink);color:var(--paper);
  font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 11px 6px;margin:3.2rem 0 1.2rem}

/* ── головa страницы проекта ───────────────────────────────────────── */
.back{display:inline-block;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--ink);padding-bottom:2px}
.back:hover{color:var(--accent);border-color:var(--accent)}
.head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:2.6rem 0 0}
.lede{max-width:38em;font-size:clamp(17px,1.9vw,20px);line-height:1.45;margin:1.1rem 0 2.6rem}

.stage{background:var(--ink);color:var(--paper);
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 9px 5px;white-space:nowrap}

/* ── карточки каталога ─────────────────────────────────────────────── */
.card{display:flex;flex-direction:column;background:var(--paper);border:2px solid var(--ink);
  overflow:hidden;transition:transform .12s,box-shadow .12s}
.card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--ink)}
.card .face{display:block;text-decoration:none;color:inherit;flex:1}
/* Полоса живого адреса внутри карточки. Решение автора 08-16: отдельная строка
   живых ссылок над каталогом дублировала карточки; адрес должен лежать там же,
   где вещь. Карточка перестала быть одной ссылкой — тело ведёт на страницу,
   полоса ведёт к самой вещи, граница между ними видна линией. */
.card .try{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-top:2px solid var(--ink);padding:9px 15px 8px;text-decoration:none;color:var(--mute);
  font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.card .try span{font-size:12px}
.card .try:hover{background:var(--ink);color:var(--paper)}
/* ── теги студии (10-07) ───────────────────────────────────────────────
   Категории — теги области, у карточки их несколько. Строка над каталогом
   отбирает карточки; те же теги стоят внизу каждой карточки и отбирают так же.
   Отбор пишется в адрес (#education), поэтому каталог можно дать уже отобранным. */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:1.8rem 0 1.4rem}
.filter a{display:inline-flex;align-items:baseline;gap:7px;border:2px solid var(--ink);background:var(--paper);
  padding:7px 10px 6px;color:var(--ink);text-decoration:none;
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.filter a i{font-style:normal;color:var(--mute);letter-spacing:0}
.filter a:hover{border-color:var(--accent);color:var(--accent)}
.filter a.on{background:var(--ink);color:var(--paper)}
.filter a.on i{color:var(--paper);opacity:.6}
@media(max-width:560px){.filter{gap:6px}.filter a{padding:6px 8px 5px;font-size:10px;letter-spacing:.08em}}
.card[hidden]{display:none}
.card .tags{display:flex;flex-wrap:wrap;gap:4px 12px;padding:0 15px 13px}
.card .tags a{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--hair);
  font:600 9.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase}
.card .tags a:hover{color:var(--accent);border-color:var(--accent)}
/* Карточка без своей страницы и без живого адреса — не ссылка, и не делает вид. */
.card.still:hover{transform:none;box-shadow:none}
/* Метка языка страницы, если он не совпадает с языком каталога. */
.shot .lm{position:absolute;top:0;right:0;background:var(--ink);color:var(--paper);
  font:600 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;padding:5px 6px 4px}
/* Кто за студией — внизу каталога. */

footer.studio a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink)}
footer.studio a:hover{color:var(--accent);border-color:var(--accent)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.name{font-size:17px;font-weight:700;letter-spacing:-.015em}
.desc{margin:.55rem 0 0;font-size:14.5px;line-height:1.42;color:var(--mute)}


.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr));
  margin:0 0 2.4rem}
/* Окно обложки — пропорция самой обложки (2:1), а не 136 px: с 10-07 обложки — настоящие вещи
   на столе, и срезанный низ отрезал бы предмет. */
.shot{position:relative;aspect-ratio:2/1;background:#EDE7DB;overflow:hidden;
  border-bottom:2px solid var(--ink)}
/* Метка языка на карточке русского каталога: страница проекта откроется
   по-английски. Значок, а не фраза — устройство страницы словами не описываем. */
.shot .en{position:absolute;top:0;right:0;background:var(--ink);color:var(--paper);
  font:600 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;
  padding:5px 6px 4px}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.shot.none{display:flex;align-items:center;justify-content:center;color:var(--mute);
  font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase}
.body{padding:13px 15px 15px}

/* ── строки архива ─────────────────────────────────────────────────── */
.rows{max-width:58em;margin:0 0 2.4rem;border-top:2px solid var(--ink)}
.r{display:flex;gap:16px;align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--hair);
  font-size:15px}
.r .t{flex:1}
.r .t a{color:inherit;text-decoration:none;border-bottom:2px solid var(--ink)}
.r .t a:hover{color:var(--accent);border-color:var(--accent)}
.r .n{color:var(--mute);font-size:14px;flex:1.3}
/* Те же языковые метки, что на карточках: строки архива ведут на русские
   страницы, и на английской стороне это надо сказать до клика. */
.r .t .ru,.r .t .en{display:inline-block;font:600 8.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;border:1px solid var(--mute);color:var(--mute);
  padding:2px 3px 1px;margin-left:7px;vertical-align:1px}
.r .y,.r .c{color:var(--mute);font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.r .y{white-space:nowrap}
.r .c{max-width:16em;text-align:right}

/* ── хронология внешности: кадры подняты из гита, порядок по времени ─ */
.timeline{display:flex;gap:16px;overflow-x:auto;padding:0 0 1.2rem;margin:0 0 .4rem;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.timeline::-webkit-scrollbar{height:10px}
.timeline::-webkit-scrollbar-track{background:var(--paper);border-bottom:2px solid var(--ink)}
.timeline::-webkit-scrollbar-thumb{background:var(--ink)}
.tl{flex:0 0 300px;margin:0;scroll-snap-align:start}
.tl span{display:block;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  background:#0d0d0f;overflow:hidden;aspect-ratio:760/440;cursor:zoom-in}
.tl img{display:block;width:100%;height:100%;object-fit:cover}
.tl figcaption{padding:.9rem .1rem 0;font-size:13.5px;line-height:1.35;color:var(--mute)}
.tl time{display:block;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--accent);margin-bottom:.35rem}
.timeline.ryad{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,220px));gap:18px;overflow:visible;
  padding-bottom:.4rem}
.tl.port span{height:auto;aspect-ratio:auto}
.tl.port img{height:auto;object-fit:contain}
.tl.ahead span{background:var(--paper);border-style:dashed;box-shadow:none;display:flex;
  align-items:center;justify-content:center;padding:1.1rem;cursor:default}
.tl.ahead p{margin:0;font-size:14.5px;line-height:1.4;color:var(--ink);text-align:center}

/* ── полоска кадров: старая форма, ещё живёт на телескопе и логопеде ─
   На таймере её заменила .timeline (кадры из гита). Удалять нельзя, пока
   те две страницы не переведены на хронологию. */
.strip{display:grid;grid-template-columns:1fr 1fr .8fr;gap:18px;margin:0 0 1rem}
.frame{margin:0}
.frame a,.frame span{display:block;background:#EDE7DB;border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);overflow:hidden;height:190px}
.frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.frame figcaption{font:12.5px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mute);
  padding:1rem .1rem 0}
.next{border:2px dashed var(--ink);display:flex;flex-direction:column;justify-content:center;
  padding:1.2rem;height:190px}
.next b{display:block;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.next p{margin:0;font-size:14.5px;line-height:1.4}

/* ── живой стенд и схемы ───────────────────────────────────────────── */
.stand,.fig{margin:0 0 1rem}
.stand iframe{display:block;width:100%;height:440px;border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);background:#05060f}
.fig img{display:block;width:100%;height:auto;border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink)}
.stand figcaption,.fig figcaption{font-size:14px;color:var(--mute);padding:1.1rem .1rem 0;
  max-width:46em}
/* ── смысловое выделение в прозе ───────────────────────────────────────
   Решение автора 08-16: «у нас проза, там нет никаких выделений жирным —
   а это важно, чтобы можно было читать текст сканируя». Курсива на этих
   страницах нет вовсе: <em> набирается чернилами и полужирным, потому что
   выделение здесь значит «вот на чём держится», а не «прочтите с нажимом».
   Закон отбора живёт в DECISIONS: выделяем механизм, границу и поворот —
   не прилагательные. Проверка — прочесть подряд ТОЛЬКО выделенное. */
.stand figcaption em,.fig figcaption em,.how em,
.devlog p em,p.rule em,footer em{font-style:normal;color:var(--ink);font-weight:600}

.how{max-width:44em;margin:0 0 1rem;font-size:16px}
.how p{margin:0 0 .8rem}
/* числа: только там, где они соизмеримы между собой и что-то доказывают */
.nums{display:flex;gap:2.6rem;flex-wrap:wrap;margin:1.6rem 0 0;font-size:14px;color:var(--mute)}
.nums b{display:block;color:var(--ink);font-size:26px;font-weight:800;letter-spacing:-.02em}

/* ── тройка схем-анатомий: несколько простых картинок вместо абзаца ── */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;
  margin:0 0 1.4rem}
.trio figure{margin:0}
.trio img{display:block;width:100%;height:auto;border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);background:var(--paper)}

/* ── таблица-пример: правило показывается случаем, а не описанием ── */
.ex{width:100%;max-width:52em;border-collapse:collapse;margin:0 0 1rem;font-size:14.5px}
.ex caption{text-align:left;font-size:14px;color:var(--mute);padding:0 0 .8rem;max-width:46em}
.ex th{text-align:left;font:600 10.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:0 14px 8px 0;
  border-bottom:2px solid var(--ink);vertical-align:bottom}
.ex td{padding:9px 14px 9px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.ex .w{font-weight:700;white-space:nowrap}
.ex .g{color:var(--mute);font-size:13px}
.ex .bad{color:var(--accent);font-weight:600}
.ex .out{font-weight:600}
.exnote{max-width:46em;color:var(--mute);font-size:14px;margin:0 0 2rem}

/* ── лог решений: дата + строка, текст раскрывается ────────────────── */
.rule{max-width:46em;color:var(--mute);font-size:14.5px;margin:0 0 1.6rem}
.dec{max-width:52em;border-top:2px solid var(--ink)}
.dec:last-of-type{border-bottom:2px solid var(--ink)}
.dec summary{list-style:none;cursor:pointer;padding:.85rem 0;display:flex;gap:1.2rem;
  align-items:baseline;font-size:16px}
.dec summary::-webkit-details-marker{display:none}
.dec summary time{flex:0 0 auto;color:var(--accent);font-size:13px;font-weight:600;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dec summary span{font-weight:600;letter-spacing:-.01em}
.dec summary:hover span,.dec[open] summary span{color:var(--accent)}
.dec p{margin:0 0 1.1rem;padding-left:calc(6.2em + 1.2rem);color:var(--mute);font-size:15.5px;
  max-width:44em}

footer{margin-top:3.4rem;padding-top:1.6rem;border-top:3px solid var(--ink);font-size:15px;
  color:var(--mute);max-width:52em}
footer a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink)}
footer a:hover{color:var(--accent);border-color:var(--accent)}

/* ── лупа ──────────────────────────────────────────────────────────── */
#lb{position:fixed;inset:0;background:rgba(20,17,14,.92);display:none;align-items:center;
  justify-content:center;padding:4vh 4vw;z-index:100;cursor:zoom-out}
#lb.on{display:flex}
#lb img{max-width:100%;max-height:100%;object-fit:contain;border:2px solid var(--paper)}
#lb b{position:absolute;top:14px;right:20px;color:var(--paper);font-size:30px;font-weight:400;
  line-height:1;cursor:pointer}
[data-zoom]{cursor:zoom-in}

@media(max-width:760px){
  .spine{grid-template-columns:1fr}
  .spine .shot{border-right:0;border-bottom:2px solid var(--ink);min-height:160px}
  .strip{grid-template-columns:1fr}
  .stand iframe{height:520px}
}
@media(max-width:560px){
  .dec summary{flex-direction:column;gap:.25rem}
  .dec p{padding-left:0}
  .r{flex-wrap:wrap}
  .r .c{text-align:left;max-width:none}
}
@media(prefers-reduced-motion:reduce){a.card{transition:none}}

/* ── девлог: дата · тема · что произошло ───────────────────────────────
   Хронология работ снизу страницы проекта. Ничего не сворачивается:
   записи короткие и читаются подряд, как список. */
.devlog{max-width:54em;border-top:2px solid var(--ink)}
.devlog .e{display:grid;grid-template-columns:5.4em 5.4em 1fr;gap:.2rem 1.2rem;
  padding:.95rem 0;border-bottom:1px solid var(--hair)}
.devlog time{font:600 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent)}
.devlog .tag{font:600 10.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;color:var(--mute)}
.devlog p{margin:0;font-size:15.5px;line-height:1.45}
/* картинка к записи: показывает за секунду то, на что уходит абзац */
.devlog .pic{grid-column:3;margin:.9rem 0 .2rem;max-width:520px}
.devlog .pic img{display:block;width:100%;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);cursor:zoom-in}
@media(max-width:640px){.devlog .pic{grid-column:1/-1}}
@media(max-width:640px){
  .devlog .e{grid-template-columns:auto auto;gap:.1rem .9rem}
  .devlog p{grid-column:1/-1;padding-top:.4rem}
}

/* подвал каталога студии: на всю ширину сетки, тоньше подвала страницы */
footer.studio{margin-top:1.4rem;padding-top:1rem;border-top:2px solid var(--ink);max-width:none}
/* абзац сразу после таблицы-спецификации не должен к ней прилипать */
.spec + .how{margin-top:1.4rem}
.spec + .fig{margin-top:1.6rem}
.timeline.ryad.shir{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tl.shir span{aspect-ratio:1440/900}

/* ── главная картинка проекта (10-08) ────────────────────────────────────
   Метод сайтов (DECISIONS 08-19): первый визуал сразу после первого абзаца, крупно —
   три четверти экрана и больше; мелкий скрин не читается как скрин. Поэтому картинка
   выходит за колонку текста страницы (940) до ширины каталога (1180). */
.hero{margin:1.6rem 0 3rem;width:min(1180px,calc(100vw - 56px));position:relative;left:50%;
  transform:translateX(-50%)}
.hero span{display:block;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);cursor:zoom-in;
  background:#0d0d0f}
.hero img{display:block;width:100%;height:auto}
.hero figcaption{margin-top:.9rem;font-size:14px;color:var(--mute);max-width:44em}
@media(max-width:560px){.hero{width:calc(100vw - 36px)}.hero span{box-shadow:5px 5px 0 var(--ink)}}

/* целевое действие — кнопка к самой вещи (метод сайтов: 1–3 на страницу) */
.cta{margin:1.6rem 0 2.4rem}
.cta a{display:inline-flex;align-items:baseline;gap:10px;background:var(--ink);color:var(--paper);text-decoration:none;
  font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 18px 13px;border:2px solid var(--ink);transition:transform .12s,box-shadow .12s}
.cta a:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--accent);background:var(--accent);border-color:var(--accent)}