/* QPI Symposium — shared styles
   Visual language follows the BMOL lab site: dark canvas, electric-yellow
   accent, EB Garamond display over Inter body. Deliberately standalone —
   this site does not depend on the lab site's theme or build. */

:root {
  --bg: #0a0a0a;
  --bg-raised: #141414;
  --bg-hover: #1c1c1c;
  --rule: #2a2a2a;
  --text: #ededed;
  --text-dim: #9a9a9a;
  --text-faint: #6e6e6e;
  --accent: #faff69;
  --accent-ink: #0a0a0a;
  --serif: "EB Garamond", "Hoefler Text", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --measure: 68ch;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 255, 105, 0.35);
}

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

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  /* Let the browser choose the break points and even out the lines. Do not
     hard-code them with &nbsp; or <br> — the right break usually depends on the
     viewport, which we do not know. The one exception is the h1, where the
     break is placed by hand so that "Quantitative Phase Imaging" stays whole;
     that is a decision about the name, not about the layout. */
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- top bar ---------- */

.topbar {
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  flex-wrap: wrap;
}

.brand {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--text);
  border: 0;
  white-space: nowrap;
}

.navlinks {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
}

.navlinks a {
  color: var(--text-dim);
  border: 0;
}

.navlinks a:hover,
.navlinks a[aria-current="page"] {
  color: var(--accent);
}

/* ---------- hero ---------- */

.hero {
  padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--rule);
}

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

.hero h1 {
  font-size: clamp(2.4rem, 6.5vw, 4.25rem);
  margin-bottom: 1.25rem;
  /* The break is written into the markup, so balancing would fight it. On a
     narrow screen the first line still wraps on its own — <br> adds a break,
     it does not forbid others. */
  text-wrap: initial;
}

.hero .lede {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--text-dim);
  max-width: var(--measure);
  margin: 0 0 2rem;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem 2rem;
  margin: 0 0 2.25rem;
  padding: 0;
  list-style: none;
}

.facts dt,
.facts .k {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.3rem;
}

.facts .v {
  font-size: 1.02rem;
  color: var(--text);
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.5rem;
  border: 0;
  border-radius: 2px;
}

.btn:hover {
  filter: brightness(1.08);
  border: 0;
}

.btn.ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.btn.ghost:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}

.btnrow {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ---------- sections ---------- */

section {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-bottom: 1px solid var(--rule);
}

section:last-of-type {
  border-bottom: 0;
}

section h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  margin-bottom: 1.5rem;
}

section p {
  max-width: var(--measure);
  color: var(--text-dim);
}

section p strong {
  color: var(--text);
  font-weight: 600;
}

/* ---------- schedule ---------- */

.schedule {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.schedule li {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 1rem 1.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

.schedule .day {
  color: var(--accent);
  font-size: 0.95rem;
}

.schedule .what {
  color: var(--text-dim);
}

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

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 1.5rem;
}

.person {
  background: var(--bg-raised);
  padding: 1.4rem;
}

.face {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 1rem;
  filter: grayscale(0.15);
}

.face.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  color: var(--text-faint);
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
}

.person .n {
  font-family: var(--serif);
  font-size: 1.2rem;
}

.person .a {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin-top: 0.35rem;
}

.person .r {
  color: var(--text-faint);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.6rem;
}

/* ---------- notice ---------- */

.notice {
  background: var(--bg-raised);
  border-left: 2px solid var(--accent);
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0 0;
  max-width: var(--measure);
  color: var(--text-dim);
}

/* ---------- archive ---------- */

.edition {
  border-top: 1px solid var(--rule);
  padding: 2.25rem 0;
}

.edition:first-of-type {
  border-top: 0;
  padding-top: 0.5rem;
}

.edition-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.edition-head h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0;
}

.badge {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.edition-meta {
  color: var(--text-dim);
  font-size: 0.95rem;
  margin: 0 0 0.6rem;
}

.edition-note {
  color: var(--text-faint);
  font-size: 0.95rem;
  max-width: var(--measure);
  margin: 0 0 1.25rem;
}

table.speakers {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

table.speakers th {
  text-align: left;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 0.9rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}

table.speakers td {
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 1px solid rgba(42, 42, 42, 0.55);
  vertical-align: top;
}

table.speakers td:first-child {
  color: var(--text);
  white-space: nowrap;
}

table.speakers td:nth-child(2),
table.speakers td:nth-child(3) {
  color: var(--text-dim);
}

.kn {
  color: var(--accent);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 0.5rem;
}

.tablewrap {
  overflow-x: auto;
}

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

footer {
  border-top: 1px solid var(--rule);
  padding: 2.5rem 0 3.5rem;
  color: var(--text-faint);
  font-size: 0.88rem;
}

footer p {
  margin: 0.3rem 0;
  max-width: var(--measure);
}

.footer-partners {
  margin: 2rem 0;
}

.footer-partners h2 {
  color: var(--text-faint);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.partner-logos {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 3.5rem);
}

.partner-logo {
  align-items: center;
  border: 0;
  display: inline-flex;
  justify-content: center;
}

.partner-logo img {
  display: block;
  height: auto;
  max-height: 3.2rem;
  max-width: min(15rem, 34vw);
  object-fit: contain;
  width: auto;
}

.university-logos .partner-logo:first-child img {
  max-width: min(17rem, 38vw);
}

.university-logos .partner-logo:last-child img {
  max-height: 3.5rem;
}

.chapter-logo {
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.chapter-logo img {
  max-height: 3rem;
  max-width: min(13rem, 40vw);
}

.partner-name {
  color: var(--text-dim);
  font-size: 0.9rem;
}

.sponsor-partners {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}

.sponsor-logo img {
  max-height: 3.7rem;
  max-width: min(14rem, 48vw);
}

@media (max-width: 620px) {
  .schedule li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* ---------- imagery ----------
   Photographs sit on a black canvas, so each one is wrapped in a figure that
   fades its edges into the background rather than ending on a hard line.
   Credits are required for the CC BY-SA images and are part of the markup. */

.shot {
  margin: 2rem 0 0;
  position: relative;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 2px;
  box-shadow: inset 0 0 60px 12px rgba(10, 10, 10, 0.55);
}

.shot figcaption {
  margin-top: 0.6rem;
  font-size: 0.76rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.shot figcaption a {
  color: var(--text-faint);
  border-bottom-color: rgba(154, 154, 154, 0.3);
}

.shot figcaption a:hover {
  color: var(--text-dim);
}

/* Full-bleed band under the hero */
.band {
  position: relative;
  line-height: 0;
  border-bottom: 1px solid var(--rule);
}

.band img {
  width: 100%;
  height: clamp(180px, 26vw, 340px);
  object-fit: cover;
  display: block;
}

/* The event poster is square and contains text; preserve its full dimensions. */
.poster-band {
  background: var(--bg);
}

.poster-band img {
  width: min(100%, 760px);
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.75) 0%,
    rgba(10, 10, 10, 0.15) 45%,
    rgba(10, 10, 10, 0.6) 100%
  );
}

.poster-band::after {
  display: none;
}

.band .credit {
  position: absolute;
  right: var(--pad);
  bottom: 0.5rem;
  font-size: 0.7rem;
  line-height: 1.4;
  color: rgba(237, 237, 237, 0.45);
}

/* Invited speakers: open rows allow titles to grow without card constraints. */
.speaker-list { list-style: none; padding: 0; margin: 2rem 0 0; }
.speaker-row { display: flex; align-items: flex-start; gap: 1.5rem; padding: 1.25rem 0; }
.speaker-row .face { flex: 0 0 72px; width: 72px; height: 72px; margin: 0; }
.speaker-details { min-width: 0; }
.speaker-details h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; margin: 0; }
.speaker-details .speaker-affiliation { color: var(--text-dim); font-size: .92rem; margin: .3rem 0 0; }
.speaker-details .speaker-title { margin: .7rem 0 0; font-size: 1.08rem; overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .speaker-row { gap: 1rem; }
  .speaker-row .face { flex-basis: 52px; width: 52px; height: 52px; }
}