.archive-page { background: #211724; color: #fff1d8; }
.archive-page .site-header { position: relative; }
.archive-page .brand { color: #fff1d8; }
.archive-page .header-right a { color: #fff1d8; }
.archive-page .header-right a:hover { color: #e8b575; }
.archive-main { min-height: 70vh; }
.archive-hero { position: relative; isolation: isolate; min-height: 410px; display: flex; align-items: end; padding: 72px clamp(24px, 6vw, 110px) 55px; background: radial-gradient(circle at 80% 25%, #70414f, #301e32 51%, #211724 90%); overflow: hidden; }
.archive-hero::before { content: ""; position: absolute; z-index: -1; width: min(55vw, 650px); aspect-ratio: 1; top: -150px; right: 1vw; background: url('/assets/supreme-mark.svg') center / contain no-repeat; filter: invert(78%) sepia(28%) saturate(562%) hue-rotate(333deg); opacity: .11; transform: rotate(-12deg); }
.archive-hero.has-cover { background-image: linear-gradient(90deg, rgba(27, 18, 31, .93) 0%, rgba(27, 18, 31, .76) 48%, rgba(27, 18, 31, .36) 100%), var(--archive-cover); background-position: center, center; background-size: cover; }
.archive-hero.event-hero.has-cover { background: #211724; }
.archive-hero.event-hero.has-cover::before { display: block; z-index: 0; inset: 0 0 0 auto; width: 78%; height: 100%; aspect-ratio: auto; background: var(--archive-cover) right center / cover no-repeat; filter: brightness(.64) saturate(.86); opacity: 1; transform: none; -webkit-mask-image: linear-gradient(101deg, transparent 4%, rgba(0, 0, 0, .3) 38%, rgba(0, 0, 0, .8) 74%, #000 100%); mask-image: linear-gradient(101deg, transparent 4%, rgba(0, 0, 0, .3) 38%, rgba(0, 0, 0, .8) 74%, #000 100%); }
.archive-hero.profile-hero.has-cover { min-height: 470px; background: #211724; }
.archive-hero.profile-hero.has-cover::before { display: block; z-index: 0; inset: 0 0 0 auto; width: 68%; height: 100%; aspect-ratio: auto; background: var(--archive-cover) right 28% / cover no-repeat; filter: brightness(.68) saturate(.9); opacity: 1; transform: none; -webkit-mask-image: linear-gradient(101deg, transparent 8%, rgba(0, 0, 0, .35) 42%, rgba(0, 0, 0, .85) 78%, #000 100%); mask-image: linear-gradient(101deg, transparent 8%, rgba(0, 0, 0, .35) 42%, rgba(0, 0, 0, .85) 78%, #000 100%); }
.archive-hero.profile-hero.artist-esquire::before,
.archive-hero.profile-hero.resident-dj-2hot::before { background-position: right 40%; }
.archive-hero.profile-hero.resident-igor-drago::before { background-position: right 38%; }
.archive-hero.profile-hero.resident-ayminho::before,
.archive-hero.profile-hero.resident-stephan-deutsch::before,
.archive-hero.profile-hero.resident-robert-zagorakis::before { width: min(55vw, 960px); background-size: auto 205%; background-position: right 42%; }
.archive-hero.profile-hero.resident-in2itive::before { width: min(47vw, 800px); background-image: linear-gradient(101deg, #211724 20%, rgba(33, 23, 36, .3) 48%, transparent 75%), var(--archive-cover); background-size: 100% 100%, auto 210%; background-position: center, right 5%; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(101deg, transparent 20%, rgba(0, 0, 0, .9) 42%, #000 75%); mask-image: linear-gradient(101deg, transparent 20%, rgba(0, 0, 0, .9) 42%, #000 75%); }
.archive-hero.profile-hero.resident-wantedman::before { background-position: right top; }
.archive-hero.profile-hero:not(.has-cover)::before { display: none; }
.archive-hero.has-cover::before { display: none; }
.archive-hero .intro { position: relative; z-index: 1; max-width: 1100px; }
.archive-eyebrow { display: block; margin-bottom: 19px; color: #f3b578; font: 700 12px var(--font-body); letter-spacing: .2em; text-transform: uppercase; }
.archive-hero h1 { margin: 0; font: 800 clamp(76px, 12vw, 205px)/.76 var(--font-display); letter-spacing: -.015em; text-transform: uppercase; text-wrap: balance; }
.archive-hero p { max-width: 630px; margin: 27px 0 0; color: #f7dfc6; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.5; }
.archive-hero .archive-id { position: absolute; right: clamp(24px, 6vw, 110px); bottom: 55px; color: #ffb77c; font: 800 clamp(80px, 14vw, 200px)/.8 var(--font-display); opacity: .68; }
.archive-subnav { display: flex; flex-wrap: wrap; gap: 7px; padding: 17px clamp(24px, 6vw, 110px); background: #b4533a; color: #fff5df; }
.archive-subnav a { padding: 7px 12px; font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: .09em; text-decoration: none; }
.archive-subnav a:hover, .archive-subnav a:focus-visible { background: #fff1d8; color: #412634; }
.archive-block { padding: 75px clamp(24px, 6vw, 110px) 110px; }
.archive-block.light { background: #f2d1a2; color: #281b2a; }
.archive-block.dark { background: #211724; color: #fff1d8; }
.archive-block h2 { margin: 0 0 36px; font: 800 clamp(48px, 6vw, 95px)/.88 var(--font-display); text-transform: uppercase; }
.archive-block .block-intro { max-width: 650px; margin: -14px 0 32px; font-size: 16px; line-height: 1.55; }
.archive-detail .block-intro a { color: #9e4131; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.archive-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.archive-tile { position: relative; display: flex; flex-direction: column; min-width: 0; background: #3a2841; color: #fff4df; text-decoration: none; transition: transform .25s ease; }
.archive-tile:hover { transform: translateY(-6px); }
.archive-tile .tile-photo, .archive-tile .tile-art { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.archive-tile .tile-photo { filter: sepia(.13) saturate(1.13) contrast(1.1); }
.archive-tile:hover .tile-photo { filter: none; }
.archive-tile .tile-art { display: grid; place-items: center; background: linear-gradient(135deg, #953f52, #483653 65%, #245f65); color: rgba(255, 221, 164, .72); font: 800 100px var(--font-display); }
.archive-tile:nth-child(4n+2) .tile-art { background: linear-gradient(135deg, #7d375b, #e37f4c); }
.archive-tile:nth-child(4n+3) .tile-art { background: linear-gradient(135deg, #1b6672, #763944); }
.archive-tile:nth-child(4n+4) .tile-art { background: linear-gradient(135deg, #9e6140, #302147); }
.archive-tile-body { display: flex; flex: 1; flex-direction: column; gap: 13px; min-height: 155px; padding: 18px; }
.archive-tile:nth-child(3n+1) .archive-tile-body { background: #813648; }
.archive-tile:nth-child(3n+2) .archive-tile-body { background: #58345e; }
.archive-tile:nth-child(3n+3) .archive-tile-body { background: #16616b; }
.archive-tile small { color: #ffe6c5; font: 700 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.archive-tile strong { font: 700 clamp(26px, 2.4vw, 38px)/.98 var(--font-display); text-transform: uppercase; }
.archive-tile em { margin-top: auto; color: #ffe6c5; font: normal 13px var(--font-body); }
.archive-list { display: grid; gap: 0; }
.archive-list-row { display: grid; grid-template-columns: 84px 120px minmax(0, 1fr) 220px 22px; align-items: center; gap: 15px; min-height: 86px; padding: 15px 0; border-top: 1px solid rgba(37, 24, 36, .25); text-decoration: none; }
.archive-list-row:last-child { border-bottom: 1px solid rgba(37, 24, 36, .25); }
.archive-list-row:hover { color: #a84533; }
.archive-list-row .num { color: #993b36; font: 800 19px var(--font-display); }
.archive-list-row time { font: 700 13px var(--font-body); }
.archive-list-row strong { font: 700 clamp(20px, 2vw, 29px)/1.05 var(--font-display); text-transform: uppercase; }
.archive-list-row .venue { font: 13px var(--font-body); }
.archive-artist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.archive-artist-card { display: flex; flex-direction: column; min-height: 240px; padding: 22px; background: #e8b575; color: #2b1c2c; text-decoration: none; }
.archive-artist-card:nth-child(2) { background: #d6785d; }
.archive-artist-card:nth-child(3) { background: #8fb8ac; }
.archive-artist-card:nth-child(4) { background: #b981a3; }
.archive-artist-card.resident-card { background: #502c49; color: #ffdfb5; }
.archive-artist-card.resident-card:nth-child(2n) { background: #235e68; }
.archive-artist-card.with-image { position: relative; isolation: isolate; overflow: hidden; color: #fff4df; background: #291d2f; }
.archive-artist-card.with-image::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(25, 16, 30, .42), rgba(25, 16, 30, .14) 32%, rgba(25, 16, 30, .89)); }
.archive-artist-photo { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.78) saturate(.6) contrast(1.15); transition: transform .5s ease, filter .4s ease; }
.archive-artist-card.artist-marko-liv .archive-artist-photo { object-position: 68% center; }
.archive-artist-card.resident-in2itive .archive-artist-photo { object-position: center 22%; }
.archive-artist-card.with-image:hover .archive-artist-photo, .archive-artist-card.with-image:focus-visible .archive-artist-photo { transform: scale(1.06); filter: none; }
.archive-artist-card.with-image small, .archive-artist-card.with-image strong, .archive-artist-card.with-image span { position: relative; z-index: 2; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.archive-artist-card small { font: 700 12px var(--font-body); letter-spacing: .14em; }
.archive-artist-card strong { margin: auto 0 0; font: 800 clamp(36px, 4vw, 66px)/.9 var(--font-display); text-transform: uppercase; }
.archive-artist-card span { margin-top: 18px; font-size: 12px; font-weight: 700; }
.archive-detail { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: clamp(24px, 5vw, 100px); align-items: start; }
.archive-detail .cover { width: 100%; max-height: 650px; object-fit: cover; object-position: center 40%; filter: sepia(.12) saturate(1.1); }
.archive-detail .cover.resident-cover-in2itive { object-position: center top; }
.artist-portrait-stage { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 540px; overflow: hidden; background: #302336; }
.artist-portrait-stage::before { content: ""; position: absolute; z-index: -1; inset: -55px; background: var(--portrait-image) center / cover; filter: blur(35px) brightness(.55) saturate(.85); }
.artist-portrait-stage img { display: block; width: min(320px, 78%); height: auto; box-shadow: 0 22px 90px rgba(0, 0, 0, .42); }
.archive-detail .cover-art { display: grid; place-items: center; min-height: 430px; background: linear-gradient(135deg, #bc6b4a, #673249 55%, #225e69); color: #f9dfa5; font: 800 clamp(130px, 20vw, 300px)/1 var(--font-display); }
.archive-facts { margin: 0; }
.archive-facts div { display: grid; grid-template-columns: 105px 1fr; gap: 18px; padding: 17px 0; border-top: 1px solid currentColor; }
.archive-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.archive-facts dd { margin: 0; font-size: 15px; }
.archive-facts a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.archive-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.artist-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.artist-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 11px; border: 1px solid rgba(40, 27, 42, .32); color: #281b2a; font: 700 11px var(--font-body); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: background .2s ease, color .2s ease; }
.artist-links a:hover, .artist-links a:focus-visible { background: #281b2a; color: #fff1d8; }
.artist-player { margin-top: 28px; }
.artist-player iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: 12px; }
.archive-pill { display: inline-flex; align-items: center; min-height: 43px; padding: 10px 15px; background: #b4533a; color: white; font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.archive-pill.secondary { background: #573450; }
.archive-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.archive-photo-grid a { display: block; overflow: hidden; background: #493046; }
.archive-photo-grid img { width: 100%; aspect-ratio: 4/3; display: block; object-fit: cover; filter: sepia(.7) saturate(.62) contrast(1.12); transition: transform .3s ease, filter .3s ease; }
.archive-photo-grid a:hover img, .archive-photo-grid a:focus-visible img { transform: scale(1.04); filter: none; }
.archive-lightbox { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 20px 68px; border: 0; background: rgba(19, 13, 24, .96); color: #fff1d8; }
.archive-lightbox::backdrop { background: rgba(19, 13, 24, .95); }
.archive-lightbox::after { content: ""; position: fixed; inset: 0; background: url('/assets/editorial/grain.png') repeat; opacity: .36; mix-blend-mode: soft-light; pointer-events: none; }
.archive-lightbox[open] { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 12px; }
.archive-lightbox figure { min-width: 0; margin: 0; text-align: center; }
.archive-lightbox figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 92px); margin: auto; object-fit: contain; }
.archive-lightbox figcaption { padding-top: 10px; font: 700 12px var(--font-body); letter-spacing: .16em; }
.archive-lightbox button { border: 0; background: transparent; color: #fff1d8; cursor: pointer; font: 300 52px/1 var(--font-body); }
.archive-lightbox button:hover, .archive-lightbox button:focus-visible { color: #e8b575; }
.archive-lightbox-close { position: absolute; top: 11px; right: 25px; }
.archive-promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.archive-promo-grid a { display: block; color: #ffdfb5; text-decoration: none; }
.archive-promo-grid img { display: block; width: 100%; aspect-ratio: 2.4; object-fit: cover; }
.archive-promo-grid span { display: block; padding: 12px 0; font: 700 12px var(--font-body); letter-spacing: .1em; }
.archive-empty { padding: 36px; border: 1px solid rgba(255, 238, 215, .35); color: #ffe2bd; }
.archive-breadcrumb { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 38px; color: #f4bb83; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.archive-breadcrumb a { text-underline-offset: 4px; }
.archive-page .site-footer { min-height: 100px; }
@media (max-width: 1000px) { .archive-tiles, .archive-artist-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .archive-list-row { grid-template-columns: 60px 110px 1fr 20px; } .archive-list-row .venue { display: none; } }
@media (max-width: 700px) { .archive-page .site-header { height: auto; min-height: 74px; grid-template-columns: 1fr auto; padding: 12px 20px; } .archive-page .header-right { display: flex; grid-column: 1/-1; justify-content: space-between; gap: 10px; } .archive-page .header-cta { display: none; } .archive-hero { min-height: 340px; padding: 54px 22px 45px; } .archive-hero h1 { font-size: clamp(72px, 18vw, 118px); } .archive-hero .archive-id { right: 18px; bottom: 13px; font-size: 76px; opacity: .3; } .archive-block { padding: 55px 22px 65px; } .archive-tiles, .archive-artist-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .archive-tile-body { min-height: 140px; padding: 13px; } .archive-tile strong { font-size: 24px; } .archive-list-row { grid-template-columns: 54px 75px 1fr 12px; gap: 6px; min-height: 75px; } .archive-list-row strong { font-size: 20px; } .archive-list-row time { font-size: 11px; } .archive-detail { grid-template-columns: 1fr; } .archive-photo-grid { grid-template-columns: repeat(2, 1fr); } .archive-lightbox { padding: 36px 9px 12px; } .archive-lightbox[open] { grid-template-columns: 25px minmax(0, 1fr) 25px; gap: 2px; } .archive-lightbox button { font-size: 34px; } .archive-lightbox-close { top: 6px; right: 12px; } }
@media (max-width: 400px) { .archive-tiles, .archive-artist-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .archive-hero.event-hero.has-cover::before {
    width: 100%;
    background-position: right center;
    filter: brightness(.58) saturate(.82);
    -webkit-mask-image: linear-gradient(8deg, transparent 0%, rgba(0, 0, 0, .45) 42%, #000 100%);
    mask-image: linear-gradient(8deg, transparent 0%, rgba(0, 0, 0, .45) 42%, #000 100%);
  }
  .archive-hero.profile-hero.has-cover { min-height: 340px; }
  .archive-hero.profile-hero.has-cover::before {
    width: 100%;
    background-size: auto 112%;
    background-position: right top;
    filter: brightness(.78) saturate(.9);
    -webkit-mask-image: linear-gradient(8deg, transparent 0%, rgba(0, 0, 0, .3) 40%, #000 88%);
    mask-image: linear-gradient(8deg, transparent 0%, rgba(0, 0, 0, .3) 40%, #000 88%);
  }
  .archive-hero.profile-hero.resident-ayminho::before { background-size: cover; }
  .archive-hero.profile-hero.resident-in2itive::before {
    background-image: linear-gradient(90deg, #211724 0%, #211724 28%, rgba(33, 23, 36, .35) 62%, transparent 100%), var(--archive-cover);
    background-size: 100% 100%, auto 130%;
    background-position: center, right top;
  }
}