/* Dorpel · f. Read each house at the scale of a room.
   These selectors begin below the approved openings. Paper, tracing paper, oak. */
.e-page .c-scroll {
  --plaster: #f6f3ee;
  --plaster-2: #ebe8e3;
  --frame: #ebe8e3;
}
.e-page .c-scroll > .c-oak-band {
  --plaster: #2a2622;
  --plaster-2: #2a2622;
  --frame: #2a2622;
}
.e-page .c-scroll :is(.p2-label,.p2-grip) { background: #f6f3ee; }
.e-page .c-scroll .e-photo-plan { background: #ebe8e3; }
.e-page .c-scroll .people figcaption .hand { white-space: normal; max-width: 100%; }
.e-page .c-scroll .f-project-sequence {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: clamp(56px,6vw,96px);
}
.e-page .f-project-sequence > .card {
  display: grid;
  grid-template-columns: minmax(0,9fr) minmax(0,3fr);
  gap: 32px;
  align-items: end;
}
.e-page .f-project-sequence > .card.big { grid-template-columns: minmax(0,1fr); gap: 0; }
.e-page .f-project-sequence .card .meta {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid #b08d57;
  text-decoration: none;
}
.e-page .f-project-sequence .card.big .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-top: 22px;
}
.e-page .f-project-sequence .card h3 { font-size: clamp(28px,2.7vw,42px); line-height: 1.12; }
.e-page .f-project-sequence .card.big h3 { max-width: 26ch; }
.e-page .f-project-sequence .card.big .small { flex-shrink: 0; }
.e-page .f-project-sequence .p2-compare { aspect-ratio: 16/9; }

/* The approved pairs stay registered to one another at every viewport. */
.e-page .f-case-comparison .p2-compare { aspect-ratio: 16/9; }
.e-page.award-case .c-scroll .ex-c.p-single.f-garden-study {
  grid-template-columns: minmax(0,1fr);
  gap: 36px;
}
.e-page.award-case .c-scroll .f-garden-study .p2-compare { aspect-ratio: 16/9; }
.e-page.award-case .c-scroll .f-garden-study .ex-side {
  display: grid;
  grid-template-columns: 32px minmax(0,4fr) minmax(0,6fr);
  gap: 20px 32px;
  align-items: baseline;
}
.e-page.award-case .c-scroll .f-garden-study .ex-side .body { max-width: 52ch; margin: 0; }
.e-page .f-comparison-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px 40px;
  padding-top: 16px;
  font: 400 14px/1.55 var(--sans);
  color: var(--ink-soft);
}
.e-page .f-comparison-caption > :last-child { color: var(--brass-deep); }

/* One material study: a large joint or window seat and its small, useful samples. */
.e-page .c-scroll .f-material-study {
  display: grid;
  grid-template-columns: minmax(0,8fr) minmax(0,4fr);
  gap: 48px;
  align-items: start;
}
.e-page .c-scroll .f-material-study > .award-detail {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
}
.e-page .c-scroll .f-material-study > .award-detail figcaption { max-width: 58ch; margin-top: 20px; }
.e-page .c-scroll .f-material-study .mat { display: block; }
.e-page .c-scroll .f-material-study ul {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 0;
  list-style: none;
}
.e-page .c-scroll .f-material-study li {
  display: grid !important;
  grid-template-columns: 32px minmax(0,1fr);
  gap: 18px;
  padding: 18px 0 !important;
  border-top: 1px solid #b08d5766 !important;
}
.e-page .c-scroll .f-material-study li:first-child { padding-top: 0 !important; border-top: 0 !important; }
.e-page .c-scroll .f-material-study li:last-child { border-bottom: 0; }
.e-page .c-scroll .f-material-study .chip {
  display: block;
  width: 32px !important;
  height: 40px !important;
  aspect-ratio: auto;
  margin: 0;
  box-shadow: inset 0 0 0 1px #231f1b14;
}
.e-page .c-scroll .f-material-study .small { font-size: 15px; line-height: 1.6; }
.e-page .c-scroll .f-threshold-materials > img { height: auto; aspect-ratio: 3/2; }

/* Continue through a substantial photograph, rather than a thumbnail. */
.e-page.award-case .c-scroll .next { display: block; }
.e-page.award-case .c-scroll .next-link {
  display: grid;
  max-width: none;
  grid-template-columns: minmax(0,8fr) minmax(0,4fr);
  gap: 24px 48px;
  align-items: end;
}
.e-page.award-case .c-scroll .award-next-photo {
  grid-column: 1;
  grid-row: 1/3;
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: 16/9;
}
.e-page.award-case .c-scroll .next-link > .eyebrow { grid-column: 2; align-self: end; margin: 0; }
.e-page.award-case .c-scroll .next-link > .h-m { grid-column: 2; align-self: start; }
.e-page.award-case .c-scroll .next .ctas { justify-content: flex-end; flex-wrap: wrap; margin-top: 28px; }

/* The two later projects on the index receive the same large drawing-sheet format. */
.e-page.award-projecten .c-project-rest > .sheet { grid-template-columns: minmax(0,1fr); }
.e-page.award-projecten .c-project-rest > .sheet .sh-pics { grid-column: 1; grid-row: 1; padding: 0; }
.e-page.award-projecten .c-project-rest > .sheet .info {
  display: grid !important;
  grid-template-columns: minmax(0,5fr) minmax(0,6fr);
  grid-column: 1;
  grid-row: 2;
  gap: 20px 64px;
  padding: 0;
  align-items: start;
}
.e-page.award-projecten .c-project-rest > .sheet .info .story { margin-top: 0; }
.e-page.award-projecten .c-project-rest > .sheet .info .tl { grid-column: 2; justify-self: start; }

@media (max-width:1000px) {
  .e-page .f-project-sequence > .card { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .e-page .f-project-sequence .card.big .meta { display: block; }
  .e-page .f-project-sequence .card .meta { margin: 0; }
  .e-page .c-scroll .f-material-study { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .e-page .c-scroll .f-material-study ul { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; }
  .e-page .c-scroll .f-material-study li:first-child { padding: 18px 0 !important; border-top: 1px solid #b08d5766 !important; }
  .e-page .c-scroll .f-material-study li { align-content: start; }
  .e-page.award-case .c-scroll .f-garden-study .ex-side { grid-template-columns: 32px minmax(0,1fr); gap: 12px 20px; }
  .e-page.award-case .c-scroll .f-garden-study .ex-side .body { grid-column: 2; }
  .e-page.award-projecten .c-project-rest > .sheet .info { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .e-page.award-projecten .c-project-rest > .sheet .info .tl { grid-column: 1; }
  .e-page.award-projecten .c-scroll .sm-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
  .e-page.award-case .c-scroll .ex-b { grid-template-columns: minmax(0,1fr); gap: 32px; margin-right: 0; }
}
@media (max-width:700px) {
  .e-page .f-project-sequence .card h3 { font-size: 30px; }
  .e-page .f-project-sequence .card .meta { padding-top: 16px; }
  .e-page .f-comparison-caption { display: grid; gap: 8px; font-size: 13px; }
  .e-page .c-scroll .f-material-study ul { grid-template-columns: minmax(0,1fr); }
  .e-page.award-case .c-scroll .next-link { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .e-page.award-case .c-scroll .next-link > .award-next-photo { grid-row: 1; }
  .e-page.award-case .c-scroll .next-link > :is(.eyebrow,.h-m) { grid-column: 1; }
  .e-page.award-case .c-scroll .next .ctas { justify-content: flex-start; }
  .e-page.award-projecten .c-scroll .sm-list { grid-template-columns: minmax(0,1fr); }
  .e-page.award-projecten .c-scroll .ex-plan .info { grid-template-columns: minmax(0,1fr); gap: 24px; }
}