/* D2 Custom identity integration and gallery enhancement */
:root {
  --brand-grit: url("./media/brand/banner.png");
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .035;
  background-image: var(--brand-grit);
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  content: "";
  pointer-events: none;
}

.site-header .brand img { width: 184px !important; height: 104px !important; max-width: 100%; object-fit: contain; }
.age-gate__logo { width: 130px; height: 130px; }
.footer-brand .brand img { width: 210px; height: 118px; }
.site-footer { position: relative; overflow: hidden; }
.site-footer::after { position: absolute; inset: 0; opacity: .2; background: url("./media/brand/background.png") center / cover no-repeat; content: ""; pointer-events: none; }
.site-footer > .wrap { position: relative; z-index: 1; }
.site-header { isolation: isolate; overflow: hidden; }
.site-header::before { position: absolute; inset: 0; z-index: 0; opacity: .1; background: url("./media/brand/background.png") center / cover no-repeat; content: ""; pointer-events: none; }
.site-header .nav { position: relative; z-index: 1; }

.gallery-rail-section { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--border); }
.gallery-rail-section::before { position: absolute; inset: 0; z-index: 0; opacity: .15; background: url("./media/brand/background.png") center / cover no-repeat; content: ""; pointer-events: none; }
.gallery-rail-section > * { position: relative; z-index: 1; }
.contact-section { position: relative; isolation: isolate; overflow: hidden; }
.contact-section::before { position: absolute; inset: 0; z-index: 0; opacity: .15; background: url("./media/brand/contact-bg.png") center / cover no-repeat; content: ""; pointer-events: none; }
.contact-section > .wrap { position: relative; z-index: 1; }
.gallery-rail-heading { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 8vw, 140px); align-items: end; margin-bottom: 44px; }
.gallery-rail-heading h2 { max-width: 9ch; margin: 16px 0 0; }
.gallery-rail-heading > p { margin: 0; font-size: 1.05rem; }
.gallery-viewport { margin-inline: calc(var(--gutter) * -1); padding-block: 8px 16px; overflow: hidden; }
.gallery-track { display: flex; width: max-content; gap: 16px; padding-inline: 16px; animation: d2-gallery-slide 64s linear infinite; }
.gallery-track:hover, .gallery-track:focus-within { animation-play-state: paused; }
.gallery-card { width: clamp(210px, 22vw, 344px); aspect-ratio: 1 / 1; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--border); background: var(--surface); cursor: zoom-in; transition: transform .34s cubic-bezier(.2,0,0,1), border-color .22s ease, box-shadow .22s ease; }
.gallery-card.is-wide { width: clamp(286px, 31vw, 480px); aspect-ratio: 16 / 9; }
.gallery-card:hover, .gallery-card:focus-visible { z-index: 2; transform: scale(1.075); border-color: var(--accent); box-shadow: 0 22px 50px oklch(0% 0 0 / .3); outline: none; }
.gallery-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2,0,0,1); }
.gallery-card:hover img, .gallery-card:focus-visible img { transform: scale(1.04); }
.gallery-instagram { display: inline-flex; margin-top: 28px; }

.gallery-modal { width: min(94vw, 1120px); max-height: 92dvh; margin: auto; padding: 0; border: 1px solid var(--border); background: var(--surface); color: var(--fg); box-shadow: 0 28px 100px oklch(0% 0 0 / .7); }
.gallery-modal::backdrop { background: oklch(7% .01 80 / .88); backdrop-filter: blur(6px); }
.gallery-modal__frame { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 18px; }
.gallery-modal img { display: block; width: auto; max-width: 100%; max-height: calc(92dvh - 36px); margin: auto; object-fit: contain; }
.gallery-modal__close { min-width: 44px; min-height: 44px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); cursor: pointer; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.gallery-modal__close:hover { border-color: var(--accent); background: var(--surface-2); }
@keyframes d2-gallery-slide { to { transform: translateX(-50%); } }
@media (max-width: 680px) {
  html, body { max-width: 100%; }
  img { max-width: 100%; }
  .site-header { position: fixed !important; inset: 0 0 auto; overflow: visible !important; }
  #main-content { padding-top: 140px !important; }
  .nav { height: 140px !important; gap: 12px; }
  .site-header .brand { min-width: 0; }
  .site-header .brand img { width: min(250px, calc(100vw - 122px)) !important; height: 124px !important; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; flex: 0 0 auto; }
  .nav-links { top: 140px !important; right: 0; left: 0; z-index: 2; width: auto; max-width: none; box-shadow: 0 18px 32px oklch(0% 0 0 / .32); }
  .age-gate__logo { width: 112px; height: 112px; }
  .contact-grid, .contact-grid[data-astro-cid-jdovvxl7] { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; }
  .contact-grid > *, .contact-form-wrap, .contact-form-wrap[data-astro-cid-jdovvxl7], .contact-form, .contact-form[data-astro-cid-jdovvxl7], .contact-email, .contact-email > div { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
  .contact-copy, .contact-copy[data-astro-cid-jdovvxl7], .contact-copy > p, .contact-copy[data-astro-cid-jdovvxl7] > p { box-sizing: border-box; width: auto !important; min-width: 0; max-width: 100%; height: auto !important; }
  .contact-form-wrap { padding: 24px 0; }
  .field input, .field textarea { max-width: 100%; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px; }
  .footer-brand { grid-column: auto; }
  .footer-grid > div:not(.footer-brand) { margin-top: 0 !important; padding-top: 0 !important; }
  .footer-brand .brand img { width: 184px !important; height: 104px !important; }
  .footer-bottom { gap: 12px; margin-top: 32px !important; }
  .gallery-rail-heading { grid-template-columns: 1fr; gap: 24px; }
  .gallery-viewport { margin-inline: calc(var(--gutter) * -1); }
  .gallery-track { gap: 12px; animation-duration: 46s; }
  .gallery-card { width: 218px; }
  .gallery-card.is-wide { width: 300px; }
  .gallery-card:hover { transform: none; }
  .gallery-modal__frame { grid-template-columns: 1fr; }
  .gallery-modal__close { order: -1; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-track { animation: none; overflow-x: auto; }
  .gallery-card, .gallery-card img { transition: none; }
}