/* J.D. Paulsen portfolio — static site styles.
   Layout maths mirror the original Squarespace 7.1 (Fluid Engine) site. */

@font-face{font-family:Roboto;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/roboto-latin.woff2) format("woff2")}
@font-face{font-family:Roboto;font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/roboto-italic-latin.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500-latin.woff2) format("woff2")}

:root{--hh:calc(85.6px + 4.42vw);--bg:#fff;--fg:#000;--h3:#000;--site-gutter:7vw}
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:auto}
@media (min-width:992px){html{font-size:17px}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif;font-weight:400;line-height:1.4;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:8px 12px;z-index:100}
.skip:focus{left:8px;top:8px}
main{display:block}

/* ---- type scale (--v is the Squarespace size multiplier) ---- */
.ts,.rte h3,.rte p,.nav a,.mnav a,.pt,.cf label,.cf label span,.cf legend,.fl{font-size:calc((var(--v) - 1) * calc(.012 * min(100vh,900px)) + 1rem)}
@media (min-width:768px),(orientation:landscape){
  .ts,.rte h3,.rte p,.nav a,#menu nav a,.pt,.cf label,.cf label span,.cf legend,.fl{font-size:min(calc((var(--v) - 1) * 1.2vw + 1rem),max(calc((var(--v) - 1) * 21.6px + 1rem),calc(var(--v) * 1rem)))}
}
.rte h3{--v:1.8;font-weight:500;letter-spacing:.01em;line-height:1.355;margin:0 0 2rem;color:var(--h3)}
.rte p{--v:1;line-height:1.4;margin:1rem 0}
.rte p.sqsrte-small{--v:1.1}
.rte p:empty::before{content:"\200b"}
.rte > :first-child{margin-top:0}
.rte > :last-child{margin-bottom:0}
.rte p,.rte h3{white-space:pre-wrap;color:var(--fg)}
.rte h3{color:var(--h3)}
.rte a{text-decoration:underline;text-underline-offset:.1em;color:inherit}
.rte strong{font-weight:700}
.rte em{font-style:italic}

/* ---- header ---- */
#hdr{position:fixed;top:0;left:0;right:0;height:var(--hh);z-index:60;background:#fff;border-bottom:1px solid #ccc;display:flex;align-items:center;justify-content:space-between;padding:16px var(--site-gutter) 0;transition:transform .35s ease}
#hdr.hide{transform:translateY(-100%)}
#hdr .logo{display:block;flex:none;line-height:0}
#hdr .logo img{height:67px;width:auto;max-width:none}
#hdr .hr{display:flex;align-items:center}
.nav{display:flex;align-items:center}
.nav a{--v:.9;text-transform:uppercase;text-decoration:none;color:#000;line-height:1.4em;margin-left:1.6rem;white-space:nowrap;display:block;position:relative}
.nav a:first-child{margin-left:0}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-5px;border-bottom:2px solid currentColor}
.soc{display:flex;align-items:center;margin-left:15px;margin-right:-9px}
.soc a,.msoc a,.fsoc a{display:flex;align-items:center;justify-content:center;color:#000;text-decoration:none}
.soc a{width:40px;height:40px}
.si{display:block;fill:currentColor}
.burger{display:none;position:relative;width:50px;height:37px;padding:0;margin:0;border:0;background:none;cursor:pointer;color:#000}
.burger span{position:absolute;left:7.5px;width:35px;height:1px;background:currentColor;transition:transform .25s ease,opacity .2s ease,top .25s ease}
.burger span:nth-child(1){top:9px}.burger span:nth-child(2){top:18.5px}.burger span:nth-child(3){top:28px}
body.menu-open .burger span{left:10px;width:30px}
body.menu-open .burger span:nth-child(1){top:18.5px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:18.5px;transform:rotate(-45deg)}
#menu{display:none}

@media (pointer:coarse) and (max-width:1024px),(max-width:799px){
  :root{--hh:calc(12vw + 85px)}
  #hdr .hr{display:none}
  #hdr{padding-left:6vw;padding-right:6vw}
  .burger{display:block;margin-right:-1.5px}
  #hdr .logo img{height:67px}
  #menu{display:block;position:fixed;inset:0;z-index:55;background:#fff;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility 0s .25s}
  body.menu-open #menu{visibility:visible;opacity:1;transition:opacity .25s ease}
  #menu nav{position:absolute;left:0;right:0;top:51.7%;transform:translateY(-50%);text-align:center}
  #menu nav a{--v:1;display:block;font-size:calc(19.8px + 3.42vw);line-height:1;padding:3vw 0;text-transform:uppercase;text-decoration:none;color:#000;font-weight:400}
  .msoc{position:absolute;left:0;right:0;bottom:4.55vh;display:flex;justify-content:center}
  .msoc a{width:40px;height:25px}
}
@media (max-width:767px){
  :root{--hh:calc(12vw + 60px);--site-gutter:6vw}
  #hdr .logo img{height:auto;max-height:41px;width:auto}
}

/* ---- sections ---- */
.sec{display:flex;flex-direction:column;justify-content:center;position:relative;width:100%}
.sec.first{padding-top:var(--hh)}
.sec .cw{width:100%}
.sec.small{min-height:33vh}.sec.small .cw{padding:3.3vmax 0}
.sec.medium{min-height:66vh}.sec.medium .cw{padding:6.6vmax 0}
.sec.large{min-height:100vh}.sec.large .cw{padding:10vmax 0}
.sec.custom{min-height:calc(var(--n,0) * 1vh)}.sec.custom .cw{padding:calc(var(--n,0) * 1vmax / 10) 0}
.sec.black{background:#000;color:#fff}
.sec.black .rte,.sec.black .rte h3,.sec.black .rte p{color:#fff}
.bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.bg img{width:100%;height:100%;max-width:none;object-fit:cover}
.hasbg > .cw{position:relative;z-index:1}

/* Fluid Engine grid */
.fe{display:grid;margin:0 auto;width:100%;max-width:1650px;gap:var(--g,0px);
  --gg:calc(6vw - var(--g,0px));--cell:calc((1800px - var(--g,0px) * 7) / 8);
  grid-template-columns:minmax(var(--gg),1fr) repeat(8,minmax(0,var(--cell))) minmax(var(--gg),1fr);
  grid-template-rows:repeat(var(--rm,1),minmax(24px,auto))}
@media (max-width:1850px){.fe{max-width:85%}}
@media (min-width:768px){
  .fe{--gg:calc(7vw - var(--g,0px));--cell:calc((1800px - var(--g,0px) * 23) / 24);--cont:min(1800px,calc(100vw - 7vw * 2));
    grid-template-columns:minmax(var(--gg),1fr) repeat(24,minmax(0,var(--cell))) minmax(var(--gg),1fr);
    grid-template-rows:repeat(var(--rd,1),minmax(calc(var(--cont) * var(--rf,.0215)),auto))}
}
.blk{grid-area:var(--am);min-width:0;align-self:start}
@media (min-width:768px){.blk{grid-area:var(--ad)}}
.blk.ctr{align-self:center}
.blk hr{border:0;border-top:1px solid #000;margin:0;width:100%}
.blk.vid{align-self:stretch;position:relative;min-height:0}
.vid .play{position:absolute;top:0;left:0;width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border:0;background:none;padding:0;cursor:pointer}
.vid .play[hidden]{display:none}
.vid .play svg{width:120px;height:120px;max-width:30%;max-height:60%}
.vid .play circle{fill:rgba(40,20,15,.72)}.vid .play path{fill:#fff}
.vid video{position:absolute;top:0;left:0;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:transparent}

/* ---- portfolio grid ---- */
.pl{display:block}
.gt{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding:4.3vw var(--site-gutter)}
@media (max-width:767px){.gt{grid-template-columns:1fr;padding:16.77px 6vw}}
.gi{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#eee;color:#fff;text-decoration:none}
.gi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gi .ov{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .3s ease}
.gi .ttl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;font-size:20px;font-weight:500;line-height:1.2;opacity:0;transform:translateY(10%);transition:opacity .3s ease,transform .3s ease}
.gi:hover .ov,.gi:focus-visible .ov{opacity:.35}
.gi:hover .ttl,.gi:focus-visible .ttl{opacity:1;transform:none}
@media (hover:none){.gi .ov,.gi .ttl{display:none}}

/* ---- galleries ---- */
.galsec{display:block}
.gal{position:relative;width:100%;max-width:1650px;margin:0 auto;padding:0 calc(var(--gut) * .05vw);--gap:calc(var(--gut) * .05vw)}
.gal.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap)}
@media (max-width:767px){.gal.grid{grid-template-columns:repeat(2,1fr)}}
.gal figure{margin:0;overflow:hidden;position:relative}
.gal.grid figure{aspect-ratio:var(--ar)}
.gal figure a{display:block;width:100%;height:100%;cursor:zoom-in}
.gal.grid figure img{width:100%;height:100%;object-fit:cover}
.gal.masonry{margin-top:3.5vw;column-count:var(--cols);column-gap:var(--gap)}
@media (max-width:767px){.gal.masonry{column-count:2}}
.gal.masonry figure{break-inside:avoid;margin-bottom:var(--gap)}
.gal.masonry figure img{width:100%;height:auto}
.gal.masonry.laid{column-count:auto;display:block}
.gal.masonry.laid figure{position:absolute;margin:0}
@media (min-width:1851px){
  .gal{top:-20px}
  .pg-signature-everyman-cinemas .gal{top:-80px}
  .pg-signature-bowie .gal{top:-50px}
  .pg-signature-faery .gal{top:-60px}
}
html.js .gal[data-anim] figure{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
html.js .gal[data-anim] figure.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .gal[data-anim] figure{opacity:1;transform:none;transition:none}}

/* ---- pagination ---- */
#itemPagination{display:flex;justify-content:space-between;align-items:center;padding:3vw var(--site-gutter)}
.pl.next,.pl.prev + .pl.next{margin-left:auto}
a.pl{display:flex;align-items:center;height:32px;gap:0;text-decoration:none;color:var(--fg)}
.pt{--v:1;font-weight:500;line-height:1.4;letter-spacing:.01em;color:var(--fg)}
.chev{width:43px;height:32px;flex:none;overflow:visible;stroke:currentColor;stroke-width:1.5}
.chev polyline{vector-effect:non-scaling-stroke}
@media (max-width:767px){#itemPagination{padding:3vw 6vw}a.pl{gap:0}}

/* ---- dark project pages ---- */
.t-snith{--bg:#171d1e;--h3:#e5c360;--fg:#fff}
.t-violets{--bg:#00000f;--h3:#e2c96b;--fg:#fff}
.t-snith .rte p a,.t-violets .rte p a{color:#fff}

/* ---- footer ---- */
.ft.sec .cw{padding:0}
.ft .fl{--v:1;margin:0;padding-left:8px;display:flex;justify-content:center;gap:1rem;color:#fff;font-size:1rem}
.ft .fl a{color:#fff;text-decoration:underline;text-underline-offset:.15em}
.fsoc{display:flex;justify-content:center}
.fsoc a{width:33px;height:20px;color:#fff}

/* ---- contact form ---- */
.cf{width:100%;color:#000}
.cf fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}
.cf legend{--v:1;padding:0;margin:0 0 8px;line-height:1.4}
.cf .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cf .fld{margin:0 0 19.4px}
.cf label{--v:1;display:block;line-height:1.4;margin:0 0 7px;font-weight:400}
.cf .two label{--v:1.1;margin-bottom:3.3px}
.cf label span{--v:1.1;color:#555;margin-left:.2em;line-height:1}
.cf .two label span{line-height:inherit}
.cf input,.cf textarea{display:block;width:100%;font:400 17px/1.4 Roboto,sans-serif;padding:10px;border:1px solid #000;background:#fafafa;border-radius:0;color:#000;margin:0;-webkit-appearance:none;appearance:none}
.cf textarea{height:100px;resize:vertical}
.cf input:focus,.cf textarea:focus{outline:2px solid #000;outline-offset:0}
.cf .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf .sub{display:flex;justify-content:center;margin-top:0}
.cf button{font:500 .9rem Poppins,sans-serif;font-size:15.27px;letter-spacing:.3px;background:#000;color:#fff;border:0;border-radius:0;padding:18.33px 30.6px;cursor:pointer;line-height:1.5}
.cf button:hover{background:#333}
.cf button[disabled]{opacity:.6;cursor:wait}
.cf .st{margin:16px 0 0;text-align:center;font-size:1rem}
.cf .st:empty{display:none}
.cf .st.err{color:#b00020}
@media (max-width:767px){
  .cf input,.cf textarea{font-size:16px}.cf button{font-size:14.92px}
  .cf legend{margin:0;line-height:26px}
  .cf .two label{margin-bottom:0;line-height:23.5px}
  .cf label{margin:0;line-height:22.4px;padding-bottom:5.2px}
  .cf .two label{padding-bottom:0}
  .cf .fld{margin-bottom:20.4px}
}

/* ---- lightbox ---- */
#lb{position:fixed;inset:0;z-index:200;background:rgba(255,255,255,.98);display:none;align-items:center;justify-content:center;flex-direction:column}
#lb.open{display:flex}
#lb .stage{position:relative;flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding:56px 64px 8px;min-height:0}
#lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
#lb .cap{min-height:44px;padding:8px 24px 16px;text-align:center;font-size:15px;color:#333}
#lb button{position:absolute;background:none;border:0;cursor:pointer;color:#000;padding:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center}
#lb .x{top:8px;right:8px}
#lb .pv{left:8px;top:50%;margin-top:-24px}
#lb .nx{right:8px;top:50%;margin-top:-24px}
#lb .ct{position:absolute;top:20px;left:24px;font-size:14px;color:#333}
#lb svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.2}
@media (max-width:767px){#lb .stage{padding:56px 8px 8px}#lb .pv{left:0}#lb .nx{right:0}}