/* ==========================================================
   NOLA A11y Lab styles
   One file, no framework. Edit the tokens at the top to
   change colors and fonts everywhere.

   Design inspired by New Orleans sidewalk street tiles,
   French Quarter street signs, gas lamps, balcony ironwork,
   and Crescent City water meter covers.
   ========================================================== */

/* ---------- Tokens ---------- */
:root {
  --font-tile: 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --font-sign: 'Libre Caslon Text', Georgia, serif;
  --font-body: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;

  /* Colors that never change (physical things: tiles, signs, iron) */
  --tile: #ebdfc4;        /* sidewalk tile cream */
  --tile-ink: #26357f;    /* tile letter navy */
  --sign: #141414;        /* street sign black */
  --iron: #2b2c2e;        /* meter cover iron */
  --gas: #f6c45a;         /* gas lamp glow */
  --navy: #26357f;
  --award-ink: #6e4a00;
  --award-bg: #fbecc4;

  /* Light theme */
  --bg: #f4f2ed;
  --ink: #1b1c1e;
  --muted: #4a4b4f;
  --body: #3e3f43;
  --rule: #dedad1;
  --concrete: #d8d4cb;
  --card: #ffffff;
  --proj-card: #f8f1e1;
  --proj-border: #c9b88f;
  --accent: #26357f;
  --accent-hover: #15205a;
  --sign-ring: #141414;
  --rail: #141414;
  --footer: #141414;
  color-scheme: light;
}

/* Dark theme: follows the system unless the visitor picked light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171b;
    --ink: #ecebe7;
    --muted: #b4b2ac;
    --body: #d3d1cb;
    --rule: #2e3137;
    --concrete: #3a3d43;
    --card: #1f2227;
    --proj-card: #22252b;
    --proj-border: #4d4a40;
    --accent: #aebcff;
    --accent-hover: #d3dbff;
    --sign-ring: #d9d7d2;
    --rail: #6d6a63;
    --footer: #0c0d10;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15171b;
  --ink: #ecebe7;
  --muted: #b4b2ac;
  --body: #d3d1cb;
  --rule: #2e3137;
  --concrete: #3a3d43;
  --card: #1f2227;
  --proj-card: #22252b;
  --proj-border: #4d4a40;
  --accent: #aebcff;
  --accent-hover: #d3dbff;
  --sign-ring: #d9d7d2;
  --rail: #6d6a63;
  --footer: #0c0d10;
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 20;
  background: var(--card); padding: 10px 14px; border-radius: 6px;
}
.skip-link:focus { top: 12px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 64px); }

/* ---------- Tiles (wordmark and chips) ---------- */
.tiles {
  display: inline-flex; flex-wrap: wrap; gap: 10px 18px;
  background: var(--concrete); padding: 8px; border-radius: 4px;
}
.tiles .word { display: flex; gap: 5px; }
.tiles .word span {
  display: grid; place-items: center;
  width: clamp(38px, 5.2vw, 64px); height: clamp(48px, 6.6vw, 80px);
  background: var(--tile); color: var(--tile-ink);
  border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(80, 60, 20, .08);
  font-family: var(--font-tile); font-weight: 700;
  font-size: clamp(32px, 4.6vw, 56px); line-height: 1;
}
/* Hand-laid look: each tile sits a little crooked */
.tiles .word span:nth-child(4n+1) { transform: rotate(-1.2deg); }
.tiles .word span:nth-child(4n+2) { transform: rotate(0.8deg); }
.tiles .word span:nth-child(4n+3) { transform: rotate(-0.4deg); }
.tiles .word span:nth-child(4n)   { transform: rotate(1.1deg); }

.tiles.small { gap: 8px; padding: 4px; border-radius: 3px; }
.tiles.small .word { gap: 3px; }
.tiles.small .word span {
  width: 22px; height: 28px; font-size: 19px; border-radius: 2px;
  box-shadow: none; transform: none;
}

.chip {
  display: inline-block; background: var(--tile); color: var(--tile-ink);
  border-radius: 2px; padding: 2px 8px;
  font-family: var(--font-tile); font-weight: 700; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.5;
}

/* ---------- Nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); border-bottom: 1px solid var(--rule);
}
.site-nav .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding-top: 12px; padding-bottom: 12px; max-width: none;
}
.site-nav .brand { text-decoration: none; }
.site-nav ul {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  list-style: none; margin: 0 0 0 auto; padding: 0;
}
.site-nav ul a { display: block; padding: 10px 14px; color: var(--ink); text-decoration: none; }
.site-nav ul a:hover { color: var(--accent); }
/* Current section, set by js/lab.js as you scroll: a sidewalk tile */
.site-nav ul a[aria-current="location"] {
  background: var(--tile); color: var(--tile-ink); border-radius: 3px; font-weight: 600;
}
.site-nav .nav-actions { display: flex; align-items: center; gap: 6px; }
.site-nav a.nav-join {
  display: block; text-decoration: none; background: var(--navy); color: #ffffff;
  border-radius: 999px; padding: 10px 16px; font-weight: 600;
}

/* Theme switch: a Crescent City water meter cover */
.theme-toggle {
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.theme-toggle svg { display: block; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}

/* ---------- Top of page: intro, news, join | access ----------
   <main> is the grid. .top only groups intro, news, and Join in the
   HTML (display: contents), and Access News is the last child of
   <main>. Wide screens lift it into the right column beside the top
   three. Smaller screens are one column in source order, so Access
   News comes last, after People. */
main.wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  grid-template-rows: auto auto 1fr;
  column-gap: 64px; align-items: start;
  padding-top: clamp(36px, 6vw, 72px);
}
.top { display: contents; }
.hero { grid-column: 1; grid-row: 1; padding-top: 52px; }
.news { grid-column: 1; grid-row: 2; margin-top: 40px; }
.join { grid-column: 1; grid-row: 3; margin-top: 40px; max-width: 640px; }
.access { grid-column: 2; grid-row: 1 / 4; }
main.wrap > .block { grid-column: 1 / -1; }

.hero .lede {
  margin: 0 0 18px; max-width: 820px;
  font-family: var(--font-sign); font-size: clamp(22px, 2.5vw, 30px); line-height: 1.35;
}
.hero .sub { margin: 0; max-width: 720px; color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); }

/* Medium and small windows: one column, intro, news, join, projects,
   publications, people, access */
@media (max-width: 959px) {
  main.wrap { display: block; }
  .hero { padding-top: 0; }
  .access { padding-top: 80px; }
}

/* ---------- Access in New Orleans (beside the intro) ---------- */
.access { min-width: 0; }
.access-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.access-head .sign { margin-bottom: 14px; }
.lamp { flex: 0 0 auto; width: 70px; height: auto; margin: 0 6px -6px 0; color: var(--accent); }

/* The card's top edge is a curb-ramp warning strip: rows of raised domes */
.access-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
}
.access-card::before {
  content: ""; display: block; height: 14px;
  background-color: var(--tile);
  background-image: radial-gradient(circle, var(--proj-border) 2.4px, transparent 3px);
  background-size: 10px 10px; background-position: 0 2px;
}
.access-list { list-style: none; margin: 0; padding: 0 22px; overflow: hidden; }

/* Progress / Barriers switch (JS only; without JS both lists show) */
.access-switch { display: none; gap: 8px; padding: 16px 22px 4px; }
.js .access-switch { display: flex; }
.access-switch button {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 7px 16px; border-radius: 999px;
  color: var(--accent); background: var(--card); border: 1.5px solid var(--accent);
}
.access-switch button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #ffffff; }
.js .access-list[hidden] { display: none; }
/* Before js/lab.js runs, show only Progress */
.js .access:not(.ready) .access-list[data-view="barriers"] { display: none; }

.access-list li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 0 16px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
/* Each note overlaps the next by 1px so the last row's rule is clipped by the card */
.access-list li { margin-bottom: -1px; }
/* Small line drawings, navy on a sidewalk tile in both themes */
.access-art {
  display: block; width: 64px; height: 64px; padding: 4px;
  background: var(--tile); color: var(--tile-ink); border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(80, 60, 20, .08);
}
.access-list .chip { margin: 0 0 6px; font-size: 12px; }
.access-list h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.access-list p { margin: 2px 0 10px; color: var(--body); font-size: 15px; line-height: 1.45; }
.access-list .read-more {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); border: 1.5px solid var(--accent); border-radius: 999px;
  padding: 4px 12px; font-size: 14px; font-weight: 600; text-decoration: none;
}
.access-list .read-more::after { content: "\2197"; content: "\2197" / ""; font-size: 13px; } /* external link, silent to screen readers */
.access-list .read-more:hover { background: var(--navy); border-color: var(--navy); color: #ffffff; }

/* Medium windows: the access notes sit in two columns when there is room */
@media (max-width: 959px) {
  .access-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); column-gap: 32px; }
  .access-list[hidden] { display: none; }
}

/* ---------- Street-sign headings ---------- */
.sign { display: inline-flex; flex-direction: column; align-items: center; margin: 0 0 28px; }
.sign .tab {
  display: flex; align-items: flex-end; gap: 4px; color: var(--sign-ring);
}
.sign .tab span {
  background: #ffffff; color: var(--sign);
  border: 1.5px solid var(--sign-ring); border-bottom: 0; border-radius: 4px 4px 0 0;
  padding: 1px 14px; font-family: var(--font-sign); font-size: 13px;
}
.sign h2 {
  margin: 0; background: var(--sign); color: #ffffff;
  font-family: var(--font-sign); font-weight: 400;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.2;
  padding: 10px 30px; border-radius: 6px;
  outline: 1.5px solid var(--sign-ring); outline-offset: 3px;
}
.sign.small { margin-bottom: 12px; }
.sign.small h2 { font-size: 24px; padding: 8px 26px; }

.block { padding-top: 80px; }
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px 24px; margin-bottom: 28px;
}
.section-head .sign { margin-bottom: 0; }
.note { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- News + Join ---------- */
.news { min-width: 0; }
.news ul { list-style: none; margin: 0; padding: 0; }
.news li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.news li .chip { flex: 0 0 auto; font-size: 14px; letter-spacing: .06em; }
.news li p { flex: 1 1 360px; min-width: 0; margin: 0; }
.news details { margin-top: 12px; }
.news summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 15px; padding: 6px 0; }
.news details[open] > summary { margin-bottom: 4px; }
.news-less {
  margin-top: 12px; padding: 8px 16px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--accent); background: transparent;
  border: 1.5px solid var(--accent); border-radius: 999px;
}

.join {
  min-width: 0;
  background: var(--navy); color: #ffffff; border-radius: 6px; padding: 28px;
  outline: 1.5px solid var(--accent); outline-offset: 4px;
}
.join h2 { margin: 0 0 8px; font-family: var(--font-sign); font-weight: 400; font-size: 26px; }
.join p { margin: 0 0 18px; }
.join .buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.join a {
  border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px;
  border: 2px solid #ffffff; padding: 8px 14px; color: #ffffff;
}
.join a.primary { background: #ffffff; color: #15205a; }
.join a:hover { background: #ffffff; color: #15205a; }

/* ---------- Cards ---------- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 22px;
}

.project {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--proj-card); border: 1px solid var(--proj-border); border-radius: 4px;
  padding: 24px 24px 22px;
}
.project .chip { align-self: flex-start; }
.project h3 {
  margin: 0; color: var(--accent);
  font-family: var(--font-tile); font-weight: 700; font-size: 25px;
  line-height: 1.15; letter-spacing: .02em; text-transform: uppercase;
}
.project .areas { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: -2px 0 0; padding: 0; }
.project .areas li {
  background: var(--card); border: 1px solid var(--proj-border); border-radius: 2px;
  padding: 1px 8px; font-size: 14px; font-weight: 600; color: var(--body);
}
.project p { margin: 0; color: var(--body); }
.project .card-links {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  margin-top: auto; padding-top: 6px;
}
.project .see-pubs { font-size: 15px; font-weight: 600; text-underline-offset: 4px; }
.project .funding {
  background: var(--card); color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 5px 12px; font-size: 14px; font-weight: 600; text-decoration: none;
}

.pub {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
  padding: 22px 24px; color: var(--ink); text-decoration: none;
}
.pub:hover, .pub:focus-within { border-color: var(--accent); }
.pub .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pub .award {
  background: var(--award-bg); color: var(--award-ink);
  border-radius: 999px; padding: 1px 10px; font-size: 13px; font-weight: 600;
}
.pub h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; }
.pub h3 a { color: var(--ink); text-decoration: none; }
.pub h3 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
/* Materials: PDF, ACM DL, Slides, Code, Video, Poster, BibTeX */
.pub .links {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: auto 0 0; padding-top: 6px;
  font-size: 14px; font-weight: 600;
}
.pub .links a { color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pub .authors { margin: 0; color: var(--muted); font-size: 15px; }
.pub .authors b { color: var(--ink); }
.pub .authors a {
  color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.pub .authors a:hover { color: var(--accent); text-decoration-color: currentColor; }
.pub .more {
  margin-top: auto; padding-top: 6px; color: var(--accent);
  font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
/* Before JS runs, show only highlights; after, js/lab.js decides */
.js .pubs:not(.ready) .pub:not(.highlight) { display: none; }
.pub.is-hidden { display: none; }

/* Project filters for publications */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 24px; }
.filters[hidden] { display: none; }
.filters button {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  color: var(--accent); background: var(--card); border: 1.5px solid var(--accent);
}
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #ffffff; }

.toggle {
  margin-top: 22px; padding: 10px 18px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 15px;
  color: var(--accent); background: transparent;
  border: 1.5px solid var(--accent); border-radius: 999px;
}
.toggle[hidden] { display: none; }

/* ---------- People ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 20px; }
.person .photo { max-width: 168px; padding: 6px; background: var(--tile); border-radius: 50%; }
.person img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 50%; background: var(--rule);
}
.person a { display: block; margin-top: 10px; color: var(--ink); font-weight: 700; line-height: 1.3; text-underline-offset: 4px; }
.person span { color: var(--muted); font-size: 14px; }

.alumni-title {
  margin: 56px 0 16px; color: var(--accent);
  font-family: var(--font-tile); font-weight: 700; font-size: 22px;
  letter-spacing: .06em; text-transform: uppercase;
}
.alumni { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px 32px; }
.alumni h4 {
  margin: 0 0 4px; color: var(--muted);
  font-family: var(--font-tile); font-size: 14px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.alumni p { margin: 0; font-size: 15px; }
.alumni a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Footer ---------- */
.railing { display: block; width: 100%; height: 40px; margin-top: 88px; color: var(--rail); }
.site-footer { background: var(--footer); color: #d9d7d2; }
.site-footer .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px;
  padding-top: 32px; padding-bottom: 40px; font-size: 15px;
}
.site-footer a { color: #ffffff; }
.site-footer .credit { flex-basis: 100%; color: #b3b0a9; font-size: 14px; }
.site-footer .credit + .credit { margin-top: -4px; }

/* ---------- Small screens ---------- */
@media (max-width: 700px) {
  /* Keep the nav pinned on phones too, but compact: wordmark on one row,
     links in a single row that scrolls sideways if it runs out of room */
  html { scroll-padding-top: 116px; }
  .site-nav .wrap {
    display: grid; grid-template-columns: 1fr auto; gap: 6px 8px;
    padding-top: 8px; padding-bottom: 6px;
  }
  .site-nav ul {
    grid-column: 1 / -1; grid-row: 2;
    flex-wrap: nowrap; overflow-x: auto; min-width: 0; margin: 0 0 0 -10px; scrollbar-width: none;
  }
  .site-nav ul::-webkit-scrollbar { display: none; }
  .site-nav ul li { flex: 0 0 auto; }
  .site-nav ul a { padding: 8px 10px; }
  .site-nav a.nav-join { padding: 8px 14px; }
  .tiles.small { flex-wrap: nowrap; gap: 6px; padding: 3px; }
  .tiles.small .word { gap: 2px; }
  .tiles.small .word span { width: 17px; height: 23px; font-size: 15px; }
  .theme-toggle { width: 40px; height: 40px; }
  .theme-toggle svg { width: 40px; height: 40px; }
  .lamp { display: none; }
}
@media (max-width: 380px) {
  .tiles.small { gap: 5px; }
  .tiles.small .word { gap: 1px; }
  .tiles.small .word span { width: 13px; height: 19px; font-size: 12px; }
  .site-nav a.nav-join { padding: 8px 12px; }
}