/* ==========================================================================
   Egittosì — Base
   Reset · document · typography scale · links · focus · selection · prose
   Mobile-first; tokens from tokens.css only.
   ========================================================================== */

/* Reset ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-padding-block-start: calc(var(--header-h-compact) + var(--space-4));
}

html.motion-ok {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	background-color: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul, pre {
	margin: 0;
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
	padding: 0;
}

img,
picture,
video,
canvas {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

svg {
	max-width: 100%;
}

.icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
	cursor: not-allowed;
}

textarea {
	resize: vertical;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

[hidden] {
	display: none;
}

address {
	font-style: normal;
}

/* Typography --------------------------------------------------------------- */

h1, h2, h3,
.display, .h1, .h2, .h3 {
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	line-height: var(--lh-heading);
	letter-spacing: var(--tracking-display);
	color: var(--c-heading);
	font-variant-numeric: lining-nums;
	text-wrap: balance;
}

.display {
	font-size: var(--fs-display);
	line-height: var(--lh-tight);
}

h1,
.h1 {
	font-size: var(--fs-h1);
	line-height: 1.04;
}

h2,
.h2 {
	font-size: var(--fs-h2);
}

h3,
.h3 {
	font-size: var(--fs-h3);
	line-height: 1.16;
}

/* Below 26px the display face gives way to Jost for legibility. */
h4,
.h4 {
	font-family: var(--font-sans);
	font-size: var(--fs-h4);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	letter-spacing: 0;
	color: var(--c-heading);
	text-wrap: balance;
}

h5,
h6 {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--c-heading);
}

/* Heading accent: italic gold <em>. */
:is(h1, h2, h3, .display, .h1, .h2, .h3) em {
	font-style: italic;
	font-weight: var(--fw-medium);
	color: var(--c-gold-700);
}

p {
	text-wrap: pretty;
}

strong,
b {
	font-weight: var(--fw-semibold);
}

small {
	font-size: var(--fs-small);
}

.lead {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--c-text-soft);
}

.text-muted {
	color: var(--c-text-muted);
}

hr {
	height: 1px;
	margin-block: var(--space-7);
	border: 0;
	background-color: var(--c-border);
}

/* Links -------------------------------------------------------------------- */

a {
	color: var(--c-link);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	transition:
		color var(--dur-micro) var(--ease-soft),
		text-decoration-color var(--dur-micro) var(--ease-soft);
}

a:hover {
	color: var(--c-nile-500);
	text-decoration-color: currentColor;
}

/* Focus & selection ---------------------------------------------------------- */

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

:focus:not(:focus-visible) {
	outline: none;
}

:is(.section--navy, .site-footer, .page-hero--image, .wa-cta--navy) :focus-visible,
.site-header--overlay-light:not(.is-scrolled) :focus-visible {
	outline-color: var(--c-gold-300);
}

::selection {
	background-color: var(--c-gold-300);
	color: var(--c-nile-950);
}

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

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

.skip-link {
	position: fixed;
	inset-block-start: var(--space-3);
	inset-inline-start: var(--space-3);
	z-index: calc(var(--z-cursor) + 1);
	padding: 0.85rem 1.25rem;
	background-color: var(--c-nile-900);
	color: var(--c-white);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
	text-decoration: none;
	transform: translateY(calc(-100% - var(--space-6)));
	transition: transform var(--dur-ui) var(--ease-out);
}

.skip-link:focus {
	transform: none;
	color: var(--c-white);
	outline-color: var(--c-gold-300);
}

/* Prose (block & classic content) ------------------------------------------ */

.prose {
	color: var(--c-text);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.prose::after {
	content: "";
	display: table;
	clear: both;
}

.prose > * + * {
	margin-block-start: 1.3em;
}

.prose > :where(h2, h3, h4, h5, h6) {
	margin-block-start: 2.1em;
}

.prose > :where(h2, h3, h4, h5, h6) + * {
	margin-block-start: 0.8em;
}

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

.prose h2 {
	font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
}

.prose h3 {
	font-size: clamp(1.5rem, 1.36rem + 0.6vw, 1.875rem);
}

.prose > p:first-child:not(.has-drop-cap) {
	font-size: var(--fs-lead);
	color: var(--c-text-soft);
}

.prose :where(ul, ol) {
	padding-inline-start: 1.3em;
}

.prose li + li {
	margin-block-start: 0.45em;
}

.prose li > :where(ul, ol) {
	margin-block-start: 0.45em;
}

.prose ul > li::marker {
	color: var(--c-gold-500);
}

.prose ol > li::marker {
	color: var(--c-gold-700);
	font-weight: var(--fw-semibold);
}

.prose :where(blockquote, .wp-block-quote) {
	margin-inline: 0;
	padding-inline-start: var(--space-5);
	border-inline-start: 1px solid var(--c-gold-500);
	color: var(--c-heading);
	font-family: var(--font-display);
	font-size: clamp(1.625rem, 1.45rem + 0.8vw, 2.125rem);
	font-style: italic;
	line-height: 1.35;
}

.prose :where(blockquote, .wp-block-quote) p + p {
	margin-block-start: 0.6em;
}

.prose :where(blockquote, .wp-block-quote, .wp-block-pullquote) cite {
	display: block;
	margin-block-start: var(--space-4);
	color: var(--c-text-muted);
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-style: normal;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.prose .wp-block-pullquote {
	padding-block: var(--space-7);
	border-block: 1px solid var(--c-gold-500);
	text-align: center;
}

.prose .wp-block-pullquote blockquote {
	padding: 0;
	border: 0;
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
}

.prose :where(figure) {
	margin-inline: 0;
}

.prose img {
	border-radius: var(--radius-xs);
}

.prose :where(figcaption, .wp-element-caption) {
	margin-block-start: 0.8em;
	color: var(--c-text-muted);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.prose > .alignwide {
	width: min(100vw - 2 * var(--gutter), 1120px);
	max-width: none;
	margin-inline: calc(50% - min(50vw - var(--gutter), 560px));
}

.prose > .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.prose .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.prose .alignleft,
.prose .alignright {
	margin-block: 0.35em var(--space-4);
}

@media (min-width: 768px) {
	.prose .alignleft,
	.prose .alignright {
		max-width: 50%;
	}

	.prose .alignleft {
		float: left;
		margin-inline-end: var(--space-5);
	}

	.prose .alignright {
		float: right;
		margin-inline-start: var(--space-5);
	}
}

.prose :where(table) {
	width: 100%;
	font-size: var(--fs-small);
}

.prose :where(th, td) {
	padding: 0.8em 1em;
	border-block-end: 1px solid var(--c-border);
	text-align: start;
	vertical-align: top;
}

.prose th {
	color: var(--c-heading);
	font-weight: var(--fw-semibold);
}

.prose .wp-block-table {
	overflow-x: auto;
}

.prose :where(code, kbd, samp) {
	padding: 0.1em 0.35em;
	border-radius: var(--radius-xs);
	background-color: var(--c-ivory-2);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88em;
}

.prose pre {
	padding: var(--space-4) var(--space-5);
	overflow-x: auto;
	border-radius: var(--radius-sm);
	background-color: var(--c-ivory-2);
	font-size: var(--fs-small);
}

.prose pre code {
	padding: 0;
	background: none;
}

.prose :where(hr, .wp-block-separator) {
	width: 64px;
	height: 1px;
	margin-block: var(--space-7);
	margin-inline: auto;
	border: 0;
	background-color: var(--c-gold-500);
}

.prose .wp-block-separator.is-style-wide {
	width: 100%;
	background-color: var(--c-border-strong);
}

.prose dt {
	color: var(--c-heading);
	font-weight: var(--fw-semibold);
}

.prose dd + dt {
	margin-block-start: 0.8em;
}

.prose .has-drop-cap:not(:focus)::first-letter {
	float: left;
	margin: 0.06em 0.12em 0 0;
	color: var(--c-gold-700);
	font-family: var(--font-display);
	font-size: 4.4em;
	font-weight: var(--fw-medium);
	line-height: 0.82;
}

.prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--c-nile-900);
	border-radius: var(--radius-xs);
	background-color: var(--c-nile-900);
	color: var(--c-white);
	font-size: var(--fs-button);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-button);
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}

.prose .wp-block-button__link:hover {
	background-color: var(--c-nile-700);
	color: var(--c-white);
}

.prose .is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--c-nile-900);
}

.prose .is-style-outline .wp-block-button__link:hover {
	background-color: var(--c-nile-900);
	color: var(--c-white);
}

.prose :where(iframe, video, .wp-block-embed__wrapper) {
	max-width: 100%;
}

.prose .wp-block-embed iframe {
	width: 100%;
}

.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-block-start: var(--space-7);
	font-size: var(--fs-small);
}

.page-links__title {
	margin-inline-end: var(--space-2);
	color: var(--c-text-muted);
}

.page-links a,
.page-links > .page-links__item {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--radius-xs);
	text-decoration: none;
}
