/* Final design refinement: studio details, card choreography, editorial layouts. */
@font-face{font-family:'Plex Arabic';src:url('../fonts/plex-arabic-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Arabic';src:url('../fonts/plex-arabic-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Plex Arabic';src:url('../fonts/plex-arabic-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
[lang=ar]{font-family:'Plex Arabic',sans-serif!important;letter-spacing:0!important;line-height:1.7;font-weight:500}
.programme-names strong:has([lang=ar]){font-size:clamp(1.3rem,2.3vw,2.3rem)}
.media-piece figcaption [lang=ar]{font-size:1.15em;display:inline-block;vertical-align:baseline}
.original-title{font-size:1.35rem}
.studio-mark{display:inline-block;width:70px;height:70px;background:currentColor;mask:var(--mark) center/contain no-repeat;-webkit-mask:var(--mark) center/contain no-repeat;flex:none}
.mark-frames{--mark:url('../work/marks/frames.svg')}.mark-tiles{--mark:url('../work/marks/tiles.svg')}.mark-loop{--mark:url('../work/marks/loop.svg')}
.intro h1{font-size:clamp(2.3rem,4.2vw,5rem);width:auto;max-width:440px;bottom:110px;line-height:1.03;letter-spacing:-.06em}
.intro h1>span:first-child{max-width:none;line-height:1.03}
.intro h1 em{display:block;font-size:1.23em;line-height:.98;letter-spacing:-.05em;margin:6px 0 0 3.7vw}
.intro .hero-mark{position:absolute;left:0;top:-55px;width:42px;height:42px;color:var(--cream);transform:rotate(-6deg)}
.intro-shade{background:linear-gradient(0deg,#17120788,transparent 45%),linear-gradient(90deg,#160d072a,transparent 45%)}
.vision-mark{width:100px;height:100px;color:var(--orange);transform:translateY(calc(var(--scene,0)*-10px))}
.media-piece{perspective:1000px;isolation:isolate}
.card-surface{position:relative;transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--lift,0px)) scale(var(--zoom,1));transform-origin:center;transition:transform .45s cubic-bezier(.18,.75,.25,1),box-shadow .4s;backface-visibility:hidden}
.media-piece.is-hovered{z-index:12!important}
.media-piece.is-hovered .card-surface{transition:transform .16s ease-out;box-shadow:0 30px 65px #0003}
.curated-card{padding:0!important;background:transparent;box-shadow:none}
.curated-card .card-surface{background:#f1efe8;color:#161b16;padding:6px;box-shadow:0 24px 50px #0004}
.curated-card figcaption{padding:0 5px 6px}
.art-edge{position:absolute;right:3%;bottom:-30px;display:flex;align-items:center;gap:24px;font-size:.64rem;letter-spacing:.06em;border-bottom:1px solid currentColor;padding:9px 0;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .3s;pointer-events:none}
.art-edge>span{font-size:1.4rem;line-height:1}
.project-art:hover .art-edge,.project-art:focus-visible .art-edge{opacity:.8;transform:translateY(0)}
.curated-art.all-portrait .card-1{width:20%;left:16%;top:-15%}
.curated-art.all-portrait .card-2{width:23%;left:40%;top:-21%}
.curated-art.all-portrait .card-3{width:20%;left:68%;top:-5%}
.case-hero-media{overflow:visible;clip-path:none;transform:none}
.opening-board{position:relative;margin:15px 0 0;perspective:1200px}
.opening-films{display:grid;grid-template-columns:1.5fr 1fr;gap:25px;align-items:center;padding:10px 10px 35px}
.opening-films .piece-1{grid-row:1/3;transform:rotate(-3deg);z-index:2}
.opening-films .piece-2{width:88%;margin-left:auto;transform:rotate(5deg)}
.opening-films .piece-3{width:92%;margin-left:4%;transform:rotate(-3deg)}
.opening-board .media-window{box-shadow:0 24px 60px #0003}
.opening-portraits{display:flex;align-items:center;justify-content:center;gap:4vw;padding:40px 7vw 60px;background:transparent;min-height:0}
.opening-portraits .media-piece{width:29%;max-width:310px}
.opening-portraits .piece-1{transform:rotate(-9deg) translateY(25px)}
.opening-portraits .piece-2{transform:rotate(2deg) translateY(-20px);z-index:2}
.opening-portraits .piece-3{transform:rotate(10deg) translateY(35px)}
.case-enter{position:relative;right:auto;bottom:auto;width:auto;height:auto;border-radius:0;background:none;color:inherit;display:flex;flex-direction:row-reverse;justify-content:flex-start;gap:20px;font-size:1.3rem;max-width:fit-content;margin:15px 0 0 auto;border-bottom:1px solid currentColor;padding-bottom:10px}
.case-enter span{font-size:.7rem;letter-spacing:.025em}.case-enter:hover{transform:translateY(3px)}
.case-opening{padding-bottom:45px}.case-opening-top>.label:last-child{opacity:.45}
/* Each chapter is composed to suit its material. */
.storyboard-chapter .chapter-media{display:grid;grid-template-columns:repeat(12,1fr);gap:28px 30px;align-items:start;padding:20px 2vw 30px}
.storyboard-chapter .piece-1{grid-column:2/9;grid-row:1/3;transform:rotate(-3deg);z-index:3}
.storyboard-chapter .piece-2{grid-column:9/13;grid-row:1;transform:rotate(7deg);margin-top:5%}
.storyboard-chapter .piece-3{grid-column:1/6;grid-row:3;transform:rotate(-6deg);margin-top:-10%}
.storyboard-chapter .piece-4{grid-column:7/12;grid-row:3;transform:rotate(4deg);margin-top:-2%}
.storyboard-chapter .card-surface{background:#f8f5ed;padding:7px;box-shadow:0 20px 50px #0002}
.storyboard-chapter figcaption{padding:0 6px 6px}
.sequence-chapter .chapter-media{display:grid;grid-template-columns:1fr 1fr;gap:42px 5vw;padding-top:20px}
.sequence-chapter .piece-1{width:94%}.sequence-chapter .piece-2{margin-top:22%;transform:rotate(3deg)}
.sequence-chapter .piece-3{width:88%;margin-left:8%;transform:rotate(-3deg)}
.sequence-chapter .piece-4{margin-top:22%;width:90%}
.triptych-chapter .chapter-media{display:grid;grid-template-columns:repeat(12,1fr);gap:30px;align-items:start;padding:20px 0 30px}
.triptych-chapter .piece-1{grid-column:1/9;grid-row:1/3;transform:rotate(-2deg)}
.triptych-chapter .piece-2{grid-column:9/13;grid-row:1;transform:rotate(6deg);margin-top:10%;z-index:2}
.triptych-chapter .piece-3{grid-column:7/12;grid-row:3;margin-top:-15%;transform:rotate(-5deg);z-index:3}
.triptych-chapter .card-surface{box-shadow:0 25px 55px #0003}
.offset-chapter .chapter-media{display:grid;grid-template-columns:1.5fr 1fr;gap:4vw;align-items:start;padding:10px 0 50px}
.offset-chapter .piece-1{transform:rotate(-3deg)}
.offset-chapter .piece-2{margin-top:40%;transform:rotate(6deg)}
.split-chapter .chapter-media{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:start;padding-top:20px}
.split-chapter .piece-1{margin-top:10%}.split-chapter .piece-2{transform:translateY(-15px)}
.editorial-chapter .chapter-copy p{font-size:.94rem}
.editorial-chapter .chapter-media{display:grid;grid-template-columns:repeat(12,1fr);gap:36px 3vw;align-items:start;padding-top:15px}
.editorial-chapter .piece-1{grid-column:1/6;grid-row:1;transform:rotate(-4deg);z-index:2}
.editorial-chapter .piece-2{grid-column:7/11;grid-row:1/3;transform:rotate(4deg);margin-top:18%}
.editorial-chapter .piece-3{grid-column:2/7;grid-row:3/5;transform:rotate(-3deg);margin-top:-10%;z-index:3}
.editorial-chapter .piece-4{grid-column:1/5;grid-row:2;transform:rotate(2deg)}
.editorial-chapter .piece-5{grid-column:8/12;grid-row:3/5;transform:rotate(5deg)}
.editorial-chapter .card-surface{padding:7px;background:#faf8f1;box-shadow:0 25px 55px #0002}
.editorial-chapter figcaption{padding:0 5px 5px}
.designboard-chapter .chapter-media{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:start;gap:25px;padding:35px 0 65px}
.designboard-chapter .piece-1{transform:rotate(-6deg);margin-top:25%}
.designboard-chapter .piece-2{transform:rotate(2deg)}
.designboard-chapter .piece-3{transform:rotate(7deg);margin-top:40%}
.designboard-chapter .card-surface{padding:6px;background:#eee8d7;color:#302021;box-shadow:0 25px 60px #0003}
.designboard-chapter figcaption{padding:0 5px 5px}
/* Studio contact and places. */
.contact-studio{background:var(--cream);color:var(--ink);padding:70px var(--pad) 75px;min-height:100svh}
.contact-heading{display:flex;align-items:center;justify-content:space-between;gap:40px;margin:65px 0}
.contact-heading h1{font:500 clamp(3.5rem,8vw,10rem)/1.01 'DM Sans',sans-serif;letter-spacing:-.07em;margin:0}
.contact-heading h1 em{font-family:Georgia,serif;font-weight:400;color:var(--orange)}
.contact-mark{width:14vw;height:14vw;color:var(--orange);transform:rotate(-12deg);margin-right:4vw}
.contact-project{display:grid;grid-template-columns:1fr 1.15fr;column-gap:7vw;align-items:center;margin-bottom:75px}
.contact-project>p:first-child{font-size:1rem;line-height:1.65;max-width:390px;color:#676b60}
.project-start{display:flex;align-items:center;justify-content:space-between;gap:24px;border:0;border-bottom:1px solid #171c17;background:none;color:var(--ink);padding:25px 0;font:500 clamp(1.3rem,2.7vw,3rem)/1.2 'DM Sans',sans-serif;letter-spacing:-.04em;text-align:left;min-height:105px}
.copy-icon{border:1px solid #171c1766;border-radius:50%;width:55px;height:55px;display:grid;place-items:center;font-size:1.8rem;flex:none;transition:background .3s,transform .3s}
.project-start:hover .copy-icon{background:var(--orange);border-color:var(--orange);transform:rotate(45deg)}
.project-start.copied .copy-icon{background:#c0e7d5;transform:none}.project-start.copied .copy-label{font-size:.8em}
.copy-hint,.copy-status{grid-column:2;font-size:.72rem;line-height:1.5;color:#676b60;margin:13px 0 0}
.copy-status{min-height:1.5em;color:#235845}
.contact-direct{border-top:1px solid #1113;padding-top:30px;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:25px;align-items:start}
.contact-direct>a{font-size:clamp(1rem,1.8vw,1.7rem);letter-spacing:-.03em;white-space:nowrap;border-bottom:1px solid #1115;padding-bottom:8px;width:fit-content}
.contact-direct>span:last-child{font-size:.8rem;line-height:1.5;justify-self:end;color:#676b60}
.studio-locations{padding:85px var(--pad);background:#e5e1d7;color:var(--ink)}
.studio-locations h2{font:500 clamp(3rem,5.6vw,6rem)/1.08 'DM Sans',sans-serif;letter-spacing:-.06em;margin:45px 0 60px}
.studio-locations h2 em{font-family:Georgia,serif;font-weight:400}
.location-pair{display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.location-pair article{border-top:1px solid #1114;padding:28px 0 0}
.location-pair h3{font:500 clamp(2rem,3.8vw,4rem)/1.08 'DM Sans',sans-serif;letter-spacing:-.05em;margin:35px 0 25px}
.location-pair p{font-size:.95rem;line-height:1.6;max-width:390px;color:#676b60}
/* A working studio clock in each location, sourced from the device clock. */
.studio-footer{display:block;padding:65px var(--pad) 30px}
.footer-top{display:flex;justify-content:space-between;align-items:start;gap:35px;padding-bottom:55px}
.footer-top img{width:145px}
.footer-invitation{display:flex;flex-direction:column;gap:18px;color:var(--cream)}
.footer-invitation .label{opacity:.5;font-size:.6rem}.footer-invitation>a{font-size:clamp(1.15rem,2vw,2rem);letter-spacing:-.04em}
.footer-invitation>a>span{display:inline-block;margin-left:30px;color:var(--orange)}
.studio-clocks{display:grid;grid-template-columns:1fr 1fr .65fr;gap:5vw;padding:32px 0 40px;border-top:1px solid #ffffff21}
.clock-label{display:flex;align-items:center;gap:9px;font-size:.7rem;color:#d3d7ca}
.clock-label>.label{margin-left:auto;opacity:.4;font-size:.5rem}.live-dot{width:5px;height:5px;border-radius:50%;background:var(--orange)}
.clock-time{display:block;font:400 clamp(2.5rem,4.9vw,6rem)/1.2 'DM Sans',sans-serif;letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--cream);margin:22px 0 12px}
.clock-date{display:block;font-size:.64rem;letter-spacing:.035em;opacity:.6}
.footer-signature{padding-left:15px;align-self:center}.footer-signature .studio-mark{width:54px;height:42px;color:var(--orange)}
.footer-signature p{font-size:.75rem;line-height:1.5;margin:14px 0 0}
.footer-base{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid #ffffff21;padding-top:25px;font-size:.62rem}
@media(min-width:901px) and (max-height:760px){
 .curated-art.all-portrait .card-1{width:16%;left:20%;top:-15%}.curated-art.all-portrait .card-2{width:18%;left:41%;top:-22%}.curated-art.all-portrait .card-3{width:16%;left:66%;top:-6%}.art-edge{bottom:-65px;right:0}.intro h1{font-size:3.7vw;bottom:100px}.intro .hero-mark{width:32px;height:32px;top:-43px}
}
@media(max-width:900px){
 .intro h1{font-size:clamp(2.6rem,5.5vw,4.5rem);bottom:115px}.intro h1 em{margin-left:3vw}.curated-art.all-portrait .card-1{width:25%;left:5%}.curated-art.all-portrait .card-2{width:29%;left:35%}.curated-art.all-portrait .card-3{width:25%;left:69%}.art-edge{display:none}.opening-films{gap:16px}.opening-portraits{padding:35px 3vw 55px;gap:5vw}.opening-portraits .media-piece{width:29%}.storyboard-chapter .chapter-media{gap:20px}.sequence-chapter .chapter-media{gap:30px}.triptych-chapter .chapter-media{gap:20px}.editorial-chapter .chapter-media{gap:26px 22px}.contact-project{column-gap:35px}.contact-direct{grid-template-columns:1fr 1fr}.contact-direct>a{grid-column:2}.contact-direct>span:last-child{grid-column:2;justify-self:start}.studio-clocks{grid-template-columns:1fr 1fr}.footer-signature{display:none}.clock-time{font-size:6vw}.footer-base>span:nth-child(2){display:none}
}
@media(max-width:600px){
 .intro h1{font-size:2.15rem;left:20px;bottom:125px;max-width:260px;line-height:1.03;width:auto}.intro h1 em{font-size:1.25em;margin:4px 0 0 30px;line-height:1}.intro .hero-mark{width:32px;height:32px;top:-42px}.vision-mark{width:65px;height:65px}.curated-art.all-portrait .card-1{width:33%;left:-5%;top:-1%}.curated-art.all-portrait .card-2{width:40%;left:28%;top:-9%}.curated-art.all-portrait .card-3{width:33%;left:72%;top:5%}.curated-card .card-surface{padding:4px}.curated-card figcaption{padding:0 2px 3px}.case-opening-top>.label:last-child{display:none}.case-opening{padding-bottom:35px}.opening-films{grid-template-columns:1.25fr 1fr;gap:14px;padding:20px 4px 15px}.opening-films .piece-1{grid-column:1/-1;grid-row:1;width:93%;margin:auto;transform:rotate(-3deg)}.opening-films .piece-2{grid-column:1;grid-row:2;width:100%;margin:0;transform:rotate(4deg)}.opening-films .piece-3{grid-column:2;grid-row:2;width:100%;margin:12% 0 0;transform:rotate(-5deg)}.opening-portraits{padding:25px 6px 40px;gap:10px;margin:0 -6px}.opening-portraits .media-piece{width:33%}.opening-portraits .piece-1{transform:rotate(-8deg) translateY(14px)}.opening-portraits .piece-2{transform:rotate(2deg) translateY(-5px)}.opening-portraits .piece-3{transform:rotate(9deg) translateY(20px)}.case-enter{margin-top:22px;font-size:1.1rem}.case-enter span{font-size:.62rem}.storyboard-chapter .chapter-media{grid-template-columns:1fr 1fr;gap:26px 15px;padding:10px 0 15px}.storyboard-chapter .piece-1{grid-column:1/-1;grid-row:1;width:90%;margin:auto;transform:rotate(-3deg)}.storyboard-chapter .piece-2{grid-column:1;grid-row:2;margin:10px 0 0;transform:rotate(-5deg)}.storyboard-chapter .piece-3{grid-column:2;grid-row:2;margin:25px 0 0;transform:rotate(5deg)}.storyboard-chapter .piece-4{grid-column:1/-1;grid-row:3;width:80%;margin:5px 0 0 16%;transform:rotate(3deg)}.storyboard-chapter .card-surface{padding:4px}.sequence-chapter .chapter-media{grid-template-columns:1fr;gap:35px;padding:0}.sequence-chapter .media-piece{width:87%;margin:0;transform:rotate(-2deg)}.sequence-chapter .piece-2,.sequence-chapter .piece-4{margin-left:auto;transform:rotate(3deg)}.triptych-chapter .chapter-media{grid-template-columns:1fr 1fr;gap:25px 15px;padding-top:0}.triptych-chapter .piece-1{grid-column:1/-1;grid-row:1;width:93%;transform:rotate(-2deg)}.triptych-chapter .piece-2{grid-column:1;grid-row:2;margin:0;transform:rotate(-5deg)}.triptych-chapter .piece-3{grid-column:2;grid-row:2;margin:20% 0 0;transform:rotate(4deg)}.offset-chapter .chapter-media,.split-chapter .chapter-media{grid-template-columns:1fr;gap:30px;padding-bottom:15px}.offset-chapter .piece-1,.split-chapter .piece-1{width:92%;margin:0;transform:rotate(-2deg)}.offset-chapter .piece-2,.split-chapter .piece-2{width:83%;margin:0 0 0 auto;transform:rotate(4deg)}.editorial-chapter .chapter-media{grid-template-columns:1fr 1fr;gap:32px 16px}.editorial-chapter .piece-1{grid-column:1/-1;grid-row:1;width:85%;margin:auto;transform:rotate(-3deg)}.editorial-chapter .piece-2{grid-column:2;grid-row:2;transform:rotate(4deg);margin:10px 0 0}.editorial-chapter .piece-3{grid-column:1/-1;grid-row:3;width:78%;margin:10px 0 0 6%;transform:rotate(-3deg)}.editorial-chapter .piece-4{grid-column:1;grid-row:2;margin-top:25px}.editorial-chapter .piece-5{grid-column:2;grid-row:4;margin:0 10% 0 0;width:90%;transform:rotate(3deg)}.editorial-chapter figcaption{font-size:.53rem}.designboard-chapter .chapter-media{grid-template-columns:1fr 1fr;gap:30px 18px;padding:10px 0 40px}.designboard-chapter .piece-1{margin-top:15%;transform:rotate(-4deg)}.designboard-chapter .piece-2{margin-top:0;transform:rotate(4deg)}.designboard-chapter .piece-3{grid-column:1/-1;width:78%;margin:0 auto;transform:rotate(-3deg)}.programme-names strong:has([lang=ar]){font-size:1.4rem}.original-title{font-size:1.2rem}.contact-studio{padding:50px 22px 55px}.contact-heading{margin:55px 0 40px;position:relative}.contact-heading h1{font-size:12vw}.contact-mark{position:absolute;right:0;top:-32px;width:44px;height:44px;margin:0}.contact-project{grid-template-columns:1fr;margin-bottom:50px;gap:0}.contact-project>p:first-child{font-size:.9rem;line-height:1.6;margin-bottom:30px}.project-start{font-size:1.55rem;padding:20px 0;min-height:90px;gap:15px}.copy-icon{width:43px;height:43px;font-size:1.5rem}.copy-hint,.copy-status{grid-column:1;font-size:.65rem}.contact-direct{display:flex;flex-direction:column;gap:20px;padding-top:25px}.contact-direct>a{font-size:1.35rem}.contact-direct>span:last-child{font-size:.8rem}.studio-locations{padding:65px 22px}.studio-locations h2{font-size:10vw;margin:35px 0 45px}.location-pair{grid-template-columns:1fr;gap:30px}.location-pair h3{font-size:8vw;margin:25px 0 20px}.location-pair p{font-size:.9rem}.studio-footer{padding:45px 22px 25px}.footer-top{display:block;padding-bottom:30px}.footer-top img{width:120px}.footer-invitation{margin-top:35px;gap:12px}.footer-invitation>a{font-size:1.2rem}.footer-invitation>a>span{margin-left:15px}.studio-clocks{grid-template-columns:1fr;gap:30px;padding:28px 0 32px}.clock-place+ .clock-place{border-top:1px solid #fff2;padding-top:25px}.clock-time{font-size:clamp(3rem,14vw,4.4rem);margin:15px 0 8px}.clock-label{font-size:.67rem}.clock-date{font-size:.64rem}.footer-base{flex-wrap:wrap;font-size:.6rem;gap:20px}.footer-base>a{padding:0;border:0;width:auto}.media-piece figcaption{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){.card-surface{transform:none!important;transition:none!important}}
.card-surface{margin:0}

.header nav a{white-space:nowrap}
.mark-checker{--mark:url('../work/marks/brand-checker.svg')}
.mark-motion{--mark:url('../work/marks/brand-motion.svg')}
.mark-heart{--mark:url('../work/marks/brand-heart.svg')}
.mark-data{--mark:url('../work/marks/brand-data.svg')}
.intro .hero-mark{transform:none;width:27px;height:28px;top:-44px}
.vision-mark{width:64px;height:64px}
.contact-heading .contact-mark{width:clamp(46px,5.5vw,80px);height:clamp(42px,5vw,72px);transform:none;align-self:flex-end;margin:0 7vw 12px 0}
@media(max-width:600px){.contact-heading .contact-mark{position:static;margin:0 0 10px 15px;width:38px;height:34px}.contact-heading{gap:0}.contact-heading h1{font-size:11vw}.vision-mark{width:48px;height:48px}}

/* One shadow plane follows the artwork through every hover transform. */
.media-piece{box-shadow:none!important}
.media-piece .card-surface,.media-piece.is-hovered .card-surface{box-shadow:var(--surface-shadow,none)!important}
.media-piece .media-window{box-shadow:0 18px 38px #0002;transform:translateZ(0)}
.curated-card .media-window,.storyboard-chapter .media-window,.editorial-chapter .media-window,.designboard-chapter .media-window{box-shadow:none}
.curated-card,.storyboard-chapter .media-piece,.editorial-chapter .media-piece,.designboard-chapter .media-piece{--surface-shadow:0 18px 38px #0002}
.media-piece.is-hovered .card-surface{transition:transform .2s ease-out}

/* The footer clock is a quiet studio detail. */
.studio-footer{padding-top:48px}
.footer-top{display:grid;grid-template-columns:1fr 1.25fr auto;gap:35px;align-items:center;padding-bottom:42px}
.compact-clock{text-align:right;align-self:center}
.compact-clock .clock-time{font-size:clamp(1.45rem,2.1vw,2.2rem);line-height:1.2;margin:0 0 8px;letter-spacing:-.035em}
.compact-clock .clock-date{font-size:.6rem;letter-spacing:.015em}
.footer-invitation>a{font-size:clamp(1rem,1.7vw,1.7rem)}

/* An editorial grid: square social design, then story-format publications. */
.editorial-chapter .chapter-media{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:48px 28px;max-width:1160px;margin:0 auto;padding:18px 0 15px}
.editorial-chapter .chapter-media .media-piece{position:relative;grid-column:auto;grid-row:auto;width:100%;margin:0;transform:none}
.editorial-chapter .chapter-media .piece-1,.editorial-chapter .chapter-media .piece-2{grid-column:span 3}
.editorial-chapter .chapter-media .piece-3,.editorial-chapter .chapter-media .piece-4{grid-column:span 3;width:80%;justify-self:center}
.editorial-chapter .card-surface{padding:8px 8px 13px}
.editorial-chapter .media-window{background:#eeece4}
.editorial-chapter .media-window img{object-fit:contain}
.editorial-chapter .piece-2 .media-window{background:#e4e9e8}
.editorial-chapter .piece-3 .media-window{background:#12271b}
.editorial-chapter .piece-4 .media-window{background:#f6f7f5}
.editorial-chapter figcaption{font-size:.64rem;padding:0 6px;margin-top:14px;line-height:1.6}

/* Keep the collage rhythm, with consistent gutters and breathing room. */
.collage-chapter .chapter-media{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%;height:auto;max-width:1100px;margin:10px auto 0;padding:35px 8px 40px;align-items:start}
.collage-chapter .chapter-media .media-piece{position:relative;left:auto;top:auto;width:100%;margin:0;transform:rotate(-4deg)}
.collage-chapter .chapter-media .piece-2{transform:rotate(2deg);margin-top:8%}
.collage-chapter .chapter-media .piece-3{transform:rotate(4deg);margin-top:3%}
.sequence-chapter .piece-2,.sequence-chapter .piece-4{margin-top:8%}
.triptych-chapter .chapter-media{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:25px 0 35px}
.triptych-chapter .chapter-media .media-piece{grid-column:auto;grid-row:auto;width:100%;margin:0;transform:rotate(-2deg)}
.triptych-chapter .chapter-media .piece-2{margin-top:12%;transform:rotate(3deg)}
.triptych-chapter .chapter-media .piece-3{margin-top:4%;transform:rotate(-2deg)}
@media(max-width:900px){
 .footer-top{grid-template-columns:1fr auto}.footer-invitation{grid-column:1;grid-row:2;margin-top:0}.compact-clock{grid-column:2;grid-row:1/3}.compact-clock .clock-time{font-size:1.8rem}
 .editorial-chapter .chapter-media{gap:32px 18px}.editorial-chapter figcaption{font-size:.59rem}
}
@media(max-width:600px){
 .footer-top{gap:28px 15px;align-items:center}.footer-top img{width:105px}.footer-invitation{grid-column:1/-1;grid-row:2}.compact-clock{grid-column:2;grid-row:1}.compact-clock .clock-time{font-size:1.45rem}.compact-clock .clock-date{font-size:.52rem}.footer-invitation>a{font-size:1.2rem}
 .editorial-chapter .chapter-media{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px;padding-top:5px}
 .editorial-chapter .chapter-media .piece-1,.editorial-chapter .chapter-media .piece-2{grid-column:1/-1;max-width:400px;justify-self:center}
 .editorial-chapter .chapter-media .piece-3,.editorial-chapter .chapter-media .piece-4{grid-column:span 1;width:100%}
 .editorial-chapter .card-surface{padding:5px 5px 10px}.editorial-chapter figcaption{font-size:.56rem;padding:0 3px}
 .collage-chapter .chapter-media{grid-template-columns:1fr 1fr;gap:30px 20px;margin:0;padding:15px 6px 25px}.collage-chapter .chapter-media .piece-3{grid-column:1/-1;width:60%;justify-self:center;margin-top:0}
 .triptych-chapter .chapter-media{grid-template-columns:1fr 1fr;gap:30px 20px;padding:5px 0 25px}.triptych-chapter .chapter-media .piece-1{grid-column:1/-1;width:90%;justify-self:center}.triptych-chapter .chapter-media .piece-2{margin-top:0}.triptych-chapter .chapter-media .piece-3{margin-top:10%}
 .sequence-chapter .piece-2,.sequence-chapter .piece-4{margin-top:0}
}
@media(max-width:420px){.editorial-chapter .chapter-media .piece-3,.editorial-chapter .chapter-media .piece-4{grid-column:1/-1;width:82%}.editorial-chapter figcaption{font-size:.6rem}}

/* Scroll strips measure the real viewport after their final layout is applied. */
.filmstrip-section.is-scroll-strip .filmstrip-sticky{display:grid;grid-template-columns:32% 68%;grid-template-rows:1fr auto;padding:115px 0 25px;gap:15px 0}
.is-scroll-strip .filmstrip-sticky>.chapter-copy{display:block;padding:20px 20px 0 var(--pad);align-self:center}
.is-scroll-strip .chapter-copy h2{font-size:clamp(2rem,3.2vw,4rem);margin:24px 0;transform:none!important;clip-path:none!important}
.is-scroll-strip .chapter-copy p{font-size:.8rem;line-height:1.65;margin:0;opacity:1!important;transform:none!important}
.is-scroll-strip .filmstrip-viewport{min-width:0;overflow:hidden;align-self:center;width:100%;padding:25px 0 35px}
.is-scroll-strip .filmstrip-track{padding:0 35px;gap:28px;transform:translate3d(var(--track-x,0px),0,0)!important}
.is-scroll-strip .filmstrip-track .portrait{width:clamp(170px,calc((100svh - 255px)*.5625),360px);min-width:0;max-width:none}
.is-scroll-strip .filmstrip-track .landscape{width:clamp(320px,calc((100svh - 290px)*1.777),800px);min-width:0;max-width:none}
.is-scroll-strip .filmstrip-track .media-piece:nth-child(even){padding-top:0}
.is-scroll-strip .filmstrip-foot{grid-column:1/-1;margin:0 var(--pad);padding-bottom:15px}
@media(max-width:900px){
 .filmstrip-section.is-scroll-strip .filmstrip-sticky{display:flex;flex-direction:column;padding:90px 0 20px;gap:0}
 .is-scroll-strip .filmstrip-sticky>.chapter-copy{display:block;align-self:stretch;padding:0 var(--pad)}
 .is-scroll-strip .chapter-copy h2{font-size:clamp(1.8rem,6vw,3rem);margin:15px 0 12px}
 .is-scroll-strip .chapter-copy p{font-size:.78rem;line-height:1.5;margin:0 0 8px;max-width:600px}
 .is-scroll-strip .filmstrip-viewport{flex:1;display:flex;align-items:center;padding:10px 0 20px;overflow:hidden}
 .is-scroll-strip .filmstrip-track{padding:0 var(--pad);gap:20px}
 .is-scroll-strip .filmstrip-track .portrait{width:clamp(115px,calc((100svh - 395px)*.5625),300px)}
 .is-scroll-strip .filmstrip-track .landscape{width:clamp(240px,calc((100svh - 430px)*1.777),650px)}
 .is-scroll-strip .filmstrip-foot{margin:0 var(--pad)}
}
