/* =============================================================================
   DECODE INDEX — 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.72; font-weight: 400; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.005em; }
p { margin-bottom: 1.2em; }
ul, ol { padding-left: 1.4em; }
li { margin-bottom: 0.4em; }
.vertical-hero { background-color: var(--ink); color: var(--paper); padding-block: var(--space-xl); border-bottom: 1px solid rgba(212,207,197,0.12); }
.vertical-hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: end; }
@media (min-width: 800px) {
.vertical-hero__inner {
grid-template-columns: 1fr auto;
gap: var(--space-xl);
}
}
.vertical-hero__point { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: var(--space-s); }
.vertical-hero__name { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; letter-spacing: -0.03em; color: var(--paper); line-height: 0.95; margin-bottom: var(--space-m); }
.vertical-hero__desc { font-size: 1.05rem; line-height: 1.7; color: rgba(247,244,238,0.65); max-width: 560px; font-weight: 300; margin-bottom: 0; }
.vertical-hero__stats { display: flex; flex-direction: row; gap: var(--space-l); padding-top: var(--space-m); border-top: 1px solid rgba(212,207,197,0.15); }
@media (min-width: 800px) {
.vertical-hero__stats {
flex-direction: column;
gap: var(--space-m);
padding-top: 0;
border-top: none;
border-left: 1px solid rgba(212,207,197,0.15);
padding-left: var(--space-l);
text-align: right;
}
}
.hero-stat__num { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--paper); line-height: 1; margin-bottom: 0.2rem; }
.hero-stat__label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,244,238,0.4); }
.index-layout { padding-block: var(--space-xl); }
.index-layout__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }
@media (min-width: 900px) {
.index-layout__inner {

grid-template-columns: 220px 1fr;
gap: var(--space-xl);
}
}
.index-sidebar {  }
@media (min-width: 900px) {
.index-sidebar {
position: sticky;
top: var(--space-l);
}
}
.filter-toggle { border: 1px solid var(--rule); padding: 0; background: none; }
.filter-toggle summary { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); padding: var(--space-s) var(--space-m); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--rule); }
.filter-toggle summary::after { content: '+'; font-family: var(--font-mono); font-size: 0.8rem; color: var(--light); }
.filter-toggle[open] summary::after { content: '−'; }
.filter-toggle summary::-webkit-details-marker { display: none; }
@media (min-width: 900px) {
.filter-toggle {
border: none;
}
.filter-toggle summary {
display: none;
}
.filter-toggle[open],
.filter-toggle:not([open]) {

}
}
.filter-group { padding: var(--space-m); }
@media (min-width: 900px) {
.filter-group { padding: 0; }
}
.filter-section { margin-bottom: var(--space-l); }
.filter-section:last-child { margin-bottom: 0; }
.filter-section__label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--light); display: block; margin-bottom: var(--space-s); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--rule); }
.filter-links { list-style: none; padding: 0; }
.filter-links li { margin-bottom: 0.5rem; }
.filter-links a { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-decoration: none; color: var(--mid); display: flex; justify-content: space-between; align-items: baseline; }
.filter-links a:hover { color: var(--red); }
.filter-links a:visited { color: var(--mid); }
.filter-count { font-size: 0.6rem; color: var(--light); font-variant-numeric: tabular-nums; }
.sidebar-paths { margin-top: var(--space-l); padding-top: var(--space-l); border-top: 1px solid var(--rule); }
.sidebar-path-link { display: block; text-decoration: none; padding: var(--space-s) var(--space-m); border: 1px solid var(--rule); margin-bottom: var(--space-xs); }
.sidebar-path-link:hover { border-color: var(--ink); }
.sidebar-path-link:visited { color: var(--link-visited); }
.sidebar-path-link__label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 0.2rem; }
.sidebar-path-link__title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.index-content__header { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: space-between; align-items: baseline; margin-bottom: var(--space-l); padding-bottom: var(--space-m); border-bottom: 2px solid var(--ink); }
.index-content__title { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; letter-spacing: -0.015em; }
.index-content__count { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; color: var(--mid); }
.content-section { margin-bottom: var(--space-xl); }
.content-section__heading { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); margin-bottom: var(--space-m); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; }
.content-section__heading span { color: var(--light); font-size: 0.58rem; }
.content-list { list-style: none; padding: 0; }
.concept-card { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); padding-block: var(--space-m); }
.concept-card:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 560px) {
.concept-card {
grid-template-columns: 68px 1fr;
gap: var(--space-m);
align-items: start;
}
}
.concept-card__glyph { font-family: var(--font-display); font-size: 2.8rem; line-height: 1; color: var(--ink); padding-top: 0.1rem; }
.concept-card__body { display: flex; flex-direction: column; gap: 0.3rem; }
.concept-card__meta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.concept-card__type { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.concept-card__pinyin { font-family: var(--font-mono); font-size: 0.68rem; color: var(--mid); letter-spacing: 0.04em; }
.concept-card__readtime { font-family: var(--font-mono); font-size: 0.58rem; color: var(--light); letter-spacing: 0.06em; margin-left: auto; }
.concept-card__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: var(--ink); margin: 0; }
.concept-card__title a { text-decoration: none; color: inherit; }
.concept-card__title a:hover { color: var(--red); }
.concept-card__hook { font-size: 0.9rem; line-height: 1.55; color: var(--mid); margin: 0; }
.concept-card__hook .mistranslation { font-style: italic; color: var(--light); text-decoration: line-through; }
.scenario-card { border-top: 1px solid var(--rule); padding-block: var(--space-m); display: grid; grid-template-columns: 1fr; gap: 0.4rem; }
.scenario-card:last-child { border-bottom: 1px solid var(--rule); }
.scenario-card__meta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.scenario-card__type { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.scenario-card__context { font-family: var(--font-mono); font-size: 0.62rem; color: var(--mid); letter-spacing: 0.04em; }
.scenario-card__readtime { font-family: var(--font-mono); font-size: 0.58rem; color: var(--light); margin-left: auto; }
.scenario-card__trigger { font-family: var(--font-display); font-size: 1.05rem; font-style: italic; font-weight: 400; color: var(--ink); border-left: 3px solid var(--gold); padding-left: var(--space-s); margin: 0.2rem 0; line-height: 1.4; }
.scenario-card__trigger a { text-decoration: none; color: inherit; }
.scenario-card__trigger a:hover { color: var(--red); }
.scenario-card__desc { font-size: 0.88rem; color: var(--mid); line-height: 1.55; margin: 0; }
.paths-block { background-color: var(--gold-tint); border-top: 2px solid var(--gold); padding: var(--space-l); margin-top: var(--space-xl); }
.paths-block__label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: var(--space-xs); }
.paths-block__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--ink); margin-bottom: var(--space-s); }
.paths-block__desc { font-size: 0.92rem; line-height: 1.65; color: var(--mid); margin-bottom: var(--space-m); }
.paths-block__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-s); list-style: none; padding: 0; }
@media (min-width: 560px) {
.paths-block__grid { grid-template-columns: repeat(2,1fr); }
}
.path-option { border: 1px solid var(--rule); padding: var(--space-m); background-color: var(--paper); display: flex; flex-direction: column; gap: 0.3rem; }
.path-option:hover { border-color: var(--gold); }
.path-option__role { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.path-option__name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); }
.path-option__name a { text-decoration: none; color: inherit; }
.path-option__name a:hover { color: var(--red); }
.path-option__desc { font-size: 0.82rem; color: var(--mid); line-height: 1.5; margin: 0; }
.archaeology-teaser { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--rule); }
.archaeology-teaser__label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid); display: block; margin-bottom: var(--space-xs); }
.archaeology-teaser__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--ink); margin-bottom: var(--space-s); }
.archaeology-teaser__desc { font-size: 0.95rem; line-height: 1.7; color: var(--mid); max-width: 620px; margin-bottom: var(--space-m); }
.archaeology-entries { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-s); }
@media (min-width: 640px) {
.archaeology-entries { grid-template-columns: repeat(2,1fr); }
}
.archaeology-entry { border: 1px solid var(--rule); padding: var(--space-m); display: flex; flex-direction: column; gap: 0.3rem; background-color: var(--paper-tint); }
.archaeology-entry:hover { border-color: var(--ink); }
.archaeology-entry__label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); }
.archaeology-entry__title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.archaeology-entry__title a { text-decoration: none; color: inherit; }
.archaeology-entry__title a:hover { color: var(--red); }
.archaeology-entry__desc { font-size: 0.82rem; color: var(--mid); line-height: 1.5; margin: 0; }

@media print {
  .site-footer, .paths-block { display: none; }
  body { background: white; color: black; font-size: 12pt; }
  a { color: black; text-decoration: underline; }
  h1,h2,h3 { page-break-after: avoid; }
  .wrap, .wrap--prose, .wrap--wide { max-width:100%; padding:0; }
}