/* ============================================ */
/* GENTLE & CLEAR MASTER STYLESHEET            */
/* ============================================ */

/* 1. CSS RESET & GLOBAL BOX-SIZING */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. DESIGN TOKENS - Gentle Palette */
:root {
    /* Colors: Light Cream & Gentle Contrasts */
    --color-cream: #fdf6e3;    /* Soft cream background */
    --color-paper: #fefefe;    /* Slightly whiter for cards */
    --color-ink: #333333;      /* Soft, readable black */
    --color-ink-light: #666666; /* For less important text */
    --color-border: #e0d6c2;   /* Subtle border color */

    /* Typography */
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-sans: system-ui, -apple-system, sans-serif; /* Clean system font */

    /* Spacing */
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
}

/* 3. CORE PAGE STYLES */
html {
    font-size: 18px; /* Slightly larger, gentler base font */
}

body {
    font-family: var(--font-sans);
    line-height: 1.7; /* More line height for readability */
    color: var(--color-ink);
    background-color: var(--color-cream);
    padding: var(--space-md);
    max-width: 1000px; /* Constrain width for long-form reading */
    margin: 0 auto;
}

/* 4. TYPOGRAPHY - Gentle Hierarchy */
h1, h2, h3 {
    font-family: var(--font-serif);
    color: var(--color-ink);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    font-weight: normal; /* Less harsh than bold */
    line-height: 1.3;
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }

p {
    margin-bottom: var(--space-sm);
    text-align: justify; /* Creates clean, ragged edges */
}

a {
    color: var(--color-ink-light);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 0.2em; /* Pushes underline down slightly */
}
a:hover {
    color: var(--color-ink);
}

/* ============================================ */
/* ЁЯЫая╕П LEGACY TABLE SUPPORT (CRITICAL)          */
/* ============================================ */
/* These rules will style your old table-based layouts */
table {
    width: 100%;
    border-collapse: collapse; /* Removes double borders */
    margin: var(--space-md) 0;
    background-color: var(--color-paper);
    border: 1px solid var(--color-border);
}

td, th {
    border: 1px solid var(--color-border);
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top; /* Aligns content to top of cell */
}

th {
    background-color: var(--color-cream);
    font-weight: 600;
    font-family: var(--font-serif);
}

/* Center old tables that used align="center" */
table[align="center"] {
    margin-left: auto;
    margin-right: auto;
    width: auto; /* Don't force full width if table is small */
}

/* Style table-based "containers" */
table[width]:not([align="center"]) {
    margin: var(--space-md) auto; /* Center tables with fixed width */
    
 /* ============================================ */
/* 🛠️ LEGACY TABLE SUPPORT (CRITICAL)          */
/* ============================================ */
/* ... (your existing table styles here) ... */

/* TARGET THE MAIN SITE CONTAINER TABLE */
/* This makes the main content area pale pink */
table[width="800"],           /* If your table has width="800" */
table[width="90%"],           /* If your table has width="90%" */
table.main-table,             /* If it has class="main-table" */
div#content,                  /* If you switch to a <div id="content"> */
.container table {            /* A broad fallback for tables inside containers */
    background-color: var(--color-cream) !important;
    border-color: var(--color-border) !important;
}

/* Also style table cells to be transparent, letting the pink show through */
table[width="800"] td,
table[width="90%"] td,
table.main-table td,
.container table td {   
    
 /* 🛠️ LEGACY TABLE SUPPORT (CRITICAL)          */
/* ============================================ */
/* ... keep your existing table styles ... */

/* MAKE THE MAIN SITE CONTAINER MATCH THE PAGE BACKGROUND */
body > table {  /* Targets ONLY the table that is a direct child of <body> */
    background-color: var(--color-cream) !important;
}
🎯 Why This Works
body > table is a precise selector that targets only the main layout table (the one directly inside your <body> tags), not every table on the page.
 
 
    
    
}

/* ============================================ */
/* 5. UTILITY CLASSES & MODERN LAYOUT           */
/* ============================================ */
/* Use these for new pages */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--space-sm);
}

.text-center {
    text-align: center;
}

.gentle-card {
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    padding: var(--space-md);
    margin: var(--space-md) 0;
}

/* 6. RESPONSIVE DESIGN */
@media (max-width: 768px) {
    html { font-size: 16px; }
    body { padding: var(--space-sm); }
    table { display: block; overflow-x: auto; } /* Allows horizontal scroll on mobile */
}
    }
}