.making-characters{position:relative;height:320svh;background:#e8e2d6;color:#242019;scroll-margin-top:0;--character-accent:#b69c70;--character-progress:0}
.character-sticky{position:sticky;top:0;min-height:720px;height:100svh;display:grid;grid-template-columns:42% 58%;grid-template-rows:minmax(0,1fr) 91px;overflow:hidden;background:#e8e2d6}
.character-editorial{padding:clamp(100px,14vh,150px) 3.5vw 34px 5.2vw;display:flex;flex-direction:column;position:relative;z-index:3}
.character-kicker{font:9px/1.4 Studio,Arial,sans-serif;letter-spacing:.17em;color:#6c6456;display:flex;align-items:center;gap:18px;margin:0 0 32px}
.character-kicker>span{border:1px solid #81776450;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:8px;letter-spacing:0}
.character-editorial h2{font:clamp(45px,4.65vw,82px)/.99 Editorial,Georgia,serif;letter-spacing:-.042em;max-width:560px;margin:0}
.character-editorial h2 em{color:#86704b}
.character-intro{max-width:290px;font:12px/1.8 Studio,Arial,sans-serif;color:#716b60;margin:24px 0 0}
.character-direction{padding-top:25px;margin-top:auto;max-width:315px}
.character-index{font:9px/1 Studio,Arial,sans-serif;letter-spacing:.16em;color:#9a8c77;margin:0 0 15px}
.character-index span{color:#322d26}
.character-direction h3{font:clamp(23px,2vw,34px)/1.15 Editorial,Georgia,serif;letter-spacing:-.02em;margin:0 0 12px}
.character-direction>p:not(.character-index){color:#736c62;font:11px/1.8 Studio,Arial,sans-serif;max-width:280px;margin:0}
.character-direction>span{display:block;font:8px/1.9 Studio,Arial,sans-serif;letter-spacing:.11em;color:#82745d;margin-top:18px}
.character-next{display:flex;align-items:center;gap:28px;width:max-content;max-width:100%;font:10px/1.4 Studio,Arial,sans-serif;margin-top:27px;border-bottom:1px solid #94816a5c;padding-bottom:8px;min-height:34px}
.character-next span{font-size:20px}
.character-scene{position:relative;isolation:isolate;min-height:0;overflow:hidden;background:#101a21}
.character-aperture{position:absolute;inset:0;overflow:hidden}
.character-layer{position:absolute;inset:0;opacity:0;transition:opacity .82s cubic-bezier(.2,.6,.2,1);will-change:opacity;overflow:hidden}
.character-layer.is-current{opacity:1;z-index:1}
.character-atmosphere{position:absolute;inset:-7%;width:114%;max-width:none;height:114%;object-fit:cover;filter:blur(24px) saturate(.8) brightness(.58);opacity:.83;transform:scale(1.05)}
.character-portrait{position:absolute;top:0;left:50%;width:auto;max-width:none;height:100%;object-fit:contain;transform:translateX(-50%);filter:none;mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%)}
.character-scene:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,#080a0fc7,transparent 26%,transparent 74%,#080a0f55),linear-gradient(90deg,#080a0f40,transparent 28%,transparent 75%,#080a0f30)}
.character-frame-label{position:absolute;z-index:4;top:106px;left:32px;right:32px;display:flex;justify-content:space-between;color:#e6dfd1b8;font:7px/1.4 Studio,Arial,sans-serif;letter-spacing:.16em}
.character-frame-label b{font-weight:400}
.character-viewfinder{position:absolute;z-index:4;inset:145px 32px 65px;pointer-events:none}
.character-viewfinder i{position:absolute;width:17px;height:17px;border-color:#e4d6bf88;border-style:solid}
.character-viewfinder i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}.character-viewfinder i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}.character-viewfinder i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}.character-viewfinder i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}
.character-camera{position:absolute;left:-5%;bottom:3%;width:37%;height:auto;z-index:4;opacity:.94;filter:brightness(.58) drop-shadow(12px 15px 20px #0009);transform:rotate(-5deg);pointer-events:none}
.character-scene-title{position:absolute;z-index:5;right:32px;bottom:72px;text-align:right;color:#f2eadb;max-width:66%}
.character-scene-title>span{font:8px/1.4 Studio,Arial,sans-serif;letter-spacing:.18em;color:#d1c2a5}
.character-scene-title>p{font:clamp(22px,2.3vw,38px)/1.15 Editorial,Georgia,serif;margin-top:10px;letter-spacing:-.02em}
.character-concept-note{position:absolute;z-index:5;bottom:25px;right:32px;left:32px;font:7px/1.4 Studio,Arial,sans-serif;letter-spacing:.07em;color:#e5dcc5a6;text-align:right}
.character-sweep{position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(105deg,transparent 38%,#efc78b16 48%,#ead2a43b 50%,transparent 62%);transform:translateX(-130%);opacity:0}
.character-scene.is-changing .character-sweep{animation:character-light-pass 1s ease both}
@keyframes character-light-pass{0%{transform:translateX(-100%);opacity:0}20%{opacity:1}80%{opacity:.5}100%{transform:translateX(100%);opacity:0}}
.character-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #8b7c622c;padding:0 5.2vw;background:#e8e2d6;position:relative;z-index:8}
.character-controls button{position:relative;text-align:left;display:flex;align-items:center;gap:18px;border:0;background:none;padding:18px 20px 18px 0;color:#8c8271;min-height:75px}
.character-controls button:after{position:absolute;bottom:0;left:0;right:24px;height:2px;background:#a78a56;content:"";transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
.character-controls button[aria-pressed=true]:after{transform:scaleX(1)}
.character-controls button>span{font:8px/1 Studio,Arial,sans-serif;letter-spacing:.09em;color:#a1937e}
.character-controls button>strong{font:12px/1.4 Studio,Arial,sans-serif;font-weight:400;transition:color .2s}
.character-controls button[aria-pressed=true]{color:#2a241a}
.character-controls button i{width:5px;height:5px;border-radius:50%;background:#a78a56;opacity:0;margin-left:auto;transition:opacity .3s;margin-right:25px}
.character-controls button[aria-pressed=true] i{opacity:1}
.character-controls button:hover strong{color:#2a241a}
.character-controls button:focus-visible,.character-next:focus-visible{outline:2px solid #765a28;outline-offset:3px}
@media(min-width:1600px){.character-sticky{grid-template-columns:40% 60%}.character-editorial{padding-left:7vw;padding-right:5vw}.character-scene-title{right:5vw;bottom:9vh}.character-camera{width:34%;left:0}}
@media(max-height:780px) and (min-width:901px){.character-sticky{min-height:650px;grid-template-rows:minmax(0,1fr) 72px}.character-editorial{padding-top:105px;padding-bottom:20px}.character-kicker{margin-bottom:20px}.character-intro{margin-top:17px;font-size:11px}.character-direction{padding-top:20px}.character-direction>span{margin-top:12px}.character-next{margin-top:15px}.character-frame-label{top:98px}.character-viewfinder{top:125px}.character-controls button{min-height:65px}}
@media(max-width:900px){.character-sticky{grid-template-columns:44% 56%;min-height:680px}.character-editorial{padding-left:5vw;padding-right:3vw}.character-editorial h2{font-size:43px}.character-frame-label{left:20px;right:20px;font-size:6px}.character-frame-label>span:first-child{max-width:130px}.character-viewfinder{left:20px;right:20px}.character-scene-title{right:20px;bottom:80px;max-width:85%}.character-scene-title>p{font-size:27px}.character-camera{width:42%;bottom:8%;left:-13%;opacity:.7}.character-controls{padding:0 5vw}.character-controls button{gap:10px;padding-right:12px}.character-controls button>strong{font-size:10px}.character-controls button i{display:none}.character-concept-note{right:20px;left:20px;font-size:6px}}
@media(max-width:640px){.making-characters{height:320svh}.character-sticky{height:100svh;min-height:620px;grid-template-columns:1fr;grid-template-rows:224px minmax(0,1fr) 73px}.character-editorial{padding:82px 6vw 17px;display:block}.character-kicker{font-size:7px;margin:0 0 13px;gap:11px}.character-kicker>span{height:21px;width:21px;font-size:6px}.character-editorial h2{font-size:37px;line-height:1;max-width:300px}.character-intro,.character-direction,.character-next{display:none}.character-scene{min-height:0}.character-frame-label{top:18px;left:6vw;right:6vw;font-size:6px}.character-frame-label>span:first-child{max-width:none}.character-viewfinder{inset:47px 6vw 57px}.character-viewfinder i{width:13px;height:13px}.character-portrait{height:100%;width:auto}.character-atmosphere{filter:blur(18px) brightness(.55)}.character-camera{width:29%;bottom:3%;left:0;opacity:.85}.character-scene-title{right:6vw;bottom:51px;max-width:72%}.character-scene-title>span{font-size:6px}.character-scene-title>p{font-size:26px;margin-top:7px}.character-concept-note{left:6vw;right:6vw;bottom:17px;font-size:6px}.character-controls{grid-column:auto;padding:0 5vw;gap:0}.character-controls button{display:block;padding:12px 6px 14px;min-height:73px}.character-controls button>span{display:block;font-size:7px;margin-bottom:8px}.character-controls button>strong{font-size:9px;white-space:nowrap}.character-controls button:after{right:6px;left:6px}.character-controls button>i{display:none}}
@media(max-width:380px){.character-editorial h2{font-size:33px}.character-controls button>strong{font-size:8px}.character-scene-title>p{font-size:23px}}
.making-characters.is-static{height:auto}.making-characters.is-static .character-sticky{position:relative}.making-characters.is-static .character-layer{transition:none}.making-characters.is-static .character-sweep{display:none}
@media(prefers-reduced-motion:reduce){.making-characters{height:auto}.character-sticky{position:relative}.character-layer,.character-controls button:after{transition:none}.character-sweep{display:none}}