/*
 * Sydney Contents
 *
 * An editorial contents register: white ground, 1px ink rules, Gloock for
 * display, Public Sans for everything else, one accent, numbers leading every
 * list. Radius is 0 apart from pills; there are no shadows anywhere.
 *
 * The measurements are the comp's, in the comp's units. Layouts stack to one
 * column below 900px.
 */

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */

:root {
	--syc-ink: #111;
	--syc-paper: #fff;
	--syc-body: #222;
	--syc-muted: #555;
	/*
	 * Two greys, not one: #777 is 4.48:1 on white and 4.1:1 on the tint, which
	 * is under AA for the 11px dates and counts that use it. --syc-meta is the
	 * nearest shade that clears 4.5:1 on both grounds; --syc-faint stays at
	 * the design's #999 and is only ever used on numerals that carry
	 * aria-hidden, where it is decoration repeating a position, not content.
	 */
	--syc-meta: #6e6e6e;
	--syc-faint: #999;

	/*
	 * --syc-accent, --syc-accent-text, --syc-tint and --syc-hero-h are printed
	 * by the theme. The accent is the design's mark blue and is used on rules,
	 * borders, fills, focus rings and the 96px pillar numeral, all of which
	 * need 3:1. Anything small enough to be read as text uses the solved
	 * --syc-accent-text instead. See syc_accent_text() in inc/brand.php.
	 */
	--syc-accent: #0a86d8;
	--syc-accent-text: #0070c1;
	--syc-tint: #faf4e0;
	--syc-hero-h: 520px;

	--syc-rule: 1px solid var(--syc-ink);
	--syc-hair: 1px solid rgb(17 17 17 / 12%);
	--syc-hair-15: 1px solid rgb(17 17 17 / 15%);
	--syc-hair-20: 1px solid rgb(17 17 17 / 20%);

	--syc-display: "Gloock", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--syc-text: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--syc-gutter: 40px;
	--syc-max: 1200px;
	--syc-measure: 680px;
	--syc-sticky-top: 20px;
}

/* ------------------------------------------------------------------ *
 * Reset and base
 * ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--syc-paper);
	color: var(--syc-ink);
	font-family: var(--syc-text);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 120ms ease;
}

a:hover,
a:focus-visible {
	color: var(--syc-accent-text);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

button {
	font: inherit;
	color: inherit;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ol,
ul {
	margin: 0;
}

:focus-visible {
	outline: 2px solid var(--syc-accent);
	outline-offset: 2px;
}

time,
.syc-cell__count,
.syc-row__meta,
.syc-band__date,
.syc-rail__count,
.syc-searchhead__count,
.syc-pill__count {
	font-variant-numeric: tabular-nums;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 14px;
	clip: auto;
	clip-path: none;
	background: var(--syc-ink);
	color: var(--syc-paper);
	font-size: 13px;
}

/* ------------------------------------------------------------------ *
 * Page shell
 * ------------------------------------------------------------------ */

.syc-page {
	max-width: var(--syc-max);
	margin: 0 auto;
}

.syc-eyebrow {
	color: var(--syc-accent-text);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */

.syc-header {
	border-bottom: var(--syc-rule);
}

.syc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px var(--syc-gutter);
}

.syc-lockup {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

/*
 * At the narrowest widths the wordmark yields rather than pushing the menu
 * button past the edge of the screen.
 */
.syc-lockup__word {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.syc-lockup .syc-mark {
	width: 34px;
	height: 24px;
	flex: none;
}

.syc-lockup__word {
	font-family: var(--syc-display);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1;
}

.syc-lockup--footer .syc-mark {
	width: 26px;
	height: 18px;
}

.syc-lockup--footer .syc-lockup__word {
	font-size: 19px;
}

.syc-lockup--custom img {
	width: auto;
	max-height: 30px;
}

.syc-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px;
	min-width: 0;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.syc-nav__link[hidden] {
	display: none;
}

/*
 * When script has had to drop pillars from the nav to keep it on one line,
 * the burger appears on desktop too so the full list is still one tap away.
 */
@media (min-width: 901px) {
	.syc-nav-trimmed .syc-burger {
		display: flex;
	}
}

.syc-nav__link {
	padding-bottom: 2px;
	border-bottom: 1.5px solid transparent;
}

.syc-nav__link.is-current {
	border-bottom-color: var(--syc-accent);
}

.syc-header__end {
	display: flex;
	flex: none;
	align-items: center;
	gap: 16px;
}

.syc-header__search {
	color: var(--syc-accent-text);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.syc-burger {
	display: none;
	width: 44px;
	height: 44px;
	margin: -10px -8px -10px 0;
	padding: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: none;
	border: 0;
	cursor: pointer;
}

.syc-burger__line {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--syc-ink);
}

/* Mobile sheet ------------------------------------------------------ */

.syc-sheet {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--syc-paper);
}

.syc-sheet[hidden] {
	display: none;
}

.syc-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: var(--syc-rule);
}

.syc-sheet__close {
	width: 44px;
	height: 44px;
	margin: -10px -10px -10px 0;
	background: none;
	border: 0;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.syc-sheet__row {
	display: grid;
	grid-template-columns: 30px 1fr auto;
	gap: 10px;
	align-items: baseline;
	min-height: 44px;
	padding: 16px 20px;
	border-bottom: var(--syc-rule);
}

.syc-sheet__num {
	color: var(--syc-accent-text);
	font-size: 11px;
}

.syc-sheet__name {
	font-family: var(--syc-display);
	font-size: 24px;
	line-height: 1.05;
}

.syc-sheet__count {
	color: var(--syc-meta);
	font-size: 11px;
}

.syc-sheet__search {
	padding: 20px;
}

/* ------------------------------------------------------------------ *
 * Front page
 * ------------------------------------------------------------------ */

.syc-hero {
	display: grid;
	grid-template-columns: 1fr 440px;
	gap: 48px;
	align-items: end;
	padding: 56px var(--syc-gutter) 52px;
	border-bottom: var(--syc-rule);
}

.syc-hero__title {
	margin-top: 18px;
	font-family: var(--syc-display);
	font-size: clamp(54px, 7.7vw, 92px);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 0.95;
	text-wrap: balance;
}

.syc-hero__standfirst {
	max-width: 480px;
	margin-top: 26px;
	color: var(--syc-muted);
	font-size: 17px;
	line-height: 1.5;
}

.syc-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--syc-ratio, 4 / 3);
	background: #eef0f4;
}

.syc-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.syc-lead__eyebrow {
	margin: 14px 0 6px;
	color: var(--syc-accent-text);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.syc-lead__title {
	font-family: var(--syc-display);
	font-size: 26px;
	line-height: 1.15;
}

.syc-lead:hover .syc-lead__title,
.syc-lead:focus-visible .syc-lead__title {
	color: var(--syc-accent-text);
}

.syc-contents-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 26px var(--syc-gutter) 0;
}

.syc-contents-note {
	color: var(--syc-meta);
	font-size: 12px;
}

/* Pillar table ------------------------------------------------------ */

.syc-table {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 18px;
	border-top: var(--syc-rule);
}

.syc-cell {
	display: grid;
	grid-template-columns: 40px 1fr 80px;
	gap: 14px;
	padding: 22px 32px 24px var(--syc-gutter);
	border-bottom: var(--syc-rule);
}

.syc-cell:nth-child(odd) {
	border-right: var(--syc-rule);
}

.syc-cell:nth-child(even) {
	padding-right: var(--syc-gutter);
	padding-left: 32px;
}

.syc-cell__num {
	padding-top: 9px;
	color: var(--syc-accent-text);
	font-size: 12px;
}

.syc-cell__body {
	min-width: 0;
}

.syc-cell__title {
	display: block;
	font-family: var(--syc-display);
	font-size: 30px;
	line-height: 1.05;
}

.syc-cell:hover .syc-cell__title,
.syc-cell:focus-visible .syc-cell__title {
	color: var(--syc-accent-text);
}

.syc-cell__recent {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 12px;
	color: var(--syc-muted);
	font-size: 14px;
	line-height: 1.4;
}

.syc-cell__count {
	padding-top: 9px;
	color: var(--syc-meta);
	font-size: 12px;
	text-align: right;
}

/* Latest band ------------------------------------------------------- */

.syc-band {
	display: grid;
	grid-template-columns: 200px repeat(4, 1fr);
	gap: 28px;
	padding: 30px var(--syc-gutter) 36px;
	background: var(--syc-tint);
	border-bottom: var(--syc-rule);
}

.syc-band__label {
	padding-top: 4px;
	margin: 0;
}

.syc-band__item {
	display: block;
	font-size: 15px;
	line-height: 1.35;
}

.syc-band__date {
	display: block;
	margin-bottom: 6px;
	color: var(--syc-meta);
	font-size: 11px;
}

/* ------------------------------------------------------------------ *
 * Breadcrumbs
 * ------------------------------------------------------------------ */

.syc-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px var(--syc-gutter);
	border-bottom: var(--syc-hair);
	color: var(--syc-meta);
	font-size: 12px;
}

.syc-crumbs .is-current {
	color: var(--syc-ink);
}

/* ------------------------------------------------------------------ *
 * Article title block
 * ------------------------------------------------------------------ */

.syc-titleblock {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 48px;
	align-items: end;
	padding: 48px var(--syc-gutter) 40px;
	border-bottom: var(--syc-rule);
}

.syc-title {
	margin-top: 14px;
	font-family: var(--syc-display);
	font-size: clamp(36px, 5vw, 60px);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
	text-wrap: balance;
}

.syc-title--pillar {
	font-size: clamp(36px, 5.3vw, 64px);
}

.syc-standfirst {
	max-width: 660px;
	margin-top: 20px;
	color: #444;
	font-size: 19px;
	line-height: 1.5;
}

.syc-metacol {
	padding-left: 20px;
	border-left: var(--syc-rule);
	color: var(--syc-muted);
	font-size: 13px;
	line-height: 1.7;
}

.syc-metacol span {
	color: var(--syc-ink);
	font-weight: 600;
}

/* Hero image -------------------------------------------------------- */

.syc-media--hero {
	aspect-ratio: auto;
	height: var(--syc-hero-h);
}

.syc-caption {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 10px var(--syc-gutter);
	border-bottom: var(--syc-rule);
	color: var(--syc-meta);
	font-size: 12px;
}

/* ------------------------------------------------------------------ *
 * Reading grid
 * ------------------------------------------------------------------ */

.syc-reading {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 60px;
	padding: 0 var(--syc-gutter);
}

.syc-reading--norail {
	grid-template-columns: minmax(0, 1fr);
}

.syc-aside {
	min-width: 0;
	padding-top: 40px;
}

.syc-sticky {
	position: sticky;
	top: var(--syc-sticky-top);
}

.syc-body {
	max-width: var(--syc-measure);
	padding: 40px 0 48px;
	color: var(--syc-body);
	font-size: 17px;
	line-height: 1.65;
	min-width: 0;
}

/* Contents rail ----------------------------------------------------- */

.syc-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.syc-toc__count,
.syc-toc__glyph {
	display: none;
}

.syc-toc__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--syc-rule);
}

.syc-toc__link {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 6px;
	padding: 9px 0;
	border-bottom: var(--syc-hair-15);
	color: var(--syc-muted);
	font-size: 13.5px;
	line-height: 1.35;
}

.syc-toc__num {
	padding-top: 2px;
	color: var(--syc-faint);
	font-size: 11px;
}

.syc-toc__link.is-current {
	color: var(--syc-ink);
	font-weight: 600;
}

.syc-toc__link.is-current .syc-toc__num {
	color: var(--syc-accent-text);
}

/* Pillar box under the rail ----------------------------------------- */

.syc-pillarbox {
	margin-top: 22px;
	padding: 16px 18px;
	border: var(--syc-rule);
}

.syc-pillarbox__title {
	display: block;
	margin-top: 6px;
	font-family: var(--syc-display);
	font-size: 19px;
	line-height: 1.15;
}

.syc-pillarbox__count {
	margin-top: 6px;
	color: var(--syc-meta);
	font-size: 12px;
}

/* ------------------------------------------------------------------ *
 * Article body: the block specimens
 * ------------------------------------------------------------------ */

.syc-body > h2,
.syc-body .wp-block-heading.wp-block-heading:is(h2) {
	margin: 44px 0 18px;
	color: var(--syc-ink);
	font-family: var(--syc-display);
	font-size: 36px;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.12;
	scroll-margin-top: 24px;
}

.syc-body > h2:first-child {
	margin-top: 0;
}

.syc-h2-number {
	display: block;
	margin-bottom: 8px;
	color: var(--syc-accent-text);
	font-family: var(--syc-text);
	font-size: 14px;
	letter-spacing: 0.1em;
}

.syc-body h3 {
	margin: 32px 0 12px;
	color: var(--syc-ink);
	font-family: var(--syc-text);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	scroll-margin-top: 24px;
}

.syc-body h4 {
	margin: 26px 0 10px;
	font-size: 17px;
	font-weight: 600;
}

.syc-body p {
	margin: 0 0 20px;
}

.syc-body a {
	color: var(--syc-accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.syc-body a:hover,
.syc-body a:focus-visible {
	color: var(--syc-ink);
}

.syc-body ul,
.syc-body ol {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 20px;
	padding-left: 22px;
}

.syc-body li > ul,
.syc-body li > ol {
	margin: 8px 0 0;
}

.syc-body li::marker {
	color: var(--syc-meta);
}

/* Callout ----------------------------------------------------------- */

.syc-body .is-style-local-note {
	margin: 28px 0;
	padding: 20px 24px;
	border: var(--syc-rule);
}

.syc-body .is-style-local-note > *:last-child {
	margin-bottom: 0;
}

.syc-body .is-style-local-note p {
	font-size: 16px;
	line-height: 1.55;
}

.syc-body .is-style-local-note > h3,
.syc-body .is-style-local-note > h4,
.syc-body .is-style-local-note > p:first-child strong:only-child {
	margin: 0 0 8px;
	color: var(--syc-accent-text);
	font-family: var(--syc-text);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Tables ------------------------------------------------------------ */

.syc-table-scroll {
	margin: 24px 0 28px;
	overflow-x: auto;
	border-top: var(--syc-rule);
}

.syc-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.syc-body th {
	padding: 10px 16px 10px 0;
	border-bottom: var(--syc-rule);
	color: var(--syc-meta);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-align: left;
	text-transform: uppercase;
}

.syc-body td {
	padding: 12px 16px 12px 0;
	border-bottom: var(--syc-hair-20);
	vertical-align: top;
}

.syc-body tr:last-child td {
	border-bottom: var(--syc-rule);
}

.syc-body th:last-child,
.syc-body td:last-child {
	padding-right: 0;
}

.syc-body figcaption,
.syc-body table + p em:only-child {
	color: var(--syc-meta);
	font-size: 12px;
}

/* Figures ----------------------------------------------------------- */

.syc-body figure,
.syc-body .wp-block-image {
	margin: 32px 0;
}

.syc-body figure img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.syc-body figcaption {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 8px;
	color: var(--syc-meta);
	font-size: 12px;
	text-align: left;
}

/* Quote ------------------------------------------------------------- */

.syc-body blockquote,
.syc-body .wp-block-quote {
	margin: 32px 0;
	padding: 0 0 0 24px;
	border-left: 2px solid var(--syc-accent);
	color: var(--syc-ink);
	font-family: var(--syc-display);
	font-size: 27px;
	line-height: 1.25;
}

.syc-body blockquote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.syc-body blockquote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--syc-text);
	font-size: 13px;
	font-style: normal;
	color: var(--syc-meta);
}

.syc-body .wp-block-separator {
	height: 0;
	margin: 36px 0;
	border: 0;
	border-top: var(--syc-hair-20);
}

.syc-body .wp-block-separator.is-style-ink {
	border-top: var(--syc-rule);
}

/* FAQ --------------------------------------------------------------- */

.syc-faq {
	margin: 20px 0 28px;
	border-top: var(--syc-rule);
	font-size: 16px;
}

.syc-faq__item {
	border-bottom: var(--syc-hair-20);
}

.syc-faq__item:last-child {
	border-bottom: var(--syc-rule);
}

.syc-faq__q {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 15px 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.syc-faq__q::-webkit-details-marker {
	display: none;
}

.syc-faq__glyph {
	flex: none;
	color: var(--syc-accent-text);
	font-family: var(--syc-display);
	font-size: 0;
	line-height: 1;
}

/* The glyph text is replaced rather than swapped by script. */
.syc-faq__glyph::before {
	content: "+";
	font-size: 22px;
}

.syc-faq__item[open] .syc-faq__glyph::before {
	content: "−";
}

/*
 * Animating a <details> needs interpolate-size; where it is unsupported the
 * panel simply opens instantly, which is the correct fallback.
 */
.syc-faq__item::details-content {
	overflow: hidden;
	block-size: 0;
	transition: block-size 160ms ease, content-visibility 160ms ease allow-discrete;
}

.syc-faq__item[open]::details-content {
	block-size: auto;
}

.syc-faq__a {
	padding-bottom: 16px;
	color: #444;
	font-size: 15.5px;
	line-height: 1.6;
}

.syc-faq__a > *:last-child {
	margin-bottom: 0;
}

/* Tags -------------------------------------------------------------- */

.syc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
	font-size: 12px;
}

.syc-tag,
.syc-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 30px;
	padding: 6px 12px;
	border: var(--syc-rule);
	border-radius: 999px;
}

.syc-linkpages {
	display: flex;
	gap: 10px;
	margin-top: 28px;
	font-size: 13px;
}

/* ------------------------------------------------------------------ *
 * Next in this pillar
 * ------------------------------------------------------------------ */

.syc-next {
	padding: 32px var(--syc-gutter) 40px;
	border-top: var(--syc-rule);
}

.syc-next__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 18px;
}

.syc-next__all {
	color: var(--syc-meta);
	font-size: 12px;
}

.syc-next__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: var(--syc-rule);
}

.syc-next__card {
	padding: 20px 24px 22px;
	border-right: var(--syc-hair-15);
	border-bottom: var(--syc-rule);
}

.syc-next__card:first-child {
	padding-left: 0;
}

.syc-next__card:last-child {
	padding-right: 0;
	border-right: 0;
}

.syc-next__num {
	display: block;
	color: var(--syc-accent-text);
	font-size: 12px;
}

.syc-next__title {
	display: block;
	margin-top: 8px;
	font-family: var(--syc-display);
	font-size: 22px;
	line-height: 1.15;
}

.syc-next__card:hover .syc-next__title,
.syc-next__card:focus-visible .syc-next__title {
	color: var(--syc-accent-text);
}

/* ------------------------------------------------------------------ *
 * Pillar page
 * ------------------------------------------------------------------ */

.syc-pillarhero {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) 380px;
	gap: 40px;
	align-items: start;
	padding: 48px var(--syc-gutter) 44px;
	border-bottom: var(--syc-rule);
}

.syc-pillarhero--archive {
	grid-template-columns: 120px minmax(0, 1fr);
}

.syc-pillarhero__num {
	color: var(--syc-accent);
	font-family: var(--syc-display);
	font-size: 96px;
	line-height: 0.9;
}

.syc-pillarhero__text .syc-standfirst {
	max-width: 620px;
	margin-top: 22px;
}

.syc-archive__guide {
	display: inline-block;
	margin-top: 20px;
	color: var(--syc-accent-text);
	font-size: 14px;
}

.syc-pillargrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 60px;
	padding: 0 var(--syc-gutter);
}

.syc-pillargrid__main {
	min-width: 0;
}

.syc-body--pillar {
	padding: 36px 0 8px;
	font-size: 17px;
	line-height: 1.6;
}

.syc-body--faq {
	padding: 32px 0 40px;
	max-width: none;
}

/*
 * Only the heading the content was split at becomes the eyebrow the comp
 * shows above the questions. Anything after the FAQ — a "plan the rest of
 * your trip" section, a resources list — is ordinary prose and keeps the
 * ordinary heading style.
 */
.syc-body--faq > h2:first-child {
	margin: 0 0 14px;
	color: var(--syc-accent-text);
	font-family: var(--syc-text);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* The eyebrow carries its own label; the section number would read as noise. */
.syc-body--faq > h2:first-child .syc-h2-number {
	display: none;
}

.syc-body--faq .syc-faq {
	max-width: 680px;
	margin-top: 0;
}

.syc-guides__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 28px 0 14px;
	border-bottom: var(--syc-rule);
}

.syc-guides__head h2 {
	margin: 0;
}

.syc-guides__count {
	color: var(--syc-meta);
	font-size: 12px;
}

/* Numbered rows ----------------------------------------------------- */

.syc-rows {
	display: flex;
	flex-direction: column;
}

.syc-row {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 110px;
	gap: 14px;
	padding: 20px 0 22px;
	border-bottom: var(--syc-hair-20);
}

.syc-row.is-last {
	border-bottom: var(--syc-rule);
}

.syc-row__num {
	padding-top: 8px;
	color: var(--syc-accent-text);
	font-size: 12px;
}

.syc-row__body {
	min-width: 0;
}

.syc-row__eyebrow {
	display: block;
	margin-bottom: 6px;
	color: var(--syc-meta);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.syc-row__title {
	display: block;
	font-family: var(--syc-display);
	font-size: 26px;
	line-height: 1.12;
}

.syc-row:hover .syc-row__title,
.syc-row:focus-visible .syc-row__title {
	color: var(--syc-accent-text);
}

.syc-row__dek {
	display: block;
	margin-top: 8px;
	color: var(--syc-muted);
	font-size: 14px;
	line-height: 1.5;
}

.syc-row__meta {
	padding-top: 8px;
	color: var(--syc-meta);
	font-size: 12px;
	text-align: right;
}

/* Pillar sidebar ---------------------------------------------------- */

.syc-aside--pillar {
	padding-top: 36px;
}

.syc-rail {
	padding: 20px 22px 22px;
	border: var(--syc-rule);
}

.syc-rail__list {
	display: flex;
	flex-direction: column;
	margin-top: 12px;
}

.syc-rail__row {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	gap: 8px;
	padding: 9px 0;
	border-top: var(--syc-hair-15);
	font-size: 14px;
}

.syc-rail__num {
	color: var(--syc-faint);
	font-size: 11px;
}

.syc-rail__count {
	color: var(--syc-meta);
	font-size: 11px;
}

.syc-rail__num {
	padding-top: 2px;
}

.syc-rail__row.is-current {
	color: var(--syc-accent-text);
	font-weight: 600;
}

.syc-rail__row.is-current .syc-rail__num,
.syc-rail__row.is-current .syc-rail__count {
	color: inherit;
}

.syc-startwith {
	margin-top: 20px;
	padding: 20px 22px;
	background: var(--syc-tint);
}

.syc-startwith__title {
	display: block;
	margin-top: 8px;
	font-family: var(--syc-display);
	font-size: 22px;
	line-height: 1.15;
}

.syc-startwith__meta {
	margin-top: 8px;
	color: var(--syc-meta);
	font-size: 12px;
}

/* ------------------------------------------------------------------ *
 * Pages
 * ------------------------------------------------------------------ */

.syc-page-head {
	padding: 48px var(--syc-gutter) 36px;
	border-bottom: var(--syc-rule);
}

.syc-page-title {
	max-width: 900px;
	font-family: var(--syc-display);
	font-size: clamp(36px, 4.6vw, 56px);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.02;
	text-wrap: balance;
}

.syc-page-media {
	border-bottom: var(--syc-rule);
}

.syc-page-article .syc-body {
	padding: 40px var(--syc-gutter) 56px;
	max-width: calc(var(--syc-measure) + var(--syc-gutter) * 2);
}

/* ------------------------------------------------------------------ *
 * Listing, search and pagination
 * ------------------------------------------------------------------ */

.syc-searchhead {
	padding: 44px var(--syc-gutter) 0;
}

.syc-searchhead__query {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--syc-ink);
}

.syc-searchhead__term {
	font-family: var(--syc-display);
	font-size: clamp(34px, 4.6vw, 56px);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
	overflow-wrap: anywhere;
}

.syc-searchhead__caret {
	color: var(--syc-accent);
	font-family: var(--syc-display);
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: 1;
}

.syc-searchhead__count {
	margin-left: auto;
	color: var(--syc-meta);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.syc-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 18px;
	font-size: 12px;
}

.syc-pill.is-active {
	background: var(--syc-ink);
	color: var(--syc-paper);
}

.syc-results,
.syc-listing {
	padding: 24px var(--syc-gutter) 48px;
}

.syc-listing__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0 14px;
	border-bottom: var(--syc-rule);
}

.syc-listing__title {
	font-family: var(--syc-display);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.syc-listing__count {
	color: var(--syc-meta);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.syc-results .syc-rows .syc-row:first-child {
	border-top: var(--syc-rule);
}

.syc-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	padding-top: 28px;
	font-size: 13px;
}

.syc-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 6px;
	border: var(--syc-rule);
}

.syc-pagination .page-numbers.current {
	background: var(--syc-ink);
	color: var(--syc-paper);
}

.syc-pagination .page-numbers.dots {
	border-color: transparent;
}

.syc-pagination .prev,
.syc-pagination .next {
	padding: 0 14px;
}

/* Search form ------------------------------------------------------- */

.syc-search {
	display: flex;
	max-width: 420px;
	margin-top: 28px;
	border: var(--syc-rule);
}

.syc-search__input {
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	background: none;
	border: 0;
	color: var(--syc-ink);
	font: inherit;
	font-size: 15px;
}

.syc-search__input::placeholder {
	color: var(--syc-meta);
}

.syc-search__input:focus-visible {
	outline-offset: -2px;
}

.syc-search__button {
	padding: 12px 16px;
	background: var(--syc-ink);
	border: 0;
	color: var(--syc-paper);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * 404 and empty states
 * ------------------------------------------------------------------ */

.syc-404,
.syc-none {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
	padding: 72px var(--syc-gutter);
}

.syc-none {
	padding: 48px var(--syc-gutter) 64px;
}

.syc-404__title,
.syc-none__title {
	margin-top: 16px;
	font-family: var(--syc-display);
	font-size: clamp(40px, 6.6vw, 80px);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 0.95;
	text-wrap: balance;
}

.syc-none__title {
	font-size: clamp(32px, 4.4vw, 52px);
	margin-top: 0;
}

.syc-404__body,
.syc-none__body {
	max-width: 420px;
	margin-top: 24px;
	color: var(--syc-muted);
	font-size: 17px;
	line-height: 1.5;
}

.syc-404__pillars,
.syc-none__pillars {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 32px;
	border-top: var(--syc-rule);
}

.syc-404__pillar,
.syc-none__pillar {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 8px;
	align-items: baseline;
	min-height: 44px;
	padding: 14px 0;
	border-bottom: var(--syc-hair-20);
	font-family: var(--syc-display);
	font-size: 20px;
}

.syc-404__num,
.syc-none__num {
	color: var(--syc-accent-text);
	font-family: var(--syc-text);
	font-size: 11px;
}

/* ------------------------------------------------------------------ *
 * Comments
 * ------------------------------------------------------------------ */

.syc-comments {
	max-width: var(--syc-measure);
	padding: 40px var(--syc-gutter) 56px;
	border-top: var(--syc-rule);
}

.syc-comments__title {
	margin-bottom: 18px;
	font-family: var(--syc-display);
	font-size: 27px;
	font-weight: 400;
	line-height: 1.15;
}

.syc-comments__list {
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

.syc-comments__list li {
	padding: 16px 0;
	border-bottom: var(--syc-hair-20);
}

.syc-comments input[type="text"],
.syc-comments input[type="email"],
.syc-comments input[type="url"],
.syc-comments textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: var(--syc-rule);
	border-radius: 0;
	font: inherit;
	font-size: 15px;
}

.syc-comments .submit {
	padding: 12px 18px;
	background: var(--syc-ink);
	border: 0;
	color: var(--syc-paper);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

.syc-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	padding: 34px var(--syc-gutter) 30px;
	color: var(--syc-muted);
	font-size: 13px;
	line-height: 1.6;
}

.syc-footer__desc {
	max-width: 240px;
	margin-top: 12px;
}

.syc-footer__label {
	margin-bottom: 8px;
	color: var(--syc-ink);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.syc-footer__links a {
	display: inline;
}

.syc-news {
	display: flex;
	margin-top: 8px;
	border: var(--syc-rule);
}

.syc-news__input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	background: none;
	border: 0;
	color: var(--syc-ink);
	font: inherit;
	font-size: 13px;
}

.syc-news__input::placeholder {
	color: var(--syc-meta);
}

.syc-news__input:focus-visible {
	outline-offset: -2px;
}

.syc-news__button {
	padding: 10px 14px;
	background: var(--syc-ink);
	border: 0;
	color: var(--syc-paper);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.syc-news__done {
	margin-top: 8px;
	font-size: 13px;
}

.syc-legal,
.syc-footer--compact {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 20px;
	padding: 14px var(--syc-gutter) 18px;
	border-top: var(--syc-hair);
	color: var(--syc-meta);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.syc-footer--compact {
	border-top: var(--syc-rule);
}

/* ------------------------------------------------------------------ *
 * Tablet
 * ------------------------------------------------------------------ */

@media (max-width: 1100px) {
	.syc-nav {
		gap: 18px;
		font-size: 11px;
	}

	.syc-hero {
		grid-template-columns: 1fr 360px;
		gap: 36px;
	}

	.syc-titleblock {
		grid-template-columns: 1fr 300px;
		gap: 36px;
	}

	.syc-pillarhero {
		grid-template-columns: 90px minmax(0, 1fr) 280px;
		gap: 28px;
	}

	.syc-reading {
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 40px;
	}

	.syc-pillargrid {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 40px;
	}
}

/* ------------------------------------------------------------------ *
 * Mobile: everything stacks to one column
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	:root {
		--syc-gutter: 20px;
	}

	.syc-header__inner {
		padding: 14px var(--syc-gutter);
	}

	.syc-crumbs {
		padding: 12px var(--syc-gutter);
	}

	.syc-crumbs__leaf,
	.syc-crumbs__sep--leaf {
		display: none;
	}

	.syc-lockup .syc-mark {
		width: 28px;
		height: 20px;
	}

	.syc-lockup__word {
		font-size: 20px;
	}

	.syc-nav {
		display: none;
	}

	.syc-burger {
		display: flex;
	}

	.syc-header__search {
		display: flex;
		align-items: center;
		min-height: 44px;
		font-size: 11px;
	}

	.syc-lockup--header {
		min-height: 44px;
	}

	.syc-header__end {
		gap: 12px;
	}

	.syc-next__all {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.syc-startwith__title,
	.syc-pillarbox__title,
	.syc-archive__guide {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Front page ---------------------------------------------------- */

	.syc-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 36px var(--syc-gutter) 32px;
	}

	.syc-hero__standfirst {
		margin-top: 18px;
		font-size: 16px;
	}

	.syc-lead {
		display: block;
		margin: 32px calc(var(--syc-gutter) * -1) -32px;
		padding: 20px var(--syc-gutter) 24px;
		border-top: var(--syc-rule);
	}

	.syc-lead__title {
		font-size: 24px;
	}

	.syc-contents-head {
		display: block;
		padding-top: 22px;
	}

	.syc-contents-note {
		display: none;
	}

	.syc-table {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 14px;
	}

	.syc-cell,
	.syc-cell:nth-child(even) {
		grid-template-columns: 30px minmax(0, 1fr) auto;
		gap: 10px;
		align-items: baseline;
		padding: 16px var(--syc-gutter);
		border-right: 0;
	}

	.syc-cell__num,
	.syc-cell__count {
		padding-top: 0;
	}

	.syc-cell__title {
		font-size: 24px;
	}

	.syc-cell__recent {
		display: none;
	}

	.syc-cell__count {
		font-size: 11px;
	}

	.syc-band {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		padding: 22px var(--syc-gutter) 26px;
	}

	.syc-band__item:nth-child(n + 4) {
		display: none;
	}

	/* Article -------------------------------------------------------- */

	.syc-titleblock {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 28px var(--syc-gutter) 24px;
		border-bottom: 0;
	}

	.syc-title {
		line-height: 1.02;
		letter-spacing: -0.015em;
	}

	.syc-standfirst {
		margin-top: 16px;
		font-size: 16px;
	}

	.syc-metacol {
		margin-top: 18px;
		padding-left: 0;
		border-left: 0;
		font-size: 12px;
	}

	.syc-media--hero {
		height: 240px;
	}

	.syc-caption {
		flex-direction: column;
		gap: 2px;
		padding: 8px var(--syc-gutter);
		font-size: 11px;
	}

	.syc-reading,
	.syc-pillargrid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.syc-aside {
		padding-top: 20px;
	}

	.syc-sticky {
		position: static;
	}

	.syc-body {
		padding: 28px 0 32px;
		font-size: 16.5px;
		line-height: 1.6;
	}

	.syc-body > h2,
	.syc-body .wp-block-heading.wp-block-heading:is(h2) {
		margin: 34px 0 14px;
		font-size: 28px;
	}

	.syc-body h3 {
		font-size: 19px;
	}

	.syc-body .is-style-local-note {
		padding: 16px 18px;
	}

	.syc-body blockquote,
	.syc-body .wp-block-quote {
		font-size: 23px;
	}

	/* The rail becomes an accordion above the body. */

	.syc-toc {
		border: var(--syc-rule);
	}

	.syc-toc__head {
		display: flex;
		gap: 10px;
		align-items: center;
		width: 100%;
		min-height: 44px;
		margin: 0;
		padding: 14px 16px;
		background: none;
		border: 0;
		text-align: left;
	}

	.syc-toc--collapsible .syc-toc__head {
		cursor: pointer;
	}

	.syc-toc__count {
		display: block;
		margin-right: auto;
		color: var(--syc-accent-text);
		font-size: 11px;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}

	.syc-toc__glyph {
		display: block;
		color: var(--syc-accent-text);
		font-family: var(--syc-display);
		font-size: 22px;
		line-height: 1;
	}

	.syc-toc__list {
		padding: 0 16px 8px;
		border-top: 0;
	}

	/* Without script the list stays open: a hidden TOC is worse than a long one. */
	.syc-toc--collapsible .syc-toc__list {
		display: none;
	}

	.syc-toc--collapsible.is-open .syc-toc__list {
		display: flex;
	}

	.syc-toc__link {
		min-height: 44px;
		align-items: center;
	}

	.syc-pillarbox {
		margin-top: 18px;
	}

	/* Pillar --------------------------------------------------------- */

	.syc-pillarhero,
	.syc-pillarhero--archive {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 28px var(--syc-gutter) 26px;
	}

	.syc-pillarhero__num {
		font-size: 56px;
		line-height: 1;
	}

	.syc-pillarhero__text {
		margin-top: 10px;
	}

	.syc-pillarhero__media {
		margin-top: 22px;
	}

	.syc-body--pillar {
		padding-top: 24px;
	}

	.syc-row {
		grid-template-columns: 30px minmax(0, 1fr);
		gap: 10px;
		padding: 16px 0 18px;
	}

	.syc-row__title {
		font-size: 21px;
	}

	.syc-row__meta {
		grid-column: 2;
		padding-top: 8px;
		text-align: left;
	}

	.syc-next__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.syc-next__card,
	.syc-next__card:first-child,
	.syc-next__card:last-child {
		padding: 16px 0 18px;
		border-right: 0;
		border-bottom: var(--syc-hair-20);
	}

	.syc-next__card:last-child {
		border-bottom: var(--syc-rule);
	}

	.syc-next__title {
		font-size: 20px;
	}

	/* Search, 404, footer -------------------------------------------- */

	.syc-searchhead__query {
		flex-wrap: wrap;
	}

	.syc-searchhead__count {
		width: 100%;
		margin: 6px 0 0;
	}

	.syc-404,
	.syc-none {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		padding: 40px var(--syc-gutter) 48px;
	}

	.syc-404__pillars,
	.syc-none__pillars {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Column-major placement is a desktop idea; on one column the explicit
	 * grid-column/grid-row from the template would leave gaps, so it is
	 * overridden rather than fought with.
	 */
	.syc-404__pillar {
		grid-column: 1 !important;
		grid-row: auto !important;
	}

	.syc-footer__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 26px var(--syc-gutter) 22px;
	}

	.syc-legal,
	.syc-footer--compact {
		flex-direction: column;
		gap: 6px;
		line-height: 1.8;
	}

	.syc-page-article .syc-body {
		padding: 28px var(--syc-gutter) 40px;
	}
}

/* ------------------------------------------------------------------ *
 * Print and reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.syc-header,
	.syc-footer,
	.syc-aside,
	.syc-next,
	.syc-crumbs,
	.syc-sheet {
		display: none;
	}

	.syc-reading,
	.syc-pillargrid {
		display: block;
	}

	body {
		font-size: 11pt;
	}
}

/* interpolate-size lets the FAQ panel animate from 0 to its own height. */
@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}
}