/* Layout: литературный журнал — колонтитул-оглавление сверху, асимметричные развороты, поля как у книжной полосы */
:root{
  --milk:#f7f1ea; --paper:#fffaf4; --wine:#6e1f2e; --wine-soft:#8c3445;
  --powder:#e9cfcf; --powder-deep:#d7b0b2; --ink:#2e2a2b; --ink-soft:#5f5658;
  --gold:#a8864f; --line:rgba(110,31,46,.22);
  --display:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --body:"Golos Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --grain-op:.35; --ded-bg:#6e1f2e; --ded-fg:#f7f1ea;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --milk:#1d1517; --paper:#261c1e; --wine:#d98a98; --wine-soft:#e7a7b2;
  --powder:#4a3035; --powder-deep:#6a434a; --ink:#f1e7df; --ink-soft:#c3b4ae;
  --gold:#cfae73; --line:rgba(217,138,152,.25); --grain-op:.12; --ded-bg:#3a1820; --ded-fg:#f1e7df; color-scheme:dark}}
:root[data-theme="dark"]{
  --milk:#1d1517; --paper:#261c1e; --wine:#d98a98; --wine-soft:#e7a7b2;
  --powder:#4a3035; --powder-deep:#6a434a; --ink:#f1e7df; --ink-soft:#c3b4ae;
  --gold:#cfae73; --line:rgba(217,138,152,.25); --grain-op:.12; --ded-bg:#3a1820; --ded-fg:#f1e7df; color-scheme:dark}

*{box-sizing:border-box}
img{max-width:100%;display:block}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--milk);color:var(--ink);font:400 17px/1.7 var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--milk)}
.wrap{max-width:1180px;margin:0 auto}
a{color:var(--wine);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--wine-soft)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;text-wrap:balance;margin:0}
p{margin:0}
.eyebrow{font:500 12px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--wine)}
.folio{font:italic 400 17px/1 var(--display);color:var(--gold)}

/* шапка-оглавление */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--milk) 92%,transparent);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line);margin:0 calc(-1*max(16px,env(safe-area-inset-left,0px))) 0 calc(-1*max(16px,env(safe-area-inset-right,0px)));
  padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px}
.mark{font:italic 500 22px/1 var(--display);color:var(--ink);text-decoration:none}
.mark span{color:var(--gold);font-style:normal;font-size:14px;letter-spacing:.12em;margin-left:8px;font-family:var(--body)}
nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
nav a{font-size:14px;color:var(--ink-soft);text-decoration:none;display:flex;gap:6px;align-items:baseline}
nav a i{font:italic 14px var(--display);color:var(--gold)}
nav a:hover{color:var(--wine)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--ink);font:500 13px var(--body);letter-spacing:.1em;
  text-transform:uppercase;padding:9px 14px;cursor:pointer}
@media (max-width:860px){
  .burger{display:block}
  nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px max(16px,env(safe-area-inset-right,0px)) 18px max(16px,env(safe-area-inset-left,0px))}
  nav ul{flex-direction:column;gap:0}
  nav a{padding:12px 0;font-size:17px;border-bottom:1px solid var(--line)}
}

section{padding-block:clamp(72px,10vw,128px)}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(32px,5vw,56px);flex-wrap:wrap}
.sec-head h2{font-size:clamp(40px,6vw,74px);font-weight:300}
.sec-head h2 em{color:var(--wine);font-style:italic}
.rule{height:1px;background:var(--line);flex:1;min-width:60px;align-self:center}

/* HERO */
.hero{padding-block:clamp(40px,6vw,80px) clamp(60px,8vw,110px)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,84px);align-items:center}
.hero-text{min-width:0}
.hero h1{font-size:clamp(64px,11vw,148px);font-weight:300;letter-spacing:-.02em;line-height:.88;margin:22px 0 26px}
.hero h1 .first{display:block;font-style:italic;color:var(--wine);font-size:.62em;margin-left:.06em;letter-spacing:0}
.hero .sub{font:italic 400 clamp(22px,2.6vw,30px)/1.3 var(--display);color:var(--ink);max-width:22em}
.hero .lead{margin-top:22px;max-width:34em;color:var(--ink-soft)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;font:500 15px var(--body);text-decoration:none;border:1px solid var(--wine);transition:background .25s,color .25s}
.btn.solid{background:var(--wine);color:var(--paper)}
.btn.solid:hover{background:var(--wine-soft);color:var(--paper)}
.btn.ghost{color:var(--wine)}
.btn.ghost:hover{background:var(--powder);color:var(--wine)}
.btn svg{width:16px;height:16px}
.may{display:inline-flex;gap:12px;align-items:center}
.may b{font:italic 500 20px var(--display);color:var(--gold);font-weight:500;letter-spacing:0;text-transform:none}

.portrait{position:relative;justify-self:end;width:100%;max-width:440px}
.portrait .frame{position:relative;aspect-ratio:4/5;max-width:100%;background:var(--paper);border:1px solid var(--line);
  box-shadow:0 30px 60px -30px rgba(70,20,30,.45);padding:14px}
.portrait .frame::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid var(--gold);opacity:.55;z-index:-1}
.ph{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:24px;
  background:radial-gradient(120% 90% at 30% 20%,var(--powder) 0%,transparent 60%),linear-gradient(160deg,var(--paper),var(--powder-deep));
  color:var(--wine);position:relative;overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .note{font:italic 400 20px/1.3 var(--display)}
.ph .note small{display:block;margin-top:10px;font:400 12px/1.5 var(--body);color:var(--ink-soft);max-width:22em}
.ph .mono{font:300 italic 110px/1 var(--display);opacity:.35;display:block;margin-bottom:6px}
.portrait figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:13px;color:var(--ink-soft)}
.portrait figcaption span:first-child{font:italic 18px var(--display);color:var(--ink)}
.sprig{position:absolute;width:120px;right:-26px;bottom:-40px;color:var(--wine);opacity:.75;pointer-events:none}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .portrait{justify-self:start;max-width:360px}
  .sprig{right:-6px}
}

/* загрузочная анимация героя */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-text>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-text>*:nth-child(2){animation-delay:.08s}.hero-text>*:nth-child(3){animation-delay:.16s}
.hero-text>*:nth-child(4){animation-delay:.24s}.hero-text>*:nth-child(5){animation-delay:.32s}
.portrait{animation:rise 1.1s .2s cubic-bezier(.2,.7,.2,1) both}

/* ОБ АВТОРЕ */
.about-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,6vw,90px)}
.story p+p{margin-top:1.1em}
.story p:first-child::first-letter{float:left;font:300 5.2em/.8 var(--display);color:var(--wine);margin:.08em .12em 0 0}
.story{max-width:36em}
.cards{display:grid;gap:0;border-top:1px solid var(--line)}
.fact{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:6px 18px}
.fact .k{font:italic 300 44px/1 var(--display);color:var(--gold);grid-row:span 2;min-width:1.2em}
.fact h3{font-size:24px;font-weight:500}
.fact p{font-size:14px;color:var(--ink-soft)}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}}

/* КНИГИ */
.books{background:var(--paper);border-block:1px solid var(--line);margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.series{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;margin-bottom:clamp(56px,7vw,90px)}
.pair{display:flex;gap:clamp(14px,3vw,28px);align-items:flex-end}
.pair .book:nth-child(2){transform:translateY(-28px)}
.book{flex:1;min-width:0;text-decoration:none;color:inherit;display:block}
.cover{aspect-ratio:2/3;max-width:100%;position:relative;padding:18px 16px;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--cv,#6e1f2e);color:var(--ct,#f6e8dc);box-shadow:inset 6px 0 0 rgba(0,0,0,.18),inset 7px 0 0 rgba(255,255,255,.12),0 18px 34px -18px rgba(40,10,20,.6);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.cover .au{font:500 10px/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.cover .tt{font:400 clamp(22px,2.6vw,32px)/1 var(--display)}
.cover .tt em{display:block;font-style:italic;font-size:.62em;opacity:.85;margin-bottom:6px}
.cover .orn{width:38px;height:1px;background:currentColor;opacity:.6;margin:10px 0}
.cover .tag{font:400 9.5px/1.3 var(--body);letter-spacing:.06em;opacity:.65}
.book:hover .cover,.book:focus-visible .cover{transform:translateY(-6px) scale(1.03);box-shadow:inset 6px 0 0 rgba(0,0,0,.18),0 28px 40px -18px rgba(40,10,20,.65)}
.bmeta{margin-top:16px}
.bmeta .g{font:500 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.bmeta h3{font-size:24px;margin:4px 0 6px}
.bmeta p{font-size:14.5px;color:var(--ink-soft);line-height:1.6}
@media (hover:hover){
  .shelf .bmeta p{opacity:.72;transform:translateY(4px);transition:opacity .4s,transform .4s}
  .shelf .book:hover .bmeta p,.shelf .book:focus-within .bmeta p{opacity:1;transform:none}
}
.series-text h3{font-size:clamp(34px,4vw,48px);font-weight:300}
.series-text h3 em{color:var(--wine)}
.series-text p{margin-top:16px;max-width:32em}
.series-text dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:22px 0 0;font-size:14px}
.series-text dt{color:var(--gold);font-family:var(--display);font-style:italic;font-size:17px}
.series-text dd{margin:0;color:var(--ink-soft)}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,4vw,48px)}
.shelf .cover{max-width:250px}
.lnk{display:inline-block;margin-top:10px;font-size:14px}
.unverified{margin-top:clamp(56px,7vw,84px);display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:28px;border-top:1px dashed var(--line);padding-top:30px}
.unverified h3{font-size:28px;font-style:italic}
.unverified ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.unverified li{font-size:15px;color:var(--ink-soft)}
.unverified li b{font:italic 500 21px var(--display);color:var(--ink);font-weight:500}
@media (max-width:860px){
  .series,.unverified{grid-template-columns:1fr}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){.shelf{grid-template-columns:1fr}.shelf .cover{max-width:200px}}

/* ПОЧЕРК */
.essay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,64px);row-gap:28px}
.essay .col p+p{margin-top:1em}
.essay .kw{font-family:var(--display);font-style:italic;font-size:1.22em;color:var(--wine);line-height:1}
.pull{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:30px;border-block:1px solid var(--line);margin-block:12px}
blockquote{margin:0}
blockquote p{font:italic 300 clamp(26px,3.2vw,38px)/1.2 var(--display);color:var(--ink)}
blockquote p::before{content:"«";color:var(--gold)}
blockquote p::after{content:"»";color:var(--gold)}
blockquote footer{margin-top:12px;font-size:13px;color:var(--ink-soft)}
.themes{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 10px;margin-top:6px}
.themes span{font:italic 19px var(--display);padding:6px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
@media (max-width:760px){.essay,.pull{grid-template-columns:1fr}}

/* ФАКТЫ */
.facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.fcard{padding:28px 26px 30px 0;border-bottom:1px solid var(--line);grid-column:span 2}
.fcard:nth-child(1),.fcard:nth-child(4){grid-column:span 3}
.fcard:nth-child(2),.fcard:nth-child(3),.fcard:nth-child(5),.fcard:nth-child(6){grid-column:span 3}
.fcard .big{font:300 clamp(46px,5.5vw,70px)/.9 var(--display);color:var(--wine);display:block;margin-bottom:12px}
.fcard .big small{font-size:.38em;font-style:italic;color:var(--gold);margin-left:6px}
.fcard h3{font-size:24px;margin-bottom:8px}
.fcard p{font-size:15px;color:var(--ink-soft);max-width:30em}
.fcard cite{display:block;margin-top:10px;font:italic 13px var(--body);color:var(--gold)}
@media (min-width:861px){.fcard:nth-child(odd){padding-right:48px;border-right:1px solid var(--line)}.fcard:nth-child(even){padding-left:40px}}
@media (max-width:860px){.facts{grid-template-columns:1fr}.fcard,.fcard:nth-child(n){grid-column:auto;padding-right:0}}

/* ФОТО */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(160px,auto));gap:14px}
.gallery button{all:unset;cursor:zoom-in;display:block;position:relative;min-height:180px}
.gallery button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.gallery button:first-child{grid-column:span 2;grid-row:span 2;min-height:420px}
.gallery button:nth-child(4){grid-column:span 2}
.gallery .ph{transition:filter .4s}
.gallery button:hover .ph{filter:saturate(1.15) brightness(1.03)}
.gallery .cap{position:absolute;left:12px;bottom:10px;font:italic 15px var(--display);color:var(--ink)}
.gal-note{margin-top:18px;font-size:13px;color:var(--ink-soft);max-width:52em}
@media (max-width:760px){.gallery{grid-template-columns:1fr 1fr}.gallery button:first-child{grid-column:1/-1;min-height:320px}.gallery button:nth-child(4){grid-column:1/-1}}
dialog{border:none;padding:0;background:transparent;max-width:min(92vw,900px);width:100%}
dialog::backdrop{background:rgba(25,10,14,.82)}
.lb{background:var(--paper);padding:14px;position:relative}
.lb .ph{aspect-ratio:4/3;height:auto}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:14px;color:var(--ink-soft)}
.lb-bar .ctrls{display:flex;gap:8px}
.lb-bar button{background:none;border:1px solid var(--line);color:var(--ink);padding:8px 14px;font:500 13px var(--body);cursor:pointer}
.lb-bar button:hover{border-color:var(--wine);color:var(--wine)}

/* ПОСВЯЩЕНИЕ */
.ded{background:var(--ded-bg);color:var(--ded-fg);margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));position:relative;overflow:hidden}
.ded .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,90px);align-items:center}
.date{font:300 clamp(110px,18vw,230px)/.8 var(--display);color:var(--gold);letter-spacing:-.03em}
.date span{display:block;font-style:italic;font-size:.32em;letter-spacing:.02em;margin-top:.2em;color:inherit}
.ded .eyebrow{color:var(--gold)}
.ded h2{font-size:clamp(38px,5.4vw,66px);font-weight:300;margin:16px 0 26px}
.ded h2 em{font-style:italic}
.ded p{font:italic 300 clamp(20px,2.2vw,25px)/1.5 var(--display);max-width:30em}
.ded p+p{margin-top:16px}
.ded .sig{margin-top:28px;font:500 12px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.ded svg.big-sprig{position:absolute;right:-30px;top:-20px;width:260px;color:var(--gold);opacity:.25;pointer-events:none}
.draw path{stroke-dasharray:600;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){.draw path{animation:draw 3.2s .4s ease-out both}}
@keyframes draw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
@media (max-width:760px){.ded .wrap{grid-template-columns:1fr}}

/* ФИНАЛ */
.final{text-align:left}
.final .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:end}
.final h2{font-size:clamp(44px,6.5vw,84px);font-weight:300}
.final h2 em{color:var(--wine)}
.final p{margin-top:22px;max-width:32em;color:var(--ink-soft)}
.links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);
  text-decoration:none;font:400 22px var(--display);color:var(--ink);transition:padding .3s,color .3s}
.links a small{font:400 13px var(--body);color:var(--ink-soft)}
.links a:hover{color:var(--wine);padding-left:8px}
.links a.main{font-style:italic;font-size:28px;color:var(--wine)}
@media (max-width:760px){.final .wrap{grid-template-columns:1fr}}

footer.foot{border-top:1px solid var(--line);padding-block:40px 56px}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:36px}
.foot .disc{font-size:14px;color:var(--ink-soft)}
.foot .disc strong{display:block;font:italic 500 20px var(--display);color:var(--ink);margin-bottom:8px}
.sources{font-size:14px;font-style:italic;color:var(--ink-soft)}
.sources ul{margin:8px 0 0;padding-left:18px;columns:2;column-gap:28px}
.sources li{margin-bottom:6px;break-inside:avoid}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr}.sources ul{columns:1}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}