/* GAZDA HOUSE — база теми. Шкала, сітка й рух — MAKHNO (makhno-teardown/02 §2.2–2.3, 03);
   шрифти Forum (дисплей) + Raleway (текст); кольори лише з tokens.css. 1rem = 10px, як у MAKHNO. */

html { font-size: 10px; -webkit-text-size-adjust: 100%; }
@media (min-width: 1920px) { html { font-size: .5208333vw; } }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--gz-font-text);
  font-size: 1.4rem;               /* Body 1.4rem / 160 % (02 §2.2) */
  line-height: 1.6;
  letter-spacing: -.05rem;
  -webkit-font-smoothing: antialiased;
  color: var(--gz-body);
  background-color: var(--gz-canvas);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--gz-font-display); font-weight: 400; text-wrap: balance; }
::selection { background: var(--gz-wordmark); color: var(--gz-canvas); }
:focus-visible { outline: 2px solid var(--gz-focus); outline-offset: 3px; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: gz-page-out .5s cubic-bezier(.6,0,1,1) both; }
::view-transition-new(root) { animation: gz-page-in .5s .15s cubic-bezier(0,0,.35,1) both; }
@keyframes gz-page-out { to { opacity: 0; } }
@keyframes gz-page-in { from { opacity: 0; } to { opacity: 1; } }

.gz-skip { position: absolute; left: -999px; top: 0; z-index: 100; padding: 1rem 2rem; background: var(--gz-canvas); }
.gz-skip:focus { left: 2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- типографічна шкала (02 §2.2) ---------- */
.gz-display { font-family: var(--gz-font-display); font-size: 3rem; line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; }
@media (min-width: 768px) { .gz-display { font-size: 4rem; } }
@media (min-width: 1280px) { .gz-display { font-size: 5rem; } }
@media (min-width: 1920px) { .gz-display { font-size: 4rem; } }
.gz-title { font-family: var(--gz-font-display); font-size: 2.4rem; line-height: 1.2; letter-spacing: -.03em; text-transform: uppercase; }
@media (min-width: 1280px) { .gz-title { font-size: 3rem; } }
.gz-lead { font-size: 2rem; line-height: 1.4; letter-spacing: -.05rem; }
.gz-caps { font-size: 1.3rem; line-height: 1.8; letter-spacing: var(--gz-track-caps); text-transform: uppercase; }
.gz-small { font-size: 1.3rem; line-height: 1.8; }
.gz-micro { font-size: 1.1rem; line-height: 1.6; font-weight: 500; letter-spacing: var(--gz-track-caps); text-transform: uppercase; }
.gz-counter { font-size: 2rem; letter-spacing: -.05rem; color: var(--gz-caption); }
.gz-label-illustrative { font-size: 1.1rem; font-weight: 500; letter-spacing: var(--gz-track-caps); text-transform: uppercase; color: var(--gz-caption); }
.gz-wrap { padding-inline: 2rem; }       /* бічне поле 2rem на всіх ширинах, без max-width (02 §2.3) */
.gz-measure { max-width: 62ch; }

/* ---------- заглушка-кадр ---------- */
.gz-ph { width: 100%; height: 100%; object-fit: cover; }
.gz-ph--missing { display: grid; place-items: center; background: var(--gz-surface); color: var(--gz-caption); font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; min-height: 12rem; }
.gz-frame { position: relative; overflow: hidden; background: var(--gz-surface); }
.gz-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gz-frame > .gz-ph--missing { position: absolute; inset: 0; }
.gz-frame--card { aspect-ratio: 440 / 386; }       /* 87.727 % (02 §2.3) */
.gz-frame--cover { aspect-ratio: 2560 / 3440; }
.gz-frame--wide { aspect-ratio: 16 / 9; }
.gz-frame--portrait { aspect-ratio: 4 / 5; }

/* ---------- посилання: лінія «йде і приходить» (03 G6) ---------- */
.gz-line { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.gz-line::before, .gz-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; }
.gz-line::before { transform: translateX(-101%); }
.gz-line:hover::after { transform: translateX(101%); transition: transform .45s var(--gz-ease-makhno); }
.gz-line:hover::before { transform: translateX(0); transition: transform .45s var(--gz-ease-makhno) .2s; }

/* ---------- кнопка-посилання: лінія стискається й виростає, стрілка перебігає (03 G7) ---------- */
.gz-btn { display: inline-flex; align-items: center; gap: 1rem; padding-bottom: .4rem; font-size: 1.3rem; line-height: 1.6; letter-spacing: var(--gz-track-caps); text-transform: uppercase; position: relative; overflow: hidden; }
.gz-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; }
.gz-btn i { font-style: normal; display: inline-block; }
.gz-btn:hover::after { animation: gz-underline .75s var(--gz-ease-makhno); }
.gz-btn:hover i { animation: gz-arrow .75s var(--gz-ease-makhno-icon); }
@keyframes gz-underline { 0% { transform: scaleX(1); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: right; } 51% { transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
@keyframes gz-arrow { 0% { transform: translateX(0); } 49% { transform: translateX(110%); } 50% { transform: translateX(-110%); } 100% { transform: translateX(0); } }

/* ---------- шапка (SITEMAP §3.1; 03 A10–A11, D1) ---------- */
.gz-head {
  position: fixed; inset: 0 0 auto 0; z-index: 7;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  height: calc(6rem + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 2rem 0;
  transition: height .3s var(--gz-ease-makhno), color .3s var(--gz-ease-makhno);
}
.gz-head__bg { position: absolute; inset: 0; background: var(--gz-canvas); opacity: 0; transition: opacity .3s var(--gz-ease-makhno); z-index: -1; }
.gz-head.is-scrolled { height: calc(4rem + env(safe-area-inset-top, 0px)); }
.gz-head.is-scrolled .gz-head__bg { opacity: 1; }
.gz-head-inverse .gz-head:not(.is-scrolled) { color: var(--gz-ink-statement-dark); }
.gz-head__mark { display: grid; line-height: 1; }
.gz-head__word { font-family: var(--gz-font-display); font-size: 2.4rem; letter-spacing: .06em; }
.gz-head__mark .gz-head__nomads { display: flex; justify-content: space-between; width: 100%; font-size: .82rem; font-weight: 400; letter-spacing: 0; text-transform: uppercase; margin-top: .45rem; }
.gz-head__nomads span:nth-child(6) { margin-right: .4em; }
.gz-head__tools { display: flex; align-items: center; gap: 2.4rem; }
.gz-head__tools .gz-caps { font-size: 1.2rem; }
.gz-head__sound { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 3rem; opacity: .72; transition: opacity .3s, filter .3s; }
.gz-head__sound:hover, .gz-head__sound:focus-visible, .gz-head__sound[aria-pressed="true"] { opacity: 1; }
.gz-head__sound[aria-pressed="true"] { filter: drop-shadow(0 0 .6rem currentColor); }
.gz-head__wave { display: inline-flex; gap: 3px; align-items: flex-end; height: 1.5rem; }
.gz-head__wave i { width: 2px; height: 30%; background: currentColor; transition: height 1s var(--gz-ease-makhno); }
.gz-head__sound[aria-pressed="true"] .gz-head__wave i { animation: gz-wave 1s ease-in-out infinite alternate; }
.gz-head__sound[aria-pressed="true"] .gz-head__wave i:nth-child(2) { animation-delay: .2s; }
.gz-head__sound[aria-pressed="true"] .gz-head__wave i:nth-child(3) { animation-delay: .4s; }
.gz-head__sound[aria-pressed="true"] .gz-head__wave i:nth-child(4) { animation-delay: .6s; }
@keyframes gz-wave { from { height: 30%; } to { height: 100%; } }
.gz-head__burger { display: inline-flex; align-items: center; gap: 1rem; }
.gz-head__burger-lines { position: relative; display: block; width: 2.2rem; height: 1.4rem; }
.gz-head__burger-lines i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: top .6s var(--gz-ease-makhno), transform .6s var(--gz-ease-makhno), opacity .25s; }
.gz-head__burger-lines i:nth-child(1) { top: 1px; }
.gz-head__burger-lines i:nth-child(2) { top: 5px; }
.gz-head__burger-lines i:nth-child(3) { top: 9px; }
.gz-head__burger-lines i:nth-child(4) { top: 13px; }
.menu-open .gz-head__burger-lines i:nth-child(1), .menu-open .gz-head__burger-lines i:nth-child(4) { top: 7px; opacity: 0; }
.menu-open .gz-head__burger-lines i:nth-child(2) { top: 7px; transform: rotate(45deg); }
.menu-open .gz-head__burger-lines i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
@media (max-width: 767px) {
  .gz-head__hide-sm { display: none; }
  .gz-head .gz-head__sound { display: inline-flex; }
  .gz-head__mark .gz-head__nomads { font-size: .7rem; margin-top: .25rem; }
  .gz-head__tools { gap: 1.6rem; }
}

/* ---------- меню-оверлей (SITEMAP §3.2; 03 C1–C12) ---------- */
.gz-menu {
  position: fixed; inset: 0; z-index: 6; overflow: auto;
  background: rgba(46, 39, 33, .6); -webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem);
  color: var(--gz-ink-statement-dark); color-scheme: dark;
  --gz-caption: var(--gz-ink-caption-dark); --gz-focus: var(--gz-ink-wordmark-dark);
  opacity: 0; visibility: hidden;
  transition: opacity .75s var(--gz-ease-makhno), visibility .75s;
}
.menu-open .gz-menu { opacity: 1; visibility: visible; }
.gz-menu__backdrop { position: fixed; inset: 0; width: 100%; height: 100%; cursor: default; }
.menu-open .gz-head { color: var(--gz-ink-statement-dark); }
.menu-open .gz-head__bg { opacity: 0; }
.gz-menu__inner { position: relative; z-index: 1; display: grid; gap: 4rem; padding: calc(6vh + 7rem) 2rem 3rem; pointer-events: none; }
.gz-menu__inner > * { pointer-events: auto; }
@media (min-width: 1024px) { .gz-menu__inner { grid-template-columns: 48rem 38rem; justify-content: space-between; } }
.gz-menu__list { list-style: none; margin: 0; padding: 0; }
.gz-menu__item { border-bottom: 1px solid transparent; position: relative; }
.gz-menu__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gz-caption); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--gz-ease-makhno); }
.gz-menu__title { width: 100%; display: flex; align-items: baseline; gap: 1.6rem; padding: 1.6rem 0; text-align: left; font-family: var(--gz-font-display); font-size: 2.4rem; line-height: 1.2; letter-spacing: -.03em; text-transform: uppercase; }
@media (min-width: 1280px) { .gz-menu__title { font-size: 3rem; } }
.gz-menu__num { font-family: var(--gz-font-text); font-size: 1.3rem; letter-spacing: 0; color: var(--gz-caption); }
.gz-menu__text { overflow: hidden; display: block; flex: 1; }
.gz-menu__text > span { display: block; transform: translateY(100%); transition: transform 1s var(--gz-ease-makhno); }
.gz-menu__plus { width: 1.2rem; height: 1.2rem; position: relative; }
.gz-menu__plus::before, .gz-menu__plus::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor; transition: transform .6s var(--gz-ease-makhno); }
.gz-menu__plus::after { transform: rotate(90deg); }
.gz-menu__item.is-open .gz-menu__plus::after { transform: rotate(0); }
.gz-menu__sub { list-style: none; margin: 0; padding: 0 0 0 3.4rem; height: 0; opacity: 0; overflow: hidden; }
.gz-menu__item.is-open .gz-menu__sub { height: auto; opacity: 1; padding-bottom: 1.6rem; }
.gz-menu__link { display: flex; gap: 1.2rem; align-items: baseline; padding: .5rem 0; font-size: 1.6rem; position: relative; transform: translateY(100%); opacity: 0; transition: transform 1s var(--gz-ease-makhno), opacity 1s var(--gz-ease-makhno), color .45s var(--gz-ease-makhno); }
.gz-menu__subnum { font-size: 1.1rem; color: var(--gz-caption); min-width: 2.6rem; }
.gz-menu__arrow { opacity: 0; transform: translateX(-25%); transition: opacity .45s var(--gz-ease-makhno), transform .45s var(--gz-ease-makhno); }
.gz-menu__sub:hover .gz-menu__link { color: var(--gz-caption); }
.gz-menu__sub .gz-menu__link:hover { color: var(--gz-ink-statement-dark); }
.gz-menu__link:hover .gz-menu__arrow { opacity: 1; transform: translateX(0); }
.gz-menu__info { display: grid; align-content: start; gap: .6rem; font-size: 1.4rem; opacity: 0; transition: opacity .6s var(--gz-ease-makhno); }
.gz-menu__info .gz-caps { color: var(--gz-caption); margin-top: 1.6rem; }
.gz-menu__info .gz-btn { margin-top: 2.4rem; justify-self: start; }
.menu-open .gz-menu__text > span { transform: none; }
.menu-open .gz-menu__item::after { transform: scaleX(1); }
.menu-open .gz-menu__item--1 .gz-menu__text > span, .menu-open .gz-menu__item--1::after { transition-delay: .1s; }
.menu-open .gz-menu__item--2 .gz-menu__text > span, .menu-open .gz-menu__item--2::after { transition-delay: .3s; }
.menu-open .gz-menu__item--3 .gz-menu__text > span, .menu-open .gz-menu__item--3::after { transition-delay: .5s; }
.menu-open .gz-menu__link { transform: none; opacity: 1; }
.menu-open .gz-menu__subitem:nth-child(n) .gz-menu__link { transition-delay: calc(var(--i, 1) * .1s); }
.menu-open .gz-menu__info { opacity: 1; transition-delay: 1.1s; }
.menu-open { overflow: hidden; }

/* ---------- футер світу (03 G1–G8) ---------- */
.gz-foot { position: relative; overflow: hidden; }
.gz-foot__inner { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: 4rem; padding: 8rem 2rem 2rem; }
.gz-foot__cols { display: grid; gap: 4rem; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.gz-foot__col { display: grid; align-content: start; gap: .6rem; font-size: 1.4rem; }
.gz-foot__col .gz-line { justify-self: start; }
.gz-foot__label { color: var(--gz-caption); margin-bottom: 1rem; }
.gz-foot__col .gz-btn { justify-self: start; margin-top: 2rem; }
.gz-foot__word { align-self: end; font-family: var(--gz-font-display); text-transform: uppercase; font-size: clamp(6rem, 17vw, 30rem); line-height: .85; letter-spacing: -.03em; color: var(--gz-wordmark); white-space: nowrap; }
.gz-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.6rem; font-size: 1.2rem; color: var(--gz-caption); border-top: 1px solid var(--gz-line); padding-top: 1.6rem; }
.gz-foot__compass { font-family: "Marko One", var(--gz-font-display); display: inline-flex; gap: .8rem; color: var(--gz-wordmark); }
.gz-foot__compass i { font-style: normal; }
.gz-scroll-top { position: fixed; z-index: 5; right: 2rem; bottom: 2rem; width: 5rem; height: 5rem; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: var(--gz-canvas); color: var(--gz-body); font-size: 2.3rem; opacity: 0; visibility: hidden; transform: translateY(2rem); transition: opacity .5s var(--gz-ease-makhno), transform .5s var(--gz-ease-makhno), visibility .5s; }
.gz-scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.gz-scroll-top:hover span, .gz-scroll-top:focus-visible span { animation: gz-arrow-up .75s cubic-bezier(.77,0,.18,1); }
@keyframes gz-arrow-up { 0%,100% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-110%); opacity: 0; } 46% { transform: translateY(110%); opacity: 0; } }

/* ---------- шапка сторінки (02 §2.3: padding-top 23rem) ---------- */
.gz-pagehead { padding: 23rem 2rem 6rem; display: grid; gap: 2rem; }
@media (max-width: 767px) { .gz-pagehead { padding-top: 14rem; } }
.gz-back { justify-self: start; }
.gz-pagehead__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.6rem 3rem; }

/* ---------- сітка списків (02 §2.3) ---------- */
.gz-grid { display: grid; gap: 6rem 2rem; grid-template-columns: 1fr; padding-inline: 2rem; }
@media (min-width: 520px) { .gz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gz-grid { grid-template-columns: repeat(3, 1fr); gap: 10rem 4rem; } }
.gz-card { display: grid; gap: 1.2rem; align-content: start; }
.gz-card .gz-frame > img { transition: transform 1s var(--gz-ease-makhno); }
.gz-card:hover .gz-frame > img, .gz-card:focus-within .gz-frame > img { transform: scale(1.05); }
.gz-card__title { font-family: var(--gz-font-display); font-size: 2rem; line-height: 1.2; letter-spacing: -.03em; text-transform: uppercase; }
.gz-card__meta { font-size: 1.2rem; color: var(--gz-caption); letter-spacing: var(--gz-track-caps); text-transform: uppercase; }
.gz-card__more { justify-self: start; }

/* ---------- поява при скролі (MAKHNO: рядки з-під маски, 1 с) ---------- */
.gz-lines .gz-line-mask { display: block; overflow: hidden; }
.gz-fade { opacity: 1; }
html.gz-js .gz-fade:not(.is-in) { opacity: 0; }
html.gz-js .gz-fade { transition: opacity 1s cubic-bezier(.22,.61,.36,1); }
html.gz-js .gz-move:not(.is-in) { opacity: 0; transform: translateY(var(--gz-move-distance, 3rem)); }
html.gz-js .gz-move { transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(0,.5,.2,1); }

/* One transparent four-ray spark follows the pointer; there is no opaque disc or trail. */
.gz-cursor { position: fixed; left: 0; top: 0; z-index: 9; pointer-events: none; width: 1.8rem; height: 1.8rem; margin: -.9rem 0 0 -.9rem; opacity: 0; transition: opacity .2s ease; }
.gz-cursor.is-active { opacity: 1; }
.gz-cursor > span {
  display: block; width: 100%; height: 100%;
  background:
    radial-gradient(ellipse .7px 8px at 50% 50%, #fffaf0 0%, #f8dfadcc 15%, #edbd7440 58%, #edbd7400 100%),
    radial-gradient(ellipse 7px .65px at 50% 50%, #fffaf0 0%, #f8dfadcc 15%, #edbd7440 58%, #edbd7400 100%),
    radial-gradient(circle 1.25px at 50% 50%, #fffdf7 0%, #fffdf7e6 45%, #fffdf700 100%);
  filter: drop-shadow(0 0 1.5px #f6d79b80);
  animation: gz-cursor-flicker 2.8s ease-in-out infinite alternate;
}
@keyframes gz-cursor-flicker { from { opacity: .78; } to { opacity: 1; } }
@media (hover: none), (pointer: coarse) { .gz-cursor { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
  html.gz-js .gz-fade:not(.is-in), html.gz-js .gz-move:not(.is-in) { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0s !important; animation-delay: 0s !important; }
  .gz-cursor { display: none; }
}

/* ---------- шухляда My Selection (MAKHNO кошик: 35.5rem → 70rem, 1 с) ---------- */
.gz-drawer { position: fixed; inset: 0 0 0 auto; z-index: 8; width: min(100vw, 35.5rem); display: grid; grid-template-rows: auto 1fr auto; gap: 2rem; padding: calc(2rem + env(safe-area-inset-top, 0px)) 2rem calc(2rem + env(safe-area-inset-bottom, 0px)); box-shadow: -1px 0 0 var(--gz-line); transform: translateX(100%); transition: transform 1s var(--gz-ease-makhno); }
@media (min-width: 768px) { .gz-drawer { width: min(calc(100vw - 10rem), 56rem); } }
.gz-drawer.is-open { transform: none; }
.gz-drawer__head { display: flex; justify-content: space-between; align-items: baseline; }
.gz-drawer__body { overflow: auto; display: grid; align-content: start; gap: 2rem; }
.gz-drawer__empty { color: var(--gz-caption); max-width: 40ch; }