.variety-map-page {
  min-width: 320px;
  background:
    radial-gradient(circle at 48% 90px, rgb(255 255 255 / 84%), transparent 36rem),
    linear-gradient(180deg, rgb(184 100 110 / 7%), transparent 330px),
    var(--color-washi-canvas);
}

.variety-site-header {
  position: sticky;
  z-index: 80;
  top: 0;
  display: grid;
  grid-template-columns: minmax(210px, auto) 1fr auto;
  align-items: center;
  min-height: 58px;
  padding: 0 var(--page-gutter);
  border-bottom: 1px solid var(--washi-surface-border);
  background: rgb(255 253 248 / 95%);
  backdrop-filter: blur(18px);
}

.variety-site-header .home-brand {
  justify-self: start;
}

.variety-site-header .home-navigation {
  display: flex;
  width: 100%;
  min-width: 0;
  justify-content: center;
  align-self: stretch;
  gap: 4px;
}

.variety-site-header .home-navigation a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 100%;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--color-charcoal);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
}

.variety-site-header .home-navigation a:hover,
.variety-site-header .home-navigation a:focus-visible,
.variety-site-header .home-navigation .is-current {
  border-bottom-color: var(--color-sanke-red);
  color: var(--color-sumi-deep);
}

.variety-header-actions {
  display: flex;
  justify-self: end;
  gap: 20px;
}

.variety-header-actions a {
  color: var(--color-sumi-deep);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.variety-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  min-height: 145px;
  padding: 17px var(--page-gutter) 15px;
  border-bottom: 1px solid rgb(95 82 69 / 18%);
  background:
    linear-gradient(90deg, rgb(247 243 235 / 99%) 0%, rgb(247 243 235 / 92%) 34%, rgb(247 243 235 / 20%) 76%),
    url("./assets/r23-header-ukiyoe.webp") center 48% / cover no-repeat;
}

.variety-intro::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, transparent 62%, rgb(255 253 248 / 36%));
}

.variety-intro > * {
  position: relative;
  z-index: 1;
}

.variety-kicker,
.variety-section-label {
  margin: 0 0 5px;
  color: var(--color-sanke-red);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.variety-intro h1 {
  margin: 0;
  color: var(--color-sumi-deep);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 2.6vw, 2.95rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .98;
}

.variety-intro-copy > p:last-child {
  max-width: 760px;
  margin: 7px 0 0;
  color: var(--color-charcoal);
  font-size: clamp(.88rem, 1vw, 1.02rem);
}

.variety-intro-actions {
  display: block;
}

.variety-search-wrap {
  position: relative;
  z-index: 20;
  width: min(100%, 470px);
}

.variety-search-wrap input {
  width: 100%;
  min-height: 42px;
  padding: 0 78px 0 43px;
  border: 1px solid var(--washi-surface-border);
  border-radius: 5px;
  outline: none;
  background:
    linear-gradient(90deg, transparent 42px, rgb(95 82 69 / 12%) 42px, rgb(95 82 69 / 12%) 43px, transparent 43px),
    var(--washi-surface-raised);
  color: var(--color-sumi-deep);
  font: inherit;
  box-shadow: 0 8px 24px rgb(51 43 35 / 7%);
}

.variety-search-wrap::before {
  position: absolute;
  z-index: 1;
  top: 11px;
  left: 15px;
  width: 13px;
  height: 13px;
  border: 1.8px solid var(--color-charcoal-raised);
  border-radius: 50%;
  content: "";
}

.variety-search-wrap::after {
  position: absolute;
  z-index: 1;
  top: 24px;
  left: 27px;
  width: 7px;
  height: 1.8px;
  content: "";
  background: var(--color-charcoal-raised);
  transform: rotate(45deg);
  transform-origin: left center;
}

.variety-search-wrap input:focus-visible {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px rgb(190 24 32 / 16%);
}

.variety-search-clear {
  position: absolute;
  z-index: 3;
  top: 7px;
  right: 8px;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-charcoal-raised);
  font-size: 1.2rem;
}

.variety-search-clear:hover,
.variety-search-clear:focus-visible {
  background: var(--color-sanke-red-soft);
  color: var(--color-sanke-red);
}

.variety-search-results {
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 320px;
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--washi-surface-border);
  border-radius: 7px;
  background: var(--color-washi);
  box-shadow: var(--shadow-elevated);
}

.variety-search-result {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 5px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--color-sumi-deep);
  font: inherit;
  text-align: left;
}

.variety-search-result img {
  width: 36px;
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  object-fit: contain;
}

.variety-search-result small {
  display: block;
  margin-top: 2px;
  color: var(--color-charcoal-raised);
  font-size: .68rem;
}

.variety-search-result:hover,
.variety-search-result:focus-visible,
.variety-search-result.is-active {
  background: var(--color-sanke-red-soft);
}

.variety-route-notice {
  width: fit-content;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--state-warning-border);
  border-radius: 5px;
  background: var(--state-warning-soft);
  color: var(--state-warning);
  font-size: .78rem;
}

.variety-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 18px;
  width: min(100%, 1920px);
  margin: 0 auto;
  padding: 0 var(--page-gutter) 28px;
}

.variety-map-column {
  min-width: 0;
}

.variety-map-toolbar {
  display: flex;
  min-height: 76px;
  padding: 14px 2px 9px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.variety-map-toolbar h2 {
  margin: 0 0 3px;
  color: var(--color-sumi-deep);
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 500;
}

.variety-map-toolbar p {
  margin: 0;
}

.variety-publication-status {
  color: var(--color-charcoal-raised);
  font-size: .73rem;
}

.variety-search-mode {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-charcoal-raised);
  font-size: .72rem;
}

.variety-search-mode button,
.variety-dialog-tools button,
.variety-relationship-action {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid rgb(95 82 69 / 24%);
  border-radius: 5px;
  background: var(--washi-surface-raised);
  color: var(--color-sumi-deep);
  font: inherit;
  font-weight: 700;
}

.variety-search-mode button[aria-pressed="true"] {
  border-color: var(--color-sanke-red);
  background: var(--color-sanke-red-soft);
  color: var(--color-sanke-red);
}

.variety-map-viewport,
.variety-map-canvas {
  min-width: 0;
}

.variety-map-viewport {
  overflow-x: clip;
}

.variety-tree {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.variety-noscript {
  max-width: 760px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid var(--washi-surface-border);
  border-radius: 8px;
  background: var(--color-washi);
}

.variety-noscript > p {
  margin: 0 0 16px;
  color: var(--color-charcoal-raised);
}

.variety-noscript-tree,
.variety-noscript-tree ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 24px;
}

.variety-noscript-tree > li {
  padding: 8px 0;
  border-bottom: 1px solid var(--washi-surface-border);
}

.variety-tree.is-packed {
  position: relative;
  display: block;
  height: var(--atlas-height, auto);
}

.variety-tree.is-packed > .variety-class {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--card-width);
  transform: translate3d(var(--card-x), var(--card-y), 0);
  transition:
    transform 420ms cubic-bezier(.2, .75, .2, 1),
    opacity 220ms ease,
    filter 220ms ease;
}

.variety-class {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(95 82 69 / 25%);
  border-radius: 8px;
  background: rgb(255 253 248 / 89%);
  box-shadow: 0 5px 17px rgb(51 43 35 / 6%);
  list-style: none;
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    opacity 220ms ease,
    filter 220ms ease;
}

.variety-class.is-path-selected {
  border-color: var(--color-sanke-red);
  box-shadow: 0 10px 28px rgb(132 37 43 / 13%);
}

.variety-class.is-dimmed {
  opacity: .42;
  filter: saturate(.45);
}

.variety-class.is-match {
  opacity: 1;
  filter: none;
}

.variety-class[hidden] {
  display: none;
}

.variety-node {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 55px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  outline: none;
  background: transparent;
  color: var(--color-sumi-deep);
  font: inherit;
  text-align: left;
}

.variety-node-art {
  width: 34px;
  height: 45px;
  border-radius: 3px;
  object-fit: contain;
  background:
    radial-gradient(ellipse at 50% 35%, rgb(255 255 255 / 78%), transparent 48%),
    #e4e9e5;
}

.variety-node-art.is-missing {
  display: grid;
  place-items: center;
  color: var(--color-charcoal-raised);
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.variety-node-label {
  min-width: 0;
  font-size: .72rem;
  font-weight: 750;
  line-height: 1.2;
}

.variety-node-count {
  color: var(--color-charcoal-raised);
  font-size: .63rem;
  line-height: 1.15;
  text-align: right;
}

.variety-node:hover,
.variety-node:focus-visible {
  z-index: 3;
  border-color: var(--color-sanke-red);
  background: var(--color-washi);
  box-shadow: 0 0 0 3px rgb(190 24 32 / 12%);
}

.variety-node[aria-current="true"] {
  border-color: var(--color-sanke-red);
  background: var(--color-sanke-red-soft);
  box-shadow: inset 3px 0 0 var(--color-sanke-red);
}

.variety-node[data-kind="class"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
  min-height: 0;
  padding: 11px 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.variety-node[data-kind="class"]::after {
  position: absolute;
  right: 50%;
  bottom: -1px;
  width: 1px;
  height: 11px;
  content: "";
  background: rgb(190 24 32 / 55%);
}

.variety-class.is-path-selected .variety-node[data-kind="class"]::after {
  width: 2px;
  background: var(--color-sanke-red);
}

.variety-family-heading {
  display: grid;
  grid-row: 1;
  min-height: 42px;
  align-content: start;
}

.variety-node[data-kind="class"] .variety-node-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.05;
}

.variety-node[data-kind="class"] .variety-node-count {
  margin-top: 4px;
  font-size: .65rem;
  text-align: center;
}

.variety-node[data-kind="class"] .variety-node-art {
  grid-row: 2;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  margin-top: 5px;
  border-radius: 6px 6px 0 0;
  object-fit: contain;
  transition: transform 260ms cubic-bezier(.2, .75, .2, 1);
}

.variety-node[data-kind="class"]:hover .variety-node-art,
.variety-node[data-kind="class"]:focus-visible .variety-node-art {
  transform: translateY(-3px) scale(1.015);
}

.variety-class > .variety-subtype-list {
  position: relative;
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 7px 7px 8px 20px;
  border-top: 1px solid rgb(95 82 69 / 16%);
  list-style: none;
}

.variety-class > .variety-subtype-list::before {
  position: absolute;
  top: 0;
  bottom: 13px;
  left: 11px;
  width: 1px;
  content: "";
  background: rgb(190 24 32 / 48%);
  transform-origin: top;
  transition: transform 240ms ease, background 220ms ease;
}

.variety-class:hover > .variety-subtype-list::before,
.variety-class:focus-within > .variety-subtype-list::before,
.variety-class.is-path-selected > .variety-subtype-list::before {
  background: var(--color-sanke-red);
  transform: scaleY(1.015);
}

.variety-subtype-list > li {
  position: relative;
}

.variety-subtype-list > li::before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: -9px;
  width: 9px;
  height: 1px;
  content: "";
  background: rgb(190 24 32 / 48%);
}

.variety-subtype-list > li:has(.variety-node[aria-current="true"])::before {
  height: 2px;
  background: var(--color-sanke-red);
}

.variety-detail {
  position: sticky;
  z-index: 35;
  top: 72px;
  align-self: start;
  height: calc(100vh - 88px);
  max-height: 725px;
  min-height: 610px;
  overflow: hidden;
  border: 1px solid var(--washi-surface-border);
  border-radius: 9px;
  background: rgb(255 253 248 / 96%);
  box-shadow: 0 13px 36px rgb(51 43 35 / 9%);
}

.variety-detail-placeholder {
  padding: 18px;
}

.variety-detail-content {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
}

.variety-detail-scroll {
  min-height: 0;
  padding: 15px;
  overflow: auto;
  overscroll-behavior: contain;
}

.variety-detail-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}

.variety-detail-close {
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-washi-muted);
  color: var(--color-sumi-deep);
  font-size: 1.2rem;
}

.variety-detail-art-button {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(95 82 69 / 18%);
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 50% 40%, rgb(255 255 255 / 78%), transparent 48%),
    #e4e9e5;
}

.variety-detail-art-button img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}

.variety-detail-art-button::after {
  position: absolute;
  right: 9px;
  bottom: 9px;
  padding: 5px 8px;
  border-radius: 4px;
  content: "View full illustration ↗";
  background: rgb(23 21 19 / 78%);
  color: white;
  font-size: .64rem;
}

.variety-detail-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 5px;
  color: var(--color-sanke-red);
  font-size: .72rem;
  font-weight: 750;
}

.variety-detail-breadcrumb button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(190 24 32 / 35%);
  text-underline-offset: 3px;
}

.variety-detail h2 {
  margin: 0;
  color: var(--color-sumi-deep);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2vw, 2.15rem);
  font-weight: 500;
  line-height: 1.02;
}

.variety-detail-description {
  margin: 6px 0 9px;
  color: var(--color-charcoal);
  font-size: .81rem;
  line-height: 1.42;
}

.variety-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.variety-traits li {
  padding: 4px 8px;
  border: 1px solid rgb(95 82 69 / 23%);
  border-radius: 4px;
  background: var(--color-washi-muted);
  color: var(--color-charcoal);
  font-size: .64rem;
}

.variety-availability {
  padding-top: 9px;
  border-top: 1px solid rgb(95 82 69 / 19%);
}

.variety-availability-summary {
  display: flex;
  gap: 5px;
  align-items: baseline;
  margin: 0 0 5px;
  color: var(--color-sumi-deep);
  font-family: var(--font-display);
  font-size: 1.04rem;
}

.variety-breeders {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  color: var(--color-sumi-deep);
  font-size: .68rem;
}

.variety-breeders th,
.variety-breeders td {
  padding: 3px 1px;
  border-bottom: 1px solid rgb(95 82 69 / 14%);
  text-align: left;
}

.variety-breeders th:last-child,
.variety-breeders td:last-child {
  text-align: right;
}

.variety-breeders th {
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.variety-availability-note {
  margin: 5px 0 0;
  color: var(--color-charcoal-raised);
  font-size: .65rem;
}

.variety-detail-actions {
  padding: 10px 15px 14px;
  border-top: 1px solid rgb(95 82 69 / 18%);
  background: rgb(255 253 248 / 98%);
}

.variety-relationship-action {
  display: inline-flex;
  min-height: 32px;
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-sanke-red);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}

.variety-scout-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 47px;
  padding: 0 14px;
  border-radius: 5px;
  background: var(--color-sanke-red);
  color: white;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 9px 22px rgb(190 24 32 / 20%);
}

.variety-scout-cta:hover,
.variety-scout-cta:focus-visible {
  outline: 3px solid rgb(190 24 32 / 20%);
  outline-offset: 3px;
  background: #a80f17;
}

.variety-detail-backdrop {
  position: fixed;
  z-index: 89;
  inset: 0;
  border: 0;
  background: rgb(24 20 17 / 34%);
  backdrop-filter: blur(2px);
}

.variety-mobile-summary {
  position: fixed;
  z-index: 70;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: none;
  justify-content: space-between;
  align-items: center;
  min-height: 62px;
  padding: 8px 14px;
  border: 1px solid rgb(95 82 69 / 25%);
  border-radius: 9px;
  background: rgb(255 253 248 / 97%);
  color: var(--color-sumi-deep);
  text-align: left;
  box-shadow: 0 14px 38px rgb(30 25 21 / 22%);
}

.variety-mobile-summary small,
.variety-mobile-summary strong {
  display: block;
}

.variety-mobile-summary small {
  color: var(--color-sanke-red);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.variety-mobile-summary strong {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.variety-mobile-summary > span:last-child {
  font-size: .7rem;
  font-weight: 800;
}

.variety-dialog {
  width: min(94vw, 1180px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(95 82 69 / 26%);
  border-radius: 11px;
  background: var(--color-washi);
  color: var(--color-sumi-deep);
  box-shadow: 0 32px 100px rgb(22 18 16 / 34%);
}

.variety-dialog::backdrop {
  background: rgb(24 20 17 / 48%);
  backdrop-filter: blur(5px);
}

.variety-dialog-shell {
  display: flex;
  max-height: 92vh;
  flex-direction: column;
}

.variety-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;
  padding: 12px 16px;
  border-bottom: 1px solid rgb(95 82 69 / 18%);
}

.variety-dialog-header h2 {
  margin: 0;
  color: var(--color-sumi-deep);
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 500;
}

.variety-dialog-close {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(95 82 69 / 20%);
  border-radius: 50%;
  background: var(--color-washi-muted);
  color: var(--color-sumi-deep);
  font-size: 1.35rem;
}

.variety-art-viewer {
  width: min(94vw, 1500px);
}

.variety-art-viewer figure {
  min-height: 0;
  margin: 0;
  padding: 14px;
  overflow: auto;
}

.variety-art-viewer img {
  display: block;
  width: 100%;
  max-height: calc(92vh - 125px);
  object-fit: contain;
  background: #e6ebe7;
}

.variety-art-viewer figcaption {
  margin-top: 8px;
  color: var(--color-charcoal-raised);
  font-size: .72rem;
  text-align: center;
}

.variety-dialog-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.variety-dialog-tools button {
  min-height: 44px;
}

.variety-relationship-intro,
.variety-dialog-hint {
  margin: 0;
  padding: 9px 16px;
  color: var(--color-charcoal-raised);
  font-size: .72rem;
}

.variety-relationship-stage {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  cursor: grab;
  background:
    radial-gradient(circle at center, rgb(255 255 255 / 95%), transparent 40%),
    repeating-radial-gradient(circle at center, transparent 0 74px, rgb(95 82 69 / 7%) 75px 76px),
    linear-gradient(135deg, #f5f0e7, #e9eee9);
  touch-action: none;
}

.variety-relationship-stage:active {
  cursor: grabbing;
}

.variety-relationship-world {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 560px;
  transform: translate(-50%, -50%) translate(var(--world-x, 0), var(--world-y, 0)) scale(var(--world-scale, 1));
  transform-origin: center;
}

.variety-relationship-world svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.variety-relationship-world line {
  stroke: rgb(190 24 32 / 42%);
  stroke-width: 1.5;
}

.variety-relationship-list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.variety-relationship-item {
  position: absolute;
  transform: translate(-50%, -50%);
}

.variety-relationship-node {
  display: grid;
  width: 118px;
  min-height: 148px;
  padding: 7px;
  place-items: center;
  border: 1px solid rgb(95 82 69 / 25%);
  border-radius: 9px;
  background: rgb(255 253 248 / 94%);
  color: var(--color-sumi-deep);
  box-shadow: 0 10px 25px rgb(35 29 24 / 11%);
}

.variety-relationship-node img {
  width: 84px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}

.variety-relationship-node span {
  font-family: var(--font-display);
  font-size: .82rem;
  line-height: 1.05;
  text-align: center;
}

.variety-relationship-node.is-selected {
  width: 136px;
  min-height: 166px;
  border: 2px solid var(--color-sanke-red);
  background: var(--color-sanke-red-soft);
}

.variety-relationship-node.is-parent {
  border-color: rgb(190 24 32 / 52%);
}

.variety-art-disclosure {
  margin: 0;
  padding: 12px var(--page-gutter) 22px;
  color: var(--color-charcoal-raised);
  font-size: .74rem;
  text-align: center;
}

.variety-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px var(--page-gutter);
  border-top: 1px solid var(--washi-surface-border);
  color: var(--color-charcoal-raised);
  font-size: .78rem;
}

.variety-footer nav {
  display: flex;
  gap: 18px;
}

.variety-footer .public-footer-navigation {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.variety-footer .public-trust-links {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.variety-footer a {
  color: inherit;
}

@media (max-width: 1579px) and (min-width: 1320px) {
  .variety-workspace {
    grid-template-columns: minmax(0, 1fr) 390px;
  }
}

@media (max-width: 1319px) {
  body[data-detail-open="true"] {
    overflow: hidden;
  }

  .variety-workspace {
    display: block;
  }

  .variety-detail {
    position: fixed;
    z-index: 90;
    top: 58px;
    right: 0;
    bottom: 0;
    width: min(430px, 92vw);
    height: auto;
    max-height: none;
    min-height: 0;
    border-radius: 10px 0 0;
    transform: translateX(104%);
    transition: transform 320ms cubic-bezier(.2, .75, .2, 1);
  }

  .variety-map-page[data-detail-open="true"] .variety-detail {
    transform: translateX(0);
  }

  .variety-detail-close {
    display: grid;
    place-items: center;
  }

  .variety-mobile-summary {
    display: flex;
  }

  .variety-map-page[data-detail-open="true"] .variety-mobile-summary {
    display: none;
  }

  .variety-art-disclosure {
    padding-bottom: 86px;
  }
}

@media (max-width: 1040px) {
  .variety-site-header {
    grid-template-columns: 1fr auto;
  }

  .variety-site-header .home-navigation {
    display: none;
  }
}

@media (max-width: 699px) {
  .variety-intro {
    min-height: 170px;
    padding-top: 18px;
  }

  .variety-intro h1 {
    font-size: 2.35rem;
  }

  .variety-workspace {
    padding-right: 12px;
    padding-left: 12px;
  }

  .variety-map-toolbar {
    display: block;
    padding-top: 13px;
  }

  .variety-search-mode {
    min-height: 42px;
    margin-top: 7px;
    justify-content: space-between;
  }

  .variety-detail {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min(88vh, 760px);
    border-radius: 14px 14px 0 0;
    transform: translateY(104%);
  }

  .variety-map-page[data-detail-open="true"] .variety-detail {
    transform: translateY(0);
  }

  .variety-detail-scroll {
    padding: 13px;
  }

  .variety-detail-actions {
    padding: 9px 13px max(13px, env(safe-area-inset-bottom));
  }

  .variety-footer {
    flex-direction: column;
    padding-bottom: 90px;
  }

  .variety-footer nav {
    flex-wrap: wrap;
  }

  .variety-footer .public-footer-navigation {
    justify-items: start;
  }

  .variety-footer .public-trust-links {
    justify-content: flex-start;
  }

  .variety-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .variety-dialog-shell {
    height: 100%;
    max-height: none;
  }

  .variety-relationship-stage {
    min-height: 0;
    flex: 1;
  }

  .variety-relationship-dialog .variety-dialog-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .variety-relationship-dialog .variety-dialog-tools {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 44px;
    gap: 6px;
  }

  .variety-relationship-dialog .variety-dialog-tools button {
    min-width: 0;
    padding-inline: 6px;
    font-size: .68rem;
  }

  .variety-relationship-dialog .variety-dialog-close {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .variety-tree.is-packed > .variety-class,
  .variety-node-art,
  .variety-detail,
  .variety-class {
    scroll-behavior: auto;
    transition-duration: .01ms !important;
  }

  .variety-node[data-kind="class"]:hover .variety-node-art,
  .variety-node[data-kind="class"]:focus-visible .variety-node-art {
    transform: none;
  }
}