/* -----------------------------------------
Colors
----------------------------------------- */
@black: #000000;
@white: #ffffff;
@purple: #4b2e83;
@gold: #b7a57a;
@lightgold: #b7a57a;
@neutral: #eeeae0;
@grey: #d9d9d9;
@blue: #006ec3;
@textblack: #3d3d3d;
@metallicgold: #85754d;
@lightgrey: #d1d1d1;


/* -----------------------------------------
Layout constants

The centered content column, and the numbers derived from it. These were
hardcoded in three places (`#content`, `.site-nav`, `.mge-hero`); deriving
them here means changing the column width changes everything that depends
on it. LESS needs the outer parentheses to evaluate the arithmetic.
----------------------------------------- */
@contentwidth: 80%;                                    /* `#content, .pagewidth` */
@pagegutter:   ((100% - @contentwidth) / 2);           /* 10%   — gutter as a share of the page */
@herobleed:    ((@pagegutter / @contentwidth) * 100%); /* 12.5% — the same gutter as a share of #content */
@navgap:       1em;                                    /* space below the main nav */


/* Typography */

/* Open Sans — Upright Variable */
@font-face {
font-family: "Open Sans";
src: url("/site/templates/styles/fonts/opensans/opensans_variable.woff2") format("woff2");
font-weight: 300 800;
font-style: normal;
font-display: swap;
}

/* Open Sans — Italic Variable */
@font-face {
font-family: "Open Sans";
src: url("/site/templates/styles/fonts/opensans/opensans_variable_italic.woff2") format("woff2");
font-weight: 300 800;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'encodesanscompressed-600-semibold-webfont';
src: url('/site/templates/styles/fonts/encodesanscompressed600/encodesanscompressed-600-semibold-webfont.eot');
src: local('☺'), url('/site/templates/styles/fonts/encodesanscompressed600/encodesanscompressed-600-semibold-webfont.woff') format('woff'), url('/site/templates/styles/fonts/encodesanscompressed600/encodesanscompressed-600-semibold-webfont.ttf') format('truetype'), url('/site/templates/styles/fonts/encodesanscompressed600/encodesanscompressed-600-semibold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'encodesanscompressed-800-extrabold-webfont';
src: url('/site/templates/styles/fonts/encodesanscompressed800/encodesanscompressed-800-extrabold-webfont.eot');
src: local('☺'), url('/site/templates/styles/fonts/encodesanscompressed800/encodesanscompressed-800-extrabold-webfont.woff') format('woff'), url('/site/templates/styles/fonts/encodesanscompressed800/encodesanscompressed-800-extrabold-webfont.ttf') format('truetype'), url('/site/templates/styles/fonts/encodesanscompressed800/encodesanscompressed-800-extrabold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'encodesanscompressed-900-black';
src: url('/site/templates/styles/fonts/encodesanscompressed900/encodesanscompressed-900-black-webfont.eot');
src: local('☺'), url('/site/templates/styles/fonts/encodesanscompressed900/encodesanscompressed-900-black-webfont.woff') format('woff'), url('/site/templates/styles/fonts/encodesanscompressed900/encodesanscompressed-900-black-webfont.ttf') format('truetype'), url('/site/templates/styles/fonts/encodesanscompressed900/encodesanscompressed-900-black-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'encode_sans_compressedregular';
src: url('/site/templates/styles/fonts/encodesanscompressed400/encodesanscompressed-400-regular-webfont.eot');
src: local('☺'), 
url('/site/templates/styles/fonts/encodesanscompressed400/encodesanscompressed-400-regular-webfont.woff') format('woff'),
url('/site/templates/styles/fonts/encodesanscompressed400/encodesanscompressed-400-regular-webfont.ttf') format('truetype'),
url('/site/templates/styles/fonts/encodesanscompressed400/encodesanscompressed-400-regular-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@bodytext: 'Open Sans', sans-serif;
@leadtextheavy: 'encodesanscompressed-600-semibold-webfont';
@nav: 'encodesanscompressed-800-extrabold-webfont', sans-serif;
@tenet: 'encodesanscompressed-900-black', sans-serif;
@featuretext: 'encode_sans_compressedregular', sans-serif;


/* global */

body {
background: @white;
color: @textblack;
font-family: @bodytext;
margin: 0;
padding: 0;
}

h1 {
color: @purple;
font-family: @nav;
font-weight: normal;
font-size: 2.05em;
margin: 0;
padding: 0;
}

h2 {
font-family: @nav;
font-weight: normal;
color: @purple;
font-weight: normal;
font-size: 1.75em;
margin: 0;
padding: 0;
}

h2.bigh2 {
color: @purple;
font-family: @nav;
font-weight: normal;
font-size: 2.05em;
margin: 0;
padding: 0;
}

h3 {
margin: 1.6em 0 .6em 0;
padding: 0;
font-family: @nav;
color: @purple;
font-size: 23px;
}

h4 {
margin: 1.6em 0 .6em 0;
padding: 0;
font-family: @leadtextheavy;
color: @purple;
font-size: 21px;
}

h5 {
margin: 1.6em 0 .6em 0;
padding: 0;
font-family: @bodytext;
color: @purple;
font-size: 15px;
text-transform: uppercase;
}

h6 {
margin: 1.6em 0 .6em 0;
padding: 0;
font-family: @bodytext;
color: @purple;
font-size: 14px;
font-style: oblique;
}

a {
color: @blue;
}

a:hover {
color: @metallicgold;
}

/**
 * A linked heading keeps the heading's colour. The global `a { color: @blue }`
 * was overriding h2/h3/h4's purple, so a heading changed colour purely because
 * it happened to be a link -- which reads as a styling gap rather than as a
 * decision. Inline links in running prose stay blue; that is a convention
 * readers know.
 *
 * The underline stays, and is doing the real accessibility work: WCAG 1.4.1
 * requires something other than colour to distinguish a link, so purple alone
 * would not be enough. Purple plus underline is a link; purple alone is a
 * heading.
 *
 * Hover goes gold, matching every other link on the site.
 */
#bodycontent h2 a,
#bodycontent h3 a,
#bodycontent h4 a,
.tabpanels h2 a,
.tabpanels h3 a,
.tabpanels h4 a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .12em;
}

#bodycontent h2 a:hover,
#bodycontent h3 a:hover,
#bodycontent h4 a:hover,
.tabpanels h2 a:hover,
.tabpanels h3 a:hover,
.tabpanels h4 a:hover {
	color: @metallicgold;
}

p {
font-size: 17px;
}

li {
font-size: 17px;
margin-bottom: .5em;
}

li li {
font-size: 17px;
margin-bottom: .25em;   
}

li ul li:first-of-type {
margin-top: .5em;
}

p, li {
line-height: 1.7em;
color: @textblack;
-webkit-font-smoothing: antialiased;
}

li blockquote {
margin: 1em 0 1em 0;
}

blockquote {
position:relative;
margin:1.25em 0;
padding:1.1em 1.1em 1em 1.2em;
border-left:0.35em solid @purple;
border-bottom:0.18em solid @gold;
border-radius:0.5em;
background:rgba(75,46,131,0.06);
box-shadow:0 0.25em 0.9em rgba(0,0,0,0.10);
}

#bodycontent details, .tabpanels details {
border: 1px solid #ccc;
border-radius: 6px;
margin-bottom: 1em;
padding: 0;
overflow: hidden;
transition: all 0.3s ease;
background: #fafafa;
}

#bodycontent details[open], .tabpanels details[open] {
border-color: #999;
background: #f5f5f5;
}

#bodycontent details summary, .tabpanels details summary {
cursor: pointer;
padding: 1em;
background-color: #e8e8f8;
font-weight: bold;
position: relative;
list-style: none;
}

#bodycontent details summary::marker, .tabpanels details summary::marker {
display: none;
}

#bodycontent details summary::after, .tabpanels details summary::after {
content: "+";
position: absolute;
right: 1em;
font-size: 1.2em;
transition: transform 0.2s ease;
}

#bodycontent details[open] summary::after, .tabpanels details[open] summary::after {
content: "–";
}

#bodycontent details > *:not(summary), .tabpanels details > *:not(summary) {
padding: 1em;
border-top: 1px solid #ddd;
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}

/*-----------------------------------

Utilities

--------------------------------------*/


hr {
margin: 2em 0 2em 0;
height: 9px;
border: 0;
box-shadow: inset 0 9px 9px -9px rgba(0, 0, 0, 0.1);
}

.nolinkstyle {
color: @purple;
text-decoration: none;
}

.nolinkstyle:hover {
text-decoration: underline;
}

.imgborder {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 6px 20px rgba(0, 0, 0, 0.1);
border-radius: 4px; /* optional for softer corners */
margin-bottom: 1em;
width: 100%;
}

em.uwsmall {
font-style: normal;
font-family: @leadtextheavy;
}

.uw-btn, .uw-btn-reverse {
display: inline-grid;
grid-template-columns: 1fr auto;
align-items: stretch;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
color: #5a5a5a;
background-color: @neutral;
font-family: @leadtextheavy;
max-width: 22rem;
border: none;
position: relative;
overflow: hidden;
}

.uw-btn::after, .uw-btn-reverse::after {
content: "";
background-color: #b7a57a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.82 27.22'%3E%3Cpolygon fill='%23fff' points='15.81 13.61 15.82 13.6 2.9 0 0 2.75 10.3 13.61 0 24.47 2.9 27.22 15.82 13.62 15.81 13.61'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 0.8075rem 1.425rem;
width: 4rem;
height: 100%;
align-self: stretch;
}


/* Hover effects */
.uw-btn:hover,
.uw-btn:focus {
outline: none;
}

.uw-btn:hover {
color: #5a5a5a;
}

.uw-btn:hover::after {
background-color: @purple;
}

.uw-btn-text {
display: flex;
align-items: center;
justify-content: center;
padding: 0.6em 1em;
text-align: center;
min-height: 34px;
}

.uw-btn-reverse {
background: @purple;
}

.uw-btn-reverse, .uw-btn-reverse:hover  {
color: @white;
}

.uw-btn-reverse:hover::after {
background-color: @metallicgold;
}

@keyframes spinOnce {
0%   { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.uw-btn-mini, .uw-btn-mini-reverse {
display: inline-grid;
grid-template-columns: 1fr auto;
align-items: stretch;
text-decoration: none;
font-size: 13px; /* smaller font */
text-transform: uppercase;
color: #5a5a5a;
background-color: @neutral;
font-family: @leadtextheavy;
max-width: 14rem; /* reduced width */
border: none;
position: relative;
overflow: hidden;
line-height: 1.4;
}

/* Arrow segment */
.uw-btn-mini::after, .uw-btn-mini-reverse::after {
content: "";
background-color: #b7a57a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.82 27.22'%3E%3Cpolygon fill='%23fff' points='15.81 13.61 15.82 13.6 2.9 0 0 2.75 10.3 13.61 0 24.47 2.9 27.22 15.82 13.62 15.81 13.61'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 0.6rem 1rem;
width: 2.5rem;
height: 100%;
align-self: stretch;
}

/* Hover/focus behavior */
.uw-btn-mini:hover,
.uw-btn-mini:focus {
outline: none;
color: #5a5a5a;
}

.uw-btn-mini:hover::after {
background-color: @purple;
}

/* Button text block */
.uw-btn-mini-text {
display: flex;
align-items: center;
justify-content: center;
padding: 0.4em 0.75em;
text-align: center;
min-height: 28px;
}

/* Reverse variant */
.uw-btn-mini-reverse {
background: @purple;
}

.uw-btn-mini-reverse,
.uw-btn-mini-reverse:hover {
color: @white;
}

.uw-btn-mini-reverse:hover::after {
background-color: @metallicgold;
}


.emphasized_link {
display: inline-block;
font-size: 1.25rem;
font-weight: 600;
color: #4b2e83;
text-decoration: none;
position: relative;
padding-right: .8em;
transition: color 0.3s ease;
font-family: @leadtextheavy;
margin-top: 1em;
}

.emphasized_link::after {
content: "▸";
position: absolute;
right: 0;
top: 0;
font-size: 1.25rem;
color: inherit;
transform-origin: center;
}

.emphasized_link:hover {
color: #2f1e55;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}

.emphasized_link:hover::after {
animation: spinOnce 0.5s ease forwards;
}




/* -----------------------------------------


UW banner

__________________________________________ */

.uw-banner {
background: @purple;
padding: .6em 0 0 0;
box-shadow: 0 2px 5px rgba(0,0,0,1);
}

.uw-banner div {
width: 80%;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center; /* enables vertical centering */
}

.uw-banner div > :nth-child(2) {
align-self: center;       /* vertical centering */
justify-self: end;        /* horizontal right alignment */
}

.uw-banner ul {
display: flex;
gap: 1em; /* adds space between links */
padding: 0;
margin: .8em 0 0 0;
list-style: none;
}

.uw-banner ul li {
display: inline; /* or omit entirely, since flex handles it */
}

.uw-banner ul a {
text-decoration: none;
color: @white;
font-family: @leadtextheavy;
}

.uw-banner ul a:hover {
text-decoration: underline;
}

.uw-banner li + li::before {
content: "/";
display: inline-block;
font-size: 1.1em;               /* smaller so it doesn’t look heavy */
font-weight: 100;               /* thinnest allowed by the font */
color: #8c8c8c;                 /* UW metallic gold */
line-height: 1;
transform: rotate(10deg) scaleY(2.5); /* stretched tall */
margin-right: 0.4em;
vertical-align: middle;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* optional: better hairlines */
}

.uw-banner img {
width: 400px;
}

@media (max-width: 1030px) {
.uw-banner nav {
display: none;
}
}

@media (max-width: 600px) {
.uw-banner img {
width: 100%;
}
.uw-banner div {
display: block;
}
}

.udub-slant-bar, .udub-slant-bar-light {
--bar-h: .67em;                 /* control the height here */
--dx: calc(var(--bar-h) * 0.268); /* tan(15°) ≈ 0.268 */
height: var(--bar-h);
background: @gold;
width: 40% !important;
margin: 1em 0 0 0 !important;
clip-path: polygon(0 0, 100% 0, calc(100% - var(--dx)) 100%, 0 100%);
}

.udub-slant-bar-light {
background: @white;
}



/* -----------------------------------------


Top Nav

----------------------------------------- */


.site-nav {
border-bottom: 1px solid #eee;
padding: 1.3em 0 .6em 0;
margin: 0 0 @navgap 0;
background: #f9f9f9;
}


/* ——————————————————————
1. Reset & Horizontal Layout
—————————————————————— */
.site-menu {
display: flex;
flex-wrap: wrap;             /* allow wrapping onto multiple rows */
align-items: baseline;     /* keep all rows top-aligned */
gap: 0.5em 1.5em;            /* row-gap then column-gap */
padding: 0;
list-style: none;
font-family: @nav;
width: 80%;
margin: 0 auto 0 auto;
}

.site-menu a {
text-decoration: none;
color: @purple;
}

.site-menu a:hover {
text-decoration: underline;
color: @metallicgold;
}

.site-menu > li {
flex: 0 0 auto;              /* size to content, don’t grow or shrink */
position: relative;          /* positioning context for dropdowns */
}

/* focus outline for both buttons and links */
.site-menu .submenu-toggle:focus,
.site-menu a:focus {
outline: 3px solid Highlight;
outline-offset: 2px;
}

.site-menu button, .site-menu a {
font-size: 18px !important;
}

/* ——————————————————————
2. Visually Hidden Helper
—————————————————————— */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}

/* ——————————————————————
3. Toggle Button Styling
—————————————————————— */
.site-menu .submenu-toggle {
background: none;
border: none;
padding: 0;
font: inherit;
color: @purple;
text-decoration: none;
cursor: pointer;
display: inline-flex;
align-items: center;
}

.site-menu .submenu-toggle:hover {
text-decoration: underline;
color: @metallicgold;
}

.site-menu .submenu-toggle .caret {
margin-left: 0.25em;
transition: transform 0.2s;
}

.site-menu .submenu-toggle[aria-expanded="true"] .caret {
transform: rotate(-180deg);
}

/* ——————————————————————
4. Submenu Visibility & Indentation
—————————————————————— */
/* hide any submenu marked hidden */
.site-menu ul[hidden] {
display: none;
}

/* indent all nested lists (second-level and deeper) */
.site-menu ul {
margin: 0.5em 0 0 1.5em;
padding: 0;
list-style: none;
}

/* ——————————————————————
5. Dropdown Panel Positioning
—————————————————————— */
/* float only first-level submenus */
.site-menu > li > ul {
margin: 0;                   /* remove the indent */
padding: 0.8em;              /* panel padding */
position: absolute;
top: 100%;
left: 0;
background: #f9f9f9;
border-top: 4px solid @purple;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
z-index: 10;
min-width: 18em;             /* adjust as needed */
font-family: @leadtextheavy;
}

/* keep deeper lists normal inside the panel */
.site-menu > li > ul > li > ul {
margin: 0.5em 0 0 1.5em;
padding: 0;
position: static;
box-shadow: none;
background: none;
}

/* bullets for submenu items */
.site-menu > li > ul > li a {
position: relative;
padding-left: 0.6em;
}

.site-menu > li > ul > li a::before {
content: "•";
position: absolute;
left: 0;
top: -0.2em;
font-size: 1em;
color: @purple;
}

/* ——————————————————————
6. Search button
—————————————————————— */

.search-item {
position: relative; /* anchor context */
}

.search-panel {
display: none;
position: absolute;
top: 100%;
background: white;
border: 1px solid #ccc;
padding: 0.5rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 1000;
min-width: 18em;
max-width: 90vw;
box-sizing: border-box;
}

.search-panel button {
font-family: @nav;
color: @purple;
}

.search-panel[hidden] {
display: none;
}

.search-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
}

#search-panel form {
display: grid;
grid-template-columns: auto auto;
grid-column-gap: .3em;
}

#search-panel input::placeholder{
font-family: @bodytext;
}

.search-toggle {
color: @purple;              /* or your default link/nav color */
background: #eeeeee;
border-radius: 50%;
border: none;
cursor: pointer;
padding: 0.8em; /* makes the clickable area bigger */
display: inline-flex;
align-items: center;
}

.search-toggle:hover {
color: @metallicgold; 
cursor: pointer;
}

.search-toggle:active {
color: @gold;        /* or whatever hover color you want */
}

.search-toggle svg {
width: 1.1em;
height: 1.1em;
fill: currentColor;
vertical-align: middle;
}




/* -----------------------------------------


Breadcrumb

----------------------------------------- */

.breadcrumbinner {
position: relative;
top: .6em;
}

#uwhomelink {
background: url(/site/templates/styles/img/uw-sprite.svg) no-repeat -249px -6px;
text-indent: -99999px;
display: inline-block;
width: 1.8em;
position: relative;
top: 0;
}

.breadcrumb a {
border-bottom: none;
text-decoration: none;
color: lighten(@black, 35%);
font-family: @featuretext;
}

.breadcrumb a:hover {
text-decoration: underline;
}

.breadcrumb {
color: lighten(@black, 35%);
font-family: @featuretext;
width: 80%;
margin: 1.8em auto 2.5em auto;
}

.breadcrumb-arrow {
width: 12px;
height: 12px;
margin: 0 0.4em;
stroke: #666;
vertical-align: middle;
}




/* -----------------------------------------


Basic page structure

----------------------------------------- */


#omsfabanner {
background: @purple;
padding: 2.4em 0 2.4em 0;
position: relative;
color: white;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* subtle shadow at bottom */
}

#omsfabanner a {
color: @white;
text-decoration: none;
}

#omsfabanner div {
width: 80%;
margin: auto;
}

/* Lighter scrim overlay: more subtle, still improves text contrast */
#omsfabanner::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.25) 0%,
rgba(0, 0, 0, 0.35) 45%,
rgba(0, 0, 0, 0.15) 100%
);
z-index: 1;
pointer-events: none;
}

/* Compact content layout with lighter shadow */
#omsfabanner > div {
position: relative;
z-index: 2;
padding: 1em 0 1em 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Right-anchored background image, faded toward the left.
   URL is injected inline via --banner-img from the ProcessWire urlfield2 field. */
#omsfabanner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;            /* same level as the scrim; paints just above it, below the text (z-index 2) */
  background-image: var(--banner-img, none);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  opacity: 0.3;          /* "about 30% opacity" knob */
  /* solid on the right, gone by the left third */
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 70%);
          mask-image: linear-gradient(to left, #000 0%, transparent 70%);
  pointer-events: none;
}

/* Optional mobile adjustment */
@media (max-width: 600px) {
#omsfabanner::before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.5));
}

#omsfabanner::after { display: none; }   /* hide the banner image below 600px */

#omsfabanner > div {
padding: 1em;
}
}

#content, .pagewidth {
width: @contentwidth;
margin: 0 auto 3em auto;
}

#content h2:first-of-type {
margin: 1em 0 .6em 0;
}

#content h2.headerbar {
margin-top: 2em;
}

#content h2:first-of-type::after, #content h2.headerbar::after {
content: "";
display: block;
width: 60px;
height: 5px;
background-color: #b7a57a; /* UW Metallic Gold */
margin-top: 0.3em;
}

#content h2.bigh2:first-of-type::after {
display: none;
}

#bodycontent > p:first-of-type {
font-family: @featuretext;
font-size: 1.4em;
margin-top: 0;
}

#bodygrid {
display: grid;
grid-template-columns: 8fr 3fr;
grid-column-gap: 3.6em;
}

/* responsive adjustment */
@media (max-width: 1200px) {
#bodygrid {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 3.6em;
}
}

#bodygrid #basic-page-sidebar {
background-color: #f9f9f9;
/* The top reads as ~3.5em of space, not 1.5em: the "Explore" label carries its
   own 2em margin-top on top of the padding. Matching that on the bottom is what
   makes the box look evenly inset. */
padding: 1.5em 1.5em 3.5em;
border-left: 4px solid #eee;
font-size: 0.95em;
position: relative;
}

/**
 * The sidebar column holds two blocks: the section nav, full width at the top,
 * and the "Explore" box beneath it. The nav used to live inside that box and
 * sit inset by its 1.5em padding.
 *
 * The gap is deliberately generous. The nav and the Explore box are both
 * bordered blocks in the same narrow column, and at a smaller gap they read as
 * two halves of one panel — which makes the nav look like content rather than
 * like navigation. The space is what separates them into a widget and a
 * content block.
 */
.sidebar-column > .award-sidebar {
	margin-bottom: 4em;
}

/* responsive adjustment -- the gap belongs to the column now that the nav
   leads it, otherwise the nav would butt against the body copy above */
@media (max-width: 1200px) {
#bodygrid .sidebar-column {
margin-top: 3em;
}
}


#basic-page-sidebar h4 {
font-size: 19px;
margin-top: 3em;
}

#basic-page-sidebar .sidebar-label {
color: #4b2e83;
font-size: 1em;
margin: 2em 0 .4em 0;
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.4em;
font-family: @nav;
}


#basic-page-sidebar .sidebar-top-label {
color: @gold;
text-align: center;
font-weight: bold;
position: relative;
width: 100%;
display: inline-block;  /* allows ::before/::after to work neatly */
margin-top: 2em;
margin-bottom: .8em;
}

#basic-page-sidebar .sidebar-top-label::before,
#basic-page-sidebar .sidebar-top-label::after {
content: "";
display: inline-block;
vertical-align: middle;
width: 30px;
height: 1px;
background-color: currentColor;
margin: 0 0.75em;
transform: translateY(-0.1em); /* adjust vertical alignment if needed */
}



#basic-page-sidebar h4.sidebarnews {
margin: 0;
padding: 0;
}

.sidebartext {
font-family: @featuretext;
}

.news-section p {
margin: .6em 0 1em 0;
padding: 0;
font-family: @featuretext;
}

.news-section img {
width: 100%;
border-radius: 8px;         /* soft rounded corners */
transition: box-shadow 0.3s ease;           /* smooth hover animation */
border: 1px solid #eee;
margin: 0 0 .6em 0;
}

.news-section article {
margin-bottom: 4em;
}

.news-section article:last-of-type {
margin-bottom: 1em;
}

.dateline {
font-size: 14px;
color: lighten(@textblack,22%);
font-style: oblique;
margin: .9em 0 0 0;
}

#bodygrid #basic-page-sidebar::after {
content: "";
display: block;
height: 20px;
background-image: repeating-linear-gradient(
105deg,            /* Was 75deg, now reversed */
#d9d9d9,
#d9d9d9 1px,
transparent 1px,
transparent 6px
);
background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}

.uw-edit-float {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.6em 1em;
font-size: 0.875rem;
font-weight: 600;
background-color: #b7a57a; /* UW Gold */
color: @white; /* UW Purple text */
border: 2px solid #4b2e83;
border-radius: 8px;
text-decoration: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.uw-edit-float:hover,
.uw-edit-float:focus {
background-color: #a7966c;
color: #301b55;
transform: scale(1.05);
text-decoration: none;
}

.uw-edit-icon {
font-size: 1rem;
}



/* -----------------------------------------



Homepage slideshow



----------------------------------------- */

/* Tunable default; JS overrides to tallest slide before init */
.omsfa-carousel-container { --carousel-min-h: clamp(220px, 30vh, 440px); }

.omsfa-carousel-container {
max-width: 960px;
margin: 2.3em auto 4.5em auto;
position: relative;
}

/* --- Carousel shell: reserve space + fade in when ready --- */
.carousel {
min-height: var(--carousel-min-h);     /* prevents flash/collapse */
visibility: hidden;                    /* hidden until Flickity attaches */
opacity: 0;                            /* fade start */
transform: translateY(6px);            /* soft entrance */
}
.flickity-enabled { visibility: visible; }
.carousel.is-ready {
opacity: 1;
transform: none;
transition: opacity 400ms ease, transform 400ms ease;
}

/* Flickity viewport honors the min-height (constant height mode) */
.omsfa-carousel-container .flickity-viewport {
min-height: var(--carousel-min-h);
transition: height 200ms ease;         /* smooth in case of tiny adjustments */
}

/* --- Slides --- */
.carousel-cell {
width: 100%;                 /* one per view */
margin: 0;
padding: clamp(1rem, 4vw, 3.5rem);
background: #f8f8f8;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
text-align: left;
border-left: 6px solid #4b2e83; /* UW Purple */
box-sizing: border-box;
min-height: clamp(160px, 28vh, 360px);
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.6em;
}

.carousel-cell.temporary {
background: #fffdf5;
border-left-color: #e8b400;  /* UW Gold */
}

/* Images inside slides (reduce layout shift) */
.carousel-cell img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}

/* overlap slides by 1px so the next left-border can't peek in */
.carousel-cell { margin-right: 1px; }


/* --- Type --- */
.carousel-cell h3 {
margin: 1em 0 0 0;
font-size: 1.25rem;
color: #4b2e83;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;       /* up to 2 lines */
-webkit-box-orient: vertical;
}
.carousel-cell p  {
margin: 1em 0 1.6em 0;
font-size: 1rem;
color: #444;
}

/* --- Buttons --- */
.uw-btn--disabled { pointer-events: none; opacity: .6; }

/* --- Dots (UW white/unselected, gold/selected) --- */
.flickity-page-dots .dot { background: #fff; opacity: 1; }
.flickity-page-dots .dot.is-selected { background: #b7a57a; }

/* --- Accessibility helpers --- */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
.omsfa-carousel-container .flickity-viewport { transition: none; }
.carousel.is-ready { transition: none; transform: none; }
}

.carousel-toggle {
background-color: @neutral;
color: @textblack;
font-family: @bodytext;
border: none;
padding: 0.5em 1em;
margin-top: 0.5rem;
font-size: 1rem;
cursor: pointer;
border-radius: 0.25em;
transition: background 0.3s;
position: absolute;
bottom: 0;
right: 0;
min-width: 110px;
min-height: 50px;
}
.carousel-toggle:hover {
background-color: darken(@neutral,10%);
}
.carousel-toggle:active {
background-color: darken(@neutral,20%);
}

.carousel.is-paused {
opacity: 0.5;
filter: grayscale(20%) brightness(0.95);
transition: opacity 400ms ease, filter 400ms ease;
}


.carousel-cell {
opacity: 0;
transition: opacity 0.6s ease, transform 0.6s ease;
transform: scale(0.98) translateX(0);
}

.carousel-cell.is-selected {
opacity: 1;
transform: scale(1) translateX(0);
}

/* Optional: subtle parallax slide-in effect */
.carousel.is-ready .carousel-cell {
transition: opacity 0.6s ease, transform 0.6s ease;
}

.carousel.is-ready .carousel-cell:not(.is-selected) {
opacity: 0;
transform: scale(0.98) translateX(-10px);
}





/* -----------------------------------------


Student profiles page


----------------------------------------- */


.studentprofile {
display: grid;
grid-template-columns: 1.8fr 4fr;
gap: 3em;
font-family: @featuretext;
margin-top: 3em;
}

.studentprofile img {
width: 100%;
display: block;
border-radius: 14px;
border: 6px solid @gold;
}

.studentprofile h3 {
color: @metallicgold;
margin-bottom: 0.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 0.25rem;
}

.scholarshiptitle {
font-family: @nav;
text-transform: uppercase;
color: @metallicgold;
margin: 1em 0 0 0;
max-width: 500px;
}

.student-text-meta {
color: @textblack;
margin-top: 1em;
}

.student-text-meta div {
margin-bottom: .2em;
}

.student-text-lead-in {
margin-top: 3em;
}

.student-text-lead-in p:first-of-type::first-line {
font-size: 1.25em;
line-height: 1.4;
}

.student-text-lead-in p:first-of-type::first-letter {
float: left;
font-size: 2em;
line-height: 1;
background: @gold;
padding: .4em;
margin: 0 .2em .2em 0;
font-weight: 700;
font-family: @nav;
color: @white;
border-radius: .2em;
}

.student-text .uw-btn {
margin-top: 3em;
}




/* -----------------------------------------


media archives

----------------------------------------- */

.image-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 1em;
grid-row-gap: 1em;
margin: 1em 0 3em 0;
}

.image-grid img {
border: 1px solid @textblack;
width: 100%;
}


.toast {
visibility: hidden;
max-width: 90%;
background-color: #333;
color: #fff;
padding: 16px 24px;
border-radius: 8px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
opacity: 0;
transition: opacity 0.4s ease, visibility 0.4s ease;
white-space: pre-wrap;
word-wrap: break-word;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.toast.show {
visibility: visible;
opacity: 1;
}

/* -----------------------------------------


tabs

----------------------------------------- */
:root {
--tabs-width: 220px;
--radius: 14px;
}

.tabs {
display: grid;
grid-template-columns: var(--tabs-width) 1fr;
gap: 1em;
align-items: start;
margin: 2em 0 3em 0;
}

/* Tablist (vertical) */
.tabs [role="tablist"] {
display: flex;
flex-direction: column;
gap: .25rem;
padding: .25rem;
border: 1px solid #ddd;
border-radius: var(--radius);
}

/* Tabs (use buttons with role=tab) */
.tabs [role="tab"] {
display: block;
text-align: left;
border: 0;
background: transparent;
padding: .8rem .8rem;
border-radius: .75rem;
cursor: pointer;
font-family: @leadtextheavy;
line-height: 20px;
color: @textblack;
cursor: pointer;
font-size: 17px;
}

.tabs [role="tab"][aria-selected="true"] {
background: #f2f2fb;
outline: 2px solid #c9c9f7;
}

.tabs [role="tab"]:hover {
background: #f7f7fa;
}

.tabs [role="tab"]:focus-visible {
outline: 3px solid Highlight;
outline-offset: 2px;
}

/* Panels */
.tabpanels {
min-height: 10rem;
border: 1px solid #ddd;
border-radius: var(--radius);
padding: 2em;
}

.tabpanels p,
.tabpanels li,
.tabpanels li li {
font-size: 17px;
}

/* Keep space consistent as panels switch */
[role="tabpanel"] {
min-height: 8rem;
}

/* Base, hidden by default for a11y/layout */
.tabpanels [role="tabpanel"] {
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Become visible when JS adds .is-active */
.tabpanels [role="tabpanel"].is-active {
opacity: 1;
transform: translateY(0);
}

/* Keep using the native [hidden] a11y hide */
.tabpanels [role="tabpanel"][hidden] {
display: none;
}

@media (prefers-reduced-motion: reduce) {
.tabpanels [role="tabpanel"] {
transition: none;
transform: none;
}
}


@media (max-width: 720px) {
.tabs {
grid-template-columns: 1fr;
}
:root { --tabs-width: auto; }
.tabs [role="tablist"] { flex-direction: row; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: no-preference) {
.tabs [role="tab"][aria-selected="true"] {
transition: background .15s ease, outline-color .15s ease;
}
.tabpanels {
transition: border-color .15s ease;
}
}

@media (prefers-reduced-motion: reduce) {
.tabpanels [role="tabpanel"] {
transition: none;
transform: none;
}
}

/* Headings inside panels */
.tabpanels h3:first-of-type {
margin: 0 0 1em 0;
padding: 0;
font-family: @nav;
color: @purple;
}


/* -----------------------------------------
   Search results
----------------------------------------- */

#searchtop {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* Results list */
.search-results {
  padding: 0;
  margin: 1em 0;
}
.search-results li {
  border-bottom: 1px solid #ddd;
  padding: 1em 0;
}
.search-results a {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
  margin-bottom: 0.25em;
}
.search-results a:hover { text-decoration: underline; }
.search-results em {
  font-size: 0.9em;
  color: #666;
  display: inline-block;
  font-style: normal;
}
.search-results p {
  margin: 0.25em 0 0.75em;
  line-height: 1.4;
  color: #333;
}
.search-results strong {
  background-color: #fff5a2;
  padding: 0 2px;
  border-radius: 2px;
}

/* Filter pills */
.filter-pill {
  display: inline-block;
  background: #eee;
  padding: 0.3em 0.7em;
  margin: 0.2em;
  border-radius: 1em;
  text-decoration: none;
  color: @textblack;
  font-size: 0.9em;
}
.filter-pill:hover { background: #ccc; color: @textblack; }
.filter-pill:active { background: @purple; color: #fff; }

.search-form form {
  position: relative;
  display: block;                 /* unified field (no flex split) */
  width: 100%;
  margin: 1em 0;
  background: #fff;
  border-radius: .75em;           /* gentler rectangle */
  border: 2px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: border-color .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.search-form form:focus-within {
  border-color: #8575b5;          /* UW lavender focus */
  box-shadow: 0 0 0 3px rgba(133,117,181,.2);
}
.search-form input[type="search"] {
  width: 100%;
  border: 0;
  outline: none;
  font-size: 17px;
  font-family: @bodytext;
  color: #333;
  background: transparent;
  padding: .85em 2.75em .85em 1em; /* room for icon on right */
    border-radius: inherit;
  background-clip: padding-box;
}
.search-form button {
  position: absolute;
  inset-inline-end: .5em;         /* right in LTR */
  top: 50%;
  transform: translateY(-50%);
  background: transparent;       
  border: 0;
  padding: .4em;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: .5em;
  cursor: pointer;
}
.search-form button:hover { background: #f2eef8; }     /* subtle lavender hover */
.search-form button:focus-visible {
  outline: 2px solid @purple;
  outline-offset: 2px;
  background: #efe9f7;
}
.search-form svg {
  width: 1.15em; height: 1.15em;
  stroke: @purple;
  fill: none;
}
@media (max-width: 40em) {
  .search-form input[type="search"] { font-size: 16px; } /* avoid iOS zoom */
}
@media (prefers-reduced-motion: reduce) {
  .search-form form, .search-form button { transition: none; }
}

/* ---------------- UW Lavender highlight for snippets ---------------- */
.search-results mark {
  color: inherit;                       /* keep baseline text contrast */
  background-color: #ece6f4;            /* soft UW lavender */
  box-shadow: 0 0 0 .15em #ece6f4;      /* halo around glyphs */
  border-radius: .2em;
  padding: 0 .12em;
  text-decoration-line: underline;      /* not color-only */
  text-decoration-style: dotted;
  text-decoration-thickness: .12em;
  text-underline-offset: .12em;
}
/* if mark is inside a link, keep focus obvious */
.search-results a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  text-decoration-thickness: .16em;
}
@media (prefers-contrast: more) {
  .search-results mark {
    text-decoration-style: solid;
    text-decoration-thickness: .18em;
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}
@media (forced-colors: active) {
  .search-results mark {
    forced-color-adjust: auto;
    background-color: Highlight;
    color: HighlightText;
    box-shadow: none;
    text-decoration-line: underline;
    text-decoration-style: solid;
  }
}
@media (prefers-color-scheme: dark) {
  .search-results mark {
    background-color: #3b2469;          /* deeper UW purple for contrast */
    box-shadow: 0 0 0 .15em #3b2469;
    color: #fff;
  }
}

/* ---------------- Pagination ---------------- */
.pagination { margin-top: 2em; text-align: center; }
.pagination-list {
  list-style: none;
  padding: 0;
  display: inline-flex;
  gap: 0.5em;
  flex-wrap: wrap;
  justify-content: center;
}
.pagination-list a:hover { color: @textblack; }
.pagination-list a:active { background: @gold; }
.page-link {
  display: inline-block;
  padding: 0.5em 0.75em;
  background-color: #ececec;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: all .2s ease;
}
.page-link:hover,
.page-link:focus { background-color: #d5d5d5; }
.page-link.current {
  background-color: @purple;
  color: #fff;
  pointer-events: none;
  font-weight: 700;
}
.page-link.prev,
.page-link.next { font-weight: 600; }




/*-----------------------------------------



Embedded images



------------------------------------------*/

.align_left {
float: left;
margin: 0 1em 1em 0;
}

.align_right {
float: right;
margin: 1em 0 1em 1em;
}

.align-center {
margin: auto;
}

figure {
padding: 1em;
margin: 0;
font-family: @featuretext;
background: #eee;
border-radius: .3em;
}

figure img {
width: 100%;
}


#bodycontent h3 { clear: both; } 


/*-----------------------------------------



Videos



------------------------------------------*/



.video-embed-wrapper {
margin: 2em 0 2em 0;
}



/* --------------------------------------------


  Values: Stylized Columns 


---------------------------------------------- */

/**
 * The image is the homepage's "Featured image", passed down by basic-page.php
 * as --mge-page-img on #bodycontent. This block is authored in rich text, so it
 * can't carry an inline style of its own -- the custom property is how a
 * template-level value reaches editor-written markup.
 *
 * Home's image rather than the page's own: urlfield2 already drives the
 * per-page banner, so reading it here would make one field control two
 * unrelated things. Anchored to home, every Values block on the site shows the
 * same backdrop and changing it is one edit.
 *
 * It used to be a hardcoded url('/site/assets/...'), which is expd's assets
 * directory, not MGE's. It rendered only because expd happens to have a file at
 * that path, and would have broken silently the day expd reorganised.
 *
 * Flat scrim rather than background-blend-mode: lighten -- blend interacts with
 * the photo's own tonality, so the same 70% reads differently under every
 * image. A flat layer is predictable, which matters when an editor can now
 * change the picture. Same treatment as the footer.
 *
 * background-attachment: fixed is gone too: unreliable on iOS, and it repaints
 * on every scroll.
 */
.uw-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); /* 240px = 15em */
gap: 2em;                      /* formerly 2rem */
margin: 2em 0;                 /* formerly 4rem 0 */
padding: 2em;                  /* formerly 1rem */
border-top: 0.375em solid #4b2e83; /* 6px in ems */
background-image:
	linear-gradient(rgba(248, 247, 243, .72), rgba(248, 247, 243, .72)),
	var(--mge-page-img, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #f8f7f3;
}

/* Individual “column” blocks */
.column-block {
background: #ffffff;
border: 1px solid #e6e3db;
border-radius: 0.5em;                   /* formerly 0.5rem */
box-shadow: 0 0.125em 0.625em rgba(0,0,0,0.07); /* 2px 10px */
padding: 2em 1.5em;                     /* formerly 2rem 1.5rem */
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
}

.column-block:hover {
transform: translateY(-0.25em);         /* 4px = 0.25em */
box-shadow: 0 0.375em 1em rgba(0,0,0,0.12); /* 6px 16px */
}

/* Decorative top to resemble architectural column */
.column-block::before {
content: '';
display: block;
height: 0.375em;                       /* 6px */
width: 100%;
background: #b7a57a;                   /* UW gold */
border-radius: 0.375em 0.375em 0 0;
margin-bottom: 1em;
}

/* Heading like a column capital */
.column-block h3 {
font-family: @leadtextheavy;
font-size: 1.4em;                      /* was 1.4rem */
color: #4b2e83;
margin: 0;
line-height: 1.2;
border-bottom: 0.125em solid #e6e3db;  /* 2px = 0.125em */
padding-bottom: 0.5em;
text-align: center;
}

/* Body text */
.column-body {
font-family: @bodytext;
font-size: 1em;
color: #1f2937;
line-height: 1.6;
}

@media (max-width: 37.5em) { /* 600px = 37.5em */
.column-block {
padding: 1.5em 1em;
}
}



/*-------------------------------


MGE footer


--------------------------------*/

/**
 * The image comes from the Footer page's "Featured image" field, passed in as
 * --mge-footer-img by omsfa_footer.inc. It used to be a hardcoded asset path
 * here, which no editor could change.
 *
 * Two layers: a flat scrim on top, the photograph beneath. The scrim is what
 * makes purple body text legible over an arbitrary campus photo -- blend-mode
 * alone varies too much with the image. If there is no image the var falls
 * back to `none` and the scrim renders as the flat cream the footer had
 * before, so the section never breaks.
 */
#omsfafooter {
	/**
	 * The scrim is graded horizontally, not flat: nearly opaque behind the
	 * text column on the left, nearly clear on the right where the photograph
	 * lives. Same device as the homepage hero's mask, pointed the other way.
	 * A flat scrim always loses one way or the other -- either the photo is a
	 * ghost or the text is on top of brick.
	 *
	 * background-attachment is NOT fixed here (the hardcoded original was):
	 * fixed is unreliable on iOS and costs a repaint on every scroll, which is
	 * why the old code carried a 900px override un-fixing it. Scroll for
	 * everyone is simpler and looks the same in a section this short.
	 */
	background-image:
		linear-gradient(to right,
			rgba(248, 247, 243, .97) 0%,
			rgba(248, 247, 243, .94) 45%,
			rgba(248, 247, 243, .55) 70%,
			rgba(248, 247, 243, .25) 100%),
		var(--mge-footer-img, none);
	background-size: cover;
	background-position: center, center;
	background-repeat: no-repeat;
	background-color: #f8f7f3;
	position: relative;
	padding: 3em 0 0 0;
	margin: 5em 0 0 0;
}

/* gold hatch band across the top */
#omsfafooter::after {
	content: "";
	display: block;
	height: 45px;
	background-image: repeating-linear-gradient(105deg, @gold, @gold 1px, transparent 1px, transparent 6px);
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	opacity: 0.4;
}

#omsfafooter p,
#omsfafooter li,
#omsfafooter h3,
#omsfafooter a {
	color: @purple;
}

#omsfafooter p {
	font-family: @featuretext;
	margin: .6em 0 0 0;
	padding: 0;
	line-height: 24px;
	font-weight: 600;
}

#omsfafooter a { text-decoration: none; }
#omsfafooter a:hover { text-decoration: underline; }

#omsfafooter h5 {
	color: @metallicgold;
	margin: 0 0 .9em;
	line-height: 1.2;
	letter-spacing: .06em;
}

/**
 * The three columns carry hard minimums -- 9rem + 15rem + 21rem is 45rem (720px)
 * of track that cannot shrink, plus 2 x 3.5em of gap and the quick-links
 * column's own 3em right margin: about 880px before anything wraps. But
 * `.pagewidth` is only @contentwidth of the viewport, so the grid stops fitting
 * at around 1100px wide and simply overflows past the right edge. Nothing above
 * collapsed it, which is where the horizontal scrollbar on narrow windows was
 * coming from.
 */
/**
 * Two columns now, not three -- the photo moved to the background. That also
 * retires the overflow this grid used to cause: the old third track carried a
 * 21rem minimum that could not shrink, so below about 1100px the grid ran past
 * the right edge of the viewport and produced a horizontal scrollbar.
 */
/**
 * Text column left, photograph right. The stack -- contact card plus four link
 * bars -- takes the left half; the right half holds nothing, on purpose. That
 * empty track is where the building lives, under the clear end of the graded
 * scrim. Boxing the photo cost us the imagery once already today.
 */
#omsfafooter .pagewidth {
	display: grid;
	grid-template-columns: minmax(~"min(20rem, 100%)", 26rem) 1fr;
	margin-bottom: 0;
	gap: 3.5em;
	padding: 2.5em 0 3.5em;
	align-items: start;
}

#omsfafooter .footer-contact { grid-column: 1; }
#omsfafooter .cta-links      { grid-column: 1; }

/**
 * Contact card: kin to the link bars -- same fill, same radius -- but not one
 * of them: no chevron, no hover, and the gold heading inside the card. It is
 * information, not a destination, and it leads the stack.
 */
#omsfafooter .footer-contact h5 {
	color: @metallicgold;
	margin: 0 0 .6em;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .78rem;
}

#omsfafooter .footer-contact ul {
	list-style: none;
	margin: 0 0 .7rem;
	padding: .95em 1.1em .9em;
	background-color: lighten(@gold, 20%);
	border-radius: .3em;
}

#omsfafooter .footer-contact li {
	font-family: @featuretext;
	font-size: 1.08rem;
	line-height: 1.45;
	margin-bottom: .55em;
}

#omsfafooter .footer-contact li:last-child { margin-bottom: 0; }

/* stack on narrow screens: one column, photo becomes the backdrop again */
@media (max-width: 46rem) {
	#omsfafooter .pagewidth {
		grid-template-columns: 1fr;
		gap: 2em;
	}
}

/* -- quick links -- */

/**
 * Short stacked bars -- the shape the footer launched with, which worked. The
 * tile experiment traded the photograph for geometry; these keep the stack
 * compact so the section stays short and the picture stays visible.
 */
.cta-links ul {
	list-style: none;
	padding: 0;
	margin: 1em 0 0;
	display: grid;
	gap: .65rem;
}

.cta-links li { margin: 0; }

.cta-links li a {
	display: block;
	position: relative;
	background-color: lighten(@gold, 20%);
	border-radius: .3em;
	text-decoration: none;
	font-weight: 600;
	padding: .75em 1em .75em 2.9em;
	font-size: .98rem;
	line-height: 1.35;
	font-family: @nav;
	/* purple chevron: the old white one sat at ~1.4:1 on the tan fill */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.5' height='19.21' viewBox='0 0 11.5 19.21'%3E%3Crect x='4.45' y='-1.06' transform='rotate(-45 5.76 5.64)' fill='%234b2e83' width='2.63' height='13.6'/%3E%3Crect x='-1.06' y='12.16' transform='rotate(-45 6.75 13.47)' fill='%234b2e83' width='13.61' height='2.63'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 1rem center;
	background-size: 10px 16.7px;
	transition: background-color .2s ease, background-position .3s ease, background-image .3s ease;
}

#omsfafooter .cta-links li a:hover,
#omsfafooter .cta-links li a:focus {
	background-color: @purple;
	color: @white;
	text-decoration: none;
	background-position: left 1.6rem center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.5' height='19.21' viewBox='0 0 11.5 19.21'%3E%3Crect x='4.45' y='-1.06' transform='rotate(-45 5.76 5.64)' fill='%23b7a57a' width='2.63' height='13.6'/%3E%3Crect x='-1.06' y='12.16' transform='rotate(-45 6.75 13.47)' fill='%23b7a57a' width='13.61' height='2.63'/%3E%3C/svg%3E");
}

.cta-links li a:active { background-color: lighten(@purple, 20%); }

.cta-links li a:focus-visible {
	outline: 2px solid @purple;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cta-links li a { transition: none; }
}

/* -- section header -- */

h3.footer-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	padding: 1em 0;
	text-align: center;
	width: 80%;
	margin: auto;
	color: @purple !important;
}

.footer-header::before,
.footer-header::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: @gold;
}


/*-------------------------------


UW footer


--------------------------------*/

.uw-footer {
background: url("assets/images/footer.jpg") center bottom;
background-size: cover;
padding: 0 0 30px 0;
background-color: #4b2e83;
border-top: 7px solid #d1d1d1;
text-align: center;
position: relative;
}

/* --- Wordmark --- */
.uw-footer .footer-wordmark {
display: inline-block;
width: 335px;
background: url(assets/svg/uw-sprite.svg) no-repeat 0 -434px;
text-indent: -9999px;
overflow: hidden;
margin-top: 50px;
}
.uw-footer .footer-wordmark:focus,
.uw-footer .footer-wordmark:hover {
background: url(assets/svg/uw-sprite-focus.svg) no-repeat 0 -434px;
}

/* --- Be Boundless --- */
.uw-footer .be-boundless {
line-height: 24px;
background: url(assets/images/boundless.png) no-repeat center top;
display: block;
text-indent: -99999px;
margin: 10px 0 60px;
opacity: 1;
color: #fff;
transition: opacity 0.25s;
}
.uw-footer .be-boundless:hover,
.uw-footer .be-boundless:focus {
opacity: 0.8;
}

/* --- Headings --- */
.uw-footer h4 {
font-family: "Encode Sans Compressed", sans-serif;
color: #fff;
font-weight: 400;
font-size: 20px;
position: relative;
margin: 41px 0 11px 0;
}
.uw-footer h4:before,
.uw-footer h4:after {
content: "";
position: absolute;
width: 85px;
height: 1px;
background-color: #9184aa;
left: 50%;
margin-left: -40px;
}
.uw-footer h4:before {
top: -27px;
}
.uw-footer h4:after {
bottom: -85px;
}

/* --- Social Links --- */
.uw-footer ul.footer-social li {
list-style: none;
display: inline-block;
}
.uw-footer ul.footer-social li a {
display: inline-block;
width: 44px;
height: 40px;
text-indent: -9999px;
overflow: hidden;
background-image: url(assets/svg/uw-sprite.svg);
background-repeat: no-repeat;
background-position-y: -185px;
transition: background-position 0.3s ease;
}

/* --- Individual sprite frames --- */
.uw-footer a.facebook  { background-position-x: 0; }
.uw-footer a.twitter   { background-position-x: -46px; }
.uw-footer a.pinterest { background-position-x: -92px; }
.uw-footer a.youtube   { background-position-x: -138px; }
.uw-footer a.linkedin  { background-position-x: -184px; }
.uw-footer a.instagram { background-position-x: -322px; }

/* --- Hover slide effect --- */
.uw-footer a.facebook:hover,
.uw-footer a.facebook:focus {
background-position-y: -225px;
}
.uw-footer a.twitter:hover,
.uw-footer a.twitter:focus {
background-position-y: -225px;
}
.uw-footer a.pinterest:hover,
.uw-footer a.pinterest:focus {
background-position-y: -225px;
}
.uw-footer a.youtube:hover,
.uw-footer a.youtube:focus {
background-position-y: -225px;
}
.uw-footer a.linkedin:hover,
.uw-footer a.linkedin:focus {
background-position-y: -225px;
}
.uw-footer a.instagram:hover,
.uw-footer a.instagram:focus {
background-position-y: -225px;
}

/* --- Footer Links --- */
.uw-footer ul.footer-links {
margin: 45px 0 0 0;
}
.uw-footer ul.footer-links li {
list-style: none;
display: inline-block;
}
.uw-footer ul.footer-links li:last-child a:after {
display: none;
}
.uw-footer ul.footer-links li a {
color: #fff;
position: relative;
margin-right: 20px;
}
.uw-footer ul.footer-links li a:after {
content: "/";
opacity: 0.5;
position: relative;
right: -14px;
top: -2px;
}
.uw-footer ul.footer-links li a:focus,
.uw-footer ul.footer-links li a:hover {
color: #b7a57a;
text-decoration: none;
}
.uw-footer ul.footer-links li a:focus:after,
.uw-footer ul.footer-links li a:hover:after {
color: #fff;
}

/* --- Copyright --- */
.uw-footer p {
color: #fff;
font-size: 0.8em;
margin-top: 15px;
}

@media only screen and (max-width: 767px) {
.uw-footer .footer-wordmark {
background-position: 25px -338px;
background-size: 690px;
}
.uw-footer h4:after {
display: none;
}
}


/*-------------------------------


MGE award widget


--------------------------------*/

/**
 * Each card wears a filled header band -- the same device as .award-sidebar-head,
 * reused so the deadline cards and the per-award sidebar read as one family.
 *
 * The band's colour encodes state rather than decorating: live awards get UW
 * purple, a closed award gets muted grey and visibly recedes. That's the one
 * piece of information a student scanning this row actually needs.
 *
 * Dates are ALWAYS stacked -- label above value, never two columns. The widget
 * only ever appears in narrow contexts (a three-up row, a sidebar, a phone),
 * so the two-column form was an exception dressed up as the default and
 * needed overriding in three separate places. Now there is one rule.
 */

.mge-award-widget {
	border: 1px solid #e3e1dc;
	border-radius: 10px;
	padding: 0 1.25rem 1.15rem;   /* no top padding; the head fills it */
	margin: 1.5rem 0;
	background: #fff;
	overflow: hidden;              /* clips the head into the rounded corners */
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05);
}

/* -- header band -- */

.mge-aw-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	/* negative margins pull the band out to the card edges */
	margin: 0 -1.25rem 1.15rem;
	padding: .85em 1.25rem;
	background: @purple;
}

.mge-aw-title {
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: @nav;
	font-weight: normal;
	font-size: 1.2rem;
	line-height: 1.2;
	border: 0;
}

.mge-aw-badge {
	flex: none;
	font-family: @featuretext;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: .3em .7em;
	border-radius: 999px;
	white-space: nowrap;
	background: rgba(255,255,255,.16);
	color: #fff;
}

/* Badge by state. Solid light fills so they hold up against the purple band. */
.is-open     .mge-aw-badge { background: #d6f0e0; color: #14532d; }
.is-closing  .mge-aw-badge { background: #ffd9a0; color: #6b3f00; }
.is-upcoming .mge-aw-badge { background: @gold;   color: #33240a; }
.is-tbd      .mge-aw-badge { background: rgba(255,255,255,.2); color: #fff; }

/* Closed: the whole card steps back. Grey band, grey badge, softer border. */
.is-closed .mge-aw-head   { background: #6f6d68; }
.is-closed .mge-aw-badge  { background: rgba(255,255,255,.22); color: #fff; }
.is-closed                { border-color: #e8e6e2; box-shadow: none; }
.is-closed .mge-aw-lead,
.is-closed .mge-aw-dates td { color: #5a5852; }

/* Closing soon: keep the alarm border, warm the band a shade */
.is-closing               { border-color: #e0a54c; border-width: 2px; }
.is-closing .mge-aw-head  { background: #5c3a12; }

.mge-aw-lead {
	margin: 0 0 1rem;
	font-size: .95rem;
	line-height: 1.55;
	color: #333;
}

/* -- Dates: stacked label/value pairs, no rules; spacing separates them -- */

.mge-aw-dates {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.25rem;
}

.mge-aw-dates th,
.mge-aw-dates td {
	display: block;
	width: auto;
	text-align: left;
	border: 0;
}

.mge-aw-dates th {
	font-family: @featuretext;
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #8a8a85;
	white-space: normal;     /* long labels wrap rather than force width */
	padding: 0 0 .1em;
}

.mge-aw-dates td {
	color: #2f2f2f;
	font-family: @leadtextheavy;   /* the dates are the payload; give them weight */
	font-size: 1rem;
	line-height: 1.35;
	padding: 0 0 .8rem;
}

.mge-aw-dates tr:last-child td { padding-bottom: 0; }

.mge-aw-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.mge-aw-cta {
	display: inline-block;
	background: @purple;
	color: #fff;
	font-weight: 600;
	font-size: .9375rem;
	padding: .5em 1.1em;
	border-radius: 6px;
	text-decoration: none;
}

.mge-aw-cta:hover { background: #3a2266; color: #fff; }

.mge-aw-cta--soft {
	background: #fff;
	color: @purple;
	border: 1.5px solid @purple;
}

.mge-aw-cta--soft:hover { background: #f3f0fa; color: #3a2266; }

.mge-widget-error {
	border: 1px dashed #c00;
	background: #fff5f5;
	padding: .5em .75em;
	border-radius: 6px;
	font-size: .9rem;
}

/*-- Side-by-side row of award widgets --*/

.mge-award-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.5rem;
	margin: 1.5rem 0 4rem;
	align-items: stretch;
}

.mge-award-row .mge-award-widget {
	box-sizing: border-box;
	margin: 0;
	display: flex;
	flex-direction: column;
}

/* the head must still bleed once the card is a flex column */
.mge-award-row .mge-aw-head { flex: none; }

.mge-award-row .mge-aw-actions { margin-top: auto; }

/*-- Widget in a page sidebar: same shape, one size down --*/

#basic-page-sidebar {

	.mge-award-widget {
		margin: 0;
		padding: 0 1rem .9rem;
	}

	.mge-aw-head {
		margin: 0 -1rem .9rem;
		padding: .7em 1rem;
	}

	.mge-aw-title { font-size: 1.05rem; }

	.mge-aw-badge { font-size: .62rem; padding: .25em .55em; }

	.mge-aw-dates { margin-bottom: 1rem; }
	.mge-aw-dates td { font-size: .95rem; }

	/* full-width button; a narrow column makes a small box a poor tap target */
	.mge-aw-actions { display: block; }
	.mge-aw-cta { display: block; text-align: center; }

	/* display:block drops the flex gap, so stacked buttons need their own
	   separation -- the live states now render two. */
	.mge-aw-cta + .mge-aw-cta { margin-top: .6rem; }
}


/*-------------------------------


Per-award sidebar


--------------------------------*/


.award-sidebar {
	font-size: .95rem;
	line-height: 1.4;
}

.award-sidebar-head {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	background: #4b2e83;
	border-radius: 6px 6px 0 0;
	overflow: hidden;
}

.award-sidebar-title {
	display: block;
	flex: 1;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	padding: .65em .85em;
}

.award-sidebar-title:hover { text-decoration: underline; }

.award-sidebar-up {
	display: flex;
	align-items: center;
	padding: 0 .9em;
	color: #fff;
	text-decoration: none;
	font-size: 1.1rem;
	background: rgba(255,255,255,.12);
}

.award-sidebar-up:hover { background: rgba(255,255,255,.22); }

/* the list of this award's pages */
.award-nav-list {
	list-style: none;
	margin: 0;
	padding: .3em 0;
	border: 0.5px solid #d8d4cc;
	border-top: none;
	border-radius: 0 0 6px 6px;
}

.award-nav-list.depth-1 { border: none; padding: .1em 0 .2em; }
.award-nav-list.depth-2 { border: none; padding: 0; }

.award-nav-list li { margin: 0; }

.award-nav-list a {
	display: block;
	padding: .45em .85em;
	color: #444;
	text-decoration: none;
	border-left: 4px solid transparent;
	border-radius: 0;
}

.award-nav-list a:hover {
	background: #f4f2fa;
	color: #4b2e83;
}

/* nested pages indent under their parent */
.award-nav-list.depth-1 a { padding-left: 1.6em; }
.award-nav-list.depth-2 a { padding-left: 2.4em; }

/* current page — the loudest thing in the list */
.award-nav-list li.is-current > a {
	font-weight: 600;
	color: #4b2e83;
	background: #f0edf9;
	border-left-color: #4b2e83;
}

/* an ancestor of the current page (only matters if content nests) */
.award-nav-list li.is-trail > a {
	color: #4b2e83;
	border-left-color: #b7a9d1;
}

/*-------------------------------



Staff bio



--------------------------------*/

.staff-bio {
  display: flow-root;   /* contain the float so the block's height includes the photo */
  margin: 2.5em 0 3em;
}

/* -- portrait -- */

.staff-bio__photo {
  float: right;
  width: clamp(14em, 32%, 19em);
  margin: .15em 0 1.2em 2.2em;
  border: 6px solid @gold;
  border-radius: 14px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  shape-outside: margin-box;
}

/* -- name --
   Must out-specify `#bodycontent h3 { clear: both; }`, which is what was
   pushing the whole header below the float. Scoped with the id to win. */

#bodycontent .staff-bio__name {
  clear: none;
  font-family: @nav;
  color: @purple;
  font-size: 2em;
  line-height: 1.1;
  margin: 0;
  padding: 0;
  border: 0;
}

/* -- role + contact -- */

.staff-bio__role {
  font-family: @nav;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: @metallicgold;
  font-size: 1.05em;
  margin: 1.1em 0 0;
}

.staff-bio__contact {
  font-family: @featuretext;
  font-size: 1em;
  margin: .4em 0 0;
}

.staff-bio__sep { color: @gold; margin: 0 .55em; }
.staff-bio__pronouns { color: lighten(@textblack, 25%); }

/* -- bio text -- */

.staff-bio > p {
  font-size: 1.08em;
  line-height: 1.75;
  margin: 0 0 1.1em;
}

.staff-bio > p:first-of-type {
  font-family: @featuretext;
  font-size: 1.25em;
  margin-top: 1.8em;
}

@media (max-width: 700px) {
  .staff-bio__photo {
    float: none;
    display: block;
    width: 100%;
    max-width: 18em;
    margin: 0 0 1.5em;
  }
}

/*-------------------------------



Home



--------------------------------*/

/*-------------------------------


Homepage scholar hero


--------------------------------*/

/**
 * The photo runs large along the right edge of the content column and fades
 * out under the text, so it reads as atmosphere rather than as a portrait in
 * a box. The text sits on plain white the whole way -- no scrim, no light-on-
 * photo -- because these are 211 unpredictable student snapshots and text
 * contrast can't be guaranteed over an arbitrary one.
 *
 * The fade is the same device as #omsfabanner::after: a right-anchored image
 * with a linear-gradient mask running left. Reused deliberately so the
 * homepage and the page banner feel like one system.
 */

/**
 * FULL BLEED -- every number here is derived from @contentwidth.
 *
 * `#content, .pagewidth` is @contentwidth of the page, centered. The page
 * gutter is therefore @pagegutter, and that same gutter expressed as a share
 * of #content's own width is @herobleed.
 *
 * THE TRAP: percentage margins AND percentage padding both resolve against the
 * *containing block's* width -- here #content -- never against the element's
 * own width. So both values are @herobleed, not @herobleed and @pagegutter.
 * Using @pagegutter for the padding put the hero text at 8% of the page while
 * the body copy below sat at 10%, and at the narrow breakpoint the compounding
 * error pushed the photo 5% past the viewport and produced a horizontal
 * scrollbar.
 *
 * Percentages resolving against the containing block is also why this doesn't
 * inherit the classic `width: 100vw` bug, where the scrollbar's own width
 * becomes horizontal overflow.
 *
 * The negative top margin cancels @navgap exactly, so the photo starts flush
 * against the nav's bottom border. It reads as one continuous band rather than
 * as a card floating below the menu.
 */

.mge-hero {
	position: relative;
	display: flex;
	align-items: center;

	/* was clamp(20rem, 34vw, 28rem) -- each stop is 75px / 4.7rem shorter.
	   min-height is content-box here (no global border-box), so the 5.5em of
	   vertical padding still sits on top of this and is unchanged. */
	min-height: clamp(15.3rem, 26vw, 23.3rem);

	margin: -@navgap -@herobleed 2.5em;
	padding: 2.5em @herobleed 3em;
	border-bottom: 1px solid #ececea;
	overflow: hidden;
}

/* -- the photo: right-anchored, bleeding, masked away toward the left -- */

/**
 * `right: 0` is unaffected by the hero's new 10% padding -- an absolutely
 * positioned element is laid out against its ancestor's *padding box*, so the
 * photo still runs to the true edge of the page.
 *
 * 62% -> 60%: the photo used to be 62% of the 80% column (49.6vw), running from
 * 40.4vw to the column's right edge at 90vw. 60% of the full width holds that
 * same left edge and same scale while extending to 100vw, so bleeding it out
 * doesn't quietly enlarge the image.
 */
.mge-hero__media {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 60%;
	z-index: 0;
	pointer-events: none;
}

.mge-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* Fallback only. scholar-hero.inc writes an inline `object-position`: 28%
	   down by default, which suits upright portraits in this landscape frame,
	   overridden by the image's ProcessWire focus point once an editor drags
	   the crosshair. */
	object-position: center 28%;
	border-radius: 0;              /* was 0 14px 14px 0 -- a rounded corner sitting
	                                  on the viewport edge reads as a rendering bug */

	/* solid at the right edge, gone by the middle */
	-webkit-mask-image: linear-gradient(to left, #000 0%, #000 34%, transparent 88%);
	        mask-image: linear-gradient(to left, #000 0%, #000 34%, transparent 88%);
}

/* a hairline of gold along the bottom, echoing the page banner's rule */
.mge-hero__media::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 60%;                    /* tracks .mge-hero__media */
	height: 5px;
	background: @gold;
	opacity: .85;
}

/* -- text: always on white, never over the photo -- */

.mge-hero__body {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 34rem;
}

.mge-hero__eyebrow {
	font-family: @leadtextheavy;   /* 600 semibold, up from featuretext's 400 */
	font-size: .95rem;             /* was .78rem */
	text-transform: uppercase;
	letter-spacing: .1em;
	color: @metallicgold;
	margin: 0 0 1em;
}

.mge-hero__project {
	font-family: @leadtextheavy;   /* 600 semibold, down from @nav's 800 extrabold */
	font-weight: normal;
	color: @purple;
	font-size: clamp(1.8rem, 3.1vw, 2.8rem);
	line-height: 1.22;             /* was 1.05 */
	letter-spacing: 0;             /* the negative tracking was compensating for the heavy weight */
	margin: 0;
	text-wrap: balance;
}

/* the global `#content h2:first-of-type::after` gold rule would land under the
   project title; the eyebrow already does that job here */
#content .mge-hero__project::after { display: none; }

.mge-hero__meta {
	font-family: @featuretext;
	font-size: 1.05rem;
	color: @textblack;
	margin: 1.1em 0 0;
}

.mge-hero__name { font-family: @leadtextheavy; }
.mge-hero__sep  { color: @gold; margin: 0 .5em; }

.mge-hero__link { margin-top: 1.2em; }

/* -- editor-only pin strip (?profile=) -- */

.mge-hero__pin {
	font-family: @featuretext;
	font-size: .82rem;
	line-height: 1.5;
	color: @textblack;
	background: #fbfaf7;
	border: 1px dashed @gold;
	border-radius: .3em;
	padding: .45em .7em;
	margin: 0 0 1.2em;
}

.mge-hero__pin-label {
	font-family: @leadtextheavy;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: @metallicgold;
	margin-right: .4em;
}

.mge-hero__pin-warn { color: #8a3b12; }

.mge-hero__pin a { color: @purple; }

/* -- narrow: photo becomes a normal band above the text, mask off -- */

@media (max-width: 60rem) {
	.mge-hero {
		display: block;
		min-height: 0;
		padding: 0 @herobleed 2.5em;   /* keeps the text on the content column */

		/* was `visible`. With the media's negative margins now cancelling the
		   padding exactly, there is nothing to reveal, and `hidden` clips any
		   sub-pixel rounding rather than letting it become a scrollbar. */
		overflow: hidden;
	}

	/* The photo is no longer absolute here, so it obeys the hero's padding.
	   Its containing block is the hero's *content* box, which after the fix
	   above is exactly 100% of #content -- so -@herobleed cancels the padding
	   and puts the band back out to the page edges, with nothing left over. */
	.mge-hero__media {
		position: relative;
		width: auto;
		margin: 0 -@herobleed 1.8em;
		height: clamp(12rem, 42vw, 18rem);
	}

	.mge-hero__media img {
		border-radius: 0;
		-webkit-mask-image: none;
		        mask-image: none;
	}

	.mge-hero__media::after { width: 100%; border-radius: 0; }

	.mge-hero__body { max-width: none; }
}


/*-------------------------------


Scholars index page


--------------------------------*/




.sub { color: #666; margin: 0 0 1.5rem; font-size: .95rem; }
.sub a { color: #4b2e83; }

/* --- filters --- */
.filters { background: #f6f5f2; border: 1px solid #e2e0da; border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: .4em; }
.filter-group > .label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #666; }
.checks { display: flex; flex-wrap: wrap; gap: .9rem; }
.checks label { display: inline-flex; align-items: center; gap: .35em; cursor: pointer; }
.checks input { margin: 0; }
select, input[type=search] { font: inherit; padding: .35em .5em; border: 1px solid #c9c6bd; border-radius: 4px; background: #fff; }
input[type=search] { min-width: 14rem; }
.reset { font-size: .9rem; color: #4b2e83; background: none; border: 0; cursor: pointer; text-decoration: underline; padding: .35em 0; }

.count { margin: 0 0 1.25rem; font-size: .9rem; color: #555; }
.count strong { color: #222; }

/* --- yearbook grid --- */
.yearbook {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 1.75rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.card { display: flex; flex-direction: column; }
.card.is-hidden { display: none; }

.card-photo {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	background: #efedea;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: .6em;
}
.card-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .25s ease;
}
.card:hover .card-photo img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.card-photo img, .card:hover .card-photo img { transition: none; transform: none; }
}

/* placeholder silhouette when there's no photo */
.card-photo.is-empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 36%, #dcd8d2 22%, transparent 23%),
		radial-gradient(ellipse at 50% 96%, #dcd8d2 38%, transparent 39%);
}

.card-name { font-size: 1rem; font-weight: 600; line-height: 1.25; margin: 0 0 .2em; }
.card-name a { color: #4b2e83; text-decoration: none; }
.card:hover .card-name a { text-decoration: underline; }

.card-award { font-size: .8rem; color: #666; margin: 0 0 .35em; }
.card-award .pill { display: inline-block; padding: .1em .5em; border-radius: 999px; background: #f0f0ee; color: #444; font-size: .72rem; white-space: nowrap; }

/* Keyed on the award page NAME, not its title -- retitling an award type
   must not silently break the colour coding. Matches the deadline-card
   badge palette in the main stylesheet. */
/* One palette, two places: the listing cards and the sidebar spotlight. Adding
   the selector here rather than restating the colours means a future award
   type is defined once. */
.card-award .pill.award-research,
.scholar-spotlight__meta .pill.award-research             { background: #ece9f6; color: #4b2e83; }
.card-award .pill.award-leadership,
.scholar-spotlight__meta .pill.award-leadership           { background: #e7f4ec; color: #1a6b3c; }
.card-award .pill.award-community-investment,
.scholar-spotlight__meta .pill.award-community-investment { background: #fbe9d0; color: #8a5300; }

.card-project { font-size: .82rem; line-height: 1.4; color: #555; margin: 0; }
.card-major { font-size: .76rem; color: #8a867e; margin: .35em 0 0; }

.flag { display: inline-block; font-size: .68rem; padding: .05em .4em; border-radius: 3px; background: #fdecec; color: #a11; margin-left: .25em; vertical-align: 2px; }

.empty { padding: 3rem; text-align: center; color: #888; }

@media (max-width: 30rem) {
	.yearbook { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1.25rem .9rem; }
	.card-name { font-size: .92rem; }
}

.filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;   /* was flex-end */
}

/* no label above it, so it needs the label's height to sit level
   with the controls (label line-box + .filter-group gap) */
.reset {
	margin-top: 1.6rem;
	font-family: @leadtextheavy;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: @purple;
	background: #fff;
	border: 1.5px solid #d8d5cd;
	border-radius: .5em;
	padding: .62em 1.1em;
	cursor: pointer;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease;
}

.reset:hover {
	color: @purple;
	border-color: @purple;
	background: #f3f0fa;
}

.reset:focus-visible {
	outline: none;
	border-color: #8575b5;
	box-shadow: 0 0 0 3px rgba(133,117,181,.22);
}
input[type=search] { min-width: 20rem; }

/* -- term cohorts --
 *
 * Add inside the .scholar-index block, just before .yearbook.
 *
 * The heading uses the same device as the hero eyebrow, the staff role line
 * and the footer's QUICK LINKS: uppercase metallic gold in the compressed
 * face. That treatment now means "structural label" consistently across the
 * site rather than being invented fresh here.
 */

.term-group {
	margin: 0 0 3rem;
}

.term-group.is-hidden { display: none; }

.term-group:last-child { margin-bottom: 0; }

.term-heading {
	font-family: @nav;
	font-weight: normal;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: @metallicgold;
	margin: 0 0 1.15rem;
	padding: 0 0 .55rem;
	border-bottom: 1px solid #e2e0da;
}

/* an unlabelled group (scholars with no term) still needs its top margin */
.term-group > .yearbook:first-child { margin-top: .5rem; }

/*-------------------------------


Scholar widget (Hanna: [[mge_scholars]])


--------------------------------*/

/**
 * The cards themselves are the global .yearbook / .card rules from the
 * scholars index -- reused, not redefined, so the widget tracks any future
 * change to the listing. Only the wrapper is new.
 */

.mge-scholar-widget {
	margin: 2.5em 0;
	padding-top: 1.6em;
	border-top: 1px solid #ececea;
}

.mge-scholar-widget__heading {
	font-family: @nav;
	font-weight: normal;
	color: @purple;
	margin: 0 0 1.1em;
}

/* a widget of four sits in a narrower column than the full index, so the
   tracks are wider here -- 11rem cards would strand a fifth in the gutter */
.mge-scholar-widget .yearbook {
	grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
}

.mge-scholar-widget__more {
	margin: 1.4em 0 0;
}


/*-------------------------------


Partnerships grid


--------------------------------*/

.partner-grid-wrap {
	margin: 2em 0 0;
}

/**
 * The ~"..." escape is not decoration. min() and max() are LESS built-in
 * functions, so less.js tries to evaluate min(19rem, 100%) itself and fails
 * with "incompatible types" — it cannot compare rem against a percentage. The
 * escape passes the string through untouched for the browser to resolve as
 * CSS. clamp() needs no escape because LESS has no function by that name.
 *
 * What it buys: on a viewport narrower than the track minimum, the track
 * collapses to 100% of the container instead of overflowing it — which is what
 * the footer grid was doing.
 *
 * 19rem is chosen so the content column holds two cards at desktop and one on
 * a phone. Three would put these descriptions at about six words a line.
 */
.partner-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(~"min(19rem, 100%)", 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 1.5em 0 0;
	padding: 0;
}

/**
 * Flex column with the body pushed to fill: cards in a row are the same height
 * whatever the description length, and the borders line up.
 */
.partner-card {
	display: flex;
	flex-direction: column;
	background: #fbfaf8;
	border: 1px solid #e2e0da;
	border-left: 4px solid @gold;
	border-radius: 6px;
	padding: 1.3em 1.4em 1.4em;
}

.partner-card__name {
	font-family: @nav;
	font-weight: normal;
	font-size: 1.12rem;
	line-height: 1.3;
	color: @purple;
	margin: 0 0 .3em;
}

/* Underline only on hover: at this size a permanently underlined display face
   turns the card into a wall of rules. */
.partner-card__name a {
	color: @purple;
	text-decoration: none;
}

.partner-card__name a:hover,
.partner-card__name a:focus-visible { text-decoration: underline; }

/**
 * The unit line — "Office of Undergraduate Research". In the source content
 * this trailed the program name inside the same heading, half of it linked and
 * half not. Splitting it out lets the link cover exactly the program name and
 * gives the unit a quieter register.
 */
.partner-card__unit {
	font-family: @leadtextheavy;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: @metallicgold;
	margin: 0 0 .8em;
	line-height: 1.35;
}

.partner-card__body {
	font-size: .95rem;
	line-height: 1.55;
}

.partner-card__body p { margin: 0 0 .6em; }
.partner-card__body p:last-child { margin-bottom: 0; }

/* The descriptions arrive as a single bulleted item in the old markup. Inside a
   card the bullet is redundant — the card is the list item now. */
.partner-card__body ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.partner-card__body li { margin: 0 0 .6em; }
.partner-card__body li:last-child { margin-bottom: 0; }


/*-------------------------------


Sidebar scholar spotlight


--------------------------------*/

/**
 * Lives in the 3fr column of #bodygrid — roughly 250px at desktop, less the
 * sidebar's 1.5em padding. That is about one portrait wide, which is why this
 * is one scholar rather than a grid.
 *
 * The award pill shares the .award-* colours with the scholars index, but the
 * shape and size are its own: the index's pill rules are scoped to
 * `.card-award .pill` and don't reach here.
 */

.scholar-spotlight {
	margin-top: 2em;
}

.scholar-spotlight__photo {
	display: block;
	aspect-ratio: 3 / 4;
	background: #efedea;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: .55em;
}

.scholar-spotlight__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.scholar-spotlight__name {
	font-family: @nav;
	font-weight: normal;
	font-size: 1.1rem;
	line-height: 1.3;
	margin: 0 0 .5em;
}

/**
 * `#basic-page-sidebar h4 { margin-top: 3em }` is what was opening the gap
 * under the photo — an id plus an element beats a single class, so the margin
 * above had no effect. This out-specifies it. The 3em is right for the older
 * sidebar blocks, where an h4 follows a body of text; here the heading belongs
 * to the image directly above it.
 */
#basic-page-sidebar .scholar-spotlight__name {
	margin-top: 0;
	font-size: 1.1rem;
}

.scholar-spotlight__name a {
	color: @purple;
	text-decoration: none;
}

.scholar-spotlight__name a:hover { text-decoration: underline; }

.scholar-spotlight__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5em;
	margin: 0 0 .7em;
}

/**
 * The listing's pill rules are scoped to `.card-award .pill`, so none of them
 * reached the spotlight and the award name was rendering as bare inherited
 * text. This gives it the same pill shape in the display face, a little larger
 * than the card version since it isn't competing with a grid of forty others.
 * Colour still comes from the shared .award-* rules in the scholars index
 * block above.
 */
.scholar-spotlight__meta .pill {
	display: inline-block;
	font-family: @nav;
	font-size: .8rem;
	letter-spacing: .02em;
	padding: .2em .7em;
	border-radius: 999px;
	background: #f0f0ee;
	color: #444;
	white-space: nowrap;
}

.scholar-spotlight__term {
	font-family: @featuretext;
	font-size: .82rem;
	color: #666;
}

/**
 * The project title is the reason this block exists — it explains what a Mary
 * Gates Scholarship is faster than any paragraph of prose. Line-clamped rather
 * than truncated in PHP so the full title stays in the DOM for search and for
 * anyone reading with styles off.
 */
.scholar-spotlight__project {
	font-family: @featuretext;
	font-size: .95rem;
	line-height: 1.45;
	margin: 0 0 .9em;

	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/**
 * The advice excerpt — a student's own words, so it gets quotation treatment
 * rather than looking like more template copy. Gold rule on the left echoes
 * the banner and hero devices without adding a new colour.
 *
 * No attribution line: the scholar's name sits directly above it, and
 * repeating it would be noise for a screen reader as much as for the eye.
 */

/* Matches the "Advice for future applicants" heading on the profile page, so
   a reader who clicks through doesn't meet a different label for the same
   field. */
.scholar-spotlight__advice-label {
	font-family: @leadtextheavy;
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: @metallicgold;
	margin: 0 0 .45em;
}

.scholar-spotlight__advice {
	margin: 0 0 1em;
	padding: .3em .3em .6em 1.2em;   /* .9em rule offset + .3em breathing room */
	border-left: 3px solid @gold;
}

/* Open Sans, not @featuretext: the compressed face is the site's voice, and
   this is the student's. The body face sets it apart as quoted speech. */
.scholar-spotlight__advice p {
	font-family: @bodytext;
	font-size: .88rem;
	line-height: 1.55;
	font-style: italic;
	color: @textblack;
	margin: 0;
}