/* The distance from the sides of the screen to the logo, the footer and
   the content of every page. */
:root {
    --edge: 3rem;
}

@media (min-width: 550px) {
    :root {
        --edge: 5rem;
    }
}

/* the logo in the top left corner, above everything, even a picture opened
   big; the links and name in the bottom corners, behind such a picture */
.header-left {
    position: fixed;
    left: var(--edge);
    top: 3rem;
    z-index: 2;
}

.header-left img {
    height: 4rem;
}

.footer-left {
    position: fixed;
    left: var(--edge);
    bottom: 3rem;
}

.footer-right {
    position: fixed;
    right: var(--edge);
    bottom: 3rem;
}

.footer-right p {
    margin-bottom: 0;
}

/* The page's own 10rem margin is the space under the last thing on it,
   whatever that last thing is: nothing adds its own margin to it. */
main > :last-child {
    margin-bottom: 0;
}

/* --- list of posts --- */

/* the list sits on the left, in line with the logo */
.post-index {
    margin-left: 0;
    padding-left: var(--edge);
}

.site-name {
    font-style: italic;
}

.post-index ul {
    list-style-type: none;
    padding: unset;
}

.post-index li {
    margin-bottom: 0;
}

.post-name {
    text-transform: uppercase;
}

/* --- post --- */

/* A post's text, with its pictures as a light table: small, on one sheet.
   Text and sheet share one centred column, at most 61.2rem wide and never
   closer to the sides of the screen than the logo and footer. */
.post {
    padding: 0 var(--edge);
    max-width: calc(61.2rem + 2 * var(--edge));
}

.post-title {
    margin-bottom: 3rem;
    text-align: center;
    text-transform: uppercase;
}

/* Every frame gets the same square, like frames on a roll of film: a
   landscape and a portrait have the same long side, and each picture sits
   in the middle of its square. The squares line up in columns: four
   across a phone, and on a wider screen as many squares of at least 9rem
   as fit. Either way the
   columns share the whole width, so the sheet lines up with the text.
   Around the sheet, the same 3rem as between the title and what follows. */
.contact-sheet {
    margin: 3rem 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

/* a square as wide as its column, with the picture whole in the middle;
   the picture's own box is exactly what you see, so opening and closing
   the big view grows from and shrinks back onto the picture itself */
.contact-sheet a {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    container-type: inline-size;
}

/* The picture fits in the square, whose side is 100cqw. Its width and
   height attributes only give its shape while it loads, hence the autos. */
.contact-sheet img {
    width: auto;
    height: auto;
    max-width: 100cqw;
    max-height: 100cqw;
}

@media (min-width: 550px) {
    .contact-sheet {
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    }
}