:root{
  --garnet:#73000a;   /* garnet */
  --garnet2:#520007;  /* darker garnet */
  --wrap:1100px;
  --pad:22px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font:14px/1.65 Arial, Helvetica, sans-serif;
  color:#222;
  background:#fff;
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad);
}

/* -----------------------------
   Header + Nav
----------------------------- */
.top{background:var(--garnet);color:#fff}
.top-inner{padding:22px 0}
.sitename{font-size:44px;font-weight:700;letter-spacing:.2px;line-height:1.05}
.tagline{margin-top:2px;font-size:14px;opacity:.85}

.navrow{background:var(--garnet2);border-top:1px solid rgba(255,255,255,.12)}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  flex-wrap:wrap;
}
.navlinks{display:flex;gap:22px;flex-wrap:wrap}
.navlink{color:#fff;opacity:.9;text-decoration:none;font-size:13px}
.navlink:hover{opacity:1;text-decoration:underline}

.search{display:flex;align-items:center;gap:0;margin-left:auto}
.search input{
  width:170px;max-width:40vw;
  padding:8px 10px;border:0;outline:0;
  background:rgba(255,255,255,.14);color:#fff;
}
.search input::placeholder{color:rgba(255,255,255,.8)}
.search button{
  border:0;cursor:pointer;
  padding:8px 12px;
  background:rgba(255,255,255,.18);color:#fff;
}

/* -----------------------------
   Layout
----------------------------- */
.main{padding:26px 0}

.grid3{
  display:grid;
  grid-template-columns: minmax(220px, 280px) 1fr minmax(260px, 340px);
  gap:28px;
  align-items:start;
}

.content img{max-width:100%}
.pagetitle{margin:0 0 14px;font-size:26px}

/* -----------------------------
   Left sidebar
----------------------------- */
.profile{
  width:100%;
  max-width:220px;
  height:auto;
  border:1px solid #ddd;
  border-radius:10px;
}

.contact{margin-top:14px;font-size:13px}
.contact div{margin:10px 0}

.sideblock{margin-top:16px}
.sidetitle{margin:0 0 6px 0;font-size:13px;color:#222}
.sidesubtitle{display:block;font-size:12px;font-weight:400;color:#666;margin-top:2px}

.sidelist{
  margin:0;
  padding-left:18px;
  font-size:13px;
}
.sidelist li{margin:4px 0}

/* Small pink links */
a.smallpink{
  color:#c2185b;
  font-size:0.85em;
  text-decoration:none;
}
a.smallpink:hover{ text-decoration:underline; }

.rokbadge{
  width:100%;
  max-width:220px;
  height:auto;
  display:block;
  margin-top:8px;
  border:1px solid #e6e6e6;
  border-radius:10px;
}
.rokbadge:hover{opacity:.9}

.sidehint{margin-top:6px}

/* Copy-to-clipboard (email/phone) */
.copy-email { cursor: pointer; text-decoration: underline; }
.copylink{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  color:#0b5563;
  text-decoration:underline;
  font:inherit;
}
.copylink:hover{opacity:.85}
.sep{margin:0 6px;color:#666}
.copymsg{
  margin-left:10px;
  font-size:0.9em;
  color:#666;
}

/* -----------------------------
   Right sidebar cards
----------------------------- */
.embedcard{
  border:1px solid #e6e6e6;
  border-radius:8px;
  padding:12px;
  background:#fff;
}
.embedtitle{margin:0 0 8px 0;font-size:15px;font-weight:700;color:#222}
.embedbody{font-size:13px;color:#333}

.embedhr{
  border:0;
  border-top:1px solid #e6e6e6;
  margin:10px 0;
}

.newslist{
  margin:0 0 8px 0;
  padding-left:18px;
  font-size:0.92em;
}
.newslist li{margin:4px 0}

.paperlist{
  margin:0;
  padding-left:16px;
  font-size:0.92em;
}
.paperlist li{margin:8px 0}

.embedmore{margin-top:10px;font-size:0.9em}

/* -----------------------------
   Search results
----------------------------- */
.results{padding-left:18px}
.results li{margin:12px 0}

/* -----------------------------
   Footer
----------------------------- */
.footer{
  border-top:1px solid #eee;
  margin-top:30px;
  padding:18px 0;
  color:#666;
}

/* More breathing room around section titles */
.content h2, .content h3{
  margin-top:24px;
  margin-bottom:10px;
}

/* -----------------------------
   PDF viewer "window"
----------------------------- */
.pdf-window{
  border:1px solid #d9d9d9;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.pdf-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background:#f5f5f5;
  border-bottom:1px solid #e6e6e6;
  font-size:13px;
}
.pdf-title{font-weight:600;color:#222}
.pdf-actions a{margin-left:12px;color:#0b5563;text-decoration:none}
.pdf-actions a:hover{text-decoration:underline}
.pdf-frame{
  width:100%;
  height:85vh;
  border:0;
  display:block;
}

/* -----------------------------
   Publication mini-badges + links
----------------------------- */
sup.authmark{
  font-size:0.72em;
  line-height:0;
  vertical-align:super;
}

.pubtag,
.pdflink{
  display:inline-block;
  font-size:0.78em;
  white-space:nowrap;
  margin-left:.35em;
}

/* 🏷️ tags */
.pubtag{color:#777}
.pubtag::before{content:"🏷️ "}

/* 📄 PDF link */
.pdflink{
  color:#0b5563;
  text-decoration:none;
}
.pdflink::before{content:"📄 "}
.pdflink:hover{text-decoration:underline}

/* -----------------------------
   Presentation mini-tags
----------------------------- */
.pretag{
  display:inline-block;
  font-size:0.78em;
  color:#777;
  white-space:nowrap;
  margin-left:.35em;
}
.pretag.poster::before{content:"🖼️ "}
.pretag.virtual::before{content:"💻 "}

/* -----------------------------
   Teaching video + caption
----------------------------- */
.teachvideo{
  width:100%;
  display:block;
  border-radius:10px;
  border:1px solid #e6e6e6;
  margin-top:8px;
}
.teachcaption{
  display:inline-block;
  margin-top:6px;
  color:#666;
  font-size:12px;
}

/* -----------------------------
   Teaching carousel (Instagram-style)
----------------------------- */
.teach-carousel{
  border:1px solid #e6e6e6;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  margin:18px 0 28px;
}

.teach-slide{display:none;padding:14px}
.teach-slide.is-active{display:block}

/* BIG photo */
.teach-photo{
  width:100%;
  max-height:560px;
  object-fit:cover;           /* Instagram-like crop */
  border-radius:10px;
  border:1px solid #ddd;
  display:block;
}

.teach-text{padding:12px 2px 2px}
.teach-text h4{margin:0 0 6px}

/* Controls under image */
.teach-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px 12px;
  background:#fff;
}

.teach-btn{
  border:1px solid #d9d9d9;
  background:#fff;
  width:44px;
  height:40px;
  border-radius:10px;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.teach-btn:hover{background:#f3f3f3}

/* Dots */
.teach-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex:1;
}
.teach-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid #bbb;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.teach-dot.is-active{
  background:#222;
  border-color:#222;
}

/* -----------------------------
   Responsive
----------------------------- */
@media (max-width: 1000px){
  :root{ --pad:18px; }

  .sitename{ font-size:36px; }
  .tagline{ font-size:13px; }

  .grid3{
    grid-template-columns: 1fr;   /* stack */
    gap:18px;
  }

  /* show content first, then sidebars */
  .center{ order:1; }
  .left{ order:2; }
  .right{ order:3; }

  .profile{ max-width: 240px; }
}

@media (max-width: 700px){
  :root{ --pad:14px; }

  .top-inner{ padding:14px 0; }
  .sitename{ font-size:30px; }
  .tagline{ font-size:12px; }

  .nav-inner{ gap:10px; padding:10px 0; }
  .navlinks{ gap:14px; width:100%; }

  /* search becomes full-width row */
  .search{ width:100%; margin-left:0; }
  .search input{ width:100%; max-width:none; }

  .pagetitle{ font-size:22px; }

  .pdf-frame{ height:70vh; }
  .teach-photo{ max-height:420px; }
}

@media (max-width: 420px){
  .sitename{ font-size:26px; }
  .navlink{ font-size:12px; }
}