@import url("./rovan/components.css");



* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; background: var(--color-background); }
html.is-page-loading { background: #000; }
html.is-page-loading body { visibility: hidden; opacity: 0; transition: opacity 0.42s ease; }
html.is-page-ready body { visibility: visible; opacity: 1; transition: opacity 0.42s ease; }
body { margin: 0; color: var(--color-text-max); background: var(--color-background); font-family: var(--font-text); font-weight: 500; line-height: 1.8; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; padding: 8px 16px; transform: translateY(-180%); border-radius: var(--radius); background: #fff; color: #000; }
.skip-link:focus { transform: translateY(0); }
.brand-link { display: inline-flex; align-items: center; gap: 10px; padding: 0 10px; font-size: 0.94rem; font-weight: 600; white-space: nowrap; }
.brand-link img { width: 34px; height: 34px; border-radius: var(--radius); background: #fff; }
body:not([data-page="index"]) .site-header > section > .desk > .brand-link > img { background: transparent; border-radius: 0; }
.language-control select { max-width: 124px; min-height: 38px; padding: 6px 10px; border: var(--border-card); border-radius: var(--radius); color: #fff; background: var(--color-card-mid); font-size: 0.8rem; color-scheme: dark; }
.main { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.main { padding-top: 112px; padding-bottom: 24px; }
.kicker { font-size: 0.77rem; letter-spacing: 0.12em; line-height: 1.6; color: var(--color-text-high); }
.page-masthead { padding: clamp(28px, 5vw, 56px); border: var(--border-card); border-radius: var(--radius-panel); background: var(--color-card-prime); }
.page-masthead h1 { margin-top: 20px; font-size: clamp(2.3rem, 5vw, 4.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; }
.page-masthead > p:not(.kicker) { max-width: 740px; margin-top: 22px; color: var(--color-text-high); font-size: 1.05rem; }
.page-masthead .tags { margin-top: 28px; }
.library-section { margin-top: 64px; }
.section-head { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 24px; }
.section-head h2 { margin-top: 10px; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; line-height: 1.35; }
.section-head > p { max-width: 470px; color: var(--color-text-high); font-size: 0.93rem; }
.tags, .hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; padding: 5px 10px; border: var(--border-card); border-radius: 999px; color: var(--color-text-high); font-size: 0.74rem; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.catalog-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.search-field { display: flex; align-items: center; gap: 10px; width: min(100%, 480px); padding: 10px 16px; border: var(--border-card); border-radius: var(--radius); background: var(--color-card-prime); }
.search-field > span[aria-hidden] { font: 1.5rem var(--font-code); color: var(--color-text-high); }
.search-field input { min-width: 0; width: 100%; padding: 0; border: 0; outline: none; color: #fff; background: transparent; font-size: 0.86rem; color-scheme: dark; }
.search-field:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.search-field input::placeholder { color: var(--color-text-high); }
.result-count { color: var(--color-text-high); font-size: 0.8rem; }
.empty-state { margin-top: 20px; padding: 36px 24px; border: var(--border-card); border-radius: var(--radius-panel); color: var(--color-text-high); text-align: center; }
@media (max-width: 799px) {
  html { scroll-padding-top: 94px; }
  .site-header, .main { width: calc(100% - 28px); }

  .main { padding-top: 94px; }
  .brand-link { padding-inline: 4px; font-size: 0.85rem; }
  .section-head { display: block; }
  .section-head > p { margin-top: 14px; }
  .library-section { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Library-specific compatibility; component rules live in rovan/components.css. */
.site-header figure, .site-footer figure { margin: 0; }
.site-header .brand-link { margin: 0; text-decoration: none; }
.site-footer { --footer-content-width: min(var(--container), calc(100% - 40px)); }
.site-footer > section > .footer-nav > .footer-link-group:nth-child(2) { margin-left: 0; }
.site-footer .footer-copyright { font-size: 0.72rem; }
.site-header:not(.is-enhanced) > section > .desk { flex-wrap: wrap; }
.site-header:not(.is-enhanced) > section > .desk > nav { display: flex; flex-wrap: wrap; }
@media (width < 800px) {
  .site-header.is-enhanced > section > .desk > .nav-action > .menu-toggle { display: flex; }
  .site-header:not(.is-enhanced) > section > .desk > nav { order: 3; width: 100%; border-radius: var(--radius); }
  body:has(.site-header:not(.is-enhanced)) .main { padding-top: 150px; }
}
@media (width < 380px) { .site-header > section > .desk > .brand-link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }