:root {
  --ink: #17191d;
  --ivory: #f3f4f6;
  --paper: #fafafa;
  --gold: #596de8;
  --gold-dk: #4054c7;
  --muted: #60656f;
  --line: #d9dce2;
  --soft: #e8eaf0;
  --max: 1240px;
}

html { scroll-padding-top: 68px; }
body {
  font-family: "Helvetica Neue", "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
}
h1, h2, h3 { font-family: inherit; letter-spacing: -.04em; font-weight: 520; }
.wrap { padding-inline: clamp(20px, 4vw, 56px); }

header {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-color: color-mix(in srgb, var(--line) 78%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
}
.nav { height: 68px; padding-inline: clamp(20px, 4vw, 56px); }
.brand { gap: 12px; }
.brand .mark {
  font-family: inherit;
  font-size: 20px;
  font-weight: 720;
  letter-spacing: .28em;
}
.brand .tag { letter-spacing: .16em; color: var(--muted); }
nav ul { gap: 26px; }
nav a { font-size: 11px; font-weight: 650; letter-spacing: .1em; }
.lang {
  border-radius: 0;
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 650;
  padding: 7px 12px;
}

.hero {
  min-height: calc(100dvh - 68px);
  background: #17191d;
  color: #f7f8fa;
  overflow: hidden;
}
.hero-inner {
  min-height: calc(100dvh - 68px);
  padding: clamp(36px, 6vw, 76px) clamp(20px, 4vw, 56px);
  grid-template-columns: minmax(300px, .76fr) minmax(460px, 1.24fr);
  gap: clamp(40px, 7vw, 104px);
  max-width: var(--max);
}
.hero-copy { position: relative; z-index: 2; }
.hero .eyebrow { color: #8da0ff; margin-bottom: 22px; }
.hero h1 {
  max-width: 650px;
  font-size: clamp(50px, 6.3vw, 88px);
  line-height: .95;
  letter-spacing: -.065em;
  margin-bottom: 30px;
}
.hero h1 em { color: #aebafb; font-style: normal; font-weight: 360; }
html[lang="zh-CN"] .hero h1 { font-size: clamp(44px, 5vw, 68px); letter-spacing: -.05em; }
.hero p { max-width: 400px; color: #b9bec9; font-size: 16px; line-height: 1.55; }
.cta-row { align-items: center; gap: 25px; margin-top: 34px; }
.btn {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
  padding: 13px 22px;
  font-weight: 680;
  letter-spacing: .09em;
}
.hero .btn.solid { background: #eef1ff; color: #181b25; border-color: #eef1ff; }
.hero .btn.solid:hover { background: #aebafb; color: #11131a; border-color: #aebafb; }
.btn:active, .text-link:active { transform: translateY(1px); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #e3e6ef;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.text-link::after { content: "↘"; font-size: 16px; transition: transform .25s ease; }
.text-link:hover::after { transform: translate(3px, 3px); }

.hero-art {
  width: 100%;
  height: min(70vw, 670px);
  max-height: 72vh;
  position: relative;
  display: block;
}
.hero-main {
  position: absolute;
  inset: 0 0 8% 9%;
  overflow: hidden;
  background: #eef0f4;
}
.hero-main::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  pointer-events: none;
}
.hero-main img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.hero-detail {
  position: absolute;
  left: -11%;
  bottom: -2%;
  width: 37%;
  aspect-ratio: .78;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(7,10,20,.32);
}
.hero-detail img { width: 100%; height: 100%; object-fit: cover; }
.hero-monogram {
  position: absolute;
  right: -4%;
  top: -11%;
  font-size: clamp(150px, 23vw, 320px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.08em;
  color: rgba(146,160,244,.11);
  pointer-events: none;
}

section { padding: clamp(78px, 10vw, 142px) 0; }
section.alt { background: #f0f1f4; }
.eyebrow { color: var(--gold-dk); font-weight: 700; letter-spacing: .2em; }
h2 { font-size: clamp(34px, 5vw, 62px); line-height: 1.02; max-width: 760px; margin-bottom: 28px; }
h3 { letter-spacing: -.025em; }
.lede { color: var(--muted); font-size: 16px; }
.rule { background: var(--gold); }

#about .two { grid-template-columns: 1.12fr .88fr; gap: clamp(52px, 9vw, 132px); align-items: start; }
#about .list { margin-top: 68px; }
.list li { color: var(--muted); padding: 18px 0; border-color: var(--line); }
.list li::before { display: none; }
.list li b { display: block; color: var(--ink); font-size: 13px; letter-spacing: .04em; margin-bottom: 2px; }

.making { background: #dfe2e8; }
.making .lede { max-width: 64ch; }
.process-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: 62px;
  align-items: start;
}
.process-item { margin: 0; }
.process-wide { grid-column: span 7; }
.process-tall { grid-column: span 5; padding-top: 18%; }
.process-small { grid-column: 5 / span 5; margin-top: -6%; }
.process-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.5;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 30%, rgba(105,124,232,.16), transparent 32%),
    linear-gradient(145deg, #c9cdd5, #eef0f4 58%, #d4d8e0);
  border: 1px solid rgba(23,25,29,.08);
}
.process-tall .process-placeholder { aspect-ratio: .86; }
.process-small .process-placeholder { aspect-ratio: 1.15; }
.process-placeholder::before {
  content: "";
  position: absolute;
  width: 28%;
  aspect-ratio: 1;
  border: 1px solid rgba(23,25,29,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.12), 0 0 0 44px rgba(23,25,29,.035);
}
.process-placeholder span {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5a606b;
}
.process-item figcaption { padding-top: 18px; }
.process-item figcaption strong { display: block; font-size: 17px; letter-spacing: -.02em; }
.process-item figcaption span { display: block; max-width: 46ch; margin-top: 5px; color: #626873; font-size: 13px; }
.process-note { max-width: 72ch; margin-top: 48px; color: #6a707b; font-size: 12px; }

.collection {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: 62px;
}
.col-item { border: 0; background: transparent; overflow: visible; }
.col-item:nth-child(1) { grid-column: span 7; }
.col-item:nth-child(2) { grid-column: span 5; padding-top: 13%; }
.col-item:nth-child(3) { grid-column: 2 / span 4; margin-top: 3%; }
.col-item:nth-child(4) { grid-column: 6 / span 7; margin-top: 3%; }
.col-item:nth-child(5) { grid-column: 3 / span 8; margin-top: 4%; }
.col-item:hover { transform: none; }
.col-visual {
  aspect-ratio: 1 / .92;
  background: #e3e5e9;
  overflow: hidden;
}
.col-item:nth-child(2) .col-visual,
.col-item:nth-child(3) .col-visual { aspect-ratio: .82; }
.col-item:nth-child(5) .col-visual { aspect-ratio: 1.55; }
.col-visual img { object-fit: cover; transition: transform .65s cubic-bezier(.16,1,.3,1); }
.col-item:hover .col-visual img { transform: scale(1.025); }
.col-body { padding: 18px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 22px; }
.col-body h3 { font-size: 17px; margin: 0; }
.col-body p { grid-column: 1 / -1; max-width: 58ch; font-size: 13px; }
.spec { grid-column: 2; grid-row: 1; margin: 3px 0 0; color: var(--gold-dk); white-space: nowrap; }
.ph { display: none; }

#details { background: var(--ink); color: #f1f3f7; }
#details .eyebrow { color: #92a0f4; }
#details .cards {
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 58px;
  border-top: 1px solid #383b43;
}
#details .card {
  position: relative;
  min-height: 235px;
  padding: 40px 56px 42px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #383b43;
}
#details .card:nth-child(odd) { padding-right: 13%; border-right: 1px solid #383b43; }
#details .card:nth-child(even) { padding-left: 13%; }
#details .card:hover { transform: none; }
#details .card h3 { color: #f1f3f7; font-size: 20px; }
#details .card p { color: #aeb3be; max-width: 48ch; }
#details .ico { display: none; }
#details .card::before {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  background: #8ea0ff;
  margin-bottom: 30px;
}

#legal { background: #eceef2; }
.tabs { margin-top: 44px; }
.tab { font-weight: 650; }
.tab.on { border-color: var(--gold); }
.panel { max-width: 860px; }
.panel h3 { margin-top: 38px; }

.info { grid-template-columns: .8fr 1.2fr; border-color: var(--line); }
.info div { padding: 30px; border-color: var(--line); }
.info dt { color: var(--gold-dk); font-weight: 700; }

footer { background: #17191d; color: #9ba0aa; }
footer .mark { font-family: inherit; font-weight: 720; letter-spacing: .28em; }
footer h4 { color: #e8eaf0; }
.f-top { border-color: #343740; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceef3;
    --paper: #16181c;
    --ivory: #1d2025;
    --muted: #a9aeb8;
    --line: #363a43;
    --soft: #262a31;
    --gold: #94a5ff;
    --gold-dk: #a8b5ff;
  }
  header { background: rgba(22,24,28,.9); }
  .hero, #details, footer { background: #111318; }
  section.alt, #legal { background: #1d2025; }
  .making { background: #242830; }
  .process-placeholder { background: radial-gradient(circle at 68% 30%, rgba(128,145,242,.2), transparent 32%), linear-gradient(145deg,#30353e,#454b57 58%,#2b3038); border-color: rgba(255,255,255,.07); }
  .process-placeholder span, .process-item figcaption span, .process-note { color: #a9aeb8; }
  .col-visual { background: #e6e7ea; }
  .btn { border-color: var(--ink); color: var(--ink); }
}

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr 1.12fr; gap: 30px; }
  .hero-art { order: initial; max-width: none; margin: 0; }
  .hero h1 { font-size: clamp(46px, 7vw, 68px); }
  #about .two { grid-template-columns: 1fr; }
  #about .list { margin-top: 12px; }
}

@media (max-width: 700px) {
  .nav { height: 64px; }
  .brand .tag { display: none; }
  nav ul { top: 64px; background: var(--paper); padding: 12px 0 20px; }
  .hero { min-height: auto; }
  .hero-inner {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 48px 20px 38px;
    gap: 42px;
  }
  .hero h1 { font-size: clamp(46px, 14vw, 64px); }
  .hero p { max-width: 34ch; }
  .hero-art { height: 116vw; max-height: 590px; }
  .hero-main { inset: 0 0 7% 8%; }
  .hero-detail { left: 0; width: 34%; }
  .hero-monogram { top: -6%; right: -2%; }
  section { padding: 76px 0; }
  .collection { grid-template-columns: 1fr; gap: 50px; }
  .col-item:nth-child(n) { grid-column: auto; margin: 0; padding: 0; }
  .col-item:nth-child(n) .col-visual { aspect-ratio: 1 / .94; }
  .col-body { grid-template-columns: 1fr; }
  .spec { grid-column: 1; grid-row: auto; }
  #details .cards { grid-template-columns: 1fr; }
  #details .card,
  #details .card:nth-child(odd),
  #details .card:nth-child(even) { min-height: auto; padding: 34px 0; border-right: 0; }
  .info { grid-template-columns: 1fr; }
  .info div { border-right: 0 !important; }
  .process-grid { grid-template-columns: 1fr; gap: 46px; }
  .process-wide, .process-tall, .process-small { grid-column: auto; margin: 0; padding: 0; }
  .process-item .process-placeholder { aspect-ratio: 1.08; }
}

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