/* Shared header and page furniture for the studio pages. */
body { margin: 0; background: #0E1410; color: #E9E4D4; }
.studio-chrome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
  padding: 14px 20px; border-bottom: 1px solid rgba(128,128,128,.25);
  font: 500 13px/1.4 "Martian Mono", ui-monospace, monospace; }
.studio-chrome a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.studio-chrome .sep { opacity: .45; }
.studio-chrome .src { opacity: .7; font-weight: 400; }
.studio-page { border-top: 1px solid #26302A; margin: 0; padding: 56px 20px 8px; }
.studio-page h2 { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: 30px;
  margin: 0 0 10px; color: #E9E4D4; }
.studio-page .note { font: 400 15px/1.6 "Martian Mono", ui-monospace, monospace; color: #A9B0A2;
  margin: 0; max-width: 70ch; white-space: pre-line; }
.studio-board { display: block; overflow-x: auto; padding: 0 20px 40px; -webkit-overflow-scrolling: touch; }
.studio-board > h3 { font: 500 12px/1.4 "Martian Mono", ui-monospace, monospace; letter-spacing: 2px;
  text-transform: uppercase; color: #7C9A86; margin: 28px 0 10px; }
/* The boards were drawn on a 1200px canvas, so below that width they showed a
   slice and asked for a sideways scroll on every one. zoom is used rather than
   transform because it reflows the box, so the board's height comes down with
   it and nothing is left scrolling past a tall empty gap. It stops at .55:
   scaled to a phone's width the type would be four pixels tall, so past that
   point it keeps its size and the board scrolls, which is at least readable. */
.studio-board > div { width: 1200px; }
.studio-scroll { display: none; font: 400 11px/1.4 "Martian Mono", ui-monospace, monospace;
  letter-spacing: 1px; text-transform: uppercase; color: #56665B; margin: 0 0 8px; }
@media (max-width: 1239px) { .studio-board > div { zoom: .86; } }
@media (max-width: 1040px) { .studio-board > div { zoom: .72; } }
@media (max-width: 880px)  { .studio-board > div { zoom: .62; } }
@media (max-width: 760px)  { .studio-board > div { zoom: .55; } .studio-scroll { display: block; } }