/* ===== CSS VARIABLES ===== */
:root {
    --grid-gap: 25px;
    --header-height: 30vh;
    --grid-scale: 0.55;
    --bg-color: #EBE6D9;
    --text-color: #1A1815;            /* unified warm "eggshell-black" */
    --modal-backdrop: rgba(0, 0, 0, 0.75);
    --grid-offset: 400px; /* Header legacy anchor (not used for grid) */

    /* ----- Scaled base sizes (for centering math) ----- */
    --w1:  calc(1015px * var(--grid-scale));  --h1:  calc(543px  * var(--grid-scale));  /* Living Room */
    --w2:  calc(873px  * var(--grid-scale));  --h2:  calc(405px  * var(--grid-scale));  /* Athletic (top) */
    --w3:  calc(501px  * var(--grid-scale));  --h3:  calc(874px  * var(--grid-scale));  /* Lantern */
    --w4:  calc(537px  * var(--grid-scale));  --h4:  calc(658px  * var(--grid-scale));  /* Deck */
    --w5:  calc(1081px * var(--grid-scale));  --h5:  calc(501px  * var(--grid-scale));  /* Back house */
    --w6:  calc(849px  * var(--grid-scale));  --h6:  calc(449px  * var(--grid-scale));  /* Kitchen */
    /* #7 computed below to clear #9 by 1 gap */
    --w7:  calc(638px  * var(--grid-scale));  --h7:  calc(716px  * var(--grid-scale));  /* placeholder */
    --w8:  calc(1045px * var(--grid-scale));  --h8:  calc(476px  * var(--grid-scale));  /* Facade */
    --w9:  calc(1494px * var(--grid-scale));  --h9:  calc(456px  * var(--grid-scale));  /* Long house */
    --w10: calc(520px  * var(--grid-scale));  --h10: calc(827px  * var(--grid-scale));  /* Fence */
    --w11: calc(1091px * var(--grid-scale));  --h11: calc(424px  * var(--grid-scale));  /* Aerial */
    --w12: calc(772px  * var(--grid-scale));  --h12: calc(435px  * var(--grid-scale));  /* Office (lower) */
    --w13: calc(957px  * var(--grid-scale));  --h13: calc(538px  * var(--grid-scale));  /* Sauna */
    --w14: calc(939px  * var(--grid-scale));  --h14: calc(453px  * var(--grid-scale));  /* Wig & Pen 2 */

    /* ----- Cluster widths (for centering) ----- */
    --cluster-top-w:  calc(var(--w1)  + var(--grid-gap) + var(--w3));   /* 1 + gap + 3 */
    --cluster-midA-w: calc(var(--w4)  + var(--grid-gap) + var(--w5));   /* 4 + gap + 5 */
    --cluster-midB-w: calc(var(--w10) + var(--grid-gap) + var(--w11));  /* 10 + gap + 11 */

    /* ----- Horizontal origins (centered on viewport) ----- */
    --origin-top:   calc(50vw - (var(--cluster-top-w)  / 2));
    --origin-midA:  calc(50vw - (var(--cluster-midA-w) / 2));
    --origin-midB:  calc(50vw - (var(--cluster-midB-w) / 2));

    /* ----- Vertical anchors (faithful to original stacking) ----- */
    --t1:  var(--grid-gap);
    --t2:  calc(var(--h1) + (var(--grid-gap) * 2));
    --t3:  calc(var(--grid-gap) + ((543px + 405px) * var(--grid-scale)) + var(--grid-gap) - var(--h3));
    --t4:  calc(var(--h1) + (var(--grid-gap) * 2) + var(--h2) + var(--grid-gap));
    --t5:  var(--t4);
    --t6:  calc(var(--t5) + var(--h5) + var(--grid-gap));
    --t7:  calc(var(--t4) + var(--h4) + var(--grid-gap));

    /* Facade below Kitchen */
    --t8:  calc(var(--t6) + var(--h6) + var(--grid-gap));

    --t8_5: calc(var(--t8) + var(--h8) + var(--grid-gap)); /* helper */
    --t9:   var(--t8_5);                                   /* top of Long House */
    --t10:  calc(var(--t9) + var(--h9) + var(--grid-gap));
    --t11:  var(--t10);
    --t12:  calc(var(--t11) + var(--h11) + var(--grid-gap));
    --t13:  calc(var(--t10) + var(--h10) + var(--grid-gap));
    --t14:  calc(var(--t11) + var(--h11) + var(--grid-gap) + var(--h12) + var(--grid-gap));

    /* Sauna scale */
    --scale-13: 0.7;

    /* ----- Auto-size Dining/Table (#7) to sit 1 gap above Long House (#9) ----- */
    --ar7: 0.891; /* 638 / 716 */
    --h7:  calc(var(--t9) - var(--t7) - var(--grid-gap));
    --w7:  calc(var(--h7) * var(--ar7));
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    :root { --grid-scale: 0.45; }
}

@media (max-width: 1024px) {
    :root {
        --grid-gap: 20px;
        --grid-scale: 0.35;
    }
}

@media (max-width: 768px) {
    :root {
        --grid-gap: 15px;
        --grid-scale: 0.9;
    }
}


/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
}


/* ===== HEADER ===== */
.site-header {
    height: var(--header-height);
    min-height: 200px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding-bottom: var(--grid-gap);
    background-color: var(--bg-color);
    position: relative;
    z-index: 10;
}

.header-content {
    text-align: left;

    /* Left-align header with Living Room (#1) */
    position: absolute;
    left: var(--origin-top);
    bottom: var(--grid-gap);
}

.designer-name {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 40px;          /* ~10% larger */
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0px;
    margin-bottom: 18px;
    color: var(--text-color);
}

.tagline {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--text-color);
}

@media (max-width: 768px) {
    .header-content {
        position: relative;
        left: auto;
        bottom: auto;
        padding-left: 30px;
        margin-bottom: 0;
        padding-right: 30px;
    }

    .designer-name {
        font-size: 32px;
        margin-bottom: 14px;
    }

    .tagline {
        font-size: 14px;
        position: relative;
        z-index: 1;
    }
}


/* ===== PORTFOLIO GRID ===== */
.portfolio-grid {
    position: relative;
    padding-top: var(--grid-gap);

    /* Full viewport width so 50vw centering is correct */
    width: 100vw;

    /* Shorter but safe bottom space */
    padding-bottom: 300px;  /* was 600px */
    min-height: calc(var(--t14) + var(--h14) + 150px); /* was +300px */

    margin: 0 auto;
}

@media (max-width: 768px) {
    .portfolio-grid {
        padding: var(--grid-gap) 30px 120px;  /* was 200px */
        display: flex;
        flex-direction: column;
        gap: var(--grid-gap);
        width: 100%;
        min-height: auto;
    }
}

.grid-item {
    position: absolute;
    cursor: pointer;

    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        z-index 0s 0s,
        box-shadow 0.3s ease;

    will-change: transform;
    overflow: hidden;
}

.grid-item:hover {
    transform: scale(1.08);
    z-index: 100;

    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        z-index 0s 0s;
}

.grid-item:hover img {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

@media (max-width: 768px) {
    .grid-item {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
    }

    .grid-item img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
}


/* ===== EXACT GRID POSITIONS ===== */
/* 1: Living Room */
.grid-item[data-position="1"] {
    top: var(--t1);
    left: var(--origin-top);
    width: var(--w1);
    height: var(--h1);
}

/* 2: Athletic Outdoor (below #1, right-aligned with #1) */
.grid-item[data-position="2"] {
    top: var(--t2);
    left: calc(var(--origin-top) + var(--w1) - var(--w2));
    width: var(--w2);
    height: var(--h2);
}

/* 3: Lantern (right of #1) */
.grid-item[data-position="3"] {
    top: var(--t3);
    left: calc(var(--origin-top) + var(--w1) + var(--grid-gap));
    width: var(--w3);
    height: var(--h3);
}

/* 4: Deck (centered row with #5) */
.grid-item[data-position="4"] {
    top: var(--t4);
    left: var(--origin-midA);
    width: var(--w4);
    height: var(--h4);
}

/* 5: Back white house (right of #4) */
.grid-item[data-position="5"] {
    top: var(--t5);
    left: calc(var(--origin-midA) + var(--w4) + var(--grid-gap));
    width: var(--w5);
    height: var(--h5);
}

/* 6: Kitchen (below #5, left-aligned with #5) */
.grid-item[data-position="6"] {
    top: var(--t6);
    left: calc(var(--origin-midA) + var(--w4) + var(--grid-gap));
    width: var(--w6);
    height: var(--h6);
}

/* 7: Dining/Table (auto-sized; below #4; right-aligned with #4) */
.grid-item[data-position="7"] {
    top: var(--t7);
    left: calc(var(--origin-midA) + var(--w4) - var(--w7));
    width: var(--w7);
    height: var(--h7);
}

/* 8: Facade (below #6) */
.grid-item[data-position="8"] {
    top: var(--t8);
    left: calc(var(--origin-midA) + var(--w4) + var(--grid-gap));
    width: var(--w8);
    height: var(--h8);
}

/* 9: Long House (centered) */
.grid-item[data-position="9"] {
    top: var(--t9);
    left: calc(50vw - (var(--w9) / 2));
    width: var(--w9);
    height: var(--h9);
}

/* 10: Fence (centered row with #11) */
.grid-item[data-position="10"] {
    top: var(--t10);
    left: var(--origin-midB);
    width: var(--w10);
    height: var(--h10);
}

/* 11: Aerial (right of #10) */
.grid-item[data-position="11"] {
    top: var(--t11);
    left: calc(var(--origin-midB) + var(--w10) + var(--grid-gap));
    width: var(--w11);
    height: var(--h11);
}

/* 12: Office (lower) — shift 3 buffers right */
.grid-item[data-position="12"] {
    top: var(--t12);
    left: calc(var(--origin-midB) + var(--w10) + var(--grid-gap) + (3 * var(--grid-gap)));
    width: var(--w12);
    height: var(--h12);
}

/* 13: Sauna — 30% smaller; shift 3 buffers right */
.grid-item[data-position="13"] {
    top: var(--t13);
    left: calc(var(--origin-midB) + var(--w10) - (var(--w13) * var(--scale-13)) + (3 * var(--grid-gap)));
    width: calc(var(--w13) * var(--scale-13));
    height: calc(var(--h13) * var(--scale-13));
}

/* 14: Wig & Pen 2 — shift 3 buffers right */
.grid-item[data-position="14"] {
    top: var(--t14);
    left: calc(var(--origin-midB) + var(--w10) + var(--grid-gap) + (3 * var(--grid-gap)));
    width: var(--w14);
    height: var(--h14);
}


/* ===== PLACEHOLDER BLOCKS (framing edges only) ===== */
.grid-item.placeholder {
    background: #D2CBB7;         /* ~20% darker eggshell */
    border: 3px solid #D2CBB7;   /* thicker to blend with palette */
    pointer-events: none;
    box-shadow: none;
    transition: none;
}
.grid-item.placeholder:hover { transform: none; }

/* P1: Left of Lantern (#3), upper-mid area */
.grid-item[data-position="P1"] {
    top: calc(var(--t3) + (var(--h3) * 0.25));
    left: calc(var(--origin-top) - (var(--grid-gap) * 2) - (var(--w3) * 0.45));
    width: calc(var(--w3) * 0.45);
    height: calc(var(--h1) * 0.50);
}

/* P2: Right of Lantern cluster top edge */
.grid-item[data-position="P2"] {
    top: var(--t1);
    left: calc(var(--origin-top) + var(--cluster-top-w) + (var(--grid-gap) * 2));
    width: calc(var(--w3) * 0.55);
    height: calc(var(--h3) * 0.40);
}

/* P3: Right of Long House (#9), mid-vertical section */
.grid-item[data-position="P3"] {
    top: calc(var(--t9) + (var(--h9) * 0.15));
    left: calc((50vw + (var(--w9) / 2)) + (var(--grid-gap) * 2));
    width: calc(var(--w10) * 0.85);
    height: calc(var(--h11) * 0.70);
}

/* P4: Right of Sauna/Fence zone */
.grid-item[data-position="P4"] {
    top: calc(var(--t13) + (var(--h10) * 0.30));
    left: calc((50vw + (var(--w9) / 2)) + (var(--grid-gap) * 2));
    width: calc(var(--w11) * 0.50);
    height: calc(var(--h12) * 0.65);
}

/* Mobile / touch: placeholders are decoration, so hide */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .grid-item.placeholder { display: none !important; }
}


/* ===== MODAL/GALLERY ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal.active {
    opacity: 1;
    pointer-events: all;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: var(--modal-backdrop); /* single unified dim/blur layer behind modal */
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.modal-content {
    position: relative;

    width: 90vw;
    max-width: 1600px;
    height: 70vh;

    background: transparent;  /* keep content area clear; backdrop handles dim/blur */
    border-radius: 0;
    box-shadow: none;

    z-index: 1001;

    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal.active .modal-content { transform: scale(1); }

.modal-close {
    position: absolute;
    top: 40px;
    right: 40px;

    width: auto;
    height: auto;
    border: none;
    background: transparent;

    color: #C5BFAF;
    font-size: 32px;
    cursor: pointer;

    z-index: 1002;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: color 0.2s ease;
    line-height: 1;
    padding: 0;
}

.modal-close:hover { color: #B5AFA0; }

.modal-layout {
    display: flex;
    width: 100%;
    height: 100%;
    gap: var(--grid-gap);
    overflow: hidden;
}

/* Carousel Section */
.carousel-section {
    flex: 1;
    position: relative;

    background: transparent;
    backdrop-filter: none; /* remove extra blur to avoid the vertical seam */

    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-container {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 60px;
    overflow: hidden;
    position: relative;
}

#carousel-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;

    animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide animations */
@keyframes slideIn {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
#carousel-image.slide-left  { animation: slideInLeft  0.4s cubic-bezier(0.4, 0, 0.2, 1); }
#carousel-image.slide-right { animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes slideInLeft  { from { opacity: 0; transform: translateX(-30px);} to { opacity: 1; transform: translateX(0);} }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px);}  to { opacity: 1; transform: translateX(0);} }

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 56px;
    height: 56px;

    border: none;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);

    color: white;
    border-radius: 50%;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.2s ease;
    z-index: 10;
}
.carousel-nav:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-50%) scale(1.1); }
.carousel-nav.prev { left: 20px; }
.carousel-nav.next { right: 20px; }
.carousel-nav:disabled { opacity: 0.3; cursor: not-allowed; }

.carousel-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    background: rgba(0, 0, 0, 0.7);
    color: white;

    padding: 8px 16px;
    border-radius: 20px;

    font-size: 14px;
    font-weight: 500;
}

/* Info Panel */
.info-panel {
    width: 380px;
    flex-shrink: 0;
    background: var(--bg-color);
    padding: 40px;
    overflow-y: auto;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18); /* subtle separation without seams */
}

#project-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
    color: var(--text-color);
}

#project-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
}
#project-description p { margin-bottom: 16px; }


/* ===== MOBILE LAYOUT (stacked grid) ===== */
@media (max-width: 768px) {
    .site-header {
        height: auto;
        padding: 30px;
    }

    .header-content {
        position: static;
        left: auto;
        bottom: auto;
        padding-left: 0;
        margin-bottom: 20px;
    }

    .portfolio-grid {
        width: 100%;
        padding: 0 30px 120px;     /* was 200px */
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: var(--grid-gap);
        position: relative;
        top: auto;
        left: auto;
    }

    .grid-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
    }

    .grid-item img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
}

/* ===== TOUCH DEVICES (force stacked even in "desktop site") ===== */
@media (hover: none) and (pointer: coarse) {
    .site-header {
        height: auto;
        padding: 30px;
    }

    .header-content {
        position: static;
        left: auto;
        bottom: auto;
        padding-left: 0;
        margin-bottom: 20px;
    }

    .portfolio-grid {
        width: 100%;
        padding: 0 30px 120px;     /* was 200px */
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: var(--grid-gap);
        position: relative;
        top: auto;
        left: auto;
    }

    .grid-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
    }

    .grid-item img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }
}


/* ===== MOBILE MODAL LAYOUT (70/30 split: image/info) ===== */
@media (max-width: 768px) {
    .modal-content {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        border-radius: 0;
    }

    .modal-layout {
        flex-direction: column;
        gap: 0;
        width: 100%;
        height: 100%;
    }

    /* Top 70%: image area */
    .carousel-section {
        flex: none;
        width: 100%;
        height: 70dvh;
        background: transparent;
        display: block;
        position: relative;
        backdrop-filter: none;
    }

    .carousel-container {
        width: 100%;
        height: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    #carousel-image {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    /* Overlay nav buttons inside image edges */
    .carousel-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(6px);
        border-radius: 999px;
        border: none;
        color: #fff;
        z-index: 5;
    }
    .carousel-nav.prev { left: 8px; }
    .carousel-nav.next { right: 8px; }
    .carousel-nav:hover { transform: translateY(-50%) scale(1.05); }

    /* Counter over the image, bottom-center */
    .carousel-counter {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 12px;
        border-radius: 14px;
        font-size: 12px;
        background: rgba(0,0,0,0.6);
    }

    /* Bottom 30%: info panel */
    .info-panel {
        width: 100%;
        height: 30dvh;
        max-height: none;
        padding: 30px 20px calc(20px + env(safe-area-inset-bottom));
        background: var(--bg-color);
        overflow-y: auto;
        box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
    }

    #project-title { font-size: 24px; margin-bottom: 12px; }
    #project-description { font-size: 15px; line-height: 1.6; }

    .modal-close {
        top: 16px;
        right: 16px;
        font-size: 28px;
        color: #ddd;
    }
}

/* ===== TOUCH DEVICES: same modal layout in "desktop site" ===== */
@media (hover: none) and (pointer: coarse) {
    .modal-content {
        width: 100vw;
        height: 100dvh;
        max-width: none;
        border-radius: 0;
    }

    .modal-layout {
        flex-direction: column;
        gap: 0;
        width: 100%;
        height: 100%;
    }

    .carousel-section {
        flex: none;
        width: 100%;
        height: 70dvh;
        position: relative;
        backdrop-filter: none;
    }

    .carousel-container {
        width: 100%;
        height: 100%;
        padding: 0;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #carousel-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .carousel-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        background: rgba(0,0,0,0.35);
        backdrop-filter: blur(6px);
        border-radius: 999px;
        color: #fff;
        border: none;
        z-index: 5;
    }
    .carousel-nav.prev { left: 8px; }
    .carousel-nav.next { right: 8px; }

    .carousel-counter {
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 12px;
        font-size: 12px;
        background: rgba(0,0,0,0.6);
    }

    .info-panel {
        width: 100%;
        height: 30dvh;
        padding: 30px 20px calc(20px + env(safe-area-inset-bottom));
        overflow-y: auto;
        background: var(--bg-color);
    }
}


/* ----------------------------------
   INFO PAGE + HEADER ACTION LINKS
---------------------------------- */

/* Header text links (INFO / GALLERY) — align to lantern edge */
.header-action {
    position: absolute;

    /* Anchor at the RIGHT edge of image #3 */
    left: calc(var(--origin-top) + var(--cluster-top-w));
    bottom: var(--grid-gap);

    /* Pull the link left so its RIGHT edge sits on the anchor */
    transform: translateX(-100%);

    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--text-color);
    cursor: pointer;
    line-height: 1;
    padding: 0;

    /* Real underline for consistent baseline */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;

    transition: opacity 0.2s ease;
}
.header-action:hover { opacity: 0.9; }
.header-action:visited { color: var(--text-color); }

/* Info Page Layout */
.info-wrap {
    width: 100%;
    padding: calc(var(--grid-gap) * 4) 0 200px;
    display: flex;
}

.info-card {
    width: 380px;
    margin-left: calc(50% - var(--grid-offset) - (var(--grid-gap) * 1.5));
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.info-card h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--text-color);
}

/* Contact block: normalized icons + ALL CAPS text */
.contact-list {
    list-style: none;
    display: grid;
    gap: 24px;
}
.contact-list li {
    display: flex;
    align-items: center;
    gap: 14px;
}
.icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.contact-list a {
    font-size: 16px;
    text-transform: uppercase;            /* ALL CAPS */
    font-family: Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.contact-list a:hover { border-color: rgba(26,24,21,0.35); }

/* ===== Mobile header row: tagline (left) + INFO (right) on same baseline, left aligned to grid ===== */
@media (max-width: 768px) {
    /* Match grid’s 30px side padding so text aligns with images */
    .site-header { height: auto; padding: 30px 0; }

    /* Two-row flex:
       Row 1: designer-name (full width)
       Row 2: tagline (left) + header-action (right), baseline-aligned */
    .header-content {
        position: static;
        left: auto;
        bottom: auto;
        margin: 0;
        padding: 0 30px;

        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0;
    }

    .designer-name {
        font-size: 32px;
        margin-bottom: 14px;
        flex: 0 0 100%;
    }

    .tagline {
        font-size: 14px;
        line-height: 1;
        position: static;
        z-index: 1;
        order: 1;                 /* left item on row 2 */
        display: inline-block;
    }

    .header-action {
        position: static;         /* no absolute math */
        transform: none;          /* reset desktop shift */
        font-size: 14px;
        line-height: 1;           /* baseline with tagline */
        margin-left: auto;        /* push to right edge */
        order: 2;

        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 2px;
    }

    .info-wrap {
        justify-content: center;
        padding: 60px 20px 120px;
    }

    .info-card {
        margin-left: 0;
        width: 100%;
        max-width: 480px;
    }
}