/*
Theme Name: Sky Glass
Theme URI: https://jomarimanto.com/
Author: Jomari Manto
Description: Sky-blue glass portfolio theme for ITC C611 Analytics Application: Home, About, Academic Projects and Contact. Reads the course content already stored on the site.
Version: 1.0.5
Requires at least: 6.4
Requires PHP: 7.4
License: All rights reserved
Text Domain: sky-glass
*/

/* ============================================================
 * 1. Design tokens
 *
 * Every color and font in the theme is named here and used by name below.
 * Change a value on this list and it changes everywhere. (The font files
 * themselves are requested in functions.php, skyglass_fonts_url().)
 * ============================================================ */
:root {
	/* Palette: Dark Sky Blue Monochromatic */
	--sky-deep: #3190C5;      /* underlines, rules, icon strokes, focus ring */
	--sky-jeans: #60B7DE;     /* decorative gradients only */
	--sky-sky: #87CEEB;       /* banner gradient start */
	--sky-blizzard: #B0E1F9;  /* banner base, tinted fills */
	--sky-maya: #5CD1FA;      /* hover underline, glows */
	--sky-capri: #01BFFF;     /* top accent bars, halos */
	--page-bg: #F2FAFE;
	--well: #DDF3FD;
	--ink: #0F1724;           /* all text */
	--ink-muted: rgba(15, 23, 36, 0.66);
	--hairline: rgba(49, 144, 197, 0.14);
	--numeral-from: #2B84B8;  /* big numerals: gradient start and solid fallback */
	--alert: #B3261E;         /* form errors only; not part of the sky palette */

	/* Capri and Deep as channels, for the many translucent glows */
	--capri-rgb: 1, 191, 255;
	--deep-rgb: 49, 144, 197;
	--maya-rgb: 92, 209, 250;

	/* Type */
	--font-heading: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
	--font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Layout */
	--content: 1200px;
	--gutter: 32px;
	--section-gap: 64px;
	--radius: 16px;
	--radius-lg: 22px;

	/* Motion */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fast: 180ms;
	--med: 220ms;

	/* Surfaces */
	--glass-shadow: 0 1px 2px rgba(var(--deep-rgb), 0.06), 0 18px 40px -18px rgba(var(--deep-rgb), 0.32);
	--halo: 0 0 0 5px rgba(var(--capri-rgb), 0.18), 0 0 36px rgba(var(--capri-rgb), 0.35), 0 24px 48px -18px rgba(var(--deep-rgb), 0.45);
	--sheet-shadow: 0 6px 16px -6px rgba(var(--deep-rgb), 0.35), 0 1px 2px rgba(var(--deep-rgb), 0.12);
	--well-fill: linear-gradient(135deg, rgba(var(--capri-rgb), 0.26), rgba(var(--deep-rgb), 0.12));
	--rule-gradient: linear-gradient(90deg, var(--sky-deep), var(--sky-maya) 60%, var(--sky-capri));
}

@media (max-width: 700px) {
	:root {
		--gutter: 20px;
		--section-gap: 48px;
	}
}

/* ============================================================
 * 2. Base
 * ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background-color: var(--page-bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* The four soft glows behind every page. Fixed to the window, so they stay
   put while the content scrolls over them. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(900px 620px at 92% -4%, rgba(var(--capri-rgb), 0.30), transparent 62%),
		radial-gradient(820px 720px at -12% 32%, rgba(var(--deep-rgb), 0.14), transparent 62%),
		radial-gradient(760px 640px at 108% 72%, rgba(var(--maya-rgb), 0.18), transparent 62%),
		radial-gradient(700px 520px at 20% 104%, rgba(var(--capri-rgb), 0.16), transparent 62%);
}

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

img {
	height: auto;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.1;
	color: var(--ink);
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

strong {
	font-weight: 600;
}

/* Links in text: ink text, a blue underline. */
a {
	color: var(--ink);
	text-decoration-line: underline;
	text-decoration-color: var(--sky-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-color: var(--sky-maya);
	text-decoration-thickness: 2px;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--sky-deep);
	outline-offset: 2px;
}

:target {
	scroll-margin-top: 24px;
}

/* The hidden attribute wins over any display value set on a class below.
   (hidden="until-found" is different: that element stays in the layout.) */
[hidden]:not([hidden="until-found"]) {
	display: none;
}

.icon {
	display: inline-block;
	flex: none;
	vertical-align: -0.18em;
}

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

.skip-link {
	position: absolute;
	left: 16px;
	top: -80px;
	z-index: 100;
	padding: 12px 18px;
	border-radius: 10px;
	background: var(--ink);
	color: #FFFFFF;
	font-family: var(--font-mono);
	font-size: 14px;
	text-decoration: none;
}

.skip-link:focus {
	top: 16px;
}

/* ============================================================
 * 3. Layout
 * ============================================================ */
.wrap {
	width: 100%;
	max-width: calc(var(--content) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--narrow {
	max-width: calc(820px + 2 * var(--gutter));
}

.site-main {
	display: block;
	padding-block: 40px var(--section-gap);
	/* Fanned and tilted pieces may poke past the edge of a narrow screen; they
	   are trimmed there instead of making the page scroll sideways. */
	overflow-x: clip;
}

.section {
	margin-top: var(--section-gap);
}

.section__title {
	margin-bottom: 28px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--sky-deep);
	border-image: var(--rule-gradient) 1;
	font-size: clamp(30px, 4.2vw, 44px);
	line-height: 1;
	letter-spacing: -0.01em;
}

.page-title {
	font-size: clamp(46px, 6.4vw, 72px);
	line-height: 0.98;
	letter-spacing: -0.015em;
}

/* ============================================================
 * 4. Small parts: labels, pills, numerals, buttons, links
 * ============================================================ */
.label {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.pill {
	display: inline-block;
	margin: 0 0 18px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.66);
	box-shadow: inset 0 1px 0 #FFFFFF, 0 0 20px rgba(var(--capri-rgb), 0.3);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
}

.numeral {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 34px;
	font-weight: 600;
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: var(--numeral-from);
	filter: drop-shadow(0 0 10px rgba(var(--capri-rgb), 0.35));
}

.numeral--lg {
	font-size: 56px;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.numeral {
		background-image: linear-gradient(135deg, var(--numeral-from), var(--sky-deep));
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.btn-row--center {
	justify-content: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: 12px;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-decoration: none;
	cursor: pointer;
}

.btn--dark {
	background: var(--ink);
	color: #FFFFFF;
	box-shadow: 0 12px 26px -14px rgba(15, 23, 36, 0.6);
}

.btn--dark:hover {
	box-shadow: 0 0 0 4px rgba(var(--capri-rgb), 0.25), 0 14px 28px -14px rgba(15, 23, 36, 0.6);
}

.btn--frost {
	border-color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.66);
	color: var(--ink);
	box-shadow: inset 0 1px 0 #FFFFFF, 0 10px 22px -16px rgba(var(--deep-rgb), 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.btn--frost:hover {
	background: rgba(255, 255, 255, 0.85);
	box-shadow: inset 0 1px 0 #FFFFFF, 0 0 24px rgba(var(--capri-rgb), 0.45);
}

.btn__cue {
	padding: 2px 6px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 5px;
	font-size: 10px;
	letter-spacing: 0.12em;
}

.round-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	cursor: pointer;
}

.round-btn--dark {
	background: var(--ink);
	color: #FFFFFF;
}

.round-btn--dark:hover {
	box-shadow: 0 0 0 4px rgba(var(--capri-rgb), 0.25);
}

.round-btn--frost {
	border-color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.7);
	color: var(--ink);
	box-shadow: inset 0 1px 0 #FFFFFF, 0 8px 20px -12px rgba(var(--deep-rgb), 0.5);
}

.round-btn--frost:hover {
	background: rgba(255, 255, 255, 0.9);
	box-shadow: inset 0 1px 0 #FFFFFF, 0 0 22px rgba(var(--capri-rgb), 0.45);
}

/* A call-to-action link: Mono, ink, blue underline. */
.cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 28px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--ink);
	text-decoration-line: underline;
	text-decoration-color: var(--sky-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	cursor: pointer;
}

.cta:hover {
	text-decoration-color: var(--sky-maya);
	text-decoration-thickness: 2px;
}

.cta .icon {
	color: var(--sky-deep);
}

.link-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	margin: 24px 0 0;
}

.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(var(--capri-rgb), 0.30), rgba(var(--deep-rgb), 0.14));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 18px -10px rgba(var(--deep-rgb), 0.55);
	color: var(--sky-deep);
}

.icon-tile--lg {
	width: 64px;
	height: 64px;
	border-radius: 16px;
}

/* ============================================================
 * 5. Surfaces: glass card, well, sheet, banner, closing panel
 * ============================================================ */
.glass {
	--bar: inset 0 3px 0 var(--sky-capri), inset 0 4px 0 rgba(255, 255, 255, 0.6);
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: var(--radius);
	outline: 1px solid rgba(var(--deep-rgb), 0.10);
	outline-offset: -1px;
	background: rgba(255, 255, 255, 0.68);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

/* The accent bar is drawn above the card's contents, so a well that fills the
   top of a card does not cover it. */
.glass::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 3;
	border-radius: inherit;
	box-shadow: var(--bar);
	pointer-events: none;
}

.glass--bar-bottom {
	--bar: inset 0 -3px 0 var(--sky-capri), inset 0 -4px 0 rgba(255, 255, 255, 0.6);
}

.glass--no-bar::after {
	content: none;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.glass {
		background: rgba(255, 255, 255, 0.94);
	}
}

/* A clickable card. */
.card-link {
	display: block;
	color: var(--ink);
	text-decoration: none;
}

.card-link:hover {
	outline-color: var(--sky-maya);
	box-shadow: var(--halo);
}

.card-link:focus-visible {
	outline: 2px solid var(--sky-deep);
	outline-offset: 2px;
}

.card-link__arrow {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: inset 0 1px 0 #FFFFFF;
	color: var(--sky-deep);
}

/* A well holds a sheet: padded at the top and sides, open at the bottom, so
   the sheet sits flush with the bottom edge like a page tucked in a folder. */
.well {
	display: flex;
	align-items: flex-end;
	padding: 16px 16px 0;
	border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
	background: var(--well-fill);
	overflow: hidden;
}

.sheet {
	width: 100%;
	border-radius: 8px 8px 0 0;
	background: #FFFFFF;
	box-shadow: var(--sheet-shadow);
	overflow: hidden;
}

/* Faint concentric rings, used behind portraits and the Bumi screens. */
.rings {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.85), transparent 46%),
		repeating-radial-gradient(circle at 50% 46%, transparent 0 46px, rgba(var(--deep-rgb), 0.10) 46px 47px);
}

/* The sky banner at the top of Home, the course page and Contact. */
.banner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: clamp(28px, 5vw, 64px);
	border-radius: var(--radius-lg);
	background-color: var(--sky-blizzard);
	background-image:
		radial-gradient(460px 340px at 92% 4%, rgba(var(--capri-rgb), 0.45), transparent 70%),
		radial-gradient(560px 400px at 4% 115%, rgba(var(--maya-rgb), 0.55), transparent 70%),
		radial-gradient(320px 240px at 40% 30%, rgba(255, 255, 255, 0.6), transparent 70%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 6px),
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 6px),
		linear-gradient(135deg, var(--sky-sky) 0%, var(--sky-blizzard) 55%, var(--well) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.8),
		inset 0 -4px 0 var(--sky-capri),
		0 24px 60px -20px rgba(var(--deep-rgb), 0.45),
		0 0 0 1px rgba(var(--deep-rgb), 0.18);
	color: var(--ink);
}

.banner__title {
	font-size: clamp(48px, 6.6vw, 76px);
	line-height: 0.98;
	letter-spacing: -0.015em;
	text-shadow: 0 0 40px rgba(255, 255, 255, 0.9);
}

@media (max-width: 380px) {
	.banner__title {
		font-size: 40px;
	}
}

/* "Correspondence" is one long word: it needs a smaller size to stay inside
   the banner on a phone. */
.banner--contact .banner__title {
	font-size: clamp(34px, 9.4vw, 76px);
	overflow-wrap: break-word;
}

.banner__intro {
	max-width: 58ch;
	margin: 22px 0 0;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.7;
}

/* Frosted closing panel. */
.closing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	margin-top: var(--section-gap);
	padding: clamp(26px, 4vw, 44px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.6);
	box-shadow: inset 0 1px 0 #FFFFFF, 0 0 20px rgba(var(--capri-rgb), 0.3), 0 20px 44px -24px rgba(var(--deep-rgb), 0.4);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

.closing .btn-row {
	margin-top: 0;
}

/* The one-sentence statement in Home's closing panel. */
.closing__statement {
	flex: 1 1 420px;
	max-width: 30em;
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(24px, 2.9vw, 34px);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.01em;
}

.closing__text {
	flex: 1 1 320px;
}

.closing__title {
	margin-bottom: 8px;
	font-size: clamp(24px, 2.8vw, 30px);
	line-height: 1.1;
}

.closing__text p {
	color: var(--ink-muted);
}

/* ============================================================
 * 6. Header and footer
 * ============================================================ */
.site-header {
	border-bottom: 1px solid var(--hairline);
}

.site-header__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	min-height: 76px;
	padding-block: 14px;
}

.brand {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ink);
	text-decoration: none;
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 34px;
	list-style: none;
}

.site-nav a {
	display: inline-block;
	padding: 12px 0;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 7px;
}

.site-nav a:hover {
	text-decoration-color: var(--sky-maya);
}

.site-nav a[aria-current="page"] {
	text-decoration-color: var(--sky-capri);
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.66);
	box-shadow: inset 0 1px 0 #FFFFFF;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.nav-toggle .icon--close,
.nav-toggle[aria-expanded="true"] .icon--menu {
	display: none;
}

.nav-toggle[aria-expanded="true"] .icon--close {
	display: inline-block;
}

@media (max-width: 820px) {
	.js .nav-toggle {
		display: inline-flex;
	}

	.site-nav {
		flex-basis: 100%;
	}

	.js .site-nav {
		display: none;
	}

	.js .site-nav.is-open {
		display: block;
	}

	.site-nav__list {
		flex-direction: column;
		gap: 0;
		padding-bottom: 8px;
	}

	.site-nav a {
		display: block;
		padding: 14px 0;
		border-top: 1px solid var(--hairline);
	}
}

.site-footer {
	margin-top: 8px;
	padding-bottom: 36px;
}

.site-footer__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 32px 48px;
	padding-block: 40px;
	border-top: 1px solid var(--hairline);
}

.site-footer__name {
	margin-bottom: 10px;
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
}

.site-footer__label {
	margin-bottom: 14px;
}

.site-footer__lines {
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink-muted);
}

.site-footer__lines a {
	color: var(--ink);
	overflow-wrap: anywhere;
}

.site-footer__list {
	list-style: none;
	font-size: 14px;
	line-height: 1.7;
}

.site-footer__list a {
	display: inline-block;
	padding: 3px 0;
}

.site-footer__base {
	display: flex;
	justify-content: flex-start;
	padding-top: 20px;
	border-top: 1px solid var(--hairline);
}

.to-top {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.to-top .icon {
	color: var(--sky-deep);
}

@media (max-width: 820px) {
	.site-footer__cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.site-footer__col--about {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.site-footer__cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================
 * 7. Home
 * ============================================================ */

/* Three report pages fanned over a white glow. */
.fan {
	position: relative;
	min-height: 360px;
}

.fan__glow {
	position: absolute;
	inset: -6% -4%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%);
}

.fan__sheet {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(52%, 220px);
	aspect-ratio: 600 / 812;
	border-radius: 6px;
	background: #FFFFFF;
	box-shadow: 0 22px 44px -18px rgba(var(--deep-rgb), 0.6), 0 2px 6px rgba(var(--deep-rgb), 0.18);
	overflow: hidden;
}

.fan__sheet img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.fan__sheet picture {
	height: 100%;
}

.fan__sheet--1 {
	transform: translate(-108%, -52%) rotate(-9deg);
}

.fan__sheet--2 {
	transform: translate(6%, -56%) rotate(4deg);
}

.fan__sheet--3 {
	transform: translate(-52%, -42%) rotate(-2deg);
}

.fan__title {
	display: block;
	padding: 18px 16px;
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
}

/* Final Project */
.project {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	overflow: hidden;
}

.project__well {
	position: relative;
	min-height: 470px;
	background:
		radial-gradient(closest-side at 50% 46%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 78%),
		var(--well-fill),
		var(--well);
	overflow: hidden;
}

.project__pane {
	position: absolute;
	top: 44px;
	width: 44%;
	max-width: 250px;
	border-radius: 14px;
	box-shadow: 0 26px 50px -22px rgba(15, 23, 36, 0.5), 0 2px 8px rgba(var(--deep-rgb), 0.2);
	overflow: hidden;
}

.project__pane img {
	width: 100%;
}

.project__pane--welcome {
	left: 7%;
	transform: rotate(-6deg);
}

.project__pane--answer {
	right: 7%;
	top: 78px;
	transform: rotate(3deg);
}

/* The Bumi badge: a large disc of translucent glass, centered over both
   screens and in front of them. It is see-through on purpose (no blur, no
   solid white, no ring), so the two screens show behind the logo. */
.project__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 0 60px rgba(var(--capri-rgb), 0.6), 0 24px 44px -14px rgba(15, 23, 36, 0.45);
	transform: translate(-50%, -50%);
}

.project__badge img {
	width: 178px;
	height: auto;
}

@media (max-width: 1024px) {
	.project__badge {
		width: 200px;
		height: 200px;
	}

	.project__badge img {
		width: 128px;
	}
}

@media (max-width: 600px) {
	.project__badge {
		width: 160px;
		height: 160px;
	}

	.project__badge img {
		width: 104px;
	}
}

.project__body {
	padding: clamp(26px, 3.6vw, 44px);
	align-self: center;
}

.project__title {
	margin: 12px 0 16px;
	font-size: clamp(26px, 2.9vw, 34px);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.project__text {
	color: var(--ink);
}

/* Feature gallery */
.features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin-top: 22px;
	list-style: none;
}

.feature {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.feature__well {
	height: 280px;
	align-items: stretch;
}

.feature__sheet {
	border-radius: 12px 12px 0 0;
}

.feature__sheet img {
	width: 100%;
}

.feature__body {
	padding: 20px 20px 22px;
}

.feature__title {
	margin: 14px 0 8px;
	font-size: 21px;
	line-height: 1.12;
}

.feature__line {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-muted);
}

/* The Course in Three Terms */
.terms {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	list-style: none;
}

.terms > li {
	display: flex;
}

.term-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 28px 26px 26px;
}

.term-card__name {
	margin: 18px 0 4px;
	font-size: 30px;
	line-height: 1.05;
}

.term-card__theme {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.06em;
	color: var(--ink);
}

.term-card__takeaway {
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink-muted);
}

@media (max-width: 1040px) {
	.features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.fan {
		min-height: 300px;
	}

	.fan__sheet {
		width: min(40%, 190px);
	}

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

	.project__well {
		min-height: 400px;
	}

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

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

	.fan {
		min-height: 240px;
	}

	.project__well {
		min-height: 340px;
	}
}

/* ============================================================
 * 8. About
 * ============================================================ */
.about-hero {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	overflow: hidden;
}

.about-hero__well {
	position: relative;
	display: flex;
	min-height: 420px;
	padding: 22px;
	background: var(--well-fill), var(--well);
}

.about-hero__well picture {
	position: relative;
	display: flex;
	flex: 1;
}

.about-hero__img {
	width: 100%;
	height: 100%;
	border-radius: 14px;
	box-shadow: 0 20px 44px -20px rgba(var(--deep-rgb), 0.6), 0 0 34px rgba(var(--capri-rgb), 0.35);
	object-fit: cover;
	object-position: 50% 15%;
}

.about-hero__body {
	padding: clamp(26px, 4vw, 52px);
	align-self: center;
}

.about-hero__position {
	margin: 20px 0 16px;
	font-family: var(--font-heading);
	font-size: clamp(20px, 2.1vw, 24px);
	font-weight: 600;
	line-height: 1.25;
}

.about-hero__intro {
	max-width: 68ch;
}

/* --- Core Skills --------------------------------------------------------
   Without JavaScript, or with reduced motion, the ten cards are a plain grid
   with the back line printed under each title. The script adds .is-deck and
   the grid becomes a fanned stack. */
.deck__stack {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 16px;
	list-style: none;
}

.deck__card {
	--bar-color: var(--sky-capri);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: var(--radius);
	background: #FFFFFF;
	box-shadow: inset 0 3px 0 var(--bar-color), var(--glass-shadow);
}

.deck__card--alt {
	--bar-color: var(--sky-deep);
	background: linear-gradient(160deg, var(--well) 0%, var(--sky-blizzard) 100%);
}

.deck__face {
	padding: 22px 24px;
}

.deck__face--back {
	padding-top: 0;
}

.deck__num {
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--ink-muted);
}

.deck__title {
	font-size: 24px;
	line-height: 1.08;
}

.deck__line {
	font-size: 15px;
	line-height: 1.6;
}

.deck__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-top: 8px;
}

.deck__controls {
	flex-wrap: wrap;
}

/* Pause / Play for the automatic cycle. */
.deck__pause {
	min-width: 104px;
	margin-top: 0;
	margin-left: 6px;
	border-radius: 999px;
}

.deck__pause .icon--play,
.deck__pause[data-state="paused"] .icon--pause {
	display: none;
}

.deck__pause[data-state="paused"] .icon--play {
	display: inline-block;
}

.deck__count {
	min-width: 86px;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-align: center;
}

.is-deck .deck__stack {
	--k: 1;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 0;
	padding: 44px 0 40px;
	perspective: 1600px;
	touch-action: pan-y;
}

.is-deck .deck__card {
	grid-area: 1 / 1;
	width: min(560px, 100% - 96px);
	min-height: 200px;
	border: 0;
	background: none;
	box-shadow: none;
	z-index: var(--z, 0);
	transform: translate(calc(var(--x) * var(--k)), calc(var(--y) * var(--k))) rotate(var(--r));
	cursor: default;
	-webkit-user-select: none;
	user-select: none;
}

.is-deck .deck__card.is-front {
	cursor: pointer;
}

.is-deck .deck__card.is-lifted {
	transform: translate(calc(var(--x) * var(--k)), calc(var(--y) * var(--k) - 16px)) rotate(var(--r)) scale(1.03);
}

.is-deck.is-waiting .deck__card {
	opacity: 0;
	transform: translate(calc(var(--x) * var(--k) + 28px * var(--k)), calc(var(--y) * var(--k) + 10px)) rotate(var(--r)) scale(0.97);
}

.is-deck .deck__flip {
	position: relative;
	min-height: 200px;
	height: 100%;
	transform-style: preserve-3d;
}

.is-deck .deck__card.is-flipped .deck__flip {
	transform: rotateY(180deg);
}

.is-deck .deck__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 26px 30px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: var(--radius);
	background: #FFFFFF;
	box-shadow: inset 0 3px 0 var(--bar-color), 0 1px 2px rgba(var(--deep-rgb), 0.10), 0 18px 40px -18px rgba(var(--deep-rgb), 0.45);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.is-deck .deck__card--alt .deck__face {
	background: linear-gradient(160deg, var(--well) 0%, var(--sky-blizzard) 100%);
}

.is-deck .deck__face--back {
	justify-content: center;
	transform: rotateY(180deg);
}

.is-deck .deck__num {
	position: absolute;
	top: 22px;
	left: 30px;
	margin: 0;
}

.is-deck .deck__title {
	font-size: clamp(26px, 4.6vw, 34px);
	line-height: 1.04;
	letter-spacing: -0.01em;
}

.is-deck .deck__line {
	font-size: clamp(16px, 2.2vw, 19px);
	line-height: 1.55;
}

.is-deck .deck__card.is-front:focus-visible {
	outline: none;
}

.is-deck .deck__card.is-front:focus-visible .deck__face {
	outline: 2px solid var(--sky-deep);
	outline-offset: 3px;
}

@media (max-width: 700px) {
	.is-deck .deck__stack {
		--k: 0.35;
		padding: 30px 0 28px;
	}

	.is-deck .deck__card {
		width: min(560px, 100% - 44px);
	}

	.is-deck .deck__face {
		padding: 22px 22px;
	}

	.is-deck .deck__num {
		left: 22px;
		top: 18px;
	}

	.deck__controls {
		gap: 12px;
	}

	.deck__count {
		min-width: 74px;
	}

	.deck__pause {
		margin-left: 0;
	}
}

/* --- Experience --- */
/* Two columns that end on the same line. The row is as tall as the timeline;
   the photo card stretches to that height (align-items: stretch) and its
   photo takes up whatever the caption leaves, so the card's bottom edge
   meets the bottom of the last role card. */
.experience {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 32px;
	align-items: stretch;
}

.timeline {
	position: relative;
	display: grid;
	gap: 22px;
	align-content: start;
	padding-left: 36px;
	list-style: none;
}

.timeline__item {
	--line-x: -28px;  /* the line's left edge, measured from the role card */
	position: relative;
}

/* The line is drawn dot to dot: each role but the last carries the stretch
   from its own dot down to the next one (22px is the gap between cards, 38px
   the distance from a card's top to the middle of its dot). So the line ends
   at the last dot, not below the last card. */
.timeline__item:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 38px;
	bottom: calc(-22px - 38px);
	left: var(--line-x);
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--sky-deep), var(--sky-maya));
}

/* The last stretch fades, as the whole line did. */
.timeline__item:nth-last-child(2)::before {
	background: linear-gradient(180deg, var(--sky-maya), rgba(var(--capri-rgb), 0.45));
}

.timeline__item:first-child:nth-last-child(2)::before {
	background: linear-gradient(180deg, var(--sky-deep), var(--sky-maya) 60%, rgba(var(--capri-rgb), 0.45));
}

.timeline__dot {
	position: absolute;
	top: 30px;
	left: -35px;
	width: 16px;
	height: 16px;
	z-index: 1;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 0 0 3px var(--sky-deep), 0 0 16px 2px rgba(var(--capri-rgb), 0.7);
}

.role {
	padding: 24px 26px 26px;
}

.role__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 20px;
	margin-bottom: 16px;
}

.role__title {
	font-size: 24px;
	line-height: 1.1;
}

.role__org {
	margin-top: 4px;
	font-size: 15px;
	color: var(--ink-muted);
}

.role__dates {
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
}

.dots {
	display: grid;
	gap: 10px;
	list-style: none;
}

.dots li {
	position: relative;
	padding-left: 22px;
	font-size: 15.5px;
	line-height: 1.6;
}

.dots li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sky-capri);
	box-shadow: 0 0 10px 1px rgba(var(--capri-rgb), 0.75);
}

.portrait {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
}

/* The photo fills the top of the card edge to edge: no well around it. The
   card's own rounded corners trim it.
   The photo area flexes: it has no height of its own (the picture is laid
   over it), so it grows or shrinks to fill the card above the caption, and
   the caption keeps its natural height. */
.portrait__photo {
	position: relative;
	flex: 1 1 0;
	min-height: 240px;
}

.portrait__photo picture {
	position: absolute;
	inset: 0;
}

.portrait__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

.portrait__caption {
	flex: none;
	text-align: left;
	padding: 20px 22px 24px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ink-muted);
}

/* --- Education and Development --- */
.degree {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 24px;
	padding: 26px 28px;
}

.degree__body {
	flex: 1 1 320px;
}

.degree__title {
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.1;
}

.degree__school {
	margin-top: 6px;
	color: var(--ink-muted);
}

.development {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 18px;
	list-style: none;
}

.development__card {
	padding: 28px 26px;
}

.development__title {
	margin: 18px 0 8px;
	font-size: 24px;
	line-height: 1.1;
}

.development__line {
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink-muted);
}

/* Round portrait: a white ring, then a Capri ring and glow. */
.avatar {
	position: relative;
	display: inline-block;
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 6px var(--sky-capri), 0 0 28px 4px rgba(var(--capri-rgb), 0.5);
}

.avatar--lg {
	width: 96px;
	height: 96px;
}

.avatar__img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.avatar__badge {
	position: absolute;
	right: -4px;
	bottom: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 4px 10px -2px rgba(var(--deep-rgb), 0.5);
	color: var(--sky-deep);
}

/* Below 920px the two Experience columns stack, and the photo card is simply
   as tall as its photo and caption. */
@media (max-width: 919px) {
	.experience {
		grid-template-columns: minmax(0, 1fr);
	}

	.portrait {
		max-width: 420px;
	}

	.portrait__photo {
		flex: none;
		min-height: 0;
		aspect-ratio: 4 / 4.6;
	}
}

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

@media (max-width: 860px) {
	.about-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-hero__well {
		min-height: 0;
		aspect-ratio: 4 / 4.4;
	}
}

@media (max-width: 560px) {
	.timeline {
		padding-left: 28px;
	}

	.timeline__item {
		--line-x: -23px;
	}

	.timeline__dot {
		left: -30px;
	}

	.role {
		padding: 20px 20px 22px;
	}

	.role__dates {
		margin-left: 0;
		text-align: left;
	}
}

/* ============================================================
 * 9. Academic Projects: the course page
 * ============================================================ */

/* The course arc: three frosted buttons in the banner. Contact uses the same
   buttons for its order of contact. */
.arc__list {
	display: grid;
	gap: 12px;
	list-style: none;
}

.arc__btn {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 64px;
	padding: 14px 20px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.62);
	box-shadow: inset 0 1px 0 #FFFFFF;
	color: var(--ink);
	text-decoration: none;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.arc__btn:hover {
	border-color: var(--sky-capri);
	box-shadow: inset 0 1px 0 #FFFFFF, 0 0 24px rgba(var(--capri-rgb), 0.5);
}

.arc__btn--solid,
.arc__btn--solid:hover {
	background: #FFFFFF;
	box-shadow: 0 0 0 4px rgba(var(--capri-rgb), 0.22), 0 0 30px rgba(var(--capri-rgb), 0.55);
}

.arc__num {
	font-family: var(--font-mono);
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.04em;
}

.arc__text {
	display: grid;
	gap: 2px;
}

.arc__term {
	font-family: var(--font-heading);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.1;
}

.arc__theme {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ink-muted);
}

/* Course Expectations: a glass panel with its heading inside and three cards.
   Each card has a small drawing of the essay's first page, a numeral beside
   the title, a one-line excerpt and its link at the foot. The cards stay in
   one row; an essay that is opened unfolds beneath the row, across the panel. */
.essays-panel {
	padding: clamp(22px, 3vw, 34px);
}

.essays__heading {
	margin-bottom: 24px;
	font-size: clamp(28px, 3.4vw, 36px);
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.essays {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 18px;
	row-gap: 0;
}

.essay {
	display: contents;
}

.essay__tile {
	grid-row: 1;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 1px 2px rgba(var(--deep-rgb), 0.06), 0 14px 30px -20px rgba(var(--deep-rgb), 0.4);
	overflow: hidden;
}

.js .essay__tile {
	cursor: pointer;
}

.js .essay__tile:hover,
.essay.is-open .essay__tile {
	border-color: var(--sky-capri);
	box-shadow: 0 0 0 3px rgba(var(--capri-rgb), 0.18), 0 0 26px rgba(var(--capri-rgb), 0.4);
}

/* The drawing of a page: the title in a book face, as on the reports, over a
   short rule and two lines standing in for text. */
.essay__thumb {
	position: relative;
	flex: none;
	height: 132px;
	align-items: stretch;
	padding: 14px 16px 0;
	border-radius: 0;
}

.essay__arrow {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 1;
	color: var(--sky-deep);
}

.essay__page {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 16px 22px 0;
}

.essay__page-title {
	font-family: "Times New Roman", Times, serif;
	font-size: 10.5px;
	line-height: 1.25;
	text-align: center;
	color: var(--ink);
}

.essay__page-rule,
.essay__page-line {
	flex: none;
	height: 2px;
	border-radius: 1px;
	background: rgba(15, 23, 36, 0.12);
}

.essay__page-rule {
	width: 36%;
	background: rgba(15, 23, 36, 0.2);
}

.essay__page-line {
	width: 88%;
}

.essay__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: 18px 18px 22px;
}

.essay__headline {
	display: flex;
	align-self: stretch;
	gap: 14px;
	margin-bottom: 14px;
}

.essay__headline .numeral {
	font-size: 44px;
}

.essay__rule {
	flex: none;
	width: 1px;
	background: rgba(var(--deep-rgb), 0.22);
}

.essay__title {
	margin: 0;
	font-size: 21px;
	line-height: 1.16;
}

.essay__excerpt {
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-muted);
}

.essay__body .cta {
	margin-top: auto;
}

/* An opened essay unfolds under the row of tiles and is laid out like an
   opened reflection: a white sheet in the sky well, then a "Show Less" strip. */
.essay__full {
	grid-column: 1 / -1;
	margin-top: 16px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 1px 2px rgba(var(--deep-rgb), 0.06), 0 14px 30px -20px rgba(var(--deep-rgb), 0.4);
	overflow: hidden;
}

.essay__well {
	padding: 18px 18px 0;
	border-radius: 0;
}

.essay__sheet {
	border-radius: 10px 10px 0 0;
}

.essay__strip {
	padding: 14px 24px 16px;
	border-top: 1px solid var(--hairline);
}

.essay:nth-child(1) .essay__full {
	grid-row: 2;
}

.essay:nth-child(2) .essay__full {
	grid-row: 3;
}

.essay:nth-child(3) .essay__full {
	grid-row: 4;
}

/* Without the script every essay is open, so each sits under its own tile. */
html:not(.js) .essays {
	grid-template-columns: minmax(0, 1fr);
}

html:not(.js) .essay__tile,
html:not(.js) .essay .essay__full {
	grid-row: auto;
}

html:not(.js) .essay + .essay .essay__tile {
	margin-top: 16px;
}

/* Long reading text. */
.prose {
	font-size: 16px;
	line-height: 1.75;
}

.prose > p,
.prose > ul,
.prose > ol,
.prose > blockquote {
	max-width: 68ch;
}

.prose > p {
	margin-bottom: 1.1em;
}

/* Wide reading text is justified, with hyphenation (the page is lang="en-US")
   so the word spacing stays even: reflection and essay bodies, the About
   intro and the Bumi description. Headings, labels, short card text, buttons
   and the narrow About photo caption stay left-aligned. */
.prose p,
.about-hero__intro,
.project__text {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.prose ul,
.prose ol {
	padding-left: 1.3em;
	margin-bottom: 1.1em;
}

.prose sup {
	font-size: 0.72em;
	line-height: 0;
}

.prose sup a {
	padding: 0 1px;
	font-family: var(--font-mono);
	font-weight: 500;
	text-underline-offset: 2px;
}

/* Reference lists: a hanging number, then the entry. */
.refs {
	display: grid;
	gap: 10px;
	list-style: none;
	font-size: 13.5px;
	line-height: 1.6;
}

.refs li {
	display: grid;
	grid-template-columns: 2.6em minmax(0, 1fr);
	overflow-wrap: anywhere;
	scroll-margin-top: 24px;
}

.refs__num {
	font-family: var(--font-mono);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink);
}

.refs li:target .refs__text {
	background: rgba(var(--capri-rgb), 0.14);
	box-shadow: 0 0 0 4px rgba(var(--capri-rgb), 0.14);
	border-radius: 2px;
}

.refs--plain li {
	display: block;
	padding-left: 2.2em;
	text-indent: -2.2em;
	color: var(--ink-muted);
}

/* A term: the reflection card beside the grid of reports, in the mockup's
   proportions (381 : 486 with a 30px gutter). The two are the same height:
   the card stretches to the foot of the grid and its link sits at the bottom. */
.term__row {
	display: grid;
	grid-template-columns: minmax(0, 381fr) minmax(0, 486fr);
	gap: 30px;
	align-items: stretch;
}

.reflection {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

/* Opened (or with no script, where everything is open) the reflection takes
   the full width and the reports move below it as a row of compact cards. */
.reflection.is-open,
html:not(.js) .reflection {
	grid-column: 1 / -1;
}

.reflection.is-open + .reports,
html:not(.js) .reflection + .reports,
.reports:only-child {
	grid-column: 1 / -1;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.reflection__well {
	flex: none;
	padding: 22px 22px 0;
}

.reflection__sheet {
	border-radius: 10px 10px 0 0;
}

.keypoints {
	padding: 22px 24px 24px;
}

.keypoints__list {
	display: grid;
	gap: 12px;
	margin-top: 14px;
	list-style: none;
}

.keypoints__list li {
	display: grid;
	grid-template-columns: 2.4em minmax(0, 1fr);
	align-items: baseline;
	font-family: var(--font-heading);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
}

.keypoints__num {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--ink-muted);
}

/* --- An opened reflection ------------------------------------------------
   The whole reflection sits on the white sheet, which the sky well frames with
   a thin border at the top and sides and none at the bottom. */
.reflection.is-open .reflection__well {
	padding: 18px 18px 0;
}

/* The padded inside of an opened sheet. Reflections and essays share it. */
.reading {
	padding: clamp(22px, 3.6vw, 48px);
}

/* Header row: pen tile, label over title, and the counts at the far right. */
.reading__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 26px;
}

.reading__head-text {
	flex: 1 1 auto;
	min-width: 0;
}

.reading__heading {
	margin-top: 3px;
	font-size: clamp(26px, 2.6vw, 30px);
	line-height: 1.05;
}

.reading__heading:focus {
	outline: none;
}

.reading__counts {
	flex: none;
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
}

/* The text runs the full width of the sheet and wraps around the references. */
.reading__flow {
	display: flow-root;
}

.reading__flow > p {
	max-width: none;
}

.refs-panel--float {
	float: right;
	width: 290px;
	margin: 4px 0 22px 38px;
	border-color: rgba(255, 255, 255, 0.9);
	background: linear-gradient(160deg, rgba(221, 243, 253, 0.95), rgba(176, 225, 249, 0.5));
	box-shadow: inset 0 1px 0 #FFFFFF, 0 16px 32px -18px rgba(var(--deep-rgb), 0.55), 0 1px 2px rgba(var(--deep-rgb), 0.10);
}

/* The list sits inside reading text, which indents its lists; this one keeps
   its numbers hanging at the panel's own left edge. */
.refs-panel .refs {
	margin-bottom: 0;
	padding-left: 0;
}

.refs-panel--float .refs li {
	grid-template-columns: 34px minmax(0, 1fr);
}

/* "Show Less" in its own strip under the sheet. */
.reflection.is-open .reflection__body {
	padding: 14px 24px 16px;
	border-top: 1px solid var(--hairline);
}

/* The frosted panel that holds a reference list beside the text. */
.refs-panel {
	padding: 20px 20px 22px;
	border: 1px solid rgba(var(--deep-rgb), 0.14);
	border-radius: 12px;
	background: rgba(221, 243, 253, 0.55);
	box-shadow: inset 0 1px 0 #FFFFFF;
}

.refs-panel .label {
	margin-bottom: 14px;
}

/* Under the sheet: the pen tile, then the label, title and excerpt, and the
   link pushed to the bottom of the card. */
.reflection__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 26px 26px;
}

.reflection__meta {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.reflection__meta .cta {
	margin-top: auto;
}

.reflection__title {
	margin: 4px 0 10px;
	font-size: 26px;
	line-height: 1.08;
}

.reflection__excerpt {
	margin-bottom: 24px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ink-muted);
}

/* Folding: the script opens and closes these. Without it everything is open. */
html:not(.js) [data-expander-toggle] {
	display: none;
}

.js [data-expander]:not(.is-open):not(.is-ready) [data-expander-panel] {
	display: none;
}

.js [data-expander].is-open [data-expander-summary] {
	display: none;
}

/* A panel folded with hidden="until-found" is still found by the browser's
   find-in-page, which then opens it; it must take up no room meanwhile. */
[data-expander-panel][hidden] {
	margin: 0;
	padding: 0;
}

[data-expander-panel][hidden] {
	border: 0;
	box-shadow: none;
}

[data-expander-toggle][aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

/* Reports */
.reports {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-content: start;
	min-width: 0;
	list-style: none;
}

.reports > li {
	display: flex;
}

.report {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
}

.report__well {
	position: relative;
	flex: none;
	height: 132px;
	align-items: stretch;
}

.report__sheet {
	display: block;
}

.report .card-link__arrow {
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
}

.report__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.report__body {
	display: flex;
	flex: 1;
	gap: 14px;
	padding: 18px 18px 20px;
}

.report .numeral {
	font-size: 44px;
}

.report__rule {
	flex: none;
	width: 1px;
	background: rgba(var(--deep-rgb), 0.22);
}

.report__text {
	display: grid;
	gap: 8px;
	align-content: start;
	min-width: 0;
}

.report__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.38;
	overflow-wrap: anywhere;
}

.report__note {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

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

	.essay__tile,
	.essay .essay__full {
		grid-row: auto;
	}

	.essay + .essay .essay__tile {
		margin-top: 16px;
	}
}

/* On tablets and phones the references follow the text instead of floating
   beside it, in opened reflections and opened essays alike. */
@media (max-width: 1024px) {
	.reading__flow {
		display: flex;
		flex-direction: column;
	}

	.refs-panel--float {
		float: none;
		order: 2;
		width: auto;
		margin: 10px 0 0;
	}
}

@media (max-width: 700px) {
	.reading__head {
		flex-wrap: wrap;
	}

	.reading__counts {
		flex-basis: 100%;
		margin-left: 0;
		text-align: left;
		white-space: normal;
	}
}

@media (max-width: 919px) {
	.term__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.reports,
	.reflection.is-open + .reports,
	html:not(.js) .reflection + .reports,
	.reports:only-child {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.reports,
	.reflection.is-open + .reports,
	html:not(.js) .reflection + .reports,
	.reports:only-child {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px) {
	.reflection__well,
	.reflection.is-open .reflection__well {
		padding: 14px 14px 0;
	}

	.reflection__body {
		padding: 20px 18px 22px;
	}
}

/* ============================================================
 * 10. Contact
 * ============================================================ */
.linkedin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px 28px;
	padding: 28px 30px;
}

.linkedin__body {
	flex: 1 1 260px;
}

.linkedin__name {
	margin: 4px 0 2px;
	font-size: 30px;
	line-height: 1.05;
}

.linkedin__role {
	color: var(--ink-muted);
}

/* The form beside the Email and Resume cards, as in the mockup. The two cards
   split the form's height equally. */
.contact {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 22px;
	align-items: stretch;
}

.contact__form {
	padding: clamp(22px, 3.4vw, 36px);
}

.contact__side {
	display: grid;
	grid-auto-rows: 1fr;
	gap: 18px;
}

/* A side card reads top to bottom: icon tile, label, the main line, a note. */
.side-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 26px 26px 28px;
}

.side-card .icon-tile {
	margin-bottom: 18px;
}

.side-card__main {
	margin: 8px 0 8px;
	font-family: var(--font-heading);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.side-card__line {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ink-muted);
}

.side-card .label + .side-card__line {
	margin-top: 8px;
}

/* Full Name and Email Address share a row. */
.form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 16px;
	align-items: start;
}

.form {
	display: grid;
	gap: 20px;
}

.field {
	display: grid;
	gap: 8px;
}

.field__label {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

.field__check-label {
	padding-top: 2px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink-muted);
}

.field__req {
	font-weight: 400;
	color: var(--ink-muted);
}

.field__input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(var(--deep-rgb), 0.25);
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.8);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
	-webkit-appearance: none;
	appearance: none;
}

.field__input:hover {
	border-color: rgba(var(--deep-rgb), 0.45);
}

.field__input:focus,
.field__input:focus-visible {
	outline: none;
	border-color: var(--sky-deep);
	background-color: #FFFFFF;
	box-shadow: 0 0 0 4px rgba(var(--capri-rgb), 0.20), 0 0 22px rgba(var(--capri-rgb), 0.28);
}

.field__input--area {
	min-height: 160px;
	resize: vertical;
}

.field__input--select {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233190C5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.field--check {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 8px 12px;
}

.field__check {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--ink);
}

.field__check:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(var(--capri-rgb), 0.35);
	border-radius: 4px;
}

.field--check .field__error {
	grid-column: 1 / -1;
}

.field__input[aria-invalid="true"] {
	border-color: var(--alert);
}

.field__error {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--alert);
}

.field--trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	padding-top: 6px;
}

.form__note {
	margin: 0;
	font-size: 14px;
	color: var(--ink-muted);
}

.notice {
	display: flex;
	gap: 16px;
	padding: 18px 20px;
	border-radius: 12px;
}

.notice--error {
	border: 1px solid var(--alert);
	background: #FFFFFF;
	font-weight: 500;
	color: var(--alert);
}

.notice--ok {
	border: 1px solid rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.7);
	box-shadow: inset 0 1px 0 #FFFFFF, 0 0 22px rgba(var(--capri-rgb), 0.3);
}

.notice__title {
	margin-bottom: 6px;
	font-size: 24px;
}

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

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

/* ============================================================
 * 11. Fallback templates
 * ============================================================ */
.plain {
	padding: clamp(24px, 4vw, 48px);
}

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

.plain-head {
	margin-bottom: 24px;
}

.plain-head .label {
	margin-bottom: 10px;
}

.plain .page-title,
.plain-head .page-title {
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1.02;
}

.plain--center p {
	margin: 16px auto 0;
	max-width: 46ch;
	color: var(--ink-muted);
}

.plain-list {
	display: grid;
	gap: 16px;
	list-style: none;
}

.plain-list__item,
.plain-empty {
	padding: 24px 26px;
}

.plain-list__title {
	margin: 6px 0 8px;
	font-size: 26px;
	line-height: 1.1;
}

.plain-list__title a {
	text-decoration-color: transparent;
}

.plain-list__title a:hover {
	text-decoration-color: var(--sky-maya);
}

.plain-list__excerpt {
	color: var(--ink-muted);
}

.nav-links {
	display: flex;
	gap: 14px;
	margin-top: 24px;
	font-family: var(--font-mono);
	font-size: 13px;
}

/* ============================================================
 * 12. Motion
 *
 * Every transition, animation and moving transform lives in this block, so a
 * visitor who asks for reduced motion gets none of it.
 * ============================================================ */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	a,
	.cta {
		transition: text-decoration-color var(--fast) var(--ease);
	}

	.btn,
	.round-btn,
	.arc__btn,
	.nav-toggle {
		transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
	}

	.btn:hover,
	.round-btn:hover {
		transform: translateY(-2px);
	}

	.card-link {
		transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease), outline-color var(--med) var(--ease);
	}

	.card-link:hover {
		transform: translateY(-3px);
	}

	.card-link__arrow {
		transition: transform var(--med) var(--ease);
	}

	.card-link:hover .card-link__arrow {
		transform: translate(2px, -2px);
	}

	.field__input {
		transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease);
	}

	[data-expander-toggle] .icon {
		transition: transform var(--med) var(--ease);
	}

	/* Sections below the first screen fade up once as they arrive. The script
	   only marks a section .reveal when it is about to do this. */
	.reveal {
		opacity: 0;
		transform: translateY(12px);
	}

	.reveal.is-in {
		opacity: 1;
		transform: none;
		transition: opacity 400ms var(--ease), transform 400ms var(--ease);
	}

	/* Skill deck */
	.is-deck .deck__card {
		transition: transform 460ms var(--ease), opacity 460ms var(--ease);
	}

	.is-deck.is-entering .deck__card {
		transition: transform 640ms var(--ease), opacity 640ms var(--ease);
		transition-delay: calc(var(--i) * 70ms);
	}

	.is-deck .deck__flip {
		transition: transform 500ms var(--ease);
	}
}