/* 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); }
/* `width: 100%` AND PADDING NEEDS `box-sizing: border-box`, and this is the
   fifth element on the site to need it said. The stylesheet is content-box, so
   100% plus 0.7rem of padding each side plus a 1px border renders 24px wider
   than the box holding it; on /tarot/reading the container was narrow enough
   to absorb it and nothing showed, and on the short way in — whose wrapper
   runs to the gutter — it took a 375px viewport 8px sideways. Same trap the
   Goetia seals, the footer's card and .home__interactive-link document. */
.setup__question {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule);
  box-sizing: border-box;
  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; }
/* THE SENTENCE FLOOR, AND THIS WAS WRONG BEFORE THE SHORT WAY IN EXISTED.
   "The question that you type stays in the reading's link. Anyone you send it
   to can see it." is two sentences and the most important thing on the form,
   and it was set at 12.8px — the size a word read at a glance gets. The long
   page was never in density.spec.mjs's sweep; adding /interactive/tarot-reading
   is what surfaced it, exactly as adding /symbols/egyptian surfaced the
   alchemy page's. Here the ELEMENT was wrong and the floor was right. */
.setup__hint {
  margin: 0.5rem 0 0;
  max-width: 58ch;
  font-size: var(--type-small);
  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);
}