@charset "UTF-8";
/*
 * Ascenthya, site footer.
 *
 * Deep green ground, four regions: the brand block with the social row, then
 * Explore Ascenthya, More Information and Governance. Below them the
 * disclosure and the copyright bar.
 *
 * Self-contained on purpose. The design system (ascenthya-ui) is currently
 * switched off, so this sheet may not assume any token it does not also
 * provide a fallback for. The tokens below come from the header sheet, which
 * is live on every page; the fallbacks are the same values, so the footer
 * renders correctly even if the header is ever taken out.
 *
 * Everything is scoped under .asc-f so nothing can leak into Elementor
 * content, and no rule here uses !important.
 */

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

/* ===========================================================================
 * 1. The block
 * ======================================================================== */

.asc-f {
	position: relative;
	z-index: 1;
	overflow: hidden;
	margin: 0;
	/* Measured against apollo.com, whose footer runs to roughly 560px at
	   desktop. Ours was over 1000px, which is not a footer, it is a second
	   page. Everything vertical in here has been taken back: the padding, the
	   gap before the legal block, the row rhythm in the columns, and the
	   disclosure, which moved to the Disclaimer page. */
	padding: clamp(44px, 4.4vw, 60px) var(--asc-gutter, clamp(18px, 3.2vw, 44px)) clamp(28px, 2.8vw, 40px);

	/*
	 * The ground is not one flat colour. Two very soft pools of light sit over
	 * the deep green: a warm one behind the wordmark, where the eye lands
	 * first, and a cooler one low and right, where the contour lines gather.
	 * Both are under 10% alpha. The point is to stop the panel reading as a
	 * printed block of ink, not to be noticed.
	 */
	background:
		radial-gradient(110% 80% at 6% 0%, rgba(201, 147, 49, .085) 0%, rgba(201, 147, 49, 0) 55%),
		radial-gradient(80% 95% at 88% 106%, rgba(17, 103, 106, .32) 0%, rgba(17, 103, 106, 0) 60%),
		var(--asc-green-deep, #0B4749);
	color: #FFFFFF;
	font-family: var(--asc-sans, "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* A hairline of gold across the very top. One line, the width of the page: it
   separates the footer from whatever section ends above it without needing a
   colour change, and it is the only decoration in here. */
.asc-f::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	/* Above the drawn ground: both are positioned, and without this the ground
	   would paint over the gold edge simply by coming later in the DOM. */
	z-index: 2;
	height: 1px;
	background: linear-gradient(90deg, rgba(201, 147, 49, .9) 0%, rgba(201, 147, 49, .3) 42%, rgba(201, 147, 49, 0) 100%);
}

/* ---------------------------------------------------------------------------
 * 1a. The drawn ground
 *
 * Seven copies of one rising contour, hairline weight, bleeding off both
 * edges. See the comment on Ascenthya_Footer::weave() for why it is drawn
 * inline rather than fetched, and why the strokes do not scale.
 *
 * It is stated as a sibling behind the content rather than as a pseudo-element
 * so it can carry a real <svg>, which stays crisp at any width and any pixel
 * density. Nothing here is interactive and none of it is announced.
 * ------------------------------------------------------------------------ */

/*
 * The seal sits in the right of the panel and bleeds off the right and bottom
 * edges. Cropping is the point: a rosette shown whole is a badge, and a badge
 * on a footer is a logo nobody asked for. Cropped, it reads as the ground the
 * panel was cut from.
 *
 * The mask fades it out toward the left, so it is at full strength in the empty
 * right-hand third and gone by the time it reaches the columns and the
 * disclosure. Text never sits on a hairline.
 */
.asc-f__ground {
	position: absolute;
	right: min(-3vw, -30px);
	bottom: min(-6vw, -56px);
	width: clamp(320px, 42vw, 500px);
	aspect-ratio: 1;
	z-index: 0;
	pointer-events: none;
	/* 128deg, so the fade runs from the top left. That is the corner the link
	   columns occupy relative to the seal, and it means one gradient clears
	   both the columns to its left and the Governance list above it. */
	-webkit-mask-image: linear-gradient(128deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .45) 38%, #000 74%);
	mask-image: linear-gradient(128deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .45) 38%, #000 74%);
}

.asc-f__seal {
	display: block;
	width: 100%;
	height: 100%;
	/* Very slow. It is not an animation, it is a thing that happens to have
	   turned a few degrees by the time you scroll back. Off entirely for anyone
	   who has asked for reduced motion. */
	animation: asc-f-turn 240s linear infinite;
}

@keyframes asc-f-turn {
	to { transform: rotate(360deg); }
}

/*
 * A whisper of grain over the whole panel. Large, low-contrast gradients band
 * into visible steps on an 8-bit display, and 2.5% noise is what breaks the
 * steps up. It is generated by the browser's own SVG filter, so it costs a few
 * hundred bytes and no request.
 */
.asc-f::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .022;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Everything readable sits above the ground. */
.asc-f__shell {
	position: relative;
	z-index: 1;
	max-width: var(--asc-shell, 1280px);
	margin: 0 auto;
}

/* ===========================================================================
 * 2. Top: brand block and link columns
 * ======================================================================== */

.asc-f__top {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr);
	gap: clamp(40px, 5.5vw, 88px);
	align-items: start;
}

/* --- brand --------------------------------------------------------------- */

.asc-f__wordmark {
	display: inline-block;
	font-family: var(--asc-serif, "EB Garamond", Georgia, "Times New Roman", serif);
	font-size: clamp(22px, 2.3vw, 30px);
	font-weight: 400;
	line-height: 1.05;
	/* Matches the header wordmark: uppercase at .2em, with the same text-indent
	   trick so the trailing letter-space does not push the word off-axis. */
	letter-spacing: .2em;
	text-indent: .2em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	white-space: nowrap;
}

.asc-f__wordmark::after {
	content: "";
	display: block;
	width: 54px;
	height: 1px;
	margin-top: 14px;
	background: var(--asc-gold, #C99331);
}

.asc-f__blurb {
	max-width: 40ch;
	margin: 18px 0 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .68);
}

/* --- social -------------------------------------------------------------- */

.asc-f__social { margin-top: clamp(22px, 2.4vw, 30px); }

.asc-f__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.asc-f__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 2px;
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	transition: background-color .22s var(--asc-ease, cubic-bezier(.22, .61, .36, 1)),
	            border-color .22s var(--asc-ease, cubic-bezier(.22, .61, .36, 1)),
	            color .22s var(--asc-ease, cubic-bezier(.22, .61, .36, 1));
}

a.asc-f__social-link:hover,
a.asc-f__social-link:focus-visible {
	background: var(--asc-gold, #C99331);
	border-color: var(--asc-gold, #C99331);
	color: var(--asc-green-deep, #0B4749);
}

/* Shown only to a signed-in editor, for a network whose URL has not been set
   yet. Deliberately inert and dimmed: it is a note about work outstanding, not
   a control. */
.asc-f__social-link.is-pending {
	border-style: dashed;
	border-color: rgba(255, 255, 255, .18);
	color: rgba(255, 255, 255, .3);
	cursor: default;
}

.asc-f__icon { display: block; }

/* --- columns ------------------------------------------------------------- */

.asc-f__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
}

.asc-f__h {
	margin: 0 0 16px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--asc-gold, #C99331);
}

.asc-f__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.asc-f__list li + li { margin-top: 9px; }

.asc-f__list a {
	display: inline-block;
	font-size: 14.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
	transition: color .2s var(--asc-ease, cubic-bezier(.22, .61, .36, 1));
}

.asc-f__list a:hover,
.asc-f__list a:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
	text-decoration-color: var(--asc-gold, #C99331);
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

/* ===========================================================================
 * 3. Disclosure and copyright
 * ======================================================================== */

.asc-f__legal {
	margin-top: clamp(30px, 3.2vw, 44px);
	padding-top: clamp(18px, 2vw, 26px);
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.asc-f__disclosure {
	max-width: 96ch;
	margin: 0;
	font-size: 12px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .48);
}

.asc-f__more {
	color: rgba(255, 255, 255, .72);
	text-decoration: underline;
	text-decoration-color: rgba(201, 147, 49, .55);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	white-space: nowrap;
}

.asc-f__more:hover,
.asc-f__more:focus-visible {
	color: #FFFFFF;
	text-decoration-color: var(--asc-gold, #C99331);
}

.asc-f__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: baseline;
	justify-content: space-between;
	margin-top: clamp(16px, 1.8vw, 22px);
	font-size: 12.5px;
	color: rgba(255, 255, 255, .58);
}

/* ===========================================================================
 * 4. Focus
 * ======================================================================== */

.asc-f a:focus-visible {
	outline: 2px solid var(--asc-gold, #C99331);
	outline-offset: 3px;
	border-radius: 1px;
}

/* ===========================================================================
 * 5. Narrower viewports
 * ======================================================================== */

/* The brand block stops earning a column of its own well before the link
   columns do, so it is the first thing to drop under them. */
@media (max-width: 1080px) {
	.asc-f__top {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(36px, 5vw, 52px);
	}

	.asc-f__blurb { max-width: 58ch; }
}

@media (max-width: 640px) {
	.asc-f {
		padding-top: clamp(40px, 9vw, 56px);
		padding-bottom: clamp(28px, 7vw, 40px);
	}

	.asc-f__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.asc-f__bar { justify-content: flex-start; }

	/* Smaller and pushed further into the corner. A stacked footer is several
	   times taller, so a seal sized for the desktop panel would sit in the
	   middle of the reading rather than under the corner of it. */
	.asc-f__ground {
		right: -70px;
		bottom: -110px;
		width: 260px;
	}
}

/* Tap targets. The responsive layer sets a 44px floor on interactive elements
   under a coarse pointer; the social buttons are 42px, so they are raised to
   meet it rather than being allowed to fall through. */
@media (pointer: coarse) {
	.asc-f__social-link {
		width: 44px;
		height: 44px;
	}

	.asc-f__list a { padding: 3px 0; }
}

@media (prefers-reduced-motion: reduce) {
	.asc-f__social-link,
	.asc-f__list a { transition: none; }
	.asc-f__seal { animation: none; }
}

/* ===========================================================================
 * 6. Print
 * ======================================================================== */

@media print {
	.asc-f {
		padding: 18pt 0 0;
		background: none;
		color: #000000;
	}

	.asc-f::before { display: none; }
	.asc-f__ground { display: none; }
	.asc-f__social,
	.asc-f__cols { display: none; }

	.asc-f__disclosure,
	.asc-f__bar { color: #000000; }
}