/* The work page's own layer: the tile grid. The scrolling shell, the sheet, the panel and the
   titled block come from page.css.

   The filter is gone — the panel is the name and nothing else. Seven rows of company with a count
   beside each was a control for a page that has one piece of work in it, and a filter whose
   smallest group is one is a filter that cannot pay for the room it takes. */

/* Two to a row, and the gutter down the middle of a rule. The sheet spans four diamond columns —
   twelve subdivisions — so two columns are six subdivisions each and the one gutter lands exactly
   on the centre rule, the same way six columns of two subdivisions did. Equal columns would still
   miss: a gutter's centre sits at c + gap/2 while the grid's Nth fraction sits at c + gap(N-1)/N,
   so each column gives up half a gap. With two columns both are outer columns, so the formula is
   the same half-gap on each.

   Six to a row made every tile a 180px stamp. At that size the Console tile was a picture of a
   screen rather than a screen, and the thing it exists to show — one hub reaching a few dozen
   sites — was a smudge. */
.tiles{--tile-gap:10px;--frame:#e8e7e3;list-style:none;margin:0;padding:0;display:grid;gap:36px var(--tile-gap);
  grid-template-columns:repeat(2, calc(50% - var(--tile-gap) / 2))}
.tiles > li{display:flex}
/* A tile that takes the row. It also changes shape: 16/9 rather than 16/10, because the Console's
   stage is natively 16/9 — at the row's full width a 16/10 frame is 70px of empty gradient top and
   bottom, and 630px of tile is already as tall as this page should go in one step. */
.tiles > li.is-wide{grid-column:1 / -1}
.tile.is-wide .shot,.tile.is-wide img{aspect-ratio:16/9}

/* Editorial rather than boxed: the picture is the object, in its frame, and the caption sits on
   the page under it. Wrapped in white boxes the six tiles read as six of the same component rather
   than six pieces of work. */
.tile{display:flex;flex-direction:column;width:100%;color:inherit;transition:opacity .3s ease,filter .3s ease}
.tile .shot{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--frame);border:1px solid var(--hairline);border-radius:var(--radius)}
/* One ground under every picture. A still is inset on it with a shadow, the way the built cards
   already stand on theirs, so dark covers and light ones sit as objects on the same surface
   instead of alternating light and dark down the grid. A fixed 16:10 inside, so every still is
   the same size whatever shape it came in. */
.tile .shot.is-cover{display:flex;align-items:center;justify-content:center}
.tile .shot.is-cover img{display:block;width:82%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:6px;
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 22px 44px -22px rgba(25,24,40,.45);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
/* The built cards bring their own grounds, tinted to their product; on the grid they take the
   shared one. Their pages keep theirs. */
.tiles .tile .shot.is-card,.tiles .tile .shot.is-paper,.tiles .ch-card,.tiles .pd-card{background:var(--frame)}
/* An empty frame rather than a drawn one. It holds the tile's proportions so a half-filled grid
   still lines up, and says nothing it cannot back up. */
.tile .shot.is-empty{background:transparent}
.tile .cap{display:flex;flex-direction:column;gap:2px;padding:9px 10px}
.tile .who{color:var(--line)}
.tile .title{margin:0;color:var(--ink)}
a.tile:hover .shot.is-cover img,a.tile:focus-visible .shot.is-cover img{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.tile .shot.is-cover img{transition:none}}

/* A placeholder should look like one, even greyed. */
.tile.is-placeholder{background:transparent;border-style:dashed;border-color:var(--rule)}
.tile.is-placeholder .shot{border-bottom-style:dashed;border-bottom-color:var(--rule)}
.tile.is-placeholder .title{opacity:.7}
/* A third the height of a real tile. The empty frame was sized to hold a tile's proportions so a
   half-filled grid still lined up — an argument that held at six to a row and stopped holding the
   moment one tile took the whole row, because there is nothing left for them to line up with. At
   two-up and full height, eleven of these are the page: 555 by 347 of nothing, eleven times, under
   one piece of work. Short, they read as a queue of things to come, which is what they are. */
.tile.is-placeholder .shot{aspect-ratio:16/5}

/* One to a row below this. Two columns of a phone's width is two stamps again, which is the thing
   the wider layout was changed to stop doing. */
@media(max-width:820px){
  .tiles{grid-template-columns:100%}
}

/* The caption carries a line of what the work did, under its title. */
.tile .line{color:var(--text);margin-top:2px}
.tile .badge{align-self:flex-start;margin-top:8px;padding:3px 7px;border:1px solid var(--rule);border-radius:999px;color:var(--text)}
.tile .cap{padding:14px 2px 0;gap:3px}

/* The tile that is a list rather than a picture: the names of what waits below, set as type. */
.tile .shot.is-list{display:flex;align-items:flex-start;padding:18px;overflow:hidden;background:var(--surface-sunk)}
.more-names{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--ink);opacity:.8}
.more-names .t-sub:nth-child(even){color:var(--line)}

/* More from Squint: a dated line each, the date on the first quarter of the sheet. */
.more-list{list-style:none;margin:0;padding:0}
.more-row{display:grid;grid-template-columns:25% minmax(0,1fr) auto;column-gap:16px;padding:14px 0;border-bottom:1px solid var(--hairline)}
.more-when{color:var(--line);padding-top:4px}
.more-body{display:flex;flex-direction:column;gap:3px}
.more-title{margin:0;color:var(--ink)}
.more-what{margin:0;color:var(--text);max-width:62ch}
.more-role{color:var(--text);opacity:.7;padding-top:4px;white-space:nowrap}
@media(max-width:700px){.more-row{grid-template-columns:100%;row-gap:4px}.more-role{white-space:normal}}
#more{scroll-margin-top:24px;margin-top:20px}

/* The case study, full page over the grid. It scrolls on its own, and the page under it is held
   still while it is open. */
.case-modal{position:fixed;inset:0;z-index:20;overflow-y:auto;overscroll-behavior:contain;background:var(--ground);animation:case-in .22s ease-out}
@keyframes case-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
body.is-modal{overflow:hidden}
.case-modal:focus{outline:none}
/* Fixed in the corner where every other page keeps the name, and shaped like it. */
.case-back{position:fixed;top:var(--edge);left:var(--edge);z-index:21;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);color:var(--ink);transition:border-color .15s,color .15s}
.case-back svg{width:16px;height:16px;transition:transform .18s ease}
.case-back:hover,.case-back:focus-visible{border-color:var(--line);color:var(--line)}
/* A small nudge in the direction it goes. */
.case-back:hover svg,.case-back:focus-visible svg{transform:translateX(-2px)}
@media(prefers-reduced-motion:reduce){.case-back svg{transition:none}}
@media(max-width:900px){.case-modal .sheet{padding-top:76px}}
@media(prefers-reduced-motion:reduce){.case-modal{animation:none}}

/* Everyone else she has designed for: a name and a line under it, four across, so it reads as
   the tail of the grid above rather than a new kind of thing. */
.clients{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.clients li{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius)}
.clients .who{color:var(--ink)}
.clients .t-small{color:var(--text)}
@media(max-width:900px){.clients{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.clients{grid-template-columns:100%}}

/* Highlights as big pills: each a short name and a line, wrapping across the sheet. */
.pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pills li{display:flex;flex-direction:column;gap:2px;padding:16px 26px;background:var(--surface);border:1px solid var(--hairline);border-radius:999px}
.pills .t-sub{color:var(--ink)}
.pills .t-small{color:var(--text)}
@media(max-width:600px){.pills li{border-radius:24px;padding:14px 20px}}