/* =========================================================
   an Artist — Татьяна Летавина · an-Artist.ru
   Общие стили для index.html, portfolio.html, 404.html
   ========================================================= */

/* ===== Шрифты сайта — с самого сайта, без внешних сервисов =====
   WOFF — все современные браузеры; TTF — запасной для старых устройств */
@font-face { font-family: 'Caviar Dreams'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/caviar-dreams-regular.woff") format("woff"), url("../fonts/caviar-dreams-regular.ttf") format("truetype"); }
@font-face { font-family: 'Caviar Dreams'; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/caviar-dreams-bold.woff") format("woff"), url("../fonts/caviar-dreams-bold.ttf") format("truetype"); }
@font-face { font-family: 'Caviar Dreams'; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/caviar-dreams-italic.woff") format("woff"), url("../fonts/caviar-dreams-italic.ttf") format("truetype"); }
@font-face { font-family: 'Lobster Two'; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/lobster-two-bold.woff") format("woff"), url("../fonts/lobster-two-bold.ttf") format("truetype"); }

:root {
  --r-menu: 3mm;            /* скругление меню и попапов */
  --bg: #000;
  --bg-soft: #080808;
  --bg-card: #101010;
  --bg-ph: #181210;
  --gold: #FFC107;
  --gold-bright: #FFD700;
  --gold-dim: #d9bd8c;      /* меню, второстепенные кнопки */
  --gold-text: #ead6a6;     /* основной текст — контраст 14.7:1 */
  --gold-muted: #d6bd90;    /* описания — 11.5:1 */
  --gold-dark: #bfa46a;     /* подписи, метки — 8.7:1 */
  --gold-faint: #a89a82;    /* копирайт, служебное — 7.6:1 */
  --orange: #FF7A45;
  --line: rgba(255, 215, 0, .15);
  --line-soft: rgba(255, 255, 255, .06);
  --max-w: 1280px;
  --header-h: 72px;
  --radius: 14px;
  /* Шрифты: меняются здесь в одном месте */
  --font-head: 'Caviar Dreams', system-ui, sans-serif;
  --font-body: 'Caviar Dreams', system-ui, sans-serif;
  --font-cjk: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC', 'WenQuanYi Micro Hei', sans-serif;
}
/* китайская версия: латиница остаётся в Caviar Dreams, иероглифы — из системных китайских шрифтов */
html[lang^="zh"] {
  --font-head: 'Caviar Dreams', var(--font-cjk);
  --font-body: 'Caviar Dreams', var(--font-cjk);
}
html[lang^="zh"] body { line-height: 1.8; }
.lang__btn--zh, [lang^="zh"] .lang__btn--zh { font-family: 'Caviar Dreams', var(--font-cjk); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
/* CSS-плавность остаётся запасным вариантом; скрипт отключает её только на время своей анимации */
body {
  margin: 0;
  background: var(--bg);
  color: var(--gold-text);
  font-family: var(--font-body);
  font-size: clamp(15.5px, 0.95rem + 0.2vw, 17.5px);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: rgba(255, 193, 7, .3); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .container { padding: 0 40px; } }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Типографика ---------- */
.glow { color: var(--gold-bright); text-shadow: 0 0 12px rgba(255,215,0,.85), 0 0 28px rgba(212,160,23,.6), 0 0 45px rgba(255,193,7,.35); }
.eyebrow { font-size: clamp(11px, .7rem + .15vw, 12.5px); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-dark); margin: 0; }
.h-section { font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 4.5vw, 48px); line-height: 1.1; margin: 0; }
.lead { color: var(--gold-muted); font-size: clamp(15px, .9rem + .2vw, 17px); line-height: 1.75; max-width: 640px; margin: 14px auto 0; }
.divider { height: 1px; width: 120px; margin: 24px auto 0; background: rgba(255,215,0,.35); }
.divider--left { margin-left: 0; }
.section { padding: 88px 0; border-top: 1px solid rgba(255,255,255,.04); }
.section--soft { background: var(--bg-soft); }
.section__head { text-align: center; margin-bottom: 48px; }

/* ---------- Кнопки ---------- */
/* Горизонтальные кнопки — один стиль и одно поведение для всех (.btn, .chip и все варианты):
   тонкая золотая рамка, прозрачная золотистая подложка, золотой текст;
   наведение/фокус — заливка золотом и чёрный текст; нажатие — лёгкое сжатие */
.btn, .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 28px; border-radius: 999px;
  border: 1px solid rgba(255,193,7,.4); background: rgba(255,193,7,.1); color: var(--gold-bright);
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  white-space: nowrap; max-width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.btn:hover, .btn:focus-visible, .chip:hover, .chip:focus-visible {
  background: var(--gold); border-color: var(--gold); color: #000;
  box-shadow: 0 0 18px rgba(255,193,7,.35);
}
.btn:active, .chip:active { transform: scale(.97); }
@media (max-width: 360px) { .btn, .chip { white-space: normal; } }
@media (hover: none) { .btn:hover, .chip:hover { background: rgba(255,193,7,.1); border-color: rgba(255,193,7,.4); color: var(--gold-bright); box-shadow: none; } .btn:active, .chip:active { background: var(--gold); color: #000; } }

/* ---------- Шапка ---------- */
.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(255,215,0,.12);
  transition: background .4s, border-color .4s, box-shadow .4s;
}
.header.is-scrolled { background: rgba(0,0,0,.55); border-bottom-color: rgba(255,215,0,.2); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.header.menu-open { background: rgba(0,0,0,.72); }
/* hero и шапка портфолио уходят под полупрозрачную панель */
/* под панель уходит только фон блока; содержимое начинается ниже панели */
.hero, .page-head, .notfound { margin-top: calc((var(--header-h) + 1px) * -1); }
.hero { padding-top: calc(var(--header-h) + 1px); }
.header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand picture { display: contents; }
.brand img { height: 44px; width: 44px; filter: drop-shadow(0 0 8px rgba(255,215,0,.6)); transition: filter .25s; }
.brand:hover img { filter: drop-shadow(0 0 12px rgba(255,215,0,.9)); }
.brand span { font-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: .04em; }

.nav { display: none; align-items: center; gap: 32px; white-space: nowrap; }
@media (min-width: 860px) { .nav { display: flex; } }
/* JS сам решает, помещается ли строчное меню: .is-wide / .is-compact */
.header.is-wide .nav { display: flex; }
.header.is-compact .nav { display: none; }
/* все пункты — на одной линии: одинаковая высота и центровка, и у простых ссылок, и у пунктов с выпадающим списком */
.nav__link { display: inline-flex; align-items: center; height: 24px; line-height: 1; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dim); transition: color .2s; }
.nav__link:hover, .nav__link.is-active { color: var(--gold-bright); }
.nav__drop { position: relative; display: flex; align-items: center; }
.nav__drop > .nav__link::after { content: "▾"; font-size: 10px; line-height: 1; margin-left: .45em; opacity: .7; letter-spacing: 0; }
.dropdown {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(6px);
  width: 300px; padding: 8px; border-radius: var(--r-menu);
  /* тёмный стиль сайта — как у меню бургера */
  background: #0b0a08; box-shadow: 0 0 0 1px rgba(255,215,0,.14), 0 18px 40px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
}
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.nav__drop:hover .dropdown, .nav__drop:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; font-size: 13px; color: var(--gold-muted); transition: background .2s, color .2s; }
.dropdown a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(255,193,7,.7); flex: none; }
.dropdown a.dropdown__all { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-bright); }
.dropdown a.dropdown__all::before { display: none; }
.dropdown a:hover, .dropdown a:focus-visible { background: rgba(255,193,7,.1); color: var(--gold-bright); }
.dropdown hr { border: 0; height: 1px; background: rgba(255,215,0,.14); margin: 4px 0; }
.dropdown--narrow { width: 240px; }

.burger {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none;
  border: 1px solid rgba(255,215,0,.3); border-radius: 10px; background: rgba(0,0,0,.35);
  color: var(--gold-bright); transition: background .25s, border-color .25s, box-shadow .25s;
}
.burger:hover, .burger:focus-visible, .burger[aria-expanded="true"] { border-color: var(--gold-bright); box-shadow: 0 0 16px rgba(255,193,7,.35); background: rgba(255,193,7,.1); }
@media (min-width: 860px) { .burger { display: none; } }
.header.is-wide .burger { display: none; }
.header.is-compact .burger { display: inline-flex; }
.burger__lines { position: relative; width: 20px; height: 14px; }
.burger__lines i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 4px rgba(255,215,0,.7); transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s, top .3s cubic-bezier(.16,1,.3,1); }
.burger__lines i:nth-child(1) { top: 0; }
.burger__lines i:nth-child(2) { top: 6px; }
.burger__lines i:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__lines i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.burger[aria-expanded="true"] .burger__lines i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.header__inner { position: relative; }
.mobile-nav {
  position: absolute; z-index: 45; top: 100%; left: 0; right: 0;
  display: block; overflow: hidden; max-height: 0; visibility: hidden; opacity: 0;
  background: #0b0a08;
  border-radius: 0 0 var(--r-menu) var(--r-menu);
  box-shadow: 0 0 0 1px rgba(255,215,0,.14), 0 18px 40px rgba(0,0,0,.55);
  transform: translateY(-6px);
  transition: max-height .35s cubic-bezier(.16,1,.3,1), opacity .25s, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s;
}
.mobile-nav.is-open {
  max-height: calc(100vh - var(--header-h) - 16px); overflow-y: auto; overscroll-behavior: contain;
  visibility: visible; opacity: 1; transform: none;
  transition: max-height .35s cubic-bezier(.16,1,.3,1), opacity .25s, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s;
}
/* шире телефона — та же ширина, прижато к правому краю с зазором */
@media (min-width: 480px) {
  .mobile-nav {
    left: auto; right: max(12px, env(safe-area-inset-right)); top: calc(100% + 8px);
    width: min(360px, calc(100vw - 24px)); border-radius: var(--r-menu);
  }
}
@media (min-width: 860px) { .mobile-nav, .mobile-nav.is-open { display: none; } }
.header.is-wide .mobile-nav { display: none; }
.header.is-compact .mobile-nav { display: block; }

/* ---------- Боковая оранжевая вкладка + выдвижная панель ---------- */
.side-tab {
  /* всегда посередине видимой высоты экрана */
  position: fixed; left: 0; top: 50%; top: 50dvh; z-index: 60;
  width: 30px; height: 108px; border-radius: 0 6px 6px 0;
  background: var(--orange); box-shadow: 2px 2px 8px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transform: translate(0, -50%);
  transition: transform .22s cubic-bezier(.16,1,.3,1), background .22s;
}
.side-tab:hover { background: #FF8A50; transform: translate(2px, -50%); }
.side-tab.is-hidden { transform: translate(-110%, -50%); pointer-events: none; }
.side-tab span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #fff; white-space: nowrap; }
.drawer {
  position: fixed; left: max(8px, env(safe-area-inset-left)); top: 18%; z-index: 160;
  width: min(300px, 86vw); max-height: 70vh; display: flex; flex-direction: column;
  border-radius: var(--r-menu); overflow: visible;
  background: #FFFEF8; box-shadow: 4px 8px 32px rgba(0,0,0,.4);
  transform: translateX(-105%); transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { position: relative; height: 40px; display: flex; align-items: center; padding: 0 14px; background: var(--orange); border-radius: var(--r-menu) var(--r-menu) 0 0; }
.drawer__head b { font-size: 13px; color: #fff; letter-spacing: .04em; }
.drawer__close { position: absolute; right: -16px; top: -16px; }
.drawer__body { overflow-y: auto; padding: 14px; border-radius: 0 0 var(--r-menu) var(--r-menu); }
.drawer__group + .drawer__group { margin-top: 16px; }
.drawer__title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3d3d3d; margin: 0 0 8px; }
.drawer__body a { display: block; padding: 7px 0 7px 12px; font-size: 14px; color: #3f3a33; }
.drawer__body a:hover { color: var(--orange); }
.overlay { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.35); backdrop-filter: blur(1px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.overlay.is-open { opacity: 1; visibility: visible; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg picture { display: contents; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 32%; filter: saturate(.85) brightness(.55); transform: scale(1.04); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 60% 55% at center, rgba(0,0,0,.55), rgba(0,0,0,.15) 70%),
    radial-gradient(ellipse at center, rgba(255,193,7,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.6) 75%, #000 100%); }
@media (max-width: 640px) { .hero__bg img { object-position: 62% 30%; } }
@media (min-width: 900px) {
  .hero__bg { left: auto; width: min(54%, 820px); -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%); mask-image: linear-gradient(to left, #000 45%, transparent 100%); }
  .hero__bg img { object-position: 58% 22%; filter: saturate(.9) brightness(.62); transform: none; }
  .hero::before { background:
    radial-gradient(ellipse 45% 50% at 50% 45%, rgba(0,0,0,.6), transparent 75%),
    radial-gradient(ellipse at center, rgba(255,193,7,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 30%, rgba(0,0,0,.5) 78%, #000 100%); }
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__inner { position: relative; z-index: 2; padding: 80px 24px 120px; display: flex; flex-direction: column; align-items: center; }
.hero__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(56px, 11vw, 140px); line-height: .9; letter-spacing: -.01em; margin: 18px 0 0; }
.hero__sub { font-family: var(--font-head); font-style: italic; font-weight: 300; font-size: clamp(20px, 3vw, 30px); letter-spacing: .18em; color: var(--gold-dim); margin: 6px 0 0; }
.hero__text { max-width: 620px; margin: 32px auto 0; font-size: clamp(15.5px, .92rem + .3vw, 18.5px); line-height: 1.75; color: var(--gold-text); text-shadow: 0 1px 12px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); }
.hero__text span { color: var(--gold-muted); }
.hero__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero__down { position: absolute; bottom: 36px; left: 50%; margin-left: calc(var(--rb-size, 52px) / -2); z-index: 3; transition: background .25s, box-shadow .25s, color .2s, transform .15s ease; -webkit-tap-highlight-color: transparent; }
.hero__down-ico { animation: bob 2.4s ease-in-out infinite; will-change: transform; }
@keyframes bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.hero__down:hover .hero__down-ico, .hero__down:focus-visible .hero__down-ico { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero__down-ico { animation: none; } }

/* ---------- Слот под иллюстрацию (картинка или заглушка) ---------- */
.ph { position: relative; overflow: hidden; background: var(--bg-ph); }
.ph picture { display: contents; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ph.is-empty { background: radial-gradient(ellipse at center, rgba(255,122,24,.16), transparent 62%), var(--bg-ph); }
.ph.is-empty::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -60%);
  background: url("../img/logo-96.png") center/contain no-repeat;
  background-image: image-set(url("../img/logo-96.webp") type("image/webp"), url("../img/logo-96.png") type("image/png")); opacity: .28; filter: grayscale(.2);
}
.ph.is-empty::after {
  content: attr(data-label); position: absolute; left: 0; right: 0; top: calc(50% + 22px);
  text-align: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(214,189,144,.6);
}
/* Режим наполнения: ?dev в адресе — показывает имена файлов в пустых слотах */
.show-files .ph.is-empty::after { content: attr(data-file); letter-spacing: .02em; text-transform: none; font-family: ui-monospace, Menlo, monospace; color: var(--gold); padding: 0 8px; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-1x1 { aspect-ratio: 1 / 1; }

/* ---------- Об авторе ---------- */
.about { display: grid; gap: 48px; align-items: start; }
@media (min-width: 768px) { .about { grid-template-columns: 340px 1fr; } }
.about__photo { width: 100%; max-width: 340px; margin: 0 auto; border-radius: 12px; border: 1px solid rgba(255,193,7,.15); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.about__photo--cutout .ph {
  background:
    radial-gradient(ellipse 70% 55% at 50% 58%, rgba(255,193,7,.26), rgba(255,122,24,.08) 55%, transparent 75%),
    linear-gradient(180deg, #14100a, #0b0906);
}
.about__photo--cutout .ph img {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: auto; height: 88%; max-width: 92%; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 0 18px rgba(255,193,7,.18));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 26%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 26%);
  mask-composite: intersect;
}
.about__photo--cutout .ph::after { content: none; }
.about h2 { font-family: var(--font-head); font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1.05; margin: 0; }
.about__role { margin: 12px 0 0; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-muted); }
.about__text { margin-top: 28px; font-size: clamp(15.5px, .95rem + .2vw, 17.5px); line-height: 1.8; max-width: 68ch; }
.about__text p { margin: 0 0 16px; }
.about__text p + p { color: var(--gold-muted); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 32px; max-width: 520px; }
.fact { border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px; text-align: center; }
.fact b { display: block; font-family: var(--font-head); font-size: 22px; color: var(--gold-bright); }
@media (max-width: 480px) { .fact b { font-size: 17px; } .fact { padding: 12px 6px; } }
.fact span { font-size: 12.5px; letter-spacing: .03em; line-height: 1.35; display: block; margin-top: 4px; color: var(--gold-muted); }

/* ---------- Карточки техник ---------- */
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.cards > .card { flex: 1 1 100%; }
@media (min-width: 640px) { .cards > .card { flex: 0 1 calc((100% - 24px) / 2); } }
@media (min-width: 1100px) { .cards > .card { flex: 0 1 calc((100% - 48px) / 3); } }
.card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); border: 1px solid rgba(255,193,7,.15); background: var(--bg-card);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.card:hover { border-color: rgba(255,193,7,.35); box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,193,7,.12); transform: translateY(-2px); }
.card:hover .ph img { transform: scale(1.04); }
.card__body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.card__title { font-family: var(--font-head); font-size: clamp(18px, 1rem + .35vw, 21px); font-weight: 700; line-height: 1.25; color: var(--gold-bright); margin: 0; }
.card__desc { margin: 10px 0 0; font-size: clamp(14.5px, .88rem + .15vw, 16px); line-height: 1.65; color: var(--gold-muted); }
.card__links { margin-top: auto; padding-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Ссылки на Википедию в названиях техник */
.wiki-link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(255,193,7,.55); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color .2s, border-color .2s, text-shadow .2s; }
/* стрелка — обычный инлайн без пробела: не отрывается от последнего слова при переносе */
.wiki-link::after { content: "\2060↗"; display: inline; position: relative; top: 0; margin-left: .12em; font-size: .55em; vertical-align: super; opacity: .55; transition: opacity .2s, top .2s; }
.wiki-link:hover { color: #fff3c2; border-bottom-style: solid; border-color: var(--gold-bright); text-shadow: 0 0 10px rgba(255,215,0,.8); }
.wiki-link:hover::after { opacity: 1; top: -1px; }

/* ---------- Как заказать ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 28px 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,215,0,.02); counter-increment: step; }
.step::before { content: "0" counter(step); display: block; font-family: var(--font-head); font-size: 34px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gold); margin-bottom: 14px; }
.step h3 { margin: 0; font-size: clamp(16.5px, .95rem + .3vw, 19px); color: var(--gold-bright); }
.step p { margin: 8px 0 0; font-size: clamp(14.5px, .88rem + .15vw, 16px); line-height: 1.65; color: var(--gold-muted); }

/* ---------- Контакты ---------- */
.contacts { display: grid; gap: 48px; }
@media (min-width: 768px) { .contacts { grid-template-columns: 1fr 1fr; } }
.contacts h2 { font-family: var(--font-head); font-size: clamp(30px, 4vw, 42px); margin: 0; }
.contact-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.contact-list a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: clamp(15.5px, .95rem + .2vw, 17.5px); }
.contact-list a:hover { color: var(--gold-bright); }
.contact-list .ico { flex: none; font-size: 11.5px; font-weight: 700; }
.form { display: grid; gap: 14px; }
.field { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid rgba(214,189,144,.5); background: transparent; color: var(--gold-text); font: inherit; font-size: max(16px, 1rem); outline: none; transition: border-color .2s; }
.field::placeholder { color: rgba(214,189,144,.75); }
.field:focus { border-color: var(--gold); }
textarea.field { min-height: 96px; resize: vertical; }
.form__note { font-size: 13.5px; line-height: 1.55; color: var(--gold-dark); margin: 0; }
.form { align-content: start; }
.form .btn { justify-self: start; align-self: start; margin-top: 6px; }

/* ---------- Портфолио ---------- */
.page-head { position: relative; text-align: center; padding: calc(var(--header-h) + 1px + 72px) 0 56px; border-bottom: 1px solid rgba(255,193,7,.1); }
.page-head::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(255,215,0,.1), transparent 60%); pointer-events: none; }
.page-head h1 { position: relative; font-family: var(--font-head); font-size: clamp(42px, 7vw, 76px); font-weight: 700; line-height: .95; margin: 0; }
.page-head p { position: relative; }
.subnav { position: sticky; top: var(--header-h); z-index: 30; background: rgba(10,10,10,.96); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,215,0,.15); }
.subnav .container { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px; overflow-x: auto; scrollbar-width: none; padding-top: 14px; padding-bottom: 14px; }
.subnav .container::-webkit-scrollbar { display: none; }
.subnav a { position: relative; flex: none; padding: 6px 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); transition: color .2s; }
.subnav a:hover, .subnav a.is-active { color: var(--gold-bright); }
.subnav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold-bright); }
.gallery-section { padding: 80px 0; scroll-margin-top: calc(var(--header-h) + 56px); }
.gallery-section + .gallery-section { border-top: 1px solid rgba(255,255,255,.04); }
.gallery-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.gallery-head h2 { font-family: var(--font-head); font-size: clamp(26px, 3.4vw, 38px); margin: 6px 0 0; line-height: 1.15; }
.gallery-head p { margin: 10px 0 0; max-width: 600px; font-size: clamp(15px, .9rem + .2vw, 17px); color: var(--gold-muted); }
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.work { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,193,7,.12); background: var(--bg-card); cursor: zoom-in; }
.work.is-empty-work { cursor: default; }
.work:hover .ph img { transform: scale(1.04); }
.work figcaption { padding: 11px 14px 13px; font-size: 13.5px; line-height: 1.4; color: var(--gold-muted); }
.work figcaption b { display: block; font-weight: 700; font-size: 14.5px; color: var(--gold-text); }

/* ---------- Лайтбокс: просмотр работы целиком ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 84px 92px 72px; background: rgba(0,0,0,.95);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
  touch-action: pan-y;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__pic { display: contents; }
.lightbox__pic img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-menu); box-shadow: 0 0 60px rgba(255,193,7,.14);
  opacity: 0; transform: scale(.985); transition: opacity .3s ease, transform .3s ease;
}
.lightbox__pic img.is-loaded { opacity: 1; transform: none; }
.lightbox.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 2.6px solid rgba(255,193,7,.25); border-top-color: var(--gold-bright);
  animation: lb-spin .8s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lightbox__cap { position: absolute; bottom: 22px; left: 90px; right: 90px; margin: 0; text-align: center; font-size: 15px; color: var(--gold-text); }
.lightbox__count { position: fixed; top: max(28px, calc(env(safe-area-inset-top) + 14px)); left: max(22px, env(safe-area-inset-left)); font-size: 13px; letter-spacing: .12em; color: var(--gold-dark); }

/* Кнопки лайтбокса — общий круглый стиль ниже */
.lightbox__btn { position: fixed; z-index: 2; }
.lightbox__close { top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
/* JS ставит крестик на правый верхний угол картинки (left/top), right/bottom снимаются */
.lightbox__close.is-pinned { right: auto; transition: background .25s, box-shadow .25s, transform .2s, left .25s ease, top .25s ease; }
.lightbox:not(.is-open) .lightbox__close { transition: none; }
.lightbox__prev { left: max(18px, env(safe-area-inset-left)); top: 50%; margin-top: -26px; }
.lightbox__next { right: max(18px, env(safe-area-inset-right)); top: 50%; margin-top: -26px; }
/* крестик */
.x-icon { position: relative; width: 18px; height: 18px; filter: drop-shadow(0 0 5px rgba(255,215,0,.9)); }
.x-icon::before, .x-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2.6px; margin: -1.3px 0 0 -10px; border-radius: 2px; background: var(--gold-bright); transition: background .2s; }
.x-icon::before { transform: rotate(45deg); }
.x-icon::after { transform: rotate(-45deg); }
.lightbox__btn:hover .x-icon::before, .lightbox__btn:hover .x-icon::after { background: #fff8d6; }
.lightbox__close:hover .x-icon { transform: rotate(90deg); transition: transform .25s; }
/* стрелки */
.lightbox__chev { width: 12px; height: 12px; border-top: 2.6px solid var(--gold-bright); border-right: 2.6px solid var(--gold-bright); filter: drop-shadow(0 0 5px rgba(255,215,0,.9)); transition: border-color .2s; }
.lightbox__next .lightbox__chev { transform: translateX(-2px) rotate(45deg); }
.lightbox__prev .lightbox__chev { transform: translateX(2px) rotate(-135deg); }

.lightbox.is-single .lightbox__prev, .lightbox.is-single .lightbox__next, .lightbox.is-single .lightbox__count { display: none; }
.work:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Подвал ---------- */

/* ---------- Кнопка «наверх» с прогрессом просмотра ---------- */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); box-shadow: 0 0 16px rgba(255,193,7,.28), 0 4px 14px rgba(0,0,0,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .25s;
}
.to-top.is-visible { opacity: .9; visibility: visible; transform: none; }
.to-top.is-visible:hover, .to-top.is-visible:focus-visible { opacity: 1; background: radial-gradient(circle, rgba(255,215,0,.55) 0%, rgba(255,193,7,.32) 55%, rgba(255,160,0,.18) 100%); box-shadow: 0 0 26px rgba(255,193,7,.65), 0 4px 14px rgba(0,0,0,.5); }
.to-top:hover .to-top__arrow { border-bottom-color: #fff8d6; }
.to-top.is-idle:not(:hover) { opacity: .72; }
.to-top.is-done { opacity: 1; }
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top__ring circle { fill: none; stroke-width: 2.6; }
.to-top__track { stroke: rgba(255,193,7,.32); }
.to-top__bar { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; stroke: var(--gold-bright); filter: drop-shadow(0 0 4px rgba(255,215,0,.9)); transition: stroke-dashoffset .15s linear; }
.to-top__arrow { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid var(--gold-bright); filter: drop-shadow(0 0 6px rgba(255,215,0,.9)); transition: transform .25s, opacity .2s; }
.to-top__pct { position: absolute; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--gold-bright); opacity: 0; transition: opacity .2s; }
@media (hover: hover) {
  .to-top:hover .to-top__arrow { transform: translateY(-2px); }
}
body.lightbox-open .to-top { opacity: 0 !important; visibility: hidden; }
@media (max-width: 640px) { .to-top { right: 14px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top__bar { transition: none; } }

/* ---------- 404 ---------- */
/* 404 — в стиле первого экрана главной */
.hero--404 { min-height: 100vh; min-height: 100svh; }
.hero--404 .hero__inner { padding-top: 36px; padding-bottom: 56px; }
.hero--404 .hero__title { font-size: clamp(96px, 18vw, 200px); }
.hero--404 .hero__text span { display: inline-block; margin-top: 2px; }
.hero__cta--lang { margin-top: 14px; }
.hero__cta--lang .btn { font-size: 12px; }
.notfound__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }

/* =========================================================
   АДАПТИВНОСТЬ
   ≤360 маленькие телефоны · ≤480 телефоны · ≤768 большие телефоны и планшеты
   ≤1024 планшеты · ≥1440 большие мониторы · альбомная ориентация телефонов
   ========================================================= */

/* Большие мониторы — чуть крупнее шрифт и шире контейнер */
@media (min-width: 1440px) {
  :root { --max-w: 1360px; }
}
@media (min-width: 1920px) {
  :root { --max-w: 1480px; }
  html { font-size: 106.25%; }
}

/* Планшеты */
@media (max-width: 1024px) {
  .section { padding: 72px 0; }
  .about { gap: 36px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .about { grid-template-columns: 280px 1fr; }
}

/* Большие телефоны и узкие планшеты */
@media (max-width: 767px) {
  :root { --header-h: 64px; }
  .container { padding: 0 20px; }
  .section { padding: 60px 0; }
  .section__head { margin-bottom: 32px; }
  .brand img { height: 38px; width: 38px; }
  .brand span { font-size: 18px; }
  .about { text-align: left; }
  .about__photo { max-width: 300px; }
  .page-head { padding: calc(var(--header-h) + 1px + 44px) 0 40px; }
  .gallery-section { padding: 56px 0; }
  .gallery-head { margin-bottom: 22px; }
  .contacts { gap: 36px; }
  /* Подменю портфолио: подсказка, что его можно листать вбок */
  /* на узких экранах подменю разделов скрыто — разделы есть в меню бургера и в боковом меню */
  .subnav { display: none; }
  .gallery-section { scroll-margin-top: calc(var(--header-h) + 16px); }
  /* Боковая вкладка — компактнее, чтобы не перекрывать текст */
  .side-tab { width: 24px; height: 88px; opacity: .92; }
  .side-tab span { font-size: 11px; }
  .drawer { top: auto; bottom: 88px; max-height: 72vh; }
  .lightbox__btn { --rb-size: 48px; }
}

/* Телефоны */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero__inner { padding: 48px 16px 104px; }
  .hero__title { font-size: clamp(52px, 17vw, 76px); }
  .hero__sub { font-size: 20px; letter-spacing: .14em; }
  .eyebrow { letter-spacing: .18em; }
  .hero__cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .hero__cta .btn { width: 100%; }
  .about__text { margin-top: 22px; }
  .facts { gap: 8px; margin: 22px 0 26px; }
  .about .btn--solid, .form .btn { width: 100%; justify-self: stretch; }
  .card__body { padding: 18px 16px; }
  .step { padding: 22px 18px 20px; }
  .step::before { font-size: 30px; margin-bottom: 10px; }
  .gallery { gap: 12px; }
  .work figcaption { padding: 9px 10px 11px; font-size: 12.5px; }
  .work figcaption b { font-size: 13.5px; }
  .gallery-head .chip { width: 100%; justify-content: center; }
  .dropdown { display: none; }
}

/* Маленькие телефоны (iPhone SE, старые Android) */
@media (max-width: 360px) {
  .brand span { font-size: 16px; }
  .hero__title { font-size: 48px; }
  .facts { grid-template-columns: 1fr; max-width: 260px; }
  .fact { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-align: left; padding: 10px 14px; }
  .fact span { margin-top: 0; }
  .gallery { grid-template-columns: 1fr; }
  .contact-list a { font-size: 15px; word-break: break-word; }
}

/* Телефон в альбомной ориентации — hero не растягивается на весь экран */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero__inner { padding: 40px 24px 88px; }
  .hero__title { font-size: clamp(44px, 9vw, 72px); }
  .hero__cta { flex-direction: row; max-width: none; }
  .hero__down { bottom: 18px; }
  .drawer { top: 8px; bottom: auto; max-height: calc(100vh - 16px); }
}

/* Сенсорные экраны: без «залипающих» эффектов наведения */
@media (hover: none) {
  .card:hover { transform: none; }
  .card:hover .ph img, .work:hover .ph img { transform: none; }
}

/* Вырез экрана (iPhone) */
@supports (padding: max(0px)) {
  .to-top { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* =========================================================
   ЕДИНЫЙ СТИЛЬ КРУГЛЫХ КНОПОК — как у кнопки «Наверх»
   ========================================================= */
:root { --rb-size: 52px; }
@media (max-width: 640px) { :root { --rb-size: 46px; } }

.hero__down, .lightbox__btn, .drawer__close, .to-top {
  width: var(--rb-size); height: var(--rb-size); border-radius: 50%;
}
.hero__down, .lightbox__btn, .drawer__close {
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6);
  border: 2.6px solid rgba(255,215,0,.85);
  box-shadow: 0 0 16px rgba(255,193,7,.28), 0 4px 14px rgba(0,0,0,.5), inset 0 0 6px rgba(255,215,0,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--gold-bright);
  transition: background .25s, box-shadow .25s, color .2s, border-color .25s;
}
.hero__down:hover, .hero__down:focus-visible,
.lightbox__btn:hover, .lightbox__btn:focus-visible,
.drawer__close:hover, .drawer__close:focus-visible {
  background: radial-gradient(circle, rgba(255,215,0,.55) 0%, rgba(255,193,7,.32) 55%, rgba(255,160,0,.18) 100%);
  box-shadow: 0 0 26px rgba(255,193,7,.65), 0 4px 14px rgba(0,0,0,.5);
  border-color: var(--gold-bright);
  color: #fff8d6;
}
.lightbox__prev, .lightbox__next { border-color: rgba(255,215,0,.85); margin-top: calc(var(--rb-size) / -2); }

/* Стрелка вниз в hero */
.hero__down svg { width: 20px; height: 20px; stroke-width: 2.2; filter: drop-shadow(0 0 5px rgba(255,215,0,.9)); }

/* Соцсети в подвале */


/* Крестик боковой панели (общий значок .x-icon) */
.drawer__close { position: absolute; right: calc(var(--rb-size) / -2.6); top: calc(var(--rb-size) / -2.6); }
.drawer { transform: translateX(calc(-100% - var(--rb-size) - 24px)); visibility: hidden; transition: transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s; }
.drawer.is-open { transform: translateX(0); visibility: visible; transition: transform .3s cubic-bezier(.16,1,.3,1), visibility 0s; }

.drawer .drawer__close { opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s, background .25s, box-shadow .25s; }
.drawer.is-open .drawer__close { opacity: 1; transform: none; transition-delay: .15s, .15s, 0s, 0s; }
.drawer__close:hover .x-icon::before, .drawer__close:hover .x-icon::after { background: #fff8d6; }
.drawer__close:hover .x-icon { transform: rotate(90deg); transition: transform .25s; }
.x-icon { transition: transform .25s; }

/* Значки в контактах — тот же вид, что у кнопок соцсетей и языка */
.contact-list .ico {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,215,0,.15); background: #000;
  font-size: 10px; font-weight: 700; color: rgba(255,215,0,.65); text-shadow: none; box-shadow: none;
  transition: background .2s, border-color .2s, color .2s;
}
.contact-list a { gap: 14px; }
.hero__down:active, .lightbox__btn:active, .drawer__close:active { transform: scale(.94); }
.hero__down:active { transform: scale(.94); }


/* =========================================================
   ПОДВАЛ — классическая сетка; шрифты = 75 % (коэффициент --fs-footer)
   ≥1024: 4 колонки · 640–1023: бренд строкой + 3 колонки
   <640: бренд, навигация | контакты, портфолио
   ========================================================= */
.footer {
  --fs-footer: .75;
  border-top: 1px solid rgba(255,215,0,.1); background: #0a0a0a;
  padding: 32px 0 max(14px, env(safe-area-inset-bottom));
  font-size: calc(16px * var(--fs-footer)); line-height: 1.5;
}
.footer p { margin: 0; }
.footer__grid { display: grid; gap: 20px 32px; grid-template-columns: 1.5fr 1fr 1.25fr 1.1fr; align-items: start; }
.footer .brand span { font-size: calc(20px * var(--fs-footer)); }
.footer .brand img { width: 36px; height: 36px; }
.footer__about { margin-top: 8px !important; max-width: 340px; font-size: calc(15px * var(--fs-footer)); line-height: 1.55; color: var(--gold-muted); }
.footer__title { font-size: calc(12px * var(--fs-footer)); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); padding-bottom: 6px; border-bottom: 1px solid rgba(255,215,0,.12); }
.footer ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; font-size: calc(14.5px * var(--fs-footer)); color: var(--gold-muted); }
.footer ul a { display: inline-block; padding: 2px 0; transition: color .2s; }
.footer ul a:hover, .footer ul a:focus-visible { color: var(--gold-bright); }
.footer__col--contacts ul a { word-break: break-word; }
.socials { display: flex; gap: 10px; margin-top: 12px; }
/* соцсети — исходный вид: маленькие круги на чёрном, приглушённое золото */
.socials a {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,215,0,.15); background: #000;
  font-size: 10px; font-weight: 700; color: rgba(255,215,0,.65);
  transition: background .2s, border-color .2s, color .2s;
}

.footer__bottom {
  margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  /* справа — место под кнопку «Наверх» */
  padding-right: calc(var(--rb-size, 52px) + 16px); min-height: calc(var(--rb-size, 52px) - 8px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 24px;
  font-size: calc(12px * var(--fs-footer)); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-faint);
}

/* планшет: бренд строкой, под ним 3 колонки */
@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__col--brand {
    grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 24px;
    padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .footer__about { margin-top: 0 !important; max-width: 460px; }
  .socials { margin-top: 0; }
}
/* телефон: бренд, затем навигация | контакты, затем портфолио */
@media (max-width: 639px) {
  .footer { padding-top: 26px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
  .footer__col--brand { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; padding-bottom: 16px; }
  .footer__about { max-width: 340px; }
  .socials { justify-content: center; }
  .footer__col--nav { grid-column: 1; grid-row: 2; }
  .footer__col--contacts { grid-column: 2; grid-row: 2; }
  .footer__col--works { grid-column: 1 / -1; grid-row: 3; }
  /* узкие экраны: всё содержимое подвала по центру */
  .footer__col--nav, .footer__col--contacts, .footer__col--works { text-align: center; }
  .footer__col ul { justify-items: center; }
  .footer__bottom {
    flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-top: 18px;
    /* поля одинаковые с обеих сторон — строка точно по центру, кнопка «Наверх» её не перекрывает */
    padding-left: calc(var(--rb-size, 46px) + 12px); padding-right: calc(var(--rb-size, 46px) + 12px);
  }
}
@media (max-width: 360px) {
  .footer__grid { grid-template-columns: 1fr; gap: 14px; }
  .footer__col--nav, .footer__col--contacts, .footer__col--works { grid-column: 1; grid-row: auto; }
}

/* =========================================================
   ВЫБОР ЯЗЫКА — круглые кнопки справа от бургера (стиль «Наверх»)
   ========================================================= */
.header .nav { margin-left: auto; }
.header__tools { display: flex; align-items: center; gap: 10px; margin-left: 24px; flex: none; }
.lang { display: flex; align-items: center; gap: 8px; }
/* тот же вид, что у кнопок соцсетей в подвале */
.lang__btn {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,215,0,.15); background: #000;
  font-size: 10px; font-weight: 700; color: rgba(255,215,0,.65);
  transition: background .2s, border-color .2s, color .2s;
}
/* текущий язык — яркая рамка и буквы */
/* текущий язык — выпуклый значок с флагом, без надписи (надпись остаётся для экранных дикторов) */
.lang__btn.is-current {
  --flag: none;
  cursor: default; color: transparent; text-shadow: none; overflow: hidden;
  border-color: rgba(255,215,0,.6);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.75) 0, rgba(255,255,255,.25) 22%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.42) 100%),
    var(--flag) center / auto 100% no-repeat, #fff;
  box-shadow: inset 0 -3px 5px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.45), 0 2px 6px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.4);
}
.lang__btn.is-current[hreflang="ru"] { --flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='2' fill='%23fff'/%3E%3Crect y='2' width='9' height='2' fill='%230039A6'/%3E%3Crect y='4' width='9' height='2' fill='%23D52B1E'/%3E%3C/svg%3E"); }
.lang__btn.is-current[hreflang="en"] { --flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.lang__btn.is-current[hreflang="zh-CN"] { --flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23EE1C25'/%3E%3Cg fill='%23FFFF00'%3E%3Cpolygon points='5.00,2.00 5.67,4.07 7.85,4.07 6.09,5.35 6.76,7.43 5.00,6.15 3.24,7.43 3.91,5.35 2.15,4.07 4.33,4.07'/%3E%3Cpolygon points='9.14,2.51 9.62,1.97 9.25,1.34 9.91,1.63 10.39,1.08 10.33,1.80 11.00,2.09 10.29,2.25 10.22,2.97 9.85,2.35'/%3E%3Cpolygon points='11.01,4.14 11.66,3.82 11.56,3.10 12.07,3.62 12.72,3.30 12.38,3.95 12.88,4.47 12.17,4.34 11.83,4.99 11.73,4.27'/%3E%3Cpolygon points='11.04,6.73 11.76,6.70 11.96,6.00 12.21,6.68 12.94,6.66 12.37,7.10 12.62,7.79 12.01,7.38 11.44,7.83 11.64,7.13'/%3E%3Cpolygon points='9.22,8.38 9.90,8.63 10.35,8.06 10.32,8.79 11.00,9.05 10.30,9.24 10.26,9.96 9.87,9.36 9.16,9.55 9.62,8.98'/%3E%3C/g%3E%3C/svg%3E"); }
/* у флага КНР звёзды слева — сдвигаем флаг, чтобы они попали в круг */
.lang__btn.is-current[hreflang="zh-CN"] { background-position: center, center, 18% 50%, center; }
/* «中文» — два знака: чуть мельче, чтобы поместиться в круглую кнопку */
.lang__btn--zh { font-size: 10.5px; letter-spacing: -.02em; font-weight: 600; }
@media (max-width: 639px) { .header__tools { gap: 10px; margin-left: 12px; } .lang { gap: 6px; } }
/* очень узкие экраны — у логотипа остаётся только значок */
@media (max-width: 339px) { .header .brand span { display: none; } }

/* =========================================================
   КРУЖКИ В СТИЛЕ СОЦСЕТЕЙ (соцсети, язык, значки контактов):
   при наведении — инверсия: золотой фон, чёрная надпись
   ========================================================= */
@media (hover: hover) {
  .socials a:hover, .lang__btn:not(.is-current):hover, .contact-list a:hover .ico {
    background: var(--gold-bright); border-color: var(--gold-bright); color: #000;
  }
}
.socials a:focus-visible, .lang__btn:not(.is-current):focus-visible, .contact-list a:focus-visible .ico,
.socials a:active, .lang__btn:not(.is-current):active, .contact-list a:active .ico {
  background: var(--gold-bright); border-color: var(--gold-bright); color: #000;
}

/* служебный якорь «начало страницы» (ссылки логотипа и «Главная») */
.page-top { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* =========================================================
   МЕНЮ БУРГЕРА — в стиле выпадающего меню «Портфолио»
   (положение, ширина и логика видимости заданы выше и не меняются)
   ========================================================= */
.mobile-nav { background: #0b0a08; box-shadow: 0 0 0 1px rgba(255,215,0,.14), 0 18px 40px rgba(0,0,0,.6); }
.mobile-nav ul { list-style: none; margin: 0; max-width: none; padding: 8px; }
.mobile-nav li.sep { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,215,0,.14); }
.mobile-nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-bright);
  transition: background .2s, color .2s;
}
.mobile-nav .sub a { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gold-muted); }
.mobile-nav .sub a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(255,193,7,.7); flex: none; }
.mobile-nav a:hover, .mobile-nav a:focus-visible { background: rgba(255,193,7,.1); color: var(--gold-bright); }

/* =========================================================
   ПОПАП ПРОСМОТРА — работа во всю ширину или высоту экрана
   с небольшими безопасными полями; кнопки и подписи поверх
   ========================================================= */
.lightbox {
  --lb-gap: clamp(8px, 1.6vmin, 20px);
  padding: max(var(--lb-gap), env(safe-area-inset-top)) max(var(--lb-gap), env(safe-area-inset-right))
           max(var(--lb-gap), env(safe-area-inset-bottom)) max(var(--lb-gap), env(safe-area-inset-left));
}
.lightbox__pic img { max-width: 100%; max-height: 100%; }   /* точный размер задаёт скрипт */
.lightbox__prev, .lightbox__next { top: 50%; bottom: auto; margin-top: calc(var(--rb-size) / -2); }
.lightbox__prev { left: max(calc(var(--lb-gap) + 8px), env(safe-area-inset-left)); }
.lightbox__next { right: max(calc(var(--lb-gap) + 8px), env(safe-area-inset-right)); }
.lightbox__cap {
  left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100% - 2 * var(--lb-gap) - 24px);
  bottom: max(calc(var(--lb-gap) + 10px), env(safe-area-inset-bottom));
  padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.lightbox__count {
  top: max(calc(var(--lb-gap) + 10px), env(safe-area-inset-top)); left: max(calc(var(--lb-gap) + 10px), env(safe-area-inset-left));
  padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.62); color: var(--gold-text); z-index: 2;
}
.lightbox__cap:empty { display: none; }

/* форма: подсветка поля, когда кнопка «Заказать…» подставила текст заявки */
@keyframes order-flash { 0% { box-shadow: 0 0 0 0 rgba(255,193,7,0); } 25% { box-shadow: 0 0 0 1px rgba(255,193,7,.55), 0 0 26px rgba(255,193,7,.28); } 100% { box-shadow: 0 0 0 0 rgba(255,193,7,0); } }
.form.is-prefilled textarea.field { animation: order-flash 1.8s ease-out .5s 1; border-radius: 6px; }
.form textarea.field { line-height: 1.55; }

/* =========================================================
   HERO: заголовок TATIANA — прозрачные буквы, неоновое свечение по контуру
   ========================================================= */
/* шрифт заголовка TATIANA — Lobster Two, жирный */
.hero__title { font-family: 'Lobster Two', 'Caviar Dreams', cursive; font-weight: 700; line-height: 1.05; padding: 0 .08em; }
@supports (-webkit-text-stroke: 1px #000) {
  .hero__title.glow {
    color: transparent;
    font-family: 'Lobster Two', 'Caviar Dreams', cursive; font-weight: 700; letter-spacing: .01em;
    /* тонкий контур */
    -webkit-text-stroke: 1px var(--gold-bright);
    text-shadow: none;
    /* наружное свечение — не дальше 3 мм от линии */
    --neon-a: .95; --neon-b: .7;
    filter:
      drop-shadow(0 0 .6px rgba(255,236,150,1))
      drop-shadow(0 0 1.5mm rgba(255,215,0,var(--neon-a)))
      drop-shadow(0 0 3mm rgba(255,184,0,var(--neon-b)));
    animation: neon-breathe 5s ease-in-out infinite;
  }
  /* «дыхание» меняет только яркость, радиус остаётся 3 мм */
  @keyframes neon-breathe {
    0%, 100% { filter: drop-shadow(0 0 .6px rgba(255,236,150,1)) drop-shadow(0 0 1.5mm rgba(255,215,0,.8)) drop-shadow(0 0 3mm rgba(255,184,0,.55)); }
    50%      { filter: drop-shadow(0 0 .6px rgba(255,236,150,1)) drop-shadow(0 0 1.5mm rgba(255,215,0,1))  drop-shadow(0 0 3mm rgba(255,184,0,.85)); }
  }
  @media (prefers-reduced-motion: reduce) { .hero__title.glow { animation: none; } }
}

/* =========================================================
   УХОД ЗА РАБОТОЙ — советы, страницы памятки, скачивание PDF
   ========================================================= */
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.tip { position: relative; padding: 20px 18px 18px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,215,0,.02); }
.tip::before { content: ""; position: absolute; left: 18px; top: 0; width: 28px; height: 2px; background: var(--gold); box-shadow: 0 0 8px rgba(255,193,7,.7); border-radius: 2px; }
.tip h3 { margin: 6px 0 0; font-size: clamp(15.5px, .9rem + .25vw, 17.5px); color: var(--gold-bright); line-height: 1.3; }
.tip p { margin: 8px 0 0; font-size: clamp(14px, .86rem + .12vw, 15.5px); line-height: 1.6; color: var(--gold-muted); }
.care-guide { margin-top: 44px; display: grid; grid-template-columns: minmax(260px, .9fr) 1.6fr; gap: 32px 40px; align-items: center;
  padding: 28px; border: 1px solid rgba(255,193,7,.18); border-radius: var(--radius); background: rgba(0,0,0,.35); }
.care-guide__text h3 { margin: 0; font-family: var(--font-head); font-size: clamp(22px, 1.2rem + .8vw, 30px); color: var(--gold-bright); }
.care-guide__text p { margin: 12px 0 22px; color: var(--gold-muted); line-height: 1.7; }
.care-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.care-page figcaption { text-align: center; }
.ratio-a4 { aspect-ratio: 1282 / 1819; }
.care-page .ph img { object-fit: cover; object-position: top center; }
@media (max-width: 1100px) { .tips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .care-guide { grid-template-columns: minmax(0, 1fr); padding: 22px; } .care-guide__text { text-align: center; } }
@media (max-width: 560px) {
  .tips { grid-template-columns: 1fr; gap: 12px; }
  .care-pages { gap: 10px; }
  .care-page figcaption { padding: 8px 6px 10px; font-size: 11.5px; }
  .care-page figcaption b { font-size: 12.5px; }
  .care-guide__text .btn { width: 100%; }
}

/* окно просмотра в режиме документа (страницы памятки): по ширине, прокрутка вниз, увеличение пальцами */
.lightbox.is-doc { align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
  padding-top: calc(var(--rb-size, 52px) + 24px); padding-bottom: calc(var(--rb-size, 52px) + 24px); }
.lightbox.is-doc .lightbox__pic img { max-height: none; box-shadow: 0 0 40px rgba(0,0,0,.6); background: #fff; }
.lightbox.is-doc .lightbox__cap { position: fixed; }

/* ===== Контакты: карта-скетч ===== */
.contact-map { grid-column: 1 / -1; display: grid; gap: 28px 48px; align-items: center; margin-top: 8px; }
@media (min-width: 768px) { .contact-map { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.contact-map__pic { max-width: 560px; width: 100%; justify-self: center; }
/* фон под скетчем прозрачный — лист «лежит» прямо на странице */
.work.map-sketch { background: none; border: 0; border-radius: 0; overflow: visible; }
.work.map-sketch .ph { background: none; overflow: visible; }
.work.map-sketch .ph img { object-fit: contain; filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)); transition: transform .5s ease, filter .5s ease; }
.work.map-sketch:hover .ph img { transform: rotate(-1deg) scale(1.02); filter: drop-shadow(0 18px 34px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,193,7,.12)); }
.work.map-sketch:focus-visible { outline-offset: 8px; border-radius: 12px; }
.contact-map__text h3 { margin: 0; font-family: var(--font-head); font-size: clamp(22px, 1.2rem + .8vw, 30px); color: var(--gold-bright); }
.contact-map__addr { margin: 14px 0 6px; font-size: clamp(16px, 1rem + .2vw, 18.5px); color: var(--gold-text); }
.contact-map__geo { margin: 0 0 22px; font-size: 14px; color: var(--gold-muted); letter-spacing: .02em; }
.contact-map__text .form__note { margin-top: 14px; }
@media (max-width: 767px) { .contact-map__text { text-align: center; } }
/* просмотр вырезанного рисунка (прозрачный фон): без рамки-свечения, только тень по контуру */
.lightbox.is-cutout .lightbox__pic img { box-shadow: none; border-radius: 0; background: none; filter: drop-shadow(0 20px 40px rgba(0,0,0,.7)); }
/* длинные надписи на кнопках (EN) переносятся, а не выталкивают страницу вбок */
.btn { max-width: 100%; }
.care-guide__text .btn, .contact-map__text .btn { white-space: normal; text-align: center; line-height: 1.35; }
/* ссылка на доставку СДЭК: карточка факта и ссылка в тексте шага */
a.fact--link { display: block; color: inherit; text-decoration: none; transition: border-color .25s, background .25s, box-shadow .25s; }
a.fact--link:hover, a.fact--link:focus-visible { border-color: var(--gold-bright); background: rgba(255,215,0,.06); box-shadow: 0 0 18px rgba(255,193,7,.15); }
a.fact--link:hover span, a.fact--link:focus-visible span { color: var(--gold-bright); }
a.fact--link span::after, .ext-link::after { content: "\2060\00a0↗"; font-size: .85em; opacity: .75; }
.ext-link { color: var(--gold-bright); text-decoration: underline; text-decoration-color: rgba(255,215,0,.45); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.ext-link:hover, .ext-link:focus-visible { color: #fff3b0; text-decoration-color: currentColor; }