/* Вячеслав Третяк — спільні стилі. Кожна книга має власне «чорнило». */
:root{
  --paper:#f2f3f6; --paper-2:#e7e9ef; --ink:#1d2236; --ink-soft:#4b526b; --rule:#c9cdda;
  --accent:#8a2f3c;
  --b1:#22355e; --b1-fg:#eef1f8; --b1-acc:#eef1f8;
  --b2:#6e1f24; --b2-fg:#f8ece8; --b2-acc:#f8ece8;
  --b3:#3c3a33; --b3-fg:#f1eee4; --b3-acc:#c8a24a;
  --b4:#171c24; --b4-fg:#ece6dc; --b4-acc:#d9a35b;
  --b5:#1d4660; --b5-fg:#eef4f7; --b5-acc:#f1d9a6;
  --f-display:"Prata","Times New Roman",serif;
  --f-body:"Literata",Georgia,"Times New Roman",serif;
  --f-ui:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ok:#2f6b3f; --err:#a3242f;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#14161f; --paper-2:#1c1f2b; --ink:#e7e9f1; --ink-soft:#a8adc1; --rule:#30354a;
  --accent:#d9798a; --b1:#1a2747; --b2:#4f1519; --b3:#2c2b26; --ok:#7cc48f; --err:#ef8a94; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#14161f; --paper-2:#1c1f2b; --ink:#e7e9f1; --ink-soft:#a8adc1; --rule:#30354a;
  --accent:#d9798a; --b1:#1a2747; --b2:#4f1519; --b3:#2c2b26; --ok:#7cc48f; --err:#ef8a94; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:1.06rem;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.label{font-family:var(--f-ui);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0;line-height:1.1}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;z-index:20;background:var(--ink);color:var(--paper);padding:8px 14px}

/* nav */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;padding-block:12px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-size:1.15rem;text-decoration:none}
nav.top ul{display:flex;gap:6px 22px;list-style:none;margin:0;padding:0;flex-wrap:wrap;font-family:var(--f-ui);font-size:.9rem;align-items:center}
nav.top ul a{text-decoration:none;color:var(--ink-soft)}
nav.top ul a:hover,nav.top ul a[aria-current]{color:var(--accent)}
nav.top ul a.order{color:var(--paper);background:var(--ink);padding:6px 14px;border-radius:2px}
nav.top ul a.order:hover{background:var(--accent);color:var(--paper)}

/* buttons */
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{font-family:var(--f-ui);font-weight:500;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:2px;text-decoration:none;border:1px solid var(--ink);transition:background .2s,color .2s;cursor:pointer;background:none;color:inherit}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* hero */
.hero .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;padding-block:72px 64px}
.hero .label{color:var(--accent)}
.hero h1{font-size:clamp(3rem,8vw,6.2rem);letter-spacing:-.01em;margin:14px 0 22px}
.hero h1 span{display:block}
.lede{font-size:1.2rem;max-width:34ch;color:var(--ink-soft);margin:0 0 30px}
.hero-award{margin:26px 0 0;font-family:var(--f-ui);font-size:.88rem;color:var(--ink-soft)}
.hero-award a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
.fan{position:relative;height:420px;max-width:100%}
.fan a{position:absolute;width:210px;max-width:60%;box-shadow:0 18px 40px -18px rgba(10,14,30,.55);transition:transform .35s ease;display:block}
.fan img{display:block;width:100%;height:auto}
.fan .c1{left:0;top:40px;transform:rotate(-7deg);z-index:1}
.fan .c2{left:31%;top:10px;transform:rotate(1deg);z-index:3}
.fan .c3{left:58%;top:52px;transform:rotate(8deg);z-index:2}
.fan a:hover{transform:rotate(0) translateY(-10px);z-index:4}

/* quote */
.wife{border-block:1px solid var(--rule);background:var(--paper-2)}
.wife .wrap{padding-block:56px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.wife .mark{font-family:var(--f-display);font-size:6rem;line-height:.7;color:var(--accent)}
.wife p{font-family:var(--f-display);font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.35;margin:0;max-width:30ch}
.wife cite{display:block;margin-top:16px;font-style:normal;color:var(--ink-soft)}

/* sections */
section{scroll-margin-top:70px}
.sec{padding-block:88px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:40px;flex-wrap:wrap}
.sec-head h2,.sec-head h1{font-size:clamp(2rem,4.5vw,3rem)}
.sec-head .label{color:var(--ink-soft)}

/* bio */
.bio{display:grid;grid-template-columns:260px 1fr;gap:56px}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:18px;align-content:start;position:sticky;top:90px}
.facts li{border-left:2px solid var(--accent);padding-left:14px}
.facts .label{color:var(--ink-soft);display:block;font-size:.68rem}
.facts b{font-family:var(--f-display);font-weight:400;font-size:1.15rem}
.bio-text{min-width:0;max-width:64ch}
.bio-text p{margin:0 0 1.1em}
.bio-text p:first-of-type::first-letter{font-family:var(--f-display);float:left;font-size:4.2rem;line-height:.85;padding:6px 10px 0 0;color:var(--accent)}
.bio-photo{margin:0 0 28px}
.bio-photo img{display:block;width:100%;filter:saturate(.9)}

/* book inks */
.bk1{--bg:var(--b1);--fg:var(--b1-fg);--acc:var(--b1-acc)}
.bk2{--bg:var(--b2);--fg:var(--b2-fg);--acc:var(--b2-acc)}
.bk3{--bg:var(--b3);--fg:var(--b3-fg);--acc:var(--b3-acc)}
.bk4{--bg:var(--b4);--fg:var(--b4-fg);--acc:var(--b4-acc)}
.bk5{--bg:var(--b5);--fg:var(--b5-fg);--acc:var(--b5-acc)}

/* book band (home + book page hero) */
.book{color:var(--fg);background:var(--bg)}
.book .wrap{display:grid;grid-template-columns:300px 1fr;gap:56px;padding-block:80px;align-items:start}
.book .cv{display:block;width:100%;max-width:300px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);outline:1px solid color-mix(in srgb,var(--fg) 20%,transparent)}
.book .cv img{display:block;width:100%}
.book .num{font-family:var(--f-ui);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.book h2,.book h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:10px 0 16px;color:var(--acc)}
.book h2 a{text-decoration:none}
.book h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.book-text{min-width:0;max-width:62ch}
.book-text p{margin:0 0 1em}
.book-text .hook{font-size:1.2rem;font-style:italic}
.tagline{font-family:var(--f-display);font-size:1.15rem;margin:0 0 18px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{font-family:var(--f-ui);font-size:.75rem;padding:4px 10px;border:1px solid color-mix(in srgb,var(--fg) 40%,transparent);border-radius:20px;text-decoration:none}
a.chip:hover{background:color-mix(in srgb,var(--fg) 15%,transparent)}
.chip.warn{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:600}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px 24px;margin:4px 0 28px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.meta dt{font-family:var(--f-ui);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.meta dd{margin:2px 0 0;font-variant-numeric:tabular-nums}
.award{display:flex;gap:12px;align-items:center;margin:0 0 22px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--acc) 60%,transparent);font-family:var(--f-ui);font-size:.9rem;line-height:1.45;max-width:52ch}
.award b{color:var(--acc);font-weight:600}
.award .crown{font-family:var(--f-display);font-size:1.6rem;color:var(--acc);line-height:1}
.book .btn{border-color:var(--fg);color:var(--fg)}
.book .btn.solid{background:var(--fg);color:var(--bg)}
.book .btn.solid:hover{background:transparent;color:var(--fg)}
.book .btn.ghost:hover{background:var(--fg);color:var(--bg)}

/* breadcrumbs */
.crumbs{font-family:var(--f-ui);font-size:.82rem;margin:0 0 18px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;opacity:.8}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.6}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* book page body */
.read{padding-block:72px}
.read .wrap{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start}
.read h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:0 0 18px}
.read .prose{max-width:64ch}
.read .prose p{margin:0 0 1.1em}
.read .prose p:first-of-type::first-letter{font-family:var(--f-display);float:left;font-size:3.6rem;line-height:.85;padding:6px 10px 0 0;color:var(--accent)}
.buybox{position:sticky;top:90px;border:1px solid var(--rule);background:var(--paper-2);padding:22px}
.buybox h2{font-size:1.4rem;margin-bottom:10px}
.buybox p{font-family:var(--f-ui);font-size:.9rem;color:var(--ink-soft);margin:0 0 16px;line-height:1.5}
.buybox .btn{width:100%;margin-bottom:10px}
.buybox ul{font-family:var(--f-ui);font-size:.85rem;color:var(--ink-soft);margin:14px 0 0;padding-left:18px;line-height:1.5}

/* catalog + other books */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:32px 24px}
.shelf a{text-decoration:none;display:block}
.shelf img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;box-shadow:0 14px 30px -16px rgba(10,14,30,.55);transition:transform .25s}
.shelf a:hover img{transform:translateY(-6px)}
.shelf .t{font-family:var(--f-display);font-size:1.2rem;line-height:1.2;margin-top:14px}
.shelf .y{font-family:var(--f-ui);font-size:.8rem;color:var(--ink-soft);margin-top:4px}
.more{border-top:1px solid var(--rule)}

/* catalog list */
.cat{display:grid;gap:0}
.cat article{display:grid;grid-template-columns:160px 1fr;gap:32px;padding-block:36px;border-bottom:1px solid var(--rule);align-items:start}
.cat article:first-child{padding-top:0}
.cat img{display:block;width:100%;box-shadow:0 14px 30px -16px rgba(10,14,30,.55)}
.cat h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin:6px 0 10px}
.cat h2 a{text-decoration:none}
.cat h2 a:hover{color:var(--accent)}
.cat .num{font-family:var(--f-ui);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.cat p{margin:0 0 16px;max-width:60ch}
.cat .chip{border-color:var(--rule)}
.cat .chip.warn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cat .chips{margin-bottom:16px}

/* press */
.press blockquote{margin:0;max-width:52ch;font-family:var(--f-display);font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.45}
.press figcaption{margin-top:20px;font-family:var(--f-ui);color:var(--ink-soft)}
.press figcaption::before{content:"— "}

/* order form */
.order-grid{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start}
form.order{display:grid;gap:34px;min-width:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-family:var(--f-display);font-size:1.45rem;margin-bottom:14px;padding:0}
.pick{display:grid;gap:10px}
.pick label.item{display:grid;grid-template-columns:auto 52px 1fr auto;gap:14px;align-items:center;padding:10px 14px;border:1px solid var(--rule);background:var(--paper);cursor:pointer}
.pick label.item:has(input:checked){border-color:var(--accent);background:var(--paper-2)}
.pick img{width:52px;height:auto;display:block}
.pick .bt{font-family:var(--f-display);font-size:1.1rem;line-height:1.2}
.pick .bm{font-family:var(--f-ui);font-size:.78rem;color:var(--ink-soft)}
.qty{font-family:var(--f-ui);font-size:.85rem;display:flex;align-items:center;gap:6px;white-space:nowrap}
.qty select{width:auto;padding:6px 8px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.fields .full{grid-column:1/-1}
.f label,.f .lab{display:block;font-family:var(--f-ui);font-size:.85rem;font-weight:500;margin-bottom:6px}
.f .hint{display:block;font-family:var(--f-ui);font-size:.78rem;color:var(--ink-soft);margin-top:5px;line-height:1.4}
input[type=text],input[type=tel],input[type=email],select,textarea{width:100%;font:inherit;font-family:var(--f-ui);font-size:1rem;padding:11px 12px;border:1px solid var(--rule);border-radius:2px;background:var(--paper);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
textarea{min-height:96px;resize:vertical}
.radios{display:flex;flex-wrap:wrap;gap:10px}
.radios label{display:flex;gap:8px;align-items:center;font-family:var(--f-ui);font-size:.92rem;padding:9px 14px;border:1px solid var(--rule);cursor:pointer;font-weight:400;margin:0}
.radios label:has(input:checked){border-color:var(--accent);background:var(--paper-2)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:18px;height:18px;margin:0}
.req{color:var(--accent)}
.note{font-family:var(--f-ui);font-size:.82rem;color:var(--ink-soft);line-height:1.5;margin:0}
.msg{font-family:var(--f-ui);font-size:.95rem;padding:14px 16px;border-left:3px solid;line-height:1.5}
.msg.err{border-color:var(--err);color:var(--err);background:color-mix(in srgb,var(--err) 8%,transparent)}
.msg.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.done h2{font-size:2rem;margin-bottom:12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* contacts */
.contacts{background:var(--ink);color:var(--paper)}
.contacts .sec-head{border-color:color-mix(in srgb,var(--paper) 25%,transparent)}
.contacts .sec-head .label{color:color-mix(in srgb,var(--paper) 65%,transparent)}
.ct-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ct{min-width:0}
.ct .label{display:block;color:color-mix(in srgb,var(--paper) 60%,transparent);margin-bottom:8px}
.ct .v{font-family:var(--f-display);font-size:1.35rem;word-break:break-word;user-select:all}
.copy{margin-top:10px;font-family:var(--f-ui);font-size:.8rem;background:none;color:inherit;border:1px solid color-mix(in srgb,var(--paper) 40%,transparent);padding:5px 12px;border-radius:2px;cursor:pointer}
.copy:hover{border-color:var(--paper)}
.agent{margin:0 0 40px;max-width:60ch;color:color-mix(in srgb,var(--paper) 80%,transparent)}
.social{display:flex;gap:12px;margin-top:48px;flex-wrap:wrap}
.social a{font-family:var(--f-ui);text-decoration:none;border:1px solid color-mix(in srgb,var(--paper) 40%,transparent);padding:10px 18px}
.social a:hover{background:var(--paper);color:var(--ink)}
footer{background:var(--ink);color:color-mix(in srgb,var(--paper) 55%,transparent);font-family:var(--f-ui);font-size:.82rem;border-top:1px solid color-mix(in srgb,var(--paper) 15%,transparent)}
footer .wrap{padding-block:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{color:inherit}

@media (max-width:860px){
  .hero .wrap,.book .wrap,.bio,.read .wrap,.order-grid{grid-template-columns:1fr;gap:36px}
  .hero .wrap{padding-block:44px}
  .fan{height:340px}
  .fan a{width:170px}
  .facts{position:static;grid-template-columns:repeat(2,1fr)}
  .book .cv{max-width:220px}
  .buybox{position:static}
  .ct-grid{grid-template-columns:1fr}
  .sec{padding-block:64px}
  .wife .wrap{grid-template-columns:1fr;gap:4px}
  nav.top ul{gap:6px 14px;font-size:.85rem}
  .cat article{grid-template-columns:110px 1fr;gap:20px}
  .fields{grid-template-columns:1fr}
  .shelf{grid-template-columns:repeat(2,1fr);gap:24px 16px}
}
@media (max-width:420px){.fan a{width:140px}.fan{height:300px}.pick label.item{grid-template-columns:auto 40px 1fr;}.pick .qty{grid-column:3/-1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ціна та наявність */
.price{display:flex;align-items:baseline;gap:6px 18px;flex-wrap:wrap;margin:0 0 22px;font-family:var(--f-ui)}
.price .pv{font-family:var(--f-display);font-size:2rem;line-height:1}
.price .st{font-size:.85rem;opacity:.85}
.book .price .st{color:var(--acc)}
.cat .price .pv,.price.box .pv{font-size:1.6rem}
.cat .price .st,.price.box .st{color:var(--ok)}
.price.box{margin:4px 0 14px}
.total{font-family:var(--f-ui);font-size:1rem;margin:14px 0 0;padding:12px 14px;background:var(--paper-2);border-left:3px solid var(--accent)}
.total b{font-size:1.15rem}

/* відгуки */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rv{margin:0;padding:28px 26px;background:var(--paper-2);border-top:3px solid var(--accent);display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.rv blockquote{margin:0;font-family:var(--f-body);font-size:1.02rem;line-height:1.65;max-width:none}
.rv figcaption{font-family:var(--f-ui);font-size:.9rem;display:flex;flex-direction:column;gap:2px;margin:0;color:var(--ink)}
.rv figcaption::before{content:none}
.rv figcaption span{color:var(--ink-soft);font-size:.8rem}
.rv figcaption a{color:var(--accent);text-decoration:none}
@media (max-width:860px){.reviews{grid-template-columns:1fr}}