/* ================================ 
   OJEE — PROJECTS ARCHIVE 
================================ */ 
 
:root { 
  color-scheme: dark; 
  --bg: #080808; 
  --panel: #101010; 
  --text: #f2f2f2; 
  --muted: #777; 
  --line: rgba(255, 255, 255, 0.15); 
  --soft-line: rgba(255, 255, 255, 0.08); 
  --accent: #d8ff00; 
  --page-padding: clamp(22px, 4vw, 64px); 
} 
 
* { 
  box-sizing: border-box; 
} 
 
html { 
  min-height: 100%; 
  background: var(--bg); 
  scroll-behavior: smooth; 
} 
 
body { 
  min-height: 100vh; 
  margin: 0; 
  background: var(--bg); 
  color: var(--text); 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 13px; 
  -webkit-font-smoothing: antialiased; 
} 
 
body, 
button, 
input { 
  font-family: Arial, Helvetica, sans-serif; 
} 
 
a { 
  color: inherit; 
  text-decoration: none; 
} 
 
button, 
input { 
  color: inherit; 
} 
 
button:focus-visible, 
a:focus-visible, 
input:focus-visible { 
  outline: 1px solid var(--accent); 
  outline-offset: 4px; 
} 
 
[hidden] { 
  display: none !important; 
} 
 
/* HEADER */ 
 
.projects-header { 
  height: 76px; 
  padding: 0 var(--page-padding); 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  border-bottom: 1px solid var(--line); 
} 
 
.projects-logo { 
  font-size: 25px; 
  font-weight: 900; 
  letter-spacing: -1.8px; 
} 
 
.projects-logo span { 
  display: inline-block; 
  margin-left: 3px; 
  font-size: 9px; 
  vertical-align: top; 
  letter-spacing: 0; 
} 
 
.back-link { 
  color: var(--muted); 
  font-size: 10px; 
  letter-spacing: 1.6px; 
  transition: color 160ms ease; 
} 
 
.back-link:hover { 
  color: var(--text); 
} 
 
/* PAGE */ 
 
.projects-page { 
  width: 100%; 
  max-width: 1800px; 
  margin: 0 auto; 
  padding: 0 var(--page-padding) 60px; 
} 
 
/* CATEGORY NAVIGATION */ 
 
.projects-nav { 
  min-height: 72px; 
  display: flex; 
  align-items: center; 
  gap: clamp(24px, 4vw, 64px); 
  border-bottom: 1px solid var(--line); 
  overflow-x: auto; 
  scrollbar-width: none; 
} 
 
.projects-nav::-webkit-scrollbar { 
  display: none; 
} 
 
.projects-nav a { 
  position: relative; 
  display: inline-flex; 
  min-height: 72px; 
  align-items: center; 
  flex-shrink: 0; 
  color: #777; 
  font-size: 11px; 
  font-weight: 700; 
  letter-spacing: 1.5px; 
  transition: color 160ms ease; 
} 
 
.projects-nav a:hover, 
.projects-nav a.active { 
  color: var(--text); 
} 
 
.projects-nav a.active::after { 
  position: absolute; 
  right: 0; 
  bottom: -1px; 
  left: 0; 
  height: 2px; 
  background: var(--accent); 
  content: ""; 
} 
 
/* MAIN LAYOUT */ 
 
.projects-layout { 
  display: grid; 
  grid-template-columns: minmax(0, 1fr) 280px; 
  align-items: start; 
  gap: clamp(36px, 5vw, 80px); 
  padding-top: 42px; 
} 
 
.projects-content { 
  min-width: 0; 
} 
 
/* SECTION HEADING */ 
 
.section-heading { 
  padding: 12px 0 34px; 
  border-bottom: 1px solid var(--line); 
} 
 
.eyebrow { 
  color: var(--muted); 
  font-size: 9px; 
  font-weight: 700; 
  letter-spacing: 1.8px; 
  text-transform: uppercase; 
} 
 
.section-heading h1 { 
  margin: 19px 0 12px; 
  font-size: clamp(38px, 6vw, 76px); 
  line-height: 0.95; 
  font-weight: 900; 
  letter-spacing: -0.065em; 
} 
 
.section-heading p { 
  margin: 0; 
  color: #898989; 
  font-size: 12px; 
  line-height: 1.7; 
} 
 
/* ENTRY STATUS */ 
 
.content-status { 
  display: flex; 
  align-items: center; 
  gap: 9px; 
  padding: 20px 0; 
  color: var(--muted); 
  font-size: 9px; 
  letter-spacing: 1.5px; 
} 
 
.status-dot { 
  width: 6px; 
  height: 6px; 
  flex: 0 0 6px; 
  border-radius: 50%; 
  background: var(--accent); 
} 
 
/* CONTENT GRID */ 
 
.projects-grid { 
  display: grid; 
  grid-template-columns: repeat(2, minmax(0, 1fr)); 
  gap: 16px; 
} 
 
.empty-state { 
  grid-column: 1 / -1; 
  min-height: 290px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  border: 1px solid var(--soft-line); 
  background: 
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px), 
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px); 
  background-size: 32px 32px; 
  text-align: center; 
} 
 
.empty-mark { 
  margin-bottom: 16px; 
  color: var(--accent); 
  font-size: 26px; 
  font-weight: 300; 
} 
 
.empty-state p { 
  margin: 0 0 10px; 
  font-size: 11px; 
  font-weight: 700; 
  letter-spacing: 1.8px; 
} 
 
.empty-state > span:last-child { 
  color: var(--muted); 
  font-size: 9px; 
  letter-spacing: 1.1px; 
} 
 
/* RIGHT FILTER PANEL */ 
 
.filter-panel { 
  position: sticky; 
  top: 24px; 
  min-width: 0; 
  padding: 22px; 
  border: 1px solid var(--line); 
  background: var(--panel); 
} 
 
.panel-heading { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 12px; 
  padding-bottom: 22px; 
  border-bottom: 1px solid var(--line); 
} 
 
.panel-number { 
  color: #555; 
  font-size: 9px; 
  letter-spacing: 1px; 
} 
 
/* SEARCH */ 
 
.search-form { 
  padding: 24px 0; 
  border-bottom: 1px solid var(--line); 
} 
 
.search-form > label, 
.filter-group h2 { 
  display: block; 
  margin: 0 0 13px; 
  color: #929292; 
  font-size: 9px; 
  font-weight: 700; 
  letter-spacing: 1.5px; 
} 
 
.search-field { 
  display: flex; 
  width: 100%; 
  min-width: 0; 
  height: 42px; 
  border: 1px solid rgba(255, 255, 255, 0.2); 
  background: #080808; 
  transition: border-color 160ms ease; 
} 
 
.search-field:focus-within { 
  border-color: var(--accent); 
} 
 
.search-field input { 
  width: 100%; 
  min-width: 0; 
  padding: 0 11px; 
  border: 0; 
  outline: 0; 
  background: transparent; 
  font-size: 11px; 
} 
 
.search-field input::placeholder { 
  color: #626262; 
} 
 
.search-field button { 
  width: 42px; 
  flex: 0 0 42px; 
  border: 0; 
  background: transparent; 
  color: var(--accent); 
  font-size: 18px; 
  cursor: pointer; 
} 
 
/* FILTER GROUPS */ 
 
.filter-group { 
  padding: 23px 0; 
  border-bottom: 1px solid var(--line); 
} 
 
.filter-group h2 { 
  margin-bottom: 16px; 
} 
 
.filter-option, 
.sort-option { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  min-height: 32px; 
  color: #aaa; 
  font-size: 11px; 
  line-height: 1.5; 
  cursor: pointer; 
  transition: color 160ms ease; 
} 
 
.filter-option:hover, 
.sort-option:hover { 
  color: var(--text); 
} 
 
.filter-option input, 
.sort-option input { 
  width: 13px; 
  height: 13px; 
  flex: 0 0 13px; 
  margin: 0; 
  accent-color: var(--accent); 
  cursor: pointer; 
} 
 
.filter-option span, 
.sort-option > span:first-of-type { 
  min-width: 0; 
} 
 
.filter-note { 
  color: #626262; 
  font-size: 10px; 
  line-height: 1.7; 
} 
 
.filter-options { 
  display: flex; 
  flex-direction: column; 
  gap: 7px; 
} 
 
.sort-option { 
  justify-content: space-between; 
  gap: 10px; 
} 
 
.sort-option input { 
  order: 2; 
  margin-left: auto; 
} 
 
.sort-option > span:first-of-type { 
  order: 1; 
} 
 
.sort-indicator { 
  display: none; 
} 
 
.sort-option input:checked ~ .sort-indicator { 
  display: block; 
  width: 5px; 
  height: 5px; 
  flex: 0 0 5px; 
  border-radius: 50%; 
  background: var(--accent); 
  order: 3; 
} 
 
/* RESET */ 
 
.reset-filters { 
  display: flex; 
  width: 100%; 
  align-items: center; 
  justify-content: space-between; 
  margin-top: 20px; 
  padding: 12px 0 0; 
  border: 0; 
  background: transparent; 
  color: #888; 
  font-size: 9px; 
  font-weight: 700; 
  letter-spacing: 1.4px; 
  cursor: pointer; 
  transition: color 160ms ease; 
} 
 
.reset-filters:hover { 
  color: var(--text); 
} 
 
.reset-filters span { 
  font-size: 16px; 
} 
 
/* FOOTER */ 
 
.panel-footer { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  gap: 10px; 
  margin-top: 28px; 
  padding-top: 16px; 
  border-top: 1px solid var(--soft-line); 
  color: #555; 
  font-size: 8px; 
  letter-spacing: 1px; 
} 
 
/* ================================= 
   EVENTS ARCHIVE 
================================= */ 
 
.projects-grid:has(.event-card) { 
  grid-template-columns: minmax(0, 1fr); 
  gap: 28px; 
} 
 
.event-card { 
  min-width: 0; 
  overflow: hidden; 
  border: 1px solid var(--line); 
  background: #0c0c0c; 
} 
 
.event-image-link { 
  display: block; 
  overflow: hidden; 
  background: #151515; 
  aspect-ratio: 16 / 9; 
} 
 
.event-image { 
  display: block; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 450ms ease; 
} 
 
.event-image-link:hover .event-image { 
  transform: scale(1.025); 
} 
 
.event-card-content { 
  padding: 22px; 
} 
 
.event-meta { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 12px; 
  padding-bottom: 14px; 
  border-bottom: 1px solid var(--line); 
  color: #aaa; 
  font-size: 9px; 
  letter-spacing: 1.4px; 
} 
 
.event-artist { 
  margin: 22px 0 8px; 
  color: #aaa; 
  font-size: 11px; 
  letter-spacing: 1.5px; 
  text-transform: uppercase; 
} 
 
.event-title { 
  margin: 0; 
  font-size: clamp(23px, 4vw, 36px); 
  line-height: 1.08; 
  font-weight: 900; 
  letter-spacing: -0.045em; 
  overflow-wrap: anywhere; 
} 
 
.event-subtitle { 
  margin: 8px 0 24px; 
  color: #999; 
  font-size: 10px; 
  letter-spacing: 1.5px; 
} 
 
.event-description { 
  max-width: 720px; 
  color: #d0d0d0; 
  font-size: 12px; 
  line-height: 1.9; 
  overflow-wrap: anywhere; 
} 
 
.event-description p { 
  margin: 0 0 18px; 
} 
 
.event-description p:last-child { 
  margin-bottom: 0; 
} 
 
.event-details { 
  display: grid; 
  gap: 12px; 
  margin-top: 24px; 
  padding-top: 20px; 
  border-top: 1px solid var(--line); 
} 
 
.event-details p { 
  display: grid; 
  grid-template-columns: 110px minmax(0, 1fr); 
  gap: 12px; 
  margin: 0; 
  color: #ccc; 
  font-size: 11px; 
  line-height: 1.7; 
  overflow-wrap: anywhere; 
} 
 
.event-details p span { 
  color: #777; 
  font-size: 9px; 
  letter-spacing: 1.2px; 
} 
 
.event-ticket-link { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 12px; 
  margin-top: 24px; 
  padding: 15px 0; 
  border-top: 1px solid rgba(255, 255, 255, 0.25); 
  color: var(--text); 
  font-size: 10px; 
  font-weight: 700; 
  letter-spacing: 1.5px; 
  transition: color 160ms ease; 
} 
 
.event-ticket-link:hover { 
  color: var(--accent); 
} 
 
.event-ticket-link span { 
  color: var(--accent); 
  font-size: 16px; 
} 

/* GTA LOVE IMAGE — SHOW FULL IMAGE WITHOUT CROPPING */

.event-card:has(img[src*="past-event-ojee-kash-gta-love-launch"]) .event-image {
  object-fit: contain;
}
 
/* RESPONSIVE */ 
 
@media (min-width: 1500px) { 
  .projects-layout { 
    grid-template-columns: minmax(0, 1fr) 300px; 
  } 
 
  .filter-panel { 
    padding: 25px; 
  } 
} 
 
@media (max-width: 900px) { 
  .projects-layout { 
    grid-template-columns: minmax(0, 1fr) 250px; 
    gap: 28px; 
  } 
 
  .filter-panel { 
    padding: 18px; 
  } 
} 
 
@media (max-width: 650px) { 
  :root { 
    --page-padding: 20px; 
  } 
 
  .projects-header { 
    height: 64px; 
  } 
 
  .projects-nav { 
    min-height: 62px; 
    gap: 28px; 
  } 
 
  .projects-nav a { 
    min-height: 62px; 
    font-size: 10px; 
  } 
 
  .projects-layout { 
    grid-template-columns: minmax(0, 1fr); 
    gap: 34px; 
    padding-top: 28px; 
  } 
 
  .filter-panel { 
    position: static; 
    grid-row: 1; 
    padding: 20px; 
  } 
 
  .projects-content { 
    grid-row: 2; 
  } 
 
  .section-heading { 
    padding-top: 8px; 
  } 
 
  .section-heading h1 { 
    font-size: clamp(40px, 12vw, 64px); 
  } 
 
  .projects-grid { 
    grid-template-columns: minmax(0, 1fr); 
  } 
 
  .projects-grid:has(.event-card) { 
    grid-template-columns: minmax(0, 1fr); 
    gap: 20px; 
  } 
 
  .event-card-content { 
    padding: 16px; 
  } 
 
  .event-details p { 
    grid-template-columns: 86px minmax(0, 1fr); 
    gap: 8px; 
  } 
 
  .empty-state { 
    min-height: 230px; 
  } 
} 
 
@media (prefers-reduced-motion: reduce) { 
  *, 
  *::before, 
  *::after { 
    scroll-behavior: auto !important; 
    transition-duration: 0.01ms !important; 
    animation-duration: 0.01ms !important; 
  } 
}

/* PROJECTS PAGE FOOTER */
.projects-footer {
  position: relative;
  z-index: 1;
  padding: 24px 5% 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
}

.projects-copyright {
  color: rgba(255,255,255,.55);
  font-size: 9px;
  letter-spacing: 1px;
  text-align: center;
}

.projects-footer-logo {
  display: block;
  width: 180px;
  height: 116px;
  max-width: 100%;
  object-fit: contain;
  margin: 12px auto 0;
  opacity: .95;
}