/* Изданието има един вид — тъмен, — независимо от настройката на устройството.
   Дотук палитрата се сменяше според prefers-color-scheme, затова на компютър в
   светъл режим сайтът излизаше блед и не приличаше на себе си.
   color-scheme: dark казва на браузъра да оцвети и лентите за превъртане и
   полетата за въвеждане в тъмно, вместо да ги остави бели. */
:root{
    color-scheme: dark;
    --canvas:#0A0B0A;
    --surface:#141613;
    --surface-alt:#1C1F1B;
    --ink:#EDEEE9;
    --ink-soft:#B6B9B3;
    --ink-faint:#868A82;
    --line:#2B2E28;
    --line-soft:#21241E;
    --accent:#FFBA00;
    --accent-ink:#1A1200;
    --accent-soft:#3B2E06;
    --font:-apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --measure: 66ch;
  }

  *{box-sizing:border-box;}
  body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);}
  h1,h2,h3{font-family:var(--font);text-wrap:balance;margin:0;}
  p{margin:0;}
  a{color:inherit;}
  ::selection{background:var(--accent-soft);}
  .icon,.ic{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .icon{width:1em;height:1em;}

  .eyebrow{
    font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--accent); font-weight:700;
  }


  .qr-mark{width:22px; height:22px; flex:none; background:var(--ink); padding:4px; border-radius:3px; display:grid; place-items:center;}
  .qr-mark-inner{width:100%; height:100%; background:var(--surface-alt); display:grid; place-items:center;}
  .qr-mark-inner::after{content:""; width:44%; height:44%; background:var(--ink);}

  .site-header{
    display:flex; align-items:center; justify-content:space-between; gap:2rem;
    padding:1.1rem clamp(1.25rem, 4vw, 3rem);
    border-bottom:1px solid var(--line);
    background:var(--canvas);
  }
  .wordmark{display:flex; align-items:center; gap:.55rem; text-decoration:none;}
  .wordmark span{font-weight:800; font-size:1.28rem; letter-spacing:-.01em;}
  .wordmark span b{font-weight:800; color:var(--accent);}
  .site-nav{display:flex; gap:1.4rem; flex-wrap:wrap;}
  .site-nav a{font-size:.85rem; font-weight:500; text-decoration:none; color:var(--ink-soft); border-bottom:1px solid transparent;}
  .site-nav a:hover{color:var(--ink); border-color:var(--line);}
  /* Разделът, в който се намира читателят — включително от статия вътре в него. */
  .site-nav a.active{color:var(--accent); font-weight:700; border-color:var(--accent);}
  .site-nav a.active:hover{color:var(--accent);}
  .header-tools{display:flex; align-items:center; gap:1rem; color:var(--ink-faint);}

  main{max-width:1180px; margin:0 auto;}

  .hero{
    position:relative; overflow:hidden;
    background:#0A0B0A center/cover no-repeat;
    min-height:clamp(380px, 52vh, 520px);
    display:flex; align-items:center;
    padding:clamp(3rem,7vw,5rem) 0;
  }
  .hero::before{
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(8,9,8,.88) 0%, rgba(8,9,8,.80) 32%, rgba(8,9,8,.42) 62%, rgba(8,9,8,.10) 100%);
  }
  .hero-inner{
    position:relative; z-index:1; width:100%;
    max-width:1180px; margin:0 auto;
    padding:0 clamp(1.25rem,4vw,3rem);
  }
  .hero .eyebrow{color:#FFBA00;}
  .hero h1{font-size:clamp(2rem,3.4vw,2.9rem); font-weight:800; line-height:1.12; margin-top:.7rem; max-width:16ch; color:#F4F5F1;}
  .hero p{font-size:1.04rem; font-weight:400; color:#C9CCC4; max-width:46ch; margin-top:1.1rem; line-height:1.6;}
  @media (max-width:760px){
    .hero::before{background:linear-gradient(180deg, rgba(8,9,8,.62) 0%, rgba(8,9,8,.80) 100%);}
  }

  .article-banner{max-width:1180px; margin:1.2rem auto 0; padding:0 clamp(1.25rem,4vw,3rem);}
  /* Снимките са 3:2. По-широк кадър значи повече отрязано отгоре и отдолу:
     при 5/2 се губеха 40% от височината, при 3/1 — половината. 16/9 и 2/1
     режат съответно 16% и 25%, което оставя кадъра разпознаваем. */
  .article-banner .frame{border-radius:10px; overflow:hidden; border:1px solid var(--line-soft); aspect-ratio:16/9;}
  .article-banner .frame-wide{aspect-ratio:2/1;}
  .article-banner img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
  @media (max-width:760px){
    .article-banner .frame,
    .article-banner .frame-wide{aspect-ratio:3/2;}
  }
  .photo-credit{font-size:.7rem; color:var(--ink-faint); margin-top:.5rem; text-align:right;}

  .section{padding:0 clamp(1.25rem,4vw,3rem) clamp(2.4rem,5vw,3.2rem);}
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
    border-top:1px solid var(--line); padding-top:1.1rem; margin-bottom:1.2rem;
  }
  .section-head h2{font-size:1.4rem; font-weight:800;}
  .section-head .count{font-size:.78rem; font-weight:600; color:var(--ink-faint); font-variant-numeric:tabular-nums;}

  .article-list{display:flex; flex-direction:column;}
  .article-row{display:flex; align-items:baseline; gap:.7rem; padding:.9rem 0; border-bottom:1px solid var(--line); cursor:pointer;}
  .article-row:first-child{padding-top:0;}
  .article-row .ic{
    width:30px; height:30px; flex:none; border-radius:7px; background:var(--surface);
    display:grid; place-items:center; color:var(--accent); align-self:center;
  }
  .article-row .tag{font-size:.72rem; font-weight:600; color:var(--accent); white-space:nowrap; flex:none;}
  .article-row .title{font-size:1.06rem; font-weight:600;}
  .article-row .leader{flex:1; border-bottom:1px dotted var(--line); margin:0 .15rem; transform:translateY(-.35em); min-width:1.5rem;}
  .article-row .date{font-size:.78rem; font-weight:500; color:var(--ink-faint); white-space:nowrap; flex:none; font-variant-numeric:tabular-nums;}
  .article-row:hover .title{color:var(--accent);}

  .cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
  .cat-card{text-decoration:none; background:var(--surface); padding:1.25rem 1.35rem; display:flex; flex-direction:column; gap:.6rem; min-height:158px;}
  .cat-card .ic{width:26px; height:26px; color:var(--accent);}
  .cat-card h3{font-size:1.04rem; font-weight:700;}
  .cat-card p{font-size:.85rem; font-weight:400; color:var(--ink-soft); line-height:1.5; flex:1;}
  .cat-card .go{font-size:.75rem; font-weight:600; color:var(--accent);}
  .cat-card-all{background:var(--canvas); justify-content:flex-end;}

  footer{border-top:1px solid var(--line); padding:2.2rem clamp(1.25rem,4vw,3rem) 2rem;}
  .foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2rem; max-width:1180px; margin:0 auto;}
  .foot-col .eyebrow{display:block; margin-bottom:.8rem;}
  .foot-col a{display:block; font-size:.85rem; font-weight:500; color:var(--ink-soft); text-decoration:none; padding:.2rem 0;}
  .foot-col a:hover{color:var(--ink);}
  .foot-base{max-width:1180px; margin:2rem auto 0; padding-top:1.2rem; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.75rem; font-weight:500; color:var(--ink-faint);}
  .foot-base .wordmark span{font-size:.85rem;}

  .breadcrumb{font-size:.78rem; font-weight:500; color:var(--ink-faint); padding:1.1rem clamp(1.25rem,4vw,3rem) 0; max-width:1180px; margin:0 auto;}
  .breadcrumb a{color:var(--ink-faint); text-decoration:none;}
  .breadcrumb a:hover{color:var(--accent);}
  .article-shell{
    max-width:1180px; margin:1.4rem auto 0; padding:0 clamp(1.25rem,4vw,3rem) 3.6rem;
    display:grid; grid-template-columns:minmax(0,1fr) 320px;
    gap:clamp(1.4rem,2.6vw,2.4rem); align-items:start;
  }
  .article-card{background:var(--surface-alt); border:1px solid var(--line-soft); border-radius:10px; padding:clamp(1.6rem,4vw,2.6rem); min-width:0;}
  .article-card h1, .article-card .lead, .article-card .prose, .article-card .faq{max-width:var(--measure);}

  .article-aside{position:sticky; top:1.4rem; display:flex; flex-direction:column; gap:1rem;}
  .aside-box{background:var(--surface); border:1px solid var(--line-soft); border-radius:10px; padding:1.1rem 1.2rem;}
  .aside-box .eyebrow{display:block; margin-bottom:.75rem;}
  .aside-nav a{
    display:block; font-size:.9rem; font-weight:500; color:var(--ink-soft);
    text-decoration:none; padding:.45rem 0; border-bottom:1px solid var(--line-soft);
  }
  .aside-nav a:last-child{border-bottom:none; padding-bottom:0;}
  .aside-nav a:hover{color:var(--accent);}
  @media (max-width:900px){
    .article-shell{grid-template-columns:1fr;}
    .article-aside{position:static; order:2;}
  }
  .article-card .eyebrow{display:inline-block; margin-bottom:.9rem;}
  .article-card h1{font-size:clamp(1.7rem,3.2vw,2.25rem); font-weight:800; line-height:1.18;}
  .byline{font-size:.78rem; font-weight:500; color:var(--ink-faint); margin-top:1rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line-soft); font-variant-numeric:tabular-nums;}
  .byline a{color:var(--ink-soft);}
  .lead{font-size:1.18rem; font-weight:500; line-height:1.55; color:var(--ink); margin:1.7rem 0 2rem; padding-left:1.1rem; border-left:3px solid var(--accent);}
  .prose{font-size:1rem; font-weight:400; line-height:1.7; color:var(--ink);}
  .prose h2{font-size:1.28rem; font-weight:700; margin:2.2rem 0 .9rem;}
  .prose p{margin:0 0 1.05rem;}
  .prose a{color:var(--accent); text-decoration-color:var(--line); text-underline-offset:.2em;}
  .prose ul{margin:0 0 1.05rem; padding-left:1.3rem;}
  .prose li{margin-bottom:.4rem;}
  .prose strong{font-weight:700;}

  .faq{margin-top:2.3rem; padding-top:1.5rem; border-top:1px solid var(--line-soft);}
  .faq h2{font-size:1.28rem; font-weight:700; margin-bottom:1.1rem;}
  .faq-item{padding:.95rem 0; border-bottom:1px solid var(--line-soft);}
  .faq-item:last-child{border-bottom:none;}
  .faq-q{font-weight:700; font-size:1rem; margin-bottom:.35rem;}
  .faq-a{color:var(--ink-soft); font-size:.94rem; line-height:1.6;}

  .aside-nav-titles a{font-weight:600; color:var(--ink); line-height:1.35; padding:.6rem 0;}

  .page-shell{max-width:var(--measure); margin:1.4rem auto 0; padding:0 clamp(1.25rem,4vw,3rem) 3.6rem;}
  .page-shell .article-card h1{max-width:none;}

  .cat-head{display:flex; gap:1.1rem; align-items:flex-start; padding-bottom:1.8rem;}
  .cat-head-ic{width:38px; height:38px; flex:none; color:var(--accent); margin-top:.35rem;}
  .cat-head h1{font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; margin-top:.45rem;}
  .cat-head p{color:var(--ink-soft); max-width:54ch; margin-top:.7rem; line-height:1.6;}

  .note{
    background:var(--accent-soft); border-left:3px solid var(--accent);
    padding:.9rem 1.1rem; border-radius:0 8px 8px 0; margin:1.5rem 0 0;
    font-size:.93rem; line-height:1.55; color:var(--ink);
  }

  .spec{display:grid; grid-template-columns:1fr auto; gap:.45rem .8rem; margin:0; font-size:.88rem;}
  .spec dt{color:var(--ink-soft);}
  .spec dd{margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums;}

  [hidden]{display:none !important;}

  @media (max-width:760px){
    /* Категориите остават достъпни на телефон — лента с хоризонтално превъртане. */
    .site-header{flex-wrap:wrap; gap:.8rem; padding-bottom:.5rem;}
    .site-nav{
      order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; gap:1rem;
      padding-bottom:.55rem; -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .site-nav::-webkit-scrollbar{display:none;}
    .site-nav a{white-space:nowrap; font-size:.82rem;}
    .cat-grid{grid-template-columns:1fr 1fr;}
    .article-row{flex-wrap:wrap;}
    .article-row .leader{order:3; flex-basis:100%; margin-top:.3rem;}
  }

/* ── допълнения за генерирания сайт (не са в мокъпа) ── */
a.article-row{text-decoration:none; color:inherit;}
.table-wrap{overflow-x:auto; margin:0 0 1.05rem;}
.prose table{border-collapse:collapse; width:100%; font-size:.93rem;}
.prose th,.prose td{border:1px solid var(--line-soft); padding:.5rem .7rem; text-align:left; vertical-align:top;}
.prose th{background:var(--surface); font-weight:600;}
.prose blockquote{margin:0 0 1.05rem; padding:.2rem 0 .2rem 1.1rem; border-left:3px solid var(--accent); color:var(--ink-soft);}
.prose code{background:var(--surface); padding:.1rem .35rem; border-radius:4px; font-size:.9em;}
.prose ol{margin:0 0 1.05rem; padding-left:1.3rem;}
.search-input{
  width:100%; max-width:34rem; font:inherit; font-size:1rem;
  padding:.75rem .9rem; border-radius:8px;
  border:1px solid var(--line); background:var(--surface-alt); color:var(--ink);
}
.search-input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.search-count{margin:.9rem 0 .4rem; font-size:.85rem; color:var(--ink-faint);}

/* ── банер за съгласие ── */
.consent{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:60;
  max-width:640px; margin:0 auto;
  background:var(--surface-alt); border:1px solid var(--line);
  border-radius:12px; padding:1.1rem 1.2rem;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:.9rem;
}
.consent-text{font-size:.9rem; line-height:1.55; color:var(--ink-soft);}
.consent-text a{color:var(--accent);}
.consent-actions{display:flex; gap:.6rem; flex-wrap:wrap;}
.consent button{
  font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
  padding:.55rem 1.1rem; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--ink);
}
.consent button.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.consent button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.foot-consent{
  font:inherit; font-size:.85rem; font-weight:500; color:var(--ink-soft);
  background:none; border:0; padding:.2rem 0; cursor:pointer; text-align:left;
}
.foot-consent:hover{color:var(--ink);}