/* =========================
   Index LAYOUT
   ========================= */
   /* Center all story content on parchment pages */
.page-content {
    text-align: center;
}

/* Make paragraphs readable and centered */
.page-content p {
    max-width: 680px;
    margin: 0.7rem auto;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Center the logo image */
.page-content .logo {
    display: block;
    margin: 0 auto 1.2rem;
}

/* Center glyph row */
.page-content .glyph-row {
    justify-content: center;
}

/* Center moon block */
.page-content .moon-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.7rem 1.8rem;
    border-radius: 999px;
    border: 1px solid rgba(233,195,120,0.95);
    background: linear-gradient(to bottom, #fbe4b3, #d8b36b);
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #3c2210;
    text-decoration: none;
    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(0,0,0,0.9),
        0 0 12px rgba(224,188,115,0.9);

    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background 140ms ease,
        opacity 140ms ease;
}

.portal-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 24px rgba(0,0,0,1),
        0 0 18px rgba(255,228,145,1);
    background: linear-gradient(to bottom, #ffeaba, #deb873);
}

.portal-button:active {
    transform: translateY(1px);
    box-shadow:
        0 4px 14px rgba(0,0,0,0.95),
        0 0 10px rgba(255,228,145,0.75);
}

.moon-block {
    display: flex;
    flex-direction: column;
    align-items: center;          /* center horizontally */
    justify-content: flex-start;
    margin-top: 2.6em;            /* ≈ two text lines */
    width: 100%;
}

#moon {
    font-size: 3.5rem;            /* adjust if you want it bigger or smaller */
    line-height: 1;               /* keeps spacing tight around the moon */
    margin-bottom: 0.5rem;        /* space between moon + text */
}

#phaseMessage {
    font-size: 1.1rem;
    text-align: center;
    max-width: 80%;               /* keeps it from stretching too wide */
    line-height: 1.4;
}

/* Feather quill cursor for interactive elements */
a, button, .portal-button, .nav-button, .product button {
    cursor: url('images/quill-cursor.png') 4 2, pointer;
}