/* ============================================================
   SCULPTURE: the third wing of daneerikforst.com
   Loaded AFTER style.css AND lab.css.

   Why lab.css comes along: the Lab already owns the dark-wing
   machinery this section needs, and none of it is Lab-specific.
   The hero stage, the .mosaic, the .spec-index and its cursor
   peek, and the dark corrections for .phero / .psec / .pmeta all
   live there and all work here unchanged. So the sculpture pages
   carry class="labbody sculptbody": labbody for the dark base,
   sculptbody for everything below.

   The one rule that separates this wing from the Lab: sculptures
   are objects, and an object should never be cropped. Every clip
   was shot centred on pure black, so tiles here letterbox with
   object-fit:contain against black rather than filling with
   cover. The bars are invisible and the piece stays whole.
   ============================================================ */

/* ---------- the specimen wall, at native ratio ----------
   The dossier mosaic was a twelve-column grid: every tile got a
   span, the span set the box, and the clip was letterboxed into
   whatever shape that produced. Two clips in three are portrait
   and the spans were authored for landscape, so half the wall was
   plinth, and a plinth is only invisible while it matches the clip
   exactly, which across a re-encode it does not.

   So the wall is a masonry flow instead. Two columns, each tile
   the exact aspect of its own clip, nothing stretched to meet a
   row. No letterbox, no crop, no seams, and the portrait pieces
   finally read at the size they were shot.

   The trade is reading order: columns fill top to bottom, then
   across. For a gallery of turntables that is fine.
   ============================================================ */
body.sculptbody .mosaic{
  display:block;
  column-count:2;column-gap:clamp(.5rem,1.4vw,1.1rem);
  padding-top:clamp(1.5rem,4vh,2.6rem);
}
body.sculptbody .mo-item{
  break-inside:avoid;display:block;width:100%;
  margin:0 0 clamp(.5rem,1.4vw,1.1rem);
  background:linear-gradient(180deg,var(--pa,#000),var(--pb,#000));
}
/* the span classes are what the grid used; under columns they are
   inert, and the shape classes now drive the box directly */
body.sculptbody .mo-item video,body.sculptbody .mo-item img{
  width:100%;height:auto;display:block;object-fit:cover;
}
.mo-item.ar-43 video,.mo-item.ar-43 img{aspect-ratio:4/3}
.mo-item.ar-34 video,.mo-item.ar-34 img{aspect-ratio:3/4}

@media(max-width:760px){
  body.sculptbody .mosaic{column-count:1}
}

/* the mosaic's dim-the-others hover is built for cinematic frames.
   On these it just makes them disappear, so the wall leans on
   scale alone. */
body.sculptbody .mosaic:hover .mo-item video,body.sculptbody .mosaic:hover .mo-item img{filter:none}
body.sculptbody .mosaic .mo-item:hover video,body.sculptbody .mosaic .mo-item:hover img{transform:scale(1.04)}

/* ============================================================
   1. THE COLLECTION BAND
   Twenty one pieces on a twelve-column bed, in two weights only:
   a full-width feature that splits into media and type, or a
   pair. Dane's call, and right. Three or more across and the
   pieces lose their size and get lost in the shuffle.

   Cards pick a LANDSCAPE clip and every well is exactly 4:3, so
   nothing letterboxes. The feature reads heavier because its
   media column is wider, not because its box is a different shape.

   PLINTH COLOUR: every well carries the backdrop of its own
   clip, sampled top and bottom by tools/sculpt-plinth.py and
   passed in as --pa / --pb. These sculptures were not all shot
   on black (they run pink, peach, tan, teal), so a fixed black
   well would frame half of them in bars.
   ============================================================ */
.sc-band{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:3px;background:var(--line-light);
  border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
}
/* a band that follows its own chapter head already has a rule above it */
.sc-chapter + .sc-band{border-top:0}
.sc-item{
  grid-column:span 6;display:flex;flex-direction:column;
  background:var(--soot);position:relative;transition:background .4s ease;
}
.sc-item.w6{grid-column:span 6}
.sc-item:hover{background:var(--soot-2)}

/* ---- the media well ---- */
.sc-shot{
  position:relative;overflow:hidden;aspect-ratio:4/3;
  background:linear-gradient(180deg,var(--pa,#000),var(--pb,#000));
}
.sc-shot video,.sc-shot img{
  width:100%;height:100%;display:block;object-fit:contain;
  transition:transform .7s cubic-bezier(.6,0,.2,1);
}
.sc-item:hover .sc-shot video,.sc-item:hover .sc-shot img{transform:scale(1.05)}
/* a hairline that draws itself under the piece on approach */
.sc-shot::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--sun),var(--rose));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.6,0,.2,1);
}
.sc-item:hover .sc-shot::after{transform:scaleX(1)}

/* ---- the wall label ----
   A museum caption, not a hover overlay: the whole collection
   should be readable without touching anything. */
.sc-label{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:.45rem .8rem;padding:.85rem clamp(.8rem,1.6vw,1.15rem) 1rem;
}
.sc-code{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  color:rgba(228,224,212,.4);transition:color .35s;
}
.sc-item:hover .sc-code{color:var(--sun)}
.sc-name{
  grid-column:2;font-weight:850;font-variation-settings:'wdth' 82;
  text-transform:uppercase;letter-spacing:-.005em;line-height:1;
  font-size:clamp(1rem,1.6vw,1.35rem);
  transition:font-variation-settings .45s cubic-bezier(.6,0,.2,1);
}
.sc-item:hover .sc-name{font-variation-settings:'wdth' 110}
.sc-item.w6 .sc-name{font-size:clamp(1.15rem,2.1vw,1.75rem)}
.sc-count{
  grid-column:3;grid-row:1/span 2;align-self:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  color:rgba(228,224,212,.38);white-space:nowrap;
}
.sc-cat{
  grid-column:2;font-family:var(--serif);font-style:italic;
  font-size:.95rem;line-height:1.3;color:rgba(228,224,212,.6);
}

/* ---- the feature: full width, media beside type ----
   Three of these break up the run of cards. The media keeps its
   own shape inside a tall well rather than being cropped to a
   letterbox, and the type gets room to behave like a title. */
.sc-item.feature{
  grid-column:1/-1;display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);
  align-items:stretch;
}
.sc-item.feature .sc-shot{aspect-ratio:4/3}
/* Flipping only reordered the children, so the media landed in the
   narrow column and a flipped feature came out barely half the height
   of an unflipped one. The columns have to swap with it. */
.sc-item.feature.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.8fr)}
.sc-item.feature.flip .sc-shot{order:2}
.sc-face{
  display:flex;flex-direction:column;justify-content:center;gap:.7rem;
  padding:clamp(1.6rem,4vw,3.4rem);
}
.scf-idx{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.2em;color:var(--sun)}
.scf-name{
  font-weight:900;font-variation-settings:'wdth' 76;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.92;font-size:clamp(2rem,4.4vw,3.9rem);
  transition:font-variation-settings .5s cubic-bezier(.6,0,.2,1);
}
.sc-item.feature:hover .scf-name{font-variation-settings:'wdth' 100}
.scf-note{
  font-family:var(--serif);font-style:italic;line-height:1.35;
  font-size:clamp(1.02rem,1.7vw,1.42rem);color:rgba(228,224,212,.78);max-width:22em;
}
.scf-row{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:.5rem}
.scf-cue{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;
  border:1px solid var(--line-light);border-radius:999px;padding:.5rem 1rem;
  transition:background .35s,color .35s,border-color .35s;
}
.sc-item.feature:hover .scf-cue{background:var(--bone);color:var(--soot);border-color:var(--bone)}
.scf-count{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(228,224,212,.5)}

@media(max-width:1000px){
  .sc-item,.sc-item.w6{grid-column:span 6}
  /* .flip carries its own columns now, so it has to be unset by name
     here or it outranks this rule and never stacks */
  .sc-item.feature,.sc-item.feature.flip{grid-template-columns:1fr}
  .sc-item.feature.flip .sc-shot{order:0}
}
@media(max-width:620px){
  .sc-item,.sc-item.w6{grid-column:1/-1}
  .sc-label{padding:.75rem .9rem .95rem}
}

/* ============================================================
   1b. CHAPTER HEADS
   The collection is three collections: a universe that is his,
   a line of studies of other people's characters, and the
   leftovers. Running them together was the real problem with the
   old page, worse than the uniform tiles.

   Treated as magazine chapter openers: a rule, a numeral, the
   name at display size, and the argument set beside it rather
   than under it. Deliberately tall. The pause between sections is
   doing the work of telling you the ground has changed.
   ============================================================ */
.sc-chapter{
  border-top:1px solid var(--line-light);
  padding:clamp(3.6rem,10vh,7rem) clamp(1.2rem,3vw,2.5rem) clamp(1.8rem,5vh,3.2rem);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,4rem);align-items:end;
}
.sc-ch-k{
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--sun);margin-bottom:clamp(.8rem,2vh,1.4rem);
}
.sc-ch-k::after{content:'';flex:1;height:1px;background:var(--line-light)}
.sc-ch-t{
  font-weight:900;font-variation-settings:'wdth' 68;text-transform:uppercase;
  font-size:clamp(2.4rem,7.4vw,6.2rem);line-height:.88;letter-spacing:-.02em;
}
.sc-ch-t em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:-.005em;
  background:linear-gradient(100deg,var(--sun),var(--rose));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sc-ch-d{
  font-family:var(--serif);font-style:italic;line-height:1.4;
  font-size:clamp(1.05rem,1.9vw,1.5rem);color:rgba(228,224,212,.78);max-width:30em;
}
.sc-ch-c{
  display:block;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line-light);
  font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;
  color:rgba(228,224,212,.5);
}
@media(max-width:860px){
  .sc-chapter{grid-template-columns:1fr;gap:clamp(1rem,3vh,1.6rem);align-items:start}
}

/* ============================================================
   2. COUNTER STRIP
   The collection's own numbers, sitting between the argument and
   the grid so the scale of it lands before the pictures do.
   ============================================================ */
.sc-tally{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
}
.sc-tally div{
  padding:clamp(1.3rem,3vw,2.1rem) clamp(1rem,2.4vw,1.8rem);
  border-right:1px solid var(--line-light);
}
.sc-tally div:last-child{border-right:0}
.sc-tally b{
  display:block;font-weight:900;font-variation-settings:'wdth' 70;
  font-size:clamp(2rem,5.2vw,4rem);line-height:.9;letter-spacing:-.02em;
}
.sc-tally span{
  display:block;margin-top:.55rem;font-family:var(--mono);font-size:.62rem;
  text-transform:uppercase;letter-spacing:.18em;color:rgba(228,224,212,.5);
}
@media(max-width:720px){
  .sc-tally{grid-template-columns:1fr 1fr}
  .sc-tally div:nth-child(2n){border-right:0}
  .sc-tally div:nth-child(-n+2){border-bottom:1px solid var(--line-light)}
}

/* ============================================================
   3. DOSSIER TRIMMINGS
   The per-piece pages reuse .phero / .psec / .pmeta wholesale.
   These are the two things they need that the Lab does not.
   ============================================================ */
/* the hero clip is an object on black, so it must not be cropped
   to fill the header the way a cinematic frame can be */
body.sculptbody .phero video{object-fit:contain;background:#000}
body.sculptbody .phero::after{
  background:linear-gradient(180deg,rgba(20,19,16,.15),rgba(20,19,16,.1) 40%,rgba(20,19,16,.86));
}
/* the turn counter that runs down the side of the specimen wall */
.sc-turn{
  font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;
  color:rgba(228,224,212,.45);
}