.home-gallery { padding: clamp(3.5rem, 7vw, 7rem) 0; background: var(--pena-cream); color: var(--pena-ink); }
.home-gallery-jump { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.4rem; color: var(--pena-ink); font-size: .83rem; font-weight: 650; text-underline-offset: .3em; }
.home-gallery-jump svg { width: 1.1rem; height: 1.1rem; }
.gallery-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5rem; margin-bottom: 2.5rem; }
.gallery-kicker { font-size: .76rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.gallery-heading h2 { margin: .8rem 0 1rem; font-size: clamp(3rem, 5.7vw, 5.7rem); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.gallery-heading h2 em { position: relative; color: var(--pena-coral-deep); font-weight: 500; }
.gallery-heading h2 em::after { content: ""; position: absolute; right: -.03em; bottom: -.08em; left: .03em; height: .12em; border-radius: 50%; border-top: .035em solid currentColor; transform: rotate(-2deg); }
.gallery-calendar-link { display: inline-flex; justify-content: center; align-items: center; gap: .85rem; min-height: 3rem; padding: .8rem 1.3rem; border: 1px solid var(--pena-line-strong); border-radius: 999px; color: var(--pena-ink); background: var(--pena-paper); font-size: .84rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.gallery-heading .gallery-calendar-link { background: var(--pena-coral); border-color: transparent; }
.gallery-calendar-link:hover { background: var(--pena-blush); border-color: var(--pena-ink); }
.home-gallery svg, .gallery-dialog svg { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }
.gallery-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; border-top: 1px solid var(--pena-line); border-bottom: 1px solid var(--pena-line); }
.gallery-topics { display: flex; flex-wrap: wrap; gap: .5rem; }
.gallery-topic, .gallery-more, .gallery-reset { min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid var(--pena-line-strong); border-radius: 999px; color: var(--pena-ink); background: transparent; cursor: pointer; font: 650 .8rem/1.4 var(--pena-font-body); }
.gallery-topic[aria-pressed="true"] { background: var(--pena-ink); border-color: var(--pena-ink); color: var(--pena-paper); }
.gallery-topic:hover:not([aria-pressed="true"]), .gallery-more:hover, .gallery-reset:hover { background: var(--pena-blue-wash); }
.gallery-selects { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.gallery-selects label { display: flex; align-items: center; gap: .5rem; color: var(--pena-muted); font-size: .72rem; }
.gallery-selects select { max-width: 100%; min-height: 2.75rem; padding: .5rem .6rem; border: 1px solid var(--pena-line); border-radius: .5rem; color: var(--pena-ink); background: var(--pena-paper); font: 650 .78rem var(--pena-font-body); cursor: pointer; }
.gallery-status { margin: 1.15rem 0 1.5rem; color: var(--pena-muted); font-size: .76rem; line-height: 1.6; }
.gallery-albums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.7rem; margin-top: 1.5rem; }
.home-gallery .gallery-month-heading { display: flex; align-items: center; gap: 1rem; grid-column: 1 / -1; margin: 0 0 -.8rem; font: 650 .78rem/1.4 var(--pena-font-body); }
.gallery-month-heading::after { content: ""; height: 1px; flex: 1; background: var(--pena-line); }
.gallery-album { min-width: 0; }
.vp-card-kind { display: block; margin-bottom: .65rem; color: var(--pena-muted); font: 750 .68rem/1.5 var(--pena-font-body); letter-spacing: .09em; text-transform: uppercase; }
.gallery-album-open { display: block; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.gallery-collage { position: relative; display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1.17; gap: .35rem; padding: .5rem; border: 1px solid var(--pena-line); border-radius: 1rem; background: var(--pena-paper); box-shadow: 0 8px 24px rgba(22, 50, 63, .045); transition: transform 250ms ease, box-shadow 250ms ease; }
.gallery-album:nth-of-type(3n + 2) .gallery-collage { background: var(--pena-lilac-wash); }
.gallery-album:nth-of-type(3n) .gallery-collage { background: var(--pena-blue-wash); }
.gallery-collage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: .3rem; }
.gallery-collage img:first-child { grid-row: 1 / 3; border-radius: .6rem .3rem .3rem .6rem; }
.gallery-collage.is-single img { grid-column: 1 / -1; }
.gallery-collage.is-pair img:nth-child(2) { grid-row: 1 / 3; }
.gallery-collage img:nth-child(2) { border-top-right-radius: .6rem; }
.gallery-collage img:nth-child(3) { border-bottom-right-radius: .6rem; }
.gallery-album-open:hover .gallery-collage { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 12px 28px rgba(22, 50, 63, .1); }
.gallery-newest { position: absolute; left: 1rem; top: 1rem; padding: .45rem .7rem; border-radius: 999px; color: var(--pena-ink); background: var(--pena-blue); font-size: .65rem; font-weight: 750; }
.gallery-album-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem .8rem; margin: 1.15rem 0 .45rem; color: var(--pena-muted); font-size: .7rem; line-height: 1.5; }
.gallery-album h3 { margin: 0; font-size: clamp(1.7rem, 2.3vw, 2.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -.025em; }
.gallery-album-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .8rem; font-size: .73rem; }
.gallery-album-bottom > span:first-child { color: var(--pena-muted); }
.gallery-album-action { display: inline-flex; align-items: center; gap: .45rem; font-weight: 750; }
.gallery-album-action svg { width: 1rem; height: 1rem; }
.gallery-more { display: block; margin: 2rem auto 0; background: var(--pena-paper); }
.gallery-more:disabled { opacity: .6; cursor: wait; }
.gallery-skeleton { aspect-ratio: 1.17; border: 1px solid var(--pena-line); border-radius: 1rem; background: var(--pena-blush); }
.gallery-skeleton:nth-child(2) { background: var(--pena-lilac-wash); }
.gallery-skeleton:nth-child(3) { background: var(--pena-blue-wash); }
.gallery-empty { grid-column: 1 / -1; padding: 2rem; border: 1px solid var(--pena-line); border-radius: 1rem; background: var(--pena-paper); line-height: 1.7; }
.gallery-empty p { margin-top: 0; }
.gallery-dialog { width: min(72rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--pena-line); border-radius: 1.25rem; color: var(--pena-ink); background: var(--pena-paper); overscroll-behavior: contain; font-family: var(--pena-font-body); }
.gallery-dialog::backdrop { background: rgba(22, 50, 63, .8); }
.gallery-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.7rem; }
.gallery-dialog-heading p { margin: 0 0 .35rem; color: var(--pena-muted); font-size: .72rem; }
.gallery-dialog-heading h3 { margin: 0; font-size: 2rem; line-height: 1.15; font-weight: 500; }
.gallery-dialog-heading time { display: block; margin-top: .4rem; color: var(--pena-muted); font-size: .74rem; }
.gallery-icon-button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; flex-shrink: 0; border: 1px solid var(--pena-line-strong); border-radius: 50%; background: var(--pena-paper); color: var(--pena-ink); cursor: pointer; }
.gallery-icon-button svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.gallery-icon-button:hover:enabled { background: var(--pena-blue-wash); }
.gallery-icon-button:disabled { opacity: .3; cursor: not-allowed; }
.gallery-dialog-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, .33fr); }
.gallery-viewer { min-width: 0; background: var(--pena-cream); }
.gallery-viewer-media { display: grid; place-items: center; height: min(62dvh, 42rem); padding: 1rem; }
.gallery-viewer-media img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.gallery-viewer-nav { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.7rem 1.2rem; }
.gallery-viewer-nav span { font-size: .8rem; }
.gallery-dialog-sidebar { display: flex; flex-direction: column; min-width: 0; max-height: min(calc(62dvh + 5rem), 47rem); padding: 1rem; gap: 1rem; }
.gallery-thumbnails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; overflow-y: auto; min-height: 0; padding: .25rem; align-content: start; }
.gallery-thumbnail { display: block; aspect-ratio: 1; padding: 3px; border: 2px solid transparent; border-radius: .4rem; background: transparent; cursor: pointer; }
.gallery-thumbnail[aria-pressed="true"] { border-color: var(--pena-ink); background: var(--pena-blue); }
.gallery-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: .15rem; }
.gallery-dialog-sidebar .gallery-calendar-link { margin-top: auto; font-size: .73rem; padding-inline: .6rem; gap: .3rem; }
.gallery-photo-error { max-width: 24rem; padding: 1rem; text-align: center; color: var(--pena-muted); font-size: .88rem; line-height: 1.8; }
.v-pene-page [hidden], .home-gallery [hidden], .gallery-dialog [hidden] { display: none !important; }
@media (max-width: 1000px) {
  .gallery-heading { align-items: flex-start; }
  .gallery-controls { align-items: flex-start; }
  .gallery-albums { gap: 2rem 1rem; }
  .gallery-album-bottom { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 700px) {
  .gallery-heading { flex-direction: column; gap: 1.5rem; }
  .gallery-controls { gap: 1rem; }
  .gallery-topics { gap: .4rem; }
  .gallery-topic { padding: .6rem .8rem; font-size: .75rem; }
  .gallery-selects { width: 100%; gap: .7rem; justify-content: space-between; }
  .gallery-selects label { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .gallery-albums { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .gallery-album h3 { font-size: 2rem; }
  .gallery-album-bottom { flex-direction: row; align-items: center; }
  .gallery-album-meta { margin-top: 1rem; font-size: .74rem; }
  .gallery-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); border-radius: 1rem; }
  .gallery-dialog-heading { padding: 1rem; }
  .gallery-dialog-heading h3 { font-size: 1.7rem; }
  .gallery-dialog-body { grid-template-columns: minmax(0, 1fr); }
  .gallery-viewer-media { height: 42dvh; padding: .5rem; }
  .gallery-viewer-nav { padding: .5rem 1rem .8rem; }
  .gallery-dialog-sidebar { max-height: none; padding: .8rem 1rem 1rem; gap: .8rem; }
  .gallery-thumbnails { display: flex; overflow-x: auto; overflow-y: hidden; }
  .gallery-thumbnail { flex: 0 0 3.5rem; width: 3.5rem; }
  .gallery-dialog-sidebar .gallery-calendar-link { align-self: flex-start; padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .gallery-collage { transition: none; } .gallery-album-open:hover .gallery-collage { transform: none; } }