/* FOUR CHAIRS (/work-with-us): tapping a chair opens the application with
   that role picked. The line is split across the screen: "ALWAYS ROOM FOR THE
   BEST OF THESE" large over the chairs, "COME WORK WITH US" large on the floor
   under them, both centred, in the logotype (stage.css). The chairs' canvases
   are cut in the home page's pill's material: black under a black keyline, a paper
   halftone lifting the top left, a black halftone shading the bottom right, the
   role in paper. The lit words (BEST, WORK) sit on blocks of the sun ink. Phone: two rows of two, each row standing on
   its own printed floor. Desktop (900px and up): four chairs in a row on one
   floor. Hover or focus turns that chair's canvases blue in 90ms. No script. */
.chairs { display: flex; flex-direction: column; container-type: size; }
/* the two lines share one size: THE BEST OF THESE (the widest phone line, 12.5em with its block)
   fits the width, and neither takes more than 7% of the stage's height per line */
.take {
  flex: none; margin: 0; padding: 12px 16px 10px; max-width: none; border-bottom: var(--rule);
  font-size: min(34px, (100cqw - 32px) / 12.5, 7cqh); line-height: .92; text-wrap: balance; text-align: center;
}
.defs { position: absolute; }
.take--end {
  border-bottom: 0; border-top: var(--rule); padding: 12px 16px 12px; background-color: var(--paper-low);
  background-image: radial-gradient(circle, rgb(0 0 0 / .30) .9px, transparent 1.1px); background-size: 4px 4px;
}

/* The rows share the stage's height, and each chair stands the full height of its row: its
   drawing (xMidYMax meet) fits the row and stands on the floor, so a short phone gets smaller
   chairs, never clipped ones. The set never takes its size from the chairs (contain: size), so
   on a landscape phone, where the stage scrolls (stage.css), they still fit one screen. */
.set { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); padding-bottom: 12px; contain: size; }
.row {
  min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px 10px 0; column-gap: 8px;
  border-bottom: var(--rule); position: relative;
}
.row + .row { padding-top: 18px; }
.row::after {
  /* the printed floor under each row */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
  background-color: var(--paper-low);
  background-image: radial-gradient(circle, rgb(0 0 0 / .30) .9px, transparent 1.1px); background-size: 4px 4px;
}

.chair { display: block; height: 100%; min-height: 0; text-decoration: none; }
.chair svg { height: 100%; width: 100%; overflow: visible; }
.chair .frame { fill: var(--ink); }
.chair .canvas { fill: var(--ink); stroke: var(--ink); stroke-width: 7; stroke-linejoin: miter; }
.chair .hi { fill: url(#pd); }
.chair .sh { fill: url(#kd); }
.chair .legs { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: butt; }
.chair .name { fill: var(--paper); font: 400 44px var(--heading); letter-spacing: -.02em; text-anchor: middle; }
.chair .name--two { font-size: 38px; }
/* at rest every canvas is black; hover or focus-visible turns that chair's canvases blue */
.chair svg .canvas { transition: fill var(--dur-1) var(--ease); }
.chair:hover .canvas, .chair:focus-visible .canvas { fill: var(--blue); }

/* desktop: a row of four on one floor */
@media (min-width: 900px) {
  /* one line each: ALWAYS ROOM FOR THE BEST OF THESE is 24.1em with its block */
  .take { padding: 20px 40px 16px; font-size: min(72px, (100cqw - 80px) / 24.1, 9cqh); }
  .take--end { padding: 20px 40px 22px; }
  .set {
    grid-template-rows: minmax(0, 1fr); grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 22px; padding: 28px 36px 0;
  }
  .row { display: contents; }
  .row::after { display: none; }
}
/* a landscape phone scrolls the page (stage.css); the stage stops being a size container there,
   since Chromium resolves a contained scrolling stage's container units to 0 (the lines then take
   the viewport as their measure) */
@media (max-height: 479px) {
  .chairs { container-type: normal; }
}