/* ───────────────────────────────────────────────────────────
   Studio Lesk — Case study (Infinity Studio Karviná)
   Editorial dossier layout. Shares the lesk.css token system.
   ─────────────────────────────────────────────────────────── */
:root {
  --wine: #1B0810;
  --wine-2: #25101A;
  --wine-3: #2F1622;
  --cream: #F2E8DD;
  --cream-soft: rgba(242, 232, 221, 0.62);
  --cream-faint: rgba(242, 232, 221, 0.30);
  --cream-line: rgba(242, 232, 221, 0.14);
  --cream-line-strong: rgba(242, 232, 221, 0.34);
  --rose: #C4596F;
  --rose-light: #E89AAA;
  --rose-deep: #823549;

  --serif-i: "Newsreader", "Times New Roman", serif;
  --display: "Funnel Display", "Inter Tight", sans-serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "Geist Mono", monospace;

  --max: 1280px;
  --pad: 72px;
}

html, body {
  margin: 0; padding: 0;
  background: var(--wine);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
::selection { background: var(--rose); color: var(--wine); }

/* ─── Shared sub-page navbar ───────────────────────────────── */
.studio-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 22px 72px; border-bottom: 1px solid var(--cream-line);
  position: sticky; top: 0; z-index: 20;
  background: rgba(27,8,16,0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.studio-nav-back {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.26em;
  color: var(--cream-faint); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: color .2s;
}
.studio-nav-back:hover { color: var(--cream); }
.studio-nav-brand {
  font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cream); text-decoration: none; justify-self: center;
}
.studio-nav-brand em { font-family: var(--serif-i); font-style: italic; color: var(--rose); text-transform: lowercase; letter-spacing: 0; font-weight: 400; font-size: 1.15em; margin: 0 -0.03em; }
.studio-nav-right { justify-self: end; display: inline-flex; align-items: center; gap: 24px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.26em; }
.studio-nav-right a { color: var(--cream-faint); text-decoration: none; transition: color .2s; }
.studio-nav-right a:hover { color: var(--cream); }
.studio-nav-right .sn-cta { color: var(--rose-light); border: 1px solid rgba(196,89,111,0.35); padding: 7px 16px; transition: color .2s, border-color .2s; }
.studio-nav-right .sn-cta:hover { color: var(--cream); border-color: var(--rose); }
@media (max-width: 960px) { .studio-nav { padding: 18px 36px; } .studio-nav-right .sn-link { display: none; } }
@media (max-width: 600px) { .studio-nav { grid-template-columns: 1fr auto; padding: 15px 20px; } .studio-nav-right { display: none; } }

/* ─── Page frame ───────────────────────────────────────────── */
.cs-page {
  width: 100%; max-width: var(--max); margin: 0 auto;
  background: var(--wine); color: var(--cream);
  font-family: var(--sans);
  position: relative; overflow: hidden;
}
.cs-page * { box-sizing: border-box; }
.cs-page p { margin: 0; }
.cs-page a { color: inherit; text-decoration: none; }

.cs-pad { padding-left: var(--pad); padding-right: var(--pad); }

/* film-grain shared */
.cs-grain::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  will-change: transform; transform: translateZ(0);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.035; mix-blend-mode: overlay;
}

/* ─── Shared atoms ─────────────────────────────────────────── */
.cs-mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.28em; font-size: 11px; }

.cs-eyebrow {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.30em; font-size: 11px;
  color: var(--rose); display: inline-flex; align-items: center; gap: 14px;
}
.cs-eyebrow .rule { width: 40px; height: 1px; background: var(--rose); opacity: 0.6; }

.cs-chapno {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.28em; font-size: 11px;
  color: var(--cream-faint); display: inline-flex; align-items: center; gap: 14px;
}
.cs-chapno .rule { width: 48px; height: 1px; background: var(--cream-line-strong); }

.cs-h2 {
  font-family: var(--serif-i); font-style: italic; font-weight: 300;
  font-size: 64px; line-height: 1.02; letter-spacing: -0.018em; margin: 0; text-wrap: pretty;
}
.cs-h2 em { color: var(--rose); font-style: italic; }

.cs-body { font-size: 16px; line-height: 1.72; color: var(--cream-soft); max-width: 52ch; }
.cs-body strong { color: var(--cream); font-weight: 500; }

.cs-btn {
  display: inline-flex; align-items: center; gap: 14px; white-space: nowrap;
  font-family: var(--serif-i); font-style: italic; font-weight: 400; font-size: 24px; color: var(--cream);
  padding: 16px 34px; border: 1px solid var(--rose); border-radius: 999px;
  position: relative; overflow: hidden; z-index: 0; transition: color 0.4s ease; cursor: pointer;
}
.cs-btn::before {
  content: ""; position: absolute; inset: 0; background: var(--rose);
  transform: translateX(-101%); z-index: -1; transition: transform 0.45s cubic-bezier(0.65,0,0.35,1);
}
.cs-btn:hover { color: var(--wine); }
.cs-btn:hover::before { transform: translateX(0); }
.cs-btn .arrow { color: var(--rose); font-style: normal; transition: color .4s, transform .4s; }
.cs-btn:hover .arrow { color: var(--wine); transform: translateX(5px); }

/* ─── Top bar ──────────────────────────────────────────────── */
.cs-topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-top: 30px; padding-bottom: 30px; position: relative; z-index: 20;
}
.cs-topbar .back, .cs-topbar .tag {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.26em; font-size: 11px;
  color: var(--cream-soft); display: inline-flex; align-items: center; gap: 12px; transition: color .2s ease;
}
.cs-topbar .back:hover { color: var(--cream); }
.cs-topbar .tag { justify-self: end; color: var(--cream-faint); }
.cs-topbar .brand {
  justify-self: center; font-family: var(--display); font-weight: 700; font-size: 20px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.cs-topbar .brand em {
  font-family: var(--serif-i); font-style: italic; color: var(--rose); text-transform: lowercase;
  letter-spacing: 0; font-weight: 400; font-size: 1.15em; margin: 0 -0.03em;
}
.cs-hairline { height: 1px; background: var(--cream-line); }

/* ─── image-slot theming (dark wine + striped empty state) ─── */
image-slot { color: var(--cream-soft) !important; }
image-slot::part(frame) {
  background-color: var(--wine-3);
  background-image: repeating-linear-gradient(135deg,
    rgba(242,232,221,0.045) 0px, rgba(242,232,221,0.045) 1px, transparent 1px, transparent 11px);
}
image-slot::part(ring) { border-color: var(--cream-line-strong); }
image-slot::part(empty) { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; }

/* ─── Metric ledger (no fake numbers) ──────────────────────── */
.cs-ledger { border-top: 1px solid var(--cream-line-strong); }
.cs-ledger .lrow {
  display: grid; grid-template-columns: 40px 1fr 1.1fr auto; gap: 28px; align-items: center;
  padding: 26px 4px; border-bottom: 1px solid var(--cream-line); transition: background .3s ease;
}
.cs-ledger .lrow:hover { background: rgba(196,89,111,0.05); }
.cs-ledger .lrow .ix { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--cream-faint); }
.cs-ledger .lrow .nm { font-family: var(--serif-i); font-style: italic; font-size: 27px; line-height: 1.05; color: var(--cream); }
.cs-ledger .lrow .ds { font-size: 14px; line-height: 1.55; color: var(--cream-soft); }
.cs-status {
  justify-self: end; white-space: nowrap; font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 10px; color: var(--rose-light); display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px; border: 1px solid rgba(196,89,111,0.35); border-radius: 999px;
}
.cs-status .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--rose); animation: csPulse 2.2s ease-in-out infinite; }
@keyframes csPulse { 0%,100% { opacity:1; transform:scale(1);} 50% { opacity:.5; transform:scale(1.4);} }

/* ─── Closing CTA band ─────────────────────────────────────── */
.cs-cta { text-align: center; padding: 130px 72px 120px; border-top: 1px solid var(--cream-line); position: relative; }
.cs-cta .lead {
  font-family: var(--serif-i); font-style: italic; font-weight: 300; font-size: 54px; line-height: 1.08;
  letter-spacing: -0.015em; max-width: 18ch; margin: 0 auto 14px; text-wrap: balance;
}
.cs-cta .lead em { color: var(--rose); }
.cs-cta .sub { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.26em; font-size: 11px; color: var(--cream-soft); margin-bottom: 44px; }

/* ─── Footer ───────────────────────────────────────────────── */
.cs-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 30px 72px; border-top: 1px solid var(--cream-line);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.22em; font-size: 10px; color: var(--cream-faint);
}
.cs-foot .links { display: inline-flex; gap: 28px; }
.cs-foot .links a { transition: color .2s ease; }
.cs-foot .links a:hover { color: var(--cream-soft); }

/* ════════════════════════════════════════════════════════════
   Editorial dossier
   ════════════════════════════════════════════════════════════ */
.va .hero { padding-top: 64px; padding-bottom: 56px; }
.va .hero-grid {
  display: grid; grid-template-columns: 1fr 280px; gap: 56px; align-items: end;
  padding-bottom: 44px; border-bottom: 1px solid var(--cream-line);
}
.va .title {
  font-family: var(--serif-i); font-style: italic; font-weight: 300;
  font-size: 100px; line-height: 0.92; letter-spacing: -0.025em; margin: 18px 0 0; min-width: 0;
}
.va .title .city { display: block; color: var(--rose); }
.va .spec { display: flex; flex-direction: column; gap: 0; }
.va .spec .srow {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-top: 1px solid var(--cream-line);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px;
}
.va .spec .srow:first-child { border-top: 0; }
.va .spec .srow .k { color: var(--cream-faint); }
.va .spec .srow .v { color: var(--cream); text-align: right; }

.va .heroshot { margin-top: 40px; }
.va .heroshot image-slot { width: 100%; height: 440px; display: block; }

.va section.chapter { padding-top: 110px; padding-bottom: 30px; }
.va .chead { display: flex; flex-direction: column; gap: 26px; margin-bottom: 56px; }

/* 01 situace */
.va .situ { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: start; }
.va .situ .copy { display: flex; flex-direction: column; gap: 22px; }
.va .facts { border-top: 1px solid var(--cream-line-strong); }
.va .facts .f { padding: 22px 0; border-bottom: 1px solid var(--cream-line); display: flex; flex-direction: column; gap: 7px; }
.va .facts .f .lab { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; color: var(--cream-faint); }
.va .facts .f .val { font-family: var(--serif-i); font-style: italic; font-size: 30px; color: var(--rose-light); line-height: 1.04; }

/* 02 řešení */
.va .solu { display: grid; grid-template-columns: 1fr 360px; gap: 72px; align-items: start; }
.va .deliv { display: flex; flex-direction: column; }
.va .deliv .d { display: grid; grid-template-columns: 44px 1fr; gap: 24px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--cream-line); }
.va .deliv .d:first-child { border-top: 1px solid var(--cream-line-strong); }
.va .deliv .d .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--rose); padding-top: 8px; }
.va .deliv .d h4 { font-family: var(--serif-i); font-style: italic; font-weight: 400; font-size: 30px; margin: 0 0 8px; }
.va .deliv .d p { font-size: 15px; line-height: 1.6; color: var(--cream-soft); max-width: 46ch; }
.va .phonewrap { position: sticky; top: 40px; }
.va .phone { border: 1px solid var(--cream-line-strong); border-radius: 30px; padding: 12px; background: var(--wine-2); }
.va .phone image-slot { width: 100%; height: 620px; display: block; }
.va .phone.cap { margin-top: 16px; text-align: center; padding: 0; border: 0; background: transparent; }

/* 03 metriky */
.va .metr-head p { font-size: 15px; color: var(--cream-soft); max-width: 56ch; line-height: 1.6; }

/* ─── Reveal ───────────────────────────────────────────────── */
.cs-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1); }
.cs-reveal.in { opacity: 1; transform: translateY(0); }
.cs-reveal.d1 { transition-delay: .08s; }
.cs-reveal.d2 { transition-delay: .16s; }
.cs-reveal.d3 { transition-delay: .24s; }

/* ════════════════════════════════════════════════════════════
   Responsive
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  :root { --pad: 44px; }
  .va .title { font-size: 78px; }
  .cs-h2 { font-size: 52px; }
  .va .hero-grid { grid-template-columns: 1fr; gap: 34px; align-items: start; }
  .va .spec { max-width: 420px; }
  .va .situ { grid-template-columns: 1fr; gap: 44px; }
  .va .solu { grid-template-columns: 1fr; gap: 52px; }
  .va .phonewrap { position: static; max-width: 380px; }
  .va section.chapter { padding-top: 84px; }
  .va .chead { margin-bottom: 44px; }
}
@media (max-width: 680px) {
  :root { --pad: 22px; }
  .cs-topbar { grid-template-columns: 1fr auto; }
  .cs-topbar .tag { display: none; }
  .va .title { font-size: 54px; }
  .cs-h2 { font-size: 38px; }
  .va .heroshot image-slot { height: 280px; }
  .cs-ledger .lrow { grid-template-columns: 1fr; gap: 10px; align-items: start; }
  .cs-ledger .lrow .ix { display: none; }
  .cs-status { justify-self: start; }
  .cs-cta { padding: 88px 22px 80px; }
  .cs-cta .lead { font-size: 36px; }
  .cs-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cs-foot .links { flex-wrap: wrap; gap: 16px 24px; }
}

@media (max-width: 390px) {
  :root { --pad: 14px; }
  .va .title { font-size: 36px; line-height: 1; }
  .va .hero-site-img { height: 220px; }
  .cs-h2 { font-size: 26px; }
  .cs-body { font-size: 14px; }
  .va section.chapter { padding-top: 64px; }
  .va .chead { margin-bottom: 32px; }
  .va .facts .f .val { font-size: 22px; }
  .va .deliv .d h4 { font-size: 22px; }
  .va .deliv .d p { font-size: 13px; }
  .cs-ledger .lrow .nm { font-size: 20px; }
  .cs-ledger .lrow .ds { font-size: 13px; }
  .cs-cta { padding: 60px 14px 56px; }
  .cs-cta .lead { font-size: 26px; }
  .cs-btn { font-size: 18px; padding: 13px 22px; }
}