:root {
  --plum-ink: #21122b;
  --deep: #160b1e;
  --aubergine: #4b2d5f;
  --violet: #8b64a8;
  --iris: #b18cc9;
  --lilac: #d9c6e8;
  --mist: #f2eaf5;
  --moon: #f7f3f7;
  --apricot: #efc9b8;
  --text-dark: #2b1833;
  --text-light: #f4eff4;
  --line: rgba(43, 24, 51, 0.14);
  --line-strong: rgba(43, 24, 51, 0.3);
  --line-dark: rgba(244, 239, 244, 0.16);
  --display: "Bodoni Moda", "Noto Serif SC", serif;
  --cn: "Noto Serif SC", "Songti SC", serif;
  --utility: "Tenor Sans", "Noto Sans SC", sans-serif;
  --sans: "Noto Sans SC", "Tenor Sans", sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --selection: rgba(177, 140, 201, 0.35);
  --focus: #8b64a8;
}

body.d4 {
  background: var(--deep);
  color: var(--text-light);
  font-family: var(--cn);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.95;
  overflow-x: hidden;
}

.d4 .grain {
  opacity: 0.045;
}

.d4 .u-label {
  font-family: var(--utility);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

html[lang="en"] .hero__title {
  font-family: var(--display);
  font-size: clamp(40px, 4.6vw, 66px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.015em;
}

html[lang="en"] .hero__title em {
  letter-spacing: 0.015em;
}

html[lang="en"] .brand__grid h2 {
  font-family: var(--display);
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0.015em;
}

html[lang="en"] .pieces__head h2,
html[lang="en"] .enquiry__head h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
}

html[lang="en"] .piece__name h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ---------- header ---------- */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  color: var(--text-dark);
  --logo-color: #3e0d3b;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.5s, color 0.5s, border-color 0.5s, backdrop-filter 0.5s;
}

.masthead.on-dark {
  color: var(--text-light);
  --logo-color: var(--text-light);
  background: rgba(18, 10, 22, 0.82);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--line-dark);
}

body.menu-open .masthead {
  color: var(--text-light);
  --logo-color: var(--text-light);
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: var(--line-dark);
}

body.menu-open .masthead__bar {
  border-bottom-color: var(--line-dark);
}

.masthead__bar {
  border-bottom: 1px solid rgba(43, 24, 51, 0.12);
  transition: border-color 0.5s;
}

.masthead.on-dark .masthead__bar {
  border-bottom-color: var(--line-dark);
}

.masthead__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  font-family: var(--utility);
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.72;
}

.masthead__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 30px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.brand__mark {
  font-family: var(--display);
  font-size: 24px;
  color: currentColor;
}

.brand__cn {
  font-family: var(--cn);
  font-size: 10px;
  letter-spacing: 0.42em;
  color: currentColor;
  opacity: 0.65;
}

.brand--logo {
  align-items: center;
  gap: 12px;
}

.brand__emblem,
.brand__wordmark {
  display: block;
  flex: 0 0 auto;
  background: var(--logo-color);
  transition: background 0.5s;
}

.brand__emblem {
  width: 48px;
  height: 48px;
  -webkit-mask: url("/assets/img/logo-mark-header.png") center / contain no-repeat;
  mask: url("/assets/img/logo-mark-header.png") center / contain no-repeat;
}

.brand__wordmark {
  width: 84px;
  height: 34px;
  -webkit-mask: url("/assets/img/logo-wordmark.png") left center / contain no-repeat;
  mask: url("/assets/img/logo-wordmark.png") left center / contain no-repeat;
}

.nav {
  display: flex;
  gap: 34px;
  margin-left: auto;
}

.nav a {
  font-family: var(--utility);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: currentColor;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, opacity 0.3s;
}

.nav a:hover {
  border-bottom-color: currentColor;
}

.masthead__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang {
  font-family: var(--utility);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: currentColor;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.lang:hover {
  opacity: 1;
}

.pill {
  font-family: var(--utility);
  font-size: 10px;
  letter-spacing: 0.2em;
  border: 1px solid currentColor;
  padding: 10px 20px;
  color: currentColor;
  transition: background 0.35s;
}

.pill:hover {
  background: rgba(139, 100, 168, 0.18);
}

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  position: relative;
  color: currentColor;
}

.menu-toggle span {
  position: absolute;
  left: 9px;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease), top 0.4s var(--ease);
}

.menu-toggle span:first-child {
  top: 17px;
}

.menu-toggle span:last-child {
  top: 23px;
}

body.menu-open .menu-toggle span:first-child {
  top: 20px;
  transform: rotate(45deg);
}

body.menu-open .menu-toggle span:last-child {
  top: 20px;
  transform: rotate(-45deg);
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: #160b1e;
  color: var(--text-light);
  display: flex;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0.45s;
}

body.menu-open .menu {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.menu__inner {
  width: min(460px, calc(100% - 72px));
  margin-inline: auto;
}

.menu__inner > a {
  display: block;
  font-family: var(--cn);
  font-weight: 300;
  font-size: 30px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
}

.menu__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  font-family: var(--utility);
  font-size: 10px;
  letter-spacing: 0.2em;
  opacity: 0.6;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: 150px;
  background: linear-gradient(180deg, #f6eff8 0%, #eddfF4 26%, #dcc7e9 48%, #bf9cd4 64%, #9972b5 78%, #75528f 90%, #5b3c72 100%);
  overflow: hidden;
}

.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sun {
  position: absolute;
  right: 14%;
  top: 40%;
  width: clamp(180px, 21vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 46% 42%, #fdf3ea 0%, #f6ded1 38%, #efc6b6 58%, rgba(239, 198, 182, 0) 74%);
  filter: blur(2px);
  opacity: 0.92;
  transform: translateY(calc(var(--sink, 0) * 34vh));
  transition: transform 0.1s linear;
}

.sun::after {
  content: "";
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 218, 202, 0.34), transparent 62%);
  filter: blur(18px);
}

.horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 66%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, transparent 50%, rgba(75, 45, 95, 0.26) 66%, rgba(75, 45, 95, 0.26) 90%, transparent 100%);
}

.horizon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.18), transparent);
  filter: blur(6px);
}

.haze {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.6;
}

.haze--a {
  width: 46%;
  height: 18%;
  left: -8%;
  top: 52%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5), transparent 68%);
}

.haze--b {
  width: 50%;
  height: 22%;
  right: 2%;
  top: 61%;
  background: radial-gradient(ellipse at center, rgba(239, 201, 184, 0.35), transparent 70%);
}

.ground-silk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 46%;
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  align-items: flex-start;
  padding-top: 52px;
}

.hero__copy {
  max-width: 780px;
}

.hero__eyebrow {
  color: #6a4a83;
  margin-bottom: 34px;
}

.hero__title {
  font-family: var(--cn);
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 200;
  line-height: 1.38;
  letter-spacing: 0.12em;
  color: var(--text-dark);
  text-wrap: balance;
}

.hero__title span,
.hero__title em {
  display: block;
}

.hero__title em {
  font-style: normal;
  color: #55306f;
  letter-spacing: 0.12em;
}

.hero__edition {
  margin-top: 30px;
  font-family: var(--utility);
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 239, 244, 0.7);
}

.hero__latin {
  margin-top: 22px;
  font-family: var(--display);
  font-style: italic;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #55306f;
}

.hero__lede {
  margin-top: 24px;
  max-width: 470px;
  font-family: var(--cn);
  font-size: 14.5px;
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: #35203f;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin-top: 36px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--utility);
  font-size: 10px;
  letter-spacing: 0.22em;
  padding: 15px 30px;
  transition: transform 0.35s var(--ease), background 0.35s, color 0.35s, border-color 0.35s;
}

.btn--ink {
  background: var(--plum-ink);
  border: 1px solid var(--plum-ink);
  color: var(--text-light);
}

.btn--ink:hover {
  background: #3b2349;
  border-color: #3b2349;
  transform: translateY(-2px);
}

.btn--text {
  color: var(--text-dark);
  border: 1px solid rgba(43, 24, 51, 0.32);
  background: rgba(247, 243, 247, 0.38);
  backdrop-filter: blur(6px);
  padding: 13px 24px;
  letter-spacing: 0.18em;
}

.btn--text:hover {
  background: rgba(247, 243, 247, 0.65);
  border-color: rgba(43, 24, 51, 0.55);
}

.hero__foot {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px 28px;
  border-top: 1px solid rgba(244, 239, 244, 0.24);
  color: rgba(244, 239, 244, 0.78);
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--utility);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.scroll-cue i {
  display: block;
  width: 46px;
  height: 1px;
  background: rgba(244, 239, 244, 0.5);
  position: relative;
  overflow: hidden;
}

.scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f4eff4;
  transform: translateX(-100%);
  animation: cue 2.8s var(--ease) infinite;
}

@keyframes cue {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ---------- hour rail ---------- */

.hour-rail {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 60px;
  height: 320px;
  padding: 12px 8px;
  background: rgba(24, 13, 32, 0.55);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(244, 239, 244, 0.16);
  border-radius: 16px;
  color: var(--text-light);
  pointer-events: none;
}

.hour-rail__label {
  position: absolute;
  left: 9px;
  top: 14px;
  bottom: 44px;
  writing-mode: vertical-rl;
  font-family: var(--utility);
  font-size: 6.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244, 239, 244, 0.5);
}

.hour-rail__track {
  position: absolute;
  right: 16px;
  top: 16px;
  bottom: 44px;
  width: 1px;
  background: rgba(244, 239, 244, 0.22);
}

.hour-rail__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: calc(var(--p, 0) * 100%);
  background: linear-gradient(#efc9b8, #b18cc9);
}

.hour-rail__marker {
  position: absolute;
  left: 50%;
  top: calc(var(--p, 0) * 100%);
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f3d6c6;
  box-shadow: 0 0 0 3px rgba(243, 214, 198, 0.18);
}

.hour-rail__ticks {
  position: absolute;
  right: 16px;
  top: 16px;
  bottom: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(9px);
}

.hour-rail__ticks li {
  font-family: var(--utility);
  font-size: 6.5px;
  letter-spacing: 0.02em;
  color: rgba(244, 239, 244, 0.5);
  list-style: none;
}

.hour-rail__now {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  text-align: center;
  font-family: var(--utility);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-light);
}

/* ---------- hours ---------- */

.hours {
  background: #f6f0f6;
  color: var(--text-dark);
  padding: 170px 0 150px;
}

.chapter {
  display: flex;
  align-items: center;
  gap: 16px;
}

.chapter::before {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  flex: 0 0 auto;
}

.hours .u-label {
  color: #8c6f9e;
}

.hours__head {
  max-width: 640px;
}

.hours__head h2 {
  margin-top: 26px;
  font-family: var(--cn);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 200;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-wrap: balance;
}

.hours__lede {
  margin-top: 20px;
  max-width: 460px;
  font-size: 13px;
  line-height: 2.05;
  color: #6b5875;
}

.timetable {
  margin-top: 64px;
  border-bottom: 1px solid var(--line);
}

.hour-row {
  display: grid;
  grid-template-columns: 88px 200px 1fr 280px 24px;
  align-items: center;
  gap: 30px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  transition: background 0.5s;
}

.hour-row:hover {
  background: rgba(139, 100, 168, 0.06);
}

.hour-row__time {
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: 0.06em;
  color: #5f3a7c;
}

.hour-row__name strong {
  display: block;
  font-family: var(--cn);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0.12em;
}

.hour-row__name em {
  display: block;
  margin-top: 2px;
  font-family: var(--utility);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8c6f9e;
}

.hour-row__swatch {
  height: 52px;
  border-radius: 1px;
  background:
    repeating-linear-gradient(104deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 24px),
    linear-gradient(100deg, var(--from), var(--to));
  box-shadow: inset 0 0 0 1px rgba(43, 24, 51, 0.05);
  transition: height 0.5s var(--ease), filter 0.5s;
}

.hour-row:hover .hour-row__swatch {
  height: 62px;
  filter: saturate(1.04);
}

.hour-row__desc {
  font-size: 12px;
  line-height: 1.9;
  color: #6b5875;
}

.hour-row__arrow {
  font-size: 16px;
  color: #6b3f86;
  transition: transform 0.4s var(--ease);
}

.hour-row:hover .hour-row__arrow {
  transform: translate(3px, -3px);
}

/* ---------- objects ---------- */

.objects {
  background: #1b0f23;
  padding: 170px 0;
}

.objects__head {
  max-width: 620px;
}

.objects .u-label {
  color: #b18cc9;
}

.objects__head h2 {
  margin-top: 26px;
  font-family: var(--cn);
  font-size: clamp(34px, 3.9vw, 56px);
  font-weight: 200;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: var(--text-light);
  text-wrap: balance;
}

.objects__note {
  margin-top: 20px;
  max-width: 480px;
  font-size: 12px;
  line-height: 2;
  color: rgba(244, 239, 244, 0.52);
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 70px;
}

.product__field {
  position: relative;
  aspect-ratio: 0.78;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--field);
  color: var(--field-ink);
  box-shadow: inset 0 -50px 70px rgba(43, 24, 51, 0.1);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.product__field::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid currentColor;
  opacity: 0.1;
  transition: inset 0.6s var(--ease), opacity 0.6s;
}

.product__field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 50% 18%, rgba(255, 255, 255, 0.28), transparent 66%);
  pointer-events: none;
}

.product:hover .product__field {
  transform: translateY(-4px);
  box-shadow:
    inset 0 -50px 70px rgba(43, 24, 51, 0.1),
    0 26px 46px rgba(0, 0, 0, 0.28);
}

.product:hover .product__field::before {
  inset: 18px;
  opacity: 0.2;
}

.garment {
  position: relative;
  z-index: 1;
  width: 62%;
  max-width: 195px;
  fill: currentColor;
  fill-opacity: 0.04;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
  transition: transform 0.6s var(--ease);
}

.product:hover .garment {
  transform: translateY(-6px);
}

.product__time,
.product__color {
  position: absolute;
  z-index: 2;
  font-family: var(--utility);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
}

.product__time {
  top: 22px;
  left: 22px;
}

.product__index {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  font-family: var(--utility);
  font-size: 8px;
  letter-spacing: 0.18em;
  opacity: 0.55;
}

.product__color {
  bottom: 22px;
  left: 22px;
}

.product__meta {
  padding-top: 18px;
}

.product__meta h3 {
  font-family: var(--cn);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-light);
}

.product__meta p {
  margin-top: 5px;
  font-family: var(--utility);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(244, 239, 244, 0.5);
}

.product__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.product__price {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #c8a6dd;
}

.product__book {
  font-family: var(--utility);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(244, 239, 244, 0.65);
  border-bottom: 1px solid rgba(244, 239, 244, 0.25);
  padding-bottom: 3px;
  transition: color 0.3s, border-color 0.3s;
}

.product__book:hover {
  color: var(--text-light);
  border-bottom-color: var(--text-light);
}

/* ---------- house ---------- */

.house {
  background: #f6f0f6;
  color: var(--text-dark);
  padding: 170px 0 0;
}

.house .u-label {
  color: #8c6f9e;
}

.brand__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(50px, 8vw, 130px);
  align-items: start;
  margin-top: 26px;
}

.brand__grid h2 {
  font-family: var(--cn);
  font-size: clamp(32px, 3.8vw, 54px);
  font-weight: 200;
  line-height: 1.58;
  letter-spacing: 0.12em;
  text-wrap: balance;
}

.brand__copy {
  max-width: 430px;
  padding-top: 8px;
}

.brand__copy p {
  font-family: var(--cn);
  font-size: 13.5px;
  line-height: 2.15;
  letter-spacing: 0.03em;
  color: #5f4a69;
  text-wrap: pretty;
}

.brand__copy p + p {
  margin-top: 20px;
}

.brand__swatch {
  position: relative;
  height: 96px;
  margin-top: 80px;
  overflow: hidden;
  background:
    repeating-linear-gradient(104deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 26px),
    linear-gradient(100deg, #f1cdbd 0%, #c9a6d6 38%, #8b64a8 72%, #4b2d5f 100%);
}

.brand__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 20% 0%, rgba(255, 255, 255, 0.28), transparent 60%);
}

.brand__swatch span {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 1;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(244, 239, 244, 0.8);
}

.brand__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0 26px;
  border-top: 1px solid var(--line);
  font-family: var(--utility);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8c6f9e;
}

/* ---------- pieces ---------- */

.pieces {
  background: #1b0f23;
  padding: 170px 0;
}

.pieces .u-label {
  color: #b18cc9;
}

.pieces__head {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 30px;
  align-items: end;
}

.pieces__head .chapter {
  grid-column: 1 / -1;
}

.pieces__head h2 {
  margin-top: 26px;
  font-family: var(--cn);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 200;
  line-height: 1.48;
  letter-spacing: 0.14em;
  color: var(--text-light);
}

.pieces__note {
  padding-bottom: 12px;
  font-family: var(--cn);
  font-size: 12.5px;
  line-height: 2.05;
  letter-spacing: 0.02em;
  color: rgba(244, 239, 244, 0.62);
  text-wrap: pretty;
}

.piece-list {
  margin-top: 56px;
  border-bottom: 1px solid var(--line-dark);
}

.piece {
  display: grid;
  grid-template-columns: 30px 112px 240px minmax(200px, 300px) 1fr 108px;
  align-items: center;
  gap: 30px;
  padding: 26px 0;
  border-top: 1px solid var(--line-dark);
  transition: background 0.4s;
}

.piece:hover {
  background: rgba(255, 255, 255, 0.025);
}

.piece__index {
  font-family: var(--utility);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(244, 239, 244, 0.4);
}

.piece__swatch {
  position: relative;
  width: 112px;
  aspect-ratio: 0.82;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--field);
  color: var(--field-ink);
  box-shadow: inset 0 -30px 40px rgba(43, 24, 51, 0.08);
}

.piece__swatch::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid currentColor;
  opacity: 0.1;
}

.piece__swatch .garment {
  width: 72%;
  max-width: 86px;
}

.piece__swatch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.piece:hover .garment {
  transform: translateY(-3px);
}

.piece__name h3 {
  font-family: var(--cn);
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--text-light);
}

.piece__meta p {
  font-family: var(--utility);
  font-size: 9px;
  line-height: 1.9;
  letter-spacing: 0.12em;
  color: rgba(244, 239, 244, 0.5);
}

.piece__meta p:first-child {
  color: #c8a6dd;
}

.piece__price {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #c8a6dd;
  text-align: right;
}

.piece__book {
  justify-self: end;
  font-family: var(--utility);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(244, 239, 244, 0.65);
  border-bottom: 1px solid rgba(244, 239, 244, 0.25);
  padding-bottom: 3px;
  transition: color 0.3s, border-color 0.3s;
}

.piece__book:hover {
  color: var(--text-light);
  border-bottom-color: var(--text-light);
}

.piece-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0 24px 202px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--utility);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(244, 239, 244, 0.6);
  transition: color 0.3s;
}

.piece-more:hover {
  color: var(--text-light);
}

.piece-more span:last-child {
  border-bottom: 1px solid rgba(244, 239, 244, 0.25);
  padding-bottom: 3px;
}

/* ---------- enquiry ---------- */

.enquiry {
  background:
    radial-gradient(70% 60% at 20% 10%, rgba(139, 100, 168, 0.3), transparent 60%),
    linear-gradient(160deg, #2b1739, #180d20 60%, #1f1029);
  padding: 170px 0;
  color: var(--text-light);
}

.enquiry__inner {
  max-width: 860px;
  text-align: center;
}

.enquiry .u-label {
  color: #c8a6dd;
}

.enquiry__head h2 {
  margin-top: 26px;
  font-family: var(--cn);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 200;
  line-height: 1.58;
  letter-spacing: 0.14em;
  color: var(--text-light);
  text-wrap: pretty;
}

.enquiry__head p:last-child {
  margin-top: 18px;
  font-family: var(--cn);
  font-size: 13.5px;
  line-height: 2.1;
  letter-spacing: 0.03em;
  color: rgba(244, 239, 244, 0.65);
  text-wrap: pretty;
}

.enquiry__panel {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 44px;
  align-items: center;
  text-align: left;
  margin-top: 56px;
  padding: 36px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.enquiry__qr {
  text-decoration: none;
  color: inherit;
}

.enquiry__qr img {
  display: block;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(244, 239, 244, 0.2);
  background: #fff;
  object-fit: contain;
}

.enquiry__qr .u-label {
  display: block;
  margin-top: 12px;
  max-width: 118px;
  font-size: 7px;
  line-height: 1.8;
  letter-spacing: 0.16em;
  color: rgba(244, 239, 244, 0.45);
}

.enquiry__kicker {
  font-family: var(--utility);
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #c8a6dd;
}

.enquiry__big {
  margin-top: 8px;
  font-family: var(--cn);
  font-size: 26px;
  letter-spacing: 0.12em;
}

.enquiry__copy {
  margin-top: 12px;
  max-width: 460px;
  font-family: var(--cn);
  font-size: 12.5px;
  line-height: 2.05;
  letter-spacing: 0.03em;
  color: rgba(244, 239, 244, 0.65);
  text-wrap: pretty;
}

.enquiry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.enquiry__hours {
  margin-top: 20px;
  font-family: var(--utility);
  font-size: 8px;
  letter-spacing: 0.16em;
  line-height: 2;
  color: rgba(244, 239, 244, 0.42);
}

.enquiry__note {
  margin-top: 34px;
  font-family: var(--utility);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: rgba(244, 239, 244, 0.3);
}

.btn--sun {
  background: var(--apricot);
  border: 1px solid var(--apricot);
  color: var(--text-dark);
}

.btn--sun:hover {
  background: #f6ddcf;
  border-color: #f6ddcf;
  transform: translateY(-2px);
}

.btn--ghost {
  border: 1px solid rgba(244, 239, 244, 0.32);
  color: var(--text-light);
}

.btn--ghost:hover {
  border-color: var(--text-light);
  transform: translateY(-2px);
}

/* ---------- footer ---------- */

.site-foot {
  background: #120a16;
  border-top: 1px solid var(--line-dark);
  padding: 90px 0 36px;
  color: var(--text-light);
}

.site-foot__top {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 70px;
}

.site-foot__brand .brand__mark {
  font-size: 30px;
}

.site-foot__logo {
  width: 132px;
  height: 186px;
  margin-bottom: 20px;
  background: var(--text-light);
  -webkit-mask: url("/assets/img/logo-full.png") center / contain no-repeat;
  mask: url("/assets/img/logo-full.png") center / contain no-repeat;
}

.site-foot__line {
  margin-top: 18px;
  font-family: var(--cn);
  font-size: 12.5px;
  line-height: 2.05;
  letter-spacing: 0.03em;
  color: rgba(244, 239, 244, 0.58);
  max-width: 280px;
}

.site-foot__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.site-foot__cols .u-label {
  margin-bottom: 16px;
  color: #b18cc9;
}

.site-foot__cols a {
  display: block;
  font-size: 12px;
  color: rgba(244, 239, 244, 0.65);
  margin-bottom: 9px;
  transition: color 0.3s;
}

.site-foot__cols a:hover {
  color: var(--text-light);
}

.site-foot__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 70px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--utility);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: rgba(244, 239, 244, 0.4);
}

/* ---------- responsive ---------- */

@media (max-width: 1320px) {
  .hour-rail {
    display: none;
  }
}

@media (max-width: 1080px) {
  .hero {
    padding-top: 140px;
  }

  .hero__inner {
    padding-top: 38px;
  }

  .hero__title {
    font-size: clamp(44px, 7vw, 70px);
  }

  .hour-row {
    grid-template-columns: 78px 180px 1fr 220px 20px;
    gap: 20px;
  }

  .palette-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }
}

@media (max-width: 900px) {
  .nav,
  .pill {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .masthead__main {
    height: 68px;
  }

  .hero__title {
    font-size: clamp(38px, 8.4vw, 56px);
    line-height: 1.44;
  }

  .hero__lede {
    max-width: 100%;
  }

  .sun {
    right: -10%;
    top: 58%;
    width: 220px;
    opacity: 0.7;
    filter: blur(3px);
  }

  .horizon {
    display: none;
  }

  .chapter::before {
    width: 24px;
  }

  .hero__foot .u-label:last-child {
    display: none;
  }

  .house {
    padding: 100px 0 0;
  }

  .pieces,
  .enquiry {
    padding: 100px 0;
  }

  .brand__emblem {
    width: 42px;
    height: 42px;
  }

  .brand__wordmark {
    width: 74px;
    height: 30px;
  }

  .site-foot__logo {
    width: 112px;
    height: 158px;
  }

  .brand__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .brand__swatch {
    margin-top: 56px;
  }

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

  .pieces__head .chapter {
    grid-column: auto;
  }

  .pieces__note {
    max-width: 420px;
    padding-bottom: 0;
  }

  .piece {
    grid-template-columns: 88px 1fr auto;
    grid-template-areas:
      "swatch name index"
      "swatch meta price"
      "swatch book book";
    gap: 6px 20px;
    padding: 22px 0;
  }

  .piece__index {
    grid-area: index;
    justify-self: end;
  }

  .piece__swatch {
    grid-area: swatch;
    width: 88px;
    align-self: start;
  }

  .piece__name {
    grid-area: name;
  }

  .piece__meta {
    grid-area: meta;
  }

  .piece__price {
    grid-area: price;
    align-self: start;
  }

  .piece__book {
    grid-area: book;
    justify-self: start;
  }

  .piece-more {
    padding-left: 0;
  }

  .enquiry__panel {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .site-foot__top {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

@media (max-width: 600px) {
  .hero {
    padding-top: 118px;
  }

  .hero__title {
    font-size: 33px;
    line-height: 1.46;
    letter-spacing: 0.08em;
  }

  .hero__latin {
    font-size: 20px;
  }

  .hero__edition {
    font-size: 7px;
    letter-spacing: 0.2em;
    color: rgba(43, 24, 51, 0.55);
  }

  .hero__actions {
    gap: 16px;
  }

  .btn {
    padding: 13px 22px;
    font-size: 9px;
  }

  .hero__foot {
    font-size: 8px;
  }

  .brand__emblem {
    width: 38px;
    height: 38px;
  }

  .brand__wordmark {
    width: 68px;
    height: 28px;
  }

  .brand__grid h2 {
    font-size: 32px;
  }

  .brand__swatch {
    height: 64px;
    margin-top: 50px;
  }

  .brand__foot {
    font-size: 7px;
  }

  .pieces__head h2 {
    font-size: 36px;
  }

  .piece {
    grid-template-columns: 76px 1fr auto;
    gap: 6px 14px;
  }

  .piece__swatch {
    width: 76px;
  }

  .piece__name h3 {
    font-size: 17px;
  }

  .piece__meta p {
    font-size: 8px;
  }

  .piece__price {
    font-size: 13px;
  }

  .enquiry__head h2 {
    font-size: clamp(26px, 7vw, 32px);
    letter-spacing: 0.1em;
  }

  .enquiry__qr img {
    width: 136px;
    height: 136px;
  }

  .enquiry__actions {
    gap: 10px;
  }

  .site-foot__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .site-foot__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 420px) {
  .brand__cn {
    display: none;
  }

  .hero__title {
    font-size: 30px;
  }

  .hero__title em {
    letter-spacing: 0.04em;
  }

  .hour-row__name strong {
    font-size: 22px;
  }
}