/* RAJASAB image system (rj-img, checkpoint 2). One set of components for every photograph on rajasab.com.
   Source: /tmp/site/tools/images/site-images.css. Published as /assets/site-images.<hash>.css by tools/images_patch.py.
   Components: Hero (panel | bleed), Band, Pair, Split image, Tile, Wall, Reel, Lightbox.
   Tokens per image (set inline by images_patch.py from deploy/images.json):
     --fp  focal point, the object-position of the crop (e.g. 50% 24%)
     --lq  placeholder: a two-stop gradient of the photograph's own top and bottom colour (never grey, never white)
   Motion vocabulary = the CRM's: 150ms for UI state, 550ms cubic-bezier(.16,1,.3,1) for images. Nothing loops. */
:root{--rj-fast:150ms;--rj-slow:550ms;--rj-ease:cubic-bezier(.16,1,.3,1);--rj-ink:#0C0507;--rj-ink2:#120A0D;--rj-gold:#C4A76D;--rj-gold40:rgba(196,167,109,.4);--rj-ivory62:rgba(251,251,249,.62)}

/* ---- the frame: every photograph sits in one ---- */
.rj-img{position:relative;display:block;margin:0;overflow:hidden;background:var(--lq,var(--rj-ink2));aspect-ratio:var(--ar,auto)}
.rj-img>img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%);background:var(--lq,transparent)}
/* fade on decode: only images the script saw still loading are held back, so without the script nothing is hidden */
.rj-img>img.rj-wait{opacity:0}
.rj-img>img{transition:opacity var(--rj-slow) var(--rj-ease)}
.rj-img.rj-gone{display:none}
/* images outside the frame component (homepage, worn-by) carry the placeholder on the element itself */
img[data-rj]{background:var(--lq,transparent)}

/* ---- captions, in the house voice: what it is · where ---- */
.rj-cap{margin:14px 0 0;font:400 11px/1.6 Inter,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--rj-ivory62)}

/* ---- Hero · panel (portrait photograph, shown whole at 4:5 beside the line) ---- */
.hero.rj-hero--panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;min-height:min(92vh,960px);padding-top:var(--nav-h);background:var(--rj-ink)}
.hero.rj-hero--panel .copy{align-self:end;grid-column:1;grid-row:1;padding:0 var(--gutter) 12vh}
.hero.rj-hero--panel>.rj-img{grid-column:2;grid-row:1;height:calc(min(92vh,960px) - var(--nav-h));width:calc((min(92vh,960px) - var(--nav-h)) * .8);max-width:48vw}
.hero.rj-hero--panel>.rj-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--rj-ink) 0%,rgba(12,5,7,0) 22%),linear-gradient(0deg,rgba(12,5,7,.35),rgba(12,5,7,0) 30%)}
.hero.rj-hero--panel .shade{display:none}
/* ---- Hero · bleed (landscape photograph at least 1600px wide) ---- */
.hero.rj-hero--bleed>.rj-img{position:absolute;inset:0;background:var(--lq)}
.hero.rj-hero--bleed>.rj-img>img{animation:rj-settle 1.6s var(--rj-ease) both}
@keyframes rj-settle{from{transform:scale(1.03)}to{transform:none}}
@media (max-width:860px){
  .hero.rj-hero--bleed{display:flex;flex-direction:column;min-height:0;padding-top:var(--nav-h)}
  .hero.rj-hero--bleed>.rj-img{position:relative;inset:auto;width:100%;aspect-ratio:4/3}
  .hero.rj-hero--bleed>.rj-img>img{object-position:62% 40%}
  .hero.rj-hero--bleed .shade{display:none}
  .hero.rj-hero--bleed .copy{margin-top:-12vw;padding:0 var(--gutter) 56px;position:relative;z-index:2}
  .hero.rj-hero--panel{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:var(--nav-h)}
  .hero.rj-hero--panel>.rj-img{order:0;width:100%;max-width:none;height:auto;aspect-ratio:4/5;max-height:74svh}
  .hero.rj-hero--panel>.rj-img::after{background:linear-gradient(0deg,var(--rj-ink) 0%,rgba(12,5,7,.55) 16%,rgba(12,5,7,0) 42%)}
  .hero.rj-hero--panel .copy{order:1;margin-top:-18vw;padding:0 var(--gutter) 56px;position:relative;z-index:2}
}

/* ---- Band (one landscape photograph, full bleed) ---- */
.rj-band{position:relative;margin:0}
.rj-band>.rj-img{aspect-ratio:21/8;max-height:78vh;width:100%}
.rj-band>.rj-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;background:linear-gradient(0deg,rgba(12,5,7,.6),rgba(12,5,7,0))}
.rj-band>.rj-cap{position:absolute;left:var(--gutter);bottom:5vh;margin:0;color:rgba(251,251,249,.82);z-index:1}
@media (max-width:860px){.rj-band>.rj-img{aspect-ratio:4/3}.rj-band>.rj-cap{position:static;padding:0 var(--gutter)}.rj-band>.rj-img::after{display:none}}

/* ---- Pair (two portraits, staggered; replaces a band when the house has no landscape frame) ---- */
.rj-pair{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;max-width:1240px;margin:0 auto;padding:12vh var(--gutter)}
.rj-pair>.rj-img{aspect-ratio:4/5}
.rj-pair>.rj-img:nth-of-type(1){grid-column:1/7}
.rj-pair>.rj-img:nth-of-type(2){grid-column:8/13;margin-top:18%}
.rj-pair>.rj-cap{grid-column:1/13;margin-top:20px}
@media (max-width:860px){.rj-pair{column-gap:8px;padding:56px var(--gutter)}.rj-pair>.rj-img:nth-of-type(1){grid-column:1/7}.rj-pair>.rj-img:nth-of-type(2){grid-column:7/13;margin-top:0}}

/* ---- Split image (one photograph beside the text) ---- */
.split .img>.rj-img{position:absolute;inset:0}
.split .img>div[style*="background-image"]{display:none}
.split.rj-solo{grid-template-columns:1fr;min-height:0}
.split.rj-solo .img{display:none}
.split.rj-solo .txt{background:none;padding:10vh var(--gutter)}
@media (max-width:860px){.split .img{min-height:0;aspect-ratio:4/5}}

/* ---- the contact / visit photograph ---- */
.visit .photo.rj-img{aspect-ratio:4/5}
.visit .photo.rj-img>img{aspect-ratio:auto}
.visit .photo.rj-img>.rj-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:40px 16px 14px;background:linear-gradient(0deg,rgba(12,5,7,.7),rgba(12,5,7,0))}

/* ---- Lightbox (Wall, Pair, Reel open into it): dialog in the top layer, keyboard + swipe ---- */
.rj-lb-open{cursor:zoom-in}
dialog.rj-lb{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(12,5,7,.97);color:#FBFBF9;overflow:hidden}
dialog.rj-lb::backdrop{background:rgba(12,5,7,.85)}
dialog.rj-lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:rj-fade var(--rj-slow) var(--rj-ease)}
@keyframes rj-fade{from{opacity:0}to{opacity:1}}
.rj-lb-top{display:flex;justify-content:space-between;align-items:center;padding:16px var(--gutter,24px);font:400 11px/1 Inter,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--rj-ivory62)}
.rj-lb-top button,.rj-lb-nav button{all:unset;cursor:pointer;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:#FBFBF9;font:400 11px/1 Inter,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;transition:color var(--rj-fast)}
.rj-lb-top button:hover,.rj-lb-nav button:hover{color:var(--rj-gold)}
.rj-lb-top button:focus-visible,.rj-lb-nav button:focus-visible{outline:1px solid var(--rj-gold);outline-offset:2px}
.rj-lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 72px;touch-action:pan-y}
.rj-lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:var(--lq,transparent);transition:opacity var(--rj-slow) var(--rj-ease)}
.rj-lb-nav{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none;padding:0 12px}
.rj-lb-nav button{pointer-events:auto;font-size:18px;letter-spacing:0}
.rj-lb-cap{padding:16px var(--gutter,24px) 22px;font:400 11px/1.6 Inter,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--rj-ivory62);min-height:20px}
.rj-lb-cap b{font-weight:400;color:#FBFBF9}
@media (max-width:860px){.rj-lb-stage{padding:0}.rj-lb-nav{display:none}}

/* ---- reduced motion: no settle, no fade, no view transition ---- */
@media (prefers-reduced-motion:reduce){
  .rj-img>img,.rj-lb-stage img{transition:none}
  .rj-img>img.rj-wait{opacity:1}
  .hero.rj-hero--bleed>.rj-img>img,dialog.rj-lb[open]{animation:none}
}