/* Homepage front page: four facets, four different editorial rhythms.
 * Taste-skill dials: VARIANCE 8 / MOTION 3 / DENSITY 3.
 * Hero lede: baked watercolor washes carry the first impression. */
/* The band bleeds past the reading column into the container's gutters; the
 * matching inline padding keeps the question on the page's reading grid —
 * without it the hero copy sits flush against the band edge and, below 800px,
 * against the physical screen edge. */
.press-home-lede { border-bottom: 1px solid var(--line); padding: clamp(4rem, 10vw, 7rem) clamp(1rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); position: relative; margin-inline: calc(-1 * clamp(1rem, 3vw, 2.5rem)); overflow: hidden; }
.press-home-lede-wash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
html:not(.dark) .press-home-lede-wash[data-wash="dark"] { display: none; }
html.dark .press-home-lede-wash[data-wash="light"] { display: none; }
.press-home-lede::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, color-mix(in oklab, var(--paper) 62%, transparent) 0%, color-mix(in oklab, var(--paper) 30%, transparent) 45%, color-mix(in oklab, var(--paper) 8%, transparent) 75%, transparent 100%); }
.press-home-lede > * { position: relative; z-index: 1; }

/* ── Mascot rain: stickers drift through the hero's morning sky ──
 * Lanes are invisible vertical rails; the sprite rides its lane down with a
 * vh-based transform (GPU), sways side to side, and tilts gently — never a
 * full spin, the mascots must not hang upside down. The hero's overflow
 * hides and the paper scrim fades sprites near the bottom into depth.
 * Randomness is client-only (see components/home/mascot-rain.tsx); under
 * reduced motion no sprite exists. The container overrides the
 * `.press-home-lede > *` position rule by specificity. */
/* z stack inside the lede: wash (0) < scrim (1) < rain (2) < text (3).
 * The rain must ride ABOVE the paper scrim — pastel sprites under a 8–62%
 * paper veil wash out to nothing — while the question stays topmost. */
.press-home-lede > .press-mascot-rain { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; opacity: 0.72; }
.press-home-lede > .press-edition-line, .press-home-lede > h1, .press-home-lede > p { z-index: 3; }
.press-mascot-lane { position: absolute; top: 0; left: var(--x, 50%); height: 100%; width: 0; }
.press-mascot-sprite { position: absolute; top: 0; animation: press-mascot-fall var(--fall, 13s) linear var(--delay, 0s) infinite; will-change: transform; }
.press-mascot-sway { display: block; animation: press-mascot-sway var(--sway, 3.4s) ease-in-out infinite alternate; }
.press-mascot-wobble { display: block; width: var(--size, 48px); height: var(--size, 48px); max-width: none; object-fit: contain; animation: press-mascot-wobble var(--wobble, 4s) ease-in-out infinite alternate; filter: drop-shadow(0 2px 5px color-mix(in oklab, var(--ink) 26%, transparent)); }
@media (prefers-reduced-motion: reduce) {
  .press-mascot-sprite, .press-mascot-sway, .press-mascot-wobble { animation: none; }
}
@keyframes press-mascot-fall { from { transform: translateY(-22vh); } to { transform: translateY(122vh); } }
@keyframes press-mascot-sway { from { transform: translateX(-12px); } to { transform: translateX(12px); } }
@keyframes press-mascot-wobble { from { transform: rotate(calc(-1 * var(--tilt, 10deg))); } to { transform: rotate(var(--tilt, 10deg)); } }
.press-home-lede h1 { max-width: 12ch; margin: 0; font-family: "YouYuan", "幼圆", "Yuanti SC", "Hiragino Maru Gothic ProN", var(--font-display); font-size: clamp(2.4rem, 6vw, 4.2rem); font-style: normal; font-weight: 500; letter-spacing: 0.02em; line-height: 1.1; text-wrap: balance; }
html[lang="zh-CN"] .press-home-lede h1 { max-width: 11em; line-height: 1.14; word-break: keep-all; }
.press-home-lede > p:last-child { max-width: 58ch; margin: 2rem 0 0; color: var(--muted-text); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.8; }

.press-home-facet-head { display: flex; align-items: baseline; gap: 1rem; }
.press-home-facet-index { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: var(--accent-soft); border: 2px solid var(--paper-strong); box-shadow: 0 1px 3px color-mix(in oklab, var(--ink) 14%, transparent); color: var(--accent); font-size: 0.76rem; transform: rotate(-5deg); flex-shrink: 0; }
.press-home-facet:nth-of-type(even) .press-home-facet-index { transform: rotate(4deg); }
.press-home-facet-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 620; letter-spacing: var(--tracking-display); }
html[lang="zh-CN"] .press-home-facet-head h2 { letter-spacing: 0.02em; }
.press-home-facet-head p { margin: 0.45rem 0 0; color: var(--muted-text); font-size: 0.82rem; line-height: 1.7; }
.press-home-facet-entry { margin: 1.6rem 0 0; font-family: "YouYuan", "幼圆", "Yuanti SC", "Hiragino Maru Gothic ProN", var(--font-display); font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; text-wrap: balance; }
.press-home-facet-entry > span { display: block; margin-top: 0.5rem; color: var(--muted-text); font-size: 0.85rem; font-weight: 400; letter-spacing: normal; line-height: 1.7; }
.press-home-facet-emoji { display: inline-block; margin-inline: 0.15em; font-size: 0.85em; vertical-align: baseline; }
.press-home-facet-anchor { position: relative; min-width: 0; }
.press-home-facet-anchor::before { content: ""; position: absolute; top: -0.4rem; right: 14%; z-index: 1; width: 3.2rem; height: 1rem; background: color-mix(in oklab, var(--accent) 18%, var(--paper-strong)); border-radius: 2px; opacity: 0.85; transform: rotate(3deg); box-shadow: 0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent); }

.press-home-facets { padding-top: clamp(3rem, 7vw, 5rem); }
.press-home-facet { padding-top: clamp(2rem, 4vw, 3rem); }
.press-home-facet + .press-home-facet { margin-top: clamp(3rem, 6vw, 5rem); }

/* ── Facet 1 · self: standard two-column band (anchor card right, links left) ── */
.press-home-facet-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: 1.8rem; }
.press-home-facet-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.press-home-facet-links li { border-bottom: 1px solid var(--soft-line); }
.press-home-facet-links a { display: flex; align-items: center; gap: 0.9rem; min-height: 3.2rem; padding: 0.9rem 0.2rem; color: inherit; transition: color 160ms var(--ease-out); }
.press-home-facet-links a:hover { color: var(--accent); }
.press-home-facet-link-title { flex: 1; min-width: 0; font-weight: 500; line-height: 1.5; }
.press-home-facet-link-meta { color: var(--muted-text); font-family: var(--font-plex-mono); font-size: 0.72rem; white-space: nowrap; }

/* ── Facet 2 · emotion: reversed — card on the LEFT, links on the RIGHT; the
 * sticker badge closes the head row (DOM order flipped) so the title still
 * leads the section while the badge mirrors the other facets' leading one. ── */
.press-home-facet--reverse { padding-top: clamp(2rem, 4vw, 3rem); }
.press-home-facet--reverse .press-home-facet-body { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); }
.press-home-facet--reverse .press-home-facet-anchor { order: -1; }
.press-home-facet--reverse .press-home-facet-entry { margin-top: 1.6rem; margin-bottom: 0; }

/* ── Facet 3 · relationship: full-width editorial strip — the four entries sit
 * in equal cells across the whole band, so the strip reads as a composed index
 * instead of a left-packed cluster with a dead right half. ── */
.press-home-facet--inline .press-home-facet-inline-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.7rem; margin-top: 1.4rem; }
.press-home-facet-inline-pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.55rem; min-height: 2.75rem; padding: 0.55rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-pill, 999px); color: var(--ink); font-size: 0.82rem; font-weight: 500; transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.press-home-facet-inline-pill:hover { border-color: var(--accent); color: var(--accent); }
.press-home-facet-inline-pill .press-home-facet-link-meta { color: var(--muted-text); }

/* ── Facet 4 · life: compact two-column split — info left, links right, no anchor card ── */
/* The compact facet's h2 lives outside a .press-home-facet-head, so it has no
 * display-tier rule of its own — under the preflight reset it collapsed to
 * body size and read as a stray caption instead of a section title. */
.press-home-facet--compact h2 { display: flex; align-items: baseline; gap: 0.45em; margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 620; letter-spacing: var(--tracking-display); }
html[lang="zh-CN"] .press-home-facet--compact h2 { letter-spacing: 0.02em; }
.press-home-facet--compact h2 > span { font-size: 0.72em; }
.press-home-facet--compact .press-home-facet-compact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: 1.2rem; }
.press-home-facet--compact .press-home-facet-links { border-top: 1px solid var(--line); }
.press-home-facet--compact .press-home-facet-entry--compact { margin-top: 1rem; font-size: clamp(1.1rem, 1.8vw, 1.4rem); }

@media (max-width: 799px) {
  .press-home-facet-body,
  .press-home-facet--reverse .press-home-facet-body { grid-template-columns: 1fr; }
  .press-home-facet-anchor { order: 1; }
  .press-home-facet-links { order: 2; }
  .press-home-facet--compact .press-home-facet-compact-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .press-home-facet-links a { transition: none; }
}