/* ======= КНИЖКОВА ЕСТЕТИКА ======= */
    :root{
      --page:#fcfbf7;      /* колір сторінки */
      --paper:#fffdfa;     /* світліший папір */
      --ink:#1c1a17;       /* друкарська фарба */
      --muted:#5b5a56;     /* примітки */
      --rule:#d9d5c7;      /* лінії */
      --accent:#8a6a3f;    /* бронзовий акцент */
      --accent-dark:#6e5433;
      --red:#b8393e;       /* закладка */
      --container: 860px;  /* вужче, як книжкова сторінка */
      --radius: 12px;
    }
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--page);color:var(--ink);}    
    /* Класичні шрифти: Georgia+системні як фолбек */
    body, p, li, nav, button{font-family: Georgia, "Times New Roman", Times, serif; font-size:18px; line-height:1.7}
    h1,h2,h3,h4{font-family: Georgia, "Times New Roman", Times, serif; font-weight:700}

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

    /* Верхня «смуга бібліотеки» */
    .topbar{height:8px;background:linear-gradient(90deg, var(--accent), var(--accent-dark));box-shadow:0 2px 0 rgba(0,0,0,.06)}

    /* Шапка з «колонтитулом» */
    header.site{position:sticky;top:0;z-index:50;background:rgba(252,251,247,.9);backdrop-filter: blur(6px);border-bottom:1px solid var(--rule)}
    .nav{display:flex;align-items:center;justify-content:space-between;height:70px}
    .brand{font-variant:small-caps;letter-spacing:.5px}
    .brand em{font-style:normal;color:var(--accent)}
    .nav a{color:var(--ink);text-decoration:none;margin-left:18px}
    .desktop-nav{display:flexbox; flex-direction: row; align-items: center; justify-content: center;}

    /* Кнопка як «закладка-стрічка» */
    .ribbon{
      position:relative; display:inline-block; background:var(--red); color:#fff; padding:12px 18px 12px 10px; 
      clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
      text-decoration:none; font-weight:700; box-shadow:0 6px 18px rgba(184,57,62,.25);
    }
    .nav a.ribbon { color: #fff}
    .ribbon:hover{filter:brightness(.95)}

    /* Блок-«сторінка» */
    .sheet{background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
      box-shadow:0 10px 28px rgba(0,0,0,.06); position:relative}
    .sheet::before{ /* тиснений орнамент зверху */
      content:""; position:absolute; left:26px; right:26px; top:16px; height:10px; opacity:.45;
      background:repeating-linear-gradient(90deg, transparent 0 22px, rgba(0,0,0,.06) 22px 23px, transparent 23px 44px)
    }
    .sheet .inner{padding:44px 34px}

    /* Орнаментальні горизонтальні правила */
    .ornament{height:14px; background:
      radial-gradient(circle at 50% 50%, rgba(0,0,0,.22), transparent 48%) center/8px 8px repeat-x;
      margin:18px 0; opacity:.25}

    /* Drop cap */
    .dropcap:first-letter{ float:left; font-size:64px; line-height:.9; padding:8px 10px 0 0; color:var(--accent)}

    /* HERO */
    .hero{padding:40px 0}
    .hero h1{font-size: clamp(32px, 5.4vw, 58px); line-height:1.1; margin:10px 0 6px}
    .subtitle{color:var(--muted); margin:0 0 14px}
    .price{display:flex;align-items:center;gap:12px;margin:16px 0 22px}
    .tag{background:#efe9dc; color:#403423; border:1px solid #e1d7be; padding:6px 12px; border-radius:999px; font-weight:700}

    /* Дві колонки як розворот */
    .spread{display:grid;grid-template-columns:1.15fr 1fr;gap:130px;align-items:start}
    .ph{background:#e9e6de;border:1px dashed #c9c1aa;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#6b665b;min-height:260px}
    .margin-note{font-size:14px;color:var(--muted);border-left:3px solid #e1d7be;padding-left:10px;margin-top:8px}
    .img-mobile{display:none;}

    /* Заголовки розділів */
    section{padding:60px 0}
    h2{font-size: clamp(24px, 3.8vw, 40px); line-height:1.25; margin:0 0 8px}
    .chapter{font-variant: small-caps; letter-spacing:.6px; color:var(--accent); margin-bottom:8px}

    /* Списки — класична верстка */
    ul.clean{padding-left:22px;margin:0}
    ul.clean li{margin:8px 0}

    /* Картки як колонки змісту */
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
    .card{background:#fffef9;border:1px solid var(--rule);border-radius:10px;padding:16px}
    .card h3, .card h4{margin:6px 0 8px}

    /* Відгуки як цитати */
    .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    blockquote{background:#fffef9;border:1px solid var(--rule);border-radius:10px;padding:16px;position:relative}
    blockquote::before{content:"“"; position:absolute; left:10px; top:-18px; font-size:64px; color:#d3c9ad; line-height:1}
    cite{display:block; margin-top:10px; font-size:15px; color:var(--muted)}

    /* Фінальний розворот */
    .final{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}

    /* Нижній колонтитул */
    footer{padding:26px 0; color:var(--muted); border-top:1px solid var(--rule)}

    /* Кнопка-бургер */
    .burger{display:none; position:relative; width:42px; height:34px; border:1px solid var(--rule); background:var(--paper); border-radius:8px}
    .burger span{position:absolute; left:8px; right:8px; height:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease}
    .burger span:nth-child(1){top:9px}
    .burger span:nth-child(2){top:16px}
    .burger span:nth-child(3){top:23px}
    .burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .burger.active span:nth-child(2){opacity:0}
    .burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

    /* Висувне меню (оверлей темніший; full-width на мобільному) */
    .drawer{position:fixed; inset:0; z-index:70; display:none}
    .drawer[aria-hidden="false"], .drawer.open{display:block}
    .drawer-inner{position:absolute; right:0; top:70px; bottom:0; height: 400px; border-left:1px solid var(--rule); background-color: white;  padding:18px; display:flex; flex-direction:column; gap:10px}
    .drawer-head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
    .drawer-title{font-variant:small-caps; letter-spacing:.6px}
    .drawer-close{border:1px solid var(--rule); background:#fffef9; padding:8px 10px; border-radius:8px}
    .drawer-link{padding:12px 10px; border-radius:8px; text-decoration:none; color:var(--ink); border:1px solid var(--rule); background:#fffef9}
    .drawer-cta{margin-top:4px; text-decoration:none; display:inline-block; background:var(--red); color:#fff; padding:12px 14px; border-radius:10px}

    /* Кнопка "нагорy" */
    .to-top{position:fixed; right:18px; bottom:18px; z-index:65; display:none; border:1px solid var(--rule); background:var(--paper); color:var(--ink); border-radius:999px; padding:10px 14px; box-shadow:0 6px 16px rgba(0,0,0,.12)}
    .to-top.show{display:inline-flex}

    /* Горизонтальна карусель відгуків */
    .carousel{position:relative}
    .carousel-track{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 56px 8px}
    .carousel-track > *{scroll-snap-align:start; flex: 0 0 calc(33.333% - 10.6px)}
    .sticky img{display:block; width:100%; height:auto; border-radius:10px}
    .carousel-btn{position:absolute; top:50%; transform:translateY(-50%); border:1px solid var(--rule); background:var(--paper); padding:10px 12px; border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.08); z-index:5}
    .carousel-btn.prev{left:6px}
    .carousel-btn.next{right:6px}

    /* Мобільна адаптація */
    @media (max-width: 940px){ .spread, .final{grid-template-columns:1fr} }
    @media (max-width: 760px){ 
      .grid-3{grid-template-columns:1fr 1fr} 
      .quotes{grid-template-columns:1fr 1fr} 
      .desktop-nav{display:none}
      .burger{display:inline-block}
      .carousel-track > *{flex:0 0 80%}
      .drawer-inner{left:0; right:0; border-left:none; border-top:1px solid var(--rule)}
      .img-desktop{display:none;}
      .img-mobile{display:block; margin: 0, auto; height: 70%;}
    }
    @media (max-width: 520px){ .grid-3, .grid-2, .quotes{grid-template-columns:1fr} .carousel-track > *{flex:0 0 92%} } .carousel-track > *{flex:0 0 92%}
    @media (max-width: 760px){ .grid-3{grid-template-columns:1fr 1fr} .quotes{grid-template-columns:1fr 1fr} }
    @media (max-width: 520px){ .grid-3, .grid-2, .quotes{grid-template-columns:1fr} }