:root {
    --bg: #FFFFFF;
    --bg-card: #F4F4F6;
    --text: #000000;
    --text-muted: #424242;
    --border: #D2D2D7;
    --border-strong: #888;
    --border-light: #e0e0e0;
    --landline-bold: #000;
    --link: #0066cc;
    /* --nav-bg kept as alias for backward compat; canonical is --bg-card */
    --nav-bg: var(--bg-card);
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000000;
        --bg-card: #1A1A1A;
        --text: #FFFFFF;
        --text-muted: #D2D2D7;
        --border: #424242;
        --border-strong: #888;
        --border-light: #303030;
        --landline-bold: #ffffff;
        --link: #6bb0ff;
        --nav-bg: var(--bg-card);
    }
}
* { box-sizing: border-box; }
body {
    font-family: "Times New Roman", Times, serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    font-size: 11pt;
    line-height: 1.25;
}
.page-body { padding: 24px 32px 80px 32px; }

/* Page title — "FAMILY OF ANNE AND GEORGE RATTERMAN" — matches the PDF
   replica. Sits directly above the directory table with a divider line
   immediately below it so the title visually attaches to A&G's row. */
.title {
    text-align: center;
    font-weight: 700;
    font-size: 14pt;
    letter-spacing: 0.3px;
    padding-bottom: 12px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
}
/* (.nav rules removed — site-nav.css is the canonical nav style now.) */

table.directory {
    width: 100%;
    border-collapse: collapse;
    /* Auto-layout sizes each column to its content. No grid lines —
       directory reads as a clean list, not a spreadsheet. */
}

table.directory tr { vertical-align: top; }
table.directory td {
    padding: 4px 10px;
}

/* Branch boundary: thicker top border on each branch head — including
   Beth (the first branch head, just below A&G). The horizontal line
   visually separates A&G from the rest of the family. */
tr.branch-start td { border-top: 1px solid var(--border); padding-top: 10px; }

/* Names: never truncate */
td.name-cell { white-space: nowrap; }
td.address-cell { line-height: 1.3; font-size: 10.5pt; white-space: nowrap; }
td.cell-cell { white-space: nowrap; font-size: 10.5pt; }
/* Email is the one column allowed to wrap if absolutely necessary, but only as fallback */
td.email-cell { font-size: 10pt; white-space: nowrap; }
td.dob-cell { white-space: nowrap; font-size: 10.5pt; text-align: right; }

a.tel-link, a.email-link {
    color: var(--link);
    text-decoration: none;
}
a.tel-link:hover, a.email-link:hover { text-decoration: underline; }

/* Bolding: all bloodline rows are BOLD; married-in are normal weight */
tr.bloodline td.name-cell { font-weight: 700; }
tr.married-in td.name-cell { font-weight: 400; }

/* Caps: A&G and branch heads (gen 0 + gen 1 bloodline)
   Uses small-caps so mixed-case names like "DePaulo" preserve their full caps
   on the D and P while lowercase letters render as smaller capital letters. */
tr.uppercase td.name-cell {
    font-variant: small-caps;
    text-transform: none;
    letter-spacing: 0.5px;
}

/* Indentation by level — staircase pattern */
tr.indent-0 td.name-cell { padding-left: 8px; }
tr.indent-1 td.name-cell { padding-left: 32px; }
tr.indent-2 td.name-cell { padding-left: 56px; }
tr.indent-3 td.name-cell { padding-left: 80px; }
tr.indent-4 td.name-cell { padding-left: 104px; }
tr.indent-5 td.name-cell { padding-left: 128px; }

.landline { font-weight: 700; color: var(--landline-bold); }
.address-line { display: block; }

.doc-date {
    margin-top: 24px;
    text-align: right;
    font-size: 9pt;
    color: var(--text-muted);
    font-family: -apple-system, sans-serif;
}

@media (max-width: 800px) {
    body { padding: 16px; font-size: 10pt; }
}