:root{
    --ink:#2f2049;
    --plum:#5b3f80;
    --plum-soft:#8266ab;
    --lilac:#d9c9ef;
    --lilac-pale:#f1eaf8;
    --bg:#faf7fb;
    --cream:#fffdf9;
    --gold:#b3924e;
    --gold-soft:#d9c48f;
    --line: rgba(91,63,128,0.18);
    --shadow: 0 20px 50px -25px rgba(47,32,73,0.35);
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Jost', sans-serif;
    font-weight:300;
    overflow-x:hidden;
  }

  h1,h2,h3{
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    color:var(--ink);
    letter-spacing:0.01em;
  }

  .script{
    font-family:'Alex Brush', cursive;
    font-weight:400;
    line-height:1;
  }

  a{color:inherit; text-decoration:none;}

  .eyebrow{
    font-family:'Jost',sans-serif;
    font-size:0.72rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:500;
  }

  /* ---------- decorative branch signature ---------- */
  .branch-rail{
    position:fixed;
    top:0; left:0;
    width:120px;
    height:100%;
    pointer-events:none;
    z-index:1;
    opacity:0.55;
  }
  .branch-rail svg{
    position:absolute;
    left:-10px;
    width:140px;
    height:2600px;
  }
  @media (max-width: 900px){
    .branch-rail{display:none;}
  }

  /* ---------- header ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 6vw;
    transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
  }
  header.scrolled{
    background:rgba(250,247,251,0.92);
    backdrop-filter: blur(10px);
    box-shadow:0 4px 30px -10px rgba(47,32,73,0.15);
    padding:10px 6vw;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand img{
    width:46px; height:46px;
    border-radius:50%;
    object-fit:cover;
    transition:width 0.4s ease, height 0.4s ease;
  }
  header.scrolled .brand img{width:38px; height:38px;}
  .brand-name{
    font-family:'Cormorant Garamond', serif;
    font-size:1.3rem;
    letter-spacing:0.03em;
  }
  .brand-name span{color:var(--gold);}

  nav.main-nav{
    display:flex;
    gap:2.6rem;
    font-size:0.85rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  nav.main-nav a{
    position:relative;
    padding-bottom:4px;
  }
  nav.main-nav a::after{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:0%;
    height:1px;
    background:var(--gold);
    transition:width 0.3s ease;
  }
  nav.main-nav a:hover::after{width:100%;}

  .nav-toggle{display:none;}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:120px 6vw 80px;
    background:
      radial-gradient(ellipse 60% 45% at 18% 15%, rgba(217,201,239,0.65), transparent 60%),
      radial-gradient(ellipse 55% 50% at 85% 80%, rgba(179,146,78,0.14), transparent 60%),
      linear-gradient(180deg, #f4eef9 0%, #faf7fb 55%, #fbf8f4 100%);
    overflow:hidden;
  }
  .hero-ring{
    position:absolute;
    width:640px; height:640px;
    border:1px solid var(--gold-soft);
    border-radius:50%;
    top:50%; left:50%;
    transform:translate(-50%,-52%);
    opacity:0.5;
  }
  .hero-ring.r2{
    width:600px; height:600px;
    opacity:0.35;
  }
  .hero-logo{
    width:150px;
    height:150px;
    object-fit:cover;
    border-radius:50%;
    box-shadow:var(--shadow);
    margin-bottom:2rem;
    animation: fadeUp 1.1s ease both;
  }
  .hero .eyebrow{animation: fadeUp 1.1s ease 0.15s both;}
  .hero h1{
    font-size:clamp(2.6rem, 6vw, 4.4rem);
    line-height:1.05;
    margin-top:0.6rem;
    animation: fadeUp 1.1s ease 0.3s both;
  }
  .hero h1 .script{
    display:block;
    font-size:1.5em;
    color:var(--plum);
    margin-top:0.1em;
  }
  .hero p.lede{
    max-width:520px;
    margin:1.6rem auto 2.4rem;
    font-size:1.05rem;
    color:var(--plum);
    line-height:1.7;
    animation: fadeUp 1.1s ease 0.45s both;
  }
  .hero-cta{
    display:flex;
    gap:1.1rem;
    flex-wrap:wrap;
    justify-content:center;
    animation: fadeUp 1.1s ease 0.6s both;
  }

  @keyframes fadeUp{
    from{opacity:0; transform:translateY(22px);}
    to{opacity:1; transform:translateY(0);}
  }

  .btn{
    display:inline-block;
    padding:0.85rem 2.1rem;
    font-size:0.82rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    border-radius:40px;
    transition: all 0.35s ease;
    cursor:pointer;
    border:1px solid transparent;
  }
  .btn-primary{
    background:var(--ink);
    color:var(--cream);
  }
  .btn-primary:hover{
    background:var(--plum);
    transform:translateY(-2px);
    box-shadow:0 14px 30px -12px rgba(91,63,128,0.55);
  }
  .btn-outline{
    border-color:var(--ink);
    color:var(--ink);
  }
  .btn-outline:hover{
    background:var(--ink);
    color:var(--cream);
    transform:translateY(-2px);
  }

  .scroll-cue{
    position:absolute;
    bottom:2.6rem;
    left:50%;
    transform:translateX(-50%);
    font-size:0.68rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--plum-soft);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  .scroll-cue::after{
    content:'';
    width:1px; height:34px;
    background:linear-gradient(180deg, var(--gold), transparent);
    animation: scrollDown 1.8s ease-in-out infinite;
  }
  @keyframes scrollDown{
    0%{transform:scaleY(0); transform-origin:top;}
    50%{transform:scaleY(1); transform-origin:top;}
    50.1%{transform-origin:bottom;}
    100%{transform:scaleY(0); transform-origin:bottom;}
  }

  /* ---------- section shell ---------- */
  section{
    position:relative;
    padding:7.5rem 6vw;
    z-index:2;
  }
  .section-head{
    text-align:center;
    max-width:600px;
    margin:0 auto 4rem;
  }
  .section-head h2{
    font-size:clamp(2rem, 4vw, 2.8rem);
    margin-top:0.5rem;
  }
  .section-head p{
    margin-top:1rem;
    color:var(--plum);
    line-height:1.7;
  }
  .divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:1.4rem 0;
  }
  .divider .line{width:44px; height:1px; background:var(--gold-soft);}
  .divider .dot{
    width:7px; height:7px;
    background:var(--gold);
    transform:rotate(45deg);
  }

  /* ---------- a propos strip ---------- */
  .intro{
    display:grid;
    grid-template-columns: 1fr 1.1fr;
    gap:5vw;
    align-items:center;
    max-width:1180px;
    margin:0 auto;
  }
  .intro-visual{
    position:relative;
    aspect-ratio: 4/5;
    border-radius:4px;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(217,201,239,0.9), transparent 55%),
      radial-gradient(ellipse at 75% 80%, rgba(179,146,78,0.25), transparent 55%),
      linear-gradient(160deg,#efe6f6,#f8f2fa 60%,#f4ecf9);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow);
  }
  .intro-visual svg{width:58%; height:58%;}
  .intro-text .eyebrow{margin-bottom:0.8rem; display:block;}
  .intro-text h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:1.3rem;}
  .intro-text p{color:var(--plum); line-height:1.85; margin-bottom:1rem; font-size:0.98rem;}
  .intro-list{
    margin-top:1.8rem;
    display:flex;
    flex-direction:column;
    gap:0.9rem;
  }
  .intro-list li{
    display:flex;
    align-items:baseline;
    gap:0.8rem;
    font-size:0.92rem;
    color:var(--ink);
  }
  .intro-list li::before{
    content:'';
    width:5px;height:5px;
    background:var(--gold);
    transform:rotate(45deg);
    flex-shrink:0;
  }

  /* ---------- boutique ---------- */
  .boutique{background:linear-gradient(180deg, transparent, rgba(217,201,239,0.16) 12%, rgba(217,201,239,0.16) 88%, transparent);}
  .product-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2.4rem;
    max-width:1180px;
    margin:0 auto;
  }
  .product-card{
    background:var(--cream);
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 14px 34px -22px rgba(47,32,73,0.4);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }
  .product-card:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 50px -22px rgba(47,32,73,0.5);
  }
  .product-thumb{
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }
  .product-thumb svg{width:42%; height:42%; opacity:0.85;}
  .p1{background:linear-gradient(150deg,#e3d5f2,#cdb6e8);}
  .p2{background:linear-gradient(150deg,#f1e4cf,#e3c98f);}
  .p3{background:linear-gradient(150deg,#d9c9ef,#b79bd6);}
  .p4{background:linear-gradient(150deg,#ecdff5,#d3b7e6);}
  .p5{background:linear-gradient(150deg,#f0e6d2,#d8bd85);}
  .p6{background:linear-gradient(150deg,#e6d7f0,#c6a4dd);}
  .product-info{
    padding:1.3rem 1.5rem 1.6rem;
  }
  .product-info .eyebrow{font-size:0.65rem;}
  .product-info h3{
    font-size:1.25rem;
    margin:0.35rem 0 0.5rem;
  }
  .product-price{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:0.9rem;
  }
  .price{
    font-family:'Cormorant Garamond', serif;
    font-size:1.2rem;
    color:var(--plum);
  }
  .mini-btn{
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:0.5rem 1.1rem;
    border:1px solid var(--ink);
    border-radius:30px;
    transition:all 0.3s ease;
  }
  .mini-btn:hover{background:var(--ink); color:var(--cream);}

  .boutique-more{
    text-align:center;
    margin-top:3.5rem;
  }

  /* ---------- galerie ---------- */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:190px;
    gap:1.1rem;
    max-width:1180px;
    margin:0 auto;
  }
  .g-tile{
    position:relative;
    border-radius:4px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    cursor:default;
  }
  .g-tile::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 45%, rgba(47,32,73,0.68));
    opacity:0;
    transition:opacity 0.4s ease;
  }
  .g-tile:hover::before{opacity:1;}
  .g-tile:hover .g-caption{opacity:1; transform:translateY(0);}
  .g-tile:hover{transform:scale(1.02);}
  .g-tile{transition:transform 0.45s ease;}
  .g-caption{
    position:relative;
    z-index:2;
    color:var(--cream);
    font-size:0.8rem;
    letter-spacing:0.05em;
    padding:1rem 1.1rem;
    opacity:0;
    transform:translateY(8px);
    transition:all 0.4s ease;
  }
  .g1{grid-column:span 2; grid-row:span 2; background:radial-gradient(ellipse at 30% 20%, #cdb6e8, #7a58a3 85%);}
  .g2{background:radial-gradient(ellipse at 70% 30%, #e3c98f, #b3924e 85%);}
  .g3{background:radial-gradient(ellipse at 40% 60%, #d9c9ef, #8266ab 85%);}
  .g4{background:radial-gradient(ellipse at 60% 40%, #ecdff5, #a882c9 85%);}
  .g5{grid-column:span 2; background:radial-gradient(ellipse at 50% 50%, #f0e6d2, #c6a45a 85%);}
  .g6{background:radial-gradient(ellipse at 35% 65%, #dcc6ee, #6f4d95 85%);}
  .g7{background:radial-gradient(ellipse at 55% 35%, #f1e4cf, #d0a860 85%);}

  @media (max-width:900px){
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .g1{grid-column:span 2;}
    .g5{grid-column:span 2;}
  }

  /* ---------- contact ---------- */
  .contact-wrap{
    max-width:1080px;
    margin:0 auto;
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:4vw;
    background:var(--cream);
    border-radius:6px;
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .contact-side{
    background:
      radial-gradient(ellipse at 20% 15%, rgba(217,201,239,0.9), transparent 55%),
      linear-gradient(165deg,#3a2856,#2f2049 70%);
    color:var(--lilac-pale);
    padding:3.5rem 2.8rem;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .contact-side h3{color:var(--cream); font-size:1.7rem; margin-bottom:1rem;}
  .contact-side p{font-size:0.9rem; line-height:1.8; color:var(--lilac);}
  .contact-detail{margin-top:2.2rem; display:flex; flex-direction:column; gap:1.1rem;}
  .contact-detail div{font-size:0.88rem;}
  .contact-detail span{
    display:block;
    font-size:0.65rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gold-soft);
    margin-bottom:0.3rem;
  }
  .contact-form{
    padding:3.5rem 2.8rem;
  }
  .field{margin-bottom:1.5rem;}
  .field label{
    display:block;
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--plum);
    margin-bottom:0.5rem;
  }
  .field input, .field textarea{
    width:100%;
    border:none;
    border-bottom:1px solid var(--line);
    background:transparent;
    padding:0.6rem 0.1rem;
    font-family:'Jost', sans-serif;
    font-size:0.95rem;
    color:var(--ink);
    outline:none;
    transition:border-color 0.3s ease;
  }
  .field input:focus, .field textarea:focus{border-color:var(--gold);}
  .field textarea{resize:vertical; min-height:90px;}
  .form-note{
    font-size:0.75rem;
    color:var(--plum-soft);
    margin-top:1.4rem;
  }

  /* ---------- footer ---------- */
  footer{
    padding:3.2rem 6vw 2.4rem;
    text-align:center;
    border-top:1px solid var(--line);
    position:relative;
    z-index:2;
  }
  .footer-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:0.9rem;
  }
  .footer-brand img{width:26px; height:26px; border-radius:50%;}
  .footer-brand span{font-family:'Cormorant Garamond', serif; font-size:1.05rem;}
  footer p{font-size:0.75rem; color:var(--plum-soft); letter-spacing:0.03em;}
  .footer-social{
    display:flex;
    gap:1.4rem;
    justify-content:center;
    margin:1.1rem 0;
    font-size:0.78rem;
    letter-spacing:0.05em;
  }

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    nav.main-nav{
      position:fixed;
      top:0; right:0;
      height:100vh;
      width:min(78vw, 320px);
      background:var(--cream);
      flex-direction:column;
      align-items:flex-start;
      justify-content:center;
      gap:2rem;
      padding:2rem 3rem;
      transform:translateX(100%);
      transition:transform 0.45s ease;
      box-shadow:-20px 0 50px -20px rgba(47,32,73,0.3);
    }
    nav.main-nav.open{transform:translateX(0);}
    .nav-toggle{
      display:flex;
      flex-direction:column;
      gap:5px;
      cursor:pointer;
      z-index:200;
      background:none;
      border:none;
    }
    .nav-toggle span{width:24px; height:1.5px; background:var(--ink);}

    .intro{grid-template-columns:1fr; gap:2.5rem;}
    .product-grid{grid-template-columns:repeat(2,1fr); gap:1.3rem;}
    .gallery-grid{grid-auto-rows:150px;}
    .contact-wrap{grid-template-columns:1fr;}
    .contact-side, .contact-form{padding:2.4rem 1.8rem;}
    section{padding:5rem 6vw;}
  }
  @media (max-width:520px){
    .product-grid{grid-template-columns:1fr;}
  }

/* ---------- sub-page hero (boutique, etc.) ---------- */
.page-hero{
  position:relative;
  padding:150px 6vw 70px;
  text-align:center;
  background:
    radial-gradient(ellipse 55% 45% at 15% 20%, rgba(217,201,239,0.6), transparent 60%),
    radial-gradient(ellipse 50% 45% at 88% 75%, rgba(179,146,78,0.14), transparent 60%),
    linear-gradient(180deg, #f4eef9 0%, #faf7fb 70%);
}
.page-hero .eyebrow{display:block; margin-bottom:0.6rem;}
.page-hero h1{
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  line-height:1.1;
}
.page-hero h1 .script{
  display:block;
  font-size:1.35em;
  color:var(--plum);
  margin-top:0.05em;
}
.page-hero p{
  max-width:480px;
  margin:1.2rem auto 0;
  color:var(--plum);
  line-height:1.75;
  font-size:0.98rem;
}
.breadcrumb{
  margin-top:1.6rem;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--plum-soft);
}
.breadcrumb a{color:var(--gold); border-bottom:1px solid transparent; transition:border-color .3s ease;}
.breadcrumb a:hover{border-color:var(--gold);}

/* ---------- filter bar ---------- */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:0.8rem;
  justify-content:center;
  max-width:900px;
  margin:0 auto 3.8rem;
}
.filter-chip{
  padding:0.55rem 1.4rem;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border:1px solid var(--line);
  border-radius:30px;
  color:var(--plum);
  background:transparent;
  cursor:pointer;
  transition:all 0.3s ease;
  font-family:'Jost', sans-serif;
}
.filter-chip:hover{border-color:var(--gold); color:var(--ink);}
.filter-chip.active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--cream);
}

/* catalog grid reuses .product-grid but allows 4 columns on wide screens */
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  max-width:1300px;
  margin:0 auto;
}
.product-card{transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.35s ease, visibility 0.35s ease;}
.product-card.hidden{
  opacity:0;
  transform:scale(0.92);
  position:absolute;
  pointer-events:none;
  visibility:hidden;
}
.catalog-grid{position:relative;}

.p7{background:linear-gradient(150deg,#e8d9c5,#c9a05f);}
.p8{background:linear-gradient(150deg,#e0cdf0,#a878cf);}
.p9{background:linear-gradient(150deg,#f2e8d6,#dcb96f);}
.p10{background:linear-gradient(150deg,#ddc9ef,#9a6fc2);}
.p11{background:linear-gradient(150deg,#eee0f5,#c39fdb);}
.p12{background:linear-gradient(150deg,#f0e6cf,#d3aa5c);}

.badge{
  position:absolute;
  top:0.9rem; left:0.9rem;
  background:var(--ink);
  color:var(--cream);
  font-size:0.62rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.35rem 0.7rem;
  border-radius:20px;
  z-index:2;
}

.catalog-empty{
  text-align:center;
  padding:3rem 0;
  color:var(--plum-soft);
  font-size:0.95rem;
  display:none;
}

@media (max-width:1100px){
  .catalog-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:700px){
  .catalog-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .catalog-grid{grid-template-columns:1fr;}
}

/* ---------- full gallery page ---------- */
.full-gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:220px;
  gap:1.1rem;
  max-width:1300px;
  margin:0 auto;
}
.full-gallery-grid .g-tile{cursor:pointer;}
.full-gallery-grid .g-tile.hidden{display:none;}

.g8{background:radial-gradient(ellipse at 45% 35%, #e6d5f2, #7d5aa8 85%);}
.g9{background:radial-gradient(ellipse at 60% 55%, #f0e2c8, #c99a4f 85%);}
.g10{background:radial-gradient(ellipse at 35% 40%, #dcc9ee, #8a63b5 85%);}
.g11{background:radial-gradient(ellipse at 55% 30%, #ecdaf5, #ae82cf 85%);}
.g12{background:radial-gradient(ellipse at 40% 60%, #f2e6d0, #ceab63 85%);}
.g13{background:radial-gradient(ellipse at 60% 40%, #e0cdf0, #9569c4 85%);}
.g14{background:radial-gradient(ellipse at 30% 55%, #eee0d0, #d3a75f 85%);}

@media (max-width:1100px){
  .full-gallery-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:700px){
  .full-gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:170px;}
}
@media (max-width:480px){
  .full-gallery-grid{grid-template-columns:1fr;}
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(47,32,73,0.82);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6vh 6vw;
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.35s ease, visibility 0.35s ease;
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox-panel{
  position:relative;
  width:min(700px, 100%);
  aspect-ratio:4/3;
  border-radius:6px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,0.5);
  display:flex;
  align-items:flex-end;
  transform:scale(0.94);
  transition:transform 0.35s ease;
}
.lightbox.open .lightbox-panel{transform:scale(1);}
.lightbox-caption{
  position:relative;
  z-index:2;
  color:var(--cream);
  padding:1.6rem 1.8rem;
  font-family:'Cormorant Garamond', serif;
  font-size:1.3rem;
  background:linear-gradient(180deg, transparent, rgba(47,32,73,0.75));
  width:100%;
  border-radius:0 0 6px 6px;
}
.lightbox-close{
  position:absolute;
  top:-46px; right:0;
  background:none;
  border:1px solid rgba(255,255,255,0.5);
  color:var(--cream);
  width:38px; height:38px;
  border-radius:50%;
  font-size:1.1rem;
  cursor:pointer;
  transition:all 0.3s ease;
}
.lightbox-close:hover{background:var(--cream); color:var(--ink);}

/* ---------- photo gallery (vraies photos) ---------- */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:0.7rem;
  max-width:1300px;
  margin:0 auto;
}
.photo-tile{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:4px;
  cursor:pointer;
  background:var(--lilac-pale);
}
.photo-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.55s ease, filter 0.4s ease;
}
.photo-tile::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(47,32,73,0.55));
  opacity:0;
  transition:opacity 0.35s ease;
}
.photo-tile:hover::after{opacity:1;}
.photo-tile:hover img{transform:scale(1.08);}

@media (max-width:1100px){ .photo-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:800px){ .photo-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:520px){ .photo-grid{grid-template-columns:repeat(2,1fr); gap:0.5rem;} }

/* photo lightbox */
.photo-lightbox{
  position:fixed; inset:0;
  background:rgba(47,32,73,0.9);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s ease;
  padding:5vh 4vw;
}
.photo-lightbox.open{opacity:1; visibility:visible;}
.photo-lightbox img{
  max-width:100%;
  max-height:90vh;
  border-radius:4px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,0.55);
  transform:scale(0.95);
  transition:transform 0.3s ease;
}
.photo-lightbox.open img{transform:scale(1);}
.photo-lightbox-close{
  position:fixed;
  top:26px; right:4vw;
  background:none;
  border:1px solid rgba(255,255,255,0.5);
  color:var(--cream);
  width:40px; height:40px;
  border-radius:50%;
  font-size:1.1rem;
  cursor:pointer;
  z-index:1001;
  transition:all 0.3s ease;
}
.photo-lightbox-close:hover{background:var(--cream); color:var(--ink);}
.photo-lightbox-nav{
  position:fixed;
  top:50%; transform:translateY(-50%);
  background:none;
  border:1px solid rgba(255,255,255,0.5);
  color:var(--cream);
  width:46px; height:46px;
  border-radius:50%;
  font-size:1.2rem;
  cursor:pointer;
  z-index:1001;
  transition:all 0.3s ease;
}
.photo-lightbox-nav:hover{background:var(--cream); color:var(--ink);}
.photo-lightbox-prev{left:4vw;}
.photo-lightbox-next{right:4vw;}
@media (max-width:700px){
  .photo-lightbox-nav{width:38px; height:38px; font-size:1rem;}
}