html {
    scroll-behavior: smooth;
}

body {
    background-color: #000;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}



/* Poster */
.intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 2.0s ease,
        visibility 2.0s ease;
}

.intro > .poster {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: auto;
    display: block;
    transform: scale(1);
    filter: brightness(1);
    transition:
        transform 1.8s ease-in,
        filter 1.5s ease,
        opacity 1.5s ease;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}

.intro > .sending-back {
    position: absolute;
    left: 50%;
    /*bottom: clamp(25px, 5vh, 60px);*/
    top:50%;
    transform: translate(-50%);
    font-size: clamp(16px, 1.5vw, 25px);

    letter-spacing: 0.08em;
    font-family: "Times New Roman", Times, serif;
    font-weight: 700;
    color: #f6d77a;
    text-shadow:
        1px 1px 0 #6f4a0c,
        0 0 4px rgba(255, 215, 120, 0.55),
        0 0 10px rgba(255, 196, 70, 0.45),
        0 0 22px rgba(255, 175, 30, 0.35),
        0 0 40px rgba(255, 150, 0, 0.20);
    white-space: nowrap;
    opacity: 0;
    animation:
        sending-fade-in 2s ease 1.5s forwards;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}

.sending-back > span {
    animation:
        sending-pulse 2s ease-in-out 2s infinite;
}

.heavenly-light {
    position: absolute;

    width: 200vmax;
    height: 200vmax;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.5);

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 248, 220, 1) 0%,
            rgba(255, 239, 180, 0.8) 15%,
            rgba(255, 255, 255, 0.4) 35%,
            transparent 65%
        );

    transition:
        opacity 1.2s ease,
        transform 1.5s ease;
}


.intro.transitioning .heavenly-light {

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(2);

}

#intro.transitioning {
    pointer-events: none;
}

.intro.transitioning .heavenly-light {
    opacity: 1;
    transform: scale(2);
}

.intro.transitioning > .poster {
    /*
    transform: scale(5);
    filter: brightness(2.8) blur(3px);
    opacity: 0;
    */
    transform: scale(5);
    filter: brightness(2.8);
    opacity: 0;
}

@keyframes sending-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes sending-pulse {
    0%,
    100% {
        opacity: 1
    }
    50% {
        opacity: 0.3;
    }
}

@media (max-width: 900px) {

    .intro.transitioning > .poster {
        transform: scale(3);
    }

}


@media (max-width: 600px) {

    .intro.transitioning > .poster {
        transform: scale(2.5);
    }

}

/* sections */


/* page */
.story-page {
    position: relative;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr;
        width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.story-page > section {
    grid-column: 1;
}

.story-page > .full-bleed {
    grid-column: full;
}

@media (max-width: 480px) {

    /* Prevent grid/flex children from forcing page wider */
    .story-page *,
    .story-page *::before,
    .story-page *::after {
        min-width: 0;
    }

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

    
/* HERO */
.story-hero {
    /*border: 1px solid red;*/
    height: auto;
    display: grid;
    grid-template-columns: 
        minmax(0, 1.0fr)
        minmax(0, 1.10fr);
    grid-gap: 50px;
    align-items: center;
    text-align: left;
    color: #fff;
}

.story-hero-image {
    display: block;
    height: auto;
    width: 75%;
    padding: 27px 0 0 0;
}

.story-hero-image img {
    height: auto;
    object-fit: scale-down;
}

.story-hero-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  padding: 30px 0 0 0;
}

/* MAIN TITLE */
.hero-title {
    font-family: "Cinzel", serif;
    font-weight: 400;
    font-size: clamp(2.7rem, 5.5vw, 8rem);
    line-height: 0.88;
    letter-spacing: 0.03em;
    color: #d8aa63;
    text-transform: uppercase;
}

/* Smaller FROM line */
.hero-title .from {
    display: block;
    font-size: 0.48em;
    letter-spacing: 0.22em;
    line-height: 1.15;
    padding: 0 0 6px 60px;
}

.hero-title .heaven {
    display: block;
    padding: 0 0 0 27px;
}

.tagline-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 525px;
    width: fit-content;
    padding: 0;
    margin: 
        clamp(
            10px,
            calc(4px + (100vw - 800px) * 0.07),
            80px
        ) 
        0 
        0 
        clamp(
            0px,
            calc(4px + (100vw - 800px) * 0.07),
            80px
        );
}

/* TAGLINE */
.hero-tagline {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: clamp(1.3rem, 1.9vw, 2.0rem);
    line-height: 1.15;
    color: #f5f0e7;
    text-align: center;
}

.starburst {
    display: block;
    max-width: 300px;
    height: auto;
    margin: clamp(
        4px,
        calc(4px + (100vw - 800px) * 0.07),
        80px
    ) 0;
}

/* DESCRIPTION */
.hero-description {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: clamp(1.0rem, 1.3vw, 1.40rem);
    line-height: 1.15;
    color: #f5f0e7;
    max-width: 420px;
    margin: 0 0 clamp(
        20px,
        calc(4px + (100vw - 800px) * 0.07),
        80px
    ) 0;
    text-align: center;
}

/* BUTTONS */
.hero-buttons {
    display: flex;
    flex-direction: row;
    gap: 21px;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;

    font-family: "Cinzel", serif;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;

    padding: 10px 18px 9px 18px;

    border: 1px solid #d8aa63;
    border-radius: 2px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;

    cursor: pointer;
    user-select: none;
}

/* PRIMARY — ENTER THE STORY */

.hero-button-primary {
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(255,255,255,0.28),
            transparent 45%
        ),
        linear-gradient(
            90deg,
            #9c6a2f 0%,
            #c9964f 18%,
            #f0d08a 48%,
            #d7aa62 68%,
            #9c6a2f 100%
        );

    /*color: #0b1c2c;*/
    color: #000;
    border: 1px solid #d8aa63;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(80, 45, 10, 0.25);
}

.hero-button-primary:hover {
    background:
        linear-gradient(
            90deg,
            #a97734 0%,
            #d3a456 18%,
            #f7dda0 52%,
            #dfb56e 72%,
            #a97734 100%
        );

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}


/* SECONDARY — ABOUT THE PROJECT */

.hero-button-secondary {
    background: transparent;
    color: #d8aa63;
    border: 1px solid #d8aa63;

    box-shadow:
        inset 0 0 0 1px rgba(255, 220, 160, 0.05);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

.hero-button-secondary:hover {
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(255,255,255,0.22),
            transparent 45%
        ),
        linear-gradient(
            90deg,
            #9c6a2f 0%,
            #c9964f 18%,
            #f0d08a 48%,
            #d7aa62 68%,
            #9c6a2f 100%
        );

    color: #0b1c2c;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.3);
}


/* KEYBOARD FOCUS */

.hero-button:focus-visible {
    outline: 2px solid #f5f0e7;
    outline-offset: 4px;
}


/* CLICK / PRESS */

.hero-button:active {
    transform: translateY(1px);
    box-shadow: none;
}

@media (min-width: 800px) {
    .story-hero-image {
        /*margin-left: clamp(15px, 6vw, 90px);*/
        margin-left: clamp(0px, 7vw, 110px);
    }
    .story-hero-container {
        transform: translateX(-15px);
    }
}
/*
@media (min-width: 800px) and (max-width: 860px) {
    .tagline-container {
        margin-left: 0;
        padding-left: 0;
    }
}
*/
@media (max-width: 800px) {
    .story-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        text-align: center;
        row-gap: 0;
        margin-bottom: 0;
    }

    .story-hero-image {
        height: 50vh;
        min-height: 50vh;
        max-height: 50vh;
        max-width: 100%;
        width: 100%;
        padding: 0;
        text-align: center;
    }

    .story-hero-image img {
        display: block;
        height: 100%;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }
    
    .story-hero-container {
        margin: 0;
        padding: 10px 0;
    }

    .story-hero-text {
        flex: 1;
        display: flex;
        flex-direction: column;
         /* horizontal centering */
        align-items: center;
        /* stay at top vertically */
        justify-content: flex-start;
        margin: 0;
        padding: 5px 0;
    }

    .hero-title .from {
        padding: 0 0 4px 0;
    }

    .hero-title .heaven {
        padding: 0;
    }

    .tagline-container {
        padding: 0;
        margin-left: 0;
        max-width: auto;
    }

    .starburst {
        max-width: 220px;
    }

    .hero-description {
        margin: -3px 0 1.3rem 0;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
}
/* HERO END */
        
/* HOOK */
.story-hook {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: clamp(1.3rem, 1.9vw, 2.0rem);
    line-height: 1.15;
    text-align: left;
    color: #16314c;
    height: 160px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;

    background-color: #f8f1e9;

    background-image:
        url("images/clouds_l.jpg"),
        url("images/clouds_r.jpg");

    background-position:
        left center,
        right center;

    background-repeat:
        no-repeat,
        no-repeat;

    background-size:
        160px auto,
        160px auto;

    display: grid;
    grid-template-columns: 
        repeat(2, 50%);
    grid-gap: 0px;
    align-items: center;
    text-align: left;
}

.story-hook > .title {
    font-size:  clamp(21px, 2.2vw, 32px);
    margin: 0 36px 0 clamp(70px, 15vw, 128px);
}

.story-hook > .text {
    font-size: clamp(16px, 1.35vw, 19px);
    color: #000;
    margin: 0 clamp(10px, 15vw, 625px) 0 18px;
}

.story-hook .begins {
    font-style: italic;
    color: #8c5318;
    padding: 5px 0 0 0;
}

@media (max-width: 800px) {
    .story-hook {
        display: block;
        height: auto;
        background-position:
            left top,
            right bottom;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(255,255,255,0.7);
    }

    .story-hook > .title {
        margin: 15px;
    }

    .story-hook .begins {
        padding: 10px 0 0 0;
    }
    .story-hook > .text {
        margin: 40px 25px;
    }
}

/* HOOK END */
/* STRIP */
.story-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    
    min-height: clamp(220px, 18vw, 320px);
    
    font-family: "Cormorant Garamond", serif;
}

.story-strip > div {
    position: relative;

    min-height: clamp(220px, 18vw, 320px);

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.story-panel-copy {
    background: rgba(245, 236, 224, 0.70);
    padding: clamp(7px, 1vw, 20px);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.20);
}

.story-panel-copy .story-panel-title {
    font-family: "Cinzel", serif;
    font-size: clamp(17px, 1.5vw, 24px);
    line-height: 1.15;
    margin-bottom: 10px;
    font-weight: 600;
}

.story-panel-copy .story-panel-text {
    font-size: clamp(14px, 1.1vw, 18px);
    line-height: 1.25;
    color: #111;
    font-weight: 600;
}

.story-strip > .story-1 {
     background-image:
        url("images/story-1_a.jpg");

    background-position:
        center center;

    background-repeat:
        no-repeat,
        no-repeat;
}

.story-1 .story-panel-copy {
    position: relative;
    top: 48%;
    left: 51%;
    width: 43%;

    transform: translateY(-50%);
}

.story-strip > .story-2 {
     background-image:
        url("images/story-1_b.jpg");

    background-position:
        center center;

    background-repeat:
        no-repeat,
        no-repeat;
}

.story-2 .story-panel-copy {
    position: relative;
    top: 48%;
    left: 51%;
    width: 43%;

    transform: translateY(-50%);

}

.story-strip  > .story-3 {
     background-image:
        url("images/story-1_c.jpg");

    background-position:
        center center;

    background-repeat:
        no-repeat,
        no-repeat;
}

.story-3 .story-panel-copy {
    position: relative;
    top: 48%;
    left: 51%;
    width: 43%;

    transform: translateY(-50%);

    /* compensate for bright bg*/
    background: rgba(245, 236, 224, 0.87);
}

.story-strip > div {
    position: relative;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.story-strip > div:not(:first-child) {
    border-left: 1px solid #fff;
}

@media (max-width: 800px) {
    .story-strip > div:not(:first-child) {
        border-left: none;
    }

    .story-strip > div {
        border-top: 1px solid #fff;
        border-bottom: none;
    }

    .story-strip > div:last-child {
        border-bottom: 1px solid #fff;
    }
}

@media (max-width: 800px) {
    .story-strip {
        grid-template-columns: 1fr;
    }

    .story-strip > div {
        min-height: clamp(340px, 70vw, 430px);
    }
}

@media (min-width: 801px) and (max-width: 950px) {
    .story-panel-copy {
        width: calc(43% + 25px) !important;
        left: 45% !important;
    }
}

/*STRIP END */
/* BANNER */
.story-banner {
    background-color: #000;
    background-image:
        url("images/story-banner-bg.jpg"),
        url("images/story-banner-bg-r.jpg");
    
    background-position-y: 
        center,
        center;

    background-position-x:
        clamp(0px, calc(12vw - 96px), 180px),
        right;

    background-repeat: no-repeat;
    background-size: auto 100%;

    min-height: clamp(220px, 18vw, 291px);

    display: flex;
    align-items: flex-end;
}

.story-banner-content-container {
    width: 52%;
    margin: auto 12% clamp(12px, 2vw, 24px) auto;
 
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.story-banner-content-container > .line-1 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: clamp(2rem, 2.6vw, 3rem);
    line-height: 1.05;

    color: #d9aa5f;
}

.story-banner-content-container > .line-2 {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 500;
    /*font-size: clamp(2rem, 3.2vw, 3.4rem);*/
    font-size: clamp(1.9rem, 2.8vw, 3.1rem);
    line-height: 1.05;

    color: #c58a3f;

    margin-top: 4px;
}

.story-banner-content-container > .star-bottom {
    display: block;

    width: clamp(240px, 28vw, 420px);
    height: auto;

}


@media (max-width: 800px) {

    .story-banner {
        min-height: 430px;
            background-image:
        url("images/story-banner-bg.jpg");

        background-size: auto 72%;
        background-position: center top;

        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .story-banner-content-container {
        width: 100%;
        margin: 0;
        padding: 0 20px 12px;

        text-align: center;
    }

    .story-banner-content-container > .line-1 {
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1;
    }

    .story-banner-content-container > .line-2 {
        font-size: clamp(1.9rem, 7.5vw, 2.6rem);
        line-height: 1.05;
    }

    .story-banner-content-container > .star-bottom {
        width: min(280px, 70vw);
    }
}
/* BANNER END */


/*CHARACTERS */
.story-characters {
    background: #f8f1e9;
    padding:
    /*clamp(24px,3vw,20px)*/
    15px
    clamp(20px,5vw,50px);
}

.character-section-title {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: clamp(18px, 2vw,28px);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #2b241c;
    text-align: center;
    white-space: nowrap;
}

.character-section-title::before,
.character-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(140, 83, 24, 0.35);
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(18px,2.5vw, 38px);
}

.character-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;

    color: #111;
}

.character-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    margin-bottom: 10px;
    border: 1px solid rgba(22, 49, 76, 0.15);
}


.character-name {
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(16px, 1.2vw, 20px);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1b1713;
    margin: 0 0 7px;
}

.character-description {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(16px, 1.15vw, 19px);
    font-weight: 600;
    line-height: 1.25;
    color: #211c17;
    max-width: 260px;
    margin: 0;
}

/* TABLET */
@media (max-width: 1000px) and (min-width: 651px) {
    .character-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .character-card {
        grid-column: span 2;
    }

    /* Center the final row of two */
    .character-card:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .character-card:nth-child(5) {
        grid-column: 4 / span 2;
    }
}

/* MOBILE */
@media (max-width: 650px) {
    .character-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 28px 18px;
    }
}


/* SMALL MOBILE */
@media (max-width: 530px) {
    .character-grid {
        grid-template-columns: 1fr;
    }
    .character-card {
        max-width: 420px;
        margin-inline: auto;
    }
}
/* CHARACTERS END */

/* TRUE STORY */
.story-true-story {
    border-top: 1px solid #ccc;
    background-color: #f5f2ee;

    display: grid;
    grid-template-columns:
        minmax(220px, 0.9fr)
        minmax(300px, 1.25fr)
        minmax(180px, 0.65fr);

    gap: clamp(45px, 3vw, 65px);

    align-items: end;

    padding-top: clamp(18px, 2vw, 30px);
    padding-right: clamp(35px, 6vw, 110px);
    padding-bottom: 0;
    padding-left: clamp(35px, 6vw, 110px);

    color: #000;
    
}


/* ALL THREE BLOCKS */

.story-true-story > article {
    min-width: 0;
    padding: 0;
}

/* LEFT PORTRAIT */

.story-true-story > .block-1 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: end;
}

.block-1-img {
    display: block;

    width: 100%;
    max-width: 360px;

    aspect-ratio: 4 / 3;

    object-fit: cover;
    object-position: center 30%;
}


/* CENTER COPY */

.story-true-story > .block-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: left;
    align-self: center;
    margin-bottom: 0;
    /*transform: translateY(-12px);*/
}

.story-true-story .block-title {
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(19px, 1.6vw, 27px);
    font-weight: 600;
    line-height: 1.1;

    color: #16314c;

    text-transform: uppercase;

    margin-bottom: 12px;
}

.story-true-story .block-2 p {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.25;

    margin: 0 0 12px;
    font-weight: 500;
}

.story-true-story .block-2 p:last-child {
    margin-bottom: 0;
}

.story-true-story .book-title {
    font-style: italic;
    font-weight: 600;
}

#elissa-book,
#elissa-book:visited {
    color: inherit;
}

#elissa-book:hover,
#elissa-book:active {
    color: #b88b4a;
}

/* BOOK */

.story-true-story > .block-3 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    height: 100%;
    align-self: end;
}

.block-3-img {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: clamp(190px, 18vw, 285px);

    object-fit: contain;
    align-self: flex-end;
    margin-bottom: 0;

    transform: translateY(4px);
}

@media (max-width: 950px) {

    .story-true-story {
        grid-template-columns:
            minmax(170px, 0.8fr)
            minmax(260px, 1.3fr)
            minmax(140px, 0.6fr);

        gap: 20px;
        padding: 20px;
    }

    .block-1-img {
        max-width: 280px;
    }

    .block-3-img {
        max-height: 220px;
    }
}


@media (min-width: 651px) and (max-width: 1140px) {
    .block-2 {
        margin-top: 15px;
    }

}

@media (min-width: 651px) and (max-width: 950px) {

    .story-true-story {
        grid-template-columns:
            minmax(170px, 0.8fr)
            minmax(260px, 1.3fr)
            minmax(140px, 0.6fr);

        gap: 20px;

        /* top | sides | bottom */
        padding: 20px 20px 0;

        align-items: end;
    }

    .story-true-story > .block-1,
    .story-true-story > .block-3 {
        display: flex;
        align-items: flex-end;
        height: 100%;
    }

    .story-true-story > .block-1 {
        justify-content: flex-end;
    }

    .story-true-story > .block-2 {
        align-self: center;
    }

    .story-true-story .block-title {
        margin-bottom: 6px;
        line-height: 1.05;
    }

    .story-true-story .block-2 p {
        margin-bottom: 7px;
        line-height: 1.18;
    }

    .story-true-story > .block-3 {
        justify-content: flex-start;
    }
}

@media (min-width: 651px) and (max-width: 850px) {

    .story-true-story > .block-2 {
        align-self: center;
        transform: translateY(-12px);
    }

}

@media (max-width: 650px) {

    .story-true-story {
        grid-template-columns: 1fr;

        gap: 24px;

        padding: 28px 22px 0 22px;
    }

    .story-true-story > .block-1,
    .story-true-story > .block-2,
    .story-true-story > .block-3 {
        justify-content: center;
        text-align: center;
    }

    .story-true-story > .block-2 {
        transform: none;
    }

    .story-true-story > .block-3 {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
    }

    .block-3-img {
        margin-bottom: 0;
        transform: translateX(70px);
    }

    .block-1-img {
        width: min(100%, 360px);
    }

    .block-3-img {
        max-height: 280px;
        margin-inline: auto;
    }
}
/* TRUE STORY END */


/* RECOGNITION */
.story-recognition {
    background: #050b12;
    padding: 14px clamp(20px, 5vw, 70px) 22px;
    text-align: center;
    z-index: 1;
}

.recognition-title {
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(17px, 1.4vw, 22px);
    font-weight: 500;
    letter-spacing: 0.07em;

    color: #d8aa63;

    margin: 0 0 14px;
}

.recognition-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: clamp(14px, 2vw, 30px);

    width: 100%;
    max-width: 1500px;
    margin: 0 auto;

    align-items: center;
}

.recognition-item {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}

.recognition-item img {
    display: block;

    width: 100%;
    max-width: 225px;
    height: auto;

    object-fit: contain;
}

@media (max-width: 1000px) {
    .recognition-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 22px;
    }
}

@media (max-width: 600px) {
    .recognition-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 14px;
    }

    .recognition-item img {
        max-width: 150px;
    }
}
/* RECOGNITION END */


/* WRITER */
.writer-section {
    background: #f5f2ee;
    padding:
        0
        clamp(35px, 6vw, 110px)
        clamp(18px, 2vw, 30px);

    color: #000;
    overflow: hidden;
}

.writer-container {
    display: grid;

    grid-template-columns:
        minmax(220px, .9fr)
        minmax(300px, 1.25fr)
        minmax(180px, .65fr);

    gap: clamp(45px, 3vw, 65px);

    align-items: center;

    width: 100%;
    max-width: none;
    margin: 0;
}


/* IMAGE */

.writer-image {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: start;
}

.writer-image img {
    width: 100%;
    max-width: 360px;

    aspect-ratio: 4 / 3;
    object-fit: cover;
    transform: scaleX(-1);
}


/* COPY */

.writer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 0;
}

.writer-kicker {
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 400;

    letter-spacing: 0.06em;

    color: #2b241c;

    margin-bottom: 3px;
}

.writer-name {
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.035em;

    color: #1c1a18;

    margin-bottom: 12px;
}

.writer-bio {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.25;
    font-weight: 500;
    color: #111;

    max-width: 680px;

    margin-bottom: 16px;
}

/* SCRIPT IMAGE */
.writer-script {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    height: 100%;
}

.writer-script img {
    display: block;

    width: auto;
    max-width: 100%;

    max-height: clamp(190px, 18vw, 285px);

    object-fit: contain;
    transform: translateY(-4px);
}


.writer-image,
.writer-script {
    align-self: start;
}

/* CONTACT BUTTON */

.writer-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    align-self: flex-start;

    white-space: nowrap;

    font-family: "Cinzel", Georgia, serif;
    font-size: 13px;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;

    color: #d8aa63;

    background: #16314c;
    border: 1px solid #d8aa63;

    padding: 11px 22px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.writer-contact-button:hover {
    background: #d8aa63;
    color: #16314c;

    transform: translateY(-2px);

    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

.writer-contact-button:hover {
    background: #2b241c;
    color: #f5f2ee;
}

@media (max-width: 1140px) {

    .writer-content {
        transform: translateY(17px);
    }

}
@media (min-width: 651px) and (max-width: 950px) {

    .writer-section {
        /* mirror of Elissa:
           she has 20px top / 0 bottom
           you have 0 top / 20px bottom */
        padding: 0 20px 20px;
    }

    .writer-container {
        grid-template-columns:
            minmax(170px, 0.8fr)
            minmax(260px, 1.3fr)
            minmax(140px, 0.6fr);

        gap: 20px;
        align-items: start;
    }


    /* ANDREW PHOTO — EXACT SAME SIZE AS ELISSA */

    .writer-image {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        align-self: start;
        height: 100%;
    }

    .writer-image img {
        width: 100%;
        max-width: 280px;

        height: auto;
        aspect-ratio: 4 / 3;

        object-fit: cover;
        object-position: center;
    }


    /* CENTER COPY */

    .writer-content {
        align-self: center;
        padding: 0;
        transform: translateY(12px);
    }


    /* SCRIPT — SAME SIZE RULE AS BOOK */

    .writer-script {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        align-self: start;
        height: 100%;
    }

    .writer-script img {
        width: auto;
        max-width: 100%;
        max-height: 220px;

        height: auto;
        object-fit: contain;

        transform: translateY(-4px);
    }
}

@media (min-width: 651px) and (max-width: 1140px) {
    .writer-content {
        margin-bottom: 20px;
    }

}

@media (max-width: 650px) {

    .writer-section {
        padding:
            0
            22px
            10px;
    }

    .writer-container {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .writer-image {
        width: min(100%, 280px);
        margin: 0 auto;
    }

    .writer-image img {
        width: 100%;
        max-width: 280px;
        height: auto;
        aspect-ratio: 4/3;
        object-fit: cover;
    }

    .writer-content {
        padding: 0;
        text-align: center;
        transform: none;
    }

    .writer-bio {
        margin-inline: auto;
    }

    .writer-script {
        justify-content: center;
        width: 100%;
    }

    .writer-script img {
        width: min(100%, 260px);
        max-width: 260px;
        transform: none;
    }

    .writer-contact-button {
        align-self: center;
    }
}

/* WRITER END */


/* CTA FOOTER */
/* FOOTER */

.site-footer {
    background: #050b12;
    color: #f5f2ee;

    border-top: 1px solid rgba(216, 170, 99, 0.35);

    padding:
        clamp(14px, 1.8vw, 24px)
        clamp(24px, 6vw, 110px);
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;

     gap: clamp(18px, 3vw, 40px);

    align-items: center;

    max-width: none;
    width: 100%;
    margin: 0 auto;
}


/* LEFT SIDE */

.footer-brand {
    display: flex;
    align-items: center;
    gap: clamp(25px, 4vw, 55px);
}

.footer-title {
    display: flex;
    flex-direction: column;

    font-family: "Cinzel", Georgia, serif;
    color: #d8aa63;

    line-height: .82;
    letter-spacing: .08em;

    flex-shrink: 0;
}

.footer-hope,
.footer-heaven {
    font-size: clamp(25px, 2.2vw, 38px);
}

.footer-from {
    font-size: clamp(11px, .9vw, 15px);
    letter-spacing: .35em;

    padding-left: 1.2em;
    margin: 3px 0 4px 0;
}


.footer-meta {
    font-family: "Cinzel", Georgia, serif;

    font-size: clamp(11px, .85vw, 14px);
    font-weight: 500;

    line-height: 1.45;
    letter-spacing: .035em;

    color: #f5f0e7;

    white-space: nowrap;

}

.footer-copyright {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 13px;

    color: rgba(245, 240, 231, .7);

    margin-top: 7px;
}


/* REQUEST BUTTON */

.footer-actions {
    display: flex;
    justify-content: flex-end;
}

.footer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

        white-space: nowrap;
    text-align: center;

    width: fit-content;
    max-width: 100%;

     padding: 12px clamp(16px, 2vw, 24px);

    font-family: "Cinzel", Georgia, serif;
    font-size: 13px;
    font-weight: 600;

    letter-spacing: .08em;

    color: #d8aa63;
    background: transparent;

    border: 1px solid #d8aa63;

    text-decoration: none;

    cursor: pointer;
    user-select: none;

    transition:
        background .2s ease,
        color .2s ease,
        transform .15s ease,
        box-shadow .2s ease;
}

.footer-button:hover {
    background: #d8aa63;
    color: #050b12;

    transform: translateY(-1px);

    box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

/* 671–850: one row */
@media (min-width: 700px) and (max-width: 850px) {

    .footer-inner {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;

        gap: 14px;
        align-items: center;
    }

    .footer-meta {
        font-size: 11px;
        line-height: 1.2;
        white-space: normal;
    }

    .footer-button {
        width: 145px;
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 700px) {

    .site-footer {
        padding: 22px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 18px;
        text-align: center;
    }

    .footer-brand {
        flex-direction: column;
        gap: 14px;
    }

    .footer-title {
        align-items: center;
    }

    .footer-from {
        padding-left: 0;
        align-self: center;
        text-align: center;
    }


    .footer-actions {
        justify-content: center;
    }

    .footer-button {
        width: fit-content;
        white-space: nowrap;
        padding: 11px 20px;
    }
}

/* CTA FOOTER END */

/* TRANSITION EFFECT */
/*
#intro::before {
    content: "";
    position: absolute;
    inset: -50%;
    background:
        repeating-conic-gradient(
            from 0deg,
            transparent 0deg 8deg,
            rgba(255,255,255,.5) 9deg 10deg,
            transparent 11deg 20deg
        );
    opacity: 0;
    transform: scale(.2);
}

#intro.warping::before {
    animation: warp 1s ease-in forwards;
}

@keyframes warp {
    0% {
        opacity: 0;
        transform: scale(.2);
    }

    40% {
        opacity: .8;
    }

    100% {
        opacity: 0;
        transform: scale(5);
    }
}
    */
/*
#intro::before {
    content: "";
    position: absolute;
    inset: -100%;

    background:
        repeating-conic-gradient(
            from 0deg,
            transparent 0deg 8deg,
            rgba(216,170,99,.22) 9deg 10deg,
            transparent 11deg 20deg
        );

    mask-image: radial-gradient(
        circle,
        transparent 0 5%,
        black 15%
    );

    opacity: 0;
    filter: blur(0);

    pointer-events: none;
    transition: opacity .3s ease;
}

#intro.warping::before {

    filter: blur(12px);

    animation: veilWarp 1.2s ease-out forwards;
}

@keyframes veilWarp {

    0% {
        opacity: 0;
        transform: scale(.8) rotate(0deg);
    }

    30% {
        opacity: .4;
    }

    100% {
        opacity: 0;
        transform: scale(3) rotate(25deg);
    }
}

*/

#intro::before {
    content: "";
    position: absolute;

    width: 200vmax;
    height: 200vmax;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(1);

    background:
        repeating-conic-gradient(
            from 0deg,
            transparent 0deg 8deg,
            rgba(216,170,99,.5) 9deg 10deg,
            /*  rgba(216,170,99,.22) 9deg 10deg, */
            transparent 11deg 20deg
        );

    mask-image: radial-gradient(
        circle,
        transparent 0 3%,
        black 12%
    );

    -webkit-mask-image: radial-gradient(
        circle,
        transparent 0 3%,
        black 12%
    );

    opacity: 0;
    filter: blur(12px);

    pointer-events: none;
}


#intro.warping::before {

    animation: veilWarp 1.2s ease-out forwards;

}


@keyframes veilWarp {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(0deg);
    }

    35% {
        opacity: .25;
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(2)
            rotate(25deg);
    }
}


/* END TRANSITION EFFECT */

/* UTILITY PANEL */
.signup-panel {
    background: #333333;
    color: #f5f2ee;

    padding:
        clamp(14px, 2.5vw, 18px)
        clamp(22px, 6vw, 90px);

    border-top: 1px solid rgba(216, 170, 99, .18);
}

.signup-inner {
    max-width: 1320px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(35px, 6vw, 90px);

    align-items: center;
}

.signup-privacy {
    margin-top: 8px;

    font-size: 12px;
    line-height: 1.4;

    color: rgba(245, 242, 238, .58);
}

.signup-privacy a {
    color: #d8aa63;
}

.signup-copy h2 {
    color: #e2ddd5;
    line-height: normal;
}

.signup-copy p {
    color: rgba(245, 242, 238, .82);
}

.signup-form {
    justify-self: center;
}

.signup-form input {
    min-width: 260px;
    padding: 10px 12px;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 16px;

    color: #111;
    background: #f5f2ee;

    border: 1px solid rgba(216, 170, 99, .45);
    outline: none;
}

.signup-form input:focus {
    border-color: #d8aa63;
    box-shadow: 0 0 0 1px rgba(216, 170, 99, .25);
}

.signup-form button {
    padding: 10px 16px;

    font-family: "Cinzel", Georgia, serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;

    color: #d8aa63;
    background: #16314c;

    border: 1px solid #d8aa63;

    cursor: pointer;
}

.signup-success,
.signup-error {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.signup-success {
        width: 100%;
    max-width: 520px;
    margin: 0 auto;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;

    color: rgba(245, 242, 238, .88);
}

.signup-error {
    margin-top: 8px;
    color: #e7b0a8;
}

.signup-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (min-width: 901px) and (max-width: 1300px) {

    .signup-panel {
        padding:
            clamp(18px, 2vw, 26px)
            clamp(24px, 4vw, 55px);
    }

    .signup-inner {
        gap: clamp(24px, 3vw, 45px);
    }

    .signup-copy h2 {
        font-size: clamp(22px, 2vw, 28px);
        line-height: 1.05;
    }

    .signup-copy p {
        font-size: clamp(15px, 1.3vw, 18px);
        line-height: 1.35;
    }

    .signup-privacy {
        font-size: 11px;
        line-height: 1.35;
    }

    .signup-form input {
        min-width: 220px;
        width: clamp(220px, 26vw, 320px);
    }

    .signup-form button {
        padding: 10px 14px;
        font-size: 11px;
    }
}

@media (max-width: 900px) {

    .signup-panel {
        padding: 18px 22px 20px;
    }

    .signup-inner {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }

    .signup-copy {
        max-width: 620px;
        margin: 0 auto;
    }

    .signup-copy h2 {
        font-size: 20px;
        line-height: 1.1;
        margin-bottom: 6px;
    }

    .signup-copy p {
        font-size: 15px;
        line-height: 1.3;
    }

    .signup-privacy {
        margin-top: 7px;
        font-size: 11px;
        line-height: 1.35;
    }

    .signup-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .signup-form input {
        width: 320px;
        max-width: calc(100vw - 44px);
        min-width: 0;
    }

    .signup-form button {
        width: fit-content;
        margin: 0;
    }
}

@media (max-width: 700px) {

    .signup-inner {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .signup-form {
        justify-content: center;
    }
}

@media (max-width: 500px) {

    .signup-panel {
        padding: 16px 16px 18px;
    }

    .signup-copy h2 {
        font-size: 18px;
    }

    .signup-form input {
        width: 280px;
        max-width: calc(100vw - 32px);
    }
}

/* END UTILITY PANEL */

/* PRIVACY MODAL */
.privacy-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: none;
    align-items: center;
    justify-content: center;
}

.privacy-modal.open {
    display: flex;
}

.privacy-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
}

.privacy-modal-content {
    position: relative;
    z-index: 1;

    width: min(90%, 560px);

    background: #f5f2ee;
    color: #1c1a18;

    padding: 30px;

    box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

.privacy-modal-content h2 {
    font-family: "Cinzel", Georgia, serif;
    color: #16314c;

    margin-bottom: 16px;
}

.privacy-modal-content p {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 17px;
    line-height: 1.45;

    margin-bottom: 12px;
}

.privacy-close {
    position: absolute;
    top: 10px;
    right: 14px;

    border: 0;
    background: transparent;

    font-size: 28px;
    cursor: pointer;
}
/* END PRIVACY MODAL */


.no-scroll {
    overflow: hidden;
}

html {
    scrollbar-gutter: stable;
}