/* Gold-drip treatment copied verbatim from src/styles.css (homepage) */
:root{--gold-bright:#e8c877;--gold-deep:#93762f;--gold-grad:linear-gradient(175deg,#f0dfa4 0%,var(--gold) 55%,var(--gold-deep) 100%)}
/* ═══════════════ THE GOLD SPINE — dripping through the site ═══ */
#spine {
  position: fixed;
  left: clamp(10px, 2.2vw, 30px);
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 40;
  background: rgba(201, 162, 75, 0.1);
  pointer-events: none;
}
#spine .sp-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(201, 162, 75, 0.25), var(--gold) 70%, var(--gold-bright));
  transform: scaleY(0);
  transform-origin: top;
  box-shadow: 0 0 10px rgba(201, 162, 75, 0.5);
}
#spine .sp-drop {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 11px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 35%, #f4e5ae, var(--gold) 70%);
  border-radius: 50% 50% 60% 60% / 40% 40% 70% 70%;
  box-shadow: 0 0 12px rgba(232, 200, 119, 0.8);
  top: 0;
}
@media (max-width: 767px){#spine{display:none}}
.drip {
  position: relative;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
.drip::before {            /* the thread the bead runs down */
  content: '';
  position: absolute;
  left: 50%;
  top: -26px;
  width: 1px;
  height: 26px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(201, 162, 75, 0) 0%, var(--gold) 100%);
  opacity: 0.5;
}
.drip::after {             /* the bead: gathers, stretches, falls, fades */
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50% 50% 55% 55%;
  background: radial-gradient(circle at 35% 30%, #f6e6ac 0%, var(--gold) 45%, #8d6f2b 100%);
  box-shadow: 0 0 10px rgba(201, 162, 75, 0.55);
  animation: none;
}
@keyframes drip-fall {
  0%        { transform: translateY(0) scale(0.35, 0.35); opacity: 0 }
  18%       { transform: translateY(0) scale(1, 0.9);     opacity: 1 }
  32%       { transform: translateY(2px) scale(0.86, 1.28); opacity: 1 }   /* stretches before it lets go */
  70%       { transform: translateY(62px) scale(0.72, 1.1); opacity: 0.85 }
  100%      { transform: translateY(120px) scale(0.5, 0.9); opacity: 0 }
}
/* stagger them so the whole page never blinks in unison */
.drip:nth-of-type(2n)::after   { animation-delay: 1.7s }
.drip:nth-of-type(3n)::after   { animation-delay: 3.1s }
.drip:nth-of-type(4n)::after   { animation-delay: 0.8s }
@media (prefers-reduced-motion: reduce) {
  .drip::after { animation: none; opacity: 0.85 }
}
.drip.fall::after { animation: drip-fall 5.2s cubic-bezier(0.45, 0, 0.75, 0.35) 1; }
#gold-rain { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#gold-rain i {
  position: absolute;
  top: -8vh;
  width: 2px;
  height: 52px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(232, 200, 119, 0) 0%, rgba(232, 200, 119, 0.55) 70%, #f0dfa4 100%);
  filter: drop-shadow(0 0 6px rgba(201, 162, 75, 0.55));
  opacity: 0;
  animation: gold-rain-fall var(--dur, 11s) linear infinite;
  animation-delay: var(--delay, 0s);
}
#gold-rain i:nth-child(1) { left: 8px;  --dur: 11s;  --delay: 0s; }
#gold-rain i:nth-child(2) { left: 26px; --dur: 15s;  --delay: 6s;  height: 36px; }
#gold-rain i:nth-child(3) { left: 15px; --dur: 19s;  --delay: 12s; height: 44px; }
#gold-rain i:nth-child(4) { right: 9px;  --dur: 13s; --delay: 3s; }
#gold-rain i:nth-child(5) { right: 24px; --dur: 17s; --delay: 9s;  height: 38px; }
#gold-rain i:nth-child(6) { right: 16px; --dur: 21s; --delay: 15s; height: 46px; }
@keyframes gold-rain-fall {
  0%   { transform: translateY(0); opacity: 0; }
  6%   { opacity: 0.5; }
  86%  { opacity: 0.45; }
  100% { transform: translateY(118vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { #gold-rain { display: none; } }
@media (max-width: 767px){#gold-rain i:nth-child(2){left:12px}#gold-rain i:nth-child(5){right:11px}}
/* page application */
.top{position:relative}
.top + .drip{margin-top:0}
main h1{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tiles>section.tile,.tiles>.tile-intro{position:relative;border-top:2px solid transparent;border-image:var(--gold-grad) 1;border-image-width:2px 0 0 0;border-image-slice:1}
.tiles>section.tile>h2:first-child,.tiles>.tile-intro>h2:first-child{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;padding-bottom:.45rem}
.tiles>section.tile>h2:first-child::after,.tiles>.tile-intro>h2:first-child::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:1px;background:var(--gold-grad)}
.tiles>section.tile::before{content:"";position:absolute;left:28px;top:0;width:5px;height:9px;border-radius:50% 50% 55% 55%;background:radial-gradient(circle at 35% 30%,#f6e6ac 0%,var(--gold) 45%,#8d6f2b 100%);box-shadow:0 0 8px rgba(201,162,75,.55)}
section .drip,main>.drip{margin:1.6rem 0}


/* Looping, slow drips (homepage drip-fall keyframes, run continuously) */
@keyframes tile-drip{0%{transform:translateY(0) scale(.35);opacity:0}15%{transform:translateY(0) scale(1,.9);opacity:1}30%{transform:translateY(1px) scale(.86,1.28);opacity:1}75%{transform:translateY(46px) scale(.72,1.1);opacity:.7}100%{transform:translateY(80px) scale(.5,.9);opacity:0}}
@media (prefers-reduced-motion: no-preference){
  .drip::after{animation:drip-fall 6.5s cubic-bezier(.45,0,.75,.35) infinite}
  .drip:nth-of-type(2n)::after{animation-delay:1.7s}.drip:nth-of-type(3n)::after{animation-delay:3.1s}
  .tiles>section.tile::before{animation:tile-drip 7s cubic-bezier(.45,0,.75,.35) infinite}
  .tiles>section.tile:nth-child(2n)::before{animation-delay:2.3s;left:auto;right:34px}
  .tiles>section.tile:nth-child(3n)::before{animation-delay:4.6s;left:46%}
  .top::after{content:"";position:absolute;left:12%;bottom:-2px;width:6px;height:9px;border-radius:50% 50% 55% 55%;background:radial-gradient(circle at 35% 30%,#f6e6ac 0%,var(--gold) 45%,#8d6f2b 100%);box-shadow:0 0 8px rgba(201,162,75,.55);animation:tile-drip 8s cubic-bezier(.45,0,.75,.35) 1.2s infinite;opacity:0}
}
.tiles>section.tile{overflow:visible}

/* ── Flowing gold on the statue backgrounds ──
   .gf-img is sized/positioned exactly like the body background (cover, center top on desktop;
   auto max(100svh,640px) at 68% top on mobile) so the mask and drops sit on the statue's gold. */
.gflow{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;container-type:size;mix-blend-mode:screen}
.gflow .gf-img{position:absolute;top:0;height:max(100cqh,calc(100cqw*9/16));width:max(100cqw,calc(100cqh*16/9));left:calc((100cqw - max(100cqw,calc(100cqh*16/9)))/2)}
.gflow-male{opacity:0;transition:opacity .9s ease}
body.men .gflow-male{opacity:1}
body.men .gflow-female{opacity:0;transition:opacity .9s ease}
.gf-sheen{position:absolute;inset:0;overflow:hidden;-webkit-mask:var(--mask) 0 0/100% 100% no-repeat;mask:var(--mask) 0 0/100% 100% no-repeat;opacity:.55}
.gflow-female .gf-sheen{--mask:url(/assets/gold-mask-female.png?v=6)}
.gflow-male .gf-sheen{--mask:url(/assets/gold-mask-male.png?v=4);opacity:.4}
.gf-sheen::before{content:"";position:absolute;left:0;right:0;top:-100%;height:200%;
  background:repeating-linear-gradient(180deg,rgba(255,226,140,0) 0%,rgba(255,226,140,0) 9%,rgba(255,236,170,.85) 12.5%,rgba(255,214,110,0) 16%,rgba(255,226,140,0) 25%);
  animation:gf-flow 9s linear infinite;will-change:transform}
@keyframes gf-flow{from{transform:translateY(0)}to{transform:translateY(50%)}}
.gf-img i{position:absolute;left:var(--x);top:var(--y);width:3px;height:0}
.gf-img i::before{content:"";position:absolute;left:-1px;top:-4px;width:3px;height:26px;border-radius:2px;transform-origin:top;transform:scaleY(.15);
  background:linear-gradient(180deg,rgba(240,210,120,.9),#d4a947 70%,rgba(212,169,71,0));animation:gf-streak var(--t) ease-in-out var(--d) infinite}
.gf-img i::after{content:"";position:absolute;left:-2px;top:18px;width:5px;height:7px;border-radius:50% 50% 55% 55%;
  background:radial-gradient(circle at 35% 30%,#fff1bf 0%,#e0b85a 45%,#8d6f2b 100%);box-shadow:0 0 8px rgba(232,200,119,.7);opacity:0;
  animation:gf-drop var(--t) cubic-bezier(.45,0,.75,.35) var(--d) infinite}
@keyframes gf-streak{0%{transform:scaleY(.15);opacity:.0}15%{opacity:.85}55%{transform:scaleY(1);opacity:.85}80%{transform:scaleY(1);opacity:.5}100%{transform:scaleY(.15);opacity:0}}
@keyframes gf-drop{0%,50%{transform:translateY(0) scale(.4);opacity:0}58%{transform:translateY(2px) scale(1,1.2);opacity:1}100%{transform:translateY(90px) scale(.6,.9);opacity:0}}
@media (max-width:768px){
  .gflow{position:absolute;inset:0 0 auto 0;height:max(100svh,640px)}
  .gflow .gf-img{height:100cqh;width:calc(100cqh*16/9);left:calc((100cqw - 100cqh*16/9)*.68)}
  .gflow-female .gf-img{left:calc((100cqw - 100cqh*16/9)*.70)}
}
@media (prefers-reduced-motion: reduce){
  .gf-sheen::before,.gf-img i::before,.gf-img i::after{animation:none}
  .gf-sheen{display:none}
}

/* ── Molten-lava treatment for the female statue: slower, heavier, warmer ── */
.gflow-female .gf-sheen{opacity:.7}
.gflow-female .gf-sheen::before{
  background:repeating-linear-gradient(180deg,rgba(255,140,30,0) 0%,rgba(255,150,40,0) 7%,rgba(255,170,60,.55) 11%,rgba(255,226,150,.95) 13.5%,rgba(255,120,20,.45) 17%,rgba(255,140,30,0) 22%,rgba(255,140,30,0) 25%);
  animation:gf-flow 16s linear infinite}
.gflow-female .gf-sheen::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 55%,rgba(255,150,40,.9),rgba(255,110,10,.5) 60%,rgba(255,90,0,.25));animation:gf-pulse 5.5s ease-in-out infinite alternate;will-change:opacity}
@keyframes gf-pulse{from{opacity:.12}to{opacity:.45}}
.gflow-female .gf-img i::before{left:-3px;width:7px;height:42px;border-radius:4px 4px 6px 6px;
  background:linear-gradient(180deg,rgba(255,200,90,.95),#e3a33a 55%,#c06a12 85%,rgba(192,106,18,0));box-shadow:0 0 10px rgba(255,150,40,.55);
  animation:lava-streak var(--t) cubic-bezier(.5,0,.5,1) var(--d) infinite}
.gflow-female .gf-img i::after{left:-5px;top:30px;width:11px;height:13px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;
  background:radial-gradient(circle at 38% 32%,#fff3c4 0%,#ffbf4d 35%,#d9791a 70%,#7a3b08 100%);box-shadow:0 0 14px rgba(255,140,30,.75);
  transform-origin:50% 0;animation:lava-drop var(--t) cubic-bezier(.55,0,.8,.3) var(--d) infinite}
@keyframes lava-streak{0%{transform:scaleY(.1);opacity:0}12%{opacity:.95}60%{transform:scaleY(1);opacity:.95}85%{transform:scaleY(1.05);opacity:.6}100%{transform:scaleY(.1);opacity:0}}
@keyframes lava-drop{0%,45%{transform:translateY(0) scale(.3);opacity:0}55%{transform:translateY(0) scale(1,1);opacity:1}68%{transform:translateY(6px) scale(.85,1.6);opacity:1}74%{transform:translateY(14px) scale(.95,1.1);opacity:1}100%{transform:translateY(130px) scale(.7,.95);opacity:0}}
@media (prefers-reduced-motion: reduce){.gflow-female .gf-sheen::after,.gflow-female .gf-img i::before,.gflow-female .gf-img i::after{animation:none}}
@keyframes gf-pulse-m{from{opacity:.08}to{opacity:.3}}
@media (max-width:768px){
  .gflow-female .gf-sheen{opacity:.4}
  .gflow-female .gf-sheen::after{animation-name:gf-pulse-m}
}
@media (max-width:768px){.top a,main h1,main section:first-of-type p{text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.8)}}
@media (max-width:768px){main h1{text-shadow:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.95)) drop-shadow(0 0 10px rgba(0,0,0,.7))}main a.btn{text-shadow:none}}

/* ═══ Liquid gold (v8): wet metal, no bloom ═══
   Overrides the lava glow. Streams are glossy cylinders (dark edges, gold body,
   white specular core) with a highlight travelling down them; beads swell at the
   tip, stretch, detach, fall under gravity and splash. */
.gflow-female{mix-blend-mode:normal}
.gflow-female .gf-sheen{opacity:.5;mix-blend-mode:screen}
.gflow-female .gf-sheen::after{display:none}
.gflow-female .gf-sheen::before{
  background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 10%,rgba(255,248,225,.75) 11.2%,rgba(255,255,255,0) 12.6%,rgba(255,255,255,0) 25%);
  animation:gf-flow 7s linear infinite}
.lq{position:absolute;left:var(--x);top:var(--y);width:.34%;min-width:3px;height:var(--h);transform:translateX(-50%)}
.lq::before{content:"";position:absolute;inset:0;border-radius:0 0 40% 40%/0 0 8px 8px;transform-origin:50% 0;
  background:linear-gradient(90deg,#4a2f06 0%,#a8761c 22%,#f2cf6e 42%,#fffbe8 50%,#e9bd52 60%,#8a5d12 82%,#3a2404 100%);
  animation:lq-extend var(--t) cubic-bezier(.4,0,.6,1) var(--d) infinite}
.lq s{position:absolute;inset:0;overflow:hidden;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 6%,rgba(255,255,255,0) 14%) 0 0/100% 260% no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent 25%,#000 45%,#000 55%,transparent 75%);mask:linear-gradient(90deg,transparent 25%,#000 45%,#000 55%,transparent 75%);
  animation:lq-spec calc(var(--t)*.5) linear var(--d) infinite}
.lq u{position:absolute;left:50%;top:100%;width:230%;min-width:6px;aspect-ratio:.8;margin-left:-115%;border-radius:50% 50% 50% 50%/42% 42% 58% 58%;
  background:radial-gradient(circle at 36% 30%,#fffdf2 0%,#f6dc8a 14%,#d4a23a 45%,#8a5d12 78%,#4a2f06 100%);transform-origin:50% 0;
  animation:lq-bead var(--t) cubic-bezier(.5,0,.9,.5) var(--d) infinite}
.lq::after{content:"";position:absolute;left:50%;top:calc(100% + 110px);width:18px;height:5px;margin-left:-9px;border-radius:50%;
  border-top:1px solid rgba(246,220,138,.9);opacity:0;animation:lq-splash var(--t) ease-out var(--d) infinite}
@keyframes lq-extend{0%{transform:scaleY(.72)}55%{transform:scaleY(1)}100%{transform:scaleY(.72)}}
@keyframes lq-spec{from{background-position:0 160%}to{background-position:0 -60%}}
@keyframes lq-bead{0%{transform:translateY(-30%) scale(.35);opacity:0}10%{opacity:1}52%{transform:translateY(0) scale(1,1)}62%{transform:translateY(4px) scale(.82,1.5)}66%{transform:translateY(10px) scale(.9,1.15);opacity:1}86%{transform:translateY(110px) scale(.8,1.05);opacity:1}88%,100%{transform:translateY(112px) scale(.3);opacity:0}}
@keyframes lq-splash{0%,85%{opacity:0;transform:scale(.3)}88%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(1.6,1)}}
@media (prefers-reduced-motion: reduce){.lq::before,.lq s,.lq u,.lq::after{animation:none}.lq u{transform:none}.lq::after{display:none}}
/* no bloom: liquid, not light */
#gold-rain i{filter:none}
.drip::after,.tiles>section.tile::before,.top::after,#spine .sp-drop,#spine .sp-fill{box-shadow:none}
.drip::after,.tiles>section.tile::before,.top::after{background:radial-gradient(circle at 36% 30%,#fffdf2 0%,#f6dc8a 16%,#d4a23a 48%,#8a5d12 80%,#4a2f06 100%)}

/* organic streams: tapered, fading in from the source, gently swaying */
.lq{width:.26%;min-width:2.5px;opacity:.9;transform-origin:50% 0;animation:lq-sway calc(var(--t)*1.3) ease-in-out var(--d) infinite alternate;
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 22%);mask:linear-gradient(180deg,transparent 0%,#000 22%)}
.lq::before{clip-path:polygon(32% 0,68% 0,82% 70%,100% 92%,50% 100%,0 92%,18% 70%)}
.lq u{-webkit-mask:none;mask:none}
@keyframes lq-sway{from{transform:translateX(-50%) skewX(-1.2deg)}to{transform:translateX(-50%) skewX(1.2deg)}}
@media (prefers-reduced-motion: reduce){.lq{animation:none}}


/* v10 — subtle: still image + 3 fine slow drips on the neck/drape gold, faint shimmer */
.gflow-female .gf-sheen{opacity:.18}
.gflow-female .gf-sheen::before{animation-duration:14s}
.gflow-female .lq{width:.16%;min-width:1.5px;opacity:.85}
.gflow-female .lq u{width:200%;min-width:4px;margin-left:-100%}

/* v11 — male statue: graded to the female's taupe stone, same subtle treatment.
   .gf-img mirrors #bg-male sizing: auto 88vh anchored right 3% bottom (desktop),
   auto 70svh at 62% bottom (mobile). Always fixed, like #bg-male. */
.gflow-male{position:fixed;inset:0;height:auto}
.gflow-male .gf-img{height:88cqh;width:calc(88cqh*16/9);top:auto;bottom:0;left:calc((100cqw - 88cqh*16/9)*.97)}
.gflow-male .gf-sheen{opacity:.18}
.gflow-male .gf-sheen::before{animation-duration:14s}
.gflow-male .lq{width:.16%;min-width:1.5px;opacity:.85}
.gflow-male .lq u{width:200%;min-width:4px;margin-left:-100%}
@media (max-width:768px){
  .gflow-male{position:fixed;inset:0;height:auto}
  .gflow-male .gf-img{height:70cqh;width:calc(70cqh*16/9);top:auto;bottom:0;left:calc((100cqw - 70cqh*16/9)*.62)}
}