/* ==========================================================================
   Anamnesis — design A1 ("deep")
   Warm stone and lamplight, sampled from the From Vision to Reality cover.
   Near-black ground with a fine grain from an inline SVG turbulence filter
   (a photographic tile repeated with a visible grid; a low-frequency
   procedural field read as blotchy cloud). The home hero uses the artwork's
   native 2.667:1 so the icon and the lamp are both in frame.
   ========================================================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Lamplit stone, umber shadow, gold leaf. */
    --ground: #0c0a09;
    --stone-dark: #14100c;
    --stone: #1d1712;
    --stone-lit: #2a2119;
    --card: #221a13;
    --border: #3b2d20;
    --text: #e6dccb;
    --muted: #a4947c;
    --gold: #d8b46a;
    --gold-bright: #eadaae;
    --rule: #9e804c;
    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --max-width: 1040px;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

/* Near-black ground: two warm washes over a fine SVG grain. The grain keeps
   only the high frequencies, at a fraction of the amplitude, so it reads as
   stone rather than as cloud. */
body {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.7;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    background-color: var(--ground);
    background-image:
        radial-gradient(115% 60% at 14% 0%, rgba(122, 92, 52, .10), transparent 58%),
        radial-gradient(85% 55% at 86% 26%, rgba(96, 74, 44, .07), transparent 58%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, repeat;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
}

a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(216, 180, 106, .3);
    transition: color .2s, border-color .2s;
}

a:hover {
    color: var(--gold-bright);
    border-bottom-color: rgba(234, 218, 174, .6);
}

:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 3px;
    border-radius: 2px;
}

/* === Home hero: the whole scene, title low-left ======================== */
.hero {
    position: relative;
    /* The artwork's native 2.667:1 (100vw / 2.667 = 37.5vw). Set as a height,
       not aspect-ratio + min-height: a min-height transferred through
       aspect-ratio would widen the hero past the viewport on narrow screens. */
    height: max(320px, 37.5vw);
    display: flex;
    align-items: flex-end;
    background: #0d0a07;
    overflow: hidden;
}

/* The artwork sits on its own layer so it can carry role="img" and a label
   without hiding the heading inside the hero from assistive technology. */
.hero-art {
    position: absolute;
    inset: 0;
    background: #0d0a07 url('../img/scene-1600.jpg') center / cover no-repeat;
}

/* Scrim: keeps the title readable over the lit floor of the scene. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 10, 7, .42) 0%, rgba(13, 10, 7, 0) 34%, rgba(13, 10, 7, .9) 100%);
}

.hero .container {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-bottom: 42px;
}

.hero-greek {
    font-family: var(--serif);
    font-style: italic;
    /* About twice the old 1.1rem, and half the title at full width
       (title tops out at 4.4rem). The floor keeps it near 2x on phones
       without crowding the smaller title there. */
    font-size: clamp(1.75rem, calc(3.25vw + .5rem), 2.2rem);
    line-height: 1.2;
    color: var(--gold);
    letter-spacing: .04em;
    margin: 0 0 .3rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .85);
}

.hero-title {
    font-size: clamp(2.4rem, 6.5vw, 4.4rem);
    letter-spacing: .16em;
    line-height: 1.15;
    color: var(--gold-bright);
    text-shadow: 0 3px 24px rgba(0, 0, 0, .9);
}

.hero-tagline {
    font-family: var(--serif);
    font-size: clamp(1rem, 2.2vw, 1.4rem);
    line-height: 1.5;
    color: var(--text);
    margin: .5rem 0 0;
    max-width: 44ch;
    text-shadow: 0 3px 24px rgba(0, 0, 0, .9);
}

.hero-author {
    color: var(--muted);
    font-size: .88rem;
    margin: .6rem 0 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}

/* === Scene band between the two libraries ============================== */
.band {
    position: relative;
    height: clamp(190px, 24vw, 320px);
    background: #0d0a07 url('../img/scene-1600.jpg') center 46% / cover no-repeat;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 10, 7, .94) 0%, rgba(13, 10, 7, .18) 40%,
                rgba(13, 10, 7, .18) 60%, rgba(13, 10, 7, .94) 100%);
}

/* Screens wider than 1600px get the full-resolution artwork. */
@media (min-width: 1601px) {
    .hero-art,
    .band { background-image: url('../img/scene-2560.jpg'); }
}

/* Phones: a portrait crop for the hero, and a height the title block fits. */
@media (max-width: 700px) {
    .hero { height: max(400px, 60vh); }
    .hero-art { background-image: url('../img/hero-portrait.jpg'); }
    .band { height: clamp(170px, 42vw, 240px); }
    .band::after { background: rgba(13, 10, 7, .55); }
}

/* === Library sections ================================================== */
.library {
    padding: 72px 0;
}

.library.alt {
    background: rgba(255, 244, 222, .022);
}

.library-title {
    font-size: 2.1rem;
    line-height: 1.2;
    color: var(--gold);
    letter-spacing: .02em;
}

.library-greek {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--muted);
    margin: .3rem 0 0;
}

.library-desc {
    color: var(--muted);
    margin: .2rem 0 2.4rem;
    font-size: .95rem;
}

.book-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
}

.book-card {
    background: rgba(30, 23, 17, .72);
    border: 1px solid #332619;
    border-radius: 3px;
    padding: 28px;
    position: relative;
}

.badge {
    display: inline-block;
    font-family: var(--sans);
    font-size: .66rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 3px 9px;
}

.badge-future {
    color: var(--muted);
    border-color: var(--border);
}

.book-title {
    font-size: 1.55rem;
    line-height: 1.25;
    color: var(--gold-bright);
    margin: .5rem 0 .1rem;
}

.book-subtitle {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--muted);
    margin: 0 0 1rem;
}

.book-blurb {
    font-size: .97rem;
    margin: 0 0 1rem;
}

.book-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--gold-bright);
    border-left: 2px solid var(--rule);
    padding: .2rem 0 .2rem 1.1rem;
    margin: 1.2rem 0;
}

.book-meta {
    font-size: .83rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: .9rem;
    margin: 1.2rem 0 0;
}

.book-meta p { margin-bottom: .3rem; }

.book-meta strong { color: var(--text); font-weight: 500; }

.word-list { line-height: 1.85; }

/* Card link into the detail page (homepage) */
.book-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: .9rem;
    font-weight: 500;
    border-bottom: 0;
}

/* === Conviction ======================================================== */
.conviction {
    padding: 76px 0;
    text-align: center;
    background: rgba(255, 244, 222, .015);
}

.conviction h2 {
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 1.2rem;
}

.conviction .conviction-thesis {
    font-family: var(--serif);
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--gold-bright);
    max-width: 34ch;
    margin: 0 auto 1.6rem;
}

.conviction-thesis strong { font-weight: 600; }

.conviction p {
    max-width: 62ch;
    margin: 0 auto 1rem;
    color: var(--text);
}

/* === Footer ============================================================ */
.site-footer {
    padding: 44px 0;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: .86rem;
    color: var(--muted);
}

.site-footer p { margin-bottom: .5rem; }

.copyright {
    font-size: .76rem;
    margin-top: 1rem;
}

/* ==========================================================================
   Book detail pages
   One reading spine (--measure) shared by prose, contents and CTA, so the
   page has a single vertical axis instead of three competing widths.
   ========================================================================== */

.book-doc {
    --measure: 38rem;
}

.reading {
    max-width: var(--measure);
    margin-inline: auto;
}

/* --- Site chrome ------------------------------------------------------- */
.site-nav {
    border-bottom: 1px solid var(--border);
    background: rgba(12, 10, 9, .88);
    backdrop-filter: saturate(140%) blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .9rem;
}

.nav-brand {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--gold-bright);
    border-bottom: 0;
}

.nav-brand:hover { color: var(--gold); }

.nav-back {
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--muted);
    white-space: nowrap;
    border-bottom: 0;
}

.nav-back:hover { color: var(--gold-bright); }

/* --- Book hero --------------------------------------------------------- */
.book-hero {
    text-align: center;
    padding: clamp(3rem, 2rem + 5vw, 5.5rem) 1.5rem clamp(2.5rem, 2rem + 3vw, 4rem);
    background: radial-gradient(70% 90% at 50% 0%, rgba(122, 92, 52, .12), transparent 70%);
    border-bottom: 1px solid var(--border);
}

.book-hero-imprint {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
}

.book-hero-title {
    font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.2rem);
    font-weight: 600;
    line-height: 1.08;
    color: var(--gold-bright);
    margin-bottom: .6rem;
    text-wrap: balance;
}

.book-hero-subtitle {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
    font-style: italic;
    color: var(--gold);
    margin-bottom: 1.75rem;
    text-wrap: balance;
}

/* Cover beside the title block on wide screens, above it on phones. */
.book-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    max-width: 52rem;
    margin: 0 auto;
}

.book-cover {
    display: block;
    width: 160px;
    height: auto;
    aspect-ratio: 480 / 768;
    border-radius: 2px;
    outline: 1px solid rgba(216, 180, 106, .28);
    outline-offset: -1px;
    box-shadow: 0 1px 0 rgba(234, 218, 174, .08), 0 18px 40px -12px rgba(0, 0, 0, .85),
                0 6px 14px rgba(0, 0, 0, .5);
}

@media (min-width: 760px) {
    .book-hero-inner {
        flex-direction: row;
        align-items: center;
        gap: clamp(2.5rem, 5vw, 4rem);
        text-align: left;
    }
    .book-cover { width: 260px; flex: none; }
    .book-hero-text { flex: 1; min-width: 0; }
    .book-hero-meta { justify-content: flex-start; }
}

/* Meta strip: badge + facts on one baseline, dot-separated */
.book-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem .9rem;
    font-size: .82rem;
    color: var(--muted);
}

.book-hero-meta .dot::before {
    content: "·";
    margin-right: .9rem;
    color: var(--rule);
}

/* --- The pitch: why this book exists, before the prose starts ---------- */
.book-pitch {
    padding: clamp(2.5rem, 2rem + 2vw, 3.5rem) 1.5rem;
    border-bottom: 1px solid var(--border);
}

.book-pitch p {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
    font-style: italic;
    line-height: 1.65;
    color: var(--text);
    text-align: center;
    text-wrap: pretty;
}

/* --- Section label ----------------------------------------------------- */
.section-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 auto clamp(2rem, 1.5rem + 1.5vw, 3rem);
    max-width: var(--measure);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .2em;
    line-height: 1.5;
    text-transform: uppercase;
    text-align: center;
    color: var(--muted);
}

.section-label::before,
.section-label::after {
    content: "";
    flex: 1;
    min-width: 1.5rem;
    height: 1px;
    background: var(--border);
}

/* --- Long-form prose --------------------------------------------------- */
.book-prose {
    padding: clamp(2.5rem, 2rem + 2vw, 4rem) 1.5rem;
    font-size: 1.125rem;
    line-height: 1.8;
    text-wrap: pretty;
}

.book-prose p {
    margin-bottom: 1.35rem;
    color: var(--text);
    hyphens: auto;
}

/* Opening paragraph, with a small-caps lead-in instead of a drop cap. */
.book-lede {
    font-family: var(--serif);
    font-size: 1.4rem;
    line-height: 1.65;
}

.lead-in {
    font-variant-caps: small-caps;
    letter-spacing: .06em;
    color: var(--gold-bright);
}

/* Hairline above each section gives the page its rhythm */
.book-prose h2 {
    font-size: clamp(1.55rem, 1.3rem + 1vw, 1.95rem);
    line-height: 1.25;
    color: var(--gold);
    margin: 3.25rem 0 1.4rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
    text-wrap: balance;
}

.book-prose h2:first-child { margin-top: 0; }

/* Verse: the prayer, and other set-piece quotations */
.verse {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.9;
    text-align: center;
    color: var(--gold-bright);
    padding: 1.9rem 0;
    margin: 2.5rem 0;
    border-top: 1px solid rgba(216, 180, 106, .28);
    border-bottom: 1px solid rgba(216, 180, 106, .28);
}

.book-prose .verse p { color: inherit; margin-bottom: 0; }

.verse cite {
    display: block;
    margin-top: 1rem;
    font-family: var(--sans);
    font-size: .74rem;
    font-style: normal;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Pull-quote: a line lifted out of the argument */
.book-prose .pullquote {
    font-family: var(--serif);
    font-size: clamp(1.35rem, 1.15rem + 1vw, 1.7rem);
    font-style: italic;
    line-height: 1.5;
    color: var(--gold-bright);
    margin: 2.75rem 0;
    padding-left: 1.5rem;
    border-left: 2px solid var(--gold);
}

.book-prose hr {
    border: 0;
    border-top: 1px solid var(--border);
    width: 30%;
    margin: 2.75rem auto;
}

/* Greek / Hebrew terms keep the serif face at a readable size */
.term {
    font-family: var(--serif);
    font-size: 1.1em;
    color: var(--gold-bright);
}

/* --- Contents ---------------------------------------------------------- */
.book-contents {
    padding: clamp(2.5rem, 2rem + 2vw, 4rem) 1.5rem;
    border-top: 1px solid var(--border);
}

.toc-list { list-style: none; }

.toc-item {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    column-gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--border);
}

.toc-item:last-child { border-bottom: 0; }

.toc-num {
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--gold);
    text-align: right;
    padding-top: .05rem;
}

.toc-title {
    font-family: var(--serif);
    font-size: 1.2rem;
    color: var(--text);
    line-height: 1.4;
}

.toc-desc {
    grid-column: 2;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--muted);
    margin-top: .2rem;
}

/* Front/back matter rows have no number */
.toc-item.is-matter .toc-title {
    font-style: italic;
    color: var(--muted);
}

/* Part headings inside a long contents list */
.toc-part {
    padding: 1.6rem 0 .5rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--gold);
    border-bottom: 1px solid var(--border);
}

/* Prose list, closing lines and signature (From Vision to Reality preface) */
.book-prose .prose-list {
    margin: 0 0 1.35rem 1.25rem;
    color: var(--text);
}

.book-prose .prose-list li { margin-bottom: .45rem; padding-left: .25rem; }
.book-prose .prose-list li::marker { color: var(--gold); }

.book-prose .closing-lines {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.6;
    text-align: center;
    color: var(--gold-bright);
    margin: 2.5rem 0;
}

.book-prose .signoff {
    font-family: var(--serif);
    font-size: 1.15rem;
    text-align: right;
    color: var(--muted);
}

/* --- Call to action ---------------------------------------------------- */
.book-cta {
    padding: clamp(2.5rem, 2rem + 2vw, 4rem) 1.5rem clamp(3rem, 2.5rem + 2vw, 4.5rem);
    text-align: center;
    border-top: 1px solid var(--border);
}

.book-cta h2 {
    font-size: clamp(1.6rem, 1.35rem + 1vw, 2rem);
    color: var(--gold);
    margin-bottom: .75rem;
}

.book-cta p {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.7;
    margin: 0 auto 1.75rem;
    max-width: 30rem;
}

.btn-gold {
    display: inline-block;
    background: var(--gold);
    color: var(--stone-dark);
    font-weight: 600;
    font-size: .88rem;
    letter-spacing: .04em;
    padding: .8rem 2rem;
    border: 0;
    border-radius: 3px;
    transition: background .2s, transform .15s;
}

.btn-gold:hover {
    background: var(--gold-bright);
    color: var(--stone-dark);
    transform: translateY(-1px);
}

.btn-gold:focus-visible { outline-offset: 4px; }

/* === Small screens ===================================================== */
@media (max-width: 640px) {
    .container { padding: 0 20px; }
    .library { padding: 52px 0; }
    .library-title { font-size: 1.85rem; }
    .book-card { padding: 22px; }
    .book-title { font-size: 1.4rem; }
    .conviction { padding: 56px 0; }
    .conviction .conviction-thesis { font-size: 1.3rem; }

    .book-prose,
    .book-contents,
    .book-cta,
    .book-pitch,
    .book-hero { padding-inline: 20px; }

    .book-prose { font-size: 1.0625rem; line-height: 1.75; }
    .book-lede { font-size: 1.25rem; }
    .verse { font-size: 1.08rem; line-height: 1.8; }
    .section-label { gap: .75rem; letter-spacing: .16em; }

    .toc-item {
        grid-template-columns: 1.75rem 1fr;
        column-gap: .75rem;
    }

    .nav-brand { font-size: 1rem; letter-spacing: .16em; }
}

/* === Motion ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
    .btn-gold:hover { transform: none; }
}

/* Publisher link in the copyright line: visibly a link, but quiet. */
.copyright a {
    color: inherit;
    border-bottom-color: rgba(164, 148, 124, .45);
}

.copyright a:hover {
    color: var(--gold);
    border-bottom-color: rgba(216, 180, 106, .6);
}