/* --- Theme tokens --- */
:root{
  --codex-bg: #0b0e11;
  --codex-ink: #e7e2d2;
  --codex-muted: #B8B2A0;
  --codex-gold: #D8B66D;
  --codex-gold-2: #A9803F;
  --codex-parchment: #d7c5a1;
  --codex-shadow: 0 10px 30px rgba(0,0,0,.45);
  --codex-radius: 18px;
}

/* Page hint (optional) */
body{ background:#0b0e11; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; }

/* --- Card shell --- */
.codex-card{
  width:min(320px, 92vw);
  margin:20px auto;
  perspective: 1000px;
}
.codex-card *{ box-sizing: border-box; }

.card-inner{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%) border-box,
              radial-gradient(120% 100% at 50% 0%, rgba(216,182,109,.25), transparent 60%) border-box,
              #11151a;
  border: 1px solid rgba(216,182,109,.3);
  border-radius: var(--codex-radius);
  box-shadow: var(--codex-shadow);
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.codex-card:hover .card-inner{
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(216,182,109,.25), var(--codex-shadow);
}

/* --- Media face (parchment + image) --- */
.card-media{
  position: relative;
  aspect-ratio: 1;
  /* aspect-ratio: 3/4; */
  background:
    /* parchment grain */
    radial-gradient(140% 100% at 50% 0%, rgba(0,0,0,.08), transparent 55%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.02) 0 2px, rgba(255,255,255,.02) 2px 4px),
    var(--codex-parchment);
  overflow: hidden;
}
.card-media img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit: cover;
 
}

/* Ornate frame line */
.card-frame{
  position:absolute; inset:10px;
  border-radius: calc(var(--codex-radius) - 10px);
  border: 1px solid rgba(216,182,109,.55);
  box-shadow: inset 0 0 0 1px rgba(169,128,63,.45);
  pointer-events:none;
}

/* Subtle sigil watermark (inline SVG as background) */
.card-sigil{
  position:absolute; inset:0;
  background:
    radial-gradient(closest-side, rgba(0,0,0,.35), transparent 70%) center/125% 125% no-repeat,
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>\
        <g fill='none' stroke='%23D8B66D' stroke-opacity='.28'>\
          <circle cx='100' cy='100' r='72'/>\
          <path d='M100 30v140M30 100h140M60 60l80 80M140 60l-80 80'/>\
        </g>\
      </svg>"
    ) center/70% 70% no-repeat;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* --- Body --- */
.card-body{
  padding: 16px 16px 18px;
  background:
    linear-gradient(180deg, rgba(216,182,109,.07), transparent 35%),
    #0e1217;
  color: var(--codex-ink);
}
.card-title{
  margin: 0 0 2px;
  font-size: 1.1rem;
  letter-spacing:.4px;
}
.card-sub{
  margin: 0 0 10px;
  font-size:.84rem;
  color: var(--codex-muted);
}
.card-text{
  margin: 0 0 14px;
  font-size:.95rem;
  line-height:1.45;
  color: #ddd8c8;
}

/* CTA */
.card-cta{
  appearance:none;
  border:1px solid var(--codex-gold-2);
  background:
    linear-gradient(180deg, rgba(216,182,109,.25), rgba(169,128,63,.25)),
    transparent;
  color: var(--codex-ink);
  padding:10px 14px;
  border-radius: 12px;
  font-weight:600;
  letter-spacing:.3px;
  cursor:pointer;
  transition: filter .2s, box-shadow .2s, transform .2s, border-color .2s;
}
.card-cta:hover{
  filter: brightness(1.05);
  box-shadow: 0 0 0 3px rgba(216,182,109,.18);
  border-color: var(--codex-gold);
  transform: translateY(-1px);
}
.card-cta:active{ transform: translateY(0); }

/* Small screens */
@media (max-width:420px){
  .card-text{ font-size:.92rem; }
}
/* QR overlay on the card image */
.card-media { position: relative; }

.qr-overlay-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none; /* clicks go through unless we wrap link */
}

.qr-overlay-link { 
  pointer-events: auto; /* make the QR clickable */
  display: inline-block;
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  padding: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.qr-overlay {
  position: relative !important;
  display: block !important;
 /*  width: clamp(96px, 38%, 180px) !important; */ /* responsive size */
  height: auto !important;
  border-radius: 8px !important;
}