/* ===== WANDERS IN FRAMES — SHARED STYLES ===== */

/* ============================================================
   BLOGS NAV LINK — ON/OFF SWITCH
   No blog posts published yet, so the "Blogs" link is hidden from
   the menu on every page (it still works if someone types the URL
   directly — this only removes it from navigation).

   TO TURN "BLOGS" BACK ON: delete the one rule below, save this
   file, and re-upload it. That's it — no other file needs to
   change. (Don't turn this rule itself into a comment to disable
   it — CSS comments can't be nested, so wrapping it in comment
   marks would silently break every rule after it in this file.
   Just delete the line.)

   Uses !important on purpose: other layout rules further down in
   this file also set "display" on nav items (for alignment), and
   without !important here those rules can end up winning and
   showing Blogs again despite this switch being "off".
   ============================================================ */
.nav-item-blogs{ display:none !important; }

:root {
  --bg: #ffffff;
  --text: #141414;
  --text-dim: #6f6a61;
  --line: #e7e4dd;
  --accent: #8a9a5b; /* Moss green — replaces the earlier NatGeo yellow */
  
  /* National Geographic Style Font Families */
  --display: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'Source Serif 4', 'Georgia', serif;
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* Turns off the browser's default blue/gray "tap highlight" flash that
   Chrome/Safari draw over a link or button the instant you touch it on a
   touchscreen — that's the blue shape appearing over the chevron and
   nav links on tap. It's a default touch-feedback effect, not something
   coming from any rule below; it doesn't affect keyboard focus outlines
   (like the one on .submenu-toggle), only this touch-only flash. */
a, button{ -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif); /* NatGeo uses readable serif fonts for body text */
  font-size: 1rem;
  line-height: 1.65;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--accent); color:#1a1f0f; }

/* ---------- HEADER / NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 5vw;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
/* The header's tint/blur lives on this ::before layer rather than on the
   header element itself. Putting backdrop-filter directly on <header>
   would make it a "containing block" for any position:fixed descendant
   inside it (per spec) — which is exactly what broke the mobile nav menu
   (nested inside header) into sizing itself against header's small box
   instead of the real screen. Keeping the filter off header, and only on
   this decorative pseudo-element, avoids that trap while still nesting
   the nav naturally inside header for desktop's inline layout. */
header::before{
  content:'';
  position:absolute; inset:0;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:-1;
}
header.scrolled{ border-bottom-color:var(--line); }
/* On larger screens, once scrolled, drop the translucency/blur and go
   fully opaque white instead — keeps the header solid and easy to read
   over busy photo content as the page scrolls beneath it. Mobile keeps
   the frosted look at all scroll positions (unchanged). */
@media (min-width: 1025px){
  header.scrolled::before{
    background:#ffffff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* Update existing logo container to use flexbox */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 1vw;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700; /* Controls text thickness */
  letter-spacing: 0.08em;
  text-decoration: none;
}

/* Control logo mark sizing */
.logo-mark {
  height: 40px; /* Adjust height to match line height */
  width: auto;
  display: block;
  object-fit: contain;
}

nav.main-nav > ul{
  display:flex; gap:38px; list-style:none;
}
nav.main-nav > ul > li{
  position:relative;
}
/* "Home" and "My Works" wrap their link in an extra .has-sub-row div (to
   hold the dropdown arrow button), while the other nav items are a plain
   <a> straight inside the <li>. That structural difference is what threw
   off their vertical alignment on desktop — centering every <li>'s content
   the same way, regardless of what's inside it, fixes it for both cases.
   Gated to real-hover devices only (not just a width threshold): a tablet
   is wide enough to qualify by width alone, but it uses the same stacked
   mobile menu as a phone — turning its <li> into a flex row here would
   push the chevron next to the text and shove the "My Works" submenu out
   to the side instead of stacking it underneath, which is exactly the
   tablet bug this was causing. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine){
  nav.main-nav > ul > li{
    display:flex;
    align-items:center;
  }
}
nav.main-nav > ul > li > a,
nav.main-nav > ul > li .has-sub-row > a {
  position: relative;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Display Titles */
h1.display, 
h2.display, 
.page-title-bar h1,
.press-card-body h3,
.award-block h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em; /* Tight letter spacing typical for heavy display headers */
  text-transform: uppercase;
}

.page-title-bar p,
.about-bio p,
.press-card-body p {
  font-family: var(--serif);
  color: var(--text-dim);
}
/* Absolutely positioned so this underline bar never adds its own height to
   the link's box — it used to be display:block (an ordinary flow element),
   which meant every nav link was quietly 2px taller than its text alone,
   even at width:0. That's part of what made "Home" / "My Works" — the two
   items with a chevron to visually line up against — look off-center: the
   text sat 2px higher than true-center inside its own now-slightly-taller
   box, which only became noticeable where there's a second element (the
   chevron) to compare it to. */
nav.main-nav > ul > li > a::after,
nav.main-nav > ul > li .has-sub-row > a::after{
  content:''; position:absolute; left:4px; right:4px; bottom:0;
  height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
/* Underline-on-hover, desktop-only for the same reason as the submenu
   hover tint above — a tap can trigger :hover on touchscreens and leave
   the underline stuck "on" after the finger lifts, which is what made
   Home / My Works look permanently (and incorrectly) highlighted on
   mobile. */
@media (hover: hover) and (pointer: fine){
  nav.main-nav > ul > li:hover > a::after,
  nav.main-nav > ul > li:hover .has-sub-row > a::after{ transform:scaleX(1); }
}

/* hover-reveal submenu */
.has-sub .submenu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,0.08);
  padding:10px 0;
  min-width:200px;
  list-style:none;
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(6px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.has-sub:hover .submenu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.submenu li a{
  display:block; padding:11px 22px;
  font-size:0.8rem; letter-spacing:0.03em; text-transform:none;
  font-weight:500; color:var(--text);
  white-space:nowrap;
}
/* Hover-tint only for devices with a real pointer/hover (mouse, trackpad).
   On touchscreens, tapping a link can trigger a "hover" state that never
   releases the way a real mouse hover does, leaving a stuck white patch
   behind the tapped submenu item — this keeps the effect desktop-only. */
@media (hover: hover) and (pointer: fine){
  .submenu li a:hover{ color:var(--accent); background:#faf9f6; }
}

.nav-toggle{ display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--text); }

/* ---------- FULL-PAGE GALLERY (Home / Landscapes / People) ---------- */
.gallery-page{ padding-top:78px; }
.gallery-grid{
  column-count:4;
  column-gap:2px;
  padding:0 5vw 60px;
}
.gallery-grid a{
  display:block;
  position:relative;
  overflow:hidden;
  break-inside:avoid;
  margin-bottom:2px;
  border-radius:2px;
}
.gallery-grid img{
  width:100%;
  height:auto;
  display:block;
  transition:transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.gallery-grid a:hover img{ transform:scale(1.035); }
.gallery-grid .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px;
  background:linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
  color:#fff; font-size:0.78rem; letter-spacing:0.03em;
  opacity:0; transition:opacity .3s ease;
}
.gallery-grid a:hover .cap{ opacity:1; }

.page-title-bar{
  padding:20px 5vw 26px;
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.page-title-bar h1{
  font-family:var(--display);
  font-size:clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing:0.01em;
}
.page-title-bar p{ color:var(--text-dim); font-size:0.9rem; }

@media (max-width: 1100px){
  .gallery-grid{ column-count:3; }
}
@media (max-width: 760px){
  .gallery-grid{ column-count:2; padding:0 4vw 40px; }
}

.gallery-grid.home-gallery{
  column-count:4;
  column-gap:2px;
  padding:0 5vw;
}
.gallery-grid.home-gallery a{
  margin-bottom:2px;
  border-radius:0;
}
.gallery-grid.home-gallery a:hover img{ transform:none; }
.gallery-grid.home-gallery .cap{ display:none; }

@media (max-width: 1100px){
  .gallery-grid.home-gallery{ column-count:3; }
}
@media (max-width: 760px){
  .gallery-grid.home-gallery{ column-count:2; column-gap:8px; padding:0 4vw; }
  .gallery-grid.home-gallery a{ margin-bottom:8px; }
}

/* ---------- STANDARD PAGE / TEXT SECTIONS ---------- */
.content-wrap{
  padding:130px 5vw 100px;
  max-width:1200px; margin:0 auto;
}
.eyebrow{ font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; font-weight:700; }
h1.display{ font-family:var(--display); font-size:clamp(2rem,4.5vw,3.2rem); line-height:1.1; margin-bottom:24px; }
h2.display{ font-family:var(--display); font-size:clamp(1.4rem,2.6vw,1.9rem); margin-bottom:20px; }

.about-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:6vw; align-items:start; margin-bottom:70px;
}
.about-grid img{ border-radius:2px; }
.about-grid p{ color:var(--text-dim); margin-bottom:16px; font-size:1.02rem; }
.about-grid p .accent{ color:var(--text); font-weight:600; }
blockquote{
  font-family:var(--display); font-size:clamp(1.3rem,2.4vw,1.8rem);
  border-left:4px solid var(--accent); padding-left:24px; margin-bottom:24px; line-height:1.3;
}
.social-row{ display:flex; gap:20px; margin-top:24px; }
.social-row a{ font-size:0.85rem; font-weight:600; border-bottom:2px solid var(--accent); padding-bottom:2px; }

/* ---------- AWARDS / LIST ---------- */
.award-block{ display:flex; gap:5vw; align-items:flex-start; padding:36px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
.award-block img{ width:280px; border-radius:2px; }
.award-block .award-text{ flex:1; min-width:260px; }
.award-block h3{ font-family:var(--display); font-size:1.2rem; margin-bottom:10px; }
.award-block p{ color:var(--text-dim); }

/* ---------- FEATURED WORKS — boxed alternating cards ---------- */
.press-card-list{ display:flex; flex-direction:column; gap:28px; }
.press-card{
  display:flex;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  min-height:320px;
  transition:box-shadow .3s ease, transform .3s ease;
}
.press-card:hover{
  box-shadow:0 16px 40px rgba(0,0,0,0.1);
  transform:translateY(-2px);
}
.press-card-media{
  flex:1 1 50%;
  overflow:hidden;
  order:1;
}
.press-card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.press-card:hover .press-card-media img{ transform:scale(1.08); }
.press-card-body{
  flex:1 1 50%;
  order:2;
  padding:44px 5%;
  display:flex; flex-direction:column; justify-content:center;
}
.press-card.reverse .press-card-media{ order:2; }
.press-card.reverse .press-card-body{ order:1; }

.press-card-meta{
  display:flex; flex-direction:column; gap:3px;
  font-size:0.82rem; color:var(--text-dim);
  margin-bottom:16px;
}
.press-card-meta span {
  display: block;
}
.press-card-meta strong{ color:var(--text); font-weight:600; }

.press-card-pub{ font-size:0.8rem; color:var(--text-dim); font-weight:600; margin-bottom:10px; display:block; }
.press-card-body h3{
  font-family:var(--display); font-size:clamp(1.15rem, 2vw, 1.55rem);
  line-height:1.28; margin-bottom:14px; color:var(--text);
}
.press-card-body p{ color:var(--text-dim); font-size:0.95rem; line-height:1.6; margin-bottom:16px; }
.press-card-date{ font-size:0.78rem; color:var(--text-dim); }

@media (max-width: 860px){
  .press-card{ flex-direction:column; min-height:0; }
  .press-card.reverse{ flex-direction:column; }
  .press-card-media{ order:1 !important; aspect-ratio:16/10; }
  .press-card-body{ order:2 !important; padding:28px 24px; }
  .about-grid{ grid-template-columns:1fr; gap:32px; }
  .award-block{ flex-direction:column; }
  .award-block img{ width:100%; }
}

/* ---------- BLOG GRID ---------- */
.blog-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:36px;
}
.blog-card img{ aspect-ratio:3/2; object-fit:cover; margin-bottom:16px; border-radius:2px; }
.blog-card .blog-date{ font-size:0.75rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; }
.blog-card h3{ font-family:var(--display); font-size:1.05rem; margin-bottom:8px; line-height:1.3; }
.blog-card p{ color:var(--text-dim); font-size:0.9rem; }
@media (max-width:860px){ .blog-grid{ grid-template-columns:1fr; } }

/* ---------- CONTACT ---------- */
.connect-banner{
  width:100%;
  height:52vh;
  min-height:220px;
  overflow:hidden;
  margin-top:70px;
}
.connect-banner img{
  width:100%; height:100%; object-fit:cover;
}
.contact-box{ text-align:center; padding:60px 5vw 40px; max-width:700px; margin:0 auto; }
.contact-box h1{
  font-family:var(--display);
  font-size:clamp(1.3rem, 4.2vw, 2.6rem);
  white-space:nowrap;
  margin-bottom:22px;
}
@media (max-width: 380px){
  .contact-box h1{ white-space:normal; font-size:1.5rem; line-height:1.25; }
}
.contact-box p{ color:var(--text-dim); margin-bottom:34px; font-size:1.05rem; }
.email-btn{
  display:inline-block; background:transparent; color:var(--text);
  border:2px solid var(--text);
  padding:14px 34px; font-size:0.85rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  border-radius:100px; transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.email-btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- FOOTER ---------- */
footer{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:18px;
  padding:36px 5vw 44px;
  font-size:0.78rem; color:var(--text-dim);
}
.footer-social-block{
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.footer-social-label{
  font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dim);
}
.footer-social{ display:flex; align-items:center; gap:18px; }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; color:var(--text-dim);
  transition:color .2s ease;
}
.footer-social a svg{ width:18px; height:18px; fill:currentColor; }
.footer-social a:hover{ color:var(--accent); }

@media (max-width: 640px){
  footer{ flex-direction:column; align-items:flex-start; }
  .footer-social-block{ align-items:flex-start; }
}

/* ---------- MOBILE NAV ---------- */
.has-sub-row{ display:flex; align-items:center; }
.submenu-toggle{ display:none; }
/* Hidden outside the mobile/tablet panel by default — on desktop this
   would otherwise render as a stray extra item floating next to the
   horizontal menu. The mobile/tablet media query below turns it back on. */
.nav-footer-info{ display:none; }

/* Mobile/tablet nav trigger: matches by touch capability first, not just
   screen width. An iPad in landscape is wide enough to fit the desktop
   horizontal menu, but it's still a touch device with no real ":hover" —
   which made the hover-reveal dropdowns under "Home" and "My Works"
   (About, Featured Works, Landscapes, etc.) impossible to open on tablets.
   Triggering the same foldable hamburger menu used on phones for any
   device that lacks real hover, regardless of width, fixes that; the
   width condition stays as a fallback for older browsers that don't
   support the hover/pointer media features at all. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse){
  .nav-toggle{ display:block; }
  nav.main-nav{
    position:fixed; top:var(--header-h, 70px); right:0; bottom:0; left:0;
    /* Top offset comes from a CSS variable set by nav.js (the header's
       real, measured height), not a hardcoded guess — the header renders
       a different height at different breakpoints, and a fixed value
       drifted out of sync at tablet width specifically, leaving a visible
       gap/notch at the top of the (now narrower, non-full-width) drawer.
       The 70px is just a same-page fallback for the instant before JS runs. */
    /* Sized by top+bottom offsets, not a vh/dvh height. Some in-app
       browsers (Instagram's especially) miscalculate 100vh/100dvh against
       their own toolbar chrome, so a fixed-height panel can fall short of
       the real screen and leave a gap at the bottom where its background
       doesn't reach — the page underneath shows through unstyled there.
       Letting the browser derive the height from top/bottom offsets
       instead avoids that regardless of which vh unit a webview supports. */
    z-index:250;
    background:rgba(255,255,255,0.72);
    backdrop-filter:blur(28px) saturate(1.6);
    -webkit-backdrop-filter:blur(28px) saturate(1.6);
    transform:translateX(100%);
    transition:transform .35s ease;
    padding:20px 8vw;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    display:flex;
    flex-direction:column;
  }
  /* Fallback for browsers/webviews without backdrop-filter support: a
     near-opaque panel instead of a half-transparent one that would
     otherwise be hard to read without the blur underneath it. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    nav.main-nav{ background:rgba(255,255,255,0.98); }
  }
  nav.main-nav.open{ transform:translateX(0); }
  /* On a touch device with real room to spare (tablets — phones stay
     full-bleed since a third of a phone screen is too cramped to read),
     narrow the slide-in panel to roughly a third of the screen and anchor
     it to the right, like a proper drawer, instead of covering the whole
     width the way it does on a phone. The 8vw side padding above is sized
     for a full-width phone panel, so it's swapped for a fixed value here
     to leave the narrower drawer enough room for its text. */
  @media (min-width: 641px){
    nav.main-nav{
      left:auto;
      width:clamp(320px, 35vw, 420px);
      padding:20px 28px;
    }
  }
  nav.main-nav > ul{ flex-direction:column; gap:0; }
  nav.main-nav > ul > li{ border-bottom:1px solid var(--line); }
  nav.main-nav > ul > li > a,
  nav.main-nav > ul > li .has-sub-row > a{ padding:20px 4px; font-size:1.15rem; display:block; }
  .has-sub-row{ justify-content:flex-start; align-items:center; position:relative; }
  .has-sub-row > a{ flex:none; text-align:left; }
  .submenu-toggle{
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; color:var(--text);
    font-size:1.4rem; width:48px; height:48px; cursor:pointer;
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    transition:transform .25s ease;
  }
  .submenu-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .has-sub.open .submenu-toggle{ transform:translateY(-50%) rotate(180deg); }
  .has-sub .submenu{
    position:static !important; left:auto !important; transform:none !important;
    box-shadow:none; border:none; width:100%;
    background:transparent;
    display:block; visibility:visible; padding:0; margin:0; min-width:0;
    text-align:center;
    height:0; max-height:0; opacity:0; overflow:hidden;
    transition:max-height .35s ease, opacity .3s ease, padding .35s ease;
  }
  .has-sub .submenu li a{ padding:14px 4px; font-size:1rem; display:block; white-space:normal; }
  /* padding-bottom only applies once expanded — max-height:0 alone doesn't
     zero out padding, so a collapsed submenu was still adding an invisible
     14px underneath "Home" / "My Works", pushing their divider line down
     and making the label sit high/off-center versus the plain rows
     (Connect, My Workshops, Instagram) that have no hidden submenu at all. */
  .has-sub.open .submenu{ height:auto; max-height:220px; opacity:1; padding-bottom:14px; }

  /* Footer-style info (copyright + social icons) reusing the same
     .footer-social-* classes the real <footer> uses, at the bottom of
     the slide-in panel — the panel otherwise had a lot of empty space
     below the menu items on tablet, where the drawer is tall but the
     link list is short. margin-top:auto pins it to the bottom when
     there's spare room, and lets it follow normally after the menu on
     shorter viewports where the panel scrolls. */
  .nav-footer-info{
    display:block;
    margin-top:auto;
    padding-top:28px;
    border-top:1px solid var(--line);
  }
  .nav-footer-info .footer-social-block{ align-items:flex-start; }
  .nav-footer-info .nav-footer-copyright{
    display:block; margin-top:14px;
    font-size:0.72rem; color:var(--text-dim);
  }
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,19,17,0.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility .35s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .lightbox{
    background:rgba(20,19,17,0.32);
    backdrop-filter:blur(22px) saturate(1.1);
    -webkit-backdrop-filter:blur(22px) saturate(1.1);
  }
}
.lightbox.open{
  opacity:1; visibility:visible; pointer-events:auto;
}
.lightbox-img-wrap{
  display:flex; flex-direction:column; align-items:center;
}
/* The frame carries the white "print mat" border and morphs its width/height
   (set inline in px by lightbox.js) when switching between photos of
   different aspect ratios/sizes. */
.lightbox-frame{
  box-sizing:border-box;
  border:14px solid rgba(255,255,255,0.95);
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
  overflow:hidden;
  transform:scale(0.86);
  opacity:0;
  transition:width .45s cubic-bezier(.22,.8,.32,1), height .45s cubic-bezier(.22,.8,.32,1),
             transform .4s cubic-bezier(.22,.8,.32,1), opacity .35s ease;
}
.lightbox.open .lightbox-frame{
  transform:scale(1);
  opacity:1;
}
.lightbox-frame img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  transition:opacity .3s ease;
}
.lightbox-cap{
  color:#fff; font-size:0.85rem; letter-spacing:0.03em;
  margin-top:18px; text-align:center;
  text-shadow:0 1px 4px rgba(0,0,0,0.8), 0 0 14px rgba(0,0,0,0.4);
}
.lightbox-counter{
  color:#fff; font-size:0.75rem; margin-top:6px; letter-spacing:0.05em;
  text-shadow:0 1px 4px rgba(0,0,0,0.8), 0 0 14px rgba(0,0,0,0.4);
}
.lightbox-close{
  position:absolute; top:24px; right:28px;
  background:none; border:none; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,0.8), 0 0 14px rgba(0,0,0,0.4);
  font-size:2rem; line-height:1; cursor:pointer;
  width:44px; height:44px;
}
.lightbox-close:hover{ color:var(--accent); }
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,0.8), 0 0 14px rgba(0,0,0,0.4);
  font-size:2.6rem; line-height:1; cursor:pointer;
  padding:12px 18px;
  transition:color .2s ease, opacity .2s ease;
  opacity:0.9;
}
.lightbox-arrow:hover{ color:var(--accent); opacity:1; }
.lightbox-prev{ left:6px; }
.lightbox-next{ right:6px; }

@media (max-width: 640px){
  .lightbox-frame{ border-width:8px; }
  .lightbox-arrow{ font-size:2rem; padding:10px 10px; }
  .lightbox-close{ top:14px; right:14px; font-size:1.7rem; }
}

/* ---------- BLOG FEATURED HERO ---------- */
.blog-hero{
  position:relative;
  width:100%;
  height:45vh;
  min-height:260px;
  margin-top:70px;
  overflow:hidden;
  background:#111;
}
.blog-slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1s ease;
}
.blog-slide.active{ opacity:1; }
.blog-slide img{
  width:100%; height:100%; object-fit:cover;
}
.blog-slide-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:5vw 5vw 34px;
  background:linear-gradient(0deg, rgba(0,0,0,0.72), rgba(0,0,0,0) 65%);
  color:#fff;
  max-width:800px;
}
.blog-slide-cat{
  display:inline-block;
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px; font-weight:700;
}
.blog-slide-overlay h2{
  font-family:var(--display);
  font-size:clamp(1.2rem, 3vw, 2rem);
  line-height:1.2;
  margin-bottom:10px;
}
.blog-slide-date{ font-size:0.78rem; color:rgba(255,255,255,0.75); }

.blog-slide-dots{
  position:absolute; right:5vw; bottom:24px;
  display:flex; gap:8px;
}
.blog-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.4); border:none; cursor:pointer;
  padding:0; transition:background .25s ease, transform .25s ease;
}
.blog-dot.active{ background:#fff; transform:scale(1.25); }

@media (max-width: 640px){
  .blog-hero{ height:38vh; min-height:220px; }
  .blog-slide-dots{ right:5vw; bottom:16px; }
}

/* ---------- BASIC PHOTO PROTECTION ---------- */
img{
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  pointer-events:auto;
}

/* ---------- ABOUT PAGE — BIO SECTION ---------- */
.about-bio{
  display:grid;
  grid-template-columns:0.85fr 0.95fr;
  gap:1vw;
  align-items:center;
}
.about-quote{
  font-style:italic;
  text-align:center;
  font-size:0.88rem;
  letter-spacing:0.04em;
  color:var(--text-dim);
  margin-bottom:30px;
  line-height:1.6;
}
.about-intro{
  font-weight:700;
  font-style:italic;
  color:var(--text);
  margin-bottom:20px;
  font-size:0.94rem;
}
.about-bio p{ color:var(--text-dim); margin-bottom:16px; font-size:0.9rem; line-height:1.65; }
.about-bio img{ width:100%; border-radius:2px; }

.social-badge-row{
  display:flex; justify-content:center; gap:16px; margin-top:30px;
}
.social-badge{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px var(--line);
}
.social-badge svg{ width:20px; height:20px; fill:#fff; }
.badge-instagram{
  background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.badge-facebook{ background:#1877F2; }

.about-divider{
  border:none; border-top:1px solid var(--line);
  margin:80px 0;
}

/* ---------- ABOUT PAGE — AWARD SECTION ---------- */
.award-heading{
  text-align:center;
  text-transform:uppercase;
  font-weight:500;
  letter-spacing:0.14em;
  font-size:clamp(1rem, 2vw, 1.3rem);
  color:var(--text-dim);
  margin-bottom:34px;
}
.award-photo-full{
  width:100%;
  display:block;
  margin-bottom:50px;
}
.award-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* Increases width of image column and brings text closer */
  gap: 2.5vw;                        /* Tightens the horizontal gap between image & text */
  align-items: stretch;               /* Forces image container to match total height of text block */
}
.award-cert {
  width: 100%;
  height: 100%;                       /* Fills vertical height of the text block */
  object-fit: cover;                  /* Ensures certificate scales cleanly without distortion */
  border-radius: 2px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.12);
}
.award-info .award-label{
  color:#3f7fbf; font-weight:700; font-size:1.15rem; margin-bottom:12px;
}
.award-info h3{
  font-family:var(--display); font-size:1.3rem; margin-bottom:6px; color:var(--text);
}
.award-subtext{ color:var(--text-dim); font-size:0.9rem; margin-bottom:14px; }
.award-phototitle{ font-style:italic; font-weight:700; color:var(--text); margin-bottom:16px; }
.award-info .award-label + p{ color:var(--text-dim); font-size:0.95rem; line-height:1.7; }
.award-info > .award-label:nth-of-type(2){ font-size:0.92rem; margin-top:4px; margin-bottom:14px; }

@media (max-width: 860px){
  .about-bio{ grid-template-columns:1fr; gap:20px; }
  .about-bio img{ order:-1; }
  .award-detail-grid{ grid-template-columns:1fr; gap:20px; }
  .award-cert{ max-width:100%; }
}

/* ---------- SCROLL REVEAL (Home / Landscapes / People / Wildlife / Featured Works) ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.32,1);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* ---------- HOMEPAGE HERO SLIDESHOW ---------- */
.home-hero{
  position:relative;
  width:100%;
  margin-top:78px;              /* clears the fixed header, so your crop isn't hidden behind it */
  height:calc(100vh - 78px);
  min-height:420px;
  overflow:hidden;
  background:#111;
}
.home-hero-slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1.4s ease;
}
.home-hero-slide.active{ opacity:1; }
.home-hero-slide img{
  width:100%; height:100%; object-fit:cover;
}
.home-hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.home-hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.4);
  color:#fff;
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; line-height:1;
  cursor:pointer;
  backdrop-filter:blur(4px);
  transition:background .25s ease, transform .2s ease;
}
.home-hero-arrow:hover{ background:rgba(255,255,255,0.3); transform:translateY(-50%) scale(1.06); }
.home-hero-prev{ left:24px; }
.home-hero-next{ right:24px; }

.home-hero-dots{
  position:absolute; left:0; right:0; bottom:26px; z-index:2;
  display:flex; justify-content:center; gap:9px;
}
.home-hero-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.45); border:none; cursor:pointer;
  padding:0; transition:background .25s ease, transform .25s ease;
}
.home-hero-dot.active{ background:#fff; transform:scale(1.3); }

.home-hero-scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:2; color:rgba(255,255,255,0.85);
  font-family:var(--display); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.home-hero-scroll-cue::after{
  content:''; width:1px; height:34px; background:rgba(255,255,255,0.6);
  animation:heroCueMove 1.8s ease-in-out infinite;
}
@keyframes heroCueMove{
  0%{ transform:scaleY(0.2); transform-origin:top; opacity:0.4; }
  50%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  100%{ transform:scaleY(0.2); transform-origin:bottom; opacity:0.4; }
}

/* Tablets and phones (matches the same breakpoint the nav switches to a
   hamburger at): size the hero by the photo's own shape instead of the
   screen's height. A tall, narrow viewport paired with a viewport-height
   based box forces object-fit:cover to zoom in hard and slice off most
   of a landscape photo's width — sizing by aspect-ratio keeps the crop
   close to what you see on desktop. 3:2 matches typical DSLR/mirrorless
   landscape framing; adjust the ratio below if your hero photos are a
   different shape (e.g. 4/3 or 16/9). max-height keeps things sane on
   landscape-oriented phones, where the width is the tall dimension.
   Also triggers on any portrait-oriented viewport regardless of raw
   width — an iPad Pro in portrait is ~1032px wide (just past the 1024px
   line) but still tall-and-narrow the same way a phone is, and was
   falling through to the desktop viewport-height rule and getting
   cropped hard as a result. */
@media (max-width: 1024px), (orientation: portrait){
  .home-hero{
    height:auto;
    aspect-ratio: 3 / 2;
    max-height:80vh;
    min-height:280px;
  }
}
@media (max-width: 760px){
  .home-hero-arrow{ width:40px; height:40px; font-size:1.3rem; }
  .home-hero-prev{ left:12px; }
  .home-hero-next{ right:12px; }
}

/* ---------- BLOG ARTICLE PAGE (Mitchell Kanashkevich style long-form) ---------- */
.article-header{
  max-width:820px; margin:0 auto; padding:150px 5vw 30px; text-align:left;
}
.article-meta-row{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  font-size:0.78rem; color:var(--text-dim); margin-bottom:18px;
  text-transform:uppercase; letter-spacing:0.04em;
}
.article-meta-row .cats a{ color:var(--accent); margin-right:10px; }
.article-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.8rem, 4.6vw, 3rem);
  line-height:1.15; text-transform:none; letter-spacing:-0.01em;
  margin-bottom:10px;
}
.article-hero{
  width:100%; max-height:78vh; object-fit:cover;
  margin-bottom:10px;
}
.article-body{
  max-width:820px; margin:0 auto; padding:20px 5vw 100px;
}
.article-body p{
  font-family:var(--serif); font-size:1.08rem; line-height:1.8;
  color:var(--text); margin-bottom:26px;
}
.article-body img{
  width:100%; margin:36px 0; border-radius:2px;
}
.article-body blockquote{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(1.2rem, 2.4vw, 1.5rem); line-height:1.4;
  border-left:none; padding:0 0 0 26px;
  border-left:3px solid var(--accent);
  color:var(--text); margin:40px 0;
}
.article-back{
  display:inline-block; font-size:0.85rem; font-weight:700; color:var(--accent);
  margin-bottom:0;
}
.article-author-box{
  max-width:820px; margin:0 auto; padding:36px 5vw 60px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; gap:16px;
}
.article-author-box img{
  width:52px; height:52px; border-radius:50%; object-fit:cover;
}
.article-author-box .name{ font-family:var(--display); font-weight:700; font-size:0.95rem; }

@media (max-width: 640px){
  .article-header{ padding-top:110px; }
  .article-body p{ font-size:1rem; }
}