/* ------------------------------------------------------------------
   WorldJourney: the immersive Home (Babylon, Alexandria, and every other
   theme as data-world="engraving", see the end of this file).
   A fixed stage behind the page changes its mood per chapter; the
   chapters sit on a 12-column grid over it, edge to edge, without card
   boxes. journey.js adds the motion; without it everything is in place.
   Nothing a pointer aims at moves: entrances happen once, before use,
   and hover feedback is light and colour.
   ------------------------------------------------------------------ */

.journey {
    --j-ink: var(--color-text-primary);
    --j-soft: var(--color-text-secondary);
    --j-muted: var(--color-text-muted);
    --j-gold: var(--color-gold-accent);
    --j-accent: #3fb6c8;
    --j-accent-deep: #1d6f86;
    --j-line: rgba(220, 183, 94, 0.26);
    --j-tip-bg: rgba(9, 22, 25, 0.95);
    --j-dust: 220, 183, 94;
    --j-ground: var(--color-bg-paper);
    --j-serif: "Cormorant Garamond", "Literata", Georgia, serif;
    --j-gutter: clamp(20px, 5vw, 96px);
    position: relative;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    /* 100vw counts the scrollbar; nothing may widen the page. */
    overflow-x: clip;
    color: var(--j-ink);
}

.journey[data-world="alexandria"] {
    --j-accent: #2c56a0;
    --j-accent-deep: #1b3a73;
    --j-line: rgba(27, 58, 115, 0.2);
    --j-tip-bg: rgba(250, 245, 233, 0.97);
    --j-dust: 140, 104, 40;
}

.journey :focus-visible {
    outline: 2px solid var(--j-gold);
    outline-offset: 3px;
    border-radius: 6px;
}

.journey h2 {
    font-family: var(--font-family-display);
    font-size: clamp(2.1rem, 4.4vw, 3.8rem);
    font-weight: 400;
    line-height: 1.04;
    text-wrap: balance;
    margin: 0;
    padding: 0;
    border: 0;
}

.journey p {
    margin: 0;
}

.journey-wrap {
    width: min(1680px, 100%);
    margin-inline: auto;
    padding-inline: var(--j-gutter);
}

.journey-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
}

.journey-eyebrow {
    font: 600 12px/1.25 var(--font-family-ui);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--j-gold);
}

.journey-mark {
    display: flex;
    align-items: center;
    gap: 14px;
}

.journey-mark b {
    font: italic 500 1.5rem/1 var(--j-serif);
    color: var(--j-gold);
}

.journey-mark span {
    width: 56px;
    height: 1px;
    background: var(--j-line);
}

.journey-mark--center {
    justify-content: center;
}

.journey-mark--center span {
    width: 80px;
}

.journey-lede {
    max-width: 46ch;
    font: italic 500 1.28rem/1.45 var(--j-serif);
    color: var(--j-soft);
}

.journey-body {
    max-width: 42ch;
    font-size: 1.1rem;
    color: var(--j-soft);
}

.journey-hint {
    min-height: 1.5em;
    font: italic 500 1.12rem/1.4 var(--j-serif);
    color: var(--j-gold);
}

.journey-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    justify-self: start;
    padding: 12px 14px 12px 24px;
    border-radius: 999px;
    background: var(--j-gold);
    color: var(--j-ground);
    font: 700 1rem/1 var(--font-family-ui);
    text-decoration: none;
    box-shadow: 0 10px 34px color-mix(in srgb, var(--j-gold) 30%, transparent);
    transition: filter 0.25s, box-shadow 0.25s;
}

.journey-cta small {
    font-weight: 500;
    opacity: 0.75;
}

.journey-cta i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--j-ground) 18%, transparent);
    font-style: normal;
}

.journey-cta:hover {
    filter: brightness(1.08);
    box-shadow: 0 12px 46px color-mix(in srgb, var(--j-gold) 48%, transparent);
}

.journey-link {
    color: var(--j-gold);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    justify-self: start;
}

/* Decorative objects: the content box of a chapter never holds them. */
.journey-object {
    position: absolute;
    pointer-events: none;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
}

.journey[data-world="alexandria"] .journey-object {
    filter: drop-shadow(0 28px 32px rgba(60, 40, 10, 0.28));
}

/* Home's hero gets more room in front of the journey. */
html:is([data-theme="babylon"], [data-theme="alexandria"]) .home-hero.home-hero--journey {
    height: clamp(420px, 68vh, 680px);
}

/* It keeps that height when the page scrolls on: shrinking it there
   pulled the whole journey up mid-scroll (user report: a jolt between
   the greeting and chapter II). */
html:is([data-theme="babylon"], [data-theme="alexandria"]) .home-hero.home-hero--journey.is-compact {
    height: clamp(420px, 68vh, 680px);
}

/* ---------- Stage ---------- */
.journey-stage {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.journey-amb {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.journey-amb.is-on {
    opacity: 1;
}

.journey-stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.journey[data-world="babylon"] [data-mood="reading"] { background: radial-gradient(55% 60% at 22% 55%, rgba(63, 182, 200, 0.13), transparent 70%), radial-gradient(40% 40% at 85% 20%, rgba(220, 183, 94, 0.08), transparent 70%); }
.journey[data-world="babylon"] [data-mood="goal"] { background: radial-gradient(42% 52% at 72% 52%, rgba(220, 183, 94, 0.17), transparent 70%); }
.journey[data-world="babylon"] [data-mood="sky"] { background: radial-gradient(80% 60% at 50% 45%, rgba(29, 111, 134, 0.22), transparent 75%), #071114; }
.journey[data-world="babylon"] [data-mood="sky"]::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background-image:
        radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 32% 78%, #cfe, transparent),
        radial-gradient(1.5px 1.5px at 58% 14%, #fff, transparent), radial-gradient(1px 1px at 76% 62%, #fff, transparent),
        radial-gradient(1px 1px at 88% 30%, #dfe, transparent), radial-gradient(1px 1px at 22% 50%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 66% 88%, #fff, transparent), radial-gradient(1px 1px at 46% 40%, #fff, transparent);
    background-size: 520px 520px;
}
.journey[data-world="babylon"] [data-mood="library"] { background: radial-gradient(50% 55% at 80% 30%, rgba(122, 86, 150, 0.16), transparent 70%), radial-gradient(45% 45% at 15% 80%, rgba(70, 130, 90, 0.12), transparent 70%); }
.journey[data-world="babylon"] [data-mood="world"] { background: radial-gradient(70% 60% at 50% 55%, rgba(196, 120, 64, 0.16), transparent 75%); }
.journey[data-world="babylon"] [data-mood="finale"] { background: radial-gradient(60% 50% at 50% 45%, rgba(220, 183, 94, 0.12), transparent 75%); }
.journey[data-world="alexandria"] [data-mood="reading"] { background: radial-gradient(45% 50% at 26% 62%, rgba(232, 160, 60, 0.22), transparent 70%); }
.journey[data-world="alexandria"] [data-mood="goal"] { background: radial-gradient(45% 55% at 72% 52%, rgba(44, 86, 160, 0.12), transparent 70%); }
.journey[data-world="alexandria"] [data-mood="sky"] { background: radial-gradient(70% 60% at 50% 50%, rgba(44, 86, 160, 0.12), transparent 75%), #ece0c6; }
.journey[data-world="alexandria"] [data-mood="sky"]::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: radial-gradient(circle at center, rgba(27, 58, 115, 0.18) 1px, transparent 1.5px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent);
    mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent);
}
.journey[data-world="alexandria"] [data-mood="library"] { background: radial-gradient(50% 55% at 82% 30%, rgba(156, 118, 34, 0.14), transparent 70%); }
.journey[data-world="alexandria"] [data-mood="world"] { background: radial-gradient(70% 60% at 50% 55%, rgba(196, 140, 64, 0.16), transparent 75%); }
.journey[data-world="alexandria"] [data-mood="finale"] { background: radial-gradient(60% 50% at 50% 45%, rgba(44, 86, 160, 0.1), transparent 75%); }

/* ---------- Info card (stars, goal fields) ---------- */
.journey-tip {
    position: fixed;
    z-index: 60;
    left: 0;
    top: 0;
    min-width: 200px;
    max-width: 270px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--j-tip-bg);
    border: 1px solid var(--j-line);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    color: var(--j-ink);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s, transform 0.18s;
}

.journey-tip.is-on {
    opacity: 1;
    transform: none;
}

.journey-tip b {
    display: block;
    font: 400 1.02rem/1.25 var(--font-family-display);
}

.journey-tip strong {
    display: block;
    margin-top: 6px;
    font: 400 1.35rem/1.15 var(--font-family-display);
    color: var(--j-accent);
}

.journey-tip span {
    display: block;
    margin-top: 4px;
    color: var(--j-soft);
    font-size: 0.93rem;
}

.journey-tip em {
    display: block;
    margin-top: 6px;
    color: var(--j-gold);
    font: italic 500 1rem/1.3 var(--j-serif);
}

/* ---------- Chapters ---------- */
.journey-chapter {
    position: relative;
    padding-block: clamp(56px, 10vh, 112px);
}

/* II · Weiterlesen */
.journey-reading .journey-grid {
    align-items: center;
    row-gap: 40px;
}

.journey-book-col {
    grid-column: 1 / span 5;
    position: relative;
    display: grid;
    place-items: center;
    min-height: 500px;
    perspective: 2000px;
}

.journey-copy {
    grid-column: 7 / span 6;
    display: grid;
    gap: 18px;
}

.journey-pool {
    position: absolute;
    left: 50%;
    bottom: 6%;
    width: 120%;
    height: 34%;
    translate: -50% 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(63, 182, 200, 0.22), transparent);
}

.journey[data-world="alexandria"] .journey-pool {
    background: radial-gradient(closest-side, rgba(232, 160, 60, 0.28), transparent);
}

.journey-book-shadow {
    position: absolute;
    left: 50%;
    bottom: calc(50% - min(270px, 60vw) * 0.75 - 22px);
    width: min(300px, 66vw);
    height: 46px;
    translate: -46% 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
    filter: blur(4px);
    pointer-events: none;
    z-index: 1;
}

.journey[data-world="alexandria"] .journey-book-shadow {
    background: radial-gradient(closest-side, rgba(60, 40, 10, 0.4), transparent);
}

.journey-object--tablet {
    width: min(200px, 15vw);
    left: 6%;
    bottom: 13%;
    rotate: -9deg;
    z-index: 1;
}

.journey-object--lamp {
    width: min(150px, 12vw);
    left: 8%;
    bottom: 14%;
    rotate: -6deg;
    z-index: 1;
}

.journey-lamp-glow {
    position: absolute;
    left: 0;
    bottom: 12%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 186, 90, 0.45), rgba(255, 186, 90, 0));
    pointer-events: none;
    animation: journey-flicker 3.2s ease-in-out infinite;
}

@keyframes journey-flicker {
    0%, 100% { opacity: 0.85; }
    40% { opacity: 1; }
    70% { opacity: 0.75; }
}

/* The book: a link whose box never moves; the tilt turns its faces only. */
.journey-book {
    --tilt-y: 32deg;
    --tilt-x: 3deg;
    /* Depth of a 300-page novel: about a fifth of the cover's width. */
    --d: 54px;
    position: relative;
    z-index: 2;
    display: block;
    width: min(270px, 60vw);
    aspect-ratio: 2 / 3;
    transform-style: preserve-3d;
    transform: rotateY(var(--tilt-y)) rotateX(var(--tilt-x));
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    text-decoration: none;
}

.journey-book > span {
    position: absolute;
    inset: 0;
    border-radius: 3px 8px 8px 3px;
}

.journey-book-front {
    transform: translateZ(calc(var(--d) / 2));
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    gap: 10px;
    /* Title and author sit inside the gilt corners. */
    padding: 17% 17% 15%;
    overflow: hidden;
    background: url("../images/themes/books/leather_grain.webp") 0 0 / 220px, radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.14), transparent 46%), linear-gradient(160deg, #3b2a17, #160f08 70%);
    background-blend-mode: soft-light, normal, normal;
    box-shadow: inset 6px 0 10px rgba(0, 0, 0, 0.45), 0 40px 70px rgba(0, 0, 0, 0.5);
}

.journey[data-world="alexandria"] .journey-book-front {
    background: url("../images/themes/books/linen_grain.webp") 0 0 / 180px, radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.18), transparent 46%), linear-gradient(160deg, #2a4a8c, #0f1f45 70%);
    background-blend-mode: soft-light, normal, normal;
    box-shadow: inset 6px 0 10px rgba(0, 0, 0, 0.3), 0 40px 60px rgba(24, 38, 74, 0.3);
}

.journey-book-front img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.journey-book-title,
.journey-book-author {
    position: relative;
    z-index: 2;
}

.journey-book-title {
    grid-row: 3;
    font: 400 1.35rem/1.15 var(--font-family-display);
    color: #f1d995;
    text-align: center;
    overflow-wrap: anywhere;
}

.journey-book-author {
    font: italic 500 1rem/1.2 var(--j-serif);
    color: #e9dcb9;
    text-align: center;
}

/* Gold tooling on covers without a picture: public-domain ornaments
   (books/*.svg) used as masks over a gold gradient, so they read as
   stamped gilt and take any size. Corner piece: a bottom-left corner,
   mirrored for the other three. */
.journey-tooling {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.journey-corner,
.journey-medallion {
    position: absolute;
    background: linear-gradient(135deg, #f6e3a1, #c79a3c 45%, #f3d98a 60%, #a8792a);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45));
    opacity: 0.88;
}

.journey-corner {
    width: 19%;
    aspect-ratio: 202 / 176;
    -webkit-mask-image: url("../images/themes/books/corner.svg");
    mask-image: url("../images/themes/books/corner.svg");
}

.journey-corner--bl { left: 9%; bottom: 3.5%; }
.journey-corner--tl { left: 9%; top: 3.5%; scale: 1 -1; }
.journey-corner--br { right: 3.5%; bottom: 3.5%; scale: -1 1; }
.journey-corner--tr { right: 3.5%; top: 3.5%; scale: -1 -1; }

.journey-medallion {
    left: 50%;
    top: 46%;
    translate: -50% -50%;
}

/* Library volumes: title on top, so the medallion sits lower. */
.journey-tome-generated .journey-medallion {
    top: 66%;
}

.journey-medallion--rosette {
    width: 42%;
    aspect-ratio: 1;
    -webkit-mask-image: url("../images/themes/books/rosette.svg");
    mask-image: url("../images/themes/books/rosette.svg");
}

.journey-medallion--fleuron {
    width: 52%;
    aspect-ratio: 120 / 69;
    -webkit-mask-image: url("../images/themes/books/fleuron.svg");
    mask-image: url("../images/themes/books/fleuron.svg");
}

/* Spine, page block and top edge turn about their own centre at the
   cover's edges, so each spans exactly the book's depth (--d). */
/* "> span" in the selectors: .journey-book > span sets inset: 0 and
   would otherwise put both faces at the cover's left edge. */
.journey-book > .journey-book-spine {
    left: calc(var(--d) / -2);
    width: var(--d) !important;
    right: auto !important;
    border-radius: 10px / 6px !important;
    display: grid;
    place-items: center;
    transform: rotateY(-90deg);
    background:
        repeating-linear-gradient(180deg, transparent 0 9%, rgba(232, 201, 122, 0.65) 9% 10%, transparent 10% 11.5%, rgba(232, 201, 122, 0.65) 11.5% 12.5%, transparent 12.5% 86%, rgba(232, 201, 122, 0.65) 86% 87%, transparent 87% 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0.04) 55%, rgba(0, 0, 0, 0.6)),
        url("../images/themes/books/leather_grain.webp") 0 0 / 200px,
        #2c1f10;
    background-blend-mode: normal, normal, soft-light, normal;
}

.journey-book-spine span,
.journey-tome-spine span {
    max-height: 68%;
    overflow: hidden;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font: 400 0.9rem/1.1 var(--font-family-display);
    color: #f1d995;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.journey[data-world="alexandria"] .journey-book-spine {
    background:
        repeating-linear-gradient(180deg, transparent 0 9%, rgba(232, 201, 122, 0.65) 9% 10%, transparent 10% 11.5%, rgba(232, 201, 122, 0.65) 11.5% 12.5%, transparent 12.5% 86%, rgba(232, 201, 122, 0.65) 86% 87%, transparent 87% 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0.04) 55%, rgba(0, 0, 0, 0.6)),
        url("../images/themes/books/linen_grain.webp") 0 0 / 160px,
        #1c3466;
    background-blend-mode: normal, normal, soft-light, normal;
}

.journey-book > .journey-book-pages {
    left: calc(100% - var(--d) / 2 - 3px);
    top: 4px !important;
    bottom: 4px !important;
    width: calc(var(--d) - 4px) !important;
    right: auto !important;
    border-radius: 2px !important;
    transform: rotateY(90deg);
    background: repeating-linear-gradient(90deg, #f3ead2 0 1.5px, #d9cba6 1.5px 2.5px);
    box-shadow: inset 0 0 6px rgba(80, 60, 20, 0.35);
}

.journey-book-back {
    transform: translateZ(calc(var(--d) / -2));
    background: #120c06;
}

.journey-book-top {
    top: calc(var(--d) / -2 + 3px) !important;
    bottom: auto !important;
    left: 2px !important;
    right: 5px !important;
    height: calc(var(--d) - 4px);
    border-radius: 2px !important;
    transform: rotateX(90deg);
    background: repeating-linear-gradient(0deg, #f3ead2 0 1.5px, #d9cba6 1.5px 2.5px);
    box-shadow: inset 0 0 8px rgba(80, 60, 20, 0.4);
}

/* The cover: a hinge groove along the spine, a gold-tooled frame and a
   soft sheen, so it reads as a bound volume, not a flat card. */
.journey-book-front::before,
.journey-tome-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.15) 3.5%, rgba(255, 255, 255, 0.16) 5%, rgba(0, 0, 0, 0.22) 6.5%, transparent 10%),
        linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
}

.journey-book-front::after,
.journey-tome-generated::after {
    content: "";
    position: absolute;
    inset: 9px 9px 9px 18px;
    z-index: 1;
    pointer-events: none;
    border: 1px solid rgba(232, 201, 122, 0.45);
    border-radius: 2px;
    box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px rgba(232, 201, 122, 0.2);
}

.journey-book-front:has(img)::after {
    display: none;
}

/* The hinge and sheen stay over a cover picture too. */
.journey-book-front:has(img)::before {
    z-index: 4;
}

/* The cover lies over the tooled front and fades in when it arrives. */
.journey-book-front > .journey-book-cover {
    z-index: 3;
    animation: journey-cover-in 0.6s ease both;
}

@keyframes journey-cover-in {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .journey-book-front > .journey-book-cover {
        animation: none;
    }
}

.journey-meta {
    color: var(--j-soft);
    font-size: 1.08rem;
}

.journey-count {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-family: var(--font-family-display);
    line-height: 0.85;
}

.journey-count strong {
    font-weight: 400;
    font-size: clamp(4.2rem, 9.5vw, 8rem);
    color: var(--j-gold);
    font-variant-numeric: tabular-nums;
}

.journey-count span {
    font-size: clamp(1.25rem, 2.4vw, 1.9rem);
    color: var(--j-muted);
}

.journey-thread {
    position: relative;
    height: 2px;
    max-width: 520px;
    margin-top: 6px;
    background: var(--j-line);
}

.journey-thread i {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--pct);
    transform-origin: left;
    background: linear-gradient(90deg, var(--j-accent-deep), var(--j-accent), var(--j-gold));
    box-shadow: 0 0 14px var(--j-accent);
}

.journey-thread em {
    position: absolute;
    right: 0;
    top: -26px;
    font: italic 500 1rem/1 var(--j-serif);
    color: var(--j-soft);
}

.journey-also {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 22px;
    border-top: 1px solid var(--j-line);
}

.journey-also-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
}

.journey-sat {
    display: grid;
    grid-template-columns: 54px auto;
    gap: 14px;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.journey-sat svg {
    width: 54px;
    height: 54px;
}

.journey-sat circle {
    fill: none;
    stroke-width: 3;
}

.journey-sat .off {
    stroke: var(--j-line);
}

.journey-sat .on {
    stroke: var(--j-accent);
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: filter 0.3s;
}

.journey-sat:hover .on {
    filter: drop-shadow(0 0 5px var(--j-accent));
}

.journey-sat text {
    font: 700 12px var(--font-family-ui);
    fill: var(--j-ink);
}

.journey-sat b {
    display: block;
    font: 400 1.05rem/1.2 var(--font-family-display);
}

.journey-sat small {
    color: var(--j-muted);
}

/* III · Jahresziel: text left, dial right, the dial resting centred. */
.journey-goal .journey-grid {
    align-items: center;
    row-gap: 32px;
}

.journey-goal-copy {
    grid-column: 1 / span 5;
    display: grid;
    gap: 16px;
}

.journey-goal-number {
    display: flex;
    align-items: baseline;
    gap: 0.15em;
    font: 400 clamp(5rem, 12vw, 10rem)/0.8 var(--font-family-display);
    color: var(--j-gold);
}

.journey-goal-number small {
    font-size: 0.3em;
    color: var(--j-muted);
}

.journey-dial {
    grid-column: 7 / span 6;
    position: relative;
    width: min(560px, 100%);
    aspect-ratio: 1;
    justify-self: center;
}

.journey-dial svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.journey-dial-halo {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--j-gold) 16%, transparent), transparent);
    pointer-events: none;
}

.journey-dial-ticks line,
.journey-dial-ticks circle {
    stroke: var(--j-line);
    fill: none;
}

.journey-dial-ticks text {
    font: 400 15px var(--font-family-display);
    fill: var(--j-muted);
    text-anchor: middle;
    dominant-baseline: middle;
}

.journey[data-world="alexandria"] .journey-dial-ticks text {
    fill: #5b5240;
    font-size: 14px;
    letter-spacing: 0.08em;
}

.journey-field {
    fill: color-mix(in srgb, var(--j-ink) 6%, transparent);
    stroke: var(--j-line);
    stroke-width: 1.2;
    cursor: pointer;
    transition: fill 0.35s;
}

.journey-field.is-lit {
    fill: var(--j-gold);
    stroke: var(--j-gold);
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--j-gold) 70%, transparent));
}

.journey-field:hover,
.journey-field:focus-visible,
.journey-field.is-picked {
    fill: color-mix(in srgb, var(--j-gold) 34%, transparent);
    outline: none;
}

.journey-field.is-lit:hover,
.journey-field.is-lit.is-picked {
    fill: var(--j-gold);
}

.journey[data-world="alexandria"] .journey-field {
    fill: transparent;
    stroke: rgba(156, 118, 34, 0.45);
    stroke-width: 1.4;
}

.journey[data-world="alexandria"] .journey-field.is-lit {
    fill: var(--j-gold);
    stroke: var(--j-gold);
}

.journey[data-world="alexandria"] .journey-field:hover,
.journey[data-world="alexandria"] .journey-field.is-picked {
    fill: rgba(156, 118, 34, 0.22);
}

.journey-rosette-core {
    fill: var(--j-ground);
    stroke: var(--j-gold);
    stroke-width: 1.5;
}

.journey-rosette-dot {
    fill: var(--j-gold);
}

.journey-rosette-eye {
    fill: var(--j-accent);
}

.journey-astrolabe {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 50%;
    border-radius: 50%;
    pointer-events: none;
    filter: drop-shadow(0 26px 34px rgba(24, 38, 74, 0.32));
}

/* IV · Lesehimmel */
.journey-sky-head {
    align-items: end;
    row-gap: 24px;
}

.journey-sky-head > div:first-child {
    grid-column: 1 / span 6;
    display: grid;
    gap: 14px;
}

.journey-facts {
    grid-column: 7 / span 6;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.journey-facts div {
    display: grid;
    gap: 4px;
    padding-left: 14px;
    border-left: 1px solid var(--j-line);
}

.journey-facts strong {
    font: 400 clamp(1.7rem, 2.8vw, 2.5rem)/1 var(--font-family-display);
    color: var(--j-gold);
    font-variant-numeric: tabular-nums;
}

.journey-facts span {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--j-muted);
    line-height: 1.3;
}

.journey-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 4px;
    color: var(--j-muted);
    font-size: 0.88rem;
}

.journey-legend i {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
}

.journey-legend .is-none { background: var(--j-muted); opacity: 0.5; }
.journey-legend .is-read { background: var(--j-accent); }
.journey-legend .is-best { background: var(--j-gold); }

.journey-sky-scroll {
    position: relative;
    margin-top: 28px;
    overflow-x: auto;
    scrollbar-width: none;
}

.journey-sky-scroll::-webkit-scrollbar {
    display: none;
}

.journey-sky-chart {
    display: block;
    width: 100%;
    overflow: visible;
}

.journey-halo-in { stop-color: var(--j-accent); stop-opacity: 0.75; }
.journey-halo-out { stop-color: var(--j-accent); stop-opacity: 0; }
.journey-month { font: italic 500 21px var(--j-serif); fill: var(--j-muted); text-anchor: middle; }
.journey-weekday { font: 700 12px var(--font-family-ui); letter-spacing: 0.2em; fill: var(--j-muted); }
.journey-lane { stroke: var(--j-line); stroke-dasharray: 2 8; fill: none; }
.journey-constellation { stroke: var(--j-accent); stroke-opacity: 0.42; stroke-width: 1.2; fill: none; }
.journey-star { cursor: pointer; outline: none; }
.journey-star-core { fill: var(--j-accent); }
.journey-star--0 .journey-star-core { fill: var(--j-muted); opacity: 0.35; }
.journey-star.is-best .journey-star-core { fill: var(--j-gold); }
.journey-star-halo { fill: url(#journey-halo); opacity: 0; transition: opacity 0.25s; }
.journey-star--3 .journey-star-halo, .journey-star--4 .journey-star-halo, .journey-star.is-best .journey-star-halo { opacity: 0.5; }
.journey-star-hit { fill: transparent; }
.journey-star:hover .journey-star-halo, .journey-star.is-picked .journey-star-halo, .journey-star:focus-visible .journey-star-halo { opacity: 1; }
.journey-star.is-picked .journey-star-core { stroke: var(--j-ink); stroke-width: 1.5; }
.journey-star--2 .journey-star-core, .journey-star--3 .journey-star-core, .journey-star--4 .journey-star-core {
    animation: journey-twinkle var(--tw, 4s) ease-in-out infinite;
    animation-delay: var(--td, 0s);
}

@keyframes journey-twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.journey-shooting {
    position: absolute;
    left: 10%;
    top: 8%;
    width: 180px;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--j-gold));
    opacity: 0;
    rotate: 14deg;
    pointer-events: none;
    animation: journey-shoot 9s ease-in 3s infinite;
}

@keyframes journey-shoot {
    0% { opacity: 0; translate: 0 0; }
    3% { opacity: 1; }
    9% { opacity: 0; translate: 520px 130px; }
    100% { opacity: 0; translate: 520px 130px; }
}

/* V · Bibliothek */
.journey-library-head {
    display: grid;
    gap: 14px;
    max-width: 920px;
}

.journey-library-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 18px;
    margin-top: 18px;
}

.journey-library-stats div {
    display: grid;
    padding: 0 44px;
    border-left: 1px solid var(--j-line);
}

.journey-library-stats div:first-child {
    padding-left: 0;
    border-left: 0;
}

.journey-library-stats strong {
    font: 400 clamp(2.8rem, 5vw, 4.4rem)/0.9 var(--font-family-display);
    color: var(--j-gold);
}

.journey-library-stats span {
    font: italic 500 1.05rem/1.2 var(--j-serif);
    color: var(--j-soft);
}

.journey-library-stats .journey-cta {
    margin-left: 44px;
}

.journey-empty {
    margin-top: 40px;
}

.journey-shelf {
    margin-top: 64px;
    align-items: start;
    row-gap: 40px;
}

.journey-tome {
    display: grid;
    gap: 10px;
    max-width: 230px;
    perspective: 1600px;
    text-decoration: none;
    color: inherit;
}

.journey-tome:nth-child(1) { grid-column: 1 / span 3; }
.journey-tome:nth-child(2) { grid-column: 5 / span 3; margin-top: 90px; }
.journey-tome:nth-child(3) { grid-column: 9 / span 3; margin-top: 36px; }

.journey-tome { --bind: linear-gradient(160deg, #3b2a17, #160f08); --bind-spine: linear-gradient(90deg, #120c06, #3a2914 45%, #1a1108); }
.journey-tome:nth-child(2) { --bind: linear-gradient(160deg, #5a2236, #1d0b12); --bind-spine: linear-gradient(90deg, #1a0710, #5a2236 45%, #250c16); }
.journey-tome:nth-child(3) { --bind: linear-gradient(160deg, #1e3d5c, #0b1626); --bind-spine: linear-gradient(90deg, #08111f, #234569 45%, #0c1a2c); }

/* A volume in 3D, turned to show its spine. The whole volume turns a
   little further on hover; the link box around it stays put. */
.journey-tome-book {
    --d: 44px;
    --j-grain: url("../images/themes/books/leather_grain.webp") 0 0 / 200px;
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    margin-left: calc(var(--d) * 0.4);
    transform-style: preserve-3d;
    transform: rotateY(30deg) rotateX(3deg);
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.journey[data-world="alexandria"] .journey-tome-book {
    --j-grain: url("../images/themes/books/linen_grain.webp") 0 0 / 160px;
}

.journey-tome:hover .journey-tome-book,
.journey-tome:focus-visible .journey-tome-book {
    transform: rotateY(16deg) rotateX(2deg);
}

.journey-tome-book > span {
    position: absolute;
}

.journey-tome-cover {
    inset: 0;
    display: grid;
    overflow: hidden;
    border-radius: 3px 8px 8px 3px;
    background: var(--j-grain), var(--bind);
    background-blend-mode: soft-light, normal;
    transform: translateZ(calc(var(--d) / 2));
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.45);
    transition: box-shadow 0.4s;
}

.journey[data-world="alexandria"] .journey-tome-cover {
    box-shadow: 0 26px 44px rgba(24, 38, 74, 0.28);
}

/* A contact shadow on the floor under each volume. */
.journey-tome-book::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -14%;
    bottom: -20px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), transparent);
    filter: blur(3px);
    transform: translateZ(calc(var(--d) / -2 - 1px));
    pointer-events: none;
}

.journey[data-world="alexandria"] .journey-tome-book::after {
    background: radial-gradient(closest-side, rgba(60, 40, 10, 0.35), transparent);
}

.journey-tome:hover .journey-tome-cover {
    box-shadow: 0 26px 70px color-mix(in srgb, var(--j-gold) 40%, transparent);
}

/* Spine: the binding's colour, raised bands and the title in gold. */
.journey-tome-spine {
    top: 0;
    bottom: 0;
    left: calc(var(--d) / -2);
    width: var(--d);
    display: grid;
    place-items: center;
    border-radius: 10px / 6px;
    background:
        repeating-linear-gradient(180deg, transparent 0 9%, rgba(232, 201, 122, 0.65) 9% 10%, transparent 10% 11.5%, rgba(232, 201, 122, 0.65) 11.5% 12.5%, transparent 12.5% 86%, rgba(232, 201, 122, 0.65) 86% 87%, transparent 87% 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0.04) 55%, rgba(0, 0, 0, 0.6)),
        var(--j-grain), var(--bind-spine);
    background-blend-mode: normal, normal, soft-light, normal;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    transform: rotateY(-90deg);
}


.journey-tome-pages {
    top: 3px;
    bottom: 3px;
    left: calc(100% - var(--d) / 2 - 3px);
    width: calc(var(--d) - 4px);
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, #f3ead2 0 1.5px, #d9cba6 1.5px 2.5px);
    box-shadow: inset 0 0 6px rgba(80, 60, 20, 0.35);
    transform: rotateY(90deg);
}

.journey-tome-top {
    left: 2px;
    right: 5px;
    top: calc(var(--d) / -2 + 3px);
    height: calc(var(--d) - 4px);
    border-radius: 2px;
    background: repeating-linear-gradient(0deg, #f3ead2 0 1.5px, #d9cba6 1.5px 2.5px);
    box-shadow: inset 0 0 8px rgba(80, 60, 20, 0.4);
    transform: rotateX(90deg);
}

.journey-tome-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.journey-tome-generated {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    gap: 8px;
    padding: 18% 16% 15%;
}

.journey-tome-generated .journey-book-title {
    grid-row: 1;
    font-size: 1.15rem;
}



.journey-tome b {
    font: 400 1.1rem/1.2 var(--font-family-display);
}

.journey-tome small {
    color: var(--j-muted);
}

.journey-genre {
    font-size: 0.85rem;
    color: var(--j-soft);
}

.journey-genre::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--j-accent);
    vertical-align: middle;
}

/* Babylon: a garland hanging in from above, soft at every edge. */
.journey-garland {
    position: absolute;
    top: -120px;
    right: 0;
    width: 58%;
    height: 560px;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 48%, transparent 92%), linear-gradient(90deg, transparent, #000 25%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 48%, transparent 92%), linear-gradient(90deg, transparent, #000 25%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.journey-garland img {
    position: absolute;
    top: 40px;
}

.journey-garland img:nth-child(1) { right: 4%; width: 190px; }
.journey-garland img:nth-child(2) { right: 22%; width: 140px; top: 10px; opacity: 0.85; }
.journey-garland img:nth-child(3) { right: 38%; width: 110px; top: -10px; opacity: 0.7; }

/* Alexandria: the bust in a niche of light. */
.journey-niche {
    position: absolute;
    right: 5%;
    top: 4%;
    width: min(300px, 22vw);
    aspect-ratio: 3 / 4;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%);
    mask-image: linear-gradient(180deg, transparent, #000 14%);
}

.journey-niche::before {
    content: "";
    position: absolute;
    inset: -10% -20%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 240, 205, 0.9), rgba(242, 233, 213, 0));
}

.journey-niche img {
    position: relative;
    width: 62%;
    margin: 8% auto 0;
    filter: drop-shadow(0 24px 26px rgba(60, 40, 10, 0.25));
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
    mask-image: linear-gradient(180deg, #000 70%, transparent);
}

/* VI · Welt: the project's picture, edge to edge, fading at top and bottom. */
.journey-world .journey-mark {
    margin-bottom: 28px;
}

.journey-world-window {
    --inset: 0%;
    --round: 0px;
    position: relative;
    display: grid;
    align-content: end;
    height: min(86svh, 820px);
    overflow: hidden;
    clip-path: inset(var(--inset) round var(--round));
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

.journey-world-image {
    position: absolute;
    inset: -8%;
    background-position: center 40%;
    background-size: cover;
    will-change: transform;
}

.journey[data-world="babylon"] .journey-world-image.is-fallback { background-image: url("../images/themes/babylon/banner_birs_nimrud.webp"); }
.journey[data-world="alexandria"] .journey-world-image.is-fallback { background-image: url("../images/themes/alexandria/banner_ptolemy_map.webp"); }

.journey-world-window::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 14, 16, 0.05) 30%, rgba(8, 14, 16, 0.74) 82%);
}

.journey-world-inner {
    position: relative;
    z-index: 2;
    width: min(1680px, 100%);
    margin-inline: auto;
    padding: clamp(28px, 4vw, 56px) var(--j-gutter) clamp(64px, 10vh, 110px);
    display: grid;
    gap: 26px;
    color: #f6ecd2;
}

.journey-world-inner h2 {
    font-size: clamp(2.4rem, 6vw, 5.4rem);
    line-height: 0.96;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.journey-world-inner .journey-eyebrow {
    color: #f1d38a;
}

.journey-world-tag {
    max-width: 60ch;
    font: italic 500 1.3rem/1.35 var(--j-serif);
}

.journey-world-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

.journey-world-facts {
    display: grid;
    grid-template-columns: repeat(6, auto);
}

.journey-world-facts a {
    display: grid;
    gap: 2px;
    padding: 4px 22px;
    border-left: 1px solid rgba(241, 211, 138, 0.35);
    text-decoration: none;
    color: inherit;
}

.journey-world-facts a:first-child {
    padding-left: 0;
    border-left: 0;
}

.journey-world-facts strong {
    font: 400 clamp(1.8rem, 3vw, 2.6rem)/1 var(--font-family-display);
    color: #f1d38a;
}

.journey-world-facts span {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(246, 236, 210, 0.8);
}

.journey-world-window .journey-cta {
    --j-ground: #10202a;
    background: #e9c97a;
}

.journey-chronicle {
    margin-top: 40px;
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}

.journey-chronicle-text {
    max-width: 52ch;
    font: italic 500 1.5rem/1.35 var(--j-serif);
}

/* Finale */
.journey-finale {
    padding-block: 120px 150px;
    overflow: hidden;
}

.journey-finale-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 38%, #000 72%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 38%, #000 72%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.journey[data-world="babylon"] .journey-finale-bg { background: url("../images/themes/babylon/banner_walls.webp") center / cover; opacity: 0.4; }
.journey[data-world="alexandria"] .journey-finale-bg { background: url("../images/themes/alexandria/banner_cellarius.webp") center / cover; opacity: 0.16; }

.journey-finale-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(48% 46% at 50% 50%, var(--j-ground) 30%, transparent 100%);
}

.journey-finale-inner {
    position: relative;
    display: grid;
    gap: 40px;
    justify-items: center;
    text-align: center;
}

.journey-motto {
    max-width: 22ch;
    font: italic 500 clamp(1.7rem, 4vw, 3.2rem)/1.15 var(--j-serif);
    text-wrap: balance;
}

.journey-doors {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 12px;
    text-align: left;
}

.journey-door {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 26px 4px 20px;
    border-top: 1px solid var(--j-line);
    text-decoration: none;
    color: inherit;
}

.journey-door::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    height: 1px;
    width: 0;
    background: var(--j-gold);
    box-shadow: 0 0 12px var(--j-gold);
    transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.journey-door:hover::before,
.journey-door:focus-visible::before {
    width: 100%;
}

.journey-door .icon {
    width: 26px;
    height: 26px;
    color: var(--j-gold);
}

.journey-door b {
    font: 400 1.6rem/1.1 var(--font-family-display);
}

.journey-door span {
    color: var(--j-soft);
}

.journey-door i {
    position: absolute;
    right: 4px;
    top: 26px;
    font-style: normal;
    color: var(--j-gold);
    font-size: 1.3rem;
}

.journey-back-top {
    justify-self: center;
}

/* ---------- One-shot entrances (only with journey.js running) ---------- */
.journey--moving .journey-book-col[data-enter]:not(.is-in) .journey-book {
    transform: rotateY(80deg) rotateX(var(--tilt-x));
    opacity: 0;
}

.journey--moving .journey-book-col .journey-book {
    transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 1s ease;
}

.journey--moving .journey-thread[data-enter]:not(.is-in) i {
    transform: scaleX(0);
}

.journey--moving .journey-thread i {
    transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.journey--moving .journey-dial[data-enter]:not(.is-in) .journey-dial-rotor {
    transform: rotate(-24deg);
}

.journey--moving .journey-dial .journey-dial-rotor {
    transition: transform 1.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.journey--moving .journey-dial[data-enter]:not(.is-in) .journey-field {
    opacity: 0;
}

.journey--moving .journey-dial .journey-field {
    transition: opacity 0.9s ease calc(var(--i, 0) * 50ms), fill 0.35s;
}

.journey--moving .journey-dial[data-enter]:not(.is-in) .journey-astrolabe {
    opacity: 0;
    transform: rotate(-18deg) scale(0.92);
}

.journey--moving .journey-dial .journey-astrolabe {
    transition: opacity 1.4s ease, transform 1.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.journey--moving .journey-shelf[data-enter]:not(.is-in) .journey-tome {
    opacity: 0;
    translate: 0 50px;
}

.journey--moving .journey-shelf .journey-tome {
    transition: opacity 1.1s ease, translate 1.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.journey--moving .journey-shelf .journey-tome:nth-child(2) { transition-delay: 0.14s; }
.journey--moving .journey-shelf .journey-tome:nth-child(3) { transition-delay: 0.28s; }

.journey--moving .journey-finale-inner[data-enter]:not(.is-in) .journey-door {
    opacity: 0;
    translate: 0 30px;
}

.journey--moving .journey-finale-inner .journey-door {
    transition: opacity 1s ease, translate 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.journey--moving .journey-finale-inner .journey-door:nth-child(2) { transition-delay: 0.1s; }
.journey--moving .journey-finale-inner .journey-door:nth-child(3) { transition-delay: 0.2s; }
.journey--moving .journey-finale-inner .journey-door:nth-child(4) { transition-delay: 0.3s; }

/* ---------- Narrow screens: the same journey in one column ---------- */
@media (max-width: 900px) {
    .journey-book-col,
    .journey-copy,
    .journey-goal-copy,
    .journey-dial,
    .journey-sky-head > div:first-child,
    .journey-facts {
        grid-column: 1 / -1;
    }

    .journey-book-col {
        min-height: 380px;
    }

    .journey-book {
        width: min(220px, 56vw);
    }

    .journey-dial {
        order: -1;
        width: min(420px, 100%);
    }

    .journey-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journey-sky-chart {
        width: 920px;
        max-width: none;
    }

    .journey-sky-scroll {
        margin-inline: calc(var(--j-gutter) * -1);
        padding-inline: var(--j-gutter);
    }

    .journey-tome:nth-child(n) {
        grid-column: span 6;
        margin-top: 0;
    }

    .journey-tome:nth-child(2) {
        margin-top: 40px;
    }

    .journey-tome:nth-child(3) {
        grid-column: 4 / span 6;
    }

    .journey-object,
    .journey-lamp-glow,
    .journey-garland,
    .journey-niche {
        display: none;
    }

    .journey-library-stats div {
        padding: 0 22px;
    }

    .journey-library-stats .journey-cta {
        margin-left: 0;
    }

    .journey-world-facts {
        grid-template-columns: repeat(3, auto);
        row-gap: 14px;
    }

    .journey-world-facts a:nth-child(4) {
        padding-left: 0;
        border-left: 0;
    }

    .journey-doors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journey-finale {
        padding-bottom: 130px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .journey *,
    .journey *::before,
    .journey *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Every other theme: data-world="engraving" (2026-10-04) ----------
   The journey in the classic themes and the alternative looks, when
   "Immersives Theme" is on. No pictures of its own: moods are mixed from
   the theme's tokens, so it works light or dark, and the decorations are
   the theme's own engravings in its ink (--j-engr-*, see app.css). */
.journey[data-world="engraving"] {
    --j-accent: var(--color-secondary);
    --j-accent-deep: color-mix(in srgb, var(--color-secondary) 70%, var(--color-bg-dark));
    --j-line: color-mix(in srgb, var(--color-primary) 30%, transparent);
    --j-tip-bg: color-mix(in srgb, var(--color-bg-card) 97%, transparent);
    --j-ink-engraving: color-mix(in srgb, var(--color-text-secondary) 65%, var(--color-primary));
}

.journey[data-world="engraving"] [data-mood="reading"] { background: radial-gradient(45% 50% at 24% 60%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 70%); }
.journey[data-world="engraving"] [data-mood="goal"] { background: radial-gradient(45% 55% at 72% 52%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 70%); }
.journey[data-world="engraving"] [data-mood="sky"] { background: radial-gradient(75% 60% at 50% 48%, color-mix(in srgb, var(--color-secondary) 14%, transparent), transparent 75%), color-mix(in srgb, var(--color-bg-paper) 92%, var(--color-bg-dark)); }
.journey[data-world="engraving"] [data-mood="sky"]::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--color-primary) 35%, transparent) 1px, transparent 1.5px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent);
    mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent);
}
.journey[data-world="engraving"] [data-mood="library"] { background: radial-gradient(50% 55% at 82% 30%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 70%); }
.journey[data-world="engraving"] [data-mood="world"] { background: radial-gradient(70% 60% at 50% 55%, color-mix(in srgb, var(--color-secondary) 14%, transparent), transparent 75%); }
.journey[data-world="engraving"] [data-mood="finale"] { background: radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 75%); }

.journey[data-world="engraving"] .journey-pool {
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent);
}

.journey[data-world="engraving"] .journey-book-shadow {
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-bg-dark) 55%, transparent), transparent);
}

.journey[data-world="engraving"] .journey-field.is-lit {
    filter: none;
}

.journey[data-world="engraving"] .journey-field:hover,
.journey[data-world="engraving"] .journey-field.is-picked {
    fill: color-mix(in srgb, var(--color-primary) 24%, transparent);
}

/* The theme's engravings, painted in its ink. */
.journey-engraving {
    background-color: var(--j-ink-engraving);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
}

/* Behind the book: one engraving with its own oval vignette, centred on
   the book (the column centres the book), under it (the book is z 2). */
.journey-engraving--reading {
    left: 50%;
    top: 50%;
    z-index: 0;
    width: min(560px, 48vw);
    aspect-ratio: 9 / 10;
    translate: -50% -52%;
    opacity: 0.38;
    filter: none;
    -webkit-mask: var(--j-engr-reading) center / contain no-repeat;
    mask: var(--j-engr-reading) center / contain no-repeat;
}

.journey[data-world="engraving"] .journey-lamp-glow {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: min(420px, 40vw);
    height: min(420px, 40vw);
    translate: -50% -50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent);
}

/* Over the library chapter: a page banner of the theme across the whole
   width, sinking into the page only at the top and bottom. */
.journey-engraving--library {
    position: absolute;
    inset: 0 0 auto;
    height: min(460px, 34vw);
    opacity: 0.26;
    -webkit-mask-image: var(--j-engr-library), linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 100%);
    mask-image: var(--j-engr-library), linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 100%);
    -webkit-mask-size: cover, 100% 100%;
    mask-size: cover, 100% 100%;
    -webkit-mask-position: center, center;
    mask-position: center, center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.journey[data-world="engraving"] .journey-world-image.is-fallback {
    background-color: var(--j-ink-engraving);
    opacity: 0.7;
    -webkit-mask: var(--j-engr-world) center / cover no-repeat;
    mask: var(--j-engr-world) center / cover no-repeat;
}

.journey[data-world="engraving"] .journey-finale-bg {
    background-color: var(--j-ink-engraving);
    opacity: 0.3;
    -webkit-mask-image: var(--j-engr-finale), linear-gradient(180deg, transparent, #000 38%, #000 72%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: var(--j-engr-finale), linear-gradient(180deg, transparent, #000 38%, #000 72%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-size: cover, 100% 100%, 100% 100%;
    mask-size: cover, 100% 100%, 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in, source-in;
    mask-composite: intersect;
}