/* =====================================================================
   Public site styles — memorial archive of Academician A. D. Dauletov
   Style: modern bank-like UI (clean white pages, light-grey panels, large rounded cards,
          bold sans-serif headings) with gold as the brand accent instead of yellow.
   Colours: ink #1C1A17 text; gold #B8913A primary accent (buttons, active states, ornament);
            dark gold #9A7629 hover and gold text; light gold #F3E9D2 tinted banners;
            garnet #8A1C24 only for small secondary marks; grey #F5F4F1 panels; white page.
   Type:   Inter only (covers Karakalpak Latin and Cyrillic), extrabold headings with tight tracking.
   Ornament (kept minimal): logo, thin band under the header, watermark on banners, small dividers.
   Motion: only in answer to an action (menu, lightbox, vowel chart, hover colour).
   ===================================================================== */
:root {
  --kk-navy: #1C1A17;
  --kk-navy-deep: #12100E;
  --kk-gold: #B8913A;
  --kk-gold-dark: #9A7629;
  --kk-gold-light: #F3E9D2;
  --kk-crimson: #8A1C24;
  --kk-turquoise: #9A7629;
  --kk-grey: #F5F4F1;
  --kk-line: #E7E5E0;
  --kk-paper: #FFFFFF;
  --kk-ink: #1C1A17;
}

html { scroll-behavior: smooth; }
body { background-color: var(--kk-paper); color: var(--kk-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -0.015em; }

/* ---- Thin ornament band under the header ---- */
.kk-band {
  height: 14px;
  background-color: var(--kk-paper);
  background-image: url("../svg/band.26ea40209d56.svg");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 14px;
  border-bottom: 1px solid var(--kk-line);
}
/* Light-grey panel (breadcrumb strips, inner page sections). Formerly a patterned surface. */
.kk-pattern { background-color: var(--kk-grey); }

/* ---- Small ornament divider (used under titles on detail pages) ---- */
.kk-divider { display: flex; align-items: center; gap: .75rem; }
.kk-divider-line {
  flex: 1 1 0; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 20%, currentColor 80%, transparent);
  opacity: .5;
}

/* ---- Cards: white, large radius, hairline border, soft shadow on hover ---- */
.kk-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--kk-line);
  border-radius: 1.25rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}
a.kk-card:hover, .kk-card.is-link:hover {
  border-color: transparent;
  box-shadow: 0 10px 30px -12px rgba(28, 26, 23, .18);
}
.kk-corner { display: none; } /* ornament corners retired in the bank-style UI */

/* ---- Portrait: rounded photo, no heavy frame ---- */
.kk-frame { position: relative; border-radius: 1.5rem; }
.kk-frame-inner {
  position: relative; overflow: hidden; border-radius: 1.5rem;
  background: var(--kk-grey);
  box-shadow: 0 20px 50px -20px rgba(28, 26, 23, .35);
}

/* ---- Timeline ---- */
.kk-timeline { position: relative; }
.kk-timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 19px; width: 2px;
  background: var(--kk-gold-light);
}
@media (min-width: 768px) {
  .kk-timeline::before { left: 50%; transform: translateX(-1px); }
}
.kk-tl-dot {
  width: 40px; height: 40px; border-radius: 9999px;
  display: grid; place-items: center;
  background: var(--kk-gold); color: var(--kk-navy);
  box-shadow: 0 0 0 6px var(--kk-paper);
}

/* ---- Rich text from DB ---- */
.kk-prose { max-width: 72ch; }
.kk-prose p { margin: 0 0 1rem; line-height: 1.75; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---- Vowel-harmony chart (home page) ---- */
.kk-vowels { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); align-items: center; gap: .5rem 1rem; }
.kk-vowels .row-label { font-size: .875rem; color: #78716c; padding-right: .5rem; }
.kk-vowel {
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.15; font-weight: 700; color: var(--kk-navy);
  border-radius: 1rem; transition: color .2s ease, background-color .2s ease;
}
.kk-vowel:hover { background: var(--kk-grey); }
.kk-vowel[aria-pressed="true"] { background: var(--kk-gold); color: var(--kk-navy); }
.kk-vowel.is-row { background: var(--kk-gold-light); color: var(--kk-gold-dark); }

/* ---- Masonry gallery ---- */
.kk-masonry { column-gap: 1rem; columns: 1; }
@media (min-width: 640px) { .kk-masonry { columns: 2; } }
@media (min-width: 1024px) { .kk-masonry { columns: 3; } }
@media (min-width: 1280px) { .kk-masonry { columns: 4; } }
.kk-masonry > * { break-inside: avoid; margin-bottom: 1rem; }

/* ---- Lightbox ---- */
.kk-lightbox { position: fixed; inset: 0; z-index: 80; display: none; }
.kk-lightbox.is-open { display: flex; }

/* ---- Book cover placeholder: flat colour with a faint ornament watermark ---- */
.kk-cover {
  aspect-ratio: 3 / 4;
  background-color: var(--kk-navy);
  background-image: url("../svg/pattern.b1a0334cee8c.svg");
  background-size: 90px 90px;
}
.kk-cover.cat-textbook_uni, .kk-cover.cat-textbook_school { background-color: var(--kk-gold-dark); }
.kk-cover.cat-article, .kk-cover.cat-dissertation { background-color: #3A332B; }
.kk-cover.cat-edited { background-color: #6B5528; }

/* ---- Family tree connectors ---- */
.kk-gen { position: relative; }
.kk-gen + .kk-gen::before {
  content: ""; position: absolute; top: -2.5rem; left: 50%; height: 2.5rem; width: 2px;
  background: var(--kk-gold-light);
  transform: translateX(-1px);
}

/* ---- Separators between plain text blocks ---- */
.kk-rule { border-top: 1px solid var(--kk-line); padding-top: 1rem; }

.kk-focus:focus-visible { outline: 2px solid var(--kk-gold); outline-offset: 3px; }
::selection { background: var(--kk-gold-light); color: var(--kk-navy); }

/* ---- Round photos: keep the head in frame (portraits are taller than the circle) ---- */
.object-top { object-position: center top; }

/* ===================================================================
   Home hero: warm cream gradient, faint Karakalpak lattice on the right,
   soft wave at the bottom, serif name, gold buttons, framed portrait
   =================================================================== */
.kk-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 70% at 72% 40%, rgba(255, 251, 242, .95) 0%, rgba(255, 251, 242, 0) 70%),
    linear-gradient(120deg, #FBF6EC 0%, #F7EDDA 50%, #F2E3C6 100%);
}
.kk-hero-pattern {
  position: absolute; inset: 0 0 0 45%; z-index: -1; pointer-events: none; overflow: hidden;
  opacity: .11;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 95%);
          mask-image: linear-gradient(to left, #000 35%, transparent 95%);
}
.kk-hero-wave {
  position: absolute; left: 0; bottom: 0; z-index: -1; pointer-events: none;
  width: 100%; height: 9rem;
}
.kk-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem 1rem; border-radius: 999px;
  border: 1px solid rgba(184, 145, 58, .5); background: rgba(255, 255, 255, .55);
  color: #4A3D24; font-size: .875rem; font-weight: 600; letter-spacing: .01em;
}
.kk-pill svg { width: 1.05rem; height: 1.05rem; color: var(--kk-gold-dark, #9A7629); }
.kk-hero-title {
  margin-top: 1.5rem;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700; font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.05; letter-spacing: -.01em;
  color: #1C1A17;
}
.kk-hero-rule {
  display: block; width: 5.5rem; height: 2px; margin-top: 1.5rem; border-radius: 2px;
  background: linear-gradient(90deg, #B8913A, rgba(184, 145, 58, 0));
}
.kk-btn {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .95rem 1.35rem; border-radius: .9rem;
  font-weight: 600; line-height: 1.2;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease;
}
.kk-btn svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.kk-btn .kk-btn-chevron { width: 1rem; height: 1rem; margin-left: .35rem; transition: transform .15s ease; }
.kk-btn:hover { transform: translateY(-1px); }
.kk-btn:hover .kk-btn-chevron { transform: translateX(2px); }
.kk-btn-gold {
  color: #fff;
  background: linear-gradient(180deg, #BC9644 0%, #8F6C25 100%);
  box-shadow: 0 10px 24px -10px rgba(143, 108, 37, .75), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.kk-btn-gold:hover { filter: brightness(1.06); }
.kk-btn-outline {
  color: #1C1A17; background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(184, 145, 58, .5);
  box-shadow: 0 6px 18px -12px rgba(120, 90, 30, .45);
}
.kk-btn-outline svg { color: #9A7629; }
.kk-btn-outline:hover { background: #fff; }
.kk-hero-portrait {
  position: relative; width: 100%; max-width: 17rem; margin: 1.25rem auto 0;
}
.kk-hero-photo {
  aspect-ratio: 4 / 5; padding: 6px; border-radius: 1.5rem;
  background: linear-gradient(180deg, #FFFFFF, #F4E7CC);
  box-shadow: 0 35px 60px -28px rgba(110, 80, 25, .55), 0 0 0 1px rgba(184, 145, 58, .25);
}
.kk-hero-photo > img, .kk-hero-photo > div {
  width: 100%; height: 100%; border-radius: 1.15rem; object-fit: cover; object-position: center top;
}
@media (min-width: 640px) { .kk-hero-portrait { max-width: 20rem; } }
@media (min-width: 1024px) {
  .kk-hero-portrait { max-width: 21rem; margin: 1.5rem 1.5rem 0 auto; }
}
@media (max-width: 639px) {
  .kk-hero-wave { width: 100%; height: 6rem; }
  .kk-hero-pattern { inset: 0; opacity: .07; }
  .kk-btn { padding: .85rem 1.1rem; }
}
.kk-hero-inner { padding-top: 3rem; padding-bottom: 4rem; }
.kk-hero-actions { margin-top: 2.25rem; }
@media (min-width: 1024px) { .kk-hero-inner { padding-top: 5rem; padding-bottom: 5.5rem; } }
.kk-hero-orn { position: absolute; max-width: none; }
.kk-hero-orn-1 { right: -6rem; top: -5rem; width: 34rem; }
.kk-hero-orn-2 { right: 10rem; bottom: -14rem; width: 26rem; }