/* ===== Type styles — edit here; every instance on the page follows. ===== */
:root{
  --h1:40px; --h1-lh:1.05; --h1-track:0;   /* project title */
  --h2:40px; --h2-lh:1.1;  --h2-track:0;     /* service titles */
  --h3:28px; --h3-lh:1.15; --h3-track:0;   /* exhibition titles, next exhibition */
  --h4:14px; --h4-lh:1.45;                      /* section labels, sub-labels */
  --tomb:46.2px; --tomb-lh:1.15; --tomb-track:0; /* label card */
  --tomb2:30px; --tomb2-lh:1.2; --tomb2-track:0; /* label card — location, date, studio type lines */
  --lead:24px; --lead-lh:1.25; --lead-track:0; /* Authority paragraphs, project role */
  --list:24px; --list-lh:1.3; --list-track:0;  /* institution lists */
  --sub:22px; --sub-lh:1.35; --sub-track:0;    /* service text, studio lead */
  --email:48px; --email-lh:1.1; --email-track:0; /* contact email */
  --menu:40px; --menu-lh:1.2; --menu-track:0;    /* mobile menu links */
  --base:15px; --base-lh:1.45;                  /* body text */
  --meta:14px; --meta-lh:1.45;                  /* nav, label rows, venue/year, facts */
  --small:13px; --caption:12px;                 /* captions, numbers, footer; image notes */
  --weight:500; --weight-heavy:600;
  --h1-sm:26px; --h1-track-sm:0; --h3-sm:22px; --list-sm:20px; --tomb-sm:27.3px; --tomb-track-sm:0; --tomb2-sm:19px; --tomb2-track-sm:0;

  --inset:104px; --top:104px; --bottom:64px;
}
@media (max-width:900px){:root{--inset:44px;--top:88px;--bottom:44px}}

/* Only the home page (#svc-stage) wants the snap-scroll sections — scoped so standalone
   project pages (no .snap sections of their own) don't get it and the browser doesn't
   drag them to whatever it decides counts as the nearest "snap point". */
html:has(#svc-stage),body:has(#svc-stage){scroll-snap-type:y mandatory}
/* Project pages with a gallery slideshow snap to it as it scrolls into view — proximity, not
   mandatory, since it's the page's only snap point and the rest of the content scrolls freely. */
html:has(.pjslides),body:has(.pjslides){scroll-snap-type:y proximity}
body{margin:0;background:#E4E4E4}
/* One weight (Regular) drawn for the whole range, so the browser never fakes a bold for --weight-heavy. */
@font-face{font-family:'Obj.s01';src:url('/fonts/Obj.s01-Regular.woff2?v=3') format('woff2'),url('/fonts/Obj.s01-Regular.woff?v=3') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
.page{font-family:'Obj.s01','Helvetica Neue',Helvetica,Arial,sans-serif;color:#4B4B4B;background:#E4E4E4;min-height:100%;font-size:var(--base);line-height:var(--base-lh);font-weight:var(--weight)}

h1,h2,h3,h4{margin:0}
h1{font-size:var(--h1);line-height:var(--h1-lh);letter-spacing:var(--h1-track);font-weight:var(--weight)}
h1.wordmark{line-height:1.15;font-weight:var(--weight-heavy)}
h2,.h2{font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:var(--h2-track);font-weight:var(--weight)}
h3,.h3{font-size:var(--h3);line-height:var(--h3-lh);letter-spacing:var(--h3-track);font-weight:var(--weight)}
h4{font-size:var(--h4);line-height:var(--h4-lh);font-weight:var(--weight)}
.tomb{font-size:var(--tomb);line-height:var(--tomb-lh);letter-spacing:var(--tomb-track);font-weight:400}
.tomb2{font-size:var(--tomb2);line-height:var(--tomb2-lh);letter-spacing:var(--tomb2-track);font-weight:400}
.lead{font-size:var(--lead);line-height:var(--lead-lh);letter-spacing:var(--lead-track)}
.list{font-size:var(--list);line-height:var(--list-lh);letter-spacing:var(--list-track)}
.sub{font-size:var(--sub);line-height:var(--sub-lh);letter-spacing:var(--sub-track)}
.contact-email{font-size:var(--email);line-height:var(--email-lh);letter-spacing:var(--email-track)}
.menu-link{font-size:var(--menu);line-height:var(--menu-lh);letter-spacing:var(--menu-track)}
.meta{font-size:var(--meta);line-height:var(--meta-lh)}
.nav{font-size:var(--meta);line-height:1.15}
.wordmark-sm{font-size:var(--meta);font-weight:var(--weight-heavy);letter-spacing:0}
.small{font-size:var(--small)}
.caption{font-size:var(--caption)}
p{margin:0}
@media (max-width:900px){h1:not(.wordmark){font-size:var(--h1-sm);letter-spacing:var(--h1-track-sm)}}

a{color:#2E2E2E;text-decoration:none;border-bottom:1px solid #8A8A8A}
a:hover{color:#000000;border-bottom-color:#000000}

.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 28px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px}
@media (max-width:900px){.grid3{grid-template-columns:minmax(0,1fr)}.split{grid-template-columns:minmax(0,1fr)}.hide-sm{display:none!important}}
@media (max-width:900px){.label{top:16px!important;left:16px!important;right:16px!important;height:calc(100vh - 32px)!important;padding:28px!important}.tomb{font-size:var(--tomb-sm)!important;letter-spacing:var(--tomb-track-sm)!important}.tomb2{font-size:var(--tomb2-sm)!important;letter-spacing:var(--tomb2-track-sm)!important}.sp{height:30px!important}.gapl{margin-top:30px!important}.pin{margin-top:44px!important}.pin-row{padding:0 44px!important}.intro{margin-top:-44px!important}}
.tomb2.fine{font-size:24px}
@media (max-width:900px){.tomb2.fine{font-size:16px!important}}

/* Header */
.pin{position:sticky;top:24px;height:0;z-index:10;margin-top:104px;mix-blend-mode:difference}
/* Project pages: margin-top matches top's own 24px exactly, so the header starts already in
   its stuck position instead of sitting at the home page's looser pre-scroll offset first. */
body:has(.pjpage) .pin{margin-top:24px!important}
.pin-row{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:0 104px}
.wordmark{line-height:1.15;font-weight:var(--weight-heavy)}
.pin .wordmark{color:#FFFFFF;white-space:nowrap}
.pin a.wordmark{display:block;border-bottom:none;margin:0}
.pin nav{display:flex;gap:28px;position:fixed;top:24px;right:104px}  /* fixed: never moves, whatever the scroll */
.pin nav a{border-bottom:none;color:#FFFFFF}

/* Burger + mobile menu */
.show-sm{display:none}
.burger{background:transparent;border:0;padding:0;margin:0;width:44px;height:44px;display:none;align-items:center;justify-content:center;cursor:pointer}
@media (max-width:900px){.show-sm.burger{display:flex;margin-top:-10px;margin-right:-8px}}
#mobile-menu{position:fixed;inset:0;z-index:30;background:#2E2E2E;color:#F4F4F2;display:flex;flex-direction:column;padding:24px var(--inset) 40px;box-sizing:border-box}
#mobile-menu[hidden]{display:none}
#mobile-menu .burger{display:flex;margin-right:-10px}
#mobile-menu .menu-head{display:flex;justify-content:space-between;align-items:center;min-height:44px}
#mobile-menu nav{display:flex;flex-direction:column;gap:8px;margin-top:56px}
#mobile-menu nav a{border-bottom:none;color:#F4F4F2;padding:6px 0}
#mobile-menu .loc{margin:auto 0 0;color:#BDBDBD}

/* Hero carousel */
.hero-prev,.hero-next{position:absolute;top:0;bottom:0;width:50%;border:0;padding:0;margin:0;background:transparent;z-index:2}
.hero-prev{left:0;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2292%22%20height%3D%2296%22%20viewBox%3D%220%200%20650%20681%22%3E%3Cg%3E%3Cpath%20d%3D%22M0%20340.5%20L340%200%20L393%2053%20L145%20302%20H650%20V379%20H145%20L393%20628%20L340%20681%20Z%22%20fill%3D%22%23fff%22/%3E%3C/g%3E%3C/svg%3E") 0 48,w-resize}
.hero-next{right:0;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2292%22%20height%3D%2296%22%20viewBox%3D%220%200%20650%20681%22%3E%3Cg%20transform%3D%22translate%28650%200%29%20scale%28-1%201%29%22%3E%3Cpath%20d%3D%22M0%20340.5%20L340%200%20L393%2053%20L145%20302%20H650%20V379%20H145%20L393%20628%20L340%20681%20Z%22%20fill%3D%22%23fff%22/%3E%3C/g%3E%3C/svg%3E") 91 48,e-resize}
a[href]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2219%22%20height%3D%2220%22%20viewBox%3D%220%200%20650%20681%22%3E%3Cg%20transform%3D%22translate%28650%200%29%20scale%28-1%201%29%22%3E%3Cpath%20d%3D%22M0%20340.5%20L340%200%20L393%2053%20L145%20302%20H650%20V379%20H145%20L393%20628%20L340%20681%20Z%22%20fill%3D%22%23000%22/%3E%3C/g%3E%3C/svg%3E") 18 10,pointer}
.hero-prev:focus-visible,.hero-next:focus-visible{outline:2px solid #F4F4F2;outline-offset:-6px}
.intro{position:relative;height:300vh;margin-top:-104px}
.intro .anchor{position:absolute;top:100vh;left:0;width:1px;height:1px}
.hero{position:sticky;top:0;height:100vh;margin:0;background:#1A1714;overflow:hidden}
.slide{position:absolute;inset:0}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block}
.slide .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#2B2724;color:#BDB7B1}
.hero figcaption{position:absolute;left:var(--inset);right:var(--inset);bottom:64px;display:flex;justify-content:space-between;gap:24px;color:#D6D6D6;pointer-events:none}
.hero figcaption span:last-child{white-space:nowrap}
.label{position:absolute;top:56px;left:40px;right:40px;height:calc(100vh - 96px);background:#F4F4F2;box-sizing:border-box;padding:48px 64px 64px;display:flex;flex-direction:column;gap:0;color:#1F1F1F}
.label .sp{height:51px}
.label .gapl{margin-top:51px;}

/* Approach */
.snap{scroll-snap-align:start;scroll-snap-stop:always}
section.snap{min-height:100vh;box-sizing:border-box}
footer{scroll-snap-align:end}
.sechead{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #9A9A9A;padding-top:14px;margin-bottom:40px}
.sechead h4,.sechead .sechead-title{color:#2E2E2E}
/* Overview and Studio: headline sits in the split's own first column, baseline-aligned with the
   copy's first line, instead of stacked above it with a gap. */
.split.sechead-split{border-top:1px solid #9A9A9A;padding-top:14px;align-items:baseline}
.split.sechead-split h4{color:#2E2E2E}
.exsec .sechead h4{color:inherit}
/* Each tab sits in its own column, matched to the Services grid above (full-bleed there; .exhead
   sits inset by var(--inset), so column 1's width is shorted by that inset to land on the same
   viewport-relative thirds — see the pipe math below). */
.ex-tabs{display:grid;grid-template-columns:calc(100vw/3 - var(--inset)) calc(100vw/3) auto;align-items:baseline}
.ex-tab{background:none;border:none;margin:0;padding:0;font:inherit;color:inherit;opacity:.5;transition:opacity .3s ease;text-align:left}
/* Same down-arrow as .category-step, but small and black — this sits on the light page background,
   not the dark Services stage. Reuses the same enlarged viewBox so the rotated arrow isn't clipped. */
.ex-tab.category-step{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%22-20%20-35%20720%20720%22%3E%3Cg%20transform%3D%22rotate%28270%20340.5%20325%29%22%3E%3Cpath%20d%3D%22M0%20340.5%20L340%200%20L393%2053%20L145%20302%20H650%20V379%20H145%20L393%20628%20L340%20681%20Z%22%20fill%3D%22%23000%22/%3E%3C/g%3E%3C/svg%3E") 10 19,pointer}
.ex-tab:nth-child(2),.ex-tab:nth-child(3){padding-left:20px}
/* Pipes line up with the Services grid's column rules above and run up to .exhead's own
   border-top ("the black rule") by spanning its full padding-box height from top:0. */
.ex-tab:nth-child(2)::before,.ex-tab:nth-child(3)::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:#9A9A9A}
.ex-tab:nth-child(2)::before{left:calc(100vw/3 - var(--inset))}
.ex-tab:nth-child(3)::before{left:calc(100vw*2/3 - var(--inset))}
.ex-tab:hover,.ex-tab:focus-visible,.ex-tab.active{opacity:1}
@media (max-width:900px){
  .ex-tabs{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  .ex-tab:nth-child(2),.ex-tab:nth-child(3){padding-left:0}
  .ex-tab::before{display:none}
}
.pad{padding:var(--top) var(--inset) var(--bottom)}
#approach{position:relative;z-index:3;margin-top:-100vh;background:#E4E4E4}
#approach .col{display:flex;flex-direction:column;gap:28px}
#approach .lead{color:#3A3A3A}

/* Services */
.offerwrap{color:#F4F4F2}
.step{background:#2E2E2E;transition:background-color .45s ease;will-change:transform}
.offerwrap.mood-identity .step{background:#2F4747}
.offerwrap.mood-publication .step{background:#5E3820}
.svc-stage{position:relative}
.svc-stage .offerwrap{position:sticky;top:0;z-index:2;pointer-events:none;height:100vh;min-height:640px;box-sizing:border-box;padding:0;display:flex;flex-direction:column}
.svc-stage .step{pointer-events:auto}
.svc-stage #exhibitions{position:sticky;top:0;z-index:1;margin-top:-100vh;background:#E4E4E4}
.svc-mark{position:absolute;left:0;width:1px;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
.svc-spacer{height:200vh}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:1;min-height:0}
.step{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:var(--top) 40px var(--bottom);color:#F4F4F2;outline:none}
/* Divider is a left border on columns 2/3, and each column runs 1px under its right neighbour, so the
   independently-translated layers can never leave a sub-pixel seam showing the page behind. */
.step:not(:last-child){margin-right:-1px}
.step+.step{border-left:1px solid rgba(244,244,242,.28)}
.step:first-child{padding-left:var(--inset)}
.step:last-child{padding-right:var(--inset)}
.step .head{display:flex;flex-direction:column;gap:12px}
.category-step{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%22-20%20-35%20720%20720%22%3E%3Cg%20transform%3D%22rotate%28270%20340.5%20325%29%22%3E%3Cpath%20d%3D%22M0%20340.5%20L340%200%20L393%2053%20L145%20302%20H650%20V379%20H145%20L393%20628%20L340%20681%20Z%22%20fill%3D%22%23fff%22/%3E%3C/g%3E%3C/svg%3E") 50 93,pointer}
.category-step:focus-visible{box-shadow:inset 0 0 0 2px #F4F4F2}
.step .reveal{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}
.step:hover .reveal,.step:focus .reveal{opacity:1;transform:none}
.step:focus-visible{box-shadow:inset 0 0 0 2px #F4F4F2}
@media (hover:none){.step .reveal{opacity:1;transform:none}}
@media (min-width:901px){.svc-stage .snap{scroll-snap-align:none;scroll-snap-stop:normal}}
@media (max-width:900px){
  .svc-stage .offerwrap,.svc-stage #exhibitions{position:relative;margin-top:0}
  .svc-spacer,.svc-mark{display:none}
  .step{transform:none!important;padding:32px var(--inset);transition:none!important}
  .step:first-child{padding-top:var(--top)}
  .step:last-child{padding-bottom:var(--bottom)}
  .offerwrap{height:auto!important;min-height:100vh!important;transition:none!important}
  .steps{grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr}
  .step{margin-right:0!important;border-left:none!important;border-top:1px solid rgba(244,244,242,.28)}
  .step:first-child{border-top:none}
  .offerwrap .step{background:#2E2E2E!important}
  .step .reveal,.step:hover .reveal,.step:focus .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* Exhibitions list */
.exsec{position:relative;color:#2E2E2E;background:#E4E4E4;transition:color .35s ease}
.exbg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#2E2E2E;opacity:0;transition:opacity .45s ease}
.exbg-item{position:absolute;inset:0;background:#2E2E2E;transition:opacity .45s ease;opacity:0}
.exbg-item.on{opacity:1}
.exbg-item img{width:100%;height:100%;object-fit:cover;display:block}
.exbg-item .caption{position:absolute;right:var(--inset);bottom:28px;color:rgba(244,244,242,.6)}
.exbg-shade{position:absolute;inset:0;z-index:99999;background:rgba(20,18,16,.45)}
.exhead{position:relative;border-color:#9A9A9A;transition:border-color .35s ease;border-top:1px solid}
.exmeta{color:#5A5A5A;transition:color .35s ease}
.exrow .plain{color:inherit}
.exlist{position:relative;margin:0;padding:0;list-style:none}
.exrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:baseline;padding:22px 0;border-top:1px solid rgba(46,46,46,.25);outline:none;cursor:default;transition:border-color .35s ease;position:relative}
.exrow:last-child{border-bottom:1px solid rgba(46,46,46,.25)}
.exmeta{text-align:right}
.exsec:has(.exrow:hover),.exsec:has(.exrow:focus-within){color:#F4F4F2}
.exsec:has(.exrow:hover) .exbg,.exsec:has(.exrow:focus-within) .exbg{opacity:1}
.exsec:has(.exrow:hover) .exhead,.exsec:has(.exrow:focus-within) .exhead{border-color:rgba(244,244,242,.5)}
.exsec:has(.exrow:hover) .exmeta,.exsec:has(.exrow:focus-within) .exmeta{color:rgba(244,244,242,.75)}
.exsec:has(.exrow:hover) .exrow,.exsec:has(.exrow:focus-within) .exrow{border-color:rgba(244,244,242,.3)}
.exsec:has(.exrow:hover) .exrow:not(:hover):not(:focus-within) h3{opacity:.45}
.exrow h3{transition:opacity .35s ease}
@keyframes exrowin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.exrow{animation:none!important}}
.exlink{color:inherit;border-bottom:none;text-decoration:none}
@media (hover:hover) and (min-width:901px){
  .exsec .exrow:hover h3,.exsec .exrow:focus-within h3,.exsec .exrow:hover .exlink,.exsec .exrow:focus-within .exlink{opacity:1!important;color:#F4F4F2!important}
  .exsec .exlink{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2219%22%20height%3D%2220%22%20viewBox%3D%220%200%20650%20681%22%3E%3Cg%20transform%3D%22translate%28650%200%29%20scale%28-1%201%29%22%3E%3Cpath%20d%3D%22M0%20340.5%20L340%200%20L393%2053%20L145%20302%20H650%20V379%20H145%20L393%20628%20L340%20681%20Z%22%20fill%3D%22%23fff%22/%3E%3C/g%3E%3C/svg%3E") 18 10,pointer}
}
/* Desktop: the section always sits on a project photo (a random one by default, home.js), never plain grey. */
@media (hover:hover) and (min-width:901px){
  .exsec{color:#F4F4F2}
  .exbg{opacity:1}
  .exsec .exhead{border-color:rgba(244,244,242,.5)}
  .exsec .exmeta{color:rgba(244,244,242,.75)}
  .exsec .exrow{border-color:rgba(244,244,242,.3)}
}
.exlink::after{content:"";position:absolute;inset:0;z-index:1}
.exlink:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media (hover:none),(max-width:900px){
  .exrow{grid-template-columns:minmax(0,1fr);gap:8px}
  .exrow h3{font-size:var(--h3-sm)!important}
  .exmeta{text-align:left!important}
  .exbg{display:none}
  .exsec:has(.exrow:hover),.exsec:has(.exrow:focus-within){color:#2E2E2E}
  .exsec .exrow h3{opacity:1!important}
}

/* Project view — opens full-screen over the page, tinted near-white and blurred over whatever's behind it */
#pjmodal{position:fixed;inset:0;background:rgba(244,244,242,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transform:translateX(100%);transition:transform .45s cubic-bezier(.65,0,.25,1);z-index:36;overflow-y:auto;overscroll-behavior:contain}
#pjmodal:empty{display:none}
#pjmodal.open{transform:translateX(0)}
html.drawer-open{overflow:hidden}

a.pjback[href]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2219%22%20height%3D%2220%22%20viewBox%3D%220%200%20650%20681%22%3E%3Cpath%20d%3D%22M0%20340.5%20L340%200%20L393%2053%20L145%20302%20H650%20V379%20H145%20L393%20628%20L340%20681%20Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") 0 10,w-resize}
/* Back link is icon-only, sitting in the left margin (var(--inset)'s gutter) rather than
   inline with the title column — the old text version collided with the sticky header's
   wordmark, which starts at the same x as the content. Always lands at x=16px regardless
   of --inset's breakpoint value, since the margin-left formula cancels it out exactly. */
/* mix-blend-mode:difference (same trick as .pin's wordmark) keeps it visible whether it's
   sitting over the light page background or the dark hero/gallery photos it scrolls past. */
/* -56px cancels .pjpage's own inline padding-top (always "56px", independent of breakpoint),
   so the arrow's natural position lands exactly where .pin's own margin-top would put it —
   same reference as the header wordmark/nav, at every scroll position and breakpoint. */
/* transform nudge (not margin) since it's a pure visual fine-tune, not part of the layout math
   above: the icon's shaft sits at its own vertical center, ~4.5px below the 14px wordmark's. */
/* z-index:11 (> .pin's 10): .pin-row is a full-width flex container (padding:0 104px) whose
   padding area — where the arrow now sits — still captures pointer events even though nothing
   is drawn there. Without this the header row was stealing hover/click from the arrow. */
.pjback{position:sticky;top:24px;z-index:11;display:flex;width:24px;margin:-56px 0 40px calc(-1 * var(--inset) + 16px);transform:translateY(-4.5px);color:#FFFFFF;mix-blend-mode:difference;border-bottom:none}
/* The generic a:hover{color:#000000} rule (higher specificity: element+pseudo-class beats a
   single class) was flipping the icon to black on hover, breaking the difference-blend trick
   above — it needs white specifically to invert correctly against both backgrounds. */
.pjback:hover{color:#FFFFFF}
/* Hides under the cursor on hover — reads as the cursor "grabbing" the sticky arrow. */
.pjback svg{display:block;transition:opacity .15s ease}
.pjback:hover svg{opacity:0}
.pjback:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px}
.pjpage h1{margin:0 0 56px;max-width:1100px;color:#2E2E2E}
.pjpage .split{margin-bottom:56px}
.pjcopy{color:#2E2E2E}.pjcopy .lead{margin:0 0 28px}.pjcopy .sub{margin:0 0 20px}.pjcopy .pjsource{color:#5A5A5A;margin-top:28px}
.pjfacts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;margin:0;align-content:start}
.pjfacts dt{color:#5A5A5A}.pjfacts dd{margin:0;color:#2E2E2E}
/* Full-bleed: cancels .pad's horizontal padding with matching negative margins. */
.pjhero{margin:0 calc(-1 * var(--inset)) 84px;width:calc(100% + 2 * var(--inset));aspect-ratio:16/9;background:#2E2E2E;position:relative;overflow:hidden}
.pjhero img{width:100%;height:100%;object-fit:cover;display:block}

/* Gallery slideshow — same mechanics as the home hero carousel */
.pjslides{margin:0 calc(-1 * var(--inset)) 80px;width:calc(100% + 2 * var(--inset));height:100vh;background:#2E2E2E;position:relative;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.pjslides-stage{position:absolute;inset:0}
.pjslide-prev,.pjslide-next{position:absolute;top:0;bottom:0;width:50%;border:0;padding:0;margin:0;background:transparent;z-index:2}
.pjslide-prev{left:0;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2292%22%20height%3D%2296%22%20viewBox%3D%220%200%20650%20681%22%3E%3Cg%3E%3Cpath%20d%3D%22M0%20340.5%20L340%200%20L393%2053%20L145%20302%20H650%20V379%20H145%20L393%20628%20L340%20681%20Z%22%20fill%3D%22%23fff%22/%3E%3C/g%3E%3C/svg%3E") 0 48,w-resize}
.pjslide-next{right:0;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2292%22%20height%3D%2296%22%20viewBox%3D%220%200%20650%20681%22%3E%3Cg%20transform%3D%22translate%28650%200%29%20scale%28-1%201%29%22%3E%3Cpath%20d%3D%22M0%20340.5%20L340%200%20L393%2053%20L145%20302%20H650%20V379%20H145%20L393%20628%20L340%20681%20Z%22%20fill%3D%22%23fff%22/%3E%3C/g%3E%3C/svg%3E") 91 48,e-resize}
.pjslide-prev:focus-visible,.pjslide-next:focus-visible{outline:2px solid #F4F4F2;outline-offset:-6px}
@media (max-width:900px){.pjpage .split .lead,.pjpage .split .pjcopy,.pjpage .pjhero,.pjpage .pjnext{display:none}} /* description, hero and next-exhibition link are desktop-only; the hero still opens in the phone photo viewer */
/* Phones, portrait: no embedded slideshow, just a note to rotate. Landscape opens the full-screen viewer (site.js). */
.pjrotate{display:none}
.pjrotate .ph{transform-box:fill-box;transform-origin:center;animation:pjrot 3.2s ease-in-out infinite}
@keyframes pjrot{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.pjrotate .ph{animation:none;transform:rotate(90deg)}}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
  html:has(.pjslides),body:has(.pjslides){scroll-snap-type:none}
  .pjslides{display:none}
  .pjrotate svg{width:60px;height:60px;flex:none}
  .pjrotate{display:flex;align-items:center;gap:18px;border-top:1px solid #9A9A9A;padding:18px 0;margin:0 0 56px;color:#2E2E2E}
}
html.pjviewer-open{overflow:hidden}
.pjviewer{position:fixed;inset:0;z-index:100;background:#111;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
.pjv-track{display:flex;height:100%;will-change:transform}
.pjv-slide{flex:0 0 100%;height:100%;position:relative}
.pjv-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.pjv-prev,.pjv-next{position:absolute;top:0;bottom:0;width:50%;border:0;padding:0;margin:0;background:transparent;-webkit-tap-highlight-color:transparent}
.pjv-prev{left:0}
.pjv-next{right:0}
.pjv-close{position:absolute;z-index:2;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(46,46,46,.55);color:#F4F4F2;display:flex;align-items:center;justify-content:center}
.pjv-count{position:absolute;z-index:2;right:max(16px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));color:#F4F4F2;text-shadow:0 1px 6px rgba(0,0,0,.55);pointer-events:none}
.pjslides figcaption{position:absolute;left:var(--inset);right:var(--inset);bottom:24px;display:flex;justify-content:flex-end;color:#D6D6D6;pointer-events:none}
.pjnext{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid #9A9A9A;border-bottom:none;color:#2E2E2E;text-decoration:none}
.pjnext .meta{color:#5A5A5A}

/* Studio */
.studio-copy{display:flex;flex-direction:column;gap:20px;max-width:760px}
.studio-copy .sub{color:#3A3A3A}
.inst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-bottom:80px}
.inst h4{margin:0 0 16px;color:#5A5A5A}
.inst ul{margin:0;padding:0;list-style:none;color:#3A3A3A}
.inst-head{border-top:1px solid #9A9A9A;padding-top:14px;margin:80px 0 40px}
.inst-head h4{color:#2E2E2E}
#studio .inst{margin-bottom:0}
@media (max-width:900px){.inst{grid-template-columns:minmax(0,1fr);gap:32px;margin-bottom:56px}.list{font-size:var(--list-sm)!important}}

/* Contact + footer */
.contact-col{display:flex;flex-direction:column;gap:20px}
.contact-col .contact-email{align-self:flex-start;border-bottom-width:2px}
.contact-col p{max-width:560px}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:22px var(--inset) 28px;border-top:1px solid #9A9A9A;color:#4B4B4B}
footer a{border-bottom:none}

.denver-time{margin:4px 0 0;color:#5A5A5A;font-variant-numeric:tabular-nums}
/* Home footer lives inside the Contact section, pinned to the bottom of its screen. */
#contact{display:flex;flex-direction:column}
#contact footer{margin-top:auto;padding:22px 0 0}

/* More Projects page: one row per project, thumbnail left, text right (stacked on phones). */
.mp-sec{margin-top:56px}
.mp-sec .sechead{margin-bottom:28px}
.mp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px;padding:0 0 36px}
.mp-thumb{max-width:380px}
.mp-thumb img{display:block;width:100%;height:auto}
.mp-text{max-width:760px;color:#2E2E2E}
.mp-text h3{margin:0 0 6px}
.mp-text .mp-meta{margin:0 0 16px}
.mp-text .sub{margin:0 0 14px;color:#3A3A3A}
@media (max-width:900px){.mp{grid-template-columns:minmax(0,1fr);gap:14px}}

/* Answers pages */
.foot-links{display:inline-flex;gap:20px}
.ans-h{margin:40px 0 14px;color:#2E2E2E}
.pjcopy .ans-h:first-of-type{margin-top:36px}
.ans-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ans-item{margin:0 0 40px}
.ans-item h2{margin:0 0 10px}