/* ==========================================================================
   Shape, elevation and chrome. Loaded last, after art.css.

   The proportions here are not invented. Paris Aéroport and Schiphol were
   both measured: in each, the most common border-radius on the page is
   9999px (pills) followed by 16px (cards), and neither uses box-shadow for
   elevation to any real degree. Flat surfaces, generous radii, one type
   family. This layer brings the site onto that footing.
   ========================================================================== */

:root {
	--r-xs:   6px;
	--r-sm:  10px;
	--r-md:  16px;   /* the card radius both references converge on */
	--r-lg:  24px;
	--r-xl:  40px;
	--r-pill: 9999px;

	/* One elevation, used sparingly. Depth comes from the radius and from a
	   hairline, not from a stack of shadows. */
	--e-1: 0 1px 2px rgba(20,33,31,.04), 0 10px 30px -22px rgba(20,33,31,.35);
	--e-2: 0 1px 2px rgba(20,33,31,.05), 0 22px 48px -30px rgba(20,33,31,.45);
}

/* ------------------------------------------------------------- pills --- */

.sa-btn,
.sa-btn--ghost { border-radius: var(--r-pill); padding-inline: 1.35rem; }
.sa-nav__toggle { border-radius: var(--r-pill); padding-inline: 1rem; }

.sa-mo__tag b,
.sa-mo__mini > div,
.sa-air__code,
.sa-dt__m b,
.sa-fids__hd { border-radius: var(--r-pill); }

.sa-mo__mini > div { padding: .3rem .75rem; }
.sa-mo__tag b { padding: .18rem .55rem; }
.sa-air__code { padding: .3rem .62rem; }

/* ------------------------------------------------------------- cards --- */

.sa-band,
.sa-fids,
.sa-air,
.sa-qa__i,
.sa-answers,
.sa-pic__m,
.sa-qa-aside__media,
.sa-feature__media,
.sa-feature__media img,
.sa-g__img img,
.sa-dt,
.sa-mo { border-radius: var(--r-md); }

.sa-mo--lead,
.sa-dt--big { border-radius: var(--r-lg); }

/* The quick-answer grid is one card with hairline dividers rather than
   sixteen separate boxes: fewer edges, calmer page. */
.sa-answers { overflow: clip; }
.sa-answer:first-child > a { border-top-left-radius: var(--r-md); }
.sa-answer > a { border-radius: 0; }

/* Elevation, trimmed back everywhere it was doing too much. */
.sa-band { box-shadow: var(--e-1); }
.sa-qa__i[open] { box-shadow: var(--e-1); }
.sa-air:hover { box-shadow: var(--e-2); }
.sa-fids { box-shadow: 0 28px 64px -40px rgba(4,16,13,.9); }

/* ------------------------------------------- the cover under the header --- */

/* On the home page the masthead floats over the photograph instead of
   sitting on a bar above it, so the image is the first thing on the screen.
   It turns into a normal solid bar once the cover has scrolled away. */
body.sa-front .sa-masthead {
	position: fixed; inset: 0 0 auto;
	background: transparent;
	backdrop-filter: none; -webkit-backdrop-filter: none;
	border-bottom-color: transparent;
	transition: background .3s var(--sa-ease), border-color .3s var(--sa-ease), backdrop-filter .3s var(--sa-ease);
}
body.sa-front .sa-masthead .sa-brand__name,
body.sa-front .sa-masthead .sa-nav a { color: #fff; }
body.sa-front .sa-masthead .sa-brand__kicker { color: rgba(255,255,255,.66); }
body.sa-front .sa-masthead .sa-brand svg { color: #fff; }
body.sa-front .sa-masthead .sa-nav a:hover { color: var(--sa-amber); }
body.sa-front .sa-masthead .sa-nav__toggle { color: #fff; border-color: rgba(255,255,255,.4); }

/* Scrolled past the cover: the ordinary bar returns. */
body.sa-front .sa-masthead.is-stuck {
	background: color-mix(in srgb, var(--sa-paper) 90%, transparent);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	border-bottom-color: var(--sa-rule);
}
body.sa-front .sa-masthead.is-stuck .sa-brand__name,
body.sa-front .sa-masthead.is-stuck .sa-nav a { color: var(--sa-ink); }
body.sa-front .sa-masthead.is-stuck .sa-brand__kicker { color: var(--sa-muted); }
body.sa-front .sa-masthead.is-stuck .sa-brand svg { color: var(--sa-green); }
body.sa-front .sa-masthead.is-stuck .sa-nav__toggle { color: var(--sa-ink); border-color: var(--sa-rule); }

/* The block gap WordPress puts between the header part and <main> would
   leave a 24px band of page colour above a cover that is meant to start at
   the very top of the window. */
body.sa-front main { margin-top: 0 !important; }

/* The cover now starts at the very top of the window, and its lower corners
   are cut so the page beneath reads as a separate sheet. */
body.sa-front .sa-cover {
	min-height: min(100svh, 58rem);
	border-radius: 0 0 var(--r-xl) var(--r-xl);
}
body.sa-front .sa-cover__in { padding-top: calc(var(--sa-head-h, 4rem) + clamp(3rem, 8vw, 6rem)); }

/* The masthead now floats over whatever the photograph happens to be doing
   at the top of the frame, which on this picture is bright sky. A short
   top-down wash guarantees the brand and the links stay legible without
   darkening the image as a whole. */
body.sa-front .sa-cover__scrim::after {
	content: ""; position: absolute; inset: 0 0 auto; height: 11rem;
	background: linear-gradient(to bottom,
		rgb(var(--sa-night) / .62) 0%, rgb(var(--sa-night) / .34) 42%, transparent 100%);
}

/* A quiet cue that the page continues. */
.sa-cover__more {
	position: absolute; left: 50%; bottom: 1.1rem; z-index: 4;
	transform: translateX(-50%);
	display: grid; place-items: center; gap: .35rem;
	font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase;
	color: rgba(255,255,255,.52); text-decoration: none;
}
.sa-cover__more span {
	width: 1px; height: 1.9rem;
	background: linear-gradient(to bottom, rgba(242,183,73,.9), transparent);
}
@media (max-width: 1039px) { .sa-cover__more { display: none; } }

/* -------------------------------------------------- the floating index --- */

/* The full-width sticky strip was a bar of links competing with the
   masthead. This is a single floating control instead: it stays out of the
   way, it appears only once the cover is behind you, and it never sits next
   to the site navigation. */
.sa-quicknav {
	position: fixed; z-index: 60;
	left: 50%; bottom: 1.25rem; top: auto;
	transform: translate(-50%, 1.5rem);
	width: auto; max-width: calc(100vw - 2rem);
	background: rgb(var(--sa-night) / .82);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--r-pill);
	box-shadow: 0 20px 48px -22px rgba(4,16,13,.75);
	opacity: 0; pointer-events: none;
	transition: opacity .3s var(--sa-ease), transform .3s var(--sa-ease);
}
.sa-quicknav.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.sa-quicknav__in { padding: 0 .5rem; gap: 0; overflow: visible; }
.sa-quicknav__label { display: none; }
.sa-quicknav ul { gap: .1rem; }
.sa-quicknav a {
	padding: .62rem .85rem;
	border-bottom: 0; border-radius: var(--r-pill);
	color: rgba(255,255,255,.7); font-size: .78125rem;
	transition: background .2s var(--sa-ease), color .2s var(--sa-ease);
}
.sa-quicknav a:hover { color: #fff; background: rgba(255,255,255,.12); border-bottom: 0; }
.sa-quicknav a.is-here { color: var(--sa-night); background: var(--sa-amber); }

/* On a phone a floating index covers the thing it indexes. */
@media (max-width: 999px) { .sa-quicknav { display: none; } }

/* Anchors no longer need to clear a second sticky bar. */
html { scroll-padding-top: calc(var(--sa-head-h, 4rem) + 1.5rem); }

/* ----------------------------------------------------------- the rest --- */

.sa-g__ico,
.sa-answer__ico,
.sa-qa__ico,
.sa-trust__ico { border-radius: var(--r-pill); }

/* Icon chips a size up, so the drawing reads rather than hints. Scoped to
   the width that has room for them: an unconditional rule here loads after
   the small-screen rules in ui.css and silently wins, which is how the chip
   ended up wider than the column it sits in on a phone. */
@media (min-width: 621px) {
	.sa-answer__ico { width: 2.75rem; height: 2.75rem; }
	.sa-qa__ico { width: 2.6rem; height: 2.6rem; }
}

.sa-chart__track, .sa-chart__bar, .sa-chart__intl { border-radius: var(--r-pill); }
.sa-chart__intl { border-radius: 0 var(--r-pill) var(--r-pill) 0; }

.sa-note, .sa-g__note { border-radius: 0 var(--r-md) var(--r-md) 0; }
.sa-pull { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.wp-block-table table { border-radius: var(--r-md); overflow: hidden; }
.sa-tile { border-radius: var(--r-md); }
.sa-keyfacts { border-radius: var(--r-md); }

/* The board keeps its own square-edged, mechanical character: it is meant
   to look like equipment, not like a card. */
.sa-board, .sa-board * { border-radius: 0; }

/* The floating index is fixed, so the last line of the page would sit under
   it for good. Give the footer room to clear it. */
@media (min-width: 1000px) { .sa-footer { padding-bottom: 5.5rem; } }

/* A cream callout sitting inside a dark section inherited that section's
   pale text colour, because `.sa-section--dark p` outranks `.sa-g__note`.
   Cream on cream. The box carries its own colours wherever it lands. */
.sa-section--dark .sa-g__note,
.sa-section--dark .sa-g__note span,
.sa-section--dark .sa-g__note strong,
.sa-section--dark .sa-note,
.sa-section--dark .sa-note strong { color: var(--sa-ink); }
.sa-section--dark .sa-g__note a,
.sa-section--dark .sa-note a { color: var(--sa-green); }

/* ===================================================== the guide pages === */

/* The at-a-glance panel: the four or five numbers a reader came for, before
   the prose rather than buried in it. */
.sa-gfacts {
	background: var(--sa-tint);
	border: 1px solid var(--sa-rule);
	border-radius: var(--r-md);
	padding: 1.15rem 1.35rem 1.25rem;
	margin: 1.6rem 0 2rem;
}
.sa-gfacts__h {
	display: flex; align-items: center; gap: .5rem; margin: 0 0 .85rem;
	font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--sa-green);
}
.sa-gfacts dl { margin: 0; display: grid; gap: 0; }
.sa-gfacts > dl > div {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	padding: .55rem 0; border-top: 1px solid var(--sa-rule);
}
.sa-gfacts dt { margin: 0; font-size: .875rem; color: var(--sa-muted); }
.sa-gfacts dd {
	margin: 0; font-size: .9375rem; font-weight: 700; text-align: right;
	color: var(--sa-ink); font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) { .sa-gfacts dl { grid-template-columns: 1fr 1fr; gap: 0 2.2rem; } }

/* "Read the full guide" under a summary that has a page behind it. */
.sa-g__more { margin: 1.1rem 0 0 !important; }
.sa-g__more a {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .5rem 1rem .5rem 1.05rem;
	border: 1px solid var(--sa-rule); border-radius: var(--r-pill);
	font-size: .84375rem; font-weight: 600; color: var(--sa-green);
	text-decoration: none; background: var(--sa-surface);
	transition: background .2s var(--sa-ease), border-color .2s var(--sa-ease), gap .2s var(--sa-ease);
}
.sa-g__more a:hover { background: var(--sa-tint); border-color: var(--sa-green); gap: .7rem; }

/* The other subjects, at the foot of a guide page. */
.sa-gnav {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1px; background: var(--sa-rule);
	border: 1px solid var(--sa-rule); border-radius: var(--r-md); overflow: clip;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.sa-gnav a {
	display: flex; align-items: center; gap: .75rem;
	padding: .95rem 1.1rem; background: var(--sa-surface);
	color: var(--sa-ink); text-decoration: none; font-size: .9375rem; font-weight: 500;
	transition: background .2s var(--sa-ease);
}
.sa-gnav a:hover { background: var(--sa-gold-lt); }
.sa-gnav svg { color: var(--sa-green); }

/* On the hub, a subject without its own page yet says so rather than
   pretending. */
.sa-answer__soon {
	/* Its own row. Sharing `grid-area: x` with the description put both in
	   the same cell and they printed over each other — the fourth time a
	   duplicated named area has done this. One element, one area. */
	grid-area: f; align-self: end;
	margin-top: .5rem; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--sa-muted);
}
.sa-answers--hub .sa-answer.is-live .sa-answer__go { color: var(--sa-green); }

/* The headline fact on an index card: the one number the subject is about.
   Two things make this work and both were wrong before.

   1. The value is stacked ABOVE its label, not beside it. Side by side, a
      long value like "Data-capped, not time-capped" either overflowed the
      card or squeezed the label into three lines.
   2. The row is pinned to the bottom of the card, so the hairline above it
      lands at the same height on every card in a row. Letting it follow the
      description left the rules 25px out of true across a row.                */
.sa-answer > a {
	grid-template-areas: "ico t go" ". x x" ". f f";
	grid-template-rows: auto 1fr auto;
}
.sa-answer__f {
	grid-area: f; align-self: end;
	margin-top: .9rem; padding-top: .6rem;
	border-top: 1px solid var(--sa-rule);
	display: grid; gap: .1rem;
}
.sa-answer__f b {
	font-family: var(--wp--preset--font-family--display);
	font-size: .9375rem; font-weight: 700; letter-spacing: -.014em; line-height: 1.2;
	color: var(--sa-green); font-variant-numeric: tabular-nums;
	/* No nowrap: a long value must wrap inside the card, not escape it. */
	overflow-wrap: anywhere;
}
.sa-answer__f span, .sa-answer__f { font-size: .6875rem; color: var(--sa-muted); letter-spacing: .02em; }
.sa-answer > a:hover .sa-answer__f { border-top-color: rgba(201,138,43,.4); }

/* ------------------------------------------------ contrast on dark --- */

/* Measured, not guessed: the savanna gold #C98A2B on the deep green
   #0A3A2E gives 4.32:1, just under the 4.5:1 that normal-size text needs.
   The amber #F2B749 gives 7.03:1 on the same background. Every piece of
   small gold text on a dark surface uses the amber instead; the gold stays
   where it belongs, on paper. */
.sa-section--dark .sa-eyebrow,
.sa-section--dark .sa-mark b,
.sa-section--dark a,
.sa-section--dark .sa-trust__n,
.sa-section--dark .sa-trust__ico,
.sa-section--dark .sa-pull b,
.sa-board__title,
.sa-board .sa-board__code,
.sa-footer h2,
.sa-footer a:hover { color: var(--sa-amber); }

.sa-section--dark .sa-trust__ico { border-color: rgba(242,183,73,.45); }

/* The gold callout keeps its own ink colour on any background, and its link
   has to clear 4.5:1 against cream rather than against the section. */
.sa-section--dark .sa-g__note a,
.sa-section--dark .sa-note a { color: var(--sa-green-dk); }

/* ------------------------------------------------------- the footer --- */

/* `auto-fit` gave three tracks at tablet width while the brand block spanned
   all of them, so the two link columns sat in a three-column row and left
   one empty. The column count is now stated rather than inferred: one on a
   phone, two beside the full-width brand on a tablet, three on a desktop. */
.sa-footer__inner { grid-template-columns: 1fr; }
@media (min-width: 560px) { .sa-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sa-footer__inner { grid-template-columns: repeat(3, 1fr); } }

/* ===================================== the narrowest phones (320px) === */

/* A grid or flex item defaults to min-width:auto, which is its min-content
   width. A long tabular figure then makes the card wider than its own
   column. Let these shrink. */
.sa-mo, .sa-dt, .sa-answer, .sa-qa__i, .sa-gf { min-width: 0; }

/* At 320px the brand lock-up and the menu button together need more room
   than the bar has, and the button was pushed off the screen. The brand
   gives way first: it may shrink, and below 360px it drops its strapline. */
.sa-masthead__inner { gap: 1rem; }
.sa-brand { flex: 0 1 auto; min-width: 0; }
.sa-brand__text { min-width: 0; }
.sa-brand__name { overflow-wrap: anywhere; }
@media (max-width: 380px) {
	.sa-masthead__inner { gap: .6rem; padding-inline: 1rem; }
	.sa-brand__kicker { display: none; }
	.sa-brand__name { font-size: .9375rem; }
	.sa-nav__toggle { padding-inline: .7rem; }
}

/* The label and the figure sit on one line until there is no room for both.
   On a 320px screen "20,083,399" at display size is wider than what is left
   beside its label, so the pair wraps rather than pushing out of the card. */
.sa-mo__pax { flex-wrap: wrap; row-gap: .25rem; }
.sa-mo__pax b { overflow-wrap: anywhere; }
@media (max-width: 380px) {
	.sa-mo__pax { flex-direction: column; align-items: flex-start; }
	.sa-mo--lead .sa-mo__pax b, .sa-mo__pax b { font-size: 1.375rem; }
}

/* ==================================================== the airport pages === */

.sa-apstats {
	background: var(--sa-tint);
	border: 1px solid var(--sa-rule);
	border-radius: var(--r-md);
	padding: 1.15rem 1.3rem 1.3rem;
	margin: 1.6rem 0 2rem;
}
.sa-apstats__hd {
	display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem;
	font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--sa-green);
}
.sa-apstats ul {
	list-style: none; margin: 0 0 1.2rem; padding: 0;
	display: grid; gap: 1rem 1.4rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
.sa-apstats li { display: grid; gap: .1rem; min-width: 0; }
.sa-apstats__i {
	width: 2rem; height: 2rem; display: grid; place-items: center;
	border-radius: var(--r-pill); background: var(--sa-surface); color: var(--sa-green);
	margin-bottom: .35rem;
}
.sa-apstats b {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 700; line-height: 1.1;
	letter-spacing: -.024em; color: var(--sa-green);
	font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.sa-apstats li > span:last-child { font-size: .75rem; line-height: 1.4; color: var(--sa-muted); }

/* Where the traffic goes, as three proportional rules. */
.sa-apsplit { display: grid; gap: .7rem; border-top: 1px solid var(--sa-rule); padding-top: 1.1rem; }
.sa-apsplit > div { display: grid; grid-template-columns: 1fr auto; gap: .2rem .9rem; }
.sa-apsplit span { font-size: .8125rem; color: var(--sa-muted); }
.sa-apsplit b { font-size: .8125rem; font-weight: 700; color: var(--sa-ink); font-variant-numeric: tabular-nums; }
.sa-apsplit i {
	grid-column: 1 / -1; height: 5px; border-radius: var(--r-pill);
	background: var(--sa-green); display: block; min-width: 2px;
}
.sa-apsplit .is-zero b { color: var(--sa-muted); font-weight: 500; font-style: italic; }
.sa-apsplit .is-zero i { background: var(--sa-rule); width: 100% !important; opacity: .5; }

/* Five financial years, as columns. */
.sa-trend {
	display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
	gap: .5rem; align-items: end;
	margin: 1.4rem 0 1.8rem; padding: 1.2rem 1.1rem 1rem;
	background: var(--sa-surface); border: 1px solid var(--sa-rule); border-radius: var(--r-md);
}
.sa-trend__r { display: grid; gap: .4rem; justify-items: center; min-width: 0; }
.sa-trend__t { width: 100%; height: 6rem; display: flex; align-items: flex-end; }
.sa-trend__t > span {
	width: 100%; background: linear-gradient(to top, var(--sa-green), color-mix(in srgb, var(--sa-green) 65%, white));
	border-radius: var(--r-xs) var(--r-xs) 0 0; min-height: 3px;
}
.sa-trend__r:last-child .sa-trend__t > span { background: linear-gradient(to top, var(--sa-gold), #E7B567); }
.sa-trend__y { order: -1; font-size: .625rem; letter-spacing: .06em; color: var(--sa-muted); }
.sa-trend__n { font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sa-ink); }
.sa-trend__c { font-size: .625rem; color: var(--sa-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
	.sa-trend { grid-auto-flow: row; grid-auto-columns: auto; }
	.sa-trend__r { grid-template-columns: 3.4rem 1fr auto auto; align-items: center; justify-items: start; gap: .6rem; }
	.sa-trend__t { height: 1.1rem; align-items: stretch; }
	.sa-trend__t > span { height: 100%; border-radius: var(--r-pill); }
	.sa-trend__y { order: 0; }
}

/* The other airports. */
.sa-apnav {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1px; background: var(--sa-rule);
	border: 1px solid var(--sa-rule); border-radius: var(--r-md); overflow: clip;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.sa-apnav a, .sa-apnav .is-soon {
	display: grid; grid-template-columns: 2.8rem 1fr; gap: .1rem .7rem;
	padding: .85rem 1rem; background: var(--sa-surface);
	text-decoration: none; min-width: 0;
}
.sa-apnav a:hover { background: var(--sa-gold-lt); }
.sa-apnav .is-soon { opacity: .55; }
.sa-apnav b {
	grid-row: span 2; align-self: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem; font-weight: 700; letter-spacing: .04em; color: var(--sa-gold);
}
.sa-apnav__n { font-size: .875rem; font-weight: 600; color: var(--sa-ink); }
.sa-apnav__p { font-size: .6875rem; color: var(--sa-muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- the chart off-dark --- */

/* The month chart was styled for the dark band it first appeared in, and the
   light variant in ui.css was scoped to `.sa-section:not(.sa-section--dark)`.
   On an airport page the chart is not inside a `.sa-section` at all, so the
   override never applied and pale text landed on white at 1.23:1.
   The light treatment is now the default; the dark band opts back in. */
.sa-chart__m, .sa-chart__v { color: var(--sa-ink); }
.sa-chart__d { color: var(--sa-muted); }
.sa-chart__cap, .sa-chart__legend { color: var(--sa-muted); }
.sa-chart__track { background: var(--sa-tint); }
.sa-chart__bar { background: var(--sa-green); }
.sa-chart__intl { background: var(--sa-gold); }
.sa-chart__rows::after { border-left-color: rgba(20,33,31,.35); }
.sa-chart__key--dom::before  { background: var(--sa-green); }
.sa-chart__key--intl::before { background: var(--sa-gold); }
.sa-chart__key--avg::before  { background: rgba(20,33,31,.45); }

.sa-section--dark .sa-chart__m { color: rgba(216,228,219,.86); }
.sa-section--dark .sa-chart__v { color: rgba(216,228,219,.92); }
.sa-section--dark .sa-chart__d { color: rgba(216,228,219,.58); }
.sa-section--dark .sa-chart__cap,
.sa-section--dark .sa-chart__legend { color: rgba(216,228,219,.72); }
.sa-section--dark .sa-chart__track { background: rgba(255,255,255,.07); }
.sa-section--dark .sa-chart__bar { background: var(--sa-gold); }
.sa-section--dark .sa-chart__intl { background: #F0DFBE; }
.sa-section--dark .sa-chart__rows::after { border-left-color: rgba(255,255,255,.4); }
.sa-section--dark .sa-chart__key--dom::before  { background: var(--sa-gold); }
.sa-section--dark .sa-chart__key--intl::before { background: #F0DFBE; }
.sa-section--dark .sa-chart__key--avg::before  { background: rgba(255,255,255,.55); }
.sa-section--dark .sa-chart__row.is-peak .sa-chart__m,
.sa-section--dark .sa-chart__row.is-peak .sa-chart__v { color: #fff; }

/* The peak row on a light background. */
.sa-chart__row.is-peak .sa-chart__m,
.sa-chart__row.is-peak .sa-chart__v { color: var(--sa-green-dk); font-weight: 700; }

/* ================================================ hub page measure === */

/* A reading column of about 44rem is right for prose and wrong for a card
   grid, a twelve-row chart or a twenty-two row table. On a hub page the
   container opens up and the PROSE is pulled back in, rather than the other
   way round: text stays readable, components get the room they need. */
/* The cap that mattered was on the template's own wrapper, not on
   .entry-content: widening the inner box does nothing while its parent is
   still 44rem. Both have to open. */
body.sa-hubpage .sa-prose-wrap,
body.sa-hubpage .entry-content { max-width: 76rem; }
/* Only real prose is pulled back to a reading measure. The earlier version
   of this rule said `> ul`, which also matched the card grids — they are
   lists too — and an element selector outranks a class, so the grids were
   silently clamped to 44rem. Target the block class, not the tag. */
body.sa-hubpage .entry-content > p,
body.sa-hubpage .entry-content > h2,
body.sa-hubpage .entry-content > h3,
body.sa-hubpage .entry-content > ul.wp-block-list,
body.sa-hubpage .entry-content > ol.wp-block-list,
body.sa-hubpage .entry-content > figure.wp-block-table:not(.sa-table-cards) {
	max-width: 44rem !important; margin-inline: auto;
}
/* The data components are the reason the page is wide. */
body.sa-hubpage .sa-apcards,
body.sa-hubpage .sa-answers,
body.sa-hubpage .sa-chart,
body.sa-hubpage .sa-guide,
body.sa-hubpage .sa-mosaic,
body.sa-hubpage .sa-table-cards { max-width: none !important; }
body.sa-hubpage .entry-content > figure.sa-table-cards,
body.sa-hubpage .entry-content > .sa-table-cards { max-width: 64rem !important; }
body.sa-hubpage .entry-content > h2 { margin-top: 2.8rem; }

/* ================================================= the airport cards === */

.sa-apcards {
	display: grid; gap: 1.1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	margin: 2rem 0 2.5rem;
}

.sa-apc {
	display: flex; flex-direction: column;
	background: var(--sa-surface);
	border: 1px solid var(--sa-rule);
	border-radius: var(--r-md);
	overflow: clip; text-decoration: none; min-width: 0;
	transition: border-color .22s var(--sa-ease), box-shadow .22s var(--sa-ease), transform .22s var(--sa-ease);
}
a.sa-apc:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--sa-green) 40%, var(--sa-rule));
	box-shadow: var(--e-2);
}
.sa-apc--quiet { opacity: .72; }

.sa-apc__ph { position: relative; aspect-ratio: 16/10; overflow: clip; background: var(--sa-tint); }
.sa-apc__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--sa-ease); }
a.sa-apc:hover .sa-apc__ph img { transform: scale(1.05); }

/* No photograph of that airport? A board tile, not somebody else's terminal. */
.sa-apc__ph--board {
	display: grid; place-items: center;
	background:
		radial-gradient(120% 100% at 30% 0%, #11473A 0%, #0A3A2E 55%, #071C16 100%);
}
.sa-apc__ph--board span {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 700;
	letter-spacing: .12em; color: var(--sa-amber);
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 72;
	text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.sa-apc__ph--board::after {
	content: ""; position: absolute; inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
	pointer-events: none;
}

.sa-apc__b { padding: 1rem 1.15rem 1.15rem; display: grid; gap: .18rem; flex: 1; align-content: start; }
.sa-apc__code {
	margin: 0 0 .15rem; display: flex; align-items: baseline; gap: .5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem; font-weight: 700; letter-spacing: .07em; color: var(--sa-gold);
}
.sa-apc__code i { font-style: normal; font-size: .625rem; letter-spacing: .1em; color: var(--sa-muted); }
.sa-apc__n {
	margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.22; letter-spacing: -.018em;
	color: var(--sa-ink);
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 28;
}
.sa-apc__w { margin: 0; font-size: .78125rem; color: var(--sa-muted); }
.sa-apc__p {
	margin: .7rem 0 0; padding-top: .6rem; border-top: 1px solid var(--sa-rule);
	display: grid; gap: .05rem;
}
.sa-apc__p b {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem; font-weight: 700; letter-spacing: -.022em;
	color: var(--sa-green); font-variant-numeric: tabular-nums;
}
.sa-apc__p span { font-size: .6875rem; color: var(--sa-muted); }

/* The international share, as a rule rather than another number. */
.sa-apc__i { margin: .55rem 0 0; display: grid; gap: .3rem; }
.sa-apc__i i {
	display: block; height: 4px; border-radius: var(--r-pill);
	background: var(--sa-gold); min-width: 3px;
	box-shadow: inset 0 0 0 99px var(--sa-gold);
}
.sa-apc__i::before {
	content: ""; grid-row: 1; grid-column: 1;
	height: 4px; border-radius: var(--r-pill); background: var(--sa-rule);
}
.sa-apc__i i { grid-row: 1; grid-column: 1; }
.sa-apc__i span { font-size: .6875rem; color: var(--sa-muted); }
.sa-apc__i.is-none i { background: var(--sa-rule); width: 100%; }
.sa-apc__i.is-none span { font-style: italic; }

/* ------------------------------------------- the compact airport strip --- */

/* The cells were not filling their rows, so the grid's own background showed
   through as grey bands wherever one card wrapped to a second line. */
.sa-apnav > li { display: flex; min-width: 0; }
.sa-apnav a, .sa-apnav .is-soon { width: 100%; height: 100%; align-content: center; }

/* ============================================ the airport page banner === */

.sa-aphero {
	position: relative; isolation: isolate;
	border-radius: var(--r-md); overflow: clip;
	margin: 0 0 1.8rem;
}

.sa-aphero--photo { aspect-ratio: 21/9; display: grid; align-items: end; }
.sa-aphero--photo img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.sa-aphero__scrim {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgb(var(--sa-night) / .9) 0%, rgb(var(--sa-night) / .55) 38%, rgb(var(--sa-night) / .05) 78%);
}
.sa-aphero__in { position: relative; z-index: 2; padding: 1.2rem 1.4rem 1.3rem; color: #fff; }

/* No photograph of this airport: the board, with its own figures on it. */
.sa-aphero--board {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
	gap: 1.6rem; padding: 1.6rem 1.6rem 1.7rem;
	background: radial-gradient(120% 140% at 18% 0%, #11473A 0%, #0A3A2E 52%, #071C16 100%);
	color: #fff;
}
.sa-aphero--board::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.sa-aphero__big {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.8rem, 8vw, 4.5rem); font-weight: 700;
	letter-spacing: .1em; line-height: 1; color: var(--sa-amber);
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 96;
	text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.sa-aphero__meta { display: grid; gap: .25rem; min-width: 0; }
.sa-aphero__c {
	margin: 0 0 .3rem; display: flex; align-items: baseline; gap: .55rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem; font-weight: 700; letter-spacing: .07em; color: var(--sa-amber);
}
.sa-aphero__c i { font-style: normal; font-size: .6875rem; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.sa-aphero__n {
	margin: 0; font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.0625rem, 2vw, 1.375rem); font-weight: 600; line-height: 1.2;
	letter-spacing: -.02em; color: #fff;
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32;
}
.sa-aphero__w { margin: 0; font-size: .8125rem; color: rgba(255,255,255,.66); }
.sa-aphero__p { margin: .5rem 0 0; font-size: .8125rem; color: rgba(255,255,255,.72); }
.sa-aphero__p b {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
@media (max-width: 560px) {
	.sa-aphero--board { grid-template-columns: 1fr; gap: .9rem; text-align: left; }
	.sa-aphero--photo { aspect-ratio: 16/10; }
}

/* ------------------------------------------------------------------ *
 * The guide: illustrated cards and subject banners
 *
 * Declared only in the range where they apply. A base value here that a
 * later media query has to undo is the ordering trap that cost three
 * separate bugs: a media query carries no specificity, so at equal
 * specificity the last rule in the file wins whatever its condition.
 * ------------------------------------------------------------------ */

.sa-ghero {
	position: relative; margin: 0 0 2rem; overflow: hidden;
	border-radius: var(--r-lg); background: var(--sa-green-dk);
	aspect-ratio: 21/9; display: grid; align-items: end; isolation: isolate;
}
.sa-ghero--hub { aspect-ratio: 24/9; }
.sa-ghero img {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; object-fit: cover;
}
.sa-ghero__scrim {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(104deg, rgba(10,58,46,.90) 0%, rgba(10,58,46,.66) 46%, rgba(10,58,46,.10) 100%);
}
.sa-ghero__in { position: relative; z-index: 2; padding: 1.4rem 1.6rem 1.5rem; color: #fff; max-width: 42rem; }
.sa-ghero__e {
	margin: 0 0 .4rem; font-size: .6875rem; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; color: var(--sa-amber);
}
.sa-ghero__t {
	margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 600; line-height: 1.12;
	font-size: clamp(1.4rem, 1rem + 1.7vw, 2.4rem); color: #fff; text-wrap: balance;
}

.sa-gcards {
	list-style: none; margin: 2rem 0; padding: 0;
	display: grid; gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.sa-gcard { min-width: 0; margin: 0; }
.sa-gcard a {
	display: grid; grid-template-rows: auto 1fr; height: 100%;
	text-decoration: none; color: inherit; overflow: hidden;
	border: 1px solid var(--sa-rule); border-radius: var(--r-md);
	background: #fff; box-shadow: var(--e-1);
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.sa-gcard a:hover, .sa-gcard a:focus-visible {
	box-shadow: var(--e-2); transform: translateY(-2px); border-color: var(--sa-green);
}
.sa-gcard__m {
	position: relative; display: block; aspect-ratio: 16/9;
	background: var(--sa-green-dk); overflow: hidden;
}
.sa-gcard__m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-gcard__ph {
	display: grid; place-items: center; width: 100%; height: 100%; color: var(--sa-amber);
}
.sa-gcard__no {
	position: absolute; left: .6rem; bottom: .6rem; z-index: 2;
	font-style: normal; font-variant-numeric: tabular-nums;
	font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
	color: var(--sa-amber); background: rgba(10,58,46,.82);
	padding: .18rem .45rem; border-radius: var(--r-xs);
}
.sa-gcard__b { display: grid; align-content: start; gap: .4rem; padding: 1rem 1.1rem 1.15rem; }
.sa-gcard__ico { color: var(--sa-green); display: block; }
.sa-gcard__t {
	display: block; font-family: var(--wp--preset--font-family--display); font-weight: 600;
	font-size: 1.0625rem; line-height: 1.25; color: var(--sa-ink);
}
.sa-gcard__x { display: block; font-size: .875rem; line-height: 1.5; color: var(--sa-muted); }
.sa-gcard__go {
	display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem;
	font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--sa-green);
}
.sa-gcard a:hover .sa-gcard__go { gap: .5rem; }

body.sa-hubpage .sa-gcards,
body.sa-hubpage .sa-ghero { max-width: none; }

@media (max-width: 760px) {
	.sa-ghero, .sa-ghero--hub { aspect-ratio: 16/10; }
	.sa-ghero__in { padding: 1.1rem 1.1rem 1.2rem; }
	.sa-gcards { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
}

/* Below about 420px the 14rem track floor (224px) is wider than the column the
 * page can give it, so every card spilled 5px. A single explicit column cannot
 * have a floor wider than its container. */
@media (max-width: 420px) {
	.sa-gcards { grid-template-columns: 1fr; }
}

/* The posts-page intro is rendered by sa/postshead rather than by core's
 * post-content block, so WordPress emits no block-gap rule for it and every
 * paragraph came out with a zero margin. Give it its own rhythm. */
.sa-prose-wrap .sa-postsintro > * { margin-block: 0 1.1rem; }
.sa-prose-wrap .sa-postsintro > *:last-child { margin-bottom: 0; }
.sa-postsintro { margin-bottom: 2.4rem; }