/* ayurpathic.com — оформление.

   Направление: тёплый лён вместо белого, кремовые карточки, глубина
   стопкой поверхностей вместо теней, антиква в заголовках, шалфей как
   единственный цвет и только заливкой-подсветкой.

   Шрифт один и свой: Playfair Display, вариативный, латиница, 37 КБ,
   лицензия OFL лежит рядом в assets/fonts/. Сторонних хостов нет ни
   одного — ни CDN, ни Google Fonts: правило 8 в CLAUDE.md, и QA это
   проверяет. Текст читается системной гарнитурой, антиква работает
   только на заголовках — она и делает разницу, а вторые 40 КБ ради
   основного текста не окупаются.

   Имя файла получает контент-хэш при сборке (style.{hash}.css).
   /assets/playfair.5ca5d929.woff2 подставляет build.php уже хэшированным путём. */

@font-face{
  font-family:"Playfair Display";
  src:url("/assets/playfair.5ca5d929.woff2") format("woff2");
  font-weight:400 900;          /* вариативный: один файл на все начертания */
  font-style:normal;
  font-display:swap;
}

:root{
  /* Поверхности. Карточка светлее холста — этого достаточно, чтобы она
     читалась приподнятой. Теней в макете нет ни одной. */
  --canvas:#edede2;
  --card:#fffff3;
  --inner:#ffffff;              /* только под фото и внутри элементов UI */

  --ink:#000000;                /* заголовки, цена, всё главное */
  --body:#333333;
  --muted:#6f6f5e;

  --line:#dcdcc9;
  --line-2:#e9e9d9;

  /* Шалфей — единственный цвет. Никогда не заливка кнопки и не крупный
     блок: только подсветка различий и метки. */
  --sage:#beedc0;
  --sage-wash:#e7f6e8;
  --sage-line:#a6dcaa;

  --btn-bg:#000000;
  --btn-ink:#ffffff;

  --radius:10px;
  --radius-sm:7px;
  --pill:999px;

  --wrap:1040px;
  --measure:68ch;
  --section:68px;

  --serif:"Playfair Display","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* Тёмная тема остаётся тёплой: холодный серый убил бы весь замысел.
   Подложка под фото светлая и в темноте — снимки Amazon сняты на белом,
   на тёмном фоне у них вылезла бы рамка. */
@media (prefers-color-scheme:dark){
  :root{
    --canvas:#15150e;
    --card:#1e1e15;
    --inner:#f6f6ea;

    --ink:#f4f4e6;
    --body:#c6c6b3;
    --muted:#8d8d7a;

    --line:#2f2f22;
    --line-2:#37372a;

    --sage:#315134;
    --sage-wash:#1f3321;
    --sage-line:#436b47;

    --btn-bg:#f4f4e6;
    --btn-ink:#15150e;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--body);
  font:17px/1.75 var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto}

/* Ссылки без цвета: в монохромной вёрстке подчёркивание несёт нагрузку
   лучше, чем синий. Цветом остаётся только шалфей на подсветках. */
a{color:var(--ink)}
main a{
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:var(--line);
  transition:text-decoration-color .15s ease;
}
main a:hover{text-decoration-color:currentColor}

/* ---------- каркас ---------- */

.topbar{
  background:var(--btn-bg);color:var(--btn-ink);
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;padding:10px 16px;
}
.topbar b{font-weight:600}

header.site,footer.site,main{max-width:var(--wrap);margin:0 auto;padding:0 22px}
header.site{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  padding-top:30px;padding-bottom:24px;
  border-bottom:1px solid var(--line);margin-bottom:40px;
}
.brand{
  font-family:var(--serif);font-weight:600;font-size:26px;
  letter-spacing:-.015em;color:var(--ink);text-decoration:none;
}
.sitenav{display:flex;gap:26px;flex-wrap:wrap;font-size:14.5px}
.sitenav a{color:var(--body);text-decoration:none}
.sitenav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

footer.site{
  margin-top:var(--section);border-top:1px solid var(--line);
  padding-top:30px;padding-bottom:60px;
  color:var(--muted);font-size:13.5px;
}
footer.site .verified{margin:0 0 6px}
footer.site .legal a{color:var(--muted)}

/* ---------- типографика ---------- */

.crumb{
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px;
}
.crumb a{color:var(--muted)}

h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(33px,5.4vw,50px);line-height:1.16;letter-spacing:-.018em;
  color:var(--ink);margin:0 0 20px;max-width:20ch;
}
h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(23px,3vw,31px);line-height:1.26;letter-spacing:-.012em;
  color:var(--ink);margin:var(--section) 0 18px;
}
h3{font-size:17px;font-weight:700;color:var(--ink);margin:30px 0 8px;line-height:1.4}

/* Длина строки ограничивается только у сплошного текста. Таблицы,
   карточки и списки ссылок живут по своим правилам. */
main>p,.faq p,.errorpage p{max-width:var(--measure)}

/* ---------- вердикт: прямой ответ первым экраном ---------- */

.verdict{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 30px;margin:0 0 38px;
}
.verdict p{
  margin:0;max-width:none;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(19px,2.3vw,24px);line-height:1.5;color:var(--ink);
}

/* ---------- карточки моделей ---------- */

/* Карточка — самостоятельный элемент: её используют и пара на /vs/,
   и сетка каталога, и рейтинги /best/. */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
}
.cbody{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.mname{
  margin:0 0 4px;font-family:var(--serif);font-weight:600;
  font-size:19px;line-height:1.3;color:var(--ink);
}
.mname a{text-decoration:none}
.mname a:hover{text-decoration:underline;text-underline-offset:3px}
.specs{margin:10px 0 14px;font-size:14px;color:var(--muted);line-height:1.6}

.duo{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.duo .specs{margin:10px 0 0}

/* Сетка каталога. auto-fill вместо фиксированного числа колонок: она
   одинаково хорошо ложится и на 15 моделей, и на 3. */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:20px;margin:0 0 10px;
}
.grid .cbody{padding:18px 18px 20px}
.grid .mname{font-size:17px}
.grid .price__num{font-size:24px}
.grid .shot{height:206px;padding:16px}

/* Фото товара. Белая подложка — это единственное место, где в макете
   допущен чистый белый: снимки Amazon сняты на белом, и на кремовом
   фоне у них вылезла бы заметная рамка. */
/* Высота задана в пикселях, а не через aspect-ratio. У снимков Amazon
   пропорции разные (500×500, 500×375, 429×500), и aspect-ratio их не
   удерживает: высота контейнера остаётся неопределённой, процентная
   max-height картинки не разрешается, и блок растягивается под снимок.
   Ряд карточек получал разнобой 183 / 233 / 267 пикселей.
   Определённая высота разрывает эту зависимость. */
.shot{
  background:var(--inner);border-bottom:1px solid var(--line-2);
  height:272px;display:grid;place-items:center;padding:20px;
}
/* width/height:100% + contain, а не max-*: у элемента грида автоматический
   минимальный размер равен собственной высоте картинки и перебивает
   max-height — портретный снимок 429×500 всё равно вылезал. При
   определённой высоте контейнера проценты разрешаются честно. */
.shot img{width:100%;height:100%;object-fit:contain;display:block;min-height:0}

/* Плашка с фирменным цветом — запасной вариант там, где фото нет.
   Чужие логотипы не используем принципиально. */
.plate{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--plate);color:var(--plate-ink);
  font-family:var(--serif);font-weight:600;letter-spacing:.02em;
}
.plate--md{height:272px;width:100%;font-size:34px;border-radius:0}
.grid .plate--md{height:206px;font-size:28px}
.plate--sm{
  height:24px;min-width:40px;font-size:11px;border-radius:var(--radius-sm);
  padding:0 8px;font-family:var(--sans);font-weight:700;letter-spacing:.04em;
}

/* Разница между моделями. Шалфей здесь заливкой-подсветкой, а не плотным
   цветом: колонка во всю высоту карточки в насыщенном #beedc0 перетягивала
   внимание с цен — ровно та ошибка, от которой предостерегает референс
   («никогда крупными блоками»). */
.gap{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:132px;padding:16px 14px;text-align:center;
  background:var(--sage-wash);border:1px solid var(--sage-line);
  border-radius:var(--radius);
}
.gap b{font-family:var(--serif);font-size:31px;line-height:1.05;color:var(--ink)}
.gap span{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-top:8px;line-height:1.45;
}

/* ---------- цена и переход ---------- */

.price{margin:auto 0 0}
.price__num{
  display:block;font-size:31px;font-weight:700;letter-spacing:-.025em;
  line-height:1.1;color:var(--ink);
}
.price__asof{
  display:block;margin-top:6px;
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.nolisting{font-size:14px;color:var(--muted);margin:auto 0 0}

.cta{
  display:block;margin-top:18px;text-align:center;
  background:var(--btn-bg);color:var(--btn-ink);
  font-size:15px;font-weight:600;letter-spacing:.01em;
  padding:14px 24px;border-radius:var(--pill);text-decoration:none;
  transition:opacity .15s ease;
}
.cta:hover{opacity:.84}
/* max-width:none — дисклоужер выравнивается по центру страницы, а не по
   центру колонки прозы в 68 знаков: иначе он съезжает влево и читается
   как случайно оставленная подпись. */
.disclosure{
  font-size:11.5px;color:var(--muted);margin:14px 0 0;
  text-align:center;max-width:none;
}

/* ---------- таблица спеков ---------- */

.twrap{
  overflow-x:auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:460px}
th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line-2)}
thead th{
  font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);
}
tbody tr:last-child td{border-bottom:0}
tr.same td{color:var(--muted)}
tr.diff td{background:var(--sage-wash)}
tr.diff td:first-child{font-weight:600;color:var(--ink)}
.legend{font-size:12.5px;color:var(--muted);margin:12px 0 0}

/* ---------- прочее ---------- */

.faq h3{margin-top:26px}
.faq p{margin:0 0 6px}

.links{list-style:none;padding:0;margin:0}
.links li{padding:14px 0;border-bottom:1px solid var(--line)}
.links li:last-child{border-bottom:0}

.pick{
  display:inline-block;background:var(--sage);color:var(--ink);
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 11px;border-radius:var(--pill);vertical-align:middle;
}
.why{font-size:14.5px;color:var(--body);margin:0 0 12px}
.muted{color:var(--muted)}
.spark{display:block;width:100%;height:140px;margin:0 0 14px}

.duo--three{grid-template-columns:repeat(3,1fr)}
.duo--single{grid-template-columns:1fr;max-width:380px}

.errorpage{text-align:center;padding:56px 0}
.errorpage .mark{width:76px;height:76px;color:var(--ink);opacity:.5;margin:0 auto 22px;display:block}
.errorpage p{max-width:54ch;margin:0 auto 24px}
.errorpage .links{max-width:46ch;margin:0 auto;text-align:left}

/* ---------- узкие экраны ---------- */

@media(max-width:900px){
  .duo{grid-template-columns:1fr}
  .duo--three{grid-template-columns:1fr}
  .gap{order:3;flex-direction:row;gap:12px;min-width:0;padding:14px}
  .gap span{margin-top:0;text-align:left}
}
@media(max-width:640px){
  :root{--section:48px}
  .shot,.plate--md{height:228px}
  .grid .shot,.grid .plate--md{height:196px}
  body{font-size:16px}
  header.site,footer.site,main{padding-left:18px;padding-right:18px}
  header.site{padding-top:22px;padding-bottom:18px;margin-bottom:28px}
  .brand{font-size:22px}
  .sitenav{gap:18px;font-size:14px}
  .verdict{padding:22px 20px}
  h1{max-width:none}
}

/* Размер цели нажатия. Предзапусковый аудит на 375px нашёл 14 ссылок ниже
   24 CSS-пикселей по высоте — хлебные крошки и ссылки в списках. Это минимум
   WCAG 2.2 (2.5.8), и на телефоне такие ссылки промахиваются пальцем. */
.crumb{line-height:2}
.crumb a{display:inline-block;padding:4px 2px}
.links li a{display:inline-block;padding:3px 0}
footer.site .legal{line-height:2.2}
footer.site .legal a{display:inline-block;padding:4px 2px}
/* Селектор без .duo: карточка теперь живёт и в сетке каталога, а там имя
   набрано на 2px мельче и без отступа давало 23px — на пиксель ниже нормы. */
.mname a{display:inline-block;padding:3px 0}
/* Ссылка в ячейке таблицы — это не ссылка внутри предложения, на неё
   исключение WCAG для строчных целей не распространяется. 20px без
   отступа, 24px с ним. */
td a{display:inline-block;padding:2px 0}
/* Одинокая ссылка в абзаце — это не строчная ссылка внутри предложения,
   исключение WCAG на неё не действует. :only-child отделяет её от ссылок
   в связном тексте, которых правило касаться не должно. */
main p>a:only-child{display:inline-block;padding:2px 0}
.sitenav a{display:inline-block;padding:3px 0}

/* Уважать системную настройку «меньше движения». */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}