:root {
  --o-gap: clamp(6px, 0.72vw, 14px);
  --o-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --o-hmax: min(78vh, 46rem);          
  --o-plate: #121110;                  
  --o-noshta: #060708;                 
}
.o-skrit {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.o-obekt + .o-obekt { margin-top: clamp(4rem, 8vw, 7.5rem); }
.o-glava {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: clamp(1rem, 2.2vw, 2rem);
  row-gap: 0.55rem;
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
}
.o-glava::after {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  margin-top: clamp(0.5rem, 1vw, 0.85rem);
  background: linear-gradient(90deg, rgba(219, 182, 106, 0.5), rgba(219, 182, 106, 0.08) 62%, transparent);
}
.o-glava .k-num {
  margin: 0;
  font-size: clamp(2.1rem, 1.1rem + 3vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--k-gold-dim);
}
.o-ime {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: baseline;
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
  font-weight: 400;
}
.o-lbl {
  font-family: var(--font-text);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(96% 0.008 85 / 0.6);
}
.o-belezi {
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.15rem;
  list-style: none;
}
.o-belezi li {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(96% 0.008 85 / 0.62);
}
.o-belezi li + li::before {
  content: "";
  width: 1px;
  height: 0.8rem;
  background: var(--k-line);
}
.o-opis {
  max-width: 62ch;
  margin-bottom: clamp(1.1rem, 2vw, 1.7rem);
  font-size: 0.95rem;
  line-height: 1.72;
  color: oklch(96% 0.008 85 / 0.66);
}
.o-mozaika {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--o-gap);
}
.o-row { display: flex; gap: var(--o-gap); }
.o-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--o-plate);
}
.g-w { flex: 2.1 1 0; aspect-ratio: 21 / 10; }
.g-l { flex: 1.5 1 0; aspect-ratio: 3 / 2; }
.g-s { flex: 1 1 0;   aspect-ratio: 1 / 1; }
.g-p { flex: 0.8 1 0; aspect-ratio: 4 / 5; }
.o-row--solo > .g-l { aspect-ratio: 16 / 9; }
.o-row[class*="o-sum-"] {
  width: 100%;
  max-width: calc(var(--o-hmax) * var(--o-sum));
  margin-inline: auto;
}
.o-sum-08 { --o-sum: 0.8; } .o-sum-10 { --o-sum: 1; }   .o-sum-15 { --o-sum: 1.5; }
.o-sum-16 { --o-sum: 1.6; } .o-sum-18 { --o-sum: 1.8; } .o-sum-20 { --o-sum: 2; }
.o-sum-21 { --o-sum: 2.1; } .o-sum-23 { --o-sum: 2.3; } .o-sum-24 { --o-sum: 2.4; }
.o-sum-25 { --o-sum: 2.5; } .o-sum-26 { --o-sum: 2.6; } .o-sum-28 { --o-sum: 2.8; }
.o-sum-29 { --o-sum: 2.9; } .o-sum-30 { --o-sum: 3; }
.o-bento {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--o-gap);
}
.o-bento > .o-lead { grid-row: 1 / 3; aspect-ratio: 3 / 2; }
.o-bento--r { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.o-bento--r > .o-lead { grid-column: 2; }
.o-open {
  position: absolute;
  inset: 0;
  display: block;
  cursor: zoom-in;
}
.o-open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 100%;
  transform-origin: 100% 100%;
  transition: transform 1.4s var(--o-ease);
}
.o-open::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--k-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--o-ease);
}
.o-open:focus-visible { outline: 2px solid var(--k-gold); outline-offset: -2px; }
.o-open:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .o-open::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(10, 11, 13, 0.08);
    transition: opacity 0.6s ease;
    pointer-events: none;
  }
  .o-open::after { z-index: 2; }
  .o-open:hover::before, .o-open:focus-visible::before { opacity: 0; }
  .o-open:hover img { transform: scale(1.035); }
  .o-open:hover::after { transform: scaleX(1); }
}
.o-wait {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--o-ease), transform 1.1s var(--o-ease);
}
.o-wait.is-in { opacity: 1; transform: none; }
.o-row > .o-wait:nth-child(2), .o-bento > .o-wait:nth-child(2) { transition-delay: 80ms; }
.o-row > .o-wait:nth-child(3), .o-bento > .o-wait:nth-child(3) { transition-delay: 160ms; }
.o-row > .o-wait:nth-child(4) { transition-delay: 240ms; }
.o-row > .o-wait:nth-child(n + 5) { transition-delay: 320ms; }
.o-wait img { opacity: 0; transition: opacity 0.9s ease, transform 1.4s var(--o-ease); }
.o-wait img.is-on { opacity: 1; }
.o-obrazec-red { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); }
.o-obrazec .o-tile::before {
  content: "Образец";
  position: absolute;
  top: 0.75rem;
  left: 0.85rem;
  z-index: 3;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(241, 230, 211, 0.8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.o-pokana { margin-top: clamp(4rem, 8vw, 7rem); }
html.o-lock { overflow: hidden; scrollbar-gutter: stable; }
.o-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  background: var(--o-noshta);
  color: var(--k-text);
  overflow: hidden;
  transition: opacity 0.22s ease;
}
.o-viewer::backdrop { background: var(--o-noshta); }
.o-viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: oVhod 0.4s var(--o-ease);
}
.o-viewer.is-out { opacity: 0; }
.o-viewer:focus-visible { outline: none; }
@keyframes oVhod { from { opacity: 0; } to { opacity: 1; } }
.o-vtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.6rem, 1.8vh, 1.2rem) clamp(1.1rem, 3vw, 2.6rem);
}
.o-vbr {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  color: oklch(96% 0.008 85 / 0.72);
}
.o-vx {
  position: relative;
  min-height: 44px;
  padding: 0.6rem 0.15rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-text);
  transition: color 0.3s ease;
}
.o-vx::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.5rem;
  height: 1px;
  background: linear-gradient(90deg, #dbb66a, rgba(219, 182, 106, 0.35));
}
.o-vx:hover { color: #fff; }
.o-vx:focus-visible, .o-vnav:focus-visible { outline: 2px solid var(--k-gold); outline-offset: 3px; }
.o-vscena {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  min-height: 0;
  padding-inline: clamp(0.6rem, 7vw, 7.5rem);
  touch-action: pan-y pinch-zoom;
}
.o-vscena picture { display: contents; }
.o-vimg {
  grid-area: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.35s ease;
}
.o-vimg.is-on { opacity: 1; }
.o-vnav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: clamp(3rem, 7vw, 7.5rem);
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--k-gold);
  transition: color 0.3s ease;
}
.o-vnav--prev { left: 0; }
.o-vnav--next { right: 0; }
.o-vnav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.95rem;
  height: 0.95rem;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translate(-30%, -50%) rotate(45deg);
  transition: transform 0.5s var(--o-ease);
}
.o-vnav--next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.o-vnav:hover { color: #fff; }
.o-vnav--prev:hover::before { transform: translate(-58%, -50%) rotate(45deg); }
.o-vnav--next:hover::before { transform: translate(-42%, -50%) rotate(-135deg); }
.o-viewer.is-sama .o-vnav { display: none; }       
.o-vnadpis {
  min-height: 3.4rem;
  padding: clamp(0.7rem, 1.8vh, 1.2rem) clamp(1.1rem, 3vw, 2.6rem) clamp(0.9rem, 2.4vh, 1.5rem);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.12rem);
  line-height: 1.4;
  text-align: center;
  color: var(--k-cream);
}
@media (max-width: 700px) {
  .o-obekt + .o-obekt { margin-top: clamp(3.2rem, 12vw, 4.4rem); }
  .o-glava { grid-template-columns: auto minmax(0, 1fr); }
  .o-belezi { grid-column: 1 / -1; justify-self: start; }
  .o-row { flex-wrap: wrap; }
  .o-row[class*="o-sum-"] { max-width: none; }
  .g-w, .g-l { flex-basis: 100%; }
  .g-w, .o-row--solo > .g-l { aspect-ratio: 3 / 2; }
  .g-s, .g-p { flex-basis: calc(50% - var(--o-gap)); }
  .o-bento, .o-bento--r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .o-bento > .o-lead, .o-bento--r > .o-lead { grid-column: 1 / -1; grid-row: auto; }
  .o-bento > .o-side { aspect-ratio: 1 / 1; }
  .o-vscena { padding-inline: 0; }
  .o-vnav { width: 3.2rem; }
  .o-vnav::before { width: 0.8rem; height: 0.8rem; }
}