/* LI3 - Made in Sialkot. Uses tokens from site.css (--paper --ink --green --maroon --brass --serif --sans --cl-ease). */
.sk{background:var(--paper);color:var(--ink);position:relative}
.sk-intro{padding-block:var(--s7) clamp(5rem,7vw,9rem);max-width:1480px}
.sk-intro h2{max-width:14ch}
.sk-lead{font:500 clamp(2.2rem,2.2vw,3rem)/1.35 var(--serif);max-width:44ch;margin-top:3rem;color:rgb(31 26 20 / .86)}

/* ---- steps strip ---- */
.sk-steps{background:var(--green);color:var(--paper);position:relative}
.sk-pin{padding-block:clamp(4rem,7vh,7rem);display:flex;flex-direction:column;justify-content:center}
.sk-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;padding-inline:var(--gutter);margin-bottom:clamp(2rem,4vh,4rem)}
.sk-head h3{font-size:clamp(3rem,3.6vw,5.2rem);line-height:1;text-transform:uppercase;letter-spacing:.005em}
.sk-count{font:600 1.4rem/1 var(--sans);letter-spacing:.2em;color:var(--brass-lt);font-variant-numeric:tabular-nums;white-space:nowrap}
.sk-track{display:flex;gap:clamp(2rem,2.6vw,4rem);padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:thin;scrollbar-color:var(--brass) transparent;padding-bottom:2rem;will-change:auto}
.sk-step{flex:0 0 clamp(30rem,78vw,58rem);scroll-snap-align:start;display:flex;flex-direction:column;min-width:0}
.sk-step figure{aspect-ratio:3/2;overflow:hidden;background:#173b29;border-radius:2px}
.sk-step img{width:100%;height:100%;object-fit:cover}
.sk-n{font:600 1.3rem/1 var(--sans);letter-spacing:.2em;color:var(--brass-lt);margin-top:2rem}
.sk-step h4{font:600 clamp(2.8rem,2.6vw,4rem)/1.02 var(--serif);margin:.8rem 0 .8rem}
.sk-step p:last-child{font:500 clamp(1.7rem,1.35vw,2rem)/1.45 var(--serif);color:rgb(244 237 220 / .86);max-width:30ch}
.sk-bar{display:none;height:2px;background:rgb(244 237 220 / .22);margin:2rem var(--gutter) 0;position:relative}
.sk-bar i{position:absolute;inset:0;background:var(--brass);transform:scaleX(0);transform-origin:left}

/* pinned (sideways on scroll): class set by js, wide screens, motion allowed */
.sk-steps.is-pinned{height:var(--sk-h,300vh)}
.sk-steps.is-pinned .sk-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding-block:0}
.sk-steps.is-pinned .sk-track{overflow:visible;padding-bottom:0;scroll-snap-type:none;will-change:transform;width:max-content}
.sk-steps.is-pinned .sk-step{flex-basis:clamp(34rem,36vw,56rem)}
.sk-steps.is-pinned .sk-step:nth-child(even){margin-top:clamp(2rem,7vh,7rem)}
.sk-steps.is-pinned .sk-bar{display:block}
.sk-steps.is-pinned .sk-head{margin-bottom:clamp(1rem,3vh,3rem)}
.sk-steps.is-pinned .sk-track{padding-right:calc(var(--gutter) + 4vw)}

/* ---- commission ---- */
.sk-commission{display:grid;gap:clamp(4rem,6vw,8rem);align-items:start;padding-block:var(--s7);max-width:1480px}
@media (min-width:960px){.sk-commission{grid-template-columns:1.15fr 1fr}.sk-pic{position:sticky;top:10vh}}
.sk-title{font-size:clamp(3.4rem,4.4vw,6rem);text-transform:uppercase;line-height:.98;margin-bottom:1.6rem}
.sk-sub{font:500 clamp(1.9rem,1.6vw,2.3rem)/1.4 var(--serif);max-width:40ch;margin-bottom:3.4rem;color:rgb(31 26 20 / .8)}
.sk-form fieldset{border:0;padding:0;margin:0 0 2.6rem;min-width:0}
.sk-form legend,.sk-lab{font:600 1.2rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgb(31 26 20 / .7);padding:0;margin-bottom:1rem;display:block}
.sk-lab small{text-transform:none;letter-spacing:0;font-weight:500;font-size:1.2rem}
.sk-seg{display:flex;flex-wrap:wrap;gap:.8rem}
.sk-seg label,.sk-swatches label{cursor:pointer}
.sk-seg input,.sk-swatches input{position:absolute;opacity:0;pointer-events:none}
.sk-seg span{display:inline-block;padding:1.1rem 1.8rem;border:1px solid var(--ink);border-radius:999px;font:600 1.3rem/1 var(--sans);color:var(--ink);transition:background-color .25s var(--cl-ease),color .25s var(--cl-ease)}
.sk-seg input:checked+span{background:var(--ink);color:var(--paper)}
.sk-seg input:focus-visible+span,.sk-swatches input:focus-visible+i{outline:2px solid var(--brass);outline-offset:3px}
.sk-seg--stack{flex-direction:column;gap:1rem}
.sk-seg--stack label{display:block}
.sk-seg--stack span{display:block;border-radius:4px;padding:1.4rem 1.8rem;width:100%}
.sk-seg--stack b{display:block;font:600 2.2rem/1.1 var(--serif)}
.sk-seg--stack em{display:block;font:500 1.5rem/1.4 var(--sans);font-style:normal;margin-top:.5rem;opacity:.82}
.sk-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:0}
.sk-row>*{margin-bottom:2.6rem}
.sk-field{display:block;margin-bottom:2.6rem}
.sk-field select,.sk-field input{width:100%;min-height:4.8rem;padding:0 1.4rem;background:var(--paper);border:1px solid rgb(31 26 20 / .5);border-radius:4px;font:500 1.5rem var(--sans);color:var(--ink)}
.sk-row .sk-field{margin-bottom:2.6rem}
.sk-swatches{display:flex;flex-wrap:wrap;gap:1.4rem}
.sk-swatches label{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.sk-swatches i{display:block;width:4rem;height:4rem;border-radius:50%;background:var(--c);border:1px solid rgb(31 26 20 / .45);box-shadow:0 0 0 0 var(--brass);transition:box-shadow .25s var(--cl-ease)}
.sk-swatches input:checked+i{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--brass)}
.sk-swatches span{font:500 1.2rem var(--sans)}
.sk-summary{font:500 clamp(1.9rem,1.5vw,2.2rem)/1.4 var(--serif);color:var(--maroon);margin:0 0 2.4rem;min-height:3em}
.sk-thanks{padding:4rem 0;border-top:var(--rule)}
.sk-thanks[hidden]{display:none}
.sk-thanks p{font:600 clamp(3rem,3vw,4.4rem)/1.1 var(--serif);color:var(--green)}
.sk-again{margin-top:2rem;background:none;border:0;border-bottom:1px solid var(--ink);padding:0 0 .3rem;font:600 1.4rem var(--sans)}
.sk-pic{background:var(--paper);padding:3rem 2rem 2.4rem;text-align:center;box-shadow:0 2rem 5rem rgb(0 0 0 / .14);margin:0}

@media (max-width:640px){
  .sk-row{grid-template-columns:1fr;gap:0}
  .sk-head{flex-wrap:wrap}
}


/* LI5: step 07, the bat that builds itself and takes a name */
.sk-step--name .sk-namefig{position:relative;background:#173b29}
.sk-step--name .sk-namefig svg{position:absolute;inset:4%;width:92%;height:92%;display:block;overflow:visible}
.sk-go{color:var(--brass-lt);border-bottom:1px solid var(--brass-lt);text-decoration:none;white-space:nowrap}
.sk-seg input:checked+span{background:var(--green);color:var(--paper);border-color:var(--green)}

/* LI6: real pictures of the bat (2 willows x 3 grips), lively preview */
.sk-pic{--pic-bg:#F5EEDC;background:var(--pic-bg);padding:2.4rem 2rem 2rem;position:relative}
.sk-stage{position:relative;width:auto;height:min(66rem,72vh);aspect-ratio:2/3;max-width:100%;margin-inline:auto;perspective:1100px}
.sk-tilt{position:absolute;inset:0;transform-origin:50% 62%;will-change:transform}
.sk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .25s var(--cl-ease);-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 52%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 50% 52%,#000 70%,transparent 100%)}
.sk-img.is-on{opacity:1}
.sk-img.is-top{z-index:2}
.sk-sweep{position:absolute;inset:33% 40% 2.5% 40%;overflow:hidden;pointer-events:none;z-index:3;border-radius:3px}
.sk-sweep b{position:absolute;left:-20%;right:-20%;top:0;height:42%;opacity:0;transform:translateY(-110%);background:linear-gradient(180deg,transparent,rgb(255 250 235 / .55) 50%,transparent);mix-blend-mode:soft-light}
.sk-over{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.sk-over text{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700}
#sk-name{paint-order:stroke;stroke:#2d1b0b;stroke-opacity:.3;stroke-width:.6px}
#sk-sigs path{transition:opacity .3s var(--cl-ease)}
.sk-cap{font:500 1.3rem var(--sans);letter-spacing:.06em;color:rgb(31 26 20 / .65);margin-top:1.2rem}
/* form additions */
.sk-seg small{display:block;font:500 1.1rem/1.2 var(--sans);margin-top:.4rem;opacity:.8}
.sk-seg input:checked+span small{opacity:.9}
.sk-fixed{font:500 1.4rem/1.4 var(--sans);color:rgb(31 26 20 / .72);margin:1rem 0 0;max-width:46ch}
.sk-seg[hidden],.sk-fixed[hidden],.sk-who[hidden]{display:none}
.sk-switch{display:flex;align-items:center;gap:1.2rem;cursor:pointer;font:600 1.5rem var(--sans)}
.sk-switch input{position:absolute;opacity:0;pointer-events:none}
.sk-switch i{display:block;width:5rem;height:2.8rem;border-radius:999px;border:1px solid var(--ink);position:relative;transition:background-color .25s var(--cl-ease)}
.sk-switch i::after{content:"";position:absolute;left:.3rem;top:.3rem;width:2rem;height:2rem;border-radius:50%;background:var(--ink);transition:transform .25s var(--cl-ease),background-color .25s var(--cl-ease)}
.sk-switch input:checked+i{background:var(--green);border-color:var(--green)}
.sk-switch input:checked+i::after{transform:translateX(2.2rem);background:var(--paper)}
.sk-switch input:focus-visible+i{outline:2px solid var(--brass);outline-offset:3px}
.sk-who{margin-top:1.6rem}
.sk-who p{font:500 1.6rem/1.45 var(--serif);max-width:44ch;margin-bottom:1.4rem;color:rgb(31 26 20 / .85)}
.sk-who .sk-row{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.sk-img,#sk-sigs path,.sk-switch i,.sk-switch i::after{transition:none}}
.cl-reduce .sk-img,.cl-reduce #sk-sigs path{transition:none}

/* ===== LI7: Pavilion night (tokens from site.css) - sialkot = s1, commission panel + bat picture box = s2 ===== */
.sk { background: var(--s1); color: var(--tx-mid); }
.sk-lead, .sk-sub, .sk-who p, .sk-fixed { color: var(--tx-mid); }
.sk-steps { background: var(--ground); color: var(--tx-mid); border-block: 1px solid var(--line); }
.sk-head h3, .sk-step h4, .sk-title { color: var(--tx-hi); }
.sk-count, .sk-n { color: var(--brass); }
.sk-track { scrollbar-color: var(--brass) transparent; }
.sk-step figure { background: var(--s2); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line); }
.sk-step p:last-child { color: var(--tx-mid); }
.sk-bar { background: var(--line); }
.sk-go { color: var(--brass); border-bottom-color: var(--brass); }
.sk-step--name .sk-namefig { background: radial-gradient(ellipse 70% 60% at 50% 45%, #322b22, var(--s2) 75%); }
/* commission: the form column is the s2 panel */
.sk-panel { background: var(--s2); padding: clamp(2.4rem, 3.4vw, 4.8rem); box-shadow: inset 0 0 0 1px var(--line), 0 2rem 5rem rgb(5 4 3 / .4); }
.sk-form legend, .sk-lab { color: var(--tx-low); }
.sk-seg span { border-color: var(--line-hi); color: var(--tx-hi); }
.sk-seg input:checked+span { background: rgb(201 166 107 / .18); color: var(--tx-hi); border-color: var(--brass); }
.sk-seg--stack em { opacity: 1; color: var(--tx-mid); }
.sk-field select, .sk-field input { background: var(--s2); border: 1px solid var(--line-hi); color: var(--tx-hi); }
.sk-field input::placeholder { color: var(--tx-low); opacity: 1; }
.sk-field input:focus, .sk-field select:focus { outline: 2px solid var(--brass); outline-offset: 2px; border-color: var(--brass); }
.sk-swatches i { border: 1px solid var(--line-hi); }
.sk-swatches input:checked+i { box-shadow: 0 0 0 3px var(--s2), 0 0 0 5px var(--brass); }
.sk-swatches span { color: var(--tx-mid); }
.sk-summary { color: var(--tx-hi); }
.sk-thanks { border-top: 1px solid var(--line); }
.sk-thanks p { color: var(--tx-hi); }
.sk-again { color: var(--brass); border-bottom-color: var(--brass); }
.sk-switch { color: var(--tx-hi); }
.sk-switch i { border-color: var(--line-hi); }
.sk-switch i::after { background: var(--tx-mid); }
.sk-switch input:checked+i { background: var(--btn); border-color: var(--btn); }
.sk-switch input:checked+i::after { background: var(--ground); }
/* the bat picture box: s2, soft inner shadow so the studio picture does not sit pasted on */
.sk-pic { --pic-bg: var(--s2); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line), 0 2rem 5rem rgb(5 4 3 / .4); }
.sk-cap { color: var(--tx-low); }
/* LI7: the studio picture melts into the s2 frame: dimmed a little, soft falloff on every side (pool of light, not a pasted patch) */
.sk-img { filter: brightness(.8) contrast(1.04) saturate(.95);
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 50%, #000 58%, rgb(0 0 0 / .55) 80%, transparent 100%), linear-gradient(90deg, transparent 0, #000 34%, #000 66%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 68% at 50% 50%, #000 58%, rgb(0 0 0 / .55) 80%, transparent 100%), linear-gradient(90deg, transparent 0, #000 34%, #000 66%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.sk-pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 5rem 1rem rgb(5 4 3 / .55); }
.sk-commission > * { min-width: 0; }
@media (max-width: 640px) { .sk-panel { padding: 2rem 1.6rem; } }