/* S-04 Design: before/after slider. The pencil sketch and the finished layout
   share one grid, so the divider reveals each element exactly over its sketch. */

.dz {
  --x: 62;
  --pen: #5E5A54;
  --pen-soft: rgba(94, 90, 84, .38);
  --espresso: #2A1B14;
  --terra: #C4552F;
  container-type: inline-size;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: ew-resize;
  background: #FBFAF6;
}
@media (max-width: 600px) {
  .dz { aspect-ratio: 4 / 5; }
}

/* ---------------------------------------------------------- shared grid */
.dz__art {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 4cqi;
  padding: 4.5cqi 5.5cqi 5cqi;
}
.dz__top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; height: 5cqi; }
.dz__copy { align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 2.4cqi; min-width: 0; }
.dz__visual { position: relative; min-height: 0; align-self: center; }
.dz__visual svg { width: 100%; height: auto; max-height: 100%; overflow: visible; }
.dz__kicker { display: inline-flex; align-items: center; height: 3.6cqi; padding: 0 1.6cqi; font-size: 1.55cqi; }
.dz__title { position: relative; display: block; width: 100%; font-size: 7.6cqi; line-height: .98; min-height: 15cqi; }
.dz__desc { display: block; width: 88%; font-size: 1.95cqi; line-height: 1.45; min-height: 5.6cqi; }
.dz__row { position: relative; display: flex; align-items: center; gap: 2.6cqi; margin-top: 1cqi; }
.dz__cta { display: inline-flex; align-items: center; height: 5.6cqi; padding: 0 2.8cqi; font-size: 1.8cqi; white-space: nowrap; }
.dz__price { font-size: 2.3cqi; white-space: nowrap; }

@media (max-width: 600px) {
  .dz__art {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 7cqi 50cqi auto;
    align-content: space-between;
    row-gap: 2cqi;
    padding: 6cqi 6.5cqi 7cqi;
  }
  .dz__top { height: 7cqi; }
  .dz__visual { grid-row: 2; height: 50cqi; align-self: stretch; }
  .dz__visual svg { width: 100%; height: 100%; }
  .dz__copy { grid-row: 3; align-self: end; gap: 2.4cqi; }
  .dz__kicker { height: 5.6cqi; padding: 0 2.6cqi; font-size: 2.6cqi; }
  .dz__title { font-size: 9.4cqi; min-height: 18.6cqi; }
  .dz__desc { font-size: 3.3cqi; min-height: 9.6cqi; width: 100%; }
  .dz__row { margin-top: .6cqi; }
  .dz__cta { height: 8.4cqi; padding: 0 4.4cqi; font-size: 3.1cqi; }
  .dz__price { font-size: 3.8cqi; }
}

/* ------------------------------------------------------- pencil sketch */
.dz__art--sketch {
  color: var(--pen);
  background:
    radial-gradient(circle, rgba(94, 90, 84, .22) .8px, transparent 1.2px) 0 0 / 3.2cqi 3.2cqi,
    #FBFAF6;
}
.dz__art--sketch .dz__logo {
  padding: .7cqi 1.4cqi;
  border: 1.5px solid var(--pen);
  border-radius: 3px 9px 4px 8px / 8px 3px 9px 4px;
  font: 500 1.5cqi/1 var(--mono); letter-spacing: .1em;
  transform: rotate(-1.2deg);
}
.dz__art--sketch .dz__menu { display: flex; gap: 1.6cqi; }
.dz__art--sketch .dz__menu i { width: 5cqi; height: 1.5px; background: var(--pen); transform: rotate(-1deg); }
.dz__art--sketch .dz__menu i:nth-child(2) { width: 4cqi; transform: rotate(1.4deg); }
.dz__art--sketch .dz__kicker {
  width: 17cqi;
  border: 1.5px solid var(--pen);
  border-radius: 99px 80px 99px 90px;
  transform: rotate(-.8deg);
}
.dz__art--sketch .dz__kicker i { width: 100%; height: 1.5px; background: var(--pen-soft); }
.dz__art--sketch .dz__title { display: flex; flex-direction: column; justify-content: center; gap: 2.2cqi; }
.dz__art--sketch .dz__title i {
  display: block; height: 4.8cqi; width: 88%;
  border: 1.5px solid var(--pen);
  border-radius: 4px 10px 6px 9px / 9px 4px 10px 6px;
  background: repeating-linear-gradient(-58deg, var(--pen-soft) 0 1.2px, transparent 1.2px 5px);
  transform: rotate(-.6deg);
}
.dz__art--sketch .dz__title i + i { width: 62%; transform: rotate(.8deg); }
.dz__art--sketch .dz__desc { display: flex; flex-direction: column; justify-content: center; gap: 1.7cqi; }
.dz__art--sketch .dz__desc i { display: block; height: 1.5px; width: 92%; background: var(--pen); transform: rotate(-.4deg); }
.dz__art--sketch .dz__desc i + i { width: 70%; transform: rotate(.5deg); }
.dz__art--sketch .dz__cta {
  border: 1.5px solid var(--pen);
  border-radius: 99px 70px 99px 80px;
  font: 500 1.5cqi/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  transform: rotate(-1.4deg);
}
.dz__art--sketch .dz__price {
  padding: .8cqi 1.4cqi;
  border: 1.5px dashed var(--pen);
  font: 500 1.5cqi/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  transform: rotate(1.2deg);
}
.dz__art--sketch svg { fill: none; stroke: var(--pen); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dz__art--sketch .dz__box { stroke-width: 1.5; stroke-dasharray: 2 0; }
.dz__art--sketch .dz__cross { stroke: var(--pen-soft); stroke-width: 1.2; stroke-dasharray: 6 7; }
.dz__art--sketch .dz__soft { stroke: var(--pen-soft); stroke-width: 1.2; }

/* red-pencil notes on the sketch */
.dz__note {
  position: absolute;
  font: 500 1.45cqi/1.2 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase;
  color: var(--red, #B53A26);
  white-space: nowrap;
  pointer-events: none;
}
.dz__note::before { content: ""; position: absolute; background: currentColor; }
.dz__note--title { right: 6%; top: -2.6cqi; transform: rotate(-2deg); }
.dz__note--title::before { left: -3.2cqi; top: 50%; width: 2.4cqi; height: 1px; }
.dz__note--cta { left: calc(100% + 2.6cqi); top: 50%; transform: translateY(-50%) rotate(-3deg); }
.dz__note--cta::before { left: -2cqi; top: 50%; width: 1.4cqi; height: 1px; }
.dz__note--img { left: 50%; bottom: 7%; transform: translateX(-50%) rotate(-2deg); padding: .5cqi 1cqi; border: 1px solid currentColor; background: #FBFAF6; }
.dz__note--img::before { display: none; }
@media (max-width: 600px) {
  .dz__note { font-size: 2.5cqi; }
  .dz__note--title { top: -4.2cqi; right: 2%; }
  .dz__note--cta { display: none; }
  .dz__note--img { bottom: 0; }
}

/* ----------------------------------------------------- finished layout */
.dz__art--final {
  color: var(--espresso);
  background: #EBDDC7;
  clip-path: inset(0 0 0 calc(var(--x) * 1%));
  font-family: var(--font);
}
.dz__art--final .dz__logo { font-size: 2.6cqi; font-weight: 700; letter-spacing: -.04em; }
.dz__art--final .dz__logo b { color: var(--terra); }
.dz__art--final .dz__menu { display: flex; gap: 2.6cqi; font-size: 1.5cqi; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.dz__art--final .dz__kicker { border: 1.5px solid var(--terra); border-radius: 99px; color: var(--terra); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dz__art--final .dz__title { font-family: var(--display, var(--font)); font-weight: 600; letter-spacing: -.03em; }
.dz__art--final .dz__desc { color: rgba(42, 27, 20, .74); }
.dz__art--final .dz__cta { border-radius: 99px; background: var(--espresso); color: #F7EFE2; font-weight: 600; }
.dz__art--final .dz__price { font-weight: 700; letter-spacing: -.01em; }
@media (max-width: 600px) {
  .dz__art--final .dz__logo { font-size: 4.4cqi; }
  .dz__art--final .dz__menu { font-size: 2.5cqi; gap: 3.6cqi; }
}

/* ------------------------------------------------------- legend & handle */
.dz-legend {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: -4px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.dz-legend span { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 4px; }
.dz-legend__a { color: #5E5A54; border: 1px solid rgba(94, 90, 84, .38); background: #FBFAF6; }
.dz-legend__b { color: #F7EFE2; background: #2A1B14; }
.dz-legend__a::before, .dz-legend__b::after {
  content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 0 1.5px 1.5px;
}
.dz-legend__a::before { transform: rotate(45deg); }
.dz-legend__b::after { transform: rotate(-135deg); }

.dz__handle {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  left: calc(var(--x) * 1%);
  width: 44px; margin-left: -22px;
  outline: none;
  touch-action: pan-y;
}
.dz__handle::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; margin-left: -1px;
  background: var(--ink);
}
.dz__knob {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(244, 241, 234, .9), 0 10px 24px -10px rgba(31, 53, 99, .7);
  transition: transform .25s var(--ease);
}
.dz__knob::before, .dz__knob::after {
  content: ""; position: absolute; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border: solid var(--paper); border-width: 0 0 2px 2px;
}
.dz__knob::before { left: 11px; transform: rotate(45deg); }
.dz__knob::after { right: 11px; transform: rotate(-135deg); }
.dz.is-dragging .dz__knob, .dz__handle:hover .dz__knob { transform: scale(1.08); }
.dz__handle:focus-visible .dz__knob { box-shadow: 0 0 0 4px rgba(244, 241, 234, .9), 0 0 0 6px var(--red); }
.dz__x {
  position: absolute; left: 50%; top: calc(50% + 34px);
  transform: translateX(-50%);
  padding: 4px 6px 3px;
  background: var(--ink); color: var(--paper);
  font: 500 10.5px/1 var(--mono); letter-spacing: .04em; white-space: nowrap;
}