.k-soderzhaniyu{
  position: fixed; top: -100px; left: 1rem; z-index: 120;
  background: var(--zelenyy); color: var(--krem);
  padding: 0.7em 1.1em;
  font-weight: 700; font-size: var(--k-metka);
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  transition: top 180ms var(--hod-out);
}
.k-soderzhaniyu:focus-visible{ top: 1rem; }

.list{
  position: relative;
  min-height: 100vh;

  padding: calc(var(--rost-shapki, 110px) + var(--vozduh-metki)) var(--pole-ekrana) clamp(3.4rem, 8vh, 6rem);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  --kadr: calc(100vh - var(--rost-shapki, 110px) - var(--vozduh-metki) - clamp(3.4rem, 8vh, 6rem));
}
.list__nutro{ margin-block: auto; position: relative; z-index: 1; width: 100%; }

.list[data-list="krem"]{ background: var(--krem); color: var(--chernila); --volos: rgba(22, 98, 58, 0.17); --metka: var(--zelenyy); }
.list[data-list="krasnyy"]{ background: var(--krasnyy); color: var(--belyy); --volos: rgba(255, 247, 227, 0.36); --metka: var(--krem); }

.list[data-list="glubokiy"]{ background: var(--barhat); background-attachment: fixed; color: var(--krem); --volos: rgba(212, 175, 78, 0.24); --metka: var(--zoloto-svet); }

.list--manifest{ min-height: auto; padding: 0; display: block; }

.zagolovok-lista{
  font-weight: 900;
  font-size: var(--k-zagolovok);
  line-height: 0.92;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  max-width: 22ch;
}
.lid-lista{
  margin-top: var(--ritm);
  font-weight: 400;
  font-size: var(--k-lid);
  line-height: 1.44;
  max-width: 42ch;
}
.melko{
  font-weight: 500;
  font-size: var(--k-melko);
  line-height: 1.5;
  opacity: 0.74;
}

.maska{
  display: block; overflow: visible clip;
  padding-top: .16em; margin-top: -.16em;
  padding-bottom: .24em; margin-bottom: -.24em;
}

.yavlenie{ display: flex; flex-direction: column; }

.yavlenie .stroka{
  display: inline-block;
  transform: translateY(115%);
}

.list:not(.list--manifest).vidno .yavlenie .stroka,
.stoit .yavlenie .stroka{
  transform: none;
  transition: transform .72s var(--hod-out) var(--zaderzhka, 0ms);
}
.yavlenie .maska:nth-child(2) .stroka{ --zaderzhka: 90ms; }
.yavlenie .maska:nth-child(3) .stroka{ --zaderzhka: 180ms; }

@media (prefers-reduced-motion: reduce){
  .yavlenie .stroka{ transform: none; }
}

[data-hod]{
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 620ms var(--hod-out) var(--zaderzhka, 0ms),
    transform 620ms var(--hod-out) var(--zaderzhka, 0ms);
}
.vidno [data-hod]{ opacity: 1; transform: none; }

.knopka{
  display: inline-block;
  padding: var(--pole-knopki) 1.6em;
  border-radius: 999px;
  font-size: var(--k-lid);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #FFFFFF;
  background: var(--krasnyy);
  text-box: trim-both cap alphabetic;
  transition: background 200ms ease, box-shadow 200ms ease, transform 120ms var(--hod-out);
}
.knopka:hover{
  background: color-mix(in srgb, var(--krasnyy) 92%, #231F20);
  box-shadow: 0 6px 18px rgba(225, 38, 28, 0.34), 0 1px 0 rgba(35, 31, 32, 0.10);
}
.knopka:active{ transform: scale(0.97); }
.knopka:focus-visible{ outline: 2px solid var(--zoloto-svet); outline-offset: 4px; }

:where(a, button):focus-visible{
  outline: 2px solid var(--zoloto-svet);
  outline-offset: 3px;
}

.list--afisha{
  min-height: 0;
  padding-block: clamp(1.6rem, 4vh, 2.6rem) clamp(1rem, 2.4vh, 1.6rem);
  overflow: clip;
}
.list--afisha .final-podval__pravo{
  font-size: var(--k-melko); line-height: var(--shag-tekst); color: var(--tuman);
  margin-left: var(--kray-bukvy);
  white-space: nowrap;
}

.list--afisha .final-podval__rekvizity{
  margin-top: var(--otstup-abzaca, 0.667em);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  column-gap: calc(var(--k-lid) * 2); row-gap: var(--otstup-abzaca, 0.667em);
  font-size: var(--k-melko); line-height: var(--shag-tekst, 1.45); color: var(--tuman);
}
.list--afisha .final-podval__rekvizity p{ margin: 0; }
.list--afisha .final-podval__reklamodatel{ margin-left: var(--kray-bukvy, 0); }
.list--afisha .final-podval__ssylki{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.9em; }
.list--afisha .final-podval__ssylka{
  color: inherit; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.22em; transition: color 200ms ease, text-decoration-color 200ms ease;
}
.list--afisha .final-podval__ssylka:hover{ color: var(--krem); text-decoration-color: currentColor; }
.list--afisha .final-podval__ssylka:focus-visible{ outline: 2px solid var(--zoloto-svet); outline-offset: 3px; }

.list--afisha .final-podval__erid::before{ content: '·'; margin-right: 0.9em; }

@media (max-width: 860px){
  .list{ padding: calc(var(--rost-shapki, 110px) + var(--vozduh-metki)) var(--pole-ekrana) clamp(3rem, 7vh, 5rem); }
  .list--manifest{ padding: 0; }
  .zagolovok-lista{ max-width: 15ch; }
}
@media (max-width: 720px){
  .list--afisha .final-podval__pravo{ white-space: normal; }

  .list--afisha .final-podval__erid{ flex-basis: 100%; }
  .list--afisha .final-podval__erid::before{ content: none; }
}

@media (prefers-reduced-motion: reduce){
  [data-hod]{ opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px){
  #ryadom.list{
    min-height: 0;
    padding-block: clamp(2.6rem, 7vh, 4rem);
  }
}

@media (max-width: 860px){
  :root{ --vozduh-lista: clamp(1.9rem, 5vh, 3rem); }
  .list{
    padding-top: calc(var(--rost-shapki, 79px) + var(--vozduh-lista));
    padding-bottom: var(--vozduh-lista);
  }
  #ryadom.list{
    padding-top: var(--vozduh-lista);
    padding-bottom: var(--vozduh-lista);
  }
}