/* ==========================================================================
   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 */
  --rule-head:   #c9c3b9;   /* the horizontal line under the header only */
  --accent:      #14509b;   /* links and marks, dark blue to match the nazar */
  --accent-deep: #0e3a72;   /* hover state */
  --accent-soft: #e8eef7;   /* 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: 1240px;           /* maximum layout width. Raised from 1120 so the
                               header holds the nazar, BOIL, the lab name and
                               all 8 navigation items on 1 row. Body text does
                               not get longer lines, it is capped separately by
                               --measure above. */
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #10151a;
    --panel:       #161d24;
    --ink:         #f2f1ee;
    --body:        #d5dce4;
    --muted:       #a6b2be;
    --rule:        #29313a;
    --rule-head:   #3c4650;
    --accent:      #9ec8f5;
    --accent-deep: #bcd9fa;
    --accent-soft: #16202e;
    --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 --------------------------------------------- */

/* The horizontal line under the header. 2px reads as a deliberate rule rather
   than a hairline, and it grows downward, so raising it does not move the
   navigation. Every other hairline on the site is still 1px var(--rule). */
.site-header {
  border-bottom: 2px solid var(--rule-head);
  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;
}

/* The nazar, then BOIL, then the lab name. The mark is centered on the line
   while the 2 pieces of text stay on a shared baseline. To resize it, change
   the number here AND the width and height attributes in all 9 .html files,
   otherwise it renders blurred. */
.wordmark-mark {
  width: 46px;
  height: 46px;
  align-self: center;
  flex: none;
}
@media (max-width: 620px) {
  .wordmark-mark { width: 32px; height: 32px; }
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  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;
}
/* The small teal dot that used to separate BOIL from the lab name is retired.
   With the nazar beside it, 2 circular marks 20px apart competed. To bring it
   back, delete the 2 comment markers around the block below. */
/*
.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: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
@media (max-width: 620px) {
  /* 0.85rem is the largest that keeps the lab name on 1 line on a 390px
     phone. At 0.9rem it wraps to 2. */
  .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;
}
/* Header text is deliberately larger and darker than the page text below it. */
.site-nav a {
  display: inline-block;
  padding: 0.2rem 0;
  font-size: 1.05rem;
  color: var(--ink);
  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; }

/* A DOI is 1 unbroken string, so on a narrow phone it pushes the whole page
   sideways unless it is allowed to break. */
.pub-list a { overflow-wrap: anywhere; }

/* --- 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 nazar sits beside the lab name in the footer and beside the 404 label.
   It is nazar.svg, 5 circles, drawn here rather than downloaded. To make it
   bigger, change the width and height on the img tag in the HTML as well,
   otherwise it will render blurred. 15px keeps the lab name on 1 line at
   1280px wide, 17px starts to wrap it. */
.footer-brand img,
.eyebrow-mark img {
  vertical-align: -2px;
  margin-right: 0.4rem;
}

/* 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,
.project-figure video {
  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);
}

/* A figure taken from a published paper carries a credit line. Both open access
   licenses in use here, Optica's and CC BY 4.0, require attribution including
   the DOI, so the credit is not decoration and must not be dropped. */
.project-figure figcaption,
.scheme-figure figcaption {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.6rem;
  max-width: 62ch;
}
/* A figure that carries dense labels of its own needs more room than the 520px
   the project figures use. 800px matches the overview figure and the clip. */
.project-figure.figure-wide img { max-width: 800px; }

.fig-credit {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.83rem;
}

/* --- The 1 measured clip ---------------------------------------------------
   The only real data on this page. It runs wider than the schematics because
   it carries MATLAB axis text, which stops being readable below about 700px.
   It carries a caption because, unlike a schematic, it is not self explanatory,
   and because a reader has to be told the map is raw fluorescence rather than
   the corrected quantity the paragraph above describes.

   To swap the clip, replace release-kinetics.mp4 and its poster image, keeping
   both file names. Keep it short and silent. Cloudflare drag and drop caps a
   file at 25 MB, and this one is 0.3 MB.
   -------------------------------------------------------------------------- */
.data-figure { margin: 1.75rem 0 0; }
.data-figure video {
  width: 100%;
  max-width: 800px;      /* change this 1 number to resize the clip */
  height: auto;
  display: block;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.data-figure figcaption {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.6rem;
  max-width: 62ch;
}

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