:root {
    color-scheme: light;
    --ink: #263e36;
    --muted: #627068;
    --paper: #fffdf8;
    --line: #d9ded4;
    --accent: #315c48;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
#family-search { width: 100%; padding: .65rem; border: 1px solid #bbc5ba; border-radius: 4px; }
#family-list { max-height: 320px; overflow-y: auto; margin: 1rem 0; border: 1px solid var(--line); padding: .7rem; }
.family-choice { font-size: .85rem; padding: .5rem 0; overflow-wrap: anywhere; }
button:disabled { opacity: .55; cursor: not-allowed; }
body { margin: 0; background: #f1f0e9; color: var(--ink); font: 16px/1.65 system-ui, sans-serif; }
a { color: var(--accent); text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; }
select, input[type="number"] { display: block; width: 100%; min-width: 0; margin-bottom: 1.2rem; border: 1px solid #bbc5ba; border-radius: 4px; padding: .65rem; background: white; color: var(--ink); }
input[type="search"] { max-width: 100%; }
#person-search { width: 100%; padding: .65rem; margin-bottom: 1rem; border: 1px solid #bbc5ba; border-radius: 4px; }
#ancestor-preview { max-height: 320px; overflow-y: auto; padding-left: 1.6rem; }
#ancestor-preview li { padding: .4rem 0; font-size: .85rem; overflow-wrap: anywhere; }
button, input[type="file"] { max-width: 100%; }
button { padding: .8rem 1.2rem; border: 1px solid var(--accent); border-radius: 5px; background: var(--accent); color: white; cursor: pointer; }
button:hover { background: #244733; }
button.secondary { background: transparent; color: var(--accent); }
:focus-visible { outline: 3px solid #b17a2c; outline-offset: 4px; }
h1, h2, h3, .brand { font-family: Georgia, "Times New Roman", serif; font-weight: normal; line-height: 1.2; }
h1 { font-size: clamp(2.3rem, 5vw, 4rem); margin: .8rem 0 1.5rem; overflow-wrap: anywhere; }
h2 { font-size: 2rem; margin: .5rem 0 1rem; overflow-wrap: anywhere; }
h3 { font-size: 1.35rem; margin: .6rem 0; overflow-wrap: anywhere; }
p { margin: .6rem 0 1.1rem; }
.site-header { max-width: 1180px; margin: auto; padding: 1.6rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.site-header > span { color: var(--muted); font-size: .85rem; }
.brand { font-size: 1.8rem; text-decoration: none; }
.brand span { color: #8b6b3c; }
main { max-width: 1120px; margin: auto; padding: 1rem 2rem 3rem; }
.intro { max-width: 760px; margin: 3rem 0; }
.intro > p:last-child { max-width: 640px; font-size: 1.1rem; color: var(--muted); }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font: 600 .73rem/1.5 system-ui, sans-serif; color: #7b623a; margin: 0 0 .7rem; }
.upload-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 2.5rem; display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; box-shadow: 0 12px 35px #263e3608; }
.upload-panel > div > p { color: var(--muted); }
form label:not(.checkbox) { display: block; font-weight: 600; margin-bottom: .4rem; }
input[type="text"], input[type="file"], textarea { display: block; width: 100%; margin-bottom: 1.2rem; border: 1px solid #bbc5ba; border-radius: 4px; padding: .65rem; background: white; color: var(--ink); }
textarea { margin-bottom: .4rem; resize: vertical; }
input[type="file"] { font-size: .9rem; }
input::file-selector-button { padding: .4rem .65rem; margin-right: .6rem; border: 1px solid var(--line); border-radius: 3px; background: #eef1e9; color: var(--ink); cursor: pointer; }
.checkbox { display: flex; align-items: start; gap: .65rem; }
.checkbox input { margin-top: .5rem; accent-color: var(--accent); }
.field-help { font-size: .8rem; color: var(--muted); margin-top: -.5rem; }
.checkbox + .field-help { margin-top: .6rem; }
form button { margin: .4rem .4rem 0 0; }
.muted { color: var(--muted); font-size: .9rem; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 0; }
.toolbar p { margin: 0; }
.print-help { font-size: .9rem; color: var(--muted); margin: .5rem 0 1.5rem; }
.alert { border-left: 4px solid #a87d37; background: #fff5df; padding: .8rem 1rem; font-size: .9rem; overflow-wrap: anywhere; }
.error { border-color: #a23f35; background: #fff0ed; margin-bottom: 1.5rem; }
.book { max-width: 850px; margin: auto; }
.cover, .family-page, .reference-appendix, .dedication, .contents, .name-index { background: var(--paper); margin: 1.6rem 0; padding: 3rem; box-shadow: 0 3px 20px #263e3610; }
.dedication { min-height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; }
.dedication-text { max-width: 520px; font-family: Georgia, serif; font-size: 1.35rem; font-style: italic; line-height: 1.7; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { border-bottom: 1px solid var(--line); }
.toc a { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; padding: .6rem 0; color: inherit; text-decoration: none; }
.toc-number { min-width: 5.5rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.toc-title { flex: 1; }
.toc-generation { font-size: .8rem; color: var(--muted); }
.lifespan { font-size: .75em; color: var(--muted); white-space: nowrap; }
.veteran { margin: .2rem 0 .6rem; font-size: .85rem; font-weight: 600; color: #7a5a1e; }
.name-index h3 { margin: 1.4rem 0 .4rem; border-bottom: 1px solid var(--line); }
.index-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; font-size: .9rem; }
.index-list li { break-inside: avoid; padding: .15rem 0; }
.index-pages { font-size: .8rem; color: var(--muted); }
.cover { text-align: center; min-height: 650px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cover .muted { max-width: 480px; }
.cover-rule { width: 70px; border-top: 2px solid #ad946b; margin: 1.5rem auto; }
.family-heading { border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1.4rem; }
.record-id { font-size: .75rem; color: var(--muted); margin: .3rem 0 0; }
.partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.person { padding: 1rem 0; overflow-wrap: anywhere; }
.person .eyebrow { margin-bottom: .4rem; }
.children { border-top: 1px solid var(--line); margin-top: 1.3rem; padding-top: 1.2rem; }
.children > .person { border-bottom: 1px solid var(--line); }
.children > .person:last-child { border: 0; }
.child-names { list-style: none; margin: 0; padding: 0; }
.child-names li { padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
.child-names li:last-child { border: 0; }
.child-names .eyebrow { display: inline-block; min-width: 5.5rem; margin: 0; }
.facts { margin: .8rem 0; font-size: .9rem; }
.facts > div { margin-bottom: .5rem; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.note { font-size: .9rem; overflow-wrap: anywhere; }
.reference-link { font-size: .8rem; }
.reference-entry { border-bottom: 1px solid var(--line); padding: 1rem 0; overflow-wrap: anywhere; }
.book-heading-picture { display: flex; align-items: center; justify-content: center; min-height: 300px; background: var(--paper); margin: 1.6rem 0; padding: 3rem; box-shadow: 0 3px 20px #263e3610; }
.book-heading-picture img { display: block; max-width: 100%; max-height: 650px; width: auto; height: auto; object-fit: contain; }
.photos { display: flex; flex-wrap: wrap; gap: 1rem; }
figure { margin: .5rem 0; max-width: 100%; width: 220px; break-inside: avoid; }
figure img { display: block; max-width: 100%; max-height: 230px; width: auto; height: auto; object-fit: contain; }
figcaption { font-size: .8rem; color: var(--muted); margin-top: .4rem; overflow-wrap: anywhere; }
.missing-photo { border: 1px dashed #b7beb1; padding: 1rem; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.site-footer { text-align: center; padding: 1rem 1rem 2rem; color: var(--muted); font-size: .8rem; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; font-size: .9rem; }
.site-nav form { margin: 0; }
.site-nav form button { margin: 0; padding: .5rem .85rem; }
.button-link { display: inline-block; padding: .8rem 1.2rem; border: 1px solid var(--accent); border-radius: 5px; background: var(--accent); color: white; text-decoration: none; text-align: center; }
.button-link:hover { background: #244733; }
.home-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: center; padding: 4rem 0; }
.hero-description { color: var(--muted); font-size: 1.1rem; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 1.8rem 0 1rem; }
.keepsake-card { background: var(--paper); border: 1px solid #c9c1ad; border-radius: 6px 14px 14px 6px; border-left: 12px solid var(--accent); padding: 3rem 1.5rem; text-align: center; box-shadow: 10px 12px 0 #e3e1d5, 0 20px 40px #263e3610; }
.keepsake-card h2 { font-size: clamp(2.4rem, 4vw, 3.2rem); }
.keepsake-card ul { list-style: none; margin: 1.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.home-section { padding: 3rem 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.home-section > p:not(.eyebrow) { max-width: 800px; color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; margin-top: 2rem; }
.feature-card { background: var(--paper); padding: 1.5rem; border: 1px solid var(--line); border-radius: 8px; }
.feature-card p, .home-steps p { color: var(--muted); font-size: .95rem; }
.home-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 3rem; padding-left: 1.5rem; margin-top: 2rem; }
.home-steps li { padding-left: .5rem; }
.home-steps li::marker { color: #7b623a; font-weight: bold; }
.home-callout { display: flex; align-items: center; gap: 2rem; padding: 2rem; background: #e5ebe1; border-radius: 10px; margin: 1rem 0 2rem; }
.home-callout > div { flex: 1; }
.home-callout p { margin-bottom: 0; color: var(--muted); }
.account-main { max-width: 650px; padding-top: 3rem; }
.account-panel { background: var(--paper); padding: 2.5rem; border: 1px solid var(--line); border-radius: 10px; }
.account-panel h1 { font-size: clamp(2rem, 4vw, 2.7rem); }
.account-panel > p { color: var(--muted); }
input[type="email"], input[type="password"] { display: block; width: 100%; margin-bottom: 1.2rem; border: 1px solid #bbc5ba; border-radius: 4px; padding: .65rem; background: white; color: var(--ink); }
.account-switch { margin-top: 1.5rem; }
#project-workspace { margin: 2rem 0; padding: 2rem; background: var(--paper); border: 1px solid var(--line); }
#chapter-list { list-style: none; padding: 0; }
#chapter-list li { padding: .8rem 0; border-bottom: 1px solid var(--line); }
#chapter-list strong { display: block; overflow-wrap: anywhere; }
#chapter-list button, #project-workspace > button { margin: .4rem .4rem .4rem 0; }
#open-project { margin-top: .5rem; }
.surname-page { background: var(--paper); margin: 1.6rem auto; padding: 3rem; box-shadow: 0 3px 20px #263e3610; }
.surname-list { list-style: none; padding: 0; columns: 2; column-gap: 2rem; }
.surname-list li { break-inside: avoid; overflow-wrap: anywhere; }
#project-pages [data-person-id] { cursor: pointer; text-decoration: underline dotted; text-underline-offset: .2em; }
dialog { max-width: min(640px, 95vw); max-height: 90vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 2rem; color: var(--ink); background: var(--paper); }
dialog::backdrop { background: #0007; }
dialog button { margin: .4rem; }
.dedication-text p { white-space: pre-line; }
.family-album { background: var(--paper); margin: 1.6rem 0; padding: 2rem; box-shadow: 0 3px 20px #263e3610; }
.album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.album-grid figure { width: 100%; margin: 0; min-width: 0; }
.album-grid img { width: 100%; height: 160px; object-fit: contain; }
.album-grid figcaption { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.3; font-size: .8rem; text-align: center; }
.album-edit-row { border-bottom: 1px solid var(--line); padding: .6rem 0; overflow-wrap: anywhere; }
.album-edit-row > img { display: block; max-width: 100%; width: 160px; height: 120px; object-fit: contain; margin-bottom: .5rem; }
.genealogy-chart { background: var(--paper); margin: 1.6rem auto; padding: 3rem; box-shadow: 0 3px 20px #263e3610; break-before: page; }
.genealogy-chapter:empty { display: none; }
.genealogy-scroll { overflow-x: auto; }
.genealogy-tree, .genealogy-tree ul { list-style: none; margin: 0; padding: 0; }
.genealogy-tree ul { padding-left: 2.2rem; }
.genealogy-tree li { position: relative; }
.genealogy-tree ul > li { padding-top: .7rem; }
.genealogy-tree ul > li::before { content: ""; position: absolute; left: -1.2rem; top: 0; bottom: 0; border-left: 1px solid var(--accent); }
.genealogy-tree ul > li:last-child::before { bottom: auto; height: 2.1rem; }
.genealogy-tree ul > li::after { content: ""; position: absolute; left: -1.2rem; top: 2.1rem; width: 1.2rem; border-top: 1px solid var(--accent); }
.genealogy-person { display: inline-block; width: 22rem; max-width: 100%; padding: .55rem .8rem; border: 1px solid var(--accent); border-radius: 5px; background: #f4f6ef; font-size: .9rem; overflow-wrap: break-word; break-inside: avoid; }
.genealogy-person strong { display: inline; }
.genealogy-person .lifespan { white-space: nowrap; margin-left: .3rem; }
.genealogy-person small { display: block; }
.genealogy-continue { display: block; margin-top: .2rem; font-size: .75rem; }
.chapter-photos { background: var(--paper); margin: 1.6rem 0; padding: 3rem; box-shadow: 0 3px 20px #263e3610; break-before: page; }
.chapter-photos .album-controls { margin-bottom: 2.5rem; }
@media print {
    body:has(#project-preview:not([hidden])) .intro,
    body:has(#project-preview:not([hidden])) .upload-panel { display: none !important; }
    #project-pages > article { break-before: page; }
    .surname-page { break-before: page; background: white; box-shadow: none; margin: 0; padding: 0; }
    #project-pages [data-person-id] { text-decoration: none; }
    .family-album { break-before: page; break-inside: avoid; background: white; box-shadow: none; margin: 0; padding: 0; }
    .family-album h2 { font-size: 16pt; }
    .album-grid { gap: 3mm; grid-template-rows: repeat(3, 65mm); }
    .book-photos .album-grid { grid-template-rows: none; grid-auto-rows: 65mm; }
    .book-photos figure { break-inside: avoid; }
    .album-grid img { height: 32mm; max-height: 32mm; }
    .album-grid figcaption { font-size: 7pt; }
    .genealogy-chart { break-before: page; background: white; box-shadow: none; margin: 0; padding: 0; }
    .genealogy-scroll { overflow: visible; }
    .genealogy-person { background: white; font-size: 9pt; padding: 3mm; }
    .chapter-photos { break-before: page; background: white; box-shadow: none; margin: 0; padding: 0; }
}
@media (max-width: 760px) {
    .site-header { flex-wrap: wrap; }
    .home-hero { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 3rem; }
    .keepsake-card { max-width: 440px; width: calc(100% - 10px); margin: auto; }
    .feature-grid, .home-steps { grid-template-columns: 1fr; }
    .home-callout { flex-direction: column; align-items: start; padding: 1.5rem; }
    .account-panel { padding: 1.5rem; }
    main { padding: 1rem; }
    .site-header { padding: 1rem; }
    .site-header > span { display: none; }
    .intro { margin: 2rem 0; }
    .upload-panel { grid-template-columns: 1fr; padding: 1.5rem; gap: 1rem; }
    .toolbar { flex-wrap: wrap; }
    .toolbar p { order: 3; width: 100%; }
    .cover, .family-page, .reference-appendix, .dedication, .contents, .name-index { padding: 1.5rem; }
    .book-heading-picture { min-height: 250px; padding: 1.5rem; }
    .genealogy-chart { padding: 1.5rem; }
    .index-list { columns: 1; }
    .partners { grid-template-columns: 1fr; gap: 0; }
}
@page { size: auto; margin: 16mm; }
[data-unpaid-preview] :is(.cover, .family-page, .reference-appendix, .dedication, .contents, .name-index, .book-heading-picture, .genealogy-chart, .chapter-photos, .surname-page) {
    position: relative;
    isolation: isolate;
}
[data-unpaid-preview] :is(.cover, .family-page, .reference-appendix, .dedication, .contents, .name-index, .book-heading-picture, .genealogy-chart, .chapter-photos, .surname-page)::after {
    content: "GENERATIONS BOUND \A UNPAID PREVIEW";
    white-space: pre;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    height: 6rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: translate(-50%, -50%) rotate(-28deg);
    font: 800 clamp(.9rem, 3vw, 2.5rem)/1.5 system-ui, sans-serif;
    color: #315c4840;
    pointer-events: none;
    user-select: none;
}
@media print {
    [data-unpaid-preview] :is(.cover, .family-page, .reference-appendix, .dedication, .contents, .name-index, .book-heading-picture, .genealogy-chart, .chapter-photos, .surname-page)::after { content: none; }
    body:has([data-unpaid-preview] > article.book, #project-preview:not([hidden]) #project-pages > *)::after {
        content: "GENERATIONS BOUND \A UNPAID PREVIEW";
        white-space: pre;
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        transform: rotate(-28deg);
        font: 800 30pt/1.5 system-ui, sans-serif;
        color: #888;
        opacity: .35;
        pointer-events: none;
    }
    body { background: white; color: #17231e; font-size: 10pt; }
    .no-print { display: none !important; }
    main, .book { max-width: none; margin: 0; padding: 0; }
    .cover, .family-page, .reference-appendix, .dedication, .contents, .name-index { box-shadow: none; margin: 0; padding: 0; background: white; }
    .book-heading-picture { break-before: page; break-after: page; min-height: 250mm; margin: 0; padding: 0; box-shadow: none; background: white; }
    .book-heading-picture img { max-height: 245mm; }
    .cover { min-height: 220mm; }
    .dedication { min-height: 200mm; }
    .family-page, .reference-appendix, .dedication, .contents, .name-index { break-before: page; }
    .toc li, .index-list li { break-inside: avoid; }
    h1 { font-size: 32pt; }
    h2 { font-size: 23pt; }
    h3 { font-size: 15pt; }
    h2, h3, .eyebrow, dt { break-after: avoid; }
    .partners { display: block; }
    .person { padding: 3mm 0; }
    .facts, .note, .muted { font-size: 9pt; }
    .facts > div { break-inside: avoid; }
    figure img { max-height: 55mm; }
    a { color: inherit; text-decoration: none; }
}