/* ==========================================================
   THE SALTY FLY
   PAGES
   Version 1.0
========================================================== */

/* ==========================================================
   HOME
========================================================== */

.home-book{

    padding-top:120px;
    padding-bottom:72px;

}

.home-art{

    padding-top:24px;
    padding-bottom:72px;

}

.home-travel{

    padding-top:24px;
    padding-bottom:72px;

}

.home-journal{

    padding-top:24px;
    padding-bottom:72px;

}


/* ==========================================================
   BOOK
========================================================== */

.book-intro{

    padding-top:96px;
    padding-bottom:96px;

}

.book-intro-grid{

    display:grid;

    grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);

    gap:96px;

    align-items:center;

}

.book-intro-image img{

    display:block;

    width:100%;

    height:auto;

}

.book-intro-content{

    max-width:42rem;

}

.book-intro-content h1{

    margin-bottom:32px;

}

.book-intro-text{

    max-width:38rem;

}



/* ----------------------------------------------------------
   BOOK — INSIGHTS
---------------------------------------------------------- */

.book-insights{

    padding-top:80px;
    padding-bottom:120px;

}

.book-insights-header{

    margin-bottom:64px;

}

.book-insights-header h2{

    margin-bottom:0;

}

.book-spreads{

    display:grid;
    gap:64px;

}

.book-spread{

    margin:0;

}

.book-spread img{

    display:block;
    width:100%;
    height:auto;

}

/* ----------------------------------------------------------
   BOOK — SAMPLES
---------------------------------------------------------- */

.book-samples{

    padding-top:40px;
    padding-bottom:120px;

}

.book-samples-header{

    margin-bottom:48px;

}

.book-samples-header h2{

    margin-bottom:0;

}

.book-sample-list{

    max-width:900px;

}

.book-sample{

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:40px;

    padding:22px 0;

    color:var(--color-primary);

    text-decoration:none;

    transition:
        opacity var(--transition),
        transform var(--transition);

}

.book-sample-title{

    font-family:var(--font-serif);
    font-size:1.35rem;

}

.book-sample-link{

    flex-shrink:0;

    font-family:var(--font-sans);
    font-size:13px;

    letter-spacing:.1em;
    text-transform:uppercase;

}

.book-sample:hover{

    opacity:.65;
    transform:translateX(4px);

}

/* ----------------------------------------------------------
   BOOK — DETAILS
---------------------------------------------------------- */

.book-details{

    padding-top:80px;
    padding-bottom:120px;

}

.book-details-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:120px;

    align-items:start;

}

.book-details-content,
.book-order{

    max-width:38rem;

}


/* ----------------------------------------------------------
   Book Meta
---------------------------------------------------------- */

.book-meta{

    margin:48px 0 0;

}

.book-meta-item{

    display:grid;

    grid-template-columns:140px 1fr;

    gap:32px;

    padding:10px 0;

}

.book-meta-item dt{

    font-family:var(--font-sans);

    font-size:13px;

    letter-spacing:.1em;

    text-transform:uppercase;

    color:var(--color-primary);

}

.book-meta-item dd{

    margin:0;

    font-family:var(--font-sans);
    font-size:15px;
    font-weight:var(--fw-normal);

    color:var(--color-primary);

    line-height:1.4;

}


/* ----------------------------------------------------------
   Book Order
---------------------------------------------------------- */

.book-order .lead{

    max-width:32rem;

    margin-bottom:32px;

}

/* ==========================================================
   BOOK — RESPONSIVE
========================================================== */

@media (max-width:900px){

    .book-intro{

        padding-top:64px;
        padding-bottom:64px;

    }

    .book-intro-grid{

        grid-template-columns:1fr;

        gap:48px;

    }

    .book-intro-content{

        max-width:none;

    }

}

@media (max-width:900px){

    .book-details{

        padding-top:64px;
        padding-bottom:80px;

    }

    .book-details-grid{

        grid-template-columns:1fr;

        gap:64px;

    }

}
/* ==========================================================
   ART
========================================================== */

.art-intro{

    padding-top:120px;
    padding-bottom:80px;

}

.art-intro-content{

    max-width:none;

}

.art-intro-content h1{

    margin-bottom:32px;

}

.art-gallery{

    padding-top:40px;
    padding-bottom:0;

}

.art-gallery-grid:empty{

    display:none;

}

.art-gallery-grid:empty{

    display:none;

}

/* ----------------------------------------------------------
   ART — TEXT SECTIONS
---------------------------------------------------------- */

.art-text{

    max-width:56rem;

}
.art-story .art-text,
.art-process .art-text{

    max-width:none;

}

.art-story .art-text p,
.art-process .art-text p{

    max-width:none;
    width:100%;

}
.art-story{

    padding-top:64px;

}
/* ----------------------------------------------------------
   ART — GALLERY CATEGORIES
---------------------------------------------------------- */

.art-gallery-categories{

    display:grid;
    gap:140px;

}

.art-category-header{

    margin-bottom:48px;

}

.art-category-header h3{

    margin-bottom:8px;

}

.art-category-header p{

    margin:0;

}


/* ----------------------------------------------------------
   ART — GALLERY GRID
---------------------------------------------------------- */

.art-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:72px 48px;

    align-items:start;

}

.art-work{

    display:block;

    color:var(--color-primary);
    text-decoration:none;

}

.art-work img{

    display:block;

    width:100%;
    height:auto;

    transition:transform .7s ease;

}

.art-work span{

    display:block;

    margin-top:18px;

    font-family:var(--font-serif);
    font-size:1.25rem;

}

.art-work:hover img{

    transform:scale(1.02);

}

/* ==========================================================
   ART — WORK DETAIL
========================================================== */

.artwork{

    padding-top:120px;
    padding-bottom:96px;

}

.artwork-image{

    margin-bottom:96px;

}

.artwork-image img{

    display:block;

    width:100%;
    height:auto;

}
.artwork-image--portrait{

    display:flex;
    justify-content:center;

}

.artwork-image--portrait img{

    width:70%;
    max-width:900px;
    height:auto;

}

.artwork-content{

    max-width:56rem;

}

.artwork-content h1{

    margin-bottom:40px;

}

.artwork-story{

    max-width:48rem;

    margin-bottom:64px;

}


/* ----------------------------------------------------------
   Artwork Meta
---------------------------------------------------------- */

.artwork-meta{

    max-width:48rem;

    margin:0;

}

.artwork-meta-item{

    display:grid;

    grid-template-columns:140px 1fr;

    gap:32px;

    padding:10px 0;

}

.artwork-meta-item dt{

    font-family:var(--font-sans);

    font-size:13px;

    letter-spacing:.1em;
    text-transform:uppercase;

    color:var(--color-primary);

}

.artwork-meta-item dd{

    margin:0;

    font-family:var(--font-sans);

    font-size:15px;
    line-height:1.5;

    color:var(--color-primary);

}


/* ----------------------------------------------------------
   Artwork Order
---------------------------------------------------------- */

.artwork-order{

    margin-top:64px;

}

.artwork-edition{

    margin-bottom:32px;

}

.artwork-order-info{

    margin-bottom:32px;

}

.artwork-delivery{

    margin-top:24px;

}

.artwork-gift-note{

    max-width:36rem;

    margin-top:24px;

    font-size:.95rem;

}

/* ----------------------------------------------------------
   Back to Gallery
---------------------------------------------------------- */

.artwork-back{

    padding-bottom:120px;

}

.artwork-back a{

    color:var(--color-primary);

    text-decoration:none;

    transition:opacity var(--transition);

}

.artwork-back a:hover{

    opacity:.6;

}

/* ==========================================================
   TRAVEL
========================================================== */

.travel-why{

    padding-top:120px;
    padding-bottom:120px;

}

.travel-text{

    max-width:56rem;

}

.travel-text h1{

    margin-bottom:48px;

}

.travel-text{

    max-width:none;
    width:100%;

}
.travel-text p{

    max-width:none;
    width:100%;

}

.travel-text p + p{

    margin-top:28px;

}

.travel-question{

    margin-top:56px !important;
    margin-bottom:56px;

    font-family:var(--font-serif);
    font-size:clamp(1.4rem, 2vw, 1.8rem);
    line-height:1.3;

    color:var(--color-primary);

}

/* ----------------------------------------------------------
   TRAVEL — IMAGE BREAK
---------------------------------------------------------- */

.travel-image-break{

    padding-top:0;
    padding-bottom:120px;

}

.travel-image-break img{

    display:block;

    width:100%;
    height:auto;

}
/* ----------------------------------------------------------
   TRAVEL — CHALLENGES INTRO
---------------------------------------------------------- */

.travel-challenges-intro{

    padding-top:40px;
    padding-bottom:96px;

}

.travel-challenges-text{

    max-width:none;
    width:100%;

}

.travel-challenges-text h2{

    margin-bottom:40px;

}

.travel-challenges-text p{

    max-width:none;
    width:100%;

}

.travel-challenges-text .lead{

    max-width:56rem;

}
/* ----------------------------------------------------------
   TRAVEL — CHALLENGES & QUESTS
---------------------------------------------------------- */

.travel-concept{

    padding-top:80px;
    padding-bottom:120px;

}

.travel-concept-text{

    width:100%;

    margin-bottom:64px;

}

.travel-concept-text p{

    max-width:none;
    width:100%;

}

.travel-concept-feature{

    margin-bottom:24px;

}

.travel-concept-feature img{

    display:block;

    width:100%;
    height:auto;

}

.travel-concept-grid{

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:24px;

}

.travel-concept-grid img{

    display:block;

    width:100%;
    height:auto;

}
/* ----------------------------------------------------------
   TRAVEL — WILDFINS
---------------------------------------------------------- */

.travel-wildfins{

    padding-top:80px;
    padding-bottom:120px;

}

.travel-wildfins-content{

    max-width:56rem;

}

.travel-wildfins-content h2{

    margin-bottom:32px;

}

.travel-wildfins-content .lead{

    max-width:48rem;
    margin-bottom:40px;

}


.page-header {
    padding-top: 120px;
    padding-bottom: 40px;
}

.content-section {
    padding-bottom: 80px;
}


.footer-nav {
    margin-bottom: 20px;
    text-align: center;
}


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


.footer-nav span {
    margin: 0 8px;
}


.footer-copy,
.footer-note {
    text-align: center;
}


.footer-note {
    font-size: 0.9rem;
    margin-top: 10px;
}

/* ======================================================
   BOOK STORY
====================================================== */

.book-story .container {
    max-width: 1200px;
}

.book-story-text {
    column-count: 2;
    column-gap: 4rem;
    column-fill: balance;
}

.book-story-text p {
    break-inside: avoid;
}

@media (max-width: 900px) {

    .book-story-text {
        column-count: 1;
    }

}