:root{
  --bg:#fff7ec;
  --text:#111;
  --muted:#666;
  --accent:#0e88cf;
  --maxw:760px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

.container{max-width:var(--maxw); margin:0 auto; padding:0 18px}

/* Header */
.site-header{ padding:12px 0 }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.site-nav{ display:flex; gap:14px; flex-wrap:wrap }
.site-nav a{ color:var(--text); text-decoration:none; opacity:.9 }
.site-nav a.active{ opacity:1; font-weight:600 }

/* Right-side social icons in header */
.header-icons{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto }
.icn{
  width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#e7f3fb; color:#0b6ea9; text-decoration:none;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.icn:hover{ background:#0b6ea9; color:#fff; transform:translateY(-1px) }
.icn svg{ width:17px; height:17px; fill:currentColor }

/* Header on small screens: center nav; keep icons pinned right within container */
@media (max-width:680px){
  .header-row{ flex-wrap:wrap }
  .site-nav{ justify-content:center; flex:1 1 auto; order:1 }
  .header-icons{ order:2; width:100%; justify-content:center; margin-left:0 }
}


/* Main + Footer */
.site-main{padding:28px 0}
.site-footer{padding:24px 0; color:var(--muted); text-align:center}

/* Hero layout */
.hero{display:grid; grid-template-columns: 280px 1fr; gap:22px; align-items:start}
@media (max-width:800px){ .hero{ grid-template-columns: 1fr; } }

.photo-col{ display:flex; flex-direction:column; align-items:center; gap:12px }

/* BIGGER portrait: doubled from 120×150 -> 240×300 */
.photo{ width:240px; height:300px; border-radius:12px; overflow:hidden; background:#f2eadf }
.photo img{ width:100%; height:100%; object-fit:cover; display:block }

/* Social icons (under photo) */
.social-logos{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
.icn{
  width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#e7f3fb; color:#0b6ea9; text-decoration:none;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.icn:hover{ background:#0b6ea9; color:#fff; transform:translateY(-1px) }
.icn svg{ width:18px; height:18px; fill:currentColor }

.text{flex:1}
h1{margin:0 0 6px; font-size:1.6rem}
.tag{margin:0 0 8px; color:var(--muted)}
.lead{margin:6px 0 0; color:#000}
.bio{margin:10px 0 0; color:#000}

/* Sections */
.section{margin-top:28px}
.section h2{margin:0 0 10px; font-size:1.1rem}

/* Publications (home + page) */
.pub-year{margin:22px 0 6px; font-weight:700}
.pubs{list-style:none; padding:0; margin:6px 0 0}
.pubs li{padding:12px 0}
.pubs li+li{border-top:1px solid rgba(0,0,0,.07)}

.pub-title{font-weight:700}

/* Authors */
.pub-authors{margin:2px 0 0}
.pub-authors .me{ text-decoration:underline; text-underline-offset:2px }

/* NEW: venue/year row with icons aligned to the right */
.pub-meta-row {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pub-meta-row .left { color: var(--muted); display:flex; gap:6px; }
.pub-meta-row .right { display:flex; gap:8px; }


/* Icon buttons */
.links{display:inline-flex; gap:8px}
.links.icons a{
  width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#e7f3fb; color:#0b6ea9; text-decoration:none;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.links.icons a:hover{ background:#0b6ea9; color:#fff; transform:translateY(-1px) }
.links.icons svg{ width:16px; height:16px; fill:currentColor }

/* News (home) */
.news{ list-style:none; padding:0; margin:4px 0 0 }
.news li{ padding:6px 0 }
.news li+li{ border-top:1px solid rgba(0,0,0,.07) }
.news .date{ color:#777; margin-right:.5rem; font-variant-numeric: tabular-nums }

/* Team page */
.team-head{
  margin: 20px 0 10px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #2a2a2a;
}

/* 2 per row on desktop, with larger cards */
.team-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 across */
  gap: 24px 28px;                                    /* wider margins */
  align-items: start;
  margin: 10px 0 24px;
}

/* Collapse to single column on smaller screens */
@media (max-width: 600px){
  .team-grid{ grid-template-columns: 1fr; gap: 18px; }
}

/* Member card: larger photo left, info right */
.member{
  display: grid;
  grid-template-columns: 144px 1fr;  /* doubled from 72px */
  gap: 16px;
  align-items: center;
}

.member img{
  width: 144px; height: 144px;       /* doubled from 72px */
  border-radius: 12px;
  object-fit: cover;
  background: #f2eadf;
}

.m-info{ display: flex; flex-direction: column; gap: 6px; }
.m-name{ font-size: 1.1rem; color: #141414; line-height: 1.2; }
.m-field{ font-size: 1rem; color: #595f6a; line-height: 1.35; }


/* Code cards (as before) */
.cards{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px }
@media (max-width:720px){ .cards{ grid-template-columns: 1fr; } }
.card{
  padding:14px; border:1px solid rgba(0,0,0,.08); border-radius:12px; background:#fffaf1;
}
.card-head{ display:flex; justify-content:space-between; align-items:center; gap:10px }
.card-title{ font-weight:700; text-decoration:none; color:#0e88cf }
.card-title:hover{ text-decoration:underline }
.card-desc{ margin:.35rem 0 0; color:#333 }
.card-links{ margin-top:8px; display:flex; gap:8px }
.card-links a{
  width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:#e7f3fb; color:#0b6ea9; text-decoration:none; transition:.12s all ease
}
.card-links a:hover{ background:#0b6ea9; color:#fff; transform:translateY(-1px) }
.card-links svg{ width:16px; height:16px; fill:currentColor }

/* Mobile niceties */
@media (max-width:680px){
  .nav{justify-content:center; flex-wrap:wrap}
  .text{ text-align:center }
}

/* Repos grid (Code page) */
.repo-grid,
.cards { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px }
@media (max-width:720px){ .repo-grid, .cards { grid-template-columns: 1fr; } }

.card{
  padding:14px; border:1px solid rgba(0,0,0,.08); border-radius:12px; background:#fffaf1;
}
.card-head{ display:flex; justify-content:space-between; align-items:center; gap:10px }
.card-title{ font-weight:700; text-decoration:none; color:#0e88cf }
.card-title:hover{ text-decoration:underline }
.card-desc{ margin:.35rem 0 0; color:#333 }
.card-meta{ margin-top:.35rem; display:flex; gap:10px; color:#555; font-size:.95rem }
.card-meta .star{ color:#946200 }
.card-links{ margin-top:8px; display:flex; gap:8px }
.card-links a, .repo-grid .card .card-links a{
  width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:#e7f3fb; color:#0b6ea9; text-decoration:none; transition:.12s all ease
}
.card-links a:hover{ background:#0b6ea9; color:#fff; transform:translateY(-1px) }
.card-links svg{ width:16px; height:16px; fill:currentColor }

/* News list truncation */
.is-hidden { display: none; }

.news-toggle {
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #e7f3fb;
  color: #0b6ea9;
  padding: .45rem .75rem;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}
.news-toggle:hover {
  background: #0b6ea9;
  color: #fff;
}

/* ---- MOBILE POLISH (Phones) ------------------------------------------- */
@media (max-width: 768px) {
  /* Global side margins + readable line length */
  .container { max-width: 720px; padding-left: 16px; padding-right: 16px; }

  /* Typography: slightly larger, calmer spacing */
  body { font-size: 16px; line-height: 1.6; }
  h1, h2, h3 { line-height: 1.25; margin-top: 0.8rem; margin-bottom: 0.5rem; }

  /* Publications list: spacing + wrapping + icon row behavior */
  .pubs { margin-top: 8px; }
  .pubs li { padding: 10px 0; }
  .pub-title { font-weight: 700; word-break: break-word; }
  .pub-authors { font-size: 0.98rem; }
  .pub-meta-row { gap: 8px; }
  .pub-meta-row .left { flex: 1 1 auto; min-width: 200px; }
  .pub-meta-row .right { flex: 0 0 auto; gap: 6px; }
  .links.icons a { width: 30px; height: 30px; }
  .links.icons svg { width: 16px; height: 16px; }

  /* Team grid → single column, smaller portraits, tidy gaps */
  .team-grid { grid-template-columns: 1fr; gap: 16px; }
  .member { grid-template-columns: 96px 1fr; gap: 12px; }
  .member img { width: 96px; height: 96px; border-radius: 10px; }
  .m-name { font-size: 1.05rem; }
  .m-field { font-size: 0.98rem; color: #555; }

  /* News / generic lists with share icon */
  .share { margin-left: 6px; }
  .shareable { scroll-margin-top: 72px; }

  /* Prevent horizontal scrolling due to long links/text */
  .pub-title a, .pub-authors, .pub-meta-row, .m-info { word-break: break-word; overflow-wrap: anywhere; }
}

/* Very small phones (narrower than 380px) */
@media (max-width: 380px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .member { grid-template-columns: 84px 1fr; }
  .member img { width: 84px; height: 84px; }
  .links.icons a { width: 28px; height: 28px; }
  .links.icons svg { width: 15px; height: 15px; }
}

/* share icon + toast */
.share { margin-left: 8px; text-decoration: none; opacity:.9 }
.share:hover { text-decoration: underline; }
.shareable { scroll-margin-top: 80px; } /* nice offset if header is fixed */

#toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: rgba(20,20,20,.9); color:#fff; padding:8px 12px; border-radius: 10px;
  font: 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
#toast.show { opacity: 1; }

/* Share button shows only on hover/focus, no underline */
.member .share-btn {
  margin-left: 8px;
  background: transparent;
  border: 0;
  padding: 0 4px;
  font: inherit;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
  color: inherit;
  text-decoration: none;           /* no underline ever */
}
.member:hover .share-btn,
.member:focus-within .share-btn {  /* keyboard accessible */
  opacity: 1;
}
.member .share-btn:focus {
  outline: 2px solid #0e88cf44;
  border-radius: 6px;
}
.member .share-btn:hover,
.member .share-btn:active {
  text-decoration: none;           /* keep it off on hover */
}

/* Toast */
#toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: rgba(20,20,20,.92); color: #fff; padding: 8px 12px;
  border-radius: 10px; font: 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
#toast.show { opacity: 1; }

/* Nice anchor jump offset if you have a sticky header */
.shareable { scroll-margin-top: 72px; }

/* Publications: share icon looks like plain text, hidden until hover/focus */
.pubs .share-btn{
  background: transparent;
  border: 0;
  padding: 0 4px;
  margin-left: 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0;                     /* hidden by default */
  transition: opacity .12s ease;
  text-decoration: none;          /* never underline */
  appearance: none;               /* remove default button chrome */
  -webkit-appearance: none;
}

.pubs li:hover .share-btn,
.pubs li:focus-within .share-btn{
  opacity: 1;                     /* show only on hover/focus */
}

.pubs .share-btn:focus{
  outline: 2px solid #0e88cf44;   /* accessible focus ring */
  border-radius: 6px;
}

.pubs .share-btn:hover,
.pubs .share-btn:active{
  text-decoration: none;          /* keep underline off */
}

/* Selected Publications on Home */
.selected-pubs .share-btn {
  background: transparent;
  border: 0;
  padding: 0 4px;
  margin-left: 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
  appearance: none;
  -webkit-appearance: none;
}
.selected-pubs li:hover .share-btn,
.selected-pubs li:focus-within .share-btn {
  opacity: 1;
}
.selected-pubs .share-btn:focus {
  outline: 2px solid #0e88cf44;
  border-radius: 6px;
}

/* News on Home */
.news .share-btn {
  background: transparent;
  border: 0;
  padding: 0 4px;
  margin-left: 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
  appearance: none;
  -webkit-appearance: none;
}
.news li:hover .share-btn,
.news li:focus-within .share-btn {
  opacity: 1;
}
.news .share-btn:focus {
  outline: 2px solid #0e88cf44;
  border-radius: 6px;
}

/* --- Hero alignment + photo sizing (web) --- */
.hero {
  display: grid;
  grid-template-columns: auto 1fr; /* photo auto-sizes, text takes rest */
  gap: 24px;
  align-items: center;              /* vertical-align photo with H1 */
}

.photo-col {
  display: flex;
  align-items: center;              /* center photo vertically in its cell */
  justify-content: center;          /* balanced side margins */
}

.photo {
  width: 268px;                     /* slightly bigger, same aspect ratio feel */
  height: 330px;
  border-radius: 12px;
  overflow: hidden;
  background: #f2eadf;
}

/* ensure the image fills the frame cleanly */
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* mobile: keep proportions, reduce size a bit */
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; }
  .photo { width: 220px; height: 276px; margin: 0 auto; }
}

/* --- Section headings same size as H1 --- */
h1 { font-size: 1.6rem; line-height: 1.2; }  /* Keep your existing scale */
.section h2 {
  font-size: 1.6rem;       /* match H1 */
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 10px;
}

/* --- Team: consistent alignment of image/text across all cards --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px;
  align-items: start;               /* grid rows align from the top */
}

/* Each member row: image + text perfectly aligned */
.member {
  display: grid;
  grid-template-columns: 144px 1fr; /* fixed image column width */
  column-gap: 16px;
  align-items: center;              /* vertically center the pair */
  min-height: 144px;                /* enforce equal row heights */
}

/* lock exact image size for everyone */
.member img {
  width: 144px;
  height: 144px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  background: #f2eadf;
}

/* text stack centered against the image */
.m-info {
  display: grid;
  row-gap: 6px;
  align-content: center;            /* center text vertically */
}

.m-name { font-size: 1.1rem; line-height: 1.2; }
.m-field { font-size: 1rem; color: #595f6a; line-height: 1.35; }

/* Mobile: single column, still aligned */
@media (max-width: 600px) {
  .team-grid { grid-template-columns: 1fr; gap: 18px; }
  .member {
    grid-template-columns: 96px 1fr;  /* smaller image column */
    min-height: 96px;
  }
  .member img { width: 96px; height: 96px; border-radius: 10px; }
}