/* 06 · THE VIEWER
   Concept 04's held editorial column, with the comparison sliders brought back
   - but one at a time and large, instead of a wall of small ones.

   The stage keeps a constant height and lets width follow each photo's own
   proportions, so a portrait job and a landscape job both appear uncropped and
   unstretched. Nothing is letterboxed; the page is simply the mount.
*/

:root{
  --edge:clamp(var(--space-5),4vw,var(--space-12));
  --air:clamp(var(--space-16),9vw,var(--space-24));
  --stage-h:min(64vh,640px);
}
@media (max-width:900px){:root{--stage-h:min(58vh,480px)}}

body{font-family:var(--font-body);color:var(--ink-900);background:var(--white)}
.shell{max-width:1400px;margin-inline:auto;padding-inline:var(--edge)}

/* ---------- opening ---------- */
.intro{padding-block:var(--air)}
.intro__h{
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:clamp(var(--text-2xl),4vw,var(--text-4xl));
  line-height:1.12;letter-spacing:var(--tracking-display);max-width:18ch;
}
.intro__p{
  margin-top:var(--space-8);max-width:42ch;
  font-size:var(--text-lg);line-height:var(--leading-body);color:var(--ink-500);
}

/* ==========================================================
   THE VIEWER
   ========================================================== */
.viewer{padding-bottom:var(--air)}
.viewer__grid{display:grid;gap:var(--space-10)}
@media (min-width:1000px){
  .viewer__grid{
    grid-template-columns:minmax(0,26ch) minmax(0,1fr);
    gap:clamp(var(--space-10),4vw,var(--space-16));
    align-items:start;
  }
  .viewer__stage{grid-column:2;grid-row:1}
  .viewer__read{grid-column:1;grid-row:1}
  /* the rail sits under the stage where it has room for every thumbnail,
     rather than scrolling inside the narrow reading column */
  .viewer__rail{grid-column:2;grid-row:2;margin-top:var(--space-8)}
}

/* --- the read-out column --- */
.viewer__k{color:var(--ink-500);margin-bottom:var(--space-6)}
.viewer__num{
  font-family:var(--font-display);font-weight:var(--weight-black);
  font-size:clamp(var(--text-4xl),6vw,var(--text-5xl));line-height:1;
  letter-spacing:var(--tracking-display);color:var(--sky-600);
  font-variant-numeric:tabular-nums;
}
.viewer__title{
  margin-top:var(--space-5);
  font-size:var(--text-xl);line-height:1.3;font-weight:var(--weight-medium);
}
.viewer__meta{margin-top:var(--space-3);color:var(--ink-500)}
.viewer__hint{
  margin-top:var(--space-8);padding-top:var(--space-5);
  border-top:1px solid var(--ink-150);
  color:var(--ink-500);font-size:var(--text-sm);max-width:26ch;
}

/* --- the stage: fixed height, honest width --- */
.stage{
  position:relative;
  height:var(--stage-h);
  display:grid;place-items:center;
  background:var(--white);
}
.slide{
  grid-area:1/1;
  height:100%;
  display:grid;place-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease-out),visibility 0s linear .5s;
}
.slide.is-on{opacity:1;visibility:visible;transition:opacity .5s var(--ease-out)}

/* The photo is bounded on both axes and left to size itself, so a tall job
   fills the height and a wide job fills the width - each at its true
   proportions. The stage keeps a fixed height either way, so changing job
   never shifts the page. */
.frame{
  --pos:50%;
  position:relative;
  max-height:var(--stage-h);max-width:100%;
  border-radius:var(--radius-md);overflow:hidden;
  background:var(--ink-075);
  touch-action:pan-y;                 /* drag sideways, still scroll the page */
  user-select:none;-webkit-user-select:none;
  cursor:ew-resize;
}
.frame img{
  display:block;
  max-height:var(--stage-h);max-width:100%;
  width:auto;height:auto;
  -webkit-user-drag:none;
}
.frame__before img{height:100%;width:100%;object-fit:cover}
/* the before sits over the after and is clipped back to the divider */
.frame__before{
  position:absolute;inset:0;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
/* eased only for taps, keyboard and the arrival wipe - a drag must track the
   finger exactly, so the transition is taken off while dragging */
.frame.is-easing .frame__before{transition:clip-path .45s var(--ease-out)}
.frame.is-easing .handle{transition:left .45s var(--ease-out)}

.tag{
  position:absolute;top:var(--space-4);z-index:2;
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);
  font-weight:var(--weight-bold);font-size:var(--text-xs);line-height:1;
  letter-spacing:.18em;text-transform:uppercase;
  transition:opacity var(--speed-base) var(--ease-out);
}
.tag--before{left:var(--space-4);background:var(--ink-900);color:var(--white)}
.tag--after{right:var(--space-4);background:var(--sky-500);color:var(--ink-900)}

.handle{
  position:absolute;top:0;bottom:0;left:var(--pos);z-index:3;
  width:56px;margin-left:-28px;                /* a thumb-sized target */
  display:grid;place-items:center;
  cursor:ew-resize;touch-action:none;
}
.handle::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;
  width:2px;margin-left:-1px;background:var(--white);
}
.grip{
  position:relative;
  width:48px;height:48px;border-radius:var(--radius-pill);
  display:grid;place-items:center;
  background:var(--white);color:var(--ink-900);
  box-shadow:var(--shadow-raised);
  transform:translateX(var(--grip-shift,0px));
  transition:transform var(--speed-base) var(--ease-out),
             background-color var(--speed-fast) var(--ease-out),
             color var(--speed-fast) var(--ease-out);
}
.handle:hover .grip{transform:translateX(var(--grip-shift,0px)) scale(1.06)}
.handle:focus-visible .grip{background:var(--sky-500);color:var(--ink-900)}
.frame:active .grip{background:var(--sky-500);color:var(--ink-900)}
.grip svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* --- controls + thumbnails --- */
.viewer__rail{display:grid;gap:var(--space-5)}
.rail__row{display:flex;align-items:center;gap:var(--space-4)}
.rail__count{
  color:var(--ink-500);font-variant-numeric:tabular-nums;margin-left:auto;
}
.nav{
  width:48px;height:48px;border-radius:var(--radius-pill);
  display:grid;place-items:center;
  border:1px solid var(--ink-150);color:var(--ink-900);
  transition:border-color var(--speed-fast) var(--ease-out),
             background-color var(--speed-fast) var(--ease-out),
             color var(--speed-fast) var(--ease-out);
}
.nav:hover{background:var(--ink-900);border-color:var(--ink-900);color:var(--white)}
.nav:active{transform:scale(.96)}
.nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.thumbs{
  display:flex;gap:var(--space-3);
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;padding-bottom:2px;
}
.thumbs::-webkit-scrollbar{display:none}
.thumb{
  flex:none;position:relative;
  width:74px;height:74px;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--ink-075);
  opacity:.45;
  transition:opacity var(--speed-base) var(--ease-out),
             outline-color var(--speed-base) var(--ease-out);
  outline:2px solid transparent;outline-offset:2px;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{opacity:.8}
.thumb.is-on{opacity:1;outline-color:var(--sky-500)}
/* the number sits on a solid ink chip rather than a text shadow - shadows on
   type are a photo-dependent guess, and the chip reads on any image */
.thumb span{
  position:absolute;left:4px;bottom:4px;
  padding:2px 5px;border-radius:var(--radius-sm);
  background:var(--ink-900);color:var(--white);
  font-weight:var(--weight-heavy);font-size:var(--text-xs);line-height:1.2;
  font-variant-numeric:tabular-nums;
}
@media (max-width:1000px){
  .viewer__read{order:2}
  .viewer__stage{order:1}
  .viewer__rail{order:3}
  .viewer__grid{display:flex;flex-direction:column}
  .viewer__num{font-size:var(--text-3xl)}
}

/* ---------- the quiet run of finished work ---------- */
.work{padding-bottom:var(--air)}
.work__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-8);
  padding-bottom:var(--space-6);border-bottom:1px solid var(--ink-150);
  margin-bottom:var(--air);
}
.run{display:grid;gap:var(--air)}
@media (min-width:900px){
  .run{grid-template-columns:repeat(12,1fr);column-gap:clamp(var(--space-4),2vw,var(--space-8))}
  .run figure:nth-child(1){grid-column:1/8}
  .run figure:nth-child(2){grid-column:9/13;align-self:end}
  .run figure:nth-child(3){grid-column:2/6}
  .run figure:nth-child(4){grid-column:7/13}
}
.run figure{margin:0}
.run img{width:100%;height:auto;background:var(--ink-075)}
.run figcaption{
  display:flex;justify-content:space-between;gap:var(--space-5);
  margin-top:var(--space-4);padding-top:var(--space-3);
  border-top:1px solid var(--ink-150);color:var(--ink-500);
}
.run b{color:var(--ink-900);font-weight:var(--weight-heavy);font-variant-numeric:tabular-nums}

/* ---------- closing ---------- */
.sign{display:grid;gap:var(--space-10);padding-block:var(--air);border-top:1px solid var(--ink-150)}
@media (min-width:900px){.sign{grid-template-columns:1fr auto;align-items:end}}
.sign__h{
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:clamp(var(--text-xl),3vw,var(--text-3xl));
  line-height:1.15;letter-spacing:var(--tracking-display);max-width:18ch;
}
.sign__tel{
  font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:clamp(var(--text-xl),2.6vw,var(--text-2xl));
  letter-spacing:var(--tracking-display);
  border-bottom:2px solid var(--ink-150);
  transition:border-color var(--speed-base) var(--ease-out);
}
.sign__tel:hover{border-color:var(--sky-500)}
.base{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);
  padding-block:var(--air);
  border-top:1px solid var(--ink-075);color:var(--ink-500);
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}