/* Doyley Lab — Stony Brook University
   Palette from SBU brand guidelines (stonybrook.edu/marcom/design-visual-identity/colors.html) */
:root{
  --sb-red:#990000; --sb-dark-red:#6B000D; --sb-black:#000;
  --sb-dark-gray:#4B4B4B; --sb-mid-gray:#828282; --sb-light-gray:#BEBEBE;
  --bg:#fff; --bg-alt:#f6f6f6; --text:#1b1b1b; --maxw:1120px;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
     color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:var(--sb-red);text-decoration:none}
a:hover{text-decoration:underline}

/* header */
.topbar{background:var(--sb-black);color:#fff;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:36px}
.topbar a{color:#fff;opacity:.85}
header.site{background:var(--sb-red);color:#fff}
header.site .wrap{padding-top:22px;padding-bottom:22px}
header.site .lab{font-size:27px;font-weight:700;letter-spacing:-.4px;margin:0;
                 line-height:1.18;overflow-wrap:break-word;hyphens:none}
header.site .inst{font-size:14px;opacity:.9;margin:4px 0 0}
nav.main{background:var(--sb-dark-red)}
nav.main ul{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0}
nav.main a{display:block;color:#fff;padding:13px 18px;font-size:14px;font-weight:600;
           letter-spacing:.3px;text-transform:uppercase}
nav.main a:hover,nav.main a.active{background:rgba(255,255,255,.16);text-decoration:none}

/* hero + sections */
.hero{background:var(--bg-alt);border-bottom:1px solid #e3e3e3;padding:52px 0}
.hero h1{margin:0 0 14px;font-size:34px;line-height:1.2;max-width:22ch}
.hero p{margin:0;font-size:18px;color:var(--sb-dark-gray);max-width:62ch}
section{padding:46px 0}
section.alt{background:var(--bg-alt);border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
h2{font-size:24px;margin:0 0 6px;color:var(--sb-black)}
h2::after{content:"";display:block;width:52px;height:3px;background:var(--sb-red);margin:10px 0 22px}
h3{font-size:18px;margin:0 0 8px}

/* cards */
.grid{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.card{background:transparent;border:0;padding:0}
.card h3{color:var(--sb-red)}
.card p{margin:0;font-size:15px;color:var(--sb-dark-gray)}

/* people */
.person{padding:14px 0;border-bottom:1px solid #e9e9e9}
.person:last-child{border-bottom:0}
.person .nm{font-weight:700}
.person .role{color:var(--sb-dark-gray);font-size:14px}
.person .meta{color:var(--sb-mid-gray);font-size:13px}

/* publications */
.pubfilter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.pubfilter button{font:inherit;font-size:13px;padding:6px 12px;border:1px solid var(--sb-light-gray);
  background:#fff;color:var(--sb-dark-gray);border-radius:14px;cursor:pointer}
.pubfilter button.on{background:var(--sb-red);border-color:var(--sb-red);color:#fff}
ol.pubs{list-style:none;margin:0;padding:0;counter-reset:p}
ol.pubs li{padding:13px 0 13px 46px;border-bottom:1px solid #eee;position:relative;font-size:15px}
ol.pubs li::before{content:attr(data-n);position:absolute;left:0;top:13px;width:34px;text-align:right;
  color:var(--sb-mid-gray);font-size:13px;font-variant-numeric:tabular-nums}
ol.pubs .t{font-weight:600;display:block}
ol.pubs .a{color:var(--sb-dark-gray);font-size:14px}
ol.pubs .v{color:var(--sb-mid-gray);font-size:13.5px;font-style:italic}
.tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  background:#eee;color:var(--sb-dark-gray);padding:2px 7px;border-radius:3px;margin-left:6px}

/* footer */
footer.site{background:var(--sb-black);color:#cfcfcf;padding:34px 0;font-size:14px;margin-top:20px}
footer.site .wrap{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
footer.site h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.6px;margin:0 0 8px}
footer.site a{color:#fff}
.note{background:#fffbe6;border:1px solid #f0e0a0;border-left:4px solid #d9a400;
      padding:14px 18px;font-size:14px;margin:0 0 26px;border-radius:2px}

@media (max-width:640px){
  header.site .lab{font-size:20px}
  header.site .wrap{padding-top:18px;padding-bottom:18px}
  .hero{padding:36px 0}.hero h1{font-size:26px}
  nav.main a{padding:11px 13px;font-size:13px}
}

/* ---- photos ---- */
.people{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.person{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid #e6e6e6;
        border-radius:3px;background:#fff}
.person .pbody{min-width:0}
.avatar{width:74px;height:74px;border-radius:50%;object-fit:cover;flex:0 0 74px;
        background:#eee;border:2px solid var(--sb-light-gray)}
.avatar.ph{display:block;background:
  linear-gradient(135deg,var(--sb-light-gray) 0%,#dcdcdc 100%)}
.person .nm{font-weight:700;line-height:1.3}
.person .role{color:var(--sb-red);font-size:13.5px;font-weight:600}
.person .meta{color:var(--sb-dark-gray);font-size:13px;overflow-wrap:anywhere}

.card .figure{width:100%;height:150px;object-fit:contain;object-position:center;
              margin:0 0 14px;background:#fafafa;display:block;border-radius:2px}
.grid .card{display:flex;flex-direction:column}

.gallery{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.gallery figure{margin:0}
.gallery img{width:100%;border-radius:3px;display:block;border:1px solid #ddd}
.gallery figcaption{font-size:13px;color:var(--sb-mid-gray);padding-top:7px}


/* ---- research: alternating full-width rows ---- */
.topics{display:flex;flex-direction:column;gap:22px}
.topic{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:30px;
       align-items:start;padding-bottom:22px;border-bottom:1px solid #ebebeb}
.topic:last-child{border-bottom:0;padding-bottom:0}
.topic:nth-child(even) .topic-fig{order:2}
.topic-fig figure{margin:0;background:#f4f4f4;border:1px solid #e6e6e6;border-radius:3px;padding:7px}
.topic-fig figcaption{font-size:12.5px;line-height:1.5;color:var(--sb-mid-gray);
                      padding:9px 2px 2px;border-top:1px solid #e6e6e6;margin-top:9px}
.rowfig{width:100%;height:auto;max-height:240px;object-fit:contain;display:block}
.topic-txt h3{color:var(--sb-red);font-size:21px;margin:0 0 10px}
.topic-txt h3::after{content:"";display:block;width:42px;height:3px;background:var(--sb-red);margin-top:9px}
.topic-txt p{margin:0;color:var(--sb-dark-gray);font-size:15.5px}

/* group photos: equal height so captions line up */
.gallery img{height:290px;object-fit:cover}

@media (max-width:760px){
  .topic{grid-template-columns:1fr;gap:18px}
  .topic:nth-child(even) .topic-fig{order:0}
  .gallery img{height:auto}
}

/* ---- home hero with photo ---- */
.hero-split .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
                  gap:38px;align-items:center}
.hero-split .hero-txt h1{margin-top:0}
.hero-img img{width:100%;height:270px;object-fit:cover;border-radius:3px;
              border:1px solid #ddd;display:block}
@media (max-width:820px){
  .hero-split .wrap{grid-template-columns:1fr;gap:22px}
  .hero-img img{height:210px}
}

/* a focus area with no figure runs full width */
.topic.nofig{grid-template-columns:1fr}
.topic.nofig .topic-txt{max-width:78ch}

/* institution sub-headings on the people page */
.grouphead{font-size:15px;text-transform:uppercase;letter-spacing:.7px;color:var(--sb-dark-gray);
           margin:30px 0 14px;padding-bottom:7px;border-bottom:1px solid #e3e3e3}
.grouphead span{text-transform:none;letter-spacing:0;font-weight:400;color:var(--sb-mid-gray);
                font-size:13.5px}
.grouphead span::before{content:"· "}

/* ---- publications: year filter ---- */
.pubfilter{gap:5px}
.pubfilter button em{font-style:normal;opacity:.6;font-size:11.5px;margin-left:3px}
.pubfilter button.on em{opacity:.85}
ol.pubs li.yearhead{padding:22px 0 7px;border-bottom:2px solid var(--sb-red);
                    counter-increment:none;margin-top:6px}
ol.pubs li.yearhead::before{content:none}
ol.pubs li.yearhead span{font-size:19px;font-weight:700;color:var(--sb-black)}
ol.pubs li.yearhead:first-child{padding-top:0}

/* ---- news, its own styling (was borrowing the red People role colour) ---- */
.newsitem{padding:16px 0;border-bottom:1px solid #e9e9e9}
.newsitem:last-child{border-bottom:0}
.newsdate{font-size:12.5px;color:var(--sb-mid-gray);letter-spacing:.3px}
.newstitle{font-size:17px;margin:3px 0 5px;color:var(--sb-black)}
.newsbody{margin:0;font-size:14.5px;color:var(--sb-dark-gray);max-width:74ch}
.newsbody a{white-space:nowrap}

/* the remaining focus areas, stated once and quietly */
.alsoline{margin:22px 0 0;font-size:14px;color:var(--sb-mid-gray)}
.card .figure.noimg{background:#f2f2f2}

/* ---- join the laboratory ---- */
.join p{max-width:74ch;color:var(--sb-dark-gray);margin:0 0 14px}
.joincta{font-size:16px;font-weight:600;margin-top:20px !important}

/* ---- mission statement ---- */
.hero p.mission{font-size:20px;line-height:1.5;color:var(--sb-black);max-width:60ch;
                border-left:3px solid var(--sb-red);padding-left:18px;margin-bottom:20px}
@media (max-width:640px){.hero p.mission{font-size:17px;padding-left:14px}}
.hero h1{max-width:26ch}

/* ---- hero: mission / methods / impact ---- */
.triad{margin:26px 0 0;display:grid;gap:14px}
.triad dt{font-weight:700;color:var(--sb-red);font-size:13px;text-transform:uppercase;
          letter-spacing:.8px}
.triad dd{margin:4px 0 0;color:var(--sb-dark-gray);max-width:76ch;font-size:16px}

/* ---- funding band ---- */
.funding{padding:40px 0}
.fundlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fundlist{gap:14px}
.fundlist li{border:1px solid #e4e4e4;border-radius:4px;background:#fff;
             min-width:250px;min-height:104px;display:flex;align-items:center;justify-content:center}
.fundlist a{display:flex;flex-direction:column;align-items:center;justify-content:center;
            width:100%;height:100%;padding:18px 22px;text-decoration:none;color:inherit}
.fundlist li:hover{border-color:var(--sb-light-gray)}
.fundlist a:hover{text-decoration:none}
.fundname{font-size:14px;font-weight:600;color:var(--sb-dark-gray);text-align:center;line-height:1.35}
.fundsub{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--sb-red);
         font-weight:700;margin-top:5px}
.fundlist img{width:100%;max-width:210px;max-height:66px;object-fit:contain;display:block}
.fundnote{margin:16px 0 0;font-size:13px;color:var(--sb-mid-gray)}

/* ---- research tiles (image-forward, figures kept whole) ---- */
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.tile{display:flex;flex-direction:column;text-decoration:none;color:inherit;
      border:1px solid #e6e6e6;border-radius:3px;overflow:hidden;background:#fff;
      transition:box-shadow .15s ease,transform .15s ease}
.tile:hover{text-decoration:none;box-shadow:0 5px 18px rgba(0,0,0,.10);transform:translateY(-2px)}
.tileimg{display:block;background:#fafafa;border-bottom:1px solid #eee}
.tilefig{width:100%;height:132px;object-fit:contain;display:block;padding:6px}
.tilefig.noimg{height:132px;background:#f2f2f2}
.tiletext{display:block;padding:13px 15px 16px}
.tiletext strong{display:block;color:var(--sb-red);font-size:17px;margin-bottom:7px}
.tiletext span{display:block;color:var(--sb-dark-gray);font-size:14.5px;line-height:1.55}
.tile:hover .tiletext strong{text-decoration:underline}
.hero p.heromission{font-size:18px;color:var(--sb-dark-gray);max-width:70ch;margin:20px 0 0}

/* an h1 must exist for screen readers and search engines even when not shown */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
                 clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero p.heromission{font-size:19px;color:var(--text);max-width:72ch;margin:0}

/* ---- news items with thumbnails ---- */
.newsitem{display:flex;gap:16px;align-items:flex-start;padding:15px 0;border-bottom:1px solid #e9e9e9}
.newsitem:last-child{border-bottom:0}
.newsthumb{width:74px;height:74px;flex:0 0 74px;border-radius:4px;object-fit:cover;
           background:#f0f0f0;border:1px solid var(--sb-light-gray)}
.newsthumb.ph{display:block;background:linear-gradient(135deg,var(--sb-light-gray),#dcdcdc)}
.newsbody-wrap{min-width:0}

@media (max-width:400px){
  header.site .lab{font-size:18px}
  header.site .inst{font-size:13px}
}

/* on very narrow screens the two top-bar items wrap to two lines each;
   drop the department link and centre the university name */
@media (max-width:380px){
  .topbar-dept{display:none}
  .topbar .wrap{justify-content:center}
}