/* gallery in tumblr and pinterest style*/

/* grid */
.tumblr-archive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  /* soft spacing */
}

/* each tile = link */
.tumblr-archive .tile {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* card */
.tumblr-archive figure {
  background: var(--card, #fff);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow, 0 2px 12px rgba(0, 0, 0, .06));
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.tumblr-archive img {
  display: block;
  width: 100%;
  height: auto;
}

/* gif resizing */
.tumblr-archive video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius, 12px);
  object-fit: cover;
  aspect-ratio: 5/9;
}


/* caption */
.tumblr-archive figcaption {
  padding: .5rem .65rem;
  font-size: .9rem;
  color: var(--muted, #555);
  border-top: 1px solid var(--border, #E5E7EB);
  text-align: center;
}

/* hover polish only when a pointer can hover */
@media (hover:hover) {
  .tumblr-archive figure:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  }
}

/* optional “big tile” variations (apply to <a class="tile wide|tall">) */
.tumblr-archive .tile.wide figure {
  grid-column: span 2;
}

.tumblr-archive .tile.tall figure {
  grid-row: span 2;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tumblr-archive figure {
    transition: none;
  }
}

/* (optional) tighter gaps on very small screens */
@media (max-width: 520px) {
  .tumblr-archive {
    gap: 10px;
  }
}

/* footer cleanup */

.site-footer {
  /* layout.css already sets sizing/card styles; center footer here */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-wrap {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.footer-credit {
  font-weight: 600;
  color: var(--text, #333);
}

.footer-note {
  font-size: .9rem;
  color: var(--muted, #555);
  line-height: 1.5;
}

.footer-note a {
  color: var(--sage, #84A59D);
  text-decoration: underline;
}

.footer-note a:hover {
  color: var(--coral, #F28482);
}

.tumblr-archive {
  column-count: 4;
  column-gap: 8px;
}

.tumblr-archive .tile {
  display: inline-block;
  width: 100%;
  margin-bottom: 8px;
}