/* ПоГлаве — главная. «Ночная библиотека»: графит, светлый текст, тёплый золотой
   акцент, книжные заголовки. Перенос утверждённого макета (Codex, 23.09.2026)
   в статический стек. Только для index.html: остальные страницы — site.css. */
:root{--bg:#141819;--fg:#f1eee7;--gold:#dfb985;--gold-2:#f1cca0;--card:#1c2223;--muted:#242b2c;
  --mute-fg:#acb5b2;--line:#343d3d;--serif:"Literata",Georgia,"Times New Roman",serif;--sans:"Golos Text",Arial,Helvetica,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .2s,background .2s,transform .2s}
a:focus-visible,summary:focus-visible{outline:2px solid #e7c393;outline-offset:6px}
p,h1,h2,h3{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400}
em{font-style:italic;color:var(--gold)}
svg{flex-shrink:0;width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
img{max-width:100%}
.wrap{width:min(1280px,calc(100% - 104px));margin:auto}
.skip{position:absolute;top:-100px;left:10px;padding:15px;background:var(--gold);color:var(--bg);z-index:20}
.skip:focus{top:10px}
/* шапка */
.header{height:100px;display:flex;align-items:center;border-bottom:1px solid #303636;gap:40px}
.brand{display:flex;align-items:center;gap:10px;font:700 29px var(--serif);letter-spacing:-1px}
.brand svg{color:var(--gold);width:27px;height:27px}
.brand-dot{color:var(--gold)}
.header nav{display:flex;gap:30px;margin:auto;font-size:14px;color:#b8c0bd}
.header a:hover{color:#e7c393}
.cabinet{display:flex;gap:10px;align-items:center;font-size:14px}
/* первый экран */
.hero{padding-top:58px;padding-bottom:53px;display:grid;grid-template-columns:1.02fr 1fr;gap:40px;align-items:center}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:1.2px;line-height:1.7;color:#b3bdb7;text-transform:uppercase}
.hero .eyebrow{display:flex;align-items:center;gap:12px}
.age{padding:1px 5px;border:1px solid #4c5453;border-radius:4px;font-size:12px;letter-spacing:0}
.hero h1{font-size:clamp(40px,4.6vw,67px);line-height:1.11;letter-spacing:-2.4px;margin-top:23px;margin-bottom:25px}
.lead{font-size:16px;line-height:1.8;color:#afb9b5;margin-bottom:29px}
.button{min-height:51px;padding:15px 23px;display:inline-flex;justify-content:center;align-items:center;gap:22px;border-radius:6px;font-size:14px;font-weight:600}
.button svg{width:19px;height:19px}
.primary{background:var(--gold);color:#1d2222}
.primary:hover{background:var(--gold-2);transform:translateY(-2px)}
.outline{border:1px solid #5c665f}
.outline:hover{background:#303c37}
.micro{display:flex;gap:8px;align-items:center;margin-top:14px;font-size:12px;color:#aeb7b2}
.micro svg{color:#d4b685;width:14px;height:14px}
.sample-link{display:flex;align-items:center;gap:10px;font-size:14px;margin-top:33px;color:#d9ded9}
.sample-link svg{width:17px;height:17px}
.hero-art{height:480px;border-radius:12px;position:relative;isolation:isolate;background:#1b2d31;box-shadow:0 30px 70px #0003}
.hero-art:after{content:'';position:absolute;inset:0;border-radius:12px;background:linear-gradient(0deg,#102021f5,transparent 65%);z-index:-1}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% center;z-index:-2;border-radius:12px}
.art-top{position:absolute;top:23px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:1.2px;color:#f0e7d7}
.art-top span:first-child{padding:7px 10px;background:#121d2077;border:1px solid #b1bbb344;border-radius:4px}
.art-top span:last-child{font-size:23px}
.art-caption{position:absolute;bottom:29px;left:29px;right:29px}
.art-caption h2{font-size:41px;line-height:1.3;margin-top:7px}
.art-caption p{font-size:12px;color:#c0cac3;margin-top:9px}
.art-caption a{position:absolute;right:0;bottom:0;border:1px solid #adbaa777;border-radius:50%;width:42px;height:42px;display:grid;place-items:center}
.art-caption a svg{width:24px;height:24px}
/* полоса обещаний */
.promise{border-block:1px solid #303939;display:flex;justify-content:space-between;gap:20px;padding:24px 0;color:#b2bcb6;font-size:14px}
.promise span{display:flex;align-items:center;gap:10px}
.promise svg{width:17px;height:17px;color:#c5ac84}
/* миры */
.world-section{padding-top:68px;padding-bottom:70px}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:31px;gap:30px}
.section-heading h2{font-size:42px;line-height:1.15;letter-spacing:-1px;margin-top:13px}
.section-heading>p{font-size:14px;color:#aeb8b3;line-height:1.7}
.worlds{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}
.world{position:relative;min-height:320px;border-radius:7px;overflow:hidden;padding:19px;display:flex;flex-direction:column;background:#243337;border:1px solid #465255;box-shadow:inset 0 0 70px #0002}
.world:hover{transform:translateY(-6px);border-color:#d0b286}
.world-number{display:flex;justify-content:space-between;color:#cbbeaa;font-family:var(--serif);font-size:19px}
.world-number svg{width:18px;height:18px}
.world-body{margin-top:25px}
.world-genre{font-size:12px;line-height:1.8;letter-spacing:.6px;color:#cdc6b7;text-transform:uppercase}
.world h3{font-size:24px;line-height:1.08;margin:12px 0}
.world p{font-size:14px;line-height:1.65;color:#c0c7c1}
.world-bottom{margin-top:auto;padding-top:21px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px}
.world-bottom svg{width:17px;height:17px}
.north{background:linear-gradient(#112c3770,#112329f2),url('/img/northern-castle-900.webp') center/cover}
.sea{background:#244047}.fire{background:#533a2b}.city{background:#373035}.mountain{background:#293c35}
.world-footnote{font-size:14px;color:#9ba6a1;margin-top:18px}
/* пример главы */
.chapter-section{background:#1b2222;border-block:1px solid #333c3b;padding:76px 0}
.chapter-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.chapter-intro h2{font-size:46px;line-height:1.17;letter-spacing:-1px;margin:20px 0 25px}
.chapter-intro>p{max-width:365px;color:#aeb9b3;line-height:1.85;font-size:15px}
.text-link{display:flex;gap:12px;align-items:center;color:var(--gold);font-size:14px;margin-top:28px}
.text-link svg{width:19px;height:19px}
.delivery{margin-top:58px;padding-top:24px;border-top:1px solid #3b4542;display:flex;gap:17px;font-size:14px;line-height:1.8;color:#aeb9b3;max-width:350px}
.delivery svg{color:var(--gold);width:20px;height:20px;margin-top:4px}
.chapter-paper{padding:32px 38px 23px;background:#f0ece4;color:#363932;border-radius:3px;box-shadow:8px 8px 0 #c4beb41b;transform:rotate(1deg)}
.paper-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:1.2px;color:#777c6e}
.paper-label svg{width:16px;height:16px}
.chapter-no{text-align:center;font:italic 12px var(--serif);margin-top:25px;color:#727868}
.chapter-paper h3{text-align:center;font-size:28px;margin:9px 0 23px}
.prose{font:15px/1.7 var(--serif)}
.prose p{margin-bottom:11px}
.prose p:first-child::first-letter{float:left;font-size:48px;line-height:.9;padding-right:6px}
/* как это работает */
.how{padding-block:75px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}
.step{border-top:1px solid #3b4340;padding-top:25px}
.step>span{font:italic 26px var(--serif);color:#c7ab80}
.step h3{font-size:25px;margin-top:20px;margin-bottom:13px}
.step p{font-size:14px;line-height:1.8;color:#aeb7b2}
/* подписка */
.pricing{padding-bottom:70px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.price-card{padding:31px 25px 22px;background:#1b2222;border:1px solid #38413e;border-radius:8px;position:relative;display:flex;flex-direction:column}
.price-card h3{display:flex;align-items:center;gap:12px;font-size:30px;margin-top:14px}
.price-card h3 svg{width:21px;height:21px;color:var(--gold)}
.amount{font:37px var(--serif);margin-top:22px}
.amount small{font:12px var(--sans);color:#a5afa9}
.price-card>p.note{font-size:14px;color:#aeb7b2;margin-top:13px}
.price-card ul{padding:0;list-style:none;margin:25px 0 28px;display:grid;gap:14px;font-size:14px;color:#d2d7ce}
.price-card li{display:flex;gap:8px;align-items:center}
.price-card li svg{width:14px;height:14px;color:#c7ab80}
.price-card .button{font-size:14px;gap:10px;padding-inline:10px;min-height:45px;margin-top:auto;line-height:1.5}
.price-card .button svg{width:17px;height:17px}
.featured{border-color:#b89b70;background:#252c28}
.annual{color:#b9c3b9;font-size:12px;text-align:center;margin-top:13px}
.pricing-note{font-size:12px;line-height:1.7;color:#97a39b;max-width:810px;margin:20px auto;text-align:center}
/* вопросы */
.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;padding-bottom:75px}
.faq h2{font-size:34px;margin:16px 0 26px}
.faq>div>a{font-size:14px;color:#cab18c;display:flex;align-items:center;gap:12px}
.faq>div>a svg{width:16px;height:16px}
.faq details{border-bottom:1px solid #38413b}
.faq summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:15px;padding:23px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{font-size:14px;line-height:1.8;color:#aeb7b2;padding-bottom:23px}
/* подвал */
footer{padding-top:35px;padding-bottom:28px;border-top:1px solid #303636}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:25px}
.footer-top .brand{font-size:24px}
.footer-top .brand svg{width:23px;height:23px}
.footer-top>span,.footer-top>a:last-child{font-size:12px;color:#a7b2a9}
.footer-bottom{display:flex;gap:22px;margin-top:33px;font-size:12px;color:#95a196;flex-wrap:wrap}
.footer-bottom>span{margin-right:auto}
.footer-req{margin-top:14px;font-size:12px;color:#7f8b85;line-height:1.7}
/* адаптив */
@media(min-width:1500px){.hero-art{height:535px}.hero{gap:70px}.hero h1{font-size:72px}}
@media(max-width:1050px){.wrap{width:calc(100% - 56px)}.hero{gap:25px}.hero h1{font-size:49px}.hero-art{height:440px}
  .worlds{grid-template-columns:repeat(3,1fr)}.world:nth-child(n+4){min-height:235px}.chapter-layout{gap:45px}.chapter-paper{padding:25px}
  .promise{flex-wrap:wrap;justify-content:center}.section-heading h2{font-size:36px}.price-grid{gap:12px}.price-card{padding:25px 17px}.header nav{gap:20px}}
@media(max-width:720px){.wrap{width:calc(100% - 36px)}.header{height:77px;gap:15px}.brand{font-size:25px}.header nav{display:none}.cabinet{margin-left:auto;font-size:12px}
  .hero{grid-template-columns:1fr;padding-top:32px;gap:32px;padding-bottom:34px}.hero h1{font-size:clamp(39px,10.8vw,49px);letter-spacing:-1.8px}.hero .eyebrow{font-size:10px}
  .lead{font-size:16px;margin-bottom:24px}.sample-link{margin-top:25px}.hero-art{height:365px}.art-caption{left:22px;right:22px}.art-caption h2{font-size:37px}.art-caption p{max-width:75%}
  .promise{display:grid;grid-template-columns:1fr 1fr;gap:22px 12px;font-size:12px;padding:23px 0}.promise span{gap:7px}.promise svg{width:15px;height:15px}
  .world-section{padding-top:42px;padding-bottom:42px}.section-heading{display:block}.section-heading>p{margin-top:17px}.section-heading h2{font-size:36px}
  .worlds{grid-template-columns:1fr 1fr;gap:12px}.world{min-height:310px;padding:17px}.world h3{font-size:24px}.world:last-child{grid-column:1/-1;min-height:220px}.world:last-child .world-body{margin-top:15px}.world-genre{font-size:12px;letter-spacing:0}
  .world-footnote{line-height:1.7}.chapter-section{padding:43px 0}.chapter-layout{grid-template-columns:1fr;gap:32px}.chapter-intro h2{font-size:41px}.delivery{margin-top:25px}.chapter-paper{transform:none;padding:26px}.prose{font-size:16px}
  .how{padding:43px 0}.steps{grid-template-columns:1fr;gap:25px}.step h3{margin-top:10px}
  .price-grid{grid-template-columns:1fr;gap:24px}.price-card{padding:30px}.pricing{padding-bottom:35px}
  .faq{grid-template-columns:1fr;gap:10px;padding-bottom:45px}.faq h2{margin-bottom:17px}.faq>div>a{margin-bottom:15px}
  .footer-top{flex-wrap:wrap;gap:20px}.footer-top>span{display:none}.footer-bottom{gap:18px;font-size:12px}.footer-bottom>span{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}a,summary,.faq summary svg{transition:none}.world:hover,.primary:hover{transform:none}}