html { background: #030405; color-scheme: dark; }

/* 03.08, Батхед: сцена рисовала подписи своим TTF-набором, а сайт - общим
   вариативным Onest. Шеф: «шрифт не как на сайте». Ставим тот же файл,
   путь относительный, чтобы пережить корень домена. TTF оставлен запасным. */
@font-face {
  font-family: "Onest";
  src: url("../../fonts/onest-variable.woff2") format("woff2"),
       url("./assets/onest-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --ink: #030405;
  --ivory: #f1eee7;
  --gold: #d8ad58;
  --gold-light: #f3d793;
  --cold: #6ba3b7;
}

* { box-sizing: border-box; }

html,
body,
.museum-page {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--ink);
}

html,
body { overflow: hidden; }

body {
  color: var(--ivory);
  font-family: "Onest", Arial, sans-serif;
}

.museum {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 91% 44%, rgba(225, 174, 78, .16), transparent 31%),
    radial-gradient(ellipse at 11% 51%, rgba(83, 136, 155, .08), transparent 29%),
    linear-gradient(90deg, #020303, #090b0c 54%, #070705);
}

.museum::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 3, 3, .94), transparent 16%, transparent 78%, rgba(2, 3, 3, .78)),
    linear-gradient(90deg, rgba(2, 3, 3, .45), transparent 8%, transparent 93%, rgba(2, 3, 3, .18));
}

.museum::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
}

.museum__shell {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(127, 158, 168, .065) calc(25% - 1px) 25%),
    radial-gradient(ellipse at 52% 66%, transparent 0 53%, rgba(217, 170, 79, .08) 53.3% 53.5%, transparent 53.8%),
    linear-gradient(180deg, rgba(255, 255, 255, .012), transparent 21%);
}

.museum__ceiling {
  position: absolute;
  top: -13%;
  right: -8%;
  left: -8%;
  z-index: 1;
  height: 43%;
  transform: perspective(850px) rotateX(-59deg);
  transform-origin: center bottom;
  background:
    repeating-linear-gradient(90deg, transparent 0 9.8%, rgba(208, 172, 100, .1) 10%),
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(121, 158, 170, .055) 33px),
    linear-gradient(180deg, #111415, #030404);
}

.museum__floor {
  position: absolute;
  right: -12%;
  bottom: -24%;
  left: -12%;
  z-index: 2;
  height: 61%;
  transform: perspective(760px) rotateX(63deg);
  transform-origin: center top;
  border-top: 1px solid rgba(216, 173, 88, .17);
  background:
    repeating-linear-gradient(90deg, transparent 0 89px, rgba(216, 173, 88, .075) 90px 91px),
    repeating-linear-gradient(0deg, transparent 0 57px, rgba(99, 146, 161, .055) 58px 59px),
    radial-gradient(ellipse at 72% 0, rgba(225, 173, 78, .15), transparent 48%),
    linear-gradient(180deg, #111415, #020303 66%);
  box-shadow: 0 -35px 100px rgba(216, 173, 88, .045);
}

.museum__header {
  position: absolute;
  top: clamp(24px, 3.7vh, 56px);
  left: clamp(26px, 3.7vw, 72px);
  z-index: 24;
  pointer-events: none;
}

.museum__header p {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: clamp(7px, .5vw, 10px);
  font-weight: 700;
  letter-spacing: .23em;
}

.museum__header h1 {
  margin: 0;
  font-size: clamp(30px, 3vw, 59px);
  font-weight: 700;
  letter-spacing: -.058em;
  line-height: .9;
}

.museum__header span {
  display: block;
  margin-top: 10px;
  color: rgba(243, 215, 147, .58);
  font-size: clamp(7px, .52vw, 10px);
  font-weight: 700;
  letter-spacing: .21em;
}

.museum__growth {
  position: absolute;
  top: clamp(25px, 3.7vh, 57px);
  right: clamp(26px, 3.7vw, 72px);
  z-index: 24;
  display: flex;
  gap: 13px;
  align-items: center;
  pointer-events: none;
}

.museum__growth > strong {
  color: var(--gold-light);
  font-size: clamp(27px, 2.2vw, 43px);
  line-height: .82;
  letter-spacing: -.08em;
  text-shadow: 0 0 26px rgba(216, 173, 88, .25);
}

.museum__growth div {
  display: grid;
  grid-template-columns: minmax(60px, 7vw) auto;
  gap: 5px 9px;
  align-items: center;
}

.museum__growth b,
.museum__growth span {
  grid-column: 1 / -1;
  font-size: 6.5px;
  letter-spacing: .16em;
}

.museum__growth b { color: rgba(241, 238, 231, .48); }
.museum__growth span { color: rgba(241, 238, 231, .25); }

.museum__growth i {
  display: none;
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 173, 88, .22), var(--gold));
}

.museum__manifesto {
  position: absolute;
  top: clamp(104px, 13.2vh, 136px);
  right: 0;
  left: 0;
  z-index: 19;
  display: grid;
  justify-items: center;
  pointer-events: none;
  text-align: center;
}

.museum__manifesto strong {
  display: grid;
  justify-items: center;
  text-align: center;
}

.museum__manifesto strong span {
  color: rgba(243, 215, 147, .88);
  font-size: clamp(17px, 1.55vw, 30px);
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1;
}

.museum__manifesto strong em {
  color: var(--ivory);
  font-size: clamp(44px, 4.55vw, 87px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: .88;
  text-shadow: 0 0 30px rgba(241, 238, 231, .11);
}

.museum__manifesto small {
  margin-top: 11px;
  color: rgba(243, 215, 147, .75);
  font-size: clamp(5.5px, .45vw, 8.5px);
  font-weight: 700;
  letter-spacing: .22em;
}

.gallery {
  position: absolute;
  top: clamp(105px, 13.3vh, 133px);
  right: 0;
  bottom: 17px;
  left: 0;
  z-index: 5;
  overflow-x: hidden;
  overflow-y: hidden;
  outline: none;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.gallery::-webkit-scrollbar { display: none; }

.gallery:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(216, 173, 88, .26);
}

.gallery__world {
  position: relative;
  width: 100%;
  min-width: 100%;
  height: 100%;
  isolation: isolate;
}

.gallery__wall {
  position: absolute;
  inset: 0 0 29%;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(180deg, rgba(14, 17, 18, .92), rgba(4, 6, 7, .98));
  border-bottom: 1px solid rgba(216, 173, 88, .16);
  box-shadow: inset 0 -35px 80px rgba(0, 0, 0, .62);
}

.gallery__wall i {
  position: relative;
  border-left: 1px solid rgba(121, 156, 167, .09);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .012), transparent 18%, transparent 82%, rgba(0, 0, 0, .18)),
    radial-gradient(ellipse at 50% 60%, rgba(216, 173, 88, var(--bay-light, .035)), transparent 56%);
}

.gallery__wall i:nth-child(1) { --bay-light: .018; }
.gallery__wall i:nth-child(2) { --bay-light: .032; }
.gallery__wall i:nth-child(3) { --bay-light: .052; }
.gallery__wall i:nth-child(4) { --bay-light: .082; }
.gallery__wall i:nth-child(5) { --bay-light: .19; }
.gallery__wall i:last-child { border-right: 1px solid rgba(121, 156, 167, .09); }

.gallery__wall i::before,
.gallery__wall i::after {
  content: "";
  position: absolute;
  top: 7%;
  bottom: 7%;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(231, 187, 104, .57) 19%, rgba(96, 150, 168, .14) 73%, transparent);
  box-shadow: 0 0 12px rgba(216, 173, 88, .16);
  opacity: .34;
}

.gallery__wall i::before { left: 5%; }
.gallery__wall i::after { right: 5%; }

.gallery__light {
  position: absolute;
  top: 0;
  bottom: 23%;
  left: -18%;
  z-index: 1;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(249, 215, 149, .08), transparent);
  filter: blur(15px);
  transform: skewX(-16deg);
  animation: museum-light 12s ease-in-out infinite;
  pointer-events: none;
}

@keyframes museum-light {
  0%, 18% { transform: translateX(0) skewX(-16deg); opacity: 0; }
  41% { opacity: .7; }
  82%, 100% { transform: translateX(580%) skewX(-16deg); opacity: 0; }
}

.gallery__plinth {
  position: absolute;
  right: 2.5%;
  bottom: 25.5%;
  left: 2.5%;
  z-index: 2;
  height: 8%;
  transform: perspective(760px) rotateX(62deg);
  transform-origin: center bottom;
  border: 1px solid rgba(216, 173, 88, .23);
  background:
    radial-gradient(ellipse at 75% 0, rgba(239, 199, 122, .14), transparent 54%),
    linear-gradient(180deg, #1a1d1e, #050707 86%);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, .53), 0 31px 49px rgba(0, 0, 0, .54);
}

.lineup {
  position: absolute;
  inset: 0 2.5%;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.exhibit {
  --product-size: 300px;
  --rise: 0%;
  --power-opacity: .5;
  position: relative;
  min-width: 0;
  scroll-snap-align: center;
  isolation: isolate;
}

.exhibit--s7 { --product-size: min(15vw, 216px); --rise: 0%; --power-opacity: .075; --progress: 2.5%; }
.exhibit--s9 { --product-size: min(17vw, 245px); --rise: 1.5%; --power-opacity: .105; --progress: 7%; }
.exhibit--s17 { --product-size: min(19vw, 274px); --rise: 3.5%; --power-opacity: .15; --progress: 28%; }
.exhibit--s19 { --product-size: min(20.2vw, 292px); --rise: 5.5%; --power-opacity: .2; --progress: 47.5%; }
.exhibit--s21 { --product-size: min(23vw, 334px); --rise: 9%; --power-opacity: .36; --progress: 100%; }

.exhibit__brand-mark {
  position: absolute;
  top: calc(14% - var(--rise));
  left: 50%;
  z-index: 0;
  width: 79%;
  height: 41%;
  object-fit: contain;
  object-position: center;
  transform: translateX(-50%);
  transform-origin: center;
  pointer-events: none;
}

.exhibit--s7 .exhibit__brand-mark {
  opacity: .09;
  filter: grayscale(.75) blur(1.6px);
  transform: translateX(-50%) scale(.78);
}

.exhibit--s9 .exhibit__brand-mark {
  opacity: .16;
  filter: grayscale(.62) sepia(.28) blur(.8px);
  transform: translateX(-50%) scale(.84);
}

.exhibit--s17 .exhibit__brand-mark {
  opacity: .23;
  filter: grayscale(.34) sepia(.48) blur(.45px);
  transform: translateX(-50%) scale(.9);
}

.exhibit--s19 .exhibit__brand-mark {
  opacity: .34;
  filter: grayscale(.08) sepia(.22) drop-shadow(0 0 15px rgba(216, 173, 88, .2));
  transform: translateX(-50%) scale(.96);
}

.exhibit--s21 .exhibit__brand-mark {
  top: calc(12% - var(--rise));
  width: 78%;
  opacity: .58;
  filter: saturate(1.2) drop-shadow(0 0 27px rgba(216, 173, 88, .48));
  transform: translateX(-50%) scale(1.04);
}

.exhibit:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 23%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(121, 158, 169, .12) 24%, rgba(216, 173, 88, .19) 78%, transparent);
}

.exhibit--s21::after {
  content: "";
  position: absolute;
  top: 4%;
  right: -9%;
  bottom: 22%;
  left: -9%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 52%, rgba(243, 215, 147, .27), rgba(216, 173, 88, .115) 34%, transparent 70%);
  filter: blur(27px);
  pointer-events: none;
}

.exhibit__era {
  position: absolute;
  top: 3.5%;
  right: 7%;
  left: 7%;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  pointer-events: none;
}

.exhibit__era span {
  color: rgba(240, 210, 142, .47);
  font-size: clamp(7px, .53vw, 10px);
  font-weight: 700;
  letter-spacing: .15em;
}

.exhibit__era b {
  color: rgba(241, 238, 231, .05);
  font-size: clamp(34px, 3.3vw, 64px);
  letter-spacing: -.08em;
}

.exhibit__power {
  position: absolute;
  top: calc(18% - var(--rise));
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  transform: translateX(-50%);
  color: rgba(241, 238, 231, var(--power-opacity));
  line-height: .75;
  pointer-events: none;
}

.exhibit__power strong {
  font-size: clamp(48px, 5.3vw, 102px);
  letter-spacing: -.09em;
}

.exhibit__power span {
  margin: 0 0 3px 8px;
  color: rgba(240, 210, 142, calc(var(--power-opacity) + .09));
  font-size: clamp(6px, .46vw, 9px);
  font-weight: 700;
  letter-spacing: .12em;
  white-space: nowrap;
}

.exhibit__spotlight {
  position: absolute;
  top: calc(5% - var(--rise));
  left: 50%;
  z-index: 1;
  width: 89%;
  height: 63%;
  transform: translateX(-50%);
  clip-path: polygon(40% 0, 60% 0, 97% 100%, 3% 100%);
  opacity: calc(.2 + var(--power-opacity));
  background: linear-gradient(180deg, rgba(248, 211, 141, .18), rgba(217, 171, 79, .03) 72%, transparent);
  filter: blur(4px);
}

.exhibit__step {
  position: absolute;
  right: 6%;
  bottom: calc(29% + var(--rise));
  left: 6%;
  z-index: 2;
  height: 8%;
  transform: perspective(560px) rotateX(60deg);
  transform-origin: center bottom;
  border: 1px solid rgba(216, 173, 88, calc(.14 + var(--power-opacity)));
  background: linear-gradient(180deg, rgba(42, 43, 42, .92), rgba(5, 7, 7, .98));
  box-shadow: 0 22px 28px rgba(0, 0, 0, .5), inset 0 0 18px rgba(216, 173, 88, .04);
}

.exhibit__year {
  position: absolute;
  bottom: calc(31.2% + var(--rise));
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  color: var(--gold-light);
  font-size: clamp(18px, 1.65vw, 32px);
  font-weight: 700;
  letter-spacing: .075em;
  line-height: 1;
  text-shadow: 0 0 14px rgba(216, 173, 88, .46), 0 2px 5px rgba(0, 0, 0, .9);
  pointer-events: none;
}

.miner-media {
  position: absolute;
  bottom: calc(35% + var(--rise));
  left: 50%;
  z-index: 4;
  width: var(--product-size);
  max-width: 116%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  filter:
    brightness(.84)
    contrast(1.08)
    saturate(.84)
    drop-shadow(-13px 24px 21px rgba(0, 0, 0, .67))
    drop-shadow(0 0 14px rgba(255, 204, 116, var(--power-opacity)));
}

.miner-media picture,
.miner-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.miner-media img {
  z-index: 2;
  object-fit: contain;
}

.exhibit__reflection {
  position: absolute;
  right: 10%;
  bottom: calc(25% + var(--rise));
  left: 10%;
  z-index: 2;
  height: 15%;
  transform: scaleY(-.32);
  transform-origin: center bottom;
  opacity: .095;
  filter: blur(1.1px) sepia(.18) brightness(.68);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .78), transparent 79%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .78), transparent 79%);
}

.exhibit__reflection img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.exhibit__label {
  position: absolute;
  right: 8%;
  bottom: 3.4%;
  left: 8%;
  z-index: 6;
  min-height: 19.5%;
  padding: 13px 15px 11px;
  border-top: 1px solid rgba(216, 173, 88, calc(.28 + var(--power-opacity)));
  background: linear-gradient(90deg, rgba(216, 173, 88, calc(var(--power-opacity) * .28)), transparent 48%);
}

.exhibit__label p {
  margin: 0 0 5px;
  color: rgba(240, 210, 142, .61);
  font-size: clamp(6px, .4vw, 8px);
  font-weight: 700;
  letter-spacing: .14em;
}

.exhibit__label h2 {
  margin: 0 0 10px;
  font-size: clamp(17px, 1.35vw, 27px);
  letter-spacing: -.038em;
  line-height: 1;
}

.exhibit__label > .exhibit__metric {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 7px;
}

.exhibit__label > .exhibit__metric span,
.exhibit__label > .exhibit__metric strong,
.exhibit__label small {
  font-size: clamp(5.5px, .36vw, 7px);
  line-height: 1.35;
}

.exhibit--s21 .exhibit__step {
  right: 2.5%;
  left: 2.5%;
  height: 10%;
  border-color: rgba(243, 215, 147, .55);
  background:
    radial-gradient(ellipse at 50% 0, rgba(216, 173, 88, .2), transparent 58%),
    linear-gradient(180deg, rgba(54, 48, 35, .96), rgba(5, 7, 7, .99));
  box-shadow:
    0 24px 35px rgba(0, 0, 0, .6),
    inset 0 0 24px rgba(216, 173, 88, .13),
    0 0 24px rgba(216, 173, 88, .16);
}

.exhibit--s21 .miner-media {
  filter:
    brightness(.96)
    contrast(1.1)
    saturate(.94)
    drop-shadow(-15px 25px 22px rgba(0, 0, 0, .72))
    drop-shadow(0 0 38px rgba(255, 204, 116, .58));
}

.exhibit--s21 .exhibit__spotlight {
  width: 118%;
  height: 70%;
  opacity: .78;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 220, 151, .3), rgba(216, 173, 88, .09) 46%, transparent 72%);
  clip-path: none;
  filter: blur(14px);
}

.exhibit--s21 .exhibit__label {
  border-top-color: rgba(243, 215, 147, .82);
  background:
    linear-gradient(90deg, rgba(216, 173, 88, .16), transparent 62%),
    linear-gradient(180deg, rgba(216, 173, 88, .035), transparent);
  box-shadow: inset 0 8px 24px rgba(216, 173, 88, .04);
}

.exhibit__label > .exhibit__metric span {
  color: rgba(241, 238, 231, .28);
  font-weight: 700;
  letter-spacing: .12em;
}

.exhibit__label > .exhibit__metric strong {
  color: rgba(241, 238, 231, .7);
  font-weight: 400;
  letter-spacing: .025em;
}

.exhibit__progress {
  position: relative;
  display: block;
  height: 2px;
  margin-top: 7px;
  overflow: hidden;
  background: rgba(241, 238, 231, .085);
}

.exhibit__progress i {
  display: block;
  width: var(--progress);
  min-width: 4px;
  height: 100%;
  background: linear-gradient(90deg, rgba(107, 163, 183, .78), var(--gold-light));
  box-shadow: 0 0 8px rgba(216, 173, 88, .46);
}

.exhibit__label small {
  display: block;
  min-height: 2.7em;
  margin-top: 7px;
  color: rgba(241, 238, 231, .34);
  letter-spacing: .035em;
}

.gallery__engraving {
  position: absolute;
  right: 3.5%;
  bottom: 1.2%;
  left: 3.5%;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  color: rgba(241, 238, 231, .15);
  font-size: 6px;
  letter-spacing: .18em;
  pointer-events: none;
}

.gallery__engraving b { color: rgba(216, 173, 88, .32); }

.fan {
  --x: 50%;
  --y: 50%;
  --w: 18%;
  --h: 18%;
  --speed: 3s;
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 3;
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: var(--fan-opacity, .61);
  pointer-events: none;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse, black 0 93%, rgba(0, 0, 0, .86) 96%, transparent 100%);
  mask-image: radial-gradient(ellipse, black 0 93%, rgba(0, 0, 0, .86) 96%, transparent 100%);
}

.fan__rotor {
  position: absolute;
  inset: .7%;
  border-radius: 50%;
  background: radial-gradient(circle, #030405 0 13%, rgba(4, 5, 6, .94) 14% 20%, transparent 21%);
  animation: rotor-spin var(--speed) linear infinite;
}

.fan__blade {
  position: absolute;
  top: 0;
  left: 39.5%;
  width: 21%;
  height: 50%;
  transform: rotate(calc(var(--blade-index) * 51.428571deg));
  transform-origin: 50% 100%;
}

.fan__blade::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: rotate(19deg) skewX(-9deg);
  border-radius: 80% 22% 72% 18%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .99), rgba(18, 19, 20, .94));
  box-shadow: inset -1px -2px 3px rgba(255, 255, 255, .05);
}

@keyframes rotor-spin { to { transform: rotate(360deg); } }

.fan--s7-front { --x: 33.7%; --y: 61.7%; --w: 23.2%; --h: 28.4%; --speed: 3.36s; --fan-opacity: .58; }
.fan--s9-front { --x: 19.6%; --y: 58.8%; --w: 16.4%; --h: 27.2%; --speed: 3.18s; --fan-opacity: .57; }
.fan--s17-top { --x: 61.9%; --y: 42.8%; --w: 18.4%; --h: 21.7%; --speed: 3.08s; --fan-opacity: .57; }
.fan--s17-bottom { --x: 61.9%; --y: 66.7%; --w: 18.4%; --h: 21.7%; --speed: 3.26s; --fan-opacity: .57; }
.fan--s19-front-a { --x: 23.3%; --y: 48.9%; --w: 11.8%; --h: 21%; --speed: 2.95s; --fan-opacity: .6; }
.fan--s19-front-b { --x: 23.4%; --y: 70.1%; --w: 11.8%; --h: 20.8%; --speed: 3.12s; --fan-opacity: .6; }
.fan--s21-top { --x: 20.2%; --y: 50.8%; --w: 13.8%; --h: 17%; --speed: 2.76s; --fan-opacity: .6; }
.fan--s21-bottom { --x: 22.4%; --y: 74.2%; --w: 13.4%; --h: 15.1%; --speed: 2.92s; --fan-opacity: .6; }  /* 11.08.2026: прежние 15.5x19.3 при .64 выходили на внешний обод и корпус. Центр снят по кадру витрины (22.4/74.2), размер = 95% внутренней решётки */
     центр выровнен по верхнему вентилятору, размер приведён к его пропорции */

.museum__mobile-hint { display: none; }

.museum[data-paused="true"] .fan__rotor,
.museum[data-paused="true"] .gallery__light,
.exhibit:not([data-in-view="true"]) .fan__rotor {
  animation-play-state: paused;
}

@media (max-width: 1100px) {
  .gallery__world { min-width: 100%; }
  .lineup { inset-inline: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gallery__wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .exhibit--s7 { --product-size: min(16.5vw, 182px); }
  .exhibit--s9 { --product-size: min(18vw, 198px); }
  .exhibit--s17 { --product-size: min(20vw, 220px); }
  .exhibit--s19 { --product-size: min(21vw, 231px); }
  .exhibit--s21 { --product-size: min(23vw, 253px); }

  .museum__manifesto strong span { font-size: clamp(11px, 1.4vw, 16px); }
  .museum__manifesto strong em { font-size: clamp(35px, 4.2vw, 49px); }
  .museum__manifesto small { font-size: 5px; }
}

@media (max-width: 700px) {
  .museum { min-height: 680px; }

  .museum__header {
    top: 17px;
    left: 18px;
    width: calc(100% - 36px);
    text-align: center;
  }

  .museum__header p { font-size: 5.5px; }
  .museum__header h1 { font-size: clamp(28px, 8.8vw, 38px); }
  .museum__header span { margin-top: 7px; font-size: 6px; }
  .museum__growth { display: none; }

  .museum__manifesto {
    top: 98px;
    width: calc(100% - 24px);
    margin-inline: auto;
  }

  .museum__manifesto strong {
    justify-items: center;
  }

  .museum__manifesto strong span { font-size: 8px; letter-spacing: .11em; }
  .museum__manifesto strong em { font-size: 27px; }
  .museum__manifesto small { display: none; }

  .gallery {
    top: 94px;
    bottom: 17px;
  }

  /* приказ шефа 31.07: модельный ряд без прокрутки, все пять в кадре */
  .gallery__world { min-width: 100%; }
  .lineup { inset-inline: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gallery__wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gallery__plinth { right: 14px; left: 14px; }

  .exhibit--s7 { --product-size: min(15vw, 92px); }
  .exhibit--s9 { --product-size: min(16.5vw, 100px); }
  .exhibit--s17 { --product-size: min(18vw, 112px); }
  .exhibit--s19 { --product-size: min(19.5vw, 120px); }
  .exhibit--s21 { --product-size: min(21vw, 132px); }

  .exhibit__era { top: 4%; }
  .exhibit__power strong { font-size: 68px; }

  .exhibit__label {
    right: 22px;
    bottom: 3.4%;
    left: 22px;
    min-height: 20.5%;
  }

  .exhibit__label h2 { font-size: 21px; }

  .exhibit__label > .exhibit__metric span,
  .exhibit__label > .exhibit__metric strong,
  .exhibit__label small { font-size: 6.2px; }

  .gallery__engraving { display: none; }

  .museum__mobile-hint {
    position: absolute;
    right: 0;
    bottom: 8px;
    left: 0;
    z-index: 24;
    display: block;
    margin: 0;
    color: rgba(241, 238, 231, .25);
    font-size: 6px;
    font-weight: 700;
    letter-spacing: .16em;
    text-align: center;
    pointer-events: none;
  }
}

@media (max-height: 720px) {
  .museum__header h1 { font-size: clamp(28px, 2.7vw, 45px); }
  .museum__header p { display: none; }
  .gallery { top: 77px; }
  .exhibit__label { min-height: 21%; }
  .exhibit__label small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fan__rotor,
  .gallery__light { animation: none; }
}

/* ================= ТЕЛЕФОН: СТАТИЧНЫЙ РЯД БЕЗ ПРОКРУТКИ =================
   Приказ шефа 31.07: все пять машин стоят в кадре одновременно, ряд не ездит.
   Пять колонок по ~70px не держат полную табличку, поэтому на телефоне
   остаётся только модель, год и мощность. */
@media (max-width: 700px) {
  .museum { min-height: 560px; }
  .museum__ceiling { right: 0; left: 0; }
  .museum__floor { right: 0; left: 0; }

  .exhibit__label {
    right: 2%;
    left: 2%;
    padding: 7px 3px 6px;
    text-align: center;
  }

  .exhibit__label p,
  .exhibit__label small,
  .exhibit__progress { display: none; }

  .exhibit__label h2 {
    margin: 0 0 5px;
    font-size: 9.5px;
    letter-spacing: -.01em;
    line-height: 1.05;
  }

  .exhibit__metric {
    display: block;
    line-height: 1.25;
  }

  .exhibit__metric span { display: none; }

  .exhibit__metric strong {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .01em;
  }

  .exhibit__power { top: 7%; }
  .exhibit__power strong { font-size: 26px; }
  .exhibit__power span { font-size: 6px; }
  .exhibit__year { font-size: 11px; letter-spacing: .04em; }
  .exhibit__brand-mark { opacity: .12; }
}

/* ================= ПРАВКИ ШЕФА · ТРИ УТВЕРЖДЕНИЯ =================
   Заголовок зала: марка, наследие, инфраструктура. Три строки подряд,
   без абзацев. Ряд стоит статично, машины не наезжают на подножки,
   знак бренда меньше и вписан над каждой машиной. */

.museum__header { width: min(58%, 780px); }

.museum__header .museum__mark {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: clamp(9px, .62vw, 13px);
  font-weight: 800;
  letter-spacing: .3em;
}

.museum__header h1 {
  margin: 0;
  font-size: clamp(26px, 2.5vw, 50px);
  line-height: .96;
  letter-spacing: -.045em;
}

.museum__header .museum__claim {
  max-width: 34ch;
  margin: 14px 0 0;
  color: rgba(243, 215, 147, .92);
  font-size: clamp(14px, 1.15vw, 25px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: none;
}

/* зал ниже заголовка */
.gallery {
  top: clamp(150px, 22vh, 260px);
  overflow: hidden;
}

/* никакой прокрутки: мир ровно по кадру, декоративные плоскости не вылезают */
.gallery__world { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.museum__ceiling, .museum__floor { right: 0; left: 0; }

/* машины стоят выше подножек, знак бренда компактнее */
.miner-media { bottom: calc(37.5% + var(--rise)); }
.exhibit__brand-mark { top: calc(3% - var(--rise)); width: 44%; height: 22%; }
.exhibit--s21 .exhibit__brand-mark { top: calc(2.5% - var(--rise)); width: 46%; }

/* таблички в одну линию */
.exhibit__label {
  top: auto;
  bottom: 2.5%;
  min-height: 0;
  height: 15.5%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 11px 15px 9px;
}

.exhibit__label h2 { margin: 0 0 7px; }

/* последний экспонат: софит сильнее и холоднее */
.exhibit--s21 .exhibit__spotlight {
  width: 132%;
  height: 82%;
  opacity: 1;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(186, 226, 255, .42), rgba(120, 186, 255, .16) 40%, transparent 74%),
    radial-gradient(ellipse at 50% 58%, rgba(255, 226, 163, .26), transparent 68%);
  filter: blur(18px);
}

.exhibit--s21::after {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(168, 214, 255, .3), rgba(120, 186, 255, .1) 44%, transparent 72%),
    radial-gradient(ellipse at 50% 52%, rgba(243, 215, 147, .2), transparent 66%);
}

@media (max-width: 700px) {
  .museum__header { width: calc(100% - 32px); }
  .museum__header .museum__claim { font-size: 12px; margin-top: 8px; }
  .gallery { top: clamp(120px, 18vh, 170px); }
  .exhibit__label { height: 19%; padding: 7px 3px 6px; }
  .exhibit__brand-mark { width: 40%; }
}

/* цифры мощности над машиной, крупно и читаемо */
.exhibit__power { top: calc(24% - var(--rise)); }
.exhibit { --power-opacity: .62; }

/* ================= КОМПОЗИЦИЯ ЗАЛА · ЧИСТОВИК =================
   Было: высокие пустые ниши, машины мелкие, таблички далеко внизу, поверх
   всего полупрозрачные гигантские цифры. Стало: плотный ряд, машина крупная,
   год на подножке, характеристика сразу под ней, воздух только по периметру. */

/* призрачные цифры убраны: терахеши живут в табличке, где их видно */
.exhibit__power { display: none; }

/* знак бренда - тонкий водяной знак в верху ниши */
.exhibit__brand-mark {
  top: 3%;
  width: 38%;
  height: 17%;
  opacity: .14;
  filter: grayscale(.4);
}
.exhibit--s21 .exhibit__brand-mark { opacity: .3; filter: none; }

/* ряд занимает больше кадра, ниши ниже */
.gallery { top: clamp(140px, 20vh, 230px); bottom: 26px; }
.lineup { inset: 0 1.5%; }

/* машины крупнее и стоят на подножке */
.exhibit { --product-size: min(19vw, 250px); }
.exhibit--s7 { --product-size: min(13vw, 168px); }
.exhibit--s9 { --product-size: min(15vw, 196px); }
.exhibit--s17 { --product-size: min(17vw, 222px); }
.exhibit--s19 { --product-size: min(18.5vw, 240px); }
.exhibit--s21 { --product-size: min(20.5vw, 268px); }
.miner-media { bottom: calc(40% + var(--rise)); }

/* год на подножке, ближе к машине */
.exhibit__year { bottom: calc(33% + var(--rise)); font-size: clamp(16px, 1.5vw, 27px); }

/* табличка: имя и одна строка характеристик, ровная линия у всех пяти */
.exhibit__label {
  top: auto;
  bottom: 4%;
  right: 6%;
  left: 6%;
  min-height: 0;
  height: 21%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px;
}

.exhibit__label h2 { margin: 0; font-size: clamp(15px, 1.25vw, 24px); letter-spacing: -.03em; }
.exhibit__label small { color: #6f6c66; font-size: clamp(7px, .55vw, 10px); letter-spacing: .12em; }
.exhibit__metric { display: flex; align-items: baseline; gap: 8px; }
.exhibit__metric span { color: #6f6c66; font-size: clamp(7px, .5vw, 9px); letter-spacing: .18em; }
.exhibit__metric strong { color: #f4dda4; font-size: clamp(12px, 1vw, 18px); font-weight: 800; letter-spacing: -.01em; }

@media (max-width: 700px) {
  .exhibit__label { height: 24%; right: 3%; left: 3%; padding: 8px 6px; gap: 4px; }
  .exhibit__label h2 { font-size: 10px; }
  .exhibit__metric { flex-direction: column; gap: 1px; align-items: flex-start; }
  .exhibit__metric strong { font-size: 8.5px; }
  .exhibit__year { font-size: 12px; }
  .exhibit__brand-mark { width: 34%; }
}

/* таблички строго на одной линии: частные правила ниш не должны их двигать */
.exhibit .exhibit__label {
  bottom: 4% !important;
  height: 21% !important;
  top: auto !important;
}

/* имя модели у всех пяти начинается с одной линии, независимо от того,
   есть ли под ним список ревизий */
.exhibit .exhibit__label { justify-content: flex-start !important; }
.exhibit .exhibit__label h2 { order: 1; }
.exhibit .exhibit__metric { order: 2; }
.exhibit .exhibit__label small { order: 3; margin-top: 2px; }

/* ================= ТАБЛИЧКИ: ЧИТАЕМЫЕ НАДПИСИ =================
   Было мелко и серо. Стало: имя модели крупно, характеристика одной строкой
   и с контрастом, список ревизий снят - он дублирует то, что и так есть
   на сайте, а в зале только мешает. */
.exhibit .exhibit__label small { display: none !important; }

.exhibit .exhibit__label {
  height: 17% !important;
  padding: 12px 16px !important;
  gap: 8px !important;
  border-top-width: 2px;
}

.exhibit .exhibit__label h2 {
  color: #f6f2ea;
  font-size: clamp(16px, 1.35vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.exhibit .exhibit__metric span {
  color: #8d8a83;
  font-size: clamp(7.5px, .55vw, 10px);
  font-weight: 800;
  letter-spacing: .2em;
}

.exhibit .exhibit__metric strong {
  color: #f4dda4;
  font-size: clamp(13px, 1.05vw, 19px);
  font-weight: 800;
}

.exhibit--s21 .exhibit__label h2 { color: #fff8ea; }

/* заголовок зала: три утверждения с ясной иерархией */
.museum__header .museum__mark { font-size: clamp(10px, .7vw, 14px); letter-spacing: .34em; }
.museum__header h1 { font-size: clamp(28px, 2.9vw, 56px); line-height: .94; }
.museum__header .museum__claim {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(231, 199, 125, .22);
  color: #f4dda4;
  font-size: clamp(15px, 1.25vw, 27px);
  font-weight: 800;
  letter-spacing: -.015em;
}

@media (max-width: 700px) {
  .exhibit .exhibit__label { height: 20% !important; padding: 7px 5px !important; gap: 3px !important; }
  .exhibit .exhibit__label h2 { font-size: 10.5px; }
  .exhibit .exhibit__metric strong { font-size: 9px; }
}

/* характеристика не переносится: одна строка у всех пяти */
.exhibit .exhibit__metric { flex-wrap: nowrap; white-space: nowrap; }
.exhibit--s21 .exhibit__metric strong { font-size: clamp(12px, .98vw, 18px); }

/* 03.08, круг 2 (M18): «одна строка у всех пяти» верна только на широком
   зале. На телефоне сцена 356px, табличка под каждый экспонат 64.9px, а
   строка характеристики при nowrap рисуется на 82.5…124.7px и лезет к
   соседям: S7→S9 13.4px, S9→S17 12.0px, S17→S19 13.8px, S19→S21 22.5px;
   у S21 (кегль 12px из строки выше) хвост «200 TH/s · 17.5 J/TH» уходил
   на x=413.4 при ширине сцены 356 - на 57.4px за правый край.
   Оба правила выше объявлены вне медиазапроса и перебивали мобильный
   блок, поэтому повторяем их здесь ниже и с !important: на телефоне
   строка переносится и садится в плинтус. Сами экспонаты, фотографии и
   движение сцены не трогаются. */
@media (max-width: 700px) {
  .exhibit .exhibit__metric {
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
  .exhibit .exhibit__metric strong,
  .exhibit--s21 .exhibit__metric strong {
    font-size: 8px !important;
    line-height: 1.15;
    overflow-wrap: anywhere;
    min-width: 0;
  }
}

/* v101: after the parent crops the empty upper third, the approved mark sits
   in the meaningful band between each year and its model plaque. */
.exhibit__brand-mark,
.exhibit--s7 .exhibit__brand-mark,
.exhibit--s9 .exhibit__brand-mark,
.exhibit--s17 .exhibit__brand-mark,
.exhibit--s19 .exhibit__brand-mark,
.exhibit--s21 .exhibit__brand-mark {
  top: auto !important;
  bottom: calc(23% + var(--rise)) !important;
  width: 34% !important;
  height: 7.5% !important;
  opacity: .72 !important;
  filter: none !important;
  object-fit: contain;
}

@media (max-width: 700px) {
  .exhibit__brand-mark,
  .exhibit--s7 .exhibit__brand-mark,
  .exhibit--s9 .exhibit__brand-mark,
  .exhibit--s17 .exhibit__brand-mark,
  .exhibit--s19 .exhibit__brand-mark,
  .exhibit--s21 .exhibit__brand-mark {
    bottom: calc(24.5% + var(--rise)) !important;
    width: 38% !important;
    height: 7% !important;
  }
}

/* ================= ТАБЛИЧКА В УЗКОМ КАДРЕ: КАК НА ДЕСКТОПЕ =================
   03.08 (M19). Родитель показывает зал на телефоне так: iframe получает
   логический кадр 760px и ужимается до ширины экрана (358/760 = 0.4711).
   Кадрирование и композиция при этом совпали с десктопом, а таблички - нет:
   кегли и отступы таблички заданы через clamp() с ПИКСЕЛЬНЫМ полом
   (16px имя, 13px характеристика, 12px у S21, padding 12/16px, gap 8px).
   На десктопе кадр 1358px и работает vw-часть: имя 18.33px = 1.35% ширины
   кадра. В кадре 760px пол не даёт кеглю уменьшиться: 16px = 2.11% ширины,
   то есть текст относительно в 1.8 раза крупнее - имя модели ломалось на
   две строки, а строка характеристики уходила за табличку и срезалась
   («200 TH/s · T» вместо «UP TO 200 TH/s · 17.5 J/TH»).
   Ниже ширины десктопного кадра считаем кегли и внутренние отступы той же
   долей кадра, что и на десктопе: 1.35vw имя, 1.05vw характеристика,
   0.98vw у S21, 0.55vw «UP TO», padding 0.884vw/1.178vw, gap 0.589vw.
   Границу берём ровно 1358px - на ней vw-значения совпадают с
   пиксельными до сотых, поэтому принятый десктопный кадр не меняется.
   Ниже 700px по-прежнему работает телефонная ветка зала.
   Экспонаты, фотографии, подиум и движение сцены не трогаются.
   Отдельная грабля: строка характеристики стоит не во флексе, а в сетке
   .exhibit__label > .exhibit__metric с колонкой «48px 1fr» под «UP TO».
   48px не зависят от ширины кадра, поэтому в кадре 760px они съедали 44%
   внутренней ширины таблички против 24% на десктопе - именно они, а не
   кегль, выталкивали характеристику за рамку. Колонку тоже переводим в
   долю кадра: 48/1358 = 3.5346vw, зазор сетки 7/1358 = 0.5155vw.
   Проверка на 1358px: padding 12.005/15.997px, gap 7.999px, имя 18.333px,
   «UP TO» 7.469px, характеристика 14.259px, S21 13.308px, колонка 48.0px,
   зазор 7.0px - до сотых те же числа, что и без этого блока. */
@media (min-width: 701px) and (max-width: 1358px) {
  .museum .exhibit .exhibit__label {
    padding: 0.884vw 1.178vw !important;
    gap: 0.589vw !important;
  }
  .museum .exhibit .exhibit__label h2 { font-size: 1.35vw !important; }
  .museum .exhibit .exhibit__label > .exhibit__metric {
    grid-template-columns: 3.5346vw 1fr;
    gap: 0.5155vw;
  }
  .museum .exhibit .exhibit__metric span { font-size: 0.55vw !important; }
  .museum .exhibit .exhibit__metric strong { font-size: 1.05vw !important; }
  .museum .exhibit--s21 .exhibit__metric strong { font-size: 0.98vw !important; }
}