/* ============================================================
   THE VIEWING ROOM, AS A SALON (gallery/salon.js)            P, 19 October 2026
   A white wall under one lamp; one work at a time in a cotton mat and a thin black lacquer frame;
   the room's name and the processes as titles at the left; the number under the work.
   --mx, --my (the pointer, -1..1, damped) lean the lamp toward the hand and the shadow away.
   ============================================================ */
.sl{
  position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; background:#FFFFFF;
  --mx:0; --my:0;
  display:grid; grid-template-columns:minmax(260px, 30vw) 1fr; grid-template-rows:1fr auto;
  padding:calc(var(--nav-h, 72px) + 9vh) var(--margin, 5vw) 7vh;
  box-sizing:border-box;
}
/* the lamp: a pool of warm light on the wall above and behind the work, leaning toward the hand */
.sl-lamp{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(48vmax 40vmax at calc(64% + var(--mx) * 3%) calc(36% + var(--my) * 3%), rgba(255,250,240,1) 0%, rgba(250,247,241,.9) 38%, rgba(240,238,234,.0) 72%),
    linear-gradient(180deg, #FFFFFF 0%, #F7F6F3 100%);
}
.sl-side{ position:relative; z-index:2; align-self:start; display:flex; flex-direction:column; gap:clamp(18px, 3.4vh, 40px); }
.sl-title{ margin:0; }
.sl-procs{ display:flex; flex-direction:column; align-items:flex-start; gap:.3em; }
.sl-proc{ padding:.2em 0; opacity:.32; transition:opacity var(--slow) var(--settle); cursor:pointer; }
.sl-proc:hover, .sl-proc.is-on{ opacity:1; }
.sl-count{ margin:clamp(10px, 4vh, 48px) 0 0; display:flex; align-items:baseline; gap:.4em; }
.sl-count-i{ font-size:clamp(56px, 7vw, 112px) !important; }
.sl-count-n{ opacity:.5; }

/* the wall: the work hangs in the middle of what is left, as large as a print is hung, never to the edges */
.sl-wall{ position:relative; z-index:1; grid-row:1 / span 2; grid-column:2; perspective:1400px; cursor:zoom-in; }
.sl-work{
  position:absolute; left:50%; top:50%; margin:0;
  /* the frame's size from the print's proportion, inside the wall's box */
  --fw:min(calc((100svh - var(--nav-h, 72px) - 36vh - 13vmin) * var(--ar) + 13vmin), 52vw);
  width:var(--fw); transform:translate(-50%, -50%) rotateY(calc(var(--mx) * 2.2deg)) rotateX(calc(var(--my) * -1.6deg));
  transition:transform var(--slowest) var(--settle), width var(--slowest) var(--settle), top var(--slowest) var(--settle);
  will-change:transform;
}
.sl-frame{
  position:relative; padding:clamp(6px, .75vmin, 11px);
  background:linear-gradient(160deg, #2a2a2d 0%, #0c0c0d 38%, #050506 62%, #1d1d20 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.18),
    calc(var(--mx) * -14px) calc(22px + var(--my) * -8px) 34px -8px rgba(20,18,15,.36),
    calc(var(--mx) * -26px) calc(46px + var(--my) * -12px) 90px -20px rgba(20,18,15,.28);
}
.sl-mat{
  position:relative; background:#F6F4EF; padding:clamp(22px, 5.5vmin, 72px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05), inset 2px 3px 6px rgba(0,0,0,.08);
}
/* the bevel of the mat's window, a hair of white round the print */
.sl-print{ display:block; width:100%; aspect-ratio:var(--ar); object-fit:cover; box-shadow:0 0 0 3px #FFFFFF, 0 0 0 4px rgba(0,0,0,.08); background:#EEE; }
/* the glass: one long reflection of the lamp, that slides a little with the hand */
.sl-glass{
  position:absolute; inset:clamp(6px, .75vmin, 11px); pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,0) calc(30% + var(--mx) * 6%), rgba(255,255,255,.16) calc(38% + var(--mx) * 6%), rgba(255,255,255,0) calc(47% + var(--mx) * 6%));
  mix-blend-mode:screen;
}

/* the water on one frame: drops of the incoming print, developing inside them (salon.js writes the numbers) */
.sl-work.is-wet{
  -webkit-mask-image:
    radial-gradient(var(--r1a, 0px) var(--r1b, 0px) at var(--d1, 50% 50%), #000 calc(100% - 8vmin), rgba(0,0,0,.5) calc(100% - 3vmin), transparent 100%),
    radial-gradient(var(--r2a, 0px) var(--r2b, 0px) at var(--d2, 50% 50%), #000 calc(100% - 6vmin), transparent 100%),
    radial-gradient(var(--r3a, 0px) var(--r3b, 0px) at var(--d3, 50% 50%), #000 calc(100% - 6vmin), transparent 100%),
    radial-gradient(var(--r4a, 0px) var(--r4b, 0px) at var(--d4, 50% 50%), #000 calc(100% - 6vmin), transparent 100%);
          mask-image:
    radial-gradient(var(--r1a, 0px) var(--r1b, 0px) at var(--d1, 50% 50%), #000 calc(100% - 8vmin), rgba(0,0,0,.5) calc(100% - 3vmin), transparent 100%),
    radial-gradient(var(--r2a, 0px) var(--r2b, 0px) at var(--d2, 50% 50%), #000 calc(100% - 6vmin), transparent 100%),
    radial-gradient(var(--r3a, 0px) var(--r3b, 0px) at var(--d3, 50% 50%), #000 calc(100% - 6vmin), transparent 100%),
    radial-gradient(var(--r4a, 0px) var(--r4b, 0px) at var(--d4, 50% 50%), #000 calc(100% - 6vmin), transparent 100%);
}
.sl-work.is-wet .sl-print{
  filter:grayscale(calc(1 - var(--dev, 1))) sepia(calc((1 - var(--dev, 1)) * .25)) contrast(calc(.55 + .45 * var(--dev, 1)))
         brightness(calc(1.28 - .28 * var(--dev, 1))) blur(calc((1 - var(--dev, 1)) * 2.4px));
}

/* the caption under the work: its number in the vinyl, then what it is, quiet */
.sl-cap{ position:relative; z-index:2; grid-column:2; grid-row:2; justify-self:center; margin:0; display:flex; gap:1.4em; align-items:baseline; }
.sl-cap-w{ opacity:.6; }

/* close: the work as large as the wall holds it, the rest of the room quiet */
.sl.is-near .sl-wall{ cursor:zoom-out; }
.sl.is-near .sl-work{ --fw:min(calc((100svh - var(--nav-h, 72px) - 14vh - 13vmin) * var(--ar) + 13vmin), 66vw); top:50%; }
.sl.is-near .sl-side, .sl.is-near .sl-cap{ opacity:0; transition:opacity var(--slow) var(--settle); }
.sl-side, .sl-cap{ transition:opacity var(--slow) var(--settle); }

@media (max-width:759px){
  .sl{ grid-template-columns:1fr; grid-template-rows:auto 1fr auto; padding:calc(var(--nav-h, 64px) + 3vh) 16px 5vh; }
  .sl-side{ gap:10px; }
  .sl-procs{ flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:1.1em; scrollbar-width:none; }
  .sl-procs::-webkit-scrollbar{ display:none; }
  .sl-count{ display:none; }
  .sl-wall{ grid-column:1; grid-row:2; }
  .sl-work{ --fw:min(calc((100svh - 50vh - 13vmin) * var(--ar) + 13vmin), 88vw); top:50%; }
  .sl-cap{ grid-column:1; grid-row:3; }
  .sl.is-near .sl-work{ --fw:94vw; }
}
@media (prefers-reduced-motion:reduce){
  .sl-work{ transform:translate(-50%, -50%); transition:none; }
}
.sl-title{ font-size:clamp(54px, 6.2vw, 104px) !important; }

/* ---------- 20 October: one real light for each work ----------
   A picture light hangs over each frame (salon.js sets --lx, where it hangs, -1 left .. 1 right, and --ly, how near
   the wall). The room itself is dimmer than the page, an ivory wall going grey toward the floor and the corners;
   the lamp's warm pool lies on the wall over the work and falls off toward the floor, so the light is felt, not
   only seen. The frame's shadow falls away from the lamp and swings as the light travels to the next work. */
.sl{ --lx:0; --ly:.5; }
.sl-lamp{
  background:
    radial-gradient(60vmax 50vmax at calc(64% + var(--mx) * 3% + var(--lx) * 4%) calc(40% + var(--my) * 3%), rgba(250,248,243,.85) 0%, rgba(244,242,237,.4) 45%, rgba(236,233,227,0) 80%),
    radial-gradient(120% 90% at 60% 30%, rgba(0,0,0,0) 50%, rgba(60,52,40,.07) 100%),
    linear-gradient(180deg, #F4F2EE 0%, #EDEAE4 62%, #E5E1DA 100%);
}
.sl-pool{
  position:absolute; left:-30%; right:-30%; top:-40%; bottom:-30%; pointer-events:none; z-index:0;
  background:
    /* the hot spot just over the frame's head, where the lamp is nearest */
    radial-gradient(ellipse calc(12% + var(--ly) * 3%) calc(7% + var(--ly) * 2%) at calc(50% + var(--lx) * 9%) 32%, rgba(255,250,238,1) 0%, rgba(255,248,232,.85) 45%, rgba(255,248,232,0) 100%),
    /* the cone opening down the wall, warm, and its soft edge */
    radial-gradient(ellipse calc(24% + var(--ly) * 5%) 40% at calc(50% + var(--lx) * 8%) 33%, rgba(255,251,242,.98) 0%, rgba(255,249,236,.78) 38%, rgba(255,247,232,.3) 68%, rgba(255,247,232,0) 100%);
  transition:opacity var(--slower) var(--settle);
}
.sl.is-near .sl-pool{ opacity:.8; }
.sl-frame{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,calc(.18 + .12 * (1 - var(--ly)))),
    inset calc(var(--lx) * -1.5px) 0 0 rgba(255,255,255,.08),
    calc(var(--mx) * -14px + var(--lx) * -30px) calc(20px + var(--my) * -8px + var(--ly) * 8px) 30px -8px rgba(28,22,14,.38),
    calc(var(--mx) * -26px + var(--lx) * -64px) calc(44px + var(--my) * -12px + var(--ly) * 14px) 80px -18px rgba(28,22,14,.26);
}
@media (max-width:759px){
  .sl-pool{ left:-50%; right:-50%; top:-30%; }
}
/* the house's develop writes the print's tones itself (salon.js, is-dp): the room's own wet filter steps aside */
/* held as white paper until its bath begins (the bath's own filter is written on the element and wins) */
.sl-work.is-wet.is-dp .sl-print{ filter:opacity(0); }

/* ---------- 20 October, later: one white (P, 17:21) ----------
   "the whole site must be the SAME white, bright and a little emissive". The viewing room's wall was an ivory going
   grey toward the floor, and its lamp a warm pool: here the wall is the house's own pure white, edge to edge, and the
   light is told by the frame and its shadow alone (above). The mat is white cotton, its window cut with a bevel. */
.sl-lamp{ background:#FFFFFF; }
.sl-pool{ display:none; }
.sl-mat{ background:#FFFFFF; }

/* ---------- 28 October: image first (P: "more about the image, less about the text") ----------
   The room's name is no longer set large: two quiet words at the head (the Viewing room and its Lab), the work as
   large as the wall holds it, a number under it, and the works themselves as a contact strip along the foot. The
   ways of the work (Enter the lab, Its negative) come when the work is brought close. */
.sl{
  grid-template-columns:1fr; grid-template-rows:auto 1fr auto auto;
  padding:calc(var(--nav-h, 72px) + 2vh) var(--margin, 5vw) clamp(14px, 2.6vh, 28px);
  --strip:clamp(36px, 5.4vh, 54px);
}
.sl-side{ grid-column:1; grid-row:1; flex-direction:row; align-items:baseline; gap:0; }
.sl-wall{ grid-column:1; grid-row:2; }
.sl-work{
  --fw:min(calc((100svh - var(--nav-h, 72px) - var(--strip) - 19vh - 7vmin) * var(--ar) + 7vmin), 74vw);
}
.sl-mat{ padding:clamp(14px, 3.4vmin, 44px); }
.sl-cap{ grid-column:1; grid-row:3; justify-self:center; margin:clamp(6px, 1.4vh, 14px) 0 0; gap:1.2em; }
.sl-cap-w{ opacity:0; transition:opacity var(--slow) var(--settle); }
.sl.is-near .sl-cap-w{ opacity:.6; }

/* the ways, by the number, only when the work is close */
.sl-ways{
  position:absolute; z-index:3; right:var(--margin, 5vw); bottom:calc(var(--strip) + clamp(30px, 5vh, 52px));
  margin:0; display:flex; flex-direction:column; align-items:flex-end; gap:.6em;
  opacity:0; pointer-events:none; transform:translate3d(0, 8px, 0);
  transition:opacity var(--slow) var(--settle), transform var(--slow) var(--settle);
}
.sl.is-near .sl-ways{ opacity:1; pointer-events:auto; transform:none; }
.sl-way{ color:var(--fg, #0B0B0C); opacity:.55; text-decoration:none; transition:opacity var(--slow) var(--settle); }
.sl-way:hover, .sl-way:focus-visible{ opacity:1; }

/* the contact strip: each process a run of small prints, the one on the wall in full light */
.sl-strip{
  grid-column:1; grid-row:4; position:relative; z-index:2; justify-self:center; max-width:100%;
  display:flex; align-items:flex-end; gap:clamp(14px, 1.8vw, 32px); margin-top:clamp(10px, 2vh, 22px);
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:10px 2px 2px;
}
.sl-strip::-webkit-scrollbar{ display:none; }
.sl-run{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; flex:0 0 auto; }
.sl-run .sl-proc{ padding:0; opacity:.38; font-size:10px; letter-spacing:.06em; background:none; border:0; cursor:pointer; color:inherit; }
.sl-run .sl-proc.is-on{ opacity:.9; }
.sl-thumbs{ display:flex; align-items:flex-end; gap:clamp(4px, .4vw, 7px); }
.sl-thumb{
  display:block; padding:0; border:0; background:none; cursor:pointer; height:var(--strip); aspect-ratio:var(--ar);
  opacity:.38; filter:saturate(.55); transform:translate3d(0, 0, 0);
  transition:opacity var(--slow) var(--settle), filter var(--slow) var(--settle), transform var(--slow) var(--settle);
}
.sl-thumb img{ display:block; width:100%; height:100%; object-fit:cover; box-shadow:0 6px 12px -8px rgba(20,18,15,.4); }
.sl-thumb:hover, .sl-thumb:focus-visible{ opacity:.85; filter:none; }
.sl-thumb.is-on{ opacity:1; filter:none; transform:translate3d(0, -6px, 0); }
.sl-thumb:focus-visible{ outline:none; }
.sl.is-near .sl-strip{ opacity:.25; transition:opacity var(--slow) var(--settle); }
.sl-strip{ transition:opacity var(--slow) var(--settle); }
.sl.is-near .sl-side{ opacity:1; }
.sl.is-near .sl-work{ --fw:min(calc((100svh - var(--nav-h, 72px) - var(--strip) - 10vh - 7vmin) * var(--ar) + 7vmin), 80vw); }

@media (max-width:759px){
  .sl{ grid-template-rows:auto 1fr auto auto; padding:calc(var(--nav-h, 64px) + 1.5vh) 16px 12px; --strip:44px; }
  .sl-work{ --fw:min(calc((100svh - var(--nav-h, 64px) - var(--strip) - 22vh - 7vmin) * var(--ar) + 7vmin), 92vw); }
  .sl.is-near .sl-work{ --fw:96vw; }
  .sl-strip{ justify-self:stretch; padding-left:0; }
  .sl-ways{ right:16px; bottom:calc(var(--strip) + 54px); }
}
/* a tall window (a tablet held upright): the work takes the width */
@media (min-width:760px) and (max-aspect-ratio:1/1){
  .sl-work{ --fw:min(calc((100svh - var(--nav-h, 72px) - var(--strip) - 30vh - 7vmin) * var(--ar) + 7vmin), 88vw); }
  .sl.is-near .sl-work{ --fw:92vw; }
}
/* the number stands centred under the work; what it is comes beside it, only when the work is close */
.sl-cap{ position:relative; }
.sl-cap-w{ position:absolute; left:100%; margin-left:1.2em; white-space:nowrap; }