/* ==========================================================================
     DESIGN TOKENS
     One place to re-skin the whole page. The palette is deliberately dark and
     earthy so the photographs carry the page: a gallery wall, not a website
     competing with the work hanging on it. Amber picks up the low sunlight in
     Marlo's bushveld images.
     ========================================================================== */
  :root{
    --bg:#0f100e;          /* page background, near black */
    --bg2:#161714;         /* alternating section background */
    --panel:#1c1e19;       /* cards and panels */
    --ink:#f0ece1;         /* warm off white text, easier on a dark page */
    --muted:#9a9587;       /* secondary text */
    --amber:#c8873f;       /* accent, drawn from the light in his photographs */
    --amber-hi:#e0a860;    /* hover state */
    --sage:#7c8a6d;        /* secondary accent, bushveld green */
    --line:rgba(240,236,225,.12);      /* hairline borders */
    --line-amber:rgba(200,135,63,.35); /* accented borders */
    --radius:4px;          /* small radius, closer to a picture frame */
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Karla',Arial,sans-serif;
    background:var(--bg);color:var(--ink);line-height:1.7;
    overflow-x:hidden;
  }
  ::selection{background:var(--amber);color:#14150f}
  h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.15}
  .wrap{max-width:1140px;margin:0 auto;padding:0 1.5rem}
  section{padding:5.5rem 0}
  .kicker{
    display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.3em;
    text-transform:uppercase;color:var(--amber);margin-bottom:1rem;
  }
  /* Centred section headings across the site. */
  .sec-head{max-width:44rem;margin:0 auto 3rem;text-align:center}
  .sec-head h2{font-size:clamp(2rem,4.6vw,3rem)}
  .sec-head p{color:var(--muted);margin-top:1rem;font-size:1.03rem}
  .rule{height:1px;background:var(--line);border:0}

  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  .stagger>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .stagger.in>*{opacity:1;transform:none}
  .stagger.in>*:nth-child(1){transition-delay:.05s}
  .stagger.in>*:nth-child(2){transition-delay:.14s}
  .stagger.in>*:nth-child(3){transition-delay:.23s}
  .stagger.in>*:nth-child(4){transition-delay:.32s}

  /* --------------------------------------------------------------------------
     NAV
     Sticky with a blur so photographs scroll underneath it. Collapses to a
     hamburger under 900px.
     -------------------------------------------------------------------------- */
  nav.menu{
    position:sticky;top:0;z-index:60;
    background:rgba(15,16,14,.9);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .menu-inner{
    max-width:1140px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    gap:1rem;padding:.9rem 1.5rem;
  }
  .brand{text-decoration:none;display:flex;align-items:center}
  .brand img{height:46px;width:auto;display:block}
  .brand b{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;display:block;letter-spacing:.02em}
  .brand small{
    display:block;font-size:.58rem;font-weight:600;letter-spacing:.26em;
    text-transform:uppercase;color:var(--amber);margin-top:.2rem;
  }
  .menu-links{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.9rem)}
  nav.menu a.item{
    font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink);text-decoration:none;position:relative;padding:.2rem 0;
  }
  nav.menu a.item::after{
    content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;
    background:var(--amber);transform:scaleX(0);transform-origin:left;
    transition:transform .25s ease;
  }
  nav.menu a.item:hover::after{transform:scaleX(1)}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    text-decoration:none;padding:.85rem 1.8rem;border-radius:var(--radius);
    transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
  }
  .btn:hover{transform:translateY(-2px)}
  .btn-amber{background:var(--amber);color:#14150f}
  .btn-amber:hover{background:var(--amber-hi)}
  .btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-amber)}
  .btn-line:hover{background:var(--amber);color:#14150f}
  .menu-cta{padding:.6rem 1.25rem;font-size:.72rem}
  .menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem}
  .menu-toggle span{display:block;width:22px;height:1.5px;background:var(--amber);margin:5px 0;transition:transform .25s ease,opacity .25s ease}
  @media(max-width:900px){
    .menu-toggle{display:block}
    .menu-links{
      position:absolute;top:100%;left:0;right:0;
      flex-direction:column;align-items:flex-start;gap:0;
      background:var(--bg);border-bottom:1px solid var(--line);
      opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
      transition:opacity .25s ease,transform .25s ease,visibility .25s;
    }
    nav.menu.open .menu-links{opacity:1;visibility:visible;transform:none;pointer-events:auto}
    .menu-links a.item{padding:1rem 1.5rem;width:100%}
    .menu-links .menu-cta{margin:.6rem 1.5rem 1.1rem}
    nav.menu.open .menu-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
    nav.menu.open .menu-toggle span:nth-child(2){opacity:0}
    nav.menu.open .menu-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  }

  /* --------------------------------------------------------------------------
     PROTECTED IMAGE COMPONENT  <-- the core of this build
     Marlo's main worry is people taking his work, so every photograph on the
     page goes through .shot, which layers several deterrents:

       1. user-select / -webkit-user-drag  disable drag-off-the-page saving
       2. pointer-events:none on the img   the image cannot be the click target
       3. ::after transparent shield       an invisible layer sits over the
                                           photo, so right click hits the shield
                                           rather than the image itself
       4. img.mark                         his own leopard logo burned over each
                                           photo as a visible watermark

     HONEST LIMIT: none of this stops a determined person. Screenshots and
     dev tools always win. It stops casual right click and save, which is the
     realistic threat. The real protection is uploading web sized files only,
     never the full resolution originals.
     -------------------------------------------------------------------------- */
  .shot{position:relative;overflow:hidden;background:var(--panel);border-radius:var(--radius)}
  .shot img{
    display:block;width:100%;height:100%;object-fit:cover;
    -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
    pointer-events:none;
  }
  /* transparent shield: blocks casual right-click-save on the image itself */
  .shot::after{
    content:"";position:absolute;inset:0;z-index:2;
  }
  /* One large watermark centred over the whole photograph, rather than a small
     corner mark. A corner mark can be cropped off in seconds; a centred one
     covering most of the frame cannot be removed without wrecking the image.
     Opacity is kept low so the photograph still reads as a photograph. */
  .shot img.mark{
    position:absolute;top:50%;left:50%;z-index:3;
    transform:translate(-50%,-50%);
    width:74%;height:auto;max-width:none;object-fit:contain;
    opacity:.42;pointer-events:none;
    filter:drop-shadow(0 2px 14px rgba(0,0,0,.7));
  }
  .shot .sample{
    position:absolute;left:.7rem;top:.7rem;z-index:3;
    background:rgba(15,16,14,.82);color:var(--muted);
    font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    padding:.25rem .6rem;border-radius:2px;pointer-events:none;
  }

  /* --------------------------------------------------------------------------
     HERO
     Two columns: copy left, photograph right in its own frame.

     WHY NOT FULL BLEED: the source images come from Instagram at 640x640.
     Stretched across a full width hero they had to scale over 2x, which cropped
     most of the frame away and looked soft. Showing the whole square in a
     contained panel keeps the composition intact and stays sharp.
     -------------------------------------------------------------------------- */
  /* Hero photograph as a full-bleed background rather than a framed panel.
     Source is one of Marlo's full-resolution originals (4640x6960), so it holds
     up at full width. The gradient exists purely to keep the headline legible.
     The photo is portrait, so on a wide screen we only ever see a horizontal
     band of it — the 30% keeps that band on the paw rather than the grass. */
  .hero{
    position:relative;overflow:hidden;
    /* Path is relative to THIS stylesheet (assets/), not to the HTML page. */
    background:var(--bg) url('hero-paw.jpg') center 30%/cover no-repeat;
  }
  .hero::before{
    content:"";position:absolute;inset:0;z-index:1;
    background:
      radial-gradient(120% 90% at 50% 45%,rgba(15,16,14,.6) 0%,rgba(15,16,14,.86) 65%,rgba(15,16,14,.95) 100%);
  }
  .hero::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:1;
    background:linear-gradient(180deg,transparent,var(--bg));
  }
  .hero-inner{
    position:relative;z-index:2;max-width:1140px;margin:0 auto;
    padding:7rem 1.5rem 6.5rem;width:100%;
  }
  .hero-copy{max-width:44rem;margin:0 auto;text-align:center}
  /* Logo sits above the headline, centred with the rest of the hero copy. */
  .hero-logo{
    height:clamp(96px,14vw,150px);width:auto;
    display:block;margin:0 auto 1.2rem;
  }
  .hero-copy .hero-logo{animation-delay:.02s}
  .hero-copy .cta-row{justify-content:center}
  .hero-credit{
    position:absolute;right:1.5rem;bottom:1rem;z-index:2;
    font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(240,236,225,.5);
  }
  @media(max-width:900px){
    .hero-inner{padding:4.5rem 1.5rem 4.5rem}
    .hero::before{background:linear-gradient(180deg,rgba(15,16,14,.9),rgba(15,16,14,.82))}
  }
  @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .hero-copy>*{animation:fadeUp .8s ease backwards}
  .hero-copy .kicker{animation-delay:.1s}
  .hero-copy h1{animation-delay:.25s}
  .hero-copy .lede{animation-delay:.4s}
  .hero-copy .cta-row{animation-delay:.55s}
  .hero h1{font-size:clamp(2.6rem,7vw,4.8rem);max-width:15ch;margin:0 auto}
  .hero h1 em{font-style:italic;color:var(--amber-hi)}
  .hero .lede{margin:1.4rem auto 0;max-width:34rem;color:var(--ink);opacity:.86;font-size:1.08rem}
  .cta-row{margin-top:2.2rem;display:flex;gap:.85rem;flex-wrap:wrap}

  /* --------------------------------------------------------------------------
     STAT STRIP
     Credibility line: qualification, location, following.
     -------------------------------------------------------------------------- */
  /* No top border: the hero photo should run straight into the strip rather
     than being cut off by a rule across the page. */
  .strip{border-bottom:1px solid var(--line);background:var(--bg2)}
  .strip-in{
    max-width:1140px;margin:0 auto;padding:1.6rem 1.5rem;
    display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:center;
  }
  .strip b{display:block;font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:var(--amber)}
  .strip span{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  @media(max-width:640px){.strip-in{grid-template-columns:1fr;gap:1.1rem}}

  .gal-note{
    margin-top:1.6rem;font-size:.85rem;color:var(--muted);
    display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  }
  .gal-note .lock{color:var(--amber);font-weight:700;letter-spacing:.1em;font-size:.7rem;text-transform:uppercase}

  /* --------------------------------------------------------------------------
     SHOP: PRINTS AND PUZZLES
     Two product rails sharing one card style.
     NOTE: all prices, sizes and piece counts are PLACEHOLDERS pending Marlo's
     real numbers. They are deliberately obvious rather than invented figures.
     -------------------------------------------------------------------------- */
  #prints{background:var(--bg2)}
  .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
  .prod{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;display:flex;flex-direction:column;
    transition:transform .2s ease,border-color .2s ease;
  }
  .prod:hover{transform:translateY(-4px);border-color:var(--line-amber)}
  .prod .shot{aspect-ratio:1/1;border-radius:0}
  .prod-body{padding:1.3rem 1.3rem 1.5rem;display:flex;flex-direction:column;flex:1}
  .prod h3{font-size:1.3rem}
  .prod .meta{font-size:.78rem;color:var(--muted);margin-top:.3rem;letter-spacing:.04em}
  .prod .price{
    font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--amber);
    margin-top:auto;padding-top:1rem;
  }
  .prod .price small{
    display:block;font-family:'Karla',sans-serif;font-size:.66rem;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.15rem;
  }
  .prod .btn{margin-top:1rem;width:100%}
  @media(max-width:900px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.prod-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}}

  .ph{
    display:inline-block;border:1px dashed var(--line-amber);border-radius:2px;
    padding:.15rem .55rem;font-size:.82rem;color:var(--amber);letter-spacing:.04em;
  }

  /* --------------------------------------------------------------------------
     ABOUT
     FGASA professional field guide at iDube Game Reserve. The angle that
     separates him from other wildlife photographers is that he is a working
     guide, in the bush daily, not a visitor on a photo tour.
     -------------------------------------------------------------------------- */
  .about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:3.5rem;align-items:center}
  .about-copy p{color:var(--muted);margin-top:1.1rem}
  .about-copy p b{color:var(--ink);font-weight:600}
  .creds{margin-top:1.8rem;display:flex;gap:.6rem;flex-wrap:wrap}
  .cred{
    font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink);border:1px solid var(--line-amber);border-radius:2px;
    padding:.4rem .9rem;
  }
  /* Marlo's own portrait sits outside .shot, so it carries no watermark and
     none of the anti-copy layers. Those exist to protect work he sells; this
     is just a photo of him. */
  .portrait{
    border-radius:var(--radius);overflow:hidden;
    border:1px solid var(--line-amber);background:var(--panel);
  }
  .portrait img{display:block;width:100%;height:auto}
  @media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:2.4rem}}

  /* --------------------------------------------------------------------------
     PROTECTION AND LEGAL
     Two things at once: reassures buyers that their details are handled
     properly (POPIA, which Marlo specifically asked for), and puts anyone
     thinking about lifting his images on notice about copyright.
     -------------------------------------------------------------------------- */
  #protection{background:var(--bg2)}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
  @media(max-width:860px){.two-col{grid-template-columns:1fr}}
  .card{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:2rem 1.8rem;
  }
  .card h3{font-size:1.45rem;margin-bottom:.3rem}
  .card .sub{
    font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--amber);margin-bottom:1rem;display:block;
  }
  .card p{color:var(--muted);font-size:.93rem;margin-bottom:.8rem}
  .card ul{list-style:none;margin-top:.8rem}
  .card li{
    padding:.45rem 0 .45rem 1.5rem;position:relative;
    font-size:.92rem;color:var(--muted);border-bottom:1px solid var(--line);
  }
  .card li:last-child{border-bottom:0}
  .card li::before{
    content:"";position:absolute;left:0;top:1.05rem;
    width:6px;height:6px;background:var(--amber);border-radius:50%;
  }
  .card li b{color:var(--ink);font-weight:600}

  details{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:1.1rem 1.4rem;margin-bottom:.8rem;
  }
  details[open]{border-color:var(--line-amber)}
  summary{
    cursor:pointer;font-weight:700;font-size:.95rem;list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:1rem;
  }
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";font-size:1.3rem;color:var(--amber);font-weight:400;transition:transform .25s ease}
  details[open] summary::after{transform:rotate(45deg)}
  details p{color:var(--muted);font-size:.91rem;margin-top:.8rem}
  details p b{color:var(--ink)}
  .legal-note{
    margin-top:1.4rem;font-size:.82rem;color:var(--muted);
    border-left:1px solid var(--line-amber);padding-left:1rem;
  }

  /* --------------------------------------------------------------------------
     CONTACT
     Enquiry point for print and puzzle orders.
     -------------------------------------------------------------------------- */
  .contact-box{
    border:1px solid var(--line-amber);border-radius:var(--radius);
    padding:3.6rem 2rem;text-align:center;background:var(--panel);
  }
  .contact-box h2{font-size:clamp(2rem,4.6vw,2.9rem)}
  .contact-box p{color:var(--muted);max-width:32rem;margin:1rem auto 0}
  .contact-links{margin-top:2.2rem;display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap}
  .contact-links a{
    color:var(--ink);text-decoration:none;font-size:.8rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;
    border-bottom:1px solid var(--line-amber);padding-bottom:.25rem;
  }
  .contact-links a:hover{color:var(--amber)}

  .foot-logo{
    display:block;margin:0 auto 1.4rem;
    width:auto;height:clamp(84px,12vw,120px);opacity:.9;
  }
  footer{
    border-top:1px solid var(--line);padding:2.6rem 1.5rem;text-align:center;
    color:var(--muted);font-size:.8rem;line-height:1.9;
  }
  footer .fbrand{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--ink);display:block;margin-bottom:.3rem}
  footer .credits{font-size:.68rem;color:#6b6759;max-width:44rem;margin:.9rem auto 0}

  @media(prefers-reduced-motion:reduce){
    .hero-inner>*{animation:none !important}
    .reveal,.stagger>*{opacity:1 !important;transform:none !important;transition:none !important}
  }

/* ==========================================================================
   GALLERY PAGE (gallery.html)
   A masonry-style column layout rather than a fixed grid, so portrait and
   landscape frames each keep their own proportions instead of being cropped
   to a common box. CSS columns are used because the order is not meaningful
   here — it is a wall of photographs, not a sequence.
   ========================================================================== */
.gal-head{padding:8.5rem 1.5rem 2.5rem;text-align:center;max-width:44rem;margin:0 auto}
.gal-head h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:.4rem 0 .8rem}
.gal-head p{color:var(--muted);margin:0}

.gal{columns:3;column-gap:1rem;padding:0 1.5rem 5rem;max-width:1400px;margin:0 auto}
@media(max-width:1000px){.gal{columns:2}}
@media(max-width:620px){.gal{columns:1}}

/* break-inside stops a photo being split across two columns mid-image */
.gal .shot{break-inside:avoid;margin:0 0 1rem;display:block}
.gal .shot img{height:auto}

/* Sub-heading between the two galleries. Tighter than the page header so the
   second set reads as a continuation, not a new page. */
.gal-head-sub{padding-top:2rem}
.gal-head-sub h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:.4rem 0 0}

/* The Meerkat mark is solid filled line-art, so it reads much heavier than the
   Ranger Marlo outline mark at the same opacity. Dialled back so it protects
   the photograph without sitting on top of it. */
.shot img.mark[src*="watermark-meerkat"]{opacity:.24;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}