/* ── «Готовим с капибарой Люсей» — кулинарный клуб, раздел /gotovim/ ─────
   Каждый экран = кадр во весь экран (Люся, кухня, маленькие помощники).
   Поверх кадра — только заголовок и пара фраз, в ПУСТОМ углу этого кадра
   (модификаторы .tl .tr .bl .br). Карточки, списки и советы — в тёмной
   полосе .strip сразу под кадром, чтобы не закрывать персонажей.
   Точка кадрирования — --pos (десктоп) и --pos-m (телефон: кадр 16:9 в
   портретном экране режется по горизонтали, держим в кадре морду Люси).
   Шрифт и палитра — как на главной (Golos Text, песок/глина/мох). */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/golos-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/golos-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}

:root{
  --ink:#12100D; --ink-70:rgba(18,16,13,.78); --ink-45:rgba(18,16,13,.6);
  --sand:#F6F1E8; --sand-dk:#E9DFCC; --line:#D8CDB8;
  --clay:#B4763C; --clay-dk:#8E5A2B; --moss:#5C6E52;
  --cream:#F6F1E8; --cream-80:rgba(246,241,232,.88); --cream-60:rgba(246,241,232,.7);
  --honey:#E7BE85; --night:#1a1714; --night-2:#241f1a;
  --maxw:1180px; --gut:clamp(1.1rem,4vw,3rem); --hdr:60px;
  --sans:'Golos Text',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--sans);
     font-size:clamp(1rem,.96rem + .2vw,1.08rem);line-height:1.6;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--clay-dk);text-underline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--sans);margin:0;line-height:1.06;font-weight:700;letter-spacing:-.03em}
h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.6rem)}
h3{font-size:clamp(1.05rem,1rem + .4vw,1.3rem);line-height:1.2}
p{margin:.8rem 0 0}
.eyebrow{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:0 0 1rem}
.btn{display:inline-block;background:var(--clay-dk);color:#fff;text-decoration:none;
     padding:.8rem 1.4rem;border-radius:3px;font-size:.98rem;font-weight:600;
     white-space:nowrap;transition:background .18s}
.btn:hover{background:var(--clay)}
.btn.ghost{background:rgba(26,23,20,.25);color:var(--cream);border:1px solid var(--cream-60)}
.btn.ghost:hover{background:var(--cream);color:var(--ink)}
.cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}

/* ══ ШАПКА — поверх первого кадра ═══════════════════════════════════════ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hdr);
     background:rgba(26,23,20,.55);backdrop-filter:saturate(140%) blur(10px);
     border-bottom:1px solid rgba(246,241,232,.14)}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:1.2rem}
.brand{text-decoration:none;color:var(--cream);font-weight:700;font-size:1.05rem;
       letter-spacing:-.03em;white-space:nowrap;margin-right:auto}
.brand small{font-weight:500;color:var(--cream-60);letter-spacing:0;font-size:.9rem;margin-left:.45rem}
.nav{display:flex;gap:1.1rem;font-size:.9rem}
.nav a{color:var(--cream-80);text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--honey)}

/* ══ ЭКРАН — кадр во весь экран + короткий текст в пустом углу ══════════ */
.screen{position:relative;min-height:100vh;min-height:100svh;display:flex;overflow:hidden;
        color:var(--cream);background:var(--night)}
.screen > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
              object-position:var(--pos,50% 50%)}
.screen::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.screen .copy{position:relative;z-index:2;width:100%;display:flex}
.screen .copy > .wrap{width:100%}   /* иначе flex-элемент сжимается до текста и встаёт по центру */
.screen .text{max-width:min(var(--tw,520px),44vw)}   /* --tw: уже на кадрах, где Люся близко к тексту */
.screen .eyebrow{color:var(--honey)}
.screen p{color:var(--cream-80)}
.screen .lead{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem)}
.screen h1,.screen h2,.screen p{text-shadow:0 1px 18px rgba(20,17,14,.45)}
/* угол текста: снизу — затемнение снизу, сверху — сверху; лево/право — с той стороны */
.bl .copy,.br .copy{align-self:flex-end;padding:calc(var(--hdr) + 3rem) 0 clamp(2.2rem,8vh,5rem)}
.tl .copy,.tr .copy{align-self:flex-start;padding:calc(var(--hdr) + clamp(1.6rem,6vh,4rem)) 0 3rem}
.br .text,.tr .text{margin-left:auto}
.bl::after{background:linear-gradient(180deg,rgba(20,17,14,0) 50%,rgba(20,17,14,.55) 80%,rgba(20,17,14,.8) 100%),
                      linear-gradient(90deg,rgba(20,17,14,.55) 0%,rgba(20,17,14,0) 50%)}
.br::after{background:linear-gradient(180deg,rgba(20,17,14,0) 50%,rgba(20,17,14,.55) 80%,rgba(20,17,14,.8) 100%),
                      linear-gradient(270deg,rgba(20,17,14,.55) 0%,rgba(20,17,14,0) 50%)}
.tl::after{background:linear-gradient(0deg,rgba(20,17,14,0) 50%,rgba(20,17,14,.5) 85%,rgba(20,17,14,.7) 100%),
                      linear-gradient(90deg,rgba(20,17,14,.55) 0%,rgba(20,17,14,0) 52%)}
.tr::after{background:linear-gradient(0deg,rgba(20,17,14,0) 50%,rgba(20,17,14,.5) 85%,rgba(20,17,14,.7) 100%),
                      linear-gradient(270deg,rgba(20,17,14,.55) 0%,rgba(20,17,14,0) 52%)}
/* нижний край кадра мягко переходит в полосу под ним */
.screen.to-strip::before{content:"";position:absolute;left:0;right:0;bottom:0;height:14vh;z-index:1;
  background:linear-gradient(180deg,rgba(26,23,20,0),var(--night));pointer-events:none}

.hero h1{font-size:clamp(2.8rem,1.2rem + 6vw,6.2rem);letter-spacing:-.045em}
.hero h1 span{color:var(--honey);display:block}
.hero .text{max-width:min(600px,52vw)}

/* ══ ПОЛОСА ПОД КАДРОМ — карточки, списки, советы ═══════════════════════ */
.strip{background:var(--night);color:var(--cream);padding:clamp(1.6rem,4vw,3rem) 0 clamp(3rem,8vw,5.4rem)}
.strip .intro{color:var(--cream-80);max-width:62ch;margin:0 0 clamp(1.2rem,3vw,2rem)}
.grid{display:grid;gap:clamp(.7rem,1.6vw,1.1rem)}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.tile{background:var(--night-2);border:1px solid rgba(246,241,232,.12);border-radius:4px;
      padding:1.1rem 1.2rem 1.2rem;min-width:0;color:var(--cream);display:flex;flex-direction:column;gap:.35rem}
a.tile{text-decoration:none;overflow:hidden;padding:0;transition:border-color .18s}
a.tile:hover{border-color:var(--honey)}
a.tile img{width:100%;aspect-ratio:16/9;object-fit:cover}
a.tile .body{padding:1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.tile .k{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--honey)}
.tile h3{font-size:1.08rem}
.tile p{font-size:.94rem;margin:.1rem 0 0;color:var(--cream-80)}
.tile .meta{font-size:.86rem;color:var(--cream-60);margin-top:auto;padding-top:.4rem}
.tile .more{font-weight:600;color:var(--honey);font-size:.92rem;margin-top:.3rem}
.tile .left{font-size:.88rem;color:var(--cream-60);margin-top:auto;padding-top:.5rem;
            border-top:1px solid rgba(246,241,232,.12)}
.tile ul{margin:.2rem 0 0;padding-left:1.1rem;color:var(--cream-80);font-size:.95rem}
.tile li{margin:.25rem 0}
.tile a{color:var(--honey)}
.note-line{margin-top:1.2rem;font-size:.92rem;color:var(--cream-60)}
.strip .text-col{max-width:680px}
.strip .text-col p{color:var(--cream-80);margin:0 0 .8rem}

footer{background:var(--night);padding:2.4rem 0 3rem;font-size:.86rem;color:var(--cream-60);
       border-top:1px solid rgba(246,241,232,.12)}
footer .wrap{display:flex;gap:.6rem 1.4rem;flex-wrap:wrap;align-items:center}
footer a{color:var(--cream-60)}

/* ══ СТРАНИЦА РЕЦЕПТА — экран-герой, затем светлая «бумага» ═════════════
   Порядок как в PDF-одностраничнике: вступление + карточка-сводка во всю
   ширину → две колонки «Продукты / Как готовлю» → ряд из трёх блоков. */
.crumbs{font-size:.86rem;margin:0 0 1rem}
.crumbs a{color:var(--cream-60);text-decoration:none}
.crumbs a:hover{color:var(--honey)}
.r-title h1{font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem);line-height:1.04}
.paper{background:var(--sand);color:var(--ink);padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(2.6rem,6vw,4rem)}
.paper h2{font-size:clamp(1.45rem,1.15rem + 1.1vw,2.1rem);margin-bottom:.6rem}
.paper .lead{font-size:clamp(1.08rem,1rem + .4vw,1.32rem);line-height:1.55;color:var(--ink-70);margin:0;max-width:34ch}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,5vw,4.4rem);align-items:center}
.pdf{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:1.8rem 0 0}
.pdf span{font-size:.88rem;color:var(--ink-45)}
.card{background:#fff8ee;border:1px solid var(--line);border-radius:6px;padding:clamp(1.1rem,2.4vw,1.6rem)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem 1rem;margin:0;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.facts div{min-width:0}
.facts dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-45)}
.facts dd{margin:.2rem 0 0;font-weight:700;font-size:1rem;line-height:1.3}
.card-row{display:grid;grid-template-columns:7.4rem minmax(0,1fr);align-items:baseline;gap:.4rem .7rem;margin-top:1rem}
.card-row .lbl{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-45)}
.chips{display:inline-flex;gap:.35rem;flex-wrap:wrap}
.chip{display:inline-block;font-size:.84rem;font-weight:600;padding:.12rem .65rem;border-radius:99px;
      background:#F3D9C4;color:#6E3D16;border:1px solid #E0B796}
.none{font-weight:600}
.kb b{font-size:1.05rem}
.card-note{margin:.45rem 0 0;font-size:.86rem;color:var(--ink-45);padding-left:8.1rem}
.kb > span:last-child{line-height:1.5}
.cols{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(1.6rem,5vw,4.4rem);
      align-items:start;margin-top:clamp(2.6rem,6vw,4.2rem)}
.ing{width:100%;border-collapse:collapse}
.ing td{padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.98rem;vertical-align:top}
.ing td:last-child{text-align:right;white-space:nowrap;padding-left:1rem;font-variant-numeric:tabular-nums;color:var(--ink-70)}
.ing caption{text-align:left;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--moss);padding:1.1rem 0 .25rem}
.ing:first-of-type caption{padding-top:.2rem}
.home{margin-top:.9rem;font-size:.9rem;color:var(--ink-45)}
.steps{list-style:none;counter-reset:s;margin:0;padding:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.6rem;
          padding:.85rem 0;border-bottom:1px solid var(--line)}
.steps li:first-child{padding-top:.2rem}
.steps li::before{content:counter(s);font-weight:700;font-size:1.25rem;color:var(--clay-dk);line-height:1.3}
.steps p{margin:0;font-size:.98rem;line-height:1.55}
.steps .t{font-size:.84rem;color:var(--ink-45);white-space:nowrap;margin-left:.2rem}
.safety{margin:1rem 0 0;font-size:.92rem;color:var(--ink-70)}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem);margin-top:clamp(2.4rem,5vw,3.4rem)}
.box{border-radius:6px;padding:1.1rem 1.25rem 1.2rem;min-width:0}
.box b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5rem}
.box p,.box ul{margin:0;font-size:.95rem;line-height:1.55}
.box ul{padding-left:1.05rem}
.box li+li{margin-top:.2rem}
.kids{background:#E3E7DA}.kids b{color:var(--moss)}
.tip{background:#fff8ee;border:1px solid var(--line);border-left:3px solid var(--clay-dk)}.tip b{color:var(--clay-dk)}
.leftover{background:var(--sand-dk)}.leftover b{color:var(--clay-dk)}
.pager{display:flex;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;margin-top:clamp(2.4rem,5vw,3.4rem);
       padding-top:1.2rem;border-top:1px solid var(--line)}
.pager a{text-decoration:none;font-weight:600}

@media (max-width:960px){
  .c5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ══ ТЕЛЕФОН И ПЛАНШЕТ: текст всегда внизу, кадр держит морду Люси ═════ */
@media (max-width:860px){
  .nav{display:none}
  .c2,.c3,.cols,.intro,.row3{grid-template-columns:1fr}
  .paper .lead{max-width:none}
  .c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .screen > img{object-position:var(--pos-m,var(--pos,50% 50%))}
  .screen .copy{align-self:flex-end;padding:calc(var(--hdr) + 40vh) 0 clamp(2rem,6vh,3rem)}
  .screen .text,.hero .text{max-width:none;margin-left:0}
  .screen::after{background:linear-gradient(180deg,rgba(20,17,14,0) 38%,rgba(20,17,14,.62) 62%,rgba(20,17,14,.92) 100%)}
}
@media (max-width:560px){
  :root{--hdr:54px}
  .c5{grid-template-columns:1fr}
  .cta .btn{flex:1 1 100%;text-align:center}
  .brand small{display:none}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1rem}
  .card-row{grid-template-columns:1fr;gap:.35rem}
  .card-note{padding-left:0}
}