/* BOOKva guides. Milk paper, brown text, rust accents. PT Serif headings, Inter text. */
@font-face{font-family:"PT Serif";font-weight:400;font-display:swap;src:url(../fonts/pt-serif-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Serif";font-weight:400;font-display:swap;src:url(../fonts/pt-serif-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PT Serif";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/pt-serif-cyrillic-400-italic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Serif";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/pt-serif-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(../fonts/inter-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(../fonts/inter-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}

:root{--milk:#f6f4ef;--tile:#ece8df;--card:#fbfaf7;--brown:#53241c;--rust:#c3470b;--rust-dark:#a83b07;--soft:#86776e;--line:rgba(83,36,28,.13);
--serif:"PT Serif",Georgia,serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--milk);color:var(--brown);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:#ecd5c6}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:2px}
img{max-width:100%}
.col{max-width:900px;margin:0 auto;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}

.top{display:flex;justify-content:space-between;align-items:center;padding-block:14px;border-bottom:1px solid var(--line)}
.top img{height:60px;width:auto;display:block}
.top a.s{font:500 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.h1{font:400 36px/1.12 var(--serif);margin:0 0 16px;text-wrap:balance;letter-spacing:-.01em}

/* home */
.home-hero{padding-block:44px 40px}
.hero2{margin-top:22px}.hero2::after{content:"";display:block;clear:both}
.pf{float:right;width:46%;margin:4px 0 12px 18px}.pf img{width:100%;height:auto;display:block;border-radius:14px}
.wel{font:italic 400 21px/1.35 var(--serif);color:var(--rust);margin:0 0 12px}
.me2 p{margin:0 0 8px;font-size:16px}.me2 p:first-child{font-weight:500}
.cards{display:grid;gap:14px;padding-bottom:64px}
.gc{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--card);transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .3s}
.gc:hover{transform:translateY(-3px);border-color:rgba(83,36,28,.3)}
.gc .im{display:block;aspect-ratio:4/3;overflow:hidden}.gc .im img{width:100%;height:100%;object-fit:cover;display:block}
.gc .b{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 20px 20px}
.gc .t{display:block;min-height:2.5em;font:400 26px/1.2 var(--serif)}
.gc .t small{display:block;font-size:.72em;line-height:1.3;color:var(--soft)}
.go,.all{display:inline-flex;align-items:center;gap:8px;background:var(--rust);color:#fff;border-radius:999px;font:500 14.5px var(--sans);box-shadow:0 6px 16px -8px rgba(195,71,11,.7);transition:background .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.go{padding:9px 18px;font-size:14px}
.gc:hover .go,.all:hover{background:var(--rust-dark)}

/* guide */
.g-hero{padding-block:40px 6px}
.intro p{margin:0 0 10px}
.toc{padding-block:26px 30px}
.toc h3{font:500 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin:0 0 4px}
.hint{font-size:13px;color:var(--soft);margin:0 0 10px}
.tg{margin-top:12px}.tl{font:500 12.5px var(--sans);color:var(--rust);margin:0 0 2px}
.ti{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font:400 18px/1.3 var(--serif)}
.cc{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--rust);transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s}
.cc svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ti:hover .cc{transform:translateX(3px);background:var(--rust-dark)}

.part{background:var(--tile);padding-block:40px 34px;margin-top:24px}
.part-age{font:500 12.5px var(--sans);color:var(--rust);margin:0 0 4px}
.part-h{font:400 30px/1.15 var(--serif);margin:0;text-wrap:balance}
.more{margin-top:14px}
.more summary{cursor:pointer;font-size:14px;color:var(--soft);list-style:none;display:inline-flex;gap:6px;align-items:center}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-size:18px;line-height:1;color:var(--rust)}
.more[open] summary::after{content:"−"}
.more .txt{margin-top:12px}

.sec{padding-block:52px 10px;scroll-margin-top:8px}
.sec+.sec{border-top:1px solid var(--line)}
.sec h2{font:400 31px/1.12 var(--serif);margin:0 0 14px;text-wrap:balance}
.txt p{margin:0 0 8px;max-width:64ch}
.txt ul{margin:2px 0 10px;padding-left:20px}.txt li{margin:2px 0}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;margin-top:28px}
.tile{display:block;min-width:0}
.tw{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;max-width:100%;background:var(--tile);padding:9%}
.tw img{max-width:100%;max-height:100%;display:block;box-shadow:0 1px 1px rgba(83,36,28,.1),0 14px 22px -12px rgba(83,36,28,.5);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.tile:hover img{transform:scale(1.05) rotate(-1deg)}
.cp{display:block;margin-top:8px;font-size:13px;line-height:1.45;color:var(--soft)}
.allw{display:flex;justify-content:center;margin:30px 0 14px}
.all{padding:11px 22px}
.all:hover{transform:translateY(-1px)}
.up{display:block;text-align:center;font-size:12.5px;color:var(--soft);margin:0 0 30px}

.tips{background:var(--tile);padding-block:46px 50px;margin-top:30px}
.tips h3{font:400 26px/1.2 var(--serif);margin:0 0 6px}
.tr{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-right:calc(-1 * max(22px, env(safe-area-inset-right,0px)));scrollbar-width:none}
.tr::-webkit-scrollbar{display:none}
.tcard{flex:0 0 82%;scroll-snap-align:start;background:var(--card);border-radius:16px;padding:22px 20px 18px;min-width:0}
.tcard svg{width:30px;height:30px;fill:none;stroke:var(--rust);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.tcard h4{font:400 21px/1.2 var(--serif);margin:0 0 12px}
.tcard ul{margin:0;padding:0;list-style:none}.tcard li{position:relative;padding-left:16px;margin:0 0 9px;font-size:15px;line-height:1.5}
.tcard li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--rust);opacity:.7}

.info,.contacts{padding-block:52px 10px}
.info h2,.contacts h2{font:400 28px/1.15 var(--serif);margin:0 0 14px}
.contacts .ct{font-size:17px;line-height:1.8;margin:0 0 8px}
.contacts .ct a{border-bottom:1px solid var(--line)}
.soc a{color:var(--rust)}
.foot{border-top:1px solid var(--line);margin-top:48px}
.foot .col{display:flex;justify-content:space-between;padding-block:22px 34px;font-size:13px;color:var(--soft)}

.rv{transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .rv.pre{opacity:0;transform:translateY(12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv,.gc,.tw img,.cc,.all,.go{transition:none!important}.js .rv.pre{opacity:1;transform:none}}
@media (min-width:760px){
  .h1{font-size:44px}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(3,1fr)}
  .g-hero,.toc,.intro{max-width:680px}
  .hero2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.hero2::after{display:none}
  .pf{float:none;width:auto;margin:0;order:2}.txtcol{order:1}.wel{font-size:30px}.me2 p{font-size:18px;line-height:1.65}
  .tcard{flex-basis:32%}
}