/* jivadevoe.com — self-hosted replica of the Zenfolio site.
   Every size, colour and spacing here was measured off the live site in
   WebKit at 1440, 1024, 768 and 390 wide (see _parity/). Where the original
   scales fluidly the value is a clamp(min, vw, max) solved from those widths.

   Breakpoints, as on the original:
     1024px and below  hamburger header, 40px page gutters
      768px and below  sections marked .np-m lose their gutters
      767px and below  split rows stack                                    */

:root {
  --cream: #fcfcf4;
  --taupe: #a07656;
  --grey: #606060;
  --ink: #333333;
  --soft: #a3a3a3;
  --footer: #333333;
  --hdr: 129px;
}
@media (max-width: 1024px) { :root { --hdr: 130px; } }
@media (max-width: 767px)  { :root { --hdr: 92px; } }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #fbfbfd;
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, ul { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
button { font: inherit; }

main { display: block; background: var(--cream); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 20000; background: #000; color: #fff; padding: 10px 16px; font-size: 14px; }
.skip-link:focus { left: 8px; top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Page content column. 1176 wide and centred on desktop, 40px gutters at
   tablet widths, flush on phones for sections that ask for it. */
.ct { max-width: 1176px; margin: 0 auto; }
@media (max-width: 1024px) { .ct { margin: 0 40px; } }
@media (max-width: 768px)  { .ct.np-m { margin: 0; } }

/* ---------------------------------------------------------------- type */
.t-eyebrow { font: 400 clamp(12px, 1.5vw, 14px)/1.35 "Poppins", sans-serif; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; }
.t-h2      { font: 400 clamp(22px, 3.5vw, 32px)/1.1 "Poppins", sans-serif; color: var(--ink); margin: 0 0 16px; }
.t-lead    { font: 400 clamp(18px, 2.5vw, 24px)/1.3 "Poppins", sans-serif; color: var(--grey); margin: 0 0 16px; }
.t-h4      { font: 400 clamp(14px, 2vw, 18px)/1.35 "Poppins", sans-serif; text-transform: uppercase; color: var(--grey); margin: 0 0 16px; }
.t-banner  { font: 400 clamp(34px, 6vw, 54px)/1.12 "Abhaya Libre", serif; color: var(--ink); margin: 0 0 16px; }
.t-display { font: 400 clamp(26px, 4vw, 40px)/1.1 "Abhaya Libre", serif; color: var(--grey); margin: 0 0 16px; }

/* ---------------------------------------------------------------- button */
.btn {
  display: inline-block; background: var(--taupe); color: #fff;
  border: 1px solid var(--taupe); border-radius: 8px;
  padding: 12px 24px; font: 400 18px/21.6px "Poppins", sans-serif; text-align: center;
  cursor: pointer; transition: opacity .2s;
}
.btn:hover { opacity: .85; }
.btn.lg { padding: 20px 40px; }
.btn-wrap { padding: 10px 0; }

/* ---------------------------------------------------------------- header */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 110; }
.hdr {
  position: relative; z-index: 111; height: var(--hdr);
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; padding: 15px 72px;
  font: 400 18px/18px "Poppins", sans-serif; color: #000;
}
.hdr-menu { flex: 1 1 0; display: flex; align-items: center; margin: 12px 0; font-size: 12px; line-height: normal; }
.hdr-menu.left { justify-content: flex-start; }
.hdr-menu.right { justify-content: flex-end; }
.hdr-menu > li { position: relative; display: flex; align-items: center; }
.hdr-menu > li > a { display: flex; align-items: center; margin: 0 12px; color: #000; text-align: center; }
.hdr-menu > li > a:hover, .hdr-menu > li > a:focus-visible { text-decoration: underline; }
.hdr-menu > li.divider::before { content: "|"; position: absolute; left: -1px; top: 0; height: 18px; font-size: 12px; line-height: normal; color: #000; }
.caret { position: relative; top: -2px; width: 14px; height: 18px; display: block; }
.caret svg { margin: 1px 0 0 2px; stroke: #000; }
.logo { display: flex; justify-content: center; align-items: center; padding: 0 32px; }
.logo img { width: 360px; height: 100px; object-fit: contain; }
.ico { display: block; line-height: normal; }
.ico svg { display: block; }
.ico-acct { width: 22px; margin: 0 20px; visibility: hidden; }   /* space kept; no account system */
.ico-cart { margin: 0 0 0 4px; }
.hdr-menu > li.ico > a { margin: 0; }
.ico-cart svg { fill: #000; }
.ico-search { width: 24px; margin: 0 0 0 24px; visibility: hidden; }  /* space kept; no site search */

/* Galleries dropdown */
.sub {
  display: none; position: absolute; top: 40px; left: -31px; width: 200px; z-index: 5;
  background: #fff; padding: 8px; box-shadow: rgba(0,0,0,.5) 0 2px 4px 0;
  font: 700 14px/normal "Poppins", sans-serif; text-align: center;
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }  /* hover bridge */
.has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
.sub li { margin: 16px 32px; }
.sub a { color: #000; }
.sub a:hover, .sub a:focus-visible { text-decoration: underline; }

/* Mobile header parts (hidden on desktop) */
.burger, .m-icons { display: none; }

@media (max-width: 1024px) {
  .hdr { padding: 15px 48px; justify-content: center; }
  .hdr-menu { display: none; }
  .logo { padding: 0; position: absolute; left: 0; right: 0; top: 15px; height: 100px; pointer-events: none; }
  .logo img { width: 168px; height: 100px; pointer-events: auto; }
  .burger {
    display: block; position: absolute; left: 48px; top: 56px; width: 20px; height: 18px;
    padding: 1px; margin: 0; border: 0; background: none; cursor: pointer; z-index: 3;
  }
  .burger span { display: block; width: 18px; height: 3px; margin: 0 0 3.5px; background: #000; border-radius: 2px; }
  .m-icons { display: flex; align-items: center; position: absolute; right: 48px; top: 52px; z-index: 3; }
  .m-icons .ico-acct { margin: 0; }
  .m-icons .ico-cart { margin: 0 0 0 24px; }
}
@media (max-width: 768px) { .hdr { padding: 15px 24px; } }
@media (max-width: 767px) {
  .logo { top: 14px; height: 64px; }
  .logo img { height: 64px; }
  .burger { left: 29px; top: 39px; width: 16px; height: 14px; }
  .burger span { width: 14px; height: 2px; margin: 0 0 3px; }
  .m-icons { right: 25px; top: 33px; }
  .m-icons .ico-cart { margin-left: 16px; }
}

/* Full-screen phone/tablet menu */
.mnav {
  display: none; position: fixed; inset: 0; z-index: 10001; background: #fff; overflow-y: auto;
}
.nav-open .mnav { display: block; }
.nav-open, .nav-open body { overflow: hidden; }
.nav-open .hdr { z-index: 10002; position: fixed; left: 0; right: 0; top: 0; background: transparent; }
.nav-open .logo { display: none; }
.mnav-list { display: flex; flex-direction: column; padding: 80px 0 39px 6px; }   /* socials land at the original 535px */
.mnav-gap { height: 48px; margin: 60px 0 0 -6px; }   /* where the original's search bar sat */
.mnav-item { margin: 25px 0 10px 25px; }
.mnav-item > a, .mnav-item > .mnav-row > a { font: 400 24px/normal "Nunito Sans", sans-serif; color: #000; text-transform: uppercase; }
.mnav-row { display: flex; align-items: center; gap: 22px; }
.mnav-toggle { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; background: #efefef; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mnav-toggle svg { stroke: #000; }
.mnav-sub { display: none; margin: 14px 0 0 16px; }
.mnav-sub.open { display: block; }
.mnav-sub li { margin: 12px 0; }
.mnav-sub a { font: 400 18px/normal "Nunito Sans", sans-serif; color: #000; }
.mnav-social { display: flex; margin: 40px 0 100px 20px; }
.mnav-social a { display: block; width: 26px; height: 26px; }
.mnav-social svg { width: 26px; height: 26px; fill: #000; }
.burger .x { display: none; }
.nav-open .burger span { display: none; }
.nav-open .burger .x { display: block; width: 16px; height: 16px; stroke: #000; }

/* ---------------------------------------------------------------- home hero */
.hero-slider { position: relative; height: calc(100vh - var(--hdr)); background: #000; overflow: hidden; }
.hero-slider .slide { position: absolute; inset: 0; }
.hero-slider .slide img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0; transform: scale(.99); transition: all 8s ease;
}
.hero-slider .slide.is-active img { opacity: 1; transform: scale(1.05); }
.photo-panel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 78px; background: rgba(0,0,0,.35); color: #fff;
  font: 400 14px/normal "Poppins", sans-serif; text-align: left;
  opacity: 0; transition: opacity 8s ease; pointer-events: none;
}
.hero-slider .slide.is-active .photo-panel { opacity: 1; pointer-events: auto; }
.photo-panel .info { align-self: flex-start; margin-right: 10px; }
.photo-panel .info span { display: block; }
.photo-panel .more { margin-right: 10px; }
.photo-panel .more:hover { text-decoration: underline; }
.hero-caret { position: absolute; left: 0; right: 0; bottom: 40px; height: 40px; z-index: 11; display: flex; justify-content: center; transition: bottom .5s cubic-bezier(0, 1, .5, 1); }
.hero-slider:hover .hero-caret { bottom: 150px; }
.hero-caret a { display: block; width: 40px; height: 40px; }
.slide-hit { position: absolute; top: calc(50% - 25px); width: 162px; height: 50px; z-index: 4; opacity: 0; border: 0; padding: 0; background: none; cursor: pointer; }
.slide-hit.prev { left: 0; } .slide-hit.next { right: 0; }
.hero-slider:hover .slide-hit { opacity: 1; }
.slide-hit::before { content: ""; position: absolute; top: 12.5px; width: 25px; height: 25px; box-sizing: border-box; border-top: 3px solid #fff; border-right: 3px solid #fff; }
.slide-hit.prev::before { left: 124.5px; transform: rotate(-135deg); }
.slide-hit.next::before { right: 124.5px; transform: rotate(45deg); }
@media (max-width: 768px) { .photo-panel { padding: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-slider .slide img, .photo-panel { transition: none; }
  .hero-slider .slide.is-active img { transform: none; }
}

/* ---------------------------------------------------------------- split rows */
/* Two-up rows. .gut-xl: 80px between columns (About). .gut-0: none. */
.row { display: flex; }
.row > .col { flex: 1 1 0; min-width: 0; }
.row.gut-xl { gap: 0 80px; }
.row.gut-s { gap: 0 12px; }
@media (max-width: 767px) {
  .row { flex-direction: column; } .row.gut-xl { gap: 0; }
  .row > * { flex: none !important; }
  .row.gut-s > * { margin: 0 0 24px; }   /* stacked small-gutter columns, as the original */
}

/* Home: About */
.about-split .col-text { display: grid; grid-template-rows: 507px 149px; row-gap: 24px; height: 680px; }
.about-split .col-text .txt { padding: 120px 0 0 80px; }
.about-split .col-text .act { padding: 0 0 0 80px; }
.about-split .col-img img { width: 100%; height: 680px; object-fit: cover; }
.spacer-dot { color: #fff; }

/* Home: mosaic */
.mosaic .col img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .tile { height: 680px; overflow: hidden; }
.mosaic .tile.half { height: 340px; }
.mosaic .w31 { flex: 0 0 31.207483%; }
.mosaic .w69 { flex: 0 0 68.792517%; }
@media (max-width: 767px) { .mosaic .w31, .mosaic .w69 { flex-basis: auto; } }

/* Home: quote */
.quote { padding: 80px 0; }
.quote .side { flex: 0 1 calc(10% - 6px); }
.quote .mid { flex: 0 1 calc(80% - 6px); text-align: center; display: flex; flex-direction: column; gap: 12px; }
.quote .mid > div { padding: 24px 0 0; }
.quote h2 { font: 400 clamp(22px, 3.5vw, 32px)/1.1 "Abhaya Libre", serif; color: var(--grey); margin: 0 0 16px; }
.quote h5 { margin: 0 0 16px; }
@media (max-width: 767px) { .quote .side, .quote .mid { flex-basis: auto; } }

/* Photo band with text over it (home prints CTA, galleries commissions) */
.band { position: relative; }
.band > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.band > .ct { position: relative; z-index: 3; padding: 40px 0; }
.band.tint::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #000; opacity: .3; }
.band .t-h4, .band .t-banner { color: #fff; }

/* Two headings side by side above the footer (home) */
.pair { padding: 120px 0; }
.pair .col { text-align: center; }
.pair .t-display { color: var(--grey); }
.pair .t-h4 a { line-height: 1; }
.pair .t-h4 a { color: var(--grey); text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--footer); color: #fff; font: 400 18px/18px "Poppins", sans-serif; padding-top: 20px; }
.site-footer .ct { padding: 40px 0; }
@media (max-width: 1024px) { .site-footer .ct { margin: 0 40px; } }
.f-biz { display: flex; flex-direction: column; text-align: left; margin: 0 0 40px; font-size: 16px; line-height: normal; color: var(--taupe); }
.f-biz > * { display: block; margin: 0 0 8px; }
.f-biz a { color: var(--taupe); }
.f-row { display: flex; justify-content: space-between; align-items: center; }
.f-menu { display: flex; margin: 0 0 40px; font-size: 12px; line-height: normal; }
.f-menu li span { display: block; margin: 0 20px; }
.f-menu li:first-child span { margin: 0 20px 0 0; }
.f-menu a { color: #fff; display: flex; text-align: center; }
.f-menu a:hover { text-decoration: underline; }
.f-social { display: flex; margin: 0 0 40px; }
.f-social a { display: block; width: 32px; height: 35px; }
.f-social a + a { margin-left: 16px; }
.f-social svg { fill: var(--soft); display: block; }
.f-social .ci { display: none; }
.f-social .ci svg { fill: var(--soft); }
.f-copy { font: 400 11px/11px "Poppins", sans-serif; text-transform: uppercase; color: var(--soft); min-height: 30px; }
@media (max-width: 768px) {
  .site-footer .ct { margin: 0; padding: 40px; max-width: none; }
  .f-biz { text-align: center; }
  .f-row { flex-direction: column; justify-content: flex-start; }
  .f-menu { flex-wrap: wrap; justify-content: center; }
  .f-menu li:first-child span { margin: 0 20px; }
  .f-social .sq { display: none; }
  .f-social .ci { display: block; }
  .f-copy { text-align: center; }
}

/* ---------------------------------------------------------------- misc */
.js .fade-img { opacity: 0; transition: opacity .3s ease-in-out; }
.js .fade-img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .fade-img { opacity: 1; transition: none; } }

/* Home: prints band. 760 tall; text starts 250px into the 680px inner box. */
.prints-band .band-col { min-height: 680px; }
.prints-band .band-txt { padding: 250px 0 0; height: 357px; }
.prints-band .band-act { padding: 40px 0 0; margin-top: 12px; }

/* ---------------------------------------------------------------- page hero
   .cover   full viewport, text anchored 112px up (Galleries)
   .fixed   620px (348px at 768 and below) (About, collection pages)       */
.phero { position: relative; overflow: hidden; background: #000; }
.phero > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.phero.cover { height: 100vh; }
@media (max-width: 767px) { .phero.cover { height: calc(100vh - var(--hdr)); } }
.phero-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: 1176px; margin: 0 auto; padding: 0 0 112px; color: #fff; }
.phero-txt.center { text-align: center; }
.phero-txt.right { text-align: right; }
@media (max-width: 1024px) { .phero-txt { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 768px)  { .phero-txt { padding-left: 12px; padding-right: 12px; } }
.phero-title { font: 400 100px/normal "Abhaya Libre", serif; color: #fff; margin: 0 0 16px; }
.phero-sub { font: 400 24px/normal "Poppins", sans-serif; color: #fff; margin: 0 0 40px; }
@media (max-width: 768px) {
  .phero-title { font-size: 40px; }
  .phero-sub { font-size: 16px; margin-bottom: 20px; }
}
.phero .hero-caret { bottom: 24px; }
.phero:hover .hero-caret { bottom: 134px; }

/* ---------------------------------------------------------------- feature row (Galleries: Landscapes) */
.feature { min-height: 580px; }
.feature .f-img { flex: 0 0 60.687593%; height: 580px; }
.feature .f-img a, .feature .f-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature .f-txt { flex: 0 0 39.312407%; padding: 230px 0 0; text-align: center; }
.taupe { color: var(--taupe) !important; }
.ink { color: var(--ink) !important; }
.t-link { font: 400 clamp(16px, 2.25vw, 18px)/1 "Poppins", sans-serif; color: var(--grey); text-decoration: underline; text-underline-offset: 3px; }
.feature p { min-height: 27px; }

/* ---------------------------------------------------------------- taupe wash (Galleries: print shop) */
.wash { background: rgba(160,118,86,.08); }
.shop .shop-txt { flex: 0 1 calc(50% - 6px); display: flex; flex-direction: column; gap: 12px; }
.shop .shop-txt .txt { padding: 250px 0 0 80px; }
.shop .shop-txt .act { padding: 40px 0 0 80px; }
.shop .shop-img { flex: 0 1 calc(50% - 6px); }
.shop .shop-img img { width: 100%; height: auto; }
.shop .t-banner { color: var(--ink); text-align: start; }

/* commissions band: text 180px down a 580px box */
.commissions .band-col { min-height: 580px; }
.commissions .band-txt { padding: 180px 0 0; }

/* ================================================================ galleries
   Two Zenfolio templates: "collection" (Landscapes, Nature in the PNW) and
   "single" (the four landscape galleries). Photos come from the Reality
   Checkpoint print galleries. */
.below-hdr { padding-top: var(--hdr); }
.gct { max-width: 1176px; margin: 0 auto; }
@media (max-width: 1024px) { .gct { margin: 0 40px; } }
@media (max-width: 768px)  { .gct { margin: 0 12px; } }

/* collection hero: 620 tall, 348 at 768 and below; subtitle bottom-right */
.phero.fixed { height: 620px; }
@media (max-width: 768px) { .phero.fixed { height: 348px; } }
.phero.fixed .phero-txt { padding-bottom: 112px; }
@media (max-width: 768px) { .phero.fixed .phero-txt { padding-bottom: 72px; } }

/* single hero: full height, studio name top, album name bottom-right */
.ghero { position: relative; height: min(100vh, 64.2857vw); overflow: hidden; background: #818181; }
/* measured: >1024 min(vh, 64.3vw); 769-1024 94vh; 768 93vh; phones full height */
@media (max-width: 1024px) { .ghero { height: 94vh; } }
@media (max-width: 768px)  { .ghero { height: 93vh; } }
@media (max-width: 767px)  { .ghero { height: 100vh; } }
.ghero > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ghero-studio { position: relative; z-index: 2; padding: 59px 0 0; font: 400 18px/18px "Lato", sans-serif; text-transform: uppercase; color: #fff; text-align: center; }
.ghero-album { position: absolute; z-index: 2; right: 0; bottom: 100px; padding: 0 133px 0 0; }
.ghero-name { margin: 12px 0; font: 400 48px/48px "Abhaya Libre", serif; letter-spacing: -1px; color: #fff; text-align: right; }
.ghero-down { position: absolute; z-index: 2; left: calc(50% - 22px); bottom: 0; width: 44px; height: 46px; }
@media (max-width: 1024px) { .ghero-album { padding-right: 20px; } }
@media (max-width: 768px) {
  .ghero-studio { font-size: 16px; }
  .ghero-down { height: 62px; }
}
@media (max-width: 767px) { .ghero-album { left: 8px; right: 8px; padding: 0; } }

/* white panel */
.gpanel { background: #fff; padding: 0 0 40px; }
.crumbs ol { list-style: none; margin: 0; padding: 10px 10px; font: 400 16px/16px "Poppins", sans-serif; color: var(--soft); }
.crumbs li { display: inline-block; margin: 0 6px 0 0; color: var(--soft); }
.crumbs a { color: var(--soft); }
.crumbs a span { text-decoration: underline; }
.crumbs span { display: inline-block; margin: 0 6px 0 0; line-height: 25.6px; }
@media (max-width: 768px) { .crumbs { display: none; } }

.gbar { position: sticky; top: 0; z-index: 109; display: flex; justify-content: center; align-items: center;
  height: 91px; background: #fff; border-bottom: 1px solid #ccc; }
.gbar-in { width: 100%; height: 90px; padding: 0 10px; display: flex; justify-content: space-between; align-items: center; }
.gbar-title { margin: 0 0 2px; font: 400 18px/18px "Poppins", sans-serif; color: var(--grey); text-transform: uppercase; }
.gbar-by { font: 400 12px/12px "Poppins", sans-serif; color: var(--soft); text-transform: uppercase; }
.gbar-r { display: flex; justify-content: flex-end; align-items: center; }
.gi { display: block; width: 32px; height: 34px; margin: 0 0 0 16px; }
.gi svg { display: block; }
.gshop { display: block; width: 90px; height: 32px; margin: 0 0 0 33px; padding: 9px 0 0; border-radius: 5px;
  background: #8cd07d; color: #fff; font: 700 14px/14px "Poppins", sans-serif; text-transform: uppercase; text-align: center; }
.gshop:hover { opacity: .9; }

.gdesc { padding: 20px 0; }
.gdesc-in { display: flow-root; max-width: 740px; margin: 20px auto 0; text-align: center; font: 400 18px/32.04px "Poppins", sans-serif; color: var(--grey); }
.gdesc-in > span { display: block; margin-top: 12px; }   /* collapses with the p's 18px, as the original */
.gdesc-in p { margin: 18px 0; }

/* justified grid: two per row; each tile's width is proportional to its
   photo's aspect ratio and the row spans the column less 13px, exactly as
   the original. A lone last photo is half the column tall. */
.jgrid { width: calc(100% - 13px); margin-top: 20px; }
.jrow { display: flex; }
.jt { position: relative; flex: var(--ar) 1 0; aspect-ratio: var(--ar); margin: 0 0 12px; min-width: 0; }
.jrow.single .jt { flex: none; width: calc(var(--ar) * (100% + 13px) / 2); }
.jt-img { position: absolute; top: 0; bottom: 0; left: 0; right: 12px; display: block; overflow: hidden; background: #f4f4f4; }
.jrow:not(.single) .jt:last-child .jt-img { right: 0; }
.jt-img img { width: 100%; height: 100%; object-fit: cover; }
.jt-ov, .jt-name, .jt-cart { opacity: 0; transition: opacity .2s; pointer-events: none; }
.jt-ov { position: absolute; top: 0; bottom: 0; left: 0; right: 12px; background: linear-gradient(rgba(0,0,0,0) 15%, rgba(0,0,0,.9)); }
.jrow:not(.single) .jt:last-child .jt-ov { right: 0; }
.jt-name { position: absolute; left: 0; right: 12px; bottom: 64px; margin: 0 auto; width: max-content; max-width: calc(100% - 52px);
  padding: 6px 12px; border-radius: 26px; background: rgba(0,0,0,.5); color: #fff; font: 400 12px/15px "Lato", sans-serif; }
.jt-cart { position: absolute; left: 8px; bottom: 16px; width: 32px; height: 32px; }
.jt:hover .jt-ov, .jt:hover .jt-name, .jt:hover .jt-cart, .jt:focus-within .jt-cart { opacity: 1; }
.jt:hover .jt-cart, .jt:focus-within .jt-cart { pointer-events: auto; }
@media (max-width: 767px) { .jgrid { width: calc(100% - 11px); margin-left: 2px; } }

/* folder cards (Landscapes) */
.folder { padding: 40px 0; font-family: "Abhaya Libre", serif; }
.folder-in { max-width: 1176px; margin: 0 auto; }
.folder-title { display: flow-root; padding: 0 24px; margin: 0 0 47px; text-align: center; }
.folder-title div { margin: 0 0 16px; font: 400 32px/normal "Abhaya Libre", serif; color: var(--taupe); }
.fcards { display: flex; flex-wrap: wrap; }
.fcard { width: 368px; margin: 0 12px 48px; display: flex; flex-direction: column; }
.fcard-img { display: block; height: 376px; position: relative; }
.fcard-img img { width: 100%; height: 100%; object-fit: cover; }
.fcard-info { padding: 24px 0 0; text-align: center; }
.fcard-name { display: block; font: 400 24px/normal "Abhaya Libre", serif; color: var(--grey); text-decoration: underline; }
.fcard-desc { display: block; margin: 16px 0 0; font: 400 16px/normal "Poppins", sans-serif; color: var(--grey); }
.fcard-date::before { content: " - "; white-space: pre; }

/* lightbox (gallery photos) */
.lb { position: fixed; inset: 0; z-index: 20000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.92); }
.lb.open { display: flex; }
.lb img { max-width: 92vw; max-height: 90vh; object-fit: contain; }
.lb button { position: absolute; border: 0; background: none; color: #fff; font-size: 34px; line-height: 1; padding: 16px; cursor: pointer; opacity: .85; }
.lb button:hover { opacity: 1; }
.lb-close { top: 8px; right: 12px; }
.lb-prev { left: 8px; top: calc(50% - 33px); }
.lb-next { right: 8px; top: calc(50% - 33px); }

/* the original leaves an empty 160px white block (its footer-buttons row) under every gallery */
.gfoot { height: 160px; background: #fff; }
.ghero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.3); }
.ghero + .gpanel { padding-bottom: 0; }
.jrow.single .jt-img, .jrow.single .jt-ov { right: 0; }
.jrow.single .jt-name { right: 0; }

/* ---------------------------------------------------------------- About */
.phero.fixed.top { }                        /* About: 620 hero behind the header */
@media (max-width: 768px) { .phero.fixed .phero-txt { padding-bottom: 40px; } }
.grey { color: var(--grey) !important; }
.t-p { font: 400 clamp(16px, 2.25vw, 18px)/1.55 "Poppins", sans-serif; color: var(--grey); margin: 0 0 16px; }
.t-p:last-child { margin-bottom: 0; }
.sec-pad { padding: 120px 0; }
.photo-band .col.tall { min-height: 700px; }
.photo-band .ct { padding: 0; }
.how > .col { flex: 0 1 calc(50% - 8px); }
.how .t-banner { margin-bottom: 0; }
.row.gut-l { gap: 0 40px; }
.trio .col { flex: 0 1 calc(33.333333% - 20px); text-align: center; }
.trio .t-h4 a { color: var(--grey); text-decoration: underline; line-height: 1; }
@media (max-width: 767px) {
  .how > .col { margin: 0 0 24px; }
  .trio .col { margin: 0; }
}

/* Watch the Films: the original page is empty; the footer fills the screen */
.empty-page + * { }
body:has(.empty-page) .site-footer { min-height: 100vh; }

/* ---------------------------------------------------------------- selling
   Touch screens have no hover, so the per-photo cart (which opens that
   photo's print page) is always shown there. The lightbox has a Buy button. */
@media (hover: none) {
  .jt-cart { opacity: 1; pointer-events: auto; }
}
.lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; }
.lb-fig img { max-height: calc(90vh - 64px); }
.lb-bar { display: flex; align-items: center; gap: 20px; margin-top: 14px; color: #fff; font: 400 14px/1.3 "Poppins", sans-serif; }
.lb-buy { display: inline-block; padding: 10px 22px; border-radius: 5px; background: #8cd07d; color: #fff; font: 700 14px/14px "Poppins", sans-serif; text-transform: uppercase; }
.lb-buy:hover { opacity: .9; }

/* Prices, shown up front (a deliberate addition; not on the original site) */
.price-note { font: 400 clamp(14px, 1.8vw, 16px)/1.5 "Poppins", sans-serif; color: var(--taupe); margin: 0 0 16px; }
.price-note.light { color: #fff; }
.gdesc-in .price-note { margin: -4px 0 0; }
.price-note .nw { white-space: nowrap; }

/* gallery bar + grid on phones (stacked bar, 7px grid gaps), as the original */
.gbar-info { display: flex; align-items: center; }
.gshop-m, .gi-dots { display: none; }
@media (max-width: 768px) { .ghero-studio { line-height: 16px; } }
@media (max-width: 767px) {
  .ghero-name { line-height: 1.1; }
  .gbar { height: auto; }
  .gbar-in { height: auto; flex-direction: column; gap: 15px; padding: 10px 8px; margin: 0; }
  .gbar-l, .gbar-r { width: 100%; }
  .gbar-by { display: none; }
  .gbar-title { overflow: hidden; }
  .gshop-m { display: flex; align-items: center; justify-content: center; width: 90px; height: 36px; margin: 0 0 0 4px; padding: 0; font-size: 16px; line-height: 16px; }
  .gshop-d { display: none; }
  .gbar-r .gi-space:first-child { margin: 0 auto 0 0; }
  .gbar-r .gi-space + .gi-space { display: none; }
  .gbar-r .gi { margin-left: 0; margin-right: 4px; }
  .gi-dots { display: block; width: 25px; height: 34px; }
  .jt { margin-bottom: 7px; }
  .jt-img, .jt-ov, .jt-name { right: 7px; }
  .gdesc { padding: 20px 0; }
}
@media (max-width: 768px) { .jgrid { margin-top: 15px; } }

/* folder cards: hover shows a dimmed image with a View Gallery button; 2-up at
   1024 and below, 1-up on phones, as the original */
.fcard-hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .2s; }
.fcard-img:hover .fcard-hover, .fcard-img:focus-visible .fcard-hover { opacity: 1; }
.fcard-btn { display: block; width: 176px; height: 48px; padding: 10px 25px; border: 1px solid var(--taupe); border-radius: 8px; background: var(--taupe); color: #fff; font: 400 18px/normal "Poppins", sans-serif; text-align: center; white-space: nowrap; }
@media (max-width: 1024px) {
  .fcards { padding: 0; }
  .fcard { width: calc((100% - 48px) / 2); }
}
@media (max-width: 767px) { .fcard { width: calc(100% - 24px); } }
.h1-pair { margin: 0; }
.h1-pair > .t-h2 { display: block; }