/* ============================================================
   Sakhi Patel — the paintings. "Night studio":
   each work hangs in its own pool of lantern light.
   ============================================================ */

:root{
  --night:#0f1218;
  --night-2:#161a23;
  --glow:#e8b64c;
  --glow-soft:#c8a04c;
  --glow-tint:232,182,76; /* default; each painting overrides with its own light */
  --cream:#eceef2;
  --muted:#8d93a5;
  --serif:"Fraunces",Georgia,serif;
  --text:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* cross-document view transitions (page flow) + lightbox morph */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .30s ease both}
::view-transition-new(root){animation:vt-in .42s ease .05s both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

body{
  background:var(--night);
  color:var(--cream);
  font-family:var(--text);
  line-height:1.6;
  /* grain */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.65 0 0 0 0 0.70 0 0 0 0 0.85 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mono{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:lowercase}

a{color:var(--glow);text-underline-offset:3px}
:focus-visible{outline:2.5px solid var(--glow);outline-offset:3px;border-radius:2px}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--glow);color:var(--night);
  padding:.6rem 1rem;z-index:99;font-family:var(--mono)
}
.skip-link:focus{left:0}

.art-top{padding:1.4rem clamp(1.2rem,4vw,3rem)}
.back{text-decoration:none;color:var(--muted)}
.back:hover{color:var(--glow)}

/* ---------- opening ---------- */
.opening{
  min-height:72vh;display:flex;flex-direction:column;justify-content:center;
  padding:2rem clamp(1.2rem,5vw,4rem);max-width:1100px;margin:0 auto;
  position:relative;
}
.opening-kicker{color:var(--glow-soft)}
.opening h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(3.2rem,11vw,8rem);line-height:.95;letter-spacing:-.02em;
  margin:1rem 0 1.4rem;
  font-variation-settings:"SOFT" 80,"WONK" 1;
}
.opening h1 em{color:var(--glow);font-style:italic}
.opening-note{max-width:30rem;color:var(--muted);font-size:1.08rem}
.scroll-hint{margin-top:3rem;color:var(--glow-soft);animation:drift 2.2s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.scroll-hint{animation:none}}

/* ---------- index rail ---------- */
.rail{border-top:1px solid #262c3a;border-bottom:1px solid #262c3a}
.rail ul{
  list-style:none;display:flex;gap:.9rem;overflow-x:auto;
  padding:1.1rem clamp(1.2rem,4vw,3rem);
  scrollbar-width:thin;scrollbar-color:#333c52 transparent;
}
.rail a{
  display:flex;flex-direction:column;gap:.4rem;align-items:center;
  text-decoration:none;color:var(--muted);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;text-transform:lowercase;
  min-width:64px;
}
.rail img{
  width:56px;height:56px;object-fit:cover;border-radius:2px;
  filter:saturate(.55) brightness(.8);transition:filter .2s ease,transform .2s ease;
}
.rail a:hover img,.rail a:focus-visible img{filter:none;transform:scale(1.06)}
.rail a:hover,.rail a:focus-visible{color:var(--cream)}
@media (prefers-reduced-motion:reduce){.rail img{transition:none}.rail a:hover img{transform:none}}

/* ---------- gallery ---------- */
.gallery{
  max-width:1200px;margin:0 auto;
  padding:clamp(3rem,8vh,6rem) clamp(1.2rem,4vw,3rem);
  display:flex;flex-direction:column;gap:clamp(4.5rem,14vh,9rem);
  overflow-x:clip; /* contain the pool-of-light glow so it never adds page scroll */
}

.wall{display:flex;flex-direction:column;gap:1rem;position:relative}
.pos-l{align-items:flex-start}
.pos-r{align-items:flex-end}
.pos-c{align-items:center}

.frame{
  border:none;background:none;padding:0;cursor:zoom-in;display:block;
  position:relative;max-width:100%;
}
.size-m .frame{width:min(520px,88vw)}
.size-l .frame{width:min(640px,92vw)}

/* the pool of light */
.frame::before{
  content:"";position:absolute;inset:-14%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(var(--glow-tint),.18),rgba(var(--glow-tint),.06) 45%,transparent 70%);
  opacity:0;transition:opacity 1.1s ease;
}
.lit .frame::before{opacity:1}

.frame img{
  display:block;width:100%;height:auto;
  border:6px solid #090b10;
  outline:1px solid #333c52;
  box-shadow:0 22px 55px -18px rgba(0,0,0,.85);
  filter:brightness(.55) saturate(.7);
  transform:translateY(18px);
  transition:filter 1.1s ease,transform .9s ease;
}
.lit .frame img{filter:none;transform:none}
.frame:hover img,.frame:focus-visible img{outline-color:var(--glow-soft)}
@media (prefers-reduced-motion:reduce){
  .frame::before,.frame img{transition:none}
  .frame img{filter:none;transform:none}
  .frame::before{opacity:1}
}

.wall figcaption{
  display:flex;gap:1rem;align-items:baseline;
  color:var(--muted);
}
.pos-r figcaption{flex-direction:row-reverse}
.wnum{color:rgb(var(--glow-tint));font-size:.9rem}
.wtitle{font-family:var(--serif);font-size:1.35rem;font-style:italic;color:var(--cream);font-variation-settings:"SOFT" 80}
.wmedium{color:var(--muted)}

/* ---------- end ---------- */
.art-end{
  text-align:center;padding:4rem 1.5rem 5rem;
  border-top:1px solid #262c3a;
}
.end-line{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,3.5vw,2rem);
  color:var(--cream);margin-bottom:1.2rem;font-variation-settings:"SOFT" 90;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:50;
  background:rgba(8,10,15,.96);
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem;
}
.lightbox[hidden]{display:none}
.lb-stage{
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  max-width:min(1000px,88vw);max-height:92vh;
}
.lb-stage img{
  max-width:100%;max-height:80vh;object-fit:contain;
  border:6px solid #090b10;outline:1px solid #333c52;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9);
}
.lb-stage figcaption{color:var(--muted)}
.lb-close,.lb-prev,.lb-next{
  background:none;border:1px solid #333c52;color:var(--cream);
  font-size:1.1rem;font-family:var(--mono);
  width:2.7rem;height:2.7rem;border-radius:50%;cursor:pointer;flex:none;
}
.lb-close{position:absolute;top:1rem;right:1rem}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{border-color:var(--glow);color:var(--glow)}
@media(max-width:640px){
  .lb-prev,.lb-next{position:absolute;bottom:1rem;top:auto}
  .lb-prev{left:1.2rem}.lb-next{right:1.2rem}
  .lb-stage img{max-height:70vh}
}