/* =========================================================
   Заквасочная — style.css
   Тёплый «хлебный» дизайн: крем/пергамент, тёмная корочка,
   янтарь и шалфей. Fraunces (заголовки) + Work Sans (текст).
   ========================================================= */

:root{
  --cream:#F3ECDD;
  --parchment:#FBF6EC;
  --crust:#3E2A1D;
  --rye:#8A5A3B;
  --amber:#C08A3E;
  --sage:#6E7F5A;
  --sage-dark:#4F5C40;
  --line:#E3D6BC;
  --radius:22px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--crust);
  font-family:'Work Sans', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.wordmark{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--crust);
  margin:0;
  line-height:1.18;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
p{margin:0 0 1em;}
ul{margin:0;}

:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

/* ---------------- layout ---------------- */
main.wide{max-width:1180px;margin:0 auto;padding:44px 24px 90px;}
main.narrow{max-width:740px;margin:0 auto;padding:40px 24px 90px;}

/* ---------------- top strip ---------------- */
.topstrip{
  background:var(--crust);
  color:var(--cream);
  text-align:center;
  font-size:14px;
  padding:9px 16px;
  letter-spacing:.2px;
}
.topstrip a{border-bottom:1px solid var(--amber);color:var(--amber);}
.topstrip a:hover{opacity:.8;}

/* ---------------- header ---------------- */
.site-header{
  background:var(--parchment);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px; gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{width:44px;height:44px;flex:none;}
.brand-text{display:flex;flex-direction:column;line-height:1.2;}
.wordmark{font-size:24px;letter-spacing:.2px;}
.site-tagline{
  font-size:12px;color:var(--rye);letter-spacing:1.4px;
  text-transform:uppercase;font-weight:600;font-family:'Work Sans',sans-serif;
}

.board-nav{display:flex;gap:26px;flex-wrap:wrap;}
.board-nav a{
  font-size:14.5px;font-weight:500;color:var(--crust);
  padding:6px 0;border-bottom:2px solid transparent;
  transition:border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.board-nav a:hover,.board-nav a.active{border-color:var(--amber);color:var(--rye);}

.burger{display:none;background:none;border:none;font-size:24px;color:var(--crust);cursor:pointer;line-height:1;}

@media(max-width:900px){
  .board-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--parchment);
    flex-direction:column;gap:0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .board-nav.open{display:flex;}
  .board-nav a{padding:14px 24px;border-bottom:1px solid var(--line);}
  .burger{display:block;}
}

/* ---------------- hero (главная) ---------------- */
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
  padding:20px 0 60px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--sage-dark);font-weight:600;margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--sage-dark);display:inline-block;}
.hero h1{font-size:44px;max-width:560px;}
.hero p{margin-top:18px;font-size:17.5px;max-width:500px;color:#5A4A3A;}
.hero-figure svg{width:100%;height:auto;}
.hero-figure img{
  width:100%;height:auto;border-radius:28px;
  box-shadow:0 24px 50px -20px rgba(62,42,29,.35);
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;}
  .hero-figure{order:-1;max-width:280px;margin:0 auto;}
  .hero h1{font-size:32px;}
}

/* ---------------- section heading ---------------- */
.section-heading{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:28px;gap:20px;flex-wrap:wrap;
}
.section-heading h2{font-size:28px;}
.section-sub{color:var(--rye);font-size:13.5px;letter-spacing:1px;text-transform:uppercase;font-weight:600;}

main.wide section{margin-bottom:68px;}
main.wide section:last-child{margin-bottom:0;}

/* ---------------- featured (выбор читателей) ---------------- */
.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media(max-width:900px){.featured-grid{grid-template-columns:1fr;}}

.featured-card{
  background:var(--parchment);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.featured-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -14px rgba(62,42,29,.35);}
.featured-photo{
  aspect-ratio:4/3;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#E7D3AE,#CBA36A);
  display:flex;align-items:center;justify-content:center;
}
.featured-photo img{width:100%;height:100%;object-fit:cover;}
.featured-photo svg{width:56%;height:56%;}
.featured-badge{
  position:absolute;top:14px;left:14px;
  background:var(--sage-dark);color:var(--parchment);
  font-size:11px;letter-spacing:1px;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;font-weight:600;
}
.featured-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;gap:12px;}
.featured-title{font-family:'Fraunces',serif;font-weight:600;font-size:18.5px;line-height:1.32;}
.read-more{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--rye);}
.read-more::after{content:" →";}

/* ---------------- boards grid (все разделы) ---------------- */
.board-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
@media(max-width:1000px){.board-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.board-grid{grid-template-columns:1fr;}}

.board-tile{
  background:var(--crust);color:var(--cream);
  border-radius:var(--radius);padding:26px 22px;
  display:flex;flex-direction:column;gap:12px;min-height:190px;
  transition:transform .2s ease;
}
.board-tile:hover{transform:translateY(-3px);}
.board-tile:nth-child(5n+2){background:var(--rye);}
.board-tile:nth-child(5n+3){background:var(--sage-dark);}
.board-tile:nth-child(5n+4){background:#5B3B27;}
.board-tile:nth-child(5n+5){background:var(--amber);color:var(--crust);}
.leaf-icon{width:20px;height:20px;opacity:.85;}
.board-tile h3{color:inherit;font-size:19px;}
.board-tile p{font-size:13.5px;opacity:.85;margin:0;}
.tile-cta{margin-top:auto;font-size:13px;font-weight:600;}
.tile-cta::after{content:" →";}

/* ---------------- new articles ---------------- */
.new-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media(max-width:900px){.new-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.new-grid{grid-template-columns:1fr;}}

.new-card{display:flex;flex-direction:column;gap:12px;}
.new-photo{
  aspect-ratio:4/3;border-radius:16px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,#EDE0C4,#D8B87D);
  display:flex;align-items:center;justify-content:center;
}
.new-photo img{width:100%;height:100%;object-fit:cover;}
.new-photo svg{width:46%;}
.new-badge{
  position:absolute;top:12px;left:12px;
  background:var(--sage-dark);color:var(--parchment);
  font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;font-weight:700;
}
.new-title{font-size:16.5px;line-height:1.35;font-weight:600;font-family:'Fraunces',serif;}

/* ---------------- cta block ---------------- */
.cta-block{
  max-width:1180px;margin:0 auto;
  background:var(--sage-dark);color:var(--parchment);
  border-radius:32px;padding:56px 48px;
  position:relative;overflow:hidden;text-align:left;
}
.cta-block::before{
  content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;
  border-radius:50%;background:rgba(255,255,255,.06);
}
.cta-block h2{color:var(--parchment);font-size:26px;max-width:560px;position:relative;}
.cta-block p{max-width:560px;color:#E4E9DD;margin-top:12px;font-size:15.5px;position:relative;}
.cta-button{
  display:inline-block;background:var(--amber);color:var(--crust);
  font-weight:700;font-size:15px;padding:15px 28px;border-radius:100px;
  white-space:nowrap;margin-top:22px;position:relative;
  transition:transform .2s ease, background .2s ease;
}
.cta-button:hover{background:#D6A455;transform:translateY(-2px);}

.cta-block--inline{padding:40px 36px;border-radius:26px;}
.cta-block--inline p{margin-top:0;}

/* ---------------- footer ---------------- */
footer{
  background:var(--crust);color:#CBBFA9;
  text-align:center;font-size:14px;padding:30px 24px;
}

/* =========================================================
   Страница статьи
   ========================================================= */
main.narrow .eyebrow{margin-bottom:10px;}
.article-title{font-size:34px;margin-bottom:22px;}
.hero-photo{
  aspect-ratio:16/9;border-radius:20px;overflow:hidden;margin-bottom:24px;
  background:linear-gradient(135deg,#E7D3AE,#CBA36A);
  display:flex;align-items:center;justify-content:center;
}
.hero-photo img{width:100%;height:100%;object-fit:cover;}
.hero-photo svg{width:30%;}

.intro{font-size:18px;color:#5A4A3A;margin-bottom:8px;}

article{font-size:16.5px;color:var(--crust);}
article p{margin:0 0 1.1em;}
.section-title{font-size:25px;margin:44px 0 16px;}
.subhead{font-size:19px;margin:30px 0 12px;color:var(--rye);}

.ingredients,.ingredients-box{
  list-style:none;padding:0;margin:0 0 1.4em;
  display:flex;flex-direction:column;gap:9px;
}
.ingredients-box{
  background:var(--parchment);border:1px solid var(--line);
  border-radius:16px;padding:20px 22px;
}
.ingredients li,.ingredients-box li{
  padding-left:22px;position:relative;
}
.ingredients li::before,.ingredients-box li::before{
  content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;border-radius:50%;background:var(--amber);
}

.product-link{
  display:inline-block;background:var(--sage-dark);color:var(--parchment)!important;
  font-size:13px;font-weight:600;padding:4px 12px;border-radius:100px;
  margin-left:6px;white-space:nowrap;
}

.inline-photo{
  aspect-ratio:16/9;border-radius:16px;overflow:hidden;margin:24px 0;
}

article strong{color:var(--crust);}

/* related links */
.related{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);}
.related h3{font-size:20px;margin-bottom:16px;}
.related-list{display:flex;flex-direction:column;gap:10px;}
.related-list a{
  font-size:15px;font-weight:600;color:var(--rye);
  padding:12px 16px;background:var(--parchment);border-radius:12px;
  border:1px solid var(--line);
}
.related-list a:hover{border-color:var(--amber);}

/* =========================================================
   Страница категории (доски)
   ========================================================= */
.hub-intro{max-width:640px;margin-bottom:44px;}
.hub-title{font-size:34px;margin-bottom:14px;}
.hub-intro p{font-size:17px;color:#5A4A3A;}

.article-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:20px;}
@media(max-width:1000px){.article-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.article-grid{grid-template-columns:1fr;}}

.article-card{display:flex;flex-direction:column;gap:12px;}
.card-photo{
  aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:linear-gradient(150deg,#EDE0C4,#D8B87D);
  display:flex;align-items:center;justify-content:center;
}
.card-photo img{width:100%;height:100%;object-fit:cover;}
.card-photo svg{width:42%;}
.card-title{font-size:15.5px;line-height:1.35;font-weight:600;font-family:'Fraunces',serif;}

/* pagination */
.pagination{
  display:flex;justify-content:center;align-items:center;gap:8px;
  margin:56px 0 10px;flex-wrap:wrap;
}
.pagination a,.pagination .current{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;
  border-radius:100px;font-size:14px;font-weight:600;
}
.pagination a{background:var(--parchment);border:1px solid var(--line);color:var(--crust);}
.pagination a:hover{border-color:var(--amber);}
.pagination .current{background:var(--crust);color:var(--cream);}
footer .ad-disclosure { margin-top: 14px; }
footer .ad-disclosure p {
  margin: 2px 0;
  font-size: 12px;
  color: rgba(243, 236, 221, 0.55);
}
.header-inner{gap:18px;}
.board-nav{gap:18px;flex-wrap:nowrap;}
.board-nav a{font-size:13.5px;}

@media(max-width:1150px){
  .board-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--parchment);
    flex-direction:column;gap:0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .board-nav.open{display:flex;}
  .board-nav a{padding:14px 24px;border-bottom:1px solid var(--line);font-size:15px;}
  .burger{display:block;}
}
/* ============================================================
   Карточка рецепта, хлебные крошки и дата публикации.
   Дописано в конец style.css — так эти правила перебивают
   прежние и не надо искать исходные.
   Палитра взята из шапки сайта: #C08A3E, #3E2A1D, #F3ECDD.
   ============================================================ */

/* --- крошки вместо прежнего eyebrow --- */
.crumbs {
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #A89684;
  margin-bottom: .6rem;
}

.crumbs a {
  color: #C08A3E;
  text-decoration: none;
}

.crumbs a:hover,
.crumbs a:focus-visible {
  text-decoration: underline;
}

.crumbs span {
  margin: 0 .35em;
  color: #C7B77E;
}

/* --- дата публикации --- */
.pubdate {
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: .85rem;
  color: #A89684;
  margin: -.4rem 0 1.4rem;
}

/* --- карточка рецепта --- */
.recipe-card {
  margin: 2rem 0 2.5rem;
  padding: 1.5rem 1.6rem 1.6rem;
  background: #F3ECDD;
  border-left: 4px solid #C08A3E;
  border-radius: 2px 10px 10px 2px;
}

.recipe-card__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #3E2A1D;
  margin: 0 0 1rem;
}

/* Факты в строку: подпись мелко сверху, значение крупно снизу.
   На узком экране колонки схлопываются сами за счёт flex-wrap. */
.recipe-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 0 0 1.2rem;
  padding: 0 0 1.2rem;
  border-bottom: 1px solid rgba(62, 42, 29, .12);
}

.recipe-card__facts > div {
  min-width: 5.5rem;
}

.recipe-card__facts dt {
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A89684;
  margin-bottom: .25rem;
}

.recipe-card__facts dd {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.1rem;
  color: #3E2A1D;
  margin: 0;
}

.recipe-card__subtitle {
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7C8A5C;
  margin: 0 0 .7rem;
}

.recipe-card__ingredients {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}

.recipe-card__ingredients li {
  break-inside: avoid;
  padding: .3rem 0 .3rem 1rem;
  position: relative;
  font-size: .95rem;
  line-height: 1.45;
  color: #3E2A1D;
}

/* Точка-маркер: мелкая деталь, но она держит список читаемым
   в две колонки, где обычные буллеты выпадают из ритма. */
.recipe-card__ingredients li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C08A3E;
}

@media (max-width: 560px) {
  .recipe-card {
    padding: 1.2rem 1.1rem 1.3rem;
  }
  .recipe-card__ingredients {
    columns: 1;
  }
  .recipe-card__facts {
    gap: 1.1rem;
  }
}