/* entry.css — entry page #/work/<slug> (spec 4.3). Everything is scoped under .entry */

.entry{padding-top:var(--s4)}

/* header: strip, title + subtitle, colophon (lede + real credits), slip (desktop only; it repeats after the work).
   From 1024px the colophon sits beside the title (columns 16–22, its right edge on the frames' right edge),
   so the first frame lands in the first screen */
.entry-head{align-items:start;row-gap:0;padding-bottom:var(--s5)}
.entry-head > *{grid-column:1/-1}
.entry-strip{color:var(--muted)}
.entry-title{margin-top:var(--s3);color:var(--ink);container-type:inline-size}
/* the longest word always fits its column (--lw = its width in em, set by shoot.js) */
.entry-title .d-entry{display:block;margin-left:-.04em;
  font-size:min(clamp(44px, 9vw, 168px), calc(100cqi / var(--lw, 1) * .96))}
.entry-sub{display:block;margin-top:var(--s3)}
.entry-colophon{margin-top:var(--s4);display:grid;gap:var(--s3);justify-items:start}
.entry-desc{max-width:30rem;color:var(--ink);text-wrap:pretty}
.entry-credits{display:grid;gap:3px}
.entry-credits dt,.entry-credits dd{display:inline;margin:0}
.entry-credits dt{color:var(--muted)}
.entry-slip--head{display:none}
@media (min-width:768px){
  .entry-head{padding-bottom:var(--s6)}
  .entry-colophon{grid-column:1/10}
}
@media (min-width:1024px){
  .entry{padding-top:var(--s5)}
  .entry-head{padding-bottom:var(--s5)}
  .entry-head > .entry-strip{grid-column:2/15;grid-row:1}
  /* top-right, level with the strip */
  .entry-head > .entry-slip--head{display:block;grid-column:16/-1;grid-row:1;text-align:right;margin-top:-7px}
  .entry-head > .entry-title{grid-column:2/15;grid-row:2}
  .entry-title .d-entry{font-size:min(clamp(44px, 7vw, 132px), calc(100cqi / var(--lw, 1) * .96))}
  .entry-head > .entry-colophon{grid-column:16/23;grid-row:2;align-self:start;margin-top:0;padding-top:var(--s3)}
}

/* sections: house name + credit line on a hairline, then the rows */
.entry-sec{display:flex;flex-direction:column;gap:var(--s5)}
.entry-sec-head{row-gap:var(--s2)}
.entry-sec-head > *{grid-column:1/-1}
.entry-sec-head > :first-child{padding-top:var(--s3);border-top:1px solid var(--hairline)}
.entry-sec-head h2{color:var(--ink)}
.entry-sec-head p{color:var(--muted)}
.entry-sec-head .sep{padding-inline:.6em}
@media (min-width:768px) and (max-width:1023px){ .entry-sec-head > *{grid-column:2/12} }
@media (min-width:1024px){ .entry-sec-head > *{grid-column:3/23} }

/* end: filed under, slip, policy, hi-res · prev / index / next · the next entry at display size */
.entry-end{margin-top:var(--s7);display:grid}
/* the nav row and the next entry share one ruled band: no gap between them */
.entry-notes{row-gap:var(--s2);padding-bottom:var(--s6)}
.entry-notes > *{grid-column:1/-1;color:var(--muted)}
.entry-notes .ui{color:var(--ink);display:inline-flex;align-items:center;min-height:var(--tap)}
@media (min-width:1024px){ .entry-notes > *{grid-column:2/15} }
.entry-filed{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s2)}
.entry-tags{margin:0 0 0 -6px;display:flex;flex-wrap:wrap;align-items:center}
.entry-tags li{display:inline-flex;align-items:center}
.entry-tags .sep{padding-inline:0}
.entry-notes > .entry-slip{margin-block:var(--s2)}

.entry-next{display:grid;gap:var(--s2);padding:var(--s6) var(--m);border-top:1px solid var(--hairline);color:var(--ink);text-decoration:none}
.entry-next .t-11,.entry-next .v-15{color:var(--muted)}
.entry-next .d-row{color:var(--dim);transition:color var(--t-fast) var(--ease)}
@media (hover:hover){ .entry-next:hover .d-row{color:var(--ink)} }
[data-route="work"] .site-footer{margin-top:0}

.entry-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:var(--s4);
  padding:var(--s1) var(--m) 0;border-top:1px solid var(--hairline)}
.entry-nav a{display:inline-flex;align-items:center;min-height:44px;padding-block:6px}
.entry-nav [rel="prev"]{justify-self:start}
.entry-nav [rel="next"]{justify-self:end;text-align:right}
.entry-nav .entry-index{grid-column:1/-1;grid-row:2;justify-self:center}
@media (min-width:768px){
  .entry-nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding-bottom:var(--s1)}
  .entry-nav .entry-index{grid-column:2;grid-row:1}
}

/* show films (data: sections[].films): a still with a play mark; the player loads only on click */
.entry-films > .films{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:var(--s4) var(--s3)}
@media (min-width:768px) and (max-width:1023px){ .entry-films > .films{grid-column:2/12} }
@media (min-width:1024px){ .entry-films > .films{grid-column:3/23;grid-template-columns:repeat(3, 1fr)} }
.film{margin:0}
.film-box{position:relative;aspect-ratio:16/9;background:var(--night);overflow:hidden}
.film-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-play{position:absolute;inset:0;width:100%;padding:0;border:0;background:var(--night);color:var(--on-night);cursor:pointer}
.film-play img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:.62;filter:grayscale(.35);transition:opacity .3s var(--ease, ease)}
.film-glyph{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:52px;height:52px;
  border:1px solid currentColor;border-radius:50%;font-size:15px;line-height:1;padding-left:3px}
@media (hover:hover){ .film-play:hover img{opacity:.85} }
.film-play:focus-visible{outline-offset:3px}
.film .fig-cap{display:block;padding-top:10px;color:var(--muted)}
.film .fig-cap .sep{padding-inline:.5em}
.film .fig-cap a{color:var(--ink)}
.entry-sec-head p.entry-sec-note{color:var(--ink);margin-top:2px}