/* The mobile pass, a first sanity pass (his 26 Sept, night: "do a big mobile pass now everything is live. it all looks a bit
   shitty at the moment. take a first sanity pass on all surfaces for me to review tomorrow."; canon U5: across the whole site
   at once, in the templates phones load). Loaded after every page's own stylesheet; nothing here reaches past 900px. Each
   rule opens with html so it outranks the pages' lifted rules, some of which come later in the page. */

@media (max-width:900px){
  /* the header band (3.12): the lockup stacked, the title and its record, then the doors and the credit, which may wrap;
     the picture held inside the band. The credit's lines 1.4 apart and its plate (pubband.js: one for its lines, on the
     lockup plate's edge) 8px under the lockup's, 10px under 561, as a chapter hero's (his 27 Sept: "Also looks like a
     plate misalignment here. Confirmed happening on multiple. Make that all.") */
  html .abhero .win{overflow:hidden}
  html .abhero .lock{flex-direction:column;align-items:flex-start;gap:22px}
  html .abhero .lock .rgt{align-items:flex-start;flex:1 1 auto;max-width:100%;min-width:0}
  html .abhero .rgt .hcap{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
  /* the hero (3.5): the kicker's words kept whole; the credit and the picture's numbers wrap under it */
  html .hero .k,html .hero .k .num{white-space:nowrap}
  html .hero .hcap{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;max-width:100%}
  html .hero .hcap.multi{flex-direction:column;align-items:flex-start;gap:0}
  html .hero .hcap .idx{flex:none}
  /* the title clear of the kicker's lockup at its smaller sizes */
  html .hero .t{margin-top:4px}
  /* the filters and Sort (3.13): Sort on a line of its own when the plates fill theirs */
  html .filters{flex-wrap:wrap;row-gap:12px}
  /* About (3.14): the copy the column's width, the figure under it */
  html .abs .read,html .abs .read.half,html .abs .side{grid-column:1/-1}
  html .abs .side{margin-top:36px}
  /* an artist's links, a glass head's plates: onto a second line rather than past the edge */
  html .alk{flex-wrap:wrap;row-gap:10px}
  /* a chapter's ruler (the chapter page's, as the home's already is): the chapter's line, then the archive's */
  html .cnav .ruler .read{flex-direction:column;align-items:flex-start;gap:8px}
}

@media (max-width:560px){
  /* the header band's credit plate 10px under the lockup's (above) */
  html .abhero .lock{gap:20px}
  /* the hero's kicker: the chapter onto a second line under the lockup */
  html .hero .k{flex-wrap:wrap;height:auto;row-gap:10px}
  /* a section head's record under the head when the two don't fit a line */
  html .sh{flex-wrap:wrap;row-gap:8px}
  /* the panels in a header band: the page's margin inside them, not 36px */
  html .arthead .blk{padding:24px 20px}
  /* the section head's :: and the header band's hang in the 16px margin */
  html .sh .h:before,html .abhero .lock .anm:before,html .cnav .ruler .read .name:before,html .arc .ruler .read .name:before{margin-right:6px}
  html .filters .srt{flex-basis:100%;margin-left:0}
  /* the chapters' ruler: 48 ticks of 3px in the width (the chapter page's 2px either side, r0927j5); its record under
     the name */
  html .cnav .ruler .ticks a{padding:0 2px}
  html .arc .ruler .ticks a{padding:0 3px}
  html .cnav .ruler .read>span:first-child,html .arc .ruler .read>span:first-child{display:flex;flex-direction:column;gap:8px}
  html .cnav .ruler .read .K,html .arc .ruler .read .K{margin-left:0}
  html .cnav .ruler .years{overflow-x:clip}
  /* Featured artist (the home's, a chapter's opened; the artist over the words from 900px, below): the panel the page's
     margin, the name smaller, Artist page under Read the interview when the two don't fit; the four pieces two across */
  html .feat .blk,html .pane.feat .blk{padding:24px 20px}
  html .feat .nm.p{font-size:20px;overflow-wrap:anywhere}
  html .feat .four,html .pane.feat .four{grid-template-columns:repeat(2,minmax(0,1fr))}
  html .feat .act,html .unf .feat .act{flex-wrap:wrap;row-gap:12px}
  /* the home's Archives: the chapter's number over its record */
  html .arc .hd{flex-direction:column;align-items:flex-start;gap:8px}
  html .arc .hd .num{white-space:nowrap}
  /* a chapter's notes, opened: the words the column's width, the picture under them */
  html .unf .rel .hd,html .unf .rel .body,html .unf .rel .sig,html .unf .rel .act{grid-column:1/-1}
  html .unf .rel .blk{grid-column:1/-1;grid-row:5;margin-top:36px}
  html .unf .rel .act{grid-row:6}
  /* an opened pane room for all of it (2000px cut the notes short on a phone) */
  html .unf .pane.on{max-height:12000px}
  /* the directory, the interviews and search's squares: two across */
  html .grid,html .dirsec .grid,html .chsec .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html .dirsec .grid,html .chsec .grid{gap:36px var(--gut)}
  /* the player's bar: Play and Visualiser settings wrap in their column, the time, the sound */
  html .pv .vbar .row{grid-template-columns:1fr auto auto;column-gap:10px}
  html .pv .vbar .vc{display:flex;flex-wrap:wrap;gap:8px}
  /* the Visualiser settings panel, open: Holes' plates onto a second line under the first; the wings out of the way */
  html .pv .vset .row.ho{flex-wrap:wrap;row-gap:6px;padding-left:80px}
  html .pv .vset .row.ho .v{margin-left:-80px}
  html .pv:has(#vset.on) .arr{display:none}
}

/* The second pass (his 27 Sept, out on a walk: "please take all of these learnings and do a first pass at the public site
   mobile versions now. note the things i repeatedly flag and address them on each page."): what he flagged on the
   portal's phone, here on every page, a phone on its side included. */
@media (max-width:900px){
  /* no height off vh (his, the portal's bar in iOS Chrome: "don't size anything off vh. Use dvh or svh for any
     full-height containers"): the band, a track's player, the 404 (the hero is on svh already) */
  html:root{--slice:min(566px,60svh)}
  html .pv .player{height:calc(100svh - var(--nav) - 150px - 72px - var(--ph))}
  html .nfsec{height:calc(100svh - var(--nav))}
  /* pages end after their content, without the foot (his, the portal's: "Remove the 'International Art Collective /
     Est. 2002' footer on mobile ... Pages should end right after their content") */
  html .pfoot{display:none}
  /* a piece's stage the side margin under the bar's plates: the bar keeps 15px under its plates (19px over 560), one
     short of the side margin (--m, 16px and 20px), and the bar and the stage are one black, so the stage 1px under the
     bar (his 27 Sept: "To me this could be even close to the top. The padding off the nav allows optically for the
     gutter to be reduced and be closer to the horizontal gutters if that makes sense.") */
  html .pv.one{padding-top:1px}
  /* an interview's wide picture the column's width, not past the screen */
  html .ivb .fig.wide{margin-left:0;margin-right:0}
  /* a piece's record (his, the portal's: "Move v2/2 and that meta data up to previous row", the version "shown once"):
     the title, the names under it, the chapter and the date; the size, the format and a track's length (its player's)
     left out; a name or a chapter kept whole, the line broken at its slashes */
  html .pv .panel .K.sep,html .pv .panel .K .tq{display:none}
  html .pv .panel.one>.tx>.l1>.K:not(.kind):not(.sep){display:block;margin-top:6px}
  /* the record's two parts on the desk (.l1, .l2; r0928e, canon 3.7) read here as before: the chapter under the names */
  html .pv .panel.one>.tx>.l2{display:block}
  html .pv .panel .K i.br{display:block;height:0;overflow:hidden}
  html .pv .panel .K>.nw:first-child{white-space:normal}
  html .pv .panel .K a{white-space:nowrap}
  html .pv .panel .K i{display:inline-block}
  /* one record for every kind (his 27 Sept: "I don't like that the info stage is different for animations and stills. I
     thought we tried to create symmetry for this? I don't think download is essential on mobile. If there needs to be a
     full view or whatever just make it a little download icon and shift meta data so it fits and is universal"; asked,
     "End of the date line"): the names, the chapter, then the day's line (views/piece.php .dl), the day and the index,
     a picture's or a track's download icon at its right (.dli, the portal's drawing, reaching 24px); no Full size or
     Download plate (.right); a track's day, which its desk record leaves out, shown */
  html .pv .panel.one>.right{display:none}
  html .pv .panel.one>span:first-child{align-self:stretch}
  html .pv .panel .K i.bd{display:none}
  html .pv .panel .K .dl{display:flex;align-items:baseline}
  html .pv .panel .K .ix{display:inline}
  html .pv .panel .K i.ixs{display:inline}
  html .pv .panel .K .dli{display:flex;align-items:center;justify-content:center;align-self:center;width:24px;height:24px;margin:-6px -6px -6px auto;color:var(--text)}
  html .pv .panel .K .dli:hover{color:var(--white)}
  html .pv .panel .K .dli svg{width:12px;height:12px;display:block}
  /* a chapter's notes: its name, then its counts under it when the two don't fit a line */
  html .rel .hd{flex-wrap:wrap;row-gap:8px}
  html .rel .hd>.K:last-child{white-space:nowrap}
  /* a card: its title in two lines at most rather than cut short; a chapter's number over its date (the counts and the
     featured artist left to the chapter's page); an artist's pieces over the year they joined; a piece's chapter whole,
     over the names of a piece made together */
  html .card .cap .pt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere}
  html .chsec .card .pa .pct,html .chsec .card .fa{display:none}
  html .chsec .card .pa .pdt{display:block}
  html .chsec .card .pa .pdt>i{display:none}
  html .dirsec .cap>.pa{display:flex;flex-direction:column;max-height:2.8em;overflow:hidden}
  html .dirsec .cap>.pa>i{height:0;padding:0;overflow:hidden}
  html .dirsec .l1>.pa,html .artwork .cap .pa{white-space:normal}
  html .card .cap .pa .num{white-space:nowrap}
  html .artwork .cap .pa .num{display:inline-block}
  html .artwork .cap .pa>i{display:block;height:0;overflow:hidden}
  /* Featured artist (his, the portal's card: "Username, stats and metadata should be same height as avatar."): the
     artist over the words; the place, the name and the record spread over the picture's height; the site under both */
  html .feat .blk,html .pane.feat .blk{display:flex;flex-direction:column;gap:26px}
  html .feat .who,html .pane.feat .who{grid-template-columns:80px minmax(0,1fr);grid-template-rows:repeat(4,auto);column-gap:16px;align-items:start}
  html .feat .av{width:80px}
  html .feat .who .rh{display:contents}
  html .feat .who .av{grid-column:1;grid-row:1/4}
  html .feat .who .ctx{grid-column:2;grid-row:1;align-self:start}
  html .feat .who .rh .nm{grid-column:2;grid-row:2;align-self:center;margin:0}
  html .feat .who:not(:has(.ctx)) .rh .nm{grid-row:1;align-self:start}
  html .feat .who .rh .rec{grid-column:2;grid-row:3;align-self:end;margin:0}
  html .feat .who .alk,html .pane.feat .who .alk{grid-column:1/-1;grid-row:4;margin-top:0;padding-top:18px}
  /* Find (his 27 Sept: "We should build search for mobile also."; asked, "Magnifier, field in the bar"): the magnifier at
     the bar's right, reaching 32px; pressed (html.fo, www/assets/js/find.js), the field takes the nav's place, its words
     at 16px so the phone does not zoom to them, a close mark at its right; the results the column's width */
  html .bar .find{display:flex;justify-content:center;width:32px;height:32px;min-width:0;padding:0;margin-right:-9px;border-bottom:0;color:var(--text);cursor:pointer}
  html .bar .find svg{width:14px;height:14px;color:inherit;flex:none}
  html:not(.fo) .bar .find input{display:none}
  html.fo .bar .nav{display:none}
  html.fo .bar .right{flex:1;min-width:0}
  html.fo .bar .find{width:auto;flex:1;justify-content:flex-start;gap:10px;margin-right:0;border-bottom:1px solid var(--muted);cursor:auto}
  html.fo .bar .find input{height:auto;font-size:16px;letter-spacing:.04em}
  html.fo .bar .find .fx{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;margin-right:-11px;padding:0;border:0;background:none;color:var(--muted);cursor:pointer}
  html .fpan{grid-column:1/-1;max-height:calc(100svh - var(--nav) - 24px)}
}

@media (max-width:560px){
  /* a section head and its door on one line (his, the portal's: "Buttons at top of workshop taking up too much space.
     Shift to header."): the head's hidden cursor takes no room, the door a smaller plate, the word Chapter or Lab out of a
     chapter's head, an interview's door and a chapter's card; an artist's Submissions without its counts, which the head
     above shows */
  html .sh{column-gap:12px}
  html .sh .h{letter-spacing:.12em}
  html .sh .h:not(.live):after{display:none}
  html .sh>:is(.lnk,.btn){padding:7px 10px 6px;font-size:10px}
  html .chw,html .artwork .sh>.K{display:none}
  /* an artist's record in two lines, the counts, then the year and the place; the featured artist's, the year, then the
     counts; a picture's credit (a header's, a figure's in an interview) its title, then the names, rather than a name
     broken over two lines */
  html .arthead .ameta .K i.br,html .feat .who .rec>i:first-of-type{display:block;height:0;overflow:hidden}
  html :is(.arthead,.feat,.abhero) .hcap>i:first-of-type,html .ivb .fig figcaption>i:first-of-type,html .chero .hcap:not(.multi)>i:first-of-type{display:block;height:0;overflow:hidden}
  html :is(.arthead,.feat) .hcap{text-align:right}
  html .chero .hcap:not(.multi){display:block;white-space:normal;line-height:1.4}
}

/* the bar's Portal (r0929c; views/shell.php nav.pt) on the desk alone: Chapters, Artists, About and the magnifier fill a
   phone's bar */
@media (max-width:900px){
  html .bar .nav.pt{display:none}
}

/* r0929f7 (his 29 Sept, of the links under 24px on a phone: "So long as design doesn't change"): the directory's active
   and all, and the foot's links, reach 24px, drawn as they are */
@media (max-width:900px){
  .dtg a,footer.pf a{position:relative}
  .dtg a::after,footer.pf a::after{content:"";position:absolute;left:0;right:0;top:50%;height:26px;transform:translateY(-50%)}
}

/* r0929f7 (his 29 Sept, of the bar running 22px past a 320px screen: "Hm better fix that."): under 360px wide the bar's
   gaps close up, 10px between the logo, the nav and Find and 8px between the nav's links, each as it is */
@media (max-width:359px){
  html header.bar{gap:10px}
  html header.bar .nav{gap:8px}
}