/* ------------------------------------------------------------------
   Custom theme — quiet, typographic, generous with space.
   Loaded after al-folio's main.css, so these win at equal specificity.
   ------------------------------------------------------------------ */

:root {
  --ink:        #232228;
  --ink-muted:  #6e6f77;
  --ground:     #f6f4ef;   /* warm paper, the lower half of the photo */
  --sky:        #e8f0f8;   /* the sky in the photo, heavily desaturated */
  --rule:       #e2ded6;
  --accent:     #3c6480;

  /* al-folio's own tokens, repointed at the palette above */
  --global-bg-color:            var(--ground);
  --global-text-color:          var(--ink);
  --global-text-color-light:    var(--ink-muted);
  --global-theme-color:         var(--accent);
  --global-hover-color:         var(--accent);
  --global-divider-color:       var(--rule);
  --global-card-bg-color:       var(--ground);
  --global-code-bg-color:       #f1f1ee;
  --global-footer-bg-color:     var(--ground);
  --global-footer-text-color:   var(--ink-muted);
  --global-footer-link-color:   var(--ink);
}

html[data-theme="dark"] {
  --ink:       #e9e7e1;
  --ink-muted: #8d8f97;
  --ground:    #16171a;
  --sky:       #1a2029;
  --rule:      #2b2d33;
  --accent:    #9dc6e2;

  --global-bg-color:          var(--ground);
  --global-text-color:        var(--ink);
  --global-text-color-light:  var(--ink-muted);
  --global-theme-color:       var(--accent);
  --global-hover-color:       var(--accent);
  --global-divider-color:     var(--rule);
  --global-card-bg-color:     var(--ground);
  --global-code-bg-color:     #1e2126;
  --global-footer-bg-color:   var(--ground);
  --global-footer-text-color: var(--ink-muted);
  --global-footer-link-color: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e9e7e1; --ink-muted: #8d8f97; --ground: #16171a;
    --sky: #1a2029; --rule: #2b2d33; --accent: #9dc6e2;
    --global-bg-color: var(--ground); --global-text-color: var(--ink);
    --global-text-color-light: var(--ink-muted); --global-theme-color: var(--accent);
    --global-hover-color: var(--accent); --global-divider-color: var(--rule);
    --global-card-bg-color: var(--ground); --global-code-bg-color: #1e2126;
    --global-footer-bg-color: var(--ground); --global-footer-text-color: var(--ink-muted);
    --global-footer-link-color: var(--ink);
  }
}

/* ---------- type ---------- */

body {
  font-family: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background-color: var(--ground);
  background-image: linear-gradient(180deg, var(--sky) 0%, var(--ground) 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}

.container { max-width: 44rem !important; }

h1, h2, h3, h4, h5, h6, .post-title {
  font-family: "Source Serif 4", Charter, Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ink);
}

.post-header .post-title { font-size: 2.6rem; line-height: 1.1; margin-bottom: .35rem; }
.post-header .post-description, .post .desc {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; letter-spacing: .04em; color: var(--ink-muted);
  font-style: normal;
}

h2 { font-size: 1.45rem; margin-top: 3rem; margin-bottom: 1rem; }
h3, h4 { font-size: 1.1rem; margin-top: 2.25rem; margin-bottom: .6rem; }

/* the section headings al-folio prints on the about page */
.post h2, .post h3, .post h4 { font-weight: 600; }

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule);
    text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- nav: flat, quiet ---------- */

nav#navbar, .navbar {
  background: color-mix(in srgb, var(--sky) 72%, transparent) !important;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
  box-shadow: none !important;
  padding-top: .6rem; padding-bottom: .6rem;
}
.navbar .navbar-brand, .navbar .brand { font-weight: 600; letter-spacing: -0.01em; }
.navbar .nav-item .nav-link {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .78rem; letter-spacing: .05em; text-transform: lowercase;
  text-decoration: none;
}
.navbar .nav-item.active .nav-link { color: var(--accent) !important; font-weight: 500; }
progress#progress { display: none; }

/* ---------- profile ---------- */


.profile img {
  border-radius: 2px !important;
  box-shadow: none !important;
  filter: none;
}
.profile .more-info {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .74rem; line-height: 1.6; color: var(--ink-muted); margin-top: .7rem;
}
.z-depth-1, .z-depth-0 { box-shadow: none !important; }

/* ---------- publications ---------- */

.publications { margin-top: .5rem; }
.publications h2.bibliography {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .78rem; font-weight: 500; letter-spacing: .12em;
  color: var(--ink-muted); text-transform: none;
  text-align: left; margin: 3rem 0 1.5rem; padding-bottom: .45rem;
  border-bottom: 1px solid var(--rule);
}
.publications h2.bibliography:first-of-type { margin-top: 1.5rem; }
.publications ol.bibliography { list-style: none; padding: 0; margin: 0; }
.publications ol.bibliography > li { margin: 0 0 2rem; }

.pub-meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .3rem;
}
.pub-dot { margin: 0 .45em; opacity: .5; }
.pub-award { color: var(--accent); }

.pub-title {
  font-size: 1.12rem; font-weight: 600; line-height: 1.35;
  letter-spacing: -0.008em; margin-bottom: .18rem; text-wrap: balance;
}
.pub-authors { font-size: .95rem; line-height: 1.55; color: var(--ink-muted); }
.pub-self { color: var(--ink); font-weight: 600; }
.pub-venue { font-size: .9rem; color: var(--ink-muted); font-style: italic; }

.pub-summary {
  margin: .5rem 0 0; max-width: 34rem;
  font-size: .97rem; line-height: 1.6; color: var(--ink);
}

.pub-links { margin-top: .45rem; display: flex; gap: 1.1rem; }
.pub-links a {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 1px;
}
.pub-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.publications.selected ol.bibliography > li { margin-bottom: 2.1rem; }
.all-pubs {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
}
.all-pubs a {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .76rem; letter-spacing: .06em; text-decoration: none; color: var(--accent);
}

/* ---------- news ---------- */

.news table td { border-top: none !important; padding: .3rem 1.2rem .9rem 0; vertical-align: top; }
.news table td.date, .news .date {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .04em; color: var(--ink-muted); white-space: nowrap;
}

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

footer.fixed-bottom, footer.sticky-bottom {
  background: transparent !important;
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .03em;
}
footer a { color: var(--ink-muted) !important; }

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

details { margin: .4rem 0 1.5rem; }
details summary {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .74rem; letter-spacing: .05em; color: var(--ink-muted); cursor: pointer;
}
details ul { margin-top: .8rem; }
details li { font-size: .94rem; line-height: 1.5; }

@media (max-width: 576px) {
  .container { max-width: 100%; }
  .profile { width: 100%; float: none !important; margin: 0 0 1.5rem; }
  .post-header .post-title { font-size: 2rem; }
}

/* search field: quiet, not a heavy black box */
.bibsearch-form-input, input.bibsearch {
  border: 1px solid var(--rule) !important;
  border-radius: 3px; background: var(--ground); color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .82rem;
  padding: .5rem .7rem; box-shadow: none !important; max-width: 22rem;
}
.bibsearch-form-input:focus { border-color: var(--accent) !important; outline: none; }
.bibsearch-form-input::placeholder { color: var(--ink-muted); }

/* footer sits at the end of the document, not over the content */
footer.sticky-bottom { margin-top: 4rem; padding: 1.4rem 0; }
body { padding-bottom: 0; }

/* ------------------------------------------------------------------
   Page-load: the name resolves out of blur, the way a sample does.
   ------------------------------------------------------------------ */
@keyframes resolve {
  from { opacity: 0; filter: blur(22px); letter-spacing: .08em; transform: translateY(6px); }
  60%  { opacity: 1; }
  to   { opacity: 1; filter: blur(0);    letter-spacing: -0.012em; transform: none; }
}
@keyframes resolve-soft {
  from { opacity: 0; filter: blur(9px); }
  to   { opacity: 1; filter: blur(0); }
}

.post-header .post-title {
  animation: resolve 1.15s cubic-bezier(.22,.68,.24,1) both;
  will-change: filter, opacity;
}
.post-header .post-description { animation: resolve-soft .8s .5s ease-out both; }
.profile                        { animation: resolve-soft 1s .3s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .post-header .post-title,
  .post-header .post-description,
  .profile { animation: none; filter: none; opacity: 1; transform: none; }
}

/* The photo floats beside the intro only. Everything after it starts on a
   clean left edge below, so the page has one text measure, not two. */
.profile {
  width: 15rem; max-width: 40%;
  margin: -4.6rem 0 1.25rem 2.5rem;   /* rises to sit beside the name, not just the intro */
}
.profile img { border-radius: 3px !important; }

.post h2, .post h3, .post h4,
.post .news, .post .publications, .post .all-pubs { clear: both; }

.post-header { margin-bottom: 1.6rem; }
.post-header .post-title { margin-bottom: 0; }

@media (max-width: 640px) {
  .profile { float: none !important; width: 100%; max-width: 20rem; margin: 0 0 1.75rem; }
}