/* Publications page — loaded after bong.css, scoped to .pubs-page.
   Palette is the production one; the handoff's screenshot-sampled hexes
   (#7f6044, #f4f2ed) resolve to the real values below. */

.pubs-page {
  --pub-brown: #7e6044;
  --pub-page: #E9E6DF;
  --pub-surface: #F4F3EE;
  --pub-surface-hover: #faf9f6;
  --pub-white: #ffffff;

  --pub-border: #dcd6cb;
  --pub-border-strong: #cfc8bc;
  --pub-hairline: #d5cfc5;
  --pub-row-accent: #cfcac5;

  --pub-facet-active: #ebe6da;
  --pub-facet-hover: #e9e5db;
  --pub-chip: #ded8cd;
  --pub-tag-bg: #ece7dc;
  --pub-tag-border: #ddd5c8;
  --pub-bar: #c0b6a6;
  --pub-bar-muted: #d9d3c8;

  --pub-navy: #003366;
  --pub-text: #09090b;
  --pub-text-body: #4b453d;
  --pub-italic: #2f2a24;
  --pub-muted: #5e574d;
  --pub-muted-2: #6b6459;

  --pub-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pub-mono: ui-monospace, Menlo, monospace;

  /* Mirrors --shell-max in home.css; widened at the large-screen breakpoints
     at the foot of this file. */
  --shell-max: 1340px;

  height: auto;
  min-height: 100vh;
  font-family: var(--pub-sans);
  background: var(--pub-page);
  color: var(--pub-text);
  -webkit-font-smoothing: antialiased;
}

.pubs-page ::selection { background: var(--pub-brown); color: #fff; }
.pubs-page input,
.pubs-page select,
.pubs-page button { font-family: inherit; }

.pubs-page :focus-visible {
  outline: 2px solid var(--pub-brown);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Controls are inert without JS, so they are hidden until it runs. Every
   publication is still in the markup, so the page reads fine without them. */
html:not(.js) .pubs-js-only { display: none !important; }
html:not(.js) .pubs-shell { grid-template-columns: minmax(0, 1fr); }

/* ---------- Header ----------
   The markup is production's, shared with index.html, so these rules are scoped
   to .pubs-page and bong.css is left alone. Page-scoped selectors outrank its
   bare class selectors, including the ones inside its media queries. */

.pubs-page .nav-container {
  /* Matches --nav-h in home.css so both pages present the same header height. */
  height: 88px;
  /* The design says a flat 32px inset, but its prototype only rendered at 924px,
     where the page's own --shell-max cap never engages. max() keeps the bar
     full-bleed while lining its contents up with the hero and rail on wide
     screens — at 1920px a flat 32px would strand the logo ~290px to their left.
     The +32px matches the hero's own padding inside its --shell-max box. */
  padding: 0 max(32px, calc((100% - var(--shell-max)) / 2 + 32px));
  justify-content: space-between;
  align-items: center;
}

/* bong.css sizes this at 110px inside its own bar, overflowing it. The mark is
   inlined SVG (see the nav in published.html), so width follows the 246x57
   viewBox — 58px tall renders ~250px wide. */
.pubs-page .logo-image {
  display: block;
  width: auto;
  height: 58px;
  padding: 0;
}

.pubs-page .logo a {
  display: block;
  line-height: 0;
}

/* bong.css hides this below `max-device-width: 1000px` — physical screen size,
   not the viewport — which strips the page's only navigation affordance on a
   phone, and on any desktop whose screen is under 1000px wide regardless of how
   wide the window is. The design keeps the link (screenshots/01-mobile.png), so
   it is restored here at every width. */
.pubs-page .right-link {
  display: flex;
  height: auto;
  padding: 0;
  gap: 20px;
  font-size: 13px;
  align-items: center;
}

.pubs-page .nav-container .right-link a {
  padding: 8px 2px;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  transition: border-color var(--transition-fast);
}

.pubs-page .nav-container .right-link a:hover {
  color: #fff;
  text-decoration: none;
  border-bottom-color: #fff;
}

/* The global focus ring is brown, which is invisible on the brown bar. */
.pubs-page .nav-container :focus-visible {
  outline-color: #fff;
}

/* ---------- Hero ---------- */

.pubs-hero {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 40px 32px 12px;
}

.pubs-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pub-hairline);
}

.pubs-hero__eyebrow {
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--pub-brown);
}

.pubs-hero__title {
  margin: 0;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -.022em;
  color: var(--pub-text);
}

/* ---------- Representative papers with multimedia ----------

   Sits above the filter shell and reuses .pub-row markup, but is never touched
   by publications.js — see the row-indexing comment in that file. */

.pubs-multimedia {
  max-width: var(--shell-max);
  margin: 0 auto 8px;
  padding: 26px 32px 30px;
}

.pubs-multimedia__head { margin-bottom: 16px; }

.pubs-multimedia__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.018em;
  color: var(--pub-text);
}

.pubs-multimedia__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Shell ---------- */

.pubs-shell {
  display: grid;
  /* Grows with the shell on wide screens, so the rail doesn't shrink to a
     sliver next to a very wide results column. */
  grid-template-columns: clamp(272px, 17vw, 340px) minmax(0, 1fr);
  align-items: start;
  gap: 36px;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 32px 64px;
}

/* ---------- Filter rail ---------- */

.pubs-rail {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 20px 16px 22px 20px;
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: 8px;
}

.pubs-search { position: relative; }

.pubs-search__icon {
  position: absolute;
  left: 11px;
  top: 11px;
  opacity: .45;
  pointer-events: none;
}

.pubs-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 30px 9px 33px;
  font-size: 12.5px;
  color: var(--pub-text);
  background: var(--pub-white);
  border: 1px solid var(--pub-border-strong);
  border-radius: 5px;
  outline: none;
}

.pubs-search__clear {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 1;
  color: var(--pub-muted-2);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.pubs-search__hint {
  margin-top: 9px;
  font-size: 11px;
  color: #7a736a;
}

.pubs-search__hint kbd {
  padding: 1px 4px;
  font-family: var(--pub-mono);
  font-size: inherit;
  background: #e5e0d6;
  border: 1px solid #d5cec2;
  border-radius: 3px;
}

.pubs-facets {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.pubs-facet__label {
  margin-bottom: 11px;
  font-size: 12.5px;
  font-weight: 600;
  /* Eased from .17em so "RESEARCH AREA" still fits the rail at the larger size. */
  letter-spacing: .12em;
  color: var(--pub-brown);
}

.pubs-facet__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pubs-facet__row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 6px 7px;
  font-size: 12px;
  font-weight: 400;
  color: #3f3a33;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.pubs-facet__row:hover { background: var(--pub-facet-hover); }

.pubs-facet__row[aria-pressed="true"] {
  font-weight: 600;
  color: var(--pub-text);
  background: var(--pub-facet-active);
}

.pubs-facet__box {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  font-size: 9px;
  line-height: 13px;
  text-align: center;
  color: #fff;
  background: var(--pub-white);
  border: 1px solid #c3bbae;
  border-radius: 3px;
}

.pubs-facet__row[aria-pressed="true"] .pubs-facet__box {
  background: var(--pub-brown);
  border-color: var(--pub-brown);
}

.pubs-facet__name {
  flex: 1;
  line-height: 1.32;
  overflow: hidden;
}

.pubs-facet__more {
  margin-top: 9px;
  padding: 0;
  font-size: 11.5px;
  color: var(--pub-navy);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.pubs-clear {
  width: 100%;
  padding: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pub-brown);
  background: var(--pub-white);
  border: 1px solid var(--pub-border-strong);
  border-radius: 5px;
  cursor: pointer;
}

.pubs-clear:hover {
  color: #fff;
  background: var(--pub-brown);
  border-color: var(--pub-brown);
}

/* Mobile filter drawer toggle — hidden until the mobile breakpoint */
.pubs-drawer { display: none; }

/* ---------- Toolbar ---------- */

.pubs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
}

.pubs-toolbar__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--pub-text);
}

.pubs-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 280px;
  padding: 4px 8px 4px 9px;
  font-size: 11.5px;
  color: #3f3a33;
  background: var(--pub-chip);
  border: 1px solid var(--pub-border-strong);
  border-radius: 20px;
  cursor: pointer;
}

.pubs-chip:hover { color: var(--pub-brown); border-color: var(--pub-brown); }

.pubs-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pubs-chip__x { opacity: .6; }

.pubs-toolbar__right { display: flex; gap: 10px; }

.pubs-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 26px 7px 10px;
  font-size: 12px;
  color: var(--pub-text);
  background: var(--pub-surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6459' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 9px center;
  border: 1px solid var(--pub-border-strong);
  border-radius: 5px;
  cursor: pointer;
}

/* ---------- Groups ---------- */

.pubs-groups {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.pub-group[hidden] { display: none; }

.pub-group__head { margin: 0; }

.pub-group__toggle {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 0 10px;
  text-align: left;
  background: var(--pub-page);
  border: 0;
  border-bottom: 1px solid var(--pub-hairline);
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 2;
}

.pub-group__caret {
  display: none;
  font-size: 13px;
  line-height: 1;
  color: var(--pub-brown);
  transition: transform .15s;
}

.js .pub-group__caret { display: inline-block; }

.pub-group__toggle[aria-expanded="false"] .pub-group__caret { transform: rotate(-90deg); }

.pub-group__label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--pub-navy);
}

.pub-group__items {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 12px;
}

/* ---------- Publication row ---------- */

.pub-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 14px 16px;
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-left: 3px solid var(--pub-row-accent);
  border-radius: 5px;
}

.pub-row:hover {
  background: var(--pub-surface-hover);
  border-left-color: var(--pub-brown);
}

.pub-row[hidden] { display: none; }

.pub-row__year {
  padding-top: 1px;
  font-family: var(--pub-mono);
  font-size: 12.5px;
  color: var(--pub-brown);
}

.pub-row__title {
  margin: 0 0 5px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pub-text);
  text-wrap: pretty;
}

.pub-row__title a {
  color: inherit;
  text-decoration: none;
}

.pub-row__title a:hover {
  color: var(--pub-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pub-row__cite {
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.55;
  text-align: left;
  color: var(--pub-text-body);
  text-wrap: pretty;
}

.pub-row__cite b { font-weight: 600; color: var(--pub-text); }
.pub-row__cite i { font-style: italic; color: var(--pub-italic); }

.pub-row__tag {
  display: none;
  margin-top: 8px;
  padding: 2px 6px;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--pub-brown);
  background: var(--pub-tag-bg);
  border: 1px solid var(--pub-tag-border);
  border-radius: 3px;
}

/* The tag is redundant while the list is grouped by research area. */
.pubs-groups[data-group-by="year"] .pub-row__tag,
.pubs-groups[data-group-by="none"] .pub-row__tag { display: inline-block; }

/* ---------- ResearchBunny widget slot ---------- */

/* Hosts the real Widget V2 marker, mounted by widget.js. The widget brings its
   own styling, so this only positions it within the row. */
.rb-slot {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: flex-end;
}

/* ---------- Empty state ---------- */

.pubs-empty {
  padding: 64px 24px;
  text-align: center;
  background: var(--pub-surface);
  border: 1px dashed var(--pub-border-strong);
  border-radius: 8px;
}

.pubs-empty__title {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
}

.pubs-empty__body {
  margin-bottom: 18px;
  font-size: 12.5px;
  color: var(--pub-muted-2);
}

.pubs-empty__reset {
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--pub-brown);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

/* ---------- Footer ----------
   Also production markup shared with index.html, so likewise page-scoped. */

.pubs-page .footer {
  padding: 34px 32px 40px;
}

/* Was max-width: 60%, which parked the block off to one side. */
.pubs-page .footer .f-column {
  max-width: var(--shell-max);
  margin: 0 auto;
}

.pubs-page .footer .f-title {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
}

/* This class is used only on this page and is defined in no other stylesheet,
   so the address lines were rendering at the browser default with no leading. */
.pubs-page .f-pub-column-description {
  font-size: 12px;
  line-height: 1.7;
  opacity: .9;
}

/* Ported from .footer-pill in home.css so the LinkedIn link is identical on
   both pages. home.css itself can't be linked here — the two sheets carry
   conflicting resets. */
.pubs-page .footer-pill {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 14px;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.pubs-page .footer-pill:hover {
  color: var(--pub-brown);
  background: #fff;
  text-decoration: none;
}

/* ---------- Large screens ----------

   Mirrors the two steps in home.css so both pages widen and scale together.
   --shell-max is declared on .pubs-page, so these overrides must be too. */

@media (min-width: 1600px) {
  .pubs-page { --shell-max: 1520px; }

  .pubs-hero__title { font-size: 44px; }
  .pubs-multimedia__title { font-size: 26px; }

  .pubs-facet__label { font-size: 13.5px; }
  .pubs-facet__row { font-size: 13px; }

  .pub-group__label { font-size: 16px; }
  .pub-row__title { font-size: 16px; }
  .pub-row__cite { font-size: 13px; }
}

@media (min-width: 2000px) {
  .pubs-page { --shell-max: 1760px; }

  .pubs-hero__title { font-size: 50px; }
  .pubs-multimedia__title { font-size: 29px; }

  .pub-group__label { font-size: 17px; }
  .pub-row__title { font-size: 17px; }
  .pub-row__cite { font-size: 14px; }
}

/* ---------- Tight: row restacks so the title is not squeezed ---------- */

@media (max-width: 1139px) {
  .pub-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px 12px;
    padding: 13px 16px;
  }

  .pub-row__year {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    padding-top: 0;
  }

  .pub-row .rb-slot {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }

  .pub-row__body {
    grid-row: 2;
    grid-column: 1 / -1;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 859px) {
  .pubs-page .nav-container {
    padding: 0 16px;
  }

  .pubs-page .right-link {
    gap: 12px;
  }

  .pubs-page .logo-image {
    height: 44px;
    display: block;
  }

  .pubs-page .footer {
    padding: 28px 16px 32px;
  }

  .pubs-hero {
    padding: 22px 16px 10px;
  }

  .pubs-hero__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
  }

  .pubs-hero__title { font-size: 27px; }

  .pubs-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 0 16px 48px;
  }

  .pubs-multimedia { padding: 20px 16px 24px; }
  .pubs-multimedia__title { font-size: 19px; }

  .pubs-rail {
    position: static;
    max-height: none;
    overflow: visible;
    gap: 14px;
    padding: 14px;
  }

  .pubs-search__hint { display: none; }

  .js .pubs-drawer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: #3f3a33;
    background: var(--pub-white);
    border: 1px solid var(--pub-border-strong);
    border-radius: 6px;
    cursor: pointer;
  }

  .pubs-drawer__caret {
    font-size: 10px;
    color: var(--pub-brown);
  }

  .js .pubs-facets[hidden] { display: none; }

  .pubs-toolbar { gap: 10px; }
  .pubs-toolbar__right { width: 100%; }
  .pubs-toolbar__right .pubs-select {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 26px 11px 12px;
  }
}