/* Звенья — превью главной. Токены: цвета сняты с логотипа (#8d2b14) и отрисовок мотивов (#2b2a29). */
/* шрифты — у себя (OFL, лицензии рядом в assets/fonts): Google Fonts в РФ тормозит отрисовку */
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("assets/fonts/cormorant-garamond-cyrillic-600.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-weight: 600; font-display: swap; src: url("assets/fonts/cormorant-garamond-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("assets/fonts/golos-text-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("assets/fonts/golos-text-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url("assets/fonts/golos-text-cyrillic-500.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url("assets/fonts/golos-text-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("assets/fonts/ibm-plex-mono-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("assets/fonts/ibm-plex-mono-cyrillic-500.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --paper: #f4ede1;
  --paper-2: #eadfcc;
  --ink: #2b2a29;
  --ink-soft: #5d544b;
  --terra: #8d2b14;
  --terra-2: #a9482a;
  --clay: #a0603e;
  --ochre: #c08a4b;
  --ochre-lt: #cf9a5a; /* охра на тёмном фоне — контраст от 4,5:1 */
  --line: rgba(43, 42, 41, .16);

  /* слои: чем глубже, тем темнее грунт */
  --l0: #efe6d6;
  --l1: #e6dccb;
  --l2: #e2cfb6;
  --l3: #d6bc9b;
  --l4: #3a2d23;

  --f-display: "Cormorant Garamond", "Times New Roman", serif;
  --f-body: "Golos Text", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  overflow-x: hidden;
}
/* бумажное зерно поверх всего — едва заметное */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .5;
  background-image: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .12 0 0 0 0 .08 0 0 0 -.9 .55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 400; padding: 10px 16px; background: var(--ink); color: var(--paper); font-size: 15px; text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.02; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(46px, 6.6vw, 108px); }
h2 { font-size: clamp(38px, 5.6vw, 84px); }
h3 { font-size: clamp(28px, 3vw, 44px); }
p { margin: 0; }
.lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--ink-soft); max-width: 46ch; margin-top: 22px; }
.eyebrow, .mono { font: 500 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--terra); }
.eyebrow { margin-bottom: 18px; }

/* ссылки: при наведении прорисовывается «рез» — зигзаг */
.zz {
  text-decoration: none; padding-bottom: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 5 L3 1 L6 5 L9 1 L12 5' fill='none' stroke='%238d2b14' stroke-width='1.3'/%3E%3C/svg%3E") left bottom / 0 6px repeat-x;
  transition: background-size .55s var(--ease);
}
.zz:hover, .zz:focus-visible { background-size: 100% 6px; }

/* кнопка: заливка растекается терракотовой глазурью от точки наведения */
.btn {
  --x: 50%; --y: 50%;
  position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center;
  font: 500 15px/1 var(--f-body); text-decoration: none; color: var(--ink);
  padding: 15px 26px; border: 1.5px solid var(--ink); border-radius: 999px; transition: color .4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; z-index: -1; left: var(--x); top: var(--y); width: 10px; height: 10px; border-radius: 50%;
  background: var(--terra); transform: translate(-50%, -50%) scale(0); transition: transform .7s var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--paper); border-color: var(--terra); }
.btn:hover::before, .btn:focus-visible::before { transform: translate(-50%, -50%) scale(60); }
.btn--small { padding: 11px 20px; font-size: 14px; }
.btn--big { font-size: 18px; padding: 20px 36px; }

/* шапка */
.top {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 32px;
  padding: 14px var(--gutter); transition: background .4s, transform .5s var(--ease);
}
.top.is-solid { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); }
.top.is-hidden { transform: translateY(-110%); }
.top:focus-within { transform: none; } /* шапка с фокусом не прячется */
.top__logo img { width: 92px; height: auto; }
.top__nav { display: flex; gap: 28px; margin-left: auto; font-size: 15px; }
@media (max-width: 900px) { .top__nav { display: none; } .top .btn { margin-left: auto; } }

/* вступление */
.intro { display: none; }
.js .intro {
  display: grid; place-items: center; align-content: center; gap: 18px;
  position: fixed; inset: 0; z-index: 200; background: var(--paper);
  clip-path: inset(0 0 0 0);
}
.intro__logo { width: min(340px, 70vw); }
.intro__logo svg { width: 100%; height: auto; overflow: visible; }
.intro__line { font: 500 12px/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); opacity: 0; }
.intro.is-done { display: none; }

/* первый экран */
.hero {
  position: relative; min-height: 100svh; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 72px);
  align-items: center; padding: 120px var(--gutter) 64px; max-width: var(--maxw); margin: 0 auto;
}
.hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero__text, .hero__photo { position: relative; z-index: 1; }
.hero__ways { display: grid; gap: 0; margin-top: 44px; border-top: 1px solid var(--line); }
.way {
  display: grid; grid-template-columns: 48px 1fr; column-gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; transition: padding .5s var(--ease), background .5s;
}
.way__n { font: 500 12px/1.9 var(--f-mono); color: var(--terra); grid-row: span 2; }
.way__t { font: 600 26px/1.1 var(--f-display); }
.way__d { color: var(--ink-soft); font-size: 15px; }
.way:hover { padding-left: 12px; background: linear-gradient(90deg, rgba(141, 43, 20, .07), transparent 70%); }
.hero__photo { margin: 0; }
.hero__photo .tag { display: inline-flex; }
.hero__photo img { border-radius: 2px; aspect-ratio: 4 / 5; max-height: 74vh; object-fit: cover; object-position: 50% 88%; width: 100%; box-shadow: 0 30px 60px -30px rgba(43, 32, 22, .45); }
.loupe-hint { margin-top: 28px; font: 400 12px/1.4 var(--f-mono); color: var(--ink-soft); letter-spacing: .06em; }
.hint-touch { display: none; }
@media (hover: none) { .hint-desk { display: none; } .hint-touch { display: inline; } }

/* подвеска-амулет, покачивается */
.pendant { position: absolute; top: 76px; left: 53%; z-index: 2; width: 74px; transform-origin: 50% 0; pointer-events: none; }
.pendant__cord { display: block; width: 1.5px; height: 56px; margin: 0 auto; background: linear-gradient(var(--clay), #6b4a33); }
.pendant img { width: 74px; filter: drop-shadow(0 8px 10px rgba(43, 32, 22, .3)); }

/* бирка под фото — как музейная этикетка на шнурке */
.tag {
  position: relative; display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding: 10px 14px 10px 30px;
  background: var(--paper-2); border: 1px solid var(--line); font-size: 14px; transform-origin: 20% 0;
}
.tag::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink-soft); transform: translateY(-50%); }
.tag__src { font: 400 11px/1.4 var(--f-mono); color: var(--ink-soft); letter-spacing: .04em; }
figure:hover .tag { animation: swing 1.6s var(--ease); }
@keyframes swing { 0% { transform: rotate(0); } 20% { transform: rotate(3deg); } 45% { transform: rotate(-2deg); } 70% { transform: rotate(1deg); } 100% { transform: rotate(0); } }

/* рамка фото: тонкая линия с отступом и терракотовые уголки — как паспарту гравюры */
.zv-frame { position: relative; display: block; padding: 12px; }
.zv-frame::before { content: ""; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); pointer-events: none; }
.zv-frame::after {
  content: ""; position: absolute; inset: -5px; pointer-events: none;
  background:
    linear-gradient(var(--terra), var(--terra)) left top / 18px 1.5px no-repeat, linear-gradient(var(--terra), var(--terra)) left top / 1.5px 18px no-repeat,
    linear-gradient(var(--terra), var(--terra)) right top / 18px 1.5px no-repeat, linear-gradient(var(--terra), var(--terra)) right top / 1.5px 18px no-repeat,
    linear-gradient(var(--terra), var(--terra)) left bottom / 18px 1.5px no-repeat, linear-gradient(var(--terra), var(--terra)) left bottom / 1.5px 18px no-repeat,
    linear-gradient(var(--terra), var(--terra)) right bottom / 18px 1.5px no-repeat, linear-gradient(var(--terra), var(--terra)) right bottom / 1.5px 18px no-repeat;
}
.zv-frame img { display: block; }

/* «проявление» фото */
.js .develop { filter: sepia(.9) saturate(.5) blur(10px) contrast(.8); opacity: .35; transition: filter 1.6s var(--ease), opacity 1.2s var(--ease); }
.js .develop.is-in { filter: none; opacity: 1; }

/* лента орнамента — медленно течёт */
.band {
  position: relative; height: 34px; overflow: hidden; opacity: .85;
}
.band::before {
  content: ""; position: absolute; inset: 0 -1200px 0 0; background: url("assets/svg/band-alania.svg") 0 50% / auto 30px repeat-x;
  animation: flow 60s linear infinite;
}
@keyframes flow { to { transform: translateX(-1200px); } }

/* из черепка — в предмет */
.shards { --st: clamp(190px, 26vh, 240px); /* верх строки этапов; main.js ставит точно — под заголовком */ position: relative; min-height: 100svh; padding: 0 var(--gutter); overflow: hidden; }
.shards__head { position: absolute; left: var(--gutter); top: 96px; z-index: 3; }
.shards__stage { position: relative; height: 100svh; display: grid; place-items: center; padding-top: 190px; }
.shards__disc { position: relative; width: min(52vh, 74vw); aspect-ratio: 1; z-index: 2; }
.shards__disc::before { /* одна тень на весь диск — проявляется, когда черепки собрались */
  content: ""; position: absolute; inset: 2%; border-radius: 50%; box-shadow: 0 18px 30px -6px rgba(43, 25, 15, .45); opacity: var(--shadow, 0);
}
.shard { position: absolute; overflow: hidden; } /* left/top/width/height и clip-path — по границам черепка, задаёт main.js */
.shard__in { /* весь диск, сдвинутый так, чтобы в окне черепка была его часть */
  position: absolute; background: radial-gradient(circle at 42% 38%, #b9744c, #8f5233 58%, #6e3d25 100%);
}
.shard__in img { position: absolute; inset: 4%; width: 92%; height: 92%; }
.shards__photo { position: absolute; right: var(--gutter); top: 50%; width: min(30vw, 380px); margin: 0; transform: translateY(-50%); z-index: 1; clip-path: inset(100% 0 0 0); }
@media (min-width: 761px) {
  /* фото — от середины экрана, ближе к диску (итог диска: от края, 0,82 ширины), а не у правого края */
  .shards__photo { right: auto; left: max(50%, calc(var(--gutter) + min(52vh, 74vw) * .82 + clamp(56px, 6vw, 120px))); }
  /* фото — под строкой этапов, не наезжает на них */
  .shards__photo { top: calc(var(--st) + 104px); transform: none; height: calc(100svh - var(--st) - 150px); width: auto; aspect-ratio: 787 / 1400; }
  .shards__photo img { height: 100%; width: auto; }
}
.shards__photo img { aspect-ratio: 787 / 1400; object-fit: cover; width: 100%; }
.shards__steps { position: absolute; left: 0; top: var(--st); z-index: 3; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 250px)); gap: 28px; }
/* этапы — строкой под заголовком: линия над этапом заполняется по прокрутке, текущий крупнее, пройденные отмечены */
.shards__steps li { --f: 0; position: relative; padding-top: 16px; color: var(--ink-soft); opacity: .45; font-size: 15px; line-height: 1.4; transition: opacity .5s, color .5s, font-size .5s var(--ease); }
.shards__steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.shards__steps li::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--f) * 100%); background: var(--terra); }
.shards__steps li.is-done { opacity: .75; }
.shards__steps li.is-on { opacity: 1; color: var(--ink); font-size: 17px; }
.shards__steps .mono { display: block; width: auto; margin-bottom: 4px; font-size: 13px; }
@media (max-width: 760px) {
  /* телефон: заголовок сверху, диск и фото — одной полосой под ним, шаги — внизу; ничего не наезжает */
  .shards { --disc: min(62vw, 34svh); }
  .shards__stage { display: block; padding-top: 0; }
  .shards__disc { position: absolute; top: 222px; left: calc(50% - var(--disc) / 2); width: var(--disc); }
  .shards__photo { width: calc(var(--disc) * .6); top: 222px; transform: none; }
  .shards__steps { top: auto; bottom: 24px; right: var(--gutter); gap: 6px; grid-template-columns: 1fr; }
  .shards__steps li { padding-top: 0; }
  .shards__steps li::before, .shards__steps li::after { display: none; }
  .shards__steps .mono { display: inline-block; width: 28px; margin: 0; }
  .shards__steps li { font-size: 14px; line-height: 1.4; }
}

/* культурные слои */
.layers { position: relative; }
.layers__head { padding: 140px var(--gutter) 90px; max-width: var(--maxw); margin: 0 auto; }
.layer { position: relative; background: var(--bg); padding: 40px 0 120px; }
.layer__edge {
  position: absolute; left: 0; right: 0; top: -38px; height: 40px; background: var(--bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22l40-6 38 9 52-14 44 10 61-8 30 12 58-17 47 9 66-6 35 11 52-15 60 10 41-4 58 13 47-16 63 8 39-10 52 12 46-7 57 9 41-12 55 6 34 9 51-14 40 8 59-5V40z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22l40-6 38 9 52-14 44 10 61-8 30 12 58-17 47 9 66-6 35 11 52-15 60 10 41-4 58 13 47-16 63 8 39-10 52 12 46-7 57 9 41-12 55 6 34 9 51-14 40 8 59-5V40z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}
.layer__body { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 0 calc(var(--gutter) + 150px); }
.layer__body > p:not(.mono):not(.soon):not(.item-line) { max-width: 60ch; margin-top: 18px; color: var(--ink-soft); }
.layer h3 { margin-top: 12px; font-size: clamp(40px, 5vw, 76px); }
.layer[data-layer="0"] { --bg: var(--l0); }
.layer[data-layer="1"] { --bg: var(--l1); }
.layer[data-layer="2"] { --bg: var(--l2); }
.layer[data-layer="3"] { --bg: var(--l3); --ink-soft: #4d453d; } /* на тёмной охре — контраст от 4,5:1 */
.layer[data-layer="4"] { --bg: var(--l4); color: var(--paper); }
.layer[data-layer="4"] .mono, .layer[data-layer="4"] .eyebrow { color: var(--ochre-lt); }
.layer[data-layer="4"] .layer__body > p { color: #d9cbb5 !important; }
.layer[data-layer="4"] .tag { background: #4a3a2e; border-color: rgba(255, 255, 255, .12); color: var(--paper); }
.layer[data-layer="4"] .tag__src { color: #cdbda5; }
.layer--soon, .layer--majar { padding-bottom: 80px; }
.soon { margin-top: 18px; display: inline-block; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border: 1px dashed var(--ink-soft); color: var(--ink-soft); }
.item-line { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; color: var(--ink-soft); }
.items { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 36px); margin-top: 48px; align-items: start; }
.item { margin: 0; }
.item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.item--wide { grid-column: span 2; }
.item--wide img { aspect-ratio: 1; }
[data-loupe] img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (max-width: 900px) {
  .layer__body { padding-left: var(--gutter); }
  .items { grid-template-columns: 1fr 1fr; }
  .item--wide { grid-column: span 2; }
}

/* рейка глубины раскопа */
.ruler {
  position: fixed; left: var(--gutter); top: 50%; z-index: 40; transform: translateY(-50%); width: 130px;
  display: grid; grid-template-columns: 10px 1fr; column-gap: 14px; opacity: 0; pointer-events: none; transition: opacity .5s;
}
.ruler.is-on { opacity: 1; pointer-events: auto; }
.ruler__track {
  position: relative; height: 300px;
  background: repeating-linear-gradient(to bottom, var(--ink-soft) 0 1px, transparent 1px 15px) center / 6px 100% no-repeat,
              linear-gradient(var(--ink-soft), var(--ink-soft)) center / 1px 100% no-repeat;
}
.ruler__mark { position: absolute; left: -3px; width: 16px; height: 2px; background: var(--terra); top: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--terra) 20%, transparent); }
.ruler__ticks { list-style: none; margin: 0; padding: 0; height: 300px; display: flex; flex-direction: column; justify-content: space-between; font: 400 11px/1.2 var(--f-mono); color: var(--ink-soft); }
.ruler__ticks li { transition: color .4s, transform .4s var(--ease); }
.ruler__ticks button { all: unset; cursor: pointer; display: block; padding: 2px 0; }
.ruler__ticks button:hover { color: var(--terra); }
.ruler__ticks button:focus-visible { outline: 1.5px solid var(--terra); outline-offset: 3px; }
.ruler__ticks li.is-on { color: var(--terra); transform: translateX(4px); font-weight: 500; }
.ruler__depth { grid-column: 1 / -1; margin-top: 16px; font: 500 12px/1.3 var(--f-mono); color: var(--ink); }
.ruler.is-deep .ruler__ticks, .ruler.is-deep .ruler__depth { color: #d9cbb5; }
.ruler.is-deep .ruler__ticks li.is-on { color: var(--ochre-lt); }
@media (max-width: 900px) {
  .ruler { left: 0; right: 0; top: 0; transform: none; width: auto; display: block; padding: 0; }
  .ruler__track, .ruler__ticks { display: none; }
  .ruler { top: auto; bottom: 0; }
  .ruler__depth { position: absolute; left: var(--gutter); bottom: 22px; margin: 0; padding: 5px 10px; font-size: 11px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 92%, transparent); box-shadow: 0 2px 8px rgba(43, 32, 22, .12); }
  .ruler.is-deep .ruler__depth { background: rgba(58, 45, 35, .92); }
}

/* сквозной знак-звено */
.zveno { position: fixed; right: var(--gutter); bottom: 28px; z-index: 40; width: 112px; height: 112px; opacity: 0; transition: opacity .5s; pointer-events: none; }
.zveno.is-on { opacity: 1; }
.zveno img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: rotate(-90deg) scale(.6); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.zveno img.is-on { opacity: 1; transform: none; }
.zveno__cap { position: absolute; right: 0; bottom: calc(100% + 8px); width: 220px; text-align: right; font: 400 12px/1.3 var(--f-mono); letter-spacing: .04em; color: var(--ink-soft); }
.zveno.is-deep img { filter: invert(.92) sepia(.3); }
.zveno.is-deep .zveno__cap { color: #d9cbb5; }
@media (max-width: 900px) { .zveno { width: 64px; height: 64px; bottom: 18px; } .zveno__cap { display: none; } }

/* звенья орнамента */
.chain { padding: 140px var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.chain__row { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.chain__row::before { content: ""; position: absolute; left: 10%; right: 10%; top: 60px; height: 2px; background: repeating-linear-gradient(90deg, var(--terra) 0 18px, transparent 18px 26px); transform-origin: left; transform: scaleX(var(--p, 0)); }
.chain__row li { display: grid; justify-items: center; gap: 14px; text-align: center; position: relative; }
.chain__row img { width: 120px; height: 120px; object-fit: contain; background: var(--paper); border-radius: 50%; padding: 8px; border: 1.5px solid var(--ink); }
.chain__soon img { opacity: .35; border-style: dashed; }
@media (max-width: 760px) {
  .chain__row { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .chain__row::before { display: none; }
  .chain__row img { width: 96px; height: 96px; }
}

/* для территорий */
.terr { background: var(--ink); color: var(--paper); padding: 140px var(--gutter); }
.terr > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.terr .lead { color: #cfc4b3; }
.terr .eyebrow { color: var(--ochre-lt); }
.steps { list-style: none; padding: 0; margin-top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.steps li { border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 22px; }
.steps__n { font: 500 12px/1 var(--f-mono); color: var(--ochre-lt); }
.steps h3 { margin: 14px 0 10px; font-size: 32px; }
.steps p { color: #cfc4b3; font-size: 15px; }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 80px; margin-bottom: 64px; }
.case { margin: 0; }
.case img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.case figcaption { margin-top: 14px; display: grid; gap: 6px; color: #cfc4b3; }
.case .mono { color: var(--ochre-lt); }
.terr .btn { color: var(--paper); border-color: var(--paper); margin-left: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } .cases { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* где купить */
.buy { padding: 140px var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.buy__list { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.buy__list li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; border-top: 1px solid var(--line); padding-top: 22px; }
.buy__list img { width: 64px; height: 64px; object-fit: contain; transition: transform 1.2s var(--ease); }
.buy__list li:hover img { transform: rotate(180deg); }
.buy__list h3 { font-size: 28px; }
.buy__list p { color: var(--ink-soft); margin: 6px 0 10px; }
.buy__note { margin-top: 48px; color: var(--ink-soft); }
@media (max-width: 900px) { .buy__list { grid-template-columns: 1fr; } }

/* словарь знаков */
.signs { padding: 140px var(--gutter) 120px; max-width: var(--maxw); margin: 0 auto; }
.signs__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); margin-top: 64px; align-items: center; }
.signs__stage { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 18px; }
.signs__big { width: min(300px, 64vw); aspect-ratio: 1; color: var(--terra); background: var(--paper-2); border-radius: 50%; border: 1.5px solid var(--ink); }
.signs__big path, .signs__big rect, .signs__big circle { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.signs__big .f { fill: currentColor; stroke: none; }
.signs__stage figcaption { display: grid; gap: 6px; max-width: 40ch; }
.signs__mean { font: 600 clamp(36px, 4.4vw, 60px)/1 var(--f-display); }
.signs__text { color: var(--ink-soft); }
.signs__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.signs__list button {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; justify-items: center; gap: 8px; padding: 16px 8px 12px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--paper-2) 50%, transparent); font-size: 14px; text-align: center;
  transition: border-color .3s, background .3s, transform .4s var(--ease);
}
.signs__list svg { width: 56px; height: 56px; color: var(--ink); }
.signs__list path, .signs__list rect, .signs__list circle { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.signs__list .f { fill: currentColor; stroke: none; }
.signs__list button:hover { border-color: var(--ink-soft); transform: translateY(-2px); }
.signs__list button:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.signs__list button[aria-pressed="true"] { border-color: var(--terra); background: var(--paper-2); }
.signs__list button[aria-pressed="true"] svg { color: var(--terra); }
.signs__note { margin-top: 48px; max-width: 70ch; color: var(--ink-soft); font-size: 15px; }
@media (max-width: 900px) { .signs__body { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .signs__list { grid-template-columns: repeat(3, 1fr); gap: 8px; } .signs__list button { padding: 12px 4px 10px; font-size: 12px; } .signs__list svg { width: 44px; height: 44px; } }

/* история вещи: знаки и их смысл */
.story { margin: 26px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 32px; max-width: 760px; }
.story div { border-top: 1px solid var(--line); padding-top: 14px; }
.story dt { font: 600 26px/1.1 var(--f-display); }
.story dd { margin: 6px 0 0; color: var(--ink-soft); }

/* зачем «Звенья» */
.why { padding: 140px var(--gutter) 120px; max-width: var(--maxw); margin: 0 auto; }
.why__list { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.why__list li { border-top: 1px solid var(--line); padding-top: 22px; }
.why__list h3 { margin: 14px 0 12px; font-size: clamp(28px, 2.6vw, 38px); }
.why__list p { color: var(--ink-soft); }
@media (max-width: 900px) { .why__list { grid-template-columns: 1fr; gap: 32px; } }

/* наверх */
.to-top {
  position: fixed; right: var(--gutter); bottom: 28px; z-index: 45; width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .4s, visibility .4s, transform .5s var(--ease), background .3s, color .3s;
}
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover, .to-top:focus-visible { background: var(--terra); border-color: var(--terra); color: var(--paper); }
.to-top:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
@media (max-width: 900px) { .to-top { width: 46px; height: 46px; bottom: 18px; } }

.foot { background: var(--paper-2); }
.foot__in { max-width: var(--maxw); margin: 0 auto; padding: 56px var(--gutter); display: grid; grid-template-columns: 140px 1fr 1fr; gap: 32px; align-items: start; color: var(--ink-soft); font-size: 15px; }
.foot__draft { grid-column: 1 / -1; color: var(--ink-soft); }
@media (max-width: 760px) { .foot__in { grid-template-columns: 1fr; } }

/* курсор и лупа */
.cursor, .loupe { display: none; }
@media (hover: hover) and (pointer: fine) {
  /* системный курсор не показываем нигде — ни палец над ссылкой, ни плюс-лупу над фото: состояния рисует свой знак */
  .js body, .js body * { cursor: none !important; }
  .js .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 300; width: 26px; height: 26px; pointer-events: none;
    background: url("assets/svg/sign.svg") center / contain no-repeat; transition: width .3s var(--ease), height .3s var(--ease), opacity .3s;
    filter: drop-shadow(0 0 1px rgba(244, 237, 225, .9)); /* светлый ореол — знак не теряется на фото */
    margin: -13px 0 0 -13px;
  }
  .js .cursor.is-link { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  /* нажатие — знак «вдавливается»: меняем размер, не scale — scale сжал бы и сдвиг translate, курсор уехал бы к углу */
  .js .cursor.is-press { width: 20px; height: 20px; margin: -10px 0 0 -10px; transition-duration: .12s; }
  .js .cursor.is-link.is-press { width: 31px; height: 31px; margin: -15.5px 0 0 -15.5px; }
  /* можно увеличить: знак в кольце лупы с ручкой */
  .js .cursor::before, .js .cursor::after { content: ""; position: absolute; opacity: 0; transition: opacity .25s, transform .3s var(--ease); pointer-events: none; }
  .js .cursor::before { inset: -11px; border: 2px solid var(--terra); border-radius: 50%; transform: scale(.6); box-shadow: 0 0 0 1.5px rgba(244, 237, 225, .85), inset 0 0 0 1.5px rgba(244, 237, 225, .85); }
  .js .cursor::after { left: calc(50% + 16px); top: calc(50% + 16px); width: 13px; height: 3px; margin: -1.5px 0 0 -2px; background: var(--terra); border-radius: 2px; box-shadow: 0 0 0 1.5px rgba(244, 237, 225, .85); transform-origin: 0 50%; transform: rotate(45deg) scaleX(0); }
  .js .cursor.is-zoom::before { opacity: 1; transform: none; }
  .js .cursor.is-zoom::after { opacity: 1; transform: rotate(45deg); }
  .js .cursor.is-zoom.is-dark::before { border-color: var(--paper); }
  .js .cursor.is-zoom.is-dark::after { background: var(--paper); }
  .js .cursor.is-dark { background-image: url("assets/svg/sign-light.svg"); } /* на тёмных разделах — светлый знак */
  .js .cursor.is-hidden { opacity: 0; }
  .js .cursor.is-dark { filter: drop-shadow(0 0 1px rgba(43, 42, 41, .9)); }
  .js [data-loupe] { cursor: none; }
}
.js .loupe {
  display: block; position: fixed; left: 0; top: 0; z-index: 290; width: 200px; height: 200px; margin: -100px 0 0 -100px;
  border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0; transform: scale(.4);
  transition: opacity .35s, transform .45s var(--ease);
  border: 2px solid var(--ink); box-shadow: 0 18px 40px -12px rgba(30, 20, 12, .55), inset 0 0 0 6px rgba(244, 237, 225, .6);
  background: #fff;
}
.js .loupe.is-on { opacity: 1; transform: scale(1); }
.loupe__img { position: absolute; background-repeat: no-repeat; background-size: contain; background-position: center; }
.loupe__cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 500 11px/1.25 var(--f-mono); letter-spacing: .03em; color: var(--paper); background: var(--terra); padding: 7px 30px 14px; }
.loupe__cap:empty { display: none; }

/* кто попросил меньше движения — спокойная версия */
@media (prefers-reduced-motion: reduce) {
  /* мягкий режим, а не полная остановка: у многих режим включён незаметно для них (см. main.js) */
  .band::before { animation-duration: 120s; }
  .js .develop { transition-duration: .8s; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 104px; }
  .hero__photo { max-width: 460px; }
  .pendant { display: none; }
}