/* Approved compact header and Under the surface interaction. */
.essay .editorial-header { padding-bottom:25px; }
.essay .editorial-header .post-heading { max-width:660px; }
.essay .editorial-header .cover { margin-top:0; max-width:660px; }
.lens-art { position:relative; width:100%; aspect-ratio:2.2; margin:28px 0 0; isolation:isolate; overflow:hidden; --px:50%; --py:50%; }
.lens-original { display:block; width:100%; height:auto; aspect-ratio:2.2; object-fit:cover; }
.lens-reveal { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; background:#242d36; clip-path:circle(0 at var(--px) var(--py)); transition:clip-path .4s cubic-bezier(.2,.7,.2,1); }
.is-active .lens-reveal { clip-path:circle(var(--lens,140px) at var(--px) var(--py)); }
.lens-reveal svg { width:100%; height:100%; }
.lens-ring { position:absolute; left:var(--px); top:var(--py); width:calc(var(--lens,140px) * 2); aspect-ratio:1; border:1px solid #b49e73; border-radius:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .25s; pointer-events:none; }
.is-active .lens-ring { opacity:.8; }
.lens-controls { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; font:10px/1.5 var(--font-sans); color:#96897b; }
.lens-controls button { border:1px solid #d8cebf; border-radius:3px; padding:7px 11px; background:#fff; color:#756759; font:inherit; cursor:pointer; }
.lens-controls button[aria-pressed=true] { background:#f3eee7; }
.lens-controls button:disabled { opacity:.5; cursor:default; }
@media(max-width:480px) { .lens-controls { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .lens-reveal,.lens-ring { display:none; } }