/* Work page */

.page-work { --header-ink: var(--sky); background: var(--cream); }

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

.work-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(10.5rem, 18vw, 16.5rem);
  color: var(--cream);
}

.work-hero__content { position: relative; z-index: 1; }

.work-hero__title {
  max-width: 34rem;
  margin-inline: auto;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.1vw, 2.75rem);
  line-height: 1.31;
  text-transform: uppercase;
  color: var(--sky);
}

.work-hero__body {
  margin: clamp(2rem, 4vw, 3.25rem) auto 0;
  max-width: 28rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.8;
}
.work-hero__body p + p { margin-top: 1.25rem; }

.work-hero__bottom {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 1440px;
  margin: clamp(-6rem, -8vw, 0rem) auto 0;
  padding-inline: clamp(1rem, 3.5vw, 3rem) clamp(1.5rem, 8vw, 8rem);
}

.work-hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-display);
  line-height: 1;
  color: var(--sky);
  white-space: nowrap;
  padding-bottom: clamp(0.75rem, 1.6vw, 1.75rem);
}

.work-hero__art {
  width: clamp(150px, 23vw, 330px);
  margin-bottom: clamp(1rem, 2vw, 2rem);
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .work-hero__bottom {
    flex-direction: column-reverse;
    align-items: stretch;
    margin-top: 1.5rem;
  }
  .work-hero__art { align-self: flex-end; width: min(42vw, 200px); margin-bottom: -1.5rem; }
  .work-hero__tagline { font-size: clamp(4rem, 21vw, 7rem); }
}

/* --- Client strip -------------------------------------------------------- */

.clients {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  --logo-scale: 1;
}

/* Scrolling client logos (same technique as the home hero marquee) */
.clients__marquee { overflow: hidden; }
.clients__track {
  display: flex;
  width: max-content;
  animation: clients-marquee 65s linear infinite;
}
.clients__marquee:hover .clients__track { animation-play-state: paused; }

.clients .clients__list {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(3rem, 7vw, 6.5rem);
  /* trailing space equals the gap so the loop has no visible seam */
  padding: 0 clamp(3rem, 7vw, 6.5rem) 0 0;
  list-style: none;
}

.client { flex: none; line-height: 0; }
.client img { display: block; height: auto; max-width: none; }

/* Widths tuned so the logos read at a similar visual weight */
.client--bartleys img   { width: calc(190px * var(--logo-scale)); }
.client--tanner img     { width: calc(282px * var(--logo-scale)); }
.client--lola img       { width: calc(220px * var(--logo-scale)); }
.client--pollys img     { width: calc(118px * var(--logo-scale)); }
.client--central img    { width: calc(280px * var(--logo-scale)); }
.client--henrys img     { width: calc(233px * var(--logo-scale)); }
.client--dutch img      { width: calc(112px * var(--logo-scale)); }
.client--nellies img    { width: calc(197px * var(--logo-scale)); }
.client--fernandos img  { width: calc(125px * var(--logo-scale)); }
.client--disco img      { width: calc(128px * var(--logo-scale)); }
.client--winnies img    { width: calc(108px * var(--logo-scale)); }
.client--fiddler img    { width: calc(122px * var(--logo-scale)); }
.client--haswell img    { width: calc(127px * var(--logo-scale)); }
.client--vida img       { width: calc(111px * var(--logo-scale)); }

@keyframes clients-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 760px) {
  .clients { --logo-scale: 0.7; }
}

/* --- Project rows -------------------------------------------------------- */

.projects { padding-bottom: clamp(3rem, 8vw, 7rem); }

.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  width: 100%;
  max-width: calc(1000px + var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(4rem, 9vw, 8rem) var(--gutter);
  scroll-margin-top: 1rem;
}

.project--flip { max-width: calc(1068px + var(--gutter) * 2); }
.project--flip .project__media { order: -1; }

.project__text { max-width: 25rem; }
.project--flip .project__text { justify-self: start; max-width: 23rem; }

.project__title {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1.15;
  text-transform: uppercase;
}
.project--flip .project__title { margin-top: 0; }
.project--flip .tags { margin-bottom: clamp(1.5rem, 3vw, 2rem); }

.project__body {
  margin-top: clamp(2rem, 5vw, 4rem);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.85;
}
.project--flip .project__body { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

.project .link-arrow { display: inline-block; margin-top: clamp(2rem, 4vw, 3.25rem); font-size: clamp(1.15rem, 1.5vw, 1.375rem); }

.project__media {
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 500 / 596;
  box-shadow: 0 12px 34px rgb(68 44 25 / 0.14);
}
.project--flip .project__media { aspect-ratio: 494 / 520; }
.project__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .project,
  .project--flip { grid-template-columns: 1fr; }
  .project--flip .project__media { order: 0; }
  .project__text,
  .project--flip .project__text { max-width: 34rem; }
  .project__media { max-width: 34rem; }
}

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

.gallery {
  --gallery-gap: clamp(1.25rem, 4vw, 4.25rem);
  --gallery-cols: 3;
  position: relative;
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 7vw, 6rem);
}

.gallery__viewport { position: relative; }

/* Paged track: three images per page, scrolled a page at a time */
.gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--gallery-gap) * (var(--gallery-cols) - 1)) / var(--gallery-cols));
  align-items: center;
  gap: var(--gallery-gap);
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }

.gallery__slide {
  scroll-snap-align: start;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 350 / 430;
  background: var(--cream);
}

.gallery__open {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  outline-offset: -4px;
}
.gallery__open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.gallery__open:hover img,
.gallery__open:focus-visible img { transform: scale(1.03); }

/* Prev / next arrows sit outside the track on wide screens */
.gallery__arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(245 237 227 / 0.55);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.gallery__arrow[hidden] { display: none; }
.gallery__arrow:hover,
.gallery__arrow:focus-visible { background: var(--cream); color: var(--cocoa); }
.gallery__arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.gallery__arrow--prev { right: calc(100% + 1.25rem); }
.gallery__arrow--next { left: calc(100% + 1.25rem); }

/* Page dots live in the section's bottom padding so the section height never changes */
.gallery__dots {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.gallery__dots[hidden] { display: none; }
.gallery__dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(245 237 227 / 0.35);
  cursor: pointer;
}
/* enlarge the tap target without changing the visual size */
.gallery__dot::after { content: ''; position: absolute; inset: -9px; }
.gallery__dot[aria-current='true'] { background: var(--cream); }

@media (max-width: 1240px) {
  /* not enough side room: overlay the arrows on the track edges */
  .gallery__arrow {
    width: 2.5rem;
    height: 2.5rem;
    background: rgb(68 44 25 / 0.72);
    border-color: transparent;
  }
  .gallery__arrow--prev { right: auto; left: 0.5rem; }
  .gallery__arrow--next { left: auto; right: 0.5rem; }
}

@media (max-width: 760px) {
  .gallery { --gallery-cols: 1; }
  .gallery__track { grid-auto-columns: 78%; }
}

/* --- Lightbox (full-size image pop-up) ----------------------------------- */

html.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 4vw, 3rem);
  border: 0;
  background: transparent;
  color: var(--cream);
  overflow: hidden;
}
.lightbox:not([open]) { display: none; }
.lightbox[open] {
  display: grid;
  place-items: center;
}
.lightbox::backdrop {
  background: rgb(34 21 11 / 0.92);
  backdrop-filter: blur(3px);
}

.lightbox__img {
  display: block;
  max-width: min(100%, 1400px);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.5);
  animation: lightbox-in 0.25s ease both;
}

.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(245 237 227 / 0.55);
  border-radius: 50%;
  background: rgb(68 44 25 / 0.6);
  color: var(--cream);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible { background: var(--cream); color: var(--cocoa); }

@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: none; }
}