/* StillHuman Design: "Resolve" components (used with structure.css + resolve.js) */

.rz{position:relative;overflow:hidden;background:var(--dk)}
.rz > img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,50% 50%)}
.rz > img:not(:first-child){opacity:0}

/* image lens (used with data-rz="lens" in resolve.js) */
[data-rz="lens"] > img:last-of-type{-webkit-mask-image:radial-gradient(circle var(--lr,0px) at var(--mx,-999px) var(--my,-999px),#000 0,#000 52%,transparent 100%);mask-image:radial-gradient(circle var(--lr,0px) at var(--mx,-999px) var(--my,-999px),#000 0,#000 52%,transparent 100%)}
.lz-ring{position:absolute;left:0;top:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);pointer-events:none;opacity:0;mix-blend-mode:difference;z-index:3}
[data-rz="lens"]{cursor:crosshair}

/* ---------- hero layers ---------- */
.hl{position:absolute;inset:0}
.hl.rz{background:transparent}
.lens{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  -webkit-mask-image:radial-gradient(circle 150px at var(--mx,-999px) var(--my,-999px),#000 0,#000 52%,transparent 100%);
  mask-image:radial-gradient(circle 150px at var(--mx,-999px) var(--my,-999px),#000 0,#000 52%,transparent 100%)}
.lens-ring{position:absolute;z-index:3;left:0;top:0;width:300px;height:300px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:difference}
.lens-ring::after{content:"High-def";position:absolute;left:50%;top:100%;translate:-50% 8px;font:600 .72rem/1 var(--font-b);color:#fff;white-space:nowrap}
.pix{position:absolute;inset:0;width:100%;height:100%}
.pix-src{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0}
.lo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.bloom{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;--r:0;
  -webkit-mask-image:radial-gradient(circle farthest-corner at 71% 76%,#000 calc(var(--r) * 1%),transparent calc(var(--r) * 1% + 16%));
  mask-image:radial-gradient(circle farthest-corner at 71% 76%,#000 calc(var(--r) * 1%),transparent calc(var(--r) * 1% + 16%))}
@media (hover:none){.lens,.lens-ring{display:none}}

/* ---------- compare slider (about image) ---------- */
.cmp{position:absolute;inset:0;--x:50%;touch-action:pan-y}
.cmp img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.cmp .hi{clip-path:inset(0 0 0 var(--x))}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;translate:-1px 0;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.cmp-line::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;translate:-50% -50%;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M7 1L2 6l5 5M15 1l5 5-5 5'/%3E%3C/svg%3E") center no-repeat;box-shadow:0 2px 14px rgba(0,0,0,.35)}
.cmp-tag{position:absolute;bottom:14px;padding:6px 10px;background:rgba(0,0,0,.6);color:#fff;font:600 .78rem/1 var(--font-b);pointer-events:none}
.cmp-tag.l{left:14px}.cmp-tag.r{right:14px}
.cmp-r{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.cmp:focus-within .cmp-line{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- 4A: sticky index ---------- */
.idx{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:0 calc(var(--gutter) + 6px);align-items:start}
.idx-list{grid-column:1 / span 7;list-style:none;margin:0;padding:0;border-top:1.5px solid var(--dk-line)}
.idx-item{border-bottom:1.5px solid var(--dk-line);padding:clamp(20px,3.4vh,34px) 0;cursor:pointer;opacity:.42;transition:opacity .4s}
.idx-item.on,.idx-item:focus-visible{opacity:1}
.idx-item .top{display:flex;gap:clamp(14px,2vw,28px);align-items:baseline}
.idx-item .n{font:var(--d-wt) 1.1rem/1 var(--font-d);color:var(--accent);min-width:2ch}
.idx-item h3{margin:0;font-size:var(--stage-size);transition:transform .6s var(--out)}
.idx-item.on h3{transform:translateX(clamp(6px,1.2vw,20px))}
.idx-item p{margin:0;max-width:30rem;color:var(--dk-mute);max-height:0;overflow:hidden;opacity:0;transition:max-height .7s var(--ease),opacity .4s,margin .4s}
.idx-item.on p{max-height:9rem;opacity:1;margin-top:12px}
.idx-item p .stg{display:block;font-style:normal;font-weight:700;color:var(--accent);margin-bottom:2px}
.idx-view{grid-column:9 / -1;position:sticky;top:11vh;aspect-ratio:4/5;max-height:76vh;width:100%;background:var(--dk)}
.idx-view .v{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.idx-view .v.on{opacity:1}
.idx-view .v img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.idx-view .v img.hi{opacity:0;transition:opacity 1.1s ease .25s}
.idx-view .v.on img.hi{opacity:1}
.idx-view .tag{position:absolute;left:14px;bottom:14px;padding:6px 10px;background:rgba(0,0,0,.62);color:#fff;font:600 .78rem/1 var(--font-b)}
@media (max-width:900px){
  .idx-view{grid-column:1 / -1;position:relative;top:0;aspect-ratio:16/10;order:-1}
  .idx-list{grid-column:1 / -1}
  .idx-item{opacity:1}.idx-item p{max-height:none;opacity:1;margin-top:10px}
}

/* ---------- 4B: expanding panels ---------- */
.pnls{display:flex;gap:10px;height:min(74vh,700px);padding:0 calc(var(--gutter) + 6px)}
.pnl{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--dk);cursor:pointer;transition:flex-grow .85s var(--ease)}
.pnl.on{flex-grow:3.8}
.pnl .rz{position:absolute;inset:0}
.pnl::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0) 55%)}
.pnl .n{position:absolute;z-index:2;top:18px;left:18px;font:var(--d-wt) 1.1rem/1 var(--font-d);color:var(--accent)}
.pnl-v{position:absolute;z-index:2;left:50%;bottom:22px;writing-mode:vertical-rl;translate:-50% 0;rotate:180deg;margin:0;font-size:clamp(1.5rem,2.4vw,2.4rem);white-space:nowrap;color:#fff;transition:opacity .3s}
.pnl.on .pnl-v{opacity:0}
.pnl-c{position:absolute;z-index:2;left:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);opacity:0;transform:translateY(14px);transition:opacity .45s,transform .6s var(--out);color:#fff}
.pnl.on .pnl-c{opacity:1;transform:none;transition-delay:.3s}
.pnl-c h3{margin:0 0 8px;font-size:clamp(2rem,3.6vw,4rem)}
.pnl-c p{margin:0;max-width:26rem;color:rgba(255,255,255,.86);font-size:.98rem;line-height:1.5}
.pnl-c p .stg{display:block;font-style:normal;font-weight:700;color:var(--accent)}
@media (max-width:900px){
  .pnls{flex-direction:column;height:auto}
  .pnl{flex:none;height:260px}.pnl.on{flex-grow:0}
  .pnl-v{display:none}.pnl-c{opacity:1;transform:none}
  .pnl-c h3{font-size:2.2rem}
}

/* 4B about: wide band + columns */
.about-wide{grid-column:1 / -1;aspect-ratio:21/8;position:relative}
.about-wide .rz{position:absolute;inset:0}
.about-cols3{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}
.about-cols3 p{margin:0;font-size:1.1rem}
.about-cols3 .facts{margin:0}
@media (max-width:900px){.about-cols3{grid-template-columns:1fr}.about-wide{aspect-ratio:16/10}}

/* 4B work grid */
.wkg{padding:clamp(80px,12vh,150px) calc(var(--gutter) + 6px) clamp(80px,12vh,150px);background:var(--bg-lt) var(--tex)}
.wkg-head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,8vh,90px)}
.wkg-head h2{margin:0;font-size:var(--h2-size)}
.wkg-head p{margin:0;max-width:24rem}
.wkg-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(40px,7vh,90px) 24px}
.wk{display:block;text-decoration:none;color:inherit}
.wk .ph{aspect-ratio:16/11;position:relative;overflow:hidden;background:var(--dk)}
.wk .ph .rz{position:absolute;inset:0}
.wk .ph::after{content:"";position:absolute;inset:0;border:0 solid var(--accent);transition:border-width .35s var(--ease);pointer-events:none}
.wk:hover .ph::after{border-width:10px}
.wk .meta{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:16px;padding-top:12px;border-top:1.5px solid var(--fg)}
.wk h3{margin:0;font-size:var(--panel-size)}
.wk .sec{font-weight:500;text-align:right}
.wk:nth-child(1){grid-column:1 / span 7}
.wk:nth-child(2){grid-column:9 / span 4;margin-top:clamp(40px,12vh,140px)}.wk:nth-child(2) .ph{aspect-ratio:3/4}
.wk:nth-child(3){grid-column:1 / span 5}.wk:nth-child(3) .ph{aspect-ratio:4/5}
.wk:nth-child(4){grid-column:7 / span 6;margin-top:clamp(20px,8vh,100px)}
@media (max-width:900px){.wk:nth-child(n){grid-column:1 / -1;margin-top:0}.wk:nth-child(n) .ph{aspect-ratio:16/11}}

/* ---------- 4C: resolution slider ---------- */
.rs{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,48px) 24px;padding:0 calc(var(--gutter) + 6px)}
.rs-stage{grid-column:1 / span 7;position:relative;aspect-ratio:16/11;background:var(--dk)}
.rs-stage .rz{position:absolute;inset:0}
.rs-read{position:absolute;left:14px;top:14px;z-index:2;padding:7px 11px;background:rgba(0,0,0,.66);color:#fff;font:600 .8rem/1 var(--font-b)}
.rs-read b{color:var(--accent);font-weight:700}
.rs-info{grid-column:9 / -1;align-self:center}
.rs-info .n{display:block;font:var(--d-wt) 1.1rem/1 var(--font-d);color:var(--accent);margin-bottom:10px}
.rs-info h3{margin:0;font-size:clamp(2.6rem,6vw,6.4rem);transition:opacity .25s}
.rs-info p{margin:16px 0 0;max-width:26rem;color:var(--dk-mute);transition:opacity .25s}
.rs-info p .stg{display:block;font-style:normal;font-weight:700;color:var(--accent);margin-bottom:2px}
.rs-info.swap h3,.rs-info.swap p{opacity:0}
.rs-ctl{grid-column:1 / -1;position:relative;padding-top:10px}
.rs-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:ew-resize;position:relative;z-index:2}
.rs-range::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--accent) var(--fill,0%),rgba(255,255,255,.25) var(--fill,0%))}
.rs-range::-moz-range-track{height:3px;background:rgba(255,255,255,.25)}
.rs-range::-moz-range-progress{height:3px;background:var(--accent)}
.rs-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11.5px;border-radius:50%;background:var(--accent);border:0;box-shadow:0 0 0 6px rgba(85,224,255,.22)}
.rs-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--accent);border:0;box-shadow:0 0 0 6px rgba(85,224,255,.22)}
.rs-range:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
.rs-notches{display:grid;grid-template-columns:repeat(5,1fr);margin-top:4px}
.rs-notches button{all:unset;cursor:pointer;padding:10px 0;color:var(--dk-mute);font:600 .92rem/1.2 var(--font-b);transition:color .3s}
.rs-notches button:nth-child(1){text-align:left}.rs-notches button:nth-child(5){text-align:right}.rs-notches button:not(:first-child):not(:last-child){text-align:center}
.rs-notches button.on{color:var(--accent)}
.rs-notches button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.rs-hint{position:absolute;right:0;top:-6px;font-size:.85rem;color:var(--dk-mute)}
@media (max-width:900px){.rs-stage,.rs-info{grid-column:1 / -1}.rs-notches button{font-size:.76rem}.rs-hint{display:none}}

/* 4C work: stacking cards */
.stk{padding:clamp(80px,12vh,140px) calc(var(--gutter) + 6px) clamp(80px,12vh,140px);background:var(--bg-lt) var(--tex)}
.stk-head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(30px,6vh,70px)}
.stk-head h2{margin:0;font-size:var(--h2-size)}
.stk-head p{margin:0;max-width:24rem}
.stk-card{position:sticky;top:calc(76px + var(--i) * 22px);display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:stretch;height:min(68vh,620px);margin-bottom:clamp(50px,10vh,120px);padding:clamp(14px,1.6vw,22px);background:var(--bg);border:1.5px solid var(--fg);box-shadow:0 -18px 40px -22px rgba(0,0,0,.35)}
.stk-card .ph{grid-column:1 / span 8;position:relative;overflow:hidden;background:var(--dk)}
.stk-card .ph .rz{position:absolute;inset:0}
.stk-card .info{grid-column:9 / -1;display:flex;flex-direction:column;justify-content:space-between;padding:6px 4px}
.stk-card .num{font:var(--d-wt) 1.1rem/1 var(--font-d);color:var(--fg)}
.stk-card h3{margin:10px 0 0;font-size:clamp(2.2rem,4.2vw,4.6rem)}
.stk-card .sec{margin:8px 0 0;font-weight:500}
@media (max-width:900px){.stk-card{position:relative;top:0;height:auto;grid-template-columns:1fr}.stk-card .ph,.stk-card .info{grid-column:1 / -1}.stk-card .ph{width:100%;aspect-ratio:16/10;max-height:min(52vh,420px)}.stk-card:last-of-type{margin-bottom:0}}

@media (prefers-reduced-motion:reduce){.idx-view .v img.hi,.pnl,.pnl-c{transition:none}}