/* ============================================================
   amandaclayton.org — stylesheet
   Clean academic. Light/dark aware. No external dependencies.
   ============================================================ */

:root {
  /* Palette — light */
  --bg:            #fbfaf7;
  --bg-panel:      #ffffff;
  --bg-subtle:     #f2f0ea;
  --text:          #1c1c1a;
  --text-muted:    #5c5a54;
  --text-faint:    #85827a;
  --rule:          #e0ddd4;
  --rule-strong:   #c9c5b8;
  --accent:        #14395e;   /* deep Berkeley-ish blue */
  --accent-hover:  #0d2740;
  --gold:          #b8860b;
  --gold-soft:     #f5ecd4;
  --shadow:        0 1px 2px rgba(28,28,26,.05), 0 6px 18px rgba(28,28,26,.05);

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 68ch;
  --page:    1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #14151a;
    --bg-panel:    #1b1d23;
    --bg-subtle:   #21242b;
    --text:        #e9e7e2;
    --text-muted:  #a9a69f;
    --text-faint:  #86837c;
    --rule:        #2c2f37;
    --rule-strong: #3d414b;
    --accent:      #8ab4dd;
    --accent-hover:#a9c9ea;
    --gold:        #d9ac4a;
    --gold-soft:   #2e2716;
    --shadow:      0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
  }
}

:root[data-theme="dark"] {
  --bg:          #14151a;
  --bg-panel:    #1b1d23;
  --bg-subtle:   #21242b;
  --text:        #e9e7e2;
  --text-muted:  #a9a69f;
  --text-faint:  #86837c;
  --rule:        #2c2f37;
  --rule-strong: #3d414b;
  --accent:      #8ab4dd;
  --accent-hover:#a9c9ea;
  --gold:        #d9ac4a;
  --gold-soft:   #2e2716;
  --shadow:      0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: var(--measure); }

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; padding-top: .85rem; padding-bottom: .85rem;
}
.brand {
  font-family: var(--serif);
  font-size: 1.2rem; font-weight: 600; letter-spacing: .01em;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--accent); }

nav.main { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
nav.main a {
  font-size: .82rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none;
  padding: .25rem 0; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
nav.main a:hover { color: var(--text); border-bottom-color: var(--rule-strong); }
nav.main a[aria-current="page"] { color: var(--text); border-bottom-color: var(--gold); }

.theme-toggle {
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--text-muted); cursor: pointer; font: inherit;
  font-size: .95rem; line-height: 1; padding: .4rem .55rem;
}
.theme-toggle:hover { color: var(--text); border-color: var(--rule-strong); }

/* ---------- Hero ---------- */
.hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--rule); }
.hero-grid {
  display: grid; gap: 3rem;
  grid-template-columns: minmax(0, 1fr) 260px; align-items: start;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.5vw, 3.4rem);
  line-height: 1.08; letter-spacing: -.015em;
  margin: 0 0 .5rem; font-weight: 600;
}
.hero .role {
  font-size: 1.02rem; color: var(--text-muted); margin: 0 0 1.75rem;
  max-width: 46ch;
}
.hero .role strong { color: var(--text); font-weight: 600; }
.portrait {
  width: 100%; height: auto; aspect-ratio: 502 / 800;
  border-radius: 4px; display: block;
  box-shadow: var(--shadow); filter: saturate(.95);
}
.portrait-caption { font-size: .78rem; color: var(--text-faint); margin-top: .6rem; }

.lede { font-size: 1.12rem; line-height: 1.6; max-width: var(--measure); }

/* ---------- Sections ---------- */
section { padding: 3.25rem 0; }
section + section { border-top: 1px solid var(--rule); }

h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 1.95rem); line-height: 1.2;
  letter-spacing: -.01em; margin: 0 0 1.25rem;
}
h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.22rem; line-height: 1.3; margin: 2.25rem 0 .75rem;
}
h4 { font-size: .95rem; margin: 1.5rem 0 .4rem; font-weight: 600; }

.eyebrow {
  font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .6rem;
}

p { margin: 0 0 1.1rem; max-width: var(--measure); }
a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
p a, li a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* ---------- Publications ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 .75rem; padding: 0; list-style: none;
}
.filters button {
  font: inherit; font-size: .83rem; cursor: pointer;
  background: var(--bg-panel); color: var(--text-muted);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .38rem .85rem; transition: all .15s;
}
.filters button:hover { border-color: var(--rule-strong); color: var(--text); }
.filters button[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.filter-note { font-size: .85rem; color: var(--text-faint); margin: 0 0 2rem; }

.theme-block { margin-bottom: 3rem; scroll-margin-top: 6rem; }
.theme-block > h3,
#inprogress > h3 {
  margin-top: 0; padding-bottom: .5rem;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
.theme-block > .theme-blurb {
  font-size: .95rem; color: var(--text-muted);
  margin: .75rem 0 1.5rem; max-width: 62ch;
}

ol.pubs, ul.pubs { list-style: none; margin: 0; padding: 0; }
.pub {
  padding: 1.15rem 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 4.25rem minmax(0,1fr); gap: 1.25rem;
}
.pub:first-child { border-top: 0; padding-top: .25rem; }
.pub .year {
  font-family: var(--mono); font-size: .82rem; color: var(--text-faint);
  padding-top: .22rem; letter-spacing: -.02em;
}
.pub .title {
  font-family: var(--serif); font-size: 1.09rem; font-weight: 600;
  line-height: 1.35; margin: 0 0 .3rem; max-width: 60ch;
}
.pub .authors { font-size: .9rem; color: var(--text-muted); margin: 0 0 .2rem; max-width: 60ch; }
.pub .authors .me { color: var(--text); font-weight: 600; }
.pub .venue { font-size: .9rem; color: var(--text-muted); margin: 0 0 .55rem; }
.pub .venue em { font-style: italic; }
.pub .links { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.pub .links a {
  font-size: .76rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; text-decoration: none;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  padding: .22rem .5rem; color: var(--text-muted);
}
.pub .links a:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-subtle); }


/* Open-access marker — sits in the links row but is a label, not a control. */
.pub .links .oa {
  font-size: .76rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; padding: .22rem .5rem;
  border: 1px solid transparent; border-radius: 3px;
  color: var(--gold); background: var(--gold-soft);
  white-space: nowrap;
}

.note {
  font-size: .85rem; color: var(--text-muted);
  margin: .55rem 0 0; padding-left: .85rem;
  border-left: 2px solid var(--gold);
  max-width: 58ch;
}
.note.award { color: var(--gold); font-weight: 500; }
.note.award a { color: inherit; }


/* ---------- Work in progress ---------- */
.wip-list { list-style: none; margin: 0; padding: 0; }
.wip {
  padding: 1.4rem 0; border-top: 1px solid var(--rule);
}
.wip:first-child { border-top: 0; padding-top: .25rem; }
.wip .title {
  font-family: var(--serif); font-size: 1.09rem; font-weight: 600;
  line-height: 1.35; margin: 0 0 .3rem; max-width: 60ch;
}
.wip .authors { font-size: .9rem; color: var(--text-muted); margin: 0 0 .5rem; max-width: 60ch; }
.wip-desc { font-size: .95rem; margin: 0 0 .6rem; max-width: 62ch; }
.status {
  display: inline-block; margin: 0;
  font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-soft);
  border-radius: 3px; padding: .22rem .55rem;
}

/* ---------- Cards ---------- */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.card {
  background: var(--bg-panel); border: 1px solid var(--rule);
  border-radius: 6px; padding: 1.4rem 1.5rem;
}
.card h3 { margin: 0 0 .5rem; font-size: 1.08rem; }
.card p { font-size: .93rem; color: var(--text-muted); margin: 0 0 .75rem; }
.card p:last-child { margin-bottom: 0; }
.card .meta { font-size: .8rem; color: var(--text-faint); }

/* ---------- Callout ---------- */
.callout {
  background: var(--bg-subtle); border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0; padding: 1.25rem 1.5rem;
  max-width: var(--measure);
}
.callout p:last-child { margin-bottom: 0; }
.callout h3 { margin-top: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font-size: .88rem; font-weight: 600;
  letter-spacing: .02em; text-decoration: none;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent); border-radius: 4px;
  padding: .6rem 1.15rem; transition: opacity .15s;
}
.btn:hover { opacity: .88; color: #fff; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--bg-subtle); color: var(--accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }


/* Dark mode: the accent is a light blue, so filled controls need dark text. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .filters button[aria-pressed="true"],
  :root:not([data-theme="light"]) .btn {
    color: #14151a;
  }
  :root:not([data-theme="light"]) .btn:hover { color: #14151a; }
  :root:not([data-theme="light"]) .btn.ghost { color: var(--accent); background: transparent; }
  :root:not([data-theme="light"]) .btn.ghost:hover { color: var(--accent); background: var(--bg-subtle); }
}
:root[data-theme="dark"] .filters button[aria-pressed="true"],
:root[data-theme="dark"] .btn { color: #14151a; }
:root[data-theme="dark"] .btn:hover { color: #14151a; }
:root[data-theme="dark"] .btn.ghost { color: var(--accent); background: transparent; }
:root[data-theme="dark"] .btn.ghost:hover { color: var(--accent); background: var(--bg-subtle); }

/* Dark mode: skip link and gold notes */
:root[data-theme="dark"] .skip { color: #14151a; }

/* ---------- Figures ---------- */
figure { margin: 2rem 0; }
figure img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 4px; background: #fff; }
figcaption { font-size: .85rem; color: var(--text-muted); margin-top: .75rem; max-width: var(--measure); }
.fig-pair { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }


/* Wide figures: dense multi-country scatterplots need more than the text measure.
   They break out to the full page width and scroll horizontally on small screens. */
figure.wide { margin: 2.5rem 0; }
figure.wide a { display: block; border-radius: 4px; overflow: hidden; }
figure.wide img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule); border-radius: 4px;
  background: #fff; padding: .5rem;
}
figure.wide a:hover img { border-color: var(--rule-strong); }
figure.wide figcaption { max-width: var(--measure); }

@media (min-width: 1000px) {
  /* Let the figure use the page gutters the prose doesn't need. */
  figure.wide { width: min(100%, var(--page)); }
}

/* ---------- Definition-ish lists (teaching, contact) ---------- */
.stack { list-style: none; margin: 0; padding: 0; }
.stack > li {
  padding: 1rem 0; border-top: 1px solid var(--rule);
}
.stack > li:first-child { border-top: 0; }
.stack .label {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600; margin: 0 0 .25rem;
}
.stack .detail { font-size: .92rem; color: var(--text-muted); margin: 0; max-width: 60ch; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; font-size: .95rem; }
.kv dt { color: var(--text-faint); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding-top: .18rem; }
.kv dd { margin: 0; }


/* Compact list — for archival items that shouldn't take much vertical space. */
ul.compact { list-style: none; margin: 0; padding: 0; }
ul.compact > li {
  padding: .7rem 0; border-top: 1px solid var(--rule);
  font-size: .95rem; max-width: 68ch;
}
ul.compact > li:first-child { border-top: 0; }
ul.compact > li > a { font-weight: 500; }
ul.compact .meta {
  display: block; font-size: .84rem; color: var(--text-faint); margin-top: .12rem;
}


/* Year-indexed talk list */
.kv.talks { gap: .75rem 1.5rem; margin: .75rem 0 0; }
.kv.talks dd { color: var(--text-muted); }


/* Inline metadata inside a detail line */
.meta-inline { color: var(--text-faint); }

/* ---------- Media list ---------- */
.media-list { list-style: none; margin: 0; padding: 0; }
.media-list li {
  padding: .95rem 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 12rem minmax(0,1fr); gap: 1.25rem;
}
.media-list li:first-child { border-top: 0; }
.media-list .outlet { font-family: var(--serif); font-weight: 600; font-size: .98rem; }
.media-list .what { font-size: .92rem; color: var(--text-muted); margin: 0; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--rule); margin-top: 2rem;
  padding: 2.5rem 0 3.5rem; font-size: .88rem; color: var(--text-muted);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--accent); }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.colophon { font-size: .8rem; color: var(--text-faint); }

/* ---------- Utility ---------- */
.hidden { display: none !important; }
.mt0 { margin-top: 0; }
.center { text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .portrait { max-width: 200px; }
  .fig-pair { grid-template-columns: 1fr; }
  .media-list li { grid-template-columns: 1fr; gap: .25rem; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  /* The wrapped nav is two rows tall on phones; don't let it eat the viewport. */
  .site-header { position: static; }
  html { scroll-padding-top: 1rem; }
  .hero { padding: 2.5rem 0 2rem; }
  section { padding: 2.5rem 0; }
  .pub { grid-template-columns: 1fr; gap: .3rem; }
  .pub .year { padding-top: 0; }
  .site-header .wrap { gap: .75rem; }
  nav.main { gap: 1rem; }
  nav.main a { font-size: .76rem; }
  .kv { grid-template-columns: 1fr; gap: .1rem 0; }
  .kv dt { margin-top: .75rem; }
}

@media print {
  .site-header, .site-footer, .filters, .filter-note, .theme-toggle { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
}