* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    background: #281d30;
    color: #f4edf4;
    font-family: "DM Sans", sans-serif;
}

button {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* ================= MAIN ================= */

.site-shell {
    min-height: 100vh;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 82% 7%,
            rgba(166, 128, 197, .22),
            transparent 30rem
        ),
        radial-gradient(
            ellipse at 5% 63%,
            rgba(93, 119, 83, .17),
            transparent 29rem
        ),
        linear-gradient(
            145deg,
            #25182c,
            #35243d 55%,
            #211722
        );
}


/* ================= TOPBAR ================= */

.topbar {
    position: relative;
    z-index: 10;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    width: min(1340px, calc(100% - 72px));
    margin: auto;

    padding: 27px 0 20px;

    border-bottom: 1px solid rgba(215, 193, 222, .2);
}

.mark {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 11px;

    padding: 0;

    border: 0;
    background: transparent;

    color: #f4edf4;

    font-family: "Space Mono", monospace;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;

    cursor: pointer;
}

.mark-flower {
    position: relative;

    width: 19px;
    height: 19px;

    border: 1px solid #b2d384;
    border-radius: 50%;
}

.mark-flower::before,
.mark-flower::after,
.mark-flower span {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    border: 1px solid #b2d384;
    border-radius: 50%;
}

.mark-flower::before {
    top: -5px;
    left: 5px;
}

.mark-flower::after {
    bottom: -5px;
    left: 5px;
}

.mark-flower span {
    top: 5px;
    left: -5px;
}

.topbar-center,
.topbar-note {
    color: #b9adb9;

    font-family: "Space Mono", monospace;
    font-size: 9px;

    letter-spacing: .18em;
    text-transform: uppercase;
}

.topbar-center {
    color: #d3b6df;
}

.topbar-note {
    justify-self: end;
}


/* ================= STAGE ================= */

.garden-stage {
    width: min(1340px, calc(100% - 72px));
    margin: auto;
    padding: 25px 0 28px;
}

.keepsake-window {
    position: relative;

    min-height: calc(100vh - 155px);

    overflow: hidden;

    border: 1px solid rgba(220, 201, 225, .25);

    background: rgba(39, 28, 48, .55);

    box-shadow:
        0 32px 90px rgba(19, 10, 28, .36);

    backdrop-filter: blur(16px);
}


/* ================= EDITORIAL ================= */

.editorial-intro {
    display: flex;
    align-items: center;
    gap: 17px;

    padding: 17px 27px 0;

    color: #a99eaa;

    font-family: "Space Mono", monospace;
    font-size: 9px;

    letter-spacing: .2em;
    text-transform: uppercase;
}

.editorial-rule {
    width: 38px;
    height: 1px;

    background: #b2d384;
}

.editorial-page {
    margin-left: auto;
    color: #b2d384;
}


/* ================= NAV ================= */

.tab-scroll {
    position: relative;
    z-index: 3;

    display: flex;
    gap: clamp(16px, 2.6vw, 38px);

    min-height: 61px;

    overflow-x: auto;

    padding: 24px 27px 0;

    border-bottom: 1px solid rgba(220, 201, 225, .18);

    scrollbar-width: none;
}

.tab-scroll::-webkit-scrollbar {
    display: none;
}

.tab-button {
    position: relative;

    flex: 0 0 auto;

    min-height: 37px;

    padding: 0 0 15px;

    border: 0;

    background: transparent;

    color: #a99eaa;

    font-family: "Space Mono", monospace;
    font-size: 9px;

    letter-spacing: .11em;
    text-transform: uppercase;

    cursor: pointer;

    transition: .25s ease;
}

.tab-button:hover {
    color: white;
    transform: translateY(-1px);
}

.tab-button.active {
    color: white;
}

.tab-button.active::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -1px;
    left: 0;

    height: 1px;

    background: #b2d384;
}

.tab-short-label {
    display: none;
}


/* ================= PANELS ================= */

.tab-panel {
    min-height: 645px;

    padding: clamp(38px, 5vw, 70px)
             clamp(25px, 8vw, 112px);
}

.hidden {
    display: none !important;
}

.panel-scroll {
    height: 100%;
    max-height: 620px;

    overflow-y: auto;

    padding-right: 13px;
}

.panel-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 31px;
}

.section-kicker,
.eyebrow {
    color: #b2d384;

    font-family: "Space Mono", monospace;
    font-size: 10px;

    letter-spacing: .2em;
    text-transform: uppercase;
}

.panel-heading h2 {
    margin: 10px 0 0;

    font-family: "Instrument Serif", serif;

    font-size: clamp(47px, 7vw, 86px);
    font-weight: 400;

    letter-spacing: -.045em;
    line-height: .86;
}

.panel-detail {
    padding-bottom: 6px;

    color: #a99eaa;

    font-family: "Space Mono", monospace;
    font-size: 9px;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.subcopy {
    max-width: 570px;

    margin: 0 0 31px;

    color: #b9adb9;

    font-size: 14px;
    line-height: 1.75;
}


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

.intro-panel {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 645px;

    overflow: hidden;

    padding: clamp(60px, 10vw, 125px)
             clamp(26px, 8vw, 112px);
}

.intro-copy {
    position: relative;
    z-index: 2;

    max-width: 680px;
}

.intro-panel h1 {
    max-width: 680px;

    margin: 19px 0 22px;

    font-family: "Instrument Serif", serif;

    font-size: clamp(64px, 10vw, 128px);
    font-weight: 400;

    letter-spacing: -.07em;
    line-height: .8;
}

.hero-intro {
    max-width: 455px;

    margin: 0;

    color: #d8ced8;

    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.7;
}

.intro-actions {
    display: flex;
    align-items: center;
    gap: 21px;

    margin-top: 39px;
}

.primary-action {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    padding: 14px 16px;

    border: 1px solid #b2d384;

    background: #b2d384;
    color: #281d30;

    font-family: "Space Mono", monospace;
    font-size: 9px;

    letter-spacing: .12em;
    text-transform: uppercase;

    cursor: pointer;

    transition: .25s ease;
}

.primary-action:hover {
    transform: translateY(-3px);
    background: #c9e39e;
}

.primary-action span {
    font-size: 15px;
}

.intro-note {
    color: #a99eaa;

    font-family: "Space Mono", monospace;
    font-size: 9px;

    letter-spacing: .12em;
    text-transform: uppercase;
}


/* ================= DECORATION ================= */

.intro-orbit {
    position: absolute;

    right: 9%;
    top: 14%;

    width: clamp(220px, 32vw, 430px);
    aspect-ratio: 1;

    border: 1px solid rgba(206, 172, 238, .26);

    border-radius: 50%;

    transform: rotate(-18deg);
}

.intro-orbit::before {
    content: "";

    position: absolute;
    inset: 14%;

    border: 1px solid rgba(206, 172, 238, .17);

    border-radius: 50%;
}

.intro-orbit span {
    position: absolute;

    right: 12%;
    bottom: 18%;

    color: #d3b6df;

    font-family: "Instrument Serif", serif;
    font-size: clamp(25px, 4vw, 48px);

    font-style: italic;

    transform: rotate(11deg);
}

.hero-art {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.lily {
    position: absolute;

    font-size: 160px;

    color: #9f68bb;

    filter:
        drop-shadow(0 18px 20px rgba(12, 5, 23, .26));
}

.lily-large {
    right: 7%;
    bottom: 1%;

    transform: rotate(7deg);
}

.lily-small {
    left: 47%;
    bottom: -2%;

    font-size: 100px;

    opacity: .75;

    transform: rotate(-14deg);
}

.character {
    position: absolute;

    font-size: 80px;

    color: #b2d384;

    animation: float-character 5s ease-in-out infinite;
}

.character-one {
    right: 2%;
    bottom: 3%;
}

.character-two {
    right: 28%;
    bottom: 2%;

    font-size: 65px;

    opacity: .75;

    animation-delay: -2s;
}

.intro-caption {
    position: absolute;

    right: 31px;
    bottom: 26px;

    display: flex;
    align-items: center;
    gap: 10px;

    color: #a99eaa;

    font-family: "Space Mono", monospace;
    font-size: 9px;

    letter-spacing: .13em;
    text-transform: uppercase;
}

.caption-line {
    width: 32px;
    height: 1px;

    background: #b2d384;
}


/* ================= LETTER FOLDERS ================= */

.folder-grid {
    display: grid;

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

    gap: 14px;
}

.folder {
    position: relative;

    min-height: 160px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;

    padding: 22px;

    border: 1px solid #57445f;

    background:
        linear-gradient(
            145deg,
            rgba(88, 61, 104, .8),
            rgba(52, 36, 67, .8)
        );

    color: #f4edf4;

    text-align: left;

    cursor: pointer;

    transition: .3s ease;
}

.folder:hover {
    transform: translateY(-5px);

    border-color: #b2d384;

    background:
        linear-gradient(
            145deg,
            rgba(105, 74, 122, .9),
            rgba(62, 42, 78, .9)
        );
}

.folder-icon {
    position: absolute;

    top: 20px;
    right: 22px;

    color: #b2d384;

    font-size: 25px;
}

.folder strong {
    font-family: "Instrument Serif", serif;

    font-size: 38px;
    font-weight: 400;
}

.folder small {
    margin-top: 5px;

    color: #aaa0aa;

    font-family: "Space Mono", monospace;
    font-size: 9px;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.empty-folder {
    border-style: dashed;
}


/* ================= CARDS ================= */

.memory-grid {
    display: grid;

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

    gap: 14px;
}

.memory-card {
    min-height: 188px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 22px;

    border: 1px solid #57445f;

    background: rgba(59, 40, 76, .68);

    transition: .3s ease;
}

.memory-card:hover {
    transform: translateY(-4px);

    border-color: #b2d384;

    background: rgba(74, 52, 91, .9);
}

.memory-card.wide {
    grid-column: span 2;
}

.card-index {
    color: #b2d384;

    font-family: "Space Mono", monospace;
    font-size: 10px;
}

.memory-card h3 {
    margin: 24px 0 8px;

    font-family: "Instrument Serif", serif;

    font-size: 31px;
    font-weight: 400;

    line-height: 1;
}

.memory-card p {
    margin: 0;

    color: #aaa0aa;

    font-size: 13px;
    line-height: 1.55;
}

.empty-card {
    border-style: dashed;
}

.empty-badge {
    align-self: flex-start;

    padding: 6px 9px;

    border: 1px solid rgba(178, 211, 132, .38);

    color: #b2d384;

    font-family: "Space Mono", monospace;
    font-size: 9px;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.song-top {
    display: flex;
    justify-content: space-between;
}

.record-mark {
    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: #4b3955;

    color: #d3b6df;

    font-size: 25px;
}


/* ================= QUOTES ================= */

.reserved-panel {
    min-height: 350px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: clamp(28px, 7vw, 74px);

    border: 1px dashed rgba(178, 211, 132, .38);

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(150, 100, 198, .22),
            transparent 17rem
        ),
        rgba(55, 37, 70, .48);
}

.reserved-mark {
    color: #d3b6df;

    font-family: "Instrument Serif", serif;
    font-size: 82px;

    line-height: .7;
}

.reserved-panel h3 {
    max-width: 600px;

    margin: 30px 0 12px;

    color: #d3b6df;

    font-family: "Instrument Serif", serif;
    font-size: clamp(35px, 5vw, 57px);

    font-weight: 400;
    line-height: .95;
}

.reserved-panel p {
    max-width: 490px;

    margin: 0;

    color: #aaa0aa;

    font-size: 14px;
    line-height: 1.65;
}


/* ================= NOTES ================= */

.note-list {
    display: grid;
    gap: 10px;
}

.note-item {
    border: 1px solid #57445f;

    background: rgba(54, 38, 70, .76);
}

.note-trigger {
    width: 100%;
    min-height: 67px;

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

    padding: 18px 20px;

    border: 0;

    background: transparent;

    color: white;

    text-align: left;

    cursor: pointer;
}

.note-trigger span {
    font-family: "Instrument Serif", serif;
    font-size: 25px;
}

.note-trigger small {
    color: #aaa0aa;

    font-family: "Space Mono", monospace;
    font-size: 9px;

    text-transform: uppercase;
}

.note-panel {
    display: none;

    padding: 0 20px 21px;
}

.note-item.open .note-panel {
    display: block;
}

.note-panel p {
    max-width: 660px;

    margin: 0;

    color: #aaa0aa;

    font-family: "Instrument Serif", serif;
    font-size: 21px;

    line-height: 1.45;
}


/* ================= FACTS ================= */

.facts {
    display: grid;

    grid-template-columns: 1.15fr .85fr;

    gap: 14px;
}

.fact-panel {
    min-height: 274px;

    padding: 26px;

    border: 1px solid rgba(189, 222, 140, .25);

    background:
        linear-gradient(
            145deg,
            #754e91,
            #4f315e
        );
}

.fact-panel h3 {
    margin: 45px 0 10px;

    font-family: "Instrument Serif", serif;
    font-size: 38px;

    font-weight: 400;
    line-height: .95;
}

.fact-panel p {
    margin: 0;

    color: rgba(247, 241, 247, .76);

    font-size: 13px;
    line-height: 1.6;
}

.fact-empty {
    background: rgba(54, 38, 70, .35);

    border-style: dashed;
}

.sparkle {
    color: #b2d384;

    font-size: 24px;
}


/* ================= CATS ================= */

.cat-grid {
    display: grid;

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

    gap: 14px;
}

.cat-card {
    min-height: 250px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 20px;

    border: 1px dashed #57445f;

    background: rgba(60, 42, 76, .5);

    text-align: center;
}

.cat-shape {
    margin-bottom: 22px;

    font-size: 70px;
}

.cat-card h3 {
    margin: 0 0 7px;

    font-family: "Instrument Serif", serif;
    font-size: 24px;

    font-weight: 400;
}

.cat-card p {
    margin: 0;

    color: #aaa0aa;

    font-size: 11px;
    line-height: 1.5;
}


/* ================= FOOTER ================= */

.stage-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    padding: 16px 0 0;

    color: #aaa0aa;

    font-family: "Space Mono", monospace;
    font-size: 9px;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.stage-footer span {
    width: 24px;
    height: 1px;

    background: #b2d384;

    opacity: .65;
}


/* ================= MODAL ================= */

.modal {
    display: none;

    position: fixed;

    z-index: 1000;

    inset: 0;

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

    padding: 20px;
}

.modal.show {
    display: flex;
}

.modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(13, 7, 17, .82);

    backdrop-filter: blur(8px);
}

.modal-content {
    position: relative;
    z-index: 2;

    width: min(800px, 100%);

    max-height: 90vh;

    overflow-y: auto;

    padding: clamp(30px, 6vw, 65px);

    border: 1px solid rgba(178, 211, 132, .4);

    background:
        linear-gradient(
            135deg,
            #f5ece0,
            #e4d8eb
        );

    color: #322139;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, .5);

    animation: modalIn .3s ease;
}

.close-button {
    position: absolute;

    top: 15px;
    right: 18px;

    width: 40px;
    height: 40px;

    border: 0;

    background: transparent;

    color: #4d3457;

    font-size: 30px;

    cursor: pointer;
}

.modal-content h2 {
    margin: 0 0 30px;

    font-family: "Instrument Serif", serif;

    font-size: clamp(40px, 7vw, 70px);

    font-weight: 400;

    line-height: .9;
}

.letter-date {
    margin-bottom: 30px;

    color: #705a76;

    font-family: "Space Mono", monospace;

    font-size: 10px;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.letter-body {
    display: grid;
    gap: 20px;

    font-family: "Instrument Serif", serif;

    font-size: clamp(19px, 2.1vw, 24px);

    line-height: 1.52;
}

.letter-body p {
    margin: 0;
}

.month-content {
    max-width: 850px;
}

.month-content h2 {
    margin-bottom: 20px;
}


/* ================= ANIMATIONS ================= */

@keyframes float-character {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes modalIn {

    from {
        opacity: 0;
        transform: translateY(20px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


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

@media (max-width: 760px) {

    .topbar,
    .garden-stage {
        width: calc(100% - 30px);
    }

    .topbar {
        grid-template-columns: 1fr auto;
        padding-top: 20px;
    }

    .topbar-center {
        display: none;
    }

    .garden-stage {
        padding-top: 20px;
    }

    .editorial-intro {
        padding: 16px 17px 0;
    }

    .tab-scroll {
        gap: 22px;
        padding: 21px 17px 0;
    }

    .tab-full-label {
        display: none;
    }

    .tab-short-label {
        display: inline;
    }

    .tab-panel {
        min-height: 650px;
        padding: 31px 18px;
    }

    .panel-heading {
        display: block;
        margin-bottom: 25px;
    }

    .panel-heading h2 {
        font-size: clamp(44px, 13vw, 70px);
    }

    .panel-detail {
        margin-top: 13px;
    }

    .intro-panel {
        min-height: 650px;
        align-items: flex-start;

        padding: 64px 23px;
    }

    .intro-panel h1 {
        max-width: 390px;

        font-size: clamp(59px, 16vw, 91px);
    }

    .intro-orbit {
        right: -13%;
        top: 32%;

        width: 270px;

        opacity: .62;
    }

    .lily-large {
        right: -7%;
        bottom: 7%;

        font-size: 110px;
    }

    .lily-small {
        left: 35%;
        bottom: 0;

        font-size: 75px;
    }

    .character-one {
        right: -5%;
        bottom: 2%;
    }

    .character-two {
        right: 29%;
        bottom: 1%;
    }

    .intro-caption {
        right: 20px;
        bottom: 18px;
    }

    .folder-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .memory-grid,
    .facts {
        grid-template-columns: 1fr;
    }

    .memory-card.wide {
        grid-column: auto;
    }

    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 420px) {

    .topbar,
    .garden-stage {
        width: calc(100% - 20px);
    }

    .topbar-note {
        font-size: 8px;
    }

    .tab-scroll {
        gap: 17px;
    }

    .intro-panel h1 {
        font-size: 61px;
    }

    .intro-actions {
        display: block;
    }

    .intro-note {
        display: block;
        margin-top: 14px;
    }

    .folder-grid {
        grid-template-columns: 1fr;
    }

    .cat-grid {
        grid-template-columns: 1fr;
    }

    .modal {
        padding: 10px;
    }

    .modal-content {
        max-height: 94vh;
        padding: 30px 22px;
    }

}