/* Ifakara: film proportions stay intact. Scrolling changes the story, never the footage. */
.ifakara-page { --ib-accent:#d8ad91; background:#070909; color:#e9eeee; }
.ib-story { overflow:clip; }
.ib-story h1,.ib-story h2,.ib-story h3 { font-family:var(--body); font-weight:500; letter-spacing:-.065em; line-height:1.04; margin:0; }
.ib-story h2 { font-size:clamp(42px,6.3vw,96px); }
.ib-story em { color:var(--ib-accent); font-style:normal; }
.ib-story p,.ib-story figure { margin:0; }
.ib-story img { display:block; width:100%; height:auto; }
.ib-story video { display:block; width:100%; height:auto; background:#000; object-fit:contain; cursor:pointer; }
.ib-story button { cursor:pointer; }
.ib-hero { position:relative; background:#000; }
.ib-hero video { width:100%; aspect-ratio:16/9; }
.ib-heading { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:end; gap:25px; margin:0 var(--edge); }
.ib-heading p { font-size:12px; color:#a0acaa; line-height:1.6; }
.ib-scroll { position:relative; background:#090c0c; padding:80px 0; }
.ib-residency { background:#0b0e0e; }
.ib-film-frame { position:relative; background:#000; border-radius:4px; overflow:hidden; }
.ib-single-film { margin:40px var(--edge) 0!important; }
.ib-single-film video,.ib-wide-deck video { aspect-ratio:16/9; }
.ib-single-foot { display:flex; justify-content:space-between; margin:20px var(--edge) 0; color:#90a09c; font-size:11px; }
.ib-deck { margin:40px var(--edge) 0; }
.ib-film-card { margin:0 0 35px!important; }
.ib-film-card figcaption { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:16px 0 0; }
.ib-film-card h3 { font-size:18px; letter-spacing:-.035em; }
.ib-film-card figcaption>span { font-size:10px; color:#98a7a3; }
.ib-portrait-deck { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.ib-portrait-deck video { aspect-ratio:9/16; }
.ib-format svg { width:19px; height:24px; display:block; }
.ib-ambient,.ib-chapters { display:none; }
.ib-play { position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); width:58px; height:58px; display:grid; place-items:center; border:1px solid #ffffff70; background:#090d0dbc; color:#fff; backdrop-filter:blur(12px); border-radius:50%; cursor:pointer; }
.ib-play svg { width:24px; height:24px; }
.ib-load-message { position:absolute; left:20px; right:20px; bottom:20px; font-size:12px; text-align:center; color:#fff; pointer-events:none; }
.ib-play[hidden],.ib-sound[hidden] { display:none; }
.ib-interlude { position:relative; padding:120px var(--edge) 90px; display:grid; grid-template-columns:1.2fr 1fr; gap:60px 7%; align-items:center; background:#e0e5df; color:#18221f; }
.ib-interlude em { color:#61766b; }
.ib-photo { overflow:hidden; }
.ib-photo img { width:100%; aspect-ratio:16/9; object-fit:contain; }
.ib-photo-main { grid-row:1/3; }
.ib-interlude h2 { font-size:clamp(38px,5vw,76px); }
.ib-photo-small { width:78%; }
.ib-photo-small img { aspect-ratio:16/9; }
.ib-ending { padding:110px var(--edge); display:flex; align-items:end; justify-content:space-between; gap:40px; }
.ib-ending p { color:#94a49e; font-size:13px; line-height:1.8; }
.ib-ending a { display:flex; justify-content:space-between; gap:70px; align-items:center; margin-top:26px; padding:15px 0; border-bottom:1px solid #485a52; font-size:14px; }
.ib-ending a span { font-size:24px; }

.ib-enhanced .ib-scroll { padding:0; }
.ib-enhanced .ib-pin { position:sticky; top:0; height:100svh; padding:calc(var(--header) + 24px) 0 20px; display:flex; flex-direction:column; overflow:hidden; isolation:isolate; }
.ib-enhanced .ib-residency { height:205svh; }
.ib-enhanced .ib-ambient { position:absolute; inset:-8%; z-index:-1; display:block; pointer-events:none; }
.ib-ambient img { position:absolute; inset:0; height:100%; object-fit:cover; filter:blur(65px) saturate(.45); opacity:0; transition:opacity .8s; }
.ib-single-stage .ib-ambient img,.ib-ambient img.is-active { opacity:.22; }
.ib-ambient::after { content:""; position:absolute; inset:0; background:linear-gradient(#070b0bc2,#070b0b72 50%,#070b0bc2); }
.ib-enhanced .ib-heading h2 { font-size:clamp(34px,4.7vw,70px); }
.ib-enhanced .ib-single-film { flex:1; min-height:0; margin:28px var(--edge) 0!important; display:flex; align-items:center; justify-content:center; }
.ib-enhanced .ib-single-film .ib-film-frame { width:min(100%,calc((100svh - var(--header) - 200px)*16/9)); transform:scale(var(--ib-reveal,.92)); opacity:var(--ib-opacity,1); box-shadow:0 25px 80px #0005; }
.ib-enhanced .ib-single-foot { margin-top:18px; }
.ib-enhanced .ib-livelihoods { height:460svh; }
.ib-enhanced .ib-portraits { height:370svh; }
.ib-enhanced .ib-deck { position:relative; flex:1; min-height:0; width:100%; margin:26px 0 10px; perspective:1600px; }
.ib-enhanced .ib-film-card { position:absolute; left:50%; top:50%; margin:0!important; transform:translate3d(calc(-50% + var(--ib-x,0px)),-50%,var(--ib-z,0px)) rotateY(var(--ib-rotate,0deg)) scale(var(--ib-scale,1)); opacity:var(--ib-alpha,0); z-index:var(--ib-order,0); will-change:transform,opacity; pointer-events:none; }
.ib-enhanced .ib-film-card.is-active { pointer-events:auto; }
.ib-enhanced .ib-wide-deck .ib-film-card { width:min(calc(100% - var(--edge)*2),calc((100svh - var(--header) - 235px)*16/9),1320px); }
.ib-enhanced .ib-film-card .ib-film-frame { box-shadow:0 26px 75px #0006; }
.ib-enhanced .ib-film-card:not(.is-active) video { filter:brightness(.55); }
.ib-enhanced .ib-film-card video { transition:filter .35s; }
.ib-enhanced .ib-portrait-deck .ib-film-card { height:min(100%,740px,calc(88vw*16/9 + 45px)); aspect-ratio:9/17.3; display:flex; flex-direction:column; }
.ib-enhanced .ib-portrait-deck .ib-film-frame { flex:1; min-height:0; width:100%; }
.ib-enhanced .ib-portrait-deck video { width:100%; height:100%; object-fit:contain; }
.ib-enhanced .ib-portrait-deck figcaption { flex-shrink:0; min-height:42px; padding-top:12px; }
.ib-enhanced .ib-portrait-deck h3 { font-size:14px; }
.ib-enhanced .ib-chapters { display:flex; justify-content:center; gap:7px; margin:0; padding:0; flex-shrink:0; }
.ib-chapters button { border:0; background:none; width:42px; height:26px; padding:12px 3px; }
.ib-chapters button span { display:block; height:2px; background:#ffffff30; border-radius:3px; transition:background .35s; }
.ib-chapters button[aria-current="true"] span { background:var(--ib-accent); }
.ib-enhanced .ib-interlude { --ib-photo-shift:0px; }
.ib-enhanced .ib-photo-main { transform:translateY(var(--ib-photo-shift)); }
.ib-enhanced .ib-photo-small { transform:translateY(calc(var(--ib-photo-shift)*-.7)); }
.ib-sound { position:fixed; z-index:55; right:20px; bottom:20px; display:grid; place-items:center; width:46px; height:46px; padding:11px; border:1px solid #ffffff80; border-radius:50%; color:#fff; background:#050a09b8; backdrop-filter:blur(12px); cursor:pointer; }
.ib-sound svg { width:23px; height:23px; }
.ib-sound .ib-muted,.ib-sound.is-muted .ib-volume { display:none; }
.ib-sound.is-muted .ib-muted { display:block; }
.menu-open .ib-sound { display:none; }
body[data-ib-media] #toTop { opacity:0; pointer-events:none; }
@media(max-width:700px) {
    .ib-heading { align-items:start; }
    .ib-heading p { font-size:10px; max-width:130px; text-align:right; }
    .ib-interlude { padding:70px var(--edge); gap:35px 20px; }
    .ib-photo-main { grid-row:auto; grid-column:1/-1; }
    .ib-interlude h2 { font-size:clamp(29px,6vw,44px); }
    .ib-photo-small { width:100%; }
    .ib-ending { align-items:start; flex-direction:column; padding:80px var(--edge); }
    .ib-ending h2 { font-size:60px; }
}
@media(max-width:480px) {
    .ib-heading { display:block; }
    .ib-heading p { margin-top:12px; text-align:left; max-width:none; }
    .ib-enhanced .ib-heading h2 { font-size:35px; }
    .ib-enhanced .ib-wide-deck .ib-film-card { width:calc(100% - 32px); }
    .ib-film-card figcaption>span { font-size:9px; }
    .ib-film-card h3 { font-size:17px; }
    .ib-enhanced .ib-portrait-deck .ib-film-card { height:min(100%,calc(86vw*16/9 + 42px)); }
    .ib-portrait-deck { grid-template-columns:1fr; max-width:350px; margin-inline:auto; padding:0 20px; }
    .ib-enhanced .ib-portrait-deck { max-width:none; padding:0; }
    .ib-sound { width:42px; height:42px; padding:9px; }
    .ib-single-foot { font-size:9px; }
}
@media(max-height:540px) and (orientation:landscape) {
    .ib-enhanced .ib-pin { padding-top:calc(var(--header) + 10px); padding-bottom:8px; }
    .ib-enhanced .ib-heading { align-items:center; }
    .ib-enhanced .ib-heading h2 { font-size:26px; }
    .ib-enhanced .ib-heading h2 br { display:none; }
    .ib-enhanced .ib-heading p { margin:0; }
    .ib-enhanced .ib-wide-deck .ib-film-card { width:min(75vw,calc((100svh - var(--header) - 125px)*16/9)); }
    .ib-enhanced .ib-single-film .ib-film-frame { width:min(100%,calc((100svh - var(--header) - 100px)*16/9)); }
    .ib-enhanced .ib-deck,.ib-enhanced .ib-single-film { margin-top:12px!important; }
    .ib-film-card figcaption { padding-top:7px; }
    .ib-film-card h3 { font-size:12px; }
    .ib-chapters button { height:20px; padding:9px 3px; }
}
@media(prefers-reduced-motion:reduce) {
    .ib-story * { transition:none!important; }
}
/* Measure the space left below each heading, so films never collide with captions. */
@supports (width:1cqh) {
    .ib-enhanced .ib-deck,.ib-enhanced .ib-single-film { container-type:size; }
    .ib-enhanced .ib-single-film .ib-film-frame { width:min(100cqw,calc(100cqh*16/9)); }
    .ib-enhanced .ib-wide-deck .ib-film-card { width:min(calc(100cqw - var(--edge)*2),calc((100cqh - 42px)*16/9),1320px); }
    @media(max-width:480px) {
        .ib-enhanced .ib-wide-deck .ib-film-card { width:min(calc(100cqw - 32px),calc((100cqh - 42px)*16/9)); }
    }
}