@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap');

html {
    --font-default: 'DM Sans', system-ui, sans-serif;
    --default-color: #252321;
    --default-background: #f5f1ea;
    --default-muted: #756e66;
    --default-borderColor: #d8cec2;
    --default-linkColor: #9c604d;
    --default-linkColorHover: #6e4033;
    --default-primary: #c4866c;
    --orange: #c4866c;
    --o-rip-background: #252321;
    --o-rip-color: #f5f1ea;
    --o-footer-background: #252321;
}

body.t-condolence {
    background: #f5f1ea;
    color: #252321;
}

.t-condolence .rip {
    background: #252321;
    color: #f5f1ea;
    padding-block: clamp(4rem, 10vw, 9rem);
}

.t-condolence .rip__content {
    max-width: 46rem;
}

.t-condolence .rip__title,
.t-condolence .textflow h2,
.t-condolence .goodbye__title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 500;
    letter-spacing: -.035em;
}

.t-condolence .rip__title {
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    line-height: .95;
    margin-bottom: 2.25rem;
}

.t-condolence .textflow {
    font-size: clamp(1.08rem, 1.8vw, 1.3rem);
    line-height: 1.65;
}

.t-condolence .textflow h2,
.t-condolence .goodbye__title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1;
}

.preview-overlay {
    align-items: center;
    background: #c4866c;
    color: #252321;
    display: flex;
    font-size: .82rem;
    gap: .8rem;
    justify-content: center;
    left: 0;
    letter-spacing: .02em;
    padding: .7rem 1rem;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 1000;
}

.preview-overlay__label {
    border: 1px solid currentcolor;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    padding: .25rem .55rem;
    text-transform: uppercase;
}

.preview-kicker {
    color: #c4866c;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.preview-hero-placeholder,
.preview-photo-placeholder {
    align-items: center;
    background: #403b36;
    border: 1px solid #6f6257;
    color: #d9cfc4;
    display: flex;
    font-size: .95rem;
    justify-content: center;
    min-height: clamp(14rem, 36vw, 25rem);
    padding: 2rem;
    text-align: center;
}

.preview-hero-placeholder {
    margin: 0 0 3rem;
}

.preview-shortline {
    color: #c4866c;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    letter-spacing: .015em;
    line-height: 1.35;
    margin: 0 0 2.5rem;
}

.preview-photo-placeholder {
    background: #ddd1c4;
    color: #62584f;
    margin-top: 3rem;
}

.preview-music-card {
    border-block: 1px solid #6f6257;
    margin-block: 4rem;
    padding-block: 2rem;
}

.preview-music-card h2 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 500;
    line-height: 1;
    margin: 0;
}

.preview-music-card .button {
    border-color: #c4866c;
    color: #f5f1ea;
}

.preview-music-player {
    background: #252321;
    border: 1px solid #6f6257;
    border-radius: .35rem;
    margin-top: 1.5rem;
    overflow: hidden;
    padding: .3rem;
}

.preview-music-player iframe {
    border-radius: .2rem;
    display: block;
}

.preview-music-attribution {
    font-size: .78rem;
    margin-top: .75rem;
}

.preview-music-attribution a {
    color: #c4866c;
    text-decoration: underline;
}

@media (max-width: 40rem) {
    .preview-overlay {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
        text-align: left;
    }
}