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

:root {
  --paper: #E9E6DC;
  --paper-raised: #EFECE2;
  --ink: #1A1A18;
  --ink-soft: #55524A;
  --ink-faint: #8B876F;
  --line: #C9C4B0;
  --accent: #3F5C4E;
  --accent-warm: #A8752F;
  --max-width: 720px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Top bar: logo left, nav center, search right */

.site-topbar {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
}

.topbar-logo {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.topbar-logo .mark { color: var(--accent); }

.topbar-nav {
  display: flex;
  gap: 26px;
  flex: 1;
  justify-content: center;
}

.topbar-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.topbar-nav a:hover,
.topbar-nav a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--accent-warm);
}

.topbar-search {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 4px;
  padding: 6px 6px 6px 12px;
  gap: 6px;
}

.topbar-search input {
  border: none;
  background: none;
  outline: none;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.88rem;
  color: var(--ink);
  width: 150px;
}

.topbar-search input::placeholder { color: var(--ink-faint); }

.topbar-search button {
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
}

.topbar-search button:hover { color: var(--accent); }

@media (max-width: 760px) {
  .topbar-inner { flex-wrap: wrap; padding: 14px 20px; }
  .topbar-nav { order: 3; width: 100%; justify-content: flex-start; gap: 18px; }
  .topbar-search input { width: 110px; }
}

/* Hero header (below top bar) */

.site-header {
  padding: 56px 0 32px;
  animation: rise 0.6s ease-out;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.wordmark {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: 2.6rem;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.wordmark .mark {
  color: var(--accent);
}

.tagline {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  max-width: 46ch;
}

hr.rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* Index / table of contents */

.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.index-entry {
  border-bottom: 1px solid var(--line);
}

.index-entry:first-child {
  border-top: 1px solid var(--line);
}

.index-entry a {
  display: block;
  padding: 26px 0;
  text-decoration: none;
  color: inherit;
}

.index-entry .entry-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.entry-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.32rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.entry-date {
  font-size: 0.85rem;
  color: var(--accent-warm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.entry-excerpt {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  max-width: 62ch;
}

.index-entry a:hover .entry-title,
.index-entry a:focus-visible .entry-title {
  color: var(--accent);
}

.empty-note {
  padding: 32px 0;
  color: var(--ink-faint);
  font-style: italic;
}

/* Article page */

.article-header {
  padding: 56px 0 32px;
}

.back-link {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--line);
}

.back-link:hover { color: var(--accent); border-color: var(--accent); }

.article-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.25;
  margin: 0 0 12px;
}

.article-meta {
  color: var(--ink-faint);
  font-size: 0.9rem;
}

.article-body {
  padding-bottom: 64px;
  font-size: 1.05rem;
}

.article-body p { margin: 0 0 1.3em; }

.article-body h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.4rem;
  margin: 1.8em 0 0.6em;
}

.article-body h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.15rem;
  margin: 1.6em 0 0.5em;
}

.article-body a { color: var(--accent); }

.article-body blockquote {
  margin: 1.5em 0;
  padding-left: 18px;
  border-left: 2px solid var(--accent-warm);
  color: var(--ink-soft);
}

.article-body code {
  background: var(--paper-raised);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

.article-body pre {
  background: var(--paper-raised);
  padding: 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
}

.article-body pre code { background: none; padding: 0; }

.article-body ul, .article-body ol {
  margin: 0 0 1.3em;
  padding-left: 1.4em;
}

/* Footer */

.site-footer {
  padding: 40px 0 60px;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

@media (max-width: 560px) {
  .wordmark { font-size: 2.1rem; }
  .site-header { padding: 48px 0 32px; }
  .entry-top { flex-direction: column; gap: 4px; }
  .article-title { font-size: 1.7rem; }
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Homepage: field browsing cards */

.field-nav {
  padding: 40px 0 8px;
}

.section-heading {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
}

.field-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field-nav-card {
  display: flex;
  align-items: center;
  min-height: 84px;
  padding: 18px 22px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.field-nav-card:hover,
.field-nav-card:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.field-nav-card:nth-child(1) { background: #F3E4DE; border-left-color: #B5573C; }
.field-nav-card:nth-child(2) { background: #E3EDE2; border-left-color: #3F7A4E; }
.field-nav-card:nth-child(3) { background: #E1E9F0; border-left-color: #33587D; }
.field-nav-card:nth-child(4) { background: #F4EBD6; border-left-color: #A8752F; }
.field-nav-card:nth-child(5) { background: #EAE2F0; border-left-color: #6B4A8A; }
.field-nav-card:nth-child(6) { background: #DDEDEA; border-left-color: #2E7D72; }
.field-nav-card:nth-child(7) { background: #F0E1E8; border-left-color: #A13F63; }
.field-nav-card:nth-child(8) { background: #EDEAE0; border-left-color: #6B6455; }

.field-nav-card:hover { border-color: var(--line); }

@media (max-width: 560px) {
  .field-nav-grid { grid-template-columns: 1fr; }
}

/* Papers page */

.papers-intro {
  padding: 40px 0 8px;
  color: var(--ink-soft);
  max-width: 62ch;
}

.papers-intro a { color: var(--accent); }

.field-grid {
  display: block;
  padding-bottom: 60px;
}

.field-card {
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}

.field-card:first-of-type {
  border-top: 1px solid var(--line);
  margin-top: 16px;
}

.field-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
}

.paper-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.paper-entry {
  border-top: 1px solid var(--line);
}

.paper-entry:first-child { border-top: none; }

.paper-entry a {
  display: block;
  padding: 16px 0;
  text-decoration: none;
  color: inherit;
}

.paper-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.paper-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.paper-date {
  font-size: 0.78rem;
  color: var(--accent-warm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.paper-authors {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.paper-summary {
  margin: 8px 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 68ch;
}

.paper-entry a:hover .paper-title,
.paper-entry a:focus-visible .paper-title {
  color: var(--accent);
}

.paper-empty {
  color: var(--ink-faint);
  font-style: italic;
  font-size: 0.92rem;
  padding: 12px 0;
}

.paper-empty a { color: var(--accent); }

@media (max-width: 560px) {
  .paper-top { flex-direction: column; gap: 2px; }
}