.jl-page {
    --jl-ink: #173248;
    --jl-muted: #536a79;
    --jl-surface: #fff;
    --jl-soft: #edf8ff;
    --jl-border: #d7e2e9;
    max-width:1180px;
    margin:auto;
    padding:7rem 24px 72px;
    color:var(--jl-ink)
}
.jl-header {
    margin-bottom:30px
}
.jl-eyebrow {
    color:var(--jl-muted);
    font-size:.9rem
}
.jl-title {
    font-size:clamp(2rem,4vw,3rem);
    font-weight:800;
    margin:8px 0
}
.jl-subtitle,.jl-note {
    color:var(--jl-muted)
}
.jl-subtitle {
    font-size:1.1rem
}
.jl-audiences {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:24px
}
.jl-audiences a {
    padding:12px 24px;
    border:1px solid var(--jl-border);
    border-radius:999px;
    color:var(--jl-ink);
    text-decoration:none;
    font-weight:700
}
.jl-audiences a[aria-current=page] {
    background:#0174b1;
    border-color:#0174b1;
    color:white
}
.jl-reading {
    padding:28px;
    background:var(--jl-soft);
    border:1px solid var(--jl-border);
    border-radius:24px
}
.jl-reading-copy {
    flex:1;
    min-width:0
}
.jl-reading h2 {
    font-size:clamp(1.7rem,3vw,2.4rem);
    font-weight:800;
    margin:15px 0
}
.jl-reading p {
    max-width:650px;
    line-height:1.6
}
.jl-note {
    font-size:.9rem;
    line-height:1.5
}
.jl-group {
    margin-top:40px
}
.jl-group h2 {
    font-size:1.7rem;
    font-weight:800
}
.jl-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    margin-top:22px
}
.jl-card {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    border:1px solid var(--jl-border);
    border-radius:18px;
    padding:24px;
    color:var(--jl-ink);
    text-decoration:none;
    background:var(--jl-surface);
    min-width:0;
    transition:box-shadow .15s
}
.jl-card:hover {
    color:var(--jl-ink);
    box-shadow:0 8px 28px #17324816
}
.jl-card h3 {
    font-size:1.25rem;
    font-weight:800;
    margin:16px 0 10px
}
.jl-card p {
    font-size:.95rem;
    line-height:1.6;
    color:var(--jl-muted)
}
.jl-card-badge {
    display:inline-block;
    font-size:.85rem;
    font-weight:700;
    color:#155175;
    background:#dceff9;
    padding:6px 10px;
    border-radius:7px
}
.jl-role {
    font-size:.85rem;
    margin-top:8px;
    color:var(--jl-muted)
}
.jl-card-cta {
    margin-top:auto;
    padding-top:16px;
    font-weight:700;
    color:#0174b1
}
.jl-card-covers {
    display:flex;
    gap:8px;
    height:130px;
    max-width:100%;
    overflow:hidden;
    margin-bottom:18px
}
.jl-card-spine {
    height:125px;
    width:83px;
    object-fit:contain
}
.jl-card-icon {
    font-size:2rem;
    color:#0174b1
}
.jl-state {
    padding:48px;
    text-align:center
}
.jl-page a:focus-visible {
    outline:3px solid #ed9500;
    outline-offset:4px
}
@media(max-width:900px) {
    .jl-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:600px) {
    .jl-page {
        padding:5rem 16px 48px
    }
    .jl-reading {
        padding:22px 18px
    }
    .jl-grid {
        grid-template-columns:1fr
    }
    .jl-audiences a {
        padding:12px 18px
    }
    .jl-state {
        padding:28px
    }
}

body.dark-mode .jl-page {
    --jl-ink: #eaf4ff;
    --jl-muted: #b1c7d8;
    --jl-surface: #15293b;
    --jl-soft: #13283a;
    --jl-border: #345267;
}
body.dark-mode .jl-card-cta { color: #80d2ff; }
/* Keep the configured journey color visible without making reading text depend on it. */
.jl-card { border-top: 4px solid var(--lj-accent, #0174b1); }

/* One visible set of choices serves as both the progression and the navigation. */
.jl-route { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; list-style:none; padding:0; margin:22px 0 16px; }
.jl-route li { min-width:0; }
.jl-reading-choice { display:flex; flex-direction:column; height:100%; padding:20px; border:1px solid var(--jl-border); border-radius:16px; background:var(--jl-surface); color:var(--jl-ink); text-decoration:none; }
.jl-reading-choice:hover { color:var(--jl-ink); border-color:#0174b1; box-shadow:0 6px 20px #17324816; }
.jl-choice-number { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#0174b1; color:#fff; font-weight:800; }
.jl-reading-choice h3 { font-size:1.2rem; font-weight:800; margin:14px 0 8px; }
.jl-reading-choice p { font-size:.95rem; color:var(--jl-muted); margin:0 0 12px; }
.jl-choice-progress { color:var(--jl-muted); font-size:.85rem; line-height:1.5; margin-bottom:8px; }
.jl-card-covers { width:100%; height:162px; padding:12px 8px; justify-content:center; align-items:center; border-radius:12px; background:var(--lj-accent-soft,var(--jl-soft)); }
.jl-card-spine { height:136px; width:calc((100% - 16px)/3); max-width:96px; filter:drop-shadow(0 5px 5px #17324826); }
@media(max-width:700px) { .jl-route { grid-template-columns:1fr; } }