/* ═══════════════════════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
	--ink:       #18181b;
	--ink-soft:  #b7a57a;
	--paper:     #faf8f4;
	--paper-2:   #f0ece4;
	--accent:    #7c3d12;
	--accent-2:  #b45309;
	--rule:      #32006e;        /* Husky Purple — section dividers */
	--rule-soft: rgba(50,0,110,.18); /* subtle version for minor rules */
	--white:     #ffffff;
	--nav-h:     62px;
	--serif:     'Cormorant Garamond', Georgia, serif;
	--sans:      'Outfit', sans-serif;
	--mono:      'JetBrains Mono', monospace;
	--radius:    6px;
	--shadow:    0 2px 16px rgba(50,0,110,.07);
	--shadow-lg: 0 8px 40px rgba(50,0,110,.12);
	/* UW palette — for occasional use */
	--uw-purple:  #32006e;
	--uw-spirit:  #4b2e83;
	--uw-gold:    #b7a57a;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE TOKENS
═══════════════════════════════════════════════════════════════ */
html.dark {
	--ink:       #e8e4de;
	--ink-soft:  #b7a57a;
	--paper:     #18181b;
	--paper-2:   #222228;
	--accent:    #e8915a;
	--accent-2:  #f0a96e;
	--rule:      #32006e;        /* Husky Purple — section dividers in dark mode */
	--rule-soft: rgba(50,0,110,.35);
	--white:     #26262e;
	--shadow:    0 2px 16px rgba(0,0,0,.35);
	--shadow-lg: 0 8px 40px rgba(0,0,0,.5);
}
html.dark #nav {
	box-shadow: 0 1px 8px rgba(0,0,0,.4);
	border-bottom-color: rgba(50,0,110,.5);
}
html.dark .nav-links > li > a.active,
html.dark .nav-links > li > button.active {
	background: #2e2518;
}
html.dark .nav-links > li > a:hover,
html.dark .nav-links > li > button:hover {
	background: #2e2518;
}
html.dark .research-card:hover,
html.dark .topic-card:hover {
	box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
html.dark #solver-form {
	background: #222228;
}
html.dark select,
html.dark input[type="number"],
html.dark input[type="text"] {
	background: #2a2a32;
	color: var(--ink);
	border-color: rgba(50,0,110,.35);
}
html.dark .subparams {
	background: #1e1e24;
}
html.dark .template-notice {
	background: #2a2210;
	border-color: #7a5c20;
	color: #d4a855;
}
html.dark .template-notice strong { color: #e8b86d; }

/* Nav bottom border — gold tint in dark mode */
html.dark #nav { border-bottom: 1px solid rgba(50,0,110,.5); }

/* ── Dark mode toggle button ── */
#dark-toggle {
	background: none;
	border: 1px solid var(--rule-soft);
	border-radius: 20px;
	padding: .3rem .65rem;
	cursor: pointer;
	font-size: .85rem;
	color: var(--ink-soft);
	margin-left: .5rem;
	transition: background .2s, border-color .2s, color .2s;
	display: flex;
	align-items: center;
	gap: .35rem;
	white-space: nowrap;
	flex-shrink: 0;
}
#dark-toggle:hover {
	background: var(--paper-2);
	border-color: var(--accent);
	color: var(--accent);
}
#dark-toggle .toggle-icon { font-size: 1rem; line-height: 1; }

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.75;
	min-height: 100vh;
}
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: 1.9rem; margin-bottom: 1rem; }
h3 { font-size: 1.3rem; margin-bottom: .5rem; }
p  { margin-bottom: 1rem; color: var(--ink); }
p:last-child { margin-bottom: 0; }
a  { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent-2); }
ul { padding-left: 1.4rem; }
li { margin-bottom: .35rem; }
img { max-width: 100%; display: block; }
strong { font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════════ */
#nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--white);
	border-bottom: 1px solid rgba(50,0,110,.2);  /* subtle purple underline */
	min-height: var(--nav-h);
	display: flex;
	align-items: center;
	box-shadow: 0 1px 8px rgba(50,0,110,.06);
	overflow: visible;
}
.nav-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 2rem;
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: .5rem;
	overflow: visible;
}
.nav-brand {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: .01em;
	margin-right: auto;
	white-space: nowrap;
}
.nav-brand:hover { color: var(--accent); }
.nav-links {
	display: flex;
	align-items: center;
	gap: .15rem;
	list-style: none;
	flex-shrink: 0;
}
.nav-links li { position: relative; }
.nav-links > li > a,
.nav-links > li > button {
	display: block;
	padding: .45rem .85rem;
	font-family: var(--sans);
	font-size: .88rem;
	font-weight: 400;
	color: var(--ink-soft);
	background: none;
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	transition: color .15s, background .15s;
	white-space: nowrap;
	letter-spacing: .02em;
}
.nav-links > li > a:hover,
.nav-links > li > button:hover,
.nav-links > li > a.active,
.nav-links > li > button.active {
	color: var(--accent);
	background: #fdf4ec;
}
.nav-links > li > button::after {
	content: ' ▾';
	font-size: .7rem;
	opacity: .6;
}
.dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--white);
	border: 1px solid var(--rule-soft);
	border-top: 2px solid var(--uw-spirit);  /* spirit purple top accent */
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	min-width: 220px;
	overflow: hidden;
	display: none;
	flex-direction: column;
}
.dropdown.open { display: flex; }
.dropdown a {
	padding: .65rem 1.1rem;
	font-size: .88rem;
	color: var(--ink);
	border-bottom: 1px solid var(--rule-soft);
	transition: background .15s;
}
.dropdown a:last-child { border-bottom: none; }
.dropdown a:hover { background: var(--paper-2); color: var(--accent); }
.dropdown a.active { color: var(--accent); font-weight: 500; background: #fdf4ec; }

/* ═══════════════════════════════════════════════════════════════
   PAGE LAYOUT
═══════════════════════════════════════════════════════════════ */
.page-inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 3.5rem 2rem 6rem;
}
.page-header {
	margin-bottom: 3rem;
	padding-bottom: 1.5rem;
	border-bottom: 2px solid var(--rule);  /* main title divider — full rule color */
}
.page-header h1 { color: var(--ink); }
.page-header .subtitle {
	margin-top: .5rem;
	font-family: var(--serif);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--ink-soft);
}
.section-rule {
	margin: 2.5rem 0;
	border: none;
	border-top: 1px solid var(--rule-soft);  /* soft rule for inner sections */
}
.back-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .88rem;
	color: var(--ink-soft);
	margin-bottom: 2rem;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	transition: color .2s;
	text-decoration: none;
}
.back-btn:hover { color: var(--accent); }
.back-btn::before { content: '←'; font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════
   CARDS (shared between home + research)
═══════════════════════════════════════════════════════════════ */
.research-cards, .research-topics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin-top: 1.5rem;
}
.research-card, .topic-card {
	background: var(--white);
	border: 1px solid var(--rule-soft);
	border-top: 2px solid var(--uw-spirit);  /* spirit purple top bar on cards */
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	cursor: pointer;
	transition: transform .2s, box-shadow .2s;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
}
.research-card:hover, .topic-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}

/* ── Card image: fixed height, never overlaps text ── */
.research-card-img, .topic-card-img {
	width: 100%;
	height: 160px;
	flex-shrink: 0;         /* never compress the image area */
	overflow: hidden;       /* clip the image, don't resize the card */
	background: var(--paper-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.8rem;
}
.research-card-img img, .topic-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;      /* fill the fixed box, crop edges if needed */
	display: block;
}
.topic-card-img { height: 180px; font-size: 3rem; }

.research-card-body, .topic-card-body {
	padding: 1rem 1.1rem 1.2rem;
	flex: 1;                /* body grows to fill remaining card height */
}
.research-card-body h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.topic-card-body h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.research-card-body p, .topic-card-body p { font-size: .88rem; color: var(--ink-soft); margin: 0; }
.topic-tag {
	display: inline-block;
	font-family: var(--mono);
	font-size: .72rem;
	padding: .15rem .55rem;
	border-radius: 20px;
	background: #fdf4ec;
	color: var(--accent);
	border: 1px solid #f0d9c4;
	margin-bottom: .6rem;
}

/* ═══════════════════════════════════════════════════════════════
   HOME
═══════════════════════════════════════════════════════════════ */
.home-hero {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 3rem;
	align-items: start;
	margin-bottom: 3.5rem;
}
.home-hero-text .title-line {
	font-family: var(--serif);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--ink-soft);
	margin-bottom: 1.5rem;
	margin-top: .5rem;
}
.home-photo-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .9rem;
	flex-shrink: 0;
}
.home-photo {
	width: 180px;
	height: 220px;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	flex-shrink: 0;
}
.home-contact {
	width: 180px;
	font-family: var(--mono);
	font-size: .72rem;
	color: var(--ink-soft);
	line-height: 1.7;
	text-align: center;
	border-top: 1px solid var(--rule-soft);
	padding-top: .75rem;
}
.home-contact a {
	color: var(--accent);
	font-size: .72rem;
}
.home-contact a:hover { color: var(--accent-2); }
.pub-list { list-style: none; padding: 0; }
.pub-list li {
	padding: 1rem 0;
	border-bottom: 1px solid var(--rule-soft);
	font-size: .95rem;
}
.pub-list li:last-child { border-bottom: none; }
.pub-year {
	font-family: var(--mono);
	font-size: .75rem;
	color: var(--accent);
	margin-bottom: .2rem;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════════════ */
.about-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 3rem;
	align-items: start;
}
.cat-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem;
	margin-top: 1rem;
}
.cat-gallery img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.cat-label {
	text-align: center;
	font-family: var(--serif);
	font-style: italic;
	font-size: .9rem;
	color: var(--ink-soft);
	margin-top: .3rem;
}
.info-block {
	background: var(--white);
	border: 1px solid var(--rule-soft);
	border-left: 3px solid var(--uw-spirit);  /* spirit purple left accent */
	border-radius: var(--radius);
	padding: 1.25rem 1.4rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--shadow);
}
.info-block h3 {
	font-size: 1rem;
	font-family: var(--mono);
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: .75rem;
	font-weight: 500;
}
.info-block p, .info-block li { font-size: .93rem; color: var(--ink-soft); }
.timeline { list-style: none; padding: 0; }
.timeline li {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: .75rem;
	padding: .65rem 0;
	border-bottom: 1px solid var(--rule-soft);
	font-size: .93rem;
}
.timeline li:last-child { border-bottom: none; }
.tl-year {
	font-family: var(--mono);
	font-size: .8rem;
	color: var(--accent);
	padding-top: .1rem;
}

/* ═══════════════════════════════════════════════════════════════
   CV
═══════════════════════════════════════════════════════════════ */
.cv-embed-wrap {
	width: 100%;
	height: 82vh;
	border: 1px solid var(--rule-soft);
	border-top: 2px solid var(--uw-spirit);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}
.cv-embed-wrap iframe { width: 100%; height: 100%; border: none; }

/* ═══════════════════════════════════════════════════════════════
   SOLVER FORM
═══════════════════════════════════════════════════════════════ */
#solver-form {
	background: var(--white);
	border: 1px solid var(--rule-soft);
	border-top: 2px solid var(--uw-spirit);
	border-radius: var(--radius);
	padding: 2rem 2.2rem;
	margin-top: 1.5rem;
	box-shadow: var(--shadow);
}
.form-section {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--rule-soft);
}
.form-section:last-of-type { border-bottom: none; }
.form-section-title {
	font-family: var(--mono);
	font-size: .78rem;
	font-weight: 500;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: .09em;
	margin-bottom: 1rem;
}
label { display: block; font-size: .97rem; margin-bottom: .25rem; }
.field-row { margin-bottom: 1.1rem; }
select, input[type="number"], input[type="text"] {
	font-family: var(--mono);
	font-size: .88rem;
	padding: .45rem .7rem;
	border: 1px solid var(--rule-soft);
	border-radius: 4px;
	background: var(--paper);
	color: var(--ink);
	width: 100%;
	max-width: 380px;
	transition: border-color .2s, box-shadow .2s;
}
select:focus, input:focus {
	outline: none;
	border-color: var(--uw-spirit);
	box-shadow: 0 0 0 2px rgba(75,46,131,.12);
}
.subparams {
	margin-top: .8rem;
	padding: 1rem 1.2rem;
	background: var(--paper);
	border-left: 3px solid var(--uw-spirit);
	border-radius: 0 4px 4px 0;
	display: none;
}
.subparams .field-row { margin-bottom: .8rem; }
.subparams label { font-size: .93rem; }
.subparams input { max-width: 200px; }
.hint { font-size: .78rem; color: #888; font-family: var(--mono); margin-top: .2rem; }
.direction-pair { display: flex; gap: 1rem; align-items: flex-start; }
.direction-pair .field-row { flex: 1; }
.radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: .4rem;
}
.radio-group label {
	display: flex;
	align-items: center;
	gap: .4rem;
	cursor: pointer;
	font-size: .95rem;
	padding: .35rem .9rem;
	border: 1px solid var(--rule-soft);
	border-radius: 4px;
	transition: background .15s;
}
.radio-group label:hover { background: var(--paper-2); }
.radio-group input[type="radio"] { width: auto; max-width: none; accent-color: var(--uw-spirit); }
#submit-btn {
	margin-top: 1rem;
	background: var(--accent);
	color: #fff;
	border: none;
	font-family: var(--mono);
	font-size: .88rem;
	padding: .65rem 2.2rem;
	border-radius: 4px;
	cursor: pointer;
	letter-spacing: .06em;
	transition: background .2s, transform .1s;
}
#submit-btn:hover  { background: #5c2d0a; }
#submit-btn:active { transform: scale(.97); }
#submit-btn:disabled { background: #bbb; cursor: not-allowed; }
#status-msg {
	margin-top: .8rem;
	font-family: var(--mono);
	font-size: .83rem;
	color: #4a7c59;
	min-height: 1.2em;
}
.field-error {
	color: #a00;
	font-family: var(--mono);
	font-size: .78rem;
	margin-top: .25rem;
}
.field-warning {
	color: #b45309;
	font-family: var(--mono);
	font-size: .78rem;
	margin-top: .25rem;
}

/* ═══════════════════════════════════════════════════════════════
   TEMPLATE NOTICE
═══════════════════════════════════════════════════════════════ */
.template-notice {
	background: #fffbeb;
	border: 1px dashed #f59e0b;
	border-radius: var(--radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 2rem;
	font-size: .92rem;
	color: #92400e;
}
.template-notice strong { color: #b45309; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
	.home-hero { grid-template-columns: 1fr; }
	.home-photo { width: 130px; height: 160px; }
	.about-grid { grid-template-columns: 1fr; }
	.nav-links > li > a,
	.nav-links > li > button { padding: .4rem .6rem; font-size: .82rem; }
}