/* NSM group site — typography-first, no JS, single accent color. */

:root {
  --accent: #215caf;        /* ETH blue, used sparingly */
  --ink: #1a1a1a;
  --ink-soft: #555;
  --rule: #d8d8d8;
  --bg: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Charter, "Bitstream Charter", Cambria, Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.55;
}

header, footer, .layout {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ------------------------------------------------ header */

header { padding-top: 1.6rem; }

/* group name on the left, ETH logo right-justified at the same level
   (required on every page by ETH corporate-design rules) */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.masthead img.eth-logo {
  display: block;
  width: 10rem;
  height: auto;
}

.site-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .01em;
}

.site-affil {
  color: var(--ink-soft);
  font-size: .92rem;
  margin-top: .15rem;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: .9rem;
  padding: .45rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .95rem;
}

nav a {
  color: var(--ink-soft);
  text-decoration: none;
  margin-right: 1.05rem;
}

/* off-site link (the butterfly collection) — set apart at the right end */
nav a.offsite {
  margin-left: auto;
  margin-right: 0;
}

nav a:hover { color: var(--accent); }

nav a.current {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
  padding-bottom: .35rem;
}

/* ------------------------------------------------ layout with side nav */

.layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  padding-top: 1.2rem;
}

main {
  max-width: 44rem;
  min-width: 0;
  padding-bottom: 2rem;
  flex: 1;
}

aside.subnav {
  flex: 0 0 14.5rem;
  order: -1;
  margin-top: 1.4rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--accent);
  background: #f7f8fa;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .95rem;
  line-height: 1.4;
}

aside.subnav > a {
  font-weight: 700;
  color: var(--ink);
}

aside.subnav ul {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
}

aside.subnav li { margin: .3rem 0; }

aside.subnav li.group {
  margin: .8rem 0 .25rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

aside.subnav a { text-decoration: none; color: var(--ink-soft); }
aside.subnav a:hover { color: var(--accent); }
aside.subnav a.current { color: var(--accent); font-weight: 600; }

@media (max-width: 52rem) {
  .layout { flex-direction: column; gap: 0; }
  aside.subnav { order: 0; flex: none; width: 100%; }
  .sidecol { order: 0; flex: none; width: 100%; }
}

/* ------------------------------------------------ body text */

h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 1.2rem 0 .8rem;
}

h2 {
  font-size: 1.35rem;
  margin: 2rem 0 .5rem;
}

h3 { font-size: 1.08rem; margin: 1.4rem 0 .4rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

main img,
main video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: .6rem auto;  /* narrower-than-column figures sit centered */
}

blockquote {
  margin: 1rem 0 1rem 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-soft);
}

/* reference lists ([1] ..., [2] ...) — one reference per line, typeset
   exactly like body text (matches the material pages' reference blocks) */
main ul.refs {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

main ul.refs li { margin: .6rem 0; }

/* zero-JS image/video carousel: the slides cross-fade on a timer. The
   container's aspect-ratio is that of the WIDEST slide, which therefore
   exactly fills the text width; every slide is shown at the same height,
   centered, at its own aspect ratio (narrower slides get blank margins,
   nothing is cropped). All slides share one keyframe cycle and are
   staggered by animation-delay. Currently tuned for EIGHT slides, 4 s
   each with 1 s cross-fades (40 s cycle) — adding a slide means another
   delay line, a longer cycle, adjusted keyframe percentages, and
   re-checking which slide is the widest. */
div.carousel {
  position: relative;
  overflow: hidden;
  margin: .6rem 0;
  width: 100%;
  aspect-ratio: 2219 / 964;  /* = the Zeeman-ladder spectrum, the widest slide */
}

div.carousel img,
div.carousel video {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  margin: 0;
  animation: carousel-slide 40s ease-in-out infinite;
  animation-delay: -1s;
}

div.carousel :nth-child(2) { animation-delay: -36s; }
div.carousel :nth-child(3) { animation-delay: -31s; }
div.carousel :nth-child(4) { animation-delay: -26s; }
div.carousel :nth-child(5) { animation-delay: -21s; }
div.carousel :nth-child(6) { animation-delay: -16s; }
div.carousel :nth-child(7) { animation-delay: -11s; }
div.carousel :nth-child(8) { animation-delay: -6s; }

@keyframes carousel-slide {
  0%    { opacity: 0; }
  2.5%  { opacity: 1; }
  12.5% { opacity: 1; }
  15%   { opacity: 0; }
  100%  { opacity: 0; }
}

/* the left column of The Group page: section menu with the news feed
   below it (sitegen wraps both in .sidecol on that page only) */
.sidecol {
  flex: 0 0 14.5rem;
  order: -1;
  min-width: 0;
}

.sidecol aside.subnav { width: 100%; }

/* compact news feed under the menu; items live in
   Resources/content/news.md, rendered by sitegen news_html() */
div.news {
  margin-top: 1.2rem;
  padding: .7rem .9rem .8rem;
  border-left: 3px solid var(--accent);
  background: #f7f8fa;
  font-size: .85rem;
  line-height: 1.45;
}

div.news .news-label {
  margin: 0 0 .5rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

div.news p { margin: 0 0 .7rem; }
div.news p:last-child { margin-bottom: 0; }

div.news .date {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* figure captions — visually distinct from body text */
p.caption {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: -.2rem 0 1.4rem;
}

/* several images in one markdown paragraph sit side by side */
p.imgrow {
  display: flex;
  gap: .8rem;
  align-items: center;
}

p.imgrow img {
  flex: 1 1 0;   /* flex-grow is overridden per image by its aspect ratio */
  min-width: 0;
  width: auto;
  height: auto;
  margin: 0;
}

/* a structure movie with its atom legend to the right */
p.structrow {
  display: flex;
  gap: 1.4rem;
  align-items: center;
}

p.structrow video {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}

p.structrow img.legend {
  flex: 0 0 auto;
  margin: 0;
}

/* an atom legend below its movie */
main img.legend { margin: .4rem auto 1.2rem; }

/* a deliberately narrower-than-column figure; never sits beside a
   leftover float from the preceding text */
main img.narrow {
  width: 60%;
  clear: both;
}

/* a small figure with the body text flowing around it */
main figure.floatright {
  float: right;
  width: 44%;
  margin: .2rem 0 .8rem 1.4rem;
}

main figure.floatleft {
  float: left;
  width: 34%;
  margin: .2rem 1.4rem .8rem 0;
}

main figure.floatright img,
main figure.floatleft img { width: 100%; margin: 0; }

main figure.floatright figcaption,
main figure.floatleft figcaption {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: .35rem;
}

/* section headings clear any floating figure of the previous section */
main h2 { clear: both; }

/* compact institution list (Collaborations): small logo + names, two columns */
div.collab {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr));
  gap: 1rem 1.8rem;
  margin: 1rem 0 1.8rem;
}

div.collab .inst {
  display: flex;
  gap: .9rem;
  align-items: center;
}

div.collab .inst img {
  flex: 0 0 7rem;
  width: 7rem;
  height: 4.2rem;
  object-fit: contain;
  margin: 0;
}

div.collab .inst p {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

div.collab .inst p strong { color: var(--ink); }

/* uniform portrait gallery (Alumni and academic guests) */
div.portraits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.4rem 1.4rem;
  margin: 1rem 0 1.8rem;
}

div.portraits figure { margin: 0; }

div.portraits img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 25%;   /* keep faces in frame whatever the source crop */
  margin: 0 0 .5rem;
}

div.portraits figcaption {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

div.portraits figcaption strong {
  font-size: .95rem;
  color: var(--ink);
}

/* ------------------------------------------------ people table */

table.people {
  border-collapse: collapse;
  width: 100%;
  font-size: .98rem;
}

table.people th {
  text-align: left;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .85rem;
  color: var(--ink-soft);
  font-weight: 600;
  border-bottom: 2px solid var(--rule);
  padding: .35rem .8rem .35rem 0;
}

table.people td {
  border-bottom: 1px solid var(--rule);
  padding: .45rem .8rem .45rem 0;
  vertical-align: top;
}

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

footer {
  display: flex;                   /* text left, logo right, same level */
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  margin-top: 1rem;
  padding-top: .8rem;
  padding-bottom: 2rem;
  color: var(--ink-soft);
  font-size: .85rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

footer p { margin: 0; }

/* the group logo, shown in the common footer of every page */
footer img.footer-logo {
  display: block;
  width: 23.75rem;
  max-width: 100%;
  height: auto;
  margin: 0;
}