/*
Theme Name: Al Tourath
Theme URI: https://altourath.com
Author: Al Tourath
Description: A calm, well typeset classic theme for Al Tourath. Presentation only, all content and settings live in the al-tourath-core plugin, so this theme can be replaced without the client losing anything.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: al-tourath
Tags: custom-menu, translation-ready, accessibility-ready
*/

/* ==========================================================================
   1. Tokens

   The whole look is retargetable by editing this block alone. Nothing
   below hard codes a colour, a family or a spacing value.

   Three tokens are derived rather than taken straight from the brand
   palette, each because the brand value fails WCAG AA in one specific
   role. The brand values themselves are still present and still carry
   the identity, the derivatives only cover the failing case:

     --terracotta   #B4522E, cream text on it measures 4.43:1, just
                    under the 4.5:1 floor for normal size text. Used
                    everywhere except filled buttons.
     --terracotta-deep  filled buttons only, 5.56:1 with cream.

     --ochre        #D69A45, only 2.2:1 on cream, so it is never text
                    on a light ground. It is a rule and a mark colour
                    there, and reaches 7.5:1 as text on ink, which is
                    where it is allowed to be text.

     --blue         #007BC2, 4.02:1 on cream. Passes the 3:1 floor for
                    non text UI, so it is the focus ring and the link
                    underline.
     --blue-deep    link text itself, 6.02:1 on cream.
   ========================================================================== */

:root {
	/* Brand palette, exactly as specified */
	--ink: #1A120B;
	--clay: #6B4A32;
	--terracotta: #B4522E;
	--ochre: #D69A45;
	--sand: #E7D8BE;
	--cream: #F7F0E3;
	--blue: #007BC2;

	/* AA safe derivatives, see the note above */
	--terracotta-deep: #9E4526;
	--blue-deep: #005F96;

	/* Surfaces and rules */
	--ground: var(--cream);
	--rule: 1px solid rgba(26, 18, 11, 0.16);
	--rule-strong: 1px solid rgba(26, 18, 11, 0.32);
	--rule-on-ink: 1px solid rgba(247, 240, 227, 0.18);

	/* Type. Two families only. Both are self hosted, see assets/fonts,
	   with a fallback stack that holds the layout if the font files are
	   not present yet. */
	--display: 'Marcellus', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
	--body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Type scale, hand tuned per role rather than a uniform ramp */
	--t-hero: clamp(2.4rem, 7vw, 4.75rem);
	--t-page: clamp(1.9rem, 4.6vw, 3.1rem);
	--t-section: clamp(1.5rem, 3.2vw, 2.15rem);
	--t-card: clamp(1.15rem, 2.2vw, 1.45rem);
	--t-body: 1rem;
	--t-small: 0.875rem;
	--t-label: 0.7rem;

	--tracking-label: 0.16em;
	--leading-tight: 1.12;
	--leading-body: 1.65;

	/* Spacing */
	--s-1: 0.5rem;
	--s-2: 0.875rem;
	--s-3: 1.25rem;
	--s-4: 2rem;
	--s-5: 3rem;
	--s-6: clamp(3.5rem, 8vw, 6rem);
	--s-7: clamp(5rem, 12vw, 9rem);

	--gutter: clamp(1.25rem, 5vw, 4rem);
	--measure: 68ch;
	--container: 78rem;
}

/* ==========================================================================
   2. Self hosted fonts

   Drop the .woff2 files into assets/fonts and these activate. Until
   then the fallback stacks above carry the page, which is why nothing
   here depends on the font actually loading. Both families are open
   licensed (SIL Open Font License), see assets/fonts/README.txt for
   exactly which files and where they come from.
   ========================================================================== */

@font-face {
	font-family: 'Marcellus';
	src: url('assets/fonts/marcellus-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--body);
	font-size: var(--t-body);
	font-weight: 300;
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 400;
	line-height: var(--leading-tight);
	margin: 0;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
}

/* Links inside running prose. Blue is rare on purpose, this is one of
   only two places it appears. */
.prose a,
.entry-content a {
	color: var(--blue-deep);
	text-decoration: underline;
	text-decoration-color: var(--blue);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.prose a:hover,
.entry-content a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ink);
	color: var(--cream);
	padding: 0.75rem 1.25rem;
	font-size: var(--t-small);
}

.skip-link:focus {
	left: 0;
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.wrap {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap-narrow {
	max-width: 52rem;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	padding-block: var(--s-6);
}

.section + .section {
	border-top: var(--rule);
}

.prose {
	max-width: var(--measure);
	color: var(--clay);
}

.prose h2,
.prose h3 {
	color: var(--ink);
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}

.prose > :first-child {
	margin-top: 0;
}

/* The only three spacing utilities in the theme. Everything else takes
   its rhythm from the component it belongs to. */
.stack-sm { margin-top: var(--s-3); }
.stack-md { margin-top: var(--s-5); }
.stack-lg { margin-top: var(--s-6); }

/* ==========================================================================
   5. Shared type devices
   ========================================================================== */

/* The epigraphic label. Ochre on a light ground would fail contrast as
   text, so on cream it is clay, and only turns ochre on ink. */
.eyebrow {
	font-family: var(--body);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--clay);
	margin: 0 0 var(--s-2);
}

.on-ink .eyebrow,
.site-footer .eyebrow {
	color: var(--ochre);
}

.section-head {
	margin-bottom: var(--s-5);
	max-width: 44ch;
}

.section-head h2 {
	font-size: var(--t-section);
}

.section-head p {
	margin-top: var(--s-2);
	color: var(--clay);
}

/* A section heading with a link pushed to the far end of the same rule */
.section-head-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--s-5);
	padding-bottom: var(--s-3);
	border-bottom: var(--rule);
}

.section-head-row h2 {
	font-size: var(--t-section);
}

/* ==========================================================================
   6. Buttons and inline actions
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.85rem 1.75rem;
	font-family: var(--body);
	font-size: var(--t-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-primary {
	background: var(--terracotta-deep);
	color: var(--cream);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--ink);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: rgba(26, 18, 11, 0.4);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
	border-color: var(--ink);
	background: rgba(26, 18, 11, 0.04);
}

.on-ink .btn-ghost {
	color: var(--cream);
	border-color: rgba(247, 240, 227, 0.45);
}

.on-ink .btn-ghost:hover {
	border-color: var(--cream);
	background: rgba(247, 240, 227, 0.1);
}

/* A text link that reads as an action, underlined in terracotta */
.link-action {
	display: inline-block;
	font-family: var(--body);
	font-size: var(--t-small);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--terracotta-deep);
	border-bottom: 1px solid var(--terracotta);
	padding-bottom: 0.15em;
}

.link-action:hover {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

.on-ink .link-action {
	color: var(--ochre);
	border-bottom-color: var(--ochre);
}

.on-ink .link-action:hover {
	color: var(--cream);
	border-bottom-color: var(--cream);
}

/* ==========================================================================
   7. Media placeholder

   No photography exists yet. Rather than an empty frame or a grey box,
   a missing image renders as a sand panel with the subject name set
   large in Marcellus and deliberately cropped by the frame, so it reads
   as a typographic choice rather than a broken asset.
   ========================================================================== */

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

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

.media-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 0 0.06em;
}

.media-placeholder span {
	font-family: var(--display);
	font-size: clamp(2.6rem, 12cqw, 6rem);
	line-height: 0.82;
	color: var(--ink);
	opacity: 0.22;
	white-space: nowrap;
	transform: translateY(0.1em);
}

.media-tall {
	aspect-ratio: 3 / 4;
}

.media-wide {
	aspect-ratio: 16 / 9;
}

/* Lets the placeholder type scale against its own frame rather than the
   viewport, so a small card crops as deliberately as a large one. */
.media {
	container-type: inline-size;
}

/* ==========================================================================
   8. Header
   ========================================================================== */

.site-header {
	border-bottom: var(--rule);
	background: var(--ground);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding-block: var(--s-3);
}

.brand {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	text-decoration: none;
	line-height: 1;
}

.brand-name {
	font-family: var(--display);
	font-size: 1.15rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
}

.brand-arabic {
	font-family: var(--display);
	font-size: 0.95rem;
	color: var(--clay);
}

.brand img {
	max-height: 44px;
	width: auto;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a {
	font-size: var(--t-small);
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--ink);
	padding-block: 0.35rem;
	border-bottom: 1px solid transparent;
}

.site-nav a:hover,
.site-nav .current-menu-item > a {
	border-bottom-color: var(--terracotta);
}

/* Below 800px the nav sits on its own row under the brand, still fully
   visible and thumb sized. No hamburger, there are only four links. */
@media (max-width: 800px) {
	.site-header-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-2);
	}

	.site-nav ul {
		gap: var(--s-3);
	}

	.site-nav a {
		padding-block: 0.5rem;
	}
}

/* ==========================================================================
   9. Hero
   ========================================================================== */

.hero {
	padding-block: var(--s-7) var(--s-6);
	border-bottom: var(--rule);
}

.hero-inner {
	display: grid;
	gap: var(--s-5);
}

.hero h1 {
	font-size: var(--t-hero);
	max-width: 16ch;
}

.hero-lede {
	max-width: 46ch;
	color: var(--clay);
	font-size: 1.0625rem;
	margin-top: var(--s-3);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-4);
}

/* A compact set of facts under the hero, separated by rules rather than
   sat in boxes. */
.hero-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--s-3);
	margin-top: var(--s-5);
	padding-top: var(--s-4);
	border-top: var(--rule);
}

.hero-fact dt {
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--clay);
	margin-bottom: 0.35rem;
}

.hero-fact dd {
	margin: 0;
	font-family: var(--display);
	font-size: 1.5rem;
	color: var(--ink);
}

@media (min-width: 900px) {
	.hero-inner {
		grid-template-columns: 1.15fr 1fr;
		align-items: end;
	}

	.hero-facts {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   10. Cards and grids
   ========================================================================== */

.grid {
	display: grid;
	gap: var(--s-4);
}

.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 620px) {
	.grid-2 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
	.grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
	.grid-3 { grid-template-columns: repeat(3, 1fr); }
	.grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Cards are rules and space, never boxes or shadows. */
.card {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	text-decoration: none;
	color: inherit;
}

.card .media {
	margin-bottom: var(--s-1);
}

.card-meta {
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--clay);
	margin: 0;
}

.card h3 {
	font-size: var(--t-card);
}

.card-excerpt {
	color: var(--clay);
	font-size: var(--t-small);
	margin: 0;
}

.card-facts {
	margin-top: auto;
	padding-top: var(--s-2);
	border-top: var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var(--s-3);
	align-items: baseline;
	font-size: var(--t-small);
	color: var(--clay);
}

.card-price {
	color: var(--ink);
	font-weight: 500;
	margin-left: auto;
}

.card:hover h3 {
	color: var(--terracotta-deep);
}

.card:hover .media img {
	opacity: 0.92;
}

/* A shore that is not live yet: dimmed and not a link. Disabled and
   inactive components are exempt from the text contrast minimum, which
   is what the dimming relies on. */
.card-soon {
	opacity: 0.62;
}

.tag {
	display: inline-block;
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3em 0.7em;
	border: 1px solid currentColor;
	color: var(--clay);
}

.tag-open { color: var(--terracotta-deep); }
.tag-limited { color: var(--terracotta-deep); }
.tag-waitlist { color: var(--clay); }
.tag-closed { color: var(--clay); }

/* ==========================================================================
   11. Filters, journey archive
   ========================================================================== */

.filters {
	border-block: var(--rule);
	padding-block: var(--s-3);
	margin-bottom: var(--s-5);
}

.filter-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	align-items: baseline;
	padding-block: var(--s-1);
}

.filter-group + .filter-group {
	margin-top: var(--s-2);
	padding-top: var(--s-3);
	border-top: var(--rule);
}

.filter-label {
	flex: 0 0 100%;
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--clay);
	margin-bottom: 0.35rem;
}

@media (min-width: 760px) {
	.filter-label {
		flex: 0 0 7.5rem;
		margin-bottom: 0;
	}
}

.filter-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.4rem 0.95rem;
	font-size: var(--t-small);
	text-decoration: none;
	color: var(--ink);
	border: 1px solid rgba(26, 18, 11, 0.28);
}

.filter-link:hover {
	border-color: var(--ink);
}

.filter-link[aria-current="true"] {
	background: var(--terracotta-deep);
	border-color: var(--terracotta-deep);
	color: var(--cream);
}

.results-count {
	font-size: var(--t-small);
	color: var(--clay);
	margin-bottom: var(--s-4);
}

/* ==========================================================================
   12. Single journey
   ========================================================================== */

.journey-header {
	padding-block: var(--s-6) var(--s-5);
}

.journey-header h1 {
	font-size: var(--t-page);
	max-width: 18ch;
}

.journey-lede {
	max-width: var(--measure);
	color: var(--clay);
	margin-top: var(--s-3);
	font-size: 1.0625rem;
}

/* Practical facts as a definition list on rules, not a table of boxes */
.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: var(--s-3);
	margin: var(--s-5) 0 0;
	padding-top: var(--s-4);
	border-top: var(--rule-strong);
}

.fact dt {
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--clay);
	margin-bottom: 0.35rem;
}

.fact dd {
	margin: 0;
	font-family: var(--display);
	font-size: 1.35rem;
}

.journey-layout {
	display: grid;
	gap: var(--s-6);
	padding-block: var(--s-6);
}

@media (min-width: 980px) {
	.journey-layout {
		grid-template-columns: 1fr 20rem;
		align-items: start;
	}

	.journey-aside {
		position: sticky;
		top: var(--s-4);
	}
}

.highlights {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s-2);
}

.highlights li {
	padding-left: 1.5rem;
	position: relative;
	color: var(--clay);
}

.highlights li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 0.6rem;
	height: 1px;
	background: var(--terracotta);
}

/* The itinerary is the one place a numbered sequence is truthful, the
   days genuinely run in order, so the day number is the structure. */
.itinerary {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: day;
}

.itinerary-day {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: var(--s-3);
	padding-block: var(--s-3);
	border-top: var(--rule);
}

.itinerary-day:last-child {
	border-bottom: var(--rule);
}

.itinerary-number {
	font-family: var(--display);
	font-size: 1.5rem;
	color: var(--terracotta);
	line-height: 1;
	padding-top: 0.1em;
}

.itinerary-number small {
	display: block;
	font-family: var(--body);
	font-size: var(--t-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--clay);
	margin-bottom: 0.25rem;
}

.itinerary-body h3 {
	font-size: 1.15rem;
	margin-bottom: 0.35rem;
}

.itinerary-body p {
	color: var(--clay);
	margin: 0;
	font-size: var(--t-small);
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-2);
	margin-top: var(--s-4);
}

@media (min-width: 760px) {
	.gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Booking panel in the aside */
.booking-panel {
	border: var(--rule-strong);
	padding: var(--s-4);
}

.booking-price {
	font-family: var(--display);
	font-size: 2rem;
	line-height: 1;
}

.booking-price small {
	display: block;
	font-family: var(--body);
	font-size: var(--t-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--clay);
	margin-bottom: 0.4rem;
}

.booking-panel dl {
	margin: var(--s-3) 0;
	padding-top: var(--s-3);
	border-top: var(--rule);
	display: grid;
	gap: var(--s-2);
}

.booking-panel dl > div {
	display: flex;
	justify-content: space-between;
	gap: var(--s-2);
	font-size: var(--t-small);
}

.booking-panel dt {
	color: var(--clay);
}

.booking-panel dd {
	margin: 0;
	text-align: right;
}

.booking-panel .btn {
	width: 100%;
	margin-top: var(--s-2);
}

/* ==========================================================================
   13. Enquiry form
   ========================================================================== */

.enquiry {
	background: var(--ink);
	color: var(--cream);
}

.enquiry .section-head h2,
.enquiry h2 {
	color: var(--cream);
}

.enquiry .section-head p {
	color: var(--sand);
}

.form-grid {
	display: grid;
	gap: var(--s-3);
	max-width: 40rem;
}

@media (min-width: 700px) {
	.form-row-2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--s-3);
	}
}

.field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.field label {
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.enquiry .field label {
	color: var(--sand);
}

.field input,
.field select,
.field textarea {
	font-family: var(--body);
	font-size: var(--t-body);
	font-weight: 300;
	min-height: 48px;
	padding: 0.6rem 0.75rem;
	border-radius: 0;
	border: 1px solid rgba(26, 18, 11, 0.35);
	background: transparent;
	color: var(--ink);
}

.enquiry .field input,
.enquiry .field select,
.enquiry .field textarea {
	border-color: rgba(247, 240, 227, 0.35);
	color: var(--cream);
}

.enquiry .field select option {
	color: var(--ink);
}

.field textarea {
	min-height: 8rem;
	resize: vertical;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
	border-color: var(--terracotta);
	border-width: 2px;
}

.field-error {
	font-size: var(--t-small);
	font-weight: 500;
	color: var(--terracotta);
	margin: 0;
}

.enquiry .field-error {
	color: var(--ochre);
}

/* Honeypot. Hidden from sight and from assistive technology, but still
   submitted, so a bot that fills every field gives itself away. */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	padding: var(--s-3);
	margin-bottom: var(--s-4);
	max-width: 40rem;
	border: 1px solid currentColor;
}

.form-notice h2,
.form-notice p:first-child {
	margin-top: 0;
}

.form-notice ul {
	margin: 0.5rem 0 0;
	padding-left: 1.2rem;
}

.form-notice a {
	color: inherit;
}

.notice-error {
	color: var(--ochre);
}

.notice-success {
	color: var(--sand);
}

/* ==========================================================================
   14. Journal
   ========================================================================== */

.journal-entry-head {
	padding-block: var(--s-6) var(--s-4);
	border-bottom: var(--rule);
}

.journal-entry-head h1 {
	font-size: var(--t-page);
	max-width: 20ch;
}

.journal-meta {
	font-size: var(--t-small);
	color: var(--clay);
	margin-top: var(--s-2);
}

.journal-body {
	padding-block: var(--s-5);
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

.site-footer {
	background: var(--ink);
	color: var(--sand);
	padding-block: var(--s-6) var(--s-4);
	margin-top: var(--s-6);
}

.site-footer a {
	color: var(--sand);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--cream);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.footer-top {
	display: grid;
	gap: var(--s-5);
	padding-bottom: var(--s-5);
	border-bottom: var(--rule-on-ink);
}

@media (min-width: 760px) {
	.footer-top {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.footer-brand .brand-name {
	color: var(--cream);
	font-size: 1.35rem;
}

.footer-brand p {
	color: var(--sand);
	max-width: 32ch;
	margin-top: var(--s-2);
	font-size: var(--t-small);
}

.footer-col h2 {
	font-family: var(--body);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--ochre);
	margin-bottom: var(--s-2);
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
	font-size: var(--t-small);
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-4);
	justify-content: space-between;
	padding-top: var(--s-4);
	font-size: var(--t-label);
	letter-spacing: 0.04em;
	color: rgba(231, 216, 190, 0.72);
}

/* ==========================================================================
   16. Pagination and 404
   ========================================================================== */

.pagination {
	margin-top: var(--s-6);
	padding-top: var(--s-4);
	border-top: var(--rule);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6rem;
	text-decoration: none;
	color: var(--ink);
}

.pagination .page-numbers.current {
	background: var(--terracotta-deep);
	color: var(--cream);
}

.error-404 {
	padding-block: var(--s-7);
	text-align: left;
}

.error-404 h1 {
	font-size: var(--t-page);
	max-width: 18ch;
}

/* ==========================================================================
   17. Motion

   Hover states and nothing else, per the brief. The only transitions in
   this stylesheet are on colour, and even those are dropped when the
   visitor has asked for reduced motion.
   ========================================================================== */

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