/* Denes Lab — site stylesheet
   Plain, text-first layout. Edit the variables below to retune the whole site. */

:root {
  --text: #000;
  --muted: #555;
  --rule: #000;
  --bg: #fff;
  --measure: 38rem;      /* width of the text column */
  --font: "Courier Prime", "Courier New", Courier, monospace;
}

html { background: var(--bg); }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;   /* 16px */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Page frame */
.page {
  max-width: 56rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* Header: lab name on the left, links on the right, one rule beneath */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}

.lab-name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--text);
}

.header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.affil { font-size: 0.875rem; color: var(--muted); }
.affil a { color: var(--muted); }

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

nav a {
  color: var(--text);
  text-decoration: none;
}

nav a:hover { text-decoration: underline; }

nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Text column */
main { max-width: var(--measure); }

h1 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
}

h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 2.5rem 0 0.75rem;
}

p { margin: 0 0 1.1rem; }

a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

/* Placeholder text — remove this class once real content is in */
.placeholder { color: var(--muted); }

/* People */
.people { list-style: none; padding: 0; margin: 0; }
.people li { margin: 0 0 1.5rem; }
.people .name { font-weight: 700; }
.people .role { color: var(--muted); }

/* Publications */
.pubs { list-style: none; padding: 0; margin: 0; }
.pubs li { margin: 0 0 1.25rem; }
.pubs .title { font-weight: 700; }
.pubs .venue { color: var(--muted); }


@media (max-width: 40rem) {
  .header-right { align-items: flex-start; }
  body { font-size: 1rem; }
  .header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.affil { font-size: 0.875rem; color: var(--muted); }
.affil a { color: var(--muted); }

nav ul { gap: 1rem; }
  nav a { white-space: nowrap; }
  .page { padding: 1.5rem 1.25rem 3rem; }
  header { margin-bottom: 2rem; }
}

/* Landing page: header, then the ensemble centered in the remaining viewport */
.page:has(.landing) { display: flex; flex-direction: column; }
.page:has(.landing) header { margin-bottom: 0; }
main.landing { max-width: none; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6rem 0 2rem; }
.tagline-rule { width: 100%; max-width: 40rem; margin: 1.5rem auto 1.5rem; }
.tagline { max-width: 34rem; text-align: center; margin: 0 auto; }
main.landing .orbit { margin: 0; }

/* Front page: ensemble with the site links arranged around it.
   Hovering (or tabbing to) a link turns one conformer black. */
.orbit {
  position: relative;
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 40 / 27;
  margin: 0.5rem 0 3rem;
}
.orbit .ensemble {
  position: absolute;
  left: 50%; top: 50%;
  width: 52%;
  transform: translate(-50%, -50%);
  overflow: visible;
}
.orbit a {
  position: absolute;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.orbit a:hover, .orbit a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.orbit a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }
/* Five links ringed around the ensemble: two up top, one on each side, one below.
   Each is centred on its anchor point, so the gaps read evenly. */
.orbit a { transform: translate(-50%, -50%); }
.orbit a[data-conf="c1"] { left: 24%; top: 12%; }   /* Research */
.orbit a[data-conf="c5"] { left: 76%; top: 12%; }   /* People */
.orbit a[data-conf="c4"] { left: 11%; top: 50%; }   /* Contact */
.orbit a[data-conf="c2"] { left: 89%; top: 50%; }   /* Publications */
.orbit a[data-conf="c3"] { left: 50%; top: 88%; }   /* CV */

.conf { fill: none; stroke: #8c8c8c; stroke-opacity: 0.3; stroke-width: 0.950766; stroke-linecap: round; stroke-linejoin: round;
        transition: stroke 0.2s, stroke-opacity 0.2s, stroke-width 0.2s; }
.conf.on { stroke: #000; stroke-opacity: 1; stroke-width: 1.42615; }

@media (max-width: 40rem) {
  .orbit { aspect-ratio: auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
  .orbit .ensemble { position: static; width: 100%; max-width: 14rem; transform: none; margin: 0 auto 1rem; }
  .orbit a, .orbit a[data-conf] { position: static; transform: none; left: auto; top: auto; }
}

/* Headshot on the People page */
.people .headshot { display: block; width: 100%; max-width: 16rem; height: auto; margin: 0 0 0.75rem; }
/* Headshot left, text right */
main.wide { max-width: 48rem; }
.person { display: grid; grid-template-columns: 11rem 1fr; gap: 0 1.5rem; align-items: start; margin: 0 0 2.25rem; }
.person .headshot { max-width: 11rem; margin: 0; }
.person .bio { max-width: var(--measure); }
.person .bio p { margin: 0.75rem 0 0; }
.person .bio p + p { margin-top: 0.75rem; }
.person.mentee { grid-template-columns: 7rem 1fr; margin-bottom: 1.5rem; }
.person.mentee .headshot { max-width: 7rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 40rem) {
  .person, .person.mentee { grid-template-columns: 1fr; }
  .person .headshot { max-width: 9rem; margin-bottom: 0.75rem; }
}

/* CV rows: year column + entry */
.cvlist { list-style: none; padding: 0; margin: 0; }
.cvlist li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 1rem; margin: 0 0 0.6rem; }
.cvlist .yr, .muted { color: var(--muted); }
.pubs .title a { text-decoration: none; }
.pubs .title a:hover { text-decoration: underline; }
@media (max-width: 40rem) { .cvlist li { grid-template-columns: 1fr; } }

/* Research page: blurb on the left, figures stacked top to bottom on the right */
.hero { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 2.5rem;
        margin: 0 0 2.5rem; width: calc(100% + 8rem); max-width: calc(100vw - 3rem); }
.hero-text { max-width: 24rem; }
.hero-text p { margin: 0; }
.hero-text p + p { margin-top: 0.9rem; }
.hero-flow { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.flow-fig { width: 11rem; height: auto; }
.flow-movie { width: 15rem; height: auto; }
.flow-plate { width: 12.5rem; height: auto; }
.flow-arrow { width: 1.6rem; height: auto; flex: none; transform: rotate(90deg); }

@media (max-width: 40rem) {
  .hero { grid-template-columns: 1fr; width: 100%; gap: 1.5rem; }
  .flow-fig { width: 9rem; }
  .flow-movie { width: 12rem; }
  .flow-plate { width: 10rem; }
}