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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  color: #111111;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Background name ── */

.bg-name {
  animation: fadeIn 1.2s ease 0.2s both;
  position: fixed;
  top: -0.1em;
  right: -0.05em;
  font-size: 11vw;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #000;
  opacity: 1;
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  z-index: 1;
  line-height: 0.9;
  text-align: right;
}

/* ── Navigation ── */

nav {
  animation: fadeIn 0.8s ease 0.1s both;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  pointer-events: none;
}

.nav-link {
  pointer-events: auto;
  color: #111111;
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.nav-link:hover {
  opacity: 1;
}

.nav-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ── Space ── */

.space {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Vignette */
.space::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 100%
  );
  pointer-events: none;
  z-index: 50;
}

/* ── Center title ── */

.center-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 60;
  pointer-events: none;
  user-select: none;
}

.center-title h1 {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  white-space: nowrap;
}

.center-title p {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-top: 8px;
  white-space: nowrap;
}

.center-title .center-desc {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.55;
  margin-top: 16px;
  max-width: 42vw;
  white-space: normal;
  line-height: 1.5;
}

.contact-links {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.contact-link {
  color: #111;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.contact-link:hover {
  opacity: 1;
}

/* ── Contact page ── */

.contact-headline {
  position: absolute;
  z-index: 20;
  left: 5vw;
  top: 10vh;
  font-weight: 900;
  text-transform: lowercase;
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: #111;
  font-size: clamp(20px, 3vw, 34px);
  pointer-events: none;
  user-select: none;
}

body.contact-page .nav-link {
  text-transform: lowercase;
  font-weight: 700;
  color: #111;
  opacity: 1;
}

.contact-arrow {
  position: absolute;
  z-index: 20;
  right: 6vw;
  top: 9vh;
  width: 28px;
  height: 28px;
}

.contact-info {
  position: absolute;
  z-index: 20;
  left: 5vw;
  top: 48vh;
  width: 90vw;
}

.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.contact-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: #111;
  opacity: 1;
}

.contact-value {
  color: #111;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.contact-socials {
  position: absolute;
  z-index: 20;
  left: 5vw;
  top: 62vh;
  display: flex;
  gap: 48px;
}

.contact-social {
  color: #111;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  opacity: 1;
  transition: opacity 0.2s;
}

.contact-social:hover {
  opacity: 0.6;
}

/* ── Editorial project spread ── */

.editorial-hero {
  position: absolute;
  overflow: hidden;
  z-index: 5;
  animation: fadeIn 0.9s ease 0.1s both;
}

.editorial-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.editorial-headline {
  position: absolute;
  z-index: 20;
  font-weight: 900;
  text-transform: lowercase;
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: #fff;
  mix-blend-mode: difference;
  font-size: clamp(30px, 4.4vw, 68px);
  pointer-events: none;
  user-select: none;
}

.editorial-quote {
  position: absolute;
  z-index: 20;
  font-weight: 900;
  text-transform: lowercase;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: #fff;
  mix-blend-mode: difference;
  font-size: clamp(16px, 2vw, 29px);
  pointer-events: none;
  user-select: none;
}

.editorial-date {
  position: absolute;
  z-index: 20;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0.6;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  pointer-events: none;
  user-select: none;
}

.editorial-body {
  position: absolute;
  z-index: 15;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.65;
  color: #222;
  text-align: justify;
}

.editorial-body p {
  margin-bottom: 1.2em;
}

.editorial-body p:last-child {
  margin-bottom: 0;
}

.project-page .img-item {
  cursor: zoom-in;
}

.project-page .img-item img {
  filter: none;
}

.editorial-index {
  position: absolute;
  z-index: 20;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}

/* ── Image items ── */

.img-item {
  position: absolute;
  cursor: grab;
  z-index: 10;
  will-change: transform;
  user-select: none;
  transition: box-shadow 0.25s ease;
}

.img-item:hover {
  z-index: 100;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.18);
}

.img-item.dragging {
  cursor: grabbing;
  z-index: 150;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
  transition: none;
}

.img-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  filter: blur(3px);
  transition: filter 0.3s ease;
}

.img-item:hover img {
  filter: blur(0);
}

/* Placeholder shown until real images are swapped in */
.placeholder {
  width: 100%;
  height: 100%;
  background: #e8e8e8;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder span {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.2s;
}

.img-item:hover .placeholder span {
  opacity: 1;
}

/* Fade-in on load */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.img-item {
  animation: fadeIn 0.8s cubic-bezier(0.45, 0, 0.55, 1) both;
}

/* ── Lightbox ── */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: zoom-out;
}

#lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

#lightbox-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#lightbox img {
  max-width: 82vw;
  max-height: 72vh;
  object-fit: contain;
  filter: none;
  pointer-events: none;
  display: block;
}

#lightbox-caption-wrap {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#lightbox-caption-wrap.visible {
  clip-path: inset(0 0 0% 0);
}

#lightbox-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid #111;
  padding: 10px 14px;
}

#lightbox-title {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #111;
}

.lightbox-link {
  display: none;
  pointer-events: auto;
  margin-left: auto;
  width: fit-content;
  background: #fff;
  color: #111;
  text-align: center;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  padding: 10px 14px;
  border: 1px solid #111;
  border-top: none;
  transition: opacity 0.2s;
}

.lightbox-link:hover {
  opacity: 0.6;
}

.lightbox-link.visible {
  display: block;
}

#lightbox-date {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #111;
  opacity: 0.4;
}

/* ── Work panel overlay ── */

#work-panel {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: #fff;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#work-panel.open {
  transform: translateY(0);
}

#work-nav {
  position: sticky;
  top: 0;
  animation: none;
  background: #fff;
  z-index: 10;
}

.work-list {
  padding: 112px 28px 80px;
  width: 100%;
}

.work-row {
  position: relative;
  display: grid;
  grid-template-columns: 520px 1fr;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  cursor: default;
  overflow: hidden;
}

.work-col-year,
.work-col-name,
.work-col-desc {
  font-size: 20px;
  font-weight: 700;
}

.work-col-title {
  display: flex;
  align-items: baseline;
}

.work-col-title .work-col-year {
  width: 200px;
  flex-shrink: 0;
}

.work-col-title {
  position: relative;
  z-index: 1;
  justify-self: start;
  width: fit-content;
  color: #111;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 2px;
  transition: color 0.25s ease;
}

.work-col-desc {
  color: #111;
}

.work-col-title::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #111;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.work-row:not(.work-header):hover .work-col-title {
  color: #fff;
}

.work-row:not(.work-header):hover .work-col-title::before {
  transform: scaleX(1);
}

.work-header {
  border-bottom: 1px solid #111;
  padding-bottom: 10px;
}

.work-header .work-col-year,
.work-header .work-col-name,
.work-header .work-col-desc {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.4;
}

/* ── Work expand panel ── */

.work-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.work-row {
  border-bottom: none !important;
}

.work-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.work-expand.open {
  grid-template-rows: 1fr;
}

.work-expand-inner {
  overflow: hidden;
  position: relative;
}

.work-expand-images {
  display: flex;
  gap: 3px;
  height: 260px;
}

.work-expand-images img {
  flex: 1;
  min-width: 0;
  object-fit: cover;
  display: block;
}

.work-expand-text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20px 24px;
  max-width: 55%;
}

.work-expand-para {
  font-size: clamp(15px, 1.6vw, 26px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  mix-blend-mode: difference;
}

.work-view-link {
  pointer-events: auto;
  display: inline-block;
  margin-top: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 2px;
  mix-blend-mode: difference;
  transition: opacity 0.2s;
}

.work-view-link:hover {
  opacity: 0.6;
}

.work-row.expanded .work-col-title {
  color: #fff;
}

.work-row.expanded .work-col-title::before {
  transform: scaleX(1);
}


/* ── Mobile ── */

.mobile-msg { display: none; }

@media (max-width: 768px) {

  /* bg name */
  .bg-name {
    font-size: 20vw;
    filter: blur(4px);
  }

  /* nav */
  nav { padding: 14px 16px; }

  /* Images unblurred by default — no hover on mobile */
  .img-item img {
    filter: none !important;
  }

  /* Lightbox */
  #lightbox img {
    max-width: 95vw;
    max-height: 62vh;
  }

  #lightbox-caption { padding: 8px 10px; }

  #lightbox-title,
  #lightbox-date { font-size: 9px; }

  /* html itself is also locked to overflow:hidden in the base rules above —
     body's overflow-y alone can't make the page scroll unless html allows
     it too, since html is the actual outermost scrolling box. */
  html { overflow-y: auto; height: auto; }

  /* Project pages — ditch the desktop's fixed-viewport absolute spread
     for a plain stacked flow, so the page grows to fit every image and
     can actually scroll to reach all of it (see project.js: on mobile it
     skips all inline positioning and just appends elements in order). */
  body.project-page { overflow-y: auto; height: auto; }

  body.project-page .space {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding: 90px 5vw 60px;
  }

  /* !important throughout this block: if someone resizes the window (or
     toggles devtools device mode) to mobile width without a full reload,
     project.js has already set desktop inline positioning/sizing, and
     inline styles otherwise beat any stylesheet rule regardless of
     specificity. These have to win unconditionally or the layout breaks
     wherever the stale inline values kick in (typically the image
     gallery, since those get the most inline styling on desktop). */
  body.project-page .editorial-hero,
  body.project-page .editorial-headline,
  body.project-page .editorial-quote,
  body.project-page .editorial-body,
  body.project-page .img-item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 0 20px !important;
  }

  body.project-page .editorial-hero {
    height: 70vw !important;
    max-height: 60vh;
  }

  .editorial-headline { font-size: clamp(26px, 8vw, 40px); }
  .editorial-quote    { font-size: clamp(14px, 4vw, 18px); }
  .editorial-date      { display: none; }

  body.project-page .editorial-body {
    max-height: none !important;
    font-size: 13px;
    line-height: 1.6;
  }

  /* Height comes from the image's own intrinsic ratio, not any
     JS-computed or "ar" metadata value — so it's correct even if that
     metadata is wrong, and even with stale desktop inline styles. */
  body.project-page .img-item {
    height: auto !important;
    cursor: default;
  }

  body.project-page .img-item img {
    height: auto !important;
  }

  /* A correctly mobile-nested index label lives inside its own .img-item.
     One that's a direct child of .space instead only exists because the
     script ran in desktop mode before a resize to mobile (no reload) —
     hide that stale copy rather than let it float at its old position. */
  body.project-page .space > .editorial-index {
    display: none !important;
  }

  body.project-page .img-item .editorial-index {
    top: 8px;
    left: 8px;
  }

  /* Contact page */
  body.contact-page { overflow-y: auto; height: auto; }
  body.contact-page .space { height: auto; min-height: 100vh; }

  .contact-headline { left: 6vw; top: 12vh; font-size: clamp(40px, 14vw, 72px); }
  .contact-arrow    { right: 8vw; top: 14vh; width: 32px; height: 32px; }
  .contact-info     { left: 6vw; top: 34vh; width: 88vw; }
  .contact-socials  { left: 6vw; top: 44vh; gap: 32px; flex-wrap: wrap; }

  /* Work page */
  .work-list { padding: 80px 16px 60px; }

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

  .work-col-title .work-col-year { width: 90px; }

  .work-col-desc { display: none; }

}