:root{--bg:#f1ebe0;--card:#faf6ee;--field:#e9e0cf;--ink:#2a2622;--mut:#6f665b;--acc:#8a5a2b;--tone:#ecdcc3;--tone-h:#e2cdac;--err-bg:#f6dcd8;--err:#8c2b22;--ok-bg:#dde9d3;--ok:#2f5a1f}
@media(prefers-color-scheme:dark){:root{--bg:#181410;--card:#231d17;--field:#15110d;--ink:#eee6d8;--mut:#a89d8c;--acc:#d9a566;--tone:#3a2e21;--tone-h:#4a3a28;--err-bg:#432320;--err:#f0a89f;--ok-bg:#263a1f;--ok:#b5d9a4}}
*{box-sizing:border-box}body{margin:0;font:17px/1.65 Georgia,"Times New Roman",serif;color:var(--ink);background:var(--bg)}
a{color:var(--acc);text-decoration:none}main a:not(.btn):hover{text-decoration:underline}
a.btn,a.btn:hover,a.btn:focus,a.btn:visited,a.btn:active,nav a,nav a:hover,nav a:focus,nav a:visited,nav a:active,a.logo,a.logo:hover,a.logo:focus,a.logo:visited,button,button:hover,button:focus{text-decoration:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
header{background:var(--card);position:sticky;top:0;z-index:5}
.w{max-width:960px;margin:0 auto;padding:0 22px}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;font-size:22px;letter-spacing:.04em;color:var(--ink);min-height:44px}.logo svg{width:28px;height:28px}.logo svg *{stroke:var(--acc)}
nav{display:flex;align-items:center;gap:6px}
nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font:15px/1 system-ui,sans-serif;color:var(--ink);border-radius:10px}
nav a.in{background:var(--tone);color:var(--acc);padding:0 18px;margin-left:6px}nav a.in:hover,nav a.in:focus-visible{background:var(--tone-h)}
.hero{padding:76px 0 56px}.hero h1{font-weight:normal;font-size:44px;line-height:1.15;margin:0 0 18px}.hero p{max-width:560px;color:var(--mut);font-size:19px}
.hero2{position:relative;color:#fff;background:#3a2a1c url(/img/hero.webp) center/cover;min-height:min(78vh,720px);display:flex;align-items:flex-end}
.hero2:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,20,12,.15),rgba(30,20,12,.78))}
.hero2 .w{position:relative;padding-bottom:72px;padding-top:120px}.hero2 h1{font-weight:normal;font-size:clamp(36px,6vw,66px);line-height:1.08;margin:0 0 18px;max-width:760px}
.hero2 p{max-width:560px;font-size:20px;color:#f1e8da;margin:0 0 8px}
.btn{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;margin-right:10px;background:var(--acc);color:#fff;padding:0 22px;border-radius:12px;font:15px system-ui,sans-serif}
.btn.ghost{background:rgba(255,255,255,.18);color:#fff}.btn.ghost:hover{background:rgba(255,255,255,.28)}
.sec{padding:10px 0 20px}.sec h2{font-weight:normal;font-size:28px;margin:46px 0 0}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
figure,.step,.rev blockquote,.book,.login,.card{margin:0;background:var(--card);border:0;border-radius:16px;overflow:hidden}
figure img{display:block;height:auto;width:100%;aspect-ratio:4/3;object-fit:cover}
figcaption{padding:12px 14px 14px;font:14px/1.45 system-ui,sans-serif;color:var(--mut)}figcaption b{display:block;color:var(--ink);font:17px Georgia,serif;font-weight:normal;margin-bottom:2px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}.step{counter-increment:s}
.step img{display:block;height:auto;width:100%;aspect-ratio:3/2;object-fit:cover}.step div{padding:14px 16px 16px}
.step h3{margin:0 0 4px;font-weight:normal;font-size:19px}.step h3:before{content:counter(s) ". ";color:var(--acc)}.step p{margin:0;color:var(--mut);font:14.5px/1.5 system-ui,sans-serif}
.rev{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.rev blockquote{padding:20px 22px;font-style:italic}
.rev cite{display:block;margin-top:10px;font:14px system-ui,sans-serif;font-style:normal;color:var(--mut)}
.book{padding:26px;width:100%}.book .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font:14px system-ui,sans-serif;margin:14px 0 6px;color:var(--mut)}
input,textarea{width:100%;min-height:46px;padding:11px 14px;border:0;border-radius:12px;font:16px system-ui,sans-serif;background:var(--field);color:var(--ink)}
textarea{min-height:100px;resize:vertical}input:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:0}
button{width:100%;min-height:48px;margin-top:20px;border:0;border-radius:12px;background:var(--acc);color:#fff;font:16px system-ui,sans-serif;cursor:pointer}button[disabled]{opacity:.6;cursor:wait}
.ok,.err{display:none;margin-top:14px;padding:12px 14px;border-radius:12px;font:14.5px system-ui,sans-serif}
.ok{background:var(--ok-bg);color:var(--ok)}.err{background:var(--err-bg);color:var(--err)}.ok.on,.err.on{display:block}
.login{max-width:380px;margin:70px auto;padding:30px}.login h1{font-weight:normal;font-size:26px;margin:0 0 6px}.login p.s{color:var(--mut);margin:0 0 20px;font:14.5px system-ui,sans-serif}
.m{font:14px system-ui,sans-serif;margin-top:16px;text-align:center}
footer{background:var(--card);margin-top:40px;flex-shrink:0;padding:26px 0;color:var(--mut);font:14px system-ui,sans-serif}
@media(max-width:860px){.gal,.steps{grid-template-columns:repeat(2,1fr)}.rev{grid-template-columns:1fr}.book .row{grid-template-columns:1fr}.hero h1{font-size:34px}}
@media(max-width:480px){.gal,.steps{grid-template-columns:1fr}.hero2{min-height:min(70vh,560px)}.w{padding:0 16px}nav a{padding:0 9px}nav a.in{padding:0 14px}.logo{font-size:19px}}
@media(max-width:600px){nav a.hm{display:none}}
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
main{flex:1 0 auto}footer{margin-top:auto}main+footer{margin-top:40px}