/* ============================================================
   SHARED — tokens, base typography, and every component that
   appears on BOTH the CHI site (ledger layout) and the faculty
   page (compact layout).

   Load order on every page:
     shared.css  →  chi.css   (Center site)
     shared.css  →  faculty.css (faculty page)

   The two pages use different page furniture on purpose, but
   colors, type, rules, tables, publication lists, people cards,
   and disclosure widgets all come from this file, so the two
   sites stay recognizably related.
   ============================================================ */

:root {
  --cherry:      #9e1b34;   /* Temple Cherry — primary */
  --cherry-dark: #6f0f22;
  --cherry-tint: #f6ecee;
  --navy:        #28283d;   /* carried over from chi.temple.edu */
  --ink:         #1b1b1f;
  --ink-soft:    #3f3f47;
  --muted:       #6e6e78;
  --line:        #cfc9c0;
  --line-soft:   #e4dfd7;
  --paper:       #fbfaf7;
  --panel:       #f2efe9;
  --white:       #fff;

  --fs-micro: 11.5px;
  --fs-small: 13.5px;
  --fs-base:  15.5px;
  --fs-med:   17px;
  --fs-lg:    20px;
  --fs-xl:    26px;

  --sans: "Helvetica Neue", Arial, Helvetica, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--fs-base)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cherry-dark); text-underline-offset: 2px; }
a:hover { color: var(--cherry); }
p { margin: 0 0 .6em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.2; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--cherry); outline-offset: 2px; }

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--cherry); color: #fff; padding: 8px 14px; font-size: var(--fs-small); }
.skip-link:focus { top: 8px; }

/* ------------------------------------------------------------
   AUTO-FLOWING GRIDS  — the answer to "what if I add or remove
   an item?"

   Nothing is hard-coded to three or four columns. The browser
   fits as many equal tracks as the width allows and the items
   share the row evenly, so three items make three columns, four
   make four, and five wrap onto a second row at the same width.
   Grid also equalizes row heights, so the top rules always line
   up no matter how uneven the text is.

   To change the target column width for one section, set --col
   on that element:  <div class="auto-grid" style="--col:320px">
   ------------------------------------------------------------ */

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 250px)), 1fr));
  gap: var(--gap-y, 18px) var(--gap-x, 26px);
}

/* ---------- Topic / card block (used in both layouts) -------- */

.topic { border-top: 3px solid var(--cherry); padding-top: 9px; }
.topic.thin { border-top-width: 1px; border-top-color: var(--line); }
.topic .kicker {
  display: block; font: 700 var(--fs-micro)/1.3 var(--sans);
  text-transform: uppercase; letter-spacing: .12em; color: var(--cherry);
  margin-bottom: 5px;
}
.topic h3 { font-size: var(--fs-base); font-weight: 600; margin-bottom: 5px; }
.topic h3.lead-q { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.topic p { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.topic .refs { margin-top: 7px; font-size: var(--fs-micro); line-height: 1.55; color: var(--muted); }
.topic .refs b { color: var(--ink); }

/* Link row pinned to the bottom of a card, so cards in a row end
   on the same line even when the text above differs in length. */
.topic { display: flex; flex-direction: column; }
.topic .card-links {
  margin-top: auto; padding-top: 9px;
  display: flex; flex-wrap: wrap; gap: 3px 12px;
  font-size: var(--fs-micro); line-height: 1.5;
}
.topic .card-links::before {
  content: ""; position: relative; top: -5px;
  display: block; width: 100%; height: 0; border-top: 1px solid var(--line-soft);
}

/* ---------- Placeholder links ------------------------------- */
/* Anything still needing a real URL is marked .todo: it renders
   as a dotted link with a small bracket so unfinished items are
   obvious on the page instead of silently going nowhere.        */

a.todo { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted); }
a.todo::after { content: " ⟨link⟩"; font-size: .85em; color: var(--cherry); letter-spacing: .02em; }
a.todo:hover { color: var(--cherry); border-bottom-color: var(--cherry); }

/* ---------- Highlights -------------------------------------- */

.highlights { border-top: 1px solid var(--ink); }
.highlights li {
  list-style: none;
  display: grid; grid-template-columns: 90px minmax(0, 1fr);
  gap: 4px 18px; padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.highlights { margin: 0; padding: 0; }
.highlights .when {
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--cherry); padding-top: 2px;
}
.highlights .what { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.highlights .what strong { color: var(--ink); font-weight: 600; }

/* ---------- Ledger tables ----------------------------------- */

.ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ledger th {
  text-align: left; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700; padding: 0 12px 5px 0; border-bottom: 1px solid var(--ink);
}
.ledger td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink-soft); }
.ledger td:first-child { color: var(--ink); font-weight: 600; }
.ledger tr:hover td { background: var(--cherry-tint); }
.ledger .yr { color: var(--cherry); font-weight: 700; white-space: nowrap; }
.ledger .who { white-space: nowrap; }
.ledger .out { font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; }
.ledger .out a { margin-right: 8px; }

/* ---------- People ------------------------------------------ */

.person { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 14px; align-items: start; }
.person img {
  width: 66px; height: 66px; object-fit: cover; display: block;
  border: 1px solid var(--line); background: var(--panel);
}
.person h4 { font-size: var(--fs-base); font-weight: 600; }
.person .dept { font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; }
.person .interests { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 4px; line-height: 1.45; }
.person .person-links { margin-top: 5px; font-size: var(--fs-micro); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.person.is-lead h4 .badge {
  display: inline-block; margin-left: 7px; padding: 1px 6px; vertical-align: 2px;
  background: var(--cherry); color: #fff; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}

/* Affiliated faculty: no photo, tighter */
.affiliate { border-top: 1px solid var(--line-soft); padding-top: 7px; }
.affiliate h4 { font-size: var(--fs-small); font-weight: 600; }
.affiliate .dept { font-size: var(--fs-micro); color: var(--muted); margin-top: 1px; }
.affiliate .interests { font-size: var(--fs-micro); color: var(--ink-soft); margin-top: 3px; }

/* ---------- Students ---------------------------------------- */

.student { border-top: 1px solid var(--line); padding-top: 8px; }
.student h4 { font-size: var(--fs-base); font-weight: 600; }
.student .interests { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 3px; line-height: 1.45; }
.student .person-links { margin-top: 5px; font-size: var(--fs-micro); display: flex; flex-wrap: wrap; gap: 2px 10px; }

/* ---------- Publications ------------------------------------ */

.rep-pubs { border-top: 1px solid var(--ink); margin-bottom: 14px; }

details.pub { border-bottom: 1px solid var(--line-soft); }
details.pub > summary {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px; padding: 8px 0; cursor: pointer; list-style: none;
  font-size: var(--fs-small); line-height: 1.5;
}
details.pub > summary::-webkit-details-marker { display: none; }
details.pub > summary:hover { background: var(--cherry-tint); }
details.pub[open] > summary { background: var(--cherry-tint); }

.pub-type {
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--cherry); padding-top: 2px; line-height: 1.35;
}
.pub-cite { color: var(--ink-soft); }
.pub-cite b { color: var(--ink); font-weight: 700; }
.pub-title { display: block; font-weight: 600; color: var(--ink); }
.pub-venue { display: block; font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; }

/* The little chevron that says "there is an abstract in here" */
.pub-cite::after {
  content: "▸ abstract"; display: inline-block; margin-left: 8px;
  font-size: var(--fs-micro); color: var(--cherry); white-space: nowrap;
}
details.pub[open] .pub-cite::after { content: "▾ abstract"; }

.pub-abs {
  padding: 2px 0 12px 110px;
  font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft);
  border-left: 0;
}
.pub-abs p { max-width: 62em; }
.pub-links { margin-top: 8px; font-size: var(--fs-micro); }

p.pub-flat {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px; padding: 8px 0; margin: 0;
  border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small);
}
p.pub-flat .pub-cite::after { content: ""; margin: 0; }
p.pub-flat .pub-links { display: block; margin-top: 4px; }

.pub-year { margin-top: 10px; }
.pub-year h4 {
  font: 700 var(--fs-micro)/1 var(--sans); letter-spacing: .12em;
  color: var(--cherry); padding-bottom: 5px; border-bottom: 1px solid var(--ink);
}

/* ---------- Disclosure ("show all") ------------------------- */

details.reveal { margin-top: 12px; }
details.reveal > summary {
  display: inline-block; cursor: pointer; list-style: none;
  padding: 5px 12px; border: 1px solid var(--cherry); color: var(--cherry-dark);
  font-size: var(--fs-small); font-weight: 600; background: var(--white);
}
details.reveal > summary::-webkit-details-marker { display: none; }
details.reveal > summary::before { content: "▸ "; }
details.reveal[open] > summary::before { content: "▾ "; }
details.reveal > summary:hover { background: var(--cherry); color: #fff; }
details.reveal .reveal-body { margin-top: 14px; }
details.reveal .reveal-note { font-size: var(--fs-micro); color: var(--muted); margin-bottom: 10px; }

/* ---------- Small shared bits ------------------------------- */

.note { background: var(--panel); padding: 12px 14px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }
.note strong { color: var(--ink); }

.pillbox { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; margin: 0; }
.pillbox li { font-size: var(--fs-small); padding: 3px 9px; background: var(--white); border: 1px solid var(--line); color: var(--ink-soft); }

.steps { display: flex; flex-wrap: wrap; gap: 4px 8px; font: var(--fs-small)/1.4 var(--serif); color: var(--ink-soft); margin: 10px 0; }
.steps b { font-weight: 600; color: var(--ink); }
.steps i { font-style: normal; color: var(--cherry); }

.linkline { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-small); }
.sub-head {
  font: 700 var(--fs-micro)/1.3 var(--sans); text-transform: uppercase;
  letter-spacing: .12em; color: var(--cherry);
  padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.sub-head .hint { float: right; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: var(--fs-micro); }

/* Institutional links — Temple / CST / CIS. Required on both pages. */
.inst {
  display: flex; flex-wrap: wrap; gap: 3px 16px;
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em;
}
.inst a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.inst a:hover { color: var(--cherry); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media print {
  body { background: #fff; font-size: 10pt; }
  .skip-link, details.reveal { display: none; }
  details.pub > summary { cursor: auto; }
  .pub-cite::after { content: ""; }
}