/* Doc Says — shared accent styling.
   Palette, type and icon treatment lifted from lords-prayer-aramaic.html: warm gold on
   deep violet, Cormorant Garamond for display type. Replaces the green-to-blue gradients
   and the emoji-in-a-blob icons that were on index.html and the blog. */

:root {
    --aether: #b8a16b;          /* muted gold — labels, secondary type */
    --aether-bright: #f3d77f;   /* bright gold — icons, display type, accents */
    --violet: #6b4ea8;
    --indigo: #2b2056;
    --parchment: #e9e4d6;       /* warm off-white body copy */
}

/* ===== Display type ===== */
.display-serif {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    letter-spacing: 0.005em;
}

/* The old .gradient-text was #33FF57 -> #3357FF. Same mechanism, gold. */
.gradient-text,
.text-gold-gradient {
    background: linear-gradient(135deg, var(--aether-bright), var(--aether));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* The "contemplative neuroscience" treatment: italic serif in muted gold. */
.eyebrow {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--aether);
}

/* ===== Icon medallions ===== */
.medallion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    color: var(--aether-bright);
    background:
        radial-gradient(circle at 32% 28%, rgba(107, 78, 168, 0.55), transparent 62%),
        linear-gradient(145deg, #241c47, #141028);
    border: 1px solid rgba(243, 215, 127, 0.38);
    box-shadow:
        0 0 0 1px rgba(11, 10, 26, 0.6),
        0 6px 18px rgba(11, 10, 26, 0.55),
        inset 0 1px 0 rgba(243, 215, 127, 0.14);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.medallion svg,
.medallion .icon {
    width: 55%;
    height: 55%;
}

.medallion-lg { width: 3rem; height: 3rem; }

a:hover > .medallion,
.group:hover .medallion,
.medallion:hover {
    color: #fff3cf;
    border-color: rgba(243, 215, 127, 0.75);
    box-shadow:
        0 0 0 1px rgba(11, 10, 26, 0.6),
        0 8px 26px rgba(107, 78, 168, 0.45),
        inset 0 1px 0 rgba(243, 215, 127, 0.22);
}

@media (min-width: 768px) {
    .medallion-lg { width: 6.5rem; height: 6.5rem; }
}

/* ===== Buttons ===== */
/* Solid gold reads as the one thing to press on a near-black page; the old green-to-blue
   gradient competed with every other accent. */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--aether-bright), var(--aether));
    color: #140f28;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid rgba(243, 215, 127, 0.6);
    border-radius: 9999px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 8px 24px rgba(184, 161, 107, 0.26);
}

.btn-gold:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 12px 30px rgba(184, 161, 107, 0.36);
}

.btn-ghost-gold {
    color: var(--aether-bright);
    border-bottom: 1px solid rgba(243, 215, 127, 0.4);
    text-decoration: none;
    padding-bottom: 2px;
    font-weight: 500;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.btn-ghost-gold:hover {
    color: #fff3cf;
    border-color: var(--aether-bright);
}