/* HobokenWeekend Top 5: intentionally dependency-free and mobile-first. */
.hw5-app,
.hw5-app * { box-sizing: border-box; }

.hw5-app {
  --hw-ink:#111214;
  --hw-muted:#70747b;
  --hw-line:#e8e9ec;
  --hw-soft:#f5f5f3;
  --hw-accent:#ff4d2e;
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:18px 14px 28px;
  color:var(--hw-ink);
  background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.hw5-header { padding:8px 4px 20px; }
.hw5-brandline { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:13px; }
.hw5-brand { font-size:11px; line-height:1; font-weight:850; letter-spacing:.16em; }
.hw5-week { flex:none; padding:7px 10px; border-radius:999px; background:var(--hw-ink); color:#fff; font-size:10px; line-height:1; font-weight:800; letter-spacing:.08em; }
.hw5-header h2 { margin:0; max-width:680px; font-size:clamp(34px,8.5vw,62px); line-height:.94; letter-spacing:-.055em; font-weight:900; }
.hw5-header p { margin:13px 0 0; max-width:560px; color:var(--hw-muted); font-size:15px; line-height:1.5; }

.hw5-list { display:grid; gap:14px; }
.hw5-card { overflow:hidden; border:1px solid var(--hw-line); border-radius:22px; background:#fff; box-shadow:0 8px 30px rgba(17,18,20,.055); }
.hw5-media,.hw5-no-media { position:relative; overflow:hidden; background:#e9e9e7; }
.hw5-media { aspect-ratio:16/10; }
.hw5-card-featured .hw5-media { aspect-ratio:4/3; }
.hw5-no-media { min-height:96px; background:linear-gradient(145deg,#18191c,#2c2e32); }
.hw5-image { width:100%; height:100%; display:block; object-fit:cover; }
.hw5-number { position:absolute; top:12px; left:12px; display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:rgba(17,18,20,.94); color:#fff; font-size:17px; font-weight:900; letter-spacing:-.04em; box-shadow:0 4px 18px rgba(0,0,0,.18); }
.hw5-tag { position:absolute; top:14px; right:12px; max-width:60%; padding:7px 9px; border-radius:999px; background:rgba(255,255,255,.94); color:#17181a; font-size:9px; line-height:1; font-weight:850; letter-spacing:.09em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; backdrop-filter:blur(10px); }

.hw5-content { padding:18px 17px 17px; }
.hw5-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px 14px; margin-bottom:7px; color:var(--hw-accent); font-size:11px; line-height:1.2; font-weight:850; letter-spacing:.075em; text-transform:uppercase; }
.hw5-meta span + span { position:relative; }
.hw5-meta span + span:before { content:""; position:absolute; left:-8px; top:50%; width:3px; height:3px; margin-top:-1.5px; border-radius:50%; background:#c6c8cc; }
.hw5-content h3 { margin:0; font-size:clamp(24px,6vw,32px); line-height:1.02; letter-spacing:-.035em; font-weight:880; }
.hw5-venue { display:flex; align-items:center; gap:6px; margin-top:9px; color:#4e5258; font-size:13px; font-weight:650; }
.hw5-venue svg { width:15px; height:15px; flex:0 0 15px; fill:currentColor; }
.hw5-desc { margin:11px 0 0; color:#656970; font-size:14px; line-height:1.52; }
.hw5-button { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; margin-top:15px; padding:0 15px 0 16px; border-radius:14px; background:var(--hw-ink); color:#fff !important; text-decoration:none !important; font-size:11px; line-height:1; font-weight:850; letter-spacing:.075em; transition:transform .16s ease, opacity .16s ease; -webkit-tap-highlight-color:transparent; }
.hw5-button:hover { color:#fff !important; opacity:.92; transform:translateY(-1px); }
.hw5-button:active { transform:translateY(0) scale(.99); }
.hw5-button svg { width:20px; height:20px; fill:currentColor; }

.hw5-footer { display:flex; align-items:center; justify-content:center; gap:7px; padding:23px 0 2px; color:#9a9da3; font-size:9px; font-weight:750; letter-spacing:.13em; }
.hw5-footer strong { color:#222326; font-weight:900; }

@media (min-width:640px) {
  .hw5-app { padding:30px 22px 38px; }
  .hw5-header { padding:10px 4px 26px; }
  .hw5-card:not(.hw5-card-featured) { display:grid; grid-template-columns:44% 1fr; min-height:250px; }
  .hw5-card:not(.hw5-card-featured) .hw5-media { aspect-ratio:auto; min-height:100%; }
  .hw5-card:not(.hw5-card-featured) .hw5-no-media { min-height:100%; }
  .hw5-card:not(.hw5-card-featured) .hw5-content { display:flex; flex-direction:column; justify-content:center; }
  .hw5-card:not(.hw5-card-featured) .hw5-button { align-self:stretch; }
}

@media (prefers-reduced-motion:reduce) {
  .hw5-button { transition:none; }
}

/* Lightweight no-login attendance control. */
.hw5-attend-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:13px; padding-top:12px; border-top:1px solid var(--hw-line); }
.hw5-attend { appearance:none; display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:0 12px; border:1px solid #dfe1e5; border-radius:999px; background:#fff; color:#2d3035; font:inherit; font-size:10px; line-height:1; font-weight:850; letter-spacing:.055em; cursor:pointer; transition:background .15s ease,border-color .15s ease,transform .15s ease; -webkit-tap-highlight-color:transparent; }
.hw5-attend svg { width:16px; height:16px; fill:currentColor; }
.hw5-attend:hover { background:#f7f7f6; border-color:#cfd2d7; }
.hw5-attend:active { transform:scale(.98); }
.hw5-attend.is-attending { background:#eef8f1; border-color:#cde6d3; color:#17652c; }
.hw5-attend.is-loading { opacity:.65; cursor:wait; }
.hw5-attend:disabled.is-attending { opacity:1; cursor:default; }
.hw5-attend-count { min-width:0; color:#85898f; font-size:11px; line-height:1.25; text-align:right; }
.hw5-attend-count strong { color:#383b40; font-weight:850; }

@media (max-width:380px) {
  .hw5-attend-row { align-items:flex-start; flex-direction:column; gap:8px; }
  .hw5-attend-count { text-align:left; }
}

@media (prefers-reduced-motion:reduce) {
  .hw5-attend { transition:none; }
}