/* ======================================
   Thomas Fisher Photography — styles.css
   ====================================== */

/* THEME TOKENS */
:root{
  --bg:#f2f2f2;
  --text:#222;
  --muted:#666;
  --accent:#000;
  --link:#000;
  --border:#d0d0d0;

  /* global gutters (respect iOS safe areas) */
  --gutter: 20px;
  --gutter-left:  max(var(--gutter), env(safe-area-inset-left));
  --gutter-right: max(var(--gutter), env(safe-area-inset-right));
}

/* BASE */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--link); text-decoration:none }
a:hover{ text-decoration:underline }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid #999; outline-offset:2px
}
main{ display:block }

/* HEADER */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  padding-left:  max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  backdrop-filter:saturate(160%) blur(8px);
  background:rgba(12,12,12,.75);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.logo{
  color:#fff; font-weight:700; letter-spacing:.08em;
  border:1px solid #fff; padding:.35rem .55rem; border-radius:999px;
}
.nav{ display:flex; gap:16px; flex-wrap:wrap }
.site-header a{
  font-weight:600; color:rgba(255,255,255,.7); transition:color .2s ease;
}
.site-header a:hover{ color:#fff }
.site-header a[aria-current="page"]{ color:#fff; font-weight:700; border-bottom:2px solid #fff }

/* HERO / CTA */
.hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:80px 20px;
  background:#eaeaea; border-bottom:1px solid var(--border);
}
.hero h1{ font-size:clamp(28px,3.2vw,44px); line-height:1.1; margin:0 0 .4em }
.hero .lede{ color:var(--muted) }

.cta{ text-align:center; padding:60px 20px; background:#eaeaea }
.cta h2{ margin:0 0 16px }
.cta .button,.btn{
  display:inline-block; padding:.7rem 1rem;
  border:1px solid var(--border); border-radius:10px;
  font-weight:600; text-decoration:none;
}
.cta .button,.btn{ background:#161616; color:#fff }
.cta .button:hover,.btn:hover{ background:#000; transform:translateY(-1px) }
.btn.ghost{ background:transparent; color:#000 }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap }

/* LAYOUT WRAPPERS & TYPE */
.page{
  max-width:1100px;
  margin:0 auto;
  padding:28px 20px;
  padding-left:  var(--gutter-left);
  padding-right: var(--gutter-right);
}
.page.narrow{ max-width:760px }
.lede{ color:var(--muted) }
.page.narrow h2{ font-size:2rem; margin:0 0 1rem; line-height:1.3 }
.page.narrow p{ line-height:1.75; margin:0 0 1.2em }

/* GALLERY (Masonry) */
.grid-intro{
  max-width:1200px; margin:0 auto; padding:28px 20px;
  padding-left:  var(--gutter-left);
  padding-right: var(--gutter-right);
}
.grid-intro h2{ margin:0 0 12px }
.masonry{ column-count:1; column-gap:16px }
@media (min-width:680px){ .masonry{ column-count:2 } }
@media (min-width:980px){ .masonry{ column-count:3 } }

.masonry-item{
  break-inside:avoid; display:block; overflow:hidden;
  margin:0 0 16px; border:1px solid var(--border);
  border-radius:0;           /* square corners in gallery */
}
.masonry-item img{
  width:100%; vertical-align:middle;
  transition:transform .25s ease, box-shadow .25s ease;
}
.masonry-item:hover img{ transform:scale(1.02); box-shadow:0 8px 24px rgba(0,0,0,.12) }

/* LIGHTBOX (gallery.html) — mobile-safe + square corners */
.lightbox{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  padding-left:  max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-top:   max(12px, env(safe-area-inset-top));
  padding-bottom:max(16px, env(safe-area-inset-bottom));
  background:rgba(0,0,0,.9);
}
.lightbox[hidden]{ display:none }

/* Force square corners, center, and correct sizing inside safe areas */
.lightbox > img,
#lightbox-img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  max-width:  calc(100dvw - env(safe-area-inset-left) - env(safe-area-inset-right) - 32px) !important;
  max-height: calc(100dvh - env(safe-area-inset-top)  - env(safe-area-inset-bottom) - 160px) !important;
  border:0 !important;
  border-radius:0 !important;
  margin:0 auto !important;
}
.lightbox .caption{
  color:#bbb; margin-top:.6rem; text-align:center; line-height:1.4;
  max-width:min(90dvw,80ch); padding:0 .25rem;
}
.lightbox-close,.nav-btn{
  position:absolute; background:#111; color:#fff; border:1px solid #444;
  border-radius:8px; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.lightbox-close{ top:.75rem; right:.9rem; font-size:24px; padding:6px 10px }
.nav-btn{ top:50%; transform:translateY(-50%); font-size:28px; padding:6px 10px; opacity:.95 }
#prevBtn{ left:.5rem }  #nextBtn{ right:.5rem }
@media (max-width:600px){
  .nav-btn{ font-size:24px; padding:6px 8px }
  #prevBtn{ left:.35rem }  #nextBtn{ right:.35rem }
}

/* ABOUT — portrait floats right; wraps text */
.about-photo{
  float:right; margin:0 0 1.2rem 1.5rem;
  max-width:280px; width:100%;
  border-radius:10px; border:1px solid var(--border);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.about::after{ content:""; display:block; clear:both }

/* CONTACT FORM */
.contact-form{ display:grid; gap:12px; margin-top:12px }
label{ display:grid; gap:6px }
input,textarea{
  background:#fff; border:1px solid var(--border); border-radius:10px;
  color:var(--text); padding:.8rem .9rem; font:inherit;
}
input:focus,textarea:focus{ outline:2px solid #bbb }
.contact-form input,.contact-form textarea,.contact-form button{ width:100% }

/* FOOTER */
.footer{
  border-top:1px solid var(--border);
  padding:24px 20px; margin-top:32px;
  padding-left:  var(--gutter-left);
  padding-right: var(--gutter-right);
  color:var(--muted); text-align:center;
}

/* FEED — single column, centered & padded on phones */
#feed-grid{
  width:min(92vw,880px);
  margin:0 auto;
  padding-left:  var(--gutter-left);
  padding-right: var(--gutter-right);
  display:flex; flex-direction:column;
  gap:clamp(28px,4vw,44px);
}
.feed-item{ display:block }
.feed-item img{
  width:100%; height:auto; border-radius:0;              /* square */
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
@media (hover:hover){
  .feed-item img:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 34px rgba(0,0,0,.12);
  }
}
.feed-caption{
  margin-top:10px; padding-left:2px;
  text-align:left; font-weight:400;                      /* not bold */
  font-size:clamp(1rem,1.2vw,1.15rem); color:var(--text);
}
.feed-date{
  margin-top:4px; padding-left:2px;
  text-align:left; color:var(--muted);
  font-size:clamp(.85rem,1vw,.95rem); letter-spacing:.01em;
}
.feed-item + .feed-item{
  padding-top:clamp(18px,2.5vw,28px);
  border-top:1px solid rgba(0,0,0,.06);
}
.feed-loading{ text-align:center; color:var(--muted); padding:16px 0 24px; font-size:.95rem }

/* ACCESSIBILITY HELPERS */
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* RESPONSIVE TWEAKS */
@media (max-width:900px){
  .hero{ padding:64px 20px }
}
@media (max-width:768px){
  .page.narrow{ max-width:95%; margin:0 auto; padding:0 1.25rem }
  .page.narrow p{ font-size:1rem; line-height:1.8 }
  .page.narrow h2{ text-align:center; margin-top:1.5rem }
  .about-photo{ float:none; display:block; margin:0 auto 1.5rem; max-width:90% }
}
@media (max-width:600px){
  .site-header{ padding:10px 12px }
  #feed-grid{ width:min(96vw,560px) }                    /* a touch wider on very small screens */
  .feed-item img{ box-shadow:0 6px 18px rgba(0,0,0,.08) }
}
@media (max-width:400px){
  .about-photo{ max-width:100% }
}
@media (prefers-reduced-motion:reduce){
  .feed-item img,.masonry-item img{ transition:none }
}
<link rel="stylesheet" href="styles.css?v=6">