/* Home · (The studio) — approved prototype D "scroll strip" (studio-protos/proto-d.html).
   Section pins while you scroll; one strip of stacked photos + playing clips moves right -> left and passes under
   the text on the left. Classes are prefixed sd- (the research detail pages use .d-*). Never pure black: #111111. */
.sd{position:relative;z-index:2;background:var(--white);overflow-x:clip}
.sd-text{position:relative;z-index:3;display:flex;flex-direction:column}
.sd-text h2{font-size:min(var(--t-display),13vh)}
.sd .u-display .ind{display:inline-block;padding-left:1.15em}
.sd-copy p{max-width:32em;text-align:left;text-wrap:pretty}
.sd-copy p+p{margin-top:1.1em}
.sd-copy .btn{margin-top:clamp(1.6rem,2.6vw,2.4rem)}
.sd-bot{display:flex;justify-content:space-between;align-items:start;gap:1rem;border-top:1px solid var(--line);padding-top:.9rem}
.sd-bot p{margin:0}
.sd-pin{position:relative}
.sd-stage{position:relative}
.sd-stage:focus{outline:none}
.sd-track{display:flex;align-items:flex-start;width:max-content}
.sd-col{flex:none;display:flex;flex-direction:column;gap:var(--gv,14px)}
.sd-item{position:relative;min-width:0;margin:0}
.sd-pic{height:var(--h,300px);width:100%;overflow:hidden;background:var(--paper)}
.sd-item img,.sd-item video{width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.sd-item figcaption{display:flex;gap:.7rem;height:22px;padding-top:.5rem;color:var(--grey);white-space:nowrap;overflow:hidden}
.sd-item figcaption span{overflow:hidden;text-overflow:ellipsis}
.sd-item figcaption b{font-weight:500;color:var(--black)}
.sd-prog{display:none}
/* pinned (desktop + phone 'pin'): the stage holds still for the length of the strip */
.sd.is-pin .sd-pin,.sd.is-pinm .sd-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sd.is-pin .sd-stage,.sd.is-pinm .sd-stage{position:absolute;inset:0}
.sd.is-pin .sd-track,.sd.is-pinm .sd-track{position:absolute;left:0;top:0;will-change:transform;transform:translate3d(100vw,0,0)}
/* desktop: text panel on the left (5 of 12 columns) over the stage; photos pass under it */
.sd.is-pin .sd-text{--pw:calc(var(--m) + (100% - 2 * var(--m) - 11 * var(--gap)) * 5 / 12 + 4 * var(--gap));
  position:absolute;left:0;top:0;bottom:0;width:var(--pw);background:var(--white);
  padding:calc(var(--fx-h,4.5rem) + var(--glass-fade,0px) + clamp(.5rem,2vh,1.25rem)) clamp(1rem,2.4vw,2.5rem) clamp(1.25rem,4vh,2.5rem) var(--m);justify-content:space-between}
/* the photos pass under the text panel at a clean vertical edge on the grid line (was a white -> clear gradient that
   smeared dark photos into a grey smudge, Omran 27 Oct) */
.sd.is-pin .sd-mid p{font-size:clamp(1rem,min(1.32vw,2.5vh),1.36rem)}
.sd.is-pin .sd-mid .btn{margin-top:clamp(1.1rem,3vh,2.2rem)}
.sd.is-pin .sd-prog,.sd.is-pinm .sd-prog{display:flex;position:absolute;right:var(--m);bottom:clamp(1rem,4vh,2.2rem);align-items:center;gap:1rem;color:var(--grey);z-index:2}
.sd.is-pin .sd-prog{left:calc(var(--m) + (100% - 2 * var(--m) - 11 * var(--gap)) * 6 / 12 + 5 * var(--gap))}
.sd-bar{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.sd-bar i{position:absolute;inset:0;background:var(--black);transform-origin:0 0;transform:scaleX(0)}
.sd-cnt{color:var(--black);font-variant-numeric:tabular-nums}
/* phone / stacked: text first, then the strip */
.sd:not(.is-pin) .sd-text{padding:max(clamp(3rem,6vw,5rem),calc(var(--fx-h,3.75rem) + var(--glass-fade,0px) + 1rem)) var(--m) 2rem}
.sd:not(.is-pin) .sd-top{order:1}.sd:not(.is-pin) .sd-bot{order:2;margin:1.6rem 0 1.8rem}.sd:not(.is-pin) .sd-mid{order:3}
.sd.is-pinm .sd-prog{left:var(--m)}
/* swipe (reduced motion, PHONE_MODE 'swipe', or no JS) */
.sd.is-swipe .sd-stage,html:not(.js) .sd-stage{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;padding:1rem 0 3rem}
.sd.is-swipe .sd-track,html:not(.js) .sd-track{padding:0 var(--m);gap:14px}
.sd.is-swipe .sd-col{scroll-snap-align:start;scroll-margin-left:var(--m)}
html:not(.js) .sd-item{width:min(70vw,26rem)}
html:not(.js) .sd-pic{height:auto;aspect-ratio:var(--a)}
.sd-skip{position:absolute;left:var(--m);top:1rem;z-index:5}
.sd-skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0}
@media (max-width:767px){.sd .u-display .ind{padding-left:.9em}}
/* THE STUDIO clears the fixed glass bar (Omran 27 Oct: top of "THE" was hidden under it): the panel's top padding is the
   bar height (--fx-h, set by fixedbar.js) + air; anchor jumps land on the section top, and the heading itself also
   keeps a margin in case something scrolls straight to it */
.sd{scroll-margin-top:0}
/* pinned: "STUDIO" (indented) must end short of the panel edge where the photos pass under, so cap it by width too */
.sd.is-pin .sd-text h2{font-size:min(var(--t-display),13vh,7.1vw)}
#studio-h{scroll-margin-top:calc(var(--fx-h,4.5rem) + var(--glass-fade,0px) + 1rem)}

/* 27 Oct 2026: keep (Scroll) clear of the fixed bottom Árdh mark (centred on desktop, bottom right on phone) */
.sd.is-pin .sd-prog{padding-left:5rem}
.sd.is-pinm .sd-prog{right:calc(var(--m) + 5.5rem)}

/* 27 Oct 2026: Omran's portrait between THE STUDIO and the intro (his sketch: figure standing on a line). Square corners
   like every other photo here; the dark ground of the photo stays, no cut-out. Revert: studio.css.before-portrait */
.sd-portrait{margin:0;position:relative}
.sd-portrait picture{display:block}
.sd-portrait img{display:block;background:#111111;object-fit:cover}
/* pinned desktop: the panel is one screen tall, so the photo takes the free height between heading and copy (4:5, kept
   narrower than the column) and stands on a hairline that runs the full column width */
/* to make room, the pinned heading and copy step down a touch (13vh -> 11vh, 2.5vh -> 2.05vh caps; gaps tightened) */
.sd.is-pin .sd-text h2{font-size:min(var(--t-display),11vh,6.4vw)}
.sd.is-pin .sd-mid p{font-size:clamp(.95rem,min(1.26vw,2.05vh),1.3rem)}
.sd.is-pin .sd-mid .btn{margin-top:clamp(.9rem,2.2vh,1.8rem)}
.sd.is-pin .sd-mid{margin-bottom:clamp(1rem,2.8vh,2.2rem)}
.sd.is-pin .sd-portrait{flex:1 1 0;min-height:0;max-height:32vh;margin:clamp(.75rem,1.7vh,1.4rem) 0 clamp(.9rem,2vh,1.6rem);border-bottom:1px solid var(--line)}
.sd.is-pin .sd-portrait img{position:absolute;left:0;bottom:0;height:100%;width:auto;max-width:100%;aspect-ratio:4/5}
@media (max-height:620px){.sd.is-pin .sd-portrait{display:none}}
/* phone / stacked: heading, photo, then the (Land, earth.) row, whose top hairline is the line the figure stands on */
.sd:not(.is-pin) .sd-portrait{order:2;margin-top:1.4rem;width:min(84%,20rem)}
.sd:not(.is-pin) .sd-portrait img{width:100%;height:auto;aspect-ratio:4/5}
.sd:not(.is-pin) .sd-bot{order:3;margin-top:0}.sd:not(.is-pin) .sd-mid{order:4}

/* 27 Oct 2026 (Omran's sketch): the text panel is frosted glass. The photo strip passes UNDER the whole left column
   (heading, portrait, copy) and shows through heavily blurred with a light white tint; text and portrait float sharp on
   top. The glass's right edge is soft (feathered ~200px, Omran "more wider") and gently wavy, not a straight line: the glass layer runs ~260px
   past the panel and is masked by a solid gradient + a 330px-wide SVG strip (a blurred wavy path, tile 900px, seamless,
   repeats down). Photos also start right after the edge (studio.js L.u0). Revert: studio.css/.js.before-glassedge */
.sd.is-pin .sd-text{background:transparent}
.sd.is-pin .sd-text::before{content:"";position:absolute;z-index:-1;left:0;top:0;bottom:0;width:calc(100% + 260px);pointer-events:none;
  background:rgba(252,252,250,.76);background:color-mix(in srgb,var(--white) 76%,transparent);
  -webkit-backdrop-filter:blur(28px) saturate(1.05);backdrop-filter:blur(28px) saturate(1.05);
  -webkit-mask-image:linear-gradient(#111111,#111111),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='900' viewBox='0 0 330 900'%3E%3Cfilter id='f' x='-.5' y='-.5' width='2' height='2'%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3C/filter%3E%3Cpath d='M-200 -400 L166.4 -400 L165.5 -385 L164.4 -370 L163.0 -355 L161.3 -340 L159.4 -325 L157.2 -310 L154.9 -295 L152.6 -280 L150.3 -265 L148.3 -250 L146.6 -235 L145.4 -220 L144.7 -205 L144.6 -190 L145.3 -175 L146.5 -160 L148.4 -145 L150.8 -130 L153.7 -115 L156.7 -100 L159.9 -85 L163.0 -70 L166.0 -55 L168.6 -40 L170.8 -25 L172.5 -10 L173.7 5 L174.4 20 L174.7 35 L174.5 50 L174.1 65 L173.6 80 L172.9 95 L172.3 110 L171.8 125 L171.4 140 L171.3 155 L171.3 170 L171.6 185 L172.0 200 L172.4 215 L172.9 230 L173.3 245 L173.6 260 L173.8 275 L173.8 290 L173.6 305 L173.2 320 L172.7 335 L172.1 350 L171.4 365 L170.8 380 L170.1 395 L169.5 410 L169.0 425 L168.5 440 L168.0 455 L167.6 470 L167.0 485 L166.4 500 L165.5 515 L164.4 530 L163.0 545 L161.3 560 L159.4 575 L157.2 590 L154.9 605 L152.6 620 L150.3 635 L148.3 650 L146.6 665 L145.4 680 L144.7 695 L144.6 710 L145.3 725 L146.5 740 L148.4 755 L150.8 770 L153.7 785 L156.7 800 L159.9 815 L163.0 830 L166.0 845 L168.6 860 L170.8 875 L172.5 890 L173.7 905 L174.4 920 L174.7 935 L174.5 950 L174.1 965 L173.6 980 L172.9 995 L172.3 1010 L171.8 1025 L171.4 1040 L171.3 1055 L171.3 1070 L171.6 1085 L172.0 1100 L172.4 1115 L172.9 1130 L173.3 1145 L173.6 1160 L173.8 1175 L173.8 1190 L173.6 1205 L173.2 1220 L172.7 1235 L172.1 1250 L171.4 1265 L170.8 1280 L170.1 1295 L-200 1300Z' fill='black' filter='url(%23f)'/%3E%3C/svg%3E");
          mask-image:linear-gradient(#111111,#111111),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='900' viewBox='0 0 330 900'%3E%3Cfilter id='f' x='-.5' y='-.5' width='2' height='2'%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3C/filter%3E%3Cpath d='M-200 -400 L166.4 -400 L165.5 -385 L164.4 -370 L163.0 -355 L161.3 -340 L159.4 -325 L157.2 -310 L154.9 -295 L152.6 -280 L150.3 -265 L148.3 -250 L146.6 -235 L145.4 -220 L144.7 -205 L144.6 -190 L145.3 -175 L146.5 -160 L148.4 -145 L150.8 -130 L153.7 -115 L156.7 -100 L159.9 -85 L163.0 -70 L166.0 -55 L168.6 -40 L170.8 -25 L172.5 -10 L173.7 5 L174.4 20 L174.7 35 L174.5 50 L174.1 65 L173.6 80 L172.9 95 L172.3 110 L171.8 125 L171.4 140 L171.3 155 L171.3 170 L171.6 185 L172.0 200 L172.4 215 L172.9 230 L173.3 245 L173.6 260 L173.8 275 L173.8 290 L173.6 305 L173.2 320 L172.7 335 L172.1 350 L171.4 365 L170.8 380 L170.1 395 L169.5 410 L169.0 425 L168.5 440 L168.0 455 L167.6 470 L167.0 485 L166.4 500 L165.5 515 L164.4 530 L163.0 545 L161.3 560 L159.4 575 L157.2 590 L154.9 605 L152.6 620 L150.3 635 L148.3 650 L146.6 665 L145.4 680 L144.7 695 L144.6 710 L145.3 725 L146.5 740 L148.4 755 L150.8 770 L153.7 785 L156.7 800 L159.9 815 L163.0 830 L166.0 845 L168.6 860 L170.8 875 L172.5 890 L173.7 905 L174.4 920 L174.7 935 L174.5 950 L174.1 965 L173.6 980 L172.9 995 L172.3 1010 L171.8 1025 L171.4 1040 L171.3 1055 L171.3 1070 L171.6 1085 L172.0 1100 L172.4 1115 L172.9 1130 L173.3 1145 L173.6 1160 L173.8 1175 L173.8 1190 L173.6 1205 L173.2 1220 L172.7 1235 L172.1 1250 L171.4 1265 L170.8 1280 L170.1 1295 L-200 1300Z' fill='black' filter='url(%23f)'/%3E%3C/svg%3E");
  -webkit-mask-size:calc(100% - 329px) 100%,330px 900px;mask-size:calc(100% - 329px) 100%,330px 900px;
  -webkit-mask-position:0 0,100% 0;mask-position:0 0,100% 0;
  -webkit-mask-repeat:no-repeat,repeat-y;mask-repeat:no-repeat,repeat-y}
/* no backdrop-filter (old browsers): a nearly solid panel so the copy stays readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sd.is-pin .sd-text::before{background:rgba(252,252,250,.96)}}

/* 27 Oct 2026, live (approved from the phototest2 preview): Omran's mockup 27 Oct: a wide 2:1 test photo at 50% opacity under THE STUDIO,
   about half the text column wide; the hairline starts ~a quarter into the column (under the photo) and runs to the
   column's right edge. */
.sd .pt-wide img{background:transparent;opacity:.5}
.sd.is-pin .sd-portrait.pt-wide{flex:none;max-height:none;border-bottom:0;padding-bottom:6px;margin:clamp(.75rem,1.7vh,1.4rem) 0 clamp(.9rem,2vh,1.6rem)}
.sd.is-pin .sd-portrait.pt-wide::after{content:"";position:absolute;left:23%;right:0;bottom:0;height:1px;background:var(--line)}
.sd.is-pin .sd-portrait.pt-wide img{position:static;width:min(54%,60vh);height:auto;max-width:none;aspect-ratio:2/1}
.sd:not(.is-pin) .sd-portrait.pt-wide{width:100%}
.sd:not(.is-pin) .sd-portrait.pt-wide img{width:100%;height:auto;aspect-ratio:2/1}