/* Work page. Tokens and components come from site.css; this file only sets
   spacing between the blocks and the few page-specific pieces (.work-*). */

/* ---------- intro ---------- */
.work-intro{padding-block:clamp(3.5rem,8vw,7rem) 0}
.work-intro .section__head{margin-bottom:0}
.work-intro .h1{max-width:none}
.work-intro .owned-note{margin-top:var(--s-4)}

/* jump list: one column on a phone (a ruled list), two from 44em, four across from 56em */
.work-index{margin-top:var(--s-5)}
.work-index ol{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--s-3)}
.work-index li{min-width:0}
.work-index a{display:flex;flex-direction:column;gap:.45rem;height:100%;min-height:2.75rem;padding:1.1rem 0 1.25rem;border-top:1px solid var(--fg);color:var(--fg);text-decoration:none}
.work-index__n{font:500 var(--fs-eyebrow)/1 var(--sans);letter-spacing:.14em;color:var(--fg-2)}
.work-index__name{font-weight:500;font-size:1.0625rem;line-height:1.3;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.28em;transition:text-decoration-color var(--dur) var(--ease),text-decoration-thickness var(--dur) var(--ease)}
.work-index__fmt{color:var(--fg-2)}
.work-index a:hover .work-index__name{text-decoration-color:var(--edge);text-decoration-thickness:2px}
@media (min-width:44em){.work-index ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:56em){.work-index ol{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:43.99em){
  .work-index ol{gap:0}
  .work-index li:last-child a{border-bottom:1px solid var(--line)}
  .work-index a{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;border-top-color:var(--line);padding-block:.9rem}
  .work-index__n{flex:none;min-width:1.75rem}
  .work-index__name{flex:1 1 12rem}
  .work-index__fmt{flex:1 0 100%;padding-left:2.75rem}
}

/* ---------- the four cases ---------- */
.work-cases{padding-bottom:0}
.work-list{display:grid;gap:var(--s-5)}

/* metrics: dates and windows never break mid-date */
.work-card--full .stat__meta [data-stamp]{white-space:nowrap}

/* metrics: value, label and caption each sit on one line across the three columns,
   so a two-line label or a text value does not push its neighbours out of step.
   Browsers without subgrid keep the stacked layout from site.css. */
@supports (grid-template-rows:subgrid){
  .work-card--full .metrics>div{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  .work-card--full .metrics dd.num{align-self:end}
}
/* a text value wraps in even lines, never one orphaned word */
.work-card--full .metrics dd.num.num--text{max-width:14em;text-wrap:balance}
@media (max-width:43.99em){
  /* stacked metrics get a hairline between them, as the three-up row has air instead */
  .work-card--full .metrics>div+div{padding-top:1.1rem;border-top:1px solid var(--line)}
  .work-card--full .metrics{row-gap:var(--s-3)}
}

/* ---------- media beside "How it runs" ----------
   The Carousel Shorts and the Night Edition film each sit in a .work-split with the
   case's "How it runs" list. Stacked until there is room for both (80em). */
.work-card--full>.work-split{padding-top:var(--s-4);border-top:1px solid var(--line)}
.work-split{--media:36rem;display:grid;gap:var(--s-4) var(--s-5);align-items:start}
.work-split--film{--media:40rem}
.work-split .howruns{grid-template-columns:minmax(0,1fr)}
.work-split .howruns li{text-wrap:pretty}
@media (min-width:80em){
  .work-split{grid-template-columns:minmax(0,var(--media)) minmax(0,1fr)}
}

/* the film: the 640 px poster is shown at its own width, never stretched */
.work-media{max-width:40rem;min-width:0}

/* three Shorts as click-to-load facades, each with its stamped title, views and date */
.work-shorts{display:grid;gap:var(--s-3);min-width:0}
.work-shorts>.h3{max-width:none}
.work-shorts__list{display:grid;gap:var(--s-3);list-style:none;padding:0;margin:0}
/* On a phone each Short is one full-width row: the poster beside its title. The poster is 46vw (8.5 to 12rem),
   about 180 px at 390 and 147 px at 320, so the burned-in caption words stay readable (6.5rem made them about 5 px tall). */
.work-short{display:grid;grid-template-columns:clamp(8.5rem,46vw,12rem) minmax(0,1fr);gap:0 var(--s-2);align-items:start;min-width:0}
.work-short .yt{width:100%}
.work-short__text{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.work-short__title{font-weight:500;font-size:.9375rem;line-height:1.35;color:var(--fg);text-wrap:balance;overflow-wrap:anywhere}
.work-short__stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .45rem;margin-top:.15rem}
.work-short__stat .num{font-size:1.75rem;line-height:1;color:var(--fg)}
.work-short__label{font-size:var(--fs-small);line-height:1.4;color:var(--fg-2)}
.work-short__date{font-size:var(--fs-small);line-height:1.4;color:var(--fg-2)}
.work-shorts__note{max-width:36rem}
/* a played Short opens at about 20rem on its own line (the player needs 200 px) */
.work-short:has(.yt--short.is-playing){grid-template-columns:minmax(0,1fr);row-gap:var(--s-2)}
.work-short .yt--short.is-playing{grid-column:auto;width:min(100%,20rem)}
.work-short:has(.yt--short.is-playing) .work-short__title{min-height:0}
@media (min-width:44em){
  .work-shorts__list{grid-template-columns:repeat(3,minmax(0,12rem));column-gap:var(--s-3);row-gap:var(--s-4);justify-content:start}
  .work-short{grid-template-columns:minmax(0,1fr);row-gap:.7rem}
  /* three lines reserved, so the views and dates line up across the row */
  .work-short__title{min-height:calc(3 * 1.35em)}
  .work-shorts__list>:has(.yt--short.is-playing){grid-column:1/-1}
}
@media (min-width:80em){
  .work-split--shorts .work-shorts__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- closing ---------- */
.work-closing{padding-bottom:0}
.work-closing__body{margin-top:var(--s-5)}
.work-closing .section__head{margin-bottom:var(--s-4)}
.work-proof{display:grid;gap:var(--s-2);max-width:40rem}
.work-proof p{font:400 var(--fs-lede)/1.5 var(--sans);color:var(--fg);text-wrap:pretty}
.work-closing .cta{margin-top:var(--s-6)}