.surname-screen {
  background:
    linear-gradient(rgba(251, 250, 247, 0.88), rgba(251, 250, 247, 0.96)),
    url("./assets/ink-home/scenes/paper-texture.webp") center / 74cqw 74cqw repeat;
  color: var(--ink-deep);
}

.surname-page {
  min-height: 100%;
  padding-bottom: 18.5cqw;
}

.surname-page-hero {
  position: relative;
  height: 46.5cqw;
  overflow: hidden;
  background: #fbfaf7;
}

.surname-page-hero > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 4%;
  opacity: 0.98;
  transform: translateY(3cqw);
}

.surname-page-title {
  position: absolute;
  top: 19.6cqw;
  left: 6.2cqw;
  display: flex;
  align-items: center;
  gap: 2.7cqw;
}

.surname-page-title h1 {
  margin: 0;
  font-family: var(--calligraphy);
  font-size: 8.1cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.45cqw;
}

.surname-page-title img {
  width: 8.1cqw;
  height: 8.1cqw;
  object-fit: contain;
}

.surname-page-subtitle {
  position: absolute;
  top: 32.1cqw;
  left: 6.6cqw;
  margin: 0;
  color: #46575b;
  font-family: var(--calligraphy);
  font-size: 3.75cqw;
  line-height: 1.25;
  letter-spacing: 0.45cqw;
}

.surname-page-content {
  display: grid;
  gap: 3.15cqw;
  padding: 0 6cqw 1.2cqw;
}

.surname-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 11cqw;
  margin-top: 1.6cqw;
  padding: 0 4.2cqw;
  border: 0.3cqw solid rgba(42, 65, 64, 0.17);
  border-radius: 5.8cqw;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0.65cqw 2.3cqw rgba(35, 52, 49, 0.11), inset 0 0 0 0.45cqw rgba(255, 255, 255, 0.65);
}

.surname-search img {
  width: 5.4cqw;
  height: 5.4cqw;
  object-fit: contain;
}

.surname-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 0 0 4.6cqw;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink-deep);
  font-family: var(--calligraphy);
  font-size: 3.85cqw;
  letter-spacing: 0.28cqw;
}

.surname-search input::placeholder {
  color: #647277;
  opacity: 1;
}

.my-surname-entry {
  position: relative;
  display: block;
  height: 27.4cqw;
  padding: 0;
  overflow: hidden;
  border: 0.25cqw solid rgba(35, 58, 56, 0.12);
  border-radius: 2.1cqw;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1.1cqw 3cqw rgba(34, 47, 44, 0.08);
  text-align: left;
}

.my-surname-entry::before {
  position: absolute;
  inset: 0;
  background: url("./assets/ink-home/scenes/my-surname-card-landscape-v2.webp") center 48% / 100% auto no-repeat;
  content: "";
  opacity: 0.3;
  pointer-events: none;
}

.my-surname-heading {
  position: absolute;
  z-index: 1;
  top: 1.8cqw;
  left: 3.5cqw;
  display: flex;
  align-items: center;
  gap: 1cqw;
  color: #263e40;
  font-family: var(--calligraphy);
  font-size: 3.8cqw;
  line-height: 1;
  letter-spacing: 0.3cqw;
}

.my-surname-heading img {
  width: 4.8cqw;
  height: 2.1cqw;
  object-fit: contain;
  opacity: 0.62;
}

.my-surname-medallion {
  position: absolute;
  z-index: 1;
  top: 5.4cqw;
  left: 1.5cqw;
  width: 22cqw;
  height: 22cqw;
  object-fit: contain;
}

.my-surname-medallion-placeholder {
  position: absolute;
  z-index: 1;
  top: 7.1cqw;
  left: 4.2cqw;
  display: grid;
  width: 16.5cqw;
  height: 16.5cqw;
  place-items: center;
  border: 0.25cqw solid rgba(21, 61, 63, 0.16);
  border-radius: 50%;
  background: rgba(241, 244, 240, 0.9);
  color: rgba(21, 61, 63, 0.66);
  font-family: var(--calligraphy);
  font-size: 8cqw;
}

.my-surname-medallion-placeholder[hidden] {
  display: none;
}

.my-surname-entry.is-unsettled .surname-review-badge {
  border-color: rgba(101, 112, 110, 0.2);
  background: rgba(239, 241, 239, 0.9);
  color: #667270;
}

.my-surname-divider[hidden],
.my-surname-stat[hidden] {
  display: none;
}

.my-surname-copy {
  position: absolute;
  z-index: 1;
  top: 8.2cqw;
  left: 24.2cqw;
  display: grid;
  gap: 1.5cqw;
  min-width: 0;
}

.my-surname-copy small {
  color: #6c777a;
  font-family: var(--calligraphy);
  font-size: 2.85cqw;
  line-height: 1;
  letter-spacing: 0.18cqw;
}

.my-surname-copy-line {
  display: flex;
  align-items: center;
  gap: 1.25cqw;
  min-width: 0;
}

.my-surname-copy strong {
  font-family: var(--calligraphy);
  font-size: 4.7cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.15cqw;
  white-space: nowrap;
}

.surname-review-badge {
  flex: 0 0 auto;
  padding: 0.5cqw 0.9cqw;
  border: 0.2cqw solid rgba(85, 117, 103, 0.24);
  border-radius: 0.8cqw;
  background: rgba(231, 239, 232, 0.82);
  color: #557261;
  font-family: var(--calligraphy);
  font-size: 2.15cqw;
  line-height: 1;
  letter-spacing: 0.15cqw;
}

.my-surname-browse {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.85cqw;
  color: #526266;
  font-family: var(--calligraphy);
  font-size: 2.8cqw;
  line-height: 1;
  letter-spacing: 0.16cqw;
  white-space: nowrap;
}

.my-surname-browse img {
  width: 2.8cqw;
  height: 2.8cqw;
  object-fit: contain;
  opacity: 0.75;
}

.my-surname-divider {
  position: absolute;
  z-index: 1;
  top: 8.3cqw;
  left: 48.6cqw;
  width: 0.25cqw;
  height: 16cqw;
  background: rgba(45, 66, 65, 0.14);
}

.my-surname-stat {
  position: absolute;
  z-index: 1;
  top: 10.6cqw;
  left: 52.3cqw;
  display: grid;
  gap: 3cqw;
  min-width: 0;
}

.my-surname-count {
  display: flex;
  align-items: baseline;
  gap: 0.8cqw;
  white-space: nowrap;
}

.my-surname-count strong {
  color: #ad2c24;
  font-family: "Songti SC", STSong, "Noto Serif CJK SC", "Source Han Serif SC", serif;
  font-size: 4.8cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.08cqw;
  font-variant-numeric: lining-nums proportional-nums;
}

.my-surname-count small,
.my-surname-stat-label {
  color: #657174;
  font-family: var(--calligraphy);
}

.my-surname-count small {
  font-size: 2.8cqw;
}

.my-surname-stat-label {
  display: flex;
  align-items: center;
  gap: 0.65cqw;
  font-size: 2.5cqw;
  line-height: 1.25;
  letter-spacing: 0.06cqw;
  white-space: nowrap;
}

.my-surname-stat-label img {
  width: 2.8cqw;
  height: 2.8cqw;
  object-fit: contain;
  opacity: 0.72;
}

.surname-index-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 9.45cqw;
  overflow: hidden;
  border: 0.25cqw solid rgba(26, 57, 57, 0.16);
  border-radius: 2.25cqw;
  background: rgba(255, 255, 255, 0.5);
}

.surname-index-tabs button {
  border: 0;
  background: transparent;
  color: var(--ink-deep);
  font-family: var(--calligraphy);
  font-size: 3.65cqw;
  letter-spacing: 0.32cqw;
}

.surname-index-tabs button.active {
  border-radius: 2.05cqw;
  background: linear-gradient(110deg, #0a4a4b, #073c3d);
  color: #fff;
}

.surname-section {
  display: grid;
  gap: 1.5cqw;
}

.surname-index-tabs + .surname-section {
  margin-top: 2.1cqw;
}

.my-surname-entry + .surname-section {
  margin-top: 2.4cqw;
}

.surname-section + .surname-section {
  margin-top: 1.5cqw;
}

.surname-section-title {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  margin: 0;
  font-family: var(--calligraphy);
  font-size: 4.35cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3cqw;
}

.surname-section-title::before,
.surname-section-title::after {
  display: block;
  width: 5.4cqw;
  height: 2.6cqw;
  background: url("./assets/ink-home/icons-ui/section-cloud-v3.webp") center / contain no-repeat;
  content: "";
  opacity: 0.72;
}

.surname-section-title::after {
  transform: scaleX(-1);
}

.surname-hot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.4cqw 4cqw;
  margin-inline: 1.4cqw;
}

.surname-hot-card {
  position: relative;
  display: grid;
  place-items: center;
  height: 20.7cqw;
  overflow: hidden;
  border: 0.22cqw solid rgba(44, 63, 60, 0.11);
  border-radius: 1.5cqw;
  background: #fcfbf7 var(--surname-card-art) center / cover no-repeat;
  box-shadow: 0 0.9cqw 1.8cqw rgba(36, 45, 42, 0.08);
  color: #063d3e;
  font-family: var(--calligraphy);
  font-size: 11.4cqw;
  line-height: 1;
}

.surname-hot-card > span {
  position: relative;
  z-index: 1;
}

.surname-hot-card:nth-child(1) {
  --surname-card-art: url("./assets/ink-home/scenes/surname-card-wang-v1.webp");
}

.surname-hot-card:nth-child(2) {
  --surname-card-art: url("./assets/ink-home/scenes/surname-card-li-v1.webp");
}

.surname-hot-card:nth-child(3) {
  --surname-card-art: url("./assets/ink-home/scenes/surname-card-zhang-v1.webp");
}

.surname-hot-card:nth-child(4) {
  --surname-card-art: url("./assets/ink-home/scenes/surname-card-liu-v1.webp");
}

.surname-hot-card:nth-child(5) {
  --surname-card-art: url("./assets/ink-home/scenes/surname-card-chen-v1.webp");
}

.surname-hot-card:nth-child(6) {
  --surname-card-art: url("./assets/ink-home/scenes/surname-card-yang-v1.webp");
}

.surname-hot-card .mini-seal {
  position: absolute;
  z-index: 1;
  right: 1.25cqw;
  bottom: 1.1cqw;
  width: 3.2cqw;
  height: 3.2cqw;
  object-fit: contain;
  opacity: 0.62;
}

.surname-alphabet,
.surname-strokes {
  display: flex;
  align-items: center;
  gap: 1cqw;
  margin: -0.2cqw -0.8cqw 0;
  padding: 0.25cqw 0.8cqw 0.75cqw;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.surname-alphabet::-webkit-scrollbar,
.surname-strokes::-webkit-scrollbar {
  display: none;
}

.surname-directory [hidden] {
  display: none;
}

.surname-directory {
  gap: 1.85cqw;
  margin-top: 0 !important;
}

.surname-alphabet button,
.surname-strokes button {
  display: grid;
  place-items: center;
  padding: 0;
  color: #5c6b70;
  font-family: "Alibaba PuHuiTi", sans-serif;
  font-size: 3.15cqw;
  line-height: 1;
  scroll-snap-align: center;
  transition: background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out;
}

.surname-alphabet button {
  flex: 0 0 10.6cqw;
  width: 10.6cqw;
  height: 9.6cqw;
  border: 0.2cqw solid transparent;
  border-radius: 50%;
  background: transparent;
  font-size: 3cqw;
}

.surname-strokes button {
  flex: 0 0 17.5cqw;
  width: 17.5cqw;
  height: 10.6cqw;
  border: 0.2cqw solid rgba(32, 61, 60, 0.1);
  border-radius: 2cqw;
  background: rgba(255, 255, 255, 0.58);
  font-family: var(--calligraphy);
  font-size: 3.25cqw;
  letter-spacing: 0.12cqw;
}

.surname-alphabet button.active,
.surname-strokes button.active {
  border-color: #b31819;
  background: #b31819;
  color: #fff;
  box-shadow: 0 0.55cqw 1.2cqw rgba(179, 24, 25, 0.16);
}

.surname-index-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.1cqw;
}

.surname-index-empty {
  grid-column: 1 / -1;
  min-height: 19cqw;
  margin: 0;
  padding: 6cqw 2cqw 3cqw;
  color: #7a8588;
  font-family: var(--calligraphy);
  font-size: 3.2cqw;
  letter-spacing: 0.18cqw;
  text-align: center;
}

.surname-index-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 13.2cqw;
  padding: 1.25cqw 1cqw 1.1cqw;
  border: 0.2cqw solid rgba(30, 58, 58, 0.13);
  border-radius: 2.1cqw;
  background: rgba(255, 255, 255, 0.48);
  color: #173a3b;
  text-align: center;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out, transform 140ms ease-out;
}

.surname-index-row strong {
  font-family: var(--calligraphy);
  font-size: 4.45cqw;
  font-weight: 500;
  line-height: 1.05;
}

.surname-index-row small {
  max-width: 100%;
  margin-top: 0.75cqw;
  overflow: hidden;
  color: #6b777a;
  font-family: "Alibaba PuHuiTi", sans-serif;
  font-size: 2.55cqw;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surname-index-row.is-current {
  border-color: #173f3f;
  background: #173f3f;
  color: #fff;
}

.surname-index-row.is-current small {
  color: rgba(255, 255, 255, 0.72);
}

.surname-current-tag {
  position: absolute;
  top: 0.9cqw;
  right: 1.05cqw;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Alibaba PuHuiTi", sans-serif;
  font-size: 2.05cqw;
  line-height: 1;
}

.surname-index-row:active {
  transform: scale(0.98);
}

.surname-index-row:focus-visible {
  outline: 0.55cqw solid rgba(179, 24, 25, 0.28);
  outline-offset: 0.35cqw;
}

.surname-page .is-filtered-out {
  display: none;
}

@media (hover: hover) {
  .surname-hot-card:hover,
  .surname-index-row:hover {
    background-color: rgba(255, 255, 255, 0.9);
  }

  .surname-index-row.is-current:hover {
    background-color: #173f3f;
  }
}

@media (prefers-reduced-motion: reduce) {
  .surname-page *,
  .surname-page *::before,
  .surname-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}