/* Rextail homepage, the parent company's page. The shared theme
   (assets/theme.css) sets the type, colour, bar, buttons and footer it shares
   with the utility pages; assets/film.css runs the film behind the page and
   sets the chapters over it. This file lays out the company in its paper
   form, which is also the essay the page becomes without the film: the first
   screen (what Rextail builds, why, the ways to act), then the twelve
   chapters, each the film's era and line beside the company's text
   (design/landing/landing-text.md). */

/* The first screen: the company's line, why, and the ways to act. Over the
   film (film.css) it is light type on the opening shot. */
.intro{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(32px,6vh,64px);padding-block:clamp(56px,9vw,112px) clamp(32px,5vw,56px)}
.intro-title{max-width:22ch;font:600 clamp(34px,4.4vw,60px)/1.04 var(--sans);letter-spacing:-.04em;text-wrap:balance}
.intro-lead{margin-top:clamp(16px,2.2vh,24px);max-width:36ch;font-size:clamp(18px,1.45vw,21px);line-height:1.5;color:var(--text-2);text-wrap:pretty}
.intro-actions{margin-top:clamp(22px,3.4vh,32px)}
.nowrap{white-space:nowrap}
/* The foot: a hairline, and the cue into the film at its right (with the
   film only: film.css shows it). */
.intro-foot{display:none;justify-content:flex-end;align-items:center;min-height:44px;padding-top:20px;border-top:1px solid var(--line)}
.intro-cue{display:none}

/* The chapters on paper: an essay. Each chapter is a row under a hairline,
   the film's era and line at its left, the company's text at its right. */
.film-tracks{padding-block:clamp(24px,4vw,56px) clamp(56px,8vw,104px)}
.chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);align-items:start;gap:0 clamp(24px,4vw,64px);width:min(var(--wrap),100% - 2 * var(--gutter));margin-inline:auto;padding-block:clamp(28px,3.6vw,44px);border-top:1px solid var(--line)}
.chapter > *{grid-column:2}
.chapter > .chapter-film{grid-column:1;grid-row:1 / span 8;display:flex;flex-direction:column;gap:6px;padding-top:6px}
.film-era{font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.film-era abbr{text-decoration:none}
.chapter-line{font-size:15px;line-height:1.45;color:var(--text-2);text-wrap:pretty}
.chapter-title{max-width:26ch;font:600 clamp(26px,2.6vw,38px)/1.12 var(--sans);letter-spacing:-.03em;text-wrap:balance}
.chapter--pillar .chapter-title{font-size:clamp(34px,3.6vw,52px);line-height:1.02;letter-spacing:-.04em}
.chapter-quote{max-width:28ch}
.chapter-text{margin-top:12px;max-width:40ch;font-size:clamp(18px,1.45vw,20px);line-height:1.5;color:var(--text-2);text-wrap:pretty}
.chapter .eyebrow{margin-bottom:12px}
.chapter .actions{margin-top:26px}

@media(max-width:640px){
  /* Four lines from 320px up, with "AI-native" whole on the first. */
  .intro-title{font-size:clamp(26px,8.4vw,34px)}
}
/* A short screen (a phone on its side): the line, why and the ways to act,
   set smaller, so the first screen fits under the bar with room above it,
   and its copy has dissolved before it reaches the bar (at full size it
   filled the view up to the bar's foot). */
@media(max-height:560px) and (min-width:641px){
  .intro{gap:16px}
  .intro-title{max-width:30ch;font-size:28px}
  .intro-lead{margin-top:10px;font-size:16px}
  .intro-actions{margin-top:16px}
  .intro-foot{padding-top:12px}
}
@media(max-width:720px){
  .chapter{grid-template-columns:minmax(0,1fr)}
  .chapter > *,.chapter > .chapter-film{grid-column:1;grid-row:auto}
  .chapter > .chapter-film{padding-top:0;margin-bottom:14px}
}

@media print{
  .chapter{break-inside:avoid}
}