section .reveal for a scroll-in fade. The masthead is above the fold and is the Largest Contentful Paint element, so it must paint immediately rather than fade in. */ .gal-hero.reveal { opacity: 1; transform: none; } .gal-hero__inner { width: min(980px, 100%); } .gal-hero .section-kicker { color: rgba(255, 253, 249, .74); } .gal-hero .section-kicker span:first-child { color: var(--gal-gold); } .gal-hero .section-kicker i { background: var(--gal-gold); } .gal-hero h1 { margin: 14px 0 12px; font: 500 clamp(34px, 4.8vw, 64px)/1.02 var(--font-heading); letter-spacing: -.04em; text-wrap: balance; } .gal-hero h1 em { color: var(--gal-gold); font-style: italic; } .gal-hero__lede { max-width: 620px; margin: 0; color: rgba(255, 253, 249, .84); font-size: clamp(14px, 1.25vw, 17px); line-height: 1.6; } /* The counts read as a single strip rather than a stacked block, which is what keeps the masthead short. */ .gal-hero__meta { display: flex; flex-wrap: wrap; gap: 8px clamp(18px, 2.6vw, 40px); margin: clamp(16px, 2vw, 26px) 0 0; padding: clamp(12px, 1.6vw, 18px) 0 0; border-top: 1px solid rgba(255, 253, 249, .24); } .gal-hero__meta div { display: flex; align-items: baseline; gap: 8px; } .gal-hero__meta dt { /* .74 rather than a lighter tint: these labels are 9px, so they need the full 4.5:1 over the scrim even where the photograph underneath is bright. Small caps labels are the easiest thing to under-contrast. */ color: rgba(255, 253, 249, .74); font: 700 9px/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; } .gal-hero__meta dd { margin: 0; color: var(--gal-cream); font: 500 clamp(15px, 1.5vw, 21px)/1 var(--font-heading); } .gal-hero__cue { position: absolute; right: var(--page-gutter, 5vw); bottom: clamp(18px, 2.4vw, 32px); display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border-radius: 999px; /* Its own surface, so the label and the gold arrow never sit directly on the photograph. Same translucent-surface language as the filter bar. */ background: rgba(24, 19, 11, .52); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(255, 253, 249, .86); font: 700 10px/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .22s ease, color .22s ease; } .gal-hero__cue:hover, .gal-hero__cue:focus-visible { background: rgba(24, 19, 11, .72); color: var(--gal-cream); } .gal-hero__cue span { color: var(--gal-gold); font-size: 15px; animation: gal-bob 2.4s ease-in-out infinite; } @keyframes gal-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* --------------------------------------------------------------- 03 Collection heading + toolbar --------------------------------------------------------------- */ .gal-collection { padding: clamp(34px, 4.4vw, 64px) var(--page-gutter, 5vw) clamp(64px, 8vw, 112px); } .gal-head { display: grid; gap: clamp(12px, 1.6vw, 18px); margin-bottom: clamp(18px, 2.2vw, 26px); } .gal-head__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: baseline; } .gal-head h2 { margin: 0; font: 500 clamp(26px, 3.2vw, 44px)/1.1 var(--font-heading); letter-spacing: -.03em; text-wrap: balance; } .gal-head h2 em { color: var(--gal-ink); font-style: italic; } .gal-head p { max-width: 560px; margin: 0; color: var(--gal-muted); font-size: clamp(14px, 1.3vw, 16px); line-height: 1.65; } /* Filter toolbar stays in the collection flow instead of tracking the header. */ .gal-toolbar { position: static; z-index: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 0 calc(var(--page-gutter, 5vw) * -1) clamp(22px, 3vw, 34px); padding: 13px var(--page-gutter, 5vw); border-top: 1px solid var(--gal-line); border-bottom: 1px solid var(--gal-line); background: color-mix(in srgb, var(--gal-sand) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .gal-filters { display: flex; flex-wrap: wrap; gap: 8px; } .gal-filter { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 17px; border: 1px solid var(--gal-line-strong); border-radius: 999px; background: var(--gal-cream); color: var(--gal-muted); font: 700 11px/1 var(--font-text); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease; } .gal-filter span { color: inherit; opacity: .55; font-variant-numeric: tabular-nums; } .gal-filter:hover, .gal-filter:focus-visible { border-color: var(--gal-ink); color: var(--gal-ink); transform: translateY(-2px); } /* Gold is the one strong surface accent on the page. */ .gal-filter.is-active { border-color: var(--gal-gold); background: var(--gal-gold); color: var(--gal-ink); } .gal-filter.is-active span { opacity: .65; } .gal-status { margin: 0; color: var(--gal-muted); font: 700 10px/1.5 var(--font-text); letter-spacing: .14em; text-transform: uppercase; } .gal-status:empty { display: none; } /* --------------------------------------------------------------- 04 Masonry wall + cards --------------------------------------------------------------- CSS multi-column masonry rather than a fixed grid: the photographs are a mix of landscape, portrait and 4:3, and letting each tile keep its own ratio gives the wall an editorial rhythm instead of cropping everything to one shape. Each carries width/height, so the ratios are known before the bytes arrive and the columns never reflow. --------------------------------------------------------------- */ .gal-grid { columns: 1; column-gap: var(--gal-gap); } .gal-card { position: relative; display: block; width: 100%; margin: 0 0 var(--gal-gap); padding: 0; border: 0; border-radius: var(--gal-radius); overflow: hidden; background: var(--gal-shell); color: var(--gal-cream); text-align: left; cursor: zoom-in; break-inside: avoid; -webkit-tap-highlight-color: transparent; box-shadow: 0 6px 18px var(--gal-shadow); transition: transform .32s var(--gal-ease), box-shadow .32s var(--gal-ease); /* `backwards` (not `both`) so the finished animation releases the transform and the hover lift below still applies. */ animation: gal-card-in .6s var(--gal-ease) backwards; animation-delay: min(calc(var(--gal-i, 0) * 26ms), 340ms); } .gal-card:hover, .gal-card:focus-visible { transform: translateY(-5px); box-shadow: 0 20px 40px var(--gal-shadow), 0 0 0 2px var(--gal-gold); } .gal-card:focus-visible { outline: 3px solid var(--gal-gold); outline-offset: 3px; } .gal-card__media { display: block; width: 100%; height: auto; object-fit: cover; transition: transform .6s var(--gal-ease); } .gal-card:hover .gal-card__media, .gal-card:focus-visible .gal-card__media { transform: scale(1.05); } .gal-card__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(24, 18, 10, .76) 0%, rgba(24, 18, 10, 0) 48%); opacity: .8; transition: opacity .32s ease; } .gal-card:hover .gal-card__shade, .gal-card:focus-visible .gal-card__shade { opacity: 1; } .gal-card__tag { position: absolute; top: 12px; left: 12px; padding: 7px 11px; border: 1px solid rgba(255, 253, 249, .32); border-radius: 999px; background: rgba(30, 24, 15, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--gal-cream); font: 700 9px/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; } .gal-card__caption { display: none; position: absolute; right: 0; bottom: 0; left: 0; padding: 15px 17px; font: 500 clamp(14px, 1.25vw, 17px)/1.28 var(--font-subheading); text-wrap: balance; } @keyframes gal-card-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------- 05 Empty state --------------------------------------------------------------- */ .gal-empty { margin: 0; padding: clamp(38px, 6vw, 64px) 24px; border: 1px dashed var(--gal-line-strong); border-radius: var(--gal-radius); background: var(--gal-cream); color: var(--gal-muted); text-align: center; } /* --------------------------------------------------------------- 06 Closing band --------------------------------------------------------------- */ .gal-cta { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--layout-gap, 40px); align-items: end; padding: clamp(58px, 7vw, 104px) var(--page-gutter, 5vw); background: var(--gal-deep); color: var(--gal-cream); } .gal-cta .section-kicker { color: rgba(255, 253, 249, .6); } .gal-cta .section-kicker span:first-child { color: var(--gal-gold); } .gal-cta .section-kicker i { background: var(--gal-gold); } .gal-cta h2 { max-width: 720px; margin: 20px 0 0; font: 500 clamp(32px, 4.4vw, 64px)/1.04 var(--font-heading); letter-spacing: -.035em; text-wrap: balance; } .gal-cta h2 em { color: var(--gal-gold); font-style: italic; } .gal-cta p { max-width: 520px; margin: 20px 0 0; color: rgba(255, 253, 249, .72); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7; } .gal-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; } .gal-cta__actions .text-link { color: var(--gal-cream); } /* --------------------------------------------------------------- 07 Full-screen viewer --------------------------------------------------------------- The viewer stays dark and warm-tinted rather than cream: a light viewer washes out the photographs and loses the focus of a full-screen frame. --------------------------------------------------------------- */ .gal-viewer { position: fixed; inset: 0; z-index: 1200; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; background: rgba(21, 17, 11, .97); color: var(--gal-cream); } .gal-viewer[hidden] { display: none; } .gal-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(14px, 3vw, 30px); } .gal-viewer__counter { margin: 0; color: rgba(255, 253, 249, .68); font: 700 11px/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .gal-viewer__button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 253, 249, .3); border-radius: 50%; background: rgba(255, 253, 249, .06); color: var(--gal-cream); font-size: 20px; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; } .gal-viewer__button:hover, .gal-viewer__button:focus-visible { background: var(--gal-gold); border-color: var(--gal-gold); color: var(--gal-ink); } .gal-viewer__button:focus-visible { outline: 2px solid var(--gal-cream); outline-offset: 3px; } /*

owns both the photograph and its

, so the caption is semantic while still sitting in its own row beneath the image. */ .gal-viewer__stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; margin: 0; padding: 0 clamp(10px, 4vw, 44px); } .gal-viewer__image { grid-row: 1; justify-self: center; align-self: center; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 12px; background: #12100c; object-fit: contain; } /* Loading shimmer while a large frame decodes. */ .gal-viewer__image[data-loading="true"] { opacity: .35; } .gal-viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } .gal-viewer__nav--prev { left: clamp(6px, 1.5vw, 24px); } .gal-viewer__nav--next { right: clamp(6px, 1.5vw, 24px); } .gal-viewer__nav:hover { transform: translateY(-50%) scale(1.06); } .gal-viewer__foot { grid-row: 2; display: grid; gap: 6px; padding: 16px clamp(10px, 3vw, 30px) max(20px, env(safe-area-inset-bottom)); text-align: center; } .gal-viewer__caption { margin: 0; color: var(--gal-cream); font: 500 clamp(15px, 1.6vw, 20px)/1.35 var(--font-subheading); text-wrap: balance; } .gal-viewer__hint { margin: 0; color: rgba(255, 253, 249, .5); font: 700 9px/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; } /* Locks the document behind the viewer. */ body.gal-open { overflow: hidden; } /* --------------------------------------------------------------- 08 Responsive + reduced motion --------------------------------------------------------------- */ @media (min-width: 640px) { .gal-grid { columns: 2; } } @media (min-width: 1100px) { .gal-grid { columns: 3; } } @media (min-width: 1440px) { .gal-grid { columns: 4; } } @media (max-width: 900px) { .gal-head__intro, .gal-cta { grid-template-columns: 1fr; } .gal-head__intro { gap: 10px; } .gal-cta { align-items: start; } .gal-toolbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .gal-toolbar::-webkit-scrollbar { display: none; } .gal-filters { flex-wrap: nowrap; } .gal-filter { flex: 0 0 auto; } .gal-status { display: none; } .gal-hero__cue { display: none; } } @media (max-width: 560px) { .gal-hero { /* 84svh pushed the wall past the fold (1.2-1.3 screens at phone widths). The masthead is meant to introduce the photographs, not delay them, so it is sized to the copy it actually holds. */ min-height: 66svh; padding-bottom: 32px; } .gal-hero h1 { font-size: clamp(30px, 9.4vw, 44px); } .gal-hero__meta { gap: 6px 18px; } .gal-card__caption { padding: 12px 13px; } .gal-viewer__stage { padding: 0 8px; } .gal-viewer__nav { width: 42px; height: 42px; } .gal-viewer__button { width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .gal-card, .gal-card__media, .gal-filter, .gal-viewer__button { animation: none !important; transition: none !important; } .gal-card:hover, .gal-card:focus-visible, .gal-filter:hover, .gal-filter:focus-visible, .gal-viewer__nav:hover { transform: none; } .gal-card:hover .gal-card__media, .gal-card:focus-visible .gal-card__media { transform: none; } .gal-hero__cue span { animation: none; } }