:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#5a5a5a;
  --rule:#e8e8e8;

  /* slightly narrower = everything scales down a bit */
  --col-max: 580px;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font: 14.75px/1.64 "EB Garamond", Garamond, "Adobe Garamond Pro",
        "Garamond Premier Pro", Georgia, serif;
}

a{
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
a:hover{ border-bottom-color: var(--fg); }

/* Page */
.page{
  width: 100%;
  margin: 0 auto;
  padding: 0 18px 26px;
}

/* ONE shared column (photo + text + rules align) */
.hero,
.content,
.bottom-contact,
.foot{
  max-width: var(--col-max);
  margin-left: auto;
  margin-right: auto;
}

/* Hero */
.hero{
  margin-top: 34px;
  margin-bottom: 16px;
}

/* No distortion; controlled height */
.hero img{
  width: 100%;
  aspect-ratio: 16 / 11;
  display: block;

  object-fit: cover;
  object-position: 50% 100%;
}

/* Type */
h1{
  font-size: 24px;
  line-height: 1.12;
  margin: 0 0 14px 0;
  letter-spacing: -0.01em;
}

.intro{
  margin: 0 0 14px 0;
  font-size: 14.75px;
}

/* keep same color/weight as intro (no grey) */
.intro-compact{
  margin: 0 0 16px 0;
  color: var(--fg);
  font-size: 14.75px;
}

/* Sections (closer together) */
.section{
  margin-top: 8px;              /* was 12px */
  border-top: 1px solid var(--rule);
  padding-top: 6px;             /* was 10px */
}

/* Headers match page typography (not bold, not uppercase) */
.section-summary{
  list-style: none;
  cursor: pointer;
  user-select: none;

  font-size: 14.75px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 6px 0;               /* was 8px */
}

.section-summary::-webkit-details-marker{ display:none; }

.section-summary::after{
  content:"+";
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  margin-left: 12px;
}

details[open] > .section-summary::after{ content:"−"; }

.section-summary:focus{ outline:none; }
.section-summary:focus-visible{
  box-shadow: 0 1px 0 0 var(--fg);
}

/* Items (inside opened sections) */
.section .item:first-of-type{ margin-top: 10px; }  /* was 12px */
.item{ margin: 0 0 12px 0; }

.title{ margin: 0 0 3px 0; }
.meta{
  color: var(--muted);
  font-size: 13.75px;
}

/* Highlight chips */
.hl{
  padding: 0.05em 0.35em;
  border-radius: 0.25em;
  white-space: nowrap;
}

/* Publication highlights */
.hl-pub-prism{ background-color: #dbe9ff; }
.hl-pub-food{ background-color: #ffe6bf; }
.hl-pub-caixin{ background-color: #d7f0e0; }
.hl-pub-brooks{ background-color: #eadbff; }
.hl-pub-diplomat{ background-color: #f2e6d8; }
.hl-pub-animalhistory{ background-color: #e9e9e9; }

/* Institution highlights */
.hl-inst-alac{ background-color: #ffe0d6; }
.hl-inst-4s{ background-color: #d7f0ef; }

.hl-inst-uoft{ background-color: #e7d2ee; }
.hl-inst-massey{ background-color: #d7e7ff; }
.hl-inst-durham{ background-color: #d8f0e0; }
.hl-inst-standrews{ background-color: #ffe2bf; }
.hl-inst-cambridge{ background-color: #f0d6c8; }
.hl-inst-york{ background-color: #e9e9e9; }
.hl-inst-iscls{ background-color: #dfe6f8; }

/* Bottom contact */
.bottom-contact{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.social-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 0;
}

.social-link span{
  border-bottom: 1px solid var(--rule);
}
.social-link:hover span{ border-bottom-color: var(--fg); }

.icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.social-link:hover .icon{ color: var(--fg); }

.email-link{ border-bottom: 0; }
.email-link:hover{ border-bottom: 0; }

.foot{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* Responsive */
@media (max-width: 760px){
  :root{ --col-max: 92vw; }
  .page{ padding: 0 16px 24px; }
  .hero{ margin-top: 24px; }
  .hero img{
    aspect-ratio: 4 / 3;
    object-position: 50% 98%;
  }
}