/* ==========================================================================
   SUNNY inc. — WORKS index + lightbox
   ========================================================================== */

.sn-index {
  padding: calc(var(--sn-header-h) + clamp(54px, 7vw, 104px)) var(--sn-gutter) clamp(70px, 8vw, 120px);
}
.sn-index__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4.4vw, 60px);
}

.sn-index__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding-bottom: clamp(14px, 2vw, 26px);
  border-bottom: 1px solid var(--sn-rule-strong);
}
.sn-index__titles { display: flex; flex-direction: column; gap: 14px; }
.sn-index h1 {
  margin: 0;
  font-size: clamp(40px, 7vw, 104px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.94;
}
.sn-index__note {
  font-family: var(--sn-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--sn-ink-62);
  padding-bottom: 8px;
}

/* --- justified rows ------------------------------------------------------ */

.sn-index__rows { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 32px); }
.sn-index__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(18px, 2.2vw, 32px);
}

/* --ar / --basis are set per card by works.js from the work's own proportions,
   so the phone breakpoint below can override the layout in one place. */
.sn-card {
  flex: var(--ar) 1 var(--basis);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: opacity 0.25s ease;
}
.sn-card:hover, .sn-card:focus-visible { opacity: 0.85; }
.sn-card__media {
  position: relative;
  display: block;
  aspect-ratio: var(--ar);
  background: var(--sn-mute);
  overflow: hidden;
}
/* filling the box leaves no strip of the placeholder showing around the media */
.sn-card__media img,
.sn-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sn-card__label { display: flex; align-items: baseline; gap: 10px; }
.sn-card__num { font-family: var(--sn-mono); font-size: 10px; color: var(--sn-ink-62); }
.sn-card__title { font-size: 13.5px; font-weight: 500; }

.sn-index__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: clamp(20px, 3vw, 36px);
  border-top: 1px solid var(--sn-rule-strong);
}
.sn-index__back {
  font-family: var(--sn-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--sn-ink-50);
}

/* --- lightbox ------------------------------------------------------------ */

.sn-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgb(12, 12, 14);
  display: flex;
  flex-direction: column;
  animation: sn-fade 0.24s ease-out;
  transition: background 0.3s ease;
  color: var(--sn-paper);
}
.sn-lightbox[hidden] { display: none; }
.sn-lightbox.is-light { color: var(--sn-ink); }

.sn-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--sn-gutter);
  border-bottom: 1px solid var(--sn-paper-14);
}
.sn-lightbox.is-light .sn-lightbox__bar { border-bottom-color: var(--sn-rule-strong); }

.sn-lightbox__count {
  font-family: var(--sn-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--sn-paper-55);
}
.sn-lightbox.is-light .sn-lightbox__count { color: var(--sn-ink-62); }

.sn-lightbox button {
  background: none;
  border: 1px solid var(--sn-paper-28);
  color: inherit;
  font-family: var(--sn-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 12px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sn-lightbox.is-light button { border-color: rgba(23, 25, 28, 0.28); }
.sn-lightbox button:hover,
.sn-lightbox button:focus-visible { background: var(--sn-paper); color: var(--sn-ink); }
.sn-lightbox.is-light button:hover,
.sn-lightbox.is-light button:focus-visible { background: var(--sn-ink); color: var(--sn-paper); }

.sn-lightbox__scroll {
  flex: 1;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 56px) var(--sn-gutter);
  overscroll-behavior: contain;
}
.sn-lightbox__inner {
  max-width: 842px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.sn-lightbox__shots { display: flex; flex-direction: column; gap: 32px; }
.sn-shot {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.28);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sn-lightbox.is-light .sn-shot { background-color: rgba(23, 25, 28, 0.06); }
.sn-shot--tall { max-width: min(100%, 420px); margin: 0 auto; }
.sn-shot--portrait { max-width: min(100%, 640px); margin: 0 auto; }

.sn-lightbox video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #1b1d21;
}

.sn-lightbox h2 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
}
.sn-lightbox.is-light h2 { color: var(--sn-ink); }

.sn-lightbox__nav { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.sn-lightbox__nav button { padding: 13px 18px; }

/* --- phone ---------------------------------------------------------------
   Below 768px the works pair up, two to a row (see SN_WORKS_ROWS_NARROW).
   flex-basis: 0 with flex-grow set to each work's ratio divides the row
   exactly in proportion, so both thumbnails end up the SAME HEIGHT with
   their tops and bottoms aligned — and neither one is cropped. */

@media (max-width: 767px) {
  .sn-index__rows { gap: 22px; }

  .sn-index__row {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .sn-card {
    flex: var(--ar) 1 0;
    min-width: 0;
  }

  .sn-card__title { font-size: 12.5px; }
}