/* ---------- Color Palette ---------- */

:root {
    --booch-amber: #c98c2b;
    --sage: #8fa98c;
    --cream: #f6f1e7;
    --charcoal: #2c2c2c;
    --copper: #b87333;
}

/* ---------- Global ---------- */

body {
    margin:0;
    font-family: Georgia, serif;
    background: var(--cream);
    color: var(--charcoal);
}

*{
    box-sizing:border-box;
}



a{
    color:var(--booch-amber);
    text-decoration:none;
}

a:hover{
    color:var(--copper);
}

.site-header{
    background:rgba(246, 241, 231, 0.95);
    border-bottom:1px solid rgba(0,0,0,0.08);
    position:sticky;
    top:0;
    z-index:100;
}

.header-inner{
    max-width:1200px;
    margin:0 auto;
    padding:14px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.logo-wrap{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--charcoal);
}

.site-logo{
    width:58px;
    height:auto;
}

.site-brand{
    display:flex;
    flex-direction:column;
}

.site-name{
    font-size:1.25rem;
    font-weight:bold;
    color:var(--charcoal);
}

.site-tag{
    font-size:0.9rem;
    color:#666;
}

.main-nav{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.main-nav a{
    display:inline-block;
    padding:10px 16px;
    background:rgba(143,169,140,0.16);
    color:var(--charcoal);
    border:1px solid rgba(143,169,140,0.35);
    border-radius:999px;
    font-weight:600;
    transition:all 0.2s ease;
    box-shadow:0 2px 6px rgba(0,0,0,0.04);
}

.main-nav a:hover{
    background:var(--booch-amber);
    color:#fff;
    border-color:var(--booch-amber);
    transform:translateY(-1px);
}


.content-wrap{
    max-width:900px;
    margin:40px auto;
    padding:0 20px 60px 20px;
}

.article-card{
    background:var(--white);
    padding:40px;
    border-radius:14px;
    box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

.article-card h2,
.article-card h3{
    color:var(--booch-amber);
}


/* ---------- Hero Section ---------- */

.hero{
position:relative;
height:75vh;
background-image:url("../images/BrewLabMorning.jpg");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.hero h1 {
    font-size:4rem;
    margin:0;
    text-shadow:0 2px 8px rgba(0,0,0,0.6);
}

.hero p {
    font-size:1.4rem;
	letter-spacing:1px;
    margin-top:10px;
}

.hero.small{
height:45vh;
}

.hero-overlay{
background:linear-gradient(
to bottom,
rgba(0,0,0,0.25),
rgba(0,0,0,0.45)
);
backdrop-filter:blur(2px);
padding:60px;
border-radius:10px;
}

.hero-logo{
width:140px;
max-width:40vw;
height:auto;
margin-bottom:18px;
filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
}

/* ---------- Page Specific Heroes ---------- */

.hero-tea-garden{
background-image:url("../images/TeaGardenMorning.jpg");
background-size:cover;
background-position:center;
}

.hero-brew-lab{
background-image:url("../images/BrewLabExperiments.jpg");
background-size:cover;
background-position:center;
}

.hero-apothecary{
    background-image:url("../images/ApothecarySunrise.jpg");
    background-size:cover;
    background-position:center;
}



/* ---------- Navigation Sections ---------- */

.sections {
    display:flex;
    justify-content:center;
    gap:40px;
    padding:60px 20px;
}

.section-card {
    width:260px;
    padding:30px;
    text-align:center;
    border-radius:10px;
    background:white;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
    transition: transform .2s;
}

.section-card:hover {
    transform: translateY(-5px);
}

.section-card h2 {
    color: var(--booch-amber);
}

/* ---------- Brew Lab ---------- */
.lab-feature{
background-image:url("../images/BrewLabSunset.jpg");
background-size:cover;
background-position:center;
min-height:320px;
display:flex;
align-items:center;
justify-content:center;
padding:40px 20px;
}

.lab-feature-overlay{
background:rgba(0,0,0,0.38);
color:white;
padding:40px;
border-radius:12px;
max-width:700px;
text-align:center;
}

.lab-feature-overlay h2{
color:#f6f1e7;
margin-top:0;
font-size:2.2rem;
}

.lab-feature-overlay p{
font-size:1.1rem;
margin-bottom:0;
}



.hero.small{
    height:45vh;
}

.intro-card,
.closing-card{
    margin-bottom:40px;
}

.garden-section{
    margin:0 0 50px 0;
}

.section-heading{
    text-align:center;
    margin-bottom:24px;
}

.section-heading h2{
    margin-bottom:8px;
}

.section-heading p{
    margin:0;
    color:#666;
}

.garden-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:24px;
}

.garden-card{
    display:block;
    background:#ffffff;
    padding:28px;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
    color:var(--charcoal);
}

.garden-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 26px rgba(0,0,0,0.10);
}

.garden-card h3{
    margin-top:0;
    margin-bottom:12px;
    color:var(--booch-amber);
}

.garden-card p{
    margin-bottom:0;
}

.garden-card.featured{
    border-top:4px solid var(--booch-amber);
}

.path-card{
    background:rgba(255,255,255,0.94);
}

.garden-list{
    margin:0;
    padding-left:18px;
}

.garden-list li{
    margin-bottom:10px;
}

.garden-list li:last-child{
    margin-bottom:0;
}



/* ---------- Bubble Animation ---------- */

.bubbles {
    position: fixed;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden;
    z-index:-1;
}

.bubble {
    position:absolute;
    bottom:-100px;
    background: rgba(255,255,255,0.3);
    border-radius:50%;
    animation: rise 20s infinite ease-in;
}

@keyframes rise {
    0% {
        transform: translateY(0) scale(0.5);
        opacity:0;
    }
    50% {
        opacity:0.6;
    }
    100% {
        transform: translateY(-110vh) scale(1);
        opacity:0;
    }
}

/* random bubble sizes */

.bubble:nth-child(1){ left:10%; width:20px; height:20px; animation-duration:22s;}
.bubble:nth-child(2){ left:30%; width:12px; height:12px; animation-duration:18s;}
.bubble:nth-child(3){ left:50%; width:16px; height:16px; animation-duration:24s;}
.bubble:nth-child(4){ left:70%; width:10px; height:10px; animation-duration:20s;}
.bubble:nth-child(5){ left:85%; width:18px; height:18px; animation-duration:26s;}

footer {
    text-align:center;
    padding:40px;
    color:#777;
}