:root{
  --fs-10: 0.625rem;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-26: 1.625rem;
  --fs-30: 1.875rem;
  --fs-34: 2.125rem;
  --fs-42: 2.625rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
}
/* Истории портфолио: полноэкранные сцены, текст поверх мягкой подложки.
   ЗАЧЕМ ТАК. Сцена = один кадр + одна мысль: если положить два кадра рядом,
   пропадает ощущение хода дня, ради которого история и делается.
   Кадры без файла показывают ровную плашку — страница остаётся целой, пока
   генерация догоняет (scripts/gen_queue.py). */
.story-page{background:var(--paper,#f4f2ee);color:var(--ink,#1a1917)}
.st-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.st-bar i{display:block;height:100%;width:0;background:var(--accent,#c2a479);
  transition:width .15s ease-out}
.st-head{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;
  justify-content:space-between;align-items:center;padding:18px clamp(16px,4vw,44px);
  background:linear-gradient(180deg,rgba(0,0,0,.35),transparent);color:#fff}
.st-logo{font:400 var(--fs-16)/1 var(--num);letter-spacing:4px;color:#fff;border:0}
.st-back{font:500 var(--fs-11)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:#fff;border:0;opacity:.85}
.st-back:hover{opacity:1}

.st-hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;
  overflow:hidden;background:#2a2724}
.st-hero__pic{position:absolute;inset:0}
.st-hero__pic img{width:100%;height:100%;object-fit:cover;opacity:.86}
.st-hero__txt{position:relative;padding:clamp(28px,6vw,88px);color:#fff;max-width:900px;
  text-shadow:0 2px 30px rgba(0,0,0,.35)}
.st-hero h1{font-size:clamp(38px,7vw,84px);line-height:1.02;margin:0 0 14px;color:#fff}
.st-hero__f{font:500 var(--fs-11)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.8);margin:0 0 18px}
.st-hero__lead{font-size:clamp(16px,1.6vw,20px);line-height:1.6;max-width:52ch;margin:0}
.st-hero__scroll{display:inline-block;margin-top:32px;font:500 var(--fs-10)/1 var(--sans);
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75)}

.st-body{padding:clamp(30px,4.5vw,70px) clamp(16px,5vw,80px)}
.st-scene{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(20px,3vw,48px);
  align-items:center;margin:0 auto clamp(26px,3.4vw,56px);max-width:1500px}
.st-scene:nth-child(even){grid-template-columns:.65fr 1.35fr}
.st-scene:nth-child(even) .st-scene__pic{order:2}
.st-scene__pic{border-radius:var(--radius-lg,26px);overflow:hidden;background:#e8e5df;
  aspect-ratio:3/2}
/* Кадры приходят разной высоты (генератор отдаёт разные пропорции), и без общей
   пропорции сцены расползались: между блоками провисали пустоты в треть экрана,
   а ритм истории ломался. Фиксируем 3/2 и кадрируем по центру. */
.st-scene__pic img{width:100%;height:100%;object-fit:cover;display:block}
.st-scene__ph{display:block;width:100%;aspect-ratio:3/2;background:
  linear-gradient(120deg,#eceae4,#e3e0d8)}
.st-scene__n{display:block;font:400 var(--fs-13)/1 var(--num);color:var(--accent,#c2a479);
  letter-spacing:.12em;margin-bottom:12px}
.st-scene__txt h2{font-size:clamp(24px,2.6vw,36px);margin:0 0 12px}
.st-scene__txt p{font-size: var(--fs-16);line-height:1.72;color:var(--muted,#6b665f);margin:0}

.st-cta{max-width:760px;margin:0 auto;padding:clamp(30px,5vw,60px) 24px;text-align:center}
.st-cta h2{font-size:clamp(26px,3vw,40px);margin-bottom:12px}
.st-cta p{font-size: var(--fs-16);line-height:1.7;color:var(--muted);max-width:54ch;margin:0 auto 22px}
.st-cta__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.st-cta .btn{width:auto;display:inline-block}
.st-note{font-size: var(--fs-13);line-height:1.6;color:var(--muted);margin-top:26px}

.st-rel{max-width:1200px;margin:0 auto;padding:0 24px 60px}
.st-foot{text-align:center;padding:30px 24px 50px}

.st-index-head{max-width:820px;margin:0 auto;padding:clamp(90px,12vw,150px) 24px 10px}
.st-index-head h1{font-size:clamp(34px,5vw,62px);margin-bottom:14px}
.st-index-head p{font-size: var(--fs-16);line-height:1.7;color:var(--muted);max-width:56ch}
.st-index{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,32px);
  max-width:1300px;margin:0 auto;padding:40px 24px 70px}
.st-card{display:block;border:0;background:#fff;border-radius:var(--radius-lg,26px);
  overflow:hidden;transition:box-shadow .3s,transform .3s}
.st-card:hover{box-shadow:0 20px 60px rgba(17,17,17,.10)}
.st-card picture,.st-card__ph{display:block;aspect-ratio:16/10;background:#e8e5df}
.st-card img{width:100%;height:100%;object-fit:cover}
.st-card__b{display:block;padding:22px 24px 26px}
.st-card__b b{display:block;font-family:var(--serif);font-size: var(--fs-24);font-weight:400;margin-bottom:6px}
.st-card__b small{display:block;font:500 var(--fs-10)/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px}
.st-card__l{display:block;font-size: var(--fs-15);line-height:1.6;color:var(--muted)}

@media (max-width:900px){
  .st-scene,.st-scene:nth-child(even){grid-template-columns:1fr;gap:18px}
  .st-scene:nth-child(even) .st-scene__pic{order:0}
  .st-index{grid-template-columns:1fr}
  .st-hero{min-height:76vh}
}

/* Индекс историй: светлый фон, поэтому шапка тёмная. На странице истории она
   лежит поверх полноэкранного кадра и остаётся белой. */
.story-page--index .st-head{background:none;color:var(--ink)}
.story-page--index .st-logo,.story-page--index .st-back{color:var(--ink)}
.st-crumbs{font:500 var(--fs-11)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85)}
.st-crumbs a{color:inherit;border:0}
.st-crumbs a:hover{color:#fff}
.story-page--index .st-crumbs{color:var(--muted)}

/* Единая пара гарнитур сайта (владелец, 05.09.2026): истории тянули --sans
   из общего листа, где стоит Manrope, — третий гротеск на сайте. Здесь
   переменные переопределяются на Montserrat, заголовки остаются на
   Cormorant Garamond. */
body {
  --sans: 'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif;
  --ui:   'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif;
}