/* ── Warm colour palette ──────────────────────────────── */

:root {
    --surface-1-light: #faf8f4;
    --surface-2-light: #f0ece4;
    --text-1-light: #1a1614;
    --text-2-light: #6b6258;
    --border-light: #ccc4b8;

    --surface-1-dark: #0d0b09;
    --surface-2-dark: #3d3631;
    --text-1-dark: #f7f3ee;
    --text-2-dark: #9e948a;
    --border-dark: #5c5249;
}

/* ── Hero ─────────────────────────────────────────────── */

section.hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0 0 5rem;
}

.hero-bg {
    position: absolute;
    top: -30%;
    left: 0;
    width: 100%;
    height: 160%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    will-change: transform;
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 40%);
}

.hero-fg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    will-change: transform;
}

/* ── Hero content ─────────────────────────────────────── */

.hero-content {
    width: 100%;
    padding: 2.5rem 3rem;
    text-align: center;
    background: rgba(10, 8, 6, 0.38);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SVG vase title in the hero glass panel */
.hero-vase-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.25rem;
    animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (orientation: portrait) {
    .hero-vase-title {
        flex-direction: column;
        gap: 0.5rem;
    }
}

.hero-vase-title img {
    filter: brightness(0) invert(1);
    display: block;
    width: auto;
}

.hero-vase-title .vase-name {
    height: clamp(3rem, 7.5vw, 5.5rem);
}

.hero-vase-title .vase-rings {
    height: clamp(3rem, 7.5vw, 5.5rem);
}

.hero-content p {
    color: rgba(250, 248, 244, 0.8);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-wrap: balance;
    animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* ── Scroll arrow ─────────────────────────────────────── */

.hero-scroll {
    display: flex;
    justify-content: center;
    padding-top: 0.5rem;
    color: rgba(250, 250, 250, 0.6);
    animation: hero-fade-in 0.6s ease 0.6s both;
}

.hero-scroll-icon {
    display: block;
    animation: hero-bounce 2s ease-in-out 1.2s infinite;
}

.hero-scroll svg {
    width: 1.75rem;
    height: 1.75rem;
    display: block;
}

/* ── Intro text section ───────────────────────────────── */

.home-intro {
    max-width: 560px;
    margin: 4rem auto 5rem;
    padding: 0 1.5rem;
    text-align: center;
}

.home-intro .prose p {
    color: var(--text-2);
    font-size: 1rem;
    line-height: 1.9;
    margin-top: 0.9em;
    margin-bottom: 0.9em;
}

.home-intro .prose p:first-child {
    margin-top: 0;
    color: var(--text-1);
    font-size: 1.1875rem;
    line-height: 1.75;
}

/* ── Vase ornament ────────────────────────────────────── */

.home-ornament {
    display: flex;
    justify-content: center;
    margin: 0 auto 3rem;
}

.home-ornament img {
    height: 240px;
    width: auto;
    opacity: 0.38;
    filter: sepia(1);
}

[data-theme="dark"] .home-ornament img {
    filter: invert(1) sepia(0.4) brightness(0.85);
    opacity: 0.45;
}

/* ── Gallery page header title ────────────────────────── */

body > header {
    justify-content: space-between;
    margin-bottom: 0;
}

.header-title {
    flex: 1;
    text-align: center;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-1);
    margin: 0;
}

.header-right {
    width: 3rem;
    display: flex;
    justify-content: flex-end;
}

/* ── Album card hover ─────────────────────────────────── */

section.galleries .card figure {
    overflow: hidden;
}

section.galleries .card img {
    transition: transform 0.6s ease-in-out;
}

section.galleries .card img:hover {
    transform: scale(1.06);
}

/* ── Album card text ──────────────────────────────────── */

.card > div > h2 {
    font-weight: 400;
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
}

.card > div > p {
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ── Albums divider ───────────────────────────────────── */

.home-divider {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 1280px;
    margin: 0 auto 2.5rem;
    padding: 0 1.5rem;
}

.home-divider::before,
.home-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.home-divider span {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-2);
    white-space: nowrap;
}

/* ── Closing line ─────────────────────────────────────── */

.home-closing {
    display: flex;
    justify-content: center;
    margin: 4rem auto 2rem;
    padding: 2.5rem 1.5rem 0;
    border-top: 1px solid var(--border);
    max-width: 1280px;
}

.home-closing .vase-date {
    height: 1.75rem;
    width: auto;
    opacity: 0.75;
    filter: sepia(1);
}

[data-theme="dark"] .home-closing .vase-date {
    filter: invert(1) sepia(0.3) brightness(0.9);
    opacity: 0.75;
}

/* ── Gallery back link ────────────────────────────────── */

.gallery-back {
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem 2rem;
    border-top: 1px solid var(--border);
    margin-top: 3rem;
}

.gallery-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-2);
    text-decoration: none;
    transition: color 0.2s;
}

.gallery-back-link:hover {
    color: var(--text-1);
}

/* ── Keyframes ────────────────────────────────────────── */

@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes hero-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(7px);
    }
}