/* wsu.css — Wichita State additions to the New City theme (loaded after tailwind.css by
   /_resources/_theme/includes/headcode.inc). tailwind.css is New City's compiled build and is
   never edited by hand; anything WSU adds to the design lives here. Bump the ?v= in headcode.inc
   when this file changes (the head include is copied into each page at publish time). */

/* Inter, the design's typeface (2026-10-12: Mike saw a star inside a fast fact's "2" in Safari). New City's Storybook loads it
   from Google Fonts (preview-head.html); our head never did, so a browser without Inter installed drew a fallback font, and
   Safari, which ignores fonts a user installs, drew San Francisco, whose overlapping glyph parts show inside the hollow giant
   numbers. The same request as Storybook. headcode.inc links it too; this import covers pages published before that link
   (the head include is copied in at publish) and can go once every page has been republished. */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* Print (2026-10-08, Mike's review of the first print preview). On paper: no navigation, no actions,
   no footer; the black-type full-name logo instead of the screen logo; a plain black page headline;
   links followed by their address in the link's own color, which may wrap; no button or fancy-link
   arrows. `.noprint` hides any block (www carried the class
   on 22 pages with no rule behind it); the Print Button (`#print-button`) and the site footer bear it. */
.wsu-print-logo {
	display: none;
}

/* Quote Feature quotation marks (2026-10-11: Mike saw the opening mark as three stray letters). tailwind.css carries the two marks as raw
   UTF-8 and is served as text/css with no charset, so a page or preview that is not UTF-8 (Modern Campus's preview)
   decodes them as Windows-1252. The same two rules with CSS escapes are plain ASCII and read the same everywhere. */
.before\:content-\[\'\201C\'\]::before {
	--tw-content: '\201C';
}
.\[\&\>\:last-child\]\:after\:content-\[\'\201D\'\] > :last-child::after {
	--tw-content: '\201D';
}

/* YouTube hero (Headers.xsl + wsu-hero-youtube.js, 2026-10-09): the frame runs 30% larger than the hero
   and sits centered, so YouTube's own chrome (the title bar on top, the logo bottom right) falls outside
   the crop; the frame takes no pointer events, so nothing in it can be hovered or clicked. */
.wsu-youtube-frame {
	inset: -15%;
}
.wsu-youtube-frame > iframe {
	display: block;
	width: 100%;
	height: 100%;
}

/* Video or Image with Caption and Image or Video (snippets.xsl, 2026-10-11). "Right of the text" floats the figure
   beside the copy from tablet width up, as the old Media With Caption's captioned-media--right did; "Left of the text"
   (Image or Video only; nothing migrates to it) mirrors it. On phones either runs full width. The transcript and
   audio-described links sit in one wrapping row under a video. */
.wsu-media-right,
.wsu-media-left {
	margin-block: 2.5rem;
}
@media (min-width: 48em) {
	.wsu-media-right {
		float: right;
		clear: right;
		width: 45%;
		margin: .375rem 0 1.5rem 2rem;
	}
	.wsu-media-left {
		float: left;
		clear: left;
		width: 45%;
		margin: .375rem 2rem 1.5rem 0;
	}
}
/* the poster fills the figure at 16:9 (New City's player sizes itself to the picture, so YouTube's 480 px letterboxed
   thumbnail showed small with black bars; cover crops the bars away). A captioned figure is display: table (the caption
   takes the picture's width), which shrank a video figure to its poster, so a figure holding a video is full width.
   A heading after a right-hand figure starts below it. */
.wsu-video-image .nc-video-wrapper,
.wsu-video-image figure:has(.nc-video-wrapper) {
	width: 100%;
	max-width: none;
}
.wsu-video-image .nc-video-wrapper img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.wsu-media-right ~ h2,
.wsu-media-right ~ h3,
.wsu-media-right ~ h4 {
	clear: right;
}
.wsu-media-left ~ h2,
.wsu-media-left ~ h3,
.wsu-media-left ~ h4 {
	clear: left;
}
.wsu-media-links {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.25rem;
	row-gap: .25rem;
}

@media print {
	.noprint,
	#print-button,
	#site-header nav,
	#site-header form,
	#site-header button,
	#site-header a[href="/apply"],
	.a2a_kit, /* a story's share buttons: on paper they were a row of bare addresses */
	[data-nc-component="mobile-section-nav"],
	[data-nc-component="desktop-section-nav"] {
		display: none !important;
	}

	/* the header prints white with black type whatever the browser's background setting, so the
	   black-type wordmark always shows; the logo link keeps its box and the screen logo (yellow mark)
	   gives way to the wordmark */
	#site-header,
	#site-header * {
		background: transparent !important;
		color: #000 !important;
	}
	#site-header a[aria-label="Home"] > img:not(.wsu-print-logo) {
		display: none !important;
	}
	#site-header a[aria-label="Home"] > .wsu-print-logo {
		display: block !important;
	}

	/* the page headline: plain black, no band behind it */
	[data-nc-component$="page-header"],
	[data-nc-component$="page-header"] * {
		color: #000 !important;
		background: transparent !important;
	}

	/* headings on paper (Mike 10/20: the H1 "needs to come way down ... maybe like half size", site-wide). The design's
	   sizes are a screen's: at the printed width (680-703px, Letter or A4 inside these margins) a story's or a policy's
	   H1 printed at 60px, two to four lines of 45pt type, and a component's headline at 40px. On paper every H1 is 30px
	   and the levels step down under it, so no heading prints larger than the page's title. Keyed on the tag, not the
	   style level: the simple page header styles its H1 as a level 3, so by style level the title would print smaller
	   than the headings under it. The band above a story's or a policy's own H1 (the simple page header's non-semantic
	   H1) prints as a label, and a story's byline steps down with its title. */
	h1.nc-heading { font-size: 1.875rem !important; }
	h1.nc-heading[role="none"] { font-size: 1.25rem !important; }
	h2.nc-heading { font-size: 1.5rem !important; }
	h3.nc-heading { font-size: 1.25rem !important; }
	h4.nc-heading { font-size: 1.125rem !important; }
	h5.nc-heading,
	h6.nc-heading { font-size: 1rem !important; }
	[data-nc-component="news-story-page-header"] div.font-display.font-bold { font-size: 1.125rem !important; }

	/* links show where they go (as www did). The address takes the link's own color, which the
	   design already sets against the background (a fixed gray vanished on black buttons, Mike 10/8);
	   a long address wraps instead of running off the line, even inside a nowrap icon link */
	a[href]::after {
		content: " (" attr(href) ")";
		font-size: .85em;
		font-weight: normal;
		color: inherit;
		text-transform: none;
		white-space: normal;
		word-break: break-all;
		overflow-wrap: anywhere;
	}
	a[href^="#"]::after,
	a[href^="javascript:"]::after,
	a[href^="tel:"]::after,
	#site-header a::after,
	a[aria-label="Home"]::after,
	a[class~="group/social-link"]::after, /* icon-only social links: the address wrapped inside the icon box */
	.nc-fancy-link-wrapper .nc-fancy-link[href^="#"]::after,
	.nc-fancy-link-wrapper .nc-fancy-link[href^="javascript:"]::after {
		content: none;
	}
	abbr[title]::after {
		content: " (" attr(title) ")";
	}

	/* buttons: no arrow on paper (New City draws it as a zero-width box shifted into the right
	   padding, where it sat on top of the address; Mike 10/8: drop it rather than make room), even
	   padding without it, and the button keeps its colors even when the browser is set to skip
	   backgrounds, so white button text never lands on white paper */
	.nc-button .nc-button-text::after {
		display: none !important;
	}
	.nc-button {
		padding-right: 1.25rem !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.nc-button[data-large],
	[data-large-buttons] .nc-button {
		padding-right: calc(22rem / 16) !important;
	}

	/* fancy links: the theme draws the arrow as the link's own ::after, which outranks the address
	   rule above (so they printed an arrow and no address); the arrow box becomes the address */
	.nc-fancy-link-wrapper {
		padding-right: 0;
	}
	.nc-fancy-link-wrapper .nc-fancy-link::after {
		content: " (" attr(href) ")";
		position: static;
		display: inline;
		width: auto;
		height: auto;
		margin-left: 0;
		transform: none;
		-webkit-mask: none;
		mask: none;
		background-color: transparent;
	}

	img,
	tr {
		break-inside: avoid;
	}
	img {
		max-width: 100% !important;
	}
	h2,
	h3 {
		break-after: avoid;
	}
	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}
	@page {
		margin: 1.5cm;
	}
}

/* Columns (snippets.xsl ou:wsu-columns-grid, 2026-10-11): the two things the theme's build lacks. Vertical alignment
   per column (the columns stretch to the row by default, so Top needs nothing), and the template for equal shares
   that are not whole twelfths (five equal columns: the XSL writes --wsu-cols as fr tracks); below md the grid has one
   track, so the columns stack as on the 12-part grid. */
/* A column is its own .prose (for a snippet outside any text, as on an interior page), and .prose sets 1rem: inside
   text (an Editorial's 18px body) a column takes the size around it instead. */
.prose .wsu-columns > .prose { font-size: inherit; line-height: inherit; }
/* Slabs inside a column (Tim, 10/23: an Editorial under an In-Page Alert in a column sat 80px down, "as if it had a
   white background"): a slab brings the page's rhythm — 5rem above and below for the default theme — which a column
   does not want; its content starts at the column's top. Blocks in a column follow each other at 1.5rem. */
.wsu-columns [data-nc-component] > .generic-slab-inner { margin-block: 0; }
.wsu-columns [data-nc-component] + * { margin-top: 1.5rem; }
/* The space between the columns, from Columns Settings (Tim, 10/23): standard is the grid's 1.5rem; none lets pictures
   run together; wide is twice the standard. Only the column gap: the row gap when phones stack is the snippet's own. */
.wsu-columns.wsu-gap-none { column-gap: 0; }
.wsu-columns.wsu-gap-wide { column-gap: 3rem; }
.wsu-columns > .wsu-valign-middle { align-self: center; }
.wsu-columns > .wsu-valign-bottom { align-self: end; }
@media (min-width: 48em) {
	.wsu-columns-fr { grid-template-columns: var(--wsu-cols); }
}

/* Zebra Stripe List (2026-10-12): the shared "Zebra Stripe List" snippet, ul.list--zebra-stripe (11 www pages: long
   lists of names, courses, dates). No bullets, every other item shaded, the bands flush with the text. The shade is
   the text color at 7.5%: on a white page that is New City's table stripe, rgb(240 240 240); on a gray, yellow or dark
   block it is a band a step darker (lighter on dark) than the block, where a fixed gray would vanish or glare.
   !important because New City's prose list rules repeat at three nesting levels, the deepest at (0,4,2), as its own
   ul.no-bullet does. The stripes print. */
ul.list--zebra-stripe {
	list-style: none !important;
	margin-inline-start: 0; /* the editor's wysiwyg.css indents every list 2em */
	padding-inline-start: 0 !important;
}
ul.list--zebra-stripe > li {
	margin-block: 0 !important;
	padding: .5rem 1rem !important;
	break-inside: avoid;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
ul.list--zebra-stripe > li:nth-child(odd) {
	background-color: rgb(var(--theme-text-color, 56 56 56) / .075);
}
ul.list--zebra-stripe > li > :first-child {
	margin-top: 0 !important;
}
ul.list--zebra-stripe > li > :last-child {
	margin-bottom: 0 !important;
}

/* Org Chart snippet (2026-10-12, test pages /test-folder/org-chart*.pcf): draws the Org Chart snippet translator's output.
   Markup: div.org-tree[style="--cols: N; --cols-wide: M"] > h2.org-tree__top, then
   div.org-tree__group (optional h3.org-tree__label) > ul.org-tree__row > li.org-tree__office
   (span.org-tree__name, then ul.org-tree__row of offices or ul.org-tree__units of units).
   Wide containers get a Visio-style tree; narrow ones an indented outline. */
.org-tree {
	--org-ink: #171717; --org-muted: #525252; --org-line: #737373; --org-box: #171717; --org-unit: #d4d4d4;
	--org-bg: #fff; --org-gold: #FFDB00; --org-top-bg: #171717; --org-top-ink: #fff;
	--org-font: Inter, ui-sans-serif, system-ui, sans-serif; --org-display: Inter, ui-sans-serif, system-ui, sans-serif;
	--lw: 2px;            /* connector weight */
	--gap: .5rem;         /* between columns */
	--vgap: .35rem;       /* between stacked units */
	--stub: .85rem;       /* bus down to a box */
	--drop: .85rem;       /* box down to what hangs from it */
	--tick: .45rem;       /* rail across to a unit */
	--rail: .4rem;        /* rail inset from the box's left edge */
	--indent: 1.4rem;     /* spine to the first column */
	--pad-y: .45rem;
	--pad-x: .45rem;
	--unit-size: .75rem;
	--title-size: .8125rem;
	container-type: inline-size;
	position: relative;
	margin-block: 1.5rem 2.5rem;
	color: var(--org-ink);
	font: 400 .875rem/1.35 var(--org-font);
}
.org-tree *, .org-tree *::before, .org-tree *::after { box-sizing: border-box; }
/* Resets at one class of weight: above the themes' bare ul / li rules, below every org-tree rule. */
.org-tree :where(ul) { list-style: none; margin: 0; padding: 0; }
.org-tree :where(li) { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.org-tree :where(li)::marker { content: none; }
.org-tree__note { display: block; margin-top: .15rem; font-size: .75rem; font-weight: 400; color: var(--org-muted); }
.org-tree__top {
	position: relative;
	margin: 0 0 .5rem;
	padding: .75rem 1rem .85rem;
	background: var(--org-top-bg);
	color: var(--org-top-ink);
	border-bottom: 4px solid var(--org-gold);
	font: 700 1.125rem/1.25 var(--org-display);
	letter-spacing: normal;
	text-transform: none;
	text-wrap: balance;
}
.org-tree__label {
	position: relative;
	margin: 0;
	padding: 0 0 .6rem;
	font: 700 .875rem/1.3 var(--org-display);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--org-ink);
}

/* ---------- Outline (narrow) ---------- */
.org-tree__group { padding-top: 1rem; }
.org-tree__group > .org-tree__row { display: grid; gap: .6rem; }
.org-tree__group > .org-tree__row > .org-tree__office { padding: .6rem .75rem; border: 1px solid var(--org-box); border-top: 3px solid var(--org-gold); background: var(--org-bg); }
.org-tree__name { display: block; font-weight: 700; }
.org-tree__office .org-tree__row,
.org-tree__units,
.org-tree__functions > .org-tree__lines {
	display: grid; gap: .15rem;
	margin: .35rem 0 .1rem .2rem; padding-left: .8rem;
	border-left: var(--lw) solid var(--org-unit);
}
.org-tree__office .org-tree__office > .org-tree__name { margin-top: .25rem; }
.org-tree__unit--parent { font-weight: 700; }
.org-tree__functions > .org-tree__lines { border-left: 0; margin-left: 0; padding-left: 0; }
.org-tree__unit > .org-tree__lines { margin: .1rem 0 .15rem; padding-left: .75rem; font-weight: 400; display: grid; gap: .1rem; }
.org-tree__units--root { border: 0; margin: 0 0 .5rem; padding: 0; }

/* ---------- Tree (wide) ---------- */
@container (min-width: 70rem) {
	.org-tree__group { --col: clamp(6.5rem, calc((100cqw - var(--indent) - (var(--cols, 10) - 1) * var(--gap)) / var(--cols, 10)), 11rem); }
	.org-tree li { min-width: 0; overflow-wrap: break-word; }

	.org-tree__top { width: fit-content; max-width: 22rem; margin: 0 auto var(--drop); text-align: center; }
	.org-tree__top::after {                                    /* drop from the top box */
		content: ""; position: absolute; left: 50%; top: calc(100% + 4px); width: var(--lw); height: var(--drop);
		margin-left: calc(var(--lw) / -2); background: var(--org-line);
	}

	/* groups hang from a left spine */
	.org-tree__group { position: relative; padding: 1.25rem 0 0 var(--indent); }
	.org-tree__group:first-of-type::after {                    /* bar from the spine to under the top box */
		content: ""; position: absolute; top: 0; left: 0; width: 50%; height: var(--lw); background: var(--org-line);
	}
	.org-tree__label::before {                                 /* spine through the label */
		content: ""; position: absolute; left: calc(-1 * var(--indent)); top: -1.25rem; bottom: 0; width: var(--lw); background: var(--org-line);
	}
	.org-tree__group:not(:has(> .org-tree__label)) > .org-tree__row { margin-top: 0; }
	.org-tree__group:not(:has(> .org-tree__label))::before {   /* spine through an unlabeled group's top padding */
		content: ""; position: absolute; left: 0; top: 0; height: 1.25rem; width: var(--lw); background: var(--org-line);
	}
	.org-tree__label::after {                                  /* marker on the spine */
		content: ""; position: absolute; top: .25em; left: calc(-1 * var(--indent) + var(--lw) / 2);
		width: .75rem; height: .75rem; transform: translateX(-50%); border-radius: 50%; background: var(--org-gold); border: 2px solid var(--org-bg);
	}
	.org-tree__group:not(:last-of-type) > .org-tree__row::before { /* spine on to the next group */
		content: ""; position: absolute; left: calc(-1 * var(--indent)); top: 0; bottom: 0; width: var(--lw); background: var(--org-line);
	}
	.org-tree__group > .org-tree__row::after {                 /* bus from the spine to the first column */
		content: ""; position: absolute; top: 0; left: calc(-1 * var(--indent)); width: var(--indent); height: var(--lw); background: var(--org-line);
	}

	/* One group, no label: a classic centered tree under the top box */
	.org-tree:not(:has(> .org-tree__group ~ .org-tree__group)):not(:has(.org-tree__label)) .org-tree__group { padding: 0; }
	.org-tree:not(:has(> .org-tree__group ~ .org-tree__group)):not(:has(.org-tree__label)) .org-tree__group::before,
	.org-tree:not(:has(> .org-tree__group ~ .org-tree__group)):not(:has(.org-tree__label)) .org-tree__group::after,
	.org-tree:not(:has(> .org-tree__group ~ .org-tree__group)):not(:has(.org-tree__label)) .org-tree__group > .org-tree__row::after { display: none; }
	.org-tree:not(:has(> .org-tree__group ~ .org-tree__group)):not(:has(.org-tree__label)) .org-tree__group > .org-tree__row { justify-content: center; }

	/* ---- rows of boxes ---- */
	.org-tree .org-tree__row { position: relative; display: flex; align-items: flex-start; gap: var(--gap); margin: 0; padding: 0; border: 0; }
	.org-tree__row > li { position: relative; flex: none; width: var(--col); padding-top: var(--stub); }
	.org-tree__row > .org-tree__office--spread { width: auto; }
	.org-tree__row > .org-tree__office--long { width: calc(2 * var(--col) + var(--gap)); }
	.org-tree__row > li::before {                              /* bus segment + stub */
		content: ""; position: absolute; top: 0; height: var(--stub);
		left: calc(var(--gap) / -2); right: calc(var(--gap) / -2);
		background:
			linear-gradient(var(--org-line), var(--org-line)) 50% 0 / var(--lw) 100% no-repeat,
			linear-gradient(var(--org-line), var(--org-line)) 0 0 / 100% var(--lw) no-repeat;
	}
	.org-tree__row > li:last-child::before {
		background:
			linear-gradient(var(--org-line), var(--org-line)) 50% 0 / var(--lw) 100% no-repeat,
			linear-gradient(var(--org-line), var(--org-line)) 0 0 / 50% var(--lw) no-repeat;
	}
	.org-tree__office > .org-tree__row > li:first-child::before,
	.org-tree:not(:has(> .org-tree__group ~ .org-tree__group)):not(:has(.org-tree__label)) .org-tree__group > .org-tree__row > li:first-child::before {
		background:
			linear-gradient(var(--org-line), var(--org-line)) 50% 0 / var(--lw) 100% no-repeat,
			linear-gradient(var(--org-line), var(--org-line)) 100% 0 / 50% var(--lw) no-repeat;
	}
	.org-tree__office > .org-tree__row > li:only-child::before,
	.org-tree:not(:has(> .org-tree__group ~ .org-tree__group)):not(:has(.org-tree__label)) .org-tree__group > .org-tree__row > li:only-child::before {
		background: linear-gradient(var(--org-line), var(--org-line)) 50% 0 / var(--lw) 100% no-repeat;
	}

	/* ---- boxes ---- */
	.org-tree__group > .org-tree__row > .org-tree__office { padding: var(--stub) 0 0; border: 0; background: none; }
	.org-tree__name {
		position: relative; margin: 0; padding: var(--pad-y) var(--pad-x);
		background: var(--org-bg); border: 1.5px solid var(--org-box); border-top: 3px solid var(--org-gold);
		font-weight: 700; font-size: var(--title-size); line-height: 1.3; text-align: center;
	}
	.org-tree__office .org-tree__office > .org-tree__name { margin-top: 0; }
	.org-tree .org-tree__office > .org-tree__row { margin-top: var(--drop); }
	.org-tree__office > .org-tree__row::after {                /* drop from an office to its row's bus */
		content: ""; position: absolute; left: 50%; top: calc(-1 * var(--drop)); height: var(--drop);
		width: var(--lw); margin-left: calc(var(--lw) / -2); background: var(--org-line);
	}
	.org-tree__functions > .org-tree__lines {                  /* an office's own functions: one box */
		display: grid; gap: .3rem; margin: 0; padding: var(--pad-y) var(--pad-x);
		background: var(--org-bg); border: 1.5px solid var(--org-box);
		font-size: var(--unit-size); line-height: 1.3; text-align: center;
	}

	/* ---- stacked units ---- */
	.org-tree__units {
		display: grid; align-content: start; gap: var(--vgap);
		margin: var(--drop) 0 0; padding: 0 0 0 calc(var(--rail) + var(--tick)); border: 0;
	}
	.org-tree__units > li {
		position: relative; padding: .3rem .4rem; background: var(--org-bg); border: 1px solid var(--org-unit);
		font-size: var(--unit-size); line-height: 1.3;
	}
	.org-tree__units > li::before {                            /* rail piece up to the previous unit (or the box) */
		content: ""; position: absolute; width: var(--lw); background: var(--org-line);
		left: calc(-1 * var(--tick) - 1px - var(--lw) / 2);
		top: calc(-1 * var(--vgap) - 1px); bottom: -1px;
	}
	.org-tree__units > li::after {                             /* tick across */
		content: ""; position: absolute; height: var(--lw); background: var(--org-line);
		left: calc(-1 * var(--tick) - 1px); width: var(--tick); top: calc(50% - var(--lw) / 2);
	}
	.org-tree__units > li:first-child::before { top: calc(-1 * var(--drop) - 1px); }
	.org-tree__units > li:last-child::before { bottom: calc(50% - var(--lw) / 2); }
	/* the top box's own units: one centered box under it, on the drop line */
	.org-tree .org-tree__units--root {
		position: relative; display: grid; gap: .3rem; width: fit-content; max-width: min(100%, 24rem);
		margin: 0 auto var(--drop); padding: var(--pad-y) var(--pad-x);
		background: var(--org-bg); border: 1.5px solid var(--org-box); text-align: center; font-size: var(--unit-size);
	}
	.org-tree .org-tree__units--root > li { border: 0; padding: 0; background: none; font-size: inherit; }
	.org-tree .org-tree__units--root > li::before,
	.org-tree .org-tree__units--root > li::after { content: none; }
	.org-tree .org-tree__units--root::after {
		content: ""; position: absolute; left: 50%; top: 100%; width: var(--lw); height: var(--drop);
		margin-left: calc(var(--lw) / -2); background: var(--org-line);
	}
	.org-tree__unit > .org-tree__lines {
		margin: .25rem 0 .05rem; padding-left: .5rem; border-left: 1px solid var(--org-unit);
		font-size: .95em; font-weight: 400;
	}
}

/* Wide: a long column of units (9+) splits in two, either side of the rail. */
@container (min-width: 90rem) {
	.org-tree__group {
		--col: clamp(6.5rem, calc((100cqw - var(--indent) - (var(--cols-wide, var(--cols, 10)) - 1) * var(--gap)) / var(--cols-wide, var(--cols, 10))), 11rem);
		--unit-size: .8125rem; --title-size: .875rem; --gap: .6rem; --indent: 1.75rem;
		--rail: .55rem; --tick: .55rem; --pad-x: .6rem; --pad-y: .5rem;
	}
	.org-tree__units--long { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(2 * var(--tick)); padding: 0 var(--rail); }
	.org-tree__units--long > li:nth-child(odd)::before { left: auto; right: calc(-1 * var(--tick) - 1px - var(--lw) / 2); }
	.org-tree__units--long > li:nth-child(odd)::after { left: auto; right: calc(-1 * var(--tick) - 1px); }
	.org-tree__units--long > li:nth-child(odd):nth-last-child(-n+2)::before { bottom: calc(50% - var(--lw) / 2); }
	.org-tree__units--long > li:nth-child(even)::before { display: none; }
}
@container (max-width: 89.99rem) {
	.org-tree__row > .org-tree__office--long { width: var(--col); }
}
/* www-dev: Full-Width Top Content is edge to edge; keep the gutters the slabs use. */
.org-tree { max-width: 120rem; margin-inline: auto; padding-inline: 1rem; overflow-x: auto; }
@media (min-width: 64rem) { .org-tree { padding-inline: 2rem; } }

@media print {
	.org-tree * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Fast facts: Extra Small (2026-10-16; Tim: six-digit numbers broke inside the cards at some widths; Mike: a fourth size).
   The giant number is at most 60px, the step below Small's 90px, and never wider than its fact: "444,444", the widest
   six-digit number, sets 4.15em wide in Inter Bold, so 23.5cqi keeps it on one line in a card, the block, the sidebar or a
   phone (the cards' narrowest stretch, two across at 768-1023px, leaves room for 63px; a phone at 320px for 50px). A prefix
   or suffix is 0.6 of the number (the widest, "%", 0.94em of its own size) and shares the row, so with one the number
   gives up a little more room (20.5cqi) and with both more again (18.5cqi). The molecule marks the parts with
   wsu-fact-giant / wsu-fact-affix; the other sizes are tailwind.css's. */
.nc-fast-fact[data-size="xs"] {
	container-type: inline-size;
}
.nc-fast-fact[data-size="xs"] .wsu-fact-giant {
	font-size: min(3.75rem, 23.5cqi);
}
.nc-fast-fact[data-size="xs"]:has(.wsu-fact-affix) .wsu-fact-giant {
	font-size: min(3.75rem, 20.5cqi);
}
.nc-fast-fact[data-size="xs"]:has(.wsu-fact-affix ~ .wsu-fact-affix) .wsu-fact-giant {
	font-size: min(3.75rem, 18.5cqi);
}
.nc-fast-fact[data-size="xs"] .wsu-fact-affix {
	font-size: min(2.25rem, 12.3cqi);
	padding-bottom: .09em;   /* lifts it to the number's baseline */
}
.nc-fast-fact[data-size="xs"]:has(.wsu-fact-affix ~ .wsu-fact-affix) .wsu-fact-affix {
	font-size: min(2.25rem, 11.1cqi);
}

/* Social links inside prose (2026-10-17: a Callout that sits in a column or in a sidebar <div> is prose to New
   City's list rules, so its social icons got bullets, list margins and indents). The molecule's list carries
   nc-social-links; !important as the zebra list above, for the same three-level prose rules. */
.prose ul.nc-social-links {
	list-style: none !important;
	margin-block: 0 !important;
	padding-inline-start: 0 !important;
}
.prose ul.nc-social-links > li {
	margin-block: 0 !important;
	padding-inline-start: 0 !important;
}
.prose ul.nc-social-links > li::marker {
	content: none;
}
/* The design's own lists inside prose (2026-10-23, Mike: a Billboard in a column showed bullets beside its buttons and
   the buttons indented). The molecules' lists — the button list, the pagination, the nav lists — carry role="list" and
   utility classes only, so New City's prose list rules reach them wherever a slab sits in a column or a sidebar. Same
   reset as the social links above; !important for the same three-level prose rules. Scoped to main: the site header's
   mega-menu is prose too, by New City's design, and keeps its own list spacing. */
main .prose :is(ul, ol)[role="list"] {
	list-style: none !important;
	margin-block: 0 !important;
	padding-inline-start: 0 !important;
}
main .prose :is(ul, ol)[role="list"] > li {
	margin-block: 0 !important;
	padding-inline-start: 0 !important;
}
main .prose :is(ul, ol)[role="list"] > li::marker {
	content: none;
}

/* Buttons inside text (2026-10-19: the migrated /about Fast Facts button was yellow on yellow). A button written in
   body text, a column or a footer line is a link in .prose, and New City's prose link rule (0,2,1; up to 0,4,1 in
   its .wysiwyg-embed variants) outranks .nc-button[data-variant] (0,2,0): the button took the link color, weight and
   underline. On Neutral 700/900, Warning and Danger slabs the link color is the button's own color (1.0–1.4:1).
   The prose rule colors a link with --theme-link-color, so each button points that at its own text color (every
   prose variant, hover included); weight and underline repeat the design's three selectors with the button class. */
.nc-button:not([data-variant]),
.nc-button[data-variant='1'] {
	--theme-link-color: var(--theme-button-text-color);
	--theme-link-hocus-color: var(--theme-button-hocus-text-color);
}
.nc-button[data-variant='2'] {
	--theme-link-color: var(--theme-button-2-text-color);
	--theme-link-hocus-color: var(--theme-button-2-hocus-text-color);
}
.prose a.nc-button:not(.wysiwyg-embed *),
.wysiwyg-embed .prose a.nc-button:not(.wysiwyg-embed .wysiwyg-embed *),
.wysiwyg-embed .wysiwyg-embed .prose a.nc-button {
	font-weight: 700;
	text-decoration: none;
}

/* A fancy link on a line of its own (snippets.xsl, 2026-10-19: a single www rich link) sits in the design's prose
   escape, which has no margins of its own: give it a paragraph's. */
.wsu-fancy-link-single {
	margin-block: 1.25em;
}

/* Arrowheads beside a sidebar (2026-10-19, Mike on /about/strategic_plan/mission: "the slab arrows don't overlap").
   New City spaces colored slabs apart in the main column of a page with a sidebar (its own CSS: "normal top-margin
   when against sidebar"), so a bottom arrowhead pointed into white space. A colored slab right after one with a
   bottom arrowhead now touches it, as slabs do full width and as www's sections did, so the arrowhead lands on the
   next slab; one with a top arrowhead of its own overlaps twice as far, as the full-width rule does. Desktop only:
   below 64em there is no sidebar beside the column and the design's own rules apply. */
@media (min-width: 64em) {
	.with-sidebar .with-sidebar__main-inner-wrapper > .generic-slab[data-tw-theme]:not([data-tw-theme='default'])[data-arrowhead-bottom] + .generic-slab[data-tw-theme]:not([data-tw-theme='default']) > .generic-slab-inner {
		margin-top: 0;
	}
	.with-sidebar .with-sidebar__main-inner-wrapper > .generic-slab[data-tw-theme]:not([data-tw-theme='default'])[data-arrowhead-bottom] + .generic-slab[data-tw-theme][data-arrowhead-top]:not([data-tw-theme='default']) > .generic-slab-inner {
		margin-top: calc(2 * var(--arrowhead-h) * -1);
	}
}

/* Frames pasted in the text — maps, forms, dashboards, players a migration kept — each wrapped by
   template-matches.xsl (2026-10-18): a landscape frame keeps its proportions in a box (the aspect-ratio is
   inline), a portrait one keeps its height attribute and takes the full width. */
.wsu-frame { position: relative; width: 100%; max-width: 100%; margin-block: 1.5rem; }
.wsu-frame:not(.wsu-frame-tall) > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wsu-frame.wsu-frame-tall > iframe { display: block; width: 100%; border: 0; }

/* An old snippet with no translator (a migration draft's passthrough): snippets.xsl shows its content as it
   is, flagged in previews (2026-10-18). */
.wsu-unconverted { border-left: 6px solid #c8102e; padding: 0.25rem 0 0.25rem 1rem; margin-block: 2rem; }
.wsu-unconverted-cell + .wsu-unconverted-cell { margin-top: 1rem; }

/* Gallery lightbox (2026-10-18): the Gallery organism's pictures open in the bundle's Magnific
   popup (wsu-gallery.js, mainClass wsu-gallery-popup). New City's compiled CSS carries only the
   popup's frame rules it uses for video, so the picture lightbox is styled here. */
.mfp-bg.wsu-gallery-popup { position: fixed; inset: 0; z-index: 1042; background: #000; opacity: 0.92; }
.mfp-wrap.wsu-gallery-popup { position: fixed; inset: 0; z-index: 1043; outline: none; overflow: hidden auto; }
.wsu-gallery-popup .mfp-container { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 4.5rem; box-sizing: border-box; }
.wsu-gallery-popup .mfp-content { position: relative; max-width: 100%; margin: 0 auto; }
.wsu-gallery-popup .mfp-figure, .wsu-gallery-popup figure { margin: 0; }
/* Magnific's base rules are in the bundle too: its border-drawn arrow triangle (::before) is hidden, the
   caption bar keeps its place under the picture, and the picture's inline max-height (the window height,
   set by the script) is overridden so the caption and counter stay in view. */
.wsu-gallery-popup .mfp-img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 9rem) !important; margin: 0 auto; box-shadow: 0 0 12px rgba(0, 0, 0, 0.7); }
.wsu-gallery-popup .mfp-bottom-bar { position: absolute; top: 100%; left: 0; width: 100%; display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.6rem; color: #f3f3f3; font-size: 0.95rem; line-height: 1.35; }
.wsu-gallery-popup .mfp-title { color: #f3f3f3; padding-right: 0 !important; }
.wsu-gallery-popup .mfp-counter { position: static !important; color: #c9c7c4; white-space: nowrap; }
.wsu-gallery-popup div.mfp-close { display: none; }
.wsu-gallery-popup button.mfp-close { position: absolute; top: 0; right: 0; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; color: #fff; font-size: 2rem; line-height: 2.75rem; text-align: center; cursor: pointer; opacity: 0.8; }
.wsu-gallery-popup button.mfp-close:hover, .wsu-gallery-popup button.mfp-close:focus { opacity: 1; outline: 2px solid #ffc217; outline-offset: -2px; }
.wsu-gallery-popup .mfp-arrow { position: absolute; top: 50%; width: 3rem; height: 3rem; margin: -1.5rem 0 0 !important; padding: 0; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 0; cursor: pointer; opacity: 0.9; }
/* Magnific's own :active rule moves the arrow's top margin (-54px) and the close button (top: 1px) while the
   mouse is down; the arrow jumped 30px, the release landed on the overlay, and the overlay click closed the
   lightbox (Mike, 10/18). Both stay put. */
.wsu-gallery-popup .mfp-arrow:active { margin: -1.5rem 0 0 !important; top: 50% !important; }
.wsu-gallery-popup button.mfp-close:active { top: 0 !important; }
.wsu-gallery-popup .mfp-arrow:hover, .wsu-gallery-popup .mfp-arrow:focus { background: #ffc217; outline: none; opacity: 1; }
.wsu-gallery-popup .mfp-arrow::before { display: none !important; }
.wsu-gallery-popup .mfp-arrow::after { content: ""; position: absolute; top: 50% !important; left: 50% !important; width: 0.85rem !important; height: 0.85rem !important; margin: 0 !important; border: solid #fff !important; border-width: 0 3px 3px 0 !important; opacity: 1; }
.wsu-gallery-popup .mfp-arrow:hover::after, .wsu-gallery-popup .mfp-arrow:focus::after { border-color: #000 !important; }
.wsu-gallery-popup .mfp-arrow-left { left: 0.75rem; }
.wsu-gallery-popup .mfp-arrow-left::after { transform: translate(-30%, -50%) rotate(135deg); }
.wsu-gallery-popup .mfp-arrow-right { right: 0.75rem; }
.wsu-gallery-popup .mfp-arrow-right::after { transform: translate(-70%, -50%) rotate(-45deg); }
.wsu-gallery-popup .mfp-preloader { position: absolute; top: 50%; left: 0; right: 0; z-index: 1044; margin-top: -0.8em; color: #c9c7c4; text-align: center; }
.wsu-gallery-popup .mfp-s-ready .mfp-preloader, .wsu-gallery-popup .mfp-s-error .mfp-content { display: none; }
@media (max-width: 40em) { .wsu-gallery-popup .mfp-container { padding: 0 0.5rem; } .wsu-gallery-popup .mfp-arrow { width: 2.25rem; height: 2.25rem; margin-top: -1.125rem; opacity: 0.75; } }

/* Gallery looks (2026-10-18): the Gallery snippet's text under the pictures (Grid, Masonry), the Cover, the
   Filmstrip and the Slideshow (galleries.xsl, wsu-gallery-render; wsu-gallery.js; wsu-rotator.js). */
.wsu-gallery-item { display: flex; flex-direction: column; gap: 0.5rem; }
.wsu-gallery-text { margin: 0; font-size: 0.95rem; line-height: 1.35; }
.wsu-gallery-text strong { display: block; }
.wsu-gallery-cover { max-width: 48rem; }
.wsu-gallery-cover__link { position: relative; display: block; text-decoration: none; }
.wsu-gallery-cover__link img { display: block; width: 100%; height: auto; object-fit: cover; }
.wsu-gallery-cover__badge { position: absolute; left: 1rem; bottom: 1rem; padding: 0.55rem 0.95rem; background: #ffc217; color: #000; font-weight: 700; line-height: 1.2; }
.wsu-gallery-cover__link:hover .wsu-gallery-cover__badge, .wsu-gallery-cover__link:focus-visible .wsu-gallery-cover__badge { background: #000; color: #ffc217; }
.wsu-gallery-cover__link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.wsu-gallery-cover__rest[hidden] { display: none !important; }
.wsu-gallery-filmstrip__stage, .wsu-gallery-slide { max-width: 64rem; margin: 0 auto; }
.wsu-gallery-filmstrip__open { display: block; }
.wsu-gallery-filmstrip__open img { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: contain; }
.wsu-gallery-filmstrip__caption { margin-top: 0.6rem; min-height: 1.35em; line-height: 1.35; text-align: center; }
.wsu-gallery-filmstrip__strip { display: flex; gap: 0.5rem; width: fit-content; max-width: 100%; margin: 1rem auto 0; padding: 0.25rem; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; }
.wsu-gallery-filmstrip__strip > li { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.wsu-gallery-filmstrip__thumb { display: block; width: 6.5rem; padding: 0; border: 3px solid transparent; background: none; cursor: pointer; opacity: 0.7; }
.wsu-gallery-filmstrip__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.wsu-gallery-filmstrip__thumb:hover, .wsu-gallery-filmstrip__thumb:focus-visible { opacity: 1; }
.wsu-gallery-filmstrip__thumb:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.wsu-gallery-filmstrip__thumb[aria-current="true"] { border-color: #ffc217; opacity: 1; }
.wsu-gallery-slide a { display: block; }
.wsu-gallery-slide img { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: contain; }
.wsu-gallery-slide__caption { margin-top: 0.6rem; line-height: 1.35; text-align: center; }
/* the rotator draws the current dot dark, which vanishes on a dark slab: the gallery's is WSU yellow, ringed */
.wsu-gallery-slideshow .wsu-rotator__dot[aria-disabled="true"] { background: #ffc217; }

/* Policies (the policy page type, 2026-10-20a). The manual's outline numbering, I / A / 1 / a / i / 1 six deep as www's
   policy.css drew it, over New City's prose list styles (decimal / a / i): scoped to the policy's own text in its main
   column (not the cover sheet after it), with more selector parts than the prose rule at every depth, so no !important.
   On wide screens a rule beside each numbered item, as on www; in print New City's lists already hang their numbers
   outside, so a heading that starts an item stays on its number's line. Then the title, the header's facts and status,
   the manual's search band above the header (2026-10-20b), the cover sheet (2026-10-20e), and the chapter indexes and
   What's New (policy-listing.php). */
main[data-page-type="policy"] .with-sidebar__main .prose:not(.wsu-policy-coversheet *) ol { list-style-type: upper-roman; }
main[data-page-type="policy"] .with-sidebar__main .prose:not(.wsu-policy-coversheet *) ol ol { list-style-type: upper-alpha; }
main[data-page-type="policy"] .with-sidebar__main .prose:not(.wsu-policy-coversheet *) ol ol ol { list-style-type: decimal; }
main[data-page-type="policy"] .with-sidebar__main .prose:not(.wsu-policy-coversheet *) ol ol ol ol { list-style-type: lower-alpha; }
main[data-page-type="policy"] .with-sidebar__main .prose:not(.wsu-policy-coversheet *) ol ol ol ol ol { list-style-type: lower-roman; }
main[data-page-type="policy"] .with-sidebar__main .prose:not(.wsu-policy-coversheet *) ol ol ol ol ol ol { list-style-type: decimal; }
@media (min-width: 48em) {
	main[data-page-type="policy"] .with-sidebar__main .prose:not(.wsu-policy-coversheet *) ol > li { border-left: 1px solid #ababab; padding-left: 1em; }
}
/* the title: two thirds of the design's H1 at each width, 3rem at full size (GC, 10/20: "the title is a bit huge";
   Mike: policy titles run much longer than news headlines). In print it is the site's 30px. */
.wsu-policy-header h1.nc-heading { --text-size: clamp(1.5rem, 6.5vw, 2rem); --text-size-sm: 2.5rem; --text-size-md: 3rem; }
/* The policy starts 2.5rem under the header's dotted rule, not the layout's 5rem plus the header's own 2.5rem (GC, 10/22:
   "the large space gives the impression that something is missing"). */
[data-page-type="policy"] .with-sidebar { margin-top: 2.5rem; }
/* The outline's first heading (ol > li > h2) carried the prose heading's top margin, which collapsed up through the main
   column and added 56px more; the first section starts at the rule's 2.5rem. */
[data-page-type="policy"] .with-sidebar__main-inner-wrapper > .prose:first-child > ol:first-child > li:first-child > :is(h2, h3):first-child { margin-top: 0; }
.wsu-policy-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem 1.5rem; margin: 0; }
.wsu-policy-facts > div { display: contents; }
.wsu-policy-facts dt { font-weight: 700; }
.wsu-policy-facts dd { margin: 0; }
@media (max-width: 39.99em) {
	.wsu-policy-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.wsu-policy-facts dd { margin-bottom: 0.6rem; }
}
.wsu-policy-status { font-weight: 700; }
.wsu-policy-status[data-status="rescinded"] { padding: 0.3em 0.6em; background: #000; color: #ffc217; font-size: 0.8em; letter-spacing: 0.04em; text-transform: uppercase; }
.wsu-policy-search-band > div { padding-block: 1.25rem; }
.wsu-policy-search { max-width: 36rem; }
/* the cover sheet after the policy (GC, 10/20: at the bottom, with the revision dates; Mike: "more like a footnote than a
   feature block"), closed under "About this policy version": under a thin rule, in small type, single spaced, its
   section headings no larger than its text. In print it follows the toggle: closed, nothing prints (not even the
   toggle's line); open, it prints (Mike, 10/20). */
.wsu-policy-coversheet { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.25); }
.wsu-policy-coversheet__title { cursor: pointer; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.wsu-policy-coversheet[open] > .wsu-policy-coversheet__title { margin-bottom: 0.75rem; }
.wsu-policy-coversheet .prose { font-size: 0.875rem; line-height: 1.5; }
.wsu-policy-coversheet .prose :is(h2, h3, h4, h5, h6) { margin: 0.9em 0 0.15em; font-size: 1em; font-weight: 700; line-height: 1.4; }
.wsu-policy-coversheet .prose :is(p, ul, ol) { margin-top: 0; margin-bottom: 0.4em; }
.wsu-policy-coversheet .prose li { margin-top: 0.1em; margin-bottom: 0.1em; }
.wsu-policy-coversheet .prose > :first-child { margin-top: 0; }
.wsu-policy-listing .prose ul.wsu-policy-list { list-style: none; margin: 0; padding: 0; }
.wsu-policy-listing .prose ul.wsu-policy-list > li { margin: 0; padding: 1rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
.wsu-policy-listing > nav { margin-top: 2.5rem; }
.wsu-policy-list__title { font-weight: 700; }
.wsu-policy-list__dates { margin-top: 0.25rem; font-size: 0.95em; }
.wsu-policy-list__summary > :first-child { margin-top: 0.5rem; }
.wsu-policy-list__summary > :last-child { margin-bottom: 0; }
@media print {
	.wsu-policy-search { display: none !important; }
	.wsu-policy-coversheet:not([open]) { display: none !important; }
	.wsu-policy-coversheet .prose :is(h2, h3, h4, h5, h6).nc-heading { font-size: 1em !important; } /* over the print heading scale */
}
/* Fairmount LAS's Become More components (www components 9427 and 9429; decided 10/18: the components stay and do the
   new thing themselves, nobody is retrained): a linked graphic inside <section class="section-wrap section-wrap--…">
   with www's four looks — none (white), arrows-dark, arrows-bright, wheat — the inline padding theirs. The three
   background pictures are www's, copied into the theme's images (2026-10-22). */
section.section-wrap { position: relative; background: #fff; }
section.section-wrap > * { max-width: 75rem; margin-left: auto; margin-right: auto; }
section.section-wrap.section-wrap--arrows-dark { background: #3b3b3b url("/_resources/_theme/images/bg-arrows.svg") repeat-x center center; background-size: cover; color: #fff; }
section.section-wrap.section-wrap--arrows-bright { background: #ffc217 url("/_resources/_theme/images/bg-arrows-light.svg") repeat-x center center; background-size: cover; }
section.section-wrap.section-wrap--wheat { background: #ffc217 url("/_resources/_theme/images/wheat-texture.png") repeat center center; }
section.section-wrap > a { border-bottom: none; }
section.section-wrap > a > img { display: block; }

/*
 * Profile Group cards (2026-10-25) — the Profile Group snippet on www and the group pages on
 * profiles.wichita.edu (WordPress loads this file from www) draw the same markup:
 *   ul.wsu-profile-cards > li.wsu-profile-card > .wsu-profile-card__photo, .wsu-profile-card__body
 *   (name as the design's fancy link, title, email, phone), then the row's .wsu-profile-card__text.
 * Whole photos, never cropped: people don't follow the headshot rules (Mike, 10/25), so a 3:4
 * frame with the picture fitted inside on a faint tint, and the empty frame when there is none.
 * Four across on desktop, three on tablets, two on large phones, one on small phones.
 */
.wsu-profile-group + .wsu-profile-group { margin-top: 4rem; }
.wsu-profile-cards {
	list-style: none; margin: 0; padding: 2.5rem 0 0;
	border-top: 4px dotted rgb(var(--theme-border-color, 167 167 167));
	display: grid; grid-template-columns: 1fr; gap: 3rem 2rem;
}
@media (min-width: 30rem) { .wsu-profile-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .wsu-profile-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .wsu-profile-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wsu-profile-card { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
/* the frame is a faint tint of the slab's text color, so it shows on White, Neutral 200, Yellow and the dark themes alike */
.wsu-profile-card__photo { aspect-ratio: 3 / 4; background: rgb(var(--theme-text-color, 56 56 56) / .08); overflow: hidden; }
.wsu-profile-card__photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wsu-profile-card__body { display: flex; flex-direction: column; gap: .5rem; overflow-wrap: anywhere; }
.wsu-profile-card__name { margin: 0 0 .125rem; font-size: 1.25rem; line-height: 1.2; font-weight: 700; }   /* = the fancy link's, so an unlinked Vacancy / Placeholder matches */
.wsu-profile-card__title { margin: 0; font-weight: 600; line-height: 1.3; color: rgb(var(--theme-heading-color, 39 37 31)); }
.wsu-profile-card__email, .wsu-profile-card__phone, .wsu-profile-card__edit { margin: 0; }
.wsu-profile-card__email a, .wsu-profile-card__edit a {
	color: rgb(var(--theme-link-color, 144 59 65)); text-decoration: underline; text-underline-offset: 3px;
}
.wsu-profile-card__email a:hover, .wsu-profile-card__email a:focus-visible,
.wsu-profile-card__edit a:hover, .wsu-profile-card__edit a:focus-visible { color: rgb(var(--theme-link-hocus-color, 39 37 31)); }
.wsu-profile-card__phone a { color: inherit; text-decoration: none; }
.wsu-profile-card__phone a:hover, .wsu-profile-card__phone a:focus-visible { text-decoration: underline; }
.wsu-profile-card__edit { font-size: .875rem; }
.wsu-profile-card__text { margin-top: -.5rem; font-size: 1rem; }
.wsu-profile-group-empty { color: rgb(var(--theme-text-color, 56 56 56)); font-style: italic; }
