/* Dorpel · e. Paper, tracing paper, oak. The approved opening has no overrides. */
.e-page .c-scroll {
  --plaster: #f2ece2;
  --plaster-2: #e9e1d4;
  --frame: #e9e1d4;
}
.e-page .c-scroll > .c-oak-band {
  --plaster: #2a2622;
  --plaster-2: #2a2622;
  --frame: #40382f;
  --ink: #f2ece2;
}
/* The same sheet carries a case from drawing to room; no extra colour at the close. */
.e-page .c-scroll .b3-result,
.e-page .c-scroll .plan-sec { background: var(--plaster); }
.e-page .c-scroll .plan,
.e-page .c-scroll .scan-frame,
.e-page .c-scroll .table { background: var(--plaster-2); }
.e-page .c-scroll .p2-label,
.e-page .c-scroll .p2-grip { background: #f2ece2; }

/* Draw the sill at its actual section boundary. It never travels with scroll. */
.e-page .c-scroll > section::before,
.e-page .c-project-rest > article::before { height: 1px; }
.e-page .e-threshold { position: absolute; top: -5px; left: var(--side); width: calc(100% - 2 * var(--side)); height: 11px; overflow: visible; pointer-events: none; color: #b08d57; }
.e-page .c-project-rest > article > .e-threshold { left: 0; width: 100%; }
.e-page .e-has-threshold::before { content: none; }
.e-page .e-threshold path { vector-effect: non-scaling-stroke; }

/* Small notes use actual single-line pen paths; the words remain accessible. */
.e-page .e-note { margin: 0; color: #7d5f31; }
.e-page .e-note-copy { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.e-page .e-pen { display: block; width: min(100%, 290px); height: auto; overflow: visible; }
.e-page .e-home-note { position: absolute; right: var(--side); bottom: 14px; width: min(360px, calc(100% - 2 * var(--side))); transform: rotate(-2deg); }
.e-page .e-home-note .e-pen { width: 100%; }
.e-page .e-plan-note { width: 230px; margin: 0 0 30px auto; transform: rotate(-3deg); }
.e-page .e-studio-note { width: 250px; margin: 0 0 40px auto; transform: rotate(-3deg); }
.e-page .e-index-note { grid-column: 1/-1; width: 210px; margin: 0 0 12px auto; transform: rotate(-3deg); }
.e-page .steps-v .e-note { margin-top: 14px; }
.e-page .steps-v .e-pen { width: 190px; max-width: 100%; }

/* No repeat of a pencil circle at every text link. Keep the clear underline. */
.e-page :is(.c-scroll, .doorway, .foot-line, .steps-v) .pl { display: none; }
.e-page :is(.c-scroll, .doorway, .foot-line, .steps-v) .tl.has-pl:is(:hover, :focus-visible) { text-decoration-color: currentColor; }
.e-page :is(.c-scroll, .doorway, .steps-v) .btn.solid {
  transition: background-color 180ms ease;
}
.e-page :is(.c-scroll, .doorway, .steps-v) .btn.solid:is(:hover, :focus-visible) {
  clip-path: polygon(0 0,100% 8%,100% 92%,0 100%);
}
.e-page .c-scroll .plan svg :is(.v,.n) { transition: opacity 240ms ease; }
.e-page .c-scroll .award-next-photo,
.e-page .award-back span { transition: none; }
.e-page .c-scroll .next-link:hover .award-next-photo { filter: none; }
.e-page .award-back a:hover span { transform: none; }
.e-page :is(.c-scroll, .doorway, .foot-line, .steps-v) a:focus-visible {
  outline: 2px solid var(--brass-deep); outline-offset: 5px;
}
/* Text and photos arrive as content, without the repeated generic lift. */
.e-page .c-scroll .rise { opacity: 1; transform: none; transition: none; }
/* Replace the old multi-second stagger with one short construction sequence. */
.e-page .u-draw.draw-ready .dr { animation: none !important; stroke-dasharray: none; stroke-dashoffset: 0; }
.e-page .u-draw.draw-ready text,
.e-page .u-draw.draw-ready .fl { opacity: 1; transition: none; }

/* A room deserves more than a small supporting image. Matched comparisons
   always share the exact crop, keeping the slider spatially truthful. */
.e-page.award-case .c-scroll .ex-c.p-single {
  grid-template-columns: minmax(0,9fr) minmax(0,3fr); gap: 40px;
}
.e-page.award-case .c-scroll .ex-c .p2-compare { aspect-ratio: 16/10; }
.e-page.award-case .c-scroll .ex-c .p2-compare img { object-position: 50% 56%; }
.e-page.award-case .c-scroll .b3-lived .people { max-width: none; }
.e-page.award-case .c-scroll .people > picture img,
.e-page.award-case .c-scroll .people > img,
.e-page.award-case .c-scroll .e-photo-stage img {
  width: 100%; aspect-ratio: 16/8.6; height: auto; object-fit: cover;
}
.e-page.award-case .c-scroll .people img[src*="mens-tuinkamer"] { object-position: 50% 58%; }
.e-page.award-case .c-scroll .people img[src*="mens-zolder"] { object-position: 50% 50%; }
.e-page.award-case .c-scroll .people img[src*="mens-keuken"] { object-position: 50% 55%; }
.e-page.award-case .c-scroll .people figcaption {
  max-width: 65ch; margin-top: 20px; padding-top: 14px;
  border-top: 1px solid #b08d57; font-size: 14px; line-height: 1.65;
}
.e-page .c-scroll :is(.ch-head,.ex-side) .num { font-variant-numeric: tabular-nums; }
.e-page .c-scroll .ex-side .body { max-width: 31ch; }
.e-page .c-scroll .ex-side .h-l { font-size: clamp(36px,3.5vw,56px); }
.e-page .c-scroll .award-detail {
  display: grid; grid-template-columns: minmax(0,630px) minmax(180px,1fr);
  align-items: end; gap: 48px; width: 100%; max-width: 1040px;
  margin-top: clamp(40px,6vw,88px);
}
.e-page .c-scroll .award-detail figcaption { margin: 0; padding-top: 16px; border-color: #b08d57; max-width: 28ch; }
/* The original drawing and photograph share one reserved image box. */
.e-page .e-photo-stage { position: relative; isolation: isolate; overflow: hidden; }
.e-page .e-photo-stage > picture { display: block; }
.e-page .e-photo-plan { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: #e9e1d4; pointer-events: none; }
.e-page .e-photo-plan > svg { width: 78%; height: 78%; max-height: 500px; color: #5b5248; }
.e-page .e-photo-plan .v { display: none; }
.e-page .e-photo-plan .n { display: inline; }
.e-page .e-photo-plan text { font-family: var(--sans); }
.e-page .e-photo-plan svg.pencil text { font-family: "Jost", sans-serif; }
/* The photo resolves; controls and text remain available throughout. */
@media(max-width:1000px) {
  .e-page.award-case .c-scroll .ex-c.p-single { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .e-page .c-scroll .ex-side .body { max-width: 55ch; }
  .e-page .c-scroll .award-detail { grid-template-columns: minmax(0,630px); gap: 20px; max-width: 630px; }
  .e-page .c-scroll .award-detail figcaption { max-width: 48ch; }
}
@media(max-width:700px) {
  .e-page.award-case .c-scroll .people > picture img,
  .e-page.award-case .c-scroll .people > img,
  .e-page.award-case .c-scroll .e-photo-stage img { aspect-ratio: 4/3; }
  .e-page .e-plan-note { width: 210px; margin-bottom: 24px; }
  .e-page .e-home-note { width: 270px; bottom: 12px; }
  .e-page .e-pen { stroke-width: 1.5; }
  .e-page .c-scroll .award-detail { max-width: 100%; }
}
@media(prefers-reduced-motion:reduce) {
  .e-page .e-pen path, .e-page .e-threshold path,
  .e-page :is(.c-scroll,.steps-v,.doorway,.foot-line) *,
  .e-page :is(.c-scroll,.steps-v,.doorway,.foot-line) *::before,
  .e-page :is(.c-scroll,.steps-v,.doorway,.foot-line) *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto;
  }
}