@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:wght@400;500&display=swap');

:root { --ink: #2e352a; --muted: #747a6c; --paper: #f0f1e9; --surface: #dde2d4; --text-surface: #f9faf5; --line: #cdd3c7; --accent: #8a5867; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header, footer { display: flex; align-items: center; justify-content: space-between; padding: 30px 6.5vw; }
.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgb(205 211 199 / 80%); background: rgb(240 241 233 / 92%); backdrop-filter: blur(12px); }
.wordmark { font-size: 13px; font-weight: 600; letter-spacing: .12em; }
.wordmark span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; letter-spacing: .2em; }
nav { display: flex; gap: 32px; font-size: 12px; }
nav a { position: relative; padding: 7px 0; transition: color 180ms ease; }
nav a::after { position: absolute; right: 0; bottom: 1px; left: 0; height: 1px; content: ''; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; }
nav a:hover, nav a:focus-visible, .text-link:hover { color: var(--accent); }
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); }
.hero-photo { position: relative; width: 100%; background: var(--surface); }
.hero-photo picture, .hero-photo img { display: block; width: 100%; height: auto; }
.hero-photo::after { position: absolute; inset: 0; content: ''; background: linear-gradient(rgb(20 23 21 / 58%), transparent 68%); pointer-events: none; }
.intro { position: absolute; z-index: 1; top: clamp(32px, 6vw, 76px); right: 8vw; left: 6.5vw; padding: 0; }
.hero-photo .eyebrow { color: #f9faf5; }
.hero-photo h1 { color: #fff; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .19em; }
h1, h2 { margin: 18px 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; }
h1 { font-size: clamp(40px, calc(7vw + 3px), 104px); line-height: .99; letter-spacing: -.045em; }
.hero-photo h1 { animation: title-arrive 850ms cubic-bezier(.2, .7, .25, 1) both; }
@keyframes title-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.intro-copy { max-width: 400px; margin: 24px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.hero-photo .intro-copy { color: #f3f1ec; }
.gallery-page-intro { padding: 64px 6.5vw 8px; }
.gallery-page-intro h1 { margin: 12px 0 0; font-size: clamp(46px, 6vw, 72px); letter-spacing: -.04em; }
.gallery-section-title { margin: 0 0 20px; font-family: 'Playfair Display', Georgia, serif; font-size: 30px; font-weight: 400; }
.text-link { display: inline-block; padding-bottom: 7px; border-bottom: 1px solid var(--ink); font-size: 12px; }
.text-link span { padding-left: 12px; }
.gallery-more { margin-top: 38px; }
.work { padding: 72px 6.5vw 100px; background: var(--surface); }
.category { padding-top: 26px; }
.category + .category { margin-top: 45px; padding-top: 45px; border-top: 2px solid #b9c2ae; }
.category h3 { margin: 0 0 20px; font-family: 'Playfair Display', Georgia, serif; font-size: 30px; font-weight: 400; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 28px; }
.section-heading h2, .about h2 { margin: 10px 0 0; font-size: clamp(36px, 5vw, 58px); letter-spacing: -.03em; }
.section-heading > p { color: var(--muted); font-size: 11px; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; align-items: start; }
.gallery-column { display: flex; min-width: 0; flex-direction: column; gap: var(--column-gap, 34px); }
.gallery-segment { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; align-items: start; }
.gallery-segment--single > .photo { grid-column: 1 / -1; justify-self: center; width: calc((100% - 34px) / 2); }
.gallery-column .photo { display: block; width: 100%; margin: 0; }
.gallery > .photo { margin: 0; }
.gallery > .photo.panorama { grid-column: 1 / -1; margin: 0; }
#recent-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; align-items: start; }
#recent-gallery .recent-column { display: flex; min-width: 0; flex-direction: column; gap: var(--column-gap, 34px); }
#recent-gallery .photo { display: block; width: 100%; margin: 0; }
#recent-gallery > .photo.panorama { grid-column: 1 / -1; column-span: none; }
.photo { display: inline-block; width: 100%; margin: 0 0 34px; break-inside: avoid; }
.photo { position: relative; transition: transform 240ms ease, filter 240ms ease; }
.photo:hover { z-index: 1; transform: scale(1.015); filter: drop-shadow(0 22px 30px rgb(32 34 30 / 32%)); }
.photo.panorama { display: block; }
.photo-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: default; }
.photo-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.photo-picture { display: block; width: 100%; }
.photo img { display: block; width: 100%; height: auto; }
.about { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 105px 6.5vw 115px; background: var(--text-surface); }
.about > h2, .contact > h2 { align-self: start; margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.03em; }
.about div > p { max-width: none; color: var(--muted); font-size: 16px; line-height: 1.8; }
.about .text-link { margin-top: 12px; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 75px 6.5vw 100px; background: var(--text-surface); }
.contact > h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.03em; }
.contact div > p { max-width: none; color: var(--muted); font-size: 16px; line-height: 1.8; }
.contact-details { margin-top: 32px; }
.contact-details p { margin: 5px 0; font-size: 13px; }
.contact-details p:first-child { font-weight: 600; }
.contact-details a { position: relative; text-decoration: none; }
.contact-details a::after { position: absolute; right: 0; bottom: -3px; left: 0; height: 1px; content: ''; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; }
.contact-details a:hover::after, .contact-details a:focus-visible::after { transform: scaleX(1); }
.lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: #f5f3ee; }
.lightbox:not([open]) { display: none; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgb(14 16 15 / 88%); backdrop-filter: blur(10px); }
.lightbox > img { display: block; width: auto; height: auto; max-width: calc(100vw - 48px); max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); object-fit: contain; }
.lightbox-nav { position: fixed; top: 50%; display: grid; width: 48px; height: 48px; place-items: center; padding: 0; border: 1px solid rgb(245 243 238 / 55%); border-radius: 50%; background: rgb(20 22 20 / 38%); color: #f5f3ee; font: 42px/1 ui-rounded, 'SF Pro Rounded', system-ui, sans-serif; cursor: default; transform: translateY(-50%); transition: background-color 180ms ease, border-color 180ms ease, scale 180ms ease; }
.lightbox-previous span { transform: translate(-1px, -4px); }
.lightbox-next span { transform: translate(1px, -4px); }
.lightbox-previous { left: 22px; }
.lightbox-next { right: 22px; }
.lightbox-nav:hover, .lightbox-nav:focus-visible { border-color: #a86e7e; background: rgb(20 22 20 / 70%); scale: 1.05; }
.lightbox-nav:focus-visible { outline: 2px solid #e3c6ce; outline-offset: 3px; }
.lightbox > img { touch-action: pan-y; }
.lightbox-close { position: fixed; top: 22px; right: 22px; display: grid; width: 46px; height: 46px; place-items: center; padding: 0; border: 2px solid var(--accent); border-radius: 50%; background: transparent; color: #f5f3ee; font: 60px/1 ui-rounded, 'SF Pro Rounded', system-ui, sans-serif; font-weight: 200; cursor: default; transition: border-color 180ms ease, transform 180ms ease; }
.lightbox-close span { display: block; transform: translateY(-14px); }
.lightbox-close:focus-visible { border: 2px solid var(--accent); outline: none; background: transparent; }
.lightbox-close:hover { border-color: #a86e7e; background: transparent; transform: scale(1.05); }
#nature, #wildlife, #about, #contact { scroll-margin-top: 100px; }
footer { border-top: 1px solid var(--line); background: var(--paper); }
footer > p { color: var(--muted); font-size: 10px; }
.footer-contact { display: flex; flex-direction: column; gap: 5px; margin: 0 auto; }
.footer-contact p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.gallery-footer { position: relative; }
.gallery-footer .footer-contact { position: absolute; left: 50%; align-items: center; margin: 0; text-align: center; transform: translateX(-50%); }
@media (max-width: 650px) {
  .site-header { flex-wrap: wrap; row-gap: 14px; padding: 18px 6vw 14px; }
  nav { flex: 0 0 100%; justify-content: space-between; gap: 8px; font-size: 11px; }
  footer { padding: 22px 6vw; }
  .intro { top: 24px; right: 6vw; left: 6vw; }
  .hero-photo h1 { margin-top: 12px; font-size: clamp(25px, 7.8vw, 40px); line-height: 1.04; }
  .intro-copy { margin-top: 12px; font-size: 12px; }
  .work { padding: 55px 6vw 70px; }
  .gallery-page-intro { padding: 46px 6vw 4px; }
  .gallery-page-intro h1 { font-size: clamp(40px, 10vw, 56px); }
  .gallery { grid-template-columns: 1fr; }
  #recent-gallery { grid-template-columns: 1fr; }
  #recent-gallery .recent-column { display: contents; }
  #nature, #wildlife, #about, #contact { scroll-margin-top: 108px; }
  .about { grid-template-columns: 1fr; gap: 15px; padding: 70px 6vw; }
  .contact { grid-template-columns: 1fr; gap: 15px; padding: 65px 6vw 75px; }
    footer { align-items: start; gap: 15px; }
  footer > p { max-width: 125px; text-align: right; line-height: 1.7; }
  .gallery-footer { flex-wrap: wrap; }
  .gallery-footer .footer-contact { position: static; order: 3; flex-basis: 100%; align-items: center; margin: 0; text-align: center; transform: none; }
  .lightbox-previous { left: 8px; }
  .lightbox-next { right: 8px; }
}
@media (min-width: 1920px) {
  .wordmark { font-size: 15px; }
  .wordmark span { font-size: 11px; }
  nav { font-size: 16px; }
  .hero-photo h1 { font-size: clamp(104px, 5.5vw, 150px); }
  .about div > p, .contact div > p { font-size: 20px; }
  .section-heading > p { font-size: 14px; }
  .contact-details p { font-size: 16px; }
  footer > p { font-size: 12px; }
  .footer-contact p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}