/* =========================================================
   ROOT VARIABLES
========================================================= */
:root {
    --site-bg: #f4f1e8;

    --header-bg: #6f8f72;
    --header-accent: #7ea6a1;

    --card-bg: #fffdf8;
    --card-border: #d8d2c3;
    --card-hover: #f4efe4;

    --site-text: #40382f;
    --heading-text: #ffffff;
    --muted-text: #6b6257;

    --accent-floral: #c8b6d8;
    --accent-gold: #d7b87d;

    --shadow: 0 5px 16px rgba(0, 0, 0, 0.08);

    --radius: 18px;
    --transition: 0.25s ease;
}

/* =========================================================
   BASE
========================================================= */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top left,
            rgba(255,255,255,0.7),
            transparent 30%),
        var(--site-bg);

    color: var(--site-text);

    font-family: Georgia, "Times New Roman", serif;
}

/* =========================================================
   NAV
========================================================= */

/* =========================================

   HEADER NAV

========================================= */

/* =========================================

   HEADER NAV

========================================= */

.header-nav {

    position: absolute;

    top: 18px;

    left: 20px;

}

.home-link {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    text-decoration: none;

    color: white;

    background-color: rgba(255, 255, 255, 0.15);

    padding: 8px 14px;

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,0.25);

    font-size: 0.92rem;

    backdrop-filter: blur(4px);

    transition:

        background-color var(--transition),

        transform var(--transition);

}

.home-link:hover {

    background-color: rgba(255,255,255,0.25);

    transform: translateY(-2px);

}
/* =========================================================
   HEADER
========================================================= */
.site-header {
    background:
        linear-gradient(
            135deg,
            rgba(111, 143, 114, 0.95),
            rgba(126, 166, 161, 0.95)
        );

    color: var(--heading-text);

    text-align: center;

    padding: 70px 20px;

    position: relative;

    overflow: hidden;
}

.site-header::before {
    content: "✿ ✦ ❀ ✦ ✿";

    position: absolute;

    top: 18px;
    left: 50%;

    transform: translateX(-50%);

    font-size: 1.2rem;

    opacity: 0.35;
}

.site-header h1 {
    margin: 0;

    font-size: 3.2rem;

    letter-spacing: 1px;
}

.site-header p {
    margin-top: 14px;

    font-size: 1.1rem;

    opacity: 0.95;
}

/* =========================================================
   INTRO SECTION
========================================================= */
.intro {
    max-width: 900px;

    margin: -35px auto 20px auto;

    padding: 0 20px;

    position: relative;

    z-index: 2;
}

.intro-card {
    background-color: var(--card-bg);

    border: 1px solid var(--card-border);

    border-radius: var(--radius);

    padding: 34px;

    box-shadow: var(--shadow);

    text-align: center;

    position: relative;
}

.intro-card::after {
    content: "❀";

    position: absolute;

    bottom: 14px;
    right: 18px;

    color: var(--accent-floral);

    font-size: 1.4rem;

    opacity: 0.5;
}

.intro-card h2 {
    margin-top: 0;

    margin-bottom: 14px;

    color: var(--header-bg);

    font-size: 2rem;
}

.intro-card p {
    margin-bottom: 0;

    line-height: 1.8;

    color: var(--muted-text);

    font-size: 1.03rem;
}

/* =========================================================
   STUDENT GRID
========================================================= */
.student-section {
    max-width: 1400px;

    margin: 50px auto;

    padding: 0 20px;
}

.student-grid {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 24px;
}


/* =========================================================
   STUDENT CARDS
========================================================= */
.student-card {
    background-color: var(--card-bg);

    border: 1px solid var(--card-border);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background-color var(--transition);

    position: relative;
    max-width:320px;
    overflow:hidden;
}

.student-card:hover {
    transform: translateY(-6px);

    background-color: var(--card-hover);

    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.student-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 6px;
    
    background:
        linear-gradient(
            90deg,
            var(--accent-gold),
            var(--accent-floral),
            var(--header-accent)
        );
}

.student-card a {
    display: block;

    text-decoration: none;

    color: inherit;

    height: 100%;
}

/* =========================================================
   OPTIONAL IMAGE AREA
========================================================= */
.student-image {

    width: 100%;

    height: 160px;

    object-fit: cover;

    display: block;

}

.student-image.placeholder {
    display: flex;

    align-items: center;

    justify-content: center;

    font-style: italic;

    color: #7c766c;

    letter-spacing: 1px;
}

/* =========================================================
   CARD CONTENT
========================================================= */
.student-content {
    padding: 18px;
}

.student-content h3 {
    margin-top: 0;

    margin-bottom: 10px;

    color: var(--header-bg);

    font-size: 1.2rem;
}

.student-content p {
    margin: 0;

    line-height: 1.6;

    color: var(--muted-text);

    font-size: 0.92rem;
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer {
    text-align: center;

    padding: 40px 20px 55px 20px;

    color: var(--muted-text);

    font-size: 0.95rem;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 700px) {

    .site-header {
        padding: 55px 20px;
    }

    .site-header h1 {
        font-size: 2.3rem;
    }

    .intro-card {
        padding: 24px;
    }

    .student-content {
        padding: 20px;
    }
}