/* Концепция: ряд настоящих старинных обложек с ярлыком формата, как на карточке в приложении. Цвета — из ThemeTokens приложения. */
@font-face{font-family:Spectral;font-weight:200;font-display:swap;src:url(fonts/spectral-cyrillic-200.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Spectral;font-weight:200;font-display:swap;src:url(fonts/spectral-latin-200.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Spectral;font-weight:300;font-display:swap;src:url(fonts/spectral-cyrillic-300.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Spectral;font-weight:300;font-display:swap;src:url(fonts/spectral-latin-300.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Jost;font-weight:300;font-display:swap;src:url(fonts/jost-cyrillic-300.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Jost;font-weight:300;font-display:swap;src:url(fonts/jost-latin-300.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Jost;font-weight:400;font-display:swap;src:url(fonts/jost-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Jost;font-weight:400;font-display:swap;src:url(fonts/jost-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}

:root{
  --paper:#fef9f1; --paper-2:#f2ede5; --ink:#1d1c17; --ink-2:#4c463f; --rule:#ddd5c8;
  --accent:#c8861a; --accent-ink:#7c5108; --mark:#f3d9a4; --bezel:#25231f; --shelf:#8a5a22; --shelf-2:#5f3d15;
  --todo:#7c5108; --hero:#16120c; --hero-ink:#f6eedf; --hero-ink-2:#d3c5ae; --hero-accent:#e2a72e;
  --display:Spectral,Georgia,"Times New Roman",serif;
  --body:Jost,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#131313; --paper-2:#1f1e1c; --ink:#e5e2e1; --ink-2:#d6c3b0; --rule:#38332c;
  --accent:#c8861a; --accent-ink:#e2a72e; --mark:#5c431a; --bezel:#3a3732; --shelf:#6d4819; --shelf-2:#3f2a0e;
  --todo:#e2a72e; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#131313; --paper-2:#1f1e1c; --ink:#e5e2e1; --ink-2:#d6c3b0; --rule:#38332c;
  --accent:#c8861a; --accent-ink:#e2a72e; --mark:#5c431a; --bezel:#3a3732; --shelf:#6d4819; --shelf-2:#3f2a0e;
  --todo:#e2a72e; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:300 1.125rem/1.6 var(--body)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:200;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.015em}
p{margin:0}
a{color:var(--accent-ink);text-underline-offset:.18em}
a:focus-visible,.skip:focus{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1280px;margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;background:var(--paper);padding:8px 12px;z-index:5}
.skip:focus{left:16px}

/* Шапка */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.brand img{width:34px;height:34px;border-radius:8px}
.top nav{display:flex;gap:20px;font-size:.9375rem}
.top nav a{color:var(--ink-2);text-decoration:none;padding-block:6px}
.top nav a:hover{color:var(--accent-ink);text-decoration:underline}

/* Первый экран: тёмный в обеих темах, чтобы обложки светились */
.hero{background:var(--hero);color:var(--hero-ink);overflow:hidden}
.hero .brand,.hero .top nav a{color:var(--hero-ink)}
.hero .top nav a:hover{color:var(--hero-accent)}
.hero a:focus-visible{outline-color:var(--hero-accent)}
.hero-text{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 56px;align-items:end;padding-block:clamp(20px,4vw,48px) clamp(16px,2vw,24px)}
h1{font-size:clamp(3rem,7.6vw,6.75rem);line-height:.98;letter-spacing:-.03em}
h1 span{color:var(--hero-accent)}
h3{font-weight:300}
.kicker{margin:0 0 10px;font-size:clamp(1.0625rem,1.5vw,1.25rem)}
.name-hook{margin:14px 0 0;font:200 clamp(1.375rem,2.6vw,2.25rem)/1.2 var(--display)}
.name-hook span{color:var(--hero-accent)}
.lede{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.5}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px}
.store{display:block;height:52px;width:auto}
.store-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .store-light{display:none}:root:not([data-theme="light"]) .store-dark{display:block}}
:root[data-theme="dark"] .store-light{display:none}
:root[data-theme="dark"] .store-dark{display:block}
.soon{font-size:.9375rem;color:var(--ink-2)}
.hero .soon{color:var(--hero-ink-2)}
.facts{display:flex;flex-wrap:wrap;gap:4px 18px;margin:16px 0 0;padding:0;list-style:none;font-size:1rem}
.facts li{display:flex;align-items:center;gap:8px}
.facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hero-accent)}

/* Ряд обложек: края намеренно уходят за экран */
.covers{list-style:none;margin:0;padding:40px 0 64px;display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,2vw,30px)}
.cover{position:relative;flex:none;height:clamp(220px,23vw,400px);transform:translateY(var(--y)) rotate(var(--r))}
.cover img{height:100%;width:auto;border-radius:2px 7px 7px 2px;box-shadow:0 28px 44px -14px rgb(0 0 0 / .85),0 0 0 1px rgb(255 255 255 / .06)}
.cover::after{content:"";position:absolute;inset:0 auto 0 0;width:7%;background:linear-gradient(90deg,rgb(0 0 0 / .35),rgb(255 255 255 / .1) 60%,transparent);border-radius:2px 0 0 2px}
.fmt{position:absolute;left:12%;bottom:12px;padding:3px 8px;border-radius:5px;background:#16120cdd;color:#f6eedf;font:400 .75rem/1.2 var(--body);letter-spacing:.03em;z-index:1}
@media (prefers-reduced-motion:no-preference){
  .cover{transition:transform .25s ease}
  .cover:hover{transform:translateY(calc(var(--y) - 14px)) rotate(0deg)}
  .bars i{animation:bar 1.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -130ms)}
}
@keyframes bar{to{transform:scaleY(.35)}}

/* Разделы */
.band{padding-block:clamp(56px,8vw,112px)}
.band+.band{border-top:1px solid var(--rule)}
h2{font-size:clamp(2rem,4.2vw,3.5rem)}
.prose{display:grid;gap:14px;max-width:34rem;margin-top:20px;color:var(--ink)}
.small{font-size:.9375rem;color:var(--ink-2)}
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,88px);align-items:center}
.split.flip{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.split.flip>:first-child{order:2}
.figs{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,3vw,36px);align-items:center;min-width:0}
.split.flip .figs{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.figs>*{min-width:0}

/* Рамка настоящего снимка */
.device{margin:44px 0 0;padding:10px;background:var(--bezel);border-radius:22px;box-shadow:0 26px 50px -24px rgb(40 24 4 / .55)}
.device img{border-radius:13px;width:100%}
.wide-shot{max-width:900px}
/* Иллюстрация как отпечаток */
.plate{border-radius:3px;box-shadow:0 26px 44px -22px rgb(30 18 2 / .7);min-width:0}

/* Иллюстрации: не экраны приложения, а книга */
.spread{flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;box-shadow:0 22px 40px -28px rgb(40 24 4 / .6);margin:0}
.spread>div{padding:clamp(18px,2.4vw,32px);min-width:0;font:300 clamp(1rem,1.5vw,1.25rem)/1.5 var(--display)}
.spread>div+div{border-left:1px solid var(--rule)}
.spread b{display:block;font:400 .75rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.listen{margin:0;background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;padding:clamp(18px,2.4vw,32px);font:300 clamp(1rem,1.5vw,1.25rem)/1.6 var(--display);box-shadow:0 22px 40px -28px rgb(40 24 4 / .6)}
.listen mark{background:var(--mark);color:inherit;padding:.05em .15em;border-radius:2px}
.bars{display:flex;align-items:center;gap:4px;height:44px;margin-top:18px}
.bars i{display:block;width:4px;height:calc(var(--v) * 1%);background:var(--accent);border-radius:2px}

/* Способы добавить книги */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:44px}
.ways h3{font-size:1.5rem;margin-bottom:8px}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,88px)}
.pair h2{margin-bottom:14px;font-size:clamp(1.75rem,3vw,2.5rem)}
.pic-card{display:grid;gap:24px;align-content:start;min-width:0}
.pic{height:clamp(240px,26vw,360px);width:auto;max-width:100%;object-fit:contain;object-position:left}
.drm{margin-top:18px}

/* Форматы */
.formats{margin:36px 0 0;display:grid;gap:0}
.formats div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:8px 24px;padding-block:18px;border-top:1px solid var(--rule)}
.formats dt{font-weight:300}
.formats dd{margin:0;font:300 clamp(1.25rem,2.4vw,1.75rem)/1.3 var(--display)}

/* Финал */
.final .cta{margin-top:24px}

footer{border-top:1px solid var(--rule);padding-block:32px;font-size:.875rem;color:var(--ink-2)}
footer .links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:12px}

/* Поддержка */
.doc{padding-block:clamp(24px,5vw,56px) clamp(56px,8vw,96px)}
.doc h1{font-size:clamp(2.5rem,6vw,4.5rem)}
.doc h2{font-size:1.5rem;margin-bottom:8px}
.doc section{display:grid;gap:8px;padding-block:24px;border-top:1px solid var(--rule);max-width:44rem}
.doc .lede{max-width:44rem;margin-block:18px 32px}
.doc ul{margin:0;padding-left:1.2em;display:grid;gap:4px}
.todo-line{padding:12px 14px;border:2px dashed var(--todo);color:var(--todo);max-width:44rem}

@media (max-width:900px){
  .hero-text,.split,.split.flip,.pair{grid-template-columns:minmax(0,1fr)}
  .split{gap:28px}
  .split.flip>:first-child{order:0}
  .ways{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .figs,.split.flip .figs{grid-template-columns:minmax(0,1fr)}
  .figs .plate{max-height:420px;width:auto;justify-self:center}
  .final .plate{max-height:420px;width:auto}
  .device{padding:6px;border-radius:14px}
  .device img{border-radius:9px}
  .spread>div{padding:14px}
  .formats div{grid-template-columns:minmax(0,1fr)}
}

/* Логотип D-0088/D-0089. Квадрат 32 px: высота SVG = 32 * 860 / 700 */
.brand-logo{height:39.3px;width:auto;display:block}
.logo-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-light{display:none}:root:not([data-theme="light"]) .logo-dark{display:block}}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
.top nav{margin-left:auto}
.wordmark{line-height:0}
/* Охранное поле 0,3 квадрата: в SVG уже 80/860 высоты сверху и снизу, добавляем до 0,3 * 700/860 */
.wordmark svg{--h:clamp(64px,8vw,120px);height:var(--h);width:auto;max-width:100%;display:block;margin-block:calc(var(--h) * .151)}