/* mixedprojects.css — loads AFTER style.css, so it only adds what's new.
   Body font, background, and nav layout come from your existing file. */

:root {
    --ink: #111111;
    --paper: #F4F1EC;
    --gap: 32px; /* ONE gap used between tiles sideways AND between rows, so spacing is even */
}

/* ===== BUTTONS ===== */

.btn {
    display: inline-block;
    font-family: "Cutive Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--ink);
    padding: 6px 10px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.btn:hover,
.btn:focus-visible,
.btn[aria-pressed="true"] {
    background-color: var(--ink);
    color: var(--paper);
}

.btn:focus-visible,
.tile a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* ===== FILTERS: a simple row above the grid, on every screen size ===== */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--gap);
}

/* ===== GRID ===== */

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 8% 80px;
    box-sizing: content-box;
}

/* four equal columns, same gap in every direction.
   when a filter hides tiles, the rest flow back into the grid with no holes. */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.tile {
    margin: 0;
}

/* without this, grid rules can override the hidden attribute */
.tile[hidden] {
    display: none;
}

.tile figcaption {
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

/* the sketched box: an outlined frame that holds the image */
.tile a {
    display: block;
    aspect-ratio: 3 / 4;
    border: 1.5px solid var(--ink);
    overflow: hidden;
}

.tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== TABLET + PHONE ===== */

@media all and (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width: 500px) {
    .grid {
        grid-template-columns: 1fr;
    }
}