/* Page styles are scoped to avoid overriding the site header and footer. */
body {
    margin: 0 !important;
}

.obituary-detail {
    --page:#f7f9f8;
    --panel:#eaf4f6;
    --teal:#195d71;
    --footer:#0e4050;
    --ink:#343b3d;
    --heading:#344a50;
    --line:#d7e0e2;
    --muted:#8c8e8e;
}

:where(.obituary-detail) * {
    box-sizing:border-box !important;
}

html {
    scroll-behavior:smooth !important;
    scroll-padding-top:24px !important;
}

.obituary-detail {
    margin:0 !important;
    background:var(--page) !important;
    color:var(--ink) !important;
    font-family:"Karla",Arial,sans-serif !important;
    font-size:18px !important;
    line-height:1.55 !important;
}

:where(.obituary-detail) button,
:where(.obituary-detail) input,
:where(.obituary-detail) textarea {
    font:inherit !important;
}

:where(.obituary-detail) button,
:where(.obituary-detail) a {
    touch-action:manipulation !important;
}

:where(.obituary-detail) button {
    cursor:pointer !important;
}

:where(.obituary-detail) a {
    color:inherit !important;
}

:where(.obituary-detail) img {
    display:block !important;
    max-width:100% !important;
}

:where(.obituary-detail) h1,
:where(.obituary-detail) h2,
:where(.obituary-detail) h3,
:where(.obituary-detail) p {
    margin:0 !important;
}

:where(.obituary-detail) h1,
:where(.obituary-detail) h2,
:where(.obituary-detail) h3 {
    font-family:"Newsreader",Georgia,serif !important;
    font-weight:400 !important;
}

:where(.obituary-detail) h2 {
    color:var(--heading) !important;
    font-size:44px !important;
    line-height:1.15 !important;
}

:where(.obituary-detail) a:focus-visible,
:where(.obituary-detail) button:focus-visible,
:where(.obituary-detail) input:focus-visible,
:where(.obituary-detail) textarea:focus-visible {
    outline:3px solid #a18fb2 !important;
    outline-offset:5px !important;
}

:where(.obituary-detail) .container {
    width:min(1280px,calc(100% - 80px)) !important;
    margin-inline:auto !important;
}

:where(.obituary-detail) .btn {
    min-height:50px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    padding:12px 44px !important;
    border:1px solid #42839a !important;
    border-radius:0 !important;
    font-family:"Karla",Arial,sans-serif !important;
    font-size:16px !important;
    font-weight:600 !important;
    line-height:24px !important;
    text-decoration:none !important;
    transition:background-color .18s,color .18s,border-color .18s !important;
}

:where(.obituary-detail) .btn-primary {
    background:var(--teal) !important;
    border-color:var(--teal) !important;
    color:#fff !important;
}

:where(.obituary-detail) .btn-light {
    background:#fff !important;
    border-color:#fff !important;
    color:var(--teal) !important;
}

:where(.obituary-detail) .btn-outline {
    background:transparent !important;
    color:#3b7890 !important;
}

:where(.obituary-detail) .btn-primary:hover {
    background:#fff !important;
    border-color:#fff !important;
    color:var(--teal) !important;
}

:where(.obituary-detail) .btn-light:hover,
:where(.obituary-detail) .btn-outline:hover {
    background:var(--teal) !important;
    border-color:var(--teal) !important;
    color:#fff !important;
}

:where(.obituary-detail) .listen-btn:hover .play-icon {
    background:#fff !important;
    color:var(--teal) !important;
}

:where(.obituary-detail) .hero {
    position:relative !important;
    min-height:850px !important;
    text-align:center !important;
    color:#fff !important;
    background-image:
        linear-gradient(
            to bottom,
            rgb(0 0 0 / 69%) 0%,
            rgb(0 0 0 / 64%) 49%,
            rgb(57 60 55 / 39%) 70%,
            var(--page) 100%
        ),
        url("assets/garden.png") !important;
    background-size:cover !important;
    background-position:center 52% !important;
}

:where(.obituary-detail) .hero-content {
    position:relative !important;
    padding-top:89px !important;
    padding-bottom:85px !important;
}

:where(.obituary-detail) .eyebrow {
    font-size:13px !important;
    line-height:20px !important;
    font-weight:600 !important;
    letter-spacing:2px !important;
    text-transform:uppercase !important;
}

:where(.obituary-detail) .hero-subtitle {
    font-weight:400 !important;
}

:where(.obituary-detail) .hero h1 {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    font-size:80px !important;
    line-height:1.1 !important;
    margin-top:6px !important;
}

:where(.obituary-detail) .portrait {
    width:280px !important;
    height:320px !important;
    object-fit:cover !important;
    object-position:42% center !important;
    margin:24px 0 14px !important;
}

:where(.obituary-detail) .dates {
    font-size:16px !important;
    font-weight:500 !important;
    margin-top:29px !important;
}

:where(.obituary-detail) .actions {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:16px !important;
}

:where(.obituary-detail) .hero-actions {
    justify-content:center !important;
    margin-top:24px !important;
}

:where(.obituary-detail) .section-divider {
    width:1px !important;
    height:176px !important;
    background:#ced6d7 !important;
    margin:60px auto !important;
}

:where(.obituary-detail) .first-divider {
    position:relative !important;
    margin-top:-28px !important;
}

:where(.obituary-detail) .content-card {
    border:1px solid var(--line) !important;
    background:var(--panel) !important;
    padding:52px 50px !important;
}

:where(.obituary-detail) .heading-row {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:24px !important;
    border-bottom:1px solid var(--line) !important;
    padding-bottom:40px !important;
    margin-bottom:38px !important;
}

:where(.obituary-detail) .listen-btn {
    min-width:262px !important;
    min-height:57px !important;
    padding-inline:30px !important;
}

:where(.obituary-detail) .play-icon {
    width:26px !important;
    height:26px !important;
    flex:0 0 26px !important;
    display:grid !important;
    place-items:center !important;
    background:var(--teal) !important;
    color:#fff !important;
    border-radius:50% !important;
    line-height:1 !important;
    padding:0 !important;
}

:where(.obituary-detail) .play-icon::before {
    content:"" !important;
    width:8px !important;
    height:10px !important;
    background:currentColor !important;
    clip-path:polygon(0 0,100% 50%,0 100%) !important;
    transform:translateX(1px) !important;
}

:where(.obituary-detail) .play-icon.is-playing::before {
    width:8px !important;
    height:8px !important;
    clip-path:none !important;
    transform:none !important;
}

:where(.obituary-detail) .obituary-copy h3 {
    font-size:30px !important;
    line-height:1.25 !important;
    margin-bottom:19px !important;
}

:where(.obituary-detail) .obituary-copy p {
    margin-bottom:28px !important;
}

:where(.obituary-detail) .obituary-copy h3:not(:first-child) {
    margin-top:33px !important;
}

:where(.obituary-detail) .obituary-copy p:last-child {
    margin-bottom:0 !important;
}

:where(.obituary-detail) .inline-links {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:32px !important;
    margin-top:40px !important;
}

:where(.obituary-detail) .inline-links a {
    font-size:18px !important;
    font-weight:700 !important;
    color:#3b7890 !important;
    text-decoration:none !important;
    border-bottom:1px solid #42839a !important;
    padding-bottom:5px !important;
}

:where(.obituary-detail) .inline-links a:hover {
    color:var(--footer) !important;
}

:where(.obituary-detail) .memorial-book {
    display:grid !important;
    grid-template-columns:522px 1fr !important;
    gap:74px !important;
    align-items:center !important;
}

:where(.obituary-detail) .book-image {
    height:500px !important;
    background:var(--panel) !important;
    display:grid !important;
    place-items:center !important;
}

:where(.obituary-detail) .book-image img {
    width:250px !important;
    height:355px !important;
}

:where(.obituary-detail) .book-content > .eyebrow {
    color:#8f7b9f !important;
    margin-bottom:16px !important;
}

:where(.obituary-detail) .book-content h2 {
    margin-bottom:18px !important;
}

:where(.obituary-detail) .book-actions .btn {
    min-width:161px !important;
}

:where(.obituary-detail) .book-description {
    margin-top:26px !important;
}

:where(.obituary-detail) .share-memory {
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:50px !important;
    align-items:center !important;
    margin-top:34px !important;
    padding-top:32px !important;
    border-top:1px solid var(--line) !important;
}

:where(.obituary-detail) .share-memory h3 {
    font-size:20px !important;
    line-height:1.3 !important;
    margin-bottom:8px !important;
}

:where(.obituary-detail) .share-memory p {
    font-size:15px !important;
    line-height:1.6 !important;
    color:var(--muted) !important;
}

:where(.obituary-detail) .share-memory .btn {
    padding-inline:30px !important;
    min-width:235px !important;
}

:where(.obituary-detail) .guestbook {
    padding-bottom:80px !important;
}

:where(.obituary-detail) .status {
    font-size:15px !important;
    margin-top:16px !important;
    color:var(--teal) !important;
}

:where(.obituary-detail) .visually-hidden,
.skip-link:not(:focus) {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.skip-link:focus {
    position:fixed !important;
    z-index:10 !important;
    background:#fff !important;
    padding:16px !important;
}

:where(.obituary-detail) dialog {
    border:1px solid var(--line) !important;
    padding:45px !important;
    background:var(--panel) !important;
    max-width:calc(100% - 32px) !important;
    text-align:center !important;
}

:where(.obituary-detail) dialog::backdrop {
    background:rgb(9 30 36 / 70%) !important;
}

:where(.obituary-detail) dialog img {
    margin:25px auto !important;
}

:where(.obituary-detail) dialog h2 {
    font-size:32px !important;
}

:where(.obituary-detail) .dialog-close {
    position:absolute !important;
    right:10px !important;
    top:4px !important;
    border:0 !important;
    background:transparent !important;
    color:var(--teal) !important;
    font-size:32px !important;
}

@media (min-width:1400px) {
    :where(.obituary-detail) .content-card {
        min-height:1020px !important;
    }
}

@media (max-width:1199px) {
    :where(.obituary-detail) .memorial-book {
        grid-template-columns:42% 1fr !important;
        gap:45px !important;
    }

    :where(.obituary-detail) .share-memory {
        gap:20px !important;
        grid-template-columns:1fr !important;
    }

    :where(.obituary-detail) .share-memory .btn {
        justify-self:start !important;
    }
}

@media (max-width:900px) {
    :where(.obituary-detail) .container {
        width:calc(100% - 48px) !important;
    }

    :where(.obituary-detail) .hero {
        min-height:800px !important;
    }

    :where(.obituary-detail) .hero-content {
        padding-top:70px !important;
    }

    :where(.obituary-detail) .hero h1 {
        font-size:70px !important;
    }

    :where(.obituary-detail) .content-card {
        padding:38px 32px !important;
    }

    :where(.obituary-detail) .heading-row {
        align-items:flex-start !important;
    }

    :where(.obituary-detail) .listen-btn {
        min-width:auto !important;
        padding-inline:20px !important;
    }

    :where(.obituary-detail) .book-image {
        height:470px !important;
        padding:24px !important;
    }

    :where(.obituary-detail) .memorial-book {
        gap:30px !important;
    }

    :where(.obituary-detail) .book-content h2 {
        font-size:38px !important;
    }

    :where(.obituary-detail) .book-actions {
        gap:10px !important;
    }

    :where(.obituary-detail) .book-actions .btn {
        min-width:0 !important;
        padding-inline:25px !important;
    }
}

@media (max-width:600px) {
    .obituary-detail {
        font-size:16px !important;
    }

    :where(.obituary-detail) .container {
        width:calc(100% - 40px) !important;
    }

    :where(.obituary-detail) h2 {
        font-size:36px !important;
    }

    :where(.obituary-detail) .hero {
        min-height:740px !important;
        background-position:48% center !important;
    }

    :where(.obituary-detail) .hero-content {
        padding-top:55px !important;
        padding-bottom:75px !important;
    }

    :where(.obituary-detail) .hero h1 {
        font-size:58px !important;
    }

    :where(.obituary-detail) .hero-subtitle {
        font-size:11px !important;
    }

    :where(.obituary-detail) .portrait {
        width:230px !important;
        height:270px !important;
        margin-top:22px !important;
    }

    :where(.obituary-detail) .dates {
        margin-top:22px !important;
        font-size:14px !important;
    }

    :where(.obituary-detail) .hero-actions {
        gap:9px !important;
    }

    :where(.obituary-detail) .hero-actions .btn {
        padding:10px 16px !important;
        min-height:46px !important;
        font-size:14px !important;
    }

    :where(.obituary-detail) .section-divider {
        height:100px !important;
        margin-block:40px !important;
    }

    :where(.obituary-detail) .first-divider {
        margin-top:-15px !important;
    }

    :where(.obituary-detail) .content-card {
        padding:28px 24px !important;
    }

    :where(.obituary-detail) .heading-row {
        flex-direction:column !important;
        gap:22px !important;
        padding-bottom:26px !important;
        margin-bottom:28px !important;
    }

    :where(.obituary-detail) .listen-btn {
        min-height:48px !important;
        font-size:14px !important;
    }

    :where(.obituary-detail) .obituary-copy h3 {
        font-size:25px !important;
    }

    :where(.obituary-detail) .obituary-copy p {
        margin-bottom:24px !important;
    }

    :where(.obituary-detail) .inline-links {
        gap:18px !important;
        margin-top:28px !important;
    }

    :where(.obituary-detail) .inline-links a {
        font-size:15px !important;
    }

    :where(.obituary-detail) .memorial-book {
        grid-template-columns:1fr !important;
        gap:36px !important;
    }

    :where(.obituary-detail) .book-image {
        height:445px !important;
    }

    :where(.obituary-detail) .book-content h2 {
        font-size:38px !important;
    }

    :where(.obituary-detail) .share-memory {
        margin-top:26px !important;
        padding-top:26px !important;
    }

    :where(.obituary-detail) .guestbook {
        padding-bottom:50px !important;
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto !important;
    }

    :where(.obituary-detail) .btn {
        transition:none !important;
    }
}

:where(.obituary-detail) .status:empty {
    display:none !important;
}
/* Design Two additions: load after the shared obituary CSS. */
.obituary-detail--v2 .split-intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 64px !important;
    align-items: center !important;
    padding-block: 68px 80px !important;
}
.obituary-detail--v2 .split-intro__content { min-width: 0 !important; }
.obituary-detail--v2 .split-intro__label {
    color: #3b7890 !important;
    margin-bottom: 20px !important;
}
.obituary-detail--v2 .split-intro__title {
    color: #111 !important;
    font-size: clamp(42px, 5.56vw, 80px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
    margin: 0 0 22px !important;
}
.obituary-detail--v2 .split-intro__dates {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}
.obituary-detail--v2 .split-intro__description { margin-top: 22px !important; }
.obituary-detail--v2 .split-intro__description p + p { margin-top: 16px !important; }
.obituary-detail--v2 .split-intro__actions {
    justify-content: flex-start !important;
    margin-top: 36px !important;
}
.obituary-detail--v2 .split-intro__actions .btn { padding-inline: 38px !important; }
.obituary-detail--v2 .split-intro__image { margin: 0 !important; min-width: 0 !important; }
.obituary-detail--v2 .split-intro__image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 608 / 393 !important;
    object-fit: cover !important;
    object-position: center !important;
}
.obituary-detail--v2 .split-intro--image-left .split-intro__image {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
.obituary-detail--v2 .split-intro--image-left .split-intro__content {
    grid-column: 2 !important;
    grid-row: 1 !important;
}
.obituary-detail--v2 .split-intro--no-image { grid-template-columns: minmax(0, 1fr) !important; }
.obituary-detail--v2 .split-intro--no-image .split-intro__content { grid-column: 1 !important; }
.obituary-detail--v2 .memorial-book { margin-top: 80px !important; }
.obituary-detail--v2 .guestbook { margin-top: 80px !important; }
@media (max-width: 1199px) {
    .obituary-detail--v2 .split-intro { gap: 40px !important; }
    .obituary-detail--v2 .split-intro__actions .btn { padding-inline: 24px !important; }
}
@media (max-width: 900px) {
    .obituary-detail--v2 .split-intro { gap: 30px !important; padding-block: 50px 60px !important; }
    .obituary-detail--v2 .split-intro__title { font-size: 48px !important; }
    .obituary-detail--v2 .split-intro__actions { gap: 10px !important; margin-top: 26px !important; }
    .obituary-detail--v2 .split-intro__actions .btn { padding-inline: 20px !important; }
}
@media (max-width: 600px) {
    .obituary-detail--v2 .split-intro {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 32px !important;
        padding-block: 40px 50px !important;
    }
    .obituary-detail--v2 .split-intro--image-left .split-intro__image,
    .obituary-detail--v2 .split-intro--image-left .split-intro__content {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .obituary-detail--v2 .split-intro__title { font-size: 44px !important; }
    .obituary-detail--v2 .split-intro__dates { font-size: 14px !important; }
    .obituary-detail--v2 .split-intro__actions .btn {
        padding: 10px 16px !important;
        font-size: 14px !important;
        min-height: 46px !important;
    }
    .obituary-detail--v2 .memorial-book,
    .obituary-detail--v2 .guestbook { margin-top: 50px !important; }
}


:where(.obituary-detail) .book-image img {
    object-fit: cover;
}