/* «Сёма» - сказочная книжка. Base: fonts, tokens, reset, riso SVG strokes, buttons, header, footer. */

@font-face {
  font-family: "Neucha";
  src: url("/static/fonts/neucha.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/static/fonts/nunito-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
/* metric-compatible fallbacks: text keeps its size while the web fonts load (no layout shift) */
@font-face {
  font-family: "Nunito Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto"), local("Helvetica");
  size-adjust: 96.7%;
  ascent-override: 104.6%;
  descent-override: 36.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Neucha Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto"), local("Helvetica");
  size-adjust: 83.3%;
  ascent-override: 92.3%;
  descent-override: 34.3%;
  line-gap-override: 5.8%;
}

:root {
  --paper: #FBF5E9;
  --paper-2: #FFFBF2;
  --tint: #EEF2DE;
  --green: #5E7D2A;
  --green-deep: #33471A;
  --sage: #B7CF94;
  --terracotta: #E07A3F;
  --pumpkin: #F2A65A;
  --peach: #FBD9B5;
  --rust: #9C4A1A;
  --frog: #8DB654;
  --ink: #2D2A26;
  --ink-soft: #5A544C;
  --line-soft: #D8CDB8;
  --header-h: 52px;

  --font-hand: "Neucha", "Neucha Fallback", "Comic Sans MS", cursive;
  --font-body: "Nunito", "Nunito Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-h1: clamp(2.4rem, 1.4rem + 3.6vw, 4.3rem);
  --text-h1-page: clamp(2.2rem, 1.4rem + 2.8vw, 3.7rem);
  --text-h2: clamp(2rem, 1.35rem + 2.3vw, 3.1rem);
  --space-section: clamp(40px, 2rem + 2.5vw, 76px);
  --gutter: 16px;

  --radius-hand: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --radius-hand-2: 18px 225px 18px 255px / 255px 18px 225px 18px;
  --radius-field: 14px 18px 12px 20px / 18px 12px 20px 14px;
  --shadow-riso: 6px 6px 0 var(--sage);
  --shadow-photo: 0 10px 22px rgba(45, 42, 38, .12);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ko: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }

/* no overflow on html: it would break position: sticky of the header */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* clip, not hidden: hidden breaks position: sticky of the header */
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--green-deep); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--rust); }
h1, h2, h3 { font-family: var(--font-hand); font-weight: 400; line-height: 1.1; color: var(--green-deep); margin: 0 0 .4em; text-wrap: balance; }
p { margin: 0 0 1em; }
p, li, dd, figcaption { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
/* body's overflow-x is propagated to the viewport, and mobile Chrome still widens the layout viewport for
   overflowing content (not yet revealed .reveal cards are rotated past the right edge), so clip inside main too */
main { overflow-x: clip; }
main:focus { outline: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--green-deep); color: var(--paper); border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 12px; color: var(--paper); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* ---------- SVG strokes (riso: ink outline + offset fill) ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ko { fill: var(--ko); }
/* Riso fill drawn by hand: small shift + tilt and wobbly edges, so it reads as a print, not a bug. */
.off { transform-box: fill-box; transform-origin: center; transform: translate(1.5px, 2px) rotate(-1.2deg); filter: url(#hand-fill); }
.ln, .ln-thin { filter: url(#hand-line); }
.ln.no-wobble { filter: none; }
@media (max-width: 719px) { .ln, .ln-thin { filter: none; } }
@media (prefers-reduced-data: reduce) { .off, .ln, .ln-thin { filter: none; } }
.bf-vein { fill: none; stroke: var(--ink); stroke-width: .7; stroke-linecap: round; opacity: .55; }
.ln { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ln-thin { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ln.ln-thin { fill: none; }
.ln.ln-q { stroke-width: 4.2; }
.ln-o { fill: none; stroke: var(--pumpkin); stroke-width: 5; stroke-linecap: round; }
.f-cream { fill: #F3E3C8; }
.f-light { fill: #FFF8EC; }
.f-pink { fill: #F4B79C; }
.f-peach { fill: var(--peach); }
.f-orange { fill: var(--terracotta); }
.f-pumpkin { fill: var(--pumpkin); }
.f-brown { fill: #9A5A2C; }
.f-green { fill: var(--green); }
.f-sage { fill: var(--sage); }
.f-ink { fill: var(--ink); }
.f-white { fill: #fff; }
.cheek { fill: var(--terracotta); opacity: .4; }
.glass { fill: #fff; fill-opacity: .18; stroke: var(--ink); stroke-width: 3; }
.leafy { stroke: var(--green); stroke-width: 4; }
.claws { fill: none; stroke: var(--rust); stroke-width: 3; stroke-linecap: round; }
.f-frog { fill: var(--frog); }
.f-belly { fill: #E6F0C6; }
.fr-cheek { fill: #F59A86; opacity: .75; }
.f-owl { fill: #A86F43; }
.f-owl-dark { fill: #6E4428; }
.f-owl-belly { fill: #E9CFA6; }
.f-owl-face { fill: #F5E3C4; }
.owl-marks { fill: none; stroke: #6E4428; }
.rb { fill: none; stroke-width: 8; }
.rb-1 { stroke: var(--terracotta); }
.rb-2 { stroke: var(--pumpkin); }
.rb-3 { stroke: #F4DD8B; }
.rb-4 { stroke: var(--sage); }
.path-dash { stroke-dasharray: 2 12; stroke-width: 3.2; }
.map-road { fill: none; stroke: var(--ink); stroke-width: 24; stroke-linecap: round; }
.map-road-mid { fill: none; stroke: var(--paper-2); stroke-width: 19; stroke-linecap: round; }

/* ---------- Buttons ---------- */
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  font: 700 1rem/1.2 var(--font-body); text-decoration: none; text-align: center;
  border: 2px solid var(--ink); border-radius: var(--radius-hand);
  cursor: pointer;
  transition-property: transform, box-shadow, background-color, color;
  transition-duration: .2s;
  transition-timing-function: var(--ease);
  touch-action: manipulation;
}
.btn:focus-visible { outline-color: var(--ink); outline-offset: 4px; border-radius: var(--radius-hand); }
.btn-primary { background: var(--green-deep); color: var(--paper); box-shadow: 4px 4px 0 var(--pumpkin); }
.btn-primary:hover { color: var(--paper); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pumpkin); }
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--pumpkin); }
.btn-ghost { background: var(--paper-2); color: var(--ink); box-shadow: 4px 4px 0 var(--sage); }
.btn-ghost:hover { color: var(--ink); background: #fff; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sage); }
.btn-ghost:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sage); }
.btn-wide { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { cursor: progress; opacity: .75; transform: none; }
@media (max-width: 519px) { .btn { white-space: normal; } }

/* ---------- Announcement ---------- */
.announce { background: var(--green-deep); color: var(--paper); font-weight: 700; font-size: .95rem; text-align: center; padding-block: 8px; }
.announce p { margin: 0; }
.announce a { color: #F9C58E; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  padding-block: 6px;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 12px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 2 Q15 10 30 4 T60 4 T90 4 T120 2 V0 H0Z' fill='%23FBF5E9'/%3E%3Cpath d='M0 2 Q15 10 30 4 T60 4 T90 4 T120 2' fill='none' stroke='%232D2A26' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 12px;
}
.header-inner { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; border-radius: 12px; }
.logo:hover { color: var(--ink); }
.logo-mark { width: 50px; height: 44px; flex: none; overflow: visible; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name { font-family: var(--font-hand); font-size: 1.75rem; color: var(--green-deep); margin: 0; }
.logo-sub { font-size: .8rem; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 16px; }
.nav ul { display: flex; gap: 4px; }
.nav a:not(.btn) {
  display: block; white-space: nowrap; padding: 8px 12px; text-decoration: none; font-weight: 700; color: var(--ink);
  border-radius: var(--radius-hand);
  transition: background-color .2s, color .2s;
}
.nav a:not(.btn):hover { background: var(--tint); color: var(--green-deep); }
.nav a[aria-current="page"] {
  color: var(--green-deep);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C40 3 80 12 120 6 S180 4 197 8' fill='none' stroke='%23E07A3F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center bottom 4px / calc(100% - 24px) 7px;
}
.nav-cta { min-height: 42px; padding: 8px 18px; }
.nav-contacts { display: none; }

.header-phone {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; line-height: 1.2;
  text-decoration: none; font-weight: 800; color: var(--green-deep); white-space: nowrap; font-variant-numeric: tabular-nums;
  border-radius: 8px;
}
.hp-label { font-size: .75rem; font-weight: 600; color: var(--ink-soft); }
.header-call {
  display: none; place-items: center; width: 48px; height: 48px; flex: none;
  background: var(--pumpkin); color: var(--ink); border: 2px solid var(--ink); border-radius: 50% 46% 54% 48% / 52% 48% 50% 46%;
  box-shadow: 2px 2px 0 var(--ink);
}
.header-call svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.header-call:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

.burger {
  display: none; width: 48px; height: 48px; padding: 12px 10px; flex: none;
  background: var(--paper-2); border: 2px solid var(--ink); border-radius: var(--radius-hand);
  cursor: pointer; flex-direction: column; justify-content: space-between;
}
.burger span { display: block; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* Desktop: logo, menu, CTA and phone+hours share one row inside .wrap (1116px of content at 1180, 1136px from 1200 on).
   The items are nowrap and cannot shrink, so their sum must stay below that or the phone is pushed off-screen. */
@media (min-width: 1180px) {
  .header-inner { gap: 16px; }
  .logo, .header-phone { flex: none; }
  .nav { gap: 12px; }
  .nav ul { gap: 2px; }
  .nav a:not(.btn) { padding: 8px 10px; font-size: 1rem; }
  .nav a[aria-current="page"] { background-size: calc(100% - 20px) 7px; }
  .nav-cta { padding: 8px 16px; }
  .header-phone { font-size: 1.0625rem; }
}
/* 1180-1279 (also a 1280 window with a classic scrollbar): the wrap is narrower than 1200, keep a safety margin. */
@media (min-width: 1180px) and (max-width: 1279px) {
  .nav ul { gap: 0; }
  .nav a:not(.btn) { padding-inline: 8px; }
  .nav a[aria-current="page"] { background-size: calc(100% - 16px) 7px; }
}

@media (max-width: 1179px) {
  .burger { display: flex; }
  .nav {
    position: fixed; left: 0; right: 0; top: calc(var(--header-h) + 12px);
    flex-direction: column; align-items: stretch; gap: 16px;
    max-height: calc(100dvh - var(--header-h) - 12px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    padding: 24px var(--gutter) 32px;
    background: var(--paper); border-bottom: 2px solid var(--ink);
    box-shadow: 0 14px 24px rgba(45, 42, 38, .12);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav ul { flex-direction: column; }
  .nav a:not(.btn) { font-family: var(--font-hand); font-size: 1.6rem; font-weight: 400; padding: 6px 4px; }
  .nav a[aria-current="page"] { background-position: left 4px bottom 4px; background-size: 120px 7px; }
  .nav-contacts { display: flex; flex-direction: column; gap: 2px; margin: 0; font-weight: 600; color: var(--ink-soft); }
  .nav-contacts a:not(.btn) { font-family: var(--font-body); font-size: 1.25rem; font-weight: 800; color: var(--green-deep); padding: 0; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 599px) {
  .header-phone { display: none; }
  .header-call { display: grid; }
  .header-inner { gap: 10px; }
  .logo-mark { width: 44px; height: 39px; }
}
@media (max-width: 359px) { .logo-sub { display: none; } }

/* ---------- Hand-drawn underline ---------- */
.scribble {
  padding-bottom: .08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C40 3 80 12 120 6 S180 4 197 8' fill='none' stroke='%23E07A3F' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% .32em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Shared text pieces ---------- */
.kicker { display: inline-block; font-weight: 700; font-size: .95rem; color: var(--rust); background: var(--peach); padding: 4px 14px; border-radius: var(--radius-hand); margin-bottom: 20px; }
.lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); max-width: 34em; color: var(--ink-soft); }

.crumbs { margin-bottom: 18px; font-size: .9rem; font-weight: 600; color: var(--ink-soft); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before {
  content: ""; width: 22px; height: 10px; margin-inline: 6px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 12'%3E%3Cpath d='M2 6 H26 M20 2 C26 2 30 4 34 6 C30 8 26 10 20 10' fill='none' stroke='%239C4A1A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.crumbs a { color: var(--green-deep); text-decoration: none; border-bottom: 1.5px dashed currentColor; }
.crumbs a:hover { color: var(--rust); }
.crumbs [aria-current="page"] { color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer { position: relative; margin-top: 40px; padding-block: 56px 40px; background: var(--green-deep); color: var(--paper); --ko: var(--green-deep); }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -21px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22' preserveAspectRatio='none'%3E%3Cpath d='M0 22 V12 C20 2 40 18 60 10 S100 2 120 12 S150 16 160 8 V22 Z' fill='%2333471A'/%3E%3C/svg%3E") repeat-x 0 0 / 320px 22px;
}
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.25fr 1fr 1fr 1fr; } }
.footer-grid p { margin: 0 0 6px; }
.site-footer a { color: #F9C58E; text-decoration-color: rgba(249, 197, 142, .45); }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: #F9C58E; }
.footer-brand { display: flex; gap: 14px; align-items: center; align-self: start; }
.footer-brand .logo-name { color: var(--paper); font-size: 2.2rem; }
.footer-mark { width: 76px; height: 67px; flex: none; overflow: visible; }
.site-footer .footer-mark { --ko: var(--paper); }
.footer-title { font-family: var(--font-hand); font-size: 1.4rem; color: var(--pumpkin); }
.footer-phone { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.footer-nav ul { display: grid; gap: 4px; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.socials { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }
.socials a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; text-decoration: none; font-weight: 700; border: 1.5px solid currentColor; border-radius: var(--radius-hand); }
.socials-ink a { color: var(--green-deep); background: var(--paper-2); }
.socials-ink a:hover { color: var(--rust); }
.copyright { margin-top: 14px !important; opacity: .85; }