/* Additional project media. Loaded only on projects with an editorial casebook. */
.dm-composition--portfolio-logo .dm-original-stage {
  background: var(--showcase-bg, #eeede8);
  padding: clamp(var(--s4), 8vw, var(--s15)) clamp(var(--s2), 6vw, var(--s12));
}
.dm-casebook {
  --casebook-board: #eeede8;
  --casebook-paper: #fff;
  --casebook-device: #252422;
  --casebook-shadow: #29201733;
  display: grid;
  gap: var(--s8);
  margin-block: var(--s8);
}
.dm-casebook-section > h2 {
  margin: 0 0 var(--s3);
  font-weight: 400;
}
.dm-casebook :is(figure, h3, p, ul) { margin: 0; }
.dm-casebook h3 { margin-block-end: var(--s1); }
.dm-casebook figcaption { margin-block-start: var(--s2); }
.dm-casebook :is(.dm-casebook-gallery, .dm-casebook-samples) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--gutter);
}
.dm-casebook-gallery > figure:first-child:nth-last-child(odd),
.dm-casebook-samples > figure:only-child { grid-column: 1 / -1; }
.dm-casebook :is(.dm-casebook-gallery, .dm-casebook-samples) > figure {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dm-casebook-artwork {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--casebook-artwork-bg, var(--casebook-board));
}
.dm-casebook-artwork img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 780px;
  object-fit: contain;
}
.dm-casebook-mockups {
  display: grid;
  gap: var(--s5);
}
.dm-casebook-scene {
  display: grid;
  grid-template-columns: repeat(var(--casebook-pieces, 2), minmax(0, 1fr));
  align-items: center;
  gap: clamp(var(--s2), 4vw, var(--s6));
  padding: clamp(var(--s3), 6vw, var(--s10));
  background: radial-gradient(ellipse at 20% 12%, #eeede8 0, #dedcd5 62%, #d1cfc6 100%);
}
.dm-casebook-scene--stationery {
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
}
.dm-casebook-piece {
  min-width: 0;
  max-width: 100%;
  position: relative;
  justify-self: center;
  filter: drop-shadow(2px 9px 10px var(--casebook-shadow));
}
.dm-casebook-piece img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
}
.dm-casebook-piece:is(.dm-casebook-piece--paper, .dm-casebook-piece--card, .dm-casebook-piece--booklet, .dm-casebook-piece--stand) {
  background: var(--casebook-paper);
  outline: 1px solid #1616111f;
}
.dm-casebook-piece--card { width: 86%; }
.dm-casebook-scene--stationery .dm-casebook-piece--card { width: 100%; }
.dm-casebook-piece--paper:only-child { max-width: 330px; }
.dm-casebook-piece--paper:nth-child(1),
.dm-casebook-piece--card { transform: rotate(-4deg); }
.dm-casebook-piece--paper:nth-child(2) { transform: rotate(3deg); }
.dm-casebook-piece--card:nth-child(even) { transform: rotate(4deg); }
.dm-casebook-piece--booklet { border-inline-start: 4px solid #ffffffb3; }
.dm-casebook-piece--stand::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 100%;
  width: 9%;
  background: #a9a69e;
  clip-path: polygon(0 0, 100% 90%, 0 100%);
}
.dm-casebook-piece:is(.dm-casebook-piece--tablet, .dm-casebook-piece--desktop) {
  background: var(--casebook-device);
  border: 7px solid var(--casebook-device);
  border-radius: var(--s1);
  outline: 1px solid #faf8f54d;
}
.dm-casebook-scene:has(.dm-casebook-piece--desktop) {
  padding-bottom: clamp(var(--s6), 10vw, var(--s12));
}
.dm-casebook-piece--desktop { max-width: min(100%, 640px); }
.dm-casebook-piece--desktop::after {
  content: "";
  position: absolute;
  inset: auto 25% -23px;
  height: 18px;
  background: linear-gradient(#77756e, #353430 85%);
  clip-path: polygon(40% 0, 60% 0, 65% 75%, 100% 75%, 100% 100%, 0 100%, 0 75%, 35% 75%);
}
.dm-casebook-piece--slide {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 160px;
  padding: var(--s3);
  background: var(--casebook-paper);
}
.dm-casebook-piece--slide img { width: auto; max-width: 100%; max-height: 140px; }
.dm-casebook-piece--cropped { width: 100%; }
.dm-casebook-crop {
  position: relative;
  overflow: hidden;
}
.dm-casebook-crop img {
  position: absolute;
  max-width: none;
  max-height: none;
}
.dm-casebook-system {
  display: grid;
  gap: var(--s4);
  padding: clamp(var(--s2), 4vw, var(--s5));
  background: var(--casebook-board);
}
.dm-casebook-samples .dm-casebook-artwork {
  background: var(--casebook-artwork-bg, var(--casebook-paper));
  min-height: var(--s15);
}
.dm-casebook-samples img { max-height: 280px; }
.dm-casebook ul { padding: 0; list-style: none; }
.dm-casebook-palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr));
  gap: var(--s2);
}
.dm-casebook-palette li > span { display: block; }
.dm-casebook-swatch {
  height: var(--s8);
  margin-block-end: var(--s1);
  background: var(--casebook-swatch);
  outline: 1px solid #0002;
  outline-offset: -1px;
}
.dm-casebook-system-copy { max-width: 34em; }
.dm-casebook-principles { display: grid; gap: var(--s2); }
@media (max-width: 768px) {
  .dm-casebook {
    gap: var(--s6);
    margin-block: var(--s6);
  }
  .dm-casebook :is(.dm-casebook-gallery, .dm-casebook-samples) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }
}
@media (max-width: 540px) {
  .dm-casebook-scene { grid-template-columns: minmax(0, 1fr); }
  .dm-casebook-scene .dm-casebook-piece { transform: none; }
  .dm-casebook-scene--stationery .dm-casebook-piece--card { width: 52%; }
  .dm-casebook-piece--stand::after { width: min(9%, var(--s2)); }
}

/* The World Café question sheets are typeset within the casebook grid. */
.dm-zdf-manual {
  --zdf-manual-ink: #173448;
  --zdf-manual-tint: #e9f1f4;
  --zdf-manual-rule: #b6c5cc;
  --zdf-manual-inset: clamp(var(--s2), 4vw, var(--s6));
  box-sizing: border-box;
  width: min(100%, 1170px);
  margin-inline: auto;
  padding: var(--zdf-manual-inset);
  color: var(--zdf-manual-ink);
  background: #f7f7f3;
  overflow-wrap: anywhere;
}
.dm-zdf-manual__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.dm-zdf-manual__topic,
.dm-zdf-manual__entry { padding: var(--zdf-manual-inset); }
.dm-zdf-manual__topic {
  color: #fff;
  background: var(--zdf-manual-ink);
}
.dm-zdf-manual__topic + .dm-zdf-manual__topic {
  color: var(--zdf-manual-ink);
  background: var(--zdf-manual-tint);
}
.dm-casebook .dm-zdf-manual__topic > h3 { margin-block-end: var(--s3); }
.dm-casebook .dm-zdf-manual__topic:first-child > h3.tl { color: inherit; }
.dm-zdf-manual__topic > p,
.dm-zdf-manual__entry > dd { max-width: 34ch; }
.dm-zdf-manual__group + .dm-zdf-manual__group { margin-block-start: var(--s4); }
.dm-zdf-manual__group > .dm-zdf-manual__pair {
  border-block-start: 1px solid var(--zdf-manual-rule);
  background: var(--zdf-manual-tint);
}
.dm-zdf-manual__entry + .dm-zdf-manual__entry {
  border-inline-start: 1px solid var(--zdf-manual-rule);
  background: #fff;
}
.dm-zdf-manual__entry > dd { margin: var(--s2) 0 0; }
@media (max-width: 767px) {
  .dm-zdf-manual__pair { grid-template-columns: minmax(0, 1fr); }
  .dm-zdf-manual__entry + .dm-zdf-manual__entry {
    border-inline-start: 0;
    border-block-start: 1px solid var(--zdf-manual-rule);
  }
}

.dm-zdf-manual--content .dm-zdf-manual__content-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
  padding: var(--zdf-manual-inset);
  color: #fff;
  background: var(--zdf-manual-ink);
}
.dm-zdf-manual--content .dm-zdf-manual__content-row:nth-child(even) {
  color: var(--zdf-manual-ink);
  background: var(--zdf-manual-tint);
}
.dm-casebook .dm-zdf-manual--content .tl { color: inherit !important; }
.dm-casebook .dm-zdf-manual__content-row > h3 { margin: 0; }
.dm-zdf-manual__content-row .tb { max-width: 40ch; }
.dm-casebook .dm-zdf-manual__content-note {
  max-width: 52ch;
  margin-block-start: var(--s2);
}
@media (min-width: 768px) {
  .dm-zdf-manual--content .dm-zdf-manual__content-row {
    grid-template-columns: minmax(10ch, 1fr) minmax(0, 3fr);
    column-gap: var(--s3);
  }
}