@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Cormorant+Garamond:wght@500;600&display=swap');

:root {
  --bg: #FAFAF8;
  --card: #FFFFFF;
  --ink: #111111;
  --ink-soft: #6B6B68;
  --line: #E9E7E2;
  --accent: #E8952E;
  --accent-ink: #111111;
  --pill: #F0EFEA;
  --display: 'Inter', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }




* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- Header (pill nav) ---------- */

.header-wrap {
  padding: 20px 24px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(var(--bg) 60%, transparent);
}

header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--pill);
  max-width: 920px;
  margin: 0 auto;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: 0 6px 20px rgba(17,17,17,0.06);
}

.logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}

#auth-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
}

.auth-user { color: var(--accent); font-weight: 600; }

.login-form {
  display: flex;
  gap: 8px;
}

.login-form input {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 13px;
  width: 180px;
}

.login-status {
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---------- Buttons ---------- */

.btn {
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { background: var(--accent); color: var(--accent-ink); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-soft); background: transparent; transform: none; }

.btn-fab {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 60;
  padding: 15px 24px;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(17,17,17,0.22);
  font-size: 14px;
  font-weight: 700;
}

/* ---------- Layout ---------- */

main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 24px 100px;
}

#feed-section {
  scroll-margin-top: var(--header-h, 90px);
}

.page-title {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-size: 34px;
  margin: 6px 0 4px;
}

.page-sub {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 20px;
}

/* ---------- Category filter row ---------- */

.category-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 24px;
  scrollbar-width: none;
}
.category-row::-webkit-scrollbar { display: none; }

.cat-chip {
  flex: 0 0 auto;
  background: var(--card);
  border: 1.5px solid var(--line);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}
.cat-chip:hover { transform: translateY(-1px); border-color: var(--ink); }
.cat-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- New request panel (compact modal, hidden by default) ---------- */

.new-request-panel {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.4);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.new-request-panel.open { display: flex; opacity: 1; }

.new-request {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  transform: translateY(-10px);
  transition: transform 0.2s ease;
}
.new-request-panel.open .new-request { transform: translateY(0); }

.new-request h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 14px;
}

.panel-close {
  float: right;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink-soft);
}

.field-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.field-row > * { flex: 1; min-width: 140px; }

input, textarea, select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--body);
  font-size: 14px;
}

textarea { resize: vertical; min-height: 70px; }

/* The post name is a textarea so Enter starts a new line — people post song
   lyrics and poems, which need their line breaks. It still starts as a single
   line and grows with what's typed (see autoGrowTextarea in app.js). */
/* flex: none matters on phones: there each .field-row is a flex *column*,
   and the shared `flex: 1` (which lets inputs share a row on desktop) turns
   into a height rule — it pinned this box at one line, ignoring the height
   autoGrowTextarea sets, and overflow: hidden then made every line after the
   first invisible. */
#req-title { flex: none; min-height: 0; resize: none; overflow: hidden; line-height: 1.45; }

/* Names and details keep their typed line breaks everywhere they're shown,
   compact previews included — lyrics and poems are posted line by line and
   read wrong squashed into a paragraph. (.ticket-text-title, the post page
   title and the reel title set this on their own rules.) */
#board .ticket-title,
.trending-title,
.ig-grid-item-name,
.ticket-text-desc,
.request-detail p,
.reel-item-desc,
.solved-title,
.shop-title { white-space: pre-line; }

.field-hint {
  font-size: 11px;
  color: var(--ink-soft);
  margin: -4px 0 10px;
}

.upload-label {
  display: block;
  width: 100%;
  padding: 14px;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.upload-label:hover { border-color: var(--accent); color: var(--accent); }

#req-image-preview, #rec-image-preview {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: var(--pill);
  border-radius: 8px;
  margin-bottom: 10px;
}

/* ---------- Feed grid ---------- */

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 8px;
  gap: 10px;
  align-items: start;
}

.ticket-wrap {
  grid-row-end: span 30;
}

.ticket-wrap {
  position: relative;
}

.delete-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(17,17,17,0.75);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.15s ease;
}
.delete-btn:hover { background: #C93B3B; }
.ticket-wrap:has(.sponsored-badge) .delete-btn { top: 44px; }

.ticket {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ticket-wrap { opacity: 1; visibility: visible; }
.ticket:hover { opacity: 1; visibility: visible; }

.ticket.reveal {
  opacity: 1;
  transform: translateY(0);
}

.ticket:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(17,17,17,0.08);
  border-color: var(--ink);
}

.ticket:hover .ticket-image {
  filter: brightness(1.04);
}

.ticket-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ticket:hover .ticket-image > img {
  transform: scale(1.06);
}

.ticket-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background-color: var(--pill);
  margin-bottom: 14px;
  overflow: hidden;
}

.ticket-cat {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
  background: #FBEFDC;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
  display: inline-block;
}

.ticket-title {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 17px;
  margin: 0 0 8px;
  line-height: 1.25;
  color: #fff;
}

.ticket-desc {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ticket-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.ticket-budget { color: var(--accent); font-weight: 600; }

.ticket-song {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 5px;
}

.empty-state {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 13px;
  padding: 40px 0;
  text-align: center;
  grid-column: 1 / -1;
}

/* ---------- Request detail page ---------- */

.back-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 20px;
}
.back-link:hover { color: var(--accent); }

.request-detail {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  margin-bottom: 28px;
}

.request-detail h1 {
  white-space: pre-line;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 24px;
  margin: 0 0 12px;
}

.request-meta {
  display: flex;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 14px;
}

.rec-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 24px;
}

.rec-list { display: flex; flex-direction: column; gap: 12px; }

.rec-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  opacity: 0;
  transform: translateY(10px);
  transition: transform 0.25s ease, opacity 0.25s ease, border-color 0.2s ease;
}
.rec-card.reveal { opacity: 1; transform: translateY(0); }
.rec-card:hover { border-color: var(--ink); }

.rec-card.is-favorite { border-color: var(--accent); }

.rec-favorite-badge {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
  display: block;
}

.rec-note { font-size: 14px; margin: 0 0 10px; }

.rec-image {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.rec-image > img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
}

.rec-link {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  word-break: break-all;
}

.rec-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
}

.fav-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.fav-btn:hover { background: var(--accent); color: #fff; }

.rec-actions {
  display: flex;
  gap: 8px;
}

.delete-rec-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.delete-rec-btn:hover { border-color: #C93B3B; color: #C93B3B; }

.spotify-embed {
  border-radius: 12px;
  margin: 14px 0;
  overflow: hidden;
}

.sponsored-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.promote-box {
  background: var(--card);
  border: 1.5px dashed var(--accent);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  text-align: center;
}

.promote-hint {
  font-size: 13px;
  color: var(--accent);
  margin: 8px 0 0;
  font-weight: 600;
}

.promote-modal {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.promote-modal.open { display: flex; }

.promote-modal-inner {
  background: var(--card);
  border-radius: 16px;
  padding: 26px;
  max-width: 340px;
  width: 100%;
  position: relative;
}

/* ---------- Share-as-poster ---------- */

.share-row {
  display: flex;
  margin: 18px 0 6px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.share-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.share-modal {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.62);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 220;
  padding: 20px;
}
.share-modal.open { display: flex; }

.share-modal-inner {
  background: var(--card);
  border-radius: 18px;
  padding: 22px;
  max-width: 360px;
  width: 100%;
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
}

/* The poster is a tall 9:16 image — cap it by height so the whole thing is
   visible in the dialog instead of overflowing on short screens. */
.share-preview-shell {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 8px 0 14px;
  transition: opacity .18s ease;
}
.share-preview-shell.is-rendering { opacity: .45; }

.share-preview {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 58vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(17,17,17,0.18);
}

/* Segmented controls in the share dialog — one row for size (admin only),
   one for backdrop. */
.share-seg-row {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--pill);
  border-radius: 999px;
  margin-bottom: 10px;
}
.share-seg-row:last-of-type { margin-bottom: 14px; }
.share-seg-chip {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 9px 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.share-seg-chip.active {
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(17,17,17,0.10);
}

.share-actions {
  display: flex;
  gap: 10px;
}
.share-actions .btn { flex: 1; }
.share-hint { margin: 12px 0 0; text-align: center; }

/* The box hugs the photo instead of being a fixed frame the photo is fitted
   into. It used to be `width: 100%` + `object-fit: contain` over a near-black
   background, which letterboxed every photo whose shape didn't match the
   frame — a portrait post painted 305x528 of pixels inside a 305x568 element
   and the leftover 20px top and bottom showed as black bars. Sizing from the
   image's own dimensions (capped by the column width and 70vh) means the
   element is always exactly the size of the pixels, so there's no leftover
   area for a background to show through at any aspect ratio. */
.detail-image {
  position: relative;
  width: fit-content;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 auto 18px;
  background: transparent;
  display: flex;
}
.detail-image > img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  display: block;
}

/* ---------- Sections row (audience: Him/Her/Unisex) ---------- */

.trending-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 4px 16px;
  margin-bottom: 24px;
  scrollbar-width: none;
}
.trending-row::-webkit-scrollbar { display: none; }

.trending-card {
  flex: 0 0 auto;
  width: 220px;
  text-decoration: none;
  color: var(--ink);
}

.trending-image {
  width: 220px;
  height: 280px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--pill);
  margin-bottom: 10px;
}
.trending-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.trending-card:hover .trending-image > img { transform: scale(1.06); }

.trending-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 2px;
  color: #fff;
}

.trending-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
}

.section-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-label-row h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
  margin: 0;
  color: #fff;
}

.page-title, .page-sub { color: #fff; }

.sections-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.section-card {
  position: relative;
  height: 170px;
  border-radius: 16px;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s ease;
  background-size: cover;
  background-position: center;
}
.section-card:hover { transform: translateY(-4px); }

.section-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0.12) 58%, rgba(0,0,0,0.28));
  z-index: 0;
}
.section-card { background-size: cover; background-position: center; }
.section-him { background-position: center 18%; }
.section-her { background-position: center 22%; }
.section-accessories { background-position: center 54%; }
.section-places { background-position: center 22%; }

.section-him { background-color: #1B1B18; background-image: url('../images/cover-him.jpg'); }
 .section-her { background-color: #6B4A3A; background-image: url('../images/cover-her.jpg'); }
 .section-unisex { background-color: #2A2E24; background-image: url('../images/cover-unisex.jpg'); background-position: center 44%; }
 .section-accessories { background-color: #3A2E2A; background-image: url('../images/cover-accessories.jpg'); }
 .section-places { background-color: #223035; background-image: url('../images/cover-places.jpg'); }

.section-label {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 18px;
}

.section-count {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}

/* ---------- Reel viewer (full-bleed vertical scroll) ---------- */

.reel-body {
  margin: 0;
  background: #000;
  overflow: hidden;
  height: 100vh;
}

.reel-back {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 20;
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  background: rgba(0,0,0,0.35);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel-title {
  position: fixed;
  top: 24px;
  left: 68px;
  z-index: 20;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
}

.reel-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.reel-cat-row {
  position: fixed;
  top: 20px;
  right: 18px;
  z-index: 20;
  display: flex;
  gap: 6px;
  max-width: 60%;
  overflow-x: auto;
}

.reel-chip {
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 11px;
  padding: 6px 12px;
  backdrop-filter: blur(6px);
}
.reel-chip.active { background: #fff; color: #111; }

.reel-section {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
  display: flex;
  align-items: flex-end;
}

.reel-overlay {
  width: 100%;
  padding: 28px 22px 40px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.1) 60%, transparent);
  color: #fff;
}

.reel-item-title {
  white-space: pre-line;
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  margin: 10px 0 8px;
}

.reel-item-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  margin: 0 0 14px;
}

.reel-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 14px;
}

.reel-spotify {
  border-radius: 12px;
  overflow: hidden;
}

/* ---------- Landing page (dark hero + solved grid) ---------- */

.landing-body {
  margin: 0;
  background: #0B0B0A;
}

.hero {
  position: relative;
  min-height: 100vh;
  background: #0B0B0A;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero-texture {
  position: absolute;
  inset: 0;
  /* images/cover-hero.jpg was removed from the repo, so this was a guaranteed
     404 on every landing-page load; the gradient was already doing all the
     visible work on its own. */
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.75));
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.landing-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  flex-wrap: wrap;
  gap: 14px;
}

.landing-logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 28px;
  color: #fff;
  letter-spacing: 0.01em;
}

.landing-nav {
  display: flex;
  gap: 26px;
  background: rgba(255,255,255,0.08);
  padding: 12px 24px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.landing-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.landing-nav a:hover { opacity: 1; }

.btn-hero-cta {
  background: #fff;
  color: #111;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
}
.btn-hero-cta:hover { background: var(--accent); }

.landing-header #auth-bar {
  color: #fff;
}
.landing-header .login-form input {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.landing-header .login-form input::placeholder { color: rgba(255,255,255,0.5); }
.landing-header .login-status { color: rgba(255,255,255,0.65); }
.landing-header .btn-ghost {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.landing-header .btn-ghost:hover { color: #fff; border-color: #fff; }

.hero-content {
  position: relative;
  z-index: 2;
  padding: 60px 32px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-word {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: clamp(64px, 14vw, 180px);
  line-height: 0.9;
  margin: 0 0 20px;
}

.hero-tagline {
  font-size: clamp(15px, 2vw, 19px);
  color: rgba(255,255,255,0.75);
  max-width: 480px;
  line-height: 1.5;
}

.hero-stats {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  padding: 0 32px 48px;
}

/* Shift the landing hero opening content slightly right on larger screens */
@media (min-width: 601px) {
  .hero-content {
    padding-left: 96px;
  }
  .hero-stats {
    padding-left: 96px;
  }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  color: #fff;
}

.stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  font-family: var(--mono);
}

/* ---------- Shop section (Farfetch-style, rounded to match site) ---------- */

.shop-section {
  background: var(--card);
  padding: 56px 32px 64px;
}

.shop-filter-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 auto 32px;
  max-width: 1040px;
}

.filter-chip {
  border: 1.5px solid var(--line);
  background: none;
  color: var(--ink);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.filter-chip:hover { border-color: var(--ink); }
.filter-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}

.shop-card {
  text-decoration: none;
  color: var(--ink);
  display: block;
}

.shop-card-image {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-color: var(--pill);
  overflow: hidden;
  margin-bottom: 12px;
}

.shop-heart {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.shop-card:hover .shop-heart { opacity: 1; }

.shop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,0);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  transition: background 0.2s ease;
}
.shop-card:hover .shop-overlay { background: rgba(17,17,17,0.18); }

.shop-cta {
  background: #fff;
  color: var(--ink);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.shop-card:hover .shop-cta { opacity: 1; transform: translateY(0); }

.shop-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 3px;
}

.shop-price {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  margin: 0;
}

.solved-section {
  background: #0B0B0A;
  padding: 60px 32px 90px;
}

.solved-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.55);
  margin: 0 0 24px;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.solved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
}

.solved-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.solved-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(17,17,17,0.08);
}

.solved-thumb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  background: var(--pill);
}
.solved-thumb-empty {
  display: block;
}

.solved-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 4px;
}

.solved-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  margin: 0;
}

.feed-nav {
  display: flex;
  gap: 16px;
}
.feed-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.feed-nav a:hover { color: var(--ink); }

/* ---------- Avatars & profile ---------- */

.avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.avatar-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.avatar-thumb-empty {
  background: var(--accent);
  display: inline-block;
}

.mini-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 5px;
}
.mini-avatar-empty {
  background: var(--accent);
  display: inline-block;
}

.ticket-author {
  display: inline-flex;
  align-items: center;
}

.avatar-preview {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 4px;
}
.avatar-preview-empty {
  background: var(--pill);
}

.landing-header .avatar-btn .auth-user { color: #fff; }
.landing-header .avatar-thumb-empty { background: var(--accent); }

/* ---------- Mobile responsiveness ---------- */

@media (max-width: 860px) {
  .board { grid-template-columns: repeat(2, 1fr); }
  .sections-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .header-wrap { padding: 14px 14px 0; }
  header.site-header { padding: 10px 14px; }
  .login-form input { width: 110px; font-size: 12px; }
  .login-form { flex-wrap: wrap; }
  main { padding: 20px 16px 90px; }
  .btn-fab { bottom: 18px; right: 18px; left: 18px; padding: 13px 18px; font-size: 13px; text-align: center; }
  .landing-nav { display: none; }
  .hero-stats { gap: 22px; }
  .stat-num { font-size: 24px; }

  .board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 5px;
    gap: 8px;
    align-items: start;
  }
  .ticket-wrap { grid-row-end: span 42; }
  .ticket { padding: 10px; border-radius: 14px; }
  .ticket-image { margin-bottom: 9px; border-radius: 10px; }
  .ticket-title { font-size: 14px; line-height: 1.18; margin-bottom: 6px; }
  .ticket-desc { font-size: 11px; line-height: 1.35; }
  .ticket-footer { margin-top: 9px; padding-top: 8px; font-size: 10px; }
  .ticket-cat, .ticket-song { font-size: 9px; }
  .sections-row { grid-template-columns: repeat(2, 1fr); }
  .section-card { height: 120px; }

  .new-request-panel { padding: 20px 12px; align-items: center; }
  .new-request { padding: 18px; max-height: 88vh; overflow-y: auto; }
  .field-row { flex-direction: column; }
  .field-row > * { min-width: 0; }

  .promote-modal-inner { padding: 20px; }

  .trending-image { width: 160px; height: 210px; }
  .trending-card { width: 160px; }

  .request-detail { padding: 18px; }
  .request-detail h1 { font-size: 21px; }
  .request-meta { flex-direction: column; gap: 6px; }

  .rec-footer { flex-wrap: wrap; gap: 8px; }

  .category-row, .reel-cat-row { -webkit-overflow-scrolling: touch; }

  .solved-section, .shop-section { padding: 40px 16px 60px; }
  .solved-grid { grid-template-columns: repeat(2, 1fr); }

  .avatar-preview { width: 72px; height: 72px; }
}

@media (max-width: 380px) {
  .sections-row { grid-template-columns: 1fr; }
  .hero-word { font-size: 15vw; }
}

/* ---------- Premium motion and finish ---------- */
:root {
  --premium-ease: cubic-bezier(.22, 1, .36, 1);
  --premium-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --premium-border: rgba(255, 255, 255, .09);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .055), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(190, 255, 91, .035), transparent 24rem),
    var(--bg);
  color: var(--text);
}

*, *::before, *::after {
  transition-timing-function: var(--premium-ease);
}

.site-header,
.landing-header {
  background: rgba(14, 14, 14, .72);
  border-bottom: 1px solid var(--premium-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.logo, .landing-logo { letter-spacing: -.045em; }
.nav-links a, .landing-nav a, button, .btn, .chip, .tag, a {
  transition: color .3s var(--premium-ease), background-color .3s var(--premium-ease),
    border-color .3s var(--premium-ease), transform .3s var(--premium-ease),
    box-shadow .3s var(--premium-ease), opacity .3s var(--premium-ease);
}

.nav-links a:hover, .landing-nav a:hover { transform: translateY(-1px); }
button:hover, .btn:hover, .chip:hover, .tag:hover { transform: translateY(-2px); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.hero, .landing-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero::before, .landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.045), transparent 34%, rgba(190,255,91,.035));
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.hero-word { text-shadow: 0 18px 60px rgba(0,0,0,.35); }
.hero-content, .hero-inner { animation: premium-rise .9s var(--premium-ease) both; }

.card, .request-card, .solved-card, .section-card, .trending-card, .shop-card,
.feed-card, .request-detail, .new-request, .promote-modal-inner {
  border-color: var(--premium-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: transform .45s var(--premium-ease), box-shadow .45s var(--premium-ease),
    border-color .45s var(--premium-ease), background-color .45s var(--premium-ease);
}
.card:hover, .request-card:hover, .solved-card:hover, .section-card:hover, .trending-card:hover,
.shop-card:hover, .feed-card:hover {
  transform: translateY(-5px);
  border-color: rgba(190,255,91,.22);
  box-shadow: var(--premium-shadow);
}

img { transition: transform .8s var(--premium-ease), filter .8s var(--premium-ease); }
.card:hover img, .request-card:hover img, .solved-card:hover img, .trending-card:hover img,
.shop-card:hover img { transform: scale(1.035); filter: saturate(1.08) contrast(1.02); }

.modal, .new-request-panel, .promote-modal { animation: premium-fade .35s var(--premium-ease) both; }
.modal-content, .new-request, .promote-modal-inner { animation: premium-rise .45s var(--premium-ease) both; }

@keyframes premium-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes premium-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 600px) {
  .site-header, .landing-header { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .hero-content, .hero-inner { animation-duration: .7s; }
  .card:hover, .request-card:hover, .solved-card:hover, .section-card:hover, .trending-card:hover,
  .shop-card:hover, .feed-card:hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Image crop dialog ---------- */
.image-crop-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(8,8,10,.72); backdrop-filter: blur(18px); }
.image-crop-dialog { width: min(520px, 100%); padding: 20px; border-radius: 24px; background: rgba(255,255,255,.96); color: #121212; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.image-crop-dialog h2 { margin: 0 0 16px; }
.image-crop-frame { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; background: #e9e9e9; }
.image-crop-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-crop-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.image-crop-dialog .btn-ghost { color: #222; border-color: rgba(0,0,0,.16); }

/* ---------- White liquid post surfaces ---------- */
.ticket {
  background: rgba(255,255,255,.92);
  color: #141414;
  border-color: rgba(255,255,255,.9);
  box-shadow: 0 24px 65px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.95);
}
.ticket::before { opacity: .2; mix-blend-mode: multiply; filter: blur(36px) saturate(1.15); }
.ticket::after { background: linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.08) 48%, rgba(255,255,255,.62)); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.ticket-title, .ticket-desc, .ticket-cat, .ticket-song, .ticket-footer { color: #171717; text-shadow: none; }
.ticket-footer { border-color: rgba(17,17,17,.12); }
.ticket-image { box-shadow: none; }

/* ---------- Image-blended liquid post surfaces ---------- */
.ticket {
  --post-liquid-base: rgba(13, 15, 20, .94);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--post-liquid-base);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.ticket::before {
  inset: -28%;
  background-image: var(--post-image);
  background-position: center;
  background-size: cover;
  filter: blur(42px) saturate(1.65) contrast(1.15);
  opacity: .72;
  transform: scale(1.1);
  mix-blend-mode: screen;
}
.ticket::after {
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(255,255,255,.18), transparent 30%),
    radial-gradient(ellipse at 82% 88%, rgba(35,100,145,.2), transparent 38%),
    linear-gradient(115deg, rgba(7,9,13,.84), rgba(20,24,34,.5) 48%, rgba(7,9,13,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -24px 48px rgba(0,0,0,.18);
  mix-blend-mode: normal;
}
.ticket > * { position: relative; z-index: 1; }
.ticket:not([style*="--post-image"])::before {
  background: radial-gradient(circle at 22% 15%, rgba(48,73,104,.8), transparent 42%), radial-gradient(circle at 80% 90%, rgba(81,38,66,.7), transparent 48%);
  filter: blur(34px);
  opacity: .52;
}
.ticket-image { position: relative; z-index: 1; overflow: hidden; border-radius: 14px; }
.ticket-image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(1.08) contrast(1.04); }
.ticket:hover::before { opacity: .9; transform: scale(1.16); }
  .ticket-title, .ticket-desc, .ticket-cat, .ticket-song, .ticket-footer { text-shadow: 0 1px 14px rgba(0,0,0,.4); }

.request-page header.site-header {
  background: #fff;
  color: #111;
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 10px 28px rgba(17,17,17,.12);
}
.request-page header.site-header .logo,
.request-page header.site-header a,
.request-page header.site-header #auth-bar,
.request-page header.site-header .auth-user { color: #111; }


/* ---------- Always-visible premium navigation ---------- */
.header-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: max(14px, env(safe-area-inset-top));
  background: linear-gradient(to bottom, var(--bg) 68%, transparent);
}
header.site-header, .landing-header {
  position: sticky;
  top: 0;
  z-index: 101;
  margin-inline: auto;
  max-width: 1280px;
  background: rgba(15, 15, 15, .88);
}
.landing-header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  max-width: none;
}
.landing-body .hero { padding-top: 82px; }
.feed-loading {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--muted, var(--ink-soft));
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
}

@media (max-width: 600px) {
  .header-wrap { padding: max(10px, env(safe-area-inset-top)) 10px 8px; }
  header.site-header, .landing-header {
    width: 100%;
    min-height: 54px;
    padding: 9px 12px;
    border-radius: 18px;
    gap: 8px;
  }
  .logo, .landing-logo { font-size: 17px; }
  header.site-header #auth-bar, .landing-header #auth-bar { min-width: 0; gap: 6px; }
  .login-form { justify-content: flex-end; gap: 5px; }
  .login-form input { width: min(31vw, 116px); height: 34px; padding-inline: 9px; }
  .login-form .btn { padding: 9px 10px; font-size: 10px; white-space: nowrap; }
  .auth-user { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .btn-ghost { padding-inline: 8px; }
  main { padding-top: 16px; padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .hero-content { padding: 42px 20px 28px; }
  .hero-word { font-size: clamp(64px, 22vw, 104px); letter-spacing: -.09em; }
  .hero-tagline { max-width: 29ch; font-size: 14px; line-height: 1.5; }
  .category-row, .filter-row, .chips-row { overflow-x: auto; overscroll-behavior-inline: contain; padding-bottom: 4px; }
  .category-row::-webkit-scrollbar, .filter-row::-webkit-scrollbar, .chips-row::-webkit-scrollbar { display: none; }
  .cat-chip, .chip { flex: 0 0 auto; min-height: 38px; padding: 10px 13px; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 5px; gap: 8px; align-items: start; }
  .ticket-wrap { grid-row-end: span 42; }
  .ticket { border-radius: 14px; padding: 10px; }
  .ticket-image { margin-bottom: 9px; border-radius: 10px; }
  .ticket-title { font-size: 14px; line-height: 1.18; margin-bottom: 6px; }
  .ticket-desc { font-size: 11px; line-height: 1.35; }
  .ticket-footer { margin-top: 9px; padding-top: 8px; font-size: 10px; }
  .ticket-cat, .ticket-song { font-size: 9px; }
  .btn-fab { bottom: calc(14px + env(safe-area-inset-bottom)); right: 14px; left: 14px; min-height: 50px; border-radius: 16px; box-shadow: 0 14px 36px rgba(0,0,0,.34); }
  .new-request-panel { padding: 12px; align-items: flex-end; }
  .new-request { width: 100%; max-height: calc(100dvh - 24px - env(safe-area-inset-top)); overflow-y: auto; border-radius: 22px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .modal-content { width: calc(100% - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; border-radius: 22px; }
}

/* Final post surface overrides */
.ticket { background: rgba(255,255,255,.94); color: #141414; border-color: rgba(255,255,255,.96); box-shadow: 0 24px 65px rgba(0,0,0,.2); }
.ticket::before { opacity: .16; mix-blend-mode: multiply; filter: blur(36px) saturate(1.1); }
.ticket::after { background: rgba(255,255,255,.42); box-shadow: none; }
.ticket-title, .ticket-desc, .ticket-cat, .ticket-song, .ticket-footer { color: #171717; text-shadow: none; }
.ticket-footer { border-color: rgba(17,17,17,.12); }

@media (max-width: 600px) {
  .ticket {
    background: linear-gradient(155deg, rgba(255,255,255,.82), rgba(244,241,235,.64) 52%, rgba(255,255,255,.76));
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: 0 14px 34px rgba(15,18,26,.16), inset 0 1px 0 rgba(255,255,255,.92);
    padding: 7px;
    border-radius: 16px;
  }
  .ticket::after { background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.5)); }
  .ticket-image { margin: -1px -1px 8px; border-radius: 13px; aspect-ratio: 4 / 5; box-shadow: 0 8px 20px rgba(12,14,20,.14); }
  .ticket-image img { width: 100%; height: 100%; object-fit: cover; }
  .ticket-cat { display: inline-flex; margin-bottom: 5px; padding: 4px 7px; border-radius: 999px; background: rgba(255,255,255,.72); color: #292929; font-size: 8px; letter-spacing: .08em; }
  .ticket-title { color: #151515; font-size: 13px; line-height: 1.2; letter-spacing: -.02em; }
  .ticket-desc { color: #575757; font-size: 10px; line-height: 1.35; }
  .ticket-song { color: #3e4a62; font-size: 9px; }
  .ticket-footer { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(23,23,23,.1); color: #474747; font-size: 9px; }
  .ticket-author { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mini-avatar { width: 24px; height: 24px; flex: 0 0 24px; border: 2px solid rgba(255,255,255,.92); border-radius: 50%; object-fit: cover; box-shadow: 0 3px 8px rgba(0,0,0,.16); }
  .mini-avatar-empty { display: inline-block; background: linear-gradient(135deg, #20242d, #a8b0bc); }
  .ticket-budget { color: #a45d20; font-weight: 700; }
}

.instagram-browser-prompt {
  position: fixed; z-index: 500; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px; background: #171717; color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.28); font-size: 13px;
}
.instagram-browser-prompt strong { grid-column: 1; }
.instagram-browser-prompt span { grid-column: 1; color: rgba(255,255,255,.78); }
.instagram-browser-prompt em { font-style: normal; color: #fff; }
.instagram-browser-prompt button { grid-column: 2; grid-row: 1 / span 2; border: 1px solid rgba(255,255,255,.45); border-radius: 8px; background: transparent; color: #fff; padding: 8px 10px; font: inherit; }
.btn-danger { background: #9f1d1d; color: #fff; border-color: #9f1d1d; }
.btn-danger:hover { background: #7f1616; }
.auth-entry-actions { display: flex; gap: 8px; }
.auth-panel-card { width: min(420px, 100%); }
.auth-panel-eyebrow { margin: 0 0 8px; color: var(--accent); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.auth-panel-card h2 { margin-bottom: 6px; }
.auth-panel-card .field-row { margin-top: 12px; }
.auth-panel-card input { width: 100%; }
.auth-submit { width: 100%; margin-top: 14px; }
.auth-panel-switch { margin: 18px 0 0; text-align: center; color: var(--ink-soft); font-size: 13px; }
.auth-panel-switch .link-btn { color: inherit; text-decoration: underline; }
.member-welcome[hidden] { display: none; }
.avatar-crop-dialog { width: min(440px, 100%); }
.avatar-crop-frame { width: min(300px, 78vw); aspect-ratio: 1; margin: 14px auto; overflow: hidden; border-radius: 50%; background: #e9e9e9; touch-action: none; cursor: grab; }
.avatar-crop-frame:active { cursor: grabbing; }
.avatar-crop-frame img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; user-select: none; pointer-events: none; }
.avatar-crop-zoom { display: block; width: min(300px, 78vw); margin: 0 auto; }
.profile-post-grid { display: flex; flex-direction: column; gap: 20px; max-width: 680px; }
.profile-post { position: relative; overflow: hidden; isolation: isolate; display: block; min-height: 420px; border-radius: 18px; background: linear-gradient(145deg, #171b25, #343b4d); color: #fff; text-decoration: none; box-shadow: 0 14px 34px rgba(10,14,22,.13); }
.profile-post::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(4,6,10,.8), transparent 62%); }
.profile-post img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.profile-post-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px; text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 4vw, 36px); line-height: 1.05; background: radial-gradient(circle at 15% 10%, rgba(168,176,188,.34), transparent 35%), linear-gradient(145deg, #171b25, #343b4d); }
.profile-post.has-image .profile-post-fallback { display: none; }
.profile-post-overlay { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 3px; padding: 20px; }
.profile-post:hover img, .profile-post:focus img { transform: scale(1.025); }
.profile-post-overlay strong { font-size: 18px; line-height: 1.15; }.profile-post-overlay small { font-size: 12px; opacity: .82; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 600px) { .profile-post-grid { gap: 16px; }.profile-post, .profile-post img { min-height: 0; aspect-ratio: 4 / 5; border-radius: 14px; }.profile-post-overlay { padding: 18px; }.profile-post-overlay strong { font-size: 17px; } }

#profile-modal .avatar-preview { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto; }
#profile-modal .avatar-preview-empty { background: var(--accent); }

.profile-page .header-wrap { background: linear-gradient(to bottom, #fff 68%, transparent); }
.profile-page header.site-header { background: rgba(255,255,255,.94); color: #111; border-color: rgba(17,17,17,.1); box-shadow: 0 10px 28px rgba(17,17,17,.09); }
.profile-page header.site-header .logo, .profile-page header.site-header .auth-user { color: #111; }
.profile-page header.site-header .btn-ghost { color: #111; border-color: rgba(17,17,17,.25); }
/* Shared light navigation */
header.site-header, .landing-header {
  background: rgba(255,255,255,.95);
  color: #111;
  border-color: rgba(17,17,17,.1);
  box-shadow: 0 10px 28px rgba(17,17,17,.09);
}
header.site-header .logo, .landing-header .landing-logo,
header.site-header .auth-user, .landing-header .auth-user,
.landing-nav a { color: #111; }
.landing-nav { background: rgba(17,17,17,.07); }
.landing-header .btn-ghost, header.site-header .btn-ghost { color: #111; border-color: rgba(17,17,17,.25); }
.landing-header .btn-ghost:hover, header.site-header .btn-ghost:hover { color: #111; border-color: #111; }
/* Keep the landing and feed navigation dark; profile pages use the light header above. */
.landing-header, body:not(.profile-page) header.site-header {
  background: rgba(15,15,15,.88);
  color: #fff;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.landing-header .landing-logo, .landing-header .auth-user,
body:not(.profile-page) header.site-header .logo, body:not(.profile-page) header.site-header .auth-user,
.landing-header .landing-nav a { color: #fff; }
.landing-header .landing-nav { background: rgba(255,255,255,.08); }
.landing-header .btn-ghost, body:not(.profile-page) header.site-header .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
/* Main feed: long dark velvet navigation bar. */
.landing-header, body:not(.profile-page) header.site-header {
  width: min(1360px, calc(100% - 32px));
  margin: 14px auto 0;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(20, 20, 22, .78);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 16px 38px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
@media (max-width: 600px) { .landing-header, body:not(.profile-page) header.site-header { width: calc(100% - 20px); margin-top: 10px; padding: 11px 14px; } }
.profile-follow-btn.is-following { background: #fff; color: #111; border: 1px solid rgba(17,17,17,.2); }

/* Messages: header badge + enable-notifications prompt */
.messages-badge-btn { position: relative; }
.messages-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}
.push-prompt {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 14px 34px rgba(10,14,22,.25);
}
.push-prompt-actions { display: flex; gap: 8px; flex-shrink: 0; }
.push-prompt .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
@media (max-width: 600px) {
  .push-prompt { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------- Home feed: Pinterest-style masonry cards ----------
   Scoped to #board (the home feed only) with an ID-prefixed selector so it
   reliably wins over the many earlier `.ticket*` rules used by other pages
   (request.html, reel.js) without having to touch those pages' styling. */
#board.board { gap: 14px; grid-auto-flow: dense; }
#board .ticket { padding: 0; overflow: hidden; border-radius: 18px; isolation: isolate; }
#board .ticket-image {
  position: relative;
  margin-bottom: 0;
  border-radius: 0;
  aspect-ratio: auto;
  background: var(--pill);
}
#board .ticket-image img { width: 100%; height: auto; aspect-ratio: auto; display: block; }
#board .ticket:hover .ticket-image img { transform: none; }
#board .ticket-image-fallback {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(145deg, #171b25, #343b4d);
}
#board .ticket-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* No dark fade over feed photos — the photo shows clean. The title keeps
     its text-shadow for legibility, and the share posters draw their own
     fade under the name. */
  background: none;
}
#board .ticket-cat {
  align-self: flex-start;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
  color: #fff;
  margin-bottom: 0;
}
#board .ticket-title { color: #fff; font-size: 15px; margin: 0; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
#board .ticket-song { color: #fff; opacity: .85; font-size: 11px; margin-top: 0; display: block; }
#board .sponsored-badge { position: absolute; top: 10px; left: 10px; z-index: 2; margin-bottom: 0; }
#board .ticket-footer {
  position: relative;
  z-index: 1;
  background: var(--card);
  border-top: none;
  padding: 9px 14px;
  margin-top: 0;
}
#board .ticket-footer .ticket-author { color: #171717; }
@media (max-width: 600px) {
  #board .ticket { border-radius: 14px; }
  #board .ticket-overlay { padding: 10px; }
  #board .ticket-footer { padding: 8px 12px; }
}

/* ---------- Requested pass: icon-only mobile header, like button, song
   badge, trending tabs, denser post chrome ---------- */

.landing-body .hero { padding-top: var(--header-h, 82px); }

/* Icon buttons (Edit / Sign out / Messages): icon + label on desktop,
   label hides at mobile widths below. */
.icon-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.icon-btn svg { width: 15px; height: 15px; flex: 0 0 auto; display: block; }

.messages-badge-btn { position: relative; }
.messages-badge-count {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  box-shadow: 0 0 0 2px rgba(15,15,15,.88);
}
.messages-badge-count[hidden] { display: none; }

@media (max-width: 600px) {
  /* Logo, tabs, and icons all share one row now — everything has to
     shrink to actually fit a phone-width line. */
  .landing-header, header.site-header { gap: 6px; padding-inline: 10px; }
  .logo, .landing-logo { font-size: 13px; }
  .feed-tabs-row { gap: 4px; }
  .feed-tab { padding: 4px 7px; font-size: 9px; }
  #auth-bar { flex-wrap: nowrap !important; justify-content: flex-end; gap: 5px; }
  .auth-entry-actions { flex-wrap: nowrap; gap: 5px; }
  .auth-entry-actions .btn, .auth-entry-actions .btn-ghost { padding: 7px 10px; font-size: 11px; }

  .icon-btn .btn-label,
  .avatar-btn .auth-user { display: none; }

  .icon-btn, .avatar-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 50%;
    flex: 0 0 auto;
    gap: 0;
  }
  .icon-btn svg { width: 13px; height: 13px; }
  .avatar-thumb, .avatar-thumb-empty { width: 26px; height: 26px; }
  .messages-badge-count { top: -3px; right: -3px; }
}

/* Song badge: small icon in the image corner instead of a text row. */
.ticket-song-badge {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(4,6,10,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
}
.ticket-song-badge svg { width: 12px; height: 12px; }

/* Like button, feed cards + trending strip. */
.like-btn {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 999px;
  border: none;
  background: rgba(4,6,10,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  transition: transform .15s ease, background .15s ease;
}
.like-btn:hover { transform: scale(1.06); background: rgba(4,6,10,.7); }
.like-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.like-btn.is-liked { background: rgba(232,74,107,.92); }
.like-btn.is-liked svg { fill: currentColor; }
.like-btn .like-count:empty { display: none; }

.trending-image, #board .ticket-image { position: relative; }

.staff-pick-toggle {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(4,6,10,.5);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.staff-pick-toggle svg { width: 13px; height: 13px; }
.staff-pick-toggle.is-picked { background: var(--accent); color: #111; }

/* Trending tabs: Shuffle / Staff Picks / Recent. */
.trending-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}
.trending-tab {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.65);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.trending-tab:hover { color: #fff; border-color: rgba(255,255,255,.32); }
.trending-tab.active { background: #fff; color: #111; border-color: #fff; }

/* Denser post chrome + smaller identity row on mobile feed cards. The
   footer (avatar/name/price) is back to a real, in-flow bar below the
   image — kept as slim as it can be while still fitting the avatar and
   name legibly. */
@media (max-width: 600px) {
  .board, #board.board { gap: 7px !important; margin-inline: -6px; }
  #board .ticket-footer {
    background: rgba(255,255,255,.97);
    border-top: none;
    padding: 5px 7px;
    font-size: 9px;
    gap: 4px;
    color: #171717;
  }
  #board .ticket-footer .ticket-author { color: #171717; }
  #board .ticket-footer .mini-avatar { width: 18px; height: 18px; flex: 0 0 18px; margin-right: 5px; }
  #board .ticket-budget { font-size: 9px; color: #a45d20; }
  #board .ticket, .trending-card { border: none !important; box-shadow: none !important; }
  #board .ticket-title {
    font-size: 12.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #board .ticket-overlay { gap: 3px; padding: 8px; }
  #board .ticket-cat { font-size: 8px; padding: 3px 6px; }
  .like-btn { padding: 6px 8px; top: 8px; right: 8px; }
  .like-btn svg { width: 13px; height: 13px; }
  .ticket-song-badge { width: 21px; height: 21px; bottom: 8px; right: 8px; }
  .trending-tab { padding: 6px 11px; font-size: 10px; }
}

/* ---------- Feed preference tabs (Shuffle / Staff Picks / Recent) — the
   feed's own view, distinct from the trending strip's tabs. Lives inside
   the fixed/sticky header so it always travels with the top icons and is
   never left behind by scrolling. Floating, translucent labels rather
   than a solid bar, to match the reference. ---------- */
.feed-tabs-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-basis: 100%;
  order: 5;
  width: 100%;
  margin-top: 8px;
}
.feed-tab {
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  transition: background .15s ease, color .15s ease;
}
.feed-tab:hover { color: #fff; }
.feed-tab.active {
  background: rgba(255,255,255,.16);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.request-page .feed-tab, body:not(.landing-body):not(.request-page) .feed-tab { color: rgba(17,17,17,.55); text-shadow: none; }
.request-page .feed-tab:hover, body:not(.landing-body):not(.request-page) .feed-tab:hover { color: #111; }
.request-page .feed-tab.active, body:not(.landing-body):not(.request-page) .feed-tab.active { background: rgba(17,17,17,.08); color: #111; }

/* On the main feed, delete (if any) already owns top-left, so the
   admin-only staff-pick star sits bottom-left instead. */
.staff-pick-toggle.standalone { top: auto; bottom: 10px; }

/* Mobile home feed: drop the header bar entirely, keep floating icons +
   feed tabs fixed together in front of the scrolling posts. */
@media (max-width: 600px) {
  .landing-header {
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: max(10px, env(safe-area-inset-top)) 12px 0;
  }
  /* Icons now float directly over the hero/posts with no bar behind them,
     so each one needs its own legibility backing. */
  .landing-header .icon-btn,
  .landing-header .avatar-btn {
    background: rgba(4,6,10,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: none;
  }
  .landing-header .landing-logo {
    background: rgba(4,6,10,.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 7px 13px 7px 9px;
    border-radius: 999px;
  }
}

/* Desktop: logo, tabs, and icons share one row — nudge the tabs group
   right of the logo, closer to true center rather than hugging it. */
.feed-tabs-row { flex-basis: auto; order: initial; margin-top: 0; width: auto; }
@media (min-width: 601px) {
  .feed-tabs-row { margin-left: 64px; }
}

/* Mobile: one line made everything illegibly small. Tabs go back to
   their own row under the icons, and the icon/text sizes go back up.
   (Placed at the true end of the file — an earlier un-scoped .feed-tab
   rule sits after any earlier attempt in the middle of this file and
   wins at every width otherwise.) */
@media (max-width: 600px) {
  .feed-tabs-row {
    flex-basis: 100% !important;
    order: 5 !important;
    margin-top: 8px !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .feed-tab { padding: 6px 13px !important; font-size: 11px !important; }
  .logo, .landing-logo { font-size: 15px !important; }
  .landing-header, header.site-header { gap: 8px !important; padding-inline: 12px !important; }
  .auth-entry-actions { gap: 6px !important; }
  .auth-entry-actions .btn, .auth-entry-actions .btn-ghost { padding: 8px 14px !important; font-size: 12px !important; }
  #auth-bar { gap: 8px !important; }
  .icon-btn, .avatar-btn { width: 34px !important; height: 34px !important; min-width: 34px !important; }
  .avatar-thumb, .avatar-thumb-empty { width: 30px !important; height: 30px !important; }
  .icon-btn svg { width: 15px !important; height: 15px !important; }
}

/* ---------- Text-only posts: a plain white card, bold title sized
   inversely to its length (short = big statement, long = smaller but
   still bold to fit) — no background image, no gradient. ---------- */
#board .ticket-text {
  position: relative;
  overflow: hidden;
  padding: 24px 18px 20px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background: #fff;
}
#board .ticket-text .ticket-cat {
  align-self: flex-start;
  background: var(--pill);
  color: var(--accent);
  margin-bottom: 0;
}
.ticket-text-title {
  white-space: pre-line;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: #111;
  margin: 0;
}
.ticket-text-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ticket-text .like-btn { top: 10px; right: 10px; color: #111; background: rgba(255,255,255,.7); backdrop-filter: blur(4px); }
.ticket-text .like-btn.is-liked { background: rgba(232,74,107,.92); color: #fff; }
.ticket-text .ticket-song-badge { bottom: 10px; right: 10px; background: rgba(17,17,17,.08); color: #111; }
@media (max-width: 600px) {
  #board .ticket-text { padding: 18px 14px 16px; min-height: 130px; gap: 6px; }
  .ticket-text-desc { font-size: 11px; -webkit-line-clamp: 3; }
}

/* ---------- Restore the intended dark "liquid glass" card surface on
   the feed. An earlier, lighter "white liquid" card style (meant for a
   different section) was winning the cascade for #board .ticket too —
   confirmed by reading the live computed background/::before/::after,
   not just the source. That's what was showing up as flat white
   patches instead of the moody blurred-image glow. ---------- */
#board .ticket {
  background: rgba(13, 15, 20, .94) !important;
}
#board .ticket::before {
  inset: -28% !important;
  background-image: var(--post-image) !important;
  background-position: center !important;
  background-size: cover !important;
  filter: blur(42px) saturate(1.65) contrast(1.15) !important;
  opacity: .72 !important;
  transform: scale(1.1) !important;
  mix-blend-mode: screen !important;
}
#board .ticket:not([style*="--post-image"])::before {
  background: radial-gradient(circle at 22% 15%, rgba(48,73,104,.8), transparent 42%), radial-gradient(circle at 80% 90%, rgba(81,38,66,.7), transparent 48%) !important;
  filter: blur(34px) !important;
  opacity: .52 !important;
}
#board .ticket::after {
  background:
    radial-gradient(ellipse at 18% 8%, rgba(255,255,255,.18), transparent 30%),
    radial-gradient(ellipse at 82% 88%, rgba(35,100,145,.2), transparent 38%),
    linear-gradient(115deg, rgba(7,9,13,.84), rgba(20,24,34,.5) 48%, rgba(7,9,13,.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -24px 48px rgba(0,0,0,.18) !important;
  mix-blend-mode: normal !important;
}
#board .ticket:hover::before { opacity: .9 !important; transform: scale(1.16) !important; }

/* Hover lift on desktop. This was force-disabled site-wide as a Safari
   workaround for a CSS multi-column masonry bug — but masonry.js has
   used CSS Grid (not multi-column) for a while now, so that bug no
   longer applies and the workaround was just suppressing real hover
   motion. Scoped to real hover+pointer devices, not touchscreens. */
@media (hover: hover) and (pointer: fine) {
  #board .ticket:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.35) !important;
  }
}