.halo-reel{min-width:0;width:100%;position:relative;align-self:center}.halo-top{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:1.8px;color:var(--muted);padding:0 6px 12px;border-bottom:1px solid var(--line)}.halo-stage{position:relative;width:100%;height:490px;overflow:hidden;touch-action:pan-y;user-select:none;cursor:grab;isolation:isolate;background:radial-gradient(#c8cabe .7px,transparent .7px);background-size:17px 17px;border-radius:6px}.halo-stage:active{cursor:grabbing}.halo-stage:focus-visible{outline:2px solid #58680a;outline-offset:3px}.halo-card{position:absolute;left:0;top:0;padding:7px 7px 23px;border:1px solid #22251c;background:#fff;box-shadow:0 14px 24px #18201028;will-change:transform;cursor:pointer;transform-origin:center}.halo-card img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.halo-card span{position:absolute;bottom:7px;left:9px;font-size:8px;letter-spacing:1.6px;color:#626958;pointer-events:none}.halo-card[aria-current=true]{border-color:#292c1c;box-shadow:5px 6px 0 var(--lime),0 15px 35px #18201030}.halo-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:24px 6px 0;border-top:1px solid var(--line)}.halo-count{font-size:10px;letter-spacing:2px;color:var(--muted)}.halo-title{font-size:22px;letter-spacing:-.7px;margin:7px 0 0;min-height:27px}.halo-subtitle{font-size:12px;color:var(--muted);margin:4px 0 10px}.halo-read{background:none;border:0;padding:0 0 4px;border-bottom:1px solid var(--ink);font-size:12px;font-weight:600}.halo-controls{display:flex;gap:7px;flex-shrink:0}.halo-controls button{width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--paper);font-size:17px;transition:transform 160ms ease-out}.halo-controls button:active{transform:scale(.95)}.halo-controls button:disabled{opacity:.4;cursor:default}.halo-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}@media(max-width:1000px){.halo-stage{height:430px}.halo-title{font-size:19px}.halo-controls{gap:4px}.halo-controls button{width:32px;height:32px}.halo-top{font-size:9px;letter-spacing:1px}}@media(max-width:700px){.halo-reel{max-width:500px;margin:auto}.halo-stage{height:420px}.halo-bottom{padding-top:20px}.halo-title{font-size:21px}.halo-top{font-size:10px}.hero{overflow:hidden}}@media(prefers-reduced-motion:reduce){.halo-card{will-change:auto}}

/* Tall staggered arc, with quiet image edges like the supplied layout. */
.halo-stage{height:600px;background:none;border-radius:0}
.halo-card{padding:0;border:0;box-shadow:0 16px 24px #18201020}
.halo-card span{display:none}
.halo-card[aria-current=true]{box-shadow:0 18px 30px #1820102b}
@media(max-width:1000px){.halo-stage{height:530px}}
@media(max-width:700px){.halo-stage{height:460px}}

.halo-card img{object-fit:contain}

/* Reference composition: five pages descend, then return toward the lower left. */
.halo-stage{height:auto;aspect-ratio:2/3;max-height:800px}.halo-card{box-shadow:0 14px 26px #1820101a}.halo-card[aria-current=true]{box-shadow:0 18px 32px #18201024}
@media(max-width:700px){.halo-stage{height:auto;aspect-ratio:2/3;max-height:650px}}

/* Compact first fold: size the artwork to the available viewport height. */
@media(min-width:701px){
body:not(.ym-app)>header{height:72px;gap:24px}
body:not(.ym-app)>header .brand{font-size:24px}
body:not(.ym-app)>header .brandmark img{height:30px}
body:not(.ym-app)>header .button.small{padding:10px 16px;font-size:13px}
.hero{min-height:0;padding-top:36px;padding-bottom:36px;gap:5%;grid-template-columns:1.05fr .95fr}
.hero h1{font-size:clamp(52px,5.5vw,80px);line-height:1.04;letter-spacing:-2px}
.hero .eyebrow{margin-bottom:18px;font-size:11px;letter-spacing:1.5px}
.hero-copy>p:not(.eyebrow){font-size:16px;margin:20px 0;max-width:480px}
.hero .button{padding:13px 20px;font-size:14px}
.hero .fine{margin-top:12px}
.hero .halo-stage{height:clamp(520px,calc(80svh - 40px),620px);aspect-ratio:auto;max-height:none}
.hero .halo-top{padding-bottom:8px;font-size:9px}
.hero .halo-bottom{padding-top:20px;gap:10px}
.hero .halo-title{font-size:18px;min-height:22px;margin-top:4px;max-width:30ch}
.hero .halo-subtitle{font-size:11px;margin:3px 0 6px}
.hero .halo-count{font-size:9px}
.hero .halo-controls button{width:32px;height:32px}
}
@media(max-width:700px){.hero{min-height:0;padding-top:28px;padding-bottom:28px;gap:26px}.hero .halo-stage{height:470px;aspect-ratio:auto;max-height:none}.hero .halo-bottom{padding-top:12px}.hero h1{font-size:48px}.hero-copy>p:not(.eyebrow){margin:18px 0}}