/* ============================================================
   ЕКСЛІБРИС · base.css
   Токени, типографіка, шапка, підвал, спільні компоненти.
   Підключається на КОЖНІЙ сторінці першим.
   ============================================================ */

/* ---------- 1. Токени ---------- */
:root{
  /* палітра */
  --sky:#3E4742;          /* димчастий зелено-сірий — герой */
  --sky-2:#2E3531;        /* темніший — хронологія, підвал */
  --beige:#D9D3BB;        /* крафт-папір */
  --beige-2:#CEC7AC;      /* крафт темніший */
  --sage:#A7B29C;         /* шавлія — акцентні секції */
  --cream:#F2EEDF;        /* світлий папір */
  --ink:#23241F;          /* основний текст */
  --ink-soft:#4C4D43;     /* другорядний текст */
  --paper-cut:#1B1D19;    /* колір паперових силуетів */
  --tape:#F6F2E4;         /* ярлик-наліпка */
  --ochre:#A67E44;        /* акцент з логотипа */

  --rule:color-mix(in srgb, #23241F 18%, transparent);
  --rule-soft:color-mix(in srgb, #23241F 12%, transparent);
  --rule-light:color-mix(in srgb, #F2EEDF 14%, transparent);

  /* шрифти */
  --display:"Prata", Georgia, serif;
  --sans:"Commissioner", system-ui, -apple-system, sans-serif;
  --read:"Literata", Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  /* розміри */
  --wrap:1240px;
  --pad:clamp(20px, 4vw, 56px);
  --bar-h:54px;
}

/* ---------- 2. Скидання ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--beige);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--sage)}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* зерно поверх усього */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;
  opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}

/* ---------- 3. Утиліти ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* фони секцій */
.bg-cream{background:var(--cream)}
.bg-beige{background:var(--beige)}
.bg-beige2{background:var(--beige-2)}
.bg-sage{background:var(--sage)}
.bg-dark{background:var(--sky-2);color:var(--cream)}

/* ярлик-наліпка */
.tape{
  background:var(--tape);color:var(--ink);padding:5px 12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 3px 9px rgba(10,12,9,.28);white-space:nowrap;display:inline-block;
}

/* заголовок секції */
.sec-head{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,54px);margin:0;letter-spacing:.005em}
.sec-head .hint{font-size:15px;font-weight:300;font-style:italic;color:var(--ink-soft)}
.sec-head .all{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px;transition:opacity .2s}
.sec-head .all:hover{opacity:.6}
.bg-dark .sec-head .hint{color:inherit;opacity:.6}

/* рваний край */
.tear{position:absolute;left:0;right:0;bottom:-2px;z-index:5;line-height:0}
.tear svg{display:block;width:100%;height:52px}
.tear-top{position:absolute;top:-2px;left:0;right:0;line-height:0;transform:scaleY(-1);z-index:5}
.tear-top svg{display:block;width:100%;height:44px}

/* обкладинка-плашка */
.cov{
  aspect-ratio:5/8;padding:11px 10px;display:flex;flex-direction:column;color:var(--cream);
  border:1px solid rgba(0,0,0,.28);position:relative;transition:transform .3s;
  overflow:hidden;   /* довге ім'я не має вилазити за плашку */
  box-shadow:6px 8px 0 color-mix(in srgb, var(--ink) 12%, transparent);
}
.cov::before{content:"";position:absolute;inset:5px;border:1px solid rgba(242,238,223,.35)}
.cov .t{font-family:var(--display);font-size:15px;line-height:1.2;padding:8px 4px 0}
.cov .a{font-size:11px;font-weight:300;font-style:italic;opacity:.92;padding:6px 4px 0}
.cov .y{margin-top:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;padding:0 4px 4px;opacity:.75}

/* полиця книг */
.shelf{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;align-items:end}
.shelf.cols-4{grid-template-columns:repeat(4,1fr);gap:24px}
.vol{cursor:pointer;text-align:left}
.vol:nth-child(2n) .cov{transform:rotate(1.3deg)}
.vol:nth-child(3n) .cov{transform:rotate(-1.2deg)}
.vol:hover .cov{transform:translateY(-8px) rotate(0)}
.vol .cap{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}

/* ---------- 4. Шапка ---------- */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:120;height:var(--bar-h);
  color:var(--cream);transition:background .4s ease,color .4s ease,box-shadow .4s ease;
}
.bar__in{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:100%;
  display:flex;align-items:center;gap:26px;
}
.bar.is-stuck{background:var(--cream);color:var(--ink);
  box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 15%, transparent)}
/* сторінки зі світлою шапкою від початку */
.bar.bar--light{background:var(--cream);color:var(--ink);
  box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 15%, transparent)}

.bar__logo{display:block;flex:0 0 auto;line-height:0}
.bar__logo img{height:19px;width:auto}
.bar__logo .dark{display:none}
.bar.is-stuck .bar__logo .dark,.bar.bar--light .bar__logo .dark{display:block}
.bar.is-stuck .bar__logo .light,.bar.bar--light .bar__logo .light{display:none}

.bar__panel{display:contents}
.bar__nav{display:flex;gap:19px}
.bar__nav a{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  opacity:.78;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:opacity .2s,border-color .2s;white-space:nowrap;
}
.bar__nav a:hover,.bar__nav a[aria-current]{opacity:1;border-color:currentColor}

.bar__search{
  margin-left:auto;display:flex;align-items:center;height:28px;
  border:1px solid color-mix(in srgb, currentColor 30%, transparent);transition:border-color .2s;
}
.bar__search:focus-within{border-color:currentColor}
.bar__search input{
  background:none;border:0;color:inherit;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:0 10px;width:112px;outline:none;
}
.bar__search input::placeholder{color:currentColor;opacity:.45}
.bar__search button{background:none;border:0;color:inherit;cursor:pointer;
  padding:0 8px;height:100%;display:grid;place-items:center;opacity:.7}
.bar__search button:hover{opacity:1}

.bar__burger{display:none;background:none;border:0;color:inherit;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:8px 0}

/* ---------- 5. Підвал ---------- */
/* У підвалі НЕМАЄ посилань на розділи — вони живуть тільки в шапці.
   Тут лише службові сторінки, щоб не плодити дублі. */
.foot{background:var(--sky-2);color:var(--cream);padding:64px 0 44px;position:relative;overflow:hidden}
.foot .wrap{position:relative;z-index:2}
.foot__in{display:flex;gap:40px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.foot__logo{display:block;margin-bottom:18px;line-height:0}
.foot__logo img{height:64px;width:auto}
.foot__line{max-width:40ch;font-weight:300;font-size:15px;opacity:.72;margin:0}
.foot__nav{display:flex;flex-direction:column;gap:10px;padding-top:6px}
.foot__nav a{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  opacity:.72;border-bottom:1px solid transparent;padding-bottom:2px;transition:.2s;align-self:flex-start}
.foot__nav a:hover{opacity:1;border-color:var(--cream)}
.foot__meta{margin-top:44px;padding-top:18px;border-top:1px solid var(--rule-light);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.5}
.foot__sil{position:absolute;right:-40px;bottom:-50px;height:250px;color:#242B26;z-index:1;opacity:.85}
.foot__sil svg{height:100%;width:auto;display:block}

/* ---------- 6. Поява при скролі ---------- */
/* поява при прокрутці. Без JS правило не спрацьовує — інакше сторінка
   з вимкненим скриптом лишалась би порожньою. */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.js .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{transition:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- 7. Адаптив ---------- */
@media(max-width:940px){
  .bar__nav{gap:14px}
  .bar__nav a{font-size:8.5px;letter-spacing:.12em}
}
@media(max-width:1080px){
  .shelf{grid-template-columns:repeat(3,1fr);row-gap:38px}
}
@media(max-width:820px){
  .bar{background:var(--cream);color:var(--ink);box-shadow:0 1px 0 var(--rule)}
  .bar__logo .light{display:none}
  .bar__logo .dark{display:block}
  .bar__panel{
    position:absolute;top:var(--bar-h);left:0;right:0;background:var(--cream);
    display:none;flex-direction:column;padding:6px var(--pad) 20px;
    box-shadow:0 12px 24px rgba(0,0,0,.14);
  }
  .bar.is-open .bar__panel{display:flex}
  .bar__nav{flex-direction:column;gap:0}
  .bar__nav a,.bar__nav a:nth-child(n+5){display:block;padding:13px 0;font-size:10px;
    border-bottom:1px solid var(--rule-soft);opacity:1}
  .bar__nav a:hover{border-color:var(--rule-soft)}
  .bar__burger{display:block;margin-left:auto}
  .bar__search{display:flex;margin:16px 0 0;width:100%;height:38px}
  .bar__search input{flex:1;width:auto;font-size:11px}
  .shelf,.shelf.cols-4{grid-template-columns:repeat(2,1fr);row-gap:34px}
}
@media(max-width:560px){
  body{font-size:16px}
  .shelf,.shelf.cols-4{grid-template-columns:repeat(2,1fr);gap:16px}
}

/* чипи тем і епох — на сторінках книг, творів і покажчиків,
   тому правило спільне, а не в hub.css */
/* чипи тем і епох */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--rule);padding:7px 13px;font-size:14px;color:var(--ink-soft);
  transition:.2s}
.chip:hover{border-color:var(--sky);color:var(--sky);background:var(--cream)}