body.events-page { overflow-x: hidden; }
/* ============================================================
   BLACK MARKET DISPENSARY · SEPTEMBER EVENTS
   Interactive translation of the approved cream/ink/leaf print system.
   ============================================================ */

:root {
  --paper: #e3e0d9;
  --paper-hi: #efede7;
  --paper-deep: #cbc8bf;
  --paper-ink: #101010;
  --leaf: #38b048;
  --leaf-deep: #187830;
}

.events-page main {
  color: var(--paper-ink);
  background:
    radial-gradient(1100px 700px at 88% 0%, rgba(56, 176, 72, 0.11), transparent 62%),
    radial-gradient(800px 600px at 0% 50%, rgba(16, 16, 16, 0.045), transparent 70%),
    var(--paper);
}

.events-page .nav-links a.active {
  color: var(--neon);
  border-color: var(--neon);
}

.events-page button { font: inherit; }

.event-kicker {
  font-family: var(--mono);
  font-size: clamp(0.68rem, 1.15vw, 0.84rem);
  font-weight: 700;
  letter-spacing: 0.19em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--leaf-deep);
}

.paper-noise {
  position: absolute;
  inset: 0;
  opacity: 0.23;
  pointer-events: none;
  background:
    repeating-linear-gradient(11deg, transparent 0 7px, rgba(16, 16, 16, 0.018) 8px 9px),
    repeating-linear-gradient(99deg, transparent 0 12px, rgba(255, 255, 255, 0.12) 13px 14px);
  mix-blend-mode: multiply;
}

.paper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 2px solid var(--paper-ink);
  padding: 0.95rem 1.35rem;
  background: transparent;
  color: var(--paper-ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.paper-btn:hover,
.paper-btn:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 var(--leaf);
  outline: none;
}

.paper-btn-solid {
  background: var(--paper-ink);
  color: var(--paper-hi);
}

.paper-btn-light {
  border-color: var(--paper-hi);
  color: var(--paper-hi);
}

/* ---------- hero ---------- */

.ehero {
  position: relative;
  min-height: min(900px, 100dvh);
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, 0.94fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
  overflow: hidden;
  padding: clamp(8rem, 14vh, 10rem) var(--pad) clamp(4rem, 9vh, 7rem);
  border-bottom: 3px solid var(--paper-ink);
}

.ehero::after {
  content: "09";
  position: absolute;
  right: -0.045em;
  bottom: -0.22em;
  z-index: 0;
  font-family: var(--disp);
  font-size: clamp(18rem, 43vw, 42rem);
  font-weight: 900;
  line-height: 0.75;
  color: rgba(16, 16, 16, 0.035);
  pointer-events: none;
}

.ehero-copy,
.poster-stack { position: relative; z-index: 2; }

.ehero h1 {
  max-width: 9ch;
  margin: 1rem 0 1.4rem;
  font-family: var(--disp);
  font-size: clamp(3.35rem, 8.4vw, 8.3rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.78;
  text-transform: uppercase;
}

.ehero h1 em {
  display: inline-block;
  color: var(--leaf-deep);
  font-size: 0.47em;
  font-style: italic;
  letter-spacing: -0.035em;
  line-height: 0.9;
}

.ehero-lede {
  max-width: 49ch;
  font-size: clamp(1rem, 1.6vw, 1.28rem);
  font-weight: 600;
  line-height: 1.55;
}

.ehero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0 2.3rem;
}

.ehero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--paper-ink);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.ehero-facts span:not(:last-child)::after {
  content: " ·";
  color: var(--leaf-deep);
}

.poster-stack {
  min-height: clamp(420px, 58vw, 660px);
  perspective: 1400px;
}

.poster {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(54%, 330px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 3px solid var(--paper-ink);
  background: var(--paper-hi);
  box-shadow: 14px 18px 0 rgba(16, 16, 16, 0.9);
}

.poster img { width: 100%; height: 100%; object-fit: cover; }
.poster-back { transform: translate(-92%, -53%) rotate(-9deg); }
.poster-mid { transform: translate(-39%, -53%) rotate(7deg); }
.poster-front { transform: translate(-58%, -46%) rotate(-1deg); }

/* ---------- labor strip ---------- */

.deal-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.6rem) var(--pad);
  background: var(--leaf-deep);
  color: var(--paper-hi);
  border-bottom: 3px solid var(--paper-ink);
}

.deal-alert .event-kicker { color: var(--paper-ink); }
.deal-alert h2 { font-family: var(--disp); font-size: clamp(1.8rem, 4vw, 4rem); line-height: 0.9; }
.deal-alert p:last-child { margin-top: 0.4rem; font-weight: 650; }
.deal-alert-date { font-family: var(--disp); font-size: clamp(2.5rem, 7vw, 6.4rem); font-weight: 900; letter-spacing: -0.06em; line-height: 0.8; }

/* ---------- shared section heading ---------- */

.lineup,
.month,
.weekly { padding: clamp(4.5rem, 9vw, 8rem) var(--pad); }

.lineup { border-bottom: 3px solid var(--paper-ink); }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head h2,
.weekly h2,
.event-cta h2 {
  font-family: var(--disp);
  font-size: clamp(3rem, 8vw, 7.2rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.8;
  text-transform: uppercase;
}

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.filter-btn {
  min-height: 42px;
  border: 2px solid var(--paper-ink);
  padding: 0.7rem 1rem;
  background: transparent;
  color: var(--paper-ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.filter-btn:hover,
.filter-btn:focus-visible,
.filter-btn.active {
  background: var(--paper-ink);
  color: var(--paper-hi);
  outline: none;
}

/* ---------- event cards ---------- */

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
}

.event-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  border: 2px solid var(--paper-ink);
  padding: 0;
  background: var(--paper-hi);
  color: var(--paper-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 8px 8px 0 rgba(16, 16, 16, 0.12);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.event-card:hover,
.event-card:focus-visible {
  transform: translate(-5px, -5px);
  box-shadow: 13px 13px 0 var(--leaf);
  outline: none;
}

.event-card[hidden] { display: none; }
.event-card-art { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-bottom: 2px solid var(--paper-ink); background: #d2cfc6; }
.event-card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s var(--ease-out); }
.event-card:hover .event-card-art img { transform: scale(1.025); }

.event-card-copy {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.event-card-date {
  margin-bottom: 0.75rem;
  color: var(--leaf-deep);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.event-card-copy strong {
  display: block;
  font-family: var(--disp);
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.94;
}

.event-card-copy > span:not(.event-card-date) { margin-top: 0.75rem; font-size: 0.86rem; font-weight: 600; line-height: 1.45; }
.event-card-copy i { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(16, 16, 16, 0.25); font-family: var(--mono); font-size: 0.67rem; font-style: normal; font-weight: 800; letter-spacing: 0.11em; }

/* ---------- calendar ---------- */

.month {
  background: var(--paper-hi);
  border-bottom: 3px solid var(--paper-ink);
}

.month-hint,
.calendar-swipe {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.calendar-scroll { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--leaf-deep) var(--paper-deep); }
.calendar-scroll:focus-visible { outline: 3px solid var(--leaf); outline-offset: 4px; }
.calendar-shell { min-width: 840px; border: 2px solid var(--paper-ink); }
.calendar-weekdays,
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { background: var(--paper-ink); color: var(--paper-hi); }
.calendar-weekdays span { padding: 0.85rem 0.55rem; border-right: 1px solid #454545; font-family: var(--mono); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; text-align: center; }

.calendar-pad,
.calendar-day {
  min-height: 150px;
  border: 0;
  border-right: 1px solid var(--paper-ink);
  border-bottom: 1px solid var(--paper-ink);
  background: transparent;
}

.calendar-pad { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(16, 16, 16, 0.06) 9px 10px); }

.calendar-day {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  padding: 0.62rem;
  color: var(--paper-ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.calendar-day:hover,
.calendar-day:focus-visible { position: relative; z-index: 2; background: #d8f0d9; box-shadow: inset 0 0 0 3px var(--leaf-deep); outline: none; }
.calendar-day.empty { cursor: default; }
.calendar-day.empty:hover { background: transparent; box-shadow: none; }
.calendar-num { display: flex; justify-content: space-between; align-items: start; font-family: var(--disp); font-size: 1.55rem; font-weight: 900; line-height: 1; }
.calendar-deal { border: 1px solid var(--leaf-deep); border-radius: 999px; padding: 0.2rem 0.38rem; color: var(--leaf-deep); font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.04em; }
.calendar-deal.hot { border-color: var(--leaf-deep); background: var(--leaf-deep); color: #fff; }
.calendar-chip { display: block; padding: 0.38rem 0.44rem; background: var(--leaf); color: var(--paper-ink); font-family: var(--mono); font-size: 0.61rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1.18; }
.calendar-chip.special { background: var(--paper-ink); color: var(--paper-hi); }
.calendar-chip.movie { border: 2px solid var(--leaf); background: transparent; color: var(--leaf-deep); }
.calendar-chip.rec { border: 1px solid var(--leaf-deep); background: transparent; color: var(--leaf-deep); }
.calendar-chip.dime { background: var(--leaf-deep); color: var(--paper-hi); }
.calendar-more { margin-top: auto; color: var(--leaf-deep); font-family: var(--mono); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; }
.calendar-swipe { display: none; margin-top: 1rem; text-align: center; }

/* ---------- weekly deals ---------- */

.weekly {
  display: grid;
  grid-template-columns: minmax(270px, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
  border-bottom: 3px solid var(--paper-ink);
}

.weekly-copy { position: sticky; top: 100px; }
.weekly-copy > p:not(.event-kicker) { max-width: 43ch; margin: 1.5rem 0 2rem; font-weight: 600; line-height: 1.6; }
.weekly-grid { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--paper-ink); }
.weekly-grid article { min-height: 205px; display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 0.2rem 0.65rem; padding: clamp(1rem, 2.5vw, 1.7rem); border-right: 1px solid var(--paper-ink); border-bottom: 1px solid var(--paper-ink); }
.weekly-grid article:nth-child(2n) { border-right: 0; }
.weekly-grid article:last-child { grid-column: 1 / -1; border-bottom: 0; }
.weekly-grid b { font-family: var(--disp); font-size: clamp(2.4rem, 4vw, 4.2rem); font-weight: 900; letter-spacing: -0.06em; line-height: 0.9; }
.weekly-grid > article > span { align-self: center; font-family: var(--mono); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; }
.weekly-grid strong { grid-column: 1 / -1; margin-top: 0.7rem; color: var(--leaf-deep); font-family: var(--disp); font-size: 1.1rem; font-style: italic; font-weight: 900; }
.weekly-grid p { grid-column: 1 / -1; font-size: 0.82rem; font-weight: 650; line-height: 1.4; }

/* ---------- visit CTA ---------- */

.event-cta {
  padding: clamp(5rem, 11vw, 10rem) var(--pad);
  background: var(--paper-ink);
  color: var(--paper-hi);
  text-align: center;
}

.event-cta .event-kicker { color: var(--leaf); }
.event-cta h2 { margin: 1.2rem 0 1.5rem; }
.event-cta > p:not(.event-kicker) { font-weight: 650; }
.event-cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.3rem; }
.event-cta .paper-btn { border-color: var(--paper-hi); color: var(--paper-hi); }

/* ---------- event dialog ---------- */

.event-dialog {
  width: min(920px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  border: 3px solid var(--paper-ink);
  padding: 0;
  background: var(--paper-hi);
  color: var(--paper-ink);
  box-shadow: 16px 16px 0 rgba(56, 176, 72, 0.88);
}

.event-dialog::backdrop { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(4px); }
.dialog-close { position: sticky; float: right; top: 0.8rem; right: 0.8rem; z-index: 4; width: 44px; height: 44px; margin: 0.8rem 0.8rem -52px 0; border: 2px solid var(--paper-ink); background: var(--paper-hi); color: var(--paper-ink); font-family: var(--disp); font-size: 2rem; font-weight: 900; line-height: 0.8; cursor: pointer; }
.dialog-close:hover,
.dialog-close:focus-visible { background: var(--paper-ink); color: var(--paper-hi); outline: none; }

.dialog-layout { display: grid; grid-template-columns: minmax(220px, 0.68fr) minmax(0, 1fr); }
.dialog-poster { min-height: 100%; border-right: 2px solid var(--paper-ink); background: var(--paper-ink); }
.dialog-poster img { width: 100%; height: 100%; object-fit: cover; }
.dialog-copy { padding: clamp(1.5rem, 4vw, 3.4rem); }
.dialog-copy .event-kicker { margin-bottom: 0.8rem; }
.dialog-copy h2 { max-width: 12ch; font-family: var(--disp); font-size: clamp(2.35rem, 6vw, 5.3rem); font-weight: 900; letter-spacing: -0.055em; line-height: 0.82; text-transform: uppercase; }
.dialog-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.3rem 0; }
.dialog-meta span { border: 1px solid var(--paper-ink); padding: 0.48rem 0.65rem; font-family: var(--mono); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.08em; }
.dialog-copy > p:not(.event-kicker) { font-weight: 600; line-height: 1.65; }
.dialog-note { margin-top: 1rem; color: #5f5d58; font-size: 0.83rem; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.8rem; }
.dialog-actions .paper-btn { flex: 1 1 150px; }

.dialog-day { padding: clamp(1.5rem, 4vw, 3.4rem); }
.dialog-day h2 { margin: 0.5rem 0 1.5rem; font-family: var(--disp); font-size: clamp(2.6rem, 7vw, 5.5rem); font-weight: 900; letter-spacing: -0.055em; line-height: 0.84; }
.dialog-day-list { display: grid; gap: 0.8rem; }
.dialog-day-item { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; padding: 1rem; border: 2px solid var(--paper-ink); }
.dialog-day-item strong { font-family: var(--disp); font-size: 1.15rem; font-weight: 900; line-height: 1; }
.dialog-day-item span { color: var(--leaf-deep); font-family: var(--mono); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; }
.dialog-day-item p { grid-column: 1 / -1; font-size: 0.84rem; font-weight: 600; line-height: 1.45; }
.dialog-day-item button { grid-column: 1 / -1; justify-self: start; border: 0; padding: 0; background: transparent; color: var(--leaf-deep); font-family: var(--mono); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.09em; cursor: pointer; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .ehero { grid-template-columns: 1fr; min-height: auto; }
  .ehero-copy { max-width: 760px; }
  .poster-stack { width: min(100%, 650px); margin: -1rem auto 0; }
  .event-grid { grid-template-columns: 1fr 1fr; }
  .weekly { grid-template-columns: 1fr; }
  .weekly-copy { position: static; }
}

@media (max-width: 720px) {
  .deal-alert { grid-template-columns: 1fr; text-align: center; }
  .deal-alert .paper-btn { justify-self: center; }
  .section-head { align-items: start; flex-direction: column; }
  .event-grid { grid-template-columns: 1fr; }
  .event-card { grid-template-columns: minmax(125px, 39%) 1fr; grid-template-rows: 1fr; }
  .event-card-art { aspect-ratio: auto; min-height: 260px; border-right: 2px solid var(--paper-ink); border-bottom: 0; }
  .event-card-copy { min-height: 260px; }
  .calendar-swipe { display: block; }
  .month-hint { display: none; }
  .weekly-grid { grid-template-columns: 1fr; }
  .weekly-grid article,
  .weekly-grid article:nth-child(2n) { border-right: 0; }
  .weekly-grid article:last-child { grid-column: auto; }
  .dialog-layout { grid-template-columns: 1fr; }
  .dialog-poster { max-height: 48dvh; border-right: 0; border-bottom: 2px solid var(--paper-ink); }
  .dialog-poster img { object-position: top center; }
}

@media (max-width: 600px) {
  .events-page .nav-links { gap: 0.85rem; }
  .events-page .nav-links a { font-size: 0.58rem; letter-spacing: 0.08em; }
  .ehero { padding-top: 8.8rem; }
  .ehero { overflow-x: hidden; }
  .ehero-copy { min-width: 0; }
  .ehero h1 { max-width: none; font-size: clamp(2.6rem, 13.5vw, 5rem); }
  .ehero::after { font-size: 60vw; }
  .poster-stack { min-height: 390px; }
  .poster { width: min(58%, 240px); box-shadow: 8px 10px 0 rgba(16, 16, 16, 0.9); }
  .poster-back { transform: translate(-94%, -50%) rotate(-8deg); }
  .poster-mid { transform: translate(-34%, -54%) rotate(6deg); }
  .poster-front { transform: translate(-56%, -45%) rotate(-1deg); }
  .event-card { grid-template-columns: 1fr; }
  .event-card-art { aspect-ratio: 4 / 5; min-height: 0; border-right: 0; border-bottom: 2px solid var(--paper-ink); }
  .event-card-copy { min-height: 170px; }
  .filter-bar { width: 100%; }
  .filter-btn { flex: 1; }
  .event-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); box-shadow: 7px 7px 0 rgba(56, 176, 72, 0.88); }
  .dialog-day-item { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .paper-btn,
  .event-card,
  .event-card-art img { transition: none; }
}