:root{
  --bg:#0b1020;
  --bg2:#070a14;
  --fg:#e5e7eb;
  --muted:#a3aab8;
  --line:rgba(255,255,255,.12);
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.09);
  --accent:#22d3ee;      /* cool blue */
  --accent2:#a78bfa;     /* light blue */
  --radius:12px;
  --max:1100px;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow2: 0 10px 28px rgba(0,0,0,.28);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(800px 520px at 92% 0%, rgba(167,139,250,.16), transparent 55%),
    radial-gradient(900px 600px at 50% 120%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  line-height:1.75;
  min-height:100vh;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{
  outline:3px solid rgba(34,211,238,.45);
  outline-offset:2px;
  border-radius:10px;
}
.wrap{ max-width:var(--max); margin:0 auto; padding:0 16px; }

/* Skip link */
.skip{
  position:absolute; left:-9999px; top:10px;
  padding:10px 12px; border-radius:999px;
  background:var(--accent); color:#fff; z-index:9999;
}
.skip:focus{ left:16px; }

/* Header */
header{
  border-bottom:1px solid var(--line);
  background:rgba(10,14,28,.55);
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(160%) blur(14px);
}
.topline{
  background:linear-gradient(90deg, rgba(34,211,238,.25), rgba(167,139,250,.10));
  color:var(--fg);
  font-size:12px;
}
.topline .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px;
  gap:10px;
  flex-wrap:wrap;
}
.topline a{ color:var(--accent); text-decoration:none; }
.topline a:hover{ color:#fff; text-decoration:underline; }

.brandbar{ padding:16px 0 12px; }
.brand{
  display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap;
}
.labname{
  display:flex; flex-direction:column; gap:4px;
  min-width:260px;
}
.labname strong{
  font-size:22px; letter-spacing:.2px;
  color:var(--fg);
}
.labname span{
  color:var(--muted);
  font-size:13px;
  font-weight:650;
}
.search{
  display:flex; gap:8px; align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 10px;
  background:rgba(255,255,255,.06);
  min-width:280px;
  max-width:420px;
}
.search input{
  border:0; outline:none; width:100%;
  font-size:14px;
  background:transparent;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  padding:10px 12px;
  font-weight:800;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--fg);
  cursor:pointer;
  white-space:nowrap;
}
.btn.primary{
  background:linear-gradient(135deg, rgba(34,211,238,1), rgba(167,139,250,1));
  border-color:rgba(167,139,250,.65);
  color:#0b1020;
}

.btn:hover{ border-color:rgba(167,139,250,.55); }
.btn.primary:hover{ filter:brightness(1.02); }

/* Nav */
nav{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
}
.navrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 0;
  flex-wrap:wrap;
}
.navlinks{
  display:flex; flex-wrap:wrap; gap:6px;
  align-items:center;
}
.navlinks a{ color:var(--accent); text-decoration:none; }
.navlinks a:hover{ background:rgba(34,211,238,.14); text-decoration:none; }
.navlinks a[aria-current="page"]{
  background:rgba(34,211,238,.22);
  color:var(--fg);
  text-decoration:none;
}
.hamburger{ display:none; }

/* Layout */
main{ padding:18px 0 60px; }
.grid{
  display:grid;
  grid-template-columns: 1fr 0.42fr;
  gap:18px;
  align-items:start;
}
.panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.06);
  overflow:hidden;
  box-shadow:var(--shadow2);
}
.panel .hd{
  padding:12px 14px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid var(--line);
  font-weight:950;
  color:var(--fg);
  font-size:14px;
}
.panel .bd{ padding:12px 14px; }
.block{ margin-bottom:18px; }

.small{ font-size:12px; color:var(--muted); font-weight:700; }
.note{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(34,211,238,.30);
  background:rgba(34,211,238,.10);
  border-radius:12px;
  color:rgba(167,139,250,.95);
  font-weight:750;
  font-size:13px;
}

/* Hero */
.hero{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(255,255,255,.06);
  box-shadow:var(--shadow2);
}
.heroTop{
  display:grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap:0;
  min-height:360px;
}
.heroImg{
  border-right:1px solid var(--line);
  position:relative;
  background:rgba(255,255,255,.06);
}
.heroText{
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.heroText h1{
  margin:0;
  font-size:26px;
  line-height:1.3;
  color:var(--fg);
}
.heroText p{ margin:0; color:rgba(229,231,235,.88); }
.heroActions{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:6px;
}
.meta{ color:var(--accent); text-decoration:none; }
.heroBottom{
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.04);
  padding:10px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-weight:800;
}

/* News list */
.newslist{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:10px;
}
.newslist li{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.06);
}
.date{ color:var(--muted); font-weight:900; font-size:12px; }
.title{ font-weight:900; color:var(--fg); }

/* Cards */
.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.card{
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  padding:12px;
}
.card h3{ margin:0; font-size:15px; color:var(--fg); }
.card p{ margin-top:8px; color:rgba(229,231,235,.88); font-size:13px; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tag{
  font-size:12px;
  font-weight:850;
  color:var(--muted);
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  padding:6px 10px;
  border-radius:999px;
}

/* CTA grid */
.ctaGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.ctaBox{ border:1px solid var(--line); border-radius:12px; padding:12px; background:rgba(255,255,255,.06); }
.ctaBox strong{ color:var(--fg); }
.ctaBox ul{ margin:8px 0 0 18px; padding:0; }
.ctaBox li{ margin:6px 0; }

/* Accordion */
.accordion{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
}
.accItem + .accItem{ border-top:1px solid var(--line); }
.accBtn{
  width:100%;
  border:0;
  background:rgba(255,255,255,.06);
  padding:12px 14px;
  font-weight:950;
  color:var(--fg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  text-align:left;
}
.accBtn:hover{ background:#f8fbff; }
.accBtn span{ color:var(--muted); font-weight:850; }
.accPanel{ display:none; padding:0 14px 12px; }
.accPanel[data-open="true"]{ display:block; }
.pub{
  padding:10px 0;
  border-top:1px dashed var(--line);
  font-size:13px;
  color:rgba(229,231,235,.88);
}
.pub:first-child{ border-top:0; padding-top:6px; }
.doi{ font-weight:950; }

/* Sidebar */
.side .mini{
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.06);
}
.side h3{ margin:0 0 10px; font-size:14px; color:var(--fg); }
.side a.block{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  font-weight:900;
  color:var(--fg);
  margin-top:8px;
}
.side a.block:hover{ background:rgba(34,211,238,.14); text-decoration:none; }

/* Slideshow */
.slideshow{
  position:relative;
  width:100%;
  height:100%;
  min-height:320px;
  display:block;
  overflow:hidden;
}
.slideshow img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition: opacity .8s ease;
  background:rgba(255,255,255,.06);
}
.slideshow img.is-active{ opacity:1; }
.slideBtn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(229,231,235,.9);
  background:rgba(15,23,42,.55);
  color:var(--fg);
  font-size:22px;
  font-weight:950;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.slideBtn:hover{ background:rgba(255,255,255,.95); }
.slideBtn.prev{ left:10px; }
.slideBtn.next{ right:10px; }
.slideDots{
  position:absolute;
  left:12px;
  right:12px;
  bottom:10px;
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
}
.slideDot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(229,231,235,.95);
  background:rgba(255,255,255,.18);
  cursor:pointer;
}
.slideDot[aria-current="true"]{
  background:rgba(34,211,238,.85);
  border-color:rgba(34,211,238,.85);
}
@media (prefers-reduced-motion: reduce){
  .slideshow img{ transition:none; }
}

/* Footer */
footer{
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.04);
  padding:26px 0;
  color:rgba(229,231,235,.88);
}
.foot{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:16px;
  align-items:start;
}
.foot h3{ margin:0 0 10px; font-size:14px; color:var(--fg); }
.copyright{ margin-top:16px; font-size:12px; color:var(--muted); font-weight:700; }

/* Responsive */
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .ctaGrid{ grid-template-columns: 1fr; }
  .foot{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .heroTop{ grid-template-columns: 1fr; }
  .heroImg{ border-right:0; border-bottom:1px solid var(--line); }
  .slideshow{ min-height:240px; }
  .search{ display:none; }
}
@media (max-width: 760px){
  .hamburger{ display:inline-flex; }
  .navlinks{ display:none; }
  .navlinks.open{ display:flex; }
}


/* Dark theme input text */
.search input{ color:var(--fg); }
.search input::placeholder{ color:rgba(229,231,235,.55); }

/* Micro-interactions */
.panel, .card, .hero{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.panel:hover, .card:hover, .hero:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 70px rgba(0,0,0,.50);
  border-color: rgba(167,139,250,.25);
}
@media (prefers-reduced-motion: reduce){
  .panel, .card, .hero{ transition:none; }
  .panel:hover, .card:hover, .hero:hover{ transform:none; }
}



/* =========================================================
   COOL REFRESH PLUS (layout unchanged)
   - richer background, sharper glass, subtle glow accents
   - accessible motion (respects prefers-reduced-motion)
   ========================================================= */

/* Slightly refine palette */
:root{
  --glow: rgba(34,211,238,.38);
  --glow2: rgba(167,139,250,.22);
  --edge: rgba(255,255,255,.14);
  --edge2: rgba(167,139,250,.18);
}

/* Background: add subtle grid + animated aurora layer */
body{
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(34,211,238,.26), transparent 60%),
    radial-gradient(900px 560px at 92% 0%, rgba(167,139,250,.20), transparent 55%),
    radial-gradient(900px 660px at 50% 120%, rgba(34,211,238,.12), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    radial-gradient(closest-side at 30% 30%, rgba(34,211,238,.14), transparent 70%),
    radial-gradient(closest-side at 70% 35%, rgba(167,139,250,.10), transparent 70%),
    radial-gradient(closest-side at 55% 75%, rgba(34,211,238,.10), transparent 70%);
  filter: blur(40px);
  opacity:.75;
  pointer-events:none;
  z-index:-1;
  transform: translate3d(0,0,0);
  animation: aurora 14s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1); }
  100%{ transform: translate3d(2%, 1.5%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; }
}

/* Header / nav: cleaner glass and edge highlight */
header{
  box-shadow: 0 10px 40px rgba(0,0,0,.28);
}
.topline{
  border-bottom: 1px solid rgba(255,255,255,.10);
}
nav{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Links: subtle glow on hover (no layout change) */
a:hover{
  text-decoration:none;
}
a:hover{
  text-shadow: 0 0 18px rgba(34,211,238,.18);
}

/* Nav pills: add thin outline + glow */
.navlinks a{
  border: 1px solid transparent;
}
.navlinks a:hover{
  border-color: rgba(167,139,250,.25);
  box-shadow: 0 0 0 4px rgba(34,211,238,.10);
}
.navlinks a[aria-current="page"]{
  border-color: rgba(167,139,250,.30);
  box-shadow: 0 0 0 4px rgba(34,211,238,.12), 0 10px 26px rgba(0,0,0,.24);
}

/* Panels / cards: stronger glass + edge lighting */
.panel, .card, .hero{
  border-color: var(--edge);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.panel .hd{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
}
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
}
.card:hover{
  border-color: var(--edge2);
}

/* Buttons: modern glow + crisp edges */
.btn{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.btn:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,.26), 0 0 0 4px rgba(34,211,238,.10);
}
.btn.primary{
  box-shadow: 0 16px 40px rgba(0,0,0,.34), 0 0 26px var(--glow);
}
.btn.primary:hover{
  box-shadow: 0 18px 52px rgba(0,0,0,.40), 0 0 34px rgba(34,211,238,.48);
}

/* Hero image area: add subtle vignette overlay */
.heroImg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 20% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(closest-side at 80% 0%, rgba(34,211,238,.12), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.30));
  mix-blend-mode: normal;
}

/* Slideshow controls: sharper, more premium */
.slideBtn{
  border-color: rgba(255,255,255,.18);
  background: rgba(15,23,42,.45);
  box-shadow: 0 10px 28px rgba(0,0,0,.38);
}
.slideBtn:hover{
  background: rgba(15,23,42,.60);
  box-shadow: 0 12px 34px rgba(0,0,0,.45), 0 0 0 4px rgba(34,211,238,.10);
}
.slideDot{
  border-color: rgba(255,255,255,.22);
}

/* Tables / lists readability tweaks */
.small{
  color: rgba(229,231,235,.70);
}
.date{
  color: rgba(229,231,235,.62);
}

/* Footer: more depth */
footer{
  border-top-color: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Ensure good contrast for note cards */
.note{
  border-color: rgba(34,211,238,.28);
  background: rgba(34,211,238,.09);
}



/* =========================================================
   MINIMAL LUXURY (layout unchanged, glow reduced)
   - cleaner background, fewer effects, premium typography feel
   ========================================================= */

/* Tone down accents and glow */
:root{
  --accent:#8fb6ff;      /* slightly muted blue */
  --accent2:#e5e7eb;     /* keep text crisp */
  --glow: rgba(34,211,238,.10);
  --glow2: rgba(167,139,250,.06);
  --edge: rgba(255,255,255,.10);
  --edge2: rgba(255,255,255,.16);
  --shadow: 0 16px 44px rgba(0,0,0,.48);
  --shadow2: 0 10px 28px rgba(0,0,0,.34);
}

/* Background: simplify (no grid, no aurora animation) */
body{
  background:
    radial-gradient(900px 560px at 12% -10%, rgba(143,182,255,.14), transparent 62%),
    radial-gradient(820px 520px at 92% 0%, rgba(255,255,255,.06), transparent 58%),
    linear-gradient(180deg, #080b14, #03030a);
}
body::before{ display:none !important; }

/* Remove glowing text hover */
a:hover{
  text-shadow: none !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(143,182,255,.55);
}

/* Header: more restrained */
header{
  box-shadow: 0 10px 34px rgba(0,0,0,.30);
  border-bottom-color: rgba(255,255,255,.10);
}
.topline{
  background: rgba(255,255,255,.04);
  color: rgba(229,231,235,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
nav{
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Nav pills: minimal outline, no big glow */
.navlinks a{
  border: 1px solid transparent;
}
.navlinks a:hover{
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
  background: rgba(255,255,255,.06);
}
.navlinks a[aria-current="page"]{
  border-color: rgba(255,255,255,.18);
  box-shadow: none;
  background: rgba(255,255,255,.08);
}

/* Panels/cards/hero: cleaner glass, less shine */
.panel, .card, .hero{
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}
.panel .hd{
  background: rgba(255,255,255,.045);
}

/* Reduce hover lift and remove intense shadow */
.panel, .card, .hero{
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.panel:hover, .card:hover, .hero:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 42px rgba(0,0,0,.38);
  border-color: rgba(255,255,255,.14);
}

/* Buttons: premium but subtle (no heavy glow) */
.btn{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}
.btn:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,.26);
}
.btn.primary{
  /* softer gradient, no glow */
  background: linear-gradient(135deg, rgba(143,182,255,1), rgba(196,220,255,1));
  border-color: rgba(255,255,255,.16);
  color:#03030a;
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
}
.btn.primary:hover{
  filter: brightness(1.01);
  box-shadow: 0 14px 28px rgba(0,0,0,.30);
}

/* Hero image overlay: remove vignette heaviness */
.heroImg::after{
  background:
    radial-gradient(closest-side at 20% 10%, rgba(255,255,255,.05), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
}

/* Slideshow controls: minimal */
.slideBtn{
  background: rgba(15,23,42,.38);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.34);
}
.slideBtn:hover{
  background: rgba(15,23,42,.48);
  box-shadow: 0 12px 26px rgba(0,0,0,.36);
}
.slideDot{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
}
.slideDot[aria-current="true"]{
  background: rgba(143,182,255,.75);
  border-color: rgba(143,182,255,.75);
}

/* Notes: subtle */
.note{
  background: rgba(143,182,255,.08);
  border-color: rgba(143,182,255,.18);
  color: rgba(229,231,235,.92);
}

/* Reduce general "glowiness" */
.btn.primary, .navlinks a, .panel, .card, .hero{
  text-shadow: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .panel, .card, .hero, .btn{ transition:none !important; }
  .panel:hover, .card:hover, .hero:hover, .btn:hover{ transform:none !important; }
}



/* =========================================================
   NAV TYPOGRAPHY / SPACING MATCH
   (matches lab_classic_multipage_neutral_bigphoto.zip)
   ========================================================= */
.navrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  flex-wrap:wrap;
}
.navlinks{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.navlinks a{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:850;
  letter-spacing:0;
  line-height:1.2;
}



/* =========================================================
   GLASS + GRADIENT + SCROLL (layout unchanged)
   Inspired by the attached example: dark base + radial gradients
   + grid/noise + glass panels + scroll reveal.
   ========================================================= */

/* Background layers (no HTML changes required; JS injects divs) */
.bg-grid{
  position:fixed; inset:0; pointer-events:none; z-index:-2;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(900px 600px at 50% 20%, rgba(0,0,0,1), transparent 70%);
  opacity:.22;
}
.bg-noise{
  position:fixed; inset:-50%; pointer-events:none; z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  transform:rotate(10deg);
  opacity:.08;
  mix-blend-mode:overlay;
}

/* Dark gradient base (keeps your minimal luxury tone, adds depth) */
body{
  background:
    radial-gradient(1200px 820px at 10% 10%, rgba(143,182,255,.18), transparent 55%),
    radial-gradient(920px 620px at 90% 18%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(980px 680px at 55% 92%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, #050611, #03030a);
}

/* Header: glassy + crisp */
header{
  background: rgba(7,10,18,.55);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Panels/cards: glass polish */
.panel, .card, .hero{
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
  border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(14px) saturate(140%);
}

/* Subtle divider line like "premium" */
hr, .divider{
  border:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  opacity:.75;
}

/* Buttons: less glow, more crisp */
.btn{
  backdrop-filter: blur(10px);
}
.btn.primary{
  box-shadow: 0 14px 28px rgba(0,0,0,.30);
}

/* Scroll reveal (works with JS) */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.on{
  opacity:1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; transform:none; opacity:1; }
}

/* Slightly cleaner underline behavior */
a:hover{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(143,182,255,.55);
}



/* =========================================================
   PURPLE × CYAN TONE (layout unchanged)
   Goal: match the attached vibe (purple/cyan gradients + glass)
   ========================================================= */

:root{
  /* core accents */
  --accent:#22d3ee;            /* cyan */
  --accent2:#c4b5fd;           /* soft purple */
  /* used by some variants */
  --glow: rgba(34,211,238,.18);
  --glow2: rgba(196,181,253,.12);
}

/* Background: purple/cyan radials (keep dark base) */
body{
  background:
    radial-gradient(1200px 820px at 10% 8%, rgba(196,181,253,.20), transparent 55%),
    radial-gradient(920px 620px at 90% 18%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(980px 680px at 55% 92%, rgba(34,211,238,.07), transparent 62%),
    radial-gradient(840px 560px at 55% -12%, rgba(167,139,250,.10), transparent 58%),
    linear-gradient(180deg, #050611, #03030a);
}

/* Topline + header subtle tint */
.topline{
  background: linear-gradient(90deg, rgba(196,181,253,.14), rgba(34,211,238,.08));
}
header{
  background: rgba(7,10,18,.55);
}

/* Links */
a{ color: var(--accent); }
a:hover{
  text-decoration-color: rgba(34,211,238,.60);
}

/* Nav pills keep typography from neutral, only color treatment */
.navlinks a:hover{
  background: rgba(34,211,238,.08);
  border-color: rgba(34,211,238,.18);
}
.navlinks a[aria-current="page"]{
  background: rgba(196,181,253,.10);
  border-color: rgba(196,181,253,.20);
}

/* Buttons */
.btn.primary{
  background: linear-gradient(135deg, rgba(196,181,253,1), rgba(34,211,238,1));
  border-color: rgba(255,255,255,.18);
  color:#03030a;
  box-shadow: 0 14px 30px rgba(0,0,0,.32);
}
.btn.primary:hover{
  filter: brightness(1.02);
}

/* Glass borders */
.panel, .card, .hero{
  border-color: rgba(255,255,255,.12);
}
.panel:hover, .card:hover, .hero:hover{
  border-color: rgba(34,211,238,.18);
}

/* Notes */
.note{
  background: rgba(34,211,238,.07);
  border-color: rgba(34,211,238,.16);
  color: rgba(229,231,235,.92);
}

/* Slideshow dots / controls */
.slideDot[aria-current="true"]{
  background: rgba(34,211,238,.80);
  border-color: rgba(34,211,238,.80);
}
.slideBtn:hover{
  box-shadow: 0 12px 26px rgba(0,0,0,.36), 0 0 0 4px rgba(196,181,253,.10);
}



/* =========================================================
   BACKGROUND MATCH (from attached index_v2_cool.html)
   Layout untouched. Only background palette/gradients tuned.
   ========================================================= */
:root{
  --bg0:#050712;
  --bg1:#0A0F22;
  /* keep your existing accents; background tone uses violet/cyan/emerald blend */
}

body{
  background:
    radial-gradient(1200px 800px at 12% 12%, rgba(124,58,237,.22), transparent 58%),
    radial-gradient(900px 650px at 92% 18%, rgba(34,211,238,.16), transparent 62%),
    radial-gradient(900px 650px at 62% 92%, rgba(52,211,153,.12), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* Grid/noise tuning to match */
.bg-grid{
  background-size: 72px 72px;
  mask-image: radial-gradient(900px 600px at 50% 20%, rgba(0,0,0,1), transparent 72%);
  opacity:.22;
}
.bg-noise{ opacity:.09; }



/* =========================================================
   HOME HERO: slideshow spans full width (extends to the right)
   Layout below the hero (News / Quick Links / At a glance) unchanged.
   ========================================================= */
.home .heroTop{
  position:relative;
  grid-template-columns: 1fr; /* image spans full width */
}
.home .heroImg{
  border-right:0;
}
.home .heroText{
  position:absolute;
  right:16px;
  top:16px;
  bottom:16px;
  max-width:420px;
  background: linear-gradient(180deg, rgba(7,10,18,.62), rgba(7,10,18,.42));
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 18px 50px rgba(0,0,0,.42);
}
@media (max-width: 900px){
  .home .heroText{
    position:static;
    max-width:none;
    background:transparent;
    border:0;
    backdrop-filter:none;
    box-shadow:none;
  }
}



/* =========================================================
   HOME HERO: Image left + Text right (no overlay)
   ========================================================= */
.home .heroTop{
  position:static;
  grid-template-columns: 1.35fr 0.65fr; /* photo : text */
}
.home .heroImg{
  border-right:1px solid var(--line);
  border-bottom:0;
}
.home .heroText{
  position:static;
  right:auto; top:auto; bottom:auto;
  max-width:none;
  background:transparent;
  border:0;
  backdrop-filter:none;
  box-shadow:none;
}

/* Keep mobile as 1-column (existing rule) */
@media (max-width: 900px){
  .home .heroTop{ grid-template-columns: 1fr; }
  .home .heroImg{ border-right:0; border-bottom:1px solid var(--line); }
  .home .heroText{ background:transparent; border:0; }
}



/* JST A-STEP banner (At a glance bottom) */
.sponsorBanner{
  margin-top:12px;
}
.sponsorBanner a{
  display:block;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.sponsorBanner img{
  display:block;
  width:100%;
  height:auto;
}



/* =========================================================
   DODGER BLUE THEME (layout/structure unchanged)
   Primary hue: DodgerBlue #1E90FF
   ========================================================= */
:root{
  --accent:#1E90FF;          /* DodgerBlue */
  --accent2:#7EC3FF;         /* light blue highlight */
  --glow: rgba(34,211,238,.18);
  --glow2: rgba(126,195,255,.10);
}

/* Global link color */
a{ color: var(--accent); }
a:hover{ text-decoration-color: rgba(34,211,238,.60); }

/* Background: shift to blue-centric radials */
body{
  background:
    radial-gradient(1200px 820px at 10% 10%, rgba(34,211,238,.22), transparent 58%),
    radial-gradient(980px 660px at 90% 18%, rgba(126,195,255,.14), transparent 62%),
    radial-gradient(980px 680px at 55% 92%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, #050611, #03030a);
}

/* Topline tint (if present in some pages) */
.topline{
  background: linear-gradient(90deg, rgba(34,211,238,.14), rgba(126,195,255,.06));
}

/* Nav pills colors (typography preserved) */
.navlinks a:hover{
  background: rgba(34,211,238,.08);
  border-color: rgba(34,211,238,.18);
}
.navlinks a[aria-current="page"]{
  background: rgba(34,211,238,.10);
  border-color: rgba(34,211,238,.22);
}

/* Primary CTA */
.btn.primary{
  background: linear-gradient(135deg, rgba(34,211,238,1), rgba(126,195,255,1));
  border-color: rgba(255,255,255,.18);
  color:#03030a;
}
.btn.primary:hover{ filter: brightness(1.02); }

/* Notes / emphasis */
.note{
  background: rgba(34,211,238,.07);
  border-color: rgba(34,211,238,.16);
}

/* Cards hover edge */
.panel:hover, .card:hover, .hero:hover{
  border-color: rgba(34,211,238,.18);
}

/* Slideshow indicators */
.slideDot[aria-current="true"]{
  background: rgba(34,211,238,.82);
  border-color: rgba(34,211,238,.82);
}
.slideBtn:hover{
  box-shadow: 0 12px 26px rgba(0,0,0,.36), 0 0 0 4px rgba(34,211,238,.10);
}



/* =========================================================
   DODGER BLUE + NOBLE PURPLE (layout/structure unchanged)
   Adds a royal purple accent and purple-blue gradients.
   ========================================================= */
:root{
  --accent:#1E90FF;          /* DodgerBlue */
  --accent2:#8B5CF6;         /* Noble purple */
  --accent3:#C4B5FD;         /* soft lavender highlight */
  --glow: rgba(34,211,238,.16);
  --glow2: rgba(167,139,250,.12);
}

/* Background: add a purple radial so the whole site feels richer */
body{
  background:
    radial-gradient(1100px 780px at 14% 10%, rgba(34,211,238,.22), transparent 58%),
    radial-gradient(900px 640px at 88% 14%, rgba(167,139,250,.18), transparent 60%),
    radial-gradient(980px 680px at 55% 92%, rgba(196,181,253,.10), transparent 62%),
    linear-gradient(180deg, #050611, #03030a);
}

/* Links: stay blue, but hover underline leans purple */
a{ color: var(--accent); }
a:hover{ text-decoration-color: rgba(167,139,250,.60); }

/* Nav: subtle purple highlight on current */
.navlinks a[aria-current="page"]{
  background: rgba(167,139,250,.10);
  border-color: rgba(167,139,250,.20);
}
.navlinks a:hover{
  background: rgba(34,211,238,.08);
  border-color: rgba(34,211,238,.18);
}

/* Primary CTA: purple → blue gradient (premium) */
.btn.primary{
  background: linear-gradient(135deg, rgba(167,139,250,1), rgba(34,211,238,1));
  border-color: rgba(255,255,255,.18);
  color:#03030a;
}
.btn.primary:hover{ filter: brightness(1.02); }

/* Notes / emphasis: lavender tint */
.note{
  background: rgba(167,139,250,.08);
  border-color: rgba(167,139,250,.18);
}

/* Slideshow indicators: blue with a purple halo on hover */
.slideDot[aria-current="true"]{
  background: rgba(34,211,238,.82);
  border-color: rgba(34,211,238,.82);
}
.slideBtn:hover{
  box-shadow: 0 12px 26px rgba(0,0,0,.36), 0 0 0 4px rgba(167,139,250,.10);
}



/* =========================================================
   BACK TO CYAN (layout/structure unchanged)
   Restores the original cyan-forward accent.
   ========================================================= */
:root{
  --accent:#22d3ee;            /* cyan */
  --accent2:#a78bfa;           /* light blue */
  --accent3:#c4b5fd;           /* optional lavender highlight (subtle) */
  --glow: rgba(34,211,238,.16);
  --glow2: rgba(167,139,250,.10);
}

/* Background: cyan-forward radials (subtle purple only) */
body{
  background:
    radial-gradient(1200px 820px at 10% 8%, rgba(34,211,238,.20), transparent 58%),
    radial-gradient(900px 650px at 90% 18%, rgba(167,139,250,.14), transparent 62%),
    radial-gradient(980px 680px at 55% 92%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(840px 560px at 55% -12%, rgba(196,181,253,.07), transparent 60%),
    linear-gradient(180deg, #050611, #03030a);
}

/* Links + accents */
a{ color: var(--accent); }
a:hover{ text-decoration-color: rgba(34,211,238,.60); }

/* Nav pills */
.navlinks a:hover{
  background: rgba(34,211,238,.08);
  border-color: rgba(34,211,238,.18);
}
.navlinks a[aria-current="page"]{
  background: rgba(34,211,238,.10);
  border-color: rgba(34,211,238,.22);
}

/* Primary CTA */
.btn.primary{
  background: linear-gradient(135deg, rgba(34,211,238,1), rgba(167,139,250,1));
  border-color: rgba(255,255,255,.18);
  color:#03030a;
}

/* Notes */
.note{
  background: rgba(34,211,238,.07);
  border-color: rgba(34,211,238,.16);
}

/* Slideshow dots */
.slideDot[aria-current="true"]{
  background: rgba(34,211,238,.82);
  border-color: rgba(34,211,238,.82);
}
.slideBtn:hover{
  box-shadow: 0 12px 26px rgba(0,0,0,.36), 0 0 0 4px rgba(34,211,238,.10);
}



/* =========================================================
   PURPLE FROM TOP-LEFT (layout/structure unchanged)
   Keep cyan accents, but shift the main background "source"
   to purple coming from the top-left.
   ========================================================= */
:root{
  --accent:#22d3ee;            /* cyan (keep) */
  --accent2:#a78bfa;
  --purple:#a78bfa;            /* soft royal purple */
}

/* Background: purple primary from top-left, cyan secondary */
body{
  background:
    radial-gradient(1200px 820px at 8% 6%, rgba(167,139,250,.22), transparent 58%),
    radial-gradient(980px 660px at 92% 18%, rgba(34,211,238,.16), transparent 62%),
    radial-gradient(980px 680px at 55% 92%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, #050611, #03030a);
}

/* Also tint the grid mask a touch by increasing visibility near top-left */
.bg-grid{
  mask-image: radial-gradient(900px 600px at 35% 18%, rgba(0,0,0,1), transparent 72%);
}



/* =========================================================
   PURPLE MORE (top-left stronger)
   ========================================================= */
body{
  background:
    radial-gradient(1300px 900px at 6% 4%, rgba(167,139,250,.32), transparent 58%),
    radial-gradient(980px 660px at 92% 18%, rgba(34,211,238,.14), transparent 62%),
    radial-gradient(980px 680px at 55% 92%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, #050611, #03030a);
}
.bg-grid{
  opacity:.24;
  mask-image: radial-gradient(980px 660px at 28% 14%, rgba(0,0,0,1), transparent 74%);
}



/* =========================================================
   VIVID PURPLE "SPOTLIGHT" (dark room feel)
   - more saturated purple
   - layered glow (screen blend) from top-left
   - keeps layout unchanged
   ========================================================= */
:root{
  --purpleV:#7c3aed;            /* vivid purple */
  --purpleV2:#ec4899;           /* magenta-purple */
}

/* Main background: richer, brighter purple from top-left */
body{
  background:
    radial-gradient(900px 520px at 8% 6%, rgba(124,58,237,.55), transparent 62%),
    radial-gradient(1200px 900px at 12% 10%, rgba(236,72,153,.22), transparent 64%),
    radial-gradient(980px 660px at 92% 18%, rgba(34,211,238,.08), transparent 62%),
    radial-gradient(980px 680px at 55% 92%, rgba(255,255,255,.05), transparent 62%),
    linear-gradient(180deg, #050611, #020207);
}

/* Add a "light beam" layer (no HTML change) */
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(closest-side at 18% 14%, rgba(124,58,237,.36), transparent 68%),
    radial-gradient(closest-side at 26% 18%, rgba(236,72,153,.20), transparent 72%),
    radial-gradient(closest-side at 42% 8%, rgba(255,255,255,.06), transparent 70%);
  filter: blur(28px);
  opacity:.92;
  mix-blend-mode: screen; /* makes it feel like light in darkness */
  transform: translate3d(0,0,0);
}

/* Slightly crisp edges so glass looks premium under spotlight */
.panel, .card, .hero{
  border-color: rgba(255,255,255,.13);
}
.panel:hover, .card:hover, .hero:hover{
  border-color: rgba(124,58,237,.22);
}

/* Cyan accents stay, but hover halo uses purple */
a:hover{ text-decoration-color: rgba(124,58,237,.65); }
.slideBtn:hover{
  box-shadow: 0 12px 26px rgba(0,0,0,.36), 0 0 0 4px rgba(124,58,237,.12);
}

@media (prefers-reduced-motion: reduce){
  body::after{ display:none; }
}


/* Stacked banners spacing */
.sponsorBanner + .sponsorBanner{ margin-top:10px; }


/* Banner column heading */
section.panel.block[aria-label="Banner"] .hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
}



/* =========================================================
   Banner column: remove the single outer border that wraps multiple banners
   ========================================================= */
section.panel.block[aria-label="Banner"]{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
section.panel.block[aria-label="Banner"] .bd{
  padding:0 !important; /* remove inner padding so it doesn't look like a card */
}



/* =========================================================
   HERO: 3rd photo (lab3) slightly higher framing
   ========================================================= */
.home .slideshow img[src*="lab3"]{
  object-position: 50% 8%; /* slightly show more top */
}



/* =========================================================
   HERO: 3rd photo (lab3) tiny adjustment downward
   ========================================================= */
.home .slideshow img[src*="lab3"]{
  object-position: 50% 10%;
}



/* =========================================================
   HERO: 3rd photo (lab3) tiny adjustment downward (v2)
   ========================================================= */
.home .slideshow img[src*="lab3"]{
  object-position: 50% 12%;
}



/* =========================================================
   HERO: 3rd photo (lab3) adjustment downward (v3)
   ========================================================= */
.home .slideshow img[src*="lab3"]{
  object-position: 50% 16%;
}



/* =========================================================
   HERO: 3rd photo (lab3) adjustment downward (v4)
   ========================================================= */
.home .slideshow img[src*="lab3"]{
  object-position: 50% 20%;
}



/* =========================================================
   HERO: 3rd photo (lab3) adjustment downward (v5)
   ========================================================= */
.home .slideshow img[src*="lab3"]{
  object-position: 50% 24%;
}



/* =========================================================
   HERO: 3rd photo (lab3) adjustment downward (v6)
   ========================================================= */
.home .slideshow img[src*="lab3"]{
  object-position: 50% 28%;
}



/* =========================================================
   HERO: 3rd photo (lab3) back up slightly from v6
   ========================================================= */
.home .slideshow img[src*="lab3"]{
  object-position: 50% 26%;
}



/* =========================================================
   HERO: 3rd photo (lab3) back up more
   ========================================================= */
.home .slideshow img[src*="lab3"]{
  object-position: 50% 22%;
}



/* Hero two-tier message */
.heroSlogan{
  letter-spacing:.01em;
}
.heroLead{
  margin-top:10px;
  color: rgba(229,231,235,.82);
  font-size: .92rem;
  line-height: 1.65;
}



/* =========================================================
   HERO slideshow: slightly zoom the 2nd image only
   ========================================================= */
.home .slideshow img:nth-of-type(2){
  transform: scale(1.06);
  transform-origin: 50% 50%;
}



/* =========================================================
   HERO slideshow: slightly zoom the 3rd image as well
   ========================================================= */
.home .slideshow img:nth-of-type(3){
  transform: scale(1.04);
  transform-origin: 50% 50%;
}



/* =========================================================
   HERO slideshow: reduce zoom to subtle 1.01 (2nd & 3rd)
   ========================================================= */
.home .slideshow img:nth-of-type(2),
.home .slideshow img:nth-of-type(3){
  transform: scale(1.01);
  transform-origin: 50% 50%;
}



/* =========================================================
   HERO slideshow: 2nd = 1.01, 3rd = 1.005 (subtle)
   ========================================================= */
.home .slideshow img:nth-of-type(2){
  transform: scale(1.01);
  transform-origin: 50% 50%;
}
.home .slideshow img:nth-of-type(3){
  transform: scale(1.005);
  transform-origin: 50% 50%;
}



/* =========================================================
   HERO slideshow: 2nd = 1.01, 3rd = 1.002 (ultra subtle)
   ========================================================= */
.home .slideshow img:nth-of-type(2){
  transform: scale(1.01);
  transform-origin: 50% 50%;
}
.home .slideshow img:nth-of-type(3){
  transform: scale(1.002);
  transform-origin: 50% 50%;
}



/* =========================================================
   Members: align column widths with Students (photo vs names)
   - Left column: Professor (matches Students photo column)
   - Right column: Assistant Professor (matches Students names column)
   ========================================================= */
:root{
  --membersColLeft: 0.92fr;
  --membersColRight: 1.08fr;
}

.cards{
  grid-template-columns: var(--membersColLeft) var(--membersColRight);
}

.studentsSplit{
  display:grid;
  grid-template-columns: var(--membersColLeft) var(--membersColRight);
  gap: 12px;
  align-items: start;
}

@media (max-width: 860px){
  .cards{ grid-template-columns: 1fr; }
  .studentsSplit{ grid-template-columns: 1fr; }
}

.studentsPhoto{
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
.studentsPhoto img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.studentsNames{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.studentNameItem{
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: rgba(229,231,235,.90);
  line-height: 1.3;
  font-size: .95rem;
}



/* =========================================================
   Members: single column (Professor full width)
   ========================================================= */
.members .cards{
  grid-template-columns: 1fr !important;
}



/* =========================================================
   Members page: stack cards and merge Professor + Students
   ========================================================= */
.page-members .cards{
  grid-template-columns: 1fr !important;
}
.page-members .cardDivider{
  border: none;
  height: 1px;
  background: var(--line);
  margin: 14px 0;
  opacity: .9;
}



/* =========================================================
   Members page: Students names in 2 columns
   ========================================================= */
.page-members .studentsNames{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
}
@media (max-width: 720px){
  .page-members .studentsNames{ grid-template-columns: 1fr; }
}

/* Students: role label above name (small) */
.studentRole{
  font-size: .78rem;
  color: rgba(229,231,235,.65);
  line-height: 1.2;
  margin-bottom: 4px;
}
.studentName{
  font-size: .95rem;
  color: rgba(229,231,235,.92);
  line-height: 1.25;
}



/* =========================================================
   Header: make lab title slightly larger and shift brand to the right
   ========================================================= */
.brand{
  padding-left: 10px;
}

.labname strong{
  font-size: 28px;
}

.labname .sub{
  margin-left: 2px;
}



/* =========================================================
   Header: pull right-side items slightly left (Join / Updated)
   ========================================================= */
.brand{
  padding-right: 18px;
}
.navrow{
  padding-right: 18px;
}



/* =========================================================
   Footer: make Links items match the "small" department text
   ========================================================= */
footer .foot a{
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}
footer .foot a:hover,
footer .foot a:focus-visible{
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}



/* =========================================================
   HOME About: slightly larger text
   ========================================================= */
section[aria-labelledby="aboutTitle"] .bd > p{
  font-size: 1.05rem;
}
section[aria-labelledby="aboutTitle"] .bd .small{
  font-size: 0.95rem;
  line-height: 1.7;
}



/* =========================================================
   Page spacing: add a HOME-like gap between nav and first panel
   ========================================================= */
main#main > .panel:first-child,
main#main > section.panel:first-child{
  margin-top: 16px;
}



/* =========================================================
   Publications: Selected Publications (year accordion)
   ========================================================= */
.pubH2{
  margin: 0;
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(229,231,235,.92);
}
.yearAccordion{ margin-top: 12px; display: grid; gap: 10px; }

.yearAcc{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
}

.yearSum{
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 800;
  color: rgba(229,231,235,.92);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.yearSum::-webkit-details-marker{ display:none; }
.yearSum::after{
  content: "＋";
  color: rgba(229,231,235,.55);
  font-weight: 900;
  font-size: 1.0rem;
}
.yearAcc[open] .yearSum::after{ content: "－"; }

.pubList{
  margin: 0;
  padding: 0 14px 14px 14px;
  list-style: none;
  display: grid;
  gap: 10px;
}

.pubList li{
  color: rgba(229,231,235,.86);
  line-height: 1.6;
  font-size: .95rem;
}

.pubList li a{
  color: rgba(167,210,255,.92);
  text-decoration: none;
}
.pubList li a:hover,
.pubList li a:focus-visible{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pubList li.TOC img{
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}

.pubList li.TOC{
  padding: 6px 0 2px 0;
}




/* Full list link under Selected Publications */
.pubFullList{margin-top:12px;}
.pubFullList a{font-size:14px;font-weight:600;}


/* PI layout adjustments */
.piSplit{
  grid-template-columns: max-content 1fr;
  /* photo : text = 1/3 : 2/3 */
}
.piSplit .piPhoto{
  margin: 0;
  border: none;
  overflow: visible;
  background: transparent;
  justify-self: start;
  display: inline-block;
  width: fit-content;
}

.piPhoto img{
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 270px; /* scale down responsively while preserving original aspect ratio */
  object-fit: contain;
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}
/* Principal Investigator block: keep 2 columns (photo ~1/3, text ~2/3) and force text to a single column */
.piSplit{
  grid-template-columns: max-content 1fr;
  }
.piNames{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.piNames > *{ display: block; }

.piNames .studentName{ margin-bottom: 10px;   font-size: 1.15rem;
}

/* Make PI affiliation / links / CV header slightly larger */
.piNames .studentRole{
  font-size: .92rem;
  line-height: 1.35;
}
.piNames .studentRole a{
  font-size: inherit;
}
.piNames .piBioTitle{
  font-size: .92rem;
}




.piBio{ margin-top: 14px; }

details.piBio > summary::-webkit-details-marker{ display:none; }
details.piBio > summary::marker{ content:""; }

.piBioTitle{ font-weight: 700; cursor: pointer; list-style: none; }

/* Subtle cue that the bio is collapsible */
.piBioTitle::after{
  content: "▸";
  display: inline-block;
  margin-left: 0.4em;
  opacity: 0.6;
  font-weight: 400;
  transform: translateY(-0.02em);
  transition: transform 0.2s ease;
}
details.piBio[open] > summary.piBioTitle::after{
  transform: rotate(90deg) translateY(-0.02em);
}
.piBioTitle:hover{ text-decoration: underline; text-underline-offset: 3px; }

.piBioBody{ white-space: normal; line-height: 1.6; margin-top: 6px; }

/* PI bio (CV) aligned layout */
.piBioBody .cvRow{
  display: grid;
  grid-template-columns: 12.5em 1fr;
  column-gap: 12px;
  align-items: start;
}
.piBioBody .cvDate{
  white-space: nowrap;
}
.piBioBody .cvText{
  white-space: normal;
}
.piBioBody .cvSub .cvText{
  /* sub-lines align under the right column */
}
.piBioBody .cvGap{
  height: 10px;
}
@media (max-width: 640px){
  .piBioBody .cvRow{
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .piBioBody .cvDate{
    white-space: normal;
    font-weight: 600;
  }
  .piBioBody .cvSub .cvDate{
    display: none;
  }
  .piBioBody .cvSub .cvText{
    padding-left: 0.8em;
  }
}


/* alumniFold summary styling */

.alumniFold > summary{
  list-style: none;
  cursor: pointer;
}
.alumniFold > summary::-webkit-details-marker{ display:none; }
.alumniSummaryTitle{
  display:block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.alumniFold[open] > summary .alumniSummaryTitle{
  opacity: .9;
}

/* =========================
   Research page tweaks
   - Force single-column cards even on wide screens
   - Improve readability for long-form descriptions
   ========================= */
.page-research .cards{
  grid-template-columns: 1fr !important;
  gap: 20px;
}

/* Reduce visual gap specifically between "新素材の創出" and "機能性光硬化樹脂の開拓" cards */
.page-research .card.theme-newmaterials + .card.theme-photocure{
  margin-top: -12px;
}

.page-research .card h3{
  font-size: 18px;
  line-height: 1.35;
}

.page-research .card p{
  font-size: 14px;
  line-height: 1.85;
}

.page-research .panel .bd > p.small{
  font-size: 13px;
  line-height: 1.7;
  font-weight: 600;
}

/* Extra spacing for long-form Research cards */
.page-research .card{
  padding: 20px 22px;
}

.page-research .card .bd{
  padding-top: 10px;
}

.page-research .card p{
  margin: 0 0 14px 0;
}

.page-research .card p:last-child{
  margin-bottom: 0;
}

/* Subheadings and spacing for example topics on Research page */
.page-research .card h4{
  font-size: 16px;
  line-height: 1.4;
  margin: 18px 0 8px 0;
}

.page-research .card h4:first-of-type{
  margin-top: 10px;
}

/* Collapsible (only used in Research: "具体的な研究テーマの例") */
.page-research details.collapsible{
  margin-top: 10px;
}

/* Research: "これまでの研究例" starts with <details>.
   Reduce spacing so the heading sits a bit higher in the card. */
.page-research .theme-examples{
  padding-top: 18px;
}

/* Bring the "これまでの研究例" accordion card closer to the previous card */
.page-research .cards{
  row-gap: 8px;
}

.page-research .theme-examples details.collapsible{
  margin-top: 0;
}

.page-research details.collapsible > summary{
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  list-style: none;
}

/* Collapsible heading style (when "これまでの研究例" is the click target) */
.page-research details.collapsible > summary.collapsible-heading{
  font-size: 18px;
  font-weight: 800;
  padding: 0;
  border: none;
  border-radius: 0;
}
.page-research details.collapsible > summary.collapsible-heading::after{
  margin-left: 12px;
}


.page-research details.collapsible > summary::-webkit-details-marker{
  display: none;
}

.page-research details.collapsible > summary::after{
  content: "＋";
  float: right;
}

.page-research details.collapsible[open] > summary::after{
  content: "−";
}

.page-research .collapsible-body{
  padding: 14px 6px 0 6px;
}

/* Spacing adjustments for "新素材の創出" */
.page-research .theme-newmaterials h3{
  margin-bottom: 20px; /* more space between subtitle and text */
}

.page-research .theme-newmaterials h3 .subtitle{
  display: inline-block;
  margin-top: 8px;
  font-size: inherit;
  line-height: 1.35;
  font-weight: 600;
}

.page-research .theme-newmaterials .nm-p{
  margin: 0 0 8px 0; /* tighter paragraph spacing for the long description */
  line-height: 1.8;
}

.page-research .theme-newmaterials .nm-p:last-child{
  margin-bottom: 0;
}

/* Tighten spacing between title and subtitle in 新素材の創出 */
.page-research .theme-newmaterials h3{
  margin-bottom: 6px;
}

.page-research .theme-newmaterials h3 .subtitle{
  margin-top: 2px;
}

/* Match paragraph spacing to 新素材の創出 for "機能性光硬化樹脂の開拓" */
.page-research .theme-photocure .lc-p{
  margin: 0 0 8px 0;
  line-height: 1.8;
}

.page-research .theme-photocure .lc-p:last-child{
  margin-bottom: 0;
}

/* Tighten spacing between title and subtitle in 機能性光硬化樹脂の開拓 (match 新素材の創出) */
.page-research .theme-photocure h3{
  margin-bottom: 6px;
}

.page-research .theme-photocure h3 .subtitle{
  display: inline-block;
  margin-top: 2px;
  font-size: inherit;
  line-height: 1.35;
  font-weight: 600;
}

/* Match spacing between subtitle and first paragraph in 機能性光硬化樹脂の開拓 to 新素材の創出 */
.page-research .theme-photocure h3 + .lc-p{
  margin-top: 0;
}

/* Match paragraph spacing in これまでの研究例 to 新素材の創出 */
.page-research .card details .collapsible-body p{
  margin: 0 0 8px 0;
  line-height: 1.8;
}

.page-research .card details .collapsible-body p:last-child{
  margin-bottom: 0;
}

/* Tighter paragraph spacing for これまでの研究例 (split from <br><br>) */
.page-research .collapsible-body .ex-p{
  margin: 0 0 8px 0;
  line-height: 1.8;
}

.page-research .collapsible-body .ex-p:last-child{
  margin-bottom: 0;
}

/* Research figure inside cards */
.page-research .research-figure{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  margin: 14px 0 16px 0;
}

/* Inline figure inside text (bottom-right, half size) */
.page-research .inline-figure-right{
  width: 50%;
  max-width: 520px;
  height: auto;
  float: right;
  margin: 8px 0 0 16px;
  border-radius: 14px;
  display: block;
}

/* Clear floats within card so layout doesn't break */
.page-research .card::after{
  content: "";
  display: table;
  clear: both;
}

/* On small screens, stack normally */
@media (max-width: 720px){
  .page-research .inline-figure-right{
    float: none;
    width: 100%;
    max-width: none;
    margin: 12px 0 16px 0;
  }
}

/* Align bottom of photo with the closing sentence in 新素材の創出 */
.page-research .theme-newmaterials .nm-outro{
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 10px;
}

.page-research .theme-newmaterials .nm-outro .nm-p{
  margin: 0;
  flex: 1 1 auto;
}

.page-research .theme-newmaterials .nm-outro .inline-figure-right{
  float: none;
  width: 50%;
  max-width: 520px;
  margin: 0;
}

/* Stack on small screens */
@media (max-width: 720px){
  .page-research .theme-newmaterials .nm-outro{
    display: block;
  }
  .page-research .theme-newmaterials .nm-outro .inline-figure-right{
    width: 100%;
    max-width: none;
    margin-top: 12px;
  }
}

/* Let the last two paragraphs wrap beside the photo without creating a big gap */
.page-research .theme-newmaterials .nm-outro-grid{
  display: grid;
  grid-template-columns: 1fr minmax(220px, 50%);
  column-gap: 16px;
  align-items: end;
  margin-top: 0;
}

.page-research .theme-newmaterials .nm-outro-text .nm-p{
  margin: 0 0 8px 0;
  line-height: 1.8;
}

.page-research .theme-newmaterials .nm-outro-text .nm-p:last-child{
  margin-bottom: 0;
}

.page-research .theme-newmaterials .nm-outro-grid .inline-figure-right{
  float: none;
  width: 100%;
  max-width: 520px;
  margin: 0;
}

@media (max-width: 720px){
  .page-research .theme-newmaterials .nm-outro-grid{
    display: block;
  }
  .page-research .theme-newmaterials .nm-outro-grid .inline-figure-right{
    width: 100%;
    max-width: none;
    margin-top: 12px;
  }
}

/* Wrap text tightly around the photo in 新素材の創出 (no side whitespace) */
.page-research .theme-newmaterials .inline-figure-right{
  width: 33.333%;
  max-width: 520px;
  height: auto;
  float: right;
  margin: 4px 0 8px 16px; /* small top, tight bottom */
  border-radius: 14px;
  display: block;
}

.page-research .theme-newmaterials .nm-clear{
  clear: both;
}

/* On small screens, don't float */
@media (max-width: 720px){
  .page-research .theme-newmaterials .inline-figure-right{
    float: none;
    width: 100%;
    max-width: none;
    margin: 12px 0 16px 0;
  }
}

/* Clear floats within 新素材の創出 card */
.page-research .theme-newmaterials::after{
  content: "";
  display: table;
  clear: both;
}



/* Photocure inline image */
/* Photocure inline image */
.page-research .theme-photocure .photocure-figure{
  width: 65%;
  max-width: none;
  float: right;
  margin: 6px 0 10px 16px;
  border-radius: 14px;
  display: block;
}
@media (max-width: 720px){
  .page-research .theme-photocure .photocure-figure{
    float: none;
    width: 100%;
    margin: 14px 0 18px 0;
  }
}


/* Spacing between major research sections */
.page-research .card.theme-newmaterials{
  margin-bottom: 20px;
}
.page-research .card.theme-photocure{
  margin-bottom: 64px;
}
.page-research .card.theme-examples{
  margin-bottom: 64px;
}


/* Examples inline image (metal nanoparticles) */
.page-research .theme-examples .examples-figure{
  width: 25%;
  max-width: none;
  float: right;
  margin: 6px 0 10px 16px;
  border-radius: 14px;
  display: block;
}
@media (max-width: 720px){
  .page-research .theme-examples .examples-figure{
    float: none;
    width: 100%;
    margin: 14px 0 18px 0;
  }
}


/* Examples inline image (electrocatalyst) */
.page-research .theme-examples .electrocatalyst-figure{
  width: 25%;
  max-width: none;
  float: right;
  margin: 6px 0 10px 16px;
  border-radius: 14px;
  display: block;
}
@media (max-width: 720px){
  .page-research .theme-examples .electrocatalyst-figure{
    float: none;
    width: 100%;
    margin: 14px 0 18px 0;
  }
}


/* Members: career destinations photo (wrap text around on the left) */
.career-photo{
  float: right;
  width: 190px;          /* small width */
  max-width: 40%;
  height: auto;
  margin: 0 0 12px 16px; /* space between image and text */
  border-radius: 6px;
}

@media (max-width: 760px){
  .career-photo{
    width: 160px;  /* keep compact on small screens */
    float: none;
    display: block;
    margin: 0 auto 12px auto;
  }
}


.career-clear{
  clear: both;
}