/* =====================================================================
   Introductions use the width they are given (owner, 10 Oct 2026: "the text ... only fills two thirds of the available space -
   there isnt a reason to [not] let it go full width or alternatively (if there is a lot of text) make it go two columns
   (newspaper style)"). Loaded last. On a computer, an introduction fills its column; a long one (js/site.js marks it
   .is-long: eight lines or more in one column, in a box 900 px or wider) is set in two newspaper columns, so no line runs too long to read.
   Phones are unchanged (one column, full width already).
   ===================================================================== */
@media (min-width: 1100px) {
    :is(.page-head .lead, .page-head > p, .hero .lead, .page-intro, .lab-hero p.lead, .lab-hero > p, .lab-note, .tab-intro, .acc-metric,
        .hub-head .standfirst, .hub-head .standfirst + .standfirst, .hb-hero .lead, .wi-head .lead, .section-header--stack .deck) { max-width: none; }
    .is-long { column-count: 2; column-gap: 44px; text-wrap: pretty; }
    .is-long a, .is-long b, .is-long strong { break-inside: avoid; }
    .page-head h1, .lab-hero h1 { max-width: none; }
}

/* Cards laid out by a grid start level (owner, 10 Oct 2026: on /eu "France is above the rest"). The site's ".card + .card"
   spacing is for cards stacked one under another; in a grid it pushed every card but the first down. */
[class$="-grid"] > .card + .card, [class*="-grid "] > .card + .card, [class$="grid-12"] > .card + .card { margin-top: 0; }

/* the country's flag on the front page's cards (js/site.js) */
.hub-flag { display: inline-block; width: 18px; height: 12px; margin: 0 6px 0 0; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); object-fit: cover; }

/* the seat bar's legend sat on the grey panel's bottom edge on every country front page (owner, 12 Oct 2026: "needs some padding
   between this and the grey box above") */
.chart-module .figure-panel + .legend { margin-top: 12px; }

/* "More to try" under the article: its own rule sat 46px above the first card's rule, two black lines around a two-word label
   (owner, 12 Oct 2026). The label keeps no rule of its own; the cards' rules do the work, as on every other section title. */
.bal-more__head { border-top: 0; padding-top: 0; margin-bottom: 14px; }

/* "Everything on <country> +" is a <details> among link cards: it took the site's 12px gap above folded boxes and its picture
   shrank to its content, so it sat lower and narrower than the three beside it (owner, 12 Oct 2026). Same frame as the links now. */
details.door--more { margin: 0; }
.door--more > summary { align-items: stretch; text-align: start; }

/* changes the reader causes, played from the old value (js/motion.js, setting "MotionOnChange"): a shape that changes
   colour flashes twice in its old colour, then fades to the new one */
@keyframes pfm-flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: .2; } }
.pfm-flash { animation: pfm-flash .9s ease-in-out; }
.pfm-fade { transition: fill .55s ease, background-color .55s ease, background .55s ease !important; }
@media (prefers-reduced-motion: reduce) { .pfm-flash { animation: none; } .pfm-fade { transition: none !important; } }