@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

@font-face {
    font-family: "GentiumAlt";
    src: url("Fonts/genar102.ttf");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "GentiumAlt";
    src: url("Fonts/genai102.ttf");
    font-style: italic;
    font-weight: normal;
}

:root {
    --bg: #f0eeeb;
    --card-bg: #faf9f7;
    --border: #d0c8bc;
    --ink: #1e1a14;
    --dim: #6b6055;
    --gold: #8b6914;
    --gold-light: #c9a84c;
    --shadow: rgba(0,0,0,0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bg);
    min-height: 100vh;
    font-family: 'GentiumAlt', 'Gentium Plus', 'Gentium', 'Cardo', 'Noto Serif', 'Crimson Text', serif;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 24px 80px;
    font-size: 18px;
}

.back { position: fixed; top: 20px; left: 20px; }
.back a { color: var(--dim); text-decoration: none; font-size: 1rem; font-family: 'Cinzel', serif; }
.back a:hover { color: var(--gold); }

.ref { font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.35em; color: var(--gold); text-transform: uppercase; margin-bottom: 20px; }

.verse {
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    font-style: italic;
    line-height: 2;
    max-width: 780px;
    text-align: center;
    border-top: 2px solid var(--gold-light);
    border-bottom: 2px solid var(--gold-light);
    padding: 24px 30px;
    margin-bottom: 14px;
    background: var(--card-bg);
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--shadow);
}

.translation {
    font-size: 1rem;
    color: var(--dim);
    max-width: 680px;
    text-align: center;
    margin-bottom: 50px;
    font-style: italic;
    line-height: 1.6;
}

h1 { font-family: 'Cinzel', serif; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--ink); letter-spacing: 0.05em; margin-bottom: 8px; }
.subtitle { color: var(--dim); font-size: 1rem; margin-bottom: 40px; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    max-width: 900px;
    width: 100%;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 28px 24px;
    text-decoration: none;
    color: var(--ink);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 6px var(--shadow);
}
.card:hover { border-color: var(--gold); box-shadow: 0 4px 14px rgba(0,0,0,0.12); transform: translateY(-2px); }

.card-icon { font-size: 2rem; line-height: 1; }
.card-title { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--ink); font-weight: 700; }
.card-desc { font-size: 0.95rem; color: var(--dim); line-height: 1.5; }
.card-tag { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-top: auto; font-family: 'Cinzel', serif; }

footer { margin-top: 70px; color: var(--dim); font-size: 0.88rem; text-align: center; font-style: italic; }