/* ==========================================================================
   David Oh — portfolio landing page
   ========================================================================== */

:root {
	--bg: #0d1018;
	--surface: #101317;
	--surface-media: #0e141e;
	--accent: #12ffd7;
	--line: #696969;
	--line-soft: rgba(105, 105, 105, 0.6);
	--text: #ffffff;
	--text-body: rgba(255, 255, 255, 0.9);
	--text-muted: rgba(255, 255, 255, 0.5);

	--display: "Playfair Display", Georgia, "Times New Roman", serif;
	--ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* 140px gutter at the 1440px design width, fluid below it. */
	--gutter: clamp(20px, 9.72vw, 140px);
	--gap: 20px;

	/* Layered wash used by every bordered panel in the design. */
	--panel-wash:
		linear-gradient(179deg, rgba(18, 50, 59, 0.85) 0%, rgba(18, 50, 59, 0) 34%),
		radial-gradient(120% 95% at 50% 100%, rgba(13, 16, 24, 0.95) 0%, rgba(13, 16, 24, 0) 100%),
		linear-gradient(214deg, rgba(54, 54, 54, 0.2) 11%, rgba(56, 73, 84, 0) 42%),
		linear-gradient(259deg, rgba(0, 0, 0, 0) 46%, rgba(90, 92, 94, 0.2) 100%);

	/* Masthead (~132px) + sectionnav (80px); used for anchor clearance. */
	--sticky-header-offset: 212px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--ui);
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

h1, h2, h3, p, figure, ul {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

.shell {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--accent);
	color: #06231d;
	font-weight: 600;
}

.skip-link:focus {
	left: 12px;
	top: 12px;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* Shared type ------------------------------------------------------------ */

.display {
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(28px, 2.78vw, 40px);
	line-height: 1.3;
	letter-spacing: -0.2px;
	text-transform: uppercase;
	text-align: center;
}

.prose {
	font-family: var(--ui);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	color: var(--text-body);
	opacity: 0.8;
}

.prose--sm {
	font-family: var(--ui);
	font-weight: 400;
	font-size: 14px;
}

.prose--center {
	text-align: center;
}

.panel {
	border: 1px solid var(--line-soft);
	background-color: var(--bg);
	background-image: var(--panel-wash);
}

/* Sticky site header (masthead + section nav) — desktop/tablet only ---- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--bg);
}

#overview,
#research,
#design,
#courses {
	scroll-margin-top: var(--sticky-header-offset);
}

/* Masthead --------------------------------------------------------------- */

.masthead {
	padding-block: 42px;
}

.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	min-height: 48px;
}

.social {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1 1 0;
}

.social a {
	display: block;
	width: 32px;
	height: 32px;
}

.social svg {
	display: block;
	width: 32px;
	height: 32px;
}

.social__ring {
	fill: transparent;
	stroke: #696969;
	stroke-width: 1.107;
	stroke-miterlimit: 10;
	transition: fill 0.2s ease;
}

.social__mark {
	fill: #ffffff;
	transition: fill 0.2s ease;
}

/* Invert like doh3.com: light circle, dark glyph, ring stays #696969. */
.social a:hover .social__ring {
	fill: #e6e6e6;
}

.social a:hover .social__mark {
	fill: #0d1018;
}

.wordmark {
	flex: 0 0 auto;
}

.wordmark img {
	width: 153px;
	height: 23px;
}

.masthead__cta {
	display: flex;
	justify-content: flex-end;
	flex: 1 1 0;
}

.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding-inline: 30px;
	border: 1px solid var(--line);
	border-radius: 100px;
	background: rgba(16, 19, 23, 0.1);
	font-family: var(--ui);
	font-weight: 600;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0.16px;
	color: #e6e6e6;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pill:hover {
	background: #f1f1f1;
	color: #101317;
}

.pill--lg {
	font-weight: 500;
	font-size: 18px;
	letter-spacing: normal;
}

/* Section navigation ----------------------------------------------------- */

.sectionnav__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	height: 80px;
	padding-inline: 40px;
	border-block: 1px solid var(--line);
}

.sectionnav__list a {
	font-size: 16px;
	line-height: 28px;
	transition: color 0.2s ease;
}

.sectionnav__list a:hover,
.sectionnav__list .is-current {
	color: var(--accent);
}

/* Hero ------------------------------------------------------------------- */

.hero {
	padding-block: 70px;
}

.hero__title {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(34px, 4.58vw, 66px);
	line-height: 1;
	letter-spacing: -0.66px;
	text-transform: uppercase;
	text-align: center;
}

/* About ------------------------------------------------------------------ */

.about {
	padding-bottom: var(--gap);
}

.about__grid {
	display: grid;
	grid-template-columns: minmax(0, 373fr) minmax(0, 767fr);
	gap: var(--gap);
	align-items: stretch;
}

.about__card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 17px;
	padding: 44px 32px;
	min-height: 351px;
	background-image: url("assets/article.panle.about_card-bg.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.about__heading {
	font-family: var(--display);
	font-weight: 600;
	font-size: 26px;
	line-height: 30px;
}

.about__media {
	position: relative;
	overflow: hidden;
	background: var(--surface-media);
	min-height: 351px;
}

.about__media img,
.about__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Out of flow so the 16:9 intrinsic size the video reports once it loads
   cannot re-height the grid row and shift the page under the visitor. */
.about__media video {
	position: absolute;
	inset: 0;
}

/* Research / teaching / service ------------------------------------------ */

.pillars {
	padding-bottom: 70px;
}

.pillars__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
}

.pillar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 32px;
	background-image: url("assets/article.panel.pillar-bg.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.pillar__title {
	font-family: var(--ui);
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
}

/* Section headings ------------------------------------------------------- */

/* Subtitle bands start flush; the section above supplies 70px bottom padding. */
.heading-band {
	padding-top: 0;
	margin-top: 0;
}

.band.heading-band {
	padding-bottom: 50px;
}

.band__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

/* Same 766px column as the courses ledger, so heading text doesn't span
   the full 1160px shell while the block below sits narrower. */
.band__head .display {
	max-width: 766px;
}

.band__lede {
	max-width: 847px;
}

.band__lede--narrow {
	max-width: 768px;
}

/* Ledger tables ---------------------------------------------------------- */

.sfr {
	padding-bottom: 70px;
}

.courses {
	padding-bottom: 70px;
}

.ledger {
	width: 100%;
	max-width: 766px;
	margin-inline: auto;
	border-collapse: collapse;
	text-align: left;
}

.ledger th,
.ledger td {
	font-family: var(--ui);
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
	color: var(--text);
	padding-block: 15px;
	border-bottom: 1px solid var(--line-soft);
}

.ledger tbody tr:first-child .ledger__num,
.ledger tbody tr:first-child th[scope="row"] {
	padding-top: 0;
}

.ledger thead th {
	font-weight: 600;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0.16px;
	text-transform: uppercase;
	color: var(--text-muted);
}

.ledger__num,
.ledger td {
	text-align: right;
}

.ledger--courses td {
	font-style: italic;
	font-weight: 400;
	font-size: 16px;
}

/* Research features ------------------------------------------------------ */

/* One shell column: 20px between feature rows, then 20px before citations. */
.features {
	padding-bottom: 20px;
}

.features .shell {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.feature {
	display: grid;
	grid-template-columns: 375px minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
}

/* Alternating rows put the diagram on the opposite side, so the fixed-width
   column has to move with it. */
.feature--reverse {
	grid-template-columns: minmax(0, 1fr) 375px;
}

.feature--reverse .feature__media {
	order: 2;
}

.feature__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	padding: 20px;
	border: 1px solid var(--line-soft);
	background-color: var(--bg);
	background-image: var(--panel-wash);
}

.feature__media img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Research diagram cards: textured container + centered circular PNG.
   The <img> is transparent outside the circle; --diagram-canvas / --diagram-circle
   size it so the CIRCLE has an even 40px inset from the card’s shorter sides
   (diameter ≈ min(width, height) − 80px, currently driven by width).
   BG assets are 1119×1209 with ~41px transparent letterboxing top/bottom, so
   a ::before paints cover + a slight scale to crop those bars as height changes.
   Height % on background-size does not resolve on these stretched grid items. */
.feature__media--diagram {
	--diagram-bg: none;
	position: relative;
	padding: 0;
	overflow: hidden;
	background-color: #191f28;
	background-image: none;
	border: 1px solid rgba(105, 105, 105, 0.6);
	aspect-ratio: auto;
	height: 100%;
	min-height: 0;
	align-self: stretch;
}

.feature__media--astrolabe {
	--diagram-bg: url("assets/img1-design-astrolabe-bg.png");
	--diagram-canvas: 1528;
	--diagram-circle: 898;
}

.feature__media--latent {
	--diagram-bg: url("assets/img2-latent-meaning-bg.png");
	--diagram-canvas: 1049;
	--diagram-circle: 897;
}

.feature__media--diagram::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: #191f28;
	background-image: var(--diagram-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transform: scale(1.12);
}

.feature__media--diagram img {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	display: block;
	width: calc((100% - 80px) * var(--diagram-canvas) / var(--diagram-circle));
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

.feature__body {
	display: flex;
	flex-direction: column;
	padding: 50px;
	border: 1px solid var(--line-soft);
	background-color: var(--bg);
	background-image: url("assets/div.feature_body-bg-img.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.feature__title {
	font-family: var(--display);
	font-weight: 500;
	font-size: 22px;
	line-height: 32px;
	max-width: 631px;
}

/* Title → body 20px; body → CTA 30px (not a uniform flex gap). */
.feature__body .prose {
	margin-top: 20px;
	max-width: 631px;
}

.feature__body .arrowlink {
	margin-top: 30px;
	color: var(--accent);
}

.feature__body .arrowlink img {
	width: 24px;
	height: 16px;
}

.feature__body .arrowlink:hover img {
	animation: arrow-nudge 0.5s ease-out;
}

@keyframes arrow-nudge {
	0% {
		transform: translateX(0);
	}

	35% {
		transform: translateX(3px);
	}

	55% {
		transform: translateX(-1px);
	}

	75% {
		transform: translateX(0.6px);
	}

	100% {
		transform: translateX(0);
	}
}

.arrowlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ui);
	font-weight: 500;
	font-size: 18px;
	color: var(--text);
	transition: color 0.2s ease;
}

.arrowlink:hover {
	color: var(--accent);
}

.arrowlink img {
	width: 30px;
	height: 30px;
	flex: none;
}

/* Scholarly activities --------------------------------------------------- */

.scholarship {
	padding-bottom: 70px;
}

.scholarship__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: 20px;
}

.cite {
	display: grid;
	grid-template-columns: 178px minmax(0, 1fr);
	align-items: stretch;
	height: 100%;
	min-height: 162px;
	min-width: 0;
}

.cite__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	gap: 12px;
	padding: 20px;
	border: 1px solid var(--line-soft);
	background-image: url("assets/div.cite_badge-bg.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 14px;
	line-height: 1.46;
	text-transform: uppercase;
	text-align: center;
}

.cite__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	flex-shrink: 0;
	overflow: visible;
}

.cite__badge img {
	width: 54px;
	height: 54px;
}

.cite__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	flex: 1 0 0;
	height: 100%;
	min-width: 0;
	gap: 8px;
	padding: 32px;
	border: 1px solid var(--line-soft);
	border-left: 0;
}

.cite__arrow {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	pointer-events: none;
	overflow: hidden;
	border: 1px solid var(--line-soft);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cite:hover .cite__arrow,
.cite__arrow:hover {
	border-color: var(--accent);
}

.cite__arrow img {
	display: block;
	width: 30px;
	height: 30px;
}

.cite__venue {
	font-weight: 600;
	font-size: 14px;
	line-height: 28px;
	letter-spacing: 0.16px;
	text-transform: uppercase;
	color: var(--text-muted);
	/* Clear absolute arrow (20 inset + 30 box) with a visible gap */
	padding-right: 70px;
	max-width: 100%;
	overflow-wrap: break-word;
}

.cite__title {
	font-weight: 500;
	font-style: italic;
	font-size: 16px;
	line-height: 1.46;
	color: var(--text);
	padding-right: 70px;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.scholarship__foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 30px;
}

.scholarship__foot .arrowlink {
	color: var(--accent);
}

.scholarship__foot .arrowlink img {
	width: 24px;
	height: 16px;
}

.scholarship__foot .arrowlink:hover img {
	animation: arrow-nudge 0.5s ease-out;
}

/* Design categories ------------------------------------------------------ */

.categories {
	padding-bottom: 50px;
}

.categories__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap);
}

.category {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 94px;
	padding: 32px;
	border: 1px solid var(--line-soft);
	background-color: var(--bg);
	background-image: url("assets/article.category-bg.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.category h3 {
	font-family: var(--display);
	font-weight: 700;
	font-size: 22px;
	line-height: 30px;
	letter-spacing: 0.44px;
	text-align: center;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

/* Design gallery --------------------------------------------------------- */

.gallery {
	padding-bottom: 70px;
}

.gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.tile {
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--surface-media);
}

.tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Academic contributions ------------------------------------------------- */

.contributions.heading-band {
	padding-bottom: 50px;
}

/* Bordered band: Figma Frame 1618873214 — 70px pad, soft wash, soft border. */
.contributions__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	width: 100%;
	gap: 0;
	padding: 70px;
	border: 1px solid var(--line-soft);
	background-color: var(--bg);
	background-image: url("assets/article.panel.pillar-bg.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.contributions__inner .display,
.contributions__inner .prose {
	max-width: 770px;
}

/* Title→body 20px; body→CTA 40px. */
.contributions__inner .prose {
	margin-top: 20px;
}

.contributions__inner .pill {
	margin-top: 40px;
	border-color: #e6e6e6;
	background: transparent;
}

.contributions__inner .pill:hover {
	background: #f1f1f1;
	color: #101317;
}

/* Footer ----------------------------------------------------------------- */

.footer {
	padding-block: 1.875rem; /* 30px — Figma Frame 1618873197 */
}

.footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	align-content: center;
	gap: var(--gap);
	flex-wrap: nowrap;
	min-height: 1.75rem;
}

/* Desktop: copyright + nav as one left cluster; socials flush right (Figma). */
.footer__left {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
	min-width: 0;
}

.footer__copy {
	flex: none;
	white-space: nowrap;
}

.footer__copy,
.footer__nav a {
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 0.28px;
}

.footer__nav {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

.footer__nav li {
	display: flex;
	align-items: center;
	gap: 14px;
}

.footer__nav li::before {
	content: "";
	display: block;
	width: 1px;
	height: 22px;
	background: var(--line);
	flex: none;
}

.footer .social {
	flex: none;
	justify-content: flex-end;
}

.footer .social a,
.footer .social svg {
	width: 28px;
	height: 28px;
}

.footer__nav a {
	transition: color 0.2s ease;
}

.footer__nav a:hover {
	color: var(--accent);
}

/* Visibility helpers ----------------------------------------------------- */

.mobile-only {
	display: none;
}

.masthead-rule {
	display: none;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--line);
}

.hero__cta {
	display: none;
	justify-content: center;
	margin-top: 32px;
}

/* Responsive ------------------------------------------------------------- */
/* Breakpoints: tablet ≤1024 (Figma 834), mobile ≤640 (Figma 393). */

@media (max-width: 1180px) {
	.feature {
		grid-template-columns: 300px minmax(0, 1fr);
	}

	.feature--reverse {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.feature__body {
		padding: 32px;
	}

	.cite {
		grid-template-columns: 140px minmax(0, 1fr);
	}
}

/* Tablet — Figma frame 834 ---------------------------------------------- */

@media (max-width: 1024px) {
	:root {
		--gutter: 40px;
	}

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

	.masthead {
		padding-block: 42px;
	}

	.hero {
		padding-block: 60px 70px;
	}

	.hero__title {
		font-size: clamp(48px, 7.9vw, 66px);
		letter-spacing: -0.66px;
	}

	.display {
		font-size: clamp(34px, 4.8vw, 40px);
	}

	/* About: video above card (Figma stacks media first). */
	.about__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.about__media {
		order: -1;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.about__card {
		min-height: 0;
		padding: 44px 32px;
	}

	.pillars {
		padding-bottom: 60px;
	}

	/* Keep 3 pillars on tablet (Figma). */
	.pillars__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pillar {
		padding: 32px;
	}

	.band.heading-band {
		padding-bottom: 50px;
	}

	.sfr {
		padding-bottom: 60px;
	}

	.sfr .ledger {
		max-width: 556px;
	}

	/* Features: two stacked cards side-by-side; prose hidden via .desktop-only. */
	.features .shell {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 15px;
	}

	.feature,
	.feature--reverse {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		gap: 20px;
	}

	.feature--reverse .feature__media {
		order: 0;
	}

	.feature__media {
		aspect-ratio: 1;
		width: 100%;
	}

	.feature__media--diagram {
		aspect-ratio: 1;
		height: auto;
		align-self: stretch;
	}

	.feature__body {
		padding: 32px;
		gap: 0;
		flex: 1 1 auto;
	}

	.feature__title {
		max-width: none;
	}

	/* Title → CTA when lede is hidden. */
	.feature__body .arrowlink {
		margin-top: 30px;
	}

	.scholarship {
		padding-bottom: 60px;
	}

	.scholarship__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
		gap: 16px;
	}

	/* Narrow badge so venue/title keep room beside the arrow at ~670–750px */
	.cite {
		grid-template-columns: 88px minmax(0, 1fr);
	}

	.cite__badge {
		padding: 16px 8px;
		gap: 8px;
		font-size: 12px;
	}

	.cite__icon,
	.cite__badge img {
		width: 44px;
		height: 44px;
	}

	.cite__body {
		padding: 24px 20px;
	}

	.cite__venue,
	.cite__title {
		/* Body pad 20 + arrow 50 needs ≥62 for gap; keep clear of 30×30 box */
		padding-right: 56px;
	}

	.categories {
		padding-bottom: 20px;
	}

	.categories__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gallery {
		padding-bottom: 60px;
	}

	.gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.courses {
		padding-bottom: 60px;
	}

	.contributions__inner {
		padding: 50px 40px;
	}

	.sectionnav__list {
		padding-inline: 40px;
	}
}

/* Mobile — Figma frame 393 ---------------------------------------------- */

@media (max-width: 640px) {
	:root {
		--gutter: 20px;
		/* Section nav is hidden; no sticky bar to clear. */
		--sticky-header-offset: 0px;
	}

	.mobile-only {
		display: revert;
	}

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

	/* Section nav is gone on mobile — don't stick an empty/logo-only bar. */
	.site-header {
		position: static;
		z-index: auto;
	}

	.masthead {
		padding-block: 32px;
	}

	.masthead__inner {
		justify-content: center;
	}

	.wordmark {
		flex: none;
	}

	.wordmark img {
		width: 120px;
		height: auto;
	}

	.masthead-rule {
		display: block;
		margin-inline: var(--gutter);
	}

	.hero {
		padding-block: 32px;
	}

	.hero__title {
		font-size: 46px;
		line-height: 1.04;
		letter-spacing: 0;
	}

	.hero .shell {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
	}

	.hero__cta {
		display: flex;
		margin-top: 0;
		padding-bottom: 8px;
	}

	.hero__cta .pill {
		font-size: 18px;
		letter-spacing: 0.18px;
		padding-inline: 32px;
	}

	.display {
		font-size: 34px;
		letter-spacing: 0;
	}

	.about__media {
		aspect-ratio: 353 / 296;
		min-height: 0;
	}

	.about__card {
		padding: 32px 20px;
	}

	.pillars {
		padding-bottom: 40px;
	}

	.pillars__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.band.heading-band {
		padding-bottom: 32px;
	}

	.sfr {
		padding-bottom: 40px;
	}

	.sfr .ledger {
		max-width: none;
	}

	.features .shell {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.feature,
	.feature--reverse {
		gap: 20px;
	}

	.feature__body {
		padding: 30px 20px;
	}

	.feature__body .arrowlink {
		margin-top: 20px;
	}

	.scholarship {
		padding-bottom: 40px;
	}

	.scholarship__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	/* Compact cite cards: type tag + arrow top-right, no icon column. */
	.cite {
		display: block;
		position: relative;
		grid-template-columns: none;
		min-height: 0;
	}

	.cite__badge {
		position: absolute;
		top: 20px;
		right: 50px;
		z-index: 1;
		flex-direction: row;
		min-height: 0;
		gap: 0;
		padding: 4px 8px;
		background-image: none;
		background-color: transparent;
		text-transform: none;
		font-weight: 400;
		font-size: 14px;
		line-height: 1.46;
		color: rgba(255, 255, 255, 0.8);
	}

	.cite__icon {
		display: none;
	}

	.cite__body {
		border-left: 1px solid var(--line-soft);
		padding: 32px 20px;
		padding-top: 48px;
	}

	.cite__venue {
		font-size: 18px;
		letter-spacing: 0.18px;
		padding-right: 0;
	}

	.cite__title {
		font-weight: 400;
		padding-right: 0;
	}

	.cite__arrow {
		top: 20px;
		right: 20px;
	}

	.scholarship__foot {
		justify-content: center;
		margin-top: 20px;
	}

	.gallery {
		padding-bottom: 40px;
	}

	.gallery__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.courses {
		padding-bottom: 40px;
	}

	/* Course rows stack: title above subtitle. */
	.ledger--courses,
	.ledger--courses tbody,
	.ledger--courses tr,
	.ledger--courses th,
	.ledger--courses td {
		display: block;
		width: 100%;
	}

	.ledger--courses tr {
		padding-block: 0;
		border-bottom: 1px solid var(--line);
	}

	.ledger--courses th,
	.ledger--courses td {
		text-align: left;
		border-bottom: 0;
		padding-block: 0;
	}

	.ledger--courses th[scope="row"] {
		padding-top: 16px;
		padding-bottom: 4px;
	}

	.ledger--courses td {
		padding-bottom: 16px;
		font-style: italic;
	}

	.ledger--courses tbody tr:first-child th[scope="row"] {
		padding-top: 0;
	}

	.contributions.heading-band {
		padding-bottom: 0;
	}

	.contributions__inner {
		padding: 40px 32px;
	}

	.contributions__inner .prose {
		font-size: 14px;
	}

	.footer {
		padding: 20px 0;
	}

	.footer__inner {
		justify-content: space-between;
		text-align: left;
		flex-wrap: nowrap;
	}

	.footer .social {
		justify-content: flex-end;
		gap: 16px;
	}

	.footer .social a,
	.footer .social svg {
		width: 28px;
		height: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.feature__body .arrowlink:hover img,
	.scholarship__foot .arrowlink:hover img {
		animation: none;
		opacity: 1;
		transform: none;
	}
}