/* ============================================
   The Ceiba House — Homepage Texture & Motion
   Layered ON TOP of ceiba-front-page.css. Touches:
   1) Linen grain overlay across post-hero canvas
   2) Encaustic tile section dividers (Cuban motif)
   3) Scrappy heritage band w/ 2 living portraits
   No edits to existing classes — all additive.
   ============================================ */

:root {
  --ch-tile-tan: #c89a64;
  --ch-tile-terracotta: #a0522d;
  --ch-tile-cream: #f1ead8;
  --ch-tile-espresso: #2c1810;
  --ch-linen-opacity: 0.085;          /* Tweakable */
  --ch-linen-warmth: #2c1810;         /* multiply tone */
  --ch-divider-height: 56px;          /* Tweakable */
}

/* ============================================
   1. HERO MOCK (display only — texture starts after)
   ============================================ */
.ch-hero-mock {
  position: relative;
  height: 88vh; min-height: 620px;
  overflow: hidden;
  background: var(--ch-charcoal);
}
.ch-hero-mock__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.ch-hero-mock__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(26,26,26,0.15) 0%,
    rgba(26,26,26,0.45) 55%,
    rgba(26,26,26,0.82) 100%);
}
.ch-hero-mock__content {
  position: absolute; z-index: 2;
  bottom: clamp(80px, 10vh, 140px);
  left: clamp(48px, 6vw, 120px);
  max-width: 800px;
}
.ch-hero-mock__content .ch-hero__title { margin-bottom: 28px; }
.ch-hero-mock__content .ch-hero__btn { cursor: pointer; }

/* ============================================
   2. TEXTURED CANVAS — wraps everything below hero
   ============================================ */
.ch-textured {
  position: relative;
  isolation: isolate;
  background: var(--ch-warm-white);
}

/* Persistent linen layer — fixed so it reads as a page-wide
   "surface" rather than a per-section motif.
   Construction:
     - warp + weft cross-hatch (1px lines)
     - slubby fiber speckle (irregular short marks)
     - very fine grain dots
   All in warm-brown ink, multiplied over the page so it
   never lifts or muddles section colors. */
.ch-textured > .ch-linen {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--ch-linen-opacity);
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(70,50,28,0.55) 0px, rgba(70,50,28,0.55) 1px,
      transparent 1px, transparent 3px),
    repeating-linear-gradient(0deg,
      rgba(70,50,28,0.45) 0px, rgba(70,50,28,0.45) 1px,
      transparent 1px, transparent 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%232C1810' fill-opacity='0.55'%3E%3Crect x='3' y='14' width='8' height='1'/%3E%3Crect x='28' y='6' width='5' height='1'/%3E%3Crect x='52' y='22' width='10' height='1'/%3E%3Crect x='14' y='38' width='6' height='1'/%3E%3Crect x='62' y='44' width='7' height='1'/%3E%3Crect x='34' y='58' width='9' height='1'/%3E%3Crect x='8' y='66' width='4' height='1'/%3E%3Crect x='48' y='72' width='6' height='1'/%3E%3Crect x='86' y='18' width='8' height='1'/%3E%3Crect x='118' y='34' width='6' height='1'/%3E%3Crect x='140' y='62' width='9' height='1'/%3E%3Crect x='98' y='84' width='5' height='1'/%3E%3Crect x='126' y='102' width='8' height='1'/%3E%3Crect x='74' y='118' width='6' height='1'/%3E%3Crect x='148' y='134' width='5' height='1'/%3E%3Crect x='20' y='2' width='1' height='4'/%3E%3Crect x='42' y='30' width='1' height='5'/%3E%3Crect x='66' y='12' width='1' height='3'/%3E%3Crect x='108' y='48' width='1' height='4'/%3E%3Crect x='132' y='80' width='1' height='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, 160px 160px;
}

/* Make every direct content section sit ABOVE the linen,
   so it reads through them without darkening readable text.
   Cards/fills inside a section paint over the linen — that's
   the "old paper" feel.  */
.ch-textured > section,
.ch-textured > .ch-tile-strip { position: relative; z-index: 2; }

/* Texture off (Tweak) */
.ch-textured[data-texture="off"] > .ch-linen { display: none; }

/* ============================================
   2b. SECTION BACKGROUND TEXTURES
   Each section can opt into one of several textures via
   data-bgtex="...". Textures are layered as ::before pseudo-
   elements so the section's own background-color shows through.
   Density: data-bgtex-strength="subtle|medium|bold"
   ============================================ */
.ch-textured section[data-bgtex] { position: relative; }
.ch-textured section[data-bgtex] > * { position: relative; z-index: 2; }
.ch-textured section[data-bgtex]::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: var(--bgtex-op, 0.5);
  background-repeat: repeat;
}
.ch-textured section[data-bgtex-strength="subtle"]::after { --bgtex-op: 0.25; }
.ch-textured section[data-bgtex-strength="medium"]::after { --bgtex-op: 0.5; }
.ch-textured section[data-bgtex-strength="bold"]::after   { --bgtex-op: 0.85; }

/* Charcoal/dark sections need lighten-blend instead of multiply */
.ch-textured section.ch-narrative[data-bgtex]::after,
.ch-textured section.ch-testimonial[data-bgtex]::after,
.ch-textured section.ch-cta[data-bgtex]::after {
  mix-blend-mode: screen;
  filter: invert(1);
  opacity: calc(var(--bgtex-op, 0.5) * 0.35);
}

/* --- paper: aged paper grain (cream tone, irregular speckle) --- */
.ch-textured section[data-bgtex="paper"]::after {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.17  0 0 0 0 0.10  0 0 0 0 0.06  0 0 0 0.55 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.7'/></svg>"),
    radial-gradient(ellipse at 30% 20%, rgba(70,50,28,0.10), transparent 60%),
    radial-gradient(ellipse at 75% 70%, rgba(70,50,28,0.08), transparent 55%);
  background-size: 200px 200px, 100% 100%, 100% 100%;
}

/* --- watercolor: soft organic washes (terracotta + sage) --- */
.ch-textured section[data-bgtex="watercolor"]::after {
  background-image:
    radial-gradient(ellipse 40% 30% at 15% 25%, rgba(160,82,45,0.22), transparent 70%),
    radial-gradient(ellipse 35% 25% at 80% 20%, rgba(139,154,123,0.20), transparent 70%),
    radial-gradient(ellipse 50% 35% at 60% 80%, rgba(184,148,62,0.18), transparent 75%),
    radial-gradient(ellipse 30% 22% at 25% 75%, rgba(160,82,45,0.15), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.62  0 0 0 0 0.32  0 0 0 0 0.18  0 0 0 0.4 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 300px 300px;
}

/* --- terrazzo: scattered chips (ivory base, brass + terracotta + espresso flecks) --- */
.ch-textured section[data-bgtex="terrazzo"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>\
<rect width='220' height='220' fill='%23f1ead8' opacity='0.0'/>\
<g opacity='0.9'>\
<polygon points='12,18 28,14 32,28 18,32' fill='%23a0522d' opacity='0.55'/>\
<polygon points='62,40 82,36 86,52 70,58 60,52' fill='%23b8943e' opacity='0.55'/>\
<polygon points='110,12 124,18 122,30 108,28' fill='%232c1810' opacity='0.55'/>\
<polygon points='160,28 178,30 180,46 162,44' fill='%238b9a7b' opacity='0.5'/>\
<polygon points='20,80 40,82 38,98 22,96' fill='%23b8943e' opacity='0.55'/>\
<polygon points='70,90 92,88 98,108 76,112 68,100' fill='%23a0522d' opacity='0.55'/>\
<polygon points='130,72 148,78 144,94 128,90' fill='%232c1810' opacity='0.55'/>\
<polygon points='176,86 198,90 196,108 178,104' fill='%23a0522d' opacity='0.5'/>\
<polygon points='14,138 32,142 30,158 12,154' fill='%238b9a7b' opacity='0.5'/>\
<polygon points='58,142 78,144 80,162 60,164 54,156' fill='%232c1810' opacity='0.55'/>\
<polygon points='108,134 130,140 128,156 110,154' fill='%23b8943e' opacity='0.55'/>\
<polygon points='158,150 178,148 184,168 164,170' fill='%23a0522d' opacity='0.55'/>\
<polygon points='28,184 48,188 44,206 26,202' fill='%23b8943e' opacity='0.5'/>\
<polygon points='90,176 110,180 108,198 88,196' fill='%23a0522d' opacity='0.55'/>\
<polygon points='148,184 168,190 164,206 146,204' fill='%232c1810' opacity='0.55'/>\
<circle cx='42' cy='52' r='2' fill='%232c1810' opacity='0.6'/>\
<circle cx='150' cy='110' r='2.5' fill='%23a0522d' opacity='0.6'/>\
<circle cx='200' cy='160' r='2' fill='%232c1810' opacity='0.6'/>\
<circle cx='86' cy='170' r='1.5' fill='%23b8943e' opacity='0.6'/>\
</g>\
</svg>");
  background-size: 220px 220px;
}

/* --- palm: large soft palm-frond shadow shapes --- */
.ch-textured section[data-bgtex="palm"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'>\
<g fill='%232c1810' opacity='0.55'>\
<path d='M-40,180 Q60,140 120,170 Q80,180 70,210 Q120,200 150,230 Q90,230 70,260 Q120,260 140,290 Q70,280 40,310 Q90,320 100,350 Q40,330 -10,360 Z'/>\
<path d='M380,40 Q440,80 460,140 Q420,110 390,130 Q420,150 420,200 Q380,170 350,180 Q380,210 380,250 Q330,220 300,230 Q330,260 320,300 Q280,260 250,260 Q280,300 260,340 Q220,290 200,290 Q220,330 200,360 Q170,310 150,310 Q140,260 170,230 Q140,200 160,160 Q200,180 240,160 Q220,120 260,90 Q300,120 330,100 Q320,60 380,40 Z'/>\
</g>\
</svg>");
  background-size: 480px 480px;
}

/* --- grasscloth: horizontal woven stripe (Frame 2 from brief) --- */
.ch-textured section[data-bgtex="grasscloth"]::after {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(70,50,28,0.18) 0px, rgba(70,50,28,0.18) 1px,
      transparent 1px, transparent 4px),
    repeating-linear-gradient(0deg,
      rgba(70,50,28,0.08) 0px, rgba(70,50,28,0.08) 7px,
      transparent 7px, transparent 14px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='12'><g fill='%232c1810' opacity='0.45'><rect x='8' y='3' width='14' height='1'/><rect x='34' y='7' width='10' height='1'/><rect x='58' y='5' width='18' height='1'/><rect x='86' y='9' width='12' height='1'/><rect x='104' y='2' width='10' height='1'/></g></svg>");
  background-size: auto, auto, 120px 12px;
}

/* --- speckle: fine ink-spatter speckle (subtle, plaster-like) --- */
.ch-textured section[data-bgtex="speckle"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.17  0 0 0 0 0.10  0 0 0 0 0.06  0 0 0 1 -0.55'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* --- plaster: Venetian plaster / limewash — warm mottled terracotta --- */
.ch-textured section[data-bgtex="plaster"]::after {
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(160,82,45,0.14), transparent 70%),
    radial-gradient(ellipse 45% 40% at 75% 60%, rgba(140,70,35,0.12), transparent 65%),
    radial-gradient(ellipse 55% 45% at 50% 15%, rgba(180,130,80,0.10), transparent 60%),
    radial-gradient(ellipse 40% 35% at 85% 20%, rgba(120,60,30,0.08), transparent 55%),
    radial-gradient(ellipse 50% 50% at 30% 80%, rgba(160,82,45,0.10), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.025' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.25  0 0 0 0 0.12  0 0 0 0.6 0'/></filter><rect width='300' height='300' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 300px 300px;
}

/* --- stripe-wall: tonal vertical stripes — sage/olive wallpaper --- */
.ch-textured section[data-bgtex="stripe-wall"]::after {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(139,154,123,0.12) 0px, rgba(139,154,123,0.12) 2px,
      transparent 2px, transparent 18px,
      rgba(139,154,123,0.08) 18px, rgba(139,154,123,0.08) 20px,
      transparent 20px, transparent 36px),
    repeating-linear-gradient(90deg,
      rgba(58,58,42,0.04) 0px, rgba(58,58,42,0.04) 1px,
      transparent 1px, transparent 9px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.38  0 0 0 0 0.30  0 0 0 0.3 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.4'/></svg>");
  background-size: auto, auto, 200px 200px;
}

/* --- none --- */
.ch-textured section[data-bgtex="none"]::after { display: none; }

/* Reduced motion — keep the texture (it's static), drop animations */
@media (prefers-reduced-motion: reduce) {
  .ch-album-photo--live * { animation: none !important; transition: none !important; }
}

/* ============================================
   3. ENCAUSTIC TILE DIVIDERS
   Pure-CSS Cuban-style tile rows.
   Height tweakable. Two motifs:
     --quatrefoil: 4-pointed star negative-space on terracotta
     --circle:     cream circle on terracotta square w/ corner accents
   Both repeat horizontally as background-tiles.
   ============================================ */
.ch-tile-strip {
  position: relative;
  height: var(--ch-divider-height);
  background: var(--ch-tile-espresso);
  overflow: hidden;
  /* paper edges above + below the strip */
  box-shadow:
    0 1px 0 rgba(0,0,0,0.08),
    0 -1px 0 rgba(0,0,0,0.08);
}
.ch-tile-strip::before,
.ch-tile-strip::after {
  /* subtle inset shadow at top + bottom = "pressed in" */
  content: '';
  position: absolute; left: 0; right: 0;
  height: 6px; pointer-events: none;
}
.ch-tile-strip::before { top: 0;    background: linear-gradient(180deg, rgba(0,0,0,0.35), transparent); }
.ch-tile-strip::after  { bottom: 0; background: linear-gradient(0deg,   rgba(0,0,0,0.35), transparent); }

.ch-tile-strip__row {
  position: absolute; inset: 0;
  background-repeat: repeat-x;
  background-position: center center;
}

/* --- Quatrefoil motif (geometric star) ---
   One tile = 56×56 svg. Cream ground, terracotta+espresso ornament. */
.ch-tile-strip--quatrefoil .ch-tile-strip__row {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'>\
<rect width='56' height='56' fill='%23f1ead8'/>\
<path d='M28 4 L34 22 L52 28 L34 34 L28 52 L22 34 L4 28 L22 22 Z' fill='%23a0522d'/>\
<circle cx='28' cy='28' r='5' fill='%23f1ead8'/>\
<circle cx='28' cy='28' r='2' fill='%232c1810'/>\
<rect x='0' y='0' width='56' height='1' fill='%232c1810' opacity='0.35'/>\
<rect x='0' y='55' width='56' height='1' fill='%232c1810' opacity='0.35'/>\
<rect x='0' y='0' width='1' height='56' fill='%232c1810' opacity='0.18'/>\
</svg>");
  background-size: auto 100%;
}

/* --- Circle-on-square motif ---
   Espresso ground, brass ring, cream center, brass quarter-corners. */
.ch-tile-strip--circle .ch-tile-strip__row {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'>\
<rect width='56' height='56' fill='%232c1810'/>\
<circle cx='28' cy='28' r='18' fill='none' stroke='%23b8943e' stroke-width='2'/>\
<circle cx='28' cy='28' r='10' fill='%23f1ead8'/>\
<path d='M0 0 Q14 0 14 14 Q14 0 0 14 Z' fill='%23b8943e' opacity='0.85'/>\
<path d='M56 0 Q42 0 42 14 Q42 0 56 14 Z' fill='%23b8943e' opacity='0.85'/>\
<path d='M0 56 Q14 56 14 42 Q14 56 0 42 Z' fill='%23b8943e' opacity='0.85'/>\
<path d='M56 56 Q42 56 42 42 Q42 56 56 42 Z' fill='%23b8943e' opacity='0.85'/>\
<rect x='0' y='0' width='1' height='56' fill='%23000' opacity='0.4'/>\
</svg>");
  background-size: auto 100%;
}

/* --- Stripe motif (linen-weave divider) ---
   The third option — a heavily-textured horizontal grasscloth band.
   Used when "stripe" is selected via Tweaks. */
.ch-tile-strip--stripe { background: var(--ch-tile-tan); }
.ch-tile-strip--stripe .ch-tile-strip__row {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(44,24,16,0.22) 0px, rgba(44,24,16,0.22) 1px,
      transparent 1px, transparent 3px),
    repeating-linear-gradient(0deg,
      rgba(44,24,16,0.10) 0px, rgba(44,24,16,0.10) 6px,
      transparent 6px, transparent 12px);
  background-size: auto, auto;
  box-shadow: inset 0 0 24px rgba(44,24,16,0.18);
}

/* Tweak: divider off */
.ch-textured[data-dividers="off"] .ch-tile-strip { display: none; }

/* Tweak: thinner */
.ch-textured[data-dividers="thin"] .ch-tile-strip { height: 28px; }
.ch-textured[data-dividers="thick"] .ch-tile-strip { height: 80px; }

/* ============================================
   4. SCRAPPY HERITAGE BAND — w/ 2 living portraits
   Override the original 50/50 grid. Photos sit
   loose, overlapping, slightly tilted. Title +
   text on the left, portraits collaged on the right.
   ============================================ */
.ch-heritage--scrappy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  min-height: 78vh;
  background: var(--ch-cream);
  padding: clamp(64px, 8vw, 120px) clamp(32px, 5vw, 96px);
  gap: clamp(32px, 5vw, 80px);
  position: relative;
}
/* paper grain over the heritage cream — slightly stronger than page linen */
.ch-heritage--scrappy::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(70,50,28,0.05) 0px, rgba(70,50,28,0.05) 1px,
      transparent 1px, transparent 3px),
    repeating-linear-gradient(0deg,
      rgba(70,50,28,0.04) 0px, rgba(70,50,28,0.04) 1px,
      transparent 1px, transparent 3px);
}
.ch-heritage--scrappy .ch-heritage__content,
.ch-heritage--scrappy .ch-heritage__portraits {
  position: relative;
  z-index: 1;
  background: transparent;
  padding: 0;
}

/* Portrait stage */
.ch-heritage__portraits {
  position: relative;
  height: clamp(440px, 56vw, 620px);
}

.ch-heritage__portraits-note {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  font-family: 'Caveat', var(--ch-font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  color: rgba(58,42,24,0.6);
  letter-spacing: 1px;
  pointer-events: none;
}

.ch-heritage__portraits-hint {
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ch-font-body);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(58,42,24,0.45);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 12px;
}
.ch-heritage__portraits-hint::before,
.ch-heritage__portraits-hint::after {
  content: ''; width: 22px; height: 1px; background: rgba(58,42,24,0.35);
}

/* Reuse album-photo card chrome from Our Story.
   We re-declare here so the homepage page is self-contained
   without needing the Our Story stylesheet. */
.ch-album-photo {
  position: absolute;
  background: #fff;
  padding: 14px 14px 56px;
  box-shadow:
    0 2px 4px rgba(60,40,20,0.18),
    0 24px 40px -12px rgba(60,40,20,0.45);
  transition:
    transform 0.55s cubic-bezier(0.25,0,0.25,1),
    box-shadow 0.5s ease;
  will-change: transform;
}
.ch-album-photo:hover {
  z-index: 10;
  box-shadow:
    0 4px 8px rgba(60,40,20,0.22),
    0 36px 60px -10px rgba(60,40,20,0.55);
}
.ch-album-photo__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #1a1a14;
}
.ch-album-photo__media img,
.ch-album-photo__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.4) saturate(0.8) contrast(0.97) brightness(0.97) hue-rotate(-8deg);
}
.ch-album-photo__media img {
  aspect-ratio: 4/5;
  transition: transform 4s cubic-bezier(0.25,0,0.25,1), filter 1.2s ease;
  transform-origin: center center;
}
.ch-album-photo__media video {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.ch-album-photo:hover .ch-album-photo__media video[data-loaded="true"] { opacity: 1; }
.ch-album-photo[data-fallback="kenburns"]:hover .ch-album-photo__media img {
  transform: scale(1.08) translate(-1.2%, -1.5%);
  filter: sepia(0.28) saturate(0.95) contrast(1.02) brightness(1.02) hue-rotate(-6deg);
}

.ch-album-photo__caption {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  text-align: center;
  font-family: var(--ch-font-display);
  font-style: italic; font-weight: 300;
  font-size: 14px; line-height: 1.4;
  color: #3a2a18;
  padding-top: 10px;
}
.ch-album-photo__caption .meta {
  display: block; margin-top: 4px;
  font-family: var(--ch-font-body);
  font-style: normal; font-size: 8.5px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(58,42,24,0.55);
}

.ch-album-photo__corner {
  position: absolute;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #2a2a1e 0%, #4a4030 50%, #2a2a1e 100%);
  opacity: 0.85;
}
.ch-album-photo__corner--tl { top: -3px; left: -3px;  clip-path: polygon(0 0, 100% 0, 0 100%); }
.ch-album-photo__corner--tr { top: -3px; right: -3px; clip-path: polygon(100% 0, 100% 100%, 0 0); }
.ch-album-photo__corner--bl { bottom: -3px; left: -3px;  clip-path: polygon(0 0, 100% 100%, 0 100%); }
.ch-album-photo__corner--br { bottom: -3px; right: -3px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.ch-album-tape {
  position: absolute;
  width: 92px; height: 24px;
  background: rgba(232,213,163,0.65);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* Two specific placements — hand-tossed, overlapping.
   lp1 (Mamá's side): top-left, larger, tilted left.
   lp2 (Papá's side): bottom-right, slightly smaller, tilted right.
   They overlap at center for that scrappy collage feel. */
.ch-album-photo--lp1 {
  top: 8%;
  left: 4%;
  width: clamp(220px, 40%, 320px);
  transform: rotate(-3.4deg);
}
.ch-album-photo--lp1:hover { transform: rotate(-1deg) scale(1.03) translateY(-4px); }
.ch-album-tape--lp1 {
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
}

.ch-album-photo--lp2 {
  bottom: 6%;
  right: 4%;
  width: clamp(240px, 44%, 340px);
  transform: rotate(2.8deg);
}
.ch-album-photo--lp2:hover { transform: rotate(0.5deg) scale(1.03) translateY(-4px); }
.ch-album-tape--lp2 {
  top: -10px; right: 18%;
  transform: rotate(8deg);
  width: 76px;
}

/* ============================================
   5. RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .ch-heritage--scrappy { grid-template-columns: 1fr; gap: 48px; }
  /* Stage height = (max card width × 5/4 aspect) + room for caption + tilt + tape.
     With max card width ~280px (40% of ~700px stage), card height ~ 350px image
     + 70px chrome ≈ 420px. Stack lp1 top-left and lp2 bottom-right with no
     vertical overlap so neither spills out of the stage. */
  .ch-heritage__portraits { height: clamp(640px, 96vw, 760px); }
  .ch-album-photo--lp1 {
    width: clamp(220px, 42%, 300px);
    left: 4%; top: 2%;
  }
  .ch-album-photo--lp2 {
    width: clamp(230px, 44%, 310px);
    right: 4%; bottom: 2%;
    top: auto;
  }
}
@media (max-width: 720px) {
  .ch-tile-strip { height: 40px; }
  .ch-heritage__portraits { height: clamp(560px, 130vw, 720px); }
  .ch-album-photo--lp1 { width: 62%; left: 4%; top: 2%; }
  .ch-album-photo--lp2 { width: 64%; right: 4%; bottom: 2%; }
  .ch-album-photo:hover { transform: rotate(0deg) !important; }
}
@media (max-width: 420px) {
  .ch-heritage__portraits { height: clamp(520px, 150vw, 680px); }
  .ch-album-photo--lp1 { width: 74%; }
  .ch-album-photo--lp2 { width: 76%; }
}

/* ============================================
   6. VIEW MORE BUTTON + LIGHTBOX GALLERY
   ============================================ */
.ch-heritage-gallery-cta {
  background: var(--ch-cream);
  text-align: center;
  padding: 0 clamp(24px, 6vw, 120px) clamp(64px, 8vw, 120px);
  position: relative;
}
.ch-heritage-gallery-cta::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(90deg, rgba(70,50,28,0.05) 0px, rgba(70,50,28,0.05) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(0deg, rgba(70,50,28,0.04) 0px, rgba(70,50,28,0.04) 1px, transparent 1px, transparent 3px);
}
.ch-heritage-gallery-btn {
  position: relative; z-index: 1;
  font-family: var(--ch-font-body);
  font-size: 10px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--ch-charcoal);
  background: transparent;
  border: 1px solid var(--ch-gold);
  padding: 16px 48px;
  cursor: pointer;
  transition: all 0.4s ease;
}
.ch-heritage-gallery-btn:hover {
  background: var(--ch-gold);
  color: var(--ch-charcoal);
}

/* Lightbox */
.ch-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
.ch-lightbox.open { opacity: 1; pointer-events: auto; }
.ch-lightbox__overlay {
  position: absolute; inset: 0;
  background: rgba(26,26,26,0.95);
  backdrop-filter: blur(12px);
}
.ch-lightbox__close {
  position: absolute; top: 24px; right: 32px; z-index: 2;
  font-size: 36px; color: rgba(245,240,230,0.6);
  background: none; border: none; cursor: pointer;
  transition: color 0.3s ease;
  font-family: var(--ch-font-body);
}
.ch-lightbox__close:hover { color: var(--ch-gold); }
.ch-lightbox__prev,
.ch-lightbox__next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  font-size: 48px; color: rgba(245,240,230,0.5);
  background: none; border: none; cursor: pointer;
  transition: color 0.3s ease;
  padding: 16px;
}
.ch-lightbox__prev { left: 16px; }
.ch-lightbox__next { right: 16px; }
.ch-lightbox__prev:hover,
.ch-lightbox__next:hover { color: var(--ch-gold); }
.ch-lightbox__stage {
  position: relative; z-index: 1;
  max-width: 85vw; max-height: 70vh;
  display: flex; align-items: center; justify-content: center;
}
.ch-lightbox__img {
  max-width: 100%; max-height: 70vh;
  object-fit: contain;
  filter: sepia(0.3) saturate(0.85) contrast(0.97) brightness(0.97);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transition: opacity 0.3s ease;
}
.ch-lightbox__counter {
  position: relative; z-index: 1;
  margin-top: 20px;
  font-family: var(--ch-font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(245,240,230,0.4);
}
.ch-lightbox__thumbs {
  position: relative; z-index: 1;
  display: flex; gap: 8px;
  margin-top: 20px;
  overflow-x: auto;
  padding: 4px;
  max-width: 90vw;
}
.ch-lightbox__thumb {
  width: 56px; height: 56px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.4;
  filter: sepia(0.4) saturate(0.8);
  border: 2px solid transparent;
  transition: opacity 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
}
.ch-lightbox__thumb:hover { opacity: 0.7; }
.ch-lightbox__thumb.active { opacity: 1; border-color: var(--ch-gold); }

@media (max-width: 768px) {
  .ch-lightbox__prev { left: 4px; font-size: 36px; padding: 8px; }
  .ch-lightbox__next { right: 4px; font-size: 36px; padding: 8px; }
  .ch-lightbox__stage { max-width: 95vw; }
  .ch-lightbox__thumb { width: 44px; height: 44px; }
}

/* ============================================
   7. FOOTER (compact mock)
   ============================================ */
.ch-footer { padding: 48px clamp(24px, 6vw, 120px) 28px; }
.ch-footer__logo img { height: 180px; opacity: 0.95; }