/* ═══════════════════════════════════════════════════════════════════════
   FIDA — project case-study pages
   Shared by all seven: MOZITTI, KHADERA, LALLA TEA, COOKRUNCHY, IMANELLE,
   FESPOTTE, VALENA LIVING. They use one Figma structure — a black title
   band, a gallery of shots, then the standard CTA and footer — so only the
   per-page crops and --stage-h differ.
   ═══════════════════════════════════════════════════════════════════════ */

.stage{background:var(--white)}

/* ── z-order · Figma children[0] paints first ─────────────────────────── */
.sec-gallery{z-index:1}
.sec-title  {z-index:2}
.sec-nav    {z-index:3}
.sec-cta    {z-index:4}
.sec-footer {z-index:5}

/* ── title band · 1440 × 411 · #000000 ───────────────────────────────── */
.sec-title{background:var(--ink)}
.f-mb60 {font:400 60px/72px var(--ff-banner)}     /* the project name      */
.f-i12xl{font:200 12px/14.42px var(--ff-sans)}    /* discipline + year     */
.f-i12l {font:300 12px/14.52px var(--ff-sans)}    /* the write-up          */
.rule-w {position:absolute;width:1px;background:var(--white)}  /* "Vector 9" */

/* ── the gallery ───────────────────────────────────────────────────────
   Every shot is a Figma STRETCH or FILL fill. The background-size and
   -position on each are computed from that shot's own imageTransform
   matrix, so the framing is Figma's, not a `cover` approximation.      */
.shot{position:absolute;background-repeat:no-repeat}

/* the navbar is a SOLID black bar on these pages */
.sec-nav{background:var(--ink);overflow:visible}
.sec-nav .logo-nav{position:absolute;display:block}

/* ── MOZITTI ─────────────────────────────────────────────────────────── */
.mozitti-1 {background-image:var(--img-mozitti-1); background-size:125.16% 147.72%;background-position:54.28% 49.91%}
.mozitti-2 {background-image:var(--img-mozitti-2); background-size:115.19% 135.95%;background-position:50.17% 50.08%}
.mozitti-3 {background-image:var(--img-mozitti-3); background-size:124.24% 146.63%;background-position:50.01% 49.91%}
.mozitti-4 {background-image:var(--img-mozitti-4); background-size:112.58% 132.88%;background-position:50.02% 64.94%}
.mozitti-5 {background-image:var(--img-mozitti-5); background-size:cover;background-position:center}
.mozitti-6 {background-image:var(--img-mozitti-6); background-size:cover;background-position:center}
.mozitti-7 {background-image:var(--img-mozitti-7); background-size:101.54% 119.84%;background-position:50.16% 41.83%}
.mozitti-8 {background-image:var(--img-mozitti-8); background-size:103.07% 121.65%;background-position:0.01% 31.43%}
.mozitti-9 {background-image:var(--img-mozitti-9); background-size:107.22% 126.54%;background-position:50.03% 82.18%}
.mozitti-10{background-image:var(--img-mozitti-10);background-size:103.07% 121.65%;background-position:0.01% 50.15%}
.mozitti-11{background-image:var(--img-mozitti-11);background-size:105.75% 124.82%;background-position:69.31% 35.26%}
.mozitti-12{background-image:var(--img-mozitti-12);background-size:100.99% 119.19%;background-position:49.79% 33.11%}
.mozitti-13{background-image:var(--img-mozitti-13);background-size:128.22% 151.33%;background-position:53.26% 55.16%}
.mozitti-14{background-image:var(--img-mozitti-14);background-size:166.41% 196.41%;background-position:45.5% 46.4%}

/* ── KHADERA · LALLA TEA · COOKRUNCHY · IMANELLE · FESPOTTE · VALENA ──
   Generated from each shot's own imageTransform. cookrunchy-7 carries a
   real 90° rotation, so it renders through an inner <i> with an exact
   translate + rotate rather than a background-position.               */
.khadera-1{background-image:var(--img-khadera-1);background-size:114.26% 113.96%;background-position:54.84% 50.67%}
.khadera-2{background-image:var(--img-khadera-2);background-size:120.09% 119.77%;background-position:54.2% 56.28%}
.khadera-3{background-image:var(--img-khadera-3);background-size:101.76% 163.73%;background-position:0% 43.18%}
.khadera-4{background-image:var(--img-khadera-4);background-size:115.03% 121.16%;background-position:40.24% 32.98%}
.khadera-5{background-image:var(--img-khadera-5);background-size:102.61% 121.11%;background-position:47.16% 26.32%}
.khadera-6{background-image:var(--img-khadera-6);background-size:118.56% 139.94%;background-position:49.6% 63.43%}
.lalla-1{background-image:var(--img-lalla-1);background-size:124.73% 153.81%;background-position:61.95% 32.59%}
.lalla-2{background-image:var(--img-lalla-2);background-size:contain;background-position:center}
.lalla-3{background-image:var(--img-lalla-3);background-size:127.08% 173.67%;background-position:60.35% 54.89%}
.lalla-4{background-image:var(--img-lalla-4);background-size:100.27% 100%;background-position:42.84% 0%}
.lalla-5{background-image:var(--img-lalla-5);background-size:100% 101.52%;background-position:0% 0.63%}
.lalla-6{background-image:var(--img-lalla-6);background-size:100% 99.99%;background-position:0% 50.01%}
.lalla-7{background-image:var(--img-lalla-7);background-size:101.9% 120.27%;background-position:1.81% 67.78%}
.lalla-8{background-image:var(--img-lalla-8);background-size:116.54% 114.12%;background-position:44.41% 49.46%}
.cookrunchy-1{background-image:var(--img-cookrunchy-1);background-size:126.78% 195.33%;background-position:42.15% 44.8%}
.cookrunchy-2{background-image:var(--img-cookrunchy-2);background-size:100.27% 100%;background-position:42.84% 0%}
.cookrunchy-3{background-image:var(--img-cookrunchy-3);background-size:100.44% 145.51%;background-position:47.95% 71.16%}
.cookrunchy-4{background-image:var(--img-cookrunchy-4);background-size:103.16% 158.94%;background-position:-2.03% 44.27%}
.cookrunchy-5{background-image:var(--img-cookrunchy-5);background-size:103.77% 159.89%;background-position:18.64% 33.45%}
.cookrunchy-6{background-image:var(--img-cookrunchy-6);background-size:107.42% 165.51%;background-position:23.72% 45.33%}
.cookrunchy-7{overflow:hidden;background:none}
.cookrunchy-7 i{position:absolute;display:block;transform-origin:0 0;background-size:100% 100%;background-repeat:no-repeat;background-image:var(--img-cookrunchy-7);left:522.57px;top:34.34px;width:367.02px;height:385.09px;transform:rotate(90deg)}
.imanelle-1{background-image:var(--img-imanelle-1);background-size:122.7% 120.12%;background-position:50% 100.28%}
.imanelle-2{background-image:var(--img-imanelle-2);background-size:100.27% 100%;background-position:42.84% 0%}
.imanelle-3{background-image:var(--img-imanelle-3);background-size:100% 144.88%;background-position:0% 74.37%}
.imanelle-4{background-image:var(--img-imanelle-4);background-size:108.67% 106.38%;background-position:20.35% 48.82%}
.imanelle-5{background-image:var(--img-imanelle-5);background-size:124.05% 103.38%;background-position:43.04% 100%}
.imanelle-6{background-image:var(--img-imanelle-6);background-size:119.4% 116.89%;background-position:9.09% 80.67%}
.imanelle-7{background-image:var(--img-imanelle-7);background-size:115.51% 115.21%;background-position:37.24% 100.72%}
.fespotte-1{background-image:var(--img-fespotte-1);background-size:173.7% 210.36%;background-position:47.28% 33.47%}
.fespotte-2{background-image:var(--img-fespotte-2);background-size:138.19% 153.38%;background-position:44.58% 59.28%}
.fespotte-3{background-image:var(--img-fespotte-3);background-size:101.05% 146.41%;background-position:0% 75.18%}
.fespotte-4{background-image:var(--img-fespotte-4);background-size:101.05% 131.19%;background-position:35.61% 50.26%}
.fespotte-5{background-image:var(--img-fespotte-5);background-size:105.78% 160.95%;background-position:73.45% 47.21%}
.fespotte-6{background-image:var(--img-fespotte-6);background-size:100.07% 186.41%;background-position:32.04% 49.94%}
.fespotte-7{background-image:var(--img-fespotte-7);background-size:100% 105.33%;background-position:0% 50.88%}
.fespotte-8{background-image:var(--img-fespotte-8);background-size:100% 105.33%;background-position:0% 50.88%}
.fespotte-9{background-image:var(--img-fespotte-9);background-size:100% 109.21%;background-position:0% 26.22%}
.valena-1{background-image:var(--img-valena-1);background-size:100.41% 121.6%;background-position:-30.28% 39.79%}
.valena-2{background-image:var(--img-valena-2);background-size:contain;background-position:center}
.valena-3{background-image:var(--img-valena-3);background-size:101.05% 146.41%;background-position:49.85% 62.68%}
.valena-4{background-image:var(--img-valena-4);background-size:99.95% 100.73%;background-position:418.98% 106.18%}
.valena-5{background-image:var(--img-valena-5);background-size:104.69% 191.87%;background-position:49.49% 84.52%}
.valena-6{background-image:var(--img-valena-6);background-size:99.95% 209.6%;background-position:100.01% -0.03%}
.valena-7{background-image:var(--img-valena-7);background-size:99.95% 209.6%;background-position:100.01% 95.57%}
.valena-8{background-image:var(--img-valena-8);background-size:100% 100.03%;background-position:0% -70.67%}
.valena-9{background-image:var(--img-valena-9);background-size:130.83% 106.6%;background-position:49.5% 63.24%}
.valena-10{background-image:var(--img-valena-10);background-size:104.29% 71.32%;background-position:50% 44.88%}

/* ── ASSET SLOTS ─────────────────────────────────────────────────────── */
:root{
  --img-mozitti-1:url('../assets/img/mozitti-1.jpg');
  --img-mozitti-2:url('../assets/img/mozitti-2.jpg');
  --img-mozitti-3:url('../assets/img/mozitti-3.jpg');
  --img-mozitti-4:url('../assets/img/mozitti-4.jpg');
  --img-mozitti-5:url('../assets/img/mozitti-5.jpg');
  --img-mozitti-6:url('../assets/img/mozitti-6.jpg');
  --img-mozitti-7:url('../assets/img/mozitti-7.jpg');
  --img-mozitti-8:url('../assets/img/mozitti-8.jpg');
  --img-mozitti-9:url('../assets/img/mozitti-9.jpg');
  --img-mozitti-10:url('../assets/img/mozitti-10.jpg');
  --img-mozitti-11:url('../assets/img/mozitti-11.jpg');
  --img-mozitti-12:url('../assets/img/mozitti-12.jpg');
  --img-mozitti-13:url('../assets/img/mozitti-13.jpg');
  --img-mozitti-14:url('../assets/img/mozitti-14.jpg');
  --img-khadera-1:url('../assets/img/khadera-1.jpg');
  --img-khadera-2:url('../assets/img/khadera-2.jpg');
  --img-khadera-3:url('../assets/img/khadera-3.jpg');
  --img-khadera-4:url('../assets/img/khadera-4.jpg');
  --img-khadera-5:url('../assets/img/khadera-5.png');
  --img-khadera-6:url('../assets/img/khadera-6.jpg');
  --img-lalla-1:url('../assets/img/lalla-1.jpg');
  --img-lalla-2:url('../assets/img/lalla-2.jpg');
  --img-lalla-3:url('../assets/img/lalla-3.jpg');
  --img-lalla-4:url('../assets/img/lalla-4.jpg');
  --img-lalla-5:url('../assets/img/lalla-5.jpg');
  --img-lalla-6:url('../assets/img/lalla-6.jpg');
  --img-lalla-7:url('../assets/img/lalla-7.jpg');
  --img-lalla-8:url('../assets/img/lalla-8.jpg');
  --img-cookrunchy-1:url('../assets/img/cookrunchy-1.jpg');
  --img-cookrunchy-2:url('../assets/img/cookrunchy-2.jpg');
  --img-cookrunchy-3:url('../assets/img/cookrunchy-3.jpg');
  --img-cookrunchy-4:url('../assets/img/cookrunchy-4.jpg');
  --img-cookrunchy-5:url('../assets/img/cookrunchy-5.jpg');
  --img-cookrunchy-6:url('../assets/img/cookrunchy-6.jpg');
  --img-cookrunchy-7:url('../assets/img/cookrunchy-7.jpg');
  --img-imanelle-1:url('../assets/img/imanelle-1.jpg');
  --img-imanelle-2:url('../assets/img/imanelle-2.png');
  --img-imanelle-3:url('../assets/img/imanelle-3.jpg');
  --img-imanelle-4:url('../assets/img/imanelle-4.png');
  --img-imanelle-5:url('../assets/img/imanelle-5.png');
  --img-imanelle-6:url('../assets/img/imanelle-6.jpg');
  --img-imanelle-7:url('../assets/img/imanelle-7.png');
  --img-fespotte-1:url('../assets/img/fespotte-1.jpg');
  --img-fespotte-2:url('../assets/img/fespotte-2.jpg');
  --img-fespotte-3:url('../assets/img/fespotte-3.jpg');
  --img-fespotte-4:url('../assets/img/fespotte-4.jpg');
  --img-fespotte-5:url('../assets/img/fespotte-5.jpg');
  --img-fespotte-6:url('../assets/img/fespotte-6.jpg');
  --img-fespotte-7:url('../assets/img/fespotte-7.jpg');
  --img-fespotte-8:url('../assets/img/fespotte-8.jpg');
  --img-fespotte-9:url('../assets/img/fespotte-9.jpg');
  --img-valena-1:url('../assets/img/valena-1.jpg');
  --img-valena-2:url('../assets/img/valena-2.jpg');
  --img-valena-3:url('../assets/img/valena-3.jpg');
  --img-valena-4:url('../assets/img/valena-4.jpg');
  --img-valena-5:url('../assets/img/valena-5.jpg');
  --img-valena-6:url('../assets/img/valena-6.jpg');
  --img-valena-7:url('../assets/img/valena-7.jpg');
  --img-valena-8:url('../assets/img/valena-8.jpg');
  --img-valena-9:url('../assets/img/valena-9.jpg');
  --img-valena-10:url('../assets/img/valena-10.jpg');
}