/* Closing section of the home page (assets/js/finale.js), from the owner's reference video, 30 Oct. White background (owner request, 30 Oct), black text; photos in colour. */
.fn{position:relative;background:var(--bg);color:#111;overflow:clip;font-family:Inter,system-ui,sans-serif}
.fn p{margin:0}

/* the pinned stage */
.fn-pin{position:relative;height:757vh}
.fn-pin[hidden]{display:none}
.fn-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg);contain:layout paint}
.fn-stage>*{position:absolute;left:50%;top:50%}
.fn-glow{left:0!important;top:0!important;width:100%;height:100%;background:radial-gradient(46% 62% at 50% 56%,rgba(0,0,0,.1),rgba(0,0,0,.03) 55%,transparent 75%);visibility:hidden}
.fn-col{width:1600px;height:940px;will-change:transform}
.fn-col i{position:absolute;background-size:cover;background-position:center}
.fn-col i::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}   /* a soft veil, so the white words read on the photos */
.fn-w{white-space:nowrap;transform-origin:50% 60%;font:400 clamp(44px,6.6vw,104px)/1 "Instrument Serif",Georgia,"Times New Roman",serif;color:#fff;mix-blend-mode:difference;will-change:transform;margin-top:-.5em!important;z-index:3}
.fn-w.l{transform-origin:100% 60%}.fn-w.r{transform-origin:0 60%}

/* the phone: one real element, 300 x 630, moved and scaled with transforms */
.fn-ph{width:300px;height:630px;margin:-315px 0 0 -150px;border-radius:46px;background:#0b0b0b;padding:8px;box-shadow:0 0 0 1.5px #3a3a3a,0 30px 70px rgba(0,0,0,.28);will-change:transform;z-index:2;box-sizing:border-box}
.fn-scr{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:var(--card);color:#111;isolation:isolate}
.fn-isl{position:absolute;z-index:9;left:50%;top:10px;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#000}
.fn-s{position:absolute;inset:0}
.fn-wel{background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff;z-index:3}
.fn-wel::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.75))}
.fn-wel>*{position:relative}
.fn-wel p{font:400 34px/1.05 "Instrument Serif",Georgia,serif}
.fn-go{margin-top:14px;height:42px;border-radius:21px;background:#000;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}
.fn-wel .fn-go{background:var(--bg);color:#000}
.fn-prompt{padding:48px 18px 0;z-index:2;background:var(--card)}
.fn-top{display:flex;justify-content:space-between;align-items:center;height:30px}
.fn-top u{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.1)}
.fn-top u.d{background:#111}
.fn-type{margin-top:22px!important;min-height:92px;font-size:19px;line-height:1.28;letter-spacing:-.01em}
.fn-type s{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:currentColor;text-decoration:none}
.fn-ins{margin-top:56px!important;font-size:11px;font-weight:600;color:#333}
.fn-chips{display:flex;gap:6px;margin-top:9px}
.fn-chips em{font-style:normal;font-size:11px;padding:6px 11px;border-radius:14px;background:rgba(0,0,0,.08);color:#111}
.fn-keys{position:absolute;left:6px;right:6px;bottom:18px}
.fn-keys div{display:flex;justify-content:center;gap:3px;margin-top:5px}
.fn-keys u{flex:0 0 22px;height:34px;border-radius:5px;background:var(--bg);color:#111;font-size:13px;line-height:34px;text-align:center;text-decoration:none}
.fn-prompt .fn-go{margin-top:18px}
.fn-list{background:var(--card);z-index:1}
.fn-pills{position:absolute;z-index:3;left:0;right:0;top:0;padding:42px 0 8px;background:var(--card);display:flex;justify-content:center;gap:4px}
.fn-pills span{font-size:10.5px;font-weight:600;padding:6px 12px;border-radius:13px;color:#333;background:rgba(0,0,0,.06)}
.fn-pills span.on{background:#111;color:#fff}
.fn-sc{position:absolute;inset:0;will-change:transform}
.fn-k{position:absolute;left:14px;top:92px;font:400 20px/1.1 "Instrument Serif",Georgia,serif;color:#111}
.fn-c{position:absolute;width:124px}
.fn-c i{display:block;height:92px;border-radius:10px;background-size:cover;background-position:center;background-color:#cfcfcf}
.fn-c b{display:block;margin-top:6px;font-size:10.5px;line-height:1.2;font-weight:600;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn-c span{display:block;margin-top:2px;font-size:9.5px;color:#555}
.fn-stack{position:absolute;left:6px;right:6px;bottom:8px;height:150px;z-index:4}
.fn-st{position:absolute;left:0;right:0;height:56px;padding:6px 13px 0;border-radius:12px;background:#1a1a1a;color:#fff;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;box-shadow:0 -6px 16px rgba(0,0,0,.2);visibility:hidden}
.fn-st:nth-child(1){bottom:63px;background:#555}.fn-st:nth-child(2){bottom:42px;background:#3d3d3d}.fn-st:nth-child(3){bottom:21px;background:#262626}.fn-st:nth-child(4){bottom:0;background:#000}
.fn-st b{font-size:11px;font-weight:600}.fn-st span{font-size:10px;color:rgba(255,255,255,.8);white-space:nowrap}
.fn-fly{background-size:cover;background-position:center;border-radius:10px;visibility:hidden;will-change:transform,filter;z-index:5}
.fn-band{z-index:6;border-radius:12px}

/* running text around the edge of the view */
.fn-m{overflow:hidden;white-space:nowrap;font:400 10px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.1em;color:rgba(0,0,0,.6);visibility:hidden;z-index:1}
.fn-m span{display:inline-block;will-change:transform}
.fn-m.t,.fn-m.b{left:24px!important;right:24px;top:18px!important}
.fn-m.b{top:auto!important;bottom:18px}
.fn-m.l,.fn-m.r{top:40px!important;height:12px;width:calc(100svh - 80px);transform-origin:0 0}
.fn-m.l{left:24px!important;transform:rotate(90deg) translateY(-100%)}
.fn-m.r{left:auto!important;right:calc(24px - (100svh - 80px));transform:rotate(90deg)}


@media (max-width:760px){
  .fn-pin{height:620vh}
  .fn-w{font-size:52px;left:50%!important}
  .fn-w.l,.fn-w.r{transform-origin:50% 50%}
  .fn-m.l,.fn-m.r{display:none}
}
.fn-prompt{background-color:var(--card)!important}                     /* the phone's screen follows the site's sage theme (30 Oct) */