/**
 * Small hand-written tweaks for the existing pages.
 *
 * Plain CSS on purpose: the Tailwind build in khalaq_design/ only scans
 * **\/*.{html,js}, so new utility classes used from PHP would never be
 * compiled into output.css.
 */

/* Contact block: let the photo run past the right edge of the viewport
   instead of stopping at the container. The row no longer clips it, so the
   bleed is contained by the page itself. */
html,
body {
    overflow-x: hidden;
}

.home-contact-row {
    overflow-x: hidden;
}

@media (min-width: 640px) {
    .home-contact-row {
        overflow-x: visible;
    }

    /* 50% - 50vw pulls the element from the container edge to the viewport
       edge; the extra 60px is the part that bleeds off-screen. */
    .home-contact-visual {
        margin-right: calc(50% - 50vw - 60px);
    }
}