:root {
  --v38-surface: #f5f5f7;
  --v38-ink: #101012;
  --v38-muted: #76767d;
  --v38-ease: cubic-bezier(.22, .76, .2, 1);
  --v38-switch: cubic-bezier(.72, 0, .18, 1);
}

/* 04 — keep the supplied CAMON wordmark, but give it legible dark contrast. */
.emotion-story__tone-board .emotion-story__camon-wordmark {
  filter: brightness(0) saturate(100%) !important;
  opacity: .82;
  mix-blend-mode: multiply;
}

/* 06 — two continuously looping, opposing editorial image rails. */
.emotion-story__finale {
  grid-template-columns: minmax(280px, .62fr) minmax(580px, 1.38fr);
  gap: clamp(34px, 4vw, 74px);
}

.emotion-story__mosaic.emotion-story__mosaic--v38 {
  height: min(76vh, 780px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 2px;
  overflow: hidden;
  background: #050505;
  transform: scale(.96);
}

.emotion-story__mosaic--v38 .emotion-story__rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  will-change: transform;
  animation-duration: var(--rail-duration, 44s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.emotion-story[data-phase="finale"] .emotion-story__mosaic--v38 .emotion-story__rail {
  animation-play-state: running;
}

.emotion-story__rail--up { animation-name: emotion-rail-up-v38; }
.emotion-story__rail--down { animation-name: emotion-rail-down-v38; }

@keyframes emotion-rail-up-v38 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, calc(-1 * var(--rail-distance, 1000px)), 0); }
}

@keyframes emotion-rail-down-v38 {
  from { transform: translate3d(0, calc(-1 * var(--rail-distance, 1000px)), 0); }
  to { transform: translate3d(0, 0, 0); }
}

.emotion-story__rail-sequence {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.emotion-story__mosaic--v38 figure.emotion-story__rail-frame {
  flex: none;
  width: 100%;
  overflow: hidden;
  border: 0;
  background: #050505;
}

.emotion-story__rail-frame--portrait { aspect-ratio: 4 / 5; }
.emotion-story__rail-frame--landscape { aspect-ratio: 4 / 3; }

.emotion-story__mosaic--v38 .emotion-story__rail-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  filter: none;
}

/* 16 — editorial identity spread with a watch-led visual hierarchy. */
#p16.identity-editorial {
  --identity-edge: clamp(24px, 3.4vw, 68px);
  --identity-gap: clamp(8px, .72vw, 14px);
  --identity-display-size: clamp(56px, 8.3vw, 158px);
  --identity-display-min-gap: .18em;
  --identity-page-no-bottom: clamp(60px, 6.8vw, 132px);
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: var(--v38-surface) !important;
  color: var(--v38-ink);
  position: relative;
  isolation: isolate;
}

.identity-editorial__intro {
  position: absolute;
  z-index: 5;
  left: var(--identity-edge);
  right: var(--identity-edge);
  top: clamp(34px, 5.4vh, 66px);
}

.identity-editorial__intro p,
.identity-editorial__item figcaption,
.identity-editorial__references figcaption {
  margin: 0;
  font-size: clamp(8px, .6vw, 10px);
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v38-muted);
}

.identity-editorial__intro-row {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 38vw);
  align-items: start;
  gap: clamp(28px, 5vw, 90px);
}

.identity-editorial__intro h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 46px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 450;
}

.identity-editorial__intro-row > span {
  display: block;
  justify-self: end;
  width: min(100%, 46ch);
  color: var(--v38-muted);
  font-size: clamp(11px, .9vw, 15px);
  line-height: 1.45;
  text-align: right;
}

.identity-editorial__gallery {
  position: absolute;
  z-index: 2;
  left: var(--identity-edge);
  right: var(--identity-edge);
  top: clamp(142px, 19vh, 208px);
  height: min(51vh, 540px);
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  gap: var(--identity-gap);
  align-items: stretch;
}

.identity-editorial__item,
.identity-editorial__references figure {
  min-width: 0;
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  overflow: hidden;
}

.identity-editorial__item img,
.identity-editorial__references img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  filter: none;
}

.identity-editorial__item--a { grid-column: 1 / span 5; grid-row: 1 / span 9; }
.identity-editorial__item--b { grid-column: 6 / span 4; grid-row: 1 / span 5; }
.identity-editorial__item--c { grid-column: 10 / span 3; grid-row: 6 / span 5; }
.identity-editorial__item--hero { grid-column: 13 / span 6; grid-row: 5 / span 8; }
.identity-editorial__item--d { grid-column: 19 / span 3; grid-row: 5 / span 5; }
.identity-editorial__item--e { grid-column: 22 / span 3; grid-row: 5 / span 5; }
.identity-editorial__item--f { grid-column: 19 / span 3; grid-row: 10 / span 3; }

.identity-editorial__item--hero img { object-position: 53% 48%; }
.identity-editorial__item--a img { object-position: 50% 42%; }
.identity-editorial__item--e img { object-position: 50% 38%; }

.identity-editorial__references {
  grid-column: 22 / span 3;
  grid-row: 10 / span 3;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

.identity-editorial__references figure {
  height: 100%;
  opacity: .24;
  filter: grayscale(1);
}

.identity-editorial__references img { object-position: center; }

.identity-editorial__display {
  position: absolute;
  z-index: 1;
  left: var(--identity-edge);
  right: var(--identity-edge);
  bottom: 0;
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--identity-display-min-gap);
  white-space: nowrap;
  font-size: var(--identity-display-size);
  line-height: .78;
  letter-spacing: -.055em;
  font-weight: 430;
}

.identity-editorial__display span { display: block; }
.identity-editorial > .page-no {
  right: var(--identity-edge);
  bottom: var(--identity-page-no-bottom);
  z-index: 7;
}
/* 19 — vertical 3D card transport. */
#p19.impl-v38 {
  --impl38-pad: clamp(24px, 3.4vw, 68px);
  --impl38-card-w: min(32vw, 500px);
  --impl38-product-gap: clamp(5px, .55vw, 9px);
  --impl38-product-surface: #f1f1f0;
  min-height: 100svh;
  padding: 0;
  overflow: clip;
  background: var(--v38-surface) !important;
  color: var(--v38-ink);
  position: relative;
  isolation: isolate;
}

.impl-v38__header {
  position: absolute;
  z-index: 30;
  inset: 0 0 auto;
  min-height: 92px;
  padding: clamp(22px, 3vh, 36px) var(--impl38-pad) 14px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  background: var(--v38-surface);
}

.impl-v38__header > div,
.impl-v38__header > p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: clamp(9px, .7vw, 11px);
  line-height: 1.15;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.impl-v38__header > div span,
.impl-v38__header > p,
.impl-v38__state,
.impl-v38__hint { color: var(--v38-muted); }
.impl-v38__header > p { justify-self: end; min-width: 92px; }

.impl-v38__directory-button {
  justify-self: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--v38-ink);
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 7px;
  transition: transform 180ms ease;
}

.impl-v38__directory-button:hover,
.impl-v38__directory-button:focus-visible { transform: scale(1.04); }
.impl-v38__directory-button b { font-size: 13px; }
.impl-v38__directory-button i { width: 34px; display: grid; gap: 4px; }
.impl-v38__directory-button i span { height: 2px; border-radius: 2px; background: currentColor; transition: transform 220ms ease, opacity 180ms ease; }
.is-directory-open .impl-v38__directory-button i span:first-child { transform: translateY(6px) rotate(32deg); }
.is-directory-open .impl-v38__directory-button i span:nth-child(2) { opacity: 0; }
.is-directory-open .impl-v38__directory-button i span:last-child { transform: translateY(-6px) rotate(-32deg); }

.impl-v38__directory {
  position: absolute;
  z-index: 24;
  top: 86px;
  left: 0;
  right: 0;
  padding: 16px var(--impl38-pad) 34px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 46px);
  background: var(--v38-surface);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-16px);
  transition: opacity 220ms ease, transform 280ms var(--v38-ease), visibility 220ms;
}

.is-directory-open .impl-v38__directory { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.impl-v38__directory a { min-width: 0; display: grid; grid-template-columns: 22px 1fr; gap: 4px 8px; color: var(--v38-ink); text-decoration: none; transition: transform 180ms ease; }
.impl-v38__directory a:hover { transform: translateY(-3px); }
.impl-v38__directory a > span { grid-row: 1 / span 2; color: var(--v38-muted); font-size: 10px; }
.impl-v38__directory strong { font-size: clamp(16px, 1.2vw, 22px); font-weight: 480; line-height: 1.08; }
.impl-v38__directory small { color: var(--v38-muted); font-size: clamp(10px, .72vw, 12px); line-height: 1.4; }

.impl-v38__stage {
  position: absolute;
  z-index: 4;
  inset: 92px 0 0;
  overflow: clip;
  perspective: calc(var(--impl38-card-w) * 1.52);
  transform-style: preserve-3d;
  outline: 0;
}

.impl-v38__stage::before {
  content: '';
  position: absolute;
  z-index: 21;
  inset: 0 0 auto;
  height: clamp(36px, 6vh, 48px);
  background: var(--v38-surface);
  pointer-events: auto;
}

.impl-v38__card {
  position: absolute;
  left: 50%;
  top: 46%;
  width: var(--impl38-card-w);
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: clamp(16px, 1.6vw, 24px);
  overflow: hidden;
  background: #e6e7e9;
  color: var(--v38-ink);
  cursor: pointer;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  scale: 1;
  will-change: transform, opacity, scale;
  transition: transform 900ms var(--v38-switch), opacity 720ms ease, filter 120ms ease, scale 140ms cubic-bezier(.2, .8, .2, 1);
}

.impl-v38__card[data-slot="main"] { z-index: 16; opacity: 1; transform: translate3d(-50%, -50%, 0) rotateX(-21deg) scale(1); }
.impl-v38__card[data-slot="back-1"] { z-index: 12; opacity: 1; transform: translate3d(-50%, -92%, -110px) rotateX(-21deg) scale(.93); }
.impl-v38__card[data-slot="back-2"] { z-index: 10; opacity: .84; transform: translate3d(-50%, -122%, -210px) rotateX(-21deg) scale(.86); }
.impl-v38__card[data-slot="back-3"] { z-index: 8; opacity: .5; transform: translate3d(-50%, -148%, -300px) rotateX(-21deg) scale(.8); }
.impl-v38__card[data-slot="front"] { z-index: 20; opacity: .92; pointer-events: none; transform: translate3d(-50%, 56%, 220px) rotateX(-21deg) scale(1.6); }
.impl-v38__card[data-slot="hidden"] { z-index: 2; opacity: 0; pointer-events: none; transform: translate3d(-50%, -170%, -360px) rotateX(-21deg) scale(.75); }

.impl-v38__card.is-recycling { transition: none !important; opacity: 0 !important; pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
  .impl-v38__card:hover {
    scale: 1.03;
    filter: brightness(1.025);
  }
}

.impl-v38__card:focus-visible {
  scale: 1.03;
  filter: brightness(1.025);
}

.impl-v38__media { min-height: 0; overflow: hidden; background: #e8e7e4; }
.impl-v38__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.impl-v38__card--rotate-left .impl-v38__media img { width: 145%; height: 145%; object-fit: contain; transform: translate(-15%, -15%) rotate(-90deg); }
.impl-v38__card--rotate-right .impl-v38__media img { width: 138%; height: 138%; object-fit: contain; transform: translate(-14%, -14%) rotate(90deg) scaleX(-1); }

.impl-v38__media--product-form {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--impl38-product-gap);
  background: var(--impl38-product-surface);
}

.impl-v38__product-shot {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--impl38-product-surface);
}

.impl-v38__product-shot img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transform-origin: 50% 50%;
}
.impl-v38__product-shot--1 img { transform: translate(-50%, -50%) rotate(-90deg) scale(3.15); }
.impl-v38__product-shot--2 img { transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scale(2.75); }

.impl-v38__caption { min-height: 42px; padding: 9px 13px 10px; background: #111114; color: #f5f5f7; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: clamp(9px, .68vw, 11px); letter-spacing: .06em; text-transform: uppercase; }
.impl-v38__caption strong { font: inherit; white-space: nowrap; }
.impl-v38__hint,
.impl-v38__state { position: absolute; z-index: 22; bottom: clamp(22px, 3.5vh, 44px); margin: 0; font-size: 9px; letter-spacing: .16em; }
.impl-v38__hint { right: var(--impl38-pad); }
.impl-v38__state { left: var(--impl38-pad); }
.is-directory-open .impl-v38__stage { opacity: .16; transform: translateY(24px); transition: opacity 220ms ease, transform 280ms var(--v38-ease); }

/* 20 — authoritative PPT grouping and coordinates for the five numbered territories. */
.color-story__act--range[data-v38-range="true"] {
  grid-template-columns: minmax(220px, 3fr) minmax(390px, 5fr) minmax(260px, 3fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(16px, 2.2vw, 34px);
  align-items: center;
}

.v38-range-copy { align-self: start; padding-top: clamp(12px, 3vh, 38px); }
.v38-range-copy > p { margin: 0 0 16px; color: var(--v38-muted); font-size: clamp(9px, .68vw, 11px); letter-spacing: .14em; }
.v38-range-copy h2 { margin: 0 0 24px; font-size: clamp(44px, 4.7vw, 82px); line-height: .92; letter-spacing: -.055em; font-weight: 430; }
.v38-range-copy > span { display: block; max-width: 27ch; color: #54545a; font-size: clamp(13px, 1.05vw, 18px); line-height: 1.65; }

.v38-range-map {
  position: relative;
  justify-self: center;
  width: min(100%, 520px, calc((100vh - 138px) * 1676 / 2167));
  aspect-ratio: 1676 / 2167;
  margin: 0;
  overflow: visible;
}

.v38-range-map__base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
}

.v38-range-map__region {
  position: absolute;
  z-index: 6;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.v38-range-map__region:focus-visible { box-shadow: inset 0 0 0 2px rgba(18,18,20,.72); }
.v38-range-map__region.is-active { z-index: 8; }
.v38-range-map__region--1 { left: 7.43%; top: 9.14%; width: 20.25%; height: 37.10%; }
.v38-range-map__region--2 { left: 7.43%; top: 47.02%; width: 20.25%; height: 25.38%; }
.v38-range-map__region--3 { left: 8.15%; top: 72.36%; width: 19.54%; height: 23.95%; }
.v38-range-map__region--4 { left: 26.68%; top: 47.02%; width: 32.03%; height: 25.38%; }
.v38-range-map__region--5 { left: 26.77%; top: 72.36%; width: 31.10%; height: 23.95%; }

.v38-range-index { align-self: center; margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(9px, 1.6vh, 18px); }
.v38-range-index button { width: 100%; border: 0; padding: 0; background: transparent; color: var(--v38-ink); cursor: pointer; display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; text-align: left; transition: transform 180ms var(--v38-ease), opacity 180ms ease; }
.v38-range-index button > span { grid-row: 1 / span 2; color: #9a9aa2; font-size: clamp(15px, 1.35vw, 22px); line-height: 1; }
.v38-range-index b { font-size: clamp(9px, .72vw, 12px); line-height: 1.2; font-weight: 620; }
.v38-range-index small { color: var(--v38-muted); font-size: clamp(8px, .62vw, 10px); line-height: 1.25; }
.v38-range-index button:hover,
.v38-range-index button:focus-visible,
.v38-range-index button.is-active { transform: translateX(5px) scale(1.015); }
.v38-range-index button.is-active > span,
.v38-range-index button.is-active b { color: #0d0d0f; }
.v38-range-caption { grid-column: 2; justify-self: center; margin: -2px 0 0; color: var(--v38-muted); font-size: 9px; letter-spacing: .14em; }

@media (max-width: 900px) {
  .emotion-story__finale { grid-template-columns: minmax(230px, .7fr) minmax(420px, 1.3fr); gap: 24px; }
  #p19.impl-v38 { --impl38-card-w: min(64vw, 520px); }
  .impl-v38__directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .color-story__act--range[data-v38-range="true"] { grid-template-columns: minmax(190px, 2.4fr) minmax(340px, 4fr) minmax(210px, 2.2fr); }
  .identity-editorial__intro-row { grid-template-columns: 1fr minmax(220px, 34vw); }
}

@media (max-width: 760px) {
  .emotion-story__finale { display: grid; grid-template-columns: 1fr; align-content: start; overflow-y: auto; padding-top: 100px; }
  .emotion-story__finale-copy { padding-right: 16px; }
  .emotion-story__mosaic.emotion-story__mosaic--v38 { height: 58vh; min-height: 480px; }
  .emotion-story__mosaic--v38 .emotion-story__rail { animation-duration: calc(var(--rail-duration, 44s) * 1.35); }

  #p16.identity-editorial { --identity-edge: 20px; --identity-display-size: 8.1vw; min-height: 960px; overflow: hidden; }
  .identity-editorial__intro { top: 30px; }
  .identity-editorial__intro-row { grid-template-columns: 1fr; gap: 12px; }
  .identity-editorial__intro-row > span { justify-self: start; width: min(100%, 42ch); text-align: left; }
  .identity-editorial__gallery { left: 20px; right: 20px; top: 182px; height: 610px; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); }
  .identity-editorial__item--hero { grid-column: 3 / span 4; grid-row: 1 / span 2; }
  .identity-editorial__item--a { grid-column: 1 / span 2; grid-row: 1; }
  .identity-editorial__item--b { grid-column: 1 / span 2; grid-row: 2; }
  .identity-editorial__item--c { grid-column: 1 / span 3; grid-row: 3; }
  .identity-editorial__item--d { grid-column: 4 / span 3; grid-row: 3; }
  .identity-editorial__item--e { grid-column: 1 / span 3; grid-row: 4; }
  .identity-editorial__item--f { grid-column: 4 / span 2; grid-row: 4; }
  .identity-editorial__references { grid-column: 6; grid-row: 4; grid-template-columns: 1fr; }
  .identity-editorial__references figure { height: auto; }
  .identity-editorial__display { bottom: 8px; line-height: .84; }
  .identity-editorial > .page-no { bottom: 62px; }
  #p19.impl-v38 { --impl38-pad: 20px; --impl38-card-w: min(82vw, 430px); min-height: max(100svh, 700px); }
  .impl-v38__header { grid-template-columns: 1fr auto; }
  .impl-v38__header > p { display: none; }
  .impl-v38__directory { grid-template-columns: 1fr; max-height: calc(100svh - 84px); overflow-y: auto; }
  .impl-v38__card { top: 48%; }
  .impl-v38__card[data-slot="main"] { transform: translate3d(-50%, -50%, 0) rotateX(-17deg); }
  .impl-v38__card[data-slot="back-1"] { transform: translate3d(-50%, -88%, -80px) rotateX(-17deg) scale(.93); }
  .impl-v38__card[data-slot="back-2"] { transform: translate3d(-50%, -112%, -150px) rotateX(-17deg) scale(.86); }
  .impl-v38__card[data-slot="back-3"] { opacity: 0; }
  .impl-v38__card[data-slot="front"] { transform: translate3d(-50%, 64%, 170px) rotateX(-17deg) scale(1.48); }
  .impl-v38__hint { display: none; }

  .color-story__act--range[data-v38-range="true"] { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto auto auto !important; gap: 26px; }
  .v38-range-copy { padding-top: 0; }
  .v38-range-copy > span { max-width: 38ch; }
  .v38-range-map { width: min(92vw, 500px); }
  .v38-range-index { grid-template-columns: 1fr 1fr; }
  .v38-range-caption { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .emotion-story__mosaic--v38 .emotion-story__rail { animation: none !important; }
  .emotion-story__mosaic--v38 .emotion-story__rail-sequence[aria-hidden="true"] { display: none; }
  .impl-v38__card { transition-duration: 180ms !important; transform-style: flat; }
  .impl-v38__card[data-slot="main"] { transform: translate(-50%, -50%); }
  .impl-v38__card:not([data-slot="main"]) { opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
}


/* 20 ? PPT-extracted nine-piece color grid. The unequal PPT cell ratios and equal gutters are preserved. */
.color-story__act--palette[data-v38-palette="true"] {
  grid-template-columns: minmax(220px, 3fr) minmax(440px, 7fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(28px, 4.2vw, 76px);
  align-items: center;
}

.v38-palette-copy {
  align-self: start;
  padding-top: clamp(12px, 3vh, 38px);
}

.v38-palette-copy > p {
  margin: 0 0 16px;
  color: var(--v38-muted);
  font-size: clamp(9px, .68vw, 11px);
  letter-spacing: .14em;
}

.v38-palette-copy h2 {
  margin: 0 0 24px;
  font-size: clamp(44px, 4.7vw, 82px);
  line-height: .92;
  letter-spacing: -.055em;
  font-weight: 430;
}

.v38-palette-copy > span {
  display: block;
  max-width: 28ch;
  color: #54545a;
  font-size: clamp(13px, 1.05vw, 18px);
  line-height: 1.65;
}

.v38-palette-crop-grid {
  justify-self: center;
  height: min(72vh, 720px);
  aspect-ratio: .671 / 1;
  margin: 0;
  display: grid;
  grid-template-columns: .57fr 1fr 1fr;
  grid-template-rows: 2.01fr 1.09fr 1fr;
  gap: clamp(8px, .72vw, 13px);
  overflow: hidden;
}

.v38-palette-crop-grid img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  background: transparent;
}

@media (max-width: 760px) {
  .color-story__act--palette[data-v38-palette="true"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 28px;
  }

  .v38-palette-copy { padding-top: 0; }

  .v38-palette-crop-grid {
    width: min(88vw, 520px);
    height: auto;
    aspect-ratio: .671 / 1;
  }
}