
:root {
  --ink: #17202a;
  --muted: #5d6875;
  --paper: #ffffff;
  --soft: #f5f7fa;
  --line: #dfe5eb;
  --accent: #7a1830;
  --accent-2: #284b63;
  --accent-soft: #f8eef1;
  --max: 1180px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(20, 31, 43, .07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.65; }
a { color:var(--accent-2); text-decoration-thickness:.08em; text-underline-offset:.18em; }
a:hover { color:var(--accent); }
img { max-width:100%; }
button, input, select { font:inherit; }
.skip-link { position:absolute; left:-9999px; top:auto; }
.skip-link:focus { left:1rem; top:1rem; z-index:1000; background:#fff; padding:.7rem 1rem; border:2px solid var(--accent); }
.site-header { position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(223,229,235,.92); background:rgba(255,255,255,.95); backdrop-filter:blur(10px); }
.nav-wrap { max-width:var(--max); margin:auto; padding:.72rem 1.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.7rem; color:var(--ink); text-decoration:none; font-family: Georgia, "Times New Roman", serif; font-size:1.08rem; font-weight:700; white-space:nowrap; }
.brand-mark { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:white; font-family:Inter,sans-serif; font-size:.78rem; letter-spacing:.05em; }
.nav-toggle { display:none; border:1px solid var(--line); background:white; border-radius:8px; padding:.45rem .65rem; }
.site-nav { display:flex; align-items:center; gap:.2rem; flex-wrap:wrap; justify-content:flex-end; }
.site-nav a { text-decoration:none; color:#33404c; padding:.45rem .58rem; border-radius:7px; font-size:.9rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--accent); background:var(--accent-soft); }
.hero { background:linear-gradient(125deg, #fff 0%, #fbfbfc 55%, #f5eef1 100%); border-bottom:1px solid var(--line); }
.hero-inner { max-width:var(--max); margin:auto; padding:4.7rem 1.2rem 3.7rem; display:grid; grid-template-columns:minmax(0,1.65fr) minmax(270px,.75fr); gap:3rem; align-items:start; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:800; color:var(--accent); }
h1,h2,h3 { font-family: Georgia, "Times New Roman", serif; line-height:1.18; color:#16202a; }
h1 { font-size:clamp(2.3rem,5vw,4.5rem); margin:.45rem 0 1rem; letter-spacing:-.035em; }
h2 { font-size:clamp(1.65rem,3vw,2.35rem); margin:0 0 1rem; }
h3 { font-size:1.25rem; margin:.2rem 0 .45rem; }
.hero-lead { font-size:1.18rem; color:#3f4b57; max-width:780px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius:8px; padding:.72rem 1rem; text-decoration:none; border:1px solid var(--line); font-weight:700; font-size:.92rem; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:white; }
.btn-primary:hover { color:white; filter:brightness(.93); }
.btn-secondary { background:white; color:var(--ink); }
.profile-card { background:#fff; border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:var(--radius); padding:1.25rem 1.3rem; box-shadow:var(--shadow); }
.profile-monogram { width:76px; height:76px; border-radius:50%; background:var(--soft); border:1px solid var(--line); display:grid; place-items:center; font-family:Georgia,serif; font-size:1.5rem; color:var(--accent); margin-bottom:1rem; }
.profile-card p { margin:.35rem 0; color:var(--muted); }
.socials { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }
.socials a { text-decoration:none; border:1px solid var(--line); background:var(--soft); padding:.3rem .55rem; border-radius:999px; font-size:.78rem; }
.container { max-width:var(--max); margin:auto; padding:3.2rem 1.2rem; }
.section { margin:0 0 3.6rem; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; border-bottom:1px solid var(--line); padding-bottom:.75rem; }
.section-head p { max-width:680px; color:var(--muted); margin:0; }
.grid { display:grid; gap:1rem; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card { border:1px solid var(--line); border-radius:var(--radius); padding:1.15rem 1.2rem; background:white; box-shadow:0 5px 18px rgba(20,31,43,.035); }
.card p { color:var(--muted); margin:.45rem 0; }
.card .meta { font-size:.84rem; color:var(--muted); }
.card .kicker { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:800; }
.tag-list { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.7rem; }
.tag { display:inline-block; background:var(--soft); border:1px solid var(--line); color:#4d5965; border-radius:999px; padding:.18rem .5rem; font-size:.74rem; }
.timeline { position:relative; margin-left:.3rem; }
.timeline::before { content:""; position:absolute; top:.3rem; bottom:.3rem; left:7.2rem; width:1px; background:var(--line); }
.timeline-item { display:grid; grid-template-columns:6.2rem 1fr; gap:1.5rem; padding:0 0 1.5rem; position:relative; }
.timeline-date { font-size:.83rem; color:var(--muted); text-align:right; padding-top:.17rem; }
.timeline-content { position:relative; padding-left:1rem; }
.timeline-content::before { content:""; position:absolute; left:-.39rem; top:.43rem; width:.65rem; height:.65rem; background:var(--accent); border:3px solid white; box-shadow:0 0 0 1px var(--line); border-radius:50%; }
.timeline-content h3 { margin:0 0 .35rem; font-size:1.1rem; }
.timeline-content p { margin:.25rem 0; color:var(--muted); }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin:1.5rem 0 0; }
.metric { background:rgba(255,255,255,.75); border:1px solid var(--line); border-radius:10px; padding:.8rem; }
.metric strong { display:block; font-family:Georgia,serif; color:var(--accent); }
.page-hero { border-bottom:1px solid var(--line); background:var(--soft); }
.page-hero .container { padding-top:2.7rem; padding-bottom:2.4rem; }
.page-hero h1 { font-size:clamp(2rem,4vw,3.4rem); margin:.2rem 0 .6rem; }
.page-hero p { max-width:800px; margin:0; color:var(--muted); font-size:1.05rem; }
.filters { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:0 0 1.2rem; padding:.9rem; border:1px solid var(--line); background:var(--soft); border-radius:10px; }
.filters input, .filters select { border:1px solid #cfd6dd; background:white; border-radius:7px; padding:.55rem .65rem; min-width:160px; }
.filters input { flex:1; min-width:240px; }
.pub-list { display:grid; gap:.75rem; }
.pub { border-bottom:1px solid var(--line); padding:0 0 1rem; }
.pub:last-child { border-bottom:0; }
.pub-title { font-family:Georgia,serif; font-weight:700; font-size:1.08rem; color:var(--ink); }
.pub-authors { color:#45515d; font-size:.94rem; margin:.2rem 0; }
.pub-venue { color:var(--muted); font-size:.9rem; }
.pub-links { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.45rem; }
.pub-links a { font-size:.78rem; text-decoration:none; border-bottom:1px dotted currentColor; }
.year-heading { margin:2rem 0 .8rem; font-size:1.45rem; color:var(--accent); }
.degree-group { margin-bottom:2.3rem; }
.student-row { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(0,2fr) minmax(100px,.45fr); gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.student-row:last-child { border-bottom:0; }
.student-name { font-weight:800; }
.empty-note { padding:1rem; border:1px dashed #c9d1d8; background:var(--soft); color:var(--muted); border-radius:10px; }
.split-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 2rem; }
.plain-list { margin:.4rem 0 0; padding-left:1.15rem; }
.plain-list li { margin:.35rem 0; }
.notice { padding:1rem 1.1rem; background:#fff8e8; border:1px solid #ead8a7; border-radius:10px; color:#5e4d23; }
.site-footer { border-top:1px solid var(--line); background:#101820; color:#dce4eb; }
.footer-inner { max-width:var(--max); margin:auto; padding:2rem 1.2rem; display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; }
.site-footer a { color:#fff; }
.site-footer p { color:#b7c1c9; margin:.35rem 0; }
.footer-links { display:flex; flex-wrap:wrap; gap:.65rem 1rem; align-content:start; }
.data-status { font-size:.78rem; color:var(--muted); margin-top:1rem; }
code { background:var(--soft); border:1px solid var(--line); border-radius:5px; padding:.12rem .3rem; }
@media (max-width:900px){
  .hero-inner { grid-template-columns:1fr; padding-top:3.2rem; }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .nav-toggle { display:block; }
  .site-nav { display:none; position:absolute; top:61px; left:0; right:0; background:white; border-bottom:1px solid var(--line); padding:.65rem 1rem 1rem; box-shadow:var(--shadow); }
  .site-nav.open { display:grid; grid-template-columns:repeat(2,1fr); }
  .site-nav a { padding:.6rem; }
}
@media (max-width:650px){
  .grid-2,.grid-3,.split-list { grid-template-columns:1fr; }
  .hero-inner { gap:1.5rem; }
  .timeline::before { left:.34rem; }
  .timeline-item { grid-template-columns:1fr; gap:.2rem; padding-left:1.2rem; }
  .timeline-date { text-align:left; padding-left:.55rem; font-weight:700; }
  .timeline-content { padding-left:.55rem; }
  .timeline-content::before { left:-1.18rem; }
  .student-row { grid-template-columns:1fr; gap:.25rem; }
  .footer-inner { grid-template-columns:1fr; }
}
@media print {
  .site-header,.hero-actions,.filters,.site-footer,.nav-toggle { display:none!important; }
  .container,.hero-inner { max-width:none; padding:1rem 0; }
  body { font-size:11pt; }
  .card { box-shadow:none; break-inside:avoid; }
  a { color:black; text-decoration:none; }
}

/* Student filtering */
.student-keywords { margin-top:.5rem; }
.filters #student-degree,
.filters #student-year,
.filters #student-keyword { min-width:150px; }
@media (max-width:650px){
  .filters #student-search,
  .filters #student-degree,
  .filters #student-year,
  .filters #student-keyword { width:100%; min-width:0; }
}
