/* ==========================================================================
   Custom typographic layer — loaded after main.css
   Quiet editorial look: serif headings, sans body, one accent, lots of air.
   ========================================================================== */

:root {
  --paper:       #fdfcfa;
  --paper-sunk:  #f6f3ed;
  --ink:         #1b1a18;
  --ink-soft:    #454239;
  --muted:       #78736a;
  --rule:        #e7e2d8;
  --accent:      #8c4a2f;
  --accent-weak: #b98a72;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* One stable type scale at every width (theme default jumps 16→18px). */
html { font-size: 17px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: -0.002em;
}

::selection { background: #f0e2d9; }

a { color: var(--accent); text-decoration: none; }
.page__content a,
.archive a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--accent-weak);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.page__content a:hover,
.archive a:not(.btn):hover { color: var(--ink); text-decoration-color: var(--ink); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.masthead { background: var(--paper); border-bottom: 1px solid var(--rule); }
.masthead__inner-wrap { padding: 0.9em 1em; }
.greedy-nav { background: transparent; }
.greedy-nav a { font-family: var(--sans); }
.greedy-nav .site-title,
.masthead__menu-item--lg a {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
.greedy-nav__toggle::before, .greedy-nav__toggle::after { background: var(--ink); }
.greedy-nav .visible-links a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.greedy-nav .visible-links a:hover { color: var(--ink); }
.greedy-nav .visible-links a::before { background: var(--accent); height: 1px; }
.greedy-nav .hidden-links { background: var(--paper); border: 1px solid var(--rule); box-shadow: none; }
.greedy-nav .hidden-links a { color: var(--muted); }

/* --------------------------------------------------------------------------
   Sidebar / author card
   -------------------------------------------------------------------------- */
.sidebar .author__avatar img {
  border-radius: 3px;
  border: 1px solid var(--rule);
  padding: 0;
  max-width: 165px;
}
.author__name { font-family: var(--serif); font-weight: 500; font-size: 1.28rem; letter-spacing: 0.005em; margin: 0.75em 0 0.1em; }
.author__bio  { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin: 0 0 0.9em; }
.author__urls li { padding: 0.16em 0; font-size: 0.82rem; }
.author__urls a { color: var(--muted); text-decoration: none; }
.author__urls a:hover { color: var(--accent); text-decoration: none; }
.author__urls li i, .author__urls li .ai { color: var(--accent-weak); width: 1.2em; }

/* Wide: the theme already lists the links inline — drop its stray "Follow"
   button and the popover chrome. */
@media (min-width: 1200px) {
  .author__urls-wrapper .btn { display: none; }
  .author__urls {
    /* The theme sets z-index:-1 here and never resets it at this breakpoint; it
       only stays clickable because .author__urls-wrapper opens a stacking
       context around it. Reset it rather than relying on that. */
    z-index: auto;
    border: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }
}

/* Narrow: the theme turns the profile into a horizontal strip whose links hide
   behind a "Follow" popover. Stack it and show the links outright instead. */
@media (max-width: 1199px) {
  .sidebar .author__avatar,
  .sidebar .author__content,
  .sidebar .author__urls-wrapper {
    display: block;
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }
  .sidebar .author__avatar img { max-width: 120px; }
  .sidebar .author__urls-wrapper { position: static; cursor: default; }
  .sidebar .author__urls-wrapper .btn { display: none; }
  .sidebar .author__urls {
    display: block;
    position: relative;
    right: auto;
    margin: 0.5em 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    z-index: auto;
  }
  .sidebar .author__urls::before,
  .sidebar .author__urls::after { display: none; }
  .sidebar .author__desktop { display: block; }
  .sidebar { margin-bottom: 2.4em; padding-bottom: 1.6em; border-bottom: 1px solid var(--rule); }
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */
.page__content, .archive { font-size: 1rem; }
.page__content > p, .page__content > ul, .page__content > ol { max-width: 40em; }
.page__title, .archive h1.page__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: -0.01em;
  border: 0;
  margin-bottom: 0.9em;
}
.page__meta { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.03em; }
.page__footer { background: var(--paper); border-top: 1px solid var(--rule); }
.page__footer footer { padding-top: 1.5em; }
.page__footer, .page__footer a { color: var(--muted); font-size: 0.8rem; }

/* Section headings: small letterspaced label with a hairline rule. */
.page__content h2,
.archive h2 {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 3.4em 0 1.3em;
  padding-bottom: 0.7em;
  border-bottom: 1px solid var(--rule);
}
.page__content h2:first-child,
.archive h2:first-child { margin-top: 0.6em; }
.page__content h3,
.archive h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.008em;
  margin: 2.2em 0 0.6em;
}
.page__content h4,
.archive h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  margin: 1.8em 0 0.4em;
}
.page__content p,
.archive p { margin: 0 0 1.15em; }
.page__content strong { font-weight: 600; }
.page__content hr,
.archive hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }
.page__content blockquote,
.archive blockquote {
  border-left: 2px solid var(--accent-weak);
  margin: 1.8em 0;
  padding: 0.1em 0 0.1em 1.3em;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-style: italic;
  color: var(--ink-soft);
}
.page__content blockquote p { margin-bottom: 0.5em; }
.page__content code,
.archive code { font-family: var(--mono); font-size: 0.86em; background: var(--paper-sunk); padding: 0.12em 0.36em; border-radius: 3px; }
.page__content pre,
.archive pre { background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: 4px; }
.page__content pre code { background: none; padding: 0; font-size: 0.84rem; line-height: 1.65; }
.page__content figcaption, .page__content img + em { color: var(--muted); font-size: 0.82rem; }
.notice, .notice--info, .notice--warning { font-family: var(--sans); }

/* --------------------------------------------------------------------------
   Homepage — lede
   -------------------------------------------------------------------------- */
.lede {
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: -0.008em;
  color: var(--ink);
  max-width: 26em;
  margin: 0.2em 0 1.6em;
}
.lede .accent { color: var(--accent); font-style: italic; }

/* Small right-aligned "everything else →" link under a section. */
.more {
  display: block;
  margin-top: 1.6em;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--muted) !important;
  text-decoration: none !important;
}
.more:hover { color: var(--accent) !important; }

/* --------------------------------------------------------------------------
   Research lines (replaces the old colour-coded card grid)
   -------------------------------------------------------------------------- */
.rlist { margin: 0; padding: 0; list-style: none; }
.rlist li {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  gap: 0 0.9em;
  padding: 0.95em 0;
  border-bottom: 1px dashed var(--rule);
}
.rlist li:last-child { border-bottom: 0; }
.rlist .n {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--accent-weak);
  line-height: 1.9;
}
.rlist .t { font-weight: 600; font-size: 0.98rem; letter-spacing: -0.004em; }
.rlist .d { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin-top: 0.15em; }

/* --------------------------------------------------------------------------
   News
   -------------------------------------------------------------------------- */
.news-list { list-style: none; padding: 0; margin: 0; }
.news-list li {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  gap: 0 1.1em;
  padding: 0.55em 0;
  font-size: 0.95rem;
  line-height: 1.6;
}
.news-list .date {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding-top: 0.32em;
  white-space: nowrap;
}
.news-list b { font-weight: 600; }

/* --------------------------------------------------------------------------
   Publications
   -------------------------------------------------------------------------- */
.pubs { margin: 0; padding: 0; list-style: none; }
.pubs li {
  padding: 1.1em 0;
  border-bottom: 1px solid var(--rule);
}
.pubs li:last-child { border-bottom: 0; }
.pubs .t {
  display: block;
  font-family: var(--serif);
  font-size: 1.13rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.008em;
  margin-bottom: 0.3em;
}
.pubs .t a { text-decoration: none !important; color: var(--ink) !important; box-shadow: inset 0 -1px 0 var(--accent-weak); }
.pubs .t a:hover { color: var(--accent) !important; box-shadow: inset 0 -1px 0 var(--accent); }
.pubs .a { display: block; font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
.pubs .a .me { color: var(--ink); font-weight: 600; }
.pubs .v {
  display: inline-block;
  margin-top: 0.4em;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}
.pubs .v .note { color: var(--muted); text-transform: none; letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   Blog index + post
   -------------------------------------------------------------------------- */
.postlist { margin: 0; padding: 0; list-style: none; }
.postlist li { padding: 1.25em 0; border-bottom: 1px solid var(--rule); }
.postlist li:last-child { border-bottom: 0; }
.postlist .d {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  display: block;
  margin-bottom: 0.28em;
}
.postlist .t {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.postlist .t a { color: var(--ink) !important; text-decoration: none !important; }
.postlist .t a:hover { color: var(--accent) !important; }
.postlist .x { color: var(--muted); font-size: 0.93rem; line-height: 1.6; margin: 0.3em 0 0; max-width: 40em; }
.postlist .x p { margin: 0; }
.postlist .tags { margin-top: 0.5em; }
.postlist .tags span,
.taglist span {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.1em 0.7em;
  margin: 0 0.3em 0.3em 0;
}

/* Article reading view */
.page__content { max-width: none; }
.page__hero--overlay { background: var(--paper-sunk); }
.page__date { color: var(--muted); font-size: 0.8rem; }
.page__share, .page__related { border-top: 1px solid var(--rule); }
.page__share h4, .page__related h4 { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  html { font-size: 16px; }
  .lede { font-size: 1.18rem; }
  .news-list li { grid-template-columns: 1fr; gap: 0; padding: 0.7em 0; }
  .news-list .date { padding-top: 0; margin-bottom: 0.1em; }
  .rlist li { grid-template-columns: 1fr; }
  .rlist .n { display: none; }
}

/* --------------------------------------------------------------------------
   Article meta — the theme emits FontAwesome 4 icon classes here, which the
   bundled FA6 cannot render. Drop the icons and let the text carry it.
   -------------------------------------------------------------------------- */
.page__meta i, .page__date i, .page__taxonomy i, .page__meta-title i { display: none; }
.page__title + .page__meta { margin: -0.6em 0 0; }
.page__date { margin: 0.1em 0 2.2em; font-weight: 400; }
.page__date strong { font-weight: 500; color: var(--muted); }
.page__meta-title { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.page__taxonomy { font-size: 0.8rem; }
.page__taxonomy strong { font-weight: 500; color: var(--muted); }
.page__taxonomy-item {
  display: inline-block;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.08em 0.7em;
  margin: 0 0.25em 0.3em 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted) !important;
  text-decoration: none !important;
}
.page__taxonomy-item:hover { color: var(--accent) !important; border-color: var(--accent-weak); }

/* ==========================================================================
   Article pages (layout: post) — one centred column, no sidebar
   ========================================================================== */
#main.post-main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.25em;
}

.post-header { margin: 0 0 2.4em; }
.post-back {
  display: inline-block;
  margin-bottom: 1.6em;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted) !important;
  text-decoration: none !important;
}
.post-back:hover { color: var(--accent) !important; }
.post-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.45rem;
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0 0 0.4em;
  color: var(--ink);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.55em;
  font-size: 0.8rem;
  color: var(--muted);
}
.post-meta .sep { color: var(--accent-weak); }

/* Table of contents */
.toc {
  margin: 0 0 3em;
  padding: 0.85em 1.1em;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-sunk);
  font-size: 0.9rem;
}
.toc > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 0.6em;
  color: var(--accent-weak);
  transition: transform 0.15s ease;
}
.toc[open] > summary::before { transform: rotate(90deg); }
.toc-inner { margin-top: 0.85em; padding-top: 0.85em; border-top: 1px solid var(--rule); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0.3em 0; line-height: 1.45; }
.toc li.lvl3 { padding-left: 1.5em; font-size: 0.9em; }
.toc a { color: var(--ink-soft) !important; text-decoration: none !important; }
.toc a:hover { color: var(--accent) !important; }

/* Body */
.post-content { counter-reset: figure-counter; font-size: 1.02rem; line-height: 1.78; }
.post-content h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.58rem;
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 2.5em 0 0.7em;
}
.post-content h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -0.004em;
  margin: 2em 0 0.5em;
}
.post-content h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 1.7em 0 0.4em;
}
.post-content p { margin: 0 0 1.3em; }
.post-content ul, .post-content ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.post-content li { margin: 0.35em 0; }
.post-content li > ul, .post-content li > ol { margin: 0.35em 0 0.2em; }
.post-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--accent-weak);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.post-content a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.post-content strong { font-weight: 600; }
.post-content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.6em 0; }
.post-content blockquote {
  border-left: 2px solid var(--accent-weak);
  margin: 1.9em 0;
  padding: 0.1em 0 0.1em 1.3em;
  font-family: var(--serif);
  font-size: 1.14rem;
  font-style: italic;
  color: var(--ink-soft);
}
.post-content code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--paper-sunk);
  padding: 0.12em 0.36em;
  border-radius: 3px;
}
.post-content pre {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1em 1.15em;
  overflow-x: auto;
  margin: 0 0 1.6em;
}
.post-content pre code { background: none; padding: 0; font-size: 0.84rem; line-height: 1.65; }
.post-content table { width: 100%; margin: 0 0 1.6em; font-size: 0.92rem; }
.post-content th, .post-content td { border-bottom: 1px solid var(--rule); padding: 0.5em 0.6em; text-align: left; }
.post-content th { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* Figures — numbered captions, as on the reference site */
.post-content img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 3px; }
.post-content figure { counter-increment: figure-counter; margin: 2.2em auto; max-width: 100%; }
.post-content figcaption {
  max-width: 85%;
  margin: 0.9em auto 0;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}
.post-content figcaption::before { content: "Fig. " counter(figure-counter) ". "; }

/* Footer: tags + prev/next */
.post-footer { margin-top: 3.6em; padding-top: 1.7em; border-top: 1px solid var(--rule); }
.post-tags { list-style: none; padding: 0; margin: 0 0 2em; }
.post-tags li { display: inline-block; margin: 0 0.3em 0.35em 0; }
.post-tags a {
  display: inline-block;
  padding: 0.1em 0.75em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--muted) !important;
  text-decoration: none !important;
}
.post-tags a:hover { color: var(--accent) !important; border-color: var(--accent-weak); }
.paginav { display: flex; gap: 1.5em; justify-content: space-between; }
.paginav a { flex: 1 1 0; text-decoration: none !important; color: var(--ink) !important; }
.paginav .next { text-align: right; }
.paginav .dir {
  display: block;
  margin-bottom: 0.28em;
  font-size: 0.71rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.paginav .label { font-family: var(--serif); font-size: 1.05rem; line-height: 1.3; }
.paginav a:hover .label { color: var(--accent); }

@media (max-width: 600px) {
  .post-title { font-size: 1.85rem; }
  .post-content { font-size: 1rem; }
  .post-content h2 { font-size: 1.35rem; }
  .paginav { flex-direction: column; gap: 1.2em; }
  .paginav .next { text-align: left; }
}

/* Year dividers on the publications page — quieter than the section headings */
.page__content h3.year,
.archive h3.year {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 2.8em 0 0.3em;
}