/*
 * Southwest Tech theme.css — the whole visual world for stoa.works/swtc.
 *
 * Non-obvious decisions this file embodies:
 * - ONE signature hue: the OKLCH ramp --accent-50…900 is gamut-fit from the
 *   College's own charger blue #014b8c (constant hue 252.7deg), and that one
 *   hue powers the light classroom rooms, the buttons, AND the dark
 *   shop-floor band. Gold #f0b500 is --spark, a RESTRICTED token: dark-room
 *   highlights, rung-motif fills, and pathway markers only. It never carries
 *   status duty (--notice, burnt amber, owns notices) and never sits as text
 *   on light paper. Every real-use pair below was verified programmatically
 *   (worst pair: --accent-500 body text on paper at 4.56:1).
 * - Vertical rhythm runs on the rlh unit (root line-height), the design-radar
 *   trial this build executes: section padding, stack gaps, and prose margins
 *   are 1rlh/2rlh multiples with rem fallbacks declared first, so the whole
 *   page snaps to one type-derived cadence and older engines just keep rem.
 * - Motion is opt-in: every transition, reveal, view-transition, and the
 *   pathway ladder's scroll-driven marker live inside
 *   prefers-reduced-motion: no-preference. The still page is complete.
 */

/* ---------- tokens ---------- */
:root {
	/* signature ramp, gamut-fit OKLCH from #014b8c (hue locked at 252.7deg) */
	--accent-50: #f0f7ff;
	--accent-100: #dbecff;
	--accent-200: #b8d7fb;
	--accent-300: #8ebbf0;
	--accent-400: #5995da;
	--accent-500: #3372b6;
	--accent-600: #15579a;
	--accent-700: #004480;
	--accent-800: #002f5c;
	--accent-900: #001c3a;
	--accent: #014b8c;

	--paper: #ffffff;
	--paper-2: #edf4fb;
	--ink: #131c26;
	--ink-soft: #3d4a59;

	/* spark gold: decoration on dark rooms + rung fills ONLY (see header) */
	--spark: #f0b500;
	--spark-deep: #c79300;
	/* status/notice duty lives here, never on --spark and never red */
	--notice: #004480;
	--notice-bg: #e7f2ff;

	--display: "Big Shoulders", "Arial Narrow", sans-serif;
	--body: "Wix Madefor Text", "Helvetica Neue", Arial, sans-serif;
	--tag: "Martian Mono", "Courier New", monospace;

	/* fluid type scale: 360px -> 1280px anchors, ratio 1.2 -> 1.28 */
	--fs--1: clamp(0.831rem, 0.79rem + 0.19vw, 0.944rem);   /* 13.3 -> 15.1 */
	--fs-0: clamp(1rem, 0.951rem + 0.22vw, 1.125rem);        /* 16 -> 18   */
	--fs-1: clamp(1.2rem, 1.107rem + 0.41vw, 1.44rem);       /* 19.2 -> 23 */
	--fs-2: clamp(1.44rem, 1.286rem + 0.68vw, 1.833rem);     /* 23 -> 29.3 */
	--fs-3: clamp(1.728rem, 1.488rem + 1.07vw, 2.344rem);    /* 27.6 -> 37.5 */
	--fs-4: clamp(2.074rem, 1.713rem + 1.6vw, 2.994rem);     /* 33.2 -> 47.9 */
	--fs-5: clamp(2.488rem, 1.951rem + 2.39vw, 3.863rem);    /* 39.8 -> 61.8 */

	--wrap: 74rem;
	--rung-w: 1.35rem;   /* the motif's one parameter: rung bar length */
	--rung-gap: 0.3rem;
	--radius: 6px;
	--shadow: 0 1px 2px rgba(19, 28, 38, 0.08), 0 4px 14px rgba(19, 28, 38, 0.08);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	font-size: 100%;
	line-height: 1.55; /* the rlh root: all rhythm below derives from this */
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	font-family: var(--body);
	font-size: var(--fs-0);
	color: var(--ink);
	background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-700); text-underline-offset: 2px; }
a:hover { color: var(--accent-800); }
:focus-visible {
	outline: 3px solid var(--accent-600);
	outline-offset: 2px;
	border-radius: 2px;
}
.room-shop :focus-visible { outline-color: var(--spark); }
.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--accent-800);
	color: #fff;
	padding: 0.6rem 1rem;
	z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.1rem; }

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: 0.005em;
	margin: 0 0 0.75rem;
	margin-block-end: 0.5rlh;
	text-wrap: balance;
	overflow-wrap: break-word; /* slash-joined program names wrap on phones */
}
h1 { font-size: var(--fs-5); text-transform: uppercase; letter-spacing: 0.015em; }
h2 { font-size: var(--fs-3); text-transform: uppercase; letter-spacing: 0.02em; }
h3 { font-size: var(--fs-1); }
p, ul, ol { margin-block: 0 1rem; margin-block: 0 0.65rlh; }
.lede { font-size: var(--fs-1); color: var(--ink-soft); max-width: 46ch; }

/* the shop-tag register: credentials, dates, codes, record metadata only */
.tag {
	font-family: var(--tag);
	font-size: var(--fs--1);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ---------- the rung motif ----------
   Single parameter --rung-w; every deployment derives from it.
   Rungs are pure CSS bars: dividers (3 ascending), list markers (1),
   the pathway rail (full ladder), 404 (missing top rung), hover fills. */
.rung-divider {
	border: 0;
	height: calc(3 * 4px + 2 * var(--rung-gap));
	margin-block: 2rem;
	margin-block: 1.5rlh;
	background:
		linear-gradient(var(--accent-300), var(--accent-300)) 0 100% / var(--rung-w) 4px,
		linear-gradient(var(--accent-500), var(--accent-500)) calc(var(--rung-w) * 0.55) 50% / var(--rung-w) 4px,
		linear-gradient(var(--accent-700), var(--accent-700)) calc(var(--rung-w) * 1.1) 0 / var(--rung-w) 4px;
	background-repeat: no-repeat;
}
.room-shop .rung-divider {
	background:
		linear-gradient(var(--accent-400), var(--accent-400)) 0 100% / var(--rung-w) 4px,
		linear-gradient(var(--accent-200), var(--accent-200)) calc(var(--rung-w) * 0.55) 50% / var(--rung-w) 4px,
		linear-gradient(var(--spark), var(--spark)) calc(var(--rung-w) * 1.1) 0 / var(--rung-w) 4px;
	background-repeat: no-repeat;
}
ul.rung-list { list-style: none; padding-left: 0; }
ul.rung-list > li {
	position: relative;
	padding-left: calc(var(--rung-w) + 0.75rem);
	margin-block-end: 0.55rem;
}
ul.rung-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: var(--rung-w);
	height: 4px;
	background: var(--accent-500);
}
.room-shop ul.rung-list > li::before { background: var(--spark); }

/* ---------- chrome: banner, util bar, masthead ---------- */
.proto-banner {
	background: var(--ink);
	color: var(--paper);
	font-size: var(--fs--1);
	text-align: center;
	padding: 0.45rem 1rem;
}
.util-bar {
	background: var(--accent-800);
	color: var(--accent-100);
}
.util-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2.4rem;
}
.util-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.4rem;
	margin: 0;
	padding: 0;
}
.util-links a, .util-lang {
	color: var(--accent-100);
	text-decoration: none;
	font-size: var(--fs--1);
	padding-block: 0.5rem; /* keeps hit area >= 24px */
	display: inline-block;
}
.util-links a:hover, .util-lang:hover { color: #fff; text-decoration: underline; }
.util-links .util-strong { color: var(--spark); font-weight: 700; }

.site-header {
	background: var(--accent-900);
	color: #fff;
	border-bottom: 4px solid var(--spark);
}
.masthead {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 1.1rem;
	padding-block: 0.8rem;
}
.brand-lockup { display: inline-flex; align-items: center; }
.brand-logo { width: 200px; height: auto; }

.cta-apply {
	background: var(--spark);
	color: var(--accent-900);
	font-family: var(--display);
	font-size: var(--fs-1);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.55rem 1.3rem;
	border-radius: var(--radius);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.cta-apply:hover { background: #ffd23f; color: var(--accent-900); }

/* ---------- omnibox ---------- */
.omnibox { position: relative; }
.omnibox-field { display: flex; }
.omnibox input[type="search"], .omnibox-field > input[type="search"] {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-size: var(--fs-0);
	color: var(--ink);
	background: #fff;
	border: 2px solid var(--accent-700);
	border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius);
	padding: 0.55rem 0.8rem;
	min-height: 44px;
}
.omnibox button[type="submit"], .omnibox-field > button[type="submit"] {
	font-family: var(--display);
	font-size: var(--fs-0);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #fff;
	background: var(--accent-600);
	border: 2px solid var(--accent-600);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: 0.55rem 1.1rem;
	min-height: 44px;
	cursor: pointer;
}
.omnibox button[type="submit"]:hover, .omnibox-field > button[type="submit"]:hover { background: var(--accent-700); border-color: var(--accent-700); }
.omni-suggestions {
	list-style: none;
	margin: 0.3rem 0 0;
	padding: 0.3rem;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--accent-200);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	z-index: 50;
	max-height: 24rem;
	overflow: auto;
}
.omni-suggestions:empty { display: none; }
.omni-suggestions [role="option"] {
	padding: 0.5rem 0.65rem;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
}
.omni-suggestions [role="option"] .tag { color: var(--accent-600); flex-shrink: 0; }
.omni-suggestions [role="option"][aria-selected="true"],
.omni-suggestions [role="option"]:hover { background: var(--accent-100); }
.omni-suggestions .omni-ask-row { border-bottom: 1px solid var(--accent-100); font-weight: 600; }
.omni-group-label {
	font-family: var(--tag);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-soft);
	padding: 0.5rem 0.65rem 0.15rem;
}
.omni-empty {
	padding: 0.6rem 0.65rem;
	color: var(--ink-soft);
	font-size: var(--fs--1);
}

/* ---------- primary nav (native details disclosure) ---------- */
.nav-disclosure { position: relative; }
.menu-btn {
	display: none; /* desktop: nav always open; mobile query reveals it */
	font-family: var(--display);
	font-size: var(--fs-0);
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	background: var(--accent-700);
	border-radius: var(--radius);
	padding: 0.55rem 1.1rem;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	align-items: center;
}
.menu-btn::-webkit-details-marker { display: none; }
.primary-nav .omnibox--mobile { display: none; }
.nav-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.35rem;
	margin: 0;
	padding: 0;
}
.nav-list a {
	color: var(--accent-100);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--fs-0);
	display: inline-block;
	padding: 0.55rem 0;
	position: relative;
}
.nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.25rem;
	width: var(--rung-w);
	height: 3px;
	background: transparent;
}
.nav-list a:hover { color: #fff; }
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { background: var(--spark); }
.nav-list a[aria-current="page"] { color: #fff; }

/* nav row sits under the masthead on its own line at desktop */
.site-header .nav-disclosure { grid-column: 1 / -1; }

/* ---------- breadcrumbs + eyebrow ---------- */
.breadcrumbs {
	font-size: var(--fs--1);
	padding-block: 0.75rem;
	color: var(--ink-soft);
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--accent-300); }
.breadcrumbs a { color: var(--accent-700); }
.eyebrow {
	font-family: var(--tag);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accent-600);
	display: inline-block;
	border-left: 4px solid var(--spark);
	padding-left: 0.5rem;
	margin-block-end: 0.6rem;
}

/* ---------- rooms & sections ---------- */
.section { padding-block: 3rem; padding-block: 2rlh; }
.section--tight { padding-block: 2rem; padding-block: 1.25rlh; }
.room-shop {
	background: var(--accent-900);
	color: var(--accent-100);
}
.room-shop h1, .room-shop h2, .room-shop h3 { color: #fff; }
.room-shop .eyebrow { color: var(--accent-200); }
.room-shop .lede { color: var(--accent-100); }
.room-shop a { color: var(--accent-300); }
.room-shop a:hover { color: var(--accent-200); }
.room-mid { background: var(--paper-2); }

/* ---------- hero (torchlight duotone) ---------- */
.hero {
	position: relative;
	background: var(--accent-900);
	color: #fff;
	overflow: hidden;
}
.hero-media {
	position: absolute;
	inset: 0;
}
.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* torchlight duotone: steel-blue shadows, warmth held for the caption rule */
	filter: grayscale(1) sepia(0.18) hue-rotate(175deg) saturate(2.1) brightness(0.62) contrast(1.05);
}
.hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(0, 28, 58, 0.94) 0%, rgba(0, 28, 58, 0.72) 45%, rgba(0, 28, 58, 0.35) 100%);
}
.hero-inner {
	position: relative;
	z-index: 1;
	padding-block: 3.5rem;
	padding-block: 2.25rlh;
	max-width: 44rem;
}
.hero .kicker {
	font-family: var(--tag);
	font-size: var(--fs--1);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--spark);
}
.hero p { color: var(--accent-100); font-size: var(--fs-1); max-width: 40ch; }
.photo-caption {
	position: relative;
	z-index: 1;
	font-size: var(--fs--1);
	color: var(--accent-200);
	border-top: 3px solid var(--spark);
	display: inline-block;
	padding-top: 0.3rem;
	margin-top: 1rem;
}

/* ---------- buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--fs-0);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	border-radius: var(--radius);
	padding: 0.6rem 1.25rem;
	min-height: 44px;
	border: 2px solid transparent;
	cursor: pointer;
}
.btn--primary { background: var(--accent-700); color: #fff; }
.btn--primary:hover { background: var(--accent-800); color: #fff; }
.btn--ghost { border-color: var(--accent-600); color: var(--accent-700); background: transparent; }
.btn--ghost:hover { background: var(--accent-100); color: var(--accent-800); }
.room-shop .btn--primary { background: var(--spark); color: var(--accent-900); }
.room-shop .btn--primary:hover { background: #ffd23f; }
.room-shop .btn--ghost { border-color: var(--accent-300); color: var(--accent-100); }
.room-shop .btn--ghost:hover { background: var(--accent-800); color: #fff; }

/* ---------- program finder ---------- */
.finder-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	align-items: end;
	margin-block-end: 1.25rem;
}
.finder-controls .field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; max-width: 100%; }
.finder-controls select { max-width: 100%; }
.finder-controls label { font-weight: 600; font-size: var(--fs--1); }
.finder-controls input[type="search"], .finder-controls select {
	font: inherit;
	color: var(--ink);
	background: #fff;
	border: 2px solid var(--accent-300);
	border-radius: var(--radius);
	padding: 0.5rem 0.7rem;
	min-height: 44px;
}
.az-index {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: 0;
	margin-block: 0.75rem 1.5rem;
}
.az-index a, .az-index span {
	font-family: var(--tag);
	font-size: var(--fs--1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	min-height: 28px;
	border-radius: 4px;
	text-decoration: none;
}
.az-index a { background: var(--accent-100); color: var(--accent-800); }
.az-index a:hover { background: var(--accent-200); }
.az-index span {
	color: var(--ink-soft);
	background: var(--accent-50);
	border: 1px solid var(--accent-100);
}
.finder-count { font-size: var(--fs--1); color: var(--ink-soft); }

.program-list { list-style: none; padding: 0; margin: 0; display: flow-root; }
.program-list > section { display: flow-root; clear: both; }
.program-list > section + section { margin-block-start: 1rem; }
.program-list > section > .program-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
.program-letter {
	font-family: var(--display);
	font-size: var(--fs-2);
	text-transform: uppercase;
	color: var(--accent-300);
	border-bottom: 2px solid var(--accent-200);
	padding-block: 1.2rem 0.2rem;
	margin-block-end: 0.6rem;
}
.program-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(8rem, 14rem);
	gap: 0.35rem 1rem;
	padding: 0.85rem 0.75rem;
	border-radius: var(--radius);
	position: relative;
	width: 100%;
	min-width: 0;
	clear: both;
}
.program-row:hover { background: var(--accent-50); }
.program-row::before {
	content: "";
	position: absolute;
	left: -0.3rem;
	top: 1.35rem;
	width: calc(var(--rung-w) * 0.6);
	height: 4px;
	background: transparent;
}
.program-row:hover::before, .program-row:focus-within::before { background: var(--spark); }
.program-row h3 { margin: 0; font-family: var(--body); font-size: var(--fs-1); font-weight: 700; }
.program-row h3 a { text-decoration: none; color: var(--accent-800); }
.program-row h3 a:hover { text-decoration: underline; }
.program-row .prog-summary {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--fs--1);
	line-height: 1.55;
	max-width: 72ch;
	text-wrap: pretty;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* shop-tag chip: credential metadata in the mono register */
.shop-tag {
	font-family: var(--tag);
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--accent-800);
	background: var(--accent-100);
	border-left: 3px solid var(--spark);
	padding: 0.25rem 0.5rem;
	align-self: start;
	max-width: 100%;
}
.room-shop .shop-tag { background: var(--accent-800); color: var(--accent-100); }

@media (max-width: 640px) {
	.program-row { grid-template-columns: minmax(0, 1fr); }
	.program-row .shop-tag { justify-self: start; }
	.program-row .prog-summary { grid-column: 1; }
}

/* ---------- cluster doors ---------- */
.cluster-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
	gap: 1rem;
	padding: 0;
	list-style: none;
}
.cluster-door {
	position: relative;
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--accent-800);
	text-decoration: none;
	min-height: 11rem;
}
.cluster-door img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* torchlight duotone, same recipe family as the hero */
	filter: grayscale(1) sepia(0.16) hue-rotate(175deg) saturate(1.9) brightness(0.7) contrast(1.03);
}
/* photo-less doors wear the rung texture instead of flat navy */
.cluster-door:not(:has(img)) {
	background:
		repeating-linear-gradient(135deg, transparent 0 22px, rgba(240, 181, 0, 0.14) 22px 26px, transparent 26px 48px, rgba(142, 187, 240, 0.10) 48px 52px),
		var(--accent-800);
}
.cluster-door .door-label {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.2rem;
	height: 100%;
	min-height: 11rem;
	padding: 0.9rem;
	background: linear-gradient(180deg, rgba(0, 28, 58, 0.05) 30%, rgba(0, 28, 58, 0.88) 85%);
}
.cluster-door .door-name {
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--fs-1);
	text-transform: uppercase;
	color: #fff;
	line-height: 1.1;
}
.cluster-door .door-count {
	font-family: var(--tag);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--spark);
	border-left: 3px solid var(--spark);
	padding-left: 0.4rem;
	align-self: flex-start;
}
.cluster-door:hover .door-name { text-decoration: underline; text-decoration-color: var(--spark); text-underline-offset: 4px; }

/* ---------- pathway ladder ---------- */
.ladder {
	list-style: none;
	margin: 0;
	padding: 0 0 0 2.4rem;
	position: relative;
}
.ladder::before, .ladder::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--accent-300);
}
.ladder::before { left: 0.45rem; }
.ladder::after { left: calc(0.45rem + var(--rung-w)); }
.room-shop .ladder::before, .room-shop .ladder::after { background: var(--accent-600); }
.ladder > li { position: relative; padding-block: 0.9rem; }
.ladder > li::before {
	content: "";
	position: absolute;
	left: calc(-2.4rem + 0.45rem);
	top: 1.35rem;
	width: calc(var(--rung-w) + 3px);
	height: 4px;
	background: var(--accent-500);
}
.ladder > li.rung-here::before { background: var(--spark); height: 6px; top: 1.28rem; }
.ladder .rung-cred {
	font-family: var(--tag);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--accent-600);
	display: block;
}
.room-shop .ladder .rung-cred { color: var(--spark); }
.ladder .rung-name { font-weight: 700; }

/* the pathways page scroll rail: marker climbs as the page scrolls.
   Motion-gated below; the static default parks the marker at the base. */
.pathway-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}
.pathway-progress { display: none; }
.pathway-progress__inner {
	position: sticky;
	top: 1.5rem;
	display: grid;
	justify-items: center;
	gap: 0.8rem;
}
.pathway-progress__label {
	font-family: var(--tag);
	font-size: 0.68rem;
	line-height: 1.35;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ink-soft);
	text-align: center;
	max-width: 8ch;
}
.pathway-rail {
	position: relative;
	width: 1.6rem;
	height: min(70vh, 34rem);
	background:
		linear-gradient(var(--accent-200), var(--accent-200)) 0.25rem 0 / 3px 100% no-repeat,
		linear-gradient(var(--accent-200), var(--accent-200)) 1.15rem 0 / 3px 100% no-repeat;
}
.pathway-marker {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1.55rem;
	height: 6px;
	background: var(--spark);
}
.pathway-fields { min-width: 0; }
.pathway-field {
	min-width: 0;
	padding-block: 2.5rem;
	border-top: 4px solid var(--accent-100);
	scroll-margin-top: 1rem;
}
.pathway-field:first-child { padding-block-start: 0; border-top: 0; }
.pathway-field__header { margin-block-end: 1.25rem; }
.pathway-field__header h2 {
	font-size: clamp(2.2rem, 4.6vw, 3.8rem);
	max-width: 18ch;
	margin: 0;
}
.pathway-families {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 1rem;
	align-items: start;
}
.pathway-family {
	min-width: 0;
	background: #fff;
	border: 1px solid var(--accent-100);
	border-top: 4px solid var(--accent-500);
	border-radius: var(--radius);
	padding: 1rem 1.1rem;
	box-shadow: var(--shadow);
}
.pathway-family > .tag { color: var(--accent-600); margin-block-end: 0.2rem; }
.pathway-family .ladder { margin-block-start: 0.35rem; }
.pathway-singles {
	margin-block-start: 1.25rem;
	background: var(--accent-50);
	border-left: 4px solid var(--accent-500);
	padding: 1rem 1.1rem;
}
.pathway-singles h3 { margin-block-end: 0.35rem; }
.pathway-singles .rung-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 0.7rem 1.25rem;
	margin-block-end: 0;
}
.pathway-singles .rung-list > li { min-width: 0; margin: 0; }
.pathway-singles .rung-list .tag { display: block; margin-block-start: 0.15rem; color: var(--ink-soft); }

/* ---------- events ---------- */
.event-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.event-row {
	display: grid;
	grid-template-columns: 4.4rem 1fr;
	gap: 1rem;
	background: #fff;
	border: 1px solid var(--accent-100);
	border-left: 4px solid var(--accent-500);
	border-radius: var(--radius);
	padding: 0.8rem;
}
.event-date {
	font-family: var(--tag);
	text-align: center;
	text-transform: uppercase;
	color: var(--accent-800);
	background: var(--accent-100);
	border-radius: 4px;
	padding: 0.45rem 0.2rem;
	align-self: start;
}
.event-date .d { font-size: var(--fs-2); font-weight: 700; display: block; line-height: 1; }
.event-date .m { font-size: 0.72rem; letter-spacing: 0.08em; }
.event-row h3 { margin: 0 0 0.2rem; font-family: var(--body); font-size: var(--fs-1); font-weight: 700; }
.event-meta { font-family: var(--tag); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }

.cal-scroll { overflow-x: auto; }
.cal-grid { width: 100%; min-width: 26rem; border-collapse: collapse; }
.cal-grid caption { text-align: left; font-weight: 700; padding-block-end: 0.5rem; }
.cal-grid th {
	font-family: var(--tag);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.4rem;
	color: var(--ink-soft);
	text-align: center;
}
.cal-grid td {
	border: 1px solid var(--paper-2);
	vertical-align: top;
	padding: 0.3rem;
	height: 4.6rem;
	font-size: var(--fs--1);
}
.cal-grid td.has-event { background: var(--accent-50); }
.cal-grid .cal-daynum { font-family: var(--tag); font-size: 0.75rem; color: var(--ink-soft); }
.cal-grid .cal-event a { color: var(--accent-800); font-weight: 600; }
.cal-nav { display: flex; align-items: center; gap: 0.8rem; margin-block-end: 0.6rem; }
.subscribe-menu { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-start: 1rem; }

/* ---------- status band ("Today at Southwest Tech") ---------- */
.status-band {
	background: #fff;
	border: 1px solid var(--accent-100);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	align-items: center;
	padding: 0.8rem 1.1rem;
}
.status-band .tag { color: var(--accent-600); }
.status-item { display: flex; align-items: baseline; gap: 0.5rem; }
.status-item .rung-dot { width: calc(var(--rung-w) * 0.5); height: 4px; background: var(--accent-500); flex-shrink: 0; align-self: center; }

/* emergency slot: empty by default, amber when active, never red */
.alert-slot { background: var(--notice-bg); color: var(--notice); border-bottom: 2px solid var(--notice); }
.alert-slot:empty { display: none; }
.alert-slot .wrap { padding-block: 0.6rem; }

/* ---------- stats (shop-floor band) ---------- */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.stat-grid > li { min-width: 0; border-top: 3px solid var(--accent-700); padding-top: 0.7rem; }
.room-shop .stat-grid > li { border-top-color: var(--accent-600); }
.stat-num {
	font-family: var(--display);
	font-size: var(--fs-4);
	font-weight: 700;
	color: var(--spark);
	line-height: 1;
	display: block;
}
.stat-label { color: var(--accent-100); }
.stat-src {
	display: block;
	font-family: var(--tag);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--accent-300);
	margin-top: 0.3rem;
}

/* ---------- people / contact cards ---------- */
.person-card {
	display: grid;
	grid-template-columns: 4.6rem 1fr;
	gap: 0.9rem;
	background: #fff;
	border: 1px solid var(--accent-100);
	border-radius: var(--radius);
	padding: 0.8rem;
	align-items: center;
}
.person-card img {
	width: 4.6rem;
	height: 4.6rem;
	object-fit: cover;
	border-radius: 4px;
	border-bottom: 3px solid var(--spark);
}
.person-card > div { min-width: 0; }
.person-card > div:first-child:last-child { grid-column: 1 / -1; }
.person-card .person-name { font-weight: 700; margin: 0; }
.person-card .person-title { font-size: var(--fs--1); color: var(--ink-soft); margin: 0 0 0.25rem; overflow-wrap: break-word; }
.person-card a { font-size: var(--fs--1); }

/* ---------- documents ---------- */
.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.doc-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.9rem;
	background: #fff;
	border: 1px solid var(--accent-100);
	border-radius: var(--radius);
	padding: 0.65rem 0.9rem;
}
.doc-row > * { min-width: 0; }
.doc-row a { overflow-wrap: anywhere; }
.doc-badge {
	font-family: var(--tag);
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--accent-700);
	padding: 0.3rem 0.45rem;
	border-radius: 3px;
}
.doc-row .doc-date { font-family: var(--tag); font-size: 0.75rem; color: var(--ink-soft); }

/* ---------- news ---------- */
.news-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.news-item { border-left: 3px solid var(--accent-200); padding-left: 1rem; }
.news-item:hover { border-left-color: var(--spark); }
.news-item .tag { color: var(--ink-soft); }
.news-item h3 { margin: 0.15rem 0 0.3rem; font-family: var(--body); font-weight: 700; font-size: var(--fs-1); }

/* ---------- search & ask page ---------- */
.ask-answer {
	background: #fff;
	border: 1px solid var(--accent-200);
	border-left: 4px solid var(--spark-deep);
	border-radius: var(--radius);
	padding: 1.1rem 1.25rem;
	margin-block-end: 1.5rem;
}
.ask-answer p:last-child { margin-bottom: 0; }
.ask-caveat { font-size: var(--fs--1); color: var(--ink-soft); }
.source-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.7rem; list-style: none; padding: 0; }
.source-card {
	background: var(--accent-50);
	border: 1px solid var(--accent-100);
	border-radius: var(--radius);
	padding: 0.7rem 0.85rem;
	font-size: var(--fs--1);
}
.source-card .tag { display: block; color: var(--accent-600); margin-bottom: 0.2rem; }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin-block: 0.75rem 0; }
.pill-row a {
	border: 1.5px solid var(--accent-300);
	color: var(--accent-800);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	text-decoration: none;
	font-size: var(--fs--1);
	min-height: 32px;
	display: inline-flex;
	align-items: center;
}
.pill-row a:hover { background: var(--accent-100); }
.result-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.result-item { padding: 0.7rem 0.85rem; background: #fff; border: 1px solid var(--accent-100); border-radius: var(--radius); }
.result-item mark { background: var(--accent-100); color: inherit; padding: 0 0.1em; }
.feedback-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.6rem; font-size: var(--fs--1); }
.feedback-row button {
	font: inherit;
	font-size: var(--fs--1);
	background: transparent;
	border: 1.5px solid var(--accent-300);
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	min-height: 32px;
	cursor: pointer;
	color: var(--accent-800);
}
.feedback-row button:hover, .feedback-row button[aria-pressed="true"] { background: var(--accent-100); }

/* ---------- forms ---------- */
.form-grid { display: grid; gap: 1rem; max-width: 34rem; }
.form-grid label { font-weight: 600; display: block; margin-bottom: 0.3rem; }
.form-grid input, .form-grid select, .form-grid textarea {
	font: inherit;
	width: 100%;
	color: var(--ink);
	background: #fff;
	border: 2px solid var(--accent-300);
	border-radius: var(--radius);
	padding: 0.55rem 0.7rem;
	min-height: 44px;
}
.form-grid textarea { min-height: 7rem; }
.field-error { color: var(--notice); font-size: var(--fs--1); margin-top: 0.25rem; }
.form-note { font-size: var(--fs--1); color: var(--ink-soft); }
.hp-field { position: absolute; left: -9999px; }
.demo-note {
	background: var(--notice-bg);
	color: var(--ink);
	border-left: 4px solid var(--notice);
	border-radius: var(--radius);
	padding: 0.9rem 1rem;
	font-size: var(--fs--1);
}
.demo-note > :last-child { margin-block-end: 0; }
.demo-note + p { margin-block-start: 1rem; }

/* ---------- related rail + wayfinding ---------- */
.related-rail {
	background: var(--accent-50);
	border: 1px solid var(--accent-100);
	border-radius: var(--radius);
	padding: 1rem 1.1rem;
}
.related-rail h2 { font-size: var(--fs-1); }
.related-rail ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.related-rail a[aria-current="page"] { font-weight: 700; color: var(--accent-900); }
.last-updated { font-family: var(--tag); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }

/* ---------- two-column page layout ---------- */
.page-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.page-cols > * { min-width: 0; }
.page-cols > :first-child > :where(p, ul, ol, figure, .doc-list, .person-grid) + h2 {
	margin-block-start: 2.2rem;
}
@media (min-width: 900px) {
	.page-cols { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; }
}

/* ---------- footer ---------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.site-footer {
	background: var(--accent-900);
	color: var(--accent-100);
	border-top: 4px solid var(--spark);
	margin-top: 3rem;
	margin-top: 2rlh;
}
.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2rem;
	padding-block: 2.5rem 1.5rem;
}
.footer-heading {
	font-family: var(--display);
	font-weight: 700;
	font-size: var(--fs-0);
	text-transform: uppercase;
	color: var(--spark);
	letter-spacing: 0.06em;
	margin-block: 1.1rem 0.5rem;
}
.footer-col > .footer-heading:first-child { margin-block-start: 0; }
.site-footer a { color: var(--accent-200); }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.footer-logo { width: 190px; }
.footer-address { margin-block: 0.8rem 0.3rem; }
/* .fine is page-wide small print (ink-soft on paper); the footer's dark navy
   recolors it via the scoped rule below, never the other way around. */
.fine { font-size: var(--fs--1); color: var(--ink-soft); }
.site-footer .fine { color: var(--accent-300); }
.contact-lines .contact-label {
	font-family: var(--tag);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--accent-300);
	display: inline-block;
	min-width: 5.6rem;
}
.footer-a11y { font-size: var(--fs--1); }
.footer-eo { padding-block: 0.6rem; }
.footer-eo .fine { border-top: 1px solid var(--accent-800); padding-top: 1rem; }
.footer-legal {
	border-top: 1px solid var(--accent-800);
	padding-block: 1.2rem;
	font-size: var(--fs--1);
	color: var(--accent-300);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
	justify-content: space-between;
}
.footer-legal p { margin: 0; }
.footer-signup { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.footer-signup input[type="email"] {
	flex: 1;
	min-width: 0;
	font: inherit;
	border: 2px solid var(--accent-700);
	border-radius: var(--radius);
	padding: 0.5rem 0.7rem;
	background: #fff;
	color: var(--ink);
	min-height: 44px;
}
.footer-feedback summary {
	cursor: pointer;
	color: var(--accent-200);
	padding-block: 0.4rem;
	list-style: none;
}
.footer-feedback summary::-webkit-details-marker { display: none; }
.footer-feedback summary::before { content: ""; display: inline-block; width: calc(var(--rung-w) * 0.5); height: 3px; background: var(--spark); margin-right: 0.5rem; vertical-align: middle; }

/* ---------- 404: the ladder missing its top rung ---------- */
.notfound-ladder { margin-block: 1.5rem; }
.notfound-ladder .ladder > li.rung-missing::before {
	background: transparent;
	border: 2px dashed var(--accent-300);
	height: 2px;
}

/* ---------- print: documents and schedules print clean ---------- */
@media print {
	.proto-banner, .util-bar, .site-header, .site-footer, .breadcrumbs,
	.cta-apply, .subscribe-menu, .footer-feedback, .alert-slot { display: none; }
	body { background: #fff; color: #000; }
	a { color: #000; text-decoration: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 899px) {
	.masthead { grid-template-columns: 1fr auto auto; }
	.omnibox--desktop { display: none; }
	.primary-nav .omnibox--mobile { display: block; margin-block: 0.8rem; }
	.menu-btn { display: inline-flex; }
	.nav-list { flex-direction: column; gap: 0; padding-block-end: 0.8rem; }
	.nav-list a { display: block; padding: 0.7rem 0; font-size: var(--fs-1); }
	.brand-logo { width: 160px; }
	.hero-inner { padding-block: 2.25rem; }
	.event-row { grid-template-columns: 3.6rem 1fr; }
	.cal-grid td { height: 3.2rem; }
}
@media (max-width: 560px) {
	.stat-grid { grid-template-columns: minmax(0, 1fr); }
	.doc-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
	.doc-row .doc-date { grid-column: 2; }
}
/* Desktop: the disclosure ships (and is JS-held) open, the summary button
   disappears, and the panel reads as a plain nav bar. */
@media (min-width: 900px) {
	.nav-disclosure .menu-btn { display: none; }
	.pathway-layout { grid-template-columns: 5rem minmax(0, 1fr); gap: 2.25rem; }
	.pathway-progress { display: block; }
	.stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- motion (opt-in only; the still page is complete) ---------- */
@media (prefers-reduced-motion: no-preference) {
	a, .btn, .cta-apply, .omnibox button, .program-row::before,
	.nav-list a::after, .news-item, .cluster-door img, .feedback-row button {
		transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, filter 220ms ease;
	}
	.cluster-door:hover img { filter: grayscale(0.15) brightness(0.78) contrast(1.02); }

	/* cross-document view transitions: the lockup morphs between pages */
	@view-transition { navigation: auto; }
	.brand-lockup { view-transition-name: swtc-lockup; }

	/* homepage pathway-teaser rungs light up as the band scrolls into view */
	@supports (animation-timeline: view()) {
		.room-shop .ladder > li::before {
			animation: swtc-rung-light linear both;
			animation-timeline: view(block);
			animation-range: entry 10% cover 45%;
		}
		@keyframes swtc-rung-light {
			from { background: var(--accent-600); }
			to { background: var(--spark); }
		}
	}

	/* pathway ladder marker climbs with page scroll (pure CSS) */
	@supports (animation-timeline: scroll()) {
		.pathway-marker {
			animation: swtc-climb linear both;
			animation-timeline: scroll(root block);
		}
		@keyframes swtc-climb {
			from { transform: translateY(0); }
			to { transform: translateY(calc(-1 * (min(70vh, 34rem) - 6px))); }
		}
	}
}

/* ---------- students / workforce / about pages ----------
   Two small additions shared by page-students.php, page-workforce.php, and
   page-about.php: a responsive card grid for staff contact clusters (reuses
   .person-card itself, just lays several out side by side instead of the
   program page's single-column aside), and a light-paper caption for content
   photos outside the dark .hero (.photo-caption is tuned for the hero's dark
   duotone background and reads too pale on white paper). */
.person-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.75rem;
	margin-block-end: 1rem;
}
.figure-caption {
	font-size: var(--fs--1);
	color: var(--ink-soft);
	margin-block-start: 0.4rem;
}

/* ---------- added for page-admissions.php: numbered enrollment sequence ----------
   A real ol, not the rung-motif bullet list, because this content is a
   sequence a reader follows in order (apply, plan, transfer, advise,
   register, pay) rather than an unordered highlight set. */
.step-list { list-style: none; counter-reset: swtc-step; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.step-list > li { counter-increment: swtc-step; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.2rem 0.85rem; min-width: 0; }
.step-list > li::before {
	content: counter(swtc-step);
	font-family: var(--display);
	font-size: var(--fs-2);
	font-weight: 700;
	line-height: 1.1;
	color: var(--accent-700);
	grid-column: 1;
	grid-row: 1 / span 2;
}
.step-list h3 { grid-column: 2; margin: 0 0 0.15rem; font-family: var(--body); font-weight: 700; font-size: var(--fs-0); }
.step-list p { grid-column: 2; margin: 0; max-width: 62ch; }
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}

/* ---------- news photos (page-news.php) ---------- */
.news-photo {
	width: 100%;
	max-width: 22rem;
	border-radius: var(--radius);
	margin-block-end: 0.6rem;
	border-bottom: 3px solid var(--spark);
}

/* ---------- task-routed contact table (page-contact.php) ---------- */
.table-scroll { overflow-x: auto; }
.task-contact { width: 100%; border-collapse: collapse; margin-block: 1rem 1.5rem; }
.task-contact th, .task-contact td { text-align: left; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--accent-100); }
.task-contact thead th { font-family: var(--tag); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.task-contact tbody th { font-weight: 600; white-space: nowrap; }

/* ---------- numbered rung-list (ordered steps; page-admissions-es.php) ----------
   ul.rung-list marks an unordered set with a plain rung bar; this ol variant is
   for content that is genuinely sequential (enrollment steps), so the marker
   carries the step number instead of an interchangeable bar. */
ol.rung-list { list-style: none; padding-left: 0; counter-reset: swtc-step; }
ol.rung-list > li {
	position: relative;
	padding-left: calc(var(--rung-w) + 0.75rem);
	margin-block-end: 0.9rem;
	counter-increment: swtc-step;
}
ol.rung-list > li::before {
	content: counter(swtc-step);
	position: absolute;
	left: 0;
	top: 0.1em;
	width: var(--rung-w);
	height: var(--rung-w);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-600);
	color: #fff;
	font-family: var(--tag);
	font-size: 0.68rem;
	font-weight: 700;
	border-radius: 2px;
}
ol.rung-list > li p { margin: 0; }