/* ==========================================================================
   Art direction: the cover, the code ticker, the airport mosaic, the
   photographic bands and the destination mosaic. Loaded last.
   ========================================================================== */

:root {
	--sa-night: 6 24 19;          /* the scrim colour, as an RGB triple */
	--sa-amber: #F2B749;          /* the colour an airport board actually is */
}

/* ========================================================== the cover === */

.sa-cover {
	position: relative;
	isolation: isolate;
	min-height: min(92vh, 54rem);
	display: grid;
	align-items: end;
	overflow: clip;
	background: #071C16;
}

.sa-cover__bg {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 56%;
}

/* Two washes, not one. The first is lateral so the photograph survives on
   the right; the second lifts the bottom edge so the board sits on something.
   A single flat overlay is what makes most hero images look like wallpaper. */
.sa-cover__scrim {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(104deg,
			rgb(var(--sa-night) / .94) 0%,
			rgb(var(--sa-night) / .88) 22%,
			rgb(var(--sa-night) / .62) 44%,
			rgb(var(--sa-night) / .26) 66%,
			rgb(var(--sa-night) / .06) 88%),
		linear-gradient(to top, rgb(var(--sa-night) / .78) 0%, rgb(var(--sa-night) / .18) 34%, transparent 62%);
}

/* Grain over the whole cover. It is the cheapest way to stop a large
   photographic fill reading as a stock image dropped behind text. */
.sa-cover__grain {
	position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}

.sa-cover__in {
	position: relative; z-index: 3;
	width: 100%; max-width: 76rem; margin-inline: auto;
	padding: clamp(5rem, 11vw, 8rem) 1.25rem clamp(2.5rem, 4vw, 3.5rem);
	display: grid; gap: clamp(2rem, 4vw, 3.5rem);
	color: #fff;
}
@media (min-width: 1040px) {
	.sa-cover__in { grid-template-columns: minmax(0, 1fr) 23rem; align-items: end; }
}

.sa-cover__kicker {
	display: flex; align-items: center; gap: .7rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
	color: #EFDCB6; margin: 0 0 1.4rem;
}
.sa-cover__kicker span { width: 1.9rem; height: 2px; background: var(--sa-amber); flex: 0 0 auto; }

.sa-cover h1 {
	color: #fff; margin: 0 0 1.2rem;
	font-size: clamp(2.6rem, 6.6vw, 5.25rem);
	line-height: .98; letter-spacing: -.038em;
	text-wrap: balance;
	text-shadow: 0 2px 40px rgb(var(--sa-night) / .5);
}
.sa-cover h1 em {
	font-style: normal; color: var(--sa-amber);
	font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 140;
}
/* The three lines are set deliberately on a wide screen and left to the
   browser on a narrow one. Spans rather than <br>, because hiding a <br>
   removes the line break AND the word space with it, and the words run
   together. The whitespace between the spans survives. */
.sa-cover h1 span { display: block; }
@media (max-width: 680px) { .sa-cover h1 span { display: inline; } }

.sa-cover__lead {
	color: rgba(255,255,255,.86);
	font-size: clamp(1.0625rem, 1.55vw, 1.1875rem);
	line-height: 1.62; max-width: 46ch; margin: 0 0 2.1rem;
	text-shadow: 0 1px 18px rgb(var(--sa-night) / .55);
}

.sa-cover__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sa-cover .sa-btn--ghost {
	color: #fff; border-color: rgba(255,255,255,.4);
	background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
}
.sa-cover .sa-btn--ghost:hover { background: rgba(255,255,255,.17); border-color: #fff; color: #fff; }

/* ---------------------------------------------- the board on the cover --- */

/* A flight information display, because that is what this site is about.
   Amber on near-black, codes in the display face, figures tabular and
   right-aligned the way a real board sets them. */
.sa-fids {
	background: rgb(var(--sa-night) / .72);
	backdrop-filter: blur(14px) saturate(1.2);
	border: 1px solid rgba(242,183,73,.26);
	border-radius: 4px;
	padding: 1.05rem 1.15rem 1rem;
	box-shadow: 0 30px 60px -36px rgb(var(--sa-night) / .9);
}
.sa-fids__hd {
	display: flex; align-items: center; gap: .55rem;
	margin: 0 0 .85rem; padding-bottom: .7rem;
	border-bottom: 1px solid rgba(242,183,73,.2);
	font-size: .625rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
	color: rgba(242,183,73,.85);
}
.sa-fids__dot {
	width: .45rem; height: .45rem; border-radius: 50%; background: var(--sa-amber);
	box-shadow: 0 0 0 3px rgba(242,183,73,.22);
}
@media (prefers-reduced-motion: no-preference) {
	.sa-fids__dot { animation: sa-pulse 2.6s ease-in-out infinite; }
	@keyframes sa-pulse { 50% { box-shadow: 0 0 0 6px rgba(242,183,73,0); } }
}
.sa-fids ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.sa-fids li {
	display: grid;
	grid-template-columns: 3.4rem minmax(0, 1fr) auto;
	grid-template-areas: "code name pax" "code city int";
	gap: 0 .7rem;
	padding: .55rem 0;
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.sa-fids li:last-child { border-bottom: 0; }
.sa-fids__code {
	grid-area: code; align-self: center;
	/* A three-letter code must never break: "CPT" over two lines is wrong
	   on a board and wrong here. */
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem; font-weight: 700; letter-spacing: .02em;
	color: var(--sa-amber);
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 30;
}
.sa-fids__name { grid-area: name; font-size: .8125rem; color: #fff; font-weight: 600; }
.sa-fids__city { grid-area: city; font-size: .6875rem; color: rgba(255,255,255,.52); }
.sa-fids__pax {
	grid-area: pax; text-align: right; font-size: .875rem; font-weight: 700;
	color: #fff; font-variant-numeric: tabular-nums;
}
.sa-fids__int { grid-area: int; text-align: right; font-size: .6875rem; color: rgba(242,183,73,.7); }
.sa-fids__ft {
	margin: .8rem 0 0; padding-top: .7rem;
	border-top: 1px solid rgba(255,255,255,.08);
	font-size: .625rem; color: rgba(255,255,255,.46);
}
.sa-fids__ft a { color: rgba(242,183,73,.8); }

.sa-credit--cover { bottom: .55rem; right: 1rem; }
@media (max-width: 1039px) { .sa-credit--cover { position: static; text-align: left; padding: 0 1.25rem 1.1rem; max-width: none; } }

/* ========================================================= the ticker === */

.sa-tick {
	background: var(--sa-green-dk);
	border-block: 1px solid rgba(242,183,73,.18);
	overflow: hidden;
	padding-block: .62rem;
	--sa-tick-dur: 64s;
}
.sa-tick__track { display: flex; width: max-content; }
.sa-tick__run { display: flex; flex: 0 0 auto; }
.sa-tick__i {
	display: inline-flex; align-items: baseline; gap: .45rem;
	padding-inline: 1.1rem;
	font-size: .75rem; letter-spacing: .04em;
	color: rgba(216,228,219,.5);
	white-space: nowrap;
	border-right: 1px solid rgba(255,255,255,.08);
}
.sa-tick__i b {
	font-family: var(--wp--preset--font-family--display);
	font-size: .9375rem; font-weight: 700; letter-spacing: .06em;
	color: var(--sa-amber);
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24;
}
@media (prefers-reduced-motion: no-preference) {
	.sa-tick__track { animation: sa-roll var(--sa-tick-dur) linear infinite; }
	.sa-tick:hover .sa-tick__track { animation-play-state: paused; }
	@keyframes sa-roll { to { transform: translateX(-50%); } }
}
/* Without motion the strip is still a readable, scrollable index. */
@media (prefers-reduced-motion: reduce) {
	.sa-tick { overflow-x: auto; }
	.sa-tick__track { width: auto; }
	.sa-tick__run:last-child { display: none; }
}

/* ================================================= the airport mosaic === */

.sa-mosaic { display: grid; gap: 1.1rem; }
@media (min-width: 980px) {
	.sa-mosaic { grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; }
	.sa-mo--lead { grid-row: span 2; }
}

.sa-mo {
	position: relative; isolation: isolate;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 19rem;
	border-radius: 5px; overflow: clip;
	background: var(--sa-green-dk);
	color: #fff;
}
.sa-mo--lead { min-height: 30rem; }

.sa-mo__media { position: absolute; inset: 0; z-index: 0; }
.sa-mo__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .8s var(--sa-ease);
}
.sa-mo:hover .sa-mo__media img { transform: scale(1.045); }
.sa-mo::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top,
		rgb(var(--sa-night) / .96) 0%, rgb(var(--sa-night) / .9) 26%,
		rgb(var(--sa-night) / .55) 56%, rgb(var(--sa-night) / .1) 88%);
}
.sa-mo__body { position: relative; z-index: 2; padding: 1.35rem 1.45rem 1.5rem; }

/* The two smaller panels are half the height of the lead one, so the same
   wash would bury the photograph entirely. They get a shallower one and a
   shorter line length. */
.sa-mo--sub::after {
	background: linear-gradient(to top,
		rgb(var(--sa-night) / .94) 0%, rgb(var(--sa-night) / .82) 38%,
		rgb(var(--sa-night) / .4) 68%, rgb(var(--sa-night) / .06) 94%);
}
.sa-mo--sub .sa-mo__text { font-size: .875rem; max-width: 40ch; }
@media (min-width: 980px) and (max-width: 1180px) { .sa-mo--sub .sa-mo__text { display: none; } }

.sa-mo__tag {
	display: flex; align-items: center; gap: .6rem; margin: 0 0 .55rem;
	font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: rgba(255,255,255,.62);
}
.sa-mo__tag b {
	font-family: var(--wp--preset--font-family--display);
	font-size: .8125rem; letter-spacing: .08em; color: var(--sa-amber);
	border: 1px solid rgba(242,183,73,.4); border-radius: 2px;
	padding: .12rem .38rem;
}
.sa-mo__h {
	margin: 0 0 .25rem; color: #fff;
	font-size: clamp(1.3rem, 2.3vw, 1.75rem); font-weight: 600;
	line-height: 1.14; letter-spacing: -.026em;
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
	text-shadow: 0 1px 14px rgb(var(--sa-night) / .6);
}
.sa-mo--lead .sa-mo__h { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.sa-mo__h a { color: inherit; text-decoration: none; }
.sa-mo__h a::before { content: ""; position: absolute; inset: 0; z-index: 3; }
.sa-mo__h a:hover { color: var(--sa-amber); }
.sa-mo__where { margin: 0 0 .6rem; font-size: .78125rem; color: rgba(255,255,255,.58); }
.sa-mo__text { margin: 0; font-size: .90625rem; line-height: 1.58; color: rgba(255,255,255,.8); max-width: 46ch; }

.sa-mo__mini { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: .95rem; }
.sa-mo__mini > div {
	display: flex; align-items: baseline; gap: .4rem;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 2px; padding: .26rem .5rem;
	font-size: .6875rem; color: rgba(255,255,255,.66);
}
.sa-mo__mini b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

.sa-mo__pax {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	margin: 1rem 0 0; padding-top: .8rem;
	border-top: 1px solid rgba(255,255,255,.14);
	font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
	color: rgba(255,255,255,.5);
}
.sa-mo__pax b {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem; letter-spacing: -.024em; color: var(--sa-amber);
	font-variant-numeric: tabular-nums; text-transform: none;
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 36;
}
.sa-mo--lead .sa-mo__pax b { font-size: 1.75rem; }

/* ============================================== full-bleed photo band === */

.sa-pband {
	position: relative; isolation: isolate;
	min-height: clamp(20rem, 46vh, 30rem);
	display: grid; align-items: center;
	overflow: clip; background: var(--sa-green-dk);
}
.sa-pband__bg {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; object-fit: cover; object-position: center 50%;
}
.sa-pband__scrim {
	position: absolute; inset: 0; z-index: 1;
	background:
		radial-gradient(130% 90% at 18% 50%, rgb(var(--sa-night) / .9) 0%, rgb(var(--sa-night) / .55) 46%, rgb(var(--sa-night) / .16) 78%),
		linear-gradient(to top, rgb(var(--sa-night) / .5), transparent 55%);
}
.sa-pband__in {
	position: relative; z-index: 2;
	max-width: 76rem; width: 100%; margin-inline: auto;
	padding: clamp(3rem, 7vw, 5rem) 1.25rem;
}
.sa-pband__q {
	margin: 0; max-width: 24ch; color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 3.6vw, 2.75rem);
	font-weight: 500; line-height: 1.14; letter-spacing: -.03em;
	text-shadow: 0 2px 30px rgb(var(--sa-night) / .6);
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 72;
}
.sa-pband__q b { color: var(--sa-amber); font-weight: 700; }
.sa-pband__c {
	margin: 1.1rem 0 0; max-width: 42ch;
	font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.7);
}
.sa-credit--band { bottom: .6rem; right: 1rem; }

/* ============================================ the destination mosaic === */

.sa-dg {
	display: grid; gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
@media (min-width: 900px) {
	.sa-dg { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 14rem; }
	.sa-dt--big  { grid-column: span 3; grid-row: span 2; }
	.sa-dt--wide { grid-column: span 3; grid-row: span 1; }
	.sa-dt--std  { grid-column: span 2; grid-row: span 1; }
}

.sa-dt {
	position: relative; isolation: isolate;
	display: flex; flex-direction: column; justify-content: flex-end;
	border-radius: 4px; overflow: clip;
	background: var(--sa-green-dk); color: #fff;
}

/* A minimum height belongs only to the stacked, auto-flowing layout below
   900px. Inside the explicit grid the row tracks decide the height: a tile
   taller than its track overflows it and swallows the row gap, which is why
   the rows were touching. Declaring it this way means source order can no
   longer undo the rule. */
@media (max-width: 899px) { .sa-dt { min-height: 15rem; } }
.sa-dt img {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .8s var(--sa-ease);
}
.sa-dt::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top,
		rgb(var(--sa-night) / .95) 0%, rgb(var(--sa-night) / .86) 22%,
		rgb(var(--sa-night) / .5) 54%, rgb(var(--sa-night) / .1) 86%);
	transition: opacity .4s var(--sa-ease);
}
.sa-dt:hover img { transform: scale(1.055); }
.sa-dt__in { position: relative; z-index: 2; padding: 1.1rem 1.2rem 1.25rem; }

.sa-dt__e {
	margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem;
	font-size: .5875rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
	color: var(--sa-amber); text-shadow: 0 1px 8px rgb(var(--sa-night) / .9);
}
.sa-dt__e::after { content: ""; flex: 1; height: 1px; background: rgba(242,183,73,.3); }
.sa-dt__t {
	margin: 0 0 .35rem; color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); font-weight: 600;
	line-height: 1.16; letter-spacing: -.022em;
	text-shadow: 0 1px 12px rgb(var(--sa-night) / .75);
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32;
}
.sa-dt--big .sa-dt__t { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.sa-dt__x { margin: 0; font-size: .84375rem; line-height: 1.5; color: rgba(255,255,255,.76); max-width: 48ch; }
/* On the smallest tiles the paragraph would crowd the title out. */
.sa-dt--std .sa-dt__x { display: none; }
@media (max-width: 899px) { .sa-dt--std .sa-dt__x { display: block; } }
.sa-dt__m { margin: .7rem 0 0; font-size: .6875rem; color: rgba(255,255,255,.55); }
.sa-dt__m b { color: var(--sa-amber); font-weight: 700; letter-spacing: .04em; }

/* ====================================== photographs inside the guide === */

.sa-g__img { margin: 0; grid-column: 1 / -1; }
@media (min-width: 1000px) { .sa-g__img { grid-column: 3; grid-row: 1 / span 2; align-self: start; } }
.sa-g__img img { width: 100%; display: block; border-radius: 4px; aspect-ratio: 4/3; object-fit: cover; }
.sa-g__img figcaption { margin-top: .45rem; font-size: .6875rem; line-height: 1.45; color: var(--sa-muted); }
/* When a subject carries a photograph, the picture and the facts share the
   right-hand column — stacked, not on top of each other. Giving both the
   same named area puts them in the SAME cell, which is exactly how they
   ended up printed over one another. The column gets its own two rows. */
@media (min-width: 1000px) {
	.sa-g:has(.sa-g__img) {
		grid-template-areas:
			"rail head aside"
			"rail body aside";
	}
	.sa-g:has(.sa-g__img) .sa-g__aside { grid-area: aside; align-self: start; }
	.sa-g:has(.sa-g__img) .sa-g__img { margin-bottom: .9rem; }
	.sa-g:has(.sa-g__img) .sa-g__facts { margin-top: 0; }
}

/* ============================================== entrance on first view === */

/* Native scroll-driven animation. No library, no observer, and browsers that
   do not support it simply show the content, which is the correct fallback. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.sa-mo, .sa-dt, .sa-answer, .sa-qa__i, .sa-chart__row, .sa-trust > li, .sa-g {
			animation: sa-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}
		@keyframes sa-rise {
			from { opacity: 0; transform: translateY(18px); }
			to   { opacity: 1; transform: none; }
		}
		/* The bars grow out of the axis as the chart comes into view. */
		.sa-chart__bar {
			animation: sa-grow linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 30%;
			transform-origin: left center;
		}
		@keyframes sa-grow { from { transform: scaleX(.02); } to { transform: none; } }
	}
}

/* ========================================================== fine print === */

/* The cover's H1 is the largest type on the site; on a short phone screen the
   board would otherwise push the buttons below the fold. */
@media (max-width: 520px) {
	.sa-cover { min-height: auto; }
	.sa-cover__in { padding-top: 4.5rem; }
	.sa-fids li { grid-template-columns: 3.2rem minmax(0, 1fr) auto; }
}

/* ------------------------------------------------- feature and figures --- */

.sa-feature__src { font-size: .8125rem; color: var(--sa-muted); }
.sa-feature__media img { border-radius: 4px; }

.sa-pic { margin: 0; }
.sa-pic__m { position: relative; border-radius: 4px; overflow: clip; }
.sa-pic__m img { display: block; width: 100%; }
/* A label sitting on a photograph cannot rely on the photograph being dark
   there. It carries its own background instead of a text-shadow and a hope. */
.sa-pic__tag {
	position: absolute; left: .8rem; bottom: .8rem; margin: 0; z-index: 2;
	color: #fff; font-size: .625rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	background: rgb(var(--sa-night) / .78);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border-radius: 9999px; padding: .3rem .72rem;
}
.sa-qa-aside .sa-figcredit { margin-top: 1rem; }