/* ============================================================
   ULTIMA — CASES / GALLERY
   Дизайн-система общая с главной: тёмный фон, Unbounded/Golos,
   тонкие линии, асимметрия. Без карточек с тенями и скруглений.
   Токены и базовые стили — /assets/css/app.css (загружается раньше).
   ============================================================ */

/* ---------- case hero ---------- */
.cs-page, .cs-gallery-page { display: block; }

.cs-hero{
  position: relative;
  padding-top: clamp(150px, 22vh, 280px);
  padding-bottom: clamp(48px, 8vh, 110px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.cs-hero__side{
  position: absolute;
  top: clamp(96px, 17vh, 190px);
  right: var(--gutter);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(241,238,230,.72);
  text-shadow: 0 1px 16px rgba(6,7,10,.9);
}
.cs-hero__kicker{
  color: var(--plasma);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.cs-hero__title{
  font-size: clamp(40px, 9.4vw, 158px);
  font-weight: 300;
  line-height: .94;
  letter-spacing: -.04em;
  margin-top: .16em;
  overflow-wrap: anywhere;
}
.cs-hero__grid{
  display: grid;
  gap: clamp(30px, 5vw, 84px);
  margin-top: clamp(30px, 5.5vh, 66px);
}
@media (min-width: 920px){
  .cs-hero__grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    align-items: end;
  }
}
.cs-hero__summary{
  font-size: clamp(17px, 1.7vw, 25px);
  line-height: 1.45;
  max-width: 44ch;
}
.cs-hero__cta{ margin-top: clamp(22px, 4vh, 42px); }
.cs-hero__figure{ min-width: 0; }
.cs-hero__metric{
  font-size: clamp(48px, 11vw, 176px);
  font-weight: 300;
  line-height: .88;
  letter-spacing: -.05em;
  color: var(--plasma);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.cs-hero__metric-label{
  display: block;
  margin-top: .7em;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------- cover ---------- */
.cs-cover{ margin-top: clamp(44px, 8vh, 100px); }
.cs-cover img{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  background: var(--deep);
}

/* ---------- body blocks ---------- */
.cs-content{
  padding-block: clamp(66px, 11vh, 160px);
  display: grid;
  gap: clamp(50px, 9vh, 120px);
}
.cs-block{
  display: grid;
  gap: clamp(18px, 3vh, 34px);
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 4vh, 54px);
}
@media (min-width: 1000px){
  .cs-block{
    grid-template-columns: minmax(0, .44fr) minmax(0, 1fr);
    column-gap: clamp(30px, 5vw, 96px);
    align-items: start;
  }
  .cs-block__body{ grid-column: 2; }
}
.cs-block__index{
  color: var(--ice);
  font-size: 11px;
  letter-spacing: .24em;
  margin-bottom: .8em;
}
.cs-block__title{
  font-size: clamp(24px, 3.4vw, 58px);
  font-weight: 300;
  line-height: 1;
}
.cs-block__body{ min-width: 0; }
.cs-prose{
  display: grid;
  gap: 1.1em;
  max-width: 70ch;
  color: rgba(241,238,230,.86);
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.62;
}
.cs-prose p{ margin: 0; }
.cs-prose strong{ color: var(--ivory); font-weight: 600; }
.cs-prose a{
  color: var(--ice);
  border-bottom: 1px solid rgba(123,231,255,.4);
}
.cs-prose ul{ display: grid; gap: .72em; }
.cs-prose li{ position: relative; padding-left: 1.8em; }
.cs-prose li::before{
  content: "—";
  position: absolute;
  left: 0;
  color: var(--plasma2);
}

/* numbers — крупно и списком, без карточек */
.cs-numbers{ display: grid; }
.cs-numbers ul{ display: grid; border-top: 1px solid var(--line); }
.cs-numbers li{
  padding: clamp(16px, 2.6vh, 30px) 0;
  border-bottom: 1px solid var(--line);
  padding-left: 0;
  color: var(--dim);
  font-size: clamp(14px, 1.05vw, 17px);
}
.cs-numbers li::before{ display: none; }
.cs-numbers strong{
  display: block;
  font-family: var(--display);
  font-weight: 300;
  color: var(--plasma);
  font-size: clamp(28px, 3.6vw, 58px);
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: .22em;
  overflow-wrap: anywhere;
}

/* ---------- photo gallery ---------- */
.cs-photos{
  padding-block: clamp(56px, 10vh, 130px);
  border-top: 1px solid var(--line);
}
.cs-photos__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px clamp(16px, 4vw, 48px);
}
.cs-photos__hint{
  color: var(--dim);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.cs-photos__grid{
  margin-top: clamp(28px, 5vh, 58px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.5vw, 20px);
}
@media (min-width: 760px){ .cs-photos__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px){ .cs-photos__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-photo{
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--deep);
}
.cs-photo img{
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform .7s var(--ease);
}
.cs-photo:hover img{ transform: scale(1.045); }

/* ---------- lightbox ---------- */
.cs-lightbox{
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  background: rgba(6,7,10,.95);
  padding: clamp(16px, 4vw, 64px);
}
.cs-lightbox.is-open{ display: grid; }
.cs-lightbox__img{
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--line);
}
.cs-lightbox__close{
  position: absolute;
  top: clamp(14px, 3vh, 32px);
  right: clamp(14px, 3vw, 36px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ivory);
  border-bottom: 1px solid var(--line);
  padding-bottom: .2em;
}
.cs-lightbox__close:hover{ color: var(--plasma); }

/* ---------- sources ---------- */
.cs-sources{
  padding-block: clamp(44px, 8vh, 100px);
  border-top: 1px solid var(--line);
}
.cs-sources__list{
  margin-top: clamp(20px, 3vh, 40px);
  display: grid;
  border-top: 1px solid var(--line);
}
.cs-sources__list a{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: clamp(14px, 2.4vh, 26px) 0;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  overflow-wrap: anywhere;
  transition: color .3s ease, padding-left .45s var(--ease);
}
.cs-sources__list a:hover{ color: var(--ivory); padding-left: clamp(6px, 1.4vw, 20px); }
.cs-sources__list .arrow{ color: var(--plasma); flex: none; }
.cs-sources__list a:hover .arrow{ transform: translateX(7px); }

/* ---------- pager ---------- */
.cs-pager{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
@media (min-width: 760px){
  .cs-pager{ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
.cs-pager__link{
  display: grid;
  gap: .55em;
  padding: clamp(24px, 4vh, 46px) 0;
  min-width: 0;
}
.cs-pager__dir{
  color: var(--dim);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.cs-pager__name{
  font-size: clamp(16px, 1.9vw, 28px);
  font-weight: 300;
  line-height: 1.08;
}
.cs-pager__link:hover .cs-pager__name{ color: var(--plasma2); }
.cs-pager__link--next{ text-align: right; }
.cs-pager__all{
  align-self: center;
  justify-self: center;
  padding: clamp(14px, 2.4vh, 26px) 0;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ice);
  white-space: nowrap;
}
.cs-pager__all:hover{ color: var(--plasma); }
@media (min-width: 760px){
  .cs-pager__all{
    padding-inline: clamp(18px, 3vw, 50px);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
}

/* ---------- contact band ---------- */
.cs-contact{
  border-top: 1px solid var(--line);
  padding-block: clamp(70px, 12vh, 170px);
}
.cs-contact__title{
  font-size: clamp(32px, 6.4vw, 108px);
  font-weight: 300;
  line-height: 1;
}
.cs-contact__lead{
  margin-top: clamp(14px, 2.4vh, 26px);
  color: var(--dim);
  max-width: 48ch;
  font-size: clamp(16px, 1.35vw, 21px);
}
.cs-contact__list{
  margin-top: clamp(34px, 6vh, 80px);
  border-top: 1px solid var(--line);
}
.cs-contact__list a{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .35em clamp(14px, 2vw, 30px);
  padding: clamp(16px, 3vh, 32px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .5s var(--ease), color .4s ease;
}
.cs-contact__label{
  grid-column: 1 / -1;
  color: var(--dim);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.cs-contact__value{
  font-size: clamp(20px, 3.6vw, 56px);
  font-weight: 300;
  line-height: 1;
  text-transform: none;
  overflow-wrap: anywhere;
}
.cs-contact__list .arrow{ color: var(--plasma); }
.cs-contact__list a:hover{ padding-left: clamp(8px, 1.5vw, 26px); }
.cs-contact__list a:hover .cs-contact__value{ color: var(--plasma2); }
.cs-contact__list a:hover .arrow{ transform: translateX(10px); }
@media (min-width: 760px){
  .cs-contact__list a{ grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) auto; }
  .cs-contact__label{ grid-column: auto; }
}

/* ---------- gallery hero ---------- */
.cs-gallery-hero{
  position: relative;
  padding-top: clamp(150px, 22vh, 280px);
  overflow: hidden;
}
.cs-gallery-hero__kicker{
  color: var(--plasma);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.cs-gallery-hero__title{
  font-size: clamp(50px, 15vw, 230px);
  font-weight: 250;
  line-height: .86;
  letter-spacing: -.045em;
  margin: .06em 0 0 -.02em;
  overflow-wrap: anywhere;
}
.cs-intro{
  margin-top: clamp(28px, 5vh, 60px);
  display: grid;
  gap: 1.15em;
  max-width: 82ch;
  color: rgba(241,238,230,.9);
  font-size: clamp(17px, 1.55vw, 24px);
  line-height: 1.52;
}
.cs-intro p{ margin: 0; }
.cs-intro strong{ color: var(--plasma2); font-weight: 600; }
.cs-gallery-hero__figure{
  margin: clamp(44px, 8vh, 110px) 0 0;
}
.cs-gallery-hero__figure img{
  width: 100%;
  height: clamp(260px, 56vh, 820px);
  object-fit: cover;
  display: block;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--deep);
}

/* ---------- filters ---------- */
.cs-filters-wrap{
  position: sticky;
  top: 0;
  z-index: 6;
  background: rgba(6,7,10,.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.cs-filters{
  display: flex;
  gap: clamp(10px, 2vw, 26px);
  padding: clamp(10px, 1.8vh, 18px) 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.cs-filters::-webkit-scrollbar{ display: none; }
.cs-chip{
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  padding: .5em .1em;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.cs-chip:hover{ color: var(--ivory); }
.cs-chip.is-active,
.cs-chip[aria-pressed="true"]{
  color: var(--ivory);
  border-bottom-color: var(--plasma);
}

/* ---------- cards ---------- */
.cs-cards-wrap{ padding-bottom: clamp(66px, 11vh, 160px); }
.cs-cards{
  padding-top: clamp(50px, 9vh, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 76px) clamp(20px, 3vw, 46px);
}
@media (min-width: 760px){ .cs-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px){ .cs-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-card{
  min-width: 0;
  border-top: 1px solid var(--line);
}
.cs-card[hidden]{ display: none; }
.cs-card__link{
  display: grid;
  gap: clamp(14px, 2vh, 22px);
  padding-top: clamp(14px, 2vh, 22px);
}
.cs-card__figure{
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--deep);
}
.cs-card__figure img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.cs-card:hover .cs-card__figure img{ transform: scale(1.045); }
.cs-card__metric{
  font-size: clamp(30px, 4.4vw, 60px);
  font-weight: 300;
  line-height: .95;
  color: var(--dim);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  transition: color .45s ease;
}
.cs-card:hover .cs-card__metric{ color: var(--plasma); }
.cs-card__title{
  font-size: clamp(17px, 1.75vw, 25px);
  font-weight: 300;
  line-height: 1.1;
}
.cs-card__summary{
  color: var(--dim);
  font-size: clamp(14px, 1.05vw, 17px);
  max-width: 52ch;
}
.cs-card__meta{
  color: var(--plasma2);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ---------- sign ---------- */
.cs-sign{
  border-top: 1px solid var(--line);
  padding-block: clamp(70px, 12vh, 170px);
}
.cs-sign__text{
  font-size: clamp(36px, 8vw, 140px);
  font-weight: 300;
}

/* ---------- reveal ---------- */
html.js [data-cs-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s ease, transform .85s var(--ease);
}
html.js [data-cs-reveal].is-in{
  opacity: 1;
  transform: none;
}
html:not(.js) [data-cs-reveal]{ opacity: 1; transform: none; }

/* ---------- small screens ---------- */
@media (max-width: 640px){
  .cs-hero__side{ display: none; }
  .cs-photos__grid{ grid-template-columns: minmax(0, 1fr); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html.js [data-cs-reveal]{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .cs-photo img,
  .cs-card__figure img{ transition: none !important; }
  .cs-card:hover .cs-card__figure img{ transform: none; }
  .cs-chip{ transition: none; }
}
html.reduced-motion [data-cs-reveal]{ opacity: 1 !important; transform: none !important; }