/* 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); }

/* UP AND TO THE SIDE. `margin-left: auto` puts it at the far end of the
   toolbar on a wide bar and lets it wrap onto its own line on a phone, which
   is what the toolbar already does with the counter rather than taking the
   page sideways. */
.reading__clarify { position: relative; margin-left: auto; }
/* The same shape as "turn them all over", because both are things you do to
   the reading — and that control's padding is what clears WCAG 2.5.8's 24px
   here too. */
.reading__clarify-button {
  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__clarify-button:disabled { opacity: 0.5; cursor: default; }

/* THE TOOLTIP IS ALWAYS IN THE DOM and only its visibility moves, so
   `aria-describedby` on the button always points at something: a bubble
   rendered on hover alone describes nothing to a reader who is not using a
   mouse. Anchored to the RIGHT edge so it opens leftward and cannot push the
   page sideways, which is the failure the density sweep exists to catch. */
.reading__clarify-help[data-open="false"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.reading__clarify-help[data-open="true"] {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.4rem);
  right: 0;
  width: max-content;
  max-width: min(32ch, 80vw);
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ground-lift);
  color: var(--ink);
  font-size: var(--type-small);
  line-height: 1.5;
  box-shadow: 0 0.4rem 1rem var(--shadow-soft);
}
.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__ordinal-plate { transition: none; }
}
/* THE RING IS THE KEYBOARD'S AND NOT THE SELECTION'S. A selected card used to
   take it too, which drew a heavy black border around whichever card was being
   read — and since the panel beside the spread already names the card it is
   showing, the border was saying a second time what the page had just said in
   words. `:focus-visible` keeps it, because a keyboard reader has to be able
   to see where they are, and that is not the same question as which card the
   panel is on. */
.spread__card:focus-visible .spread__card-edge {
  stroke: var(--ink);
  stroke-width: 1;
}

/* STAYING ON A CARD GROWS IT A LITTLE, after two seconds — the scale itself is
   on the element's transform, beside the translate that placed it, because the
   deal's existing transition is what makes the growth smooth and what reduced
   motion already turns off. What the class adds is the LIFT: the card is
   painted over its neighbours while it is big, and a cast shadow is what says
   so. Deliberately not the selected card's dark edge, which means something
   else. */
.spread__card--dwelling {
  filter: drop-shadow(0 0.5px 1.1px var(--shadow-strong));
}
.spread__ordinal { fill: var(--ground); stroke: var(--rule); stroke-width: 0.3; }
.spread__ordinal-text { font-size: 2.6px; fill: var(--ink); }

/* THE PLATE GOES WHILE THE CARD IS BIG and comes back when it shrinks: it sits
   on the artwork, which is the one thing the zoom exists to show. Faded rather
   than unmounted, because the number is what tells a reader which position a
   face-down card is — it has to be there again the moment the pointer leaves,
   and a little quicker than the card travels so the artwork is clear before
   the card has finished growing. */
.spread__ordinal-plate { transition: opacity 240ms ease; }
.spread__card--dwelling .spread__ordinal-plate { opacity: 0; }

.spread__reversed {
  font-size: 2px;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--ground);
  stroke-width: 0.8;
  letter-spacing: 0.08px;
}

/* A clarifier is captioned outside the card, because it has no position in the
   spread to be named by: an uncaptioned card above the layout reads as one
   that missed its place. Text and not a colour, the rule the nav tab and the
   segmented control already follow. */
.spread__clarifier-caption {
  font-size: 2px;
  fill: var(--ink-muted);
  letter-spacing: 0.1px;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: var(--ground);
  stroke-width: 0.8;
}

.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; }
/* TWO BUTTONS THAT WILL NOT FIT WRAP, rather than taking the page sideways.
   "Same cards, this deck" and "Ask the same question again" ran 84px past a
   375px viewport — which `density.spec.mjs` never saw, because it sweeps the
   SETUP page at /interactive/tarot-reading and the dealt reading is not on its
   list. Found by measuring, which is the only thing that finds this. */
.reading-controls__actions { display: flex; flex-wrap: wrap; 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);
}