@property --glow { syntax: '<color>'; initial-value: #f4cbab; inherits: false; }
@property --edge { syntax: '<color>'; initial-value: #b28395; inherits: false; }

html, body { height: 100%; }
body { font-family: 'Vollkorn', Georgia, serif; }
button { color: inherit; font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid #243040; outline-offset: 5px; }
header { position: relative; z-index: 5; }
.nav-trigger { padding: 0; background: transparent; }
.reader-settings { position: fixed; right: 5%; top: 20px; z-index: 5; display: flex; align-items: center; gap: 12px; }
.language-switch, .sound-switch { position: relative; width: 54px; height: 54px; flex: 0 0 54px; border: 2px solid #243040; background: transparent; border-radius: 50%; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px; font-family: 'Vollkorn',Georgia,serif; font-size: 1.15rem; line-height: 1; }
.language-switch > span:first-child { font-size: 22px; line-height: 1; }
.language-code { font-family: inherit; line-height: 1; }
.sound-switch img { width: 23px; height: 23px; }
.sound-switch[aria-pressed='false'] img { opacity: .5; }
.sound-switch[aria-pressed='true'] { background: rgba(255,255,255,.35); }
main.container { padding: 100px 8%; height: 100svh; height: 100vh; --glow: #f4cbab; --edge: #b28395; background: radial-gradient(ellipse at center, var(--glow) 0%,var(--edge) 100%); background-attachment: fixed; animation: colour-journey 100s ease-in-out infinite; animation-delay: var(--colour-delay,0s); scrollbar-width: thin; }
@supports (height: 100svh) { main.container { height: 100svh; } }
main section { width: 100%; max-width: 550px; height: auto; min-height: calc(100vh - 200px); display: flex; align-items: center; perspective: 1000px; padding: 0; margin: 0 auto; }
main section + section { min-height: 100vh; padding: 80px 0; }
section article.bagatell { display: block; width: 100%; padding: 0 3em; overflow-wrap: break-word; }
.bagatell p, .bagatell h3 { color: #1f1610; text-shadow: none; opacity: 1; }
.bagatell p { margin: 0 0 1em; font-size: 2rem; }
.bagatell p:last-child { margin-bottom: 0; }
.bagatell h3 { font-size: 2.2rem; }
.bagatell footer { display: flex; gap: 12px; margin: 28px 0 0; }
.bagatell footer a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 54px; width: 54px; height: 54px; padding: 11px; border: 2px solid #243040; border-radius: 50%; }
.bagatell footer a img { width: 28px; height: 28px; }
.bagatell footer a img { opacity: 1; }
.bagatell img { max-width: 100%; height: auto; }
.bagatell iframe { width: 100%; max-width: 100%; aspect-ratio: 500 / 281; height: auto; border: 0; }
.shorttext { animation: bagatell_short 30s ease-in-out infinite alternate; }
.longtext { animation: bagatell_long 30s ease-in-out infinite alternate; }
.fading .bagatell { opacity: 0; filter: blur(10px); }
.bagatell { transition: opacity .35s ease, filter .5s ease; }
.missing-image { display: grid; align-content: center; min-height: 240px; padding: 24px; background: rgba(255,255,255,.18); border: 1px solid rgba(36,48,64,.25); font-size: 1.6rem; text-align: center; }
.navigation-is-open .reader-settings { opacity: 0; pointer-events: none; }
.nav { z-index: 1; }
.nav .primary-nav li { margin: .65em 0; }
.nav .primary-nav a { opacity: .75; }
.nav .primary-nav a:hover, .nav .primary-nav a.selected { opacity: 1; }
.nav .content p { font-size: 1.7rem; margin: 0 0 1.4em; }
.restoration-credit { margin-top: 40px; font-size: 1.4rem; }
.pager-section { justify-content: center; gap: 36px; min-height: 180px !important; padding: 48px 0 !important; }
.pager { text-align: center; }
.pager a { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-decoration: none; width: auto; height: auto; padding: 0; background: transparent; font-family: inherit; font-size: 1.5rem; }
.pager-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; padding: 11px; border: 2px solid #243040; border-radius: 50%; }
.pager img { width: 28px; height: 28px; }
.pager.newer img { transform: rotate(180deg); }
.page-label { font-family: 'Unica One',sans-serif; text-transform: uppercase; font-size: 1.3rem; opacity: .6; letter-spacing: .08em; }
.source-list { padding-left: 0; font-size: 1.5rem; }
.source-list li { margin: 0 0 1em; }
.recovery-note p { font-size: 1.7rem; }
.recovery-note h3 { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; border: 0; }
.no-script { position: fixed; z-index: 9; bottom: 0; padding: 15px; background: #fad8ba; width: 100%; }
@keyframes colour-journey {
  0%,100% { --glow: #f4cbab; --edge: #b28395; }
  20% { --glow: #fed7de; --edge: #e5a7b0; }
  40% { --glow: #e9c392; --edge: #e8468e; }
  60% { --glow: #e5e9b9; --edge: #28b3db; }
  80% { --glow: #ced4e1; --edge: #626987; }
}
@media (min-width: 1170px) {
  .reader-settings { top: 40px; }
  .nav .half-block:first-child { width: 44%; }
  .nav .half-block:last-child { width: 56%; padding-left: 45px; }
  .nav .navigation-wrapper { padding-top: 62px; }
  .nav h2 { margin-bottom: 4em; }
}
@media (max-width: 768px) {
  .reader-settings { right: 12px; top: 12px; gap: 8px; }
  .nav-trigger { left: 12px !important; top: 12px !important; width: 44px !important; height: 44px !important; }
  .language-switch, .sound-switch { width: 44px; height: 44px; flex-basis: 44px; padding: 2px; gap: 1px; font-size: 1rem; }
  .language-switch > span:first-child { font-size: 18px; }
  .sound-switch img { width: 20px; height: 20px; }
  main.container { padding: 78px 0 55px; }
  main section { min-height: calc(100svh - 133px); padding: 0 !important; }
  main section + section { min-height: 100svh; padding: 70px 0 !important; }
  section article.bagatell { padding: 0 35px; }
  .bagatell p { font-size: 1.9rem; line-height: 1.6; }
  .bagatell footer { margin-top: 25px; }
  .nav .navigation-wrapper { padding: 65px 26px 50px 70px !important; }
  .nav .primary-nav { margin-top: 40px; margin-bottom: 45px; }
  .nav .primary-nav li { font-size: 2.2rem; }
  .nav .half-block + .half-block { padding-top: 8px; }
  .nav .content p { font-size: 1.6rem; }
  .nav h2 { margin-bottom: 3.5em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  main.container { --glow: #f4cbab; --edge: #b28395; }
}
@media print {
  body, main.container { height: auto; overflow: visible; background: white; color: black; }
  header, #nav, footer, .pager-section { display: none !important; }
  main.container { padding: 0; }
  main section { min-height: 0; height: auto; padding: 0; }
  .bagatell { animation: none; transform: none; }
}