/* ---- 404 CONSTRUCTION VERSION ---- */
body {
    background-color: #000000;
    color: #ffffff;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden; /* Locks viewport smoothly with no scrollbars */
}

/* Landscape Placement (Top 65-70%) */
.error-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 68vh;
    z-index: 1;
}

.error-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* The Bottom Blend Fade */
.error-bg-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25vh; /* Smooth graduation down into the black baseline canvas */
    background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0) 100%);
}

/* Portrait Positioning (Locked precisely 33% from the left screen boundary) */
.error-character-wrap {
    position: absolute;
    /* Anchor to the literal bottom of the viewport so your legs crop out */
    bottom: -500px; 
    left: 33%;
    transform: translateX(-50%);
    
    /* Blows up your asset size to create that massive 3D foreground look */
    height: 135vh; 
    
    /* Ensures you sit completely in front of the landscape background and text */
    z-index: 15; 
}
.error-character-img {
    height: 100%;
    width: auto;
    display: block;
}

/* Stylized Typography Grid */
.error-text-overlay {
    position: absolute;
    bottom: 8vh;
    left: 45%; /* Pushed right so it sits alongside your portrait cleanly */
    width: 45%;
    z-index: 20;
}

.error-headline {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(48px, 6vw, 76px);
    font-weight: 800;
    letter-spacing: -1px;
    color: #ff9e7d; /* Uses your signature coral accent color */
    margin: 0 0 10px 0;
    line-height: 0.9;
}

.error-subheading {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    color: #e2dfd9; /* Ivory tone */
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.error-body {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 300;
    line-height: 1.6;
    color: #b0afaa; /* Soft gray for readability metrics */
    margin: 0 0 30px 0;
    max-width: 500px;
}

.error-cta {
    display: inline-block;
}