/* ==========================================================================
   moonson — photo stream  ([moonson_photostream])
   --------------------------------------------------------------------------
   Large prints, straight and evenly spaced (band, 2026-10-06: "really see the
   photos", "no tilted positions"): one column on a phone, two on anything
   wider. Each photo keeps its own proportions. The photos are not filtered
   — they are film already; a print only gets a soft shadow and the site's
   grain on top.

   Tune here:
     --ps-gap   space between prints, across and down
   ========================================================================== */
.m-ps{
  --ps-gap:clamp(8px,.95vw,16px);     /* band 2026-10-08: between the old clamp(6px,.7vw,12px) and the trial clamp(10px,1.2vw,20px); 0 was tried too */
  position:relative;
  padding-block:8px 40px;
}

/* Phones: the stream runs edge to edge, like a gallery app, instead of
   sitting inside the page's side margins. */
@media (max-width:699px){
  .m-ps{margin-inline:calc(50% - 50vw);padding-inline:8px;--ps-gap:8px}
}

.m-ps-grid{display:flex;align-items:flex-start;gap:var(--ps-gap)}
/* Swapping streams: the prints fade and sink a little, the other stream
   rises in their place (photostream.js toggles .is-out). */
.m-ps-grid{transition:opacity .26s ease,transform .26s ease}
.m-ps-grid.is-out{opacity:0;transform:translateY(12px)}

/* --- analog / digital switch ------------------------------------------------
   Two halves in one square frame, glass like the sticky header (band,
   2026-10-09: "not so much attention while scrolling"): the photos show
   through, the stream on show sits on a faint light block. Pointing at the
   switch fills that block signal red and slides it, as before. Sticky, so
   the other stream is one tap away anywhere in the endless scroll. */
.m-ps-switch{
  position:sticky;top:14px;z-index:20;
  display:grid;grid-template-columns:1fr 1fr;
  width:min(100% - 24px,360px);margin:0 auto 20px;padding:4px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  transition:background-color .35s,border-color .35s;
}
.m-ps-switch[hidden]{display:none}
/* On narrow screens the theme clips the page with overflow:hidden, which
   also switches "sticky" off. clip cuts the same, without that side effect. */
body:has(.m-ps-switch) .l-canvas{overflow:clip}
.m-ps-switch::before{
  content:'';position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  background:rgba(255,255,255,.12);
  transition:transform .5s var(--m-ease),background-color .3s,box-shadow .3s;
}
.m-ps-switch[data-on="d"]::before{transform:translateX(100%)}
.m-ps-switch button{
  position:relative;z-index:1;display:flex;align-items:baseline;justify-content:center;gap:.8em;
  padding:13px 10px;border:0;background:none;cursor:pointer;
  font-family:var(--m-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);text-shadow:0 1px 6px rgba(0,0,0,.6);transition:color .3s;
}
.m-ps-switch button[aria-pressed="true"]{color:#fff}
/* Pointed at (or reached by keyboard): the red block of before. */
.m-ps-switch:hover,.m-ps-switch:has(:focus-visible){background:rgba(0,0,0,.6);border-color:var(--m-line-field)}
.m-ps-switch:hover::before,.m-ps-switch:has(:focus-visible)::before{background:var(--m-red);box-shadow:0 0 22px rgba(193,7,26,.45)}
.m-ps-switch button:hover{color:#fff}
.m-ps-switch button:focus-visible{outline:2px solid var(--m-red-hot);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .m-ps-switch::before,.m-ps-grid{transition:none}
  .m-ps-grid.is-out{transform:none}
}
.m-ps-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--ps-gap)}

/* --- a print ------------------------------------------------------------- */
.m-ps-tile{
  position:relative;display:block;width:100%;
  aspect-ratio:var(--ar,4 / 3);
  margin:0;padding:0;border:0;cursor:zoom-in;
  overflow:hidden;           /* the hover zoom stays inside the print */
  background:#0b0b0b;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.85);
}
.m-ps-tile img{
  display:block;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s ease-out;
}
.m-ps-tile.is-in img{opacity:1}
/* Hover: the photo eases a little closer inside its frame and lifts a touch
   in brightness. The frame itself does not move, so the straight grid stays
   calm. Only where there is a mouse — on a phone :hover sticks after a tap. */
@media (hover:hover) and (pointer:fine){
  .m-ps-tile img{
    transition:opacity .35s ease-out,transform .7s var(--m-ease),filter .5s var(--m-ease);
  }
  .m-ps-tile:hover img,
  .m-ps-tile:focus-visible img{transform:scale(1.035);filter:brightness(1.07)}
}
.m-ps-tile:focus-visible{outline:2px solid var(--m-red-hot);outline-offset:4px;z-index:2}

.m-ps-msg{
  font-family:var(--m-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--m-fg-2);text-align:center;margin:0;
}
.m-ps-msg:empty{display:none}
.m-ps-sentinel{height:1px}

/* --- full-screen view ------------------------------------------------------ */
html.m-ps-open{overflow:hidden}

.m-ps-lb{
  position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;
  margin:0;padding:0;border:0;
  background:rgba(0,0,0,.96);color:var(--m-fg);
  z-index:10001;            /* above the header and the grain layer */
}
.m-ps-lb::backdrop{background:rgba(0,0,0,.96)}
.m-ps-lb-fig{
  --lb-py:clamp(56px,7vw,80px);--lb-px:clamp(12px,6vw,96px);
  position:absolute;inset:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  padding:var(--lb-py) var(--lb-px);
}
/* The photo fits the window, whatever its size. In the old grid the
   percentage heights had no fixed box to refer to, so a large photo could
   show at its own size and run past the screen; now the limits are the
   window itself, minus the frame. */
.m-ps-lb-img{
  display:block;min-width:0;min-height:0;
  max-width:calc(100vw - 2 * var(--lb-px));max-height:calc(100dvh - 2 * var(--lb-py));
  width:auto;height:auto;object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.8);
  transition:opacity .3s;
}
.m-ps-lb.is-loading .m-ps-lb-img{opacity:.35}

.m-ps-lb-btn{
  position:absolute;width:48px;height:48px;display:grid;place-items:center;
  padding:0;border:1px solid var(--m-line-field);background:rgba(0,0,0,.5);
  color:var(--m-fg);font-family:var(--m-mono);font-size:20px;line-height:1;cursor:pointer;
  transition:background-color .25s,border-color .25s,color .25s;
}
.m-ps-lb-btn:hover{background:var(--m-red);border-color:var(--m-red);color:#fff}
.m-ps-lb-prev{left:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
.m-ps-lb-next{right:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
.m-ps-lb-close{right:clamp(8px,2vw,24px);top:clamp(8px,2vw,24px)}
/* Phones swipe; the arrows would only cover the photo. */
@media (hover:none) and (pointer:coarse){
  .m-ps-lb-prev,.m-ps-lb-next{display:none}
}

@media (prefers-reduced-motion:reduce){
  .m-ps-tile img,.m-ps-lb-img{transition:none}
  .m-ps-tile:hover img,.m-ps-tile:focus-visible img{transform:none}
  .m-ps-tile img{opacity:1}
}

/* ==========================================================================
   Upload page  ([moonson_photostream_upload])
   ========================================================================== */
.m-psu{max-width:640px;margin:0 auto;padding-block:clamp(24px,6vw,64px)}
.m-psu-k{
  font-family:var(--m-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--m-fg-2);margin:0 0 22px;
}
.m-psu-closed{font-family:var(--m-mono);color:var(--m-fg-2);text-align:center}
.m-psu-code label{
  display:block;margin-bottom:8px;
  font-family:var(--m-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-fg-2);
}
.m-psu-row{display:flex;gap:10px}
.m-psu-row input{flex:1;min-width:0;font-size:16px}  /* 16px: no zoom-on-focus on iPhone */
.m-psu .m-psu-rem{
  display:flex;align-items:center;gap:10px;margin-top:14px;
  text-transform:none;letter-spacing:.02em;font-family:var(--m-sans);font-size:15px;color:var(--m-fg-2);
}
.m-psu-err{min-height:1.4em;margin:12px 0 0;font-family:var(--m-mono);font-size:13px;color:var(--m-red-hot)}

.m-psu-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 22px;border:1px solid var(--m-red);background:var(--m-red);color:#fff;
  font-family:var(--m-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:background-color .25s,color .25s,border-color .25s;
}
.m-psu-btn:hover{background:#fff;border-color:#fff;color:#000}

.m-psu-drop{
  display:grid;place-items:center;gap:14px;text-align:center;
  padding:clamp(36px,8vw,64px) 20px;
  border:1px dashed var(--m-line-field);background:var(--m-bg-2);
  transition:border-color .25s,background-color .25s;
}
.m-psu-drop[hidden]{display:none}
.m-psu-drop.is-over{border-color:var(--m-red);background:#1a0306}
.m-psu-pick{padding:18px 30px;font-size:13px}
.m-psu-hint{margin:0;font-family:var(--m-mono);font-size:12px;letter-spacing:.06em;color:var(--m-fg-2)}

.m-psu-list{list-style:none;margin:22px 0 0;padding:0}
.m-psu-item{
  display:grid;grid-template-columns:minmax(0,1fr) 90px auto;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--m-line);
  font-family:var(--m-mono);font-size:12px;color:var(--m-fg-2);
}
.m-psu-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--m-fg)}
.m-psu-bar{height:2px;background:var(--m-line-field);position:relative;overflow:hidden}
.m-psu-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--m-red);transition:width .2s}
.m-psu-item.is-ok .m-psu-bar i{background:var(--m-fg-2)}
.m-psu-item.is-ok .m-psu-state{color:var(--m-fg)}
.m-psu-item.is-err .m-psu-state{color:var(--m-red-hot)}
.m-psu-item.is-err .m-psu-bar{opacity:.3}
.m-psu-done{min-height:1.4em;margin:18px 0 0;font-family:var(--m-mono);font-size:13px;color:var(--m-fg)}
.m-psu-back{margin:28px 0 0;font-family:var(--m-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.m-psu-back a{color:var(--m-fg-2)}
.m-psu-back a:hover{color:var(--m-red)}
@media (max-width:520px){
  .m-psu-item{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .m-psu-bar{grid-column:1 / -1;grid-row:2}
}

/* --- choose and delete ---------------------------------------------------- */
.m-psu-lib{margin-top:44px;padding-top:28px;border-top:1px solid var(--m-line)}
.m-psu-lib[hidden]{display:none}
.m-psu-lib .m-psu-k{margin-bottom:8px}
.m-psu-lib-hint{margin:0 0 18px}
.m-psu-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.m-psu-tile{
  position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:0;cursor:pointer;
  background:var(--m-bg-2);overflow:hidden;
}
.m-psu-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .2s,transform .3s var(--m-ease)}
/* the mark: an empty square, filled red with a tick once chosen */
.m-psu-tile::after{
  content:'';position:absolute;top:8px;right:8px;width:22px;height:22px;
  border:2px solid #fff;background:rgba(0,0,0,.35);box-shadow:0 0 0 1px rgba(0,0,0,.4);
}
.m-psu-tile[aria-pressed="true"]{outline:3px solid var(--m-red);outline-offset:-3px}
.m-psu-tile[aria-pressed="true"] img{opacity:.55;transform:scale(.94)}
.m-psu-tile[aria-pressed="true"]::after{
  border-color:var(--m-red);background:var(--m-red) center/14px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E");
}
.m-psu-tile:focus-visible{outline:2px solid var(--m-red-hot);outline-offset:2px}

/* the bar stays at the bottom of the screen while photos are chosen */
.m-psu-act{
  position:sticky;bottom:12px;z-index:5;margin-top:14px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 10px 10px 16px;background:rgba(0,0,0,.92);border:1px solid var(--m-line-field);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.m-psu-act[hidden]{display:none}
.m-psu-act-n{flex:1 1 auto;white-space:nowrap;font-family:var(--m-mono);font-size:13px;letter-spacing:.04em;color:var(--m-fg)}
.m-psu-act.is-ask{border-color:var(--m-red)}
.m-psu-act .m-psu-btn{padding:12px 18px}
.m-psu-ghost{
  padding:12px 14px;border:1px solid var(--m-line-field);background:none;color:var(--m-fg);cursor:pointer;
  font-family:var(--m-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.m-psu-ghost:hover{border-color:var(--m-fg)}
.m-psu-libmsg{min-height:1.4em;margin:14px 0 0;font-family:var(--m-mono);font-size:13px;color:var(--m-fg)}
@media (prefers-reduced-motion:reduce){.m-psu-tile img{transition:none}}

/* --- analog / digital on the upload page --------------------------------------
   The same square segmented look as the gallery switch, smaller. */
.m-psu-seg{display:inline-flex;align-items:stretch;flex-wrap:wrap;border:1px solid var(--m-line-field);padding:3px;gap:3px}
.m-psu-seg button{
  border:0;background:none;cursor:pointer;padding:9px 14px;
  font-family:var(--m-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--m-fg-2);
  transition:background-color .25s,color .25s;
}
.m-psu-seg button:hover{color:var(--m-fg)}
.m-psu-seg button[aria-pressed="true"]{background:var(--m-red);color:#fff}
.m-psu-seg button:focus-visible{outline:2px solid var(--m-red-hot);outline-offset:2px}
.m-psu-seg-l{align-self:center;padding:0 10px 0 8px;font-family:var(--m-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--m-fg-2)}
.m-psu-kind{margin-bottom:6px}
.m-psu-filter{margin:4px 0 14px}

/* which stream a tile belongs to, bottom left */
.m-psu-tag{
  position:absolute;left:6px;bottom:6px;padding:3px 6px 2px;
  font-family:var(--m-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(0,0,0,.72);color:var(--m-fg);
}
.m-psu-tag.is-d{background:rgba(255,255,255,.88);color:#000}
.m-psu-act .m-psu-ghost[hidden]{display:none}