/* Hidden on desktop, shown on mobile */
.mobile-nav { display: none; }

@media (max-width: 600px) {

    /* Swap tile grid for simple nav */
    UL.tile-grid { display: none; }
    .mobile-nav { display: block; }


    /* Prevent any image from overflowing the screen */
    IMG {
        max-width: 100%;
        height: auto;
    }

    /* Unfloat illustrations — a 300px float leaves no room for text on a phone */
    IMG.illustrate-r,
    IMG.illustrate-l {
        float: none;
        display: block;
        margin: 0.5em auto;
    }
    DIV.description-right {
        float: none;
        margin: 0.5em 0;
    }

    /* Tighten body margins */
    BODY {
        margin-left: 1%;
        margin-right: 1%;
    }

    /* Suck-o-meter uses fixed-pixel bar widths that break on narrow screens */
    DIV.suck-o-meter { display: none; }

    /* Tables: ensure full width */
    TABLE.article,
    TABLE.diary,
    TABLE.main {
        width: 100%;
    }

}