/*

The Sassiverse is a playground
where Wonder Seekers practice becoming.

Build gently.

Leave breadcrumbs.

Investigation Ongoing.

*/

/* ==========================================================
   SASSIVERSE DESIGN SYSTEM
   Version 1.0
========================================================== */

/* ==========================================================
   THE SASSIVERSE

   The conductor.
   This file imports the design system.

   Build gently.
   Leave breadcrumbs.
   Investigation Ongoing.
========================================================== */

@import url("themes/colors.css");
@import url("themes/typography.css");

@import url("layout/containers.css");
@import url("layout/grids.css");
@import url("layout/hero.css");
@import url("layout/sections.css");
@import url("layout/spacing.css");

@import url("components/buttons.css");
@import url("components/cards.css");
@import url("components/navigation.css");
@import url("components/breadcrumbs.css");
@import url("components/trail-cards.css");

@import url("trailhead.css");


:root{

/* Nature */

--forest:#355C4A;
--moss:#648C6A;
--fern:#89A67B;
--sage:#B7C9A8;

/* Sunshine */

--gold:#F6C85F;
--sun:#FFD97D;

/* Flowers */

--wildflower:#E98BB3;
--lavender:#B79CED;
--sky:#8CCCF5;

/* Earth */

--cream:#FFF8F3;
--paper:#FFFCFA;
--stone:#EFE7E2;

/* Text */

--text:#2F2A28;
--soft-text:#6E625D;

/* Accents */

--sparkle:#F28B82;
--sparkle-dark:#C9574F;

/* Borders */

--border:#E9DDD5;

/* Shadows */

--shadow-soft:
0 12px 35px rgba(72,43,35,.06);

--shadow-hover:
0 18px 45px rgba(72,43,35,.10);

/* Radius */

--radius-small:14px;
--radius:24px;
--radius-large:36px;

/* Width */

--content-width:1200px;
--reading-width:760px;

}

/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--cream);

    color:var(--text);

    font-family:
        "Avenir Next",
        "Segoe UI",
        Arial,
        sans-serif;

    line-height:1.75;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}

img{

    max-width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    font:inherit;

}

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

h1{

    font-size:clamp(3.5rem,8vw,6rem);

    line-height:.95;

    margin-bottom:30px;

    font-weight:800;

}

h2{

    font-size:clamp(2.2rem,5vw,3.5rem);

    margin-bottom:24px;

    line-height:1.15;

}

h3{

    font-size:1.45rem;

    margin-bottom:18px;

}

h4{

    font-size:1.15rem;

    margin-bottom:12px;

}

p{

    color:var(--soft-text);

    margin-bottom:22px;

    font-size:1.08rem;

}

strong{

    color:var(--text);

}

.small{

    font-size:.9rem;

}

.center{

    text-align:center;

}

.reading-width{

    max-width:var(--reading-width);

    margin:auto;

}

/* ==========================================================
   LAYOUT
========================================================== */

section{

    padding:90px 8%;

}

.container{

    max-width:var(--content-width);

    margin:auto;

}

.narrow{

    max-width:900px;

    margin:auto;

}

.hero{

    min-height:70vh;

    display:flex;

    align-items:center;

    justify-content:center;

}

.hero-content{

    max-width:900px;

    text-align:center;

}

/* ==========================================================
   UTILITIES
========================================================== */

.hidden{
    display:none;
}

.center{
    text-align:center;
}

.left{
    text-align:left;
}

.right{
    text-align:right;
}

.flex{
    display:flex;
}

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

.flex-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.wrap{
    flex-wrap:wrap;
}

.grid{
    display:grid;
}

.gap-sm{
    gap:12px;
}

.gap{
    gap:24px;
}

.gap-lg{
    gap:40px;
}

.mt-sm{
    margin-top:20px;
}

.mt{
    margin-top:40px;
}

.mt-lg{
    margin-top:70px;
}

.mb-sm{
    margin-bottom:20px;
}

.mb{
    margin-bottom:40px;
}

.mb-lg{
    margin-bottom:70px;
}

.round{
    border-radius:var(--radius);
}

.shadow{
    box-shadow:var(--shadow-soft);
}

.paper{

    background:var(--paper);

}

.stone{

    background:var(--stone);

}

.full-width{

    width:100%;

}

/* ==========================================================
   SECTION CARDS
========================================================== */

.section-card{

    background:var(--paper);

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

    border-radius:var(--radius-large);

    padding:55px;

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

    transition:.25s ease;

}

.section-card:hover{

    transform:translateY(-4px);

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

}

.soft-card{

    background:var(--stone);

}

.glass-card{

    backdrop-filter:blur(16px);

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

}

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

.button-row{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    justify-content:center;

    margin-top:32px;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border-radius:999px;

    border:none;

    cursor:pointer;

    font-weight:700;

    transition:.25s ease;

    text-decoration:none;

}

.btn:hover{

    transform:translateY(-3px);

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

}

.btn-primary{

    background:var(--sparkle);

    color:white;

}

.btn-primary:hover{

    background:var(--sparkle-dark);

}

.btn-secondary{

    background:transparent;

    border:2px solid var(--sparkle);

    color:var(--sparkle-dark);

}

.btn-soft{

    background:var(--stone);

    color:var(--text);

}

.btn-gold{

    background:var(--gold);

    color:var(--text);

}

/* ==========================================================
   BREADCRUMB
========================================================== */

.breadcrumb-box{

    background:linear-gradient(
        135deg,
        #fffdf9,
        #fff6ef
    );

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

    padding:28px;

    border-radius:var(--radius);

    margin:30px 0;

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

}

.breadcrumb-box h3{

    color:var(--forest);

    margin-bottom:12px;

}

.breadcrumb-box p:last-child{

    margin-bottom:0;

}

/* ==========================================================
   FIELD NOTES
========================================================== */

.field-note{

    background:var(--paper);

    border:2px dashed var(--fern);

    border-radius:20px;

    padding:32px;

    margin:40px 0;

}

.field-note h3{

    color:var(--forest);

}

.field-note strong{

    color:var(--sparkle-dark);

}

/* ==========================================================
   WONDER MOMENT
========================================================== */

.wonder-box{

    text-align:center;

    padding:55px;

    margin:70px auto;

    max-width:850px;

}

.wonder-box h2{

    color:var(--forest);

}

.wonder-box p{

    font-size:1.2rem;

}

/* ==========================================================
   PHOTOGRAPHY
========================================================== */

.photo{

    width:100%;

    border-radius:var(--radius-large);

    overflow:hidden;

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

}

.photo img{

    width:100%;

    height:auto;

    transition:.4s ease;

}

.photo:hover img{

    transform:scale(1.02);

}

.hero-photo{

    border-radius:40px;

    overflow:hidden;

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

    margin:50px auto;

}

.landscape{

    aspect-ratio:16/9;

}

.square{

    aspect-ratio:1/1;

}

.portrait{

    aspect-ratio:4/5;

}

.photo img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* ==========================================================
   FEATURE PHOTOGRAPH
========================================================== */

.feature-photo{

    max-width:1200px;

    margin:80px auto;

    border-radius:40px;

    overflow:hidden;

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

}

.feature-photo img{

    width:100%;

    display:block;

}

/* ==========================================================
   STORY LAYOUT
========================================================== */

.story-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.story-layout.reverse{

    direction:rtl;

}

.story-layout.reverse>*{

    direction:ltr;

}

.photo-caption{

    margin-top:14px;

    text-align:center;

    color:var(--soft-text);

    font-style:italic;

}

/* ==========================================================
   PHOTOGRAPHER'S PAUSE
========================================================== */

.photographers-pause{

    max-width:900px;

    margin:100px auto;

    text-align:center;

}

.photographers-pause h2{

    color:var(--forest);

    margin-bottom:30px;

}

.photographers-pause p{

    font-size:1.2rem;

}

/* ==========================================================
   GRID SYSTEM
========================================================== */

.grid{

    display:grid;

    gap:30px;

}

.grid-2{

    display:grid;

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

    gap:30px;

}

.grid-3{

    display:grid;

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

    gap:30px;

}

.grid-4{

    display:grid;

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

    gap:30px;

}

.grid-auto{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

/* ==========================================================
   TRAIL CARD
========================================================== */

.trail-card{

    background:var(--paper);

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

    border-radius:var(--radius-large);

    padding:34px;

    text-align:center;

    transition:.25s ease;

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

}

.trail-card:hover{

    transform:translateY(-6px);

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

}

.trail-card h3{

    margin-top:18px;

}

.trail-card p{

    margin-bottom:0;

}

.trail-icon{

    font-size:3rem;

}

/* ==========================================================
   QUOTES
========================================================== */

.quote{

    max-width:900px;

    margin:80px auto;

    text-align:center;

}

.quote p{

    font-size:1.6rem;

    color:var(--forest);

    font-style:italic;

}

.quote small{

    display:block;

    margin-top:20px;

    color:var(--soft-text);

}

/* ==========================================================
   GARDEN REFLECTION
========================================================== */

.garden{

    background:linear-gradient(

        135deg,

        #fff,

        #fdf7f3

    );

    padding:50px;

    border-radius:40px;

    border-left:8px solid var(--fern);

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

}

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

NAVIGATION

Navigation is the trailhead.

It helps Wonder Seekers find the next path
without rushing them.

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

nav{

    position:sticky;

    top:0;

    z-index:1000;

    backdrop-filter:blur(18px);

    background:rgba(255,252,250,.88);

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

}

.nav-container{

    max-width:var(--content-width);

    margin:auto;

    padding:18px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-size:1.6rem;

    font-weight:800;

    color:var(--forest);

}

.nav-links{

    display:flex;

    gap:28px;

    list-style:none;

    align-items:center;

}

.nav-links a{

    color:var(--text);

    font-weight:600;

    transition:.25s ease;

}

.nav-links a:hover{

    color:var(--sparkle-dark);

}

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

TRAIL MARKERS

Every journey begins somewhere.

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

.trail{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    align-items:center;

    color:var(--soft-text);

    margin-bottom:40px;

    font-size:.95rem;

}

.trail span{

    opacity:.5;

}

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

HERO

Every trail begins with an invitation.

Pause.

Breathe.

Wonder.

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

.hero{

    min-height:80vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:100px 8%;

}

.hero-inner{

    max-width:900px;

    margin:auto;

}

.hero h1{

    color:var(--forest);

    margin-bottom:25px;

}

.hero p{

    font-size:1.25rem;

    max-width:700px;

    margin:0 auto 40px;

}

.hero-image{

    margin-top:60px;

}

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

SECTION TITLES

Every trail has landmarks.

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

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    color:var(--forest);

}

.section-title p{

    max-width:700px;

    margin:auto;

}

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

TRAIL LINKS

Choose your next adventure.

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

.trail-links{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:20px;

    margin-top:50px;

}

.trail-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:var(--paper);

    padding:16px 24px;

    border-radius:999px;

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

    transition:.25s ease;

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

}

.trail-link:hover{

    transform:translateY(-3px);

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

}