@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:wght@400;500;600&family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --ink:#111827;
    --navy:#14284a;
    --gold:#c79843;
    --ivory:#f5f0e6;
    --plum:#563757;
    --white:#fff;
    --display:'Cormorant Garamond','Times New Roman',serif;
    --body:'Poppins',Arial,sans-serif;
    --script:'Allura','Segoe Script',cursive;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    font-family:var(--body);
    font-weight:400;
    color:var(--ink);
    background:var(--ivory);
}

a {
    color:inherit;
}


/* =========================
   HERO
   ========================= */

.hero {
    min-height:100vh;
    color:#fff;
    position:relative;
    background:
        linear-gradient(
            90deg,
            rgba(8,14,21,.72),
            rgba(8,14,21,.48),
            rgba(8,14,21,.62)
        ),
        url('assets/tree.jpg') center 48%/cover no-repeat;
}

.hero nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 6vw;
    font-family:var(--body);
    font-size:.78rem;
    font-weight:500;
    letter-spacing:.14em;
}

.hero nav div {
    display:flex;
    gap:28px;
}

.hero nav a {
    text-decoration:none;
}

.brand {
    font-family:var(--display);
    font-weight:500;
    letter-spacing:.12em;
}

.hero-content {
    width:min(1120px,88vw);
    margin:0 auto;
    padding:8vh 0 10vh;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.hero-logo {
    width:min(300px,48vw);
    margin-bottom:12px;
    filter:
        drop-shadow(0 0 5px rgba(255,255,255,1))
        drop-shadow(0 0 14px rgba(255,255,255,.72))
        drop-shadow(0 9px 9px rgba(255,255,255,.42))
        drop-shadow(0 15px 16px rgba(255,255,255,.20))
        drop-shadow(0 10px 20px rgba(0,0,0,.25));
}

.script {
    font-family:var(--script);
    font-weight:400;
    color:var(--gold);
    font-size:clamp(2.6rem,4.7vw,4.8rem);
    line-height:1;
    margin:.12em 0;
}

.hero h1,
.copy h2,
.work h2,
.book h2,
.vision h2,
.contact h2 {
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(3.4rem,8vw,8rem);
    line-height:.82;
    margin:.12em 0 .35em;
    letter-spacing:.005em;
}

.hero h1 {
    color:#e6edf7;
    max-width:1000px;
}

.lede {
    max-width:780px;
    font-size:1rem;
    line-height:1.8;
    font-weight:300;
    margin:0 auto;
}


/* =========================
   SHARED GRID SECTIONS
   ========================= */

.founder,
.book,
.contact {
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:82vh;
}


/* =========================
   FOUNDER
   ========================= */

.founder {
    background:#101820;
    color:white;
}

.portrait img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 25%;
}

.copy,
.book-copy,
.contact > div {
    padding:9vw 8vw;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.copy h2 {
    font-size:clamp(4rem,7vw,7rem);
    font-weight:400;
    line-height:.8;
    letter-spacing:.01em;
}

.copy .script {
    font-size:clamp(2.7rem,4.2vw,4.3rem);
}

.copy p,
.book-copy p {
    font-family:var(--body);
    font-weight:300;
    line-height:1.8;
    max-width:620px;
}


/* =========================
   OUR WORK / VISION
   ========================= */

.work,
.vision {
    padding:10vw 8vw;
    text-align:center;
}

.work {
    background:#ede4d4;
}

.work .center {
    max-width:760px;
    margin:auto;
    line-height:1.85;
    font-size:1rem;
    font-weight:300;
}

.vision {
    background:#f3eadc;
}

.pillars {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    max-width:1050px;
    margin:50px auto;
}

.pillars article {
    border-top:1px solid rgba(199,152,67,.42);
    padding:28px 16px;
}

.pillars h3 {
    font-family:var(--display);
    font-weight:500;
    letter-spacing:.16em;
    color:var(--navy);
}

.pillars p {
    line-height:1.7;
    font-weight:300;
}

.vision-mark {
    width:140px;
    margin-top:20px;
}


/* =========================
   ARCHITECTURE OF HEALING
   ========================= */

.architecture {
    color:#fff;
    background-image:
        linear-gradient(
            rgba(8,12,18,.78),
            rgba(8,12,18,.78)
        ),
        url('assets/architecture-bg.jpg');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    background-color:#242424;
}

.book-image {
    padding:8vw;
    display:flex;
    align-items:center;
    justify-content:center;
}

.book-image img {
    max-height:70vh;
    max-width:100%;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
}

.book h2 {
    font-size:clamp(3rem,6vw,6rem);
}

.date {
    font-family:var(--script) !important;
    font-weight:400 !important;
    color:var(--gold);
    font-size:2.6rem !important;
    line-height:1.05 !important;
}


/* Publication metadata */

.book-details {
    margin:22px 0 8px;
    padding:18px 0;
    border-top:1px solid rgba(199,152,67,.45);
    border-bottom:1px solid rgba(199,152,67,.45);
}

.book-details p {
    margin:5px 0;
    font-size:.9rem;
    line-height:1.5;
}

.book-details strong {
    font-weight:500;
    color:var(--gold);
}


/* Purchase button */

.book-actions {
    margin-top:24px;
}

.book-button {
    display:inline-block;
    padding:13px 24px;
    border:1px solid var(--gold);
    font-family:var(--body);
    font-size:.82rem;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
    color:#fff;
    background:rgba(199,152,67,.12);
}

.book-button.coming-soon {
    cursor:default;
}


/* =========================
   THROUGH MY EYES
   ========================= */

.tme {
    background:#243a33;
    color:#fff;
}

.tme-art {
    padding:6vw;
    display:flex;
    align-items:center;
}

.tme-art img {
    width:100%;
    max-height:72vh;
    object-fit:cover;
    box-shadow:0 20px 50px rgba(0,0,0,.3);
}


/* =========================
   CONTACT
   ========================= */

.contact {
    background:#f7f1e7;
    align-items:center;
}

.contact a {
    display:block;
    text-decoration:none;
    margin:12px 0;
    font-size:1rem;
    font-weight:300;
}

.contact > img {
    width:min(70%,500px);
    justify-self:center;
}

.contact h2 {
    color:var(--gold);
    font-weight:400;
    line-height:.82;
}

.contact > div {
    align-items:flex-start;
}


/* =========================
   FOOTER
   ========================= */

footer {
    text-align:center;
    background:#151a20;
    color:white;
    padding:9vw 6vw;
}

footer .script {
    font-size:clamp(3rem,7vw,6rem);
}

footer p:not(.script) {
    font-weight:300;
}

footer small {
    display:block;
    margin-top:40px;
    opacity:.65;
    font-family:var(--body);
    font-weight:300;
}


/* =========================
   DESKTOP / LAPTOP
   761px and wider
   ========================= */

@media (min-width:761px) {

    .hero h1 {
        white-space:nowrap;
        max-width:none;
        font-size:clamp(3.7rem,7.1vw,7.6rem);
    }

    .hero-logo {
        width:min(330px,30vw);
    }

    .founder .copy > .script,
    .architecture .book-copy > .script,
    .tme .book-copy > .script {
        white-space:nowrap;
        font-family:var(--script);
        font-weight:400;
        line-height:1;
    }

    .founder .copy > .script {
        font-size:clamp(2.7rem,3.7vw,4.25rem);
    }

    .architecture .book-copy > .script,
    .tme .book-copy > .script {
        font-size:clamp(2.5rem,3.25vw,4rem);
    }

    .book {
        grid-template-columns:minmax(470px,46%) minmax(0,1fr);
    }

    .book-image {
        padding:5vw 3vw 5vw 5vw;
    }

    .book-image img {
        width:min(100%,610px);
        max-width:none;
        max-height:82vh;
        height:auto;
    }

    .book-copy {
        padding:6vw 5vw;
    }

    /* Architecture-specific desktop sizing */

    .architecture {
        min-height:100vh;
    }

    .architecture .book-image {
        padding:4vw 2.5vw 4vw 4vw;
    }

    .architecture .book-image img {
        width:min(100%,540px);
        max-height:76vh;
        height:auto;
        object-fit:contain;
    }

    .architecture .book-copy {
        padding-top:2.5vw;
        padding-bottom:2.5vw;
    }

    .architecture .book-details p {
        margin:4px 0;
    }

    .architecture .book-actions {
        margin-top:18px;
    }

    .tme-art {
        padding:5vw 3vw 5vw 4vw;
    }

    .tme-art img {
        width:min(100%,900px);
        max-width:none;
        max-height:76vh;
        height:auto;
    }

    .contact {
        grid-template-columns:minmax(420px,560px) minmax(380px,520px);
        justify-content:center;
        column-gap:clamp(70px,8vw,150px);
        padding-left:5vw;
        padding-right:5vw;
    }

    .contact > div {
        padding:7vw 0;
    }

    .contact > img {
        width:min(100%,500px);
    }
}


/* =========================
   SMALLER LAPTOP / TABLET
   ========================= */

@media (min-width:761px) and (max-width:1250px) {

    .book {
        grid-template-columns:minmax(430px,48%) minmax(0,1fr);
    }

    .book-image {
        padding:4.5vw 2.5vw 4.5vw 4vw;
    }

    .book-image img {
        width:min(100%,540px);
        max-height:78vh;
    }

    .tme-art {
        padding:4.5vw 2.5vw 4.5vw 3.5vw;
    }

    .tme-art img {
        width:min(100%,720px);
        max-height:70vh;
    }

    .book-copy {
        padding:5vw 4vw;
    }

    .architecture .book-copy > .script,
    .tme .book-copy > .script {
        font-size:clamp(2.3rem,3.4vw,3.25rem);
    }

    /* Preserve final Architecture sizing */
    .architecture .book-image {
        padding:4vw 2.5vw 4vw 4vw;
    }

    .architecture .book-image img {
        width:min(100%,540px);
        max-height:76vh;
    }

    .architecture .book-copy {
        padding-top:2.5vw;
        padding-bottom:2.5vw;
    }
}


/* =========================
   MOBILE / STACKED LAYOUT
   ========================= */

@media (max-width:760px) {

    .hero nav div {
        display:none;
    }

    .hero-content {
        width:88vw;
        padding-top:7vh;
    }

    .hero-logo {
        width:min(270px,62vw);
    }

    .founder,
    .book,
    .contact {
        grid-template-columns:1fr;
    }

    .portrait {
        height:65vh;
    }

    .copy,
    .book-copy,
    .contact > div {
        padding:70px 28px;
    }

    .book-image {
        padding:60px 30px 10px;
    }

    .tme-art {
        padding:60px 24px 10px;
    }

    .pillars {
        grid-template-columns:1fr;
    }

    .contact > img {
        padding:20px 0 70px;
    }

    .hero h1,
    .copy h2,
    .work h2,
    .book h2,
    .vision h2,
    .contact h2 {
        line-height:.9;
    }

    .hero h1 {
        font-size:clamp(3.2rem,17vw,5.4rem);
    }

    .lede {
        text-align:center;
    }

    .copy h2 {
        font-size:clamp(3.7rem,16vw,5.5rem);
    }
}


/* =========================
   PHONE POLISH
   540px and narrower
   ========================= */

@media (max-width:540px) {

    .hero {
        background-image:url('assets/tree-mobile.jpg') !important;
        background-size:cover;
        background-position:center center;
        background-repeat:no-repeat;
        min-height:100vh;
    }

    .date {
        font-size:clamp(1.15rem,5vw,1.5rem) !important;
        white-space:normal;
        text-align:center;
    }

    .date span {
        display:block;
    }

    .tme-art {
        padding:30px 24px;
        min-height:auto;
    }

    .founder .copy > .script {
        font-family:'Allura',cursive !important;
        font-size:clamp(2.7rem,9vw,3.5rem);
        font-weight:400;
        line-height:1;
        white-space:nowrap;
    }

    .architecture .book-copy > .script,
    .tme .book-copy > .script {
        font-family:'Allura',cursive !important;
    }

    .book-image img {
        width:100%;
        max-width:100%;
        height:auto;
    }

    .book,
    .book-image,
    .book-copy,
    .tme,
    .tme-art {
        min-width:0;
        max-width:100%;
    }

    .book-details {
        margin:18px 0 6px;
        padding:15px 0;
    }

    .book-details p {
        font-size:.82rem;
    }

    .book-actions {
        text-align:center;
    }

    .book-button {
        padding:12px 18px;
        font-size:.76rem;
    }
}

/* V17: remove book cover ghosting on desktop */

@media (min-width:761px) {
    .architecture .book-image img {
        box-shadow:none;
    }
}

/* =========================
   V18 - EMAIL SIGNUP
   ========================= */

.newsletter {
    background:#f3eadc;
    text-align:center;
    padding:80px 24px;
}

.newsletter h2 {
    font-family:var(--display);
    font-size:clamp(2.5rem,6vw,5rem);
    font-weight:400;
    color:var(--navy);
    margin:20px 0;
}

.newsletter > p:not(.script) {
    font-family:var(--body);
    font-size:1rem;
    font-weight:300;
    line-height:1.8;
    max-width:620px;
    margin:0 auto 30px;
}

.newsletter-form {
    max-width:600px;
    margin:0 auto;
}

.newsletter-form iframe {
    max-width:100%;
}


/* V18 - ZOHO SIGNUP FORM */

.newsletter-form iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: 0;
    margin: 0 auto;
}

/* V19 - DUAL PURCHASE BUTTONS */

.book-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
}

.book-actions .book-button {
    text-align:center;
}

.book-actions .coming-soon {
    opacity:.75;
    cursor:default;
}

.shop-launch-note {
    flex-basis:100%;
    margin:0;
    color:var(--gold);
    font-size:.8rem;
    letter-spacing:.04em;
}

.book-actions a.book-button {
    transition:background .2s ease,color .2s ease;
}

.book-actions a.book-button:hover {
    background:var(--gold);
    color:var(--navy);
}

.book-actions a.book-button:focus-visible {
    outline:2px solid var(--ivory);
    outline-offset:4px;
}

@media (max-width:540px) {
    .book-actions {
        justify-content:center;
    }
}