/* Shared case-study system. Each page sets its own theme tokens on body[data-case]. */

body[data-case]{background:var(--paper);color:var(--ink)}
body[data-case] header.nav{background:color-mix(in srgb,var(--paper) 80%,transparent)}

/* reading progress */
.readbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:30;transform-origin:left;transform:scaleX(0);background:var(--accent,var(--signal));pointer-events:none}

/* layout helpers */
.cs-sec{padding-block:clamp(80px,12vw,180px) 0}
.cs-label{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:inline-flex;align-items:center;gap:10px}
.cs-label::before{content:"";width:22px;height:1px;background:currentColor}
.cs-h2{font-size:clamp(48px,8vw,120px);letter-spacing:-.055em;line-height:.9;margin-top:18px}
.cs-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,6vw,96px);align-items:start}
.cs-split>*{min-width:0}
@media (max-width:860px){.cs-split{grid-template-columns:1fr}}
.cs-body{display:grid;gap:18px;max-width:62ch}
.cs-body p{margin:0}
.cs-lead{font:600 clamp(22px,2.4vw,32px)/1.2 var(--display);letter-spacing:-.025em;text-wrap:pretty}

/* photo slot: designed placeholder until a real image is dropped into img/ */
.photo{position:relative;overflow:hidden;border-radius:var(--r,14px);background:var(--ph,linear-gradient(135deg,#333,#111));aspect-ratio:var(--ar,16/10);max-width:100%;isolation:isolate}
.photo::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 50% at var(--gx,70%) var(--gy,30%),rgba(255,255,255,.22),transparent 60%),
  repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 14px);z-index:0}
.photo::after{content:attr(data-label);position:absolute;left:14px;bottom:12px;right:14px;z-index:1;font:500 11px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.photo .ph-icon{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-60%);opacity:.5;z-index:1;color:#fff}
.par-wrap{overflow:hidden;border-radius:var(--r,14px)}
.par-wrap>.photo{border-radius:0;transform:scale(1.15)}

/* scroll-linked word highlight */
.filltext{font:700 clamp(34px,5.6vw,84px)/1.02 var(--display);letter-spacing:-.045em;text-wrap:balance;max-width:20ch}
.filltext .w{color:color-mix(in srgb,var(--ink) 18%,transparent);transition:color .25s linear}
.filltext .w.on{color:var(--ink)}
.filltext .w.hot.on{color:var(--accent)}

/* reveal: always visible at rest, only lifts in */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
  [data-reveal].pre{transform:translateY(40px)}
}

/* pinned horizontal scroller */
.hs{position:relative}
.hs-pin{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,40px);padding-block:clamp(24px,5vh,56px)}
.hs.pinned .hs-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hs-track{display:flex;gap:clamp(16px,2vw,28px);padding-left:max(24px,calc((100vw - var(--maxw))/2 + 24px));padding-right:max(24px,env(safe-area-inset-right,0px));will-change:transform}
.hs-track::after{content:"";flex:0 0 max(24px,calc((100vw - var(--maxw))/2))}
.hs:not(.pinned) .hs-track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hs:not(.pinned) .hs-track>*{scroll-snap-align:start}
.hs-bar{height:2px;background:var(--line);width:min(220px,40vw);overflow:hidden}
.hs-bar i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(.05)}

/* stacking sticky cards */
.stack{display:grid;gap:0}
.stack-card{position:sticky;top:calc(80px + var(--i,0) * 22px);border-radius:24px;overflow:hidden;margin-bottom:clamp(40px,8vh,90px);transform-origin:top center;will-change:transform}

/* counters */
[data-count]{font-variant-numeric:tabular-nums}

/* next project */
.cs-next{display:block;text-decoration:none;margin-top:clamp(100px,14vw,200px);padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--line);position:relative;overflow:hidden}
.cs-next .label{display:block;margin-bottom:16px}
.cs-next b{display:block;font:800 clamp(56px,12vw,180px)/.86 var(--display);letter-spacing:-.06em;transition:transform .6s cubic-bezier(.2,.7,.2,1),color .4s ease}
.cs-next:hover b{transform:translateX(16px);color:var(--accent)}

/* status / placeholder chip */
.chip-ph{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px dashed currentColor;opacity:.75}

@media (prefers-reduced-motion:reduce){.filltext .w{color:var(--ink)}.stack-card{position:relative;top:0}}

/* fixes */
.photo{margin:0}
body[data-case] .contact,body[data-case] footer{--ink:var(--cbg);--paper:var(--cfg)}

/* ---------- real-image frames ---------- */
.shot{margin:0;border-radius:var(--r,14px);overflow:hidden;background:var(--tint);max-width:100%}
.shot img{display:block;width:100%;height:auto}
.browser{margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 90px -40px rgba(0,0,0,.55),0 0 0 1px rgba(127,127,127,.18);max-width:100%}
.browser .bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#EDEDED}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#D1D1D1}
.browser .bar i:nth-child(1){background:#FF5F57}.browser .bar i:nth-child(2){background:#FEBC2E}.browser .bar i:nth-child(3){background:#28C840}
.browser .bar span{margin-left:12px;flex:1;max-width:340px;height:18px;border-radius:5px;background:#fff;font:500 10.5px/18px var(--mono);color:#777;padding:0 8px;overflow:hidden;white-space:nowrap}
.browser img{display:block;width:100%;height:auto}
.devphone{position:relative;border-radius:40px;background:#0d0d10;padding:9px;box-shadow:0 40px 80px -30px rgba(0,0,0,.55),inset 0 0 0 2px #2a2a30;max-width:100%}
.devphone img{display:block;width:100%;height:auto;border-radius:31px}
.devphone::before{content:"";position:absolute;top:17px;left:50%;transform:translateX(-50%);width:28%;height:20px;border-radius:999px;background:#0d0d10;z-index:2}
.cap-s{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:12px}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start}
@media (max-width:760px){.duo,.trio{grid-template-columns:1fr}}
.cs-figs{margin-top:clamp(32px,5vw,64px)}

/* drag to compare */
.compare{position:relative;border-radius:16px;overflow:hidden;user-select:none;touch-action:pan-y;background:var(--tint);max-width:100%}
.compare img{display:block;width:100%;height:auto;pointer-events:none}
.compare .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%))}
.compare .after img{width:100%;height:100%;object-fit:cover}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.compare .handle::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font:700 18px/1 var(--body);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.compare input{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.compare .tagl,.compare .tagr{position:absolute;top:12px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;z-index:2;pointer-events:none}
.compare .tagl{left:12px}.compare .tagr{right:12px}
.compare input:focus-visible+.handle::after{outline:2px solid var(--accent);outline-offset:3px}

/* big stat row */
.statrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
@media (max-width:760px){.statrow{grid-template-columns:1fr}}
.stat{border-top:1px solid var(--ink);padding-top:16px;display:grid;gap:6px}
.stat b{font:800 clamp(56px,7vw,110px)/.88 var(--display);letter-spacing:-.055em}
.stat span{color:var(--ink-2)}

.compare{cursor:ew-resize;touch-action:pan-y}
.compare .handle{transition:width .25s ease,transform .25s ease}
.compare .handle::after{content:"";background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat;width:52px;height:52px;transition:transform .35s cubic-bezier(.34,1.6,.5,1),box-shadow .3s ease,background-color .3s ease}
.compare:hover .handle::after,.compare.dragging .handle::after{transform:translate(-50%,-50%) scale(1.14);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 22%,transparent),0 10px 28px rgba(0,0,0,.3)}
.compare.dragging .handle{width:3px}
.compare .handle::before{content:"Drag";position:absolute;top:calc(50% + 40px);left:50%;transform:translateX(-50%);font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:rgba(0,0,0,.7);color:#fff;white-space:nowrap;opacity:.9;transition:opacity .3s}
.compare.dragging .handle::before{opacity:0}
.compare.hint{animation:cmpHint 1.6s cubic-bezier(.45,0,.2,1)}
@keyframes cmpHint{0%,100%{--pos:50%}30%{--pos:42%}65%{--pos:58%}}
@property --pos{syntax:'<percentage>';inherits:true;initial-value:50%}
@media (prefers-reduced-motion:reduce){.compare.hint{animation:none}}
/* realistic iPhone frames are baked into the images */
figure.devphone.real{background:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important;margin:0;max-width:100%}
figure.devphone.real::before{display:none!important}
figure.devphone.real img{border-radius:0!important;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
@media (max-width:820px){body[data-case] header.nav{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}}
.hs:not(.pinned) .hs-track{scroll-padding-inline:24px}
@media (max-width:600px){.hs:not(.pinned) .hs-track{padding-left:16px;scroll-padding-inline:16px;gap:12px}.hs:not(.pinned) .hs-track::after{flex-basis:4px}.hs:not(.pinned) .soo-site{flex-basis:calc(100vw - 56px)!important}}
@media (max-width:820px){
  .hs.pinned .hs-pin{padding-top:76px;justify-content:center}
  .hs.pinned .hs-track{padding-left:16px;gap:12px}
  .hs.pinned .hs-track::after{flex-basis:16px}
  .hs.pinned .soo-site{flex-basis:calc(100vw - 56px)!important}
  .hs.pinned .jds-screen,.hs.pinned .mc-phones{flex-basis:min(64vw,260px)}
  .hs.pinned .devphone.real img{max-height:52svh;width:auto;margin:0 auto}
}