/* ============================================
   DESIGN TOKENS — needed by the gallery section
   ============================================ */
   :root{
    --ink:        #FFFFFF;
    --charcoal:   #ede0d4;
    --card:       #e6ccb2;
    --shark-grey: #ddb892;
    --fin-grey:   #000000;
    --bone:       #000000;
    --acid:       #ddb892;
    --blood:      #000000;
  
    --primary:       #b08968;
    --primary-hover: #96714f;
  
    --font-display: 'Anton', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
  
    --marquee-duration: 30s;
  }
  
  *{ margin:0; padding:0; box-sizing:border-box; }
  body{
    background:var(--ink);
    color:var(--bone);
    font-family:var(--font-body);
  }
  img,.ph{ max-width:100%; display:block; }
  
  .wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }
  
  /* ============================================
     PLACEHOLDER ASSETS
     Sits behind each <img> as a fallback tile if the
     image path is missing/broken. Shows the data-label
     text. Safe to remove once all images are final.
     ============================================ */
  .ph{
    background:
      linear-gradient(135deg, rgba(176,137,104,0.06) 25%, transparent 25%) -10px 0/20px 20px,
      linear-gradient(225deg, rgba(176,137,104,0.06) 25%, transparent 25%) -10px 0/20px 20px,
      linear-gradient(315deg, rgba(176,137,104,0.06) 25%, transparent 25%) 0px 0/20px 20px,
      linear-gradient(45deg,  rgba(176,137,104,0.06) 25%, transparent 25%) 0px 0/20px 20px,
      var(--card);
    position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .ph::after{
    content:attr(data-label);
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.06em;
    color:var(--fin-grey);
    background:rgba(255,255,255,0.9);
    padding:5px 9px;
    border:1px dashed var(--shark-grey);
    text-transform:uppercase;
  }
  
  /* ============================================
     SCROLL REVEAL (JS driven) — used by the section head
     ============================================ */
  .reveal{
    opacity:0; transform:translateY(32px);
    transition:opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  
  /* ============================================
     SECTION HEAD (shared styling used above the gallery)
     ============================================ */
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:24px; margin-bottom:56px; flex-wrap:wrap;
  }
  .section-tag{
    font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--blood); margin-bottom:14px;
    display:flex; align-items:center; gap:8px; font-weight:600;
  }
  .section-tag::before{ content:""; width:7px; height:7px; background:var(--acid); display:inline-block; }
  .section-title{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:clamp(30px, 4.2vw, 52px); line-height:1;
  }
  .section-note{
    font-family:var(--font-mono); font-size:13px; color:var(--fin-grey);
    max-width:300px; line-height:1.6;
  }
  
  /* ============================================
     GALLERY — single-row, seamless infinite marquee
     ============================================ */
  .marquee-section{ padding:110px 0; border-bottom:1px solid var(--shark-grey); }
  .marquee-section .wrap{ margin-bottom:48px; }
  .marquee-viewport{
    width:100%; overflow:hidden; position:relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .marquee-track{
    display:flex; width:max-content; gap:18px;
    animation: marquee-scroll var(--marquee-duration) linear infinite;
  }
  .marquee-viewport:hover .marquee-track{ animation-play-state:paused; }
  @keyframes marquee-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  
  .marquee-card{
    flex:0 0 auto; width:230px; height:290px;
    border:1px solid var(--shark-grey);
    border-radius:14px;
    overflow:hidden;
    position:relative;
    transition:transform 0.35s ease;
  }
  .marquee-card:hover{ transform:translateY(-6px); }
  .marquee-card .ph{ width:100%; height:100%; }
  .marquee-card .tag{
    position:absolute; top:12px; left:12px;
    font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase;
    background:rgba(255,255,255,0.9);
    border:1px solid var(--acid); color:var(--fin-grey);
    padding:4px 8px; border-radius:100px;
  }
  
  /* ============================================
     RESPONSIVE — rules affecting this section
     ============================================ */
  @media (max-width:720px){
    .marquee-section{ padding:80px 0; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }