/* The lens section: one practice read three ways. Three windows side by side,
   each showing the line field of the page it opens (ARCH's light lines, a
   field of rings for PD, PM's dark lines). Hover one and it widens.
   Aligned to the header's edges. (The earlier two-card version is kept in
   archive/lens-gateway-v1.html.) */

/* It is the last section, so the page can end on it: it is exactly one screen
   tall, starts below the fixed header, and the windows take what is left. */
.lens-gateway.lens-trio{display:flex!important;flex-direction:column;box-sizing:border-box;height:100svh;min-height:640px!important;padding:calc(52px + clamp(36px,6vh,84px)) 0 clamp(36px,6vh,72px)!important;gap:0!important;background:#f5f5f7!important;color:#1d1d1f!important;border-bottom:1px solid #1d1d1f;overflow:hidden}
.lens-trio .lens-hover-preview{display:none!important}
.lt-inner{box-sizing:border-box;width:100%;flex:1;min-height:0;display:flex;flex-direction:column;padding-inline:max(var(--pad),calc((100vw - var(--max))/2))}

.lt-head{flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,340px);grid-template-rows:auto auto;column-gap:clamp(32px,6vw,120px);align-items:end;margin:0 0 clamp(24px,4vh,52px)}
.lt-kicker{grid-column:1;margin:0 0 18px;display:flex;align-items:center;gap:12px;font:500 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#6e6e73}
.lt-kicker:before{content:"";width:34px;height:1px;background:#1d1d1f}
.lt-head h2{grid-column:1;margin:0;font:650 clamp(40px,min(5.6vw,9.5vh),92px)/.92 -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;letter-spacing:-.06em;color:#1d1d1f}
.lt-head h2 em{font-style:normal;color:#86868b}
.lt-note{grid-column:2;grid-row:1/3;align-self:end;margin:0 0 .5em;padding-top:14px;border-top:1px solid #1d1d1f;font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em;color:#6e6e73}

.lt-panels{flex:1;min-height:280px;display:flex;border-top:1px solid #1d1d1f;border-bottom:1px solid #1d1d1f}
.lt-panel{appearance:none;position:relative;flex:1 1 0;min-width:0;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#f5f5f7;color:#1d1d1f;text-align:left;font:inherit;cursor:none;transition:flex-grow .8s cubic-bezier(.16,1,.3,1),background-color .5s ease}
.lt-panel+.lt-panel{border-left:1px solid #1d1d1f}
.lt-pd{background:#fff}
.lt-pm{background:#1d1d1f;color:#f5f5f7}
.lt-panels:hover .lt-panel,.lt-panels:focus-within .lt-panel{flex-grow:.82}
.lt-panels .lt-panel:hover,.lt-panels .lt-panel:focus-visible{flex-grow:1.55}
.lt-panel:focus-visible{outline:2px solid #0071e3;outline-offset:-2px}

/* The field is as wide as a widened panel and centred in it, so it is only
   uncovered, never redrawn, while the panels change width. */
.lt-field{position:absolute;top:0;bottom:0;left:50%;width:var(--lt-field-w,50vw);transform:translateX(-50%);pointer-events:none}
.lt-field canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.lt-arch .lt-field canvas{opacity:.82;mix-blend-mode:multiply}
.lt-field:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,var(--lt-fade,rgba(245,245,247,.92)) 100%)}
.lt-pd{--lt-fade:rgba(255,255,255,.94)}
.lt-pm{--lt-fade:rgba(29,29,31,.9)}

.lt-index{position:absolute;z-index:2;left:22px;top:20px;display:flex;gap:10px;font:500 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.06em;color:#6e6e73}
.lt-index b{font-weight:500;color:currentColor}
.lt-panel .lt-index{color:#6e6e73}.lt-pm .lt-index{color:#a1a1a6}
.lt-panel .lt-index b{color:#1d1d1f}.lt-pm .lt-index b{color:#f5f5f7}

.lt-go{position:absolute;z-index:2;right:22px;top:16px;display:flex;align-items:center;gap:10px;font:500 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateX(-8px);transition:opacity .35s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.lt-go i{position:relative;width:22px;height:1px;background:currentColor}
.lt-go i:after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.lt-panel:hover .lt-go,.lt-panel:focus-visible .lt-go{opacity:1;transform:none}

.lt-name{position:absolute;z-index:2;left:22px;right:22px;bottom:22px;display:flex;flex-direction:column;gap:12px}
.lt-name strong{font:650 clamp(48px,min(6.5vw,11vh),112px)/.8 -apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;letter-spacing:-.07em;white-space:nowrap;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.lt-name small{font:500 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#6e6e73}
.lt-pm .lt-name small{color:#a1a1a6}

/* Arriving: the title rises, then the three windows open from the rule. */
.lens-trio .lt-head>*{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.lens-trio .lt-head .lt-note{transition-delay:.12s}
.lens-trio .lt-panel{clip-path:inset(0 0 100% 0);transition:flex-grow .8s cubic-bezier(.16,1,.3,1),clip-path 1s cubic-bezier(.7,0,.2,1)}
.lens-trio .lt-pd{transition-delay:0s,.08s}.lens-trio .lt-pm{transition-delay:0s,.16s}
.lens-trio.lt-in .lt-head>*{opacity:1;transform:none}
.lens-trio.lt-in .lt-panel{clip-path:inset(0 0 0 0)}

/* The contact link asks for a lens: the windows nod. */
.lens-trio.needs-selection .lt-panels{animation:lt-nudge .7s cubic-bezier(.16,1,.3,1)}
@keyframes lt-nudge{0%,100%{transform:none}30%{transform:translateY(-8px)}60%{transform:translateY(3px)}}

@media(max-width:900px){
  .lens-gateway.lens-trio{display:block!important;height:auto;min-height:0!important;padding:calc(48px + 44px) 0 56px!important}
  .lt-inner{display:block}
  .lt-head{grid-template-columns:1fr;row-gap:22px}
  .lt-note{grid-column:1;grid-row:auto;max-width:420px}
  .lt-panels{flex-direction:column;height:auto}
  .lt-panel{flex:none;height:clamp(200px,30svh,260px)}
  .lt-panel+.lt-panel{border-left:0;border-top:1px solid #1d1d1f}
  .lt-panels:hover .lt-panel,.lt-panels .lt-panel:hover{flex-grow:0}
  .lt-field{left:0;width:100%;transform:none}
  .lt-go{opacity:1;transform:none}
  .lt-name strong{font-size:clamp(52px,15vw,76px)}
}
@media(prefers-reduced-motion:reduce){
  .lens-trio .lt-head>*,.lens-trio .lt-panel{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}