/* ============================================================
   Oleg Gotko — official site
   Dark-fantasy theme. No frameworks, no dependencies.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --ink:          #f7f0e2;
  --ink-2:        #f0e7d6;
  --ink-3:        #e7dbc4;
  --panel:        rgba(74,52,22,.045);
  --panel-2:      rgba(74,52,22,.085);
  --line:         rgba(150,108,40,.34);
  --line-soft:    rgba(74,52,22,.16);

  --gold:         #8a5c12;
  --gold-bright:  #6b4508;
  --gold-deep:    #a87c22;
  --moon:         #8a4b23;
  --blood:        #8d2a2a;

  --text:         #241b10;
  --text-dim:     #4a3b27;
  --text-faint:   #6d5c44;

  --f-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --r: 14px;
  --shadow: 0 16px 42px rgba(96,70,32,.18);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset-ish ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold); text-decoration:none; transition:color .25s var(--ease); }
a:hover{ color:var(--gold-bright); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.15; margin:0; letter-spacing:.005em; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ---------- ambient background ---------- */
.stars{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(212,150,88,.20), transparent 62%),
    radial-gradient(900px 620px at 6% 8%, rgba(202,164,104,.17), transparent 60%),
    radial-gradient(1000px 800px at 50% 108%, rgba(176,138,78,.13), transparent 62%),
    var(--ink);
}
.stars::after{
  content:none;   /* звёзды были для тёмной темы */
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 62% 8%,  #dfe8ff, transparent),
    radial-gradient(1.6px 1.6px at 84% 32%, #fff, transparent),
    radial-gradient(1px 1px  at 31% 46%, #cfd8ee, transparent),
    radial-gradient(1.3px 1.3px at 72% 62%, #fff, transparent),
    radial-gradient(1px 1px  at 45% 78%, #dbe4f7, transparent),
    radial-gradient(1.5px 1.5px at 18% 88%, #fff, transparent),
    radial-gradient(1px 1px  at 92% 74%, #cbd6ef, transparent),
    radial-gradient(1.1px 1.1px at 5% 62%,  #fff, transparent),
    radial-gradient(1.2px 1.2px at 52% 26%, #e6ecff, transparent);
  animation:twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{opacity:.35} to{opacity:.75} }

/* ---------- layout ---------- */
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
main{ position:relative; z-index:1; }
section{ padding:clamp(4.5rem,9vw,7.5rem) 0; position:relative; scroll-margin-top:76px; }
/* первый раздел после шапки — прижимаем, чтобы обложки попадали в первый экран */
#books{ padding-top:clamp(1.6rem,3vw,2.6rem); }
#books .section-head{ margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.section-head{ text-align:center; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-head h2{
  font-size:clamp(2.1rem,5.2vw,3.4rem);
  background:linear-gradient(180deg,#2a1f10 12%,#7a5210 108%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-head .sub{ color:var(--text-dim); margin:.65rem 0 0; font-size:1.02rem; }
.rule{
  width:170px; height:1px; margin:1.35rem auto 0; border:0;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);
  position:relative;
}
.rule::after{
  content:"✦"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:var(--rule-bg,var(--ink)); color:var(--gold-deep);
  font-size:.72rem; padding:0 .55rem; line-height:1;
}

/* ---------- skip link ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#fff6e6; padding:.7rem 1.2rem; border-radius:0 0 8px 0; font-weight:600;
}
.skip:focus{ left:0; }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.05rem 0;
  transition:padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:rgba(247,240,226,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:opacity .3s var(--ease);
}
.site-header.scrolled{ padding:.6rem 0; }
.site-header.scrolled::before{ opacity:1; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; position:relative; }

.brand{
  display:flex; flex-direction:column; line-height:1; font-family:var(--f-display); flex-shrink:0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.site-header.scrolled .brand{ opacity:1; visibility:visible; transform:none; }
.brand b{
  font-size:1.42rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:linear-gradient(100deg,var(--gold-bright),var(--gold) 45%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand span{ font-size:.6rem; letter-spacing:.42em; text-transform:uppercase; color:var(--text-faint); margin-top:.42rem; font-family:var(--f-body); }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{
  color:var(--text-dim); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.55rem .8rem; border-radius:8px; position:relative; white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.32rem; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover,.nav a.active{ color:var(--gold-bright); }
.nav a:hover::after,.nav a.active::after{ transform:scaleX(1); }

.lang{ display:flex; align-items:center; gap:.2rem; margin-left:.6rem; padding-left:.85rem; border-left:1px solid var(--line); }
.lang a{
  font-size:.74rem; font-weight:600; letter-spacing:.1em; color:var(--text-faint);
  padding:.36rem .5rem; border-radius:6px; transition:all .25s var(--ease);
}
.lang a:hover{ color:var(--gold-bright); background:var(--panel-2); }
.lang a[aria-current="true"]{ color:var(--ink); background:var(--gold); }

.burger{
  display:none; width:42px; height:42px; border-radius:10px;
  border:1px solid var(--line); align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger i{ display:block; width:18px; height:1.5px; background:var(--gold); transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{
  min-height:70svh; display:flex; align-items:center;
  padding:7rem 0 2.6rem; position:relative; overflow:hidden;
}
.hero-inner{ position:relative; z-index:2; text-align:left; max-width:min(100%,660px); margin-inline:0; }
@media (min-width:861px){
  .hero-inner{ margin-left:auto; margin-right:max(1.25rem, calc((100vw - var(--wrap)) / 2)); }
}

/* портрет: приглушённый, растворяется в фоне и не спорит с именем */
.hero-photo{
  position:absolute; z-index:1; inset:0 auto 0 0;
  width:min(46%,620px); pointer-events:none;
}
.hero-photo picture{ display:contents; }
.hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:16% 50%;
  opacity:1;
  -webkit-mask-image:linear-gradient(90deg,#000 24%,rgba(0,0,0,.5) 68%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 24%,rgba(0,0,0,.5) 68%,transparent 100%);
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(270deg,var(--ink) 0%,rgba(247,240,226,.20) 50%,transparent 84%),
    linear-gradient(180deg,transparent 55%,rgba(247,240,226,.66) 88%,var(--ink) 100%);
}

.moon{ display:none; }  /* портрет стал главным пятном — вторая точка внимания лишняя */

.kicker{
  display:inline-block; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--line); border-radius:999px;
  padding:.42rem 1.1rem; margin-bottom:1.15rem; background:var(--panel);
}

/* имя автора — главное, что видит человек */
.hero-name{
  font-size:clamp(2.9rem,8vw,6rem); line-height:.94; margin:0 0 1.15rem;
  letter-spacing:.02em; text-transform:uppercase; font-weight:600;
  background:linear-gradient(172deg,#241a0c 6%, #3f2d10 45%, #7a5210 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-wrap:balance;
}
.hero .lead{
  font-size:clamp(1.05rem,2.2vw,1.42rem); color:var(--text);
  font-family:var(--f-display); font-style:italic; margin:0 0 .35rem; max-width:30ch;
}
.hero .lead-sub{ font-size:1rem; color:var(--moon); margin:0 0 1.9rem; font-family:var(--f-display); font-style:italic; }
.hero-cta{ display:flex; gap:.85rem; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:clamp(1.4rem,4vw,3rem); flex-wrap:wrap; margin-top:2.4rem; }
.hero-stats div{ text-align:left; }
.hero-stats b{ display:block; font-family:var(--f-display); font-size:1.9rem; color:var(--gold); line-height:1; }
.hero-stats small{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); }
.hero-stats .wide b{ font-size:1.05rem; letter-spacing:.05em; padding-top:.5rem; }

.scroll-hint{ display:none; }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.75rem; border-radius:999px;
  font-size:.86rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  transition:all .3s var(--ease); border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:linear-gradient(120deg,#a3761d,#75500e); color:#fff6e6; box-shadow:0 8px 24px rgba(120,84,20,.28); }
.btn-primary:hover{ color:#fff6e6; transform:translateY(-2px); box-shadow:0 14px 32px rgba(120,84,20,.38); }
.btn-ghost{ border-color:var(--line); color:var(--text); background:var(--panel); }
.btn-ghost:hover{ color:var(--gold-bright); border-color:var(--gold-deep); background:var(--panel-2); transform:translateY(-2px); }
.btn-sm{ padding:.62rem 1.2rem; font-size:.76rem; }

.hero-stats{ display:flex; gap:clamp(1.5rem,5vw,3.4rem); justify-content:center; flex-wrap:wrap; margin-top:2.4rem; }
.hero-stats div{ text-align:center; }
.hero-stats b{ display:block; font-family:var(--f-display); font-size:1.9rem; color:var(--gold); line-height:1; }
.hero-stats small{ font-size:.7rem; letter-spacing:.19em; text-transform:uppercase; color:var(--text-faint); }
.hero-stats .wide b{ font-size:1.05rem; letter-spacing:.05em; padding-top:.5rem; }

.scroll-hint{ display:none; }
@keyframes bob{ 0%,100%{transform:translate(-50%,0); opacity:.45} 50%{transform:translate(-50%,9px); opacity:1} }

/* ---------- intro ---------- */
.intro-lead{ max-width:52rem; margin:0 auto 1.4rem; text-align:center; font-size:1.08rem; color:var(--text-dim); }
.intro-go{ text-align:center; font-family:var(--f-display); font-style:italic; font-size:1.5rem; color:var(--gold); margin:0 0 3.2rem; }
.era-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.3rem; }
.era{
  padding:2rem 1.75rem; border-radius:var(--r);
  background:linear-gradient(160deg,var(--panel),rgba(74,52,22,.015));
  border:1px solid var(--line-soft); position:relative; overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.era::before{
  content:""; position:absolute; inset:0 auto 0 0; width:2px;
  background:linear-gradient(180deg,transparent,var(--gold-deep),transparent);
  opacity:.5; transition:opacity .4s;
}
.era:hover{ transform:translateY(-5px); border-color:var(--line); background:linear-gradient(160deg,var(--panel-2),rgba(74,52,22,.025)); }
.era:hover::before{ opacity:1; }
.era .era-tag{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); display:block; margin-bottom:.7rem; }
.era h3{ font-size:1.42rem; color:var(--text); margin-bottom:.75rem; }
.era p{ font-size:.94rem; color:var(--text-dim); margin:0; }
.intro-outro{ text-align:center; font-family:var(--f-display); font-size:1.65rem; color:var(--gold-bright); margin-top:3.2rem; letter-spacing:.02em; }

/* ---------- books ---------- */
.filters{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.8rem; }
.filters button{
  padding:.55rem 1.15rem; border-radius:999px; border:1px solid var(--line-soft);
  font-size:.79rem; letter-spacing:.05em; color:var(--text-dim);
  transition:all .28s var(--ease);
}
.filters button:hover{ color:var(--gold-bright); border-color:var(--gold-deep); }
.filters button[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:#fff6e6; font-weight:600; }

.books{
  display:grid; gap:1.7rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
  justify-content:center;
}
/* карточку не раздуваем: обложка привязана к её ширине */
.books[data-count="1"]{ grid-template-columns:minmax(0,300px); }
.books[data-count="2"]{ grid-template-columns:repeat(2,minmax(0,300px)); }
.books[data-count="3"]{ grid-template-columns:repeat(3,minmax(0,290px)); }
.books[data-count="4"]{ grid-template-columns:repeat(4,minmax(0,262px)); }
.books[data-count="5"]{ grid-template-columns:repeat(3,minmax(0,290px)); }
.book{
  border-radius:var(--r); overflow:hidden; position:relative;
  background:linear-gradient(165deg,var(--panel),rgba(74,52,22,.015));
  border:1px solid var(--line-soft);
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.book:hover{ transform:translateY(-7px); border-color:var(--line); box-shadow:var(--shadow); }
.book.hide{ display:none; }
.book-cover{
  position:relative; aspect-ratio:2/3; overflow:hidden;
  padding:1.15rem 1.15rem .9rem;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,246,224,.75), transparent 62%),
    linear-gradient(160deg,var(--ink-3),var(--ink-2));
  display:grid; place-items:end center;
}
.book-cover picture{ display:contents; }
/* обложки у книг разной пропорции — показываем целиком, без обрезки */
.book-cover img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; align-self:end;
  border-radius:2px;
  box-shadow:0 10px 24px rgba(92,66,28,.22), 0 2px 6px rgba(92,66,28,.16);
  transition:transform .55s var(--ease), filter .5s;
  filter:saturate(.96);
}
.book:hover .book-cover img{ transform:translateY(-4px) scale(1.025); filter:saturate(1.06); }
.book-cover::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(180deg,transparent,rgba(120,90,45,.14));
  pointer-events:none;
}
.book-body{ padding:1.25rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.book-genre{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); }
.book-body h3{ font-size:1.24rem; line-height:1.25; }
.book-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto; padding-top:.85rem; }
.book-actions .btn{ flex:1 1 auto; justify-content:center; }

/* ---------- dialog ---------- */
dialog.sheet{
  width:min(100% - 1.6rem, 720px); max-height:88svh; padding:0; border:1px solid var(--line);
  border-radius:var(--r); background:var(--ink-2); color:var(--text); box-shadow:var(--shadow);
  overflow:hidden;
}
dialog.sheet::backdrop{ background:rgba(46,34,14,.55); backdrop-filter:blur(5px); }
.sheet-inner{ display:grid; grid-template-columns:180px 1fr; gap:1.6rem; padding:1.8rem; overflow-y:auto; max-height:88svh; }
.sheet-cover img{ border-radius:9px; border:1px solid var(--line-soft); width:100%; }
.sheet h3{ font-size:1.75rem; margin-bottom:.9rem; padding-right:2.2rem; color:var(--gold-bright); }
.sheet dl{ margin:0 0 1.1rem; display:grid; grid-template-columns:auto 1fr; gap:.3rem .9rem; font-size:.88rem; }
.sheet dt{ color:var(--text-faint); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; padding-top:.22rem; }
.sheet dd{ margin:0; color:var(--text); }
.sheet .annot{ font-size:.95rem; color:var(--text-dim); border-top:1px solid var(--line-soft); padding-top:1.05rem; }
.sheet-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.3rem; }
.sheet-close{
  position:absolute; top:.9rem; right:.9rem; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-soft); display:grid; place-items:center; color:var(--text-dim);
  background:var(--ink-2); z-index:3; transition:all .25s;
}
.sheet-close:hover{ color:var(--gold-bright); border-color:var(--gold-deep); }

/* ---------- audio ---------- */
.audio-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,286px)); gap:1.15rem; justify-content:center; }
.track{
  border-radius:12px; overflow:hidden; border:1px solid var(--line-soft);
  background:var(--panel); transition:transform .4s var(--ease), border-color .4s var(--ease);
  display:flex; flex-direction:column;
}
.track:hover{ transform:translateY(-4px); border-color:var(--line); }
.track-thumb{
  position:relative; aspect-ratio:16/9; width:100%; border:0; padding:0; cursor:pointer; overflow:hidden;
  display:block;
  /* если превью с YouTube не загрузилось — под ним остаётся ночное небо */
  background:
    radial-gradient(60% 90% at 22% 18%, rgba(169,196,232,.30), transparent 62%),
    radial-gradient(70% 100% at 82% 88%, rgba(168,134,60,.26), transparent 60%),
    linear-gradient(145deg,var(--ink-3),var(--ink-2));
}
.track-thumb img{ width:100%; height:100%; object-fit:cover; opacity:.9; transition:opacity .4s, transform .6s var(--ease); }
.track:hover .track-thumb img{ opacity:1; transform:scale(1.04); }
.track-thumb .play{
  position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%;
  background:rgba(122,82,16,.94); display:grid; place-items:center; color:#fff6e6;
  box-shadow:0 6px 20px rgba(92,66,28,.35); transition:transform .3s var(--ease);
}
.track-thumb:hover .play{ transform:scale(1.1); }
.track-thumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.track-title{ padding:.85rem 1rem 1rem; font-size:.9rem; color:var(--text); font-family:var(--f-display); font-size:1.06rem; }
.audio-note{ text-align:center; color:var(--text-faint); font-size:.78rem; margin-top:1.7rem; }

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:minmax(240px,340px) 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.portrait{ position:relative; }
.portrait picture{ display:block; }
.portrait img{ border-radius:var(--r); border:1px solid var(--line); width:100%; filter:saturate(.9) contrast(1.04); }
.portrait::after{
  content:""; position:absolute; inset:-11px; border-radius:calc(var(--r) + 8px);
  border:1px solid var(--line); pointer-events:none; opacity:.55;
}
.about-text h3{ font-size:2.15rem; color:var(--gold-bright); margin-bottom:1.15rem; }
.about-text p{ color:var(--text-dim); }
.where{ margin-top:2rem; padding:1.45rem 1.6rem; border-radius:var(--r); border:1px solid var(--line-soft); background:var(--panel); }
.block-title{
  display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:.95rem;
  font-family:var(--f-body); font-weight:600;
}
.block-title svg{ flex-shrink:0; }
.where p{ font-size:.92rem; margin-bottom:.5rem; }
.shoplinks{ display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1.15rem; padding:0; list-style:none; }
.shoplinks:last-child{ margin-bottom:0; }
.shoplinks a{
  display:inline-block; padding:.4rem .9rem; border-radius:999px; font-size:.79rem;
  border:1px solid var(--line-soft); background:var(--panel); color:var(--text-dim);
  transition:all .28s var(--ease);
}
.shoplinks a:hover{ color:var(--gold-bright); border-color:var(--gold-deep); background:var(--panel-2); }

/* ---------- contact ---------- */
.contact{ text-align:center; }
.mailbox{
  display:inline-flex; align-items:center; gap:.75rem; margin:0 auto 1.7rem;
  padding:.75rem .8rem .75rem 1.5rem; border-radius:999px;
  border:1px solid var(--line); background:var(--panel);
  font-family:var(--f-display); font-size:clamp(1.05rem,3.2vw,1.5rem); color:var(--gold-bright);
  max-width:100%; flex-wrap:wrap; justify-content:center;
}
.copy-btn{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-soft); color:var(--text-dim); transition:all .25s; flex-shrink:0;
}
.copy-btn:hover{ color:var(--gold-bright); border-color:var(--gold-deep); }
.copy-btn.done{ color:#2e7d4f; border-color:#2e7d4f; }
.contact-cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* ---------- footer ---------- */
.site-footer{
  position:relative; z-index:1; padding:2.6rem 0; border-top:1px solid var(--line-soft);
  background:rgba(231,219,196,.5);
}
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:var(--text-faint); }
.footer-inner a{ color:var(--text-dim); }
.footer-inner a:hover{ color:var(--gold); }
.footer-langs{ display:flex; gap:1rem; }

.to-top{
  position:fixed; right:1.15rem; bottom:1.15rem; z-index:90;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:rgba(247,240,226,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:grid; place-items:center; color:var(--gold);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:all .35s var(--ease);
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--gold); color:#fff6e6; }

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

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:1040px){
  .books, .books[data-count]{ grid-template-columns:repeat(2,minmax(0,300px)); }
}

@media (max-width:760px){
  .era-grid{ grid-template-columns:1fr; }
}

@media (max-width:980px){
  .about-grid{ grid-template-columns:1fr; }
  .portrait{ max-width:320px; margin-inline:auto; }
}

@media (max-width:860px){
  .burger{ display:flex; }
  .nav{
    position:absolute; top:calc(100% + .75rem); right:0; left:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(8,11,22,.97);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--line); border-radius:var(--r);
    padding:.6rem; box-shadow:var(--shadow);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:all .3s var(--ease);
  }
  .nav.open{ opacity:1; visibility:visible; transform:none; }
  .nav a{ padding:.85rem 1rem; font-size:.9rem; }
  .nav a::after{ display:none; }
  .lang{ margin:.4rem 0 0; padding:.7rem 0 .2rem; border-left:0; border-top:1px solid var(--line-soft); justify-content:center; gap:.4rem; }
  .lang a{ padding:.5rem .95rem; font-size:.8rem; }
}

@media (max-width:640px){
  body{ font-size:15.5px; }
  .wrap{ width:min(100% - 1.6rem, var(--wrap)); }
  .hero{ min-height:auto; padding:6.5rem 0 2.4rem; }
  .hero-inner{ text-align:center; max-width:100%; }
  .hero-cta, .hero-stats{ justify-content:center; }
  .hero-stats div{ text-align:center; }
  .hero-photo{ width:100%; inset:0; }
  .hero-photo img{
    opacity:.3; object-position:16% 42%;
    -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 92%);
            mask-image:linear-gradient(180deg,#000 45%,transparent 92%);
  }
  .hero-photo::after{ background:linear-gradient(180deg,rgba(247,240,226,.35),var(--ink) 88%); }
  .hero .lead{ max-width:100%; margin-inline:auto; }

  .hero-stats{ gap:1.5rem 2.2rem; margin-top:2.6rem; }
  .kicker{ font-size:.62rem; letter-spacing:.24em; padding:.45rem 1rem; margin-bottom:1.5rem; }
  .books, .books[data-count]{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  .book-body{ padding:.95rem 1rem 1.15rem; }
  .book-body h3{ font-size:1.02rem; }
  .book-actions{ gap:.4rem; padding-top:.7rem; }
  .book-actions .btn{ width:100%; font-size:.68rem; padding:.6rem .6rem; letter-spacing:.03em; }
  .book-actions .btn svg{ display:none; }
  .btn{ padding:.75rem 1.35rem; }
  .sheet-inner{ grid-template-columns:1fr; padding:1.4rem; gap:1.2rem; }
  .sheet-cover{ max-width:150px; }
  .sheet h3{ font-size:1.4rem; }
  .sheet-actions .btn{ width:100%; justify-content:center; }
  .audio-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
  .track-title{ font-size:.92rem; padding:.65rem .75rem .8rem; }
  .track-thumb .play{ width:40px; height:40px; }
  .era{ padding:1.6rem 1.35rem; }
  .footer-inner{ justify-content:center; text-align:center; }
  .to-top{ right:.8rem; bottom:.8rem; }
}

@media (max-width:400px){
  .audio-grid{ grid-template-columns:minmax(0,1fr); }
  .books, .books[data-count]{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand b{ font-size:1.2rem; }
}

@media print{
  .site-header,.to-top,.filters,.scroll-hint,.stars,.hero-cta{ display:none!important; }
  body{ background:#fff; color:#000; }
}


/* ---------- награды ---------- */
.awards{
  margin-top:2rem; padding:1.45rem 1.6rem; border-radius:var(--r);
  border:1px solid var(--line-soft); background:var(--panel);
}
.award-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
.award{ display:flex; gap:1rem; align-items:flex-start; }
.award + .award{ border-top:1px solid var(--line-soft); padding-top:1.1rem; }
.award-thumb{
  flex-shrink:0; width:62px; border-radius:6px; overflow:hidden; padding:0;
  border:1px solid var(--line); background:var(--ink-2); line-height:0;
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.award-thumb:hover{ transform:translateY(-2px); border-color:var(--gold-deep); }
.award-thumb img{ width:100%; height:auto; display:block; }
.award-text{ min-width:0; }
.award-year{ font-size:.66rem; letter-spacing:.2em; color:var(--gold-deep); display:block; margin-bottom:.3rem; }
.award h4{ font-size:1.12rem; color:var(--text); margin:0 0 .2rem; font-family:var(--f-display); }
.award-work{ font-family:var(--f-display); font-size:1.02rem; color:var(--gold-bright); margin:0 0 .25rem; }
.award-meta{ font-size:.84rem; color:var(--text-dim); margin:0; }

/* диплом в окне — вертикальный лист, ему нужно больше места */
.sheet-cover.wide img{ border-radius:6px; }
@media (min-width:641px){
  .sheet-inner:has(.sheet-cover.wide){ grid-template-columns:260px 1fr; }
}

/* ============================================================
   страницы ознакомительных фрагментов
   Тридцать тысяч знаков по тёмному фону читать тяжело,
   поэтому здесь спокойнее: мягкая подложка, крупнее кегль,
   строка около 65 знаков — как в книге.
   ============================================================ */
body.reading{ background:#fbf6ea; --rule-bg:#fbf6ea; }

.frag-bar{
  position:sticky; top:0; z-index:50;
  background:rgba(251,246,234,.93);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.frag-bar-inner{
  width:min(100% - 2.5rem, 900px); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 0; font-size:.82rem;
}
.frag-back{ color:var(--gold); white-space:nowrap; }
.frag-book{ color:var(--text-faint); font-family:var(--f-display); font-size:1rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.frag{
  position:relative; z-index:1;
  width:min(100% - 2.5rem, 720px); margin-inline:auto;
  padding:clamp(2.5rem,6vw,4.5rem) 0 4rem;
}
.frag-kicker{
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 .8rem;
}
.frag h1{
  font-size:clamp(1.9rem,5vw,2.9rem); margin:0 0 .4rem;
  background:linear-gradient(178deg,#241a0c 10%,#7a5210 110%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-wrap:balance;
}
.frag-author{ color:var(--text-dim); font-family:var(--f-display); font-style:italic; margin:0; }
.frag .rule{ margin:1.6rem 0 2.4rem; }

.frag-text{
  font-family:var(--f-display);
  font-size:clamp(1.12rem,1.1rem + .3vw,1.28rem);
  line-height:1.82;
  color:#2a2114;                 /* мягче чистого чёрного — глазам легче */
  max-width:65ch;
}
.frag-text p{ margin:0 0 1.25em; text-indent:1.6em; }
.frag-text p:first-of-type{ text-indent:0; }
.frag-text em{ color:#4a3b27; }
.frag-h{
  font-size:1.3rem; letter-spacing:.06em; color:var(--gold-bright);
  margin:2.6rem 0 1.2rem; text-align:center; font-weight:600;
}
.frag-time{
  font-family:var(--f-body); font-size:.8rem; letter-spacing:.24em;
  color:var(--gold-deep); text-align:center; margin:2.2rem 0 1.2rem; text-indent:0;
}
.frag-sep{
  border:0; height:1px; width:120px; margin:2.4rem auto;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);
}

.frag-end{ margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--line-soft); }
.frag-end-note{ color:var(--text-dim); font-family:var(--f-display); font-style:italic; font-size:1.05rem; }
.frag-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem; }

@media (max-width:640px){
  .frag{ width:min(100% - 1.8rem, 720px); }
  .frag-text{ font-size:1.08rem; line-height:1.78; }
  .frag-text p{ text-indent:1.2em; }
  .frag-cta .btn{ width:100%; justify-content:center; }
}

/* язык издания под названием книги */
.book-lang{
  font-size:.78rem; color:var(--text-faint);
  font-family:var(--f-body); margin-top:-.25rem;
}
/* <picture> — строчный элемент, без этого картинка схлопывается по высоте */
.award-thumb picture, .sheet-cover picture{ display:contents; }
.award-thumb img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.track-by{ display:block; font-family:var(--f-body); font-size:.76rem; color:var(--text-faint); margin-top:.15rem; }