/* ════════════════════════════════════════════════════════════
           Book page template — rendered from books-data.json.
           Dark premium hero, vertical glass idea cards, floating
           areas marquee, and a real shelf of related books.
           ════════════════════════════════════════════════════════════ */

        /* ── Book cover component (shared with the Library page) ───── */
        .bk {
            --bk-c1: var(--surface-strong);
            --bk-c2: var(--peach-2);
            --bk-tone: #7A6142;
            --bk-title: var(--ink);
            --bk-author: var(--ink-faint);
            position: relative;
            aspect-ratio: 2 / 3;
            display: flex; flex-direction: column;
            align-items: center; text-align: center;
            padding: 1.15rem 0.9rem 0.95rem 1.15rem;
            border-radius: 8px 14px 14px 8px;
            background: linear-gradient(168deg, var(--bk-c1) 0%, var(--bk-c2) 100%);
            border: 1px solid rgba(58, 42, 31, 0.14);
            box-shadow:
                inset -6px 0 12px -8px rgba(255, 255, 255, 0.8),
                0 14px 30px rgba(65, 40, 21, 0.16);
            overflow: hidden;
            isolation: isolate;
            transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
        }
        .bk::before {
            content: "";
            position: absolute; inset: 0 auto 0 0; width: 10px;
            background: linear-gradient(90deg, rgba(35, 22, 12, 0.22), rgba(35, 22, 12, 0.05) 55%, transparent);
            border-right: 1px solid rgba(35, 22, 12, 0.08);
        }
        .bk::after {
            content: "";
            position: absolute; inset: 3px 0 3px auto; width: 5px;
            border-radius: 0 12px 12px 0;
            background: repeating-linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.85) 0 2px,
                rgba(120, 96, 72, 0.18) 2px 3px);
            opacity: 0.85;
        }
        .bk-orn {
            width: 40px; height: 7px; margin: 0.7rem 0 auto;
            border-top: 1px solid var(--bk-tone);
            border-bottom: 1px solid var(--bk-tone);
            opacity: 0.45;
        }
        .bk-title {
            font-family: "Playfair Display", "New York", ui-serif, Georgia, "Times New Roman", serif;
            font-size: clamp(1.02rem, 1.35vw, 1.24rem);
            font-weight: 600; line-height: 1.14; letter-spacing: -0.012em;
            color: var(--bk-title); text-wrap: balance;
        }
        .bk-author {
            margin-top: 0.55rem;
            font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
            text-transform: uppercase; color: var(--bk-author);
        }
        .bk-foot {
            margin-top: auto; padding-top: 0.7rem;
            font-size: 0.72rem; font-weight: 700;
            color: var(--bk-tone);
        }

        /* category palettes */
        .cat-clarity      { --bk-c1: #FFFDF8; --bk-c2: #EFE5D0; --bk-tone: #7A6142; }
        .cat-habits       { --bk-c1: #FFF4E5; --bk-c2: #F6D8B2; --bk-tone: #AE4500; }
        .cat-focus        { --bk-c1: #F5F2ED; --bk-c2: #DFD8CB; --bk-tone: #5D5347; }
        .cat-growth       { --bk-c1: #F3F6EE; --bk-c2: #DCE7CF; --bk-tone: #3E6B4A; }
        .cat-resilience   { --bk-c1: #FBEBDE; --bk-c2: #EFCCAC; --bk-tone: #9C4E1D; }
        .cat-relationships{ --bk-c1: #FBEAE3; --bk-c2: #F1D2C5; --bk-tone: #A34A33; }
        .cat-health       { --bk-c1: #F3F5E9; --bk-c2: #E1E3C7; --bk-tone: #67702F; }
        .cat-money        { --bk-c1: #FBF2DB; --bk-c2: #EDDAAB; --bk-tone: #86651A; }
        .cat-presence     { --bk-c1: #F6F1EA; --bk-c2: #E4DACB; --bk-tone: #6E6252; }
        .cat-discipline   {
            --bk-c1: #3A2C21; --bk-c2: #241A12;
            --bk-tone: #E4B98A; --bk-title: #FFF4E2; --bk-author: #B7A28C;
            border-color: rgba(255, 248, 238, 0.14);
            box-shadow:
                inset -6px 0 12px -8px rgba(255, 255, 255, 0.22),
                0 14px 30px rgba(65, 40, 21, 0.28);
        }
        .cat-discipline::before {
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 55%, transparent);
            border-right-color: rgba(0, 0, 0, 0.25);
        }

        /* ── Hero ───────────────────────────────────────────────────── */
        .bd-hero {
            position: relative;
            color: var(--on-dark);
            background:
                radial-gradient(circle at 16% -6%, rgba(238, 120, 23, 0.26), transparent 30rem),
                radial-gradient(circle at 86% 10%, rgba(197, 124, 60, 0.18), transparent 26rem),
                linear-gradient(180deg, #2C2118 0%, #231A14 78%, #201811 100%);
            overflow: hidden;
        }
        .bd-hero-inner {
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
            align-items: center;
            gap: clamp(2rem, 5vw, 4.5rem);
            padding: calc(clamp(6.6rem, 11vw, 8.6rem) + env(safe-area-inset-top, 0px)) 0 clamp(4.6rem, 8vw, 6.6rem);
        }
        .bd-display {
            font-size: clamp(2.5rem, 4.8vw, 4.3rem);
            line-height: 0.98;
            letter-spacing: -0.05em;
            color: var(--on-dark);
            max-width: 17ch;
            margin-top: 0.9rem;
        }
        .bd-hero .lede {
            margin-top: 1.25rem;
            max-width: 50ch;
            color: var(--on-dark-soft);
        }
        .bd-meta {
            display: flex; flex-wrap: wrap; align-items: baseline;
            gap: 0.65rem 1.1rem;
            margin-top: 1.8rem;
            font-size: 0.92rem; font-weight: 600;
            color: var(--on-dark-soft);
        }
        .bd-meta strong {
            color: var(--on-dark);
            font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em;
            font-variant-numeric: tabular-nums;
        }
        .bd-meta .dot {
            width: 4px; height: 4px; border-radius: 50%;
            background: rgba(255, 248, 238, 0.35);
            align-self: center;
        }
        .bd-cta {
            display: flex; flex-wrap: wrap; align-items: center;
            gap: 0.9rem;
            margin-top: 2.1rem;
        }
        .btn-ghost-dark {
            background: rgba(255, 248, 238, 0.07);
            border-color: rgba(255, 248, 238, 0.28);
            color: var(--on-dark);
        }
        .btn-ghost-dark:hover {
            border-color: rgba(255, 248, 238, 0.55);
            background: rgba(255, 248, 238, 0.12);
        }

        .bd-stage {
            position: relative;
            display: grid; place-items: center;
            min-height: clamp(300px, 30vw, 420px);
        }
        .bd-stage::before {
            content: "";
            position: absolute;
            width: clamp(260px, 26vw, 360px);
            aspect-ratio: 1;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(238, 120, 23, 0.28), transparent 65%);
            filter: blur(6px);
        }
        .bd-stage .bk {
            width: clamp(200px, 20vw, 258px);
            transform: rotate(2.5deg);
            padding: 1.4rem 1.15rem 1.15rem 1.5rem;
            box-shadow:
                inset -6px 0 12px -8px rgba(255, 255, 255, 0.8),
                0 46px 90px rgba(0, 0, 0, 0.5);
            animation: coverFloat 7s ease-in-out infinite alternate;
        }
        .bd-stage .bk-title { font-size: clamp(1.35rem, 1.8vw, 1.6rem); }
        .bd-stage .bk-orn { margin: 0.9rem 0 auto; }
        @keyframes coverFloat {
            from { translate: 0 7px; }
            to   { translate: 0 -9px; }
        }

        .bd-hero-edge {
            position: absolute; right: 0; bottom: -1px; left: 0;
            height: clamp(38px, 5vw, 64px);
            background: var(--canvas);
            border-radius: clamp(22px, 3vw, 40px) clamp(22px, 3vw, 40px) 0 0;
        }

        /* ── Ideas: big vertical glass cards ────────────────────────── */
        .ideas-section {
            position: relative;
            padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.4rem, 6vw, 5.4rem);
        }
        /* soft color field behind the glass so the blur has something to hold */
        .ideas-section::before {
            content: "";
            position: absolute; inset: 10% 0 6%;
            background:
                radial-gradient(circle at 16% 30%, rgba(238, 120, 23, 0.16), transparent 24rem),
                radial-gradient(circle at 52% 78%, rgba(47, 125, 80, 0.12), transparent 22rem),
                radial-gradient(circle at 88% 24%, rgba(244, 214, 184, 0.7), transparent 24rem);
            pointer-events: none;
        }
        .ideas-head { position: relative; max-width: 62ch; }
        .ideas-head .section-title { font-size: var(--type-page-section); margin-top: 0.9rem; }
        .ideas-head p { margin-top: 1rem; color: var(--ink-soft); font-size: 1.05rem; }

        .idea-glass-grid {
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: clamp(1.2rem, 2.2vw, 1.8rem);
            margin-top: clamp(2rem, 3.6vw, 3rem);
        }
        .idea-glass {
            position: relative;
            display: flex; flex-direction: column;
            min-height: clamp(400px, 34vw, 480px);
            padding: clamp(1.6rem, 2.4vw, 2.2rem);
            border-radius: 30px;
            background: linear-gradient(170deg, rgba(255, 253, 250, 0.78), rgba(255, 249, 240, 0.52));
            border: 1px solid rgba(255, 255, 255, 0.7);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.85),
                0 1px 0 rgba(58, 42, 31, 0.06),
                0 24px 50px rgba(65, 40, 21, 0.12);
            backdrop-filter: blur(18px) saturate(150%);
            -webkit-backdrop-filter: blur(18px) saturate(150%);
            overflow: hidden;
            transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
        }
        .idea-glass:hover {
            transform: translateY(-7px);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.85),
                0 1px 0 rgba(58, 42, 31, 0.06),
                0 36px 70px rgba(65, 40, 21, 0.18);
        }
        .ig-mark {
            position: absolute; top: -1.4rem; right: 0.4rem;
            font-family: "Playfair Display", "New York", ui-serif, Georgia, serif;
            font-size: 7.5rem; font-weight: 600; line-height: 1;
            color: var(--ink);
            opacity: 0.05;
            pointer-events: none;
        }
        .ig-cat {
            font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em;
            text-transform: uppercase; color: var(--accent-text);
        }
        .ig-principle {
            font-family: "Playfair Display", "New York", ui-serif, Georgia, "Times New Roman", serif;
            font-size: clamp(1.42rem, 1.9vw, 1.72rem);
            font-weight: 600; line-height: 1.22; letter-spacing: -0.015em;
            color: var(--ink);
            margin-top: 1.4rem;
        }
        .ig-why {
            margin-top: auto; padding-top: 1.6rem;
        }
        .ig-why::before {
            content: "";
            display: block;
            width: 44px; height: 2px;
            background: linear-gradient(90deg, var(--accent-bright), transparent);
            margin-bottom: 1rem;
        }
        .ig-why small {
            display: block;
            font-size: 0.68rem; font-weight: 800; letter-spacing: 0.13em;
            text-transform: uppercase; color: var(--ink-faint);
            margin-bottom: 0.45rem;
        }
        .ig-why p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; }

        /* ── The rest of the ideas (dark band) ──────────────────────── */
        .withheld-section { padding: 0 0 clamp(3rem, 5vw, 4.5rem); }
        .withheld {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: clamp(1.6rem, 4vw, 4rem);
            padding: clamp(2rem, 4vw, 3.2rem);
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at 88% 16%, rgba(238, 120, 23, 0.2), transparent 20rem),
                linear-gradient(160deg, #38271F, #231A14);
            color: var(--on-dark);
        }
        .withheld h2 {
            color: var(--on-dark);
            font-size: clamp(1.7rem, 2.8vw, 2.4rem);
            letter-spacing: -0.045em;
        }
        .withheld p {
            margin-top: 0.9rem; max-width: 52ch;
            color: var(--on-dark-soft); font-size: 1.02rem;
        }
        .withheld-count {
            text-align: center;
        }
        .withheld-count strong {
            display: block;
            font-family: "Playfair Display", "New York", ui-serif, Georgia, serif;
            font-size: clamp(3.2rem, 5.5vw, 4.6rem);
            font-weight: 600; letter-spacing: -0.04em; line-height: 1;
            color: var(--on-dark);
            font-variant-numeric: tabular-nums;
        }
        .withheld-count strong span { color: var(--accent-bright); }
        .withheld-count small {
            display: block; margin-top: 0.5rem;
            font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
            text-transform: uppercase; color: var(--on-dark-soft);
        }

        /* ── Areas of growth: floating faded marquee ────────────────── */
        .areas-section { padding: clamp(2rem, 4vw, 3.4rem) 0 clamp(2.6rem, 5vw, 4.2rem); }
        .areas-head { text-align: center; }
        .areas-head .section-title { font-size: var(--type-page-section); margin-top: 0.9rem; }
        .areas-marquee {
            position: relative;
            margin-top: clamp(1.8rem, 3.4vw, 2.8rem);
            overflow: hidden;
        }
        /* soft edges so the words drift in and out of nothing */
        .areas-marquee::before,
        .areas-marquee::after {
            content: "";
            position: absolute; top: 0; bottom: 0; width: clamp(60px, 10vw, 160px);
            z-index: 1;
            pointer-events: none;
        }
        .areas-marquee::before {
            left: 0;
            background: linear-gradient(90deg, var(--canvas), transparent);
        }
        .areas-marquee::after {
            right: 0;
            background: linear-gradient(270deg, var(--canvas), transparent);
        }
        .areas-track {
            display: flex; width: max-content;
            padding: 0.4em 0;
            animation: areasDrift 44s linear infinite;
        }
        .areas-marquee:hover .areas-track { animation-play-state: paused; }
        .areas-track span {
            font-family: "Playfair Display", "New York", ui-serif, Georgia, "Times New Roman", serif;
            font-size: clamp(2.1rem, 4.6vw, 3.7rem);
            font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
            white-space: nowrap;
            color: var(--ink);
            opacity: 0.16;
            padding-right: clamp(2.4rem, 5vw, 4.2rem);
        }
        .areas-track span:nth-child(even) { opacity: 0.3; }
        @keyframes areasDrift {
            to { transform: translateX(-50%); }
        }

        /* ── From the same shelf: a real shelf ──────────────────────── */
        .shelf-section { padding: clamp(2.4rem, 4.6vw, 4rem) 0 clamp(4.4rem, 7vw, 6rem); }
        .shelf-head { max-width: 62ch; }
        .shelf-head .section-title { font-size: var(--type-page-section); margin-top: 0.9rem; }

        .shelf-stage {
            margin-top: clamp(2.4rem, 4vw, 3.4rem);
            overflow-x: auto;
            scrollbar-width: none;
            padding-bottom: 0.5rem;
        }
        .shelf-stage::-webkit-scrollbar { display: none; }
        .shelf-stack { min-width: max-content; padding: 0 0.5rem; }
        .shelf-books {
            display: flex; align-items: flex-end; justify-content: center;
            gap: clamp(1.1rem, 2.4vw, 2rem);
            padding: 0 clamp(1.4rem, 3vw, 3rem);
        }
        .shelf-books .bk {
            width: clamp(158px, 15vw, 188px);
            flex: 0 0 auto;
            /* grounded: the shelf carries the weight, not a floating drop shadow */
            box-shadow:
                inset -6px 0 12px -8px rgba(255, 255, 255, 0.8),
                0 8px 14px -8px rgba(45, 28, 14, 0.5);
        }
        .shelf-books .cat-discipline {
            box-shadow:
                inset -6px 0 12px -8px rgba(255, 255, 255, 0.22),
                0 8px 14px -8px rgba(45, 28, 14, 0.6);
        }
        a.bk:hover, a.bk:focus-visible {
            transform: translateY(-6px);
        }
        .shelf-books .leaning:hover, .shelf-books .leaning:focus-visible {
            transform: rotate(-7deg) translateY(-6px);
        }
        /* narrow spines between the covers */
        .spine {
            flex: 0 0 auto;
            width: clamp(38px, 3.6vw, 46px);
            height: clamp(210px, 20vw, 252px);
            border-radius: 6px 6px 3px 3px;
            display: flex; align-items: center; justify-content: center;
            writing-mode: vertical-rl;
            font-family: "Playfair Display", "New York", ui-serif, Georgia, serif;
            font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
            white-space: nowrap;
            overflow: hidden;
            border: 1px solid rgba(35, 22, 12, 0.18);
            box-shadow:
                inset 3px 0 6px -3px rgba(255, 255, 255, 0.5),
                inset -4px 0 8px -4px rgba(35, 22, 12, 0.4),
                0 8px 14px -8px rgba(45, 28, 14, 0.5);
            transition: transform 0.4s var(--ease);
        }
        a.spine:hover, a.spine:focus-visible { transform: translateY(-6px); }
        .spine.s-warm {
            background: linear-gradient(90deg, #C0703A, #A5561F);
            color: #FFF2E0;
        }
        .spine.s-green {
            background: linear-gradient(90deg, #5E7A52, #46603C);
            color: #EFF4E8;
        }
        .spine.s-dark {
            background: linear-gradient(90deg, #453325, #2C1F14);
            color: #EBD9BF;
        }
        /* one book resting back against its neighbour's spine */
        .shelf-books .leaning {
            transform: rotate(-7deg);
            transform-origin: bottom right;
            margin-left: clamp(1rem, 2.2vw, 1.8rem);
            margin-right: clamp(1.4rem, 3vw, 2.6rem);
        }

        .shelf-plank {
            position: relative;
            height: 26px;
            margin-top: -1px;
            border-radius: 5px 5px 8px 8px;
            background: linear-gradient(180deg, #EBDCC5 0%, #E3D1B4 38%, #C9AF88 42%, #B69A71 100%);
            border: 1px solid rgba(90, 62, 34, 0.28);
            box-shadow:
                inset 0 2px 0 rgba(255, 255, 255, 0.55),
                0 22px 34px -12px rgba(65, 40, 21, 0.4);
        }
        .shelf-plank::after {
            content: "";
            position: absolute; right: 6px; bottom: -14px; left: 6px;
            height: 14px;
            background: radial-gradient(50% 100% at 50% 0%, rgba(65, 40, 21, 0.22), transparent 78%);
            pointer-events: none;
        }

        .shelf-foot {
            display: flex; flex-wrap: wrap; align-items: center;
            justify-content: space-between; gap: 1.4rem;
            margin-top: clamp(2.2rem, 4vw, 3.2rem);
        }
        .attrib-line {
            font-size: 0.85rem; color: var(--ink-faint);
            max-width: 62ch;
        }

        .sr-only {
            position: absolute; width: 1px; height: 1px;
            overflow: hidden; clip: rect(0 0 0 0);
        }

        /* ── Responsive ─────────────────────────────────────────────── */
        @media (max-width: 980px) {
            .idea-glass-grid { grid-template-columns: minmax(0, 1fr); }
            .idea-glass { min-height: 0; }
            .ig-why { margin-top: 1.4rem; }
        }
        @media (max-width: 860px) {
            .bd-hero-inner {
                grid-template-columns: 1fr;
                gap: 2.6rem;
                text-align: center;
            }
            .bd-display, .bd-hero .lede { margin-inline: auto; }
            .bd-meta, .bd-cta { justify-content: center; }
            .bd-meta .dot { display: none; }
            .withheld { grid-template-columns: 1fr; text-align: center; }
            .withheld p { margin-inline: auto; }
            .shelf-books { justify-content: flex-start; }
            .shelf-foot { justify-content: center; text-align: center; }
        }

        @media (prefers-reduced-motion: reduce) {
            .bd-stage .bk { animation: none; }
            .areas-track {
                animation: none;
                width: auto; flex-wrap: wrap; justify-content: center;
            }
            .idea-glass, .bk, .spine { transition: none; }
            .idea-glass:hover, a.bk:hover, a.spine:hover { transform: none; }
            .shelf-books .leaning:hover { transform: rotate(-7deg); }
        }