/* Gzhel and Khokhloma share one layout and independent generated illustrations. */
:root {
  color-scheme: light;
  --page: #fff;
  --ornament: url('/assets/flower.webp');
}
:root[data-theme='khokhloma'] {
  color-scheme: dark;
  --page: #17130f;
  --blue: #f2ce87;
  --deep: #ffdfaa;
  --pale: #241c15;
  --ink: #ede1c9;
  --muted: #baa98a;
  --line: #57452c;
  --gold: #e05b42;
  --ornament: url('/assets/flower-khokhloma.webp');
}
body { background: var(--page); transition: background-color .25s, color .25s; }
.theme-picture { display: block; max-width: 100%; }
.theme-picture > img { width: 100%; }
[data-theme='gzhel'] .theme-khokhloma,
[data-theme='khokhloma'] .theme-gzhel { display: none !important; }
.hero::after { background-image: var(--ornament); }
.theme-khokhloma[src$='hero-khokhloma.webp'] {
  /* Blend the generated studio backdrop at the edge without tinting the objects. */
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
.header-actions { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 126px;
  min-height: 46px;
  padding: 10px 15px;
  border: 1px solid var(--blue);
  border-radius: 28px;
  background: transparent;
  font: 500 13px/1.4 var(--sans);
  color: var(--blue);
  transition: background-color .25s, color .25s;
}
.theme-toggle:hover { background: var(--pale); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-icon-moon { display: none; }
[data-theme='khokhloma'] .theme-icon-moon { display: block; }
[data-theme='khokhloma'] .theme-icon-sun { display: none; }
.page-head.with-image > .theme-picture { width: 100%; max-height: 440px; }
.page-head.with-image > .theme-picture img { width: 100%; max-height: inherit; object-fit: contain; }
.site-header .desktop-nav { gap: 26px; }

/* Dark materials, readable surfaces, and state colors. Source certificates stay intact. */
[data-theme='khokhloma'] .hero p { color: var(--ink); }
[data-theme='khokhloma'] .primary,
[data-theme='khokhloma'] .tabs button[aria-selected='true'] {
  background: var(--blue);
  color: #17130f;
}
[data-theme='khokhloma'] .primary:hover,
[data-theme='khokhloma'] .tabs button[aria-selected='true']:hover { background: var(--deep); }
[data-theme='khokhloma'] .tabs button { background: var(--page); }
[data-theme='khokhloma'] .tabs button:hover { background: #322519; }
[data-theme='khokhloma'] .menu-toggle,
[data-theme='khokhloma'] .mobile-nav,
[data-theme='khokhloma'] .skip-link { background: var(--page); }
[data-theme='khokhloma'] .cta { background: #311913; color: var(--ink); }
[data-theme='khokhloma'] .cta h2 { color: var(--blue); }
[data-theme='khokhloma'] .cta .white { background: var(--blue); color: #17130f; }
[data-theme='khokhloma'] .cta .white:hover { background: var(--deep); }
[data-theme='khokhloma'] .cta-flower { background: #241810; }
[data-theme='khokhloma'] dialog { background: var(--page); color: var(--blue); }
[data-theme='khokhloma'] dialog::backdrop { background: rgb(0 0 0 / .7); }
[data-theme='khokhloma'] input:not([type='checkbox']),
[data-theme='khokhloma'] select,
[data-theme='khokhloma'] textarea { background: #211a14; color: var(--ink); }
[data-theme='khokhloma'] input::placeholder,
[data-theme='khokhloma'] textarea::placeholder { color: var(--muted); opacity: 1; }
[data-theme='khokhloma'] ::selection { background: #61472c; color: #fff1cf; }

@media (min-width: 1201px) {
  .site-header .brand b { font-size: 45px; }
  .site-header .brand img { width: 82px; height: 82px; }
  .site-header .brand small { font-size: 9px; }
  .site-header .desktop-nav { font-size: 16px; }
  .site-header .cabinet { font-size: 13px; padding-inline: 17px; }
}
@media (max-width: 1200px) {
  .header-actions { gap: 11px; }
  .theme-toggle { min-width: 44px; width: 44px; min-height: 44px; padding: 10px; }
  .theme-name { display: none; }
}
@media (max-width: 900px) {
  .header-actions { gap: 12px; }
}
@media (max-width: 640px) {
  .site-header { gap: 12px; }
  .site-header .brand { gap: 7px; }
  .site-header .brand img { width: 46px; height: 46px; }
  .site-header .brand b { font-size: 28px; }
  .site-header .brand small { font-size: 5.7px; }
  .page-head.with-image > .theme-picture { max-width: 360px; max-height: 340px; }
}
@media (max-width: 359px) {
  .site-header .brand img { width: 36px; height: 36px; }
  .site-header .brand b { font-size: 24px; }
  .site-header .brand small { font-size: 5px; letter-spacing: .18em; }
  .site-header .header-actions { gap: 9px; }
}