/* ============================================================
   Питомник Ланко — redesign_v2
   Дизайн-система: яркая голубая/зелёная гамма, фон-«пятнышки»
   Шрифты подключаются в <head> (см. functions.php → lanko_head_fonts)
   с preconnect + асинхронной загрузкой, чтобы не блокировать отрисовку.
   ============================================================ */

:root{
  /* --- палитра --- */
  --teal:        #0ea5a8;   /* бирюза — основной */
  --teal-dk:     #0a7e80;
  --teal-lt:     #d4f4f3;
  --sky:         #2bb3e0;   /* голубой */
  --sky-dk:      #1690bd;
  --sky-lt:      #d9f0fb;
  --green:       #34c759;   /* свежий зелёный */
  --green-dk:    #1f9d44;
  --green-lt:    #def8e6;
  --lime:        #8fd14f;
  --sun:         #ffc83d;   /* акцент-солнышко */
  --coral:       #ff6f61;   /* тёплый акцент/CTA */
  --coral-dk:    #e9543f;

  --ink:         #143642;   /* тёмный сине-зелёный текст */
  --ink-soft:    #3a5a66;
  --muted:       #6f8a93;
  --line:        #d6e7ec;
  --bg:          #f2fbfc;   /* очень светлый голубой фон */
  --bg-soft:     #e8f6f9;
  --surface:     #ffffff;

  --grad-hero: linear-gradient(135deg, var(--teal) 0%, var(--sky) 55%, var(--green) 100%);
  --grad-soft: linear-gradient(135deg, var(--sky-lt), var(--green-lt));

  --radius:   18px;
  --radius-lg:28px;
  --radius-sm:12px;
  --shadow:   0 10px 30px rgba(14,165,168,.14);
  --shadow-lg:0 20px 50px rgba(14,90,110,.20);
  --shadow-sm:0 4px 14px rgba(14,165,168,.12);

  --font-head: 'Comfortaa', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;

  --wrap: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background-color:var(--bg);
  /* фон-«пятнышки» как у собак */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(43,179,224,.10) 0 22px, transparent 23px),
    radial-gradient(circle at 78% 12%, rgba(52,199,89,.09) 0 30px, transparent 31px),
    radial-gradient(circle at 88% 62%, rgba(14,165,168,.08) 0 26px, transparent 27px),
    radial-gradient(circle at 30% 78%, rgba(255,200,61,.10) 0 18px, transparent 19px),
    radial-gradient(circle at 55% 40%, rgba(43,179,224,.06) 0 40px, transparent 41px);
  background-attachment:fixed;
  line-height:1.6;
  font-size:17px;
}
img{ max-width:100%; display:block; }
a{ color:var(--teal-dk); text-decoration:none; transition:color .2s; }
a:hover{ color:var(--coral); }
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--ink); line-height:1.2; margin:0 0 .5em; font-weight:700; }
h1{ font-size:clamp(2rem,5vw,3.4rem); }
h2{ font-size:clamp(1.6rem,3.4vw,2.5rem); }
h3{ font-size:clamp(1.2rem,2.2vw,1.5rem); }
p{ margin:0 0 1em; }
.wrap{ width:min(100% - 2rem, var(--wrap)); margin-inline:auto; }
.section{ padding:clamp(3rem,7vw,6rem) 0; }
.section--soft{ background:var(--grad-soft); }
.center{ text-align:center; }
.muted{ color:var(--muted); }
.hand{ font-family:var(--font-hand); color:var(--teal-dk); }

/* --- кнопки --- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-head); font-weight:600; font-size:1rem;
  padding:.8em 1.6em; border-radius:999px; border:0; cursor:pointer;
  transition:transform .18s, box-shadow .18s, background .2s;
  text-decoration:none; line-height:1;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--grad-hero); color:#fff; box-shadow:var(--shadow); }
.btn--primary:hover{ color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn--coral{ background:linear-gradient(135deg,var(--coral),var(--sun)); color:#fff; box-shadow:0 10px 24px rgba(255,111,97,.3); }
.btn--coral:hover{ color:#fff; transform:translateY(-2px); }
.btn--ghost{ background:#fff; color:var(--teal-dk); border:2px solid var(--teal); }
.btn--ghost:hover{ background:var(--teal); color:#fff; }
.btn--sm{ padding:.55em 1.1em; font-size:.9rem; }

/* --- бейджи --- */
.badge{ display:inline-block; padding:.3em .8em; border-radius:999px; font-size:.78rem; font-weight:700;
  font-family:var(--font-head); background:var(--teal-lt); color:var(--teal-dk); }
.badge--green{ background:var(--green-lt); color:var(--green-dk); }
.badge--sun{ background:#fff2cc; color:#a9791a; }
.badge--coral{ background:#ffe2de; color:var(--coral-dk); }
.badge--male{ background:var(--sky-lt); color:var(--sky-dk); }
.badge--female{ background:#ffe0ef; color:#c43c7e; }

/* заголовок секции */
.section-head{ text-align:center; max-width:680px; margin:0 auto 2.5rem; }
.section-head .eyebrow{ font-family:var(--font-hand); font-size:1.6rem; color:var(--teal); display:block; }
.section-head p{ color:var(--ink-soft); }

/* ============================================================ HEADER */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{ display:flex; align-items:center; gap:1rem; padding:.7rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:700; font-size:1.15rem; color:var(--ink); }
.brand__logo{ width:44px; height:44px; border-radius:50%; background:var(--grad-hero); display:grid; place-items:center; color:#fff; font-size:1.4rem; box-shadow:var(--shadow-sm); flex:0 0 auto; }
.brand small{ display:block; font-family:var(--font-body); font-weight:600; font-size:.72rem; color:var(--muted); letter-spacing:.04em; }
.nav{ margin:0 auto; min-width:0; }
.nav ul{ list-style:none; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:.15rem; margin:0; padding:0; }
.nav a{ display:block; padding:.5rem .7rem; border-radius:999px; color:var(--ink); font-weight:700; font-size:.92rem; white-space:nowrap; }
.nav a:hover{ background:var(--teal-lt); color:var(--teal-dk); }
.nav a.active{ background:var(--grad-hero); color:#fff; }
.header-cta{ margin-left:.5rem; flex:0 0 auto; }
.header-cta--round{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--coral); color:#fff; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, background .2s; }
.header-cta--round:hover{ transform:translateY(-2px) scale(1.05); box-shadow:var(--shadow); background:var(--coral-dk); color:#fff; }
.header-cta--round svg{ display:block; }
.menu-btn{ display:none; margin-left:auto; width:46px; height:46px; border:0; border-radius:12px; background:var(--teal-lt); cursor:pointer; }
.menu-btn span,.menu-btn span::before,.menu-btn span::after{ content:''; display:block; width:22px; height:2.5px; background:var(--teal-dk); border-radius:2px; margin:0 auto; position:relative; transition:.25s; }
.menu-btn span::before{ position:absolute; top:-7px; } .menu-btn span::after{ position:absolute; top:7px; }
.menu-open .menu-btn span{ background:transparent; }
.menu-open .menu-btn span::before{ top:0; transform:rotate(45deg); }
.menu-open .menu-btn span::after{ top:0; transform:rotate(-45deg); }

/* ============================================================ HERO */
.hero{ position:relative; overflow:hidden; color:#fff; background:var(--grad-hero); }
.hero::after{ /* пятнышки на герое */
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.18) 0 26px, transparent 27px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.13) 0 34px, transparent 35px),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.12) 0 22px, transparent 23px),
    radial-gradient(circle at 35% 75%, rgba(255,255,255,.10) 0 16px, transparent 17px);
}
.hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center; padding:clamp(2.5rem,6vw,5rem) 0; }
.hero h1{ color:#fff; }
.hero p{ font-size:1.15rem; opacity:.96; max-width:46ch; }
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem; }
/* Слайдер: все слайды складываются в одну grid-ячейку (1/1).
   Самый высокий слайд задаёт высоту контейнера — без position:absolute,
   поэтому контейнер НЕ схлопывается в 0 на десктопе. */
.hero__slider{ position:relative; width:100%; height:clamp(240px,32vw,440px); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:#cdeef0; }
.hero__slide{ position:absolute; inset:0; overflow:hidden; isolation:isolate; opacity:0; transition:opacity .8s; }
.hero__slide.is-active{ opacity:1; }
/* Первый слайд виден СРАЗУ и без перехода — чтобы Lighthouse зафиксировал LCP */
.hero__slide:first-child{ opacity:1; transition:none; }
.hero__slide.is-active ~ .hero__slide{ opacity:0; }
.hero__slide::before{ content:""; position:absolute; inset:-16px; z-index:0; background:var(--media-image) center/cover no-repeat; filter:blur(24px); transform:scale(1.08); }
.hero__slide img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
.hero__stats{ display:flex; gap:1.5rem; margin-top:1.8rem; flex-wrap:wrap; }
.hero__stat b{ font-family:var(--font-head); font-size:1.8rem; display:block; }
.hero__stat span{ font-size:.85rem; opacity:.9; }
.wave{ display:block; width:100%; height:auto; margin-bottom:-6px; }

/* ============================================================ CARDS GRID */
.grid{ display:grid; gap:1.5rem; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

.card{ background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-soft); isolation:isolate; }
.card__media img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; }
.card__media::before,.post__media::before,.album-card__media::before,.marquee__media::before,.hslide__media::before{ content:""; position:absolute; inset:-12px; z-index:0; background:var(--media-image) center/cover no-repeat; filter:blur(18px); transform:scale(1.08); }
.card__media .badge{ position:absolute; z-index:2; top:.7rem; left:.7rem; }
.pet-reserved-badge{ display:block; padding:.65rem .8rem; background:#d81f45; color:#fff; font-family:var(--font-head); font-weight:800; font-size:.9rem; text-align:center; letter-spacing:.02em; text-transform:uppercase; box-shadow:inset 0 1px rgba(255,255,255,.25); }
.about .pet-reserved-badge{ display:inline-block; border-radius:var(--radius-sm); margin-left:.6rem; vertical-align:middle; }

/* ============================================================ ЭЛЕКТРОННЫЙ ГИД */
.guide-hero{ position:relative; overflow:hidden; color:#f7f3e9; background:#153b39; }
.guide-hero::before{ content:""; position:absolute; width:45rem; height:45rem; border-radius:50%; background:#c9d97e; filter:blur(5px); opacity:.16; right:-16rem; top:-24rem; }
.guide-hero__grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(2rem,6vw,6rem); padding:clamp(4rem,9vw,7rem) 0; }
.guide-kicker{ margin:0 0 .8rem; color:#dbe88e; font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.guide-kicker--dark{ color:#4d716e; }
.guide-hero h1{ color:#fffdf7; max-width:12ch; font-size:clamp(2.5rem,5.3vw,5.4rem); line-height:.98; letter-spacing:-.055em; margin:.1rem 0 1.5rem; }
.guide-lead{ max-width:54ch; font-size:1.1rem; line-height:1.75; color:#dce9e3; }
.guide-hero__actions{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-top:2rem; }
.guide-text-link{ color:#fffdf7; font-weight:800; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.42); padding-bottom:.15rem; }
.guide-text-link:hover{ color:#dbe88e; }
.guide-hero__facts{ display:flex; gap:1.25rem; flex-wrap:wrap; margin-top:3.4rem; color:#c2d3ca; font-size:.82rem; }
.guide-hero__facts span{ border-left:1px solid rgba(219,232,142,.45); padding-left:.75rem; }
.guide-hero__facts b{ display:block; color:#fff; font-size:1.2rem; }
.guide-hero__image{ position:relative; margin:0; min-height:420px; transform:rotate(2deg); }
.guide-hero__image::before{ content:""; position:absolute; inset:1.2rem -1rem -1rem 1.4rem; border:1px solid rgba(219,232,142,.5); }
.guide-hero__image img{ position:relative; width:100%; height:100%; min-height:420px; object-fit:cover; border-radius:3px; filter:saturate(.92) contrast(1.04); }
.guide-hero__image figcaption{ position:absolute; right:.8rem; bottom:.8rem; margin:0; padding:.45rem .65rem; background:#fffdf7; color:#153b39; font-size:.75rem; font-weight:800; }
.guide-nav{ position:sticky; top:0; z-index:50; background:rgba(255,253,247,.94); border-bottom:1px solid #d9e0d7; backdrop-filter:blur(12px); }
.guide-nav__inner{ display:flex; gap:clamp(.8rem,3vw,2.5rem); overflow:auto; }
.guide-nav a{ color:#315854; flex:0 0 auto; font-size:.85rem; font-weight:800; padding:1rem 0 .9rem; text-decoration:none; }
.guide-nav a:hover{ color:#d81f45; }
.guide-intro{ padding:clamp(4rem,9vw,8rem) 0; background:#fffdf7; }
.guide-intro__grid,.guide-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,8vw,8rem); align-items:start; }
.guide-intro h2,.guide-section h2{ font-size:clamp(2rem,3.8vw,3.8rem); line-height:1.05; letter-spacing:-.04em; margin:.1rem 0; }
.guide-intro__text{ font-size:1.06rem; line-height:1.75; color:#45605c; }
.guide-note{ border-left:3px solid #d81f45; padding:.6rem 0 .6rem 1rem; color:#254b47; font-weight:700; }
.guide-chapters{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:4rem; border-top:1px solid #cbd8d0; border-left:1px solid #cbd8d0; }
.guide-chapters a{ display:grid; grid-template-columns:auto 1fr auto; gap:.7rem; align-items:center; min-height:94px; padding:1.1rem; border-right:1px solid #cbd8d0; border-bottom:1px solid #cbd8d0; color:#193f3b; text-decoration:none; transition:background .2s,transform .2s; }
.guide-chapters a:hover{ background:#e8efdc; transform:translateY(-3px); }
.guide-chapters b{ color:#d81f45; font-family:var(--font-head); }.guide-chapters i{ font-style:normal; font-size:1.3rem; }
.guide-section{ padding:clamp(4.5rem,10vw,9rem) 0; background:#fffdf7; }
.guide-section--home{ background:#eef3eb; }.guide-section--sage{ background:#dbe5c8; }.guide-section--ink{ background:#163d3a; color:#edf3e3; }.guide-section--archive{ background:#f4eee3; }
.guide-photo{ position:relative; margin:0; }.guide-photo img{ display:block; width:100%; max-height:600px; object-fit:cover; box-shadow:18px 18px 0 #dbe5c8; }.guide-photo--tilt{ transform:rotate(-2deg); }.guide-photo--portrait{ max-width:430px; justify-self:end; }.guide-photo--portrait img{ box-shadow:16px 16px 0 #315854; }.guide-photo figcaption,.guide-wide-photo figcaption{ color:#56716b; margin-top:.8rem; font-size:.82rem; font-weight:700; }
.guide-split h2{ margin:.1rem 0 1.4rem; }.guide-split p{ line-height:1.75; color:#45605c; }.guide-checklist{ list-style:none; padding:0; margin:1.8rem 0 0; }.guide-checklist li{ border-top:1px solid #c4d4c9; padding:.7rem 0 .7rem 1.8rem; position:relative; }.guide-checklist li::before{ content:"✓"; position:absolute; left:0; color:#d81f45; font-weight:900; }
.guide-section__head{ max-width:760px; margin-bottom:3rem; }.guide-section__head p:last-child{ color:#49645f; font-size:1.06rem; line-height:1.7; }.guide-section__head--light h2{ color:#fffdf7; }.guide-section__head--light p:last-child{ color:#c8dad0; }
.guide-timeline{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; counter-reset:timeline; }.guide-timeline article{ position:relative; padding:1.4rem 1.3rem; background:#f8faef; border-top:4px solid #315854; }.guide-timeline article::before{ counter-increment:timeline; content:"0" counter(timeline); display:block; color:#a7b35d; font-family:var(--font-head); font-size:1.9rem; font-weight:800; }.guide-timeline span{ color:#315854; font-weight:800; font-size:.8rem; }.guide-timeline h3{ margin:.45rem 0; }.guide-timeline p{ margin:0; color:#526c65; font-size:.93rem; line-height:1.55; }
.guide-wide-photo{ margin:3rem auto 0; max-width:900px; }.guide-wide-photo img{ width:100%; max-height:500px; object-fit:cover; }
.guide-care-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#9eb8aa; }.guide-care-grid article{ padding:1.8rem; background:#fffdf7; }.guide-care-grid b{ color:#d81f45; font-size:1.8rem; }.guide-care-grid h3{ margin:.8rem 0 .4rem; }.guide-care-grid p{ margin:0; color:#526c65; line-height:1.6; }
.guide-double-photo{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2.5rem; }.guide-double-photo img{ width:100%; height:340px; object-fit:cover; }
.guide-breed-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }.guide-breed-grid article{ display:grid; grid-template-columns:42% 1fr; min-height:250px; background:#24534e; }.guide-breed-grid img{ width:100%; height:100%; object-fit:cover; }.guide-breed-grid div{ padding:1.5rem; }.guide-breed-grid span{ color:#dbe88e; font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.guide-breed-grid h3{ color:#fffdf7; margin:.5rem 0; font-size:1.55rem; }.guide-breed-grid p{ color:#c8dad0; margin:0; line-height:1.55; font-size:.92rem; }
.guide-split--reverse{ grid-template-columns:1.2fr .8fr; }.guide-split--reverse p{ color:#52605a; }.guide-split--reverse .btn{ margin-top:1rem; }
@media (max-width:760px){ .guide-hero__grid,.guide-intro__grid,.guide-split,.guide-split--reverse{ grid-template-columns:1fr; }.guide-hero__image{ min-height:300px; transform:none; }.guide-hero__image img{ min-height:300px; }.guide-chapters,.guide-timeline,.guide-care-grid,.guide-breed-grid{ grid-template-columns:1fr; }.guide-chapters{ margin-top:2.5rem; }.guide-breed-grid article{ grid-template-columns:40% 1fr; }.guide-double-photo{ grid-template-columns:1fr; }.guide-double-photo img{ height:280px; }.guide-photo--portrait{ justify-self:start; }.guide-nav{ top:0; }.guide-hero__facts{ margin-top:2rem; } }

/* Полная версия книги: каталог и страницы глав. */
.book-library{ background:#e4eddb; padding:clamp(4.5rem,10vw,9rem) 0; }.book-library__head{ max-width:700px; margin-bottom:2.5rem; }.book-library__head h2{ margin:.1rem 0 .8rem; font-size:clamp(2rem,4vw,3.8rem); letter-spacing:-.04em; }.book-library__head p{ color:#46635e; font-size:1.05rem; line-height:1.7; }.book-library__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#93aba1; }.book-library__grid a{ display:block; min-height:220px; padding:1.7rem; background:#fffdf7; color:#173e3a; text-decoration:none; transition:transform .25s,background .25s; }.book-library__grid a:hover{ background:#153d3a; color:#fffdf7; transform:translateY(-4px); }.book-library__grid span{ color:#cc3150; font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.book-library__grid h3{ font-size:1.35rem; line-height:1.16; margin:.65rem 0; }.book-library__grid p{ color:#55706a; line-height:1.55; font-size:.9rem; }.book-library__grid a:hover span{ color:#dbe88e; }.book-library__grid a:hover p{ color:#d3e1db; }.book-library__grid b{ font-size:.85rem; }
.book-hero{ background:#153d3a; color:#fffdf7; overflow:hidden; }.book-hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,7vw,7rem); align-items:center; padding:clamp(3.5rem,8vw,6rem) 0; }.book-back{ display:inline-block; color:#dbe88e; margin-bottom:2.5rem; font-weight:800; text-decoration:none; }.book-hero h1{ color:#fffdf7; font-size:clamp(2.3rem,4.6vw,4.5rem); line-height:1.02; letter-spacing:-.05em; margin:.2rem 0 1.3rem; }.book-hero p:last-child{ color:#cbdcd4; font-size:1.08rem; line-height:1.7; }.book-hero figure{ margin:0; min-height:360px; }.book-hero img{ width:100%; height:100%; min-height:360px; object-fit:cover; border-radius:2px; }
.book-layout{ display:grid; grid-template-columns:220px minmax(0,760px); gap:clamp(2rem,7vw,6rem); align-items:start; padding-top:clamp(3rem,7vw,6rem); padding-bottom:clamp(4rem,9vw,8rem); }.book-toc{ position:sticky; top:58px; border-top:2px solid #163d3a; padding-top:.7rem; }.book-toc p{ color:#6b827c; font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.book-toc a{ display:flex; gap:.55rem; color:#48655f; padding:.5rem 0; font-size:.88rem; line-height:1.2; text-decoration:none; }.book-toc a b{ color:#cf3150; }.book-toc a.is-current{ color:#153d3a; font-weight:800; }.book-content{ font-size:1.07rem; line-height:1.78; }.book-reading{ color:#6b827c; font-size:.82rem; font-weight:800; }.book-content section{ margin:0 0 3rem; }.book-content h2{ color:#193f3b; font-size:clamp(1.7rem,3vw,2.7rem); line-height:1.08; letter-spacing:-.035em; margin:0 0 1rem; }.book-content p{ color:#415f59; }.book-check{ background:#ebf0d9; padding:clamp(1.5rem,4vw,2.4rem); }.book-check ul{ margin:1rem 0 0; padding:0; list-style:none; }.book-check li{ position:relative; padding:.55rem 0 .55rem 1.6rem; border-top:1px solid #bed0b9; }.book-check li::before{ content:"✓"; position:absolute; left:0; color:#cf3150; font-weight:900; }.book-callout{ padding:clamp(2rem,5vw,3rem); background:#173f3b; color:#fffdf7; }.book-callout p{ color:#dbe88e; margin:0; font-size:.85rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.book-callout h2{ color:#fffdf7; max-width:17ch; margin:.7rem 0 1.3rem; }.book-sources{ margin:-1.5rem 0 2.5rem; padding:1.2rem 1.3rem; border:1px solid #c8d6cd; background:#f7faf4; font-size:.87rem; line-height:1.6; }.book-sources p{ margin:0; color:#58706a; }.book-sources a{ color:#24534e; font-weight:800; }.book-pagination{ display:flex; justify-content:space-between; gap:1rem; border-top:1px solid #cbd8d0; padding-top:1.3rem; }.book-pagination a{ color:#1d4843; font-size:.9rem; font-weight:800; text-decoration:none; }.book-pagination a:last-child{ text-align:right; margin-left:auto; }
.book-gallery{ padding-top:1rem; }.book-gallery > div{ display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:180px 180px; gap:.7rem; }.book-gallery a{ position:relative; overflow:hidden; color:#fff; text-decoration:none; background:#244f4a; }.book-gallery a:first-child{ grid-row:1 / span 2; }.book-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s,filter .5s; }.book-gallery a:hover img{ transform:scale(1.06); filter:brightness(.8); }.book-gallery span{ position:absolute; left:.6rem; right:.6rem; bottom:.55rem; color:#fff; font-size:.78rem; font-weight:800; line-height:1.25; text-shadow:0 1px 4px rgba(0,0,0,.7); }

/* Источники оформлены как библиографическая карточка, а не рекламный блок. */
.book-callout h2{ max-width:23ch; margin-bottom:1rem; }.book-callout .book-callout__text{ max-width:58ch; color:#d9e9e3; font-size:.96rem; font-weight:400; line-height:1.65; text-transform:none; letter-spacing:0; }.book-sources{ padding:clamp(1.4rem,3vw,2rem); border-left:4px solid var(--coral); }.book-sources h2{ margin:.2rem 0 .65rem; font-size:1.4rem; }.book-sources .book-sources__eyebrow{ color:var(--coral); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.book-sources__link{ display:grid; grid-template-columns:1fr auto; gap:.15rem 1rem; align-items:center; margin:1.1rem 0 .85rem; padding:.9rem 1rem; color:#24534e; background:#e7f0eb; font-weight:800; line-height:1.35; text-decoration:none; transition:background .2s,transform .2s; }.book-sources__link:hover{ background:#d8e9df; transform:translateX(3px); }.book-sources__link span{ grid-column:1; color:#6a8279; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.book-sources__link b{ grid-column:2; grid-row:1 / span 2; color:var(--coral); font-size:1.15rem; }.book-sources__reference{ padding-top:.85rem; border-top:1px solid var(--line); }.book-sources__reference a{ color:#24534e; font-weight:800; }

/* Книга использует ту же живую палитру, что и главная страница. */
.guide-hero,.book-hero{ background:var(--grad-hero); }
.guide-hero::before{ background:var(--sun); opacity:.25; }
.guide-kicker,.book-back{ color:var(--sun); }
.guide-kicker--dark{ color:var(--teal-dk); }
.guide-lead,.guide-hero__facts,.book-hero p:last-child{ color:#fff; }
.guide-hero__facts span{ border-color:rgba(255,255,255,.55); }
.guide-hero__image::before{ border-color:rgba(255,255,255,.65); }
.guide-hero__image figcaption{ color:var(--teal-dk); }
.guide-nav{ background:rgba(255,255,255,.94); border-color:var(--line); }
.guide-nav a{ color:var(--teal-dk); }
.guide-nav a:hover{ color:var(--coral); }
.guide-intro,.guide-section{ background:var(--surface); }
.guide-section--home{ background:var(--grad-soft); }
.guide-section--sage,.book-library{ background:var(--sky-lt); }
.guide-section--ink{ background:var(--grad-hero); color:#fff; }
.guide-section--archive{ background:var(--green-lt); }
.guide-intro__text,.guide-split p,.guide-section__head p:last-child,.guide-split--reverse p,.book-library__head p,.book-content p{ color:var(--ink-soft); }
.guide-note{ border-color:var(--coral); color:var(--ink); }
.guide-chapters{ border-color:var(--line); }
.guide-chapters a{ color:var(--ink); border-color:var(--line); }
.guide-chapters a:hover{ background:var(--teal-lt); }
.guide-chapters b,.guide-checklist li::before,.guide-care-grid b,.book-toc a b,.book-check li::before{ color:var(--coral); }
.guide-photo img{ box-shadow:18px 18px 0 var(--sky); }
.guide-photo--portrait img{ box-shadow:16px 16px 0 var(--teal); }
.guide-photo figcaption,.guide-wide-photo figcaption{ color:var(--ink-soft); }
.guide-checklist li{ border-color:var(--line); }
.guide-timeline article{ background:var(--surface); border-color:var(--teal); box-shadow:var(--shadow-sm); }
.guide-timeline article::before{ color:var(--sky); }
.guide-timeline span{ color:var(--teal-dk); }
.guide-timeline p,.guide-care-grid p{ color:var(--ink-soft); }
.guide-care-grid{ background:var(--teal); }
.guide-care-grid article{ background:var(--surface); }
.guide-breed-grid article,.book-gallery a{ background:var(--teal-dk); }
.guide-breed-grid span,.book-callout p{ color:var(--sun); }
.guide-breed-grid p,.guide-section__head--light p:last-child{ color:#fff; }
.book-library__grid{ background:var(--teal); }
.book-library__grid a{ background:var(--surface); color:var(--ink); }
.book-library__grid a:hover{ background:var(--grad-hero); }
.book-library__grid span{ color:var(--coral); }
.book-library__grid p{ color:var(--ink-soft); }
.book-library__grid a:hover span{ color:var(--sun); }
.book-library__grid a:hover p{ color:#fff; }
.book-toc{ border-color:var(--teal); }
.book-toc p,.book-reading{ color:var(--muted); }
.book-toc a,.book-pagination a{ color:var(--teal-dk); }
.book-toc a.is-current,.book-content h2{ color:var(--ink); }
.book-check{ background:var(--green-lt); }
.book-check li,.book-pagination{ border-color:var(--line); }
.book-callout{ background:var(--grad-hero); }
.book-sources{ border-color:var(--line); background:var(--bg-soft); }
.book-sources p{ color:var(--ink-soft); }
.book-sources a{ color:var(--teal-dk); }
@media (max-width:760px){ .book-library__grid,.book-hero__grid,.book-layout{ grid-template-columns:1fr; }.book-hero figure,.book-hero img{ min-height:260px; }.book-toc{ position:static; display:grid; grid-template-columns:repeat(2,1fr); gap:.2rem .8rem; }.book-toc p{ grid-column:1/-1; }.book-gallery > div{ grid-template-columns:1fr 1fr; grid-template-rows:170px 170px; }.book-pagination span{ display:none; } }
.card__body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card__title{ font-family:var(--font-head); font-weight:700; font-size:1.1rem; color:var(--ink); }
.card__meta{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.85rem; color:var(--muted); margin-top:auto; }
.card__meta span{ display:inline-flex; align-items:center; gap:.3rem; }

.breed-card .card__title{ font-size:1.25rem; }
.breed-card .card__media{ aspect-ratio:16/11; }

/* ============================================================ ДРЕВО ПИТОМЦЕВ */
.breed-group{ margin-bottom:3rem; }
.breed-group__head{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.3rem; padding-bottom:.8rem; border-bottom:2px dashed var(--line); }
.breed-group__head h3{ margin:0; font-size:1.6rem; }
.breed-group__head .badge{ font-size:.8rem; }

.dog-card{ }
.dog-card__sex{ font-weight:800; }
.dog-card .card__media{ aspect-ratio:1/1; }
.dog-card__titles{ font-size:.82rem; color:var(--muted); }
.dog-card__toggle{ margin-top:.4rem; align-self:flex-start; }

/* родословное древо (раскрытие) */
.pedigree{ margin-top:.8rem; border-top:1px dashed var(--line); padding-top:.8rem; display:none; }
.dog-card.is-open .pedigree{ display:block; animation:fade .3s; }
/* Родословное древо — вертикальное (колонкой) на всех экранах, чтобы
   3+ поколения помещались в узкой карточке без обрезки и горизонтальной прокрутки. */
.ped-tree{ display:flex; flex-direction:column; gap:.5rem; }
.ped-col{ display:flex; flex-direction:column; gap:.5rem; }
/* каждое следующее поколение — с отступом и направляющей линией слева */
.ped-tree .ped-tree{ margin-left:.9rem; padding-left:.7rem; border-left:2px dotted var(--line); margin-top:.4rem; }
.ped-node{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.45rem .55rem; display:flex; gap:.5rem; align-items:center; font-size:.8rem; }
.ped-node img{ width:42px; height:42px; border-radius:8px; object-fit:cover; flex:0 0 auto; }
.ped-node .pn-name{ font-weight:700; line-height:1.2; }
.ped-node .pn-role{ font-size:.7rem; color:var(--muted); display:block; }
.ped-node--male{ border-left:4px solid var(--sky); }
.ped-node--female{ border-left:4px solid #f06ba8; }
.ped-node--empty{ opacity:.5; font-style:italic; }
/* ссылка на карточку предка внутри узла */
.pn-link{ color:var(--teal); text-decoration:none; border-bottom:1px dotted var(--teal); }
.pn-link:hover{ color:var(--coral); border-color:var(--coral); }
/* на странице одной собаки дерево может быть шире и по центру */
.single-pet .ped-tree{ max-width:560px; margin-inline:auto; }
@keyframes fade{ from{opacity:0; transform:translateY(-6px);} to{opacity:1;} }

/* ============================================================ ФИЛЬТРЫ */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2rem; }
.chip{ padding:.5rem 1.1rem; border-radius:999px; border:2px solid var(--line); background:#fff; color:var(--ink-soft); font-family:var(--font-head); font-weight:600; font-size:.9rem; cursor:pointer; transition:.2s; }
.chip:hover{ border-color:var(--teal); color:var(--teal-dk); }
.chip.active{ background:var(--grad-hero); color:#fff; border-color:transparent; }

/* ============================================================ БЛОГ */
.blog-feed{ display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:760px; margin-inline:auto; }
.post{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.post__media{ position:relative; aspect-ratio:21/9; overflow:hidden; background:var(--bg-soft); isolation:isolate; }
.post__media img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; }
.post__body{ padding:1.4rem 1.6rem 1.6rem; }
.post__cat{ margin-bottom:.5rem; }
.post__excerpt{ color:var(--ink-soft); }
.sentinel{ height:1px; }
.load-status{ text-align:center; color:var(--muted); padding:1.5rem; }

/* карта сайта */
.sitemap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.sitemap__col h4{ color:var(--teal-dk); border-bottom:2px solid var(--teal-lt); padding-bottom:.4rem; }
.sitemap__col ul{ list-style:none; padding:0; margin:0; }
.sitemap__col li{ padding:.25rem 0; }

/* ============================================================ ГАЛЕРЕЯ */
.gallery-grid{ columns:4 220px; column-gap:1rem; }
.gallery-item{ break-inside:avoid; margin-bottom:1rem; border-radius:var(--radius-sm); overflow:hidden; cursor:zoom-in; position:relative; box-shadow:var(--shadow-sm); }
.gallery-item img{ width:100%; transition:transform .4s, filter .3s; }
.gallery-item:hover img{ transform:scale(1.05); filter:brightness(1.05); }
.gallery-item__cap{ position:absolute; inset:auto 0 0 0; background:linear-gradient(transparent,rgba(20,54,66,.8)); color:#fff; padding:1.4rem .8rem .6rem; font-family:var(--font-head); font-size:.85rem; opacity:0; transition:.3s; }
.gallery-item:hover .gallery-item__cap{ opacity:1; }

/* лайтбокс */
.lightbox{ position:fixed; inset:0; background:rgba(10,40,48,.94); display:none; place-items:center; z-index:100; padding:2rem; }
.lightbox.is-open{ display:grid; animation:fade .25s; }
.lightbox img{ max-width:92vw; max-height:84vh; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.lightbox__close,.lightbox__nav{ position:absolute; background:rgba(255,255,255,.15); color:#fff; border:0; width:54px; height:54px; border-radius:50%; font-size:1.6rem; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.lightbox__close:hover,.lightbox__nav:hover{ background:var(--coral); }
.lightbox__close{ top:1.2rem; right:1.2rem; }
.lightbox__nav--prev{ left:1.2rem; top:50%; transform:translateY(-50%); }
.lightbox__nav--next{ right:1.2rem; top:50%; transform:translateY(-50%); }
.lightbox__fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:.6rem; position:relative; }
.lightbox__cap{ color:#fff; font-family:var(--font-head); font-size:.95rem; text-align:center; max-width:80vw; opacity:.92; }
.lightbox__count{ color:#fff; font-size:.8rem; opacity:.6; letter-spacing:.05em; }
.lightbox--solo .lightbox__nav,.lightbox--solo .lightbox__count{ display:none; }

/* галерея альбомами */
.album-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.4rem; }
.album-card{ background:var(--surface,#fff); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .25s, box-shadow .25s; display:flex; flex-direction:column; }
.album-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.album-card:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.album-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-soft); isolation:isolate; }
.album-card__media img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; }
.album-card__count{ position:absolute; z-index:2; top:.6rem; right:.6rem; background:rgba(20,54,66,.78); color:#fff; font-size:.78rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; }
.album-card__tag{ position:absolute; z-index:2; bottom:.6rem; left:.6rem; background:var(--teal); color:#fff; font-size:.72rem; font-weight:700; padding:.22rem .6rem; border-radius:999px; letter-spacing:.02em; }
.album-card__body{ padding:.8rem 1rem 1rem; display:flex; flex-direction:column; gap:.4rem; }
.album-card__title{ font-family:var(--font-head); font-weight:700; color:var(--ink); line-height:1.25; }

/* ============================================================ О ПИТОМНИКЕ */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; }
.about__media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/5; }
.about__media img{ width:100%; height:100%; object-fit:cover; }
.about__owner{ display:flex; align-items:center; gap:1rem; margin-top:1.2rem; padding:1rem; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.about__owner b{ font-family:var(--font-head); }

/* фичи/преимущества */
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.feature{ background:#fff; border-radius:var(--radius); padding:1.5rem; text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.feature .ico{ width:62px; height:62px; border-radius:50%; margin:0 auto 1rem; display:grid; place-items:center; font-size:1.7rem; background:var(--grad-soft); }

/* ============================================================ УСЛУГИ */
.service-card{ display:flex; gap:1rem; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.service-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.service-card__ico{ width:58px; height:58px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:1.6rem; background:var(--grad-soft); }
.service-card__title{ margin:0 0 .4rem; font-size:1.15rem; }
.service-card__body p{ margin:0 0 .7rem; color:var(--muted); font-size:.92rem; line-height:1.55; }

/* ============================================================ КОНТАКТЫ + ФОРМА */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
.contact__info ul{ list-style:none; padding:0; margin:1.2rem 0; }
.contact__info li{ display:flex; gap:.8rem; align-items:flex-start; padding:.6rem 0; border-bottom:1px solid var(--line); }
.contact__info .ico{ width:40px; height:40px; border-radius:50%; background:var(--teal-lt); color:var(--teal-dk); display:grid; place-items:center; flex:0 0 auto; }
.form{ background:#fff; border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow); border:1px solid var(--line); }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:.35rem; color:var(--ink-soft); }
.field input,.field select,.field textarea{ width:100%; padding:.75rem .9rem; border:2px solid var(--line); border-radius:var(--radius-sm); font:inherit; background:var(--bg); transition:border .2s; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--teal); background:#fff; }
.field[hidden]{ display:none; }
.field-row{ display:flex; gap:.8rem; }
.field-sub{ flex:1; display:block; }
.field-sub small{ display:block; font-size:.78rem; color:var(--muted); margin-bottom:.25rem; }
.field .check{ display:flex; align-items:center; gap:.55rem; font-weight:500; font-size:.92rem; margin:.45rem 0 0; color:var(--ink-soft); cursor:pointer; }
.field .check input{ width:auto; margin:0; accent-color:var(--teal); }
.form__note{ font-size:.82rem; color:var(--muted); margin-top:.8rem; }
.amelia-slot{ border:2px dashed var(--teal); border-radius:var(--radius); padding:1.2rem; background:var(--teal-lt); color:var(--teal-dk); text-align:center; font-size:.9rem; }

/* ============================================================ FOOTER */
.site-footer{ background:var(--ink); color:#cfe6ec; margin-top:3rem; }
.site-footer a{ color:#fff; } .site-footer a:hover{ color:var(--sun); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding:3rem 0 2rem; }
.footer-grid h4{ color:#fff; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ padding:.2rem 0; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:1.2rem 0; font-size:.85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }

/* ============================================================ УТИЛИТЫ/АНИМАЦИИ */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .6s, transform .6s; }
[data-reveal].in{ opacity:1; transform:none; }
/* Слайдер главной — всегда виден (он выше складки; не прятать reveal-анимацией,
   чтобы не остаться opacity:0, если IntersectionObserver не сработал). */
.hero__slider[data-reveal]{ opacity:1; transform:none; }
/* Запасной вариант, если JS отключён вовсе */
.no-js [data-reveal]{ opacity:1; transform:none; }
.is-hidden{ display:none !important; }
.no-js #blog-feed .is-hidden{ display:block !important; }
.no-js .load-status{ display:none; }

/* ссылки на старые сайты-источники */
.src-link{ display:inline-block; font-size:.82rem; font-weight:700; color:var(--teal); text-decoration:none; border-bottom:1px dashed var(--sky); padding-bottom:1px; transition:color .2s, border-color .2s; }
.src-link:hover{ color:var(--sky); border-color:var(--teal); }
.gallery-sources{ margin-top:2.5rem; padding:1.5rem 1.75rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.gallery-sources h2{ margin:0 0 1rem; font-size:1.2rem; }
.gallery-sources ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.6rem 1.4rem; }
.gallery-sources li{ padding:.15rem 0; }

/* ============================================================ АНИМИРОВАННЫЙ ЛОГОТИП SAN LANG HIN */
.brand__name{ display:flex; flex-direction:column; line-height:1.05; }
.wordmark{ display:inline-flex; font-family:var(--font-head); font-weight:800;
  font-size:clamp(1.35rem,2.5vw,2rem); letter-spacing:.02em; white-space:nowrap;
  perspective:600px; }
/* Слова вращаются вокруг вертикальной оси — все одинаково (одно направление и скорость) */
.wordmark__word{
  display:inline-block;
  transform-style:preserve-3d;
  will-change:transform;
  animation:wm-spin 11s linear infinite;
}
.wordmark__l{
  display:inline-block; font-weight:800;
  background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent;
  /* глубина (3D-экструзия буквы) */
  text-shadow:
    1px 1px 0 rgba(20,54,66,.34),
    2px 2px 0 rgba(20,54,66,.30),
    3px 3px 0 rgba(20,54,66,.26),
    4px 4px 0 rgba(20,54,66,.22),
    5px 5px 0 rgba(20,54,66,.16),
    6px 6px 0 rgba(20,54,66,.10);
}
.wordmark__sp{ display:inline-block; width:.4em; }
@keyframes wm-pop{ 0%{ opacity:0; transform:translateY(.5em) rotate(-8deg) scale(.6); } 100%{ opacity:1; transform:none; } }

/* против часовой стрелки вокруг вертикали = rotateY от 0 до -360 */
@keyframes wm-spin{ from{ transform:rotateY(0deg); } to{ transform:rotateY(-360deg); } }
@media (prefers-reduced-motion:reduce){
  .wordmark__l{ animation:none; opacity:1; }
  .wordmark__word{ animation:none; }
}

/* ============================================================ ВЫПАДАЮЩЕЕ МЕНЮ «СТАРЫЕ САЙТЫ» */
.nav__has-sub{ position:relative; }
.nav__sub-toggle{ display:inline-flex; align-items:center; gap:.25rem; padding:.5rem .7rem;
  border:0; background:transparent; border-radius:999px; cursor:pointer; white-space:nowrap;
  font-family:var(--font-body); font-weight:700; font-size:.92rem; color:var(--ink); }
.nav__sub-toggle:hover{ background:var(--teal-lt); color:var(--teal-dk); }
.nav__caret{ font-size:.7rem; transition:transform .2s; }
.nav__has-sub.open .nav__caret{ transform:rotate(180deg); }
.nav__sub{ position:absolute; top:calc(100% + .4rem); right:0; min-width:200px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); padding:.4rem; margin:0; list-style:none;
  display:none; z-index:70; }
.nav__sub[hidden]{ display:none !important; }
.nav__has-sub.open .nav__sub{ display:block; animation:fade .2s; }
.nav__sub li{ margin:0; }
.nav__sub a{ display:block; padding:.55rem .8rem; border-radius:var(--radius-sm);
  font-size:.92rem; font-weight:600; white-space:nowrap; }
.nav__sub a:hover{ background:var(--teal-lt); color:var(--teal-dk); }

/* ============================================================ ЛЕНТА-МАРКИ (Наши породы): авто-прокрутка в цикле, без скролбара */
.marquee{ position:relative; overflow:hidden; width:100%; padding:.5rem 0 1rem;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.marquee__track{ display:flex; width:max-content; gap:1.2rem;
  animation:marquee-rtl 38s linear infinite; will-change:transform; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ flex:0 0 auto; width:clamp(200px,22vw,260px); margin:0; text-align:center; }
.marquee__media{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow-sm); background:var(--bg-soft); isolation:isolate; }
.marquee__media img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; }
.marquee__cap{ margin-top:.55rem; font-family:var(--font-head); font-weight:700;
  font-size:1.02rem; color:var(--ink); }
/* слева направо: лента стартует сдвинутой влево на половину и едет к 0 */
@keyframes marquee-rtl{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ============================================================ ГОРИЗОНТАЛЬНЫЙ СЛАЙДЕР (породы / щенки) */
.hslider{ position:relative; }
.hslider__track{ display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:.3rem .2rem 1rem; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; }
.hslider__track::-webkit-scrollbar{ height:8px; }
.hslider__track::-webkit-scrollbar-thumb{ background:var(--teal-lt); border-radius:999px; }
.hslide{ flex:0 0 auto; width:clamp(220px,30%,300px); scroll-snap-align:start; }
.hslide__media{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow-sm); background:var(--bg-soft); isolation:isolate; }
.hslide__media img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; }
.hslide--breed .hslide__media{ aspect-ratio:16/11; }
.hslide__cap{ display:block; text-align:center; margin-top:.6rem; font-family:var(--font-head);
  font-weight:700; font-size:1.05rem; color:var(--ink); }
.hslide--pup{ width:clamp(240px,32%,320px); text-decoration:none; }
.hslider__nav{ position:absolute; top:38%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:#fff; color:var(--teal-dk); box-shadow:var(--shadow); font-size:1.6rem;
  display:grid; place-items:center; transition:background .2s,color .2s,opacity .2s; }
.hslider__nav:hover{ background:var(--teal); color:#fff; }
.hslider__nav--prev{ left:-6px; }
.hslider__nav--next{ right:-6px; }
.hslider__nav[disabled]{ opacity:.3; cursor:default; }

/* ============================================================ СЛАЙДЕР ФОТО ВНУТРИ КАРТОЧКИ */
.pcard-slider{ position:relative; overflow:hidden; }
/* Фото остаётся целиком, а свободное место заполняет размытая копия кадра. */
.card__media.pcard-slider{ aspect-ratio:4/3; }
.post__media.pcard-slider{ aspect-ratio:16/9; }
.pcard-slider__track{ position:relative; z-index:1; display:flex; height:100%; }
.pcard-slider__slide{ flex:0 0 100%; width:100%; height:100%; }
.pcard-slider__slide img{ width:100%; height:100%; object-fit:contain; display:block; }
.pcard-slider__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.85); color:var(--ink); box-shadow:var(--shadow-sm);
  font-size:1.3rem; display:grid; place-items:center; transition:background .2s,color .2s; }
.pcard-slider__nav:hover{ background:var(--coral); color:#fff; }
.pcard-slider__nav--prev{ left:.5rem; } .pcard-slider__nav--next{ right:.5rem; }
.pcard-slider__dots{ position:absolute; left:0; right:0; bottom:.6rem; z-index:3;
  display:flex; gap:.35rem; justify-content:center; }
.pcard-slider__dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.6);
  box-shadow:0 0 0 1px rgba(20,54,66,.25); transition:background .2s,transform .2s; cursor:pointer; }
.pcard-slider__dot.is-active{ background:#fff; transform:scale(1.25); }

/* щенки на продажу — карточки */
.pup-card__meta{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.pup-card__desc{ font-size:.92rem; }

/* карта на сайте (контакты) */
.contact__map{ margin-top:1.2rem; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--line); }
.contact__map iframe{ display:block; width:100%; border:0; }

/* раскрывающаяся карточка блога */
.post--card details summary{ list-style:none; cursor:pointer; }
.post--card details summary::-webkit-details-marker{ display:none; }
.post--card details[open] summary{ margin-bottom:.4rem; }

/* ============================================================ АДАПТИВ */
@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr; }
  .about,.contact{ grid-template-columns:1fr; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .features{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ columns:3 180px; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .hero__slider{ height:clamp(200px,56vw,320px); }
  .menu-btn{ display:block; }
  .nav{ position:fixed; inset:64px 0 auto 0; background:#fff; border-bottom:1px solid var(--line); transform:translateY(-120%); transition:transform .3s; box-shadow:var(--shadow); margin:0; padding:1rem; max-height:calc(100vh - 64px); overflow:auto; }
  .menu-open .nav{ transform:none; }
  .nav ul{ flex-direction:column; gap:.2rem; }
  .nav a{ padding:.8rem 1rem; }
  .header-cta{ display:none; }
  .grid--3,.grid--4{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .gallery-grid{ columns:2 140px; }
  /* выпадающее меню «Старые сайты» внутри мобильной панели — как обычный блок */
  .nav__sub-toggle{ width:100%; justify-content:space-between; padding:.8rem 1rem; }
  .nav__sub{ position:static; box-shadow:none; border:0; border-left:2px solid var(--teal-lt);
    border-radius:0; margin:.2rem 0 .2rem .6rem; min-width:0; padding:0 0 0 .4rem; }
  .hslide,.hslide--pup{ width:78%; }
  .hslider__nav--prev{ left:2px; } .hslider__nav--next{ right:2px; }
}
@media (max-width:480px){
  .grid--3,.grid--4,.grid--2,.features{ grid-template-columns:1fr; }
  .hero__cta .btn{ width:100%; justify-content:center; }
}