/* Public galleries (public.js): a neutral, unbranded page for listing sites. White and charcoal
   rather than the site's paper and terracotta, so it reads as the property's page, not ours. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/cormorant-normal.woff2) format("woff2"); }

:root {
  --bg: #FAFAF8;
  --ink: #1C1B1A;
  --muted: #6E6A65;
  --gap: clamp(6px, 1vw, 12px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
h1, p, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(0,0,0,.5); }

/* ---------- opening photo ---------- */
.hero { position: relative; display: flex; align-items: flex-end; min-height: 100svh; padding: clamp(24px, 5vw, 64px); overflow: hidden; background: var(--ink); color: #FFFFFF; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,0) 60%); }
.hero__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.hero h1 { font: 600 clamp(40px, 7vw, 96px)/1 "Cormorant Garamond", Georgia, serif; letter-spacing: -0.02em; text-wrap: balance; }
.hero p { font-size: clamp(15px, 1.4vw, 18px); font-weight: 500; letter-spacing: 0.04em; opacity: .9; }
.hero__down { position: absolute; z-index: 1; right: clamp(24px, 5vw, 64px); bottom: clamp(24px, 5vw, 64px); padding: 12px 20px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 999px; color: #FFFFFF; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; backdrop-filter: blur(6px); transition: background .2s ease; }
.hero__down:hover { background: rgba(255,255,255,.16); }
@media (max-width: 640px) { .hero__down { display: none; } }

/* ---------- the photos ---------- */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding: var(--gap); }
.shot { display: block; overflow: hidden; background: #ECEAE6; aspect-ratio: 3 / 2; scroll-margin-top: 40px; }
.shot--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .3s ease; }
.shot:hover img { transform: scale(1.02); }
@media (max-width: 640px) { .shots { grid-template-columns: minmax(0, 1fr); } .shot--wide { aspect-ratio: 3 / 2; } }

/* ---------- full-size view ---------- */
.view { display: none; position: fixed; inset: 0; z-index: 20; align-items: center; justify-content: center; gap: 16px; padding: 60px 16px 28px; background: rgba(12, 12, 11, .96); }
.view:target { display: flex; }
.view figure { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(1700px, 100%); }
.view img { max-height: calc(100svh - 130px); width: auto; }
.view figcaption { color: #B9B5AF; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; }
.view__close { position: absolute; top: 14px; right: 16px; padding: 8px 16px; border-radius: 999px; color: #FFFFFF; font-size: 14px; font-weight: 600; text-decoration: none; background: rgba(255,255,255,.1); }
.view__nav { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.1); color: #FFFFFF; font-size: 30px; line-height: 1; text-decoration: none; }
.view a:hover { background: rgba(255,255,255,.22); }
@media (max-width: 640px) { .view__nav { position: absolute; bottom: 18px; } .view__nav--prev { left: 18px; } .view__nav--next { right: 18px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}