/* ───────────────── Liz's Safari — the card deck ─────────────────
   Same lodge palette as the front door. Cards are real cards:
   a face, a weight, a back you turn over.
──────────────────────────────────────────────────────────────── */

.cards-page{background:var(--sand)}
.cards-page header{position:sticky;top:0;background:var(--cream);border-bottom:1px solid var(--line);color:var(--ink)}

.deck-head{padding:clamp(38px,6vw,74px) 0 clamp(22px,3vw,34px)}
.deck-head h1{font-size:clamp(2.1rem,5.2vw,3.9rem);margin:.18em 0 .5em}
.deck-head .lede{max-width:60ch;color:var(--ink-soft);font-size:clamp(1.02rem,.5vw + .92rem,1.18rem)}

.deck-tools{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between;margin-top:clamp(24px,3.4vw,38px);
}
.filters{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font:inherit;font-weight:500;font-size:.9rem;cursor:pointer;
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-soft);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .12s var(--ease);
}
.chip:hover{border-color:var(--amber);color:var(--ink)}
.chip:active{transform:translateY(1px)}
.chip.is-on{background:var(--teak);border-color:var(--teak);color:var(--paper)}
.chip-n{opacity:.55;font-variant-numeric:tabular-nums;margin-left:3px}
.chip-ghost{background:transparent;border-style:dashed}
.chip:focus-visible,.card:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

.deck-wrap{padding-bottom:clamp(60px,8vw,110px)}
.deck{
  display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
}
@media (max-width:520px){.deck{grid-template-columns:1fr}}

/* ── the card ───────────────────────────────────────────────── */
.card{
  all:unset;display:block;cursor:pointer;
  perspective:1400px;position:relative;
}
.card-in{
  display:grid;                 /* both faces stack in one cell, so the card
                                   grows to fit whichever side is taller */
  transform-style:preserve-3d;
  transition:transform .62s var(--ease);
  will-change:transform;
}
.card.is-flipped .card-in{transform:rotateY(180deg)}
.card:hover .card-in{transform:translateY(-5px)}
.card.is-flipped:hover .card-in{transform:rotateY(180deg) translateY(-5px)}

.face{
  grid-area:1/1;border-radius:var(--r);overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--paper);
  box-shadow:0 1px 2px rgba(36,26,16,.1), 0 14px 34px -18px rgba(36,26,16,.42);
  border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.face--back{transform:rotateY(180deg);background:var(--cream)}

/* front */
.card-art{position:relative;flex:1 1 auto;aspect-ratio:4/3.5;background:var(--teak);overflow:hidden}
.card-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card-art img{transform:scale(1.045)}
.card-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,17,12,.82) 0%,rgba(20,17,12,.18) 46%,rgba(20,17,12,0) 72%);
}
.card-emoji{
  position:absolute;top:11px;left:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:19px;line-height:1;
  background:rgba(255,253,248,.9);backdrop-filter:blur(4px);
  box-shadow:0 2px 10px rgba(20,17,12,.28);
}
.card-name{
  position:absolute;left:16px;right:16px;bottom:13px;z-index:2;color:var(--paper);
}
.card-name h3{font-size:clamp(1.16rem,1.5vw,1.36rem);line-height:1.1}
.card-tag{
  display:block;margin-top:5px;font-size:.775rem;font-weight:500;
  letter-spacing:.045em;text-transform:uppercase;color:rgba(255,253,248,.76);
}
.card-hook{
  flex:0 0 auto;padding:15px 17px 16px;
  font-size:.925rem;line-height:1.5;color:var(--ink-soft);
  border-top:1px solid var(--line);
}
.card-turn{
  display:block;margin-top:11px;font-size:.755rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--amber);
}

/* back */
.face--back{padding:18px 18px 16px;gap:0}
.back-name{font-size:1.06rem;margin-bottom:2px}
.back-kicker{
  font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--amber);margin:0 0 10px;
}
.back-facts{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.back-facts li{
  position:relative;padding-left:15px;font-size:.85rem;line-height:1.47;color:var(--ink);
}
.back-facts li::before{
  content:"";position:absolute;left:0;top:.56em;
  width:6px;height:6px;border-radius:50%;background:var(--leaf);
}
.back-stats{
  margin-top:13px;padding-top:12px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
  font-size:.775rem;line-height:1.4;
}
.back-stats dt{color:var(--ink-faint);font-weight:500}
.back-stats dd{margin:0;color:var(--ink-soft)}
.back-src{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:.72rem;color:var(--ink-faint);
}
.back-src a{color:var(--amber);text-decoration:underline;text-underline-offset:2px}

.deck-note{
  margin:clamp(30px,4vw,48px) auto 0;max-width:72ch;text-align:center;
  font-size:.83rem;line-height:1.6;color:var(--ink-faint);
}

.card.is-hidden{display:none}

@media (prefers-reduced-motion:reduce){
  .card-in{transition:none}
  .card:hover .card-in{transform:none}
  .card.is-flipped:hover .card-in{transform:rotateY(180deg)}
  .card-art img,.card:hover .card-art img{transition:none;transform:none}
}

/* footer bits reused on this page */
.foot-mark{
  font-family:"Bespoke Slab",Georgia,serif;font-weight:700;
  font-size:1.15rem;color:var(--paper);margin:0 !important;
}
.foot-credit{font-size:.9rem}
.foot-credit p:first-child{margin-top:0 !important}
.foot-credit strong{color:var(--paper);font-weight:700}