body { display: flex; flex-direction: column; }

#content-area { width: 95vw; min-height: 93vh; margin: 2vh auto 0; }

.section-sub {
    font-style: italic;
    font-size: 2.1vh;
    color: var(--ink-soft);
    text-align: left;
    margin: -1vh 0 3vh;
}

.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; }

.post {
    display: block;
    border: 1px solid var(--ink);
    padding: 1.5vh 1vw;
    box-shadow: 0 0 0 black;
    transition-duration: 50ms;
}

.post:hover { box-shadow: 0 0 5px black; scale: 1.03; transition-duration: 100ms; }

.post h2 { margin-bottom: 1vh; }

.post p:last-child { margin-bottom: 1vh; }

/* app cards: monogram tile + info, newspaper nameplate style */
.app-card {
    display: flex;
    gap: 1.2vw;
    align-items: flex-start;
    min-height: 16vh;
}

.app-icon {
    flex: 0 0 auto;
    width: 7vh;
    aspect-ratio: 1;
    border: 3px double var(--ink);
    object-fit: cover;
}

.app-info { flex: 1; }

.app-info .headline h2 { margin-bottom: 0; }


@media (max-width: 100vh) {
    .app-grid { grid-template-columns: 1fr; }
    .app-card { min-height: unset; }
}