/* Original artwork and small symbolic illustrations support the reading explanations. */
.cards-page .reading-feature-column { min-width:0; }
.cards-page .reading-card-feature {
  display:block; position:relative; max-width:380px; margin:30px auto 0;
  text-align:center; isolation:isolate;
}
.cards-page .reading-card-feature::before {
  content:""; position:absolute; inset:-4% 0 28%; border-radius:50%; z-index:-1;
  background:radial-gradient(ellipse,rgba(216,189,130,.16),transparent 67%);
}
.cards-page .reading-feature-art {
  display:block; animation:reading-card-float 9s ease-in-out infinite;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.2));
}
.cards-page .reading-feature-art svg,
.cards-page .reading-spread-card svg,
.cards-page .realm-example-art svg {
  display:block; width:100%; height:auto; overflow:hidden;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.cards-page .reading-feature-keys {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
}
.cards-page .reading-feature-keys small {
  display:block; color:var(--muted); font-size:12px; font-weight:500; line-height:1.6;
}
.cards-page .reading-feature-keys strong {
  display:block; font-size:16px; font-weight:600; line-height:1.7; color:var(--ink);
}
.cards-page .reading-feature-action {
  display:inline-flex; align-items:center; gap:20px; min-height:44px;
  border-bottom:1px solid var(--line); margin-top:12px;
  color:var(--gold); font-size:15px; font-weight:600;
}
.cards-page .reading-card-feature:hover .reading-feature-action { border-color:var(--gold); }
.cards-page .reading-spread-figure { max-width:430px; margin:28px auto 0; }
.cards-page .reading-spread-stage {
  position:relative; width:100%; aspect-ratio:650 / 355; isolation:isolate;
  animation:reading-spread-float 11s ease-in-out infinite;
}
.cards-page .reading-spread-stage::before {
  content:""; position:absolute; inset:0 0 -8%; z-index:-1;
  background:radial-gradient(ellipse,rgba(216,189,130,.1),transparent 70%);
}
.cards-page .reading-spread-connections {
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  color:var(--gold);
}
.cards-page .reading-spread-connections path { stroke:currentColor; stroke-width:2; opacity:.3; }
.cards-page .reading-spread-card {
  display:block; position:absolute; width:40%; top:3.38%;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.14));
}
.cards-page .spread-first { left:0; }
.cards-page .spread-second { left:30%; top:35.07%; }
.cards-page .spread-third { left:60%; }
.cards-page .reading-spread-figure figcaption {
  text-align:center; margin-top:18px; font-size:13px; line-height:1.75;
}
.cards-page .card-learning-flow .wheel-positions {
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 30px; margin:26px 0;
}
.cards-page .card-learning-flow .wheel-positions li {
  display:grid; grid-template-columns:48px minmax(0,1fr); align-items:start; gap:14px;
  padding-top:20px; border-top:1px solid var(--line);
}
.cards-page .card-learning-flow .wheel-positions li:first-child {
  grid-column:1 / -1; padding:18px 20px; border:1px solid var(--line); border-radius:4px;
  background:rgba(216,189,130,.04);
}
.cards-page .wheel-meaning-icon { width:48px; height:48px; color:var(--gold); }
.cards-page .card-learning-flow .wheel-positions strong { margin:0 0 5px; }
.cards-page .card-learning-flow .wheel-positions li > div { min-width:0; }

.cards-page .card-learning-flow .realm-door { display:flex; flex-direction:column; }
.cards-page .realm-card-example {
  display:block; width:100%; max-width:280px; margin:auto auto 0; padding:22px 0 0;
  background:transparent; border:0; color:var(--ink); font:inherit; text-align:center;
}
.cards-page .realm-example-art { display:block; filter:drop-shadow(0 10px 15px rgba(0,0,0,.15)); }
.cards-page .realm-example-name {
  display:block; margin-top:15px; font-family:var(--serif); font-size:25px;
  font-weight:500; line-height:1.25;
}
.cards-page .realm-example-meaning { display:block; margin-top:6px; color:var(--muted); font-size:13px; line-height:1.75; }
.cards-page .realm-example-action {
  display:inline-flex; align-items:center; gap:18px; min-height:44px; margin-top:8px;
  border-bottom:1px solid var(--line); color:var(--gold); font-size:15px; font-weight:600;
}
.cards-page .realm-card-example:hover .realm-example-action { border-color:var(--gold); }

@keyframes reading-card-float {
  0%,100% { transform:translateY(0) rotate(-1deg); }
  50% { transform:translateY(-7px) rotate(1deg); }
}
@keyframes reading-spread-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-5px); }
}
@media (max-width:1024px) {
  .cards-page .card-learning-flow .wheel-positions { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .cards-page .reading-card-feature { max-width:340px; margin-top:26px; }
  .cards-page .reading-spread-figure { max-width:380px; }
}
@media (max-width:600px) {
  .cards-page .reading-card-feature { max-width:300px; }
  .cards-page .reading-feature-keys { margin-top:18px; }
  .cards-page .reading-spread-figure { max-width:340px; }
  .cards-page .card-learning-flow .wheel-positions { grid-template-columns:minmax(0,1fr); gap:18px; }
  .cards-page .card-learning-flow .wheel-positions li:first-child { padding:16px 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .cards-page .reading-feature-art, .cards-page .reading-spread-stage { animation:none; transform:none; }
}