/* Free funeral programs: the site pages and the program pages.
   The site pages use the photo book creator's look (ivory, gold, Cormorant
   Garamond and Source Sans 3) so both products feel like one brand. Large,
   high-contrast type throughout: the families are often older, tired and on
   a deadline. */
:root { --ivory:#FBF8F2; --desk:#EFE8DC; --paper:#fff; --ink:#2B2622; --ink2:#4A423B; --muted:#6B625A; --line:#E6DCCB; --sand:#F3EBDD;
        --gold:#8A6416; --gold2:#B8862B; --goldline:#D9C7A6; --ok:#2E6B3F; --oksoft:#E4F1E7; --warn:#8A4B16; --warnsoft:#F8EBDD;
        --serif:'TH UI Serif', 'Cormorant Garamond', Georgia, serif; --sans:'TH UI Sans', 'Source Sans 3', system-ui, -apple-system, sans-serif; --script:'Great Vibes', cursive; }
/* The site's own words show at once in a stand-in font while the real one
   loads (font-display: swap), so headings and buttons are never blank. The
   program pages keep the book fonts (the print page waits for them). */
@font-face{font-family:'TH UI Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/photobook/fonts/source-sans-3-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'TH UI Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/photobook/fonts/source-sans-3-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'TH UI Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/photobook/fonts/source-sans-3-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'TH UI Serif';font-style:normal;font-weight:500;font-display:swap;src:url(/photobook/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'TH UI Serif';font-style:normal;font-weight:600;font-display:swap;src:url(/photobook/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'TH UI Serif';font-style:italic;font-weight:500;font-display:swap;src:url(/photobook/fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2');}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--ivory); color: var(--ink); font: 19px/1.5 var(--sans); }
a { color: var(--gold); } a:hover { color: #6B4D10; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; }
.fp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 64px; padding: 10px max(16px, 4%); background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.fp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.fp-brand img { height: 26px; width: auto; display: block; }
.fp-brand span { font: 600 13px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); padding-left: 12px; border-left: 1px solid var(--line); }
.fp-toplinks { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fp-toplinks a { font-weight: 700; font-size: 16px; text-decoration: none; }
.fp-saved { font-size: 16px; color: var(--ok); font-weight: 700; }
.fp-saved.is-saving { color: var(--muted); }
.fp-saved.is-bad { color: var(--warn); }
.fp-wrap { max-width: 1180px; margin: 0 auto; padding: 30px max(16px, 4%) 80px; }
.fp-eyebrow { font: 700 14px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.fp-h1 { font: 600 clamp(36px, 5vw, 52px)/1.08 var(--serif); margin: 0 0 14px; text-wrap: balance; }
.fp-h2 { font: 600 32px/1.15 var(--serif); margin: 0 0 10px; }
.fp-lead { font-size: 21px; color: var(--ink2); margin: 0 0 24px; max-width: 62ch; }
.fp-note { font-size: 17px; color: var(--muted); }
.fp-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; margin: 0 0 18px; }
.fp-card > h2 { font: 700 22px/1.3 var(--sans); margin: 0 0 12px; }
.fp-desk { background: var(--desk); border-radius: 18px; padding: 24px; }
.fp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 24px; border-radius: 12px; border: 1.5px solid var(--goldline); background: #fff; color: var(--ink); font-weight: 700; font-size: 18px; text-decoration: none; cursor: pointer; line-height: 1.2; }
.fp-btn:hover { border-color: var(--gold2); color: var(--ink); }
.fp-btn.primary { background: var(--gold); border-color: var(--gold); color: #fff; }
.fp-btn.primary:hover { background: #745411; color: #fff; }
.fp-btn.big { font-size: 21px; min-height: 60px; padding: 14px 32px; }
.fp-btn.small { min-height: 44px; font-size: 16px; padding: 8px 14px; }
.fp-btn:disabled { opacity: .55; cursor: default; }
.fp-link { background: none; border: 0; padding: 4px 0; color: var(--gold); font-weight: 700; cursor: pointer; text-decoration: underline; }
.fp-row { display: flex; flex-wrap: wrap; gap: 16px; }
.fp-row > * { flex: 1 1 240px; min-width: 0; }
.fp-field { margin: 0 0 14px; }
.fp-field label, .fp-label { display: block; font-size: 18px; margin: 0 0 8px; font-weight: 700; }
.fp-field input[type=text], .fp-field input[type=email], .fp-field input[type=search], .fp-field select, .fp-field textarea,
.fp-input { width: 100%; font-size: 20px; padding: 13px 16px; border: 1.5px solid var(--goldline); border-radius: 12px; background: #fff; }
.fp-field textarea { min-height: 150px; line-height: 1.5; resize: vertical; }
.fp-field .fp-help, .fp-help { font-size: 17px; color: var(--muted); margin-top: 6px; }
.fp-flash { padding: 14px 18px; border-radius: 12px; margin: 0 0 18px; font-size: 18px; font-weight: 600; }
.fp-flash.ok { background: var(--oksoft); color: var(--ok); }
.fp-flash.err { background: var(--warnsoft); color: var(--warn); }
.fp-check { padding: 12px 16px; border-radius: 12px; font-size: 18px; margin-top: 12px; font-weight: 600; }
.fp-check.ok { background: var(--oksoft); color: var(--ok); }
.fp-check.bad { background: var(--warnsoft); color: var(--warn); }
.fp-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.fp-choice { position: relative; }
.fp-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fp-choice span { display: flex; align-items: center; min-height: 58px; padding: 12px 16px; border: 1.5px solid var(--goldline); border-radius: 12px; background: #fff; font-weight: 600; font-size: 18px; cursor: pointer; }
.fp-choice input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.fp-choice input:focus-visible + span { outline: 3px solid var(--gold2); outline-offset: 2px; }
.fp-tip { margin-top: 14px; background: var(--sand); border-radius: 12px; padding: 14px 16px; font-size: 18px; }
.fp-checkbox { display: flex; align-items: center; gap: 12px; font-size: 18px; margin-top: 14px; }
.fp-checkbox input { width: 24px; height: 24px; accent-color: var(--gold); }
.fp-photo-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.fp-thumb { width: 120px; height: 150px; border-radius: 999px 999px 10px 10px; background: #E6DED1 center/cover no-repeat; flex: none; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--goldline); }
.fp-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.fp-swatch { position: relative; }
.fp-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fp-swatch span { display: block; width: 48px; height: 48px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 1px #B9AE9C; cursor: pointer; }
.fp-swatch input:checked + span { box-shadow: 0 0 0 2.5px var(--ink); }
.fp-swatch input:focus-visible + span { outline: 3px solid var(--gold2); outline-offset: 2px; }
.fp-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.fp-tab { font: 700 17px var(--sans); padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--goldline); background: #fff; color: var(--ink); cursor: pointer; min-height: 46px; }
.fp-tab[aria-pressed="true"], .fp-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fp-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px 18px; }
.fp-design { position: relative; display: grid; gap: 8px; cursor: pointer; min-width: 0; }
.fp-design input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fp-design .pe-page { width: 100%; max-width: 100%; transition: transform .15s ease; }
.fp-design:hover .pe-page { transform: translateY(-3px); }
.fp-design:has(input:checked) .pe-page { outline: 3px solid var(--gold2); outline-offset: 4px; }
.fp-design:has(input:focus-visible) .pe-page { outline: 3px dashed var(--gold2); outline-offset: 4px; }
.fp-design b { font-size: 18px; }
.fp-design small { font-size: 15px; color: var(--muted); margin-top: -6px; }
.fp-spread { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.fp-pagebox { flex: 0 1 300px; min-width: 0; }
.fp-pagebox .pe-page, .fp-cover .pe-page { width: 100%; max-width: 100%; }
.fp-pagelabel { font-size: 15px; color: var(--muted); text-align: center; margin-top: 8px; }
.fp-sticky { position: sticky; bottom: 0; z-index: 15; background: rgba(251, 248, 242, .96); border-top: 1px solid var(--line); padding: 12px max(16px, 4%); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
@media (max-width: 640px) { body { font-size: 18px; } .fp-card { padding: 18px; } .fp-desk { padding: 14px; } .fp-designs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } .fp-design b { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .fp-design .pe-page { transition: none; } }

/* ---------- the program pages (program-engine.js) ---------- */
.pe-page { position: relative; width: 340px; aspect-ratio: 5.5 / 8.5; overflow: hidden; container-type: inline-size;
           box-shadow: 0 10px 26px rgba(40, 30, 20, .18); font-family: 'Cormorant Garamond', Georgia, serif; line-height: 1.3;
           -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pe-page * { box-sizing: border-box; }
.pe-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pe-in { position: absolute; inset: 0; padding: 10cqw 10cqw 9cqw; display: flex; flex-direction: column; z-index: 2; }
.pe-center { align-items: center; text-align: center; }
.pe-left { align-items: flex-start; text-align: left; }
.pe-bottom { justify-content: flex-end; padding-bottom: 10cqw; }
.pe-grow { flex: 1 1 auto; min-height: 2cqw; }

/* words */
.pe-k { font: 600 3.1cqw/1.3 'Source Sans 3', system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase; }
.pe-sl { font: 400 8.6cqw/1.05 'Great Vibes', cursive; margin-bottom: 1cqw; }
.pe-nm { margin: 0; }
.pe-nm2 { display: flex; flex-direction: column; align-items: center; }
.pe-left .pe-nm2 { align-items: flex-start; text-align: left; }
.pe-nm2 .pe-nl { white-space: nowrap; }
.pe-nm2.pe-nm-wrap .pe-nl { white-space: normal; overflow-wrap: anywhere; }
.pe-nm-capsscript .pe-nl, .pe-nm-caps .pe-nl { font-weight: 500; font-size: calc(10cqw * var(--nf, 1) * var(--nk, 1)); line-height: .98; letter-spacing: .14em; text-transform: uppercase; padding-left: .14em; }
.pe-nm-capsscript .pe-nm-s { font: 400 1em/0.9 'Great Vibes', cursive; letter-spacing: 0; text-transform: none; }
.pe-nm-capsscript .pe-nl-s { margin: -0.05em 0 0; line-height: 1.05; position: relative; z-index: 1; padding-left: 0; letter-spacing: 0; }
.pe-nm-gap { height: 1.5cqw; }
.pe-nm-serif .pe-nl { font-weight: 500; font-size: calc(10.5cqw * var(--nf, 1) * var(--nk, 1)); line-height: 1.05; }
.pe-nm-script .pe-nl { font: 400 calc(13cqw * var(--nf, 1) * var(--nk, 1))/1.05 'Great Vibes', cursive; }
.pe-nm-engraved .pe-nl { font: 500 calc(7.4cqw * var(--nf, 1) * var(--nk, 1))/1.2 Cinzel, Georgia, serif; letter-spacing: .08em; }
.pe-nm-modern .pe-nl { font: 500 calc(10cqw * var(--nf, 1) * var(--nk, 1))/1.05 'Playfair Display', Georgia, serif; }
.pe-nm-stack .pe-nl { font: 500 calc(12cqw * var(--nf, 1) * var(--nk, 1))/1.02 'Playfair Display', Georgia, serif; }
.pe-nm-stack .pe-nm-s { font-style: italic; font-size: .62em; }
.pe-dt { font: 600 calc(3.3cqw * var(--df, 1))/1.4 'Source Sans 3', system-ui, sans-serif; letter-spacing: .24em; margin-top: 3cqw; text-transform: uppercase; white-space: nowrap; max-width: 100%; }
.pe-dt-engr { font-family: Cinzel, Georgia, serif; letter-spacing: .18em; font-weight: 500; }
.pe-dt-left { margin-top: 2cqw; white-space: normal; }
.pe-dt.pe-dt-wrap { white-space: normal; }
.pe-svc { font: 500 4.1cqw/1.45 'Cormorant Garamond', Georgia, serif; font-style: italic; }
.pe-svc-bl { align-self: flex-start; width: 52cqw; text-align: left; }
/* A crowded cover: fit() makes its small words and name smaller (--cs, --nk) */
.pe-pg-front .pe-svc { font-size: calc(4.1cqw * var(--cs, 1)); }
.pe-pg-front .pe-k { font-size: calc(3.1cqw * var(--cs, 1)); }
.pe-pg-front .pe-sl { font-size: calc(8.6cqw * var(--cs, 1)); }
.pe-pg-front .pe-verse { font-size: calc(4.2cqw * var(--cs, 1)); }
.pe-garch { position: relative; flex: none; }
/* Covers whose art reaches into the page: the text box stops short of it
   (a trifold panel is taller, so the page-wide art stretches further). */
.pe-honor.pe-pg-front .pe-in { padding-bottom: 19cqw; }
.pe-third.pe-honor.pe-pg-front .pe-in { padding-bottom: 27cqw; }
.pe-engraved.pe-pg-front .pe-in { padding-bottom: 19.5cqw; }
.pe-third.pe-engraved.pe-pg-front .pe-in { padding-bottom: 28cqw; padding-top: 27cqw !important; }
.pe-third.pe-heirloom .pe-in { padding-bottom: 12.5cqw; }
.pe-third.pe-pg-front .pe-scene { height: 40%; }
.pe-portrait.pe-pg-front .pe-in.pe-bottom { padding-top: 78cqw; }
.pe-third.pe-portrait.pe-pg-front .pe-in.pe-bottom { padding-top: 126cqw; }
.pe-fullbleed.pe-pg-front .pe-in.pe-bottom { padding-top: 70cqw; }
.pe-third.pe-fullbleed.pe-pg-front .pe-in.pe-bottom { padding-top: 105cqw; }
.pe-garch-art { display: block; width: 100%; height: auto; }
.pe-wr-mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* Very long words or web addresses break instead of running off the page
   (never the name: fit() makes a long name smaller instead). */
.pe-story, .pe-poem, .pe-thanks, .pe-verse, .pe-svc, .pe-k, .pe-sl, .pe-h, .pe-author, .pe-note-q, .pe-repast, .pe-qrt, .pe-gph figcaption { overflow-wrap: anywhere; }
/* An order part's name breaks between words, never inside one ("PROCESSIONA / L"). */
.pe-part { overflow-wrap: break-word; }
.pe-third .pe-row .pe-part { letter-spacing: .08em; }
.pe-row .pe-val { overflow-wrap: anywhere; min-width: 0; }
.pe-dt.pe-dt-wrap, .pe-dt-left { overflow-wrap: anywhere; }
.pe-verse { font: italic 500 4.2cqw/1.45 'Cormorant Garamond', Georgia, serif; color: #4A423B; margin-top: 4cqw; max-width: 80%; }
.pe-big { font: 500 calc(22cqw * var(--nf, 1) * var(--nk, 1))/0.95 'Playfair Display', Georgia, serif; margin-top: 4cqw; letter-spacing: -.01em; }
.pe-big-sub { font: italic 500 calc(7cqw * var(--nk, 1))/1.1 'Playfair Display', Georgia, serif; color: #4A423B; margin-top: 1cqw; }
.pe-nm2 .pe-nl.pe-big-sub { white-space: normal; }
.pe-rule { width: 12cqw; height: .5cqw; margin: 5cqw 0 1cqw; }

/* photos */
.pe-ph { position: relative; overflow: hidden; background: #E6DED1; flex: none; }
.pe-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-ph.is-empty { display: flex; align-items: center; justify-content: center; color: #7A716A; font: 600 3.2cqw 'Source Sans 3', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.pe-ph-arch { aspect-ratio: 4 / 5; border-radius: 999px 999px 1.2cqw 1.2cqw; }
.pe-ph-circle { aspect-ratio: 1; border-radius: 50%; }
.pe-ph-oval { aspect-ratio: 4 / 5; border-radius: 50%; }
.pe-ph-rect { aspect-ratio: 4 / 5; }
.pe-ph-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.pe-hero { position: absolute; left: 0; right: 0; top: 0; }
.pe-fade { position: absolute; inset: 0; }
.pe-side { position: absolute; top: 0; bottom: 0; right: 0; width: 38%; }
.pe-wr { position: relative; aspect-ratio: 1; }
.pe-wr .pe-wreath { position: absolute; inset: 0; width: 100%; height: 100%; }

/* drawings */
.pe-corner { position: absolute; width: 58cqw; pointer-events: none; z-index: 1; }
.pe-corner svg { width: 100%; height: auto; display: block; }
.pe-tl { top: -2cqw; left: -3cqw; transform: scaleY(-1); }
.pe-tr { top: -2cqw; right: -3cqw; transform: rotate(180deg); }
.pe-bl { bottom: -2cqw; left: -3cqw; }
.pe-br { bottom: -2cqw; right: -3cqw; }
.pe-small { width: 40cqw; }
.pe-scene { position: absolute; left: 0; right: 0; top: 0; height: 58%; }
.pe-scene .pe-land { width: 100%; height: 100%; display: block; }
.pe-scene svg { width: 100%; height: 100%; }
.pe-scene-strip { height: 22%; }
.pe-band { position: absolute; left: 0; right: 0; top: 0; height: 3cqw; }
.pe-sideline { position: absolute; left: 0; top: 0; bottom: 0; width: 1.6cqw; }
.pe-div { margin: 3.5cqw 0 1cqw; display: flex; justify-content: center; }
.pe-heart { width: 8cqw; height: auto; }
.pe-heart-sm { width: 6cqw; }
.pe-div-line { width: 40cqw; height: 2cqw; position: relative; align-items: center; }
.pe-div-line::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--l); }
.pe-div-line i { position: relative; width: 1.6cqw; height: 1.6cqw; transform: rotate(45deg); }
.pe-sprigdiv { width: 34cqw; height: auto; }

/* inside pages */
.pe-h { font-weight: 500; font-size: 8.6cqw; line-height: 1.1; margin-top: 1.5cqw; }
.pe-story { margin-top: 3cqw; text-align: left; align-self: stretch; }
.pe-story p { font: 500 calc(4.3cqw * var(--fit, 1))/1.55 'Cormorant Garamond', Georgia, serif; margin: 0 0 calc(3cqw * var(--fit, 1)); color: #2B2622; }
.pe-story.is-hint p { color: #8C8475; font-style: italic; }
.pe-story p.pe-cont { margin-top: 0; }
.pe-story p:last-child { margin-bottom: 0; }
.pe-story-more .pe-story { margin-top: 0; }
.pe-order { align-self: stretch; margin-top: 3cqw; display: flex; flex-direction: column; gap: calc(2.4cqw * var(--fit, 1)); }
.pe-row { display: flex; align-items: baseline; gap: 1.6cqw; text-align: left; }
.pe-row .pe-dots { flex: 1 1 4cqw; min-width: 3cqw; border-bottom: 1px dotted #B9AE9C; transform: translateY(-0.9cqw); }
.pe-row .pe-val { margin-top: 0; text-align: right; max-width: 62%; }
.pe-row .pe-part { flex: 0 1 auto; max-width: 52%; letter-spacing: .14em; }
.pe-row:not(:has(.pe-val)) { justify-content: center; }
.pe-row.pe-row-left { justify-content: flex-start; }
.pe-row:not(:has(.pe-val)) .pe-part { max-width: 100%; }
.pe-part { font: 600 calc(2.9cqw * var(--fit, 1))/1.3 'Source Sans 3', system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.pe-val { font: 500 calc(4.4cqw * var(--fit, 1))/1.3 'Cormorant Garamond', Georgia, serif; margin-top: .6cqw; }
.pe-val.is-hint { color: #A39A8C; font-style: italic; }
.pe-thanks { font: italic 500 calc(4.6cqw * var(--fit, 1))/1.55 'Cormorant Garamond', Georgia, serif; margin-top: 3cqw; max-width: 92%; }
.pe-qrbox { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; align-self: stretch; text-align: center; }
/* The QR code and its words fill no more than the bottom fifth of the back (Brian, Oct 16).
   18cqw is about an inch on a 5.5 inch page; a trifold panel is narrower, so it stays larger there. */
/* The heart QR: the code itself prints about 0.6 in square (the heart is
   about 1.8 times the code's width). Smaller than p155's 0.75 in (Brian,
   Oct 20). Tested on all 24 designs in all 10 colors, both folds, with a
   simulated phone camera: reads at 8 inches away; at 0.55 in that dropped
   to about 7 inches. */
.pe-qr { width: 20cqw; }
.pe-third .pe-qr { width: 30cqw; }
/* On a dark back the code still prints dark, on a light square: many phones
   cannot read a light code on a dark ground. */
.pe-qr.pe-qr-light { background: #FBF8F2; padding: 2.4cqw; border-radius: 2cqw; box-sizing: content-box; }
.pe-qrt.pe-qrt-one { white-space: nowrap; }
.pe-qr svg { width: 100%; height: auto; display: block; }
.pe-qr.is-empty { aspect-ratio: 1; border: 1px dashed #8C8475; display: flex; align-items: center; justify-content: center; }
.pe-qrt { font: 600 calc(2.5cqw * var(--qf, 1))/1.3 'Source Sans 3', system-ui, sans-serif; max-width: 92%; text-wrap: balance; }
.pe-third .pe-qrt { font-size: calc(3.3cqw * var(--qf, 1)); }
.pe-mark { font: 600 1.9cqw 'Source Sans 3', sans-serif; letter-spacing: .2em; text-transform: uppercase; margin-top: 1cqw; opacity: .85; }
.pe-third .pe-mark { font-size: 2.5cqw; }
/* The QR code and the words under it sit low on the back (framed designs keep clear of the frame). */
.pe-pg-back .pe-in { padding-bottom: 4.5cqw; }
.pe-heirloom.pe-pg-back .pe-in, .pe-engraved.pe-pg-back .pe-in, .pe-gilded.pe-pg-back .pe-in { padding-bottom: 8.5cqw; }

@media print { .pe-page { box-shadow: none; } }

/* trifold panels: a third of a letter page */
.pe-page.pe-third { aspect-ratio: 3.6667 / 8.5; }
/* poem, verse or hymn */
.pe-poem { margin-top: 4cqw; font: italic 500 calc(4.5cqw * var(--fit, 1))/1.5 'Cormorant Garamond', Georgia, serif; color: #2B2622; }
.pe-poem .pe-gap { height: calc(2.6cqw * var(--fit, 1)); }
.pe-poem.is-hint, .pe-note-q { color: #8C8475; }
.pe-author { margin-top: 3cqw; font: 600 3cqw/1.3 'Source Sans 3', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #6B625A; }
/* photo pages */
.pe-grid { align-self: stretch; flex: 1 1 auto; display: grid; gap: 3cqw; margin-top: 4cqw; min-height: 0; }
.pe-grid-1 { grid-template-rows: 1fr; }
.pe-grid-2 { grid-template-rows: 1fr 1fr; }
.pe-grid-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1.25fr 1fr; }
.pe-grid-3 .pe-gph:first-child { grid-column: 1 / -1; }
.pe-grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pe-grid-5, .pe-grid-6 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
.pe-grid-5 .pe-gph:first-child { grid-column: 1 / -1; }
.pe-gph { position: relative; margin: 0; overflow: hidden; background: #E6DED1; min-height: 0; box-shadow: 0 0 0 0.8cqw #fff, 0 0.6cqw 1.6cqw rgba(40, 30, 20, .16); }
.pe-gph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pe-gph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4cqw 2cqw; font: italic 500 3.2cqw/1.25 'Cormorant Garamond', Georgia, serif; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
/* Small photos (four or more on a page, the two under a big one): the
   caption sits under the photo, so it never covers a face. */
.pe-grid-4 .pe-gph, .pe-grid-5 .pe-gph:not(:first-child), .pe-grid-6 .pe-gph, .pe-grid-3 .pe-gph:not(:first-child) { display: flex; flex-direction: column; }
.pe-grid-4 .pe-gph img, .pe-grid-5 .pe-gph:not(:first-child) img, .pe-grid-6 .pe-gph img, .pe-grid-3 .pe-gph:not(:first-child) img { position: relative; inset: auto; flex: 1 1 0; min-height: 0; height: auto; }
.pe-grid-4 .pe-gph figcaption, .pe-grid-5 .pe-gph:not(:first-child) figcaption, .pe-grid-6 .pe-gph figcaption, .pe-grid-3 .pe-gph:not(:first-child) figcaption {
  position: static; flex: none; background: #FFFFFF; color: #2B2622; font-size: 2.7cqw; line-height: 1.2; padding: .8cqw 1.2cqw .6cqw;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pe-gph.is-empty { display: flex; align-items: center; justify-content: center; color: #7A716A; font: 600 3.2cqw 'Source Sans 3', sans-serif; letter-spacing: .1em; text-transform: uppercase; box-shadow: none; border: 1px dashed #B9AE9C; }
/* notes page */
.pe-note-q { margin-top: 3cqw; font: italic 500 4.2cqw/1.4 'Cormorant Garamond', Georgia, serif; }
.pe-lines { align-self: stretch; margin-top: 4cqw; display: flex; flex-direction: column; gap: 6.6cqw; flex: 1 1 0; min-height: 0; overflow: hidden; }
.pe-line { border-bottom: 1px solid #CFC5B5; height: 1px; }
/* reception line, sample QR tag, verse on the back */
.pe-repast { margin-top: 4cqw; }
.pe-qr { position: relative; }
.pe-qr-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg); background: #fff; border: 1px solid #B9AE9C; color: #6B625A; font: 700 1.7cqw 'Source Sans 3', sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: .4cqw 1.1cqw; }
.pe-verse-back { margin-top: 6cqw; max-width: 84%; }

/* ---------- start page ---------- */
.fp-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.fp-hero-text { flex: 999 1 460px; min-width: 0; }
.fp-hero-art { flex: 1 1 380px; position: relative; height: 470px; max-width: 520px; margin: 0 auto; }
.fp-hero-card { position: absolute; width: 56%; }
.fp-hero-card .pe-page { width: 100%; }
.fp-hero-0 { left: 0; top: 40px; transform: rotate(-6deg); }
.fp-hero-2 { right: 0; top: 40px; transform: rotate(6deg); }
.fp-hero-1 { left: 22%; top: 0; z-index: 2; }
.fp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.fp-steps .fp-card { margin: 0; }
.fp-included ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 19px; }
@media (max-width: 640px) { .fp-hero-art { height: 360px; } }

/* ---------- design picker ---------- */
.fp-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.fp-format { position: relative; cursor: pointer; }
.fp-format input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fp-format span { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border: 1.5px solid var(--goldline); border-radius: 14px; background: #fff; }
.fp-format b { font-size: 20px; }
.fp-format small { font-size: 16px; color: var(--muted); line-height: 1.4; }
.fp-format input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.fp-format input:focus-visible + span { outline: 3px solid var(--gold2); outline-offset: 2px; }
.fp-sw-own { background: conic-gradient(#1E2B3C 0 20%, #5A2B36 0 40%, #5F7259 0 60%, #8A5D62 0 80%, #8A6416 0) !important; }

/* ---------- the editor ---------- */
.fp-editor-wrap { max-width: 1400px; padding-bottom: 120px; }
.fp-edhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; }
.fp-edhead .fp-tabs { margin: 0; }
.fp-editor { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
.fp-ed-pages .fp-spread { justify-content: flex-start; }
.fp-ed-pages .fp-pagebox { flex: 0 1 calc(50% - 9px); }
.fp-ed-pages .fp-pagebox.is-third { flex: 0 1 calc(33.33% - 12px); }
.fp-ed-pages [data-edit] { cursor: pointer; }
.fp-ed-pages [data-edit]:hover { outline: 2px dashed rgba(184, 134, 43, .7); outline-offset: 2px; }
.fp-ed-panel { position: sticky; top: 76px; max-height: calc(100vh - 170px); overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
/* Steps: numbered circles at the top, one step showing at a time. */
.fp-stepbar { position: sticky; top: 0; z-index: 4; background: var(--ivory); padding: 4px 0 10px; margin-bottom: 4px; }
.fp-stepper { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-dot { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--goldline); background: #fff; color: var(--ink); font: 700 17px var(--sans); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.fp-dot:hover { border-color: var(--gold2); }
.fp-dot.is-past { background: var(--sand); border-color: var(--gold2); }
.fp-dot.is-now { background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: 0 0 0 3px rgba(184, 134, 43, .3); }
.fp-dot.is-off { color: var(--muted); text-decoration: line-through; border-style: dashed; }
.fp-dot.is-now.is-off { color: #fff; }
.fp-step-where-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin-top: 8px; }
.fp-step-where { font: 700 16px var(--sans); color: var(--ink2); }
.fp-chip { border: 0; border-radius: 999px; padding: 6px 14px; font: 700 15px var(--sans); background: var(--warnsoft); color: var(--warn); cursor: pointer; }
.fp-chip.is-ok { background: var(--oksoft); color: var(--ok); }
.fp-chip:empty { display: none; }
.fp-step { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px 20px; }
.fp-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.fp-step-head h2 { font: 600 28px/1.15 var(--serif); margin: 0; flex: 1 1 200px; }
.fp-step-num { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--gold); color: #fff; font: 700 20px var(--sans); display: inline-flex; align-items: center; justify-content: center; }
.fp-include { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--goldline); background: var(--ivory); font: 700 17px var(--sans); cursor: pointer; }
.fp-include.is-on { border-color: var(--gold2); background: #FBF4E6; }
.fp-include input { width: 24px; height: 24px; accent-color: var(--gold); flex: 0 0 auto; }
.fp-step-intro { font-size: 17px; color: var(--ink2); background: var(--sand); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.fp-step-off { font-size: 17px; color: var(--muted); font-style: italic; margin: 4px 0 12px; }
.fp-step-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 20px -20px -20px; padding: 14px 20px; border-top: 1px solid var(--line);
  position: sticky; bottom: 0; z-index: 3; background: #fff; border-radius: 0 0 16px 16px; box-shadow: 0 -8px 16px rgba(255, 255, 255, .92); }
/* Download shows on the last step only; there the panel can be taller. */
body.fp-steps-on:not(.fp-on-last) .fp-sticky { display: none; }
/* On the last step the Download bar is pinned, so Back sits in the page instead of under it. */
body.fp-on-last .fp-step-nav { position: static; box-shadow: none; }
body.fp-steps-on:not(.fp-on-last) .fp-editor-wrap { padding-bottom: 40px; }
.fp-step-nav .fp-btn.primary { margin-left: auto; }
@media (max-width: 520px) {
  .fp-stepper { gap: 4px; }
  .fp-dot { width: 31px; height: 31px; font-size: 15px; border-width: 1.5px; }
  .fp-step { padding: 14px 14px 16px; }
  .fp-step-nav { margin: 16px -14px -16px; padding: 12px 14px; }
  /* Back and Next side by side, so they don't take half the screen. */
  .fp-step-nav { flex-wrap: nowrap; gap: 8px; }
  .fp-step-nav .fp-btn { flex: 1 1 0; min-width: 0; white-space: normal; font-size: 16px; padding: 10px 10px; line-height: 1.25; }
  .fp-step-head h2 { font-size: 24px; }
}
.fp-sec { margin: 0 0 6px; }
.fp-sec + .fp-sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.fp-sec-title { font: 700 19px var(--sans); margin: 0 0 12px; }
.fp-sec-body { padding: 0; }
.fp-tip { font-size: 16px; color: var(--ink2); background: #FBF4E6; border-left: 4px solid var(--gold2); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; }
/* Rows moved by dragging the dots */
.fp-sortrow { display: flex; gap: 10px; align-items: stretch; transition: transform .12s; }
.fp-sortrow.is-dragging { transition: none; position: relative; z-index: 3; box-shadow: 0 10px 24px rgba(40, 30, 20, .22); background: #fff; }
.fp-sortbody { flex: 1 1 auto; min-width: 0; }
.fp-handle { flex: 0 0 34px; border: 0; border-radius: 8px; background: var(--sand); color: var(--muted); cursor: grab; touch-action: none; font: 700 20px/1 var(--sans); letter-spacing: -4px; padding: 0 6px 0 0; display: flex; align-items: center; justify-content: center; }
.fp-handle:hover { background: #EADFCB; color: var(--ink); }
.fp-handle:active { cursor: grabbing; }
/* The life story helper: first, and easy to see */
details.fp-helper { margin: 0 0 16px; border: 2px solid var(--gold2); background: #FBF4E6; }
details.fp-helper > summary { list-style: none; cursor: pointer; display: grid; gap: 2px; }
details.fp-helper > summary::-webkit-details-marker { display: none; }
.fp-helper-title { font: 600 24px var(--serif); color: var(--ink); }
.fp-helper-title::before { content: '\270E  '; color: var(--gold); }
.fp-helper-sub { font-size: 16px; color: var(--ink2); }
.fp-helper-btn { justify-self: start; margin-top: 8px; background: var(--gold); color: #fff; font: 700 17px var(--sans); border-radius: 10px; padding: 9px 16px; }
.fp-helper-btn .when-open { display: none; }
details.fp-helper[open] .fp-helper-btn { background: #fff; color: var(--gold); border: 1.5px solid var(--goldline); }
details.fp-helper[open] .fp-helper-btn .when-open { display: inline; }
details.fp-helper[open] .fp-helper-btn .when-closed { display: none; }
.fp-insert-fit:empty { display: none; }
/* Fields brought into view by Tab stay clear of the pinned Back/Next bar. */
html { scroll-padding-bottom: 110px; }
.fp-ed-panel { scroll-padding-top: 96px; scroll-padding-bottom: 96px; }
.pe-notitle { height: 2cqw; }
.fp-conflict-fixed { position: fixed; left: 50%; transform: translateX(-50%); top: 12px; z-index: 70; width: min(760px, calc(100% - 24px)); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.fp-unsaved { width: 100%; margin-top: 10px; font: 16px/1.4 var(--sans); padding: 10px; border-radius: 10px; border: 1.5px solid var(--goldline); background: #fff; color: var(--ink); }
a.is-disabled { opacity: .45; }
.fp-done { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--oksoft); color: var(--ok); font-weight: 600; }
.fp-choice-btn span { border: 0; background: none; padding: 0; }
.fp-flip-row { max-width: min(900px, calc((100vh - 240px) * 1.294)); margin: 0 auto; }
@media (max-width: 700px) {
  .fp-flip-row.is-single .fp-flip-page { flex-basis: 92%; }
  .fp-x { width: 34px !important; height: 34px !important; font-size: 20px !important; }
}
.fp-room { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--warnsoft); color: var(--warn); font-size: 16px; font-weight: 600; }
.fp-insert-fit { margin: 8px 0 4px; padding: 12px 14px; border-radius: 12px; font-size: 17px; }
.fp-insert-fit.is-ok { background: var(--oksoft); color: var(--ok); }
.fp-insert-fit.is-bad { background: var(--warnsoft); color: var(--warn); border: 1.5px solid #E2B98F; }
details.fp-helper[open] > summary { margin-bottom: 12px; }
.fp-pageedit.is-inline { margin-top: 0; padding-top: 0; border-top: 0; }
.fp-check.soft { background: var(--sand); color: var(--ink2); font-weight: 500; }
.fp-rows { display: grid; gap: 12px; }
.fp-orow { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--ivory); }
.fp-orow .fp-row > * { flex: 1 1 160px; }
.fp-orow input[type=text], .fp-orow select, .fp-pageedit input[type=text], .fp-pageedit textarea { width: 100%; font-size: 18px; padding: 10px 12px; border: 1.5px solid var(--goldline); border-radius: 10px; background: #fff; }
.fp-rowtools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fp-rowtools .fp-btn.small { min-height: 38px; font-size: 15px; padding: 6px 10px; }
.fp-pagehead { font: 700 14px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.fp-pageedit { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--goldline); }
.fp-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.fp-pick { position: relative; display: grid; gap: 6px; border: 1.5px solid var(--line); border-radius: 10px; padding: 6px; background: #fff; }
.fp-pick.is-on { border-color: var(--gold2); box-shadow: 0 0 0 2px var(--gold2); }
.fp-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.fp-pick input[type=checkbox] { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; accent-color: var(--gold); }
.fp-pick input[type=text] { font-size: 15px; padding: 6px 8px; }
.fp-helper { margin-top: 8px; padding: 16px; border-radius: 14px; background: var(--sand); }
.fp-helper h3 { font: 600 24px var(--serif); margin: 0 0 6px; }
.fp-helper textarea { min-height: 60px !important; font-size: 17px !important; }
.fp-draft { white-space: pre-wrap; background: #fff; border-radius: 10px; padding: 12px; margin-top: 10px; font-size: 17px; color: var(--ink); }
.fp-sliders input[type=range] { width: 100%; accent-color: var(--gold); }
.fp-flipdesk { display: flex; justify-content: center; min-height: 300px; }
.fp-flip-row { display: flex; justify-content: center; gap: 0; width: 100%; max-width: 900px; }
.fp-flip-row .fp-flip-page { flex: 0 1 50%; min-width: 0; }
.fp-flip-row.is-single .fp-flip-page { flex: 0 1 48%; }
.fp-flip-row.is-trifold .fp-flip-page { flex: 0 1 33.33%; }
.fp-flip-row .pe-page { width: 100%; box-shadow: 0 10px 24px rgba(40, 30, 20, .2); }
.fp-flipnav { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 8px; }
.fp-flipnav span { font-weight: 700; min-width: 180px; text-align: center; }
.fp-modal { position: fixed; inset: 0; z-index: 50; background: rgba(43, 38, 34, .45); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.fp-modal-box { background: var(--ivory); border-radius: 18px; padding: 22px; width: min(760px, 100%); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.fp-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.fp-modal-head h2 { font: 600 30px var(--serif); margin: 0; }
.fp-lib-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 0 0 10px; }
.fp-lib-words { white-space: pre-wrap; font: italic 500 18px/1.45 var(--serif); color: var(--ink2); margin-top: 6px; }
body.fp-modal-open { overflow: hidden; }
@media (max-width: 1000px) {
  .fp-editor { grid-template-columns: minmax(0, 1fr); }
  .fp-ed-panel { position: static; max-height: none; overflow: visible; }
  .fp-stepbar { position: static; }
  /* On a phone the pages are a strip to swipe through, above the changes. */
  .fp-ed-pages .fp-desk { padding: 14px 0 14px 14px; }
  .fp-ed-pages .fp-spread { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory; padding-right: 14px; -webkit-overflow-scrolling: touch; }
  .fp-ed-pages .fp-pagebox, .fp-ed-pages .fp-pagebox.is-third { flex: 0 0 min(64%, 300px); scroll-snap-align: start; }
  .fp-ed-pages .fp-pagebox.is-third { flex-basis: min(46%, 220px); }
}
@media (max-width: 520px) { .fp-flip-row.is-single .fp-flip-page { flex-basis: 80%; } }
.fp-found { display: grid; gap: 10px; max-width: 720px; }
.fp-mem { display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.fp-mem:hover { border-color: var(--gold2); }
.fp-mem-ph { width: 56px; height: 56px; border-radius: 50%; background: #E6DED1 center/cover no-repeat; flex: none; }
.fp-mem span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: grid; }
.fp-mem b { font-size: 19px; }
.fp-mem small { color: var(--muted); font-size: 16px; }
.fp-mem-go { font-weight: 700; color: var(--gold); white-space: nowrap; }
.fp-linkbox { display: grid; gap: 4px; }
.fp-subhead { font: 700 18px var(--sans); margin: 18px 0 8px; }
.fp-gift { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0 0 10px; background: #fff; }
.fp-gift.is-new { border-color: var(--gold2); }
.fp-gift-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 6px; }
.fp-new { font: 700 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--gold); border-radius: 999px; padding: 3px 10px; }

/* Cover line over watercolor flowers: a soft paper glow keeps it readable */
.pe-sl-halo { --h: var(--pp, #FBF8F2); text-shadow: 0 0 0.8cqw var(--h), 0 0 1.6cqw var(--h), 0 0 2.6cqw var(--h), 0 0 3.6cqw var(--h); }

/* Under the life story: how it fits its page */
.fp-meter:empty { display: none; }
.fp-meter { border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; font-size: 17px; line-height: 1.45; }
.fp-meter.is-ok { background: var(--oksoft); color: var(--ok); font-weight: 600; }
.fp-meter.is-bad { background: var(--warnsoft); color: var(--warn); border: 1.5px solid #E7C9A6; }
.fp-meter.is-bad p { color: var(--ink); font-weight: 600; }

/* The X that takes a part off the program (editor only, never printed) */
.fp-xable:not(.pe-ph-fill):not(.pe-svc-bl) { position: relative; }
.fp-x { position: absolute; top: -10px; right: -10px; z-index: 5; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #fff; background: var(--ink); color: #fff; font: 700 18px/1 var(--sans); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s; box-shadow: 0 2px 6px rgba(0,0,0,.25); padding: 0; }
.fp-x::before { content: ''; position: absolute; inset: -8px; }
.fp-pagebox:hover .fp-x, .fp-x:focus-visible { opacity: .85; }
.fp-xable:hover > .fp-x { opacity: 1; }
@media (hover: none) { .fp-x { opacity: .8; } }
.pe-row.fp-xable > .fp-x { top: 50%; right: -14px; transform: translateY(-50%); width: 24px; height: 24px; font-size: 15px; }
/* Parts that sit one above the other get their X on opposite sides, centred
   top to bottom, so one X never covers the next part's X. */
.fp-xable.fp-x-left > .fp-x, .fp-xable.fp-x-right > .fp-x { top: 50%; transform: translateY(-50%); width: 24px; height: 24px; font-size: 15px; }
.fp-xable.fp-x-left > .fp-x { right: auto; left: -12px; }
.fp-xable.fp-x-right > .fp-x { right: -12px; }
/* Trifold rows are short: smaller X, every other row's X on the left. */
.pe-third .pe-row.fp-xable > .fp-x { width: 20px; height: 20px; font-size: 13px; }
/* Every other row's X on the left, so the X buttons of close rows (a long
   order fitted to its page) never sit on top of each other. */
.pe-row.fp-xable.fp-x-alt > .fp-x { right: auto; left: -14px; }
/* A photo that fills the page: keep its X inside the page edge. */
.pe-ph-fill.fp-xable > .fp-x { top: 8px; right: 8px; }
/* Touch screens: each X is placed in a clear spot next to its part
   (placeXs in program-editor.js), smaller, with a tap area a little bigger. */
.fp-xable > .fp-x.fp-x-placed { width: 22px !important; height: 22px !important; font-size: 15px !important; bottom: auto; }
.fp-x.fp-x-placed::before { inset: -4px; }
.fp-xable > .fp-x.fp-x-placed.fp-x-tight { width: 18px !important; height: 18px !important; font-size: 13px !important; }
.fp-undo { pointer-events: none; }
.fp-undo button, .fp-undo a { pointer-events: auto; }
.fp-undo { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60; background: var(--ink); color: #fff; border-radius: 999px; padding: 12px 22px; font: 600 17px var(--sans); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.fp-undo .fp-link { color: #F2D9A0; font-weight: 700; margin-left: 6px; }
.fp-pagex { display: block; margin: 4px auto 0; font-size: 15px; }
.fp-dragphoto { cursor: grab; touch-action: none; }
.fp-dragphoto:active { cursor: grabbing; }
/* Drop photos from the computer */
.fp-drop { border: 2px dashed transparent; border-radius: 14px; transition: border-color .15s, background .15s; }
.fp-drop.is-over { border-color: var(--gold2); background: #FFF8EA; }
.fp-dropbox { padding: 10px; border: 2px dashed var(--goldline); border-radius: 14px; margin-bottom: 8px; }
/* Inserts after the back cover */
.fp-inserts { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 18px; padding-top: 18px; border-top: 1.5px dashed var(--goldline); }
.fp-inserts .fp-pagebox { flex: 0 1 calc(50% - 9px); }
/* A choice to make (a hymn's words) */
.fp-choice-box { max-width: 560px; }
.fp-choice-text { font-size: 18px; line-height: 1.5; color: var(--ink2); margin: 0 0 14px; }
.fp-choice-btn { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 14px 18px; margin-bottom: 10px; border-radius: 14px; border: 1.5px solid var(--goldline); background: #fff; cursor: pointer; font: inherit; color: var(--ink); min-height: 56px; }
.fp-choice-btn b { font-size: 18px; }
.fp-choice-btn span { color: var(--muted); font-size: 16px; }
.fp-choice-btn.is-primary { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.fp-choice-btn:hover { background: #FFFCF6; }

/* Download page: the finished program, and what happens next */
.fp-final-desk { display: flex; justify-content: center; gap: 0; background: var(--desk); border-radius: 16px; padding: 22px; }
.fp-final-page { flex: 0 1 300px; min-width: 0; }
.fp-final-page .pe-page { width: 100%; max-width: 100%; box-shadow: 0 10px 24px rgba(40, 30, 20, .2); }
.fp-final-desk.is-trifold .fp-final-page { flex-basis: 200px; }
.fp-final-nav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 12px; }
.fp-next h2 { font: 600 30px/1.15 var(--serif); margin: 0 0 10px; }
.fp-what { display: flex; gap: 18px; align-items: flex-start; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.fp-what h3 { font: 600 24px var(--serif); margin: 0 0 6px; }
.fp-what p { margin: 0 0 10px; }
.fp-what-art { flex: 0 0 72px; }
.fp-what-art svg { width: 72px; height: auto; display: block; }
.fp-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 8px; }
.fp-offer { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1.5px solid var(--goldline); border-radius: 14px; background: #FFFCF6; color: var(--ink); text-decoration: none; }
.fp-offer b { font-size: 19px; color: var(--gold); }
.fp-offer span { color: var(--ink2); font-size: 17px; }
.fp-offer:hover { border-color: var(--gold); }
@media (max-width: 560px) { .fp-final-desk { padding: 12px; } .fp-what { flex-direction: column; } }
/* A moment while what was typed before a reload is saved (program-editor.js). */
.fp-hold { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(251, 248, 242, .9); }
.fp-hold > div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 26px; font-size: 20px; font-weight: 600; color: var(--ink); box-shadow: 0 8px 30px rgba(0, 0, 0, .08); }

/* p181: a Calendar button beside each date box (date-pick.js). */
.fp-pickrow { display: flex; gap: 10px; align-items: stretch; }
.fp-pickrow > input { flex: 1 1 auto; min-width: 0; }
.fp-row > .fp-field:has(> .fp-pickwide) { flex-basis: 100%; }  /* the service date and time gets the whole line */
.fp-pickhold { position: relative; flex: 0 0 auto; display: flex; }
.fp-pickbtn { min-height: 0; padding: 10px 16px; gap: 8px; color: var(--gold); border-color: var(--goldline); white-space: nowrap; }
.fp-pickbtn:hover, .fp-pickbtn:focus-visible { border-color: var(--gold2); color: var(--gold); }
.fp-picknative { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
@media (max-width: 420px) { .fp-pickbtn span { display: none; } .fp-pickbtn { padding: 10px 14px; } }