/* Dorpel · r2. A drawing sheet, an intervention, a studio you can reach.
   Home rules begin below the approved opening. P / T / dark oak remain. */

/* The section keeps its architectural labels; prose uses readable page type. */
.e-page .r1-intro .u-section { padding-top: 32px; }
.e-page .r1-intro .u-draw .u-lab { font-weight: 500; }
.e-page .r1-intro .r2-drawing-key {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 64px);
  margin: 0 0 36px;
  padding-top: 28px;
  border-top: 1px solid #b08d5766;
}
.e-page .r2-drawing-key > div { min-width: 0; }
.e-page .r2-drawing-key dt {
  font: 400 clamp(25px, 2.3vw, 34px)/1.1 var(--serif);
  margin-bottom: 14px;
}
.e-page .r2-drawing-key dd {
  max-width: 35ch;
  font: 400 16px/1.65 var(--sans);
  color: var(--ink-soft);
}
.e-page .r1-intro .r1-drawing-caption { border-top: 0; padding-top: 0; }

/* A comparison should explain how to look. The image pair itself stays registered. */
.e-page .r2-compare-guide {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding-top: 13px;
  font: 400 13px/1.5 var(--sans);
  letter-spacing: .015em;
  color: var(--ink-soft);
}
.e-page .r2-compare-guide > span {
  color: var(--brass-deep);
  font-size: 22px;
  line-height: 1;
}
.e-page .p-photo:focus-within .r2-compare-guide,
.e-page .sh-pics:focus-within .r2-compare-guide { color: var(--ink); }
.e-page .f-project-sequence > .card { align-items: center; }
.e-page .f-project-sequence > .r2-kitchen {
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
}
.e-page .f-project-sequence > .r2-kitchen .p-photo { grid-column: 2; grid-row: 1; }
.e-page .f-project-sequence > .r2-kitchen .meta { grid-column: 1; grid-row: 1; }
.e-page .f-project-sequence .card:not(.big) .meta { align-self: center; }

/* Five proper working sheets. A drawing / explanation above, three agreements below. */
.e-page.award-werkwijze .steps-v li:not(.photo) {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 28px;
  padding-block: clamp(56px, 6vw, 96px);
  align-items: start;
}
.e-page.award-werkwijze .steps-v li .award-phase { grid-column: 1/-1; grid-row: 1; }
.e-page.award-werkwijze .steps-v li .g-media {
  grid-column: 1; grid-row: 2/4;
  min-height: 0; width: 100%; max-width: none;
}
.e-page.award-werkwijze .steps-v li .g-media > svg {
  display: block; width: 100%; height: auto; max-height: 360px;
}
.e-page.award-werkwijze .steps-v li .g-media.ph-step img {
  width: 100%; height: auto; max-height: none; aspect-ratio: 3/2;
  object-fit: cover; outline: 0;
}
.e-page.award-werkwijze .steps-v li h2 {
  grid-column: 2; grid-row: 2;
  align-self: end;
  font-size: clamp(38px, 4.1vw, 64px);
  line-height: 1.03;
  max-width: 15ch;
  margin-top: 16px;
}
.e-page.award-werkwijze .steps-v li > .body {
  grid-column: 2; grid-row: 3;
  font-size: clamp(18px, 1.4vw, 21px);
  max-width: 42ch;
}
.e-page.award-werkwijze .steps-v li dl {
  grid-column: 1/-1; grid-row: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid #b08d5766;
}
.e-page.award-werkwijze .steps-v li dl > div { min-width: 0; }
.e-page.award-werkwijze .steps-v li dt { margin-bottom: 12px; }
.e-page.award-werkwijze .steps-v li dd { max-width: 39ch; }
.e-page.award-werkwijze .steps-v li .g-media figcaption { max-width: 100%; }
.e-page.award-werkwijze .steps-v li .g-media .e-pen {
  width: clamp(190px, 19vw, 260px); height: auto; max-height: none;
}
.e-page.award-werkwijze .steps-v li.photo { padding-block: 64px; }
.e-page.award-werkwijze .steps-v li.photo .people img { aspect-ratio: 3/2; }

/* The colophon belongs to a working practice: a clear address, hours and routes. */
.e-page .foot-line { position: relative; padding-top: 64px; }
.e-page .foot-line .fl {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
  gap: 32px 48px;
  align-items: start;
  padding-top: 32px;
}
.e-page .foot-line .fl > .mark { width: 140px; max-width: 100%; margin-top: 8px; }
.e-page .foot-line .fl > .mark svg { display: block; width: 100%; height: auto; }
.e-page .foot-line .b3-footer-contact { font-size: 14px; line-height: 1.7; }
.e-page .foot-line .b3-footer-contact p:first-child {
  font-size: 14px; margin-bottom: 14px; color: var(--ink-soft);
}
.e-page .foot-line .b3-footer-contact p:nth-child(2) {
  display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px;
  font-size: 16px; color: var(--ink);
}
.e-page .foot-line .b3-footer-contact a { min-height: 44px; align-content: center; }
.e-page .foot-line .b3-footer-contact a[href^="mailto:"] {
  font: 400 clamp(26px, 2.4vw, 36px)/1.25 var(--serif);
  color: var(--ink);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  text-decoration-color: #b08d5780;
}
.e-page .foot-line .b3-footer-contact p:last-child { margin-top: 12px; }
.e-page .foot-line .fl nav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px; width: 100%;
}
.e-page .foot-line .fl nav a { font-size: 15px; min-height: 44px; align-content: center; }
.e-page .foot-line .fl > p:last-child {
  grid-column: 1/-1; padding-top: 24px;
  border-top: 1px solid #b08d5740; font-size: 12px;
}
.e-page .foot-line .award-back {
  position: absolute; right: var(--side); bottom: calc(40 * var(--u));
  padding: 0; border: 0; margin: 0;
}

@media (max-width: 1000px) {
  .e-page .r1-intro .r2-drawing-key { column-gap: 24px; }
  .e-page .f-project-sequence > .r2-kitchen { grid-template-columns: minmax(0, 1fr); }
  .e-page .f-project-sequence > .r2-kitchen .p-photo { grid-column: 1; grid-row: 1; }
  .e-page .f-project-sequence > .r2-kitchen .meta { grid-column: 1; grid-row: 2; }
  .e-page.award-werkwijze .steps-v li:not(.photo) { column-gap: 32px; }
  .e-page.award-werkwijze .steps-v li dl { gap: 24px; }
  .e-page .foot-line .fl { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; }
  .e-page .foot-line .fl nav { grid-column: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .e-page .r1-intro .r2-drawing-key { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; margin-bottom: 28px; }
  .e-page .r2-drawing-key > div { display: block; }
  .e-page .r2-drawing-key dt { font-size: 26px; margin-bottom: 8px; }
  .e-page .r2-drawing-key dd { font-size: 15px; max-width: 40ch; }
  .e-page .r2-compare-guide { font-size: 12px; gap: 8px; }
  .e-page.award-werkwijze .steps-v li:not(.photo) { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding-block: 40px; }
  .e-page.award-werkwijze .steps-v li h2 { grid-column: 1; grid-row: 2; font-size: 42px; margin-top: 0; }
  .e-page.award-werkwijze .steps-v li > .body { grid-column: 1; grid-row: 3; font-size: 17px; }
  .e-page.award-werkwijze .steps-v li .g-media { grid-column: 1; grid-row: 4; max-width: 460px; }
  .e-page.award-werkwijze .steps-v li .g-media > svg { max-height: 300px; }
  .e-page.award-werkwijze .steps-v li dl { grid-column: 1; grid-row: 5; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .e-page.award-werkwijze .steps-v li dt { margin-bottom: 8px; }
  .e-page.award-werkwijze .steps-v li.photo { padding-block: 40px; }
  .e-page .foot-line { padding-top: 40px; }
  .e-page .foot-line .fl { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .e-page .foot-line .fl > .mark { width: 124px; }
  .e-page .foot-line .fl nav { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e-page .foot-line .b3-footer-contact p:nth-child(2) { display: block; font-size: 0; }
  .e-page .foot-line .b3-footer-contact a[href^="tel:"] { display: block; width: fit-content; font-size: 16px; }
}