/* =============================================
   TETEBATU — GLOBAL STYLES
   Mobile-first · Plain HTML/CSS/JS
   ============================================= */

/* --- Font Face --- */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* --- CSS Variables --- */
:root {
    --tt-green-deep:  #0D2318;
    --tt-green-mid:   #1A3A2A;
    --tt-green-light: #2E5D40;
    --tt-cream:       #F5EDD6;
    --tt-cream-dark:  #E8D9B8;
    --tt-gold:        #C9924A;
    --tt-gold-dark:   #A67530;
    --tt-earth:       #5C3D2E;
    --tt-white:       #FDFAF4;
    --tt-dark:        #080F0A;

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Lora', Georgia, serif;

    --container-max: 1200px;
}

/* --- Reset --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    font-size: 16px;
}
body {
    font-family: var(--font-body);
    color: var(--tt-cream);
    background: var(--tt-green-deep);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a { color: inherit; text-decoration: none; }

/* --- Container --- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Typography helpers --- */
.section-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tt-gold);
    display: block;
    margin-bottom: 14px;
}
.section-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--tt-cream);
}
.section-title--dark { color: var(--tt-green-deep); }
.section-title em { font-style: italic; color: var(--tt-gold); }

/* --- Scroll Animations --- */
.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.slide-left {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.slide-right {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.is-visible,
.slide-left.is-visible,
.slide-right.is-visible {
    opacity: 1;
    transform: none;
}
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.22s; }
.stagger-3 { transition-delay: 0.34s; }
.stagger-4 { transition-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
    .fade-up, .slide-left, .slide-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
    html { scroll-behavior: auto; }
}

:focus-visible {
    outline: 2px solid var(--tt-gold);
    outline-offset: 3px;
}