/* /portfolio tree + post pages — terminal fiction around <blog-post> */

.tree {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: calc(var(--baseline)*2);
    align-items: baseline;
}
.tree p { margin: calc(var(--baseline)/4) 0; text-align: left; }
.tree__dir { grid-column: 1 / -1; margin-top: var(--baseline); cursor: default; }
.tree__dir:hover { text-decoration: none; }
.tree__file { padding-left: calc(var(--baseline)*2); }
.tree__title { color: var(--wav-color); }

blog-post { max-width: 72ch; margin: var(--baseline) 0; }

/* narrow screens: filenames only, like a real `ls` — the titles are a
   desktop luxury (the post page shows the title anyway) */
@media screen and (max-width: 600px) {
    .tree { grid-template-columns: 1fr; }
    .tree__title { display: none; }
}