/* =========================================================
ALONE AT THE ALTAR

CHAPTER STYLESHEET

Author: Bradley Hobbs

========================================================= */

:root {

--navy:
    #102033;
--navy-deep:
    #081421;
--gold:
    #a97932;
--gold-light:
    #d0a966;
--cream:
    #f7f3ea;
--ivory:
    #fffdf8;
--ink:
    #243344;
--muted:
    #6e6b66;
--line:
    rgba(16, 32, 51, 0.14);

}

* {
    box-sizing:
    border-box;

}

html {

scroll-behavior:
    smooth;

}

body {

margin:
    0;
background:
    var(--ivory);
color:
    var(--ink);
font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

}

a {

color:
    inherit;
text-decoration:
    none;

}

.section-shell {

width:
    min(1400px, calc(100% - 48px));
margin:
    0 auto;

}

.eyebrow {

display:
    block;
margin-bottom:
    18px;
color:
    var(--gold);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.68rem;
font-weight:
    700;
letter-spacing:
    0.22em;
text-transform:
    uppercase;

}

/* =========================================================
HEADER
========================================================= */

.site-header {

position:
    sticky;
top:
    0;
z-index:
    1000;
background:
    rgba(255, 253, 248, 0.97);
border-bottom:
    1px solid
    rgba(16, 32, 51, 0.08);
backdrop-filter:
    blur(12px);

}

.header-inner {

width:
    min(1500px, calc(100% - 48px));
min-height:
    88px;
margin:
    0 auto;
display:
    flex;
align-items:
    center;
gap:
    28px;

}

.site-brand {

display:
    flex;
flex-direction:
    column;
flex-shrink:
    0;

}

.brand-title {

color:
    var(--navy);
font-family:
    "Playfair Display",
    serif;
font-size:
    1.7rem;
font-weight:
    600;
line-height:
    1;

}

.brand-title small {

font-family:
    "Cormorant Garamond",
    serif;
font-size:
    0.9rem;

}

.brand-title strong {

color:
    var(--gold);

}

.brand-subtitle {

margin-top:
    5px;
color:
    var(--muted);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.44rem;
font-weight:
    700;
letter-spacing:
    0.13em;
text-transform:
    uppercase;

}

.site-navigation {

display:
    flex;
gap:
    24px;
margin-left:
    auto;

}

.site-navigation a {

position:
    relative;
padding:
    8px 0;
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.78rem;

}

.site-navigation a::after {

position:
    absolute;
right:
    0;
bottom:
    0;
left:
    0;
height:
    1px;
background:
    var(--gold);
content:
    "";
transform:
    scaleX(0);
transition:
    transform 0.25s ease;

}

.site-navigation a.active::after,
.site-navigation a:hover::after {

transform:
    scaleX(1);

}

.header-button {

padding:
    13px 22px;
background:
    var(--gold);
color:
    #ffffff;
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.7rem;
font-weight:
    700;
transition:
    background 0.25s ease,
    transform 0.25s ease;

}

.header-button:hover {

background:
    var(--navy);
transform:
    translateY(-2px);

}

.mobile-menu-button {

display:
    none;

}

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

.chapter-hero {

padding:
    150px 24px 135px;
background:
    linear-gradient(
        135deg,
        #eee4d5,
        #fffdf8 55%,
        #e9ddcc
    );
text-align:
    center;

}

.chapter-hero-inner {

width:
    min(950px, 100%);
margin:
    0 auto;

}

.chapter-number {

display:
    block;
margin-bottom:
    24px;
color:
    var(--gold);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.78rem;
font-weight:
    700;
letter-spacing:
    0.2em;
text-transform:
    uppercase;

}

.chapter-hero h1 {

margin:
    0;
color:
    var(--navy);
font-family:
    "Playfair Display",
    serif;
font-size:
    clamp(3.8rem, 8vw, 7.5rem);
font-weight:
    500;
line-height:
    0.94;

}

.hero-divider {

display:
    flex;
justify-content:
    center;
margin-top:
    42px;

}

.hero-divider span {

display:
    block;
width:
    110px;
height:
    1px;
background:
    var(--gold);

}

/* =========================================================
CHAPTER CONTENT
========================================================= */

.chapter-content {

padding:
    110px 24px 130px;
background:
    var(--ivory);

}

.chapter-reading-shell {

width:
    min(760px, 100%);
margin:
    0 auto;

}

.chapter-reading-shell p {

margin:
    0 0 30px;
color:
    var(--ink);
font-size:
    clamp(1.35rem, 2vw, 1.65rem);
line-height:
    1.65;

}

.chapter-reading-shell p:first-child::first-letter {

float:
    left;
margin:
    8px 14px 0 0;
color:
    var(--gold);
font-family:
    "Playfair Display",
    serif;
font-size:
    5.5rem;
font-weight:
    500;
line-height:
    0.75;

}

/* =========================================================
CHAPTER NAVIGATION
========================================================= */

.chapter-navigation-section {

padding:
    70px 24px;
background:
    var(--cream);
border-top:
    1px solid var(--line);
border-bottom:
    1px solid var(--line);

}

.chapter-navigation-shell {

width:
    min(1200px, 100%);
margin:
    0 auto;
display:
    grid;
grid-template-columns:
    1fr
    1fr
    1fr;
gap:
    20px;

}

.chapter-navigation {

min-height:
    145px;
padding:
    28px;
display:
    flex;
flex-direction:
    column;
justify-content:
    center;
border:
    1px solid
    rgba(16, 32, 51, 0.12);
background:
    rgba(255, 255, 255, 0.45);
transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;

}

.chapter-navigation:hover {

border-color:
    var(--gold);
background:
    var(--ivory);
transform:
    translateY(-4px);

}

.navigation-label {

margin-bottom:
    10px;
color:
    var(--gold);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.62rem;
font-weight:
    700;
letter-spacing:
    0.16em;
text-transform:
    uppercase;

}

.chapter-navigation strong {

color:
    var(--navy);
font-size:
    1.8rem;
font-weight:
    500;
line-height:
    1.05;

}

.chapter-navigation small {

margin-top:
    8px;
color:
    var(--muted);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.68rem;

}

.previous-chapter {

text-align:
    left;

}

.chapters-link {

align-items:
    center;
text-align:
    center;

}

.next-chapter {

align-items:
    flex-end;
text-align:
    right;

}

/* =========================================================
CHAPTER CLOSING
========================================================= */

.chapter-closing {

padding:
    140px 24px;
background:
    var(--navy);
color:
    #ffffff;
text-align:
    center;

}

.chapter-closing-inner {

width:
    min(850px, 100%);
margin:
    0 auto;

}

.chapter-closing h2 {

margin:
    0;
color:
    #ffffff;
font-family:
    "Playfair Display",
    serif;
font-size:
    clamp(3.5rem, 7vw, 6.5rem);
font-weight:
    500;
line-height:
    0.92;

}

.chapter-closing p {

margin:
    28px 0 38px;
color:
    rgba(255, 255, 255, 0.72);
font-size:
    1.35rem;
font-style:
    italic;

}

.button {

display:
    inline-flex;
align-items:
    center;
justify-content:
    center;
min-height:
    54px;
padding:
    0 30px;
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.75rem;
font-weight:
    700;
transition:
    transform 0.25s ease,
    background 0.25s ease;

}

.button:hover {

transform:
    translateY(-3px);

}

.button-gold {

background:
    var(--gold);
color:
    #ffffff;

}

.button-gold:hover {

background:
    var(--gold-light);

}

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

.site-footer {

background:
    var(--navy-deep);
color:
    #ffffff;

}

.footer-main {

display:
    grid;
grid-template-columns:
    1fr
    auto
    1fr;
align-items:
    center;
gap:
    40px;
padding-top:
    52px;
padding-bottom:
    52px;

}

.footer-title {

display:
    block;
font-family:
    "Playfair Display",
    serif;
font-size:
    2rem;

}

.footer-title small {

font-family:
    "Cormorant Garamond",
    serif;
font-size:
    1rem;

}

.footer-brand p {

margin:
    8px 0 0;
color:
    rgba(255, 255, 255, 0.6);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.58rem;
letter-spacing:
    0.12em;
text-transform:
    uppercase;

}

.footer-navigation {

display:
    flex;
flex-wrap:
    wrap;
justify-content:
    center;
gap:
    18px;

}

.footer-navigation a {

color:
    rgba(255, 255, 255, 0.78);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.72rem;

}

.footer-navigation a:hover {

color:
    var(--gold-light);

}

.footer-scripture {

text-align:
    right;

}

.footer-scripture p {

margin:
    0;
color:
    rgba(255, 255, 255, 0.8);
font-style:
    italic;

}

.footer-scripture span {

color:
    var(--gold-light);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.65rem;

}

.footer-bottom {

border-top:
    1px solid
    rgba(255, 255, 255, 0.1);

}

.footer-bottom-inner {

display:
    flex;
align-items:
    center;
justify-content:
    space-between;
gap:
    20px;
min-height:
    68px;

}

.footer-bottom p,
.legal-links a {

color:
    rgba(255, 255, 255, 0.58);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.65rem;

}

.legal-links {

display:
    flex;
gap:
    18px;

}

.legal-links a:hover {

color:
    var(--gold-light);

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1000px) {

.chapter-navigation-shell {
    grid-template-columns:
        1fr;
}
.chapter-navigation {
    align-items:
        flex-start;
    text-align:
        left;
}
.chapters-link {
    align-items:
        flex-start;
    text-align:
        left;
}
.next-chapter {
    align-items:
        flex-start;
    text-align:
        left;
}
.footer-main {
    grid-template-columns:
        1fr;
    text-align:
        center;
}
.footer-scripture {
    text-align:
        center;
}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 800px) {

.section-shell {
    width:
        min(100% - 30px, 1400px);
}
.header-inner {
    width:
        min(100% - 30px, 1500px);
    min-height:
        74px;
}
.header-button {
    display:
        none;
}
.mobile-menu-button {
    display:
        block;
    width:
        44px;
    height:
        44px;
    margin-left:
        auto;
    padding:
        0;
    border:
        0;
    background:
        transparent;
    cursor:
        pointer;
}
.mobile-menu-button span {
    display:
        block;
    width:
        24px;
    height:
        2px;
    margin:
        5px auto;
    background:
        var(--navy);
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}
.mobile-menu-button.open span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}
.mobile-menu-button.open span:nth-child(2) {
    opacity:
        0;
}
.mobile-menu-button.open span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}
.site-navigation {
    position:
        absolute;
    top:
        100%;
    right:
        0;
    left:
        0;
    display:
        none;
    flex-direction:
        column;
    gap:
        0;
    padding:
        18px;
    background:
        var(--ivory);
    box-shadow:
        0 20px 50px
        rgba(16, 32, 51, 0.15);
}
.site-navigation.open {
    display:
        flex;
}
.site-navigation a {
    padding:
        14px;
}
.site-navigation a::after {
    display:
        none;
}
.chapter-hero {
    padding:
        100px 20px 90px;
}
.chapter-content {
    padding:
        75px 20px 90px;
}
.chapter-reading-shell p {
    margin-bottom:
        26px;
    font-size:
        1.28rem;
    line-height:
        1.65;
}
.chapter-reading-shell p:first-child::first-letter {
    margin-right:
        10px;
    font-size:
        4.5rem;
}
.chapter-navigation-section {
    padding:
        45px 20px;
}
.chapter-navigation {
    min-height:
        120px;
    padding:
        24px;
}
.chapter-closing {
    padding:
        100px 20px;
}
.footer-bottom-inner {
    flex-direction:
        column;
    justify-content:
        center;
    padding:
        18px 0;
    text-align:
        center;
}

.chapter-opening {

padding:
    28px 18px;

margin-bottom:
    45px;

}

.chapter-opening-song {

font-size:
    1.75rem !important;

}

.chapter-opening-note {
    font-size:
        1.4rem !important;
    line-height:
        1.3 !important;
}

.chapter-song-marker {

gap:
    10px;

margin:
    48px 0 34px;

}

.song-marker-line {

width:
    28px;

}

.song-marker-label {

font-size:
    0.57rem;

letter-spacing:
    0.1em;

}

.chapter-closing-thought {

padding:
    30px 18px;

font-size:
    1.4rem !important;

}

}

/* =========================================================
CHAPTER OPENING
========================================================= */

.chapter-opening {

margin:
    0 auto 58px;

padding:
    34px 38px;

border-top:
    1px solid
    var(--gold);

border-bottom:
    1px solid
    var(--line);

text-align:
    center;

}

.chapter-opening-label {

display:
    block;

margin-bottom:
    12px;

color:
    var(--gold);

font-family:
    "DM Sans",
    sans-serif;

font-size:
    0.65rem;

font-weight:
    700;

letter-spacing:
    0.18em;

text-transform:
    uppercase;

}

.chapter-opening-song {

margin:
    0 0 8px !important;

color:
    var(--navy) !important;

font-family:
    "Playfair Display",
    serif !important;

font-size:
    2rem !important;

line-height:
    1.2 !important;

}

.chapter-opening-note {

width:
    min(620px, 100%);

margin:
    0 auto !important;

color:
    var(--muted) !important;

font-family:
    "Cormorant Garamond",
    Georgia,
    serif !important;

font-size:
    1.4rem !important;

line-height:
    1.3 !important;

}


/* =========================================================
SONG MARKERS
========================================================= */

.chapter-song-marker {

display:
    flex;

align-items:
    center;

justify-content:
    center;

gap:
    18px;

margin:
    58px 0 40px;

}

.song-marker-line {

width:
    55px;

height:
    1px;

background:
    var(--gold);

flex-shrink:
    0;

}

.song-marker-label {

color:
    var(--gold);

font-family:
    "DM Sans",
    sans-serif;

font-size:
    0.62rem;

font-weight:
    700;

letter-spacing:
    0.16em;

text-align:
    center;

text-transform:
    uppercase;

}


/* =========================================================
CHAPTER CLOSING THOUGHT
========================================================= */

.chapter-closing-thought {

margin:
    65px auto 0 !important;

padding:
    38px 30px;

border-top:
    1px solid
    var(--gold);

border-bottom:
    1px solid
    var(--gold);

color:
    var(--navy) !important;

font-family:
    "Playfair Display",
    serif !important;

font-size:
    1.65rem !important;

font-weight:
    500;

line-height:
    1.5 !important;

text-align:
    center;

}



/* EXACT INTRODUCTION READING NAVIGATION STYLE */
.reading-navigation {

    padding:
        55px 24px;

    background: var(--warm-white);

}


.reading-navigation-inner {

    width:
        min(1100px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 30px;

}


.reading-navigation-back,
.reading-navigation-next {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.reading-navigation-next {

    align-items: flex-end;

    text-align: right;

}


.navigation-label {

    color: var(--muted);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.6rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    text-transform: uppercase;

}


.reading-navigation strong {

    color: var(--navy);

    font-size: 1.45rem;

    font-weight: 600;

}


.reading-navigation-center {

    display: flex;

    flex-direction: column;

    gap: 6px;

    text-align: center;

}


.reading-navigation-center span {

    color: var(--navy);

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.1rem;

}


.reading-navigation-center small {

    color: var(--gold);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.55rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}


.reading-navigation-back:hover strong,
.reading-navigation-next:hover strong {

    color: var(--gold);

}





/* =========================================================
READING PROGRESS
Matches the Introduction reading indicator so every chapter
shows the reader where they are in the book.
========================================================= */

.reading-progress {

    padding: 20px 24px;

    background: var(--navy);

    color: #ffffff;

}


.reading-progress-inner {

    width:
        min(900px, 100%);

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 20px;

}


.reading-progress-inner > span {

    flex-shrink: 0;

    color:
        rgba(255, 255, 255, 0.72);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 0.6rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.progress-line {

    position: relative;

    flex: 1;

    height: 1px;

    background:
        rgba(255, 255, 255, 0.2);

}


.progress-line span {

    position: absolute;

    top: 0;

    left: 0;

    height: 1px;

    background: var(--gold-light);

}


.reading-progress.progress-chapter-one .progress-line span {
    width: 40%;
}

.reading-progress.progress-chapter-two .progress-line span {
    width: 60%;
}

.reading-progress.progress-chapter-three .progress-line span {
    width: 80%;
}

.reading-progress.progress-chapter-four .progress-line span {
    width: 100%;
}

.reading-progress.progress-complete .progress-line span {
    width: 100%;
}


@media (max-width: 800px) {

    .reading-progress-inner {
        width: 100%;
        gap: 14px;
    }

    .reading-progress-inner > span {
        font-size: 0.55rem;
        letter-spacing: 0.1em;
    }

}

/* Chapter Three reading size adjustment */






/* Chapter Three body text: match the other chapter reading pages */
.chapter-three-content > p,
.chapter-three-content .chapter-reading-shell > p {
    font-size: clamp(1.35rem, 2vw, 1.65rem) !important;
    line-height: 1.65 !important;
}

@media (max-width: 800px) {
    .chapter-three-content > p,
    .chapter-three-content .chapter-reading-shell > p {
        font-size: 1.35rem !important;
        line-height: 1.65 !important;
    }
}