@font-face {
  font-family: Manrope;
  src: url('fonts/manrope.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f5f3ee;
  --ink: #292824;
  --muted: #69655d;
  --link: #6e5033;
  --line: #d9d5cd;
  --soft: #eae7df;
  --focus: #735436;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #181818;
  --ink: #e9e6df;
  --muted: #b2aca2;
  --link: #d8b997;
  --line: #393732;
  --soft: #272727;
  --focus: #d8b997;
}
* { box-sizing: border-box; }
html { scroll-padding-top: var(--s6); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/24px Manrope, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--bg); }
p { margin: 0 0 var(--s4); }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; margin: 0; }
img { max-width: 100%; height: auto; }
button { font: inherit; }
ul { padding-left: var(--s6); }

/* Shared type roles from the design skill; existing semantic selectors use them. */
.heading-3, .profile h1, .page-heading h1, .page-header h1, .article-header h1 { font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -.035em; }
.heading-6, .section-heading h2, .watch-title, .paper-title, .post-content h3 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.title-3, .work-list h3 { font-size: 16px; line-height: 24px; font-weight: 600; }
.body-3, .profile-copy > p:not(.role) { font-size: 16px; line-height: 24px; font-weight: 400; }
.body-6, .role, .work-list p, .writing-entry p, .paper-tldr, .paper-interest, .watch-note { font-size: 14px; line-height: 20px; font-weight: 400; }
.caption-5, .entry-meta, .site-footer, .paper-status, .paper-year, .watch-date, .watch-tag { font-size: 12px; line-height: 16px; font-weight: 400; }

.site-shell { max-width: 960px; padding: 0 var(--s8); margin: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); padding: var(--s8) 0 var(--s6); border-bottom: 1px solid var(--line); }
.site-header nav { display: flex; flex-wrap: wrap; gap: var(--s6); }
.site-header nav a { font-size: 14px; line-height: 20px; color: var(--muted); padding: var(--s1) 0; }
.site-header nav a[aria-current=page] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 8px; text-decoration-color: var(--line); }
.site-tools { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.site-tools > a { color: var(--muted); font-size: 12px; line-height: 16px; padding: var(--s1); }
.theme-button { display: grid; place-items: center; width: 32px; height: 32px; padding: var(--s2); color: var(--ink); border: 0; background: none; cursor: pointer; transition: transform 240ms var(--ease); }
.theme-button:hover { transform: rotate(15deg); }
.skip-link { position: absolute; left: -9999px; top: var(--s2); z-index: 5; background: var(--bg); padding: var(--s2) var(--s4); }
.skip-link:focus { left: var(--s4); }

/* The artwork is left intact: full aspect ratio, without text or overlays. */
.research-banner { margin: var(--s6) 0 0; }
.research-banner img { display: block; width: 100%; height: auto; aspect-ratio: 2048 / 683; }
.profile { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--s12); align-items: start; margin: var(--s8) 0 var(--s10); }
.profile h1 { margin-bottom: var(--s2); }
.role { color: var(--muted); margin-bottom: var(--s6); }
.profile-copy > p:not(.role) { max-width: 68ch; }
.portrait { width: 96px; height: 96px; margin-top: var(--s1); border-radius: 50%; }
.profile-links { display: flex; gap: var(--s6); flex-wrap: wrap; font-size: 14px; line-height: 20px; margin-top: var(--s6); }
.home-section { padding-top: var(--s6); border-top: 1px solid var(--line); margin-top: var(--s8); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); }
.section-heading > a { font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; }
.work-list { list-style: none; padding: 0; margin: 0; }
.work-list li { margin-bottom: var(--s6); }
.work-list h3 { margin-bottom: var(--s1); }
.work-list h3 a, .writing-entry h2 a, .writing-entry h3 a { color: var(--ink); }
.work-list p { color: var(--muted); max-width: 78ch; margin: 0; }
.project-links { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s2); font-size: 14px; line-height: 20px; }
.writing-entry h2, .writing-entry h3 { font-size: 18px; line-height: 28px; font-weight: 500; letter-spacing: -.015em; max-width: 700px; }
.writing-entry p { color: var(--muted); margin: var(--s2) 0 var(--s3); }
.writing-entry + .writing-entry { border-top: 1px solid var(--line); margin-top: var(--s6); padding-top: var(--s6); }
.entry-meta { color: var(--muted); display: flex; gap: var(--s2); }
.site-footer { display: flex; justify-content: space-between; gap: var(--s6); color: var(--muted); border-top: 1px solid var(--line); margin-top: var(--s12); padding: var(--s6) 0 var(--s8); }
.site-footer div { display: flex; gap: var(--s6); flex-wrap: wrap; }
.site-footer a { color: var(--muted); }
.site-footer--with-credit { flex-wrap: wrap; row-gap: var(--s4); }
.footer-credit { width: 100%; margin: 0; font-size: 12px; line-height: 20px; }

.page-heading, .page-header { padding: var(--s12) 0 var(--s8); margin: 0; }
.page-heading h1, .page-header h1 { margin-bottom: var(--s3); }
.page-heading p, .page-header p { color: var(--muted); max-width: 66ch; margin: 0; }
.writing-list { border-top: 1px solid var(--line); padding-top: var(--s8); min-height: 280px; }
.writing-list .writing-entry h2 { font-size: 24px; line-height: 32px; font-weight: 500; max-width: 680px; }
.writing-list .writing-entry p { font-size: 16px; line-height: 24px; max-width: 60ch; margin: var(--s4) 0; }
.page-note { font-size: 14px; line-height: 20px; margin-top: var(--s8); }
.contact-list { padding: 0; margin: 0 0 var(--s16); }
.contact-list > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s6); margin-bottom: var(--s6); }
.contact-list dt { font-size: 14px; line-height: 20px; color: var(--muted); }
.contact-list dd { margin: 0; overflow-wrap: anywhere; }

/* Existing reading and viewing notes are preserved. */
.section-label { font-size: 18px; line-height: 28px; font-weight: 600; margin: var(--s4) 0 var(--s6); }
.paper-item, .watch-card { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.paper-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s4); align-items: baseline; }
.paper-title { grid-column: 1; grid-row: 1; }
.paper-status { color: var(--muted); grid-column: 2; grid-row: 1; }
.paper-year { color: var(--muted); grid-column: 2; grid-row: 2; }
.paper-authors { font-size: 14px; line-height: 20px; color: var(--muted); margin: var(--s2) 0 var(--s4); }
.paper-links, .watch-links { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: 14px; line-height: 20px; }
.paper-links a, .watch-links a { overflow-wrap: anywhere; }
.watch-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); }
.watch-index { display: none; }
.watch-date { color: var(--muted); }
.watch-meta { display: flex; gap: var(--s3); flex-wrap: wrap; margin: var(--s3) 0; }
.watch-tag { color: var(--muted); }
.video-frame { position: relative; aspect-ratio: 16 / 9; margin-top: var(--s6); background: var(--soft); }
.video-frame iframe { width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }
.block { font-size: 14px; line-height: 20px; color: var(--muted); }
.footer-spacer { display: none; }

/* Reading layout; the essay body itself remains unchanged. */
.article-page { max-width: 720px; margin: auto; }
.article-header { padding: var(--s10) 0 var(--s6); }
.back-link { font-size: 14px; line-height: 20px; display: inline-block; margin-bottom: var(--s6); }
.article-header h1 { margin-bottom: var(--s6); }
.article-deck { color: var(--muted); }
.article-meta { font-size: 12px; line-height: 16px; color: var(--muted); display: flex; gap: var(--s4); flex-wrap: wrap; }
.article-toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s4) 0; font-size: 14px; line-height: 20px; margin-bottom: var(--s8); }
.article-toc summary { cursor: pointer; color: var(--muted); }
.article-toc ol { padding-left: var(--s6); margin: var(--s4) 0 var(--s1); }
.article-toc li { margin: var(--s2) 0; }
.post-content { font-size: 18px; line-height: 28px; overflow-wrap: break-word; }
.post-content p { margin-bottom: var(--s6); }
.post-content h2 { font-size: 24px; line-height: 32px; letter-spacing: -.02em; margin: var(--s10) 0 var(--s6); }
.post-content h3 { margin: var(--s8) 0 var(--s4); }
.post-content h4 { font-size: 18px; line-height: 28px; margin: var(--s6) 0 var(--s3); }
.post-content a { text-decoration: underline; }
.essay-abstract { border-bottom: 1px solid var(--line); padding-bottom: var(--s3); }
.essay-abstract h2 { margin-top: 0; }
.essay-disclaimer { font-size: 14px; line-height: 20px; color: var(--muted); }
.post-content blockquote { border-left: 2px solid var(--line); margin: var(--s6) 0; padding-left: var(--s6); color: var(--muted); }
.post-content figure { margin: var(--s8) 0; }
.post-content figure img { display: block; margin: auto; }
.post-content figcaption { font-size: 14px; line-height: 20px; color: var(--muted); margin-top: var(--s3); }
.post-content pre { overflow: auto; background: var(--soft); padding: var(--s4); font-size: 14px; line-height: 20px; }
.post-content code { font-size: .875em; }
.post-content table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; font-size: 14px; line-height: 20px; }
.post-content td, .post-content th { border-bottom: 1px solid var(--line); padding: var(--s2); }
.post-content .references, .csl-entry, .footnotes { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.csl-entry { margin-bottom: var(--s4); }
.post-end { font-size: 14px; line-height: 20px; border-top: 1px solid var(--line); padding-top: var(--s6); margin-top: var(--s10); }

@media (max-width: 640px) {
  .site-shell { padding: 0 var(--s6); }
  .site-header { padding: var(--s6) 0 var(--s4); gap: var(--s2); align-items: flex-start; }
  .site-header nav { gap: var(--s2) var(--s3); }
  .site-header nav a { font-size: 12px; line-height: 16px; }
  .site-tools { gap: 0; }
  .theme-button { width: 24px; height: 24px; padding: var(--s1); }
  .research-banner { margin-top: var(--s4); }
  .profile { grid-template-columns: minmax(0, 1fr) 64px; column-gap: var(--s4); row-gap: var(--s4); margin: var(--s6) 0 var(--s8); }
  .profile-copy { display: contents; }
  .profile h1 { font-size: 30px; line-height: 36px; grid-column: 1; grid-row: 1; margin: 0; }
  .profile .role { grid-column: 1; grid-row: 2; font-size: 12px; line-height: 16px; margin: -8px 0 var(--s2); }
  .portrait { width: 64px; height: 64px; margin-top: 0; grid-column: 2; grid-row: 1 / 3; }
  .profile-copy > p:not(.role) { grid-column: 1 / -1; margin: 0; }
  .profile-links { grid-column: 1 / -1; margin-top: var(--s2); }
  .section-heading { gap: var(--s3); }
  .section-heading h2 { font-size: 18px; line-height: 28px; }
  .site-footer { flex-direction: column; gap: var(--s3); margin-top: var(--s10); }
  .page-heading, .page-header { padding: var(--s8) 0; }
  .page-heading h1, .page-header h1, .article-header h1 { font-size: 30px; line-height: 36px; }
  .contact-list > div { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s4); }
  .paper-title, .watch-title { font-size: 18px; line-height: 28px; }
  .paper-head { grid-template-columns: minmax(0, 1fr); }
  .paper-title, .paper-status, .paper-year { grid-column: auto; grid-row: auto; }
  .watch-head { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .article-meta { gap: var(--s2) var(--s4); }
  .post-content { font-size: 16px; line-height: 24px; }
  .post-content h2 { font-size: 20px; line-height: 28px; }
}
@media (max-width: 370px) {
  .site-shell { padding: 0 var(--s4); }
  .site-header { flex-wrap: wrap; }
  .site-header nav { width: 100%; justify-content: space-between; gap: var(--s2); }
  .site-tools { margin-left: auto; }
  .profile h1 { font-size: 24px; line-height: 32px; }
  .section-heading { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}