/* research.naseeb.nl, styled as naseeb.nl itself: the same tokens (tokens.css
   is copied from the site at build time), the same bar, footer, cards and
   buttons, and the blog's article typography for the papers. Only the arXiv
   structure is its own: the number, PDF and HTML on every entry,
   "Citeer als". */

/* The same faces as the site. Variable files, so every weight is real. */
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/LibreCaslonText-Variable.woff2) format("woff2"); }
/* Italic is Crimson Text under the Caslon name, as on naseeb.nl. */
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/CrimsonText-Italic.woff2) format("woff2"); size-adjust: 126.2%; }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 600; font-display: swap;
  src: url(/fonts/CrimsonText-SemiBoldItalic.woff2) format("woff2"); size-adjust: 126.2%; }
@font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-display: swap;
  src: url(/fonts/InstrumentSans-Variable.woff2) format("woff2"); }
@font-face { font-family: "Year of the Camel"; font-weight: 400; font-display: swap;
  src: url(/fonts/TheYearofTheCamel-Regular.otf) format("opentype"); }
@font-face { font-family: "Year of the Camel"; font-weight: 700; font-display: swap;
  src: url(/fonts/TheYearofTheCamel-Bold.otf) format("opentype"); }

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font: var(--text-body-standard)/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1; width: 100%; }
a { color: var(--color-brand-primary); text-underline-offset: 2px; }
a:hover { color: var(--color-brand-secondary); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Headings in the serif at 400: the site asks for 500, which its two static
   Caslon files resolve to 400. The variable file here would honour 500. */
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; color: var(--color-text-primary); }
h1 { font-size: var(--text-section); line-height: 1.2; margin: 0; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-lg); }
@media (min-width: 48rem) { .wrap { padding: 0 var(--space-2xl); } }
.narrow { max-width: 880px; }

/* The bar, as the site's: one step darker than the page, sticky, the gold mark. */
.bar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--color-surface-emphasis) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-subtle);
}
.bar .wrap { height: 64px; display: flex; align-items: center; gap: var(--space-md); }
@media (min-width: 48rem) { .bar .wrap { height: 72px; } }
.brand { display: inline-flex; align-items: center; gap: var(--space-md); text-decoration: none; color: var(--color-brand-primary); }
.brand svg { height: 28px; width: auto; }
.brand span { font-size: var(--text-overline); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-primary); }
.bar .home { margin-left: auto; font-size: var(--text-body-sm); color: var(--color-text-primary); text-decoration: none; }
.bar .home:hover { color: var(--color-brand-secondary); }

/* Breadcrumb, as on the blog. */
.crumbs { font-size: var(--text-body-sm); color: var(--color-text-tertiary); margin: var(--space-2xl) 0 var(--space-lg); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; }
.crumbs li + li::before { content: "›"; margin-right: var(--space-xs); }
.crumbs a { color: var(--color-text-tertiary); text-decoration: none; }
.crumbs a:hover { color: var(--color-text-primary); }
.crumbs [aria-current] { color: var(--color-text-primary); font-weight: 500; }

/* The site's card. */
.card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-whisper);
}

/* Small spaced capitals in gold, as the blog's category line. */
.overline { font-size: var(--text-overline); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-brand-primary); margin: 0; font-variant-numeric: lining-nums; }

/* The site's buttons: filled dark brown, and outlined in the border colour. */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 var(--text-body-sm)/1 var(--font-sans);
  padding: var(--space-md) var(--space-lg); min-height: var(--input-height);
  border-radius: var(--radius-lg); border: 1px solid var(--color-border-emphasis);
  color: var(--color-text-primary); background: transparent; text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard);
}
.button:hover { background: var(--color-surface-emphasis); color: var(--color-text-primary); }
.button.primary { background: var(--color-surface-dark); border-color: transparent; color: var(--color-text-on-dark); }
.button.primary:hover { filter: brightness(1.15); background: var(--color-surface-dark); color: var(--color-text-on-dark); }
.access { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; }

/* The divider under a title: two gold hairlines and a star, as the blog's. */
.ornament { display: flex; align-items: center; gap: var(--space-md); max-width: 240px; margin: var(--space-xl) auto;
  color: var(--color-brand-primary); }
.ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.6; }
.ornament svg { width: 14px; height: 14px; }

/* ── The listing ─────────────────────────────────────────────────────────── */
.index-head { margin: var(--space-2xl) 0 var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); }
.index-head p:not(.overline) { color: var(--color-text-secondary); margin: 0; }
ol.papers { list-style: none; padding: 0; margin: 0 0 var(--space-4xl); display: flex; flex-direction: column; gap: var(--space-lg); }
ol.papers li { padding: var(--space-xl); }
/* The whole card is the link: the title's link stretches over it. */
.entry { position: relative; transition: border-color var(--duration-fast) var(--ease-standard); }
.entry:hover { border-color: var(--color-border-emphasis); }
.entry-title { font-size: var(--text-feature-title); line-height: 1.3; margin: 0 0 var(--space-xs); }
.entry-title a { color: var(--color-text-primary); text-decoration: none; }
.entry-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.entry:hover .entry-title a { color: var(--color-brand-secondary); }
.entry-meta { font-size: var(--text-caption); color: var(--color-text-tertiary); margin: 0; }
.entry-abstract { font: var(--text-body-sm)/1.6 var(--font-serif); color: var(--color-text-secondary); margin: var(--space-md) 0 0; }

/* Versions and the citation, under the text. */
.title-block { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
/* The paper's title stays under the page header around it (28 to 40px on
   /beheer), and the longest Dutch word still fits a 320px phone. */
.title-block h1 { font-size: clamp(20px, 14px + 2.6vw, 32px); text-wrap: balance; hyphens: manual; overflow-wrap: break-word; }
.title-block .meta { font-size: var(--text-caption); color: var(--color-text-tertiary); margin: 0; }
.title-block .access { justify-content: center; margin-top: var(--space-sm); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-md) var(--space-lg); align-items: center; margin: 0; font-size: var(--text-body-sm); }
.facts dt { color: var(--color-text-tertiary); }
.facts dd { margin: 0; }
button.button { cursor: pointer; }
/* An underlined link, as the site's text links. */
.text-link { font: 500 var(--text-body-sm)/1.4 var(--font-sans); color: var(--color-brand-primary);
  text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--color-brand-secondary); }

/* The blog's share row: a spaced label, four square icon buttons. */
.share { max-width: 640px; margin: var(--space-xl) auto 0; padding-top: var(--space-lg); border-top: 1px solid var(--color-border-subtle);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.share-label { font-size: var(--text-overline); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-tertiary); }
.share div { display: flex; gap: var(--space-sm); }
.share-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: var(--radius-md); border: 1px solid var(--color-border-emphasis); color: var(--color-text-primary);
  background: transparent; text-decoration: none; cursor: pointer; padding: 0; transition: background var(--duration-fast) var(--ease-standard); }
.share-button:hover { background: var(--color-surface-emphasis); color: var(--color-text-primary); }
.share-button.copied { color: var(--color-success); border-color: var(--color-success); }

/* ── The paper ───────────────────────────────────────────────────────────── */
.paper { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-4xl); }
.paper article { padding: var(--space-2xl) var(--space-lg); min-width: 0; }
@media (min-width: 48rem) { .paper article { padding: var(--space-3xl) var(--space-4xl); } }
.paper .title-block { margin-bottom: var(--space-md); }
.toc { font-size: var(--text-body-sm); line-height: 1.4; }
.toc .overline { margin-bottom: var(--space-sm); }
.toc ul { list-style: none; padding-left: var(--space-md); margin: 0; }
.toc > ul { padding-left: 0; }
.toc a { color: var(--color-text-secondary); text-decoration: none; display: block; padding: var(--space-xs) 0; }
.toc a:hover { color: var(--color-brand-secondary); }
.toc .toc-section-number { color: var(--color-brand-primary); margin-right: var(--space-sm); font-variant-numeric: lining-nums; }
@media (min-width: 64rem) {
  .paper { grid-template-columns: 220px minmax(0, 1fr); }
  .toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; padding-top: var(--space-xl); }
}
.paper .abstract { max-width: 640px; margin: 0 auto var(--space-2xl); padding: var(--space-lg) var(--space-xl);
  background: var(--color-surface-emphasis); border-radius: var(--radius-lg); }
.paper .abstract p { font: var(--text-body-sm)/1.7 var(--font-serif); margin: var(--space-xs) 0 0; }

/* The text, as the blog's article body. */
.prose { max-width: 640px; margin: 0 auto; font-family: var(--font-serif); hyphens: auto; -webkit-hyphens: auto;
  text-wrap: pretty; hyphenate-limit-chars: 6 3 3; }
.prose p { font-size: var(--text-body-serif); line-height: 1.8; margin: 0 0 1.2em; }
/* A link in the contents or a note lands on the section, not its heading, so
   every target keeps the heading clear of a sticky bar (72px here, 56px on
   /beheer phones) with room to spare. */
.prose [id] { scroll-margin-top: 96px; }
.prose h2, .prose h3 { line-height: 1.25; margin: var(--space-2xl) 0 var(--space-md); hyphens: manual; }
.prose h2 { font-size: var(--text-subhead-sm); }
.prose h3 { font-size: var(--text-feature-title); }
.prose .header-section-number { color: var(--color-brand-primary); margin-right: var(--space-sm); font-variant-numeric: lining-nums; }
.prose strong { font-weight: 600; }
.prose blockquote { margin: var(--space-xl) 0; padding: var(--space-lg) var(--space-xl);
  border-left: 3px solid var(--color-brand-secondary); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface-emphasis) 45%, var(--color-surface-card)); }
.prose blockquote p { font-size: var(--text-body-standard); line-height: 1.7; margin: 0 0 0.8em; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { font-size: var(--text-body-serif); line-height: 1.8; padding-left: 1.4em; margin: 0 0 1.2em; }
.prose li::marker { color: var(--color-brand-primary); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
/* A table spans the text column with equal columns, rules above and below as
   in the PDF, and room around it. Cells open at the top so the columns line up. */
.prose table { border-collapse: collapse; width: 100%; table-layout: fixed; margin: var(--space-xl) 0;
  font: var(--text-body-sm)/1.5 var(--font-sans); border-top: 1px solid var(--color-text-primary);
  border-bottom: 1px solid var(--color-text-primary); }
.prose th, .prose td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border-subtle);
  text-align: left; vertical-align: top; hyphens: manual; -webkit-hyphens: manual; }
.prose th { font-weight: 600; text-align: center; }
/* The heading over the whole table, as in the PDF: larger, in its burgundy. */
.prose th[colspan] { font: 600 var(--text-feature-title)/1.3 var(--font-serif); color: var(--color-brand-secondary); padding-top: var(--space-md); padding-bottom: var(--space-md); }
/* A cell that is only a bold word is a column heading (pandoc writes that row
   as ordinary cells): serif and burgundy, as in the PDF. */
.prose td:has(> p:only-child > strong:only-child) { font: 600 var(--text-body-standard)/1.4 var(--font-serif);
  color: var(--color-brand-secondary); text-align: center !important; /* over pandoc's inline left */ }
.prose th p, .prose td p { margin: 0; font-size: inherit; line-height: inherit; }
/* A list in a cell is a column of short items, not prose: tight, small markers. */
.prose td ul, .prose td ol { font-size: inherit; line-height: inherit; margin: 0; padding-left: 1.1em; }
.prose td li + li { margin-top: var(--space-xs); }
/* Phones: the columns stack, each heading over its own list. Written for a
   table whose columns are lists (heading row, then one row of lists): every
   cell of the first column, then every cell of the second. A table of data
   rows would read wrong this way and needs its own rule. */
@media (max-width: 36rem) {
  .prose table, .prose thead, .prose tbody, .prose thead tr, .prose th { display: block; width: auto; }
  .prose tbody { display: flex; flex-direction: column; }
  .prose tbody tr { display: contents; }
  .prose td { display: block; border-bottom: 0; }
  .prose td:nth-child(2) { order: 1; }
  .prose td:has(> p:only-child > strong:only-child) { padding-top: var(--space-md); }
  .prose td:has(> .minipage) { border-bottom: 1px solid var(--color-border-subtle); }
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose .footnote-ref sup, .prose sup { font-size: 0.68em; font-weight: 600; color: var(--color-brand-primary); line-height: 0; }
.prose a.footnote-ref { text-decoration: none; }
.prose .footnotes { border-top: 1px solid var(--color-border-subtle); margin-top: var(--space-2xl); padding-top: var(--space-lg);
  font-family: var(--font-sans); font-size: var(--text-body-sm); line-height: 1.7; color: var(--color-text-tertiary); }
.prose .footnotes hr { display: none; }
.prose .footnotes ol { font-size: inherit; line-height: inherit; }
.prose .footnotes p { font-size: inherit; line-height: inherit; margin: 0 0 0.4em; }
.prose .footnotes li::marker { color: var(--color-text-tertiary); }

[lang="ar"] { direction: rtl; unicode-bidi: isolate; font-family: var(--font-arabic); font-size: 1.15em; line-height: 0; }

/* A defined term: the blog's definition box, left-aligned as the blog has it. */
.prose .definition { text-align: left; background: var(--color-surface-emphasis); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-xl); margin: var(--space-xl) 0; hyphens: manual; }
.prose .definition p { margin: 0; }
.prose .defterm { font-size: var(--text-feature-title); font-weight: 600; }
.prose .defterm [lang="ar"] { color: var(--color-brand-secondary); font-size: var(--text-subhead-lg); margin-left: var(--space-sm); line-height: 1.5; }
.prose .defroot [lang="ar"] { unicode-bidi: isolate; display: inline-block; }
.prose .defmeaning { font: var(--text-body-sm)/1.6 var(--font-sans); color: var(--color-text-secondary); margin: var(--space-xs) 0 var(--space-md); }
.prose .defroot { color: var(--color-text-tertiary); }
.prose .defgloss { font: italic var(--text-caption) var(--font-sans); color: var(--color-text-tertiary); }

.colophon { max-width: 640px; margin: var(--space-2xl) auto 0; padding-top: var(--space-lg); border-top: 1px solid var(--color-border-subtle); }

/* The site's footer: the dark band, the wordmark, the small print. */
.footer { background: var(--color-surface-dark-elevated); color: var(--color-text-on-dark-muted); }
.footer .wrap { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); display: flex; flex-direction: column;
  align-items: center; gap: var(--space-lg); }
.footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm) var(--space-xl); }
.footer nav a { font-size: var(--text-caption); color: var(--color-text-on-dark-muted); text-decoration: none; }
.footer nav a:hover { color: var(--color-text-on-dark); }
.footer .wordmark { color: var(--color-text-on-dark); }
.footer .wordmark svg { height: 16px; width: auto; display: block; }
.footer p { font-size: var(--text-caption); margin: 0; }