/* "Why a physical thing works": lock and key. Two pictures do the talking. */
.lk { --lk-pine: #3F4021; --lk-green: #5a7a1f; --lk-beige: #f5f0ec; --lk-red: #c2412b;
  padding: 88px 16px 96px; text-align: center; }
.lk h2 { font-size: clamp(34px, 8.8vw, 68px); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; max-width: 15ch; margin: 0 auto; text-wrap: balance; }
.lk h2 em { font-style: normal; color: var(--lk-green); font-weight: 600; }
.lk .lk-sub { margin: 16px auto 0; max-width: 30ch; font-size: clamp(19px, 2vw, 24px); font-weight: 600; line-height: 1.35; color: var(--lk-green); text-wrap: balance; }

.lk-pair { margin: 40px auto 0; max-width: 900px; display: grid; gap: 16px; }
@media (min-width: 760px) { .lk-pair { grid-template-columns: 1fr 1fr; gap: 24px; } }
.lk-side { border-radius: 26px; overflow: hidden; background: var(--lk-beige); text-align: left; display: flex; flex-direction: column; margin: 0; }
.lk-side img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; border-radius: 0; }
.lk-txt { padding: 20px 22px 24px; }
.lk-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; font-size: clamp(16px, 1.5vw, 18px); font-weight: 700; line-height: 1; }
.lk-bad .lk-tag { background: #fbe3dd; color: var(--lk-red); }
.lk-good { background: #eef0e4; }
.lk-good .lk-tag { background: var(--lk-pine); color: #fff; }
.lk-side h3 { margin: 14px 0 0; font-size: clamp(26px, 3vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
.lk-good h3 { color: var(--lk-green); }

.lk-pic { position: relative; container-type: inline-size; }
/* magnifier on the far shelf: Pauzie with the key, in the other room */
.lk-zoom { position: absolute; left: 6cqw; top: 5cqw; width: 38cqw; height: 38cqw; border-radius: 50%; border: 5px solid #fff;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.45); background: url(assets/why/k2.webp?v=2) no-repeat;
  background-size: 300cqw 450cqw; background-position: calc(19cqw - 212.4cqw) calc(19cqw - 96.75cqw); }
.lk-zoom::after { content: ""; position: absolute; left: 100%; top: 62%; width: 22cqw; height: 3px; background: #fff; transform-origin: left; transform: rotate(8deg); border-radius: 3px; }

.lk-end { margin: 44px auto 0; max-width: 22ch; font-size: clamp(28px, 5.6vw, 46px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.lk-end em { font-style: normal; color: var(--lk-green); }