/* Model boards: editorial, a little unexpected, still quiet.
   - columns sit at different heights, like a layout on a table
   - each portrait wears small corner marks, like a contact sheet; they close in on hover
   - the name is set in italic serif with a line that draws under it
   - the page opens with the board's name large and */
.roster-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 22px;margin:0 0 clamp(34px,5vw,64px);padding-bottom:22px;border-bottom:1px solid var(--hairline)}
.roster-meta h1{font:300 italic clamp(46px,7vw,96px)/.95 'Cormorant Garamond',serif;letter-spacing:-.01em;color:var(--ink);margin:0;opacity:0;transform:translateY(18px);animation:rmIn 1.1s cubic-bezier(.16,1,.3,1) .35s forwards}
.roster-meta .rm-city{font:500 11px 'Jost',sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--brass);opacity:0;animation:rmFade 1s ease .8s forwards}
@keyframes rmIn{to{opacity:1;transform:none}}
@keyframes rmFade{to{opacity:1}}

.roster-grid{column-gap:clamp(22px,3.2vw,48px);row-gap:clamp(48px,6vw,92px);align-items:start}
.roster-grid .roster-tile{text-decoration:none;color:inherit;opacity:1;transform:none;animation:none}
.roster-grid .roster-tile:nth-child(4n+2),.roster-grid .roster-tile:nth-child(4n+4){margin-top:clamp(40px,5vw,84px)}
@media(max-width:1100px){
  .roster-grid .roster-tile:nth-child(4n+2),.roster-grid .roster-tile:nth-child(4n+4){margin-top:0}
  .roster-grid .roster-tile:nth-child(3n+2){margin-top:clamp(36px,5vw,64px)}
}
@media(max-width:900px){
  .roster-grid .roster-tile:nth-child(3n+2){margin-top:0}
  .roster-grid .roster-tile:nth-child(even){margin-top:clamp(28px,6vw,48px)}
}
@media(max-width:640px){.roster-grid .roster-tile:nth-child(even){margin-top:0}}

/* the portrait opens like a shutter, then the caption follows */
.roster-grid .roster-image{border:0;overflow:visible;background:transparent;clip-path:none}
.roster-grid .roster-image img{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.77,0,.18,1) var(--d,0s),transform .9s cubic-bezier(.16,1,.3,1),filter .6s ease;filter:grayscale(.4) contrast(1.02)}
.roster-grid .roster-tile.in .roster-image img{clip-path:inset(0)}
.roster-grid .roster-tile.done .roster-image img{clip-path:none;transition:transform .9s cubic-bezier(.16,1,.3,1),filter .6s ease}
.roster-grid .roster-tile:hover .roster-image img{transform:scale(1.035);filter:grayscale(0) contrast(1)}
.roster-image{background:linear-gradient(155deg,var(--panel,#14110f) 0%,var(--black) 100%)}
.roster-image .placeholder-label{position:relative;z-index:1}

/* contact-sheet corner marks */
.rt-c{position:absolute;z-index:3;width:16px;height:16px;border:0 solid var(--ink);opacity:0;pointer-events:none;transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.rt-c.a{left:12px;top:12px;border-width:1px 0 0 1px;transform:translate(-8px,-8px)}
.rt-c.b{right:12px;top:12px;border-width:1px 1px 0 0;transform:translate(8px,-8px)}
.rt-c.c{left:12px;bottom:12px;border-width:0 0 1px 1px;transform:translate(-8px,8px)}
.rt-c.d{right:12px;bottom:12px;border-width:0 1px 1px 0;transform:translate(8px,8px)}
.roster-tile:hover .rt-c,.roster-tile:focus-visible .rt-c{opacity:.9;transform:none}

.roster-cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--hairline);position:relative;opacity:0;transform:translateY(10px);transition:opacity .9s ease calc(var(--d,0s) + .5s),transform .9s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + .5s)}
.roster-tile.in .roster-cap{opacity:1;transform:none}
.roster-cap::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.roster-tile:hover .roster-cap::before{transform:scaleX(1)}
.roster-grid .roster-name{margin:0;font:400 italic clamp(21px,1.9vw,27px)/1.1 'Cormorant Garamond',serif;letter-spacing:.005em;text-transform:none;color:var(--ink);transition:color .4s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.roster-grid .roster-tile:hover .roster-name{color:var(--ink);letter-spacing:.005em;transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){
  .roster-meta h1,.roster-meta .rm-city,  .roster-grid .roster-image img{clip-path:none;transition:none}.roster-cap{opacity:1;transform:none;transition:none}
}