:root{
  --black:#0b0b0b;
  --ink:#e6e6e6;
  --muted:#a7a7a7;
  --gold:#d4af37;        /* base */
  --gold-deep:#b68d1a;   /* deep */
  --gold-bright:#f7e27e; /* highlight */
}
html,body{ color: var(--gold); background:#0b0b0b; }

/* Dark surfaces */
.surface{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25)) , #0e0e0e;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 30px rgba(0,0,0,0.35);
}

/* Gold button */
.btn-gold{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.25rem; border-radius:9999px; font-weight:700;
  color:black; text-decoration:none; border:1px solid rgba(0,0,0,.25);
  background-image: linear-gradient(135deg, var(--gold-deep), var(--gold) 30%, var(--gold-bright) 60%, var(--gold));
  background-size:160% 160%;
  transition: transform .15s ease, filter .15s ease, background-position .6s ease;
}
.btn-gold:hover{ transform: translateY(-1px); background-position:100% 0%; }
.btn-gold:active{ transform: translateY(0); filter: brightness(.95); }

/* Foil hero bg */
.hero-foil{
  position:relative; overflow:hidden;
  background: linear-gradient(120deg, #b78e00, #ffd166 20%, #bf953f 40%, #fcf6ba 60%, #b38728 80%, #fbf5b7);
  background-size: 220% 220%; animation: foilShift 18s linear infinite;
}
.hero-foil::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(800px 400px at 110% 10%, rgba(255,255,255,.25), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, rgba(0,0,0,.06) 2px 4px);
  mix-blend-mode: overlay; opacity:.35;
}
@keyframes foilShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Foil text for headings */
.foil-text{
  background-image: linear-gradient(135deg, var(--gold-deep), var(--gold), var(--gold-bright), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: foilText 12s linear infinite; background-size: 180% 180%;
}
@keyframes foilText{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Inputs on dark */
input,textarea,select{
  color:var(--gold); background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12); border-radius:9999px; padding:.6rem .9rem;
}
::placeholder{ color: rgba(212,175,55,.55); }

/* Utility colors */
.text-ink{ color: var(--gold); }
.text-muted{ color: rgba(212,175,55,.78); }
.text-gold{ color: var(--gold); }

/* Clamp utilities */
.line-clamp-1,.line-clamp-2,.line-clamp-3{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-1{ -webkit-line-clamp:1 } .line-clamp-2{ -webkit-line-clamp:2 } .line-clamp-3{ -webkit-line-clamp:3 }

/* Ornate gold border around whole page */
.page-frame{ position:relative; min-height:100vh; }
.page-frame::before{
  content:""; position:fixed; inset:14px; border-radius:20px; pointer-events:none; z-index:1000;
  border:4px solid transparent;
  border-image-slice:1;
  border-image-source: conic-gradient(from 30deg, var(--gold-bright), var(--gold), var(--gold-deep), var(--gold), var(--gold-bright));
  box-shadow: 0 0 30px rgba(212,175,55,.25), inset 0 0 18px rgba(212,175,55,.15);
}
.page-frame::after{
  content:""; position:fixed; inset:28px; border-radius:16px; pointer-events:none; z-index:1000;
  border:1px solid rgba(250,220,120,.65);
  box-shadow: inset 0 0 10px rgba(212,175,55,.18);
}
.corner{ position:fixed; width:36px; height:36px; pointer-events:none; z-index:1001; }
.corner::before,.corner::after{
  content:""; position:absolute; background:linear-gradient(90deg, transparent, var(--gold-bright), var(--gold));
}
.corner.tl{ top:30px; left:30px }
.corner.tr{ top:30px; right:30px; transform:scaleX(-1) }
.corner.bl{ bottom:30px; left:30px; transform:scaleY(-1) }
.corner.br{ bottom:30px; right:30px; transform:scale(-1) }
.corner::before{ width:22px; height:2px; top:0; left:0; box-shadow:0 0 8px rgba(212,175,55,.6) }
.corner::after{ width:2px; height:22px; top:0; left:0; box-shadow:0 0 8px rgba(212,175,55,.6) }

/* ===== FORCE GOLD TEXT EVERYWHERE (strong override) ===== */
:where(body, body *){ color: var(--gold) !important; }
a{ color: var(--gold) !important; }
::placeholder{ color: color-mix(in srgb, var(--gold) 60%, transparent) !important; }
/* ======================================================== */

/* ===== Light buttons for listing page (high-contrast) ===== */
.btn-light{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1.1rem; border-radius:9999px; font-weight:700;
  background:#ffffff; color:#111111 !important;
  border:1px solid rgba(0,0,0,.25);
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.9);
  text-decoration:none; transition:.15s ease;
}
.btn-light:hover{ transform: translateY(-1px); background:#f7f7f7; }
.btn-light:active{ transform: translateY(0); filter:brightness(.98); }
.btn-light:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* ensure nested icons/text don’t get forced gold */
.btn-light *{ color:#111111 !important; }