.hexagram-index-page, .hexagram-detail-page { padding: clamp(40px, 7vw, 82px) 0 88px; }
.dictionary-intro { width: 100%; }
.dictionary-intro h1 { margin: 8px 0 18px; font-size: clamp(46px, 8vw, 78px); letter-spacing: .12em; }
.dictionary-intro > p:last-child { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.9; }
.hexagram-filters { display: grid; grid-template-columns: minmax(240px, 1fr) 172px 172px auto; gap: 12px; align-items: end; margin: 40px 0 22px; padding: 22px; border: 1px solid var(--rule); background: var(--surface-tint); }
.hexagram-filters .filter-label, .hexagram-filters label > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.hexagram-filters input[type="search"] { width: 100%; height: 58px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 0 4px; color: var(--ink); background: transparent; font: 15px var(--serif); }
.hexagram-filters input[type="search"]:focus { outline: 2px solid var(--red); outline-offset: 3px; }
.hexagram-filters button { height: 46px; }
.trigram-field { min-width: 0; }
.trigram-picker { position: relative; }
.trigram-trigger { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; width: 100%; height: 58px !important; border: 0; border-bottom: 1px solid var(--ink); padding: 5px 3px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.trigram-trigger:hover, .trigram-trigger:focus-visible, .trigram-trigger[aria-expanded="true"] { color: var(--red-dark); outline: 0; border-color: var(--red); }
.trigram-trigger-figure, .trigram-mini { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 48px; height: 32px; }
.trigram-trigger-figure i, .trigram-mini i { display: block; height: 4px; background: currentColor; }
.trigram-trigger-figure i.yin, .trigram-mini i.yin { background: linear-gradient(to right, currentColor 0 40%, transparent 40% 60%, currentColor 60%); }
.trigram-trigger:has(.trigram-trigger-figure.is-all) { position: relative; display: flex; justify-content: flex-start; text-align: left; }
.trigram-trigger:has(.trigram-trigger-figure.is-all) .trigram-trigger-figure, .trigram-option.is-all .trigram-mini { display: none; }
.trigram-trigger:has(.trigram-trigger-figure.is-all) .trigram-chevron { position: absolute; right: 3px; }
.trigram-trigger-copy strong, .trigram-trigger-copy small, .trigram-option strong, .trigram-option small { display: block; }
.trigram-trigger-copy strong { font-size: 15px; }
.trigram-trigger-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.trigram-chevron { width: 7px; height: 7px; margin-right: 4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; rotate: 45deg; translate: 0 -2px; }
.trigram-trigger[aria-expanded="true"] .trigram-chevron { rotate: 225deg; translate: 0 2px; }
.trigram-options { position: absolute; z-index: 12; top: calc(100% + 8px); right: 0; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); width: min(330px, calc(100vw - 56px)); padding: 8px; border: 1px solid var(--rule); background: var(--paper-light); box-shadow: 0 16px 40px var(--shadow); }
.trigram-options[hidden] { display: none; }
.trigram-option { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; width: 100%; height: 66px !important; border: 0; padding: 9px 10px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.trigram-option.is-all { display: flex; justify-content: flex-start; text-align: left; }
.trigram-option:hover, .trigram-option:focus-visible { background: var(--accent-soft); outline: 1px solid var(--red); outline-offset: -1px; }
.trigram-option[aria-selected="true"] { color: var(--red-dark); background: var(--accent-medium); }
.trigram-option strong { font-size: 16px; }
.trigram-option small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.index-status { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; letter-spacing: .1em; }
.index-status p { margin: 0; color: var(--red); font-weight: 700; }
.hexagram-index-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0 0; padding: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); list-style: none; }
.hexagram-index-item { min-width: 0; }
.hexagram-index-item a { position: relative; display: grid; grid-template-columns: 28px 50px 1fr; gap: 14px; align-items: center; min-height: 116px; height: 100%; padding: 18px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: background .18s ease, color .18s ease; }
.hexagram-index-item a:hover, .hexagram-index-item a:focus-visible { color: var(--red-dark); background: var(--surface-tint); outline: 0; }
.index-number { align-self: start; color: var(--red); font-size: 11px; font-weight: 700; }
.index-copy { min-width: 0; }
.index-copy strong, .index-copy small { display: block; }
.index-copy strong { font-size: 25px; letter-spacing: .08em; }
.index-copy small { overflow: hidden; margin-top: 5px; color: var(--gold); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.index-arrow { position: absolute; right: 12px; top: 10px; color: var(--muted); font-size: 11px; opacity: 0; transition: opacity .18s ease; }
.hexagram-index-item a:hover .index-arrow, .hexagram-index-item a:focus-visible .index-arrow { opacity: 1; }
.hexagram-lines { display: flex; flex-direction: column; gap: 8px; width: 130px; }
.hexagram-lines i { display: block; height: 8px; background: var(--ink); }
.hexagram-lines i.yin { background: linear-gradient(to right, var(--ink) 0 42%, transparent 42% 58%, var(--ink) 58%); }
.hexagram-lines.is-compact { gap: 4px; width: 50px; }
.hexagram-lines.is-compact i { height: 4px; }
.hexagram-empty { margin: 48px auto; color: var(--muted); text-align: center; }
.breadcrumb { display: flex; gap: 10px; margin-bottom: 38px; color: var(--muted); font-size: 12px; }
.breadcrumb a { color: var(--red); }
.hexagram-hero { display: flex; justify-content: space-between; gap: 48px; align-items: center; padding: clamp(30px, 6vw, 64px); border: 1px solid var(--rule); background: var(--surface-tint); }
.hexagram-hero h1 { display: flex; align-items: center; gap: 20px; margin: 8px 0 12px; font-size: clamp(52px, 9vw, 88px); letter-spacing: .12em; line-height: 1; }
.hexagram-symbol { color: var(--red); font-size: .72em; font-weight: 400; }
.hexagram-theme { margin: 0; color: var(--gold); font-size: 15px; letter-spacing: .16em; }
.hero-diagram { min-width: 170px; }
.hero-diagram .hexagram-lines { margin: 0 auto; }
.hero-diagram p { display: grid; gap: 6px; margin: 20px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.canonical-passages { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 42px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.canonical-passages section { padding: clamp(24px, 4vw, 40px); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.canonical-passages h2, .line-passage h4 { margin: 0 0 16px; color: var(--red); font-size: 12px; letter-spacing: .16em; }
.canonical-passages p { margin: 0; font-size: 18px; line-height: 2; }
.line-section { max-width: 880px; margin: clamp(60px, 10vw, 110px) auto 0; }
.line-section > header { margin-bottom: 32px; }
.line-section > header h2 { margin: 8px 0 10px; font-size: clamp(30px, 5vw, 44px); }
.line-section > header > p:last-child { color: var(--muted); }
.line-passage { display: grid; grid-template-columns: 110px 1fr 1fr; gap: clamp(20px, 4vw, 48px); padding: 30px 0; border-top: 1px solid var(--rule); }
.line-passage:last-child { border-bottom: 1px solid var(--rule); }
.line-passage header { display: flex; gap: 12px; align-items: center; align-self: start; }
.line-passage h3 { margin: 0; font-size: 20px; }
.line-passage h4 { margin-bottom: 9px; }
.line-passage p { margin: 0; line-height: 1.9; }
.line-marker { display: block; width: 32px; height: 5px; background: var(--ink); }
.line-marker.yin { background: linear-gradient(to right, var(--ink) 0 40%, transparent 40% 60%, var(--ink) 60%); }
.hexagram-pagination { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--rule); }
.hexagram-pagination a { color: var(--red); text-decoration: none; }
.hexagram-pagination a:last-child { text-align: right; }
.hexagram-pagination small, .hexagram-pagination strong { display: block; }
.hexagram-pagination small { margin-bottom: 5px; color: var(--muted); }

@media (max-width: 820px) {
  .hexagram-filters { grid-template-columns: 1fr 1fr; }
  .search-field { grid-column: 1 / -1; }
  .hexagram-index-grid { grid-template-columns: repeat(2, 1fr); }
  .canonical-passages { grid-template-columns: 1fr; }
  .line-passage { grid-template-columns: 90px 1fr; }
  .line-passage > div:last-child { grid-column: 2; }
}

@media (max-width: 540px) {
  .hexagram-index-page, .hexagram-detail-page { padding-top: 34px; }
  .hexagram-filters { grid-template-columns: 1fr; padding: 16px; }
  .search-field { grid-column: auto; }
  .trigram-options { right: auto; left: 0; }
  .hexagram-index-grid { grid-template-columns: 1fr; }
  .hexagram-index-item a { min-height: 96px; }
  .hexagram-hero { align-items: flex-start; flex-direction: column; gap: 34px; }
  .hero-diagram { min-width: 0; }
  .hero-diagram .hexagram-lines { margin: 0; }
  .hero-diagram p { text-align: left; }
  .line-passage { grid-template-columns: 1fr; gap: 18px; }
  .line-passage > div:last-child { grid-column: auto; }
  .hexagram-pagination { grid-template-columns: 1fr 1fr; }
  .hexagram-pagination > a:nth-child(2) { grid-column: 1 / -1; grid-row: 1; text-align: center; }
}