/* Palette: #B05E3A #FAF6F0 #3B2F2F #E8D5C0 #F5EDE3 #C47A3A #7A9E7E #1E1714 #D4C4B0 */

/* Deep shadow #1E1714, Patina Copper #7A9E7E used in SVG inline */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Libre Baskerville', Georgia, serif;
    color: #3B2F2F;
    background: #F5EDE3;
    overflow-x: hidden;
}

/* Typography */
.font-mono {
    font-family: 'DM Mono', monospace;
    font-weight: 400;
    letter-spacing: 0.08em;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
}

h1, h2, h3 {
    font-family: 'Poiret One', cursive;
    font-weight: 400;
}

.hero-title {
    font-size: clamp(3.5rem, 12vw, 9rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #3B2F2F;
    line-height: 1;
}

.section-heading {
    font-size: clamp(2rem, 5vw, 4.5rem);
    letter-spacing: 0.15em;
    color: #3B2F2F;
    margin-bottom: 1.5em;
}

.section-heading.centered {
    text-align: center;
}

.section-heading.light {
    color: #FAF6F0;
}

.body-text, .two-columns p, .panel-text, .closing-text {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.75;
    color: #3B2F2F;
}

/* Vignette base */
.vignette {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vignette-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 4rem;
}

/* Blur-focus effect */
.blur-target {
    filter: blur(12px);
    opacity: 0.3;
    transition: filter 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1s ease-out;
}

.blur-target.in-view {
    filter: blur(0);
    opacity: 1;
}

/* ===== Vignette I — The Workshop Door ===== */
.vignette-1 {
    background: #F5EDE3;
    flex-direction: column;
}

.vignette-1 .vignette-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
}

.vignette-1 .marble-surface {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at 25% 35%, rgba(232,213,192,0.8), transparent 70%),
        radial-gradient(ellipse at 70% 60%, rgba(180,160,140,0.4), transparent 50%),
        linear-gradient(135deg, #F5EDE3 0%, #E8D5C0 50%, #F5EDE3 100%);
    filter: url(#marble-noise);
}

.subtitle-band {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #B05E3A;
    padding: 1.2rem 2rem;
    text-align: center;
}

.subtitle-text {
    color: #FAF6F0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ===== Vignette II — The Blueprint Wall ===== */
.vignette-2 {
    background: #E8D5C0;
}

.vignette-2 .circuit-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cline x1='0' y1='15' x2='30' y2='15' stroke='%23C47A3A' stroke-width='1' stroke-opacity='0.18'/%3E%3Cline x1='30' y1='15' x2='30' y2='45' stroke='%23C47A3A' stroke-width='1' stroke-opacity='0.18'/%3E%3Cline x1='30' y1='45' x2='60' y2='45' stroke='%23C47A3A' stroke-width='1' stroke-opacity='0.18'/%3E%3Cline x1='15' y1='0' x2='15' y2='30' stroke='%23C47A3A' stroke-width='1' stroke-opacity='0.18'/%3E%3Cline x1='15' y1='30' x2='45' y2='30' stroke='%23C47A3A' stroke-width='1' stroke-opacity='0.18'/%3E%3Cline x1='45' y1='30' x2='45' y2='60' stroke='%23C47A3A' stroke-width='1' stroke-opacity='0.18'/%3E%3Ccircle cx='30' cy='15' r='2.5' fill='%23C47A3A' fill-opacity='0.18'/%3E%3Ccircle cx='30' cy='45' r='2.5' fill='%23C47A3A' fill-opacity='0.18'/%3E%3Ccircle cx='15' cy='30' r='2.5' fill='%23C47A3A' fill-opacity='0.18'/%3E%3Ccircle cx='45' cy='30' r='2.5' fill='%23C47A3A' fill-opacity='0.18'/%3E%3C/svg%3E");
}

.blueprint-layout {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.blueprint-text {
    flex: 0 0 55%;
}

.blueprint-text .body-text {
    margin-bottom: 1.5rem;
}

.blueprint-motif {
    flex: 1;
    display: flex;
    justify-content: center;
}

.circuit-illustration {
    width: 100%;
    max-width: 280px;
    height: auto;
}

/* ===== Vignette III — The Marble Workshop ===== */
.vignette-3 {
    background: #F5EDE3;
}

.vignette-3 .marble-surface {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at 30% 40%, #E8D5C0 0%, #F5EDE3 60%, #D4C4B0 100%);
    filter: url(#marble-noise);
}

.marble-layout {
    max-width: 900px;
    margin: 0 auto;
}

.two-columns {
    columns: 2;
    column-gap: 3rem;
}

.two-columns p {
    margin-bottom: 1.5rem;
    break-inside: avoid;
}

/* ===== Vignette IV — The Assembly Hall ===== */
.vignette-4 {
    background: #B05E3A;
}

.assembly-layout {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
}

.panel {
    flex: 1;
    aspect-ratio: 2 / 5;
    max-width: 320px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.panel-1 { background: #3B2F2F; }
.panel-2 { background: #C47A3A; }
.panel-3 { background: rgba(59,47,47,0.85); }

.panel-icon {
    margin-bottom: 2rem;
    flex-shrink: 0;
}

.panel-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: 0.12em;
    color: #FAF6F0;
    margin-bottom: 1.5rem;
}

.panel-text {
    color: #FAF6F0;
    font-size: clamp(0.875rem, 1.2vw, 1.05rem);
    line-height: 1.7;
}

/* ===== Vignette V — The Closing Toast ===== */
.vignette-5 {
    background: #3B2F2F;
    box-shadow: inset 0 0 120px rgba(30,23,20,0.5); /* #1E1714 vignette shadow */
}

.art-deco-divider line,
.art-deco-divider polyline,
.art-deco-divider polygon,
.art-deco-divider path,
.art-deco-divider circle {
    /* #7A9E7E Patina Copper - set via SVG inline */
}

.gear-container {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.gear-large {
    position: absolute;
    width: 300px;
    height: 300px;
    animation: rotate-cw 60s linear infinite;
}

.gear-small {
    position: absolute;
    width: 180px;
    height: 180px;
    top: 20%;
    right: 25%;
    animation: rotate-ccw 45s linear infinite;
}

@keyframes rotate-cw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotate-ccw {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

.closing-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    min-height: 100vh;
}

.closing-text {
    color: #FAF6F0;
    max-width: 600px;
    margin-bottom: 3rem;
}

.closing-label {
    color: #C47A3A;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* ===== Art Deco Dividers ===== */
.divider-wrap {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    background: transparent;
    position: relative;
    z-index: 5;
    margin-top: -1px;
    margin-bottom: -1px;
}

.vignette-1 + .divider-wrap { background: #F5EDE3; }
.vignette-2 + .divider-wrap { background: #E8D5C0; }
.vignette-3 + .divider-wrap { background: #F5EDE3; }

.art-deco-divider {
    display: block;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .vignette-content {
        padding: 2rem 1.5rem;
    }

    .blueprint-layout {
        flex-direction: column;
    }

    .blueprint-text {
        flex: none;
        width: 100%;
    }

    .blueprint-motif {
        display: none;
    }

    .two-columns {
        columns: 1;
    }

    .assembly-layout {
        flex-direction: column;
        align-items: center;
    }

    .panel {
        aspect-ratio: auto;
        width: 100%;
        max-width: 100%;
        padding: 2rem 1.5rem;
    }

    .gear-small {
        top: 15%;
        right: 10%;
    }
}