/* =========================================================
   HOLLOWED MUSIC TUTORING — page-specific overrides
   Aesthetic: gold-dominant accent, parchment warmth,
   scholarly and ornate. The mentor's table.
   ========================================================= */

:root {
  --parchment: #0F0E0A;
  --parchment-2: #131108;
  --gold-soft: rgba(201, 168, 76, 0.5);
}

.page-tutoring {
  background: var(--parchment);
}

.page-tutoring body::before,
.page-tutoring::before {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(201, 168, 76, 0.05), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(184, 149, 42, 0.04), transparent 55%);
}

/* Wordmark sub-em (— Music Tutoring) */
.wordmark-em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-left: 6px;
}
.sigil-gold { color: var(--gold); }
/* The tutoring sigil variant (assets/logo-gold.svg) is natively gold-coloured —
 * no recolouring filter required. */
.nav-gold {
  background: rgba(15, 14, 10, 0.88);
  border-bottom: 1px solid rgba(201, 168, 76, 0.22);
}
.nav-gold .nav-links a:hover { color: var(--gold); }
.nav-gold .nav-links .active { color: var(--gold); }
.nav-gold .cart-btn:hover { border-color: var(--gold); color: var(--gold); }

/* Banner — warm parchment glow, ornate frame */
.banner-tutoring {
  min-height: 60vh;
  display: grid;
  align-items: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(201, 168, 76, 0.10), transparent 60%),
    radial-gradient(ellipse at 50% 90%, rgba(184, 149, 42, 0.06), transparent 60%),
    linear-gradient(180deg, #0C0A06 0%, #0F0E0A 100%);
  border-bottom: 1px solid rgba(201, 168, 76, 0.28);
  position: relative;
}
.banner-tutoring::before,
.banner-tutoring::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}
.banner-tutoring::before { top: 36px; }
.banner-tutoring::after { bottom: 36px; }

.gold-display {
  color: var(--gold);
  text-shadow: 0 0 60px rgba(201, 168, 76, 0.18);
  font-style: italic;
  letter-spacing: 0.005em;
}

/* Category strip */
.catstrip-gold {
  background: rgba(15, 14, 10, 0.6);
  border-bottom: 1px solid rgba(201, 168, 76, 0.22);
}
.catstrip-gold a { color: rgba(201, 168, 76, 0.78); }
.catstrip-gold a:hover { color: var(--bone); }

/* Sections */
.section-t {
  background: var(--parchment);
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}
.section-t.section-alt {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201, 168, 76, 0.04), transparent 70%),
    var(--parchment-2);
}
.section-t .section-head { position: relative; }
.section-t .section-head::after {
  content: "✦";
  display: block;
  font-family: var(--serif-display);
  color: var(--gold);
  opacity: 0.55;
  margin-top: 20px;
  font-size: 14px;
}

/* Product cards — manuscript item-card style */
.page-tutoring .card {
  background: var(--parchment-2);
  border: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease;
}
.page-tutoring .card:hover {
  background: #181505;
  border-color: rgba(201, 168, 76, 0.35);
}
.page-tutoring .card-img {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201, 168, 76, 0.10), transparent 60%),
    linear-gradient(135deg, #1a1608 0%, #0a0905 100%);
  border-color: rgba(201, 168, 76, 0.18);
}
.page-tutoring .card-img::after {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(201, 168, 76, 0.12), transparent 60%);
}
.page-tutoring .card-glyph {
  color: var(--gold);
  opacity: 0.45;
  font-style: italic;
  text-shadow: 0 0 30px rgba(201, 168, 76, 0.3);
}
.page-tutoring .card-tag { color: rgba(201, 168, 76, 0.65); }
.page-tutoring .card-title { color: var(--bone); }
.page-tutoring .card-price { color: var(--gold); }
.page-tutoring .card-foot { border-top-color: rgba(201, 168, 76, 0.18); }
.page-tutoring .card-add {
  border-color: rgba(201, 168, 76, 0.4);
  color: var(--gold);
}
.page-tutoring .card-add:hover {
  background: var(--gold);
  color: var(--parchment);
  border-color: var(--gold);
}

/* Closing band */
.closing-t {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201, 168, 76, 0.08), transparent 60%),
    var(--parchment);
  border-top: 1px solid rgba(201, 168, 76, 0.22);
}