@charset "UTF-8";

/* ============================================
   NORMALIZE & RESET
   ============================================ */
html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}

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

body {
    margin: 0;
}

article,
aside,
footer,
header,
nav,
section,
main,
figcaption,
figure {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
dl,
dd {
    margin: 0;
}

img,
video {
    max-width: 100%;
    height: auto;
    border-style: none;
}

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

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --color-bg: #FAFAFA;
    --color-text: #1A1A1A;
    --color-dark-bg: #1A1A1A;
    --color-light-text: #D9D9D9;
    --header-height: 60px;
    --side-padding: 20px;
}

/* ============================================
   FONTS
   ============================================ */
@font-face {
    font-family: "Neue Montreal";
    src: url("fonts/NeueMontreal-Regular.woff2") format("woff2"),
        url("fonts/NeueMontreal-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Times Now";
    src: url("fonts/TimesNowSemiLight/font.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
}

/* ============================================
   BASE STYLES
   ============================================ */
body {
    font-family: "Neue Montreal", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--color-text);
    background: var(--color-bg);
    padding-top: var(--header-height);
}

/* ============================================
   HEADER
   ============================================ */
.header {
    font-family: "Neue Montreal", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(22px, 1.25vw, 30px);
    line-height: 1.1875;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 200;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 20px;
    background: var(--color-bg);
}

.header__navigation {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 2ch;
}

.header__navigation__item__button {
    border-bottom: 1px solid transparent;
}

.header__navigation__item__button:hover,
.header__navigation__item__button.is-active {
    border-bottom-color: currentcolor;
}

/* ============================================
   PAGE TITLE
   ============================================ */
.page-title {
    margin-right: auto;
    margin-left: auto;
    width: calc(100% - 20px * 2);
    font-family: "Neue Montreal", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(48px, 7.03vw, 160px);
    line-height: 0.9;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title__button {
    padding: 0;
    font: inherit;
    line-height: normal;
    text-align: inherit;
    color: inherit;
    user-select: none;
    overflow: visible;
    background: none;
    border: 0;
    outline: 0;
    font-family: "Neue Montreal", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(48px, 7.03vw, 160px);
    line-height: 0.9;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.page-title__button:hover {
    border-bottom-color: currentcolor;
}

.page-title~.flexible-content,
.page-title~.project-overview,
.page-title~.image-overview {
    margin-top: clamp(16px, 1.68vw, 43px);
}

/* ============================================
   PROJECT OVERVIEW (Index Table)
   ============================================ */
.project-overview {
    margin-right: auto;
    margin-left: auto;
    width: calc(100% - 20px * 2);
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    column-gap: 20px;
    font-family: "Neue Montreal", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(22px, 1.25vw, 30px);
    line-height: 1.1875;
}

.project-overview.is-hidden {
    display: none;
}

.project-overview__list {
    grid-column: span 16;
}

.project-overview__list__heading,
.project-overview__list__item {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    column-gap: 20px;
    line-height: 1.6;
}

.project-overview__list__heading {
    margin-bottom: 40px;
}

.project-overview__list__item span {
    border-bottom: 1px solid transparent;
}

.project-overview__list__item.is-complete {
    color: inherit;
}

.project-overview__list__item.is-hidden {
    display: none;
}

.project-overview__list__item:is(a):hover span {
    border-bottom-color: currentcolor;
}

.project-overview__list__item:is(div):hover {
    cursor: not-allowed;
}

.project-overview__list__column:nth-child(1),
.project-overview__list__column:nth-child(2) {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.project-overview__list__column:nth-child(1) {
    grid-column: span 8;
}

.project-overview__list__column:nth-child(2) {
    grid-column: span 6;
}

.project-overview__list__column:nth-child(3) {
    grid-column: span 2;
    min-width: 4ch;
    text-align: left;
}

/* ============================================
   PROJECT VISUAL (Hover Preview)
   ============================================ */
.project-overview__visual {
    position: relative;
    margin-top: calc(1.6em + 40px);
    grid-column: 19 / span 6;
}

.project-overview__visual__item {
    position: sticky;
    top: 80px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #D9D9D9;
}

.project-overview__visual__item::before {
    position: absolute;
    top: 50%;
    left: -50%;
    transform-origin: center;
    transform: rotate(-54.46deg);
    width: 200%;
    height: 1px;
    pointer-events: none;
    content: "";
    background: rgba(26, 26, 26, 0.3);
}

.project-overview__visual__item:not(.is-active) {
    display: none;
}

.project-overview__visual__item--crop-right img,
.project-overview__visual__item--crop-right video {
    object-position: right center;
}

.project-overview__visual__item--crop-left img,
.project-overview__visual__item--crop-left video {
    object-position: 38% center;
    transform: scale(1.4);
}

.project-overview__visual__item img,
.project-overview__visual__item video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   IMAGE OVERVIEW (Image Grid View)
   ============================================ */
.image-overview {
    margin-right: auto;
    margin-left: auto;
    width: calc(100% - 20px * 2);
    column-count: 4;
    column-gap: 20px;
}

.image-overview.is-hidden {
    display: none;
}

.image-overview a {
    display: block;
}

.image-overview__item {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fade in once loaded */
    opacity: 0;
    transition: opacity 0.35s ease, filter 0.2s ease;
}

.image-overview__item.is-loaded {
    opacity: 1;
}

/* Videos autoplay immediately — show them right away */
video.image-overview__item {
    opacity: 0;
}

.image-overview a video.image-overview__item {
    object-fit: cover;
}

/* ============================================
   SKELETON SHIMMER
   ============================================ */
@keyframes skeleton-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.gallery-item {
    position: relative;
    margin-bottom: 20px;
    break-inside: avoid;
}

.gallery-item__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--media-width, 4) / var(--media-height, 5);
    overflow: hidden;
    border-radius: 0;
    background: #ececec;
    margin-bottom: 8px;
}

/* Skeleton placeholder sits behind the image */
.gallery-item__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        #e8e8e8 25%,
        #f0f0f0 37%,
        #e8e8e8 63%
    );
    background-size: 600px 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Hide skeleton once the item's image is loaded */
.gallery-item.is-loaded .gallery-item__media::before {
    opacity: 0;
    animation: none;
}

/* Image sits above the skeleton */
.gallery-item .image-overview__item {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* MISC items that don't link anywhere */
.gallery-item--no-link {
    cursor: default;
}

.gallery-item--no-link .image-overview__item:hover {
    transform: none !important;
}

.gallery-item__caption {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    position: relative;
    z-index: 1;
}

.image-overview__item.is-inactive {
    opacity: 0.5;
}

.gallery-item.is-deferred {
    display: none;
}

.gallery-load-sentinel {
    width: calc(100% - 20px * 2);
    height: 1px;
    margin: 0 auto;
}

/* ============================================
   MOBILE PROJECT OVERVIEW (Image Grid for <1024)
   ============================================ */
.mobile-project-overview {
    margin-right: auto;
    margin-left: auto;
    width: calc(100% - 20px * 2);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
    row-gap: 40px;
}

.mobile-project-overview__item {
    grid-column: span 4;
}

.mobile-project-overview__item__visual img,
.mobile-project-overview__item__visual video {
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
}

.mobile-project-overview__item__text {
    font-family: "Neue Montreal", sans-serif;
    font-weight: 400;
    font-size: clamp(22px, 1.25vw, 30px);
    line-height: 1.1875;
    margin-top: 5px;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    margin-top: 60px;
    background: none;
    color: var(--color-text);
}

.footer__inner {
    margin-right: auto;
    margin-left: auto;
    width: calc(100% - 20px * 2);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 0;
    padding-bottom: 20px;
}

.footer__row {
    display: flex;
    justify-content: space-between;
}

/* Hide the top footer row (logo + bio) — keep only copyright row */
.footer__row:first-child {
    display: none;
}

.footer__row+.footer__row {
    margin-top: 0;
}

.footer__row:nth-child(2) {
    align-items: flex-end;
}

.footer__column {
    width: 50%;
}

.footer__column--disclaimer {
    display: flex;
}

.footer__column--disclaimer p {
    font-family: "Neue Montreal", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.1875;
}

.footer img {
    display: block;
}

/* Text in footer columns */
.footer__column.text-holder p {
    font-family: "Neue Montreal", sans-serif;
    font-weight: 400;
    font-size: clamp(22px, 1.25vw, 30px);
    line-height: 1.1875;
}

.footer__column.text-holder p+p {
    margin-top: 1.1875em;
}

.footer__column.text-holder a {
    border-bottom: 1px solid transparent;
}

.footer__column.text-holder a:hover {
    border-bottom-color: currentcolor;
}

.footer__logo {
    font-family: "Neue Montreal", sans-serif;
    font-size: clamp(22px, 1.25vw, 30px);
    font-weight: 400;
    color: var(--color-light-text);
}

/* ============================================
   TEXT HOLDERS (Typography System)
   ============================================ */
.text-holder h1,
.text-holder h2,
.text-holder h3,
.text-holder h4,
.text-holder h5,
.text-holder h6,
.text-holder p,
.text-holder ul,
.text-holder ol {
    font-family: "Neue Montreal", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(22px, 1.25vw, 30px);
    line-height: 1.1875;
}

.text-holder p+p {
    margin-top: 1.1875em;
}

.text-holder p a {
    border-bottom: 1px solid currentcolor;
}

.text-holder p a:hover {
    border-bottom-color: transparent;
}

.text-holder-small p {
    font-family: "Neue Montreal", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.1875;
}

.text-holder-small p+p {
    margin-top: 1.1875em;
}

/* Project intro / large text — Serif typeface */
.text-holder-large p {
    font-family: "Times Now", "Times New Roman", serif;
    font-style: normal;
    font-weight: 300;
    font-size: clamp(32px, 2.81vw, 72px);
    line-height: 1;
}

.text-holder-large p+p {
    margin-top: 1em;
}

/* ============================================
   PROJECT PAGE STYLES
   ============================================ */
/* Project page base styling falls here */

/* Flexible Content Container */
.flexible-content__item {
    margin-right: auto;
    margin-left: auto;
    width: calc(100% - 20px * 2);
}

.flexible-content__item+.flexible-content__item--whitespace-s {
    margin-top: 20px;
}

.flexible-content__item+.flexible-content__item--whitespace-m {
    margin-top: 60px;
}

.flexible-content__item+.flexible-content__item--whitespace-l {
    margin-top: 120px;
}

/* Project Intro */

/* Credits */
.credits {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
}

.credits>* {
    grid-column: 2 / span 10;
}

/* Text Layouts */
.text__inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
}

.text--1-column .text__item {
    grid-column: span 12;
}

.text--2-column .text__item {
    grid-column: span 6;
}

.text--3-column .text__item--l {
    grid-column: span 8;
}

.text--3-column .text__item--s {
    grid-column: span 4;
}

.text--4-column .text__item {
    grid-column: span 3;
}

/* Media Layouts */
.media__inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
    row-gap: 20px;
}

.media__item {
    position: relative;
}

.media__item img,
.media__item video {
    display: block;
    width: 100%;
}

.media__item video {
    object-fit: cover;
}

.media__caption {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 20px;
    margin-top: 20px;
}

.media__caption__text {
    grid-column: span 4;
}

.media__caption__text--l {
    grid-column: 3 / span 4;
}

.media__caption__text--m {
    grid-column: 4 / span 4;
}

.media__caption__text--s {
    grid-column: 5 / span 4;
}

.media__caption__text--xl {
    grid-column: 2 / span 10;
}

.media--1-column .media__item {
    grid-column: span 12;
}

.media--1-column .media__item--l {
    grid-column: 3 / span 8;
}

.media--1-column .media__item--m {
    grid-column: 4 / span 6;
}

.media--1-column .media__item--s {
    grid-column: 5 / span 4;
}

.media--2-column .media__item {
    grid-column: span 6;
}

.media--3-column .media__item {
    grid-column: span 4;
}

.media--4-column .media__item {
    grid-column: span 3;
}

.media-item--center-small {
    width: 60%;
    margin: 0 auto;
}

.lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.88);
    z-index: 999;
}

.lightbox.is-open {
    display: flex;
}

.lightbox__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
}

/* ============================================
   RESPONSIVE — TABLET (< 1024px)
   ============================================ */
@media (max-width: 1366px) and (hover: none),
(max-width: 1024px) {
    .project-overview__list {
        grid-column: span 24;
    }

    .project-overview__visual {
        display: none;
    }
}

@media (max-width: 1023px) {
    .header {
        font-size: 20px;
    }

    .text-holder h1,
    .text-holder h2,
    .text-holder h3,
    .text-holder h4,
    .text-holder h5,
    .text-holder h6,
    .text-holder p,
    .text-holder ul,
    .text-holder ol {
        font-size: 20px;
    }

    .mobile-project-overview__item__text {
        font-size: 20px;
    }

    /* Hide desktop index on mobile, show mobile grid */
    /* .project-overview {
        display: none;
    } */

    /* .image-overview { display: none; } */

    /* .page-title.hide-on-mobile { display: none; } */
}

@media (min-width: 1024px) {
    /* .mobile-project-overview { display: none; } */
}

@media (max-width: 1024px) {
}

/* ============================================
   RESPONSIVE — MOBILE (< 768px)
   ============================================ */
@media (max-width: 767px) {
    body {
        padding-top: 40px;
    }

    .header {
        height: 40px;
        padding: 0 10px;
    }

    .header__navigation {
        justify-content: space-between;
        width: 100%;
    }

    .header__text {
        display: none;
    }

    .page-title {
        width: calc(100% - 10px * 2);
        font-size: 48px;
        margin-top: 12px;
    }

    .page-title__button {
        font-size: 48px;
    }

    .page-title~.flexible-content,
    .page-title~.project-overview,
    .page-title~.image-overview {
        margin-top: 24px;
    }

    .project-overview {
        width: calc(100% - 10px * 2);
        grid-template-columns: repeat(6, 1fr);
        column-gap: 10px;
    }

    .project-overview__list__heading,
    .project-overview__list__item {
        grid-template-columns: repeat(6, 1fr);
        column-gap: 10px;
    }

    .project-overview__list__column:nth-child(1) {
        grid-column: span 3;
    }

    .project-overview__list__column:nth-child(2) {
        grid-column: span 2;
    }

    .project-overview__list__column:nth-child(3) {
        grid-column: span 1;
        text-align: right;
    }

    .image-overview {
        width: calc(100% - 10px * 2);
        column-count: 2;
        column-gap: 10px;
    }

    .gallery-item {
        margin-bottom: 10px;
    }

    .gallery-item__caption {
        display: none;
    }

    .gallery-load-sentinel {
        width: calc(100% - 10px * 2);
    }

    .mobile-project-overview {
        width: calc(100% - 10px * 2);
        grid-template-columns: repeat(6, 1fr);
        column-gap: 10px;
    }

    .mobile-project-overview__item {
        grid-column: span 3;
    }

    .text-holder-large p {
        font-size: 28px;
    }

    .text-holder-small p {
        font-size: 12px;
    }

    .footer {
        margin-top: 60px;
    }

    .footer__inner {
        width: calc(100% - 10px * 2);
        min-height: auto;
        padding-top: 10px;
        padding-bottom: 45px;
    }

    .footer__row {
        flex-direction: column;
    }

    .footer__row+.footer__row {
        margin-top: 60px;
    }

    .footer__row:nth-child(2) {
        flex-direction: column-reverse;
    }

    .footer__column {
        width: 100%;
    }

    .footer__column--disclaimer {
        margin-top: 120px;
    }

    .footer__column--disclaimer p {
        font-size: 12px;
    }

    .flexible-content__item {
        width: calc(100% - 10px * 2);
    }

    .flexible-content__item+.flexible-content__item--whitespace-s {
        margin-top: 10px;
    }

    .flexible-content__item+.flexible-content__item--whitespace-m {
        margin-top: 30px;
    }

    .flexible-content__item+.flexible-content__item--whitespace-l {
        margin-top: 60px;
    }

    .media__caption {
        grid-template-columns: repeat(6, 1fr);
        column-gap: 10px;
        margin-top: 10px;
    }

    .media__caption__text {
        grid-column: span 5;
    }

    .media__inner {
        grid-template-columns: repeat(6, 1fr);
        column-gap: 10px;
        row-gap: 10px;
    }

    .media--1-column .media__item,
    .media--2-column .media__item,
    .media--3-column .media__item,
    .media--4-column .media__item {
        grid-column: span 6;
    }

    .text__inner {
        grid-template-columns: repeat(6, 1fr);
        column-gap: 10px;
    }

    .text--1-column .text__item,
    .text--2-column .text__item,
    .text--3-column .text__item {
        grid-column: span 6;
    }

    .text .text__item.is-empty+.text__item>*:first-child {
        margin-top: 0;
    }

    .credits {
        grid-template-columns: repeat(6, 1fr);
        column-gap: 10px;
    }

    .credits>* {
        grid-column: span 6;
    }

    .project-page .flexible-content__item.media,
    .project-page .flexible-content__item.text,
    .project-page .flexible-content__item.project-intro,
    .project-page .flexible-content__item.credits {
        width: calc(100% - 10px * 2);
    }

    .project-page .media__inner {
        column-gap: 0;
        row-gap: 10px;
    }

    .project-page .media__inner > * {
        grid-column: 1 / -1 !important;
    }

    .project-page .flexible-content__item.media + .flexible-content__item.media.flexible-content__item--whitespace-l {
        margin-top: 10px;
    }

    .project-page .text__inner,
    .project-page .credits,
    .project-page .media__caption {
        column-gap: 0;
    }

    .project-page .text__inner > *,
    .project-page .credits>*,
    .project-page .media__caption > * {
        grid-column: 1 / -1 !important;
    }

    .project-page .flexible-content p {
        font-family: "Neue Montreal", sans-serif !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 1.1875 !important;
    }
}

/* ABOUT PAGE IMAGE */
.about-media {
    display: block;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 80px;
}

.about-media img {
    width: 100%;
    height: auto;
    display: block;
}

/* IMAGE OVERVIEW HOVER STATES */
.image-overview__item {
    transition: opacity 0.35s ease, filter 0.2s ease;
}