/*
Theme Name: RIPTIDE
Theme URI: https://coreydonenfeld.com
Description: A custom WordPress theme for RIPTIDE - a memoir of temptation and redemption. Designed and developed by Corey Donenfeld.
Author: Corey Donenfeld
Author URI: https://coreydonenfeld.com
Version: 1.0.0
*/

/*
 * ====================================================================== *
 * HTML5 Boilerplate
 * ====================================================================== *
 */

*{box-sizing:border-box;}article{display:block}aside{display:block}details{display:block}figcaption{display:block}figure{display:block;margin:0}footer{display:block}header{display:block}hgroup{display:block}nav{display:block}section{display:block}audio{display:inline;}canvas{display:inline;}video{display:inline;}audio:not([controls]){display:none}[hidden]{display:none}html{color:#222;font-family:sans-serif;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}button{-webkit-appearance:button;color:#222;cursor:pointer;font-family:sans-serif;font-size:100%;line-height:normal;margin:0;overflow:visible;vertical-align:middle}input{color:#222;font-family:sans-serif;font-size:100%;line-height:normal;margin:0;vertical-align:middle}select{color:#222;font-family:sans-serif;font-size:100%;margin:0;vertical-align:middle}textarea{color:#222;font-family:sans-serif;font-size:100%;margin:0;overflow:auto;resize:vertical;vertical-align:top}body{font-size:1em;line-height:1.4;margin:0}::-moz-selection{background:#333;color:#fff;text-shadow:none}::selection{background:#333;color:#fff;text-shadow:none}a{color:#00e}a:hover{color:#06e;outline:0}a:active{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{border:0;border-top:1px solid #ccc;display:block;height:1px;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}code{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}kbd{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}q{quotes:none}q:before{content:none}q:after{content:none}small{font-size:85%}sub{bottom:-.25em;font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{font-size:75%;line-height:0;position:relative;top:-.5em;vertical-align:baseline}ul{margin:1em 0;padding:0 0 0 40px}ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul{list-style:none;list-style-image:none;margin:0;padding:0}nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;padding:0;white-space:normal}input[type="button"]{-webkit-appearance:button;cursor:pointer;overflow:visible}input[type="reset"]{-webkit-appearance:button;cursor:pointer;overflow:visible}input[type="submit"]{-webkit-appearance:button;cursor:pointer;overflow:visible}button[disabled]{cursor:default}input[disabled]{cursor:default}input[type="checkbox"]{box-sizing:border-box;height:13px;padding:0;width:13px}input[type="radio"]{box-sizing:border-box;height:13px;padding:0;width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner{border:0;padding:0}input::-moz-focus-inner{border:0;padding:0}input:invalid{background-color:#f0dddd}textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}.chromeframe{background:#ccc;color:#000;margin:.2em 0;padding:.2em 0}

/*
 * ====================================================================== *
 * Typography
 * ====================================================================== *
 */

/**
 * @license
 *
 * Font Family: Supreme
 * Designed by: Jérémie Hornus, Lisa Huang, Dylan Raux
 * URL: https://www.fontshare.com/fonts/supreme
 * © 2026 Indian Type Foundry
 *
 * Supreme Thin
 * Supreme ThinItalic
 * Supreme Extralight
 * Supreme ExtralightItalic
 * Supreme Light
 * Supreme LightItalic
 * Supreme Regular
 * Supreme Italic
 * Supreme Medium
 * Supreme MediumItalic
 * Supreme Bold
 * Supreme BoldItalic
 * Supreme Extrabold
 * Supreme ExtraboldItalic
 */

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-Thin.woff2') format('woff2'),
		 url('assets/fonts/Supreme-Thin.woff') format('woff'),
		 url('assets/fonts/Supreme-Thin.ttf') format('truetype');
	font-weight: 100;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-ThinItalic.woff2') format('woff2'),
		 url('assets/fonts/Supreme-ThinItalic.woff') format('woff'),
		 url('assets/fonts/Supreme-ThinItalic.ttf') format('truetype');
	font-weight: 100;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-Extralight.woff2') format('woff2'),
		 url('assets/fonts/Supreme-Extralight.woff') format('woff'),
		 url('assets/fonts/Supreme-Extralight.ttf') format('truetype');
	font-weight: 200;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-ExtralightItalic.woff2') format('woff2'),
		 url('assets/fonts/Supreme-ExtralightItalic.woff') format('woff'),
		 url('assets/fonts/Supreme-ExtralightItalic.ttf') format('truetype');
	font-weight: 200;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-Light.woff2') format('woff2'),
		 url('assets/fonts/Supreme-Light.woff') format('woff'),
		 url('assets/fonts/Supreme-Light.ttf') format('truetype');
	font-weight: 300;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-LightItalic.woff2') format('woff2'),
		 url('assets/fonts/Supreme-LightItalic.woff') format('woff'),
		 url('assets/fonts/Supreme-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-Regular.woff2') format('woff2'),
		 url('assets/fonts/Supreme-Regular.woff') format('woff'),
		 url('assets/fonts/Supreme-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-Italic.woff2') format('woff2'),
		 url('assets/fonts/Supreme-Italic.woff') format('woff'),
		 url('assets/fonts/Supreme-Italic.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-Medium.woff2') format('woff2'),
		 url('assets/fonts/Supreme-Medium.woff') format('woff'),
		 url('assets/fonts/Supreme-Medium.ttf') format('truetype');
	font-weight: 500;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-MediumItalic.woff2') format('woff2'),
		 url('assets/fonts/Supreme-MediumItalic.woff') format('woff'),
		 url('assets/fonts/Supreme-MediumItalic.ttf') format('truetype');
	font-weight: 500;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-Bold.woff2') format('woff2'),
		 url('assets/fonts/Supreme-Bold.woff') format('woff'),
		 url('assets/fonts/Supreme-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-BoldItalic.woff2') format('woff2'),
		 url('assets/fonts/Supreme-BoldItalic.woff') format('woff'),
		 url('assets/fonts/Supreme-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-Extrabold.woff2') format('woff2'),
		 url('assets/fonts/Supreme-Extrabold.woff') format('woff'),
		 url('assets/fonts/Supreme-Extrabold.ttf') format('truetype');
	font-weight: 800;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Supreme';
	src: url('assets/fonts/Supreme-ExtraboldItalic.woff2') format('woff2'),
		 url('assets/fonts/Supreme-ExtraboldItalic.woff') format('woff'),
		 url('assets/fonts/Supreme-ExtraboldItalic.ttf') format('truetype');
	font-weight: 800;
	font-display: swap;
	font-style: italic;
}

/**
 * @license
 *
 * Font Family: Erode
 * Designed by: Nikhil Ranganathan
 * URL: https://www.fontshare.com/fonts/erode
 * © 2026 Indian Type Foundry
 *
 * Erode Light
 * Erode LightItalic
 * Erode Regular
 * Erode Italic
 * Erode Medium
 * Erode MediumItalic
 * Erode Semibold
 * Erode SemiboldItalic
 * Erode Bold
 * Erode BoldItalic
 */

@font-face {
	font-family: 'Erode';
	src: url('assets/fonts/Erode-Light.woff2') format('woff2'),
		 url('assets/fonts/Erode-Light.woff') format('woff'),
		 url('assets/fonts/Erode-Light.ttf') format('truetype');
	font-weight: 300;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Erode';
	src: url('assets/fonts/Erode-LightItalic.woff2') format('woff2'),
		 url('assets/fonts/Erode-LightItalic.woff') format('woff'),
		 url('assets/fonts/Erode-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: 'Erode';
	src: url('assets/fonts/Erode-Regular.woff2') format('woff2'),
		 url('assets/fonts/Erode-Regular.woff') format('woff'),
		 url('assets/fonts/Erode-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Erode';
	src: url('assets/fonts/Erode-Italic.woff2') format('woff2'),
		 url('assets/fonts/Erode-Italic.woff') format('woff'),
		 url('assets/fonts/Erode-Italic.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: 'Erode';
	src: url('assets/fonts/Erode-Medium.woff2') format('woff2'),
		 url('assets/fonts/Erode-Medium.woff') format('woff'),
		 url('assets/fonts/Erode-Medium.ttf') format('truetype');
	font-weight: 500;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Erode';
	src: url('assets/fonts/Erode-MediumItalic.woff2') format('woff2'),
		 url('assets/fonts/Erode-MediumItalic.woff') format('woff'),
		 url('assets/fonts/Erode-MediumItalic.ttf') format('truetype');
	font-weight: 500;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: 'Erode';
	src: url('assets/fonts/Erode-Semibold.woff2') format('woff2'),
		 url('assets/fonts/Erode-Semibold.woff') format('woff'),
		 url('assets/fonts/Erode-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Erode';
	src: url('assets/fonts/Erode-SemiboldItalic.woff2') format('woff2'),
		 url('assets/fonts/Erode-SemiboldItalic.woff') format('woff'),
		 url('assets/fonts/Erode-SemiboldItalic.ttf') format('truetype');
	font-weight: 600;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: 'Erode';
	src: url('assets/fonts/Erode-Bold.woff2') format('woff2'),
		 url('assets/fonts/Erode-Bold.woff') format('woff'),
		 url('assets/fonts/Erode-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Erode';
	src: url('assets/fonts/Erode-BoldItalic.woff2') format('woff2'),
		 url('assets/fonts/Erode-BoldItalic.woff') format('woff'),
		 url('assets/fonts/Erode-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: italic;
}

/*
 * ====================================================================== *
 * Body Styles
 * ====================================================================== *
 */

:root {
	/* Colors */
	--white: #fff;
	--black: #000;
	--sand: #fcdbc6;
	--dark-maroon: #2e0001;
	--maroon: #4b0001;
	--deep-maroon: #590001;
	--crimson: #6c0103;
	--red: #e20002;
	--blue: #0e3b7f;
	--olive: #666c00;
	--gold: #ffab19;
	--gold-light: #ffc052;

	/* Fonts */
	--body-font: 'Erode', Georgia, serif;
	--heading-font: 'Supreme', 'Helvetica Neue', sans-serif;

	/* Container */
	--container-width: 90vw;
	--container-max-width: 1600px;
	--container-outer-padding: 50px;
	--container-outer-margin: calc((100vw - var(--container-width)) / 2);
	--viewport-edge: calc((var(--container-outer-margin) + var(--container-outer-padding)) * -1);
	--one-column-width: ((100vw - (2 * (var(--container-outer-margin) + var(--container-outer-padding)))) - (11 * var(--gap))) / 12;

	/* Grid */
	--gap: 40px;
	--grid: repeat(12, minmax(0,1fr));

	/* Spacing */
	--text-spacing-xxsmall: 8px;
	--text-spacing-xsmall: 16px;
	--text-spacing-small: 24px;
	--text-spacing-medium: 32px;
	--text-spacing-large: 40px;
	--text-spacing-xlarge: 48px;
	--text-spacing-xxlarge: 56px;
	--module-spacing-small: 64px;
	--module-spacing-medium: 80px;
	--module-spacing-large: 120px;
	--module-spacing-xlarge: 160px;

	/* Motion
	 *
	 * One curve, used by every transition and keyframe on the site - hovers,
	 * jazzy-scroll reveals, word stagger, paint-in, header chrome. The slow
	 * settle on the tail of this ease is what gives the whole site its
	 * storytelling feel; switching to `ease` or a faster curve breaks the tone.
	 * If something feels wrong, tune the duration, not the curve.
	 */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Heading scale - multiplied into every heading's font-size calc so the
	 * full type scale shrinks proportionally at narrower viewports. Tuned so
	 * h1 (44px) lands at 40 at 950px and 36 at 650px. */
	--heading-scale: 1;

	/* Body scale - same idea as --heading-scale but for body text (p, ul, ol,
	 * regular-text, and the size-modifier variants). Body shrinks a touch
	 * gentler than headings since smaller text loses readability faster. */
	--body-scale: 1;

	interpolate-size: allow-keywords;
}

html {
	font-size: 100%;
}

body {
	background: var(--sand);
	color: var(--maroon);
	font: calc(24rem / 16 * var(--body-scale)) / calc(40 / 24) var(--body-font);
	font-weight: 500;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	letter-spacing: -0.1px;
	position: relative;
}

/* Paper texture overlay - blends with the sand bg and any module image. Text/UI sits on top via natural stacking. */
body::before {
	background: url('assets/images/paper-texture.png') center / 100vw no-repeat;
	content: '';
	inset: 0;
	mix-blend-mode: multiply;
	opacity: 0.6;
	pointer-events: none;
	position: fixed;
	z-index: 99;
}

@media (prefers-reduced-motion: no-preference) {
	body::before {
		animation: texture-settle 1.2s var(--ease) both;
	}

	@keyframes texture-settle {
		from {
			opacity: 0.9;
		}
		to {
			opacity: 0.6;
		}
	}
}

body > * {
	background: var(--sand);
	position: relative;
	z-index: 1;
}

.svg-inline--fa {
	display: inline-block;
	font-size: inherit;
	height: 1em;
	overflow: visible;
	vertical-align: -0.125em;
}

.svg-inline--fa path {
	fill: currentColor;
}

a {
	color: var(--red);
	text-decoration: none;
	transition: all .25s var(--ease);
}

strong {
	font-weight: 600;
}

input[type=submit],
button {
	border-radius: 0;
	font-family: inherit;
	transition: all .25s var(--ease);
}

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

img,
svg,
picture {
	height: auto;
}

h1,
.heading-1,
h2,
.heading-2,
h3,
.heading-3,
h4,
.heading-4,
h5,
.heading-5,
h6,
.heading-6 {
	margin: 0;
}

h1,
.heading-1 {
	font: 700 calc(44rem / 16 * var(--heading-scale)) / calc(60 / 44) var(--heading-font);
	letter-spacing: -0.65px;
}

h1.xlarge,
.heading-xl {
	font: 700 calc(60rem / 16 * var(--heading-scale)) / calc(80 / 60) var(--heading-font);
	letter-spacing: -0.65px;
}

h2,
.heading-2 {
	font: 700 calc(40rem / 16 * var(--heading-scale)) / calc(54 / 40) var(--heading-font);
	letter-spacing: -0.5px;
}

h3,
.heading-3 {
	font: 700 calc(36rem / 16 * var(--heading-scale)) / calc(50 / 36) var(--heading-font);
	letter-spacing: -0.4px;
}

h4,
.heading-4 {
	font: 700 calc(32rem / 16 * var(--heading-scale)) / calc(48 / 32) var(--heading-font);
	letter-spacing: -0.65px;
}

h5,
.heading-5 {
	font: 700 calc(24rem / 16 * var(--heading-scale)) / calc(36 / 24) var(--heading-font);
	letter-spacing: -0.1px;
}

h6,
.heading-6 {
	font: 700 calc(18rem / 16 * var(--heading-scale)) / calc(28 / 18) var(--heading-font);
	letter-spacing: -0.1px;
}

/** Heading Modifiers **/

:is(h1, h2, h3, h4, h5, h6, [class^="heading-"]) em,
:is(h1, h2, h3, h4, h5, h6, [class^="heading-"]) i {
	font-style: italic;
}

:is(h1, h2, h3, h4, h5, h6, [class^="heading-"]) .thin {
	font-weight: 100;
}

:is(h1, h2, h3, h4, h5, h6, [class^="heading-"]) .light {
	background: linear-gradient(90deg, var(--light-color, var(--maroon)) 65.87%, transparent 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 400;
	-webkit-text-fill-color: transparent;
}

:is(h1, h2, h3, h4, h5, h6, [class^="heading-"]) .blue {
	color: var(--blue);
}

:is(h1, h2, h3, h4, h5, h6, [class^="heading-"]) .green {
	color: var(--olive);
}

:is(h1, h2, h3, h4, h5, h6, [class^="heading-"]) .xlarge {
	font-size: calc(60rem / 16 * var(--heading-scale));
}

p,
ul,
ol,
.regular-text,
.regular-text p,
.regular-text ul,
.regular-text ol {
	font-size: calc(24rem / 16 * var(--body-scale));
	line-height: calc(40 / 24);
}

p.xlarge,
ul.xlarge,
ol.xlarge,
.xlarge-text,
.xlarge-text p,
.xlarge-text ul,
.xlarge-text ol {
	font-size: calc(32rem / 16 * var(--body-scale));
	line-height: calc(48 / 32);
}

p.large,
ul.large,
ol.large,
.large-text,
.large-text p,
.large-text ul,
.large-text ol {
	font-size: calc(28rem / 16 * var(--body-scale));
	line-height: calc(44 / 28);
}

p.medium,
ul.medium,
ol.medium,
.medium-text,
.medium-text p,
.medium-text ul,
.medium-text ol {
	font-size: calc(20rem / 16 * var(--body-scale));
	line-height: calc(32 / 20);
}

p.small,
ul.small,
ol.small,
.small-text,
.small-text p,
.small-text ul,
.small-text ol {
	font-size: calc(18rem / 16 * var(--body-scale));
	line-height: calc(28 / 18);
}

p.xsmall,
ul.xsmall,
ol.xsmall,
.xsmall-text,
.xsmall-text p,
.xsmall-text ul,
.xsmall-text ol {
	font-size: calc(14rem / 16 * var(--body-scale));
	line-height: calc(22 / 14);
}

.eyebrow {
	color: var(--red);
	display: block;
	font: 800 calc(18rem / 16) / calc(24 / 18) var(--heading-font);
	letter-spacing: 2px;
	text-transform: uppercase;
}

.tag {
	font: 700 calc(14rem / 16)/1 var(--heading-font);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.legal,
.meta {
	font-size: calc(14rem / 16);
	line-height: calc(22 / 14);
	opacity: 0.6;
}

/* Description WYSIWYG wrapper - used by module templates (content-media, about-callout, about-hero, etc.) to wrap a body-copy WYSIWYG so it can be a single jazzy-scroll target. Paragraphs inside collapse their own margins; sibling paragraphs get a fixed 12px rhythm. */
.description > p {
	margin: 0;
}

.description > p + p {
	margin-top: 12px;
}

header,
section,
footer,
article {
	width: 100%;
}

.container {
	clear: both;
	margin: 0 auto;
	max-width: var(--container-max-width);
	padding: 0 var(--container-outer-padding);
	position: relative;
	width: var(--container-width);
}

.container-full {
	padding: 0 var(--module-spacing-medium);
	position: relative;
}

.flex-container,
.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.grid-container,
.grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: var(--grid);
}

ul.flex-container,
ul.flex,
ul.grid-container,
ul.grid,
ol.flex-container,
ol.flex,
ol.grid-container,
ol.grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.accessibility,
.hidden_label > label,
.sr-text {
	backface-visibility: hidden;
	left: -999999999px;
	opacity: 0;
	position: absolute;
}

#skip-to-content {
	pointer-events: none;
	top: 0;
	z-index: 9999999;
}

#skip-to-content:focus {
	backface-visibility: visible;
	background: var(--deep-maroon);
	border: 1px solid var(--white);
	color: var(--white);
	left: var(--container-outer-padding);
	opacity: 1;
	pointer-events: auto;
	top: var(--text-spacing-xsmall);
}

#skip-to-content:focus:hover {
	box-shadow: inset 0px 0px 0px 2px var(--deep-maroon);
}

.image-zoom {
	overflow: hidden;
}

.image-zoom > img,
.image-zoom > picture {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: all .25s var(--ease);
	width: 100%;
}

/** Image Display **/

.media.display-immersive {
	--immersive-fade-angle: 205deg;
	border-radius: 999px;
	mix-blend-mode: darken;
	overflow: hidden;
	position: relative;
}

.media.display-immersive img {
	border-radius: inherit;
	mix-blend-mode: multiply;
	height: 100%;
	width: 100%;
}

/* Vignette - linear directional fade (--immersive-fade-angle, default 205deg for image-on-right modules) layered over a radial vignette. Modules flip the angle when the image lives on the left side of the layout. */
.media.display-immersive::after {
	background:
		linear-gradient(var(--immersive-fade-angle), rgba(252, 219, 198, 0) 40.51%, rgba(252, 219, 198, 0.85) 66.34%),
		radial-gradient(50% 50% at 50% 50%, rgba(252, 219, 198, 0) 40.38%, var(--sand) 100%);
	/*border-radius: inherit;*/
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* Shape modifier - any .media that should crop to an ellipse */
.media.shape-oval {
	border-radius: 50%;
	overflow: hidden;
}

/** Photo Caption **/

/* figure.media-figure wraps only .media + .photo-caption so the figcaption association stays scoped to the image. display: contents flattens it into the parent grid so .media and .photo-caption participate as direct grid items. */
figure.media-figure {
	display: contents;
}

.photo-caption {
	display: flex;
	flex-direction: column;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--ease);
}

.photo-caption .eyebrow {
	margin-bottom: var(--text-spacing-xsmall);
}

.photo-caption p {
	margin: 0;
}

.photo-caption p + p {
	margin-top: 12px;
}

/* Hover affordance setup - !important on the media transition because the
 * global paint-in rule also sets transition on the same selector. */
.has-photo-caption .media {
	cursor: help;
	transition:
		border-radius 0.3s var(--ease),
		box-shadow 0.3s var(--ease),
		mix-blend-mode 0.3s var(--ease),
		opacity 1.2s var(--ease) !important;
}

.has-photo-caption .media img {
	transition:
		mix-blend-mode 0.3s var(--ease),
		scale 0.3s var(--ease);
}

.has-photo-caption .media::after {
	transition: opacity 0.3s var(--ease);
}

/* Fade the non-media, non-caption grid children so the photo isolates on hover.
 * Direct-child combinator on .container.grid catches .content, .body, .heading,
 * .secondary-heading, .description - whatever the module uses. */
.has-photo-caption > .container.grid > *:not(.media):not(.photo-caption) {
	transition: opacity 0.3s var(--ease);
}

/* Lifted media state - fires on media hover/focus OR when the caption itself
 * is hovered (so the caption is interactive and doesn't close on mouse-over). */
.has-photo-caption .media:hover,
.has-photo-caption .media:focus,
.has-photo-caption:has(.photo-caption:hover) .media {
	border-radius: 32px;
	box-shadow: 0 16px 32px 8px rgba(0, 0, 0, 0.15);
	mix-blend-mode: normal;
	z-index: 2;
}

.has-photo-caption .media:hover img,
.has-photo-caption:has(.photo-caption:hover) .media img {
	mix-blend-mode: normal;
	scale: 1;
}

.has-photo-caption .media:hover::after,
.has-photo-caption:has(.photo-caption:hover) .media::after {
	opacity: 0;
}

.has-photo-caption:has(.media:hover),
.has-photo-caption:has(.photo-caption:hover) {
	opacity: 1 !important;
}

/* `.module` is doubled on the front to bump specificity above story.css's
 * .module.story.display-{style}:has(.media[data-jazzy-scroll].animated-in)
 * stagger reveal (which sets opacity: 1 on these same children). Without
 * this, the scroll-in stagger and the hover fade would tie on specificity
 * and source-order would let story.css win, leaving the headings visible
 * during the photo-caption hover. */
.module.has-photo-caption:has(.media:hover) > .container.grid > *:not(.media):not(.photo-caption),
.module.has-photo-caption:has(.photo-caption:hover) > .container.grid > *:not(.media):not(.photo-caption) {
	opacity: 0;
	pointer-events: none;
}

.has-photo-caption:has(.media:hover) .photo-caption,
.has-photo-caption:has(.photo-caption:hover) .photo-caption {
	opacity: 1;
	pointer-events: auto;
}

/* Page-wide dim - every module on the page drops to 15% opacity while a
 * photo-caption module is being hovered, so the subject photo is the only
 * thing reading at full color. */
body:has(.has-photo-caption .media:hover) section.module,
body:has(.has-photo-caption .photo-caption:hover) section.module {
	opacity: .15;
}

.tablet-only,
.mobile-only {
	display: none !important;
}

/*** Carousels ***/

.carousel,
.slick-list,
.slide,
.slick-track {
	height: 100%;
}

.carousel {
	margin: 0 var(--viewport-edge);
	overflow: visible;
	padding: 0 calc(var(--container-outer-margin) + var(--container-outer-padding));
	position: relative;
	width: 100vw;
}

.slick-track,
.carousel:not(.slick-initialized),
.scrolling-carousel:not(.slick-initialized) {
	display: flex;
	gap: var(--gap);
}

.carousel:not(.slick-initialized) .slide {
	flex-shrink: 0;
	width: calc(100% / 3 - 20px);
}

/** Slick Base **/

.slick-slider {
	box-sizing: border-box;
	position: relative;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: pan-y;
}

.slick-list {
	overflow: hidden;
	position: relative;
}

.slick-track {
	display: flex;
	left: 0;
	position: relative;
	top: 0;
}

.slick-slide {
	display: none;
	height: auto;
	min-height: 1px;
}

.slick-slide.slick-active,
.slick-slide.slick-current {
	display: block;
}

.slick-initialized .slick-slide {
	display: block;
}

.slick-initialized .slick-track {
	display: flex;
}

/*** Buttons ***/

.btn {
	border-radius: 50px;
	display: inline-block;
	font: 700 calc(18rem / 16)/1 var(--heading-font);
	letter-spacing: -0.1px;
	padding: calc(19rem / 16) calc(28rem / 16);
	transition: all .25s var(--ease);
}

/** Button - Primary **/

.btn.primary {
	background: var(--red);
	color: var(--white);
}

.btn.primary:hover {
	background: var(--deep-maroon);
}

/** Button - Secondary **/

.btn.secondary {
	background: var(--white);
	color: var(--red);
}

.btn.secondary:hover {
	background: var(--gold);
	color: var(--white);
}

/** Button - Tertiary **/

.btn.tertiary {
	background: none;
	color: var(--white);
	padding-left: 0;
	padding-right: 0;
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-underline-offset: 6px;
}

.btn.tertiary:hover {
	text-decoration-color: var(--gold);
	text-underline-offset: 4px;
}

/** Button - Underline **/

.btn.underline {
	background: none;
	border-bottom: 2px solid currentColor;
	border-radius: 0;
	padding: 0 0 2px;
}

/** Button - Icon **/

.btn.icon {
	align-items: center;
	border-radius: 100%;
	display: flex;
	justify-content: center;
}

/*** Form Styles ***/

.gform_fields {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
}

input[type=email],
input[type=text],
input[type=tel],
select,
textarea {

}

input[type=email]:focus,
input[type=text]:focus,
input[type=tel]:focus,
select:focus,
textarea:focus {
	outline: none;
}

input[type=email]::placeholder,
input[type=text]::placeholder,
input[type=tel]::placeholder,
select::placeholder,
textarea::placeholder,
select:invalid /* Mark your selects as 'required' to get 'placeholder' styling! */ {
	opacity: 1;
}

.gform_validation_errors {
	display: none !important;
}

.validation_message {
	color: red;
	font-size: calc(12rem / 16);
	font-style: italic;
	padding-top: 4px;
}

/*** Lightboxes ***/

dialog::backdrop {
	background: var(--black);
	opacity: .6;
}

.white-popup-block {
	background: var(--black);
	border: none;
	margin: auto;
	max-width: 80vw;
	padding: 0;
	width: 100%;
}

.white-popup-block video,
.white-popup-block iframe {
	aspect-ratio: 16/9;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.white-popup-block .close-popup {
	border: none;
	padding: 0;
	position: absolute;
	right: var(--text-spacing-xxsmall);
	top: var(--text-spacing-xxsmall);
}

/*** Accordions ***/

.accordion > :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}

.accordion button {
	align-items: center;
	background: none;
	border: none;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--text-spacing-small);
	padding: var(--text-spacing-medium) 0;
	text-align: left;
	width: 100%;
}

.accordion:not(.active) > :nth-child(n + 2) {
	display: none;
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.accordion.active > :nth-child(n + 2) {
	display: block;
	opacity: 1;
}

.accordion button .expand,
.accordion button .collapse {
	flex-shrink: 0;
}

.accordion:not(.active) .collapse,
.accordion.active .expand {
	display: none;
}

/*** Content Styles ***/

.content-styles p {
	margin: 0;
}

.content-styles p + p {
	margin-top: 12px;
}

.content-styles a:not([class]) {
	color: var(--red);
	font-weight: bold;
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
}

.content-styles a:not([class]):hover {
	text-decoration-color: var(--deep-maroon);
	text-underline-offset: 2px;
}

.content-styles ul:not([class]) {

}

.content-styles ul:not([class]) li {

}

.content-styles ol:not([class]) li {

}

.content-styles h2:not([class^="heading-"]),
.content-styles h4:not([class^="heading-"]) {
	margin-bottom: var(--text-spacing-xsmall);
}

.content-styles h3:not([class^="heading-"]) {
	margin-bottom: var(--text-spacing-xxsmall);
}

.content-styles * + h2:not([class^="heading-"]),
.content-styles * + h3:not([class^="heading-"]),
.content-styles * + h4:not([class^="heading-"]) {
	margin-top: var(--module-spacing-medium);
}

.alignleft {
	float: left;
	margin-right: 15px;
}

.alignright {
	float: right;
	margin-left: 15px;
}

.aligncenter {
	display: block;
	margin: 0 auto 20px;
}

.alignnone {
	display: block;
	margin: 0 0 20px;
}

.wp-caption {
	max-width: 100%;
}

/*
 * ====================================================================== *
 * Header Styles
 * ====================================================================== *
 */

#header {
	padding: var(--text-spacing-xxlarge) 0 0;
	position: relative;
	z-index: 10;
}

#header > .container-full {
	padding-left: 60px;
	padding-right: 80px;
}

#header .flex-container {
	align-items: center;
}

#header .logo {
	color: var(--deep-maroon);
	display: block;
	text-decoration: none;
}

#header .logo svg {
	display: block;
	height: auto;
	width: calc(190rem / 16);
}

.alert-bar.desktop-only ~ #header {
	margin-top: 38px;
}

#header nav .menu {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xlarge);
}

#header nav .menu.has-scroll:before {
	background: linear-gradient(to bottom, transparent, var(--off-white));
	bottom: 0;
	content: '';
	height: 140px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: all 0.25s var(--ease);
	width: 100%;
	z-index: 5;
}

#header nav .menu.has-scroll:has(.menu-item-has-children.active):before {
	opacity: 1;
}

#header nav .menu > .menu-item > button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

#header nav .menu > .menu-item > a,
#header nav .menu > .menu-item > button {
	align-items: center;
	color: var(--deep-maroon);
	display: flex;
	justify-content: center;
	font: 700 calc(18rem / 16)/1 var(--heading-font);
}

#header nav .menu > li.btn-cta > a {
	color: var(--red);
}

#header nav .menu > .menu-item > .menu-caret {
	display: block;
	flex-shrink: 0;
}

#header nav .menu > .menu-item > .menu-caret svg {
	color: var(--deep-maroon);
}

#header nav .menu > .menu-item:hover > a,
#header nav .menu > .menu-item:hover > button {
	color: var(--red);
}

/*** Mega Menu ***/

@media (hover: hover) and (pointer: fine) {
	#header nav .menu li:hover .sub-menu {
		opacity: 1;
		pointer-events: auto;
		transform: translate3d(0, 0, 0);
		visibility: visible;
		z-index: 4;
	}
}

#header nav .menu .sub-menu {
	display: block;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	top: 100%;
	transform: translate3d(0, -15px, 0);
	transition: .25s var(--ease);
	visibility: hidden;
	z-index: -2;
}

/*** Alert Bar ***/

.alert-bar {
	background: var(--deep-maroon);
	color: var(--white);
	left: 0;
	margin: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding: var(--text-spacing-xxsmall) var(--container-outer-padding);
	position: absolute;
	text-align: center;
	top: 0;
	white-space: nowrap;
	width: 100%;
	z-index: 4;
}

/*
 * ====================================================================== *
 * Footer Styles
 * ====================================================================== *
 */

#footer {
	padding: var(--module-spacing-medium) 0 var(--text-spacing-large);
}

#footer > .container-full {
	padding-left: 60px;
	padding-right: 80px;
}

#footer .flex-container {
	align-items: center;
}

#footer .logo {
	color: var(--deep-maroon);
	display: block;
	text-decoration: none;
}

#footer .logo svg {
	display: block;
	height: auto;
	width: calc(190rem / 16);
}

#footer nav.menu ul {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xlarge);
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer nav.menu a {
	color: var(--deep-maroon);
	font: 700 calc(18rem / 16)/1 var(--heading-font);
}

#footer nav.menu > ul > li.btn-cta > a {
	color: var(--red);
}

#footer nav.menu a:hover {
	color: var(--red);
}

#footer .copyright {
	color: var(--maroon);
	font-size: calc(18rem / 16);
	line-height: calc(40 / 18);
	margin: var(--text-spacing-small) 0 0;
}

/*** Sticky Toast ***/

.sticky-toast {
	background: var(--black);
	bottom: 10px;
	box-shadow: -15px 15px 40px rgba(0,0,0,.15);
	color: var(--white);
	max-width: calc(100% - 20px);
	opacity: 1;
	padding: var(--text-spacing-medium);
	pointer-events: auto;
	position: fixed;
	right: 10px;
	transition: opacity .1s var(--ease), visibility .1s var(--ease);
	visibility: visible;
	width: 360px;
	z-index: 99;
}

.sticky-toast.hidden {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.sticky-toast button {
	background: none;
	border: none;
	border-radius: 0;
	color: var(--white);
	font-size: calc(18rem / 16);
	line-height: 0;
	padding: 9px 12px;
	position: absolute;
	right: 5px;
	top: 5px;
}

.sticky-toast button:hover {
	opacity: .6;
}

.sticky-toast h2,
.sticky-toast p {
	margin-bottom: var(--text-spacing-xxsmall);
}

/*
 * ====================================================================== *
 * Default Page Styles
 * ====================================================================== *
 */

.page-content {
	padding: var(--module-spacing-large) 0;
}

.page-content article {
	grid-column: 3 / span 8;
}

.page-content article h1 {
	margin-bottom: var(--text-spacing-small);
}

/** 404 Page **/

.error404 .page-content article {
	text-align: center;
}

.error404 .page-content p.heading-6 {
	margin-bottom: var(--text-spacing-large);
}

/*
 * ====================================================================== *
 * Page Builder Styles
 * ====================================================================== *
 */

.module.margin-spacing-small {
	margin-top: var(--module-spacing-small);
}

.module.margin-spacing-medium {
	margin-top: var(--module-spacing-medium);
}

.module.margin-spacing-large {
	margin-top: var(--module-spacing-large);
}

.module.margin-spacing-xlarge {
	margin-top: var(--module-spacing-xlarge);
}

.page-builder .module:last-child:not() {
	margin-bottom: var(--module-spacing-xlarge);
}

/*
 * ====================================================================== *
 * Archive Styles
 * ====================================================================== *
 */

/*** Archive Content ***/

.archive-content {
	padding-bottom: var(--module-spacing-large);
}

.archive-content .grid > form {
	grid-column: span 3;
}

.archive-content .grid > article  {
	grid-column: span 9;
}

.archive-content.loading {
	pointer-events: none;
}

body:has(.archive-content.loading):after {
	background: var(--black);
	content: '';
	height: 100dvh;
	left: 0;
	opacity: .5;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 4;
}

.archive-content.loading #sidebar-container,
.archive-content.loading [jx-form-results] {
	opacity: .5;
}

.archive-content:not(.loading) .svg-loader {
	display: none;
}

.archive-content .svg-loader{
	left: 50%;
	position: fixed;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 5;
}

.archive-content .loader-svg {
	fill: none;
	left: 0;
	position: absolute;
	stroke: var(--white);
	stroke-linecap: round;
	stroke-width: 5px;
	top: 0;
}

.archive-content .loader-svg.bg {
	stroke: var(--black);
	stroke-width: 8px;
}

.archive-content .animate {
	animation: fill-animation 1s cubic-bezier(1,1,1,1) 0s infinite;
	stroke-dasharray: 242.6;
}

@keyframes fill-animation{
	0%{
		stroke-dasharray: 40 242.6;
		stroke-dashoffset: 0;
	}
	50%{
		stroke-dasharray: 141.3;
		stroke-dashoffset: 141.3;
	}
	100%{
		stroke-dasharray: 40 242.6;
		stroke-dashoffset: 282.6;
	}
}

.archive-content #open-filters,
.archive-content #close-filters {
	display: none;
}

/** Sort **/

.archive-content .sort-bar .results-count {
	margin: 0;
	transition: opacity .25s var(--ease);
}

.archive-content .sort-bar .results-count > [jx-form-results-count="1"] + .s {
	display: none;
}

.archive-content .sort-bar .results-count:has([jx-form-results-count]:empty) {
	opacity: 0;
}

.archive-content .sort {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-xsmall);
	position: absolute;
	right: var(--container-outer-padding);
	top: 0;
}

/** Filters **/

.archive-content .search-sort {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xxsmall);
	justify-content: space-between;
	margin-bottom: var(--text-spacing-medium);
	position: relative;
}

.archive-content .search-sort label {
	margin: 0;
}

.archive-content .search-sort .search-container {
	align-items: center;
	display: flex;
	position: relative;
	width: 100%;
}

.archive-content .search-sort input[type="text"] {
	width: 100%;
}

.archive-content form ul {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	list-style: none;
	margin: 0;
	padding: 0;
}

.archive-content form ul li.accordion > ul {
	gap: var(--text-spacing-xxsmall);
	margin: var(--text-spacing-xxsmall) 0 0;
}

.archive-content form ul li.accordion.active > ul {
	display: flex;
}

.archive-content .filters > li {
	border-bottom: 1px solid var(--black);
	padding-bottom: var(--text-spacing-xsmall);
}

.archive-content .filters button {
	align-items: center;
	background: none;
	border: none;
	padding: 0;
	text-align: left;
	width: 100%;
}

.archive-content .filters h3 {
	margin: 0;
}

.archive-content .filters label {
	display: block;
	line-height: var(--label-line-height);
	padding-left: var(--text-spacing-small);
	position: relative;
	--label-line-height: calc(24em / 16);
}

.archive-content .filters label:before,
.archive-content .filters label:after {
	content: '';
	position: absolute;
}

.archive-content .filters label:before {
	border: 1px solid var(--black);
	height: 11px;
	left: 0;
	top: calc((var(--label-line-height) - 11px) / 2);
	width: 11px;
}

.archive-content .filters label:after {
	background: var(--black);
	height: 7px;
	left: 3px;
	opacity: 0;
	top: calc((var(--label-line-height) - 11px) / 2 + 3px);
	width: 7px;
}

.archive-content .filters input:checked + label:after {
	opacity: 1;
}

/** Results **/

.archive-content article [jx-form-results-items] {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	line-height: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}

/** Pagination **/

.jazzy-ajax-form-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-small);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jazzy-ajax-form-pagination a {
	display: block;
}

.jazzy-ajax-form-pagination a:hover,
.jazzy-ajax-form-pagination .current {
	color: var(--black);
}

.jazzy-ajax-form-pagination .current {
	font-weight: 600;
}

.archive-content .btn.primary.load-more-complete {
	display: none;
}

/*
 * ====================================================================== *
 * MQ >=1778px — Container Cap
 * ====================================================================== *
 */

@media only screen and (min-width: calc(1778rem / 16)) {

	:root {
		--container-width: var(--container-max-width);
		--one-column-width: 88px;
	}

}

/*
 * ====================================================================== *
 * MQ <=1400px — Smaller Desktop
 * ====================================================================== *
 */

@media only screen and (max-width: calc(1400rem / 16)) {

	:root {
		--container-width: 100%;
		--container-outer-margin: 0px;
	}

}

/*
 * ====================================================================== *
 * MQ <=1200px — Laptop
 * ====================================================================== *
 */

@media only screen and (max-width: calc(1200rem / 16)) {

	:root {
		--container-outer-padding: 40px;
	}

	#header > .container-full,
	#footer > .container-full {
		padding-left: var(--container-outer-padding);
		padding-right: var(--container-outer-padding);
	}

	html.active,
	html.active body {
		height: 100%;
		overflow: hidden;
	}

	/* Header */

	#header {
		position: relative;
	}

	#header.active {
		position: absolute;
	}

	#header .logo {
		margin: 0;
		position: relative;
		z-index: 99999;
	}

	#header .mobile-menu {
		align-items: center;
		background: var(--sand);
		border: 0;
		cursor: pointer;
		display: flex !important;
		flex-direction: column;
		height: 60px;
		justify-content: center;
		margin: 0 0 0 auto;
		overflow: visible;
		position: relative;
		width: 60px;
		z-index: 99999;
		--menu-bar-height: 3px; /*Height of an individual menu bar*/
		--menu-bar-margin: 4px; /*Amount of spacing between the menu bars*/
		--menu-bar-width: 25px; /*Width of the menu bars*/
	}

	#header .mobile-menu:focus-visible {
		outline: 2px solid var(--deep-maroon);
		outline-offset: 2px;
	}

	#header.active .mobile-menu:focus-visible {
		outline-color: var(--deep-maroon);
	}

	#header .mobile-menu span:not(.accessibility) {
		background: var(--deep-maroon);
		border-radius: 1px;
		display: block;
		height: var(--menu-bar-height);
		position: relative;
		width: var(--menu-bar-width);
	}

	#header .mobile-menu span:nth-of-type(2) {
		margin: var(--menu-bar-margin) 0;
	}

	/* Close */

	#header.active .mobile-menu span:nth-of-type(1) {
		transform: translateY(calc(var(--menu-bar-height) + var(--menu-bar-margin))) rotate(45deg);
	}

	#header.active .mobile-menu span:nth-of-type(2) {
		margin-right: auto;
		width: 0;
	}

	#header.active .mobile-menu span:nth-of-type(3) {
		transform: translateY(calc((var(--menu-bar-height) + var(--menu-bar-margin)) * -1)) rotate(-45deg);
	}

	/* Nav */

	#header nav {
		align-items: center;
		background: var(--sand);
		display: flex;
		flex-direction: column;
		height: 100dvh;
		justify-content: center;
		left: 0;
		margin-left: 0;
		opacity: 0;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 20px;
		position: absolute;
		top: 0;
		transition: .3s;
		visibility: hidden;
		width: 100%;
		z-index: 9999;
	}

	#header.active nav {
		opacity: 1;
		visibility: visible;
	}

	#header nav .menu {
		align-items: start;
		background: var(--sand);
		flex-direction: column;
		gap: var(--text-spacing-xlarge);
		justify-content: safe center;
		left: 0;
		line-height: 1;
		min-height: 100%;
		overflow: auto;
		padding: 110px var(--container-outer-padding);
		position: relative;
		text-align: center;
		top: 0;
		width: 100%;
		z-index: 1;
	}

	#header nav .menu > li {
		padding: 0;
		width: 100%;
	}

	#header nav .menu > .menu-item-has-children > button,
	#header nav .menu > .menu-item-has-children > a {
		color: var(--deep-maroon);
	}

	/* Dropdown */

	#header nav .menu > li > .sub-menu,
	#header nav .menu > li:hover > .sub-menu {
		align-items: flex-start;
		background: unset;
		display: none;
		opacity: 0;
		overflow-y: auto;
		pointer-events: none;
		position: static;
		top: unset;
		transform: translate3d(0, 0, 0);
		visibility: hidden;
		width: 100%;
		z-index: 1;
	}

	#header nav .menu > li.active > .sub-menu {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		gap: 16px;
		opacity: 1;
		padding: 16px 12px 12px;
		pointer-events: auto;
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	/* Archive */

	.archive-content [data-jazzy-scroll] {
		transform: unset !important;
	}

	.archive-content .grid {
		gap: 0;
	}

	.archive-content .grid > form,
	.archive-content .grid > article {
		grid-column: 1 / -1;
	}

	.archive-content #open-filters {
		background: none;
		border: none;
		display: flex;
		max-width: max-content;
		padding: 0;
	}

	.archive-content .sidebar-container {
		background: var(--white);
		height: 100dvh;
		left: unset;
		max-width: 310px;
		overflow: auto;
		padding: var(--text-spacing-xlarge) var(--text-spacing-small) var(--text-spacing-small);
		pointer-events: none;
		position: fixed;
		right: 0;
		top: 0;
		transform: translate3d(100%, 0, 0);
		transition: transform 0.25s var(--ease), visibility 0.25s var(--ease);
		visibility: hidden;
		width: 100vw;
		z-index: 99999;
	}

	.archive-content .sidebar-container.active {
		pointer-events: auto;
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.archive-content .sidebar-container #close-filters {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
	}

}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(950rem / 16)) {

	:root {
		--body-scale: 0.92;
		--heading-scale: 0.91;
		--module-spacing-medium: 64px;
		--module-spacing-large: 100px;
		--module-spacing-xlarge: 120px;
	}

	#header {
		padding-top: var(--container-outer-padding);
	}

	.tablet-only {
		display: block !important;
	}

	.desktop-only {
		display: none !important;
	}

	.alert-bar.desktop-only + header {
		margin-top: 0; /* If the alert bar next to the header is desktop-only, there is no mobile version */
	}

	#header nav .menu > .menu-item > a,
	#header nav .menu > .menu-item > button {
		font-size: calc(24rem / 16);
	}

	/* Photo caption switches from hover-reveal to a native popover at tablet -
	 * desktop's lift + cross-fade doesn't work on touch. JS (script.js) adds
	 * the `popover` attribute to the figcaption, and a tap on the media calls
	 * showPopover() so the caption opens in the browser's top layer with
	 * native backdrop, ESC, and outside-tap dismissal handled by the
	 * platform. Desktop hover rules are neutralized below so a tap-fires
	 * :hover doesn't stick the image lifted alongside the popover. */

	.has-photo-caption .media {
		cursor: pointer;
	}

	/* Force-hide the figcaption when the popover isn't open. The UA stylesheet
	 * sets `display: none` on `[popover]:not(:popover-open)` but the global
	 * `.photo-caption { display: flex }` rule from desktop wins on origin
	 * priority, leaving the caption visible in flow until the popover fires.
	 * This rule re-asserts the hidden default with higher specificity. */
	.photo-caption[popover]:not(:popover-open) {
		display: none;
	}

	.photo-caption:popover-open {
		align-items: center;
		background: color-mix(in srgb, var(--maroon) 95%, transparent);
		border: 0;
		border-radius: 16px;
		color: var(--white);
		display: flex;
		flex-direction: column;
		gap: 0;
		margin: auto !important;
		max-height: 90vh;
		max-width: min(560px, 90vw);
		opacity: 1;
		overflow-y: auto;
		padding: var(--text-spacing-large) !important;
		pointer-events: auto;
		position: fixed !important;
		text-align: center;
		visibility: visible;
	}

	.caption-close {
		align-items: center;
		background: color-mix(in srgb, var(--white) 15%, transparent);
		border: 0;
		border-radius: 50%;
		color: var(--white);
		cursor: pointer;
		display: flex;
		font-size: calc(28rem / 16);
		height: 36px;
		justify-content: center;
		line-height: 1;
		padding: 0;
		position: absolute;
		right: 12px;
		top: 12px;
		transition: background 0.2s var(--ease);
		width: 36px;
	}

	.caption-close:hover,
	.caption-close:focus-visible {
		background: color-mix(in srgb, var(--white) 30%, transparent);
		outline: none;
	}

	/* Cloned image (script.js inserts at top of figcaption) - sized to fit
	 * the popover and capped so the caption text below stays in view. */
	.photo-caption:popover-open .popover-image {
		border-radius: 8px;
		display: block;
		flex-shrink: 0;
		height: auto;
		margin: 0 0 var(--text-spacing-medium);
		max-height: 50vh;
		max-width: 100%;
		object-fit: contain;
		width: auto;
	}

	.photo-caption:popover-open .eyebrow {
		color: var(--gold);
	}

	.photo-caption::backdrop {
		backdrop-filter: blur(2px);
		background: color-mix(in srgb, var(--black) 60%, transparent);
	}

	/* Neutralize the desktop hover lift - a tap fires :hover on touch and
	 * would otherwise stick the image lifted while the popover also opens.
	 * Each selector prefixes `.module` to bump specificity above the desktop
	 * rule (3 → 4 classes), guaranteeing the override regardless of source
	 * order or any future module-prefixed desktop rule. */
	.module.has-photo-caption .media:hover,
	.module.has-photo-caption .media:focus,
	.module.has-photo-caption:has(.photo-caption:hover) .media {
		border-radius: inherit;
		box-shadow: none;
		mix-blend-mode: darken;
		z-index: auto;
	}

	.module.has-photo-caption .media:hover img,
	.module.has-photo-caption:has(.photo-caption:hover) .media img {
		mix-blend-mode: multiply;
		scale: 1;
	}

	.module.has-photo-caption .media:hover::after,
	.module.has-photo-caption:has(.photo-caption:hover) .media::after {
		opacity: 1;
	}

	/* Don't fade other modules at mobile - the popover handles isolation
	 * via its own ::backdrop. */
	body:has(.module.has-photo-caption .media:hover) section.module,
	body:has(.module.has-photo-caption .photo-caption:hover) section.module {
		opacity: 1;
	}

	.module.has-photo-caption:has(.media:hover) > .container.grid > *:not(.media):not(.photo-caption),
	.module.has-photo-caption:has(.photo-caption:hover) > .container.grid > *:not(.media):not(.photo-caption) {
		opacity: 1;
		pointer-events: auto;
	}

	/* Footer */

	#footer {
		padding-top: var(--module-spacing-large);
	}

	#footer .flex-container {
		flex-direction: column;
		gap: var(--text-spacing-medium);
		text-align: center;
	}

	#footer .copyright {
		text-align: center;
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media only screen and (max-width: calc(650rem / 16)) {

	:root {
		--container-outer-padding: 20px;
		--grid: 1fr;
		--body-scale: 0.83;
		--heading-scale: 0.82;
		--module-spacing-large: 64px;
		--module-spacing-xlarge: 80px;
	}

	.mobile-only {
		display: block !important;
	}

	/* Header */

	#header .logo svg {
		width: calc(140rem / 16);
	}

	/* Footer */

	#footer .logo svg {
		width: calc(140rem / 16);
	}

	#footer nav.menu ul {
		flex-direction: column;
		gap: var(--text-spacing-xsmall);
	}

}

/*
 * ====================================================================== *
 * Accessibility Reduced Motion
 * ====================================================================== *
 */

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}

	section {
		scroll-margin-top: 130px;
	}

	/* JazzyScroll Animations */

	[data-jazzy-scroll] {
		pointer-events: none;
		transition-duration: .8s;
		transition-property: opacity, transform;
		transition-timing-function: var(--ease);
	}

	[data-jazzy-scroll].animated-in {
		pointer-events: all;
	}

	/* All fade ins - opacity-only reveals need both a longer duration AND a
	 * different curve than the rest of the site. The global var(--ease) is
	 * an easeOut (fast start, slow tail), which front-loads opacity and makes
	 * fades feel like a snap. For storytelling fades we want the opposite:
	 * slower-in-than-out, so content seems to emerge from nothing rather
	 * than pop in. This is the only spot on the site that departs from
	 * var(--ease). */

	[data-jazzy-scroll*="fade-in"] {
		opacity: 0;
		transition-duration: 1.8s;
		transition-property: opacity;
		transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
	}

	[data-jazzy-scroll*="fade-in"].animated-in {
		opacity: 1;
	}

	/* Fade in up */

	/* Word-by-word reveal - get_heading_html() wraps each word in a .word span and the whole heading in [data-jazzy-scroll="words"]. Global: any heading the helper emits staggers word-by-word on scroll-in, the .word-index custom prop drives the per-word delay. */

	[data-jazzy-scroll="words"] .word {
		display: inline-block;
		opacity: 0;
		transform: translate3d(0, 0.25em, 0) scale(.975);
		transition:
			opacity 0.6s var(--ease),
			transform 0.6s var(--ease);
		transition-delay: calc(var(--word-index, 0) * 0.05s);
	}

	[data-jazzy-scroll="words"].animated-in .word {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}

	/* Color stagger - .blue and .green start as the inherited heading color and shift to their target color after the word reveal completes. Blue fires first, green follows. */

	[data-jazzy-scroll="words"] :is(.blue, .green) {
		color: inherit;
		transition: color 0.6s var(--ease);
		transition-delay: 0.8s;
	}

	[data-jazzy-scroll="words"] .green {
		transition-delay: 1.1s;
	}

	[data-jazzy-scroll="words"].animated-in .blue {
		color: var(--blue);
	}

	[data-jazzy-scroll="words"].animated-in .green {
		color: var(--olive);
	}

	/* Mobile: kill the per-word stagger and color cross-fade in favor of a
	 * cheap 0.35s opacity fade on the wrapper - keeps the reveal cue without
	 * the layout thrash from staggered transforms across many spans. */
	@media only screen and (max-width: calc(650rem / 16)) {

		[data-jazzy-scroll="words"] {
			opacity: 0;
			transition: opacity 0.35s var(--ease);
		}

		[data-jazzy-scroll="words"].animated-in {
			opacity: 1;
		}

		[data-jazzy-scroll="words"] .word {
			opacity: 1;
			transform: none;
			transition: none;
			transition-delay: 0s;
		}

		[data-jazzy-scroll="words"] :is(.blue, .green) {
			transition: none;
			transition-delay: 0s;
		}

		[data-jazzy-scroll="words"] .blue {
			color: var(--blue);
		}

		[data-jazzy-scroll="words"] .green {
			color: var(--olive);
		}

	}

	[data-jazzy-scroll="fade-in-up"] {
		position: relative;
		transform: translate3d(0, 60px, 0);
		transition-property: opacity, transform;
	}

	[data-jazzy-scroll="fade-in-up"].animated-in {
		transform: translate3d(0, 0, 0);
	}

	/* Paint-in - immersive media start fully covered by sand AND slightly zoomed (1.08), then over 2.5s the sand fades away and the image settles to 1:1. The combined motion reads as a slow Ken Burns reveal. Overrides fade-in-up's transform/opacity by higher specificity. */

	.media.display-immersive[data-jazzy-scroll] {
		opacity: 1;
		transform: none;
	}

	.media.display-immersive[data-jazzy-scroll]::before {
		background: var(--sand);
		content: '';
		inset: 0;
		pointer-events: none;
		position: absolute;
		transition: opacity 2.5s var(--ease);
		z-index: 1;
	}

	.media.display-immersive[data-jazzy-scroll] img {
		opacity: 0;
		scale: 0.94;
		transition:
			scale 2.8s var(--ease),
			opacity 1.2s var(--ease);
	}

	.media.display-immersive[data-jazzy-scroll].animated-in::before {
		opacity: 0;
	}

	.media.display-immersive[data-jazzy-scroll].animated-in img {
		opacity: 1;
		scale: 1;
	}

	/* Header */

	header .mobile-menu span:not(.accessibility) {
		transition: .3s;
	}

	/* Zoom Images */

	a:hover .image-zoom img,
	button:hover .image-zoom img {
		transform: scale(1.05);
	}

}

/*
 * ====================================================================== *
 * Toolbar
 * ====================================================================== *
 */

body.admin-bar {
	--wp-admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--wp-admin-bar-height: 46px;
	}
}

body.admin-bar header,
body.admin-bar .alert-bar,
body.admin-bar .sticky-menu {
	top: var(--wp-admin-bar-height);
}

@media only screen and (max-width: calc(75rem)) {
	body.admin-bar header {
		top: 0;
	}
}