/* ============================================================
   style-home.css - Homepage (A368+ visual refresh)
   Uses --jv-* tokens from tokens.css / style-shared.css.
   ============================================================ */

body {
    font-family: var(--jv-font-body, 'Inter', sans-serif);
    background: var(--jv-bg);
    color: var(--jv-text);
    overflow-x: hidden;
}

/* ── Hero ── */
.home-hero {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(180px, 0.6fr);
    align-items: center;
    gap: clamp(24px, 5vw, 56px);
    padding: clamp(40px, 6vw, 72px) clamp(18px, 6vw, 54px) clamp(40px, 6vw, 64px);
    text-align: left;
    background:
        linear-gradient(135deg, rgba(124,108,240,0.12), rgba(242,99,122,0.08) 38%, transparent 70%),
        radial-gradient(circle at 82% 22%, rgba(255,210,60,0.10), transparent 34%),
        var(--jv-bg);
    position: relative;
    overflow: hidden;
}
.home-hero::after {
    content: '';
    position: absolute;
    width: 380px; height: 380px;
    right: -80px; top: 20px;
    border-radius: 62% 38% 54% 46% / 48% 52% 48% 52%;
    background: radial-gradient(ellipse, rgba(124,108,240,0.08) 0%, transparent 70%);
    pointer-events: none;
    animation: home-blob 14s ease-in-out infinite alternate;
}
.home-hero::before {
    content: '';
    position: absolute;
    width: 260px; height: 260px;
    left: -50px; bottom: 40px;
    border-radius: 44% 56% 44% 56% / 52% 48% 52% 48%;
    background: radial-gradient(ellipse, rgba(242,99,122,0.08) 0%, transparent 70%);
    pointer-events: none;
    animation: home-blob 18s ease-in-out infinite alternate-reverse;
}
@keyframes home-blob {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(16px, -16px) scale(1.06); }
}

.home-hero-copy,
.home-hero-mascots {
    position: relative;
    z-index: 1;
}

.home-hero-copy .hero-sub {
    margin-left: 0;
    margin-right: 0;
    max-width: 580px;
}

.hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jv-lumo-ink);
    border: 1.5px solid rgba(124,108,240,0.35);
    border-radius: var(--jv-radius-pill);
    padding: 5px 16px;
    display: inline-block;
    margin-bottom: 20px;
}
.hero-title {
    font-family: var(--jv-font-display);
    font-size: clamp(2.6rem, 7vw, 4.8rem);
    font-weight: 700;
    color: var(--jv-text);
    line-height: 1.05;
    margin-bottom: 18px;
}
.hero-title .accent { color: var(--jv-rose); }
.hero-title .accent2 { color: var(--jv-teal-dk); }
.hero-sub {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: var(--jv-text-muted);
    line-height: 1.75;
    max-width: 560px;
    margin: 0 auto 32px;
}
.hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--jv-rose);
    color: #fff;
    font-weight: 700;
    border-radius: var(--jv-radius-md);
    padding: 14px 28px;
    font-size: 1rem;
    box-shadow: 0 4px 0 var(--jv-rose-dk);
    transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--jv-rose-dk);
}
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--jv-teal-dk);
    color: var(--jv-teal-dk);
    font-weight: 700;
    border-radius: var(--jv-radius-md);
    padding: 12px 26px;
    font-size: 1rem;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}
.btn-outline:hover {
    background: var(--jv-teal-dk);
    color: #fff;
    transform: translateY(-2px);
}
.hero-secondary {
    margin: 16px 0 0;
    font-size: 0.95rem;
    color: var(--jv-text-muted);
}
.hero-secondary a {
    color: var(--jv-teal-dk);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hero-secondary a:hover {
    color: var(--jv-rose);
}

/* ── Mascot group in hero ── */
.home-hero-mascots {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    position: relative;
}
.home-hero-mascots .home-crew-art {
    width: min(440px, 100%);
    height: auto;
    object-fit: contain;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(47,36,49,0.16);
}

/* ── Quick-stat row under hero ── */
.hero-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--jv-line);
}
.hero-stat { text-align: left; }
.hero-stat-num {
    font-family: var(--jv-font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--jv-rose);
    line-height: 1;
}
.hero-stat-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jv-text-muted);
    margin-top: 3px;
}

/* ── Hub section ── */
.hub-section {
    padding: var(--jv-space-8) 28px;
    background: var(--jv-surface-2);
}
.hub-inner { max-width: 1200px; margin: 0 auto; }
.hub-head {
    text-align: center;
    margin-bottom: 36px;
}
.hub-head .section-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jv-lumo-ink);
    background: var(--jv-lumo-soft);
    border: 1px solid rgba(124,108,240,0.25);
    border-radius: var(--jv-radius-pill);
    padding: 4px 14px;
    display: inline-block;
    margin-bottom: 14px;
}
.hub-head .section-title {
    font-family: var(--jv-font-display);
    font-size: var(--jv-text-2xl);
    font-weight: 700;
    color: var(--jv-text);
    line-height: 1.1;
}
.hub-head .section-sub {
    font-size: 0.95rem;
    color: var(--jv-text-muted);
    line-height: 1.65;
    max-width: 500px;
    margin: 8px auto 0;
}
.hub-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 28px 24px;
    border-radius: var(--jv-radius-lg);
    text-decoration: none;
    border: 1.5px solid rgba(124,108,240,0.18);
    background: linear-gradient(145deg, var(--jv-surface) 40%, var(--jv-lumo-soft));
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
    border-top: 4px solid var(--jv-lumo);
}
.hub-card--create { border-top-color: var(--jv-ember); border-color: rgba(242,99,122,0.18); background: linear-gradient(145deg, var(--jv-surface) 40%, var(--jv-ember-soft)); }
.hub-card--play   { border-top-color: var(--jv-echo); border-color: rgba(46,181,165,0.18); background: linear-gradient(145deg, var(--jv-surface) 40%, var(--jv-echo-soft)); }
.hub-card--read   { border-top-color: var(--jv-stardust); border-color: rgba(255,210,60,0.18); background: linear-gradient(145deg, var(--jv-surface) 40%, var(--jv-stardust-soft)); }
.hub-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--jv-shadow-2);
    border-color: var(--jv-lumo);
}
.hub-card--create:hover { border-color: var(--jv-ember); }
.hub-card--play:hover   { border-color: var(--jv-echo); }
.hub-card--read:hover   { border-color: var(--jv-stardust); }
.hub-emoji {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 4px;
}
.hub-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-bottom: 6px;
    transition: transform 0.2s ease;
}
@keyframes badge-wiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(-8deg) scale(1.1); }
    40% { transform: rotate(6deg) scale(1.1); }
    60% { transform: rotate(-4deg) scale(1.05); }
    80% { transform: rotate(2deg) scale(1.02); }
}
.hub-card:hover .hub-badge {
    animation: badge-wiggle 0.5s ease;
}
.journey-step:hover > img {
    animation: badge-wiggle 0.5s ease;
}
.hub-name {
    font-family: var(--jv-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--jv-text);
}
.hub-desc {
    font-size: 0.86rem;
    color: var(--jv-text-muted);
    line-height: 1.55;
    min-height: 3em;
}
.hub-label {
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.hub-card--learn .hub-label  { color: var(--jv-lumo-ink); }
.hub-card--create .hub-label { color: var(--jv-ember-ink); }
.hub-card--play .hub-label   { color: var(--jv-echo-ink); }
.hub-card--read .hub-label   { color: var(--jv-stardust-ink); }
.hub-cta {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--jv-link);
    margin-top: auto;
    padding-top: 8px;
    transition: transform var(--jv-ease);
}
.hub-card:hover .hub-cta { transform: translateX(3px); }
.hub-footnote {
    text-align: center;
    font-size: 0.78rem;
    color: var(--jv-text-muted);
    margin-top: 24px;
    letter-spacing: 0.03em;
}

/* ── What can I do here? (A946) ── */
.home-paths {
    padding: var(--jv-space-8) 28px;
    background: var(--jv-surface);
    border-top: 1px solid var(--jv-line);
    border-bottom: 1px solid var(--jv-line);
}
.home-paths-inner { max-width: 1200px; margin: 0 auto; }
.paths-head { text-align: center; margin-bottom: 32px; }
.paths-head .section-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jv-stardust-ink);
    background: var(--jv-stardust-soft);
    border: 1px solid rgba(255, 210, 60, 0.3);
    border-radius: var(--jv-radius-pill);
    padding: 4px 14px;
    display: inline-block;
    margin-bottom: 14px;
}
.paths-head .section-title {
    font-family: var(--jv-font-display);
    font-size: var(--jv-text-2xl);
    font-weight: 700;
    color: var(--jv-text);
    line-height: 1.1;
}
.paths-head .section-sub {
    font-size: 0.95rem;
    color: var(--jv-text-muted);
    line-height: 1.65;
    max-width: 520px;
    margin: 8px auto 0;
}
.paths-guide {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--jv-text-muted);
}
.paths-guide img { border-radius: 50%; }
.paths-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.path-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px 22px;
    border-radius: var(--jv-radius-lg);
    text-decoration: none;
    border: 1px solid var(--jv-line);
    background: var(--jv-bg);
    transition: transform var(--jv-ease), box-shadow var(--jv-ease), border-color var(--jv-ease);
    overflow: hidden;
    border-top: 4px solid var(--jv-lumo);
}
.path-card--play { border-top-color: var(--jv-echo); }
.path-card--create { border-top-color: var(--jv-ember); }
.path-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--jv-shadow-2);
    border-color: var(--jv-lumo);
}
.path-card--play:hover { border-color: var(--jv-echo); }
.path-card--create:hover { border-color: var(--jv-ember); }
.path-badge {
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--jv-radius-pill);
    padding: 3px 10px;
}
.path-badge--finished { color: var(--jv-echo-ink); background: var(--jv-echo-soft); border: 1px solid rgba(0, 180, 160, 0.3); }
.path-badge--workshop { color: var(--jv-lumo-ink); background: var(--jv-lumo-soft); border: 1px solid rgba(124, 108, 240, 0.3); }
.path-badge--experiment { color: var(--jv-ember-ink); background: var(--jv-ember-soft); border: 1px solid rgba(242, 99, 122, 0.3); }
.path-emoji { font-size: 2rem; line-height: 1; margin: 2px 0; }
.path-title {
    font-family: var(--jv-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--jv-text);
}
.path-desc {
    font-size: 0.86rem;
    color: var(--jv-text-muted);
    line-height: 1.55;
    flex: 1;
}
.path-cta {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--jv-link);
    margin-top: auto;
    padding-top: 8px;
    transition: transform var(--jv-ease);
}
.path-card:hover .path-cta { transform: translateX(3px); }
@media (max-width: 900px) {
    .paths-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

/* ── About strip ── */
.about-strip {
    background: linear-gradient(160deg, var(--jv-surface) 30%, rgba(112,163,167,0.08) 70%, rgba(124,108,240,0.06));
    border-top: 1px solid var(--jv-line);
    border-bottom: 1px solid var(--jv-line);
    padding: var(--jv-space-8) 28px;
    position: relative;
    overflow: hidden;
}
.about-inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.about-inner .section-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jv-echo-ink);
    background: var(--jv-echo-soft);
    border: 1px solid rgba(46,181,165,0.25);
    border-radius: var(--jv-radius-pill);
    padding: 4px 14px;
    display: inline-block;
    margin-bottom: 14px;
}
.about-inner h2 {
    font-family: var(--jv-font-display);
    font-size: var(--jv-text-2xl);
    font-weight: 700;
    color: var(--jv-text);
    margin-bottom: 14px;
}
.about-inner p {
    font-size: 1rem;
    color: var(--jv-text-muted);
    line-height: 1.75;
    margin-bottom: 28px;
}
.about-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.stat { text-align: center; }
.stat-num {
    font-family: var(--jv-font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--jv-rose);
    line-height: 1;
}
.stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--jv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}
.btn-about {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--jv-teal-dk);
    color: #fff;
    font-weight: 700;
    border-radius: var(--jv-radius-md);
    padding: 13px 28px;
    font-size: 0.95rem;
    transition: transform var(--jv-ease), box-shadow var(--jv-ease);
    box-shadow: 0 4px 16px rgba(78,125,128,0.2);
}
.btn-about:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(78,125,128,0.3);
}

/* ── Section shared ── */
.section-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--jv-radius-pill);
    padding: 5px 16px;
    margin-bottom: 14px;
}
.section-title {
    font-family: var(--jv-font-display);
    font-size: var(--jv-text-2xl);
    font-weight: 700;
    color: var(--jv-text);
    line-height: 1.15;
}
section[id] { scroll-margin-top: 84px; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .hub-grid { grid-template-columns: repeat(2, 1fr); }
    .home-hero { grid-template-columns: 1fr; text-align: center; }
    .home-hero-copy .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-buttons { justify-content: center; }
    .hero-stats { justify-content: center; }
    .home-hero-mascots { margin-top: -12px; }
    .home-hero-mascots img { width: min(140px, 50%); }
}
@media (max-width: 520px) {
    .hub-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 640px) {
    .hero-buttons { flex-direction: column; align-items: center; }
    .btn-primary, .btn-outline { width: 100%; max-width: 300px; justify-content: center; }
    .about-stats { gap: 24px; }
    .hero-stats { gap: 20px; }
}
/* ── Stat counter scroll animation ── */
.hero-stat-num, .stat-num {
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.hero-stat.counted .hero-stat-num,
.stat.counted .stat-num {
    animation: stat-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes stat-pop {
    0% { opacity: 0; transform: translateY(16px) scale(0.8); }
    60% { opacity: 1; transform: translateY(-3px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Canvas sparkle on paint ── */
.fm-canvas-wrap { position: relative; }
.fm-sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    animation: sparkle-burst 0.55s ease-out forwards;
}
@keyframes sparkle-burst {
    0% { opacity: 1; transform: scale(0); }
    40% { opacity: 1; transform: scale(1.4); }
    100% { opacity: 0; transform: scale(0.3) translateY(-18px); }
}

/* ── Daily spark: promoted position after first-make ── */
.jvds-today-spark--promoted {
    max-width: 100%;
    padding: clamp(28px, 4vw, 48px) 28px;
    background: var(--jv-bg);
    border-bottom: 1px solid var(--jv-line);
}
.jvds-today-spark--promoted > * {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

@media (prefers-reduced-motion: reduce) {
    .home-hero::before, .home-hero::after { animation: none !important; }
    .hub-card:hover .hub-badge, .journey-step:hover > img { animation: none !important; }
    .hero-stat.counted .hero-stat-num, .stat.counted .stat-num { animation: none !important; }
    .fm-sparkle { animation: none !important; display: none; }
}

/* ── Welcoming crew hero ── */
.home-hero-mascots{flex-direction:column;align-items:center;gap:10px;}
.home-crew-speech{width:min(340px,100%);padding:13px 16px;border:1px solid var(--jv-line);border-radius:18px;background:var(--jv-surface);box-shadow:var(--jv-shadow-2);text-align:center;}
.home-crew-speech strong,.home-crew-speech span{display:block;}
.home-crew-speech strong{font-family:var(--jv-font-display);font-size:1rem;color:var(--jv-text);margin-bottom:3px;}
.home-crew-speech span{font-size:.82rem;color:var(--jv-text-muted);line-height:1.45;}
@media (max-width:760px){
 .home-hero{grid-template-columns:1fr;text-align:center;}
 .home-hero-copy .hero-sub{margin-left:auto;margin-right:auto;}
 .hero-buttons,.hero-stats{justify-content:center;}
 .hero-stat{text-align:center;}
 .home-hero-mascots{order:-1;min-height:0;}
 .home-hero-mascots .home-crew-art{width:min(320px,86%);}
}

/* ── Story shelf: let the books give the homepage a heartbeat ── */
.story-shelf{background:var(--jv-surface);border-top:1px solid var(--jv-line);border-bottom:1px solid var(--jv-line);padding:var(--jv-space-8) 28px;}
.story-shelf-inner{max-width:1200px;margin:0 auto;}
.story-shelf-head{text-align:center;max-width:650px;margin:0 auto 30px;}
.story-shelf-head .section-eyebrow{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--jv-stardust-ink);background:var(--jv-stardust-soft);border:1px solid rgba(255,210,60,.3);border-radius:var(--jv-radius-pill);padding:4px 14px;margin-bottom:14px;}
.story-shelf-head .section-title{font-family:var(--jv-font-display);font-size:var(--jv-text-2xl);font-weight:700;color:var(--jv-text);line-height:1.1;}
.story-shelf-head .section-sub{font-size:.95rem;color:var(--jv-text-muted);line-height:1.65;margin:9px auto 0;}
.story-shelf-grid{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.5fr);gap:18px;align-items:stretch;}
.story-quote-card{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;border-radius:var(--jv-radius-lg);padding:30px 28px;background:linear-gradient(145deg,#13253a,#203b54);color:#fff;box-shadow:var(--jv-shadow-2);}
.story-quote-card::after{content:'✦';position:absolute;right:22px;top:14px;color:rgba(255,210,60,.8);font-size:2rem;}
.story-quote-mark{font-family:Georgia,serif;font-size:4rem;line-height:.6;color:#f5c842;margin-bottom:14px;}
.story-quote-card blockquote{font-family:var(--jv-font-display);font-size:clamp(1.25rem,2.5vw,1.7rem);line-height:1.25;margin:0 0 13px;}
.story-quote-card cite{font-size:.75rem;font-style:normal;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#a8e4dd;}
.story-quote-card p{font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.72);margin:15px 0 18px;}
.story-link{align-self:flex-start;color:#fff;font-weight:800;font-size:.82rem;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px;}
.story-link:hover{color:#f5c842;border-color:#f5c842;}
.story-book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.story-book-card{display:flex;flex-direction:column;justify-content:flex-end;min-height:250px;overflow:hidden;border-radius:var(--jv-radius-lg);border:1px solid var(--jv-line);background:var(--jv-bg);text-decoration:none;transition:transform var(--jv-ease),box-shadow var(--jv-ease),border-color var(--jv-ease);}
.story-book-card:hover{transform:translateY(-4px);box-shadow:var(--jv-shadow-2);border-color:var(--jv-stardust);}
.story-book-card img{display:block;width:100%;height:150px;object-fit:contain;object-position:center bottom;margin-top:auto;filter:drop-shadow(0 10px 15px rgba(44,36,48,.13));}
.story-book-card--lumo img{background:linear-gradient(145deg,#eee6ff,#faf8ff);object-fit:cover;object-position:center;}
.story-book-card--echo img{background:linear-gradient(145deg,#e9f8f4,#f9fffd);padding:18px 12px;}
.story-book-card--stardust img{background:linear-gradient(145deg,#fff8d8,#fffdf2);padding:12px;}
.story-book-card span{display:flex;flex-direction:column;gap:4px;padding:12px 13px 14px;background:var(--jv-surface);}
.story-book-card b{font-family:var(--jv-font-display);font-size:.92rem;line-height:1.15;color:var(--jv-text);}
.story-book-card small{font-size:.74rem;color:var(--jv-text-muted);line-height:1.35;}
.story-shelf-more{display:block;width:max-content;margin:24px auto 0;color:var(--jv-link);font-size:.86rem;font-weight:800;text-decoration:none;}
.story-shelf-more:hover{text-decoration:underline;}
@media(max-width:850px){.story-shelf-grid{grid-template-columns:1fr;}.story-quote-card{min-height:260px;}.story-book-card{min-height:220px;}}
@media(max-width:560px){.story-shelf{padding-left:18px;padding-right:18px;}.story-book-grid{grid-template-columns:1fr;}.story-book-card{display:grid;grid-template-columns:105px 1fr;min-height:0;align-items:stretch;}.story-book-card img{height:128px;width:105px;object-fit:cover;}.story-book-card--echo img,.story-book-card--stardust img{object-fit:contain;padding:12px;}.story-book-card span{justify-content:center;}}

/* ── Connected creative journey ── */
.creative-journey{padding:var(--jv-space-8) 28px;background:linear-gradient(145deg,#fffaf0,#f6fbfa 58%,#f9f4ff);border-top:1px solid var(--jv-line);border-bottom:1px solid var(--jv-line);}
.creative-journey-inner{max-width:1200px;margin:0 auto;}
.journey-head{text-align:center;max-width:680px;margin:0 auto 16px;}
.journey-head .section-eyebrow{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--jv-ember-ink);background:var(--jv-ember-soft);border:1px solid rgba(242,99,122,.25);border-radius:var(--jv-radius-pill);padding:4px 14px;margin-bottom:14px;}
.journey-head .section-title{font-family:var(--jv-font-display);font-size:var(--jv-text-2xl);font-weight:700;color:var(--jv-text);line-height:1.1;}
.journey-head .section-sub{font-size:.95rem;color:var(--jv-text-muted);line-height:1.65;margin:9px auto 0;}
.journey-quote{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 22px;color:var(--jv-stardust-ink);}
.journey-quote span{font-size:1.2rem;color:var(--jv-stardust);}
.journey-quote p{font-family:Georgia,serif;font-size:.95rem;font-style:italic;margin:0;}
.journey-quote small{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.journey-steps{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:stretch;}
.journey-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:220px;padding:19px 17px 16px;border:1px solid var(--jv-line);border-top:4px solid var(--jv-stardust);border-radius:var(--jv-radius-lg);background:rgba(255,255,255,.75);color:var(--jv-text);text-decoration:none;box-shadow:0 8px 24px rgba(64,59,51,.05);transition:transform var(--jv-ease),box-shadow var(--jv-ease),border-color var(--jv-ease);}
.journey-step:hover{transform:translateY(-5px);box-shadow:var(--jv-shadow-2);}
.journey-step--learn{border-top-color:var(--jv-lumo);}.journey-step--create{border-top-color:var(--jv-ember);}.journey-step--play{border-top-color:var(--jv-echo);}
.journey-number{position:absolute;right:13px;top:11px;font-family:var(--jv-font-mono,'ui-monospace',monospace);font-size:.68rem;font-weight:800;color:var(--jv-text-muted);opacity:.7;}
.journey-step>img,.journey-duo{display:flex;width:30px;height:30px;align-items:center;justify-content:center;margin-bottom:13px;}
.journey-step>img{border-radius:50%;}.journey-duo img{width:30px;height:30px;border-radius:50%;border:2px solid #fff;}.journey-duo img+img{margin-left:-8px;}
.journey-guide{font-size:.66rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--jv-text-muted);margin-bottom:7px;}
.journey-step strong{font-family:var(--jv-font-display);font-size:1.12rem;line-height:1.15;}
.journey-step small{font-size:.78rem;line-height:1.45;color:var(--jv-text-muted);margin-top:7px;}
.journey-step em{margin-top:auto;padding-top:14px;font-size:.75rem;font-style:normal;font-weight:800;color:var(--jv-link);}
.journey-arrow{align-self:center;font-size:1.35rem;font-weight:800;color:var(--jv-text-muted);opacity:.55;}
@media(max-width:900px){.journey-steps{grid-template-columns:repeat(2,minmax(0,1fr));}.journey-arrow{display:none;}}
@media(max-width:560px){.creative-journey{padding-left:18px;padding-right:18px;}.journey-steps{grid-template-columns:1fr;}.journey-step{min-height:0;}.journey-step em{margin-top:8px;}}

/* ── Connected mascot hand-offs ─────────────────────────────── */
.journey-future{margin:18px auto 0;max-width:620px;text-align:center;color:var(--jv-text-muted);font-size:.9rem;line-height:1.5}
.journey-future span{color:#f5a623;margin-right:5px}
.hub-handoff{display:flex;align-items:center;gap:14px;max-width:1050px;margin:22px auto;padding:14px 18px;border:1px solid var(--jv-line);border-radius:18px;background:linear-gradient(110deg,rgba(255,255,255,.96),rgba(249,247,255,.9));box-shadow:0 8px 24px rgba(47,36,49,.06)}
.hub-handoff-figure{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:16px;background:#fff;overflow:hidden}
.hub-handoff-figure img{display:block;width:48px;height:48px;object-fit:contain}
.hub-handoff>div:nth-child(2){display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.hub-handoff strong{color:var(--jv-text);font-size:.88rem;line-height:1.25}
.hub-handoff span{color:var(--jv-text-muted);font-size:.78rem;line-height:1.4}
.hub-handoff>a{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:9px 13px;border-radius:999px;background:var(--jv-text);color:#fff;text-decoration:none;font-size:.76rem;font-weight:800;white-space:nowrap;transition:transform .16s ease,box-shadow .16s ease}
.hub-handoff>a:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(47,36,49,.16)}
.hub-handoff--learn{border-color:rgba(124,58,237,.18)}
.hub-handoff--create{border-color:rgba(236,72,153,.18)}
.hub-handoff--play{border-color:rgba(46,181,165,.24);margin:0 auto 20px}
@media(max-width:640px){.hub-handoff{align-items:flex-start;flex-wrap:wrap;margin-left:18px;margin-right:18px;padding:13px}.hub-handoff>a{margin-left:66px}.hub-handoff--play{margin-left:18px;margin-right:18px}}
[data-theme="dark"] .hub-handoff{background:rgba(35,29,52,.9);border-color:rgba(167,139,250,.25)}
[data-theme="dark"] .hub-handoff-figure{background:rgba(255,255,255,.08)}
[data-theme="dark"] .hub-handoff strong{color:#f4efff}
[data-theme="dark"] .hub-handoff span{color:#c4b8e8}

/* ── First make: guided first creation entry (A1452) ───────── */
.first-make{padding:var(--jv-space-7) 28px var(--jv-space-8);background:var(--jv-surface-2);border-top:1px solid var(--jv-line);border-bottom:1px solid var(--jv-line);}
.first-make-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center;}
.first-make-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--jv-ember-ink);background:var(--jv-ember-soft);border:1px solid rgba(242,99,122,.28);border-radius:var(--jv-radius-pill);padding:5px 14px;margin-bottom:16px;}
.first-make-kicker img{width:20px;height:20px;border-radius:50%;}
.first-make-title{font-family:var(--jv-font-display);font-size:var(--jv-text-2xl);font-weight:700;color:var(--jv-text);line-height:1.12;margin:0 0 12px;}
.first-make-sub{font-size:1rem;color:var(--jv-text-muted);line-height:1.7;margin:0 0 22px;max-width:520px;}
.first-make-steps{list-style:none;display:grid;gap:10px;margin:0 0 26px;padding:0;max-width:520px;}
.first-make-steps li{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--jv-text);}
.first-make-steps li strong{color:var(--jv-ember-ink);}
.fm-step-num{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--jv-ember);color:#fff;font-family:var(--jv-font-display);font-weight:700;font-size:.9rem;}
.first-make-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.first-make-cta{display:inline-flex;align-items:center;gap:9px;background:var(--jv-ember);color:#fff;font-weight:800;border-radius:var(--jv-radius-md);padding:15px 26px;font-size:1rem;text-decoration:none;box-shadow:0 4px 0 var(--jv-ember-ink);transition:transform var(--jv-ease),box-shadow var(--jv-ease);}
.first-make-cta:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--jv-ember-ink);}
.first-make-cta:focus-visible{outline:3px solid var(--jv-focus);outline-offset:3px;}
.first-make-alt{font-weight:700;font-size:.9rem;color:var(--jv-link);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px;}
.first-make-alt:hover{border-color:var(--jv-link);}
.first-make-alt:focus-visible{outline:3px solid var(--jv-focus);outline-offset:3px;border-radius:4px;}
.first-make-guide{display:inline-flex;align-items:center;gap:7px;min-height:44px;font:inherit;font-size:.9rem;font-weight:700;color:var(--jv-link);background:none;border:none;border-bottom:2px solid transparent;padding:4px 2px;cursor:pointer;text-align:left;}
.first-make-guide:hover{border-bottom-color:var(--jv-link);}
.first-make-guide:focus-visible{outline:3px solid var(--jv-focus);outline-offset:3px;border-radius:4px;}
.first-make-note{margin:18px 0 0;font-size:.78rem;color:var(--jv-text-muted);}
.first-make-preview{display:flex;flex-direction:column;align-items:center;gap:10px;}
.fm-canvas-wrap{width:100%;max-width:340px;background:var(--jv-surface);border:1.5px solid var(--jv-line);border-radius:var(--jv-radius-lg);padding:16px;box-shadow:var(--jv-shadow-2);}
#fmCanvas{display:block;width:100%;height:auto;aspect-ratio:1 / 1;border-radius:var(--jv-radius-md);cursor:pointer;touch-action:none;image-rendering:pixelated;border:1px solid var(--jv-line);background:#FFFDF7;}
#fmCanvas:focus-visible{outline:3px solid var(--jv-focus);outline-offset:3px;}
.fm-canvas-hint{font-size:.8rem;color:var(--jv-text-muted);margin:12px 0 8px;text-align:center;}
.fm-palette{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.fm-swatch{width:32px;height:32px;border-radius:8px;border:2px solid rgba(64,59,51,.18);cursor:pointer;padding:0;transition:transform var(--jv-ease);}
.fm-swatch:hover{transform:scale(1.08);}
.fm-swatch[aria-pressed="true"]{border-color:var(--jv-text);box-shadow:0 0 0 2px var(--jv-surface),0 0 0 4px var(--jv-text);}
.fm-swatch:focus-visible{outline:3px solid var(--jv-focus);outline-offset:2px;}
.fm-tools{display:flex;gap:8px;justify-content:center;margin-top:10px;}
.fm-tool{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font:inherit;font-size:.78rem;font-weight:700;color:var(--jv-text);background:var(--jv-surface-2);border:1px solid var(--jv-line);border-radius:var(--jv-radius-pill);padding:7px 14px;cursor:pointer;}
.fm-tool:hover{background:var(--jv-surface);}
.fm-tool:focus-visible{outline:3px solid var(--jv-focus);outline-offset:2px;}
.fm-preview-caption{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--jv-text-muted);}
.first-make-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
[data-theme="dark"] .fm-swatch[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px var(--jv-surface),0 0 0 4px #fff;}
@media(max-width:860px){.first-make-inner{grid-template-columns:1fr;}.first-make-sub,.first-make-steps{max-width:none;}}
@media(max-width:520px){.first-make{padding-left:18px;padding-right:18px;}.first-make-actions{flex-direction:column;align-items:stretch;}.first-make-cta{justify-content:center;}.first-make-alt,.first-make-guide{text-align:center;justify-content:center;}}
@media(max-width:820px),(max-height:500px){.fm-swatch{width:44px;height:44px;border-radius:10px;}}
@media(prefers-reduced-motion:reduce){.first-make-cta,.fm-swatch{transition:none;}.first-make-cta:hover{transform:none;}}