html {
    /* deeper summer sky */
    background-color: #64c8ff;
}

body {
    /* friendly storybook ink */
    color: #2f5f9c;

  background-color: #64c8ff;
  background-image: none;
}



/* DO NOT TOUCH: golden .frame (as requested) */
.frame {
    border-color: #d7b35d;
    background: rgba(0,0,0,0.35);
    box-shadow: 0 0 0 3px rgba(255,214,102,0.12);
}

header {
    border-bottom-color: rgba(183,228,255,0.75);
}

header::before {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.82),
    rgba(183,228,255,0.30)
  );
}


#last-updated {
    color: rgba(47,95,156,0.62);
}

.logo {
    border-color: rgba(47,95,156,0.22);
    background: rgba(255,255,255,0.78);
}

.logo img {
    transition: opacity 1s ease;
}


h1 {
    color: rgba(47,143,234,0.82); /* softer, less neon */
    text-shadow:
        0 1px 0 rgba(255,255,255,0.92),
        0 0 8px rgba(255,255,255,0.28);
}

.tagline {
    color: rgba(47,95,156,0.76);
}

.marquee {
    border-color: rgba(183,228,255,0.78);
    background: rgba(255,255,255,0.78);
}

nav {
    border-top-color: rgba(255,255,255,0.85);
    border-bottom-color: rgba(183,228,255,0.70);
    background: rgba(183,228,255,0.38);
}

nav a {
    color: rgba(47,95,156,0.92);
    border-color: rgba(47,95,156,0.14);
    background: rgba(255,255,255,0.78);


}

nav a:hover {
    border-color: rgba(192,128,197,0.42);
    background: rgba(248,232,255,0.82);
    color: rgba(47,95,156,0.92); /* keep readable, overrides global a:hover */


}

footer {
    border-top-color: rgba(183,228,255,0.70);
    background: rgba(255,255,255,0.72);
}

a {
    /* friendly link blue */
    color: #2f8eea;
}

a:hover {
    color: #1f6fcb;
}

/* TEA TIME AREA — BACKGROUND REMOVED */
.tea-body {
    /* brighter + happier, still St. Laurel harmonic */
    color: rgba(58,36,78,0.90);

    /* single solid background */
    background-color: #f8f4ff; /* soft lilac-white */
}

.tea-title {
    /* brighter, airier lilac-rose */
    color: rgba(186, 118, 198, 0.98);

    text-shadow:
        0 1px 0 rgba(255,255,255,0.94),
        0 0 10px rgba(210,150,220,0.20),
        0 0 12px rgba(183,228,255,0.18);

    /* a touch more “sky” in the card so it bridges the header blue */
    background-color: rgba(248, 232, 255, 0.90); /* soft lilac cream */
    border-color: rgba(210,150,220,0.38);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.84),
        inset 0 -1px 1px rgba(47,95,156,0.05),
        0 6px 16px rgba(47,95,156,0.12);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* FEATURED / PREVIOUS / ARCHIVE CARDS WITH COHESIVE THEME (UNCHANGED) */
.featured {
    background: #f2ecf8;
    border: 1px solid rgba(176, 160, 196, 0.28);
    box-shadow:
        0 6px 14px rgba(47,95,156,0.12),
        inset 0 0 10px rgba(255,214,102,0.10);
}

.featured:hover {
    box-shadow:
        0 10px 22px rgba(47,95,156,0.16),
        inset 0 0 10px rgba(255,214,102,0.10);
}

.previous {
    background: #eef4f2;
    border: 1px solid rgba(170, 180, 188, 0.24);
    box-shadow:
        0 4px 12px rgba(47,95,156,0.12),
        inset 0 0 10px rgba(183,228,255,0.14);
}

.previous:hover {
    box-shadow:
        0 8px 18px rgba(47,95,156,0.16),
        inset 0 0 10px rgba(183,228,255,0.14);
}

.teatimearchive {
    background: rgba(255,254,246,0.92);
    border: 1px solid rgba(192,128,197,0.22);
    box-shadow:
        0 4px 12px rgba(47,95,156,0.12),
        inset 0 0 10px rgba(192,128,197,0.08);
}

.teatimearchive:hover {
    box-shadow:
        0 8px 18px rgba(47,95,156,0.16),
        inset 0 0 10px rgba(192,128,197,0.08);
}

.flower {
    filter:
        drop-shadow(0 0 6px rgba(255,214,102,0.22))
        drop-shadow(0 0 12px rgba(255,214,102,0.14))
        drop-shadow(0 0 6px rgba(160,176,112,0.18))
        drop-shadow(0 0 10px rgba(192,128,197,0.10));
}

.sign-off {
    color: #9fc3d9;
}

/* St. Laurel signature color (unchanged) */
.sign-off .profile-img {
    border-color: #bab0ce;
}

/* St. Laurel signature color (unchanged) */
.sign-off .name {
    color: #bab0ce;
}

.reaction-popup {
    border-color: rgba(192,128,197,0.42);
    background: rgba(255,255,255,0.86);
}

.reaction-popup .reaction-option {
    border-color: rgba(159,195,217,0.62);
}

.reaction-popup .reaction-option:hover {
    background: rgba(255,214,102,0.22);
}

.reaction-btn {
    border-color: rgba(159,195,217,0.62);
    background: rgba(255,255,255,0.78);
}

.reaction-btn span.count {
    color: rgba(215,179,93,0.95);
}

#image-overlay {
    background: rgba(47,95,156,0.36);
}

#inflated-image {
    box-shadow: 0 12px 28px rgba(47,95,156,0.26);
}

#close-hint {
    color: rgba(255,255,255,0.90);
    text-shadow: 0 0 3px rgba(47,95,156,0.20);
}

#close-hint:hover {
    text-shadow:
        0 0 6px rgba(255,255,255,0.94),
        0 0 12px rgba(192,128,197,0.24);
}

.image-wrap::before {
    background: rgba(47,95,156,0.05);
}

.presence-sigil {
    border-color: rgba(183,228,255,0.85);
    box-shadow:
        inset 0 0 6px rgba(255,255,255,0.68),
        0 0 10px rgba(183,228,255,0.36);
}

.presence-sigil::before {
    background: rgba(255,255,255,0.88);
    box-shadow:
        0 0 3px rgba(255,255,255,0.72),
        0 0 8px rgba(183,228,255,0.28);
}

.previous.recent .presence-sigil::after {
    border-color: rgba(183,228,255,0.45)
    background: rgba(255,255,255,0.26);
}

.previous.old .presence-sigil {
    border-color: rgba(159,195,217,0.74);
    box-shadow:
        inset 0 0 4px rgba(255,255,255,0.58),
        0 0 6px rgba(159,195,217,0.22);
}

.previous.middle .presence-sigil {
    border-color: rgba(183,228,255,0.85);
}

.previous .sign-off .profile-img {
    border-color: #bab0ce;
}

.previous .reaction-btn span.count {
    color: rgba(215,179,93,0.95);
}

.archive-glyph {
    color: rgba(192,128,197,0.72);
}