/* ERYNDOR — 03 · Nuamaria: lake city left, family hierarchy right (rev 5)
   Rules honoured here:
   · v2 cutouts only, with their own 22% bottom fade
   · one soft DARK shadow per figure — no pale rim, no glow, no halo
   · every figure edge that touches its image boundary is masked away
   · name labels sit ON the figure at ~74% height, above the image, in the carved serif
   · city half and figure half are one graded image, no seam
*/

.fam{position:relative;background:#06080A;overflow:hidden;}
.fam__stage{position:relative;min-height:clamp(620px,102vh,1060px);overflow:hidden;
  isolation:isolate;}

/* ── city half, graded into the dark ─────────────────────────────────── */
.fam__city{position:absolute;inset:0;overflow:hidden;z-index:0;}
.fam__city img{position:absolute;left:0;top:0;width:114%;height:100%;object-fit:cover;
  object-position:32% 50%;filter:saturate(.86) contrast(1.02) brightness(.78);will-change:transform;}
/* one continuous grade: city dissolves sideways into the dark, and both ends are fogged */
.fam__fade{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(90deg,
      rgba(6,8,10,.34) 0%, rgba(6,8,10,.08) 16%, rgba(6,8,10,0) 32%,
      rgba(6,8,10,.3) 44%, rgba(6,8,10,.74) 56%, rgba(6,8,10,.94) 66%, #06080A 76%),
    linear-gradient(180deg,
      rgba(6,8,10,.72) 0%, rgba(6,8,10,.22) 14%, rgba(6,8,10,.02) 38%,
      rgba(6,8,10,.2) 66%, rgba(6,8,10,.72) 88%, #06080A 100%);}
/* a single atmospheric veil over the whole composition keeps both halves in one air */
.fam__air{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:
    radial-gradient(58% 44% at 24% 62%,rgba(150,178,184,.16),transparent 72%),
    radial-gradient(46% 40% at 72% 48%,rgba(120,146,152,.1),transparent 74%);}
.fam__vignette{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 46%,transparent 44%,rgba(4,6,8,.55) 84%,rgba(4,6,8,.9) 100%);}

.fam__head{position:absolute;z-index:6;left:var(--pad);top:clamp(44px,7vh,84px);max-width:min(420px,38%);}
.fam__head .label{margin-bottom:clamp(14px,2vh,22px);}
.fam__line{font-family:var(--serif);font-size:clamp(17px,1.75vw,26px);line-height:1.34;
  color:#E9E5DC;text-wrap:pretty;text-shadow:0 2px 30px rgba(0,0,0,.92);}

/* ── the family: diagonal march left→right, highest→lowest ───────────── */
.fam__figures{position:absolute;z-index:3;right:calc(var(--pad) * .5);top:clamp(38px,6.5vh,74px);
  width:min(57%,800px);height:calc(100% - clamp(56px,9vh,110px));min-height:clamp(400px,64vh,720px);}

.famp{margin:0;position:absolute;bottom:0;width:100%;}

/* the mask pair (horizontal here, vertical on the img) dissolves every edge */
.famp__ph{display:block;position:relative;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,1) 7%,rgba(0,0,0,1) 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,1) 7%,rgba(0,0,0,1) 93%,transparent 100%);
  /* one soft dark shadow only — the shadow follows the masked silhouette */
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.75));}
.famp__ph img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,1) 7%,rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,1) 7%,rgba(0,0,0,1) 100%);}

/* names ON the figures: carved serif, wide tracking, bone, dark shadow */
.famp figcaption{position:absolute;z-index:9;left:50%;top:74%;
  transform:translateX(-50%);
  font-family:var(--serif);font-size:clamp(11px,1.05vw,17px);font-weight:400;
  letter-spacing:.42em;text-indent:.42em;text-transform:none;white-space:nowrap;
  color:#D9D3C7;pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 6px 26px rgba(0,0,0,.9),0 0 40px rgba(0,0,0,.7);}

/* hierarchy by brightness and position only */
.famp--oltia{left:0%;bottom:33%;width:45%;}
.famp--oltia .famp__ph{z-index:1;}
.famp--oltia .famp__ph img{filter:brightness(1.07) saturate(.9);}

.famp--jufa{left:22%;bottom:19%;width:41%;}
.famp--jufa .famp__ph{z-index:2;}
.famp--jufa .famp__ph img{filter:brightness(.99) saturate(.88);}

.famp--ontoh{left:46%;bottom:7%;width:37%;}
.famp--ontoh .famp__ph{z-index:3;}
.famp--ontoh .famp__ph img{filter:brightness(.9) saturate(.84);}

.famp--ramiz{left:69%;bottom:0%;width:32%;}
.famp--ramiz .famp__ph{z-index:4;}
.famp--ramiz .famp__ph img{filter:brightness(.78) saturate(.78);}
.famp--ramiz figcaption{opacity:.82;}

.famp--jufa figcaption{opacity:.94;}
.famp--ontoh figcaption{opacity:.88;}

/* shared floor fog, under the figures — the city and the family land in it together */
.fam__fog{position:absolute;left:0;right:0;bottom:0;height:clamp(130px,24vh,260px);z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,10,0) 0%,rgba(7,10,12,.55) 46%,#06080A 84%),
             radial-gradient(74% 100% at 68% 100%,rgba(140,170,176,.12),transparent 74%);}

/* ── mobile: city above, dissolving down into the same diagonal line ──── */
[data-mode="mobile"] .fam__stage{min-height:0;display:flex;flex-direction:column;}
[data-mode="mobile"] .fam__city{position:relative;height:40vh;flex:none;}
[data-mode="mobile"] .fam__city img{width:100%;object-position:50% 46%;}
[data-mode="mobile"] .fam__fade{background:
  linear-gradient(180deg,rgba(6,8,10,.88) 0%,rgba(6,8,10,.2) 20%,rgba(6,8,10,.22) 54%,#06080A 92%);}
[data-mode="mobile"] .fam__head{position:relative;left:auto;top:auto;max-width:none;
  padding:22px 18px 0;z-index:6;}
[data-mode="mobile"] .fam__line{font-size:16.5px;}
[data-mode="mobile"] .fam__figures{position:relative;right:auto;top:auto;width:auto;
  height:56vh;min-height:320px;margin:22px 6px 0 0;}
[data-mode="mobile"] .famp__ph{filter:drop-shadow(0 16px 26px rgba(0,0,0,.75));}
[data-mode="mobile"] .famp figcaption{font-size:9px;letter-spacing:.3em;text-indent:.3em;top:72%;}
[data-mode="mobile"] .famp--oltia{left:0%;bottom:31%;width:51%;}
[data-mode="mobile"] .famp--jufa{left:20%;bottom:17%;width:46%;}
[data-mode="mobile"] .famp--ontoh{left:45%;bottom:6%;width:41%;}
[data-mode="mobile"] .famp--ramiz{left:68%;bottom:0%;width:34%;}
[data-mode="mobile"] .fam__fog{height:130px;}
[data-mode="mobile"] .fam__air{opacity:.35;}