/* ==========================================================================
   Iraq Shrine
   --------------------------------------------------------------------------
   Colour contract. Gold exists in three values because one value cannot do all
   three jobs and stay legible:

     --gold        #c39a3b  ornament only: rules, the star centre, the ✦ glyph,
                            tile and frame borders. 2.33:1 on ivory, so it is
                            never text and never a focus ring.
     --gold-mark   #ab8734  focus rings and any border that must be perceivable.
                            3.00:1 on ivory and 3.07:1 on lapis — one value that
                            clears WCAG 2.2 non-text contrast on both grounds.
     --gold-text   #836828  gold used as text on ivory, e.g. nav hover. 4.69:1.
                            (#876b29 solves to exactly 4.50 and measures 4.48 once the
                            browser has painted it, so the token carries headroom.)

   Gold text on lapis uses --gold-light (6.33:1) instead. Everything else in the
   palette clears AA as given: ink 14.3, muted 5.5, lapis 9.2 on ivory; ivory
   9.2 on lapis and 7.5 on lapis hover.
   ========================================================================== */

:root {
	--ivory: #f6f1e7;
	--lapis: #1d3a8a;
	--lapis-hover: #24479f;
	--gold: #c39a3b;
	--gold-mark: #ab8734;
	--gold-text: #836828;
	--gold-light: #e6c77a;
	--ink: #17203a;
	--muted: #5a6079;

	--hairline: rgba(23, 32, 58, .12);
	--rule-gold: rgba(195, 154, 59, .7);

	--lattice-ivory:
		repeating-linear-gradient(45deg, rgba(195, 154, 59, .12) 0 1px, transparent 1px 30px),
		repeating-linear-gradient(-45deg, rgba(195, 154, 59, .12) 0 1px, transparent 1px 30px);
	--lattice-lapis:
		repeating-linear-gradient(45deg, rgba(246, 241, 231, .14) 0 1px, transparent 1px 22px),
		repeating-linear-gradient(-45deg, rgba(246, 241, 231, .14) 0 1px, transparent 1px 22px);
	--lattice-footer:
		repeating-linear-gradient(45deg, rgba(246, 241, 231, .1) 0 1px, transparent 1px 30px),
		repeating-linear-gradient(-45deg, rgba(246, 241, 231, .1) 0 1px, transparent 1px 30px);

	--display: Gloock, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--arabic: 'Aref Ruqaa', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
	--ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--gutter: 56px;
	--canvas: 1280px;
	--measure: 720px;

	--t: 200ms ease;
	--t-img: 400ms ease;
}

/* --------------------------------------------------------------- Base */

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

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

body {
	margin: 0;
	/* Column layout so a short page (404, empty search) still puts the footer at
	   the bottom of the viewport rather than halfway up it. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--ivory);
	background-image: var(--lattice-ivory);
	background-attachment: fixed;
	color: var(--ink);
	font: 400 17px/1.7 var(--ui);
	overflow-wrap: break-word;
}

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

img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

ul, ol { margin: 0; padding: 0; }

button { font: inherit; color: inherit; }

:where(.ar) {
	font-family: var(--arabic);
	font-weight: 400;
}

/* ------------------------------------------------------- Accessibility */

:focus-visible {
	outline: 2px solid var(--gold-mark);
	outline-offset: 2px;
}

/* Ivory focus ring on lapis grounds, where gold-mark is close to the ground. */
.site-footer :focus-visible,
.tile:focus-visible,
.mobile-panel :focus-visible {
	outline-color: var(--ivory);
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--lapis);
	color: var(--ivory);
	font: 500 12px/1 var(--ui);
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
}

#content:focus { outline: none; }

.site-main { flex: 1 0 auto; }

/* ------------------------------------------------------------- Layout */

.utility__row,
.masthead,
.primary-nav,
.rule,
.hero,
.section,
.page-head,
.entry,
.post-nav,
.pagination,
.notfound,
.empty,
.site-header__row,
.site-footer__inner,
/* Archive, search and index put the grid straight into <main> rather than inside a
   .section, so it needs the gutter itself. It never appears inside .section, so this
   cannot double-pad. */
.card-grid--archive {
	max-width: var(--canvas);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.rule--gold {
	height: 1px;
	background: transparent;
	position: relative;
}

.rule--gold::after {
	content: "";
	position: absolute;
	inset: 0 var(--gutter);
	background: var(--gold);
	opacity: .7;
}

/* ------------------------------------------------------- Utility row */

.utility__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding-block: 14px 0;
	font: 500 11px/1 var(--ui);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted);
}

.utility__search,
.site-header__search {
	color: var(--muted);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	transition: color var(--t);
}

.utility__search:hover,
.site-header__search:hover { color: var(--gold-text); }

/* ---------------------------------------------------------- Masthead */

.masthead {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-block: 26px 0;
	text-align: center;
}

.masthead__mark,
.masthead__logo a { display: block; line-height: 0; }

.masthead__wordmark {
	font: 400 44px/1 var(--display);
	letter-spacing: -.01em;
}

.masthead__wordmark a {
	text-decoration: none;
	transition: color var(--t);
}

.masthead__wordmark a:hover { color: var(--lapis); }

.masthead__arabic {
	font-size: 18px;
	line-height: 1.2;
	color: var(--lapis);
}

.masthead__logo img {
	max-height: 88px;
	width: auto;
}

/* ------------------------------------------------------- Primary nav */

.primary-nav {
	display: flex;
	justify-content: center;
	padding-block: 22px 18px;
}

.primary-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px;
	list-style: none;
	font: 500 12px/1 var(--ui);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.primary-nav--seps .primary-nav__list { gap: 14px; }

.primary-nav__list a {
	text-decoration: none;
	transition: color var(--t);
}

.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a { color: var(--gold-text); }

.menu-sep {
	color: var(--gold);
	font-size: 12px;
	line-height: 1;
}

.nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 8px 0;
	cursor: pointer;
	font: 500 12px/1 var(--ui);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink);
	transition: color var(--t);
}

.nav-toggle:hover { color: var(--gold-text); }

/* WCAG 2.2 target size. The design's 11-12px controls are wide enough but only
   11-15px tall, so each gets a transparent 24px-tall hit area centred on the text.
   An absolutely positioned ::after changes the pointer target without moving a
   single pixel of the layout. */
.primary-nav__list a,
.utility__search,
.site-header__search,
.site-footer__list a,
.empty__links a { position: relative; }

.primary-nav__list a::after,
.utility__search::after,
.site-header__search::after,
.site-footer__list a::after,
.empty__links a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 24px;
	transform: translateY(-50%);
}

/* --------------------------------------------------- Compact header */

.site-header--compact {
	border-bottom: 1px solid var(--rule-gold);
}

.site-header__row {
	display: grid;
	/* Equal outer tracks put the nav at the centre of the page, not the centre of
	   whatever space the brand and search happen to leave. */
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	min-height: 72px;
}

.site-header__brand { justify-self: start; }

.site-header__search { justify-self: end; }

.site-header__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	min-width: 0;
}

.site-header__wordmark {
	font: 400 24px/1 var(--display);
	letter-spacing: -.01em;
	white-space: nowrap;
}

.site-header__logo { max-height: 34px; width: auto; }

.site-header--compact .primary-nav {
	padding-block: 0;
	min-width: 0;
}

.site-header--compact .primary-nav__list { gap: 28px; }

/* -------------------------------------------------------- Search panel */

.search-panel {
	border-top: 1px solid var(--hairline);
	background: var(--ivory);
}

.search-panel__inner {
	max-width: var(--canvas);
	margin-inline: auto;
	padding: 20px var(--gutter);
}

.search-form {
	display: flex;
	gap: 0;
	max-width: 560px;
}

.search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	font: 400 17px/1.4 var(--ui);
	color: var(--ink);
	background: var(--ivory);
	border: 1px solid var(--ink);
	border-radius: 0;
	padding: 13px 14px;
	appearance: none;
}

.search-form__field::placeholder { color: var(--muted); opacity: 1; }

.search-form__submit {
	flex: 0 0 auto;
	background: var(--lapis);
	color: var(--ivory);
	border: 1px solid var(--lapis);
	border-radius: 0;
	padding: 13px 22px;
	font: 500 12px/1.4 var(--ui);
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--t), border-color var(--t);
}

.search-form__submit:hover {
	background: var(--lapis-hover);
	border-color: var(--lapis-hover);
}

/* -------------------------------------------------------- Mobile panel */

.mobile-panel {
	position: fixed;
	inset: 0;
	z-index: 90;
	background-color: var(--lapis);
	background-image: var(--lattice-lapis);
	color: var(--ivory);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px var(--gutter) 48px;
}

.mobile-panel__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 52px;
}

.mobile-panel__close {
	background: none;
	border: 0;
	padding: 8px 12px;
	cursor: pointer;
	color: var(--ivory);
	font-size: 32px;
	line-height: 1;
}

.mobile-panel__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 32px;
}

.mobile-panel__list a {
	display: block;
	padding: 12px 0;
	font: 400 28px/1.1 var(--display);
	text-decoration: none;
	color: var(--ivory);
	border-bottom: 1px solid rgba(246, 241, 231, .18);
	transition: color var(--t);
}

.mobile-panel__list a:hover { color: var(--gold-light); }

.mobile-panel__search { margin-top: 32px; }

.mobile-panel__search .search-form__field {
	background: transparent;
	color: var(--ivory);
	border-color: rgba(246, 241, 231, .5);
}

.mobile-panel__search .search-form__field::placeholder { color: rgba(246, 241, 231, .7); }

.mobile-panel__search .search-form__submit {
	background: var(--ivory);
	color: var(--lapis);
	border-color: var(--ivory);
}

body.panel-open { overflow: hidden; }

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

.hero { padding-block: 0 64px; }

.hero__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding-block: 52px 36px;
}

.hero__title {
	font: 400 76px/1 var(--display);
	letter-spacing: -.01em;
	text-wrap: balance;
}

.hero__sub {
	font: 400 19px/1.5 var(--ui);
	color: var(--muted);
	max-width: 560px;
	text-wrap: pretty;
}

.hero__trio {
	display: grid;
	grid-template-columns: 1fr 480px 1fr;
	gap: 44px;
	align-items: end;
}

/* Grid children default to min-width:auto, which lets a long word push a column
   wider than its track and drag the whole row out of alignment. */
.hero__trio > * { min-width: 0; }

/* --------------------------------------------------------- Hero stacks */

.stack {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--gold);
}

.stack--empty { border-top: 0; }

.stack__label {
	font: 500 11px/1 var(--ui);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lapis);
	padding-block: 16px 8px;
}

.stack__list { list-style: none; }

.stack__item { border-bottom: 1px solid var(--hairline); }

.stack__item:last-child { border-bottom: 0; }

.stack__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-block: 14px;
	text-decoration: none;
	transition: color var(--t);
}

.stack__link--row {
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.stack__link:hover { color: var(--lapis); }

.stack__title {
	font: 400 20px/1.25 var(--display);
	text-wrap: pretty;
}

.stack__meta,
.stack__count {
	font: 400 12px/1 var(--ui);
	color: var(--muted);
}

.stack__count { white-space: nowrap; }

.stack__meta a { text-decoration: none; }

/* ---------------------------------------------------------------- Arch */

.arch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
}

/* The arch radius is expressed as percentages, not the pixel radii in the comp:
   229px on a 458×600 box is exactly 50% horizontally and 38.2% vertically, and
   the same pair reproduces every breakpoint's radius without hard-coding four
   sets of numbers. */
.arch__frame {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--gold);
	border-radius: 50% 50% 0 0 / 38.5% 38.5% 0 0;
}

.arch__inner {
	position: relative;
	width: 100%;
	aspect-ratio: 458 / 600;
	border-radius: 50% 50% 0 0 / 38.2% 38.2% 0 0;
	overflow: hidden;
	background: var(--lapis);
}

.arch__img,
.arch__link {
	display: block;
	width: 100%;
	height: 100%;
}

.arch__img {
	object-fit: cover;
	transition: transform var(--t-img);
}

.arch__link:hover .arch__img { transform: scale(1.03); }

.arch__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background-image: var(--lattice-lapis);
}

.arch__caption {
	font: 400 12px/1.4 var(--ui);
	color: var(--muted);
	text-align: center;
	text-wrap: pretty;
}

/* ------------------------------------------------------------ Sections */

.section { padding-block: 0 64px; }

.section--latest { padding-bottom: 72px; }

.section--latest .section__head { margin-bottom: 8px; }

.section__head {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.section__title { font: 400 40px/1 var(--display); }

.section__arabic {
	font-size: 20px;
	line-height: 1;
	color: var(--lapis);
}

/* ----------------------------------------------------------- Tile wall */

.tile-wall {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.tile {
	position: relative;
	display: block;
	/* The tile is the sizing context for its own title — see .tile__name. */
	container-type: inline-size;
	aspect-ratio: 1;
	overflow: hidden;
	text-decoration: none;
	background-color: var(--lapis);
	background-image: var(--lattice-lapis);
	color: var(--ivory);
	transition: background-color var(--t);
}

.tile:hover { background-color: var(--lapis-hover); }

.tile__img,
.tile__plate { display: none; }

.tile__img {
	position: absolute;
	inset: 0;
}

.tile__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-img);
}

.tile:hover .tile__image { transform: scale(1.03); }

.tile__plate {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--ivory);
	color: var(--ink);
	padding: 12px 16px;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}

.tile__plate-name {
	font: 400 18px/1 var(--display);
	min-width: 0;
}

.tile__plate-count {
	font: 400 11px/1 var(--ui);
	color: var(--muted);
	white-space: nowrap;
}

.tile__lapis {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 20px;
}

.tile__stack {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* The tile title scales with the tile, not the viewport. A fixed 28px is right at the
   four-column width (286px tiles) and far too big at two columns on a phone, where a
   long single word like "Accommodation" cannot break cleanly. 9.8cqi resolves to
   exactly 28px on a 286px tile — the comp's value — and floors at 17px, which is the
   largest size that still fits that word in a 390px-wide two-column grid. Narrower
   than that, use the category's Short name field. hyphens covers the rest. */
.tile__name {
	font: 400 28px/1.05 var(--display);
	hyphens: auto;
}

@supports (container-type: inline-size) {
	.tile__name { font-size: clamp(17px, 9.8cqi, 28px); }
}

.tile__arabic {
	font-size: 17px;
	line-height: 1.2;
	color: var(--gold-light);
	/* dir="rtl" is right for the Arabic itself, but as a flex item the span
	   stretches full width and RTL then aligns it to the far edge of the tile.
	   The comp sets it flush under the category name, so align it explicitly. */
	text-align: left;
}

.tile__count {
	font: 400 11px/1 var(--ui);
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-top: 6px;
}

/*
   The checkerboard. An image tile sits where (row + column) is even, so the set of
   image positions depends on how many columns the grid currently has. The three
   breakpoints below cover disjoint width ranges on purpose: a media query adds no
   specificity, so overlapping ranges would let a narrower rule keep winning over a
   wider one and every tile would end up in image mode. A tile with no image
   available carries data-img="0" and is never picked.

   2 columns -> period 4, positions 1 and 4.
   3 columns -> period 6, positions 1, 3 and 5.
   4 columns -> period 8, positions 1, 3, 6 and 8.
*/
@media (max-width: 899px) {
	.tile-wall .tile[data-img="1"]:is(:nth-child(4n + 1), :nth-child(4n + 4)) > .tile__img { display: block; }
	.tile-wall .tile[data-img="1"]:is(:nth-child(4n + 1), :nth-child(4n + 4)) > .tile__plate { display: flex; }
	.tile-wall .tile[data-img="1"]:is(:nth-child(4n + 1), :nth-child(4n + 4)) > .tile__lapis { display: none; }
}

@media (min-width: 900px) and (max-width: 1099px) {
	.tile-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.tile-wall .tile[data-img="1"]:is(:nth-child(6n + 1), :nth-child(6n + 3), :nth-child(6n + 5)) > .tile__img { display: block; }
	.tile-wall .tile[data-img="1"]:is(:nth-child(6n + 1), :nth-child(6n + 3), :nth-child(6n + 5)) > .tile__plate { display: flex; }
	.tile-wall .tile[data-img="1"]:is(:nth-child(6n + 1), :nth-child(6n + 3), :nth-child(6n + 5)) > .tile__lapis { display: none; }
}

@media (min-width: 1100px) {
	.tile-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.tile-wall .tile[data-img="1"]:is(:nth-child(8n + 1), :nth-child(8n + 3), :nth-child(8n + 6), :nth-child(8n + 8)) > .tile__img { display: block; }
	.tile-wall .tile[data-img="1"]:is(:nth-child(8n + 1), :nth-child(8n + 3), :nth-child(8n + 6), :nth-child(8n + 8)) > .tile__plate { display: flex; }
	.tile-wall .tile[data-img="1"]:is(:nth-child(8n + 1), :nth-child(8n + 3), :nth-child(8n + 6), :nth-child(8n + 8)) > .tile__lapis { display: none; }
}

/* --------------------------------------------------------------- Cards */

.card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 40px;
}

.card-grid--split {
	border-top: 1px solid var(--gold);
	margin-top: 24px;
}

.card-grid--archive,
.card-grid--three {
	gap: 40px;
	border-top: 1px solid var(--gold);
	padding-top: 8px;
}

.card { min-width: 0; }

.card__link {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	padding-block: 26px;
	text-decoration: none;
	color: inherit;
}

.card--text .card__link { gap: 10px; }

.card-grid--split .card { border-bottom: 1px solid var(--hairline); }

.card-grid--split .card:nth-child(n + 4) { border-bottom: 0; }

.card__frame {
	display: block;
	height: 190px;
	overflow: hidden;
	background: var(--lapis);
}

.card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--t-img);
}

.card__link:hover .card__image { transform: scale(1.03); }

.card__eyebrow {
	font: 500 11px/1 var(--ui);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lapis);
}

.card__title {
	font: 400 24px/1.2 var(--display);
	text-wrap: pretty;
	transition: color var(--t);
}

.card__link:hover .card__title { color: var(--lapis); }

.card__excerpt {
	font: 400 14px/1.55 var(--ui);
	color: var(--muted);
	text-wrap: pretty;
}

/* ---------------------------------------------------------- Page heads */

.page-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding-block: 56px 40px;
}

.page-head__eyebrow,
.entry__eyebrow,
.breadcrumbs {
	font: 500 11px/1.4 var(--ui);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lapis);
}

.breadcrumbs a,
.page-head__eyebrow a,
.entry__eyebrow a { text-decoration: none; }

.breadcrumbs a:hover,
.entry__eyebrow a:hover { text-decoration: underline; }

.page-head__title { font: 400 56px/1.05 var(--display); letter-spacing: -.01em; text-wrap: balance; }

.page-head__title--search { font-size: 40px; line-height: 1.1; }

.page-head__arabic {
	font-size: 22px;
	line-height: 1.2;
	color: var(--lapis);
}

.page-head__description {
	font: 400 19px/1.5 var(--ui);
	color: var(--muted);
	max-width: 640px;
	text-wrap: pretty;
}

.page-head__search { width: min(560px, 100%); margin-top: 8px; }

/* ------------------------------------------------------- Single guide */

.entry__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	max-width: 820px;
	margin-inline: auto;
	padding-block: 56px 32px;
}

.entry__title {
	font: 400 56px/1.05 var(--display);
	letter-spacing: -.01em;
	text-wrap: balance;
}

.entry__dek {
	font: 400 19px/1.5 var(--ui);
	color: var(--muted);
	text-wrap: pretty;
}

.entry__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	font: 400 12px/1.4 var(--ui);
	color: var(--muted);
}

.entry__figure { margin: 0; }

.entry__figure-frame {
	padding: 10px;
	border: 1px solid var(--gold);
	border-radius: 17% 17% 0 0 / 36% 36% 0 0;
}

.entry__figure-inner {
	aspect-ratio: 1168 / 560;
	overflow: hidden;
	border-radius: 17.1% 17.1% 0 0 / 35.7% 35.7% 0 0;
	background: var(--lapis);
}

.entry__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.entry__figcaption {
	font: 400 12px/1.4 var(--ui);
	color: var(--muted);
	text-align: center;
	margin-top: 14px;
}

.entry__body {
	max-width: var(--measure);
	margin-inline: auto;
	padding-block: 48px 64px;
}

/* ----------------------------------------------------- Prose (content) */

.entry-content {
	font: 400 17px/1.7 var(--ui);
	color: var(--ink);
}

.entry-content > * { margin-block: 0 1.4em; }

.entry-content > *:last-child { margin-bottom: 0; }

.entry-content h2 {
	font: 400 40px/1.1 var(--display);
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--rule-gold);
	text-wrap: balance;
}

.entry-content h3 {
	font: 400 24px/1.2 var(--display);
	margin-top: 40px;
	text-wrap: balance;
}

.entry-content h4 {
	font: 400 20px/1.25 var(--display);
	margin-top: 32px;
}

.entry-content a {
	color: var(--lapis);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--t);
}

.entry-content a:hover { color: var(--ink); }

.entry-content ul,
.entry-content ol { padding-left: 1.2em; }

.entry-content li { margin-bottom: .5em; }

.entry-content li::marker { color: var(--lapis); }

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font: 400 15px/1.5 var(--ui);
}

/* Core's wp-block-styles draws a 1px box on every cell. Reset it first, then put
   back only the two rules the design asks for. */
.entry-content .wp-block-table td,
.entry-content .wp-block-table th,
.entry-content table td,
.entry-content table th {
	border: 0;
	border-bottom: 1px solid var(--hairline);
	padding: 10px 16px 10px 0;
	text-align: left;
	vertical-align: top;
}

.entry-content .wp-block-table thead th,
.entry-content table thead th {
	color: var(--lapis);
	font-weight: 600;
	border-bottom: 1px solid var(--gold);
}

.entry-content .wp-block-table tbody tr:last-child td,
.entry-content table tbody tr:last-child td { border-bottom: 0; }

/* Wide content must scroll inside its own box, never widen the page. */
.entry-content .wp-block-table { overflow-x: auto; }

.entry-content blockquote,
.entry-content .wp-block-quote {
	text-align: center;
	font: 400 24px/1.35 var(--display);
	border: 0;
	padding: 0;
	margin-block: 40px;
}

.entry-content blockquote::before {
	content: "\2726";
	display: block;
	font-family: var(--ui);
	font-size: 14px;
	line-height: 1;
	color: var(--gold);
	margin-bottom: 14px;
}

.entry-content blockquote cite,
.entry-content blockquote .wp-block-quote__citation {
	display: block;
	margin-top: 14px;
	font: 400 12px/1.4 var(--ui);
	font-style: normal;
	color: var(--muted);
}

.entry-content figure { margin-block: 32px; }

.entry-content figcaption,
.entry-content .wp-element-caption {
	font: 400 12px/1.4 var(--ui);
	color: var(--muted);
	text-align: center;
	margin-top: 10px;
}

.entry-content hr,
.entry-content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--rule-gold);
	margin-block: 40px;
}

.entry-content .wp-block-separator.is-style-ornament {
	border: 0;
	text-align: center;
	height: auto;
}

.entry-content .wp-block-separator.is-style-ornament::before {
	content: "\2726";
	color: var(--gold);
	font-size: 14px;
}

.entry-content .alignwide {
	width: 1168px;
	max-width: calc(100vw - var(--gutter) * 2);
	margin-inline: calc(50% - min(584px, 50vw - var(--gutter)));
}

.entry-content .alignfull {
	width: auto;
	max-width: none;
	margin-inline: calc(var(--gutter) - 50vw + 50%);
}

.entry-content .aligncenter { margin-inline: auto; }

/* Note box, the pattern the writers use for visa steps and safety notes. */
.entry-content .wp-block-group.is-style-note,
.editor-styles-wrapper .wp-block-group.is-style-note {
	background: var(--ivory);
	border: 1px solid var(--gold);
	padding: 20px 24px;
}

.entry-content .wp-block-group.is-style-note > *:first-child { margin-top: 0; }
.entry-content .wp-block-group.is-style-note > *:last-child { margin-bottom: 0; }

.entry-content .wp-block-group.is-style-note h2,
.entry-content .wp-block-group.is-style-note h3,
.entry-content .wp-block-group.is-style-note h4 {
	font: 500 11px/1.4 var(--ui);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lapis);
	border: 0;
	padding: 0;
	margin-top: 0;
	margin-bottom: 12px;
}

.entry-content .wp-block-group.is-style-lapis {
	background-color: var(--lapis);
	background-image: var(--lattice-lapis);
	color: var(--ivory);
	padding: 24px 28px;
}

.entry-content .wp-block-group.is-style-lapis a { color: var(--gold-light); }

.entry-content .wp-block-list.is-style-checklist {
	list-style: none;
	padding-left: 0;
}

.entry-content .wp-block-list.is-style-checklist li {
	position: relative;
	padding-left: 1.6em;
}

.entry-content .wp-block-list.is-style-checklist li::before {
	content: "\2726";
	position: absolute;
	left: 0;
	top: .1em;
	color: var(--gold);
	font-size: .8em;
}

.entry-content .wp-block-image.is-style-arch img {
	border-radius: 50% 50% 0 0 / 38.2% 38.2% 0 0;
}

.entry-content .wp-block-button__link { border-radius: 0; }

/* --------------------------------------------------------- Post nav */

.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 40px;
	font: 500 12px/1 var(--ui);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding-block: 40px 64px;
	border-top: 1px solid var(--hairline);
}

.post-nav__col { min-width: 0; }

.post-nav__col--next { text-align: right; }

.post-nav__label {
	display: block;
	font: 500 11px/1 var(--ui);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 10px;
}

.post-nav__link {
	font: 400 20px/1.25 var(--display);
	text-decoration: none;
	transition: color var(--t);
	text-wrap: pretty;
}

.post-nav__link:hover { color: var(--lapis); }

/* ------------------------------------------------------- Pagination */

.pagination { padding-block: 8px 72px; }

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	list-style: none;
	font: 500 12px/1 var(--ui);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.pagination__item .page-numbers {
	display: grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding-inline: 8px;
	text-decoration: none;
	color: var(--ink);
	transition: color var(--t), background-color var(--t);
}

.pagination__item .page-numbers:hover { color: var(--lapis); }

.pagination__item .page-numbers.current {
	background: var(--lapis);
	color: var(--ivory);
}

.pagination__item .page-numbers.dots { color: var(--muted); }

/* -------------------------------------------------- 404 / empty state */

.notfound {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding-block: 72px 56px;
}

.notfound__code {
	font: 500 12px/1 var(--ui);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lapis);
}

.notfound__title { font: 400 56px/1.05 var(--display); letter-spacing: -.01em; text-wrap: balance; }

.notfound__sub {
	font: 400 19px/1.5 var(--ui);
	color: var(--muted);
	max-width: 560px;
	text-wrap: pretty;
}

.notfound__search { width: min(560px, 100%); margin-top: 8px; }

.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
	padding-block: 56px 72px;
}

.empty__text {
	font: 400 19px/1.5 var(--ui);
	color: var(--muted);
	max-width: 560px;
	text-wrap: pretty;
}

.empty__links {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 500 12px/1 var(--ui);
	letter-spacing: .2em;
	text-transform: uppercase;
}

.empty__links a { text-decoration: none; color: var(--lapis); }

.empty__links a:hover { text-decoration: underline; }

.sep { color: var(--gold); }

.empty__search { width: min(560px, 100%); }

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

.site-footer {
	background-color: var(--lapis);
	background-image: var(--lattice-footer);
	color: var(--ivory);
	margin-top: auto;
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
	padding-block: 48px 40px;
}

.site-footer__name { font: 400 30px/1 var(--display); }

.site-footer__tagline {
	font: 400 14px/1.5 var(--ui);
	opacity: .85;
	max-width: 560px;
	text-wrap: pretty;
}

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* 14px, not the comp's 10px: an 11px line with a 24px hit area needs 13px of
	   clearance before neighbouring rows start overlapping each other. */
	gap: 14px 22px;
	list-style: none;
	margin-top: 8px;
	font: 500 11px/1 var(--ui);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.site-footer__list a {
	text-decoration: none;
	transition: color var(--t);
}

.site-footer__list a:hover { color: var(--gold-light); }

.site-footer__colophon {
	font: 400 12px/1.4 var(--ui);
	opacity: .7;
	margin-top: 10px;
}

/* ------------------------------------------------------- Breakpoints */

@media (max-width: 1099px) {
	:root { --gutter: 40px; }

	.hero__trio {
		grid-template-columns: 1fr 400px 1fr;
		gap: 32px;
	}

	.arch { max-width: 400px; }

	.hero__title { font-size: 64px; }
}

@media (max-width: 899px) {
	:root { --gutter: 28px; }

	.hero__trio {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		align-items: start;
	}

	.arch {
		grid-column: 1 / -1;
		order: -1;
		max-width: 382px;
		margin-bottom: 8px;
	}

	.hero__title { font-size: 56px; }

	.section__title,
	.page-head__title,
	.entry__title,
	.notfound__title { font-size: 40px; }

	.entry-content h2 { font-size: 32px; }

	.card-grid,
	.card-grid--archive,
	.card-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.card-grid--split .card:nth-child(n + 4) { border-bottom: 1px solid var(--hairline); }
	.card-grid--split .card:nth-last-child(-n + 2) { border-bottom: 0; }

	/* The inline nav is replaced by the Menu button. These rules are keyed to
	   .nav-ready, which nav.js adds only once the panel is actually wired up — so
	   if that file fails to load the inline nav stays visible rather than leaving
	   the header with no navigation at all. */
	.nav-ready .primary-nav__list { display: none; }
	.nav-ready .nav-toggle:not([hidden]) { display: block; }
	.nav-ready .primary-nav { justify-content: flex-end; }
	.nav-ready .site-header--tall .primary-nav { justify-content: center; }

	.utility__tagline { display: none; }

	.utility__row { justify-content: flex-end; }
}

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

	.hero__trio { grid-template-columns: 1fr; }

	.arch { max-width: 322px; }

	.hero__title { font-size: 44px; }

	.masthead__wordmark { font-size: 34px; }

	.section__title,
	.page-head__title,
	.entry__title,
	.notfound__title { font-size: 32px; }

	.page-head__title--search { font-size: 28px; }

	.entry-content h2 { font-size: 28px; margin-top: 44px; }

	.card-grid,
	.card-grid--archive,
	.card-grid--three { grid-template-columns: 1fr; gap: 0; }

	.card-grid--archive,
	.card-grid--three { gap: 0; }

	.card-grid--archive .card,
	.card-grid--three .card { border-bottom: 1px solid var(--hairline); }

	.card-grid--archive .card:last-child,
	.card-grid--three .card:last-child { border-bottom: 0; }

	.card-grid--split .card:nth-last-child(-n + 2) { border-bottom: 1px solid var(--hairline); }
	.card-grid--split .card:last-child { border-bottom: 0; }

	.tile__lapis { padding: 16px; }

	/* Two columns at this width leave the caption plate about 150px of text.
	   Side by side, a three-word category name wraps to three lines and the plate
	   swallows half the tile, so stack the name over the count and give the name
	   the full width. */
	.tile__plate {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		padding: 10px 12px;
	}

	.tile__plate-name { font-size: 16px; line-height: 1.15; }

	.tile__plate-count { font-size: 10px; }

	/* The tagline is hidden here; without this the lone Search control would slide
	   to the left of the row. */
	.utility__row { justify-content: flex-end; }

	.post-nav { grid-template-columns: 1fr; gap: 28px; }

	.post-nav__col--next { text-align: left; }

	.search-form { flex-wrap: wrap; }

	.search-form__field { flex-basis: 100%; }

	.search-form__submit { margin-top: -1px; width: 100%; }
}

/* ---------------------------------------------- Motion and print */

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

	.tile:hover .tile__image,
	.card__link:hover .card__image,
	.arch__link:hover .arch__img { transform: none; }
}

@media print {
	body { background: #fff; color: #000; }

	.site-header,
	.site-footer,
	.mobile-panel,
	.search-panel,
	.pagination,
	.post-nav,
	.section--related,
	.skip-link { display: none !important; }

	.entry__body { max-width: none; }
}