/* ============================================================================
   CASE PAGE — base + desktop (≥1024px)
   ----------------------------------------------------------------------------
   Rendered by js/case/case.js into #expandContent. All sizes come from
   css/tokens.css (Figma variables); tablet and mobile overrides live in
   css/case-tablet.css (768–1023px) and css/case-mobile.css (≤767px).
   Design source: Figma Portfolio Site, «Case page — Luk · варіант 04» /
   «· Tablet» / «· Mobile», components in «Components · Responsive».
   ========================================================================== */

.cs {
  position: relative;
  min-height: 100%;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: "Fixel Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
:where(.cs) :where(p, h1, h2, h3, h4, ul, ol, blockquote, figure) { margin: 0; }
:where(.cs) :where(ul, ol) { padding: 0; list-style: none; }
:where(.cs) a { color: inherit; }
:where(.cs) :where(img, video) { display: block; max-width: 100%; }
.cs .cs-label { color: var(--text-secondary); text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   Cover — used twice: on the folder card in the stack (variant card) and as
   the hero of the case (variant hero). The image is cropped with
   object-fit: cover; --k is one design px of the cropped image, so the live
   text scales and stays put exactly like the collage under it — that's what
   keeps the folder → fullscreen morph seamless.
   --------------------------------------------------------------------------- */
/* the cover frame is animatable: on tablets the folder's frame (desktop
   collage) blends into the hero's (tablet collage) during the morph, so
   the live text doesn't jump when the case fades in */
@property --cov-dw { syntax: '<number>'; inherits: true; initial-value: 1440; }
@property --cov-dh { syntax: '<number>'; inherits: true; initial-value: 900; }
@property --cov-top { syntax: '<number>'; inherits: true; initial-value: 129; }
@property --cov-tw { syntax: '<number>'; inherits: true; initial-value: 856; }

.cs-cover {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
  background: #e6ff4c;
}
.cs-cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.cs-cover__text {
  --cov-dw: 1440; --cov-dh: 900;             /* design frame of the image */
  --cov-top: 129;                         /* design px from the image top to the text block */
  --cov-tw: 856;                          /* design width of the text block */
  --title: 58; --title-lh: 62;       /* Figma text style Case/Title */
  --k: max(100cqw / var(--cov-dw), 100cqh / var(--cov-dh));
  position: absolute;
  left: 50%;
  top: calc(50% - (var(--cov-dh) / 2 - var(--cov-top)) * var(--k));
  width: calc(var(--cov-tw) * var(--k));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(18 * var(--k));
  text-align: center;
  color: var(--cover-ink, #000);
  transition: --cov-dw 480ms cubic-bezier(.22, 1, .36, 1), --cov-dh 480ms cubic-bezier(.22, 1, .36, 1),
    --cov-top 480ms cubic-bezier(.22, 1, .36, 1), --cov-tw 480ms cubic-bezier(.22, 1, .36, 1);
}
.cs-cover__img--tablet { display: none; }
.cs-cover--plain { background: var(--cover-bg); } /* covers without a collage (js/main.js → plainCover) */
.cs-cover--card .cs-cover__text { --cov-top: 90; } /* Figma folder «Hero image»: Text Hero at 83.4 of a 0.929-scaled 1440×900 frame */
.cs-cover--card.is-expanding .cs-cover__text { --cov-top: 129; }
/* in the hero the tags keep their room (so the folder's text lands exactly on
   the hero's) but don't show: they live over the case title now. On the
   folder they fade out while it opens. */
.cs-cover--hero .cs-cover__tags { visibility: hidden; }
.cs-cover--card .cs-cover__tags { transition: opacity 240ms ease; }
.cs-cover--card:not(.cs-cover--plain).is-expanding .cs-cover__tags { opacity: 0; } /* cover-only folders have no case to move them to */
.cs-cover__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(10 * var(--k));
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-cover__tags li {
  height: calc(23 * var(--k));
  padding: 0 calc(7 * var(--k));
  border: calc(1 * var(--k)) solid currentColor;
  border-radius: calc(20 * var(--k));
  font: 400 calc(14 * var(--k)) / calc(21 * var(--k)) "Fixel Text", system-ui, sans-serif;
  white-space: nowrap;
}
.cs-cover__title {
  margin: 0;
  font: 400 calc(var(--title) * var(--k)) / calc(var(--title-lh) * var(--k)) "Literaturnaya", Georgia, serif;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.cs-cover__link {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--k));
  height: calc(24 * var(--k));
  padding: 0 calc(7 * var(--k));
  border-radius: calc(12 * var(--k));
  background: #000;
  color: #fff;
  font: 400 calc(14 * var(--k)) / 1 "Fixel Text", system-ui, sans-serif;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1);
}
@media (hover: hover) { .cs-cover__link:hover { transform: scale(1.12); } }
.cs-cover__link svg { width: calc(13 * var(--k)); height: calc(13 * var(--k)); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

.cs-hero { height: 100vh; height: 100svh; }

/* ---------------------------------------------------------------------------
   Glass controls (Figma: Button/Glass, Button/Icon, Lang/Switch)
   --------------------------------------------------------------------------- */
.cs-glass {
  background: var(--glass-fill);
  border: 1px solid var(--glass-stroke);
  /* drop shadow + a thin rim highlight from the top-left light; Chromium also
     refracts the backdrop through js/glass.js (an SVG backdrop-filter) */
  box-shadow: 0 2px 2px rgba(0, 0, 0, .12), inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px) saturate(180%);
  backdrop-filter: blur(6px) saturate(180%);
  color: var(--text-primary);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
@media (hover: hover) { .cs-glass:hover { background: var(--glass-fill-hover); } }
.cs-glass:active { background: var(--glass-fill-pressed); box-shadow: 0 1px 1px rgba(0, 0, 0, .12), inset 1px 1px 0 rgba(255, 255, 255, .4); }
.cs-glass:focus-visible, .cs-seg:focus-visible, .cs-nav__row:focus-visible, .cs-an__point:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.cs-glass--dark { background: var(--glass-tint-dark); color: var(--text-inverse); }

/* Labels and icons on glass buttons are pure black over light backgrounds
   and pure white over dark ones (js/invert.js → mirrorInk): a clone of the
   control group sits above it and turns each label into a letter-shaped
   window (clip-path) onto the backdrop, greyed, inverted and pushed to full
   contrast. The real controls hide these labels; dark-tinted and active
   controls keep their plain white. */
.cs-ink { display: inline-block; } /* a box for the letter clip; same size as the plain text */
:is(.cs-header, .cs-totop):not(.is-ink) .cs-inked:not(.cs-glass--dark, .is-active) :is(.cs-ink, svg),
.cs-header:not(.is-ink) .cs-seg.cs-inked .cs-ink,
.cs-totop.cs-inked:not(.is-ink) svg { color: transparent; }
.cs-header:not(.is-ink).is-menu-open .cs-burger.cs-inked svg { color: inherit; }
.is-ink { pointer-events: none !important; }
.cs-header.is-ink { z-index: 21; }
.cs-totop.is-ink { z-index: 16; }
.is-ink, .is-ink * { visibility: hidden; background: none !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: none !important; }
.is-ink .cs-ink-on.is-plain { /* during a language switch: plain text that can blur (js/langswap.js) */
  color: var(--ink-plain) !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.is-ink .cs-ink-on {
  visibility: visible;
  color: transparent !important;
  /* blur first: letters take the average tone behind them, not the page text
     under them. contrast(8), not a hard threshold: anything clearly light or
     dark still lands on pure black / white, but tones near the middle (the
     placeholder folders) fade through grey instead of flipping back and forth
     as they scroll under the header — that flipping read as flicker */
  -webkit-backdrop-filter: blur(8px) grayscale(1) invert(1) contrast(8) !important;
  backdrop-filter: blur(8px) grayscale(1) invert(1) contrast(8) !important;
}
@media (hover: hover) { .cs-glass--dark:hover { background: var(--glass-tint-dark-hover); } }
.cs-glass--dark:active { background: var(--glass-tint-dark-pressed); }

.cs-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--header-pill-height);
  padding: 0 var(--header-pill-padding-x);
  border-radius: 50px;
  font: 500 var(--header-pill-font) / 1.4 "Fixel Text", system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
/* a two-letter pill (CV) is a circle, like the icon buttons */
.cs-pill--round { width: var(--header-pill-height); padding: 0; }
.cs-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--header-pill-height);
  height: var(--header-pill-height);
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font: 500 var(--header-pill-font) / 1 "Fixel Text", system-ui, sans-serif;
  letter-spacing: .14em;
}
.cs-iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------------------
   Header — fixed over the case (Figma: Header, Breakpoint=Desktop)
   --------------------------------------------------------------------------- */
.cs-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-padding-top) var(--header-padding-x) 16px;
  pointer-events: none;
}
.cs-header > * { pointer-events: auto; }
.cs-header__left, .cs-header__right { position: relative; display: flex; align-items: center; gap: var(--header-pill-gap); }
.cs-actions { display: flex; gap: var(--header-pill-gap); }
.cs-header__center {
  position: absolute;
  left: 50%;
  /* centre of the header row: the taller of the pills and the language switch */
  top: calc(var(--header-padding-top) + max(var(--header-pill-height), var(--header-segment-height) + 8px) / 2);
  transform: translate(-50%, -50%);
}
.cs-name {
  display: inline-block; /* a box, so the stack page can squeeze it with transform */
  font: 700 20px / 29px "Literaturnaya", Georgia, serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cs-avatar {
  display: none;
  position: relative;
  width: var(--header-avatar);
  height: var(--header-avatar);
  border-radius: 50%;
}
.cs-avatar img { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; }
/* Figma component avatar_float: the photo in a 3px glass ring */
.cs-avatar__ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--glass-fill);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .12), inset 1px 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(6px) saturate(180%);
  backdrop-filter: blur(6px) saturate(180%);
}
.cs-header--avatar .cs-name { display: none; }
.cs-header--avatar .cs-avatar { display: block; }

.cs-lang { position: relative; display: flex; gap: 2px; padding: 3px; border-radius: 50px; } /* Figma Lang/Switch: 98×52 = 3 + 1 stroke + 44 + 2 + 44 + 1 + 3 */
/* the dark circle under the active language; it glides (js/case/case.js → glide) */
.cs-lang__thumb {
  position: absolute;
  left: 3px;
  top: 3px;
  width: var(--header-segment-height);
  height: var(--header-segment-height);
  border-radius: 50%;
  background: var(--glass-tint-dark);
  transform-origin: 50% 50%;
  pointer-events: none;
}
.cs-lang[data-active="en"] .cs-lang__thumb { transform: translateX(calc(var(--header-segment-height) + 2px)); }
.cs-seg {
  width: var(--header-segment-height);
  height: var(--header-segment-height);
  padding: 0 0 0 .14em; /* letter-spacing trails the last letter; re-centre */
  border: 0;
  border-radius: 60px;
  background: transparent;
  color: var(--text-primary);
  font: 500 var(--header-pill-font) / 1 "Fixel Text", system-ui, sans-serif;
  letter-spacing: .14em;
  position: relative;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
@media (hover: hover) { .cs-seg:hover { background: var(--segment-hover); } }
.cs-seg:active { background: var(--segment-pressed); }
.cs-seg.is-active, .cs-seg.is-active:hover, .cs-seg.is-active:active { background: transparent; cursor: default; } /* the thumb is the active fill */

/* mobile-only controls (shown in case-mobile.css) */
.cs-burger, .cs-langtoggle, .cs-dropdown { display: none; }
.cs-burger svg + svg { display: none; }

/* ---------------------------------------------------------------------------
   Scroll nav (Figma: Scroll nav, Nav/Dash, Nav/Row) + back to top
   --------------------------------------------------------------------------- */
.cs-nav {
  --nav-ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  left: var(--header-padding-x);
  top: 50%;
  z-index: 15;
  transform: translateY(-50%);
  padding: 14px 12px;
  border-radius: 16px;
  /* liquid glass (js/glass.js) whitened 80% — Roman, 20.10.2026 */
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .12), inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(15px) saturate(160%);
  backdrop-filter: blur(15px) saturate(160%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, padding 320ms var(--nav-ease), border-radius 320ms var(--nav-ease);
}
.cs-nav.is-visible { opacity: 1; pointer-events: auto; }
.cs-nav ol { display: flex; flex-direction: column; gap: 10px; transition: gap 320ms var(--nav-ease); }
/* the label column opens from 0fr → 1fr, so the panel's width animates too */
.cs-nav__row {
  display: grid;
  grid-template-columns: 24px 0fr; /* Figma Nav/Row: the dash sits in a 24px slot, labels line up */
  align-items: center;
  column-gap: 0;
  padding: 0;
  text-decoration: none;
  border-radius: 10px;
  transition: grid-template-columns 320ms var(--nav-ease), column-gap 320ms var(--nav-ease), padding 320ms var(--nav-ease), background-color 150ms ease;
}
.cs-nav__dash { display: block; width: 14px; height: 3px; border-radius: 2px; background: var(--nav-dash); flex: none; transition: width 200ms ease, background-color 150ms ease; }
.cs-nav__row.is-active .cs-nav__dash { width: 24px; background: var(--text-primary); }
.cs-nav__label {
  display: block;
  min-width: 0;
  overflow: hidden;
  height: 3px; /* collapsed rows are as tall as a dash; opening grows them to the text line */
  font: 400 14px / 20px "Fixel Text", system-ui, sans-serif;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms ease, height 320ms var(--nav-ease), color 150ms ease;
}
.cs-nav__row.is-active .cs-nav__label { font-weight: 600; color: var(--text-primary); }
.cs-nav.is-open { padding: 8px; border-radius: 20px; }
.cs-nav.is-open ol { gap: 0; }
.cs-nav.is-open .cs-nav__row { grid-template-columns: 24px 1fr; column-gap: 12px; padding: 6px 8px; }
.cs-nav.is-open .cs-nav__label { height: 20px; opacity: 1; transition: opacity 240ms ease 120ms, height 320ms var(--nav-ease), color 150ms ease; }
@media (hover: hover) {
  .cs-nav:hover { padding: 8px; border-radius: 20px; }
  .cs-nav:hover ol { gap: 0; }
  .cs-nav:hover .cs-nav__row { grid-template-columns: 24px 1fr; column-gap: 12px; padding: 6px 8px; }
  .cs-nav:hover .cs-nav__label { height: 20px; opacity: 1; transition: opacity 240ms ease 120ms, height 320ms var(--nav-ease), color 150ms ease; }
  .cs-nav__row:hover { background: var(--segment-hover); }
  .cs-nav__row:hover .cs-nav__label { color: var(--text-primary); }
}
/* keyboard: tabbing into the nav shows and opens it, as hover does. Not
   :focus-within — a link keeps the focus after a mouse click, and the
   panel would stay open */
.cs-nav:has(.cs-nav__row:focus-visible) { opacity: 1; pointer-events: auto; padding: 8px; border-radius: 20px; }
.cs-nav:has(.cs-nav__row:focus-visible) ol { gap: 0; }
.cs-nav:has(.cs-nav__row:focus-visible) .cs-nav__row { grid-template-columns: 24px 1fr; column-gap: 12px; padding: 6px 8px; }
.cs-nav:has(.cs-nav__row:focus-visible) .cs-nav__label { height: 20px; opacity: 1; transition: opacity 240ms ease 120ms, height 320ms var(--nav-ease), color 150ms ease; }

.cs-totop {
  position: fixed;
  right: var(--header-padding-x);
  bottom: var(--header-padding-x);
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, background-color 150ms ease;
}
.cs-totop.is-visible { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------------------
   Page: intro + article
   --------------------------------------------------------------------------- */
.cs-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-page);
  padding: var(--space-page) 0 var(--space-page-bottom);
}
.cs-intro {
  width: min(856px, 100% - 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}
.cs-intro__eyebrow { color: var(--text-secondary); text-transform: uppercase; }
/* the case's tag pills sit over its title (moved out of the hero, where the
   header avatar covered them): the cover's pill shape at 1:1, in the grey
   of the timeline text */
.cs-intro__head { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cs-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; color: var(--text-secondary); }
.cs-tags li {
  height: 23px;
  padding: 0 7px;
  border: 1px solid #c8c8c8; /* the timeline's light tick grey */
  border-radius: 20px;
  font: 400 14px / 21px "Fixel Text", system-ui, sans-serif;
  white-space: nowrap;
}
.cs-intro__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.cs-intro__meta .t-meta-value { color: var(--text-secondary); }
.cs-months { display: inline-flex; align-items: flex-end; gap: 8px; height: 27px; padding: 5px; }
.cs-month { display: inline-flex; align-items: flex-end; gap: 5px; }
.cs-month b { display: block; width: 1px; height: 6px; background: #c8c8c8; }
.cs-month b.is-tall { height: 17px; }
.cs-month b.is-on { background: #000; }

.cs-article {
  width: min(var(--layout-text-column), 100% - 40px);
  display: flex;
  flex-direction: column;
  gap: var(--space-article);
}
.cs-section { display: flex; flex-direction: column; gap: var(--space-section); scroll-margin-top: 96px; }
.cs-section__head { display: flex; flex-direction: column; gap: 12px; }
.cs-sub { display: flex; flex-direction: column; gap: var(--space-subsection); }

.cs-tldr { display: flex; flex-direction: column; gap: 16px; }
.cs-insight { padding-top: 16px; }
.cs-list { display: flex; flex-direction: column; gap: 12px; padding-left: 24px; list-style: disc; }
.cs-list strong {
  font: italic 700 var(--type-body-size) / var(--type-body-line) "Literaturnaya", Georgia, serif;
  text-transform: uppercase; /* Figma: Bold Italic, text case UPPER, tracking −1.3% */
  letter-spacing: -0.013em;
}
.cs-p--lead strong { font: 600 var(--type-body-strong-size) / var(--type-body-strong-line) "Fixel Text", system-ui, sans-serif; letter-spacing: -0.003em; }
.cs-quote { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 4px 24px; border-left: 3px solid var(--text-primary); }
.cs-quote .t-quote-author { color: var(--text-secondary); }
.cs-principles { display: flex; flex-direction: column; gap: 42px; padding: 40px 0; text-align: center; }
.cs-principles li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cs-principles .t-body { max-width: 360px; }

.cs-table { padding: 8px 0; }
.cs-table__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 14px 0; border-top: 1px solid var(--border-default); }
.cs-table__head { border-top: 0; }
.cs-table .t-table-header { color: var(--text-secondary); text-transform: uppercase; }
.cs-table__label { display: none; }

.cs-metrics { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 0; }
.cs-metric {
  flex: 1 1 calc(50% - 8px);
  max-width: calc(50% - 8px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: 16px;
  background: var(--surface-card);
}
.cs-metric__value { display: flex; align-items: center; gap: 14px; min-height: var(--type-metric-line); }
.cs-metric__arrow { flex: none; width: 34px; height: 18px; fill: none; stroke: var(--text-secondary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* old-iOS activity indicator: 12 rounded spokes, one bright step goes round */
.cs-spinner { position: relative; flex: none; width: 34px; height: 34px; }
.cs-spinner i {
  position: absolute;
  left: calc(50% - 1.5px);
  top: 0;
  width: 3px;
  height: 9px;
  border-radius: 2px;
  background: var(--text-primary);
  transform-origin: 50% 17px;
  transform: rotate(calc(var(--i) * 30deg));
  opacity: .18;
  animation: cs-spin 1s linear infinite;
  animation-delay: calc((var(--i) - 12) * 1s / 12);
}
@keyframes cs-spin { 0% { opacity: .9; } 100% { opacity: .18; } }
.cs-metric__note { color: var(--text-secondary); }
.cs-metric__check { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-default); }

/* ---------------------------------------------------------------------------
   Figures — grey plates wider than the text column (Figma: Figure · РИС. N)
   --fig-w is the desktop width; tablet/mobile clamp to the viewport − 16px.
   --------------------------------------------------------------------------- */
.cs-fig {
  --W: min(calc(var(--fig-w, 982) * 1px), 100vw - 16px);
  width: var(--W);
  margin: 16px 0 16px calc((100% - var(--W)) / 2);
}
.cs-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px var(--layout-figure-inset) 32px;
  border-radius: var(--layout-figure-radius);
  background: var(--surface-placeholder);
  min-width: 0;
}
.cs-caption { max-width: 560px; margin-top: 24px; color: var(--text-secondary); text-align: center; }
.cs-media { width: min(calc(var(--w) * 1px), 100%); height: auto; }
.cs-chart { width: min(calc(var(--w) * 1px), 100%); aspect-ratio: var(--ratio); }
/* live pieces of the Luk page (embeds/luk): the box is the visible card,
   the iframe is the whole stage (room for hover states) scaled to fit */
/* the box runs from the card's top to the stage bottom: the CTA that slides
   out under a tier card gets room instead of covering the caption */
.cs-embed { position: relative; width: min(calc(var(--w) * 1px), 100%); aspect-ratio: var(--cw) / var(--bh); }
.cs-embed iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--sw) * 1px);
  height: calc(var(--sh) * 1px);
  border: 0;
  background: transparent;
  color-scheme: normal;
  transform-origin: 0 0;
  transform: scale(var(--s, 1)) translate(calc(var(--cx) * -1px), calc(var(--cy) * -1px));
}
.cs-chart svg { display: block; width: 100%; height: 100%; }
/* РИС. 2: the Figma layer carries a 20% black Color blend over the screenshot */
.cs-plate[data-fig="2"] .cs-media { filter: saturate(.8); }

.cs-fig--row, .cs-fig--bento { display: flex; gap: var(--layout-figure-gap); }
.cs-fig--row .cs-plate, .cs-fig--bento .cs-plate { flex: var(--panel-w) 1 0; }
.cs-fig--bento { align-items: flex-start; }
.cs-fig--bento .cs-panel--1 { align-self: flex-end; }
.cs-fig--bento .cs-panel--2 { align-self: stretch; }

/* browser mock with a video (Figma: Браузер · Safari Light) */
.cs-browser {
  width: min(calc(var(--w) * 1px), 100%);
  border-radius: 14.85px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 9px 27px rgba(0, 0, 0, .35);
}
.cs-browser__bar { width: 100%; height: auto; }
.cs-browser__video { width: 100%; height: auto; aspect-ratio: 720 / 458; object-fit: cover; object-position: top; background: #111; } /* the Figma crop of the page recordings */

/* РИС. 12: only the bottom strip of the browser, where the sticky bar is
   (Figma: browser 860×582 pushed up so 92px show). The strip is cut at the
   top only, so the browser's shadow still falls on the plate. */
.cs-strip {
  position: relative;
  width: min(calc(var(--w) * 1px), 100%);
  aspect-ratio: 860 / 92;
  clip-path: inset(0 -60px -60px -60px);
}
.cs-browser--strip { position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 17.7px; box-shadow: 0 11px 33px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .23); }
.cs-browser--strip .cs-browser__video { aspect-ratio: 1920 / 1304; object-position: bottom; } /* the whole recording, its bottom edge is the bar */
.cs-plate--browser-strip { padding-top: 0; }
.cs-plate--browser-strip .cs-caption { margin-top: 54px; }

/* phone mock with a video (Figma: Телефон) */
.cs-phone { position: relative; width: min(calc(var(--w) * 1px), 100%); aspect-ratio: 240 / 492.6; }
.cs-phone__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cs-phone__video {
  position: absolute;
  z-index: 1;
  left: 4.405%;
  top: 1.882%;
  width: 91.11%;
  height: 96.24%;
  border-radius: 14% / 6.45%;
  object-fit: cover;
  background: #000;
}

/* РИС. 6: four pieces */
.cs-plate--pieces { padding-top: 48px; padding-bottom: 48px; }
.cs-plate--pieces .cs-caption { order: -1; margin: 0 0 56px; }
.cs-pieces { display: flex; align-items: flex-end; justify-content: center; gap: 100px; }
.cs-pieces li { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.cs-pieces img { width: calc(var(--w) * 1px); height: auto; }
.cs-pieces .t-caption { color: var(--text-secondary); }

/* РИС. 11б: conditions card */
.cs-conditions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 361px; }
.cs-conditions__ticket { width: min(calc(var(--w) * 1px), 100%); margin-bottom: 24px; }
.cs-conditions__p { font: 500 16px / 22px "Fixel Text", system-ui, sans-serif; }
.cs-conditions__p b { font-weight: 700; }
.cs-conditions__p.is-last { margin-top: -6px; }

/* РИС. 13: launch message + reply */
.cs-launch { position: relative; width: min(calc(var(--w) * 1px), 100%); aspect-ratio: 376 / 477; }
.cs-launch__main { position: absolute; left: 2.93%; top: 0; width: 97.07%; }
.cs-launch__reply { position: absolute; left: 0; top: 75.05%; width: 94.41%; }

/* ---------------------------------------------------------------------------
   РИС. 14 — analytics markup with marker focus (hover / tap)
   --------------------------------------------------------------------------- */
.cs-an { display: flex; align-items: flex-start; justify-content: center; gap: 62px; width: 100%; }
.cs-an__map { position: relative; padding-left: 52px; flex: none; }
.cs-an__ruler { position: absolute; left: 11px; top: 0; bottom: 0; width: 1px; background: #bfbfbf; }
.cs-an__thumb { position: relative; width: 170px; }
.cs-an__thumb img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); }
.cs-an__floatbar {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: 9px;
  border: 1px solid var(--text-primary);
  border-radius: 4.5px;
  background: #e6ff4a;
  transition: opacity 150ms ease;
}
.cs-an__point {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}
.cs-an__point--ruler { left: -41px; }
.cs-an__tick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  margin-left: 7px;
  border-top: 1px dashed #bfbfbf;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.cs-marker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font: 600 var(--type-marker-size) / var(--type-marker-line) "Fixel Text", system-ui, sans-serif;
  transition: opacity 150ms ease, box-shadow 150ms ease;
  flex: none;
}
.cs-marker--check { background: var(--text-primary); }
.cs-marker--action { background: var(--accent-marker-action); }
.cs-an__legend { display: flex; flex-direction: column; gap: 48px; width: 400px; padding-top: 66px; text-align: left; }
.cs-an__group { display: flex; flex-direction: column; }
.cs-an__group .t-legend-subtitle { color: var(--text-secondary); margin-bottom: 16px; }
.cs-an__group ol { display: flex; flex-direction: column; gap: 15px; }
.cs-an__row { display: flex; align-items: flex-start; gap: 20px; transition: opacity 150ms ease; cursor: default; }
.cs-an__text { display: flex; flex-direction: column; }
.cs-an__text .t-legend-code { color: var(--text-secondary); }
/* focus: one marker + its legend row stay, everything else dims */
.cs-an.is-focus .cs-an__point:not(.is-on) .cs-marker,
.cs-an.is-focus .cs-an__row:not(.is-on),
.cs-an.is-focus .cs-an__tick,
.cs-an.is-focus .cs-an__floatbar { opacity: .5; }
.cs-an .is-on > .cs-marker--check, .cs-an .cs-an__point.is-on .cs-marker--check { box-shadow: 0 0 0 5px rgba(26, 26, 26, .25); }
.cs-an .is-on > .cs-marker--action, .cs-an .cs-an__point.is-on .cs-marker--action { box-shadow: 0 0 0 5px rgba(61, 89, 255, .25); }

@media (prefers-reduced-motion: reduce) {
  .cs-cover__text, .cs-cover__link, .cs-nav, .cs-nav *, .cs-totop, .cs-glass { transition: none; }
  .cs-spinner i { animation-duration: 3s; }
}

/* ---- site integration: folder cover + base-layer (no-morph) open ---- */
.card-cover { overflow: hidden; }
html.case-open, html.case-open body { overflow: hidden; }