/* ---------------------------------------------------------------------------
 * WordPress-only design adjustments.
 *
 * assets/css/globals.css is a verbatim copy of src/styles/globals.css so it
 * can be re-copied whenever the Next.js side changes. Anything that should
 * differ from that original belongs here instead, in a file loaded after it.
 * ------------------------------------------------------------------------ */

/* Content width.
 *
 * The Next.js build caps every band at 1200px, which reads well on a laptop
 * but strands the page in the middle of a 2560px monitor with a third of the
 * screen empty on either side.
 *
 * Widening the container is safe because the design already limits line length
 * separately: body copy carries its own `ch` maxima (52ch on .hero__text, 62ch
 * on .section-head__lead, 68ch on .prose). The extra width therefore goes to
 * the grids, tables and photographs, and measure is untouched.
 */
/* The `min()` matters as much as the raised ceiling. A flat 1440px cap looks
 * right on a large monitor but goes flush to the edges on a 1440px laptop,
 * where the container exactly equals the viewport and only the gutter is left
 * between the text and the bezel. Holding the band to 92vw keeps a margin at
 * every width, and the 1440px ceiling stops it sprawling on an ultrawide.
 */
:root {
  --pss-container: min(92vw, 1440px);
  --pss-container-narrow: min(92vw, 1000px);
}

/* Keep paired form fields aligned when only one of them fails validation.
 *
 * `.form__row` is a grid, so both cells are stretched to the height of the
 * taller one. `.field` is itself a grid whose rows default to stretching into
 * whatever height they are given — so the field *without* an error message
 * absorbs the extra height its neighbour's message created: its input grows
 * taller and its top edge drops below the other's.
 *
 * Holding the rows to their natural height fixes both symptoms at once.
 * The same is true of the Next.js build, which shares this stylesheet —
 * see src/styles/globals.css:1313.
 */
.field {
  align-content: start;
}