/* Website chrome only. Scientific prose, cards and metadata keep their renderer. The header is in
   site-header.css and the footer in site-footer.css; this file has what only the research pages need. */
.research-site {
  --bg: #fff; --surface: #faf6f5; --text: #2b2b2b; --muted: #4f5e42;
  --nav: #595959; --border: #e4dbcd; --orange: #bf5b39;
  --orange-dark: #663d29; --orange-tint: #f2d7ce; --orange-light: #e5b2a1;
  --shadow-md: 0 4px 12px rgba(51, 41, 38, .1), 0 12px 32px rgba(51, 41, 38, .08);
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans);
}
.research-site > :is(header, footer, .research-breadcrumbs),
.research-site > :is(header, footer, .research-breadcrumbs) * { box-sizing: border-box; }
.research-site > header { line-height: 1.3; }
.research-site .wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 640px) { .research-site .wrap { padding-inline: 18px; } }
.research-site > .skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 14px; background: #fff; color: var(--orange-dark); transform: translateY(-180%); }
.research-site > .skip:focus { transform: none; }
.research-site > :is(footer, .research-breadcrumbs) :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.research-site .research-breadcrumbs { padding-block: 10px 24px; }
.research-site .research-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.research-site .research-breadcrumbs li { display: inline; min-width: 0; overflow-wrap: anywhere; font: var(--weight-regular) 15px/1.5 var(--font-sans); }
.research-site .research-breadcrumbs li + li::before { content: "/"; padding-right: 8px; color: var(--nav); }
.research-site .research-breadcrumbs a { color: var(--orange-dark); text-underline-offset: 3px; }
.research-site .research-error { width: min(65ch, calc(100% - 32px)); min-height: 35vh; margin: 24px auto 48px; }
.research-site .research-error h1 { font: var(--weight-strong) clamp(36px, 5vw, 56px)/1 var(--font-display); }
.research-site .research-error p { margin-block: 24px; font-size: 17px; line-height: 1.5; }
.research-site .research-error a { color: var(--orange-dark); }

/* The paper page's picture fades in once loaded (/fade-in.js; the same rule as img.fade in type.css; the cards' in paper-cards.css). */
@keyframes img-fade { from { opacity: 0; } }
html.js .article-artwork img:not(.is-loaded) { opacity: 0; }
html.js .article-artwork img.is-fading { animation: img-fade .35s ease-out; }
@media (prefers-reduced-motion: reduce) { html.js .article-artwork img.is-fading { animation: none; } }

/* The themes dialog ("Emner") on the library page: the page behind does not scroll while it is open. */
html:has(.dlg[open]) { overflow: hidden; }
.research-site #research-content .topic-dlg li { min-width: 0; max-width: 100%; }
.research-site #research-content .topic-dlg .topic { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

.document-controls[hidden], #document-empty[hidden] { display: none; }
#document-pagination .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#document-pagination .pagination > * { display: inline-flex; min-width: 40px; min-height: 44px; align-items: center; justify-content: center; padding: 4px 8px; }