/* FOR KAYAK TRIP REPORTS AND STORIES */

/* ========================================= */
/* PAGE                                      */
/* ========================================= */

body {
    background: #111;
    color: white;
    overflow-x: hidden;
}

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

.expedition-hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.expedition-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.hero-image {
    position: absolute;
    inset: 0;
    /* 5 29 30 31*/
    background-image: url("../images/gallery/benjis/31.webp");
    background-size: cover;
    background-position: center;
}


/* ========================================= */
/* TEXT OVERLAY */
/* ========================================= */
.hero-overlay-expedition {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
}

.hero-overlay-expedition h1 {
    font-size: 4rem;
    margin-bottom: 20px;
    letter-spacing: 2px;
    overflow: hidden;
    font-family: rock salt;
}

.hero-overlay-expedition p {
    font-size: 1.3rem;
    line-height: 1.6;
    overflow: hidden;
    font-family: story script;
    padding: 0 10px;
}

/* HERO OVERLAY FOR MOBILE */
@media (max-width: 768px) {

    /* HERO TEXT */
    .hero-overlay-expedition {
        width: 90%;
        padding: 0px;
    }

    .hero-overlay-expedition h1 {
        font-size: 2.3rem;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .hero-overlay-expedition p {
        font-size: 1rem;
        line-height: 1.5;
    }

}

/* ========================================= */
/* HERO TEXT                                 */
/* ========================================= */
.hero-location {
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: .8;
}

.hero-overlay h1 {
    font-size: clamp(4rem, 8vw, 8rem);
    margin: .3em 0;
}


.scroll-arrow {
    margin-top: 80px;
    font-size: 2rem;
    animation: bounce 2s infinite;
}

.story-section {
    position: relative;
    background: white;
    color: #222;
    padding: 140px 0;
}

.story-section.dark {
    background: #111;
    color: white;
}

.story {
    width: min(92%, 850px);
    margin: auto;
    line-height: 2;
    font-size: 1.15rem;
}

.story p {
    margin-bottom: 2em;
}

.image-divider {
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.image-two {
    background-image: url("../images/gallery/benjis/17.webp");
}

.image-three {
    background-image: url("../images/gallery/benjis/5.webp");
}

.image-four {
    background-image: url("../images/gallery/benjis/4.webp");
}

.image-five {
    background-image: url("../images/trips/Sunset night 2.webp");
}

/*
CHAPTER DIVIDER IMAGE
*/
.image-divider {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}

.divider-overlay {
    text-align: center;
    padding: 50px;
    max-width: 900px;
    color: white;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, .8);
    animation: fadeIn 1.2s ease;
    position: relative;
    z-index: 2;
}

.divider-overlay h2 {
    margin: 0;
    /* font-family: "annie use your telescope", serif; */
    font-family: 'rock salt';
    font-size: clamp(2.5rem, 5vw, 3rem);
    font-weight: 400;
    line-height: 1.3;
    font-style: italic;
}

.image-divider::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(0, 0, 0, .20),
            rgba(0, 0, 0, .35),
            rgba(0, 0, 0, .20));
    z-index: 1;
}


.story h2 {
    font-size: clamp(2.8rem, 6vw, 5rem);
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

blockquote {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.4;
    text-align: center;
    font-style: italic;
    margin: 120px auto;
    max-width: 900px;
}

/*=========================================================
    EXPEDITION STORY LAYOUT
=========================================================*/
.expedition-section {
    position: relative;
    z-index: 2;
    padding: 140px 0;
    background: rgba(10, 10, 10, 0.82);
}

.expedition-section.dark {
    background: rgba(0, 0, 0, 0.92);
}

.expedition-container {
    width: min(900px, 88%);
    margin: auto;
}

.expedition-container img {
    width: 100%;
}

/*=========================================================
  CHAPTER NUMBER
=========================================================*/
.chapter-number {
    display: block;
    margin-bottom: 12px;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: 7px;
    color: #9bb6c9;
}

/*=========================================================
  MAIN TITLES
=========================================================*/
.expedition-container h2 {
    font-family: "Permanent Marker", cursive;
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1.05;
    color: white;
    margin-bottom: 50px;
}


/*=========================================================
  SUBHEADINGS
=========================================================*/
.expedition-container h3 {
    font-size: 2rem;
    color: white;
    margin-top: 80px;
    margin-bottom: 25px;
    font-weight: 400;
}

/*=========================================================
  NORMAL PARAGRAPHS
=========================================================*/
.expedition-container p {
    color: #d9d9d9;
    font-size: 1.2rem;
    line-height: 2;
    margin-bottom: 34px;
}

/*=========================================================
  OPENING PARAGRAPH
=========================================================*/
.lead {
    font-size: 1.7rem !important;
    line-height: 1.6 !important;
    color: white !important;
    font-weight: 300;
}

/*=========================================================
  LARGE EMPHASIS TEXT
=========================================================*/
.large-text {
    font-size: 2rem !important;
    line-height: 1.5;
    color: white !important;
    font-weight: 300;
    margin: 60px 0;
}

/*=========================================================
  HIGHLIGHT SENTENCE
=========================================================*/
.highlight {
    font-size: 1.8rem !important;
    color: #ffffff !important;
    font-style: italic;
    border-left: 5px solid #bbbbbb;
    padding-left: 28px;
    margin: 55px 0;
}

/*=========================================================
  SURPRISE / REVEAL
=========================================================*/
.surprise {
    text-align: center;
    font-size: 2.5rem !important;
    color: #bbbbbb !important;
    font-family: "Permanent Marker";
    margin: 70px 0;
}

/*=========================================================
  BLOCK QUOTES
=========================================================*/
blockquote {
    margin: 80px auto;
    max-width: 700px;
    text-align: center;
    color: white;
    font-style: italic;
    font-size: 2rem;
    line-height: 1.6;
    position: relative;
}

/*=========================================================
  SECTION DIVIDER
=========================================================*/
.expedition-divider {
    width: 140px;
    height: 2px;
    margin: 100px auto;
    background:
        linear-gradient(to right,
            transparent,
            white,
            transparent);

}

/*=========================================================
  LINKS
=========================================================*/
.expedition-container a {
    color: #79c6ff;
    text-decoration: none;
}

.expedition-container a:hover {
    color: white;
}

/*=========================================================
  MOBILE
=========================================================*/
@media(max-width:900px) {

    .expedition-section {
        padding: 90px 0;
    }

    .lead {
        font-size: 1.45rem !important;
    }

    .large-text {
        font-size: 1.55rem !important;
    }

    .highlight {
        font-size: 1.45rem !important;
    }

    .surprise {
        font-size: 2rem !important;
    }

    blockquote {
        font-size: 1.5rem;
    }

}

/*=========================================================
  EMBEDDED PICTURES
=========================================================*/
/* PLANNING MAP */
.planning-map-container {
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

.planning-map {
    align-items: center;
    width: 80%;
}

@media (max-width: 768px) {
    .planning-map {
        margin: 0;
        width: 100%;
    }
}

.embedded-image img {
    border-radius: 22px;
    width: 100%;
    margin-top: 30px;
}

/*=========================================================
  EMBEDDED VIDEOS
=========================================================*/
.embedded-video {
    width: 100%;
}

.embedded-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-left: auto;
}

@media (max-width: 768px) {
    .embedded-video iframe {
        width: 96%;
        margin-left: 2%;
    }
}

/*=========================================================
  CHAPTER WIDE IMAGE - CHAPTER 3 - INTO THE NORTH CHANNEL
=========================================================*/

/*=================================================
CHAPTER ( - CHAPTER 3 - INTO THE NORTH CHANNEL)
==================================================*/
.chapter-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 140px 0 220px;
}

.north-channel-chapter {
    background-image: url("../images/heroslides/benjis.webp");
}


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

.chapter-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 0 30px;
}

.chapter-number {
    font-size: 1.5rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    opacity: .8;
    margin-bottom: 15px;
    color: white;
}

.chapter-hero h2 {
    font-size: clamp(3rem, 7vw, 6rem);
    margin-bottom: 20px;
    font-family: "Permanent Marker", cursive;
}

.chapter-mini h3 {
    font-size: clamp(3rem, 7vw, 6rem);
    margin-bottom: 20px;
    font-family: "Permanent Marker", cursive;
}

.chapter-date {
    font-size: 1.5rem;
    opacity: .9;
}

/*=========================================
STORY CARDS
=========================================*/

.story-card {
    background: rgba(10, 10, 10, .87);
    backdrop-filter: blur(12px);
    color: white;
    padding: 45px;
    border-radius: 22px;
    margin: 140px auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .75);
}

/* widths */

.card-small {
    width: min(480px, 90%);
}

.card-medium {
    width: min(700px, 92%);
}

.card-large {
    width: min(900px, 94%);
}

.card-wide {
    width: min(1100px, 95%);
}

/* alignment */

.left {
    margin-left: 8%;
    margin-right: auto;
}

.right {
    margin-right: 8%;
    margin-left: auto;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

/*=========================================
SIDE-BY-SIDE STORY ROW
=========================================*/
.story-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    width: min(1400px, 95%);
    margin: 120px auto;
}

/*----------------------------------------
TEXT CARD
----------------------------------------*/

.story-row .story-card {
    margin: 0;
    flex: 1 1 60%;
}

/*----------------------------------------
IMAGE CARD
----------------------------------------*/
.story-image-card {
    flex: 1 1 40%;
    background: rgba(10, 10, 10, .72);
    backdrop-filter: blur(12px);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.story-image-card img {
    display: block;
    width: 100%;
    border-radius: 14px;
}

.story-image-card figcaption {
    margin-top: 15px;
    font-size: .95rem;
    font-style: italic;
    text-align: center;
    color: white;
    opacity: .8;
    line-height: 1.6;
}

.card-center-image {
    width: 40%;
    padding: 0%;
    border: solid 5px black;
}

.card-center-image img {
    width: 100%;
    border-radius: 20px;
}

/*----------------------------------------
OPTIONAL SIZE MODIFIERS
----------------------------------------*/

.story-row.large-text .story-card {
    flex: 2;
}

.story-row.large-text .story-image-card {
    flex: 1;
}

.story-row.large-image .story-card {
    flex: 1;
}

.story-row.large-image .story-image-card {
    flex: 1.5;
}

/*----------------------------------------
MOBILE
----------------------------------------*/

@media(max-width:900px) {

    .story-row {
        display: block;
        width: 92%;
        margin: 70px auto;
    }

    .story-row .story-card {
        margin-bottom: 35px;
    }

    .story-image-card {
        width: 100%;
    }

}

/*=========================================
PHOTOS
=========================================*/

.story-photo {
    width: min(550px, 90%);
    margin: 120px auto;
}

.story-photo img {
    width: 100%;
    display: block;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

.story-photo-scene-2 figcaption {
    text-align: center;
}

.story-photo-scene-2 img {
    width: 60%;
    display: block;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
    margin-left: auto;
    margin-right: auto;
    border: solid 3px rgba(0, 0, 0, .9);
}

@media (max-width: 700px) {
    .story-photo-scene-2 img {
        width: 90%;
    }
}

.story-photo-full-width {
    width: 100%;
    display: block;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
    margin-bottom: 20px;
}

.photo-right {
    margin-left: auto;
    margin-right: 10%;
}

.photo-left {
    margin-right: auto;
    margin-left: 10%;
}

.story-photo figcaption {
    margin-top: 12px;
    text-align: center;
    color: white;
    font-style: italic;
    opacity: .8;
}

/*=========================================
TEXT
=========================================*/

.story-card p {
    font-size: 1.2rem;
    line-height: 2;
    margin: 0;
}

.dropcap:first-letter {
    font-size: 4.8rem;
    float: left;
    line-height: .8;
    padding-right: 10px;
    font-family: "Permanent Marker", cursive;
}

.quote,
.quote p {
    font-size: 1.5rem !important;
    font-style: italic;
    text-align: center;
    font-family: 'Rock salt';
}


/*=========================================
SCROLL REVEAL ANIMATION
=========================================*/

.reveal-animation {
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity .9s ease,
        transform .9s ease;
    will-change: opacity, transform;
}

.reveal-animation.visible {
    opacity: 1;
    transform: translateY(0);
}

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

@media(max-width:850px) {

    .story-card,
    .story-photo,
    .left,
    .right,
    .center {
        width: 92%;
        margin: 70px auto;
    }

    .story-card {
        padding: 30px;
    }

    .chapter {
        background-attachment: scroll;
    }

}

/*   CHAPTER 8 SUNSETS */
.photo-gallery.three-up {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 3rem 0;
}

.photo-gallery figure {
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.photo-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.photo-gallery figure:hover img {
    transform: scale(1.03);
}


/* ===================================== */
/* CHAPTER 9 */
/* ===================================== */

.island-revealed-chapter {
    position: relative;
    background-image: url("../images/gallery/benjis/4.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 140px 0 220px;
}


.island-revealed-chapter h2 {
    font-family: "Permanent Marker", cursive;
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1.05;
    color: black;
    margin-bottom: 50px;
}

.island-revealed-chapter .chapter-number {
    padding-top: 50dvh;
    color: black;
}

.island-revealed-chapter .chapter-title {
    color: black;
    padding-bottom: 25dvh;
    padding-left: 6dvw;
}

.island-story-panel {
    width: 90%;
    margin: 0 auto;
    background: linear-gradient(to bottom, #000000, #282828, #000000);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 20px;
    padding: 70px;
    color: #f2f2f2;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

@media (max-width: 768px) {
    .island-story-panel {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.island-story-panel p {
    margin-bottom: 1.7rem;
}

.island-story-panel .lead {
    font-size: 1.35rem;
}

.island-story-panel .large-text {
    text-align: center;
    font-size: clamp(1.7rem, 2.8vw, 2.6rem);
    margin: 3rem auto;
    max-width: 700px;
}

.island-story-panel blockquote {
    margin: 5rem auto;
    max-width: 700px;
    text-align: center;
    font-family: 'rock salt';
}

.chapter9-photo {
    width: 100%;
}

@media (max-width: 768px) {
    .chapter9-photo {
        width: 100%;
    }
}

/*  CHAPTER 10 */
.chapter-break-2 {
    height: 50dvh;
}

.image-spacer-full {
    height: 40dvh;
}

.action-sequence {
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 600;
    text-align: center;
    margin: 1.2rem 0;
    letter-spacing: .08em;
    color: #f5f5f5;
    opacity: .95;
}

.white-text {
    color: white;
    background-color: rgba(0, 0, 0, 0);
}

/* CHAPTER 11 */
chapter-11-header {
    max-width: 90dvw;
}

/*--------------------------------
    CHAPTER 13
---------------------------------*/
.expedition-section-13 {
    position: relative;
    z-index: 2;
    padding-top: 30px;
    background: rgba(10, 10, 10, 0.82);
}

.chapter-thirteen {
    position: relative;
    background-image: url("../images/trips/Daytime View Southwest.webp");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    animation: pandLeftAndRight 20s infinite;
}

.chapter-thirteen::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(10, 10, 10, .02),
            rgba(10, 10, 10, .10) 20%,
            rgba(10, 10, 10, .25) 45%,
            rgba(10, 10, 10, .65) 65%,
            rgba(10, 10, 10, .85) 100%);

    backdrop-filter:
        saturate(.82) contrast(.92) brightness(.92);
    z-index: 1;
}

.chapter-thirteen>* {
    position: relative;
    z-index: 2;
}

.chapter-13-lead {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.chapter-13-section-header {
    padding-bottom: 20px;
    background-color: #000000;
}

.chapter-13-container {
    margin-top: 0;
    padding-top: 0;
    background-color: #000000;
}

.transition-gradient {
    margin-bottom: 0;
    padding-bottom: 0;
    height: 240px;
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, .10),
            rgba(0, 0, 0, .20) 20%,
            rgba(0, 0, 0, .75) 45%,
            rgba(0, 0, 0, .85) 65%,
            rgba(0, 0, 0, .95) 100%);

}

.chapter-thirteen {
    margin: 0;
    padding-bottom: 0;
}

.expedition-section-13 {
    margin-top: 0;
}

.chapter-13-quote {
    margin-left: auto;
    margin-right: auto;
}

.photo-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin: 70px auto;
    width: min(1200px, 92%);
}

.photo-full-width {
    width: 100%;
    border-radius: 16px;
}

.photo-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
    margin-top: 20px;
    padding-top: 0;
}

.photo-row img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

@media (max-width:900px) {
    .photo-row {
        grid-template-columns: 1fr;
        width: min(95%, 700px);
    }

    .photo-row img {
        height: auto;
    }
}

.ch13-image-1 {
    background-image: url("../images/trips/Western shoreline 2.webp");
}

.image-six {
    background-image: url("../images/gallery/benjis/23.webp");
}

.image-seven {
    background-image: url("../images/trips/last sunset.webp");
}

.image-eight {
    background-image: url("../images/gallery/benjis/16.webp");
    height: 80dvh;
}

.image-nine {
    background-image: url("../images/trips/Island on the benjis.webp");
    height: 85dvh;
}


@media (max-width: 500px) {
    .image-three {
        background-position: 45%;
    }

    .image-five {
        background-position: 70%;
    }

    .image-seven {
        background-position: 44%;
    }

    .image-eight {
        background-position: 14%;
    }
}

/*
=========================================
  JOURNEY END SECTION
*/
.journey-end {
    background: #050505;
    color: white;
    padding: 180px 20px;
    text-align: center;
}

.journey-end-container {
    max-width: 900px;
    margin: auto;
}

.journey-end p {
    line-height: 1.9;
    margin: 30px auto;
}

.journey-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin: 80px 0;
}

.journey-card {
    display: block;
    padding: 35px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 18px;
    color: white;
    text-decoration: none;
    transition: .35s;
}

.journey-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .35);
}

.journey-card span {
    font-size: 2.8rem;
}

.journey-card h3 {
    margin: 18px 0 10px;
}

.journey-footer {
    margin-top: 120px;
}

.journey-footer p {
    font-family: 'Rock Salt', cursive;
    font-size: 1.1rem;
    opacity: .8;
}

.journey-footer h3 {
    margin-top: 25px;
    font-size: 2.2rem;
    letter-spacing: 2px;
}

/*      ANIMATIONS      */
@media (max-width: 600px) {

    .image-two {
        animation: panLeftAndRight2 20s infinite;
    }

    @keyframes panLeftAndRight2 {
        0% {
            background-position: 28%;
        }
        50% {
            background-position: 96%;
        }
        100% {
            background-position: 28%;
        }
    }

    .image-three {
        animation: panLeftAndRight3 16s linear infinite;
    }

    @keyframes panLeftAndRight3 {
        0% {
            background-position: 21%;
        }
        2% {
            background-position: 21%;
        }
        49% {
            background-position: 100%;
        }
        51% {
            background-position: 100%;
        }
        99% {
            background-position: 21%;
        }
        100% {
            background-position: 21%;
        }
    }

    
    .image-six {
        animation: panLeftAndRight6 15s linear infinite;
    }

    @keyframes panLeftAndRight6 {
        0% {
            background-position: 7%;
        }
        2% {
            background-position: 7%;
        }
        49% {
            background-position: 73%;
        }
        51% {
            background-position: 73%;
        }
        98% {
            background-position: 7%;
        }
        100% {
            background-position: 7%;
        }
    }

    .image-seven {
        animation: panLeftAndRight7 20s infinite;
    }

    @keyframes panLeftAndRight7 {
        0% {
            background-position: 20%;
        }
        50% {
            background-position: 58%;
        }
        100% {
            background-position: 20%;
        }
    }

    .image-five, .image-eight, .image-nine {
        animation: pandLeftAndRight 20s infinite;
    }

    @keyframes pandLeftAndRight {
        0% {
            background-position: 10%;
        }
        50% {
            background-position: 90%;
        }
        100% {
            background-position: 10%;
        }
    }

}