/* TAROT — The cards: research pages, the four decks, a spread drawn, and dealing one.

   One of ten stylesheets split out of a single 10,361-line tree.css.
   THE ORDER MATTERS AND IS NOT ALPHABETICAL. The layout links them as
   base → tree → correspondences → reference → tarot → chrome → astrology → history → sections → editing,
   and the rules inside this file keep the order they had in the original,
   so the cascade resolves exactly as it did before the split. */

/* --- Tarot research ---------------------------------------------------- */

.tarot-cards {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.tarot-cards__scope,
.tarot-card-page__aliases,
.tarot-card-page__scope {
  max-width: 64ch;
  color: var(--ink-faint);
  font-size: var(--type-small);
  line-height: 1.6;
}

.tarot-cards__scope,
.tarot-card-page__scope {
  margin: 0.85rem 0 0;
  padding-left: 0.85rem;
  border-left: 2px solid var(--rule);
}

.tarot-index {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.tarot-index__item { border-bottom: 1px solid var(--rule); }

.tarot-index__link {
  display: grid;
  grid-template-columns: 3.4rem minmax(2.5rem, max-content) minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1rem 0;
  color: var(--ink);
  text-decoration: none;
  align-items: start;
}

/* An index of an illustrated deck should look like one. */
.tarot-index__plate {
  display: block;
  width: 3.4rem;
  aspect-ratio: 100 / 176;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  overflow: hidden;
}
.tarot-index__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.tarot-index__plate--none {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--ink-faint);
}
.tarot-index__link:hover .tarot-index__plate,
.tarot-index__link:focus-visible .tarot-index__plate { border-color: var(--ink-faint); }

.tarot-index__number,
.tarot-card-page__number {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.tarot-index__name {
  font-size: 1.1rem;
  font-weight: 400;
  border-bottom: 1px solid var(--ink-faint);
}

.tarot-index__link:hover .tarot-index__name,
.tarot-index__link:focus-visible .tarot-index__name { border-bottom-color: var(--ink); }

.tarot-index__meta {
  margin-left: 0.55rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

.tarot-index__summary {
  display: block;
  margin-top: 0.3rem;
  max-width: 64ch;
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.55;
}

.tarot-card-page__identity {
  display: grid;
  grid-template-columns: minmax(2.5rem, max-content) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: baseline;
}

.tarot-card-page__number { font-size: 1.35rem; }

.tarot-card-page__name {
  margin: 0;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 400;
}

.tarot-card-page__classification {
  margin: 0.2rem 0 0;
  color: var(--ink-muted);
  font-size: var(--type-small);
}

.tarot-card-page__hero {
  display: grid;
  grid-template-columns: minmax(13rem, 17.5rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}

.tarot-card-page__artwork {
  width: 100%;
  margin: 0;
}

.tarot-card-page__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 500 / 881;
  object-fit: contain;
  background: var(--ground);
  border: 1px solid var(--rule);
  box-shadow: 0 1.1rem 2.6rem var(--shadow-soft);
}

.tarot-card-page__image-credit {
  margin-top: 0.65rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  line-height: 1.5;
}

.tarot-card-page__image-credit span,
.tarot-card-page__image-credit a { display: inline; }

.tarot-card-page__image-credit a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
}

.tarot-card-page__image-credit a:hover,
.tarot-card-page__image-credit a:focus-visible { border-bottom-color: var(--ink); }

/* The card is a button now: selecting it enlarges it. It has to look exactly
   like the picture it wraps, so it brings nothing of its own but the cursor. */
.tarot-card-page__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
}
.tarot-card-page__zoom:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* The card, enlarged. Auto size with two maxima grows it to the file's own
   500 by 881 or to the window, whichever comes first, and keeps its
   proportions — past the file's size it would only get blurrier. The dialog
   is the image's size, so a click anywhere around it is on the backdrop. */
.card-zoom {
  width: fit-content;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.card-zoom::backdrop { background: var(--scrim); }
.card-zoom__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 88vh;
  box-shadow: 0 1.5rem 4rem var(--shadow-strong);
}
.card-zoom[open] .card-zoom__image { animation: card-zoom-in 180ms ease-out; }
@keyframes card-zoom-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}
/* Fixed to the window rather than the card, so it is never off-screen on a
   phone, where the card is nearly the full width. The scrim behind it is dark
   in both themes, so the close keeps white ink and a white edge: an ink that
   followed the page would disappear into the dimmed page under the light one. */
.card-zoom__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: 50%;
  background: var(--scrim);
  color: #fff;
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.card-zoom__close:hover,
.card-zoom__close:focus-visible { border-color: #fff; outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .card-zoom[open] .card-zoom__image { animation: none; }
}

.tarot-card-page__introduction { padding-top: 0.15rem; }

.tarot-card-page__core-title {
  margin: 2rem 0 0.55rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  font-weight: 400;
  letter-spacing: 0.09em;
}

.tarot-card-page__aliases { margin: 0.55rem 0 0 3.3rem; }

.tarot-card-page__featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2.25rem 0;
}

.tarot-feature {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.15rem 1.2rem;
  background: var(--surface-raised);
  border: 1px solid var(--rule);
}

.tarot-feature__header {
  display: flex;
  gap: 0.8rem;
  align-items: start;
  justify-content: space-between;
}

.tarot-feature__title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 400;
}

.tarot-feature__value {
  margin: 0.8rem 0 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.68;
}

.tarot-feature__note {
  margin: 0.75rem 0 0;
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.tarot-feature__sources {
  margin-top: auto;
  padding-top: 1rem;
}

.tarot-feature__sources-title {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.tarot-feature__citations {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.tarot-feature__citations .citation {
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--rule);
}

.tarot-feature__citations .citation:first-child { padding-top: 0.7rem; }
.tarot-tree-link + .tarot-tree-link { margin-top: 1.25rem; }

.tarot-tree-link__tradition {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.tarot-tree-link__name {
  margin: 0.15rem 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 400;
}

.tarot-tree-link__name a,
.tarot-card-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
}

.tarot-tree-link__name a:hover,
.tarot-card-link:hover { border-bottom-color: var(--ink); }

.tarot-tree-link__facts {
  display: grid;
  gap: 0.25rem;
  margin: 0 0 0.8rem;
  color: var(--ink-muted);
  font-size: var(--type-small);
}

.tarot-tree-link__facts div { display: flex; gap: 0.5rem; }
.tarot-tree-link__facts dt { color: var(--ink-faint); }
.tarot-tree-link__facts dd { margin: 0; }

.tarot-directory,
.tarot-number-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.5rem;
}

.tarot-directory a,
.tarot-number-nav a,
.tarot-number-page__pager a {
  padding: 0.35rem 0.65rem;
  color: var(--ink-muted);
  text-decoration: none;
  border: 1px solid var(--rule);
}

.tarot-directory a:hover,
.tarot-directory a:focus-visible,
.tarot-number-nav a:hover,
.tarot-number-nav a:focus-visible,
.tarot-number-page__pager a:hover,
.tarot-number-page__pager a:focus-visible {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.tarot-catalogue {
  margin-top: 2.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}

.tarot-catalogue__next { margin: 1.25rem 0 0; font-size: var(--type-small); }
.tarot-suit-section {
  margin-top: 2.25rem;
  scroll-margin-top: 1rem;
}

.tarot-suit-section h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 400;
}

.tarot-number-page__identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.15rem;
  align-items: center;
  margin-top: 0.45rem;
}

.tarot-number-page__number {
  color: var(--ink-faint);
  font-size: clamp(3rem, 9vw, 5.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1;
}

.tarot-number-page__sephirah { margin: 0.25rem 0 0; }

.tarot-number-page__sephirah a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
}

.tarot-number-page .tarot-feature {
  margin-top: 1.5rem;
  max-width: 46rem;
}

.tarot-number-page__choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.tarot-number-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0.65rem;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
}

.tarot-number-card:hover,
.tarot-number-card:focus-visible { border-color: var(--ink-faint); }

.tarot-number-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 500 / 881;
  object-fit: contain;
  background: var(--ground);
}

.tarot-number-card__suit {
  margin-top: 0.7rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.08em;
}

.tarot-number-card__name {
  margin-top: 0.1rem;
  font-size: 1rem;
  font-weight: 400;
}

.tarot-number-card__summary {
  margin-top: 0.45rem;
  color: var(--ink-muted);
  font-size: var(--type-label);
  line-height: 1.5;
}

.tarot-number-page__pager {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 2.5rem;
  text-align: center;
}

.correspondences__related { margin-top: 1rem; }

@media (max-width: 899px) {
  .tree__diagram-layout--regions {
    display: block;
  }

  .region-callouts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
    border-left: 0;
  }

  .region-callout {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
  }

  .region-callouts__connectors { display: none; }
}

@media (max-width: 720px) {
  .tarot-card-page__hero,
  .tarot-card-page__featured {
    grid-template-columns: minmax(0, 1fr);
  }

  .tarot-card-page__artwork {
    max-width: 16rem;
    margin-inline: auto;
  }

  .tarot-number-page__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .region-callouts { grid-template-columns: minmax(0, 1fr); }

  .tarot-number-page__choices { grid-template-columns: minmax(0, 1fr); }

  .tarot-number-card {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0 0.85rem;
  }

  .tarot-number-card__image { grid-row: 1 / span 3; }
  .tarot-number-card__suit { margin-top: 0; align-self: end; }

  .tarot-number-card__summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

/* The selected path repainted above the spheres. Same geometry as the original
   underneath it; only the ends were ever hidden, and they are what the eye
   checks. Never interactive — the path below owns the hit target. */
.path__line--selected-over {
  stroke-width: 2.8;
  opacity: 1;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Tarot decks
   The same seventy-eight cards, read in one deck or the other.
--------------------------------------------------------------------------- */
.deck-switch {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 1.1rem 0 0.75rem;
}

.deck-switch__label {
  font-size: var(--type-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.deck-switch__options {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.deck-switch__option {
  display: block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink-muted);
  text-decoration: none;
}

.deck-switch__option:hover { border-color: var(--ink-faint); color: var(--ink); }

.deck-switch__option--current {
  border-color: var(--ink);
  background: var(--ground-lift);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}

.deck-switch__name { display: block; font-weight: 600; }
.deck-switch__creators { display: block; font-size: var(--type-label); color: var(--ink-muted); }

.deck-note { margin: 0.5rem 0 1.5rem; max-width: 62ch; }
.deck-note__summary { margin: 0 0 0.6rem; }
.deck-note__scope,
.deck-note__images { margin: 0 0 0.6rem; font-size: var(--type-small); color: var(--ink-muted); }

/* A deck whose artwork this application may not ship says so where the artwork
   would have been, rather than leaving a gap that reads like a missing file. */
.deck-note__images--unavailable {
  border-left: 2px solid var(--rule);
  padding-left: 0.8rem;
}

.tarot-card-page__artwork--none { display: flex; align-items: flex-start; }

.tarot-card-page__no-image {
  border: 1px dashed var(--rule);
  border-radius: 6px;
  padding: 1.2rem;
  max-width: 26rem;
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.6;
}

.tarot-card-page__no-image-title {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-weight: 600;
}

.tarot-card-page__no-image-reason { margin: 0 0 0.7rem; }

.tarot-card-page__no-image a,
.deck-note__images a {
  color: var(--ink);
  text-decoration-color: var(--ink-faint);
  text-underline-offset: 2px;
}

.tarot-card-page__esoteric {
  margin: 0.2rem 0 0.4rem;
  font-style: italic;
  color: var(--ink-muted);
}

.tarot-number-card__image--none {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 500 / 881;
  border: 1px dashed var(--rule);
  border-radius: 4px;
  padding: 0.6rem;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.deck-reading__identity { margin: 0 0 1rem; }
.deck-reading__block { margin: 0 0 1.1rem; }
.deck-reading__title {
  margin: 0 0 0.35rem;
  font-size: var(--type-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.deck-reading__meanings { margin: 0; }
.deck-reading__meanings > div { margin: 0 0 0.7rem; }
.deck-reading__meanings dt {
  font-size: var(--type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.deck-reading__meanings dd { margin: 0.15rem 0 0; }

/* An absence that is a finding, not a gap. */
.deck-reading__absent { color: var(--ink-muted); font-style: italic; }

.deck-reading__locator { margin: 0.8rem 0 0; font-size: 0.82rem; color: var(--ink-muted); }
.deck-compare__line { margin: 0 0 0.6rem; }

.tarot-index__renamed {
  display: block;
  font-size: var(--type-label);
  color: var(--ink-muted);
}

/* Da'ath: a marker that is a place rather than a line. Drawn the way an
   uncounted node is drawn on the Jewish tree — hollow, dashed, no numeral —
   because "not one of the ten" is the whole point of it. */
.overlay__marker-point {
  stroke-width: 0.9;
  stroke-dasharray: 2.4 2;
  opacity: 0.9;
  fill: none;
}

.marker--selected .overlay__marker-point {
  opacity: 1;
  stroke-width: 1.4;
  stroke-dasharray: none;
}

.overlay__marker-point-label {
  font-size: 4px;
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Tarot readings
--------------------------------------------------------------------------- */
.reading-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem;
  margin: 1.25rem 0 0.75rem;
}

.reading-controls__group { border: 0; margin: 0; padding: 0; }
.reading-controls__group legend {
  padding: 0;
  font-size: var(--type-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.reading-controls__option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  font-size: var(--type-small);
}
.reading-controls__note { color: var(--ink-muted); font-size: var(--type-label); }
.reading-controls__deal {
  padding: 0.5rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--ground-lift);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}
.reading-page__deck-note {
  max-width: 60ch;
  margin: 0.5rem 0 0;
  font-size: var(--type-small);
  color: var(--ink-muted);
}

.reading { display: grid; gap: 2rem; margin: 1.5rem 0; }
@media (min-width: 900px) {
  .reading { grid-template-columns: minmax(0, 1fr) 26rem; align-items: start; }
}

.reading__svg { width: 100%; height: auto; max-height: 80vh; }
.reading__provenance {
  margin: 0.5rem 0 0;
  font-size: var(--type-label);
  color: var(--ink-muted);
}

/* The deal. Each card travels from the stack to its place; the delay between
   them is the step index, held in React, so the order is the spread's own. */
.spread__card {
  cursor: pointer;
  outline: none;
  transition: transform 420ms cubic-bezier(0.22, 0.68, 0.35, 1);
}
.spread__card--stacked { cursor: default; }
.spread__card-edge { stroke: var(--rule); stroke-width: 0.4; }
.spread__card-blank { fill: var(--ground-lift); stroke: var(--rule); stroke-width: 0.4; }
.spread__card-title { font-size: 2.2px; fill: var(--ink-muted); }

/* Both faces are always in the DOM; which one shows is the flip. Rendering one
   or the other would lose the card mid-turn, and with it the animation. */
.spread__card--face-down .spread__side--face,
.spread__card--face-up .spread__side--back { display: none; }

/* Only the second half of the turn is animated: the face arrives edge-on and
   opens out. The first half is the click itself. */
.spread__card--flipping .spread__side--face {
  animation: spread-turn 320ms cubic-bezier(0.3, 0, 0.2, 1);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes spread-turn {
  from { transform: scaleX(0.02); }
  to { transform: scaleX(1); }
}

/* The generic back: aged stock, a lattice and a double rule. Warm on purpose —
   a card is a physical object and does not follow the page's theme. */
.spread__back-stock { fill: #cfc0a0; }
.spread__back-lattice { opacity: 0.5; }
.spread__back-hatch { stroke: #7d6a4a; stroke-width: 0.22; fill: none; }
.spread__back-speck { fill: #7d6a4a; }
.spread__back-rule { stroke: #6d5c3f; stroke-width: 0.35; }
.spread__back-rule--inner { stroke-width: 0.18; }

.reading__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
}
.reading__turn-all {
  font: inherit;
  font-size: var(--type-small);
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ground-lift);
  color: var(--ink);
  cursor: pointer;
}
.reading__turn-all:disabled { opacity: 0.5; cursor: default; }
.reading__counter { font-size: 0.8rem; color: var(--ink-muted); }
.reading__notes { margin: 0.5rem 0 0; }
.reading__back-credit,
.reading__back-note {
  margin: 0.4rem 0 0;
  max-width: 62ch;
  font-size: var(--type-label);
  color: var(--ink-muted);
}

/* Reduced motion: the cards are simply where they belong. Face-down is not
   motion, so it stays — it is the point of the spread, not decoration. */
@media (prefers-reduced-motion: reduce) {
  .spread__card { transition: none; }
  .spread__card--flipping .spread__side--face { animation: none; }
}
.spread__card--selected .spread__card-edge,
.spread__card:focus-visible .spread__card-edge {
  stroke: var(--ink);
  stroke-width: 1;
}
.spread__ordinal { fill: var(--ground); stroke: var(--rule); stroke-width: 0.3; }
.spread__ordinal-text { font-size: 2.6px; fill: var(--ink); }
.spread__reversed {
  font-size: 2px;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--ground);
  stroke-width: 0.8;
  letter-spacing: 0.08px;
}

.reading__detail {
  border-left: 1px solid var(--rule);
  padding-left: 1.5rem;
}
@media (max-width: 899px) {
  .reading__detail { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
}
.reading__ordinal {
  margin: 0;
  font-size: var(--type-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.reading__position { margin: 0.2rem 0 0.5rem; font-size: 1.3rem; }
.reading__position-meaning { margin: 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }
.reading__rule { margin: 1.25rem 0; border: 0; border-top: 1px solid var(--rule); }
.reading__card-head { display: flex; gap: 1rem; align-items: flex-start; }
.reading__card-image { width: 92px; height: auto; border-radius: 3px; }
.reading__card-number { margin: 0; font-size: var(--type-label); color: var(--ink-muted); }
.reading__card-title { margin: 0.1rem 0 0.2rem; font-size: 1.15rem; }
.reading__card-esoteric { margin: 0; font-style: italic; color: var(--ink-muted); font-size: var(--type-small); }
.reading__card-filed { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--ink-muted); }
.reading__card-reversed { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--ink); }
.reading__summary { margin: 1rem 0; font-size: var(--type-small); line-height: 1.6; }
.reading__block { margin: 0 0 1rem; }
.reading__block h4 {
  margin: 0 0 0.25rem;
  font-size: var(--type-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.reading__block p { margin: 0; font-size: var(--type-small); line-height: 1.6; }
.reading__absent { color: var(--ink-muted); font-style: italic; }
.reading__more { margin: 1.25rem 0 0; font-size: var(--type-small); }

/* The decks, as things in their own right rather than a switch on a card. */
.deck-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.75rem; }
.deck-list__item { border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.deck-list__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }
.deck-list__name { margin: 0; font-size: 1.35rem; }
.deck-list__creators { margin: 0; color: var(--ink-muted); font-size: var(--type-small); }
.deck-list__summary { margin: 0.5rem 0; max-width: 68ch; line-height: 1.6; }
.deck-list__facts { margin: 0.35rem 0; font-size: var(--type-small); color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 0.6rem; }
.deck-list__unillustrated { color: var(--ink); }
.deck-list__links { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: var(--type-small); }
.deck-page__scope { max-width: 68ch; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.6; }
.deck-page__vocabulary { margin: 0 0 1.5rem; }
.deck-page__vocabulary > div { display: flex; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rule); }
.deck-page__vocabulary dt { min-width: 8rem; color: var(--ink-muted); font-size: var(--type-small); }
.deck-page__vocabulary dd { margin: 0; }
.deck-page__subheading { margin: 1.5rem 0 0.5rem; font-size: 1rem; }
.reading-controls__actions { display: flex; gap: 0.6rem; }
.reading-controls__deal--primary { background: var(--ink); color: var(--ground); border-color: var(--ink); }

/* --- choosing a spread and asking something ------------------------------ */

.setup { max-width: 44rem; margin: 1.5rem 0 0; }

.setup__error {
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--ink);
  background: var(--ground-lift);
  font-size: var(--type-small);
}

.setup__step {
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
}
.setup__step--missing { border-left: 3px solid var(--ink); padding-left: 0.9rem; }

.setup__legend {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 0.8rem;
  padding: 0;
  font-size: 1rem;
}
.setup__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-size: var(--type-label);
  color: var(--ink-faint);
}

.setup__spreads,
.setup__decks { list-style: none; margin: 0; padding: 0; }
.setup__spreads li { border-top: 1px solid var(--rule); }
.setup__spreads li:last-child { border-bottom: 1px solid var(--rule); }

.setup__spread {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.85rem 0.3rem;
  cursor: pointer;
}
.setup__spread:hover { background: var(--ground-lift); }
.setup__spread-body { display: block; }
.setup__spread-name { display: block; font-size: 0.98rem; }
.setup__spread-count {
  margin-left: 0.4rem;
  font-size: var(--type-label);
  color: var(--ink-faint);
}
.setup__spread-summary {
  display: block;
  margin-top: 0.25rem;
  max-width: 58ch;
  font-size: var(--type-small);
  line-height: 1.55;
  color: var(--ink-muted);
}

.setup__question-label { display: block; margin: 0 0 0.4rem; font-size: var(--type-small); }
.setup__question {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.setup__question:focus-visible { outline: 1px solid var(--ink-faint); outline-offset: 2px; }
.setup__hint {
  margin: 0.5rem 0 0;
  max-width: 58ch;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

.setup__decks li { margin: 0 0 0.35rem; }
.setup__deck,
.setup__reversals { display: flex; gap: 0.55rem; align-items: baseline; cursor: pointer; }
.setup__reversals { margin-top: 0.9rem; font-size: var(--type-small); }

.setup__actions { margin: 2rem 0 0; }
.setup__method { margin: 3rem 0 0; max-width: 62ch; }
.setup__method p { font-size: var(--type-small); line-height: 1.65; color: var(--ink-muted); }

.reading-page__question { max-width: 34ch; }
.reading-page__spread-name {
  margin: 0.3rem 0 0;
  font-size: var(--type-small);
  color: var(--ink-faint);
}
.reading-page__restart { margin: 1rem 0 0; font-size: var(--type-small); }

.spread-positions { margin: 0; padding-left: 1.3rem; }
.spread-positions li { margin: 0 0 0.75rem; max-width: 62ch; }
.spread-positions strong { display: block; font-weight: normal; }
.spread-positions span {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--type-small);
  line-height: 1.6;
  color: var(--ink-muted);
}
.setup__spread-more {
  display: inline-block;
  margin: 0 0 0.85rem 2.05rem;
  font-size: var(--type-label);
}

/* Visible only when focused, which is the point: it is for the keyboard. */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 100;
  padding: 0.55rem 0.9rem;
  background: var(--ground-lift);
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  text-decoration: none;
  transition: top 120ms ease;
}
.skip-link:focus-visible { top: 0.5rem; }
#main:focus { outline: none; }

/* The one thing on the tarot index a reader is most likely to want, no longer
   styled identically to the two browse links beside it. */
.tarot-directory__go {
  border: 1px solid var(--ink-faint);
  padding: 0.35rem 0.75rem;
}
.tarot-directory__go:hover { border-color: var(--ink); }

/* The lens option and its "what this shows" link are siblings now, not nested. */
.lens-row { display: block; }
.lens__details {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
  margin: 0 0 0.35rem 1.9rem;
  font-size: var(--type-label);
}

.lenses__clear:disabled { opacity: 0.45; cursor: default; }

/* Below the rail breakpoint the switcher scrolls, and a third tradition was
   simply clipped off the edge with nothing to say it existed. The fade is the
   affordance; the padding keeps the last option clear of it. */
@media (max-width: 899px) {
  .switch {
    padding-right: 1.5rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  }
}

/* --- a spread, drawn ------------------------------------------------------ */

.spread-figure {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
}
.spread-figure__svg { width: 100%; height: auto; max-height: 22rem; }
.spread-figure figcaption {
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.spread-figure__card { fill: var(--ground); stroke: var(--rule); stroke-width: 0.5; }
.spread-figure__number { font-size: 5px; fill: var(--ink-muted); }
.spread-figure__name { font-size: 3.4px; fill: var(--ink-faint); }

.spread-page__layout { display: grid; gap: 1.5rem; margin: 2rem 0 0; }
@media (min-width: 900px) {
  .spread-page__layout { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
}
.spread-page__prose > .panel:last-child { margin-bottom: 0; }
.lens-page__heading .icon { margin-right: 0.35rem; }

.spread-figure--compact { padding: 0; border: 0; background: none; }
.spread-figure--compact .spread-figure__svg { max-height: 5.5rem; }
.spread-figure--compact .spread-figure__card { stroke-width: 0.9; }

.setup__spread-shape { display: block; flex: none; width: 4.5rem; }

.spread-cards { list-style: none; margin: 0; padding: 0; }
.spread-card {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.spread-card:last-child { border-bottom: 1px solid var(--rule); }
.spread-card__shape { flex: none; width: 5.5rem; }
.spread-card__name { margin: 0; font-size: 1.05rem; }
.spread-card__meta { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.4rem 0 0; }
.spread-card__summary {
  margin: 0.5rem 0 0;
  max-width: 60ch;
  font-size: var(--type-small);
  line-height: 1.6;
  color: var(--ink-muted);
}