/* === Main: reset + shared base styles === */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-en);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--a-text);
  background: var(--a-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Chinese text inherits from body, but we set the CN stack for mixed content.
   Actual Chinese text inside gets the CN stack via lang attribute or explicit
   classes. The body default is EN stack — individual elements override. */

h1, h2, h3, h4 {
  line-height: var(--leading-heading);
  font-weight: 500;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* Focus: subtle ring, only for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--a-text);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--a-text);
  color: var(--a-bg);
}

/* While the iris runs, the hierarchy inverts: the logo takes the stage
   and the text of BOTH sides drops to the same ghost level the logo
   usually rests at (0.12). Normally text leads and the logo ghosts;
   during the transition, the logo leads and the text ghosts. */
body.is-transitioning .side-a > *:not(.prism-bg),
body.is-transitioning .side-b > *:not(.prism-bg-b) {
  opacity: 0.12;
}

/* ---- Section tracklist (板块目录) ----
   A quiet jump-to-category index at the head of each long section
   (Projects / Deep Think / Music Atlas). Editorial restraint: grey text
   links, never buttons or pills. Shared across both sides — each side sets
   --toc-fg and its own hover accent. The categories already exist in the
   content; this only makes the structure visible and navigable. */
.section-toc {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-lg);
  row-gap: var(--space-xs);
  margin: calc(-1 * var(--space-md)) 0 var(--space-2xl);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
}

.toc-item {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  color: var(--toc-fg, var(--a-text-tertiary));
  transition: color var(--dur-fast) var(--ease-out);
}

.toc-count {
  font-size: 0.85em;
  opacity: 0.65;
}

/* A jumped-to category settles a breath below the viewport top */
.track,
.music-category,
.dt-group {
  scroll-margin-top: var(--space-xl);
}

/* Utility: hide visually but keep accessible */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}