:root{--paper:#f2f4f6;--ink:#171d25;--soft:#505d6a;--line:#cbd3dc;--dark:#182331;--light:#f3f7fb;--serif:Georgia,"Songti SC","Noto Serif CJK SC","Batang",serif;--sans:Arial,"PingFang SC","Microsoft YaHei","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.7 var(--sans)}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible{outline:2px solid currentColor;outline-offset:5px}h1,h2,p,figure{margin:0}.shell{width:min(1510px,calc(100% - 88px));margin-inline:auto}.skip{position:absolute;left:16px;top:12px;transform:translateY(-150%);padding:8px 12px;background:var(--light);z-index:5}.skip:focus{transform:none}
.bar{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;min-height:78px;gap:18px}.brand{justify-self:start;font:700 clamp(15px,1.55vw,22px)/1 var(--sans);letter-spacing:-.065em;white-space:nowrap}.brand span{margin-left:.32em;font-weight:400;letter-spacing:-.045em}.menu,.languages{display:flex;align-items:center;white-space:nowrap;font-size:12px;gap:clamp(14px,2vw,28px)}.menu{justify-content:center}.languages{justify-content:end;gap:14px;font-size:11px}.languages [aria-current]{text-decoration:underline;text-underline-offset:5px}
.hero{position:relative;background:#788b9f;isolation:isolate;height:clamp(400px,44vw,650px);overflow:hidden}.hero-photo{display:block;width:100%;height:100%;object-fit:cover}.hero-photo{position:absolute;inset:0;object-position:70% center;z-index:-2}.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(25deg,rgba(15,27,41,.78),rgba(15,27,41,.36) 37%,transparent 69%);z-index:-1}.hero-type{position:absolute;left:clamp(25px,6vw,105px);right:22px;bottom:clamp(42px,7vw,113px);color:white}.tag{font:600 10px/1.45 var(--sans);letter-spacing:.16em;text-transform:uppercase}.hero h1,.story h2{font-family:var(--serif);font-weight:400;letter-spacing:-.06em}.hero h1{font-size:clamp(44px,7vw,105px);line-height:1.13;margin:.14em 0 .16em}.intro{font-size:clamp(14px,1.45vw,19px);max-width:27em}.foot{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--soft);padding:15px 0;border-bottom:1px solid var(--line)}
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,9vw,145px);align-items:center;padding:clamp(40px,6vw,94px) clamp(20px,6vw,90px)}.story h2{font-size:clamp(32px,4.45vw,70px);line-height:1.12;word-break:keep-all}.body{max-width:35em;color:var(--soft);font-size:clamp(16px,1.5vw,21px)}
.contact{background:var(--dark);color:var(--light);display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:25px;padding:clamp(32px,7vw,97px) clamp(20px,6vw,90px)}.contact h2{margin-top:8px;font-size:clamp(19px,2.4vw,36px);font-weight:400}.address{font:400 clamp(17px,3.05vw,49px)/1.25 var(--serif);letter-spacing:-.045em;overflow-wrap:anywhere}.pending{font-size:12px;color:#c1cbd6;margin-top:8px}.foot{border-bottom:0;padding:24px 0 35px}section[id]{scroll-margin-top:20px}
@media(max-width:850px){.shell{width:calc(100% - 44px)}.story{gap:34px}.bar{gap:10px}}
@media(max-width:620px){.shell{width:calc(100% - 28px)}.bar{min-height:0;padding:15px 1px 12px;grid-template-columns:1fr auto;row-gap:10px}.menu{justify-content:start;grid-row:2;grid-column:1/-1}.languages{grid-column:2;grid-row:1}.hero{height:clamp(300px,89vw,450px)}.hero-photo{object-position:91% center}.hero::after{background:linear-gradient(0deg,rgba(15,27,41,.87),rgba(15,27,41,.25) 53%,transparent 79%)}.hero-type{bottom:28px;left:20px}.hero h1{font-size:clamp(33px,9vw,55px)}.intro{font-size:13px}.story,.contact{grid-template-columns:1fr}.story{padding-block:44px;gap:14px}.story h2{font-size:clamp(34px,9vw,53px)}.contact{gap:16px}.address{font-size:clamp(19px,6.3vw,31px)}.tag{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.hero h1 {
  font-family: var(--sans);
  font-size: clamp(29px, 5.4vw, 81px);
  font-weight: 600;
  letter-spacing: -.055em;
}

@media (max-width: 620px) {
  .hero h1 {
    font-size: clamp(26px, 8.5vw, 48px);
  }
}

.care {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 8vw, 124px);
  padding: clamp(38px, 7vw, 95px) clamp(20px, 6vw, 90px);
  margin-bottom: 24px;
  background: #e3e9ef;
}

.care h2 {
  margin: 14px 0;
  font: 400 clamp(28px, 4vw, 56px)/1.2 var(--serif);
  letter-spacing: -.04em;
}

.care p {
  color: var(--soft);
}

.care-principles > div {
  padding: 12px 0 18px;
  border-top: 1px solid var(--line);
}

.care-principles h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

@media (max-width: 620px) {
  .care {
    grid-template-columns: 1fr;
  }

  .menu {
    gap: 12px;
  }
}

/* Campaign and lookbook */
.hero {
  height: clamp(510px, 54vw, 760px);
}

.hero-photo {
  object-position: 72% center;
}

.hero::after {
  background: linear-gradient(90deg, rgb(10 19 28 / .35), rgb(10 19 28 / .20) 40%, transparent 70%);
}

.hero-type {
  left: 0;
  right: 0;
  bottom: clamp(44px, 7vw, 115px);
}

.hero h1 {
  max-width: 10em;
  font-size: clamp(46px, 6vw, 95px);
  line-height: 1.02;
  margin: 15px 0 21px;
  text-wrap: balance;
}

.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 11px 17px;
  margin-top: 24px;
  border: 1px solid currentColor;
  font-size: 13px;
}

.hero-link:hover {
  background: var(--light);
  color: var(--ink);
  text-decoration: none;
}

.looks {
  padding-block: clamp(50px, 7vw, 110px);
  border-bottom: 1px solid var(--line);
}

.looks-header {
  display: flex;
  align-items: baseline;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 25px;
}

.looks-header .tag,
.look .tag {
  color: var(--soft);
}

.looks h2 {
  font-size: clamp(30px, 4.5vw, 62px);
  line-height: 1.1;
  letter-spacing: -.045em;
}

.looks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 30px);
}

.look img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 4.25;
  object-fit: cover;
  object-position: center;
  background: #c5ced5;
}

.look figcaption {
  padding: 18px 0 0;
}

.look h3 {
  font-size: clamp(20px, 2.3vw, 33px);
  line-height: 1.2;
  margin: 7px 0;
}

.look figcaption > p:last-child {
  color: var(--soft);
}

@media (max-width: 620px) {
  .hero {
    height: clamp(410px, 120vw, 580px);
  }

  .hero-photo {
    object-position: 78% center;
  }

  .hero::after {
    background: linear-gradient(0deg, rgb(10 19 28 / .92), rgb(10 19 28 / .52) 41%, transparent 75%);
  }

  .hero-type {
    bottom: 28px;
  }

  .hero h1 {
    font-size: clamp(34px, 10vw, 54px);
    margin: 10px 0 14px;
  }

  .menu {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .looks-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.subpage {
  padding-bottom: clamp(48px, 8vw, 112px);
}

.subpage-header {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end;
  gap: 13px clamp(25px, 6vw, 88px);
  padding: clamp(35px, 6vw, 88px) 0 clamp(25px, 4vw, 56px);
  border-top: 1px solid var(--line);
}

.subpage-header .tag {
  grid-column: 1 / -1;
  color: var(--soft);
}

.subpage-header h1 {
  font-size: clamp(38px, 6vw, 86px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.055em;
}

.subpage-intro {
  max-width: 38em;
  color: var(--soft);
  font-size: clamp(16px, 1.45vw, 21px);
}

.subpage-image {
  overflow: hidden;
  background: #c5ced5;
}

.subpage-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.35 / 1;
  object-fit: cover;
}

.subpage-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 5vw, 68px);
  margin-top: clamp(32px, 6vw, 82px);
}

.subpage-body > * {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.subpage-body h2 {
  margin-bottom: 9px;
  font-size: clamp(20px, 2.25vw, 32px);
  line-height: 1.25;
}

.subpage-body p {
  max-width: 38em;
  color: var(--soft);
}

.menu [aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.foot {
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  column-gap: 24px;
}

.footer-email {
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-transform: none;
}

@media (max-width: 620px) {
  .subpage-header,
  .subpage-body {
    grid-template-columns: 1fr;
  }

  .subpage-image img {
    aspect-ratio: 1.35 / 1;
  }

  .footer-email {
    order: -1;
    flex-basis: 100%;
  }
}

/* Simplified Chinese typography */
html[lang="zh-CN"] {
  --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}

html[lang="zh-CN"] body {
  font-size: 16px;
  line-height: 1.8;
  line-break: strict;
}

html[lang="zh-CN"] :is(h1, h2, h3, .tag) {
  letter-spacing: normal;
}

html[lang="zh-CN"] .menu {
  font-size: 14px;
  gap: clamp(20px, 3vw, 44px);
}

html[lang="zh-CN"] .menu [aria-current="page"] {
  font-weight: 600;
}

html[lang="zh-CN"] .languages {
  font-size: 12px;
}

html[lang="zh-CN"] .hero h1 {
  font-size: clamp(36px, 4.8vw, 72px);
  line-height: 1.2;
}

html[lang="zh-CN"] .hero .tag {
  font-size: 14px;
  font-weight: 500;
}

html[lang="zh-CN"] .subpage-header {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding-block: clamp(32px, 5vw, 68px) clamp(24px, 3.5vw, 44px);
}

html[lang="zh-CN"] .subpage-header h1 {
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1.24;
  text-wrap: balance;
}

html[lang="zh-CN"] :is(.subpage-intro, .subpage-body p) {
  max-inline-size: 36em;
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.85;
}

html[lang="zh-CN"] .subpage-body:not(.care-principles) {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

html[lang="zh-CN"] .subpage-body:not(.care-principles) > p {
  border: 0;
  padding-top: 0;
}

html[lang="zh-CN"] .subpage-body:not(.care-principles) h2 {
  margin-bottom: 0;
}

html[lang="zh-CN"] .looks h2 {
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.25;
}

html[lang="zh-CN"] .look h3 {
  font-size: clamp(20px, 2vw, 30px);
  margin-top: 0;
}

@media (max-width: 620px) {
  html[lang="zh-CN"] .hero h1 {
    font-size: clamp(27px, 8vw, 43px);
  }

  html[lang="zh-CN"] .subpage-header h1 {
    font-size: clamp(28px, 7.5vw, 41px);
  }

  html[lang="zh-CN"] .menu {
    gap: 24px;
  }
}

html[lang="zh-CN"] .foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 18px;
  padding-block: 28px;
}

html[lang="zh-CN"] .footer-email {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 600;
  line-height: 1.4;
}

html[lang="zh-CN"] .footer-label {
  margin-bottom: 6px;
  color: var(--soft);
  font-size: 13px;
  font-weight: 500;
}