/* Light theme for everything below the homepage hero, matching the Thunderlink page
   (#ecebe6 paper / #191c20 ink). Hero, nav and footer stay dark. */
.landing-page #projects,
.landing-page .fork {
  --bg: #ecebe6;
  --fg: #191c20;
  --fg-muted: #5d636b;
  --line: rgba(25, 28, 32, .1);
  --line-strong: rgba(25, 28, 32, .2);
  background: var(--bg);
  color: var(--fg);
}

/* Project cards are photo/video panels: keep their dark overlay and light text. */
.landing-page #projects .home-project-panel { --bg: #08090b; --fg: #e7e9ee; }

.landing-page .fork__link:hover { color: var(--accent); }

/* Section headers in the Thunderlink intro style (thunderlink-entrance.css .tl-intro). */
.landing-page #projects.home-projects { padding-top: clamp(4rem, 10vw, 10rem); padding-bottom: clamp(2rem, 4vw, 4rem); }
.landing-page .home-intro { margin: 0 var(--site-gutter) clamp(3rem, 6vw, 6rem); }
.landing-page .home-intro__name { margin: 0 0 clamp(2.5rem, 6vw, 6rem); font: 500 clamp(3.5rem, 10vw, 10.5rem)/.95 var(--font-display); letter-spacing: -.06em; }
.landing-page .home-intro__body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 8vw; align-items: end; }
.landing-page .home-intro__body h3 { margin: 0; max-width: 18ch; font: 500 clamp(2.4rem, 4.8vw, 5.2rem)/1.05 var(--font-display); letter-spacing: -.045em; }
.landing-page .home-intro__body p { margin: 0; font-size: clamp(1rem, 1.3vw, 1.3rem); line-height: 1.65; max-width: 41ch; color: #51575e; }

/* Writing: a divider, then two panels in the product-grid style, scaffolded for future pieces. */
.landing-page .home-writing { padding: 0 0 clamp(4rem, 8vw, 8rem); background: #ecebe6; }
.landing-page .home-writing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5vw 2.2vw; margin-inline: var(--site-gutter); padding-top: clamp(3rem, 6vw, 6rem); border-top: 1px solid #191c2030; }
.landing-page .home-writing-panel { display: flex; align-items: end; min-height: max(22rem, 24vw); background: #191c20; color: #e7e9ee; text-decoration: none; }
.landing-page .home-writing-copy { width: 100%; padding: max(1.75rem, 3.4vw); }
.landing-page .home-writing-type { margin: 0 0 1.2rem; font: 500 .68rem/1.4 var(--font-display); letter-spacing: .13em; text-transform: uppercase; color: #9098a3; }
.landing-page .home-writing h3 { margin: 0 0 .35em; font: 500 clamp(2rem, 3vw, 3.6rem)/1.08 var(--font-display); letter-spacing: -.035em; }
.landing-page .home-writing-copy > p:not(.home-writing-type) { max-width: 43ch; margin: 0; font: 400 clamp(.875rem, 1.1vw, 1.125rem)/1.65 var(--font-body); }
.landing-page .home-writing-link { display: inline-flex; align-items: center; gap: 1.6em; margin-top: 1.75em; font: 500 clamp(.8125rem, .8vw, 1rem)/1.4 var(--font-display); color: #9098a3; }
.landing-page a.home-writing-panel .home-writing-link { color: inherit; }
.landing-page a.home-writing-panel:hover { background: #22262b; }

@media (max-width: 56.25em) {
  .landing-page .home-writing-grid { grid-template-columns: 1fr; gap: 1rem; }
  .landing-page .home-intro__body { grid-template-columns: 1fr; gap: 2rem; }
  .landing-page .home-intro__body p { max-width: 50ch; }
}
@media (max-width: 540px) {
  .landing-page .home-intro__name { font-size: clamp(3.2rem, 14vw, 5rem); }
}

/* Hero title at least as large as the section names below it. */
.landing-page .hero__title { font: 500 clamp(3.5rem, 10vw, 10.5rem)/.95 var(--font-display); letter-spacing: -.06em; }
@media (max-width: 540px) { .landing-page .hero__title { font-size: clamp(3.2rem, 14vw, 5rem); } }

/* Closing "Find out more" block: left-aligned, single link. */
.landing-page .fork__intro { text-align: left; }
.landing-page .fork__grid { grid-template-columns: 1fr; }

/* Hero: the next section is light now, so drop the long fade to black that made the footage look short.
   Keep the left-side shade for the headline and a light top shade under the nav. */
.landing-page .hero__scrim {
  background:
    linear-gradient(90deg, rgba(4, 5, 10, .5) 0%, rgba(4, 5, 10, .2) 45%, transparent 80%),
    linear-gradient(180deg, rgba(4, 5, 10, .35) 0%, transparent 22%, transparent 88%, rgba(4, 5, 10, .45) 100%);
}
/* Hero runs past the first screen on desktop so the footage carries into the scroll.
   Phones keep one screen: the 16:9 film is already heavily side-cropped there. */
@media (min-width: 56.25em) {
  .landing-page .hero { min-height: 120svh; align-items: flex-start; }
  /* Keep the headline centred in the first screen, where it sat when the hero was one screen tall. */
  .landing-page main .hero__inner { box-sizing: border-box; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
}
/* Centre the hero text in the visible area below the fixed nav (68px), not behind it. */
.landing-page main .hero__inner { padding-top: calc(clamp(7rem, 14svh, 10rem) + 68px); }

/* Intro: the paragraph spans exactly the heading's height. Boxes are trimmed to cap height and
   baseline so the tops line up; the script under .home-intro sets the paragraph's line-height so
   its last baseline lands on the heading's: it picks the largest font size (16-34px) that fits, moves the
   paragraph left if needed, then fine-tunes line-height (1.3-1.9). Content-agnostic, so new copy still fits. */
.landing-page .home-intro__body { align-items: start; }
.landing-page .home-intro__body h3,
.landing-page .home-intro__body p { text-box: trim-both cap alphabetic; }
@media (min-width: 56.26em) {
  .landing-page .home-intro__body { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 6vw; }
  .landing-page .home-intro__body p { max-width: none; font-size: clamp(1rem, 1.3vw, 1.75rem); }
}