/* ================= UnrealFi (case page): its own styles (RULES.md: pages/<slug>.css, linked after site.css) ================= */
/* the hero: the Nexus line under the teaser */
.uf-nx{margin-top:14px}
.uf-nx b,.lede b{color:var(--fg);font-weight:600}
/* pinned columns carry more copy here: a little less air between the paragraphs */
#challenge .lede+.lede,#did .lede+.lede,#process .lede+.lede,#changed .lede+.lede{margin-top:12px}
#did .pts,#process .pts{margin-top:16px}

/* "The work, as shipped" (round Q2, the owner: client work shown as it is, no filters): the real files in their own
   colours. A large lead image, then a grid of equal 4:3 frames (each file whole, centred on a dark mat, never cropped by
   the frame), captions under each; a click opens the file at full size in a lightbox (Esc or the button closes it).
   Phones: one per row, full width. */
.uf-intro{margin-top:14px}
.uf-lead,.uf-fr{margin:0;border:1px solid #2A2A2A;background:#0D0D0D;transition:border-color .15s steps(3,end)}
.uf-lead{margin-top:30px}
.uf-lk{display:block;cursor:zoom-in}
.uf-lead img{display:block;width:100%;height:auto}
.ugrid{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ugrid>li{display:flex}
.uf-fr{display:flex;flex-direction:column;width:100%}
.uf-fr .uf-lk{aspect-ratio:4/3;padding:20px;background:#141414}
.uf-fr img{display:block;width:100%;height:100%;object-fit:contain}
.uf-lead figcaption,.uf-fr figcaption{padding:12px 14px 14px;border-top:1px solid #2A2A2A;font-size:13px;line-height:1.6;color:var(--fg2)}
.uf-lead figcaption b,.uf-fr figcaption b{color:var(--fg);font-weight:600}
.uf-src{display:block;margin-top:2px;font-family:var(--mono);font-size:12px;color:var(--mute)}
@media (hover:hover) and (pointer:fine){ .uf-lead:hover,.uf-fr:hover{border-color:#5A5A5A} }
.uf-lk:focus-visible{outline:2px solid #C6FF3D;outline-offset:-2px}
@media (max-width:1100px){ .ugrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){
  .uf-lead{margin-top:22px}
  .ugrid{grid-template-columns:1fr;gap:18px;margin-top:18px}
  .uf-fr .uf-lk{padding:12px}
  .uf-lead figcaption,.uf-fr figcaption{font-size:14px}
}
/* the lightbox */
.uf-lb{padding:0;border:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:transparent;color:var(--fg)}
.uf-lb::backdrop{background:rgba(5,5,5,.94)}
.uf-lb-in{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:64px 20px 24px;box-sizing:border-box}
.uf-lb-in img{display:block;max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto}
.uf-lb-in p{max-width:60em;margin:0;font-size:14px;line-height:1.6;color:var(--fg2);text-align:center}
.uf-lb-x{position:absolute;top:12px;right:16px;min-width:44px;min-height:44px;padding:0 14px;border:1px solid #3A3A3A;background:#0D0D0D;color:var(--fg);font:600 13px/1 var(--mono);cursor:pointer}
.uf-lb-x:hover,.uf-lb-x:focus-visible{border-color:#C6FF3D;color:var(--hi)}
/* round Q3: the pull line above the next case and Talk to us */