/* THE DESIGN PAGE: what faq.css and editor.css do not draw. Each part reads like an
   article: the words in the FAQ page's column (faq.css), then the pictures that show
   them, wider than the words, each with a numbered caption. */
.dz-part { margin-bottom: 90px; }
.dz-text { margin-bottom: 26px; }
.dz-title { text-align: left; margin-bottom: 6px; }
.dz-num { color: var(--teal); }
.dz-sub { font-size: 20px; font-weight: 600; line-height: 1.45; color: var(--green); margin: 0 0 18px; }
.dz-text p { font-size: 18px; line-height: 1.65; color: var(--ink); margin: 0 0 16px; }
.dz-text .dz-sub { font-size: 20px; color: var(--green); }
.dz-foryou { padding: 16px 20px; background: var(--white); border-left: 4px solid var(--teal);
             border-radius: 0 var(--r2) var(--r2) 0; box-shadow: var(--e1); }
.dz-foryou b { color: var(--green); }
.dz-h3 { font-family: var(--font-italic); font-weight: 400; font-size: 28px; line-height: 1.15;
         color: var(--ink); margin: 34px 0 14px; }
/* The mastheads: Hero across the whole width, the other six in pairs. */
.dz-grid { display: flex; flex-wrap: wrap; gap: 28px; }
.dz-grid > .dz-shot { flex: 0 0 calc((100% - 28px) / 2); }
.dz-grid > .dz-shot:first-child { flex-basis: 100%; }
/* The sections: two columns that fill like a wall, each shot at its own height. */
.dz-grid--2 { display: block; columns: 2; column-gap: 28px; }
.dz-grid--2 > .dz-shot { break-inside: avoid; margin-bottom: 28px; }
/* The page menu: two by two. */
.dz-grid--2x2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.dz-grid--4 { display: grid; gap: 28px; }
.dz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dz-stack { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 28px; align-items: center; }

/* One screenshot: the picture at its own shape, nothing cut, the name under it. */
.dz-shot { margin: 0; background: var(--white); border-radius: var(--r2); box-shadow: var(--e1); overflow: hidden; }
.dz-shot img { display: block; width: 100%; height: auto; }
.dz-shot figcaption { padding: 14px 18px 16px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.dz-shot figcaption b { color: var(--green); }
.dz-shot--wide { margin-bottom: 30px; }
/* A single picture is as wide as the words above it. */
.dz-shot--col { max-width: 820px; margin: 0 auto 30px; }

/* The three screens as one scene: the computer at the back, the tablet and the phone
   standing in front of it. Each body is the portfolio's device: one ink edge, a bezel,
   and a screen that curves less than the body (viewer.css, --lv-bezel and radii). */
.dz-scene { margin: 0; background: var(--white); border-radius: var(--r2); box-shadow: var(--e1); overflow: hidden; }
.dz-scene__stage { position: relative; padding: 48px 6% 9%; }
.dz-device { box-sizing: border-box; background: var(--ink); padding: 10px; border-radius: 34px; box-shadow: var(--e2); }
.dz-device__screen { border-radius: 24px; overflow: hidden; background: var(--ink); }
.dz-device__screen img { display: block; width: 100%; height: auto; }
.dz-device--computer { position: relative; width: 78%; margin: 0 auto; border-radius: 18px; padding: 12px 12px 14px; }
.dz-device--computer .dz-device__screen { border-radius: 8px; }
/* The computer's stand: a neck and a foot, in the same ink. */
.dz-device--computer::after { content: ""; display: block; position: absolute; left: 50%; transform: translateX(-50%);
  top: 100%; width: 16%; height: 34px; background: var(--ink); border-radius: 0 0 10px 10px;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.dz-device--tablet { position: absolute; left: 3%; bottom: 6%; width: 27%; border-radius: 26px; }
.dz-device--tablet .dz-device__screen { border-radius: 18px; }
.dz-device--phone { position: absolute; right: 4%; bottom: 5%; width: 14%; border-radius: 30px; padding: 7px; }
.dz-device--phone .dz-device__screen { border-radius: 22px; }
.dz-scene__caps { list-style: none; margin: 0; padding: 18px 22px 20px; display: grid; gap: 8px;
                  font-size: 16px; line-height: 1.45; color: var(--ink); border-top: 1px solid var(--line); }
.dz-scene__caps b { color: var(--green); }

@media (max-width: 950px) {
  .dz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .dz-grid--2x2 { gap: 20px; }
  .dz-grid > .dz-shot { flex-basis: calc((100% - 20px) / 2); }
  .dz-grid { gap: 20px; }
  .dz-grid--2 { column-gap: 20px; }
  .dz-grid--2 > .dz-shot { margin-bottom: 20px; }
  .dz-stack { grid-template-columns: 1fr; }
  .dz-device { padding: 6px; border-radius: 20px; }
  .dz-device__screen { border-radius: 14px; }
}
@media (max-width: 700px) {
  .dz-grid > .dz-shot { flex-basis: 100%; }
  .dz-grid--2 { columns: 1; }
  .dz-grid--2x2 { grid-template-columns: 1fr; }
  .dz-text p, .dz-text .dz-sub { font-size: 17px; }
  .dz-title { font-size: 32px; }
  .dz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .dz-device--phone { padding: 4px; border-radius: 14px; }
  .dz-device--phone .dz-device__screen { border-radius: 10px; }
  .dz-scene__caps { font-size: 15px; padding: 14px 16px 16px; }
  .dz-shot figcaption { font-size: 15px; padding: 12px 14px 14px; }
}