/* ==========================================================
   BEHINDTHESCENES — Behind the Scenes
   "How Ernest Bluff was made"

   Palette: Clean meta/developer — white/light gray surfaces,
   subtle teal accent color, airy and modern. Feels like a
   developer blog or documentation site.
   Font: Inter (modern geometric sans — developer favorite)
   No image — light clean gradient
   NO nav items — skip menu-button fix
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.site-behindthescenes {
    font-family: 'Inter', 'Roboto', sans-serif;

    /* Page background — airy white */
    --color-bg: #f8fafb;
    --color-body-bg: #ffffff;

    /* Title bar — clean dark surface */
    --color-title-bar-bg: #1e293b;
    --color-title-bar-text: #e2e8f0;

    /* Header — no image, subtle light gradient */
    --color-header-bg: #f1f5f9;
    --header-image: url('/images/behindthescenes.png');
    --header-height: 325px;

    /* Navigation — not applicable (no nav items)
       but set values for consistency */
    --color-menu-bg: #334155;
    --color-menu-text: #e2e8f0;
    --color-menu-hover: #475569;
    --color-menu-hover-text: #38bdf8;

    /* Container border */
    --color-container-border: #cbd5e1;

    /* Footer */
    --color-footer-bg: #1e293b;
    --color-footer-text: #94a3b8;
    --color-helper-footer-bg: #0f172a;
    --color-helper-footer-text: #64748b;
}


/* Title bar — clean developer blog style */
.site-behindthescenes .site-title-bar .title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.site-behindthescenes .site-title-bar .subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    opacity: 0.75;
}


/* Header image */
.site-behindthescenes .header-image {
    background-size: cover;
    border-bottom: 1px solid #cbd5e1;
}


/* Content — clean, readable developer commentary */
.site-behindthescenes #content {
    line-height: 1.7;
    color: #334155;
}

.site-behindthescenes #content h1,
.site-behindthescenes #content h2,
.site-behindthescenes #content h3 {
    font-family: 'Inter', sans-serif;
    color: #1e293b;
    font-weight: 700;
}

.site-behindthescenes #content a {
    color: #0284c7;
}

.site-behindthescenes #content a:hover {
    color: #0369a1;
}

.site-behindthescenes #content code {
    font-family: 'Fira Code', 'Courier New', monospace;
    background: #f1f5f9;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}


/* Footer — clean modern */
.site-behindthescenes #site-footer {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
}