/* A quiet academic homepage. Uses the original photographic background and portrait. */
:root {
  color-scheme: dark;
  --text: #f2f1eb;
  --soft: #d2d8dc;
  --accent: #d5e2ec;
  --rule: rgba(241, 247, 255, .25);
  --panel: rgba(7, 12, 21, .82);
  font-family: Georgia, "Times New Roman", Times, serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #0e1825; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--text);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 400;
  background:
    linear-gradient(110deg, rgba(3,7,14,.48), rgba(3,7,14,.28) 55%, rgba(3,7,14,.51)),
    url('../../images/banner.jpg') center center / cover no-repeat,
    #0e1825;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
a:focus-visible { outline: 3px solid #f5d392; outline-offset: 5px; border-radius: 2px; }
::selection { background: #e2d6b9; color: #111821; }
.site-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 21px;
  padding: clamp(32px, 5.6vh, 68px) clamp(18px, 5vw, 70px) 28px;
}
.main-card {
  width: min(100%, 850px);
  padding: clamp(30px, 5vw, 64px) clamp(28px, 5.7vw, 75px) clamp(28px, 4.4vw, 52px);
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 18px 58px rgba(0,0,0,.22);
}
.identity {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(22px, 5vw, 56px);
}
.identity-text { flex: 1 1 0; min-width: 0; }
h1 {
  margin: 0 0 15px;
  font-weight: 400;
  font-size: clamp(2.5rem, 4.8vw, 3.65rem);
  letter-spacing: -.028em;
  line-height: 1.08;
  text-wrap: balance;
}
.role {
  max-width: 540px;
  margin: 0;
  color: var(--soft);
  font-size: clamp(.98rem, 1.35vw, 1.075rem);
  line-height: 1.72;
  letter-spacing: .002em;
}
.portrait {
  width: clamp(108px, 14.8vw, 158px);
  height: auto;
  aspect-ratio: 80 / 81;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center 37%;
  border: 1px solid rgba(255,255,255,.33);
  border-radius: 2px;
}
.fine-rule { margin: clamp(29px, 3.5vw, 39px) 0 clamp(27px, 3.3vw, 37px); height: 1px; background: var(--rule); }
.research-interests {
  margin: 0;
  max-width: 685px;
  font-size: clamp(1.14rem, 1.65vw, 1.37rem);
  line-height: 1.76;
  letter-spacing: -.007em;
  text-wrap: pretty;
}
.academic-links {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 31px;
  margin-top: clamp(29px, 4vw, 43px);
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.academic-links a {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  min-height: 36px;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  font-size: 1.04rem;
  line-height: 1.7;
  transition: color .18s ease;
}
.academic-links a:hover, .email a:hover, .page-footer a:hover { color: #fff; }
.academic-links a span { font-family: Georgia,"Times New Roman",serif; font-size: .82em; opacity: .7; }
.email { margin: 15px 0 0; color: var(--soft); font-size: 1.02rem; line-height: 1.8; }
.email a { text-decoration: none; border-bottom: 1px solid rgba(230,235,240,.55); padding-bottom: 2px; }
.page-footer { width: min(100%, 850px); text-align: right; }
.page-footer a {
  display: inline-block;
  color: rgba(255,255,255,.83);
  font: 12px/1.6 Georgia,"Times New Roman",serif;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 3px 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,.85);
}
@media (max-width: 690px) {
  .site-shell { justify-content: flex-start; padding: 34px 20px 26px; gap: 15px; }
  .main-card { padding: 35px 30px 33px; }
  h1 { font-size: clamp(2.3rem, 7vw, 3.15rem); }
  .role { font-size: 1rem; }
  .portrait { width: 102px; height: auto; }
  .research-interests { font-size: 1.19rem; line-height: 1.72; }
}
@media (max-width: 440px) {
  body { background-position: center top; }
  .site-shell { padding: 15px 12px max(19px, env(safe-area-inset-bottom)); }
  .main-card { padding: 26px 22px 28px; background: rgba(7,12,21,.88); }
  .identity { gap: 13px; }
  h1 { font-size: clamp(2.12rem, 9vw, 2.6rem); line-height: 1.12; margin-bottom: 14px; }
  .role { font-size: .96rem; line-height: 1.58; }
  .portrait { width: 82px; height: auto; }
  .fine-rule { margin: 27px 0 25px; }
  .research-interests { font-size: 1.09rem; line-height: 1.68; }
  .academic-links { margin-top: 28px; padding-top: 18px; gap: 7px 23px; }
  .academic-links a { font-size: 1.0rem; min-height: 40px; }
  .email { margin-top: 14px; font-size: .99rem; overflow-wrap: anywhere; }
  .page-footer { padding-right: 5px; }
}
@media (max-width: 359px) {
  .main-card { padding: 24px 18px 25px; }
  h1 { font-size: 2rem; }
  .portrait { width: 70px; height: auto; }
  .role { font-size: .94rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}