/* ============================================
   Noir Code Hub — Page-specific styles
   ============================================ */

/* Link card (linktree core) */
.link-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 1.2rem 1.05rem 1.4rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(194,164,109,0.18);
  border-radius: 2px;
  color: #EDE4D3;
  transition: background 0.5s ease, border-color 0.5s ease, transform 0.4s ease;
  backdrop-filter: blur(8px);
}
.link-card:hover {
  background: rgba(194,164,109,0.06);
  border-color: rgba(194,164,109,0.5);
  transform: translateY(-1px);
}

.link-card .arrow {
  margin-left: auto;
  color: rgba(237,228,211,0.4);
  transition: transform 0.4s ease, color 0.4s ease;
}
.link-card:hover .arrow { transform: translateX(4px); color: #C2A46D; }

.link-card .icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(194,164,109,0.25);
  border-radius: 2px;
  color: #C2A46D;
  flex-shrink: 0;
}

.link-card .label { display: flex; flex-direction: column; line-height: 1.25; }
.link-card .label .t { font-family: Baskerville, serif; font-size: 1.05rem; }
.link-card .label .s { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(237,228,211,0.45); margin-top: 2px; }

/* Featured product card */
.feat-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20,18,16,0.95), rgba(11,11,11,0.95));
  border: 1px solid rgba(194,164,109,0.2);
  border-radius: 2px;
  transition: border-color 0.5s ease, transform 0.4s ease;
}
.feat-card:hover {
  border-color: rgba(194,164,109,0.55);
  transform: translateY(-2px);
}

/* Coming soon badge */
.badge-soon {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border: 1px dashed rgba(194,164,109,0.4);
  border-radius: 4px;
  color: rgba(194,164,109,0.7);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Wordmark with bar separators */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: Baskerville, serif;
  font-size: 12px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #EDE4D3;
}
.wordmark .bar {
  width: 28px;
  height: 1px;
  background: #C2A46D;
}