/* APELINE / V5 — distance is the interactive artwork. No image effects. */
:root{--distance-ease:cubic-bezier(.18,.86,.24,1)}
[data-zoom-stage]{--stage-zoom:.85;--glimmer:.48;--focus-size:.85}
[data-zoom-stage] [data-zoom-art]{transform:scale(var(--stage-zoom));transform-origin:50% 50%;will-change:transform;touch-action:pan-y;cursor:ns-resize;transition:none;z-index:3}
[data-zoom-stage] [data-zoom-art] img{image-rendering:pixelated!important;filter:none!important}
[data-zoom-stage] .focus-frame img{transform:none!important}
[data-zoom-stage] .stage-art img{transform:none!important}
[data-zoom-stage] .stage-art img.is-changing{transform:none!important}
[data-zoom-stage]::before{pointer-events:none}
[data-zoom-stage].is-dragging [data-zoom-art]{cursor:grabbing}
[data-zoom-stage] .zoom-distance-caption{pointer-events:none;position:absolute;z-index:3;left:50%;bottom:10%;transform:translateX(-50%);font:10px 'Courier New',monospace;white-space:nowrap;letter-spacing:.17em;color:#777;opacity:0;transition:opacity .65s}
[data-zoom-stage].is-distant .zoom-distance-caption{opacity:1}
.try-zoom{display:inline-block;border:0;background:none;padding:16px 0;color:#aaa9a0;text-align:left;border-bottom:1px solid #51514c;letter-spacing:.08em;transition:color .25s,border-color .25s;min-height:44px}
.try-zoom:hover{color:#fff;border-color:#ccc}
.distance-module{border-top:1px solid #393936;padding:25px 0 5px;position:relative;z-index:3}
.distance-top,.distance-caption{display:flex;align-items:center;justify-content:space-between;gap:10px}
.distance-top{color:#e0dfd7}
.distance-top output{font-variant-numeric:tabular-nums;color:#a4a49d}
.distance-caption{color:#65655f;margin-top:9px}
.distance-ui{display:grid;grid-template-columns:25px minmax(60px,1fr) 25px;gap:9px;align-items:center;margin-top:17px}
.distance-step{border:0;background:none;color:#eae9e1;font:24px/1 Arial,Helvetica,sans-serif;padding:0;min-width:26px;min-height:36px;transition:opacity .25s}
.distance-step:hover{opacity:.5}
.distance-ui input[type=range]{-webkit-appearance:none;appearance:none;margin:0;width:100%;height:23px;background:none;cursor:pointer;touch-action:pan-x;--fill:83%}
.distance-ui input[type=range]::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,#eae9df var(--fill),#44443f var(--fill))}
.distance-ui input[type=range]::-moz-range-track{height:1px;background:#6b6b65}
.distance-ui input[type=range]::-moz-range-progress{height:1px;background:#ecebe3}
.distance-ui input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:20px;border-radius:0;border:1px solid #ebebe4;background:#090909;margin-top:-10px}
.distance-ui input[type=range]::-moz-range-thumb{width:10px;height:20px;border-radius:0;border:1px solid #ebebe4;background:#090909}
.distance-outcome{min-height:20px;margin-top:18px;color:#aeaea5;opacity:0;transition:opacity .5s}
.zoom-rail.is-distant .distance-outcome{opacity:1}
.hero-rail.right.zoom-rail{gap:15px}
.hero-rail.right.zoom-rail .joke-wrap{margin:auto 0 0}
.hero-rail.right.zoom-rail .distance-module{width:100%;margin-top:auto}
.hero-rail.right.zoom-rail .right-bottom{margin-top:12px}
.hero-rail.right .joke-wrap small{display:none}
.focus-note.zoom-rail{gap:20px}
.focus-note .focus-note-main{margin-top:auto}
.focus-note.zoom-rail .distance-module{margin-top:auto}
.focus-note.zoom-rail .try-zoom{margin-top:12px;color:#a2a19a}
.focus-stage{height:auto}
.focus-stage .focus-frame{min-width:0}
.extra-art{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:170px;align-items:start}
.extra-art .art-card:nth-child(1){grid-column:1 / span 4}
.extra-art .art-card:nth-child(2){grid-column:6 / span 7;margin-top:130px}
.extra-art .art-card:nth-child(3){grid-column:3 / span 5;margin-top:-30px}
.extra-art .art-card .art-photo img{object-fit:contain}
.study-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;align-items:start;border-top:1px solid #bcbcb5;margin-top:120px;padding-top:75px}
.study-tile{display:block;min-width:0;padding:0;color:#101010;border:0;background:transparent;text-align:left;grid-column:span 4;margin-bottom:40px;position:relative}
.study-tile:nth-child(7n+1){grid-column:span 7}
.study-tile:nth-child(7n+2){grid-column:span 4;margin-top:140px}
.study-tile:nth-child(7n+3){grid-column:span 4}
.study-tile:nth-child(7n+4){grid-column:span 4;margin-top:105px}
.study-tile:nth-child(7n+5){grid-column:span 4}
.study-tile:nth-child(7n+6){grid-column:span 5}
.study-tile:nth-child(7n+7){grid-column:span 6;margin-top:100px}
.study-img{display:block;aspect-ratio:1;position:relative;background:#000;overflow:hidden;outline:1px solid #b8b8ae;contain:paint}
.study-img img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block;transition:scale 1.1s var(--distance-ease)}
.study-tile:hover .study-img img{scale:1.035}
.study-meta{display:flex;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid #bcbcb5;font:11px Arial,Helvetica,sans-serif;letter-spacing:.04em;font-weight:bold}
.study-meta span:last-child{font-size:20px;font-weight:normal;transition:translate .3s}
.study-tile:hover .study-meta span:last-child{translate:3px -3px}
.study-tile.reveal{opacity:0;translate:0 26px;transition:opacity 1.2s var(--distance-ease),translate 1.2s var(--distance-ease)}
.study-tile.reveal.visible{opacity:1;translate:0 0}
/* keep stage poster hero from overpowering the zoom performance */
.stage-art{width:min(79%,700px)}
.focus-frame{width:min(85%,720px)}
@media(max-width:980px){
 .hero{grid-template-columns:minmax(122px,18%) minmax(0,1fr) minmax(177px,24%)}
 .distance-ui{grid-template-columns:22px minmax(56px,1fr) 22px;gap:4px}
 .focus{grid-template-columns:24% 1fr 19%}
 .focus-note.zoom-rail{padding-left:19px;padding-right:19px}
 .focus-note .italic{font-size:clamp(25px,2.8vw,39px)}
}
@media(max-width:700px){
 .hero{grid-template-columns:1fr 1fr;grid-template-areas:'stage stage' 'left right';height:auto;min-height:0}
 .stage{grid-area:stage;min-height:0;aspect-ratio:1}
 .hero-rail.left{grid-area:left}
 .hero-rail.right{grid-area:right}
 .hero-rail.left,.hero-rail.right{padding:23px 5vw;min-height:370px;border-top:1px solid #333}
 .hero-rail.right.zoom-rail{border-left:1px solid #333;gap:12px}
 .hero-rail.right.zoom-rail .joke-wrap{margin:10px 0 0}
 .hero-rail.right.zoom-rail .distance-module{margin:10px 0 0}
 .hero-rail.right.zoom-rail .right-bottom{margin-top:auto}
 .hero-rail.right .joke{font-size:clamp(23px,6vw,31px)}
 .rail-pick{padding:10px 0;font-size:9px}
 .rail-pick .no{width:19px}
 .rail-pick .indicator{font-size:7px}
 .rail-label{font-size:9px}
 .stage-art{width:88%}
 .stage-controls{bottom:15px;left:15px;right:15px}
 .stage-controls .control-caption{font-size:8px;max-width:55%}
 .stage-count,.stage-badge{font-size:9px}
 .try-zoom{font-size:9px;padding:10px 0;min-height:35px}
 .distance-module{padding:13px 0 0}
 .distance-top,.distance-caption{font-size:8px}
 .distance-ui{margin-top:9px}
 .distance-outcome{min-height:14px;margin-top:10px;font-size:9px}
 .extra-art{gap:10px;margin-top:75px}
 .extra-art .art-card:nth-child(1){grid-column:1/span 7}
 .extra-art .art-card:nth-child(2){grid-column:7/span 6;margin-top:95px}
 .extra-art .art-card:nth-child(3){grid-column:2/span 10;margin-top:20px}
 .focus{grid-template-columns:1fr 1fr;grid-template-areas:'stage stage' 'note info'}
 .focus-stage{grid-area:stage}
 .focus-note.zoom-rail{grid-area:note;min-height:350px;padding:22px 5vw 18px;gap:8px}
 .focus-info{grid-area:info;min-height:350px}
 .focus-note .focus-note-main{margin:16px 0 0}
 .focus-note .italic{font-size:clamp(25px,6vw,35px)}
 .study-grid{gap:12px;margin-top:70px;padding-top:45px}
 .study-tile,.study-tile:nth-child(7n+1),.study-tile:nth-child(7n+2),.study-tile:nth-child(7n+3),.study-tile:nth-child(7n+4),.study-tile:nth-child(7n+5),.study-tile:nth-child(7n+6),.study-tile:nth-child(7n+7){grid-column:span 6;margin-top:0;margin-bottom:18px}
 .study-tile:nth-child(5n+1){grid-column:span 10}
 .study-tile:nth-child(5n+3){grid-column:3/span 10}
 .study-meta{font-size:9px;padding:9px 0}
}
@media(max-width:420px){
 .hero-rail.right .joke{font-size:24px}
 .hero-rail.left,.hero-rail.right{padding-left:16px;padding-right:15px}
 .focus-note.zoom-rail{padding-left:15px;padding-right:14px}
 .rail-pick{gap:5px}
 .distance-step{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.study-tile.reveal{opacity:1;translate:none;transition:none}.study-img img{transition:none}.distance-outcome{transition:none}}