/* ============================================
   SECTION PAGES - PREMIUM IMMERSIVE STYLES
   For individual Council member pages
   ============================================ */

/* --- Theme Colors --- */
.chinese-theme {
    --theme-primary: #c41e3a;
    --theme-secondary: #8b0000;
    --theme-accent: #ffd700;
    --theme-glow: rgba(196, 30, 58, 0.4);
}

.performance-theme {
    --theme-primary: #2d5a27;
    --theme-secondary: #1a3518;
    --theme-accent: #7cb342;
    --theme-glow: rgba(45, 90, 39, 0.4);
}

.latin-theme {
    --theme-primary: #d2691e;
    --theme-secondary: #8b4513;
    --theme-accent: #ffa500;
    --theme-glow: rgba(210, 105, 30, 0.4);
}

/* --- Section Page Base --- */
.section-page {
    background: var(--color-black);
}

/* --- Section Hero - CINEMATIC --- */
.section-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    color: var(--color-light);
    overflow: hidden;
}

.chinese-hero {
    background: 
        linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.8) 100%),
        url('https://images.unsplash.com/photo-1552566626-52f8b828add9?w=1920&q=80') center/cover no-repeat;
}

.chinese-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.4) 0%, rgba(139, 0, 0, 0.5) 100%);
    mix-blend-mode: multiply;
}

.performance-hero {
    background: 
        linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.8) 100%),
        url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=1920&q=80') center/cover no-repeat;
}

.performance-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(45, 90, 39, 0.4) 0%, rgba(26, 53, 24, 0.5) 100%);
    mix-blend-mode: multiply;
}

.latin-hero {
    background: 
        linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.8) 100%),
        url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=1920&q=80') center/cover no-repeat;
}

.latin-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(210, 105, 30, 0.4) 0%, rgba(139, 69, 19, 0.5) 100%);
    mix-blend-mode: multiply;
}

.section-hero .hero-overlay {
    background: 
        radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.9) 100%);
}

.section-hero .hero-content {
    position: relative;
    z-index: 10;
}

.section-emoji {
    font-size: 6rem;
    display: block;
    margin-bottom: var(--space-lg);
    filter: drop-shadow(0 8px 30px var(--theme-glow, rgba(0, 0, 0, 0.5)));
    animation: heroFloat 4s ease-in-out infinite;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}

.section-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    opacity: 0.6;
    margin-bottom: var(--space-xs);
}

.section-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 700;
    margin-bottom: var(--space-xs);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.section-tagline {
    font-size: 1.4rem;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    margin-bottom: var(--space-lg);
    text-shadow: 0 0 30px rgba(201, 169, 89, 0.5);
}

.section-description {
    font-size: 1.15rem;
    max-width: 650px;
    margin: 0 auto;
    opacity: 0.85;
    line-height: 1.9;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8);
}

/* --- About Curator --- */
.about-curator {
    background: 
        linear-gradient(180deg, rgba(0,0,0,0.95) 0%, #0a0805 100%);
    padding: var(--space-xl) 0;
    position: relative;
}

.curator-intro {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-xl);
    align-items: start;
}

.curator-portrait {
    position: sticky;
    top: 120px;
}

.portrait-placeholder {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary, #c41e3a), var(--theme-secondary, #8b0000));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 80px var(--theme-glow, rgba(196, 30, 58, 0.3)),
        inset 0 -10px 30px rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.1);
}

.portrait-placeholder.performance {
    background: linear-gradient(135deg, var(--performance-primary), var(--performance-secondary));
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(45, 90, 39, 0.3),
        inset 0 -10px 30px rgba(0, 0, 0, 0.3);
}

.portrait-placeholder.latin {
    background: linear-gradient(135deg, var(--latin-primary), var(--latin-secondary));
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(210, 105, 30, 0.3),
        inset 0 -10px 30px rgba(0, 0, 0, 0.3);
}

.curator-bio h2 {
    font-family: var(--font-display);
    font-size: 2.8rem;
    margin-bottom: var(--space-sm);
    color: var(--color-light);
}

.curator-tagline {
    font-size: 1.25rem;
    color: var(--color-gold);
    margin-bottom: var(--space-lg);
}

.bio-placeholder {
    background: rgba(255, 255, 255, 0.03);
    padding: var(--space-lg);
    border-radius: 12px;
    border: 1px solid rgba(201, 169, 89, 0.15);
    border-left: 4px solid var(--theme-primary, var(--color-gold));
}

.bio-placeholder p {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    line-height: 1.8;
}

/* --- Philosophy Block --- */
.philosophy-block {
    background: 
        radial-gradient(ellipse at center, var(--theme-glow, rgba(201, 169, 89, 0.1)) 0%, transparent 70%),
        var(--color-black);
    padding: var(--space-xl) 0;
    text-align: center;
}

.philosophy-block blockquote p {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-style: italic;
    color: var(--color-light);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.6;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* --- Regions Section --- */
.regions-section {
    background: 
        linear-gradient(180deg, #0a0805 0%, #0d0a07 50%, var(--color-black) 100%);
    padding: var(--space-xl) 0;
    position: relative;
}

.regions-section .section-header h2 {
    color: var(--color-light);
}

.regions-section .section-subtitle {
    color: var(--color-gold);
    opacity: 0.8;
}

.regions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.region-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.region-card:hover {
    transform: translateY(-8px);
    border-color: rgba(201, 169, 89, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px var(--theme-glow, rgba(201, 169, 89, 0.1));
}

.region-header {
    padding: var(--space-md);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.region-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}

.region-header.cantonese { background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%); }
.region-header.sichuan { background: linear-gradient(135deg, #ff4500 0%, #cc0000 100%); }
.region-header.hunan { background: linear-gradient(135deg, #ff6347 0%, #dc143c 100%); }
.region-header.shandong { background: linear-gradient(135deg, #4169e1 0%, #0000cd 100%); }
.region-header.jiangsu { background: linear-gradient(135deg, #20b2aa 0%, #008b8b 100%); }
.region-header.fujian { background: linear-gradient(135deg, #3cb371 0%, #228b22 100%); }
.region-header.anhui { background: linear-gradient(135deg, #8b4513 0%, #654321 100%); }
.region-header.zhejiang { background: linear-gradient(135deg, #9370db 0%, #663399 100%); }

.region-chinese {
    font-family: var(--font-chinese);
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
    position: relative;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.region-header h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
    position: relative;
}

.region-pinyin {
    font-size: 0.85rem;
    opacity: 0.8;
    position: relative;
}

.region-body {
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.3);
}

.region-body p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-sm);
    line-height: 1.7;
}

.region-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.region-highlights span {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
    background: rgba(201, 169, 89, 0.15);
    border: 1px solid rgba(201, 169, 89, 0.2);
    border-radius: 6px;
    color: var(--color-gold);
}

/* --- Techniques Section --- */
.techniques-section {
    background: var(--color-black);
    padding: var(--space-xl) 0;
    position: relative;
}

.techniques-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 30% 50%, rgba(196, 30, 58, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(196, 30, 58, 0.05) 0%, transparent 50%);
}

.techniques-section .section-header h2,
.techniques-section .section-header .section-subtitle {
    color: var(--color-light);
}

.techniques-section .section-subtitle {
    color: rgba(255,255,255,0.5);
}

.techniques-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    position: relative;
    z-index: 2;
}

.technique-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--space-lg);
    border-radius: 16px;
    text-align: center;
    transition: var(--transition-smooth);
}

.technique-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(201, 169, 89, 0.3);
    transform: translateY(-5px);
}

.technique-chinese {
    font-family: var(--font-chinese);
    font-size: 3rem;
    color: var(--color-gold);
    margin-bottom: var(--space-sm);
    text-shadow: 0 0 30px rgba(201, 169, 89, 0.5);
}

.technique-card h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--color-light);
    margin-bottom: var(--space-sm);
}

.technique-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

/* --- Recipes Section --- */
.recipes-section {
    background: 
        linear-gradient(180deg, var(--color-black) 0%, #0a0805 100%);
    padding: var(--space-xl) 0;
}

.recipes-section .section-header h2 {
    color: var(--color-light);
}

.recipes-section .section-subtitle {
    color: rgba(255, 255, 255, 0.5);
}

.category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.cat-link {
    padding: 0.6rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition-smooth);
    background: rgba(255, 255, 255, 0.02);
}

.cat-link:hover,
.cat-link.active {
    background: rgba(201, 169, 89, 0.2);
    color: var(--color-gold);
    border-color: var(--color-gold);
}

.recipes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.recipe-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.recipe-card:hover {
    border-color: rgba(201, 169, 89, 0.4);
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(201, 169, 89, 0.1);
}

.recipe-card.featured {
    border-color: rgba(201, 169, 89, 0.2);
}

/* Recipe Image */
.recipe-image {
    height: 200px;
    position: relative;
    overflow: hidden;
}

.recipe-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
}

.recipe-badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: 0.4rem 0.8rem;
    background: var(--color-gold);
    color: var(--color-black);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 6px;
    z-index: 2;
}

.recipe-badge.soon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(10px);
}

.recipe-badge.dessert {
    background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
}

.recipe-badge.abuela {
    top: auto;
    bottom: var(--space-sm);
    left: var(--space-sm);
    background: linear-gradient(135deg, #d2691e 0%, #8b4513 100%);
    color: white;
}

/* Recipe Details */
.recipe-details {
    padding: var(--space-md);
}

.recipe-meta {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.recipe-meta span {
    font-size: 0.75rem;
    color: var(--color-gold);
    opacity: 0.9;
}

.recipe-protein {
    background: rgba(45, 90, 39, 0.3);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    color: #7cb342 !important;
}

.recipe-details h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--color-light);
    margin-bottom: var(--space-xs);
}

.chinese-chars {
    font-family: var(--font-chinese);
    font-size: 1rem;
    color: var(--color-gold);
    margin-left: 0.5rem;
    opacity: 0.8;
}

.recipe-tagline {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
    font-style: italic;
}

.recipe-origin {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--space-sm);
    padding: var(--space-xs);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.recipe-origin strong {
    color: var(--color-gold);
}

.recipe-macros {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    padding: var(--space-xs) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.recipe-macros span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.recipe-macros strong {
    color: var(--color-gold);
    font-size: 1rem;
}

.recipe-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--space-md);
}

.recipe-tags span {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    background: rgba(201, 169, 89, 0.1);
    border: 1px solid rgba(201, 169, 89, 0.2);
    color: var(--color-gold);
    border-radius: 20px;
}

.recipe-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-gold);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.recipe-link:hover {
    color: var(--color-gold-light);
    gap: 0.8rem;
}

/* Coming Soon Placeholder */
.recipe-card.coming-soon {
    grid-column: 1 / -1;
}

.recipe-placeholder {
    padding: var(--space-xl);
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.recipe-placeholder span {
    font-size: 5rem;
    display: block;
    margin-bottom: var(--space-md);
    opacity: 0.3;
}

.recipe-placeholder .subtext {
    font-size: 0.9rem;
    margin-top: var(--space-xs);
    opacity: 0.5;
}

/* --- Culture Section --- */
.culture-section {
    background: #0a0805;
    padding: var(--space-xl) 0;
}

.culture-section .section-header h2 {
    color: var(--color-light);
}

.culture-section .section-subtitle {
    color: rgba(255, 255, 255, 0.5);
}

.culture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.culture-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--space-lg);
    border-radius: 16px;
    transition: var(--transition-smooth);
}

.culture-card:hover {
    border-color: rgba(201, 169, 89, 0.3);
    transform: translateY(-5px);
}

.culture-card h3 {
    font-family: var(--font-display);
    margin-bottom: var(--space-sm);
    color: var(--color-light);
}

.culture-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-sm);
    line-height: 1.7;
}

.status-badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.8rem;
    background: rgba(201, 169, 89, 0.15);
    color: var(--color-gold);
    border-radius: 20px;
    border: 1px solid rgba(201, 169, 89, 0.2);
}

/* --- Ingredients Section --- */
.ingredients-section {
    background: var(--color-black);
    padding: var(--space-xl) 0;
}

.ingredients-section .section-header h2 {
    color: var(--color-light);
}

.ingredients-section .section-subtitle {
    color: rgba(255, 255, 255, 0.5);
}

.ingredients-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.ingredient-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--space-md);
    border-radius: 12px;
    transition: var(--transition-smooth);
}

.ingredient-item:hover {
    border-color: rgba(201, 169, 89, 0.3);
    background: rgba(255, 255, 255, 0.04);
}

.ingredient-item strong {
    display: block;
    font-family: var(--font-display);
    margin-bottom: 0.25rem;
    color: var(--color-light);
}

.chinese-small {
    font-family: var(--font-chinese);
    font-size: 1rem;
    color: var(--color-gold);
    margin-left: 0.5rem;
}

.ingredient-item p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.5rem;
}

/* --- Performance Page Specific --- */
.macros-section {
    background: 
        linear-gradient(180deg, rgba(0,0,0,0.95) 0%, #0a0805 100%);
    padding: var(--space-xl) 0;
}

.macros-section .section-header h2 {
    color: var(--color-light);
}

.macros-section .section-subtitle {
    color: rgba(255, 255, 255, 0.5);
}

.macros-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.macro-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--space-lg);
    border-radius: 20px;
    text-align: center;
    transition: var(--transition-smooth);
}

.macro-card:hover {
    border-color: rgba(45, 90, 39, 0.4);
    transform: translateY(-5px);
}

.macro-icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3));
}

.macro-card h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-light);
}

.macro-target {
    color: var(--performance-primary);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: var(--space-sm);
    text-shadow: 0 0 20px rgba(45, 90, 39, 0.5);
}

.macro-card p:last-child {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

.goal-profiles {
    max-width: 700px;
    margin: 0 auto;
}

.goal-profiles h3 {
    text-align: center;
    font-family: var(--font-display);
    margin-bottom: var(--space-md);
    color: var(--color-light);
}

.profiles-table {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

.profile-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
}

.profile-row.header {
    background: rgba(45, 90, 39, 0.3);
    color: white;
    font-weight: 600;
}

.profile-row:last-child {
    border-bottom: none;
}

/* Protein Tiers */
.proteins-section {
    background: var(--color-black);
    padding: var(--space-xl) 0;
}

.proteins-section .section-header h2 {
    color: var(--color-light);
}

.proteins-section .section-subtitle {
    color: rgba(255, 255, 255, 0.5);
}

.protein-tiers {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.tier {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.tier:hover {
    border-color: rgba(201, 169, 89, 0.2);
}

.tier-label {
    padding: var(--space-sm) var(--space-md);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
}

.tier-s .tier-label { 
    background: linear-gradient(90deg, #ffd700, #b8860b);
    color: #1a1a1a;
}
.tier-a .tier-label { 
    background: linear-gradient(90deg, #c0c0c0, #a8a8a8);
    color: #1a1a1a;
}
.tier-b .tier-label { 
    background: linear-gradient(90deg, #cd7f32, #8b5a2b);
    color: white;
}
.tier-treat .tier-label { 
    background: linear-gradient(90deg, #8b0000, #5c0000);
    color: white;
}

.tier-content {
    padding: var(--space-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.tier-content span {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.tier-note {
    padding: 0 var(--space-md) var(--space-md);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Timing Section */
.timing-section {
    background: 
        radial-gradient(ellipse at 50% 50%, rgba(45, 90, 39, 0.1) 0%, transparent 60%),
        #0a0805;
    padding: var(--space-xl) 0;
}

.timing-section .section-header h2,
.timing-section .section-subtitle {
    color: var(--color-light);
}

.timing-section .section-subtitle {
    color: rgba(255, 255, 255, 0.5);
}

.timing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.timing-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--space-lg);
    border-radius: 16px;
    text-align: center;
    transition: var(--transition-smooth);
}

.timing-card:hover {
    border-color: rgba(45, 90, 39, 0.3);
    transform: translateY(-5px);
}

.timing-card.highlight {
    background: rgba(45, 90, 39, 0.15);
    border: 2px solid var(--performance-primary);
    box-shadow: 0 0 40px rgba(45, 90, 39, 0.2);
}

.timing-icon {
    font-size: 3rem;
    margin-bottom: var(--space-sm);
}

.timing-card h3 {
    color: var(--color-light);
    font-family: var(--font-display);
    margin-bottom: 0.5rem;
}

.timing-window {
    color: var(--color-gold);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.timing-card p:last-child {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Meal Prep Section */
.mealprep-section {
    background: var(--color-black);
    padding: var(--space-xl) 0;
}

.mealprep-section .section-header h2 {
    color: var(--color-light);
}

.mealprep-section .section-subtitle {
    color: rgba(255, 255, 255, 0.5);
}

.mealprep-framework {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.prep-step {
    text-align: center;
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    transition: var(--transition-smooth);
}

.prep-step:hover {
    border-color: rgba(45, 90, 39, 0.3);
    transform: translateY(-5px);
}

.step-number {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(45, 90, 39, 0.6) 0%, rgba(45, 90, 39, 0.2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.prep-step h3 {
    font-family: var(--font-display);
    margin-bottom: var(--space-sm);
    color: var(--color-light);
}

.prep-step p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

.emergency-meals {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--space-xl);
    border-radius: 20px;
}

.emergency-meals h3 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--color-light);
}

.emergency-meals .subtitle {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--space-lg);
}

.emergency-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.emergency-item {
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: var(--transition-smooth);
}

.emergency-item:hover {
    border-color: rgba(45, 90, 39, 0.3);
}

.emergency-item strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-gold);
}

.emergency-item p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Latin Page Specific --- */
.latin-regions .region-group {
    margin-bottom: var(--space-xl);
}

.latin-regions .region-group h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--latin-primary);
    color: var(--color-light);
}

.subregions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.subregions-grid.three-col {
    grid-template-columns: repeat(3, 1fr);
}

.subregion-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--space-lg);
    border-radius: 16px;
    transition: var(--transition-smooth);
}

.subregion-card:hover {
    border-color: rgba(210, 105, 30, 0.4);
    transform: translateY(-5px);
}

.subregion-card .flag {
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.subregion-card h4 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin-bottom: var(--space-sm);
    color: var(--color-light);
}

.subregion-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-md);
    line-height: 1.7;
}

.signature-dishes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.signature-dishes span {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
    background: rgba(210, 105, 30, 0.15);
    border: 1px solid rgba(210, 105, 30, 0.25);
    color: var(--latin-primary);
    border-radius: 6px;
}

/* Building Blocks */
.building-blocks-section {
    background: 
        radial-gradient(ellipse at 50% 50%, rgba(210, 105, 30, 0.08) 0%, transparent 60%),
        var(--color-black);
    padding: var(--space-xl) 0;
}

.building-blocks-section .section-header h2,
.building-blocks-section .section-subtitle {
    color: var(--color-light);
}

.building-blocks-section .section-subtitle {
    color: rgba(255, 255, 255, 0.5);
}

.blocks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.block-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--space-lg);
    border-radius: 16px;
    transition: var(--transition-smooth);
}

.block-card:hover {
    border-color: rgba(210, 105, 30, 0.4);
    transform: translateY(-5px);
}

.block-card h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-light);
    margin-bottom: 0.5rem;
}

.block-origin {
    color: var(--color-gold);
    font-size: 0.9rem;
    margin-bottom: var(--space-md);
}

.block-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin-bottom: var(--space-md);
    line-height: 1.7;
}

.block-variations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.block-variations span {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
}

/* Abuela Section */
.abuela-section {
    background: 
        linear-gradient(135deg, var(--latin-primary) 0%, var(--latin-secondary) 100%);
    padding: var(--space-xl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.abuela-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(0, 0, 0, 0.2) 0%, transparent 50%);
}

.abuela-content {
    max-width: 750px;
    margin: 0 auto;
    color: white;
    position: relative;
    z-index: 2;
}

.abuela-content h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
}

.abuela-rule {
    font-size: 1.15rem;
    margin-bottom: var(--space-lg);
    opacity: 0.9;
}

.abuela-section blockquote p {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-style: italic;
    margin-bottom: var(--space-lg);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.abuela-content > p:last-child {
    opacity: 0.85;
    line-height: 1.8;
}

/* Trivia Section */
.trivia-section {
    background: #0a0805;
    padding: var(--space-xl) 0;
}

.trivia-section .section-header h2 {
    color: var(--color-light);
}

.trivia-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.trivia-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--space-lg);
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition-smooth);
}

.trivia-card:hover {
    border-color: rgba(210, 105, 30, 0.3);
}

.trivia-card strong {
    color: var(--latin-primary);
}

/* --- Footer Navigation --- */
.footer-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-nav a {
    color: var(--color-gold);
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.footer-nav a:hover {
    color: var(--color-gold-light);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .regions-grid,
    .techniques-grid,
    .ingredients-grid,
    .subregions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .subregions-grid.three-col {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mealprep-framework,
    .emergency-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blocks-grid,
    .trivia-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .curator-intro {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .curator-portrait {
        position: static;
        display: flex;
        justify-content: center;
    }
    
    .regions-grid,
    .techniques-grid,
    .culture-grid,
    .ingredients-grid,
    .macros-grid,
    .timing-grid,
    .recipes-grid,
    .subregions-grid,
    .subregions-grid.three-col,
    .blocks-grid,
    .trivia-grid {
        grid-template-columns: 1fr;
    }
    
    .mealprep-framework,
    .emergency-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-nav {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }
    
    .section-emoji {
        font-size: 4rem;
    }
}

/* ============================================
   EMOJI REPLACEMENT STYLES
   ============================================ */

/* Section Icon - replaces emoji headers */
.section-icon {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 700;
    color: var(--color-gold);
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--color-gold);
    border-radius: 4px;
    display: inline-block;
    margin-bottom: var(--space-lg);
    background: rgba(201, 169, 89, 0.1);
}

/* Portrait Letter - replaces emoji in portraits */
.portrait-letter {
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* Flag code styling */
.subregion-card .flag {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--theme-primary, var(--color-gold));
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: var(--space-sm);
}

/* Fix section-emoji class (hide if still using) */
.section-emoji {
    display: none;
}

/* ============================================
   BACKGROUND FIX - Ensure content readable
   ============================================ */

/* Fix hero content z-index and readability */
.section-hero .hero-content {
    position: relative;
    z-index: 10;
    background: rgba(0,0,0,0.3);
    padding: var(--space-xl);
    border-radius: 20px;
    backdrop-filter: blur(5px);
}

/* Ensure all section content has proper contrast */
.about-curator,
.philosophy-block,
.regions-section,
.building-blocks-section,
.recipes-section,
.culture-section,
.trivia-section,
.abuela-section {
    position: relative;
    z-index: 5;
}

/* Fix text contrast on dark backgrounds */
.section-page h1,
.section-page h2,
.section-page h3,
.section-page h4 {
    color: var(--color-light);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.section-page p {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

/* Ensure card backgrounds are solid enough */
.recipe-card,
.subregion-card,
.block-card,
.trivia-card,
.culture-card {
    background: rgba(10, 8, 5, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Fix philosophy block readability */
.philosophy-block blockquote {
    background: rgba(0,0,0,0.5);
    padding: var(--space-lg);
    border-radius: 12px;
}

/* Fix abuela section */
.abuela-content {
    background: rgba(0,0,0,0.3);
    padding: var(--space-xl);
    border-radius: 20px;
}

/* Icon Float replacements */
.icon-float {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid currentColor;
}

.icon-float.icon-chinese {
    color: var(--color-gold);
    background: rgba(196, 30, 58, 0.2);
    border-color: #c41e3a;
}

.icon-float.icon-performance {
    color: #7cb342;
    background: rgba(45, 90, 39, 0.2);
    border-color: #2d5a27;
}

.icon-float.icon-latin {
    color: #ffa500;
    background: rgba(210, 105, 30, 0.2);
    border-color: #d2691e;
}

/* Card icon replacements */
.card-icon {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    display: block;
    margin-bottom: var(--space-md);
}

/* Timing text replacement */
.timing-text {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gold);
    padding: 0.5rem 1rem;
    border: 2px solid var(--color-gold);
    border-radius: 6px;
    display: inline-block;
}

.timing-icon {
    margin-bottom: var(--space-sm);
}

/* Recipe Category Sections */
.recipe-category {
    margin-bottom: var(--space-xl);
}

.category-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--color-gold);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid rgba(201, 169, 89, 0.3);
}

.recipe-category .recipes-grid {
    margin-top: var(--space-md);
}