/* =========================================================
   THE PARACHUTE
   Great Library / Bookshelves

   A visual Sassiverse story about losing your footing,
   creating time, and finding somewhere safe to land.
========================================================= */


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

:root {
    --parachute-blue: #79bde8;
    --parachute-blue-dark: #397da9;
    --parachute-sky: #eaf7ff;

    --parachute-cloud: #f8fcff;

    --parachute-gold: #f6c85f;
    --parachute-gold-soft: #fff1bd;

    --parachute-green: #719b77;
    --parachute-green-soft: #e9f4e8;

    --parachute-pink: #e991b4;
    --parachute-lavender: #c6b4ef;

    --parachute-cream: #fffaf5;
    --parachute-paper: #ffffff;

    --parachute-text: #403835;
    --parachute-muted: #746864;

    --parachute-border: rgba(73, 102, 118, 0.16);

    --parachute-shadow:
        0 18px 45px rgba(60, 88, 102, 0.1);
}


/* =========================================================
   BREADCRUMBS
========================================================= */

.parachute-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;

    width: min(1180px, calc(100% - 3rem));
    margin: 1.25rem auto 0;

    color: var(--parachute-muted);

    font-size: 0.82rem;
}

.parachute-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.parachute-breadcrumbs a:hover {
    text-decoration: underline;
}

.parachute-breadcrumbs span[aria-current="page"] {
    color: var(--parachute-text);
    font-weight: 700;
}


/* =========================================================
   SHARED TYPOGRAPHY
========================================================= */

.parachute-eyebrow,
.parachute-kicker {
    margin: 0 0 0.8rem;

    color: var(--parachute-blue-dark);

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.parachute-section h2 {
    margin: 0 0 1.5rem;

    color: var(--forest);

    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.08;
}

.parachute-section p {
    color: var(--parachute-muted);
    line-height: 1.8;
}


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

.parachute-hero {
    position: relative;

    padding: 6.5rem 1.5rem 6rem;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(255, 255, 255, 0.95),
            transparent 24%
        ),
        radial-gradient(
            circle at 80% 30%,
            rgba(255, 255, 255, 0.82),
            transparent 22%
        ),
        linear-gradient(
            180deg,
            #dff3ff 0%,
            #f1faff 55%,
            var(--parachute-cream) 100%
        );

    text-align: center;
}


/* cloud shapes */

.parachute-hero::before,
.parachute-hero::after {
    position: absolute;

    width: 240px;
    height: 80px;

    border-radius: 999px;

    background: rgba(255,255,255,.58);

    content: "";

    pointer-events: none;
}

.parachute-hero::before {
    top: 120px;
    left: -70px;
}

.parachute-hero::after {
    right: -60px;
    bottom: 100px;
}

.parachute-hero__inner {
    position: relative;
    z-index: 1;

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

.parachute-hero__icon {
    margin-bottom: 1.2rem;

    font-size: clamp(4rem, 10vw, 7rem);
    line-height: 1;
}

.parachute-hero h1 {
    margin: 0;

    color: var(--forest);

    font-size: clamp(3.3rem, 8vw, 6.5rem);
    line-height: 0.95;
}

.parachute-hero__tagline {
    max-width: 720px;
    margin: 1.7rem auto 0;

    color: var(--parachute-text);

    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    line-height: 1.45;
}

.parachute-hero__intro {
    max-width: 680px;
    margin: 1.4rem auto 2rem;

    font-size: 1.08rem;
    line-height: 1.8;
}


/* =========================================================
   BUTTONS
========================================================= */

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

    min-height: 50px;

    padding: 0.85rem 1.7rem;

    color: white;
    background: var(--parachute-blue-dark);

    border: 2px solid var(--parachute-blue-dark);
    border-radius: 999px;

    font-weight: 750;
    text-decoration: none;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.parachute-button:hover,
.parachute-button:focus-visible {
    transform: translateY(-2px);

    background: #2e698f;

    box-shadow:
        0 10px 24px rgba(57, 125, 169, 0.2);
}

.parachute-button--secondary {
    color: var(--forest);
    background: white;
    border-color: var(--forest);
}


/* =========================================================
   GENERAL STORY SECTIONS
========================================================= */

.parachute-section {
    padding: 5.5rem 1.5rem;
}

.parachute-story {
    width: min(820px, 100%);
    margin: 0 auto;

    text-align: center;
}

.parachute-story__scene {
    width: 100%;
}

.parachute-story__symbol {
    margin-bottom: 1rem;

    font-size: 3.5rem;
    line-height: 1;
}

.parachute-story p {
    max-width: 680px;
    margin: 0 auto 1rem;
}

.parachute-story__big-line {
    margin-top: 2rem !important;

    color: var(--parachute-text) !important;

    font-size: clamp(1.3rem, 2.7vw, 1.65rem);
    font-weight: 800;
    line-height: 1.5 !important;
}


/* =========================================================
   WALKING THE TRAIL
========================================================= */

.parachute-section--trail {
    background:
        linear-gradient(
            180deg,
            var(--parachute-cream),
            #f5f3e9
        );
}


/* =========================================================
   ROCK ARRIVES
========================================================= */

.parachute-section--rock {
    background:
        linear-gradient(
            180deg,
            #f5f3e9,
            #eee9e5
        );
}


/* =========================================================
   SPINNING
========================================================= */

.parachute-section--spinning {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.75),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #f1edf8,
            #edf6fb
        );
}

.parachute-centered-copy {
    max-width: 700px;
    margin: 0 auto 0.75rem;

    text-align: center;
}

.parachute-thought-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 0.9rem;

    width: min(900px, 100%);
    margin: 2.5rem auto;
}

.parachute-thought-cloud span {
    display: inline-flex;

    padding: 0.8rem 1.1rem;

    background: rgba(255,255,255,.82);

    border: 1px solid rgba(110, 92, 145, 0.15);
    border-radius: 999px;

    box-shadow:
        0 8px 20px rgba(73, 56, 92, 0.07);

    color: var(--parachute-text);

    font-size: 0.95rem;
    font-weight: 650;
}

.parachute-thought-cloud span:nth-child(odd) {
    transform: rotate(-2deg);
}

.parachute-thought-cloud span:nth-child(even) {
    transform: rotate(2deg);
}

.parachute-check {
    width: min(680px, 100%);
    margin: 2rem auto;

    text-align: center;
}

.parachute-check p {
    margin: 0.5rem 0;
}


/* =========================================================
   QUOTE
========================================================= */

.parachute-quote {
    width: min(720px, 100%);
    margin: 2.5rem auto 0;
    padding: 2rem;

    background: rgba(255,255,255,.78);

    border-left: 6px solid var(--parachute-gold);
    border-radius: 22px;

    box-shadow: var(--parachute-shadow);

    text-align: center;
}

.parachute-quote p {
    margin: 0 0 0.7rem;
}

.parachute-quote strong {
    display: block;

    color: var(--forest);

    font-size: clamp(1.25rem, 2.5vw, 1.55rem);
    line-height: 1.45;
}


/* =========================================================
   CHOICE
========================================================= */

.parachute-section--choice {
    background: var(--parachute-cream);
}

.parachute-choice-card {
    width: min(980px, 100%);
    margin: 0 auto;

    text-align: center;
}

.parachute-choice-card__icon {
    margin-bottom: 1rem;

    font-size: 3rem;
}

.parachute-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1.5rem;

    margin-top: 2.5rem;
}

.parachute-choice {
    padding: 2.2rem;

    background: white;

    border: 1px solid var(--parachute-border);
    border-radius: 26px;

    box-shadow: var(--parachute-shadow);
}

.parachute-choice--pull {
    background:
        linear-gradient(
            145deg,
            #eaf7ff,
            #fff9e7
        );
}

.parachute-choice__symbol {
    margin-bottom: 0.8rem;

    font-size: 2.8rem;
}

.parachute-choice h3 {
    color: var(--forest);
}

.parachute-choice p {
    margin: 0.5rem 0;
}

.parachute-choice__question {
    margin-top: 1.5rem !important;

    color: var(--parachute-blue-dark) !important;

    font-size: 1.5rem;
    font-weight: 850;
}


/* =========================================================
   REMINDER
========================================================= */

.parachute-section--reminder {
    background: var(--parachute-green-soft);
}

.parachute-language {
    display: grid;

    gap: 0.8rem;

    width: min(640px, 100%);
    margin: 2rem auto;
}

.parachute-language p {
    margin: 0;

    padding: 1rem 1.25rem;

    color: var(--parachute-text);

    background: white;

    border: 1px solid rgba(70, 105, 73, 0.14);
    border-radius: 18px;

    font-size: 1.05rem;
    font-weight: 700;
}


/* =========================================================
   WHOOSH
========================================================= */

.parachute-section--whoosh {
    padding-top: 7rem;
    padding-bottom: 7rem;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.95),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #cdeaff,
            #edf8ff
        );
}

.parachute-whoosh {
    text-align: center;
}

.parachute-cord {
    margin: 1.5rem 0 0;

    color: var(--parachute-blue-dark);

    font-size: 4rem;
    line-height: 1;
}

.parachute-whoosh__word {
    margin: 1rem 0 !important;

    color: var(--parachute-blue-dark) !important;

    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 900;
    letter-spacing: 0.04em;
}

.parachute-whoosh__icon {
    font-size: clamp(5rem, 14vw, 9rem);
    line-height: 1;
}

.parachute-whoosh__breath {
    margin-top: 1.8rem !important;

    color: var(--forest) !important;

    font-size: 1.5rem;
    font-weight: 800;
}


/* =========================================================
   TIME
========================================================= */

.parachute-section--time {
    background:
        linear-gradient(
            180deg,
            #edf8ff,
            #fbfdff
        );
}


/* =========================================================
   LANDING
========================================================= */

.parachute-section--landing {
    background:
        linear-gradient(
            180deg,
            #fbfdff,
            #fff8e9
        );
}

.parachute-landing__heading {
    width: min(780px, 100%);
    margin: 0 auto 3rem;

    text-align: center;
}

.parachute-landing__heading p {
    margin: 0.7rem auto;
}

.parachute-landing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 1rem;

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

.parachute-landing-card {
    min-width: 0;

    padding: 1.7rem 1rem;

    background: rgba(255,255,255,.82);

    border: 1px solid rgba(168, 135, 67, 0.15);
    border-radius: 22px;

    box-shadow:
        0 10px 25px rgba(99, 78, 46, 0.06);

    text-align: center;
}

.parachute-landing-card span {
    display: block;

    margin-bottom: 0.8rem;

    font-size: 2.5rem;
}

.parachute-landing-card h3 {
    margin: 0;

    color: var(--forest);

    font-size: 1.05rem;
}

.parachute-landing__note {
    width: min(720px, 100%);
    margin: 2.5rem auto 0;

    text-align: center;
}


/* =========================================================
   LANDED
========================================================= */

.parachute-section--landed {
    background:
        linear-gradient(
            180deg,
            #fff8e9,
            #edf5e9
        );
}

.parachute-landed {
    width: min(760px, 100%);
    margin: 0 auto;

    text-align: center;
}

.parachute-landed__feet {
    margin-bottom: 1rem;

    font-size: 4rem;
}

.parachute-landed p {
    margin: 0.7rem auto;
}

.parachute-landed__message {
    margin: 1.8rem auto !important;

    color: var(--forest) !important;

    font-size: 1.6rem;
    font-weight: 850;
}


/* =========================================================
   FENCE PREVIEW
========================================================= */

.parachute-section--fence {
    background: #edf5e9;
}

.parachute-fence {
    width: min(780px, 100%);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem);

    background: rgba(255,255,255,.76);

    border: 1px solid rgba(70,105,73,.15);
    border-radius: 30px;

    box-shadow: var(--parachute-shadow);

    text-align: center;
}

.parachute-fence__icon {
    margin-bottom: 1rem;

    font-size: 3rem;
}

.parachute-fence p {
    margin: 0.8rem auto;
}

.parachute-fence__crocs {
    margin: 1.4rem auto !important;

    font-size: 2.1rem;
    letter-spacing: 0.25rem;
}


/* =========================================================
   REMEMBER
========================================================= */

.parachute-section--remember {
    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.85),
            transparent 44%
        ),
        linear-gradient(
            145deg,
            #edf7ff,
            #fff7da
        );
}

.parachute-remember {
    width: min(800px, 100%);
    margin: 0 auto;

    text-align: center;
}

.parachute-remember__icon {
    margin-bottom: 1rem;

    font-size: 4rem;
}

.parachute-remember blockquote {
    margin: 2.5rem auto;
    padding: 2.2rem;

    background: white;

    border: 1px solid var(--parachute-border);
    border-radius: 26px;

    box-shadow: var(--parachute-shadow);
}

.parachute-remember blockquote p {
    margin: 0.4rem 0;
}

.parachute-remember blockquote strong {
    display: block;

    margin-top: 1.25rem;

    color: var(--parachute-blue-dark);

    font-size: 1.6rem;
}

.parachute-remember > p {
    margin: 0.6rem auto;
}


/* =========================================================
   TRAIL MARKERS
========================================================= */

.parachute-section--markers {
    background: var(--parachute-cream);
}

.parachute-markers__heading {
    width: min(760px, 100%);
    margin: 0 auto 3rem;

    text-align: center;
}

.parachute-marker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1.3rem;

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

.parachute-marker {
    display: flex;
    align-items: flex-start;

    gap: 1rem;

    min-width: 0;

    padding: 1.6rem;

    color: var(--parachute-text);

    background: white;

    border: 1px solid var(--parachute-border);
    border-radius: 22px;

    box-shadow:
        0 10px 26px rgba(60,88,102,.06);

    text-decoration: none;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

a.parachute-marker:hover {
    transform: translateY(-4px);

    box-shadow:
        0 16px 34px rgba(60,88,102,.1);
}

.parachute-marker--coming {
    opacity: 0.7;
}

.parachute-marker__icon {
    flex: 0 0 auto;

    font-size: 2rem;
}

.parachute-marker__content {
    min-width: 0;
}

.parachute-marker__content strong,
.parachute-marker__content small {
    display: block;
}

.parachute-marker__content strong {
    color: var(--forest);
    font-size: 1.05rem;
}

.parachute-marker__content small {
    margin-top: 0.45rem;

    color: var(--parachute-muted);

    font-size: 0.9rem;
    line-height: 1.55;
}


/* =========================================================
   RETURN
========================================================= */

.parachute-return {
    padding: 4rem 1.5rem 6rem;

    background: var(--parachute-cream);

    text-align: center;
}

.parachute-return p {
    margin-bottom: 1.5rem;
}


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

@media (max-width: 900px) {

    .parachute-landing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parachute-marker-grid {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 650px) {

    .parachute-hero {
        padding: 4.5rem 1rem 4rem;
    }

    .parachute-section {
        padding: 4rem 1rem;
    }

    .parachute-choice-grid {
        grid-template-columns: 1fr;
    }

    .parachute-landing-grid {
        grid-template-columns: 1fr;
    }

    .parachute-thought-cloud span:nth-child(odd),
    .parachute-thought-cloud span:nth-child(even) {
        transform: none;
    }

    .parachute-quote,
    .parachute-remember blockquote {
        padding: 1.6rem 1.25rem;
    }

    .parachute-fence {
        padding: 2rem 1.4rem;
    }

    .parachute-breadcrumbs {
        width: calc(100% - 2rem);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .parachute-button,
    .parachute-marker {
        transition: none;
    }

    .parachute-button:hover,
    a.parachute-marker:hover {
        transform: none;
    }

}