/* A quiet, person-led practical module within the same family Vault. */
.life-essentials{padding:clamp(80px,8vw,120px) 4vw;scroll-margin-top:110px;background:var(--paper)}
.life-essentials-inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:clamp(40px,4vw,64px);align-items:center;max-width:1200px;margin:0 auto}
.life-essentials-intro{padding-block:24px;min-width:0}
.life-eyebrow{margin:0 0 22px;font:600 12px/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--teal)}
.life-essentials-intro h2{max-width:13ch;font:400 clamp(44px,4.2vw,60px)/1.08 var(--serif);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.life-support{max-width:38ch;margin-top:26px;font:400 17px/1.7 var(--sans);color:var(--muted);text-wrap:pretty}
.life-portrait{min-width:0;margin:0;container-type:inline-size}
.life-module{padding:28px;border:1px solid color-mix(in srgb,var(--brand-50) 55%,transparent);border-radius:28px;background:var(--brand-10)}
.life-module-heading{margin-bottom:28px}
.life-module-heading>p{font:600 11px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.life-composition{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:'person person person person person person person contact contact contact contact contact' 'deed deed deed deed instructions instructions instructions instructions instructions instructions instructions instructions' 'deed deed deed deed property property property property property property property property' 'accounts accounts accounts accounts accounts accounts care care care care care care' 'wishes wishes wishes wishes wishes wishes wishes wishes wishes wishes wishes wishes';gap:24px 18px;align-items:stretch}

/* The identity anchors the upper edge, leaving the records room to breathe. */
.life-person{grid-area:person;display:flex;align-items:center;gap:14px;min-width:0;padding-block:4px}
.life-person-photo{display:block;flex:0 0 68px;width:68px;aspect-ratio:1;overflow:hidden;border-radius:50%}
.life-person-photo img{display:block;width:100%;height:100%;object-fit:cover}
.life-person h3{margin:0;font:500 clamp(23px,3.8cqi,28px)/1.15 var(--serif);letter-spacing:-.025em;color:var(--teal)}
.life-person p{margin-top:6px;font:400 12px/1.5 var(--sans);color:var(--text-brand-support)}
.life-person>div,.life-contact>div,.life-property>div{min-width:0}
.life-piece{min-width:0;margin:0}
.life-piece h4{margin:0;font:600 15px/1.35 var(--sans);color:var(--ink)}
.life-piece-label{display:block;font:400 11px/1.5 var(--sans);color:var(--text-brand-support)}

/* A contact, a document, and a note use their own familiar proportions. */
.life-contact{grid-area:contact;display:flex;align-items:center;gap:12px;padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.life-contact-monogram{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--brand-25);font:500 11px/1 var(--sans);color:var(--teal)}
.life-contact .life-piece-label{margin-bottom:3px;font-size:10px}
.life-contact-role{margin-top:3px;font:400 12px/1.4 var(--sans);color:var(--muted)}
.life-deed{grid-area:deed;display:flex;flex-direction:column;padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:5px;box-shadow:0 6px 12px -10px color-mix(in srgb,var(--shadow-color) 20%,transparent)}
.life-document-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.life-document-top .life-piece-label{font-size:10px}
.life-document-top .icon{display:block;width:18px;height:18px;color:var(--brand-400)}
.life-deed h4{margin-top:22px;font:400 clamp(30px,5cqi,38px)/1.08 var(--serif);letter-spacing:-.035em;color:var(--teal)}
.life-document-lines{display:grid;gap:8px;margin:24px 0}
.life-document-lines i{height:1px;background:var(--line)}
.life-document-lines i:last-child{width:64%}
.life-deed-place{margin-top:auto;font:400 11px/1.5 var(--sans);color:var(--muted)}
.life-instructions{grid-area:instructions;padding:20px 22px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.life-instruction-copy{margin-top:12px;font:400 22px/1.35 var(--serif);letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
.life-property{grid-area:property;display:flex;align-items:center;gap:14px;padding:4px 10px}
.life-property-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--brand-25);color:var(--brand-400)}
.life-property-icon .icon{display:block;width:24px;height:24px}
.life-property h4{margin-top:4px;font-weight:500}
.life-property-details{margin-top:5px;font:400 12px/1.5 var(--sans);color:var(--text-brand-support)}
.life-property-details span{padding-inline:3px}

/* Flat lists and one broad wishes statement keep this from becoming a card grid. */
.life-accounts{grid-area:accounts;padding:8px 8px 4px}
.life-care{grid-area:care;padding:8px 8px 4px 24px;border-left:1px solid var(--brand-50)}
.life-accounts ul,.life-care ul{list-style:none;padding:0;margin:12px 0 0;font:400 13px/1.5 var(--sans);color:var(--text-brand-support)}
.life-accounts li+li,.life-care li+li{margin-top:6px}
.life-wishes{grid-area:wishes;padding:19px 22px 22px;background:var(--brand-25);border-radius:12px}
.life-wishes h4{font-size:12px;font-weight:500;color:var(--text-brand-support)}
.life-wishes p{margin-top:8px;max-width:44ch;font:400 22px/1.3 var(--serif);letter-spacing:-.02em;color:var(--teal);text-wrap:pretty}

/* Optional entry is a single gentle reveal, with no scroll choreography. */
.life-reveal-ready .life-practical{opacity:0;transform:translateY(10px);transition:opacity 500ms cubic-bezier(.22,1,.36,1),transform 500ms cubic-bezier(.22,1,.36,1)}
.life-reveal-ready .life-deed,.life-reveal-ready .life-contact,.life-reveal-ready .life-instructions{transition-delay:80ms}
.life-reveal-ready .life-property{transition-delay:160ms}
.life-reveal-ready .life-accounts,.life-reveal-ready .life-care{transition-delay:220ms}
.life-reveal-ready .life-wishes{transition-delay:280ms}
.life-reveal-ready.life-is-settled .life-practical{opacity:1;transform:none}

@media(max-width:1099px){
 .life-essentials-inner{grid-template-columns:minmax(0,1fr);max-width:760px;gap:40px}
 .life-essentials-intro{padding:0}
 .life-essentials-intro h2{max-width:17ch;font-size:clamp(38px,5.4vw,54px)}
 .life-support{max-width:60ch;margin-top:22px}
}
@media(max-width:700px){
 .life-essentials{padding:64px 5vw 72px;scroll-margin-top:96px}
 .life-eyebrow{margin-bottom:18px}
 .life-essentials-intro h2{font-size:clamp(36px,8.5vw,46px);max-width:15ch}
 .life-support{font-size:16px;line-height:1.65;margin-top:20px}
}
@container(max-width:600px){
 .life-module{padding:22px;border-radius:22px}
 .life-module-heading{margin-bottom:24px}
 .life-module-heading>p{font-size:12px}
 .life-composition{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'person person' 'deed contact' 'instructions instructions' 'property property' 'accounts care' 'wishes wishes';gap:20px 16px}
 .life-person{padding:0 0 4px}
 .life-person-photo{flex-basis:64px;width:64px}
 .life-person h3{font-size:27px}
 .life-person p{font-size:13px}
 .life-contact{flex-direction:column;align-items:flex-start;justify-content:center;padding:18px 16px;gap:14px}
 .life-contact .life-piece-label,.life-document-top .life-piece-label{font-size:11px}
 .life-contact-role,.life-deed-place,.life-piece-label{font-size:12px}
 .life-deed{padding:18px 16px}
 .life-deed h4{font-size:32px;margin-top:20px}
 .life-document-top .icon{display:none}
 .life-document-lines{margin-block:20px}
 .life-instructions{padding:20px}
 .life-instruction-copy{font-size:22px}
 .life-property{padding:4px 0;gap:12px}
 .life-property-details{font-size:13px}
 .life-accounts{padding:6px 0 2px}
 .life-care{padding:6px 0 2px 16px}
 .life-accounts ul,.life-care ul{font-size:14px}
 .life-wishes{padding:20px}
 .life-wishes h4{font-size:13px}
 .life-wishes p{font-size:22px}
}
@container(max-width:400px){
 .life-module{padding:18px}
 .life-composition{grid-template-areas:'person person' 'deed contact' 'instructions instructions' 'property property' 'accounts accounts' 'care care' 'wishes wishes'}
 .life-person h3{font-size:25px}
 .life-contact,.life-deed{padding:16px 14px}
 .life-instructions,.life-wishes{padding:18px}
 .life-care{padding:16px 0 2px;border-left:0;border-top:1px solid var(--brand-50)}
}
@media(prefers-reduced-motion:reduce){
 .life-reveal-ready .life-practical{opacity:1;transform:none;transition:none}
}

/* Practical records use distinct material cues within the existing composition. */
.life-institution-mark,.life-care-mark{display:none}
/* Keep the current record materials when the module becomes a reading stack. */
@media(max-width:1099px){
 .life-contact{border-radius:8px;border-left:2px solid var(--brand-100)}
 .life-contact-monogram{background-color:var(--amber-50);color:var(--amber-950)}
 .life-instructions{border-radius:4px;border-color:var(--amber-100);background:var(--amber-25)}
 .life-instructions .life-piece-label{color:var(--amber-950)}
 .life-property{padding-block:12px;border-block:1px solid color-mix(in srgb,var(--brand-100) 55%,transparent)}
 .life-property h4{font-weight:600}
 .life-accounts .life-account-register li{display:flex;align-items:center;gap:10px;min-height:36px;margin:0;border-top:1px solid var(--line)}
 .life-account-register .life-institution-mark{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid var(--gray-300);border-radius:3px;color:var(--gray-600);font:500 9px/1 var(--sans);letter-spacing:.02em}
}
@media(min-width:1100px){
 .life-contact{border-radius:8px;border-left:2px solid var(--brand-100);padding:14px 16px;gap:12px}
 .life-contact-monogram{flex-basis:36px;width:36px;height:36px;background-color:var(--amber-50);color:var(--amber-950)}
 .life-instructions{border-radius:4px;border-color:var(--amber-100);background:var(--amber-25);padding:20px 22px}
 .life-instructions .life-piece-label{color:var(--amber-950)}
 .life-instruction-copy{line-height:1.4}
 .life-property{gap:14px;padding:12px 10px;border-block:1px solid color-mix(in srgb,var(--brand-100) 55%,transparent)}
 .life-property .life-piece-label{font-size:10px;letter-spacing:.025em}
 .life-property h4{font-weight:600}
 .life-property-details{margin-top:7px;font-size:11px;letter-spacing:.01em}
 .life-accounts{padding:14px 16px 4px;background:color-mix(in srgb,var(--paper) 65%,transparent);border-top:2px solid var(--brand-200)}
 .life-accounts h4{font-size:13px;letter-spacing:.015em}
 .life-accounts .life-account-register{margin-top:10px}
 .life-accounts .life-account-register li{display:flex;align-items:center;gap:10px;min-height:36px;border-top:1px solid var(--line);margin:0;font-size:12px;color:var(--gray-700)}
 .life-account-register .life-institution-mark{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid var(--gray-300);border-radius:3px;color:var(--gray-600);font:500 9px/1 var(--sans);letter-spacing:.02em}
 .life-care{align-self:stretch;padding:14px 4px 4px 18px;border-left:2px solid var(--brand-100)}
 .life-care h4{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
 .life-care-mark{display:grid;place-items:center;flex:none;width:20px;height:20px;color:var(--brand-400)}
 .life-care-mark .icon{width:16px;height:16px}
 .life-care ul{margin-top:8px}
 .life-care li{display:flex;align-items:center;gap:9px;min-height:36px;font-size:12px;margin:0}
 .life-care li+li{margin-top:0}
 .life-care li::before{content:'';width:12px;height:1px;flex:none;background:var(--brand-200)}
}