/* Members page: membership cards, tiers, lookup profile */
:root {
  --hand: "Segoe Print", "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive;
  --cond: Impact, Haettenschweiler, "Arial Narrow Bold", "Inter", "Arial Black", sans-serif;
  --navy: #1b2f7a; --cream: #f4ead2; --gold: #e6b84a;
}
.members-page { background: #f3edcf; }
.members-intro { text-align: center; font-size: 17px; }

/* ---------- Card (real card proportions: 3.375 x 2.125 in) ---------- */
.lcard { container-type: inline-size; width: 100%; max-width: 520px; aspect-ratio: 85.6 / 54; perspective: 1400px; cursor: pointer; outline: none; }
.lcard-inner { position: relative; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.3,.7,.3,1); transform-style: preserve-3d; }
.lcard.flipped .lcard-inner { transform: rotateY(180deg); }
.lcard:focus-visible .lcard-inner { box-shadow: 0 0 0 3px #39eaff; }
.lcard-face {
  position: absolute; inset: 0; border-radius: 4.5cqw; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,.45); font-family: var(--cond);
}
/* worn, slightly aged finish */
.lcard-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle at 12% 88%, rgba(120,80,20,.16), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(120,80,20,.12), transparent 26%),
    radial-gradient(rgba(0,0,0,.07) .6px, transparent .9px) 0 0 / 3px 3px;
  box-shadow: inset 0 0 0 .5cqw rgba(255,255,255,.25), inset 0 0 4cqw rgba(60,40,10,.25);
}
.lcard-back { transform: rotateY(180deg); }

/* Front */
.lcard-front { display: grid; grid-template-columns: 58% 42%; background: var(--cream); }
.lc-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4cqw 4cqw 3cqw 7cqw; overflow: hidden;
  /* ticket-stub notch on the left edge */
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 4.2cqw, #000 4.4cqw); mask: radial-gradient(circle at 0 50%, transparent 4.2cqw, #000 4.4cqw); }
.lc-art-bg { position: absolute; inset: 0; }
.lc-logo { position: relative; width: 100%; filter: drop-shadow(.6cqw .8cqw 0 rgba(0,0,0,.45)); }
.lc-label { position: relative; margin-top: 3cqw; font: 800 3.4cqw/1 "Arial Black", Arial, sans-serif; letter-spacing: 1cqw; color: #fff; white-space: nowrap; }
.lc-info { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 3cqw 4cqw 3cqw 4cqw; color: var(--navy); }
.lc-name { font-weight: 900; font-family: var(--cond); line-height: 1.05; letter-spacing: .2cqw; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-num, .lc-since { font: 700 3.3cqw/1.35 var(--cond); letter-spacing: .25cqw; }
.lc-num { margin-top: 2.4cqw; }
.lc-rule { height: .8cqw; background: #d8262b; margin: 2.2cqw 0; border-radius: 1cqw; }
.lc-tag { font: 700 3.6cqw/1.3 var(--cond); letter-spacing: .3cqw; }

/* Tier looks */
.tier-standard .lc-art-bg {
  background:
    linear-gradient(100deg, transparent 80%, #ffd21a 80% 83%, #ff8a1a 83% 86%, #e8262b 86% 89%, #7c3aed 89% 92%, transparent 92%),
    radial-gradient(circle at 30% 30%, #2f63e6, #1438a8 70%);
}
.tier-elite .lcard-front { background: #121212; }
.tier-elite .lc-art-bg { background: radial-gradient(circle at 35% 30%, #2a2a2a, #0b0b0b 70%); box-shadow: inset 0 0 0 1.4cqw #0b0b0b, inset 0 0 0 1.8cqw var(--gold); }
.tier-elite .lc-label { color: var(--gold); }
.tier-elite .lc-info { color: var(--gold); border-left: .5cqw solid var(--gold); }
.tier-elite .lc-rule { background: var(--gold); }
.tier-founding .lc-art-bg {
  background:
    repeating-linear-gradient(transparent 0 2.2cqw, rgba(255,60,180,.55) 2.2cqw 2.5cqw) bottom / 100% 32% no-repeat,
    radial-gradient(circle at 50% 74%, #ffd23a 0 9cqw, #ff7a1a 9cqw 13cqw, transparent 13.2cqw),
    linear-gradient(#1a0b4a, #5a1a8a 45%, #e8407a 74%, #2a0b3a 74.5%);
}
.tier-founding .lc-label { color: #ffd23a; background: rgba(26,11,74,.75); padding: .8cqw 1.6cqw; border-radius: 1cqw; }

/* Back */
.lcard-back { background: var(--cream); color: var(--navy); display: flex; flex-direction: column; }
.lb-stripe { height: 15%; background: #161616; margin-top: 6%; }
.tier-elite .lcard-back { background: #121212; color: var(--gold); }
.tier-elite .lb-stripe { background: linear-gradient(90deg, #b08a2e, #f3d67a, #b08a2e); margin-top: 0; height: 17%; }
.tier-founding .lb-stripe { background: transparent; border-top: 1.2cqw solid var(--navy); border-bottom: .6cqw solid var(--navy); height: 3cqw; margin-top: 3cqw; }
.lb-body { flex: 1; display: grid; grid-template-columns: 38% 26% 36%; align-items: center; padding: 2cqw 4cqw 3cqw; gap: 1cqw; }
.lb-hand { font: 700 5.2cqw/1.05 var(--hand); transform: rotate(-6deg); }
.lb-hand::after { content: ""; display: block; width: 80%; height: .8cqw; margin-top: 1.4cqw; background: #d8262b; border-radius: 1cqw; transform: rotate(-2deg); }
.lb-motto { display: flex; align-items: center; gap: 1.5cqw; margin-top: 4cqw; font: 700 3.2cqw/1.15 var(--hand); }
.lb-motto span { font-size: 7cqw; }
.lb-qr { text-align: center; font: 700 2.8cqw/1.2 var(--cond); letter-spacing: .2cqw; }
.lb-qr svg { width: 88%; display: block; margin: 0 auto 1.4cqw; border: .6cqw solid #fff; }
.lb-right { border-left: .4cqw solid currentColor; padding-left: 2.6cqw; font: 700 2.6cqw/1.3 var(--cond); letter-spacing: .15cqw; text-transform: uppercase; }
.lb-right p { margin: 0 0 2cqw; }
.lb-right b { color: #d8262b; display: block; font-size: 2.3cqw; overflow-wrap: anywhere; }
.tier-elite .lb-right b { color: #ff5a5a; }
.lb-found { font-size: 2.3cqw; }
.lb-found span { font-size: 4cqw; margin-right: 1cqw; }

/* ---------- Page sections ---------- */
.showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 18px 0 8px; }
.showcase-item { text-align: center; }
.showcase-item .lcard { margin: 0 auto 8px; }
.showcase-item:nth-child(1) .lcard { transform: rotate(-2deg); }
.showcase-item:nth-child(3) .lcard { transform: rotate(2deg); }

.lookup {
  max-width: 760px; margin: 22px auto; padding: 18px; text-align: center; background: #050505; color: #eee; border: 4px ridge #5b3cff;
}
.lookup h3 { color: #ffe42d; margin-top: 0; }
.lookup form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lookup input { width: 200px; padding: 8px; font-size: 18px; text-align: center; letter-spacing: 3px; }
.try { margin-top: 10px; font-size: 13px; }
.try button { padding: 3px 8px; font-size: 12px; margin: 2px; }
.member-result { margin: 0 auto 26px; max-width: 100%; }
.nf { max-width: 620px; margin: 0 auto; padding: 14px; text-align: center; background: #fff7cf; color: #111; border: 4px ridge #ffdf2d; }

.profile { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; padding: 18px; background: #050505; color: #eee; border: 4px ridge #ffdf2d; }
.pf-head h3 { margin: 0; color: #fff; font: 900 34px/1 var(--cond); letter-spacing: 1px; }
.pf-head p { margin: 6px 0 12px; color: #bbb; font-size: 13px; }
.pf-tier { display: inline-block; margin-top: 6px; padding: 3px 10px; font: 800 12px Arial, sans-serif; letter-spacing: 1px; color: #111; background: #61a8ff; }
.tier-chip-elite { background: var(--gold); }
.tier-chip-founding { background: linear-gradient(90deg, #ffd23a, #ff7a1a, #e8407a); }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-box { background: #14121c; border: 2px solid #3b3366; padding: 10px 12px; font-size: 13px; }
.pf-box h4 { margin: 0 0 8px; color: #39eaff; font-size: 14px; letter-spacing: 1px; }
.pf-box p { margin: 8px 0 0; line-height: 1.45; }
.pf-badges, .pf-reward { margin-top: 10px; }
.sts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.st { background: #000; border: 2px outset #666; text-align: center; padding: 5px 2px; }
.st b { display: block; color: #ffdf2d; font-size: 18px; }
.st span { font-size: 9px; letter-spacing: 1px; color: #ccc; }
.stamps { display: flex; gap: 6px; }
.stamps i { font-style: normal; font-size: 22px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 2px dashed #555; border-radius: 50%; filter: grayscale(1) opacity(.35); }
.stamps i.on { filter: none; border: 2px solid #ffdf2d; transform: rotate(-12deg); }
.bdg { display: inline-block; margin: 3px; padding: 5px 10px; background: #2a1f4a; border: 2px solid #7c5cff; border-radius: 20px; font-weight: bold; }
.bar { height: 22px; background: #222; border: 2px inset #888; }
.bar span { display: block; height: 100%; background: repeating-linear-gradient(45deg, #ffdf2d 0 10px, #ffb000 10px 20px); }

.choose-title { text-align: center; color: #e22; margin-top: 30px; }
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.tier { position: relative; border: 4px outset #bbb; background: #fff; padding: 14px; box-shadow: 4px 4px 0 #111; font-size: 14px; }
.tier h3 { text-align: center; color: #1646ce; font-size: 22px; margin: 4px 0; }
.tier-price { text-align: center; font: 26px Impact, "Arial Black", Arial, sans-serif; color: #e52d2d; margin-bottom: 8px; }
.tier ul { padding-left: 18px; margin: 0; } .tier li { margin: 6px 0; }
.tier-elite { background: #fff7cf; border-color: #ffd62c; }
.tier-founding { background: linear-gradient(#fff, #ffe9f3); border-color: #e8407a; }
.tier-flag { text-align: center; color: #e8407a; font-weight: bold; }
.tier-limit { text-align: center; font-size: 11px; font-weight: bold; color: #7a1a5a; margin: 0 0 8px; }
.member-note { text-align: center; padding: 12px; background: #050505; color: #fff; border: 3px ridge #aaa; }

@media (max-width: 1000px) {
  .profile { grid-template-columns: 1fr; }
  .pf-card .lcard { margin: 0 auto; }
  .tier-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .showcase { grid-template-columns: 1fr; }
  .pf-grid { grid-template-columns: 1fr; }
  .profile { padding: 10px; }
  .tier-grid { grid-template-columns: 1fr; }
}