/* Praveen Sawh mockups, round 4: shared pieces.
   Each page sets its own colours and fonts with these variables:
   --bg --bg2 --fg --soft --mut --rule --acc --hi   colours
   --ring --syahi                                    the P mark (ring and dot)
   --ink-rgb                                         line field colour as "r,g,b"
   --sparks  (comma list)   --spark-glow (1 on dark)
   --serif --sans --mono                             fonts */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--serif);font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-transform:inherit;letter-spacing:inherit}
img{display:block;max-width:100%}
::selection{background:var(--fg);color:var(--bg)}
.wrap{max-width:var(--max,1320px);margin:0 auto;padding:0 var(--pad,clamp(20px,4.2vw,60px))}
.cap{font-family:var(--sans);font-size:var(--cap-size,11.5px);letter-spacing:var(--cap-track,.16em);text-transform:uppercase;font-weight:var(--cap-weight,500)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.mut{color:var(--mut)}
.c{text-align:center}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;padding:22px 0 20px;border-bottom:1px solid var(--rule);position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:12px}.brand .ps{width:28px;height:28px}
.top nav{display:flex;align-items:center;gap:28px}
.top nav a{opacity:.72;transition:opacity .3s}.top nav a:hover{opacity:1}

/* the P mark */
.ps{overflow:visible;flex:none}
.ps .ring{fill:var(--ring)}
.ps .syahi{fill:var(--syahi);transform-box:fill-box;transform-origin:center}
.ps .rip{fill:none;stroke:var(--rip,var(--acc));stroke-width:1.4;opacity:0;transform-box:view-box;transform-origin:48px 48px}
.ps.hit .syahi{animation:ps-hit .55s cubic-bezier(.3,1.6,.4,1)}
.ps.hit .rip{animation:ps-rip 1.3s cubic-bezier(.15,.7,.3,1)}
.ps.hit .rip.b{animation-delay:.14s}
@keyframes ps-hit{0%{transform:scale(1)}18%{transform:scale(.86)}100%{transform:scale(1)}}
@keyframes ps-rip{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.75)}}

/* splash: the mark arrives in the middle, strikes, then flies to the header */
.ps-splash{position:fixed;inset:0;z-index:100;cursor:pointer}
.ps-splash .bg{position:absolute;inset:0;background:var(--splash,var(--bg))}
.ps-splash canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ps-splash .big{position:absolute;left:50%;top:50%;width:var(--splash-size,clamp(104px,13vw,164px));aspect-ratio:1;translate:-50% -50%}
.ps-splash .big svg{display:block;width:100%;height:100%;overflow:visible}
.ps-splash .ring{transform-box:view-box;transform-origin:48px 48px}
html.splashing{overflow:hidden}
html.splashing .brand .ps{opacity:0}

/* line field (canvas made by kit.js) */
.ps-field{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* dial (made by kit.js) */
.ps-dial{position:relative;aspect-ratio:1;color:var(--dial,var(--fg))}
.ps-dial>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ps-dial>canvas{position:absolute;left:-30%;top:-30%;width:160%;height:160%;pointer-events:none}
.ps-dial .spin{transform-origin:300px 300px;animation:ps-spin 180s linear infinite}
.ps-dial .spin.rev{animation-duration:120s;animation-direction:reverse}
@keyframes ps-spin{to{transform:rotate(360deg)}}
.ps-dial .trk{fill:none;stroke:currentColor;stroke-opacity:.14;stroke-width:1}
.ps-dial .hatch{fill:var(--hatch-fill,currentColor)}
.ps-dial .edge{fill:none;stroke:var(--ring);stroke-width:.32;vector-effect:none}
.ps-dial .solid{fill:var(--ring)}
.ps-dial .line{fill:none;stroke:var(--ring);stroke-width:.42}
.ps-dial .sy{fill:var(--syahi);transform-box:fill-box;transform-origin:center}
.ps-dial .rp{fill:none;stroke:var(--acc);stroke-width:1.5;opacity:0;transform-origin:300px 300px}
.ps-dial.hit .sy{animation:ps-hit .55s cubic-bezier(.3,1.6,.4,1)}
.ps-dial.hit .rp{animation:ps-rip2 1.5s cubic-bezier(.15,.7,.3,1)}
.ps-dial.hit .rp.b{animation-delay:.16s}
@keyframes ps-rip2{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
.ps-dial.click{cursor:pointer}

/* reveal */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* standard sections (centred by default, add class "lft" on <body> to left-align) */
.intro{padding:clamp(56px,8vw,112px) 0;border-top:1px solid var(--rule)}
.intro p{font-size:clamp(25px,2.9vw,42px);line-height:1.24;font-weight:var(--intro-weight,350);letter-spacing:-.012em;max-width:23em;margin:0 auto;text-align:center}
.intro em{font-style:italic;color:var(--hi)}
.intro a{background:linear-gradient(var(--acc),var(--acc)) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.creds{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cred{padding:clamp(28px,3.4vw,44px) 18px;text-align:center}
.cred+.cred{border-left:1px solid var(--rule)}
.cred b{display:block;font-weight:var(--cred-weight,380);font-style:var(--cred-style,italic);font-size:clamp(26px,2.7vw,38px);line-height:1.05;letter-spacing:-.015em;margin-bottom:12px}
.cred .cap{color:var(--mut);letter-spacing:.12em;font-size:11px;line-height:1.6}
section.blk{padding:clamp(88px,11vw,160px) 0 0}
.h{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:clamp(40px,5vw,64px)}
.h h2{font-weight:var(--h-weight,360);font-size:clamp(34px,4vw,56px);letter-spacing:-.02em;line-height:1}
.h h2 em{font-style:italic}
.work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.piece{display:block}
.frame{background:var(--bg2);border:1px solid var(--rule);padding:10px;transition:transform .8s cubic-bezier(.2,.7,.2,1),border-color .5s}
.frame img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.piece:hover .frame{transform:translateY(-5px);border-color:var(--mut)}
.piece .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:20px}
.piece h3{font-weight:var(--h3-weight,450);font-size:clamp(24px,2vw,30px);letter-spacing:-.012em;line-height:1.1}
.piece p{font-size:16.5px;color:var(--mut);margin-top:8px;line-height:1.5}
.more{margin-top:44px}
.more a{border-bottom:1px solid var(--rule);padding-bottom:3px;transition:border-color .3s}
.more a:hover{border-color:var(--fg)}
.ways{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,36px);text-align:center}
.way .n{font-style:italic;color:var(--acc);font-size:22px}
.way h3{font-weight:var(--h3-weight,450);font-size:22px;margin:10px 0 8px;letter-spacing:-.01em}
.way p{color:var(--mut);font-size:16.5px;max-width:22ch;margin:0 auto}
.story{max-width:40rem;margin:0 auto;text-align:center}
.story .q{font-style:italic;font-weight:var(--q-weight,350);font-size:clamp(28px,3.2vw,44px);line-height:1.18;letter-spacing:-.015em;margin-bottom:28px}
.story p.t{font-size:20px;color:var(--soft)}
.services{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;margin-top:44px;color:var(--mut)}
.contact{padding:clamp(110px,14vw,200px) 0 clamp(64px,8vw,104px);text-align:center}
.contact h2{font-weight:var(--contact-weight,340);font-style:italic;font-size:clamp(42px,6.6vw,104px);line-height:1;letter-spacing:-.03em}
.mail{display:inline-block;margin-top:clamp(28px,3vw,42px);font-size:clamp(22px,2.6vw,36px);border-bottom:1px solid var(--fg);padding-bottom:4px;transition:color .3s,border-color .3s}
.mail:hover{color:var(--acc);border-color:var(--acc)}
.copy{display:flex;align-items:center;gap:14px;margin:26px auto 0;padding:10px 12px 10px 16px;border:1px solid var(--rule);border-radius:8px;background:var(--bg2);font-family:var(--mono);font-size:12.5px;transition:border-color .3s}
.copy:hover{border-color:var(--mut)}
.copy b{font-weight:400;color:var(--acc);display:flex;align-items:center;gap:6px;border-left:1px solid var(--rule);padding-left:12px}
.copy b svg{width:13px;height:13px}
footer.site{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0 34px;border-top:1px solid var(--rule);color:var(--mut)}

/* left-aligned body */
.lft .intro p,.lft .story,.lft .contact,.lft .ways,.lft .cred{text-align:left}
.lft .intro p,.lft .story{margin-left:0}
.lft .h{align-items:flex-start}
.lft .way p{margin:0}
.lft .services{justify-content:flex-start}
.lft .copy{margin-left:0}
.lft .more{text-align:left}

@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.ps.hit .syahi,.ps.hit .rip,.ps-dial .spin,.ps-dial.hit .sy,.ps-dial.hit .rp{animation:none}html{scroll-behavior:auto}}
@media (max-width:900px){
  .creds{grid-template-columns:1fr 1fr}.cred:nth-child(3){border-left:0}.cred:nth-child(n+3){border-top:1px solid var(--rule)}
  .work{grid-template-columns:1fr;gap:48px}
  .ways{grid-template-columns:1fr 1fr;row-gap:40px}
}
@media (max-width:520px){.top nav a:not(:last-of-type){display:none}.ways{grid-template-columns:1fr}}