/* =====================================================
   GLOBAL RESET + ZOOM SAFETY
   ===================================================== */

body {
    margin: 0;
    overflow-x: hidden;
}


/* =====================================================
   HEADER STACKING CONTEXT
   ===================================================== */

.site-header {
    position: relative;
    z-index: 10;
}


/* =====================================================
   HEADER HERO
   ===================================================== */

.header-hero {
    background: url("/assets/images/bg-forest.webp") center/cover no-repeat;
    padding: 5px 0 0px 8px;

    width: 100vw;
    margin-left: calc(50% - 50vw);

    box-shadow: inset 0 0 120px rgba(0,0,0,0.35);
}


/* =====================================================
   HERO INNER
   ===================================================== */

.hero-inner {
    width: 100%;
    margin: 0;
}


/* =====================================================
   BRAND BLOCK
   ===================================================== */

.brand-block {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin-left: -30px;
}


/* =====================================================
   LOGO — TOP VISUAL LAYER
   ===================================================== */

.site-logo {
    width: 320px;
    height: auto;
    display: block;

    /* 🔧 reduced vertical drop (~5% upward shift) */
    transform: translateY(12px);

    position: relative;
    z-index: 20;
}


/* =====================================================
   TITLE STACK
   ===================================================== */

.title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    line-height: 1.0;

    transform: translateY(-20px);
    margin-left: -25px;
}

.title-main {
    font-size: 42px;
    color: #d2b48c;
    text-shadow:
        0 2px 0 #000,
        0 4px 6px rgba(0,0,0,0.9);
    white-space: nowrap;
    margin: 0;
}

.title-sub {
    font-size: 23px;
    color: #b08d57;
    text-shadow:
        0 2px 0 #000,
        0 4px 6px rgba(0,0,0,0.9);
    white-space: nowrap;
    margin: 2px 0;
}

.title-year {
    font-size: 15px;
    color: #e8e4d8;
    text-shadow:
        0 1px 0 #000,
        0 3px 5px rgba(0,0,0,0.95);
    white-space: nowrap;
    margin-top: 8px;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 768px) {

    .site-logo {
        width: 210px;

        /* proportional upward correction */
        transform: translateY(9px);

        position: relative;
        z-index: 20;
    }

    .title-main { font-size: 24px; }
    .title-sub  { font-size: 15px; }
    .title-year { font-size: 12px; }
}