:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#b08d2f; /* warm gold */
  --card:#f9fafb;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}

.container{max-width:1100px; margin:0 auto; padding:28px 20px;}
a{color:inherit; text-decoration:none}
a.link{color:var(--text); border-bottom:1px solid var(--line)}
a.link:hover{border-bottom-color:var(--accent)}
.small{color:var(--muted); font-size:0.95rem}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 0; border-bottom:1px solid var(--line);
}
.nav .brand{font-weight:800; font-size:1.25rem}
.nav ul{list-style:none; margin:0; padding:0; display:flex; gap:18px; flex-wrap:wrap}
.nav li a{padding:8px 10px; border-radius:10px}
.nav li a:hover{background:var(--card)}

h1{font-size:2.2rem; margin:0 0 10px}
h2{font-size:1.55rem; margin:34px 0 12px}
h3{font-size:1.15rem; margin:0 0 6px}
p{margin:0 0 12px}

.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.pills-hero{ margin-top:14px; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border:1px solid var(--line);
  border-radius:999px; background:var(--bg);
}
.pill:hover{border-color:var(--accent)}

.cardgrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
  align-items:stretch;
}
@media (max-width: 950px){
  .cardgrid{grid-template-columns:1fr;}
}

.cardgrid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  align-items:stretch;
}
@media (max-width: 950px){
  .cardgrid-3{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .cardgrid-3{grid-template-columns:1fr;}
}

.cardgrid-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
  align-items:stretch;
}
@media (max-width: 950px){
  .cardgrid-2{grid-template-columns:1fr;}
}

.card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 16px 18px;
  background:var(--card);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.card h3{
  margin:0;
  line-height:1.3;
}

.card .meta{
  margin:0;
  color:var(--muted);
  font-size:0.95rem;
  line-height:1.45;
}

.card .actions{display:flex; gap:12px; margin-top:10px}

.sectionline{border-top:1px solid var(--line); margin:26px 0}
.blankline{border-top:0px solid var(--line); margin:26px 0}

.footer{
  border-top:1px solid var(--line);
  padding:20px 0;
  margin-top:38px;
  color:var(--muted);
  font-size:0.95rem
}

/* Portrait (your current tuned version) */
.portrait{
  width:100%;
  height:100%;
  max-height:390px;
  object-fit:cover;
  object-position: 100% 10%;
  border-radius:0px;

  /* left-only fade with an irregular curve */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.22) 7%,
    rgba(0,0,0,0.45) 13%,
    rgba(0,0,0,0.84) 21%,
    black 40%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.22) 7%,
    rgba(0,0,0,0.45) 13%,
    rgba(0,0,0,0.84) 21%,
    black 40%
  );

  filter: saturate(0.9) contrast(1.03);
}

/* Hero top: text \hfill image */
.heroTop{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  padding:0 0 0;
  column-gap: 18px;
}

.spacer{
  min-width: 0;
}

@media (max-width: 900px){
  .heroTop{
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  .spacer{ display:none; }
}

/* Hero description */
.heroDesc{
  font-size:1.1rem;
  max-width:52ch;
  margin-top:12px;
  font-style:italic;
}

/* CTA row (Join the group) */
.ctaRow{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}

/* News rows */
.newsRow{
  display:flex;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.newsRow:last-child{
  border-bottom:none;
}
.newsDate{
  min-width:110px;
  color:var(--muted);
  font-size:0.9rem;
}

.newsText{
  flex:1;
}
/* Home icon (if used in navbar) */
.home-icon{
  display:flex;
  align-items:center;
  padding:6px;
  border-radius:10px;
}
.home-icon:hover{
  background:var(--card);
}

/* Publication cards */
.pubTitle a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.pubTitle a:hover{
  border-bottom-color:var(--accent);
}

/* Compact tags for papers */
.badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:2px;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg);
  font-size:0.85rem;
  color:var(--muted);
}

/* One-line blurb under title */
.pubBlurb{
  color:var(--muted);
  font-size:0.95rem;
  line-height:1.45;
  margin-top:2px;
}
.paper-card {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e5e5;
}

.paper-title {
  font-size: 1rem;
  line-height: 1.35;
}

.paper-title a {
  color: #111;
  text-decoration: none;
}

.paper-title a:hover {
  text-decoration: underline;
}

.paper-meta {
  margin-top: 0.2rem;
  color: #555;
  font-size: 0.9rem;
}

.paper-links {
  margin-top: 0.3rem;
  font-size: 0.9rem;
}

.paper-links a {
  color: #0056b3;
  text-decoration: none;
}

.paper-links a:hover {
  text-decoration: underline;
}

.paper-tags {
  margin-top: 0.4rem;
}

.paper-tags .tag {
  display: inline-block;
  margin-right: 0.4rem;
  margin-top: 0.2rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  border-radius: 3px;
  background: #f3f3f3;
  color: #444;
  text-decoration: none;
}

.paper-tags .tag:hover {
  background: #e6e6e6;
}
.paper-award {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: #7a4a00;
  background: #fff4db;
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}
.badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  margin-right: 0.3em;
  font-size: 0.75rem;
  border-radius: 0.4em;
  background: #eee;
  color: #333;
}

/* Award badge */
.badge-award {
  background: linear-gradient(135deg, #f6c343, #e0a800);
  color: #1a1a1a;
  font-weight: 600;
  border: 1px solid #d39e00;
}