:root {
  --accent: #5b8def;
  --bg: #070a12;
  --text: #eef0f4;
  --text-muted: #aeb6c4;
  --text-faint: #8189a0;
  --panel: #0c1322;
  --border-faint: rgba(255, 255, 255, 0.08);
  --border-row: rgba(255, 255, 255, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Spectral', serif;
  min-height: 100vh;
}

input::placeholder {
  color: #5b647c;
}

@keyframes kh-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes kh-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes kh-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes kh-cue {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(9px); opacity: 1; }
}

.kh-link {
  transition: color 0.2s;
}

.kh-link:hover {
  color: var(--text) !important;
}

.kh-btn {
  transition: filter 0.2s;
}

.kh-btn:hover {
  filter: brightness(1.08);
}

.kh-ghost {
  transition: border-color 0.2s, color 0.2s;
}

.kh-ghost:hover {
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: var(--text) !important;
}

.kh-row {
  position: relative;
  transition: background 0.2s;
}

.kh-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.kh-row:hover .kh-tix {
  color: var(--text) !important;
  border-color: var(--text) !important;
}

.kh-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.kh-row:hover::before {
  width: 3px;
}

.kh-rowin {
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.kh-row:hover .kh-rowin {
  transform: translateX(10px);
}

.kh-gimg {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s;
}

.kh-gcell:hover .kh-gimg {
  transform: scale(1.06);
  filter: none;
}

.kh-strip-item {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.kh-strip-item:hover {
  flex-grow: 2.6;
}

.kh-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.kh-reveal.kh-in {
  opacity: 1;
  transform: none;
}

.kh-rule {
  width: 54px;
  height: 1px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Must match the fixed Header height in components/Header.tsx so anchor
   jumps land the section flush under the header — any smaller value leaves
   a strip of the previous section visible above the target. */
#home,
#afisha,
#gallery,
#about,
#contacts {
  scroll-margin-top: 78px;
}

/* --- Library (/sheets) ---
   These rows are server-rendered ~490 times, so their styling lives here as
   classes rather than inline. Inline styles would repeat every declaration per
   row and blow the page up by roughly 6x. The rest of the site keeps the
   inline-style + !important-override pattern; this is the list-row exception. */
@keyframes kh-menu {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Shared 5-column track, used by the column header and every row. */
.kh-lib-cols {
  display: grid;
  grid-template-columns: 1fr 96px 120px 130px 190px;
  align-items: center;
  gap: 16px;
}

.kh-lib-head-row {
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--border-row);
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  animation: kh-rise 0.7s both 0.3s;
}

.kh-lib-row {
  padding: 15px 14px;
  border-bottom: 1px solid var(--border-faint);
  border-radius: 4px;
  transition: background 0.15s;
  /* The whole row opens the PDF; the actions column reverts to the default. */
  cursor: pointer;
}
.kh-lib-actions { cursor: default; }
.kh-lib-row:hover { background: rgba(255, 255, 255, 0.04); }
/* Filtered out by the client search — display:none loses to nothing here
   because the row's layout comes from a class, not an inline style. */
.kh-lib-row[hidden] { display: none; }

.kh-lib-main { min-width: 0; }

.kh-lib-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kh-lib-title a { color: inherit; text-decoration: none; }
.kh-lib-row:hover .kh-lib-title a { color: var(--accent); }

.kh-lib-sub {
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.kh-lib-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(91, 141, 239, 0.45);
  border-radius: 20px;
  padding: 2px 9px;
}

.kh-lib-cell-meta {
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  color: var(--text-faint);
}
.kh-lib-cell-meta--strong {
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.kh-lib-actions { position: relative; display: flex; justify-content: flex-end; }

.kh-dlgroup {
  display: flex;
  align-items: stretch;
  border-radius: 30px;
  border: 1px solid rgba(91, 141, 239, 0.45);
  overflow: hidden;
}

.kh-dl {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 8px 14px;
  color: #cfe0ff;
  background: rgba(91, 141, 239, 0.12);
}
.kh-dl:hover { background: rgba(91, 141, 239, 0.22); color: #eaf1ff; }

.kh-cv {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  border: none;
  border-left: 1px solid rgba(91, 141, 239, 0.4);
  color: #9fb6e8;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  background: rgba(91, 141, 239, 0.12);
}
.kh-cv:hover { background: rgba(91, 141, 239, 0.22); color: #eaf1ff; }

.kh-lib-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--border-row);
  background: #0e1626;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  animation: kh-menu 0.14s ease both;
}
.kh-lib-menu[hidden] { display: none; }

.kh-lib-menu-title {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 5px 12px 7px;
}

.kh-mi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-decoration: none;
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 6px;
  color: #dfe4ee;
  transition: background 0.12s;
}
.kh-mi:hover { background: rgba(255, 255, 255, 0.06); }
.kh-mi-ext { color: var(--text-faint); font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; }
.kh-mi-arrow { color: var(--accent); font-size: 12px; }

/* Shown by the client only when a search matches nothing. */
.kh-lib-empty {
  text-align: center;
  padding: 120px 20px;
  color: var(--text-faint);
  font-family: 'Manrope', sans-serif;
}
.kh-lib-empty[hidden] { display: none; }
.kh-lib-empty-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  color: var(--text-faint);
  margin-bottom: 10px;
}

/* --- Gallery grid (also server-rendered per photo) --- */
.kh-gcell {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 3px;
  background: var(--panel);
}
.kh-ggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kh-gcell .kh-gimg { width: 100%; aspect-ratio: 3 / 2; background-size: cover; background-position: center; filter: saturate(0.92); }
.kh-strip-item .kh-gimg { width: 100%; height: 100%; aspect-ratio: auto; }

.kh-gmonth {
  position: sticky;
  top: 63px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0 14px;
  margin-bottom: 4px;
  background: var(--bg);
}
.kh-gmonth-label {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.kh-gmonth-rule { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }
.kh-gmonth-count { font-family: 'Manrope', sans-serif; font-size: 12px; color: var(--text-faint); white-space: nowrap; }

/* --- Mobile (<=768px) --- */
@media (max-width: 768px) {
  /* Library: 5-col table can't fit a phone — drop the middle meta columns,
     keep the title + download control. */
  .kh-lib-head { padding: 60px 22px 22px !important; }
  .kh-lib-body { padding: 6px 22px 100px !important; }
  .kh-lib-cols { grid-template-columns: 1fr auto !important; }
  .kh-lib-cell-meta { display: none !important; }

  /* Section content wrappers shrink horizontal padding so 320–480px viewports
     don't squeeze the body copy against the edges. */
  .kh-section { padding: 48px 22px 64px !important; }
  .kh-section-head { padding: 48px 22px 8px !important; }
  .kh-gallery-head { padding: 60px 22px 24px !important; }
  .kh-gallery-body { padding: 14px 22px 80px !important; }
  .kh-achievements-wrap { padding: 60px 22px 72px !important; }
  .kh-footer-inner { padding: 48px 22px 40px !important; gap: 24px !important; }

  /* Hero: fixed bg jitters on iOS Safari; let the bg scroll with content.
     Trim the bottom-anchored padding so CTAs sit inside the viewport. */
  .kh-hero-bg { background-attachment: scroll !important; }
  .kh-hero-inner { padding: 0 22px !important; bottom: 36px !important; }
  .kh-hero-title { white-space: normal !important; }
  .kh-hero-cta { gap: 10px !important; }
  .kh-hero-cta a { padding: 13px 20px !important; font-size: 12px !important; letter-spacing: 1.2px !important; }

  /* Header: 5 nav items at 28px gap overflow narrow screens. Tighten + shrink. */
  #kh-nav-bar { padding: 12px 16px !important; }
  .kh-nav-items { gap: 14px !important; font-size: 12px !important; flex-wrap: wrap !important; justify-content: center !important; }

  /* About: 2-col splits collapse to single column, swap order so image follows text. */
  .kh-split { grid-template-columns: 1fr !important; }
  .kh-split--reverse .kh-split-image { order: 2; }
  .kh-split-panel { padding: 56px 22px !important; }
  .kh-split-image { min-height: 320px !important; }
  .kh-panel-title { font-size: 36px !important; }

  /* Achievements: 3-col → stack. Year glyph scales down to keep one line. */
  .kh-achievements { grid-template-columns: 1fr !important; gap: 36px !important; }
  .kh-achievement-year { font-size: 46px !important; }

  /* Gallery strip: horizontal flex with hover-grow becomes a vertical stack;
     fixed 380px height looks comical on phones. */
  .kh-gallery-strip { flex-direction: column !important; height: auto !important; gap: 6px !important; }
  .kh-gallery-strip > * { min-height: 180px !important; }
  .kh-strip-item:hover { flex-grow: 1 !important; }
}

/* --- Phone (<=480px) extra trims --- */
@media (max-width: 480px) {
  .kh-nav-items { gap: 10px !important; font-size: 11px !important; }
  .kh-hero-inner { bottom: 28px !important; }
  .kh-hero-cta { flex-direction: column !important; width: 100% !important; }
  .kh-hero-cta a { width: 100% !important; justify-content: center !important; }
}