:root {
--sl-sky: #eef0ec;
--sl-sky-2: #e3e7e3;
--sl-sand: #efe8da;
--sl-deep: #2f3c3c;
--sl-ink: #2c3535;
--sl-soft: #566461;
--sl-line: #d3d8d3;
--sl-tide: #4f6f69;
--sl-functional: #45665f;
--ink: var(--sl-ink);
--forest: var(--sl-deep);
--forest-dark: #263232;
--sage: var(--sl-line);
--sage-light: var(--sl-sky-2);
--cream: var(--sl-sand);
--paper: #fffdf8;
--apricot: var(--sl-tide);
--apricot-light: var(--sl-sand);
--gold: #c7a65a;
--line: var(--sl-line);
--serif: "Cormorant Garamond", Georgia, serif;
--sans: "Inter", "Segoe UI", Arial, sans-serif;
--shadow: none;
--shadow-soft: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--apricot); outline-offset: 3px; }
p { line-height: 1.7; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
.container { width: min(1240px, calc(100% - 88px)); margin-inline: auto; }
.section { padding: 120px 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 999; padding: 12px 18px; background: var(--ink); color: white; border-radius: 8px; }
.skip-link:focus { top: 16px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--forest); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 28px; height: 1px; background: currentColor; }
.eyebrow.light { color: #dbe7df; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; line-height: .98; }
h1 { font-size: clamp(3.8rem, 7.2vw, 7rem); }
h2 { font-size: clamp(2.8rem, 5.3vw, 5rem); }
h1 em, h2 em { color: var(--apricot); font-weight: 400; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 56px; padding: 0 24px; border: 0; border-radius: 4px; background: var(--forest); color: white; font-size: .9rem; font-weight: 700; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; cursor: pointer; }
.button:hover { transform: translateY(-2px); background: var(--forest-dark); box-shadow: 0 10px 30px rgba(30, 61, 52, .2); }
.button-small { min-height: 42px; padding: 0 18px; gap: 10px; font-size: .8rem; }
.button-cream { background: var(--cream); color: var(--forest-dark); }
.button-cream:hover { background: white; color: var(--forest-dark); }
.text-link { display: inline-flex; gap: 10px; align-items: center; padding-bottom: 4px; border-bottom: 1px solid currentColor; color: var(--forest); font-weight: 700; font-size: .87rem; }
/* Simple content pages */
.content-page { background: var(--paper); }
.content-main { padding-top: 70px; }
.content-hero { padding: 110px 0 70px; background: radial-gradient(circle at 82% 8%, rgba(229,157,116,.18), transparent 34%), linear-gradient(135deg, var(--cream), var(--sage-light)); }
.content-hero-inner { display: grid; gap: 34px; }
.content-hero-with-visual { grid-template-columns: minmax(0, .98fr) minmax(320px, .78fr); align-items: center; }
.content-hero h1 { max-width: 850px; margin-bottom: 24px; font-size: clamp(3.2rem, 6vw, 5.8rem); }
.content-hero p:not(.eyebrow) { max-width: 720px; margin-bottom: 0; color: #52615b; font-size: 1.08rem; }
.content-hero p.content-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; color: #68746f; font-size: .74rem; font-weight: 600; letter-spacing: .02em; }
.content-meta span + span::before { margin-right: 18px; content: "·"; color: var(--apricot); }
.content-hero-visual { position: relative; margin: 0; border: 1px solid rgba(47,85,72,.14); border-radius: 32px; overflow: hidden; background: var(--cream); box-shadow: 0 26px 70px rgba(47,85,72,.16); transform: rotate(1deg); }
.content-hero-visual::after { position: absolute; inset: 0; content: ""; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.content-hero-visual img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; }
.content-section { padding: 74px 0 110px; }
.content-narrow { max-width: 820px; }
.content-narrow h2 { margin: 48px 0 16px; font-size: clamp(2rem, 3vw, 3rem); }
.content-narrow h2:first-child { margin-top: 0; }
.content-narrow h3 { margin: 26px 0 8px; color: var(--forest-dark); font-family: var(--sans); font-size: 1.03rem; }
.content-narrow p { color: #52615b; }
.content-list { display: grid; gap: 15px; margin: 20px 0 32px; padding-left: 22px; color: #52615b; line-height: 1.7; }
.content-list .text-link { display: inline; }
.content-cta-card { margin: 58px 0 22px; padding: clamp(28px, 5vw, 48px); border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(135deg, var(--cream), #fffdf8); box-shadow: var(--shadow-soft); }
.content-cta-card h2 { margin-top: 8px; }
.content-cta-card .button { margin-top: 12px; }
.related-links { margin-bottom: 0; }
/* Header */
.site-header { position: fixed; top: 0; z-index: 50; width: 100%; height: 82px; border-bottom: 1px solid transparent; transition: background .25s ease, height .25s ease, border-color .25s ease; }
.site-header.scrolled, .site-header.solid { height: 70px; border-color: var(--line); background: rgba(255, 253, 248, .94); backdrop-filter: blur(16px); }
.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--forest-dark); font-family: var(--serif); font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; }
.brand svg { width: 31px; fill: none; stroke: var(--apricot); stroke-width: 1.5; }
.brand-logo { display: block; height: 46px; width: auto; }
.site-header .brand, .auth-header .brand, .account-header .brand, .create-header .brand { position: relative; width: 80px; height: 46px; flex: 0 0 80px; }
.site-header .brand-logo { position: absolute; left: 0; top: 50%; height: 92px; max-width: none; transform: translateY(-35%); }
.auth-header .brand, .account-header .brand, .create-header .brand { width: 128px; height: 66px; flex-basis: 128px; }
.auth-header .brand-logo, .account-header .brand-logo, .create-header .brand-logo { position: absolute; left: 0; top: 50%; height: 66px; max-width: none; transform: translateY(-50%); }
.site-footer .brand-logo { height: 54px; }
.main-nav { display: flex; align-items: center; gap: 29px; font-size: .79rem; font-weight: 600; }
.main-nav > a:not(.button) { transition: color .2s ease; }
.main-nav > a:not(.button):hover { color: var(--apricot); }
.content-nav { margin-left: auto; }
.content-nav > .content-nav-toggle { display: none; }
.content-nav > .main-nav { display: flex; }
.content-page .main-nav { gap: 20px; }
.nav-login { margin-left: 6px; }
.nav-logout { margin: 0; }
.nav-logout button { padding: 0; border: 0; background: transparent; color: inherit; font-size: .79rem; font-weight: 600; cursor: pointer; }
.nav-logout button:hover { color: var(--apricot); }
.menu-toggle { display: none; border: 0; background: none; width: 42px; height: 42px; cursor: pointer; }
.menu-toggle span { display: block; width: 22px; height: 1px; margin: 6px auto; background: currentColor; }
.mobile-header-cta { display: none; }
/* Home hero */
.hero { overflow: hidden; padding-top: 82px; background: var(--cream); }
.hero-grid { min-height: 705px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 52px; padding-top: 70px; padding-bottom: 66px; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { max-width: 650px; margin-bottom: 28px; }
.hero-intro { max-width: 560px; margin-bottom: 34px; color: #52615b; font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.gentle-note { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; color: #68736f; font-size: .76rem; }
.gentle-note svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hero-visual { position: relative; width: calc(100% + 5vw); }
.hero-image-wrap { overflow: hidden; position: relative; height: 585px; border-radius: 48% 48% 7px 7px / 37% 37% 7px 7px; box-shadow: var(--shadow); }
.hero-image-wrap::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(31, 45, 39, .08), transparent 30%); }
.hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; }
.memory-note { position: absolute; left: -50px; bottom: 24px; width: 255px; padding: 20px 24px 19px 48px; background: var(--paper); box-shadow: 0 18px 45px rgba(31, 45, 39, .18); transform: rotate(-2deg); }
.memory-note-mark { position: absolute; left: 18px; top: 10px; color: var(--apricot); font-family: var(--serif); font-size: 3.2rem; }
.memory-note p { margin-bottom: 6px; font-family: var(--serif); font-size: 1.08rem; line-height: 1.2; }
.memory-note > span:last-child { color: #69716e; font-size: .67rem; }
.hero-doodle { position: absolute; right: 5%; bottom: -30px; width: 130px; fill: none; stroke: var(--apricot); stroke-width: 1.7; stroke-linecap: round; }
.reassurance { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.reassurance > div { position: relative; padding: 27px 32px 28px 55px; border-right: 1px solid var(--line); }
.reassurance > div:first-child { padding-left: 30px; }
.reassurance > div:last-child { border-right: 0; }
.reassurance span { position: absolute; left: 20px; top: 29px; color: var(--apricot); font-size: .65rem; }
.reassurance > div:first-child span { left: 0; }
.reassurance strong { display: block; margin-bottom: 4px; font-family: var(--serif); font-size: 1.04rem; }
.reassurance p { margin: 0; color: #78807d; font-size: .72rem; line-height: 1.45; }
/* Intro */
.intro-section { background: var(--paper); }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: end; margin-bottom: 72px; }
.intro-heading h2 { margin-bottom: 0; }
.intro-copy { max-width: 520px; padding-bottom: 4px; }
.intro-copy p { color: #59645f; font-size: 1.03rem; }
.intro-copy p:last-child { margin-bottom: 0; }
.album-feature { display: grid; grid-template-columns: 1.3fr .7fr; align-items: stretch; min-height: 515px; }
.album-image { overflow: hidden; }
.album-image img { width: 100%; height: 100%; object-fit: cover; }
.album-card { display: flex; flex-direction: column; justify-content: center; padding: 55px; background: var(--sage-light); }
.number-kicker { display: block; margin-bottom: 26px; color: var(--forest); font-size: .67rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.album-card h3 { margin-bottom: 26px; font-family: var(--serif); font-size: 2.25rem; font-weight: 400; line-height: 1.08; }
.tick-list { display: grid; gap: 14px; margin: 0 0 35px; padding: 0; list-style: none; }
.tick-list li { position: relative; padding-left: 27px; color: #4d5a55; font-size: .84rem; }
.tick-list li::before { position: absolute; left: 0; top: 1px; content: "✓"; color: var(--apricot); font-weight: 700; }
.album-card .text-link { align-self: flex-start; }
/* Steps */
.steps-section { background: var(--cream); }
.section-heading.centered { max-width: 760px; margin: 0 auto 70px; text-align: center; }
.section-heading.centered .eyebrow { justify-content: center; }
.section-heading h2 { margin-bottom: 22px; }
.section-heading > p:last-child { max-width: 600px; margin: 0 auto; color: #65706b; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-card { padding: 20px 20px 38px; border: 1px solid var(--line); background: rgba(255,255,255,.38); text-align: center; }
.step-illustration { height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; background: #ebe4da; }
.portrait-mini { overflow: hidden; }
.portrait-mini img { width: 145px; height: 183px; border-radius: 50% 50% 5px 5px; object-fit: cover; box-shadow: 0 12px 25px rgba(0,0,0,.1); }
.step-card > span { color: var(--apricot); font-size: .68rem; font-weight: 700; }
.step-card h3 { margin: 12px 0 10px; font-family: var(--serif); font-size: 1.6rem; font-weight: 400; }
.step-card p { max-width: 290px; margin: 0 auto; color: #66706c; font-size: .82rem; }
.story-lines { position: relative; flex-direction: column; gap: 11px; background: var(--apricot-light); }
.story-lines i { width: 50%; height: 2px; background: rgba(47,85,72,.32); }
.story-lines i:nth-child(2) { width: 62%; }
.story-lines b { position: absolute; left: 25%; top: 33px; color: var(--apricot); font-family: var(--serif); font-size: 3rem; font-weight: 400; }
.people-dots { position: relative; gap: 14px; background: var(--sage); }
.people-dots i { z-index: 1; width: 42px; height: 42px; border: 8px solid white; border-radius: 50%; background: var(--apricot); box-shadow: 0 8px 18px rgba(31,45,39,.1); }
.people-dots i:nth-child(2) { transform: translateY(-30px); background: var(--forest); }
.people-dots i:nth-child(3) { transform: translateY(14px); background: #e8b08f; }
.people-dots i:nth-child(4) { transform: translateY(-15px); background: var(--gold); }
.people-dots svg { position: absolute; inset: auto 20% 24px; width: 60%; fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; }
.centered-cta { margin-top: 44px; text-align: center; }
/* Example */
.example-section { overflow: hidden; background: var(--forest-dark); color: white; }
.example-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 85px; align-items: center; }
.example-copy h2 { max-width: 430px; }
.example-copy p:not(.eyebrow) { max-width: 430px; margin-bottom: 32px; color: rgba(255,255,255,.7); }
.memorial-preview { overflow: hidden; display: block; transform: rotate(1.5deg); border: 8px solid #eae5da; border-radius: 9px; background: white; box-shadow: 0 34px 80px rgba(0,0,0,.26); color: var(--ink); transition: transform .35s ease; }
.memorial-preview:hover { transform: rotate(0deg) translateY(-5px); }
.preview-bar { height: 31px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #eae5da; }
.preview-bar i { width: 7px; height: 7px; border-radius: 50%; background: #b7b0a6; }
.preview-bar span { flex: 1; margin-left: 8px; color: #888; font-size: .46rem; text-align: center; }
.preview-body { min-height: 465px; padding: 17px 45px 38px; background: linear-gradient(#e6eee9 0 58%, #fff 58%); text-align: center; }
.preview-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; color: var(--forest-dark); text-align: left; }
.preview-nav span { font-family: var(--serif); font-size: .9rem; }
.preview-nav small { font-size: .47rem; }
.preview-body img { width: 125px; height: 145px; margin: 0 auto 15px; border: 5px solid white; border-radius: 50% 50% 4px 4px; object-fit: cover; box-shadow: 0 10px 20px rgba(31,45,39,.14); }
.preview-body > p { margin-bottom: 5px; color: #718078; font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; }
.preview-body h3 { margin-bottom: 3px; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.preview-body > span { color: #7a837f; font-size: .64rem; }
.preview-body blockquote { max-width: 340px; margin: 40px auto 0; font-family: var(--serif); font-size: 1rem; font-style: italic; }
/* Features */
.section-heading.split { display: grid; grid-template-columns: 1fr .6fr; gap: 100px; align-items: end; margin-bottom: 62px; }
.section-heading.split h2 { margin-bottom: 0; }
.section-heading.split > p { padding-bottom: 10px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature { min-height: 335px; padding: 38px; border: 1px solid var(--line); background: #f8f5ee; }
.feature-wide { grid-column: span 2; display: grid; grid-template-columns: auto 1fr .8fr; gap: 25px; align-items: center; }
.feature small { display: block; margin-bottom: 14px; color: var(--forest); font-size: .64rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.feature h3 { margin-bottom: 12px; font-family: var(--serif); font-size: 1.75rem; font-weight: 400; }
.feature p { margin: 0; color: #64706b; font-size: .82rem; }
.feature-icon { display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; margin-bottom: 35px; border: 1px solid var(--line); border-radius: 50%; color: var(--apricot); font-family: var(--serif); font-size: 1.35rem; }
.feature-wide .feature-icon { align-self: start; }
.feature-quote { padding: 30px 0 30px 35px; border-left: 1px solid var(--line); color: var(--forest); font-family: var(--serif); font-size: 1.35rem; font-style: italic; line-height: 1.3; }
.feature-photo { overflow: hidden; position: relative; padding: 0; color: white; }
.feature-photo::after { position: absolute; inset: 0; content: ""; background: linear-gradient(transparent 35%, rgba(24,40,34,.82)); }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; }
.feature-photo div { position: absolute; z-index: 1; left: 34px; bottom: 22px; }
.feature-photo small { color: #e6ede8; }
.feature-photo h3 { margin: 0; }
.feature-sage { background: var(--sage-light); }
.feature-dark { background: var(--forest); color: white; }
.feature-dark small, .feature-dark .feature-icon { color: #efbe9f; border-color: rgba(255,255,255,.25); }
.feature-dark p { color: rgba(255,255,255,.7); }
/* Quote, FAQ, CTA, footer */
.quote-section { background: var(--apricot-light); }
.quote-wrap { max-width: 920px; text-align: center; }
.quote-wrap > svg { width: 55px; margin-bottom: 30px; fill: var(--apricot); }
.quote-wrap blockquote { margin: 0 auto 34px; font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 400; line-height: 1.15; }
.quote-author { display: flex; align-items: center; justify-content: center; gap: 13px; text-align: left; }
.quote-author > span { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: var(--forest); color: white; font-size: .65rem; }
.quote-author p { margin: 0; color: #5f6864; font-size: .72rem; line-height: 1.45; }
.quote-author strong { color: var(--ink); }
.pricing-section { background: var(--paper); }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; }
.pricing-card { position: relative; padding: 45px; border: 1px solid var(--line); background: var(--cream); }
.pricing-card .plan-name { margin-bottom: 20px; color: var(--forest); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.price { display: flex; align-items: end; gap: 12px; margin-bottom: 30px; }
.price strong { font-family: var(--serif); font-size: 4rem; font-weight: 400; line-height: .8; }
.price span { color: #727c77; font-size: .72rem; }
.pricing-card .button { width: 100%; margin-top: 10px; }
.pricing-card-premium { background: var(--forest); color: white; }
.pricing-card-premium .plan-name, .pricing-card-premium .tick-list li::before { color: var(--apricot); }
.pricing-card-premium .price span, .pricing-card-premium .tick-list li { color: rgba(255,255,255,.72); }
.pricing-label { position: absolute; right: 22px; top: 20px; padding: 6px 9px; border-radius: 20px; background: var(--apricot); color: var(--forest-dark); font-size: .58rem; font-weight: 700; text-transform: uppercase; }
.faq-section { background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 110px; }
.faq-intro { position: sticky; top: 110px; align-self: start; }
.faq-intro h2 { font-size: clamp(2.7rem,4.5vw,4.4rem); }
.faq-intro > p:not(.eyebrow) { max-width: 330px; margin-bottom: 28px; color: #67716d; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.faq-item button span { font-family: var(--serif); font-size: 1.38rem; }
.faq-item button i { position: relative; flex: 0 0 23px; height: 23px; border: 1px solid var(--line); border-radius: 50%; }
.faq-item button i::before, .faq-item button i::after { position: absolute; left: 6px; top: 10px; width: 9px; height: 1px; content: ""; background: var(--forest); }
.faq-item button i::after { transform: rotate(90deg); transition: transform .2s; }
.faq-item button[aria-expanded="true"] i::after { transform: rotate(0); }
.faq-answer { max-width: 590px; padding: 0 0 27px; color: #64706b; font-size: .88rem; }
.faq-answer p { margin: 0; }
.final-cta { padding: 92px 0; background: var(--forest); color: white; }
.final-cta-inner { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.final-cta h2 { margin: 0; font-size: clamp(2.8rem, 5vw, 4.8rem); }
.site-footer { padding: 75px 0 25px; background: #172d26; color: rgba(255,255,255,.72); }
.footer-top { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 60px; padding-bottom: 60px; }
.brand-light { color: white; }
.footer-brand p { margin: 18px 0 0; color: rgba(255,255,255,.55); font-family: var(--serif); font-size: 1.15rem; }
.footer-top > div:not(:first-child) { display: flex; flex-direction: column; gap: 13px; font-size: .74rem; }
.footer-top strong { margin-bottom: 8px; color: white; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-top a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: .65rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.footer-links a:hover { color: white; }
/* Memorial page */
.memorial-page { background: #faf8f2; }
.memorial-topbar { position: relative; height: 76px; background: rgba(255,253,248,.96); }
@media (min-width: 721px) {
.site-header.memorial-topbar { height: 96px; }
.site-header.memorial-topbar .brand-logo { height: 86px; transform: translateY(-50%); }
}
.memorial-hero { position: relative; padding: 0; background: transparent; text-align: center; overflow: hidden; }
.memorial-cover { position: absolute; inset: 0; z-index: 0; background-color: var(--sage-light); background-image: linear-gradient(180deg, rgba(250,248,242,.10) 0%, rgba(250,248,242,.30) 52%, rgba(250,248,242,.95) 100%), var(--hero-img, none); background-size: cover; background-position: center; background-repeat: no-repeat; }
.memorial-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(68% 52% at 50% 58%, rgba(250,248,242,.4), rgba(250,248,242,0) 72%); }
.memorial-hero .hero-inner { position: relative; z-index: 1; padding: 58px 0 46px; }
/* Plain (unframed) portrait: the clip is the shaped box; the photo fills + zooms inside it. */
.portrait-clip--plain { display: block; width: 208px; height: 244px; margin: 0 auto 22px; border: 8px solid #fff; border-radius: 50% 50% 6px 6px; overflow: hidden; box-shadow: 0 22px 50px rgba(31,50,44,.22); background: var(--sage-light); }
/* The portrait photo inside ANY clip: fill, focal point, and zoom. */
.memorial-hero .portrait-clip .portrait { display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); transform: scale(var(--portrait-zoom, 1)); transform-origin: var(--focus-x, 50%) var(--focus-y, 50%); background: var(--sage-light); }
.memorial-hero .portrait-clip .portrait-placeholder { display: flex; align-items: center; justify-content: center; transform: none; background: var(--forest); color: #fff; font-size: 2.3rem; }
.hero-bg-flannel { --hero-img: url(heroes/flannel.webp); --hero-thumb: url(heroes/flannel-thumb.webp); }
.hero-bg-wattle { --hero-img: url(heroes/wattle.webp); --hero-thumb: url(heroes/wattle-thumb.webp); }
.hero-bg-flowering-gum { --hero-img: url(heroes/flowering-gum.webp); --hero-thumb: url(heroes/flowering-gum-thumb.webp); }
.hero-bg-bottlebrush { --hero-img: url(heroes/bottlebrush.webp); --hero-thumb: url(heroes/bottlebrush-thumb.webp); }
.hero-bg-waratah { --hero-img: url(heroes/waratah.webp); --hero-thumb: url(heroes/waratah-thumb.webp); }
.hero-bg-kangaroo-paw { --hero-img: url(heroes/kangaroo-paw.webp); --hero-thumb: url(heroes/kangaroo-paw-thumb.webp); }
.hero-bg-banksia { --hero-img: url(heroes/banksia.webp); --hero-thumb: url(heroes/banksia-thumb.webp); }
.hero-bg-eucalyptus-blossom { --hero-img: url(heroes/eucalyptus-blossom.webp); --hero-thumb: url(heroes/eucalyptus-blossom-thumb.webp); }
.hero-bg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; width: 100%; }
.hero-swatch { position: relative; width: 100%; min-width: 0; cursor: pointer; }
.hero-swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hero-swatch-art { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(35,49,44,.08); background-color: var(--sage-light); background-image: linear-gradient(rgba(250,248,242,.12), rgba(250,248,242,.12)), var(--hero-thumb, none); background-size: cover; background-position: center; }
.hero-swatch small { display: block; margin-top: 7px; font-size: .76rem; color: #5b665f; text-align: center; }
.hero-swatch input:checked + .hero-swatch-art { border-color: var(--forest); box-shadow: inset 0 0 0 2px #fff, 0 8px 18px rgba(31,50,44,.16); }
.hero-swatch input:focus-visible + .hero-swatch-art { outline: 2px solid var(--apricot); outline-offset: 2px; }
@media (min-width: 720px) {
.hero-bg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 981px) {
.hero-bg-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
.hero-swatch small { font-size: .68rem; line-height: 1.2; }
}
/* Decorative portrait frame styles. The WebP frame sits ON TOP of the photo;
the photo is inset so it stays within the frame opening. Frames are 4:5
(1122x1402) with a transparent centre and transparent outside (no boxes).
Tune per-frame with --frame-pad-x / --frame-pad-y if a frame needs it. */
.portrait-framed { --frame-pad-x: 11%; --frame-pad-y: 8.5%; position: relative; width: 252px; aspect-ratio: 1122 / 1402; margin: 0 auto 22px; }
/* Photo fills the frame opening. Explicit calc width/height (NOT auto) so that
object-fit:cover can crop it; an ![]()
is a replaced element and would keep
its natural size with width:auto, spilling out of the frame. Scoped with
.memorial-hero so it wins over the unframed .memorial-hero .portrait rules. */
/* Framed: the clip sits in the opening (padded frames inset it; masked frames clip
to the mask shape). The photo fills the clip and zooms inside it. */
.memorial-hero .portrait-framed .portrait-clip { position: absolute; inset: var(--frame-pad-y) var(--frame-pad-x); overflow: hidden; border-radius: 4px; box-shadow: 0 6px 16px rgba(31,50,44,.18); }
.portrait-framed::after { content: ""; position: absolute; inset: 0; background: var(--frame-url, none) center / contain no-repeat; pointer-events: none; }
/* Per-frame opening inset, only used when a frame has NO mask (a mask defines
the opening exactly). Keyed by the frame's filename. Add a line for a new
un-masked frame if its opening needs a different inset than the default. */
.portrait-frame-eucalyptus { --frame-pad-y: 7%; --frame-pad-x: 9%; }
.portrait-frame-waratah-wattle { --frame-pad-y: 12%; --frame-pad-x: 13.5%; }
.portrait-frame-green-arch { --frame-pad-y: 11%; --frame-pad-x: 10.5%; }
.portrait-frame-pink-ribbon-oval { --frame-pad-y: 12%; --frame-pad-x: 13%; }
.portrait-frame-vintage-gold { --frame-pad-y: 9%; --frame-pad-x: 11%; }
.portrait-frame-eucalyptus-wide { --frame-pad-y: 8%; --frame-pad-x: 7%; }
.portrait-frame-emerald-roses-wide { --frame-pad-y: 13%; --frame-pad-x: 11%; }
.portrait-frame-pink-ribbon-wide { --frame-pad-y: 12%; --frame-pad-x: 9%; }
.portrait-frame-gilded-eucalyptus-wide { --frame-pad-y: 13%; --frame-pad-x: 10%; }
/* Frame box width by orientation (the inline aspect-ratio sets its height). */
.portrait-frame--portrait { width: 252px; }
.portrait-frame--landscape { width: 372px; }
/* Masked frames: the photo fills the whole box and is clipped to the opening
shape (masks/.webp), so it conforms to ovals/arches with no rectangle
corners or padding guesswork. object-position (focus) still applies. */
.memorial-hero .portrait-frame--masked .portrait-clip { inset: 0; overflow: hidden; border-radius: 0; box-shadow: none; -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat; mask: var(--frame-mask) center / 100% 100% no-repeat; }
/* Frame picker swatches (memorial manager) */
.frame-category-toggle { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 10px; }
.frame-category-option { position: relative; cursor: pointer; }
.frame-category-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.frame-category-option span { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 11px; border: 1px solid rgba(35,49,44,.14); border-radius: 999px; background: rgba(255,255,255,.58); color: #506059; font-size: .68rem; font-weight: 750; line-height: 1.15; text-align: center; transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.frame-category-option:hover span { border-color: rgba(35,49,44,.3); background: rgba(255,255,255,.9); }
.frame-category-option input:checked + span { border-color: var(--forest); background: var(--forest); color: #fff; box-shadow: 0 6px 16px rgba(31,50,44,.16); }
.frame-category-option input:focus-visible + span { outline: 2px solid var(--apricot); outline-offset: 3px; }
.frame-shape-toggle { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; padding: 5px; border: 1px solid rgba(35,49,44,.12); border-radius: 999px; background: rgba(255,255,255,.55); }
.frame-shape-option { position: relative; cursor: pointer; }
.frame-shape-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.frame-shape-option span { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 18px; border-radius: 999px; color: #4d5b55; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.frame-shape-option input:checked + span { background: var(--forest); color: #fff; box-shadow: 0 8px 20px rgba(31,50,44,.18); }
.frame-shape-option input:focus-visible + span { outline: 2px solid var(--apricot); outline-offset: 3px; }
.frame-filter-summary { margin: -5px 0 13px; color: #748079; font-size: .72rem; }
.frame-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.frame-grid .frame-swatch[hidden] { display: none; }
.frame-swatch { position: relative; width: 92px; cursor: pointer; }
.frame-swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.frame-swatch-art { display: flex; align-items: center; justify-content: center; height: 112px; border-radius: 8px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(35,49,44,.08); background-color: var(--sage-light); background-position: center; background-repeat: no-repeat; background-size: contain; color: #8a948f; font-size: .72rem; font-weight: 700; }
.frame-swatch-none { background-color: var(--paper); border: 1px dashed rgba(35,49,44,.25); box-shadow: none; }
.frame-swatch small { display: block; margin-top: 7px; font-size: .72rem; color: #5b665f; text-align: center; }
.frame-swatch input:checked + .frame-swatch-art { border-color: var(--forest); box-shadow: inset 0 0 0 2px #fff, 0 8px 18px rgba(31,50,44,.16); }
.frame-swatch input:focus-visible + .frame-swatch-art { outline: 2px solid var(--apricot); outline-offset: 2px; }
.frame-swatch--landscape { width: 132px; }
.frame-swatch--landscape .frame-swatch-art { height: 99px; }
/* Premium-locked theme swatches (frame or top background image). */
.frame-swatch.is-locked, .hero-swatch.is-locked { opacity: .5; cursor: not-allowed; }
.frame-swatch.is-locked .frame-swatch-art, .hero-swatch.is-locked .hero-swatch-art { filter: grayscale(.35); }
.theme-lock { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--gold); color: #3a2e12; font-size: .54rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
/* Portrait focus picker (memorial manager): drag a dot over the photo to set
which point stays in view when the photo is cropped to fill the frame. */
.focus-picker { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.focus-stage { position: relative; width: 320px; max-width: 100%; border-radius: 8px; overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; box-shadow: inset 0 0 0 1px rgba(35,49,44,.1); }
.focus-stage img { display: block; width: 100%; height: auto; pointer-events: none; }
.focus-dot { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%,-50%); border-radius: 50%; border: 3px solid #fff; background: rgba(47,85,72,.3); box-shadow: 0 0 0 2px rgba(31,50,44,.55), 0 3px 8px rgba(0,0,0,.35); pointer-events: none; }
.focus-preview-col { display: flex; flex-direction: column; gap: 8px; }
.focus-preview-label { font-size: .72rem; font-weight: 700; color: #4d5b55; }
/* Preview mirrors the live hero: photo clipped to the opening + the frame on top. */
.focus-preview { position: relative; width: 132px; aspect-ratio: 4 / 5; }
.focus-preview-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; background: var(--sage-light); }
.focus-preview-clip img { width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.focus-preview::after { content: ""; position: absolute; inset: 0; background: var(--preview-frame-url, none) center / contain no-repeat; pointer-events: none; }
.focus-zoom { display: flex; align-items: center; gap: 10px; margin-top: 12px; width: 132px; }
.focus-zoom span { font-size: .72rem; font-weight: 700; color: #4d5b55; }
.focus-zoom input[type="range"] { flex: 1; min-width: 0; accent-color: var(--forest); cursor: pointer; }
.memorial-overline { margin-bottom: 12px; color: var(--forest); font-size: .67rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.memorial-hero h1 { margin-bottom: 12px; font-size: clamp(3.2rem,6vw,6rem); }
.memorial-dates { color: #61716a; font-family: var(--serif); font-size: 1.1rem; }
.memorial-tagline { margin: 25px 0 52px; color: var(--forest); font-family: var(--serif); font-size: 1.55rem; font-style: italic; }
.memorial-tabs { position: relative; z-index: 1; display: flex; justify-content: center; gap: 38px; border-top: 1px solid rgba(47,85,72,.13); background: rgba(255,253,248,.66); backdrop-filter: blur(4px); }
.memorial-tabs a { padding: 20px 2px 17px; border-bottom: 3px solid transparent; color: #62706a; font-size: .76rem; font-weight: 700; }
.memorial-tabs a.active, .memorial-tabs a:hover { border-color: var(--apricot); color: var(--forest-dark); }
.memorial-content { padding: 100px 0; }
.memorial-two-col { display: grid; grid-template-columns: 1.3fr .7fr; gap: 100px; }
.content-overline { color: var(--apricot); font-size: .67rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.memorial-story h2 { margin: 13px 0 30px; font-size: clamp(2.7rem,4.5vw,4.2rem); }
.memorial-story > p:not(.content-overline) { color: #52605b; font-family: var(--serif); font-size: 1.18rem; line-height: 1.75; }
.story-dropcap::first-letter { float: left; padding: 12px 10px 0 0; color: var(--apricot); font-family: var(--serif); font-size: 4.9rem; line-height: .65; }
.memorial-facts { align-self: start; padding: 33px; border-top: 3px solid var(--apricot); background: white; box-shadow: 0 15px 40px rgba(31,50,44,.07); }
.memorial-facts h3 { font-family: var(--serif); font-size: 1.55rem; font-weight: 400; }
.fact { padding: 16px 0; border-top: 1px solid var(--line); }
.fact small { display: block; margin-bottom: 4px; color: #89918e; font-size: .61rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fact span { font-family: var(--serif); font-size: 1rem; }
.timeline-section { padding: 100px 0; background: var(--cream); }
.memorial-section-title { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 55px; }
.memorial-section-title h2 { margin: 0; font-size: clamp(2.7rem,4.5vw,4.2rem); }
.memorial-section-title p { max-width: 420px; margin: 0; color: #66716d; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.timeline::before { position: absolute; left: 0; right: 0; top: 18px; height: 1px; content: ""; background: var(--line); }
.timeline-item { position: relative; padding-top: 45px; }
.timeline-item::before { position: absolute; z-index: 1; top: 12px; left: 0; width: 12px; height: 12px; border: 3px solid var(--cream); border-radius: 50%; content: ""; background: var(--apricot); box-shadow: 0 0 0 1px var(--apricot); }
.timeline-item span { color: var(--apricot); font-size: .67rem; font-weight: 700; }
.timeline-item h3 { margin: 9px 0 8px; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.timeline-item p { margin: 0; color: #65706c; font-size: .77rem; }
.gallery-section { padding: 100px 0; }
.gallery-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; grid-template-rows: 220px 220px; gap: 12px; }
.gallery-grid figure { overflow: hidden; margin: 0; background: #eee; }
.gallery-grid figure:first-child { grid-row: span 2; }
.gallery-grid figure:last-child { grid-column: span 2; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-grid figure:hover img { transform: scale(1.03); }
.crop-left { object-position: left center; }
.crop-right { object-position: right center; }
.tributes-section { padding: 100px 0; background: var(--sage-light); }
.tribute-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.tribute-card { padding: 32px; background: rgba(255,255,255,.72); }
.tribute-card blockquote { margin: 0 0 25px; font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; }
.tribute-card footer { color: #6a746f; font-size: .72rem; line-height: 1.7; }
.tribute-card footer strong { color: var(--forest); font-size: .82rem; font-weight: 700; }
.tribute-card footer .tribute-date { color: #8a938e; }
.memorial-actions { display: flex; gap: 10px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 1.5px solid var(--forest); border-radius: 4px; background: transparent; color: var(--forest); font-size: .8rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .2s ease, color .2s ease; }
.icon-button:hover { background: var(--forest); color: #fff; }
/* Create flow */
.create-page { min-height: 100vh; background: var(--cream); }
.create-header { height: 72px; display: flex; align-items: center; border-bottom: 1px solid var(--line); background: var(--paper); }
.create-header .container { display: flex; align-items: center; justify-content: space-between; }
.create-header a:last-child { color: #65716c; font-size: .75rem; font-weight: 600; }
.create-save-later { border: 1px solid var(--line); background: transparent; color: #56635d; font-family: inherit; font-size: .75rem; font-weight: 700; padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.create-save-later:hover { border-color: var(--forest); color: var(--forest); background: rgba(47,85,72,.05); }
.create-save-later:focus-visible { outline: 2px solid var(--apricot); outline-offset: 2px; }
.create-shell { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 340px 1fr; }
.create-aside { padding: 70px 55px; background: var(--forest-dark); color: white; }
.create-aside h1 { margin-bottom: 25px; font-size: 2.7rem; }
.create-aside > p { color: rgba(255,255,255,.68); font-size: .88rem; }
.progress-list { display: grid; gap: 25px; margin-top: 60px; }
.progress-item { display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: center; color: rgba(255,255,255,.4); }
.progress-item > span { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; font-size: .67rem; }
.progress-item strong { display: block; font-size: .78rem; }
.progress-item small { font-size: .65rem; }
.progress-item.active, .progress-item.complete { color: white; }
.progress-item.active > span { border-color: var(--apricot); background: var(--apricot); color: var(--forest-dark); }
.progress-item.complete > span { border-color: var(--sage); background: var(--sage); color: var(--forest-dark); }
.create-main { display: flex; align-items: center; justify-content: center; padding: 60px; }
.create-form { width: min(630px,100%); }
.form-step[hidden] { display: none; }
.form-step .eyebrow { margin-bottom: 17px; }
.form-step h2 { margin-bottom: 14px; font-size: clamp(2.7rem,5vw,4.3rem); }
.form-lead { margin-bottom: 38px; color: #65716c; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 21px; }
.field-full { grid-column: 1/-1; }
.field label { display: block; margin-bottom: 8px; color: #4d5b55; font-size: .72rem; font-weight: 700; }
.field input, .field textarea, .field select { width: 100%; min-height: 52px; padding: 13px 15px; border: 1px solid rgba(35,49,44,.2); border-radius: 3px; outline: 0; background: var(--paper); }
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(47,85,72,.09); }
.date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.date-group-intro { margin: -8px 0 16px; color: #77807c; font-size: .76rem; line-height: 1.5; }
.date-group-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.date-group { min-width: 0; }
.date-group-label { display: block; margin-bottom: 8px; color: #4d5b55; font-size: .72rem; font-weight: 700; }
.date-group-label small { color: #7b8580; font-size: .68rem; font-weight: 600; }
.date-group + .date-group { margin-top: 4px; }
.date-select { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; --date-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 1.4L6 6L10.6 1.4' fill='none' stroke='%2323312c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.date-select select, .date-select input { width: 100%; min-height: 52px; padding: 13px 12px; border: 1px solid rgba(35,49,44,.2); border-radius: 3px; outline: 0; background: var(--paper); font-family: inherit; font-size: .95rem; color: var(--ink); }
.date-select select { padding-right: 42px; -webkit-appearance: none; appearance: none; background-color: var(--paper); background-image: var(--date-chevron); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; }
.date-select select::-ms-expand { display: none; }
.date-select select:focus, .date-select input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(47,85,72,.09); }
.year-combo { position: relative; display: block; min-width: 0; }
.year-combo .date-year { padding-right: 42px; }
.year-combo-toggle { position: absolute; top: 1px; right: 1px; bottom: 1px; display: flex; width: 40px; align-items: center; justify-content: center; border: 0; border-radius: 0 3px 3px 0; background-color: transparent; background-image: var(--date-chevron); background-repeat: no-repeat; background-position: center; background-size: 12px 8px; cursor: pointer; }
.year-combo-toggle::before { content: none; }
.year-combo-toggle:hover, .year-combo-toggle:focus { background-color: transparent; outline: 0; }
.year-combo-toggle:focus-visible { box-shadow: inset 0 0 0 2px rgba(47,85,72,.18); }
.year-combo-menu { position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; right: 0; display: grid; max-height: 230px; overflow: auto; padding: 6px; border: 1px solid rgba(35,49,44,.18); border-radius: 6px; background: var(--paper); box-shadow: 0 18px 38px rgba(35,49,44,.15); }
.year-combo-menu[hidden] { display: none; }
.year-option { width: 100%; padding: 8px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; }
.year-option:hover, .year-option:focus, .year-option.is-selected { background: var(--sage-light); color: var(--forest); outline: 0; }
.form-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; }
.back-button { border: 0; background: transparent; color: var(--forest); font-weight: 700; cursor: pointer; }
.photo-upload { position: relative; display: flex; min-height: 260px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px dashed rgba(47,85,72,.4); background: rgba(255,255,255,.42); text-align: center; cursor: pointer; }
.photo-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-upload .upload-icon { font-size: 2rem; color: var(--apricot); }
.photo-upload strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; }
.photo-upload small { color: #76807c; }
.photo-preview { width: 150px; height: 175px; object-fit: cover; border-radius: 50% 50% 4px 4px; }
.photo-upload-multiple { padding: 28px; }
.photo-preview-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.photo-preview-grid:empty { display: none; }
.photo-preview-grid .photo-preview { width: 70px; height: 70px; border-radius: 3px; }
.photo-preview-grid p { margin: 0; color: #9c4f47; font-size: .72rem; }
.plan-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plan-choice { position: relative; min-height: 250px; padding: 30px 25px; border: 1px solid var(--line); background: rgba(255,255,255,.45); cursor: pointer; }
.plan-choice:has(input:checked) { border-color: var(--forest); background: var(--sage-light); box-shadow: inset 0 0 0 1px var(--forest); }
.plan-choice input { position: absolute; right: 17px; top: 17px; accent-color: var(--forest); }
.plan-choice .plan-name { display: block; margin-bottom: 20px; color: var(--forest); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.plan-choice > strong { display: block; margin-bottom: 22px; font-family: var(--serif); font-size: 3.4rem; font-weight: 400; line-height: .8; }
.plan-choice > small { color: #65716c; font-size: .72rem; line-height: 1.8; }
.plan-choice > em { display: block; margin-top: 14px; color: #98574d; font-size: .62rem; font-style: normal; font-weight: 700; }
.plan-badge { position: absolute; top: -10px; left: 20px; padding: 5px 9px; border-radius: 20px; background: var(--apricot); color: var(--forest-dark); font-size: .56rem; font-weight: 700; text-transform: uppercase; }
.publish-note { display: flex; flex-direction: column; gap: 4px; margin-top: 25px; padding: 18px; border-left: 3px solid var(--apricot); background: rgba(255,255,255,.45); }
.publish-note strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; }
.publish-note span { color: #6c7671; font-size: .7rem; }
.create-errors { max-width: none; }
.choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.choice-card { position: relative; display: block; min-height: 165px; padding: 24px 20px; border: 1px solid var(--line); background: rgba(255,255,255,.42); cursor: pointer; }
.choice-card:has(input:checked) { border-color: var(--forest); background: var(--sage-light); box-shadow: inset 0 0 0 1px var(--forest); }
.choice-card input { position: absolute; right: 15px; top: 15px; accent-color: var(--forest); }
.choice-card span { display: block; margin-bottom: 15px; font-size: 1.5rem; }
.choice-card strong { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 1.1rem; font-weight: 400; }
.choice-card small { color: #6d7772; font-size: .67rem; line-height: 1.5; }
.success-panel { text-align: center; }
.success-mark { display: flex; width: 78px; height: 78px; align-items: center; justify-content: center; margin: 0 auto 25px; border-radius: 50%; background: var(--sage); color: var(--forest-dark); font-size: 2rem; }
/* Authentication */
.auth-page { min-height: 100vh; background: var(--cream); }
.auth-header, .account-header { height: 72px; border-bottom: 1px solid var(--line); background: var(--paper); }
.auth-header .container, .account-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.auth-back { color: #65716c; font-size: .75rem; font-weight: 600; }
.auth-shell { min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(560px, 1.1fr) minmax(380px, .9fr); }
.auth-card { display: flex; width: 100%; flex-direction: column; justify-content: center; padding: 70px clamp(48px, 8vw, 110px); background: var(--paper); }
.auth-card .eyebrow { margin-bottom: 16px; }
.auth-card h1 { margin-bottom: 18px; font-size: clamp(3rem, 5vw, 4.8rem); }
.auth-lead { max-width: 520px; margin-bottom: 32px; color: #65716c; }
.auth-lead strong { color: var(--ink); }
.auth-form { width: 100%; max-width: 520px; }
.auth-form .field { margin-bottom: 18px; }
.auth-form input { background: white; }
.auth-submit { width: 100%; max-width: 520px; margin-top: 6px; }
.auth-switch { max-width: 520px; margin: 25px 0 0; color: #707a76; font-size: .77rem; text-align: center; }
.auth-switch a, .auth-links a { color: var(--forest); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.auth-switch + .auth-switch { margin-top: 8px; }
.auth-switch a { display: inline-flex; min-height: 32px; align-items: center; padding-inline: 2px; }
.auth-links { max-width: 520px; margin-top: 18px; font-size: .74rem; text-align: center; }
.auth-fineprint { max-width: 520px; margin: 12px 0 0; color: #8b938f; font-size: .68rem; line-height: 1.6; text-align: center; }
.auth-fineprint a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.field-help { display: block; margin-top: 7px; color: #7b8580; font-size: .65rem; }
.character-count { display: block; margin-top: 7px; color: #7b8580; font-size: .65rem; font-variant-numeric: tabular-nums; text-align: right; }
.character-count.is-near-limit { color: #8a6a1f; font-weight: 700; }
.character-count.is-at-limit { color: #8f4536; font-weight: 700; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; }
.field-label-row a { display: inline-flex; min-height: 32px; align-items: center; color: var(--forest); font-size: .68rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 65px; }
.password-wrap button { position: absolute; right: 8px; top: 8px; bottom: 8px; padding: 0 10px; border: 0; background: transparent; color: var(--forest); font-size: .68rem; font-weight: 700; cursor: pointer; }
.alert { width: 100%; max-width: 520px; margin-bottom: 24px; padding: 15px 17px; border-left: 3px solid var(--gold); background: #f8edcf; color: #4f594f; font-size: .77rem; line-height: 1.55; }
.alert p { margin: 0; line-height: inherit; }
.alert ul { margin: 8px 0 0; padding-left: 18px; }
.alert-error { border-color: #b45b50; background: #fae8e4; color: #753c36; }
.alert-success { border-color: var(--forest); background: var(--sage-light); color: var(--forest-dark); }
.alert-notice { border-color: var(--gold); }
.auth-symbol { display: flex; width: 62px; height: 62px; align-items: center; justify-content: center; margin-bottom: 28px; border-radius: 50%; background: var(--sage-light); color: var(--forest); font-size: 1.5rem; }
.auth-symbol-error { background: #fae8e4; color: #9e4f46; font-weight: 700; }
.auth-instructions { max-width: 520px; margin: 0 0 25px; padding-top: 18px; border-top: 1px solid var(--line); color: #69736f; font-size: .77rem; }
.auth-instructions p { margin: 0; }
.auth-aside { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: clamp(45px, 7vw, 90px); background: linear-gradient(rgba(29,61,52,.68), rgba(29,61,52,.95)), url("images/memory-album.webp") center / cover; color: white; }
.auth-aside::before { position: absolute; top: -100px; right: -80px; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; content: ""; }
.auth-aside > div { position: relative; max-width: 510px; }
.auth-aside svg { width: 48px; margin-bottom: 25px; fill: var(--apricot); }
.auth-aside blockquote { margin: 0 0 24px; font-family: var(--serif); font-size: clamp(2rem, 3.3vw, 3.4rem); line-height: 1.12; }
.auth-aside p { color: rgba(255,255,255,.65); font-size: .75rem; }
/* Account dashboard */
.account-page { min-height: 100vh; background: var(--cream); }
.account-header nav { display: flex; align-items: center; gap: 25px; font-size: .76rem; font-weight: 600; }
.account-header nav form { margin: 0; }
.account-header nav button { padding: 0; border: 0; background: transparent; color: var(--forest); font-weight: 700; cursor: pointer; }
.account-main { padding: 85px 0 110px; }
.account-main > .container > .alert { max-width: none; }
.account-welcome { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 60px; }
.account-welcome h1 { margin-bottom: 12px; font-size: clamp(3.3rem, 6vw, 5.8rem); }
.account-welcome p:not(.eyebrow) { margin: 0; color: #66716c; }
.account-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; }
.account-panel { padding: 42px; border: 1px solid var(--line); background: var(--paper); }
.account-panel h2 { margin-bottom: 12px; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.account-panel p { max-width: 520px; color: #68736e; }
.account-panel-icon { display: flex; width: 52px; height: 52px; align-items: center; justify-content: center; margin-bottom: 55px; border-radius: 50%; background: var(--sage-light); color: var(--apricot); font-size: 1.45rem; }
.account-details dl { margin: 25px 0 0; }
.account-details dl div { display: grid; grid-template-columns: 105px 1fr; gap: 15px; padding: 17px 0; border-top: 1px solid var(--line); }
.account-details dt { color: #818985; font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.account-details dd { overflow-wrap: anywhere; margin: 0; font-family: var(--serif); font-size: 1rem; }
.verified-badge { color: var(--forest); font-family: var(--sans); font-size: .72rem; font-weight: 700; }
.account-password-panel { max-width: 720px; }
.account-password-panel .auth-form { max-width: 520px; margin-top: 22px; }
.account-password-panel .alert { max-width: 520px; }
.payment-success-main { display: flex; min-height: calc(100vh - 72px); align-items: center; padding-block: 70px; }
.payment-success-panel { max-width: 760px; margin-inline: auto; text-align: center; }
.payment-success-panel .account-panel-icon { margin: 0 auto 34px; }
.payment-success-panel .eyebrow { justify-content: center; }
.payment-success-panel h1 { margin-bottom: 22px; font-size: clamp(3rem, 6vw, 5.5rem); }
.payment-success-panel p:not(.eyebrow) { margin-inline: auto; }
.payment-success-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin-top: 34px; }
.account-memorials > h2 { margin-bottom: 25px; }
.account-empty .account-panel-icon { margin-bottom: 30px; }
.account-memorial-list { display: grid; gap: 10px; }
.account-memorial-card { position: relative; display: grid; grid-template-columns: 62px 1fr auto; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--line); background: #faf8f2; transition: border-color .2s, transform .2s; }
.account-memorial-card:hover { border-color: var(--forest); transform: translateY(-2px); }
.account-memorial-card img, .memorial-initials { width: 62px; height: 62px; object-fit: cover; border-radius: 50% 50% 3px 3px; }
.memorial-initials { display: flex; align-items: center; justify-content: center; background: var(--sage-light); color: var(--forest); font-family: var(--serif); font-size: 1.25rem; }
.account-memorial-card strong { display: block; margin-bottom: 4px; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; }
.account-memorial-card small { display: block; color: #76807b; font-size: .65rem; }
.account-memorial-card .account-memorial-warning { margin: 3px 0; color: #8f4536; font-weight: 700; }
.account-memorial-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; text-align: right; }
.account-memorial-action-form { position: relative; z-index: 1; margin: 0; }
.account-memorial-action-form button { padding: 7px 10px; border-radius: 999px; font-size: .64rem; font-weight: 700; cursor: pointer; }
.account-delete-memorial { border: 0; background: #8f4536; color: #fff; }
.account-delete-memorial:hover { background: #753c36; }
.account-cancel-delete { border: 1px solid rgba(47,85,72,.28); background: #fff; color: var(--forest); }
.account-memorial-manage { position: relative; z-index: 1; color: var(--forest); font-size: .68rem; font-weight: 700; }
.account-memorial-pending { position: relative; z-index: 1; max-width: 150px; color: #9c7a2b; font-size: .62rem; font-weight: 600; line-height: 1.35; }
.account-memorial-pending:hover { text-decoration: underline; }
/* Framed thumbnail in the account list: the chosen frame around the photo. */
.frame-thumb { position: relative; width: 62px; aspect-ratio: var(--thumb-ar, 4 / 5); }
/* Mirrors the memorial hero: the CLIP carries the frame opening (padded frames
inset it, masked frames clip to the mask shape) and the photo pans/zooms
INSIDE it. The mask must stay on the wrapper; putting it on the ![]()
would
make transform:scale() zoom the opening along with the photo. */
.frame-thumb .frame-thumb-clip { position: absolute; inset: var(--frame-pad-y, 9%) var(--frame-pad-x, 11%); overflow: hidden; }
.frame-thumb.is-masked .frame-thumb-clip { inset: 0; -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat; mask: var(--frame-mask) center / 100% 100% no-repeat; }
.frame-thumb .frame-thumb-photo { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); transform: scale(var(--portrait-zoom, 1)); transform-origin: var(--focus-x, 50%) var(--focus-y, 50%); background: var(--sage-light); }
/* Unframed card thumbnail: same focus/zoom, clipped to the rounded shape. */
.account-memorial-card .thumb-plain { display: block; width: 62px; height: 62px; overflow: hidden; border-radius: 50% 50% 3px 3px; background: var(--sage-light); }
.account-memorial-card .thumb-plain img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); transform: scale(var(--portrait-zoom, 1)); transform-origin: var(--focus-x, 50%) var(--focus-y, 50%); }
.frame-thumb::after { content: ""; position: absolute; inset: 0; background: var(--frame-url) center / contain no-repeat; pointer-events: none; }
.plan-tag--premium { font-weight: 700; color: #9c7a2b; }
.plan-tag--free { color: inherit; }
/* Memorial manager */
.manage-tabs { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid var(--line); background: rgba(255,253,248,.96); backdrop-filter: blur(14px); }
.manage-tabs .container { display: flex; gap: 30px; overflow-x: auto; }
.manage-tabs a { padding: 16px 0 13px; border-bottom: 3px solid transparent; color: #66716c; font-size: .71rem; font-weight: 700; white-space: nowrap; }
.manage-tabs a:hover { border-color: var(--apricot); color: var(--forest); }
.manage-main { padding: 70px 0 100px; }
.manage-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 45px; }
.manage-heading h1 { margin-bottom: 8px; font-size: clamp(3rem, 6vw, 5.5rem); }
.manage-heading p:last-child { margin: 0; color: #68736e; }
.manage-main > .container > .alert { max-width: none; }
.fixed-address { color: var(--forest); font-weight: 600; }
.editor-progress { display: grid; grid-template-columns: 100px 1fr; gap: 30px; align-items: center; margin-bottom: 28px; padding: 32px 38px; background: var(--forest); color: white; }
.editor-progress h2 { margin-bottom: 8px; font-size: 2rem; }
.editor-progress p:last-child { max-width: 650px; margin: 0; color: rgba(255,255,255,.67); font-size: .78rem; }
.progress-ring { --progress: 0; display: grid; width: 84px; height: 84px; place-items: center; border-radius: 50%; background: radial-gradient(circle at center, var(--forest) 57%, transparent 59%), conic-gradient(var(--apricot) calc(var(--progress) * 1%), rgba(255,255,255,.14) 0); }
.progress-ring strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; }
.manage-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 20px; margin-bottom: 20px; }
.manage-panel { margin-bottom: 20px; padding: 38px; border: 1px solid var(--line); background: var(--paper); }
.manage-panel h2 { margin-bottom: 25px; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.manage-panel h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.manage-panel textarea { min-height: 220px; }
.editor-section { scroll-margin-top: 65px; padding: 48px; }
.editor-section-heading { display: grid; grid-template-columns: 45px 1fr; gap: 18px; margin-bottom: 38px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.editor-section-heading > span { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--apricot); font-size: .66rem; font-weight: 700; }
.editor-section-heading h2 { margin: 4px 0 7px; font-size: clamp(2rem, 4vw, 3.3rem); }
.editor-section-heading p:last-child { max-width: 650px; margin: 0; color: #69736f; font-size: .78rem; }
.editor-fieldset { margin-bottom: 35px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.editor-fieldset h3, .timeline-add-form h3 { margin-bottom: 20px; }
.fieldset-help { margin: -8px 0 20px; color: #77807c; font-size: .72rem; }
.form-grid-three { grid-template-columns: repeat(3, 1fr); }
.editor-timeline-list { position: relative; margin-bottom: 35px; padding-left: 34px; }
.editor-timeline-list::before { position: absolute; top: 8px; bottom: 8px; left: 6px; width: 1px; content: ""; background: var(--line); }
.editor-timeline-list article { position: relative; padding: 0 0 28px; }
.editor-timeline-list article::before { position: absolute; top: 6px; left: -33px; width: 11px; height: 11px; border: 3px solid var(--paper); border-radius: 50%; content: ""; background: var(--apricot); box-shadow: 0 0 0 1px var(--apricot); }
.timeline-editor-item details { border-bottom: 1px solid var(--line); }
.timeline-editor-item summary { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 0 0 18px; cursor: pointer; list-style: none; }
.timeline-editor-item summary::marker { content: ""; }
.timeline-editor-item summary::-webkit-details-marker { display: none; }
.timeline-editor-item summary:focus-visible { outline: 2px solid var(--apricot); outline-offset: 5px; }
.timeline-event-date { padding-top: 4px; color: var(--apricot); font-size: .7rem; font-weight: 700; }
.timeline-event-copy { display: grid; gap: 5px; min-width: 0; }
.timeline-event-title { color: var(--forest); font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; }
.timeline-event-description { color: #6c7671; font-size: .75rem; line-height: 1.55; white-space: pre-line; }
.timeline-edit-label { padding-top: 3px; color: var(--forest); font-size: .65rem; font-weight: 700; }
.timeline-editor-item details[open] .timeline-edit-label { color: var(--apricot); }
.timeline-edit-form { margin: 0 0 0 88px; padding: 24px; background: var(--cream); }
.timeline-edit-form h3 { margin: 0 0 20px; }
.timeline-edit-form textarea { min-height: 100px; }
.timeline-delete-form { margin: 0 0 0 88px; padding: 14px 24px 20px; background: var(--cream); }
.danger-link, .text-button { padding: 0; border: 0; background: transparent; color: #9d5148; font-size: .65rem; font-weight: 700; cursor: pointer; }
.text-button { color: var(--forest); }
.timeline-add-form { padding: 28px; background: var(--cream); }
.timeline-add-form textarea { min-height: 90px; }
.editor-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.editor-photo-grid > article { min-width: 0; padding: 12px; border: 1px solid var(--line); background: #faf8f2; }
.editor-photo-preview { margin-bottom: 14px; }
.editor-photo { overflow: hidden; position: relative; aspect-ratio: 1; margin-bottom: 0; background: #eee; }
.editor-photo img { width: 100%; height: 100%; object-fit: cover; }
.editor-photo > .portrait-badge { position: absolute; left: 8px; top: 8px; z-index: 3; padding: 5px 8px; border-radius: 20px; background: var(--forest); color: white; font-size: .56rem; font-weight: 700; text-transform: uppercase; }
.editor-photo-preview[data-caption-placement="below"] [data-caption-card] { display: none; }
.editor-photo-preview[data-caption-placement="overlay"] [data-caption-below-preview] { display: none; }
.editor-caption-below-preview { --caption-quote-gutter: 36px; position: relative; margin: 0; padding: 14px 15px 14px var(--caption-quote-gutter); border: 1px solid var(--line); border-top: 0; background: var(--paper); color: var(--ink); overflow-wrap: anywhere; font-family: var(--serif); font-size: .82rem; line-height: 1.45; }
.editor-caption-below-preview::before { position: absolute; left: 0; top: 6px; width: var(--caption-quote-gutter); color: var(--apricot); content: "\201C"; text-align: right; font-family: var(--serif); font-size: 2rem; line-height: 1; }
.editor-caption-below-preview::after { position: relative; top: .34em; margin-left: .06em; color: var(--apricot); content: "\201D"; font-family: var(--serif); font-size: 2rem; line-height: 0; }
.editor-caption-below-preview.is-empty, .editor-caption-below-preview[hidden] { display: none; }
.editor-photo-grid .field { margin-bottom: 8px; }
.editor-photo-grid .field input { min-height: 42px; padding: 9px 10px; font-size: .7rem; }
.caption-placement-fieldset { min-width: 0; margin: 12px 0; padding: 0; border: 0; }
.caption-placement-fieldset legend { margin-bottom: 7px; color: #4d5a55; font-size: .66rem; font-weight: 700; }
.caption-placement-options { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--cream); }
.caption-placement-options label { position: relative; min-width: 0; cursor: pointer; }
.caption-placement-options input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.caption-placement-options span { display: flex; min-height: 38px; align-items: center; justify-content: center; padding: 7px 8px; border-radius: 4px; color: #66716c; font-size: .62rem; font-weight: 700; line-height: 1.2; text-align: center; transition: background .2s ease, box-shadow .2s ease, color .2s ease; }
.caption-placement-options input:checked + span { background: var(--paper); color: var(--forest-dark); box-shadow: 0 2px 8px rgba(31,45,39,.1); }
.caption-placement-options input:focus-visible + span { outline: 2px solid var(--apricot); outline-offset: 2px; }
.caption-width-control { margin: 12px 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 7px; background: rgba(232,238,232,.55); }
.caption-width-control[hidden] { display: none; }
.caption-width-control > label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: #4d5a55; font-size: .66rem; font-weight: 700; }
.caption-width-control output { color: var(--forest); font-variant-numeric: tabular-nums; white-space: nowrap; }
.caption-width-control input[type="range"] { width: 100%; min-height: 32px; margin: 0; accent-color: var(--forest); cursor: ew-resize; }
.caption-width-control small { display: block; color: #737e78; font-size: .61rem; line-height: 1.45; }
.caption-position-reset { min-height: 32px; margin-top: 8px; }
.caption-position-reset:disabled { opacity: .5; cursor: not-allowed; }
.editor-photo-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 6px; }
.caption-status { margin-left: 10px; font-size: .62rem; font-weight: 700; color: var(--forest); }
.caption-status.is-error { color: #8f4536; }
/* AI life-story writing assistant (manager) */
.ai-draft { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(199,166,90,.08); }
.ai-draft-locked { border-color: rgba(221,138,95,.45); background: rgba(221,138,95,.1); }
.ai-draft .fieldset-help { margin: 0 0 12px; }
.ai-draft .ai-notes { width: 100%; min-height: 72px; padding: 11px 13px; border: 1px solid rgba(35,49,44,.2); border-radius: 4px; background: var(--paper); font-family: inherit; font-size: .9rem; resize: vertical; }
.ai-draft-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.ai-draft-status { font-size: .72rem; font-weight: 600; color: #7a6a2e; }
.ai-draft-result { margin-top: 16px; }
.ai-draft-result label { display: block; margin-bottom: 6px; color: #4d5b55; font-size: .72rem; font-weight: 700; }
.ai-draft-result textarea { width: 100%; padding: 13px 15px; border: 1px solid rgba(35,49,44,.2); border-radius: 4px; background: var(--paper); font-family: inherit; font-size: .92rem; line-height: 1.6; resize: vertical; }
.ai-draft-result .button { margin-top: 12px; }
/* "How saving works" reminder + the Finalise call-to-action */
.finalise-reminder { margin: 0 0 26px; padding: 14px 18px; border: 1px solid rgba(199,166,90,.4); border-radius: 8px; background: rgba(199,166,90,.12); color: #5b5023; font-size: .82rem; line-height: 1.6; }
.finalise-reminder em { font-style: normal; font-weight: 700; color: var(--forest); }
.finalise-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding: 28px 32px; border-radius: 12px; background: var(--forest); color: #fff; }
.finalise-panel h2 { margin-bottom: 6px; color: #fff; font-family: var(--serif); font-weight: 400; }
.finalise-panel p { max-width: 520px; color: rgba(255,255,255,.82); font-size: .85rem; }
.finalise-panel .button { background: #fff; color: var(--forest); }
.finalise-panel .button:hover { background: var(--cream); color: var(--forest); }
.inline-upload > div { display: flex; flex-direction: column; min-width: 130px; }
.inline-upload > div strong { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; }
.inline-upload > div small { color: #78817d; font-size: .64rem; }
.limit-note { padding: 18px; background: var(--cream); color: #727c77; font-size: .72rem; }
.plan-summary { display: grid; gap: 14px; }
.plan-summary strong { color: var(--forest); font-family: var(--serif); font-size: 1.6rem; font-weight: 400; }
.plan-summary span { padding-bottom: 12px; border-bottom: 1px solid var(--line); color: #65716c; font-size: .74rem; }
.upgrade-note { margin-top: 28px; padding: 24px; background: var(--sage-light); }
.upgrade-note p { color: #66716c; font-size: .75rem; }
.button-disabled { width: 100%; background: #9ba7a1; cursor: not-allowed; pointer-events: none; }
.panel-heading { display: flex; justify-content: space-between; }
.panel-heading p { margin: 0; color: #76807b; font-size: .72rem; }
.manage-photo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 25px; }
.manage-photo-grid figure { position: relative; overflow: hidden; aspect-ratio: 1; margin: 0; background: #eee; }
.manage-photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.manage-photo-grid form { position: absolute; right: 5px; bottom: 5px; }
.manage-photo-grid button, .manage-comments button { padding: 5px 8px; border: 0; border-radius: 3px; background: rgba(29,61,52,.9); color: white; font-size: .58rem; cursor: pointer; }
.inline-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px; border: 1px dashed var(--line); background: var(--cream); }
.inline-upload input { flex: 1; font-size: .72rem; }
.upload-progress { display: flex; flex-basis: 100%; align-items: center; gap: 12px; margin-top: 6px; }
.upload-progress[hidden], .upload-overlay[hidden] { display: none; }
.upload-progress-track { flex: 1; height: 14px; border-radius: 999px; background: rgba(35,49,44,.12); overflow: hidden; }
.upload-progress-bar { width: 0; height: 100%; border-radius: 999px; background: var(--forest); transition: width .2s ease; }
.upload-progress-text { font-size: .74rem; font-weight: 700; color: var(--forest); white-space: nowrap; }
.upload-progress.is-error .upload-progress-bar { background: #8f4536; }
.upload-progress.is-error .upload-progress-text { color: #8f4536; white-space: normal; }
.upload-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(29,61,52,.45); }
.upload-overlay-card { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(380px, 100%); padding: 34px 40px; border-radius: 12px; background: var(--paper); text-align: center; }
.upload-overlay-card strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; }
.upload-overlay-card span { color: #69736e; font-size: .8rem; }
.upload-overlay-card .upload-progress-text { color: var(--forest); font-size: .74rem; font-weight: 700; }
.upload-progress-overlay { width: 100%; margin-top: 10px; }
.upload-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(47,85,72,.25); border-top-color: var(--forest); animation: upload-spin .8s linear infinite; }
@keyframes upload-spin { to { transform: rotate(360deg); } }
.manage-comments article { padding: 18px 0; border-top: 1px solid var(--line); }
.manage-comments article.comment-pending { border-left: 3px solid var(--gold); padding-left: 14px; }
.manage-comments p { margin-bottom: 8px; color: var(--ink); }
.manage-comments small { color: #7a837f; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.comment-actions form { margin: 0; }
.comment-actions .text-button, .comment-actions .danger-link { padding: 5px 10px; border: 0; border-radius: 3px; font-size: .58rem; font-weight: 600; cursor: pointer; }
.comment-actions .text-button { background: rgba(29,61,52,.9); color: #fff; }
.comment-actions .danger-link { background: #8f4536; color: #fff; }
.comment-status { font-weight: 700; }
.comment-status--pending { color: #a8842f; }
.comment-status--published { color: var(--forest); }
.comment-status--hidden { color: #8f4536; }
.comment-note { margin: 0 0 14px; color: #69736e; font-size: .72rem; }
.tribute-relation { color: #76807b; font-weight: 400; }
/* Admin console */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 26px; }
.admin-tabs a { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; color: #56635d; font-size: .78rem; font-weight: 700; text-decoration: none; }
.admin-tabs a.active { background: var(--forest); border-color: var(--forest); color: #fff; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.admin-stat { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: #faf8f2; }
.admin-stat strong { display: block; font-family: var(--serif); font-size: 2.2rem; font-weight: 400; color: var(--forest); }
.admin-stat span { font-size: .68rem; color: #76807b; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.admin-hint { color: #76807b; font-size: .8rem; }
.admin-section-title { margin: 30px 0 12px; font-family: var(--serif); font-size: 1.55rem; font-weight: 400; }
.admin-empty-panel { margin-top: 10px; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #faf8f2; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .8rem; min-width: 760px; }
.admin-table th { text-align: left; padding: 12px 14px; background: rgba(35,49,44,.05); color: #4d5b55; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; }
.admin-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-actions form { margin: 0; }
.admin-btn { display: inline-block; padding: 6px 12px; border: 1px solid var(--forest); border-radius: 4px; background: transparent; color: var(--forest); font-size: .7rem; font-weight: 700; cursor: pointer; text-decoration: none; }
.admin-btn:hover { background: var(--forest); color: #fff; }
.admin-btn-danger { border-color: #8f4536; color: #8f4536; }
.admin-btn-danger:hover { background: #8f4536; color: #fff; }
.admin-btn-danger-solid { background: #8f4536; color: #fff; }
.admin-btn-danger-solid:hover { background: #73372c; border-color: #73372c; }
.admin-delete-confirmation { max-width: 980px; margin: 24px 0 34px; padding: clamp(24px, 4vw, 40px); scroll-margin-top: 24px; border: 1px solid #d9aaa0; border-left: 5px solid #8f4536; border-radius: 12px; background: #fff8f5; box-shadow: 0 16px 42px rgba(52, 41, 37, .08); }
.admin-delete-confirmation .eyebrow { margin-bottom: 9px; color: #8f4536; }
.admin-delete-confirmation h2 { max-width: 760px; margin-bottom: 12px; font-family: var(--serif); font-size: clamp(1.8rem, 3.8vw, 2.7rem); font-weight: 400; line-height: 1.08; }
.admin-delete-confirmation-intro { max-width: 760px; margin: 0 0 24px; color: #5e6964; line-height: 1.65; }
.admin-delete-account-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0 0 24px; }
.admin-delete-account-details > div { min-width: 0; padding: 14px 16px; border: 1px solid rgba(143, 69, 54, .18); border-radius: 7px; background: #fff; }
.admin-delete-account-details dt { margin-bottom: 5px; color: #7a8580; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-delete-account-details dd { margin: 0; color: #28342f; font-size: .82rem; font-weight: 700; overflow-wrap: anywhere; }
.admin-delete-confirmation-warning { max-width: 820px; margin: 0; padding-top: 20px; border-top: 1px solid rgba(143, 69, 54, .2); color: #633d35; font-size: .79rem; line-height: 1.65; }
.admin-delete-confirmation-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; }
.admin-delete-confirmation-actions form { margin: 0; }
.admin-delete-confirmation-actions .admin-btn { padding: 9px 16px; }
.admin-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.admin-pill-gold { background: var(--gold); color: #3a2e12; }
.admin-pill-forest { background: var(--forest); color: #fff; }
.admin-pill-danger { background: #fae8e4; color: #753c36; }
.admin-muted-link { color: #76807b; font-size: .72rem; }
.admin-muted { color: #9aa39e; font-size: .72rem; }
.admin-comment-list { display: flex; flex-direction: column; gap: 14px; }
.admin-comment { padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: #faf8f2; }
.admin-comment.comment-pending { border-left: 3px solid var(--gold); }
.admin-comment p { margin: 0 0 8px; color: var(--ink); }
.admin-comment small { color: #7a837f; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.muted { color: #78827d; }
/* Live memorials */
.portrait-placeholder { display: flex; align-items: center; justify-content: center; margin-inline: auto; background: var(--forest); color: white; font-family: var(--serif); font-size: 3rem; }
.live-story { max-width: 800px; }
.live-story h2 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.story-prose { color: #52605b; font-family: var(--serif); font-size: 1.25rem; line-height: 1.8; }
.live-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.live-timeline-item { position: relative; padding: 42px 25px 26px; border-top: 1px solid var(--line); background: rgba(255,255,255,.35); }
.live-timeline-item::before { position: absolute; top: -7px; left: 24px; width: 12px; height: 12px; border: 3px solid var(--cream); border-radius: 50%; content: ""; background: var(--apricot); box-shadow: 0 0 0 1px var(--apricot); }
.live-timeline-item > span { color: var(--apricot); font-size: .67rem; font-weight: 700; }
.live-timeline-item h3 { margin: 10px 0 8px; font-family: var(--serif); font-size: 1.45rem; font-weight: 400; }
.live-timeline-item p { margin: 0; color: #66716c; font-size: .76rem; }
.live-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
.live-gallery figure { min-width: 0; margin: 0; background: transparent; }
.live-gallery .gallery-primary { grid-column: span 2; grid-row: span 2; }
.gallery-photo-media { overflow: hidden; position: relative; aspect-ratio: 1; background: #eee; }
.live-gallery .gallery-photo-media img { width: 100%; height: 100%; object-fit: cover; }
.photo-caption-note { --caption-quote-gutter: 52px; position: absolute; z-index: 2; left: var(--caption-x, 50%); top: var(--caption-y, 80%); box-sizing: border-box; width: max-content; max-width: min(78%, 360px); padding: 18px 24px 18px var(--caption-quote-gutter); background: var(--paper); color: var(--ink); box-shadow: 0 18px 42px rgba(31,45,39,.18); transform: translate(-50%, -50%) rotate(-1.5deg); overflow-wrap: anywhere; font-family: var(--serif); font-size: clamp(1.05rem, 1.45vw, 1.45rem); line-height: 1.2; }
.photo-caption-note::before { position: absolute; left: 0; top: 10px; width: var(--caption-quote-gutter); color: var(--apricot); content: "\201C"; text-align: right; font-family: var(--serif); font-size: 3rem; line-height: 1; }
.photo-caption-note > span::after { position: relative; top: .34em; color: var(--apricot); content: "\201D"; margin-left: .06em; font-family: var(--serif); font-size: 3rem; line-height: 0; }
.live-gallery figure:not(.gallery-primary) .photo-caption-note { --caption-quote-gutter: 40px; max-width: 84%; padding: 14px 16px 14px var(--caption-quote-gutter); font-size: .9rem; }
.live-gallery figure:not(.gallery-primary) .photo-caption-note::before { left: 0; top: 7px; font-size: 2.2rem; }
.live-gallery figure:not(.gallery-primary) .photo-caption-note > span::after { font-size: 2.2rem; }
.live-gallery figure:nth-child(even) .photo-caption-note { transform: translate(-50%, -50%) rotate(1.2deg); }
.live-gallery figure.caption-width-custom .photo-caption-note, .editor-photo.caption-width-custom .editor-caption-note { width: var(--caption-width, auto); max-width: calc(100% - 16px); }
.photo-caption-below { --caption-quote-gutter: 48px; position: relative; margin: 0; padding: 18px 20px 18px var(--caption-quote-gutter); border: 1px solid var(--line); border-top: 0; background: var(--paper); color: var(--ink); overflow-wrap: anywhere; font-family: var(--serif); font-size: 1.05rem; line-height: 1.45; }
.photo-caption-below::before { position: absolute; left: 0; top: 9px; width: var(--caption-quote-gutter); color: var(--apricot); content: "\201C"; text-align: right; font-family: var(--serif); font-size: 2.7rem; line-height: 1; }
.photo-caption-below::after { position: relative; top: .34em; margin-left: .06em; color: var(--apricot); content: "\201D"; font-family: var(--serif); font-size: 2.7rem; line-height: 0; }
.live-gallery figure:not(.gallery-primary) .photo-caption-below { --caption-quote-gutter: 40px; padding: 14px 16px 14px var(--caption-quote-gutter); font-size: .88rem; }
.live-gallery figure:not(.gallery-primary) .photo-caption-below::before { left: 0; top: 7px; font-size: 2.2rem; }
.live-gallery figure:not(.gallery-primary) .photo-caption-below::after { font-size: 2.2rem; }
.editor-caption-note { --caption-quote-gutter: 36px; max-width: 84%; padding: 12px 14px 12px var(--caption-quote-gutter); cursor: grab; font-size: .78rem; user-select: none; touch-action: none; }
.editor-caption-note::before { left: 0; top: 5px; font-size: 2rem; }
.editor-caption-note > span { pointer-events: none; }
.editor-caption-note > span::after { font-size: 2rem; }
.editor-caption-note.is-empty { display: none; }
.editor-caption-note.is-dragging { opacity: .95; box-shadow: 0 24px 56px rgba(31,45,39,.26); cursor: grabbing; }
.editor-caption-note:focus-visible { outline: 3px solid var(--apricot); outline-offset: 3px; }
.comment-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 380px); gap: 35px; align-items: start; }
.comment-layout .tribute-grid { grid-template-columns: repeat(2, 1fr); }
.comment-form-card { position: sticky; top: 100px; padding: 28px; background: var(--paper); }
.comment-form-card h3 { font-family: var(--serif); font-size: 1.65rem; font-weight: 400; }
.comment-form-card p { color: #69736e; font-size: .76rem; }
.turnstile-field { width: 100%; margin: 18px 0; }
.turnstile-field .cf-turnstile { width: 100%; }
.turnstile-field iframe { max-width: 100%; }
.turnstile-note { margin: -8px 0 18px; color: #78827d; font-size: .68rem; line-height: 1.5; }
.qr-section { padding: 90px 0; background: var(--cream); }
.qr-card { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; max-width: 850px; padding: 50px; background: var(--paper); }
.qr-card h2 { margin-bottom: 15px; font-size: 3.2rem; }
.qr-card > :not(.qr-keepsake) p:not(.content-overline) { color: #68736e; }
.qr-code { padding: 14px; background: white; }
.qr-code img, .qr-code canvas { display: block; }
.qr-card-personalised { max-width: 980px; }
.qr-keepsake { --qr-dark: #173d34; --qr-light: #fffdf8; --qr-ink: #173d34; --qr-muted: #64716b; --qr-surface: #fffaf2; position: relative; display: flex; width: 310px; max-width: 100%; aspect-ratio: 8 / 11; box-sizing: border-box; flex-direction: column; align-items: center; padding: 25px 21px 20px; overflow: hidden; border: 1px solid rgba(30,55,51,.14); border-radius: 8px; background: var(--qr-surface); color: var(--qr-ink); box-shadow: 0 24px 64px rgba(25,45,42,.18); text-align: center; isolation: isolate; }
.qr-keepsake-background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .2s ease; }
.qr-keepsake::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--qr-surface) 86%, transparent) 0 25%, color-mix(in srgb, var(--qr-surface) 42%, transparent) 43%, color-mix(in srgb, var(--qr-surface) 18%, transparent) 72%, color-mix(in srgb, var(--qr-surface) 74%, transparent) 100%); content: ""; pointer-events: none; }
.qr-keepsake > *:not(.qr-keepsake-background) { position: relative; z-index: 2; }
.qr-keepsake.is-loading-qr-background .qr-keepsake-background { opacity: .45; }
.qr-keepsake.has-qr-background-error { background: var(--qr-surface); }
.qr-keepsake.has-qr-background-error .qr-keepsake-background { display: none; }
.qr-keepsake-logo { display: block; width: 164px; height: auto; margin: 0 auto 3px; flex: 0 0 auto; object-fit: contain; }
.qr-keepsake[data-qr-theme="sky-moonlit-blue"] .qr-keepsake-logo,
.qr-keepsake[data-qr-theme="sky-starlight"] .qr-keepsake-logo,
.qr-keepsake[data-qr-theme="heirloom-bookcloth-gold"] .qr-keepsake-logo { box-sizing: border-box; padding: 0; border-radius: 6px; background: rgba(255, 253, 248, .86); box-shadow: 0 0 0 3px rgba(255, 253, 248, .86); }
.qr-keepsake h3 { display: -webkit-box; max-width: 248px; margin: 0 auto 3px; overflow: hidden; flex: 0 0 auto; color: var(--qr-ink); -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 1.62rem; line-height: 1.02; text-overflow: ellipsis; }
.qr-keepsake p { margin: 0 0 8px; flex: 0 0 auto; color: var(--qr-ink); font-size: .82rem; font-weight: 700; }
.qr-keepsake [data-qr-card-name][hidden], .qr-keepsake [data-qr-card-years][hidden] { display: none !important; }
.qr-art { --qr-plate-feather: 2%; position: relative; isolation: isolate; display: grid; width: min(220px, 100%); aspect-ratio: 1; box-sizing: border-box; margin: 10px auto; padding: 0; overflow: visible; flex: 0 0 auto; place-items: center; background: transparent; }
.qr-keepsake.has-wrapped-qr-name .qr-art { width: min(196px, 100%); margin: 6px auto 4px; }
.qr-art::before {
position: absolute;
z-index: 0;
inset: 0;
content: "";
pointer-events: none;
background: linear-gradient(135deg, rgba(255, 253, 248, .95) 0%, rgba(225, 238, 232, .95) 52%, rgba(249, 221, 207, .95) 100%);
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, #000 var(--qr-plate-feather), #000 calc(100% - var(--qr-plate-feather)), transparent 100%),
linear-gradient(180deg, transparent 0%, #000 var(--qr-plate-feather), #000 calc(100% - var(--qr-plate-feather)), transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(90deg, transparent 0%, #000 var(--qr-plate-feather), #000 calc(100% - var(--qr-plate-feather)), transparent 100%),
linear-gradient(180deg, transparent 0%, #000 var(--qr-plate-feather), #000 calc(100% - var(--qr-plate-feather)), transparent 100%);
mask-composite: intersect;
mask-mode: alpha;
}
.qr-art .qr-code { position: relative; z-index: 1; width: 100%; height: 100%; padding: 0; background: transparent; }
.qr-art .qr-code img, .qr-art .qr-code canvas { display: block; width: 100%; height: 100%; }
.qr-keepsake-scan { display: block; margin: 0 0 3px; flex: 0 0 auto; color: var(--qr-ink); font-size: .54rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.qr-keepsake small { display: block; width: 100%; max-width: 100%; overflow: hidden; flex: 0 0 auto; color: var(--qr-ink); font-size: .6rem; overflow-wrap: normal; text-overflow: ellipsis; white-space: nowrap; }
.qr-designer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 34px; align-items: start; }
.qr-theme-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.qr-theme-choice { position: relative; display: block; min-width: 0; cursor: pointer; }
.qr-theme-choice input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.qr-theme-sample { position: relative; display: block; width: 100%; aspect-ratio: 8 / 11; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); box-shadow: 0 6px 16px rgba(31,50,44,.08); }
.qr-theme-sample img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qr-theme-choice strong { display: block; margin-top: 7px; font-size: .68rem; line-height: 1.25; }
.qr-theme-choice small { display: block; margin-top: 2px; color: #68736e; font-size: .59rem; line-height: 1.3; }
.qr-theme-choice:has(input:checked) .qr-theme-sample { border-color: var(--forest); box-shadow: 0 0 0 2px var(--forest), 0 10px 22px rgba(31,50,44,.16); }
.qr-theme-choice:has(input:focus-visible) .qr-theme-sample { outline: 3px solid var(--apricot); outline-offset: 3px; }
.qr-checks { display: grid; gap: 10px; color: #46524c; font-weight: 700; }
.qr-checks label { display: flex; align-items: center; gap: 10px; }
.qr-checks input { width: 18px; height: 18px; accent-color: var(--forest); }
.qr-preview-panel { position: sticky; top: 100px; display: grid; gap: 16px; justify-items: center; padding: 24px; border-radius: 18px; background: var(--cream); }
.qr-preview-panel .fieldset-help { margin: 0; text-align: center; }
.qr-runtime-status { width: 100%; box-sizing: border-box; margin: 0; padding: 9px 11px; border: 1px solid var(--line); background: var(--paper); color: var(--qr-muted, #64716b); font-size: .68rem; line-height: 1.4; text-align: center; }
.qr-card > .qr-runtime-status { grid-column: 1 / -1; }
.qr-runtime-status[data-state="error"] { border-color: #a55b4d; background: #fff4f0; color: #7e3d32; }
.qr-runtime-status[data-state="success"] { border-color: #588274; background: #f1f8f4; color: #315e50; }
/* Modal and utilities */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(19,35,29,.68); backdrop-filter: blur(6px); }
.modal-backdrop[hidden] { display: none; }
.modal { position: relative; width: min(560px,100%); padding: 42px; background: var(--paper); box-shadow: var(--shadow); }
.modal-close { position: absolute; top: 13px; right: 13px; width: 34px; height: 34px; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer; }
.modal h2 { margin-bottom: 15px; font-size: 2.8rem; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 30px; padding: 13px 20px; border-radius: 4px; background: var(--ink); color: white; font-size: .78rem; transform: translate(-50%,20px); opacity: 0; transition: .25s ease; pointer-events: none; }
.toast.show { transform: translate(-50%,0); opacity: 1; }
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in-view { opacity: 1; transform: none; }
.reveal-delay { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
.js .reveal { opacity: 1; transform: none; }
}
@media (max-width: 980px) {
.section { padding: 90px 0; }
.site-header .brand, .menu-toggle { position: relative; z-index: 3; }
.menu-toggle { display: block; }
.mobile-header-cta { position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin-left: auto; margin-right: 10px; padding: 0 15px; border-radius: 999px; background: var(--forest); color: #fff; font-size: .78rem; font-weight: 800; }
body.menu-open .mobile-header-cta { display: none; }
body.menu-open .site-header { height: 100dvh !important; background: var(--cream); backdrop-filter: none; }
body.menu-open .nav-wrap { height: 66px; }
.main-nav { position: absolute; z-index: 2; inset: 0; min-height: 100dvh; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 22px; padding: 115px 10vw 55px; background: var(--cream); font-family: var(--serif); font-size: 1.8rem; transform: translateX(100%); transition: transform .3s ease; }
.main-nav.open { transform: none; }
.main-nav .button { font-family: var(--sans); font-size: .85rem; }
.main-nav .nav-logout button { font-family: var(--serif); font-size: 1.8rem; }
.content-page .content-nav { position: relative; z-index: 4; }
.content-page .content-nav-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--forest-dark); font-size: .76rem; font-weight: 700; cursor: pointer; }
.content-page .content-nav-toggle i, .content-page .content-nav-toggle i::before, .content-page .content-nav-toggle i::after { display: block; width: 16px; height: 1px; background: currentColor; content: ""; transition: transform .2s ease; }
.content-page .content-nav-toggle i { position: relative; }
.content-page .content-nav-toggle i::before { position: absolute; left: 0; top: -5px; }
.content-page .content-nav-toggle i::after { position: absolute; left: 0; top: 5px; }
.content-page .content-nav.open .content-nav-toggle i { background: transparent; }
.content-page .content-nav.open .content-nav-toggle i::before { top: 0; transform: rotate(45deg); }
.content-page .content-nav.open .content-nav-toggle i::after { top: 0; transform: rotate(-45deg); }
.content-page .content-nav:not(.open) > .main-nav { display: none; }
.content-page .main-nav { position: absolute; z-index: 5; inset: auto 0 auto auto; top: calc(100% + 12px); width: min(340px, calc(100vw - 32px)); max-height: calc(100dvh - 92px); min-height: 0; overflow-y: auto; flex-direction: column; align-items: stretch; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 24px 65px rgba(29,61,52,.2); font-family: var(--sans); font-size: .88rem; transform: none; transition: none; }
.content-page .main-nav > a:not(.button) { width: 100%; padding: 10px 8px; border-radius: 8px; }
.content-page .main-nav > a:not(.button):hover { background: var(--cream); }
.content-page .main-nav .nav-login { margin-left: 0; }
.content-page .main-nav .button { width: 100%; margin-top: 5px; }
.content-hero-with-visual { grid-template-columns: 1fr; }
.content-hero-visual { transform: none; }
.hero-grid { min-height: auto; grid-template-columns: 1fr; padding-top: 75px; }
.hero-copy { max-width: 760px; }
.hero-visual { width: 100%; }
.hero-image-wrap { height: 580px; }
.intro-grid { gap: 50px; }
.album-feature { grid-template-columns: 1fr; }
.album-image { height: 470px; }
.album-card { padding: 48px; }
.example-grid { grid-template-columns: 1fr; }
.example-copy { max-width: 600px; }
.section-heading.split { grid-template-columns: 1fr; gap: 20px; }
.features-grid { grid-template-columns: 1fr 1fr; }
.feature-wide { grid-column: span 2; }
.faq-grid { gap: 60px; }
.create-shell { grid-template-columns: 260px 1fr; }
.create-aside { padding: 55px 32px; }
.create-aside h1 { font-size: 2.2rem; }
.create-main { padding: 45px; }
.memorial-two-col { gap: 55px; }
.auth-shell { grid-template-columns: 1fr; }
.auth-card { max-width: none; padding-block: 80px; }
.auth-aside { min-height: 480px; }
.manage-grid { grid-template-columns: 1fr; }
.editor-photo-grid { grid-template-columns: repeat(2, 1fr); }
.qr-designer-grid { grid-template-columns: 1fr; }
.qr-preview-panel { position: static; }
.comment-layout { grid-template-columns: 1fr; }
.comment-form-card { position: static; }
}
@media (max-width: 720px) {
body.auth-page .auth-header {
height: 66px;
min-height: 66px;
}
.container { width: min(100% - 32px, 1180px); }
.section { padding: 72px 0; }
.site-header, .site-header.scrolled, .site-header.solid { height: 66px; }
.brand { font-size: 1.18rem; }
.brand-logo { height: 40px; }
.site-header .brand, .auth-header .brand, .account-header .brand, .create-header .brand { width: 70px; height: 40px; flex-basis: 70px; }
.site-header .brand-logo, .auth-header .brand-logo, .account-header .brand-logo, .create-header .brand-logo { height: 54px; transform: translateY(-50%); }
.site-footer .brand-logo { height: 46px; }
.hero { padding-top: 66px; }
.hero-grid { padding-top: 55px; padding-bottom: 45px; gap: 45px; }
h1 { font-size: clamp(3.3rem,16vw,4.8rem); }
h2 { font-size: clamp(2.7rem,13vw,4rem); }
.hero-intro { font-size: .98rem; }
.hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
.hero-image-wrap { height: 470px; border-radius: 45% 45% 5px 5px / 25% 25% 5px 5px; }
.memory-note { left: 12px; bottom: -24px; }
.hero-doodle { display: none; }
.reassurance { grid-template-columns: 1fr; padding-top: 35px; }
.reassurance > div, .reassurance > div:first-child { padding: 20px 15px 20px 36px; border-right: 0; border-bottom: 1px solid var(--line); }
.reassurance > div:last-child { border-bottom: 0; }
.reassurance span, .reassurance > div:first-child span { left: 5px; top: 22px; }
.intro-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 50px; }
.album-image { height: 330px; }
.album-card { padding: 34px 25px; }
.steps-grid { grid-template-columns: 1fr; }
.step-card { max-width: 450px; margin-inline: auto; }
.example-grid { gap: 55px; }
.memorial-preview { transform: none; }
.preview-body { min-height: 430px; padding-inline: 18px; }
.preview-nav small { display: none; }
.features-grid { grid-template-columns: 1fr; }
.feature-wide { grid-column: auto; grid-template-columns: auto 1fr; }
.feature-quote { display: none; }
.pricing-grid { grid-template-columns: 1fr; }
.faq-grid { grid-template-columns: 1fr; gap: 45px; }
.faq-intro { position: static; }
.final-cta-inner { align-items: flex-start; flex-direction: column; }
.footer-top { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1/-1; }
.footer-bottom { gap: 16px; flex-direction: column; }
.footer-links { justify-content: flex-start; }
.memorial-tabs { overflow-x: auto; justify-content: flex-start; gap: 25px; padding-inline: 16px; }
.memorial-hero .hero-inner { padding: 40px 0 36px; }
.memorial-hero .portrait-clip--plain { width: 150px; height: 178px; border-width: 6px; margin-bottom: 18px; }
.memorial-hero .portrait-framed { margin-bottom: 18px; }
.memorial-hero .portrait-frame--portrait { width: 196px; }
.memorial-hero .portrait-frame--landscape { width: min(330px, 86vw); }
.memorial-tabs a { white-space: nowrap; }
.memorial-two-col { grid-template-columns: 1fr; gap: 45px; }
.memorial-section-title { align-items: flex-start; flex-direction: column; }
.timeline { grid-template-columns: 1fr; gap: 25px; }
.timeline::before { left: 6px; top: 0; bottom: 0; width: 1px; height: auto; }
.timeline-item { padding: 0 0 0 35px; }
.timeline-item::before { top: 4px; left: 0; }
.gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 180px 180px; }
.gallery-grid figure:first-child { grid-column: span 2; grid-row: auto; }
.gallery-grid figure:last-child { grid-column: span 2; }
.tribute-grid { grid-template-columns: 1fr; }
.create-shell { display: block; }
.create-aside { padding: 40px 24px 25px; }
.create-aside h1 { font-size: 2.5rem; }
.create-aside > p { display: none; }
.progress-list { grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 25px; }
.progress-item { display: flex; gap: 7px; }
.progress-item > span { width: 24px; height: 24px; }
.progress-item small { display: none; }
.create-main { padding: 50px 20px; }
.form-grid, .date-fields { grid-template-columns: 1fr; gap: 0; }
.date-group-fields { grid-template-columns: 1fr; gap: 4px; }
.date-group + .date-group { margin-top: 18px; }
.plan-choice-grid { grid-template-columns: 1fr; }
.choice-grid { grid-template-columns: 1fr; }
.choice-card { min-height: 130px; }
.auth-header, .account-header { height: 66px; }
.auth-shell { min-height: calc(100vh - 66px); }
.auth-card { padding: 60px 24px; }
.auth-aside { min-height: 400px; padding: 45px 24px; }
.auth-back { font-size: 0; }
.auth-back::after { content: "← Home"; font-size: .72rem; }
.director-auth-back { font-size: .72rem; }
.director-auth-back::after { content: none; }
.account-main { padding: 60px 0 80px; }
.account-welcome { align-items: flex-start; flex-direction: column; margin-bottom: 45px; }
.account-grid { grid-template-columns: 1fr; }
.account-panel { padding: 30px 24px; }
.account-header nav > a { display: none; }
.account-memorial-card { grid-template-columns: 54px 1fr auto; }
.account-memorial-card img, .memorial-initials { width: 54px; height: 54px; }
.account-memorial-card .thumb-plain { width: 54px; height: 54px; }
.frame-thumb { width: 54px; }
.account-memorial-actions { grid-column: 2 / -1; justify-content: flex-start; text-align: left; }
.account-memorial-pending { max-width: 96px; }
.manage-main { padding: 50px 0 75px; }
.manage-heading { align-items: flex-start; flex-direction: column; }
.manage-panel { padding: 28px 22px; }
.manage-tabs .container { gap: 22px; }
.editor-progress { grid-template-columns: 1fr; padding: 28px 24px; }
.editor-section { padding: 30px 22px; }
.editor-section-heading { grid-template-columns: 1fr; }
.form-grid-three { grid-template-columns: 1fr; }
.frame-category-toggle { width: 100%; flex-wrap: nowrap; gap: 6px; margin: 12px 0 8px; padding: 2px 2px 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.frame-category-option { flex: 0 0 auto; scroll-snap-align: start; }
.frame-category-option span { min-height: 32px; padding: 6px 10px; white-space: nowrap; font-size: .64rem; }
.frame-shape-toggle { display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; gap: 4px; margin: 10px 0 16px; padding: 4px; border-radius: 18px; }
.frame-shape-option span { width: 100%; min-height: 38px; padding: 8px 6px; border-radius: 14px; font-size: .62rem; letter-spacing: .035em; text-align: center; line-height: 1.15; }
.frame-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
.frame-swatch, .frame-swatch--landscape { width: 100%; min-width: 0; }
.frame-swatch-art, .frame-swatch--landscape .frame-swatch-art { height: auto; aspect-ratio: 4 / 5; border-radius: 7px; }
.frame-grid[data-frame-filter="landscape"] .frame-swatch-art { aspect-ratio: 4 / 3; }
.frame-swatch small { margin-top: 5px; font-size: .56rem; line-height: 1.22; overflow-wrap: anywhere; }
.timeline-editor-item summary { grid-template-columns: 55px minmax(0, 1fr); gap: 14px; }
.timeline-edit-label { grid-column: 2; justify-self: start; }
.timeline-edit-form, .timeline-delete-form { margin-left: 0; }
.editor-photo-grid { grid-template-columns: 1fr; }
.manage-photo-grid { grid-template-columns: repeat(2, 1fr); }
.inline-upload { align-items: flex-start; flex-direction: column; }
.live-gallery { grid-template-columns: 1fr 1fr; }
.live-gallery .gallery-primary { grid-column: span 2; }
.live-gallery figure.caption-below { grid-column: span 2; }
.live-gallery .photo-caption-note { --caption-quote-gutter: 40px; max-width: 84%; padding: 14px 16px 14px var(--caption-quote-gutter); font-size: .9rem; }
.live-gallery .photo-caption-note::before { left: 0; top: 7px; font-size: 2.2rem; }
.comment-layout .tribute-grid { grid-template-columns: 1fr; }
.qr-card { grid-template-columns: 1fr; padding: 30px 24px; }
.qr-card-personalised { justify-items: start; }
.qr-keepsake { width: min(310px, 100%); padding: 24px 18px 22px; }
.qr-art .qr-code img, .qr-art .qr-code canvas { width: 100%; height: 100%; }
.qr-code { width: max-content; max-width: 100%; }
.qr-theme-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
.hero-image-wrap { height: 390px; }
.memory-note { width: 235px; }
.footer-top { grid-template-columns: 1fr; }
.footer-brand { grid-column: auto; }
.feature-wide { display: block; }
.feature-wide .feature-icon { margin-bottom: 30px; }
.memorial-actions .icon-button:first-child { display: none; }
}
/* Homepage refresh: shorter, more product-led marketing page */
.home-hero { background: radial-gradient(circle at 72% 18%, rgba(223,157,120,.18), transparent 32%), linear-gradient(135deg, var(--cream), #f9f6ee 58%, var(--sage-light)); }
.home-hero-grid { min-height: 650px; grid-template-columns: .98fr 1.02fr; gap: 70px; padding-top: 72px; padding-bottom: 54px; }
.home-hero h1 { max-width: 710px; font-size: clamp(3.7rem, 4.7vw, 4.9rem); line-height: .94; }
.home-hero h1 span { display: block; }
.home-hero .hero-intro { max-width: 585px; font-size: 1.08rem; }
.hero-feature-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0 0; padding: 0; list-style: none; }
.hero-feature-list li { padding: 8px 12px; border: 1px solid rgba(47,85,72,.16); border-radius: 999px; background: rgba(255,253,248,.62); color: #56625d; font-size: .72rem; font-weight: 700; }
.home-showcase { position: relative; padding: 18px 86px 40px 18px; }
.showcase-browser { overflow: hidden; position: relative; border: 1px solid rgba(35,49,44,.13); border-radius: 18px; background: var(--paper); box-shadow: 0 34px 90px rgba(31,50,44,.18); }
.showcase-browser .preview-bar { height: 38px; background: #ebe4da; }
.showcase-browser .preview-bar span { font-size: .58rem; }
.showcase-cover { position: relative; display: grid; min-height: 215px; place-items: center; background-size: cover; background-position: center; }
.showcase-cover::before { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(250,248,242,.04), rgba(250,248,242,.88)); }
.showcase-cover img { position: relative; width: 138px; height: 164px; margin-top: 24px; border: 6px solid var(--paper); border-radius: 50% 50% 5px 5px; object-fit: cover; box-shadow: 0 14px 28px rgba(31,45,39,.18); }
.showcase-portrait-framed { z-index: 1; width: 158px; margin: 22px auto 0; filter: drop-shadow(0 17px 25px rgba(31,45,39,.2)); }
.showcase-cover .showcase-portrait-framed .portrait-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 0; box-shadow: none; -webkit-mask: var(--frame-mask) center / 100% 100% no-repeat; mask: var(--frame-mask) center / 100% 100% no-repeat; }
.showcase-cover .showcase-portrait-framed .portrait { display: block; position: static; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); transform: scale(var(--portrait-zoom, 1)); transform-origin: var(--focus-x, 50%) var(--focus-y, 50%); background: var(--sage-light); }
.showcase-content { padding: 20px 36px 26px; text-align: center; }
.showcase-content p { margin: 0 0 5px; color: #76807b; font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.showcase-content h2 { margin: 0 0 3px; font-size: clamp(2rem, 3.1vw, 3rem); }
.showcase-content > span { color: #72807a; font-family: var(--serif); font-size: .92rem; }
.showcase-tabs { display: flex; justify-content: center; gap: 18px; margin-top: 24px; padding-top: 15px; border-top: 1px solid var(--line); color: #62706a; font-size: .64rem; }
.showcase-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 14px 14px; }
.showcase-gallery figure { overflow: hidden; position: relative; aspect-ratio: 4 / 3; margin: 0; border-radius: 8px; background: var(--sage-light); }
.showcase-gallery img { width: 100%; height: 100%; object-fit: cover; }
.showcase-gallery img.showcase-gallery-focus-lower { object-position: center 22%; }
.showcase-gallery figcaption { position: absolute; left: 50%; bottom: 8px; width: max-content; max-width: 82%; padding: 8px 12px; background: var(--paper); color: var(--ink); box-shadow: 0 10px 22px rgba(31,45,39,.2); transform: translateX(-50%) rotate(-1.5deg); font-family: var(--serif); font-size: .74rem; }
.floating-feature-card { position: absolute; z-index: 2; width: 205px; padding: 18px; border: 1px solid rgba(35,49,44,.12); border-radius: 14px; background: rgba(255,253,248,.96); box-shadow: 0 22px 45px rgba(31,50,44,.16); }
.floating-feature-card small { display: block; margin-bottom: 8px; color: var(--forest); font-size: .6rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.floating-feature-card p { margin: 0 0 12px; color: #52615b; font-size: .78rem; line-height: 1.45; }
.floating-feature-card span { color: var(--forest); font-size: .68rem; font-weight: 800; }
.writing-mini { left: -10px; bottom: 70px; transform: rotate(-2deg); }
.qr-mini { right: 0; top: 48px; width: 154px; text-align: center; transform: rotate(2deg); }
.mini-qr { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 96px; height: 96px; margin: 8px auto 12px; padding: 7px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mini-qr i { border-radius: 1px; background: rgba(35,49,44,.12); }
.mini-qr i:nth-child(2n), .mini-qr i:nth-child(5n), .mini-qr i:nth-child(17), .mini-qr i:nth-child(25), .mini-qr i:nth-child(41) { background: var(--forest-dark); }
.real-mini-qr { display: flex; align-items: center; justify-content: center; gap: 0; grid-template-columns: none; overflow: hidden; padding: 8px; }
.real-mini-qr img, .real-mini-qr canvas { display: block; width: 100% !important; height: 100% !important; border-radius: 4px; }
.home-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.home-proof-grid > div { padding: 24px 22px; border-right: 1px solid var(--line); }
.home-proof-grid > div:last-child { border-right: 0; }
.home-proof-grid strong { display: block; margin-bottom: 5px; font-family: var(--serif); font-size: 1.08rem; font-weight: 400; }
.home-proof-grid span { color: #707b75; font-size: .72rem; }
.home-features { background: var(--paper); }
.home-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.home-feature-card { min-height: 245px; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: #faf8f2; }
.home-feature-card span { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; margin-bottom: 44px; border-radius: 50%; background: var(--sage-light); color: var(--forest); font-size: .68rem; font-weight: 800; }
.home-feature-card h3 { margin-bottom: 10px; font-family: var(--serif); font-size: 1.72rem; font-weight: 400; }
.home-feature-card p { margin: 0; color: #65716b; font-size: .82rem; }
.home-feature-card-dark { background: var(--forest); color: #fff; }
.home-feature-card-dark span { background: rgba(255,255,255,.12); color: var(--apricot-light); }
.home-feature-card-dark p { color: rgba(255,255,255,.72); }
.assistant-section { overflow: hidden; background: linear-gradient(135deg, var(--sage-light), #f4efe5); }
.assistant-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; align-items: center; }
.assistant-copy > p:not(.eyebrow) { max-width: 540px; color: #52615b; font-size: 1rem; }
.assistant-copy .tick-list { max-width: 520px; margin-top: 28px; margin-bottom: 0; }
.assistant-mock { position: relative; display: grid; grid-template-columns: 1fr auto 1.15fr; gap: 18px; align-items: center; padding: 34px; border: 1px solid rgba(35,49,44,.12); border-radius: 22px; background: rgba(255,253,248,.72); box-shadow: var(--shadow); }
.assistant-panel { min-height: 235px; padding: 26px; border-radius: 16px; background: var(--paper); box-shadow: 0 12px 32px rgba(31,50,44,.09); }
.assistant-panel small { display: block; margin-bottom: 18px; color: var(--forest); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.assistant-panel p { margin: 0; color: #52615b; font-size: .88rem; line-height: 1.75; }
.assistant-draft { background: var(--forest-dark); color: #fff; }
.assistant-draft small { color: var(--apricot-light); }
.assistant-draft p { color: rgba(255,255,255,.82); font-family: var(--serif); font-size: 1.05rem; }
.assistant-arrow { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--apricot); color: var(--forest-dark); font-weight: 800; }
.compact-steps { background: var(--cream); }
.compact-steps .section-heading.centered { margin-bottom: 44px; }
.compact-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.compact-step { padding: 28px; border-top: 3px solid var(--apricot); border-radius: 14px; background: var(--paper); }
.compact-step span { display: block; margin-bottom: 32px; color: var(--apricot); font-size: .75rem; font-weight: 800; }
.compact-step h3 { margin-bottom: 8px; font-family: var(--serif); font-size: 1.55rem; font-weight: 400; }
.compact-step p { margin: 0; color: #66716c; font-size: .82rem; }
.example-pricing-section { background: var(--paper); }
.example-pricing-grid { display: grid; grid-template-columns: .55fr 1.45fr; gap: 20px; align-items: stretch; }
.example-card-home { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding: 42px; border-radius: 18px; background: var(--forest-dark); color: #fff; }
.example-card-home h2 { margin-bottom: 18px; font-size: clamp(2.5rem, 4vw, 4rem); }
.example-card-home p:not(.eyebrow) { color: rgba(255,255,255,.72); }
.example-card-home .button { align-self: flex-start; margin-top: 24px; }
.pricing-grid-home { max-width: none; }
@media (max-width: 980px) {
.home-hero-grid { grid-template-columns: 1fr; gap: 44px; }
.home-showcase { max-width: 760px; padding-right: 76px; }
.home-proof-grid { grid-template-columns: repeat(2, 1fr); }
.home-proof-grid > div:nth-child(2) { border-right: 0; }
.home-proof-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.home-feature-grid, .compact-step-grid { grid-template-columns: 1fr 1fr; }
.assistant-grid, .example-pricing-grid { grid-template-columns: 1fr; }
.assistant-mock { grid-template-columns: 1fr; }
.assistant-arrow { margin-inline: auto; transform: rotate(90deg); }
}
@media (max-width: 720px) {
.home-hero-grid { padding-top: 46px; }
.home-hero h1 { font-size: clamp(3.25rem, 15vw, 4.75rem); }
.home-showcase { padding: 0 0 90px; }
.showcase-content { padding-inline: 20px; }
.showcase-tabs { gap: 12px; font-size: .58rem; }
.showcase-gallery { grid-template-columns: 1fr 1fr; }
.showcase-gallery figure:first-child { display: none; }
.writing-mini { left: 10px; bottom: 26px; width: min(220px, 62%); }
.qr-mini { top: auto; right: 10px; bottom: 10px; width: 132px; }
.mini-qr { width: 78px; height: 78px; }
.home-proof-grid, .home-feature-grid, .compact-step-grid, .pricing-grid-home { grid-template-columns: 1fr; }
.home-proof-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
.home-proof-grid > div:last-child { border-bottom: 0; }
.home-feature-card { min-height: auto; padding: 26px; }
.home-feature-card span { margin-bottom: 26px; }
.assistant-mock { padding: 18px; }
.assistant-panel { min-height: auto; padding: 22px; }
.example-card-home { padding: 32px 24px; }
}
@media (max-width: 430px) {
.site-header .brand-logo, .auth-header .brand-logo, .account-header .brand-logo, .create-header .brand-logo { height: 52px; }
.showcase-cover { min-height: 180px; }
.showcase-cover img { width: 112px; height: 136px; }
.showcase-portrait-framed { width: 124px; margin-top: 18px; }
.showcase-content h2 { font-size: 2rem; }
.floating-feature-card { padding: 14px; }
.floating-feature-card p { display: none; }
}
/* ============================================================
Funeral-director partner area (portal + landing page)
============================================================ */
/* --- Director portal chrome --- */
.director-portal .account-header nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.director-portal .account-header nav a { color: var(--forest, #2f4132); text-decoration: none; font-size: .85rem; font-weight: 500; }
.director-portal .account-header nav a.director-nav-active { text-decoration: underline; text-underline-offset: 5px; }
.director-main { padding-bottom: 30px; }
.director-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin: 26px 0 22px; }
.director-page-head h1 { font-family: var(--serif, 'Newsreader', serif); font-weight: 400; font-size: 1.9rem; }
.director-head-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.director-status-banner { margin: 18px 0 0; padding: 14px 18px; border-radius: 8px; font-size: .85rem; background: #f7ecd8; border: 1px solid #e2ce9f; color: #6b5423; }
.director-status-suspended, .director-status-rejected { background: #f6e2dc; border-color: #dcb3a6; color: #7c3a28; }
.director-flash { margin: 18px 0 0; padding: 13px 18px; border-radius: 8px; font-size: .85rem; }
.form-success.director-flash { background: #e5efe4; border: 1px solid #b9d0b6; color: #34532f; }
.form-errors.director-flash { background: #f6e2dc; border: 1px solid #dcb3a6; color: #7c3a28; }
.director-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 10px 0 26px; }
.director-stat { background: #fff; border: 1px solid rgba(47, 65, 50, .12); border-radius: 12px; padding: 20px 22px; }
.director-stat .num { display: block; font-family: var(--serif, 'Newsreader', serif); font-size: 2.1rem; color: var(--forest, #2f4132); }
.director-stat .lbl { display: block; margin-top: 2px; color: #71796f; font-size: .74rem; }
.director-panel { background: #fff; border: 1px solid rgba(47, 65, 50, .12); border-radius: 14px; padding: 26px 28px; margin-bottom: 22px; }
.director-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.director-panel-head h2 { font-family: var(--serif, 'Newsreader', serif); font-weight: 400; font-size: 1.25rem; }
.director-promise { background: #f2f5f0; border-color: rgba(47, 65, 50, .16); }
.director-promise p { color: #4d5f54; font-size: .9rem; max-width: 70ch; }
.director-empty { color: #71796f; font-size: .88rem; padding: 8px 0 4px; }
.director-footnote { color: #8a9088; font-size: .78rem; max-width: 78ch; margin-top: 6px; }
.director-muted { color: #8a9088; font-size: .82rem; }
.director-table-wrap { overflow-x: auto; }
.director-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.director-table th { text-align: left; padding: 9px 12px; border-bottom: 1.5px solid rgba(47, 65, 50, .25); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #71796f; white-space: nowrap; }
.director-table td { padding: 11px 12px; border-bottom: 1px solid rgba(47, 65, 50, .08); vertical-align: top; }
.director-table .num-col { text-align: right; }
.director-pos { color: #34532f; font-weight: 600; }
.director-neg { color: #7c3a28; font-weight: 600; }
.director-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .68rem; font-weight: 600; letter-spacing: .04em; background: #edeae1; color: #5c5c50; }
.director-badge-pending { background: #f7ecd8; color: #6b5423; }
.director-badge-claimed, .director-badge-approved, .director-badge-paid, .director-badge-active { background: #e5efe4; color: #34532f; }
.director-badge-expired, .director-badge-cancelled, .director-badge-disabled { background: #edeae1; color: #6f6f63; }
.director-badge-suspended, .director-badge-rejected, .director-badge-failed, .director-badge-refunded { background: #f6e2dc; color: #7c3a28; }
.director-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.director-filter a { padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(47, 65, 50, .18); color: var(--forest, #2f4132); text-decoration: none; font-size: .78rem; }
.director-filter a.on { background: var(--forest, #2f4132); color: #fff; border-color: var(--forest, #2f4132); }
.director-inline-form { display: flex; gap: 8px; }
.director-action { background: none; border: 1px solid rgba(47, 65, 50, .25); border-radius: 6px; padding: 5px 12px; font-size: .74rem; cursor: pointer; color: var(--forest, #2f4132); }
.director-action:hover { background: #f2f5f0; }
.director-action-danger { color: #7c3a28; border-color: rgba(124, 58, 40, .35); }
.director-action-danger:hover { background: #f6e2dc; }
.director-credit-pill { background: #e5efe4; color: #34532f; border-radius: 999px; padding: 8px 18px; font-size: .8rem; font-weight: 600; }
.director-form .field { margin-bottom: 16px; max-width: 560px; }
.director-form input, .director-form select { width: 100%; }
.director-field-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; max-width: 560px; }
.director-pack-row { display: grid; grid-template-columns: repeat(2, minmax(220px, 300px)); gap: 20px; }
.director-pack { border: 1px solid rgba(47, 65, 50, .15); border-radius: 14px; padding: 24px; text-align: center; }
.director-pack-qty { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #71796f; }
.director-pack-price { font-family: var(--serif, 'Newsreader', serif); font-size: 2.3rem; color: var(--forest, #2f4132); margin: 6px 0 2px; }
.director-pack-price span { font-size: .8rem; color: #8a9088; }
.director-pack-each { color: #8a9088; font-size: .78rem; margin-bottom: 16px; }
.director-terms-box { background: #f7f4ec; border: 1px solid #e4dcc6; border-radius: 10px; padding: 16px 18px; font-size: .8rem; color: #5c5c50; line-height: 1.65; margin: 8px 0 20px; }
.director-terms-box .director-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-weight: 600; color: #3c4a40; }
.director-terms-box .director-check input { margin-top: 3px; }
.director-register-form { max-width: 560px; }
.director-auth-card { max-width: 640px; }
.field-optional { color: #9aa096; font-weight: 400; font-size: .78em; }
.claim-accept-box { background: #f2f5f0; border: 1px solid rgba(47, 65, 50, .16); border-radius: 14px; padding: 26px 28px; margin-top: 26px; }
.claim-small { margin-top: 14px; color: #8a9088; font-size: .8rem; }
@media (max-width: 860px) {
.director-stat-grid { grid-template-columns: repeat(2, 1fr); }
.director-pack-row { grid-template-columns: 1fr; }
.director-field-row { grid-template-columns: 1fr; }
}
/* --- Funeral-director landing page --- */
.fd-hero { text-align: left; }
.fd-hero h1 { max-width: 22ch; }
.fd-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.fd-trust { list-style: none; display: flex; gap: 10px 26px; flex-wrap: wrap; margin-top: 26px; padding: 0; }
.fd-trust li { color: #5c6e63; font-size: .8rem; padding-left: 22px; position: relative; }
.fd-trust li::before { content: "\2713"; position: absolute; left: 0; color: var(--forest, #2f4132); font-weight: 700; }
.fd-h2 { font-family: var(--serif, 'Newsreader', serif); font-weight: 400; font-size: 1.9rem; text-align: center; margin-bottom: 30px; }
.fd-sub { text-align: center; color: #71796f; margin: -18px 0 28px; font-size: .9rem; }
.fd-alt { background: #f2f0e8; }
.fd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fd-step { background: #fff; border: 1px solid rgba(47, 65, 50, .12); border-radius: 14px; padding: 28px; }
.fd-step-num { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--forest, #2f4132); color: #fff; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 14px; }
.fd-step h3, .fd-benefit h3 { font-family: var(--serif, 'Newsreader', serif); font-weight: 500; font-size: 1.1rem; margin-bottom: 8px; }
.fd-step p, .fd-benefit p { color: #5c6e63; font-size: .87rem; }
.fd-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fd-benefit { background: #fff; border: 1px solid rgba(47, 65, 50, .1); border-radius: 12px; padding: 22px 24px; }
.fd-family-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.fd-lede { color: #5c6e63; margin-bottom: 18px; }
.fd-family-list { list-style: none; padding: 0; margin-bottom: 22px; }
.fd-family-list li { padding: 8px 0 8px 26px; position: relative; border-bottom: 1px solid rgba(47, 65, 50, .08); font-size: .9rem; }
.fd-family-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--forest, #2f4132); font-weight: 700; }
.fd-example img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 22px 50px rgba(47, 65, 50, .18); }
.fd-example figcaption { color: #8a9088; font-size: .76rem; margin-top: 10px; text-align: center; }
.fd-dash { max-width: 780px; margin: 0 auto; background: #fbf9f3; border: 1px solid rgba(47, 65, 50, .18); border-radius: 16px; box-shadow: 0 30px 60px rgba(47, 65, 50, .16); overflow: hidden; }
.fd-dash-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; background: var(--forest, #2f4132); color: #fff; }
.fd-dash-brand { font-size: .8rem; font-weight: 600; }
.fd-dash-brand em { font-style: normal; opacity: .7; font-weight: 400; }
.fd-dash-nav i { font-style: normal; font-size: .7rem; opacity: .75; margin-left: 16px; }
.fd-dash-nav i:first-child { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.fd-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 22px; }
.fd-dash-stats div { background: #fff; border: 1px solid rgba(47, 65, 50, .1); border-radius: 10px; padding: 14px 16px; }
.fd-dash-stats strong { display: block; font-family: var(--serif, 'Newsreader', serif); font-size: 1.7rem; color: var(--forest, #2f4132); }
.fd-dash-stats span { color: #71796f; font-size: .68rem; }
.fd-dash-tablewrap { padding: 0 22px 24px; }
.fd-dash-heading { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #71796f; margin-bottom: 8px; }
.fd-dash-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; font-size: .78rem; }
.fd-dash-table th { text-align: left; padding: 9px 14px; background: #f2f0e8; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: #71796f; }
.fd-dash-table td { padding: 10px 14px; border-top: 1px solid rgba(47, 65, 50, .07); }
.fd-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .66rem; font-weight: 700; }
.fd-pill-claimed { background: #e5efe4; color: #34532f; }
.fd-pill-pending { background: #f7ecd8; color: #6b5423; }
.fd-pricing { display: grid; grid-template-columns: repeat(2, minmax(240px, 320px)); gap: 26px; justify-content: center; }
.fd-pack { background: #fff; border: 1px solid rgba(47, 65, 50, .14); border-radius: 16px; padding: 34px 30px; text-align: center; position: relative; }
.fd-pack-best { border-color: var(--forest, #2f4132); box-shadow: 0 18px 40px rgba(47, 65, 50, .14); }
.fd-pack-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--forest, #2f4132); color: #fff; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.fd-pack-qty { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #71796f; }
.fd-pack-price { font-family: var(--serif, 'Newsreader', serif); font-size: 2.8rem; color: var(--forest, #2f4132); margin: 8px 0 2px; }
.fd-pack-price span { font-size: .85rem; color: #8a9088; }
.fd-pack-each { color: #8a9088; font-size: .78rem; margin-bottom: 20px; }
.fd-price-notes { list-style: none; padding: 0; display: flex; gap: 8px 30px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.fd-price-notes li { color: #71796f; font-size: .78rem; padding-left: 20px; position: relative; }
.fd-price-notes li::before { content: "\00b7"; position: absolute; left: 6px; font-weight: 700; color: var(--forest, #2f4132); }
.fd-promise-band { background: var(--forest, #2f4132); color: #fff; text-align: center; }
.fd-promise-band h2 { font-family: var(--serif, 'Newsreader', serif); font-weight: 400; font-size: 1.8rem; max-width: 24ch; margin: 0 auto 16px; }
.fd-promise-band p { color: rgba(255, 255, 255, .82); max-width: 72ch; margin: 0 auto; font-size: .92rem; }
.fd-faq-item { border-bottom: 1px solid rgba(47, 65, 50, .12); padding: 4px 0; }
.fd-faq-item summary { cursor: pointer; padding: 14px 6px; font-weight: 600; font-size: .95rem; color: var(--forest, #2f4132); }
.fd-faq-item summary:hover { color: #1d3d34; }
.fd-faq-item p { padding: 0 6px 16px; color: #5c6e63; font-size: .88rem; max-width: 72ch; }
.fd-final { text-align: center; }
.fd-final h2 { font-family: var(--serif, 'Newsreader', serif); font-weight: 400; font-size: 1.9rem; margin-bottom: 12px; }
.fd-final p { color: #71796f; margin-bottom: 8px; }
.fd-small { margin-top: 18px; font-size: .82rem; color: #8a9088; }
@media (max-width: 900px) {
.fd-steps, .fd-benefits { grid-template-columns: 1fr; }
.fd-family-grid { grid-template-columns: 1fr; }
.fd-pricing { grid-template-columns: 1fr; }
.fd-dash-stats { grid-template-columns: 1fr; }
}
/* ============================================================
Southern Light shared theme
Calm coastal colour, editorial type, fine rules and open space.
Homepage-specific presentation remains scoped in index.php.
============================================================ */
body:not(.southern-light-home) {
background: var(--sl-sky);
color: var(--sl-ink);
font-weight: 300;
}
body:not(.southern-light-home) h1,
body:not(.southern-light-home) h2,
body:not(.southern-light-home) h3 {
letter-spacing: -.015em;
line-height: 1.12;
}
body:not(.southern-light-home) .eyebrow,
body:not(.southern-light-home) .content-overline {
color: var(--sl-functional);
font-weight: 600;
}
body:not(.southern-light-home) .button,
body:not(.southern-light-home) .icon-button,
body:not(.southern-light-home) .button-secondary {
min-height: 46px;
padding: 11px 24px;
gap: 10px;
border: 1px solid var(--sl-deep);
border-radius: 999px;
background: var(--sl-deep);
box-shadow: none;
color: #fff;
font-size: .78rem;
font-weight: 600;
line-height: 1.2;
transform: none;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
body:not(.southern-light-home) .button:hover,
body:not(.southern-light-home) .icon-button:hover,
body:not(.southern-light-home) .button-secondary:hover {
border-color: var(--sl-tide);
background: var(--sl-tide);
box-shadow: none;
color: #fff;
transform: none;
}
body:not(.southern-light-home) .button-small {
min-height: 40px;
padding: 9px 18px;
font-size: .72rem;
}
body:not(.southern-light-home) .button-cream,
body:not(.southern-light-home) .button-secondary {
border-color: var(--sl-deep);
background: transparent;
color: var(--sl-deep);
}
body:not(.southern-light-home) .button-cream:hover,
body:not(.southern-light-home) .button-secondary:hover {
border-color: var(--sl-deep);
background: var(--sl-deep);
color: #fff;
}
body:not(.southern-light-home) .text-link,
body:not(.southern-light-home) .auth-switch a,
body:not(.southern-light-home) .auth-links a,
body:not(.southern-light-home) .field-label-row a {
color: var(--sl-functional);
}
body:not(.southern-light-home) .site-header:not(.memorial-topbar),
body:not(.southern-light-home) .site-header:not(.memorial-topbar).solid,
body:not(.southern-light-home) .site-header:not(.memorial-topbar).scrolled,
body:not(.southern-light-home) .auth-header,
body:not(.southern-light-home) .account-header,
body:not(.southern-light-home) .create-header {
height: 82px;
border-bottom: 1px solid var(--sl-line);
background: rgba(238, 240, 236, .96);
backdrop-filter: blur(12px);
}
body:not(.southern-light-home) .site-header .brand,
body:not(.southern-light-home) .auth-header .brand,
body:not(.southern-light-home) .account-header .brand,
body:not(.southern-light-home) .create-header .brand {
position: static;
width: auto;
height: auto;
flex: 0 0 auto;
}
body:not(.southern-light-home) .site-header .brand-logo,
body:not(.southern-light-home) .auth-header .brand-logo,
body:not(.southern-light-home) .account-header .brand-logo,
body:not(.southern-light-home) .create-header .brand-logo {
position: static;
width: auto;
height: 76px;
max-width: none;
transform: none;
}
body:not(.southern-light-home) .auth-header .brand-logo,
body:not(.southern-light-home) .account-header .brand-logo,
body:not(.southern-light-home) .create-header .brand-logo {
width: auto;
height: 68px;
}
body:not(.southern-light-home) .content-main {
padding-top: 82px;
}
@media (min-width: 981px) {
body:not(.southern-light-home) .site-header:not(.memorial-topbar) .main-nav {
min-height: 44px;
justify-content: flex-end;
gap: 22px;
border-block: 2px solid var(--sl-deep);
color: var(--sl-soft);
font-size: .64rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
}
body:not(.southern-light-home) .site-header:not(.memorial-topbar) .main-nav > a:first-child {
margin-left: 18px;
}
}
/* Editorial information pages */
body.content-page:not(.southern-light-home) {
background: var(--sl-sky);
}
body:not(.southern-light-home) .content-hero {
padding: 82px 0 70px;
border-bottom: 1px solid var(--sl-line);
background: var(--sl-sky-2);
}
body:not(.southern-light-home) .content-hero h1 {
max-width: 22ch;
margin-bottom: 20px;
font-size: clamp(2.75rem, 5vw, 4.7rem);
}
body:not(.southern-light-home) .content-hero p:not(.eyebrow),
body:not(.southern-light-home) .content-narrow p,
body:not(.southern-light-home) .content-list {
color: var(--sl-soft);
}
body:not(.southern-light-home) .content-hero-visual {
border: 1px solid var(--sl-line);
border-radius: 0;
background: var(--sl-sand);
box-shadow: none;
transform: none;
}
body:not(.southern-light-home) .content-hero-visual img,
body:not(.southern-light-home) .fd-example img {
border-radius: 0;
box-shadow: none;
filter: saturate(.8);
}
body:not(.southern-light-home) .content-section {
padding: 72px 0 96px;
background: var(--sl-sky);
}
body:not(.southern-light-home) .content-narrow h2 {
padding-top: 10px;
border-top: 1px solid var(--sl-line);
font-size: clamp(1.8rem, 3vw, 2.6rem);
}
body:not(.southern-light-home) .content-narrow h2:first-child {
border-top: 0;
}
body:not(.southern-light-home) .content-cta-card {
border: 1px solid #dccfb8;
border-radius: 0;
background: var(--sl-sand);
box-shadow: none;
}
body:not(.southern-light-home) .final-cta {
border-block: 1px solid var(--sl-line);
background: var(--sl-sand);
color: var(--sl-ink);
}
body:not(.southern-light-home) .final-cta h2 {
font-size: clamp(2.3rem, 4vw, 3.8rem);
}
body:not(.southern-light-home) .site-footer {
padding: 30px 0 40px;
border-top: 1px solid var(--sl-line);
background: var(--sl-sky);
color: var(--sl-soft);
}
body:not(.southern-light-home) .site-footer .footer-bottom {
align-items: center;
padding-top: 0;
border-top: 0;
font-size: .72rem;
}
body:not(.southern-light-home) .site-footer a:hover {
color: var(--sl-ink);
}
/* Authentication and account surfaces */
body.auth-page,
body.account-page,
body.create-page {
background: var(--sl-sky);
}
body:not(.southern-light-home) .auth-shell {
min-height: calc(100vh - 82px);
}
body:not(.southern-light-home) .auth-card {
background: var(--sl-sky);
}
body:not(.southern-light-home) .auth-card h1,
body:not(.southern-light-home) .account-welcome h1,
body:not(.southern-light-home) .manage-heading h1,
body:not(.southern-light-home) .payment-success-panel h1 {
font-size: clamp(2.65rem, 5vw, 4.5rem);
}
body:not(.southern-light-home) .auth-lead,
body:not(.southern-light-home) .account-welcome p:not(.eyebrow),
body:not(.southern-light-home) .manage-heading p:last-child,
body:not(.southern-light-home) .account-panel p {
color: var(--sl-soft);
}
body:not(.southern-light-home) .auth-aside {
background:
linear-gradient(180deg, rgba(47, 60, 60, .2), rgba(47, 60, 60, .88)),
url("images/memory-album.webp") center / cover;
}
body:not(.southern-light-home) .auth-aside::before {
content: none;
}
body:not(.southern-light-home) .auth-aside svg {
fill: #c9d7d2;
}
body:not(.southern-light-home) .auth-footer {
padding: 20px 24px;
border-top: 1px solid var(--sl-line);
background: var(--sl-sky);
color: var(--sl-soft);
font-size: .74rem;
text-align: center;
}
/* Marketing privacy choice */
.marketing-consent-banner {
position: fixed;
z-index: 1200;
right: 18px;
bottom: 18px;
left: 18px;
color: #f7f2e8;
}
.marketing-consent-inner {
width: min(100%, 880px);
margin: 0 auto;
padding: 18px 20px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 14px;
background: #213b33;
box-shadow: 0 16px 44px rgba(20, 34, 29, .24);
}
.marketing-consent-banner .marketing-consent-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px 22px;
align-items: center;
}
.marketing-consent-inner strong {
display: block;
margin-bottom: 4px;
font-family: var(--serif);
font-size: 1.15rem;
font-weight: 500;
}
.marketing-consent-inner p {
margin: 0;
color: inherit;
font-size: .84rem;
line-height: 1.55;
}
.marketing-consent-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.marketing-consent-button {
min-height: 44px;
padding: 9px 16px;
border: 1px solid currentColor;
border-radius: 999px;
background: transparent;
color: inherit;
font: inherit;
font-size: .78rem;
font-weight: 700;
cursor: pointer;
}
.marketing-consent-button:hover,
.marketing-consent-button:focus-visible,
.marketing-consent-button[aria-current="true"] {
background: #f7f2e8;
color: #213b33;
}
.marketing-consent-button:focus-visible,
.marketing-consent-banner a:focus-visible {
outline: 3px solid #e58a60;
outline-offset: 3px;
}
.marketing-consent-banner a {
color: inherit;
font-size: .76rem;
text-decoration: underline;
text-underline-offset: 3px;
}
.marketing-consent-settings {
margin: 22px 0 36px;
scroll-margin-top: 100px;
}
.marketing-consent-settings .marketing-consent-inner {
margin: 0;
color: #f7f2e8;
}
.marketing-consent-settings .marketing-consent-actions {
margin-top: 16px;
}
@media (max-width: 680px) {
.marketing-consent-banner {
right: 10px;
bottom: 10px;
left: 10px;
}
.marketing-consent-banner .marketing-consent-inner {
grid-template-columns: 1fr;
padding: 16px;
}
.marketing-consent-actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
body:not(.southern-light-home) .field input,
body:not(.southern-light-home) .field textarea,
body:not(.southern-light-home) .field select,
body:not(.southern-light-home) .date-select select,
body:not(.southern-light-home) .date-select input {
border-color: var(--sl-line);
border-radius: 0;
background-color: rgba(255, 253, 248, .78);
}
body:not(.southern-light-home) .field input:focus,
body:not(.southern-light-home) .field textarea:focus,
body:not(.southern-light-home) .field select:focus,
body:not(.southern-light-home) .date-select select:focus,
body:not(.southern-light-home) .date-select input:focus {
border-color: var(--sl-tide);
box-shadow: 0 0 0 2px rgba(93, 124, 118, .15);
}
body:not(.southern-light-home) .account-main,
body:not(.southern-light-home) .manage-main,
body:not(.southern-light-home) .director-main {
background: var(--sl-sky);
}
body:not(.southern-light-home) .account-panel,
body:not(.southern-light-home) .manage-panel,
body:not(.southern-light-home) .director-panel,
body:not(.southern-light-home) .director-stat,
body:not(.southern-light-home) .admin-stat,
body:not(.southern-light-home) .admin-table-wrap,
body:not(.southern-light-home) .admin-comment,
body:not(.southern-light-home) .fd-step,
body:not(.southern-light-home) .fd-benefit,
body:not(.southern-light-home) .fd-pack,
body:not(.southern-light-home) .fd-dash,
body:not(.southern-light-home) .fd-dash-stats div {
border-color: var(--sl-line);
border-radius: 0;
background: rgba(255, 253, 248, .5);
box-shadow: none;
}
body:not(.southern-light-home) .account-memorial-card {
border-color: var(--sl-line);
background: transparent;
transform: none;
}
body:not(.southern-light-home) .account-memorial-card:hover {
border-color: var(--sl-tide);
transform: none;
}
body:not(.southern-light-home) .account-panel-icon,
body:not(.southern-light-home) .auth-symbol {
background: var(--sl-sky-2);
color: var(--sl-tide);
}
body:not(.southern-light-home) .manage-tabs {
border-color: var(--sl-line);
background: rgba(238, 240, 236, .96);
}
body:not(.southern-light-home) .manage-tabs a,
body:not(.southern-light-home) .admin-tabs a,
body:not(.southern-light-home) .director-filter a {
color: var(--sl-functional);
font-weight: 600;
}
body:not(.southern-light-home) .editor-progress {
border: 1px solid var(--sl-line);
background: var(--sl-sky-2);
color: var(--sl-ink);
}
body:not(.southern-light-home) .editor-progress p:last-child {
color: var(--sl-soft);
}
body:not(.southern-light-home) .progress-ring {
background:
radial-gradient(circle at center, var(--sl-sky-2) 57%, transparent 59%),
conic-gradient(var(--sl-tide) calc(var(--progress) * 1%), rgba(44, 53, 53, .12) 0);
}
body:not(.southern-light-home) .admin-table th,
body:not(.southern-light-home) .fd-dash-table th {
background: var(--sl-sky-2);
}
body:not(.southern-light-home) .admin-btn,
body:not(.southern-light-home) .director-action {
border-radius: 999px;
}
/* Memorial creation */
body:not(.southern-light-home) .create-shell {
min-height: calc(100vh - 82px);
}
body:not(.southern-light-home) .create-aside {
border-right: 1px solid var(--sl-line);
background: var(--sl-sky-2);
color: var(--sl-ink);
}
body:not(.southern-light-home) .create-aside > p,
body:not(.southern-light-home) .progress-item {
color: var(--sl-soft);
}
body:not(.southern-light-home) .progress-item.active,
body:not(.southern-light-home) .progress-item.complete {
color: var(--sl-ink);
}
body:not(.southern-light-home) .progress-item.active > span,
body:not(.southern-light-home) .progress-item.complete > span {
border-color: var(--sl-tide);
background: var(--sl-tide);
color: #fff;
}
body:not(.southern-light-home) .form-step h2 {
font-size: clamp(2.3rem, 4vw, 3.6rem);
}
body:not(.southern-light-home) .plan-choice,
body:not(.southern-light-home) .choice-card,
body:not(.southern-light-home) .photo-upload,
body:not(.southern-light-home) .publish-note {
border-color: var(--sl-line);
background: rgba(255, 253, 248, .42);
box-shadow: none;
}
body:not(.southern-light-home) .plan-choice:has(input:checked),
body:not(.southern-light-home) .choice-card:has(input:checked) {
border-color: var(--sl-tide);
background: var(--sl-sky-2);
box-shadow: inset 0 0 0 1px var(--sl-tide);
}
/* Funeral-director landing and partner portal */
body:not(.southern-light-home) .fd-alt,
body:not(.southern-light-home) .director-promise {
background: var(--sl-sky-2);
}
body:not(.southern-light-home) .fd-step,
body:not(.southern-light-home) .fd-benefit {
border-width: 1px 0 0;
padding-inline: 0;
}
body:not(.southern-light-home) .fd-pack-best {
border-color: var(--sl-tide);
}
body:not(.southern-light-home) .fd-promise-band {
border-block: 1px solid var(--sl-line);
background: var(--sl-sand);
color: var(--sl-ink);
}
body:not(.southern-light-home) .fd-promise-band p {
color: var(--sl-soft);
}
/* Public memorial: cover begins at the top, navigation floats above it. */
body.memorial-page {
background: var(--sl-sky);
}
.memorial-page .site-header.memorial-topbar,
.memorial-page .site-header.memorial-topbar.scrolled {
position: absolute;
inset: 0 0 auto;
z-index: 50;
width: 100%;
height: 96px;
border: 0;
background: transparent;
backdrop-filter: none;
}
.memorial-page .memorial-topbar .nav-wrap {
width: 100%;
max-width: none;
margin: 0;
padding-inline: clamp(18px, 3vw, 46px);
}
body.memorial-page .memorial-topbar .brand-logo {
width: auto;
height: 76px;
filter:
drop-shadow(0 0 1px rgba(255, 253, 248, .98))
drop-shadow(0 1px 7px rgba(255, 253, 248, .82));
}
.memorial-page .memorial-actions {
margin-left: auto;
align-items: center;
gap: 26px;
}
.memorial-page .memorial-actions .button,
.memorial-page .memorial-actions .icon-button {
min-height: auto;
padding: 9px 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--sl-deep);
font-size: .68rem;
font-weight: 700;
letter-spacing: .1em;
line-height: 1.3;
text-shadow:
0 1px 1px rgba(255, 253, 248, .98),
0 0 7px rgba(255, 253, 248, .92),
0 0 15px rgba(255, 253, 248, .72);
text-transform: uppercase;
transform: none;
}
.memorial-page .memorial-actions .button:hover,
.memorial-page .memorial-actions .icon-button:hover {
border: 0;
background: transparent;
box-shadow: none;
color: var(--sl-tide);
transform: none;
}
.memorial-action-short {
display: none;
}
.memorial-page .memorial-hero .hero-inner {
padding: 154px 0 46px;
}
.memorial-page .memorial-hero h1 {
font-size: clamp(3rem, 5vw, 5.2rem);
}
.memorial-page .memorial-tabs {
border-color: var(--sl-line);
background: rgba(238, 240, 236, .72);
}
.memorial-page .memorial-tabs a {
color: var(--sl-soft);
font-weight: 600;
}
.memorial-page .memorial-content,
.memorial-page .gallery-section {
background: var(--sl-sky);
}
.memorial-page .timeline-section,
.memorial-page .tributes-section,
.memorial-page .qr-section {
background: var(--sl-sky-2);
}
.memorial-page .memorial-facts,
.memorial-page .tribute-card,
.memorial-page .comment-form-card,
.memorial-page .qr-card,
.memorial-page .live-timeline-item {
border: 1px solid var(--sl-line);
border-radius: 0;
background: rgba(255, 253, 248, .48);
box-shadow: none;
}
.memorial-page .memorial-facts {
border-top: 2px solid var(--sl-tide);
}
.memorial-page .live-timeline-item {
border-width: 2px 0 0;
border-top-color: var(--sl-tide);
}
.memorial-page .photo-caption-note {
border: 1px solid var(--sl-line);
box-shadow: none;
}
@media (max-width: 980px) {
body:not(.southern-light-home) .site-header:not(.memorial-topbar) .main-nav {
background: var(--sl-sky);
}
body.content-page .site-header > .nav-wrap > .main-nav {
position: static;
min-height: 0;
flex-direction: row;
align-items: center;
gap: 16px;
padding: 0;
background: transparent;
font-family: var(--sans);
font-size: .72rem;
transform: none;
}
body:not(.southern-light-home) .content-page .main-nav {
border-color: var(--sl-line);
border-radius: 0;
background: var(--sl-sky);
box-shadow: none;
}
body:not(.southern-light-home) .director-portal .account-header {
height: auto;
min-height: 82px;
}
body:not(.southern-light-home) .director-portal .account-header nav {
padding-block: 12px;
}
}
@media (max-width: 720px) {
body:not(.southern-light-home) .site-header:not(.memorial-topbar),
body:not(.southern-light-home) .site-header:not(.memorial-topbar).solid,
body:not(.southern-light-home) .site-header:not(.memorial-topbar).scrolled,
body:not(.southern-light-home) .auth-header,
body:not(.southern-light-home) .account-header,
body:not(.southern-light-home) .create-header {
height: 66px;
}
body:not(.southern-light-home) .site-header .brand-logo,
body:not(.southern-light-home) .auth-header .brand-logo,
body:not(.southern-light-home) .account-header .brand-logo,
body:not(.southern-light-home) .create-header .brand-logo {
width: auto;
height: 53px;
}
body:not(.southern-light-home) .content-main {
padding-top: 66px;
}
body:not(.southern-light-home) .content-hero {
padding: 58px 0 48px;
}
body:not(.southern-light-home) .auth-shell,
body:not(.southern-light-home) .create-shell {
min-height: calc(100vh - 66px);
}
body:not(.southern-light-home) .auth-card h1,
body:not(.southern-light-home) .account-welcome h1,
body:not(.southern-light-home) .manage-heading h1,
body:not(.southern-light-home) .payment-success-panel h1 {
font-size: clamp(2.45rem, 12vw, 3.5rem);
}
body:not(.southern-light-home) .account-header nav > a.button {
display: inline-flex;
}
body:not(.southern-light-home) .director-portal .account-header nav > a {
display: inline-flex;
}
body:not(.southern-light-home) .director-portal .account-header {
height: auto;
min-height: 66px;
}
body:not(.southern-light-home) .director-portal .account-header .container {
height: auto;
min-height: 66px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding-block: 10px;
}
body:not(.southern-light-home) .director-portal .account-header nav {
width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
padding: 0 0 4px;
}
body:not(.southern-light-home) .director-portal .account-header nav > * {
flex: 0 0 auto;
}
.memorial-page .site-header.memorial-topbar,
.memorial-page .site-header.memorial-topbar.scrolled {
height: 66px;
}
.memorial-page .memorial-topbar .nav-wrap {
padding-inline: 16px;
}
body.memorial-page .memorial-topbar .brand-logo {
width: auto;
height: 53px;
}
.memorial-page .memorial-actions .button,
.memorial-page .memorial-actions .icon-button {
min-height: auto;
padding: 9px 0;
font-size: .64rem;
}
.memorial-page .memorial-hero .hero-inner {
padding: 106px 0 36px;
}
}
@media (max-width: 520px) {
body.auth-page .auth-header {
height: 56px;
min-height: 56px;
}
body.memorial-page .memorial-topbar .brand-logo {
width: auto;
height: 45px;
}
.memorial-page .memorial-actions {
gap: 14px;
}
.memorial-page .memorial-actions .button,
.memorial-page .memorial-actions .icon-button {
min-height: auto;
padding: 9px 0;
font-size: .64rem;
}
.memorial-action-long {
display: none;
}
.memorial-action-short {
display: inline;
}
}
@media (max-width: 430px) {
body.auth-page .auth-header {
height: 50px;
min-height: 50px;
}
.memorial-page .memorial-actions .icon-button:first-child {
display: inline-flex;
}
body.memorial-page .memorial-topbar .brand-logo {
width: auto;
height: 42px;
}
}
/* ============================================================
Memorial editor refresh
A quieter, task-led Southern Light workspace. All selectors are
scoped to the manager so public memorial and account surfaces keep
their established layouts and behaviours.
============================================================ */
.manage-page {
--editor-rule: var(--sl-line);
--editor-wash: rgba(255, 253, 248, .52);
--editor-wash-strong: rgba(255, 253, 248, .78);
--editor-muted: var(--sl-soft);
--editor-action: var(--sl-functional);
}
.manage-page .manage-main {
padding: 48px 0 150px;
}
.manage-page .manage-heading {
align-items: center;
margin-bottom: 30px;
padding-bottom: 28px;
border-bottom: 1px solid var(--editor-rule);
}
.manage-page .manage-heading h1 {
max-width: 18ch;
margin-bottom: 6px;
font-size: clamp(2.75rem, 5vw, 4.4rem);
}
.manage-page .manage-heading .eyebrow {
margin-bottom: 12px;
}
.manage-page .fixed-address {
overflow-wrap: anywhere;
color: var(--editor-action);
font-weight: 500;
}
.manage-page .manage-tabs {
border-block: 1px solid var(--editor-rule);
background: rgba(238, 240, 236, .97);
backdrop-filter: blur(14px);
}
.manage-page .manage-tabs .container {
gap: 0;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
scroll-snap-type: x proximity;
}
.manage-page .manage-tabs [data-section-link] {
position: relative;
display: inline-flex;
min-height: 48px;
flex: 0 0 auto;
align-items: center;
padding: 0 18px;
border: 0;
color: var(--editor-muted);
font-size: .7rem;
font-weight: 600;
letter-spacing: .035em;
scroll-snap-align: start;
transition: color .18s ease, background-color .18s ease;
}
.manage-page .manage-tabs [data-section-link]::after {
position: absolute;
right: 18px;
bottom: -1px;
left: 18px;
height: 2px;
content: "";
background: transparent;
transition: background-color .18s ease;
}
.manage-page .manage-tabs [data-section-link]:hover {
border-color: transparent;
background-color: rgba(93, 124, 118, .07);
color: var(--sl-deep);
}
.manage-page .manage-tabs [data-section-link].is-active,
.manage-page .manage-tabs [data-section-link][aria-current="true"],
.manage-page .manage-tabs [data-section-link][aria-current="page"] {
background-color: rgba(255, 253, 248, .45);
color: var(--sl-deep);
}
.manage-page .manage-tabs [data-section-link].is-active::after,
.manage-page .manage-tabs [data-section-link][aria-current="true"]::after,
.manage-page .manage-tabs [data-section-link][aria-current="page"]::after {
background: var(--sl-tide);
}
.manage-page.has-section-tabs .editor-section {
display: none;
}
.manage-page.has-section-tabs .editor-section.is-active {
display: block;
animation: manage-section-in .2s ease both;
}
.manage-page.has-section-tabs .manage-grid.editor-section.is-active {
display: grid;
}
@keyframes manage-section-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.manage-page .manage-panel,
.manage-page .editor-status-panel,
.manage-page .appearance-preview-card,
.manage-page .editor-publish-dock {
border-color: var(--editor-rule);
border-radius: 0;
box-shadow: none;
}
.manage-page .manage-panel.editor-section {
margin-bottom: 24px;
padding: clamp(30px, 4.5vw, 54px);
background: var(--editor-wash);
}
.manage-page.has-section-tabs .manage-panel.editor-section.is-active {
margin-bottom: 0;
}
.manage-page .editor-section-heading {
grid-template-columns: 52px minmax(0, 1fr);
gap: 20px;
margin-bottom: 34px;
padding-bottom: 28px;
}
.manage-page .editor-section-heading > span {
width: 44px;
height: 44px;
border-color: var(--sl-tide);
color: var(--editor-action);
font-variant-numeric: tabular-nums;
}
.manage-page .editor-section-heading h2 {
margin: 2px 0 8px;
font-size: clamp(2.15rem, 4vw, 3.45rem);
}
.manage-page .editor-section-heading p:last-child {
max-width: 720px;
color: var(--editor-muted);
font-size: .82rem;
}
.manage-page .editor-fieldset {
margin-bottom: 32px;
padding-bottom: 30px;
border-color: var(--editor-rule);
}
.manage-page .editor-fieldset:last-child {
margin-bottom: 0;
}
.manage-page .editor-fieldset > h3,
.manage-page .timeline-add-form > h3 {
margin-bottom: 18px;
font-size: 1.55rem;
}
.manage-page .fieldset-help {
max-width: 72ch;
color: var(--editor-muted);
font-size: .76rem;
line-height: 1.65;
}
.manage-page .button-small,
.manage-page .text-button,
.manage-page .danger-link {
min-height: 44px;
}
.manage-page .text-button,
.manage-page .danger-link {
display: inline-flex;
align-items: center;
padding: 8px 2px;
font-size: .7rem;
line-height: 1.25;
text-underline-offset: 4px;
}
.manage-page .text-button:hover,
.manage-page .danger-link:hover {
text-decoration: underline;
}
.manage-page .ai-draft,
.manage-page .timeline-add-form,
.manage-page .timeline-edit-form,
.manage-page .timeline-delete-form,
.manage-page .inline-upload,
.manage-page .finalise-reminder {
border-radius: 0;
box-shadow: none;
}
.manage-page .ai-draft {
padding: 22px;
border-color: var(--editor-rule);
background: var(--sl-sky-2);
}
.manage-page .ai-draft-locked {
border-color: #d9cbb5;
background: var(--sl-sand);
}
/* Introductory status and task checklist */
.manage-page .editor-status-panel {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr);
gap: clamp(28px, 5vw, 68px);
align-items: center;
margin-bottom: 28px;
padding: clamp(28px, 4.5vw, 46px);
border: 1px solid var(--editor-rule);
background: var(--sl-sky-2);
}
.manage-page .editor-status-copy h2 {
max-width: 15ch;
margin: 4px 0 12px;
font-size: clamp(2rem, 3.4vw, 3rem);
}
.manage-page .editor-status-copy p:last-child {
max-width: 58ch;
margin-bottom: 0;
color: var(--editor-muted);
font-size: .82rem;
}
.manage-page .editor-checklist {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 24px;
margin: 0;
padding: 0;
border-top: 1px solid var(--editor-rule);
list-style: none;
}
.manage-page .editor-checklist li,
.manage-page .editor-checklist > a {
display: grid;
min-height: 52px;
grid-template-columns: 22px minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--editor-rule);
color: var(--sl-deep);
font-size: .76rem;
font-weight: 500;
}
.manage-page .editor-checklist li::before,
.manage-page .editor-checklist > a::before {
display: grid;
width: 18px;
height: 18px;
place-items: center;
border: 1px solid var(--sl-tide);
border-radius: 50%;
content: "";
color: #fff;
font-size: .62rem;
line-height: 1;
}
.manage-page .editor-checklist li.is-complete::before,
.manage-page .editor-checklist li[data-complete="true"]::before,
.manage-page .editor-checklist > a.is-complete::before,
.manage-page .editor-checklist > a[data-complete="true"]::before {
content: "\2713";
border-color: var(--sl-tide);
background: var(--sl-tide);
}
.manage-page .editor-checklist a:hover {
color: var(--editor-action);
}
/* Short, independent save groups */
.manage-page .editor-save-form {
margin: 0;
}
.manage-page .editor-save-form + .editor-save-form {
margin-top: 34px;
padding-top: 34px;
border-top: 1px solid var(--editor-rule);
}
.manage-page .editor-save-row {
display: flex;
min-height: 66px;
flex-wrap: wrap;
gap: 14px 20px;
align-items: center;
justify-content: space-between;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--editor-rule);
}
.manage-page .editor-save-row .button {
min-width: 160px;
}
.manage-page .local-save-note {
display: inline-flex;
min-height: 44px;
align-items: center;
color: var(--editor-muted);
font-size: .72rem;
font-weight: 500;
}
.manage-page .local-save-note.is-saving {
color: var(--editor-action);
}
.manage-page .local-save-note.is-saved {
color: #41685d;
}
.manage-page .local-save-note.is-error {
color: #8f4536;
}
/* Progressive personal details: one useful row at a time */
.manage-page .interest-builder {
margin: 22px 0 30px;
padding: clamp(22px, 3vw, 30px);
border: 1px solid var(--editor-rule);
background: var(--sl-sky-2);
}
.manage-page .interest-builder > :last-child {
margin-bottom: 0;
}
.manage-page .interest-list {
display: grid;
gap: 0;
margin: 20px 0;
border-top: 1px solid var(--editor-rule);
}
.manage-page .interest-row {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) minmax(145px, auto) 44px;
gap: 14px;
align-items: end;
padding: 18px 0;
border-bottom: 1px solid var(--editor-rule);
}
.manage-page .interest-row-number {
display: grid;
width: 30px;
height: 30px;
align-self: center;
place-items: center;
border: 1px solid var(--sl-tide);
border-radius: 50%;
color: var(--editor-action);
font-size: .65rem;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.manage-page .interest-row-fields {
display: grid;
grid-template-columns: minmax(170px, .42fr) minmax(220px, 1fr);
gap: 14px;
min-width: 0;
}
.manage-page .interest-row-fields .field {
min-width: 0;
margin-bottom: 0;
}
.manage-page .interest-visibility {
display: flex;
min-height: 52px;
align-items: center;
gap: 9px;
padding: 0 4px;
color: var(--editor-muted);
font-size: .7rem;
font-weight: 500;
}
.manage-page .interest-visibility input {
width: 18px;
height: 18px;
flex: 0 0 auto;
accent-color: var(--sl-tide);
}
.manage-page .interest-empty {
margin: 16px 0;
padding: 20px 0;
border-block: 1px solid var(--editor-rule);
color: var(--editor-muted);
font-size: .76rem;
}
.manage-page .interest-remove {
display: inline-grid;
width: 44px;
min-width: 44px;
height: 44px;
align-self: end;
place-items: center;
padding: 0;
border: 1px solid #d8bbb4;
border-radius: 50%;
background: transparent;
color: #8f4536;
font-size: .7rem;
cursor: pointer;
}
.manage-page .interest-remove:hover {
border-color: #8f4536;
background-color: rgba(143, 69, 54, .06);
}
/* Timeline controls retain native forms and chronological semantics */
.manage-page .timeline-section-tools {
display: flex;
flex-wrap: wrap;
gap: 14px 24px;
align-items: center;
justify-content: space-between;
margin: -8px 0 30px;
padding: 0 0 22px;
border-bottom: 1px solid var(--editor-rule);
}
.manage-page .timeline-order-note {
max-width: 70ch;
margin: 0;
color: var(--editor-muted);
font-size: .74rem;
line-height: 1.6;
}
.manage-page .timeline-item-shell {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 14px;
align-items: start;
padding-bottom: 24px;
}
.manage-page .timeline-item-shell > details,
.manage-page .timeline-item-shell > .timeline-editor-item {
min-width: 0;
grid-column: 2;
grid-row: 1;
}
.manage-page .timeline-order-actions {
display: grid;
grid-column: 1;
grid-row: 1;
gap: 6px;
align-content: start;
}
.manage-page .timeline-order-actions form {
margin: 0;
}
.manage-page .timeline-order-button {
display: grid;
width: 44px;
min-width: 44px;
height: 44px;
place-items: center;
padding: 0;
border: 1px solid var(--editor-rule);
border-radius: 0;
background: var(--editor-wash-strong);
color: var(--editor-action);
font-size: 1rem;
line-height: 1;
cursor: pointer;
}
.manage-page .timeline-order-button:hover:not(:disabled) {
border-color: var(--sl-tide);
background-color: var(--sl-sky-2);
color: var(--sl-deep);
}
.manage-page .timeline-order-button:disabled,
.manage-page .timeline-order-button[aria-disabled="true"] {
opacity: .35;
cursor: not-allowed;
}
.manage-page .timeline-editor-item summary {
min-height: 52px;
align-items: center;
}
.manage-page .timeline-add-disclosure {
border: 1px solid var(--editor-rule);
background: rgba(255, 253, 248, .3);
}
.manage-page .timeline-add-disclosure > summary {
display: flex;
min-height: 54px;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 18px;
color: var(--sl-deep);
font-size: .78rem;
font-weight: 600;
list-style: none;
cursor: pointer;
}
.manage-page .timeline-add-disclosure > summary::-webkit-details-marker {
display: none;
}
.manage-page .timeline-add-disclosure > summary::after {
content: "+";
color: var(--editor-action);
font-family: var(--sans);
font-size: 1.2rem;
font-weight: 300;
}
.manage-page .timeline-add-disclosure[open] > summary::after {
content: "\2212";
}
.manage-page .timeline-add-disclosure .timeline-add-form {
margin: 0;
padding: 24px;
border-top: 1px solid var(--editor-rule);
background: var(--sl-sand);
}
/* A compact photo index; expand only the photograph being edited */
.manage-page .editor-photo-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.manage-page .editor-photo-grid > .editor-photo-card {
padding: 0;
border: 1px solid var(--editor-rule);
background: var(--editor-wash-strong);
box-shadow: none;
}
.manage-page .editor-photo-card:has(> details[open]) {
grid-column: 1 / -1;
border-color: var(--sl-tide);
}
.manage-page .editor-photo-card > details > summary {
list-style: none;
}
.manage-page .editor-photo-card > details > summary::-webkit-details-marker {
display: none;
}
.manage-page .photo-card-summary {
position: relative;
display: grid;
min-height: 104px;
grid-template-columns: 80px minmax(0, 1fr) 18px;
gap: 16px;
align-items: center;
padding: 12px 16px 12px 12px;
cursor: pointer;
}
.manage-page .photo-card-summary::after {
width: 9px;
height: 9px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
content: "";
color: var(--editor-action);
transform: rotate(45deg) translateY(-3px);
transition: transform .18s ease;
}
.manage-page .editor-photo-card details[open] > .photo-card-summary::after {
transform: rotate(225deg) translate(-2px, -2px);
}
.manage-page .photo-card-thumb {
position: relative;
overflow: hidden;
width: 80px;
aspect-ratio: 1;
background: var(--sl-sky-2);
}
.manage-page .photo-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.manage-page .photo-card-copy {
display: grid;
gap: 4px;
min-width: 0;
}
.manage-page .photo-card-copy strong {
overflow: hidden;
color: var(--sl-deep);
font-family: var(--serif);
font-size: 1.15rem;
font-weight: 500;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.manage-page .photo-card-copy span,
.manage-page .photo-card-copy small {
overflow: hidden;
color: var(--editor-muted);
font-size: .68rem;
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}
.manage-page .photo-card-editor {
display: grid;
grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
gap: 24px;
padding: 24px;
border-top: 1px solid var(--editor-rule);
background: var(--sl-sky-2);
}
.manage-page .photo-card-editor .editor-photo-preview {
width: 100%;
max-width: 320px;
margin: 0;
}
.manage-page .photo-card-editor > form {
min-width: 0;
margin: 0;
}
.manage-page .photo-card-editor .editor-photo-actions {
grid-column: 2;
gap: 8px 20px;
margin-top: 0;
padding-top: 10px;
border-top: 1px solid var(--editor-rule);
}
.manage-page .photo-card-editor .editor-photo-actions form {
margin: 0;
}
.manage-page .editor-photo-card .caption-placement-options,
.manage-page .editor-photo-card .caption-width-control {
border-radius: 0;
box-shadow: none;
}
.manage-page .inline-upload {
padding: 22px;
border-color: var(--sl-tide);
background: var(--sl-sand);
}
/* Appearance browser and combined saved-state preview */
.manage-page .appearance-preview-card {
margin-bottom: 28px;
padding: clamp(22px, 3vw, 30px);
border: 1px solid var(--editor-rule);
background: var(--sl-sand);
}
.manage-page .appearance-preview-card > h3 {
margin-bottom: 8px;
}
.manage-page .appearance-preview-card > p {
max-width: 68ch;
color: var(--editor-muted);
font-size: .74rem;
}
.manage-page .frame-browser {
margin-top: 18px;
padding: 18px;
border-block: 1px solid var(--editor-rule);
background: rgba(255, 253, 248, .36);
}
.manage-page .frame-browser .frame-grid {
display: grid;
max-height: min(560px, 62vh);
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: 18px 12px;
overflow-y: auto;
padding: 3px 8px 10px 3px;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.manage-page .frame-browser .frame-swatch,
.manage-page .frame-browser .frame-swatch--landscape {
width: 100%;
min-width: 0;
}
.manage-page .frame-browser .frame-swatch-art,
.manage-page .frame-browser .frame-swatch--landscape .frame-swatch-art {
height: auto;
aspect-ratio: 4 / 5;
border-radius: 0;
box-shadow: inset 0 0 0 1px var(--editor-rule);
}
.manage-page .frame-browser .frame-grid[data-frame-filter="landscape"] .frame-swatch-art {
aspect-ratio: 4 / 3;
}
.manage-page .frame-browser .frame-swatch small {
color: var(--editor-muted);
font-size: .65rem;
line-height: 1.3;
}
.manage-page .frame-category-option span,
.manage-page .frame-shape-option span {
min-height: 44px;
}
.manage-page .focus-picker {
gap: clamp(20px, 4vw, 38px);
}
/* Persistent finishing action and local alerts */
.manage-page .editor-publish-dock {
position: sticky;
z-index: 25;
bottom: max(12px, env(safe-area-inset-bottom));
display: flex;
flex-wrap: wrap;
gap: 16px 28px;
align-items: center;
justify-content: space-between;
margin-top: 26px;
padding: 18px 22px;
border: 1px solid #d8cbb5;
border-top: 2px solid var(--sl-tide);
background: rgba(239, 232, 218, .96);
backdrop-filter: blur(12px);
}
.manage-page .editor-publish-dock h2,
.manage-page .editor-publish-dock h3 {
margin: 0 0 3px;
font-size: 1.45rem;
}
.manage-page .editor-publish-dock p {
max-width: 620px;
margin: 0;
color: var(--editor-muted);
font-size: .72rem;
line-height: 1.5;
}
.manage-page .editor-publish-dock form,
.manage-page .editor-publish-dock .button {
flex: 0 0 auto;
margin: 0;
}
.manage-page .ai-use-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-top: 14px;
}
.manage-page .ai-use-actions .button,
.manage-page .ai-use-actions button {
min-height: 44px;
}
.manage-page .editor-alert-stack {
display: grid;
gap: 10px;
margin: 0 0 22px;
scroll-margin-top: 68px;
}
.manage-page .editor-alert-stack:empty {
display: none;
}
.manage-page .editor-alert-stack .alert {
max-width: none;
margin: 0;
border-radius: 0;
box-shadow: none;
}
@media (max-width: 1024px) {
.manage-page .editor-status-panel {
grid-template-columns: 1fr;
gap: 26px;
}
.manage-page .editor-status-copy h2 {
max-width: 22ch;
}
.manage-page .interest-row {
grid-template-columns: 34px minmax(0, 1fr) 44px;
}
.manage-page .interest-visibility {
grid-column: 2;
}
.manage-page .interest-remove {
grid-column: 3;
grid-row: 1;
}
}
@media (max-width: 820px) {
.manage-page .editor-photo-grid {
grid-template-columns: 1fr;
}
.manage-page .editor-photo-card:has(> details[open]) {
grid-column: auto;
}
.manage-page .photo-card-editor {
grid-template-columns: 1fr;
}
.manage-page .photo-card-editor .editor-photo-preview {
max-width: 420px;
}
.manage-page .photo-card-editor .editor-photo-actions {
grid-column: 1;
}
}
@media (max-width: 720px) {
.manage-page .container {
width: min(1180px, calc(100% - 32px));
}
.manage-page .manage-main {
padding: 36px 0 116px;
}
.manage-page .manage-heading {
gap: 18px;
margin-bottom: 24px;
padding-bottom: 22px;
}
.manage-page .manage-heading h1 {
font-size: clamp(2.65rem, 12vw, 3.65rem);
}
.manage-page .manage-tabs .container {
width: 100%;
padding-inline: 8px;
}
.manage-page .manage-tabs [data-section-link] {
min-height: 50px;
padding-inline: 14px;
}
.manage-page .manage-tabs [data-section-link]::after {
right: 14px;
left: 14px;
}
.manage-page .manage-panel.editor-section,
.manage-page .editor-status-panel {
padding: 26px 22px;
}
.manage-page .editor-section-heading {
grid-template-columns: 44px minmax(0, 1fr);
gap: 14px;
margin-bottom: 28px;
padding-bottom: 24px;
}
.manage-page .editor-section-heading h2 {
font-size: clamp(2rem, 9vw, 2.8rem);
}
.manage-page .editor-checklist {
grid-template-columns: 1fr;
}
.manage-page .editor-save-row {
align-items: stretch;
flex-direction: column;
}
.manage-page .editor-save-row .button {
width: 100%;
}
.manage-page .local-save-note {
justify-content: center;
text-align: center;
}
.manage-page .interest-builder {
margin-inline: -2px;
padding: 20px 18px;
}
.manage-page .interest-row-fields {
grid-template-columns: 1fr;
}
.manage-page .interest-visibility {
align-self: start;
}
.manage-page .timeline-section-tools {
align-items: flex-start;
flex-direction: column;
}
.manage-page .timeline-item-shell {
gap: 10px;
}
.manage-page .timeline-editor-item summary {
grid-template-columns: 48px minmax(0, 1fr);
gap: 10px;
}
.manage-page .timeline-add-disclosure .timeline-add-form,
.manage-page .photo-card-editor {
padding: 20px 18px;
}
.manage-page .photo-card-summary {
grid-template-columns: 72px minmax(0, 1fr) 16px;
min-height: 96px;
gap: 13px;
}
.manage-page .photo-card-thumb {
width: 72px;
}
.manage-page .frame-browser {
margin-inline: -4px;
padding: 14px;
}
.manage-page .frame-browser .frame-grid {
max-height: min(470px, 58vh);
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px 8px;
}
.manage-page .editor-publish-dock {
bottom: max(8px, env(safe-area-inset-bottom));
margin-top: 20px;
padding: 15px 16px;
}
.manage-page .editor-publish-dock h2,
.manage-page .editor-publish-dock h3 {
font-size: 1.25rem;
}
}
@media (max-width: 480px) {
.manage-page .manage-heading .icon-button,
.manage-page .manage-heading .button {
width: 100%;
}
.manage-page .editor-status-panel,
.manage-page .manage-panel.editor-section {
padding: 24px 18px;
}
.manage-page .editor-section-heading {
grid-template-columns: 1fr;
}
.manage-page .editor-section-heading > span {
width: 40px;
height: 40px;
}
.manage-page .interest-row {
grid-template-columns: 32px minmax(0, 1fr) 44px;
gap: 10px;
}
.manage-page .interest-row-number {
width: 28px;
height: 28px;
align-self: start;
margin-top: 12px;
}
.manage-page .timeline-item-shell {
grid-template-columns: 44px minmax(0, 1fr);
}
.manage-page .timeline-order-actions {
gap: 4px;
}
.manage-page .photo-card-summary {
grid-template-columns: 64px minmax(0, 1fr) 14px;
min-height: 88px;
padding: 10px 12px 10px 10px;
}
.manage-page .photo-card-thumb {
width: 64px;
}
.manage-page .photo-card-copy strong {
font-size: 1rem;
}
.manage-page .editor-publish-dock {
align-items: stretch;
flex-direction: column;
}
.manage-page .editor-publish-dock p {
display: none;
}
.manage-page .editor-publish-dock form,
.manage-page .editor-publish-dock .button,
.manage-page .editor-publish-dock form .button {
width: 100%;
}
.manage-page .ai-use-actions {
align-items: stretch;
flex-direction: column;
}
.manage-page .ai-use-actions .button,
.manage-page .ai-use-actions button {
width: 100%;
}
}
/* Memorial editor: explicit, selectable tabs with horizontal-only overflow. */
.manage-page .manage-tab-links {
display: flex;
width: 100%;
align-items: stretch;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scroll-snap-type: x proximity;
}
.manage-page .editor-nav-group {
padding-inline: 6px;
}
.manage-page .editor-nav-group:first-child {
padding-left: 0;
}
.manage-page .editor-nav-group:last-child {
padding-right: 0;
}
.manage-page .editor-nav-group > small {
display: flex;
min-height: 20px;
align-items: center;
gap: 6px;
padding: 6px 8px 3px;
font-size: .66rem;
}
.manage-page .editor-nav-group > small em {
color: var(--editor-action);
font-size: .6rem;
font-style: normal;
font-weight: 600;
letter-spacing: .03em;
text-transform: lowercase;
}
.manage-page .editor-nav-group > span {
display: flex;
align-items: flex-end;
gap: 5px;
}
.manage-page .manage-tabs [data-section-link],
.manage-page .editor-nav-group [data-section-link] {
position: relative;
display: inline-flex;
min-height: 44px;
flex: 0 0 auto;
align-items: center;
gap: 7px;
margin: 0;
padding: 0 12px;
border: 1px solid rgba(47, 60, 60, .22);
border-bottom-color: rgba(47, 60, 60, .34);
border-radius: 8px 8px 0 0;
background: rgba(255, 253, 248, .7);
box-shadow: inset 0 -2px rgba(47, 60, 60, .08);
color: var(--editor-muted);
cursor: pointer;
font-size: .72rem;
font-weight: 700;
letter-spacing: .015em;
scroll-snap-align: start;
transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.manage-page .manage-tabs [data-section-link]::before {
display: inline-grid;
width: 19px;
height: 19px;
flex: 0 0 19px;
place-items: center;
border: 1px solid rgba(47, 60, 60, .26);
border-radius: 50%;
color: var(--editor-action);
content: attr(data-step);
font-size: .55rem;
font-weight: 700;
letter-spacing: 0;
}
.manage-page .manage-tabs [data-section-link]::after {
display: none;
}
.manage-page .manage-tabs [data-section-link]:hover {
border-color: var(--sl-tide);
background: var(--paper);
box-shadow: inset 0 -3px var(--sl-tide);
color: var(--sl-deep);
}
.manage-page .manage-tabs [data-section-link]:focus-visible {
z-index: 2;
outline: 3px solid var(--sl-tide);
outline-offset: -3px;
}
.manage-page .manage-tabs [data-section-link].is-active,
.manage-page .manage-tabs [data-section-link][aria-selected="true"] {
z-index: 1;
border-color: var(--sl-deep);
background: var(--sl-deep);
box-shadow: none;
color: #fffdf8;
}
.manage-page .manage-tabs [data-section-link].is-active::before,
.manage-page .manage-tabs [data-section-link][aria-selected="true"]::before {
border-color: #dd8a5f;
background: #dd8a5f;
color: var(--sl-deep);
}
@media (max-width: 1400px) {
.manage-page.has-section-tabs .manage-tabs .container {
display: block;
width: 100%;
padding: 8px clamp(12px, 2.5vw, 24px);
overflow: visible;
}
.manage-page.has-section-tabs .manage-tab-links {
display: none;
}
.manage-page.has-section-tabs .editor-section-picker {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
}
.manage-page.has-section-tabs .editor-section-picker span {
color: var(--editor-muted);
font-size: .68rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.manage-page.has-section-tabs .editor-section-picker select {
width: 100%;
min-height: 48px;
border: 1px solid var(--sl-tide);
background-color: var(--paper);
color: var(--sl-deep);
font-weight: 700;
}
.manage-page:not(.has-section-tabs) .manage-tabs .container {
display: block;
padding-block: 10px;
overflow: visible;
}
.manage-page:not(.has-section-tabs) .manage-tab-links {
display: flex;
flex-wrap: wrap;
gap: 10px 0;
overflow: visible;
}
.manage-page:not(.has-section-tabs) .editor-nav-group > small {
display: flex;
}
.manage-page:not(.has-section-tabs) .editor-section-picker {
display: none;
}
}
@media (max-width: 480px) {
.manage-page .editor-publish-actions {
align-items: stretch;
flex-direction: column;
flex-wrap: nowrap;
}
.manage-page .editor-publish-actions > * {
min-width: 0;
}
}
/* First-time creation journey ------------------------------------------------
Scoped to the creation and memorial-manager surfaces. */
.create-page .create-shell {
grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
}
.create-page .create-aside {
display: flex;
min-height: calc(100dvh - 72px);
flex-direction: column;
justify-content: flex-start;
padding: clamp(38px, 4vw, 56px);
background: #23483e;
}
.create-page .create-aside h1 {
max-width: 13ch;
margin: 8px 0 20px;
font-size: clamp(2rem, 2.8vw, 2.65rem);
line-height: 1.08;
}
.create-page .progress-list-two {
margin-top: 42px;
}
.create-page .create-main {
align-items: flex-start;
padding: clamp(34px, 5vw, 68px);
}
.create-page .create-form {
width: min(760px, 100%);
}
.create-page .create-form h2 {
max-width: 18ch;
}
.create-page .create-optional-details {
grid-column: 1 / -1;
border: 1px solid var(--sl-line, #d3d8d3);
background: rgba(255, 255, 255, .35);
}
.create-page .create-optional-details > summary {
display: grid;
min-height: 66px;
grid-template-columns: minmax(0, 1fr) 28px;
gap: 14px;
align-items: center;
padding: 14px 18px;
color: var(--sl-deep, #2f3c3c);
cursor: pointer;
list-style: none;
}
.create-page .create-optional-details > summary::-webkit-details-marker {
display: none;
}
.create-page .create-optional-details > summary::after {
display: flex;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
border: 1px solid var(--sl-line, #d3d8d3);
border-radius: 50%;
content: "+";
font-size: 1.1rem;
font-weight: 400;
line-height: 1;
}
.create-page .create-optional-details[open] > summary {
border-bottom: 1px solid var(--sl-line, #d3d8d3);
background: rgba(255, 255, 255, .32);
}
.create-page .create-optional-details[open] > summary::after {
content: "\2212";
}
.create-page .create-optional-details > summary:focus-visible {
outline: 2px solid var(--sl-tide, #5d7c76);
outline-offset: 3px;
}
.create-page .create-optional-details > summary strong,
.create-page .create-optional-details > summary small {
display: block;
}
.create-page .create-optional-details > summary strong {
font-size: .8rem;
}
.create-page .create-optional-details > summary small {
margin-top: 2px;
color: #6f7a77;
font-size: .68rem;
font-weight: 400;
}
.create-page .create-optional-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 20px;
padding: 22px 20px 20px;
}
.create-page .create-optional-fields .field {
margin-bottom: 18px;
}
.create-page .create-optional-dates {
min-width: 0;
margin-bottom: 0;
padding: 0;
border: 0;
}
.create-page .create-optional-dates legend {
margin-bottom: 8px;
color: #4d5b55;
font-size: .72rem;
font-weight: 700;
}
.create-page .plan-choice {
min-height: 235px;
padding: 26px 22px;
}
.create-page .create-private-note {
margin-top: 22px;
border-color: #bcc8c2;
background: var(--sl-sky-2, #e3e7e3);
}
.create-page .create-device-status {
min-height: 24px;
margin: 14px 0 0;
color: #65716c;
font-size: .72rem;
}
.create-page .create-save-later {
display: inline-flex;
min-height: 44px;
align-items: center;
color: var(--sl-deep, #2f3c3c);
font-size: .72rem;
font-weight: 700;
}
.manage-page .editor-nav-group {
display: flex;
flex: 0 0 auto;
flex-direction: column;
border-left: 1px solid var(--editor-rule);
}
.manage-page .editor-nav-group:first-child {
border-left: 0;
}
.manage-page .editor-nav-group > small {
padding: 7px 14px 0;
color: var(--editor-muted);
font-size: .68rem;
font-weight: 700;
letter-spacing: .11em;
line-height: 1;
text-transform: uppercase;
}
.manage-page .editor-nav-group > span {
display: flex;
}
.manage-page .editor-nav-group [data-section-link] {
padding-top: 8px;
}
.manage-page .editor-welcome,
.manage-page .editor-first-win {
display: grid;
gap: clamp(24px, 4vw, 48px);
margin-bottom: 28px;
padding: clamp(26px, 4vw, 42px);
border: 1px solid var(--editor-rule);
}
.manage-page .editor-welcome {
grid-template-columns: minmax(220px, .75fr) minmax(420px, 1.25fr);
align-items: center;
background: var(--sl-sand);
}
.manage-page .editor-welcome h2,
.manage-page .editor-first-win h2 {
margin: 4px 0 10px;
font-size: clamp(2rem, 3.4vw, 3rem);
}
.manage-page .editor-welcome p,
.manage-page .editor-first-win p {
margin: 0;
color: var(--editor-muted);
font-size: .82rem;
}
.manage-page .editor-welcome > .button {
grid-column: 1 / -1;
justify-self: start;
}
.manage-page .editor-welcome-actions {
display: grid;
margin: 0;
padding: 0;
border-top: 1px solid var(--editor-rule);
list-style: none;
}
.manage-page .editor-welcome-actions a {
display: grid;
min-height: 68px;
grid-template-columns: 28px minmax(0, 1fr);
gap: 2px 12px;
align-content: center;
padding: 11px 0;
border-bottom: 1px solid var(--editor-rule);
color: var(--sl-deep);
text-decoration: none;
}
.manage-page .editor-welcome-actions a > span {
grid-row: 1 / span 2;
color: var(--sl-tide);
font-family: var(--serif);
}
.manage-page .editor-welcome-actions strong {
font-size: .82rem;
}
.manage-page .editor-welcome-actions small {
color: var(--editor-muted);
font-size: .7rem;
}
.manage-page .editor-first-win {
grid-template-columns: 150px minmax(0, 1fr);
align-items: center;
background: var(--sl-sky-2);
}
.manage-page .editor-first-win-portrait {
position: relative;
width: 145px;
aspect-ratio: 4 / 5;
}
.manage-page .editor-first-win-portrait > span {
position: absolute;
overflow: hidden;
inset: 0;
border-radius: 46% 46% 42% 42% / 38% 38% 48% 48%;
}
.manage-page .editor-first-win-portrait.is-masked > span {
border-radius: 0;
-webkit-mask: var(--frame-mask) center / 100% 100% no-repeat;
mask: var(--frame-mask) center / 100% 100% no-repeat;
}
.manage-page .editor-first-win-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--focus-x, 50%) var(--focus-y, 50%);
transform: scale(var(--portrait-zoom, 1));
transform-origin: var(--focus-x, 50%) var(--focus-y, 50%);
}
.manage-page .editor-first-win-portrait[style*="--frame-url"]::after {
position: absolute;
z-index: 2;
inset: 0;
background: var(--frame-url) center / 100% 100% no-repeat;
content: "";
pointer-events: none;
}
.manage-page .editor-first-win-actions,
.manage-page .premium-options-actions {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
align-items: center;
margin-top: 20px;
}
.manage-page .premium-options-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border: 1px solid var(--editor-rule);
}
.manage-page .premium-options-grid article {
min-width: 0;
padding: 22px;
border-bottom: 1px solid var(--editor-rule);
}
.manage-page .premium-options-grid article:nth-child(even) {
border-left: 1px solid var(--editor-rule);
}
.manage-page .premium-options-grid article:nth-last-child(-n + 2) {
border-bottom: 0;
}
.manage-page .premium-options-grid article > span {
color: var(--editor-action);
font-size: .61rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.manage-page .premium-options-grid h3 {
margin: 7px 0 6px;
font-size: 1.35rem;
}
.manage-page .premium-options-grid p,
.manage-page .premium-options-reassurance {
margin: 0;
color: var(--editor-muted);
font-size: .76rem;
}
.manage-page .premium-context-note {
display: grid;
gap: 5px;
}
.manage-page .publish-review[open] .publish-review-body {
position: fixed;
z-index: 80;
right: 16px;
bottom: 88px;
width: min(560px, calc(100vw - 32px));
max-height: calc(100dvh - 120px);
overflow-y: auto;
padding: 20px;
border: 1px solid var(--editor-rule);
background: var(--paper);
box-shadow: 0 24px 70px rgba(30, 55, 51, .22);
}
.manage-page .publish-review-close {
display: flex;
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0 0 12px auto;
padding: 0 10px;
border: 1px solid var(--editor-rule);
background: transparent;
color: var(--sl-deep);
font: 700 .72rem/1 var(--sans);
cursor: pointer;
}
.manage-page .editor-publish-alert:not([hidden]) {
position: sticky;
z-index: 26;
top: 82px;
margin: 0 0 16px;
padding: 12px 14px;
border: 1px solid #a97f42;
background: #fff8e8;
color: #765b2d;
}
.create-page .back-button,
.create-page .year-combo-toggle {
min-width: 44px;
min-height: 44px;
}
.manage-page .publish-privacy {
display: grid;
gap: 0;
margin: 0 0 16px;
padding: 0;
border: 0;
}
.manage-page .publish-privacy legend {
width: 100%;
margin-bottom: 8px;
color: var(--sl-deep);
font-family: var(--serif);
font-size: 1.25rem;
}
.manage-page .publish-privacy label {
display: grid;
min-height: 64px;
grid-template-columns: 22px minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 10px 0;
border-top: 1px solid var(--editor-rule);
cursor: pointer;
}
.manage-page .publish-privacy input {
width: 18px;
height: 18px;
accent-color: var(--sl-tide);
}
.manage-page .publish-privacy strong,
.manage-page .publish-privacy small {
display: block;
}
.manage-page .publish-privacy small {
margin-top: 2px;
color: var(--editor-muted);
font-size: .7rem;
}
.manage-page .publish-form-status:not(:empty) {
margin: 0 0 12px;
padding: 9px 11px;
border: 1px solid #a97f42;
background: #fff8e8;
color: #765b2d;
}
@media (max-width: 980px) {
.create-page .create-shell {
grid-template-columns: 270px minmax(0, 1fr);
}
.manage-page .editor-nav-group > small {
display: none;
}
.manage-page .editor-nav-group [data-section-link] {
padding-top: 16px;
}
.manage-page .editor-welcome {
grid-template-columns: 1fr;
}
.manage-page .editor-welcome > .button {
grid-column: auto;
}
}
@media (max-width: 720px) {
.create-page .create-shell {
display: block;
}
.create-page .create-aside {
min-height: 0;
padding: 24px 20px 20px;
}
.create-page .create-aside h1 {
max-width: 14ch;
margin: 4px 0 12px;
font-size: 2.05rem;
}
.create-page .create-aside > p {
display: block;
margin-bottom: 0;
font-size: .8rem;
}
.create-page .progress-list-two {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 16px;
}
.create-page .create-main {
padding: 28px 16px 42px;
}
.create-page .form-step .eyebrow {
margin-bottom: 12px;
}
.create-page .form-step h2 {
margin-bottom: 10px;
font-size: 2.3rem;
}
.create-page .form-lead {
margin-bottom: 24px;
}
.create-page .form-grid > .field {
margin-bottom: 14px;
}
.create-page .create-optional-details > summary {
min-height: 58px;
padding: 12px 14px;
}
.create-page .create-optional-fields {
grid-template-columns: 1fr;
padding: 18px 14px 16px;
}
.create-page .form-actions {
margin-top: 18px;
}
.manage-page .editor-first-win {
grid-template-columns: 100px minmax(0, 1fr);
}
.manage-page .editor-first-win-portrait {
width: 96px;
}
}
@media (max-width: 520px) {
.create-page .plan-choice-grid,
.manage-page .premium-options-grid {
grid-template-columns: 1fr;
}
.create-page .plan-choice {
min-height: 0;
}
.manage-page .premium-options-grid article,
.manage-page .premium-options-grid article:nth-child(even),
.manage-page .premium-options-grid article:nth-last-child(-n + 2) {
border-left: 0;
border-bottom: 1px solid var(--editor-rule);
}
.manage-page .premium-options-grid article:last-child {
border-bottom: 0;
}
.manage-page .editor-welcome,
.manage-page .editor-first-win {
grid-template-columns: 1fr;
padding: 24px 18px;
}
.manage-page .editor-first-win-portrait {
width: 112px;
}
.manage-page .editor-welcome-actions a {
min-height: 72px;
}
.manage-page .publish-review[open] .publish-review-body {
right: auto;
bottom: 78px;
left: 50%;
width: min(560px, calc(100vw - 32px));
max-height: calc(100dvh - 96px);
padding: 16px;
transform: translateX(-50%);
}
}
/* Audit remediation: state clarity, accessible navigation and public media viewing. */
.memorial-page .memorial-actions .button,
.memorial-page .memorial-actions .icon-button {
min-height: 44px;
align-items: center;
}
.memorial-tabs a {
min-height: 44px;
}
.memorial-tabs a[aria-current="location"] {
border-color: var(--apricot);
color: var(--forest-dark);
}
.memorial-owner-state {
position: absolute;
z-index: 3;
top: 102px;
left: 50%;
width: min(680px, calc(100% - 32px));
padding: 10px 16px;
border: 1px solid rgba(47, 60, 60, .2);
background: rgba(255, 253, 248, .9);
color: var(--sl-deep);
font-size: .74rem;
line-height: 1.5;
text-align: center;
transform: translateX(-50%);
backdrop-filter: blur(8px);
}
.memorial-owner-state a {
margin-left: 6px;
border-bottom: 1px solid currentColor;
color: var(--sl-functional);
font-weight: 700;
}
.memorial-facts dl,
.memorial-facts dd {
margin: 0;
}
.story-prose > p {
margin: 0 0 1.1em;
color: #465754;
font-family: var(--serif);
font-size: 1.18rem;
line-height: 1.75;
}
.story-prose > p:first-child::first-letter {
float: left;
padding: 12px 10px 0 0;
color: var(--apricot);
font-family: var(--serif);
font-size: 4.9rem;
line-height: .65;
}
.memorial-facts .memorial-interest dt {
color: var(--sl-functional);
font-size: .64rem;
font-weight: 700;
letter-spacing: .09em;
}
.memorial-facts .memorial-interest dd {
color: var(--sl-ink);
font-size: 1.02rem;
line-height: 1.42;
}
.comment-form-card .field-counter {
display: block;
margin-top: 6px;
color: var(--sl-soft);
font-size: .7rem;
text-align: right;
}
.comment-form-card .comment-note a {
border-bottom: 1px solid currentColor;
color: var(--sl-functional);
}
.memorial-facts dt {
color: var(--sl-functional);
font-size: .66rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.memorial-facts dd {
margin-top: 4px;
color: var(--sl-ink);
line-height: 1.55;
}
button.gallery-photo-media {
display: block;
width: 100%;
padding: 0;
border: 0;
text-align: inherit;
cursor: zoom-in;
}
button.gallery-photo-media:focus-visible {
outline-offset: 4px;
}
.gallery-lightbox {
width: min(1100px, calc(100% - 28px));
max-height: calc(100dvh - 28px);
padding: 0;
border: 0;
background: var(--paper);
color: var(--sl-ink);
box-shadow: 0 30px 90px rgba(20, 34, 33, .35);
}
.gallery-lightbox::backdrop {
background: rgba(20, 31, 30, .78);
}
.gallery-lightbox-inner {
display: grid;
max-height: calc(100dvh - 28px);
grid-template-rows: minmax(0, 1fr) auto;
}
.gallery-lightbox img {
width: 100%;
height: 100%;
max-height: calc(100dvh - 120px);
object-fit: contain;
background: #1f2928;
}
.gallery-lightbox-footer {
display: flex;
min-height: 64px;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 12px 18px;
}
.gallery-lightbox-footer p {
margin: 0;
color: var(--sl-soft);
font-size: .82rem;
}
.gallery-lightbox-close {
min-width: 44px;
min-height: 44px;
border: 0;
background: transparent;
color: var(--sl-deep);
font-size: .78rem;
font-weight: 700;
cursor: pointer;
}
.manage-page .manage-tabs .container {
overflow: visible;
}
.manage-page .manage-tab-links {
display: flex;
width: 100%;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
scroll-snap-type: x proximity;
}
.manage-page .editor-section-picker {
display: none;
}
.manage-page .editor-checklist > a {
text-decoration: none;
}
.manage-page .editor-checklist > a:focus-visible {
outline-offset: 2px;
}
.manage-page .editor-completion {
margin: 12px 0 0;
color: var(--editor-muted);
font-size: .72rem;
}
.manage-page .publish-review {
width: min(520px, 100%);
border: 1px solid var(--editor-rule);
background: rgba(255, 253, 248, .55);
}
.manage-page .publish-review > summary {
min-height: 48px;
padding: 13px 16px;
color: var(--sl-deep);
font-weight: 700;
cursor: pointer;
}
.manage-page .publish-review-body {
padding: 0 16px 16px;
}
.manage-page .publish-review-list {
margin: 0 0 16px;
padding: 12px 0;
border-block: 1px solid var(--editor-rule);
list-style: none;
}
.manage-page .publish-review-list li {
padding: 4px 0;
color: var(--editor-muted);
font-size: .76rem;
}
.manage-page .publish-confirmation {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 10px;
align-items: start;
margin-bottom: 16px;
color: var(--sl-deep);
font-size: .78rem;
line-height: 1.5;
}
.manage-page .publish-confirmation input {
width: 18px;
height: 18px;
margin: 2px 0 0;
accent-color: var(--sl-tide);
}
.manage-page .share-unavailable {
max-width: 42ch;
color: var(--editor-muted);
font-size: .72rem;
line-height: 1.5;
}
.manage-page .publication-summary {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--editor-rule);
}
.manage-page .publication-summary h3 {
margin: 4px 0 8px;
color: var(--sl-deep);
font-family: var(--serif);
font-size: 1.55rem;
font-weight: 500;
}
.manage-page .publication-summary > p:not(.content-overline) {
max-width: 52ch;
margin: 0 0 12px;
color: var(--editor-muted);
font-size: .78rem;
line-height: 1.55;
}
@media (max-width: 720px) {
.memorial-owner-state {
top: 72px;
font-size: .7rem;
}
.manage-page .manage-tabs .container {
display: block;
padding-block: 8px;
}
.manage-page .manage-tab-links {
display: none;
}
.manage-page .editor-section-picker {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
align-items: center;
}
.manage-page .editor-section-picker span {
color: var(--editor-muted);
font-size: .68rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.manage-page .editor-section-picker select {
min-height: 44px;
width: 100%;
border-color: var(--editor-rule);
background-color: var(--paper);
color: var(--sl-deep);
}
}
/* Manager resilience, touch targets and no-JavaScript reading order. */
body.account-page.manage-page .account-header nav > a {
display: inline-flex;
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
}
body.account-page.manage-page .account-header nav > a.button,
body.account-page.manage-page .editor-publish-actions .text-button,
body.account-page.manage-page .editor-publish-actions .button,
body.account-page.manage-page .editor-publish-actions form .button {
min-height: 44px;
}
body.account-page.manage-page .editor-publish-actions .text-button {
min-width: 44px;
}
.manage-page .year-combo-toggle {
width: 44px;
}
.manage-page:not(.has-section-tabs) .manage-main > .container {
display: flex;
flex-direction: column;
}
.manage-page:not(.has-section-tabs) .manage-heading { order: 1; }
.manage-page:not(.has-section-tabs) .editor-alert-stack { order: 2; }
.manage-page:not(.has-section-tabs) .editor-status-panel { order: 3; }
.manage-page:not(.has-section-tabs) .manage-main > .container > noscript { order: 4; }
.manage-page:not(.has-section-tabs) #basics { order: 5; }
.manage-page:not(.has-section-tabs) #about { order: 6; }
.manage-page:not(.has-section-tabs) #interests { order: 7; }
.manage-page:not(.has-section-tabs) #story { order: 8; }
.manage-page:not(.has-section-tabs) #timeline { order: 9; }
.manage-page:not(.has-section-tabs) #photos { order: 10; }
.manage-page:not(.has-section-tabs) #appearance { order: 11; }
.manage-page:not(.has-section-tabs) #settings { order: 12; }
.manage-page:not(.has-section-tabs) #qr { order: 13; }
.manage-page:not(.has-section-tabs) #comments { order: 14; }
.manage-page:not(.has-section-tabs) .editor-publish-dock { order: 15; }
.manage-page:not(.has-section-tabs) [data-add-interest],
.manage-page:not(.has-section-tabs) [data-remove-interest],
.manage-page:not(.has-section-tabs) [data-share],
.manage-page:not(.has-section-tabs) [data-qr-download],
.manage-page:not(.has-section-tabs) .frame-category-toggle,
.manage-page:not(.has-section-tabs) .frame-shape-toggle,
.manage-page:not(.has-section-tabs) .frame-filter-summary {
display: none;
}
.manage-page .editor-noscript {
margin: 18px 0 6px;
padding: 16px 18px;
border: 1px solid var(--editor-rule);
background: var(--sl-sand);
color: var(--editor-muted);
font-size: .76rem;
line-height: 1.55;
}
@media (max-width: 480px) {
body.account-page.manage-page .account-header nav > a.button {
display: none;
}
.manage-page .focus-picker > div:first-child,
.manage-page .focus-stage,
.manage-page .focus-axis-controls,
.manage-page .focus-axis-controls label,
.manage-page .focus-axis-controls input[type="range"] {
width: 100%;
min-width: 0;
max-width: 100%;
}
body.account-page.manage-page .editor-publish-actions .text-button,
body.account-page.manage-page .editor-publish-actions .button,
body.account-page.manage-page .editor-publish-actions form .button {
min-height: 44px;
}
}
/* Mobile editor actions -----------------------------------------------------
Keep the full publishing controls in normal flow. Phones get one compact,
viewport-level action bar instead of a tall sticky card. */
.manage-page .publication-offline {
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--editor-rule);
}
.manage-page .publication-offline h4,
.manage-page .publication-offline p {
margin: 0;
}
.manage-page .publication-offline h4 {
color: var(--sl-deep);
font-family: var(--serif);
font-size: 1.18rem;
font-weight: 500;
}
.manage-page .publication-offline p {
margin-top: 3px;
color: var(--editor-muted);
font-size: .7rem;
line-height: 1.45;
}
.manage-page .publication-offline form {
flex: 0 0 auto;
margin: 0;
}
.manage-page .publication-offline .text-button {
display: inline-flex;
min-height: 44px;
align-items: center;
}
.editor-mobile-bar {
display: none;
}
@media (max-width: 720px) {
.manage-page.has-section-tabs .manage-main {
padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
.manage-page .editor-publish-dock {
position: static;
bottom: auto;
margin-bottom: 0;
backdrop-filter: none;
}
.manage-page.has-section-tabs .editor-publish-dock.editor-publish-dock--mobile-replaced {
display: none;
}
.manage-page .publish-review[open] .publish-review-body {
right: auto;
bottom: calc(76px + env(safe-area-inset-bottom));
left: 50%;
width: min(560px, calc(100% - 24px));
max-height: calc(100dvh - 100px - env(safe-area-inset-bottom));
padding: 16px;
transform: translateX(-50%);
}
.manage-page.has-section-tabs .editor-mobile-bar {
position: fixed;
z-index: 70;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
display: flex;
min-height: 64px;
gap: 10px;
align-items: center;
justify-content: space-between;
padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
border-top: 1px solid var(--editor-rule);
background: #fffdf8;
box-shadow: 0 -10px 30px rgba(30, 55, 51, .12);
}
.editor-mobile-status {
display: flex;
min-width: 0;
flex: 0 1 auto;
gap: 7px;
align-items: center;
overflow: hidden;
color: var(--sl-deep);
font-size: .7rem;
font-weight: 700;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.editor-mobile-status::before {
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--sl-tide);
content: "";
}
.editor-mobile-bar[data-publication-state="draft"] .editor-mobile-status::before,
.editor-mobile-bar[data-publication-state="private"] .editor-mobile-status::before,
.editor-mobile-bar[data-publication-state="restricted"] .editor-mobile-status::before,
.manage-page.has-editor-dirty .editor-mobile-status::before {
background: #a97f42;
}
.editor-mobile-bar[data-publication-state="pending_deletion"] .editor-mobile-status::before {
background: #9b4a3c;
}
.editor-mobile-clean-actions {
display: flex;
min-width: 0;
flex: 0 0 auto;
gap: 8px;
align-items: center;
}
.editor-mobile-bar [hidden] {
display: none !important;
}
.editor-mobile-clean-actions form {
margin: 0;
}
.editor-mobile-primary,
.editor-mobile-secondary {
box-sizing: border-box;
display: inline-flex;
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
margin: 0;
border: 0;
font: 700 .72rem/1 var(--sans);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.editor-mobile-primary {
padding: 0 18px;
border-radius: 999px;
background: var(--sl-deep);
color: #fffdf8;
}
.editor-mobile-secondary {
padding: 0 8px;
background: transparent;
color: var(--sl-deep);
}
.editor-mobile-primary:focus-visible,
.editor-mobile-secondary:focus-visible {
outline: 2px solid var(--sl-tide);
outline-offset: 2px;
}
.manage-page.editor-input-active .editor-mobile-bar {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.manage-page .publication-offline {
align-items: flex-start;
flex-direction: column;
}
.manage-page.has-section-tabs .toast {
bottom: calc(76px + env(safe-area-inset-bottom));
}
}
@media (max-width: 360px) {
.editor-mobile-bar {
gap: 6px;
padding-inline: 10px;
}
.editor-mobile-status {
font-size: .65rem;
}
.editor-mobile-primary {
padding-inline: 14px;
}
.editor-mobile-secondary {
padding-inline: 5px;
}
}
@media (max-width: 720px) and (max-height: 480px) {
.manage-page.has-section-tabs .editor-mobile-bar {
display: none;
}
.manage-page.has-section-tabs .editor-publish-dock.editor-publish-dock--mobile-replaced {
display: grid;
}
.manage-page.has-section-tabs .manage-main {
padding-bottom: 36px;
}
}
@media (prefers-reduced-motion: reduce) {
.editor-mobile-bar {
transition: none;
}
}
/* Image-background QR keepsakes and creator. */
.manage-page #qr .qr-designer-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
column-gap: clamp(30px, 4vw, 56px);
row-gap: 0;
align-items: start;
}
.manage-page #qr .qr-designer-controls {
display: contents;
min-width: 0;
}
.manage-page #qr .qr-creator-note {
grid-column: 1;
grid-row: 1;
}
.manage-page #qr .qr-builder-block:not(.qr-details-block) {
grid-column: 1;
grid-row: 2;
}
.manage-page #qr .qr-details-block {
grid-column: 1;
grid-row: 3;
}
.manage-page #qr .qr-save-row {
grid-column: 1;
grid-row: 4;
}
.manage-page #qr .qr-creator-note {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px 18px;
align-items: center;
margin-bottom: 30px;
padding: 14px 0;
border-block: 1px solid var(--editor-rule);
}
.manage-page #qr .qr-creator-note > span {
color: var(--editor-action);
font-size: .64rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.manage-page #qr .qr-creator-note p {
margin: 0;
color: var(--editor-muted);
font-size: .72rem;
line-height: 1.5;
}
.manage-page #qr .qr-builder-block {
min-width: 0;
margin: 0 0 30px;
padding: 0 0 30px;
border: 0;
border-bottom: 1px solid var(--editor-rule);
}
.manage-page #qr .qr-builder-block > legend {
width: 100%;
margin: 0 0 8px;
padding: 0;
color: var(--sl-ink);
font-family: var(--serif);
font-size: 1.55rem;
line-height: 1.2;
}
.manage-page #qr .qr-builder-block > .fieldset-help {
margin: 0;
}
.manage-page #qr .qr-theme-collection {
margin-top: 16px;
border-top: 1px solid var(--editor-rule);
}
.manage-page #qr .qr-theme-collection + .qr-theme-collection {
margin-top: 0;
}
.manage-page #qr .qr-theme-collection-heading {
display: flex;
gap: 14px;
align-items: center;
min-height: 50px;
box-sizing: border-box;
padding: 12px 0;
list-style: none;
cursor: pointer;
}
.manage-page #qr .qr-theme-collection-heading::-webkit-details-marker {
display: none;
}
.manage-page #qr .qr-theme-collection-heading > strong {
flex: 1;
margin: 0;
color: var(--editor-muted);
font-family: var(--sans);
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.manage-page #qr .qr-theme-collection-heading > span:not(.qr-theme-collection-marker) {
color: var(--editor-action);
font-size: .62rem;
}
.manage-page #qr .qr-theme-collection-marker {
position: relative;
width: 18px;
height: 18px;
flex: 0 0 18px;
border: 1px solid var(--sl-tide);
border-radius: 50%;
}
.manage-page #qr .qr-theme-collection-marker::before,
.manage-page #qr .qr-theme-collection-marker::after {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 1px;
background: var(--editor-action);
content: "";
transform: translate(-50%, -50%);
}
.manage-page #qr .qr-theme-collection-marker::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: opacity .18s ease;
}
.manage-page #qr .qr-theme-collection[open] .qr-theme-collection-marker::after {
opacity: 0;
}
.manage-page #qr .qr-theme-collection-heading:focus-visible {
outline: 3px solid var(--sl-tide);
outline-offset: 3px;
}
.manage-page #qr .qr-theme-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px 9px;
padding-bottom: 18px;
}
.manage-page #qr .qr-theme-choice {
position: relative;
display: block;
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
cursor: pointer;
}
.manage-page #qr .qr-theme-choice:hover .qr-theme-sample {
transform: translateY(-2px);
box-shadow: 0 11px 24px rgba(31, 50, 44, .15);
}
.manage-page #qr .qr-theme-choice input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.manage-page #qr .qr-theme-sample {
position: relative;
display: block;
width: 100%;
height: auto;
aspect-ratio: 8 / 11;
overflow: hidden;
border: 1px solid var(--editor-rule);
border-radius: 4px;
background: var(--sl-sand);
box-shadow: 0 7px 18px rgba(31, 50, 44, .1);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.manage-page #qr .qr-theme-sample img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.manage-page #qr .qr-theme-choice:has(input:checked) .qr-theme-sample {
border-color: var(--sl-tide);
box-shadow: 0 0 0 3px var(--sl-tide), 0 10px 24px rgba(31, 50, 44, .18);
}
.manage-page #qr .qr-theme-choice:has(input:focus-visible) .qr-theme-sample {
outline: 3px solid var(--sl-tide);
outline-offset: 4px;
}
.manage-page #qr .qr-theme-copy {
display: block;
min-width: 0;
}
.manage-page #qr .qr-theme-choice strong {
display: block;
margin-top: 8px;
color: var(--sl-ink);
font-size: .66rem;
line-height: 1.25;
overflow-wrap: anywhere;
}
.manage-page #qr .qr-theme-choice small {
display: block;
margin-top: 3px;
color: var(--editor-muted);
font-size: .56rem;
line-height: 1.32;
}
.manage-page #qr .qr-theme-selected {
position: absolute;
z-index: 2;
top: 6px;
right: 6px;
display: none;
padding: 3px 5px;
border-radius: 999px;
background: var(--sl-forest, #173d34);
color: #fff;
font-size: .48rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.manage-page #qr .qr-theme-choice:has(input:checked) .qr-theme-selected {
display: block;
}
.manage-page #qr .qr-details-block {
margin-bottom: 24px;
}
.manage-page #qr .qr-checks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
margin-top: 16px;
border-block: 1px solid var(--editor-rule);
}
.manage-page #qr .qr-checks label {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
min-height: 66px;
gap: 12px;
align-items: center;
padding: 10px 12px;
color: var(--sl-ink);
font-weight: 500;
cursor: pointer;
}
.manage-page #qr .qr-checks label + label {
border-left: 1px solid var(--editor-rule);
}
.manage-page #qr .qr-checks input {
width: 18px;
height: 18px;
accent-color: var(--sl-tide);
}
.manage-page #qr .qr-checks strong,
.manage-page #qr .qr-checks small {
display: block;
}
.manage-page #qr .qr-checks strong {
font-size: .72rem;
}
.manage-page #qr .qr-checks small {
margin-top: 2px;
color: var(--editor-muted);
font-size: .6rem;
font-weight: 400;
line-height: 1.35;
}
.manage-page #qr .qr-save-row {
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
}
.manage-page #qr .qr-save-row p {
max-width: 38ch;
margin: 0;
color: var(--editor-muted);
font-size: .7rem;
line-height: 1.5;
}
.manage-page #qr .qr-save-row p strong {
color: var(--sl-ink);
}
.manage-page #qr .qr-preview-panel {
position: sticky;
top: 76px;
grid-column: 2;
grid-row: 1 / span 4;
display: grid;
gap: 14px;
justify-items: stretch;
padding: 18px;
border: 1px solid var(--editor-rule);
border-radius: 0;
background: var(--sl-sky-2);
}
.manage-page #qr .qr-preview-heading {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
}
.manage-page #qr .qr-preview-heading span:first-child {
color: var(--editor-action);
font-size: .58rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.manage-page #qr .qr-preview-heading h3 {
margin: 3px 0 0;
font-size: 1.32rem;
}
.manage-page #qr .qr-scan-badge {
padding: 5px 8px;
border: 1px solid var(--sl-tide);
color: var(--editor-action);
font-size: .56rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.manage-page #qr .qr-preview-stage {
display: grid;
width: 100%;
max-width: 380px;
min-height: 0;
aspect-ratio: 8 / 11;
box-sizing: border-box;
justify-self: center;
place-items: center;
padding: 18px;
border: 1px solid var(--editor-rule);
background: var(--sl-sand);
}
.manage-page #qr .qr-preview-stage .qr-keepsake {
width: min(310px, 100%);
}
.manage-page #qr .qr-preview-panel > .button {
width: 100%;
}
.manage-page #qr .qr-preview-panel > .button[aria-busy="true"] {
cursor: wait;
opacity: .72;
}
.manage-page #qr .qr-output-note {
margin: -3px 0 0;
color: var(--editor-muted);
font-size: .59rem;
letter-spacing: .04em;
text-align: center;
}
.manage-page #qr .qr-runtime-status {
margin-top: -3px;
}
@media (max-width: 1100px) {
.manage-page #qr .qr-theme-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.manage-page #qr .qr-designer-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.manage-page #qr .qr-creator-note,
.manage-page #qr .qr-builder-block:not(.qr-details-block),
.manage-page #qr .qr-details-block,
.manage-page #qr .qr-save-row {
grid-column: 1;
grid-row: auto;
}
.manage-page #qr .qr-preview-panel {
position: static;
grid-column: 1;
grid-row: auto;
order: 3;
}
.manage-page #qr .qr-creator-note {
order: 1;
margin-bottom: 0;
}
.manage-page #qr .qr-builder-block:not(.qr-details-block) {
order: 2;
margin-bottom: 0;
}
.manage-page #qr .qr-details-block {
order: 4;
margin-bottom: 0;
}
.manage-page #qr .qr-save-row {
order: 5;
}
.manage-page #qr .qr-theme-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media (min-width: 981px) and (max-height: 850px) {
.manage-page #qr .qr-preview-panel {
position: static;
}
}
@media (max-width: 720px) {
.manage-page #qr .qr-theme-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.manage-page #qr .qr-creator-note {
grid-template-columns: 1fr;
gap: 5px;
}
.manage-page #qr .qr-checks {
grid-template-columns: 1fr;
}
.manage-page #qr .qr-checks label + label {
border-top: 1px solid var(--editor-rule);
border-left: 0;
}
.manage-page #qr .qr-save-row {
align-items: stretch;
flex-direction: column;
}
.manage-page #qr .qr-save-row .button {
width: 100%;
}
.manage-page #qr .qr-preview-panel,
.manage-page #qr .qr-preview-stage {
padding: 12px;
}
}
@media (max-width: 460px) {
.qr-keepsake {
min-height: 0;
aspect-ratio: auto;
}
.manage-page #qr .qr-theme-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.manage-page #qr .qr-preview-heading {
align-items: flex-start;
flex-direction: column;
}
.manage-page #qr .qr-preview-stage {
aspect-ratio: auto;
}
.manage-page #qr .qr-keepsake {
padding: 22px 17px 18px;
}
}
@media (forced-colors: active) {
.manage-page #qr .qr-theme-choice:has(input:checked) .qr-theme-sample {
outline: 3px solid Highlight;
outline-offset: 3px;
}
}
@media (max-width: 360px) {
.manage-page .frame-browser .frame-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.manage-page.has-section-tabs .editor-section.is-active {
animation: none;
}
.manage-page .manage-tabs [data-section-link],
.manage-page .manage-tabs [data-section-link]::after,
.manage-page .photo-card-summary::after {
transition: none;
}
}
/* Markup alignment for the editor's progressive controls. */
.manage-page .editor-checklist li::before,
.manage-page .editor-checklist > a::before {
display: none;
content: none;
}
.manage-page .editor-checklist li.is-complete::before,
.manage-page .editor-checklist li[data-complete="true"]::before,
.manage-page .editor-checklist > a.is-complete::before,
.manage-page .editor-checklist > a[data-complete="true"]::before {
display: none;
content: none;
}
.manage-page .editor-checklist li {
grid-template-columns: 22px minmax(0, 1fr);
}
.manage-page fieldset.date-group {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.manage-page .editor-checklist li > span {
display: grid;
width: 18px;
height: 18px;
place-items: center;
border: 1px solid var(--sl-tide);
border-radius: 50%;
color: var(--editor-action);
font-size: .58rem;
line-height: 1;
}
.manage-page .editor-checklist li.is-complete > span {
border-color: var(--sl-tide);
background: var(--sl-tide);
color: #fff;
}
.manage-page .editor-checklist > li {
display: block;
min-height: 0;
padding: 0;
}
.manage-page .editor-checklist > li > a {
display: grid;
min-height: 52px;
grid-template-columns: 22px minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--editor-rule);
color: var(--sl-deep);
font-size: .76rem;
font-weight: 500;
text-decoration: none;
}
.manage-page .editor-checklist > li > a::before {
display: grid;
width: 18px;
height: 18px;
place-items: center;
border: 1px solid var(--sl-tide);
border-radius: 50%;
content: "";
color: #fff;
font-size: .62rem;
line-height: 1;
}
.manage-page .editor-checklist > li > a[data-complete="true"]::before {
content: "\2713";
border-color: var(--sl-tide);
background: var(--sl-tide);
}
.manage-page .interest-row {
grid-template-columns: 34px minmax(0, 1fr) minmax(160px, auto) minmax(64px, auto);
}
.manage-page details.interest-visibility {
display: block;
min-height: 44px;
align-self: end;
padding: 0;
border: 1px solid var(--editor-rule);
background: rgba(255, 253, 248, .4);
}
.manage-page .interest-visibility > summary {
display: flex;
min-height: 44px;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 12px;
color: var(--editor-action);
font-size: .67rem;
font-weight: 600;
list-style: none;
cursor: pointer;
}
.manage-page .interest-visibility > summary::-webkit-details-marker {
display: none;
}
.manage-page .interest-visibility > summary::after {
width: 7px;
height: 7px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
content: "";
transform: rotate(45deg) translateY(-2px);
}
.manage-page .interest-visibility[open] > summary {
border-bottom: 1px solid var(--editor-rule);
}
.manage-page .interest-visibility[open] > summary::after {
transform: rotate(225deg) translate(-2px, -1px);
}
.manage-page .interest-visibility > label {
display: flex;
min-height: 44px;
align-items: center;
gap: 9px;
padding: 8px 12px;
color: var(--editor-muted);
font-size: .67rem;
line-height: 1.35;
}
.manage-page .interest-visibility > label + label {
border-top: 1px solid var(--editor-rule);
}
.manage-page .interest-remove {
display: inline-flex;
width: auto;
min-width: 64px;
height: 44px;
align-items: center;
justify-content: center;
padding: 8px 4px;
border: 0;
border-radius: 0;
background: transparent;
font-size: .67rem;
}
.manage-page .interest-remove:hover {
border-color: transparent;
background-color: transparent;
text-decoration: underline;
text-underline-offset: 4px;
}
.manage-page .timeline-item-shell {
grid-template-columns: 110px minmax(0, 1fr);
}
.manage-page .timeline-order-actions {
width: 110px;
}
.manage-page .timeline-order-button {
display: inline-flex;
width: 100%;
min-width: 0;
gap: 7px;
align-items: center;
justify-content: center;
padding: 8px 10px;
font-size: .65rem;
white-space: nowrap;
}
.manage-page .timeline-order-button > span {
font-size: .86rem;
}
.manage-page .timeline-item-shell .timeline-edit-form,
.manage-page .timeline-item-shell .timeline-delete-form {
margin-left: 0;
}
.manage-page .timeline-add-disclosure > summary::after {
display: none;
content: none;
}
.manage-page .timeline-add-disclosure > summary {
justify-content: flex-start;
}
.manage-page .timeline-add-disclosure > summary > span {
display: grid;
width: 28px;
height: 28px;
place-items: center;
border: 1px solid var(--sl-tide);
border-radius: 50%;
color: var(--editor-action);
font-size: .9rem;
transition: transform .18s ease;
}
.manage-page .timeline-add-disclosure[open] > summary > span {
transform: rotate(45deg);
}
.manage-page #photos .inline-upload {
margin-bottom: 24px;
}
.manage-page #photos .editor-photo-grid {
margin-top: 6px;
}
.manage-page .photo-card-summary {
grid-template-columns: 80px minmax(0, 1fr) auto 18px;
}
.manage-page .photo-card-summary > img.photo-card-thumb {
display: block;
width: 80px;
height: 80px;
object-fit: cover;
}
.manage-page .photo-card-summary > .timeline-edit-label {
align-self: center;
padding: 0;
white-space: nowrap;
}
.manage-page .appearance-preview-card {
display: grid;
grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
gap: clamp(22px, 4vw, 38px);
align-items: center;
}
.manage-page .appearance-preview-art {
display: grid;
overflow: hidden;
width: 100%;
aspect-ratio: 4 / 3;
place-items: center;
background-color: var(--sl-sky-2);
background-image: var(--hero-img);
background-position: center;
background-size: cover;
}
.manage-page .appearance-preview-art img {
width: 58%;
height: 82%;
border: 5px solid rgba(255, 253, 248, .86);
object-fit: cover;
transform-origin: center;
}
.manage-page .appearance-preview-art > span {
display: grid;
width: 82px;
height: 96px;
place-items: center;
border: 5px solid rgba(255, 253, 248, .86);
background: rgba(255, 253, 248, .72);
color: var(--sl-deep);
font-family: var(--serif);
font-size: 1.8rem;
}
.manage-page .appearance-preview-card .content-overline {
margin-bottom: 8px;
}
.manage-page .appearance-preview-card h3 {
margin: 0 0 8px;
font-size: clamp(1.8rem, 3vw, 2.5rem);
}
.manage-page .appearance-preview-card > div:last-child > p:last-child {
margin: 0;
}
.manage-page details.frame-browser {
padding: 18px;
}
.manage-page .frame-browser > summary {
display: flex;
min-height: 54px;
align-items: center;
justify-content: space-between;
gap: 18px;
margin: -18px;
padding: 13px 18px;
color: var(--sl-deep);
list-style: none;
cursor: pointer;
}
.manage-page .frame-browser > summary::-webkit-details-marker {
display: none;
}
.manage-page .frame-browser > summary::after {
width: 9px;
height: 9px;
flex: 0 0 auto;
border-right: 1px solid var(--editor-action);
border-bottom: 1px solid var(--editor-action);
content: "";
transform: rotate(45deg) translateY(-2px);
}
.manage-page .frame-browser[open] > summary {
margin-bottom: 18px;
border-bottom: 1px solid var(--editor-rule);
}
.manage-page .frame-browser[open] > summary::after {
transform: rotate(225deg) translate(-2px, -1px);
}
.manage-page .frame-browser > summary > span {
display: grid;
gap: 3px;
}
.manage-page .frame-browser > summary strong {
font-family: var(--serif);
font-size: 1.35rem;
font-weight: 500;
}
.manage-page .frame-browser > summary small {
color: var(--editor-muted);
font-size: .68rem;
font-weight: 400;
}
.manage-page .focus-axis-controls {
display: grid;
gap: 10px;
margin-top: 14px;
}
.manage-page .focus-axis-controls label {
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
gap: 12px;
align-items: center;
color: var(--editor-muted);
font-size: .68rem;
font-weight: 600;
}
.manage-page .focus-axis-controls input[type="range"] {
width: 100%;
min-height: 44px;
margin: 0;
accent-color: var(--sl-tide);
}
.manage-page .focus-stage:focus-visible {
outline: 2px solid var(--sl-tide);
outline-offset: 3px;
}
.manage-page .sharing-grid {
margin: 0;
}
.manage-page .sharing-card {
min-width: 0;
padding: clamp(22px, 3vw, 30px);
border: 1px solid var(--editor-rule);
background: rgba(255, 253, 248, .34);
}
.manage-page .sharing-card > h2 {
margin-bottom: 20px;
font-size: 1.8rem;
}
.manage-page .sharing-card .upgrade-note {
border-radius: 0;
background: var(--sl-sand);
box-shadow: none;
}
.manage-page .editor-publish-dock > div:first-child {
display: grid;
gap: 3px;
}
.manage-page .editor-publish-dock > div:first-child strong {
color: var(--sl-deep);
font-family: var(--serif);
font-size: 1.28rem;
font-weight: 500;
line-height: 1.1;
}
.manage-page .editor-publish-dock > div:first-child span {
color: var(--editor-muted);
font-size: .7rem;
line-height: 1.45;
}
.manage-page .editor-publish-actions {
display: flex;
min-height: 44px;
flex: 0 0 auto;
flex-wrap: wrap;
gap: 8px 14px;
align-items: center;
justify-content: flex-end;
}
.manage-page .editor-publish-actions form {
margin: 0;
}
.manage-page .editor-publish-actions .text-button,
.manage-page .editor-publish-actions .button {
min-height: 44px;
}
.manage-page .editor-save-form.is-dirty .local-save-note,
.manage-page:has(.editor-save-form.is-dirty) .editor-publish-dock [data-editor-dirty-status] {
color: #765b2d;
font-weight: 600;
}
.manage-page:has(.editor-save-form.is-dirty) .editor-publish-dock {
border-top-color: #a97f42;
}
/* Optional public facts keep the same restrained, ruled visual language. */
.memorial-facts .memorial-interests {
margin-top: 18px;
padding-top: 22px;
border-top: 1px solid var(--sl-line, var(--line));
}
.memorial-facts .memorial-interests h4 {
margin: 0 0 10px;
color: var(--sl-deep, var(--forest-dark));
font-family: var(--serif);
font-size: 1.32rem;
font-weight: 500;
letter-spacing: -.01em;
line-height: 1.2;
}
.memorial-facts .memorial-interest {
padding: 14px 0;
border-top: 1px solid var(--sl-line, var(--line));
}
.memorial-facts .memorial-interest small {
color: var(--sl-functional, var(--forest));
font-size: .62rem;
font-weight: 600;
letter-spacing: .09em;
}
.memorial-facts .memorial-interest span {
color: var(--sl-ink, var(--ink));
font-size: 1.02rem;
line-height: 1.42;
}
@media (max-width: 1024px) {
.manage-page .interest-row {
grid-template-columns: 34px minmax(0, 1fr) minmax(64px, auto);
}
.manage-page details.interest-visibility {
grid-column: 2;
}
.manage-page .interest-remove {
grid-column: 3;
grid-row: 1;
}
}
@media (max-width: 720px) {
.manage-page .manage-tabs .container {
scrollbar-width: none;
}
.manage-page .manage-tabs .container::-webkit-scrollbar {
display: none;
}
.manage-page .account-header nav {
gap: 10px;
}
.manage-page .account-header nav > a {
display: inline-flex;
min-height: 44px;
align-items: center;
font-size: .68rem;
white-space: nowrap;
}
.manage-page .timeline-item-shell {
grid-template-columns: 44px minmax(0, 1fr);
}
.manage-page .timeline-order-actions {
width: 44px;
}
.manage-page .timeline-order-button {
width: 44px;
padding: 0;
font-size: 0;
}
.manage-page .timeline-order-button > span {
font-size: 1rem;
}
.manage-page .photo-card-summary {
grid-template-columns: 72px minmax(0, 1fr) 16px;
}
.manage-page .photo-card-summary > img.photo-card-thumb {
width: 72px;
height: 72px;
}
.manage-page .photo-card-summary > .timeline-edit-label {
display: none;
}
.manage-page .appearance-preview-card {
grid-template-columns: minmax(125px, 170px) minmax(0, 1fr);
gap: 20px;
}
}
@media (max-width: 480px) {
body.account-page.manage-page .account-header .brand-logo {
width: auto;
height: 45px;
}
.manage-page .account-header nav > a.button {
display: none;
}
.manage-page .account-header nav > a:not(.button) {
display: inline-flex;
}
.manage-page .interest-row {
grid-template-columns: 32px minmax(0, 1fr) minmax(58px, auto);
}
.manage-page .interest-row-fields {
grid-column: 2 / -1;
grid-row: 1;
}
.manage-page details.interest-visibility {
grid-column: 2;
grid-row: 2;
}
.manage-page .interest-remove {
grid-column: 3;
grid-row: 2;
align-self: start;
}
.manage-page .appearance-preview-card {
grid-template-columns: 1fr;
}
.manage-page .appearance-preview-art {
max-width: 240px;
}
.manage-page .focus-axis-controls label {
grid-template-columns: 1fr;
gap: 2px;
}
.manage-page .editor-publish-actions {
display: flex;
width: auto;
flex-wrap: nowrap;
gap: 8px;
justify-content: flex-end;
}
.manage-page .editor-publish-actions .text-button,
.manage-page .editor-publish-actions .button,
.manage-page .editor-publish-actions form {
width: auto;
}
.manage-page .editor-publish-actions .text-button {
justify-content: center;
}
.manage-page .editor-publish-dock {
display: grid;
grid-template-columns: 1fr;
gap: 8px 12px;
align-items: center;
padding: 10px 12px;
}
.manage-page .editor-publish-actions {
width: 100%;
justify-content: stretch;
}
.manage-page .editor-publish-actions > *,
.manage-page .editor-publish-actions .button,
.manage-page .editor-publish-actions form,
.manage-page .editor-publish-actions form .button {
width: 100%;
}
.manage-page .editor-publish-dock > div:first-child {
min-width: 0;
}
.manage-page .editor-publish-dock > div:first-child strong {
font-size: 1.08rem;
}
.manage-page .editor-publish-dock > div:first-child span {
font-size: .62rem;
line-height: 1.25;
}
.manage-page .editor-publish-actions .text-button,
.manage-page .editor-publish-actions .button,
.manage-page .editor-publish-actions form .button {
min-height: 40px;
}
.manage-page .editor-publish-actions .button,
.manage-page .editor-publish-actions form .button {
padding-inline: 14px;
}
.memorial-facts .memorial-interests h4 {
font-size: 1.2rem;
}
}
/* Keep the final manager interaction overrides after every compatibility rule. */
body.account-page.manage-page .account-header nav > a,
body.account-page.manage-page .account-header nav > a.button,
body.account-page.manage-page .editor-publish-actions .text-button,
body.account-page.manage-page .editor-publish-actions .button,
body.account-page.manage-page .editor-publish-actions form .button {
min-height: 44px;
}
body.account-page.manage-page .editor-publish-actions .text-button {
min-width: 44px;
}
.manage-page .recently-removed {
margin-top: 18px;
border-color: rgba(132, 81, 65, .32);
background: rgba(244, 232, 223, .38);
}
.manage-page .recently-removed > .muted {
margin: 0;
padding: 0 18px 16px;
}
.manage-page .recently-removed-list {
display: grid;
gap: 0;
border-top: 1px solid var(--editor-rule);
}
.manage-page .recently-removed-list article {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 14px 18px;
}
.manage-page .recently-removed-list article + article {
border-top: 1px solid var(--editor-rule);
}
.manage-page .recently-removed-list article > div {
display: grid;
gap: 3px;
}
.manage-page .recently-removed-list small {
color: var(--sl-muted);
}
@media (max-width: 480px) {
body.account-page.manage-page .account-header nav > a.button {
display: none;
}
body.account-page.manage-page .editor-publish-actions .text-button,
body.account-page.manage-page .editor-publish-actions .button,
body.account-page.manage-page .editor-publish-actions form .button {
min-height: 44px;
}
.manage-page .recently-removed-list article {
align-items: flex-start;
flex-direction: column;
}
}
/* ============================================================
Southern Light sitewide layout system
Extends the homepage's editorial rhythm across public, account,
administration and partner workspaces without changing behaviour.
============================================================ */
body:not(.southern-light-home) {
background: var(--sl-sky);
color: var(--sl-ink);
}
body:not(.southern-light-home) .container {
width: min(1240px, calc(100% - 88px));
}
body:not(.southern-light-home) .button {
min-height: 48px;
padding-inline: 24px;
border-radius: 999px;
box-shadow: none;
font-size: .76rem;
letter-spacing: .025em;
}
body:not(.southern-light-home) .button:hover {
box-shadow: none;
transform: translateY(-1px);
}
body:not(.southern-light-home) .button-secondary {
border: 1px solid var(--sl-deep);
background: transparent;
color: var(--sl-deep);
}
body:not(.southern-light-home) .button-secondary:hover {
background: var(--sl-deep);
color: #fff;
}
body:not(.southern-light-home) .eyebrow,
body:not(.southern-light-home) .content-overline {
color: var(--sl-functional);
font-size: .68rem;
font-weight: 650;
letter-spacing: .16em;
}
body:not(.southern-light-home) .site-header.solid {
height: 82px;
border-bottom: 1px solid var(--sl-line);
background: rgba(238, 240, 236, .97);
backdrop-filter: blur(14px);
}
body:not(.southern-light-home) .site-header .brand-logo {
height: 92px;
}
body:not(.southern-light-home) .site-header .main-nav {
gap: clamp(15px, 1.65vw, 27px);
font-size: .68rem;
font-weight: 650;
letter-spacing: .09em;
text-transform: uppercase;
}
body:not(.southern-light-home) .site-header .nav-login {
margin-left: 0;
}
body:not(.southern-light-home) .content-main {
padding-top: 82px;
}
body:not(.southern-light-home) .content-hero {
padding: clamp(84px, 9vw, 138px) 0 clamp(74px, 8vw, 116px);
border-bottom: 1px solid var(--sl-line);
background: var(--sl-sky);
}
body:not(.southern-light-home) .content-hero h1 {
max-width: 930px;
margin-bottom: 28px;
color: var(--sl-deep);
font-size: clamp(3.45rem, 6.5vw, 6.2rem);
line-height: .93;
}
body:not(.southern-light-home) .content-hero p:not(.eyebrow) {
max-width: 690px;
color: var(--sl-soft);
font-size: clamp(.95rem, 1.2vw, 1.08rem);
}
body:not(.southern-light-home) .content-hero-visual {
border: 1px solid var(--sl-line);
border-radius: 0;
box-shadow: none;
transform: none;
}
body:not(.southern-light-home) .content-section {
padding: clamp(76px, 9vw, 128px) 0;
border-bottom: 1px solid var(--sl-line);
background: rgba(255, 253, 248, .66);
}
body:not(.southern-light-home) .content-narrow {
max-width: 760px;
}
body:not(.southern-light-home) .content-narrow > h2,
body:not(.southern-light-home) .content-section h2 {
color: var(--sl-deep);
line-height: 1;
}
body:not(.southern-light-home) .content-narrow p,
body:not(.southern-light-home) .content-list {
color: var(--sl-soft);
}
body:not(.southern-light-home) .content-cta-card {
margin-top: 64px;
padding: clamp(30px, 5vw, 58px);
border: 0;
border-block: 1px solid var(--sl-line);
border-radius: 0;
background: var(--sl-sand);
box-shadow: none;
}
/* Homepage-compatible editorial footer shared by information pages. */
body:not(.southern-light-home) .site-footer.site-footer-editorial {
padding: 72px 0 0;
background: var(--sl-deep);
color: rgba(255, 255, 255, .72);
}
.site-footer-editorial .hm-footer-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(30px, 5vw, 72px);
padding-bottom: 64px;
}
.site-footer-editorial .hm-footer-group strong {
display: block;
margin-bottom: 19px;
color: #fff;
font-size: .68rem;
font-weight: 650;
letter-spacing: .14em;
text-transform: uppercase;
}
.site-footer-editorial .hm-footer-group nav {
display: grid;
gap: 12px;
}
.site-footer-editorial .hm-footer-group a {
width: fit-content;
color: rgba(255, 255, 255, .68);
font-size: .76rem;
line-height: 1.45;
}
.site-footer-editorial .hm-footer-group a:hover,
.site-footer-editorial .hm-footer-group a:focus-visible {
color: #fff;
}
body:not(.southern-light-home) .site-footer.site-footer-editorial a:hover,
body:not(.southern-light-home) .site-footer.site-footer-editorial a:focus-visible {
color: #fff;
}
.site-footer-editorial .hm-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 22px 0 25px;
border-top: 1px solid rgba(255, 255, 255, .16);
color: rgba(255, 255, 255, .5);
font-size: .66rem;
}
.site-footer-editorial .hm-footer-bottom p {
margin: 0;
}
/* Quiet, non-blocking first-visit choice. The Privacy settings panel stays wide. */
.marketing-consent-banner {
right: max(12px, env(safe-area-inset-right));
bottom: max(12px, env(safe-area-inset-bottom));
left: auto;
width: min(410px, calc(100% - 24px));
color: var(--sl-ink);
}
.marketing-consent-banner .marketing-consent-inner {
display: block;
width: 100%;
margin: 0;
padding: 17px 18px 15px;
border: 1px solid var(--sl-line);
border-radius: 0;
background: rgba(255, 253, 248, .98);
box-shadow: 0 12px 34px rgba(44, 53, 53, .13);
}
.marketing-consent-banner .marketing-consent-inner strong {
margin-bottom: 5px;
color: var(--sl-deep);
font-family: var(--sans);
font-size: .75rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
.marketing-consent-banner .marketing-consent-inner p {
max-width: 43ch;
color: var(--sl-soft);
font-size: .76rem;
line-height: 1.5;
}
.marketing-consent-banner .marketing-consent-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 12px;
}
.marketing-consent-banner .marketing-consent-button {
width: 100%;
min-height: 44px;
padding: 8px 12px;
border: 1px solid var(--sl-deep);
border-radius: 999px;
background: transparent;
color: var(--sl-deep);
font-size: .72rem;
}
.marketing-consent-banner .marketing-consent-button:hover,
.marketing-consent-banner .marketing-consent-button:focus-visible,
.marketing-consent-banner .marketing-consent-button[aria-current="true"] {
background: var(--sl-deep);
color: #fff;
}
.marketing-consent-banner > .marketing-consent-inner > a,
.marketing-consent-banner .marketing-consent-inner > a {
display: inline-flex;
min-height: 34px;
align-items: center;
margin-top: 5px;
color: var(--sl-soft);
font-size: .68rem;
}
/* Authentication and customer workspace pages. */
body.auth-page {
display: grid;
min-height: 100vh;
grid-template-rows: auto minmax(0, 1fr) auto;
background: var(--sl-sky);
}
body.auth-page .auth-shell {
min-height: 0;
}
body.auth-page .auth-card {
background: rgba(238, 240, 236, .72);
}
body.auth-page .auth-card h1 {
color: var(--sl-deep);
font-size: clamp(3.25rem, 5.2vw, 5rem);
}
body:not(.southern-light-home) .auth-switch,
body:not(.southern-light-home) .field-help,
body:not(.southern-light-home) .field-optional,
body:not(.southern-light-home) .claim-small {
color: var(--sl-soft);
}
/* Token-free tracking relays still deserve the same calm, trustworthy shell. */
body.auth-page.auth-relay-page {
grid-template-rows: minmax(0, 1fr);
}
body.auth-page .auth-relay-shell {
display: grid;
min-height: 100vh;
grid-template-columns: minmax(0, 1fr);
place-items: center;
padding: clamp(24px, 5vw, 64px);
}
body.auth-page .auth-relay-card {
width: min(100%, 720px);
min-height: min(620px, calc(100vh - 48px));
justify-content: center;
padding: clamp(42px, 8vw, 84px);
border: 1px solid var(--sl-line);
background: rgba(255, 253, 248, .78);
}
.auth-relay-brand {
display: inline-flex;
width: fit-content;
margin-bottom: clamp(40px, 7vh, 72px);
}
.auth-relay-brand img {
width: 142px;
height: auto;
}
body.account-page:not(.director-portal) .account-header,
body.create-page .create-header,
body.auth-page .auth-header {
min-height: 82px;
border-bottom: 1px solid var(--sl-line);
background: rgba(238, 240, 236, .97);
}
body.account-page:not(.director-portal) .account-main {
padding: clamp(56px, 7vw, 96px) 0 120px;
}
body.account-page:not(.director-portal) .account-welcome {
margin-bottom: 48px;
padding-bottom: 36px;
border-bottom: 1px solid var(--sl-line);
}
body.account-page:not(.director-portal) .account-welcome h1 {
color: var(--sl-deep);
font-size: clamp(3.3rem, 5.8vw, 5.5rem);
}
body.account-page:not(.director-portal) .account-panel,
body.account-page:not(.director-portal) .account-memorial-card {
border-color: var(--sl-line);
border-radius: 0;
background: rgba(255, 253, 248, .74);
box-shadow: none;
}
body.account-page:not(.director-portal) .account-panel {
padding: clamp(28px, 4vw, 46px);
}
body.account-page:not(.director-portal) .account-memorial-card {
min-height: 94px;
padding: 15px;
}
body.create-page .create-aside {
border-right: 1px solid var(--sl-line);
background: var(--sl-sky-2);
color: var(--sl-deep);
}
body.create-page .create-main {
background: var(--sl-sky);
}
/* Administration keeps dense data, but adopts the same ruled workspace. */
.admin-tabs {
gap: 0;
margin: 0 0 34px;
border-block: 1px solid var(--sl-line);
}
.admin-tabs a {
min-height: 46px;
display: inline-flex;
align-items: center;
padding: 0 16px;
border: 0;
border-radius: 0;
color: var(--sl-soft);
font-size: .7rem;
}
.admin-tabs a.active {
background: var(--sl-deep);
color: #fff;
}
body.account-page .admin-tabs a.active,
body.director-portal .director-filter a.on {
border-color: var(--sl-deep);
background: var(--sl-deep);
color: #fff;
}
.admin-stat-grid {
gap: 0;
border-block: 1px solid var(--sl-line);
}
.admin-stat {
min-height: 118px;
padding: 24px;
border: 0;
border-right: 1px solid var(--sl-line);
border-radius: 0;
background: transparent;
}
.admin-stat:last-child {
border-right: 0;
}
.admin-table-wrap,
.admin-comment,
.admin-delete-confirmation {
border-radius: 0;
box-shadow: none;
}
.admin-table-wrap {
border-color: var(--sl-line);
background: rgba(255, 253, 248, .72);
}
.admin-table th {
background: var(--sl-sky-2);
}
.admin-btn {
display: inline-flex;
min-height: 42px;
align-items: center;
justify-content: center;
padding: 8px 13px;
border-radius: 999px;
}
/* Funeral-director public landing. */
body.fd-page .fd-hero {
padding-block: clamp(70px, 8vw, 118px);
}
.fd-page .fd-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
gap: clamp(46px, 7vw, 104px);
align-items: center;
}
body.fd-page .fd-hero-copy h1 {
max-width: 18ch;
margin: 0 0 14px;
font-size: clamp(2.35rem, 3.4vw, 3.25rem);
letter-spacing: 0;
line-height: 1.2;
}
.fd-page .fd-hero-copy > p:not(.eyebrow) {
max-width: 62ch;
}
.fd-page .fd-hero-visual {
position: relative;
margin: 0;
min-height: 560px;
overflow: hidden;
border-left: 1px solid var(--sl-line);
}
.fd-page .fd-hero-visual img {
width: 100%;
height: 100%;
min-height: 560px;
object-fit: cover;
}
.fd-page .fd-hero-visual figcaption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 14px 18px;
background: rgba(47, 60, 60, .86);
color: rgba(255, 255, 255, .8);
font-size: .68rem;
}
.fd-page .fd-hero-ctas {
gap: 10px;
}
.fd-page .fd-trust {
padding-top: 25px;
border-top: 1px solid var(--sl-line);
}
.fd-page .fd-step,
.fd-page .fd-benefit,
.fd-page .fd-pack,
.fd-page .fd-dash,
.fd-page .fd-faq-item {
border-radius: 0;
box-shadow: none;
}
.fd-page .fd-step,
.fd-page .fd-benefit,
.fd-page .fd-pack {
border-color: var(--sl-line);
background: rgba(255, 253, 248, .56);
}
body.fd-page .fd-promise-band {
background: var(--sl-deep);
color: #fff;
}
body.fd-page .fd-promise-band h2,
body.fd-page .fd-promise-band p {
color: inherit;
}
body.fd-page .fd-sub,
body.fd-page .fd-example figcaption,
body.fd-page .fd-dash-stats span,
body.fd-page .fd-dash-heading,
body.fd-page .fd-dash-table th,
body.fd-page .fd-pack-qty,
body.fd-page .fd-pack-price span,
body.fd-page .fd-pack-each,
body.fd-page .fd-price-notes li,
body.fd-page .fd-final p,
body.fd-page .fd-small {
color: var(--sl-soft);
}
/* Partner workspace: a calm editorial tool, not a marketing page. */
body.director-portal {
min-height: 100vh;
background: var(--sl-sky);
}
.director-workspace {
display: grid;
min-height: 100vh;
grid-template-columns: 278px minmax(0, 1fr);
}
.director-sidebar {
position: sticky;
z-index: 80;
top: 0;
display: flex;
height: 100vh;
flex-direction: column;
padding: 30px 25px 24px;
border-right: 1px solid var(--sl-line);
background: var(--sl-sky-2);
overflow-y: auto;
overscroll-behavior: contain;
}
.director-workspace-brand {
display: inline-grid;
width: fit-content;
gap: 2px;
color: var(--sl-deep);
}
.director-workspace-brand img {
width: 130px;
height: auto;
}
.director-workspace-brand span,
.director-mobile-brand span {
color: var(--sl-functional);
font-size: .65rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.director-org-context {
display: grid;
gap: 7px;
margin: 34px 0 24px;
padding: 20px 0;
border-block: 1px solid var(--sl-line);
}
.director-org-context-label {
color: var(--sl-soft);
font-size: .62rem;
font-weight: 650;
letter-spacing: .12em;
text-transform: uppercase;
}
.director-org-context > strong {
color: var(--sl-deep);
font-family: var(--serif);
font-size: 1.35rem;
font-weight: 500;
line-height: 1.1;
overflow-wrap: anywhere;
}
.director-org-context .director-badge {
width: fit-content;
}
.director-workspace-nav {
display: grid;
}
.director-workspace-nav a {
position: relative;
display: flex;
min-height: 50px;
align-items: center;
padding: 0 10px;
border-bottom: 1px solid var(--sl-line);
color: var(--sl-soft);
font-size: .76rem;
font-weight: 600;
}
.director-workspace-nav a:first-child {
border-top: 1px solid var(--sl-line);
}
.director-workspace-nav a:hover,
.director-workspace-nav a.director-nav-active {
padding-left: 18px;
background: rgba(255, 253, 248, .48);
color: var(--sl-deep);
}
.director-workspace-nav a.director-nav-active::before {
position: absolute;
left: 0;
width: 3px;
height: 24px;
content: "";
background: var(--sl-tide);
}
.director-sidebar-foot {
display: grid;
gap: 8px;
margin-top: auto;
padding-top: 24px;
color: var(--sl-soft);
font-size: .7rem;
}
.director-sidebar-foot a,
.director-sidebar-foot button {
display: inline-flex;
min-height: 36px;
align-items: center;
}
.director-logout-form {
margin: 0;
}
.director-logout-form button {
padding: 0;
border: 0;
background: transparent;
color: var(--sl-deep);
font: inherit;
font-weight: 650;
cursor: pointer;
}
.director-workspace-body {
display: grid;
min-width: 0;
min-height: 100vh;
grid-template-rows: minmax(0, 1fr) auto;
}
.director-mobile-bar {
display: none;
}
.director-workspace-main {
min-width: 0;
padding: clamp(46px, 6vw, 82px) clamp(30px, 6vw, 84px) 90px;
}
.director-workspace-content {
width: min(1120px, 100%);
margin: 0 auto;
}
.director-page-head {
align-items: end;
margin: 0 0 38px;
padding-bottom: 30px;
border-bottom: 1px solid var(--sl-line);
}
.director-page-head h1 {
max-width: 13ch;
margin: 0;
color: var(--sl-deep);
font-size: clamp(3.25rem, 5.4vw, 5.3rem);
line-height: .94;
}
.director-page-lead {
max-width: 64ch;
margin: 14px 0 0;
color: var(--sl-soft);
font-size: .86rem;
line-height: 1.65;
}
.director-head-actions .button {
min-height: 48px;
}
.director-stat-grid {
gap: 0;
margin: 0 0 32px;
border-block: 1px solid var(--sl-line);
}
.director-stat {
min-height: 132px;
padding: 25px 22px;
border: 0;
border-right: 1px solid var(--sl-line);
border-radius: 0;
background: transparent;
}
.director-stat:last-child {
border-right: 0;
}
.director-stat .num {
color: var(--sl-deep);
font-size: 3rem;
line-height: 1;
}
.director-stat .lbl {
max-width: 22ch;
margin-top: 12px;
color: var(--sl-soft);
font-size: .7rem;
line-height: 1.45;
}
.director-panel,
.director-context-card,
.director-review-panel,
.director-form-panel,
.director-security-panel {
margin-bottom: 22px;
padding: clamp(27px, 4vw, 44px);
border: 1px solid var(--sl-line);
border-radius: 0;
background: rgba(255, 253, 248, .72);
box-shadow: none;
}
.director-panel-head {
align-items: center;
margin-bottom: 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--sl-line);
}
.director-panel-head h2,
.director-panel > h2,
.director-form-panel h2,
.director-security-panel h2,
.director-review-panel h2 {
margin: 0;
color: var(--sl-deep);
font-size: clamp(1.8rem, 2.6vw, 2.55rem);
}
.director-cancel-confirmation {
border-color: #d9aaa0;
border-left: 5px solid #8f4536;
background: #fff8f5;
scroll-margin-top: 96px;
}
.director-cancel-confirmation .content-overline {
color: #753c36;
}
.director-cancel-confirmation > p:not(.content-overline) {
max-width: 760px;
color: var(--sl-soft);
}
.director-cancel-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 24px 0;
}
.director-cancel-details > div {
min-width: 0;
padding: 15px 16px;
border: 1px solid rgba(143, 69, 54, .18);
background: #fff;
}
.director-cancel-details dt {
margin-bottom: 5px;
color: var(--sl-soft);
font-size: .64rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
.director-cancel-details dd {
margin: 0;
color: var(--sl-deep);
font-size: .8rem;
font-weight: 650;
overflow-wrap: anywhere;
}
.director-cancel-confirmation .director-action-danger {
border-color: #8f4536;
background: #8f4536;
color: #fff;
}
body.director-portal .director-promise {
border: 0;
background: var(--sl-deep);
color: #fff;
}
body.director-portal .director-promise h2,
body.director-portal .director-promise p {
color: inherit;
}
body.director-portal .director-promise p {
opacity: .76;
}
.director-table-wrap {
overflow-x: auto;
overscroll-behavior-inline: contain;
border: 1px solid var(--sl-line);
background: rgba(255, 253, 248, .68);
}
.director-table {
min-width: 760px;
font-size: .8rem;
}
.director-table-caption {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.director-table th {
padding: 13px 14px;
border-bottom: 1px solid var(--sl-line);
background: var(--sl-sky-2);
color: var(--sl-soft);
font-size: .64rem;
}
.director-table td {
padding: 15px 14px;
border-bottom-color: var(--sl-line);
overflow-wrap: anywhere;
}
body.director-portal .director-muted {
color: var(--sl-soft);
}
body.director-portal .director-stat .lbl,
body.director-portal .director-empty,
body.director-portal .director-footnote,
body.director-portal .director-pack-qty,
body.director-portal .director-pack-price span,
body.director-portal .director-pack-each {
color: var(--sl-soft);
}
.director-badge-expired,
.director-badge-cancelled,
.director-badge-disabled {
color: #5c5c50;
}
.director-action,
.director-filter a {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
padding: 8px 14px;
border-radius: 999px;
font-size: .72rem;
}
.director-filter {
gap: 7px;
margin-bottom: 24px;
}
.director-inline-form,
.director-review-actions,
.director-form-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
align-items: center;
}
.director-pack-row {
grid-template-columns: repeat(2, minmax(240px, 1fr));
gap: 16px;
}
.director-pack {
display: flex;
min-height: 320px;
flex-direction: column;
align-items: flex-start;
padding: 32px;
border-color: var(--sl-line);
border-radius: 0;
background: var(--sl-sky);
text-align: left;
}
.director-pack-price {
margin: 12px 0 5px;
font-size: 3.1rem;
}
.director-pack form,
.director-pack > .director-muted {
width: 100%;
margin-top: auto;
}
.director-pack .button {
width: 100%;
}
.director-form-layout,
.director-settings-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
gap: 20px;
align-items: start;
}
.director-form-panel .director-form .field,
.director-security-panel .director-form .field,
.director-settings-grid .director-form .field {
max-width: none;
}
.director-form input,
.director-form select,
.director-form textarea {
min-height: 52px;
}
.director-form textarea {
min-height: 140px;
}
.director-terms-box {
border-color: var(--sl-line);
border-radius: 0;
background: var(--sl-sand);
}
.director-status-banner,
.director-flash {
border-radius: 0;
}
.director-workspace-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 22px clamp(30px, 6vw, 84px);
border-top: 1px solid var(--sl-line);
color: var(--sl-soft);
font-size: .68rem;
}
.director-workspace-footer nav {
display: flex;
gap: 18px;
}
/* Partner sign-in uses the same photographic split language as family auth. */
.director-auth-page .director-auth-aside {
isolation: isolate;
display: block;
padding: 0;
background: var(--sl-deep);
}
.director-auth-page .director-auth-card {
max-width: none;
}
@media (min-width: 981px) {
.director-auth-page .director-auth-aside {
position: sticky;
top: 82px;
align-self: start;
height: calc(100vh - 82px);
min-height: 0;
}
}
.director-auth-page .director-auth-aside > div {
max-width: none;
}
.director-auth-page .director-auth-aside .director-auth-aside-media {
position: absolute;
inset: 0;
}
.director-auth-aside-media::after {
position: absolute;
inset: 0;
z-index: 1;
content: "";
background: linear-gradient(180deg, rgba(47, 60, 60, .08), rgba(47, 60, 60, .9));
}
.director-auth-aside-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.director-auth-aside-copy {
position: relative;
z-index: 2;
display: flex;
min-height: 100%;
flex-direction: column;
justify-content: flex-end;
padding: clamp(40px, 7vw, 88px);
color: #fff;
}
.director-auth-aside-copy blockquote {
max-width: 15ch;
}
.director-auth-actions {
display: flex;
align-items: center;
gap: 18px;
}
.director-auth-logout {
margin: 0;
}
.director-auth-logout button {
min-height: 40px;
padding: 0;
border: 0;
background: transparent;
color: var(--sl-deep);
font-size: .74rem;
font-weight: 650;
cursor: pointer;
}
@media (max-width: 1080px) {
body:not(.southern-light-home) .container {
width: min(1240px, calc(100% - 48px));
}
body:not(.southern-light-home) .site-header .main-nav {
gap: 15px;
font-size: .62rem;
}
.fd-page .fd-hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr);
gap: 42px;
}
.director-workspace {
grid-template-columns: 244px minmax(0, 1fr);
}
.director-sidebar {
padding-inline: 20px;
}
.director-form-layout,
.director-settings-grid {
grid-template-columns: 1fr;
}
.director-table-wrap {
overflow-x: auto;
}
}
@media (min-width: 981px) and (max-width: 1300px) {
body.fd-page .fd-hero {
padding-block: 54px 74px;
}
.fd-page .fd-hero-grid {
grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
gap: 36px;
align-items: start;
}
.fd-page .fd-hero-visual,
.fd-page .fd-hero-visual img {
min-height: 480px;
}
}
@media (min-width: 981px) and (max-width: 1200px) {
body:not(.southern-light-home) .content-hero-with-visual {
align-items: stretch;
}
body:not(.southern-light-home) .content-hero-visual img {
height: 100%;
min-height: 420px;
aspect-ratio: auto;
}
}
@media (max-width: 980px) {
.director-auth-page .director-auth-aside {
display: none;
}
}
@media (max-width: 900px) {
.director-workspace {
display: block;
}
.director-sidebar {
display: none;
}
.director-workspace-body {
display: grid;
min-height: 100vh;
grid-template-rows: auto minmax(0, 1fr) auto;
}
.director-mobile-bar {
position: sticky;
z-index: 100;
top: 0;
display: flex;
min-height: 76px;
align-items: center;
justify-content: space-between;
padding: 10px 24px;
border-bottom: 1px solid var(--sl-line);
background: rgba(238, 240, 236, .98);
}
.director-mobile-brand {
display: flex;
align-items: center;
gap: 10px;
}
.director-mobile-brand img {
width: 88px;
height: auto;
}
.director-mobile-nav-toggle {
display: inline-flex;
min-width: 76px;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 15px;
border: 1px solid var(--sl-deep);
border-radius: 999px;
background: transparent;
color: var(--sl-deep);
font-size: .72rem;
font-weight: 650;
}
.director-mobile-navigation {
position: absolute;
z-index: 1;
top: calc(100% - 1px);
right: 0;
left: 0;
display: grid;
padding: 8px 24px 22px;
border-bottom: 1px solid var(--sl-line);
background: var(--sl-sky-2);
box-shadow: 0 18px 35px rgba(44, 53, 53, .12);
max-height: calc(100dvh - 75px);
overflow-y: auto;
overscroll-behavior: contain;
}
.director-mobile-navigation[hidden] {
display: none;
}
.director-mobile-navigation-noscript {
display: grid;
}
.director-mobile-bar:has(.director-mobile-navigation-noscript) .director-mobile-nav-toggle {
display: none;
}
.director-mobile-navigation p {
margin: 8px 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--sl-line);
}
.director-mobile-navigation p strong {
overflow-wrap: anywhere;
}
.director-mobile-navigation a,
.director-mobile-navigation button {
display: flex;
min-height: 46px;
align-items: center;
padding: 0;
border: 0;
border-bottom: 1px solid var(--sl-line);
background: transparent;
color: var(--sl-deep);
font-size: .78rem;
font-weight: 600;
}
.director-mobile-navigation a.director-nav-active {
color: var(--sl-functional);
}
.director-workspace-main {
padding: 48px 28px 72px;
}
.director-form-layout,
.director-settings-grid {
grid-template-columns: 1fr;
}
.fd-page .fd-hero-grid {
grid-template-columns: 1fr;
}
body.fd-page .fd-hero-copy h1 {
max-width: 24ch;
font-size: clamp(2rem, 6vw, 2.7rem);
}
.fd-page .fd-hero-visual,
.fd-page .fd-hero-visual img {
min-height: 420px;
}
}
@media (max-width: 720px) {
body:not(.southern-light-home) .site-header:not(.memorial-topbar).solid {
height: 66px;
min-height: 66px;
}
body.auth-page .auth-header {
height: 66px;
min-height: 66px;
}
body.auth-page .auth-back,
body.auth-page .director-auth-back {
display: inline-flex;
min-height: 44px;
align-items: center;
padding-inline: 2px;
color: var(--sl-soft);
font-size: .75rem;
}
body:not(.southern-light-home) .site-header .brand-logo {
height: 60px;
}
body:not(.southern-light-home) .content-main {
padding-top: 66px;
}
body.create-page .create-header {
min-height: 66px;
}
body.create-page .create-shell {
min-height: calc(100vh - 66px);
}
body:not(.southern-light-home) .container {
width: min(1240px, calc(100% - 36px));
}
body:not(.southern-light-home) .content-hero {
padding-top: 72px;
}
body:not(.southern-light-home) .content-hero h1 {
font-size: clamp(3rem, 14vw, 4.4rem);
}
body.auth-page .auth-aside:not(.director-auth-aside) {
display: none;
}
body.auth-page .auth-card {
padding: 52px 24px 64px;
}
body.account-page:not(.director-portal) .account-header {
height: auto;
}
body.account-page:not(.director-portal) .account-header .container {
min-height: 76px;
flex-wrap: wrap;
gap: 10px 18px;
padding-block: 8px;
}
body.account-page:not(.director-portal) .account-header nav {
max-width: 100%;
gap: 15px;
overflow-x: auto;
}
body.account-page:not(.director-portal) .account-header nav > a {
display: inline-flex;
flex: 0 0 auto;
}
.site-footer-editorial .hm-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 38px 28px;
}
.site-footer-editorial .hm-footer-bottom {
align-items: flex-start;
flex-direction: column;
}
.director-page-head {
align-items: flex-start;
flex-direction: column;
}
.director-page-head h1 {
font-size: clamp(3rem, 14vw, 4.45rem);
}
.director-stat-grid {
grid-template-columns: repeat(2, 1fr);
}
.director-stat:nth-child(2) {
border-right: 0;
}
.director-stat:nth-child(-n + 2) {
border-bottom: 1px solid var(--sl-line);
}
.director-pack-row {
grid-template-columns: 1fr;
}
.director-table-wrap {
overflow: visible;
border: 0;
background: transparent;
}
.director-table,
.director-table tbody,
.director-table tr,
.director-table td {
display: block;
width: 100%;
min-width: 0;
}
.director-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.director-table tr {
margin-bottom: 12px;
padding: 12px 17px;
border: 1px solid var(--sl-line);
background: rgba(255, 253, 248, .72);
}
.director-table td,
.director-table td.num-col {
display: grid;
min-height: 42px;
grid-template-columns: minmax(108px, .42fr) minmax(0, 1fr);
gap: 14px;
align-items: start;
padding: 10px 0;
border: 0;
border-bottom: 1px solid var(--sl-line);
text-align: left;
}
.director-table td:last-child {
border-bottom: 0;
}
.director-table td::before {
content: attr(data-label);
color: var(--sl-soft);
font-size: .62rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.director-table td > * {
grid-column: 2;
}
.director-inline-form {
align-items: flex-start;
flex-direction: column;
}
.director-action {
width: 100%;
}
.director-workspace-footer {
align-items: flex-start;
flex-direction: column;
padding-inline: 28px;
}
.director-auth-page .auth-shell {
grid-template-columns: 1fr;
}
.director-auth-page .director-auth-aside {
display: none;
}
.fd-page .fd-hero-visual,
.fd-page .fd-hero-visual img {
min-height: 340px;
}
}
@media (max-width: 520px) {
body:not(.southern-light-home) .site-header:not(.memorial-topbar).solid {
height: 56px;
min-height: 56px;
}
body.auth-page .auth-header {
height: 56px;
min-height: 56px;
}
body:not(.southern-light-home) .site-header .brand-logo {
height: 50px;
}
body:not(.southern-light-home) .content-main {
padding-top: 56px;
}
.marketing-consent-banner {
right: max(8px, env(safe-area-inset-right));
bottom: max(8px, env(safe-area-inset-bottom));
left: max(8px, env(safe-area-inset-left));
width: auto;
}
.marketing-consent-banner .marketing-consent-inner {
padding: 15px;
}
.marketing-consent-banner .marketing-consent-actions {
grid-template-columns: 1fr 1fr;
}
.site-footer-editorial .hm-footer-grid {
grid-template-columns: 1fr;
}
.director-mobile-bar {
padding-inline: 18px;
}
.director-mobile-navigation {
padding-inline: 18px;
}
.director-workspace-main {
padding: 38px 18px 62px;
}
.director-page-head {
margin-bottom: 28px;
padding-bottom: 24px;
}
.director-stat {
min-height: 118px;
padding: 20px 16px;
}
.director-panel,
.director-context-card,
.director-review-panel,
.director-form-panel,
.director-security-panel {
padding: 24px 19px;
}
.director-field-row {
grid-template-columns: 1fr;
}
.director-cancel-details {
grid-template-columns: 1fr;
}
}
@media (max-width: 430px) {
body:not(.southern-light-home) .site-header:not(.memorial-topbar).solid {
height: 50px;
min-height: 50px;
}
body.auth-page .auth-header {
height: 50px;
min-height: 50px;
}
body:not(.southern-light-home) .site-header .brand-logo {
height: 44px;
}
body:not(.southern-light-home) .content-main {
padding-top: 50px;
}
}
/* Compact memorial-manager masthead and readiness overview. */
body.account-page.manage-page .account-header,
body.account-page.manage-page .account-header .container {
height: 64px;
min-height: 64px;
}
body.account-page.manage-page .account-header .brand-logo {
width: auto;
height: 52px;
}
.manage-page .manager-action-short {
display: none;
}
.manage-page .manage-main {
padding-top: 22px;
}
.manage-page .manage-heading {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
gap: 8px 40px;
align-items: end;
margin-bottom: 20px;
padding-bottom: 18px;
}
.manage-page .manage-heading-identity,
.manage-page .manage-heading-meta {
min-width: 0;
}
.manage-page .manage-heading h1,
body:not(.southern-light-home).manage-page .manage-heading h1 {
max-width: none;
margin: 2px 0 0;
overflow-wrap: anywhere;
font-size: clamp(2.35rem, 3.1vw, 3.3rem);
line-height: .98;
}
.manage-page .manage-heading .eyebrow,
.manage-page .manage-heading-meta p,
.manage-page .manage-heading-meta small {
margin: 0;
}
.manage-page .manage-heading-meta {
display: grid;
gap: 7px;
align-content: end;
padding-bottom: 2px;
}
.manage-page .manage-heading-meta p {
color: var(--sl-ink);
font-size: .8rem;
line-height: 1.5;
}
.manage-page .manage-heading-meta small {
justify-self: start;
padding: 5px 9px;
border: 1px solid var(--editor-rule);
background: rgba(255, 253, 248, .55);
color: var(--editor-muted);
font-size: .67rem;
line-height: 1.3;
}
@media (min-width: 1401px) {
.manage-page .manage-tabs .container {
min-height: 58px;
}
.manage-page .editor-nav-group {
align-items: stretch;
flex-direction: column;
padding: 0 4px;
}
.manage-page .editor-nav-group > small {
display: flex;
width: auto;
min-height: 13px;
padding: 2px 8px 1px;
font-size: .62rem;
line-height: 1.1;
}
.manage-page .editor-nav-group > span {
align-items: flex-end;
gap: 4px;
}
.manage-page .editor-nav-group [data-section-link] {
min-height: 44px;
padding: 0 10px;
}
}
@media (max-width: 1400px) {
.manage-page.has-section-tabs .manage-tabs .container {
padding-block: 5px;
}
.manage-page.has-section-tabs .editor-section-picker select {
min-height: 44px;
}
}
.manage-page .editor-status-panel.editor-status-disclosure {
display: block;
margin-bottom: 20px;
padding: 0;
overflow: hidden;
}
.manage-page .editor-status-disclosure > summary {
display: grid;
min-height: 72px;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
padding: 14px 20px;
cursor: pointer;
list-style: none;
}
.manage-page .editor-status-disclosure > summary::-webkit-details-marker {
display: none;
}
.manage-page .editor-status-disclosure > summary:focus-visible {
outline: 3px solid var(--sl-tide);
outline-offset: -3px;
}
.manage-page .editor-status-summary-copy {
min-width: 0;
}
.manage-page .editor-status-summary-copy .content-overline {
display: block;
margin: 0;
}
.manage-page .editor-status-title {
display: block;
margin-top: 2px;
color: var(--sl-deep);
font-family: var(--serif);
font-size: 1.55rem;
font-weight: 500;
line-height: 1.08;
}
.manage-page .editor-status-summary-action {
display: grid;
gap: 3px;
color: var(--editor-muted);
font-size: .68rem;
text-align: right;
white-space: nowrap;
}
.manage-page .editor-status-show,
.manage-page .editor-status-hide {
color: var(--editor-action);
font-weight: 700;
}
.manage-page .editor-status-hide,
.manage-page .editor-status-disclosure[open] .editor-status-show {
display: none;
}
.manage-page .editor-status-disclosure[open] .editor-status-hide {
display: inline;
}
.manage-page .editor-status-body {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(480px, 1.2fr);
gap: 32px;
padding: 20px 24px 24px;
border-top: 1px solid var(--editor-rule);
}
.manage-page .editor-status-body .editor-status-copy p {
margin: 0;
}
.manage-page .editor-status-body .editor-checklist {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 18px;
}
.manage-page .editor-status-body .editor-checklist > li > a {
min-height: 44px;
padding: 8px 0;
}
@media (max-width: 900px) {
.manage-page .manage-main {
padding-top: 16px;
}
.manage-page .manage-heading {
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 18px;
padding-bottom: 14px;
}
.manage-page .manage-heading h1,
body:not(.southern-light-home).manage-page .manage-heading h1 {
font-size: clamp(2.15rem, 9vw, 2.8rem);
}
.manage-page .editor-status-body {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
body.account-page.manage-page .account-header,
body.account-page.manage-page .account-header .container {
height: 62px;
min-height: 62px;
}
body.account-page.manage-page .account-header .container {
flex-wrap: nowrap;
padding-block: 4px;
}
body.account-page.manage-page .account-header .brand-logo {
height: 48px;
}
}
@media (max-width: 640px) {
.manage-page .editor-status-body .editor-checklist {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
body.account-page.manage-page .account-header nav > a.button {
display: inline-flex;
}
.manage-page .manager-action-full {
display: none;
}
.manage-page .manager-action-short {
display: inline;
}
.manage-page .editor-status-disclosure > summary {
grid-template-columns: 1fr;
gap: 8px;
}
.manage-page .editor-status-summary-action {
display: flex;
flex-wrap: wrap;
gap: 5px 12px;
text-align: left;
white-space: normal;
}
.manage-page .editor-status-title {
font-size: 1.4rem;
}
.manage-page .editor-status-body {
padding: 18px;
}
}
@media (max-width: 380px) {
.manage-page .editor-status-body .editor-checklist {
grid-template-columns: 1fr;
}
}
/* Funeral-home acknowledgement: invitation disclosure, family control and
the quiet public credit shown only for an approved, family-visible record. */
.claim-attribution-note {
margin-top: 28px;
padding: 22px 24px;
border: 1px solid rgba(47, 65, 50, .18);
border-left: 4px solid var(--sage, #6f8779);
border-radius: 8px;
background: #f7f5ee;
}
.claim-attribution-note h3 {
margin: 0 0 8px;
color: var(--forest, #2f4132);
font-family: var(--serif, "Newsreader", Georgia, serif);
font-size: 1.35rem;
font-weight: 500;
}
.claim-attribution-note p {
margin: 8px 0 0;
}
.manage-page .director-attribution-control {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
gap: 24px;
margin-top: 28px;
padding-top: 26px;
border-top: 1px solid var(--editor-rule, rgba(33, 60, 51, .18));
}
.manage-page .director-attribution-control-copy .content-overline {
margin-bottom: 6px;
}
.manage-page .director-attribution-control-copy h4 {
margin: 0;
color: var(--sl-deep, #173e3d);
font-family: var(--serif, "Newsreader", Georgia, serif);
font-size: 1.35rem;
font-weight: 500;
line-height: 1.15;
}
.manage-page .director-attribution-control-copy > p:not(.content-overline) {
margin: 10px 0 0;
color: var(--editor-muted, #61716b);
font-size: .82rem;
}
.manage-page .director-attribution-policy-note {
padding: 12px 14px;
border-left: 3px solid var(--sl-clay, #c66f4e);
background: #f4eee4;
color: var(--sl-ink, #183131);
line-height: 1.5;
}
.manage-page .director-attribution-form fieldset {
display: grid;
gap: 9px;
margin: 0;
padding: 0;
border: 0;
}
.manage-page .director-attribution-form legend {
margin-bottom: 10px;
color: var(--sl-deep, #173e3d);
font-size: .78rem;
font-weight: 700;
}
.manage-page .director-attribution-form label {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 11px;
align-items: start;
padding: 12px 14px;
border: 1px solid var(--editor-rule, rgba(33, 60, 51, .18));
border-radius: 8px;
background: rgba(255, 255, 255, .58);
cursor: pointer;
}
.manage-page .director-attribution-form label:has(input:checked) {
border-color: var(--editor-action, #32655c);
box-shadow: inset 0 0 0 1px var(--editor-action, #32655c);
}
.manage-page .director-attribution-form input {
width: 18px;
height: 18px;
margin: 2px 0 0;
accent-color: var(--editor-action, #32655c);
}
.manage-page .director-attribution-form label span {
display: grid;
gap: 2px;
}
.manage-page .director-attribution-form label strong {
color: var(--sl-deep, #173e3d);
font-size: .8rem;
}
.manage-page .director-attribution-form label small,
.manage-page .director-attribution-family-note {
color: var(--editor-muted, #61716b);
font-size: .72rem;
line-height: 1.5;
}
.manage-page .director-attribution-family-note {
margin: 12px 0;
}
.memorial-partner-attribution {
padding: 46px 0;
border-top: 1px solid rgba(47, 65, 50, .13);
border-bottom: 1px solid rgba(47, 65, 50, .13);
background: #f5f3ec;
color: var(--forest, #2f4132);
}
.memorial-partner-attribution-inner {
display: grid;
justify-items: center;
gap: 13px;
text-align: center;
}
.memorial-partner-intro,
.memorial-partner-family {
margin: 0;
color: #68746e;
font-size: .76rem;
line-height: 1.5;
}
.memorial-partner-intro {
letter-spacing: .09em;
text-transform: uppercase;
}
.memorial-partner-identity {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 13px 20px;
max-width: 720px;
color: var(--forest, #2f4132);
text-decoration: none;
}
.memorial-partner-identity strong {
font-family: var(--serif, "Newsreader", Georgia, serif);
font-size: clamp(1.2rem, 2.3vw, 1.65rem);
font-weight: 500;
line-height: 1.15;
}
.memorial-partner-logo-frame {
display: flex;
width: 160px;
height: 58px;
justify-content: center;
align-items: center;
}
.memorial-partner-logo-frame img {
display: block;
width: auto;
height: auto;
max-width: 160px;
max-height: 58px;
object-fit: contain;
}
.memorial-partner-visit {
color: #52665d;
font-size: .7rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.memorial-partner-link:hover strong,
.memorial-partner-link:hover .memorial-partner-visit {
text-decoration: underline;
text-underline-offset: 4px;
}
.memorial-partner-link:focus-visible {
border-radius: 4px;
outline: 3px solid var(--sage, #6f8779);
outline-offset: 8px;
}
@media (max-width: 760px) {
.manage-page .director-attribution-control {
grid-template-columns: 1fr;
}
.memorial-partner-attribution {
padding: 38px 0;
}
.memorial-partner-identity {
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 520px) {
.claim-attribution-note {
padding: 19px 18px;
}
.manage-page .director-attribution-control {
gap: 19px;
}
}
/* Planning Ahead: self-authored memorial creation and owner safeguards */
.create-page .create-subject-choice {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 22px 0 10px;
padding: 0;
border: 0;
}
.create-page .create-subject-option {
position: relative;
min-width: 0;
cursor: pointer;
}
.create-page .create-subject-option > input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.create-page .create-subject-option > span {
display: grid;
gap: 7px;
min-height: 116px;
padding: 20px;
border: 1px solid rgba(33, 60, 51, .2);
border-radius: 10px;
background: rgba(255, 255, 255, .62);
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.create-page .create-subject-option strong {
color: var(--forest, #2f4132);
font-family: var(--serif, "Newsreader", Georgia, serif);
font-size: 1.22rem;
font-weight: 520;
line-height: 1.2;
}
.create-page .create-subject-option small {
color: var(--muted, #68746e);
font-size: .82rem;
line-height: 1.5;
}
.create-page .create-subject-option > input:checked + span {
border-color: var(--forest, #2f4132);
background: #f5f2e8;
box-shadow: inset 0 0 0 1px var(--forest, #2f4132);
}
.create-page .create-subject-option > input:focus-visible + span {
outline: 3px solid #d48057;
outline-offset: 3px;
}
.create-page .self-planning-consent {
display: grid;
gap: 12px;
margin-top: 24px;
padding: 22px;
border: 1px solid rgba(47, 65, 50, .22);
border-left: 4px solid #d48057;
border-radius: 8px;
background: #f5f1e7;
}
.create-page .self-planning-consent[hidden] {
display: none;
}
.create-page .self-planning-consent h3,
.create-page .self-planning-consent p {
margin: 0;
}
.create-page .self-planning-consent h3 {
color: var(--forest, #2f4132);
font-family: var(--serif, "Newsreader", Georgia, serif);
font-size: 1.45rem;
font-weight: 520;
}
.create-page .self-planning-consent > p:not(.eyebrow) {
color: var(--muted, #68746e);
font-size: .86rem;
line-height: 1.6;
}
.create-page .self-planning-check,
.manage-page .self-confirm-check {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 11px;
align-items: start;
color: var(--forest, #2f4132);
font-size: .82rem;
line-height: 1.55;
cursor: pointer;
}
.create-page .self-planning-check {
padding: 13px 14px;
border: 1px solid rgba(47, 65, 50, .16);
border-radius: 7px;
background: rgba(255, 255, 255, .62);
}
.create-page .self-planning-check input,
.manage-page .self-confirm-check input {
width: 19px;
height: 19px;
margin: 2px 0 0;
accent-color: var(--forest, #2f4132);
}
.create-page .self-planning-check:has(input:focus-visible),
.manage-page .self-confirm-check:has(input:focus-visible) {
outline: 3px solid #d48057;
outline-offset: 3px;
}
.manage-page .self-planning-panel {
--self-plan-rule: rgba(38, 65, 55, .17);
--self-plan-soft: #f4f1e8;
--self-plan-ink: #183837;
}
.manage-page .self-plan-status {
display: grid;
grid-template-columns: minmax(240px, .72fr) minmax(420px, 1.28fr);
gap: 26px;
align-items: center;
margin-bottom: 22px;
padding: 24px;
border: 1px solid var(--self-plan-rule);
border-top: 4px solid #4d766d;
border-radius: 9px;
background: #edf1ed;
}
.manage-page .self-plan-status--activation_pending {
border-top-color: #b96b47;
background: #f6eee4;
}
.manage-page .self-plan-status--disputed,
.manage-page .self-plan-status--revoked {
border-top-color: #9b4f4a;
background: #f4e9e7;
}
.manage-page .self-plan-status-kicker,
.manage-page .self-contact-card header span {
color: #61716b;
font-size: .68rem;
font-weight: 750;
letter-spacing: .08em;
text-transform: uppercase;
}
.manage-page .self-plan-status strong {
display: block;
margin-top: 4px;
color: var(--self-plan-ink);
font-family: var(--serif, "Newsreader", Georgia, serif);
font-size: clamp(1.35rem, 2.2vw, 1.85rem);
font-weight: 520;
line-height: 1.15;
}
.manage-page .self-plan-status p {
margin: 7px 0 0;
color: #61716b;
font-size: .8rem;
line-height: 1.55;
}
.manage-page .self-plan-progress {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.manage-page .self-plan-progress li {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 1px 9px;
align-items: center;
min-width: 0;
color: #74817c;
}
.manage-page .self-plan-progress li > span {
display: grid;
grid-row: 1 / span 2;
width: 28px;
height: 28px;
place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
font-size: .7rem;
font-weight: 800;
}
.manage-page .self-plan-progress li strong,
.manage-page .self-plan-progress li small {
min-width: 0;
}
.manage-page .self-plan-progress li strong {
font-size: .76rem;
}
.manage-page .self-plan-progress li small {
font-size: .66rem;
line-height: 1.35;
}
.manage-page .self-plan-progress li.is-current-or-complete {
color: #2f6259;
}
.manage-page .self-plan-progress li.is-current-or-complete > span {
border-color: #2f6259;
background: #2f6259;
color: #fff;
}
.manage-page .self-plan-legal-note {
display: grid;
grid-template-columns: minmax(210px, .58fr) minmax(0, 1.42fr);
gap: 28px;
margin-bottom: 22px;
padding: 21px 23px;
border: 1px solid #d8c7ad;
border-radius: 8px;
background: #f7f1e5;
}
.manage-page .self-plan-legal-note h3,
.manage-page .self-plan-legal-note p {
margin: 0;
}
.manage-page .self-plan-legal-note h3,
.manage-page .self-plan-block-heading h3,
.manage-page .self-activation-warning h3 {
color: var(--self-plan-ink);
font-family: var(--serif, "Newsreader", Georgia, serif);
font-weight: 520;
}
.manage-page .self-plan-legal-note h3 {
font-size: 1.32rem;
line-height: 1.2;
}
.manage-page .self-plan-legal-note > p {
color: #665f54;
font-size: .78rem;
line-height: 1.65;
}
.manage-page .self-activation-warning {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr);
gap: 28px;
margin-bottom: 22px;
padding: 24px;
border: 2px solid #b96b47;
border-radius: 9px;
background: #fbf1e7;
}
.manage-page .self-activation-warning h3 {
margin: 3px 0 7px;
font-size: 1.55rem;
}
.manage-page .self-activation-warning p {
margin: 0;
color: #685c50;
font-size: .82rem;
line-height: 1.6;
}
.manage-page .self-plan-layout,
.manage-page .self-plan-finalise-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
gap: 22px;
margin-top: 22px;
}
.manage-page .self-plan-finalise-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.manage-page .self-plan-block {
min-width: 0;
padding: 24px;
border: 1px solid var(--self-plan-rule);
border-radius: 9px;
background: rgba(255, 255, 255, .55);
}
.manage-page .self-plan-block-heading {
margin-bottom: 18px;
}
.manage-page .self-plan-block-heading h3 {
margin: 3px 0 7px;
font-size: clamp(1.35rem, 2vw, 1.7rem);
line-height: 1.15;
}
.manage-page .self-plan-block-heading > p:last-child {
margin: 0;
color: #61716b;
font-size: .78rem;
line-height: 1.6;
}
.manage-page .self-contact-grid {
display: grid;
gap: 15px;
}
.manage-page .self-contact-card {
min-width: 0;
padding: 19px;
border: 1px solid var(--self-plan-rule);
border-radius: 8px;
background: #f8f7f2;
}
.manage-page .self-contact-card--accepted {
border-left: 4px solid #4d766d;
}
.manage-page .self-contact-card--pending {
border-left: 4px solid #d39a64;
}
.manage-page .self-contact-card header {
display: flex;
gap: 14px;
justify-content: space-between;
align-items: start;
margin-bottom: 15px;
}
.manage-page .self-contact-card h4 {
margin: 3px 0 0;
color: var(--self-plan-ink);
font-size: .93rem;
}
.manage-page .self-contact-state {
flex: 0 0 auto;
padding: 5px 8px;
border-radius: 999px;
background: #e6ebe7;
color: #426259;
font-size: .64rem;
letter-spacing: .04em;
text-transform: uppercase;
}
.manage-page .self-contact-card--pending .self-contact-state {
background: #f2e5d6;
color: #8b5e35;
}
.manage-page .self-contact-card--declined .self-contact-state,
.manage-page .self-contact-card--revoked .self-contact-state {
background: #f1e4e2;
color: #894d48;
}
.manage-page .self-contact-details,
.manage-page .self-plan-review-dates {
display: grid;
gap: 0;
margin: 0 0 15px;
}
.manage-page .self-contact-details > div,
.manage-page .self-plan-review-dates > div {
display: grid;
grid-template-columns: minmax(95px, .4fr) minmax(0, 1fr);
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--self-plan-rule);
}
.manage-page .self-contact-details dt,
.manage-page .self-plan-review-dates dt {
color: #71807a;
font-size: .68rem;
font-weight: 700;
}
.manage-page .self-contact-details dd,
.manage-page .self-plan-review-dates dd {
min-width: 0;
margin: 0;
overflow-wrap: anywhere;
color: var(--self-plan-ink);
font-size: .76rem;
}
.manage-page .self-contact-form,
.manage-page .self-inline-action,
.manage-page .self-contact-revoke form {
display: grid;
gap: 12px;
}
.manage-page .self-contact-form .field,
.manage-page .self-inline-action .field,
.manage-page .self-contact-revoke .field {
margin: 0;
}
.manage-page .self-contact-form input,
.manage-page .self-inline-action input[type="text"],
.manage-page .self-inline-action input:not([type]),
.manage-page .self-contact-revoke input[type="text"],
.manage-page .self-contact-revoke input:not([type]) {
min-height: 44px;
}
.manage-page .self-contact-actions {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
align-items: start;
}
.manage-page .self-contact-actions form {
margin: 0;
}
.manage-page .self-contact-revoke {
width: 100%;
padding-top: 3px;
}
.manage-page .self-contact-revoke summary {
width: fit-content;
color: #934c46;
font-size: .72rem;
font-weight: 700;
cursor: pointer;
}
.manage-page .self-contact-revoke form {
margin-top: 12px;
padding: 14px;
border: 1px solid #d8b7b2;
border-radius: 7px;
background: #f8eeec;
}
.manage-page .self-permission-key-rule {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 12px;
align-items: start;
margin: 0 0 14px;
padding: 14px 15px;
border: 1px solid #9cb5ae;
border-radius: 7px;
background: #edf2ee;
}
.manage-page .self-permission-key-rule > span {
display: grid;
width: 30px;
height: 30px;
place-items: center;
border-radius: 50%;
background: #dbe7e1;
font-size: .8rem;
}
.manage-page .self-permission-key-rule strong {
color: var(--self-plan-ink);
font-size: .78rem;
line-height: 1.35;
}
.manage-page .self-permission-key-rule p {
margin: 4px 0 0;
color: #596a65;
font-size: .68rem;
line-height: 1.55;
}
.manage-page.self-memorial-content-read-only .editor-section[aria-disabled="true"] .editor-section-heading::after {
content: "Protected creator content · read-only";
display: inline-flex;
width: fit-content;
margin-top: 10px;
padding: 5px 9px;
border: 1px solid #9cb5ae;
border-radius: 999px;
background: #edf2ee;
color: #36584f;
font-size: .65rem;
font-weight: 700;
letter-spacing: .02em;
}
.manage-page.self-memorial-content-read-only .editor-section[aria-disabled="true"] form,
.manage-page.self-memorial-content-read-only .editor-section[aria-disabled="true"] .photo-manage-actions,
.manage-page.self-memorial-content-read-only .editor-section[aria-disabled="true"] .timeline-actions {
opacity: .58;
}
.manage-page.self-memorial-content-read-only .editor-section[aria-disabled="true"] :is(input, select, textarea, button) {
cursor: not-allowed;
}
.manage-page .self-permission-form fieldset {
display: grid;
gap: 9px;
margin: 0;
padding: 0;
border: 0;
}
.manage-page .self-permission-form fieldset > label {
position: relative;
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 11px;
align-items: start;
padding: 13px;
border: 1px solid var(--self-plan-rule);
border-radius: 7px;
background: #f8f7f2;
cursor: pointer;
}
.manage-page .self-permission-form fieldset > label:has(input[type="checkbox"]:checked) {
border-color: #4d766d;
background: #edf2ee;
box-shadow: inset 0 0 0 1px #4d766d;
}
.manage-page .self-permission-form input[type="hidden"] {
display: none;
}
.manage-page .self-permission-form input[type="checkbox"] {
width: 19px;
height: 19px;
margin: 2px 0 0;
accent-color: #3f6a61;
}
.manage-page .self-permission-form label span {
display: grid;
gap: 3px;
}
.manage-page .self-permission-form label strong {
color: var(--self-plan-ink);
font-size: .76rem;
line-height: 1.35;
}
.manage-page .self-permission-form label small {
color: #66746f;
font-size: .67rem;
line-height: 1.5;
}
.manage-page .self-snapshot-record {
display: grid;
gap: 4px;
margin: 0 0 17px;
padding: 14px 15px;
border-left: 4px solid #4d766d;
background: #edf2ee;
}
.manage-page .self-snapshot-record strong {
color: var(--self-plan-ink);
font-size: .78rem;
}
.manage-page .self-snapshot-record span,
.manage-page .self-handoff-note {
color: #66746f;
font-size: .7rem;
line-height: 1.55;
}
.manage-page .self-plan-review-dates {
margin-bottom: 17px;
}
.manage-page .self-handoff-link {
width: 100%;
justify-content: center;
margin-top: 16px;
}
.manage-page .self-handoff-note {
margin: 8px 0 0;
}
.manage-page .self-private-lock {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 13px;
align-items: start;
padding: 18px;
border: 1px solid rgba(48, 91, 80, .24);
border-radius: 8px;
background: #edf2ee;
}
.manage-page .self-private-lock > span {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 50%;
background: #dce8e0;
}
.manage-page .self-private-lock strong {
color: var(--self-plan-ink);
font-size: .84rem;
}
.manage-page .self-private-lock p {
margin: 4px 0 8px;
color: #61716b;
font-size: .75rem;
line-height: 1.55;
}
.manage-page .self-custodian-layout {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
gap: 22px;
}
.manage-page .self-custodian-capabilities,
.manage-page .self-custodian-boundary,
.manage-page .self-family-notice-form {
padding: 23px;
border: 1px solid rgba(38, 65, 55, .17);
border-radius: 9px;
background: rgba(255, 255, 255, .56);
}
.manage-page .self-custodian-capabilities h3,
.manage-page .self-custodian-boundary h3 {
margin: 0 0 14px;
color: #183837;
font-family: var(--serif, "Newsreader", Georgia, serif);
font-size: 1.45rem;
font-weight: 520;
}
.manage-page .self-custodian-capabilities ul {
display: grid;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
}
.manage-page .self-custodian-capabilities li {
display: grid;
grid-template-columns: 26px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 11px 12px;
border: 1px solid rgba(38, 65, 55, .14);
border-radius: 7px;
background: #f8f7f2;
}
.manage-page .self-custodian-capabilities li > span {
display: grid;
width: 26px;
height: 26px;
place-items: center;
border-radius: 50%;
background: #e5e9e5;
color: #67736e;
font-weight: 800;
}
.manage-page .self-custodian-capabilities li.is-allowed > span {
background: #3f6a61;
color: #fff;
}
.manage-page .self-custodian-capabilities li strong {
color: #284841;
font-size: .74rem;
line-height: 1.4;
}
.manage-page .self-custodian-capabilities li small {
color: #68756f;
font-size: .64rem;
font-weight: 700;
text-transform: uppercase;
}
.manage-page .self-custodian-boundary p:not(.content-overline) {
margin: 0 0 18px;
color: #61716b;
font-size: .78rem;
line-height: 1.65;
}
.manage-page .self-family-notice-form {
margin-top: 22px;
border-left: 4px solid #73877a;
background: #f1f2ed;
}
.manage-page .self-family-notice-form .field {
margin: 0;
}
.manage-page .self-family-notice-form textarea {
min-height: 130px;
}
.manage-page .self-family-notice-form .field > small {
display: block;
margin-top: 7px;
color: #65736d;
font-size: .7rem;
}
.manage-page .self-custodian-unpublish {
margin-top: 18px;
border: 1px solid #d8b7b2;
border-radius: 8px;
background: #f8eeec;
}
.manage-page .self-custodian-unpublish summary {
padding: 13px 16px;
color: #7f403b;
font-size: .74rem;
font-weight: 700;
cursor: pointer;
}
.manage-page .self-custodian-unpublish > div {
padding: 0 16px 16px;
}
.manage-page .self-custodian-unpublish p {
margin: 0 0 12px;
color: #6d5a56;
font-size: .7rem;
line-height: 1.55;
}
.manage-page .self-custodian-unpublish form {
margin: 0;
}
.manage-page .self-custodian-photo-reference {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 12px;
margin-top: 18px;
}
.manage-page .self-custodian-photo-reference figure {
margin: 0;
padding: 8px;
border: 1px solid rgba(38, 65, 55, .16);
border-radius: 7px;
background: #f8f7f2;
}
.manage-page .self-custodian-photo-reference img {
display: block;
width: 100%;
aspect-ratio: 1;
border-radius: 4px;
object-fit: cover;
}
.manage-page .self-custodian-photo-reference figcaption {
margin-top: 7px;
color: #65736d;
font-size: .67rem;
line-height: 1.4;
}
.manage-page .self-plan-revoke {
margin-top: 22px;
border: 1px solid #d4b8b2;
border-radius: 8px;
background: #f8efed;
}
.manage-page .self-plan-revoke > summary {
padding: 16px 19px;
color: #8f4e49;
font-size: .76rem;
font-weight: 750;
cursor: pointer;
}
.manage-page .self-plan-revoke > summary:focus-visible {
outline: 3px solid #d48057;
outline-offset: 3px;
}
.manage-page .self-plan-revoke-body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
gap: 24px;
padding: 4px 19px 20px;
}
.manage-page .self-plan-revoke-body h3 {
margin: 0 0 7px;
color: #703f3b;
font-family: var(--serif, "Newsreader", Georgia, serif);
font-size: 1.3rem;
font-weight: 520;
}
.manage-page .self-plan-revoke-body p {
margin: 0 0 8px;
color: #725f5c;
font-size: .75rem;
line-height: 1.6;
}
.manage-page .self-plan-revoke-body form {
display: grid;
gap: 12px;
}
.manage-page .self-plan-revoke-body .field {
margin: 0;
}
/* Authenticated printable handoff sheet (route markup is shared elsewhere). */
.self-handoff-page {
min-height: 100vh;
background: #edf0ec;
color: #183837;
}
.self-handoff-shell {
width: min(920px, calc(100% - 32px));
margin: 0 auto;
padding: 42px 0 70px;
}
.self-handoff-card {
padding: clamp(26px, 5vw, 54px);
border: 1px solid rgba(38, 65, 55, .2);
background: #fbfaf5;
box-shadow: 0 18px 55px rgba(31, 53, 46, .09);
}
.self-handoff-reference {
padding: 13px 15px;
border-left: 4px solid #4d766d;
background: #edf2ee;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: .8rem;
overflow-wrap: anywhere;
}
.self-handoff-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.self-handoff-contacts {
display: grid;
gap: 12px;
}
.self-handoff-print-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
margin-bottom: 18px;
}
/* Released self-memorial overlays; markup is rendered by the public route. */
.self-memorial-prepared-credit {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: center;
width: fit-content;
margin: 22px 0 0;
padding-top: 12px;
border-top: 1px solid rgba(47, 65, 50, .18);
color: #6a766f;
font-size: .73rem;
line-height: 1.5;
}
.self-memorial-prepared-credit::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #d48057;
}
.self-memorial-legal-boundary {
max-width: 58ch;
margin: 10px 0 0;
color: #5d6964;
font-size: .76rem;
line-height: 1.55;
}
.final-cta-note {
max-width: 48ch;
margin: 12px 0 0;
color: rgba(255, 255, 255, .78);
font-size: .75rem;
line-height: 1.55;
}
body:not(.southern-light-home) .final-cta-note {
color: var(--sl-soft);
}
.self-memorial-family-notice {
margin: clamp(30px, 5vw, 54px) 0;
padding: clamp(21px, 4vw, 32px);
border: 1px solid rgba(47, 65, 50, .2);
border-left: 4px solid #73877a;
background: #f1f2ed;
color: #2f4132;
}
.self-memorial-family-notice::before {
content: "A note from family";
display: block;
margin-bottom: 12px;
color: #607168;
font-size: .68rem;
font-weight: 750;
letter-spacing: .12em;
text-transform: uppercase;
}
.self-memorial-family-notice > :first-child {
margin-top: 0;
}
.self-memorial-family-notice > :last-child {
margin-bottom: 0;
}
.self-memorial-custodian-state {
margin: 0 0 20px;
padding: 14px 17px;
border: 1px solid rgba(48, 91, 80, .24);
border-radius: 7px;
background: #edf2ee;
color: #355a51;
font-size: .76rem;
line-height: 1.55;
}
@media (max-width: 980px) {
.manage-page .self-plan-status,
.manage-page .self-plan-layout,
.manage-page .self-plan-finalise-grid,
.manage-page .self-activation-warning {
grid-template-columns: 1fr;
}
.manage-page .self-plan-revoke-body {
grid-template-columns: 1fr;
}
.manage-page .self-custodian-layout {
grid-template-columns: 1fr;
}
.manage-page .self-plan-legal-note {
grid-template-columns: minmax(190px, .6fr) minmax(0, 1.4fr);
}
}
@media (max-width: 720px) {
.create-page .create-subject-choice,
.manage-page .self-plan-legal-note {
grid-template-columns: 1fr;
}
.self-handoff-grid {
grid-template-columns: 1fr;
}
.self-memorial-family-notice {
margin: 26px 0;
padding: 20px;
}
.create-page .create-subject-option > span {
min-height: 0;
}
.manage-page .self-plan-status,
.manage-page .self-plan-block,
.manage-page .self-activation-warning {
padding: 19px;
}
.manage-page .self-plan-progress {
grid-template-columns: 1fr;
}
.manage-page .self-plan-progress li {
grid-template-columns: 30px minmax(0, 1fr);
}
}
@media (max-width: 480px) {
.create-page .self-planning-consent,
.manage-page .self-plan-status,
.manage-page .self-plan-block,
.manage-page .self-activation-warning,
.manage-page .self-plan-legal-note {
padding: 16px;
}
.manage-page .self-contact-card {
padding: 15px;
}
.manage-page .self-contact-card header {
display: grid;
}
.manage-page .self-contact-state {
width: fit-content;
}
.manage-page .self-contact-details > div,
.manage-page .self-plan-review-dates > div {
grid-template-columns: 1fr;
gap: 3px;
}
.manage-page .self-custodian-capabilities,
.manage-page .self-custodian-boundary,
.manage-page .self-family-notice-form {
padding: 16px;
}
.manage-page .self-custodian-capabilities li {
grid-template-columns: 26px minmax(0, 1fr);
}
.manage-page .self-custodian-capabilities li small {
grid-column: 2;
}
}
@media (forced-colors: active) {
.create-page .create-subject-option > input:checked + span,
.manage-page .self-permission-form fieldset > label:has(input[type="checkbox"]:checked),
.manage-page .self-plan-status,
.manage-page .self-contact-card,
.manage-page .self-plan-block {
border: 2px solid CanvasText;
}
}
@media print {
.self-handoff-page {
background: #fff !important;
color: #000 !important;
}
.self-handoff-page .site-header,
.self-handoff-page .account-header,
.self-handoff-print-actions {
display: none !important;
}
.self-handoff-shell {
width: 100%;
padding: 0;
}
.self-handoff-card {
padding: 12mm;
border: 1px solid #000;
box-shadow: none;
background: #fff !important;
color: #000 !important;
}
.self-handoff-card *,
.self-handoff-reference {
color: #000 !important;
background: #fff !important;
}
.self-handoff-reference {
border: 1px solid #000;
border-left-width: 3px;
}
.self-handoff-card a {
color: #000 !important;
text-decoration: underline;
}
}