/* About section: "both sides of the lens" wipe + Lightroom-style metadata panel */
.about-lens{background:#272929;color:#fff;padding:clamp(72px,10vw,128px) 6vw}
.lens-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(280px,470px) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}

.lens-compare{--p:4%;position:relative;margin:0;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:#1b1c1c;box-shadow:0 30px 60px rgba(0,0,0,.35);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.lens-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.lens-before{position:absolute;inset:0 -1px 0 0;clip-path:inset(0 0 0 var(--p))}
.lens-handle{position:absolute;top:0;bottom:0;left:var(--p);width:0;pointer-events:none}
.lens-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:rgba(255,255,255,.9);box-shadow:0 0 12px rgba(0,0,0,.35)}
.lens-handle span{position:absolute;top:50%;left:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 6px 18px rgba(0,0,0,.35);display:grid;place-items:center;transition:transform .2s}
.lens-handle span::before{content:"";width:18px;height:10px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M5 1 1 5l4 4M13 1l4 4-4 4' fill='none' stroke='%23202020' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.lens-compare.dragging .lens-handle span,.lens-compare:hover .lens-handle span{transform:scale(1.08)}
.lens-range:focus-visible~.lens-handle span{outline:2px solid #fff;outline-offset:3px}
.lens-tag{position:absolute;top:16px;padding:6px 11px;border-radius:999px;background:rgba(20,22,22,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:opacity .3s;pointer-events:none}
.lens-tag-before{right:16px}
.lens-tag-after{left:16px}
.lens-compare[data-side="after"] .lens-tag-before,.lens-compare[data-side="before"] .lens-tag-after{opacity:.35}
.lens-compare figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;background:linear-gradient(transparent,rgba(0,0,0,.55));font-size:.78rem;letter-spacing:.06em;color:rgba(255,255,255,.88);pointer-events:none}
.lens-range{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}

.lens-copy .eyebrow{color:#b8c5c2;margin:0 0 14px}
.lens-copy h2{font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-weight:400;font-size:clamp(1.9rem,3.3vw,2.7rem);line-height:1.14;margin:0 0 18px;color:#fff}
.lens-copy>p:not(.eyebrow){color:#c9cbc9;max-width:560px;margin:0 0 30px;line-height:1.7}
.lens-copy .journey-link{color:#fff}

/* Lightroom-style metadata panel */
.lr-panel{max-width:560px;background:#1d1e1e;border:1px solid #3a3c3c;border-radius:6px;font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;box-shadow:0 18px 40px rgba(0,0,0,.25);overflow:hidden}
.lr-head{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;background:#2b2d2d;border-bottom:1px solid #3a3c3c;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#d8d8d8}
.lr-head span:last-child{color:#8f9696;letter-spacing:.06em;text-transform:none}
.lr-hist{display:block;width:100%;height:64px;background:#161717;border-bottom:1px solid #303232}
.lr-exif{display:flex;justify-content:space-between;gap:8px;padding:7px 14px;background:#161717;border-bottom:1px solid #303232;font-size:.72rem;color:#aeb5b4;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.lr-rows{margin:0;padding:10px 0 12px}
.lr-rows>div{display:grid;grid-template-columns:118px 1fr;gap:14px;padding:5px 14px;font-size:.84rem;line-height:1.45}
.lr-rows dt{color:#8f9696;text-align:right}
.lr-rows dd{margin:0;color:#ececec}
.lr-panel .lr-rows>div{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease;transition-delay:calc(var(--i,0)*70ms + 150ms)}
.lr-panel.is-in .lr-rows>div{opacity:1;transform:none}
.lr-hist path{transform-origin:bottom;transform:scaleY(.05);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.lr-panel.is-in .lr-hist path{transform:none}

@media (max-width:900px){
  .lens-inner{grid-template-columns:1fr;max-width:560px}
  .lens-compare{max-width:470px;width:100%;margin:0 auto}
}
@media (max-width:480px){
  .lens-tag{top:12px;padding:5px 9px;font-size:.6rem;letter-spacing:.09em}
  .lens-tag-before{right:12px}
  .lens-tag-after{left:12px}
  .lens-compare figcaption{font-size:.68rem;padding:32px 12px 10px}
  .lr-rows>div{grid-template-columns:96px 1fr;gap:10px;font-size:.8rem}
  .lr-exif{font-size:.66rem}
}
@media (prefers-reduced-motion:reduce){
  .lr-panel .lr-rows>div,.lr-hist path{opacity:1;transform:none;transition:none}
  .lens-handle span,.lens-tag{transition:none}
}