/* studioarchivepro.com. The same frame as an artist's inventory page (docs/inventory-page):
   words in a column on the left, the work on the right. Ink on paper, two greys, no boxes. */
:root { --ink: #000; --grey: #666; --paper: #fff; --mat: #ededed; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink);
       font: 13px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.side { position: fixed; top: 24px; left: 24px; width: 180px; }
.side h1 { font-size: 13px; font-weight: normal; margin-bottom: 18px; }
.side nav a { display: block; color: var(--grey); }
.side nav a.on { color: var(--ink); }
.side .get { margin-top: 18px; }
.side .get a, .link { text-decoration: underline; }

main { margin-left: 228px; padding: 24px 24px 80px 0; max-width: 1180px; }
img { display: block; width: 100%; height: auto; }
/* A screenshot is white on white; the grey mat the artwork photographs sit on gives it an edge. */
.plate { background: var(--mat); padding: 5%; }
.phones .plate { padding: 8%; }
.lead { max-width: 560px; margin: 0 0 40px; font-size: 17px; line-height: 1.4; }
.wide { margin-bottom: 64px; }
.pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; margin-bottom: 64px; }
.phones { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 32px; margin-bottom: 64px; }
.cap { margin-top: 8px; color: var(--grey); }

section, .text { max-width: 560px; }
section { margin-bottom: 40px; }
section h2, .text h2, .text h3 { font-size: 13px; font-weight: normal; }
section p, section li { color: var(--grey); }
ul { list-style: none; }

/* Long reading pages: support and privacy. */
.text h2 { margin-top: 32px; }
.text > h2:first-child { margin-top: 0; }
.text h3 { margin-top: 16px; color: var(--grey); }
.text p, .text ul, .text table { margin-top: 8px; }
.text li { padding-left: 1em; text-indent: -1em; }
.text li::before { content: "- "; }
.text strong { font-weight: normal; color: var(--ink); }
.text table { border-collapse: collapse; width: 100%; }
.text th, .text td { text-align: left; vertical-align: top; padding: 4px 16px 4px 0; font-weight: normal; }
.text th { color: var(--grey); }
.text code { font: inherit; }
.text hr { display: none; }
.quiet { color: var(--grey); }

footer { margin-top: 64px; color: var(--grey); }

@media (max-width: 640px) {
  .side { position: static; width: auto; padding: 16px 16px 0; }
  .side nav { display: flex; flex-wrap: wrap; gap: 0 16px; }
  main { margin: 0; padding: 24px 16px 64px; }
  .pair { grid-template-columns: 1fr; }
  .phones { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
  .lead { font-size: 15px; }
}