@font-face {
  font-family: "Jost";
  src: url("assets/fonts/jost-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --ink: #171717;
  --muted: #979797;
  --line: #e7e7e7;
  --accent: #171717;
  --placeholder: #f0f0ee;
  --page: min(1440px, calc(100vw - 64px));
  --site-font: "Jost", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  color-scheme: light;
  font-family: var(--site-font);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--site-font); font-weight: 300; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.site-header {
  width: var(--page);
  margin: 0 auto;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { font-size: 15px; font-weight: 400; letter-spacing: .075em; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.site-nav a, .site-nav button, .filter-button, .text-button {
  border: 0;
  background: none;
  padding: 7px 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .095em;
}
.site-nav a[aria-current="page"], .filter-button.active { color: var(--accent); border-bottom: 1px solid currentColor; }

main { width: var(--page); margin: 0 auto; min-height: calc(100vh - 180px); }
.page-enter { animation: enter .35s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }

.eyebrow { color: var(--accent); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.home-sequence { width: min(980px, 100%); margin: 0 auto; display: grid; gap: clamp(48px, 7vw, 104px); }
.home-photo { margin: 0; width: 76%; position: relative; }
.home-photo:nth-child(2n) { justify-self: end; width: 58%; }
.home-photo:nth-child(3n) { justify-self: start; width: 88%; }
.home-photo[data-size="large"] { width: 100%; }
.home-photo[data-size="medium"] { width: 62%; justify-self: center; }
.home-photo[data-size="small"] { width: 48%; }
.home-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: center; }
.home-pair .home-photo { width: 100%; justify-self: stretch; }
.home-photo button { border: 0; padding: 0; width: 100%; background: none; cursor: zoom-in; text-align: left; }
.home-photo img, .project-card-cover img, .gallery-item img { display: block; width: 100%; height: auto; }
.home-photo:hover .photo-project-hint, .home-photo button:focus-visible .photo-project-hint { opacity: 1; }
.photo-project-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 7px 9px;
  background: rgba(245,242,236,.9);
  font-size: 10px;
  letter-spacing: .08em;
  opacity: 0;
  transition: opacity .2s ease;
}

.image-placeholder { position: relative; overflow: hidden; background: var(--placeholder); }
.image-placeholder::after { content: ""; position: absolute; inset: 0; background: var(--image); }
.ratio-landscape { aspect-ratio: 16/10; }
.ratio-wide { aspect-ratio: 2/1; }
.ratio-portrait { aspect-ratio: 3/4; }
.ratio-square { aspect-ratio: 1; }

.work-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 30px 0 34px; }
h1, .project-title { margin: 0; font-family: inherit; font-size: clamp(34px, 5vw, 66px); font-weight: 400; letter-spacing: .025em; line-height: 1; }
.filters { display: grid; gap: 11px; justify-items: end; }
.filter-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.filter-row.secondary { color: var(--muted); }
.category-introduction { max-width: 760px; margin: 0 0 42px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.empty-projects { grid-column: 1 / -1; margin: 0; padding: 70px 0; color: var(--muted); font-size: 14px; letter-spacing: .04em; }

.project-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 42px 26px; align-items: start; }
.project-card { min-width: 0; width: 100%; }
.project-card[data-cover-orientation="landscape"] { grid-column: span 3; }
.project-card[data-cover-orientation="compact"] { grid-column: span 2; }
.project-card a { display: block; }
.project-card-cover { width: 100%; position: relative; }
.project-card[data-meta-layout="side"] { grid-column: 1 / -1; }
.project-card[data-meta-layout="side"] a { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr); column-gap: 26px; align-items: stretch; }
.project-card[data-meta-layout="side"] .project-card-cover { grid-column: 1; }
.project-card[data-meta-layout="side"] .project-card-info { grid-column: 2; align-self: end; }
.project-card[data-meta-layout="side"] .project-card-title { margin-top: 0; }
.project-card-title { margin: 11px 0 4px; font-size: 14px; font-weight: 300; letter-spacing: .025em; }
.project-card-meta { color: var(--muted); font-size: 10px; font-weight: 300; letter-spacing: .06em; line-height: 1.4; }
.pending-cover { min-height: 250px; aspect-ratio: 4/3; background: var(--placeholder); display: grid; place-items: center; padding: 24px; text-align: center; }
.pending-cover strong { display: block; font: 500 21px/1.2 inherit; }
.pending-cover span { display: block; margin-top: 16px; color: var(--muted); font-size: 10px; line-height: 1.6; letter-spacing: .09em; text-transform: uppercase; }
.status-label { position: absolute; left: 9px; bottom: 9px; z-index: 2; padding: 6px 8px; background: rgba(245,242,236,.92); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }

.project-header { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; padding: 34px 0 66px; }
.project-summary { max-width: 570px; }
.project-summary p { margin: 22px 0 0; color: var(--muted); font: 16px/1.65 inherit; }
.project-meta { color: var(--muted); margin-top: 13px; font-size: 11px; letter-spacing: .055em; text-transform: uppercase; }
.project-gallery { width: min(1000px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(56px, 7vw, 88px); align-items: start; }
.project-hero { display: block; width: 100%; margin: 0 0 24px; }
.project-hero img { display: block; width: 100%; height: auto; }
.project-hero[data-layout="contained"] { width: min(760px, 100%); margin: 0 auto 24px; }
.gallery-item { min-width: 0; margin: 0; }
.gallery-item.is-landscape { grid-column: 1 / -1; }
.gallery-item.is-full-width { grid-column: 1 / -1; width: var(--page); justify-self: center; }
.project-gallery .landscape-wide { width: 100%; justify-self: center; }
.project-gallery .landscape-left { width: 76%; justify-self: start; }
.project-gallery .landscape-right { width: 76%; justify-self: end; }
.project-gallery .landscape-medium { width: 88%; justify-self: center; }
.project-gallery .is-full-width { width: var(--page); justify-self: center; }
.project-gallery[data-layout="uniform"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.project-gallery[data-layout="uniform"][data-count="2"] { width: min(680px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-gallery[data-layout="uniform"] .gallery-item.is-landscape,
.project-gallery[data-layout="uniform"] .gallery-item.is-portrait { grid-column: auto; width: 100%; justify-self: stretch; }
@media (min-width: 561px) {
  .project-header + .project-gallery > .gallery-item:first-child.is-portrait {
    grid-column: 1 / -1;
    width: 46%;
    justify-self: center;
  }
  .project-header + .project-gallery[data-layout="uniform"] > .gallery-item:first-child.is-portrait {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }
}
.gallery-button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.project-facts { font-size: 11px !important; letter-spacing: .06em; text-transform: uppercase; }
.project-credits { display: grid; gap: 7px; margin-top: 24px; color: var(--muted); font-size: 11px; letter-spacing: .06em; line-height: 1.5; text-transform: uppercase; }
.project-credits a, .external-project-link { width: fit-content; border-bottom: 1px solid currentColor; }
.external-project-link { display: inline-block; margin-top: 26px; padding-bottom: 3px; font-size: 11px; letter-spacing: .08em; }
.external-media { min-height: 360px; display: grid; place-items: center; gap: 22px; padding: 36px; background: var(--placeholder); text-align: center; }
.external-media img { display: block; width: min(100%, 1100px); height: auto; }
.external-media > span { font-size: clamp(28px, 5vw, 60px); font-weight: 300; }
.external-media strong { border-bottom: 1px solid currentColor; padding-bottom: 4px; font-size: 11px; font-weight: 300; letter-spacing: .09em; }
.project-video-frame { width: min(1000px, 100%); aspect-ratio: 16 / 9; margin: 0 auto clamp(56px, 7vw, 88px); background: #171717; color: #fff; }
.project-video-frame video { display: none; width: 100%; height: 100%; object-fit: contain; background: #000; }
.project-video-frame.is-ready video { display: block; }
.project-video-pending { height: 100%; display: grid; place-content: center; gap: 14px; padding: 28px; text-align: center; background: var(--placeholder); color: var(--ink); }
.project-video-frame.is-ready .project-video-pending { display: none; }
.project-video-pending strong { font-size: clamp(20px, 3vw, 34px); font-weight: 500; }
.project-video-pending span { max-width: 560px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.pending-page { min-height: 390px; display: grid; place-items: center; padding: 60px 20px; text-align: center; background: var(--placeholder); }
.pending-page strong { font: 500 clamp(28px, 4vw, 48px)/1.1 inherit; }
.pending-page span { display: block; color: var(--muted); margin-top: 17px; line-height: 1.6; }
.project-navigation { display: flex; justify-content: space-between; padding: 50px 0 0; color: var(--muted); font-size: 11px; }

.about { max-width: 920px; padding: 56px 0; }
.about p {
  font-family: inherit;
  font-size: clamp(26px, 4.5vw, 36px);
  font-weight: 500;
  line-height: 1.18;
}
.about-note { color: var(--muted); font-size: 18px; line-height: 1.6; max-width: 560px; }

.site-footer { width: var(--page); margin: 80px auto 0; padding: 28px 0 34px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 10px; }
.footer-links { display: flex; gap: 19px; }

.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; border: 0; padding: 0; margin: 0; background: rgba(18,18,17,.96); color: #fff; }
.lightbox[open] { display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; }
.lightbox::backdrop { background: rgba(18,18,17,.96); }
.lightbox-stage { width: min(1100px, 100%); margin: auto; display: grid; justify-items: center; gap: 20px; }
.lightbox-image { width: min(85vw, 1100px); height: min(78vh, 780px); background-position: center; background-repeat: no-repeat; background-size: contain; }
.lightbox-project-link { border-bottom: 1px solid currentColor; padding-bottom: 3px; font-size: 11px; letter-spacing: .08em; }
.lightbox-close, .lightbox-arrow { border: 0; background: none; color: #fff; cursor: pointer; }
.lightbox-close { position: fixed; top: 20px; right: 25px; font-size: 30px; }
.lightbox-arrow { font-size: 22px; min-height: 64px; }

@media (max-width: 900px) {
  :root { --page: calc(100vw - 36px); }
  .site-header { min-height: 76px; align-items: flex-start; padding-top: 22px; }
  .site-nav { gap: 13px; flex-wrap: wrap; }
  .work-heading, .project-header { display: block; }
  .filters { margin-top: 24px; justify-items: start; }
  .filter-row { justify-content: flex-start; gap: 13px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 14px; }
  .project-card[data-cover-orientation="landscape"] { grid-column: span 2; }
  .project-card[data-cover-orientation="compact"] { grid-column: auto; }
  .project-card[data-meta-layout="side"] a { column-gap: 14px; }
  .project-summary { margin-top: 24px; }
  .project-gallery { column-gap: 12px; }
}

@media (max-width: 560px) {
  .brand { font-size: 13px; }
  .site-header { display: grid; grid-template-columns: 1fr auto; align-items: start; }
  .site-nav { gap: 10px; }
  .site-nav a, .site-nav button { font-size: 9px; }
  .home-sequence { gap: 46px; }
  .home-pair { grid-template-columns: 1fr; gap: 46px; }
  .home-photo, .home-photo:nth-child(2n), .home-photo:nth-child(3n), .home-photo[data-size] { width: 100%; }
  .photo-project-hint { opacity: 1; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card[data-cover-orientation="landscape"] { grid-column: auto; }
  .project-card[data-cover-orientation="compact"] { grid-column: auto; }
  .project-card[data-meta-layout="side"] { grid-column: auto; }
  .project-card[data-meta-layout="side"] a { display: block; }
  .project-gallery { grid-template-columns: 1fr; }
  .project-gallery[data-layout="uniform"],
  .project-gallery[data-layout="uniform"][data-count="2"] { width: 100%; grid-template-columns: 1fr; gap: 32px; }
  .gallery-item.is-landscape { grid-column: auto; }
  .gallery-item.is-full-width { grid-column: auto; width: 100%; }
  .project-gallery { row-gap: 46px; }
  .project-gallery .gallery-item { width: 100%; justify-self: stretch; }
  .project-header { padding-bottom: 40px; }
  .about p { font-size: 28px; line-height: 1.22; }
  .about-note { font-size: 13px; line-height: 1.7; }
  .site-footer { display: block; }
  .footer-links { margin-top: 17px; }
  .lightbox[open] { grid-template-columns: 42px 1fr 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page-enter { animation: none; }
  .photo-project-hint { transition: none; }
}