/* APARAT V3 — page scaffolding on top of ds/aparatv3. */
.site { min-height: 100vh; background: var(--paper); color: var(--ink); }
.page-top { padding-top: 64px; }
.lead { font-size: 21px; line-height: 30px; }
.mt1 { margin-top: 8px; } .mt2 { margin-top: 16px; } .mt3 { margin-top: 24px; } .mt4 { margin-top: 48px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 16px 0; border-top: 1px solid var(--line); }
.list > li:last-child { border-bottom: 1px solid var(--line); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps > li { counter-increment: s; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 0.8fr); column-gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.steps > li:last-child { border-bottom: 1px solid var(--line); }
.steps > li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-mono); font-size: 15px; line-height: 26px; color: var(--ink-muted); }
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.thumbs button { padding: 0; border: 0; background: var(--paper-2); aspect-ratio: 4 / 3; position: relative; overflow: hidden; cursor: pointer; opacity: .55; }
.thumbs button[aria-pressed="true"] { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; }
.thumbs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ol { margin: 0; padding-left: 1.4em; }
.ol li + li { margin-top: 8px; }
@media (max-width: 760px) {
  .page-top { padding-top: 40px; }
  .lead { font-size: 19px; line-height: 28px; }
  .steps > li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
  .steps > li > :last-child { grid-column: 2; }
}

/* Black-and-white photographs. A display filter only: the image files stay in colour.
   On for the whole site. To show everything in colour again, add class "is-color" next to "site" on the page wrapper
   (on the live site: COLOR_PHOTOS in the build settings). To keep one photo in colour, give its img the class
   "keep-color" (in cases.js / sourced.js: "color": true on that photo). */
.site .a-img img, .site .thumbs img { filter: grayscale(1) contrast(1.06); }
.site.is-color .a-img img, .site.is-color .thumbs img, .site img.keep-color { filter: none; }

/* static-site additions */
html { background: var(--paper); }
body { margin: 0; }
[hidden] { display: none !important; }
.a-overlay { position: fixed; inset: 0; z-index: 50; overflow: auto; background: var(--paper); padding: 0 16px 24px; display: flex; flex-direction: column; }
.a-foot ul a { text-decoration: none; }
.a-fld--err .a-in, .a-fld--err .a-ta { border-width: 2px; }
.a-fld__hint { margin: 0; }
[data-form-error] { font-weight: 600; }
@media (max-width: 760px) {
  .a-recnav { flex-direction: column; align-items: flex-start; gap: 16px; }
}