/* =========================================================
   CAPTURED MOMENTS — FINAL STYLESHEET
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {
    /* Typography */
    --font-serif: "Cormorant Garamond", Georgia, serif;
    --font-sans: "Inter", Arial, sans-serif;

    /* Layout */
    --page-padding: clamp(1.25rem, 3vw, 3.5rem);
    --section-gap: clamp(6rem, 12vw, 11rem);

    --transition-fast: 180ms ease;
    --transition-medium: 320ms ease;

    --radius-sm: 0.4rem;
    --radius-md: 0.8rem;

    /* Dark theme — default */
    --bg: #0b0b0c;
    --bg-soft: #111113;
    --surface: #151517;

    --text: #e4e4e6;
    --text-muted: #8d8d92;

    --accent: #d4a373;

    --border: rgba(228, 228, 230, 0.14);

    --header-bg: rgba(11, 11, 12, 0.78);
    --overlay-bg: rgba(11, 11, 12, 0.92);
}

html[data-theme="light"] {
    --bg: #f1f0ec;
    --bg-soft: #e8e6e1;
    --surface: #dedcd6;

    --text: #161616;
    --text-muted: #66645f;

    --accent: #8c5e37;

    --border: rgba(22, 22, 22, 0.16);

    --header-bg: rgba(241, 240, 236, 0.82);
    --overlay-bg: rgba(18, 18, 18, 0.88);
}


/* =========================================================
   02. RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
p,
figure,
dl,
dd {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    display: block;
    width: 100%;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   03. GLOBAL
========================================================= */

html,
body {
    background: var(--bg);
    color: var(--text);
}

body {
    min-height: 100vh;

    overflow-x: hidden;

    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.lightbox-open {
    overflow: hidden;
}

::selection {
    background: var(--accent);
    color: var(--bg);
}

main {
    overflow: hidden;
}

section {
    position: relative;
}

.eyebrow,
.section-number {
    font-size: 0.72rem;
    font-weight: 500;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: var(--text-muted);
}


/* =========================================================
   04. LOADER
========================================================= */

.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: grid;
    place-items: center;

    padding: var(--page-padding);

    background: var(--bg);
}

.loader__inner {
    width: min(34rem, 100%);
}

.loader__number {
    display: block;

    margin-bottom: 1rem;

    font-family: var(--font-serif);

    font-size: clamp(3rem, 10vw, 6rem);
    line-height: 0.8;
}

.loader__line {
    width: 100%;
    height: 1px;

    overflow: hidden;

    background: rgba(228, 228, 230, 0.15);
}

.loader__progress {
    width: 100%;
    height: 100%;

    transform: scaleX(0);
    transform-origin: left center;

    background: var(--accent);
}

.loader__label {
    display: block;

    margin-top: 0.9rem;

    color: var(--text-muted);

    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* =========================================================
   05. HEADER
========================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    width: 100%;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    padding:
        1.8rem var(--page-padding);

    font-size: 0.78rem;

    border-bottom: 1px solid transparent;

    transition:
        background-color 300ms ease,
        border-color 300ms ease,
        backdrop-filter 300ms ease;

    will-change: transform;
}

.site-header.is-scrolled {
    background: var(--header-bg);

    border-bottom-color: var(--border);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.brand {
    justify-self: start;

    font-family: var(--font-serif);

    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
}

.brand span {
    color: var(--accent);
}

.site-nav {
    display: flex;

    gap: clamp(1.5rem, 4vw, 4rem);
}

.site-nav a {
    position: relative;

    color: var(--text-muted);

    transition:
        color var(--transition-fast);
}

.site-nav a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -0.35rem;

    width: 100%;
    height: 1px;

    transform: scaleX(0);
    transform-origin: right;

    background: var(--accent);

    transition:
        transform var(--transition-medium);
}

.site-nav a:hover {
    color: var(--text);
}

.site-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.site-header__index {
    justify-self: end;

    color: var(--text-muted);
}


/* =========================================================
   06. HERO
========================================================= */

.hero {
    min-height: 100svh;

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr) minmax(0, 1.15fr);

    grid-template-rows:
        1fr auto;

    gap: 3rem;

    padding:
        clamp(9rem, 15vh, 12rem) var(--page-padding) 2.5rem;
}

.hero__intro {
    position: relative;
    z-index: 2;

    align-self: center;
}

.hero__intro .eyebrow {
    margin-bottom: 2rem;
}

.hero__title {
    font-family: var(--font-serif);

    font-size: clamp(5rem, 10vw, 11rem);
    font-weight: 400;

    line-height: 0.73;

    letter-spacing: -0.055em;
}

.hero__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom: 0.1em;
}

.hero__title-mask--offset {
    margin-left: clamp(1rem, 7vw, 7rem);
}

.hero__title-line {
    display: block;

    will-change: transform;
}

.hero__visual {
    align-self: center;
    justify-self: end;

    width: min(100%, 50rem);
}

.hero__image-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: var(--surface);
}

.hero__image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    will-change: transform;
}

.hero__caption {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: start;

    gap: 1.5rem;

    margin-top: 1rem;

    color: var(--text-muted);

    font-size: 0.68rem;
    line-height: 1.45;

    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hero__caption p {
    max-width: 15rem;
}

.hero__footer {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        1fr auto;

    align-items: end;

    gap: 2rem;

    padding-top: 1.5rem;

    border-top: 1px solid var(--border);
}

.hero__footer>p {
    width: min(32rem, 100%);

    color: var(--text-muted);

    font-size: 0.85rem;
}

.scroll-cue {
    display: inline-flex;

    align-items: center;

    gap: 0.8rem;

    font-size: 0.75rem;

    text-transform: uppercase;
    letter-spacing: 0.13em;

    transition:
        color var(--transition-fast);
}

.scroll-cue:hover {
    color: var(--accent);
}


/* =========================================================
   07. GALLERY INTRO
========================================================= */

.gallery-intro {
    display: grid;

    grid-template-columns:
        minmax(9rem, 0.35fr) minmax(0, 1fr);

    gap: 4rem;

    padding:
        var(--section-gap) var(--page-padding) clamp(5rem, 9vw, 9rem);
}

.gallery-intro__heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr) minmax(14rem, 0.6fr);

    align-items: end;

    gap: clamp(2rem, 6vw, 7rem);
}

.gallery-intro h2 {
    font-family: var(--font-serif);

    font-size: clamp(4rem, 9vw, 9rem);
    font-weight: 400;

    line-height: 0.78;

    letter-spacing: -0.05em;
}

.gallery-intro__heading p {
    max-width: 25rem;

    color: var(--text-muted);

    font-size: 0.95rem;
}


/* =========================================================
   08. HORIZONTAL GALLERY
========================================================= */

.gallery {
    width: 100%;

    padding-bottom: var(--section-gap);
}

.gallery-track {
    display: flex;

    align-items: center;

    gap: clamp(2rem, 5vw, 6rem);

    width: max-content;

    padding:
        2rem var(--page-padding) 5rem;
}

.photo-card {
    position: relative;

    flex: 0 0 auto;

    cursor: pointer;

    outline: none;
}

.photo-card--large {
    width: clamp(22rem, 38vw, 42rem);
}

.photo-card--portrait {
    width: clamp(17rem, 25vw, 26rem);

    margin-top: clamp(3rem, 10vw, 8rem);
}

.photo-card--landscape {
    width: clamp(26rem, 42vw, 46rem);

    margin-top: clamp(-2rem, -4vw, -5rem);
}

.photo-card--small {
    width: clamp(16rem, 22vw, 23rem);

    margin-top: clamp(6rem, 13vw, 11rem);
}

.photo-card__image-wrap {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: var(--surface);
}

.photo-card--large .photo-card__image-wrap {
    aspect-ratio: 4 / 5;
}

.photo-card--portrait .photo-card__image-wrap {
    aspect-ratio: 3 / 4;
}

.photo-card--landscape .photo-card__image-wrap {
    aspect-ratio: 5 / 3;
}

.photo-card--small .photo-card__image-wrap {
    aspect-ratio: 1 / 1.25;
}

.photo-card__image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    will-change: transform;
}


/* =========================================================
   09. EXIF OVERLAY
========================================================= */

.photo-card__exif {
    position: absolute;
    inset: 0;
    z-index: 3;

    display: flex;

    flex-direction: column;
    justify-content: space-between;

    padding: clamp(1rem, 2vw, 1.5rem);

    opacity: 0;
    visibility: hidden;

    color: #e4e4e6;

    background:
        linear-gradient(to bottom,
            rgba(8, 8, 9, 0.25),
            var(--overlay-bg));

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    transition:
        opacity var(--transition-medium),
        visibility var(--transition-medium);
}

.photo-card:hover .photo-card__exif,
.photo-card:focus-visible .photo-card__exif,
.photo-card.is-exif-open .photo-card__exif {
    opacity: 1;
    visibility: visible;
}

.exif__title {
    font-family: var(--font-serif);

    font-size: 1.2rem;
}

.photo-card__exif dl {
    display: grid;

    gap: 0.6rem;

    transform: translateY(12px);

    opacity: 0;

    transition:
        transform 320ms ease,
        opacity 320ms ease;
}

.photo-card:hover .photo-card__exif dl,
.photo-card:focus-visible .photo-card__exif dl,
.photo-card.is-exif-open .photo-card__exif dl {
    transform: translateY(0);

    opacity: 1;
}

.photo-card__exif dl>div {
    display: flex;

    justify-content: space-between;

    gap: 1rem;

    padding-top: 0.45rem;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.photo-card__exif dt,
.photo-card__exif dd {
    font-size: 0.68rem;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.photo-card__exif dt {
    color: rgba(228, 228, 230, 0.6);
}

.photo-card__exif dd {
    text-align: right;

    color: var(--text);
}


/* =========================================================
   10. PHOTO CAPTIONS
========================================================= */

.photo-card figcaption {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    gap: 1rem;

    padding-top: 0.85rem;

    border-top: 1px solid var(--border);

    font-size: 0.7rem;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.photo-card figcaption span:first-child,
.photo-card figcaption span:last-child {
    color: var(--text-muted);
}


/* =========================================================
   11. ABOUT
========================================================= */

.about {
    display: grid;

    grid-template-columns:
        minmax(8rem, 0.25fr) minmax(15rem, 0.65fr) minmax(18rem, 1fr);

    gap: clamp(2rem, 5vw, 6rem);

    padding:
        var(--section-gap) var(--page-padding);

    border-top: 1px solid var(--border);
}

.about__portrait {
    align-self: start;

    overflow: hidden;
}

.about__portrait img {
    aspect-ratio: 4 / 5;

    object-fit: cover;

    will-change: transform;
}

.about__content {
    padding-top: clamp(2rem, 8vw, 7rem);
}

.about__content .eyebrow {
    margin-bottom: 2rem;
}

.about__content h2 {
    max-width: 45rem;

    font-family: var(--font-serif);

    font-size: clamp(3.5rem, 6vw, 7rem);
    font-weight: 400;

    line-height: 0.9;

    letter-spacing: -0.045em;
}

.about__copy {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 2rem;

    margin-top: 3rem;

    max-width: 48rem;
}

.about__copy p {
    color: var(--text-muted);

    font-size: 0.9rem;
}


/* =========================================================
   12. GEAR
========================================================= */

.gear {
    margin-top: clamp(5rem, 9vw, 8rem);
}

.gear h3 {
    margin-bottom: 1.5rem;

    font-family: var(--font-serif);

    font-size: 1.8rem;
    font-weight: 400;
}

.gear__list {
    border-top: 1px solid var(--border);
}

.gear__item {
    display: grid;

    grid-template-columns:
        3rem 1fr auto;

    align-items: center;

    gap: 1rem;

    padding: 1.2rem 0;

    border-bottom: 1px solid var(--border);

    font-size: 0.8rem;

    transition:
        color var(--transition-fast),
        padding-left var(--transition-medium);
}

.gear__item span:first-child,
.gear__item span:last-child {
    color: var(--text-muted);
}

.gear__item:hover {
    padding-left: 0.75rem;

    color: var(--accent);
}


/* =========================================================
   13. FOOTER
========================================================= */

.footer {
    min-height: 80svh;

    display: flex;

    flex-direction: column;
    justify-content: space-between;

    padding:
        var(--section-gap) var(--page-padding) 2.5rem;

    background: var(--bg-soft);

    border-top: 1px solid var(--border);
}

.footer__headline,
.footer__bottom {
    will-change: transform, opacity;
}

.footer__headline .eyebrow {
    margin-bottom: 2rem;
}

.footer__headline h2 {
    font-family: var(--font-serif);

    font-size: clamp(4rem, 9vw, 10rem);
    font-weight: 400;

    line-height: 0.82;

    letter-spacing: -0.055em;
}

.footer__bottom {
    display: grid;

    grid-template-columns:
        repeat(3, auto) 1fr;

    align-items: end;

    gap: 2rem;

    padding-top: 2rem;

    border-top: 1px solid var(--border);

    font-size: 0.75rem;
}

.footer__bottom>span {
    justify-self: end;

    color: var(--text-muted);
}

.footer-link {
    position: relative;

    width: fit-content;
}

.footer-link::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -0.35rem;

    width: 100%;
    height: 1px;

    transform: scaleX(0);
    transform-origin: right;

    background: var(--accent);

    transition:
        transform var(--transition-medium);
}

.footer-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* =========================================================
   THEME TOGGLE
========================================================= */

.theme-toggle {
    display: inline-flex;
    align-items: center;

    gap: 0.7rem;

    width: fit-content;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--text-muted);

    cursor: pointer;

    font-family: var(--font-sans);
    font-size: 0.68rem;

    letter-spacing: 0.09em;
    text-transform: uppercase;

    transition:
        color var(--transition-fast);
}

.theme-toggle:hover {
    color: var(--text);
}


/* Switch background */

.theme-toggle__track {
    position: relative;

    width: 2.5rem;
    height: 1.25rem;

    flex: 0 0 auto;

    border: 1px solid var(--border);

    border-radius: 100rem;

    background: var(--surface);

    transition:
        background-color 300ms ease,
        border-color 300ms ease;
}


/* Moving circle */

.theme-toggle__thumb {
    position: absolute;

    top: 50%;
    left: 0.18rem;

    width: 0.78rem;
    height: 0.78rem;

    border-radius: 50%;

    background: var(--text);

    transform:
        translateY(-50%) translateX(0);

    transition:
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 300ms ease;
}


/* Light theme position */

html[data-theme="light"] .theme-toggle__thumb {
    transform:
        translateY(-50%) translateX(1.05rem);
}


/* Keyboard accessibility */

.theme-toggle:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 5px;
}


/* =========================================================
   14. LIGHTBOX
========================================================= */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: grid;

    grid-template-rows:
        auto 1fr auto;

    padding: clamp(1.25rem, 3vw, 3rem);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    background: rgba(8, 8, 9, 0.98);
    color: #e4e4e6;
}

.lightbox.is-open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}

.lightbox__close {
    position: relative;
    z-index: 10;

    justify-self: end;

    display: flex;

    align-items: center;

    gap: 0.7rem;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--text);

    cursor: pointer;

    font-size: 0.75rem;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    transition:
        color var(--transition-fast);
}

.lightbox__close:hover {
    color: var(--accent);
}

.lightbox__close span {
    font-size: 1.4rem;
    line-height: 1;
}

.lightbox__stage {
    min-height: 0;

    display: grid;
    place-items: center;

    padding: 2rem 0;

    overflow: hidden;
}

.lightbox__stage img {
    width: auto;
    height: auto;

    max-width: min(90vw, 110rem);
    max-height: 78vh;

    object-fit: contain;
}

.lightbox__info {
    display: flex;

    justify-content: space-between;
    align-items: center;

    padding-top: 1rem;

    border-top: 1px solid var(--border);

    color: var(--text-muted);

    font-size: 0.7rem;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   15. ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
.photo-card:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 5px;
}


/* =========================================================
   16. TABLET
========================================================= */

@media (max-width: 1000px) {

    .site-header {
        grid-template-columns:
            1fr auto;
    }

    .site-header__index {
        display: none;
    }


    /* Hero */

    .hero {
        grid-template-columns: 1fr;

        min-height: auto;

        padding-top: 9rem;
    }

    .hero__intro {
        width: 100%;
    }

    .hero__title {
        font-size: clamp(5rem, 16vw, 9rem);
    }

    .hero__visual {
        width: min(75vw, 42rem);

        margin-top: -2rem;
    }


    /* Gallery Intro */

    .gallery-intro {
        grid-template-columns: 1fr;
    }

    .gallery-intro__heading {
        grid-template-columns:
            1fr minmax(14rem, 0.5fr);
    }


    /* About */

    .about {
        grid-template-columns:
            minmax(12rem, 0.6fr) minmax(0, 1fr);
    }

    .about__label {
        grid-column: 1 / -1;
    }

    .about__content {
        padding-top: 0;
    }
}


/* =========================================================
   17. MOBILE
========================================================= */

@media (max-width: 700px) {

    :root {
        --page-padding: 1.15rem;
    }

    body {
        font-size: 0.95rem;
    }


    /* -------------------------------------------------------
     Header
  ------------------------------------------------------- */

    .site-header {
        padding-top: 1.3rem;
    }

    .site-nav {
        gap: 1.1rem;
    }


    /* -------------------------------------------------------
     Hero
  ------------------------------------------------------- */

    .hero {
        display: block;

        min-height: 100svh;

        padding-top: 7rem;
    }

    .hero__intro .eyebrow {
        margin-bottom: 1.25rem;
    }

    .hero__title {
        font-size: clamp(4.5rem, 23vw, 7.5rem);
    }

    .hero__title-mask--offset {
        margin-left: 0.35em;
    }

    .hero__visual {
        width: 88%;

        margin:
            2.5rem 0 0 auto;
    }

    .hero__caption {
        grid-template-columns:
            auto 1fr;

        gap: 1rem;
    }

    .hero__caption>span:last-child {
        display: none;
    }

    .hero__footer {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        margin-top: 3rem;
    }


    /* -------------------------------------------------------
     Gallery intro
  ------------------------------------------------------- */

    .gallery-intro {
        gap: 2rem;

        padding-top: 7rem;
    }

    .gallery-intro__heading {
        display: block;
    }

    .gallery-intro h2 {
        margin-bottom: 2rem;

        font-size: clamp(4rem, 20vw, 6.5rem);
    }


    /* -------------------------------------------------------
     Gallery

     Native horizontal touch scrolling is used here.
     Desktop ScrollTrigger pinning stops at 700px.
  ------------------------------------------------------- */

    .gallery {
        overflow: hidden;
    }

    .gallery-track {
        width: auto;

        overflow-x: auto;
        overflow-y: hidden;

        gap: 1.2rem;

        padding:
            1rem var(--page-padding) 3rem;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .gallery-track::-webkit-scrollbar {
        display: none;
    }

    .photo-card,
    .photo-card--large,
    .photo-card--portrait,
    .photo-card--landscape,
    .photo-card--small {
        width: 82vw;

        margin-top: 0;

        scroll-snap-align: center;
    }

    .photo-card--landscape {
        width: 90vw;
    }


    /* -------------------------------------------------------
     About
  ------------------------------------------------------- */

    .about {
        display: block;

        padding-top: 7rem;
    }

    .about__label {
        margin-bottom: 3rem;
    }

    .about__portrait {
        width: 72%;

        margin-left: auto;
    }

    .about__content {
        margin-top: 3rem;
    }

    .about__content h2 {
        font-size: clamp(3.8rem, 16vw, 6rem);
    }

    .about__copy {
        grid-template-columns: 1fr;

        gap: 1rem;
    }

    .gear {
        margin-top: 4rem;
    }

    .gear__item {
        grid-template-columns:
            2rem 1fr auto;

        gap: 0.7rem;
    }


    /* -------------------------------------------------------
     Footer
  ------------------------------------------------------- */

    .footer {
        min-height: 70svh;

        padding-top: 7rem;
    }

    .footer__headline h2 {
        font-size: clamp(4rem, 19vw, 6.5rem);
    }

    .footer__bottom {
        grid-template-columns:
            repeat(4, auto) 1fr;

        gap:
            1rem 1.5rem;
    }

    .footer__bottom>span {
        grid-column: 1 / -1;

        justify-self: start;

        margin-top: 1rem;
    }


    /* -------------------------------------------------------
     Lightbox
  ------------------------------------------------------- */

    .lightbox__stage img {
        max-width: 100%;
        max-height: 72vh;
    }
}


/* =========================================================
   18. SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .site-nav a:nth-child(2) {
        display: none;
    }

    .hero__visual {
        width: 92%;
    }

    .photo-card,
    .photo-card--large,
    .photo-card--portrait,
    .photo-card--landscape,
    .photo-card--small {
        width: 88vw;
    }

    .footer__bottom {
        grid-template-columns:
            repeat(2, auto);

        align-items: start;
    }

    .theme-toggle {
        justify-self: start;
    }

    .footer__bottom>span {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   19. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

    .hero__image,
    .hero__title-line,
    .photo-card__image,
    .about__portrait img {
        will-change: auto;
    }
}

/* ----------------------------------------------------------------------------- */

/* =========================================================
   20. WORK PAGE
========================================================= */


/* ---------------------------------------------------------
   Work page shell
--------------------------------------------------------- */

.work-page {
    background: var(--bg);
}

.work-page main {
    overflow: visible;
}


/* ---------------------------------------------------------
   Active navigation state
--------------------------------------------------------- */

.site-nav a[aria-current="page"] {
    color: var(--text);
}

.site-nav a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;

    background: var(--accent);
}


/* =========================================================
   21. WORK HERO
========================================================= */

.work-hero {
    min-height: 92svh;

    display: grid;

    grid-template-columns:
        minmax(9rem, 0.28fr) minmax(0, 1.25fr) minmax(16rem, 0.47fr);

    grid-template-rows:
        1fr auto;

    align-items: end;

    gap:
        3rem clamp(2rem, 5vw, 7rem);

    padding:
        clamp(10rem, 18vh, 14rem) var(--page-padding) clamp(4rem, 7vw, 7rem);

    border-bottom: 1px solid var(--border);
}


/* Small archive label */

.work-hero__label {
    align-self: start;

    padding-top: 0.5rem;
}


/* Main editorial heading */

.work-hero__heading {
    align-self: center;
}

.work-hero__heading h1 {
    font-family: var(--font-serif);

    font-size: clamp(6rem, 13vw, 14rem);
    font-weight: 400;

    line-height: 0.7;

    letter-spacing: -0.065em;
}


/* Right-side introduction */

.work-hero__intro {
    align-self: end;

    padding-bottom: 0.6rem;
}

.work-hero__intro>p {
    max-width: 28rem;

    color: var(--text-muted);

    font-size: 0.9rem;
}


/* Archive statistics */

.work-hero__meta {
    display: flex;

    justify-content: space-between;

    gap: 1rem;

    margin-top: 3rem;

    padding-top: 1rem;

    border-top: 1px solid var(--border);

    color: var(--text-muted);

    font-size: 0.68rem;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}


/* =========================================================
   22. ARCHIVE INDEX
========================================================= */

.work-index {
    padding:
        clamp(4rem, 7vw, 7rem) var(--page-padding) 2rem;
}

.work-index__header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 2rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid var(--border);
}

.work-index__controls {
    display: flex;

    align-items: center;

    gap: 1rem;

    color: var(--text-muted);

    font-size: 0.68rem;

    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.work-index__sort {
    color: var(--text);
}


/* =========================================================
   23. DYNAMIC WORK GALLERY
========================================================= */

.work-gallery {
    padding:
        2rem var(--page-padding) var(--section-gap);
}


/*
 * We use a 12-column editorial grid instead of a standard
 * uniform photo grid.
 *
 * Individual layout classes determine how many columns a
 * photograph occupies.
 */

.work-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    align-items: start;

    column-gap: clamp(1.25rem, 2.8vw, 3.5rem);
    row-gap: clamp(5rem, 10vw, 11rem);
}


/* =========================================================
   24. WORK CARDS
========================================================= */

.work-card {
    position: relative;

    min-width: 0;

    cursor: pointer;

    outline: none;
}


/*
 * The layout intentionally changes from image to image.
 *
 * This avoids the appearance of an ecommerce/product grid
 * and makes the archive feel closer to an editorial spread.
 */


/* Portrait */

.work-card--portrait {
    grid-column: span 4;
}


/* Landscape */

.work-card--landscape {
    grid-column: span 7;
}


/* Square */

.work-card--square {
    grid-column: span 5;
}


/* Wide cinematic photograph */

.work-card--wide {
    grid-column: span 8;
}


/* Narrow / tall photograph */

.work-card--tall {
    grid-column: span 3;
}


/* Default/fallback if layout is missing */

.work-card:not(.work-card--portrait,
    .work-card--landscape,
    .work-card--square,
    .work-card--wide,
    .work-card--tall) {
    grid-column: span 4;
}


/* =========================================================
   25. ASYMMETRIC PLACEMENT
========================================================= */

/*
 * These selectors give successive photographs different
 * horizontal starting points.
 *
 * This is what creates the loose editorial rhythm.
 */

.work-card:nth-child(6n + 1) {
    grid-column-start: 1;
}

.work-card:nth-child(6n + 2) {
    grid-column-start: 7;
}

.work-card:nth-child(6n + 3) {
    grid-column-start: 2;
}

.work-card:nth-child(6n + 4) {
    grid-column-start: 8;
}

.work-card:nth-child(6n + 5) {
    grid-column-start: 1;
}

.work-card:nth-child(6n + 6) {
    grid-column-start: 6;
}


/*
 * Small vertical offsets give the grid a less mechanical
 * baseline.
 */

.work-card:nth-child(4n + 2) {
    margin-top: clamp(2rem, 5vw, 6rem);
}

.work-card:nth-child(4n + 4) {
    margin-top: clamp(-1rem, -2vw, -3rem);
}


/* =========================================================
   26. WORK IMAGE CONTAINERS
========================================================= */

.work-card__image-wrap {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: var(--surface);
}


/* Portrait */

.work-card--portrait .work-card__image-wrap {
    aspect-ratio: 4 / 5;
}


/* Landscape */

.work-card--landscape .work-card__image-wrap {
    aspect-ratio: 3 / 2;
}


/* Square */

.work-card--square .work-card__image-wrap {
    aspect-ratio: 1 / 1;
}


/* Wide */

.work-card--wide .work-card__image-wrap {
    aspect-ratio: 16 / 9;
}


/* Tall */

.work-card--tall .work-card__image-wrap {
    aspect-ratio: 2 / 3;
}


.work-card__image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    will-change: transform;

    transition:
        filter 400ms ease;
}


/*
 * Very subtle darkening while inspecting metadata.
 *
 * We do NOT scale here because GSAP will eventually own the
 * image transform for scroll/parallax/lightbox effects.
 */

.work-card:hover .work-card__image,
.work-card:focus-visible .work-card__image,
.work-card.is-exif-open .work-card__image {
    filter: brightness(0.82);
}


/* =========================================================
   27. WORK EXIF OVERLAY
========================================================= */

.work-card__exif {
    position: absolute;
    inset: 0;
    z-index: 3;

    display: flex;

    flex-direction: column;
    justify-content: space-between;

    padding: clamp(1rem, 2vw, 1.6rem);

    opacity: 0;
    visibility: hidden;

    background:
        linear-gradient(180deg,
            rgba(8, 8, 9, 0.12) 0%,
            rgba(8, 8, 9, 0.34) 45%,
            var(--overlay-bg) 100%);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    transition:
        opacity 320ms ease,
        visibility 320ms ease;

    color: #e4e4e6;

}


/* Desktop hover + keyboard + future mobile JS */

.work-card:hover .work-card__exif,
.work-card:focus-visible .work-card__exif,
.work-card.is-exif-open .work-card__exif {
    opacity: 1;
    visibility: visible;
}


/* Metadata heading */

.work-card__exif .exif__title {
    font-family: var(--font-serif);

    font-size: clamp(1.1rem, 2vw, 1.45rem);
}


/* Metadata table */

.work-card__exif dl {
    display: grid;

    gap: 0.45rem;

    opacity: 0;

    transform: translateY(16px);

    transition:
        opacity 320ms ease,
        transform 320ms ease;
}

.work-card:hover .work-card__exif dl,
.work-card:focus-visible .work-card__exif dl,
.work-card.is-exif-open .work-card__exif dl {
    opacity: 1;

    transform: translateY(0);
}


.work-card__exif dl>div {
    display: flex;

    justify-content: space-between;
    align-items: baseline;

    gap: 1rem;

    padding-top: 0.5rem;

    border-top: 1px solid rgba(228, 228, 230, 0.18);
}


.work-card__exif dt,
.work-card__exif dd {
    font-size: 0.64rem;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.work-card__exif dt {
    color: rgba(228, 228, 230, 0.58);
}


.work-card__exif dd {
    max-width: 65%;

    text-align: right;

    color: var(--text);
}


/* =========================================================
   28. WORK CAPTION
========================================================= */

.work-card figcaption {
    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr) auto;

    align-items: start;

    gap: clamp(0.8rem, 1.5vw, 1.4rem);

    padding-top: 0.9rem;

    border-top: 1px solid var(--border);
}


/* Index and year */

.work-card figcaption>span {
    color: var(--text-muted);

    font-size: 0.66rem;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


/* Title/location container */

.work-card figcaption>div {
    display: flex;

    flex-direction: column;

    gap: 0.15rem;
}


.work-card__title {
    font-family: var(--font-serif);

    font-size: clamp(1.05rem, 1.7vw, 1.35rem);

    line-height: 1.1;
}


.work-card__location {
    color: var(--text-muted);

    font-size: 0.66rem;

    line-height: 1.5;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* =========================================================
   29. WORK CARD HOVER DETAIL
========================================================= */

.work-card figcaption {
    transition:
        border-color 250ms ease;
}

.work-card:hover figcaption,
.work-card:focus-visible figcaption {
    border-color: rgba(212, 163, 115, 0.5);
}

.work-card__title {
    transition:
        color 250ms ease;
}

.work-card:hover .work-card__title,
.work-card:focus-visible .work-card__title {
    color: var(--accent);
}


/* =========================================================
   30. WORK EMPTY / ERROR STATE
========================================================= */

.work-empty {
    min-height: 60svh;

    padding:
        6rem var(--page-padding) var(--section-gap);
}

.work-empty h2 {
    margin-top: 2rem;

    max-width: 50rem;

    font-family: var(--font-serif);

    font-size: clamp(4rem, 9vw, 9rem);
    font-weight: 400;

    line-height: 0.85;

    letter-spacing: -0.045em;
}

.work-empty>p:last-child {
    max-width: 35rem;

    margin-top: 2rem;

    color: var(--text-muted);
}

.work-empty code {
    color: var(--accent);

    font-family: monospace;
}


/* =========================================================
   31. WORK LIGHTBOX DETAILS
========================================================= */

.lightbox__details {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 0.15rem;
}

.lightbox__location {
    color: var(--text-muted);

    font-size: 0.62rem;
}


/* =========================================================
   32. WORK FOOTER
========================================================= */

.work-footer {
    min-height: 65svh;
}


/* =========================================================
   33. WORK PAGE — LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

    .work-grid {
        column-gap: 3.5rem;
    }

    .work-card--portrait {
        grid-column: span 4;
    }

    .work-card--landscape {
        grid-column: span 7;
    }

    .work-card--wide {
        grid-column: span 8;
    }

    .work-card--tall {
        grid-column: span 3;
    }
}


/* =========================================================
   34. WORK PAGE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .work-hero {
        min-height: auto;

        grid-template-columns:
            1fr minmax(15rem, 0.45fr);

        grid-template-rows:
            auto auto auto;

        padding-top: 10rem;
    }


    .work-hero__label {
        grid-column: 1 / -1;
    }


    .work-hero__heading {
        grid-column: 1;
    }


    .work-hero__heading h1 {
        font-size: clamp(6rem, 16vw, 11rem);
    }


    .work-hero__intro {
        grid-column: 2;

        align-self: end;
    }


    /*
   * Tablet grid is reduced from 12 to 8 columns.
   */

    .work-grid {
        grid-template-columns:
            repeat(8, minmax(0, 1fr));

        row-gap: clamp(4rem, 9vw, 7rem);
    }


    .work-card--portrait {
        grid-column: span 4;
    }

    .work-card--landscape {
        grid-column: span 6;
    }

    .work-card--square {
        grid-column: span 4;
    }

    .work-card--wide {
        grid-column: span 7;
    }

    .work-card--tall {
        grid-column: span 3;
    }


    /*
   * Simplify desktop positioning.
   */

    .work-card:nth-child(6n + 1) {
        grid-column-start: 1;
    }

    .work-card:nth-child(6n + 2) {
        grid-column-start: 5;
    }

    .work-card:nth-child(6n + 3) {
        grid-column-start: 2;
    }

    .work-card:nth-child(6n + 4) {
        grid-column-start: 5;
    }

    .work-card:nth-child(6n + 5) {
        grid-column-start: 1;
    }

    .work-card:nth-child(6n + 6) {
        grid-column-start: 4;
    }
}


/* =========================================================
   35. WORK PAGE — MOBILE
========================================================= */

@media (max-width: 700px) {

    /* Hero */

    .work-hero {
        min-height: auto;

        display: block;

        padding:
            8rem var(--page-padding) 5rem;
    }


    .work-hero__label {
        margin-bottom: 3rem;
    }


    .work-hero__heading h1 {
        font-size: clamp(5rem, 24vw, 8rem);

        line-height: 0.72;
    }


    .work-hero__intro {
        width: min(90%, 27rem);

        margin:
            4rem 0 0 auto;
    }


    .work-hero__meta {
        margin-top: 2rem;
    }


    /* Archive bar */

    .work-index {
        padding-top: 4rem;
    }


    .work-index__header {
        align-items: flex-end;
    }


    .work-index__controls {
        flex-direction: column;

        align-items: flex-end;

        gap: 0.1rem;
    }


    /* Gallery */

    .work-gallery {
        padding-top: 1rem;
    }


    /*
   * Four columns give us some editorial offset control
   * without making cards too narrow.
   */

    .work-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        column-gap: 0.8rem;
        row-gap: 5rem;
    }


    /*
   * Most photographs become almost full-width.
   */

    .work-card--portrait,
    .work-card--square,
    .work-card--landscape,
    .work-card--wide,
    .work-card--tall,
    .work-card:not(.work-card--portrait,
        .work-card--landscape,
        .work-card--square,
        .work-card--wide,
        .work-card--tall) {
        grid-column: span 4;
    }


    /*
   * Kill desktop starting columns.
   */

    .work-card:nth-child(n) {
        grid-column-start: auto;
    }


    /*
   * Preserve a little asymmetry without hurting readability.
   */

    .work-card:nth-child(3n + 2) {
        width: 88%;

        margin-left: auto;
    }


    .work-card:nth-child(3n + 3) {
        width: 92%;

        margin-right: auto;
    }


    /*
   * Remove large desktop vertical offsets.
   */

    .work-card:nth-child(4n + 2),
    .work-card:nth-child(4n + 4) {
        margin-top: 0;
    }


    /* Caption */

    .work-card figcaption {
        gap: 0.8rem;
    }


    .work-card__title {
        font-size: 1.1rem;
    }


    /* EXIF */

    .work-card__exif {
        padding: 1rem;
    }


    .work-card__exif dl {
        gap: 0.35rem;
    }


    .work-card__exif dl>div {
        padding-top: 0.4rem;
    }


    .work-card__exif dt,
    .work-card__exif dd {
        font-size: 0.6rem;
    }


    /* Lightbox */

    .lightbox__details {
        max-width: 70%;

        text-align: right;
    }
}


/* =========================================================
   36. WORK PAGE — SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .work-hero__intro {
        width: 100%;
    }


    .work-index__controls>span:first-child {
        display: none;
    }


    .work-grid {
        row-gap: 4rem;
    }


    .work-card:nth-child(3n + 2),
    .work-card:nth-child(3n + 3) {
        width: 100%;

        margin-left: 0;
        margin-right: 0;
    }


    .work-card figcaption {
        grid-template-columns:
            auto 1fr;
    }


    /*
   * Move the year below the title on very small screens.
   */

    .work-card figcaption>span:last-child {
        grid-column: 2;

        margin-top: 0.2rem;
    }
}


/* =========================================================
   37. WORK REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .work-card__image {
        will-change: auto;
    }
}




/* =========================================================
   WORK GALLERY — LARGE PHOTO OVERRIDE
========================================================= */

.work-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: clamp(2rem, 5vw, 6rem);
    row-gap: clamp(5rem, 9vw, 9rem);

    align-items: start;
}


/* Reset the old 12-column positioning */

.work-card,
.work-card--portrait,
.work-card--landscape,
.work-card--square,
.work-card--wide,
.work-card--tall {
    grid-column: auto;
    grid-column-start: auto;

    width: 100%;

    margin-top: 0;
}


/* Portraits remain large but share a row */

.work-card--portrait {
    grid-column: span 1;
}


/* Square images */

.work-card--square {
    grid-column: span 1;
}


/* Tall photographs */

.work-card--tall {
    grid-column: span 1;

    width: 88%;
}


/* Landscape photographs become dominant */

.work-card--landscape {
    grid-column: 1 / -1;

    width: 86%;

    justify-self: center;
}


/* Cinematic images use almost the entire viewport */

.work-card--wide {
    grid-column: 1 / -1;

    width: 94%;

    justify-self: center;
}


/* Slight editorial asymmetry */

.work-card:nth-child(4n + 1) {
    justify-self: start;
}

.work-card:nth-child(4n + 2) {
    justify-self: end;

    width: 92%;
}

.work-card:nth-child(4n + 3) {
    justify-self: start;
}

.work-card:nth-child(4n + 4) {
    justify-self: end;
}


/* Make the actual images feel more substantial */

.work-card__image-wrap {
    min-height: 24rem;
}


/* Portrait */

.work-card--portrait .work-card__image-wrap {
    aspect-ratio: 4 / 5;
}


/* Square */

.work-card--square .work-card__image-wrap {
    aspect-ratio: 1 / 1;
}


/* Tall */

.work-card--tall .work-card__image-wrap {
    aspect-ratio: 2 / 3;
}


/* Landscape */

.work-card--landscape .work-card__image-wrap {
    aspect-ratio: 16 / 10;
}


/* Wide */

.work-card--wide .work-card__image-wrap {
    aspect-ratio: 16 / 8;
}

/* =========================================================
   RESET OLD 12-COLUMN POSITIONING
========================================================= */

.work-grid .work-card:nth-child(n) {
    grid-column-start: auto;
    grid-column-end: auto;

    margin-top: 0;
}

.work-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: clamp(2rem, 5vw, 6rem);
    row-gap: clamp(5rem, 9vw, 9rem);
}


/* Normal large cards */

.work-grid .work-card--portrait,
.work-grid .work-card--square,
.work-grid .work-card--tall {
    grid-column: span 1;

    width: 100%;
}


/* Large horizontal photographs */

.work-grid .work-card--landscape,
.work-grid .work-card--wide {
    grid-column: 1 / -1;

    width: 90%;

    justify-self: center;
}


@media (max-width: 900px) {

    .work-grid {
        grid-template-columns: 1fr;

        row-gap: 5rem;
    }

    .work-card,
    .work-card--portrait,
    .work-card--landscape,
    .work-card--square,
    .work-card--wide,
    .work-card--tall,
    .work-card:nth-child(n) {
        grid-column: 1;

        width: 100%;

        justify-self: stretch;

        margin: 0;
    }

    .work-card__image-wrap {
        min-height: 0;
    }
}