/* ═══════════════════════════════════════════════════════════════════════════
   HANZI DESIGN — UNIFIED STYLESHEET
   Single definitions, all rem, pure transitions, unified accent palette
   ═══════════════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. CUSTOM PROPERTIES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  --paper: #FDFBF7;
  --ink: #1A1A1A;
  --ink-soft: #4A4A4A;
  --subtle: #5A5A5A;
  --ink-ui: #747474;
  --panel: #FBFCF8;
  --cream: #FFFFFB;
  --jade: #0E7C66;
  --jade-dark: #0A5C4A;
  --vermillion: #D2412B;
  --gold: #BE9636;
  --hair: rgba(26, 26, 26, 0.13);
  --hair-strong: rgba(26, 26, 26, 0.22);
  --mute: #576159;
  --mute-light: #869085;
  --neon-jade: #2FE7AE;
  --neon-pink: #FF5C82;
  --border-light: rgba(26, 26, 26, 0.1);
  --border-medium: rgba(26, 26, 26, 0.2);
  --border-heavy: rgba(26, 26, 26, 0.3);
  --overlay-light: rgba(0, 0, 0, 0.03);
  --overlay-medium: rgba(255, 255, 255, 0.3);
  --accent: #F6D8C3;
  --font-hanzi: 'Noto Serif TC', serif;
  --font-editorial: 'EB Garamond', serif;
  --font-system: 'EB Garamond', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --topbar-height: 3.75rem;
  --breadcrumb-bar-height: 2.25rem;
  --char-size: 4rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. RESET & BASE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

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

html {
  font-size: 118%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-editorial);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.58;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

img, svg { display: block; }

ul, ol { list-style: none; }

button { font-family: inherit; cursor: pointer; background: none; border: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. TEXT SCALING (A+ toggle)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html.hzm-lg { font-size: 132%; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. ACCESSIBILITY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
  border-radius: 2px;
}

.hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. TOP BAR (navbar)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#hzm-top-bar {
  position: sticky; top: 0; z-index: 4999;
  height: var(--topbar-height);
  display: flex; align-items: center; gap: 1.125rem;
  padding: 0 1.625rem;
  background: rgba(253, 251, 247, 0.93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
}

.hzm-brand-link {
  order: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-right: 0.75rem;
  color: var(--ink);
  text-decoration: none;
}

.hzm-brand-link:hover .hzm-brand-name { color: var(--jade); }

.hzm-brand-mark {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  flex: 0 0 auto;
  border-radius: 0.4375rem;
  background: #fff;
  border: 1px solid var(--border-medium);
  color: #1a1a1a;
  font-family: var(--font-hanzi);
  font-size: 1.1875rem; font-weight: 900; line-height: 1;
}

.hzm-brand-name {
  font-family: var(--font-system);
  font-size: 1.1875rem; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.2s ease;
}

.hzm-nav {
  order: 2; margin-left: auto;
  display: flex; gap: 1.375rem; align-items: center;
}

.hzm-nav-item {
  padding: 0;
  font-family: var(--font-system);
  font-size: 1rem; font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--mute);
  transition: color 0.2s ease;
}

.hzm-nav-item:hover,
.hzm-nav-item.hzm-nav-active {
  color: var(--jade);
}

.hzm-top-bar-actions {
  order: 3;
  display: flex; align-items: center; gap: 0.75rem;
  margin-left: 0.75rem;
}

.hzm-search-btn {
  display: grid; place-items: center;
  width: 1.2rem; height: 1.2rem;
  color: var(--mute);
  border-radius: 0.25rem;
  transition: color 0.2s ease;
}

.hzm-search-btn:hover { color: var(--ink); }

.hzm-text-size-toggle {
  padding: 0.25rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 600;
  color: var(--mute);
  border: 1px solid var(--hair);
  border-radius: 0.25rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hzm-text-size-toggle:hover {
  color: var(--ink);
  border-color: var(--hair-strong);
}

.hzm-text-size-toggle sup { font-size: 0.5625rem; line-height: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. BREADCRUMB BAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#hzm-breadcrumb-bar,
.hzm-breadcrumb-bar {
  position: sticky; top: var(--topbar-height); z-index: 4998;
  display: none; align-items: center; gap: 0.55rem;
  padding: 0.45rem 1.625rem;
  background: rgba(253, 251, 247, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}

#hzm-breadcrumb-bar > *,
.hzm-breadcrumb-bar > * { pointer-events: auto; }

.hzm-breadcrumb-root {
  color: var(--jade); font-weight: 600;
  transition: color 0.2s ease;
}
.hzm-breadcrumb-root:hover { color: var(--ink); }

.hzm-breadcrumb-sep { opacity: 0.4; pointer-events: none; }

.hzm-breadcrumb-leaf { font-weight: 600; color: var(--ink); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. MAIN CONTENT WRAPPER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

main {
  width: 100%;
  max-width: 112.5rem;
  margin: 0 auto;
  padding: 0 1rem 4rem;
}

.hzm-canto-page { width: 100%; max-width: none; margin: 0; padding: 0 0 5rem; }
.hzm-home-page { width: 100%; max-width: none; margin: 0; padding: 0; }

.hzm-institute-wrap {
  max-width: 71.25rem;
  margin: 0 auto;
  padding: 0 1.625rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. HOMEPAGE GALLERY — INTRO + GRID
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Entrance animation */
.hzm-museum-intro-title,
.hzm-museum-intro-line {
  opacity: 0; transform: translateY(1rem);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

body.hzm-loaded .hzm-museum-intro-title,
body.hzm-loaded .hzm-museum-intro-line {
  opacity: 1; transform: translateY(0);
}

body.hzm-loaded .hzm-museum-intro-line:nth-child(2) { transition-delay: 0.1s; }
body.hzm-loaded .hzm-museum-intro-line:nth-child(3) { transition-delay: 0.2s; }
body.hzm-loaded .hzm-museum-intro-line:nth-child(4) { transition-delay: 0.3s; }

.hzm-museum-intro {
  max-width: 48rem;
  margin: 0 0 3rem;
}

.hzm-home-hero .hzm-museum-intro {
  margin-bottom: 0;
}

.hzm-museum-intro-title {
  font-family: var(--font-editorial);
  font-size: 2.25rem; font-weight: 300; line-height: 1.25;
  color: var(--ink);
}

.hzm-home-hero .hzm-museum-intro-title {
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  font-weight: 700;
  color: #E9EDE7;
}

.hzm-museum-intro-line {
  font-family: var(--font-editorial);
  font-size: 1.25rem; font-weight: 300; line-height: 1.5;
  color: var(--ink); opacity: 0.9;
}



.hzm-home-grid {
  max-width: 112.5rem;
  margin: 0 auto;
}

/* Gallery character grid */
.hzm-meaning-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 1.5rem;
  justify-items: center; align-items: center;
}

@media (min-width: 640px)  { .hzm-meaning-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .hzm-meaning-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .hzm-meaning-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1280px) { .hzm-meaning-grid { grid-template-columns: repeat(6, 1fr); } }

@keyframes mysticalFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

body.hzm-anim-pending #hzm-main-grid .hzm-char-door,
.hzm-char-door {
  opacity: 0; transform: scale(0.96) translateY(10px);
  position: relative;
  background: transparent; border: 0;
  color: var(--ink);
  font-family: var(--font-hanzi);
  font-size: var(--char-size); font-weight: 900; line-height: 1;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
              color 0.2s ease;
  will-change: opacity, transform;
}

body.hzm-loaded .hzm-char-door {
  opacity: 1; transform: scale(1) translateY(0);
}

body.hzm-loaded .hzm-char-door.hzm-char-animate {
  opacity: 0;
  animation: mysticalFadeIn 0.8s ease var(--delay, 0s) forwards;
}

.hzm-char-door:hover {
  transform: scale(1.05); z-index: 10;
  color: var(--ink);
}

.hzm-char-door::after {
  content: attr(data-hint);
  position: absolute;
  bottom: -1.5rem; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-editorial);
  font-size: 1.1rem; font-weight: 500;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1),
              transform 0.3s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}

.hzm-char-door:hover::after {
  opacity: 0.9;
  transform: translateX(-50%) translateY(-0.3125rem);
}

body.hzm-show-hints .hzm-char-door::after {
  opacity: 0.9;
  transform: translateX(-50%) translateY(-0.3125rem);
}

.hzm-concept-index-wrap {
  padding-top: 3rem;
}

.hzm-concept-explorer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.25rem;
  align-items: flex-end;
  margin-bottom: 3.5rem;
  padding: 1rem 0 1.25rem;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

.hzm-concept-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.hzm-concept-stats div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.hzm-concept-stats strong {
  font-family: var(--font-editorial);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink);
}

.hzm-concept-stats span,
.hzm-concept-sort > span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}

.hzm-concept-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.hzm-icon-btn {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 0.25rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-editorial);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.hzm-icon-btn:hover,
.hzm-icon-btn.hzm-active {
  background: var(--jade);
}

.hzm-concept-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
}

.hzm-concept-sort-btn {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.hzm-concept-sort-btn:hover,
.hzm-concept-sort-btn.hzm-active {
  border-color: var(--jade);
  background: rgba(14, 124, 102, 0.08);
  color: var(--jade-dark);
}

.hzm-concept-sort-btn.hzm-active[data-dir="asc"]::after {
  content: ' \2191';
  font-size: 0.55rem;
}

.hzm-concept-sort-btn.hzm-active[data-dir="desc"]::after {
  content: ' \2193';
  font-size: 0.55rem;
}

.hzm-ghost {
  visibility: hidden;
}

.hzm-concept-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 5rem;
}

.hzm-concept-index-grid {
  align-items: start;
  row-gap: 5rem;
}

.hzm-concept-card-char {
  font: inherit;
  line-height: 1;
}

.hzm-cosmology-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.18rem;
  max-width: 6rem;
  min-height: 0.72rem;
}

.hzm-cosmology-dot {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 999px;
  background: var(--jade);
  opacity: 0.72;
}

.hzm-concept-card-meta {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  max-width: 8rem;
  text-align: center;
  padding: 0.2rem 0.4rem;
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hzm-concept-card:hover .hzm-concept-card-meta,
.hzm-concept-card:focus-visible .hzm-concept-card-meta {
  opacity: 1;
  transform: translateY(0);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. TOP BAR CONTROLS (hint toggle, dark toggle)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hzm-top-bar-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.hzm-hint-toggle {
  font-family: var(--font-editorial);
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-ui);
  padding: 0.375rem 0;
  transition: color 0.3s ease;
}
.hzm-hint-toggle:hover { color: var(--ink); }
.hzm-hint-toggle.hzm-active { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

.hzm-dark-toggle {
  font-size: 1.25rem; padding: 0.5rem;
  transition: transform 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
  color: inherit;
}
.hzm-dark-toggle:hover { transform: rotate(20deg) scale(1.1); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. CONCEPT PAGES — ALTAR SPLIT PANE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hzm-altar-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .hzm-altar-grid { grid-template-columns: 1fr 1fr; }
  .hzm-altar-grid--wide { grid-template-columns: 0.7fr 1.3fr; }
}

.hzm-pane-visual {
  display: flex;
  align-items: center; justify-content: center;
  flex-direction: column;
  padding: 2rem;
  background: var(--paper);
  border-right: 1px solid var(--border-light);
  position: sticky; top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  min-height: 42vh;
  overflow: hidden;
}

.hzm-pane-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 4rem 3rem 4rem;
  background: var(--panel);
  overflow-y: auto;
}

.hzm-char-hero {
  font-family: var(--font-hanzi);
  font-size: clamp(12rem, 35vw, 24rem); font-weight: 900; line-height: 0.8;
  color: var(--ink); text-align: center;
}

.hzm-text-editorial-title {
  font-family: var(--font-editorial);
  font-size: 1.2rem; font-weight: 600; line-height: 1.6;
  margin-top: 1.5rem;
  color: var(--ink);
}

.hzm-altar-hanzi-subtitle {
  font-family: var(--font-hanzi);
  font-size: 1.5rem; font-weight: 400; line-height: 1.3;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

.hzm-altar-header-group { margin-bottom: 1.5rem; }

/* Essay / markdown */
.hzm-essay-h1 {
  font-family: var(--font-editorial);
  font-size: 1.5rem; font-weight: 700; line-height: 1.3;
  margin: 0 0 0.75rem;
}

.hzm-essay-h2 {
  font-family: var(--font-editorial);
  font-size: 1.25rem; font-weight: 600; line-height: 1.35;
  margin: 1.5rem 0 0.5rem;
}

.hzm-essay-h3 {
  font-family: var(--font-editorial);
  font-size: 1.1rem; font-weight: 600; line-height: 1.4;
  margin: 1rem 0 0.4rem;
}

.hzm-essay-p {
  font-family: var(--font-editorial);
  font-size: 1rem; line-height: 1.7;
  margin-bottom: 1rem;
  color: var(--ink-soft);
}

.hzm-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  background-color: var(--c, #000);
  border: 1px solid var(--border-medium);
  margin: 0 0.1rem;
  vertical-align: baseline;
}

/* Concept CTA & related */
.hzm-concept-cta {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-editorial);
  font-size: 1.375rem;
  color: var(--ink);
  transition: all 0.2s ease;
}
.hzm-concept-cta:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.hzm-related-concept {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
}

.hzm-related-concept-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65625rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 0.5rem;
}

.hzm-related-concept-link {
  font-family: var(--font-hanzi);
  font-size: 1.5rem; font-weight: 700;
  color: var(--ink);
  transition: color 0.2s ease;
}
.hzm-related-concept-link:hover { color: var(--jade); }

.hzm-related-characters-note {
  max-width: 34rem;
  margin: -0.25rem 0 1rem;
  font-family: var(--font-editorial);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.hzm-related-character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
}

.hzm-related-character-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem;
  border: 1px solid var(--hair);
  border-radius: 0.45rem;
  background: rgba(255, 255, 251, 0.72);
  color: var(--ink);
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.hzm-related-character-card:hover,
.hzm-related-character-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--jade);
  background: var(--cream);
}

.hzm-related-cosmology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.75rem;
}

.hzm-related-cosmology-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.8rem;
  border: 1px solid var(--hair);
  border-radius: 0.4rem;
  background: rgba(255, 255, 251, 0.72);
  color: var(--ink);
  min-height: 13rem;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.hzm-related-cosmology-card:hover,
.hzm-related-cosmology-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--jade);
  background: var(--cream);
}

.hzm-related-cosmology-diagram {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hzm-related-cosmology-diagram svg {
  width: 100%;
  height: 100%;
}

.hzm-related-cosmology-glyph {
  font-family: var(--font-hanzi);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-soft);
}

.hzm-related-cosmology-name {
  font-family: var(--font-editorial);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

.hzm-related-cosmology-count {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.hzm-related-character-glyph {
  font-family: var(--font-hanzi);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.hzm-related-character-core {
  font-family: var(--font-editorial);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
}

.hzm-related-character-reasons {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Cosmology mappings */
.hzm-cosmology-mappings {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
}

.hzm-cosmology-section-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--jade);
  margin-bottom: 0.75rem;
  display: block;
}

.hzm-cosmology-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hzm-cosmology-link-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem 0.5rem;
  border-radius: 0.3125rem;
  transition: background 0.2s ease;
}
.hzm-cosmology-link-row:hover { background: var(--overlay-light); }

.hzm-cosmology-system-link {
  font-family: var(--font-editorial);
  font-size: 0.9375rem; font-weight: 600;
  color: var(--ink);
}

.hzm-cosmology-node-link {
  font-family: var(--font-system);
  font-size: 0.8125rem; font-weight: 500;
  color: var(--jade);
  margin-left: auto;
  transition: color 0.2s ease;
}
.hzm-cosmology-node-link:hover { color: var(--jade-dark); }

/* Dynamic grid for cosmologies */
.hzm-cosmo-links-dynamic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
}

.hzm-cosmo-links-dynamic-grid.hzm-two-cols {
  grid-template-columns: repeat(2, 1fr);
}

/* Overview diagram */
.hzm-overview-diagram {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hzm-overview-diagram svg { max-width: 100%; height: auto; }

/* Pane toggle (mobile) */
.hzm-pane-toggle {
  position: fixed;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  padding: 0.4rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 600;
  color: var(--ink);
  background: rgba(253,251,247,0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--hair);
  border-radius: 1.5rem;
  transition: background 0.2s ease;
}
.hzm-pane-toggle:hover { background: var(--cream); }
@media (min-width: 768px) { .hzm-pane-toggle { display: none; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. ROOM OVERLAY (character drill-down)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body.hzm-room-open { overflow: hidden; height: 100vh; }

#hzm-room {
  position: fixed;
  inset: 0;
  z-index: 4994;
  overflow: hidden;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(15px);
  transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1),
              transform 1s cubic-bezier(0.4,0,0.2,1),
              visibility 0s linear 0.8s;
}

#hzm-room.hzm-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition: opacity 1s cubic-bezier(0.2,0,0.2,1),
              transform 1.2s cubic-bezier(0.2,0,0.2,1),
              visibility 0s linear 0s;
}

#hzm-room-bg {
  position: absolute; inset: 0;
  background: var(--paper);
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

#hzm-room.hzm-open #hzm-room-bg { opacity: 1; }

.hzm-room-scroll-wrapper {
  position: relative;
  height: 100vh;
  overflow-y: auto; overflow-x: hidden;
  z-index: 101;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 1s ease 0.2s;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hzm-room-scroll-wrapper::-webkit-scrollbar { display: none; }

#hzm-room.hzm-open .hzm-room-scroll-wrapper { opacity: 1; }

/* Room layout: scroll area + depth rail */
.hzm-room-layout {
  position: absolute; inset: 0; z-index: 101;
  display: grid;
  grid-template-columns: 1fr clamp(44px, 5vw, 72px);
}

/* Snap sections */
.hzm-snap-section {
  width: 100%;
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  position: relative;
}

.hzm-snap-section[data-section^="category-"],
.hzm-snap-section[data-section="related"],
.hzm-snap-section[data-section="lookalikes"] {
  justify-content: flex-start;
  align-items: center;
  padding: calc(var(--topbar-height) + 3rem) 2rem 4rem;
}

.hzm-snap-section[data-section^="category-"] .hzm-meaning-grid,
.hzm-snap-section[data-section^="category-"] .hzm-stack-header-wrapper,
#hzm-related-stacks,
#hzm-lookalike-content,
#hzm-evolution-content {
  width: 100%; max-width: 112.5rem;
}

.hzm-room-title {
  font-size: 1.25rem; text-transform: uppercase;
  letter-spacing: 0.15em; margin-bottom: 3rem;
  opacity: 0.6; text-align: center;
  position: relative !important; top: auto !important;
}

/* Room sections (non-snap flow) */
.hzm-room-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--topbar-height) + 3rem) 2rem 4rem;
  position: relative;
}

/* Close button */
.hzm-close-btn {
  position: fixed;
  top: calc(var(--topbar-height) + 1.25rem); right: 2rem;
  z-index: 10005;
  font-family: var(--font-editorial);
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--ink-ui);
  padding: 0.375rem 0;
  transition: color 0.3s ease;
}
.hzm-close-btn:hover { color: var(--ink); }

/* Character grid inside rooms */
.hzm-char-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  width: 100%;
  justify-items: center;
}

@media (min-width: 640px)  { .hzm-char-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .hzm-char-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .hzm-char-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1280px) { .hzm-char-grid { grid-template-columns: repeat(6, 1fr); gap: 3rem; } }

/* Center alignment for sparse grids */
#hzm-lookalike-content.hzm-meaning-grid,
#hzm-related-stacks .hzm-meaning-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

/* Stack headers */
.hzm-stack-header-wrapper {
  width: 100%;
  max-width: 112.5rem;
  margin-bottom: 2rem;
  position: relative !important; top: auto !important;
}

.hzm-stack-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-editorial);
  font-size: 1.25rem; text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.6; text-align: center;
}

.hzm-stack-title .hzm-stack-hanzi {
  font-family: var(--font-hanzi);
  font-size: 1.5rem; opacity: 0.6;
}

/* Evolution display */
.hzm-evolution-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.hzm-evolution-node { text-align: center; }

.hzm-evo-char {
  font-family: var(--font-hanzi);
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 1;
}

.hzm-evo-arrow { font-size: 1.5rem; opacity: 0.2; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. DEPTH NAVIGATION (rail + dots)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hzm-depth-rail {
  position: fixed !important;
  right: 1.5rem !important; top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5005 !important;
  display: flex;
  flex-direction: column;
  overflow: visible;
  overscroll-behavior: none;
  touch-action: none;
}

#hzm-depth-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.hzm-depth-dot {
  width: 10px !important; height: 10px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--border-heavy) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  position: relative;
  padding: 0 !important;
  margin: 6px auto !important;
}

.hzm-depth-dot.hzm-active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  transform: scale(1.3) !important;
}

.hzm-depth-dot:hover { border-color: var(--ink); }

.hzm-depth-dot::before {
  content: attr(data-hint);
  position: absolute;
  right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  white-space: nowrap;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 100;
}

.hzm-depth-dot::after {
  content: '';
  position: absolute;
  right: calc(100% + 6px); top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--ink);
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 9999;
}

.hzm-depth-dot:hover::before,
.hzm-depth-dot:hover::after,
.hzm-depth-dot:focus::before,
.hzm-depth-dot:focus::after {
  opacity: 1; visibility: visible;
}

.hzm-depth-line {
  display: block !important;
  width: 0px !important; height: 28px !important;
  background: var(--border-medium) !important;
  margin: 2px auto !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. COSMOLOGY INDEX PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hzm-cosmos-page { background: var(--paper); }

.hzm-institute-hero {
  position: relative;
  background: var(--ink);
  padding: 4rem 0 3rem;
  margin-bottom: 3rem;
  overflow: hidden;
}

.hzm-hero-glyph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-hanzi);
  font-size: 17rem; font-weight: 900;
  color: rgba(14, 124, 102, 0.07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.hzm-hero-strip {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  font-family: var(--font-hanzi);
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
  color: rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

.hzm-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon-jade);
  margin-bottom: 0.75rem;
}

.hzm-institute-title {
  font-family: var(--font-editorial);
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #E9EDE7;
  margin-bottom: 0.5rem;
}

.hzm-institute-tag {
  font-family: var(--font-editorial);
  font-size: 1.0625rem; font-weight: 500;
  line-height: 1.5;
  color: var(--neon-pink);
  margin-bottom: 0.75rem;
}

.hzm-institute-copy {
  font-family: var(--font-editorial);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(241, 244, 237, 0.75);
  max-width: 40rem;
}

.hzm-institute-section {
  margin-bottom: 4rem;
}

.hzm-section-title {
  display: flex;
  align-items: baseline;
  gap: 0.8125rem;
  margin-bottom: 0.5rem;
}

.hzm-section-title::after {
  content: '';
  height: 1px;
  flex: 1;
  align-self: center;
  background: var(--hair);
}

.hzm-section-title h2 {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hzm-section-title h2 span {
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-ui);
}

.hzm-section-sub {
  font-family: var(--font-editorial);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--mute);
  margin-bottom: 1.5rem;
  max-width: 36rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. SYSTEM CARDS (Cosmology Index)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hzm-system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.hzm-system-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  background: var(--cream);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--jade);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
  will-change: transform;
}

.hzm-system-card:hover {
  background: #fff;
  transform: translateY(-0.18rem);
  box-shadow: 0 0.55rem 1.5rem -0.8rem rgba(0,0,0,0.12);
}

.hzm-system-card[data-accent='2'] { border-top-color: var(--vermillion); }
.hzm-system-card[data-accent='3'] { border-top-color: var(--gold); }

.hzm-system-kicker {
  font-family: var(--font-mono);
  font-size: 0.59375rem; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.hzm-system-hanzi {
  font-family: var(--font-hanzi);
  font-size: 1.375rem; font-weight: 700;
  line-height: 1.2;
  margin-top: 0.25rem;
}

.hzm-system-name {
  font-family: var(--font-system);
  font-size: 1rem; font-weight: 600;
  line-height: 1.3;
}

.hzm-system-description {
  font-family: var(--font-system);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mute);
  margin-top: 0.25rem;
}

.hzm-system-card--forthcoming {
  opacity: 0.72;
  cursor: default;
}
.hzm-system-card--forthcoming:hover {
  transform: none;
  box-shadow: none;
  background: var(--cream);
}

.hzm-system-badge {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.15625rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem; font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  background: rgba(0,0,0,0.04);
  border-radius: 0.1875rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. COSMOLOGY SYSTEM PAGE — OVERVIEW DIAGRAM + PORTAL
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hzm-cosmo-portal-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.hzm-portal-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.625rem;
  border-radius: 0.25rem;
  transition: background 0.15s ease;
}
.hzm-portal-bar:hover { background: var(--overlay-light); }

.hzm-portal-label {
  font-family: var(--font-editorial);
  font-size: 0.8125rem; font-weight: 600;
  min-width: 5rem;
  color: var(--ink);
}

.hzm-portal-chars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.hzm-semantic-bridge {
  display: block;
  font-family: var(--font-editorial);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--mute-light);
  margin: -0.25rem 0 1rem;
  line-height: 1.5;
}

.hzm-portal-char {
  font-family: var(--font-hanzi);
  font-size: 1.5rem; font-weight: 700;
  line-height: 1;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}
.hzm-portal-char:hover { color: var(--ink); transform: scale(1.1); }

/* ── Cosmology page: section rhythm & dividers ── */
.hzm-cosmo-divider {
  border: none;
  height: 1px;
  background: var(--border-light);
  margin: 1.5rem 0;
  width: 100%;
}

/* ── Title block: name + hanzi on separate line ── */
.hzm-cosmo-title-group {
  margin-bottom: 0.5rem;
}
.hzm-cosmo-title {
  font-family: var(--font-editorial);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.hzm-cosmo-title-hanzi {
  font-family: var(--font-hanzi);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 0.2rem;
  display: block;
}

/* ── Definition block (museum label style) ── */
.hzm-definition-block {
  margin-top: 1.5rem;
  padding: 0.75rem 1.1rem;
  border-left: 3px solid var(--border-medium);
  background: var(--overlay-light);
  border-radius: 0 0.2rem 0.2rem 0;
}
.hzm-definition-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute);
  display: block;
  margin-bottom: 0.3rem;
}
.hzm-definition-text {
  font-family: var(--font-editorial);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* ── Body text (premise) ── */
.hzm-body-text {
  font-family: var(--font-editorial);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 1.25rem;
}

/* ── "What it unlocks" — museum curator note ── */
.hzm-unlocks-block {
  margin-top: 0;
  padding: 1.5rem 1.75rem;
  border-left: 4px solid var(--jade);
  background: rgba(14, 124, 102, 0.04);
  border-radius: 0 0.25rem 0.25rem 0;
}
.hzm-unlocks-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--jade);
  display: block;
  margin-bottom: 0.65rem;
}
.hzm-unlocks-text {
  font-family: var(--font-editorial);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}

/* ── Metadata strip ── */
.hzm-metadata-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin-top: 0;
  padding: 0.6rem 1rem;
  background: var(--overlay-light);
  border-radius: 0.25rem;
  border: 1px solid var(--border-light);
}
.hzm-metadata-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.hzm-metadata-item + .hzm-metadata-item::before {
  content: "·";
  margin-right: 0.05rem;
  color: var(--border-heavy);
}
.hzm-metadata-label {
  font-weight: 600;
  color: var(--mute);
}

/* ── Semantic decomposition (categories) ── */
.hzm-decomposition-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
.hzm-decomposition-card {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
  column-gap: 1.4rem;
  align-items: start;
  min-height: 0;
  padding: 0.85rem 0 1rem;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border-light);
  transition: border-color 0.2s ease;
}
.hzm-decomposition-card:hover {
  border-color: var(--border-medium);
}
.hzm-decomposition-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  grid-column: 1;
  padding-top: 0;
  margin-bottom: 0.2rem;
}
.hzm-decomposition-category-hanzi {
  display: block;
  grid-column: 1;
  padding-top: 0;
  font-family: var(--font-hanzi);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.hzm-decomposition-category-hanzi + .hzm-decomposition-label {
  padding-top: 0.35rem;
}
.hzm-decomposition-tooltip {
  grid-column: 1;
  font-family: var(--font-editorial);
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 500;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.4rem;
}
.hzm-decomposition-chars {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.45rem 0.68rem;
  margin-top: 0.05rem;
  line-height: 1.15;
}
.hzm-decomposition-char {
  font-family: var(--font-hanzi);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}
.hzm-decomposition-char:hover {
  color: var(--ink);
  transform: scale(1.1);
}

@media (max-width: 48rem) {
  .hzm-decomposition-card {
    grid-template-columns: 1fr;
    row-gap: 0.65rem;
  }
  .hzm-decomposition-chars {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ── Larger related-cosmology thumbnails ── */
.hzm-related-cosmology-diagram {
  width: 4rem;
  height: 4rem;
}
.hzm-related-cosmology-glyph {
  font-size: 2.5rem;
}
.hzm-related-cosmology-name {
  font-size: 0.75rem;
}
.hzm-related-cosmology-grid {
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

.hzm-tooltip-char {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 1.45em;
}

.hzm-tooltip-char::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  z-index: 20;
  width: max-content;
  max-width: 14rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.25rem;
  background: #050505;
  color: #fff;
  font-family: var(--font-editorial);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.35rem);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.hzm-tooltip-char:hover::after,
.hzm-tooltip-char:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hzm-related-char-card {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.25rem;
  background: var(--border-light);
  color: var(--ink);
  font-family: var(--font-hanzi);
  font-size: 1.2rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hzm-related-char-card:hover,
.hzm-related-char-card:focus-visible {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-1px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. FLOOR EXPLORER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hzm-floor-explorer {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 1.25rem;
  align-items: start;
}

.hzm-floor-stack-area {
  display: flex;
  flex-direction: column;
  gap: 3px;
  perspective: 900px;
}

.hzm-floor {
  border-radius: 0.625rem;
  background: var(--cream);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--floor-accent, var(--jade));
  overflow: hidden;
  transform-origin: top center;
  transition: transform 0.38s cubic-bezier(0.34,1.4,0.64,1),
              box-shadow 0.38s ease,
              margin-bottom 0.38s ease,
              background 0.28s ease,
              border-color 0.28s ease;
}

.hzm-floor--open {
  transform: translateY(-0.35rem);
  box-shadow: 0 1.25rem 2.75rem -0.875rem rgba(0,0,0,0.22);
  margin-bottom: 1.125rem;
  background: #fff;
  border-color: var(--floor-accent, rgba(0,0,0,0.15));
  z-index: 2;
}

.hzm-floor-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.75rem 2.35rem 0.75rem 0.875rem;
  font-family: var(--font-system);
  font-size: 0.8125rem; font-weight: 600;
  color: var(--ink);
  text-align: left;
  transition: background 0.25s ease, color 0.25s ease;
}
.hzm-floor-trigger:hover { background: var(--overlay-light); }

.hzm-floor-trigger::before,
.hzm-floor-trigger::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.16rem;
  height: 0.58rem;
  border-radius: 999px;
  background: var(--floor-accent, var(--jade));
  transition: transform 0.25s ease-in-out;
}

.hzm-floor-trigger::before { transform: translate(-0.16rem, -50%) rotate(45deg); }
.hzm-floor-trigger::after { transform: translate(0.16rem, -50%) rotate(-45deg); }

.hzm-floor--open .hzm-floor-trigger::before { transform: translate(0.16rem, -50%) rotate(45deg); }
.hzm-floor--open .hzm-floor-trigger::after { transform: translate(-0.16rem, -50%) rotate(-45deg); }

.hzm-floor--open .hzm-floor-trigger {
  background: var(--overlay-light);
  color: var(--floor-accent, var(--ink));
}

.hzm-floor-trigger-mark {
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 0.3125rem;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6875rem; font-weight: 700;
}

.hzm-floor-trigger-name { flex: 1; }

.hzm-floor-trigger-count {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hzm-floor-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 0.875rem;
  opacity: 0;
  transform-origin: top center;
  transform: translateY(0.9rem) rotateX(-9deg);
  transition: max-height 0.45s ease-in-out,
              padding 0.45s ease-in-out,
              opacity 0.25s ease-in-out,
              transform 0.25s ease-in-out;
}

.hzm-floor--open .hzm-floor-content {
  max-height: 80rem;
  padding: 0 0.875rem 0.875rem;
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
  transition: max-height 0.5s ease-in-out,
              padding 0.5s ease-in-out,
              opacity 0.28s ease-in-out 0.08s,
              transform 0.32s ease-in-out 0.08s;
}

.hzm-floor-plate svg { width: 100%; height: auto; display: block; }
.hzm-floor-plate .room { cursor: pointer; }
.hzm-floor-plate .room polygon { transition: fill 0.12s; }
.hzm-floor-plate .room:hover .roof,
.hzm-floor-plate .room.hl .roof { fill: var(--accent); }
.hzm-floor-plate .room-link,
.hzm-floor-plate .label-link { cursor: pointer; }
.hzm-floor-plate .label-halo { fill: #fff; opacity: 0.5; stroke-width: 0; }
.hzm-floor-plate .label-bg { fill: #fff; opacity: 0.88; stroke-width: 0; }
.hzm-floor-plate .label-hitbox { fill: transparent; stroke: none; }
.hzm-floor-plate .lbl text { fill: #1C1E22; font-weight: 700; }

/* Floor rail */
.hzm-floor-rail {
  position: sticky;
  top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hzm-rail-heading {
  font-family: var(--font-mono);
  font-size: 0.65625rem; font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-ui);
  margin-bottom: 0.25rem;
}

.hzm-floor-switcher {
  display: flex;
  flex-direction: column;
  gap: 2px;
  perspective: 900px;
}

.hzm-switch-item {
  display: grid;
  grid-template-rows: auto 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s cubic-bezier(0.4,0,0.2,1),
              margin-bottom 0.4s ease;
}

.hzm-switch-item--open {
  grid-template-rows: auto 1fr;
  margin-bottom: 0.625rem;
}

.hzm-floor-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  font-family: var(--font-system);
  font-size: 0.75rem;
  color: var(--mute);
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.hzm-floor-switch:hover { background: var(--overlay-light); color: var(--ink); }
.hzm-floor-switch.active { background: var(--ink); color: var(--paper); font-weight: 600; }

.hzm-floor-switch-num {
  width: 1.125rem; height: 1.125rem;
  display: grid; place-items: center;
  border-radius: 0.25rem;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.5625rem; font-weight: 700;
}

.hzm-switch-rooms {
  list-style: none; margin: 0; padding: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.hzm-switch-item--open .hzm-switch-rooms {
  opacity: 1;
  padding: 0.25rem 0;
}

@keyframes flipdown {
  0%   { opacity: 0; transform-origin: top center; transform: rotateX(-90deg); }
  5%   { opacity: 1; }
  80%  { opacity: 1; transform: rotateX(8deg); }
  83%  { opacity: 1; transform: rotateX(6deg); }
  92%  { opacity: 1; transform: rotateX(-3deg); }
  100% { opacity: 1; transform-origin: top center; transform: rotateX(0deg); }
}

.hzm-floor-room {
  opacity: 0;
  transform: translateY(-0.375rem);
}

.hzm-switch-item--open .hzm-floor-room {
  opacity: 1;
  color: var(--ink);
  animation: flipdown 0.5s ease both;
}

.hzm-switch-item--open .hzm-floor-room:nth-child(1)  { animation-delay: 0.02s; }
.hzm-switch-item--open .hzm-floor-room:nth-child(2)  { animation-delay: 0.04s; }
.hzm-switch-item--open .hzm-floor-room:nth-child(3)  { animation-delay: 0.06s; }
.hzm-switch-item--open .hzm-floor-room:nth-child(4)  { animation-delay: 0.08s; }
.hzm-switch-item--open .hzm-floor-room:nth-child(5)  { animation-delay: 0.10s; }
.hzm-switch-item--open .hzm-floor-room:nth-child(6)  { animation-delay: 0.12s; }
.hzm-switch-item--open .hzm-floor-room:nth-child(7)  { animation-delay: 0.14s; }
.hzm-switch-item--open .hzm-floor-room:nth-child(8)  { animation-delay: 0.16s; }
.hzm-switch-item--open .hzm-floor-room:nth-child(9)  { animation-delay: 0.18s; }
.hzm-switch-item--open .hzm-floor-room:nth-child(10) { animation-delay: 0.20s; }

.hzm-floor-room a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.5rem 0.3125rem 2rem;
  border-radius: 0.3125rem;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.hzm-floor-room a:hover,
.hzm-floor-room.hl a { background: rgba(246,216,195,0.3); }

.hzm-floor-room-hanzi {
  font-family: var(--font-hanzi);
  font-size: 0.9375rem; font-weight: 700;
  line-height: 1;
  min-width: 1.125rem;
  text-align: center;
}

.hzm-floor-room-label {
  font-family: var(--font-system);
  font-size: 0.75rem; font-weight: 500;
}

/* Mini building map */
.hzm-mini-map { display: flex; flex-direction: column; }

.hzm-mini-stack {
  padding: 0.625rem;
  background: var(--cream);
  border: 1px solid var(--hair);
  border-radius: 0.5rem;
}
.hzm-mini-stack svg { width: 100%; height: auto; display: block; }

.hzm-mini-stack .level {
  transition: transform 0.35s ease;
}

.hzm-mini-stack .slab {
  opacity: 1;
  fill: #FCFCFA;
  stroke-width: 1.8;
  transition: opacity 0.4s ease, stroke-width 0.4s ease, fill 0.4s ease;
}
.hzm-mini-stack .slab:hover { opacity: 1; }
.hzm-mini-stack .slab.active {
  opacity: 1;
  fill: var(--accent);
  stroke-width: 4;
  stroke-linejoin: round;
}
/* Direct accordion override: mirrors the standalone HTML fix */
#hzm-floor-explorer.hzm-direct-accordion .hzm-floor-stack-area { perspective: 900px !important; }

#hzm-floor-explorer.hzm-direct-accordion .hzm-floor {
  display: block !important;
  overflow: hidden !important;
  transform-origin: top center !important;
  transition: transform 260ms ease, box-shadow 260ms ease, margin-bottom 260ms ease, background 220ms ease, border-color 220ms ease !important;
}

#hzm-floor-explorer.hzm-direct-accordion .hzm-floor--open {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 36px -20px rgba(0,0,0,.45) !important;
  margin-bottom: 18px !important;
  background: #fff !important;
  border-color: var(--floor-accent, rgba(0,0,0,.18)) !important;
}

#hzm-floor-explorer.hzm-direct-accordion .hzm-floor-trigger {
  position: relative !important;
  padding-right: 42px !important;
  cursor: pointer !important;
}

#hzm-floor-explorer.hzm-direct-accordion .hzm-floor-trigger::before,
#hzm-floor-explorer.hzm-direct-accordion .hzm-floor-trigger::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: 18px !important;
  width: 3px !important;
  height: 11px !important;
  border-radius: 999px !important;
  background: var(--floor-accent, #3d5a4c) !important;
  transition: transform 250ms ease-in-out !important;
}

#hzm-floor-explorer.hzm-direct-accordion .hzm-floor-trigger::before { transform: translate(-3px,-50%) rotate(45deg) !important; }
#hzm-floor-explorer.hzm-direct-accordion .hzm-floor-trigger::after { transform: translate(3px,-50%) rotate(-45deg) !important; }
#hzm-floor-explorer.hzm-direct-accordion .hzm-floor--open .hzm-floor-trigger::before { transform: translate(3px,-50%) rotate(45deg) !important; }
#hzm-floor-explorer.hzm-direct-accordion .hzm-floor--open .hzm-floor-trigger::after { transform: translate(-3px,-50%) rotate(-45deg) !important; }

#hzm-floor-explorer.hzm-direct-accordion .hzm-floor-content {
  display: block !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 14px !important;
  transform-origin: top center !important;
  transform: translateY(18px) rotateX(-8deg) !important;
  pointer-events: none !important;
  transition: max-height 360ms ease-in-out, padding 360ms ease-in-out, opacity 220ms ease-in-out, transform 260ms ease-in-out !important;
}

#hzm-floor-explorer.hzm-direct-accordion .hzm-floor--open .hzm-floor-content {
  max-height: 980px !important;
  opacity: 1 !important;
  padding: 0 14px 14px !important;
  transform: translateY(0) rotateX(0deg) !important;
  pointer-events: auto !important;
  transition: max-height 420ms ease-in-out, padding 420ms ease-in-out, opacity 240ms ease-in-out 80ms, transform 280ms ease-in-out 80ms !important;
}

#hzm-floor-explorer.hzm-direct-accordion .hzm-floor--open .hzm-floor-plate { animation: hzm-direct-panel-pop 360ms ease both !important; }

@keyframes hzm-direct-panel-pop {
  0% { opacity: 0; transform: translateY(12px) scale(.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

#hzm-floor-explorer.hzm-direct-accordion .hzm-switch-rooms {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: max-height 260ms ease-in-out, opacity 180ms ease-in-out, padding 260ms ease-in-out !important;
}

#hzm-floor-explorer.hzm-direct-accordion .hzm-switch-item--open .hzm-switch-rooms {
  max-height: 520px !important;
  opacity: 1 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. COSMOLOGY SVG DIAGRAMS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Base SVG */
svg {
  stroke: var(--ink); stroke-width: 1.5;
  opacity: 0.8;
  width: 100%; height: auto; display: block;
}

svg path, svg line, svg polyline, svg polygon,
svg rect:not([fill]) { fill: none; }

svg text {
  fill: var(--ink); stroke: none;
  font-family: var(--font-hanzi);
  text-anchor: middle;
  dominant-baseline: central;
  opacity: 0.9;
}

/* Interactive category buttons in diagrams */
.hzm-category-btn { cursor: pointer; transition: opacity 0.3s ease; }
.hzm-category-btn:hover,
.hzm-category-btn.hzm-active { opacity: 1; }
.hzm-category-btn:hover text,
.hzm-category-btn.hzm-active text { font-weight: 500; }

/* Generic node circles */
.hzm-category-btn circle:not(.cheon-dot):not(.yinyang-fill-yin):not(.yinyang-dot-yin):not(.yinyang-dot-yang):not(.yinyang-border):not(.godai-shape) {
  fill: var(--paper); stroke: var(--ink); stroke-width: 1;
}

.hzm-category-btn text {
  font-size: 16px; fill: var(--ink-soft);
  text-anchor: middle; font-family: var(--font-hanzi);
}

.hzm-category-btn:hover circle:not(.cheon-dot):not(.yinyang-fill-yin):not(.yinyang-dot-yin):not(.yinyang-dot-yang):not(.yinyang-border):not(.godai-shape),
.hzm-category-btn.hzm-active circle:not(.cheon-dot):not(.yinyang-fill-yin):not(.yinyang-dot-yin):not(.yinyang-dot-yang):not(.yinyang-border):not(.godai-shape) {
  stroke-width: 2.5; fill: white;
}

/* Invert text for node types that fill on hover */
.hzm-category-btn:has(.wuxing-node-circle):hover text,
.hzm-category-btn:has(.wuxing-node-circle).hzm-active text,
.hzm-category-btn:has(.bagua-node-circle):hover text,
.hzm-category-btn:has(.bagua-node-circle).hzm-active text,
.hzm-category-btn:has(.qiyao-node):hover text,
.hzm-category-btn:has(.qiyao-node).hzm-active text,
.hzm-category-btn:has(.zodiac-node):hover text,
.hzm-category-btn:has(.zodiac-node).hzm-active text { fill: var(--paper); }

/* Specific cosmology: Wu Xing (Five Phases) */
.wuxing-path-cycle { stroke-width: 2; opacity: 0.35; fill: none; }
.wuxing-path-star { stroke-width: 1; opacity: 0.25; }
.wuxing-node-circle { stroke-width: 2; opacity: 0.85; }
.wuxing-hanzi { font-size: 22px; font-weight: 500; }

/* San Cai (Three Realms) */
.sancai-bar { fill: var(--ink); opacity: 0.35; }
.sancai-hanzi { font-size: 22px; }

/* Zodiac (12 Earthly Branches) */
.zodiac-ring { stroke: var(--ink); opacity: 0.15; stroke-dasharray: 4 8; fill: none; }
.zodiac-node { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; opacity: 0.6; transition: all 0.3s ease; }
.zodiac-hanzi { font-size: 22px; font-weight: 500; }
.hzm-category-btn:hover .zodiac-node,
.hzm-category-btn.hzm-active .zodiac-node { opacity: 1; stroke-width: 2.5; }

/* Jiu Gong (Nine Palaces) */
.jiugong-border { stroke: var(--ink); stroke-width: 2; fill: none; opacity: 0.6; }
.jiugong-grid-line { stroke: var(--ink); stroke-width: 1; opacity: 0.2; }
.jiugong-number { font-family: var(--font-editorial); font-size: 32px; font-weight: 400; fill: var(--ink); opacity: 0.5; transition: opacity 0.3s ease; }
.hzm-category-btn:hover .jiugong-number,
.hzm-category-btn.hzm-active .jiugong-number { opacity: 1; font-weight: 500; }
.jiugong-palace-hanzi { font-family: var(--font-hanzi); font-size: 18px; font-weight: 500; fill: var(--ink); opacity: 0.75; transition: opacity 0.3s ease; }
.hzm-category-btn:hover .jiugong-palace-hanzi,
.hzm-category-btn.hzm-active .jiugong-palace-hanzi { opacity: 1; }

/* Yin Yang */
.yinyang-diagram { stroke: none; }
.yinyang-fill-yin { fill: var(--ink); stroke: none; opacity: 1; transition: opacity 0.3s ease; }
.yinyang-fill-yang { fill: var(--paper); stroke: none; transition: opacity 0.3s ease; }
.yinyang-dot-yin { fill: white; stroke: none; opacity: 0.85; }
.yinyang-dot-yang { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.yinyang-border { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0.5; }
.hzm-category-btn:hover .yinyang-fill-yin,
.hzm-category-btn.hzm-active .yinyang-fill-yin { opacity: 0.9; }
.hzm-category-btn:hover .yinyang-fill-yang,
.hzm-category-btn.hzm-active .yinyang-fill-yang { opacity: 0.85; filter: brightness(0.95); }
.yinyang-label { font-size: 28px; font-family: var(--font-hanzi); pointer-events: none; stroke: none; opacity: 0.8; }
.yinyang-text-paper { fill: var(--paper); }
.yinyang-text-ink { fill: var(--ink); }

/* Bagua (Eight Trigrams) */
.bagua-path-outer { stroke-width: 2; opacity: 0.35; fill: none; }
.bagua-node-circle { stroke-width: 2; opacity: 0.85; }
.bagua-hanzi { font-size: 22px; font-weight: 500; }

/* Godai (Five Great Elements) */
.godai-hanzi { font-size: 22px; font-family: var(--font-hanzi); fill: var(--ink); text-anchor: middle; dominant-baseline: central; opacity: 0.85; }
.godai-label { font-size: 11px; font-family: var(--font-editorial); fill: var(--ink-soft); text-anchor: middle; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.7; }
.hzm-category-btn:hover .godai-hanzi,
.hzm-category-btn.hzm-active .godai-hanzi { opacity: 1; fill: var(--ink); }
.hzm-category-btn circle.godai-shape,
.hzm-category-btn:hover circle.godai-shape,
.hzm-category-btn.hzm-active circle.godai-shape { fill: transparent !important; stroke-width: 1.5 !important; }

/* Vitruvian Triad */
.vitruvian-hanzi { font-size: 22px; font-family: var(--font-hanzi); fill: var(--ink); text-anchor: middle; dominant-baseline: central; opacity: 0.85; }
.vitruvian-label { font-size: 11px; font-family: var(--font-editorial); fill: var(--ink-soft); text-anchor: middle; opacity: 0.7; letter-spacing: 0.12em; }

/* Cheon-Ji-In (Korean Trinity) */
.cheon-stroke { stroke: var(--ink); stroke-width: 8; stroke-linecap: round; opacity: 0.8; transition: opacity 0.3s ease; }
.cheon-dot { fill: var(--ink); stroke: none; opacity: 0.8; transition: opacity 0.3s ease; }
.cheon-hanzi { font-size: 22px; font-weight: 500; opacity: 0.4; transition: opacity 0.3s ease; }
.cheon-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; fill: var(--ink-soft); opacity: 0.7; }
.hzm-category-btn:hover .cheon-stroke,
.hzm-category-btn.hzm-active .cheon-stroke,
.hzm-category-btn:hover .cheon-dot,
.hzm-category-btn.hzm-active .cheon-dot { opacity: 1; }
.hzm-category-btn:hover .cheon-hanzi,
.hzm-category-btn.hzm-active .cheon-hanzi { opacity: 0.9; }

/* I Ching (8×8 Grid) */
.iching-grid-line { stroke: var(--ink); stroke-width: 1; opacity: 0.15; fill: none; transition: opacity 0.3s ease; }
.iching-border { stroke: var(--ink); stroke-width: 2; fill: none; opacity: 0.8; }
.iching-horizon { stroke: var(--ink); stroke-width: 2; opacity: 0.4; }
.iching-cell-hanzi { font-size: 20px; font-weight: 500; opacity: 0.75; fill: var(--ink); }
.iching-label-overlay { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; text-anchor: middle; fill: var(--ink); opacity: 0; font-weight: 600; transition: opacity 0.3s ease, transform 0.3s ease; }
.hzm-category-btn:hover .iching-label-overlay,
.hzm-category-btn.hzm-active .iching-label-overlay { opacity: 1; }
.hzm-category-btn:hover .iching-grid-line,
.hzm-category-btn.hzm-active .iching-grid-line { opacity: 0.4; }

/* Jie Qi (24 Solar Terms) */
.jieqi-ring-base { stroke: var(--ink); stroke-width: 1; opacity: 0.2; fill: none; }
.jieqi-tick-major { stroke: var(--ink); stroke-width: 2; opacity: 0.6; }
.jieqi-ticks-path { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 2 40; opacity: 0.4; fill: none; }
.jieqi-hanzi { font-size: 22px; font-weight: 500; }
.jieqi-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; fill: var(--ink-soft); }

/* Ba Zi (Four Pillars) */
.bazi-hanzi-main { font-family: var(--font-hanzi); font-size: 28px; font-weight: 500; fill: var(--ink); opacity: 0.75; transition: opacity 0.3s ease; text-anchor: middle; }
.bazi-cell-stem { stroke: var(--ink); stroke-width: 1; fill: none; opacity: 0.15; }
.bazi-cell-branch { stroke: var(--ink); stroke-width: 1.5; fill: none; opacity: 0.25; }
.bazi-hanzi { font-size: 22px; opacity: 0.3; transition: opacity 0.3s ease; }
.bazi-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; fill: var(--ink-soft); }
.hzm-category-btn:hover .bazi-hanzi-main,
.hzm-category-btn.hzm-active .bazi-hanzi-main { opacity: 0.9; }
.hzm-category-btn:hover .bazi-cell-stem,
.hzm-category-btn.hzm-active .bazi-cell-stem,
.hzm-category-btn:hover .bazi-cell-branch,
.hzm-category-btn.hzm-active .bazi-cell-branch { opacity: 0.8; }
.hzm-category-btn:hover .bazi-hanzi,
.hzm-category-btn.hzm-active .bazi-hanzi { opacity: 1; }

/* 28 Mansions (Lunar Cycle) */
.mansions-ring-base { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.15; }
.mansion-tick-mark { stroke: var(--ink); stroke-width: 2; opacity: 0.4; stroke-linecap: round; }
.mansions-hanzi { font-size: 22px; font-weight: 500; fill: var(--ink); opacity: 0.6; transition: opacity 0.3s ease; }
.mansions-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink-soft); opacity: 0.5; }
.hzm-category-btn:hover .mansions-hanzi,
.hzm-category-btn.hzm-active .mansions-hanzi { opacity: 1; }

/* Qi Yao (Seven Luminaries) */
.qiyao-sun, .qiyao-moon { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; opacity: 0.6; transition: opacity 0.3s ease; }
.qiyao-hanzi-center { font-size: 28px; font-weight: 600; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.qiyao-orbit { stroke: var(--ink); stroke-width: 1; opacity: 0.15; }
.qiyao-node { fill: var(--paper); stroke: var(--ink); stroke-width: 1; opacity: 0.4; transition: all 0.3s ease; }
.qiyao-hanzi { font-size: 22px; font-weight: 500; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.hzm-category-btn:hover .qiyao-node,
.hzm-category-btn.hzm-active .qiyao-node,
.hzm-category-btn:hover .qiyao-sun,
.hzm-category-btn.hzm-active .qiyao-sun,
.hzm-category-btn:hover .qiyao-moon,
.hzm-category-btn.hzm-active .qiyao-moon { opacity: 1; stroke-width: 2; }

/* Cosmology overview in room */
.hzm-cosmology-overview .hzm-overview-diagram { width: 100%; max-width: 500px; margin: 0 auto; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. COSMOS INDEX OVERLAY (facets + filter)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hzm-cosmos-index {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(253, 251, 247, 0.98);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.7s ease-in-out, visibility 0s linear 0.7s;
  display: flex; flex-direction: column;
  padding: 1.5rem;
  padding-top: calc(var(--topbar-height) + 1.5rem);
  overflow-y: auto;
}

.hzm-cosmos-index.hzm-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.7s ease-in-out, visibility 0s linear 0s;
}

.hzm-index-header {
  max-width: 80rem; margin: 0 auto 2rem; width: 100%; text-align: center;
}

.hzm-index-title {
  font-size: 1.5rem; font-weight: 300; letter-spacing: 0.05em; margin-bottom: 0.5rem;
}
@media (min-width: 768px) { .hzm-index-title { font-size: 2rem; } }

.hzm-index-subtitle {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft);
}

.hzm-index-layout {
  max-width: 80rem; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 768px) { .hzm-index-layout { grid-template-columns: 240px 1fr; } }

.hzm-sidebar-panel {
  background: var(--paper);
  border-right: 1px solid var(--border-light);
  padding: 1.5rem 1.25rem;
  overflow-y: auto;
  flex-shrink: 0;
  display: none;
}
@media (min-width: 768px) { .hzm-sidebar-panel { display: block; } }

.hzm-facet-group { margin-bottom: 1.25rem; }

.hzm-facet-group-label {
  font-family: var(--font-editorial);
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--ink-ui);
  margin-bottom: 0.5rem;
}

.hzm-facet-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-editorial);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.3rem 0.35rem;
  border: 1px solid var(--border-light);
  border-radius: 0;
  margin: 0.15rem;
  color: var(--ink);
  background: transparent;
  transition: all 0.15s;
}
.hzm-facet-chip:hover { border-color: var(--ink); }
.hzm-facet-chip.hzm-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.hzm-facet-clear {
  font-size: 0.68rem;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.5rem 0;
  transition: color 0.15s;
}
.hzm-facet-clear:hover { color: var(--ink); }

.hzm-facet-badge {
  background: var(--ink); color: var(--paper);
  font-size: 0.6rem; font-weight: 700;
  border-radius: 1rem;
  padding: 0.1rem 0.45rem;
  margin-left: 0.4rem;
}

/* Filter mobile sheet */
.hzm-sidebar-sheet-backdrop {
  position: fixed; inset: 0; z-index: 6000;
  background: rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.hzm-sidebar-sheet-backdrop.hzm-open { opacity: 1; pointer-events: auto; }

.hzm-sidebar-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 6001;
  background: var(--paper);
  border-radius: 1rem 1rem 0 0;
  padding: 1rem 1.25rem 2rem;
  max-height: 70vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
}
.hzm-sidebar-sheet.hzm-open { transform: translateY(0); }

.hzm-sidebar-sheet-handle {
  width: 2.5rem; height: 4px;
  background: var(--ink);
  border-radius: 2px;
  margin: 0 auto 1rem;
  opacity: 0.3;
}

.hzm-filter-affordance {
  position: fixed;
  bottom: 1.25rem; left: 50%;
  transform: translateX(-50%);
  z-index: 5005;
  background: var(--ink); color: var(--paper);
  padding: 0.625rem 1.25rem;
  border-radius: 2rem;
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
}
.hzm-filter-affordance:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Index grid */
.hzm-index-cards-area { width: 100%; }

.hzm-result-count {
  font-size: 0.72rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 1rem;
}

.hzm-index-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
}
@media (min-width: 640px)  { .hzm-index-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hzm-index-grid { grid-template-columns: repeat(3, 1fr); } }

.hzm-index-item {
  background: var(--paper);
  padding: 1rem;
  text-align: left;
  transition: all 0.2s;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--ink);
}
.hzm-index-item:hover {
  background: var(--overlay-light);
  box-shadow: 0 6px 20px -6px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.hzm-index-item-hanzi {
  font-family: var(--font-editorial);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-bottom: 0.25rem;
}

.hzm-index-item-name {
  font-family: var(--font-editorial);
  font-size: 1.25rem; font-weight: 400;
  margin-bottom: 0.75rem;
}

.hzm-index-item-desc {
  font-family: var(--font-editorial);
  font-size: 1rem;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

.hzm-index-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.hzm-index-item-tag {
  font-family: var(--font-editorial);
  font-size: 0.85rem; letter-spacing: 0.12em;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border-light);
  color: var(--ink-soft);
}

.hzm-close-index {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: inherit;
  transition: all 0.2s;
}
.hzm-close-index:hover { background: currentColor; color: var(--paper); }
@media (min-width: 768px) { .hzm-close-index { top: 1.5rem; right: 1.5rem; width: 3rem; height: 3rem; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. FOOTER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hzm-site-footer {
  margin-top: 60px;
  padding: 2.5rem 0 0;
  background: var(--ink);
  color: #C3CCC2;
}

.hzm-footer-wrap {
  max-width: 71.25rem;
  margin: 0 auto;
  padding: 0 1.625rem 2rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 2.5rem;
}

.hzm-footer-brand { max-width: 32ch; }

.hzm-footer-mark {
  width: 2rem; height: 2rem;
  margin-bottom: 0.75rem;
  display: grid; place-items: center;
  border-radius: 0.375rem;
  background: var(--jade);
  color: var(--paper);
  font-family: var(--font-hanzi);
  font-size: 1.1875rem; font-weight: 800; line-height: 1;
}

.hzm-site-footer p {
  margin: 0;
  color: #B6C1B6;
  font-size: 0.875rem; line-height: 1.55;
}

.hzm-footer-location {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: #90998E;
}

.hzm-site-footer h2 {
  margin: 0 0 0.625rem;
  color: #8B958A;
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; line-height: 1.4;
  text-transform: uppercase;
}

.hzm-institutes-row h2 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hzm-institutes-row h2 a:hover { color: var(--neon-jade); }

.hzm-site-footer nav a {
  display: block;
  padding: 0.2rem 0;
  color: #DDE3DA;
  font-size: 0.9375rem; line-height: 1.5;
  transition: color 0.2s ease;
}

.hzm-site-footer nav a:hover { color: var(--neon-jade); }

.hzm-footer-newsletter { max-width: 24rem; }

.hzm-newsletter label {
  display: block;
  font-size: 0.875rem;
  color: #B6C1B6;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.hzm-newsletter-row { display: flex; gap: 0; }

.hzm-newsletter input {
  flex: 1; min-width: 0;
  padding: 0.4rem 0.625rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.25rem 0 0 0.25rem;
  color: #DDE3DA;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.hzm-newsletter input::placeholder { color: #5A6258; }
.hzm-newsletter input:focus { border-color: var(--neon-jade); }

.hzm-newsletter button {
  padding: 0.4rem 0.875rem;
  background: var(--jade);
  border: 1px solid var(--jade);
  border-radius: 0 0.25rem 0.25rem 0;
  color: var(--paper);
  font-family: var(--font-system);
  font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.hzm-newsletter button:hover { background: var(--jade-dark); }

/* Institutes row — full width, between main columns and legal bar */
.hzm-institutes-row {
  max-width: 71.25rem;
  margin: 0 auto;
  padding: 1.25rem 1.625rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.hzm-institutes-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: baseline;
}

.hzm-institutes-links a {
  color: #90998E;
  font-family: var(--font-system);
  font-size: 0.9375rem;
  transition: color 0.2s ease;
}

.hzm-institutes-links a b {
  font-weight: 600;
  color: #C3CCC2;
}

.hzm-institutes-links a:hover,
.hzm-institutes-links a:hover b { color: var(--neon-jade); }

.hzm-legal-bar {
  max-width: 71.25rem;
  margin: 0 auto;
  padding: 0.75rem 1.625rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: #90998E;
}

.hzm-legal-bar nav { display: flex; gap: 1.25rem; }

.hzm-legal-bar a {
  color: #959E92;
  transition: color 0.2s ease;
}

.hzm-legal-bar a:hover { color: #C3CCC2; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20. MAP LEGACY (cosmos floor map SVG labels)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hzm-cosmos-map-shell {
  padding: 18px;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 12px;
}

.hzm-cosmos-map { min-width: 760px; }

.hzm-cosmos-map svg .label-halo { fill: #fff; opacity: 0.5; stroke-width: 0; }
.hzm-cosmos-map svg .label-bg { fill: #fff; opacity: 0.88; stroke-width: 0; }
.hzm-cosmos-map svg .lbl text { fill: #1C1E22; font-weight: 700; }
.hzm-cosmos-map svg .legend-room { font-size: 10px; fill: #1C1E22; }
.hzm-cosmos-map svg .legend-link:focus-visible .legend-room,
.hzm-cosmos-map svg .legend-room.hl { fill: #0A5C4A; font-weight: 700; }

.hzm-system-card.hzm-map-linked-active {
  border-color: var(--jade);
  background: rgba(14, 124, 102, 0.09);
  box-shadow: 0 0 0 3px rgba(14, 124, 102, 0.12);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   21. DARK MODE (independent, AA compliant)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.dark,
[data-color-scheme="dark"] {
  --paper: #1A1A1A;
  --ink: #F0F0F0;
  --ink-soft: #C7C7C7;
  --subtle: #A8A8A8;
  --ink-ui: #828282;
  --border-light: rgba(240, 240, 240, 0.1);
  --border-medium: rgba(240, 240, 240, 0.2);
  --border-heavy: rgba(240, 240, 240, 0.3);
  --overlay-light: rgba(255, 255, 255, 0.03);
  --overlay-medium: rgba(0, 0, 0, 0.3);
  --panel: #1A1A1A;
  --cream: #1E1E1E;
  --hair: rgba(240, 240, 240, 0.1);
  --hair-strong: rgba(240, 240, 240, 0.2);
}
.dark .hzm-cosmos-index { background: rgba(26, 26, 26, 0.98); }
.dark .hzm-sidebar-panel { background: var(--paper); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   22. RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 900px) {
  .hzm-brand-name { display: none; }
  .hzm-hero-strip { display: none; }
  .hzm-system-grid { grid-template-columns: 1fr; }

  .hzm-nav {
    position: fixed;
    top: var(--topbar-height); left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hair);
    padding: 0.5rem 1.625rem 1rem;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.2s ease, visibility 0.2s ease;
    z-index: 4998;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  }

  body.hzm-nav-open .hzm-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .hzm-nav-item {
    display: block;
    padding: 0.625rem 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--hair);
  }

  .hzm-nav-item:last-child { border-bottom: 0; }

  .hzm-top-bar-actions { margin-left: auto; }

  .hzm-nav-toggle {
    display: flex; flex-direction: column;
    justify-content: center; gap: 4px;
    width: 1.75rem; height: 1.75rem;
    padding: 0;
  }

  .hzm-nav-toggle-bar {
    display: block;
    width: 18px; height: 2px;
    background: var(--ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  body.hzm-nav-open .hzm-nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  body.hzm-nav-open .hzm-nav-toggle-bar:nth-child(2) { opacity: 0; }
  body.hzm-nav-open .hzm-nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

@media (min-width: 901px) {
  .hzm-nav-toggle { display: none; }
}

@media (max-width: 760px) {
  #hzm-top-bar { padding: 0 1.125rem; }

  .hzm-institute-wrap,
  .hzm-museum-intro,
  .hzm-meaning-grid {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  .hzm-home-hero .hzm-museum-intro {
    padding-left: 1.625rem;
    padding-right: 1.625rem;
  }

  .hzm-altar-grid { height: auto; }

  .hzm-pane-visual {
    position: relative; top: auto;
    height: auto; min-height: 42vh;
  }

  .hzm-pane-info {
    padding: 2rem 1.5rem 4rem;
    overflow-y: visible;
    height: auto;
  }

  .hzm-floor-explorer { display: none; }

  .hzm-cosmos-map-shell {
    margin-left: -1.125rem;
    margin-right: -1.125rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .hzm-footer-wrap { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .hzm-footer-brand { grid-column: 1 / -1; }
  .hzm-footer-newsletter { grid-column: 1 / -1; max-width: none; }
  .hzm-institutes-links { gap: 0.625rem 1.25rem; }
  .hzm-legal-bar { flex-direction: column; gap: 0.5rem; text-align: center; }

  .hzm-cosmos-map svg .legend-guide,
  .hzm-cosmos-map svg .legend-heading,
  .hzm-cosmos-map svg .legend-link,
  .hzm-cosmos-map svg .legend-room { display: none; }
}

@media (max-width: 767px) {
  .hzm-home-page .hzm-home-grid { padding-left: 1.5rem; padding-right: 1.5rem; }

  .hzm-filter-affordance {
    display: none;
  }
  body.hzm-view-maps:not(.hzm-room-open) .hzm-filter-affordance {
    display: block;
  }

  .hzm-cosmology-link-row { flex-wrap: wrap; gap: 0.25rem; }
  .hzm-top-bar-controls { gap: 0.75rem; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   23. REDUCED MOTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   24. PAGEFIND SEARCH UI
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#hzm-search .pagefind-ui {
  --pagefind-ui-scale: 0.8;
  --pagefind-ui-primary: var(--ink);
  --pagefind-ui-text: var(--ink-soft);
  --pagefind-ui-background: var(--cream);
  --pagefind-ui-border: var(--hair);
  --pagefind-ui-tag: rgba(14, 124, 102, 0.12);
  --pagefind-ui-border-radius: 0.4rem;
  --pagefind-ui-font: var(--font-editorial);
  font-family: var(--font-editorial);
}

.hzm-search-loading {
  font-family: var(--font-editorial);
  font-size: 1rem;
  opacity: 0.4;
  padding: 1rem 0;
}

#hzm-search .pagefind-ui__search-input {
  font-family: var(--font-editorial);
  font-weight: 600;
  background-color: var(--cream);
  border-color: var(--border-medium);
  color: var(--ink);
}

#hzm-search .pagefind-ui__search-input:focus {
  border-color: var(--jade);
}

#hzm-search .pagefind-ui__search-input::placeholder {
  font-weight: 400;
  opacity: 0.35;
}

#hzm-search mark {
  background: rgba(14, 124, 102, 0.14);
  color: var(--jade-dark);
  padding: 0.02rem 0.12rem;
  border-radius: 0.12rem;
}

#hzm-search .pagefind-ui__message {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  padding-top: 2rem;
}

#hzm-search .pagefind-ui__results-area {
  margin-top: 1.5rem;
}

#hzm-search .pagefind-ui__result {
  padding: 1.5rem 0;
  border-top: 1px solid var(--hair);
  gap: 0;
}

#hzm-search .pagefind-ui__result:last-of-type {
  border-bottom: 1px solid var(--hair);
}

#hzm-search .pagefind-ui__result-inner {
  margin-top: 0;
}

#hzm-search .pagefind-ui__result-title {
  font-family: var(--font-editorial);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
}

#hzm-search .pagefind-ui__result-title .pagefind-ui__result-link {
  color: var(--ink);
  transition: color 0.2s ease;
}

#hzm-search .pagefind-ui__result-title .pagefind-ui__result-link:hover {
  color: var(--jade);
  text-decoration: none;
}

#hzm-search .pagefind-ui__result-excerpt {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

#hzm-search .pagefind-ui__result-tags {
  gap: 0.5rem;
  margin-top: 0.75rem;
}

#hzm-search .pagefind-ui__result-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jade-dark);
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
}

#hzm-search .pagefind-ui__button:hover {
  border-color: var(--jade);
  color: var(--jade);
}

#hzm-search .hzm-result-glyph {
  display: block;
  font-family: var(--font-hanzi);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 0.5rem;
}