@font-face {
  font-family: "AsimovHeader";
  src: url("assets/ITCBenguiatStdBoldCn.OTF") format("opentype");
  font-weight: bold;
  font-style: normal;
}

/* Prevent transitions during init (kept) */
.theme-init *,
.theme-init *::before,
.theme-init *::after {
  transition: none !important;
  animation: none !important;
}

/* Disabled state for service buttons */
.service-button.disabled {
  pointer-events: none;          /* Prevent click */
  opacity: 0.35;                 /* Greyed out */
  filter: grayscale(100%);       /* Desaturate icon/logo */
  cursor: not-allowed;           /* Cursor feedback */
  transition: opacity 0.2s ease;
}

.service-button.disabled:hover {
  opacity: 0.35;
}

.service-button.disabled[data-disabled-msg] {
  position: relative;
}

.service-button.disabled[data-disabled-msg]:hover::after {
  content: attr(data-disabled-msg);
  position: absolute;
  bottom: -32px;
  left: 0;
  padding: 4px 8px;
  background: #444;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 50;
}

/* Light palette — white surfaces and neutral panels. */
:root {
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --sans: "Avenir Next", Avenir, "Century Gothic", Futura, sans-serif;
  --bg: #f6f5f4;
  --panel: #f0efee;
  --panel-strong: #e2e0de;
  --text: #171713;
  --muted: #5a554e;
  --brand: #3e63dd;
  --brand-2: #2f7458;
  --brand-3: #3e63dd;
  --card: #fff;
  --border: #d8d6d3;
  --shadow: 0 1px 2px rgba(34, 31, 25, .05), 0 8px 20px rgba(34, 31, 25, .06);
  --ring: 0 0 0 2px rgba(62, 99, 221, 0.25);
  --chip: #f6f5f4;
  --chip-border: #e2e0de;
  color-scheme: light;
}

/* Dark — same paper/ink language, inverted */
html.theme-dark {
  --bg: #17140f;
  --panel: #211d16;
  --panel-strong: #332c20;
  --text: #f4f1e8;
  --muted: #a49b8a;
  --brand: #6f97ff;
  --brand-2: #4fae86;
  --brand-3: #6f97ff;
  --card: #1e1a13;
  --border: #3a3325;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --ring: 0 0 0 2px rgba(111, 151, 255, 0.35);
  --chip: #241f16;
  --chip-border: #3a3325;
  color-scheme: dark;
}


/* Logo — the artwork is white-on-transparent; invert it to ink in light
   theme so it reads on the paper background, no invert needed in dark. */
.brand .logo {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
}

html:not(.theme-dark) .brand .logo {
  filter: invert(1) hue-rotate(180deg);
}

/* Light/dark toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 8px;
  transition: color .15s, background .15s;
  line-height: 0;
}

.theme-toggle:hover {
  color: var(--text);
  background: var(--panel-strong);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Scale down brand text on narrow phones so it stays visible */
@media (max-width: 600px) {
  .brand-sub {
    font-size: 0.72rem;
    white-space: normal !important;
    line-height: 1.3;
  }
}

/* Global */
html {
  overflow-y: scroll;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  min-height: 100svh;
  font-family: var(--sans);
  letter-spacing: .005em;
}

.edit-website {
  margin-left: 16px;
  color: var(--muted);
}


/* Top nav — same 74px height as asimov-ui's .masthead, plain bordered bar (no sticky/blur) */
.topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.nav {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(22px, 4vw, 64px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 650;
  letter-spacing: -.02em;
}

.brand-sub {
  font-weight: 300;    /* distinctly lighter */
  opacity: 0.85;
  white-space: nowrap !important;
}

.brand-sub strong {
  font-weight: 600;    /* strong but not overpowering */
  opacity: 1;
}

.menu {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: center;
}

/* Tabs styled like asimov-ui's .nav-item: muted label, animated blue underline
   on hover/active. Active page is marked with aria-current="page" in the HTML. */
.menu a {
  position: relative;
  padding: 0 0 6px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: color .12s;
}

.menu a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform .14s ease-out;
}

.menu a:hover,
.menu a[aria-current="page"] {
  background: none;
  color: var(--text);
}

.menu a:hover::after,
.menu a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Layout — same left/right margins as asimov-ui's .shell */
.page-wrap {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  padding: 34px 0 90px;
}

/* asimov-ui tightens .shell's margin further on phones (22px → 14px each
   side) below this width — match it. */
@media (max-width: 560px) {
  .page-wrap {
    width: min(100% - 28px, 1120px);
    padding-top: 22px;
  }
}

.frontpage-layout {
  --frontpage-gap: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--frontpage-gap);
}

.frontpage-column {
  min-width: 0;
}

.group-photo-section {
  margin-top: 34px;
}

.group-photo-card {
  margin: 0;
  position: relative;
  overflow: visible;
}

.group-photo-frame {
  position: relative;
  z-index: 1;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.group-photo-stack {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}

.group-photo-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 60%;
  transform: scale(1.3);
}

.group-photo-image--fun {
  opacity: 0;
  transition: opacity .28s ease;
}

.group-photo-image--still {
  transition: opacity .28s ease;
}

.group-photo-card:hover .group-photo-image--still {
  opacity: 0;
}

.group-photo-card:hover .group-photo-image--fun {
  opacity: 1;
}

.group-photo-card:hover .group-photo-stack {
  animation: group-photo-wiggle .7s ease-in-out;
}

.confetti {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  background-repeat: no-repeat;
}

.confetti--left,
.confetti--right {
  top: 10%;
  width: 220px;
  height: 220px;
}

.confetti--left {
  left: 6%;
  background:
    radial-gradient(circle, #ff496c 0 4px, transparent 4.6px) 16px 26px / 42px 42px,
    radial-gradient(circle, #ffd166 0 4px, transparent 4.6px) 5px 74px / 48px 48px,
    radial-gradient(circle, #06d6a0 0 4px, transparent 4.6px) 48px 112px / 40px 40px,
    radial-gradient(circle, #118ab2 0 4px, transparent 4.6px) 88px 40px / 46px 46px,
    radial-gradient(circle, #7a5cff 0 4px, transparent 4.6px) 112px 90px / 50px 50px,
    radial-gradient(circle, #ff8fab 0 4px, transparent 4.6px) 146px 126px / 46px 46px,
    radial-gradient(circle, #8ecae6 0 4px, transparent 4.6px) 68px 162px / 44px 44px;
  transform: translate(-16px, 24px) scale(.7) rotate(-12deg);
}

.confetti--right {
  right: 6%;
  background:
    radial-gradient(circle, #7a5cff 0 4px, transparent 4.6px) 20px 30px / 42px 42px,
    radial-gradient(circle, #06d6a0 0 4px, transparent 4.6px) 90px 18px / 50px 50px,
    radial-gradient(circle, #ff496c 0 4px, transparent 4.6px) 120px 70px / 46px 46px,
    radial-gradient(circle, #118ab2 0 4px, transparent 4.6px) 58px 108px / 44px 44px,
    radial-gradient(circle, #ffd166 0 4px, transparent 4.6px) 8px 126px / 48px 48px,
    radial-gradient(circle, #ff8fab 0 4px, transparent 4.6px) 146px 144px / 46px 46px,
    radial-gradient(circle, #8ecae6 0 4px, transparent 4.6px) 106px 166px / 44px 44px;
  transform: translate(16px, 24px) scale(.7) rotate(12deg);
}

.confetti--top {
  top: -18px;
  left: 50%;
  width: 300px;
  height: 180px;
  margin-left: -150px;
  background:
    radial-gradient(circle, #ff496c 0 4px, transparent 4.6px) 26px 80px / 44px 44px,
    radial-gradient(circle, #ffd166 0 4px, transparent 4.6px) 78px 24px / 48px 48px,
    radial-gradient(circle, #06d6a0 0 4px, transparent 4.6px) 122px 62px / 42px 42px,
    radial-gradient(circle, #118ab2 0 4px, transparent 4.6px) 164px 16px / 44px 44px,
    radial-gradient(circle, #7a5cff 0 4px, transparent 4.6px) 174px 88px / 48px 48px,
    radial-gradient(circle, #ff8fab 0 4px, transparent 4.6px) 228px 48px / 44px 44px,
    radial-gradient(circle, #8ecae6 0 4px, transparent 4.6px) 244px 104px / 46px 46px;
  transform: translateY(16px) scale(.72);
}

.confetti--bottom-left,
.confetti--bottom-right {
  bottom: -12px;
  width: 220px;
  height: 180px;
}

.confetti--bottom-left {
  left: 12%;
  background:
    radial-gradient(circle, #ffd166 0 4px, transparent 4.6px) 14px 92px / 42px 42px,
    radial-gradient(circle, #ff496c 0 4px, transparent 4.6px) 54px 126px / 48px 48px,
    radial-gradient(circle, #06d6a0 0 4px, transparent 4.6px) 118px 82px / 44px 44px,
    radial-gradient(circle, #118ab2 0 4px, transparent 4.6px) 152px 118px / 46px 46px,
    radial-gradient(circle, #7a5cff 0 4px, transparent 4.6px) 184px 62px / 44px 44px;
  transform: translate(-18px, 18px) scale(.72) rotate(-10deg);
}

.confetti--bottom-right {
  right: 12%;
  background:
    radial-gradient(circle, #7a5cff 0 4px, transparent 4.6px) 18px 64px / 44px 44px,
    radial-gradient(circle, #06d6a0 0 4px, transparent 4.6px) 56px 118px / 46px 46px,
    radial-gradient(circle, #ffd166 0 4px, transparent 4.6px) 108px 86px / 48px 48px,
    radial-gradient(circle, #ff496c 0 4px, transparent 4.6px) 156px 128px / 42px 42px,
    radial-gradient(circle, #118ab2 0 4px, transparent 4.6px) 180px 74px / 44px 44px;
  transform: translate(18px, 18px) scale(.72) rotate(10deg);
}

.group-photo-card:hover .confetti--left {
  animation: confetti-left .75s ease-out forwards;
}

.group-photo-card:hover .confetti--right {
  animation: confetti-right .75s ease-out forwards;
}

.group-photo-card:hover .confetti--top {
  animation: confetti-top .75s ease-out forwards;
}

.group-photo-card:hover .confetti--bottom-left {
  animation: confetti-bottom-left .75s ease-out forwards;
}

.group-photo-card:hover .confetti--bottom-right {
  animation: confetti-bottom-right .75s ease-out forwards;
}

@media (max-width: 980px) {
  .frontpage-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Repos above services on mobile so they aren't buried below 6 stacked rows */
  .frontpage-column:last-child {
    order: -1;
  }
}

/* Page title — one h1.section-title per page, styled like asimov-ui's h1 */
.section-title {
  margin: 0 0 28px;
  font: 400 clamp(30.4px, 4vw, 48px)/.96 var(--serif);
  letter-spacing: -.035em;
  font-weight: 400;
}

/* Sub-section header — mirrors asimov-ui's .section-label */
.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.section-label::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}

.service-card__brand-title {
  font-family: "AsimovHeader", Georgia, serif;
}

/* Sub-heading within a page (e.g. About's "Research Focus") — smaller than
   the page h1, generous margin so it never sits flush against the card
   above or below it. */
.page-subhead {
  margin: 46px 0 16px;
  font: 400 22px/1.3 var(--serif);
  letter-spacing: -.01em;
  font-weight: 400;
}

.page-subhead:first-child {
  margin-top: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.card.link-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 22px;
}

.link-row .icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.link-row__body {
  min-width: 0;
}

.link-row__body h3 {
  margin: 0 0 4px;
}

.link-row__body p {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cards */
.card {
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color .12s ease, background .12s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
  gap: 14px;
  align-items: center;
  isolation: isolate;
}

.card:focus-visible {
  outline: none;
  box-shadow: var(--shadow), var(--ring);
}

/* Hover/shimmer ONLY for <a class="card"> */
a.card:hover {
  border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
  background: color-mix(in oklab, var(--card) 94%, var(--panel));
}

.card .shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  background: radial-gradient(300px 120px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 60%);
  mix-blend-mode: overlay;
}

a.card:hover .shine {
  opacity: 1;
}

article.card {
  cursor: default; /* non-link cards not interactive */
}

/* Icon in cards — a ringed circular mark, like asimov-ui's .wordmark-mark */
.icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--text);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
}

.icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Standalone icon — has its own visual design (e.g. asimov favicon) */
.icon.icon--glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "AsimovHeader", Georgia, serif;
  font-size: 1.6rem;
  line-height: 1;
  padding-top: 0.08em;
}

.card h3 {
  margin: 0 0 4px;
  font: 400 19px/1.15 var(--serif);
  letter-spacing: -.01em;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.repo-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  flex: 0 0 40px;
  object-fit: cover;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer */
footer {
  opacity: .8;
  color: var(--muted);
  text-align: center;
  padding: 24px 16px 40px;
  font-size: 13px;
}

/* ------------------------------------------------------------
   Card content alignment
   ------------------------------------------------------------ */

/* Force card content to align fully left */
.card {
  text-align: left !important;
  align-items: flex-start !important;
}

/* Lists inside cards */
.card .mono-list {
  padding-left: 1rem;
  margin-left: 0;
  font-size: 0.85rem;
  list-style-position: inside;
  text-align: left;
}

.card .mono-list li {
  text-align: left;
}

/* ------------------------------------------------------------
   Images
   ------------------------------------------------------------ */

.image-frame {
  margin: 12px 0 16px;
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 3px;
}

.image-frame img {
  display: block;
  max-width: 100%;
  height: auto;
}

@keyframes group-photo-wiggle {
  0% { transform: rotate(0deg) scale(1); }
  18% { transform: rotate(-1.4deg) scale(1.01); }
  36% { transform: rotate(1.8deg) scale(1.015); }
  54% { transform: rotate(-1.2deg) scale(1.012); }
  72% { transform: rotate(1deg) scale(1.008); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes confetti-left {
  0% { opacity: 0; transform: translate(-16px, 24px) scale(.7) rotate(-12deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(-132px, -86px) scale(1.14) rotate(-28deg); }
}

@keyframes confetti-right {
  0% { opacity: 0; transform: translate(16px, 24px) scale(.7) rotate(12deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(132px, -86px) scale(1.14) rotate(28deg); }
}

@keyframes confetti-top {
  0% { opacity: 0; transform: translateY(16px) scale(.72); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-108px) scale(1.12); }
}

@keyframes confetti-bottom-left {
  0% { opacity: 0; transform: translate(-18px, 18px) scale(.72) rotate(-10deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(-104px, 74px) scale(1.08) rotate(-24deg); }
}

@keyframes confetti-bottom-right {
  0% { opacity: 0; transform: translate(18px, 18px) scale(.72) rotate(10deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(104px, 74px) scale(1.08) rotate(24deg); }
}

@media (prefers-reduced-motion: reduce) {
  .group-photo-image--fun,
  .group-photo-image--still,
  .group-photo-card:hover .group-photo-stack,
  .group-photo-card:hover .confetti--left,
  .group-photo-card:hover .confetti--right,
  .group-photo-card:hover .confetti--top,
  .group-photo-card:hover .confetti--bottom-left,
  .group-photo-card:hover .confetti--bottom-right {
    animation: none;
    transition: none;
  }

  .confetti {
    display: none;
  }
}

/* ------------------------------------------------------------
   Toolbar (publications / group members filter bar)
   ------------------------------------------------------------ */

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  white-space: nowrap;
}

.search {
  flex: 3 1 200px;
}

.search input {
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 0.9rem;
  padding-left: 10px;
  box-shadow: none;
  width: 90%;
}

.search svg {
  opacity: 0.6;
  width: 16px;
  height: 16px;
}

/* ------------------------------------------------------------
   Group members — person cards
   ------------------------------------------------------------ */

.people {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

/* Photo bleeds full-height off the left edge of the card, no circle mask. */
.person {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 3px;
  min-height: 200px;
}

/* The clip boundary — sized to the photo bleed area, and the only thing
   allowed to cut it off. Per-person avatar transforms below scale the <img>
   inside this frame, so a zoomed photo still cuts off exactly here instead
   of spilling into the text column. */
.avatar-frame {
  position: absolute;
  inset: 0;
  width: 160px;
  height: 100%;
  overflow: hidden;
}

.avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: saturate(.78);
}

/* These two source photos have a lot of headroom/background around a small
   face — zoom in past cover's natural crop so the face reads at this size. */
.avatar[alt="Frederik Lizak Johansen"] {
  transform: scale(1.6);
  transform-origin: 50% 32%;
}

.avatar[alt="Divyansh Gautam"] {
  transform: scale(1.8);
  transform-origin: 42% 38%;
}

.person > div {
  position: relative;
  margin-left: 210px;
  padding: 22px 22px 22px 0;
}

@media (max-width: 640px) {
  .person {
    min-height: 150px;
  }
  .avatar-frame {
    width: 100px;
  }
  .person > div {
    margin-left: 140px;
  }
}

.name {
  font: 400 21px/1.2 var(--serif);
  letter-spacing: -.02em;
  margin: 0;
}

.role {
  margin: 3px 0 0;
  color: var(--brand);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Metadata + link row */
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Plain text metadata (office, year, advisors) */
.field-text {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Separator dot between consecutive text fields */
.field-text + .field-text::before {
  content: "·";
  margin-right: 5px;
  opacity: 0.45;
}

/* Plain text link — visually distinct from chip tags */
.field-link {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .12s;
}

.field-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* Chips */
.chips {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 4px 9px;
  font-size: 0.7rem;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font-weight: 600;
}

/* Bio */
.bio {
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.3;
}

/* Left alignment */
.wrap,
.person,
.person > div,
.headerline,
.row,
.chips,
.bio,
.field-text,
.field-link {
  text-align: left;
  align-items: flex-start;
}

/* Card column layout — overrides default row flex on .card */
.card-column {
  flex-direction: column;
  gap: .8rem;
  padding: 26px 28px;
}

.card-column img {
  display: block;
  max-width: 100%;
  height: auto;
}

.card-column h4 {
  margin: 22px 0 4px;
  font: 400 20px/1.25 var(--serif);
  letter-spacing: -.01em;
}

.card-column h4:first-child {
  margin-top: 0;
}

.card-column code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--chip);
  font-size: .92em;
}

/* ------------------------------------------------------------
   Member filter tabs
   ------------------------------------------------------------ */

#member-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.member-tab {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.member-tab:hover {
  border-color: color-mix(in oklab, var(--brand) 50%, var(--panel-strong));
  color: var(--text);
}

.member-tab.active {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand) 12%, var(--card));
  color: var(--text);
}

/* ------------------------------------------------------------
   Publication cards (expandable)
   ------------------------------------------------------------ */

.pubs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.pub-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color .15s ease;
}

.pub-card:hover {
  border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
}

.pub-summary {
  padding: 14px 16px;
}

.pub-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.pubtitle {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  flex: 1;
}

.pub-year {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.pub-meta {
  margin-top: 5px;
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}

.pub-authors-short::after {
  content: "·";
  margin-left: 10px;
}

.pub-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 8px;
}

.pub-footer-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.plink {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--panel-strong);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  transition: border-color .12s, background .12s;
}

.plink:hover {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand) 8%, var(--card));
}

.member-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.member-chip {
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--chip-border);
  background: var(--chip);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}

.member-chip:hover {
  border-color: color-mix(in oklab, var(--brand) 50%, var(--chip-border));
  background: color-mix(in oklab, var(--brand) 10%, var(--chip));
  color: var(--text);
}

.pub-toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color .12s, transform .15s;
}

.pub-toggle:hover { color: var(--text); }

.pub-card.open .pub-toggle {
  transform: rotate(180deg);
}

/* Expandable detail section */
.pub-detail {
  padding: 0 16px 14px;
  border-top: 1px solid var(--panel-strong);
  margin-top: 2px;
}

.pub-authors-full {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

.pub-abstract {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.9;
}

.tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.year {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.4rem 0 .5rem;
  color: var(--muted);
}

/* ------------------------------------------------------------
   BURGER MENU – MOBILE
   ------------------------------------------------------------ */

/* Hide burger on desktop */
#burger {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--text);
  padding: 4px 8px;
  line-height: 1;
}

/* Mobile breakpoint */
@media (max-width: 1050px) {

  /* Show burger */
  #burger {
    display: block;
  }

  /* Collapse menu by default */
  .menu {
    position: absolute;
    top: 76px;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    background: color-mix(in oklab, var(--card) 96%, var(--bg));
    border-bottom: 1px solid var(--panel-strong);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    padding: 8px 0 12px;
    z-index: 50;
  }

  /* Open state */
  .menu.open {
    display: flex;
  }

  /* Nav links in mobile menu */
  .menu a {
    padding: 12px 20px !important;
    border-radius: 0 !important;
    text-align: left !important;
    background: none !important;
    font-size: 1rem;
    color: var(--muted);
  }

  .menu a:hover {
    color: var(--text);
    background: var(--panel) !important;
  }

  /* Theme toggle in mobile menu */
  .theme-toggle {
    border-top: 1px solid var(--panel-strong) !important;
    border-radius: 0 !important;
    width: 100%;
    padding: 12px 20px !important;
    justify-content: flex-start !important;
  }
}

/* ------------------------------------------------------------
   Page loading screen — mirrors asimov-ui's, with the EnCI logo
   standing in for the asimov mark.
   ------------------------------------------------------------ */

.page-loading-screen {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
  transition: opacity .32s ease, visibility .32s ease;
}

.page-loading-screen.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loading-vessel {
  display: grid;
  place-items: center;
  gap: 22px;
  text-align: center;
}

.page-loading-mark {
  position: relative;
  width: 136px;
  height: 136px;
  display: grid;
  place-items: center;
  border: 1px solid var(--text);
  border-radius: 50%;
  background: var(--card);
}

.page-loading-letter {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 71px;
  background: color-mix(in oklab, var(--text) 16%, transparent);
  -webkit-mask: url("assets/enci_logo.png") center / contain no-repeat;
  mask: url("assets/enci_logo.png") center / contain no-repeat;
}

/* The same mark again, filled and clipped to a rising waterline. */
.page-loading-letter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text);
  -webkit-mask: url("assets/enci_logo.png") center / contain no-repeat;
  mask: url("assets/enci_logo.png") center / contain no-repeat;
  clip-path: polygon(0 100%, 0 89%, 16% 84%, 31% 90%, 47% 84%, 63% 89%, 79% 83%, 100% 88%, 100% 100%);
  animation: loading-water 2.8s cubic-bezier(.42, 0, .2, 1) infinite;
}

.page-loading-copy {
  margin: 0;
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.page-loading-copy::after {
  content: "···";
  display: inline-block;
  width: 1.6em;
  overflow: hidden;
  vertical-align: bottom;
  animation: loading-ellipsis 1.2s steps(4, end) infinite;
}

@keyframes loading-water {
  0%, 12% { clip-path: polygon(0 100%, 0 89%, 16% 84%, 31% 90%, 47% 84%, 63% 89%, 79% 83%, 100% 88%, 100% 100%); }
  52%, 72% { clip-path: polygon(0 100%, 0 24%, 16% 18%, 31% 25%, 47% 19%, 63% 25%, 79% 17%, 100% 23%, 100% 100%); }
  100% { clip-path: polygon(0 100%, 0 89%, 16% 84%, 31% 90%, 47% 84%, 63% 89%, 79% 83%, 100% 88%, 100% 100%); }
}

@keyframes loading-ellipsis {
  to { width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .page-loading-letter::after,
  .page-loading-copy::after {
    animation: none;
  }
  .page-loading-letter::after {
    clip-path: polygon(0 100%, 0 42%, 16% 37%, 31% 43%, 47% 37%, 63% 43%, 79% 36%, 100% 42%, 100% 100%);
  }
}