/* ---------- 1. reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;overflow-x:hidden} img{display:block;max-width:100%;height:auto} h1,h2,h3,h4,p,figure{margin:0} ul,ol{margin:0;padding:0;list-style:none} input,select,textarea,button{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} a{color:inherit} /* ---------- 2. tokens ---------- */ :root{ --paper:#FCFAF6; --ink:#15130F; --dim:#615C53; --hair:rgba(21,19,15,.16); --c:#E5312B; --c-soft:#FBE0DE; --on-c:#FFFFFF; --t-h1:clamp(2.4rem,6.4vw,5rem); --t-h2:clamp(1.5rem,3vw,2.2rem); --t-sub:clamp(1.2rem,2.1vw,1.75rem); --t-near:clamp(1.16rem,1.9vw,1.5rem); --t-mid:1.09rem; --t-far:1rem; --t-mini:.71rem; --pad:clamp(18px,4.6vw,60px); --air:clamp(46px,6.2vw,90px); --max:1160px; } /* ЦВЕТ ПРИНАДЛЕЖИТ ОТЕЛЮ: восемнадцать пар. Класс ставится на . */ .h01{--c:#E5312B;--c-soft:#FBE0DE;--on-c:#FFFFFF} .h02{--c:#E85A00;--c-soft:#FCE7D6;--on-c:#FFFFFF} .h03{--c:#EF8A00;--c-soft:#FDEEDA;--on-c:#15130F} .h04{--c:#D9A400;--c-soft:#FAF1D4;--on-c:#15130F} .h05{--c:#A9B300;--c-soft:#F1F4D6;--on-c:#15130F} .h06{--c:#6CAE1E;--c-soft:#E7F3DA;--on-c:#15130F} .h07{--c:#2FA84F;--c-soft:#DDF1E2;--on-c:#FFFFFF} .h08{--c:#00A57E;--c-soft:#D7F0E8;--on-c:#FFFFFF} .h09{--c:#00A2A2;--c-soft:#D6F0F0;--on-c:#15130F} .h10{--c:#0093C4;--c-soft:#D8EDF7;--on-c:#FFFFFF} .h11{--c:#0C7BE0;--c-soft:#DBE9FB;--on-c:#FFFFFF} .h12{--c:#3A5FE0;--c-soft:#E0E5FC;--on-c:#FFFFFF} .h13{--c:#6B45DE;--c-soft:#E7E1FB;--on-c:#FFFFFF} .h14{--c:#8E37C9;--c-soft:#EDDDF6;--on-c:#FFFFFF} .h15{--c:#B32BB0;--c-soft:#F5DBF3;--on-c:#FFFFFF} .h16{--c:#D0248A;--c-soft:#FADCEE;--on-c:#FFFFFF} .h17{--c:#DC2A66;--c-soft:#FBDCE6;--on-c:#FFFFFF} .h18{--c:#14607A;--c-soft:#DAEAF0;--on-c:#FFFFFF} /* ---------- 3. base ---------- */ body{ background:var(--paper); color:var(--ink); font-family:"Manrope",Helvetica,Arial,sans-serif; font-size:var(--t-mid); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:700;line-height:1.02;letter-spacing:-.015em} h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} .tv-kick{font-size:var(--t-mini);letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--dim)} /* ---------- 4. каркас ---------- */ .tv-hold{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} .tv-air{padding-top:var(--air);padding-bottom:var(--air)} /* ---------- 5. ОТДАЛЕНИЕ: три блока с убывающей плотностью ---------- */ .tv-sub{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:var(--t-sub);line-height:1.18;margin-top:16px;max-width:30ch} .tv-near{background:var(--c);color:var(--on-c);padding:clamp(22px,3.2vw,40px);margin-top:34px} .tv-near p{font-size:var(--t-near);line-height:1.38;max-width:34ch;margin-top:12px} .tv-mid{background:var(--c-soft);color:var(--ink);padding:clamp(22px,3.2vw,40px);margin-top:14px} .tv-mid p{font-size:var(--t-mid);line-height:1.58;max-width:52ch;margin-top:12px} .tv-far{background:var(--paper);border-top:4px solid var(--c);padding-top:22px;margin-top:14px} .tv-far p{font-size:var(--t-far);line-height:1.68;max-width:66ch;margin-top:12px;color:var(--dim)} .tv-step{display:block;font-size:var(--t-mini);letter-spacing:.24em;text-transform:uppercase;font-weight:600} .tv-arrange{margin-top:32px;border:3px solid var(--c);padding:15px 18px;max-width:60ch} .tv-arrange b{display:block;font-size:var(--t-mini);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:5px} .tv-over{margin-top:20px;font-size:var(--t-mini);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)} /* ---------- 6. фото, hero ---------- */ .tv-fig{margin-top:30px;max-width:440px} .tv-shot{overflow:hidden;background:var(--c-soft);aspect-ratio:3/4} .tv-shot img{width:100%;height:100%;object-fit:cover} .tv-fig figcaption{margin-top:8px;font-size:var(--t-mini);color:var(--dim)} .tv-hero{overflow:hidden;background:var(--c-soft);aspect-ratio:3/2} .tv-hero img{width:100%;height:100%;object-fit:cover} .tv-hero--mark{ aspect-ratio:1; max-width:min(100%,420px); background:#14110D; border:3px solid var(--ink); } .tv-hero--mark img{object-fit:contain} .tv-lead{display:grid;gap:24px;margin-bottom:8px} .tv-lead h1{margin:0} .tv-lead .tv-lede{margin-top:16px} @media (min-width:860px){ .tv-lead{grid-template-columns:minmax(220px,36%) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;margin-bottom:12px} .tv-hero--mark{max-width:none} } /* ---------- 7. МОЗАИКА ГЛАВНОЙ ---------- */ .tv-wall{display:grid;gap:3px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px} @media (min-width:620px){.tv-wall{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:1000px){.tv-wall{grid-template-columns:repeat(6,minmax(0,1fr))}} .tv-tile{display:block;background:var(--c);color:var(--on-c);text-decoration:none;padding:16px;min-height:150px} .tv-tile b{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.06rem;display:block;margin-top:9px;line-height:1.15} .tv-tile span{display:block;margin-top:8px;font-size:.82rem;opacity:.9} /* ---------- 8. УКАЗАТЕЛЬ РАЗДЕЛА ---------- */ .tv-index li{border-bottom:1px solid var(--hair)} .tv-index a{display:grid;gap:4px 20px;grid-template-columns:minmax(0,1fr);padding:20px 0;text-decoration:none} @media (min-width:860px){.tv-index a{grid-template-columns:66px minmax(0,1fr) minmax(0,20rem);align-items:baseline}} .tv-index a:hover .tv-big,.tv-index a:focus-visible .tv-big{color:var(--c)} .tv-swatch{display:block;width:52px;height:52px;background:var(--c)} .tv-big{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:clamp(1.6rem,4.4vw,3rem);line-height:1.04} .tv-say{color:var(--dim);font-size:.98rem} /* ---------- 9. цепочка, шапка, футер ---------- */ .tv-chain{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);border-top:4px solid var(--c);margin-top:var(--air);padding-top:20px} @media (min-width:860px){.tv-chain{grid-template-columns:repeat(3,minmax(0,1fr))}} .tv-chain a{text-decoration:none;display:block} .tv-chain b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.1rem;margin-top:5px} .tv-top{background:var(--paper);border-bottom:4px solid var(--ink);padding:13px var(--pad);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px} .tv-logo{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.3rem;text-decoration:none;margin-right:auto} .tv-burger{display:none;border:3px solid var(--ink);padding:5px 13px;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase} .tv-nav{display:flex;flex-wrap:wrap;gap:9px 18px;width:100%} .tv-nav a{font-weight:600;text-decoration:none;font-size:.94rem} .tv-nav a[aria-current="page"]{background:var(--ink);color:var(--paper);padding:2px 8px} .tv-js .tv-burger{display:block} .tv-js .tv-nav{display:none} .tv-js .tv-nav.is-open{display:flex;flex-direction:column;gap:12px} @media (min-width:860px){ .tv-nav{width:auto;flex-wrap:nowrap} .tv-js .tv-nav{display:flex;flex-direction:row} .tv-js .tv-burger{display:none} } .tv-lede{font-size:1.2rem;color:var(--dim);max-width:56ch} .tv-link{text-decoration:none;border-bottom:3px solid var(--c)} .tv-fine{border-top:1px solid var(--hair);margin-top:var(--air);padding-top:18px;font-size:.94rem;color:var(--dim);max-width:70ch} .tv-foot{border-top:4px solid var(--ink);padding:26px var(--pad)} .tv-foot-in{width:100%;max-width:var(--max);margin:0 auto;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)} @media (min-width:620px){.tv-foot-in{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}} .tv-foot p{font-size:.92rem;color:var(--dim);max-width:58ch} .tv-foot a{text-decoration:none} :focus-visible{outline:3px solid var(--ink);outline-offset:2px} @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* ---------- 10. дописанное ---------- */ .tv-lede{margin-top:20px} .tv-crumbs{font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:26px} .tv-crumbs a{text-decoration:none;border-bottom:1px solid var(--hair)} .tv-crumbs span{color:var(--dim)} .tv-where{margin-top:12px;font-size:.94rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)} .tv-kick+h1{margin-top:10px} .tv-age{margin-top:26px;border-left:6px solid var(--c);padding:8px 0 8px 14px;font-size:.94rem;color:var(--dim);max-width:60ch} .tv-note{margin-top:34px;font-size:var(--t-far);line-height:1.68;color:var(--dim);max-width:66ch} .tv-onward{margin-top:26px;max-width:66ch} .tv-figure{margin-bottom:32px} .tv-help{border-top:4px solid var(--ink);padding:22px 0} .tv-help p{font-size:.92rem;color:var(--dim);max-width:70ch} .tv-index{margin-top:34px;border-top:1px solid var(--hair)} .tv-wall li{display:flex} .tv-wall li .tv-tile{flex:1 1 auto} .tv-hold h2{margin-top:44px} .tv-hold h2+p{margin-top:14px} .tv-hold p+p{margin-top:14px} .tv-form{margin-top:34px;max-width:36rem} .tv-field{display:grid;gap:6px;grid-template-columns:minmax(0,1fr);margin-top:18px} .tv-field label{font-size:var(--t-mini);letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--dim)} .tv-field input,.tv-field select,.tv-field textarea{width:100%;border:3px solid var(--ink);background:var(--paper);padding:10px 12px} .tv-check{display:grid;gap:10px;grid-template-columns:24px minmax(0,1fr);align-items:start;margin-top:22px;font-size:.94rem} .tv-check input{width:22px;height:22px;margin-top:3px} .tv-send{border:3px solid var(--ink);background:var(--ink);color:var(--paper);padding:11px 26px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;margin-top:26px;transition:opacity .15s} .tv-send:hover{opacity:.82}