/* eli samuel — project showcase page (fashion.html)
   A second sequence-format page shape: instead of one project's own
   photos advancing frame-by-frame (sequence.css/js), each "slide" here
   is a whole different PROJECT — one representative photo, a name, and
   a link to that project's own full sequence page. Deliberately explicit
   corner controls (Previous/Next Project) rather than sequence.css's
   invisible hover-cursor zones — cycling projects is a bigger, more
   deliberate step than cycling photos within one project, and per
   explicit request this reads more clearly as text in the corners, the
   same language freeform.html's own #stagePrevProject/#stageNextProject
   already use for project-to-project movement. Loaded after sequence.css
   — reuses its header/nav/#stage/info-overlay rules as-is, only adds the
   pieces those don't cover (distinct class names throughout, so nothing
   here fights sequence.css's own .slide/#slideshow rules). */

#projectShow{
  position:relative;
  width:min(82vw, 1200px);
  height:min(74vh, 880px); /* shorter than sequence.css's plain image box — leaves room for the caption under each photo */
}
.pslide{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  opacity:0;
  transition:opacity .7s ease;
  pointer-events:none;
  /* Same mobile-Safari black-flash fix as sequence.css's own .slide —
     see the comment there. */
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  will-change:opacity;
}
.pslide.pslide--active{ opacity:1; pointer-events:auto; }
.pslide-media{ flex:1 1 auto; min-height:0; position:relative; }
.pslide-media--clickable{ cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="none" stroke="black" stroke-width="1"/><circle cx="10" cy="10" r="2.5" fill="black"/></svg>') 10 10, pointer; }
.pslide-media picture,
.pslide-media img{ display:block; width:100%; height:100%; }
.pslide-media img{
  object-fit:contain; object-position:center;
  user-select:none; -webkit-user-drag:none;
}
/* Hers' video slide — the only .pslide-media that isn't a photo, so it
   doesn't get to lean on object-fit:contain sizing itself off the
   video's own natural dimensions. .video-2x3 is just a 100%-of-parent
   pass-through; the ratio lives on the <video> itself, since only a
   replaced element (video/img) auto-shrinks BOTH sides together to
   stay inside max-width/max-height while holding aspect-ratio — a
   plain div with width:100%+max-height clamps height alone and lets
   the ratio distort, a real, confirmed bug hit going 3:2 -> 2:3 (the
   box came out ~1.1:1, not 2:3, because width never followed height
   down). object-fit:cover then crops the video's own native ratio to
   fill that already-correctly-shaped 2:3 box. Same rule at every
   viewport, mobile and desktop alike, not two separate sizes to keep
   in sync. */
.pslide-media--video{ display:flex; align-items:center; justify-content:center; }
.video-2x3{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.video-2x3 video{
  display:block;
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  aspect-ratio:2/3;
  object-fit:cover;
}
.pslide-caption{
  flex:0 0 auto;
  padding-top:16px;
  text-align:center;
}
.pslide-caption-name{
  margin:0 0 4px;
  font-size:var(--fs-iface); font-weight:700; letter-spacing:var(--ls-iface); line-height:var(--lh-iface);
  text-transform:uppercase;
  color:var(--ink);
}
.pslide-caption-cta{
  font-size:var(--fs-iface); font-weight:400; letter-spacing:var(--ls-iface); line-height:var(--lh-iface);
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
  transition:color .2s ease;
}
.pslide-caption-cta:hover{ color:var(--ink); }
/* books.html only — a price line between the product name and the
   "Click here to buy" link, same size/case as the name but muted so it
   doesn't compete with it. */
.pslide-price{
  margin:0 0 4px;
  font-size:var(--fs-iface); font-weight:400; letter-spacing:var(--ls-iface); line-height:var(--lh-iface);
  text-transform:uppercase;
  color:var(--muted);
}

/* Same quiet, always-present treatment as freeform.html's own
   #stagePrevProject/#stageNextProject — small uppercase text, muted
   until hovered, fixed to the bottom corners. */
.project-corner{
  position:fixed; bottom:22px; z-index:20;
  appearance:none; -webkit-appearance:none; border:none; background:none; padding:0;
  font-size:var(--fs-iface); font-weight:400; letter-spacing:var(--ls-iface); line-height:var(--lh-iface);
  text-transform:uppercase;
  color:var(--muted);
  transition:color .2s ease;
  /* No cursor override here — falls through to sequence.css's button{}
     rule (the halo-ring cursor) now that it's not just plain pointer.
     An explicit cursor:pointer here, a class selector, would beat that
     type selector regardless of source order and silently keep showing
     the native OS hand — exactly the bug reported ("still doing the
     little white hand") on Previous/Next Project specifically. */
}
.project-corner:hover{ color:var(--ink); }
.project-corner--prev{ left:22px; }
.project-corner--next{ right:22px; }

@media (max-width:720px){
  #projectShow{ width:88vw; height:min(64vh, 580px); }
  .project-corner{ bottom:16px; }
  .project-corner--prev{ left:16px; }
  .project-corner--next{ right:16px; }
}