.colorway-back {
  color: #80613f;
  font-size: .875rem;
}

.colorway-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 32px;
  margin: 20px 0 32px;
  padding: clamp(24px, 5vw, 64px);
  background: #eee8dd;
}

.colorway-eyebrow,
.colorway-category {
  color: #77562e;
  font-size: .75rem;
  letter-spacing: .12em;
}

.colorway-hero h1 {
  margin: 12px 0 18px;
  font: 600 clamp(38px, 5.3vw, 72px)/.98 "Cormorant Garamond", Georgia, serif;
}

.colorway-hero p:last-child,
.colorway-note p {
  max-width: 52ch;
  color: #65574b;
  line-height: 1.7;
}

.colorway-hero-samples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.colorway-hero-samples img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
}

.colorway .color-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.colorway .color-card {
  border: 1px solid #d8c8b2;
  background: #fffdf9;
}

.colorway-sample {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e9e2d7;
}

.colorway-sample img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 25%;
}

.colorway-enlarge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #fffdf9;
  color: #302820;
  padding: 6px 9px;
  font-size: .75rem;
}

.colorway-card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
}

.colorway-card-body h2 {
  margin: 5px 0 0;
  font: 600 clamp(19px, 2vw, 25px)/1.1 "Cormorant Garamond", Georgia, serif;
}

.colorway-reference {
  color: #77562e;
  font-size: .75rem;
}

.colorway-copy,
.colorway-dialog button {
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid #b59a76;
  background: #fffdf9;
  color: #654c30;
  cursor: pointer;
}

.colorway #color-empty {
  padding: 24px 0;
}

.colorway-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 36px;
  padding: clamp(20px, 4vw, 36px);
  background: #eee8dd;
}

.colorway-note h2 {
  margin: 0 0 8px;
  font: 600 31px/1.1 "Cormorant Garamond", Georgia, serif;
}

.colorway-dialog {
  width: min(680px, calc(100% - 32px));
  max-height: 90dvh;
  margin: auto;
  padding: 16px;
  border: 1px solid #d8c8b2;
  background: #fffdf9;
  color: #302820;
}

.colorway-dialog::backdrop {
  background: rgb(30 23 17 / 70%);
}

.colorway-dialog form {
  float: right;
}

.colorway-dialog h2 {
  margin: 10px 52px 18px 0;
  font-size: 1.2rem;
}

.colorway-dialog img {
  display: block;
  width: 100%;
  max-height: 72dvh;
  object-fit: contain;
}

@media (max-width: 1050px) {
  .colorway .color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .colorway-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .colorway-hero-samples { max-width: 380px; }
  .colorway .color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 380px) {
  .colorway .color-grid { grid-template-columns: minmax(0, 1fr); }
}