/* WIP overrides: Mobile-first, typography, and color tokens */
:root{
    --accent-red: #8c0027;
    --bg-warm: #ffd2c5;
    --text-dark: #111;
}

/* Typography overrides */
body, input, select, textarea { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color: var(--text-dark); }
h1, h2, h3, .major { font-family: 'Bai Jamjuree', 'Neue Machina', Georgia, serif; color: var(--accent-red); }

/* Panel layout: mobile-first vertical stack */
#wrapper.mobile-vertical {
    flex-direction: column !important;
    height: auto !important;
}
#wrapper.mobile-vertical .panel {
    min-height: auto !important;
    width: 100% !important;
    display: block !important;
}

/* Make images responsive within panels */
.panel .image img { width: 100%; height: auto; display:block; }

/* Buttons */
.button, .btn { border-radius: 8px; padding: 0.8rem 1rem; font-weight:600; }
.button.primary, .btn-hero { background: var(--accent-red) !important; color: #fff !important; }

/* Improve spacing on small screens */
.content { padding: 1rem !important; }
.intro, .inner, .image { padding: 0.5rem !important; }

/* Small-screen tweaks */
@media (max-width: 736px){
    #wrapper { height: auto !important; }
    .panel { padding: 1.25rem 0 !important; }
    .major { font-size: 1.4rem !important; }
}