/* ==========================================================================
   Biomedical Optics and Imaging Lab (BOIL)
   Stylesheet for the whole site. One file, no framework, no build step.

   You will almost never need to edit this file. To change content, edit the
   .html files. To change a color everywhere at once, edit the values in the
   :root block directly below.
   ========================================================================== */

/* --- 1. Colors and fonts -------------------------------------------------- */

:root {
  /* light theme */
  --ground:      #fbfaf8;   /* page background */
  --panel:       #ffffff;   /* cards and panels */
  --ink:         #131a22;   /* headings */
  --body:        #33404f;   /* body text */
  --muted:       #5c6877;   /* captions, secondary text */
  --rule:        #e2ded7;   /* hairlines and borders */
  --accent:      #0e5566;   /* links and marks */
  --accent-deep: #0a4150;   /* hover state */
  --accent-soft: #e7f0f2;   /* tinted panels */
  --warm:        #9a5216;   /* second accent, used sparingly */

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 68ch;          /* comfortable reading width */
  --page: 1120px;           /* maximum layout width */
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #10151a;
    --panel:       #161d24;
    --ink:         #f2f1ee;
    --body:        #c6ced7;
    --muted:       #93a0ad;
    --rule:        #29313a;
    --accent:      #7fcbdc;
    --accent-deep: #a8deeb;
    --accent-soft: #16262d;
    --warm:        #e0a468;
  }
}

/* --- 2. Base -------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); margin-top: 0; }
h3 { font-size: 1.16rem; font-family: var(--sans); font-weight: 650; letter-spacing: 0; }
h4 { font-size: 1rem; font-family: var(--sans); font-weight: 650; letter-spacing: 0; }

p { margin: 0 0 1.1em; max-width: var(--measure); }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
a:hover { color: var(--accent-deep); }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

strong { color: var(--ink); font-weight: 650; }

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

/* Screen reader only, and the skip link that becomes visible on focus */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 0.5rem; top: -3rem;
  background: var(--accent); color: #fff;
  padding: 0.6rem 1rem; border-radius: var(--radius);
  z-index: 100; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.5rem; color: #fff; }

/* --- 3. Layout ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.5rem;
}

main { display: block; }

section { padding: 3.5rem 0; }
section + section { border-top: 1px solid var(--rule); }

.lede {
  font-size: 1.16rem;
  color: var(--body);
  max-width: 60ch;
}

/* --- 4. Header and navigation --------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.wordmark:hover { color: var(--ink); }

.wordmark-acronym {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.wordmark-acronym::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.35em;
}
.wordmark-full {
  font-size: 0.83rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.35rem;
  margin: 0; padding: 0;
}
.site-nav a {
  display: inline-block;
  padding: 0.2rem 0;
  font-size: 0.95rem;
  color: var(--body);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); border-bottom-color: var(--rule); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* --- 5. Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  padding: 4.5rem 0 4rem;
}

/* A quiet motif of light diffusing out from a source, drawn as fluence
   contours. Pure CSS, no image file, nothing to load. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  right: -7rem;
  top: -13rem;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  pointer-events: none;
}
.hero::before {
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--accent) 30%, transparent) 0%,
    color-mix(in srgb, var(--accent) 11%, transparent) 36%,
    transparent 68%);
}
.hero::after {
  background: repeating-radial-gradient(circle at 50% 50%,
    transparent 0 21px,
    color-mix(in srgb, var(--accent) 22%, transparent) 21px 22px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 6%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 50%, #000 6%, transparent 62%);
}
@media (max-width: 820px) {
  .hero::before, .hero::after {
    right: -16rem; top: -17rem;
    opacity: 0.6;
  }
}

.hero .wrap { position: relative; }

.hero h1 { max-width: 20ch; }

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

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.button {
  display: inline-block;
  padding: 0.62rem 1.25rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid var(--accent);
}
.button:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

.button-quiet {
  background: transparent;
  color: var(--accent);
  border-color: var(--rule);
}
.button-quiet:hover { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); }

@media (prefers-color-scheme: dark) {
  .button { color: #0b1116; }
  .button:hover { color: #0b1116; }
  .button-quiet { color: var(--accent); }
}

/* --- 6. Page headers on interior pages ------------------------------------ */

.page-head {
  padding: 3.25rem 0 2.25rem;
  border-bottom: 1px solid var(--rule);
}
.page-head h1 { margin-bottom: 0.4rem; }

/* --- 7. Grids and cards --------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

/* Use grid grid-2 on a set of 2 or 4 cards so they sit as an even block
   rather than leaving 1 card stranded on its own row. */
@media (min-width: 860px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.card-mark {
  display: block;
  width: 2rem;
  height: 3px;
  background: var(--accent);
  margin-bottom: 1rem;
  border-radius: 2px;
}

/* --- 8. Project entries (Research page) ----------------------------------- */

.project {
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
}
.project:first-of-type { border-top: 0; padding-top: 0.5rem; }
.project h3 { margin-bottom: 0.35rem; font-size: 1.3rem; font-family: var(--serif); font-weight: 600; }

.tag {
  display: inline-block;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 100px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.9rem;
}

/* --- 9. People ------------------------------------------------------------ */

.pi {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.member-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.member-list li {
  border-left: 2px solid var(--accent);
  padding: 0.15rem 0 0.15rem 0.9rem;
}
.member-name { display: block; color: var(--ink); font-weight: 650; }
.member-role { display: block; color: var(--muted); font-size: 0.9rem; }

.alumni-list {
  list-style: none;
  margin: 0; padding: 0;
  columns: 2;
  column-gap: 2.5rem;
  font-size: 0.94rem;
}
.alumni-list li {
  break-inside: avoid;
  margin-bottom: 0.6rem;
  color: var(--muted);
}
.alumni-list b { color: var(--body); font-weight: 650; }
@media (max-width: 720px) { .alumni-list { columns: 1; } }

/* --- 10. Publications ----------------------------------------------------- */

.pub-group { margin-bottom: 2.5rem; }
.pub-group > h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.pub-list {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: pub;
}
.pub-list li {
  position: relative;
  padding: 0.9rem 0 0.9rem 2.4rem;
  border-bottom: 1px solid var(--rule);
  max-width: 78ch;
  font-size: 0.96rem;
}
.pub-list li::before {
  counter-increment: pub;
  content: counter(pub);
  position: absolute;
  left: 0; top: 1rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.pub-list li:last-child { border-bottom: 0; }
.pub-title { color: var(--ink); font-weight: 600; }
.pub-venue { color: var(--muted); font-style: italic; }

/* --- 11. News ------------------------------------------------------------- */

.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
  max-width: 72ch;
}
.news-date {
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  padding-top: 0.15rem;
}
.news-list p { margin: 0; }
@media (max-width: 620px) {
  .news-list li { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* --- 12. Positions -------------------------------------------------------- */

.updated {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 0.25rem 0.85rem;
  margin-bottom: 1.5rem;
}

.posting {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}
.posting h3 { margin-top: 0; }
.posting ul { margin: 0 0 1em; padding-left: 1.2rem; }
.posting li { margin-bottom: 0.35rem; }
.posting p:last-child, .posting ul:last-child { margin-bottom: 0; }

.callout {
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
}
.callout h3 { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* --- 13. Contact ---------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: 2.5rem 3.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
/* 4 blocks sit as an even 2 by 2 rather than 3 across with 1 stranded. */
@media (min-width: 760px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contact-block h2 {
  font-family: var(--sans);
  font-size: 1.16rem;
  font-weight: 650;
  letter-spacing: 0;
  margin-bottom: 0.3rem;
}
.contact-block p { margin-bottom: 0.4rem; }

/* Email addresses are assembled by mail.js so that scrapers do not read them
   as plain text. Without JavaScript the reader still sees a usable address. */
.mail { font-weight: 600; color: var(--ink); }
.mail a { font-weight: 600; }

/* --- 14. Video ------------------------------------------------------------ */

/* Wrapper that keeps a YouTube or Vimeo embed at 16 by 9 on every screen.
   See README.md for the two lines you paste in to add a video. */
.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--accent-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* --- 15. Footer ----------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--panel);
  padding: 2.75rem 0;
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 0;
}
.footer-inner {
  display: grid;
  gap: 1.5rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.site-footer h2 {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.site-footer p { margin-bottom: 0.4rem; max-width: 42ch; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.3rem; }
.footer-note {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
}

/* --- 16. Print ------------------------------------------------------------ */

@media print {
  .site-header, .site-nav, .hero::before, .skip-link, .hero-actions { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  section { padding: 1rem 0; }
}