/* --------------------------------------------------------------
   Dark‑Fantasy / Wild‑Magic Theme
   Author: Bri (with a little Lumo pixie dust)
   -------------------------------------------------------------- */

/* ==== Base Reset ================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ==== Root Variables – tweak to change the whole mood =========== */
:root {
    --bg-color: #0c0a0e;               /* Midnight stone */
    --bg-gradient: linear-gradient(135deg, #0c0a0e, #1a0d19);
    --text-primary: #eae0d6;           /* Pale parchment */
    --accent: #c49b63;                 /* Runic copper */
    --link-hover: #ffcc66;             /* Glowing ember */
    --font-body: 'Merriweather', serif;
    --font-heading: 'Cinzel Decorative', serif;
}

/* ==== Global Styles ============================================= */
html {
    font-size: 100%;          /* 16px base */
    scroll-behavior: smooth;
}

body {
    background: var(--bg-gradient);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    min-height: 100vh;
}

/* ==== Typography ================================================= */
h1, h2, h3 {
    font-family: var(--font-heading);
    text-shadow: 0 0 6px rgba(255,200,120,.6);
    color: var(--accent);
}

h1 {
    font-size: 2.8rem;
    letter-spacing: .08em;
}

h2 {
    font-size: 2rem;
    margin-top: 2rem;
}

/* ==== Hero Banner =============================================== */
.hero {
    text-align: center;
    padding: 4rem 1rem;
    background: url('images/hero-bg.jpg') center/cover no-repeat;
    background-blend-mode: overlay;
    background-color: rgba(0,0,0,.6);
    border-bottom: 2px solid var(--accent);
}

.hero p {
    margin-top: .5rem;
    font-style: italic;
    opacity: .85;
}

/* ==== Navigation ================================================= */
.main-nav {
    background: rgba(12,10,14,.85);
    border-top: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
}
.main-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
}
.main-nav a {
    display: block;
    padding: .8rem 1.5rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: color .3s;
}
.main-nav a:hover {
    color: var(--link-hover);
}

/* ==== Sections ================================================== */
.section {
    max-width: 960px;
    margin: 3rem auto;
    padding: 0 1rem;
}

/* ==== Project Grid ============================================== */
.grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 1.5rem;
}
.project img {
    width: 100%;
    height: auto;
    border: 2px solid var(--accent);
    filter: drop-shadow(0 0 8px rgba(255,200,120,.4));
    transition: transform .3s, filter .3s;
}
.project img:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 0 12px rgba(255,200,120,.8));
}
.project figcaption {
    margin-top: .4rem;
    text-align: center;
    font-size: .9rem;
    color: var(--accent);
}

/* ==== Links ===================================================== */
a {
    color: var(--accent);
    text-decoration: underline dotted;
}
a:hover {
    color: var(--link-hover);
}

/* ==== Footer ==================================================== */
.footer {
    text-align: center;
    padding: 2rem 1rem;
    background: rgba(12,10,14,.9);
    border-top: 2px solid var(--accent);
    font-size: .85rem;
}

/* ==== Responsive Tweaks ========================================= */
@media (max-width: 600px) {
    .hero { padding: 2.5rem 0.5rem; }
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.6rem; }
}