/* ==========================================================
   PILLOW OF PROMISE
========================================================== */

.pop-page {

    --pop-black: #05080d;
    --pop-night: #07101a;
    --pop-deep: #0a1421;
    --pop-midnight: #101c2b;
    --pop-midnight-light: #142235;

    --pop-gold: #c2953e;
    --pop-gold-bright: #d9af58;
    --pop-gold-soft: #9d762f;

    --pop-cream: #eee3cd;
    --pop-muted: #85888b;

    --pop-grid: rgba(202,177,124,.11);
    --pop-border: rgba(194,149,62,.46);

    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #07101a 0%,
            #08111c 42%,
            #050a11 100%
        );

    color: var(--pop-cream);

}


/* ==========================================================
   INTRO
========================================================== */

.pop-intro {

    position: relative;
    overflow: hidden;

    padding: 56px 24px 38px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(56,85,116,.22),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            #07101a,
            #08111b
        );

}


.pop-intro:before {

    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .055;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.025) 0,
            rgba(255,255,255,.025) 1px,
            transparent 1px,
            transparent 5px
        );

}


.pop-intro__inner {

    position: relative;
    z-index: 2;

    max-width: 820px;

    margin: 0 auto;

}


.pop-intro__eyebrow {

    display: block;

    margin-bottom: 14px;

    color: var(--pop-gold-bright);

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

    letter-spacing: .38em;

    text-transform: uppercase;

}


.pop-intro h1 {

    margin: 0;

    color: #f2e8d5;

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

    font-size:
        clamp(
            36px,
            5.5vw,
            56px
        );

    font-weight: 400;

    line-height: 1.03;

}


.pop-intro p {

    max-width: 580px;

    margin: 18px auto 0;

    color: rgba(238,227,205,.68);

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

    font-size:
        clamp(
            15px,
            2vw,
            18px
        );

    line-height: 1.6;

}


/* ==========================================================
   EXPERIENCE
========================================================== */

.pop-experience {

    padding: 0 24px 88px;

}


.pop-experience__shell {

    width:
        min(
            1180px,
            100%
        );

    margin: 0 auto;

}


/* ==========================================================
   SHARED
========================================================== */

.pop-section-kicker {

    display: block;

    margin-bottom: 9px;

    color: var(--pop-gold-bright);

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

    letter-spacing: .30em;

    text-transform: uppercase;

}


/* ==========================================================
   TODAY
========================================================== */

.pop-today {

    position: relative;
    overflow: hidden;

    padding: 34px 42px 35px;

    border:
        1px solid
        rgba(194,149,62,.58);

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(217,175,88,.12),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #152235,
            #0b1623 58%,
            #07101a
        );

    box-shadow:
        0 22px 54px
        rgba(0,0,0,.20);

}


.pop-today:before {

    content: "";

    position: absolute;

    inset: 10px;

    border:
        1px solid
        rgba(217,175,88,.17);

    pointer-events: none;

}


.pop-today__inner {

    position: relative;
    z-index: 2;

    max-width: 880px;

}


.pop-today__date {

    color:
        rgba(238,227,205,.70);

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

    font-size: 15px;

    font-style: italic;

}


.pop-today__ornament {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 142px;

    margin: 18px 0 18px;

}


.pop-today__ornament span {

    flex: 1;

    height: 1px;

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

}


.pop-today__ornament span:last-child {

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

}


.pop-today__ornament i {

    color:
        var(--pop-gold-bright);

    font-style: normal;

    font-size: 8px;

}


.pop-today__status {

    margin: 0 0 8px;

    color:
        var(--pop-gold-bright);

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

    letter-spacing: .23em;

    text-transform: uppercase;

}


.pop-today__content h2 {

    max-width: 760px;

    margin: 0;

    color: #f2e7d3;

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

    font-size:
        clamp(
            31px,
            4.3vw,
            45px
        );

    font-weight: 400;

    line-height: 1.04;

}


.pop-today__message,
.pop-today__empty {

    margin: 13px 0 0;

    color:
        rgba(238,227,205,.66);

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

    font-size: 15px;

    line-height: 1.55;

}


.pop-today__button {

    display: inline-flex;

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

    gap: 13px;

    margin-top: 19px;

    padding: 13px 20px;

    border:
        1px solid
        var(--pop-gold);

    background:
        linear-gradient(
            180deg,
            #d3aa55,
            #ae7f2d
        );

    color: #161009;

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

    letter-spacing: .16em;

    text-decoration: none;

    text-transform: uppercase;

}


/* ==========================================================
   WEEK
========================================================== */

.pop-week-section {

    margin-top: 16px;

    padding: 30px 31px 26px;

    border:
        1px solid
        rgba(194,149,62,.37);

    background:
        linear-gradient(
            180deg,
            #0f1b29,
            #09131f
        );

}


.pop-week-header {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    padding-bottom: 21px;

    border-bottom:
        1px solid
        rgba(194,149,62,.15);

}


.pop-week-header h2 {

    margin: 0;

    color: #f0e5d0;

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

    font-size: 30px;

    font-weight: 400;

}


.pop-week-nav {

    display: flex;

    align-items: center;

    gap: 15px;

}


.pop-week-arrow {

    display: flex;

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

    width: 40px;
    height: 40px;

    border:
        1px solid
        rgba(194,149,62,.44);

    background: transparent;

    color:
        var(--pop-gold-bright);

    cursor: pointer;

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

    font-size: 18px;

}


.pop-week-range {

    min-width: 148px;

    text-align: center;

    color:
        rgba(238,227,205,.62);

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

    font-size: 12px;

}


.pop-week-grid {

    display: grid;

    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );

    gap: 9px;

    margin-top: 21px;

}


.pop-week-card {

    position: relative;

    min-width: 0;

    min-height: 126px;

    padding: 15px 12px;

    border:
        1px solid
        rgba(203,181,137,.13);

    background:
        rgba(3,8,14,.20);

}


.pop-week-card--available {

    border-color:
        rgba(217,175,88,.65);

    background:
        linear-gradient(
            155deg,
            #dfb755,
            #c6973c 55%,
            #ad7927
        );

    color: #17100a;

}


.pop-week-card--today {

    box-shadow:
        inset 0 0 0 2px
        rgba(242,216,149,.95);

}


.pop-week-card--received:after {

    content: "✓";

    position: absolute;

    top: 9px;
    right: 9px;

    display: flex;

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

    width: 19px;
    height: 19px;

    border:
        1px solid
        rgba(23,16,10,.42);

    border-radius: 50%;

    color: #17100a;

    font-size: 9px;

    font-weight: 700;

}


.pop-week-card__link {

    display: flex;

    flex-direction: column;

    height: 100%;

    color: inherit;

    text-decoration: none;

}


.pop-week-card__day {

    display: block;

    margin-bottom: 7px;

    color:
        rgba(238,227,205,.38);

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

    letter-spacing: .17em;

    text-transform: uppercase;

}


.pop-week-card--available
.pop-week-card__day {

    color:
        rgba(23,16,10,.60);

}


.pop-week-card__number {

    display: block;

    margin-bottom: 9px;

    color:
        rgba(238,227,205,.68);

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

    font-size: 25px;

}


.pop-week-card--available
.pop-week-card__number {

    color: #17100a;

}


.pop-week-card__title {

    margin-top: 6px;

    color:
        rgba(238,227,205,.50);

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

    font-size: 11px;

    line-height: 1.22;

}


.pop-week-card--available
.pop-week-card__title {

    color: #20170d;

    font-weight: 600;

}


.pop-week-card__empty {

    margin-top: 6px;

    color:
        rgba(238,227,205,.26);

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

    font-size: 10px;

    font-style: italic;

}


/* ==========================================================
   WEEK PROGRESS
========================================================== */

.pop-week-progress {

    display: grid;

    grid-template-columns:
        auto 1fr;

    align-items: center;

    gap: 20px;

    margin-top: 21px;

    padding-top: 19px;

    border-top:
        1px solid
        rgba(194,149,62,.15);

}


.pop-week-progress__copy {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.pop-week-progress__copy span {

    color:
        rgba(238,227,205,.42);

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

    letter-spacing: .18em;

}


.pop-week-progress__copy strong {

    color:
        var(--pop-gold-bright);

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

    font-size: 15px;

    font-weight: 400;

}


.pop-week-progress__track {

    overflow: hidden;

    height: 3px;

    background:
        rgba(238,227,205,.08);

}


.pop-week-progress__track span {

    display: block;

    width: 0;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--pop-gold-soft),
            var(--pop-gold-bright)
        );

    transition:
        width .25s ease;

}


/* ==========================================================
   MONTH PANEL
========================================================== */

.pop-month-panel {

    position: relative;

    margin-top: 16px;

    padding: 29px 30px 22px;

    border:
        1px solid
        var(--pop-border);

    background:
        linear-gradient(
            180deg,
            #111e2e 0%,
            #0c1724 56%,
            #09131f 100%
        );

    box-shadow:
        0 22px 54px
        rgba(0,0,0,.18);

}


.pop-month-panel__top {

    display: flex;

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

    gap: 30px;

    padding-bottom: 20px;

    border-bottom:
        1px solid
        rgba(194,149,62,.18);

}


.pop-month-panel__top h2 {

    margin: 0;

    color: #f0e5d0;

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

    font-size: 28px;

    font-weight: 400;

}


.pop-month-panel__intro {

    max-width: 520px;

    margin: 7px 0 0;

    color:
        rgba(238,227,205,.48);

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

    font-size: 13px;

    line-height: 1.5;

}


.pop-month-toggle {

    display: none;

    flex-shrink: 0;

    align-items: center;

    gap: 11px;

    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--pop-gold-bright);

    cursor: pointer;

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

    letter-spacing: .12em;

    text-transform: uppercase;

}


.pop-month-toggle__icon {

    display: flex;

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

    width: 34px;
    height: 34px;

    border:
        1px solid
        rgba(217,175,88,.45);

    font-size: 17px;

}


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

.pop-calendar-nav {

    display: grid;

    grid-template-columns:
        46px 1fr 46px;

    align-items: center;

    gap: 12px;

    padding: 25px 2px 20px;

}


.pop-calendar-arrow {

    display: flex;

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

    width: 44px;
    height: 44px;

    border:
        1px solid
        rgba(194,149,62,.48);

    background: transparent;

    color:
        var(--pop-gold-bright);

    cursor: pointer;

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

    font-size: 21px;

}


.pop-calendar-month {

    text-align: center;

}


.pop-calendar-month__name {

    display: block;

    color: #f1e6d0;

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

    font-size: 32px;

    line-height: 1;

}


.pop-calendar-month__year {

    display: block;

    margin-top: 8px;

    color:
        var(--pop-gold-bright);

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

    letter-spacing: .36em;

}


/* ==========================================================
   WEEKDAYS
========================================================== */

.pop-weekdays {

    display: grid;

    grid-template-columns:
        repeat(
            7,
            1fr
        );

    padding: 7px 0 9px;

}


.pop-weekdays span {

    text-align: center;

    color:
        rgba(221,210,190,.42);

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

    letter-spacing: .14em;

}


/* ==========================================================
   MONTH GRID
========================================================== */

.pop-calendar-grid {

    display: grid;

    grid-template-columns:
        repeat(
            7,
            1fr
        );

    border-top:
        1px solid
        var(--pop-grid);

    border-left:
        1px solid
        var(--pop-grid);

    transition:
        opacity .15s ease,
        transform .15s ease;

}


.pop-calendar-grid.is-changing {

    opacity: 0;

    transform:
        translateY(3px);

}


.pop-day {

    position: relative;

    display: flex;

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

    aspect-ratio: 1 / 1;

    min-width: 0;

    border-right:
        1px solid
        var(--pop-grid);

    border-bottom:
        1px solid
        var(--pop-grid);

    color:
        rgba(225,219,207,.40);

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

}


.pop-day--empty {

    background:
        rgba(0,0,0,.035);

}


.pop-day__number {

    font-size: 15px;

}


/* ==========================================================
   AVAILABLE
========================================================== */

.pop-day--available {

    background:
        linear-gradient(
            135deg,
            #dfb755,
            #c8993e 55%,
            #b7822e
        );

    color: #161009;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,235,177,.43);

}


.pop-day__link {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

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

    gap: 5px;

    padding: 7px;

    color: inherit;

    text-align: center;

    text-decoration: none;

}


.pop-day--available
.pop-day__number {

    font-size: 16px;

    font-weight: 700;

}


.pop-day__title {

    display: -webkit-box;

    overflow: hidden;

    width: 100%;

    color:
        rgba(22,16,9,.79);

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

    font-size: 7px;

    font-weight: 600;

    line-height: 1.12;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    line-clamp: 2;

}


.pop-day__received {

    position: absolute;

    right: 6px;
    top: 5px;

    display: flex;

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

    width: 15px;
    height: 15px;

    border:
        1px solid
        rgba(20,15,8,.38);

    border-radius: 50%;

    color: #17100a;

    font-size: 8px;

    font-weight: 700;

}


/* ==========================================================
   TODAY IN MONTH
========================================================== */

.pop-day--today:not(.pop-day--available) {

    box-shadow:
        inset 0 0 0 2px
        var(--pop-gold-bright);

}


.pop-day--today:not(.pop-day--available)
.pop-day__number {

    color:
        var(--pop-gold-bright);

}


.pop-day--today.pop-day--available {

    outline:
        2px solid
        #f5d98f;

    outline-offset:
        -4px;

}


/* ==========================================================
   CALENDAR KEY
========================================================== */

.pop-calendar-key {

    display: flex;

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

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 15px;

    padding-top: 15px;

    border-top:
        1px solid
        rgba(194,149,62,.14);

    color:
        rgba(238,227,205,.55);

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

    font-size: 9px;

}


.pop-key {

    display: inline-flex;

    align-items: center;

    gap: 7px;

}


.pop-key__available {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--pop-gold-bright);

}


.pop-key__today {

    width: 8px;
    height: 8px;

    border:
        1px solid
        var(--pop-gold-bright);

    border-radius: 50%;

}


.pop-key__received {

    display: flex;

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

    width: 13px;
    height: 13px;

    border:
        1px solid
        var(--pop-gold-bright);

    border-radius: 50%;

    color:
        var(--pop-gold-bright);

    font-size: 7px;

    font-style: normal;

}


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

@media
(max-width: 950px) {

    .pop-month-toggle {

        display: inline-flex;

    }


    .pop-month-content {

        display: none;

    }


    .pop-month-panel.is-open
    .pop-month-content {

        display: block;

    }


    .pop-week-grid {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

    }


    .pop-today {

        padding:
            31px 40px 32px;

    }


    .pop-week-card {

        min-height: 118px;

    }

}


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

@media
(max-width: 650px) {

    .pop-intro {

        padding:
            46px 20px 31px;

    }


    .pop-intro__eyebrow {

        font-size: 8px;

    }


    .pop-intro h1 {

        font-size: 34px;

        line-height: 1.05;

    }


    .pop-intro p {

        margin-top: 16px;

        font-size: 14px;

    }


    .pop-experience {

        padding:
            0 10px 65px;

    }


    /* TODAY */

    .pop-today {

        padding:
            28px 25px 29px;

    }


    .pop-today:before {

        inset: 8px;

    }


    .pop-today__ornament {

        margin:
            15px 0 17px;

    }


    .pop-today__content h2 {

        font-size: 31px;

    }


    .pop-today__message,
    .pop-today__empty {

        font-size: 14px;

    }


    .pop-today__button {

        width: 100%;

        box-sizing: border-box;

        margin-top: 18px;

    }


    /* WEEK */

    .pop-week-section {

        margin-top: 12px;

        padding:
            24px 15px 21px;

    }


    .pop-week-header {

        display: block;

        padding-bottom: 17px;

    }


    .pop-week-header h2 {

        font-size: 28px;

    }


    .pop-week-nav {

        justify-content: space-between;

        margin-top: 16px;

    }


    .pop-week-range {

        flex: 1;

        min-width: 0;

    }


    .pop-week-grid {

        grid-template-columns: 1fr;

        gap: 7px;

        margin-top: 15px;

    }


    .pop-week-card {

        min-height: 0;

        padding: 0;

    }


    .pop-week-card__link {

        display: grid;

        grid-template-columns:
            60px 1fr;

        align-items: center;

        gap: 14px;

        min-height: 72px;

        padding:
            11px 16px;

    }


    .pop-week-card__date-block {

        display: flex;

        flex-direction: column;

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

        min-height: 46px;

        padding-right: 12px;

        border-right:
            1px solid
            rgba(238,227,205,.10);

    }


    .pop-week-card--available
    .pop-week-card__date-block {

        border-right-color:
            rgba(23,16,10,.17);

    }


    .pop-week-card__day {

        margin:
            0 0 4px;

        font-size: 7px;

    }


    .pop-week-card__number {

        margin: 0;

        font-size: 23px;

    }


    .pop-week-card__title {

        margin: 0;

        font-size: 14px;

        line-height: 1.22;

    }


    .pop-week-card__empty {

        margin: 0;

        font-size: 11px;

    }


    .pop-week-progress {

        grid-template-columns: 1fr;

        gap: 11px;

        margin-top: 18px;

        padding-top: 16px;

    }


    /* MONTH */

    .pop-month-panel {

        margin-top: 12px;

        padding:
            20px 15px 18px;

    }


    .pop-month-panel__top {

        align-items: center;

        gap: 15px;

        padding-bottom: 0;

        border-bottom: 0;

    }


    .pop-month-panel__top h2 {

        font-size: 22px;

    }


    .pop-month-panel__intro {

        display: none;

    }


    .pop-month-content {

        margin-top: 18px;

        padding-top: 18px;

        border-top:
            1px solid
            rgba(194,149,62,.16);

    }


    .pop-calendar-nav {

        grid-template-columns:
            38px 1fr 38px;

        padding:
            3px 0 17px;

    }


    .pop-calendar-arrow {

        width: 36px;
        height: 36px;

    }


    .pop-calendar-month__name {

        font-size: 26px;

    }


    .pop-weekdays {

        padding-bottom: 7px;

    }


    .pop-weekdays span {

        font-size: 6px;

        letter-spacing: .04em;

    }


    .pop-day {

        min-height: 50px;

        aspect-ratio: auto;

    }


    .pop-day__number {

        font-size: 12px;

    }


    .pop-day--available
    .pop-day__number {

        font-size: 13px;

    }


    .pop-day__title {

        display: none;

    }


    .pop-day__received {

        top: 4px;
        right: 4px;

        width: 13px;
        height: 13px;

        font-size: 7px;

    }


    .pop-calendar-key {

        gap: 15px;

        font-size: 8px;

    }

}