/*
 * Modern Tarot production layout.
 *
 * Reading order:
 * 1. Shared variables, control rail and navigation
 * 2. Homepage table, stacks and filtered archive
 * 3. Single-card, Info and Contact views
 * 4. Base responsive rules and language controls
 * 5. Layered production artwork and colorways
 * 6. Final portrait/short-landscape refinements
 *
 * Later sections intentionally override the base rules. Keep their order:
 * merging similar selectors can change the cascade and Astra overrides.
 * Mobile artwork itself lives in template-parts/mobile-header-artwork.php.
 */

:root {
  --mt-rail: clamp(220px, 17.6vw, 360px);
  --mt-table: #000;
  --mt-text: #f4f4f2;
  --mt-sidebar: #4e4e4e;
  --mt-muted: var(--mt-sidebar);
  --mt-line: var(--mt-sidebar);
  --mt-card-ratio: 1.709;
  /* Layout controls for the second desktop row. */
  --mt-launched-hidden-gap: clamp(18px, 1.5vw, 28px);
  --mt-hidden-right-inset: clamp(24px, 2.5vw, 48px);
  --mt-card-row-gap: clamp(20px, 2vh, 28px);
  --mt-card-vertical-reserve: clamp(68px, 7vh, 82px);
  --mt-card-w: clamp(
    120px,
    min(
      calc((100vw - var(--mt-rail) - 48px) / 4),
      calc((100dvh - var(--mt-card-vertical-reserve)) / (2 * var(--mt-card-ratio)))
    ),
    340px
  );
  --mt-rail-pad-x: clamp(34px, 2.7vw, 56px);
  --mt-type-small: 14px;
  --mt-type-ui: 17px;
  --mt-type-copy: 17px;
  --mt-type-page: clamp(20px, 1.35vw, 22px);
  --mt-type-brand-compact: 30px;
  --mt-type-brand: clamp(36px, 2.35vw, 48px);
  --mt-blue: #0099ff;
  --mt-green: #66cc33;
}

/*
 * A 27-inch/large desktop has considerably more visual weight than a
 * laptop, while the rail previously stopped growing at its laptop scale.
 * Keep the established MacBook composition untouched and enlarge the rail
 * together with its type only once there is genuinely ample screen space.
 */
@media (min-width: 1600px) {
  :root {
    --mt-rail: clamp(360px, 15.25vw, 400px);
    --mt-rail-pad-x: clamp(40px, 2.2vw, 52px);
    --mt-type-small: clamp(15px, .7vw, 18px);
    --mt-type-ui: clamp(18px, 1.02vw, 24px);
    --mt-type-copy: clamp(18px, 1.02vw, 24px);
    --mt-type-brand: clamp(48px, 2.3vw, 58px);
  }

  html body.modern-tarot-system-layout .top-bar.ast-container {
    padding-top: clamp(38px, 2.2vw, 48px) !important;
    padding-bottom: clamp(38px, 2.2vw, 48px) !important;
  }

  html body.modern-tarot-system-layout .filter-bar {
    gap: clamp(26px, 1.5vw, 34px) !important;
  }
}

html,
body.modern-tarot-system-layout,
body.modern-tarot-system-layout #page,
body.modern-tarot-system-layout .site-content {
  min-height: 100%;
  margin: 0 !important;
  background: var(--mt-table) !important;
  color: var(--mt-text) !important;
  font-family: nimbus-sans, sans-serif !important;
}

body.modern-tarot-system-layout *,
body.modern-tarot-system-layout *::before,
body.modern-tarot-system-layout *::after {
  box-sizing: border-box;
}

body.modern-tarot-system-layout .site-header,
body.modern-tarot-system-layout header.site-header,
body.modern-tarot-system-layout .ast-primary-header-bar,
body.modern-tarot-system-layout .site-footer,
body.modern-tarot-system-layout .ast-footer-overlay {
  display: none !important;
}

body.modern-tarot-system-layout a {
  color: inherit;
}

/* Permanent control rail */
html body.modern-tarot-system-layout .top-bar.ast-container {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 200 !important;
  display: flex !important;
  flex-direction: column !important;
  width: var(--mt-rail) !important;
  max-width: none !important;
  min-height: 100vh !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 34px var(--mt-rail-pad-x) 34px !important;
  overflow-y: auto !important;
  border: 0 !important;
  isolation: isolate !important;
  background-color: #171717 !important;
  background-image: url("assets/images/modern-tarot-sidebar-optimized.png") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body.modern-tarot-system-layout .top-bar.ast-container::before,
html body.modern-tarot-system-layout .top-bar.ast-container::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
}

html body.modern-tarot-system-layout .top-bar.ast-container::before {
  display: none !important;
}

html body.modern-tarot-system-layout .top-bar.ast-container::after {
  z-index: -1 !important;
  background: rgba(0,0,0,.12) !important;
}

body.admin-bar.modern-tarot-system-layout .top-bar.ast-container {
  top: 32px !important;
  min-height: calc(100vh - 32px) !important;
  height: calc(100vh - 32px) !important;
}

html body.modern-tarot-system-layout .top-left {
  position: static !important;
  display: block !important;
  align-self: stretch !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  text-align: left !important;
}

html body.modern-tarot-system-layout .site-wordmark {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: nimbus-sans, sans-serif !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: .98 !important;
  letter-spacing: -.025em !important;
  text-decoration: none !important;
  text-transform: none !important;
  text-shadow: none !important;
  text-align: left !important;
}

html body.modern-tarot-system-layout .site-wordmark-script {
  display: block !important;
  min-height: 0 !important;
  color: #fff !important;
  font-family: nimbus-sans, sans-serif !important;
  font-size: var(--mt-type-brand) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: .94 !important;
  letter-spacing: -.025em !important;
  transform: none !important;
  transform-origin: left center !important;
}

html body.modern-tarot-system-layout .site-wordmark-subtitle {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 59px !important;
  margin-top: 17px !important;
  color: #fff !important;
  font-family: nimbus-sans, sans-serif !important;
  font-size: var(--mt-type-ui) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.15 !important;
  letter-spacing: .055em !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-transform: none !important;
}

html body.modern-tarot-system-layout
  .site-wordmark-subtitle > [data-language-content] {
  display: block !important;
}

html body.modern-tarot-system-layout .site-wordmark-description,
html body.modern-tarot-system-layout .site-wordmark-credit {
  display: inline !important;
  font-family: nimbus-sans, sans-serif !important;
  font-size: inherit !important;
  line-height: inherit !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

html body.modern-tarot-system-layout .site-wordmark-description {
  font-style: inherit !important;
  font-weight: inherit !important;
}

html body.modern-tarot-system-layout .site-wordmark-credit {
  margin: 0 !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  white-space: nowrap !important;
  text-transform: inherit !important;
}

/* Keep the established desktop rhythm while using normal German sentence
   casing: the credit remains the final, separate line. */
html body.modern-tarot-system-layout
  .wordmark-subtitle-desktop
  .site-wordmark-description,
html body.modern-tarot-system-layout
  .wordmark-subtitle-desktop
  .site-wordmark-credit {
  display: block !important;
}

html body.modern-tarot-system-layout .mobile-menu-toggle {
  display: none !important;
}

html body.modern-tarot-system-layout .mobile-filter-toggle,
html body.modern-tarot-system-layout .mobile-filter-backdrop,
html body.modern-tarot-system-layout .mobile-filter-panel-header {
  display: none !important;
}

html body.modern-tarot-system-layout .filter-bar {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: clamp(76px, 11vh, 104px) 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mt-text) !important;
}

html body.modern-tarot-system-layout .filter-section {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body.modern-tarot-system-layout .filter-label {
  color: #fff !important;
  font-family: nimbus-sans, sans-serif !important;
  font-size: var(--mt-type-ui) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
}

html body.modern-tarot-system-layout .filter-section select.tag {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 22px 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  color: #fff !important;
  font-family: nimbus-sans, sans-serif !important;
  font-size: var(--mt-type-ui) !important;
  font-weight: 400 !important;
  line-height: 32px !important;
  text-transform: none !important;
  box-shadow: none !important;
}

html body.modern-tarot-system-layout .status-filter {
  grid-column: auto !important;
  margin-top: 0 !important;
}

html body.modern-tarot-system-layout .filter-bar .tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 16px !important;
  width: 100% !important;
}

html body.modern-tarot-system-layout .filter-btn-status {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 3px 9px 4px !important;
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: nimbus-sans, sans-serif !important;
  font-size: var(--mt-type-ui) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
}

html body.modern-tarot-system-layout .filter-btn-status.active,
html body.modern-tarot-system-layout .filter-btn-status:hover,
html body.modern-tarot-system-layout .filter-btn-status:focus-visible {
  border-color: #fff !important;
  background: #fff !important;
  color: var(--mt-sidebar) !important;
}

html body.modern-tarot-system-layout .filter-btn-status[data-status=""] {
  text-transform: none !important;
}

html body.modern-tarot-system-layout .top-navigation {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 18px 34px !important;
  align-self: stretch !important;
  justify-self: start !important;
  width: 100% !important;
  height: auto !important;
  margin: auto 0 0 !important;
  transform: none !important;
}

html body.modern-tarot-system-layout .top-navigation .nav-hud-item,
html body.modern-tarot-system-layout .top-navigation .language-switch {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: nimbus-sans, sans-serif !important;
  font-size: var(--mt-type-copy) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

html body.modern-tarot-system-layout .top-navigation .language-switch {
  grid-column: 1 / -1 !important;
  gap: 8px !important;
  color: #fff !important;
}

html body.modern-tarot-system-layout .top-navigation a.language-nav-link {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: .18em !important;
}

/* Full black table */
html body.modern-tarot-system-layout #page {
  width: calc(100% - var(--mt-rail)) !important;
  min-height: 100vh !important;
  margin: 0 0 0 var(--mt-rail) !important;
}

html body.modern-tarot-system-layout .site-content,
html body.modern-tarot-system-layout .site-content > .ast-container {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.home.modern-tarot-system-layout .cards-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 6px clamp(12px, 1vw, 22px) 4px !important;
  overflow: hidden !important;
  background: #000 !important;
}

html body.home.modern-tarot-system-layout .cards-grid {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.home.modern-tarot-system-layout .scheduled-row {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: clamp(6px, .65vw, 12px) !important;
  width: 100% !important;
  min-height: calc(var(--mt-card-w) * var(--mt-card-ratio)) !important;
}

html body.home.modern-tarot-system-layout .scheduled-row.is-overflow {
  gap: 0 !important;
}

html body.home.modern-tarot-system-layout .scheduled-row.is-overflow > * + * {
  margin-left: calc(var(--scheduled-overlap) * -1) !important;
}

html body.home.modern-tarot-system-layout .scheduled-row > .card,
html body.home.modern-tarot-system-layout .scheduled-row > .card-stack {
  transform: rotate(var(--scheduled-rotation, 0deg)) !important;
  transform-origin: 50% 85% !important;
}

html body.home.modern-tarot-system-layout .scheduled-row > .card:hover,
html body.home.modern-tarot-system-layout .scheduled-row > .card-stack:hover {
  transform: translateY(-4px) rotate(var(--scheduled-rotation, 0deg)) !important;
}

html body.home.modern-tarot-system-layout .lower-row {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--mt-card-w) !important;
  align-items: center !important;
  gap: clamp(70px, 10vw, 190px) !important;
  width: 100% !important;
  margin-top: clamp(2px, .5vh, 7px) !important;
}

html body.home.modern-tarot-system-layout .launched-hand {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  width: max-content !important;
  max-width: none !important;
  min-height: calc(var(--mt-card-w) * var(--mt-card-ratio) + 16px) !important;
  margin: 0 !important;
}

html body.home.modern-tarot-system-layout .launched-hand > :nth-child(n) {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 var(--mt-card-w) !important;
  margin: 0 !important;
  transform-origin: 50% 105% !important;
  transform: translateY(var(--hand-y, 10px)) rotate(var(--hand-rotation, 0deg)) !important;
}

html body.home.modern-tarot-system-layout .launched-hand > :nth-child(n+2) {
  margin-left: clamp(-105px, -7vw, -68px) !important;
}

html body.home.modern-tarot-system-layout
  .launched-hand:is([data-visible-count="5"], [data-visible-count="6"]) > :nth-child(n+2) {
  margin-left: clamp(-125px, -8.5vw, -82px) !important;
}

html body.home.modern-tarot-system-layout .launched-hand > :nth-child(1) { --hand-y: 10px; --hand-rotation: -5deg; z-index: 1 !important; }
html body.home.modern-tarot-system-layout .launched-hand > :nth-child(2) { --hand-y: -12px; --hand-rotation: 3deg; z-index: 3 !important; }
html body.home.modern-tarot-system-layout .launched-hand > :nth-child(3) { --hand-y: 18px; --hand-rotation: -1deg; z-index: 5 !important; }
html body.home.modern-tarot-system-layout .launched-hand > :nth-child(4) { --hand-y: 7px; --hand-rotation: 5deg; z-index: 4 !important; }
html body.home.modern-tarot-system-layout .launched-hand > :nth-child(5) { --hand-y: -7px; --hand-rotation: -3deg; z-index: 2 !important; }
html body.home.modern-tarot-system-layout .launched-hand > :nth-child(6) { --hand-y: 13px; --hand-rotation: 2deg; z-index: 1 !important; }

/* The released hand is ordered newest-to-oldest in PHP. Its depth must use
 * that order too: an older event is always behind a newer one at rest. */
html body.home.modern-tarot-system-layout .launched-hand > :nth-child(n) {
  z-index: calc(100 - var(--hand-index, 99)) !important;
}

html body.home.modern-tarot-system-layout .initial-overflow {
  display: none !important;
}

html body.home.modern-tarot-system-layout .hidden-deck {
  position: relative !important;
  width: var(--mt-card-w) !important;
  min-height: calc(var(--mt-card-w) * var(--mt-card-ratio) + 10px) !important;
  justify-self: end !important;
}

html body.home.modern-tarot-system-layout .hidden-deck > * {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  margin: 0 !important;
}

html body.home.modern-tarot-system-layout .hidden-deck > :nth-child(1) { z-index: 9 !important; transform: translate(0, 0) rotate(-.4deg) !important; }
html body.home.modern-tarot-system-layout .hidden-deck > :nth-child(2) { z-index: 8 !important; transform: translate(4px, -3px) rotate(.6deg) !important; }
html body.home.modern-tarot-system-layout .hidden-deck > :nth-child(3) { z-index: 7 !important; transform: translate(8px, -6px) rotate(-.2deg) !important; }
html body.home.modern-tarot-system-layout .hidden-deck > :nth-child(4) { z-index: 6 !important; transform: translate(12px, -9px) rotate(.4deg) !important; }
html body.home.modern-tarot-system-layout .hidden-deck > :nth-child(n+5) { z-index: 5 !important; transform: translate(16px, -12px) !important; }

html body.home.modern-tarot-system-layout .card,
html body.home.modern-tarot-system-layout .card-stack {
  width: var(--mt-card-w) !important;
  min-width: var(--mt-card-w) !important;
  max-width: var(--mt-card-w) !important;
  height: auto !important;
}

html body.home.modern-tarot-system-layout .card {
  position: relative;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: transform .18s ease, z-index 0s linear !important;
}

html body.home.modern-tarot-system-layout .card:hover {
  z-index: 100 !important;
  transform: translateY(-4px) !important;
}

html body.home.modern-tarot-system-layout .card.is-hidden,
html body.home.modern-tarot-system-layout .card.is-hidden:hover {
  pointer-events: none !important;
  cursor: default !important;
}

html body.home.modern-tarot-system-layout .card img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.home.modern-tarot-system-layout .card.hide,
html body.home.modern-tarot-system-layout .card-stack.hide {
  display: none !important;
}

html body.home.modern-tarot-system-layout .card-stack {
  position: relative !important;
  min-height: calc(var(--mt-card-w) * var(--mt-card-ratio)) !important;
}

html body.home.modern-tarot-system-layout .card-stack > .card {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  z-index: calc(var(--stack-count, 1) - var(--stack-index, 0)) !important;
}

html body.home.modern-tarot-system-layout .card-stack > .card:nth-of-type(1) {
  z-index: calc(var(--stack-count, 1) - var(--stack-index, 0)) !important;
}

html body.home.modern-tarot-system-layout .card-stack > .card:nth-of-type(2) {
  transform: translate(7px, 4px) rotate(.5deg) !important;
}

html body.home.modern-tarot-system-layout .card-stack > .card:nth-of-type(3) {
  transform: translate(13px, 8px) rotate(-.4deg) !important;
}

html body.home.modern-tarot-system-layout .card-stack > .card:nth-of-type(n+4) {
  transform: translate(18px, 12px) !important;
}

/* Each card in an upcoming-event stack gets its own subtle reload variation.
 * The parent still provides the shared tilt of that event stack. */
html body.home.modern-tarot-system-layout .scheduled-row .card-stack > .card:nth-of-type(1) {
  transform: rotate(var(--scheduled-stack-rotation, 0deg)) !important;
}

html body.home.modern-tarot-system-layout .scheduled-row .card-stack > .card:nth-of-type(2) {
  transform: translate(7px, 4px) rotate(calc(.5deg + var(--scheduled-stack-rotation, 0deg))) !important;
}

html body.home.modern-tarot-system-layout .scheduled-row .card-stack > .card:nth-of-type(3) {
  transform: translate(13px, 8px) rotate(calc(-.4deg + var(--scheduled-stack-rotation, 0deg))) !important;
}

html body.home.modern-tarot-system-layout .scheduled-row .card-stack > .card:nth-of-type(n+4) {
  transform: translate(18px, 12px) rotate(var(--scheduled-stack-rotation, 0deg)) !important;
}

/* Released stacks retain their layout, with at most two pixels of vertical
 * page-load variation per card so their overlap remains deliberate. */
html body.home.modern-tarot-system-layout .launched-hand .card-stack > .card:nth-of-type(1) {
  transform: translateY(var(--launched-stack-y, 0px)) !important;
}

html body.home.modern-tarot-system-layout .launched-hand .card-stack > .card:nth-of-type(2) {
  transform: translate(7px, calc(4px + var(--launched-stack-y, 0px))) rotate(.5deg) !important;
}

html body.home.modern-tarot-system-layout .launched-hand .card-stack > .card:nth-of-type(3) {
  transform: translate(13px, calc(8px + var(--launched-stack-y, 0px))) rotate(-.4deg) !important;
}

html body.home.modern-tarot-system-layout .launched-hand .card-stack > .card:nth-of-type(n+4) {
  transform: translate(18px, calc(12px + var(--launched-stack-y, 0px))) !important;
}

/* A nine-plus-card released stack shows its eight newest cards at rest.
 * Filtering switches to the complete archive grid, including these cards. */
html body.home.modern-tarot-system-layout
  .cards-grid:not(.has-active-filter)
  .launched-hand
  .card-stack > .card.stack-overflow {
  display: none !important;
}

html body.home.modern-tarot-system-layout .card-stack:hover {
  z-index: 120 !important;
  transform: translateY(-4px) !important;
}

html body.home.modern-tarot-system-layout .card-stack:hover > .card:nth-of-type(2) {
  transform: translate(11px, 5px) rotate(.8deg) !important;
}

html body.home.modern-tarot-system-layout .card-stack:hover > .card:nth-of-type(3) {
  transform: translate(21px, 10px) rotate(-.7deg) !important;
}

html body.home.modern-tarot-system-layout .card-stack:hover > .card:nth-of-type(n+4) {
  transform: translate(30px, 15px) rotate(.35deg) !important;
}

html body.home.modern-tarot-system-layout .card-stack > .card:first-of-type:hover {
  transform: none !important;
}

html body.home.modern-tarot-system-layout .launched-hand > :only-child {
  --hand-y: 0px;
  --hand-rotation: -1.5deg;
}

html body.home.modern-tarot-system-layout .launched-hand > *:hover {
  transform: translateY(calc(var(--hand-y, 10px) - 4px)) rotate(var(--hand-rotation, 0deg)) !important;
}

html body.home.modern-tarot-system-layout .card-stack-count {
  position: absolute !important;
  right: -15px !important;
  bottom: 4px !important;
  left: auto !important;
  z-index: 9999 !important;
  display: block !important;
  padding: 4px 8px !important;
  border: 1px solid var(--mt-line) !important;
  background: #111 !important;
  color: #fff !important;
  font-size: var(--mt-type-small) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Small stacks have less visible depth, so their counter sits slightly
 * higher. Larger stacks keep the original counter position. */
html body.home.modern-tarot-system-layout
  .card-stack[data-stack-count="2"] .card-stack-count {
  right: -10px !important;
  bottom: 18px !important;
}

html body.home.modern-tarot-system-layout
  .card-stack[data-stack-count="3"] .card-stack-count {
  right: -12px !important;
  bottom: 10px !important;
}

/* Filtered state: straight, left-aligned five-column archive grid. */
html body.home.modern-tarot-system-layout .cards-grid.has-active-filter {
  --mt-card-w: clamp(
    120px,
    min(
      calc((100vw - var(--mt-rail) - 48px) / 5),
      calc((100dvh - var(--mt-card-vertical-reserve)) / (2 * var(--mt-card-ratio)))
    ),
    340px
  );
  display: grid !important;
  grid-template-columns: repeat(5, var(--mt-card-w)) !important;
  align-items: start !important;
  justify-content: start !important;
  row-gap: clamp(8px, .9vw, 15px) !important;
  column-gap: clamp(5px, .45vw, 10px) !important;
}

html body.home.modern-tarot-system-layout .cards-grid.has-active-filter .scheduled-row,
html body.home.modern-tarot-system-layout .cards-grid.has-active-filter .lower-row,
html body.home.modern-tarot-system-layout .cards-grid.has-active-filter .launched-hand,
html body.home.modern-tarot-system-layout .cards-grid.has-active-filter .hidden-deck,
html body.home.modern-tarot-system-layout .cards-grid.has-active-filter .card-stack.is-expanded {
  display: contents !important;
}

html body.home.modern-tarot-system-layout .cards-grid.has-active-filter .card,
html body.home.modern-tarot-system-layout .cards-grid.has-active-filter .card-stack {
  position: relative !important;
  inset: auto !important;
  width: var(--mt-card-w) !important;
  min-width: var(--mt-card-w) !important;
  max-width: var(--mt-card-w) !important;
  margin: 0 !important;
  transform: none !important;
}

html body.home.modern-tarot-system-layout .cards-grid.has-active-filter .card-stack > .card {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

html body.home.modern-tarot-system-layout .cards-grid.has-active-filter .card:hover,
html body.home.modern-tarot-system-layout .cards-grid.has-active-filter .card-stack:hover,
html body.home.modern-tarot-system-layout .cards-grid.has-active-filter .card-stack:hover > .card {
  transform: none !important;
}

html body.home.modern-tarot-system-layout .cards-grid.has-active-filter .initial-overflow {
  display: block !important;
}

html body.home.modern-tarot-system-layout .cards-grid.has-active-filter .card-stack-count {
  display: none !important;
}

html body.home.modern-tarot-system-layout .filter-btn-status[hidden],
html body.home.modern-tarot-system-layout .filter-btn-status:disabled {
  display: none !important;
}

/* Single card view */
html body.single-cards.modern-tarot-system-layout .single-card-wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(58px, 6.5vh, 82px) clamp(42px, 5vw, 90px) clamp(28px, 3.5vh, 44px) !important;
}

html body.single-cards.modern-tarot-system-layout .card-layout {
  display: grid !important;
  /* Keep the card at its established size, but let editorial text use the
   * otherwise empty right-hand side of a large desktop viewport. */
  grid-template-columns: minmax(300px, 340px) minmax(0, 920px) !important;
  align-items: stretch !important;
  gap: clamp(72px, 6vw, 110px) !important;
  width: min(1480px, 100%) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  justify-content: center !important;
}

html body.single-cards.modern-tarot-system-layout .card-image {
  position: sticky !important;
  top: clamp(58px, 6.5vh, 82px) !important;
  align-self: start !important;
  width: 100% !important;
  max-width: 340px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.single-cards.modern-tarot-system-layout .card-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.single-cards.modern-tarot-system-layout .card-info {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  /* The reading column occupies the full usable desktop height. This keeps
   * long card texts readable and puts the previous/next controls at the
   * bottom edge rather than directly below a short excerpt. */
  height: calc(100dvh - clamp(58px, 6.5vh, 82px) - clamp(28px, 3.5vh, 44px)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - clamp(58px, 6.5vh, 82px) - clamp(28px, 3.5vh, 44px)) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 4px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--mt-text) !important;
  box-shadow: none !important;
  font-size: var(--mt-type-copy) !important;
  line-height: 1.45 !important;
  gap: 0 !important;
}

html body.single-cards.modern-tarot-system-layout .card-info-scroll {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 12px 76px 0 !important;
  scrollbar-color: var(--mt-line) transparent;
  scrollbar-width: thin;
}

html body.single-cards.modern-tarot-system-layout .card-info h1 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-family: nimbus-sans, sans-serif !important;
  font-size: var(--mt-type-copy) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body.single-cards.modern-tarot-system-layout .card-reference {
  margin: 0 0 15px !important;
  color: var(--mt-muted) !important;
  font-size: var(--mt-type-copy) !important;
  line-height: 1.35 !important;
}

html body.single-cards.modern-tarot-system-layout .card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 48px !important;
}

html body.single-cards.modern-tarot-system-layout .card-tags .tag {
  padding: 3px 8px !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mt-text) !important;
  box-shadow: none !important;
  font-size: var(--mt-type-copy) !important;
  line-height: 1.2 !important;
}

html body.single-cards.modern-tarot-system-layout .card-event-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0 .4em !important;
  margin: 0 0 34px !important;
  color: #fff !important;
  font-size: var(--mt-type-copy) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

html body.single-cards.modern-tarot-system-layout .card-launch-date,
html body.single-cards.modern-tarot-system-layout .card-location {
  display: inline !important;
  margin: 0 !important;
}

html body.single-cards.modern-tarot-system-layout .card-launch-date,
html body.single-cards.modern-tarot-system-layout .card-location,
html body.single-cards.modern-tarot-system-layout .card-text,
html body.single-cards.modern-tarot-system-layout .documentation-toggle {
  font-size: var(--mt-type-copy) !important;
  line-height: 1.4 !important;
}

html body.single-cards.modern-tarot-system-layout .card-launch-date .value,
html body.single-cards.modern-tarot-system-layout .card-location .value,
html body.single-cards.modern-tarot-system-layout .card-text .value,
html body.single-cards.modern-tarot-system-layout .documentation-toggle,
html body.single-cards.modern-tarot-system-layout .documentation figcaption {
  font-family: nimbus-sans, sans-serif !important;
  font-size: var(--mt-type-copy) !important;
  line-height: 1.4 !important;
}

html body.single-cards.modern-tarot-system-layout .documentation-toggle {
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

html body.single-cards.modern-tarot-system-layout .card-event-meta .value,
html body.single-cards.modern-tarot-system-layout .card-event-meta .value a {
  color: #fff !important;
  font-weight: 700 !important;
}

html body.single-cards.modern-tarot-system-layout .card-text .value p {
  margin: 0 0 1em !important;
}

html body.single-cards.modern-tarot-system-layout .card-text .value p:last-child {
  margin-bottom: 0 !important;
}

html body.single-cards.modern-tarot-system-layout .card-text .value strong,
html body.single-cards.modern-tarot-system-layout .card-text .value b,
html body.single-cards.modern-tarot-system-layout .card-text .value [style*="font-weight: bold"],
html body.single-cards.modern-tarot-system-layout .card-text .value [style*="font-weight:bold"],
html body.single-cards.modern-tarot-system-layout .card-text .value [style*="font-weight: 700"],
html body.single-cards.modern-tarot-system-layout .card-text .value [style*="font-weight:700"] {
  font-weight: 700 !important;
  font-synthesis: weight !important;
}

html body.single-cards.modern-tarot-system-layout .card-text .value em,
html body.single-cards.modern-tarot-system-layout .card-text .value i {
  font-style: italic !important;
}

html body.single-cards.modern-tarot-system-layout .card-text .value u,
html body.single-cards.modern-tarot-system-layout .card-text .value [style*="text-decoration: underline"],
html body.single-cards.modern-tarot-system-layout .card-text .value [style*="text-decoration:underline"] {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: .12em !important;
}

html body.single-cards.modern-tarot-system-layout .documentation-images-section,
html body.single-cards.modern-tarot-system-layout .documentation {
  margin-top: 28px !important;
}

html body.single-cards.modern-tarot-system-layout .card-scroll-more {
  display: inline-grid !important;
  place-items: center !important;
  justify-self: center !important;
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: nimbus-sans, sans-serif !important;
  font-size: var(--mt-type-copy) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html body.single-cards.modern-tarot-system-layout .card-scroll-more[hidden] {
  display: none !important;
}

html body.single-cards.modern-tarot-system-layout .card-scroll-more:hover {
  color: #fff !important;
}

html body.single-cards.modern-tarot-system-layout .close-card,
html body.page.modern-tarot-system-layout .page-close-card {
  display: inline-grid !important;
  place-items: center !important;
  position: fixed !important;
  top: clamp(28px, 3vw, 48px) !important;
  right: clamp(28px, 3vw, 48px) !important;
  z-index: 600 !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff !important;
  font-size: var(--mt-type-small) !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

/* Align the close action with the first headline in each desktop detail view. */
html body.single-cards.modern-tarot-system-layout .close-card {
  top: clamp(58px, 6.5vh, 82px) !important;
}

html body.single-cards.modern-tarot-system-layout .card-navigation {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: flex-end !important;
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 12px 0 8px !important;
  border-top: 0 !important;
  background: #000 !important;
  font-family: nimbus-sans, sans-serif !important;
  position: absolute !important;
  inset: auto auto 0 0 !important;
  z-index: 20 !important;
}

html body.single-cards.modern-tarot-system-layout .card-navigation > div {
  min-width: 0 !important;
}

html body.single-cards.modern-tarot-system-layout .card-navigation > div:first-child {
  grid-column: 1 !important;
  justify-self: start !important;
}

html body.single-cards.modern-tarot-system-layout .card-navigation > div:last-child {
  grid-column: 3 !important;
  justify-self: end !important;
  text-align: right !important;
}

html body.single-cards.modern-tarot-system-layout .card-navigation .card-scroll-more {
  grid-column: 2 !important;
  justify-self: center !important;
}

html body.single-cards.modern-tarot-system-layout .card-navigation .nav-link {
  color: #fff !important;
  font-family: nimbus-sans, sans-serif !important;
  font-size: var(--mt-type-copy) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

html body.single-cards.modern-tarot-system-layout details,
html body.single-cards.modern-tarot-system-layout summary,
html body.single-cards.modern-tarot-system-layout .documentation {
  border: 0 !important;
  box-shadow: none !important;
}

html[data-mt-language="de"] body.modern-tarot-system-layout [data-language-content="en"],
html[data-mt-language="de"] body.modern-tarot-system-layout [data-language-label="en"],
html[data-mt-language="en"] body.modern-tarot-system-layout [data-language-content="de"],
html[data-mt-language="en"] body.modern-tarot-system-layout [data-language-label="de"] {
  display: none !important;
}

html[data-mt-language="de"] body.modern-tarot-system-layout [data-language-content="de"][hidden],
html[data-mt-language="de"] body.modern-tarot-system-layout [data-language-label="de"][hidden],
html[data-mt-language="en"] body.modern-tarot-system-layout [data-language-content="en"][hidden],
html[data-mt-language="en"] body.modern-tarot-system-layout [data-language-label="en"][hidden] {
  display: revert !important;
}

html body.modern-tarot-system-layout #ast-scroll-top {
  display: none !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
  line-height: 32px !important;
  text-align: center !important;
}

html body.modern-tarot-system-layout #ast-scroll-top.mt-scroll-visible {
  display: grid !important;
  place-items: center !important;
}

html body.modern-tarot-system-layout #ast-scroll-top:hover {
  border-color: #fff !important;
  background: #fff !important;
  color: #202020 !important;
}

html body.modern-tarot-system-layout ::selection {
  background: var(--mt-blue) !important;
  color: #fff !important;
}

/* Info and Contact */
html body.page.modern-tarot-system-layout .single-card-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: clamp(38px, 4vh, 58px) clamp(54px, 9vw, 170px) !important;
}

html body.page.modern-tarot-system-layout .page-close-card {
  position: fixed !important;
  top: clamp(38px, 4vh, 58px) !important;
  right: clamp(30px, 5vw, 82px) !important;
  z-index: 40 !important;
  background: #000 !important;
}

html body.page.modern-tarot-system-layout .single-card-wrapper > .card-info {
  width: min(820px, 100%) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--mt-text) !important;
  font-size: var(--mt-type-page) !important;
  line-height: 1.45 !important;
  box-shadow: none !important;
}

html body.page.modern-tarot-system-layout .single-card-wrapper > .card-info .value,
html body.page.modern-tarot-system-layout .single-card-wrapper > .card-info p,
html body.page.modern-tarot-system-layout .single-card-wrapper > .card-info li,
html body.page.modern-tarot-system-layout .single-card-wrapper > .card-info a {
  font-family: nimbus-sans, sans-serif !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

@media (max-width: 1099px) {
  :root {
    --mt-rail: 250px;
    --mt-rail-pad-x: 30px;
    --mt-card-w: clamp(
      120px,
      min(
        calc((100vw - var(--mt-rail) - 94px) / 5),
        calc((100dvh - var(--mt-card-vertical-reserve)) / (2 * var(--mt-card-ratio)))
      ),
      190px
    );
  }

  html body.modern-tarot-system-layout .top-bar.ast-container {
    padding-right: 30px !important;
    padding-left: 30px !important;
  }

  html body.modern-tarot-system-layout .site-wordmark {
    font-size: var(--mt-type-brand-compact) !important;
  }
}

@media not all and (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  @media (min-width: 768px) and (max-width: 1180px) {
    :root {
      --mt-rail: 220px;
      --mt-rail-pad-x: 26px;
      --mt-card-w: clamp(
        120px,
        min(
          calc((100vw - var(--mt-rail) - 70px) / 3),
          calc((100dvh - var(--mt-card-vertical-reserve)) / (2 * var(--mt-card-ratio)))
        ),
        218px
      );
    }

    html body.modern-tarot-system-layout .top-bar.ast-container {
      padding-right: var(--mt-rail-pad-x) !important;
      padding-left: var(--mt-rail-pad-x) !important;
    }

    html body.modern-tarot-system-layout .site-wordmark-script {
      font-size: var(--mt-type-brand-compact) !important;
    }

    html body.modern-tarot-system-layout .site-wordmark-subtitle {
      font-size: var(--mt-type-ui) !important;
    }

    html body.home.modern-tarot-system-layout .cards-wrapper {
      padding-right: 18px !important;
      padding-left: 18px !important;
    }

    html body.home.modern-tarot-system-layout .lower-row {
      gap: clamp(34px, 6vw, 70px) !important;
    }

    html body.home.modern-tarot-system-layout .cards-grid.has-active-filter {
      --mt-card-w: clamp(
        120px,
        min(
          calc((100vw - var(--mt-rail) - 70px) / 3),
          calc((100dvh - var(--mt-card-vertical-reserve)) / (2 * var(--mt-card-ratio)))
        ),
        218px
      );
      grid-template-columns: repeat(3, var(--mt-card-w)) !important;
      column-gap: 16px !important;
      row-gap: 13px !important;
    }
  }
}

@media not all and (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  @media (min-width: 768px) and (max-width: 1000px) {
    :root {
      --mt-launched-hidden-gap: 18px;
      --mt-hidden-right-inset: 20px;
    }

    html body.home.modern-tarot-system-layout
      .launched-hand > :nth-child(n+2) {
      margin-left: -135px !important;
    }

    html body.home.modern-tarot-system-layout
      .launched-hand:is([data-visible-count="5"], [data-visible-count="6"])
      > :nth-child(n+2) {
      margin-left: -170px !important;
    }
  }
}

@media not all and (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  @media (min-width: 768px) and (max-width: 1400px) {
    html body.home.modern-tarot-system-layout .scheduled-row {
      gap: 8px !important;
    }
  }
}

@media not all and (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  @media (min-width: 768px) and (max-width: 900px) {
    html body.single-cards.modern-tarot-system-layout .single-card-wrapper {
      position: relative !important;
      padding: 42px 28px 76px !important;
    }

    html body.single-cards.modern-tarot-system-layout .card-layout {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 42px !important;
      width: 100% !important;
    }

    html body.single-cards.modern-tarot-system-layout .card-image {
      position: static !important;
      width: min(100%, 390px) !important;
      margin: 0 auto !important;
    }

    html body.single-cards.modern-tarot-system-layout .card-info {
      height: min(62vh, 620px) !important;
      min-height: 480px !important;
      max-height: 620px !important;
    }
  }
}

@media (max-width: 767px), (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  :root {
    --mt-rail: 0px;
    --mt-rail-pad-x: 22px;
    --mt-card-w: min(86vw, 400px);
    --mt-mobile-card-top-gap: 12px;
    --mt-mobile-card-side-gap: 18px;
  }

  body.admin-bar.modern-tarot-system-layout .top-bar.ast-container,
  html body.modern-tarot-system-layout .top-bar.ast-container {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 22px !important;
    overflow: visible !important;
    background-position: center top !important;
    background-size: 100% auto !important;
  }

  html body.modern-tarot-system-layout .top-left {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;
  }

  html body.modern-tarot-system-layout .site-wordmark {
    width: auto !important;
    max-width: calc(100% - 62px) !important;
    line-height: 1 !important;
  }

  html body.modern-tarot-system-layout .site-wordmark-script {
    min-height: 54px !important;
    font-size: var(--mt-type-brand-compact) !important;
  }

  html body.modern-tarot-system-layout .site-wordmark-subtitle {
    margin-top: 11px !important;
    font-size: var(--mt-type-ui) !important;
    line-height: 1.18 !important;
  }

  html body.modern-tarot-system-layout .mobile-menu-toggle {
    display: grid !important;
    flex: 0 0 38px !important;
    place-content: center !important;
    gap: 2px !important;
    width: 38px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.modern-tarot-system-layout .mobile-menu-toggle > span:not(.screen-reader-text) {
    display: block !important;
    width: 18px !important;
    height: 1px !important;
    background: #fff !important;
  }

  html body.modern-tarot-system-layout .top-bar.ast-container:not(.is-menu-open) .top-navigation {
    display: none !important;
  }

  html body.home.modern-tarot-system-layout .top-bar.ast-container .filter-bar {
    display: none !important;
    position: fixed !important;
    inset: auto 14px calc(72px + env(safe-area-inset-bottom, 0px)) 14px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 24px !important;
    width: auto !important;
    max-height: min(72vh, 520px) !important;
    margin: 0 !important;
    padding: 18px !important;
    overflow-y: auto !important;
    border: 1px solid var(--mt-line) !important;
    background: #111 !important;
    box-shadow: 0 12px 42px rgba(0,0,0,.55) !important;
    z-index: 420 !important;
  }

  html body.home.modern-tarot-system-layout .top-bar.ast-container.is-mobile-filter-open .filter-bar {
    display: grid !important;
  }

  html body.home.modern-tarot-system-layout .mobile-filter-panel-header {
    display: flex !important;
    grid-column: 1 / -1 !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 34px !important;
    color: #fff !important;
    font-family: nimbus-sans, sans-serif !important;
    font-size: var(--mt-type-ui) !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  html body.home.modern-tarot-system-layout .mobile-filter-close {
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 0 !important;
    background: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: var(--mt-type-ui) !important;
    line-height: 1 !important;
  }

  html body.modern-tarot-system-layout .filter-section {
    gap: 5px !important;
  }

  html body.modern-tarot-system-layout .status-filter {
    grid-column: 1 / -1 !important;
  }

  html body.home.modern-tarot-system-layout .status-filter .tags {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  html body.home.modern-tarot-system-layout .filter-btn-status {
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 7px 8px !important;
  }

  html body.home.modern-tarot-system-layout .mobile-filter-toggle {
    position: fixed !important;
    left: 18px !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 450 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 92px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 0 !important;
    background: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    font-family: nimbus-sans, sans-serif !important;
    font-size: var(--mt-type-ui) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  html body.home.modern-tarot-system-layout .mobile-filter-toggle[aria-expanded="true"],
  html body.home.modern-tarot-system-layout .mobile-filter-toggle.has-active-filter {
    border-color: #fff !important;
    background: #fff !important;
    color: #111 !important;
  }

  html body.home.modern-tarot-system-layout .mobile-filter-count:not(:empty) {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    background: var(--mt-blue) !important;
    color: #fff !important;
    font-size: var(--mt-type-small) !important;
  }

  html body.home.modern-tarot-system-layout .mobile-filter-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 190 !important;
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(0,0,0,.58) !important;
  }

  html body.home.modern-tarot-system-layout.mobile-filter-open .mobile-filter-backdrop {
    display: block !important;
  }

  html body.home.modern-tarot-system-layout.mobile-filter-open {
    overflow: hidden !important;
  }

  html body.modern-tarot-system-layout .top-navigation {
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    column-gap: 22px !important;
    row-gap: 0 !important;
    width: 100% !important;
    margin: 30px 0 0 !important;
  }

  html body.modern-tarot-system-layout .top-navigation .language-switch {
    grid-column: auto !important;
    justify-self: end !important;
    gap: 6px !important;
  }

  html body.modern-tarot-system-layout #page {
    width: 100% !important;
    margin: 0 !important;
  }

  html body.home.modern-tarot-system-layout .cards-wrapper {
    padding: var(--mt-mobile-card-top-gap) var(--mt-mobile-card-side-gap) 80px !important;
    overflow: visible !important;
  }

  html body.home.modern-tarot-system-layout .scheduled-row,
  html body.home.modern-tarot-system-layout .lower-row,
  html body.home.modern-tarot-system-layout .launched-hand,
  html body.home.modern-tarot-system-layout .hidden-deck {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 25px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  html body.home.modern-tarot-system-layout .lower-row {
    margin-top: 25px !important;
  }

  html body.home.modern-tarot-system-layout .lower-row,
  html body.home.modern-tarot-system-layout .launched-hand {
    display: contents !important;
  }

  html body.home.modern-tarot-system-layout .scheduled-row.is-overflow > * + * {
    margin-left: 0 !important;
  }

  html body.home.modern-tarot-system-layout .launched-hand > *,
  html body.home.modern-tarot-system-layout .hidden-deck > * {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  html body.home.modern-tarot-system-layout .launched-hand > :only-child,
  html body.home.modern-tarot-system-layout .launched-hand > :nth-child(n),
  html body.home.modern-tarot-system-layout .launched-hand > :nth-child(n):hover,
  html body.home.modern-tarot-system-layout .hidden-deck > :nth-child(n),
  html body.home.modern-tarot-system-layout .hidden-deck > :nth-child(n):hover {
    position: relative !important;
    inset: auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
    transform: none !important;
  }

  html body.home.modern-tarot-system-layout .initial-overflow {
    display: block !important;
  }

  html body.home.modern-tarot-system-layout .card,
  html body.home.modern-tarot-system-layout .card-stack,
  html body.home.modern-tarot-system-layout .card-stack > .card {
    width: var(--mt-card-w) !important;
    min-width: var(--mt-card-w) !important;
    max-width: var(--mt-card-w) !important;
  }

  html body.home.modern-tarot-system-layout .cards-grid.has-active-filter {
    --mt-card-w: min(86vw, 400px);
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  html body.single-cards.modern-tarot-system-layout .single-card-wrapper {
    position: relative !important;
    padding: var(--mt-mobile-card-top-gap) var(--mt-mobile-card-side-gap) 72px !important;
  }

  html body.single-cards.modern-tarot-system-layout .card-layout {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
    width: 100% !important;
  }

  html body.single-cards.modern-tarot-system-layout .card-image {
    position: static !important;
    width: var(--mt-card-w) !important;
    margin: 0 auto !important;
  }

  html body.single-cards.modern-tarot-system-layout .card-info {
    height: 72vh !important;
    min-height: 72vh !important;
    max-height: 72vh !important;
    padding: 0 !important;
    border-left: 0 !important;
    border-top: 0 !important;
  }

  html body.single-cards.modern-tarot-system-layout .card-info-scroll {
    padding: 0 8px calc(88px + env(safe-area-inset-bottom, 0px)) 0 !important;
  }

  html body.single-cards.modern-tarot-system-layout .card-navigation {
    position: fixed !important;
    inset: auto 18px calc(18px + env(safe-area-inset-bottom, 0px)) 18px !important;
    z-index: 560 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) !important;
    align-items: end !important;
    width: auto !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  html body.single-cards.modern-tarot-system-layout .card-navigation > div {
    flex: none !important;
    min-width: 0 !important;
    pointer-events: none !important;
  }

  html body.single-cards.modern-tarot-system-layout .card-navigation > div:first-child {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  html body.single-cards.modern-tarot-system-layout .card-navigation > div:last-child {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  html body.single-cards.modern-tarot-system-layout .card-navigation .nav-link,
  html body.single-cards.modern-tarot-system-layout .card-scroll-more {
    min-height: 38px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--mt-line) !important;
    border-radius: 0 !important;
    background: #000 !important;
    color: #fff !important;
    font-size: var(--mt-type-ui) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
  }

  html body.single-cards.modern-tarot-system-layout .card-navigation .nav-link {
    display: inline-flex !important;
    align-items: center !important;
  }

  html body.single-cards.modern-tarot-system-layout .card-scroll-more {
    position: static !important;
    grid-column: 2 !important;
    justify-self: center !important;
    width: 38px !important;
    max-width: 38px !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body.page.modern-tarot-system-layout .single-card-wrapper {
    padding: 48px 22px 80px !important;
  }

  html body.page.modern-tarot-system-layout .single-card-wrapper > .card-info {
    padding: 0 !important;
    border-left: 0 !important;
    border-top: 0 !important;
  }

  html body.page.modern-tarot-system-layout .page-close-card {
    top: 12px !important;
    right: 18px !important;
  }

  html body.single-cards.modern-tarot-system-layout .close-card,
  html body.page.modern-tarot-system-layout .page-close-card {
    position: fixed !important;
    top: var(--mt-mobile-close-top, 12px) !important;
    right: 18px !important;
    z-index: 600 !important;
    background: #000 !important;
  }

  html body.admin-bar.single-cards.modern-tarot-system-layout .close-card,
  html body.admin-bar.page.modern-tarot-system-layout .page-close-card {
    top: var(--mt-mobile-close-top, 58px) !important;
  }
}

html body.modern-tarot-system-layout .language-switch > span[aria-hidden="true"] {
  display: none !important;
}

html[data-mt-language="de"] body.modern-tarot-system-layout .language-switch [data-language-toggle="de"],
html[data-mt-language="en"] body.modern-tarot-system-layout .language-switch [data-language-toggle="en"] {
  display: none !important;
}

html body.modern-tarot-system-layout .language-switch .language-toggle {
  display: inline-grid !important;
  place-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px 9px 4px !important;
  border: 1px solid var(--mt-green) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mt-green) !important;
  box-shadow: none !important;
  font-family: nimbus-sans, sans-serif !important;
  font-size: var(--mt-type-ui) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

html body.modern-tarot-system-layout .language-switch .language-toggle:hover,
html body.modern-tarot-system-layout .language-switch .language-toggle:focus-visible,
html body.modern-tarot-system-layout .language-switch .language-toggle.is-active {
  border-color: var(--mt-green) !important;
  background: var(--mt-green) !important;
  color: var(--mt-sidebar) !important;
}

/* Native page navigation: avoid whole-page snapshot blending on clicks. */
@view-transition {
  navigation: none;
}

html body.home.modern-tarot-system-layout .cards-grid.is-filtering .card,
html body.home.modern-tarot-system-layout .cards-grid.is-filtering .card-stack {
  transition: none !important;
}
/*
 * About, Contact and the language switch sit directly on the sidebar artwork.
 * The former pseudo-elements added two horizontal HUD strips behind them.
 */
html body.modern-tarot-system-layout .top-navigation::before,
html body.modern-tarot-system-layout .top-navigation::after {
  content: none !important;
  display: none !important;
}

/* ================================================================
 * Production sidebar — layered artwork, rebuilt from the supplied
 * individual drawing files.
 * ================================================================ */

html body.modern-tarot-sidebar-production .top-bar.ast-container {
  background: var(--mt-sidebar) !important;
  background-image: none !important;
}

html body.modern-tarot-sidebar-production .top-bar.ast-container::after {
  content: none !important;
  display: none !important;
}

html body.modern-tarot-sidebar-production .sidebar-artwork {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body.modern-tarot-sidebar-production .sidebar-artwork-layer {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: fill !important;
  pointer-events: none !important;
  user-select: none !important;
}

html body.modern-tarot-sidebar-production .sidebar-artwork-movement {
  /* The red loop begins just below the edge, as in the approved sidebar. */
  top: 4.2% !important;
  left: 0% !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 96.1% !important;
}

html body.modern-tarot-sidebar-production .sidebar-artwork-nerves {
  top: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 80% !important;
}

html body.modern-tarot-sidebar-production .sidebar-artwork-paper {
  top: 42.6% !important;
  left: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 29.3% !important;
}

html body.modern-tarot-sidebar-production .sidebar-artwork-apparatus {
  /* Scale the four arrows as one composition: this keeps the lower pair
     above the edge while returning the right-hand pair to its reference x. */
  top: 79.8% !important;
  left: 14% !important;
  z-index: 4 !important;
  width: auto !important;
  height: 14.1% !important;
}

html body.modern-tarot-sidebar-production .sidebar-artwork-title {
  top: calc(9.6% - 8px) !important;
  left: 4% !important;
  z-index: 5 !important;
  width: 93% !important;
  height: auto;
}

html body.modern-tarot-sidebar-production .sidebar-artwork-mobile-only,
html body.modern-tarot-sidebar-production .mobile-header-artwork,
html body.modern-tarot-system-layout .wordmark-subtitle-mobile {
  display: none !important;
}

/*
 * Dark sidebar controls shared by the black and white-trial colorways. Their
 * title artwork remains independent; only the interface colors are shared.
 */
html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
  .site-wordmark-subtitle,
html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
  .top-navigation .nav-hud-item,
html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
  .top-navigation .language-switch {
  color: #000 !important;
}

html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
  .top-navigation .language-toggle {
  border-color: #000 !important;
  background: transparent !important;
  color: #000 !important;
}

html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
  .top-navigation .language-toggle:hover,
html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
  .top-navigation .language-toggle:focus-visible,
html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
  .top-navigation .language-toggle.is-active {
  border-color: #000 !important;
  background: #000 !important;
  color: var(--mt-sidebar) !important;
}

html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
  .mobile-menu-toggle {
  border-color: #000 !important;
  background: transparent !important;
  color: #000 !important;
}

html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
  .mobile-menu-toggle > span:not(.screen-reader-text) {
  background: #000 !important;
}

@media not all and (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  @media (min-width: 768px) {
    html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
      .filter-label,
    html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
      .filter-section select.tag,
    html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
      .filter-btn-status {
      color: #000 !important;
    }

    html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
      .filter-section select.tag {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") !important;
    }

    html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
      .filter-btn-status {
      border-color: #000 !important;
      background: transparent !important;
    }

    html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
      .filter-btn-status.active,
    html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
      .filter-btn-status:hover,
    html body.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
      .filter-btn-status:focus-visible {
      border-color: #000 !important;
      background: #000 !important;
      color: var(--mt-sidebar) !important;
    }
  }
}

@media (max-width: 767px), (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  html body.home.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
    .mobile-filter-toggle {
    border-color: #000 !important;
    background: var(--mt-sidebar) !important;
    color: #000 !important;
  }

  html body.home.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
    .mobile-filter-toggle[aria-expanded="true"],
  html body.home.modern-tarot-sidebar-production.modern-tarot-sidebar-dark-controls
    .mobile-filter-toggle.has-active-filter {
    border-color: #000 !important;
    background: #000 !important;
    color: var(--mt-sidebar) !important;
  }
}

@media not all and (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  @media (min-width: 768px) {
    html body.modern-tarot-sidebar-production .top-bar.ast-container {
      --mt-desktop-rail-height: max(640px, 100dvh);
      --mt-desktop-filter-height: max(
        calc(var(--mt-desktop-rail-height) * .248),
        calc(var(--mt-type-ui) * 10 + 30px)
      );
      padding: 0 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    html body.admin-bar.modern-tarot-sidebar-production .top-bar.ast-container {
      --mt-desktop-rail-height: max(640px, calc(100dvh - 32px));
    }

    @media (max-width: 782px) {
      html body.admin-bar.modern-tarot-sidebar-production .top-bar.ast-container {
        --mt-desktop-rail-height: max(640px, calc(100dvh - 46px));
        top: 46px !important;
        min-height: calc(100vh - 46px) !important;
        height: calc(100vh - 46px) !important;
      }
    }

    html body.modern-tarot-sidebar-production .sidebar-artwork {
      height: var(--mt-desktop-rail-height) !important;
    }

    html body.modern-tarot-sidebar-production .sidebar-artwork-title {
      /* Keep the lettering large and move it upward before reducing size.
         Ink occupies at most .6 of the PNG width across all colorways;
         the subtitle starts at 36% * 78.6% = 28.296% of rail height.
         Reserve room above the image and at least 8px below the lettering.
         Lower the refined image by 20px wherever the subtitle gap allows. */
      --mt-desktop-title-width: min(
        calc(var(--mt-rail) * .86),
        calc(var(--mt-desktop-rail-height) * .4716 - 40px)
      );
      width: var(--mt-desktop-title-width) !important;
      top: min(
        calc(clamp(
          8px,
          var(--mt-desktop-rail-height) * .28296 - var(--mt-rail) * .558 - 16px,
          var(--mt-desktop-rail-height) * .096 - 8px
        ) + 20px),
        calc(var(--mt-desktop-rail-height) * .28296 - var(--mt-desktop-title-width) * .6 - 8px)
      ) !important;
    }

    html body.modern-tarot-sidebar-production .top-left {
      position: absolute !important;
      inset: 0 !important;
      z-index: 6 !important;
      display: block !important;
      width: 100% !important;
      height: var(--mt-desktop-rail-height) !important;
      pointer-events: none !important;
    }

    html body.modern-tarot-sidebar-production .site-wordmark {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 36% !important;
      pointer-events: auto !important;
    }

    html body.modern-tarot-sidebar-production .site-wordmark-script {
      display: none !important;
    }

    html body.modern-tarot-sidebar-production .site-wordmark-subtitle {
      position: absolute !important;
      top: 78.6% !important;
      left: 10.8% !important;
      width: 80.5% !important;
      min-height: 0 !important;
      margin: 0 !important;
      font-size: 17px !important;
      line-height: 1.15 !important;
      letter-spacing: .055em !important;
    }

    html body.home.modern-tarot-sidebar-production .filter-bar {
      position: absolute !important;
      top: calc(var(--mt-desktop-rail-height) * .4435) !important;
      left: 10.8% !important;
      z-index: 7 !important;
      display: block !important;
      width: 81.5% !important;
      height: var(--mt-desktop-filter-height) !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    html body.home.modern-tarot-sidebar-production .filter-bar > .filter-section {
      position: absolute !important;
      left: 0 !important;
      display: block !important;
      width: 100% !important;
      height: auto !important;
      margin: 0 !important;
      transform: none !important;
    }

    html body.home.modern-tarot-sidebar-production
      .filter-bar > .filter-section:nth-child(2) {
      top: 0 !important;
    }

    html body.home.modern-tarot-sidebar-production
      .filter-bar > .filter-section:nth-child(3) {
      top: 34.6% !important;
    }

    html body.home.modern-tarot-sidebar-production
      .filter-bar > .status-filter {
      top: 70.5% !important;
    }

    html body.modern-tarot-sidebar-production .filter-label {
      display: block !important;
      line-height: 1.2 !important;
    }

    html body.modern-tarot-sidebar-production .filter-section select.tag {
      appearance: none !important;
      -webkit-appearance: none !important;
      width: max-content !important;
      min-width: 0 !important;
      max-width: 100% !important;
      height: 31px !important;
      margin-top: 3px !important;
      padding-left: 1px !important;
      padding-right: 18px !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.25'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 1px center !important;
      background-size: 10px 6px !important;
      line-height: 31px !important;
      field-sizing: content !important;
    }

    html body.modern-tarot-sidebar-production .filter-bar .tags {
      gap: clamp(10px, 1.1vh, 14px) clamp(12px, .9vw, 16px) !important;
    }

    html body.modern-tarot-sidebar-production .top-navigation {
      position: absolute !important;
      top: max(
        calc(var(--mt-desktop-rail-height) * .853),
        calc(var(--mt-desktop-rail-height) * .4435 + var(--mt-desktop-filter-height) + 24px)
      ) !important;
      left: 10.8% !important;
      right: auto !important;
      z-index: 7 !important;
      grid-template-columns: max-content max-content minmax(0, 1fr) !important;
      align-items: center !important;
      justify-content: start !important;
      gap: 0 clamp(18px, 1.55vw, 24px) !important;
      width: calc(var(--mt-rail) * .784) !important;
      margin: 0 !important;
      transform: none !important;
    }

    html body.modern-tarot-sidebar-production
      .top-navigation .language-switch {
      grid-column: auto !important;
      justify-self: end !important;
    }

    html body.modern-tarot-sidebar-production
      .top-navigation a.language-nav-link {
      text-decoration: none !important;
    }
  }
}

/* The production sidebar positions its controls against the artwork with
   fixed percentage coordinates. Its desktop subtitle used to opt out of the
   large-screen type scale; restore that scale without changing the laptop
   composition or the artwork coordinates. This follows the production
   placement rules deliberately, so it wins over their 17px fallback. */
@media (min-width: 1600px) {
  html body.modern-tarot-sidebar-production .site-wordmark-subtitle {
    font-size: var(--mt-type-ui) !important;
  }

  html body.modern-tarot-sidebar-production .filter-section select.tag {
    height: 40px !important;
    padding-right: 22px !important;
    background-size: 12px 7px !important;
    line-height: 40px !important;
  }
}

@media (max-width: 767px), (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  html body.modern-tarot-sidebar-production .top-bar.ast-container,
  html body.admin-bar.modern-tarot-sidebar-production .top-bar.ast-container {
    /* Keep the reference artwork coordinates; crop only its bottom edge.
       Reserve an extra 4px below the lettering and scale the subtitle to
       leave room for the menu on narrow phones, including logged-in views. */
    --mt-mobile-artwork-height: max(120px, 35.44vw);
    --mt-mobile-header-height: max(109.5px, calc(27.2vw + 21.5px));
    --mt-mobile-subtitle-top: calc(24.7vw + 4px);
    padding: 0 2.5vw !important;
    overflow: visible !important;
  }

  html body.modern-tarot-sidebar-production .sidebar-artwork {
    height: var(--mt-mobile-artwork-height) !important;
    clip-path: inset(0 0 max(0px, calc(var(--mt-mobile-artwork-height) - var(--mt-mobile-header-height))) 0);
  }

  html body.modern-tarot-sidebar-production
    .top-bar.is-menu-open .sidebar-artwork {
    height: 100% !important;
    clip-path: none;
  }

  html body.modern-tarot-sidebar-production .sidebar-artwork-title {
    top: 0 !important;
    left: 2% !important;
    width: 96% !important;
    height: auto !important;
    object-fit: contain !important;
    clip-path: none !important;
  }

  html body.modern-tarot-sidebar-production .sidebar-artwork > .sidebar-artwork-layer {
    display: none !important;
  }

  html body.modern-tarot-sidebar-production .mobile-header-artwork {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    /* Keep the original scale when the menu adds room below the header. */
    height: var(--mt-mobile-artwork-height) !important;
    overflow: visible !important;
    fill: none;
    pointer-events: none;
  }

  html body.modern-tarot-sidebar-production .mobile-header-artwork path {
    /* Ink silhouettes preserve each drawing's pressure and uneven edges.
       Do not replace them with uniform-width, rounded SVG strokes. */
    stroke: none;
  }

  html body.modern-tarot-sidebar-production .top-left {
    position: relative !important;
    z-index: 6 !important;
    display: block !important;
    min-height: var(--mt-mobile-header-height) !important;
  }

  html body.modern-tarot-sidebar-production
    .top-bar.ast-container.is-menu-open .top-left {
    min-height: var(--mt-mobile-header-height) !important;
  }

  html body.modern-tarot-sidebar-production .site-wordmark {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--mt-mobile-header-height) !important;
  }

  html body.modern-tarot-sidebar-production .site-wordmark-script {
    display: none !important;
  }

  html body.modern-tarot-sidebar-production .site-wordmark-subtitle {
    position: absolute !important;
    top: var(--mt-mobile-subtitle-top) !important;
    left: 0 !important;
    width: calc(100% - 12px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    font-size: clamp(14px, 4.35vw, 18.5px) !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
    letter-spacing: .004em !important;
    text-transform: none !important;
  }

  html body.modern-tarot-sidebar-production .wordmark-subtitle-desktop {
    display: none !important;
  }

  html body.modern-tarot-sidebar-production .wordmark-subtitle-mobile,
  html body.modern-tarot-sidebar-production .site-wordmark-subtitle .site-wordmark-description,
  html body.modern-tarot-sidebar-production .site-wordmark-subtitle .site-wordmark-credit {
    display: inline !important;
    white-space: nowrap !important;
  }

  /* Final mobile composition: the yellow line clears the English "by". */
  html body.modern-tarot-sidebar-production .mobile-header-paper {
    transform: translateX(-1.6vw);
    transform-box: view-box;
    transform-origin: 0 0;
  }

  html body.modern-tarot-sidebar-production .top-bar.ast-container .mobile-menu-toggle {
    top: calc(var(--mt-mobile-subtitle-top) - 21.5px + 2.5vw + 8px) !important;
    height: 28px !important;
  }

  /* Keep a 44px touch target even though the visible header is slim. */
  html body.modern-tarot-sidebar-production .top-bar.ast-container .mobile-menu-toggle::before {
    content: "";
    position: absolute;
    inset: -8px 0;
  }

  html body.modern-tarot-sidebar-production .mobile-menu-toggle {
    position: absolute !important;
    /* Preserve the hamburger's position and its full 44px touch target. */
    top: min(calc(26vw - 9px), calc(var(--mt-mobile-artwork-height) - 46px)) !important;
    right: 0 !important;
    z-index: 8 !important;
    width: 44px !important;
    height: 44px !important;
    gap: 4px !important;
  }

  html body.modern-tarot-sidebar-production .mobile-menu-toggle > span:not(.screen-reader-text) {
    width: clamp(20px, 6.4vw, 28px) !important;
    height: clamp(1.5px, .4vw, 2px) !important;
    border-radius: 0 !important;
  }

  html body.modern-tarot-sidebar-production .mobile-menu-toggle,
  html body.modern-tarot-sidebar-production .mobile-menu-toggle:hover,
  html body.modern-tarot-sidebar-production .mobile-menu-toggle:focus,
  html body.modern-tarot-sidebar-production .mobile-menu-toggle:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body.modern-tarot-sidebar-production .mobile-menu-toggle:focus-visible {
    outline: 1px solid currentColor !important;
    outline-offset: 2px;
  }

  html body.modern-tarot-sidebar-production .top-navigation {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 7 !important;
    margin: 0 !important;
    padding: 12px 0 !important;
  }

  html body.modern-tarot-sidebar-production
    .top-navigation a.language-nav-link,
  html body.modern-tarot-sidebar-production
    .top-navigation a.language-nav-link:hover,
  html body.modern-tarot-sidebar-production
    .top-navigation a.language-nav-link:focus,
  html body.modern-tarot-sidebar-production
    .top-navigation a.language-nav-link:focus-visible {
    text-decoration: none !important;
  }
}

/*
 * Initial table composition. The released hand lives in its own, slightly
 * lower row so tall event cards never collide with the upcoming row. The
 * hidden deck is held inside the table instead of against its outer edge.
 */
@media not all and (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  @media (min-width: 768px) {
    html body.home.modern-tarot-system-layout
      .cards-grid:not(.has-active-filter) {
      position: relative !important;
      height: auto !important;
      min-height: 0 !important;
    }

    html body.home.modern-tarot-system-layout
      .cards-grid:not(.has-active-filter) .scheduled-row {
      position: relative !important;
      z-index: 4 !important;
      overflow: visible !important;
    }

    html body.home.modern-tarot-system-layout
      .cards-grid:not(.has-active-filter) .lower-row {
      position: relative !important;
      inset: auto !important;
      right: auto !important;
      bottom: auto !important;
      z-index: 2 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) var(--mt-card-w) !important;
      align-items: start !important;
      gap: var(--mt-launched-hidden-gap) !important;
      padding-right: var(--mt-hidden-right-inset) !important;
      margin-top: var(--mt-card-row-gap) !important;
      overflow: visible !important;
    }

    html body.home.modern-tarot-system-layout
      .cards-grid:not(.has-active-filter) .launched-hand {
      justify-self: center !important;
    }

    /* Keep the group counter above the row below it. */
    html body.home.modern-tarot-system-layout
      .cards-grid:not(.has-active-filter) .scheduled-row .card-stack-count {
      z-index: 30 !important;
      right: -17px !important;
      bottom: -18px !important;
      left: auto !important;
    }

    html body.home.modern-tarot-system-layout
      .cards-grid:not(.has-active-filter) .scheduled-row
      .card-stack[data-stack-count="2"] .card-stack-count {
      right: -10px !important;
      bottom: 6px !important;
    }

    html body.home.modern-tarot-system-layout
      .cards-grid:not(.has-active-filter) .scheduled-row
      .card-stack[data-stack-count="3"] .card-stack-count {
      right: -12px !important;
      bottom: -6px !important;
    }

    html body.home.modern-tarot-system-layout
      .cards-grid:not(.has-active-filter) .hidden-deck {
      flex: 0 0 var(--mt-card-w) !important;
      justify-self: end !important;
      transform: translateY(clamp(10px, 1.5vh, 14px)) !important;
      margin-bottom: clamp(24px, 2.5vh, 36px) !important;
    }
  }
}

/* A single released card is not a hand. On touch screens no launched card
 * should inherit desktop hover motion, even through its link/card wrapper. */
@media (max-width: 767px), (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  html body.home.modern-tarot-system-layout .launched-hand > *,
  html body.home.modern-tarot-system-layout .launched-hand > *:hover,
  html body.home.modern-tarot-system-layout .launched-hand > *:focus,
  html body.home.modern-tarot-system-layout .launched-hand > *:focus-within,
  html body.home.modern-tarot-system-layout .launched-hand > * > *,
  html body.home.modern-tarot-system-layout .launched-hand > * > *:hover,
  html body.home.modern-tarot-system-layout .launched-hand > * > *:focus,
  html body.home.modern-tarot-system-layout .launched-hand .card,
  html body.home.modern-tarot-system-layout .launched-hand .card:hover {
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: 1 !important;
    transition: none !important;
    will-change: auto !important;
    animation: none !important;
  }

  html body.home.modern-tarot-system-layout
    .launched-hand > .card-stack:hover > .card:nth-of-type(n),
  html body.home.modern-tarot-system-layout
    .launched-hand > .card-stack > .card:nth-of-type(n):hover {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    animation: none !important;
  }

  html body.home.modern-tarot-system-layout
    .launched-hand > .card-stack:hover > .card:nth-of-type(1),
  html body.home.modern-tarot-system-layout
    .launched-hand > .card-stack > .card:nth-of-type(1):hover {
    transform: none !important;
  }

  html body.home.modern-tarot-system-layout
    .launched-hand > .card-stack:hover > .card:nth-of-type(2),
  html body.home.modern-tarot-system-layout
    .launched-hand > .card-stack > .card:nth-of-type(2):hover {
    transform: translate(7px, 4px) rotate(.5deg) !important;
  }

  html body.home.modern-tarot-system-layout
    .launched-hand > .card-stack:hover > .card:nth-of-type(3),
  html body.home.modern-tarot-system-layout
    .launched-hand > .card-stack > .card:nth-of-type(3):hover {
    transform: translate(13px, 8px) rotate(-.4deg) !important;
  }

  html body.home.modern-tarot-system-layout
    .launched-hand > .card-stack:hover > .card:nth-of-type(n+4),
  html body.home.modern-tarot-system-layout
    .launched-hand > .card-stack > .card:nth-of-type(n+4):hover {
    transform: translate(18px, 12px) !important;
  }

  /* Touch browsers can retain :hover after a tap. Keep scheduled stacks in
   * their resting geometry so grouped cards never flash or disappear. */
  html body.home.modern-tarot-system-layout .scheduled-row > .card-stack,
  html body.home.modern-tarot-system-layout .scheduled-row > .card-stack:hover {
    z-index: auto !important;
    transform: rotate(var(--scheduled-rotation, 0deg)) !important;
    transition: none !important;
  }

  html body.home.modern-tarot-system-layout .scheduled-row > .card-stack > .card {
    transition: none !important;
  }

  html body.home.modern-tarot-system-layout .scheduled-row > .card-stack:hover > .card:nth-of-type(2) {
    transform: translate(7px, 4px) rotate(.5deg) !important;
  }

  html body.home.modern-tarot-system-layout .scheduled-row > .card-stack:hover > .card:nth-of-type(3) {
    transform: translate(13px, 8px) rotate(-.4deg) !important;
  }

  html body.home.modern-tarot-system-layout .scheduled-row > .card-stack:hover > .card:nth-of-type(n+4) {
    transform: translate(18px, 12px) !important;
  }
}

/* Short touch-screen landscape: compact header, unchanged portrait artwork. */
@media (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  html body.modern-tarot-sidebar-production .top-bar.ast-container {
    --mt-mobile-landscape-title-width: min(70vw, 520px);
    --mt-mobile-landscape-art-width: min(64vw, 500px);
    --mt-mobile-artwork-height: calc(var(--mt-mobile-landscape-art-width) * .3544);
    --mt-mobile-subtitle-top: calc(var(--mt-mobile-landscape-title-width) * .2384 + 8px);
    --mt-mobile-header-height: calc(var(--mt-mobile-subtitle-top) + 40px);
  }

  html body.modern-tarot-sidebar-production .sidebar-artwork-title {
    width: var(--mt-mobile-landscape-title-width) !important;
  }

  html body.modern-tarot-sidebar-production .mobile-header-artwork {
    inset: 0 0 auto auto !important;
    width: var(--mt-mobile-landscape-art-width) !important;
  }

  html body.modern-tarot-sidebar-production .site-wordmark-subtitle {
    font-size: clamp(14px, 1.8vw, 16px) !important;
  }

  html body.modern-tarot-sidebar-production .mobile-menu-toggle {
    top: calc(var(--mt-mobile-header-height) - 46px) !important;
  }
}

/* Narrow desktop/tablet rails need space for all three navigation items. */
@media not all and (max-width: 1024px) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  @media (min-width: 768px) and (max-width: 1400px) {
    html body.modern-tarot-sidebar-production .top-navigation {
      column-gap: 6px !important;
      width: 81.5% !important;
    }
  }
}