/* Jon Filin — commission work (index + project pages). Light theme, project pages only. */
:root{
  --ink:#0a0a0a;--mute:rgba(10,10,10,.64);--body:rgba(10,10,10,.75);--rule:rgba(10,10,10,.12);
  --gx:clamp(20px,3.2vw,48px);--gap:clamp(12px,1.6vw,24px);--sec:clamp(140px,16vw,260px);
  --ease:cubic-bezier(.16,1,.3,1);--serif:'Instrument Serif',Georgia,serif;--sans:'Geist',system-ui,sans-serif
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.pp{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:clip}
.pp a{color:var(--ink);text-decoration:none;transition:color .2s,border-color .2s,padding .3s var(--ease)}
.pp a:hover{color:#000}
.pp button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.pp a:focus-visible,.pp button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pp img,.pp video{display:block;width:100%;height:auto}
.cap{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ul{border-bottom:1px solid rgba(10,10,10,.4)}
.ul:hover{border-bottom-color:var(--ink)}

/* grain (same as the main site) */
.pp-grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav */
.pp-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gx);height:76px;
  background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.94) 10%,rgba(255,255,255,.8) 24%,rgba(255,255,255,.6) 40%,rgba(255,255,255,.38) 58%,rgba(255,255,255,.18) 76%,rgba(255,255,255,.05) 90%,rgba(255,255,255,0) 100%)}
.pp-logo{display:flex;align-items:center;height:32px}
.pp-logo img{height:24px;width:auto;filter:brightness(0)}
.pp-right{display:flex;align-items:center;gap:clamp(20px,3vw,40px)}
.pp-links{display:flex;gap:clamp(16px,2.4vw,32px);list-style:none;margin:0;padding:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.pp-links a{color:var(--mute)}
.pp-links a[aria-current]{color:var(--ink)}
.pp-lang{display:flex;gap:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.pp-lang button{color:rgba(10,10,10,.42);letter-spacing:inherit;text-transform:inherit}
.pp-lang button[aria-pressed="true"]{color:var(--ink)}
.pp-lang span{color:rgba(10,10,10,.3)}
.pp-menu-btn{display:none;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.pp-menu{position:fixed;inset:0;z-index:60;background:#fff;display:none;flex-direction:column;justify-content:center;gap:20px;padding:0 var(--gx)}
.pp-menu.open{display:flex}
.pp-menu a{font-family:var(--serif);font-size:44px;line-height:1}
.pp-menu .pp-menu-close{position:absolute;top:26px;right:var(--gx);font-size:11px;letter-spacing:.08em;text-transform:uppercase}

/* layout */
.pp-main{max-width:1600px;margin:0 auto;padding:0 var(--gx)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.c-label{grid-column:1/span 3}.c-lead{grid-column:4/span 9}.c-body{grid-column:7/span 5}.c-head{grid-column:1/span 7}.c-text{grid-column:8/span 5}

/* header */
.pp-head{padding:clamp(48px,9vw,140px) 0 clamp(40px,5vw,72px)}
.pp-back{display:flex;justify-content:flex-end;margin-bottom:clamp(24px,3vw,40px)}
.pp-back a{color:var(--mute)}
.pp-back a:hover{color:var(--ink)}
.pp-h1{font-family:var(--serif);font-weight:400;font-size:clamp(72px,15vw,240px);line-height:.84;letter-spacing:-.035em;margin:0}
.pp-sub{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,34px);line-height:1.2;color:rgba(10,10,10,.8);margin:clamp(20px,2.4vw,32px) 0 0;max-width:780px;text-wrap:balance}
.pp-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px clamp(20px,3vw,48px);margin:clamp(56px,7vw,112px) 0 0}
.pp-meta>div{display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(10,10,10,.14);padding-top:16px}
.pp-meta dd{margin:0;font-size:15px;line-height:1.5;text-wrap:pretty}
.pp-hero{margin:0 0 clamp(120px,14vw,220px)}
.media{overflow:hidden;border-radius:8px}

/* intro */
.pp-intro{row-gap:48px;margin-bottom:var(--sec)}
.pp-intro .c-label{padding-top:12px}
.pp-intro .c-label.second{padding-top:4px;margin-top:clamp(0px,4vw,56px)}
.pp-lead{font-family:var(--serif);font-size:clamp(30px,3.6vw,58px);line-height:1.1;letter-spacing:-.01em;margin:0;text-wrap:pretty}
.pp-body{font-size:16px;line-height:1.75;color:var(--body);margin:0;text-wrap:pretty}
.pp-intro .c-body{margin-top:clamp(0px,4vw,56px)}

/* toc */
.pp-toc{row-gap:20px;margin-bottom:var(--sec)}
.pp-toc .c-label{padding-top:24px}
.pp-toc ol{list-style:none;margin:0;padding:0}
.pp-toc li{border-top:1px solid var(--rule)}
.pp-toc a{display:flex;align-items:baseline;gap:clamp(16px,3vw,48px);padding:18px 0}
.pp-toc a:hover{padding-left:12px}
.pp-toc .n{font-size:11px;letter-spacing:.08em;color:var(--mute);min-width:28px}
.pp-toc .t{font-family:var(--serif);font-size:clamp(28px,3vw,48px);line-height:1;flex:1}

/* chapters */
.pp-ch{margin-bottom:var(--sec);scroll-margin-top:96px}
.pp-chhead{row-gap:28px;align-items:end;margin-bottom:clamp(48px,6vw,96px)}
.pp-chhead .c-head{display:flex;flex-direction:column;gap:18px}
.pp-h2{font-family:var(--serif);font-weight:400;font-size:clamp(56px,8vw,136px);line-height:.88;letter-spacing:-.03em;margin:0}
.pp-rows{display:flex;flex-direction:column;gap:var(--gap)}
.pp-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.fig{margin:var(--m,0);display:flex;flex-direction:column;gap:12px;grid-column:var(--c);grid-row:var(--r,auto);align-self:var(--al,start);position:relative;z-index:1}
.fig.sk{z-index:2;will-change:transform}
.fig figcaption{font-size:11px;letter-spacing:.04em;color:var(--mute);text-align:var(--ca,left)}

/* quote, stanza */
.pp-quote{row-gap:20px;margin:clamp(40px,6vw,96px) 0 0}
.pp-quote figcaption{padding-top:14px}
.pp-quote blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(30px,3.8vw,62px);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.pp-story{gap:var(--gap);align-items:start}
.pp-story .fig{grid-column:1/span 5;position:sticky;top:96px}
.pp-stanza{grid-column:7/span 6;display:flex;flex-direction:column;gap:clamp(40px,5vw,80px);padding:clamp(40px,10vh,120px) 0}
.pp-stanza p{margin:0;display:flex;flex-direction:column;font-family:var(--serif);font-size:clamp(28px,3vw,46px);line-height:1.15;letter-spacing:-.01em;text-wrap:pretty}

/* carousel */
.pp-track-wrap{margin-right:calc(50% - 50vw)}
.pp-track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-right:var(--gx)}
.pp-track::-webkit-scrollbar{display:none}
.pp-track .fig{flex:0 0 clamp(260px,34vw,580px);scroll-snap-align:start}
.pp-track-nav{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:clamp(24px,3vw,40px);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.pp-track-nav .count{color:var(--mute);font-variant-numeric:tabular-nums}
.pp-track-nav div{display:flex;gap:28px}
.pp-track-nav button{letter-spacing:inherit;text-transform:inherit}
.pp-track-nav button[disabled]{color:rgba(10,10,10,.42);cursor:default}

/* faq */
.pp-faq{row-gap:32px;margin-bottom:clamp(120px,14vw,200px)}
.pp-faq h2.cap{margin:0;font-weight:400;padding-top:30px}
.pp-faq .item{border-top:1px solid var(--rule)}
.pp-faq .list{border-bottom:1px solid var(--rule)}
.pp-faq h3{margin:0}
.pp-faq h3 button{display:flex;justify-content:space-between;align-items:baseline;gap:24px;width:100%;padding:24px 0;text-align:left;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,30px);line-height:1.2}
.pp-faq h3 button i{font-style:normal;font-family:var(--sans);font-size:18px;color:var(--mute)}
.pp-faq .a{margin:0 0 28px;max-width:640px;font-size:15px;line-height:1.75;color:rgba(10,10,10,.72)}
.pp-faq .a[hidden]{display:none}

/* prev/next, band, footer */
.pp-pn{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;border-top:1px solid var(--rule);padding:40px 0}
.pp-pn a{display:flex;flex-direction:column;gap:12px}
.pp-pn a.next{align-items:flex-end;text-align:right}
.pp-pn .t{font-family:var(--serif);font-size:clamp(32px,3.6vw,56px);line-height:1}
.pp-band{padding:clamp(120px,14vw,220px) 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(24px,3vw,40px)}
.pp-band p{font-family:var(--serif);font-size:clamp(44px,7vw,120px);line-height:.95;letter-spacing:-.03em;margin:0;max-width:1200px;text-wrap:balance}
.pp-band a{font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(10,10,10,.35);padding-bottom:5px}
.pp-band a:hover{border-bottom-color:var(--ink)}
.pp-foot{padding:28px var(--gx) 36px;border-top:1px solid rgba(10,10,10,.08);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.pp-foot nav{display:flex;gap:24px;flex-wrap:wrap}
.pp-foot .r{color:var(--mute)}

/* index (commission work) */
.ix-head{padding:clamp(48px,9vw,140px) 0 clamp(48px,6vw,96px)}
.ix-filters{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 clamp(32px,4vw,56px);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.ix-filters button{color:var(--mute);letter-spacing:inherit;text-transform:inherit;padding-bottom:4px;border-bottom:1px solid transparent}
.ix-filters button:hover{color:var(--ink)}
.ix-filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.ix-filters sup{font-size:9px;margin-left:3px}
.ix-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(48px,6vw,96px) var(--gap);margin-bottom:var(--sec)}
.ix-card{grid-column:span 4;display:flex;flex-direction:column;gap:16px}
.ix-card[hidden]{display:none}
.ix-card .media{aspect-ratio:4/5}
.ix-card img{height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.ix-card:hover img{transform:scale(1.04)}
.ix-card .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.ix-card .t{font-family:var(--serif);font-size:clamp(28px,2.6vw,40px);line-height:1}
.ix-card .y{font-size:11px;letter-spacing:.08em;color:var(--mute);font-variant-numeric:tabular-nums}
.ix-card .cap{margin-top:-6px}
.ix-empty{grid-column:1/-1;font-family:var(--serif);font-style:italic;font-size:24px;color:var(--mute)}
.ix-how{row-gap:32px;margin-bottom:var(--sec)}
.ix-how h2.cap{margin:0;font-weight:400;padding-top:8px}
.ix-how .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:40px var(--gap)}
.ix-how h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,36px);line-height:1.05;margin:0 0 14px}
.ix-how p{margin:0;font-size:15px;line-height:1.75;color:var(--body)}

/* motion (progressive enhancement: only when JS has run) */
.js [data-open]{transform:scale(.9);transition:transform 1.6s var(--ease)}
.js [data-open]>img,.js [data-open]>video{transform:scale(1.18);transition:transform 2s var(--ease)}
.js [data-open].in,.js [data-open].in>img,.js [data-open].in>video{transform:none}
.js [data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-open],.js [data-open]>img,.js [data-open]>video,.js [data-reveal]{transform:none;opacity:1;transition:none}
}

@media (max-width:1100px){.ix-card{grid-column:span 6}}
@media (max-width:900px){.pp-links{display:none}.pp-menu-btn{display:block}}
@media (max-width:759px){
  .c-label,.c-lead,.c-body,.c-head,.c-text{grid-column:1/-1}
  .pp-intro .c-label.second,.pp-intro .c-body{margin-top:0}
  .fig{grid-column:var(--n,1/-1);grid-row:auto;align-self:start;margin:0}
  .fig figcaption{text-align:left}
  .fig.sk{transform:none!important}
  .pp-story .fig{grid-column:1/-1;position:static}
  .pp-stanza{grid-column:1/-1;padding:24px 0 0}
  .ix-card{grid-column:1/-1}
}