/* Homepage composition layer — loads AFTER /style.css, which keeps the
   brand tokens, the header, the footer and the form.

   REWRITTEN 2026-09-20 to Design1.pdf (sections 1a, 2a, 3a and the
   mobile stack in 6a). Nothing here invents a colour: the palette is
   unchanged by standing instruction (#0b0809 base, #150909 card,
   #ff3c4a accent), and anything that looks like a new brand value in
   this file is a bug. The two token values that DID change live in
   /style.css and are the contrast pair the spec names twice:
   #C9C0C1 body on #0B0809.

   WHY A SEPARATE FILE rather than editing style.css: that stylesheet is
   shared by /numerology-calculator/, /zh/ and the legal pages. Section
   composition is a homepage concern, so it lives where it can change
   without re-testing five other pages.

   Shape rule, applied everywhere below: interactive controls are pill
   (--radius-buttons), surfaces and media are 12px (--radius-cards).
   No third radius. */

/* ---------------------------------------------------------------
   1. Type scale
   Fluid, because /style.css pins h1 to 65px — a poster size that
   breaks a 375px screen and, in Chinese, wraps a headline onto four
   lines.
   --------------------------------------------------------------- */

.home h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem);
  font-weight: 480;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.home h2 {
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3.25rem);
  font-weight: 480;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

.home h3 {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 520;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* The one accent word in a headline. If a second word anywhere in
   running text turns crimson, this stops working. */
.home .accent { color: var(--color-accent); }

/* The eyebrow voice, used once per section and never twice in a row:
   mono, wide-tracked, small. Design1.pdf sets every section, every
   module role and every meta line in it. */
.home .eyebrow {
  color: var(--color-accent);
  font: 400 0.8125rem/1.3 var(--font-mono);
  letter-spacing: 0.14em;
  margin: 0 0 var(--space-16);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   2. Section rhythm
   No rules between sections. Separation is space plus the single
   tonal break at the conversion step (3a) — a dark page with lines
   drawn across it reads as a wireframe, not a finished page.
   --------------------------------------------------------------- */

.home .sec {
  margin-inline: auto;
  max-width: 1240px;
  padding: clamp(var(--space-72), 10vw, 160px) var(--space-24);
}

/* A section header with a spine: title left, intro right. Replaces the
   centred stack, which gave the eye no edge to start from. */
.home .sec-split {
  align-items: start;
  display: grid;
  gap: var(--space-24) var(--space-56);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* A section heading in a half-width column is not a poster headline.
   The full 3.25rem belongs to the two sections that own a whole row to
   themselves (#modules, #access); everything else takes a step down so
   it lands in two lines instead of four. */
.home .sec-split:not(.sec-split-tight) > h2,
.home .sec-split:not(.sec-split-tight) > div > h2 {
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}

/* The header column stops being a column of its own on a section whose
   right side is a single short line (#modules, #access). */
.home .sec-split-tight { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }

.home .sec-split > :first-child { margin: 0; }

.home .sec-intro {
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  margin: 0;
  max-width: 44ch;
}

/* .answer is the right-hand half of a .sec-split, not a column that
   stops two thirds of the way across an empty section. Every module
   section on this page uses the same spine as #modules: heading left,
   the paragraph that answers it on the right, full-width content
   underneath. 62ch stays as the reading measure INSIDE that column. */
.home .answer {
  color: var(--color-ink-soft);
  line-height: 1.7;
  margin: 0;
  max-width: 62ch;
}

.home .sec-split + .card,
.home .sec-split + .triptych,
.home .sec-split + .mod-grid,
.home .sec-split + p { margin-top: clamp(var(--space-32), 4vw, var(--space-56)); }

/* A section whose whole body is one paragraph still gets the spine, so
   the eye has the same left edge all the way down the page. */
.home .sec-split .sec-actions { margin-top: var(--space-24); }

/* ---------------------------------------------------------------
   2b. The brief band — four modules that are one paragraph each
   --------------------------------------------------------------- */

/* Fitness, Finance, Debrief and Council were four consecutive .sec
   blocks. Each holds a heading and a paragraph — 184-279px of content
   inside 205px of vertical padding, so every one of them was more than
   half air, and reading four short paragraphs cost 1,800px and four
   scroll stops. The padding is not the mistake: it is right for
   #network-tracker, which has 1,272px of content under its spine. The
   mistake was giving a paragraph the same frame as a chapter.

   So the frame changes rather than the spacing scale. Two up, one band,
   one set of section padding for all four. The spine (heading left,
   answer right) does not survive the halved column and is not missed —
   at this width the heading reads as a label above its own paragraph,
   which is what these four are. */
.home .brief-band {
  display: grid;
  gap: clamp(var(--space-40), 4.5vw, var(--space-72)) var(--space-56);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .home .brief-band { grid-template-columns: minmax(0, 1fr); }
}

/* A hairline per entry, not a card: four boxes here would out-weigh the
   photographed module cards at the top of the page, which are the ones
   meant to carry weight. The rule is the same one the FAQ list uses. */
.home .brief {
  border-top: 1px solid rgba(255, 60, 74, 0.14);
  padding-top: var(--space-24);
  /* The header is sticky; without this, an in-page link from a module
     card lands with the heading underneath it. The full-height sections
     used to hide that behind 102px of top padding. */
  scroll-margin-top: 96px;
}

.home .brief > h2 {
  font-size: clamp(1.375rem, 1.15rem + 0.65vw, 1.625rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 var(--space-16);
}

.home .brief .answer { max-width: 52ch; }

/* The Fitness demo is a one-line "you type this → it files that" row.
   In a half-width column it wraps to a stack, and a right-pointing arrow
   between two stacked halves points at nothing — so it turns to face the
   direction the reading is now going. */
@media (max-width: 900px) {
  .home .brief .crop-wide {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-12);
  }
  .home .brief .crop-wide .parse-arrow-inline { transform: rotate(90deg); }
}


/* ---------------------------------------------------------------
   3. Hero (1a) — say what it is, put the invite first
   --------------------------------------------------------------- */

.home .hero {
  align-items: end;
  display: grid;
  min-height: min(88dvh, 860px);
  overflow: clip;
  position: relative;
}

.home .hero-media,
.home .hero-media img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

/* Design1.pdf asks for the hero photo at ~20% higher exposure. Done in
   CSS rather than by re-exporting the asset so the same file still
   serves /zh/ and the OG image at its original values. */
.home .hero-media img { filter: brightness(1.2); }

/* Two overlays, not one: a vertical scrim so the headline has a floor
   to sit on, and a horizontal one so the left column stays legible
   while the right side of the photograph keeps its detail. */
.home .hero-overlay {
  background:
    linear-gradient(to top, var(--color-base) 4%, rgba(11, 8, 9, 0.55) 42%, rgba(11, 8, 9, 0.15) 78%),
    linear-gradient(to right, rgba(11, 8, 9, 0.88) 0%, rgba(11, 8, 9, 0.45) 46%, rgba(11, 8, 9, 0) 74%);
  inset: 0;
  position: absolute;
}

.home .hero-stack {
  margin-inline: auto;
  max-width: 1240px;
  padding: var(--space-72) var(--space-24) clamp(var(--space-56), 7vw, var(--space-112));
  position: relative;
  text-align: left;
  width: 100%;
}

.home .hero-stack > * { margin-left: 0; margin-right: 0; max-width: 21ch; }
.home .hero-stack .eyebrow { max-width: none; }

.home .hero-lede {
  color: var(--color-ink);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  margin: var(--space-24) 0 var(--space-32);
  max-width: 48ch;
}

.home .hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
  max-width: none;
}

.home .hero-actions .btn-cta-lg { margin-top: 0; }

/* The secondary action is a text link, not a second button. Two pills
   side by side made the low-value action look equal to the invite. */
.home .hero-jump {
  color: var(--color-ink);
  font: 400 1rem var(--font-body);
}
.home .hero-jump:hover { color: var(--color-accent); text-decoration: none; }
.home .hero-jump:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

.home .hero-trust {
  color: var(--color-ink-soft);
  font-size: 0.875rem;
  margin: var(--space-20) 0 0;
  max-width: 46ch;
}

/* ---------------------------------------------------------------
   4. Modules (2a) — 3x2, no borders, every card gets a link
   --------------------------------------------------------------- */

.home .mod-grid {
  display: grid;
  gap: clamp(var(--space-32), 3vw, var(--space-40)) var(--space-32);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(var(--space-40), 5vw, var(--space-72));
}

.home .mod {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  position: relative;
}

.home .mod-media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-cards);
  overflow: clip;
  position: relative;
}

.home .mod-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  /* Brighter than the previous treatment: the old crimson-to-card wash
     dropped every photograph to near-black, which is what made six
     cards read as six empty boxes. */
  filter: brightness(1.25) saturate(1.05);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.home .mod:hover .mod-media img { transform: scale(1.03); }

/* A light crimson veil, not a blackout — enough to make six unrelated
   photographs read as one set. */
.home .mod-media::after {
  background: linear-gradient(to top, rgba(11, 8, 9, 0.55) 0%, rgba(21, 9, 9, 0.12) 55%, rgba(255, 60, 74, 0.08) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* Wayfinding, not decoration: 01-06 is how a reader says "the fourth
   one" out loud, and on mobile it is the list marker. */
.home .mod-num {
  color: var(--color-accent);
  font: 400 0.8125rem/1 var(--font-mono);
  left: var(--space-16);
  letter-spacing: 0.08em;
  /* A direct child of .mod (which is position:relative) rather than of
     .mod-media, because on a phone it becomes the list marker in its own
     grid column and .mod-media has overflow:clip. Absolute here, so it
     takes no row in the desktop card's flex column. */
  position: absolute;
  top: var(--space-16);
  z-index: 1;
}

.home .mod-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-8); min-width: 0; }

.home .mod-role {
  color: var(--color-ink-soft);
  font: 400 0.75rem/1.3 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home .mod-blurb { color: var(--color-ink-soft); line-height: 1.6; }

.home .mod-link {
  color: var(--color-accent);
  font: 400 1rem var(--font-body);
  margin-top: auto;
  padding-top: var(--space-8);
  width: fit-content;
}
.home .mod-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.home .mod-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.home .mod-chevron { display: none; }

/* ---------------------------------------------------------------
   5. Split — copy against a live panel (Network Tracker, Fitness)
   --------------------------------------------------------------- */

.home .split {
  align-items: center;
  display: grid;
  gap: clamp(var(--space-32), 5vw, var(--space-72));
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.home .split-figure {
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-cards);
  overflow: clip;
}

.home .split-figure img { display: block; height: auto; width: 100%; }

/* ---------------------------------------------------------------
   6. How to get in — the conversion step, in the site's own palette
   Design1.pdf inverted this band to cream. On the real page that read
   as a different website dropped into the middle of this one, so the
   inversion is gone and the STRUCTURE it was carrying stays: an
   eyebrow, three numbered steps on their own rules, and a divider with
   the CTA, WhatsApp and the trust line. Separation now comes from a
   surface lift plus a single accent rule at the top, which is the same
   language the rest of the page uses.
   --------------------------------------------------------------- */

.home .sec-dark {
  /* Tighter than a full section: this is a panel, and the .sec padding
     left ~150px of dead card under the button. */
  padding-block: clamp(var(--space-56), 6vw, var(--space-112));
  background:
    linear-gradient(to bottom, rgba(255, 60, 74, 0.07) 0%, rgba(255, 60, 74, 0) 320px),
    var(--color-card);
  border-radius: var(--radius-cards);
  border-top: 1px solid var(--color-accent);
  margin-block: clamp(var(--space-40), 5vw, var(--space-72));
  max-width: 1240px;
}

.home .steps {
  display: grid;
  gap: var(--space-32);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: clamp(var(--space-40), 5vw, var(--space-56)) 0 0;
  padding: 0;
}

.home .steps li {
  border-top: 1px solid rgba(255, 60, 74, 0.28);
  display: grid;
  gap: var(--space-8);
  padding-top: var(--space-20);
}

.home .step-n {
  color: var(--color-accent);
  font: 400 1.75rem/1 var(--font-body);
}

.home .steps h3 { color: var(--color-white); margin: 0; }
.home .steps p { color: var(--color-ink-soft); line-height: 1.6; }

.home .steps-foot {
  align-items: center;
  border-top: 1px solid rgba(255, 60, 74, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
  margin-top: clamp(var(--space-40), 5vw, var(--space-56));
  padding-top: var(--space-32);
}

.home .steps-trust {
  color: var(--color-ink-soft);
  font: 400 0.75rem/1.4 var(--font-mono);
  letter-spacing: 0.04em;
  margin: 0;
  margin-left: auto;
}

/* ---------------------------------------------------------------
   7. Motion — entrances only, and only where sequence carries meaning
   (the six modules arrive in reading order). Scroll-driven, so there
   is no scroll listener and no JS; browsers without support simply
   show the content, which is the correct fallback rather than a
   hidden page.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .home .mod,
    .home .split-figure,
    .home .steps li {
      animation: home-rise linear both;
      animation-range: entry 8% cover 26%;
      animation-timeline: view();
    }
  }
}

@keyframes home-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   8. Mobile (6a) — a different hierarchy, not the desktop one folded
   --------------------------------------------------------------- */

@media (max-width: 1000px) {
  .home .sec-split,
  .home .sec-split-tight { grid-template-columns: 1fr; }
  .home .sec-split > :first-child { margin-bottom: 0; }
  .home .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .split { grid-template-columns: 1fr; }
  .home .steps { grid-template-columns: 1fr; gap: var(--space-24); }
  .home .steps-trust { margin-left: 0; width: 100%; }
}

@media (max-width: 700px) {
  .home .sec { padding-inline: var(--space-16); }
  .home .hero { min-height: min(84dvh, 700px); }
  .home .hero-stack > * { max-width: none; }

  /* The invite is the first thing a thumb can reach, at full width and
     a 48px target — on a phone the header CTA is gone (see style.css)
     and this is the only one. */
  .home .hero-actions { flex-direction: column; align-items: stretch; gap: var(--space-16); }
  .home .hero-actions .btn-cta-lg { height: 48px; width: 100%; }
  .home .hero-jump { text-align: center; }

  /* Six cards become six list rows: all six fit one screen, each row
     is tappable end to end, and the photograph survives as a 64px
     thumbnail rather than a 150px band of near-black. */
  .home .mod-grid { display: block; margin-top: var(--space-32); }

  .home .mod {
    align-items: center;
    border-top: 1px solid rgba(255, 60, 74, 0.14);
    column-gap: var(--space-16);
    display: grid;
    grid-template-columns: 2rem 64px minmax(0, 1fr) 1rem;
    min-height: 88px;
    padding: var(--space-16) 0;
    row-gap: 0;
  }
  .home .mod:first-child { border-top: 0; }

  .home .mod-num { font-size: 0.875rem; position: static; align-self: center; }
  .home .mod-media { aspect-ratio: 1; border-radius: var(--radius-cards-inner); width: 64px; }
  .home .mod-media::after { background: linear-gradient(to top, rgba(11, 8, 9, 0.35), rgba(255, 60, 74, 0.08)); }
  .home .mod-body { flex: 0 1 auto; gap: 2px; }
  .home .mod-role { font-size: 0.6875rem; }
  .home .mod h3 { font-size: 1.0625rem; }
  .home .mod-blurb {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    font-size: 0.875rem;
    overflow: hidden;
  }

  /* The link keeps its accessible name and stops being visible text:
     the chevron reads it instead, and the ::after stretches the hit
     target over the whole row. ::after resolves against .mod, which is
     position:relative, because .mod-link itself is static. */
  .home .mod-link { color: transparent; font-size: 0; margin: 0; padding: 0; }
  .home .mod-link::after { content: ""; inset: 0; position: absolute; }
  .home .mod-link:focus-visible { outline: none; }
  .home .mod-link:focus-visible::after { outline: 2px solid var(--color-accent); outline-offset: -2px; }

  .home .mod-chevron {
    color: var(--color-accent);
    display: block;
    font-size: 1.125rem;
    justify-self: end;
    line-height: 1;
  }

  .home .steps-foot { align-items: stretch; flex-direction: column; gap: var(--space-16); }
  .home .steps-foot .btn-cta { width: 100%; }
}