/* ================================================================
       NIGHT-GARDEN — samostatná prémiová šablona podstránky (vzor description.html).
       Stejné tokeny, Fraunces + Inter, noční paleta, 2 akcenty, sklo karty, hvězdy.
       ================================================================ */
    :root {
      --bg-0:#070b1f; --bg-1:#0c1230;
      --card:rgba(255,255,255,.04); --line:rgba(255,255,255,.09);
      --ink:#eaedfb; --dim:#9aa3c9; --head:#ffffff;
      --moon:#f2c879; --moon-deep:#d9a54e;
      --lilac:#b3aee8; --rose:#b3aee8;
      --cta-1:#f2c879; --cta-2:#d9a54e;
      --hill-1:#0b1030; --hill-2:#080c26; --ground:#080c26;
      --serif:"Fraunces",Georgia,serif;
      --sans:"Inter","Segoe UI",Roboto,sans-serif;
      --maxw:1060px; --r:22px;
    }
    :root[data-theme="cream"] {
      --bg-0:#f7f2e7; --bg-1:#efe7d6;
      --card:rgba(58,52,96,.05); --line:rgba(58,52,96,.15);
      --ink:#2e2b4a; --dim:#6b678c; --head:#262347;
      --moon:#a87920; --moon-deep:#8a6215;
      --lilac:#5f57b8; --rose:#5f57b8;
      --hill-1:#eadfc6; --hill-2:#e0d2b0; --ground:#e0d2b0;
    }

    * { box-sizing:border-box; }
    html { background:var(--bg-0); scroll-behavior:smooth; }
    body {
      margin:0; overflow-x:hidden;
      font-family:var(--sans); font-size:16.5px; line-height:1.75; color:var(--ink);
      background:
        radial-gradient(1000px 600px at 70% -100px, rgba(90,80,200,.16), transparent 65%),
        radial-gradient(800px 500px at 15% 300px, rgba(242,200,121,.05), transparent 60%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%);
      background-repeat:no-repeat;
    }
    :root[data-theme="cream"] body {
      background:
        radial-gradient(1000px 600px at 70% -100px, rgba(95,87,184,.10), transparent 65%),
        radial-gradient(800px 500px at 15% 300px, rgba(168,121,32,.07), transparent 60%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%);
      background-repeat:no-repeat;
    }

    .stars {
      position:fixed; inset:0; pointer-events:none; z-index:0;
      background-image:
        radial-gradient(1.3px 1.3px at 12% 18%, rgba(255,255,255,.5) 50%, transparent 51%),
        radial-gradient(1px 1px at 38% 9%, rgba(255,255,255,.35) 50%, transparent 51%),
        radial-gradient(1.6px 1.6px at 71% 14%, rgba(255,255,255,.4) 50%, transparent 51%),
        radial-gradient(1px 1px at 88% 31%, rgba(255,255,255,.3) 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 22% 47%, rgba(255,255,255,.25) 50%, transparent 51%),
        radial-gradient(1px 1px at 55% 38%, rgba(255,255,255,.22) 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 80% 62%, rgba(255,255,255,.2) 50%, transparent 51%),
        radial-gradient(1px 1px at 8% 76%, rgba(255,255,255,.2) 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 45% 84%, rgba(255,255,255,.18) 50%, transparent 51%),
        radial-gradient(1px 1px at 93% 89%, rgba(255,255,255,.2) 50%, transparent 51%);
    }
    body > *:not(.stars) { position:relative; z-index:1; }
    :root[data-theme="cream"] .stars { filter:invert(1) hue-rotate(200deg); opacity:.22; }

    .wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
    section.wrap { padding-top:clamp(3rem,7vw,5.5rem); padding-bottom:clamp(3rem,7vw,5.5rem); }

    h1,h2,h3 { font-family:var(--serif); font-weight:600; color:var(--head); line-height:1.18; margin:0; }
    h1 { font-size:clamp(2rem,5vw,3.2rem); letter-spacing:-.01em; }
    h2 { font-size:clamp(1.6rem,3.4vw,2.2rem); letter-spacing:-.01em; }
    h3 { font-size:1.3rem; }
    p { margin:0 0 1.05rem; }
    a { color:var(--lilac); text-decoration:none; }
    a:hover { text-decoration:underline; }
    strong { color:var(--head); font-weight:600; }
    em { font-style:italic; }

    .eyebrow {
      display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.16em;
      text-transform:uppercase; color:var(--rose); margin-bottom:.9rem;
    }
    .section-head { text-align:center; max-width:660px; margin:0 auto clamp(2rem,5vw,3rem); }
    .section-head p { color:var(--dim); margin:.8rem 0 0; }

    .reveal { opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .8s ease; }
    .reveal.in { opacity:1; transform:none; }
    @media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } }

    /* ---------- topbar ---------- */
    .topbar { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem; padding:1rem 0; font-size:.92rem; }
    .brand { display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--head); text-decoration:none; margin-right:auto; letter-spacing:.01em; }
    .brand img { width:34px; height:34px; border-radius:9px; }
    .brand:hover { text-decoration:none; }
    .topbar nav a { color:var(--dim); text-decoration:none; margin-left:1.3rem; font-weight:500; }
    .topbar nav a:hover { color:var(--head); text-decoration:none; }
    .topbar nav a.here { color:var(--moon); }
    .lang-select { font-size:.85rem; font-family:var(--sans); padding:.3rem .55rem; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); cursor:pointer; }
    .lang-select option { background:var(--bg-1); }
    .theme-toggle { width:38px; height:38px; border-radius:50%; margin-left:.4rem; border:1px solid var(--line); background:var(--card); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
    .theme-toggle svg { width:16px; height:16px; stroke:var(--dim); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .theme-toggle:hover svg { stroke:var(--moon); }
    .theme-toggle .ic-moon { display:none; }
    :root[data-theme="cream"] .theme-toggle .ic-moon { display:block; }
    :root[data-theme="cream"] .theme-toggle .ic-sun { display:none; }

    /* ---------- article hero ---------- */
    .a-hero { text-align:center; max-width:760px; margin:0 auto; padding:clamp(2rem,5vw,3.5rem) 0 clamp(1.5rem,4vw,2.5rem); }
    .a-hero h1 { margin:.2rem 0 1rem; }
    .a-hero .lead { color:var(--dim); font-size:clamp(1.05rem,2.2vw,1.25rem); max-width:60ch; margin:0 auto 1.6rem; }
    .a-hero .lead strong { color:var(--ink); }
    .a-hero .meta { font-size:.85rem; color:var(--dim); letter-spacing:.02em; }
    .a-hero .meta b { color:var(--moon); font-weight:600; }

    /* ---------- buttons ---------- */
    .btn { display:inline-block; text-decoration:none; font-weight:600; font-family:var(--sans); border-radius:14px; padding:1rem 2.1rem; font-size:1.05rem; transition:transform .15s ease, box-shadow .15s ease; }
    .btn:hover { transform:translateY(-2px); text-decoration:none; }
    .btn-moon { background:linear-gradient(180deg,var(--cta-1),var(--cta-2)); color:#241703; box-shadow:0 10px 30px rgba(242,200,121,.25); }
    .btn-moon:hover { box-shadow:0 14px 36px rgba(242,200,121,.32); }
    .gp-badge { height:58px; width:auto; display:block; }
    .microcopy { font-size:.88rem; color:var(--dim); margin:1rem 0 0; }
    .microcopy b { color:var(--ink); font-weight:600; }

    /* ---------- stat cards ---------- */
    .sci-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; }
    .sci { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.7rem 1.4rem 1.5rem; text-align:center; }
    .sci .num { font-family:var(--serif); font-size:clamp(2rem,4.6vw,2.8rem); color:var(--moon); line-height:1.05; }
    .sci h3 { font-family:var(--sans); font-size:1rem; font-weight:600; margin:.6rem 0 .35rem; }
    .sci p { font-size:.88rem; color:var(--dim); margin:0; }

    /* ---------- prose / topics ---------- */
    .prose { max-width:760px; margin:0 auto; }
    .topic { padding:1.6rem 0; border-top:1px solid var(--line); }
    .topic:first-of-type { border-top:0; }
    .topic-ico { width:28px; height:28px; stroke:var(--lilac); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block; margin-bottom:.7rem; }
    .topic h3 { font-size:clamp(1.3rem,2.6vw,1.6rem); margin-bottom:.35rem; }
    .topic .lead-line { color:var(--lilac); font-style:italic; font-weight:500; margin:0 0 .8rem; font-size:1.02rem; }
    .topic p { color:var(--dim); }
    .topic p strong { color:var(--ink); }

    /* ---------- trio (sound comparison) ---------- */
    .trio { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:1.6rem; }
    @media (max-width:760px){ .trio { grid-template-columns:1fr; } }
    .trio .card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem 1.4rem; }
    .trio .card h3 { font-size:1.15rem; margin-bottom:.5rem; }
    .trio .card p { color:var(--dim); font-size:.92rem; margin:0; }
    .trio .card .tag { font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--rose); display:block; margin-bottom:.4rem; }

    /* ---------- callout (honest note / takeaway) ---------- */
    .callout {
      max-width:760px; margin:0 auto; border-left:3px solid var(--lilac);
      background:rgba(179,174,232,.06); border-radius:0 16px 16px 0;
      padding:1.4rem 1.6rem;
    }
    :root[data-theme="cream"] .callout { background:rgba(95,87,184,.07); }
    .callout .eyebrow { margin-bottom:.5rem; }
    .callout p { color:var(--dim); margin:0 0 .6rem; }
    .callout p:last-child { margin-bottom:0; }
    .callout p strong { color:var(--ink); }

    /* ---------- studies list ---------- */
    .studies { max-width:820px; margin:0 auto; list-style:none; padding:0; display:grid; gap:2px; }
    .studies li { padding:.85rem 1.1rem; background:var(--card); border:1px solid var(--line); font-size:.92rem; color:var(--dim); }
    .studies li:first-child { border-radius:14px 14px 0 0; }
    .studies li:last-child { border-radius:0 0 14px 14px; }
    .studies li strong { color:var(--ink); font-weight:600; }

    /* ---------- finale ---------- */
    .finale { text-align:center; }
    .finale .moon-mark { font-size:2rem; display:block; margin-bottom:1.1rem; text-shadow:0 0 34px rgba(242,200,121,.65), 0 0 90px rgba(242,200,121,.25); }
    .finale h2 { margin-bottom:.6rem; }
    .finale p { color:var(--dim); max-width:48ch; margin:0 auto 1.8rem; }
    .cta-row { display:flex; flex-direction:column; align-items:center; gap:1.1rem; }

    /* ---------- night garden ---------- */
    .garden { position:relative; height:170px; pointer-events:none; overflow:hidden; }
    .garden .hills { position:absolute; bottom:0; left:0; width:100%; height:100%; }
    .garden .ff { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--moon); box-shadow:0 0 10px 2px rgba(242,200,121,.5); animation:ff-fly 18s ease-in-out infinite, ff-glow 7s ease-in-out infinite; }
    :root[data-theme="cream"] .garden .ff { box-shadow:0 0 10px 2px rgba(168,121,32,.45); }
    @keyframes ff-fly { 0%,100%{transform:translate(0,0);} 25%{transform:translate(30px,-16px);} 50%{transform:translate(-16px,-34px);} 75%{transform:translate(-34px,10px);} }
    @keyframes ff-glow { 0%,100%{opacity:.2;} 50%{opacity:.8;} }
    @media (prefers-reduced-motion: reduce){ .garden .ff { animation:none; opacity:.5; } }

    /* ---------- footer ---------- */
    footer { background:var(--ground); padding:2.6rem 0 3.4rem; font-size:.9rem; color:var(--dim); }
    .footer-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2rem; }
    footer h4 { color:var(--ink); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 .8rem; font-weight:600; }
    footer ul { list-style:none; margin:0; padding:0; }
    footer li { margin:.4rem 0; }
    footer a { color:var(--dim); text-decoration:none; }
    footer a:hover { color:var(--head); }
    .social-row { display:flex; gap:.8rem; margin-top:1rem; }
    .social-row a { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card); display:inline-flex; align-items:center; justify-content:center; transition:border-color .2s ease; }
    .social-row a:hover { border-color:var(--moon); }
    .social-row svg { width:17px; height:17px; fill:var(--dim); }
    .social-row a:hover svg { fill:var(--moon); }
    .footer-bottom { text-align:center; margin-top:2.6rem; font-size:.82rem; opacity:.75; }


/* ============================================================
   GENERIC ARTICLE CONTENT — styluje STÁVAJÍCÍ markup podstránek
   (h1 + .alternative jako hero, h2 + .feature-title + p próza,
   .review karty), aby po rolloutu vypadaly jako Science bez
   ruční přestavby každé sekce. Používá stejné tokeny.
   ============================================================ */
main.article { max-width:772px; margin:0 auto; padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,4vw,2rem) clamp(2.5rem,6vw,4rem); }
.article > h1 { text-align:center; margin:.2rem 0 .5rem; }
.article .alternative { display:block; text-align:center; color:var(--moon); font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.05rem,2.2vw,1.25rem); max-width:52ch; margin:.2rem auto 2.4rem; }
.article h2 { font-size:clamp(1.45rem,3vw,1.95rem); margin:2.6rem 0 .5rem; }
.article h3 { font-size:1.2rem; margin:1.8rem 0 .4rem; }
.article .feature-title { color:var(--lilac); font-style:italic; font-weight:500; font-size:1.02rem; margin:0 0 .8rem; }
.article p { color:var(--dim); }
.article p strong, .article li strong { color:var(--ink); }
.article a { color:var(--lilac); }
.article ul, .article ol { color:var(--dim); padding-left:1.4rem; margin:0 0 1.05rem; }
.article li { margin:.35rem 0; }
.article li p { margin:0 0 .4rem; }
.article img { max-width:100%; height:auto; border-radius:14px; display:block; margin:1.4rem auto; }
.article .babysleep-icon-image, .article .centered-image { max-width:210px; }
.article .peaceful-sleep { color:var(--head); font-weight:600; }

/* Q&A / testimonial karty (faq, parent-stories, dedicated-device) */
.review { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--lilac); border-radius:0 var(--r) var(--r) 0; margin:1rem 0; padding:1.15rem 1.35rem; }
.review-author { font-family:var(--serif); font-weight:600; color:var(--head); font-size:1.06rem; margin:0 0 .45rem; }
.review-text { color:var(--dim); margin:0 0 .35rem; }
.review-text:last-child { margin-bottom:0; }
.review-text + .review-text { margin-top:.6rem; }

/* ============================================================
   SECTION RHYTHM — dá generickým článkovým stránkám kadenci jako
   description/science (centrované section-heady s ornamentem, lead
   odstavec, karty seznamů) místo monotónního toku h2 + text.
   Cílí jen na PŘÍMÉ potomky .article (ne h2 uvnitř .review karet).
   ============================================================ */
.article > .alternative + p { text-align:center; color:var(--ink); font-size:clamp(1.05rem,2vw,1.18rem); max-width:62ch; margin:0 auto 2.2rem; }
.article > h2 { text-align:center; margin-top:clamp(2.8rem,5vw,3.8rem); }
.article > h2::before { content:""; display:block; width:42px; height:2px; margin:0 auto 1.1rem; border-radius:2px; background:linear-gradient(90deg, transparent, var(--moon), transparent); }
.article > h2 + .feature-title { text-align:center; max-width:54ch; margin-left:auto; margin-right:auto; margin-bottom:1.5rem; }

/* odrážkové seznamy → jemná karta (víc "nábytku", méně textové zdi) */
.article ul.bullets { list-style:none; margin:0 0 1.4rem; padding:1.05rem 1.4rem; background:var(--card); border:1px solid var(--line); border-radius:16px; }
.article ul.bullets li { position:relative; padding:.34rem 0 .34rem 1.4rem; color:var(--dim); margin:0; }
.article ul.bullets li::before { content:"•"; position:absolute; left:.3rem; color:var(--moon); font-weight:700; }
.article ul.bullets li strong { color:var(--ink); }

/* číslované postupy → karta se zlatými číselnými markery */
.article ol.steps { list-style:none; counter-reset:step; margin:0 0 1.4rem; padding:.6rem 1.4rem; background:var(--card); border:1px solid var(--line); border-radius:16px; }
.article ol.steps li { counter-increment:step; position:relative; padding:.85rem 0 .85rem 2.7rem; color:var(--dim); margin:0; }
.article ol.steps li + li { border-top:1px solid var(--line); }
.article ol.steps li::before { content:counter(step); position:absolute; left:0; top:.85rem; width:1.7rem; height:1.7rem; border-radius:50%; background:linear-gradient(180deg,var(--cta-1),var(--cta-2)); color:#241703; font-family:var(--serif); font-weight:600; font-size:.9rem; display:flex; align-items:center; justify-content:center; }
.article ol.steps li strong { color:var(--ink); }