@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400&display=swap');

:root {
  --paper: #eeeae1;
  --paper-deep: #e8e3da;
  --ink: #171715;
  --muted: #66635d;
  --faint: #9a968e;
  --rule: rgba(23, 23, 21, .24);
  --pad-x: clamp(20px, 3.6vw, 58px);
  --max: 1520px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 12% 21%, rgba(0,0,0,.16) 0 .35px, transparent .7px),
    radial-gradient(circle at 72% 61%, rgba(0,0,0,.13) 0 .3px, transparent .65px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  box-shadow: inset 0 0 110px rgba(40,35,28,.035);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; }

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  padding: 28px var(--pad-x) 20px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  min-width: 0;
}
.brand-wordmark-image {
  display: block;
  width: clamp(205px, 19vw, 300px);
  height: auto;
  max-width: 52vw;
  opacity: .94;
}
.brand-descriptor {
  font-size: 7px;
  line-height: 1.35;
  letter-spacing: .22em;
  color: var(--muted);
  max-width: 82px;
  text-transform: uppercase;
  padding-top: 2px;
}
.nav { display: flex; gap: clamp(18px, 2.8vw, 48px); align-items: center; }
.nav a {
  position: relative;
  padding: 4px 0 8px;
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav a span { margin-right: 9px; color: var(--faint); font-size: 7px; }
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--ink);
  transition: right .22s ease;
}
.nav a:hover, .nav a.active { color: var(--ink); }
.nav a:hover::after, .nav a.active::after { right: 0; }

.index-ruleline {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 10px;
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.archive-index,
.about-page,
.collection-intro,
.gallery,
.collection-end {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.archive-index { padding: clamp(72px, 9vw, 136px) var(--pad-x) 90px; }
.archive-entry { display: block; margin-top: 28px; }
.entry-info {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 26px;
  align-items: end;
  padding: 0 0 16px;
}
.entry-number {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--muted);
}
.entry-title-wrap { display: flex; gap: clamp(30px, 5vw, 90px); align-items: end; }
.entry-title {
  margin: 0;
  font-size: clamp(32px, 5.1vw, 84px);
  line-height: .98;
  letter-spacing: .035em;
  text-transform: uppercase;
  font-weight: 300;
}
.entry-subtitle {
  margin: 0 0 7px;
  max-width: 310px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.5;
  color: var(--muted);
}
.entry-count {
  font-size: 8px;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: 7px;
  white-space: nowrap;
}
.entry-image-wrap {
  margin: 0;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  overflow: hidden;
}
.entry-image {
  width: 100%;
  display: block;
  aspect-ratio: 1.63 / 1;
  object-fit: cover;
  filter: contrast(1.015) saturate(.92);
  transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.archive-entry:hover .entry-image { transform: scale(1.008); opacity: .94; }
.entry-image-wrap figcaption {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  margin-top: 10px;
  padding-top: 8px;
  font-size: 7px;
  letter-spacing: .16em;
  color: var(--muted);
}
.index-end {
  margin-top: 80px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 7px;
  letter-spacing: .16em;
  color: var(--faint);
}

.collection-intro { padding: clamp(66px, 8vw, 124px) var(--pad-x) clamp(60px, 7vw, 104px); }
.intro-rule { margin-bottom: clamp(48px, 7vw, 94px); }
.collection-title-grid {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(220px, 360px);
  gap: clamp(20px, 3.4vw, 56px);
  align-items: end;
}
.collection-id { font-size: 10px; letter-spacing: .2em; color: var(--muted); padding-bottom: 8px; }
.collection-title-main {
  margin: 0;
  font-size: clamp(45px, 8.1vw, 128px);
  line-height: .83;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 300;
}
.collection-description {
  margin: 0 0 6px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--muted);
}

.gallery {
  padding: 0 var(--pad-x) clamp(96px, 12vw, 180px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(14px, 2.1vw, 34px);
  row-gap: clamp(68px, 10vw, 158px);
}
.gallery-item { margin: 0; cursor: zoom-in; }
.gallery-item img { width: 100%; height: auto; display: block; transition: opacity .28s ease; }
.gallery-item:hover img { opacity: .92; }
.gallery-item figcaption {
  border-top: 1px solid var(--rule);
  margin-top: 9px;
  padding-top: 7px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 7px;
  letter-spacing: .17em;
  color: var(--muted);
  text-transform: uppercase;
}
.hero { grid-column: 1 / 13; }
.g2 { grid-column: 7 / 13; }
.g3 { grid-column: 1 / 8; }
.g4 { grid-column: 6 / 13; }
.g5 { grid-column: 1 / 11; }
.g6 { grid-column: 5 / 13; }
.detail { grid-column: 3 / 8; }
.g8 { grid-column: 1 / 12; }
.g9 { grid-column: 6 / 13; }
.g10 { grid-column: 1 / 9; }

.collection-end {
  margin-bottom: 62px;
  padding: 10px var(--pad-x) 0;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 30px;
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.collection-end a:hover { color: var(--ink); }

.about-page { padding: clamp(72px, 9vw, 136px) var(--pad-x) clamp(100px, 14vw, 210px); }
.about-grid {
  margin-top: clamp(56px, 8vw, 120px);
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
}
.about-index {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 8px;
  letter-spacing: .17em;
  color: var(--muted);
}
.about-content { max-width: 960px; }
.about-lede {
  margin: 0;
  max-width: 930px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(31px, 4.4vw, 70px);
  line-height: 1.13;
  font-weight: 300;
  letter-spacing: -.022em;
}
.about-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 6vw, 100px);
  margin-top: clamp(58px, 7vw, 110px);
  max-width: 900px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.about-body p {
  margin: 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.65;
  color: var(--muted);
}
.about-body .about-tag {
  grid-column: 2;
  margin-top: 48px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: .18em;
  color: var(--ink);
}

.site-footer {
  margin: 0 var(--pad-x);
  padding: 12px 0 28px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 7px;
  letter-spacing: .17em;
  color: var(--muted);
  text-transform: uppercase;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: #11110f;
  color: #e8e4dc;
}
.lightbox.open { display: flex; animation: lightboxIn .18s ease both; }
@keyframes lightboxIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox img {
  max-width: calc(100vw - 180px);
  max-height: calc(100vh - 110px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox-topline {
  position: absolute;
  top: 0; left: 26px; right: 26px;
  min-height: 54px;
  border-bottom: 1px solid rgba(232,228,220,.22);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  letter-spacing: .17em;
  color: rgba(232,228,220,.64);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 8px;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: 14px;
}
.lightbox-close { margin-right: -14px; }
.lightbox-prev { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-next { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-count {
  position: absolute;
  left: 26px;
  bottom: 21px;
  font-size: 8px;
  letter-spacing: .18em;
  color: rgba(232,228,220,.7);
}

@media (max-width: 820px) {
  .site-header { padding-top: 21px; padding-bottom: 17px; }
  .brand { gap: 0; }
  .brand-descriptor { display: none; }
  .brand-wordmark { font-size: 12px; gap: 9px; letter-spacing: .09em; }
  .nav { gap: 14px; }
  .nav a { font-size: 8px; letter-spacing: .11em; }
  .nav a span { display: none; }

  .archive-index, .about-page, .collection-intro { padding-top: 62px; }
  .index-ruleline { font-size: 6.5px; }
  .index-ruleline span:last-child { display: none; }
  .entry-info { grid-template-columns: 34px 1fr; gap: 13px; align-items: start; }
  .entry-title-wrap { display: block; }
  .entry-title { font-size: clamp(30px, 11vw, 54px); }
  .entry-subtitle { margin-top: 14px; font-size: 14px; }
  .entry-count { grid-column: 2; margin-top: 7px; }
  .entry-image { aspect-ratio: 4 / 3; }

  .collection-title-grid { grid-template-columns: 34px 1fr; gap: 14px; }
  .collection-id { padding-top: 6px; }
  .collection-title-main { font-size: clamp(48px, 17vw, 88px); }
  .collection-description { grid-column: 2; margin-top: 24px; max-width: 88%; }

  .gallery { display: block; }
  .gallery-item { width: 100%; margin-bottom: 64px; }
  .gallery-item.detail { width: 100%; margin-left: 0; margin-right: 0; }
  .gallery-item figcaption { font-size: 6.5px; }

  .about-grid { grid-template-columns: 34px 1fr; gap: 14px; }
  .about-lede { font-size: clamp(29px, 8.5vw, 47px); }
  .about-body { grid-template-columns: 1fr; gap: 26px; }
  .about-body .about-tag { grid-column: 1; margin-top: 24px; }

  .site-footer { font-size: 6px; }
  .site-footer span:last-child { display: none; }

  .lightbox img { max-width: 100vw; max-height: calc(100vh - 118px); }
  .lightbox-topline { left: 18px; right: 18px; font-size: 6.5px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 10px; transform: none; }
  .lightbox-prev { left: 5px; }
  .lightbox-next { right: 5px; }
  .lightbox-count { left: 50%; transform: translateX(-50%); bottom: 24px; }
}


/* v3 brand refinement */
@media (max-width: 700px) {
  .site-header { gap: 18px; }
  .brand { align-items: flex-start; gap: 11px; }
  .brand-wordmark-image { width: 178px; max-width: 48vw; }
  .brand-descriptor { font-size: 6px; max-width: 68px; letter-spacing: .16em; }
}


/* v3.3 — mobile viewport / overflow fix */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 820px) {
  .site-header,
  main,
  .collection-intro,
  .gallery,
  .collection-end {
    width: 100%;
    max-width: 100%;
  }

  .collection-title-grid {
    min-width: 0;
  }

  .collection-title-grid > * {
    min-width: 0;
  }

  .collection-title-main {
    /* Keep the longest word inside the actual phone viewport.
       17vw was wide enough to create horizontal overflow on some phones. */
    font-size: clamp(42px, 13.2vw, 68px);
    line-height: .86;
    letter-spacing: 0;
    max-width: 100%;
  }

  .collection-description {
    max-width: 100%;
  }

  .gallery img {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 390px) {
  .collection-title-main {
    font-size: clamp(40px, 12.7vw, 52px);
  }
}


/* v3.4 — second collection + expanded galleries */
.archive-entry-secondary {
  margin-top: clamp(82px, 10vw, 150px);
}

.g11 { grid-column: 5 / 13; }

/* After Dark has its own sequence rhythm while retaining the archive system */
.gallery-after-dark .ad1  { grid-column: 1 / 13; }
.gallery-after-dark .ad2  { grid-column: 1 / 10; }
.gallery-after-dark .ad3  { grid-column: 6 / 13; }
.gallery-after-dark .ad4  { grid-column: 1 / 8; }
.gallery-after-dark .ad5  { grid-column: 5 / 13; }
.gallery-after-dark .ad6  { grid-column: 1 / 8; }
.gallery-after-dark .ad7  { grid-column: 4 / 13; }
.gallery-after-dark .ad8  { grid-column: 1 / 8; }
.gallery-after-dark .ad9  { grid-column: 6 / 13; }
.gallery-after-dark .ad10 { grid-column: 1 / 10; }
.gallery-after-dark .ad11 { grid-column: 5 / 13; }
.gallery-after-dark .ad12 { grid-column: 1 / 11; }

@media (max-width: 820px) {
  .archive-entry-secondary { margin-top: 82px; }
  .gallery-after-dark .gallery-item,
  .gallery .g11 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}


/* v3.7 — Thug Life + Worlds Apart */
.gallery-thug-life .tl1  { grid-column: 1 / 13; }
.gallery-thug-life .tl2  { grid-column: 1 / 9; }
.gallery-thug-life .tl3  { grid-column: 9 / 13; }
.gallery-thug-life .tl4  { grid-column: 1 / 8; }
.gallery-thug-life .tl5  { grid-column: 6 / 13; }
.gallery-thug-life .tl6  { grid-column: 1 / 7; }
.gallery-thug-life .tl7  { grid-column: 5 / 13; }
.gallery-thug-life .tl8  { grid-column: 1 / 8; }
.gallery-thug-life .tl9  { grid-column: 4 / 13; }
.gallery-thug-life .tl10 { grid-column: 1 / 9; }
.gallery-thug-life .tl11 { grid-column: 7 / 13; }

.gallery-worlds-apart .wa1 { grid-column: 1 / 13; }
.gallery-worlds-apart .wa2 { grid-column: 1 / 10; }
.gallery-worlds-apart .wa3 { grid-column: 6 / 13; }
.gallery-worlds-apart .wa4 { grid-column: 1 / 8; }
.gallery-worlds-apart .wa5 { grid-column: 5 / 13; }
.gallery-worlds-apart .wa6 { grid-column: 1 / 9; }
.gallery-worlds-apart .wa7 { grid-column: 6 / 13; }
.gallery-worlds-apart .wa8 { grid-column: 1 / 10; }
.gallery-worlds-apart .wa9 { grid-column: 4 / 13; }

@media (max-width: 820px) {
  .gallery-thug-life .gallery-item,
  .gallery-worlds-apart .gallery-item {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}


/* v3.8 — gallery cleanup */
.gallery-item figcaption.number-only {
  justify-content: flex-start;
}