/* --- Global Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: #1a0f00 url('/assets/background.png') repeat;
    font-family: 'Crimson Text', serif;
    color: #1a0f00; 
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* --- UNIVERSAL LINK LOGIC (FOR ALL PAGES) --- */
/* Base & Visited: Forces Brown, No Underline, No Purple */
a, 
a:link, 
a:visited {
    color: #5c2e0c !important; 
    text-decoration: none !important;
    transition: all 0.3s ease;
    font-weight: 700;
}

/* Hover: Light Blue Glow Effect for ALL links */
a:hover {
    color: #4da6ff !important;
    text-shadow: 0 0 10px rgba(77, 166, 255, 0.8), 
                 0 0 20px rgba(77, 166, 255, 0.6) !important;
    text-decoration: none !important;
}

/* Active: Stays Brown when clicked */
a:active {
    color: #5c2e0c !important;
}

/* --- THE THREE-PIECE SCROLL STRUCTURE --- */
.scroll-wrapper {
    width: 1234px;
    margin-top: -10px;
    position: relative;
    z-index: 2;
}

.scroll-top {
    width: 1234px;
    height: 150px; 
    background: url('/assets/scroll-top.png') no-repeat bottom center;
    background-size: 100% 100%;
}

.scroll-mid {
    width: 1234px;
    background: url('/assets/scroll-mid.png') repeat-y center;
    background-size: 100% auto;
    padding: 20px 180px; 
}

.scroll-bottom {
    width: 1234px;
    height: 150px; 
    background: url('/assets/scroll-bottom.png') no-repeat top center;
    background-size: 100% 100%;
}

/* --- THE 1234px BANNER --- */
.banner { width: 1234px; height: auto; display: block; margin: 0 auto; }

/* --- THE 931px FOOTER --- */
.footer-container { width: 931px; margin: -60px auto 0 auto; position: relative; z-index: 10; }
.footer-img { width: 100%; height: auto; display: block; }

/* --- TYPOGRAPHY --- */
h1 { font-family: 'Almendra', serif; font-size: 3.5rem; color: #3d1f08; text-align: center; margin-bottom: 40px; font-weight: 900; }
h2 { font-family: 'Almendra', serif; font-size: 2.2rem; color: #3d1f08; margin-bottom: 15px; font-weight: 900; }
h3 { font-family: 'Almendra', serif; font-size: 1.6rem; color: #5c2e0c; margin-bottom: 10px; font-weight: 700; }
p { margin-bottom: 30px; font-size: 1.4rem; font-weight: 700; line-height: 1.6; text-align: justify; }

/* --- NAVIGATION & LINK SPECIFICS --- */
.site-nav { text-align: center; margin-bottom: 50px; width: 100%; }
.site-nav a {
    font-family: 'Almendra', serif;
    margin: 0 25px;
    font-size: 1.4rem; 
}

.read-more {
    display: inline-block;
    margin-top: 10px;
    font-family: 'Almendra', serif;
    font-size: 1.1rem;
}

/* --- LINEAGE / SAGA LAYOUT --- */
.saga-container {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
}

.saga-container.reverse {
    flex-direction: row-reverse;
}

.portrait-frame {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 2px solid #5c2e0c;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); /* Gold Glow */
    overflow: hidden;
}

.portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Forces PNGs to fill the circle without stretching */
    display: block;
}

.portrait-fallen {
    filter: sepia(1) grayscale(0.5);
}

.valhalla-banner {
    width: 100%;
    height: auto;
    margin-bottom: 40px;
}

/* --- RUNE LIST (Expectations) --- */
.rune-list { list-style: none; margin-top: 30px; }
.rune-list li { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 25px; font-size: 1.4rem; font-weight: 700; }
.rune-symbol { font-size: 2rem; color: #8b4513; line-height: 1; padding-top: 5px; }

/* --- FORM STYLING (Join Us) --- */
.application-form { display: flex; flex-direction: column; gap: 25px; width: 100%; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-family: 'Almendra', serif; font-size: 1.4rem; font-weight: 900; color: #3d1f08; }
.form-group input, .form-group select, .form-group textarea {
    background: rgba(44, 30, 20, 0.05);
    border: 1px solid #8b4513;
    padding: 12px;
    font-family: 'Crimson Text', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a0f00;
}
.submit-btn {
    background: #5c2e0c;
    color: #f4e4bc;
    font-family: 'Almendra', serif;
    font-size: 1.5rem;
    font-weight: 900;
    padding: 15px;
    border: none;
    cursor: pointer;
    margin-top: 20px;
}