:root{--ink:#17323a;--inkSoft:#4a636a;--paper:#ffffff;--sand:#f4f1ea;
 --line:#dcd7cc;--clay:#a8623c;--clayInk:#ffffff;--clayLight:#be896d;--leaf:#2f6b5f;
 --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
 --head:"Fraunces","Iowan Old Style",Georgia,serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--body)}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--leaf)}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(30px,4.4vw,50px)}
h2{font-size:clamp(23px,2.6vw,32px)}
h3{font-size:17px;font-family:var(--body);font-weight:600;line-height:1.3}
p{margin:0 0 1em}

/* Полоса страницы одна на все блоки: ширина и гутер заданы ЗДЕСЬ и нигде
   больше не переопределяются — иначе секции разъезжаются по краям. */
.aim-wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.aim-sec{padding-block:clamp(38px,5vw,68px)}
.aim-sec--sand{background:var(--sand)}
.aim-sec--ink{background:var(--ink);color:var(--paper)}
.aim-sec--ink h2{color:var(--paper)}

/* Верхняя служебная строка: у образца здесь обещания доставки и возвратов —
   у нас их быть не может (§6), поэтому строка несёт только то, что правда:
   кто мы и когда обновлены цены. */
.aim-strip{background:var(--ink);color:var(--paper);font-size:13px;text-align:center;padding:9px 16px}
.aim-strip b{font-weight:600}

.aim-head{border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:5}
.aim-head-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);padding-block:14px;flex-wrap:wrap}
.aim-logo{font-family:var(--head);font-size:24px;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.aim-logo small{display:block;font-family:var(--body);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--inkSoft);font-weight:500;margin-top:2px}
.aim-nav{display:flex;gap:clamp(10px,1.6vw,22px);flex-wrap:wrap;margin-left:auto}
.aim-nav a{color:var(--ink);text-decoration:none;font-size:14.5px;padding:6px 2px;border-bottom:2px solid transparent}
.aim-nav a:hover,.aim-nav a[aria-current]{border-bottom-color:var(--clay)}

/* Герой: текст слева, кадр справа; на телефоне кадр уходит под текст. */
.aim-hero{background:var(--ink);color:var(--paper)}
.aim-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,4vw,54px);align-items:center;padding-block:clamp(22px,2.4vw,32px)}
.aim-hero .aim-shot{max-width:330px;margin-inline-start:auto;width:100%}
.aim-hero .aim-shot img{aspect-ratio:1/1;max-height:330px}
.aim-hero h1{color:var(--paper);max-width:22ch;font-size:clamp(28px,3.6vw,42px)}
.aim-hero p{color:#dfe7e6;max-width:56ch;margin-bottom:.6em}
.aim-badge{display:inline-block;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:5px 14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.aim-cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 16px}
.aim-btn{display:inline-block;background:var(--clay);color:var(--clayInk);text-decoration:none;font-weight:600;font-size:15px;padding:12px 22px;border-radius:6px;border:1px solid var(--clay)}
/* ПРИЗРАЧНАЯ КНОПКА КРАСИТСЯ ПО СВОЕЙ ПОЛОСЕ, А НЕ ОДИН РАЗ НА ВЕСЬ САЙТ.
   Она родилась в тёмном герое, где текст цвета бумаги верен, и тем же
   правилом уехала на 404 — а там полоса светлая, и вышло БЕЛОЕ ПО БЕЛОМУ,
   1:1: кнопки «See the covers» на странице 404 просто не было видно (поймано
   стражем контраста 15.09, дефект стоял на проде с 08.09). По умолчанию
   теперь чернила на светлом (12.5:1), а светлый вариант включает та полоса,
   которая знает, что она тёмная. */
.aim-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.aim-hero .aim-btn--ghost,.aim-sec--ink .aim-btn--ghost{color:var(--paper);border-color:rgba(255,255,255,.5)}
.aim-facts{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:#cfdad9;margin:0;padding:0;list-style:none}
.aim-facts li::before{content:"✓";color:var(--clay);margin-right:7px;font-weight:700}
.aim-shot{border-radius:10px;overflow:hidden;background:var(--paper)}
.aim-shot img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--paper)}
@media(max-width:860px){.aim-hero-in{grid-template-columns:1fr}}

/* Сетка карточек: неполный последний ряд ЦЕНТРИРУЕТСЯ на всех ширинах (§5). */
.aim-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.6vw,20px)}
.aim-grid>*{flex:0 1 calc(25% - 15px);min-width:0}
@media(max-width:1000px){.aim-grid>*{flex:0 1 calc(33.333% - 14px)}}
@media(max-width:700px){.aim-grid>*{flex:0 1 calc(50% - 10px)}}
@media(max-width:400px){.aim-grid>*{flex:1 1 100%}}
.aim-grid--3>*{flex:0 1 calc(33.333% - 14px)}
@media(max-width:800px){.aim-grid--3>*{flex:0 1 calc(50% - 10px)}}
@media(max-width:520px){.aim-grid--3>*{flex:1 1 100%}}

.aim-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:9px;overflow:hidden;min-width:0}
.aim-card-shot{display:block;background:var(--paper)}
.aim-card-shot img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--paper)}
/* Кадр, который исходник не тянет при DPR 2, не растягивается: потолок у
   каждого кадра свой и стоит в инлайновом style. width:auto тут ставить
   нельзя — рядом aspect-ratio, и кадр схлопывается в 0x0. */
.aim-card-shot img.aim-cap,img.aim-cap{width:100%;margin-inline:auto;display:block}
.aim-card-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.aim-card-body h3{margin:0}
.aim-card-body h3 a{color:var(--ink);text-decoration:none}
.aim-meta{font-size:13px;color:var(--inkSoft);margin:0}
.aim-price{font-size:19px;font-weight:700;font-family:var(--head);margin:0}
.aim-foot{margin-top:auto;padding-top:10px}
.aim-buy{display:block;text-align:center;background:var(--clay);color:var(--clayInk);text-decoration:none;font-weight:600;font-size:14px;padding:11px 12px;border-radius:6px}

.aim-coll{display:block;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.aim-coll img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--paper)}
.aim-coll-b{padding:14px 16px 18px}
.aim-coll-b h3{margin:0 0 4px}
.aim-coll-b p{font-size:14px;color:var(--inkSoft);margin:0 0 8px}
.aim-coll-b span{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);font-weight:600}

/* Полоса цифр: ВСЁ считается из нашего каталога, ни одного «100%» и ни одной
   выдуманной статистики (§6.2). */
.aim-nums{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);justify-content:space-between}
.aim-num{flex:1 1 160px}
.aim-num b{display:block;font-family:var(--head);font-size:clamp(26px,3.4vw,40px);color:var(--clayLight);line-height:1.1}
.aim-num span{font-size:14px;color:#cfdad9}

.aim-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3.4vw,48px);align-items:center}
@media(max-width:860px){.aim-split{grid-template-columns:1fr}}
.aim-list{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.aim-list li{padding-left:24px;position:relative;font-size:15px}
.aim-list li::before{content:"◆";position:absolute;left:0;top:1px;color:var(--clay);font-size:12px}
.aim-list b{font-weight:600}

.aim-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:9px;background:var(--paper)}
.aim-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:430px}
.aim-table th{text-align:left;background:var(--ink);color:var(--paper);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:11px 14px;font-weight:600}
.aim-table td{border-top:1px solid var(--line);padding:11px 14px;vertical-align:top}
.aim-table td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:640px){
 .aim-table{min-width:0}
 .aim-table thead{position:absolute;left:-9999px}
 .aim-table tr{display:block;border-top:1px solid var(--line);padding:8px 0}
 .aim-table td{display:flex;justify-content:space-between;gap:14px;border:0;padding:4px 14px}
 .aim-table td::before{content:attr(data-label);font-weight:600;color:var(--inkSoft)}
 .aim-table td.num{text-align:right}
}

/* Проза: меру строки держат КОЛОНКИ, а не поля (§5). */
.aim-prose{columns:2;column-gap:clamp(24px,3.4vw,46px);overflow-wrap:anywhere}
/* ГРУППА РАССКАЗА ИДЁТ ВО ВСЮ ПОЛОСУ, А НЕ В ДВЕ КОЛОНКИ. Вывод предыдущих
   сайтов: columns:2 на группе из двух-трёх абзацев сама становится находкой
   стража зажатого текста — длинный абзац заполняет левую колонку, короткий
   покрывает правую на треть, и рядом стоит пустота. Меру строки в такой
   группе держит сама полоса, а разрывы стоят МЕЖДУ группами. */
.aim-storytext{margin-top:22px}
.aim-storytext p{max-width:none}
.aim-storytext+.aim-visual{margin-top:26px}

/* ---------- формы визуального разрыва прозы (§5) ---------- */
/* Отбивка СНИЗУ тоже нужна: в две колонки подпись формы вставала вплотную к
   следующему абзацу, и они читались одним куском (глаз, приёмка 15.09). */
.aim-visual{margin:26px 0 22px}
.aim-visual figcaption{margin-top:10px;font-size:14px;color:var(--inkSoft);line-height:1.5}
/* 1. лента отделов настоящими кадрами */
.aim-vstrip{border-top:1px solid var(--line);padding-top:18px}
/* НЕПОЛНЫЙ ПОСЛЕДНИЙ РЯД ЦЕНТРИРУЕТСЯ (§5). Семь отделов ни на одной ширине
   не делятся нацело: на 1024 это 4+3, и сетка прижимала тройку влево —
   justify-content у грида центрирует ДОРОЖКИ, а не элементы. Флекс с
   вычисленной базой даёт и равные ширины, и центр последнего ряда. */
.aim-vstrip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.2vw,14px)}
/* ПОТОЛОК БОКСА 250px — ПРАВИЛО ЭТОГО САЙТА. Исходники у бренда 500px по
   длинной стороне, поэтому §4.0 держит бокс кадра нигде не шире 250 CSS px:
   при DPR 2 это ровно 500 и есть, «макет подгоняется под исходник». Первая
   версия ленты шла до 288px и браузерный аудит честно нашёл растянутые кадры
   на /about. Потолок ставим на ячейку, а не на кадр: иначе подпись отрывается
   от своего кадра. */
.aim-vstrip-row>a{flex:0 1 calc(14.2857% - 12px);min-width:0;max-width:186px}
@media(max-width:1300px){.aim-vstrip-row>a{flex-basis:calc(25% - 10.5px)}}
@media(max-width:900px){.aim-vstrip-row>a{flex-basis:calc(33.333% - 9.34px)}}
@media(max-width:560px){.aim-vstrip-row>a{flex-basis:calc(50% - 4px)}}
.aim-vstrip-c{display:block;min-width:0;text-decoration:none;color:inherit}
/* КАДРЫ ЛЕНТЫ ОБЯЗАНЫ БЫТЬ ОДНОЙ ВЫСОТЫ. Без своей пропорции кадр каждой
   линии тянется по-своему, и подписи под ними встают на разной высоте — ряд
   читается рваным (поймано глазом на приёмке). Пропорция 3:4 — та, в которой
   сняты пакшоты этого бренда, поэтому обрезка почти ничего не срезает. */
/* КАДР ЛЕНТЫ ЖИВЁТ ПО ТЕМ ЖЕ ПРАВИЛАМ, ЧТО ПЛИТКА ОТДЕЛА НА ГЛАВНОЙ, и это не
   лень, а §4.0 этого сайта в одном месте: --cap ставит сам parts.shot по
   ЧЕСТНОМУ размеру исходника, а 186px — потолок, дальше которого кадр 400px
   шириной растягивать нельзя. Первая версия ленты была скопирована с соседнего
   сайта: без width/height:auto высота приходила из атрибута и давала бокс
   186x360, а object-fit:cover срезал у пакшота от 31 до 52 процентов — ровно
   то, что браузерный аудит и показал. На пакшоте одежды обрезки быть не
   должно: вещь показывают целиком, поэтому contain. */
.aim-vstrip-c img{width:100%;max-width:min(var(--cap,186px),186px);aspect-ratio:3/4;object-fit:contain;
 height:auto;background:var(--sand);padding:8px;margin-inline:auto;border-radius:3px}
.aim-vstrip-c b{display:block;margin-top:8px;font-size:15px;line-height:1.25}
.aim-vstrip-c span{display:block;font-size:13px;color:var(--inkSoft)}
.aim-vstrip-c:hover b{text-decoration:underline}
/* 2. и 5. шкала: рисунок SVG, ПОДПИСИ ОБЫЧНЫМ HTML (урок kalidi) */
.aim-vscale{border-top:2px solid var(--ink);padding-top:6px}
.aim-vscale-row{display:grid;grid-template-columns:minmax(64px,110px) minmax(0,1fr) minmax(86px,140px);
 gap:clamp(8px,1.4vw,18px);align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.aim-vscale-l{font-size:15px}
.aim-vscale-n{font-size:14px;color:var(--inkSoft);text-align:right;font-variant-numeric:tabular-nums}
/* --clayInk это БЕЛЫЙ (текст ПОВЕРХ глины), а не сама глина. Полосы шкалы и
   пиктограммы шагов красились им и на белом листе были невидимы — та же
   ошибка, что белая призрачная кнопка на светлой 404: цвет взят по имени, а
   не по поверхности, на которой он лежит. Рисунок красим самой глиной. */
.aim-vscale-bar{display:block;min-width:0;color:var(--clay)}
.aim-vscale-bar svg{display:block;width:100%;height:10px}
@media(max-width:520px){.aim-vscale-row{grid-template-columns:minmax(52px,1fr) minmax(0,1.6fr) minmax(70px,1fr);gap:8px}
 .aim-vscale-l,.aim-vscale-n{font-size:13px}}
/* 4. шаги с пиктограммами */
.aim-vsteps{padding-top:4px}
.aim-vsteps-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,26px);
 margin:0;padding:0;list-style:none}
@media(max-width:760px){.aim-vsteps-row{grid-template-columns:minmax(0,1fr)}}
.aim-vsteps-row li{min-width:0;border-top:2px solid var(--clay);padding-top:12px}
.aim-vsteps-g{display:block;width:40px;height:40px;color:var(--clay);margin-bottom:8px}
.aim-vsteps-g svg{display:block;width:100%;height:100%}
.aim-vsteps-row b{display:block;font-size:16px;margin-bottom:5px}
.aim-vsteps-row span{display:block;font-size:14px;color:var(--inkSoft);line-height:1.5}
/* 5. пара «кому одно, кому другое» */
.aim-vpair{padding-top:4px}
.aim-vpair-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4vw,32px)}
@media(max-width:700px){.aim-vpair-row{grid-template-columns:minmax(0,1fr)}}
.aim-vpair-row>div{min-width:0;background:var(--sand);padding:clamp(14px,1.8vw,22px)}
.aim-vpair-row b{display:block;font-size:17px;margin-bottom:8px}
.aim-vpair-row ul{margin:0;padding-left:1.1em}
.aim-vpair-row li{font-size:14.5px;color:var(--inkSoft);line-height:1.55;margin-bottom:5px}

.aim-quotes{columns:2;column-gap:clamp(24px,3.4vw,46px)}
.aim-quotes blockquote{break-inside:avoid}
.aim-prose p{break-inside:avoid}
@media(max-width:760px){.aim-quotes{columns:1}.aim-prose{columns:1}}
.aim-lead{font-size:17.5px;color:var(--inkSoft);max-width:64ch}

.aim-qa{display:grid;gap:14px}
.aim-qa details{border:1px solid var(--line);border-radius:9px;background:var(--paper);padding:14px 16px}
.aim-qa summary{font-weight:600;cursor:pointer;font-size:15.5px}
.aim-qa p{margin:10px 0 0;font-size:15px;color:var(--inkSoft)}

.aim-gal{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.aim-gal img{width:82px;height:82px;object-fit:contain;background:var(--paper);border:1px solid var(--line);border-radius:6px}

.aim-crumbs{font-size:13px;color:var(--inkSoft);padding-block:12px}
.aim-crumbs a{color:var(--inkSoft)}

.aim-footer{background:var(--ink);color:#cfdad9;padding-block:clamp(30px,4vw,50px);margin-top:clamp(30px,4vw,54px)}
.aim-footer a{color:#e6ecea;text-decoration:none}
.aim-footer a:hover{text-decoration:underline}
.aim-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(20px,3vw,44px)}
@media(max-width:760px){.aim-foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.aim-foot-grid{grid-template-columns:1fr}}
.aim-foot-grid h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);margin:0 0 12px}
.aim-foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
.aim-foot-note{border-top:1px solid rgba(255,255,255,.16);margin-top:26px;padding-top:18px;font-size:13px;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}