.promise-page {
    --night: #070b11;
    --deep: #0d1520;
    --blue: #172333;
    --cream: #f1e7d1;
    --paper: #eee3cc;
    --paper-2: #e7dac0;
    --gold: #c49a45;
    --gold-light: #d8b86c;
    --red: #7a3b34;
    --ink: #221c15;
    --line: rgba(89,66,30,.20);

    background: var(--night);
    color: var(--cream);
}


/* ==================================================
   HERO
================================================== */

.promise-page__hero {
    position: relative;
    overflow: hidden;

    padding: 52px 24px 40px;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(196,154,69,.13),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #121d2b,
            #080c12
        );

    border-bottom:
        1px solid rgba(196,154,69,.24);
}

.promise-page__hero-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.promise-page__eyebrow {
    display: block;
    margin-bottom: 13px;

    color: var(--gold-light);

    font-size: 10px;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.promise-page__hero h1 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(30px, 4vw, 46px);

    font-weight: 400;
    letter-spacing: .07em;

    color: #f3ead7;
}

.promise-page__hero p {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(16px, 2vw, 19px);

    font-style: italic;

    color: #f0e5d0;
}


/* ==================================================
   RULE
================================================== */

.promise-rule {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    width: min(220px, 70%);

    margin: 17px auto;
}

.promise-rule span {
    flex: 1;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );
}

.promise-rule span:last-child {
    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}

.promise-rule i {
    color: var(--gold);

    font-style: normal;
    font-size: 10px;
}

.promise-rule--dark {
    margin-top: 25px;
    margin-bottom: 0;
}


/* ==================================================
   BODY
================================================== */

.promise-page__body {
    padding: 44px 20px 100px;

    background:
        linear-gradient(
            180deg,
            #d8cab0,
            #e3d6bc 52%,
            #d2c2a5
        );

    color: var(--ink);
}

.promise-page__shell {
    width: min(860px, 100%);
    margin: 0 auto;
}

.promise-back-link {
    display: inline-block;

    margin-bottom: 18px;

    color: #62502d;

    font-size: 11px;
    letter-spacing: .09em;

    text-decoration: none;
    text-transform: uppercase;
}


/* ==================================================
   CARD
================================================== */

.promise-card {
    position: relative;
    overflow: hidden;

    padding:
        clamp(34px, 7vw, 70px);

    border:
        1px solid rgba(91,68,31,.38);

    background:
        radial-gradient(
            circle at 50% 5%,
            rgba(255,255,255,.27),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #f0e6d0,
            #e8dcc4
        );

    box-shadow:
        0 28px 65px rgba(26,18,7,.18);
}

.promise-card:before {
    content: "";

    position: absolute;

    inset: 12px;

    border:
        1px solid rgba(181,138,59,.22);

    pointer-events: none;
}


/* ==================================================
   HEADER
================================================== */

.promise-card__header {
    position: relative;
    z-index: 2;
    text-align: center;
}

.promise-card__day {
    display: block;

    margin-bottom: 5px;

    color: #8b6d32;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .30em;

    text-transform: uppercase;
}

.promise-card__date {
    display: block;

    margin-bottom: 22px;

    color: var(--red);

    font-size: 11px;
    font-weight: 600;
    letter-spacing: .20em;

    text-transform: uppercase;
}

.promise-card__title {
    max-width: 660px;

    margin: 0 auto;

    color: var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(36px, 6vw, 60px);

    font-weight: 400;

    line-height: 1.04;

    letter-spacing: .02em;

    text-transform: uppercase;
}


/* ==================================================
   SCRIPTURE
================================================== */

.promise-scripture {
    position: relative;

    max-width: 680px;

    margin:
        38px auto 14px;

    padding:
        34px 24px 14px;

    text-align: center;
}

.promise-scripture:before,
.promise-scripture:after {
    content: "";

    position: absolute;

    left: 50%;

    width: 110px;
    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(143,107,46,.70),
            transparent
        );
}

.promise-scripture:before {
    top: 0;
}

.promise-scripture:after {
    bottom: 0;
}

.promise-scripture__quote {
    position: absolute;

    top: 4px;
    left: 50%;

    transform:
        translateX(-50%);

    color:
        rgba(151,112,45,.20);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 58px;
    line-height: 1;
}

.promise-scripture blockquote {
    margin:
        0 0 18px;

    padding: 0;

    border: 0;

    color: #211b13;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(22px, 3.4vw, 30px);

    font-style: italic;

    line-height: 1.58;
}

.promise-scripture cite {
    color: var(--red);

    font-size: 11px;
    font-style: normal;
    font-weight: 700;

    letter-spacing: .15em;

    text-transform: uppercase;
}


/* ==================================================
   READING
================================================== */

.promise-reading {
    margin-top: 0;

    border-top:
        1px solid var(--line);
}

.promise-reading-block {
    display: grid;

    grid-template-columns:
        42px 1fr;

    gap: 20px;

    padding:
        42px 0;

    border-bottom:
        1px solid var(--line);
}

.promise-reading-block:first-child {
    padding-top: 28px;
}

.promise-reading-block--rest {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(205,186,145,.15),
            transparent
        );
}

.promise-reading-block__number {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border:
        1px solid rgba(149,115,48,.42);

    border-radius: 50%;

    color: #876829;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;
}

.promise-reading-block__eyebrow {
    display: block;

    margin-bottom: 6px;

    color: #9a7a3c;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .24em;

    text-transform: uppercase;
}

.promise-reading-block__main h3 {
    margin:
        0 0 17px;

    color: var(--red);

    font-size: 12px;

    letter-spacing: .19em;
}

.promise-reading-block__main p,
.promise-reading-block__main li {
    margin:
        0 0 17px;

    color: #2c261d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    line-height: 1.8;
}

.promise-reading-block__main p:last-child,
.promise-reading-block__main li:last-child {
    margin-bottom: 0;
}

.promise-prayer-display p {
    font-style: italic;
    font-size: 19px;
}


/* ==================================================
   CLOSING
================================================== */

.promise-closing {
    padding:
        43px 20px 25px;

    text-align: center;
}

.promise-closing span {
    display: block;

    margin-bottom: 12px;

    color: #a78038;
}

.promise-closing p {
    margin: 0;

    color: #4a3d2b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    font-style: italic;
}


/* ==================================================
   RECEIVED
================================================== */

.promise-received-area {
    padding:
        30px 0 50px;

    text-align: center;
}

.promise-received-area__label {
    display: block;

    margin-bottom: 15px;

    color: #85682f;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .26em;

    text-transform: uppercase;
}

.promise-received-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 13px;

    min-width: 290px;

    padding:
        15px 24px;

    border:
        1px solid #94713b;

    background:
        transparent;

    color: #513f23;

    cursor: pointer;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.promise-received-button.is-received {
    background:
        linear-gradient(
            180deg,
            #182535,
            #0d151f
        );

    color:
        #efe3ca;
}

.promise-received-note {
    margin:
        12px 0 0;

    color: #806c4b;

    font-size: 10px;
}


/* ==================================================
   NAVIGATION
================================================== */

.promise-navigation {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    gap: 16px;

    padding:
        31px 0;

    border-top:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);
}

.promise-navigation__side {
    min-width: 0;
}

.promise-navigation__side--next {
    text-align: right;
}

.promise-nav-link {
    display: flex;

    flex-direction: column;

    gap: 6px;

    color: #44371f;

    text-decoration: none;
}

.promise-nav-link__direction {
    color: #8b6b32;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;
}

.promise-nav-link__title {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;
}

.promise-nav-calendar {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    min-width: 100px;

    padding:
        0 13px;

    border-left:
        1px solid rgba(108,80,34,.16);

    border-right:
        1px solid rgba(108,80,34,.16);

    color: #4f4025;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .14em;

    text-decoration: none;

    text-transform: uppercase;
}


/* ==================================================
   SHARE
================================================== */

.promise-share-area {
    padding:
        53px 0 4px;

    text-align: center;
}

.promise-share-area__rule {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    width: 160px;

    margin:
        0 auto 25px;
}

.promise-share-area__rule span {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a47d37
        );
}

.promise-share-area__rule span:last-child {
    background:
        linear-gradient(
            90deg,
            #a47d37,
            transparent
        );
}

.promise-share-area__rule i {
    color: #a47d37;

    font-style: normal;

    font-size: 10px;
}

.promise-share-area__label {
    display: block;

    margin-bottom: 10px;

    color: #765b29;

    font-size: 10px;

    letter-spacing: .28em;

    text-transform: uppercase;
}

.promise-share-area__intro {
    max-width: 430px;

    margin:
        0 auto 22px;

    color: #63533a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    line-height: 1.55;
}

.promise-share-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    min-width: 240px;

    padding:
        15px 22px;

    border:
        1px solid #94713b;

    background:
        linear-gradient(
            180deg,
            #172333,
            #0d151f
        );

    color: #eee2ca;

    cursor: pointer;

    font-size: 10px;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.promise-copy-button {
    display: block;

    margin:
        15px auto 0;

    border: 0;

    background: transparent;

    color: #715b34;

    cursor: pointer;

    font-size: 10px;

    text-decoration: underline;
}

.promise-share-status {
    min-height: 20px;

    margin:
        12px 0 0;

    color: #715b34;

    font-size: 10px;
}


/* ==================================================
   TABLET / IPAD
================================================== */

@media (min-width: 700px) {

    .promise-page__shell {
        width:
            min(
                780px,
                calc(100% - 48px)
            );
    }

}


/* ==================================================
   VERY WIDE LANDSCAPE
================================================== */

@media (min-width: 1100px) {

    .promise-page__shell {
        width:
            min(
                760px,
                calc(100% - 64px)
            );
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

    .promise-page__hero {
        padding:
            46px 20px 36px;
    }

    .promise-page__hero h1 {
        font-size:
            29px;
    }

    .promise-page__body {
        padding:
            38px 10px 70px;
    }

    .promise-card {
        padding:
            38px 22px;
    }

    .promise-card:before {
        inset: 8px;
    }

    .promise-scripture {
        margin:
            32px auto 12px;

        padding:
            31px 4px 12px;
    }

    .promise-scripture blockquote {
        font-size:
            21px;
    }

    .promise-reading-block {
        grid-template-columns:
            30px 1fr;

        gap: 11px;

        padding:
            35px 0;
    }

    .promise-reading-block:first-child {
        padding-top: 24px;
    }

    .promise-reading-block__number {
        width: 27px;
        height: 27px;

        font-size: 9px;
    }

    .promise-reading-block__main p,
    .promise-reading-block__main li {
        font-size: 17px;

        line-height: 1.72;
    }

    .promise-received-button {
        width: 100%;

        min-width: 0;
    }

    .promise-navigation {
        grid-template-columns:
            1fr;

        gap: 0;

        padding:
            12px 0;
    }

    .promise-navigation__side,
    .promise-navigation__side--next {
        text-align: center;
    }

    .promise-nav-link {
        align-items: center;

        padding:
            18px 5px;
    }

    .promise-nav-calendar {
        min-height: 60px;

        border-left: 0;
        border-right: 0;

        border-top:
            1px solid rgba(108,80,34,.16);

        border-bottom:
            1px solid rgba(108,80,34,.16);
    }

    .promise-share-button {
        width: 100%;

        min-width: 0;
    }

}
.promise-faith-rating{border:0;padding:0;margin:12px 0 24px}.promise-faith-rating legend{font:20px Georgia,serif;margin-bottom:14px}.promise-faith-rating #promise-faith-options{display:flex;justify-content:center;gap:10px}.promise-faith-rating label{position:relative;display:grid;place-items:center;border:1px solid #b79659;width:48px;height:48px;border-radius:4px;font:22px Georgia,serif}.promise-faith-rating input{position:absolute;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}.promise-faith-rating label:has(input:checked){background:#b79659;color:#171611}.promise-faith-rating label:has(input:focus-visible){outline:3px solid #785b30;outline-offset:3px}.promise-faith-rating #promise-faith-status{font:14px/1.6 Arial,sans-serif;margin-top:12px}

/* Free promise rating: the number choices visibly lift from the paper. */
.promise-faith-rating input+span{border-bottom-width:3px;box-shadow:inset 0 1px 0 #fff8,0 3px 0 #bca77b,0 5px 9px #785b3020;background-image:linear-gradient(#ffffff35,#ffffff00);transition:transform .12s ease,box-shadow .12s ease;}
.promise-faith-rating label:active input+span{transform:translateY(3px);box-shadow:inset 0 2px 4px #785b3040,0 1px 0 #bca77b;}
@media(prefers-reduced-motion:reduce){.promise-faith-rating input+span{transition:none;}}