/* ===========================================================================
   /family/ — the Perin family history
   ---------------------------------------------------------------------------
   The one place on the site that does NOT use the navy-and-gold palette, and
   that is a decision, not drift. The author asked for this section to carry
   its own colours, and the colours are not invented: they are the tinctures
   of the arms recorded for Perin of Ashby de la Zouch in the 1619 visitation —
   argent (silver/white), sable (black) and vert (green). The record names the
   tinctures and not the shades; the shades below are chosen, and checked for
   contrast against every surface they sit on.

   How it layers: css/theme.css loads first and defines the semantic names
   (--bg-deep, --text-primary, --accent-gold ...). This file remaps those same
   names for /family/ pages only, so the shared nav, the mode switch and the
   prev/next strip pick the family palette up without being restyled.

   Learning mode is left alone on purpose. It is palette-independent by design
   (see theme.css section 5) and a reader who chose it chose it for legibility.

   Contrast, computed (WCAG 2.x), text against deep / surface / elevated:
     sable  text #e7ebe6 15.5 / 14.5 / 13.2   secondary #bec5bf 10.6 / 9.9 / 9.0
            muted #99a29b 7.1 / 6.6 / 6.0     vert-text #8fc79d 9.7 / 9.0 / 8.2
     argent text #111612 16.7 / 15.2 / 13.9   secondary #36403a 9.8 / 8.9 / 8.2
            muted #525c55 6.3 / 5.8 / 5.3     vert-text #1e5a35 7.5 / 6.8 / 6.2
   The readers this was written for include a grandfather in his nineties, so
   body text is larger and heavier than the rest of the site, and nothing
   that carries meaning sits below 6:1.
   =========================================================================== */

:root {
    /* sable — the dark ground */
    --fam-d-deep: #0f1311;
    --fam-d-surface: #161b18;
    --fam-d-elevated: #1d2420;
    --fam-d-hover: #26302a;
    --fam-d-text: #e7ebe6;
    --fam-d-text-2: #bec5bf;
    --fam-d-muted: #99a29b;
    --fam-d-vert: #8fc79d;
    --fam-d-rule: rgba(195, 203, 198, 0.16);
    --fam-d-rule-strong: rgba(195, 203, 198, 0.34);
    --fam-d-nav: rgba(15, 19, 17, 0.9);

    /* argent — the light ground */
    --fam-l-deep: #f3f5f1;
    --fam-l-surface: #e7ebe5;
    --fam-l-elevated: #dce2da;
    --fam-l-hover: #cfd7cd;
    --fam-l-text: #111612;
    --fam-l-text-2: #36403a;
    --fam-l-muted: #525c55;
    --fam-l-vert: #1e5a35;
    --fam-l-rule: rgba(17, 22, 18, 0.14);
    --fam-l-rule-strong: rgba(17, 22, 18, 0.3);
    --fam-l-nav: rgba(243, 245, 241, 0.92);

    /* vert as a fill: the same in both modes. White on it is 8.2:1. */
    --fam-vert-fill: #1f5a36;
}

/* dark: the default, and an explicit choice */
:root:not([data-theme="learning"]) {
    --bg-deep: var(--fam-d-deep);
    --bg-surface: var(--fam-d-surface);
    --bg-elevated: var(--fam-d-elevated);
    --bg-hover: var(--fam-d-hover);
    --text-primary: var(--fam-d-text);
    --text-secondary: var(--fam-d-text-2);
    --text-muted: var(--fam-d-muted);
    --accent-warm: var(--fam-d-vert);
    --accent-gold: var(--fam-d-vert);
    --accent-ember: var(--fam-d-vert);
    --border-subtle: var(--fam-d-rule);
    --border-warm: var(--fam-d-rule-strong);
    --nav-bg: var(--fam-d-nav);
    --fam-vert: var(--fam-d-vert);
    --fam-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* light: explicit, then following the system with no stored choice */
:root[data-theme="light"] {
    --bg-deep: var(--fam-l-deep);
    --bg-surface: var(--fam-l-surface);
    --bg-elevated: var(--fam-l-elevated);
    --bg-hover: var(--fam-l-hover);
    --text-primary: var(--fam-l-text);
    --text-secondary: var(--fam-l-text-2);
    --text-muted: var(--fam-l-muted);
    --accent-warm: var(--fam-l-vert);
    --accent-gold: var(--fam-l-vert);
    --accent-ember: var(--fam-l-vert);
    --border-subtle: var(--fam-l-rule);
    --border-warm: var(--fam-l-rule-strong);
    --nav-bg: var(--fam-l-nav);
    --fam-vert: var(--fam-l-vert);
    --fam-shadow: 0 1px 0 rgba(17, 22, 18, 0.08);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg-deep: var(--fam-l-deep);
        --bg-surface: var(--fam-l-surface);
        --bg-elevated: var(--fam-l-elevated);
        --bg-hover: var(--fam-l-hover);
        --text-primary: var(--fam-l-text);
        --text-secondary: var(--fam-l-text-2);
        --text-muted: var(--fam-l-muted);
        --accent-warm: var(--fam-l-vert);
        --accent-gold: var(--fam-l-vert);
        --accent-ember: var(--fam-l-vert);
        --border-subtle: var(--fam-l-rule);
        --border-warm: var(--fam-l-rule-strong);
        --nav-bg: var(--fam-l-nav);
        --fam-vert: var(--fam-l-vert);
        --fam-shadow: 0 1px 0 rgba(17, 22, 18, 0.08);
    }
}
:root[data-theme="learning"] { --fam-vert: var(--accent-gold); --fam-shadow: none; }

/* --- base ---------------------------------------------------------------- */

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.72;
    background: var(--bg-deep);
    color: var(--text-primary);
    margin: 0;
}
main { max-width: 46rem; margin: 0 auto; padding: 8.5rem 1.5rem 4rem; }
main.wide { max-width: 72rem; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; }
h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); margin: 0 0 1rem; letter-spacing: -0.005em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.2rem); margin: 3.2rem 0 1rem; }
h3 { font-size: 1.45rem; margin: 2.2rem 0 0.6rem; }
p { margin: 0 0 1.15rem; }
p, li { max-width: 38em; }
ul, ol { margin: 0 0 1.2rem 1.4rem; }
li { margin-bottom: 0.45rem; }
a { color: var(--fam-vert); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
em { font-style: italic; }

/* Surnames in small capitals: the genealogist's convention for telling the
   family name apart from the given names in a long run of Johns. */
.sn { font-variant: small-caps; letter-spacing: 0.03em; }

.standfirst {
    font-family: var(--font-display); font-size: 1.45rem; line-height: 1.45;
    color: var(--text-secondary); margin: 0 0 2.2rem; max-width: 34em;
}
.chapter-no { display: block; color: var(--text-muted); font-size: 1rem; margin-bottom: 0.3rem; }

hr.tri {
    border: 0; height: 1px; margin: 3rem 0; background: var(--border-subtle);
}

blockquote {
    margin: 1.6rem 0; padding: 0.2rem 0 0.2rem 1.3rem;
    border-left: 3px solid var(--fam-vert);
    font-family: var(--font-display); font-size: 1.35rem; line-height: 1.5;
    color: var(--text-primary);
}
blockquote p { margin-bottom: 0.6rem; }
blockquote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: 0.95rem; color: var(--text-muted); }

/* --- the evidence marks ---------------------------------------------------
   Four, and they mean the same thing everywhere, including in the tree.
   Shape carries the meaning as well as colour, so they read in learning mode
   and in print. */

.ev {
    display: inline-block; vertical-align: 0.12em;
    font-size: 0.78rem; line-height: 1.3; font-weight: 500;
    padding: 0.08rem 0.5rem; border-radius: 999px;
    border: 1px solid var(--border-warm); color: var(--text-secondary);
    white-space: nowrap;
}
.ev-record { background: var(--fam-vert-fill); border-color: var(--fam-vert-fill); color: #fff; }
.ev-published { border-style: solid; }
.ev-chart { border-style: dashed; }
.ev-probable { border-style: dotted; border-width: 2px; color: var(--fam-vert); }
.ev-story { font-style: italic; border-color: transparent; padding-left: 0; }

.legend { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.legend li { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; margin: 0; max-width: none; }
.legend .ev { justify-self: start; }

/* --- facts that sit beside the prose ------------------------------------- */

.facts {
    margin: 1.8rem 0; padding: 1.2rem 1.4rem;
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: 4px;
}
.facts h3 { margin-top: 0; font-size: 1.2rem; }
.facts dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.2rem; margin: 0; }
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; }

.note {
    margin: 1.6rem 0; padding: 0.9rem 1.2rem;
    border-left: 3px solid var(--border-warm); background: var(--bg-surface);
    color: var(--text-secondary); font-size: 1.02rem;
}
.note p:last-child { margin-bottom: 0; }

/* --- the descent: a drop-line, as on a printed pedigree ----------------- */

.descent { list-style: none; margin: 2rem 0; padding: 0; position: relative; }
.descent::before {
    content: ''; position: absolute; left: 1.05rem; top: 0.9rem; bottom: 0.9rem;
    width: 2px; background: var(--fam-vert); opacity: 0.55;
}
.descent > li { position: relative; margin: 0 0 1.4rem; padding-left: 3.2rem; max-width: none; }
.descent > li::before {
    content: attr(data-gen); position: absolute; left: 0; top: 0.1rem;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bg-deep); border: 2px solid var(--fam-vert);
    font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--text-primary);
    font-variant-numeric: lining-nums tabular-nums;
}
.descent .who { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; line-height: 1.25; display: block; }
.descent .when { color: var(--text-muted); font-size: 1rem; }
.descent .wed { display: block; color: var(--text-secondary); }
.descent .why { display: block; margin-top: 0.3rem; color: var(--text-secondary); font-size: 1.02rem; max-width: 36em; }
.descent li.is-gap::before { border-style: dashed; }

/* --- figures, including images hotlinked from the archives that hold them - */

figure { margin: 2rem 0; }
figure img {
    display: block; max-width: 100%; height: auto; border-radius: 3px;
    background: #fff; border: 1px solid var(--border-subtle);
}
figure.portrait img { max-width: 20rem; }
figure.document img { width: 100%; }
figcaption { margin-top: 0.6rem; font-size: 0.98rem; color: var(--text-muted); max-width: 40em; }
figure.is-missing img { display: none; }
figure .missing { display: none; padding: 1rem 1.2rem; border: 1px dashed var(--border-warm); border-radius: 3px; color: var(--text-secondary); }
figure.is-missing .missing { display: block; }
figure.is-missing { display: flex; flex-direction: column; }
figure.is-missing .missing { order: -1; }
.fig-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.4rem; }
.fig-pair figure { margin: 0; }

/* --- the landing --------------------------------------------------------- */

.hero {
    display: grid; grid-template-columns: minmax(11rem, 17rem) 1fr; gap: 2.8rem;
    align-items: center; margin: 0 0 3rem;
}
.hero .arms { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35)); }
.hero h1 { margin-bottom: 0.6rem; }
.hero .sub { font-family: var(--font-display); font-size: 1.55rem; color: var(--text-secondary); margin: 0 0 1rem; line-height: 1.3; }
.hero .arms-cap { font-size: 0.92rem; color: var(--text-muted); margin: 0.9rem 0 0; }

.letter {
    font-family: var(--font-display); font-size: 1.32rem; line-height: 1.6;
    margin: 0 0 3rem; padding: 1.8rem 2rem; max-width: none;
    background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 4px;
}
.letter p { max-width: 34em; }
.letter .sign { text-align: right; font-style: italic; margin: 0; max-width: none; }

.toc { list-style: none; margin: 1rem 0 2.5rem; padding: 0; counter-reset: ch; border-top: 1px solid var(--border-subtle); }
.toc li { counter-increment: ch; margin: 0; max-width: none; border-bottom: 1px solid var(--border-subtle); }
.toc a {
    display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.2rem 1rem;
    padding: 1.05rem 0.4rem; text-decoration: none; color: inherit;
}
.toc a::before {
    content: counter(ch); grid-row: span 2;
    font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--fam-vert); line-height: 1;
    font-variant-numeric: lining-nums;
}
.toc .t { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.toc .d { color: var(--text-secondary); font-size: 1.02rem; }
.toc a:hover .t, .toc a:focus-visible .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

.tree-door {
    display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center;
    margin: 0 0 3rem; padding: 1.5rem 1.6rem; border-radius: 4px; text-decoration: none; color: #fff;
    background: var(--fam-vert-fill);
}
.tree-door svg { width: 3.4rem; height: 3.4rem; }
.tree-door .t { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1.15; }
.tree-door .d { display: block; color: rgba(255,255,255,0.88); font-size: 1.02rem; }
.tree-door:hover .t, .tree-door:focus-visible .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:root[data-theme="learning"] .tree-door { background: var(--bg-elevated); color: var(--text-primary); }
:root[data-theme="learning"] .tree-door .d { color: var(--text-secondary); }

/* --- tables -------------------------------------------------------------- */

.tbl-wrap { overflow-x: auto; margin: 1.5rem 0 2rem; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: left; vertical-align: top; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border-subtle); }
th { font-weight: 600; color: var(--text-secondary); border-bottom-color: var(--border-warm); }

/* --- the quest log ------------------------------------------------------- */

.quest { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 1rem; }
.quest li {
    margin: 0; max-width: none; padding: 1rem 1.2rem;
    border: 1px solid var(--border-subtle); border-radius: 4px; background: var(--bg-surface);
}
.quest .repo { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; display: block; line-height: 1.25; }
.quest .asks { display: block; color: var(--text-secondary); margin: 0.2rem 0 0.4rem; }
.quest .status { font-size: 0.92rem; color: var(--text-muted); }
.quest .status b { font-weight: 600; color: var(--fam-vert); }

/* --- chapter strip at the foot (theme.css .seq-nav does the layout) ----- */
.seq-nav { margin-top: 4.5rem; }
.seq-nav .seq-dir { font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 0; text-transform: none; }
.seq-nav .seq-title { font-size: 1.25rem; }

footer.fam {
    border-top: 1px solid var(--border-subtle); padding: 2.2rem 1.5rem 3rem;
    color: var(--text-muted); font-size: 0.98rem; text-align: center;
}
footer.fam p { max-width: 40rem; margin: 0 auto 0.4rem; }

/* --- small screens ------------------------------------------------------- */

@media (max-width: 720px) {
    body { font-size: 1.1rem; }
    main { padding: 7.5rem 1rem 3rem; }
    .hero { grid-template-columns: 1fr; gap: 1.6rem; text-align: left; }
    .hero .arms { max-width: 12.5rem; }
    .letter { padding: 1.3rem 1.2rem; font-size: 1.22rem; }
    .legend li { grid-template-columns: 1fr; gap: 0.2rem; }
    .facts dl { grid-template-columns: 1fr; gap: 0 0; }
    .facts dd { margin-bottom: 0.5rem; }
    .tree-door { grid-template-columns: 1fr; gap: 0.6rem; }
    .descent > li { padding-left: 2.9rem; }
}

@media print {
    .tree-door, .seq-nav, footer.fam { display: none !important; }
    main { padding-top: 1rem; max-width: none; }
    .ev { border-color: #555 !important; color: #000 !important; background: none !important; }
    .descent::before { background: #000; }
    .letter, .facts, .note, .quest li { background: none !important; border-color: #999 !important; }
    figure.is-missing { display: none; }
}

/* --- the tree ------------------------------------------------------------ */

.tree-tools { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: end; margin: 0 0 1.6rem; }
.tree-tools form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.tree-tools label { display: block; font-size: 0.98rem; color: var(--text-secondary); margin-bottom: 0.25rem; width: 100%; }
.tree-tools input {
    font: inherit; font-size: 1.05rem; padding: 0.55rem 0.75rem; min-width: 15rem;
    color: var(--text-primary); background: var(--bg-surface);
    border: 1px solid var(--border-warm); border-radius: 4px;
}
.btn {
    font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer;
    padding: 0.55rem 1rem; border-radius: 4px;
    color: #fff; background: var(--fam-vert-fill); border: 1px solid var(--fam-vert-fill);
}
.btn:hover { filter: brightness(1.12); }
.btn-quiet { background: transparent; color: var(--text-primary); border-color: var(--border-warm); }
:root[data-theme="learning"] .btn { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-warm); }
#find-msg { width: 100%; margin: 0.3rem 0 0; color: var(--text-secondary); font-size: 0.98rem; min-height: 1.4em; }

.jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.jump li { margin: 0; }

.tree-stage { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2rem; align-items: start; }
.ped-wrap { position: relative; }
.ped {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.2rem; row-gap: 0.55rem;
    align-items: center;
}
.ped-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.ped-lines path { fill: none; stroke: var(--border-warm); stroke-width: 1.5; }

.pc {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; text-align: left;
    width: 100%; min-height: 4.4rem; padding: 0.6rem 0.75rem; border-radius: 4px; cursor: pointer;
    font: inherit; color: var(--text-primary); background: var(--bg-surface);
    border: 1px solid var(--border-subtle); box-shadow: var(--fam-shadow);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.pc:hover { background: var(--bg-elevated); border-color: var(--border-warm); }
.pc-name { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.2; }
.pc-dates { font-size: 0.9rem; color: var(--text-muted); }
.pc .ev { font-size: 0.7rem; margin-top: 0.2rem; }
.pc-focus { border: 2px solid var(--fam-vert); background: var(--bg-elevated); min-height: 6rem; }
.pc-focus .pc-name { font-size: 1.4rem; }
.pc-empty { cursor: default; border-style: dashed; background: transparent; box-shadow: none; justify-content: center; }
.pc-empty .pc-name { font-family: var(--font-body); font-weight: 400; font-size: 0.95rem; color: var(--text-muted); }

.who-panel {
    position: sticky; top: 6.5rem;
    padding: 1.3rem 1.4rem; border-radius: 4px;
    background: var(--bg-surface); border: 1px solid var(--border-subtle); border-top: 3px solid var(--fam-vert);
}
.who-panel h2 { margin: 0 0 0.2rem; font-size: 1.7rem; }
.who-panel h2:focus { outline: none; }
.who-panel h3 { font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; color: var(--text-muted); margin: 1.1rem 0 0.3rem; }
.who-panel ul { list-style: none; margin: 0; padding: 0; }
.who-panel li { margin: 0 0 0.25rem; }
.wp-dates { color: var(--text-muted); margin-bottom: 0.7rem; }
.wp-note { font-size: 1.04rem; }
.wp-src { font-size: 0.98rem; color: var(--text-secondary); }
.wp-src .ev { margin-right: 0.3rem; }
.link-btn {
    font: inherit; font-size: 1.02rem; text-align: left; cursor: pointer; padding: 0.1rem 0;
    background: none; border: 0; color: var(--fam-vert);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
.wp-read { display: inline-block; margin-top: 1.2rem; font-weight: 500; }

#tree:not(.is-live) .tree-live { display: none; }
#tree.is-live .tree-static { display: none; }

@media (max-width: 1080px) {
    .tree-stage { grid-template-columns: 1fr; }
    .who-panel { position: static; }
}
@media (max-width: 720px) {
    .ped { grid-template-columns: 1fr; column-gap: 0; row-gap: 0.5rem; }
    /* on a phone the chart becomes a ladder: you, then parents, then grandparents */
    .ped .pc { grid-column: 1 !important; grid-row: auto !important; }
    .ped .pc[data-slot="2"], .ped .pc[data-slot="4"] { margin-top: 0.9rem; }
    .ped .pc[data-slot="2"]::before, .ped .pc[data-slot="4"]::before {
        display: block; font-family: var(--font-body); font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.1rem;
    }
    .ped .pc[data-slot="2"]::before { content: 'Father'; }
    .ped .pc[data-slot="3"]::before { content: 'Mother'; display: block; font-size: 0.85rem; color: var(--text-muted); }
    .ped .pc[data-slot="4"]::before { content: 'Grandparents'; }
    .tree-tools input { min-width: 0; width: 100%; }
    .tree-tools form { width: 100%; }
}