/* ==========================================================================
   Набор «supy». Ниша: домашние супы.
   Характер — домашняя кухня: льняная скатерть, клетчатая кайма, глиняная
   посуда, пар над тарелкой. Бульонный янтарь и свекольный акцент.
   Шрифты только системные, внешних запросов нет.
   ========================================================================== */

:root{
  --linen:#F5ECDD;          /* скатерть: фон */
  --linen-deep:#EBDDC6;
  --crust:#3A2618;          /* корочка хлеба: основной текст */
  --crust-soft:#6B5242;
  --crust-faint:#9C8574;
  --rule:#DCCAB0;
  --broth:#D4862A;          /* бульон: главный акцент */
  --broth-soft:#F2C98A;
  --beet:#9A2A3A;           /* свёкла: кнопки и ссылки */
  --dill:#5C7A3C;           /* укроп */
  --cream:#FFF8EC;          /* сметана: подложки */

  --col:720px;              /* колонка текста */
  --step:28px;              /* вертикальный ритм */

  --display:Superclarendon,Rockwell,"Roboto Slab","Georgia",serif;
  --sans:Seravek,"Gill Sans Nova","Trebuchet MS","Segoe UI",sans-serif;
  --hand:Noteworthy,"Bradley Hand","Segoe Print","Comic Sans MS",cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--crust);background:var(--linen);
  font-family:var(--sans);font-size:18px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* фактура льна: тонкое переплетение нитей, едва заметное */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:
    repeating-linear-gradient(0deg,rgba(120,90,60,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(120,90,60,.03) 0 1px,transparent 1px 4px);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
.hand{font-family:var(--hand);color:var(--beet)}
.kicker{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--broth);font-weight:600}
.empty{color:var(--crust-faint);padding:30px 0;font-family:var(--hand);font-size:20px}
.soon{
  display:inline-block;margin-top:10px;font-family:var(--hand);font-size:15px;color:var(--dill);
  background:rgba(92,122,60,.1);padding:2px 10px;border-radius:999px;
}

/* --- кайма скатерти ------------------------------------------------------- */
.gingham{
  height:14px;position:relative;z-index:1;
  background:
    linear-gradient(90deg,rgba(154,42,58,.55) 50%,transparent 50%) 0 0/28px 28px,
    linear-gradient(rgba(154,42,58,.55) 50%,transparent 50%) 0 0/28px 28px,
    var(--cream);
  background-blend-mode:multiply;
}

/* --- шапка ---------------------------------------------------------------- */
.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;min-width:0}
.logo svg{width:46px;height:46px;flex:none}
.logo-img{max-height:48px;width:auto}
.logo b{display:block;font-family:var(--display);font-weight:700;font-size:26px;line-height:1;letter-spacing:-.01em}
.logo i{display:block;font-style:normal;font-family:var(--hand);font-size:14px;color:var(--crust-faint);margin-top:3px}

/* меню-переключатель: чекбокс скрыт с глаз, но доступен с клавиатуры */
.menu-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.burger{font-size:14px;padding:9px 16px;border-radius:999px;background:var(--cream);border:1px solid var(--rule);cursor:pointer}
.menu-toggle:focus-visible + .burger{outline:2px solid var(--beet);outline-offset:2px}
.menu{display:none;flex-basis:100%}
.menu-toggle:checked ~ .menu{display:block}
.menu ul{list-style:none;display:flex;gap:6px;margin:0;padding:12px 0 0;flex-wrap:wrap}
.menu a{display:block;font-size:15px;padding:7px 14px;border-radius:999px;color:var(--crust-soft);transition:background .2s,color .2s}
.menu a:hover{background:var(--cream);color:var(--beet)}
@media (min-width:1000px){
  /* Рубрик шесть и названия длинные — рядом с логотипом они не встают.
     Поэтому на широком экране меню живёт отдельным рядом под логотипом. */
  .burger{display:none}
  .menu{display:block;flex-basis:100%;border-top:1px dashed var(--rule);margin-top:4px}
  .menu ul{padding-top:12px;gap:4px;justify-content:space-between}
}

/* --- рекламное место ------------------------------------------------------
   Формат баннера заранее неизвестен: ширина по контейнеру, высота не ниже
   пола --ad-min и растёт под любой баннер. Известный формат — через --ad-h.
   -------------------------------------------------------------------------- */
.ad{margin:var(--step) 0}
.ad-note{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--crust-faint);margin-bottom:6px}
.ad-slot{
  min-height:var(--ad-min,250px);height:var(--ad-h,auto);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1.5px dashed var(--rule);border-radius:18px;background:rgba(255,248,236,.6);
}
.ad-slot > *{max-width:100%;margin-left:auto;margin-right:auto}
.ad-slot img,.ad-slot iframe,.ad-slot ins,.ad-slot video,.ad-slot object{display:block;max-width:100%;border:0}
.ad-slot img{height:auto}
.ad-header{--ad-min:100px}
.ad-bottom{--ad-min:280px;margin-top:calc(var(--step)*1.6)}
.ad-side{--ad-min:300px}

/* --- кнопки --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;
  padding:14px 24px;border-radius:999px;background:var(--beet);color:var(--cream);
  box-shadow:0 10px 24px rgba(154,42,58,.25);transition:transform .2s,box-shadow .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(154,42,58,.32)}
.btn.soft{background:transparent;color:var(--crust);box-shadow:none;border:1.5px solid var(--rule)}
.btn.soft:hover{border-color:var(--crust-faint)}

/* --- первый экран главной ------------------------------------------------- */
.hero{padding:30px 0 20px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,5.4vw,70px);line-height:1.03;letter-spacing:-.02em;margin:14px 0 0}
.hero h1 em{font-style:normal;color:var(--broth);position:relative}
.hero h1 em::after{ /* мазок ложкой под словом */
  content:"";position:absolute;left:-4px;right:-6px;bottom:.04em;height:.22em;z-index:-1;
  background:var(--broth-soft);border-radius:40% 60% 50% 40%/60% 40% 60% 40%;transform:rotate(-1.5deg);
}
.hero p{font-size:19px;line-height:1.6;color:var(--crust-soft);max-width:40ch;margin:20px 0 0}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}
.hero .note{font-family:var(--hand);font-size:17px;color:var(--crust-faint);transform:rotate(-3deg);display:inline-block}

/* тарелка с паром */
.bowl{position:relative;width:100%;aspect-ratio:1/1;max-width:500px;margin-left:auto}
.bowl .plate{position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#FFFDF7 0 56%,#EFE3CF 57% 60%,#FBF4E6 61% 70%,#E7D6BC 71% 72%,#FFF8EC 73%);
  box-shadow:0 40px 70px rgba(80,50,25,.22),inset 0 -6px 18px rgba(80,50,25,.06)}
.bowl svg{position:absolute;inset:0;width:100%;height:100%}
.steam path{fill:none;stroke:rgba(255,255,255,.9);stroke-width:7;stroke-linecap:round;stroke-dasharray:180;animation:steam 4.8s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.2s}
.steam path:nth-child(3){animation-delay:2.4s}
@keyframes steam{
  0%{stroke-dashoffset:180;opacity:0;transform:translateY(20px)}
  35%{opacity:.9}
  100%{stroke-dashoffset:-180;opacity:0;transform:translateY(-40px)}
}

/* --- заголовки разделов --------------------------------------------------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:50px 0 22px;flex-wrap:wrap}
.section-head h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1.1;margin:6px 0 0;letter-spacing:-.01em}
.section-head .hand{font-size:18px;transform:rotate(-2deg)}

.crumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:18px 0 0;font-size:14px;color:var(--crust-faint)}
.crumbs a:hover{color:var(--beet)}

.rubric-head{padding:26px 0 26px}
.rubric-head h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.02em;margin:8px 0 0}

/* --- рубрики -------------------------------------------------------------- */
.rubrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rubric{
  position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:start;
  padding:22px 22px 20px;border-radius:22px;background:var(--cream);border:1px solid var(--rule);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;overflow:hidden;
}
.rubric:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 18px 34px rgba(80,50,25,.12)}
.rubric .ico{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--tint)}
.rubric .ico svg{width:44px;height:44px}
.rubric .num{position:absolute;right:18px;top:12px;font-family:var(--display);font-size:44px;line-height:1;color:var(--tint)}
.rubric h3{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.2;margin:4px 0 6px;padding-right:34px}
.rubric p{margin:0;font-size:15.5px;line-height:1.5;color:var(--crust-soft)}
.r1{--tint:#F3D5CF}.r2{--tint:#F6E1B5}.r3{--tint:#F4E8C9}.r4{--tint:#EBD3BE}.r5{--tint:#DCE4C6}.r6{--tint:#D5E3E3}

/* --- рецепты на главной --------------------------------------------------- */
/* stretch: главная тянется на высоту трёх карточек справа, без пустоты под ней */
.recipes{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:stretch}
.lead{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:460px;
  border-radius:26px;overflow:hidden;background:var(--crust);color:var(--cream);
}
.lead .pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.lead:hover .pic{transform:scale(1.04)}
.lead-body{position:relative;display:block;padding:120px 32px 30px;background:linear-gradient(180deg,transparent,rgba(40,24,14,.9) 55%)}
.lead .kicker{color:var(--broth-soft)}
.lead h3{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.8vw,34px);line-height:1.14;margin:8px 0 10px}
.lead .teaser{display:block;color:rgba(255,248,236,.82);font-size:16.5px;line-height:1.55;max-width:52ch}

.stack{display:grid;gap:14px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* остальные свежие рецепты — под главной, на всю ширину */
.cards.more{margin-top:22px}
.card{
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center;
  padding:14px;border-radius:20px;background:var(--cream);border:1px solid var(--rule);
  transition:border-color .2s,transform .2s;
}
.card:hover{border-color:var(--broth);transform:translateX(3px)}
.card .thumb{display:block;width:104px;height:104px;border-radius:16px;overflow:hidden;background:var(--linen-deep)}
.card .thumb img,.card .thumb svg{width:100%;height:100%;object-fit:cover}
.card-body{display:block;min-width:0}
.card .kicker{font-size:11px}
.card h3{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.25;margin:4px 0 6px}
.card:hover h3{color:var(--beet)}
.card .teaser{display:block;font-size:14px;line-height:1.5;color:var(--crust-faint)}

/* --- пагинация со сдвигом ------------------------------------------------- */
.pager{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:34px 0 6px}
.pager a,.pager-cur{
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;
  border-radius:999px;border:1.5px solid var(--rule);font-size:15px;color:var(--crust-soft);background:var(--cream);
}
.pager a:hover{border-color:var(--broth);color:var(--crust)}
.pager-cur{background:var(--beet);border-color:var(--beet);color:var(--cream);font-weight:600}

/* --- совет на полях ------------------------------------------------------- */
.notebook{
  margin:56px auto 0;max-width:860px;position:relative;
  background:
    linear-gradient(90deg,transparent 58px,rgba(154,42,58,.25) 58px 60px,transparent 60px),
    repeating-linear-gradient(180deg,transparent 0 33px,rgba(90,120,160,.18) 33px 34px),
    #FFFDF6;
  border-radius:6px;padding:36px 44px 30px 92px;
  box-shadow:0 22px 44px rgba(80,50,25,.14);transform:rotate(-.6deg);
}
.notebook::before{ /* полоска скотча */
  content:"";position:absolute;top:-14px;left:50%;width:120px;height:28px;transform:translateX(-50%) rotate(2deg);
  background:rgba(242,201,138,.7);border-radius:3px;
}
.notebook .hand{font-size:15px;color:var(--crust-faint)}
.notebook blockquote{margin:6px 0 0;font-family:var(--hand);font-size:24px;line-height:34px;color:var(--crust)}

/* --- страница рецепта ----------------------------------------------------- */
.title-block{padding:22px 0 26px;max-width:880px}
.title-block h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.2vw,54px);line-height:1.07;letter-spacing:-.02em;margin:10px 0 0}
.title-block .kicker:hover{color:var(--beet)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.layout > main{min-width:0}
.side{position:sticky;top:22px;display:grid;gap:22px}

/* лист рецепта: текст на плотной сметанной подложке, а не на льне */
.sheet{background:var(--cream);border:1px solid var(--rule);border-radius:26px;padding:0 0 42px;overflow:hidden}
.cover img{width:100%;height:auto;max-height:520px;object-fit:cover}

.box{background:var(--cream);border:1px solid var(--rule);border-radius:22px;padding:20px 20px 16px}
.box h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--broth);margin:0 0 10px;font-weight:600}
.box ul{list-style:none;margin:0;padding:0}
.box li{border-bottom:1px dashed var(--rule)}
.box li:last-child{border-bottom:0}
.box li a{display:block;padding:9px 0;font-size:15.5px;color:var(--crust-soft)}
.box li a:hover,.box li.on a{color:var(--beet)}
.box li.on a{font-weight:600}
.tip{background:#FFFDF6;transform:rotate(1deg)}
.tip .hand{font-size:15px}
.tip p{margin:6px 0 0;font-family:var(--hand);font-size:19px;line-height:1.45;color:var(--crust)}

/* --- текст рецепта: разметка приходит из ИИ-конвейера --------------------- */
.article-content{max-width:var(--col);margin:0 auto;padding:36px 44px 0;font-size:18.5px;line-height:1.7}
.article-content p{margin:0 0 var(--step)}
.article-content > p:first-of-type{font-size:20.5px;line-height:1.6;color:var(--crust-soft)}
.article-content h2{
  font-family:var(--display);font-weight:700;font-size:28px;line-height:1.2;letter-spacing:-.01em;
  margin:calc(var(--step)*1.7) 0 calc(var(--step)*.6);padding-left:44px;position:relative;
}
.article-content h2::before{ /* маленькая миска перед подзаголовком */
  content:"";position:absolute;left:0;top:.28em;width:30px;height:16px;
  border-radius:0 0 16px 16px;background:var(--broth);box-shadow:0 -3px 0 -1px var(--crust);
}
.article-content h3{font-family:var(--display);font-weight:700;font-size:21px;margin:calc(var(--step)*1.1) 0 10px}
.article-content a{color:var(--beet);border-bottom:1.5px solid rgba(154,42,58,.3)}
.article-content a:hover{border-color:var(--beet)}
.article-content strong{font-weight:700;color:var(--crust)}

/* списки: в рецептах это обычно ингредиенты — пунктиром, как в тетради */
.article-content ul{list-style:none;margin:0 0 var(--step);padding:14px 20px;background:#FFFDF6;border-radius:16px;border:1px dashed var(--rule)}
.article-content ul li{position:relative;padding:7px 0 7px 30px;border-bottom:1px dashed var(--rule)}
.article-content ul li:last-child{border-bottom:0}
.article-content ul li::before{
  content:"";position:absolute;left:4px;top:.95em;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--dill);background:var(--cream);
}
/* нумерованные — шаги приготовления: крупный номер в бульонном кружке */
.article-content ol{list-style:none;margin:0 0 var(--step);padding:0;counter-reset:step}
.article-content ol li{counter-increment:step;position:relative;padding:4px 0 16px 58px;min-height:44px}
.article-content ol li::before{
  content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--broth-soft);color:var(--crust);
  font-family:var(--display);font-weight:700;font-size:18px;
}
.article-content ol li:not(:last-child)::after{ /* пунктир между шагами */
  content:"";position:absolute;left:19px;top:44px;bottom:2px;border-left:2px dotted var(--rule);
}
.article-content blockquote{
  margin:0 0 var(--step);padding:18px 22px;border-radius:16px;background:rgba(242,201,138,.28);
  border-left:4px solid var(--broth);font-size:18px;
}
.article-content blockquote p:last-child{margin-bottom:0}

/* таблицы: переносы разрешены, иначе таблица распирает колонку */
.article-content table{
  width:100%;border-collapse:collapse;margin:0 0 var(--step);font-size:16.5px;
  table-layout:auto;font-variant-numeric:tabular-nums;background:#FFFDF6;border-radius:14px;overflow:hidden;
}
.article-content th{
  text-align:left;padding:12px 14px;background:var(--linen-deep);font-size:14.5px;
  color:var(--crust-soft);font-weight:600;
}
/* заголовки колонок без капса и разрядки: «Кастрюля 3 л» в капсе отрывала «л» на новую строку */
.article-content td{padding:12px 14px;border-top:1px dashed var(--rule)}
.article-content tbody tr:hover td{background:rgba(242,201,138,.18)}

/* иллюстрации и подписи об авторстве: подписи обязаны быть видны по лицензии */
.article-content figure.article-illustration{margin:calc(var(--step)*1.4) 0;padding:0}
.article-content figure.article-illustration img{width:100%;height:auto;border-radius:18px;box-shadow:0 18px 36px rgba(80,50,25,.14)}
.article-content figure.article-illustration figcaption{font-size:13px;line-height:1.5;color:var(--crust-faint);padding:10px 4px 0}
.article-content p.image-credits{
  font-size:13px;line-height:1.6;color:var(--crust-faint);
  border-top:1px dashed var(--rule);padding-top:14px;margin-top:calc(var(--step)*1.3);
}

.related .section-head{margin-top:44px}

/* --- подвал ---------------------------------------------------------------*/
footer{margin-top:80px;background:var(--crust);color:var(--cream);position:relative;z-index:1}
footer .gingham{background:
    linear-gradient(90deg,rgba(255,248,236,.18) 50%,transparent 50%) 0 0/28px 28px,
    linear-gradient(rgba(255,248,236,.18) 50%,transparent 50%) 0 0/28px 28px,var(--beet)}
footer .cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:40px;padding-top:48px;padding-bottom:36px}
footer h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--broth-soft);margin:0 0 14px;font-weight:600}
.fbrand{font-family:var(--display);font-size:28px;margin:0 0 10px}
footer p{margin:0;color:rgba(255,248,236,.7);font-size:15.5px;max-width:40ch}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:rgba(255,248,236,.86);font-size:15.5px}
footer a:hover{color:var(--broth-soft)}
.copy{border-top:1px solid rgba(255,248,236,.14)}
.copy .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding-top:18px;padding-bottom:24px}
.copy-mark{margin:0;font-size:13px;color:rgba(255,248,236,.72)}
.legal{margin:0;font-size:12.5px;line-height:1.55;color:rgba(255,248,236,.48);max-width:92ch}
.legal a{border-bottom:1px solid rgba(255,248,236,.3)}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* --- планшет и телефон ---------------------------------------------------- */
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .bowl{margin:0 auto;max-width:400px}
  .rubrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recipes{grid-template-columns:minmax(0,1fr)}
  .layout{grid-template-columns:minmax(0,1fr);gap:30px}
  .side{position:static}
  .ad-side{--ad-min:280px}
  footer .cols{grid-template-columns:minmax(0,1fr);gap:26px}
}
@media (max-width:640px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  .logo i{display:none}
  .rubrics,.cards{grid-template-columns:minmax(0,1fr)}
  .lead{min-height:380px}
  .lead-body{padding:90px 22px 24px}
  .sheet{border-radius:20px;margin:0 -8px}
  .article-content{padding:26px 20px 0;font-size:17.5px}
  .article-content > p:first-of-type{font-size:19px}
  .article-content h2{font-size:23px;padding-left:40px}
  /* на узком экране таблица прокручивается внутри себя, а не тянет страницу.
     width обязателен: без него блочная таблица берёт ширину по содержимому */
  .article-content table{display:block;width:100%;max-width:100%;overflow-x:auto;font-size:15px}
  .notebook{padding:28px 20px 24px 70px;transform:none}
  .notebook blockquote{font-size:21px}
  .tip{transform:none}
}

/* подпись редакции и дата под заголовком статьи */
.byline{margin:.4em 0 0;font-size:.9rem;opacity:.72}
.byline time{white-space:nowrap}