:root{
  /* Surfaces vs page background:
     - --bg is used as the primary surface color (cards, inputs, pills).
     - --page-bg is the overall page background behind the layout.
     To try the "paper" look, set --page-bg to a very light gray like #f6f7f9. */
  --bg: #ffffff;
  --page-bg: #ffffff;
  --fg: #111111;
  --muted: #555555;
  --subtle: #777777;
  --border: #e6e6e6;
  --link: #0b5bd3;
  --link-hover: #0846a3;
  --card: #fafafa;
  --code-bg: #f6f7f9;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05);
  --maxw: 980px;

  /* Light accent colors (used sparingly for structure) */
  --accent-preprint: #2563eb;
  --accent-preprint-bg: #eff6ff;
  --accent-published: #15803d;
  --accent-published-bg: #ecfdf5;
  --accent-other: #b45309;
  --accent-other-bg: #fff7ed;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  background:var(--page-bg, var(--bg));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--link); text-decoration:none}
a:hover{color:var(--link-hover); text-decoration:underline}

/* Accessible focus (keyboard users) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 3px solid rgba(11, 91, 211, .35);
  outline-offset: 2px;
  border-radius: 10px;
}

.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

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

.site-header{
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.site-banner{
  background: var(--card);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  padding: 10px 0;
}
.site-header__top{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 20px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.site-id__name{
  font-size: 22px;
  font-weight: 650;
  letter-spacing: .1px;
}
.site-id__meta{
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
}

.site-nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:14px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  overflow-x:auto;
  overflow-y:hidden;
}
.site-nav__link{
  font-size: 14px;
  color: var(--muted);
  padding: 6px 8px;
  border: 1px solid transparent; /* prevent layout shift when active state adds a border */
  border-radius: 10px;
  white-space: nowrap;
}
.site-nav__link:hover{color:var(--fg); text-decoration:none; background:var(--card)}
.site-nav__link.is-active{
  color: var(--fg);
  background: var(--card);
  border-color: var(--border);
}

.site-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  align-items:start;
}
.site-sidebar{
  position: sticky;
  top: 16px;
  align-self:start;
}
.site-photo{
  width: 220px;
  height: 220px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background: var(--card);
}
.site-contact{
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}
.site-contact__row{
  display:flex;
  gap:10px;
  margin: 6px 0;
}
.site-contact__label{
  width: 54px;
  color: var(--subtle);
}
.site-links{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.site-links__link{
  font-size: 14px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 6px 10px;
  border-radius: 999px;
}
.site-links__link:hover{color:var(--fg); text-decoration:none; background:var(--card)}

.site-content{
  min-width: 0;
}

.site-content img{
  max-width: 100%;
  height: auto;
}
figure{margin: 14px 0}
figcaption{margin-top: 6px; color: var(--muted); font-size: 13px}

h1,h2,h3{
  line-height:1.25;
  margin: 0 0 10px 0;
  letter-spacing: .1px;
}
h1{font-size: 26px}
h2{font-size: 18px; margin-top: 26px}
h3{font-size: 16px; margin-top: 18px}
p{margin: 0 0 12px 0}
ul,ol{margin: 0 0 12px 20px}

.lead{font-size: 15px; color: var(--fg)}
.muted{color: var(--muted)}
.small{font-size: 13px}

.card{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 14px;
}
.callout{
  border-left: 3px solid var(--link);
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.site-footer{
  border-top: 1px solid var(--border);
  margin-top: 36px;
}
.site-footer__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 20px;
  color: var(--subtle);
  font-size: 13px;
}

/* Publications UI */
.pub-controls{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 12px 0;
}
.pub-search{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 14px;
}
.pub-filters{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.pub-filter-row{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.pub-filter-label{
  font-size: 13px;
  color: var(--subtle);
}
.pub-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.chip{
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  cursor:pointer;
}
.chip:hover{background:var(--card); color:var(--fg)}
.chip.is-active{
  /* More visible selected state */
  background: #eff6ff;
  color: #1e3a8a;
  border-color: #bfdbfe;
}

.pub-section{
  margin-top: 18px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  border-left-width: 5px;
  border-left-color: var(--pub-accent, var(--border));
}
.pub-section__header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--pub-accent-bg, var(--card));
}
.pub-section__title{
  margin:0;
  font-size: 16px;
}
.pub-section--preprint{ --pub-accent: var(--accent-preprint); --pub-accent-bg: var(--accent-preprint-bg); }
.pub-section--published{ --pub-accent: var(--accent-published); --pub-accent-bg: var(--accent-published-bg); }
.pub-section--other{ --pub-accent: var(--accent-other); --pub-accent-bg: var(--accent-other-bg); }

.pub-item{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.pub-item:last-child{border-bottom: none}
.pub-title{
  font-weight: 420;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--fg);
}
.pub-title-row{
  display:flex;
  align-items:flex-start;
  gap: 10px;
}
.pub-title-row .pub-title{
  flex: 1 1 auto;
  min-width: 0;
}
.pub-abstract-toggle{
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
}
.pub-abstract-toggle:hover{
  color: var(--fg);
  background: var(--card);
}
.pub-abstract-toggle.is-open{
  color: var(--fg);
  background: var(--card);
  border-color: #d8d8d8;
}
.pub-abstract{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--code-bg);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.pub-meta{
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}
.pub-venue{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
.pub-tags{
  margin-top: 6px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.pub-tags--themes{ margin-top: 6px; }
.tag{
  display:inline-flex;
  align-items:center;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.15;
}
.tag--venue, .tag--theme{
  background: var(--tag-bg, var(--bg));
  border-color: var(--tag-border, var(--border));
  color: var(--tag-fg, var(--muted));
}
.tag--venue{
  font-weight: 560;
  white-space: normal;
}
.tag--theme{
  font-weight: 520;
  white-space: nowrap;
}
/* Professional, subtle theme colors (match Research page themes) */
.tag--theme[data-theme="structured"]{
  --tag-bg: #eff6ff;
  --tag-border: #bfdbfe;
  --tag-fg: #1e3a8a;
}
.tag--theme[data-theme="interpretable"]{
  --tag-bg: #f5f3ff;
  --tag-border: #ddd6fe;
  --tag-fg: #4c1d95;
}
.tag--theme[data-theme="survival"]{
  --tag-bg: #ecfeff;
  --tag-border: #a5f3fc;
  --tag-fg: #155e75;
}
.tag--theme[data-theme="actuarial"]{
  --tag-bg: #fff7ed;
  --tag-border: #fed7aa;
  --tag-fg: #9a3412;
}
.pub-links{margin-top: 6px; display:flex; flex-wrap:wrap; gap:8px}
.pub-links a{
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 10px;
  background: var(--bg);
}
.pub-links a:hover{color:var(--fg); background:var(--card); text-decoration:none}

/* Embeds */
.embed-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  position: relative;
}
.embed-toolbar{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
.embed-open{
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  padding: 6px 10px;
  border-radius: 999px;
  text-decoration: none;
  backdrop-filter: blur(6px);
}
.embed-open:hover{
  color: var(--fg);
  background: rgba(255,255,255,.98);
  text-decoration: none;
}
.embed-frame{
  width: 100%;
  height: min(86vh, 980px);
  border: 0;
  display: block;
  background: white;
}

/* Wide pages (e.g., embedded apps) */
body.page-wide .container{
  max-width: 1220px;
}
body.page-wide .site-sidebar{
  display:none;
}
body.page-wide .site-layout{
  grid-template-columns: 1fr;
}

/* People */
.people-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.person{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.person__photo{
  width: 76px;
  height: 76px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  display:block;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--card);
}
.person__meta{min-width:0}
.person__name{font-weight:650}
.person__desc{color:var(--muted); font-size: 13px; margin-top: 2px}

/* Research */
.theme-title{
  font-weight: 600;
  color: var(--muted);
}
.demo-teaser{
  margin: 14px 0 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--bg));
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.demo-teaser__line{
  font-size: 14px;
}
.demo-teaser__figure{
  margin: 0;
}
.demo-teaser__figure svg{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}
.demo-teaser__figure figcaption{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

@media (min-width: 820px){
  .demo-teaser{
    grid-template-columns: 1fr 420px;
    align-items: center;
  }
}

@media (max-width: 860px){
  .site-header__top{align-items:flex-start; flex-direction:column}
  .site-nav__list{justify-content:flex-start; flex-wrap:wrap; overflow-x:visible}
  .site-layout{grid-template-columns: 1fr}
  .site-sidebar{position: static}
  .site-photo{width: 180px; height: 180px}
  .people-grid{grid-template-columns: 1fr}
}