/* =============================================================================
   ZIJIREN — PAGE-SPECIFIC STYLES
   Load after common.css
   ============================================================================= */

body { background-color: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.75; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; color: var(--ink); }
.breadcrumb__list a, .breadcrumb__list span { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); text-decoration: none; }
.article-header__glyph { font-family: var(--font-display); font-size: clamp(5rem, 14vw, 10rem); line-height: 0.9; color: var(--paper-tint); display: block; text-align: center; margin-bottom: var(--space-s); border-bottom: 2px solid var(--rule); padding-bottom: var(--space-m); }
@media (min-width: 960px) { .article-header__glyph { font-size: 8rem; text-align: right; color: rgba(212,207,197,0.5); border-bottom: none; padding-bottom: 0; margin-bottom: 0; } }
.circles-figure { margin-block: var(--space-xl); }
.circles-figure__caption { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid); display: block; margin-bottom: var(--space-l); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--rule); }
.circles-diagram {  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-xl);  min-height: 300px; }
.ring { border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ring--outer { width: 300px; height: 300px; border: 2px dashed var(--light); background-color: transparent; }
.ring--acquaintance { width: 236px; height: 236px; border: 1px solid var(--rule); background-color: var(--paper); }
.ring--professional { width: 176px; height: 176px; border: 1px solid var(--mid); background-color: var(--paper-tint); }
.ring--insider { width: 114px; height: 114px; border: 2px solid var(--ink); background-color: var(--paper); }
.ring--core { width: 56px; height: 56px; border-radius: 50%; background-color: var(--ink); flex-shrink: 0; }
@media (max-width: 360px) {
.ring--outer        { width: 260px; height: 260px; }
.ring--acquaintance { width: 204px; height: 204px; }
.ring--professional { width: 152px; height: 152px; }
.ring--insider      { width:  98px; height:  98px; }
.ring--core         { width:  48px; height:  48px; }
}
.circles-legend { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--rule); }
@media (min-width: 520px) {
.circles-legend { grid-template-columns: repeat(2, 1fr); }
}
.legend-item { padding: var(--space-m); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); align-items: start; }
.legend-item:last-child { border-bottom: none; }
@media (min-width: 520px) {

.legend-item:nth-last-child(-n+2) { border-bottom: none; }

.legend-item:nth-child(even) { border-left: 1px solid var(--rule); }
}
.legend-item__swatch { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 0.2rem; }
.legend-item__swatch--outer        { border: 2px dashed var(--light); background: transparent; }
.legend-item__swatch--acquaintance { border: 1px solid var(--rule); background: var(--paper); }
.legend-item__swatch--professional { border: 1px solid var(--mid); background: var(--paper-tint); }
.legend-item__swatch--insider      { border: 2px solid var(--ink); background: var(--paper); }
.legend-item__swatch--core         { background: var(--ink); border: none; }
.legend-item__body {}
.legend-item__chinese { font-family: var(--font-display); font-size: 1rem; color: var(--ink); display: block; line-height: 1; margin-bottom: 0.2rem; }
.legend-item__name { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); display: block; margin-bottom: 0.3rem; }
.legend-item__desc { font-size: 0.84rem; color: var(--mid); line-height: 1.55; margin-bottom: 0; }
.legend-item--highlight { background-color: var(--gold-tint); }
.legend-item--highlight .legend-item__chinese { color: var(--ink); }
.legend-item--highlight .legend-item__name { color: var(--gold); }
.legend-item--highlight .legend-item__desc { color: var(--ink); }
.transition-table { width: 100%; border-collapse: collapse; margin-block: var(--space-l); font-size: 0.88rem; }
.transition-table caption { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); text-align: left; padding-bottom: var(--space-s); caption-side: top; }
.transition-table th { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); text-align: left; padding: var(--space-xs) var(--space-s); border-bottom: 2px solid var(--ink); font-weight: 500; }
.transition-table td { padding: var(--space-s); border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.6; }
.transition-table tr:last-child td { border-bottom: none; }
.transition-table td:first-child { font-weight: 600; font-size: 0.82rem; color: var(--mid); white-space: nowrap; padding-right: var(--space-m); }
.transition-table td:nth-child(2) { color: var(--light); font-style: italic; }
.transition-table td:nth-child(3) { color: var(--ink); }
.transition-table th:nth-child(2) { color: var(--light); }
.transition-table th:nth-child(3) { color: var(--ink); }
@media (max-width: 520px) {
.transition-table thead { display: none; }
.transition-table tr { display: block; margin-bottom: var(--space-m); border-bottom: 2px solid var(--rule); padding-bottom: var(--space-s); }
.transition-table td { display: block; padding: 0.3rem 0; border: none; }
.transition-table td::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light); margin-bottom: 0.2rem; }
}
.violation-block { border: 1px solid var(--rule); border-left: 3px solid var(--red); padding: var(--space-l); margin-block: var(--space-l); background-color: var(--paper-tint); }
.violation-block__label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: var(--space-s); }
.violation-block__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: var(--space-s); }
.violation-block p { font-size: 0.92rem; color: var(--ink); line-height: 1.7; }

@media print {
  .site-header, .site-nav, .article-sidebar, .site-footer, .breadcrumb { display: none; }
  h1,h2,h3 { page-break-after: avoid; }
  .circles-figure, .field-example, .key-fact, .violation-block { page-break-inside: avoid; }
  .wrap, .wrap--wide { max-width: 100%; padding: 0; }
}