@import url("design-tokens.css");

/* ---------- Chinese pages ---------- */
.lang-zh {
  font-family: var(--font-han);
  line-height: 1.85;
}

.lang-zh .site-title {
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.lang-zh .site-lede,
.lang-zh .prose,
.lang-zh .reading-section p {
  line-height: 1.9;
}

.lang-zh .reading-en {
  font-family: var(--font-serif);
}

.zh-lines {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline);
}

.zh-line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: var(--hairline);
}

.zh-line-name {
  font-size: var(--step--1);
  color: var(--fg-muted);
  white-space: nowrap;
}

.zh-line-text {
  margin: 0;
  font-family: var(--font-han);
  font-size: var(--step-1);
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.zh-line-plain {
  margin: 0;
  color: var(--ink-700);
}

@media (max-width: 900px) {
  .zh-line {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .zh-line-plain {
    grid-column: 2;
  }
}

/* ---------- Site shell ---------- */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(var(--space-8), 6vw, var(--space-24));
  align-items: center;
}

.home-figure {
  margin: 0;
}

.home-figure-num {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

.home-hex {
  display: grid;
  gap: 14px;
}

.home-hex .hex-bar {
  height: 16px;
}

.home-caption {
  margin-block-start: var(--space-6);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--fg-muted);
}

.home-caption strong {
  font-family: var(--font-han);
  font-weight: 500;
  color: var(--fg);
}

.home-caption span {
  display: block;
  margin-block-start: var(--space-2);
}

@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-figure {
    max-width: 420px;
    margin-block-start: var(--space-8);
  }
}

/* ---------- Site shell ---------- */
.site-main {
  padding-block: clamp(var(--space-12), 7vw, var(--space-24));
}

.site-title {
  margin: 0 0 var(--space-6);
  max-width: 18ch;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.site-lede {
  max-width: 42ch;
  margin: 0 0 var(--space-8);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-700);
}

.site-section {
  padding-block: clamp(var(--space-12), 6vw, var(--space-24));
  border-top: var(--hairline);
}

.site-section h2 {
  margin: 0 0 var(--space-6);
  font-size: var(--step-1);
  font-style: italic;
  font-weight: 400;
}

.prose {
  max-width: var(--measure);
}

.prose p {
  margin: 0 0 var(--space-4);
}

.prose h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--step-1);
  font-weight: 500;
}

.prose ul {
  margin: 0 0 var(--space-4);
  padding-inline-start: 1.2em;
}

.prose li {
  margin-block: var(--space-2);
}

/* ---------- Hexagram index ---------- */
.hex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline);
}

.hex-grid li {
  border-bottom: var(--hairline);
}

.hex-grid a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  min-height: 64px;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  color: var(--fg);
  text-decoration: none;
}

.hex-grid a:hover .hex-grid-name {
  color: var(--accent);
}

.hex-grid-glyph {
  font-size: var(--step-1);
  line-height: 1.2;
}

.hex-grid-num {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}

.hex-grid-name {
  font-family: var(--font-han);
  font-size: var(--step-0);
  transition: color 160ms ease;
}

.hex-grid-en {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--step--1);
  color: var(--fg-muted);
}

/* ---------- Cast page ---------- */
.cast-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: start;
}

.cast-panel {
  position: sticky;
  top: var(--space-6);
}

.field textarea {
  width: 100%;
  min-height: 96px;
  padding: var(--space-3);
  border: 1px solid var(--rule-strong);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
}

.cast-lines {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cast-line {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 44px;
  gap: var(--space-3);
  align-items: center;
  min-height: 32px;
}

.cast-bar {
  height: 10px;
  background: var(--fg);
}

.cast-bar--yin {
  background: transparent;
  background-image: linear-gradient(to right, var(--fg) 0 44%, transparent 44% 56%, var(--fg) 56% 100%);
}

.cast-bar--moving {
  background-color: var(--signal);
}

.cast-line-label {
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.reading {
  min-height: 320px;
}

.reading-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}

.reading-glyph {
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 1;
}

.reading-name {
  font-family: var(--font-han);
  font-size: var(--step-3);
}

.reading-en {
  font-size: var(--step-1);
  font-style: italic;
  color: var(--fg-muted);
}

.reading-section {
  padding-block: var(--space-4);
  border-top: var(--hairline);
}

.reading-section h2,
.reading-section h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}

.reading-section p {
  margin: 0 0 var(--space-2);
  max-width: var(--measure);
}

.citations {
  margin-block-start: var(--space-4);
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.disclaimer {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-3);
  border-top: var(--hairline);
  font-size: var(--step--1);
  color: var(--fg-muted);
  max-width: var(--measure);
}

.error {
  color: var(--signal);
}

.loading {
  color: var(--fg-muted);
  font-style: italic;
}

@media (max-width: 900px) {
  .cast-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cast-panel {
    position: static;
  }
}