
/* ===== portfolio template ===== */
.pf-head{position:relative;min-height:100svh;padding:120px var(--pad) var(--pad);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.pf-crumbs{display:flex;justify-content:space-between;gap:16px}
.pf-crumbs a{opacity:.7;transition:opacity .3s}.pf-crumbs a:hover{opacity:1}
.pf-title{align-self:center;display:grid;grid-template-columns:auto 1fr;align-items:start;column-gap:clamp(10px,1.2vw,20px)}
.pf-num{font-family:var(--f-mark);font-size:clamp(18px,1.9vw,34px);line-height:1;padding-top:.15em}
.pf-title h1{font-family:var(--f-head);text-transform:uppercase;font-weight:400;font-size:clamp(64px,13.5vw,260px);line-height:.82;letter-spacing:-.01em}
.pf-sub{font-family:var(--f-script);font-size:clamp(26px,3vw,52px);line-height:1;margin-top:2vh;grid-column:2}
.pf-meta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #fff}
.pf-meta div{padding:14px 0 0;display:flex;flex-direction:column;gap:6px}
.pf-meta b{font-weight:400;font-family:var(--f-head);text-transform:uppercase;font-size:clamp(15px,1.3vw,21px)}
.pf-cover{position:relative;height:110svh;overflow:hidden;clip-path:inset(12% 8% 12% 8%)}
.pf-cover img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover}
.pf-text{display:grid;grid-template-columns:3fr 5fr 4fr;gap:var(--pad);padding:18vh var(--pad) 14vh}
.pf-text .lead{font-family:var(--f-head);text-transform:uppercase;font-size:clamp(26px,2.6vw,44px);line-height:1.08}
.pf-text .body p+p{margin-top:1.1em}
.pf-text .body{font-size:clamp(15px,1.15vw,18px)}
.pullq{padding:10vh var(--pad);text-align:center;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.pullq p{font-family:var(--f-script);font-size:clamp(46px,8vw,150px);line-height:.95}
.pullq span{display:block;margin-top:3vh}
/* card rail (pinned, horizontal) */
.rail{position:relative;overflow:hidden}
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;padding:96px var(--pad) 0}
.rail-head h2{font-family:var(--f-head);text-transform:uppercase;font-weight:400;font-size:clamp(40px,6vw,100px);line-height:.9}
.rail-track{display:flex;gap:clamp(18px,2.6vw,44px);padding:6vh var(--pad) 10vh;width:max-content}
.rail-card{width:clamp(220px,21vw,340px);flex:0 0 auto;cursor:none;perspective:1400px}
.rail-card .flip{width:100%;aspect-ratio:694/1200}
.rail-card .face{border:1px solid #fff;box-shadow:8px 8px 0 #fff}
.rail-card .back{background:#000}
.rail-card figcaption{display:flex;justify-content:space-between;padding-top:18px}
/* gallery grid with lightbox */
.gal{padding:16vh var(--pad) 18vh}
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8vh;gap:24px}
.gal-head h2{font-family:var(--f-head);text-transform:uppercase;font-weight:400;font-size:clamp(40px,6vw,100px);line-height:.9}
.gal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,22px)}
.gal-grid button{all:unset;cursor:none;display:block;overflow:hidden;border:1px solid var(--ink);padding:6px;background:var(--paper)}
.gal-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .4s}
.gal-grid button:hover img{transform:scale(1.06);filter:invert(1)}
.gal-grid .g-w4{grid-column:span 4}.gal-grid .g-w2{grid-column:span 2}.gal-grid .g-w3{grid-column:span 3}
.gal-grid .g-w2 img{aspect-ratio:auto;height:100%}
@media (max-width:760px){.gal-grid{grid-template-columns:1fr 1fr}.gal-grid .g-w4,.gal-grid .g-w3,.gal-grid .g-w2{grid-column:span 2}.pf-text{grid-template-columns:1fr}.pf-meta{grid-template-columns:1fr 1fr;row-gap:12px}.pf-title{grid-template-columns:1fr}.pf-sub{grid-column:1}}
.lb{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.94);display:grid;place-items:center;visibility:hidden;opacity:0}
.lb img{max-width:90vw;max-height:84vh;border:1px solid #fff}
.lb-bar{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);display:flex;justify-content:space-between;color:#fff}
.lb button{background:none;border:0;color:#fff;font:inherit;cursor:pointer}
/* cta band */
.cta-band{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #fff}
.cta-band a{display:flex;flex-direction:column;justify-content:space-between;gap:6vh;padding:8vh var(--pad);min-height:44vh;position:relative;overflow:hidden}
.cta-band a+a{border-left:1px solid #fff}
.cta-band a:before{content:"";position:absolute;inset:0;background:#fff;transform:scaleY(0);transform-origin:bottom;transition:transform .7s cubic-bezier(.7,0,.3,1)}
.cta-band a>*{position:relative;transition:color .5s}
.cta-band a:hover:before{transform:scaleY(1)}
.cta-band a:hover>*{color:#000}
.cta-band strong{font-family:var(--f-head);text-transform:uppercase;font-weight:400;font-size:clamp(30px,3.6vw,64px);line-height:1}
@media (max-width:760px){.cta-band{grid-template-columns:1fr}.cta-band a+a{border-left:0;border-top:1px solid #fff}}
/* next chapter */
.next{display:block;position:relative;padding:14vh var(--pad);overflow:hidden;border-top:1px solid #fff}
.next .mono{display:block;margin-bottom:3vh}
.next-title{display:flex;align-items:flex-start;gap:clamp(10px,1.2vw,20px);font-family:var(--f-head);text-transform:uppercase;font-size:clamp(44px,8.4vw,170px);line-height:.85}
.next-title i{font-style:normal;font-family:var(--f-mark);font-size:clamp(18px,1.9vw,34px);line-height:1;padding-top:.15em}
.next-img{position:absolute;right:8vw;top:50%;width:clamp(180px,20vw,320px);aspect-ratio:3/4;translate:0 -50%;pointer-events:none;clip-path:inset(50% 50% 50% 50%);transition:clip-path .8s cubic-bezier(.7,0,.3,1)}
.next-img img{width:100%;height:100%;object-fit:cover}
.next:hover .next-img{clip-path:inset(0 0 0 0)}
.wp-note{position:fixed;left:var(--pad);bottom:16px;z-index:105;font-size:10px;padding:6px 10px;border:1px solid #fff;mix-blend-mode:difference;color:#fff}

/* ===== flow blocks (WP) ===== */
body.dogma{margin:0!important;padding:0!important;background:#000!important}
.fl-heading{padding:14vh var(--pad) 2vh}
.fl-heading h2{font-family:var(--f-head);text-transform:uppercase;font-weight:400;font-size:clamp(40px,7vw,130px);line-height:.9;max-width:14ch}
.fl-text{padding-top:8vh;padding-bottom:8vh}
.fl-text .body{grid-column:2/4;columns:2;column-gap:var(--pad)}
.fl-text .body p{break-inside:avoid}
.fl-text .body a{text-decoration:underline;text-underline-offset:3px}
.fl-text .body strong,.fl-text .body b{font-weight:400;font-family:var(--f-head);text-transform:uppercase}
@media (max-width:860px){.fl-text .body{grid-column:auto;columns:1}}
.pf-text{grid-template-columns:1fr 4fr 4fr}
.gal{padding:10vh var(--pad)}
.masonry{columns:3;column-gap:clamp(10px,1.4vw,22px)}
.masonry .tile{all:unset;display:block;cursor:none;margin:0 0 clamp(10px,1.4vw,22px);break-inside:avoid;border:1px solid var(--ink);padding:6px;background:var(--paper);overflow:hidden}
.masonry .tile img{display:block;width:100%;height:auto;filter:grayscale(1);transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .4s}
.masonry .tile:hover img{transform:scale(1.04);filter:grayscale(1) invert(1)}
@media (max-width:760px){.masonry{columns:2}}
.rail-head{padding-top:12vh}
.rail-card button{all:unset;cursor:none;display:block;border:1px solid #fff;padding:8px;box-shadow:8px 8px 0 #fff;background:#000}
.rail-card img{display:block;width:100%;height:auto;filter:grayscale(1)}
.rail-card figcaption span:first-child{max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-cover img{filter:grayscale(1)}
.fl-marquee{overflow:hidden;border-top:1px solid currentColor;border-bottom:1px solid currentColor;padding:3vh 0;white-space:nowrap}
.fl-mq{display:inline-flex}
.fl-mq span{font-family:var(--f-script);font-size:clamp(60px,10vw,190px);line-height:1;padding-right:.4em}
.fl-mq i{font-style:normal;font-family:var(--f-mark);font-size:.5em;vertical-align:middle}
.fl-video{position:relative;height:100svh;overflow:hidden}
.fl-video video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15)}
.fl-sound{position:absolute;right:var(--pad);bottom:var(--pad);background:none;border:1px solid #fff;color:#fff;padding:10px 16px;cursor:pointer;mix-blend-mode:difference}
.fl-vlink{padding:0;border-top:1px solid #fff}
.fl-vlink button{all:unset;cursor:none;display:grid;grid-template-columns:1fr auto;align-items:end;gap:3vh var(--pad);width:100%;box-sizing:border-box;padding:12vh var(--pad);color:#fff;position:relative;overflow:hidden}
.fl-vlink button .mono{grid-column:1/-1}
.fl-vlink strong{font-family:var(--f-head);text-transform:uppercase;font-weight:400;font-size:clamp(40px,7vw,130px);line-height:.9}
.fl-vlink i{font-style:normal;font-size:clamp(40px,6vw,110px);line-height:1;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.fl-vlink button:hover i{transform:scale(1.25)}
.fl-raw{padding:10vh var(--pad)}
.lb-frame{display:none;width:min(90vw,1280px);aspect-ratio:16/9;border:1px solid #fff}
.lb-frame iframe{width:100%;height:100%;border:0}
.lb.is-video img{display:none}.lb.is-video .lb-frame{display:block}.lb.is-video .lb-prev,.lb.is-video .lb-next,.lb.is-video .lb-count{visibility:hidden}
.cta-band{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cta-band a+a{border-left:1px solid #fff}
.fl-lead{display:grid;grid-template-columns:1fr 8fr;gap:var(--pad);padding:12vh var(--pad)}
.fl-lead .body p{font-size:clamp(18px,1.9vw,30px);line-height:1.35;max-width:34em}
.fl-lead .body p+p{margin-top:1em}
@media (max-width:760px){.fl-lead{grid-template-columns:1fr}}
.next-img img{filter:grayscale(1)}
.pf-title h1{font-size:max(40px,var(--fs,13.5vw));overflow-wrap:normal;word-break:keep-all;hyphens:none}
.next-title{font-size:max(36px,var(--fs,8.4vw))}
/* artwork galleries (Illustrations): aligned grid, full colour, no cropping */
.gal.art .masonry{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,26px)}
.gal.art .masonry .tile{margin:0;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;padding:clamp(10px,1.2vw,18px);background:#fff}
.gal.art .masonry .tile img{width:100%;height:100%;object-fit:contain;filter:none}
.gal.art .masonry .tile:hover img{filter:none;transform:scale(1.03)}
@media (max-width:760px){.gal.art .masonry{grid-template-columns:repeat(2,minmax(0,1fr))}}
