/* ---------- Palette & type ---------- */
:root {
  --accent: #4CA0B8;        /* teal: rules, highlights, hover */
  --link: #2E7A90;          /* deeper teal: readable link text */
  --accent-tint: #EEF6F8;   /* very light teal for subtle fills */
  --warm: #A8603C;          /* muted terracotta: used only for [extras] links */
  --warm-dark: #874A2C;
  --warm-soft: #C08F78;     /* faded terracotta: hover-photo captions */
  --warm-tint: #F8EFEA;     /* very light terracotta for the CV hover fill */
  --text: #1F2328;
  --muted: #6B7280;
  --rule: #E5E7EB;

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-tint); }

main {
  max-width: 880px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 3rem;
}

p { margin: 0 0 1em; }
/* superscripts like m³ shouldn't push lines apart */
sup:not(.fn) { line-height: 0; font-size: 0.7em; }

/* ---------- Links ---------- */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: rgba(76, 160, 184, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Links inside running text (bio, Personal): deep teal, no underline;
   a soft underline appears on hover. */
.intro-text p:not(.links) a,
section > p a {
  color: var(--link);
  text-decoration: none;
}
.intro-text p:not(.links) a:hover,
section > p a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* Footnote marker with a hover/tap pop-up, e.g. Tsopela¹ */
.fn {
  position: relative;
  margin-left: 0.1em;
  font-size: 0.7em;
  color: var(--warm);
  cursor: default;
}
.fn:hover,
.fn:focus { color: var(--warm-dark); outline: none; }
.fn-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: 240px;
  padding: 0.45rem 0.65rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--warm);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  pointer-events: none;
  z-index: 10;
}
.fn:hover .fn-pop,
.fn:focus .fn-pop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ---------- Intro: photo beside name + bio ----------
   Desktop: photo spans the left column; name sits above the bio on the right.
   Mobile (see the @media block at the bottom): name, then photo, then bio. */
.intro {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "photo name"
    "photo text";
  column-gap: 2.75rem;
  row-gap: 0;
  align-items: start;
  margin-bottom: 4rem;
}
.name-block { grid-area: name; }
.tag-uni { white-space: nowrap; }
.photo-col  { grid-area: photo; }
.intro-text { grid-area: text; }
.intro-text > :first-child { margin-top: 0; }

.portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

/* "Contact me at:" + email, sitting under the portrait */
.contact {
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
}
.contact-label {
  display: block;
  color: var(--muted);
}
.contact a {
  color: var(--link);
  text-decoration: none;
}
.contact a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1.1;
  letter-spacing: 0.005em;
  margin: -0.2rem 0 0.35rem;
}

.tagline {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Profile links: one row of small tracked capitals, spread to the
   same width as the CV box below, with terracotta dots between */
.links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.2rem 0 0.8rem;
  font-size: 0.64rem;
  line-height: 1;
  text-transform: uppercase;
}
.links a {
  color: var(--link);
  text-decoration: none;
}
.links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.links .sep { color: var(--warm); }

/* CV call-out: fills the photo column, under the links */
.cv {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(76, 160, 184, 0.5);   /* softened --accent */
  border-left-width: 4px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s;
}
.cv:hover {
  background: var(--accent-tint);
  color: var(--text);
}
.cv-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.2;
}
.cv-meta {
  grid-row: 2;
  font-size: 0.8rem;
  color: var(--muted);
}
.cv-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.3rem;
  color: var(--link);
  transition: transform 0.15s;
}
.cv:hover .cv-arrow { transform: translateX(4px); }

/* ---------- Sections ---------- */
section { margin-bottom: 3.25rem; }

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 0 0 1.25rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

/* ---------- Projects: a row of cards (picture + name); click opens a pop-up ---------- */
.projects {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.5rem 0.85rem;
  align-items: start;
}
.project { margin: 0; }

.project-card {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.project-card:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* square picture with the same white print border as the photos */
.thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  padding: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 4px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.15s, transform 0.15s;
}
.thumb.placeholder {
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(76, 160, 184, 0.12) 9px 10px),
    var(--accent-tint);
  background-clip: content-box;
}
.project-card:hover .thumb,
.project-card:focus-visible .thumb {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.10);
}

.project-name {
  display: block;
  margin-top: 0.65rem;
  font-size: 1rem;
  line-height: 1.25;
  transition: color 0.15s;
}
.project-card:hover .project-name,
.project-card:focus-visible .project-name { color: var(--warm); }
.project-card .year {
  display: block;
  margin: 0.2rem 0 0;
}

.year {
  font-weight: 400;
  color: var(--warm);
  font-size: 0.85rem;
  margin-left: 0.4em;
}

.project-links {
  font-size: 0.85rem;
}
.project-links a { margin-right: 0.9em; }

/* Project pop-up page */
#project-modal {
  width: min(760px, 92vw);
  max-height: 90vh;
  padding: 0;
  border: none;
  background: #fff;
  color: var(--text);
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
#project-modal::backdrop { background: rgba(20, 22, 25, 0.6); }
.pm-inner {
  position: relative;
  padding: 2.25rem 2.5rem 1.75rem;
}
.pm-inner:focus { outline: none; }
.pm-close {
  position: absolute;
  top: 0.55rem;
  right: 0.85rem;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.pm-close:hover { color: var(--text); }
.pm-img {
  display: block;
  max-width: 100%;
  max-height: 52vh;
  margin: 0 auto 1.5rem;
}
.pm-img[hidden] { display: none; }
.pm-title { margin: 0 0 0.75rem; }
.pm-body p { margin-bottom: 0.75rem; }
.pm-body .wip { font-style: italic; color: var(--muted); }
.pm-body .project-links { margin: 1rem 0 0; }

/* ---------- Favorites dropdowns (inside Personal) ---------- */
.favorites-group {
  margin-top: 1.75rem;
}
/* very faint hairline between consecutive dropdowns */
.fav + .fav { border-top: 1px solid var(--rule); }

.fav summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  transition: color 0.15s;
}
.fav summary::-webkit-details-marker { display: none; }
.fav summary:hover { color: var(--link); }

/* chevron: points right when closed, down when open */
.fav summary::before {
  content: "";
  flex: none;
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid var(--warm);
  border-bottom: 1.5px solid var(--warm);
  transform: rotate(-45deg);
  transition: transform 0.2s;
}
.fav[open] summary::before { transform: translateY(-0.1em) rotate(45deg); }

.fav .favorites {
  padding: 0.1rem 0 0.75rem 1.1rem;
}
/* the music list breaks out of the 880px text column (up to 1080px), centered on the page */
.fav .recordings {
  width: min(1080px, calc(100vw - 3rem));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* One block per author / composer: name on top, works below in three columns */
.group { margin-bottom: 1rem; }
.group:last-child { margin-bottom: 0; }

.group-name {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.group ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1rem;   /* indent works under the name */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 0.55rem;
}
.group li {
  line-height: 1.3;
}
/* Books: authors spread across three columns; each author's books stacked vertically */
.books {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 1rem;
}
.books .group { margin-bottom: 0; }
.books .group ul {
  grid-template-columns: 1fr;
  row-gap: 0.2rem;
}

/* Label for a set of groups, e.g. "Underappreciated works" */
.section-label {
  margin: 1.6rem 0 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--link);
}

/* small bonus link under a recording, e.g. [Thomas Mann on Lohengrin] */
.treat {
  display: block;
  width: fit-content;
  font-size: 0.75rem;
  text-decoration: none;
  color: var(--warm);
}
.treat:hover {
  color: var(--warm-dark);
  text-decoration: underline;
  text-decoration-color: var(--warm);
}

/* hover-to-preview photo, e.g. [Me at my first Bayreuth (2021)] — not a link */
.peek {
  position: relative;
  display: block;
  width: fit-content;
  font-size: 0.75rem;
  color: var(--warm-soft);
  cursor: default;
}
.peek:hover,
.peek:focus { color: var(--warm); outline: none; }
.peek-img {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 260px;
  max-width: 70vw;
  height: auto;
  border: 3px solid #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  pointer-events: none;
  z-index: 10;
}
.peek:hover .peek-img,
.peek:focus .peek-img {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.favorites cite {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
}

/* movement / excerpt after a title, e.g. Winterreise "Das Wirtshaus" */
.favorites .part {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--muted);
  margin-left: 0.2em;
}
/* composer name after a title (used in the Underappreciated group) */
.favorites .by {
  font-size: 0.8rem;
  color: var(--muted);
  margin-left: 0.4em;
}

/* Musical works: second line is the favorite recording, linked to YouTube */
.rec {
  display: block;
  width: fit-content;
  margin-top: 0;
  font-size: 0.8rem;
  text-decoration: none;
}
.rec:hover { text-decoration: underline; }

/* ---------- Photos (thumbnails inside the dropdown) ---------- */
.photos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
  padding: 0.25rem 0 0.75rem 1.1rem;
}
.photo {
  /* white print border with a soft shadow, like a small photo laid on the page */
  padding: 3px;
  border: none;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 4px rgba(0, 0, 0, 0.07);
  cursor: zoom-in;
  transition: box-shadow 0.15s, transform 0.15s;
}
.photo:hover,
.photo:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.10);
  outline: none;
}
.photo img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

/* Pop-up view */
#lightbox {
  padding: 0;
  border: none;
  background: transparent;
  max-width: 92vw;
  max-height: 94vh;
  overflow: visible;
}
#lightbox::backdrop { background: rgba(20, 22, 25, 0.85); }
#lightbox img {
  display: block;
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
#lightbox-caption {
  margin: 0.6rem 0 0;
  text-align: center;
  color: #fff;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
}
.lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  border: none;
  background: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}
.lightbox-close:hover { opacity: 1; }

/* ---------- Footer ---------- */
footer {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  main { padding-top: 3rem; }
  h1 { font-size: 2.25rem; }

  /* Name on top, photo centered, then the bio */
  .intro {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "name"
      "photo"
      "text";
  }
  h1 { margin-top: 0; }
  .name-block { text-align: center; }
  .tag-sep { display: none; }          /* stack "Department of Physics" / "Yale University" */
  .tag-uni { display: block; margin-top: 0.15rem; }
  .photo-col { justify-self: center; margin-bottom: 1.75rem; }
  .portrait { width: 200px; margin: 0 auto; }
  .contact { text-align: center; }
  /* links centered on phones rather than spread */
  .links { justify-content: center; gap: 0.8rem; }

  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .pm-inner { padding: 2.25rem 1.25rem 1.25rem; }

  .group ul { grid-template-columns: 1fr; }
  .books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}