/* Home: one claim, one world on the desk, then the seven worlds as the way in.
   Four sections. Each screen has one focal point; space does the grouping. */
.living-page {
  --font-ui:var(--font-sans);
  margin:0; background:var(--paper); color:var(--ink);
  font:400 var(--type-body)/1.6 var(--font-sans);
}
.living-page * { box-sizing:border-box; }
.living-page :where(h1,h2,h3,p,figure,dl,dd,ol) { margin:0; }
.living-page :where(h1,h2,h3) { font-family:var(--font-sans); color:var(--ink-strong); font-weight:500; }
:where(.living-page) a { color:inherit; text-decoration:none; }
.living-page .home-wrap { width:var(--page-width); margin-inline:auto; }
.living-page :target { scroll-margin-top:var(--space-8); }

/* ---- Hero -------------------------------------------------------------- */
.home-hero {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); align-items:center;
  gap:clamp(2rem,5vw,5rem); padding-top:clamp(1.5rem,4vw,3.5rem);
}
.hero-copy { container-type:inline-size; min-width:0; }
/* Two authored lines; the size follows the column so each line stays whole. */
#heroTitle { font-size:min(var(--type-display),10.9cqi); line-height:1.02; letter-spacing:var(--track-display); text-wrap:balance; }
#heroTitle > span { display:block; }
.hero-lede { max-width:30em; margin-top:var(--space-6); font-size:var(--type-lead); line-height:1.5; color:var(--ink-muted); }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4) var(--space-8); margin-top:var(--space-10); }
.home-primary {
  display:inline-flex; align-items:center; gap:var(--space-4); min-height:52px; padding:0 var(--space-6);
  border-radius:var(--radius-control); background:var(--action); color:var(--paper-raised)!important;
  font-weight:500; letter-spacing:.005em;
  transition:background-color var(--motion-normal) var(--ease-out),transform var(--motion-fast) var(--ease-out);
}
.home-primary > span { transition:transform var(--motion-normal) var(--ease-out); }
.home-primary:hover { background:var(--action-strong); }
.home-primary:hover > span { transform:translateX(3px); }
.home-primary:active { transform:translateY(1px); }
.home-secondary,.home-text-link {
  display:inline-flex; align-items:center; gap:var(--space-2); padding-block:var(--space-1); font-weight:500; color:var(--ink-strong);
  text-decoration:underline; text-decoration-color:var(--line-strong); text-decoration-thickness:1px; text-underline-offset:6px;
  transition:color var(--motion-fast) var(--ease-out),text-decoration-color var(--motion-fast) var(--ease-out);
}
.home-secondary:hover,.home-text-link:hover { color:var(--action); text-decoration-color:currentColor; }
.home-text-link > span { transition:transform var(--motion-normal) var(--ease-out); }
.home-text-link:hover > span { transform:translateX(3px); }
.hero-figures { display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-12); margin-top:var(--space-12); padding-top:var(--space-5); border-top:1px solid var(--line); }
.hero-figures > div { display:grid; }
.hero-figures dd { order:-1; font-size:var(--type-h2); font-weight:500; line-height:1.1; letter-spacing:var(--track-heading); color:var(--ink-strong); font-variant-numeric:tabular-nums lining-nums; }
.hero-figures dt { margin-top:var(--space-1); font-size:var(--type-small); color:var(--ink-muted); }

/* The scene: one open farm, three residents standing at its edge. */
.hero-scene { position:relative; min-width:0; container-type:inline-size; --sprite:clamp(76px,19cqi,120px); }
.scene-landscape { display:block; width:100%; height:auto; image-rendering:pixelated; }
/* The residents stand on the farm's lower edge: the scene's empty foot is 10.95% of its width.
   Nine residents take turns, three at a time; each turn has its own season on the oaks. */
.scene-cast { position:relative; display:grid; margin-top:calc(-10.95cqi - var(--sprite)); padding-left:5cqi; }
.scene-group {
  grid-area:1/1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); align-items:start;
  opacity:0; visibility:hidden; transition:opacity 420ms var(--ease-out),visibility 0s linear 420ms;
}
.scene-group.is-active { opacity:1; visibility:visible; transition:opacity 420ms var(--ease-out); }
.scene-person { display:flex; flex-direction:column; align-items:center; min-width:0; padding-bottom:var(--space-2); text-align:center; }
.scene-sprite { display:block; }
.scene-person img { display:block; width:var(--sprite); height:auto; aspect-ratio:1; image-rendering:pixelated; transition:transform var(--motion-slow) var(--ease-out); }
.oak-season { opacity:0; transition:opacity 1100ms var(--ease-standard); }
.hero-scene:not([data-season]) .oak-season-0,
.hero-scene[data-season="0"] .oak-season-0,
.hero-scene[data-season="1"] .oak-season-1,
.hero-scene[data-season="2"] .oak-season-2 { opacity:1; }
.scene-person-name { margin-top:var(--space-2); font-weight:500; color:var(--ink-strong); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:5px; transition:text-decoration-color var(--motion-fast) var(--ease-out); }
.scene-person-role { font-size:var(--type-small); line-height:1.35; color:var(--ink-muted); }
.scene-person:is(:hover,:focus-visible) img { transform:translateY(-6px); }
.scene-person:is(:hover,:focus-visible) .scene-person-name { text-decoration-color:currentColor; }
.hero-scene figcaption { display:flex; justify-content:flex-end; align-items:center; gap:var(--space-4); margin-top:var(--space-3); font-size:var(--type-small); color:var(--ink-muted); }
.scene-pause {
  display:inline-flex; align-items:center; gap:var(--space-2); min-height:32px; padding:0 var(--space-3); border:1px solid var(--line); border-radius:var(--radius-pill,999px);
  background:transparent; color:var(--ink-muted); font:500 var(--type-caption)/1 var(--font-sans); cursor:pointer;
  transition:color var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out);
}
.scene-pause[hidden] { display:none; }
.scene-pause:hover { color:var(--ink-strong); border-color:var(--line-strong); }
.scene-pause::before { content:''; width:8px; height:9px; border-inline:2.5px solid currentColor; box-sizing:border-box; }
.scene-pause[data-paused="true"]::before { border:0; border-left:8px solid currentColor; border-block:4.5px solid transparent; width:0; height:0; }
.hero-scene figcaption a { color:var(--ink-strong); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:4px; transition:color var(--motion-fast) var(--ease-out); }
.hero-scene figcaption a:hover { color:var(--action); }

/* ---- Section heads ------------------------------------------------------ */
.home-section-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:var(--space-2) var(--space-8); margin-bottom:var(--space-8); }
.home-section-head h2,.past-copy h2 { font-size:var(--type-h2); line-height:1.15; letter-spacing:var(--track-heading); }
.home-section-head p { color:var(--ink-muted); }

/* ---- Worlds: eight covers and the whole cast, a filled 3 x 3 grid -------- */
.home-worlds { margin-top:var(--section-gap); }
.world-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-10) var(--space-6); }
.world-option { display:flex; flex-direction:column; gap:var(--space-4); min-width:0; }
.world-art {
  position:relative; display:block; aspect-ratio:460/215; overflow:hidden; border-radius:var(--radius-media); background:var(--paper-sunk);
  box-shadow:0 0 0 1px var(--line); transition:transform var(--motion-slow) var(--ease-out),box-shadow var(--motion-slow) var(--ease-out);
}
.world-art img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease-out); }
.world-text { display:grid; gap:var(--space-1); min-width:0; }
.world-name { font-size:var(--type-lead); font-weight:500; line-height:1.25; color:var(--ink-strong); transition:color var(--motion-fast) var(--ease-out); }
.world-count { font-size:var(--type-small); color:var(--ink-muted); }
.world-cast { margin-top:var(--space-1); font-size:var(--type-small); line-height:1.5; color:var(--ink-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.world-option:is(:hover,:focus-visible) .world-art { transform:translateY(-3px); box-shadow:0 0 0 1px var(--line),var(--shadow-lift); }
.world-option:is(:hover,:focus-visible) .world-art img { transform:scale(1.035); }
.world-option:is(:hover,:focus-visible) .world-name { color:var(--action); }
.world-all {
  display:flex; flex-direction:column; justify-content:flex-end; gap:var(--space-2); min-height:100%;
  padding:var(--space-6); border-radius:var(--radius-media); background:var(--paper-sunk); color:var(--ink);
  transition:background-color var(--motion-normal) var(--ease-out);
}
.world-all-figure { font-size:var(--type-h1); font-weight:500; line-height:1; letter-spacing:var(--track-display); color:var(--ink-strong); font-variant-numeric:lining-nums; }
.world-all-label { color:var(--ink-muted); }
.world-all-action { display:inline-flex; align-items:center; gap:var(--space-2); margin-top:var(--space-4); font-weight:500; color:var(--action); }
.world-all-action > span { transition:transform var(--motion-normal) var(--ease-out); }
.world-all:hover { background:var(--action-soft); }
.world-all:hover .world-all-action > span { transform:translateX(3px); }

/* ---- Every conversation has a past -------------------------------------- */
.home-past { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(2rem,6vw,6rem); margin-top:var(--section-gap); }
.past-lede { max-width:28em; margin-top:var(--space-4); font-size:var(--type-lead); line-height:1.5; color:var(--ink-muted); }
.past-list { display:grid; gap:var(--space-6); margin-top:var(--space-8); }
.past-list > div { position:relative; padding-left:calc(32px + var(--space-4)); }
.past-list dt { font-size:var(--type-lead); font-weight:500; color:var(--ink-strong); }
.past-list dd { margin-top:var(--space-1); color:var(--ink-muted); }
.past-copy .past-lab { margin-top:var(--space-10); }

/* The demo: two real tests from the bank, one switch. Radio inputs and :has(), so it works without script. */
.past-demo { margin:0; min-width:0; }
.past-switch { display:flex; flex-wrap:wrap; gap:var(--space-3); margin:0 0 var(--space-6); padding:0; border:0; }
.past-switch legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.past-switch input { position:absolute; opacity:0; pointer-events:none; }
.past-stage { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-6); align-items:end; }
.past-dialogue { padding:var(--space-6) var(--space-6) var(--space-5); }
.past-log-title { font-size:var(--type-small); color:var(--ink-muted); }
.past-log { display:grid; gap:var(--space-1); margin:var(--space-2) 0 0; padding:0; list-style:none; }
.past-log li { position:relative; padding-left:var(--space-4); font:400 var(--type-body)/1.45 var(--font-serif); color:var(--ink); }
.past-log li::before { content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; background:var(--ink-faint); }
.past-log .past-swap { display:grid; color:var(--ink-strong); }
.past-log .past-swap::before { background:var(--current); }
.past-swap > span,.past-expect-body > p { grid-area:1/1; transition:opacity 160ms steps(3),transform 160ms steps(3),visibility 0s linear 0s; }
.past-rule { height:var(--px); margin:var(--space-5) calc(-1 * var(--space-6)); background:var(--paper-sunk); }
.past-line { font:400 var(--type-h3)/1.3 var(--font-serif); color:var(--ink-strong); }
.past-speaker { display:block; margin-bottom:var(--space-1); font:500 var(--type-small)/1.4 var(--font-sans); color:var(--ink-muted); }
.past-expect { display:grid; margin-top:var(--space-5); padding:var(--space-3) var(--space-4); background:var(--action-soft); }
.past-expect-title { font-size:var(--type-small); font-weight:500; color:var(--action-strong); }
.past-expect-body { display:grid; margin-top:2px; }
.past-expect-body > p { color:var(--ink-strong); }
.past-demo:has(#pastNot:checked) [data-past="said"],
.past-demo:not(:has(#pastNot:checked)) [data-past="not"] { opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity 160ms steps(3),transform 160ms steps(3),visibility 0s linear 160ms; }
.past-portrait { display:grid; justify-items:center; gap:calc(var(--space-4) + 2 * var(--px)); color:inherit; }
.past-portrait img { display:block; width:192px; height:192px; image-rendering:pixelated; transition:transform var(--motion-slow) steps(3); }
.past-portrait:is(:hover,:focus-visible) img { transform:translateY(calc(-2 * var(--px))); }
.past-nameplate { display:block; padding:var(--space-1) var(--space-4); font-weight:500; line-height:1.4; color:var(--ink-strong); }
.past-demo figcaption { margin-top:var(--space-6); font-size:var(--type-small); color:var(--ink-muted); }
.past-demo figcaption a { color:var(--ink-strong); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; transition:color var(--motion-fast) var(--ease-out); }
.past-demo figcaption a:hover { color:var(--action); }

/* ---- News: the newest three entries from assets/site/news.json ---------- */
.home-news { margin-top:var(--section-gap); }
.news-list { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-8) var(--space-10); }
.news-item { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); padding-top:var(--space-5); border-top:1px solid var(--line-strong); }
.news-item time { font-size:var(--type-small); color:var(--ink-muted); font-variant-numeric:lining-nums; }
.news-item h3 { font-size:var(--type-lead); line-height:1.3; letter-spacing:-.01em; }
.news-item p { color:var(--ink-muted); }
.news-link { display:inline-flex; align-items:center; gap:var(--space-2); margin-top:auto; padding-top:var(--space-2); font-weight:500; color:var(--action); }
.news-link > span { transition:transform var(--motion-normal) var(--ease-out); }
.news-link:hover > span { transform:translateX(3px); }
.news-item:first-child { border-top-color:var(--current); }

/* ---- The one authored entrance ------------------------------------------ */
@media(prefers-reduced-motion:no-preference) {
  #heroTitle > span,.hero-lede,.hero-actions,.hero-figures { animation:bank-fade-up 720ms var(--ease-out) both; }
  #heroTitle > span:nth-child(2) { animation-delay:70ms; }
  .hero-lede { animation-delay:140ms; }
  .hero-actions { animation-delay:210ms; }
  .hero-figures { animation-delay:280ms; }
  .scene-landscape { animation:bank-fade 900ms var(--ease-out) 60ms both; }
  .scene-group.is-active .scene-person { animation:bank-fade-up 640ms var(--ease-out) both; }
  .scene-group.is-active .scene-person:nth-child(1) { animation-delay:260ms; }
  .scene-group.is-active .scene-person:nth-child(2) { animation-delay:330ms; }
  .scene-group.is-active .scene-person:nth-child(3) { animation-delay:400ms; }
}

/* ---- Narrower screens ---------------------------------------------------- */
@media(max-width:1080px) {
  .world-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Two columns hold the eight worlds; the whole cast closes the grid as one full-width row. */
  .world-all { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:var(--space-1) var(--space-3); }
  .world-all-action { margin-top:0; margin-left:auto; }
}
@media(max-width:900px) {
  .home-hero { grid-template-columns:1fr; gap:var(--space-10); }
  .hero-scene { width:min(100%,36rem); justify-self:center; }
  #heroTitle { font-size:min(var(--type-display),10.9cqi); }
  .home-past { grid-template-columns:1fr; gap:var(--space-10); }
}
@media(max-width:900px) {
  .news-list { grid-template-columns:1fr; gap:var(--space-6); }
}
@media(max-width:720px) {
  .hero-figures { gap:var(--space-4) var(--space-8); }
}
@media(max-width:600px) {
  .past-stage { grid-template-columns:1fr; }
  .past-portrait { order:-1; grid-template-columns:auto auto; justify-content:start; align-items:center; gap:var(--space-5); }
  .past-portrait img { width:96px; height:96px; }
  .past-switch { gap:var(--space-2); }
  .past-switch label { padding:0 var(--space-3); font-size:var(--type-small); }
  .past-dialogue { padding:var(--space-5) var(--space-5) var(--space-4); }
  .past-rule { margin-inline:calc(-1 * var(--space-5)); }
  .world-grid { grid-template-columns:1fr; gap:var(--space-5); }
  .world-option { display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr); align-items:center; gap:var(--space-4); }
  .world-name { font-size:var(--type-body); }
  .world-cast { display:none; }
  .world-all { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:var(--space-1) var(--space-3); padding:var(--space-5); }
  .world-all-figure { font-size:var(--type-h2); }
  .world-all-action { flex-basis:100%; margin-top:var(--space-2); }
  .scene-cast { padding-left:0; }
  .scene-person-role { font-size:var(--type-caption); }
}