/* Polyment landing v2, Home v4 (8 Oct): the colleagues' round. Loaded after home-v3.css, on the
   .v4 sheet only. Three answers: less text (every idea one line, the FAQ and the catchwords off
   the home page, the charter and the form one section); three grounds instead of seven paper
   tints (the sheet's cream, the lighter paper, and navy for two bands: the poster and the
   plates), the palette untouched; and the interviewer's question as the working title, the goal
   typed at the end of the subline. Everything else is home-v3.css as it was.
   Ported from the canvas (Step 17, the Home v4 boards) on branch home-v4; docs/landing-v2/HOME-V4.md. */

/* ---------- the hero: the interviewer's question is the title; the goal types in the subline ------ */
.v4 .v3-hero .hx-title { max-width: 14em; }
.v4 .hx-sub { max-width: 36ch; }
.v4 .hx-sub .hx-goal { display: inline-grid; vertical-align: baseline; margin-top: 0; padding-bottom: .02em; border-bottom: 1.5px solid var(--graphite-soft); }
.v4 .hx-sub .hx-goal-size { padding-inline-end: .1em; }
.v4 .hx-sub .h-line { margin-top: .25em; }
@media (max-width: 640px) {
  .v4 .v3-hero .hx-title { font-size: 33px; }
}

/* ---------- three grounds: the sheet's cream, the lighter paper, navy. No peach, no beige tints. */
.v4 .sec--poster  { background: var(--navy); color: var(--on-navy); }
.v4 .sec--picture { background: var(--cream-surface); }
.v4 .sec--parts   { background: transparent; }
.v4 .sec--peek    { background: var(--navy); color: var(--on-navy); }
.v4 .sec--charter { background: transparent; }

/* on navy: cream type, gilding on the fleuron, the acting colour stays cream */
.v4 .sec--poster .rubric svg, .v4 .sec--peek .rubric svg { color: var(--gold-light); }
.v4 .sec--poster h2, .v4 .poster .rubric h2.poster-title, .v4 .sec--peek h2, .v4 .sec--peek h3 { color: var(--on-navy); }
.v4 .poster-lines { margin-top: clamp(24px, 3vw, 40px); }
.v4 .poster-lines p { max-width: 28ch; color: var(--on-navy-soft); }
.v4 .sec--peek .passage-intro { color: var(--on-navy-soft); }
.v4 .sec--peek .vplate-frame { background: var(--navy-soft); border-color: rgba(244, 236, 218, .22); }
.v4 .sec--peek .vplate-cap p { color: var(--on-navy-soft); }
.v4 .sec--peek .vplate-play { background: var(--on-navy); border-color: var(--on-navy); color: var(--navy); }
.v4 .sec--peek .vplate-play:hover { background: #fff; border-color: #fff; }
.v4 .sec--peek .vplate-desc > summary { color: var(--on-navy); }
.v4 .sec--peek .vplate-desc > summary:hover { text-decoration-color: rgba(244, 236, 218, .5); }
.v4 .sec--peek .vplate-desc ol, .v4 .sec--peek .vplate-desc li::marker { color: var(--on-navy-soft); }
/* The caption strip lies on the picture (its own navy, home-v2.css) and the controls are a cream bar:
   both read on navy as they are, so neither is re-coloured here. */
.v4 .sec--peek .more { color: var(--on-navy); text-decoration-color: rgba(244, 236, 218, .5); }
.v4 .sec--peek .more:hover { text-decoration-color: var(--on-navy); }
.v4 .sec--poster :focus-visible, .v4 .sec--peek :focus-visible { outline-color: var(--on-navy); }
.v4 .sec--poster ::selection, .v4 .sec--peek ::selection { background: var(--gold-light); color: var(--navy); }

/* ---------- the four parts: half a screen each on a phone, not a screen each ------------------- */
.v4 .parts { margin-top: clamp(28px, 4vw, 56px); }
.v4 .part-body { max-width: 38ch; }
@media (max-width: 640px) {
  .v4 .part { min-height: 0; padding: 26px 0 28px; row-gap: 14px; }
  .v4 .part:first-child { padding-top: 6px; }
  .v4 .part-art { max-width: 300px; }
  .v4 .part-old { margin-bottom: 6px; font-size: 19px; }
  .v4 .part-text h3 { margin-bottom: 8px; font-size: 27px; }
  .v4 .part-head { margin-bottom: 8px; }
  .v4 .part-body { font-size: 17px; }
}

/* ---------- the plates: a little tighter; on desktop the two short clips take the rail ------------ */
.v4 .sec--peek .passage-intro { margin-bottom: 22px; }
.v4 .quiet .plates { gap: 24px 20px; }
@media (min-width: 981px) {
  .v4 .sec--peek.quiet { grid-template-columns: minmax(0, 1fr); }
  .v4 .sec--peek .plates { grid-template-columns: minmax(0, 1fr) var(--rail-w); column-gap: clamp(36px, 4.5vw, 64px); row-gap: 24px; align-items: start; }
  .v4 .sec--peek .vplate--lead { grid-column: 1; grid-row: 1 / span 2; }
  .v4 .sec--peek .vplate--small { grid-column: 2; }
}

/* ---------- the charter, with the form inside it: one conversion moment, not three -------------- */
.v4 .charter-sub { max-width: 26ch; margin-inline: auto; }
.v4 .articles { margin-top: clamp(24px, 3vw, 36px); gap: 12px; }
.v4 .opening { margin-top: clamp(22px, 3vw, 36px); padding: 14px 0 16px; }
.v4 .seats { margin-top: 6px; }                      /* three columns from 641px, as before */
.v4 .seats li { padding: 4px 10px; }
.v4 .seat-f { font-size: clamp(19px, 1.9vw, 24px); }
.v4 .charter-form { max-width: 560px; margin: clamp(22px, 3vw, 36px) auto 0; }
.v4 .charter-form .hx-form { margin: 0; max-width: none; }
.v4 .charter-form .form-privacy { margin-top: 12px; }
.v4 .charter-form .small-line { margin-top: 8px; }
.v4 .sec-rail--leo { align-self: end; }
@media (max-width: 640px) {
  .v4 .seats { margin-top: 2px; }                   /* a compact stack on phones, no rules between */
  .v4 .seats li { padding: 3px 2px; }
  .v4 .seats li + li { border-top: 0; }
  .v4 .seat-f { font-size: 18px; }
  .v4 .charter { padding-inline: 18px; }
}

/* ---------- the sections themselves, a little less air on phones --------------------------------- */
@media (max-width: 640px) {
  .v4 .sec { padding-top: 48px; padding-bottom: 48px; }
  .v4 .sec.moment { padding-top: 56px; padding-bottom: 52px; }
  .v4 .moment .rubric h2 { font-size: 30px; }
  .v4 .poster .rubric h2.poster-title { font-size: 34px; }
}