:root{
  /* Light — University of Maryland red & gold, warm and inviting (default) */
  --bg:#ffffff;
  --surface:#ffffff;
  --text:#232021;
  --muted:#6d6055;
  --border:rgba(35,32,33,.12);
  --shadow: 0 18px 50px rgba(35,32,33,.09);
  --link:#c41230;
  --accent:#e21833;
  --accent-2:#ffd520;
  --accent-soft: rgba(226,24,51,.09);
  --glow: rgba(255,213,32,.16);
  --max: 920px;
  --radius: 18px;
  /* Always render light, regardless of the visitor's system setting */
  color-scheme: light;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1000px 640px at 12% -8%, var(--glow), transparent 60%),
    radial-gradient(900px 560px at 100% 0%, var(--accent-soft), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3{
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  letter-spacing:-.01em;
  line-height:1.2;
}

a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width: var(--max);
  margin:0 auto;
  padding: 34px 20px 72px;
}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 10px 0 18px;
  border-bottom:1px solid var(--border);
}

.brand{ display:flex; align-items:center; gap:14px; }
.brand .title{
  font-family: "Iowan Old Style", Georgia, ui-serif, serif;
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:.1px;
}
.brand .subtitle{ font-size:.92rem; color:var(--muted); margin-top:2px; }

.nav{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.nav a{
  display:inline-block;
  padding: 8px 14px;
  border:1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.nav a:hover{
  text-decoration:none;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.nav a[aria-current="page"]{
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--link);
  font-weight:600;
}

main{ margin-top: 22px; }

.hero{
  position:relative;
  padding: 30px 30px 30px 34px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:5px;
  background: linear-gradient(var(--accent), var(--accent-2));
}
.hero h1{
  margin:0 0 10px;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
}
.hero p{ margin: 10px 0 0; color: var(--text); font-size: 1.05rem; max-width: 64ch; }

.card{
  margin-top: 18px;
  padding: 24px 26px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow);
}

.footer{
  margin-top: 28px;
  color: var(--muted);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  padding-top: 18px;
  border-top:1px solid var(--border);
}
.small{ font-size:.9rem; color: var(--muted); }

.btnrow{ margin-top: 20px; display:flex; gap:10px; flex-wrap:wrap; }
.btn{
  display:inline-block;
  padding: 10px 16px;
  border:1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-weight:500;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover{
  text-decoration:none;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.cv h2{
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-size: 1.3rem;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  display:inline-block;
}
.cv h3{ margin: 20px 0 8px; font-size: 1.05rem; }
.cv ul{ margin: 12px 0 0; padding-left: 20px; }
.cv li{ margin: 8px 0; }
.cv .item{ margin: 10px 0; }
.cv .meta{ color: var(--muted); font-size: .95rem; }

@media (max-width: 560px){
  .header{ flex-direction:column; align-items:flex-start; gap:12px; }
  .nav{ justify-content:flex-start; }
}