:root {
      --cacao:  #4D403A;
      --khaki:  #DFDACF;
      --pearl:  #FAF8F5;
      --taupe:  #A3968D;
      --white:  #ffffff;
 
      --font-display: 'FreightDisplay Pro', 'Freight Display', Georgia, 'Times New Roman', serif;
      --font-body:    Helvetica, 'Helvetica Neue', Arial, sans-serif;
 
      --radius: 4px;
      --transition: 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }
 
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
    html { scroll-behavior: smooth; }
 
    body {
      background-color: var(--pearl);
      color: var(--cacao);
      font-family: var(--font-body);
      min-height: 100vh;
      overflow-x: hidden;
    }
 
    nav {
        position: fixed;
        top: 0; 
        left: 0; 
        right: 0;
        z-index: 100;
        padding: 10px 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(250, 248, 245, 0.92);
        backdrop-filter: blur(8px);
        border-bottom: 0.5px solid rgba(163, 150, 141, 0.3);
    }
 
    .nav-logo {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: var(--cacao);
      text-decoration: none;
    }
    
    .nav-logo img {
    height: 32px;
    width: auto;
    }
    .nav-back {
      font-family: var(--font-body);
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--taupe);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: color 0.25s;
    }
    .nav-back:hover { color: var(--cacao); }
    .nav-back svg { transition: transform 0.25s; }
    .nav-back:hover svg { transform: translateX(-3px); }
 
    .hero-label {
    font-family: "HelveticaLight", sans-serif;
    font-size: 15px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cacao);
    }

    .gallery-header {
      padding: 100px 48px 40px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 860px;
    }
 
    .gallery-header h1 {
      font-family: var(--font-display);
      font-size: clamp(2.8rem, 6vw, 4rem);
      font-weight: 300;
      line-height: 1.05;
      color: var(--cacao);
      letter-spacing: -0.01em;
    }
 
    .gallery-header p {
      font-size: 0.9rem;
      color: var(--taupe);
      max-width: 440px;
      line-height: 1.7;
      margin-top: 4px;
    }
   
    .grid-section {
      padding: 48px 48px 80px;
    }
 
    .grid-label {
      font-family: var(--font-body);
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--taupe);
      margin-bottom: 24px;
    }
 
    .masonry {
      columns: 4;
      column-gap: 12px;
    }
 
    .masonry-item {
      break-inside: avoid;
      margin-bottom: 12px;
      overflow: hidden;
      border-radius: var(--radius);
      position: relative;
      cursor: zoom-in;
    }
 
    .masonry-item img {
      width: 100%;
      display: block;
      transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }
 
    .masonry-item:hover img { transform: scale(1.2); }
 
    .masonry-item .item-overlay {
      position: absolute;
      inset: 0;
      background: rgba(77, 64, 58, 0);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.35s;
    }
    .masonry-item:hover .item-overlay {
      background: rgba(77, 64, 58, 0.28);
    }
 
    .item-overlay {
      opacity: 0;
      transform: scale(0.7);
      transition: opacity 0.3s, transform 0.3s;
      color: var(--pearl);
    }
    .masonry-item:hover .item-overlay {
      opacity: 1;
      transform: scale(1);
    }
 

.footer {
    background: #4D403A;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
.footer-text {
    font-family: "HelveticaLight", sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #A3968D;
}
.footer-logo img { 
    height: 24px; 
    opacity: 0.7; 
}