.gallery-page { background: #fffdfb; }
.gallery-hero { position: relative; min-height: clamp(235px, 24vw, 330px); display: grid; place-items: center; overflow: hidden; padding: 38px 24px; text-align: center; color: #fff; background: linear-gradient(110deg, #321522, #711a38 52%, #8f4158); }
.gallery-hero::before, .gallery-hero::after { content: ''; position: absolute; border: 1px solid rgba(248, 205, 192, .35); border-radius: 50%; pointer-events: none; }
.gallery-hero::before { width: 580px; height: 180px; left: -120px; top: -94px; transform: rotate(-11deg); }
.gallery-hero::after { width: 440px; height: 150px; right: -60px; bottom: -80px; transform: rotate(12deg); }
.gallery-hero-copy { position: relative; z-index: 2; max-width: 690px; }
.gallery-hero .eyebrow { margin-bottom: 8px; color: #f7c9bc; }
.gallery-hero h1 { font-size: clamp(3rem, 5.3vw, 5.6rem); line-height: .83; }
.gallery-hero h1 em { color: #f3b3a6; }
.gallery-hero-copy > p:last-child { max-width: 580px; margin: 14px auto 0; color: #fae8e2; font-size: .86rem; line-height: 1.6; }
.gallery-hero-link { position: absolute; z-index: 3; right: clamp(24px, 8vw, 120px); bottom: 22px; padding-bottom: 4px; border-bottom: 1px solid #f1b9af; color: #f7ddd6; font-size: .7rem; font-weight: 700; letter-spacing: .05em; }
.gallery-hero-link span { margin-left: 9px; color: #f2b4a8; }
.gallery-hero-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 223, 214, .25); animation: gallery-orbit 12s ease-in-out infinite; }
.orbit-one { width: 120px; height: 120px; top: 22px; left: 14%; }
.orbit-two { width: 64px; height: 64px; right: 18%; bottom: 22px; animation-delay: -5s; }
.gallery-catalog { padding-top: clamp(65px, 9vw, 115px); }
.gallery-catalog-head { display: flex; justify-content: space-between; align-items: end; gap: 45px; margin-bottom: 30px; }
.gallery-catalog-head h2 { font-size: clamp(3rem, 5.5vw, 5.9rem); }
.gallery-catalog-head > p { max-width: 390px; margin: 0 0 6px; color: #705b61; font-size: .92rem; line-height: 1.75; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 35px; }
.gallery-filters button { border: 1px solid #e7d0c9; border-radius: 99px; padding: 9px 15px; background: #fff; color: #592238; font: 700 .68rem var(--sans); letter-spacing: .04em; cursor: pointer; transition: .25s ease; }
.gallery-filters button:hover, .gallery-filters button.active { border-color: #711a38; background: #711a38; color: #fff; transform: translateY(-2px); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 15px; }
.gallery-card { position: relative; min-height: 295px; overflow: hidden; background: #321522; color: #fff; animation: gallery-rise .7s both; }
.gallery-card:nth-child(7n+1), .gallery-card.featured { grid-column: span 2; grid-row: span 2; min-height: 520px; }
.gallery-card:nth-child(5n+3) { grid-row: span 2; min-height: 520px; }
.gallery-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.gallery-card:hover img { transform: scale(1.07); }
.gallery-card-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(40, 12, 28, .91), rgba(40, 12, 28, .05) 67%); transition: background .35s ease; }
.gallery-card:hover .gallery-card-overlay { background: linear-gradient(0deg, rgba(91, 22, 52, .94), rgba(40, 12, 28, .16) 72%); }
.gallery-card-copy { position: absolute; z-index: 1; right: 22px; bottom: 20px; left: 22px; }
.gallery-card-copy > span { color: #f2b7aa; font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.gallery-card h3 { margin: 7px 0; color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.5rem); }
.gallery-card p { max-height: 0; margin: 0; overflow: hidden; color: #f5e1dc; font-size: .77rem; line-height: 1.6; opacity: 0; transition: max-height .35s ease, opacity .35s ease; }
.gallery-card:hover p { max-height: 100px; opacity: 1; }
.gallery-card-mark { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f6c2b4; color: #711a38; font-style: normal; }
.gallery-closing { display: grid; place-items: center; margin: clamp(50px, 9vw, 120px) clamp(24px, 8vw, 130px) clamp(55px, 9vw, 120px); padding: clamp(50px, 7vw, 90px) 24px; border-radius: 58px 12px 58px 12px; background: #f2ded5; text-align: center; }
.gallery-closing h2 { font-size: clamp(3rem, 5vw, 5.5rem); }
.gallery-closing > p:not(.eyebrow) { max-width: 520px; margin: 18px auto 27px; color: #6e555d; }
.gallery-admin-thumb { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; }
@keyframes gallery-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes gallery-orbit { 50% { transform: translateY(10px) scale(1.1) rotate(22deg); } }
@media (max-width: 850px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-catalog-head { display: grid; gap: 16px; } }
@media (max-width: 600px) { .gallery-hero { min-height: 250px; } .gallery-hero-link { right: 24px; } .gallery-grid { grid-template-columns: 1fr; } .gallery-card, .gallery-card:nth-child(7n+1), .gallery-card.featured, .gallery-card:nth-child(5n+3) { grid-column: auto; grid-row: auto; min-height: 400px; } .gallery-card p { max-height: 100px; opacity: 1; } .gallery-closing { margin-left: 24px; margin-right: 24px; } }
@media (prefers-reduced-motion: reduce) { .gallery-card, .gallery-hero-orbit { animation: none; } }

.gallery-loading-panel { display: grid; place-items: center; min-height: 360px; padding: 42px 24px; border: 1px solid #ead5ce; border-radius: 26px 8px 26px 8px; background: linear-gradient(125deg, #fffaf7, #f5e2da); text-align: center; }
.gallery-loading-panel strong { margin-top: 16px; color: #40172a; font: 600 clamp(1.55rem, 3vw, 2.3rem) var(--serif); }
.gallery-loading-panel p { max-width: 360px; margin: 8px auto 0; color: #725b62; line-height: 1.65; }
.gallery-loading-orbit { display: block; width: 48px; height: 48px; border: 2px solid #e7b8ae; border-top-color: #781b3b; border-radius: 50%; animation: gallery-loader-spin .9s linear infinite; }
.gallery-load-error > span { color: #861d43; font-size: 2rem; }
.gallery-load-error .button { margin-top: 18px; }
@keyframes gallery-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gallery-loading-orbit { animation: none; } }