/* the smaller pages: your photos, the photo's own page */
main.page { padding-block: 40px 80px }
.page h1 { font-size: clamp(2.4rem, 4.8vw, 3.8rem); line-height: 1 }
.page .lead { margin-top: 12px }
.grid { margin-top: 32px; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) }
.card { display: grid; gap: 12px; background: var(--paper); box-shadow: 0 0 0 2px var(--line) inset; border-radius: 30px; padding: 12px 12px 18px }
.card .pic { position: relative; aspect-ratio: 3/4; border-radius: 20px; overflow: hidden; background: var(--butter) }
.card .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.card h3 { font-size: 1.375rem; padding-inline: 4px }
.card .meta { font: 700 1.25rem/1 var(--hand); color: var(--coral-d); padding-inline: 4px }
.card ul { list-style: none; margin: 0; padding: 0 4px; display: grid; gap: 6px; font-size: .9375rem }
.card ul li { display: flex; justify-content: space-between; gap: 10px }
.card ul li span:last-child { color: var(--gray); text-align: right }
.card .acts { display: flex; gap: 10px; flex-wrap: wrap; padding-inline: 4px }
.card .acts .btn { padding: 10px 16px; font-size: .9375rem }
.note { margin-top: 26px; padding: 18px 20px; border-radius: 26px; background: var(--butter); font-size: .9375rem; color: var(--ink-2); max-width: 44rem }
.empty { margin-top: 30px; color: var(--gray) }
/* the photo's own page */
.show { display: grid; gap: 28px; align-items: center; padding-block: 28px 80px }
@media (min-width: 900px) { .show { grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: 56px } }
.framed { background: #dcbb8f linear-gradient(90deg, rgba(150,105,60,.12), rgba(255,240,210,.18), rgba(150,105,60,.1)); padding: clamp(14px, 2.4vw, 26px); border-radius: 4px; box-shadow: 0 30px 70px -24px rgba(58,36,24,.45); max-width: 620px; margin-inline: auto; width: 100% }
.framed .mat { background: #f6f5f1; padding: clamp(18px, 4vw, 54px) clamp(18px, 4vw, 54px) clamp(22px, 4.6vw, 62px) }
.framed img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block }
.show .k { font: 700 1.625rem/1 var(--hand); color: var(--coral-d) }
.show h1 { margin-top: 12px }
.show .acts { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap }
.others { margin-top: 18px; display: flex; gap: 10px }
.others button { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; width: 64px; border-radius: 4px; overflow: hidden; outline: 2px solid transparent; outline-offset: 2px }
.others button[aria-pressed=true] { outline-color: var(--coral) }
.others img { width: 64px; aspect-ratio: 3/4; object-fit: cover; display: block }