/* ---------------------------------------------------------------
   Personal academic site — shared stylesheet
   Edit the variables below to change colors/spacing site-wide.
   --------------------------------------------------------------- */

:root {
  --accent:      #8a1b2e;   /* deep UGA-ish red, used sparingly */
  --accent-soft: #f3e8ea;
  --text:        #1b1b1d;
  --muted:       #5f6368;
  --rule:        #e3e3e6;
  --bg:          #ffffff;
  --bg-soft:     #fafafa;
  --max:         44rem;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  color-scheme: light;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dark is opt-in via the header toggle, which stores the choice in localStorage.
   Light stays the default even when the visitor's OS is set to dark. To follow the
   OS instead, wrap this block in @media (prefers-color-scheme: dark). */
:root[data-theme="dark"] {
  --accent:      #e8899a;
  --accent-soft: #2a1c20;
  --text:        #e8e8ea;
  --muted:       #a0a0a8;
  --rule:        #2e2e33;
  --bg:          #131315;
  --bg-soft:     #1a1a1d;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}

/* ---------- header / nav ---------- */

header.site {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3rem;
}

header.site .wrap {
  padding-top: 2rem;
  padding-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.brand {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

/* Nav + theme toggle travel together on the right, with or without a brand. */
.head-right {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-left: auto;
}

.theme-toggle {
  background: none;
  border: 0;
  padding: 0.2rem;
  margin-bottom: 0.55rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
  border-radius: 3px;
  align-self: center;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

a:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

nav.site {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 0.9rem;
}

nav.site a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  padding-bottom: 0.9rem;
  margin-bottom: -0.95rem;
  border-bottom: 2px solid transparent;
}

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

nav.site a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ---------- typography ---------- */

h1 {
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 0.35rem;
  letter-spacing: -0.01em;
}

h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 3rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 2rem 0 0.35rem;
  line-height: 1.4;
}

p { margin: 0 0 1.1rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.lede { font-size: 1.05rem; }

.subtitle {
  color: var(--muted);
  font-size: 1.02rem;
  margin: 0 0 1.5rem;
}

.muted { color: var(--muted); }
.small { font-size: 0.9rem; }

/* ---------- home intro block ---------- */

.intro {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}

.intro .text { flex: 1 1 20rem; min-width: 0; }

.headshot {
  flex: 0 0 auto;
  width: 200px;
  height: 247px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
}

@media (max-width: 600px) {
  .intro { flex-direction: column-reverse; gap: 1.5rem; }
  .headshot { width: 170px; height: 210px; }
  h1 { font-size: 1.75rem; }
  body { font-size: 16px; }
}

/* ---------- contact / link rows ---------- */

ul.plain { list-style: none; padding: 0; margin: 0 0 1.1rem; }
ul.plain li { margin-bottom: 0.35rem; }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.btn {
  display: inline-block;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.4rem 0.9rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
  background: var(--bg-soft);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- papers ---------- */

.paper { margin-bottom: 2.25rem; }

.paper .title { font-weight: 600; }

.paper .meta {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0.15rem 0 0.6rem;
}

.tag {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  vertical-align: 0.15em;
  margin-right: 0.4rem;
}

details.abstract summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.93rem;
  list-style: none;
  display: inline-block;
  user-select: none;
}
details.abstract summary::-webkit-details-marker { display: none; }
details.abstract summary::before { content: "\25B8\00a0"; display: inline-block; transition: transform 0.15s; }
details.abstract[open] summary::before { content: "\25BE\00a0"; }
details.abstract summary:hover { text-decoration: underline; }

details.abstract p {
  font-size: 0.95rem;
  color: var(--muted);
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
  margin: 0.75rem 0 0;
}

/* ---------- teaching ---------- */

.course { margin-bottom: 1.4rem; }
.course .role {
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------- footer ---------- */

footer.site {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding-top: 1.25rem;
  color: var(--muted);
  font-size: 0.88rem;
}
footer.site a { color: var(--muted); }