/* ================= THE PRISM (interactive glass) =================
   Brand type: --serif = Druk Wide stand-in (wdth 125), --mono = Druk Text stand-in (wdth 62), --sans = Blinker. */
.pr-stage{position:relative;height:auto;padding:clamp(56px,10vh,110px) var(--pad)}
.pr-cv,.pr-mark,.pr-hint{display:none}
.pr-labs{list-style:none;margin:0;padding:0;display:grid;gap:26px;max-width:640px}
.pr-lab{appearance:none;background:none;border:0;padding:0 0 0 18px;border-left:2px solid var(--c);text-align:left;font:inherit;color:inherit;cursor:default;display:block}
.pr-word{display:block;font-family:var(--serif);font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(22px,2.4vw,32px);line-height:1;color:var(--c)}
.pr-say{display:block;font-family:var(--sans);font-size:clamp(17px,1.4vw,20px);line-height:1.4;color:var(--soft);margin-top:8px}

.geo .pr-stage{height:min(100svh,820px);padding:0;overflow:clip;touch-action:pan-y pinch-zoom}
.geo .pr-cv{display:block;position:absolute;left:0;top:0;pointer-events:none;mix-blend-mode:screen;z-index:2}
.geo .pr-labs{display:block;max-width:none;position:absolute;inset:0;pointer-events:none;z-index:3}
.geo .pr-labs li{position:absolute;left:0;top:0;pointer-events:none;will-change:transform,opacity}

/* the glass */
.geo .pr-mark{display:block;position:absolute;left:0;top:0;appearance:none;background:none;border:0;padding:0;margin:0;cursor:default;pointer-events:none;aspect-ratio:62.6/37.04;transform-origin:50% 50%;will-change:transform;z-index:1;-webkit-tap-highlight-color:transparent;
  --tx:-999px;--ty:-999px;--hot:0;--tk:0;--fr:.7px;--fa:0;--gl:0}
.pr-mark:focus-visible{outline:2px solid var(--ink);outline-offset:14px}
.pr-mk{position:absolute;inset:0;display:block;
  filter:drop-shadow(calc(var(--fr)*-1) 0 0 rgba(255,44,24,calc(var(--fa)*.55))) drop-shadow(var(--fr) 0 0 rgba(58,96,255,calc(var(--fa)*.6))) drop-shadow(0 0 18px rgba(255,255,255,calc(var(--gl)*.5)))}
.pr-mk-w,.pr-mk-c{position:absolute;inset:0;pointer-events:none}
.pr-mk-w svg,.pr-mk-c svg{position:absolute;inset:0;display:block;width:100%;height:auto;overflow:visible}
.pr-mk-w svg{opacity:.9}   /* the unlit glass: cool grey outline (set in prism.js), so it reads on the black */
/* the lit glass: bright where the beam enters (11% 40%), the bars catching light, the cursor's torch lifting the rest */
.pr-mk-c{opacity:0;
  -webkit-mask-image:radial-gradient(ellipse 80% 120% at 11% 40%,rgba(0,0,0,calc(var(--hot)*.5)),rgba(0,0,0,calc(var(--hot)*.2)) 60%,transparent),radial-gradient(circle var(--tr,200px) at var(--tx) var(--ty),rgba(0,0,0,var(--tk)),rgba(0,0,0,calc(var(--tk)*.35)) 50%,transparent),linear-gradient(rgba(0,0,0,.66),rgba(0,0,0,.66));
  mask-image:radial-gradient(ellipse 80% 120% at 11% 40%,rgba(0,0,0,calc(var(--hot)*.5)),rgba(0,0,0,calc(var(--hot)*.2)) 60%,transparent),radial-gradient(circle var(--tr,200px) at var(--tx) var(--ty),rgba(0,0,0,var(--tk)),rgba(0,0,0,calc(var(--tk)*.35)) 50%,transparent),linear-gradient(rgba(0,0,0,.66),rgba(0,0,0,.66));
  filter:saturate(1.2)}
/* bloom + colour bleed on the black around the mark; a sibling of .pr-mk so nothing clips it */
.pr-mk-g{position:absolute;inset:0;display:block;pointer-events:none;opacity:0;mix-blend-mode:screen}
.pr-mk-g svg{position:absolute;inset:0;display:block;width:100%;height:auto;overflow:visible}

/* labels: Druk Wide word, mono index, Blinker say-line */
.geo .pr-lab{position:relative;display:block;width:100%;text-align:left;border:0;padding:0;min-height:44px;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;margin-top:-8px;padding-top:8px}
.geo .pr-word{color:var(--ink);font-size:clamp(20px,2.3vw,32px);opacity:.82;transition:opacity .3s var(--ease),color .3s var(--ease),transform .4s var(--ease),text-shadow .3s;transform-origin:0 50%;
  text-shadow:0 0 0 transparent}
.geo .pr-say{margin:10px 0 0;max-width:34ch;clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease)}
.geo .pr-say>span{display:block;transform:translate3d(-22px,0,0);opacity:0;transition:transform .55s var(--ease),opacity .4s var(--ease)}
.geo .is-on .pr-say,.geo .all-on .pr-say{clip-path:inset(0 0 0 0)}
.geo .is-on .pr-say>span,.geo .all-on .pr-say>span{transform:none;opacity:1}
.geo .is-on .pr-word,.geo .all-on .pr-word{opacity:1;color:var(--c);transform:translate3d(6px,0,0);text-shadow:0 0 22px color-mix(in srgb,var(--c) 55%,transparent)}
.geo .pr-lab:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.has-on li:not(.is-on) .pr-word{opacity:.34}
.geo .all-on .pr-word{transform:none}

/* hint: mono, small caps */
.geo .pr-hint{display:block;position:absolute;left:var(--pad);bottom:calc(30px + var(--sab));margin:0;z-index:4;font-family:var(--mono);font-stretch:62%;font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.pr-hint .h-t{display:none}
@media (hover:none){.pr-hint .h-d{display:none}.pr-hint .h-t{display:inline}}
.pr-stage.open .pr-hint{opacity:1}
.pr-stage.told .pr-hint{opacity:0}
.pr-hint::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(255,255,255,.7);margin-right:10px;vertical-align:1px}

/* phone */
.narrow .pr-word{font-size:clamp(13px,3.9vw,15px);letter-spacing:.03em}
.narrow .pr-say{font-size:14.5px;line-height:1.35;margin-top:6px;max-width:none}
.narrow 
/* reduced motion / static: all lit */
.rm .pr-say{clip-path:none!important}
.rm .pr-say>span{transform:none!important;opacity:1!important}
.rm .pr-word{opacity:1!important;transition:none!important}
.rm .pr-hint{display:none!important}
@media (prefers-reduced-motion:reduce){.pr-say>span,.pr-say,.pr-word{transition:none!important}}