/* The Psychic Group. Site created by SiteRevive.design © 2026. */
/* The reader deck: every directory listing printed as a card from one oracle deck.

   One card, many printings. The base card (warm paper, brass edge, inner hairline, grain) is the same for
   everyone; cardArt.js adds each reader's stable theme as classes: frame, corners, edge marks, a faint
   celestial pattern, paper tint, and the portrait composition (portrait frame, motif halo, small detail).

   Layout: the number and role run along the top. The portrait floats at the right of the name, so the
   name and website sit beside it and the description runs full width once it has passed. Drawings live in
   the portrait column and the card edges only, never beneath the words.

   Loaded after pages.css on the directory and the apply page, because the apply preview is described to
   practitioners as "the same card the directory uses" and has to stay exactly that. */

@property --ci { syntax: "<length>"; inherits: true; initial-value: 3px; }

/* ---------- base card ---------- */
.listing:not(.listing--empty) {
  --paper: #fbf6eb;
  --plum: #4b2358;
  --plum-lit: #5d2c6c;
  --ivory: #fcf7ed;
  --edge: color-mix(in oklch, var(--gold-deep) 44%, transparent);
  --hair: color-mix(in oklch, var(--gold-deep) 26%, transparent);
  --art: var(--gold-deep);
  --art-op: .2;
  --s: 1;
  --corner: 24px;
  position: relative;
  isolation: isolate;
  gap: .55rem;
  padding: 1.6rem 1.5rem 1.45rem;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background:
    radial-gradient(120% 80% at 12% 0%, color-mix(in oklch, var(--gold-lit) 16%, transparent), transparent 62%),
    radial-gradient(85% 60% at 100% 100%, color-mix(in oklch, var(--violet-soft) 14%, transparent), transparent 68%),
    var(--paper);
  box-shadow: 0 1px 1px rgb(41 18 72 / .05), 0 12px 28px -18px rgb(41 18 72 / .3);
  transition: translate .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), --ci .3s var(--ease);
}
.deck--tex-parchment { --paper: #f8f1e5; }
.deck--tex-cream { --paper: #fcf7ed; }

/* inner hairline, the second rule of a printed card */
.listing:not(.listing--empty)::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 0;
  border: 1px solid var(--hair);
  border-radius: 5px;
  pointer-events: none;
}

/* paper grain, barely there: one tiny tile, decoded once and shared by every card */
.listing:not(.listing--empty)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
}

/* every word and control sits above the ornament layer */
.listing:not(.listing--empty) > :not(.deck-art):not(.pv-stamp) { position: relative; z-index: 2; }
.listing--preview .pv-stamp { z-index: 3; }

/* ---------- ornament layer: corners, edge marks, pattern (all CSS backgrounds from cardArt.js) ---------- */
.deck-art { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; }
.deck-art::before, .deck-art::after { content: ""; position: absolute; }
.deck-art::before { inset: 0; }
/* the celestial pattern keeps to the portrait side and fades out before it reaches the words */
.deck-art::after {
  inset: 0;
  border-radius: inherit;
  background: no-repeat right -10px top -8px / min(300px, 80%) auto;
  opacity: .1;
  -webkit-mask-image: linear-gradient(250deg, #000 18%, transparent 58%);
  mask-image: linear-gradient(250deg, #000 18%, transparent 58%);
}

/* ---------- frames: six members of one family ---------- */
.deck--frame-double::before { box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--hair); }
.deck--frame-nouveau::before { inset: 8px; border-radius: 18px; }
.deck--frame-nouveau { --corner: 28px; }
.deck--frame-celestial::before { inset: 7px; }
.deck--frame-manuscript::before { inset: 8px; border: 3px double var(--hair); border-radius: 2px; }
.deck--frame-botanical::before { border-color: color-mix(in oklch, var(--sage) 30%, transparent); border-radius: 12px; }
.deck--frame-geometric { border-radius: 4px; }
.deck--frame-geometric::before { border-radius: 1px; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px color-mix(in oklch, var(--gold-deep) 12%, transparent); }

/* ---------- rank: the number mark of a tarot card (the seat number, never a rating) ---------- */
.listing:not(.listing--empty) .numeral {
  width: auto;
  min-width: 36px;
  height: 46px;
  padding: 6px .5rem 0;
  color: var(--gold-dark);
  font: 700 .82rem/1 var(--f-display);
  letter-spacing: .06em;
  isolation: isolate;
}
.listing:not(.listing--empty) .numeral svg { display: none; }
.listing:not(.listing--empty) .numeral::before,
.listing:not(.listing--empty) .numeral::after {
  content: "";
  position: absolute;
  z-index: -1;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.listing:not(.listing--empty) .numeral::before { inset: 0; background: color-mix(in oklch, var(--gold-deep) 55%, transparent); }
.listing:not(.listing--empty) .numeral::after {
  inset: 1px;
  clip-path: polygon(6.5px 0, calc(100% - 6.5px) 0, 100% 6.5px, 100% calc(100% - 6.5px), calc(100% - 6.5px) 100%, 6.5px 100%, 0 calc(100% - 6.5px), 0 6.5px);
  background:
    radial-gradient(circle at 50% 9px, var(--gold-deep) 1.3px, transparent 1.8px),
    linear-gradient(180deg, color-mix(in oklch, var(--vellum) 80%, var(--paper)), var(--paper));
}

/* ---------- role: Admin, Moderator ---------- */
.listing:not(.listing--empty) .ls-top { align-items: center; }
.listing:not(.listing--empty) .ls-role {
  padding: .38rem .66rem .34rem;
  border: 1px solid color-mix(in oklch, var(--gold-deep) 48%, transparent);
  border-radius: 3px;
  background: color-mix(in oklch, var(--gold-lit) 34%, var(--paper));
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 2.6px color-mix(in oklch, var(--gold-deep) 16%, transparent);
  color: var(--gold-dark);
  font: 700 .64rem/1 var(--f-display);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.listing:not(.listing--empty) .ls-role--moderator { background: color-mix(in oklch, var(--violet-soft) 30%, var(--paper)); border-color: color-mix(in oklch, var(--seed-violet) 34%, transparent); color: var(--violet-deep); }
.listing:not(.listing--empty) .ls-where { font: 600 .7rem/1.2 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); text-align: right; }

/* ---------- name, website, description ---------- */
.listing:not(.listing--empty) .ls-body { display: flow-root; }
.listing:not(.listing--empty) .ls-name {
  margin: .3rem 0 .15rem;
  font: 600 clamp(1.18rem, 1.02rem + .5vw, 1.36rem)/1.18 var(--f-display);
  letter-spacing: .02em;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.listing:not(.listing--empty) .ls-domain { margin: 0; font-size: .9rem; font-weight: 600; letter-spacing: .01em; color: var(--seed-violet); }
.listing:not(.listing--empty) .ls-note {
  position: relative;
  margin: .85rem 0 0;
  padding-top: .85rem;
  font-size: .97rem;
  line-height: 1.55;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
/* a rule that breaks into a diamond, the kicker mark from the rest of the site */
.listing:not(.listing--empty) .ls-note::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 9'%3E%3Cpath d='M0 4.5h33' stroke='%238b5900' stroke-opacity='.55' fill='none'/%3E%3Cpath d='M40 1l3.5 3.5L40 8l-3.5-3.5z' fill='%238b5900' fill-opacity='.7'/%3E%3C/svg%3E") 0 0 / 46px 9px no-repeat;
}

/* ---------- portrait composition ---------- */
.deck-visual {
  --ring: calc(var(--s) * 112px);
  --mid: calc(var(--ring) / 2);
  position: relative;
  float: right;
  width: calc(var(--s) * 128px);
  height: calc(var(--ring) + var(--s) * 22px);
  margin: 0 calc(var(--s) * -8px) .35rem calc(var(--s) * 10px);
  pointer-events: none;
}
.deck-visual > * { position: absolute; }
.listing:not(.listing--empty) { --art-op: .36; }
.deck--accent-lavender { --art: var(--seed-violet); --art-op: .26; }
.deck--accent-plum { --art: var(--plum); --art-op: .27; }
.deck--accent-sage { --art: var(--sage); --art-op: .32; }

/* the motif behind the portrait: one drawing, four placements. A soft round mask fades its outer edge,
   so however wide the drawing is it never reaches into the words beside it. */
.deck-halo {
  left: 50%;
  top: var(--mid);
  width: calc(var(--s) * 164px);
  aspect-ratio: 1;
  translate: -50% -50%;
  rotate: var(--tilt, 0deg);
  color: var(--art);
  opacity: var(--art-op);
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
  transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.deck--pos-orbit .deck-halo { width: calc(var(--s) * 184px); opacity: calc(var(--art-op) * .8); }
.deck--pos-offset .deck-halo { left: 60%; top: calc(var(--mid) - var(--s) * 10px); width: calc(var(--s) * 142px); }
.deck--pos-below .deck-halo { top: calc(var(--mid) + var(--s) * 26px); width: calc(var(--s) * 128px); }

.deck-ring { left: calc(50% - var(--ring) / 2); top: 0; width: var(--ring); height: var(--ring); color: var(--gold-deep); opacity: .72; transition: translate .3s var(--ease); }
.deck-detail { left: 50%; bottom: 0; width: calc(var(--s) * 60px); height: calc(var(--s) * 27px); translate: -50% 0; color: var(--sage); opacity: .7; }

/* the medallion: thin gold edge, ivory matte, a plum inner line */
.deck-medallion {
  --pw: calc(var(--s) * 80px);
  --ph: calc(var(--s) * 96px);
  --shape: 50%;
  left: calc(50% - var(--pw) / 2);
  top: calc(var(--mid) - var(--ph) / 2);
  width: var(--pw);
  height: var(--ph);
  box-sizing: border-box;
  padding: calc(var(--s) * 3px);
  border: 1.5px solid color-mix(in oklch, var(--gold-deep) 72%, transparent);
  border-radius: var(--shape);
  background: var(--ivory);
  box-shadow: 0 4px 12px -8px rgb(41 18 72 / .45);
}
.deck--pf-arch .deck-medallion { --shape: 50% 50% 10px 10px / 42% 42% 10px 10px; }
.deck--pf-sunburst .deck-medallion, .deck--pf-antique .deck-medallion { --pw: calc(var(--s) * 84px); --ph: calc(var(--s) * 84px); }
.deck--pf-nouveau .deck-medallion { --pw: calc(var(--s) * 76px); --ph: calc(var(--s) * 94px); --shape: 38px / 47px; }

.deck-photo, .deck-initial {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--shape);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--plum) 45%, transparent);
}
.deck-photo { object-fit: cover; object-position: 50% 30%; background: color-mix(in oklch, var(--vellum) 60%, var(--ivory)); }
/* no photo: the reader's initial, set like a capital in an old book */
.deck-initial {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in oklch, var(--gold-lit) 30%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklch, var(--violet-soft) 34%, var(--ivory)), color-mix(in oklch, var(--vellum) 55%, var(--ivory)));
  color: var(--plum);
  font: 600 calc(var(--s) * 2.15rem)/1 var(--f-display);
  padding-top: .06em;
}
.deck--pf-arch .deck-photo, .deck--pf-arch .deck-initial { border-radius: 50% 50% 8px 8px / 42% 42% 8px 8px; }
.deck--pf-nouveau .deck-photo, .deck--pf-nouveau .deck-initial { border-radius: 35px / 44px; }

/* ---------- service chips ---------- */
.listing:not(.listing--empty) .ls-tags { gap: .32rem; margin: .5rem 0 .1rem; }
.listing:not(.listing--empty) .ls-tags li {
  padding: .24rem .52rem;
  border: 1px solid color-mix(in oklch, var(--ink) 9%, transparent);
  border-radius: 4px;
  background: color-mix(in oklch, var(--sage-soft) 70%, var(--paper));
  color: var(--ink);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .005em;
}
/* Scoped exactly like the base chip rule above, or its :not() outranks them and every service turns sage */
.listing:not(.listing--empty) .ls-tags li[data-svc="0"] { background: color-mix(in oklch, var(--violet-soft) 48%, var(--paper)); }
.listing:not(.listing--empty) .ls-tags li[data-svc="1"] { background: color-mix(in oklch, var(--violet-lit) 26%, var(--paper)); }
.listing:not(.listing--empty) .ls-tags li[data-svc="2"] { background: color-mix(in oklch, var(--gold-lit) 46%, var(--paper)); }
.listing:not(.listing--empty) .ls-tags li[data-svc="3"] { background: color-mix(in oklch, color-mix(in oklch, var(--violet-soft), var(--sage-soft)) 60%, var(--paper)); }
.listing:not(.listing--empty) .ls-tags li[data-svc="4"] { background: color-mix(in oklch, var(--sage-soft) 80%, var(--paper)); }
.listing:not(.listing--empty) .ls-tags li[data-svc="5"] { background: color-mix(in oklch, var(--sage-soft) 45%, color-mix(in oklch, var(--gold-lit) 30%, var(--paper))); }

/* ---------- call to action: deep plum, ivory lettering, a gold arrow ---------- */
.listing:not(.listing--empty) .ls-links { padding-top: .75rem; }
.listing:not(.listing--empty) .ls-visit {
  min-height: 46px;
  gap: .55rem;
  padding: 0 1.05rem 0 1.2rem;
  border: 1px solid var(--plum);
  border-radius: 5px;
  background: var(--plum);
  box-shadow: inset 0 0 0 2px var(--plum), inset 0 0 0 3px color-mix(in oklch, var(--gold-lit) 42%, transparent);
  color: var(--ivory);
  font: 650 .92rem/1 var(--f-body);
  letter-spacing: .02em;
  transition: background-color .25s var(--ease), translate .25s var(--ease), box-shadow .25s var(--ease);
}
.listing:not(.listing--empty) .ls-visit svg { width: 16px; height: 16px; color: var(--gold-lit); transition: translate .25s var(--ease); }
.listing:not(.listing--empty) .ls-visit:hover {
  color: var(--ivory);
  background: var(--plum-lit);
  box-shadow: inset 0 0 0 2px var(--plum-lit), inset 0 0 0 3px color-mix(in oklch, var(--gold-lit) 75%, transparent), 0 8px 16px -10px rgb(41 18 72 / .6);
  translate: 0 -1px;
}
.listing:not(.listing--empty) .ls-visit:hover svg { translate: 2px 0; }
.listing:not(.listing--empty) .ls-visit:focus-visible { outline-offset: 3px; }
/* the apply preview shows the button without being one, sized like the directory's */
.listing--preview .ls-visit { cursor: default; align-self: flex-start; margin-top: .75rem; }
.listing:not(.listing--empty) .ls-nosite { font-size: .9rem; }

/* ---------- hover: the card lifts a little and the print warms ---------- */
@media (hover: hover) {
  .listing.deck:not(.listing--preview):hover {
    --ci: 1px;
    translate: 0 -3px;
    border-color: color-mix(in oklch, var(--gold-deep) 70%, transparent);
    box-shadow: 0 2px 3px rgb(41 18 72 / .06), 0 22px 40px -20px rgb(41 18 72 / .38);
  }
  .listing.deck:not(.listing--preview):hover .deck-halo { opacity: calc(var(--art-op) * 1.35); }
  .listing.deck:not(.listing--preview):hover .deck-ring { translate: 0 -2px; }
}

/* ---------- the table the cards are laid on: a faded poster printed on the page ---------- */
.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../img/deck-hero.svg") 50% 72px / max(1280px, 100%) auto no-repeat;
}
.sec.dir::before, .sec.dir::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 220px;
  pointer-events: none;
  background: url("../img/deck-edge.svg") 0 180px / 220px auto repeat-y;
}
.sec.dir::before { left: 0; }
.sec.dir::after { right: 0; scale: -1 1; background-position: 0 820px; }
/* shown only once the list holds cards: before the cards render the list is short, and a drawing pinned to
   its bottom would sit on screen and then jump about 6,500px down (a 0.113 layout shift at 1440). A drawing
   that first appears already in place is not a shift. With JS off, the noscript notice is a card, so it shows. */
.sec.dir > .wrap:has(.listing)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--pad-sec) * -1);
  z-index: -1;
  width: 100vw;
  height: min(420px, 29vw);
  translate: -50% 0;
  pointer-events: none;
  background: url("../img/deck-foot.svg") 50% 100% / max(1400px, 100%) auto no-repeat;
}

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .sec.dir::before, .sec.dir::after { width: 150px; background-size: 150px auto; opacity: .7; }
}

@media (max-width: 960px) {
  .listing:not(.listing--empty) { --s: .88; }
  .sec.dir::before, .sec.dir::after { display: none; }
}

@media (max-width: 760px) {
  .listing:not(.listing--empty) { --s: .74; --corner: 18px; gap: .4rem; padding: 1.3rem 1.15rem 1.15rem; }
  .listing:not(.listing--empty)::before { inset: 6px; }
  .deck--frame-nouveau { --corner: 20px; }
  /* one column on a phone: the pattern and edge marks step back, the portrait keeps its place */
  .deck-art::after, .deck-art::before { display: none; }
  .deck-detail { display: none; }
  .deck-visual { height: var(--ring); margin-left: .75rem; }
  .deck--pos-below .deck-halo { top: calc(var(--mid) + var(--s) * 14px); }
  .listing:not(.listing--empty) .ls-name { font-size: 1.2rem; }
  .listing:not(.listing--empty) .ls-note { font-size: .95rem; }
  /* the services show again on the card: compact, but readable */
  .listing.deck .ls-tags { display: flex; }
  .listing:not(.listing--empty) .ls-tags li { font-size: .78rem; }
  .listing:not(.listing--empty) .ls-visit { width: 100%; justify-content: center; }
  .phero::before { background-size: 1000px auto; background-position: 68% 60px; opacity: .75; }
  .sec.dir > .wrap:has(.listing)::after { height: 200px; background-size: 900px auto; }
}

@media (prefers-reduced-motion: reduce) {
  .listing:not(.listing--empty), .deck-halo, .deck-ring, .listing:not(.listing--empty) .ls-visit { transition: none; }
  /* matched to the hover rules' own specificity, or those rules still lift the card */
  .listing.deck:not(.listing--preview):hover, .listing.deck:not(.listing--preview):hover .deck-ring, .listing:not(.listing--empty) .ls-visit:hover,
  .listing:not(.listing--empty) .ls-visit:hover svg { translate: none; }
}