@import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&display=swap');


:root {
    --bg-color: #0d0d0d;
    --text-color: #ffffff;
    --link-color: #2990ff;
    --nav-color: #e0e0e0;
    --nav-active-color: #666666;
    /* CSS Variables updated */
    --nav-hover-color: #8AFF97;
    /* Updated Green */
    --font-heading: "Sorts Mill Goudy", serif;
    --font-nav: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: Verdana, Geneva, sans-serif;
    --font-accent: "proxima-nova", "Proxima Nova", Helvetica, Arial, sans-serif;
    --container-padding: 35px;
    --header-height: 48px;
    --mobile-breakpoint: 800px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.3;
    text-align: justify;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0px;
    -webkit-text-stroke: 0.1px;
}

h1 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.4px;
    margin: 0 0 1em 0;
    color: #ffffff;
    font-size: 24px;
    -webkit-text-stroke: 0.5px;
}

h2 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.4px;
    margin: 0 0 1em 0;
    color: #ffffff;
    font-size: 19px;
    -webkit-text-stroke: 0.5px;
}

h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.4px;
    margin: 0 0 1em 0;
    color: #ffffff;
    font-size: 14px;
    -webkit-text-stroke: 0.5px;
}

/* Specific Link Styles for Headings */
h1 a,
h2 a,
h3 a,
.intro-text h2 a,
.intro-text p a,
.contact-intro a {
    color: #fff;
    font-style: italic;
    text-decoration: none;
    border-bottom: none;
    transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
.intro-text h2 a:hover,
.intro-text p a:hover,
.contact-intro a:hover {
    color: #2990ff;
    /* Site Blue on Hover */
    opacity: 1;
}

h1 a:visited:hover,
h2 a:visited:hover,
h3 a:visited:hover,
.intro-text h2 a:visited:hover,
.intro-text p a:visited:hover,
.contact-intro a:visited:hover {
    color: #551A8B;
    /* Purple on Visited Hover */
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: opacity 0.15s ease-in-out;
}

a:hover {
    opacity: 0.8;
}

/* Layout */
.site-wrapper {
    padding: 22px 35px 0 35px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/* Header */
.header {
    padding-bottom: 10px;
}

.header-title-nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
}

.site-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-style: italic;
    line-height: 1em;
    letter-spacing: 1.25px;
    margin: 0;
    -webkit-text-stroke: 0.5px;
}

.site-title a {
    color: var(--text-color);
    text-decoration: none;
    pointer-events: auto;
}

.site-title a:hover,
.site-title a:visited,
.site-title a:active,
.site-title a:focus,
.site-title a:visited:hover {
    color: var(--text-color);
    opacity: 1;
}

.header-nav {
    display: flex;
    gap: 40px;
    margin-top: 19px;
}

.header-nav-item a {
    font-family: var(--font-nav);
    font-size: 15px;
    letter-spacing: 0px;
    color: var(--nav-color);
    transition: color 0.2s ease;
}

.header-nav-item a:hover {
    color: var(--nav-hover-color);
    opacity: 1;
}

.header-nav-item a.active {
    color: var(--nav-active-color);
}

.header-nav-item a.active:hover {
    color: var(--nav-hover-color);
    opacity: 1;
}

.header-nav-item {
    position: relative;
}

/* Dropdown */
.subnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-color);
    border: none;
    padding: 10px 0;
    min-width: 200px;
    z-index: 1000;
}

.header-nav-item:hover .subnav {
    display: block;
}

.subnav a {
    display: block;
    padding: 5px 15px;
    color: var(--text-color) !important;
    font-size: 15px !important;
    white-space: nowrap;
    outline: none;
    transition: color 0.2s ease;
}

.subnav a:hover {
    color: var(--nav-hover-color) !important;
    /* Green Hover */
    opacity: 1;
}

.header-burger {
    display: none;
}

.burger-btn {
    background: none;
    border: none;
    color: var(--link-color);
    font-family: var(--font-nav);
    font-size: 15px;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: color 0.15s ease-in-out;
}

.burger-btn:hover {
    color: var(--nav-hover-color);
    /* Green Hover */
}

/* Main Content & Masonry Grid */
.container {
    flex: 1;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding-top: 0;
}

/* About Page / Early Works specific layout classes */
.project-stack {
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px 0 0;
    /* Container padding handled by site-wrapper/media queries */
}

/* Headings / Intro Text (Standardized) */
.intro-text h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    /* Matches "Headings" style */
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.4px;
    color: #ffffff;
    margin: 0 0 19.2px 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: justify;
}

.intro-text p {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0px;
    color: #ffffff;
    margin: 0 0 19.2px 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: justify;
    -webkit-text-stroke: 0.5px;
}

.intro-text a {
    color: #fff;
    opacity: 0.8;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.intro-text a:hover {
    opacity: 0.7;
}

.intro-text {
    margin-bottom: 94px;
}

/* Body Text (Italic) / Arrow Links */
.body-italic,
.intro-text p.body-italic {
    font-family: 'Verdana', sans-serif;
    font-size: 14px;
    font-style: italic;
    text-align: right;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 19.2px;
    letter-spacing: 0px;
}

.body-italic a,
.intro-text .body-italic a {
    color: #2990ff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.body-italic a:hover,
.intro-text .body-italic a:hover {
    opacity: 0.8;
}

/* Masonry Layout */
.masonry-grid {
    position: relative;
    width: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.masonry-grid.loaded {
    opacity: 1;
}

.grid-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    /* Default, will be overridden by JS usually or matched to col count */
    transition: top 0.3s ease, left 0.3s ease;
}

/* Ensure images render correctly before JS positioning */
.grid-item img {
    width: 100%;
    display: block;
}

.grid-item {
    margin-bottom: 0;
    /* gap handles spacing */
    position: relative;
    /* ensure images don't overflow */
    min-width: 0;
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Grey hover overlay – matches original Squarespace behavior */
.grid-item::after,
.project-images .project-image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(128, 128, 128, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.grid-item:hover::after,
.project-images .project-image-wrap:hover::after {
    opacity: 1;
}

/* For project-image and gallery-strip images without a wrapper */
.project-image,
.gallery-strip img,
.header-image,
.full-width-image {
    transition: filter 0.25s ease;
}

.project-image:hover,
.gallery-strip img:hover,
.header-image:hover,
.full-width-image:hover {
    filter: brightness(0.7);
    cursor: pointer;
}

/* Footer */
.footer {
    padding-top: 50px;
    padding-bottom: 20px;
}

.footer p {
    margin: 0.5em 0;
    font-size: 14px;
    color: #999;
}

.footer a {
    color: var(--link-color);
}

.text-align-center {
    text-align: center;
}

/* Contact Page Styles */
.contact-wrapper {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding-top: 20px;
}

/* Header (Italic) Style */
.contact-intro h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-style: normal;
    color: #ffffff;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 1.3em;
    letter-spacing: 0.4px;
}

.contact-intro p {
    font-family: var(--font-heading);
    font-size: 24px;
    font-style: normal;
    color: #ffffff;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 1.3em;
    letter-spacing: 0px;
    -webkit-text-stroke: 0.5px;
}

.contact-intro a {
    font-family: var(--font-heading);
    font-size: 24px;
    font-style: italic;
    color: #fff;
    text-decoration: none;
    border-bottom: none;
    -webkit-text-stroke: 0.5px;
}

/* Override specific mailto link styling for header area */
/* Specific mailto link styling removed in favor of global heading rules */

/* Specific email link styling (fallback for non-intro) */
a[href^="mailto:"] {
    font-family: var(--font-body);
    font-size: 14px;
    color: #2990ff;
    /* Blue */
    text-decoration: none;
}

/* Heading for email address should not force font-family if we want the link to control it, 
   but h3 in styles.css sets Sorts Mill Goudy. We need to override for the mailto link inside h3 if desired,
   or if the design calls for Goudy email, then leave it. 
   Live site check: Email link is Verdana 14px. 
   So we must ensure the h3 parent doesn't override or we style the 'a' directly.
*/
.contact-wrapper h3 a[href^="mailto:"] {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    font-style: italic;
    color: #fff;
}

/* Newsletter section */
.newsletter-form {
    margin-top: 60px;
    text-align: center;
    /* No border, no background matching live site */
}

.newsletter-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-form p {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
}

.newsletter-input {
    width: 350px;
    padding: 14px;
    background-color: #fff;
    border: none;
    color: #000;
    font-family: var(--font-body);
    font-size: 14px;
}

.newsletter-button {
    padding: 14px 24px;
    background-color: transparent;
    color: var(--nav-hover-color) !important;
    /* Green text */
    border: 1px solid var(--nav-hover-color) !important;
    /* Green border */
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 1px;
    /* Remove default button styles */
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.newsletter-button:hover {
    background-color: var(--nav-hover-color) !important;
    color: #000 !important;
}



/* Mobile Menu Overlay - Hidden by default on Desktop */
.mobile-menu-overlay {
    display: none;
}

/* Responsive Breakpoints */
@media (max-width: 800px) {
    .header-nav {
        display: none;
    }

    .header-burger {
        display: block;
        z-index: 2001;
        /* Above overlay */
        position: relative;
    }

    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--bg-color);
        z-index: 2000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-menu-overlay a {
        font-family: var(--font-heading);
        font-size: 32px;
        margin: 15px 0;
        color: var(--text-color);
        text-decoration: none;
        -webkit-text-stroke: 0.5px;
    }

    .mobile-menu-overlay a:hover {
        color: var(--link-color);
    }

    /* Ensure images render correctly on mobile */
    .grid-item img {
        width: 100%;
        display: block;
    }

    .grid-item {
        margin-bottom: 0;
        position: relative;
        min-width: 0;
    }

    /* Footer adjustments */
    .footer {
        padding-top: 50px;
        padding-bottom: 20px;
    }

    .text-align-center {
        text-align: center;
    }
}