/* ============================================================
   THE ARCHIVE — productions.html ONLY
   ------------------------------------------------------------
   Home carries the credits as a row list (.cred) with the show's
   title card hard right. Repeating that here would make the two
   pages the same page, which is exactly the note that produced
   this file.

   So this is a different object, not a restyled list: each show
   is a production slate. Clapper bar across the top, the title
   in display type, the chain below it as marked-up fields the
   way a slate is actually filled in. No photography, which is
   also what keeps every image on this site to a single
   appearance.

   Its own file on purpose: site.css is shared by five pages and
   was owned by another agent when this was written. Loaded only
   by productions.html, after site.css.
   ============================================================ */

.slates{
  display:grid;
  /* FOUR up on a wide screen. It was three, chosen when there were six cards so
     that six divided cleanly. The client's revision made it eight, and eight
     over three columns strands two cards alone on a third row. Four divides
     eight into two full rows, and two divides it into four, so every breakpoint
     below is a clean rectangle. Same reasoning as the services grid: pick the
     column count against the card count, never auto-fit. */
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.9rem,1.6vw,1.3rem);
  /* No top margin. On this page the cards are the first thing inside #work,
     directly under the page head, so this stacked on top of the pagehead's
     52px bottom padding and #work's 60px top padding: 165px of dead black
     between the lead and the first clapper. Measured, not guessed. */
  margin-top:0;
}
@media (max-width:1080px){
  .slates{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Scoped to this page only: archive.css is loaded by productions.html alone.
   Home keeps the full section rhythm because its #work opens on a heading. */
#work{padding-top:clamp(.9rem,1.8vh,1.4rem)}
/* The page head's own bottom padding stacks on top of that, and on this page
   there is nothing between the lead and the first clapper, so it is trimmed
   here too. Home is untouched: its #work opens on a heading that needs the
   full rhythm. */
.pagehead{padding-bottom:clamp(1.1rem,2.4vh,1.7rem)}

/* The gallery's own head follows the last slate card with nothing between
   them, so "On location" sat almost on the card's accent rule. The space
   taken off the top of this section is put back here, where it separates two
   different things instead of padding the page head twice. */
#work .work-head{margin-top:clamp(3rem,7vh,5rem)}

.sl{
  position:relative;
  background:#0e0e10;
  border:1px solid var(--line-2);
  border-radius:6px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .45s ease,transform .5s cubic-bezier(.16,.84,.3,1);
}
.sl:hover{border-color:rgba(255,255,255,.28);transform:translateY(-3px)}

/* the clapper bar. Real slates alternate light and dark wedges, and the
   diagonal is what makes it read as a slate rather than a striped box. */
.sl-clap{
  height:22px;flex:0 0 22px;
  background:repeating-linear-gradient(
    115deg,
    #f4f4f2 0 26px,
    #17171a 26px 52px
  );
  border-bottom:1px solid var(--line-2);
}

.sl-body{padding:clamp(1.05rem,2.2vw,1.6rem);display:flex;flex-direction:column;height:100%}

.sl-n{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  color:var(--dim-2);margin:0 0 .75rem;
}

.sl-t{
  margin:0 0 auto;
  font-family:var(--disp);
  font-variation-settings:"wdth" 98,"wght" 740;
  font-size:clamp(1.2rem,1.9vw,1.62rem);
  line-height:1.04;letter-spacing:-.026em;
  text-transform:uppercase;color:#fff;
  text-wrap:balance;
}

/* the filled-in fields. dl because that is what this is: term and value. */
.sl-f{
  margin:clamp(1.2rem,2.6vh,1.9rem) 0 0;
  display:grid;grid-template-columns:1fr 1fr;gap:.9rem;
  padding-top:.9rem;border-top:1px solid var(--line-2);
}

/* Temptation Island carries a title and nothing else, at the client's explicit
   instruction: no country, no studio, no broadcaster. It therefore has no .sl-f,
   and so loses the rule that sits under every other title. Drawing it on the
   title itself keeps the card's anatomy identical to its siblings. Nothing is
   put in the space below, because she did not ask for anything to be there. */
.sl-t:last-child{
  padding-bottom:clamp(1.2rem,2.6vh,1.9rem);
  border-bottom:1px solid var(--line-2);
}


.sl-f dt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim-2);margin-bottom:.4em;
}
.sl-f dd{
  margin:0;font-size:.92rem;line-height:1.25;
  color:rgba(255,255,255,.94);
  font-variation-settings:"wdth" 100,"wght" 520;
}

/* accent hairline drawn along the foot on reveal, the one moment of her colour */
.sl::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .85s cubic-bezier(.16,.84,.3,1);
}
.sl.in::after{transform:scaleX(1)}

/* staggered entry, card by card. .rev already carries the fade in site.css,
   this only sets the order. */
/* Eight cards, so eight delays. It stopped at four, which was enough when the
   list was shorter; cards five to eight had no delay at all and snapped in
   together while the first four staggered, which reads as the animation
   breaking halfway down. */
.slates .sl:nth-child(1){transition-delay:0s}
.slates .sl:nth-child(2){transition-delay:.07s}
.slates .sl:nth-child(3){transition-delay:.14s}
.slates .sl:nth-child(4){transition-delay:.21s}
.slates .sl:nth-child(5){transition-delay:.28s}
.slates .sl:nth-child(6){transition-delay:.35s}
.slates .sl:nth-child(7){transition-delay:.42s}
.slates .sl:nth-child(8){transition-delay:.49s}
.slates .sl:nth-child(1)::after{transition-delay:.10s}
.slates .sl:nth-child(2)::after{transition-delay:.17s}
.slates .sl:nth-child(3)::after{transition-delay:.24s}
.slates .sl:nth-child(4)::after{transition-delay:.31s}
.slates .sl:nth-child(5)::after{transition-delay:.38s}
.slates .sl:nth-child(6)::after{transition-delay:.45s}
.slates .sl:nth-child(7)::after{transition-delay:.52s}
.slates .sl:nth-child(8)::after{transition-delay:.59s}

@media (max-width:720px){
  .slates{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}

  /* Rethought for a phone. One card ran 181px tall and most of that was air:
     .sl-t carries margin-bottom:auto, which in a flex column shoves the fields
     down to the floor of the card. Two up, the auto killed, the number taken out
     of the flow into the corner, and the chain stacked because 168px will not
     hold two columns side by side. Two also divides the eight cards exactly, so
     no card is ever stranded on a row of its own. */
  .sl-clap{height:14px;flex-basis:14px;
    background:repeating-linear-gradient(115deg,#f4f4f2 0 16px,#17171a 16px 32px)}

  .sl-body{padding:.75rem .8rem .85rem;position:relative}

  .sl-n{
    position:absolute;top:.75rem;right:.8rem;margin:0;
    font-size:8.5px;letter-spacing:.18em;
  }

  .sl-t{
    margin:0;                        /* the auto is what created the gap */
    font-size:.95rem;line-height:1.14;letter-spacing:-.02em;
    padding-right:1.6rem;            /* clear of the number in the corner */
    text-wrap:balance;
  }

  /* Two up means roughly 168px of card, which will not carry Studio and
     Broadcaster side by side, so the chain stacks. */
  .sl-f{
    margin-top:.6rem;padding-top:.6rem;
    grid-template-columns:minmax(0,1fr);
    gap:.45rem;
  }
  .sl-f dt{margin-bottom:.1em;font-size:8.5px;letter-spacing:.16em}
  .sl-f dd{font-size:.8rem;line-height:1.2}
}

@media (prefers-reduced-motion:reduce){
  .sl,.sl::after{transition:none}
  .sl::after{transform:scaleX(1)}
}