/* ==========================================================================
   The editorial UI layer: jump nav, quick-answer grid, practical guide,
   month chart, question set and trust strip. Loaded after photo.css.
   ========================================================================== */

:root {
	/* Height of the sticky masthead, measured on the served page. The jump
	   nav sticks directly beneath it and anchors offset by both. */
	--sa-head-h: 3.9rem;
	--sa-nav-h: 3.1rem;
}

/* Anchors land below both sticky bars instead of under them. */
html { scroll-padding-top: calc(var(--sa-head-h) + var(--sa-nav-h) + 1rem); }

/* ---------------------------------------------------------------- icons --- */

.sa-i { display: block; flex: 0 0 auto; }

/* ------------------------------------------------------------- jump nav --- */

/* Sticky under the masthead. It is a reading aid on a long page, and it is
   also how a reader discovers that the page goes further than the fold. */
.sa-quicknav {
	position: sticky; top: var(--sa-head-h, 3.9rem); z-index: 20;
	background: color-mix(in srgb, var(--sa-paper) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-block: 1px solid var(--sa-rule);
}
.sa-quicknav__in {
	max-width: 76rem; margin-inline: auto; padding: 0 1.25rem;
	display: flex; align-items: center; gap: 1.25rem;
	overflow-x: auto; scrollbar-width: none;
}
.sa-quicknav__in::-webkit-scrollbar { display: none; }
.sa-quicknav__label {
	flex: 0 0 auto; padding-block: .8rem;
	font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--sa-muted);
}
.sa-quicknav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.sa-quicknav li { flex: 0 0 auto; }
.sa-quicknav a {
	display: block; padding: .85rem .7rem;
	font-size: .8125rem; font-weight: 500; white-space: nowrap;
	color: var(--sa-muted); text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .2s var(--sa-ease), border-color .2s var(--sa-ease);
}
.sa-quicknav a:hover { color: var(--sa-ink); border-bottom-color: var(--sa-gold); }
@media (max-width: 760px) { .sa-quicknav__label { display: none; } }

/* --------------------------------------------------------- quick answers --- */

.sa-answers {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
	background: var(--sa-rule);
	border: 1px solid var(--sa-rule);
	border-radius: 4px; overflow: clip;
}
.sa-answer { background: var(--sa-surface); }
.sa-answer > a {
	display: grid;
	grid-template-columns: 2.6rem 1fr auto;
	grid-template-areas: "ico t go" ". x x";
	gap: .2rem .9rem;
	padding: 1.15rem 1.15rem 1.25rem;
	height: 100%;
	text-decoration: none;
	transition: background .22s var(--sa-ease);
}
.sa-answer > a:hover { background: var(--sa-gold-lt); }

.sa-answer__ico {
	grid-area: ico;
	width: 2.6rem; height: 2.6rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--sa-tint); color: var(--sa-green);
	transition: background .22s var(--sa-ease), color .22s var(--sa-ease), transform .3s var(--sa-ease);
}
.sa-answer > a:hover .sa-answer__ico {
	background: var(--sa-green); color: #fff; transform: translateY(-2px);
}
.sa-answer__t {
	grid-area: t; align-self: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.03125rem; font-weight: 600; letter-spacing: -.016em; line-height: 1.2;
	color: var(--sa-ink);
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24;
}
.sa-answer__x {
	grid-area: x;
	font-size: .84375rem; line-height: 1.5; color: var(--sa-muted);
	margin-top: .35rem;
}
.sa-answer__go {
	grid-area: go; align-self: center;
	color: var(--sa-rule);
	transition: color .22s var(--sa-ease);
}
.sa-answer > a:hover .sa-answer__go { color: var(--sa-gold); }

/* ------------------------------------------------------- practical guide --- */

.sa-guide { display: grid; gap: 0; }

/* A left rail carries the number, the icon and the subject label; the body
   keeps a readable measure; the facts sit in their own column on wide
   screens. Three columns of different jobs, not three equal thirds. */
.sa-g {
	display: grid;
	gap: 1.4rem 2.5rem;
	padding-block: clamp(2rem, 3.6vw, 2.9rem);
	border-top: 1px solid var(--sa-rule);
	scroll-margin-top: 8rem;
}
.sa-g:first-child { border-top: 0; }

@media (min-width: 1000px) {
	.sa-g { grid-template-columns: 13rem minmax(0, 1fr) 15rem; }
	.sa-g__head { grid-column: 1; }
	.sa-g__body { grid-column: 2; }
	.sa-g__facts { grid-column: 3; }
}

.sa-g__head { display: grid; gap: .5rem; align-content: start; justify-items: start; }
.sa-g__ico {
	width: 3rem; height: 3rem;
	display: grid; place-items: center;
	border: 1px solid var(--sa-rule); border-radius: 50%;
	background: var(--sa-surface); color: var(--sa-green);
}
.sa-g__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
	color: var(--sa-gold); font-variant-numeric: tabular-nums;
}
.sa-g__label {
	font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--sa-muted);
}
.sa-g__h {
	font-size: clamp(1.1875rem, 1.9vw, 1.4375rem);
	line-height: 1.2; letter-spacing: -.022em; margin: .1rem 0 0;
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32;
}
@media (min-width: 1000px) {
	/* On a wide screen the subject heading belongs over the prose it heads,
	   not squeezed into the narrow rail. */
	.sa-g { grid-template-areas: "rail head facts" "rail body facts"; align-items: start; }
	.sa-g__head { grid-area: rail; }
	.sa-g__h { grid-area: head; margin-bottom: .9rem; max-width: 30ch; }
	.sa-g__body { grid-area: body; }
	.sa-g__facts { grid-area: facts; }
}

.sa-g__body > p { margin: 0 0 .9rem; line-height: 1.74; max-width: 62ch; }
.sa-g__body > p:last-child { margin-bottom: 0; }

.sa-g__note {
	display: flex; gap: .7rem; align-items: flex-start;
	background: var(--sa-gold-lt);
	border-left: 3px solid var(--sa-gold);
	border-radius: 0 3px 3px 0;
	padding: .9rem 1.05rem;
	font-size: .90625rem; line-height: 1.62;
	color: var(--sa-ink);
	margin-top: 1.1rem !important;
}
.sa-g__notei { color: var(--sa-gold); margin-top: .12rem; }

.sa-g__facts {
	margin: 0;
	border-top: 2px solid var(--sa-green);
	align-self: start;
}
.sa-g__facts > div {
	display: flex; justify-content: space-between; align-items: baseline; gap: .9rem;
	padding: .6rem 0; border-bottom: 1px solid var(--sa-rule);
}
.sa-g__facts dt { font-size: .8125rem; color: var(--sa-muted); margin: 0; }
.sa-g__facts dd {
	margin: 0; font-size: .875rem; font-weight: 600; text-align: right;
	color: var(--sa-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------------------------------------------------------------- chart --- */

.sa-chart {
	margin: 0;
	/* A figure is not a flex container by default, so `order` on the caption
	   would be ignored and the caption would print above the bars. */
	display: flex; flex-direction: column;
}
.sa-chart__cap {
	order: 2; margin-top: 1.1rem;
	font-size: .8125rem; line-height: 1.5; color: var(--sa-muted);
	max-width: 62ch;
}
.sa-section--dark .sa-chart__cap { color: rgba(216,228,219,.6); }

.sa-chart__legend {
	display: flex; flex-wrap: wrap; gap: 1.1rem;
	margin-bottom: 1.2rem;
	font-size: .75rem; letter-spacing: .02em; color: rgba(216,228,219,.72);
}
.sa-chart__key { display: flex; align-items: center; gap: .45rem; }
.sa-chart__key::before {
	content: ""; width: .85rem; height: .85rem; border-radius: 2px; flex: 0 0 auto;
}
.sa-chart__key--dom::before  { background: var(--sa-gold); }
.sa-chart__key--intl::before { background: #F0DFBE; }
.sa-chart__key--avg::before  { width: 2px; height: 1rem; border-radius: 0; background: rgba(255,255,255,.55); }

.sa-chart__rows { position: relative; display: grid; gap: .3rem; }

/* The average is one dashed rule across the whole plot rather than a number
   in the caption: the comparison every reader wants to make, made visible. */
.sa-chart__rows::after {
	content: ""; position: absolute; top: 0; bottom: 1.6rem;
	left: calc(7.5rem + (100% - 7.5rem - 9.5rem) * var(--sa-avg) / 100%);
	border-left: 1px dashed rgba(255,255,255,.4);
	pointer-events: none;
}
@media (max-width: 760px) { .sa-chart__rows::after { display: none; } }

.sa-chart__row {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr) 5.5rem 4rem;
	align-items: center; gap: .9rem;
	padding-block: .18rem;
}
.sa-chart__m { font-size: .84375rem; color: rgba(216,228,219,.86); }
.sa-chart__track {
	height: 1.5rem; border-radius: 2px;
	background: rgba(255,255,255,.07);
	overflow: hidden;
}
.sa-chart__bar {
	display: block; height: 100%;
	background: var(--sa-gold);
	border-radius: 2px;
	position: relative;
	transition: filter .2s var(--sa-ease);
}
.sa-chart__intl {
	position: absolute; right: 0; top: 0; bottom: 0;
	background: #F0DFBE;
}
.sa-chart__row.is-peak .sa-chart__m { color: #fff; font-weight: 600; }
.sa-chart__row.is-peak .sa-chart__v { color: #fff; font-weight: 700; }
.sa-chart__row:hover .sa-chart__bar { filter: brightness(1.12); }

.sa-chart__v {
	font-size: .875rem; text-align: right;
	font-variant-numeric: tabular-nums;
	color: rgba(216,228,219,.92);
}
.sa-chart__d {
	font-size: .78125rem; text-align: right;
	font-variant-numeric: tabular-nums;
	color: rgba(216,228,219,.52);
}

@media (max-width: 760px) {
	.sa-chart__row { grid-template-columns: 5.2rem minmax(0, 1fr) 4.6rem; gap: .6rem; }
	.sa-chart__d { display: none; }
	.sa-chart__m { font-size: .75rem; }
	.sa-chart__v { font-size: .78125rem; }
}

/* A light-background variant, in case the chart is ever used off the dark
   section it was designed for. */
.sa-section:not(.sa-section--dark) .sa-chart__legend { color: var(--sa-muted); }
.sa-section:not(.sa-section--dark) .sa-chart__track { background: var(--sa-tint); }
.sa-section:not(.sa-section--dark) .sa-chart__bar { background: var(--sa-green); }
.sa-section:not(.sa-section--dark) .sa-chart__intl { background: var(--sa-gold); }
.sa-section:not(.sa-section--dark) .sa-chart__m,
.sa-section:not(.sa-section--dark) .sa-chart__v { color: var(--sa-ink); }
.sa-section:not(.sa-section--dark) .sa-chart__rows::after { border-left-color: rgba(20,33,31,.35); }

/* ------------------------------------------------------- the questions --- */

.sa-qa-wrap { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
@media (min-width: 1000px) {
	.sa-qa-wrap { grid-template-columns: 20rem minmax(0, 1fr); align-items: start; }
	.sa-qa-aside { position: sticky; top: 9rem; }
}

.sa-qa-aside__media {
	position: relative; border-radius: 4px; overflow: clip;
	margin-bottom: 1.4rem;
}
.sa-qa-aside__media img {
	display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
}
/* A photograph used as a panel, not as decoration: the label sits on it. */
.sa-qa-aside__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(7,28,22,.78) 0%, rgba(7,28,22,.1) 62%, transparent 100%);
}
.sa-qa-aside__tag {
	position: absolute; left: 1rem; bottom: .9rem; z-index: 2;
	color: #fff; font-size: .6875rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	display: flex; align-items: center; gap: .5rem;
}
.sa-qa-aside__tag::before { content: ""; width: 1.4rem; height: 2px; background: var(--sa-gold); }

.sa-qa-aside h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin: 0 0 .7rem; letter-spacing: -.026em; }
.sa-qa-aside p { color: var(--sa-muted); font-size: .9375rem; line-height: 1.68; margin: 0 0 1.1rem; }

.sa-qa { display: grid; gap: .6rem; counter-reset: qa; }

.sa-qa__i {
	counter-increment: qa;
	background: var(--sa-surface);
	border: 1px solid var(--sa-rule);
	border-radius: 5px;
	transition: border-color .22s var(--sa-ease), box-shadow .22s var(--sa-ease), background .22s var(--sa-ease);
	overflow: hidden;
}
.sa-qa__i:hover { border-color: color-mix(in srgb, var(--sa-green) 35%, var(--sa-rule)); }
.sa-qa__i[open] {
	border-color: color-mix(in srgb, var(--sa-green) 45%, var(--sa-rule));
	box-shadow: 0 1px 2px rgba(20,33,31,.04), 0 18px 38px -28px rgba(20,33,31,.5);
}

.sa-qa__i summary {
	list-style: none; cursor: pointer;
	display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1.6rem;
	align-items: center; gap: 1rem;
	padding: 1.05rem 1.25rem;
}
.sa-qa__i summary::-webkit-details-marker { display: none; }
.sa-qa__i summary:focus-visible { outline: 2px solid var(--sa-gold); outline-offset: -2px; }

.sa-qa__ico {
	width: 2.5rem; height: 2.5rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--sa-tint); color: var(--sa-green);
	transition: background .22s var(--sa-ease), color .22s var(--sa-ease);
}
.sa-qa__i[open] .sa-qa__ico { background: var(--sa-green); color: #fff; }

.sa-qa__q {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 1.5vw, 1.0625rem); font-weight: 600;
	line-height: 1.32; letter-spacing: -.016em; color: var(--sa-ink);
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24;
}

/* A plus that becomes a minus. Two pseudo-rules rather than a glyph, so it
   lands on the pixel grid at every size and inherits the accent colour. */
.sa-qa__sign { position: relative; width: 1.1rem; height: 1.1rem; justify-self: end; }
.sa-qa__sign::before,
.sa-qa__sign::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	background: var(--sa-gold); border-radius: 1px;
	transition: transform .26s var(--sa-ease), opacity .26s var(--sa-ease);
}
.sa-qa__sign::before { width: 1.1rem; height: 2px; }
.sa-qa__sign::after  { width: 2px; height: 1.1rem; }
.sa-qa__i[open] .sa-qa__sign::after { transform: rotate(90deg); opacity: 0; }

.sa-qa__a {
	padding: 0 1.25rem 1.3rem;
	margin-left: 3.5rem;
	border-top: 1px solid var(--sa-rule);
	padding-top: .95rem;
}
.sa-qa__a p { margin: 0 0 .8rem; font-size: .96875rem; line-height: 1.72; color: var(--sa-muted); max-width: 66ch; }
.sa-qa__a p:last-child { margin-bottom: 0; }
.sa-qa__a strong { color: var(--sa-ink); }
@media (max-width: 620px) {
	.sa-qa__i summary { grid-template-columns: 2.1rem minmax(0, 1fr) 1.2rem; gap: .75rem; padding: .95rem 1rem; }
	.sa-qa__ico { width: 2.1rem; height: 2.1rem; }
	.sa-qa__a { margin-left: 0; padding-inline: 1rem; }
}

/* ----------------------------------------------------------- trust strip --- */

.sa-trust {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1.6rem 2.2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.sa-trust > li { display: grid; gap: .6rem; align-content: start; }
.sa-trust__ico {
	width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
	border: 1px solid rgba(201,138,43,.4); border-radius: 50%;
	color: var(--sa-gold);
}
.sa-trust h3 {
	font-size: 1rem; margin: 0; line-height: 1.26; letter-spacing: -.018em;
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 24;
}
.sa-trust p { margin: 0; font-size: .875rem; line-height: 1.62; }

.sa-trust--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 2rem 2.6rem; }
.sa-trust__n {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem; font-weight: 700; letter-spacing: -.016em;
	color: var(--sa-gold) !important; font-variant-numeric: tabular-nums;
	margin-bottom: .1rem !important;
}

/* ------------------------------------------------------------- texture --- */

/* A very faint grain over the dark bands. It costs nothing, it is the thing
   that stops a large flat fill looking like a flat fill, and it is invisible
   if you look for it directly. */
.sa-section--dark { position: relative; isolation: isolate; }
.sa-section--dark::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	pointer-events: none; opacity: .5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- section rule --- */

/* A numbered section marker. Small, but it is the difference between a page
   that was laid out and a page that was stacked. */
.sa-mark {
	display: flex; align-items: baseline; gap: .9rem;
	font-size: .625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
	color: var(--sa-muted); margin: 0 0 1.4rem;
}
.sa-mark b {
	font-family: var(--wp--preset--font-family--display);
	font-size: .875rem; color: var(--sa-gold); letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}
.sa-mark::after { content: ""; flex: 1; height: 1px; background: var(--sa-rule); }
.sa-section--dark .sa-mark { color: rgba(216,228,219,.6); }
.sa-section--dark .sa-mark::after { background: rgba(255,255,255,.14); }

/* --------------------------------------------------------- stat callout --- */

/* Pulled out of the prose so a long explanation has somewhere for the eye to
   land. Used inside feature bodies. */
.sa-pull {
	margin: 1.5rem 0;
	padding: 1.2rem 0 1.2rem 1.4rem;
	border-left: 3px solid var(--sa-gold);
}
.sa-pull b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700;
	line-height: 1; letter-spacing: -.032em; color: var(--sa-green);
	font-variant-numeric: tabular-nums;
	font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 60;
}
.sa-pull span { display: block; margin-top: .55rem; font-size: .9375rem; line-height: 1.55; color: var(--sa-muted); }
.sa-section--dark .sa-pull b { color: var(--sa-gold); }
.sa-section--dark .sa-pull span { color: rgba(216,228,219,.78); }

/* ------------------------------------------------- table as cards, small --- */

/* A twenty-two row, six column table cannot be read on a phone by scrolling
   it sideways. Below 760px each row becomes a labelled block instead. */
@media (max-width: 760px) {
	.sa-table-cards table, .sa-table-cards tbody, .sa-table-cards tr, .sa-table-cards td { display: block; }
	.sa-table-cards thead { display: none; }
	.sa-table-cards tr {
		border: 1px solid var(--sa-rule); border-radius: 4px;
		background: var(--sa-surface);
		padding: .85rem 1rem; margin-bottom: .6rem;
	}
	.sa-table-cards td { border: 0; padding: .2rem 0; font-size: .875rem; }
	.sa-table-cards td::before {
		content: attr(data-l) " ";
		color: var(--sa-muted); font-size: .75rem;
		text-transform: uppercase; letter-spacing: .08em;
		display: inline-block; min-width: 5.2rem;
	}
	.sa-table-cards td:first-child {
		font-family: var(--wp--preset--font-family--display);
		font-size: 1.125rem; font-weight: 700; color: var(--sa-green);
		margin-bottom: .35rem;
	}
	.sa-table-cards td:first-child::before { display: none; }
	.sa-table-cards { overflow: visible; }
}