/* ==========================================================================
   Belle Creations by Navjot — stylesheet
   Bridal · Trousseau · Couture — Ludhiana, Punjab

   PALETTE — sampled directly from /logo.jpg with a PIL pixel scan
   (see images/manifest.json → "sampled_palette" for the sampling method),
   not guessed or picked from a generic maroon/gold swatch:

     --color-maroon        #3c0407   logo background, dominant dark tone
     --color-gold           #cab189   logo line-art + script ink (decorative,
                                       used on maroon backgrounds — 8.4:1
                                       contrast, well past WCAG AA)
     --color-gold-text     #825a2a   gold darkened for text/links on light
                                       backgrounds — the decorative gold above
                                       only hits 1.8:1 on ivory (fails AA), so
                                       this deepened version (5.4:1 on ivory,
                                       4.7:1 on the dimmer ivory used for
                                       alternating sections) is used anywhere
                                       gold sits on a light background
     --color-ivory          #f5f0e6   warm off-white, not pure white
     --color-charcoal       #2b2624   near-black warm charcoal, not pure black

   TYPE — a refined serif (Cormorant Garamond) for headlines, echoing the
   weight of "By Navjot" in the logo; a plain humanist sans (Jost) for body
   copy and UI; the logo's own script family (Parisienne) reserved for small
   accent labels only, never for paragraph text or navigation — mirrors how
   the logo itself uses script solely for the name, not the tagline.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&family=Parisienne&display=swap');

:root {
  /* -- brand colors, sampled from logo.jpg -- */
  --color-maroon: #3c0407;
  --color-maroon-soft: #55211d;
  --color-maroon-deep: #290203;
  --color-gold: #cab189;
  --color-gold-text: #825a2a;
  --color-ivory: #f5f0e6;
  --color-ivory-dim: #ece2cf;
  --color-charcoal: #2b2624;

  /* WhatsApp brand colors — used only for the dedicated WhatsApp button,
     kept separate from the boutique's own maroon/gold system */
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #128c7e;

  /* -- type -- */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Parisienne', cursive;

  /* -- fluid type scale -- */
  --step-eyebrow: 0.8125rem;
  --step-body: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --step-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --step-h3: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --step-h2: clamp(1.9rem, 1.5rem + 2vw, 2.75rem);
  --step-h1: clamp(2.5rem, 1.8rem + 3.6vw, 4.25rem);

  /* -- layout -- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --section-pad-y: clamp(3.5rem, 3rem + 3vw, 7rem);
  --radius: 3px;

  /* -- motion (durations only ever applied inside the no-preference query) -- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.6;
  font-weight: 400;
}

img { max-width: 100%; display: block; }
picture { display: block; line-height: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--color-maroon);
}

h1 { font-size: var(--step-h1); font-weight: 500; }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; }

/* Visible focus states, everywhere, never suppressed */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-gold-text);
  outline-offset: 3px;
}

.on-dark a:focus-visible,
.on-dark button:focus-visible,
.on-dark [tabindex]:focus-visible {
  outline-color: var(--color-gold);
}

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0;
  background: var(--color-maroon);
  color: var(--color-ivory);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  border-radius: var(--radius);
  transform: translateY(-150%);
}
@media (prefers-reduced-motion: no-preference) {
  .skip-link { transition: transform 0.2s var(--ease); }
}
.skip-link:focus { transform: translateY(1rem); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.on-dark { background: var(--color-maroon); color: var(--color-ivory); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--color-ivory); }

.section { padding-block: var(--section-pad-y); }
.section-tight { padding-block: clamp(2rem, 2rem + 2vw, 3.5rem); }

.eyebrow {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  color: var(--color-gold-text);
  margin-bottom: 0.35em;
  line-height: 1;
}
.on-dark .eyebrow { color: var(--color-gold); }

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.6rem + 2vw, 3.5rem);
}
.section-head.center { margin-inline: auto; text-align: center; }

.lead {
  font-size: var(--step-lead);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-charcoal);
}
.on-dark .lead { color: var(--color-ivory); }

/* ==========================================================================
   Clothesline divider — the one signature motif, reused sparingly
   (thin gold rule with three small hook/peg marks, echoing the garments
   hanging from a line in the logo)
   ========================================================================== */

.clothesline {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-gold);
}
.clothesline line,
.clothesline path { stroke: currentColor; }

.clothesline-wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ==========================================================================
   Buttons — no pill shapes, no drop shadows
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.75em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
}

.btn-primary {
  background: var(--color-maroon);
  color: var(--color-ivory);
  border-color: var(--color-maroon);
}
.btn-primary:hover { background: var(--color-maroon-deep); border-color: var(--color-maroon-deep); }

.btn-gold {
  background: var(--color-gold);
  color: var(--color-maroon);
  border-color: var(--color-gold);
  font-weight: 500;
}
.btn-gold:hover { background: var(--color-ivory); border-color: var(--color-ivory); }

.btn-outline {
  background: transparent;
  color: var(--color-ivory);
  border-color: var(--color-gold);
}
.btn-outline:hover { background: rgba(202, 177, 137, 0.12); }

.btn-outline-dark {
  background: transparent;
  color: var(--color-maroon);
  border-color: var(--color-maroon);
}
.btn-outline-dark:hover { background: rgba(60, 4, 7, 0.06); }

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background 0.25s var(--ease), border-color 0.25s var(--ease); }
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-ivory);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.brand img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-maroon);
  line-height: 1.1;
}
.brand-name small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold-text);
  font-weight: 500;
  margin-top: 0.2em;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  z-index: 96;
}

.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: #fff;
}
.whatsapp-btn svg { width: 22px; height: 22px; }
.whatsapp-btn:hover:not(.instagram-btn) { background: var(--color-whatsapp-dark); }
@media (prefers-reduced-motion: no-preference) {
  .whatsapp-btn { transition: filter 0.2s var(--ease), background 0.2s var(--ease); }
}

/* Instagram's own brand gradient, not WhatsApp green — same circle/size/feel,
   overrides the shared .whatsapp-btn background */
.instagram-btn {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.instagram-btn:hover { filter: brightness(0.92); }

/* Periodic attention "jump" on the WhatsApp button only — a quick double
   hop every few seconds, at rest the rest of the time. Instagram shares
   the same base .whatsapp-btn styling but is excluded from the animation. */
@keyframes whatsapp-jump {
  0%, 55%, 100% { transform: translateY(0); }
  15% { transform: translateY(-9px); }
  30% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: no-preference) {
  .whatsapp-btn:not(.instagram-btn) { animation: whatsapp-jump 3.2s ease-in-out infinite; }
  .whatsapp-btn:not(.instagram-btn):hover,
  .whatsapp-btn:not(.instagram-btn):focus-visible { animation-play-state: paused; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-maroon);
  border-radius: var(--radius);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2.5rem);
}
.nav-links a {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--color-charcoal);
  padding-bottom: 0.2em;
  border-bottom: 1px solid transparent;
}
.nav-links a[aria-current="page"] {
  color: var(--color-maroon);
  border-bottom-color: var(--color-gold-text);
}
.nav-links a:hover { border-bottom-color: var(--color-gold-text); }
@media (prefers-reduced-motion: no-preference) {
  .nav-links a { transition: border-color 0.2s var(--ease); }
}

@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 340px);
    height: 100vh;
    z-index: 95;
    background: var(--color-maroon);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5.5rem 2rem 2rem;
    gap: 1.75rem;
    transform: translateX(100%);
    visibility: hidden;
  }
  .nav-links[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
  }
  @media (prefers-reduced-motion: no-preference) {
    .nav-links { transition: transform 0.35s var(--ease); }
  }
  .nav-links a { color: var(--color-ivory); font-size: 1.15rem; }
  .nav-links a[aria-current="page"] { color: var(--color-gold); }
  .nav-right { gap: 0.6rem; }
}

.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 2, 3, 0.45);
  z-index: 90;
}
.nav-scrim[data-open="true"] { display: block; }

/* ==========================================================================
   Hero — asymmetric split, not a centered block over a dimmed photo
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1.05fr; min-height: 88vh; }
}

.hero-media {
  position: relative;
  min-height: 52vh;
  overflow: hidden;
}
@media (min-width: 900px) { .hero-media { min-height: 88vh; } }

/* Two-photo collage (clock tower + Jagraon Bridge), stacked top/bottom
   and split by a thin gold rule echoing the clothesline divider */
.hero-collage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.hero-collage-tile {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--color-ivory-dim);
  margin: 0;
}
.hero-collage-tile:first-child { border-bottom: 3px solid var(--color-gold); }

.hero-collage-tile picture,
.hero-collage-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Focal points so the crop favors the actual subject at any tile aspect
   ratio — the clock face on the tower, the statues' heads on the bridge —
   instead of a plain center-crop landing on the base/road or the torsos. */
.hero-collage-tile:first-child img { object-position: center 34%; }
.hero-collage-tile:last-child img { object-position: center 18%; }

/* Mobile only: the clock tower crop reads too tight at this tile's short,
   wide aspect ratio. Zoom out to show the whole tower via object-fit:contain,
   with the tile's own background swapped to the photo's actual sky color
   (sampled from the source file) so the letterbox strips blend in rather
   than reading as empty placeholder space. Desktop is unaffected. */
@media (max-width: 899px) {
  .hero-collage-tile:first-child {
    background: #84a7d0;
  }
  .hero-collage-tile:first-child img {
    object-fit: contain;
    object-position: center center;
  }
}

.hero-credit {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  font-size: 0.65rem;
  color: var(--color-ivory);
  background: rgba(41, 2, 3, 0.55);
  padding: 0.3em 0.6em;
  border-radius: var(--radius);
  letter-spacing: 0.01em;
}
.hero-credit a { text-decoration: underline; }

.hero-content {
  background: var(--color-maroon);
  color: var(--color-ivory);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 4vw, 4.5rem);
  gap: 1.5rem;
}

.hero-content .brand-name-lg {
  font-family: var(--font-script);
  font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
  color: var(--color-gold);
  line-height: 1;
}
.hero-content .brand-sub {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold-text);
  margin-top: 0.5em;
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.hero-content h1 {
  color: var(--color-ivory);
  font-weight: 500;
}

.hero-content p {
  color: rgba(245, 240, 230, 0.88);
  max-width: 34rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* ==========================================================================
   Category intro cards
   ========================================================================== */

.category-grid {
  display: grid;
  gap: clamp(1.75rem, 2vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
}

.category-card { display: block; }
.category-card .frame {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-bottom: 1.1rem;
  background: var(--color-ivory-dim);
}
.category-card img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .category-card img { transition: transform 0.7s var(--ease); }
  .category-card:hover img, .category-card:focus-visible img { transform: scale(1.045); }
}

.category-card .eyebrow { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); }
.category-card h3 { margin-bottom: 0.35em; }
.category-card .link-arrow {
  font-size: 0.85rem;
  color: var(--color-gold-text);
  border-bottom: 1px solid var(--color-gold-text);
  padding-bottom: 0.1em;
}

/* ==========================================================================
   Featured strip
   ========================================================================== */

.featured-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .featured-grid { grid-template-columns: repeat(4, 1fr); }
}

.featured-item { display: block; }
.featured-item .frame {
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--color-ivory-dim);
}
.featured-item img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .featured-item img { transition: transform 0.7s var(--ease); }
  .featured-item:hover img, .featured-item:focus-visible img { transform: scale(1.045); }
}
.featured-item figcaption {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

/* ==========================================================================
   Ships worldwide callout
   ========================================================================== */

.worldwide {
  background: var(--color-maroon);
  color: var(--color-ivory);
  text-align: center;
}
.worldwide .section-head { margin-inline: auto; }
.worldwide-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
  grid-template-columns: 1fr;
  text-align: left;
  max-width: 56rem;
  margin-inline: auto;
}
@media (min-width: 700px) { .worldwide-grid { grid-template-columns: repeat(3, 1fr); } }
.worldwide-grid h3 { color: var(--color-gold); font-size: var(--step-h3); }
.worldwide-grid p { color: rgba(245, 240, 230, 0.85); font-size: 0.95rem; }

/* ==========================================================================
   Contact / location block
   ========================================================================== */

.contact-block {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .contact-block { grid-template-columns: 1fr 1fr; } }

.contact-card {
  background: var(--color-ivory-dim);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-radius: var(--radius);
}
.contact-card dl { margin: 0; }
.contact-card dt {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-text);
  margin-top: 1.25rem;
}
.contact-card dt:first-child { margin-top: 0; }
.contact-card dd {
  margin: 0.3em 0 0;
  font-size: 1.05rem;
}
.contact-card dd.address-landmark {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-charcoal);
  opacity: 0.75;
  margin-top: 0.3em;
}
.contact-card .btn { margin-top: 1.75rem; margin-right: 0.75rem; }

.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-ivory-dim);
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Small floating "Get Directions" pop-up chip, anchored to a map corner */
.map-chip {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--color-maroon);
  color: var(--color-ivory);
  border: 1px solid var(--color-gold);
  padding: 0.55em 1em;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
}
.map-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}
.map-chip:hover { background: var(--color-maroon-deep); }
@media (prefers-reduced-motion: no-preference) {
  .map-chip { transition: background 0.2s var(--ease); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-maroon-deep);
  color: var(--color-ivory);
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-block: clamp(3rem, 4vw, 4.5rem);
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }

.footer-brand img {
  width: 56px; height: 56px;
  border-radius: 50%;
  margin-bottom: 1rem;
}
.footer-brand p { color: rgba(245, 240, 230, 0.7); font-size: 0.9rem; max-width: 22rem; }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1rem;
}
.footer-col li { margin-bottom: 0.6rem; font-size: 0.92rem; }
.footer-col a { color: rgba(245, 240, 230, 0.85); border-bottom: 1px solid transparent; }
.footer-col a:hover { border-bottom-color: var(--color-gold); }
.footer-col address { font-style: normal; color: rgba(245, 240, 230, 0.85); }

.footer-bottom {
  border-top: 1px solid rgba(202, 177, 137, 0.2);
  padding-block: 1.25rem;
  font-size: 0.78rem;
  color: rgba(245, 240, 230, 0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}
.footer-bottom a { color: rgba(245, 240, 230, 0.75); }

/* ==========================================================================
   Page hero (interior pages: Collections / About / Contact)
   ========================================================================== */

.page-hero {
  background: var(--color-maroon);
  color: var(--color-ivory);
  padding-block: clamp(3.5rem, 6vw, 6rem) clamp(2.5rem, 4vw, 4rem);
}
.page-hero h1 { color: var(--color-ivory); font-weight: 500; }
.page-hero .lead { max-width: 42rem; }

/* ==========================================================================
   Collections page — masonry-ish galleries
   ========================================================================== */

.collection-section { scroll-margin-top: 5.5rem; }
.collection-section + .collection-section { border-top: 1px solid rgba(60, 4, 7, 0.1); }

.collection-intro {
  max-width: 48rem;
  margin-bottom: clamp(2rem, 3vw, 3rem);
}

.gallery {
  columns: 1;
  column-gap: clamp(1.25rem, 2vw, 2rem);
}
@media (min-width: 640px) { .gallery { columns: 2; } }
@media (min-width: 1024px) { .gallery { columns: 3; } }

.gallery-item {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
  position: relative;
  overflow: hidden;
  background: var(--color-ivory-dim);
  border: 0;
  padding: 0;
  cursor: zoom-in;
}
.gallery-item img { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .gallery-item img { transition: transform 0.6s var(--ease); }
  .gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.04); }
}
.gallery-item .gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1rem 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-ivory);
  background: linear-gradient(to top, rgba(41,2,3,0.82), transparent);
  text-align: left;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .gallery-item .gallery-caption { transition: opacity 0.3s var(--ease); }
}
.gallery-item:hover .gallery-caption,
.gallery-item:focus-visible .gallery-caption { opacity: 1; }

.gallery-empty-note {
  font-size: 0.9rem;
  color: var(--color-gold-text);
  font-style: italic;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 2, 3, 0.92);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.lightbox[data-open="true"] { display: flex; }

.lightbox-figure {
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  text-align: center;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  margin-inline: auto;
  border: 1px solid rgba(202, 177, 137, 0.25);
}
.lightbox-caption {
  color: var(--color-ivory);
  font-size: 0.85rem;
  margin-top: 1rem;
}
.lightbox-caption .cat {
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  margin-right: 0.6em;
}

.lightbox-btn {
  position: absolute;
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox-btn svg { width: 20px; height: 20px; }
.lightbox-btn:hover { background: rgba(202, 177, 137, 0.15); }

.lightbox-close { top: 1.25rem; right: 1.25rem; }
.lightbox-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-block {
  max-width: 52rem;
}
.about-block + .about-block { margin-top: clamp(2.5rem, 4vw, 4rem); }
.about-block p { font-size: var(--step-body); }

.about-figure {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  max-width: 22rem;
}
.about-figure picture {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-ivory-dim);
  border-radius: var(--radius);
}
.about-figure img { width: 100%; height: 100%; object-fit: cover; }
.about-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.about-recap {
  margin-top: clamp(3rem, 5vw, 5rem);
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .about-recap { grid-template-columns: repeat(3, 1fr); } }
.about-recap > div { border-top: 1px solid rgba(60,4,7,0.15); padding-top: 1.25rem; }
.about-recap h3 { font-size: var(--step-h3); }

/* ==========================================================================
   Contact page specifics
   ========================================================================== */

.contact-note {
  max-width: 40rem;
  font-size: var(--step-lead);
  font-family: var(--font-display);
  font-style: italic;
}

.contact-methods {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
  max-width: 30rem;
}
@media (min-width: 560px) { .contact-methods { grid-template-columns: 1fr 1fr; } }
.contact-method {
  border: 1px solid rgba(60,4,7,0.18);
  padding: 1.5rem;
  border-radius: var(--radius);
}
.contact-method h3 { font-size: 1.1rem; margin-bottom: 0.4em; }
.contact-method a.btn { margin-top: 1rem; }

.instagram-cta {
  margin-top: clamp(2.5rem, 4vw, 4rem);
  padding-top: clamp(2.5rem, 4vw, 4rem);
  border-top: 1px solid rgba(60,4,7,0.15);
}

/* ==========================================================================
   Scroll reveal (progressive enhancement — JS only adds [data-reveal] state
   when prefers-reduced-motion allows it; content is fully visible by default).
   Deliberately transform-only, no opacity dip — text stays fully legible at
   every point in the transition instead of passing through a faint state.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    transform: translateY(18px);
    transition: transform 0.7s var(--ease);
  }
  [data-reveal].is-visible {
    transform: translateY(0);
  }
}

/* ==========================================================================
   Floating assistant — WhatsApp + Get Directions, anchored to the corner,
   stays put while scrolling. Sits below the mobile nav drawer/scrim in the
   stacking order so it doesn't float on top of an open menu.
   ========================================================================== */

.float-assist {
  position: fixed;
  right: clamp(0.85rem, 3vw, 1.5rem);
  bottom: clamp(0.85rem, 3vw, 1.5rem);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

.float-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.65em 1.1em 0.65em 0.75em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--color-ivory);
}
.float-btn-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.float-btn-icon svg { width: 100%; height: 100%; }

.float-btn-whatsapp { background: var(--color-whatsapp); }
.float-btn-whatsapp:hover { background: var(--color-whatsapp-dark); }

.float-btn-directions {
  background: var(--color-maroon);
  border-color: var(--color-gold);
}
.float-btn-directions:hover { background: var(--color-maroon-deep); }

@media (prefers-reduced-motion: no-preference) {
  .float-btn { transition: background 0.2s var(--ease); }
}

/* Labels stay visible but shrink slightly on very narrow screens so the
   pair never crowds the corner */
@media (max-width: 420px) {
  .float-btn { font-size: 0.76rem; padding: 0.6em 0.9em 0.6em 0.65em; }
  .float-btn-icon { width: 18px; height: 18px; }
}

/* ==========================================================================
   Misc
   ========================================================================== */

.visually-hidden-caption { display: none; }