/* ============================================================================
   STYLE.CSS — visual design for the whole site.
   This file does not reference individual photos — it just styles whatever
   HTML the JS files build from js/photos.js. You shouldn't need to touch
   this file to change photos; see js/photos.js instead.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --paper:      #f1ebdb;
  --paper-alt:  #e8dfcd;
  --card:       #ffffff;
  --ink:        #201e1b;
  --ink-soft:   #55524b;
  --line:       #e4ded2;
  --accent:     #bd5b35;
  --accent-dark:#9c4527;

  --spec-red:    #ff4433;
  --spec-amber:  #ffb020;
  --spec-green:  #2fb673;
  --spec-blue:   #3f6dff;
  --spec-violet: #c964ff;
  --spectrum: linear-gradient(90deg,
    var(--spec-red) 0%,
    var(--spec-amber) 25%,
    var(--spec-green) 50%,
    var(--spec-blue) 75%,
    var(--spec-violet) 100%);

  --f-head: 'Fraunces', Georgia, serif;
  --f-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --radius: 3px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{ font-family: var(--f-head); font-weight:600; margin:0; line-height:1.15; }

.container{ max-width: var(--maxw); margin:0 auto; padding: 0 24px; }
@media (min-width: 900px){ .container{ padding: 0 48px; } }

.section{ padding: 64px 0; }
@media (min-width: 900px){ .section{ padding: 96px 0; } }

.eyebrow{
  font-family: var(--f-body); font-weight:600; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 12px;
}

.btn{
  display: inline-flex; align-items:center; gap:10px;
  font-family: var(--f-body); font-weight: 600; font-size: 14.5px;
  padding: 13px 26px; border-radius: var(--radius);
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  transition: all .25s var(--ease);
}
.btn:hover{ background: var(--ink); color: var(--paper); }
.btn--solid{ background: var(--ink); color: var(--paper); }
.btn--solid:hover{ background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--accent{ border-color: var(--accent); color: var(--accent); }
.btn--accent:hover{ background: var(--accent); color: #fff; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* =============================== NAV =============================== */
.nav{
  position: sticky; top:0; z-index: 300;
  background: rgba(241,235,219,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav__inner{
  max-width: var(--maxw); margin:0 auto; padding: 18px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
@media (min-width:900px){ .nav__inner{ padding: 20px 48px; } }

.nav__logo{
  font-family: var(--f-head); font-weight:600; font-size: 19px; letter-spacing:.01em;
}
.nav__logo span{ color: var(--accent); }

.nav__links{ display:flex; align-items:center; gap: 34px; }
.nav__links a{
  font-size: 14.5px; font-weight:500; color: var(--ink-soft);
  position:relative; padding-bottom:4px; transition: color .2s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--accent); transform: scaleX(0); transform-origin:left;
  transition: transform .25s var(--ease);
}
.nav__links a:hover, .nav__links a.active{ color: var(--ink); }
.nav__links a:hover::after, .nav__links a.active::after{ transform: scaleX(1); }

.nav__toggle{
  display:none; background:none; border:0; width:32px; height:26px; position:relative;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after{
  content:''; position:absolute; left:0; right:0; height:2px; background: var(--ink);
  transition: all .3s var(--ease);
}
.nav__toggle span{ top:12px; }
.nav__toggle span::before{ top:-9px; }
.nav__toggle span::after{ top:9px; }
.nav__toggle.is-open span{ background:transparent; }
.nav__toggle.is-open span::before{ top:0; transform: rotate(45deg); background:var(--ink); }
.nav__toggle.is-open span::after{ top:0; transform: rotate(-45deg); background:var(--ink); }

@media (max-width: 760px){
  .nav__toggle{ display:block; z-index: 320; }
  .nav__links{
    position: fixed; top:0; right:0; bottom:0; left:auto;
    height: 100vh; height: 100svh;
    width: min(80vw, 320px);
    background: var(--paper); flex-direction:column; align-items:flex-start;
    justify-content:center; gap: 26px; padding: 40px;
    transform: translateX(100%); transition: transform .35s var(--ease);
    border-left: 1px solid var(--line);
  }
  .nav__links.is-open{ transform: translateX(0); }
  .nav__links a{ font-size: 17px; }
}

/* =============================== FOOTER =============================== */
.footer{
  border-top: 1px solid var(--line);
  padding: 40px 0;
  margin-top: 40px;
}
.footer__inner{
  display:flex; flex-wrap:wrap; gap: 16px; align-items:center; justify-content:space-between;
  font-size: 13.5px; color: var(--ink-soft);
}
.footer__links{ display:flex; gap:22px; }
.footer__links a:hover{ color: var(--accent); }

/* =============================== HERO (home) =============================== */
.hero{
  position: relative; min-height: 86vh; display:flex; align-items:flex-end;
  background-size: cover; background-position: center 4%; isolation:isolate;
  color:#fff;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(20,18,15,.15) 0%, rgba(20,18,15,.75) 100%);
}
.hero__content{ padding: 0 24px 60px; max-width: var(--maxw); margin:0 auto; width:100%; }
@media (min-width:900px){ .hero__content{ padding: 0 48px 80px; } }
.hero__content .eyebrow{ color: #f2d9ca; }
.hero__title{
  font-size: clamp(38px, 7vw, 76px); max-width: 16ch;
}
.hero__title em{
  font-style: normal;
  background: var(--spectrum); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: heroHue 9s linear infinite;
}
@keyframes heroHue{
  0%,100%{ background-position: 0% 0; }
  50%{ background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce){
  .hero__title em{ animation: none; background-position: 30% 0; }
}
.hero__sub{
  font-size: clamp(15px, 1.6vw, 18.5px); max-width: 52ch; margin: 18px 0 30px;
  color: rgba(255,255,255,.88);
}
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero .btn{ border-color:#fff; color:#fff; }
.hero .btn:hover{ background:#fff; color: var(--ink); }
.hero .btn--solid{ background:#fff; color: var(--ink); }
.hero .btn--solid:hover{ background: var(--accent); color:#fff; border-color:var(--accent); }

/* =============================== INTRO TEXT BLOCK =============================== */
.intro-block{ max-width: 62ch; }
.intro-block h2{ font-size: clamp(28px, 4vw, 42px); margin-bottom:16px; }
.intro-block p{ color: var(--ink-soft); font-size: 17px; }

/* =============================== CATEGORY CARDS (home) =============================== */
.cat-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px;
}
@media (min-width: 700px){ .cat-grid{ grid-template-columns: repeat(4, 1fr); } }

.cat-card{
  display:block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow:hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cat-card:hover{ transform: translateY(-5px); box-shadow: 0 18px 34px rgba(30,25,15,.1); }
.cat-card__img{
  aspect-ratio: 4/3; background-size:cover; background-position:center;
  transition: transform .6s var(--ease);
}
.cat-card:hover .cat-card__img{ transform: scale(1.06); }
.cat-card__body{ padding: 16px 18px 20px; }
.cat-card__title{ font-size: 18px; margin: 6px 0 4px; }
.cat-card__count{ font-size: 13px; color: var(--ink-soft); }

/* =============================== FEATURED STRIP (home) =============================== */
.featured-strip{
  display:grid; grid-template-columns: 1fr; gap: 18px; margin-top: 40px;
}
@media (min-width: 700px){ .featured-strip{ grid-template-columns: repeat(3,1fr); } }
.featured-item{ display:block; margin:0; cursor: zoom-in; }
.featured-item img{
  width:100%; aspect-ratio: 4/5; object-fit:cover; border-radius: var(--radius);
  transition: transform .5s var(--ease);
}
.featured-item:hover img{ transform: scale(1.03); }
.featured-item__cap{
  display:block; margin-top:10px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft);
  transition: color .2s;
}
.featured-item:hover .featured-item__cap{ color: var(--accent); }

/* =============================== GALLERY PAGE =============================== */
.gallery-header{ padding: 52px 0 30px; border-bottom: 1px solid var(--line); }
.gallery-header h1{ font-size: clamp(34px, 5vw, 54px); }
.gallery-header p{ color: var(--ink-soft); font-size: 16.5px; max-width: 60ch; margin-top:14px; }

.tabs{
  position: sticky; top: 65px; z-index: 200;
  display:flex; gap: 10px; flex-wrap:wrap;
  padding: 16px 0; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.tab{
  font-size: 14px; font-weight:600; padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft);
  transition: all .2s var(--ease);
}
.tab .tab__count{ opacity:.6; font-weight:500; margin-left:4px; }
.tab:hover{ border-color: var(--ink); color: var(--ink); }
.tab.is-active{ background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Each category gets its own accent color so the four tabs (and the
   heading of each section below) are easy to tell apart at a glance.
   Change these four variables to re-theme the categories. */
:root{
  --cat-wildlife:    #4c7a3f;
  --cat-city-life:   #3860c9;
  --cat-water-drops: #1791a6;
  --cat-motion:      #c1552c;
}
.tab[data-slug="wildlife"]{ color: var(--cat-wildlife); border-color: color-mix(in srgb, var(--cat-wildlife) 45%, var(--line)); }
.tab[data-slug="city-life"]{ color: var(--cat-city-life); border-color: color-mix(in srgb, var(--cat-city-life) 45%, var(--line)); }
.tab[data-slug="water-drops"]{ color: var(--cat-water-drops); border-color: color-mix(in srgb, var(--cat-water-drops) 45%, var(--line)); }
.tab[data-slug="motion"]{ color: var(--cat-motion); border-color: color-mix(in srgb, var(--cat-motion) 45%, var(--line)); }

.tab[data-slug="wildlife"]:hover{ border-color: var(--cat-wildlife); color: var(--cat-wildlife); }
.tab[data-slug="city-life"]:hover{ border-color: var(--cat-city-life); color: var(--cat-city-life); }
.tab[data-slug="water-drops"]:hover{ border-color: var(--cat-water-drops); color: var(--cat-water-drops); }
.tab[data-slug="motion"]:hover{ border-color: var(--cat-motion); color: var(--cat-motion); }

.tab[data-slug="wildlife"].is-active{ background: var(--cat-wildlife); border-color: var(--cat-wildlife); color:#fff; }
.tab[data-slug="city-life"].is-active{ background: var(--cat-city-life); border-color: var(--cat-city-life); color:#fff; }
.tab[data-slug="water-drops"].is-active{ background: var(--cat-water-drops); border-color: var(--cat-water-drops); color:#fff; }
.tab[data-slug="motion"].is-active{ background: var(--cat-motion); border-color: var(--cat-motion); color:#fff; }

.gallery-section{ padding: 48px 0 12px; }
.gallery-section__head{ margin-bottom: 26px; padding-top: 18px; border-top: 3px solid var(--line); }
.gallery-section__head h2{ font-size: clamp(24px,3.4vw,32px); display:flex; align-items:center; gap:10px; }
.gallery-section__head p{ color: var(--ink-soft); font-size:14.5px; margin-top:6px; }

#wildlife .gallery-section__head{ border-top-color: var(--cat-wildlife); }
#city-life .gallery-section__head{ border-top-color: var(--cat-city-life); }
#water-drops .gallery-section__head{ border-top-color: var(--cat-water-drops); }
#motion .gallery-section__head{ border-top-color: var(--cat-motion); }

/* True masonry: each photo keeps its natural aspect ratio (no cropping),
   using CSS multi-column layout. Columns are wide, so photos render large
   and the gallery takes longer to scroll — that's intentional. To make
   photos even bigger (or smaller), adjust the pixel widths below. */
.photo-grid{
  columns: 1;
  column-gap: 20px;
}
@media (min-width: 620px){
  .photo-grid{ columns: 2 320px; column-gap: 26px; }
}
@media (min-width: 1100px){
  .photo-grid{ columns: 3 340px; column-gap: 30px; }
}

.photo-item{
  display:block; width:100%; margin: 0 0 20px; padding:0; border:0;
  background: var(--paper-alt);
  break-inside: avoid; position: relative; border-radius: var(--radius); overflow:hidden;
  cursor: zoom-in;
}
@media (min-width: 620px){ .photo-item{ margin-bottom: 26px; } }
@media (min-width: 1100px){ .photo-item{ margin-bottom: 30px; } }

.photo-item img{
  width:100%; height:auto; display:block;
  transition: transform .5s var(--ease), filter .4s;
}
.photo-item:hover img{ transform: scale(1.03); }
.photo-item__title{
  position:absolute; left:0; right:0; bottom:0; padding: 26px 16px 14px;
  background: linear-gradient(180deg, rgba(20,18,15,0), rgba(20,18,15,.82));
  color:#fff; font-size: 14px; font-weight:500;
  opacity:0; transform: translateY(6px); transition: all .3s var(--ease);
}
.photo-item:hover .photo-item__title, .photo-item:focus-visible .photo-item__title{
  opacity:1; transform: translateY(0);
}

/* =============================== LIGHTBOX =============================== */
.lightbox{
  position: fixed; inset:0; z-index: 900;
  background: rgba(20,18,15,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .35s var(--ease);
  padding: 5vh 4vw;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__figure{ max-width: 1100px; width:100%; text-align:center; }
.lightbox__img-wrap{
  max-height: 72vh; display:flex; align-items:center; justify-content:center;
  overflow: hidden;
}
.lightbox img{
  max-height: 72vh; max-width:100%; width:auto; margin:0 auto;
  box-shadow: 0 30px 70px rgba(0,0,0,.5); border-radius: 2px;
  background: #111;
}
.lightbox__meta{
  margin-top: 20px; text-align:left; color:#fff;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.lightbox__title{ font-family: var(--f-head); font-size: 21px; font-weight:600; }
.lightbox__cap{ font-size: 14px; color: rgba(255,255,255,.7); margin-top:4px; }
.lightbox__count{ font-size: 12.5px; color: rgba(255,255,255,.55); letter-spacing:.04em; }

.lightbox__close, .lightbox__nav{
  position:absolute; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);
  color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition: all .2s;
}
.lightbox__close{ top:20px; right:20px; width:42px; height:42px; }
.lightbox__close svg{ width:16px; height:16px; }
.lightbox__nav{ top:50%; transform: translateY(-50%); width:48px; height:48px; }
.lightbox__nav svg{ width:18px; height:18px; }
.lightbox__nav--prev{ left: clamp(6px,2vw,26px); }
.lightbox__nav--next{ right: clamp(6px,2vw,26px); }
.lightbox__close:hover, .lightbox__nav:hover{ background:#fff; color:var(--ink); }

/* =============================== ABOUT PAGE =============================== */
.about-grid{
  display:grid; grid-template-columns: 1fr; gap: 40px; align-items:center;
}
@media (min-width: 860px){ .about-grid{ grid-template-columns: .8fr 1.2fr; gap:70px; } }
.about-photo{
  aspect-ratio: 4/5; object-fit:cover; border-radius: var(--radius); width:100%;
}
.about-body p{ color: var(--ink-soft); font-size: 17px; margin: 0 0 18px; }
.about-body p:last-child{ margin-bottom:0; }

.values-grid{
  display:grid; grid-template-columns: 1fr; gap: 26px; margin-top:20px;
}
@media (min-width:700px){ .values-grid{ grid-template-columns: repeat(3,1fr); } }
.value-card{ padding: 22px 0; border-top: 2px solid var(--ink); }
.value-card h3{ font-size:18px; margin-bottom:8px; }
.value-card p{ color: var(--ink-soft); font-size:14.5px; margin:0; }

/* =============================== CONTACT PAGE =============================== */
.contact-banner{
  height: 34vh; min-height: 220px; background-size:cover; background-position:center 22%;
  position:relative;
}
.contact-banner::after{ content:''; position:absolute; inset:0; background: rgba(20,18,15,.35); }

.contact-grid{
  display:grid; grid-template-columns: 1fr; gap: 50px;
}
@media (min-width: 860px){ .contact-grid{ grid-template-columns: 1fr 1fr; } }

.contact-info .contact-photo{
  margin-top: 30px; aspect-ratio: 4/5; object-fit:cover; border-radius: var(--radius); width:100%;
  max-width: 420px;
}

.form-field{ margin-bottom: 20px; }
.form-field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:8px; }
.form-field input, .form-field textarea{
  width:100%; font-family: var(--f-body); font-size:15px; padding: 13px 14px;
  border:1.5px solid var(--line); border-radius: var(--radius); background:var(--card); color: var(--ink);
  transition: border-color .2s;
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color: var(--accent); }
.form-field textarea{ resize: vertical; min-height:130px; }
.form-note{ font-size:13px; color: var(--ink-soft); margin-top:14px; }

.form-success{
  display:none; padding: 16px 18px; border-radius: var(--radius);
  background: #eef6ec; border: 1px solid #cfe3c9; color:#2f5a2a; font-size:14.5px; margin-top:18px;
}
.form-success.is-visible{ display:block; }

.form-error{
  display:none; padding: 16px 18px; border-radius: var(--radius);
  background: #fbeceb; border: 1px solid #eec8c5; color:#8a2d27; font-size:14.5px; margin-top:18px;
}
.form-error.is-visible{ display:block; }

.btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* =============================== 404-ish empty state =============================== */
.empty-note{ color: var(--ink-soft); font-size:15px; padding: 40px 0; }

/* reveal-on-scroll (light touch) */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform: translateY(0); }