/* static/css/site.css
   - EB Garamond everywhere (single switch)
   - Preserves your prior styles/components
   - Adds a font reset shim at the end to beat inline body rules
*/

/* === Fonts (two-family scheme) === */
:root{
  /* One-line switches */
  --font-serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Role-based aliases so you can flip groups easily */
  --font-body:    var(--font-serif);  /* long-form reading */
  --font-heading: var(--font-sans);   /* headings */
  --font-ui:      var(--font-sans);   /* nav, chips, buttons, inputs */
}

/* Defaults */
html, body {
  font-family: var(--font-body);
  line-height: 1.55;
}

/* Serif (reading) — your spec */
p,
.term-summary,
.term-sources,
blockquote {
  font-family: var(--font-body);
}

/* Sans (UI + headings) — your spec */
h1, h2, h3, h4, h5, h6,
a,                     /* links site-wide use sans (as requested) */
nav,
.chip,
.topbar,
.edit-link,
button, input, select, textarea, label {
  font-family: var(--font-ui);
}

/* Utilities (handy for exceptions) */
.ff-serif { font-family: var(--font-serif) !important; }
.ff-sans  { font-family: var(--font-sans)  !important; }

/* === Typography tokens (central control) === */
:root {
  /* === Base === */
  /* Standard reading size shared by most text elements */
  --fs-body:     clamp(16px, 0.28vw + 14px, 18px);
  --lh-body:     1.55;

  /* === Derived scales === */
  /* One step smaller – for meta, chips, labels */
  --fs-small:    clamp(13px, 0.22vw + 12px, 15px);
  --lh-small:    1.35;

  /* One step larger – for summaries, sources, bios, general content */
  --fs-summary:  var(--fs-body);
  --lh-summary:  1.45;

  --fs-sources:  var(--fs-body);
  --lh-sources:  1.45;

  --fs-bio:      clamp(17px, 0.28vw + 15px, 19px);
  --lh-bio:      1.45;

  /* === Headings (slightly larger than body) === */
  --fs-h1: clamp(18px, 0.40vw + 15px, 20px);
  --fs-h2: clamp(18px, 0.40vw + 15px, 20px);
  --fs-h3: clamp(18px, 0.40vw + 15px, 20px);
}



/* === Design tokens === */
:root{
  --bg:#fff; --ink:#111; --muted:#666; --line:#e7e7eb; --chip:#f3f4f6;
  --wrap:920px; --section-max:640px; --verified:#3b82f6; --danger:#b91c1c;
  --bottom-bar-space:0px; --topbar-offset:0px;
}

/* === Base === */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--ink); background:var(--bg);
  font-family:var(--font-body);
  line-height:1.55;
  padding-bottom:var(--bottom-bar-space);
}
a{ color:#0b57d0; text-decoration:none }
a:hover{ text-decoration:underline }
.muted{ color:var(--muted) }
.small{ font-size:12px }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }

h1, h2, h3, h4, h5, h6{ font-family:var(--font-heading); }
button, input, select, textarea{ font-family:var(--font-ui); }

/* === Layout === */
.wrap{ max-width:var(--wrap); margin:0 auto; padding:16px }

/* Honor [hidden] everywhere, even if components set display */
[hidden]{
  display:none !important;
}

/* === Headings === */
h1{ margin:6px 0 12px }
h2,.section-title{ margin:18px 0 8px }

/* === Generic card/list === */
.list{ list-style:none; padding:0; margin:0 }
.item{
  padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.03); margin:8px 0;
  transition:transform .06s, box-shadow .12s, border-color .12s;
}
.item:hover{ transform:translateY(-1px); box-shadow:0 2px 10px rgba(0,0,0,.06); border-color:#cbd5e1; }

/* === Shared page header === */
.page-head { margin: .5rem 0 1rem; }
.page-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 700;
  margin: 0;
}
.page-sub { margin: .25rem 0 0; color: var(--muted); }

/* === Person cards (year/search pages) === */
.person-grid{
  display:grid; gap:6px; margin:8px 0 6px; width:100%;
  max-width:var(--section-max); margin-inline:auto;
}
.pcard{
  padding:10px; border:1px solid var(--line); border-radius:12px;
  background:#fff; text-decoration:none; color:inherit;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:transform .06s, box-shadow .12s, border-color .12s;
}
.pcard:hover{ transform:translateY(-1px); box-shadow:0 2px 10px rgba(0,0,0,.06); border-color:#cbd5e1; }

.avatar-wrap{
  /* Default list size (years/search): keep current 44px */
  --avatar-w: 44px;
  --avatar-h: 44px;
  --avatar-radius: 10px;
  /* Theme tokens (override per-context) */
  --avatar-bg: #f6f7f9;
  --avatar-border: 1px solid var(--line);
  --avatar-text: inherit;

  flex: 0 0 var(--avatar-w);
  width: var(--avatar-w);
  height: var(--avatar-h);
  border-radius: var(--avatar-radius);
  overflow: hidden;
  border: var(--avatar-border);
  background: var(--avatar-bg);
  color: var(--avatar-text);
  display: grid; place-items: center; font-weight: 700;
}
.avatar{ display:block; width:100%; height:100%; object-fit:cover; }

/* Fallback initial helper (inherits color from .avatar-wrap) */
.avatar-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size: var(--avatar-font, 18px);
  font-weight: 700;
}

.pmeta{ min-width:0; display:flex; flex-direction:column; }
.name-row{ display:flex; align-items:center; gap:8px; margin-bottom:0.4em; }
.pname{
  font-size:14px; font-weight:700; line-height:1.25; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.details{
  display:flex; flex-direction:column; gap:0.15em;
  font-size:12px; color:var(--muted); line-height:1.2;
}
.psub{
  font-size:12px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Mobile wrapping for person cards */
@media (max-width:700px){
  .pcard{ align-items:flex-start }
  .pmeta{ flex:1 1 auto; min-width:0 }
  .pname,.psub{ white-space:normal; overflow:visible; overflow-wrap:anywhere; word-break:break-word; hyphens:auto }
  .psub{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; max-height:calc(1.4em * 3); overflow:hidden }
}


/* more pcard styling */
/* Ensure the arrow sits at the far right and is easy to click */
.pcard{
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 10px;
  align-items: center;
}

.pcard .avatar-link{
  display: block;
  width: fit-content; /* only as wide as the avatar image */
}
.avatar-link{ text-decoration:none; }
.avatar-link:hover, .avatar-link:focus-visible{ text-decoration:none; }
.pcard .avatar-link { width: max-content !important; padding: 0 !important; }

.pcard__goto{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border-radius:999px;
  text-decoration:none;
  opacity:.75;
  transition: opacity .15s ease, transform .15s ease;
}

.pcard__goto:hover,
.pcard__goto:focus-visible{
  opacity:1;
  transform: translateX(1px);
}

.pcard__goto svg{
  width:20px; height:20px;
}

/* Force Inter on pcards only (keeps EB Garamond elsewhere) */
.person-grid .pcard {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Make sure the pcard is a 3-column grid on desktop (avatar | meta | arrow) */
.person-grid .pcard{
  position: relative;
  display: grid !important;               /* override any legacy flex */
  grid-template-columns: auto 1fr 28px;   /* avatar, info, arrow */
  gap: 14px;
  align-items: center;
}

/* Arrow sits in the 3rd column, far right */
.pcard__goto{
  justify-self: end;                      /* push to far right */
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  text-decoration: none;
  opacity: .75;
  transition: opacity .15s ease, transform .15s ease;
}
.pcard__goto:hover,
.pcard__goto:focus-visible{
  opacity: 1;
  transform: translateX(1px);
}
.pcard__goto svg{ width: 20px; height: 20px; }

/* Mobile: stack naturally; arrow remains at end of row */
@media (max-width: 879.98px){
  .person-grid .pcard{
    grid-template-columns: auto 1fr 28px; /* slightly tighter on mobile */
    gap: 14px;
  }
}




/* === Chips === */
.chip, button.chip, a.chip, span.chip, summary.chip, .topbar__chip{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--chip-bg, var(--chip));
  border: var(--chip-border, 1px solid var(--line));
  border-radius: var(--chip-radius, 999px);
  padding: var(--chip-py, 4px) var(--chip-px, 10px);
  font-size: var(--chip-fz, 12px);
  line-height: 1.2;
  color: var(--chip-ink, var(--ink));
  text-align:center; vertical-align:middle;
  cursor:pointer; text-decoration:none;
}
/* Ensure chips never underline on hover */
.chip:hover, .topbar__chip:hover{ text-decoration:none; }

.chip-primary{ background:var(--ink); border-color:var(--ink); color:#fff }
.chip-secondary{ background:var(--chip); border-color:var(--line); color:var(--ink) }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff }
button.chip:disabled{ background:#f0f0f0; color:var(--muted); cursor:not-allowed; opacity:.7 }
[data-comment-count].chip{ background:var(--chip); border-color:var(--line); color:var(--ink) }

/* Active chip via aria-current */
.wall-sort .chip[aria-current="true"],
.wall-sort .chip[aria-current="page"]{ background:var(--ink); border-color:var(--ink); color:#fff }
.wall-sort a.chip[aria-current="true"]:link,
.wall-sort a.chip[aria-current="true"]:visited{ color:#fff }

/* Normalize summary chip marker */
summary.chip{ list-style:none }
summary.chip::-webkit-details-marker{ display:none }

/* === Badges & Verification === */
.badge{ display:inline-block; padding:2px 6px; border-radius:8px; line-height:1.2; font-size:12px; }
.badge--probable{ border:1px solid #f59e0b; background:color-mix(in srgb,#f59e0b 12%,white); color:#8a4b00; }
.badge--uncertain{ border:1px solid #b6a048; background:color-mix(in srgb,#b6a048 18%,white); color:#5b4d12; }
.badge--disputed{ border:1px solid #ef4444; background:color-mix(in srgb,#ef4444 12%,white); color:#7a1111; }

.reviewed{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; color: var(--verified); }
.reviewed-icon{ width:16px; height:16px; vertical-align:-2px; }

/* === Shared Cards (base look) === */
/* Post/comment cards share the same surface + hover affordance */
.post-card,
.comment{
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: transform .06s, box-shadow .12s, border-color .12s;
}
.post-card:hover,
.comment:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border-color: #cbd5e1;
}

/* Person rows (career/family) follow the same card-like look */
.person-page .row{
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: transform .06s, box-shadow .12s, border-color .12s;
}
.person-page .row:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border-color: #cbd5e1; /* pages can override this color */
}


/* === Anchor offsets for fixed topbar === */
@media (min-width:701px){
  section[id], .year-section[id], .office-section[id], [id^="office-"], [id^="mag-"]{
    scroll-margin-top: calc(var(--topbar-offset, 64px) + 16px);
  }
  /* Ensure posts and comments revealed via anchors are not covered by topbar */
  [id^="post-"], [id^="comment-"], [id^="comments-post-"]{
    scroll-margin-top: calc(var(--topbar-offset, 64px) + 24px);
  }
}

/* Desktop: reserve space for fixed topbar */
@media (min-width:701px){
  body{ padding-top: var(--topbar-offset, 64px); }
}

/* === Topbar & mobile layout === */
.topbar__row{ width:100% }

@media (max-width:700px){
  html, body{
    padding-bottom:calc(var(--bottom-bar-space, 0px) + env(safe-area-inset-bottom, 0px));
  }
  .wrap, main, .content{
    padding-bottom:calc(var(--bottom-bar-space, 0px) + 16px);
  }
  #wall, #wall-login, .inline-login-panel{
    margin-bottom:calc(var(--bottom-bar-space, 0px) + 24px);
    scroll-margin-bottom:calc(var(--bottom-bar-space, 0px) + 12px);
  }
  .topbar__inner{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:8px;
  }
  .topbar__slot--left{ grid-column:1 }
  .topbar__slot--center{ grid-column:2; justify-self:center; min-width:0 }
  .topbar__slot--right{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:3px !important; padding-right: 0; }
  /* Keep edge padding balanced */
  .topbar__slot--left{ padding-left: var(--topbar-edge-gutter); }
  .topbar__slot--right .topbar__search-btn{ margin-left: 8px !important; }
  header.topbar .tb-auth .topbar__bench-toggle{
    padding: 4px 12px !important;
    margin:0 !important;
    min-width: unset;
    justify-content: center;
  }
  header.topbar .topbar__search-btn{
    padding-inline:2px;
    padding-block:0;
    margin:0 !important;
  }
  header.topbar .tb-avatar{ width:22px; height:22px; line-height:22px; font-size:12px; }
  .topbar__nav--inline .topbar__nav-text{ display:none }
  .topbar__centerline{ display:flex; align-items:center; gap:3px }
  .topbar__title, .topbar__home{ white-space:nowrap }
  .topbar__nav--inline{ padding:3px 5px; border-radius:10px }
  .topbar__nav--inline span[aria-hidden="true"]{
    font-size:22px;
    line-height:1;
    display:inline-block;
    transform:translateY(1px);
    font-weight:800;
  }

  /* Year view & lists clear bottom bar */
  .years-index .years-grid,
  .years-index .year-table,
  .years-index .person-grid,
  .year-view .mag-list,
  .year-view .person-grid{
    margin-bottom: 12px;
  }

  /* Ensure last child clears bottom bar */
  .content > :last-child, main > :last-child {
    margin-bottom: calc(var(--bottom-bar-space) + 18px);
  }
}

/* === Year view spacing & headings === */
.year-view .year-section,
.year-view .office-section{ margin:14px 0 10px }
.year-view .person-grid, .year-view .mag-list{ margin:6px 0 8px }
.year-view h2, .year-view .section-title{ margin:10px 0 6px }
.year-view section{ margin:8px 0; padding:0 }
.year-view section > *:first-child{ margin-top:0 }
.year-view section > *:last-child{ margin-bottom:0 }
.year-view h2, .year-view .section-title{ font-size:16px }

/* Center all year sections + their headings and grids on desktop */
.year-view .year-section,
.year-view .office-section,
.year-view .section-title,
.year-view h2,
.year-view .person-grid,
.year-view .mag-list {
  max-width: var(--section-max);
  margin-left: auto;
  margin-right: auto;
}

/* Keep some breathing on narrow screens (you already have .wrap padding) */
.year-view .section-title,
.year-view h2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}



/* Year view mobile widths/wrapping */
@media (max-width:700px){
  .year-view .pcard{ max-width:100%; min-width:0; }
  .year-view .pcard .pmeta{ min-width:0; }
  .year-view .pcard .pname,
  .year-view .pcard .psub,
  .year-view .pcard a{
    white-space:normal; overflow-wrap:anywhere; word-break:break-word;
  }
}

/* === Sources (term) === */
.term-sources summary { cursor:pointer; font-weight:600; color:#444; }

.sources-list {
  margin:.25rem 0 0 0; padding-left:0;
  line-height:1.4;
}
.sources-list > li{ margin-left:0; list-style-position:inside; }
.sources-list > li > strong{ color:#222; }
.subsources{ margin:.2rem 0 .3rem .75rem; list-style-type:circle; padding-left:0; }

/* === Person term focus + anchor safety === */
.term-card{
  scroll-margin-top: calc(var(--topbar-offset, 64px) + 6px);
  scroll-margin-bottom: var(--bottom-bar-space, 0px);
}
.term-card--focus{
  outline:3px solid rgba(255,200,0,.85);
  box-shadow:0 0 0 6px rgba(255,200,0,.25);
  animation:termPulse 1.4s ease-out 1;
}
@keyframes termPulse{
  0%{ outline-color:rgba(255,200,0,.95); box-shadow:0 0 0 8px rgba(255,200,0,.35); }
  60%{ outline-color:rgba(255,200,0,.60); box-shadow:0 0 0 3px rgba(255,200,0,.18); }
  100%{ outline-color:transparent; box-shadow:none; }
}
@media (max-width:768px){
  .term-card{ scroll-margin-top: calc(var(--topbar-offset, 64px) + 6px); }
}

/* === When column (year + age) === */
.when{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
.when a{ font-weight:500; }
.when .age-note{ font-size:var(--fs-summary); color:var(--muted); margin-top:.1em; }

/* === Collapsible term summaries (Instagram-style) === */
.term-summary{ line-height:1.35; margin:.25em 0; }

/* collapsed preview: inline flow w/ no margins */
.term-summary-wrap.is-collapsed-inline .term-summary{ display:inline; margin:0; }
.term-summary-wrap.is-collapsed-inline .term-summary + .term-summary::before{ content:" "; }

/* “more” looks like text; grey; never changes line height */
.summary-more{
  display:inline;
  font:inherit;
  line-height:inherit;
  color:#6b7280;            /* gray-500 */
  background:none; border:0; padding:0; margin:0;
  vertical-align:baseline; white-space:nowrap;
  font-weight:600;          /* bold */
  cursor:pointer; transition:color .15s ease;
}
.summary-more:hover{ color:#374151; } /* gray-700 */
.summary-more:focus{ outline:2px solid currentColor; outline-offset:2px; }


.when {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* already probably there */
  justify-content: flex-start; /* ensure top alignment */
  line-height: 1.2;
  margin-top: 0.15em; /* tiny visual tweak if needed */
}

.what {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Sans-serif for structural / interface elements */
h1, h2, h3, h4, h5, h6,
a, nav, .chip, .topbar,
.term-office, .term-role,
.term-sources summary,
.edit-link {
  font-family: var(--font-sans);
}

/* Global body + headings */
html, body { font-size: var(--fs-body); line-height: var(--lh-body); }
h1{ font-size: var(--fs-h1); }
h2, .section-title{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }

/* Public summary & sources (bigger) */
.term-summary{
  font-size: var(--fs-summary);
  line-height: var(--lh-summary);
}
.term-sources summary{
  font-size: var(--fs-small);
}
.sources-list{
  font-size: var(--fs-sources);
  line-height: var(--lh-sources);
}
.subsources{ font-size: var(--fs-sources); }

/* Small UI text that used to be 12px */
.small, .chip, .details, .post-meta, .comment-meta, .inline-login-panel .tb-label {
  font-size: var(--fs-small);
}

.bio {
  font-size: var(--fs-bio);
  line-height: var(--lh-bio);
  color: #374151; /* same muted ink you had before */
  font-family: var(--font-body); /* EB Garamond */
}