/* Simple catalogue pages; accepted reader and homepage styles stay independent. */
:root { color-scheme:light; --c-bg:#f9f5ec; --c-text:#2c302e; --c-muted:#65675f; --c-line:#ded8cb; --c-accent:#3b4948; --c-focus:#2963ae; --c-size:18px; scrollbar-gutter:stable; }
@media(min-width:900px) { :root { --c-size:20px; } }
.catalog-page,.catalog-page * { box-sizing:border-box; }
.catalog-page { margin:0; padding-bottom:48px; min-height:100vh; background:var(--c-bg); color:var(--c-text); font:var(--c-size)/1.65 Georgia,'Times New Roman',serif; }
.catalog-page a { color:inherit; text-underline-offset:.22em; }
.catalog-page :focus-visible { outline:3px solid var(--c-focus); outline-offset:4px; }
.catalog-header,.catalog-content { position:relative; z-index:1; width:min(calc(100% - 48px),66ch); margin:0 auto; }
.catalog-header { display:flex; align-items:center; min-height:76px; padding:12px 0; margin-bottom:26px; }
.catalog-brand { display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; font:20px/1.5 Georgia,serif; white-space:nowrap; }

.catalog-skip { position:fixed; top:-100px; left:16px; z-index:5; background:var(--c-bg); padding:12px; }.catalog-skip:focus { top:12px; }
.breadcrumbs { width:100%; margin:0; color:var(--c-muted); font:14px/1.5 system-ui,sans-serif; }
.breadcrumbs ol { display:flex; align-items:center; flex-wrap:wrap; gap:0 10px; list-style:none; padding:0; margin:0; }
.breadcrumbs li { display:flex; align-items:center; min-width:0; max-width:100%; min-height:44px; overflow-wrap:anywhere; }
.breadcrumbs li + li::before { content:'/'; margin-right:10px; color:var(--c-muted); }
.breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; }
.catalog-content h1 { font:normal clamp(36px,4vw,48px)/1.2 Georgia,serif; margin:0 0 22px; text-wrap:balance; overflow-wrap:anywhere; }
.catalog-content h2 { font:normal clamp(27px,3vw,32px)/1.3 Georgia,serif; margin:0 0 16px; text-wrap:balance; overflow-wrap:anywhere; }
.catalog-content h3 { font:normal 26px/1.3 Georgia,serif; margin:6px 0 12px; overflow-wrap:anywhere; }
.catalog-content p { margin:0 0 22px; overflow-wrap:break-word; }
.book-series { color:var(--c-muted); font:14px/1.6 system-ui,sans-serif; }
.book-series .volume { display:block; margin-top:5px; }
.catalog-illustration { margin:26px 0; }
.catalog-illustration img { display:block; width:100%; height:auto; background:var(--c-bg); color:var(--c-muted); font:14px/1.6 system-ui,sans-serif; }
.catalog-description { line-height:1.7; }
.start-reading { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:48px; padding:12px 22px; margin:4px 0 32px; border-radius:6px; background:var(--c-accent); color:var(--c-bg)!important; text-decoration:none; font:16px/1.5 system-ui,sans-serif; }
.start-reading:hover { background:#2c3a39; }
.book-contents { margin-top:8px; }
.available-count,.section-label,.volume-label { color:var(--c-muted); font:13px/1.5 system-ui,sans-serif; }
.chapter-list,.volume-list,.world-list { list-style:none; padding:0; margin:0; }
.chapter-list a { display:flex; align-items:baseline; gap:16px; min-height:48px; padding:12px 0; text-decoration:none; border-top:1px solid var(--c-line); }
.chapter-number { color:var(--c-muted); min-width:1.5em; font:14px/1.5 system-ui,sans-serif; }
.chapter-list a:hover,.world-list a:hover { text-decoration:underline; }
.world-series { margin-top:44px; }
.world-series .section-label { margin-bottom:8px; }
.volume-list > li { border-top:1px solid var(--c-line); padding-top:24px; margin-top:24px; }
.volume-list .volume-label { margin-bottom:6px; }
.volume-list h3 a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.volume-list p:not(.volume-label) { font-size:.9em; }
.book-link { display:inline-flex; align-items:center; min-height:44px; gap:14px; font:14px/1.5 system-ui,sans-serif; }
.world-list a { display:flex; justify-content:space-between; gap:18px; align-items:center; min-height:60px; padding:12px 0; text-decoration:none; border-top:1px solid var(--c-line); overflow-wrap:anywhere; }
@media(min-width:900px) {
  .catalog-page::before { content:''; position:fixed; inset:0; pointer-events:none; background:url('/images/brand/dubravnik-pattern-outline-light-tile-varied-acorns.png') repeat 0 0 / 150px 150px; opacity:.045; }
  .catalog-page::after { content:''; position:fixed; inset:0; width:min(100%,calc(66ch + 64px)); margin:0 auto; background:var(--c-bg); pointer-events:none; }
}
@media(max-width:899px) { .catalog-page::before,.catalog-page::after { content:none; display:none; background-image:none; }.catalog-header { min-height:66px; } }
@media(max-width:539px) {
  .catalog-header,.catalog-content { width:calc(100% - 40px); }
  .catalog-header { padding:8px 0; margin-bottom:18px; }
  .catalog-brand { font-size:17px; gap:6px; }
  .breadcrumbs { font-size:13px; }
  .catalog-illustration { margin:22px 0; }.start-reading { width:100%; }
}

/* Fullscreen worlds index. Overrides are isolated from other catalogue pages. */
.worlds-page { padding:0; min-height:100vh; background:#17291f; scrollbar-gutter:auto; }
.worlds-page::before,.worlds-page::after { content:none; display:none; background-image:none; }
.worlds-page .catalog-content { width:100%; margin:0; }
.worlds-page .worlds-heading {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
/* Navigation geometry/typography mirror theme.css; artwork and global styles stay there. */
.worlds-page .worlds-header {
  --dv-header-height:88px; --dv-copy-edge:13.8%; --dv-light:#fff8e9; --dv-forest:#16251b;
  position:absolute; inset:0 0 auto; z-index:3; padding-top:env(safe-area-inset-top); pointer-events:none;
  color:var(--dv-light); font:normal 1rem/1.5 Georgia,'Times New Roman',serif; -webkit-font-smoothing:antialiased;
}
.worlds-page .header-inner {
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:var(--dv-header-height); width:auto; margin-inline:max(var(--dv-copy-edge),env(safe-area-inset-left)) max(var(--dv-copy-edge),env(safe-area-inset-right)); flex-wrap:wrap;
}
.worlds-page .site-name {
  display:inline-flex; align-items:center; min-height:44px; color:var(--dv-light);
  font-size:clamp(1.35rem,2vw,2rem); letter-spacing:.17em; text-transform:uppercase; text-decoration:none; text-underline-offset:.25em;
  gap:12px; flex-wrap:wrap; max-width:100%;
}
.worlds-page .project-link { display:inline-flex; align-items:center; min-height:44px; padding-inline:.25rem; color:var(--dv-light); font-size:1.2rem; text-decoration-thickness:1px; }
.worlds-page .header-inner a { text-shadow:0 1px 2px #0b160d,0 1px 5px #0b160d,0 0 14px #0b160d; }
.worlds-page .site-nav { display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.worlds-page .site-nav a { text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:.2em; }
.worlds-page .site-action.nav-coming {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; max-width:100%;
  padding:0 4px; border:0; border-radius:3px; background:transparent; color:var(--dv-light);
  font:inherit; font-size:1.2rem; line-height:1.3; text-align:center;
}
.worlds-page .worlds-header a { pointer-events:auto; }
.worlds-page .worlds-header a:focus-visible,.worlds-page .catalog-skip:focus-visible {
  outline:3px solid #fff7df; outline-offset:3px; box-shadow:0 0 0 7px #20362b; border-radius:3px;
}
@media(max-width:991.98px),(min-width:992px) and (max-aspect-ratio:1 / 1) {
  .worlds-page .worlds-header { --dv-header-height:76px; --dv-copy-edge:8%; }
}
@media(max-width:599.98px) {
  .worlds-page .worlds-header { --dv-header-height:112px; --dv-copy-edge:1.75rem; }
  .worlds-page .header-inner { flex-direction:column; align-items:stretch; gap:0; padding-block:6px; }
  .worlds-page .site-name { align-self:flex-start; font-size:1.12rem; letter-spacing:.1em; gap:10px; }
  .worlds-page .site-nav { justify-content:space-between; flex-wrap:wrap; gap:0 6px; }
  .worlds-page .site-nav .project-link,.worlds-page .site-action.nav-coming { font-size:16px; }
  .worlds-page .site-action.nav-coming { padding-inline:0; gap:5px; }
}
@media(max-width:299.98px) { .worlds-page .worlds-header { --dv-copy-edge:1rem; } }
.worlds-page .catalog-skip { color:#20362b; }
.worlds-page .catalog-content:focus { outline:none; }
.worlds-page .world-panorama {
  position:relative; isolation:isolate; display:grid; place-items:center; min-height:100vh;
  padding:max(10rem,calc(env(safe-area-inset-top) + 8.75rem),calc(env(safe-area-inset-bottom) + 8.75rem)) max(20px,env(safe-area-inset-left),env(safe-area-inset-right));
  text-decoration:none;
}
@supports(min-height:100svh) { .worlds-page,.worlds-page .world-panorama { min-height:100svh; } }
@supports(min-height:100dvh) { .worlds-page,.worlds-page .world-panorama { min-height:100dvh; } }
.worlds-page .world-panorama-scene { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.worlds-page .world-panorama picture,.worlds-page .world-panorama img { display:block; width:100%; height:100%; }
.worlds-page .world-panorama img { object-fit:cover; object-position:50% 50%; color:transparent; }
.worlds-page .world-panorama-scene::after {
  content:''; position:absolute; inset:0 0 auto; height:180px; pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,18,13,.65),rgba(8,18,13,.28) 48%,transparent);
}
.worlds-page .world-panorama-button {
  position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  width:336px; max-width:100%; min-width:0; min-height:100px; padding:18px 28px; border-radius:6px;
  border:1px solid rgba(189,153,86,.72); background:linear-gradient(155deg,rgba(12,25,22,.94),rgba(28,43,34,.92)); color:#f3e8d0;
  box-shadow:0 10px 30px rgba(4,12,8,.34),0 0 24px rgba(208,157,72,.17),inset 0 0 18px rgba(223,193,139,.045);
  font:normal 1.625rem/1.2 Georgia,'Times New Roman',serif; text-align:center; overflow-wrap:anywhere;
  transition:border-color 200ms,box-shadow 200ms;
}
.worlds-page .world-panorama-button::before {
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:rgba(223,193,139,.055); opacity:0; transition:opacity 200ms;
}
.worlds-page .world-panorama-label { position:relative; min-width:0; max-width:100%; }
.worlds-page .world-panorama-action { position:relative; max-width:100%; color:#dfc18b; font-size:.9375rem; line-height:1.2; }
.worlds-page .world-panorama-arrow { display:inline-block; margin-left:4px; }
.worlds-page .world-panorama-sheen { position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit; pointer-events:none; }
.worlds-page .world-panorama-sheen::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 5%,#ffe3a4 50%,transparent 95%);
  animation:worlds-button-sheen 2s ease-in-out 1s 1 both;
}
@keyframes worlds-button-sheen {
  0% { transform:translateX(-120%); opacity:0; }
  25% { opacity:.12; }
  75% { opacity:.12; }
  100% { transform:translateX(120%); opacity:0; }
}
@media(hover:hover) {
  .worlds-page .world-panorama-button:hover {
    border-color:rgba(219,181,111,.94);
    box-shadow:0 10px 30px rgba(4,12,8,.38),0 0 30px rgba(220,170,84,.29),inset 0 0 18px rgba(223,193,139,.075);
  }
  .worlds-page .world-panorama-button:hover::before { opacity:1; }
}
.worlds-page .world-panorama-button:active::before { opacity:0; }
.worlds-page .world-panorama:focus-visible { outline:none; }
.worlds-page .world-panorama:focus-visible .world-panorama-button { outline:3px solid #fff7df; outline-offset:3px; box-shadow:0 0 0 9px #20362b,0 8px 28px rgba(8,18,13,.24); }
@media(max-width:899px) and (orientation:portrait) { .worlds-page .world-panorama img { object-position:75% 50%; } }
@media(max-width:539px) {
  .worlds-page .world-panorama-button { padding:18px 24px; font-size:1.4375rem; }
  .worlds-page .world-panorama-action { font-size:.875rem; }
}
@media(prefers-reduced-motion:reduce) {
  .worlds-page .world-panorama-button,.worlds-page .world-panorama-button::before { transition:none; }
  .worlds-page .world-panorama-sheen::before { animation:none; }
}