/*
 * Fort Nami layout primitives.
 *
 * Tokens come from theme.json (var(--wp--preset--*) and var(--wp--custom--*)).
 * Mobile first. Breakpoints: 768px (tablet), 1024px (desktop), 1440px (wide).
 */

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

html {
	scroll-padding-top: var(--wp--custom--header-height);
}

body {
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizelegibility;
}

a {
	text-decoration-thickness: var(--wp--custom--hairline);
	text-underline-offset: 0.15em;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--rule-width) solid var(--wp--preset--color--lagoon);
	outline-offset: 2px;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

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

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/*
 * Left-aligned measure. Core constrained layout centres every narrower
 * child with `margin-left: auto !important`. DESIGN.md §5 wants everything
 * left-aligned on the wide grid, so the start margin is pinned to the wide
 * container's left edge. !important overrides that core layout rule, which
 * is itself !important.
 */
.is-layout-constrained > :where(:not(.alignleft, .alignright, .alignfull, .alignwide)) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
}

.is-layout-constrained > :where(p, ul, ol) {
	max-width: min(var(--wp--custom--measure), var(--wp--style--global--content-size));
}

/*
 * Header, main and footer meet edge to edge: sections carry their own padding, and a gap
 * here shows as a strip of page background above the hero and below a final image break.
 */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

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

.fortnami-header {
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: var(--wp--custom--hairline) solid var(--wp--preset--color--reef);
}

.fortnami-header .wp-block-site-title {
	display: flex;
	margin: 0;
	line-height: var(--wp--custom--line-height--sub-section);
}

.fortnami-header .wp-block-site-title a {
	min-height: 44px;
}

/* ----- Logo: the Le Morne mark before the company name (fortnami_render_site_title_mark) ----- */

.wp-block-site-title a {
	display: inline-flex;
	gap: 0.4em;
	align-items: center;
}

.fortnami-mark {
	flex: none;
	width: 1.5em;
	height: 1.5em;
}

.fortnami-mark__water {
	fill: var(--wp--preset--color--lagoon);
}

/* The glint on the water is cut from the ground the mark sits on. */
.fortnami-mark__glint {
	fill: var(--wp--preset--color--limestone);
}

.fortnami-footer .fortnami-mark__glint {
	fill: var(--wp--preset--color--deep);
}

.fortnami-nav .wp-block-navigation__container {
	gap: 0 var(--wp--preset--spacing--40);
}

/*
 * Below tablet width the wordmark and the contact button share the first row and the nav takes
 * its own row under them, so the header has one known height per breakpoint. The homepage hero
 * pads for it (--fortnami-header-offset).
 */
.fortnami-nav {
	flex-basis: 100%;
	order: 3;
}

.fortnami-header__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--small);
	text-decoration: none;
}

/* The mark widens the wordmark: below 400px the name and the button tighten so both keep one row. */
@media (max-width: 399px) {

	.fortnami-header .wp-block-site-title {
		font-size: var(--wp--preset--font-size--body);
	}

	.fortnami-header__cta .wp-block-button__link {
		padding-inline: var(--wp--preset--spacing--20);
	}
}

:root {
	--fortnami-header-offset: calc(2 * var(--wp--preset--spacing--30) + 2 * 44px + var(--wp--preset--spacing--20) + var(--wp--custom--hairline));
}

@media (min-width: 768px) {

	:root {
		--fortnami-header-offset: calc(2 * var(--wp--preset--spacing--30) + 44px + var(--wp--custom--hairline));
	}

	.fortnami-header {
		column-gap: var(--wp--preset--spacing--50);
	}

	.fortnami-header .fortnami-mark {
		width: 1.8em;
		height: 1.8em;
	}

	/* Wordmark left; the nav and the contact button together on the right. The extra class
	   outweighs core's `body .is-layout-flex > * { margin: 0 }`. */
	.fortnami-header .fortnami-nav {
		flex-basis: auto;
		order: 0;
		margin-inline-start: auto;
	}
}

/*
 * Homepage: the header lies over the sky of the hero photograph, transparent, and scrolls away
 * with it. On desktop, where scroll-driven animations are supported and motion is allowed, it is
 * fixed and fills with limestone as the page scrolls (see Motion below).
 */
.home .wp-site-blocks > header.wp-block-template-part {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0);
	right: 0;
	left: 0;
	z-index: 10;
	border-bottom: var(--wp--custom--hairline) solid transparent;
	background-color: transparent;
}

.home .fortnami-header {
	border-bottom-color: transparent;
}

/* Lagoon is under 3:1 on the pale sky; rings over the hero photograph are deep. */
.home header :where(a, button):focus-visible,
.fortnami-hero :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--deep);
}

/*
 * The header nav and the footer's legal links are set apart by their place, so they are not
 * underlined. A bar under the label marks the current page and appears on hover and keyboard
 * focus: lagoon in the header, the link colour in the footer.
 */
.fortnami-nav .wp-block-navigation-item__content,
.fortnami-legal-nav .wp-block-navigation-item__content {
	display: inline-flex;
	position: relative;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

.fortnami-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--deep);
}

.fortnami-nav .wp-block-navigation-item__content::after,
.fortnami-legal-nav .wp-block-navigation-item__content::after {
	position: absolute;
	right: 0;
	bottom: var(--wp--preset--spacing--20);
	left: 0;
	height: var(--wp--custom--rule-width);
	background-color: var(--wp--preset--color--lagoon);
	content: "";
	transform: scaleX(0);
	transform-origin: left;
}

.fortnami-legal-nav .wp-block-navigation-item__content::after {
	background-color: currentcolor;
}

.fortnami-nav .current-menu-item > .wp-block-navigation-item__content::after,
.fortnami-nav .wp-block-navigation-item__content:hover::after,
.fortnami-nav .wp-block-navigation-item__content:focus-visible::after,
.fortnami-legal-nav .current-menu-item > .wp-block-navigation-item__content::after,
.fortnami-legal-nav .wp-block-navigation-item__content:hover::after,
.fortnami-legal-nav .wp-block-navigation-item__content:focus-visible::after {
	transform: none;
}

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

.fortnami-section {
	padding-block: var(--wp--custom--section-padding--mobile);
}

.fortnami-section > * + *,
.fortnami-marginalia > .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.fortnami-section h2 {
	margin-block: 0;
}

/* Adjacent sections share one padding step instead of stacking two. */
.fortnami-section + .fortnami-section {
	padding-block-start: 0;
}

.wp-block-post-content > .fortnami-section:first-child,
.fortnami-documents-wrap > .fortnami-section {
	padding-block-start: var(--wp--preset--spacing--60);
}

.fortnami-page-header {
	padding-block: var(--wp--custom--section-padding--mobile) 0;
}

.fortnami-page-header .wp-block-post-title {
	margin-block: 0;
}

/* ----- Marginalia: running text in cols 1-7, facts in cols 9-12 ----- */

.fortnami-marginalia.wp-block-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50) var(--wp--custom--gutter--mobile);
	margin-block: 0;
}

.fortnami-marginalia > .wp-block-column {
	min-width: 0;
}

/* A heading that starts a new topic inside a column gets clear space above it. */
.fortnami-marginalia > .wp-block-column > :is(h2, h3):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--60);
}

.fortnami-marginalia > .wp-block-column > figure:not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.fortnami-marginalia > .wp-block-column > p,
.fortnami-marginalia > .wp-block-column > ul,
.fortnami-marginalia > .wp-block-column > ol {
	max-width: var(--wp--custom--measure);
}

.fortnami-margin-note {
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--small);
}

.fortnami-margin-note p,
.fortnami-margin-note li {
	margin-block: 0;
}

.fortnami-margin-note strong {
	color: var(--wp--preset--color--deep);
	font-weight: 600;
}

.fortnami-margin-note ul {
	padding-left: 0;
	list-style: none;
}

/* ----- Hero: lagoon photograph with the statement and links centred in its sky, then the licence band ----- */

/*
 * The hero starts at the top of the page, under the transparent header, so its top padding
 * clears the header. Phones: the portrait photograph scales with the width, and its horizon lies
 * 1.542 widths from the top. The bottom padding stops the content box just above the horizon, so
 * the statement and links centre in the sky. At least 5rem of lagoon stays visible below it.
 */
.fortnami-hero.wp-block-cover {
	--fortnami-hero-height: max(34rem, calc(154.2vw + 5rem));
	min-height: var(--fortnami-hero-height);
	padding-block: calc(var(--fortnami-header-offset) + var(--wp--preset--spacing--40)) calc(var(--fortnami-hero-height) - 154.2vw + var(--wp--preset--spacing--40));
	align-items: center;
	background-color: var(--wp--preset--color--reef);
}

/* Crop from the top so the sky behind the statement is never cut away. */
.fortnami-hero .wp-block-cover__image-background {
	object-position: center top;
}

/* The smallest phones get a smaller statement so it ends above the mountain in the photograph. */
.fortnami-hero__statement {
	max-width: var(--wp--style--global--content-size);
	margin: 0;
	color: var(--wp--preset--color--deep);
	font-size: var(--wp--preset--font-size--section-title);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--display);
}

@media (min-width: 360px) {

	.fortnami-hero__statement {
		font-size: var(--wp--preset--font-size--display);
	}
}

/* The regulatory information button and the contact link, under the statement. */
.fortnami-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--40);
}

.fortnami-hero__actions > * {
	margin-block: 0;
}

/* Lagoon falls below 4.5:1 on the pale sky; the text link uses deep like the statement. */
.fortnami-hero__link a {
	color: var(--wp--preset--color--deep);
}

.fortnami-hero-base {
	padding-block: var(--wp--preset--spacing--40);
}

.fortnami-hero-base__inner > p {
	margin-block: 0;
}

/* ----- Icons: a lagoon line icon on a square tile (company record, homepage feature rows) ----- */

.fortnami-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--wp--preset--spacing--60);
	height: var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--limestone);
	color: var(--wp--preset--color--lagoon);
}

.fortnami-icon svg {
	width: var(--wp--preset--spacing--40);
	height: var(--wp--preset--spacing--40);
}

/* ----- Homepage feature rows: a photograph beside the text, alternating sides ----- */

.fortnami-feature__layout.wp-block-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50) var(--wp--custom--gutter--mobile);
	margin-block: 0;
}

.fortnami-feature__layout > .wp-block-column {
	min-width: 0;
}

.fortnami-feature-image {
	height: 100%;
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--reef);
}

.fortnami-feature-image picture {
	display: contents;
}

.fortnami-feature-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.fortnami-feature__body > * {
	max-width: var(--wp--custom--measure);
}

.fortnami-feature__body > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.fortnami-feature__body h2 {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

/* The sections sit on limestone, so their tiles are white. */
.fortnami-feature .fortnami-icon {
	background-color: var(--wp--preset--color--white);
}


/* ----- Company record: facts as a label and value list ----- */

.fortnami-record {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--wp--custom--gutter--mobile);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.fortnami-record__item {
	min-width: 0;
	padding-block: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--hairline) solid var(--wp--preset--color--reef);
}

.fortnami-record dt {
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--small);
}

.fortnami-record dd {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--small);
	overflow-wrap: anywhere;
}

.fortnami-record--footer dt {
	color: var(--wp--preset--color--reef);
}

.fortnami-record--footer dd {
	color: var(--wp--preset--color--limestone);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
}

.fortnami-record-band {
	padding-block: var(--wp--custom--section-padding--mobile);
}

.fortnami-record-layout.wp-block-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50) var(--wp--custom--gutter--mobile);
	margin-block: 0;
}

.fortnami-record-layout > .wp-block-column {
	min-width: 0;
}

.fortnami-record-layout > .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.fortnami-record-layout h2 {
	margin-block: 0;
}

.fortnami-record-layout p {
	max-width: var(--wp--custom--measure);
}

.fortnami-record-facts {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Full record: each fact beside its icon tile. */
.fortnami-record--full .fortnami-record__item {
	position: relative;
	min-height: calc(var(--wp--preset--spacing--60) + 2 * var(--wp--preset--spacing--30));
	padding-inline-start: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--30));
}

.fortnami-record--full .fortnami-icon {
	position: absolute;
	top: var(--wp--preset--spacing--30);
	left: 0;
}

.fortnami-record--full dd {
	color: var(--wp--preset--color--deep);
}

/* ----- Tables in content: banded rows ----- */

.wp-block-table:not(.is-style-register) {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.wp-block-table:not(.is-style-register) th,
.wp-block-table:not(.is-style-register) td {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 0;
	text-align: left;
}

.wp-block-table:not(.is-style-register) tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--reef);
}

/* ----- Full-bleed photographs: hero, image breaks and the closing quote ----- */

.fortnami-photo-cover picture {
	display: contents;
}

/* Reef shows while the photograph loads. */
.fortnami-image-break.wp-block-cover,
.fortnami-quote.wp-block-cover {
	border-block: var(--wp--custom--rule-width) solid var(--wp--preset--color--reef);
	background-color: var(--wp--preset--color--reef);
}

/* ----- Image breaks ----- */

.fortnami-image-break.wp-block-cover {
	min-height: 0;
	padding: 0;
	aspect-ratio: 16 / 9;
}

.fortnami-image-break .wp-block-cover__inner-container {
	display: none;
}

/* ----- Closing quote: set in the plain sky of an ocean photograph ----- */

/*
 * A short frame: the photograph (flipped at conversion so the palms sit right, away from the
 * quote) is cropped around its horizon, showing sky, sea and a strip of beach.
 */
.fortnami-quote.wp-block-cover {
	min-height: 32rem;
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--custom--page-margin--mobile);
	align-items: flex-start;
}

/* The crop keeps the lagoon and the shore below the horizon; the quote sits in the sky above. */
.fortnami-quote .wp-block-cover__image-background {
	object-position: center 60%;
}

/* The flame tree fills the right of the photograph from tablet width up; the quote stays left of it. */
.fortnami-quote__quote.wp-block-quote {
	max-width: var(--wp--style--global--content-size);
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--deep);
}

/* Phones set the quote a step smaller so it ends in the sky of the short frame. */
.fortnami-quote__quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--section-title);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--page-title);
}

.fortnami-quote__quote > cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	line-height: var(--wp--custom--line-height--small);
}

/*
 * ----- Motion -----
 * Every animation and transition lives in this block, so "reduce motion" turns all of them off.
 * Screen only: a page printed before it was scrolled would otherwise print its unrevealed
 * sections at 0.01 opacity.
 * Four keyframes, opacity and transform only (no layout shift). All start above zero opacity so
 * Chrome records LCP. On-load motion is CSS alone. Scroll reveals are marked by
 * assets/js/motion.js, which only marks elements still below the fold: without the script the
 * page shows everything at rest.
 */
@media screen and (prefers-reduced-motion: no-preference) {

	@keyframes fortnami-fade {

		from {
			opacity: 0.01;
		}
	}

	@keyframes fortnami-settle {

		from {
			transform: scale(var(--fortnami-settle-scale, 1.04));
		}
	}

	@keyframes fortnami-rise {

		from {
			transform: translateY(var(--wp--custom--motion--rise-distance));
		}
	}

	@keyframes fortnami-header-fill {

		to {
			border-bottom-color: var(--wp--preset--color--reef);
			background-color: var(--wp--preset--color--limestone);
		}
	}

	/* On load: the photograph settles, then the statement and its actions rise into place. */
	.fortnami-hero .wp-block-cover__image-background {
		animation: fortnami-settle var(--wp--custom--motion--settle-duration) var(--wp--custom--motion--ease) both;
	}

	.home .fortnami-header {
		animation: fortnami-fade var(--wp--custom--motion--rise-duration) var(--wp--custom--motion--ease) both;
	}

	.fortnami-hero__statement,
	.fortnami-page-header .wp-block-post-title {
		animation: fortnami-rise var(--wp--custom--motion--rise-duration) var(--wp--custom--motion--ease) both;
	}

	.fortnami-hero__actions {
		animation: fortnami-rise var(--wp--custom--motion--rise-duration) var(--wp--custom--motion--ease) var(--wp--custom--motion--rise-delay) both;
	}

	/*
	 * On scroll: text rises, photographs settle from a larger zoom inside their frame, and icon
	 * tiles grow in just after their text. motion.js sets the stagger delay. Text waiting to be
	 * revealed is moved, never faded: text at 0.01 opacity is unreadable to anyone whose script
	 * does not run, and Lighthouse scores it as 1:1 contrast. Only photographs fade, and through
	 * a transition, so the hero image paints at full opacity and records LCP as it arrives.
	 */
	[data-reveal="rise"]:not(.is-revealed) {
		transform: translateY(var(--wp--custom--motion--rise-distance));
	}

	[data-reveal="photo"] img {
		transition: opacity var(--wp--custom--motion--settle-duration) var(--wp--custom--motion--ease) var(--fortnami-reveal-delay, 0ms);
	}

	[data-reveal="photo"]:not(.is-revealed) img {
		opacity: 0.01;
	}

	[data-reveal="rise"].is-revealed {
		animation: fortnami-rise var(--wp--custom--motion--rise-duration) var(--wp--custom--motion--ease) var(--fortnami-reveal-delay, 0ms) both;
	}

	[data-reveal="photo"].is-revealed img {
		--fortnami-settle-scale: var(--wp--custom--motion--photo-scale);

		opacity: 1;
		animation: fortnami-settle var(--wp--custom--motion--settle-duration) var(--wp--custom--motion--ease) var(--fortnami-reveal-delay, 0ms) both;
	}

	[data-reveal="rise"].is-revealed .fortnami-icon {
		--fortnami-settle-scale: var(--wp--custom--motion--icon-scale);
		animation: fortnami-settle var(--wp--custom--motion--rise-duration) var(--wp--custom--motion--ease) calc(var(--fortnami-reveal-delay, 0ms) + var(--wp--custom--motion--rise-delay)) both;
	}

	/* Hover and focus: colour and the nav bar ease instead of switching. */
	.wp-block-button__link {
		transition: background-color var(--wp--custom--motion--hover-duration) ease, color var(--wp--custom--motion--hover-duration) ease;
	}

	.fortnami-nav .wp-block-navigation-item__content::after,
	.fortnami-legal-nav .wp-block-navigation-item__content::after {
		transition: transform var(--wp--custom--motion--hover-duration) var(--wp--custom--motion--ease);
	}

	.fortnami-footer a {
		transition: color var(--wp--custom--motion--hover-duration) ease;
	}
}

/* Desktop homepage: the header stays at the top and fills with limestone once the page scrolls. */
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 1024px) {

	@supports (animation-timeline: scroll()) {

		.home .wp-site-blocks > header.wp-block-template-part {
			position: fixed;
			animation: fortnami-header-fill linear both;
			animation-timeline: scroll(root);
			animation-range: 0 var(--wp--custom--motion--header-fill-distance);
		}
	}
}

.fortnami-margin-image {
	margin: 0;
	background-color: var(--wp--preset--color--white);
}

.fortnami-margin-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.fortnami-map {
	margin: 0;
}

.fortnami-map img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	border: var(--wp--custom--hairline) solid var(--wp--preset--color--reef);
}

.fortnami-map figcaption {
	margin-block: var(--wp--preset--spacing--20) 0;
}

/* ----- Content details ----- */

.fortnami-file-size {
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body);
	white-space: nowrap;
}

.fortnami-file-size::before {
	content: "(";
}

.fortnami-file-size::after {
	content: ")";
}

.fortnami-licence-documents {
	padding-left: 0;
	list-style: none;
}

.fortnami-licence-documents li {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--20);
	align-items: baseline;
	min-height: 44px;
}

.fortnami-director-list {
	padding-left: 0;
	list-style: none;
}

.fortnami-director-list li + li {
	margin-block-start: var(--wp--preset--spacing--20);
}


.wp-block-button__link,
input,
select,
textarea {
	min-height: 44px;
	border-radius: var(--wp--custom--radius-control);
	font-size: max(1rem, 16px);
}

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

.fortnami-footer {
	padding-block: var(--wp--custom--section-padding--mobile);
	font-family: var(--wp--preset--font-family--sans);
}

.fortnami-footer__inner > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

.fortnami-footer a,
.fortnami-footer .wp-block-navigation-item__content {
	color: var(--wp--preset--color--reef);
}

.fortnami-footer a:hover,
.fortnami-footer a:focus-visible {
	color: var(--wp--preset--color--white);
}

/* Lagoon on deep is under 3:1 non-text contrast; the footer ring uses reef. */
.fortnami-footer :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--reef);
}

.fortnami-footer .fortnami-footer__wordmark {
	margin: 0;
}

.fortnami-footer .fortnami-footer__wordmark a {
	color: var(--wp--preset--color--limestone);
}

/* The statement runs the full width of the footer, set back in a muted grey so the facts lead. */
.fortnami-footer__statement {
	margin-block-end: 0;
	color: var(--wp--custom--color--footer-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--small);
}

.fortnami-legal-nav {
	font-size: var(--wp--preset--font-size--small);
}

.fortnami-legal-nav .wp-block-navigation__container {
	gap: 0 var(--wp--preset--spacing--40);
}

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

@media (min-width: 768px) {

	:root body {
		--wp--style--root--padding-left: var(--wp--custom--page-margin--tablet);
		--wp--style--root--padding-right: var(--wp--custom--page-margin--tablet);
	}

	.fortnami-record--full,
	.fortnami-record--footer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fortnami-record--footer .fortnami-record__item--wide {
		grid-column: 1 / -1;
	}

	/*
	 * The photograph is anchored at the bottom, so only sky is ever cropped. Its 176 rows of lagoon
	 * and shore below the horizon (of 1536 x 862, tools/convert-images.mjs) scale with whichever
	 * side the cover fits: 176/1536 of the width or 176/862 of the height. --fortnami-hero-lagoon is
	 * that depth. The bottom padding stops the content above it, and the top padding adds the same
	 * depth after the header, so the statement and links centre in the frame below the header.
	 * The height leaves room for the licence band in the first screen; on very wide screens it
	 * grows with the width so the lagoon cannot crowd the text.
	 */
	.fortnami-hero.wp-block-cover {
		--fortnami-hero-height: clamp(36rem, calc(100svh - var(--wp--preset--spacing--70)), max(48rem, 44vw));
		--fortnami-hero-lagoon: max(11.46vw, calc(var(--fortnami-hero-height) * 0.2042));
		padding-block: calc(var(--fortnami-header-offset) + var(--fortnami-hero-lagoon) + var(--wp--preset--spacing--40)) calc(var(--fortnami-hero-lagoon) + var(--wp--preset--spacing--40));
	}

	/* Wide crops keep Le Morne, which sits at the right of the photograph. */
	.fortnami-hero .wp-block-cover__image-background {
		object-position: 80% bottom;
	}

	.fortnami-quote.wp-block-cover {
		min-height: 38rem;
		padding-inline: var(--wp--custom--page-margin--tablet);
	}

	.fortnami-quote__quote.wp-block-quote {
		max-width: min(var(--wp--style--global--content-size), 60%);
	}

	.fortnami-quote__quote p {
		font-size: var(--wp--preset--font-size--page-title);
	}
}

/* ----- Desktop ----- */

@media (min-width: 1024px) {

	html {
		scroll-padding-top: calc(var(--wp--custom--header-height) + var(--wp-admin--admin-bar--height, 0px));
	}

	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0);
		z-index: 10;
		background-color: var(--wp--preset--color--limestone);
	}

	.fortnami-section {
		padding-block: var(--wp--custom--section-padding--desktop);
	}

	.fortnami-page-header {
		padding-block: var(--wp--custom--section-padding--desktop) 0;
	}

	.fortnami-marginalia.wp-block-columns {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--wp--custom--gutter--desktop);
	}

	.fortnami-marginalia > .wp-block-column:first-child {
		grid-column: 1 / span 7;
	}

	.fortnami-marginalia > .wp-block-column:nth-child(2) {
		grid-column: 9 / span 4;
	}

	.fortnami-hero__statement {
		max-width: 62rem;
	}


	.fortnami-record {
		column-gap: var(--wp--custom--gutter--desktop);
	}

	.fortnami-record--footer {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.fortnami-record--footer .fortnami-record__item--wide {
		grid-column: span 2;
	}

	.fortnami-record-band {
		padding-block: var(--wp--custom--section-padding--desktop);
	}

	.fortnami-record-layout.wp-block-columns {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--wp--custom--gutter--desktop);
	}

	.fortnami-record-layout > .wp-block-column:first-child {
		grid-column: 1 / span 4;
	}

	.fortnami-record-layout > .wp-block-column:nth-child(2) {
		grid-column: 6 / span 7;
	}

	.fortnami-record--full {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* The quote's lines already end near 38rem; capping the block there keeps it clear of the canopy. */
	.fortnami-quote__quote.wp-block-quote {
		max-width: min(38rem, 60%);
	}

	.fortnami-feature__layout.wp-block-columns {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: center;
		column-gap: var(--wp--custom--gutter--desktop);
	}

	/*
	 * The photograph fills its column at the row's full height: the text sets the height (never
	 * less than 32rem) and the photograph covers it. Rows alternate which side it takes.
	 */
	.fortnami-feature__media {
		position: relative;
		grid-row: 1;
		grid-column: 1 / span 6;
		align-self: stretch;
		min-height: 32rem;
	}

	.fortnami-feature__body {
		grid-row: 1;
		grid-column: 8 / span 5;
	}

	.fortnami-feature--reverse .fortnami-feature__media {
		grid-column: 7 / span 6;
	}

	.fortnami-feature--reverse .fortnami-feature__body {
		grid-column: 1 / span 5;
	}

	.fortnami-feature-image {
		position: absolute;
		inset: 0;
	}

	.fortnami-feature-image img {
		aspect-ratio: auto;
	}

	.fortnami-record-facts {
		margin-block-start: var(--wp--preset--spacing--60);
	}

	.fortnami-footer {
		padding-block: var(--wp--custom--section-padding--desktop);
	}
}