:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1c211e;
  --muted: #66716b;
  --accent: #0d6b4f;
  --rule: #e3e8e5;
  --code-bg: #f4f7f5;
  --max: 46rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151a17;
    --text: #d9e0dc;
    --muted: #8fa097;
    --accent: #5fc9a4;
    --rule: #2a332e;
    --code-bg: #1d2420;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 17px/1.65 Georgia, 'Times New Roman', serif;
  color: var(--text);
  background: var(--bg);
}
.site-header, main, .site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  font-family: system-ui, -apple-system, sans-serif;
}
.site-title {
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
}
/* The nav is a flex item, so min-width:auto stopped it shrinking below its
   content and it ran off the right edge on a phone — 541px of links in a 335px
   box, with Resources and Beyond simply unreachable. Making it a wrapping flex
   container is the fix; inline wrapping could never have worked because the
   links are rendered with no whitespace between them, so the line had no break
   opportunity at all. Spacing moves from margin to gap for the same reason. */
.site-header nav {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .8rem;
}
.site-header nav a {
  text-decoration: none;
  color: var(--muted);
  font-size: .95rem;
}
.site-header nav a:hover { color: var(--accent); }
main { padding-top: 1.5rem; padding-bottom: 3rem; }
a { color: var(--accent); }
h1 { font-size: 1.65rem; line-height: 1.25; }
.hero h1 { font-size: 1.9rem; margin-bottom: .3rem; }
.subhead {
  color: var(--muted);
  font-size: 1.05rem;
  font-style: italic;
  margin-top: 0;
}
.meta { color: var(--muted); font-size: .9rem; font-family: system-ui, sans-serif; }
.post-list { list-style: none; padding: 0; }
.post-list li {
  display: flex;
  gap: .8rem;
  padding: .25rem 0;
  align-items: baseline;
}
.post-list time {
  color: var(--muted);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .8rem;
  white-space: nowrap;
}
.post-list .summary { color: var(--muted); font-size: .9rem; }
article img, main img { max-width: 100%; height: auto; }
.pub-year {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  color: var(--muted);
  letter-spacing: .06em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .25rem;
  margin-top: 2rem;
}
.hero-portrait {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.hero-portrait > div { flex: 1 1 20rem; }
.hero-portrait .portrait {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--rule);
}
@media (max-width: 480px) {
  .hero-portrait .portrait { width: 96px; height: 96px; }
}
.layers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 1.5rem 0; }
.layer {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: .9rem 1rem;
}
.layer h3 { margin: 0 0 .4rem; font-family: system-ui, sans-serif; font-size: 1rem; color: var(--accent); }
.layer p { margin: 0; font-size: .92rem; color: var(--muted); }
blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}
pre { overflow-x: auto; background: var(--code-bg); padding: .8rem; font-size: .85rem; }
code { background: var(--code-bg); padding: 0 .25em; }
pre code { padding: 0; }
table { border-collapse: collapse; font-size: .92rem; }
th, td { border: 1px solid var(--rule); padding: .35rem .6rem; text-align: left; }
.site-footer {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  padding-bottom: 2rem;
  color: var(--muted);
  font-size: .85rem;
  font-family: system-ui, sans-serif;
}
.constellation { color: var(--muted); }

/* ---- Project pages -------------------------------------------------------
   Additions for /projects/. Everything above this line is erickjonesphd.com's
   public/css/main.css, copied verbatim by build.py so a page renders the same
   standalone (opened from disk) as it does on the site. The rules below use
   only main.css's tokens, so a change of palette there carries over on the
   next build. */

.crumbs { margin: 0 0 .2rem; }
.crumbs a { text-decoration: none; }
.project h1 { margin: .1rem 0 .35rem; font-size: 1.9rem; }
.dek {
  font-size: 1.15rem;
  color: var(--muted);
  font-style: italic;
  margin: 0 0 .9rem;
  max-width: var(--max);
}

/* Paper pages: the formal citation under the chips. */
.citation {
  font: .9rem/1.5 system-ui, -apple-system, sans-serif;
  color: var(--muted);
  border-left: 3px solid var(--rule);
  padding: .1rem 0 .1rem .9rem;
  margin: -.4rem 0 1.5rem;
  max-width: var(--max);
  overflow-wrap: anywhere;
}

.chips { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.chips li {
  font: .78rem/1 system-ui, -apple-system, sans-serif;
  letter-spacing: .02em;
  padding: .38rem .6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--muted);
}
.chips li.status { color: var(--bg); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.chips li.status.done { background: var(--muted); border-color: var(--muted); }
.chips li.status.draft { background: transparent; color: var(--accent); }

.media { margin: 0 0 1.8rem; }
/* Natural size, capped by the column and by height, so a portrait phone clip or a tall photo
   isn't stretched to the full column and a small image isn't upscaled into a blur. */
.media img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 40rem;
  margin: 0 auto;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--code-bg);
}
.media figcaption {
  font: .85rem/1.45 system-ui, sans-serif;
  color: var(--muted);
  margin-top: .45rem;
  max-width: var(--max);
}
.media .credit { display: block; font-size: .78rem; opacity: .85; }

.project section { margin: 0 0 1.8rem; }
.project h2 {
  font: 600 .82rem/1.2 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .35rem;
  margin: 0 0 .8rem;
  max-width: var(--max);
}
.project section > p { max-width: var(--max); }

.points { padding-left: 0; list-style: none; max-width: var(--max); }
.points li { position: relative; padding-left: 1.3rem; margin: 0 0 .55rem; }
.points li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .62em;
  width: .5rem;
  height: .5rem;
  border-radius: 2px;
  background: var(--accent);
}

.resources { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.resources a {
  display: block;
  height: 100%;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: .7rem .85rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s;
}
.resources a:hover, .resources a:focus-visible { border-color: var(--accent); }
.resources .cite {
  display: block;
  height: 100%;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  padding: .7rem .85rem;
}
.resources .kind {
  display: block;
  font: 600 .72rem/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: .35rem;
}
.resources .label { font-size: .95rem; line-height: 1.35; }

.sponsor {
  border-left: 3px solid var(--accent);
  padding: .2rem 0 .2rem 1rem;
  margin: 0 0 1.8rem;
  font-size: .95rem;
  color: var(--muted);
  max-width: var(--max);
}
.sponsor strong { color: var(--text); }

.people { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .1rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.people li { padding: .3rem 0; border-bottom: 1px dotted var(--rule); display: flex; align-items: baseline; gap: .5rem; }
.people .who { flex: 1 1 auto; }
.people .name { font-weight: 600; }
.people .role { display: block; font: .8rem/1.3 system-ui, sans-serif; color: var(--muted); }
.people a.li {
  flex: 0 0 auto;
  font: 700 .72rem/1 system-ui, sans-serif;
  text-decoration: none;
  color: var(--bg);
  background: var(--accent);
  border-radius: 3px;
  padding: .22rem .3rem;
}
.people-note { font: .85rem/1.5 system-ui, sans-serif; color: var(--muted); max-width: var(--max); }

/* Papers section on a project page: one block per paper. */
.paper { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1rem; max-width: var(--max); }
.paper:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.paper h3 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 .4rem; }
.paper .citation { margin: 0 0 .7rem; }
.paper > p { margin: 0 0 .6rem; }
.paper .media { margin: .6rem 0 .8rem; }
.paper .resources { margin-top: .6rem; }
.paper-note { font: .88rem/1.5 system-ui, sans-serif; color: var(--muted); border-left: 3px solid var(--accent); padding: .1rem 0 .1rem .8rem; margin: .4rem 0 .8rem; }

.back { font-family: system-ui, sans-serif; font-size: .9rem; margin-top: 2.4rem; }

/* ---- Index: card grid with search ---- */
.finder { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1rem; }
.finder input[type=search] {
  flex: 1 1 16rem;
  font: 1rem system-ui, sans-serif;
  padding: .55rem .75rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.finder input[type=search]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.filters { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.4rem; }
.filters button {
  font: .8rem/1 system-ui, sans-serif;
  padding: .42rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.filters button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.count { font: .85rem system-ui, sans-serif; color: var(--muted); margin: 0 0 .6rem; }

.cards { list-style: none; padding: 0; margin: 0 0 2.2rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, transform .15s;
}
.card a:hover, .card a:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.card .thumb { aspect-ratio: 16 / 9; background: var(--code-bg); overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .thumb .ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font: 700 1.6rem system-ui, sans-serif; color: var(--accent); letter-spacing: .05em;
}
.card .body { padding: .75rem .9rem .9rem; display: flex; flex-direction: column; gap: .3rem; flex: 1 1 auto; }
.card .cat { font: 600 .7rem/1.2 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.card h3 { font-size: 1.08rem; line-height: 1.25; margin: 0; }
.card p { font-size: .9rem; line-height: 1.45; color: var(--muted); margin: 0; }
.card .st { margin-top: auto; padding-top: .35rem; font: .75rem system-ui, sans-serif; color: var(--muted); }
.card[hidden] { display: none; }
.empty { font-family: system-ui, sans-serif; color: var(--muted); }

@media (max-width: 480px) {
  .project h1 { font-size: 1.55rem; }
  .dek { font-size: 1.02rem; }
}

/* Link from a project page to its theme's interactive demo. */
.try-demo { margin: 0 0 1.8rem; }
.try-demo a {
  display: inline-block; text-decoration: none; color: var(--text);
  border: 1px solid var(--accent); border-radius: 8px; padding: .6rem .9rem; font-size: 1rem;
}
.try-demo a:hover, .try-demo a:focus-visible { background: var(--code-bg); }
.try-demo .kind {
  display: block; font: 600 .72rem/1 system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent); margin-bottom: .3rem;
}

/* Teaching section ("concepts"): one card per idea. */
.concepts { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.concept { border: 1px solid var(--rule); border-radius: 6px; padding: .8rem .9rem; }
.concept h3 { font-size: 1rem; margin: 0 0 .35rem; color: var(--accent); font-family: system-ui, sans-serif; }
.concept p { margin: 0 0 .45rem; font-size: .95rem; line-height: 1.5; }
.concept .at-line { color: var(--muted); font-size: .9rem; }