/* =========================================================
   Crossover Norman — design-system helpers
   Native Divi settings handle structure, backgrounds,
   spacing, and colors. This file adds only what the
   builder can't express: fluid clamp() type roles,
   outlined text, the marquee, chips, the schedule list,
   the collage, and nav/footer refinements.
   ========================================================= */

:root {
	--xo-ink: #141414;
	--xo-paper: #FAF6EF;
	--xo-royal: #2050C0;
	--xo-brick: #C23B2A;
	--xo-gold: #E2A72E;
	--xo-serif: 'ivypresto-display', 'Didot', 'Bodoni 72', Georgia, serif;
	--xo-ext: 'termina', sans-serif;
	--xo-sans: 'acumin-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
	font-family: var(--xo-sans);
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------ type roles ---- */

/* Label / eyebrow: Termina 600, tracked-out uppercase */
.xo-eyebrow,
.xo-eyebrow p {
	font-family: var(--xo-ext);
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(10px, 1.3vw, 11.5px);
	line-height: 1;
	letter-spacing: .24em;
}

/* Hero H1, line 1: big italic serif */
.xo-h1-serif {
	display: block;
	font-family: var(--xo-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(48px, 8.6vw, 108px);
	line-height: 1;
	letter-spacing: -.01em;
	text-transform: none;
}

/* Hero H1, line 2: extended display sans (Termina @ .84 scale) */
.xo-h1-ext {
	display: block;
	font-family: var(--xo-ext);
	font-weight: 700;
	text-transform: uppercase;
	font-size: calc(clamp(36px, 7.4vw, 94px) * .84);
	line-height: 1.04;
	letter-spacing: .005em;
}

/* Section H2: serif display with optional italic .xo-it span */
.xo-h2,
h2.xo-h2 {
	font-family: var(--xo-serif);
	font-weight: 400;
	font-size: clamp(38px, 5.6vw, 64px);
	line-height: 1.04;
	letter-spacing: -.01em;
	margin: 14px 0 18px;
}
.xo-it {
	font-style: italic;
}

/* Sub-page hero H1: serif, slightly smaller than home hero */
.xo-page-h1,
h1.xo-page-h1 {
	font-family: var(--xo-serif);
	font-weight: 400;
	font-size: clamp(48px, 7vw, 88px);
	line-height: 1.02;
	letter-spacing: -.01em;
	margin: 14px 0 18px;
}

/* Lead paragraph */
.xo-lead,
.xo-lead p {
	font-family: var(--xo-sans);
	font-weight: 400;
	font-size: clamp(15.5px, 1.9vw, 18px);
	line-height: 1.65;
	max-width: 56ch;
}

/* Outlined (hollow) text */
.xo-outline {
	color: transparent;
	-webkit-text-stroke: 1.1px currentColor;
}
.xo-outline-block {
	display: block;
	color: transparent;
	-webkit-text-stroke: 1.1px currentColor;
}

/* ------------------------------------------------ buttons ---- */
/* Applied to Divi Button modules via CSS class. */

body #page-container .et_pb_button.xo-btn {
	font-family: var(--xo-ext);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .08em;
	line-height: 1;
	padding: 13px 22px;
	border-radius: 999px;
	border: 2px solid var(--xo-ink);
	background: transparent;
	color: var(--xo-ink);
	transition: all .15s ease;
}
body #page-container .et_pb_button.xo-btn:after {
	display: none;
}
body #page-container .et_pb_button.xo-btn:hover {
	padding: 13px 22px;
}
body #page-container .et_pb_button.xo-btn-solid {
	background: var(--xo-ink);
	color: var(--xo-paper);
}
body #page-container .et_pb_button.xo-btn-solid:hover {
	background: var(--xo-brick);
	border-color: var(--xo-brick);
	color: #fff;
}
body #page-container .et_pb_button.xo-btn-gold {
	background: var(--xo-gold);
	border-color: var(--xo-gold);
	color: var(--xo-ink);
}
body #page-container .et_pb_button.xo-btn-gold:hover {
	filter: brightness(1.06);
}
body #page-container .et_pb_button.xo-btn-ghostw {
	border-color: #fff;
	color: #fff;
	background: transparent;
}
body #page-container .et_pb_button.xo-btn-ghostw:hover {
	background: #fff;
	color: var(--xo-ink);
}
/* White podcast pill with play glyph */
body #page-container .et_pb_button.xo-btn-pod {
	background: #fff;
	border-color: #fff;
	color: var(--xo-ink);
	font-size: 10.5px;
	padding: 13px 22px;
}

/* ------------------------------------------------ header ---- */

.xo-nav {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.xo-nav .et_pb_menu__menu > nav > ul {
	column-gap: 22px;
}
.xo-nav .et_pb_menu__menu > nav > ul > li > a {
	font-family: var(--xo-ext);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .1em;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
}
.xo-nav .et_pb_menu__menu > nav > ul > li > a:hover {
	border-color: var(--xo-ink);
	opacity: 1;
}
.xo-nav .et_pb_menu__menu > nav > ul > li.current-menu-item:not(.xo-give-btn) > a {
	border-color: var(--xo-ink);
}
/* GIVE menu item as a solid pill button */
.xo-nav .et_pb_menu__menu > nav > ul > li.xo-give-btn > a {
	background: var(--xo-ink);
	color: var(--xo-paper);
	border: 2px solid var(--xo-ink);
	border-radius: 999px;
	padding: 11px 20px;
	letter-spacing: .08em;
	transition: all .15s ease;
}
.xo-nav .et_pb_menu__menu > nav > ul > li.xo-give-btn > a:hover {
	background: var(--xo-brick);
	border-color: var(--xo-brick);
	color: #fff;
}
/* Mobile menu: keep the same label styling */
.xo-nav .et_mobile_menu li a {
	font-family: var(--xo-ext);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .1em;
}

/* --------------------------------------------- section rhythm ---- */

/* Standard fluid section padding (concept: clamp(64px,9vw,110px) 0) */
.et_pb_section.xo-sec {
	padding: clamp(64px, 9vw, 110px) 0;
}
.et_pb_section.xo-footer {
	padding: clamp(52px, 7vw, 84px) 0 34px;
}

/* ------------------------------------------------ hero ---- */

.xo-hero {
	display: flex;
	align-items: flex-end;
	min-height: min(92vh, 760px);
}
.xo-hero > .et_pb_row {
	width: 100%;
}
/* Element rhythm inside the hero is carried by explicit margins;
   suppress Divi's default module spacing so the stack bottoms out
   at the section's 58px padding like the concept. */
.xo-hero .et_pb_module {
	margin-bottom: 0;
}
.xo-hero .et_pb_button_module_wrapper {
	margin-bottom: 0;
}

/* Meta row: gold-dot separated items, one Text module */
.xo-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	font-family: var(--xo-ext);
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(10.5px, 1.3vw, 12.5px);
	line-height: 1;
	letter-spacing: .13em;
}
.xo-meta span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.xo-meta span::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--xo-gold);
	flex: none;
}

/* ------------------------------------------------ marquee ---- */

.xo-marquee {
	overflow: hidden;
	padding: 15px 0;
}
.xo-marquee-track {
	display: inline-block;
	white-space: nowrap;
	animation: xo-marquee-move var(--xo-marquee-speed, 30s) linear infinite;
	font-family: var(--xo-ext);
	font-weight: 700;
	text-transform: uppercase;
	font-size: calc(clamp(14px, 1.9vw, 20px) * .84);
	line-height: 1;
	letter-spacing: .05em;
}
.xo-marquee-track .xo-o {
	color: transparent;
	-webkit-text-stroke: 1.2px var(--xo-paper);
}
.xo-marquee-track em {
	font-family: var(--xo-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--xo-gold);
	padding: 0 6px;
}
@keyframes xo-marquee-move {
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.xo-marquee-track { animation: none; }
}

/* ------------------------------------------------ cards ---- */
/* Colored columns get radius/padding natively; this handles type + flex */

.xo-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 210px;
}
.xo-card h3 {
	font-family: var(--xo-ext);
	font-weight: 700;
	text-transform: uppercase;
	font-size: calc(clamp(17px, 1.8vw, 22px) * .84);
	line-height: 1.14;
	letter-spacing: .02em;
	padding-bottom: 0;
}
.xo-card p {
	font-family: var(--xo-sans);
	font-size: 13.5px;
	line-height: 1.55;
	opacity: .94;
	margin-top: 12px;
	padding-bottom: 0;
}
.xo-card .xo-go {
	font-family: var(--xo-ext);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 9.5px;
	line-height: 1;
	letter-spacing: .12em;
	margin-top: 18px;
}
/* Serif italic step numbers (I'm New page) */
.xo-card .xo-num {
	font-family: var(--xo-serif);
	font-style: italic;
	font-size: 2.6rem;
	line-height: 1;
	opacity: .85;
}

/* ------------------------------------------------ schedule list ---- */

.xo-semlist {
	margin-top: 34px;
	border-top: 2px solid var(--xo-ink);
}
.xo-semlist .xo-semrow {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 16px 4px;
	border-bottom: 1px solid rgba(20, 20, 20, .15);
}
.xo-semlist .xo-date {
	font-family: var(--xo-ext);
	font-weight: 700;
	text-transform: uppercase;
	font-size: calc(clamp(15px, 1.9vw, 21px) * .84);
	line-height: 1;
	min-width: 8ch;
}
.xo-semlist .xo-loc {
	font-family: var(--xo-sans);
	font-size: 14px;
	line-height: 1.4;
	color: #3d3a34;
}
.xo-semlist .xo-tag {
	font-family: var(--xo-ext);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 8.5px;
	line-height: 1;
	letter-spacing: .1em;
	padding: 5px 9px;
	border-radius: 999px;
	margin-left: auto;
	white-space: nowrap;
}
.xo-semlist .xo-tag-kick { background: var(--xo-gold); color: var(--xo-ink); }
.xo-semlist .xo-tag-tbd { background: transparent; border: 1.5px solid rgba(20, 20, 20, .35); color: #6b6659; }
.xo-semlist .xo-tag-oval { background: var(--xo-royal); color: #fff; }

/* Underlined text link ("FULL SEMESTER SCHEDULE →") */
.xo-textlink,
.xo-textlink a {
	display: inline-block;
	font-family: var(--xo-ext);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 10px;
	line-height: 1;
	letter-spacing: .12em;
	border-bottom: 2px solid currentColor;
	padding-bottom: 5px;
	text-decoration: none;
}

/* ------------------------------------------------ chips ---- */

.xo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0 30px;
}
.xo-chips span {
	font-family: var(--xo-ext);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 9.5px;
	line-height: 1;
	letter-spacing: .09em;
	border: 1.5px solid rgba(250, 246, 239, .45);
	border-radius: 999px;
	padding: 10px 16px;
}
.xo-chips span.xo-hl {
	background: var(--xo-brick);
	border-color: var(--xo-brick);
}
/* Chips on light backgrounds */
.xo-chips-dark span {
	border-color: rgba(20, 20, 20, .35);
}

/* ------------------------------------------------ collage ---- */

.xo-collage {
	position: relative;
	height: clamp(380px, 44vw, 560px);
}
.xo-collage .et_pb_image {
	position: absolute;
	margin: 0;
}
.xo-collage .et_pb_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
}
.xo-collage .xo-collage-a {
	width: 64%;
	height: 82%;
	left: 0;
	top: 0;
}
.xo-collage .xo-collage-a img {
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}
.xo-collage .xo-collage-b {
	width: 52%;
	height: 64%;
	right: 0;
	bottom: 0;
}
.xo-collage .xo-collage-b img {
	border: 6px solid var(--xo-ink);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}

/* ------------------------------------------- inline CTA rows ---- */

/* Buttons placed side by side instead of Divi's stacked default */
.xo-inline-ctas .et_pb_button_module_wrapper {
	display: inline-block;
	margin-right: 14px;
	margin-bottom: 0;
}
.xo-inline-ctas .et_pb_button_module_wrapper:last-child {
	margin-right: 0;
}
/* Centered variant (podcast pills) */
.xo-inline-ctas-center {
	text-align: center;
}
.xo-inline-ctas-center .et_pb_button_module_wrapper {
	display: inline-block;
	margin: 0 7px 0;
}

/* Narrow centered H2 (Give section) */
.xo-h2-narrow,
h2.xo-h2-narrow {
	max-width: 16ch;
	margin-left: auto;
	margin-right: auto;
}

/* Hero background focal point (image is framed center 30%) */
.xo-hero.et_pb_section {
	background-position: center 30%;
}

/* ------------------------------------------------ footer ---- */

.xo-footer .xo-fh {
	font-family: var(--xo-ext);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 9.5px;
	line-height: 1;
	letter-spacing: .18em;
	color: #efe9db;
	margin-bottom: 14px;
}
.xo-footer .xo-fcol p,
.xo-footer .xo-fcol a {
	display: block;
	font-family: var(--xo-sans);
	font-size: 13.5px;
	line-height: 1.9;
	color: #b9b3a6;
	text-decoration: none;
}
.xo-footer .xo-fcol a:hover {
	color: #fff;
}
.xo-footer .xo-fbar {
	border-top: 1px solid rgba(255, 255, 255, .14);
	margin-top: 44px;
	padding-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	font-family: var(--xo-sans);
	font-size: 11.5px;
	line-height: 1.6;
	color: #7f7a6f;
}
/* =========================================================
   Tuesdays page — page-scoped helpers
   Only what native Divi + the shared xo-styles.css can't
   express: the gold uppercase meta line in the closing CTA
   ("9:00 PM — check above for this week's spot").
   Concept values: extended sans label, .75rem, ls .16em,
   gold #E2A72E (production = Termina 600 per design system).
   ========================================================= */

.et_pb_text.xo-tuesdays-meta,
.et_pb_text.xo-tuesdays-meta p {
	font-family: var(--xo-ext);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .16em;
	color: var(--xo-gold);
	padding-bottom: 0;
}
/* =========================================================
   Messages page — page-scoped helpers
   Only what Divi + the shared xo-* classes can't express:
   the CTA meta line uses em-dash separators (NOT the
   gold-dot .xo-meta row) in the extended sans, which isn't
   selectable in Divi's native font list.
   Concept: wide 800 / stretch 115%, uppercase, .75rem,
   letter-spacing .16em, color gold. Production = Termina 600
   per the shared system's Archivo→Termina delta.
   ========================================================= */

.xo-messages-meta {
	font-family: var(--xo-ext);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .16em;
	color: var(--xo-gold);
}

/* =========================================================
   Who We Are page — team grid (page-scoped, xo-team- prefix)
   Only what Divi + the shared classes can't express:
   the 3/2/1-column card grid at the concept's 900/560px
   breakpoints, and the 4:5 initial tiles standing in for
   headshots (temporary until Sydney's photo selects land).
   ========================================================= */

/* Card grid: 3-up desktop, 2-up <=900px, 1-up <=560px */
.xo-team-grid .et_pb_column {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2.5vw, 30px);
}
@media (max-width: 900px) {
	.xo-team-grid .et_pb_column {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.xo-team-grid .et_pb_column {
		grid-template-columns: 1fr;
	}
}
.xo-team-grid .et_pb_module {
	margin-bottom: 0;
}

/* Placeholder initial tile — swaps for a 4:5 headshot crop
   (border-radius 14px + same shadow) once photos arrive */
.xo-team-card .xo-team-tile {
	aspect-ratio: 4 / 5;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 20px 50px -28px rgba(20, 20, 20, .45);
}
.xo-team-card .xo-team-tile span {
	font-family: var(--xo-serif);
	font-style: italic;
	font-size: clamp(3rem, 6vw, 4.6rem);
	line-height: 1;
	opacity: .9;
}

/* Name / role / bio type roles */
.xo-team-card h3 {
	font-family: var(--xo-serif);
	font-weight: 400;
	font-size: 1.45rem;
	line-height: 1.2;
	margin: 16px 0 4px;
	padding: 0;
}
.xo-team-card .xo-team-role {
	font-family: var(--xo-ext);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .62rem;
	line-height: 1.4;
	color: #C23B2A;
	margin: 0 0 10px;
}
.xo-team-card .xo-team-bio {
	font-family: var(--xo-sans);
	font-size: .85rem;
	line-height: 1.6;
	color: #57534A;
	margin: 0;
	padding: 0;
}

/* =========================================================
   I'm New page — page-scoped helpers
   Only what native Divi + the shared xo-styles.css can't
   express: the gold uppercase meta line in the final CTA
   ("Tuesdays — 9:00 PM — McCasland Field House").
   Concept values: extended sans 800, .75rem, ls .16em,
   gold #E2A72E (production = Termina 600 per design system,
   same mapping as the Tuesdays-page meta line).
   ========================================================= */

.et_pb_text.xo-imnew-meta,
.et_pb_text.xo-imnew-meta p {
	font-family: var(--xo-ext);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .16em;
	color: var(--xo-gold);
	padding-bottom: 0;
}