.b-pin{height:340vh;position:relative}
/* the U's resting size and place, worked out in CSS so the very first paint already has the U
   where the script will keep it (the script then takes over for the scroll animation) */
.b-st{--uw:min(44vw,56vh);--uh:calc(var(--uw)/1.37832);--uy:calc(62vh - .95*var(--uh))}
.b-st{position:sticky;top:0;height:100vh;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,var(--glow),var(--bg) 70%)}
.b-film{position:absolute;inset:0;z-index:1}
/* hidden until the script has set the U's size, so the pictures never flash outside it */
.b-film{opacity:0;transition:opacity .8s ease-out}.b-st.ready .b-film{opacity:1}
.b-st:not(.ready) .b-word{visibility:hidden}
.b-word{top:calc(var(--uy) + var(--uh) + 26px)}
/* The U is a cut-out in a cover laid on top of the films, not a mask on the films.
   Browsers sometimes draw a starting video outside a mask for a moment; a cover can't leak. */
.b-cover{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,var(--glow),var(--bg) 70%);
 -webkit-mask-image:linear-gradient(#000 0 0),var(--umask);mask-image:linear-gradient(#000 0 0),var(--umask);
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:xor;mask-composite:exclude;
 -webkit-mask-size:100% 100%,var(--uw) var(--uh);mask-size:100% 100%,var(--uw) var(--uh);
 -webkit-mask-position:0 0,50% var(--uy);mask-position:0 0,50% var(--uy)}
.b-side,.b-word,.b-end,.b-hint{z-index:3}
.b-film .sl{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s cubic-bezier(.45,0,.25,1)}
.b-film .sl.on{opacity:1}
.b-film video.sl{inset:auto;object-fit:cover;left:calc(50% - var(--uw)/2);top:var(--uy);width:var(--uw);height:calc(var(--uh)*1.02)}
.b-film .cafe{position:absolute;inset:0;z-index:3;background:url("../../media/home/cafe-wide.jpg") center/cover;opacity:0}
.b-film .shade{position:absolute;inset:0;z-index:4;background:linear-gradient(180deg,rgba(34,20,13,.5),transparent 35%,transparent 55%,rgba(34,20,13,.85));opacity:0}
.b-word{position:absolute;left:0;right:0;text-align:center;font:800 22px/1 var(--sans);font-stretch:62%;letter-spacing:.5em;padding-left:.5em;color:var(--y);transition:opacity .5s}.b-word.sw{opacity:0}
.b-side{position:absolute;top:50%;transform:translateY(-50%);transition:opacity .5s}
.b-side.l{left:clamp(20px,5vw,80px)}.b-side.r{right:clamp(20px,5vw,80px);text-align:right}
.b-side .h-l{font-size:clamp(37px,4.6vw,73px)}
.b-side .ar{font:600 clamp(26px,3.06vw,48px)/1.4 var(--ar);color:var(--y)}
.b-end{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(20px,4vw,56px) clamp(40px,7vh,70px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;opacity:0}
.b-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font:600 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:12px;transition:opacity .4s}
.b-hint i{width:1px;height:44px;background:linear-gradient(var(--y),transparent);animation:hint 1.8s infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){.b-st{--uw:min(78vw,56vh);--uy:calc(56vh - .95*var(--uh))}.b-film .cafe{background:url("../../media/home/cafe-tall.jpg") 64% 30%/cover}.b-side{top:auto;transform:none}.b-side.l{top:15vh;left:0;right:0;text-align:center}.b-side.r{bottom:16vh;left:0;right:0;text-align:center}}
.b-hint .h-ph{display:none}@media (max-width:760px),(hover:none){.b-hint .h-lap{display:none}.b-hint .h-ph{display:inline}}
.b-side.l .eyebrow{display:block;line-height:1.7}

/* the right-hand words must stay in the space beside the U and wrap instead of running into it */
@media (min-width:761px){.b-side.r{max-width:calc(23vw - 12px)}.b-side .ar{text-wrap:balance}.b-side.r p:not(.ar){font-size:clamp(12px,1vw,15px)}}