@import url('/base.css');
main { padding: clamp(3.5rem, 7vw, 6rem) 0 6rem; }
.brand a { text-decoration: none; }
.archive-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem); gap: clamp(3rem, 8vw, 7rem); align-items: end; margin-bottom: clamp(3rem, 7vw, 5rem); }
.archive-head h1 { margin: .55rem 0 1rem; }
.archive-head .lede { margin: 0; }
.archive-head form { display: grid; gap: .55rem; }
.archive-head label { color: var(--quiet); font: 600 .72rem var(--mono); }
.search { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--line-strong); }
.search:focus-within { outline: 2px solid var(--paper); outline-offset: 3px; }
.search input, .search button { border: 0; }
.search input { min-width: 0; outline: 0; }
.search button { white-space: nowrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 18rem)); gap: 1rem; }
.tile { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); background: var(--panel); color: var(--paper); text-decoration: none; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: opacity .15s ease; }
.tile:hover img { opacity: .78; }
.tile span { position: absolute; inset: auto 0 0; padding: .55rem .65rem; background: linear-gradient(transparent, rgb(8 8 9 / .92)); color: var(--paper); font: 600 .68rem var(--mono); }
.more, .back { margin: 2.5rem 0 0; }
.post-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.5rem; }
.post-head h1 { max-width: 16ch; margin: .5rem 0 0; font-size: clamp(2.2rem, 6vw, 4.5rem); }
.viewer { display: grid; place-items: center; min-height: 12rem; margin: 0; background: #000; border-block: 1px solid var(--line); }
.viewer img, .viewer video { display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; }
.viewer video { width: 100%; }
.post-data { display: grid; grid-template-columns: 1fr minmax(18rem, .65fr); gap: clamp(3rem, 8vw, 7rem); margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.post-data h2 { color: var(--dim); font: 600 .68rem var(--mono); letter-spacing: .04em; }
.tags { display: flex; flex-wrap: wrap; gap: .45rem .8rem; }
.tags a, .tags span { font: .8rem var(--mono); }
.sources-title { margin-top: 2rem; }.sources { display: grid; gap: .35rem; }.sources a { width: fit-content; font-size: .9rem; }
dl { margin: 0; }
dl div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
dt { color: var(--quiet); } dd { margin: 0; font-family: var(--mono); }
.empty { padding: 4rem 0; border-top: 1px solid var(--line); color: var(--quiet); }
@media (max-width: 46rem) { .archive-head, .post-data { grid-template-columns: 1fr; } .archive-head { gap: 2rem; } .post-head { align-items: start; flex-direction: column; } .post-head .button { width: 100%; } .search { grid-template-columns: 1fr; }.search button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .tile img { transition: none; } }