/* touch.css (Home only): on phones and tablets, Selected work rows and Project awards cards
   open on tap, the same way hover opens them on a laptop. html.tap is set by touch.js. */

/* Selected work rows: closed until tapped */
html.tap .row:not(.open) .rdrop{grid-template-rows:0fr}
html.tap .row:not(.open) .rdin{opacity:0}
html.tap .row.open .rdrop{grid-template-rows:1fr}
html.tap .row.open .rdin{opacity:1}
html.tap .row:not(.open) .thumb{opacity:0;pointer-events:none}
html.tap .row.open .thumb{opacity:1;pointer-events:auto}
html.tap .row:not(.open) .rt{transform:none;color:inherit}
html.tap .row.open .rt{transform:none;color:#df4a12}

/* Tap cue (27 Oct, Tamsin): the About page's orange arrow, smaller, in the space right of each title;
   it turns to point up while the row is open. Phones and tablets only. */
.rarrw{display:none}
html.tap .row .rt{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
html.tap .rarrw{flex:none;display:flex;align-items:center;height:1em}
html.tap .rarr{width:36px;height:36px;border-radius:50%;background:#ff4a12;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;font-weight:400;letter-spacing:0;transition:transform 0.45s cubic-bezier(0.2,0.7,0.1,1)}
html.tap .row.open .rarr{transform:rotate(180deg)}
@media (min-width:761px){html.tap .rarr{width:44px;height:44px;font-size:18px}}
html.tap .row{cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (min-width:761px){
  html.tap .row .rmeta{display:block;opacity:1}
  html.tap .row.open .rmeta{opacity:0}
}
@media (max-width:760px){
  html.tap .row:not(.open) .rside{display:none}
}

/* Award lists on phones and tablets: no dot dividers (27 Oct, Tamsin), a little space instead */
html.tap .raw li+li::before{display:none}
html.tap .raw li+li{margin-top:14px}

/* Project awards cards: picture and name until tapped; first tap opens the panel and plays the clip */
html.tap .awcap{display:flex;z-index:1}
html.tap .awm video{display:block;opacity:0}
html.tap .awt.open .awm video{opacity:1}
html.tap .awt:not(.open) .awp{display:none}
html.tap .awt.open .awp{display:grid}
html.tap .awt.open .awcap{opacity:0}
html.tap .awt{-webkit-tap-highlight-color:transparent}

/* Tap cue on the awards cards (27 Oct, Tamsin): orange circle with a white +, bottom right of the
   picture, level with the name; it turns into × while the credits are open (tap × to close). */
.awplus{display:none}
html.tap .awm{position:relative}
html.tap .awcap{right:76px}
html.tap .awplus{position:absolute;z-index:3;right:20px;bottom:20px;width:36px;height:36px;border-radius:50%;background:#ff4a12;display:flex;align-items:center;justify-content:center;transition:transform 0.45s cubic-bezier(0.2,0.7,0.1,1)}
html.tap .awplus::before,html.tap .awplus::after{content:"";position:absolute;width:14px;height:2px;border-radius:1px;background:#fff}
html.tap .awplus::after{transform:rotate(90deg)}
html.tap .awt.open .awplus{transform:rotate(45deg)}
@media (min-width:761px){html.tap .awplus{width:44px;height:44px;right:24px;bottom:22px}html.tap .awplus::before,html.tap .awplus::after{width:16px}html.tap .awcap{right:88px}}