/* ==========================================================================
   СВЕЖИЙ СЛЕД — design tokens
   Палитра: бумажно-шалфейный фон, глубокий тёмно-зелёный, глиняный акцент,
   травяной зелёный, горчичная линия. Тема: аптечная карточка-рецепт.
   ========================================================================== */
:root{
  --paper:        #EFF1EA;
  --paper-card:   #FBFAF6;
  --ink:          #1E2A26;
  --ink-soft:     #4B5A53;
  --teal-deep:    #1F3D3A;
  --teal-deep-2:  #18302D;
  --clay:         #C1633B;
  --clay-dark:    #A14E2C;
  --sage:         #6E8F6B;
  --sage-dark:    #54704F;
  --gold:         #C9A227;
  --line:         rgba(31,61,58,.16);
  --line-soft:    rgba(31,61,58,.09);
  --shadow-card:  0 1px 2px rgba(20,30,27,.04), 0 8px 24px -8px rgba(20,30,27,.12);
  --shadow-pop:   0 16px 40px -12px rgba(20,30,27,.28);

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --radius-card: 22px;
  --radius-sm:   10px;
  --container:   1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
.article-body ul{list-style:disc; padding-left:1.3em;}
.article-body ol{list-style:decimal; padding-left:1.3em;}

.icon{width:1em; height:1em; flex:none;}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.18;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(32px,5vw,52px);}
h2{font-size:clamp(24px,3.2vw,34px);}
h3{font-size:20px;}
p{margin:0 0 1.1em;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sage-dark);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  padding:12px 22px;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-clay{background:var(--clay); color:#fff;}
.btn-clay:hover{background:var(--clay-dark);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--teal-deep); background:rgba(31,61,58,.05);}
.btn-line{background:transparent; border-color:rgba(255,255,255,.3); color:#fff;}
.btn-line:hover{border-color:#fff;}

/* ===== Skip link / focus ===== */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--teal-deep); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:999;
}
.skip-link:focus{left:0;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  background:var(--teal-deep);
  color:#EFEFE8;
  position:relative;
  z-index:50;
}
.header-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
  gap:24px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  color:#fff;
}
.logo .icon{width:26px; height:26px; color:var(--gold);}
.logo small{
  display:block;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(239,239,232,.55);
  font-weight:400;
}

.main-nav{display:none;}
.main-nav ul{display:flex; gap:6px; flex-wrap:wrap;}
.main-nav a{
  display:flex; align-items:center; gap:7px;
  padding:9px 13px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  color:rgba(239,239,232,.82);
  transition:background .2s, color .2s;
  white-space:nowrap;
}
.main-nav a:hover, .main-nav a.is-active{
  background:rgba(239,239,232,.1);
  color:#fff;
}
.main-nav .icon{width:16px; height:16px; color:var(--gold);}

.nav-toggle{
  background:none; border:1.5px solid rgba(239,239,232,.3); color:#fff;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.nav-toggle .icon{width:20px; height:20px;}
.nav-toggle-icon-close{display:none;}
.nav-toggle.is-open .nav-toggle-icon-open{display:none;}
.nav-toggle.is-open .nav-toggle-icon-close{display:flex;}

.mobile-nav{
  display:none;
  background:var(--teal-deep-2);
  padding:8px 0 18px;
}
.mobile-nav.is-open{display:block;}
.mobile-nav ul{display:flex; flex-direction:column; gap:2px;}
.mobile-nav a{
  display:flex; align-items:center; gap:10px;
  padding:11px 24px;
  font-size:15px; font-weight:600;
  color:rgba(239,239,232,.85);
}
.mobile-nav .icon{width:17px; height:17px; color:var(--gold);}

@media (min-width:920px){
  .main-nav{display:block;}
  .nav-toggle{display:none;}
  .mobile-nav{display:none !important;}
}

/* ==========================================================================
   HERO (homepage)
   ========================================================================== */
.hero{
  background:var(--teal-deep);
  color:#EFEFE8;
  padding:56px 0 84px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:auto -10% -60% -10%;
  height:260px;
  background:radial-gradient(ellipse at center, rgba(201,162,39,.16), transparent 70%);
  pointer-events:none;
}
.hero-grid{
  display:grid; gap:40px;
  position:relative; z-index:1;
}
.hero-text .eyebrow{color:var(--gold);}
.hero-text h1{color:#fff; max-width:13.5ch;}
.hero-text p{color:rgba(239,239,232,.78); font-size:18px; max-width:46ch;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px;}

.hero-card{
  background:var(--paper-card);
  color:var(--ink);
  border-radius:var(--radius-card);
  padding:26px;
  box-shadow:var(--shadow-pop);
  position:relative;
}
.hero-card .eyebrow{color:var(--sage-dark);}
.hero-card h3{margin-bottom:14px;}
.symptom-list{display:flex; flex-direction:column; gap:10px;}
.symptom-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; line-height:1.45;
  padding:10px 12px;
  background:var(--paper);
  border-radius:12px;
}
.symptom-list .icon{width:17px; height:17px; color:var(--clay); margin-top:1px;}

@media (min-width:880px){
  .hero-grid{grid-template-columns:1.2fr .9fr; align-items:center;}
}

/* ==========================================================================
   RUBRIC STAMPS (homepage grid)
   ========================================================================== */
.section{padding:64px 0;}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:30px; flex-wrap:wrap;
}
.section-head p{margin:0; color:var(--ink-soft); max-width:52ch;}

.rubric-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:680px){.rubric-grid{grid-template-columns:repeat(4,1fr);}}

.rubric-stamp{
  background:var(--paper-card);
  border:1px solid var(--line-soft);
  border-radius:18px;
  padding:20px 16px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rubric-stamp:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-card);
  border-color:var(--line);
}
.stamp-icon{
  width:46px; height:46px;
  border-radius:50%;
  border:1.6px dashed var(--gold);
  display:flex; align-items:center; justify-content:center;
  color:var(--teal-deep);
}
.stamp-icon .icon{width:22px; height:22px;}
.rubric-stamp h3{font-size:16.5px; margin-bottom:2px;}
.rubric-stamp p{font-size:13.5px; color:var(--ink-soft); margin:0;}
.rubric-stamp .count{
  margin-top:auto;
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--sage-dark); text-transform:uppercase; letter-spacing:.04em;
}

/* ==========================================================================
   ARTICLE CARDS (listings)
   ========================================================================== */
.article-grid{display:grid; gap:18px; grid-template-columns:1fr;}
@media (min-width:680px){.article-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1040px){.article-grid{grid-template-columns:repeat(3,1fr);}}

.article-card{
  background:var(--paper-card);
  border-radius:18px;
  border:1px solid var(--line-soft);
  padding:22px;
  display:flex; flex-direction:column; gap:12px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.article-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-card);}
.card-meta{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--sage-dark);
  text-transform:uppercase; letter-spacing:.03em;
}
.card-meta .rubric-pill{
  background:rgba(110,143,107,.14); color:var(--sage-dark);
  padding:4px 9px; border-radius:999px;
}
.article-card h3{font-size:18.5px; margin-bottom:0;}
.article-card p{font-size:14.5px; color:var(--ink-soft); margin:0;}
.card-foot{
  margin-top:auto;
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700; color:var(--clay);
}
.card-foot .icon{width:15px; height:15px;}

/* ==========================================================================
   ARTICLE PAGE — "карточка-рецепт"
   ========================================================================== */
.breadcrumbs{
  font-family:var(--font-mono); font-size:12px; color:var(--ink-soft);
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:18px 0 0;
}
.breadcrumbs a{color:var(--sage-dark);}
.breadcrumbs a:hover{text-decoration:underline;}
.breadcrumbs .sep{opacity:.5;}

.article-shell{padding:18px 0 70px;}
.recipe-card{
  background:var(--paper-card);
  border-radius:26px;
  box-shadow:var(--shadow-card);
  margin-top:18px;
  position:relative;
  overflow:hidden;
}
.recipe-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:14px;
  background-image:radial-gradient(circle, var(--paper) 4px, transparent 4.5px);
  background-size:22px 14px;
  background-position:6px -7px;
}
.recipe-head{
  padding:40px 32px 26px;
  border-bottom:1px dashed var(--line);
  display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap;
}
.recipe-stamp{
  width:64px; height:64px; flex:none;
  border-radius:50%;
  border:1.6px dashed var(--gold);
  display:flex; align-items:center; justify-content:center;
  color:var(--teal-deep);
}
.recipe-stamp .icon{width:30px; height:30px;}
.recipe-head-text{flex:1; min-width:240px;}
.recipe-head h1{margin-bottom:10px;}
.recipe-meta{
  display:flex; gap:16px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft);
}
.recipe-meta span{display:flex; align-items:center; gap:6px;}
.recipe-meta .icon{width:14px; height:14px; color:var(--clay);}

.article-toolbar{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:18px 32px; border-bottom:1px solid var(--line-soft);
  background:rgba(110,143,107,.05);
}
.print-btn{
  background:var(--teal-deep); color:#fff; border:none;
  font-family:var(--font-body); font-weight:700; font-size:14px;
  padding:10px 18px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.print-btn:hover{background:var(--teal-deep-2);}
.print-btn .icon{width:16px; height:16px;}

.article-body{padding:34px 32px 10px; max-width:720px;}
.article-body h2{margin-top:1.6em;}
.article-body h2:first-child{margin-top:0;}
.article-body h3{margin-top:1.3em;}
.article-body ul, .article-body ol{margin:0 0 1.1em; padding-left:1.3em;}
.article-body li{margin-bottom:.5em;}
.article-body blockquote{
  margin:1.6em 0; padding:16px 20px;
  border-left:3px solid var(--clay);
  background:rgba(193,99,59,.06);
  border-radius:0 12px 12px 0;
  font-style:italic; color:var(--ink-soft);
}
.article-body p a, .article-body li a{
  color:var(--clay-dark);
  text-decoration:underline;
  text-decoration-color:rgba(193,99,59,.4);
  text-underline-offset:2px;
  font-weight:600;
}
.article-body p a:hover, .article-body li a:hover{
  text-decoration-color:var(--clay-dark);
}
.article-body table{width:100%; border-collapse:collapse; margin:1.4em 0; font-size:15px;}
.article-body th, .article-body td{border:1px solid var(--line); padding:9px 12px; text-align:left;}
.article-body th{background:rgba(31,61,58,.06); font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.03em;}

.callout{
  margin:1.8em 0; padding:18px 20px;
  border-radius:14px;
  display:flex; gap:12px;
  font-size:15px;
}
.callout .icon{width:20px; height:20px; flex:none; margin-top:2px;}
.callout a{text-decoration:underline; font-weight:700;}
.callout-warn{background:rgba(193,99,59,.09); color:var(--clay-dark);}
.callout-tip{background:rgba(110,143,107,.12); color:var(--sage-dark);}

.tag-row{
  padding:8px 32px 32px;
  display:flex; gap:8px; flex-wrap:wrap;
}
.tag-chip{
  font-family:var(--font-mono); font-size:12px;
  padding:6px 12px; border-radius:999px;
  background:var(--paper); border:1px solid var(--line);
  color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:6px;
}
.tag-chip .icon{width:11px; height:11px;}
.tag-chip:hover{border-color:var(--sage); color:var(--sage-dark);}

/* related */
.related{padding:30px 32px 40px; border-top:1px solid var(--line-soft);}
.related h2{font-size:19px;}

.faq-block{padding:8px 32px 30px;}
.faq-block h2{font-size:19px; margin-bottom:14px;}
.faq-item{
  border:1px solid var(--line); border-radius:14px;
  padding:14px 18px; margin-bottom:10px; background:var(--paper);
}
.faq-item summary{
  font-weight:700; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:var(--font-mono); color:var(--clay); font-size:18px;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin:10px 0 0; color:var(--ink-soft); font-size:14.5px;}

@media (max-width:560px){
  .recipe-head{padding:28px 18px 20px; gap:14px;}
  .recipe-stamp{width:52px; height:52px;}
  .recipe-stamp .icon{width:24px; height:24px;}
  .article-toolbar{padding:14px 18px;}
  .article-body{padding:26px 18px 4px;}
  .tag-row{padding:6px 18px 26px;}
  .related{padding:22px 18px 32px;}
  .faq-block{padding:6px 18px 26px;}
}

/* ==========================================================================
   RUBRIC / TAG LISTING PAGES
   ========================================================================== */
.listing-hero{
  background:var(--teal-deep); color:#EFEFE8;
  padding:46px 0 50px;
}
.listing-hero .eyebrow{color:var(--gold);}
.listing-hero h1{color:#fff; margin-bottom:6px;}
.listing-hero p{color:rgba(239,239,232,.78); max-width:60ch; margin:0;}

.tag-cloud{display:flex; flex-wrap:wrap; gap:8px;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--teal-deep-2); color:rgba(239,239,232,.75); padding:50px 0 26px;}
.footer-grid{display:grid; gap:32px; grid-template-columns:1.3fr 1fr 1fr;}
.footer-col h4{color:#fff; font-family:var(--font-body); font-size:14px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px;}
.footer-col ul{display:flex; flex-direction:column; gap:9px;}
.footer-col a{font-size:14px; color:rgba(239,239,232,.7);}
.footer-col a:hover{color:#fff;}
.footer-brand{display:flex; align-items:center; gap:10px; color:#fff; font-family:var(--font-display); font-size:18px; margin-bottom:10px;}
.footer-brand .icon{color:var(--gold); width:22px; height:22px;}
.footer-disclaimer{font-size:13px; line-height:1.6; color:rgba(239,239,232,.55); max-width:60ch;}
.footer-bottom{
  margin-top:36px; padding-top:20px; border-top:1px solid rgba(239,239,232,.12);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12.5px; color:rgba(239,239,232,.5);
}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   MISC
   ========================================================================== */
.page-search{
  display:flex; gap:8px; align-items:center;
  background:var(--paper-card); border:1px solid var(--line);
  border-radius:999px; padding:6px 6px 6px 16px; max-width:420px;
}
.page-search input{
  border:none; background:none; flex:1; font-family:var(--font-body); font-size:14.5px; color:var(--ink); outline:none;
}
.page-search button{
  background:var(--clay); color:#fff; border:none; border-radius:50%;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.page-search .icon{width:16px; height:16px;}

.empty-state{
  text-align:center; padding:60px 20px; color:var(--ink-soft);
}

::selection{background:var(--gold); color:var(--ink);}

/* Печатная шапка и фирменная подпись — только для print.css, на экране всегда скрыты */
.print-header, .print-footer{display:none;}