/* The home page and About, full width with large type (owner, 2026-10-20: 「只有首页和about页」). Loaded after
   quiet.css by index.html and about.html only; the other quiet pages (Programs, Parents & Educators, Support) keep
   quiet.css as it is.

   1. Full width: content runs the width of the screen with a gutter that grows with it; the shared header and footer
      (assets/chrome.css) line up with it: the header is wide on every page, the footer widens on these two.
   2. A type floor: no text in the page or the footer is smaller than --front-text, the size of the home page's
      "A nonprofit learning community…" line (owner: 「最小的字要和 A nonprofit learning community… 一样大」).
      Headings are sized above it. The floor uses an id-level :not(#_) so it outranks quiet.css and reform.css
      without touching them. The header's navigation keeps its own size so the menu still fits on one line. */
body.quiet-page {
  --front-gutter: var(--la-gutter);  /* chrome.css: the site-wide header gutter */
  --front-text: var(--la-text);  /* chrome.css: the head's text size, About's lead */
  --front-h1: var(--la-title);  /* chrome.css: every page's title size */
  --front-h2: clamp(2.1rem, 4.2vw, 4.4rem);
  --front-h3: clamp(1.5rem, 2.6vw, 2.6rem);
}

/* 1. Full width */
body.quiet-page .quiet-shell { width: calc(100% - 2 * var(--front-gutter)); max-width: none; }
body.quiet-page footer.la-chrome .la-shell { max-width: none; padding-inline: var(--front-gutter); }  /* the header is wide on every page (chrome.css) */

/* 2. The type floor, and the headings above it */
body.quiet-page:not(#_) :is(main, footer.la-chrome) :not(h1, h2, h3, h1 *, h2 *, h3 *, svg, svg *) { font-size: var(--front-text); }
body.quiet-page:not(#_) main h1 { font-size: var(--front-h1); line-height: 1.08; }
body.quiet-page:not(#_) main h2 { font-size: var(--front-h2); line-height: 1.1; }
body.quiet-page:not(#_) :is(main, footer.la-chrome) h3 { font-size: var(--front-h3); line-height: 1.2; }
body.quiet-page:not(#_) footer.la-chrome h4 { font-size: var(--front-h3); }
body.quiet-page main p { max-width: 42em; }
/* Reading columns that quiet.css held to a fixed pixel width widen with the larger type. */
body.quiet-page .quiet-philosophy { max-width: 38em; }

/* ---------- home page (sizes come from the floor and the heading scale above) ---------- */
/* Hero: the colourful brand title, a smaller triad, the three doors, then who we are. */
body[data-page="home"] main .home-hero { min-height: 0; padding: clamp(56px, 7vw, 120px) 0 clamp(56px, 6vw, 104px); }
body[data-page="home"] .home-hero h1 { line-height: 1.08; margin: 0 auto clamp(18px, 2vw, 30px); letter-spacing: -0.035em; }
body[data-page="home"] .home-brand-title { width: fit-content; max-width: 100%; font-weight: 650; color: var(--orange-deep); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  body[data-page="home"] .home-brand-title { background: linear-gradient(100deg, var(--orange-deep), var(--pink) 48%, var(--violet)); background-clip: text; -webkit-background-clip: text; color: transparent; }
}
body.quiet-page[data-page="home"]:not(#_) main .home-hero-tagline,
body.quiet-page[data-page="home"]:not(#_) main .home-hero-tagline span { font-size: clamp(1.3rem, 2.6vw, 2.5rem); }
body[data-page="home"] .home-hero-tagline { margin: 0 auto clamp(28px, 3vw, 44px); font-weight: 500; line-height: 1.45; letter-spacing: -.02em; color: var(--ink); }
body[data-page="home"] .home-hero-tagline span { display: block; }
body[data-page="home"] .home-hero .button-row { margin-top: 0; gap: clamp(12px, 1.4vw, 22px); }
body[data-page="home"] .home-hero .button { min-height: clamp(52px, 4.2vw, 68px); padding: 14px clamp(26px, 2.6vw, 42px); }
body[data-page="home"] .home-intro { padding-top: clamp(40px, 5vw, 88px); }
body[data-page="home"] .home-intro .lead { line-height: 1.45; max-width: 30em; margin: 0 auto; color: var(--ink); }

/* How it started: three photos followed by the film carousel. */
body[data-page="home"] .home-started { padding: clamp(56px, 6vw, 112px) 0 clamp(64px, 7vw, 128px); border-top: 1px solid var(--line); }
body[data-page="home"] .home-started .quiet-intro-line { margin-bottom: clamp(24px, 2.6vw, 44px); }
.home-started-media { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 20px); align-items: start; }
.home-started-media > * { min-width: 0; margin: 0; }
.home-started-media > figure > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; filter: grayscale(1); transition: filter .45s ease; }
.home-started-media > figure > img.home-community-photo { object-fit: contain; }
.home-started-media > figure:hover > img,
.home-started-media > figure:active > img { filter: grayscale(0); }
.home-started-media .weekly-films { margin: 0; --play: clamp(44px, 4vw, 64px); }
/* Match the photo frames; the controls occupy an extra row below the video. */
.home-started-media .weekly-film-poster,
.home-started-media .weekly-film-player { aspect-ratio: 4 / 3; border-radius: 4px; min-height: 0; }
.home-started-media .weekly-film-poster img { object-fit: contain; }
.home-started-media .weekly-film-play { opacity: 1; }
.home-started-media .weekly-films-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 0; width: 100%; max-width: 240px; margin: 12px auto 0; }
.home-started-media .weekly-films-nav[hidden] { display: none; }
.home-started-media .weekly-films-nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
.home-started-media .weekly-films-count { min-width: 0; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .home-started-media > figure > img { transition: none; }
}
@media (max-width: 1100px) {
  .home-started-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}