/* ==========================================================================
   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:        #242e39;   /* body text */
  --muted:       #4b5764;   /* 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:        #d5dce4;
    --muted:       #a6b2be;
    --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);
  white-space: nowrap;
}
.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: 1rem;
  color: var(--body);
  letter-spacing: 0.01em;
}
@media (max-width: 620px) {
  .wordmark-full { font-size: 0.85rem; }
}

.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 h2,
.project h3 { margin-bottom: 0.35rem; font-size: 1.3rem; font-family: var(--serif); font-weight: 600; }

/* Course meta line on the Teaching page */
.course-meta {
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.course-figure { margin: 0; }
.course-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}
.course-figure figcaption {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.6rem;
}

.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 h2 {
  font-family: var(--sans);
  font-size: 1.16rem;
  font-weight: 650;
  letter-spacing: 0;
  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;
}
@media (min-width: 760px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.contact-block h2 {
  font-family: var(--sans);
  font-size: 1.16rem;
  font-weight: 650;
  letter-spacing: 0;
  margin-bottom: 0.3rem;
}
/* Address lines belong together as a block, so they sit at their own tighter
   line height rather than at the page's reading line height. */
.contact-block p { margin-bottom: 0; line-height: 1.45; }

/* 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; }

/* The Pages list is 8 items, so it runs as 2 columns rather than 1 long one.
   The Elsewhere list is short and stays single column. */
.footer-pages { columns: 2; column-gap: 2rem; }
.footer-pages li { break-inside: avoid; }
.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; }
}


/* --- Home hero photo ------------------------------------------------------
   Picture1.png sits behind the hero text rather than above it, so it costs no
   vertical space. The gradient on top is the scrim, and it runs to fully opaque
   at the bottom so the picture dissolves into the page instead of stopping at a
   line. Raise the numbers to fade the image further, lower them to bring it
   forward. Keep them at or above 0.68, below that the text contrast fails.
   -------------------------------------------------------------------------- */
.hero-photo {
  background-image:
    linear-gradient(to bottom,
      rgba(251,250,248,0.74) 0%,
      rgba(251,250,248,0.78) 55%,
      rgba(251,250,248,0.94) 88%,
      rgba(251,250,248,1) 100%),
    url(Picture1.png);
  border-bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-photo::before, .hero-photo::after { display: none; }

@media (prefers-color-scheme: dark) {
  .hero-photo {
    background-image:
      linear-gradient(to bottom,
        rgba(16,21,26,0.80) 0%,
        rgba(16,21,26,0.84) 55%,
        rgba(16,21,26,0.96) 88%,
        rgba(16,21,26,1) 100%),
      url(Picture1.png);
  }
}

/* --- Research figures ------------------------------------------------------
   Figures carry their own captions, so there is no figcaption here. To add a
   figure to a project, copy a <figure class="project-figure"> block in
   research.html, change the file name, and write real alt text describing what
   the picture shows.
   -------------------------------------------------------------------------- */
.project-figure {
  margin: 1.75rem 0 0;
}
.project-figure img {
  width: 100%;
  max-width: 520px;      /* change this 1 number to resize all 3 figures */
  height: auto;
  display: block;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* --- Research overview figure ---------------------------------------------
   The scheme figure under the Research lede. It carries a lot of small detail,
   so it runs the full width of the column rather than at the .project-figure
   width. Source is Sunar-1Slide.pdf rendered at 300 dpi with the red border
   cropped off, so it stays sharp when reduced.
   -------------------------------------------------------------------------- */
.scheme-figure {
  margin: 2rem 0 0;
}
.scheme-figure img {
  width: 100%;
  max-width: 800px;      /* change this 1 number to resize the overview figure */
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}