/* KOPIT tier cards: one card design in six materials (12 Nov 2026).
   Used by membership.html and the homepage membership invitation.
   The markup is made by js/kopit-tiercards.js from <span data-tiercard="kb|kp|kl|ki1|ki2|ki3">.
   Size a card with --w (default 300px). Everything inside scales from it. */

.tc{--w:300px;position:relative;display:block;width:var(--w);aspect-ratio:1.586;
  border-radius:calc(var(--w)*.045);overflow:hidden;isolation:isolate;
  font-size:calc(var(--w)/30);line-height:1.15;color:var(--tc-ink);background:var(--tc-mat);
  box-shadow:0 1.6em 3.6em rgba(10,8,4,.42),0 .2em .6em rgba(10,8,4,.32),inset 0 0 0 1px var(--tc-edge);
  text-align:left;user-select:none;-webkit-user-select:none}
.tc *{pointer-events:none}
.tc-field{position:absolute;width:190%;height:300%;right:-105%;bottom:-165%;color:var(--tc-line);z-index:-1}
.tc-field svg{width:100%;height:100%;display:block}
.tc:after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,var(--tc-sheen,.28)) 44%,transparent 58%);mix-blend-mode:soft-light}
.tc-frm{position:absolute;inset:.7em;border:1px solid var(--tc-line2);border-radius:.6em}
.tc-top{position:absolute;left:1.6em;right:1.6em;top:1.35em;display:flex;align-items:center;gap:.6em}
.tc-top img{width:2.1em;height:2.1em;object-fit:contain;filter:var(--tc-logo,none)}
.tc-wm{font-family:'Cinzel',serif;font-weight:600;font-size:1.45em;letter-spacing:.32em}
.tc-est{margin-left:auto;font-family:'Cinzel',serif;font-size:.78em;letter-spacing:.22em;opacity:.8;white-space:nowrap}
.tc-ed{position:absolute;right:1.6em;top:4.1em;font-family:'Cinzel',serif;font-size:.72em;letter-spacing:.18em;border:1px solid currentColor;padding:.25em .6em;opacity:.9;white-space:nowrap}
.tc-tier{position:absolute;left:1.6em;bottom:4.3em;font-family:'Cinzel',serif;font-weight:600;font-size:1.75em;letter-spacing:.08em;line-height:1;white-space:nowrap}
.tc-bm{position:absolute;left:1.85em;bottom:2.9em;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.2em;opacity:.88;white-space:nowrap}
.tc-no{position:absolute;left:1.6em;bottom:1.35em;font-family:'Cinzel',serif;font-size:.86em;letter-spacing:.3em;opacity:.75;white-space:nowrap}
.tc-seal{position:absolute;right:1.5em;bottom:1.2em;width:4.2em;height:4.2em;color:var(--tc-seal)}
.tc-gold{background:linear-gradient(180deg,#f7e4a6,#c9a24a 60%,#f0d48a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* The six materials */
.tc-pearl{--tc-mat:radial-gradient(130% 150% at 15% 0%,#fffdf8 0%,#f1eadc 42%,#ddd3bf 100%);--tc-ink:#1b2840;--tc-line:rgba(150,120,60,.22);--tc-line2:rgba(150,120,60,.38);--tc-edge:rgba(160,130,70,.35);--tc-seal:#9a7b3c;--tc-sheen:.5}
.tc-bronze{--tc-mat:linear-gradient(135deg,#4a2a12 0%,#8f5a30 32%,#c8915f 50%,#8a5428 66%,#3f2410 100%);--tc-ink:#fbe8d2;--tc-line:rgba(255,220,180,.16);--tc-line2:rgba(255,220,180,.30);--tc-edge:rgba(255,210,170,.35);--tc-seal:#f2c896;--tc-logo:brightness(1.3)}
.tc-silver{--tc-mat:linear-gradient(135deg,#7e8791 0%,#cfd5db 32%,#f7f9fb 50%,#b4bcc5 66%,#6f7882 100%);--tc-ink:#13213a;--tc-line:rgba(20,40,70,.16);--tc-line2:rgba(20,40,70,.28);--tc-edge:rgba(255,255,255,.6);--tc-seal:#3e4b5c;--tc-sheen:.45}
.tc-gold-m{--tc-mat:linear-gradient(135deg,#7a5a18 0%,#c9a24a 30%,#f5e0a0 50%,#c49638 66%,#6e4f14 100%);--tc-ink:#2a1c05;--tc-line:rgba(60,40,0,.16);--tc-line2:rgba(60,40,0,.30);--tc-edge:rgba(255,240,200,.6);--tc-seal:#4f3a0e;--tc-logo:brightness(.55) sepia(1)}
.tc-black{--tc-mat:linear-gradient(135deg,#0b0b0d 0%,#232428 48%,#0a0a0c 100%);--tc-ink:#e8d6a2;--tc-line:rgba(201,168,76,.13);--tc-line2:rgba(201,168,76,.34);--tc-edge:rgba(201,168,76,.35);--tc-seal:#C9A84C;--tc-sheen:.12}
.tc-obsidian{--tc-mat:radial-gradient(140% 120% at 85% 0%,#1a2333 0%,#070a10 50%,#000 100%);--tc-ink:#e9d394;--tc-line:rgba(216,184,100,.16);--tc-line2:rgba(216,184,100,.55);--tc-edge:rgba(216,184,100,.85);--tc-seal:#d8b864;--tc-sheen:.1}
.tc-obsidian .tc-frm{border-width:1.5px;box-shadow:inset 0 0 0 .25em rgba(0,0,0,.6),inset 0 0 0 calc(.25em + 1px) rgba(216,184,100,.35)}

/* Small round swatch of a material (for tier dots and pills) */
.tc-dot{display:inline-block;width:14px;height:14px;border-radius:50%;flex:none;background:var(--tc-mat);box-shadow:inset 0 0 0 1px var(--tc-edge),0 1px 4px rgba(0,0,0,.3)}

/* A fan of the six cards (hero and homepage invitation) */
.tc-fan{position:relative;height:var(--fan-h,440px)}
.tc-fan .tc{position:absolute;left:50%;bottom:var(--fan-b,40px);--w:var(--fan-w,320px);transform-origin:50% 135%;
  transform:translateX(calc(-50% + var(--dx))) rotate(var(--rot));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.tc-fan .tc:nth-child(1){--rot:-27deg;--dx:-85px;z-index:1}
.tc-fan .tc:nth-child(2){--rot:-16.5deg;--dx:-51px;z-index:2}
.tc-fan .tc:nth-child(3){--rot:-6deg;--dx:-17px;z-index:3}
.tc-fan .tc:nth-child(4){--rot:4.5deg;--dx:17px;z-index:4}
.tc-fan .tc:nth-child(5){--rot:15deg;--dx:51px;z-index:5}
.tc-fan .tc:nth-child(6){--rot:25.5deg;--dx:85px;z-index:6}
@media(hover:hover){
  .tc-fan:hover .tc:nth-child(1){--rot:-31deg;--dx:-105px}
  .tc-fan:hover .tc:nth-child(2){--rot:-19deg;--dx:-63px}
  .tc-fan:hover .tc:nth-child(3){--rot:-7deg;--dx:-21px}
  .tc-fan:hover .tc:nth-child(4){--rot:5deg;--dx:21px}
  .tc-fan:hover .tc:nth-child(5){--rot:17deg;--dx:63px}
  .tc-fan:hover .tc:nth-child(6){--rot:29deg;--dx:105px}
}
@media(max-width:600px){
  .tc-fan{--fan-h:250px;--fan-w:150px;--fan-b:26px}
  .tc-fan .tc:nth-child(1){--rot:-18deg;--dx:-55px}
  .tc-fan .tc:nth-child(2){--rot:-11deg;--dx:-33px}
  .tc-fan .tc:nth-child(3){--rot:-4deg;--dx:-11px}
  .tc-fan .tc:nth-child(4){--rot:3deg;--dx:11px}
  .tc-fan .tc:nth-child(5){--rot:10deg;--dx:33px}
  .tc-fan .tc:nth-child(6){--rot:17deg;--dx:55px}
}
@media(prefers-reduced-motion:reduce){.tc-fan .tc{transition:none}}