@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&display=swap');

@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/proxima-nova/ProximaNova-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/proxima-nova/ProximaNova-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/proxima-nova/ProximaNova-Semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/proxima-nova/ProximaNova-Semibold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   Kali Trzesniewski — research program site (rev 3 build)
   Palette: UC Davis brand (Aggie Blue #022851, Aggie Gold #FFBF00,
   official tint scales only). WCAG 2.1 AA verified pairs:
     #191919 on #FFFFFF  16.9:1   body
     #022851 on #FFFFFF  15.4:1   headings, prose links
     #FFFFFF on #022851  15.4:1   hero band (brand-approved ANY)
     #022851 on #FFF9E5  14.0:1   field cards (gold-10)
     #022851 on #CDD6E0  10.4:1   table header fill (blue-10)
     #1D4776 on #FFFFFF   8.9:1   secondary text/links
     #191919 on #FFBF00   9.9:1   gold chips (brand-approved ANY)
   Gold is never used as text or as a meaning-bearing mark on white.
   Type: Proxima Nova (brand) for display/labels/tables;
   Freight Text (brand serif) with Georgia fallback for reading prose.
   ============================================================ */

:root {
  --blue: #022851;        /* Aggie Blue 100 */
  --blue-90: #033266;
  --blue-80: #1D4776;
  --blue-60: #4F7094;
  --blue-20: #B3C1D1;
  --blue-10: #CDD6E0;
  --gold: #FFBF00;        /* Aggie Gold 100 */
  --gold-20: #FFF2CC;
  --gold-10: #FFF9E5;
  --ink: #191919;         /* black 90 */
  --ink-70: #4C4C4C;
  --paper: #FFFFFF;
  --sans: "Proxima Nova", Aptos, Arial, Helvetica, sans-serif;
  --serif: "Freight Text", freight-text-pro, "Source Serif 4", Georgia, "Times New Roman", serif;
  --measure: 72ch;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 110%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  font-family: var(--serif);
  font-size: 1.125rem;          /* 18px body */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: var(--ink);
  font-family: var(--sans); font-weight: 700;
  padding: 0.6rem 1rem; z-index: 100;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- header / nav ---------- */
.site-head {
  background: var(--blue);
  color: #fff;
  border-bottom: 4px solid var(--gold);
}
.site-head .inner {
  max-width: 1080px; margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.5rem;
}
.site-name {
  font-family: var(--sans); font-weight: 700; font-size: 1.05rem;
  color: #fff; text-decoration: none; letter-spacing: 0.01em;
}
.site-name span { font-weight: 400; color: var(--blue-20); }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.site-nav a {
  display: inline-block;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  color: #fff; text-decoration: none;
  padding: 0.35rem 0.7rem; border-radius: 3px;
}
.site-nav a:hover { background: var(--blue-90); text-decoration: underline; text-underline-offset: 3px; }
.site-nav a[aria-current="page"] {
  background: var(--gold); color: var(--ink);
}
.site-nav a:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}

/* ---------- hero band ---------- */
.hero {
  background: var(--blue); color: #fff;
  padding: 3rem 1.25rem 2.6rem;
}
.hero .inner { max-width: 1080px; margin: 0 auto; }
.eyebrow {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
}
.hero h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  line-height: 1.15; margin-top: 0.5rem; max-width: 26ch;
}
.hero .dek {
  font-family: var(--serif); font-size: 1.15rem; line-height: 1.6;
  color: var(--blue-10); margin-top: 1rem; max-width: 62ch;
}
.hero .byline { font-family: var(--sans); font-size: 0.95rem; color: var(--blue-20); margin-top: 1.2rem; }
.hero .byline a { color: #fff; }

/* ---------- main column ---------- */
main { display: block; }
.col {
  max-width: 1080px; margin: 0 auto; padding: 2.2rem 1.25rem 3rem;
}
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15rem; }
.prose ul { margin: 0 0 1.15rem 1.4rem; }
.prose li { margin-bottom: 0.4rem; }

/* run-in beat leads: the writing grammar as the visual grammar */
.beat { max-width: var(--measure); margin: 0 0 1.15rem; }
.beat > .lead {
  font-family: var(--sans); font-weight: 700; color: var(--blue);
  padding-left: 0.75rem; border-left: 4px solid var(--gold);
  margin-right: 0.25rem;
}

/* evidence-status labels on beats (replicated / one case / unplanned) */
.evidence-tag {
  display: inline-block; font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--blue-60);
  border: 1px solid var(--blue-20); border-radius: 3px;
  padding: 0.1rem 0.45rem; margin-right: 0.45rem; vertical-align: 0.12em;
}

h2 {
  font-family: var(--sans); font-weight: 700; color: var(--blue);
  font-size: 1.45rem; line-height: 1.25;
  margin: 2.4rem 0 0.9rem; max-width: var(--measure);
}
h3 {
  font-family: var(--sans); font-weight: 700; color: var(--blue-80);
  font-size: 1.15rem; margin: 1.8rem 0 0.7rem; max-width: var(--measure);
}
.phase-label {
  font-family: var(--sans); font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue);
  margin: 2.6rem 0 0.2rem;
}
.standfirst {
  font-family: var(--serif); font-size: 1.1rem; color: var(--ink);
  max-width: var(--measure); margin-bottom: 1rem;
}

a { color: var(--blue-80); text-underline-offset: 3px; }
a:hover { color: var(--blue); }
strong { color: inherit; }
em { font-style: italic; }
small, .smalltype { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-70); }

/* ---------- highlight / definition blocks ---------- */
.definition, .highlight {
  max-width: var(--measure);
  background: var(--gold-10);
  border-left: 4px solid var(--gold);
  padding: 1.1rem 1.3rem;
  margin: 1.3rem 0 1.5rem;
}
.definition p, .highlight p { margin-bottom: 0.6rem; }
.definition p:last-child, .highlight p:last-child { margin-bottom: 0; }
.definition ol { margin: 0.4rem 0 0.6rem 1.4rem; }
.definition li { margin-bottom: 0.35rem; }

/* pull quote (the chair) */
.pullquote {
  max-width: var(--measure);
  background: var(--gold-10); border-left: 4px solid var(--gold);
  padding: 1.3rem 1.5rem; margin: 1.4rem 0 1.5rem;
}
.pullquote blockquote {
  font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.6;
  color: var(--ink);
}
.pullquote .attrib {
  font-family: var(--sans); font-style: normal; font-size: 0.85rem;
  color: var(--ink-70); margin-top: 0.7rem;
}

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; margin: 1.3rem 0 1.6rem; max-width: 60rem; }
table {
  border-collapse: collapse; width: 100%;
  font-size: 1.0625rem; line-height: 1.55;
}
caption {
  text-align: left; font-family: var(--sans); font-weight: 700;
  color: var(--blue); padding-bottom: 0.5rem; font-size: 1.05rem;
}
th, td {
  text-align: left; vertical-align: top;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--blue-10);
}
th:first-child, td:first-child { width: 34%; }
thead th {
  font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.03em;
  background: var(--blue-10); color: var(--blue);
  border-bottom: 2px solid var(--blue-20);
}
tbody th[scope="row"] { font-family: var(--sans); font-weight: 700; color: var(--blue); width: 34%; }
td .cite { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-70); display: block; margin-top: 0.2rem; }

/* ---------- stat tiles ---------- */
.stat-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem; max-width: 60rem; margin: 1.2rem 0 1.5rem;
  list-style: none;
}
.stat-tiles li {
  border: 1px solid var(--blue-20); border-top: 4px solid var(--blue);
  padding: 0.9rem 1rem; background: #fff;
}
.stat-tiles .n {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: 1.7rem; color: var(--blue); line-height: 1.2;
}
.stat-tiles .lbl { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-70); }

/* ---------- fielded survey items — instruments as receipts ---------- */
.item {
  display: block; font-family: var(--serif); font-style: normal;
  background: var(--gold-10); border-left: 3px solid var(--gold);
  padding: 0.45rem 0.7rem; margin: 0.3rem 0;
  color: var(--ink); max-width: var(--measure);
}
.item + .item { margin-top: 0.45rem; }
.item-tag {
  display: block; font-family: var(--sans); font-style: normal;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue-60); margin-top: 0.25rem;
}

/* ---------- charts (paired horizontal bars; divs, not spans) ---------- */
.chart {
  max-width: 60rem; margin: 1.4rem 0 1.6rem;
  border: 1px solid var(--blue-10); padding: 1.1rem 1.3rem 1.2rem;
}
.chart h4 {
  font-family: var(--sans); font-size: 1rem; color: var(--blue);
  margin-bottom: 0.8rem;
}
.chart .legend {
  font-family: var(--sans); font-size: 0.82rem; color: var(--ink-70);
  display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 0.9rem;
}
.chart .legend .key { display: inline-flex; align-items: center; gap: 0.4rem; }
.chart .legend .swatch {
  display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 2px;
}
.swatch.warm { background: var(--gold); border: 1px solid #B38600; }
.swatch.neutral { background: var(--blue-20); border: 1px solid var(--blue-60); }
.chart .row { margin-bottom: 0.9rem; }
.chart .row:last-child { margin-bottom: 0; }
.chart .row .q {
  font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
  margin-bottom: 0.35rem;
}
.chart .bars { display: grid; gap: 0.3rem; }
.chart .bar {
  display: grid; grid-template-columns: 1fr 3.2rem; align-items: center; gap: 0.6rem;
}
.chart .track { background: #F2F4F7; border-radius: 2px; height: 1.15rem; position: relative; }
.chart .fill { height: 100%; border-radius: 2px; }
.chart .fill.warm { background: var(--gold); border-right: 1px solid #B38600; }
.chart .fill.neutral { background: var(--blue-20); border-right: 1px solid var(--blue-60); }
.chart .val { font-family: var(--sans); font-size: 0.9rem; font-weight: 700; color: var(--blue); }
.chart .note {
  font-family: var(--sans); font-size: 0.88rem; color: var(--ink-70);
  margin-top: 0.9rem; line-height: 1.5;
}

/* ---------- figure ---------- */
figure.model { margin: 1.6rem 0 2rem; max-width: 60rem; }
figure.model img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--blue-10);
}
figure.model figcaption {
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink-70);
  margin-top: 0.6rem; max-width: var(--measure);
}

/* ---------- program rail (index) ---------- */
.program-rail { max-width: var(--measure); margin: 1.2rem 0 0.5rem; }
.program-rail ol { list-style: none; }
.program-rail li {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--blue-10);
  font-family: var(--sans);
}
.program-rail .n {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 2px solid var(--blue-80); color: var(--blue-80);
  font-weight: 700; font-size: 0.8rem; align-self: center;
}
.program-rail a { font-weight: 700; color: var(--blue-80); text-decoration: none; font-size: 1.05rem; }
.program-rail a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- cards (index) ---------- */
.chain-cards { margin: 2rem 0 0.5rem; }
.chain-cards h2 { margin-top: 0; }
.chain-cards ol {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem; margin-top: 1rem;
}
.chain-cards a {
  display: block; height: 100%;
  border: 1px solid var(--blue-20); border-top: 4px solid var(--blue);
  padding: 1rem 1.1rem;
  text-decoration: none; color: var(--ink);
  background: #fff;
}
.chain-cards a:hover { background: var(--gold-10); border-top-color: var(--gold); }
.chain-cards .num {
  font-family: var(--sans); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.1em; color: var(--blue-60);
}
.chain-cards .name {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: 1.1rem; color: var(--blue); margin: 0.2rem 0 0.4rem;
}
.chain-cards p { font-size: 0.95rem; line-height: 1.5; margin: 0; }

/* ---------- view block (What I think / what could change my mind) ---------- */
.view-block {
  max-width: var(--measure);
  border: 1px solid var(--blue-20); border-left: 4px solid var(--blue);
  padding: 1.1rem 1.3rem; margin: 1.4rem 0 1.6rem;
}
.view-block h3 { margin: 0 0 0.7rem; color: var(--blue); }
.view-block p { margin-bottom: 0.7rem; }
.view-block p:last-child { margin-bottom: 0; }
.view-block .k { font-family: var(--sans); font-weight: 700; color: var(--blue); }

/* ---------- precedent / collaborators lines ---------- */
.stamp {
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink-70);
  max-width: var(--measure); margin-top: 1.4rem;
}
.collaborators {
  max-width: 60rem; margin-top: 2.4rem; padding-top: 1.1rem;
  border-top: 1px solid var(--blue-10);
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink-70); line-height: 1.6;
}
.collaborators .k { font-weight: 700; color: var(--blue); }

/* ---------- reference list ---------- */
.reflist {
  list-style: none; max-width: var(--measure);
  font-family: var(--sans); font-size: 0.88rem; line-height: 1.5;
  color: var(--ink-70);
}
.reflist li { margin-bottom: 0.45rem; padding-left: 1.2rem; text-indent: -1.2rem; }

/* ---------- prev/next links ---------- */
.nextlink {
  margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--blue-10);
  font-family: var(--sans); max-width: var(--measure);
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
}
.nextlink a { font-weight: 700; color: var(--blue-80); text-decoration: none; }
.nextlink a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nextlink a.fwd::after { content: " \2192"; }
.nextlink a.back::before { content: "\2190 "; }

/* ---------- footer ---------- */
.site-foot {
  background: var(--blue-10); border-top: 4px solid var(--blue);
  margin-top: 3rem;
}
.site-foot .inner {
  max-width: 1080px; margin: 0 auto; padding: 1.8rem 1.25rem 2.2rem;
  font-family: var(--sans); font-size: 0.9rem; line-height: 1.55; color: var(--ink);
}
.site-foot p { max-width: 80ch; margin-bottom: 0.6rem; }
.site-foot .legal { margin-top: 1rem; color: var(--ink-70); }

/* ---------- print ---------- */
@media print {
  .site-head, .site-nav, .nextlink { display: none; }
  body { font-size: 11pt; }
}

/* ---------- dumbbell rows (gap-first charts) ---------- */
.drow {
  display: grid; grid-template-columns: minmax(13rem, 19rem) 1fr;
  gap: 0.9rem; align-items: center; margin-bottom: 1.1rem;
}
.drow:last-of-type { margin-bottom: 0.6rem; }
.drow .q { font-family: var(--sans); font-size: 0.95rem; color: var(--ink); margin: 0; }
.dplot { display: grid; grid-template-columns: 1fr 4.5rem; align-items: center; gap: 0.6rem; }
.dtrack { position: relative; height: 2.1rem; margin: 0 0.6rem; }
.dseg {
  position: absolute; top: 0.38rem; height: 3px;
  background: var(--blue-20); border-radius: 2px;
}
.dot {
  position: absolute; top: 0; width: 0.85rem; height: 0.85rem;
  border-radius: 50%; transform: translateX(-50%);
}
.dot.warm { background: var(--gold); border: 2px solid #B38600; }
.dot.neutral { background: var(--blue); border: 2px solid var(--blue); }
.dval {
  position: absolute; top: 1.05rem; left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--blue);
}
.dot.warm .dval { color: #8A6A00; }
.delta {
  font-family: var(--sans); font-size: 0.9rem; font-weight: 700;
  color: var(--blue-80); text-align: right; padding-top: 0.15rem;
}

/* ---------- equity figure card (template-style) ---------- */
.figure-card {
  max-width: 60rem; margin: 1.6rem 0 2rem;
  border: 2px solid var(--blue); border-radius: 12px;
  padding: 1.8rem 2rem 1.6rem; background: #fff;
}
.fig-eyebrow {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--blue-60);
  margin-bottom: 0.6rem;
}
.fig-eyebrow::before { content: "— "; color: var(--gold); font-weight: 700; }
.fig-title {
  font-family: var(--sans); font-weight: 700; font-size: 1.4rem;
  line-height: 1.3; color: var(--blue); margin-bottom: 0.7rem; max-width: 40ch;
}
.fig-note {
  font-family: var(--serif); font-style: italic; font-size: 0.95rem;
  color: var(--ink-70); max-width: 60ch; margin-bottom: 1rem;
}
.fig-sec {
  font-family: var(--sans); font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue);
  margin: 1.6rem 0 0.15rem;
}
.fig-sub {
  font-family: var(--serif); font-style: italic; font-size: 0.95rem;
  color: var(--ink-70); margin-bottom: 1.6rem; max-width: 65ch;
}
.drow.labeled { margin-top: 1.6rem; }
.gname {
  position: absolute; top: -1.25rem; transform: translateX(-50%);
  font-family: var(--sans); font-size: 0.85rem; font-weight: 700; white-space: nowrap;
}
.gname.warm { color: #8A6A00; }
.gname.navy { color: var(--blue); }
.fig-foot {
  font-family: var(--sans); font-size: 0.88rem; color: var(--ink-70);
  border-top: 1px solid var(--blue-10); padding-top: 0.9rem; margin-top: 1.4rem;
  max-width: 65ch;
}

/* dumbbell refinements: subtitle keys, flanked values for touching pairs, tighter rhythm */
.kdot {
  display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  margin-right: 0.3rem; vertical-align: -0.05rem;
}
.kdot.warm { background: var(--gold); border: 2px solid #B38600; }
.kdot.navy { background: var(--blue); border: 2px solid var(--blue); }
.dot.flankL .dval { left: auto; right: 1.15rem; top: -0.08rem; transform: none; }
.dot.flankR .dval { left: 1.15rem; right: auto; top: -0.08rem; transform: none; }
.drow { margin-bottom: 0.85rem; }
.dtrack { height: 1.9rem; }
.fig-sec { margin-top: 1.4rem; }
.fig-sub { margin-bottom: 1.3rem; line-height: 1.6; }

/* figure card v3: on-figure names, lighter notes, footnote defs */
.gside { position: absolute; font-family: var(--sans); font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.gside.warm { color: #8A6A00; }
.gside.navy { color: var(--blue); }
.fig-sub { font-size: 0.88rem; color: #666666; }
.fig-foot {
  border-top: 1px solid var(--blue-10); padding-top: 0.9rem; margin-top: 1.5rem;
  font-family: var(--sans); font-size: 0.95rem; color: var(--ink); max-width: 62ch;
}
.fig-defs {
  font-family: var(--serif); font-style: italic; font-size: 0.85rem; color: #737373;
  margin-top: 0.45rem; max-width: 70ch;
}
.fstar { color: #B38600; font-style: normal; font-weight: 700; }

.cite-inline{font-size:.62em;font-weight:400;color:#737373;letter-spacing:0;margin-left:.35rem}