.gallery-page { overflow: clip; }
.gallery-page .section { padding-block: 80px; }
.gallery-hero { position: relative; padding: 80px 0; background: var(--gradient-day); }
.gallery-hero::before { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 26%, rgba(99,215,208,.19), transparent 18rem), radial-gradient(circle at 16% 74%, rgba(243,184,75,.12), transparent 13rem); content: ""; }
.gallery-hero__grid, .gallery-exploration__grid, .gallery-combat__grid, .gallery-characters__grid, .gallery-story__grid { position: relative; display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.gallery-hero__copy { grid-column: span 5; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: 16px; }
.gallery-hero__copy > * { min-width: 0; margin: 0; }
.gallery-hero__copy h1 { max-width: 16ch; font-size: clamp(2.125rem, 4vw + 1rem, 3.5rem); }
.gallery-hero__lead { max-width: 58ch; color: var(--color-slate); font-size: var(--text-lead); line-height: 1.56; }
.gallery-hero__actions { display: flex; min-width: 0; flex-wrap: wrap; gap: 12px; align-items: center; }
.gallery-hero__actions > * { min-width: 0; }
.gallery-source { display: flex; gap: 12px; max-width: 48ch; padding: 16px; border: var(--border-default); border-radius: var(--radius-md); background: #fff; }
.gallery-source > * { min-width: 0; }
.gallery-source p { margin: 0; color: var(--color-slate); font-size: var(--text-sm); line-height: 1.5; }
.gallery-source__icon { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--color-celestine) 18%, white); color: var(--color-primary); }
.gallery-hero__media { grid-column: 7 / span 6; min-width: 0; margin: 0; align-self: center; }
.gallery-hero__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery-hero__media figcaption { padding-inline: 4px; }
.gallery-reading__intro { max-width: 56ch; }
.gallery-reading__items { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.gallery-reading__item { display: grid; min-width: 0; grid-template-columns: 1fr; gap: 12px; padding-top: 16px; border-top: 2px solid var(--color-celestine); }
.gallery-reading__item > * { min-width: 0; }
.gallery-reading__item--combat { border-top-color: var(--color-sun); }
.gallery-reading__item--characters { border-top-color: var(--color-leaf); }
.gallery-reading__item--story { border-top-color: var(--color-sky); }
.gallery-reading__number { color: var(--color-primary); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-extrabold); }
.gallery-reading__item h3 { font-size: 1.15rem; }
.gallery-reading__item p { max-width: 30ch; color: var(--color-slate); }
.gallery-exploration__copy { grid-column: span 4; min-width: 0; }
.gallery-exploration__copy p { max-width: 56ch; }
.gallery-exploration__media { grid-column: 6 / span 7; min-width: 0; width: 100%; align-self: start; }
.gallery-image-trigger { padding: 0; border: 0; background: transparent; text-align: left; }
.gallery-image-trigger .image-frame { width: 100%; box-shadow: var(--shadow-card); transition: box-shadow var(--transition-base), border-color var(--transition-base); }
.gallery-image-trigger img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--transition-base); }
.gallery-image-trigger:hover .image-frame { border-color: var(--color-sky); box-shadow: var(--shadow-card-hover); }
.gallery-image-trigger:hover img { transform: scale(1.02); }
.gallery-observations { grid-column: span 4; display: flex; min-width: 0; flex-direction: column; gap: 12px; max-width: 44ch; margin: 0; padding: 0; list-style: none; }
.gallery-observations li { position: relative; min-width: 0; padding-left: 20px; color: var(--color-slate); }
.gallery-observations li::before { position: absolute; top: .66em; left: 0; width: 8px; height: 8px; border: 2px solid var(--color-celestine); border-radius: 50%; content: ""; }
.gallery-combat__heading { max-width: 58ch; }
.gallery-combat__grid { margin-top: 32px; }
.gallery-combat__media { grid-column: span 7; min-width: 0; width: 100%; }
.gallery-combat__media .image-frame { border-color: color-mix(in srgb, var(--color-sun) 55%, var(--color-line)); }
.gallery-combat__notes { grid-column: 9 / span 4; display: flex; min-width: 0; flex-direction: column; gap: 24px; }
.gallery-combat__notes > * { min-width: 0; padding-bottom: 24px; border-bottom: var(--border-default); }
.gallery-combat__notes > *:last-child { padding-bottom: 0; border-bottom: 0; }
.gallery-combat__notes h3 { font-size: var(--text-h4); }
.gallery-combat__notes p { max-width: 38ch; color: var(--color-slate); }
.gallery-characters__copy { grid-column: span 5; min-width: 0; }
.gallery-characters__copy > p { max-width: 52ch; }
.gallery-characters__media { grid-column: 7 / span 6; min-width: 0; width: 100%; max-width: 560px; justify-self: end; }
.gallery-characters__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gallery-characters__perspectives { display: flex; min-width: 0; flex-direction: column; gap: 24px; margin-top: 24px; }
.gallery-characters__perspectives > * { min-width: 0; padding-left: 16px; border-left: 2px solid var(--color-celestine); }
.gallery-characters__perspectives > *:last-child { border-left-color: var(--color-sun); }
.gallery-characters__perspectives h3 { font-size: var(--text-h4); }
.gallery-characters__perspectives p { max-width: 46ch; color: var(--color-slate); }
.gallery-story__media { grid-column: span 7; min-width: 0; width: 100%; }
.gallery-story__copy { grid-column: 9 / span 4; min-width: 0; }
.gallery-story__copy > p { max-width: 46ch; color: var(--color-slate); }
.gallery-story__points { display: flex; min-width: 0; flex-direction: column; gap: 24px; margin-top: 24px; }
.gallery-story__points > * { min-width: 0; padding-top: 24px; border-top: var(--border-default); }
.gallery-story__points h3 { font-size: var(--text-h4); }
.gallery-story__points p { max-width: 46ch; color: var(--color-slate); }
.gallery-curated__intro { max-width: 54ch; }
.gallery-filters { display: flex; min-width: 0; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.gallery-filters > button { min-width: 44px; min-height: 44px; border-color: var(--color-line); background: #fff; color: var(--color-ink); }
.gallery-filters > button[aria-pressed="true"] { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-sky) 15%, white); color: var(--color-primary-hover); box-shadow: inset 0 -2px 0 var(--color-celestine); }
.gallery-cards { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.gallery-card { min-width: 0; border: var(--border-glass); border-radius: var(--radius-lg); background: var(--color-glass); box-shadow: var(--shadow-card); overflow: hidden; backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }
.gallery-card[hidden] { display: none; }
.gallery-card__button { display: flex; min-width: 0; width: 100%; padding: 0; flex-direction: column; align-items: stretch; border: 0; border-radius: 0; background: transparent; color: var(--color-ink); text-align: left; }
.gallery-card__image { width: 100%; border: 0; border-radius: 0; }
.gallery-card__image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--transition-base); }
.gallery-card__button:hover .gallery-card__image img { transform: scale(1.02); }
.gallery-card__content { display: flex; min-width: 0; flex-direction: column; gap: 12px; padding: 24px; }
.gallery-card__content > * { min-width: 0; }
.gallery-card__content strong { font-family: var(--font-heading); font-size: 1.1rem; }
.gallery-card__content > span:last-child { color: var(--color-slate); font-size: var(--text-sm); line-height: 1.5; }
.gallery-beyond__intro { max-width: 54ch; }
.gallery-beyond__cards { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.gallery-beyond__cards > article { display: flex; min-width: 0; min-height: 100%; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; border: var(--border-default); border-top: 2px solid var(--color-celestine); border-radius: var(--radius-lg); background: #fff; }
.gallery-beyond__cards > article:nth-child(2) { border-top-color: var(--color-leaf); }
.gallery-beyond__cards > article:nth-child(3) { border-top-color: var(--color-sun); }
.gallery-beyond__cards > article > * { min-width: 0; margin: 0; }
.gallery-beyond__cards h3 { font-size: var(--text-h4); }
.gallery-beyond__cards p { max-width: 34ch; color: var(--color-slate); }
.gallery-beyond__cards a { min-height: 44px; display: inline-flex; align-items: center; font-weight: var(--weight-semibold); }
.gallery-cta { background: var(--gradient-day); }
.gallery-cta__panel { display: flex; min-width: 0; max-width: calc((100% - 7 * 24px) / 12 * 8 + 7 * 24px); flex-direction: column; align-items: flex-start; gap: 16px; padding: 48px; border: var(--border-default); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card); }
.gallery-cta__panel > * { min-width: 0; margin: 0; }
.gallery-cta__panel > p:not(.eyebrow) { max-width: 54ch; color: var(--color-slate); }
.gallery-cta__notice { display: flex; min-width: 0; align-items: center; gap: 12px; max-width: 48ch; padding: 16px; border-radius: var(--radius-md); background: var(--color-cloud); }
.gallery-cta__notice > * { min-width: 0; margin: 0; }
.gallery-cta__notice p { color: var(--color-ink); font-size: var(--text-sm); }
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 24px; }
.gallery-lightbox__backdrop { position: absolute; inset: 0; background: rgba(23,38,56,.78); }
.gallery-lightbox__dialog { position: relative; display: grid; min-width: 0; width: min(100%, 1100px); max-height: calc(100vh - 48px); grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 12px; padding: 48px 16px 16px; border: var(--border-glass); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-card-hover); }
.gallery-lightbox__dialog figure { min-width: 0; margin: 0; }
.gallery-lightbox__dialog img { width: 100%; max-height: calc(100vh - 170px); border-radius: var(--radius-lg); object-fit: contain; }
.gallery-lightbox__dialog figcaption { display: flex; flex-direction: column; gap: 4px; }
.gallery-lightbox__dialog figcaption strong { color: var(--color-ink); font-family: var(--font-heading); }
.gallery-lightbox__close, .gallery-lightbox__previous, .gallery-lightbox__next { min-width: 44px; min-height: 44px; border-color: var(--color-line); background: #fff; color: var(--color-ink); }
.gallery-lightbox__close { position: absolute; top: 12px; right: 12px; font-size: 1.5rem; }
.gallery-lightbox__previous[hidden], .gallery-lightbox__next[hidden] { display: none; }
@media (max-width: 64.99rem) {
.gallery-hero__grid, .gallery-exploration__grid, .gallery-combat__grid, .gallery-characters__grid, .gallery-story__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.gallery-hero__copy, .gallery-hero__media, .gallery-exploration__copy, .gallery-exploration__media, .gallery-combat__media, .gallery-story__media, .gallery-story__copy { grid-column: span 8; }
.gallery-hero__media { margin-top: 8px; }
.gallery-exploration__media { grid-row: 2; }
.gallery-observations { grid-column: span 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.gallery-combat__notes { grid-column: span 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gallery-combat__notes > * { min-width: 0; padding: 0; border-bottom: 0; }
.gallery-characters__copy { grid-column: span 8; }
.gallery-characters__media { grid-column: span 5; justify-self: start; }
.gallery-story__media { grid-row: 2; }
.gallery-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-beyond__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-beyond__cards > article:last-child { grid-column: span 2; }
.gallery-cta__panel { max-width: 100%; }
}
@media (max-width: 47.99rem) {
.gallery-page .section, .gallery-hero { padding-block: 40px; }
.gallery-hero__grid, .gallery-exploration__grid, .gallery-combat__grid, .gallery-characters__grid, .gallery-story__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gallery-hero__copy, .gallery-hero__media, .gallery-exploration__copy, .gallery-exploration__media, .gallery-observations, .gallery-combat__media, .gallery-combat__notes, .gallery-characters__copy, .gallery-characters__media, .gallery-story__media, .gallery-story__copy { grid-column: span 4; }
.gallery-hero__copy h1 { max-width: 13ch; font-size: 2.125rem; line-height: 39px; }
.gallery-hero__lead { font-size: 1.125rem; line-height: 28px; }
.gallery-hero__actions { align-items: stretch; flex-direction: column; }
.gallery-hero__actions > .button { width: 100%; min-height: 48px; }
.gallery-source { max-width: none; }
.gallery-reading__items { grid-template-columns: 1fr; gap: 16px; }
.gallery-reading__item { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
.gallery-reading__item p { max-width: 34ch; }
.gallery-exploration__media, .gallery-combat__media, .gallery-characters__media, .gallery-story__media { grid-row: auto; }
.gallery-observations, .gallery-combat__notes { grid-template-columns: 1fr; gap: 16px; }
.gallery-combat__notes > * { padding-bottom: 16px; border-bottom: var(--border-default); }
.gallery-combat__notes > *:last-child { padding-bottom: 0; border-bottom: 0; }
.gallery-characters__media { max-width: 420px; }
.gallery-cards, .gallery-beyond__cards { grid-template-columns: 1fr; }
.gallery-beyond__cards > article:last-child { grid-column: auto; }
.gallery-filters { flex-wrap: nowrap; margin-right: -16px; padding-right: 16px; overflow-x: auto; }
.gallery-filters > button { flex: 0 0 auto; }
.gallery-card__content, .gallery-beyond__cards > article { padding: 20px; }
.gallery-cta__panel { padding: 24px 20px; }
.gallery-cta__panel > .button { width: 100%; min-height: 48px; }
.gallery-cta__notice { align-items: flex-start; }
.gallery-lightbox { padding: 12px; }
.gallery-lightbox__dialog { width: 100%; max-height: calc(100vh - 24px); grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; padding: 52px 4px 12px; }
.gallery-lightbox__dialog img { max-height: calc(100vh - 170px); }
}
@media (prefers-reduced-motion: reduce) { .gallery-image-trigger img, .gallery-card__image img { transform: none !important; } }