:root {
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "Times New Roman", serif;
  --font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
blockquote,
.brand,
.lead,
.pull,
.card-info h3,
.case-card-copy h2 {
  font-family: var(--font-serif);
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

nav,
button,
.filter,
.eyebrow,
.kicker,
.section-index,
.meta,
.facts,
.labels,
.card-info p,
.gallery-grid figcaption {
  font-family: var(--font-sans);
}

.section-head h2,
.intro-copy h2,
.craft-title h2,
.feature-copy blockquote,
.summary h2,
.copy h2,
.gallery-head h2,
.palette h2,
.next h2,
.case-card-copy h2,
.observe-copy h2,
.buying h2,
.warning-box h2 {
  letter-spacing: .07em;
}

html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] blockquote {
  letter-spacing: .015em;
}

.section-head > div:last-child {
  max-width: 760px;
}

.card-info h3 {
  font-size: clamp(1.12rem, 1.5vw, 1.45rem);
}

.card-info p,
.gallery-grid figcaption {
  line-height: 1.55;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 800px) {
  body {
    font-size: 16px;
    line-height: 1.72;
  }

  .wrap {
    width: calc(100% - 32px);
  }

  .collections .wrap,
  .cases-home .wrap {
    width: calc(100% - 20px);
  }

  nav {
    width: calc(100% - 28px);
  }

  .brand {
    font-size: 1rem;
  }

  nav a,
  nav button,
  .cta,
  .collection-more button {
    min-height: 44px;
  }

  main > section:not(.hero):not(.case-hero) {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .hero {
    min-height: 100svh;
  }

  .hero h1 {
    font-size: clamp(2.7rem, 14vw, 4rem);
    line-height: 1.14;
    letter-spacing: .1em;
  }

  .hero .tag {
    font-size: .95rem;
    line-height: 1.6;
    letter-spacing: .13em;
  }

  .hero p {
    font-size: .95rem;
    line-height: 1.75;
    letter-spacing: .025em;
  }

  .section-head h2,
  .gallery-head h2 {
    font-size: clamp(2rem, 10vw, 2.75rem);
    line-height: 1.35;
    letter-spacing: .055em;
  }

  .intro-copy h2,
  .craft-title h2,
  .copy h2,
  .summary h2,
  .palette h2,
  .next h2,
  .observe-copy h2,
  .buying h2,
  .warning-box h2 {
    font-size: clamp(1.85rem, 8.5vw, 2.5rem);
    line-height: 1.42;
    letter-spacing: .045em;
  }

  html[lang="en"] .hero h1,
  html[lang="en"] .section-head h2,
  html[lang="en"] .gallery-head h2,
  html[lang="en"] .copy h2,
  html[lang="en"] .summary h2 {
    letter-spacing: .01em;
  }

  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 28px;
    padding: 0 2px 8px;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .filter {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 11px 17px;
  }

  .card-info {
    right: 18px;
    bottom: 17px;
    left: 18px;
  }

  .card-info h3 {
    font-size: 1.18rem;
  }

  .card-info p {
    font-size: .75rem;
  }

  .case-hero {
    min-height: 72svh;
    padding: 92px 0 54px;
    background-position: center;
  }

  .case-hero h1 {
    font-size: clamp(2.65rem, 13vw, 4rem);
    line-height: 1.16;
    letter-spacing: .07em;
  }

  .case-hero p {
    font-size: .98rem;
    line-height: 1.75;
  }

  .visual img,
  .study-chapter .visual img,
  .gallery-grid img,
  .gallery-grid .wide-scene img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #171411;
  }

  .gallery-head {
    margin-bottom: 30px;
  }

  .gallery-grid {
    gap: 16px;
  }

  .gallery-grid figcaption {
    inset: auto 12px 10px;
    font-size: .72rem;
  }

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

  .fact:nth-child(odd) {
    padding-right: 0;
  }

  .furniture-list div {
    align-items: flex-start;
  }

  .topics .topic {
    min-height: 0;
    padding: 28px 20px;
  }

  .principle {
    padding: 26px 22px;
  }

  .observe-image img {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .warning-box {
    padding: 32px 22px;
  }

  .layout {
    padding-top: 52px;
  }

  .article h2 {
    margin-top: 58px;
    font-size: 1.65rem;
    line-height: 1.45;
    letter-spacing: .04em;
  }

  .article .lead {
    font-size: 1.15rem;
    line-height: 1.75;
  }

  .article p {
    margin-bottom: 22px;
  }

  .pull {
    font-size: 1.22rem;
    line-height: 1.7;
    letter-spacing: .035em;
  }

  .note {
    padding: 24px 20px;
  }

  .meta {
    flex-wrap: wrap;
    gap: 8px 18px;
  }

  .toc {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 10px;
  }

  .toc::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 430px) {
  .brand small {
    display: none;
  }

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

  .section-head h2,
  .gallery-head h2 {
    font-size: clamp(1.95rem, 9.5vw, 2.45rem);
  }
}

.case-disclosure{display:inline-block;font:500 12px/20px var(--font-sans,system-ui);letter-spacing:.02em;border:1px solid currentColor;padding:4px 8px;margin-bottom:16px;color:inherit;max-width:100%;text-wrap:pretty}