/* styles.css */
:root {
  --ink: #181613;
  --muted: #6c655d;
  --paper: #f3efe7;
  --paper-deep: #e6ded0;
  --stone: #a59a8c;
  --olive: #374235;
  --copper: #9a6f4d;
  --line: rgba(24, 22, 19, 0.16);
  --white: #fffaf0;
  --header-height: 76px;
  --safe-area-top: env(safe-area-inset-top, 0px);
}

/* Color library visual search modal */
.library-search-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  min-width: 0;
}

.visual-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #242621;
  border-radius: 3px;
  background: #242621;
  color: #f8f5ee;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  white-space: nowrap;
  transition: background 180ms ease, border-color 180ms ease;
}

.visual-search-trigger:hover {
  border-color: #454941;
  background: #343832;
}

.visual-search-trigger b {
  font-family: Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1;
}

body.is-visual-modal-open {
  overflow: hidden;
}

.visual-search-modal {
  width: min(1280px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(248, 245, 238, 0.18);
  border-radius: 7px;
  background: #1d211e;
  color: #f8f5ee;
  box-shadow: 0 34px 90px rgba(10, 11, 9, 0.38);
}

.visual-search-modal:not([open]) {
  display: none;
}

.visual-search-modal::backdrop {
  background: rgba(15, 16, 14, 0.72);
  backdrop-filter: blur(6px);
}

.visual-modal-close {
  position: sticky;
  top: 16px;
  z-index: 5;
  float: right;
  width: 42px;
  height: 42px;
  margin: 16px 16px -58px 0;
  border: 1px solid rgba(248, 245, 238, 0.34);
  border-radius: 50%;
  background: rgba(29, 33, 30, 0.9);
  color: #f8f5ee;
  cursor: pointer;
  font: inherit;
}

.visual-modal-close span {
  font-family: Arial, sans-serif;
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1;
}

.visual-search-modal .visual-search {
  padding: clamp(64px, 6vw, 88px) clamp(24px, 5vw, 68px) clamp(68px, 6vw, 88px);
}

.visual-search-modal .visual-search-head {
  padding-right: 54px;
}

@media (max-width: 680px) {
  .library-search-area {
    grid-template-columns: 1fr;
  }

  .visual-search-trigger {
    width: 100%;
  }

  .visual-search-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 6px;
  }

  .visual-modal-close {
    top: 10px;
    width: 38px;
    height: 38px;
    margin: 10px 10px -48px 0;
  }

  .visual-search-modal .visual-search {
    padding: 50px 16px 58px;
  }

  .visual-search-modal .visual-search-head {
    padding-right: 38px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  font-family:
    "Noto Sans SC",
    "Microsoft YaHei",
    "PingFang SC",
    Arial,
    sans-serif;
  line-height: 1.6;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

body::after {
  content: "";
  position: fixed;
  z-index: 999;
  inset: 0;
  pointer-events: none;
  background: var(--paper);
  opacity: 0;
  transition: opacity 260ms ease;
}

body.is-leaving::after {
  opacity: 1;
}

img {
  display: block;
  width: 100%;
}

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

button,
input,
textarea {
  font: inherit;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(22px, 4.4vw, 64px);
  color: var(--white);
  transition:
    background 240ms ease,
    color 240ms ease,
    border-color 240ms ease;
}

.site-header.is-scrolled {
  background: rgba(243, 239, 231, 0.91);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  display: grid;
  gap: 0;
  letter-spacing: 0;
}

.brand span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
  line-height: 1;
}

.brand small {
  margin-top: 5px;
  color: currentColor;
  font-size: 0.6rem;
  opacity: 0.66;
  text-transform: uppercase;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  font-size: 0.86rem;
  margin-left: auto;
}

.desktop-nav a {
  opacity: 0.76;
  transition: opacity 180ms ease;
}

.desktop-nav a:hover {
  opacity: 1;
}

.language-menu {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  color: currentColor;
}

.language-menu summary {
  display: inline-flex;
  height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255, 250, 240, 0.28);
  background: rgba(24, 22, 19, 0.12);
  cursor: pointer;
  font-size: 0.78rem;
  list-style: none;
}

.language-menu summary::-webkit-details-marker {
  display: none;
}

.language-menu summary::marker {
  content: "";
}

.language-menu summary::after {
  content: none;
  display: none;
}

.site-header.is-scrolled .language-menu summary {
  border-color: rgba(24, 22, 19, 0.2);
  background: rgba(255, 250, 240, 0.62);
}

.language-menu div {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  padding: 6px;
  border: 1px solid rgba(24, 22, 19, 0.16);
  background: rgba(255, 250, 240, 0.96);
  color: var(--ink);
  box-shadow: 0 16px 38px rgba(24, 22, 19, 0.16);
}

.language-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  font-size: 0.82rem;
  opacity: 0.72;
}

.language-menu a:hover,
.language-menu a.is-active {
  background: rgba(24, 22, 19, 0.07);
  opacity: 1;
}

.flag {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 12px;
  flex: 0 0 auto;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 250, 240, 0.42);
}

.flag-cn {
  background: #d62121;
}

.flag-cn::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 4px;
  height: 4px;
  background: #f4d15c;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}

.flag-us {
  background:
    linear-gradient(#31558c 0 54%, transparent 54%),
    repeating-linear-gradient(to bottom, #b92d35 0 1.55px, #fff 1.55px 3.1px);
  background-size: 8px 7px, 100% 100%;
  background-repeat: no-repeat;
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
}

.menu-button span {
  display: block;
  width: 24px;
  height: 1px;
  margin: 7px auto;
  background: currentColor;
  transition:
    transform 200ms ease,
    opacity 200ms ease;
}

.menu-button[aria-expanded="true"] span:first-child {
  transform: translateY(4px) rotate(35deg);
}

.menu-button[aria-expanded="true"] span:last-child {
  transform: translateY(-4px) rotate(-35deg);
}

.mobile-nav {
  position: fixed;
  z-index: 18;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 28px;
  background: rgba(24, 22, 19, 0.94);
  color: var(--white);
  font-size: 1.4rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--white);
}

.hero-media,
.hero-shade {
  position: absolute;
  inset: 0;
}

.hero-media {
  background:
    linear-gradient(90deg, rgba(18, 17, 15, 0.72), rgba(18, 17, 15, 0.3) 44%, rgba(18, 17, 15, 0.08)),
    url("/assets/scene-hero-building-night.jpg?v=20260721-1") center / cover;
  transform: scale(1.04);
  animation: heroIn 1200ms ease forwards;
}

.hero-shade {
  background:
    linear-gradient(0deg, rgba(24, 22, 19, 0.66), transparent 42%),
    radial-gradient(circle at 72% 36%, rgba(255, 244, 220, 0.16), transparent 30%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 40px));
  margin: 0 0 clamp(104px, 13vh, 156px) clamp(20px, 7vw, 96px);
}

.hero-content.reveal {
  opacity: 1;
  transform: none;
}

.eyebrow,
.section-kicker {
  margin: 0 0 16px;
  color: var(--copper);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: #dcc4aa;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: Georgia, "Times New Roman", "Songti SC", "STSong", "Noto Serif SC", serif;
  font-weight: 400;
  letter-spacing: 0;
}

h1 {
  max-width: 680px;
  margin-bottom: 22px;
  font-size: clamp(3rem, 7.6vw, 6.6rem);
  line-height: 0.98;
}

.hero-copy {
  max-width: 980px;
  margin-bottom: 28px;
  color: rgba(255, 250, 240, 0.84);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 5.9vw, 6.1rem);
  line-height: 1.02;
  letter-spacing: 0.015em;
}

.hero-actions,
.section-head,
.contact-inner,
.site-footer {
  display: flex;
  align-items: center;
}

.hero-actions {
  gap: 14px;
  flex-wrap: wrap;
}

.editorial-actions {
  gap: clamp(22px, 4vw, 48px);
}

.editorial-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: fit-content;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-bottom-color: currentColor;
  background: transparent;
  color: var(--ink);
  font-family:
    "Helvetica Neue",
    Arial,
    "Noto Sans SC",
    "Microsoft YaHei",
    sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.editorial-link::after {
  content: none;
}

.editorial-link:hover {
  border-color: #000;
  background: #000;
  color: #fff;
}

.editorial-link.light {
  color: rgba(255, 250, 240, 0.9);
  border-color: transparent;
  border-bottom-color: rgba(255, 250, 240, 0.72);
  background: transparent;
}

.editorial-link.light:hover {
  border-color: #000;
  background: #000;
  color: #fff;
}

.editorial-link.version-product-link {
  margin-top: 28px;
  color: var(--ink);
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  transition:
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button.primary {
  border-color: var(--copper);
  background: var(--copper);
  color: var(--white);
}

.button.ghost {
  color: var(--white);
  background: rgba(255, 250, 240, 0.08);
  backdrop-filter: blur(10px);
}

.button.soft {
  border-color: rgba(255, 250, 240, 0.34);
  background: rgba(255, 250, 240, 0.18);
  color: var(--white);
  backdrop-filter: blur(10px);
}

.button.soft:hover {
  border-color: rgba(255, 250, 240, 0.72);
  background: rgba(255, 250, 240, 0.26);
}

.button.dark {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.button.dark:hover {
  background: #2a251f;
  border-color: #2a251f;
}

.hero-proof {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 8vw, 110px);
  right: clamp(20px, 8vw, 110px);
  bottom: 30px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 250, 240, 0.3);
  color: rgba(255, 250, 240, 0.78);
  font-size: 0.82rem;
}

.section-pad {
  padding: clamp(74px, 10vw, 128px) clamp(20px, 6vw, 86px);
}

.intro {
  background: var(--paper);
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: clamp(36px, 7vw, 92px);
  align-items: start;
}

.intro h2,
.section-head h2,
.craft-panel h2,
.capacity h2,
.editorial h2,
.contact h2 {
  margin-bottom: 0;
  font-size: clamp(1.95rem, 3.55vw, 4.05rem);
  line-height: 1.08;
}

.intro-copy {
  color: var(--muted);
  font-size: 0.98rem;
}

.color-card-showcase {
  position: relative;
  display: flex;
  min-height: clamp(560px, 72vh, 760px);
  margin: clamp(58px, 8vw, 108px) clamp(20px, 6vw, 86px) clamp(24px, 4vw, 52px);
  align-items: flex-end;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
  border-radius: 4px;
}

.color-card-showcase::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(17, 15, 13, 0.64) 0%, rgba(17, 15, 13, 0.22) 48%, rgba(17, 15, 13, 0.08) 100%),
    linear-gradient(0deg, rgba(17, 15, 13, 0.62) 0%, transparent 56%);
}

.color-card-showcase-media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--ink);
}

.color-card-showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  filter: saturate(0.88) contrast(1.03) brightness(0.88);
  transform: scale(1.01);
  transition:
    filter 360ms ease,
    transform 700ms ease;
}

.color-card-showcase-media:hover img {
  filter: saturate(0.94) contrast(1.04) brightness(0.94);
  transform: scale(1.04);
}

.color-card-showcase-copy {
  position: relative;
  z-index: 2;
  max-width: 610px;
}

.color-card-showcase-copy .section-kicker {
  color: #e2c29f;
}

.color-card-showcase-copy h2 {
  margin-bottom: 22px;
  color: var(--white);
  font-size: clamp(2.15rem, 4.6vw, 5.4rem);
  line-height: 1.02;
}

.color-card-showcase-copy p {
  max-width: 520px;
  margin-bottom: 34px;
  color: rgba(255, 250, 240, 0.8);
  font-size: 0.98rem;
  line-height: 1.9;
}

.color-card-showcase-copy .editorial-link {
  color: rgba(255, 250, 240, 0.92);
  border-color: rgba(255, 250, 240, 0.7);
}

.color-card-showcase-copy .editorial-link:hover {
  border-color: #fff;
  background: #fff;
  color: var(--ink);
}

.brand-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: clamp(18px, 3vw, 38px);
  padding-top: clamp(28px, 4vw, 54px);
  background: var(--paper);
}

.brand-gallery-card {
  position: relative;
  min-height: min(76vh, 720px);
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
  cursor: pointer;
}

.brand-gallery-card-large {
  min-height: min(82vh, 780px);
}

.brand-gallery-card img {
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.03) brightness(0.84);
  transform: scale(1.02);
  transition:
    filter 360ms ease,
    transform 700ms ease;
}

.brand-gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(17, 15, 13, 0.76), transparent 52%),
    linear-gradient(90deg, rgba(17, 15, 13, 0.38), transparent 48%);
}

.brand-gallery-card > div {
  position: absolute;
  z-index: 1;
  left: clamp(24px, 4vw, 56px);
  right: clamp(24px, 4vw, 56px);
  bottom: clamp(28px, 5vw, 62px);
}

.brand-gallery-card span {
  display: block;
  margin-bottom: 14px;
  color: #d9c0a4;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.brand-gallery-card h2 {
  max-width: 760px;
  margin-bottom: 24px;
  color: var(--white);
  font-size: clamp(1.9rem, 3.4vw, 4.2rem);
  line-height: 1.08;
}

.brand-gallery-card .editorial-link {
  color: rgba(255, 250, 240, 0.88);
  border-color: transparent;
  border-bottom-color: rgba(255, 250, 240, 0.68);
}

.brand-gallery-card:hover img {
  filter: saturate(0.92) contrast(1.04) brightness(0.9);
  transform: scale(1.05);
}

.material-spotlight {
  background: #eee7dc;
}

.section-head {
  justify-content: space-between;
  gap: 42px;
  margin-bottom: clamp(38px, 5.4vw, 66px);
}

.section-head p {
  max-width: 400px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.material-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(320px, 1.12fr);
  gap: clamp(34px, 6vw, 86px);
  align-items: start;
}

.material-feature {
  position: sticky;
  top: 104px;
}

.material-feature img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.03) brightness(0.95);
}

.material-feature div {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.material-feature p {
  margin-bottom: 0;
  color: var(--muted);
}

.material-feature h3 {
  max-width: 390px;
  margin-bottom: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2vw, 2.08rem);
  font-weight: 400;
  line-height: 1.16;
}

.material-list {
  display: grid;
}

.material-summary {
  max-width: 620px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.78;
}

.material-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 24px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}

.material-row:last-child {
  border-bottom: 1px solid var(--line);
}

.material-row span {
  color: var(--copper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
}

.material-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.material-row h3 {
  margin-bottom: 0;
  font-size: clamp(1.28rem, 1.9vw, 1.95rem);
  font-weight: 500;
}

.material-link {
  flex: 0 0 auto;
  padding: 8px 15px 9px;
  border: 1px solid rgba(94, 77, 58, 0.26);
  border-radius: 999px;
  color: #5c4938;
  font-size: 0.78rem;
  line-height: 1;
  text-decoration: none;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.material-link:hover {
  border-color: var(--copper);
  background: rgba(164, 113, 72, 0.12);
  color: var(--ink);
  transform: translateY(-1px);
}

.material-row p {
  max-width: 640px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.craft {
  display: grid;
  grid-template-columns: minmax(320px, 0.96fr) minmax(360px, 1.04fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: center;
  background: #e8dfd2;
  color: var(--ink);
}

.craft-media {
  position: relative;
  min-height: 560px;
  overflow: hidden;
}

.craft-media img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  filter: saturate(0.68) contrast(1.04) brightness(0.96);
}

.craft-media::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(24, 23, 20, 0.04), rgba(24, 23, 20, 0.16)),
    linear-gradient(90deg, rgba(255, 250, 240, 0.12), transparent 48%);
}

.craft-panel {
  align-self: center;
  max-width: 620px;
  padding: clamp(18px, 3vw, 40px) 0;
}

.craft-panel .section-kicker {
  color: var(--copper);
}

.craft-panel h2 {
  max-width: 560px;
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.editorial p,
.contact p {
  color: rgba(255, 250, 240, 0.72);
}

.craft-panel > p {
  max-width: 540px;
  margin: 24px 0 40px;
  color: #625b50;
  font-size: 0.98rem;
  line-height: 1.9;
}

.quality-list {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(94, 77, 58, 0.2);
}

.quality-list div {
  display: grid;
  grid-template-columns: minmax(170px, 0.42fr) minmax(0, 0.58fr);
  gap: 28px;
  padding: 23px 0;
  border-bottom: 1px solid rgba(94, 77, 58, 0.2);
}

.quality-list dt {
  margin-bottom: 0;
  color: #211f1b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.08rem, 1.35vw, 1.34rem);
  font-weight: 400;
  line-height: 1.25;
}

.quality-list dd {
  margin: 0;
  color: #6d655c;
  font-size: 0.9rem;
  line-height: 1.75;
}

.capacity {
  background: #e9e1d4;
}

.capacity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.capacity-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(300px, 42vh) auto;
  background: rgba(255, 250, 240, 0.42);
  overflow: hidden;
}

.capacity-card img {
  grid-row: 1;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.08) saturate(0.64) brightness(0.78);
}

.capacity-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: min(42vh, 500px);
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(24, 22, 19, 0.08), transparent 35%, rgba(24, 22, 19, 0.26)),
    radial-gradient(circle at 72% 14%, rgba(255, 250, 240, 0.16), transparent 30%);
}

.capacity-card .warehouse-image {
  object-position: center;
  filter: grayscale(0.2) contrast(1.08) saturate(0.62) brightness(0.8);
}

.capacity-card div {
  position: relative;
  z-index: 1;
  grid-row: 2;
  padding: clamp(24px, 4vw, 42px);
  background: rgba(255, 250, 240, 0.5);
}

.capacity-card span {
  display: block;
  margin-bottom: 14px;
  color: var(--copper);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.capacity-card h3 {
  max-width: 540px;
  margin-bottom: 14px;
  font-family: Georgia, "Times New Roman", "Noto Serif SC", serif;
  font-size: clamp(1.45rem, 2.05vw, 2.28rem);
  font-weight: 400;
  line-height: 1.13;
}

.capacity-card p {
  max-width: 660px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.93rem;
}

.capacity-card:hover img,
.material-feature:hover img {
  filter: saturate(0.82) contrast(1.06) brightness(0.92);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(28px, 5vw, 62px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.metrics div {
  min-height: 148px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 24px;
  border-right: 1px solid var(--line);
}

.metrics div:last-child {
  border-right: 0;
}

.metrics strong {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 3.2vw, 3.35rem);
  font-weight: 400;
  line-height: 1;
}

.metrics span {
  color: var(--muted);
}

.home-versions {
  display: grid;
  grid-template-columns: minmax(320px, 1.02fr) minmax(360px, 0.98fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
  background: #efe8dc;
}

.home-version-media {
  position: relative;
  min-height: 520px;
  background: #d7c5ad;
  overflow: hidden;
}

.home-version-media img {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.88) contrast(1.02) brightness(0.94);
}

.home-version-media::after {
  position: absolute;
  inset: 0;
  content: "";
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(24, 22, 19, 0.02), rgba(24, 22, 19, 0.18)),
    radial-gradient(circle at 18% 18%, rgba(255, 250, 240, 0.2), transparent 34%);
}

.home-version-copy {
  max-width: 640px;
}

.home-version-copy h2 {
  margin-bottom: 24px;
  font-size: clamp(1.9rem, 3.4vw, 3.85rem);
  line-height: 1.12;
}

.home-version-copy p {
  max-width: 560px;
  color: var(--muted);
}

.version-points {
  display: grid;
  gap: 12px;
  margin: 28px 0 30px;
  padding: 0;
  list-style: none;
  color: #5f574d;
  font-size: 0.94rem;
}

.version-points li {
  padding-top: 12px;
  border-top: 1px solid rgba(94, 77, 58, 0.2);
}

.spaces {
  background: var(--paper);
}

.space-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.space-card {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  color: var(--white);
}

.space-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(24, 22, 19, 0.58), transparent 48%);
}

.space-card img {
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  filter: saturate(0.74) contrast(1.03) brightness(0.92);
  transition: transform 600ms ease;
}

.space-card:hover img {
  transform: scale(1.045);
}

.space-card h3 {
  position: absolute;
  z-index: 1;
  left: 24px;
  right: 24px;
  bottom: 22px;
  margin-bottom: 0;
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  font-weight: 500;
}

.editorial {
  position: relative;
  overflow: hidden;
  background: var(--olive);
  color: var(--white);
}

.editorial-copy {
  max-width: 980px;
}

.editorial p {
  max-width: 620px;
  margin-top: 22px;
  font-size: 0.96rem;
}

.editorial-lines {
  position: absolute;
  right: clamp(20px, 7vw, 110px);
  bottom: clamp(40px, 8vw, 120px);
  display: grid;
  gap: 18px;
  width: min(28vw, 300px);
}

.editorial-lines span {
  height: 1px;
  background: rgba(255, 250, 240, 0.26);
  transform-origin: right;
}

.editorial-lines span:nth-child(2) {
  width: 76%;
  justify-self: end;
}

.editorial-lines span:nth-child(3) {
  width: 52%;
  justify-self: end;
}

.contact {
  background: var(--paper-deep);
}

.contact-inner {
  justify-content: space-between;
  gap: clamp(34px, 7vw, 92px);
  align-items: flex-start;
}

.contact-inner > div {
  max-width: 720px;
}

.contact p {
  max-width: 560px;
  margin-top: 24px;
  color: var(--muted);
}

.contact-form {
  width: min(480px, 100%);
  display: grid;
  gap: 18px;
}

.contact-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(24, 22, 19, 0.28);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  outline: none;
  padding: 11px 0 13px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--copper);
}

.form-button {
  justify-self: start;
  margin-top: 6px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px clamp(20px, 6vw, 86px);
  background: var(--ink);
  color: rgba(255, 250, 240, 0.72);
}

.footer-brand span {
  color: var(--white);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
}

.footer-brand p {
  margin-bottom: 0;
  margin-top: 8px;
}

.footer-contact {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
}

.footer-contact div {
  display: grid;
  gap: 6px;
}

.footer-contact small {
  color: rgba(255, 250, 240, 0.48);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-contact strong,
.footer-contact a {
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.version-header {
  color: var(--ink);
}

.versions-page {
  background: var(--paper);
}

.versions-page .reveal {
  opacity: 1;
  transform: none;
}

.versions-hero {
  padding-top: calc(var(--header-height) + clamp(58px, 8vw, 106px));
  background: #eee7dc;
}

.versions-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(34px, 7vw, 96px);
  align-items: end;
}

.versions-hero h1 {
  margin-bottom: 0;
  color: var(--ink);
  font-size: clamp(2.8rem, 6.6vw, 6rem);
}

.versions-hero p {
  max-width: 620px;
  color: var(--muted);
  font-size: 0.96rem;
}

.versions-hero p:last-child {
  margin-bottom: 0;
}

.version-system {
  background: #e7dece;
}

.version-grid {
  display: grid;
  gap: 20px;
}

.version-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  min-height: 440px;
  background: rgba(255, 250, 240, 0.48);
}

.version-cover {
  position: relative;
  overflow: hidden;
  background: #ddd4c6;
}

.version-cover img {
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.04) brightness(0.94);
  transition: transform 600ms ease;
}

.version-cover::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(24, 22, 19, 0.04), rgba(24, 22, 19, 0.18));
}

.version-card:hover .version-cover img {
  transform: scale(1.035);
}

.version-copy {
  display: grid;
  align-content: center;
  padding: clamp(28px, 5vw, 62px);
}

.version-copy span {
  margin-bottom: 14px;
  color: var(--copper);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.version-copy h2 {
  margin-bottom: 18px;
  font-size: clamp(1.55rem, 2.6vw, 3rem);
  line-height: 1.16;
}

.version-copy p {
  max-width: 720px;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 0.96rem;
}

.version-detail-link {
  justify-self: start;
  color: #5c4938;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.version-detail-link::after {
  display: inline-block;
  width: 42px;
  height: 1px;
  margin-left: 12px;
  vertical-align: middle;
  background: currentColor;
  content: "";
  opacity: 0.58;
  transition:
    width 180ms ease,
    opacity 180ms ease;
}

.version-detail-link:hover::after {
  width: 58px;
  opacity: 1;
}

.version-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
  gap: clamp(30px, 6vw, 84px);
  background: var(--paper);
}

.version-next h2 {
  max-width: 780px;
  margin-bottom: 0;
  font-size: clamp(1.8rem, 3.5vw, 3.75rem);
  line-height: 1.12;
}

.version-next p {
  align-self: end;
  max-width: 520px;
  margin-bottom: 0;
  color: var(--muted);
}

.version-detail-page {
  background: var(--paper);
}

.version-detail-hero {
  padding-top: calc(var(--header-height) + clamp(42px, 7vw, 96px));
  background: #eee7dc;
}

.back-link {
  display: inline-flex;
  margin-bottom: 28px;
  color: var(--copper);
  font-size: 0.82rem;
}

.version-detail-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 6vw, 86px);
  align-items: center;
}

.version-detail-grid img {
  aspect-ratio: 4 / 5;
  height: 100%;
  max-height: 720px;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.04) brightness(0.94);
}

.version-detail-grid h1 {
  margin-bottom: 22px;
  color: var(--ink);
  font-size: clamp(2.3rem, 5vw, 5.2rem);
}

.version-detail-grid p {
  max-width: 620px;
  color: var(--muted);
}

.version-product-link {
  margin-top: 28px;
}

.version-placeholder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
  gap: clamp(30px, 6vw, 84px);
  background: var(--paper);
}

.version-placeholder h2 {
  max-width: 760px;
  margin-bottom: 0;
  font-size: clamp(1.8rem, 3.5vw, 3.75rem);
  line-height: 1.12;
}

.version-placeholder p {
  align-self: end;
  max-width: 520px;
  margin-bottom: 0;
  color: var(--muted);
}

.version-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  background: #e7dece;
}

.version-gallery-item {
  position: relative;
  margin: 0;
  overflow: visible;
  background: rgba(255, 250, 240, 0.46);
}

.version-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: saturate(0.92) contrast(1.03) brightness(0.96);
}

.version-gallery-item.is-focus-top img {
  object-position: center top;
}

.version-gallery-item figcaption {
  position: absolute;
  left: 18px;
  bottom: 16px;
  color: rgba(255, 250, 240, 0.88);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
}

.color-library-page {
  background: #f1ece3;
  color: var(--ink);
  overflow-x: hidden;
}

.color-library-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.62fr) minmax(240px, 0.48fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: end;
  padding: calc(var(--header-height) + 84px) clamp(22px, 6vw, 88px) 66px;
  border-bottom: 1px solid rgba(24, 22, 19, 0.12);
}

.color-library-hero h1 {
  max-width: 700px;
  margin-bottom: 0;
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  line-height: 0.98;
}

.color-library-hero p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}

.color-library-cover {
  align-self: stretch;
  margin: 0;
  min-height: clamp(260px, 34vw, 460px);
  overflow: hidden;
  background: #dfd6c9;
}

.color-library-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 58%;
  filter: saturate(0.96) contrast(1.02);
}

.library-toolbar {
  position: sticky;
  top: var(--header-height);
  z-index: 7;
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: 24px clamp(22px, 6vw, 88px);
  border-bottom: 1px solid rgba(24, 22, 19, 0.12);
  background: rgba(241, 236, 227, 0.9);
  backdrop-filter: blur(18px);
}

.library-toolbar label {
  display: grid;
  gap: 9px;
  color: var(--muted);
  font-size: 0.78rem;
}

.library-toolbar input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(24, 22, 19, 0.34);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  outline: none;
  padding: 9px 0 12px;
}

.library-toolbar input:focus {
  border-bottom-color: var(--ink);
}

.library-count {
  justify-self: end;
  color: var(--muted);
}

.library-count strong {
  margin-right: 6px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 400;
}

.library-color-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.library-filter-groups {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.library-filter-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.library-filter-label {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1;
}

.library-style-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.library-style-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(24, 22, 19, 0.16);
  border-radius: 2px;
  background: transparent;
  color: #5d554d;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.library-style-button:hover,
.library-style-button.is-active {
  border-color: rgba(24, 22, 19, 0.42);
  background: #fff;
  color: var(--ink);
}

.library-style-button em {
  color: #9b9187;
  font-size: 0.72rem;
  font-style: normal;
}

.library-color-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(24, 22, 19, 0.16);
  border-radius: 999px;
  background: rgba(251, 247, 239, 0.62);
  color: #5d554d;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.library-color-button:hover,
.library-color-button.is-active {
  border-color: rgba(24, 22, 19, 0.42);
  background: #fbf7ef;
  color: var(--ink);
}

.library-color-swatch {
  width: 13px;
  height: 13px;
  border: 1px solid rgba(24, 22, 19, 0.14);
  border-radius: 999px;
  background: var(--tone);
}

.library-color-button em {
  color: #9b9187;
  font-size: 0.72rem;
  font-style: normal;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
  padding: clamp(22px, 5vw, 76px) clamp(18px, 5vw, 76px) clamp(60px, 7vw, 108px);
  background: transparent;
}

.library-card {
  display: grid;
  min-width: 0;
  background: #fbf7ef;
  box-shadow: 0 18px 46px rgba(24, 22, 19, 0.07);
  transition:
    transform 320ms ease,
    box-shadow 320ms ease;
}

.library-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(24, 22, 19, 0.11);
}

.library-card-media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #dfd6c9;
}

.library-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
  transition:
    transform 360ms ease,
    filter 360ms ease;
}

.library-card:hover .library-card-media img {
  filter: saturate(0.98) contrast(1.04);
  transform: scale(1.035);
}

.library-card-body {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2.5vw, 30px);
}

.library-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.library-card-head span {
  flex: 0 0 auto;
  color: #8a7d70;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

.library-card-head strong {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.72rem, 2vw, 2.35rem);
  font-weight: 400;
  line-height: 1;
}

.library-text-link {
  justify-self: start;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.library-text-link::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 9px;
  background: currentColor;
  transform-origin: left center;
  transition: transform 240ms ease;
}

.library-card:hover .library-text-link::after {
  transform: scaleX(1.45);
}

.library-series-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  background: #fffdfa;
}

.library-series-card {
  align-self: start;
}

.library-series-tile {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #e2ddd4;
}

.library-series-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.015);
  transition: filter 240ms ease, transform 320ms ease;
}

.library-series-tile:hover img {
  filter: saturate(0.98) contrast(1.04);
  transform: scale(1.025);
}

.library-series-tile span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  min-width: 26px;
  padding: 5px 6px;
  background: rgba(20, 19, 17, 0.78);
  color: #fffdf8;
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.library-series-title {
  display: grid;
  gap: 9px;
}

.library-series-title small {
  color: #9a6b49;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.library-series-title strong {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 2.3vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
}

.library-series-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.library-series-count {
  flex: 0 0 auto;
  color: #857d73;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: right;
}

.library-series-card .library-text-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
}

.library-series-card .library-text-link span {
  font-size: 1rem;
  font-weight: 400;
  line-height: 0.8;
  transition: transform 220ms ease;
}

.library-series-card:hover .library-text-link span {
  transform: translateX(4px);
}

.library-series-card .library-text-link::after {
  display: none;
}

.library-empty {
  grid-column: 1 / -1;
  margin: 20px 0 80px;
  color: var(--muted);
  text-align: center;
}

.library-specs {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(24, 22, 19, 0.12);
}

.library-specs div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(24, 22, 19, 0.1);
}

.library-specs dt {
  color: #8a7d70;
  font-size: 0.78rem;
}

.library-specs dd {
  margin: 0;
  color: #4f4941;
  font-size: 0.84rem;
  line-height: 1.6;
}

.library-recommend {
  display: grid;
  gap: 7px;
}

.library-recommend span {
  color: var(--copper);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.library-recommend p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.library-detail-page {
  min-height: 100vh;
}

.library-detail-hero {
  padding: calc(var(--header-height) + 72px) clamp(22px, 6vw, 88px) 46px;
  border-bottom: 1px solid rgba(24, 22, 19, 0.12);
}

.library-detail-hero h1 {
  max-width: 760px;
  margin: 10px 0 20px;
  font-size: clamp(3rem, 6.4vw, 6.4rem);
  line-height: 0.96;
}

.library-detail-hero p {
  max-width: 660px;
  margin: 0;
  color: var(--muted);
  line-height: 1.86;
}

.library-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 52px);
  padding: clamp(22px, 5vw, 76px) clamp(18px, 5vw, 76px) clamp(70px, 8vw, 120px);
  background: transparent;
}

.library-detail-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
  padding: clamp(24px, 4vw, 42px);
  background: #fbf7ef;
  box-shadow: 0 18px 46px rgba(24, 22, 19, 0.06);
}

.library-detail-panel .library-specs {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  border-top: 0;
  background: transparent;
}

.library-detail-panel .library-specs div {
  grid-template-columns: 1fr;
  gap: 8px;
  min-height: 92px;
  padding: 18px 20px;
  border-right: 1px solid rgba(24, 22, 19, 0.1);
  border-bottom: 1px solid rgba(24, 22, 19, 0.1);
  background: #f4eee5;
}

.library-detail-panel .library-recommend {
  align-self: stretch;
  justify-content: end;
  padding: 18px 0 0;
  border-top: 1px solid rgba(24, 22, 19, 0.16);
}

.library-side-panel {
  display: grid;
  align-self: stretch;
  gap: 22px;
}

.library-series-qr {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 210px;
  padding: 10px;
  border-top: 1px solid rgba(24, 22, 19, 0.16);
  border-bottom: 1px solid rgba(24, 22, 19, 0.1);
}

.library-series-qr img {
  width: min(190px, 100%);
  height: auto;
  display: block;
}

.library-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
  background: transparent;
}

.library-model-card {
  display: grid;
  gap: 0;
  background: #fbf7ef;
  box-shadow: 0 18px 46px rgba(24, 22, 19, 0.07);
}

.library-model-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  background: #e5ded3;
}

.library-model-images.is-single {
  grid-template-columns: 1fr;
}

.library-model-images a {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ded4c7;
}

.library-image-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(24, 22, 19, 0.04), rgba(24, 22, 19, 0.015)),
    #ece5da;
  color: rgba(24, 22, 19, 0.42);
}

.library-image-placeholder::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(24, 22, 19, 0.12);
}

.library-model-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
  transition:
    transform 360ms ease,
    filter 360ms ease;
}

.library-model-images span,
.library-image-placeholder span {
  position: absolute;
  left: 16px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 10px;
  background: rgba(18, 17, 15, 0.78);
  color: #fffaf0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
}

.library-image-placeholder em {
  position: relative;
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
}

.library-model-images a:hover img {
  filter: saturate(1) contrast(1.04);
  transform: scale(1.035);
}

.library-model-card strong {
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.3vw, 30px) clamp(20px, 2.4vw, 30px);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 1.55vw, 1.85rem);
  font-weight: 400;
}

.reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms ease,
    transform 700ms ease;
}

/* Progressive enhancement: readable immediately, even on a slow script connection. */
.reveal.reveal-pending {
  opacity: 0;
  transform: translateY(22px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes heroIn {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1.04);
  }
}

@media (max-width: 980px) {
  .desktop-nav {
    display: none;
  }

  .menu-button {
    display: block;
  }

  .language-menu {
    margin-left: auto;
  }

  .intro-grid,
  .color-card-showcase,
  .brand-gallery,
  .material-layout,
  .craft,
  .capacity-grid,
  .home-versions,
  .contact-inner,
  .versions-hero-grid,
  .version-card,
  .version-next,
  .version-detail-grid,
  .version-placeholder {
    grid-template-columns: 1fr;
  }

  .contact-inner {
    display: grid;
  }

  .material-feature {
    position: relative;
    top: auto;
  }

  .craft {
    padding-left: 0;
    padding-right: 0;
  }

  .craft-panel {
    padding: 56px 20px 0;
  }

  .quality-list div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .space-strip {
    grid-template-columns: 1fr;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metrics div:nth-child(2) {
    border-right: 0;
  }

  .space-card,
  .space-card img {
    min-height: 360px;
  }

  .color-card-showcase {
    min-height: 620px;
  }

  .brand-gallery-card,
  .brand-gallery-card-large {
    min-height: 68vh;
  }
}

@media (max-width: 680px) {
  :root {
    --header-height: 62px;
  }

  body {
    width: 100%;
    max-width: 100vw;
    line-height: 1.68;
    font-size: 15px;
  }

  main,
  section,
  .section-pad,
  .intro-grid,
  .section-head,
  .material-layout,
  .brand-gallery,
  .material-list,
  .material-row,
  .craft,
  .capacity-grid,
  .home-versions,
  .metrics,
  .space-strip,
  .contact-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .site-header {
    padding: 0 18px 0 22px;
    gap: 10px;
  }

  .site-header .menu-button {
    position: absolute;
    right: 18px;
  }

  .brand span {
    font-size: 1.08rem;
  }

  .brand small {
    font-size: 0.56rem;
  }

  .language-menu {
    position: absolute;
    right: 68px;
  }

  .language-menu summary {
    height: 32px;
    padding: 0 10px;
    font-size: 0.72rem;
  }

  .language-menu div {
    right: 0;
    min-width: 136px;
  }

  .menu-button {
    width: 40px;
    height: 40px;
  }

  .mobile-nav {
    gap: 22px;
    font-size: 1.18rem;
  }

  .hero {
    min-height: 620px;
  }

  .hero-content {
    width: calc(100% - 48px);
    margin: 0 24px 132px;
  }

  .hero-media {
    background:
      linear-gradient(180deg, rgba(18, 17, 15, 0.18), rgba(18, 17, 15, 0.82)),
      linear-gradient(90deg, rgba(18, 17, 15, 0.48), rgba(18, 17, 15, 0.08)),
      url("/assets/scene-hero-building-night.jpg?v=20260721-1") 67% center / cover;
  }

  h1 {
    font-size: clamp(2.75rem, 14vw, 4.2rem);
    line-height: 1.02;
  }

  h1,
  h2,
  .material-feature h3,
  .capacity-card h3,
  .metrics strong {
    font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-weight: 500;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hero-content.reveal {
    opacity: 1;
    transform: none;
  }

  .eyebrow,
  .section-kicker {
    margin-bottom: 12px;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }

  .hero-copy {
    max-width: 9.4em;
    margin-bottom: 24px;
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size: clamp(2.18rem, 9.2vw, 3.25rem);
    line-height: 1.12;
  }

  .hero-actions {
    gap: 18px;
  }

  .editorial-actions {
    display: grid;
  }

  .editorial-link {
    font-size: 0.76rem;
    min-height: 34px;
    padding: 0 10px;
  }

  .button {
    min-height: 40px;
    padding: 0 15px;
    font-size: 0.8rem;
  }

  .hero-proof {
    left: 24px;
    right: 24px;
    bottom: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding-top: 14px;
    font-size: 0.76rem;
  }

  .section-pad {
    padding: 54px 24px;
  }

  .brand-gallery {
    padding: 0;
    gap: 0;
  }

  .color-card-showcase {
    min-height: 560px;
    margin: 36px 16px 18px;
    padding: 48px 24px;
    border-radius: 3px;
  }

  .color-card-showcase::after {
    background:
      linear-gradient(90deg, rgba(17, 15, 13, 0.42), rgba(17, 15, 13, 0.12)),
      linear-gradient(0deg, rgba(17, 15, 13, 0.78) 0%, rgba(17, 15, 13, 0.22) 68%);
  }

  .color-card-showcase-media img {
    object-position: 48% center;
  }

  .color-card-showcase-copy h2 {
    font-size: clamp(2rem, 12vw, 3.4rem);
  }

  .color-card-showcase-copy p {
    margin-bottom: 26px;
    font-size: 0.92rem;
  }

  .brand-gallery {
    padding-top: 18px;
  }

  .brand-gallery-card,
  .brand-gallery-card-large {
    min-height: 540px;
  }

  .brand-gallery-card > div {
    left: 24px;
    right: 24px;
    bottom: 32px;
  }

  .brand-gallery-card h2 {
    max-width: 10em;
    font-size: 1.7rem;
    line-height: 1.2;
  }

  .section-head {
    display: grid;
    gap: 14px;
    margin-bottom: 30px;
  }

  .section-head p,
  .intro-copy,
  .material-row p,
  .capacity-card p,
  .editorial p,
  .contact p {
    font-size: 0.9rem;
    line-height: 1.78;
  }

  .intro h2,
  .section-head h2,
  .craft-panel h2,
  .capacity h2,
  .editorial h2,
  .contact h2 {
    font-size: 1.46rem;
    line-height: 1.38;
    max-width: 15em;
  }

  .intro-grid {
    gap: 22px;
  }

  .intro-grid > *,
  .section-head > *,
  .material-layout > *,
  .craft > *,
  .capacity-grid > *,
  .home-versions > *,
  .contact-inner > * {
    min-width: 0;
  }

  .intro h2,
  .section-head h2,
  .craft-panel h2,
  .capacity h2,
  .editorial h2,
  .contact h2,
  .section-head p,
  .intro-copy p,
  .material-row p,
  .capacity-card p,
  .home-version-copy p,
  .editorial p,
  .contact p {
    max-width: 100%;
    word-break: break-all;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .intro-copy,
  .section-head p,
  .material-row p,
  .craft-panel > p,
  .quality-list dd,
  .capacity-card p,
  .home-version-copy p,
  .editorial p,
  .contact p {
    max-width: 22.5rem;
  }

  .intro-copy,
  .intro-copy p,
  .section-head p,
  .material-row > div,
  .material-row p,
  .craft-panel,
  .quality-list,
  .quality-list dt,
  .quality-list dd,
  .capacity-card div,
  .capacity-card p,
  .home-version-copy,
  .home-version-copy p,
  .editorial-copy,
  .contact-inner > div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .intro h2,
  .section-head h2,
  .craft-panel h2,
  .capacity h2,
  .editorial h2,
  .contact h2 {
    display: block;
    width: 100%;
  }

  .material-feature img {
    aspect-ratio: 1.12 / 1;
  }

  .material-feature div {
    padding-top: 16px;
  }

  .material-feature h3 {
    font-size: 1.12rem;
    line-height: 1.45;
  }

  .material-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0;
  }

  .material-row span {
    display: block;
    font-size: 0.98rem;
  }

  .material-title-line {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 10px;
    margin-bottom: 8px;
  }

  .material-row h3 {
    font-size: 1.08rem;
    line-height: 1.35;
  }

  .material-link {
    justify-self: start;
    min-height: 34px;
    padding: 7px 12px 8px;
    font-size: 0.72rem;
  }

  .material-row p {
    max-width: none;
  }

  .craft-media,
  .craft-media img {
    min-height: 300px;
  }

  .craft-media {
    order: 2;
    margin-top: 28px;
  }

  .craft-panel {
    order: 1;
    padding: 0;
  }

  .craft-panel > p {
    margin: 16px 0 24px;
    font-size: 0.88rem;
    line-height: 1.72;
  }

  .quality-list div {
    padding: 18px 0;
    gap: 6px;
  }

  .quality-list dt {
    font-size: 0.98rem;
    line-height: 1.42;
  }

  .quality-list dd {
    font-size: 0.86rem;
    line-height: 1.64;
  }

  .capacity-card {
    grid-template-rows: 220px auto;
    background: rgba(255, 250, 240, 0.5);
  }

  .capacity-card::after {
    display: none;
  }

  .capacity-card img {
    height: 100%;
    min-height: 210px;
    filter: grayscale(0.12) contrast(1.04) saturate(0.72) brightness(0.9);
  }

  .capacity-card div {
    padding: 22px 20px 26px;
    background: #f3efe7;
  }

  .capacity-card span {
    margin-bottom: 10px;
    font-size: 0.68rem;
  }

  .capacity-card h3 {
    font-size: 1.24rem;
    line-height: 1.32;
  }

  .metrics {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .metrics div,
  .metrics div:nth-child(2) {
    min-height: auto;
    padding: 18px 0;
    gap: 4px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .metrics strong {
    font-size: 1.72rem;
  }

  .metrics span {
    font-size: 0.88rem;
  }

  .home-versions {
    gap: 28px;
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .home-version-media {
    min-height: 280px;
    order: 2;
  }

  .home-version-media img {
    min-height: 280px;
  }

  .home-version-copy {
    order: 1;
  }

  .home-version-copy h2 {
    max-width: 15em;
    font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-size: 1.42rem;
    font-weight: 500;
    line-height: 1.34;
  }

  .home-version-copy p,
  .version-points {
    max-width: 22.5rem;
    font-size: 0.9rem;
    line-height: 1.78;
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  .version-points {
    gap: 10px;
    margin: 22px 0 24px;
  }

  .version-points li {
    padding-top: 10px;
  }

  .space-card,
  .space-card img {
    min-height: 270px;
  }

  .space-strip {
    gap: 12px;
  }

  .space-card h3 {
    left: 18px;
    right: 18px;
    bottom: 18px;
    font-size: 1.02rem;
  }

  .editorial {
    padding-top: 62px;
    padding-bottom: 66px;
  }

  .contact-inner {
    gap: 28px;
  }

  .contact p {
    margin-top: 14px;
  }

  .contact-form {
    gap: 14px;
  }

  .contact-form label {
    font-size: 0.84rem;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 0.95rem;
  }

  .form-button {
    width: 100%;
  }

  .versions-hero {
    padding-top: calc(var(--header-height) + 52px);
  }

  .versions-hero h1 {
    font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.14;
  }

  .versions-hero p,
  .version-copy p,
  .version-next p {
    max-width: 22.5rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.78;
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  .version-system {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .version-grid {
    gap: 18px;
  }

  .version-card {
    min-height: auto;
    background: rgba(255, 250, 240, 0.46);
  }

  .version-cover img {
    min-height: 260px;
    max-height: 360px;
  }

  .version-copy {
    padding: 24px 20px 28px;
    overflow: hidden;
  }

  .version-copy span {
    margin-bottom: 10px;
    font-size: 0.66rem;
  }

  .version-copy h2 {
    margin-bottom: 12px;
    font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-size: 1.24rem;
    font-weight: 500;
    line-height: 1.35;
  }

  .version-copy p {
    max-width: 100%;
    margin-bottom: 18px;
  }

  .version-detail-link {
    font-size: 0.76rem;
  }

  .version-next h2 {
    max-width: 15em;
    font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-size: 1.42rem;
    font-weight: 500;
    line-height: 1.34;
  }

  .version-detail-hero {
    padding-top: calc(var(--header-height) + 38px);
  }

  .back-link {
    margin-bottom: 22px;
    font-size: 0.78rem;
  }

  .version-detail-grid {
    gap: 24px;
  }

  .version-detail-grid img {
    aspect-ratio: 1.1 / 1;
    max-height: 360px;
  }

  .version-detail-grid h1,
  .version-placeholder h2 {
    max-width: 15em;
    font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-size: 1.56rem;
    font-weight: 500;
    line-height: 1.28;
  }

  .version-detail-grid p,
  .version-placeholder p {
    max-width: 22.5rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.78;
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  .version-gallery {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .version-gallery-item img {
    width: 100%;
    height: auto;
  }

  .version-gallery-item figcaption {
    left: 14px;
    bottom: 12px;
    font-size: 0.96rem;
  }

  .metrics div:last-child {
    border-bottom: 0;
  }

  .editorial-lines {
    display: none;
  }

  .site-footer {
    display: grid;
    gap: 22px;
    padding: 26px 20px;
    font-size: 0.82rem;
  }

  .footer-brand p {
    overflow-wrap: anywhere;
  }

  .footer-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 14px;
  }
}

/* 2026 premium UI refresh */
:root {
  --ink: #171816;
  --muted: #686b65;
  --paper: #f4f2ed;
  --paper-deep: #e4e7e2;
  --stone: #999d96;
  --olive: #303a34;
  --copper: #8c684f;
  --line: rgba(23, 24, 22, 0.14);
  --white: #fbfaf6;
  --content-max: 1440px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.68;
}

::selection {
  background: #cad1c8;
  color: var(--ink);
}

.site-header {
  height: 72px;
  gap: clamp(18px, 2.4vw, 34px);
  padding-inline: clamp(22px, 4.6vw, 68px);
}

.site-header.is-scrolled,
.version-header {
  background: rgba(244, 242, 237, 0.92);
  border-bottom-color: rgba(23, 24, 22, 0.1);
  backdrop-filter: blur(20px) saturate(1.15);
}

.brand span {
  font-size: 1.18rem;
}

.brand small {
  margin-top: 6px;
  font-size: 0.55rem;
  opacity: 0.58;
}

.desktop-nav {
  gap: clamp(22px, 2.7vw, 38px);
  font-size: 0.8rem;
}

.desktop-nav a {
  position: relative;
  opacity: 0.72;
}

.desktop-nav a::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 180ms ease, transform 180ms ease;
}

.desktop-nav a:hover::after {
  opacity: 0.72;
  transform: scaleX(1);
}

.language-menu summary {
  min-height: 36px;
  border-color: rgba(255, 250, 240, 0.32);
  border-radius: 2px;
}

.site-header.is-scrolled .language-menu summary,
.version-header .language-menu summary {
  border-color: rgba(23, 24, 22, 0.18);
}

.section-pad {
  padding: clamp(76px, 8.5vw, 116px) clamp(22px, 6vw, 88px);
}

.section-kicker,
.eyebrow {
  margin-bottom: 14px;
  color: var(--copper);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

.section-head {
  align-items: end;
  margin-bottom: clamp(38px, 4.8vw, 64px);
}

.section-head h2,
.craft-panel h2,
.capacity h2,
.editorial h2,
.contact h2 {
  max-width: 820px;
  font-size: clamp(2rem, 3.25vw, 3.7rem);
  line-height: 1.12;
}

.section-head p {
  max-width: 460px;
  font-size: 0.92rem;
  line-height: 1.82;
}

.editorial-link {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(23, 24, 22, 0.34);
  border-radius: 2px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.editorial-link::after {
  display: none;
  content: none;
}

.editorial-link.light {
  border-color: rgba(251, 250, 246, 0.52);
  background: rgba(17, 18, 16, 0.1);
  backdrop-filter: blur(8px);
}

.editorial-link.light:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.button {
  min-height: 44px;
  padding-inline: 20px;
  border-radius: 2px;
  font-size: 0.82rem;
}

.button.primary {
  border-color: var(--ink);
  background: var(--ink);
}

.button.primary:hover {
  border-color: #343831;
  background: #343831;
}

.hero-copy {
  max-width: 920px;
  margin-bottom: 30px;
  font-size: clamp(3rem, 5.45vw, 5.65rem);
  line-height: 1.01;
}

.hero-content {
  margin-bottom: clamp(112px, 14vh, 150px);
}

.hero-actions {
  gap: 12px;
}

.hero-proof {
  bottom: 24px;
  padding-top: 16px;
  font-size: 0.76rem;
}

.color-card-showcase {
  min-height: clamp(600px, 70vh, 760px);
  margin: clamp(62px, 7vw, 96px) clamp(22px, 6vw, 88px) 0;
  border-radius: 3px;
}

.color-card-showcase::after {
  background:
    linear-gradient(90deg, rgba(17, 18, 16, 0.7) 0%, rgba(17, 18, 16, 0.2) 54%, rgba(17, 18, 16, 0.04) 100%),
    linear-gradient(0deg, rgba(17, 18, 16, 0.62) 0%, transparent 58%);
}

.color-card-showcase-copy {
  max-width: 650px;
}

.color-card-showcase-copy h2 {
  margin-bottom: 18px;
  font-size: clamp(2.5rem, 4.5vw, 5rem);
}

.color-card-showcase-copy p {
  max-width: 540px;
  margin-bottom: 30px;
  font-size: 0.94rem;
}

.color-card-showcase-copy .editorial-link {
  border-color: rgba(251, 250, 246, 0.58);
}

.home-versions {
  grid-template-columns: minmax(360px, 1.06fr) minmax(360px, 0.94fr);
  gap: clamp(42px, 7vw, 100px);
  background: var(--paper);
}

.color-card-showcase + .home-versions {
  padding-top: clamp(76px, 8vw, 110px);
}

.home-version-media {
  min-height: 500px;
  border-radius: 3px;
  background: #c9c0b4;
}

.home-version-media img {
  min-height: 500px;
  filter: saturate(0.82) contrast(1.03) brightness(0.96);
}

.home-version-copy h2 {
  max-width: 680px;
  font-size: clamp(2rem, 3.2vw, 3.6rem);
  line-height: 1.13;
}

.version-points {
  color: #555951;
}

.version-points li {
  border-top-color: rgba(23, 24, 22, 0.14);
}

.material-spotlight {
  background: #e8ece7;
}

.material-layout {
  grid-template-columns: minmax(320px, 0.9fr) minmax(380px, 1.1fr);
  gap: clamp(44px, 7vw, 100px);
}

.material-feature img {
  aspect-ratio: 7 / 6;
  border-radius: 3px;
  filter: saturate(0.78) contrast(1.03) brightness(0.98);
}

.material-feature div {
  padding-top: 18px;
}

.material-row {
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 27px 0;
}

.material-row span {
  font-size: 1rem;
}

.material-row h3 {
  font-size: clamp(1.24rem, 1.7vw, 1.8rem);
}

.material-row p {
  font-size: 0.91rem;
  line-height: 1.78;
}

.material-link {
  min-height: 36px;
  padding: 8px 13px;
  border-radius: 2px;
}

.craft {
  grid-template-columns: minmax(360px, 0.98fr) minmax(400px, 1.02fr);
  gap: clamp(44px, 7vw, 104px);
  background: #e6e1d9;
}

.craft-media,
.craft-media img {
  min-height: 540px;
  border-radius: 3px;
}

.craft-panel > p {
  margin: 22px 0 34px;
  color: #5c6059;
  font-size: 0.94rem;
  line-height: 1.84;
}

.quality-list div {
  padding: 20px 0;
  border-color: rgba(23, 24, 22, 0.14);
}

.capacity {
  background: #ece9e2;
}

.capacity-grid {
  gap: 22px;
}

.capacity-card {
  grid-template-rows: minmax(300px, 38vh) auto;
  border: 1px solid rgba(23, 24, 22, 0.1);
  border-radius: 3px;
  background: rgba(251, 250, 246, 0.64);
}

.capacity-card img,
.capacity-card .warehouse-image {
  filter: grayscale(0.08) contrast(1.04) saturate(0.78) brightness(0.88);
}

.capacity-card div {
  padding: clamp(26px, 3.5vw, 40px);
  background: rgba(251, 250, 246, 0.72);
}

.capacity-card h3 {
  font-size: clamp(1.45rem, 1.9vw, 2.08rem);
}

.metrics div {
  min-height: 132px;
}

.metrics strong {
  font-size: clamp(1.7rem, 2.8vw, 3rem);
}

.spaces {
  background: var(--paper);
}

.space-strip {
  gap: 16px;
}

.space-card,
.space-card img {
  min-height: 460px;
  border-radius: 3px;
}

.space-card img {
  filter: saturate(0.82) contrast(1.03) brightness(0.94);
}

.editorial {
  min-height: 440px;
  display: grid;
  align-items: center;
  background: var(--olive);
}

.editorial h2 {
  max-width: 920px;
}

.contact {
  background: var(--paper-deep);
}

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
}

.contact-form {
  padding-top: 4px;
}

.contact-form input,
.contact-form textarea {
  min-height: 44px;
  padding: 10px 0 12px;
  border-bottom-color: rgba(23, 24, 22, 0.24);
}

.site-footer {
  min-height: 112px;
  padding-block: 34px;
  background: #171916;
}

.versions-page,
.version-detail-page,
.color-library-page {
  background: var(--paper);
}

.versions-hero,
.version-detail-hero {
  background: #ecebe6;
}

.versions-hero {
  min-height: 500px;
  display: grid;
  align-items: center;
}

.versions-hero-grid {
  align-items: end;
}

.versions-hero h1 {
  font-size: clamp(3rem, 5.8vw, 5.6rem);
  line-height: 1;
}

.version-system {
  background: #e5e8e3;
}

.version-grid {
  gap: 24px;
}

.version-card {
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(23, 24, 22, 0.1);
  border-radius: 3px;
  background: rgba(251, 250, 246, 0.72);
}

.version-cover img {
  min-height: 420px;
  filter: saturate(0.82) contrast(1.03) brightness(0.96);
}

.version-copy {
  padding: clamp(32px, 4.6vw, 58px);
}

.version-copy h2 {
  font-size: clamp(1.55rem, 2.35vw, 2.65rem);
}

.version-detail-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(23, 24, 22, 0.24);
  border-radius: 2px;
  color: var(--ink);
  letter-spacing: 0.04em;
}

.version-detail-link::after {
  width: 22px;
}

.version-detail-grid img {
  aspect-ratio: 5 / 6;
  border-radius: 3px;
  filter: saturate(0.84) contrast(1.03) brightness(0.97);
}

.version-gallery {
  gap: 24px;
  background: #e5e8e3;
}

.version-gallery-item {
  overflow: hidden;
  border-radius: 3px;
  background: var(--white);
}

.color-library-hero {
  min-height: 620px;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.9fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "title cover"
    "copy cover";
  gap: 28px clamp(52px, 7vw, 110px);
  align-items: stretch;
  padding: calc(var(--header-height) + 70px) clamp(22px, 6vw, 88px) 72px;
  background: #efeee9;
}

.color-library-hero > div {
  grid-area: title;
  align-self: end;
}

.color-library-hero > p {
  grid-area: copy;
  align-self: start;
  max-width: 580px;
}

.color-library-cover {
  grid-area: cover;
  width: 100%;
  height: clamp(430px, 44vw, 560px);
  min-height: 0;
  align-self: end;
  border-radius: 3px;
}

.home-versions,
.material-spotlight,
.craft,
.capacity,
.spaces,
.contact {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

.color-library-hero h1 {
  max-width: 760px;
  font-size: clamp(3rem, 5vw, 5.2rem);
  line-height: 1.02;
}

.library-toolbar {
  grid-template-columns: minmax(230px, 330px) minmax(0, 1fr) auto;
  gap: 20px;
  padding: 18px clamp(22px, 6vw, 88px);
  background: rgba(248, 247, 243, 0.92);
  border-bottom-color: rgba(23, 24, 22, 0.1);
}

.library-toolbar input {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(23, 24, 22, 0.18);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.48);
}

.library-toolbar input:focus {
  border-color: rgba(23, 24, 22, 0.54);
}

.library-color-button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 16px;
  background: transparent;
}

.library-color-button:hover,
.library-color-button.is-active {
  background: #fff;
}

.library-count strong {
  font-size: 1.75rem;
}

.library-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  padding: clamp(28px, 4vw, 58px) clamp(22px, 5vw, 72px) clamp(68px, 7vw, 108px);
}

.library-card {
  overflow: hidden;
  border: 1px solid rgba(23, 24, 22, 0.12);
  border-radius: 6px;
  background: #fffdfa;
  box-shadow: 0 14px 38px rgba(23, 24, 22, 0.045);
}

.library-card:hover {
  transform: translateY(-2px);
  border-color: rgba(23, 24, 22, 0.18);
  box-shadow: 0 24px 58px rgba(23, 24, 22, 0.08);
}

.library-card-body {
  gap: 25px;
  padding: clamp(22px, 2.4vw, 30px);
}

.library-card-head strong {
  font-size: clamp(1.55rem, 1.8vw, 2.05rem);
}

.library-detail-hero {
  min-height: 420px;
  display: grid;
  align-content: end;
  padding-bottom: 54px;
  background: #efeee9;
}

.library-detail-hero h1 {
  font-size: clamp(3rem, 5.8vw, 5.8rem);
}

.library-detail-layout {
  padding-top: clamp(32px, 4vw, 58px);
}

.library-detail-panel,
.library-model-card {
  border: 1px solid rgba(23, 24, 22, 0.1);
  border-radius: 3px;
  background: #faf9f5;
  box-shadow: none;
}

.library-detail-panel .library-specs div {
  background: #f0f1ec;
}

.library-series-qr {
  background: #fff;
  border: 1px solid rgba(23, 24, 22, 0.1);
  border-radius: 2px;
}

.library-model-card {
  overflow: hidden;
}

.library-model-card strong {
  font-size: clamp(1.25rem, 1.45vw, 1.7rem);
}

@media (max-width: 980px) {
  .color-library-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "copy"
      "cover";
    grid-template-rows: auto;
    gap: 26px;
  }

  .color-library-cover {
    height: 440px;
    min-height: 0;
  }

  .home-versions,
  .material-layout,
  .craft,
  .contact-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  :root {
    --header-height: 64px;
  }

  .site-header {
    height: var(--header-height);
    gap: 10px;
    padding: 0 16px 0 20px;
  }

  header.site-header .language-menu {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    margin-left: auto !important;
  }

  header.site-header .menu-button,
  header.version-header .menu-button {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    flex: 0 0 40px;
  }

  .brand span {
    font-size: 1rem;
  }

  .brand small {
    font-size: 0.5rem;
  }

  .language-menu summary {
    min-height: 32px;
    padding-inline: 9px;
  }

  .section-pad {
    padding: 54px 20px;
  }

  .hero {
    min-height: 680px;
  }

  .hero-content {
    width: calc(100% - 40px);
    margin: 0 20px 158px;
  }

  .hero-copy {
    max-width: 8.8em;
    margin-bottom: 24px;
    font-size: clamp(2.25rem, 11vw, 3rem);
    line-height: 1.08;
  }

  .editorial-actions {
    display: flex;
    gap: 8px;
  }

  .editorial-link {
    min-height: 40px;
    padding-inline: 13px;
    font-size: 0.7rem;
  }

  .editorial-link::after {
    margin-left: 8px;
  }

  .hero-proof {
    left: 20px;
    right: 20px;
    bottom: 16px;
    gap: 5px;
    font-size: 0.7rem;
  }

  .color-card-showcase {
    min-height: 540px;
    margin: 30px 12px 0;
    padding: 42px 22px;
  }

  .color-card-showcase-copy h2 {
    font-size: 2.65rem;
  }

  .color-card-showcase-copy p {
    margin-bottom: 24px;
    font-size: 0.88rem;
    line-height: 1.76;
  }

  .home-versions {
    gap: 28px;
  }

  .color-card-showcase + .home-versions {
    padding-top: 58px;
  }

  .home-version-media,
  .home-version-media img {
    min-height: 300px;
  }

  .home-version-copy h2,
  .section-head h2,
  .craft-panel h2,
  .capacity h2,
  .editorial h2,
  .contact h2 {
    font-size: 1.72rem;
    line-height: 1.28;
  }

  .material-feature img {
    aspect-ratio: 1.08 / 1;
    width: 100%;
    object-position: center 48%;
  }

  .material-summary {
    margin: 4px 0 18px;
  }

  .craft-media,
  .craft-media img {
    min-height: 320px;
  }

  .capacity-grid {
    gap: 16px;
  }

  .capacity-card {
    grid-template-rows: 230px auto;
  }

  .space-strip {
    gap: 10px;
  }

  .space-card,
  .space-card img {
    min-height: 320px;
  }

  .editorial {
    min-height: 0;
  }

  .contact-inner {
    gap: 34px;
  }

  .versions-hero {
    min-height: 420px;
  }

  .versions-hero h1 {
    font-size: 2.65rem;
  }

  .version-card {
    border-radius: 2px;
  }

  .version-detail-link {
    width: fit-content;
  }

  .color-library-hero {
    gap: 22px;
    padding: calc(var(--header-height) + 46px) 20px 46px;
  }

  .color-library-hero h1 {
    max-width: 9em;
    font-size: clamp(2.35rem, 11vw, 3rem);
    line-height: 1.08;
  }

  .color-library-hero > p {
    font-size: 0.88rem;
    line-height: 1.76;
  }

  .color-library-cover {
    height: 300px;
    min-height: 0;
  }

  .library-toolbar {
    gap: 14px;
    padding: 18px 20px;
  }

  .library-toolbar input {
    min-height: 40px;
  }

  .library-grid {
    gap: 14px;
    padding: 22px 14px 64px;
  }

  .library-card-body {
    padding: 18px 20px 22px;
  }

  .library-detail-hero {
    min-height: 340px;
    padding: calc(var(--header-height) + 48px) 20px 40px;
  }

  .library-detail-layout {
    padding: 22px 14px 64px;
  }

  .library-detail-panel {
    padding: 20px;
  }

  .color-card-showcase {
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 26px 16px 0;
    padding: 0;
    display: grid;
    align-items: stretch;
    overflow: hidden;
    background: #20231f;
  }

  .color-card-showcase::after {
    display: none;
  }

  .color-card-showcase-media {
    position: relative;
    inset: auto;
    height: clamp(300px, 92vw, 390px);
  }

  .color-card-showcase-media img {
    object-position: 48% 52%;
    filter: saturate(0.88) contrast(1.03) brightness(0.94);
    transform: none;
  }

  .color-card-showcase-media:hover img {
    filter: saturate(0.88) contrast(1.03) brightness(0.94);
    transform: none;
  }

  .color-card-showcase-copy {
    width: 100%;
    max-width: none;
    padding: 30px 24px 32px;
    background: #20231f;
  }

  .color-card-showcase-copy .section-kicker {
    margin-bottom: 10px;
  }

  .color-card-showcase-copy h2 {
    margin-bottom: 14px;
    font-size: 2.35rem;
    line-height: 1.08;
  }

  .color-card-showcase-copy p {
    margin-bottom: 22px;
    font-size: 0.86rem;
    line-height: 1.72;
  }

  .color-card-showcase-copy .editorial-link {
    min-height: 42px;
    padding: 0 16px;
  }
}

@media (max-width: 680px) {
  header.site-header .language-menu {
    position: fixed !important;
    top: 15px !important;
    right: clamp(78px, 22vw, 116px) !important;
    z-index: 31 !important;
    margin-left: 0 !important;
  }

  header.site-header .menu-button {
    position: fixed !important;
    top: 11px !important;
    right: 18px !important;
    z-index: 31 !important;
    display: block !important;
  }

  header.version-header .menu-button {
    background: rgba(255, 250, 240, 0.72) !important;
    box-shadow: 0 8px 24px rgba(24, 22, 19, 0.08);
  }

  header.version-header .menu-button span {
    background: var(--ink) !important;
  }
}

@media (max-width: 980px) {
  .color-library-hero {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .color-library-cover {
    min-height: clamp(280px, 56vw, 460px);
  }

  .library-grid {
    grid-template-columns: 1fr;
  }

  .library-detail-layout {
    grid-template-columns: 1fr;
  }

  .library-detail-panel {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .library-detail-panel .library-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .library-side-panel {
    grid-template-columns: minmax(150px, 220px) 1fr;
    align-items: stretch;
  }

  .library-series-qr {
    min-height: 0;
    padding: 12px;
    border-top: 0;
  }

  .library-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .color-library-hero {
    padding: calc(var(--header-height) + 54px) 24px 44px;
    overflow: hidden;
  }

  .color-library-hero > div {
    min-width: 0;
  }

  .color-library-hero h1 {
    max-width: 7em;
    font-size: clamp(2.3rem, 11.5vw, 3.2rem);
    line-height: 1.06;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .color-library-hero p {
    max-width: 22.5rem;
    font-size: 0.92rem;
    line-height: 1.78;
  }

  .color-library-cover {
    min-height: 320px;
  }

  .library-toolbar {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 24px;
  }

  .library-count {
    justify-self: start;
  }

  .library-color-filter {
    gap: 7px;
  }

  .library-filter-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .library-style-filter {
    gap: 7px;
  }

  .library-style-button {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 0.76rem;
  }

  .library-color-button {
    padding: 7px 10px;
    font-size: 0.76rem;
  }

  .library-grid {
    grid-template-columns: 1fr;
  }

  .library-series-tile span {
    right: 4px;
    bottom: 4px;
    min-width: 21px;
    padding: 3px 4px;
    font-size: 0.58rem;
  }

  .library-card-body {
    gap: 22px;
    padding: 22px 22px 24px;
  }

  .library-series-title strong {
    font-size: 2rem;
  }

  .library-series-footer {
    gap: 14px;
  }

  .library-specs div {
    grid-template-columns: 64px 1fr;
    gap: 14px;
  }

  .library-detail-hero {
    padding: calc(var(--header-height) + 54px) 24px 38px;
  }

  .library-detail-hero h1 {
    font-size: clamp(2.7rem, 15vw, 4.8rem);
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  .library-detail-hero p {
    max-width: 22.5rem;
    font-size: 0.92rem;
    line-height: 1.78;
  }

  .library-detail-panel {
    padding: 22px 24px 28px;
  }

  .library-detail-panel .library-specs {
    grid-template-columns: 1fr;
  }

  .library-detail-panel .library-specs div {
    min-height: 0;
    padding: 15px 16px;
  }

  .library-side-panel {
    grid-template-columns: 1fr;
  }

  .library-series-qr img {
    width: min(178px, 70vw);
  }

  .library-detail-grid {
    grid-template-columns: 1fr;
  }

.library-model-card strong {
    padding: 18px 24px 24px;
  }
}

/* Final responsive cascade for the premium refresh. */
@media (max-width: 980px) {
  .color-library-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "copy"
      "cover";
    grid-template-rows: auto;
    gap: 26px;
  }

  .color-library-cover {
    height: 440px;
    min-height: 0;
  }
}

@media (max-width: 680px) {
  header.site-header .language-menu {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    margin-left: auto !important;
  }

  header.site-header .menu-button,
  header.version-header .menu-button {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    display: block !important;
    flex: 0 0 40px;
  }

  .color-library-hero {
    gap: 22px;
    padding: calc(var(--header-height) + 46px) 20px 46px;
  }

  .color-library-hero h1 {
    max-width: 9em;
    font-size: clamp(2.35rem, 11vw, 3rem);
    line-height: 1.08;
  }

  .color-library-hero p {
    font-size: 0.88rem;
    line-height: 1.76;
  }

  .color-library-cover {
    height: 300px;
    min-height: 0;
  }

  .library-toolbar {
    gap: 14px;
    padding: 18px 20px;
  }

  .library-grid {
    gap: 14px;
    padding: 22px 14px 64px;
  }

  .library-card-body {
    padding: 18px 20px 22px;
  }

  .library-detail-hero {
    min-height: 340px;
    padding: calc(var(--header-height) + 48px) 20px 40px;
  }

  .library-detail-hero h1 {
    font-size: clamp(2.55rem, 13vw, 3.8rem);
  }

  .library-detail-layout {
    padding: 22px 14px 64px;
  }

  .library-detail-panel {
    padding: 20px;
  }
}

/* Stable mobile header for iOS Safari and embedded WebViews. */
@media (max-width: 680px) {
  :root {
    --header-height: calc(60px + var(--safe-area-top));
  }

  .site-header {
    top: 0;
    height: var(--header-height);
    min-height: var(--header-height);
    padding: var(--safe-area-top) 16px 0 20px;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .site-header.is-scrolled,
  .version-header {
    background: #f4f2ed;
    border-bottom: 1px solid rgba(23, 24, 22, 0.12);
    box-shadow: 0 1px 0 rgba(23, 24, 22, 0.03);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  header.site-header .menu-button,
  header.version-header .menu-button {
    width: 40px;
    height: 40px;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mobile-nav {
    padding-top: var(--safe-area-top);
  }
}

/* Visual fabric search */
.visual-search {
  padding: clamp(70px, 7vw, 104px) clamp(22px, 6vw, 88px);
  background: #1d211e;
  color: #f8f5ee;
}

.visual-search-head {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(320px, 0.68fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: end;
  max-width: 1320px;
  margin: 0 auto clamp(38px, 5vw, 62px);
}

.visual-search-head .section-kicker {
  color: #b99a7d;
}

.visual-search-head h2 {
  margin: 8px 0 0;
  color: #f8f5ee;
  font-size: clamp(2.7rem, 5vw, 5.3rem);
  line-height: 1;
}

.visual-search-head p {
  max-width: 560px;
  margin: 0;
  color: rgba(248, 245, 238, 0.68);
  font-size: 0.94rem;
  line-height: 1.85;
}

.visual-search-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  max-width: 1320px;
  margin: 0 auto;
  border-top: 1px solid rgba(248, 245, 238, 0.18);
  border-bottom: 1px solid rgba(248, 245, 238, 0.18);
}

.visual-search-media {
  min-width: 0;
  padding: 36px clamp(32px, 5vw, 72px) 40px 0;
  border-right: 1px solid rgba(248, 245, 238, 0.18);
}

.visual-upload[hidden],
.visual-crop[hidden],
.visual-results[hidden] {
  display: none;
}

.visual-upload {
  min-height: 430px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  border: 1px solid rgba(248, 245, 238, 0.28);
  background: #242925;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease;
}

.visual-upload:hover,
.visual-upload.is-dragging {
  border-color: rgba(248, 245, 238, 0.72);
  background: #292f2a;
}

.visual-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.visual-upload-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border: 1px solid rgba(248, 245, 238, 0.52);
  color: #f8f5ee;
  font-family: Arial, sans-serif;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1;
}

.visual-upload strong {
  font-size: 1rem;
  font-weight: 500;
}

.visual-upload small {
  color: rgba(248, 245, 238, 0.5);
  font-size: 0.76rem;
}

.visual-crop {
  position: relative;
  min-height: 430px;
  background: #111411;
}

.visual-crop canvas {
  width: 100%;
  height: 430px;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.visual-replace {
  position: absolute;
  top: 14px;
  right: 14px;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(248, 245, 238, 0.58);
  background: rgba(17, 20, 17, 0.74);
  color: #f8f5ee;
  cursor: pointer;
}

.visual-search-controls {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 38px 0 40px clamp(32px, 5vw, 72px);
}

.visual-control-label {
  display: block;
  margin-bottom: 16px;
  color: rgba(248, 245, 238, 0.58);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.visual-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(248, 245, 238, 0.22);
}

.visual-mode button {
  min-width: 0;
  min-height: 46px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid rgba(248, 245, 238, 0.18);
  background: transparent;
  color: rgba(248, 245, 238, 0.62);
  cursor: pointer;
  font-size: 0.8rem;
}

.visual-mode button:last-child {
  border-right: 0;
}

.visual-mode button.is-active {
  background: #f2eee5;
  color: #1d211e;
}

.visual-search-action p {
  min-height: 44px;
  margin: 0 0 18px;
  color: rgba(248, 245, 238, 0.56);
  font-size: 0.78rem;
  line-height: 1.7;
}

.visual-search-button {
  width: 100%;
  min-height: 50px;
  border: 1px solid #b68e6c;
  background: #a87b58;
  color: #fffaf0;
  cursor: pointer;
  font-weight: 500;
  transition:
    background 180ms ease,
    border-color 180ms ease;
}

.visual-search-button:hover:not(:disabled) {
  border-color: #c7a486;
  background: #b48865;
}

.visual-search-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.visual-results {
  max-width: 1320px;
  margin: clamp(58px, 7vw, 92px) auto 0;
  scroll-margin-top: calc(var(--header-height) + 20px);
}

.visual-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.visual-results-head span {
  color: #b99a7d;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.visual-results-head h3 {
  margin: 5px 0 0;
  color: #f8f5ee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.3vw, 3.4rem);
  font-weight: 400;
}

.visual-results-head > strong {
  color: rgba(248, 245, 238, 0.58);
  font-size: 0.82rem;
  font-weight: 400;
}

.visual-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.visual-result-card {
  min-width: 0;
  overflow: hidden;
  background: #f2eee5;
  color: #1d211e;
}

.visual-result-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #d8d6cf;
}

.visual-result-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 360ms ease;
}

.visual-result-card:hover .visual-result-media img {
  transform: scale(1.025);
}

.visual-result-media span {
  position: absolute;
  top: 12px;
  left: 12px;
  min-width: 34px;
  padding: 5px 7px;
  background: rgba(244, 242, 237, 0.9);
  color: #1d211e;
  font-size: 0.7rem;
  text-align: center;
}

.visual-result-body {
  padding: 18px 20px 20px;
}

.visual-result-body > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.visual-result-body strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
  font-weight: 400;
}

.visual-result-body small {
  flex: 0 0 auto;
  color: #77766f;
  font-size: 0.72rem;
}

.visual-result-body p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 25px;
  margin: 13px 0 16px;
}

.visual-result-body p span {
  padding: 4px 7px;
  border: 1px solid rgba(29, 33, 30, 0.16);
  color: #656861;
  font-size: 0.68rem;
}

.visual-result-body > a {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px solid #1d211e;
  font-size: 0.78rem;
  font-weight: 500;
}

@media (max-width: 980px) {
  .visual-search-head,
  .visual-search-workspace {
    grid-template-columns: 1fr;
  }

  .visual-search-head {
    gap: 22px;
  }

  .visual-search-media {
    padding: 30px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(248, 245, 238, 0.18);
  }

  .visual-search-controls {
    min-height: 250px;
    padding: 30px 0;
  }

  .visual-results-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .visual-search {
    padding: 58px 16px 64px;
  }

  .visual-search-head {
    margin-bottom: 30px;
  }

  .visual-search-head h2 {
    font-size: 2.7rem;
  }

  .visual-search-head p {
    font-size: 0.86rem;
    line-height: 1.72;
  }

  .visual-search-media {
    padding: 22px 0;
  }

  .visual-upload,
  .visual-crop {
    min-height: 340px;
  }

  .visual-crop canvas {
    height: 340px;
  }

  .visual-search-controls {
    min-height: 230px;
    gap: 34px;
    padding: 24px 0 26px;
  }

  .visual-mode button {
    min-height: 44px;
    padding: 0 6px;
    font-size: 0.74rem;
  }

  .visual-results {
    margin-top: 54px;
  }

  .visual-results-head {
    margin-bottom: 20px;
  }

  .visual-results-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .visual-result-card {
    display: grid;
    grid-template-columns: 44% minmax(0, 1fr);
  }

  .visual-result-media {
    height: 100%;
    min-height: 188px;
    aspect-ratio: auto;
  }

  .visual-result-body {
    min-width: 0;
    padding: 17px 16px;
  }

  .visual-result-body > div {
    display: grid;
    gap: 3px;
  }

  .visual-result-body strong {
    font-size: 1.06rem;
  }
}



/* refinement.css */
/* HALONE — editorial brand and focused material selection, September 2026. */
/* Shared website identity, present in markup before first paint. */
.site-header .brand{flex:none}
.site-header .brand span{display:flex;align-items:baseline;gap:10px;font:400 24px/1.2 Georgia,serif;letter-spacing:.08em;white-space:nowrap}
.site-header .brand em{font:400 13px/1.2 "PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.12em;font-style:normal;opacity:.85}
.site-header .brand small{font:400 8px/1.4 Arial,sans-serif;letter-spacing:.18em;margin-top:7px;opacity:.65}
.site-header .header-home{flex:none;color:inherit;text-decoration:none;font-size:11px;min-height:36px;display:flex;align-items:center;gap:5px;padding:0 10px;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 25%,transparent);border-radius:4px;transition:background .18s}
.site-header .header-home::before{content:"";width:13px;height:13px;background:currentColor;mask:url('/assets/ui/home.svg') center/contain no-repeat;-webkit-mask:url('/assets/ui/home.svg') center/contain no-repeat;opacity:.8}
.site-header .header-home:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
@media(max-width:980px){header.site-header{gap:14px}header.site-header .brand span{font-size:22px;gap:8px}header.site-header .brand em{font-size:12px}header.site-header .brand small{font-size:7px;letter-spacing:.14em}header.site-header .header-home{font-size:11px;margin-right:auto;padding:0 8px}header.site-header .site-language,header.site-header .language-menu{margin-left:0}header.site-header .site-language select,header.site-header .language-menu summary{font-size:11px;max-width:72px;padding:8px}header.site-header .menu-button{margin-left:0}}
@media(max-width:380px){header.site-header{padding-inline:16px;gap:8px}header.site-header .brand span{font-size:18px;gap:6px;letter-spacing:.04em}header.site-header .brand em{font-size:11px}header.site-header .brand small{font-size:6px;letter-spacing:.1em}header.site-header .header-home{padding:0 6px;gap:4px}header.site-header .header-home::before{width:11px;height:11px}header.site-header .menu-button{flex-basis:28px;width:28px}}
:root{--paper:#f5f3ee;--ink:#252722;--muted:#6c6c63;--line:rgba(37,39,34,.16);--header-height:80px;--page-gutter:clamp(22px,5vw,80px)}
body{font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;line-height:1.75;-webkit-font-smoothing:antialiased}
::selection{background:#d8c8ae;color:#252722}
:focus-visible{outline:2px solid #9a7046;outline-offset:5px}
[hidden]{display:none!important}
main{scroll-margin-top:var(--header-height)}
.color-library-page,.library-detail-page,.versions-page,.version-detail-page{padding-top:var(--header-height)}
section[id],article[id]{scroll-margin-top:calc(var(--header-height) + 28px)}
.site-header{height:var(--header-height);padding-inline:var(--page-gutter);gap:24px}
.site-header.is-scrolled,.site-header.version-header{background:rgba(245,243,238,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand span{font:400 25px/1 Georgia,serif;letter-spacing:.06em}
.brand small{font-size:9px;letter-spacing:.12em;margin-top:8px;opacity:.75}
.desktop-nav{gap:clamp(10px,1.1vw,18px)}
.desktop-nav a{font-size:clamp(10px,.85vw,13px);font-weight:400;position:relative;padding-block:12px;white-space:nowrap}
.desktop-nav a[aria-current=page]::after{content:"";position:absolute;bottom:4px;left:0;right:0;height:1px;background:currentColor}
.language-menu summary{font-size:12px;min-height:40px;display:flex;align-items:center}
.section-pad{padding:100px var(--page-gutter)}
.section-kicker{font-size:11px;font-weight:500;letter-spacing:.2em;color:#8b7358;margin-bottom:20px}
h1,h2,h3{font-weight:400;text-wrap:balance}
.section-head h2,.craft-panel h2,.home-version-copy h2,.color-card-showcase-copy h2,.contact h2,.editorial h2{font-family:"Noto Serif SC","Songti SC","SimSun",Georgia,serif;font-weight:400;line-height:1.4;letter-spacing:.03em}
.section-head h2{font-size:clamp(28px,3.1vw,46px)}
.section-head p,p{line-height:1.9}
.hero{min-height:780px;height:100svh;max-height:1100px}
.hero-shade{background:linear-gradient(180deg,rgba(15,19,17,.22),transparent 36%,rgba(15,19,17,.66))}
.hero-content{position:absolute;top:auto;left:var(--page-gutter);right:var(--page-gutter);bottom:150px;width:auto;max-width:none;padding:0;margin:0}
.hero-content .hero-eyebrow{color:#eee8dc;font:400 11px/1.4 Arial,sans-serif;letter-spacing:.28em;margin:0 0 20px}
.hero-copy{font:400 clamp(54px,6.8vw,100px)/1.03 Georgia,"Times New Roman",serif;letter-spacing:-.035em;max-width:950px;margin:0;text-transform:none}
.hero-copy span{display:block;font-style:italic}
.hero-subtitle{font-size:15px;letter-spacing:.18em;color:#eee8dc;margin:24px 0 30px}
.hero-actions{gap:28px;margin-top:0}
.hero-actions .editorial-link{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.6);padding:12px 0;min-width:125px;font-size:13px;font-weight:400;justify-content:space-between}
.hero-proof{left:var(--page-gutter);right:var(--page-gutter);bottom:28px;padding-top:22px;font-size:11px;color:#eee8dc;letter-spacing:.08em}
.editorial-link,.version-detail-link{font-size:13px;letter-spacing:.04em}
.color-card-showcase{gap:8vw;align-items:center;padding-block:110px}
.color-card-showcase-media{border-radius:0;aspect-ratio:1.12}
.color-card-showcase-media img{height:100%;object-fit:cover}
.color-card-showcase-copy h2{font-size:clamp(34px,4vw,60px)}
.color-card-showcase-copy p{max-width:420px;font-size:15px}
.craft,.home-versions{gap:7vw}
.craft-panel{padding:45px 0}
.craft-panel h2,.home-version-copy h2{font-size:clamp(28px,3.2vw,46px)}
.quality-list{margin-top:32px}
.quality-list>div{padding:20px 0}
.capacity-card,.space-card,.version-card{border-radius:0;box-shadow:none}
.metrics strong{font-weight:400}
.metrics>div{padding-block:26px}
.space-strip{gap:24px}
.space-card h3{font-size:17px;padding-top:12px}
.editorial{background:#e9e6dd}
.editorial h2{font-size:clamp(27px,3vw,44px);max-width:820px}
.contact{background:#252c25;color:#f5f3ee}
.contact .section-kicker{color:#c4ae8c}
.contact h2{font-size:clamp(30px,3.7vw,52px);max-width:600px}
.contact-inner{gap:8vw;align-items:start}
.contact p{color:#d5d7cd}
.contact-direct{display:flex;flex-wrap:wrap;gap:16px 24px;margin-top:30px;align-items:center}
.contact-direct a{font:400 clamp(23px,2.3vw,34px)/1.3 Georgia,serif;border-bottom:1px solid #a1aa9c;padding-bottom:6px}
.contact-direct small{font-size:12px;color:#d5d7cd}
.contact-form input,.contact-form textarea{background:transparent;border:0;border-bottom:1px solid #747d71;border-radius:0;color:#fff;padding:14px 0;min-height:48px}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#b7bdb2}
.contact-form label>span{font-size:12px;color:#e0e4d9}
.contact-form .form-button{background:#e9e4d8;color:#252c25;border:0;border-radius:0;min-height:50px;font-weight:400}
.contact-form .form-note{grid-column:1/-1;font-size:12px;margin:0;color:#cbd1c4}
.site-footer{padding:45px var(--page-gutter);background:var(--paper);color:var(--muted);border-top:1px solid var(--line);gap:30px}
.site-footer .footer-brand span,.site-footer .footer-contact strong,.site-footer .footer-contact a{color:var(--ink)}
.site-footer .footer-contact small{color:var(--muted)}
.footer-brand span{font:400 30px Georgia,serif;letter-spacing:.06em}
.site-footer p{font-size:12px;max-width:360px}
.site-footer a{font-size:17px}
.back-link{font-size:12px;letter-spacing:.05em;min-height:40px;display:inline-flex;align-items:center;margin-bottom:24px}
.color-library-hero{display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto auto;gap:12px 7vw;padding:48px var(--page-gutter) 42px;min-height:0;align-items:center}
.color-library-hero>div{grid-column:1;grid-row:1;align-self:end}
.color-library-hero>p{grid-column:1;grid-row:2;align-self:start;max-width:650px;margin:0;font-size:14px}
.color-library-hero h1{font-family:"Noto Serif SC","Songti SC","SimSun",serif;font-size:clamp(35px,4.6vw,64px);line-height:1.25;letter-spacing:.02em;margin:0}
.color-library-hero .section-kicker{margin-bottom:14px}
.color-library-cover{grid-column:2;grid-row:1/3;margin:0;width:260px;height:210px;min-height:0;align-self:center;border-radius:0}
.color-library-cover img{height:100%;object-fit:cover;border-radius:0}
.library-toolbar{position:relative;top:auto;padding:26px var(--page-gutter);display:grid;grid-template-columns:minmax(270px,.75fr) minmax(0,1.8fr);gap:20px 36px;background:#faf9f5;align-items:start}
.library-search-area{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
.library-search input{height:48px;border:1px solid #b8b8ad;background:transparent;border-radius:0;font-size:14px;padding:10px 12px;width:100%}
.library-search>span{font-size:12px;margin-bottom:8px}
.visual-search-trigger{min-height:48px;padding:0 18px;font-size:13px;border-radius:0}
.library-filter-groups{gap:12px}
.library-filter-row{gap:14px}
.library-filter-label{font-size:11px;min-width:48px}
.library-style-filter,.library-color-filter{gap:6px}
.library-style-button,.library-color-button{font-size:12px;min-height:36px;border-color:transparent;background:transparent;border-radius:0;padding:5px 10px}
.library-style-button em,.library-color-button em{display:none}
.library-style-button.is-active,.library-color-button.is-active{border-color:#727a69;background:#ecefe5;color:#252c25}
.library-color-swatch{width:12px;height:12px}
.library-count{grid-column:1/-1;justify-self:stretch;width:100%;display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:16px;margin:0;font-size:12px}
.library-count strong{font:400 23px Georgia,serif}
.library-reset{margin-left:auto;border:0;border-bottom:1px solid #a8a99e;background:transparent;font-size:12px;padding:5px 0;color:#565e50;cursor:pointer}
.library-grid{padding:40px var(--page-gutter) 60px;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 22px}
.library-card{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.library-series-mosaic{border-radius:0;gap:3px}
.library-series-tile{border-radius:0}
.library-card-body{display:block;padding:16px 0 0;background:transparent}
.library-series-title{display:flex;align-items:baseline;flex-direction:row-reverse;justify-content:space-between;gap:12px}
.library-series-title strong{font:400 26px Georgia,serif}
.library-series-title small{font-size:8px;letter-spacing:.09em;color:#787c70}
.library-series-footer{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;gap:8px}
.library-text-link{font-size:12px}
.library-series-count{font-size:10px;white-space:nowrap}
.library-more{display:block;min-width:220px;min-height:48px;margin:0 auto 70px;background:transparent;border:1px solid #818779;cursor:pointer;font-size:13px;color:var(--ink)}
.library-empty{grid-column:1/-1;padding:70px 20px;text-align:center;color:var(--muted)}
.library-detail-hero{min-height:0;padding:38px var(--page-gutter) 30px;border:0}
.library-detail-hero h1{font:400 clamp(45px,5vw,72px)/1.1 Georgia,serif;margin:0 0 16px}
.library-detail-hero .section-kicker{margin-bottom:12px}
.library-detail-hero p{max-width:700px;font-size:13px;margin:0}
.library-detail-layout{padding:0 var(--page-gutter) 80px;display:grid;grid-template-columns:250px minmax(0,1fr);gap:42px;align-items:start}
.library-detail-panel{position:sticky;top:104px;display:block;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:12px 0;box-shadow:none}
.library-detail-panel .library-specs{display:block;background:transparent}
.library-detail-panel .library-specs div{display:grid;grid-template-columns:60px 1fr;gap:10px;padding:11px 0;border:0;border-bottom:1px solid var(--line);background:transparent;min-height:0}
.library-specs dt{font-size:11px;color:var(--muted)}
.library-specs dd{font-size:12px;line-height:1.75;overflow-wrap:anywhere}
.library-side-panel{display:block;padding:20px 0}
.library-series-qr{width:144px;max-width:100%;min-height:0;margin:12px 0 0;background:transparent;padding:0;border:0;border-radius:0;box-shadow:none;align-content:start;justify-items:start}
.library-series-qr img{width:100%;height:auto}
.library-back-links{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:24px}
.library-back-links .back-link{margin-bottom:0;min-height:36px}
.library-back-links .library-history-back{color:var(--muted,#77786e);font-family:"SimHei","Heiti SC","Microsoft YaHei","PingFang SC",sans-serif;font-weight:700}
.library-recommend{display:none}
.library-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.library-model-card{border:0;border-radius:0;background:transparent;padding:0;overflow:hidden}
.library-model-images{gap:3px;border-radius:0}
.library-model-images a{border-radius:0}
.library-model-images img{aspect-ratio:1;object-fit:cover}
.library-model-card>strong{font:400 20px Georgia,serif;padding:14px 0;border-bottom:1px solid var(--line);display:block;text-align:left}
.library-model-images a>span,.library-image-placeholder>span{font-size:10px;padding:5px 8px}
.library-image-placeholder{min-height:0;aspect-ratio:1;background:#e8e8e1;border:0}
.versions-hero{min-height:0;display:block;padding-top:65px;padding-bottom:45px}
.versions-hero h1{font:400 clamp(36px,4.5vw,64px)/1.25 "Songti SC","SimSun",serif}
.version-system{padding-top:25px}
.version-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:55px 28px}
.version-card{padding:0;background:transparent;border:0;display:block}
.version-cover{aspect-ratio:1.15;border-radius:0;background:#eae7df}
.version-copy{padding:20px 0 0}
.version-copy h2{font:400 25px/1.35 Georgia,"SimSun",serif;margin:10px 0}
.version-copy p{font-size:13px;color:var(--muted)}
.version-copy>span{font-size:10px;letter-spacing:.12em}
.version-detail-link{display:inline-block;padding-block:9px;border-bottom:1px solid var(--ink)}
.version-next{background:#e8e8df;gap:40px}
.version-next h2{font:400 34px/1.5 "SimSun",serif}
.version-detail-hero{padding-top:45px;padding-bottom:50px}
.version-detail-grid>img[data-version-cover]{width:100%;height:auto;aspect-ratio:auto;min-height:0;max-height:none;object-fit:contain;background:transparent;align-self:start}
.version-detail-grid{gap:8vw;align-items:center}
.version-detail-grid h1{font:400 clamp(32px,4vw,55px)/1.3 Georgia,"SimSun",serif}
.version-detail-grid>img{height:auto;max-height:560px;object-fit:contain;background:#eae7df;border-radius:0}
.version-placeholder{padding-top:40px;padding-bottom:35px}
.version-gallery{padding-top:0;gap:25px}
.version-gallery-item{border:0;border-radius:0}
.visual-search-modal{border-radius:0;border:1px solid #73786c}
.visual-search-modal .visual-search{padding:65px 40px 50px}
.visual-search-head h2{font:400 40px/1.3 "SimSun",serif}
.visual-search-head p{font-size:14px}
.visual-mode button{font-size:13px;min-height:46px}
.visual-result-card{border-radius:0}
.visual-control-label{font-size:12px}
.visual-search-action p{font-size:13px}
.visual-modal-close{border-radius:0}
.image-viewer{background:#171b17;border:0;color:white;width:96vw;max-width:1300px;height:94dvh;max-height:94dvh;padding:65px 30px 65px;overflow:hidden}
.image-viewer::backdrop{background:rgba(15,19,15,.85);backdrop-filter:blur(8px)}
.image-viewer img{width:100%;height:100%;object-fit:contain}
.image-viewer header{position:absolute;top:16px;left:30px;right:25px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px}
.image-viewer button{border:1px solid #6a7466;background:transparent;color:white;padding:10px 17px;min-height:44px;cursor:pointer}
.image-viewer footer{position:absolute;bottom:15px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#d0d7c9}
.image-viewer footer a{border-bottom:1px solid #939c8b;padding:8px 0}
.skip-link{position:fixed;top:-100px;left:20px;z-index:1000;background:#fff;color:#222;padding:10px 20px}
.skip-link:focus{top:10px}
.page-top{position:fixed;right:22px;bottom:22px;z-index:18;background:#f5f3ee;color:#252c25;border:1px solid #8a9281;min-height:44px;padding:0 15px;font-size:12px;cursor:pointer}
.mobile-nav{visibility:hidden;pointer-events:none}
.mobile-nav.is-open{visibility:visible;pointer-events:auto}
@media(min-width:981px){.library-toolbar{position:relative}.version-header+.mobile-nav{display:none}}
@media(max-width:1100px){.desktop-nav{gap:18px}.desktop-nav a{font-size:12px}.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.library-toolbar{grid-template-columns:1fr}.library-detail-layout{grid-template-columns:210px minmax(0,1fr);gap:25px}.version-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 :root{--header-height:68px;--page-gutter:22px}
 .site-header{gap:16px}.brand span{font-size:22px}.brand small{font-size:8px;letter-spacing:.06em}
 .desktop-nav{display:none}.menu-button{display:block;width:44px;height:44px;padding:10px}.language-menu{margin-left:auto}
 .mobile-nav{top:var(--header-height);padding:26px var(--page-gutter) 35px;background:#f5f3ee;color:#252722;max-height:calc(100dvh - var(--header-height));overflow:auto;place-content:start stretch;gap:0}
 .mobile-nav a{color:#252722;font-size:19px;padding:15px 0;border-bottom:1px solid rgba(37,39,34,.16);font-weight:400;min-height:52px}
 body.nav-open .site-header{background:#f5f3ee;color:#252722;border-bottom:1px solid rgba(37,39,34,.16)}
 body.nav-open .site-header .menu-button,body.nav-open .site-header .language-menu summary{color:#252722;border-color:rgba(37,39,34,.24)}
 .section-pad{padding:65px var(--page-gutter)}
 .hero{height:90svh;min-height:650px;max-height:900px}.hero-content{bottom:170px;left:22px;right:22px}.hero-copy{font-size:clamp(43px,11.5vw,76px);line-height:1.07;max-width:600px}.hero-content .hero-eyebrow{font-size:9px;letter-spacing:.18em;margin-bottom:16px}.hero-subtitle{font-size:12px;letter-spacing:.1em;margin:22px 0}.hero-proof{left:22px;right:22px;bottom:25px;gap:6px;padding-top:18px;display:grid;font-size:10px}.hero-actions .editorial-link{min-width:128px;font-size:12px}.hero-actions{gap:24px}
 .color-card-showcase{gap:30px}.color-card-showcase-copy{padding:0}.color-card-showcase-copy h2{font-size:36px}.color-card-showcase-copy p{font-size:14px}.color-card-showcase-media{aspect-ratio:1.15}
 .craft{gap:20px}.craft-panel{padding:15px 0}.craft-panel h2,.home-version-copy h2{font-size:30px}.section-head{gap:18px}.section-head h2{font-size:30px}.section-head p{font-size:14px}.space-strip{gap:18px}.metrics{grid-template-columns:repeat(2,1fr)}
 .contact-inner{gap:35px}.contact h2{font-size:32px}.contact-form input,.contact-form textarea{font-size:16px}.site-footer{padding:36px 22px;display:grid;gap:20px}.site-footer p{margin:0}.footer-contact{flex-wrap:wrap}
 .color-library-hero{grid-template-columns:1fr 82px;gap:12px 18px;padding:34px 22px 28px}.color-library-hero h1{font-size:35px}.color-library-hero .section-kicker{font-size:9px;margin-bottom:10px}.color-library-hero>p{grid-column:1/-1;grid-row:2;font-size:12px;line-height:1.8}.color-library-cover{grid-row:1;width:82px;height:94px;grid-column:2;min-height:0}.color-library-cover img{height:94px}
 .library-toolbar{padding:20px 22px;gap:18px}.library-search-area{grid-template-columns:1fr auto;gap:9px}.library-search input{font-size:16px;height:46px}.visual-search-trigger{width:auto;min-height:46px;font-size:12px;padding:0 13px;gap:10px}.library-filter-row{display:block}.library-filter-label{display:block;margin-bottom:7px}.library-style-filter,.library-color-filter{display:flex;flex-wrap:wrap;gap:5px}.library-style-button,.library-color-button{min-height:34px;padding:5px 8px;font-size:11px}.library-count{padding-top:12px}
 .library-grid{padding:26px 22px 40px;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}.library-series-title small{display:none}.library-series-title{display:block}.library-series-title strong{font-size:23px}.library-card-body{padding-top:12px}.library-series-footer{display:grid;gap:5px;margin-top:9px;padding-top:9px}.library-text-link{font-size:11px}.library-series-count{font-size:10px}.library-more{margin-bottom:45px}
 .library-detail-hero{padding:22px 22px 25px}.library-detail-hero h1{font-size:48px}.library-detail-hero p{font-size:12px}.library-detail-layout{padding:0 22px 55px;display:block}.library-detail-panel{position:static;padding:12px 0 24px;margin-bottom:26px}.library-detail-panel .library-specs{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.library-detail-panel .library-specs div{display:block;padding:9px 0}.library-specs dd{font-size:11px;margin-top:4px}.library-side-panel{display:none}.library-detail-grid{gap:25px;grid-template-columns:1fr}.library-model-card>strong{font-size:20px}.library-model-images img{aspect-ratio:1}.back-link{margin-bottom:16px}
 .versions-hero{padding-top:40px;padding-bottom:30px}.versions-hero h1{font-size:36px}.versions-hero-grid{gap:18px}.version-system{padding-top:10px}.version-grid{grid-template-columns:1fr;gap:42px}.version-cover{aspect-ratio:1.2}.version-copy h2{font-size:26px}.version-next h2{font-size:28px}.version-detail-hero{padding-top:25px}.version-detail-grid{gap:28px}.version-detail-grid h1{font-size:35px}.version-gallery{grid-template-columns:1fr}.version-placeholder{padding-top:0}
 .visual-search-modal{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;margin:0}.visual-search-modal .visual-search{padding:65px 22px 40px}.visual-search-head h2{font-size:34px}.visual-search-head p{font-size:13px}.visual-mode button{font-size:12px}.visual-search-controls{min-height:0;gap:22px}.visual-search-media{padding:10px 0 22px}.visual-crop,.visual-upload{min-height:260px}.visual-crop canvas{height:280px}.visual-results{margin-top:30px}
 .image-viewer{width:100vw;height:100dvh;max-height:100dvh;max-width:none;margin:0;padding:75px 12px 75px}.image-viewer header{left:16px;right:16px}.image-viewer footer{left:16px;right:16px;font-size:11px}.page-top{right:12px;bottom:12px}
}

/* Homepage material archive — editorial catalog layout. */
.color-card-showcase{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center;
  gap:clamp(40px,6vw,90px);
  min-height:0;
  margin:0;
  padding:100px var(--page-gutter) 40px;
  overflow:visible;
  color:var(--ink);
  background:var(--paper);
  border-radius:0;
}
.color-card-showcase::after{display:none}
.color-card-showcase-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:none;
  min-height:0;
  padding:24px 0;
  background:transparent;
  color:var(--ink);
}
.color-card-showcase-copy .section-kicker{margin-bottom:24px;color:#8b7358}
.color-card-showcase-copy h2{
  max-width:520px;
  margin:0 0 26px;
  color:#3c352f;
  font-size:clamp(34px,3.5vw,52px);
  line-height:1.28;
}
.color-card-showcase-copy p{
  max-width:470px;
  margin:0 0 34px;
  color:#6c665e;
  font-size:14px;
  line-height:2;
}
.color-card-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0 0 38px;
  border-top:1px solid var(--line);
  border-bottom:0;
}
.color-card-facts>div{padding:18px 12px 18px 0}
.color-card-facts>div+div{padding-left:16px;border-left:0}
.color-card-facts strong{display:block;font:400 clamp(22px,2vw,30px)/1.2 Georgia,serif;color:#3c352f}
.color-card-facts span{display:block;margin-top:7px;color:#746e65;font-size:11px;line-height:1.5}
.color-card-showcase-copy .editorial-link{
  align-self:flex-start;
  min-width:190px;
  padding:12px 0;
  color:#3c352f;
  border:0;
  border-bottom:1px solid #a39785;
}
.color-card-showcase-copy .editorial-link:hover{background:transparent;color:#8b623e;border-color:#8b623e}
.color-card-catalog{
  display:grid;
  grid-template-rows:560px auto;
  min-width:0;
  min-height:0;
  background:transparent;
}
.color-card-showcase-media{
  position:relative;
  inset:auto;
  display:block;
  width:100%;
  min-width:0;
  height:auto;
  min-height:390px;
  aspect-ratio:auto;
  border-radius:24px;
  overflow:hidden;
  background:#4a4339;
}
.color-card-showcase-media img{
  width:100%;
  min-width:0;
  height:100%;
  object-fit:cover;
  object-position:center 54%;
  filter:saturate(.84) contrast(1.04) brightness(.88);
  transform:scale(1.01);
  transition:transform 800ms ease,filter 360ms ease;
}
.color-card-showcase-media:hover img{filter:saturate(.92) contrast(1.04) brightness(.94);transform:scale(1.035)}
.color-card-showcase-media>span{
  position:absolute;
  left:22px;
  bottom:18px;
  color:#f5f3ee;
  font:500 9px/1.4 Arial,sans-serif;
  letter-spacing:.19em;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.color-card-swatch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:#d7d3c9}
.color-card-swatch-grid a{position:relative;display:block;min-width:0;overflow:hidden;background:#e5e1d8}
.color-card-swatch-grid img{width:100%;height:100%;object-fit:cover;transition:transform 550ms ease,filter 300ms ease}
.color-card-swatch-grid a:hover img{transform:scale(1.045);filter:contrast(1.03)}
.color-card-swatch-grid span{
  position:absolute;
  left:10px;
  bottom:9px;
  padding:4px 6px;
  background:rgba(28,31,27,.82);
  color:#fff;
  font:500 8px/1 Arial,sans-serif;
  letter-spacing:.06em;
}
.color-card-catalog-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 4px 0;
  color:#666a60;
  font-size:10px;
  letter-spacing:.08em;
}
@media(max-width:980px){
  .color-card-showcase{grid-template-columns:1fr;padding-block:70px 24px;gap:32px}
  .color-card-showcase-copy{min-height:0;padding:0}
  .color-card-catalog{min-height:0;grid-template-rows:480px auto}
}
@media(max-width:760px){
  .color-card-showcase{width:auto;max-width:none;margin:0;padding:58px 22px 18px;background:var(--paper);gap:30px}
  .color-card-showcase-copy{padding:0;background:transparent}
  .color-card-showcase-copy .section-kicker{margin-bottom:15px}
  .color-card-showcase-copy h2{margin-bottom:20px;font-size:35px;line-height:1.35}
  .color-card-showcase-copy p{margin-bottom:26px;font-size:13px;line-height:1.9}
  .color-card-facts{margin-bottom:27px}
  .color-card-facts>div{padding:14px 6px 14px 0}
  .color-card-facts>div+div{padding-left:10px}
  .color-card-facts strong{font-size:20px}
  .color-card-facts span{font-size:9px}
  .color-card-showcase-copy .editorial-link{min-height:40px;padding:10px 0}
  .color-card-catalog{grid-template-rows:350px auto;background:transparent}
  .color-card-showcase-media{height:auto;min-height:0;border-radius:18px}
  .color-card-showcase-media>span{left:15px;bottom:13px;font-size:8px}
  .color-card-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,1fr)}
  .color-card-catalog-note{padding:14px 2px 0;font-size:9px;gap:8px}
}
/* Color archive cover: a full editorial image, not a thumbnail. */
.color-library-hero{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:20px clamp(32px,5vw,80px);padding-block:48px;}
.color-library-cover{width:100%;height:clamp(280px,26vw,390px);min-height:0;border-radius:24px;overflow:hidden;}
.color-library-cover img{width:100%;height:100%;object-fit:cover;object-position:center 58%;border-radius:inherit;}
@media(max-width:760px){
 .color-library-hero{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:18px;padding:30px 22px;}
 .color-library-hero>div{grid-column:1;grid-row:1;}
 .color-library-hero>p{grid-column:1;grid-row:2;font-size:13px;}
 .color-library-cover{grid-column:1;grid-row:3;width:100%;height:190px;border-radius:18px;margin-top:6px;}
 .color-library-cover img{height:100%;}
}
/* Shared mobile navigation: quiet editorial hierarchy and tactile feedback. */
@media(max-width:980px){
 .mobile-nav{padding:24px var(--page-gutter) max(24px,env(safe-area-inset-bottom));background:#f5f3ee;align-content:start;gap:0;overscroll-behavior:contain;transform:translateY(-8px);transition:opacity .26s ease,transform .26s ease,visibility .26s;}
 .mobile-nav-caption{font-size:10px;letter-spacing:.2em;color:#938571;padding:0 0 18px;}
 .mobile-nav a{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;column-gap:12px;min-height:57px;padding:14px 5px;border-bottom:1px solid #ded8cd;font-family:Georgia,"Songti SC","Noto Serif SC",SimSun,serif;font-size:21px;line-height:1.35;letter-spacing:.035em;color:#38382f;opacity:0;transform:translateY(7px);transition:opacity .3s ease,transform .3s ease,background .15s,color .15s;}
 .mobile-nav a::before{content:attr(data-nav-number);font-family:Arial,sans-serif;font-size:9px;letter-spacing:.06em;color:#a09687;}
 .mobile-nav a::after{content:none;display:none;}
 .mobile-nav.is-open a{opacity:1;transform:none;transition-delay:calc(var(--nav-order,0)*22ms);}
 .mobile-nav a[aria-current=page]{color:#8a6f48;}
 .mobile-nav a[aria-current=page]::before{color:#8a6f48;}
 .mobile-nav a:active{background:#eae5db;color:#786347;transition-delay:0s;}

 .mobile-nav-signature{padding-top:27px;font-size:8px;letter-spacing:.17em;color:#a09687;}
 body.nav-open .site-header{border-bottom-color:transparent;}
 .menu-button[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg);}
 .menu-button[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg);}
}
@media(max-width:360px){.mobile-nav a{min-height:51px;font-size:19px;padding-block:12px}.mobile-nav-caption{padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* home-showcase.css */
/* Homepage editorial rhythm — shared by Chinese and English. */
.home-page { --showcase-radius: 24px; }
.home-page :is(.home-versions, .material-spotlight, .craft, .capacity, .spaces) { background: var(--paper, #f5f3ee); padding-block: clamp(64px, 7vw, 104px); }
.home-page :is(.home-versions, .material-layout, .craft) { gap: clamp(40px, 6vw, 90px); align-items: center; }
.home-page :is(.home-version-copy, .craft-panel) { padding-block: 12px; }
.home-page :is(.home-version-copy h2, .craft-panel h2, .section-head h2) { max-width: 620px; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.4; letter-spacing: -.025em; color: #3c352f; text-wrap: balance; }
.home-page :is(.home-version-copy > p, .craft-panel > p, .section-head > p) { color: #6c665e; line-height: 1.95; font-size: 15px; }
.home-page :is(.home-version-media, .craft-media) { min-height: 0; height: auto; border-radius: var(--showcase-radius); overflow: hidden; }
.home-page :is(.home-version-media img, .craft-media img) { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 1 / 1.06; object-fit: cover; border-radius: inherit; filter: none; }
.home-page :is(.home-version-media, .craft-media, .capacity-card, .space-card)::after { display: none; }
.home-page .version-points { margin-block: 26px 30px; }
.home-page .version-points li { padding-block: 13px; color: #6c665e; line-height: 1.7; }
.home-page .editorial-link { border-radius: 999px; padding: 13px 22px; }
.home-page .material-feature { position: static; }
.home-page .material-feature > div { border: 0; padding: 0; margin-bottom: 28px; }
.home-page .material-feature h3 { color: #3c352f; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.45; }
.home-page .material-feature img { display: block; border-radius: var(--showcase-radius); aspect-ratio: 7 / 6; filter: none; }
.home-page .material-summary { color: #6c665e; line-height: 1.95; }
.home-page .material-row { padding-block: 23px; border-color: #dcd8d0; }
.home-page .material-row > span { color: #988979; font-size: 12px; }
.home-page .material-row h3 { color: #3c352f; }
.home-page .material-row p { color: #6c665e; line-height: 1.85; }
.home-page .craft-media { order: 2; }
.home-page .craft-media img { transform: scale(1.14); }
.home-page .home-version-copy h2 { max-width: none; }
.home-page .craft-panel { order: 1; }
.home-page .quality-list div { grid-template-columns: 1fr; gap: 7px; padding-block: 19px; border-color: #dcd8d0; }
.home-page .quality-list dt { color: #3c352f; font-size: 18px; }
.home-page .quality-list dd { color: #6c665e; line-height: 1.85; }
.home-page .section-head { align-items: end; margin-bottom: 36px; }
.home-page .capacity-grid { gap: 32px; }
.home-page .capacity-card { display: block; background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.home-page .capacity-card > img { width: 100%; height: auto; min-height: 0; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--showcase-radius); filter: none; }
.home-page .capacity-card > div { background: transparent; padding: 24px 4px 0; }
.home-page .capacity-card h3 { font-size: clamp(24px, 2.2vw, 32px); color: #3c352f; line-height: 1.5; }
.home-page .capacity-card p { color: #6c665e; line-height: 1.9; }
.home-page .metrics { margin-top: 46px; border-bottom: 0; border-color: #dcd8d0; }
.home-page .metrics > div { border: 0; min-height: 0; padding: 28px 12px 0; }
.home-page .metrics strong { font-size: clamp(28px, 3vw, 42px); color: #675847; }
.home-page .metrics span { color: #6c665e; }
.home-page .space-strip { gap: 28px; align-items: start; }
.home-page .space-card { min-height: 0; overflow: visible; border-radius: 0; background: transparent; }
.home-page .space-card img { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--showcase-radius); }
.home-page .space-card h3 { position: static; margin: 20px 2px 0; color: #3c352f; font-size: 24px; }
.home-page .editorial { background: #f5f3ee; color: #3c352f; min-height: 360px; padding-block: 64px 100px; }
.home-page .editorial-copy { max-width: 780px; }
.home-page .editorial h2 { color: #3c352f; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.45; }
.home-page .editorial p { color: #6c665e; line-height: 1.95; }
.home-page .editorial-lines { opacity: .12; }
.home-page .contact { border-radius: 32px 32px 0 0; }
.home-page .contact button[type="submit"] { border-radius: 999px; }
@media (max-width: 980px) {
  .home-page :is(.home-versions, .material-layout, .craft) { grid-template-columns: 1fr; }
  .home-page :is(.home-version-media img, .craft-media img) { aspect-ratio: 4 / 3; }
  .home-page :is(.craft-media, .craft-panel) { order: 0; }
  .home-page .space-strip { gap: 18px; }
}
@media (max-width: 760px) {
  .home-page { --showcase-radius: 18px; }
  .home-page :is(.home-versions, .material-spotlight, .craft, .capacity, .spaces) { padding: 54px 22px; }
  .home-page :is(.home-versions, .material-layout, .craft) { gap: 30px; }
  .home-page :is(.home-version-copy h2, .craft-panel h2, .section-head h2) { font-size: 30px; }
  .home-page .section-head { display: block; margin-bottom: 28px; }
  .home-page .section-head > p { margin-top: 20px; }
  .home-page .capacity-grid { grid-template-columns: 1fr; gap: 36px; }
  .home-page .capacity-card > div { padding-top: 18px; }
  .home-page .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
  .home-page .metrics > div { padding-left: 0; }
  .home-page .space-strip { display: grid; grid-template-columns: 1fr; gap: 30px; overflow: visible; }
  .home-page .space-card img { aspect-ratio: 5 / 4; }
  .home-page .space-card h3 { font-size: 22px; margin-top: 14px; }
  .home-page .editorial { min-height: 0; padding: 44px 22px 64px; }
  .home-page .contact { border-radius: 24px 24px 0 0; }
}
.home-page .hero-copy{white-space:nowrap;font-style:italic}
.home-page .hero-media{background:linear-gradient(90deg,rgba(18,17,15,.72),rgba(18,17,15,.3) 44%,rgba(18,17,15,.08)),url('/assets/hero-original-haolun-20260922.webp') center/cover;transform:none;animation:none}
@media(max-width:800px){.home-page .hero-media{background:linear-gradient(180deg,rgba(18,17,15,.18),rgba(18,17,15,.82)),linear-gradient(90deg,rgba(18,17,15,.48),rgba(18,17,15,.08)),url('/assets/hero-original-haolun-20260922.webp') 67% center/cover}}
.home-page .home-version-media img{aspect-ratio:3/2;object-fit:contain}
/* English keeps the same composition, with Latin typography instead of CJK spacing. */
html[lang="en"] .home-page :is(h2,h3){font-family:Georgia,"Times New Roman",serif;letter-spacing:-.02em}
html[lang="en"] .home-page .hero-subtitle{letter-spacing:.035em}
html[lang="en"] .home-page .color-card-showcase-copy h2{line-height:1.3}
@media(max-width:800px){
 .home-page .hero-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px}
 .home-page .hero-actions .editorial-link{min-width:0;width:auto;flex:0 0 auto;gap:6px;padding:9px 10px;min-height:36px;white-space:nowrap;letter-spacing:0;font-size:11px;justify-content:center}
 .home-page .hero-actions .editorial-link::after{margin-left:0;flex-shrink:0;width:13px}
 html[lang="en"] .home-page .hero-actions .editorial-link{min-width:0;padding:12px 0;gap:6px;letter-spacing:0;text-transform:none;white-space:normal;font-size:11px}
}
@media(max-width:360px){.home-page .hero-actions{gap:7px}.home-page .hero-actions .editorial-link{padding-inline:5px;font-size:11px}}
@media(max-width:800px){.home-page .hero-copy{font-size:clamp(28px,9.5vw,64px);line-height:1.12;letter-spacing:-.035em}}

/* materials-home.css */
/* A visible editorial entrance on desktop and mobile homepages. */
.home-page .home-material-journal{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7%;max-width:1520px;margin:auto;padding:76px var(--page-gutter);background:#f5f2ed;color:#29251f}
.home-material-photo{display:block;overflow:hidden}.home-material-photo img{display:block;width:100%;height:auto;aspect-ratio:1.25;object-fit:cover;transition:transform .4s}
.home-material-photo:hover img{transform:scale(1.025)}
.home-material-copy .home-material-kicker{font:400 10px/1.7 Arial,sans-serif;color:#8e7559;letter-spacing:.19em;margin:0 0 20px}
.home-material-copy .home-material-label{font-size:12px;letter-spacing:.14em;color:#786b5c;margin:0 0 14px}
.home-material-copy h2{font:400 clamp(27px,3vw,44px)/1.5 "Songti SC","SimSun",Georgia,serif;letter-spacing:.02em;margin:0 0 22px;color:#29251f}
.home-material-copy>p:not(.home-material-kicker):not(.home-material-label){font-size:13px;line-height:2;color:#786e61;max-width:360px;margin:0 0 24px}
.home-material-link{display:inline-flex;align-items:center;gap:38px;justify-content:space-between;min-height:44px;padding:10px 0;border-bottom:1px solid #9e907d;font-size:12px;text-decoration:none;color:inherit}
.home-material-link:hover{color:#8e7559}
@media(max-width:760px){.home-page .home-material-journal{grid-template-columns:1fr;gap:26px;padding:38px 20px 44px}.home-material-photo img{aspect-ratio:1.35}.home-material-copy h2{font-size:28px}.home-material-copy .home-material-kicker{font-size:9px;margin-bottom:16px}.home-material-copy>p:not(.home-material-kicker):not(.home-material-label){max-width:none;font-size:12px}}
@media(prefers-reduced-motion:reduce){.home-material-photo img{transition:none}.home-material-photo:hover img{transform:none}}

/* contact-social.css */
.contact .contact-inner{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px}
.mobile-contact-shortcut{display:none}
@media(max-width:800px){
 .mobile-contact-shortcut{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom));z-index:19;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:66px;min-height:68px;padding:10px 4px;border:1px solid #aabd9d;border-radius:15px;background:#344d3e;color:#fff;text-decoration:none;font-size:12px;line-height:1.3;box-shadow:0 4px 18px #16281c30;-webkit-tap-highlight-color:transparent}
 .mobile-contact-shortcut:focus-visible{outline:2px solid #b49765;outline-offset:3px}
 .mobile-contact-shortcut[hidden],.nav-open .mobile-contact-shortcut{display:none}
}
.contact-inner>.contact-direct{margin-top:0;flex-direction:column;align-items:flex-start;gap:12px}
.contact-social{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px;padding-top:32px;border-top:1px solid #626e5e}
@media(max-width:800px){.contact .contact-inner{grid-template-columns:1fr;gap:24px}}
.contact-social-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;min-width:0;gap:12px;padding:25px;border:1px solid #78836f;border-radius:18px;background:#313d30;color:#f6f4ee;text-decoration:none;font:inherit;cursor:pointer;transition:background .2s,border-color .2s}
.contact-social-card:hover{background:#3c4b39;border-color:#bbc5af}
.contact-social-card:focus-visible{outline:2px solid #e1d1a9;outline-offset:4px}
.contact-social-card .social-platform{display:block;font-size:12px;letter-spacing:.15em;color:#d7c6a8;margin-bottom:8px}
.contact-social-card strong{display:block;font-size:19px;font-weight:500;overflow-wrap:anywhere}
.contact-social-card small{display:block;font-size:12px;color:#d4dacd;margin-top:8px}
.contact-social-card p{font-size:14px;line-height:1.8;margin:8px 0}
.contact-social-card img{height:155px;width:100%;object-fit:contain;background:#fff;border-radius:10px;display:block}
.contact-social-card .social-action{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:auto;padding-top:14px;font-size:13px;color:#f2eee5}
.contact-social-card .social-action b{font-size:20px;font-weight:400}
.social-actions{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:14px;grid-column:1/-1;font-size:13px}
.social-actions a{color:#f6f4ee;text-decoration:none;border-bottom:1px solid #aeb8a4;padding-bottom:3px}
.social-actions button{color:#e4e9dc;border:1px solid #91a184;border-radius:20px;background:transparent;padding:7px 12px;font:inherit;cursor:pointer}
.contact-code-dialog{padding:0;border:0;border-radius:18px;background:#f8f7f2;color:#29332c;width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto}
.contact-code-dialog::backdrop{background:rgba(12,20,14,.78)}
.contact-code-content{position:relative;padding:24px;text-align:center}
.contact-code-close{position:absolute;right:10px;top:10px;width:42px;height:42px;border:0;border-radius:50%;background:#e9ecdf;color:#29332c;font:28px/1 sans-serif;cursor:pointer}
.contact-code-dialog h2{font-size:23px;margin:0 42px 8px;font-weight:500}
.contact-code-instructions{font-size:13px;line-height:1.7;margin:0 0 16px;color:#626a5d}
.contact-code-dialog img{display:block;width:100%;max-height:65dvh;object-fit:contain;background:#fff}
.contact-code-download{display:inline-block;margin-top:18px;padding:10px 24px;border:1px solid #526b45;border-radius:24px;color:#354a2b;text-decoration:none;font-size:14px}
@media(max-width:800px){.contact-social{grid-template-columns:1fr;gap:14px;margin-top:32px}.contact-social-card{padding:20px}.social-qr{display:grid;grid-template-columns:minmax(0,1fr) 100px;align-items:center}.contact-social-card img{height:128px}.social-qr .social-action{grid-column:1/-1;padding-top:0}.contact-code-content{padding:24px 16px 18px}}
.home-page .contact{background:#eae6de;color:#3c352f;border-top:1px solid #ddd6ca}
.home-page .contact h2{color:#3c352f}
.home-page .contact .section-kicker{color:#8b7358}
.home-page .contact p,.home-page .contact-direct small{color:#6c665e}
.home-page .contact-direct a{color:#514737;border-color:#ada18d}
.contact-social{border-top-color:#cec6b8;gap:22px}
.contact-social-card{background:#faf8f3;color:#3c352f;border:1px solid #d5ccbd;border-radius:16px;box-shadow:0 3px 14px #5c4c3410}
.contact-social-card:hover{background:#fffdf8;border-color:#a5957b}
.contact-social-card:focus-visible{outline-color:#8b7358}
.contact-social-card .social-platform{color:#8b7358;font-size:12px;letter-spacing:.12em}
.contact-social-card strong{color:#3c352f;font-size:18px}
.contact-social-card small,.contact-social-card p{color:#746b5e}
.contact-social-card img{border:1px solid #e8e2d8;background:#fff;border-radius:8px}
.contact-social-card .social-action,.social-actions a{color:#66523a}
.social-actions a{border-color:#b8a991}
.social-actions button{color:#66523a;border-color:#c6b99f;min-height:40px;padding:8px 14px}
.contact-code-close{background:#eae4d9;color:#5b503f}
.contact-code-download{border-color:#b8a78c;color:#66523a}
@media(max-width:800px){
 .mobile-contact-shortcut{bottom:calc(28px + env(safe-area-inset-bottom));width:64px;min-height:66px;border-radius:14px;background:#f7f3eb;color:#655640;border:1px solid #c8bca6;box-shadow:0 4px 20px #3d34252b}
 .mobile-contact-shortcut:hover{background:#fffcf6}
 .contact-social-card{padding:20px;gap:14px}
 .contact-social-card strong{font-size:17px}
 .social-qr{grid-template-columns:minmax(0,1fr) 92px}
}

/* Quiet, consistent social entrances; QR posters live in the dialog. */
.contact-social{gap:0;padding-top:0;margin-top:36px;border-bottom:1px solid #cec6b8}
.contact-social-card{padding:28px;gap:0;border:0;border-right:1px solid #cec6b8;border-radius:0;background:transparent;box-shadow:none;transition:background .2s ease}
.contact-social-card:first-child{padding-left:0}
.contact-social-card:last-child{border-right:0;padding-right:0}
.contact-social-card:hover{background:#ffffff30}
.contact-social-card .social-platform{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 22px;font-size:20px;letter-spacing:.04em;color:#3c352f}
.contact-social-card .social-platform{justify-content:space-between;gap:10px;width:100%}
.contact-social-card .social-brand-icon{width:28px;height:28px;flex:none;margin-left:auto;object-fit:contain;border:0;border-radius:0;background:transparent;opacity:1;filter:saturate(.72) brightness(.88)}
.contact-social-card .social-brand-red{width:48px;height:28px}
.contact-social-card strong{font-size:14px;font-weight:400;line-height:1.6}
.contact-social-card p{font-size:12px;line-height:1.8;margin:8px 0 24px}
.contact-social-card .social-action,.contact-social-card .social-actions{min-height:32px;padding:0;margin-top:auto;font-size:12px}
.social-actions a{border:0;padding:0}
.social-actions button{min-height:32px;padding:4px 0;border:0;border-radius:0;border-bottom:1px solid #b8a991;font-size:12px}
.contact-social-card:focus:not(:focus-visible),.social-actions button:focus:not(:focus-visible){outline:none}
@media(max-width:800px){
 .contact-social{gap:0;margin-top:26px}
 .contact-social-card,.contact-social-card:first-child,.contact-social-card:last-child{padding:22px 0;border-right:0;border-bottom:1px solid #cec6b8}
 .contact-social-card:last-child{border-bottom:0}
 .contact-social-card .social-platform{font-size:19px;margin-bottom:12px}
 .contact-social-card p{margin:5px 0 14px}
 .contact-social-card .social-action,.contact-social-card .social-actions{min-height:28px}
}
@media(prefers-reduced-motion:reduce){.contact-social-card{transition:none}}

/* i18n.css */
.site-language{display:inline-flex;align-items:center;margin:0 0 0 12px;flex-shrink:0}.site-language select{font:12px/1.4 Arial,sans-serif;color:#5a5144;background:#faf8f2;border:1px solid #cfc7ba;border-radius:4px;padding:9px 8px;width:auto;min-height:40px}.sr-language{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}html[lang=en] .product-intro h1{font-size:clamp(30px,3.4vw,48px)}html[lang=en] .product-card-heading{align-items:start}html[lang=en] .product-card-heading span{flex-shrink:0}html[lang=en] .desktop-nav{gap:clamp(12px,1.5vw,24px)}html[lang=en] .library-filter-label{min-width:90px}html[lang=en] .library-try-on-entry strong{letter-spacing:0}html[lang=en] .contact-social-card strong{overflow-wrap:anywhere}
@media(max-width:800px){.site-language{margin-left:auto}.site-language select{max-width:98px}html[lang=en] .product-card h2{font-size:22px}html[lang=en] .library-search-area{grid-template-columns:minmax(0,1fr) auto}html[lang=en] .library-search input{min-width:0}html[lang=en] .visual-search-trigger{padding:0 10px}html[lang=en] .mobile-contact-shortcut{font-size:11px}html[lang=en] .tryon-step-dock button{font-size:12px}html[lang=en] .product-intro h1{font-size:30px}html[lang=en] .product-detail-copy h1{font-size:32px}.tryon-mobile-flow header{gap:8px!important}.tryon-mobile-flow header .site-language{order:2}.tryon-mobile-flow header .brand{order:0}.tryon-mobile-flow header .badge{order:1}.tryon-mobile-flow header>a:not(.brand),.tryon-mobile-flow header>.text-button{order:3}}
main>.site-language{display:flex;justify-content:flex-end;margin:0 0 18px;width:100%}main>.site-language+small{display:block}
/* Arrow-free navigation, including legacy markup and native dropdown indicators. */
.halone-arrow,img[src*="/ui/arrow-"],img[src*="/ui/chevron-"]{display:none!important}
.editorial-link::after,.language-menu summary::after,.mobile-nav a::after,.studio-mobile-links a::after{content:none!important;display:none!important}
select{appearance:none;-webkit-appearance:none;background-image:none!important;cursor:pointer}
.site-language select{padding-right:8px}
summary{list-style:none}summary::-webkit-details-marker{display:none}summary::marker{content:""}
/* Shared interaction treatment: no colored outer rings, including dialog autofocus. */
html body :is(button,a,summary,select,input,textarea,[tabindex]):is(:focus,:focus-visible),
html body .library-search-combined:focus-within{outline:none!important;box-shadow:none!important}
@media(hover:hover) and (pointer:fine){html body :is(button,a,summary,[tabindex]):focus-visible{text-decoration:underline;text-underline-offset:4px}html body :is(input,textarea,select):focus-visible{border-color:#77786e}}

/* mobile-site.css */
/* Monochrome mobile UI. Actual fabric colors, photos and desktop styles are preserved. */
.site-header>.brand,body>header>.brand{display:flex;align-items:center;justify-content:center;align-self:center;gap:0}
.mobile-site-nav{display:none}
.mobile-menu-backdrop,.mobile-menu-icon{display:none}
@media(max-width:760px){
 :root{--paper:#fff;--paper-deep:#f5f5f5;--white:#fff;--ink:#111;--muted:#777;--line:#e5e5e5;--accent:#111;--olive:#111;--copper:#777;--sand:#f5f5f5;--mobile-nav-height:67px}
 body.mobile-site{color:#111;background:#fff;padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))}
 body.mobile-site :is(main,section,aside,article,dialog,footer){background-color:#fff!important;color:#111!important;border-color:#e5e5e5!important}
 body.mobile-site *{color:inherit!important;border-color:#e5e5e5}
 body.mobile-site :is(button,input,select,textarea,.panel,.library-card,.library-model-card,.product-series-row,.version-cover,.color-card-showcase-media,.case-picker,.composition-panel,.visual-search-modal,.studio-nav-dialog){border-radius:0!important;box-shadow:none!important}
 body.mobile-site :is(.site-header,.site-header.is-scrolled,.site-header.version-header,body>header){background:#fff!important;color:#111!important;border-bottom-color:#e5e5e5!important}
 body.mobile-site :is(.brand,.site-language,.site-language select,.menu-button,.studio-home,.studio-menu){color:#111!important}
 body.mobile-site .site-language select{background-color:#fff;border-color:#ddd}
 body.mobile-site :is(.header-home,.studio-home){display:none!important}
 body.mobile-site :is(.section-kicker,.eyebrow,.library-series-title small,.version-copy>span,.library-series-count,.library-count>span,.product-counter,.product-card-heading span,.product-disclaimer,.hint,.more-feedback){color:#777!important}
 body.mobile-site :is(.mobile-nav,.studio-nav-dialog,.composition-panel,.visual-search-modal,.visual-source-picker,.case-picker,.image-viewer){background:#fff!important;color:#111!important;border-color:#ddd!important}
 body.mobile-site :is(.mobile-nav a,.studio-mobile-links a){color:#111!important;border-color:#e5e5e5!important}
 body.mobile-site :is(.mobile-nav-caption,.mobile-nav-signature,.studio-nav-top small){color:#888!important}
 body.mobile-site :is(.mobile-nav a,.studio-mobile-links a)[aria-current=page]{font-weight:600;color:#000!important}
 body.mobile-site input:not([type=checkbox]):not([type=radio]),body.mobile-site select,body.mobile-site textarea{background-color:#fff;color:#111;border-color:#d9d9d9;accent-color:#111}
 body.mobile-site :is(input[type=checkbox],input[type=radio]){accent-color:#111}
 body.mobile-site :is(.library-search-combined,.product-tools input,.upload,.filters input,.filters select){background:#f7f7f7!important;border-color:#e0e0e0!important;color:#111!important;border-radius:0!important}
 body.mobile-site input::placeholder{color:#999!important}
 body.mobile-site :is(.library-search-combined .visual-search-trigger,.composition-filter summary,.library-reset,.product-reset){color:#666!important;border-color:#ddd!important}
 body.mobile-site .composition-filter summary span{color:#666!important}
 body.mobile-site .composition-filter summary img{filter:grayscale(1)!important}
 body.mobile-site :is(.composition-panel label:has(input:checked),.composition-panel label:hover){background:#f4f4f4!important;color:#111!important}
 body.mobile-site :is(.library-series-category,.tryon-series-category,.product-series-links a,.product-series-list a,.library-tags span){background:#f2f2f2!important;color:#666!important;border-color:#e5e5e5!important;border-radius:0!important}
 body.mobile-site :is(.library-card,.library-model-card,.library-detail-panel,.product-card,.product-detail-copy,.version-copy,.version-system,.version-placeholder,.version-next,.library-detail-hero,.library-detail-grid,.versions-hero,.color-library-hero,.library-toolbar,.product-intro,.product-tools,.panel,.filters,.results-line){background:#fff!important;color:#111;border-color:#e5e5e5!important}
 body.mobile-site :is(.library-card-body,.library-series-title,.library-series-footer,.library-detail-panel>div,.library-specs div){border-color:#e5e5e5!important}
 body.mobile-site :is(.library-text-link,.back-link,.product-back,.version-detail-link,.library-reset){color:#333!important}
 body.mobile-site :is(.library-style-button,.library-color-button,.product-categories button,.product-brands button,.case-picker-brands button,.tryon-catalog-filters button,.color-filter button,.style-filter button){background:#fff!important;border-color:#e8e8e8!important;color:#777!important;border-radius:0!important}
 body.mobile-site :is(.library-style-button,.library-color-button,.product-categories button,.product-brands button,.case-picker-brands button,.tryon-catalog-filters button,.color-filter button,.style-filter button):is(.is-active,[aria-pressed=true]){background:#f3f3f3!important;border-color:#111!important;color:#111!important}
 body.mobile-site .mobile-catalog-categories .library-style-button{min-height:61px;background:#fff!important}
 body.mobile-site .mobile-catalog-categories .library-style-button.is-active{background:#fff!important;color:#000!important;font-weight:600}
 body.mobile-site .mobile-catalog-categories .library-style-button.is-active::before{top:auto;bottom:10px;left:calc(50% - 14px);width:28px;height:2px;background:#111}
 body.mobile-site :is(.mobile-catalog-categories,.mobile-catalog-controls,.mobile-catalog-scroll,.mobile-product-catalog,.mobile-product-results,.product-brands){background:#fff!important;border-color:#eee!important}
 body.mobile-site.mobile-library-catalog{--catalog-paper:#fff;--catalog-line:#eee;padding-bottom:0}
 body.mobile-site .mobile-catalog-result-heading .library-count strong{color:#111}
 body.mobile-site .mobile-catalog-result-heading .library-count>span{color:#999}
 body.mobile-site .library-series-card .library-text-link{color:#555!important}
 body.mobile-site .library-series-mosaic{border-radius:0}
 body.mobile-site .library-series-tile img{filter:none}
 body.mobile-site .library-series-tile span{color:#fff;background:#111b}
 body.mobile-site :is(.library-series-mosaic,.library-model-images){background:#fff!important}
 body.mobile-site :is(.library-series-tile,.library-model-images a,.version-gallery-item,.home-version-media,.color-card-showcase-media){background-color:#f5f5f5!important}
 body.mobile-site :is(.library-series-tile span,.tryon-series-mosaic em){background:#111b!important;color:#fff!important}
 body.mobile-site :is(.composition-filter,.version-points,.product-brands,.mobile-product-heading){color:#111!important}
 body.mobile-site .mobile-product-description{color:#888!important}
 body.mobile-site .mobile-product-catalog .product-brands button[aria-pressed=true]{border-left:2px solid #111!important;background:#fff!important;border-radius:0}
 body.mobile-site .mobile-product-catalog .product-brands>span{color:#999}
 body.mobile-site:has([data-products-grid]){padding-bottom:0}
 body.mobile-site:has([data-products-grid]) .product-page{height:calc(100dvh - 68px - var(--mobile-nav-height) - env(safe-area-inset-bottom));background:#fff}
 body.mobile-site .mobile-product-results{padding-bottom:24px}
 body.mobile-site :is(.product-card-image,.product-detail-photo,.version-cover){background-color:#f7f7f7!important;border-radius:0!important}
 body.mobile-site :is(.hero,.hero-content,.hero-proof,.hero-actions,.hero-actions a,.hero-eyebrow,.hero-subtitle,.hero-copy,.hero-copy span){color:#fff!important}
 body.mobile-site .hero-shade{background:linear-gradient(180deg,#0003,transparent 36%,#000a)}
 body.mobile-site .hero-proof{border-color:#ffffff66}
 body.mobile-site :is(.material-summary,.material-row p,.color-card-showcase-copy p,.color-card-facts span,.color-card-catalog-note,.quality-list dd,.version-points li){color:#777!important}
 body.mobile-site :is(.material-list,.material-row,.material-feature,.color-card-catalog,.color-card-facts>div,.quality-list>div,.metrics,.metrics>div,.contact-inner,.editorial-lines){background-color:#fff!important;border-color:#e5e5e5!important}
 body.mobile-site :is(.material-title-line span,.metrics span,.footer-brand p,.site-footer p){color:#888!important}
 body.mobile-site :is(.editorial-link,.contact-button,.product-detail-contact){color:#111;border-color:#bbb}
 body.mobile-site .hero-actions .editorial-link{color:#fff;border-color:#fff}
 body.mobile-site :is(.contact-social-card,.contact-social-action,.contact-form input,.contact-form textarea){background:#fff!important;color:#111!important;border-color:#ddd!important}
 body.mobile-site :is(.social-action,.social-platform){color:#111!important}
 body.mobile-site .product-detail-contact{background:#111!important;color:#fff!important;border-radius:0}
 body.mobile-site .language-menu>div{background:#fff!important;color:#111!important}
 body.mobile-site .language-menu a{color:#111!important;opacity:1}
 body.mobile-site .language-menu a.is-active{background:#f3f3f3!important}
 body.mobile-site .language-menu .flag{filter:none}
 body.mobile-site :is(.menu-button,.studio-menu) span{background:#111!important}
 body.mobile-site :is(.visual-source-sheet,.visual-upload,.visual-crop,.visual-mode,.visual-result-body,.mask-viewport){background:#fff!important;color:#111!important;border-color:#ddd!important;border-radius:0!important;box-shadow:none!important}
 body.mobile-site :is(.visual-source-options button,.source-cases,.source-brands button,.visual-mode button,.visual-replace,.mask-controls button,.library-feature-links>a){background:#f5f5f5!important;color:#111!important;border-color:#ddd!important;border-radius:0!important}
 body.mobile-site :is(.source-brands button[aria-pressed=true],.visual-mode button.is-active){background:#111!important;color:#fff!important}
 body.mobile-site dialog::backdrop{background:#0006}
 body.mobile-site :is(.space-card h3,.version-gallery-item figcaption,.color-card-showcase-media>span){color:#fff!important}
 body.mobile-site .space-card::after{background:linear-gradient(0deg,#0009,transparent 48%)}
 body.mobile-site .editorial-lines span{background:#ddd!important}
 body.mobile-site :is(.library-model-images span,.library-image-placeholder span){background:#111c!important;color:#fff!important}
 body.mobile-site :is(.capacity-card div,.language-menu summary){background:#fff!important;color:#111!important}
 body.mobile-site :is(.fabric img,.tryon-series-mosaic,.case-picker-grid img,.source-product img){border-radius:0!important}
 body.mobile-site .mobile-contact-shortcut{display:none!important}
 body.mobile-site :is(.tryon-steps,.tryon-step-dock,.tryon-step-status,.selection,.notice,.preview,.mask-editor,.mask-controls,.studio-nav-dialog,.case-picker){background:#fff!important;border-color:#ddd!important;color:#111!important}
 body.mobile-site :is(.tryon-steps button,.secondary,.fabric,.case-picker-brands button){background:#fff!important;color:#555!important;border-color:#ddd!important}
 body.mobile-site :is(.tryon-steps button[aria-current=step],.primary,.visual-search-button,.case-picker-brands button[aria-pressed=true]){background:#111!important;color:#fff!important;border-color:#111!important}
 body.mobile-site :is(.primary,.visual-search-button):disabled{background:#eee!important;color:#aaa!important;border-color:#eee!important}
 body.mobile-site :is(.fabric.selected,.fabric.is-selected,.fabric[aria-pressed=true]){border-color:#111!important;box-shadow:inset 0 0 0 1px #111!important}
 body.mobile-site.tryon-mobile-flow{padding-bottom:calc(148px + env(safe-area-inset-bottom))}
 body.mobile-site .tryon-step-dock{bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));padding:10px 16px;box-shadow:none}
 body.mobile-site .mobile-site-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:24;min-height:var(--mobile-nav-height);padding:7px 5px calc(7px + env(safe-area-inset-bottom));background:#fff!important;border:0;border-top:1px solid #eee;box-sizing:border-box}
 body.mobile-site .mobile-site-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:51px;padding:0 1px;color:#888!important;font:400 11px/1.35 Arial,"Microsoft YaHei",sans-serif;letter-spacing:.02em;white-space:nowrap;text-decoration:none}
 body.mobile-site .mobile-site-nav img{display:block;width:28px;height:28px;opacity:.5;filter:none}
 body.mobile-site .mobile-site-nav a[aria-current=page]{color:#111!important;font-weight:500}
 body.mobile-site .mobile-site-nav a[aria-current=page] img{opacity:1}
 body.mobile-site:is(.mobile-library-catalog,.mobile-versions-catalog) .mobile-site-nav{position:relative;inset:auto;flex:none}
 body.mobile-site.mobile-versions-catalog{padding-bottom:0}
 body.mobile-site.nav-open .mobile-site-nav{visibility:hidden}
 body.mobile-site :is(.mobile-nav,.studio-nav-dialog){z-index:40}
 body.mobile-site .mobile-nav{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
 body.mobile-site ::selection{background:#ddd;color:#111}
 body.mobile-site :is(button,a,summary,input,select):focus-visible{outline-color:#111!important}
 /* Reference direction: white space, sans-serif UI and quiet underlined selection. */
 body.mobile-site{font-family:"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
 body.mobile-site :is(button,input,select,textarea,label,summary,nav,nav a){font-family:"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif!important}
 body.mobile-site :is(.product-series-row strong,.selection strong,.section-title>span){font-family:"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif!important;font-style:normal}
 body.mobile-site :is(.product-photo-link.has-product-gallery,.product-gallery-thumb img,.product-series-preview){border-radius:0!important}
 body.mobile-site :is(main h1,main h2,main h3,main h4,.version-copy h2,.library-series-heading strong,.library-series-title strong){font-family:"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif!important;letter-spacing:0!important}
 body.mobile-site :is(.color-library-hero h1,.versions-hero h1,.product-intro h1){font-size:22px!important;font-weight:500!important;line-height:1.4!important}
 body.mobile-site :is(.site-header,body>header){min-height:64px;gap:12px;transition:none!important}
 body.mobile-site>header:not(.site-header){position:relative}
 body.mobile-site :is(.site-header,body>header)>.brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0!important;text-align:center;white-space:nowrap;font-family:Georgia,"Times New Roman",serif!important}
 body.mobile-site .site-header .brand-wordmark{font-family:Georgia,"Times New Roman",serif!important;font-size:25px!important;letter-spacing:.06em!important}
 body.mobile-site>header:not(.site-header)>.brand{font-size:25px!important;line-height:1.2;letter-spacing:.06em}
 body.mobile-site>header:not(.site-header)>.brand small{font:400 7px/1.4 Arial,sans-serif;letter-spacing:.14em;margin-top:7px;opacity:.65}
 body.mobile-site .hero .hero-copy{font-family:Georgia,"Times New Roman",serif!important;font-style:normal!important;font-weight:400;letter-spacing:-.035em!important}
 body.mobile-site .hero .hero-copy span{font-family:inherit!important;font-style:italic!important}
 body.mobile-site :is(.site-header,body>header) :is(.menu-button,.studio-menu){order:-1;margin:0 auto 0 0!important;flex:none}
 body.mobile-site :is(.site-header,body>header) :is(.site-language,.language-menu){order:3;margin:0 0 0 auto!important}
 body.mobile-site :is(.site-language select,.language-menu summary){border:0!important;background-color:#fff!important;font-size:11px!important}
 body.mobile-site :is(.mobile-catalog-categories,.mobile-versions-categories){border-right:0!important}
 body.mobile-site .mobile-catalog-categories .library-style-button{justify-content:flex-start;padding-left:12px;font-size:13px;min-height:63px;color:#111!important}
 body.mobile-site .mobile-catalog-categories .library-style-button.is-active::before{left:12px;width:32px;height:2px}
 body.mobile-site .mobile-versions-categories button{justify-content:flex-start;padding-left:11px;font-size:11px;min-height:63px;color:#111!important}
 body.mobile-site .mobile-versions-categories button[aria-pressed=true]::after{left:11px;width:32px}
 body.mobile-site .mobile-product-catalog .product-brands button{position:relative;border:0!important;color:#111!important}
 body.mobile-site .mobile-product-catalog .product-brands button[aria-pressed=true]{border:0!important;background:#fff!important}
 body.mobile-site .mobile-product-catalog .product-brands button[aria-pressed=true]::after{content:"";position:absolute;left:calc(50% - 13px);bottom:6px;width:26px;height:2px;background:#111}
 body.mobile-site .library-series-heading{justify-content:center}
 body.mobile-site .library-series-heading strong{font-size:15px!important;font-weight:600!important}
 body.mobile-site .library-series-category{font-size:9px!important;background:transparent!important;padding:0!important}
 body.mobile-site :is(.library-card-body,.library-series-title,.library-series-heading,.library-series-footer){border:0!important}
 body.mobile-site .library-series-footer{align-items:center}
 body.mobile-site .library-series-count{font-size:10px!important}
 body.mobile-site .library-series-card .library-text-link{font-size:11px!important;font-weight:400}
 body.mobile-site .version-copy h2{font-size:13px!important;font-weight:600!important;text-align:center;line-height:1.6!important;min-height:40px}
 body.mobile-site .version-copy{text-align:center}
 body.mobile-site .version-detail-link{font-size:11px!important;font-weight:400}
 body.mobile-site .version-detail-link::after{display:none!important}
 body.mobile-site .mobile-site-nav{border-top:0!important;padding-top:9px}
 body.mobile-site .mobile-site-nav a{font-size:11px}
 body.mobile-site .mobile-site-nav img{width:28px;height:28px}
 body.mobile-site .library-search-combined{background:#fff!important;border:0!important;border-bottom:1px solid #ddd!important}
 body.mobile-site .library-search-combined :is(input,.visual-search-trigger){background:transparent!important;border:0!important}
 body.mobile-site .library-search-combined .visual-search-trigger{border-left:1px solid #ddd!important}
 body.mobile-site .mobile-catalog-controls .library-color-button{border:0!important;background:#fff!important;padding-inline:7px}
 body.mobile-site .mobile-catalog-controls .library-color-button.is-active{background:#f5f5f5!important}
}

/* Phone-only menu: a compact two-column sheet, with the current page still visible below. */
@media(max-width:760px){
 body.mobile-menu-compact.nav-open .site-header{z-index:42;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;touch-action:none}
 body.mobile-menu-compact .mobile-nav{
  top:calc(var(--mobile-menu-top,var(--header-height,64px)) - 1px);right:0;bottom:auto;left:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;place-content:start stretch;
  gap:0 22px;height:auto;max-height:calc(100svh - var(--mobile-menu-top,64px) - 100px);
  margin:0;padding:10px 22px 22px;border:0;border-bottom:1px solid #eee!important;
  overflow:auto;overscroll-behavior:contain;transform:none;transition:opacity .18s ease,visibility .18s;
  box-shadow:0 12px 20px -20px #0004;isolation:isolate;
 }
 body.mobile-menu-compact .mobile-nav :is(.mobile-nav-caption,.mobile-nav-signature){display:none}
 body.mobile-menu-compact .mobile-nav a{
  display:flex;align-items:center;gap:10px;min-width:0;min-height:52px;margin:0;padding:10px 0;
  border-bottom:1px solid #eee!important;font-size:14px;font-weight:400;line-height:1.4;letter-spacing:.02em;
  opacity:1;transform:none;transition:background .15s;transition-delay:0s;
 }
 body.mobile-menu-compact .mobile-nav a::before{display:none}
 body.mobile-menu-compact .mobile-nav a::after{width:11px;height:11px;margin-left:auto;flex:none;opacity:.35}
 body.mobile-menu-compact .mobile-nav a.mobile-menu-primary{min-height:68px;font-size:15px}
 body.mobile-menu-compact .mobile-nav a.mobile-menu-primary::after{display:none}
 body.mobile-menu-compact .mobile-nav a.mobile-menu-primary:nth-of-type(3),
 body.mobile-menu-compact .mobile-nav a.mobile-menu-primary:nth-of-type(4){margin-bottom:14px}
 body.mobile-menu-compact .mobile-nav .mobile-menu-icon{display:block;width:24px;height:24px;flex:none;opacity:.8}
 body.mobile-menu-compact .mobile-nav a:active{background:#f7f7f7}
 body.mobile-menu-compact .mobile-nav a:focus-visible{outline:1px solid #111;outline-offset:2px}
 body.mobile-menu-compact .mobile-menu-backdrop:not([hidden]){
  display:block;position:fixed;inset:var(--mobile-menu-top,64px) 0 0;z-index:39;background:rgb(0 0 0 / 22%);
  touch-action:none;
 }
 body.mobile-menu-compact.nav-open .mobile-site-nav{visibility:visible}
}
/* home-media.css */
/* The editorial carousel belongs to the mobile homepage only. */
.home-gallery { display:none; }
@media(min-width:761px) { .home-page .hero-media > img { display:none; } }
@media(max-width:760px) {
.desktop-home-section { display:none!important; }
.home-gallery { display:block; }
/* Full-bleed media intro, based on the owner's reference recording. */
.home-page.has-home-media { --home-header-height:80px; --home-bottom-space:0px; --home-hero-height:100svh; }
html:has(body.has-home-media) { overflow-x:clip; }
body.home-page.has-home-media,body.has-home-media > main,body.has-home-media .home-gallery { overflow:visible; }
.home-page.has-home-media > .site-header { height:var(--home-header-height); background:#fff; color:#111; border-bottom:1px solid #eee; }
.has-home-media > main { padding-top:0; }
/* A longer scroll journey softens zooming without changing the visible entry panel. */
.home-gallery { --home-default-reveal-height:clamp(130px,23svh,230px); --home-scroll-distance:calc(var(--home-default-reveal-height) * 1.65); --home-reveal-offset:var(--home-default-reveal-height); --home-photo-scale:1; position:relative; height:calc(var(--home-hero-height) + var(--home-scroll-distance)); background:#fff; color:#111; }
.home-gallery-stage { position:sticky; top:0; height:var(--home-hero-height); overflow:hidden; }
/* Temporarily hide the original introduction on phones; retain its desktop content. */
.has-home-media #home-introduction { display:none!important; }
.has-home-media #color-card-showcase { scroll-margin-top:var(--home-header-height); }
.home-gallery [hidden] { display:none!important; }
.home-gallery-track { display:flex; width:100%; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; overflow-anchor:none; }
.home-gallery-track::-webkit-scrollbar { display:none; }
.home-gallery-track.is-ready { display:block; overflow:hidden; overflow:clip; scroll-snap-type:none; touch-action:pan-y pinch-zoom; -webkit-user-select:none; user-select:none; }
.home-gallery-rail { display:flex; width:100%; height:100%; transform:translate3d(0,0,0); will-change:transform; }
.home-gallery-track.is-ready .home-slide-tiles { touch-action:pan-y pinch-zoom; overflow:visible; background:transparent; }
.home-gallery-track.is-ready .home-slide-tiles a { transform:translate3d(0,0,0); will-change:transform; isolation:isolate; }
.home-gallery-track.is-dragging { scroll-snap-type:none; cursor:grabbing; user-select:none; }
.home-gallery-track:not(.is-ready) .is-clone { display:none; }
.home-gallery-slide { flex:0 0 100%; min-width:0; height:100%; position:relative; scroll-snap-align:start; scroll-snap-stop:always; }
.home-slide-hero { position:relative; height:calc(var(--home-hero-height) - var(--home-reveal-offset)); overflow:hidden; background:#111; }
.home-slide-hero picture,.home-slide-hero img { display:block; width:100%; height:100%; }
.home-slide-hero img { object-fit:cover; object-position:var(--photo-desktop-position,50% 50%); transform:scale(var(--home-photo-scale)); pointer-events:none; user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; }
.has-caption-shade .home-slide-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.08) 58%,rgba(0,0,0,.34)); pointer-events:none; }
.home-slide-caption { position:absolute; z-index:1; left:20px; right:20px; bottom:94px; text-align:center; }
.home-page .home-gallery-title { margin:0 0 14px; color:#fff!important; font:500 clamp(20px,2vw,28px)/1.3 "Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif!important; letter-spacing:.04em!important; text-shadow:0 1px 8px #0009; }
.home-page .has-dark-copy .home-gallery-title { color:#111!important; text-shadow:none; }
.home-slide-actions { display:flex; gap:7px; justify-content:center; }
.home-page .home-slide-actions a { background:#fff!important; color:#111!important; padding:8px 18px; min-width:106px; min-height:34px; font:400 11px/1.6 Arial,"Microsoft YaHei",sans-serif; text-align:center; }
.home-slide-tiles { --home-entry-height:var(--home-default-reveal-height); display:flex; justify-content:center; gap:12px; padding:18px 20px 20px; width:100%; max-width:1200px; height:var(--home-entry-height); margin:auto; background:#fff; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
.home-slide-tiles::-webkit-scrollbar { display:none; }
.home-slide-tiles a { flex:0 0 calc((100% - 48px)/5); min-width:0; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:8px 6px 10px; text-align:center; font:400 12px/1.5 Arial,"Microsoft YaHei",sans-serif; color:#111!important; background:#f6f6f6; border:0; box-shadow:none; }
.home-slide-tiles a>span:last-child { white-space:nowrap; }
.home-slide-tiles .home-entry-image { height:calc(var(--home-entry-height) - 94px); display:block; background:transparent; }
.home-slide-tiles img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; }
.home-slide-tiles.has-photo-entries img { object-fit:cover; mix-blend-mode:normal; }
.home-slide-tiles.has-version-entries { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); gap:12px; overflow:visible; }
.home-slide-tiles.has-version-entries a { min-height:0; gap:5px; padding:9px 6px; background:#f6f6f6; }
.home-slide-tiles.has-version-entries .home-entry-image { display:flex; flex:1; align-items:center; justify-content:center; min-height:0; height:auto; }
.home-slide-tiles.has-version-entries img { display:block; width:84%; height:84%; object-fit:contain; object-position:center; }
.home-slide-tiles.has-version-entries a>span:last-child { flex:none; white-space:nowrap; }
.has-single-entry .home-slide-tiles { justify-content:center; }
.has-single-entry .home-slide-tiles a { flex-basis:200px; }
.home-page .home-gallery-footer { position:absolute; z-index:2; left:20px; right:20px; top:calc(var(--home-hero-height) - var(--home-reveal-offset) - 76px); height:76px; display:flex; flex-direction:column; align-items:center; color:#fff!important; text-align:center; pointer-events:none; }
.home-gallery-footer button { pointer-events:auto; }
.home-gallery :is(button,a):focus-visible { outline:1px solid currentColor; outline-offset:3px; }
.home-gallery-controls { display:flex; position:relative; align-items:center; justify-content:center; width:min(240px,60vw); }
.home-gallery-dots { display:flex; flex:1; }
.home-gallery-controls button { position:relative; display:grid; place-items:center; flex:1; min-width:44px; height:36px; padding:0; border:0; background:none; color:#fff!important; cursor:pointer; }
.home-gallery-dots button::before { content:""; position:absolute; height:1px; background:#fff; opacity:.38; width:100%; }
.home-gallery-dots button[aria-current=true]::before { opacity:1; height:2px; }
.home-gallery-toggle { position:absolute!important; left:100%; width:40px; margin-left:5px; }
.home-gallery-toggle img { width:12px; height:12px; filter:brightness(0) invert(1); opacity:.8; }
.home-page .home-media-next { border:0; padding:6px 8px; background:transparent; cursor:pointer; display:grid; place-items:center; min-width:52px; min-height:40px; color:#fff!important; font:400 11px/1.4 Arial,"Microsoft YaHei",sans-serif; }
.home-caption-dark .home-gallery-dots button::before { background:#111; }
.home-caption-dark .home-gallery-toggle img { filter:none; }
.home-page .home-caption-dark .home-media-next { color:#111!important; }
.home-media-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* The intro has an overlaid header; mobile navigation stays solid white. */
body.home-page.has-home-media.home-media-overlay:not(.nav-open) .site-header { background:transparent!important; color:#fff!important; border-color:transparent!important; box-shadow:none; backdrop-filter:none; }
body.home-page.has-home-media.home-media-overlay:not(.nav-open) .site-header :is(.brand,.brand-wordmark,.desktop-nav,.header-home) { color:#fff!important; text-shadow:0 1px 7px #0006; }
body.home-page.has-home-media.home-media-overlay.home-header-dark:not(.nav-open) .site-header :is(.brand,.brand-wordmark,.desktop-nav,.header-home) { color:#111!important; text-shadow:none; }
body.home-page.has-home-media.home-media-overlay:not(.nav-open) .site-header .language-menu summary { color:#111!important; background:#ffffffb8!important; border:0!important; border-radius:24px; }
body.home-page.has-home-media.home-media-overlay:not(.nav-open) .site-header .menu-button { background:#ffffffb8!important; border:0!important; border-radius:24px!important; height:30px; width:44px; }
body.home-page.has-home-media.home-media-overlay:not(.nav-open) .site-header .menu-button span { background:#111!important; }
body.home-page.has-home-media.home-media-overlay .mobile-site-nav { background:#fff!important; backdrop-filter:none; -webkit-backdrop-filter:none; border:0!important; }
/* The original first screen and all later sections remain in place below. */
.home-page.has-home-media .hero-media { background:none; }
.home-page.has-home-media .hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(18,17,15,.72),rgba(18,17,15,.3) 44%,rgba(18,17,15,.08)); }
.home-page.has-home-media .hero-media img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
@media(max-width:760px) {
  html:has(body.has-home-media) { scrollbar-width:none; }
  html:has(body.has-home-media)::-webkit-scrollbar { display:none; }
  .home-page.has-home-media { --home-header-height:calc(64px + env(safe-area-inset-top)); --home-bottom-space:calc(67px + env(safe-area-inset-bottom)); --home-hero-height:calc(100svh - var(--home-bottom-space)); }
  .home-page.has-home-media > .site-header { height:var(--home-header-height); }
  .home-gallery { --home-default-reveal-height:clamp(130px,23svh,180px); }
  .home-slide-hero img { object-position:var(--photo-position,50% 50%); }
  .home-slide-tiles { justify-content:flex-start; gap:10px; padding:16px 18px 20px; }
  .home-slide-tiles a { flex-basis:calc((100% - 20px)/3); font-size:11px; }
  .home-slide-tiles:has(a:nth-child(4)) a { flex-basis:calc((100% - 30px)/4); }
  .home-slide-tiles .home-entry-image { height:calc(var(--home-entry-height) - 88px); }
  /* Keep all three slides at the same reveal height, including this two-row grid. */
  .home-slide-tiles.has-version-entries { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:6px 10px; padding:8px 18px 10px; }
  .home-slide-tiles.has-version-entries a { gap:2px; padding:3px 4px; line-height:1.3; }
  .home-slide-tiles.has-version-entries .home-entry-image { height:auto; }
  .has-single-entry .home-slide-tiles a { flex-basis:146px; }
  .home-page .home-gallery-title { font-size:20px!important; }
  body.home-page.has-home-media.home-media-overlay:not(.nav-open) .site-header .menu-button { flex-basis:44px; padding:8px 11px; }
  body.home-page.has-home-media.home-media-overlay:not(.nav-open) .site-header .language-menu summary { min-height:28px; padding:4px 10px; }
  .home-page.has-home-media .hero-media::after { background:linear-gradient(180deg,rgba(18,17,15,.18),rgba(18,17,15,.82)),linear-gradient(90deg,rgba(18,17,15,.48),rgba(18,17,15,.08)); }
  .home-page.has-home-media .hero-media img { object-position:67% center; }
}
@media(max-width:360px) { .home-slide-tiles:has(a:nth-child(4)) a { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .home-gallery-track { scroll-behavior:auto; } .home-gallery-track.is-ready .home-slide-tiles a { transform:none; } }
}