.gv-grid{--cols:4;--gap:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.gv-grid > *{flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0}
@media (max-width:1100px){.gv-grid > *{flex-basis:calc((100% - 2 * var(--gap)) / 3)}}
@media (max-width:760px){.gv-grid > *{flex-basis:calc((100% - var(--gap)) / 2)}}
@media (max-width:460px){.gv-grid > *{flex-basis:100%}}
/* even — ровные ряды: карточки одной высоты, неполный последний ряд
   центрируется базовым justify-content. Правило существует и потому, что
   класс без единого правила в CSS означает потерянный при порте стиль, и
   общий свод справедливо на это краснеет. */
.gv-grid.even{align-items:stretch}
.gv-grid.even > *{flex-grow:0}
.gv-grid.rail{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory}
.gv-grid.rail > *{scroll-snap-align:start;flex:0 0 260px}
[hidden]{display:none!important}

.gv-tscroll{overflow-x:auto;max-width:100%;min-width:0}
table.gv-t{width:100%;border-collapse:collapse;min-width:560px}
table.gv-t td.num{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){
 table.gv-t{min-width:0}
 table.gv-t thead{position:absolute;left:-9999px}
 table.gv-t tr{display:block;margin-bottom:12px}
 table.gv-t td{display:flex;justify-content:space-between;gap:12px}
 table.gv-t td::before{content:attr(data-label);font-weight:600}
}

.gv-crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.gv-pager{display:flex;gap:8px;flex-wrap:wrap}
.gv-filters{display:flex;gap:8px;flex-wrap:wrap}
.gv-chip[aria-pressed="true"]{font-weight:600}
.gv-field{display:flex;flex-direction:column;gap:6px}
.gv-zoom{border:0;padding:0;max-width:96vw;max-height:96vh}
.gv-zoom img{display:block;max-width:96vw;max-height:96vh;height:auto}
.gv-gal{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.gv-gal > *{flex:0 1 calc((100% - 32px) / 3);min-width:0}
@media (max-width:700px){.gv-gal > *{flex-basis:100%}}
.gv-shot-link{position:relative;display:block}
.gv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0}
.gv-card{display:flex;flex-direction:column;min-width:0}


@font-face{font-family:"Baloo 2";src:url(/assets/fonts/baloo-2-latin.26fb4610.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Lexend";src:url(/assets/fonts/lexend-latin.b7e7538f.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
:root{
 --ink:#403A54;--ink-deep:#2F2A40;--ink-soft:#645E7A;--plum:#342E47;
 --orange:#E58014;--orange-deep:#A85B06;--orange-soft:#F6C48A;
 --cream:#FFF7EE;--paper:#FFFFFF;--line:#E6DDD1;
 --wrap:1240px;--rad:14px;--pill:80px;
 --display:"Baloo 2","Lexend",system-ui,sans-serif;
 --text:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.gv-body{margin:0;background:var(--paper);color:var(--ink-deep);font-family:var(--text);
 font-size:17px;line-height:1.66;overflow-wrap:break-word}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.06;font-weight:800;color:var(--ink)}
h1{font-size:clamp(34px,5vw,58px);letter-spacing:-0.015em}
h2{font-size:clamp(27px,3.5vw,42px);letter-spacing:-0.01em}
h3{font-size:clamp(19px,2vw,24px)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.gv-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,3.4vw,40px)}
.gv-skip{position:absolute;left:-9999px}
.gv-skip:focus{left:12px;top:12px;background:var(--plum);color:#fff;padding:10px 14px;z-index:99}

/* ------------------------------------------------- кикер и общие мелочи */
.gv-kicker{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--orange-deep);margin:0 0 10px}
.gv-band .gv-kicker,.gv-dark .gv-kicker{color:var(--orange-soft)}
.gv-band.on-orange .gv-kicker{color:var(--ink-deep)}
.gv-lede{font-size:19px;color:var(--ink-soft);max-width:62ch}
.gv-dark .gv-lede,.gv-foot .gv-lede{color:#D9D3E4}
.gv-muted{color:var(--ink-soft)}

/* ------------------------------------------------------------- кнопки */
.gv-btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;
 font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.04em;
 text-transform:uppercase;text-decoration:none;padding:14px 26px;border-radius:var(--pill);
 background:var(--orange);color:var(--ink-deep);transition:transform .12s ease,filter .12s ease}
.gv-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.gv-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.gv-btn.ghost:hover{background:var(--ink);color:#fff}
.gv-dark .gv-btn.ghost{color:#fff;box-shadow:inset 0 0 0 2px var(--orange-soft)}
.gv-dark .gv-btn.ghost:hover{background:var(--orange-soft);color:var(--plum)}
/* Надпись кнопки — картинка, обрезанная ПО ЧЕРНИЛАМ; тема масштабирует её
   долей от кегля, и общий страж labelScaleFindings сверяет долю со снимком.
   ШИРИНА ЗАДАЁТСЯ ЯВНО: картинка нарисована в 2x, её собственная ширина 320px,
   и как флекс-элемент она СЖИМАЛАСЬ до ширины кнопки при неизменной высоте,
   то есть надпись выходила растянутой (184x12 вместо 160x12). */
.buy-label{display:block;height:calc(1em * 0.75);width:auto;flex:0 0 auto}
.buy-label.lbl-buy-label-ink{width:calc(1em * 10.000)}
.buy-label.lbl-buy-label-paper{width:calc(1em * 10.063)}
.buy-label.lbl-soft-label-ink{width:calc(1em * 6.125)}
/* Класс кнопки покупки несёт своё правило, а не только крючок для стража. */
.gv-buy{text-align:center}
.gv-gal.lightbox{cursor:zoom-in}
/* gv-crop — ОБЪЯВЛЕНИЕ: этот кадр обрезается композицией осознанно. Текста
   внутри у него нет, поэтому срезать нечего. Страж обрезки читает класс. */
.gv-crop{object-fit:cover}
.gv-buyhint{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:7px;line-height:1.35}

/* -------------------------------------------------------------- шапка */
.gv-head{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.gv-head .gv-wrap{display:flex;align-items:stretch;gap:26px;min-height:88px}
.gv-flag{align-self:flex-start;display:block;text-decoration:none;background:var(--orange);
 padding:12px 22px 26px;clip-path:polygon(0 0, 100% 0, 100.00% 84%, 94.44% 100%, 88.89% 84%, 83.33% 100%, 77.78% 84%, 72.22% 100%, 66.67% 84%, 61.11% 100%, 55.56% 84%, 50.00% 100%, 44.44% 84%, 38.89% 100%, 33.33% 84%, 27.78% 100%, 22.22% 84%, 16.67% 100%, 11.11% 84%, 5.56% 100%, 0.00% 84%);margin-right:6px}
.gv-flag small{display:block;font-family:var(--display);font-weight:600;font-size:10px;
 letter-spacing:.22em;color:var(--ink-deep);opacity:.8}
.gv-flag b{display:block;font-family:var(--display);font-weight:800;font-size:26px;
 line-height:1;color:var(--ink-deep);letter-spacing:-.01em}
.gv-nav{display:flex;align-items:center;gap:26px;flex:1;min-width:0}
.gv-nav a{font-weight:600;font-size:15.5px;text-decoration:none;color:var(--ink);white-space:nowrap}
.gv-nav a:hover,.gv-nav a[aria-current]{color:var(--orange-deep)}
.gv-headcta{display:flex;align-items:center}
.gv-headcta .gv-btn{padding:11px 20px;font-size:14px}
.gv-menu{display:none}
@media (max-width:1000px){
 .gv-head .gv-wrap{flex-wrap:wrap;gap:12px;padding-bottom:12px;min-height:0;align-items:center}
 .gv-nav{order:3;flex-basis:100%;gap:16px;font-size:14.5px;flex-wrap:wrap}
 .gv-headcta{margin-left:auto;gap:10px}
}
/* Ниже 700px меню уходит под кнопку: строка из четырёх пунктов там режется
   по краю, а горизонтальная прокрутка в шапке читается как обрезанный текст. */
@media (max-width:700px){
 .gv-nav{display:none}
 .gv-menu{display:block;position:relative}
 .gv-menu > summary{list-style:none;cursor:pointer;font-family:var(--display);font-weight:700;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:11px 18px;border-radius:var(--pill);
  box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
 .gv-menu > summary::-webkit-details-marker{display:none}
 .gv-menu[open] > summary{background:var(--ink);color:#fff}
 .gv-menu > nav{position:absolute;right:0;top:calc(100% + 10px);z-index:50;background:var(--paper);
  border-radius:var(--rad);box-shadow:0 14px 34px rgba(64,58,84,.22);padding:10px 6px;min-width:210px}
 .gv-menu > nav a{display:block;padding:11px 16px;text-decoration:none;font-weight:600;color:var(--ink)}
 .gv-menu > nav a[aria-current]{color:var(--orange-deep)}
 .gv-headcta .gv-btn{padding:11px 16px;font-size:13px}
}

/* --------------------------------------------------------------- герой */
/* Герой: кадр УХОДИТ ЗА ПРАВЫЙ КРАЙ экрана, как слайд у образца 20, а текст
   стоит на кремовой полосе с той же фактурой стежка, что и цветные полосы.
   Так силуэт первого экрана не повторяет «текст слева, кадр в контейнере
   справа», которым уже собраны три предыдущих сайта портфеля. */
.gv-hero{background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg stroke='%23E58014' stroke-opacity='0.16' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 26l10-6M64 12l4 11M118 30l9 7M146 74l-3 11M96 62l11-3M30 88l6 10M70 108l10 5M128 122l-4 11M22 140l11-4M92 148l9-6M52 52l-8 8'/%3E%3C/g%3E%3C/svg%3E");border-bottom:1px solid var(--line)}
.gv-hero .gv-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
 gap:clamp(20px,3.4vw,44px);align-items:center;padding-block:clamp(18px,2.2vw,26px);
 max-width:none;padding-right:0;
 padding-left:max(calc((100vw - var(--wrap)) / 2 + clamp(18px,3.4vw,40px)), clamp(18px,3.4vw,40px))}
.gv-hero-copy{min-width:0}
.gv-hero h1{margin-bottom:16px}
.gv-hero-acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px}
.gv-hero-fig{position:relative;min-width:0}
/* Кадр героя ограничен по высоте: герой не выше 60% экрана, и первая карточка
   товара обязана быть выше одного экрана (торговая композиция §5.1). */
.gv-hero-fig img{width:100%;max-height:min(34vh,320px);object-fit:cover;
 clip-path:polygon(100% 0, 100% 100%, 3.2% 100.00%, 0% 93.75%, 3.2% 87.50%, 0% 81.25%, 3.2% 75.00%, 0% 68.75%, 3.2% 62.50%, 0% 56.25%, 3.2% 50.00%, 0% 43.75%, 3.2% 37.50%, 0% 31.25%, 3.2% 25.00%, 0% 18.75%, 3.2% 12.50%, 0% 6.25%, 3.2% 0.00%);border-radius:0}
.gv-hero-facts{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:14px;padding-top:12px;
 border-top:2px dotted var(--line)}
.gv-hero-facts div{min-width:0}
.gv-hero-facts b{display:block;font-family:var(--display);font-weight:800;font-size:22px;
 line-height:1.1;color:var(--orange-deep)}
.gv-hero-facts span{font-size:13.5px;color:var(--ink-soft)}
@media (max-width:900px){
 .gv-hero .gv-wrap{grid-template-columns:1fr;padding-right:clamp(18px,3.4vw,40px);
  padding-left:clamp(18px,3.4vw,40px)}
 .gv-hero-fig img{clip-path:none;border-radius:var(--rad);max-height:min(30vh,260px)}}

/* ------------------------------------------------------------- полосы */
.gv-sec{padding-block:clamp(38px,5vw,64px)}
.gv-sec.first{padding-top:clamp(20px,2.4vw,28px)}
.gv-sec.tight{padding-block:clamp(26px,3.4vw,40px)}
.gv-band{background:var(--cream)}
.gv-band.on-orange{background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.55' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 26l10-6M64 12l4 11M118 30l9 7M146 74l-3 11M96 62l11-3M30 88l6 10M70 108l10 5M128 122l-4 11M22 140l11-4M92 148l9-6M52 52l-8 8'/%3E%3C/g%3E%3C/svg%3E");color:var(--ink-deep)}
.gv-band.on-orange h2,.gv-band.on-orange h3{color:var(--ink-deep)}
.gv-dark{background:var(--plum) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg stroke='%23F6C48A' stroke-opacity='0.30' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 26l10-6M64 12l4 11M118 30l9 7M146 74l-3 11M96 62l11-3M30 88l6 10M70 108l10 5M128 122l-4 11M22 140l11-4M92 148l9-6M52 52l-8 8'/%3E%3C/g%3E%3C/svg%3E");color:#EFEBF5}
.gv-dark h2,.gv-dark h3{color:#fff}
.gv-secintro{max-width:none;margin-bottom:clamp(22px,3vw,34px)}
.gv-secintro.mid{text-align:center}
.gv-secintro.mid .gv-lede{margin-inline:auto}
/* Вводка департамента и служебной страницы занимает ПОЛОСУ ЦЕЛИКОМ: меру
   строки держат две колонки, а не поля (§5, правило владельца 22.08). */
.gv-secintro.wide .gv-lede{max-width:none;margin-inline:0;columns:2;
 column-gap:clamp(28px,4vw,56px);text-align:left;font-size:18px}
@media (max-width:820px){.gv-secintro.wide .gv-lede{columns:1}}
.gv-secintro .gv-lede{margin-top:12px}

/* --------------------------------------------------- четыре столпа */
.gv-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.gv-pillar{display:flex;flex-direction:column;gap:12px;min-width:0;text-decoration:none}
/* Кадр столпа НЕ обрезается: у фирменных полотен внутри кадра есть надписи и
   логотип, и object-fit:cover резал их (§4.3). Отсюда contain на белом. */
.gv-pillar img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;padding:8px;
 border-radius:var(--rad);border:3px solid var(--orange)}
.gv-pillar h3{margin-top:2px}
.gv-pillar p{font-size:15px;color:var(--ink-soft);margin:0}
.gv-pillar span{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.05em;
 color:var(--orange-deep);text-transform:uppercase}
@media (max-width:900px){.gv-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.gv-pillars{grid-template-columns:1fr}}

/* ------------------------------------------------------- карточка товара */
.gv-card{background:var(--paper);border-radius:var(--rad);overflow:hidden;
 box-shadow:0 1px 0 var(--line),0 10px 24px rgba(64,58,84,.07)}
.gv-band .gv-card,.gv-dark .gv-card{box-shadow:0 10px 26px rgba(47,42,64,.16)}
.gv-shot{padding:14px 14px 0}
.gv-shot img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;
 border:3px solid var(--orange);border-radius:8px;padding:8px}
.gv-card-body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 18px;flex:1}
.gv-card-title{font-size:16.5px;line-height:1.2;font-weight:700;color:var(--ink)}
.gv-card-title a{text-decoration:none}
.gv-spec{font-size:13px;color:var(--ink-soft);letter-spacing:.02em}
.gv-price{font-family:var(--display);font-weight:800;font-size:23px;color:var(--ink)}
.gv-rate{font-size:13.5px;color:var(--ink-soft);white-space:nowrap}
/* Кнопка прижата к низу: имена в 1-4 строки, и без этого низ ряда карточек
   не выравнивается. */
.gv-card .gv-row:last-child{display:block;margin-top:auto;padding-top:10px}
.gv-card .gv-btn{width:100%;justify-content:center;padding:12px 16px}

/* --------------------------------------------------------- полка товаров */
.gv-shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
 flex-wrap:wrap;margin-bottom:22px}
.gv-sec.first .gv-shelf-head{margin-bottom:16px}
.gv-shelf-head p{margin:6px 0 0;max-width:66ch;color:var(--ink-soft)}
.gv-band.on-orange .gv-shelf-head p{color:var(--ink-deep)}
.gv-dark .gv-shelf-head p{color:#D9D3E4}

/* ---------------------------------------------------- текстовые полосы */
/* Правило владельца: текст занимает ВСЮ полосу. Меру строки держат колонки
   и сетка, а не поля (§5). */
.gv-prose{columns:2;column-gap:clamp(28px,4vw,56px)}
/* Внутри ячейки раскладки проза идёт ОДНОЙ колонкой: две колонки в 430px дают
   строки по три слова (то же, что было с оглавлением статьи в рельсе). */
.gv-split .gv-prose,.gv-lead .gv-prose{columns:1}
.gv-prose p{break-inside:avoid}
.gv-prose h3{margin:0 0 10px;break-after:avoid}
@media (max-width:820px){.gv-prose{columns:1}}
.gv-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
 gap:clamp(22px,3.4vw,48px);align-items:stretch}
.gv-split.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.gv-split img{width:100%;border-radius:var(--rad);border:3px solid var(--orange)}
/* Кадр рядом с колонкой прозы. Раньше он тянулся на ВСЮ высоту ячейки, и на
   длинной странице 440-пиксельный исходник растягивался до 1648px — трёхкратный
   апскейл, то самое мыло, ради запрета которого написан §4.2, только сделанное
   не кодировщиком, а CSS. Теперь кадр липкий и ограничен по высоте: пустоты под
   ним нет (он едет вместе с чтением), а вверх он не растёт. */
.gv-fig.fill{display:flex;flex-direction:column;min-height:0;position:sticky;top:112px;
 align-self:start}
.gv-fig.fill img{flex:none;width:100%;max-height:min(62vh,520px);object-fit:cover}
.gv-mcard.shot img{object-position:left center}
.gv-fig figcaption{font-size:13.5px;color:var(--ink-soft);margin-top:8px}
.gv-dark .gv-fig figcaption{color:#C9C2D8}
/* Медиазапрос идёт ПОСЛЕ базового правила: раньше он стоял выше, и
   безусловный position:sticky его перебивал — липкий кадр наезжал на текст
   под собой на 700 и 560px (нашёл браузерный аудит). */
@media (max-width:860px){
 .gv-split,.gv-split.flip{grid-template-columns:1fr}
 .gv-fig.fill{position:static}
 .gv-fig.fill img{max-height:min(48vh,380px)}
}
.gv-figrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.gv-figrow img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rad)}
@media (max-width:700px){.gv-figrow{grid-template-columns:1fr}}

/* ---------------------------------------------------------- таблицы */
table.gv-t{background:var(--paper);border-radius:var(--rad);overflow:hidden}
table.gv-t caption{text-align:left;font-family:var(--display);font-weight:700;font-size:15px;
 color:var(--ink-soft);padding-bottom:10px}
table.gv-t th{background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;
 font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:12px 14px}
table.gv-t td{border-top:1px solid var(--line);padding:12px 14px;font-size:15.5px;vertical-align:top}
table.gv-t tbody tr:nth-child(even) td{background:var(--cream)}
.gv-dark table.gv-t caption{color:#C9C2D8}
@media (max-width:640px){table.gv-t td{border-top:0;border-bottom:1px solid var(--line)}
 table.gv-t tr{background:var(--paper);border-radius:var(--rad);padding:8px 4px}}

/* -------------------------------------------------------- цифры-плитки */
.gv-speccards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gv-speccards > div{background:var(--paper);border-radius:var(--rad);padding:18px;
 border-bottom:5px solid var(--orange);min-width:0}
.gv-speccards b{display:block;font-family:var(--display);font-weight:800;font-size:30px;
 line-height:1.08;color:var(--ink)}
.gv-speccards span{font-size:14px;color:var(--ink-soft)}
@media (max-width:820px){.gv-speccards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ------------------------------------------------------------ галерея */
.gv-gal > *{flex-basis:calc((100% - 3 * 16px) / 4)}
.gv-gal img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:var(--rad);
 border:3px solid var(--orange);background:#fff;padding:6px}
.gv-gal .gv-shot-link:hover img{filter:brightness(1.03)}
.gv-shot-hint{position:absolute;left:10px;bottom:10px;background:rgba(47,42,64,.86);color:#fff;
 font-size:12px;padding:5px 10px;border-radius:var(--pill)}
@media (max-width:900px){.gv-gal > *{flex-basis:calc((100% - 16px) / 2)}}
.gv-zoom{background:#fff;border-radius:var(--rad);padding:8px}
.gv-zoom::backdrop{background:rgba(47,42,64,.86)}

/* -------------------------------------------------------------- видео */
.gv-video{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
 gap:clamp(22px,3.4vw,44px);align-items:center}
.gv-video video{width:100%;border-radius:var(--rad);border:3px solid var(--orange);background:#000}
@media (max-width:860px){.gv-video{grid-template-columns:1fr}}

/* --------------------------------------------------------- цитаты */
.gv-quote{background:var(--paper);border-radius:var(--rad);padding:22px 24px;margin:0;
 border-left:6px solid var(--orange)}
.gv-quote p{font-size:18px;line-height:1.55}
.gv-quote footer{font-size:14px;color:var(--ink-soft);margin-top:10px}
.gv-dark .gv-quote{background:rgba(255,255,255,.07)}
.gv-dark .gv-quote footer{color:#C9C2D8}

/* ------------------------------------------------- мозаика материалов */
.gv-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,26px)}
.gv-mcard{background:var(--paper);border-radius:var(--rad);padding:clamp(20px,2.6vw,32px);
 display:flex;flex-direction:column;gap:12px;min-width:0}
.gv-mcard.shot{padding:0;overflow:hidden}
.gv-mcard.shot img{width:100%;height:100%;min-height:220px;object-fit:cover}
.gv-mcard .gv-btn{align-self:flex-start;margin-top:auto}
@media (max-width:760px){.gv-mosaic{grid-template-columns:1fr}}

/* ---------------------------------------------------------- крошки */
.gv-crumbs{font-size:14px;color:var(--ink-soft);padding:16px 0 0}
.gv-crumbs a{text-decoration:none}
.gv-crumbs a:hover{color:var(--orange-deep)}
.gv-crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}

/* ------------------------------------------------------- пагинация */
.gv-pager{justify-content:center;margin-top:34px;align-items:center}
.gv-pager a,.gv-pager span{min-width:42px;height:42px;display:inline-flex;align-items:center;
 justify-content:center;border-radius:50%;text-decoration:none;font-weight:600}
.gv-pager a{background:var(--cream);color:var(--ink)}
.gv-pager a:hover{background:var(--orange);color:var(--ink-deep)}
.gv-pager span[aria-current]{background:var(--ink);color:#fff}

/* -------------------------------------------------------------- фильтры */
.gv-filters{margin-bottom:22px}
.gv-chip{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.04em;
 text-transform:uppercase;border:2px solid var(--line);background:var(--paper);color:var(--ink);
 padding:9px 16px;border-radius:var(--pill);cursor:pointer}
.gv-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ------------------------------------------------------------------ FAQ */
.gv-faq{display:grid;gap:12px}
.gv-faq-item{background:var(--paper);border-radius:var(--rad);padding:16px 20px;
 border-left:6px solid var(--orange)}
.gv-faq-item summary{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);
 cursor:pointer;list-style:none}
.gv-faq-item summary::-webkit-details-marker{display:none}
.gv-faq-item summary::after{content:"+";float:right;color:var(--orange-deep);font-size:22px;line-height:1}
.gv-faq-item[open] summary::after{content:"–"}
.gv-faq-item p{margin:10px 0 0}

/* --------------------------------------------------------- полоса-письмо */
/* Слот подписки образца занят честной строкой: писем мы не рассылаем. */
.gv-write{background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.5' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 26l10-6M64 12l4 11M118 30l9 7M146 74l-3 11M96 62l11-3M30 88l6 10M70 108l10 5M128 122l-4 11M22 140l11-4M92 148l9-6M52 52l-8 8'/%3E%3C/g%3E%3C/svg%3E")}
.gv-write .gv-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
 gap:clamp(18px,3vw,40px);align-items:center;padding-block:clamp(26px,3.4vw,42px)}
.gv-write h2{font-size:clamp(24px,3vw,36px);color:var(--ink-deep)}
.gv-write p{color:var(--ink-deep);margin:0}
.gv-write a{color:var(--ink-deep);font-weight:600}
@media (max-width:760px){.gv-write .gv-wrap{grid-template-columns:1fr}}

/* -------------------------------------------------------------- подвал */
.gv-foot{position:relative;background:var(--plum);color:#D9D3E4;overflow:hidden;
 padding-block:clamp(34px,4vw,54px) 0}
.gv-foot::before{content:"WillBond";position:absolute;left:-2%;bottom:-6%;
 font-family:var(--display);font-weight:800;font-size:clamp(140px,22vw,320px);line-height:.8;
 color:rgba(255,255,255,.045);pointer-events:none;white-space:nowrap}
.gv-foot .gv-wrap{position:relative}
.gv-fgrid{display:grid;grid-template-columns:1.35fr repeat(4,minmax(0,1fr));
 gap:clamp(18px,2.4vw,34px)}
.gv-fgrid h4{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--orange-soft);margin:0 0 14px}
.gv-fgrid a{display:block;text-decoration:none;font-size:15px;margin-bottom:10px;color:#D9D3E4}
.gv-fgrid a:hover{color:#fff;text-decoration:underline}
.gv-flogo{display:inline-block;background:var(--orange);color:var(--ink-deep);
 padding:10px 20px 22px;clip-path:polygon(0 0, 100% 0, 100.00% 84%, 94.44% 100%, 88.89% 84%, 83.33% 100%, 77.78% 84%, 72.22% 100%, 66.67% 84%, 61.11% 100%, 55.56% 84%, 50.00% 100%, 44.44% 84%, 38.89% 100%, 33.33% 84%, 27.78% 100%, 22.22% 84%, 16.67% 100%, 11.11% 84%, 5.56% 100%, 0.00% 84%);margin-bottom:14px}
.gv-flogo small{display:block;font-family:var(--display);font-weight:600;font-size:10px;
 letter-spacing:.22em;color:var(--ink-deep);opacity:.8}
.gv-flogo b{display:block;font-family:var(--display);font-weight:800;font-size:22px;
 line-height:1;color:var(--ink-deep)}
.gv-foot .gv-muted{color:#C0B9D0;font-size:15px}
.gv-fmail{display:inline-block;margin-top:12px;color:var(--orange-soft);font-weight:600}
.gv-fbottom{margin-top:clamp(26px,3vw,40px);border-top:1px solid rgba(255,255,255,.14);
 padding:18px 0 24px}
.gv-fbottom p{font-size:13.5px;color:#B7AFC9;margin:0 0 6px}
@media (max-width:1000px){.gv-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.gv-fgrid{grid-template-columns:1fr}}

/* ------------------------------------------------------- статья и гид */
.gv-artlead{background:var(--cream);border-bottom:1px solid var(--line)}
.gv-artlead .gv-wrap{padding-block:clamp(26px,3.4vw,44px)}
.gv-artlead h1{max-width:20ch}
.gv-meta{font-size:14px;color:var(--ink-soft);margin-top:14px}
.gv-toc{background:var(--cream);border-radius:var(--rad);padding:20px 24px;
 border-left:6px solid var(--orange)}
.gv-toc h2{font-size:17px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.gv-toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px}
/* В узкой рельсе статьи оглавление ОДНОЙ колонкой: две колонки в 236px дают
   по одному слову в строке. */
.gv-rail .gv-toc ol{columns:1}
.gv-rail .gv-toc{padding:16px 18px}
.gv-rail .gv-toc li{margin-bottom:9px;font-size:14.5px;line-height:1.35}
.gv-toc a{text-decoration:none}
.gv-toc a:hover{color:var(--orange-deep)}
@media (max-width:640px){.gv-toc ol{columns:1}}
.gv-art h2{margin-top:8px}
.gv-art h3{margin-bottom:8px}
.gv-inline{background:var(--cream);border-radius:var(--rad);padding:20px;
 display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:18px;align-items:center}
/* Селектор по ТЕГУ ловил и надпись кнопки внутри врезки: белый фон под белой
   надписью читался как пустая кнопка (урок village-candle). Только прямой
   потомок. */
.gv-inline > img{width:120px;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:8px;
 border:3px solid var(--orange);padding:6px}
.gv-inline b{display:block;font-family:var(--display);font-size:18px;color:var(--ink)}
.gv-inline .gv-btn{white-space:nowrap}
@media (max-width:700px){.gv-inline{grid-template-columns:1fr;text-align:left}
 .gv-inline img{width:100%;max-width:160px}}


/* ------------------------------------------- сетка департамента и статьи */
/* У образца слева колонка разделов, справа сетка 3 в ряд. Проза статьи
   прижата к рельсе — это мера строки, а не пустота с обеих сторон. */
.gv-catgrid,.gv-artgrid{display:grid;grid-template-columns:236px minmax(0,1fr);
 gap:clamp(24px,3.2vw,48px);align-items:start}
.gv-rail{position:sticky;top:112px;min-width:0}
.gv-rail h2{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--orange-deep);margin:0 0 12px}
.gv-rail ul{list-style:none;margin:0 0 26px;padding:0}
.gv-rail li a{display:flex;justify-content:space-between;gap:10px;text-decoration:none;
 font-size:15px;padding:7px 0;border-bottom:1px solid var(--line)}
.gv-rail li a span{color:var(--ink-soft);font-size:13px}
.gv-rail li a:hover{color:var(--orange-deep)}
.gv-rail li a[aria-current]{font-weight:700;color:var(--ink)}
.gv-rail .gv-muted{font-size:14px}
.gv-count{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink-soft);
 margin:0 0 18px;padding-bottom:12px;border-bottom:2px dotted var(--line)}
.gv-catmain{min-width:0}
@media (max-width:900px){
 .gv-catgrid,.gv-artgrid{grid-template-columns:1fr}
 .gv-rail{position:static}
 .gv-rail ul{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
 .gv-rail li a{border:2px solid var(--line);border-radius:var(--pill);padding:7px 14px}
}
.gv-arthero{margin:0 0 clamp(22px,3vw,36px)}
.gv-arthero img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--rad);
 border:3px solid var(--orange)}
.gv-art > * + *{margin-top:20px}
.gv-art h2{margin-top:34px;scroll-margin-top:120px}
.gv-art ul{padding-left:22px}
.gv-art li{margin-bottom:8px}
.gv-note{background:var(--cream);border-left:6px solid var(--orange);border-radius:var(--rad);
 padding:16px 20px;font-size:15.5px;color:var(--ink-soft)}
.gv-srcs{margin-top:clamp(30px,4vw,48px);background:var(--cream);border-radius:var(--rad);
 padding:clamp(20px,2.6vw,30px)}
.gv-srcs h2{font-size:20px;margin-bottom:14px}
.gv-srcs ol{margin:0;padding-left:20px;columns:2;column-gap:40px}
.gv-srcs li{margin-bottom:12px;break-inside:avoid;font-size:15px}
@media (max-width:760px){.gv-srcs ol{columns:1}}
.gv-related h2{font-size:14px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--orange-deep);margin:0 0 12px}
.gv-related .gv-grid{flex-direction:column;flex-wrap:nowrap}
.gv-related .gv-grid > *{flex-basis:auto}
/* Сетка департаментов на ФЛЕКСЕ, а не на grid: десять карточек в три колонки
   оставляют одну сироту в последнем ряду, и grid прижимает её влево. Флекс с
   justify-content:center ЦЕНТРИРУЕТ неполный ряд на любой ширине (§5). */
.gv-deptgrid{display:flex;flex-wrap:wrap;justify-content:center;--dg:clamp(18px,2.4vw,28px);
 gap:var(--dg)}
.gv-deptgrid > *{flex:0 1 calc((100% - 2 * var(--dg)) / 3);min-width:0}
.gv-deptcard{display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--paper);
 border-radius:var(--rad);overflow:hidden;box-shadow:0 10px 24px rgba(64,58,84,.07)}
/* Пакшот в карточке департамента НЕ обрезается: у него белый фон и товар в
   центре, а cover срезал четверть кадра. */
.gv-deptcard img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;padding:10px}
.gv-deptcard div{padding:0 18px 20px;display:flex;flex-direction:column;gap:8px}
.gv-deptcard h3{margin:0}
.gv-deptcard p{margin:0;font-size:15px;color:var(--ink-soft)}
.gv-deptcard b{font-family:var(--display);color:var(--orange-deep);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:900px){.gv-deptgrid > *{flex-basis:calc((100% - var(--dg)) / 2)}}
@media (max-width:560px){.gv-deptgrid > *{flex-basis:100%}}

/* --------------------------------------------------- правовые страницы */
.gv-legal .gv-prose{columns:2}
@media (max-width:820px){.gv-legal .gv-prose{columns:1}}
.gv-legal h2{font-size:24px;margin:0 0 10px}