/* Home: composition only. Distances follow 06-DESIGN §6 (one step smaller on phones). */

/* the annotated line sits in the hero grid: between md and xl it starts under the H1, beside the rest of the
   standfirst, instead of below both (no hole under a short H1) */
.page-home .lay-hero > .line { grid-column: 1 / -1; }
.page-home .lay-hero > .fn { grid-column: 1 / -1; }

.page-home .bench { margin-top: var(--s-6); }
.page-home .bench-more { margin-top: var(--s-4); }

.page-home .credits { margin-top: var(--s-8); }
.page-home .doors { margin-top: var(--s-8); }
.page-home .files { margin-top: var(--s-8); }
.page-home .files-lede { margin-top: var(--s-3); font-size: var(--fs-lede); max-width: 20em; }
.page-home .quote { margin-top: var(--s-8); }
.page-home .quote .miniform { margin-top: var(--s-3); }

@media (min-width: 56.25em) {
  .page-home .lay-hero > .standfirst { grid-row: 1 / span 2; }
  .page-home .lay-hero > .line { grid-column: 1 / span 8; grid-row: 2; margin-top: var(--s-6); }
  .page-home .lay-hero > .line .line-pt { font-size: min(var(--fs-line), 7.4vw); }
  .page-home .lay-hero > .fn { grid-row: 3; }
  .page-home .bench { margin-top: var(--s-7); }
  .page-home .credits { margin-top: var(--s-9); }
  .page-home .doors { margin-top: var(--s-9); }
  .page-home .files { margin-top: var(--s-9); align-items: start; }
  .page-home .files-head { grid-column: 1 / span 5; }
  .page-home .folder { grid-column: 7 / span 6; margin-top: calc(var(--s-4) + 26px); }
  .page-home .quote { margin-top: var(--s-9); }
  .page-home .line-foot .note--tn { grid-row: 1 / span 2; }
  .page-home .line-foot .note--pen { grid-row: 2; }
}
/* the marks on the line: the wave runs under the g of "gente"; the second line drops by a quarter em so its
   accent and ascenders clear the wave, and the loop's top passes between the two (above the accent of
   "dá", round 2); the arrow ends on "gente" (in units of the line's own size, so it lands at any width) */
@media (min-width: 56.25em) {
  .page-home .line-pt .l2 { margin-top: .27em; }
  .page-home .line-pt .mark--wave .ink { bottom: -.24em; }
  .page-home .line-pt .mark--loop .ink { top: -3%; height: 116%; left: -10%; width: 118%; }
}
@media (min-width: 75em) {
  /* 1440 × 900: the translation and its note above the fold (06 §1.2) */
  .page-home .hero { padding-top: var(--s-6); }
  .page-home .line { --fs-line: clamp(3.4rem, 9.6vw, 9.25rem); }
  .page-home .line .line-foot { margin-top: var(--s-2); }
  .page-home .line .note--float { left: calc(var(--fs-line) * 6.1); right: auto; top: 12px; width: min(24rem, calc(100% - var(--fs-line) * 6.1)); }
  .page-home .line .note--float .ink--arrow { left: calc(var(--fs-line) * -2.735); top: calc(var(--fs-line) * -.04 + 5px); width: calc(var(--fs-line) * 2.7); height: calc(var(--fs-line) * 1.35); }
  .page-home .lay-hero > .standfirst { grid-row: 1; }
  .page-home .lay-hero > .line { grid-column: 1 / -1; margin-top: var(--s-5); }
  .page-home .lay-hero > .line .line-pt { font-size: var(--fs-line); }
}