:root {
    --xxs: 2px;
    --xs: 4px;
    --s: 8px;
    --m: 12px;
    --ml: 16px;
    --lrg: 24px;
    --lrgr: 36px;
    --xl: 48px;
    --xml: 64px;
    --xxl: 80px;
    --xxxl: 128px;
    --bg-black: #212121;
    --bg-half-black: rgba(33, 33, 33, 0.7);
    --fg-white: #FFFFFF;
    --fg-half-white: rgba(255, 255, 255, 0.7);
    --accent-tan: #F5F4E6;
    --font-sans: 'IBM Plex Sans', sans-serif;
    --font-serif: 'IBM Plex Serif', serif;
    --content-width: 800px;
    --quote-width: 600px;
    --top-blur-height: 180px;
  /* Consistent reveal gap above the footer regardless of scroll position */
  --hv-footer-gap: var(--xxl);
}

/* Reserve space for the header before the custom element upgrades to avoid CLS */
site-header[fixed]:not(:defined) {
    display: block;
    min-height: 136px; /* desktop fallback height (40px logo + 48px*2 padding) */
}
@media (max-width: 1100px) {
    site-header[fixed]:not(:defined) { min-height: 120px; }
}

/* Provide an initial spacer height for the component's internal fallback spacer */
site-header[fixed] { --header-height: 136px; }
@media (max-width: 1100px) {
    site-header[fixed] { --header-height: 120px; }
}
/* Slightly taller when using the Lottie logo on desktop */
site-header[fixed][logo="lottie"] { --header-height: 146px; }

 /* Reserve a gutter only when the document actually scrolls.
   The header component will toggle the html.hv-scrollbar-stable class
   at runtime based on page type (homepage vs inner pages) and overflow. */
html { scrollbar-gutter: auto; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 24px;
    font-style: normal;
    /* font-weight: 400; */
    font-weight: 300;
    color: var(--fg-white);
    font-family: var(--font-serif);
    font-variant-ligatures: common-ligatures discretionary-ligatures;
    font-feature-settings: "liga" 1, "dlig" 1, "kern" 1;
    /* line-height: normal; */
    line-height: 1.4;
    letter-spacing: -0.48px;
    overflow-x: hidden;
    /* Leave space only for the fixed footer height. The visual gap above the
       footer is created by the occluder extending below the content. */
    padding-bottom: var(--hv-footer-height, 0px);
}

/* Root background for top overscroll - work samples pages only */
html.work-samples-root { 
    background-color: var(--bg-black); 
}

/* Work samples page-specific overscroll background styling */
body.work-samples-page {
    background-color: var(--accent-tan);
    position: relative; /* anchor top viewport backdrop pseudo-element */
}

/* Top viewport backdrop: a black layer that sits between the tan body background
   and the scrolling content for exactly one viewport height. This keeps the
   area behind the fixed header and top overscroll dark, while bottom overscroll
   still reveals the tan body background. Work samples pages only. */
body.work-samples-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-black);
  pointer-events: none;
  z-index: 0; /* above body paint, below .main-content (z:2) and header */
}

body.lightbox-active {
    overflow: hidden;
}

hr {
    border: 1px solid var(--fg-half-white);
    /* width: calc(var(--quote-width) - var(--xxl) - var(--xxl)); */
    max-width: var(--quote-width);
    margin-left: auto;
    margin-right: auto;
}

a, a:visited {
    color: var(--fg-white);
    /* text-decoration: none; */
}

/* Header Component Styles */
/* legacy header styles kept for non-component pages; avoid overriding component */
header.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 48px 80px;
    position: relative;
    z-index: 102;
    background-color: var(--bg-black);
}

.logo {
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 500;
    color: var(--fg-white);
    text-decoration: none;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
}

.logo img {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
}

.nav-desktop {
    display: flex;
    gap: var(--lrgr, 36px);
    align-items: center;
}

.nav-item {
    display: flex;
    /* align-items: stretch; */
    align-items: start;
    gap: var(--xs, 4px);
    text-decoration: none;
    color: var(--accent-tan);
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    /* transition: opacity 0.3s ease; */
    line-height: 1;
    font-size: 22px;
}

.nav-arrow, .mobile-nav-arrow, .nav-arrow-next {
    width: 22px;
    height: 22px;
    color: var(--accent-tan);
}

.nav-item:hover {
    opacity: 0.7;
}

.back-arrow {
    color: var(--accent-tan);
}

/* 
.project-header .back-arrow {
  margin-left: -8px;
}
*/

.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 103;
    position: relative;
    padding: 4px;
    width: 32px;
    height: 32px;
}

.hamburger-icon {
    width: 24px;
    height: 24px;
    color: var(--accent-tan);
    position: absolute;
    top: 4px;
    left: 4px;
}

.hamburger .menu-icon {
    display: block;
}

.hamburger .close-icon {
    display: none;
}

.hamburger.active .menu-icon {
    display: none;
}

.hamburger.active .close-icon {
    display: block;
}

/* Mobile Menu Overlay */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(33, 33, 33, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 101;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu.active {
    display: flex;
    opacity: 1;
}

.mobile-nav {
    margin-left: auto;
    margin-top: 120px;
    margin-right: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-end;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--accent-tan);
    font-family: var(--font-sans);
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: opacity 0.3s ease;
    text-align: right;
    line-height: 1;
}

.mobile-nav-item:hover {
    opacity: 0.7;
}

/* Main Content */
/* Main Content */
.main-content {
    max-width: 1400px;
    margin-top: var(--xxl);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--xxl);
    /* Provide a consistent visible gap above the footer as part of the
       scrolling content itself so it cannot overlap the footer. */
    padding-bottom: var(--hv-footer-gap, 80px);
    position: relative; /* create stacking context over fixed footer */
    z-index: 2; /* above footer (which is z-index:0) */
}


/* Full-width occluder that spans the entire width of the viewport for the
   full height of the content, so the fixed footer is only revealed when the
   document is scrolled to the end. */
/* Occluder layer: sits above the fixed footer (z-index:1) and below content
   (content uses z-index:2). It ensures the footer is hidden underneath the
   scrolling area until the very bottom. The bottom equals the end of the
   content box including padding, so the visible gap above the footer equals
   --hv-footer-gap. */
.main-content::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0; /* includes main's padding-bottom (the gap) */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; /* cover gutters beyond centered content */
  background-color: var(--bg-black);
  z-index: -1;
  pointer-events: none;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-tan);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: opacity 0.3s ease;
}

.back-link:hover {
    opacity: 0.7;
}

.project-header {
    max-width: var(--content-width);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: var(--xl, 48px); */
    margin-left: auto;
    margin-right: auto;
}

.project-title {
    font-family: var(--font-serif);
    color: var(--fg-white);
    font-size: 59px;
    font-style: normal;
    /* font-weight: 300; */
    font-weight: 400;
    line-height: 135%; /* 79.65px */
    margin-top: var(--xml);
    margin-bottom: var(--xl);
    margin-left: -4px;
}

.project-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--lrg);
    width: 100%;
}

.meta-item h4 {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 400;
    color: var(--accent-tan);
    text-transform: uppercase;
    letter-spacing: 0em;
    margin-bottom: 8px;
}

.meta-item p {
    font-family: var(--font-sans);
    font-size: 22px;
    color: var(--fg-white);
}

/* Content Sections */
.content-section {
    display: flex;
    flex-direction: column;
    gap: var(--lrgr, 36px);
    margin-bottom: var(--xxxl);
}

.content-section > figure:has(figcaption) {
    padding-top: var(--xl);
    padding-bottom: var(--xl);
}

.content-section .content-text:first-of-type::first-letter {
    initial-letter: 2;
    -webkit-initial-letter: 2;
    margin-right: 0.1em;
    letter-spacing: 0.1em;
    font-weight: 400;
}

.hero-image {
    width: 100%;
    margin-top: var(--xxl);
    margin-bottom: var(--xxl);
    transition: opacity 0.3s ease;
}



.hero-image.has-video {
    cursor: default;
}

.hero-image.has-video:hover {
    opacity: 1.0;
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.content-text {
    /* font-size: 18px;
    line-height: 1.7; */
    /* margin-bottom: 32px; */
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

.content-text:last-child {
    margin-bottom: 0;
}

/* Quotes */
.quote {
    text-align: center;
    margin-top: var(--xxl, 80px);
    margin-bottom: var(--xxl, 80px);
}

.quote-text {
    /* font-size: 24px; */
    /* line-height: 1.5; */
    color: var(--fg-white);
    margin-bottom: 16px;
    max-width: var(--quote-width);
    margin-left: auto;
    margin-right: auto;
}

.quote-text:before {
    content: "“";
}

.quote-text:after {
    content: "”";
}
.quote-attribution {
    /* font-family: var(--font-sans); */
    /* font-size: 14px; */
    color: var(--accent-tan);
    font-style: italic;
}

.quote-attribution:before {
    content: "—";
}

/* Navigation */
.project-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    margin: 80px 0;
    padding: 48px 0;
}

.nav-link,
.work-section-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-tan);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.0em;
    line-height: 1;
    /* transition: opacity 0.3s ease; */
}

.nav-link strong {
    font-weight: 500;
}

.chevron-container {
    /* width: 14px; */
    width: 6px;
    margin-top: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-link:hover,
.work-section-link:hover {
    opacity: 0.7;
}

.image-set + figcaption {
    font-family: var(--font-sans);
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: var(--accent-tan);
    margin-top: var(--lrg);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: var(--quote-width);
}

.image-set img {
    width: 100%;
    height: auto;
    display: block;
}

/* Footer */
.footer {
    /* border-top: 1px solid rgba(245, 244, 230, 0.2); */
    background-color: var(--accent-tan);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--bg-black);
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.footer-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    border-bottom: 3px solid var(--bg-black);
    margin: var(--xxl);
    padding: var(--xl) 0px;
    justify-content: space-between;
}

#full-name {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 36px;
    letter-spacing: -0.03em;
    font-feature-settings: 'salt' on;
}

#copyright {
    font-family: var(--font-sans);
    font-size: 22px;
}





/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    /* Ensure the lightbox sits above the fixed header/menu */
    z-index: 6000;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    /* Ensure the lightbox sits above the fixed header/menu */
    z-index: 6000;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* The overlay itself gets programmatically focused for dialog semantics.
   Remove the default outline on the non-interactive container while
   keeping focus indicators on actual controls (prev/next/close). */
.lightbox-overlay:focus,
.lightbox-overlay:focus-visible {
    outline: none;
}

/* Class to show the lightbox */
.lightbox-overlay.active {
    display: flex;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3); /* Minimal background */
    color: white;
    border: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--xs);
    z-index: 1;
}

.lightbox-prev {
    left: 10px;
}

.lightbox-next {
    right: 10px;
}

.lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent; /* Minimal background */
    color: white;
    border: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Image-set Grid Layout */
.image-set {
    padding: .5vw 0;
    font-size: 0; /* harmless; kept from previous implementation */
    display: grid; /* Use grid for robust cross-browser layout */
    grid-template-columns: repeat(3, 1fr);
    gap: .5vw; /* Consistent gap between images */
}

.image-set > div {
    overflow: hidden;
    aspect-ratio: 1; /* Make containers square */
}

.image-set > div img {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    border-radius: 4px; /* match image style */
    object-fit: cover; /* Crop images to fill the square container */
}

/* Mobile Styles */
/* @media (max-width: 768px) { */
@media (max-width: 1100px) {
    .header {
        padding:  var(--lrg)  var(--lrg);
    }

    .nav-desktop {
        display: none;
    }

    .logo img {
        height: var(--lrg);
    }

    .hamburger {
        display: flex;
    }

}

@media screen and (max-width: 768px) {

    .main-content {
        padding: var(--lrg);
        margin: 0;
    }

    /* Ensure the back link sits below any header blur on mobile */
    .project-header {
        padding-top: var(--m);
    }

    /* Shorten the top blur height from the fixed header on mobile */
    site-header {
        --top-blur-height: 140px;
    }

    .project-title {
        font-size:  var(--xl);
    }

    .project-meta {
        grid-template-columns: 1fr;
        gap:  var(--lrg);
    }


    .meta-item h4, .meta-item p {
        font-size: 20px;
    }

    .content-section {
        gap: var(--lrg);
        margin-bottom: var(--xl);
    }

    .content-text {
        font-size: 16px;
    }
    .image-set + figcaption {
        font-size: 14px;
    }

    .content-section .content-text:first-of-type::first-letter {
        margin-right: 0.1em;
        letter-spacing: 0.1em;
    }

    .quote {
        margin-top: var(--xl);
        margin-bottom: var(--xl);
    }
    .quote-text {
        margin-bottom: var(--s);
    }

    .quote-text, .quote-attribution {
        font-size: 16px;
    }

    .footer {
        padding: var(--lrg);
        flex-direction: column;
        gap: var(--ml);
        text-align: center;
    }

    .project-nav {
        flex-direction: column;
        /* gap:  var(--lrg); */
    }

    .nav-link {
        /* font-size: 20px; */
        font-size: 16px;
    }

    .footer-content {
        margin: 0px;
        padding: var(--lrg) 0  var(--ml) 0;
    }

    #full-name {
        font-size: 26px;
    }

    #copyright {
        /* font-size: 20px; */
        font-size: 14px;
    }
    /* On tablets, default to two columns for denser layout */
    .image-set { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 480px) {
    .image-set {
        padding: 0;
        gap: var(--xs);
        grid-template-columns: 1fr; /* Single column on small phones */
    }
}

.image-set.single {
    display: block; /* Override the flex layout used for multi-image sets */
    padding: 0;
}

.image-set.single > div {
    flex: none; /* Cancel flex sizing */
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto; /* Let the image define its own ratio */
}

.image-set.single > div img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Do not crop the single image */
    border-radius: 0; /* Match hero-image style */
    cursor: pointer;
}

.image-set.two { grid-template-columns: repeat(2, 1fr); }

.image-set.four { grid-template-columns: repeat(2, 1fr); }

/* Explicit control for three-image sets to avoid 2+1 wrapping on narrow widths */
.image-set.three { grid-template-columns: repeat(3, 1fr); }

/* Work Sections Styles */
.work-section {
    margin-top: var(--xl);
    margin-bottom: var(--xxl);
    padding-bottom: var(--xxl);
}

.work-section:last-of-type {
    border-bottom: none;
}

.work-section-header {
    display: flex;
    align-items: baseline;
    gap: var(--lrg);
    margin-bottom: var(--lrg);
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

.work-section-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 36px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
}

.work-section-link.inactive {
    color: var(--fg-half-white);
}

.work-section-link.inactive:hover {
    opacity: 1;
    cursor: default;
}

/* Project Thumbnails Grid */
.project-thumbnails {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: var(--xl);
}

.thumbnail-link {
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.thumbnail {
    position: relative;
    overflow: hidden;
    border-radius: var(--m, 12px);
    aspect-ratio: 3 / 2;
    background-color: #333; /* Placeholder for images */
}

/* Ensure the container paints to the pixel edge on high-DPI */
.thumbnail {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

.thumbnail::before {
    content: '';
    position: absolute;
    /* Oversize slightly to avoid subpixel seams on mobile */
    left: -1px;
    right: -1px;
    bottom: -1px;
    height: calc(60% + 2px);
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    transition: opacity 0.3s ease;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
}

.thumbnail::after {
    content: '';
    position: absolute;
    /* Oversize slightly to avoid subpixel seams on mobile */
    inset: -1px;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
}

.thumbnail:hover::before {
    opacity: 0;
}

.thumbnail:hover::after {
    opacity: 1;
}

.thumbnail.inactive {
    cursor: default;
    opacity: 0.6;
}

.thumbnail.inactive:hover {
    transform: none;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
    display: block;
}

.thumbnail:hover img {
    transform: scale(1.05);
}

.thumbnail.inactive:hover {
    filter: grayscale(0);
}

.thumbnail-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--ml, 16px);
    color: var(--fg-white);
    z-index: 2;
}

.thumbnail-overlay h3 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 400;
}

@media (max-width: 768px) {
    .work-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s);
    }
    
    .work-section-title {
        font-size: 28px;
    }
    
    .project-thumbnails {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .thumbnail-overlay h3 {
        font-size: 18px;
    }
}

.thumbnail-overlay .original-title,
.thumbnail-overlay .coming-soon-title {
    transition: opacity 0.2s ease-in-out;
}

.thumbnail-overlay .coming-soon-title {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    opacity: 0;
    pointer-events: none;
}

.thumbnail.inactive:hover .original-title {
    opacity: 0;
}

.thumbnail.inactive:hover .coming-soon-title {
    opacity: 1;
}

/* Mobile/tap support: mirror hover effects when toggled via JS */
.thumbnail.show-coming-soon::before { opacity: 0; }
.thumbnail.show-coming-soon::after { opacity: 1; }
.thumbnail.inactive.show-coming-soon .original-title { opacity: 0; }
.thumbnail.inactive.show-coming-soon .coming-soon-title { opacity: 1; }

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*==============================================================*/
/* Mobile Overrides: ensure 2- and 4-image sets are full width  */
/*==============================================================*/
@media screen and (max-width: 480px) {
    .image-set.two,
    .image-set.four {
        grid-template-columns: 1fr; /* Ensure full-width on the smallest screens */
    }
    /* Also stack 3-image sets vertically on small phones */
    .image-set.three { grid-template-columns: 1fr; }
}