/* Colors — tweak these to change the palette. */
:root {
  --bg: #f1e6ef;        /* warm soft lilac background */
  --text: #33283a;      /* deep plum-grey text */
  --muted: #74657a;     /* secondary text */
  --faint: #8b7c8f;    /* years, footer, key */
  --line: #dfcfdc;      /* divider + resting underlines */
  --accent: #8c6694;    /* award highlight, hover underline */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body {
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #e6cde2; }
main { max-width: 620px; margin: 0 auto; padding: 72px 24px 100px; }

a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--faint); transition: text-decoration-color .15s; }
a:hover { text-decoration-color: var(--accent); }

/* ---------- Intro diamond ---------- */
/* The two .hero-edge floats are shaped like the corners outside the diamond,
   so lines of text get shorter toward the top and bottom tips. */
.hero { position: relative; isolation: isolate; text-align: center; margin-bottom: 48px; }
/* Diamond artwork: a hairline outline, then a softly graded fill with rounded corners.
   Colors are inside the SVG (%23 = "#"): outline %23dccbd8, fill %23faf5f8 -> %23f5e9f2. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23faf5f8'/%3E%3Cstop offset='1' stop-color='%23f5e9f2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='50,0.6 99.4,50 50,99.4 0.6,50' fill='none' stroke='%23dccbd8' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpolygon points='50,3.6 96.4,50 50,96.4 3.6,50' fill='url(%23g)' stroke='url(%23g)' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hero-edge { width: 50%; height: 100%; shape-margin: 14px; }
.hero-edge.left  { float: left;  shape-outside: polygon(0 0, 100% 0, 0 50%, 100% 100%, 0 100%); }
.hero-edge.right { float: right; shape-outside: polygon(100% 0, 0 0, 100% 50%, 0 100%, 100% 100%); }

header img { display: inline-block; width: 108px; height: 108px; object-fit: cover; border-radius: 50%; margin-bottom: 10px; vertical-align: top; }
h1 { font-weight: 600; font-size: 28px; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 2px; }
.role { color: var(--muted); margin: 0 0 14px; }
.bio p { margin: 0 0 12px; }
nav.links { color: var(--muted); margin-top: 6px; }
nav.links a, nav.links span { margin: 0 9px; white-space: nowrap; }
/* Section links in the diamond: small italic */
#hero-nav { font-size: 15px; font-style: italic; letter-spacing: 0.02em; line-height: 1.75; margin-top: 10px; }
#hero-nav a { color: var(--muted); text-decoration-color: transparent; text-underline-offset: 4px; }
#hero-nav a:hover { color: var(--text); text-decoration-color: var(--accent); }

/* Sections below the diamond */
section { margin-bottom: 44px; scroll-margin-top: 24px; }
section > p { margin: 0 0 14px; color: var(--muted); }
section > p a { color: inherit; }
nav.links.contact { margin-top: 4px; }
nav.links.contact a, nav.links.contact span { margin: 0 18px 0 0; }

/* Plain fallback (narrow screens, or if the text can't fit a diamond). */
.hero.plain::before, .hero.plain .hero-edge, .hero.plain .hero-pad { display: none; }
.hero.plain { width: auto !important; height: auto !important; margin-left: 0 !important; }
.hero.plain .bio { text-align: left; }

h2 { font-weight: 600; font-size: 18px; margin: 0 0 20px; padding-top: 24px; border-top: 1px solid var(--line); }
/* Small diamond before each section heading, echoing the intro */
h2::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 12px;
  background: var(--accent); opacity: .55; transform: rotate(45deg); vertical-align: middle; position: relative; top: -2px;
}
.key { color: var(--faint); font-size: 15px; margin: -12px 0 22px; }

.pub { display: grid; grid-template-columns: 48px 1fr; gap: 16px; margin-bottom: 22px; }
.pub .year { color: var(--faint); font-variant-numeric: tabular-nums; }
.pub p { margin: 0 0 1px; }
.pub .title { font-weight: 600; }
.pub .authors { color: var(--muted); font-size: 16px; }
.pub .authors b { font-weight: 500; color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.pub .venue { color: var(--text); font-size: 16px; font-style: italic; }
.pub .award { color: var(--muted); font-size: 16px; }
.pub .award .hl { color: var(--accent); font-weight: 600; }
.pub .meta { font-size: 15px; margin-top: 3px; }
.pub .meta a { margin-right: 12px; color: var(--muted); }

footer { margin-top: 72px; color: var(--faint); font-size: 14px; }

@media (max-width: 560px) {
  main { padding: 48px 20px 72px; }
  .pub { grid-template-columns: 1fr; gap: 0; }
}