:root { --paper:#f5f3ef; --ink:#28242a; --muted:#716b72; --plum:#514053; --pale:#e9e2e7; --line:#d8d0d5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
a:focus-visible { outline:3px solid #9a6684; outline-offset:4px; }
.wrap { max-width:1320px; padding-inline:48px; margin:auto; }
header { border-bottom:1px solid var(--line); }
header .wrap { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { text-decoration:none; font:600 29px/1 Georgia,serif; letter-spacing:-.055em; white-space:nowrap; }
.logo svg { display:none; }
nav { display:flex; align-items:center; gap:36px; }
nav a { font-size:14px; text-decoration:none; }
nav a:hover { text-decoration:underline; text-underline-offset:6px; }
.hero { display:grid; grid-template-columns: .9fr 1.1fr; gap:7%; align-items:center; padding-top:70px; padding-bottom:90px; }
.hero h1, h2, h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.045em; }
.hero h1 { font-size:clamp(48px,5.5vw,78px); line-height:1.03; margin:0 0 28px; max-width:10ch; }
.hero p { color:var(--muted); max-width:430px; line-height:1.8; margin:0 0 30px; }
.btn { display:inline-flex; justify-content:center; align-items:center; min-height:54px; padding:13px 25px; background:var(--plum); color:white; text-decoration:none; border-radius:4px; font-weight:600; font-size:14px; }
.btn:hover { background:#382d3b; }
.hero-art { margin:0; background:var(--pale); padding:22px; border-radius:190px 190px 8px 8px; }
.hero-art img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:170px 170px 2px 2px; }
section { padding:105px 0; }
h2 { font-size:clamp(38px,4.4vw,58px); line-height:1.08; margin:0 0 36px; }
.grid { display:grid; gap:24px; }
#breed { background:#e8e3e7; }
#breed .wrap { display:grid; grid-template-columns: .8fr 1.2fr; gap:8%; }
#breed .grid { grid-template-columns:repeat(2,1fr); gap:38px 40px; }
.card h3 { font-size:25px; line-height:1.2; margin:0 0 10px; }
.card p { color:var(--muted); font-size:15px; line-height:1.75; margin:0; }
#breed .card { border-top:1px solid #baacb7; padding-top:17px; }
#kittens .grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
#kittens .card { min-width:0; }
.kitten { display:block; width:100%; height:auto; aspect-ratio:4/4.5; object-fit:cover; border-radius:150px 150px 5px 5px; background:#ebe4de; }
#kittens .card h3 { margin:20px 0 5px; }
.tag { display:inline-block; margin-top:13px; padding:4px 11px; border-radius:30px; background:#e4eadf; color:#405943; font-size:12px; }
.tag.booked { background:#eae4e6; color:#6c6268; }
.art-note { color:var(--muted); font-size:14px; max-width:610px; margin:-16px 0 40px; }
#how { background:#504052; color:#fffaf9; }
#how .wrap { display:grid; grid-template-columns:1fr 1fr; gap:10%; }
#how ol { margin:0; padding-left:24px; }
#how li { padding:0 0 20px 12px; margin:0 0 20px; border-bottom:1px solid #827484; }
#contacts { padding:110px 0; }
#contacts .wrap { display:grid; grid-template-columns: .8fr 1fr; gap:10%; }
#contacts p { color:var(--muted); max-width:420px; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-content:start; padding:clamp(22px,3.5vw,42px); background:#fff; border:1px solid #e5dfe3; border-radius:22px; box-shadow:0 18px 50px rgba(62,45,59,.06); }
.form-intro { grid-column:1/-1; padding-bottom:4px; }
.form-intro h3 { font-size:27px; line-height:1.2; margin:0 0 7px; }
#contacts .form-intro p { margin:0; font-size:14px; }
.field { display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:600; }
.field-wide, .form-actions { grid-column:1/-1; }
.field input, .field textarea, .field select { width:100%; min-height:54px; border:1px solid #e3dce1; background:#f9f7f8; color:var(--ink); border-radius:10px; padding:14px 15px; font:400 16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.field input::placeholder, .field textarea::placeholder { color:#8b848b; opacity:1; }
.field textarea { resize:vertical; min-height:120px; }
.field input:focus, .field textarea:focus, .field select:focus { outline:2px solid #9a6684; outline-offset:2px; }
.form-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-top:4px; }
.form-actions .btn { border:0; border-radius:10px; cursor:pointer; font:600 14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.form-actions .btn:focus-visible { outline:3px solid #9a6684; outline-offset:4px; }
#contacts .form-actions p { margin:0; font-size:13px; line-height:1.5; }
#contacts .form-status { grid-column:1/-1; margin:0; padding:15px 17px; border-radius:10px; background:#ece8ef; color:#403344; font-size:14px; }
#contacts .form-status[hidden] { display:none; }
footer { border-top:1px solid var(--line); padding:28px 0; color:var(--muted); font-size:13px; }
@media(max-width:850px) { .wrap { padding-inline:28px; } .hero { gap:4%; } #breed .wrap { grid-template-columns:1fr; } #kittens .grid { grid-template-columns:repeat(2,1fr); gap:36px 22px; } }
@media(max-width:680px) { .wrap { padding-inline:20px; } header .wrap { min-height:72px; flex-wrap:wrap; padding-block:20px; } nav { width:100%; overflow-x:auto; gap:22px; white-space:nowrap; padding-bottom:3px; } .hero { grid-template-columns:1fr; padding-top:48px; padding-bottom:65px; gap:42px; } .hero h1 { font-size:clamp(44px,11vw,62px); } .hero-art { max-width:510px; } section { padding:70px 0; } #breed .grid { gap:28px 20px; } #how .wrap { grid-template-columns:1fr; gap:0; } #contacts { padding:75px 0; } #contacts .wrap, .contact-form { grid-template-columns:1fr; } .field-wide, .form-actions { grid-column:auto; } }
@media(max-width:380px) { #breed .grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Внутренние страницы: статьи, новости, наши кошки, галерея */
nav a[aria-current] { text-decoration:underline; text-underline-offset:6px; }
.page-head { padding:70px 0 40px; }
.page-head h1 { font:400 clamp(42px,5vw,66px)/1.05 Georgia,"Times New Roman",serif; letter-spacing:-.045em; margin:0 0 18px; max-width:16ch; }
.page-head p { color:var(--muted); max-width:620px; margin:0; }
.crumbs { font-size:13px; color:var(--muted); margin-bottom:22px; }
.crumbs a { text-decoration:none; } .crumbs a:hover { text-decoration:underline; }
.post-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; padding-bottom:105px; }
.post { display:flex; flex-direction:column; background:#fff; border:1px solid #e5dfe3; border-radius:18px; padding:28px; text-decoration:none; transition:box-shadow .2s; }
.post:hover { box-shadow:0 18px 50px rgba(62,45,59,.08); }
.post .meta { font-size:12px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
.post h3 { font:400 25px/1.2 Georgia,serif; letter-spacing:-.03em; margin:12px 0 10px; }
.post p { color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 18px; }
.post .more { margin-top:auto; font-size:14px; font-weight:600; color:var(--plum); }
#blog { background:#e8e3e7; } #blog .post-list { padding-bottom:0; }
#blog .head { display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; }
#blog .head a { font-size:14px; font-weight:600; color:var(--plum); }
.article { max-width:720px; padding-bottom:90px; }
.article .meta { font-size:13px; color:var(--muted); margin:-4px 0 30px; }
.article .lead { font-size:19px; line-height:1.7; color:#4a4350; margin:0 0 34px; }
.article h2 { font-size:clamp(28px,3vw,36px); margin:44px 0 16px; }
.article p, .article li { font-size:17px; line-height:1.8; }
.article ul, .article ol { padding-left:22px; } .article li { margin-bottom:8px; }
.article figure { margin:36px 0; } .article figure img { width:100%; height:auto; border-radius:14px; display:block; }
.article figcaption { font-size:13px; color:var(--muted); margin-top:10px; }
.note { background:#ece8ef; border-radius:14px; padding:20px 24px; font-size:15px; color:#403344; margin:34px 0; }
.related { border-top:1px solid var(--line); padding-top:30px; margin-top:50px; }
.related h3 { font:400 24px/1.2 Georgia,serif; margin:0 0 14px; }
.related a { display:block; margin-bottom:8px; color:var(--plum); }
.cats { display:grid; gap:70px; padding-bottom:105px; }
.cat { display:grid; grid-template-columns:.9fr 1.1fr; gap:7%; align-items:center; }
.cat img, .cat .ph { width:100%; height:auto; aspect-ratio:4/3.4; object-fit:cover; border-radius:150px 150px 6px 6px; background:var(--pale); display:block; }
.cat .ph { display:flex; align-items:center; justify-content:center; font:400 120px/1 Georgia,serif; color:#b9a8b5; }
.cat h2 { margin:0 0 6px; } .cat .sub { color:var(--muted); margin:0 0 20px; }
.cat dl { display:grid; grid-template-columns:auto 1fr; gap:6px 22px; font-size:15px; margin:0 0 20px; }
.cat dt { color:var(--muted); } .cat dd { margin:0; }
.cat p { line-height:1.8; }
.news { max-width:760px; padding-bottom:100px; }
.news article { border-top:1px solid var(--line); padding:34px 0; display:grid; grid-template-columns:150px 1fr; gap:28px; }
.news time { font-size:13px; color:var(--muted); padding-top:8px; }
.news h2 { font-size:29px; margin:0 0 12px; } .news p { margin:0 0 10px; line-height:1.8; }
.news img { width:100%; max-width:420px; border-radius:14px; margin-top:10px; }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding-bottom:105px; }
.gallery figure { margin:0; } .gallery img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; display:block; background:var(--pale); }
.gallery figcaption { font-size:13px; color:var(--muted); margin-top:8px; }
footer .wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
footer nav { gap:22px; } footer nav a { font-size:13px; }
@media(max-width:850px) { .post-list, .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .cat { grid-template-columns:1fr; gap:30px; } .cat img, .cat .ph { max-width:520px; } }
@media(max-width:680px) { .post-list, .gallery { grid-template-columns:1fr; } .news article { grid-template-columns:1fr; gap:6px; } .page-head { padding:48px 0 30px; } .article p, .article li { font-size:16px; } footer nav { width:auto; } }
.gallery video { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; display:block; background:#2b2530; }
.article figure video { width:100%; border-radius:14px; display:block; background:#2b2530; }