/* ═══════════════════════════════════════════════════════════════
Pawsport Concierge · стиль внутренних страниц (блог, About)
Токены и типографика взяты из preview-hunt-club-v4.html.
Отдельный файл, а не инлайн: страниц блога будет много, и добавление
статьи должно сводиться к копированию одного HTML.
═══════════════════════════════════════════════════════════════ */
:root{
--navy:#1E3227; --navy-deep:#152420; --cream:#F6F1E4; --paper:#FBF8F0;
--camel:#8C5A33; --camel-soft:#6F4527; --camel-lt:#C9A87C; --choc:#6E3B14;
--oxblood:#7D1D2E; --ink:#1C1C1C; --muted:#52514E;
--line:#E4DECB; --line-strong:#8F8570; --navy-line:#33453B;
--focus:#8C5A33; --focus-on-dark:#C9A87C;
--serif:'Newsreader',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
--mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);color:var(--ink);background:#FFFFFF;
font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
header :focus-visible,footer :focus-visible,.cta-band :focus-visible,
.cookies :focus-visible{outline-color:var(--focus-on-dark)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cream);color:#14211B;
font-family:var(--mono);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
padding:12px 20px;min-height:44px;display:flex;align-items:center;text-decoration:none}
.skip:focus{left:0}
.wrap{max-width:1460px;margin:0 auto;padding:0 clamp(24px,4vw,64px)}
/* ── масштаб на больших мониторах (17.08) ──────────────────────────
Правила перенесены из preview-hunt-club-v4.html (там строки 440–442)
один в один. До этого zoom был ТОЛЬКО на главной, и от 1780px
внутренние страницы выглядели мельче: шапка 82.4px против 92px на
главной, на 2560px — 82.4 против 124.2. Именно это ловилось глазом
как «на about шапка мельче», и браузерный Cmd+0 не помогал, потому
что масштаб задан CSS-свойством zoom, а не зумом браузера.
Осторожно: media-запросы считают ширину ДО zoom, поэтому на 1920px
раскладка внутренних страниц ведёт себя как на ~1714px. Сетка
карточек, читательская колонка и отсутствие переполнения на
1780/1920/2150/2560 проверены замером после переноса.
Пункт 11 аудита (сам подход body{zoom}) остаётся открытым — это
выравнивание, а не решение.
──────────────────────────────────────────────────────────────── */
@media(min-width:1780px){body{zoom:1.12}}
@media(min-width:2150px){body{zoom:1.32}}
@media(min-width:2500px){body{zoom:1.52}}
.measure{max-width:720px}
.mono{font-family:var(--mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ── шапка ─────────────────────────────────────────────────────── */
header{background:var(--navy);color:var(--cream)}
/* line-height:1.6 (17.08) — у внутренних страниц body 17px/1.65 против 16px/1.6
на главной: это читательская типографика статей, её не трогаем. Но в шапку
1.65 протекал наследованием и делал имя бренда и кнопку на 1px выше, чем на
главной. Гасим ровно в контейнере шапки — на текст страниц не влияет. */
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:16px;
line-height:1.6}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-name{font-family:var(--serif);font-size:20px;letter-spacing:.2px}
.nav-links{display:flex;gap:26px}
.nav-links a{font-family:var(--sans);font-size:14px;font-weight:500;color:#CFC8BA;
text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;
transition:color .18s,border-color .18s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--cream);border-bottom-color:rgba(246,241,228,.5)}
@media(max-width:900px){.nav-links{display:none}}
.nav-right{display:flex;align-items:center;gap:20px}
/* 17.08: добавлены border-bottom и его анимация — на главной телефон при
наведении подчёркивается, здесь подчёркивания не было. Расхождение шапок. */
.nav-phone{font-family:var(--mono);font-size:13px;letter-spacing:1.5px;color:#C0BAAE;
text-decoration:none;padding:6px 2px;border-bottom:1px solid transparent;
transition:color .18s,border-color .18s}
.nav-phone:hover{color:var(--cream);border-bottom-color:rgba(246,241,228,.5)}
@media(max-width:700px){.nav-phone{display:none}}
/* letter-spacing:.01em — как на главной; здесь его не было */
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:14px;
letter-spacing:.01em;
padding:13px 26px;border-radius:3px;border:1px solid var(--cream);color:#14211B;
background:var(--cream);text-decoration:none;cursor:pointer;
transition:background-color .18s,color .18s,transform .18s}
.btn:hover{background:var(--camel-soft);color:var(--cream);border-color:var(--camel-soft);
transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
/* ── хлебные крошки ────────────────────────────────────────────── */
/* ВНИМАНИЕ: эти элементы несут и класс .wrap. Только длинная запись
padding-top/bottom — короткая обнулит горизонтальные отступы .wrap. */
.crumbs{padding-top:22px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
font-family:var(--mono);font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;
color:var(--muted)}
.crumbs a{color:var(--choc);text-decoration:none;border-bottom:1px solid transparent;
transition:border-color .18s}
.crumbs a:hover{border-bottom-color:var(--camel)}
.crumbs li+li::before{content:"→";margin-right:8px;color:var(--line-strong)}
/* ── общие заголовки ───────────────────────────────────────────── */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--choc);
text-transform:uppercase;margin-bottom:14px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,58px);
line-height:1.06;letter-spacing:-.8px;color:var(--navy);text-wrap:pretty}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,34px);
line-height:1.15;letter-spacing:-.3px;color:var(--navy);text-wrap:balance;
margin:clamp(38px,4vw,56px) 0 14px}
h3{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--navy);
margin:30px 0 10px;text-wrap:balance}
p{margin-bottom:18px}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--muted);margin-top:20px}
/* ── линия отрыва: тот же приём, что на главной ────────────────── */
.tear{position:relative;height:0;border-top:1.5px dashed var(--line);
margin:clamp(38px,4vw,56px) 0}
.tear span{position:absolute;left:50%;top:-8px;transform:translateX(-50%);
background:#FFFFFF;padding:0 18px;font-family:var(--mono);font-size:9.5px;
letter-spacing:.28em;color:#6F6A5F;white-space:nowrap}
/* ── статья ────────────────────────────────────────────────────── */
main{padding-bottom:clamp(56px,6vw,88px)}
.article-head{padding-top:clamp(28px,3vw,44px)}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;
font-family:var(--mono);font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;
color:var(--muted)}
.article-meta time{font-variant-numeric:tabular-nums}
.article-body{padding-top:clamp(28px,3vw,40px)}
.article-body p,.article-body li{color:#3A3E3A;font-size:17.5px}
.article-body ul{list-style:none;margin:0 0 22px}
.article-body li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--line)}
.article-body li::before{content:"";position:absolute;left:0;top:1.05em;width:14px;height:1px;
background:var(--camel)}
.article-body strong{color:var(--navy);font-weight:600}
.pull{font-family:var(--serif);font-size:clamp(20px,2vw,26px);line-height:1.4;color:var(--navy);
border-left:2px solid var(--camel);padding:4px 0 4px 22px;margin:30px 0}
/* ── обложка статьи ────────────────────────────────────────────────
Рамка полароида из секции YOUR PET DESK: кремовое паспарту, тонкая
линия, мягкая тень, моноширинная подпись внутри рамки. Поворот тут
НЕ используем — в потоке текста косой кадр читается как сбой вёрстки.
height:auto ОБЯЗАТЕЛЕН рядом с атрибутами width/height у :
атрибуты попадают в стили презентационной подсказкой, ширину
перебивает width:100%, а высота осталась бы буквальными пикселями
файла и растянула бы кадр (баг groom1, разобран 15.08).
──────────────────────────────────────────────────────────────── */
.cover{margin:clamp(30px,3.4vw,44px) 0 0;background:var(--paper);
border:1px solid var(--line);border-radius:3px;padding:12px 12px 14px;
box-shadow:0 14px 34px rgba(30,50,39,.13)}
.cover img{display:block;width:100%;height:auto;border-radius:2px}
.cover figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--choc);padding-top:11px;text-align:center}
/* ── FAQ внутри статьи (размечается FAQPage) ───────────────────── */
.faq-block{background:var(--paper);border:1px solid var(--line);border-radius:4px;
padding:clamp(22px,2.4vw,32px);margin:clamp(34px,4vw,48px) 0}
.faq-block h2{margin-top:0}
.faq-q{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--navy);
margin:22px 0 8px}
.faq-q:first-of-type{margin-top:16px}
.faq-block p{color:#3A3E3A;margin-bottom:0}
/* ── карточки каталога блога ───────────────────────────────────── */
/* min(320px,100%) вместо голых 320px (17.08, задача 0в): на экране 320px
у .wrap остаётся 272px содержимого (padding clamp даёт 24px с каждой
стороны), а трек шириной 320px не сжимался — страница вылезала за экран
на 24px, scrollWidth 344. min() отдаёт треку 100% доступной ширины, когда
320px уже не влезают; выше этой точки поведение не меняется. */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
gap:clamp(18px,2vw,28px);margin-top:clamp(30px,3vw,44px)}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
border-radius:4px;padding:clamp(22px,2.2vw,30px);text-decoration:none;position:relative;
transition:border-color .3s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1)}
.card:hover{border-color:var(--camel);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}
/* Миниатюра-обложка карточки. Та же бумажная рамка, что у .cover, но тоньше:
в сетке карточек толстое паспарту съедало бы текст. Блок необязательный —
карточка без .card-thumb выглядит ровно как раньше.
height:auto — см. комментарий у .cover. */
.card-thumb{display:block;background:#FFFFFF;border:1px solid var(--line);
border-radius:3px;padding:7px 7px 8px;margin-bottom:18px}
.card-thumb img{display:block;width:100%;height:auto;border-radius:2px}
.card:hover .card-thumb{border-color:var(--camel-lt)}
.card-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--choc);margin-bottom:14px}
.card h2{font-size:22px;line-height:1.25;margin:0 0 10px}
.card p{color:var(--muted);font-size:15.5px;margin:0}
.card-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
margin-top:auto;padding-top:20px;font-family:var(--mono);font-size:10px;
letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.card-foot .go{color:var(--camel);opacity:0;transform:translateX(-4px);
transition:opacity .3s,transform .3s cubic-bezier(.2,.7,.3,1)}
.card:hover .go,.card:focus-visible .go{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.card-foot .go{transition:none}}
/* ── About ─────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(28px,3vw,40px)}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.placeholder{background:var(--paper);border:1.5px dashed var(--line-strong);border-radius:4px;
padding:clamp(26px,3vw,40px);color:var(--muted)}
.placeholder .ph-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--oxblood);display:block;margin-bottom:10px}
.ph-photo{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center}
/* Пустое место под обложку статьи: пропорция 16/9 — та же, что рекомендуется
для реального кадра, чтобы шаблон показывал будущую форму блока. */
.ph-cover{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
text-align:center;margin-top:clamp(30px,3.4vw,44px)}
/* Колонка с фото в About: две карточки друг под другом в правой части .split.
Первая без верхнего отступа — иначе она провисает относительно первой
строки текста слева. */
/* Текст сразу под сеткой .values слипался с её нижней границей —
сетка не имеет внешних отступов, а .measure не имеет верхнего. */
.after-values{margin-top:clamp(24px,2.6vw,36px)}
/* Фото в About вертикальные (853×1280 и 869×1162). На всю ширину правой
колонки такой кадр вырастает под 600px и оставляет под текстом дыру в
пол-экрана. Ограничиваем ширину — высота падает следом, пропорция родная,
кроп не нужен. На узких экранах .split схлопывается в одну колонку,
и фото центрируется под текстом. */
.about-photos{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px)}
.about-photos .cover{margin-top:0;max-width:300px}
@media(max-width:860px){.about-photos .cover{margin-left:auto;margin-right:auto}}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
background:var(--line);border-block:1px solid var(--line);margin-top:clamp(28px,3vw,40px)}
.value{background:#FFFFFF;padding:clamp(22px,2.4vw,32px)}
.value b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--choc);margin-bottom:12px}
.value p{color:var(--muted);font-size:15.5px;margin:0}
/* ── CTA-полоса ────────────────────────────────────────────────── */
.cta-band{background:var(--navy);color:var(--cream);padding:clamp(44px,5vw,70px) 0;
margin-top:clamp(44px,5vw,72px)}
.cta-band .inner{display:flex;align-items:center;justify-content:space-between;gap:28px;
flex-wrap:wrap}
.cta-band h2{color:var(--cream);margin:0;max-width:20ch}
.cta-band p{color:#B3BDB0;margin:10px 0 0;font-size:15px}
/* ── подвал ────────────────────────────────────────────────────── */
footer{background:var(--navy-deep);color:#B3BDB0;padding:clamp(38px,4vw,56px) 0 36px}
.foot2{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,3vw,40px);
padding-bottom:30px}
@media(max-width:760px){.foot2{grid-template-columns:1fr;gap:26px}}
.f-col{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.f-logo{height:40px;width:auto;margin-bottom:4px}
.f-name{font-family:var(--mono);letter-spacing:.14em;font-size:13px;color:var(--cream)}
.f-head{font-family:var(--mono);letter-spacing:.16em;font-size:11.5px;color:var(--camel-lt);
margin-bottom:3px}
.f-col a{color:#CDD5CB;text-decoration:none;font-size:14px}
.f-col a:hover{color:var(--cream)}
.f-dim{color:#7E8C7F;font-size:13px}
.f-bottom{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #2A3C32;
padding-top:20px;font-size:13px;color:#7E8C7F;flex-wrap:wrap}
.f-bottom a{color:#B3BDB0;text-decoration:none}
.f-bottom a:hover{color:var(--cream)}
/* ── соцсети в подвале и в шапке ───────────────────────────────────
Официальные знаки платформ, под палитру сайта НЕ перекрашиваются —
правила Instagram и Meta это прямо запрещают. Тач-зона 44×44 по
WCAG 2.5.8, глиф 24px; отрицательный отступ слева выравнивает
оптическую границу иконки по остальному столбцу подвала.
──────────────────────────────────────────────────────────────── */
.soc{display:flex;gap:4px;margin:5px 0 0 -10px}
/* Шапка (17.08): тот же блок без верхнего отступа. Отрицательные поля по
бокам гасят прозрачные края тач-зоны, иначе зазор до телефона и кнопки
выглядит вдвое больше, чем у остальных элементов nav-right.
Значения один в один с главной (v4), чтобы шапки не разъезжались. */
.soc-head{margin:0 -8px}
/* Ниже 560px иконки в шапке скрываются — правило перенесено с главной,
где замер показал: на 480px и уже блок отнимает 88px у правой части,
имя бренда уезжает на две строки, а CTA-кнопка ужимается. В подвале те
же иконки остаются, так что на мобильных ничего не теряется. */
@media(max-width:560px){.soc-head{display:none}}
.soc a{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
border-radius:6px;transition:background .25s,transform .25s cubic-bezier(.2,.7,.3,1)}
.soc a:hover{background:rgba(246,241,228,.08);transform:translateY(-1px)}
.soc a:focus-visible{outline:2px solid var(--focus-on-dark);outline-offset:2px}
.soc svg{display:block;width:24px;height:24px}
@media (prefers-reduced-motion:reduce){.soc a{transition:none}.soc a:hover{transform:none}}
/* ── куки-баннер (17.08, задача 0г) ────────────────────────────────
Значения перенесены из инлайн-стилей главной один в один, чтобы
баннер не выглядел на блоге иначе. Саму разметку рисует
assets/site.js — в HTML страниц её нет.
Правило `body:has(.sticky-cta.visible)` с главной НЕ переносим:
мобильной sticky-панели на внутренних страницах нет, баннеру не
на что наезжать.
──────────────────────────────────────────────────────────────── */
.cookies{position:fixed;left:50%;transform:translateX(-50%);
bottom:calc(22px + env(safe-area-inset-bottom));z-index:70;display:none;
align-items:center;gap:22px;max-width:680px;width:calc(100% - 40px);
background:var(--navy-deep);color:#CDD5CB;border:1px solid rgba(246,241,228,.18);
border-radius:8px;padding:16px 20px;box-shadow:0 14px 36px rgba(0,0,0,.35)}
.cookies.on{display:flex}
.cookies p{font-size:13.5px;line-height:1.5;margin:0}
.cookies-actions{display:flex;gap:10px;flex:none}
/* Рамка была rgba(…,.35) — 2.97:1 к navy-deep, ниже требуемых 3:1 для границы
контрола (WCAG 1.4.11). .45 даёт 3.97:1 и остаётся такой же тихой. */
.ck-btn{cursor:pointer;border-radius:4px;font-family:var(--mono);font-size:12px;
letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;
border:1px solid rgba(246,241,228,.45);background:none;color:var(--cream)}
.ck-ghost:hover{border-color:var(--cream)}
/* «Cookie settings» в подвале: это действие, а не переход, поэтому