.gallery-page { padding: clamp(2.75rem, 5vw, 3.5rem) 0 7rem; }
.gallery-header { max-width: 820px; }
.gallery-header h1 { margin-bottom: .75rem; font-size: clamp(3rem, 5vw, 4.7rem); font-weight: 400; line-height: 1; letter-spacing: -.055em; }
.gallery-header > p:not(.kicker) { max-width: 590px; margin: 0; color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.28rem); line-height: 1.65; }
.gallery-mode-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0 0; }
.gallery-mode-tabs button { min-height: 2.5rem; padding: .5rem .75rem; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-size: .87rem; cursor: pointer; }
.gallery-mode-tabs button[aria-pressed="true"] { border-bottom-color: var(--accent); color: var(--ink); }
.gallery-mode-tabs button:hover, .gallery-mode-tabs button:focus-visible { border-bottom-color: var(--accent); color: var(--ink); outline: none; }
.gallery-filters { display: grid; grid-template-columns: minmax(14rem, 1.15fr) repeat(3, auto) auto; gap: .8rem; align-items: end; margin: 1.5rem 0; padding: .8rem 0; border-block: 1px solid var(--line); }
.gallery-filters[hidden] { display: none; }
.gallery-search-label { display: grid; gap: .45rem; color: var(--muted); font-size: .76rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.gallery-search-label input { width: 100%; padding: .75rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; }
.gallery-search-label input:focus { border-color: var(--accent); outline: none; }
.gallery-search-label input::placeholder { color: var(--muted); }
.gallery-filter-group { display: flex; flex-wrap: wrap; gap: .15rem; }
.gallery-filter, .gallery-reset { min-height: 2.5rem; padding: .5rem .65rem; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; cursor: pointer; }
.gallery-filter:hover, .gallery-filter:focus-visible, .gallery-reset:hover, .gallery-reset:focus-visible { border-bottom-color: var(--accent); color: var(--ink); outline: none; }
.gallery-filter[aria-pressed="true"] { border-bottom-color: var(--accent); color: var(--ink); }
.gallery-reset { color: var(--accent); white-space: nowrap; }
.gallery-section { margin-top: 1.75rem; }
.gallery-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.gallery-section-heading h2 { margin: 0; font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 400; letter-spacing: -.045em; }
.gallery-section-heading p { margin: 0; color: var(--muted); font-size: .86rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem; }
.gallery-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border-bottom: 1px solid var(--line); }
.gallery-card[hidden] { display: none; }
.gallery-card a { color: inherit; text-decoration: none; }
.gallery-card-image { display: block; width: 100%; height: auto; aspect-ratio: 1.45; border-radius: 4px; background: var(--surface); object-fit: cover; transition: transform .3s ease; }
.gallery-card a:hover .gallery-card-image, .gallery-card a:focus-visible .gallery-card-image { transform: scale(1.02); }
.gallery-card a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gallery-card-copy { display: grid; flex: 1; gap: .7rem; padding: 1rem 0 1.2rem; }
.gallery-card-copy h3 { margin: 0; font-size: 1.2rem; font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.gallery-preview-note { color: var(--warm); font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gallery-card-copy p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: .9rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.gallery-badges { display: flex; flex-wrap: wrap; gap: .4rem; align-self: end; }
.gallery-badge { padding: .22rem 0; color: var(--accent); font-size: .72rem; font-weight: 650; }
.gallery-badge + .gallery-badge::before { margin-right: .4rem; color: var(--line); content: "•"; }
.gallery-badge.warm { color: var(--warm); }
.gallery-series-collage { display: grid; grid-template-columns: 1.28fr 1fr; grid-template-rows: repeat(2, 1fr); aspect-ratio: 1.78; overflow: hidden; border-radius: 4px; background: var(--surface); }
.gallery-collage-image { width: 100%; height: 100%; min-height: 0; object-fit: cover; border: 0; }
.gallery-collage-image:only-child { grid-column: 1 / -1; grid-row: 1 / -1; }
.gallery-collage-image:first-child:nth-last-child(2) { grid-column: 1; grid-row: 1 / -1; }
.gallery-collage-image:nth-child(2):last-child { grid-column: 2; grid-row: 1 / -1; }
.gallery-collage-image:first-child:nth-last-child(3) { grid-column: 1; grid-row: 1 / -1; }
.gallery-collage-image:nth-child(2):nth-last-child(2) { grid-column: 2; grid-row: 1; }
.gallery-collage-image:nth-child(3):last-child { grid-column: 2; grid-row: 2; }
.gallery-empty { max-width: 530px; margin: 2.5rem 0 0; padding: 2rem 0; border-block: 1px solid var(--line); text-align: left; }
.gallery-empty h2 { margin: 0; font-size: 1.3rem; font-weight: 500; }
.gallery-empty p { color: var(--muted); }
.gallery-empty .gallery-reset { margin-top: .35rem; }
.gallery-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); gap: clamp(2rem, 6vw, 6rem); padding: clamp(4.5rem, 9vw, 8rem) 0 7rem; overflow-wrap: anywhere; }
.gallery-detail-media { margin: 0; }
.gallery-detail-media img { display: block; width: 100%; height: auto; aspect-ratio: auto; border-radius: 4px; }
.gallery-photo-main { display: block; width: 100%; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: zoom-in; }
.gallery-photo-main:focus-visible, .gallery-photo-thumb:focus-visible, .gallery-photo-close:focus-visible, .gallery-photo-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gallery-detail-media figcaption { margin-top: .7rem; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.gallery-photo-strip { display: flex; gap: .55rem; margin-top: 1rem; overflow-x: auto; padding: .1rem; }
.gallery-photo-thumb { width: 5.2rem; height: 3.7rem; flex: 0 0 auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); cursor: pointer; }
.gallery-photo-thumb[aria-current="true"] { border-color: var(--accent); }
.gallery-photo-thumb-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-photo-dialog { position: relative; width: min(94vw, 1100px); max-width: min(94vw, 1100px); max-height: 94vh; padding: 3.4rem 3.8rem 2.5rem; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--surface); }
.gallery-photo-dialog::backdrop { background: color-mix(in srgb, var(--ink) 25%, transparent); backdrop-filter: blur(3px); }
.gallery-photo-dialog img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(94vh - 7rem); margin: 0 auto; border-radius: 4px; }
.gallery-photo-dialog p { margin: .8rem 0 0; color: var(--muted); text-align: center; }
.gallery-photo-close, .gallery-photo-nav { border: 1px solid var(--line); color: var(--ink); background: var(--surface-2); cursor: pointer; }
.gallery-photo-close { position: absolute; top: .8rem; right: .8rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; }
.gallery-photo-nav { position: absolute; top: 50%; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-size: 1.25rem; transform: translateY(-50%); }
.gallery-photo-nav.previous { left: .7rem; }
.gallery-photo-nav.next { right: .7rem; }
.gallery-detail-copy { min-width: 0; align-self: center; }
.gallery-detail-copy h1 { margin: .8rem 0 1rem; font-size: clamp(3rem, 5.4vw, 5.25rem); font-weight: 400; line-height: 1; letter-spacing: -.055em; hyphens: auto; }
.gallery-detail-copy > p:not(.kicker) { color: var(--muted); font-size: 1.12rem; line-height: 1.7; }
.gallery-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.5rem 0; }
.gallery-cta { display: inline-flex; padding: .8rem 1.05rem; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-weight: 650; text-decoration: none; }
.gallery-back { display: inline-block; margin: 2.3rem 0 0; color: var(--accent); font-weight: 600; }
.gallery-cta + .gallery-back { margin-left: .9rem; }
.gallery-series-members { padding: 0 0 7rem; }
.gallery-membership { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.15rem 0; }
.gallery-membership > span { color: var(--muted); font-size: .82rem; }
.gallery-membership a { padding: .25rem 0; border-bottom: 1px solid var(--line); color: var(--accent); font-size: .78rem; font-weight: 600; text-decoration: none; }
.gallery-credits { max-width: 760px; margin: 0 0 7rem; padding: 1.5rem 0; border-block: 1px solid var(--line); }
.gallery-credits h2 { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 500; }
.gallery-credits dl { display: grid; grid-template-columns: minmax(7rem, .3fr) 1fr; gap: .65rem 1rem; margin: 0; font-size: .88rem; line-height: 1.5; }
.gallery-credits dt { color: var(--muted); font-weight: 600; }
.gallery-credits dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.gallery-credits a { color: var(--accent); }
@media (max-width: 1050px) { .gallery-filters { grid-template-columns: minmax(16rem, 1fr) auto; } .gallery-filter-group { justify-content: flex-end; } }
@media (max-width: 760px) { .gallery-page { padding-top: 2rem; } .gallery-header h1 { font-size: clamp(2.55rem, 11.5vw, 3.4rem); } .gallery-mode-tabs { margin-top: 1.1rem; } .gallery-filters { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; margin: 1rem 0 .75rem; padding: .7rem 0; } .gallery-search-label { grid-column: 1 / -1; gap: .3rem; } .gallery-search-label input { padding: .62rem 0; } .gallery-filter-group { justify-content: flex-start; gap: .25rem; } .gallery-filter-group:nth-of-type(1) { grid-column: 1 / -1; } .gallery-filter, .gallery-reset { min-height: 2.3rem; padding: .4rem .5rem; font-size: .8rem; } .gallery-section { margin-top: 2.25rem; } .gallery-section-heading { margin-bottom: .8rem; } .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .85rem; } .gallery-detail { grid-template-columns: minmax(0, 1fr); padding-top: 3.5rem; } .gallery-detail-copy { display: contents; } .gallery-detail-copy .kicker { order: -2; } .gallery-detail-copy h1 { order: -1; } .gallery-photo-dialog { width: 100vw; max-width: 100vw; max-height: 100vh; padding: 3.6rem 2.9rem 2rem; border-radius: 0; } .gallery-photo-dialog img { max-height: calc(100vh - 7rem); } .gallery-photo-nav.previous { left: .25rem; } .gallery-photo-nav.next { right: .25rem; } }
@media (max-width: 420px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-card-copy { padding-bottom: 1rem; } }
@media (prefers-reduced-motion: reduce) { .gallery-card-image { transition: none; } }
.gallery-badge.release-preview { border-bottom: 1px solid var(--accent); color: var(--accent); }