/* ============================================================
   Architected Network — site styles

   A light, right-aligned sidebar on the left holds the mark, the
   nav and, pinned to its bottom, the footer. The page column to
   its right opens with the title banner. Below 820px the sidebar
   dissolves: its top block becomes a bar and the footer drops to
   the bottom of the page.

   Black and white; violet only on links, focus rings and small
   labels. Three type sizes — hierarchy comes from weight and case.
   ============================================================ */

:root {
  --fs-lg: 1.35rem;
  --fs-md: 1rem;
  --fs-sm: 0.7rem;

  --bg: #ffffff;
  --surface: #f4f4f4;
  --divider: #e3e3e3;
  --text: #000000;
  --muted: #565656;
  --heading: #111111;
  --violet: #665ca2;

  /* Dark surfaces: the title banner and the lightbox */
  --dark: #141414;
  --dark-text: #ffffff;
  --dark-muted: #b6b6b6;
  --violet-light: #a99ef0; /* violet that reads on the dark surfaces */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

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

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

/* ---------- Shared type roles ---------- */

h1,
h2 {
  font-size: var(--fs-lg);
  font-weight: 750;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--heading);
}

h2 {
  margin-bottom: 8px;
}

/* Small uppercase labels */
.eyebrow,
.brand-sub,
.news-date,
.lb-role,
.lb-award {
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow,
.news-date,
.lb-role {
  font-weight: 700;
}

/* ---------- Sidebar (everything right-aligned) ---------- */

.sidebar {
  position: sticky;
  top: 0;
  align-self: start; /* sticky needs this inside a grid, or the item stretches */
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 28px 20px;
  background: var(--surface);
  border-right: 3px solid var(--violet);
  text-align: right;
}

.sidebar-top {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 28px;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  color: var(--heading);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.brand:hover {
  text-decoration: none;
}

.brand-logo {
  width: 80px;
  height: 80px;
  align-self: center; /* the mark is centred; the text beside it stays right-aligned */
}

.brand-sub {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  color: var(--muted);
}

.site-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: stretch; /* full-width pills, text right-aligned */
}

.site-nav a {
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 500;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--heading);
  background: rgba(0, 0, 0, 0.06);
  text-decoration: none;
}

.site-nav a.active {
  font-weight: 650;
}

/* ---------- Footer — pinned to the bottom of the sidebar ---------- */

.site-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.site-footer .wrap {
  display: grid;
  gap: 14px;
  padding: 0;
}

/* Institution + funder marks in their own colours, never filtered.
   Several are dark, which is why they only ever sit on light surfaces. */
.partner-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Wordmarks share one width. The MIT mark and the NSF seal are the two
   exceptions, sized by height so neither dominates. */
.partner-logos img {
  width: 140px;
  height: auto;
}

.partner-logos-mit img {
  width: auto;
  height: 30px;
}

.partner-logos-funder img {
  width: auto;
  height: 72px;
}

.footer-meta {
  padding-top: 12px;
  border-top: 1px solid var(--divider);
}

/* ---------- Page column ---------- */

.page {
  min-width: 0;
}

.wrap {
  max-width: 920px;
  padding: 20px 20px;
}

/* Title banner: dark, light text */
.hero {
  background: var(--dark);
  color: var(--dark-text);
}

.hero h1 {
  color: var(--dark-text);
}

.eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--violet-light);
}

.hero p {
  margin-top: 10px;
  max-width: 46rem;
  color: var(--dark-muted);
}

/* ---------- Lists: news, publications, resources ---------- */

.rows > li {
  padding: 16px 0;
  border-bottom: 1px solid var(--divider);
  color: var(--muted);
}

.news-date {
  margin-bottom: 4px; /* date sits above the title */
}

.news-list h3,
.pub-title {
  font-weight: 700;
  color: var(--heading);
}

.news-list h3 {
  font-size: var(--fs-md); /* the UA default (1.17em) would be a fourth size */
  margin-bottom: 3px;
}

.news-list figure {
  margin-top: 12px;
}

/* News photos stay in colour; only portraits are greyscaled. */
.news-list figure img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.pub-title {
  display: block;
}

.pub-venue {
  font-style: italic;
}

.link-list a {
  font-weight: 700;
}

/* ---------- Team ---------- */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.photo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

/* height:auto is required — the <img> width/height attributes would
   otherwise pin the box to its pixel height and defeat aspect-ratio. */
.photo img,
.lightbox img {
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  filter: grayscale(1);
}

.photo img {
  width: 100%;
  transition: transform 0.4s ease;
}

.photo:focus {
  outline: none;
}

.photo:hover img {
  transform: scale(1.05);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.93);
  color: var(--dark-muted);
}

.lightbox[hidden] {
  display: none;
}

.lightbox figure {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  max-width: min(92vw, 780px);
}

.lightbox img {
  flex: none;
  width: 300px;
}

.lightbox figcaption {
  min-width: 0;
}

.lb-name {
  font-size: var(--fs-lg);
  font-weight: 750;
  color: var(--dark-text);
}

.lb-role,
.lb-inst {
  margin-top: 4px;
}

.lb-role,
.lb-award a {
  color: var(--violet-light);
}

/* Bio + award share one block, so the rule above them shows only when
   at least one has content. The script hides empty lines. */
.lb-detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.lb-bio {
  line-height: 1.6;
}

.lb-bio:not([hidden]) + .lb-award:not([hidden]) {
  margin-top: 10px;
}

.lightbox button {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--dark-text);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}

.lightbox button:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox-close {
  top: 18px;
  right: 22px;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 16px;
}

.lightbox-next {
  right: 16px;
}

/* ---------- Narrow screens ---------- */

/* The sidebar dissolves into its children: the top block becomes a bar
   and the footer drops to the bottom of the page. Alignment goes back
   to the left. */
@media (max-width: 820px) {
  body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: contents;
  }

  .sidebar-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 14px 20px;
    background: var(--surface);
    border-bottom: 3px solid var(--violet);
    text-align: left;
  }

  .brand {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .brand-logo {
    width: 44px;
    height: 44px;
  }

  .site-nav {
    flex-direction: row;
    gap: 4px;
    align-self: auto;
  }

  .site-nav a {
    padding: 6px 10px;
  }

  .page {
    order: 1;
  }

  .site-footer {
    order: 2;
    margin-top: 40px;
    padding-top: 0;
    background: var(--surface);
    text-align: left;
  }

  .site-footer .wrap {
    gap: 18px;
    padding: 24px 20px;
  }

  .footer-meta {
    padding-top: 16px;
  }

  .wrap {
    padding: 24px 20px;
  }
}

@media (max-width: 640px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr); /* auto-fill would give one huge portrait per row */
  }

  .lightbox figure {
    flex-direction: column;
    gap: 18px;
  }

  .lightbox img {
    width: min(64vw, 300px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo img {
    transition: none;
  }

  .photo:hover img {
    transform: none;
  }
}