/* site.css — оформление сайта (таск 04): токены, шрифты, основа, компоненты.
   Правило: цвета, шрифты и отступы берутся только из токенов :root (ниже нет ни одного литерала цвета).
   Брейкпоинты (в @media токены недоступны): 600 / 900 / 1100 / 1200 px — 600: две колонки карточек; 900: три колонки,
   подвал в две колонки; 1100: шторка меню (≤1100) вместо строки; 1200: просторные промежутки меню.
   Шрифты — четыре файла WOFF2 (Onest и Cormorant Garamond, кириллица и латиница), курсива Cormorant нет:
   курсив синтезирует браузер (font-synthesis: style). Страницы — pages.css, документы — legal.css.
   Метка html.js (ставит скрипт в <head>; его страж снимает её, если site.js не загрузился или после window load
   не отметился меткой html.js-ready) включает всё, что без скрипта не работает: шторку меню, липкую шапку,
   скрытие кадров и блоков до появления. Таймеров и «страховок по времени» в CSS нет. */

/* ===== 1. Токены (значения — research/design-references.md, блок 4.4) ===== */
:root{
  color-scheme:light;
  /* цвет */
  --paper:#FBF7F1; --linen:#F3ECE1; --sand:#E4D8C8; --surface:#FFFDF9;
  --ink:#2A2521; --cocoa:#6B5A4E; --clay:#A34E33; --clay-deep:#843C26;
  --clay-soft:#E39A7C; /* только на --night */ --night:#211C19; --line-strong:#8E7F72;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .14 0 0 0 0 .11 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* зерно α≈4%: только фон страницы и полос, не поверх фото */
  /* шрифты и кегль */
  --font-display:"Cormorant Garamond","Cormorant Fallback","Times New Roman",serif; /* +запасной шрифт с size-adjust: текст не прыгает при подмене */
  --font-text:"Onest","Onest Fallback",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --fs-eyebrow:.8125rem; --fs-small:.875rem; --fs-body:1.0625rem;
  --fs-lead:clamp(1.125rem,1.05rem + .4vw,1.3125rem);
  --fs-h3:clamp(1.5rem,1.35rem + .6vw,1.75rem);
  --fs-h2:clamp(1.875rem,1.5rem + 1.6vw,2.625rem);
  --fs-h1:clamp(2.5rem,1.7rem + 3.4vw,4.25rem);
  --fs-display:clamp(3rem,1.6rem + 6vw,5.75rem);
  --lh-tight:1.1; --lh-body:1.6; --track-caps:.14em; --track-head:.01em;
  /* отступы и сетка */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --sp-11:192px;
  --section-y:clamp(64px,9vw,128px); --gutter:clamp(20px,4vw,48px); --header-h:68px;
  --w-prose:38rem; --w-content:1200px; --w-wide:1440px;
  --gap-gallery:clamp(6px,1.1vw,16px); --row-h:clamp(200px,25vw,360px);
  /* форма */
  --r-photo:2px; --r-sm:8px; --r-md:14px; --r-lg:28px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(74,52,36,.06),0 2px 8px rgba(74,52,36,.05);
  --shadow-2:0 1px 2px rgba(74,52,36,.06),0 10px 28px rgba(74,52,36,.12);
  --shadow-3:0 18px 48px rgba(74,52,36,.16);
  --focus:0 0 0 2px var(--paper),0 0 0 4px var(--clay-deep);
  /* движение */
  --ease-out:cubic-bezier(.215,.61,.355,1); --ease-soft:cubic-bezier(.165,.84,.44,1);
  --t-fast:150ms; --t-base:300ms; --t-slow:600ms; --t-reveal:900ms; --reveal-y:32px;
  /* производные (таск 04): ничего своего, только чтобы в правилах не было «магических» чисел */
  --hairline:1px; --stroke:2px; /* линии и кольцо фокуса */
  --tap:44px; --btn-h:52px; --field-h:52px; /* цели касания ≥ 44 px, кнопки и поля */
  --fs-menu:.9375rem; /* пункты выпадающего меню: 15 px, блок «Меню» исследования */
  --menu-w:15rem; --t-fade:400ms; /* ширина выпадающего меню; появление кадра по load (0.4 s) */
  --w-banner:28rem; --w-btn:11.5rem; --col-label:8rem; --col-year:5rem; /* баннер cookie, кнопка связи (минимум), колонки списков */
  /* слои — один порядок на всю страницу: подсказка о языке < баннер cookie < шапка (вместе с выпадающим списком и шторкой меню) < просмотр фото < ссылка «К содержимому» */
  --z-hint:40; --z-banner:60; --z-header:80; --z-lightbox:100; --z-skip:120;
}

/* ===== 2. Шрифты: свои файлы WOFF2 (OFL), кириллица + латиница, swap ===== */
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/onest-cyrillic-wght-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/onest-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/cormorant-garamond-cyrillic-wght-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Запасные гарнитуры подогнаны под метрики веб-шрифтов (замер ширины и вылетов), пока грузятся файлы */
@font-face{font-family:"Onest Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:103.8%;ascent-override:93.4%;descent-override:28.9%;line-gap-override:0%}
@font-face{font-family:"Cormorant Fallback";src:local("Times New Roman"),local("Times"),local("Liberation Serif");size-adjust:94.3%;ascent-override:97.5%;descent-override:30.7%;line-gap-override:0%}

/* ===== 3. Основа ===== */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable;scroll-padding-top:calc(var(--header-h) + var(--sp-4))}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html.is-locked,html.is-locked body{overflow:hidden}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--grain),var(--paper);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--font-text);font-synthesis:style;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
[hidden]{display:none !important}
img,svg,video{max-width:100%}
img{display:block;height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;line-height:var(--lh-tight);letter-spacing:var(--track-head);text-wrap:balance}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);font-weight:500}
p,figure{margin:0}
ul,ol{margin:0;padding:0}
a{color:var(--clay);text-decoration-thickness:var(--hairline);text-underline-offset:.2em;transition:color var(--t-fast)}
a:hover{color:var(--clay-deep)}
hr{border:0;border-top:var(--hairline) solid var(--sand);margin:var(--sp-7) 0}
::selection{background:color-mix(in srgb,var(--clay) 24%,var(--paper));color:var(--ink)}
:focus-visible{outline:var(--stroke) solid var(--clay-deep);outline-offset:var(--stroke)}
.site-main{flex:1 0 auto}
.site-main:focus{outline:0}
.site-main > h1,.site-main > h2,.site-main > p,.site-main > ul,.site-main > ol{max-width:calc(var(--w-prose) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.site-main > h1{margin-block:var(--sp-9) var(--sp-5)}
.site-main > p:last-child{margin-bottom:var(--section-y)}
.page-error .site-main{text-align:center}
.page-error .site-main > p + p{margin-top:var(--sp-4)}

/* ===== 4. Раскладка и утилиты ===== */
.container{width:100%;max-width:calc(var(--w-content) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:calc(var(--w-wide) + 2 * var(--gutter))}
.container--prose{max-width:calc(var(--w-prose) + 2 * var(--gutter))}
.section{padding-block:var(--section-y)}
.section--linen{background:var(--grain),var(--linen)}
.section--rule{border-top:var(--hairline) solid var(--sand)}
.eyebrow{font:500 var(--fs-eyebrow)/1.4 var(--font-text);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--clay)}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink)}
@media (min-width:900px){.lead{font-weight:300}} /* вес 300 — только от 20 px */
.prose{max-width:var(--w-prose)}
.prose > * + *{margin-top:var(--sp-4)}
.prose h2,.prose h3{margin-top:var(--sp-7)}
.prose ul,.prose ol{padding-left:var(--sp-5)}
.prose li + li{margin-top:var(--sp-2)}
.muted{color:var(--cocoa)}
.quote{margin:0;padding-left:var(--sp-5);border-left:var(--stroke) solid color-mix(in srgb,var(--clay) 50%,transparent);font:400 var(--fs-h3)/1.3 var(--font-display);letter-spacing:var(--track-head)}
.visually-hidden{position:absolute !important;width:var(--hairline);height:var(--hairline);margin:calc(var(--hairline) * -1);padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:var(--sp-3);left:var(--sp-3);z-index:var(--z-skip);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);background:var(--ink);color:var(--paper);text-decoration:none;transform:translateY(-300%);transition:transform var(--t-base) var(--ease-out)}
.skip-link:focus{transform:none;color:var(--paper)}
.card-grid{display:grid;gap:var(--sp-6);grid-template-columns:1fr}
@media (min-width:600px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.snap-row{display:flex;gap:var(--sp-4);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.snap-row > *{flex:0 0 86%;scroll-snap-align:center}
@media (min-width:600px){.snap-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));overflow:visible}.snap-row > *{flex:none}}
.icon{flex:none;width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ===== 5. Кнопки ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--btn-h);padding:0 var(--sp-6);border:var(--hairline) solid transparent;border-radius:var(--r-pill);font:500 var(--fs-eyebrow)/1.2 var(--font-text);letter-spacing:var(--track-caps);text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.btn:focus-visible{outline:var(--stroke) solid transparent;box-shadow:var(--focus)}
.btn--primary{background:var(--clay);border-color:var(--clay);color:var(--paper)}
.btn--primary:hover{background:var(--clay-deep);border-color:var(--clay-deep);color:var(--paper)}
.btn--secondary{background:transparent;border-color:var(--clay);color:var(--clay)}
.btn--secondary:hover{background:var(--clay);color:var(--paper)}
.btn__icon{transition:transform var(--t-base) var(--ease-out)}
.btn:hover .btn__icon{transform:translateX(var(--sp-1))}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn.is-loading{position:relative;color:transparent;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:var(--sp-5);height:var(--sp-5);border:var(--stroke) solid var(--paper);border-right-color:transparent;border-radius:50%;animation:spin var(--t-reveal) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.link-arrow{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);font:500 var(--fs-eyebrow)/1.2 var(--font-text);letter-spacing:var(--track-caps);text-transform:uppercase;text-decoration:none;color:var(--clay)}
.link-arrow .icon{transition:transform var(--t-base) var(--ease-out)}
.link-arrow:hover .icon{transform:translateX(var(--sp-1))}

/* ===== 6. Кнопки связи (партиал contact-buttons) ===== */
.contact-block{container:contact/inline-size;width:100%}
.contact-buttons{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--w-btn)),1fr))}
@container contact (max-width:33.99rem){.contact-buttons{grid-template-columns:1fr}}
@container contact (min-width:34rem){.contact-buttons{grid-template-columns:repeat(3,1fr)}}
.contact-btn{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--btn-h);padding:0 var(--sp-5);border:var(--hairline) solid var(--clay);border-radius:var(--r-pill);font:500 var(--fs-eyebrow)/1.2 var(--font-text);letter-spacing:var(--track-caps);text-transform:uppercase;text-decoration:none;color:var(--clay);transition:background-color var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out)}
.contact-btn:hover{background:var(--clay);color:var(--paper)}
.contact-btn:focus-visible{outline:var(--stroke) solid transparent;box-shadow:var(--focus)}
.contact-btn .icon{transition:transform var(--t-base) var(--ease-out)}
.contact-btn:hover .icon{transform:translate(var(--sp-1),calc(var(--sp-1) * -1))}
.contact-block__note,.contact-block__hint{margin-top:var(--sp-3);font-size:var(--fs-small);line-height:1.5;color:var(--cocoa)}
.contact-block__hint p{margin:0}
.contact-block__hint a,.contact-block__note a{color:inherit}

/* ===== 7. Шапка, меню, переключатель языка ===== */
.site-header{position:relative;z-index:var(--z-header);height:var(--header-h)}
html.js .site-header{position:sticky;top:0} /* липкой шапка становится вместе со скриптом: фон ей даёт .is-scrolled, а без скрипта он не включится */
.site-header:focus{outline:0}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);background:color-mix(in srgb,var(--paper) 85%,transparent);-webkit-backdrop-filter:blur(var(--sp-2));backdrop-filter:blur(var(--sp-2));border-bottom:var(--hairline) solid var(--sand);opacity:0;transition:opacity var(--t-base) var(--ease-out)}
.site-header.is-scrolled::before,.site-header.is-open::before{opacity:1}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);height:100%;max-width:calc(var(--w-wide) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.site-header__brand{display:inline-flex;align-items:center;min-height:var(--tap);font:500 var(--fs-h3)/1 var(--font-display);letter-spacing:var(--track-head);color:var(--ink);text-decoration:none;white-space:nowrap}
.site-header__brand:hover{color:var(--clay-deep)}
.site-nav{display:flex;align-items:center;gap:var(--sp-7)}
.site-nav__list{display:flex;align-items:center;gap:var(--sp-5);margin:0;padding:0;list-style:none}
.site-nav__item{position:relative}
.site-nav__link{position:relative;display:inline-flex;white-space:nowrap;align-items:center;gap:var(--sp-1);min-height:var(--tap);font:500 var(--fs-eyebrow)/1 var(--font-text);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink);text-decoration:none;transition:color var(--t-base) var(--ease-out)}
.site-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:var(--sp-2);height:var(--hairline);background:var(--clay);transform:scaleX(0);transition:transform var(--t-slow) var(--ease-soft)}
.site-nav__link:hover,.site-nav__item.is-active > .site-nav__link{color:var(--clay)}
.site-nav__link:hover::after,.site-nav__item.is-active > .site-nav__link::after{transform:scaleX(1)}
.site-nav__chevron{width:1.1em;height:1.1em;transition:transform var(--t-base) var(--ease-out)}
.site-nav__item.is-open > .site-nav__link .site-nav__chevron{transform:rotate(180deg)}
.site-nav__menu{position:absolute;top:calc(100% + var(--sp-2));left:calc(var(--sp-5) * -1);z-index:1;min-width:var(--menu-w);margin:0;padding:var(--sp-3) 0;list-style:none;background:var(--surface);border-radius:var(--r-sm);box-shadow:var(--shadow-2);opacity:0;visibility:hidden;transform:translateY(calc(var(--sp-2) * -1));transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out),visibility 0s linear var(--t-base)}
.site-nav__menu::before{content:"";position:absolute;left:0;right:0;top:calc(var(--sp-2) * -1);height:var(--sp-2)}
.site-nav__item.is-open > .site-nav__menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.site-nav__sublink{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-5);font-size:var(--fs-menu);line-height:1.3;color:var(--ink);text-decoration:none;white-space:nowrap}
.site-nav__sublink:hover,.site-nav__sublink[aria-current="page"]{background:var(--linen);color:var(--clay)}
.site-nav__extras{display:none}
.lang-switch{display:flex;align-items:center;font:500 var(--fs-eyebrow)/1 var(--font-text);letter-spacing:var(--track-caps)}
.lang-switch__item{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);color:var(--cocoa);text-decoration:none}
a.lang-switch__item:hover{color:var(--clay)}
.lang-switch__item[aria-current]{color:var(--ink);cursor:default}
.lang-switch__item + .lang-switch__item{position:relative}
.lang-switch__item + .lang-switch__item::before{content:"";position:absolute;left:0;top:50%;height:1em;border-left:var(--hairline) solid var(--sand);transform:translateY(-50%)}
.nav-toggle{display:none;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);margin-right:calc(var(--sp-2) * -1);padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);cursor:pointer}
.nav-toggle .icon{width:var(--sp-6);height:var(--sp-6)}
.nav-toggle .icon--close,.nav-toggle[aria-expanded="true"] .icon--menu{display:none}
.nav-toggle[aria-expanded="true"] .icon--close{display:block}
@media (min-width:1200px){.site-nav__list{gap:var(--sp-6)}}
/* Меню без метки html.js (скрипт выключен, не загрузился или не запустился) — обычный список ссылок:
   шторки и бургера нет; на широком экране выпадающий список «Портфолио» открывается наведением и фокусом. */
@media (min-width:1101px){html:not(.js) .site-nav__item:hover > .site-nav__menu,html:not(.js) .site-nav__item:focus-within > .site-nav__menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}}
@media (max-width:1100px){
  html:not(.js) .site-header{height:auto}
  html:not(.js) .site-header__inner{flex-wrap:wrap;height:auto;padding-block:var(--sp-3)}
  html:not(.js) .site-nav{flex:1 0 100%;flex-wrap:wrap;gap:var(--sp-4)}
  html:not(.js) .site-nav__list{flex-wrap:wrap;gap:0 var(--sp-5)}
  html:not(.js) .site-nav__chevron,html:not(.js) .site-nav__menu{display:none}
}
/* Шторка — до 1100 px, а не до 900: подписи CAPS по-русски не помещаются в шапку раньше. Включает её только метка html.js */
@media (max-width:1100px){
  html.js .nav-toggle{display:inline-flex}
  html.js .site-nav{position:fixed;inset:var(--header-h) 0 0 0;z-index:1;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--sp-6);padding:var(--sp-4) max(var(--gutter),calc(50% - var(--w-prose) / 2)) var(--sp-7);overflow-y:auto;overscroll-behavior:contain;background:var(--grain),var(--paper);opacity:0;visibility:hidden;transition:opacity var(--t-base) var(--ease-out),visibility 0s linear var(--t-base)}
  html.js .site-header.is-open .site-nav{opacity:1;visibility:visible;transition-delay:0s}
  html.js .site-nav__list{flex-direction:column;align-items:stretch;gap:0}
  html.js .site-nav__item{border-bottom:var(--hairline) solid color-mix(in srgb,var(--clay) 40%,transparent)}
  html.js .site-nav__link{width:100%;min-height:var(--sp-8);justify-content:space-between;font:400 var(--fs-h3)/1.2 var(--font-display);letter-spacing:var(--track-head);text-transform:none}
  html.js .site-nav__link::after{display:none}
  html.js .site-nav__chevron{width:var(--sp-5);height:var(--sp-5)}
  html.js .site-nav__menu{position:static;min-width:0;padding:0 0 var(--sp-4) var(--sp-4);background:transparent;box-shadow:none;border-radius:0;opacity:1;visibility:visible;transform:none;transition:none;display:none}
  html.js .site-nav__menu::before{display:none}
  html.js .site-nav__item.is-open > .site-nav__menu{display:block}
  html.js .site-nav__sublink{padding:var(--sp-3) 0;font-size:var(--fs-body);white-space:normal}
  html.js .site-nav__sublink:hover,html.js .site-nav__sublink[aria-current="page"]{background:transparent}
  html.js .lang-switch{margin-left:calc(var(--sp-3) * -1)} /* текст «RU» встаёт вровень с пунктами меню */
  html.js .site-nav__extras{display:block;margin-top:auto}
}

/* ===== 8. Подвал ===== */
.site-footer{margin-top:var(--section-y);padding-block:var(--sp-9) var(--sp-7);background:var(--grain),var(--linen);border-top:var(--hairline) solid var(--sand)}
.site-footer__top{display:grid;gap:var(--sp-7)}
@media (min-width:900px){.site-footer__top{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:start}}
.site-footer__name{font:500 var(--fs-h3)/var(--lh-tight) var(--font-display)}
.site-footer__tagline{margin-top:var(--sp-2);color:var(--cocoa)}
.site-footer__legal{margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:var(--hairline) solid var(--sand);font-size:var(--fs-small);line-height:1.6;color:var(--cocoa)}
.site-footer__legal > * + *{margin-top:var(--sp-2)}
.site-footer__legal a,.site-footer__legal button{color:inherit}
.site-footer__legal button{display:inline-flex;align-items:center;min-height:var(--tap);padding:0;border:0;background:none;font:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.site-footer__legal a:hover,.site-footer__legal button:hover{color:var(--clay-deep)}
.age-mark{display:inline-block;padding:0 var(--sp-2);border:var(--hairline) solid currentColor;border-radius:var(--r-sm);font-weight:500;line-height:1.5}

/* ===== 9. Хлебные крошки ===== */
.breadcrumbs{max-width:calc(var(--w-wide) + 2 * var(--gutter));margin-inline:auto;padding:var(--sp-4) var(--gutter) 0;font-size:var(--fs-small)}
.breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-2);margin:0;padding:0;list-style:none;color:var(--cocoa)}
.breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap)}
.breadcrumbs__item + .breadcrumbs__item::before{content:"/";content:"/" / "";color:var(--line-strong)}
.breadcrumbs__link{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--cocoa);text-decoration:none}
.breadcrumbs__link:hover{color:var(--clay);text-decoration:underline}
.breadcrumbs__item[aria-current="page"]{color:var(--ink)}

/* ===== 10. Галерея: ряды одной высоты на чистом CSS (§7), разметка ul.gallery > li.gallery__item > a > img ===== */
.gallery{display:flex;flex-wrap:wrap;gap:var(--gap-gallery);margin:0;padding:0;list-style:none}
.gallery::after{content:"";flex-grow:1e6} /* заполнитель: последний ряд не растягивается */
.gallery__item{position:relative;min-width:0;flex:calc(var(--ar,1) * 100) 1 calc(var(--ar,1) * var(--row-h));aspect-ratio:var(--ar,1);background:var(--c,var(--sand));border-radius:var(--r-photo)}
.gallery__item > a{position:absolute;inset:0;display:block;overflow:hidden;border-radius:inherit;cursor:zoom-in}
.gallery__item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-soft),opacity var(--t-fade) var(--ease-out)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.gallery__item > a:hover img{transform:scale(1.03)}}
/* на телефоне портреты идут по два в ряд: цель высоты ряда — половина ширины колонки, а не 200 px минимума */
@media (max-width:599px){:root{--row-h:calc((100vw - 2 * var(--gutter)) * .52)}}
/* кадр появляется по своему load (fade 0.4 s), блок [data-reveal] — когда сам доехал до экрана (§16): site.js ловит и то,
   что добавили после запуска. Прячет их только метка html.js; без JS или если site.js не загрузился (сторож снял метку)
   всё видно сразу. Страховки по таймеру нет: кадр, до которого долистали на десятой секунде, появится по своему load. */
@media (prefers-reduced-motion:no-preference){
  html.js img[loading="lazy"]:not(.is-loaded){opacity:0}
}

/* ===== 11. Просмотр фото в полный экран (site.js копирует разметку .lightbox из <template id="lightbox-template">) ===== */
.lightbox:focus{outline:0}
.lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);display:flex;flex-direction:column;background:var(--paper);color:var(--ink);opacity:0;visibility:hidden;transition:opacity var(--t-base) var(--ease-out),visibility 0s linear var(--t-base)}
.lightbox.is-open{opacity:1;visibility:visible;transition-delay:0s}
.lightbox__bar{flex:none;display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding-inline:var(--gutter)}
.lightbox__counter{font:500 var(--fs-small)/1 var(--font-text);letter-spacing:var(--track-head);color:var(--cocoa);font-variant-numeric:tabular-nums}
.lightbox__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);cursor:pointer;transition:background-color var(--t-fast)}
.lightbox__btn:hover{background:var(--linen)}
.lightbox__btn .icon{width:var(--sp-5);height:var(--sp-5)}
.lightbox__stage{position:relative;flex:1 1 auto;min-height:0;margin:0 var(--gutter);touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.lightbox__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;transition:opacity var(--t-base) var(--ease-out)}
.lightbox__stage img.is-hidden{opacity:0}
.lightbox__nav{position:absolute;top:50%;z-index:1;transform:translateY(-50%);background:var(--paper);box-shadow:var(--shadow-1)}
.lightbox__nav:hover{background:var(--linen)}
.lightbox__prev{left:var(--sp-2)} .lightbox__next{right:var(--sp-2)}
.lightbox__caption{flex:none;min-height:var(--sp-9);padding:var(--sp-4) var(--gutter) max(var(--sp-5),env(safe-area-inset-bottom));text-align:center;font-size:var(--fs-small);line-height:1.5;color:var(--cocoa)}
.lightbox__text{margin:0}
.lightbox__badge{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);padding-inline:var(--sp-3);color:var(--clay)} /* цель касания ≥ 44×44 */
.lightbox.is-single .lightbox__nav,.lightbox.is-single .lightbox__counter{display:none}
@media (pointer:coarse){.lightbox__nav{background:color-mix(in srgb,var(--paper) 70%,transparent);box-shadow:none}} /* на тач-экране стрелки — те же кнопки 44×44 у краёв кадра, только полупрозрачные: видны, доступны касанием и скринридеру (свайп — лишь дополнительный способ) */

/* ===== 12. Карточки, плитки, теги ===== */
.card{padding:var(--sp-6);background:var(--linen);border-radius:var(--r-md)}
.card--surface{background:var(--surface);box-shadow:var(--shadow-1)}
.tag{display:inline-flex;align-items:center;min-height:var(--sp-5);padding:0 var(--sp-3);border:var(--hairline) solid var(--line-strong);border-radius:var(--r-pill);font:500 var(--fs-eyebrow)/1 var(--font-text);letter-spacing:var(--track-head);color:var(--cocoa);white-space:nowrap}
.tag--accent{border-color:var(--clay);color:var(--clay)}
.pub-card{position:relative;display:flex;flex-direction:column;gap:var(--sp-4)}
.pub-card__media{aspect-ratio:4/5;overflow:hidden;background:var(--linen);border-radius:var(--r-photo)}
.pub-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-soft)}
.pub-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.pub-card__title{font-size:var(--fs-h3)}
.pub-card__link{color:var(--ink);text-decoration:none;background:linear-gradient(var(--clay),var(--clay)) 0 100%/0 var(--hairline) no-repeat;transition:background-size var(--t-slow) var(--ease-soft)}
.pub-card__link::after{content:"";position:absolute;inset:0}
.pub-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);color:var(--cocoa)}
.pub-card__source{position:relative;z-index:1;margin-top:var(--sp-2)}
.pub-card:hover .pub-card__link,.pub-card:focus-within .pub-card__link{background-size:100% var(--hairline)}
.pub-card:has(.pub-card__link:focus-visible){outline:var(--stroke) solid var(--clay-deep);outline-offset:var(--sp-2);border-radius:var(--r-sm)}
.pub-card__link:focus-visible{outline:0}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.pub-card:hover .pub-card__media img{transform:scale(1.03)}}
.genre-tile{position:relative;display:grid;gap:var(--sp-1);color:var(--ink);text-decoration:none}
.genre-tile__media{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--linen);border-radius:var(--r-photo)}
.genre-tile__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-soft)}
.genre-tile__title{margin-top:var(--sp-3);font:500 var(--fs-h3)/var(--lh-tight) var(--font-display);letter-spacing:var(--track-head)}
.genre-tile__meta{font-size:var(--fs-small);color:var(--cocoa)}
.genre-tile__more{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);font:500 var(--fs-eyebrow)/1.2 var(--font-text);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--clay)}
.genre-tile__more .icon{transition:transform var(--t-base) var(--ease-out)}
.genre-tile:hover .genre-tile__more .icon{transform:translateX(var(--sp-1))}
.genre-tile:hover{color:var(--ink)}
.genre-tile:focus-visible{outline-offset:var(--sp-2)}
.genre-tile__placeholder{display:flex;align-items:center;justify-content:center;height:100%;padding:var(--sp-5);text-align:center;font-size:var(--fs-small);color:var(--cocoa);background:var(--grain),var(--linen)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.genre-tile:hover .genre-tile__media img{transform:scale(1.04)}}

/* ===== 13. Форма ===== */
.form{display:grid;gap:var(--sp-5)}
.field{display:grid;gap:var(--sp-2);min-width:0;margin:0;padding:0;border:0}
.field__label{font:500 var(--fs-small)/1.3 var(--font-text);color:var(--ink);padding:0}
.field__hint{font-size:var(--fs-small);line-height:1.5;color:var(--cocoa)}
.field__error{font-size:var(--fs-small);line-height:1.5;color:var(--clay-deep)}
.field__error:empty{display:none}
.input{width:100%;min-height:var(--field-h);padding:var(--sp-3) var(--sp-4);border:var(--hairline) solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:400 var(--fs-body)/1.4 var(--font-text);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.input::placeholder{color:var(--cocoa);opacity:1}
.input:hover{border-color:var(--ink)}
.input:focus-visible{outline:var(--stroke) solid transparent;border-color:var(--clay-deep);box-shadow:var(--focus)}
.input--area{min-height:calc(var(--field-h) * 2.5);resize:vertical}
.field.is-invalid .input,.input[aria-invalid="true"]{border-color:var(--clay-deep);box-shadow:inset 0 0 0 var(--hairline) var(--clay-deep)}
.segmented{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.segmented__item{position:relative}
.segmented__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.segmented__label{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-5);border:var(--hairline) solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-small);transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.segmented__input:hover + .segmented__label{border-color:var(--ink)}
.segmented__input:checked + .segmented__label{background:var(--clay);border-color:var(--clay);color:var(--paper)}
.segmented__input:focus-visible + .segmented__label{box-shadow:var(--focus)}
.check{display:flex;align-items:flex-start;gap:var(--sp-3);min-height:var(--tap);padding-block:var(--sp-2);cursor:pointer;font-size:var(--fs-small);line-height:1.5}
.check__input{flex:none;width:var(--sp-5);height:var(--sp-5);margin:0;accent-color:var(--clay);cursor:pointer}
.check__text a{color:var(--clay)}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4)}
.form__status{padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);background:var(--linen);color:var(--ink)}
.form__status--error{border:var(--stroke) solid var(--clay-deep)}
.field-trap{position:absolute;left:-100vw;width:var(--hairline);height:var(--hairline);overflow:hidden} /* ловушка для ботов: за экраном, не display:none */

/* ===== 14. Заглушка, «Коротко», достижения, полоса изданий ===== */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);max-width:var(--w-prose);margin-inline:auto;padding:var(--sp-9) var(--sp-5);text-align:center;background:var(--grain),var(--linen);border-radius:var(--r-md)}
.empty-state__title{font:400 var(--fs-h3)/var(--lh-tight) var(--font-display);letter-spacing:var(--track-head)}
.empty-state__text{color:var(--cocoa)}
.facts__title{margin-bottom:var(--sp-4);font:500 var(--fs-eyebrow)/1.4 var(--font-text);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--clay)}
.facts__list{margin:0;border-top:var(--hairline) solid var(--sand)}
.facts__row{display:grid;gap:var(--sp-1) var(--sp-5);padding:var(--sp-3) 0;border-bottom:var(--hairline) solid var(--sand)}
@media (min-width:600px){.facts__row{grid-template-columns:minmax(var(--col-label),1fr) 2fr}}
.facts dt{color:var(--cocoa)}
.facts dd{margin:0}
.achievements__group + .achievements__group{margin-top:var(--sp-7)}
.achievements__kind{margin-bottom:var(--sp-3)}
.achievements__list{margin:0;padding:0;list-style:none;border-top:var(--hairline) solid var(--sand)}
.achievement{display:grid;gap:var(--sp-1) var(--sp-5);padding:var(--sp-4) 0;border-bottom:var(--hairline) solid var(--sand)}
@media (min-width:600px){.achievement{grid-template-columns:var(--col-year) 1fr}}
.achievement__year{font:500 var(--fs-h3)/1.2 var(--font-display);color:var(--clay);font-variant-numeric:lining-nums}
.achievement__title{font-weight:500}
.achievement__text{margin-top:var(--sp-1);color:var(--cocoa);font-size:var(--fs-small)}
.outlets__label{margin-bottom:var(--sp-4)}
.outlets__list{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-7);margin:0;padding:0;list-style:none}
.outlets__item{font:400 var(--fs-h3)/var(--lh-tight) var(--font-display);letter-spacing:var(--track-head);color:var(--ink)}

/* ===== 15. Баннер cookie (разметку печатает Consent::bannerHtml), подсказка о языке ===== */
.cookie-banner{position:fixed;z-index:var(--z-banner);left:var(--sp-4);bottom:var(--sp-4);display:grid;gap:var(--sp-3);width:min(var(--w-banner),calc(100% - 2 * var(--sp-4)));max-height:calc(100vh - 2 * var(--sp-4));max-height:calc(100dvh - 2 * var(--sp-4));overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-5);background:var(--surface);border:var(--hairline) solid var(--sand);border-radius:var(--r-md);box-shadow:var(--shadow-3);animation:banner-in var(--t-base) var(--ease-out)}
.cookie-banner__title{font:500 var(--fs-h3)/var(--lh-tight) var(--font-display)}
.cookie-banner__text{font-size:var(--fs-small);line-height:1.55;color:var(--cocoa)}
.cookie-banner__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.cookie-banner__actions .btn{min-height:var(--tap);padding:0 var(--sp-3)}
.cookie-banner--static{position:static;animation:none}
@keyframes banner-in{from{opacity:0;transform:translateY(var(--sp-4))}}
.lang-hint{position:fixed;z-index:var(--z-hint);top:calc(var(--header-h) + var(--sp-2));right:var(--gutter);display:flex;align-items:center;gap:var(--sp-2);max-width:calc(100% - 2 * var(--gutter));padding:0 var(--sp-2) 0 var(--sp-5);background:var(--surface);border:var(--hairline) solid var(--sand);border-radius:var(--r-pill);box-shadow:var(--shadow-2);font-size:var(--fs-small)}
.lang-hint__link{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--clay)}
.lang-hint__close{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--cocoa);cursor:pointer}
.lang-hint__close:hover{background:var(--linen);color:var(--ink)}
.lang-hint--static{position:static;display:inline-flex}

/* ===== 16. Движение ===== */
@media (prefers-reduced-motion:no-preference){
  html.js [data-reveal]:not(.is-revealed){opacity:0;transform:translateY(var(--reveal-y))}
  [data-reveal]{transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s !important;animation-delay:0s !important;transition-duration:0s !important;transition-delay:0s !important;scroll-behavior:auto !important}
}
@media print{.site-header,.site-nav,.cookie-banner,.lang-hint,.lightbox,.skip-link{display:none !important}body{background:none}}