/* The home page (spec 2026-10-21-home-redesign): the opening of chapter 1 as the hero, the
   answer under the H1, the chapter of the day, the chapters in the book's two parts, the key
   terms, how the site works, and the book in figures. Loaded on every app page, because the
   router swaps the home page in and out without reloading the styles. */
.page-home { --hero-size: 2.2rem; }
html.js body.app.page-home main > * { max-width: 76rem; margin-inline: auto; }

/* Hero: the opening lines, large and centred, painted by the player like a chapter */
.hero { margin: 0 auto var(--space-4); padding: var(--space-4) 0 var(--space-3); border-radius: var(--radius); background: radial-gradient(ellipse at 50% 0%, var(--hero-glow), transparent 70%); text-align: center; }
.hero .line, html.js body.app .hero .line { display: block; padding: var(--space-2) var(--space-3); border: 0; }
.hero .line.active { background: none; box-shadow: none; }
.hero .zh, html.js body.app .hero .zh { font-size: calc(var(--hero-size) * var(--user-scale, 1)); line-height: 1.8; letter-spacing: 0.08em; }
.hero .tr, html.js body.app .hero .tr { margin: 0; color: var(--text-muted); font-size: calc(var(--step-0) * var(--user-scale, 1)); font-style: italic; }

/* H1, the answer and the two buttons */
.intro { text-align: center; }
html.js body.app .intro h1 { margin: 0 0 var(--space-3); }
.intro .h1-zh { font-size: var(--step-3); letter-spacing: 0.12em; }
.intro .lead { max-width: 40rem; margin: 0 auto var(--space-4); font-size: var(--step-0); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; }
.button { appearance: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-4); border: 0; border-radius: 999px; background: var(--red); color: var(--on-red); font: 600 var(--step-0) var(--font-ui); text-decoration: none; cursor: pointer; }
.button .icon { width: 1.1rem; height: 1.1rem; }
.button.quiet { background: var(--surface-2); color: var(--text); }
.button:hover { filter: brightness(1.1); }
html:not(.js) [data-play-preview] { display: none; }

.page-home h2 { margin: var(--space-5) 0 var(--space-3); }

/* Chapter of the day */
.today-card { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius); background: var(--surface-2); box-shadow: var(--shadow); color: var(--text); text-decoration: none; }
.today-card:hover { background: var(--surface-2); filter: brightness(1.08); }
.today-zh { color: var(--red-text); font: 600 var(--step-0) var(--font-zh); letter-spacing: 0.1em; }
.today-first { font: var(--step-2) var(--font-zh); letter-spacing: 0.06em; }
.today-tr { color: var(--text-muted); font-style: italic; }
.today-go { margin-top: var(--space-2); color: var(--red-text); font: 600 var(--step--1) var(--font-ui); }
.today-go::after { content: " →"; }

/* The two parts and their tiles */
.part-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); margin: var(--space-4) 0 var(--space-3); font-size: var(--step-0); }
.part-zh { font: 600 var(--step-1) var(--font-zh); letter-spacing: 0.1em; }
.part-range { color: var(--text-muted); font-size: var(--step--1); font-weight: 400; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.tile { position: relative; display: grid; gap: 0.1rem; padding: var(--space-2) var(--space-3); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; }
a.tile:hover { background: var(--surface-2); }
.tile b { color: var(--text-muted); font: 600 var(--step--1) var(--font-ui); font-variant-numeric: tabular-nums; }
.tile-zh { font-family: var(--font-zh); font-size: 1.15rem; letter-spacing: 0.04em; white-space: nowrap; }
.tile.soon { background: transparent; border: 1px dashed var(--line); color: var(--text-muted); font-size: var(--step--1); }

/* Heard to the end: a dot on the tile, the sidebar row and the strip number (§6) */
.tile[data-heard]::after, .chapter-list a[data-heard]::after, .strip a[data-heard]::after { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--red-text); }
.tile[data-heard]::after { position: absolute; top: 0.6rem; right: 0.6rem; }
.chapter-list a[data-heard]::after { flex: none; align-self: center; margin-left: auto; }
.strip a[data-heard] { position: relative; }
.strip a[data-heard]::after { position: absolute; bottom: 0.25rem; left: calc(50% - 0.2rem); }
.chapter-list a[aria-current][data-heard]::after, .strip a[aria-current][data-heard]::after { background: var(--on-red); }

/* Key terms */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: baseline; gap: var(--space-2); padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; }
.chip:hover { background: var(--surface-2); }
.chip-zh { font: 600 var(--step-1) var(--font-zh); }
.chip-py { color: var(--text-muted); font-size: var(--step--1); font-style: italic; }
.chip-gloss { font-size: var(--step--1); }
.more-link { margin: var(--space-3) 0 0; }

/* How it works: four live samples drawn with the site's own styles */
.how-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.how-tiles li { padding: var(--space-3) var(--space-4) var(--space-4); border-radius: var(--radius); background: var(--surface); }
.how-tiles h3 { margin: var(--space-2) 0 var(--space-1); font-size: var(--step-0); }
.how-tiles p { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
.how-tiles .demo { display: grid; place-items: center start; min-height: 3.5rem; color: var(--text); }
.demo-zh { font-family: var(--font-zh); font-size: 1.6rem; letter-spacing: 0.06em; }
.demo-zh > span { color: var(--text-dim); }
.demo-zh > .p { color: var(--text); }
.demo-zh > .n { color: var(--text); text-shadow: 0 0 0.45em var(--glow); }
.demo-zh > .hid { color: transparent; background: linear-gradient(var(--text-dim), var(--text-dim)) center / 82% 0.35em no-repeat; }
.demo-card { display: inline-flex; align-items: baseline; gap: var(--space-2); padding: 0.3rem 0.8rem; border-radius: 10px; background: var(--surface-2); box-shadow: var(--shadow); }
.demo-card .demo-zh { color: var(--text); }
.demo-py { color: var(--text-muted); font-style: italic; }
.demo-gloss { font-size: var(--step--1); }
.demo-share { display: inline-grid; gap: 0.1rem; padding: 0.35rem 0.9rem; border-radius: 8px; background: var(--share-bg); box-shadow: var(--shadow); }
.demo-share .demo-zh { color: var(--share-text); font-size: 1.3rem; }
.demo-site { color: var(--share-muted); font: 0.7rem var(--font-ui); }

/* The book in figures */
.facts { width: 100%; border-collapse: collapse; }
.facts th, .facts td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.facts th { width: 34%; color: var(--text-muted); font-weight: 400; }
.facts tr:nth-child(odd) { background: var(--surface); }

@media (min-width: 48rem) {
  .page-home { --hero-size: 3rem; }
  .hero { padding-top: var(--space-5); }
  .intro .h1-zh { font-size: 2.6rem; }
}
@media (min-width: 64rem) {
  .page-home { --hero-size: 3.4rem; }
  html.js body.app.page-home main { padding-top: var(--space-4); }
  /* Desktop: larger tiles, chips and samples across the wider page (spec 2026-10-21-desktop-polish §5) */
  .page-home h2 { font-size: 1.6rem; }
  .intro .lead { max-width: 48rem; font-size: var(--step-1); }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--space-3); }
  .tile { padding: var(--space-3) var(--space-4); }
  .tile b { font-size: var(--step-0); }
  .tile-zh { font-size: 1.45rem; }
  .part-h { font-size: var(--step-1); }
  .part-zh { font-size: var(--step-2); }
  .chip { padding: 0.55rem 1.1rem; }
  .chip-zh { font-size: var(--step-2); }
  .chip-py, .chip-gloss { font-size: var(--step-0); }
  .how-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .how-tiles h3 { font-size: var(--step-1); }
  .how-tiles p { font-size: var(--step-0); }
  .today-card { grid-template-columns: auto 1fr; align-items: baseline; column-gap: var(--space-4); padding: var(--space-4) var(--space-5); }
  .today-zh { grid-row: 1 / span 3; font-size: var(--step-1); }
  .today-first { font-size: var(--step-3); }
  .today-tr { font-size: var(--step-1); }
  .facts { font-size: 1.0625rem; }
}