:root{
  --max: 1100px;
  --pad: 18px;
  --fg: #1a1a1a;
  --muted: #6B6457;
  --line: #D4CCBF;
  --bg: #F8F5EF;
  --bg2: #EDE9E2;
  --red: #AC2B37;
  --orange: #C97720;
  --green: #556B4A;
  --navy: #1E2E4A;
  --blue: #5E8FAF;
  --header-bg: #1E2E4A;
}

*{box-sizing:border-box}
html{scroll-padding-top:155px;}
@media (max-width:600px){html{scroll-padding-top:0;}}
body{
  margin:0;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.55;
}
h1,h2,h3,h4,h5,h6{
  font-family: 'DM Serif Display', system-ui, -apple-system, sans-serif;
  color: var(--navy);
  letter-spacing: 0.02em;
}
a{color:var(--blue)}
a:hover{color:var(--navy)}
.container{max-width:var(--max); margin:0; padding:var(--pad); padding-top:12px; padding-bottom:40vh;}

.site-header{
  display:flex;
  flex-direction:column;
  position:sticky; top:0;
  z-index:10;
  background:var(--bg);
}
.site-top{
  display:flex;
  height:90px;
  padding-right: var(--pad);
  gap:0;
}
.wpi-logo{
  display:block;
  height:48px;
  object-fit:contain;
  margin-bottom:8px;
}
.site-header-img{
  flex: 1;
  min-width:0;
  height:100%;
  min-height:90px;
  display:block;
  object-fit:contain;
  object-position:left top;
}
.header-nav{
  flex: 0 0 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
  padding:4px var(--pad);
  background:var(--red);
  border-right:18px solid var(--red);
  height:100%;
  align-self:stretch;
}
.site-title{font-family:'DM Serif Display',system-ui,sans-serif; font-weight:800; text-decoration:none; font-size:3rem; color:var(--bg);}
.site-title:hover{color:var(--line);}
.site-nav{
  display:flex;
  align-items:flex-end;
  gap:4px;
  padding:0 var(--pad);
  margin-top:18px;
  position:relative;
}
.site-nav::after{
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:4px;
  background:var(--tab-border, var(--navy));
  z-index:2;
  pointer-events:none;
}
.tab{
  display:inline-block;
  text-decoration:none;
  padding:4px 19px 5px;
  border-radius:10px 10px 0 0;
  color:var(--bg2);
  font-family:'DM Serif Display',system-ui,sans-serif;
  font-weight:500;
  white-space:nowrap;
  font-size:1.2rem;
  opacity:0.67;
  position:relative;
  z-index:1;
  transition:opacity 0.15s;
}
.tab:hover{ opacity:1; color:var(--bg2); }
.tab.active{
  opacity:1;
  z-index:3;
}
.tab-orange{ background:var(--orange); }
.tab-green { background:var(--green);  }
.tab-navy  { background:var(--navy);   }
.tab-blue  { background:var(--blue);   }
.tab-red   { background:var(--red);    }

.page-header{margin: 12px 0 18px;}
.page-title{margin:0 0 6px; color:var(--orange);}
.page-subtitle{margin:0; color:var(--red);}

.lead{font-size:1.12rem; color:var(--bg); background:var(--red); padding:16px 20px; border-radius:10px; text-align:center; margin-top:0;}
.lead-blue{background:var(--blue); border-radius:10px 10px 0 0; margin-bottom:0;}.h3{font-size:1.1rem; margin:0 0 10px;}

.hero{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:18px;
  align-items:start;
}
.hero-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background-color:var(--bg2);
}

.cta-row{display:flex; gap:10px; margin:12px 0 10px;}
.button{
  display:inline-block;
  text-decoration:none;
  border:1px solid var(--fg);
  padding:8px 12px;
  border-radius:12px;
}
.button-secondary{
  border-color:var(--line);
  background:var(--bg2);
}

.quick-facts{margin-top:10px; color:var(--muted);}
.muted{color:var(--muted);}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.grid-wide{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
.grid-single{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background-color:var(--bg);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.person-card{
  border:none;
  border-left:4px solid var(--red);
  border-radius:0 12px 12px 0;
  background-color:var(--bg2);
}
.person-card .person-top{display:flex; gap:12px; align-items:center;}
.avatar{
  width:150px; height:150px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid var(--line);
}
.avatar.placeholder{background:var(--bg2);}
.person-name{font-family:'DM Serif Display',system-ui,sans-serif; font-weight:700; color:var(--red); font-size:1.25rem;}
.contact-btns{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.contact-btn{font-family:'Inter',sans-serif; font-size:0.8rem; padding:3px 12px; border-radius:4px; background:var(--navy); color:var(--bg2); border:none; cursor:pointer;}
.contact-btn:hover{background:var(--blue);}
.contact-popup{font-size:0.85rem; margin-top:8px; padding:8px 12px; background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--fg); white-space:pre-line;}
.person-role{color:var(--muted);}
.person-meta{font-size:0.95rem; color:var(--muted);}

.pub-section{background:var(--bg2); border-radius:0 16px 16px 0; margin-left:calc(-1 * var(--pad)); padding:20px 24px 20px var(--pad); margin-bottom:16px;}
.pub-section h2{background:var(--blue); color:var(--bg2); border-radius:0 10px 10px 0; margin-left:calc(-1 * var(--pad)); padding:8px 20px 8px var(--pad); margin-top:0; margin-bottom:16px; width:fit-content;}
.pub-section-title{display:flex; align-items:center; gap:16px; margin-bottom:0;}
.pub-section-title h2{margin-bottom:0;}
.back-to-top{font-size:0.85rem; color:var(--blue); text-decoration:none; white-space:nowrap;}
.back-to-top:hover{color:var(--navy);}
.back-to-top-green{color:var(--green);}
.back-to-top-green:hover{color:var(--navy);}
.pub-nav{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
.pub-nav a{display:inline-block; padding:4px 12px; border-radius:4px; background:var(--navy); color:var(--bg2); font-size:0.85rem; text-decoration:none; font-weight:500; font-family:'Inter',sans-serif;}
.pub-nav a:hover{background:var(--bg2); color:var(--navy);}
.pub-nav-blue{background:var(--blue); border-radius:0 0 12px 12px; justify-content:center; padding:10px var(--pad); margin-top:0;}
.pub-nav-blue a{background:var(--navy);}
.pub-nav-blue a:hover{background:var(--bg2); color:var(--navy);}
.pub-nav-green a{background:var(--green);}
.pub-nav-green a:hover{background:var(--bg2); color:var(--green);}
.pub-item{display:grid; grid-template-columns:2.4em 1fr; gap:0; padding:10px 0; border-bottom:1px solid var(--line);}
.pub-num{font-family:'DM Serif Display',serif; font-weight:700; color:var(--blue); font-size:1rem; margin-top:0; text-align:right; padding-right:0.5em;}
.pub-title{font-weight:700; color:var(--navy); font-family:'Inter',sans-serif;}
.pub-title a{color:var(--navy);}
.pub-title a:hover{color:var(--blue);}
.pub-authors{color:var(--muted); font-size:0.85rem;}
.pub-venue{font-size:0.85rem;}
.pub-venue a{color:var(--blue);}
.pub-venue a:hover{color:var(--navy);}
.pub-tags{margin-top:6px;}
.year-stamp{
  font-size:1.8rem;
  color:var(--blue);
  letter-spacing:0.1em;
  border-bottom:1px solid var(--blue);
  margin:28px 0 4px;
  padding-bottom:2px;
}
.tag{
  display:inline-block;
  border:1.5px solid var(--red);
  padding:2px 7px;
  border-radius:3px;
  font-size:0.75em;
  margin-right:6px;
  color:var(--red);
  font-family:'Courier New',Courier,monospace;
  text-transform:uppercase;
  letter-spacing:0.06em;
  transform:rotate(-1deg);
}

.clean-list{list-style:none; padding-left:0; margin:0;}
.clean-list li{padding:10px 0; border-bottom:1px solid var(--line);}
.news-item{padding:12px 0;}

.research-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:24px 0;
}
.research-btn{
  display:inline-block;
  text-decoration:none;
  padding:10px 20px;
  border-radius:8px;
  border:2px solid var(--green);
  color:var(--green);
  font-weight:600;
  transition:background 0.15s, color 0.15s;
}
.research-btn:hover{
  background:var(--green);
  color:#fff;
}
.research-section{
  border-left:4px solid var(--orange);
  padding:20px 24px;
  margin:24px 0;
  background-color:var(--bg2);
  border-radius:0 12px 12px 0;
}
.research-section:first-child{margin-top:0;}
.research-section h2{
  margin-top:0;
  color:var(--orange);
}
.people-page h2{ background:var(--green); color:var(--bg2); border-radius:0 10px 10px 0; margin-left:calc(-1 * var(--pad)); padding:8px 20px 8px var(--pad); margin-bottom:16px; width:fit-content; }
.people-page h2:first-of-type{ margin-top:0; }
.people-page .pub-section-title{ margin-top:12px; }
.people-page .person-card{ border-left-color:var(--green); }
.people-page .person-name{ color:var(--green); }

/* Home page decorative elements */
.palette-stripe{
  display:flex;
  height:17px;
  margin-bottom:28px;
  border-radius:4px;
  overflow:hidden;
}
.palette-stripe span{
  flex:1;
  transform:skewX(-20deg);
  margin:0 -6px;
}
.ps-red{ background:var(--red); }
.ps-orange{ background:var(--orange); }
.ps-green{ background:var(--green); }
.ps-navy{ background:var(--navy); }
.ps-blue{ background:var(--blue); }
.focus-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:20px 0 28px;
}
.focus-badge{
  text-decoration:none;
  padding:6px 14px;
  border-radius:999px;
  font-size:0.9rem;
  font-weight:500;
  color:var(--bg2);
  border:2px solid transparent;
  transition: opacity 0.15s;
}
.focus-badge:hover{ color:var(--bg2); opacity:0.85; }
.badge-orange{ background:var(--orange); }
.badge-blue{ background:var(--blue); }
.badge-green{ background:var(--green); }
.badge-navy{ background:var(--navy); }
hr.palette-rule{
  border:none;
  height:2px;
  background: linear-gradient(to right,
    var(--red), var(--orange), var(--green), var(--navy), var(--blue)
  );
  margin:28px 0;
  border-radius:2px;
}

.site-footer{border-top:2px solid var(--navy); margin-top:36px; background:var(--bg2);}
.footer-inner{padding:18px;}

@media (max-width: 360px){
  .site-header-img{ display:none; }
}

@media (max-width: 478px){
  .site-nav{ display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .tab{ border-radius:7px; text-align:left; width:auto; }
  .tab.active{ order:999; grid-column:1 / -1; }
  .site-header-img{ object-position:left top; flex:none; width:auto; max-width:none; }
}

@media (max-width: 600px){
  .hero{grid-template-columns:1fr;}
  .grid, .grid-wide, .cards{grid-template-columns:1fr;}
  .site-header{ position:static; }
  .site-top{ height:auto; flex-direction:column; gap:0; }
  .site-header-img{ flex:none; height:100px; object-position:left center; order:-1; }
  .header-nav{ height:auto; align-self:flex-start; padding:4px var(--pad); background:var(--red); border-right:none; width:334px; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 105px), calc(100% - 82px) 100%, 0 100%); }
  .site-title{ color:var(--bg); }
  .site-nav{ flex-wrap:wrap; padding:0 var(--pad); }
  .tab{ font-size:1rem; padding:6px 14px; border-radius:7px; }
}