/* Hero composition: copy, approved scene and a dedicated inspection rail. */
main > .hero { padding: 0; background: var(--paper); }
.hero-stage {
  --hero-gutter: max(var(--gutter), calc((100vw - 1940px) / 2));
  --hero-content-width: min(calc(100vw - 2 * var(--gutter)), 1940px);
  --hero-copy-width: clamp(530px, 40.6vw, 800px);
  --hero-rail-width: clamp(176px, 10.5vw, 220px);
  --hero-height: clamp(820px, calc(100svh - 86px), 1120px);
  --hero-art-height: min(calc(var(--hero-height) * 1.03), calc((var(--hero-content-width) - var(--hero-copy-width) - var(--hero-rail-width) - 16px) / .70));
  position: relative;
  height: var(--hero-height);
  min-height: 0;
  max-height: none;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}
.hero-art-frame {
  position: absolute;
  top: 53%;
  right: calc(var(--hero-gutter) + var(--hero-rail-width) + 32px - var(--hero-art-height) * .1976);
  height: var(--hero-art-height);
  width: auto;
  aspect-ratio: 1586 / 992;
  transform: translateY(-50%);
  z-index: 0;
}
.hero-water { display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.hero-art-frame::before,
.hero-art-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-art-frame::before { background: linear-gradient(90deg, var(--paper), transparent 21%); }
.hero-art-frame::after { background: linear-gradient(270deg, var(--paper), transparent 10%), linear-gradient(0deg, var(--paper), transparent 4%); }
.hero-content { position: relative; z-index: 2; height: 100%; display: block; pointer-events: none; }
.hero-copy { position: relative; width: var(--hero-copy-width); max-width: 100%; padding-top: clamp(44px, 5.5vh, 80px); pointer-events: auto; }
.hero-kicker { max-width: 100%; font-size: 11px; line-height: 1.6; margin: 0 0 30px; }
.hero-title { width: 100%; max-width: none; font-size: clamp(68px, 4.9vw, 100px); font-weight: 400; line-height: 1.04; letter-spacing: -.045em; text-wrap: initial; }
.hero-main { display: block; }
.hero-secondary { display: block; margin-top: 22px; font-size: clamp(31px, 2.08vw, 40px); line-height: 1.22; letter-spacing: -.035em; }
.hero-secondary br { display: none; }
.hero-source-copy { max-width: 650px; margin-top: 32px; color: var(--muted); font-size: clamp(17px, .96vw, 20px); line-height: 1.6; }
.hero-sub-line { display: block; }
.hero-sub-line:first-child { margin-bottom: 10px; font-size: 14px; letter-spacing: .015em; }
.hero-neural { margin: 13px 0 0; color: var(--ink); font-size: clamp(15px, .84vw, 17px); line-height: 1.5; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; margin-top: 34px; }
.hero-actions .button { min-height: 58px; font-size: 16px; }
.hero-actions .text-link { background: none; font-size: 15px; }
.hero-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.hero-rating > span { color: var(--ink); font-size: 14px; font-weight: 500; }
.hero-rating i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.hero-inspector { position: absolute; z-index: 3; top: 12%; right: var(--hero-gutter); width: var(--hero-rail-width); color: var(--ink); background: none; border: 0; }
.hero-inspector-inner { width: 100%; max-width: none; margin: 0; padding: 0; display: block; }
.ice-invitation { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 20px; color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; line-height: 1.5; }
.ice-invitation span { font-size: 17px; font-weight: 400; }
.hero-layers { position: static; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: calc(var(--hero-height) * .58); gap: 18px; }
.hero-layers button { position: relative; display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; flex-shrink: 0; gap: 9px; width: 100%; min-height: 60px; padding: 12px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #A9B4BA; border-radius: 0; box-shadow: none; text-align: left; font: 500 13px/1.4 var(--body); cursor: pointer; transition: color 200ms ease, border-color 200ms ease; }
.hero-layers button::before { content: ""; display: block; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--brass-metal); transition: width 300ms ease; }
.hero-layers .layer-number { font: 400 22px/1 var(--head); letter-spacing: -.06em; color: #66747C; transition: color 200ms ease; }
.hero-layers button i { margin-left: auto; font-size: 19px; line-height: 1; font-weight: 400; font-style: normal; transition: transform 200ms ease; }
.hero-layers button:hover,
.hero-layers button:focus-visible,
.hero-layers button[aria-pressed="true"] { background: transparent; border-color: #7A898F; color: var(--ink); box-shadow: none; }
.hero-layers button[aria-pressed="true"] .layer-number { color: #81592D; }
.hero-layers button[aria-pressed="true"]::before { width: 100%; }
.hero-layers button[aria-pressed="true"] i { transform: rotate(45deg); }
.hero-layers button:focus-visible { outline: 2px solid var(--link); outline-offset: 5px; }
.ice-caption { position: static; width: 100%; height: 170px; min-height: 170px; margin-top: 22px; padding: 13px 0 0; border: 0; background: none; pointer-events: auto; display: block; }
.ice-caption-index { display: block; margin: 0 0 10px; color: #81592D; font: 400 33px/1 var(--head); letter-spacing: -.055em; }
.ice-caption-index span { color: var(--muted); font: 500 10px/1 var(--body); letter-spacing: .1em; }
#ice-title { margin: 0; color: var(--ink); font-family: var(--head); font-size: 17px; font-weight: 500; line-height: 1.24; letter-spacing: -.035em; }
#ice-description { min-height: 0; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
@media (min-width: 1280px) and (max-height: 950px) {
  .hero-copy { padding-top: 42px; }
  .hero-title { font-size: clamp(68px, 4.9vw, 100px); }
  .hero-secondary { font-size: clamp(31px, 2.08vw, 40px); margin-top: 18px; }
  .hero-kicker { margin-bottom: 24px; }
  .hero-source-copy { margin-top: 22px; }
  .hero-actions { margin-top: 30px; }
  .hero-rating { margin-top: 24px; }
  .hero-layers { height: calc(var(--hero-height) * .54); }
}
@media (max-width: 1500px) and (min-width: 1280px) {
  .hero-copy { padding-top: 60px; }
  .hero-art-frame::before { background: linear-gradient(90deg, var(--paper), transparent 42%); }
  .hero-kicker { font-size: 9px; }
  .hero-source-copy { max-width: 530px; }
  .hero-actions { gap: 22px; }
  .hero-actions .button { font-size: 15px; padding: 16px 24px; }
  .hero-actions .text-link { font-size: 14px; }
  .hero-layers button { padding: 12px 0; font-size: 11px; gap: 5px; grid-template-columns: 28px 1fr 14px; }
  .hero-layers .layer-number { font-size: 18px; }
  .ice-caption { padding-left: 0; padding-right: 0; }
}
@media (max-width: 1279px) {
  .hero-stage { height: auto; min-height: 0; padding: 46px 32px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 20px 28px; }
  .hero-content { grid-column: 1 / -1; width: 100%; height: auto; margin: 0; }
  .hero-copy { width: 700px; padding: 0; }
  .hero-title { font-size: 65px; }
  .hero-secondary { font-size: 31px; }
  .hero-source-copy { max-width: 560px; font-size: 14px; }
  .hero-actions .button { font-size: 13px; }
  .hero-art-frame { position: relative; grid-column: 1; grid-row: 2; justify-self: end; align-self: center; width: 144%; height: auto; top: auto; right: auto; margin-right: -12%; transform: none; }
  .hero-inspector { position: relative; grid-column: 2; grid-row: 2; align-self: center; inset: auto; width: 100%; }
  .hero-layers { height: 320px; }
  .hero-layers button { font-size: 11px; }
  .ice-caption { padding-left: 0; padding-right: 0; height: 150px; min-height: 150px; }
}
/* Landscape tablets: keep the iceberg in the first view and reserve a
   separate control strip below the copy instead of a mostly empty top row. */
@media (min-width: 761px) and (max-width: 1279px) {
  .hero-stage { display: block; min-height: 820px; padding: 42px var(--gutter) 34px; }
  .hero-content { position: relative; z-index: 2; width: 100%; }
  .hero-copy { width: min(60vw, 630px); }
  .hero-title { font-size: clamp(55px, 5.9vw, 70px); }
  .hero-source-copy { max-width: 560px; }
  .hero-art-frame {
    position: absolute; top: 45%; right: -10%; width: min(77vw, 820px);
    height: auto; margin: 0; transform: translateY(-50%);
  }
  .hero-art-frame::before { background: linear-gradient(90deg, var(--paper), transparent 29%); }
  .hero-inspector { position: relative; z-index: 3; width: 100%; margin-top: 34px; }
  .ice-invitation { margin: 0 0 12px; }
  .hero-layers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: auto; gap: 9px; }
  .hero-layers button { min-height: 55px; }
  .ice-caption { width: 100%; height: auto; min-height: 0; margin-top: 10px; padding: 10px 0 0; }
  #ice-description { font-size: 12px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .hero-stage { min-height: 0; }
  .hero-copy { width: 55vw; }
  .hero-title { font-size: clamp(52px, 6.8vw, 61px); }
  .hero-secondary { font-size: 28px; }
  .hero-art-frame { top: 43%; width: 72vw; right: -11%; }
  .hero-inspector { margin-top: 46px; }
}
@media (max-width: 760px) {
  .hero-stage { display: flex; flex-direction: column; gap: 0; padding: 34px 0 38px; }
  .hero-content { order: 0; width: calc(100% - 44px); margin: 0 auto; }
  .hero-copy { width: 100%; }
  .hero-kicker { font-size: 8px; margin-bottom: 22px; }
  .hero-title { font-size: clamp(39px, 9vw, 62px); line-height: 1.08; }
  .hero-secondary { font-size: 25px; margin-top: 18px; max-width: 450px; }
  .hero-source-copy { margin-top: 24px; font-size: 12px; max-width: 430px; }
  .hero-sub-line:first-child { font-size: 10px; }
  .hero-actions { margin-top: 24px; gap: 20px; }
  .hero-actions .button { min-height: 50px; padding: 14px 20px; font-size: 12px; }
  .hero-actions .text-link { font-size: 11px; }
  .hero-rating { margin-top: 20px; font-size: 10px; }
  .hero-rating > span { font-size: 12px; }
  .hero-art-frame { order: 1; position: relative; align-self: flex-start; justify-self: auto; flex-shrink: 0; width: 780px; height: auto; margin: 14px 0 0 calc(50% - 470px); left: auto; right: auto; }
  .hero-art-frame::before { background: linear-gradient(180deg, var(--paper), transparent 10%); }
  .hero-inspector { order: 2; width: calc(100% - 44px); margin: 12px auto 0; }
  .ice-invitation { font-size: 9px; margin-bottom: 16px; }
  .hero-layers { display: grid; grid-template-columns: 1fr 1fr; height: auto; gap: 10px; }
  .hero-layers button { min-height: 50px; font-size: 11px; padding: 12px 0; gap: 7px; }
  .hero-layers .layer-number { font-size: 18px; }
  .ice-caption { margin-top: 20px; height: 145px; min-height: 145px; padding: 16px 0 0; }
  #ice-title { font-size: 14px; }
  #ice-description { font-size: 12px; max-width: 48ch; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-layers button,
  .hero-layers button::before,
  .hero-layers button i { transition: none; }
}
@media print { .hero-inspector { display: none; } }

/* верхний край картинки растворяем в фоне: иначе на широком экране виден стык
   между Paper (#F6F7F7) и собственным тоном снимка (#E7E9ED) */
.hero-water{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 52px);mask-image:linear-gradient(180deg,transparent 0,#000 52px)}

/* <picture> вокруг картинки первого экрана: по умолчанию это inline-элемент и не растянется на весь фрейм. */
.hero-art-frame picture{display:block;width:100%;height:100%}