/* =============================================================================
   aiduBOX — core stylesheet
   -----------------------------------------------------------------------------
   Palette inherited from hycoForce Tokyo: white paper + deep blue + gray + black.
   All tunable tokens (colours, widths, easing, fonts) live in :root below — edit
   there first; the rest of the file references the variables.

   Layout map (top → bottom in this file):
     :root / reset / .shell        design tokens + shared helpers
     .hex-bg / .scroll-track       fixed hex backdrop + scroll spacer
     .stage-back / .reveal         the fixed stage (dudu left, reveal right)
     .site-header                  fixed top bar (brand + pills)
     .dudu / .palm                 the artwork on the left
     .hero-* / .cards / .card      headline + the six nav cards
     .card-pop                     the per-card popup overlay
     .site-foot                    fixed footer
     .slogan                       the layer revealed behind the cards on scroll
     .updates / .chart             bottom dashboard (feed + 7-day chart)
     @media / prefers-reduced-motion   responsive + accessibility

   NOTE: bump the ?v= query on this file's <link> in index.html after editing,
   so browsers drop the cached version.
   ============================================================================= */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --gray: #525252;
  --blue: #1f4e79;

  --gray-soft: #7c7c7c;
  --gray-line: rgba(82, 82, 82, 0.16);
  --blue-tint: rgba(31, 78, 121, 0.08);
  --blue-line: rgba(31, 78, 121, 0.28);

  --shell: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Latin glyphs resolve to the mono faces (same as the card labels), then
     fall through to the CJK faces for Chinese — per-glyph fallback means one
     stack covers both scripts. */
  --font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", monospace;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* keep the scroll container on the root: putting overflow-x on body
     turns body into its own scroller and breaks the scroll-driven wipe */
  overflow-x: hidden;
}

body {
  background: var(--paper);
  color: var(--gray);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* shared content width: header, stage and footer all align to this */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- hexagon background (ported from hycoForce Tokyo) ---------- */
.hex-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hex-bg-item {
  position: absolute;
  opacity: 0.3;
}

/* ---------- scroll spacer (drives the wipe, holds no content) ---------- */
.scroll-track {
  height: 200vh;
  pointer-events: none;
}

.stage-back {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* fixed stage layout: dudu on the left, reveal column on the right.
   height:100% + border-box padding gives the flex line an explicit height
   equal to the band between the fixed header and footer, which is what lets
   the children cap themselves with max-height instead of overflowing. */
.stage-back__content {
  width: 100%;
  height: 100%;
  max-width: var(--shell);
  padding: 108px var(--gutter) 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3.5vw, 52px);
}

.stage-back .hex-bg {
  position: absolute;
}

/* ---------- reveal column: two stacked layers, mask-wiped ---------- */
.reveal {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 660px;
  max-height: 100%;
  display: grid;
  /* the single auto row must NOT balloon up to the min-content of its
     children (that's what sent the hero 100px past the dudu frame); keep it
     locked to the JS-pinned height so the trio can distribute inside it. */
  grid-template-rows: minmax(0, 1fr);
}

/* both layers occupy the same grid cell so they overlap exactly, completely static */
.reveal__fore,
.reveal__back {
  grid-area: 1 / 1;
  min-height: 0;
  will-change: -webkit-mask-image, mask-image;
}

.reveal__fore {
  pointer-events: auto;
}

.reveal__back {
  pointer-events: none;
}

/* For the handover to feel matched, both layers must span the SAME vertical
   range: if one layer's content stops short of an edge, the seam finishes
   with it early and the other keeps going alone. fore runs 0%→100%
   (eyebrow at the top, cards to the bottom), so the slogan fills the column
   too — Chinese block pinned to the top, English block to the bottom. */
.reveal__back .slogan {
  height: 100%;
}

/* ---------- header (fixed, always above the wipe) ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 22px 0;
}

.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand__mark {
  width: 59px;
  height: 59px;
  object-fit: contain;
}

/* aiduBOX: lowercase gray, uppercase deep blue */
.brand__text {
  font-size: 1.87rem;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: var(--gray);
}

.brand__text b {
  color: var(--blue);
  font-weight: 800;
}

/* pill taglines aligned to the right of the header */
.header-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.header-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: var(--blue);
  border: 1px solid var(--blue-line);
  border-radius: 999px;
  padding: 5px 13px;
  background: var(--blue-tint);
  font-weight: 500;
}

@media (max-width: 1360px) {
  .header-pill:nth-of-type(3) {
    display: none;
  }
}

@media (max-width: 1100px) {
  .header-pill:nth-of-type(2) {
    display: none;
  }
}

@media (max-width: 820px) {
  .header-pill {
    display: none;
  }
}

.header-pill::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

/* left: dudu holding monkey (fixed stage).
   aspect-ratio matches the artwork, so max-height can shrink the box and the
   image follows without letterboxing. That matters because the monkey is
   positioned in % of this box — box and image must stay the same shape or the
   monkey drifts off her palm. */
.dudu {
  position: relative;
  flex: 0 1 auto;
  width: min(42vw, 490px);
  max-height: 100%;
  aspect-ratio: 1047 / 1297;
}

.dudu__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* hermes holding on the palm with soft aura glow */
.palm {
  position: absolute;
  left: 77.5%;
  top: 58.5%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  perspective: 900px;
}

.palm__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-style: preserve-3d;
  animation: hover 5s ease-in-out infinite alternate;
}

@keyframes hover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-6%);
  }
}

/* ---------- hero content (inside the wiped foreground) ---------- */
.hero-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: 0;
  gap: clamp(8px, 1.3vh, 14px);
}

.hero-title {
  /* 4vh cap keeps both lines on two rows even at wide+short viewports;
     at 4.2vh+ "一个专注HERMES AGENT的社区" wraps a third line and the
     title alone eats the whole dudu frame. */
  font-size: clamp(1.4rem, min(3.2vw, 4vh), 2.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 650;
  color: var(--ink);
}

.hero-title span {
  color: var(--blue);
}

.hero-desc {
  max-width: 58ch;
  color: var(--gray);
  font-size: clamp(0.88rem, 1vw, 0.98rem);
  line-height: 1.8;
}

/* global aiduBOX brand styling rule: aidu (gray bold) + BOX (deep blue bold) */
.aidubox-mark {
  font-weight: 800;
  color: var(--gray);
  font-style: normal;
}

.aidubox-mark span {
  color: var(--blue);
  font-weight: 800;
}

/* card grid: 6 nav cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* height-responsive: on short viewports the fixed header + footer eat
     ~145px, so a hard px min-height would push the grid past the band.
     Capped modestly so the updates dashboard below always has room. */
  min-height: clamp(56px, 12vh, 120px);
  padding: 14px 15px 13px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 0%),
    rgba(31, 78, 121, 0.09),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-line);
  box-shadow: 0 14px 30px rgba(31, 78, 121, 0.1);
}

.card:hover::after {
  opacity: 1;
}

.card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card__en {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: rgba(82, 82, 82, 0.45);
  white-space: nowrap;
}

.card__icon {
  width: 24px;
  height: 24px;
  stroke: var(--blue);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s var(--ease);
}

.card:hover .card__icon {
  transform: translateY(-2px) scale(1.06);
}

.card__body {
  position: relative;
  z-index: 1;
}

.card__title {
  display: block;
  font-size: clamp(1.05rem, 1.22vw, 1.25rem);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}

.card__desc {
  display: block;
  font-size: clamp(0.82rem, 0.94vw, 0.95rem);
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--blue);
}

.card__line {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--blue), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.card:hover .card__line {
  transform: scaleX(1);
}

/* ---------- card popup ----------
   Covers the whole right-hand column next to dudu (the same area as the
   reveal it lives in) — headline, cards and dashboard all sit behind it.
   Background matches the homepage: white paper + the same random three-colour
   hexagons. Header shows the icon then the four-character title; footer
   carries the subtitle on the left and the English title on the right. */
.card-pop {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--gray-line);
  box-shadow: 0 22px 60px rgba(31, 78, 121, 0.2);
  display: flex;
  flex-direction: column;
  animation: card-pop 0.28s var(--ease);
}

.card-pop[hidden] {
  display: none;
}

@keyframes card-pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.card-pop__hex {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.card-pop__head,
.card-pop__bd,
.card-pop__ft {
  position: relative;
  z-index: 1;
}

.card-pop__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 44px 6px 16px;
}

.card-pop__icon {
  width: 26px;
  height: 26px;
  stroke: var(--blue);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-pop__title {
  font-size: clamp(1.15rem, 1.3vw, 1.4rem);
  font-weight: 800;
  color: var(--ink);
}

.card-pop__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: auto;
  height: auto;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--gray);
  font-family: var(--font);
  font-size: 1.35rem;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.card-pop__close:hover {
  color: var(--blue);
  transform: scale(1.12);
}

.card-pop__bd {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
}

.card-pop__hint {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--gray-soft);
}

.card-pop__ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 16px;
}

.card-pop__sub {
  font-size: clamp(0.88rem, 1vw, 1rem);
  color: var(--blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-pop__en {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: rgba(82, 82, 82, 0.45);
  white-space: nowrap;
}

/* ---------- footer (fixed, always visible, left-aligned) ---------- */
.site-foot {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0 0 20px;
  font-size: 0.78rem;
  color: var(--gray-soft);
}

.site-foot .shell {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* ---------- slogan ----------
   Chinese block sits top-left, English block bottom-right. Both are three
   lines, underlined, and share the same colour order top→bottom:
   black → gray → blue.

   All six lines are one size, set by --slogan-size (the `aidu` size).
   At line-height 1.5 those six lines plus the hermes mark stack to roughly
   12.4 × base, so the size is capped by vh as well as vw or the block would
   outgrow the column and break the wipe seam. */
.slogan {
  --slogan-size: clamp(1.2rem, min(3.6vw, 4.6vh), 2.8rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* keeps the last underline clear of the column edge */
  padding-bottom: 0.12em;
  font-size: var(--slogan-size);
}

.slogan__cn,
.slogan__text {
  display: flex;
  flex-direction: column;
  /* h2 carries a UA font-size of 1.5em — reset so 1em means the base */
  font-size: 1em;
  font-weight: 900;
  line-height: 1.5;
}

/* English: top-right, right-aligned */
.slogan__text {
  align-self: flex-end;
  align-items: flex-end;
  text-align: right;
}

/* logo-favicon mark centred between the English and Chinese blocks. Sized off the
   slogan base so it stays proportional to the type at any viewport. */
.slogan__mark {
  align-self: center;
  width: 6.24em;
  height: auto;
  object-fit: contain;
}

/* Chinese: bottom-left, left-aligned */
.slogan__cn {
  align-self: flex-start;
  align-items: flex-start;
  text-align: left;
}

/* 六行同字号，加粗加下划线 */
.slogan__row {
  display: block;
  font-size: 1em;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 0.1em;
  text-decoration-thickness: 0.055em;
}

/* 中文三行：黑 → 灰 → 蓝 */
.slogan__row--cn1 {
  color: var(--ink);
}

.slogan__row--cn2 {
  color: var(--gray);
}

.slogan__row--cn3 {
  color: var(--blue);
}

/* 英文三行：黑 → 灰 → 蓝（与中文同序、同字号） */
.slogan__row--aidu {
  color: var(--ink);
}

.slogan__row--ido {
  color: var(--gray);
}

.slogan__row--aido {
  color: var(--blue);
}

/* ---------- responsive ---------- */
/* Below 1024px the stage stacks vertically, so dudu and the reveal column
   share the height instead of sitting side by side. Both need their own
   height cap or the pair overflows the band between header and footer. */
@media (max-width: 1024px) {
  .stage-back__content {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding-top: 112px;
    padding-bottom: 52px;
  }

  .reveal {
    flex: 0 1 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
  }

  .dudu {
    width: min(52vw, 320px);
    max-height: 30%;
  }

  .hero-body {
    gap: 10px;
  }

  .updates {
    display: none;
  }
}

/* Side-by-side desktop: the hero column is pinned to the dudu artwork's
   height by JS; the title/subtitle/cards keep their natural rhythm on top
   and the updates feed takes over whatever room the cards do not use. */

/* ---------- latest updates dashboard: two fixed columns (feed + chart) ---------- */
.updates {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.6vh, 8px);
  border-top: 1px solid var(--gray-line);
  padding-top: clamp(8px, 0.9vh, 12px);
}

/* "aiduBOX动态" also sits above the bead list, shop-branded like the site
   title: aidu gray + BOX deep blue bold (mark inlined by markup). */
.updates__col--feed .updates__heading {
  color: var(--gray);
}

/* the stats panel is exactly as wide as one of the six nav cards above
   (JS measures a real card and exposes it as --card-w); the feed takes the
   rest and may shrink to 0 so it never starves the chart */
.updates__cols {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--card-w, 220px));
  gap: clamp(8px, 1vw, 14px);
}

.updates__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: clamp(6px, 1vh, 10px) 12px clamp(8px, 1vh, 10px);
  background: rgba(255, 255, 255, 0.55);
}

.updates__heading {
  flex: 0 0 auto;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--blue);
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--gray-line);
}

/* left: fixed bead-and-thread timeline, no scrolling */
.updates__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.7vh, 6px);
}

/* one bead-and-thread step: the vertical thread connects every bead, each
   update sits on its own bead like pearls on a string */
.updates__item {
  position: relative;
  flex: 1 1 0;
  padding-left: 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.updates__item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--gray-line);
}

.updates__item:first-child::before {
  top: -6px;
}

.updates__item:last-child::before {
  bottom: auto;
  height: 6px;
}

.updates__item::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-tint);
}

.updates__item--latest::after {
  background: var(--ink);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.updates__t {
  min-width: 0;
  font-size: clamp(0.72rem, 0.82vw, 0.82rem);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.updates__time {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--gray-soft);
}

/* each feed row is a hyperlink to the matching post / card; only the text
   turns blue + underline on hover so the bead-and-thread stays clean */
.updates__link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.updates__link:hover .updates__t,
.updates__link:focus-visible .updates__t {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* right: site statistics — 7-day visit bar chart with axes */
.chart {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 0 0;
}

/* left column of y ticks + the plot; bottom row carries the x-axis dates */
.chart__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.chart__y {
  --y-w: clamp(20px, 2.4vw, 24px);
  flex: 0 0 var(--y-w);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 3px 0 0;
}

.chart__y span {
  font-family: var(--mono);
  font-size: clamp(0.44rem, 0.5vw, 0.5rem);
  line-height: 1;
  color: var(--gray);
}

.chart__plot {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* light horizontal gridlines (three ticks, aligned with the y labels) */
.chart__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gray-line), var(--gray-line)),
    linear-gradient(var(--gray-line), var(--gray-line)),
    linear-gradient(var(--gray-line), var(--gray-line));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position:
    0 100%,
    0 50%,
    0 0;
}

.chart__cols {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(1px, 0.3vw, 3px);
}

.chart__col {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* uniform blue, no gradient — slim hairline bars (document-style, just the shape) */
.chart__bar {
  position: relative;
  width: 100%;
  max-width: clamp(3px, 0.55vw, 5px);
  height: var(--h, 0%);
  min-height: 2px;
  background: var(--blue);
  border-radius: 1px 1px 0 0;
  transition: height 0.5s var(--ease);
}

/* exact number on hover only — nothing printed on the bars themselves */
.chart__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%) translateY(2px);
  z-index: 3;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: clamp(0.5rem, 0.56vw, 0.58rem);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.chart__bar:hover .chart__tip,
.chart__bar:focus-visible .chart__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.chart__x {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: clamp(1px, 0.3vw, 3px);
  margin-left: clamp(20px, 2.4vw, 24px);
  padding-top: 2px;
}

.chart__x span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: clamp(0.4rem, 0.44vw, 0.46rem);
  color: var(--gray);
  white-space: nowrap;
}

/* Stacked AND short: the two blocks can no longer both fit at full height.
   The supporting paragraph and the card blurbs step aside — the title and
   the six card names carry the message on their own. Card min-height is
   divided by the row count so the grid is bounded by the column, not by the
   cards: 2 rows on tablet, 3 rows once the grid drops to two columns. */
@media (max-width: 1024px) and (max-height: 860px) {
  .hero-desc {
    display: none;
  }

  .card__desc {
    display: none;
  }

  .card {
    min-height: clamp(52px, 8.5vh, 88px);
  }

  .hero-title {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
  }
}

@media (max-width: 720px) and (max-height: 860px) {
  .card {
    min-height: clamp(44px, 6vh, 68px);
  }
}

@media (max-width: 1024px) and (max-height: 600px) {
  .stage-back__content {
    padding-top: 110px;
    padding-bottom: 38px;
  }

  .dudu {
    max-height: 25%;
  }
}

@media (max-width: 720px) and (max-height: 600px) {
  .card {
    min-height: 48px;
    padding: 5px 8px;
  }
}

/* Very short stacked viewports (landscape phones): six cards cannot fit even
   at min-height, because their own content sets the floor. Strip the cards
   back to just the name and tighten the padding so the grid stays inside the
   band; the index and icon are decoration, the name is the message.
   The slogan needs the same treatment — its six lines plus the mark are the
   other half of the pair, so the mark shrinks to keep the block in bounds. */
@media (max-width: 1024px) and (max-height: 700px) {
  .cards {
    gap: 8px;
  }

  .card {
    min-height: 0;
    padding: 7px 10px;
    justify-content: center;
  }

  .card__top {
    display: none;
  }

  .slogan {
    --slogan-size: clamp(0.95rem, 3.1vh, 1.5rem);
  }

  .slogan__mark {
    width: 3.12em;
  }
}

@media (max-width: 720px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card__desc {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}