.porch-diagram-visual {
    position: relative;
    /* Original ink bounds: y=639..4072; retain 32 source pixels at either end. */
    aspect-ratio: 4650 / 3497;
    overflow: hidden;
}

.porch-diagram-visual > img {
    position: absolute;
    left: 0;
    top: -17.357735%; /* -607 / 3497; remove only transparent vertical margins. */
    width: 100%;
    height: auto;
}

:is(.porch-elevation-visual, .porch-section-a-visual, .porch-section-b-visual) {
    /* All three 9600px-wide drawings share the SAME source-pixel crop:
       left 272, right 88, top 280, bottom 278. Never fit them independently. */
    --porch-crop-height: 5032;
    position: relative;
    aspect-ratio: 9240 / var(--porch-crop-height);
    overflow: hidden;
}

.porch-elevation-visual {
    --porch-crop-height: 5612; /* 6170 - 280 - 278; section sources are 5590px tall. */
}

:is(.porch-elevation-visual, .porch-section-a-visual, .porch-section-b-visual) > .porch-drawing {
    /* One shared scale preserves the common architectural drawing scale.
       The label mask stays registered to each full, uncropped source image. */
    position: absolute;
    width: 103.896104%;
    left: -2.943723%;
    top: calc(-28000% / var(--porch-crop-height));
}