/* Public site + studio canvas. Everything is scoped under .pf so the studio UI is unaffected.
   Theme values (fonts, colours, grid) arrive as CSS variables from themeCss(). */
.pf, .pf *, .pf *::before, .pf *::after { box-sizing: border-box }
html:has(body.pf-body) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body.pf-body { margin: 0; background: #fff }
.pf {
  --gutter: clamp(14px, 2.2vw, 32px);
  --w-narrow: 720px; --w-content: 1040px; --w-wide: 1680px;
  background: var(--bg); color: var(--text); font-family: var(--f-body);
  font-size: 17px; line-height: 1.6; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.pf a { color: inherit }
.pf img, .pf video { display: block; max-width: 100%; height: auto }
.pf-main { flex: 1 }

/* ---------- header ---------- */
.pf-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px var(--gutter); position: relative; z-index: 20 }
.pf-logo { text-decoration: none; display: flex; flex-direction: column; line-height: 1 }
.pf-logo-name { font-family: var(--f-logo); font-weight: 900; font-size: 26px; letter-spacing: -.01em; text-transform: uppercase; color: var(--text) }
.pf-logo-tag { font-family: var(--f-logo); font-weight: 800; font-size: 11px; letter-spacing: .02em; text-transform: uppercase; color: #b3b3b3; margin-top: 4px }
.pf-nav { display: flex; align-items: center; gap: 22px }
.pf-nav a { font-family: var(--f-logo); font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; color: #a3a3a3; transition: color .15s }
.pf-nav a:hover, .pf-nav a.on { color: var(--text) }
.pf-social { width: 30px; height: 30px; display: grid; place-items: center }
.pf-social svg { width: 17px; height: 17px; fill: #a3a3a3; transition: fill .15s }
.pf-social:hover svg { fill: var(--text) }
.pf-burger { display: none; background: none; border: 0; width: 44px; height: 44px; margin-right: -10px; cursor: pointer; position: relative; z-index: 31 }
.pf-burger i { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--text); transition: transform .25s, top .25s }
.pf-burger i:first-child { top: 17px } .pf-burger i:last-child { top: 25px }
.pf-burger[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg) }
.pf-burger[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg) }
.pf-menu { position: fixed; inset: 0; background: var(--bg); z-index: 30; display: grid; place-items: center; opacity: 0; transition: opacity .2s }
.pf-menu[hidden] { display: none }
.pf-menu.open { opacity: 1 }
.pf-menu nav { display: flex; flex-direction: column; align-items: center; gap: 22px }
.pf-menu a { font-family: var(--f-display); font-weight: 700; font-size: 34px; text-decoration: none; color: var(--text) }
.pf-menu .pf-social { width: 44px; height: 44px; margin-top: 12px }
.pf-menu .pf-social svg { width: 26px; height: 26px }
@media (max-width: 760px) {
  .pf-header { padding: 18px var(--gutter) }
  .pf-logo-name { font-size: 20px } .pf-logo-tag { font-size: 9.5px }
  .pf-nav { display: none } .pf-burger { display: block }
}

/* ---------- home covers ---------- */
.pf-covers { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--cover-gap); padding-top: 20px }
.pf-cover { position: relative; display: block; overflow: hidden; aspect-ratio: var(--cover-ratio); text-decoration: none; background: #f2f2f2 }
.pf-cover-img, .pf-cover-img img { position: absolute; inset: 0; width: 100%; height: 100% }
.pf-cover-img img { object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .25s }
.pf-cover-img .pf-cover-hover { opacity: 0 }
.pf-cover::after { content: ''; position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .25s }
.pf-cover-info { position: absolute; left: 0; right: 0; top: 0; padding: 7% 8%; z-index: 2; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; display: flex; flex-direction: column; gap: 10px }
.pf-cover-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 1.6vw, 26px); line-height: 1.15 }
.pf-cover-year { font-family: var(--f-body); font-weight: 600; font-size: 13px }
@media (hover: hover) {
  .pf-cover:hover::after { opacity: .5 }
  .pf-cover:hover .pf-cover-info { opacity: 1; transform: none }
  .pf-cover:hover .pf-cover-img .pf-cover-hover, .fade .pf .pf-cover:hover .pf-cover-img .pf-cover-hover { opacity: 1 }
  .pf-cover:hover .pf-cover-img img:first-child { transform: scale(1.03) }
}
/* touch: titles always visible on a soft gradient, no hover needed */
@media (hover: none) {
  .pf-cover::after { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%) }
  .pf-cover-info { top: auto; bottom: 0; opacity: 1; transform: none; padding: 18px 20px; gap: 4px }
}
.pf-cover.is-hidden { opacity: .35 }
@media (max-width: 1024px) { .pf-covers { grid-template-columns: repeat(var(--cols-t), 1fr) } }
@media (max-width: 640px) { .pf-covers { grid-template-columns: repeat(var(--cols-m), 1fr); padding-top: 0 } }

/* ---------- page ---------- */
.pf-page { padding: clamp(24px, 5vw, 72px) 0 40px }
.pf-page-head { max-width: var(--w-narrow); margin: 0 auto clamp(32px, 5vw, 64px); padding: 0 var(--gutter); text-align: center }
.pf-page-head h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.05; letter-spacing: -.01em; margin: 0 }
.pf-intro { color: var(--muted); font-weight: 300; margin: 18px 0 0 }

/* block widths + rhythm */
.pf-b { margin: 0 auto; padding: 0 var(--gutter) }
.pf-b.w-narrow { max-width: calc(var(--w-narrow) + 2 * var(--gutter)) }
.pf-b.w-content { max-width: calc(var(--w-content) + 2 * var(--gutter)) }
.pf-b.w-wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); padding: 0 clamp(12px, 1vw, 16px) }
.pf-b.w-full { max-width: none; padding: 0 }
.pf-b + .pf-b.sp-s { margin-top: 16px }
.pf-b + .pf-b.sp-m { margin-top: clamp(32px, 4vw, 56px) }
.pf-b + .pf-b.sp-l { margin-top: clamp(56px, 8vw, 120px) }
.pf-b + .pf-b.sp-0 { margin-top: 0 }
.pf-b.has-bg { padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(32px, 5vw, 72px); max-width: none }
.pf-b.has-bg > * { max-width: var(--w-content); margin-left: auto; margin-right: auto }
@media (max-width: 760px) { .pf-b.hide-m { display: none } .pf-b.w-wide { padding: 0 } .pf-b.w-wide .pf-rich { padding: 0 var(--gutter) } }

/* rich text */
.pf-rich > :first-child { margin-top: 0 } .pf-rich > :last-child { margin-bottom: 0 }
.pf-rich h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.06; letter-spacing: -.012em; margin: 0 0 .45em; color: var(--text) }
.pf-rich h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; margin: 0 0 .5em; color: var(--text) }
.pf-rich h4 { font-family: var(--f-body); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .6em; color: var(--text) }
.pf-rich p { font-weight: 300; color: var(--muted); margin: 0 0 .9em; text-wrap: pretty }
.pf-rich h2, .pf-rich h3 { text-wrap: balance }
.pf-rich p.small, .pf-rich .small { font-size: 13px; font-weight: 400 }
.pf-rich p.lead { font-size: clamp(19px, 1.6vw, 23px); color: var(--text); font-weight: 400; line-height: 1.5 }
.pf-rich blockquote { margin: 0 0 1em; font-family: var(--f-display); font-size: clamp(22px, 2.3vw, 32px); line-height: 1.3; color: var(--text) }
.pf-rich blockquote p { color: inherit; font-weight: inherit }
.pf-rich ul, .pf-rich ol { color: var(--muted); font-weight: 300; padding-left: 1.2em; margin: 0 0 .9em; text-align: left; display: inline-block }
.pf-rich a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 3px }
.pf-rich strong { font-weight: 700; color: var(--text) }
@media (max-width: 760px) { .pf { font-size: 16px } }

/* figures */
.pf figure { margin: 0 }
.pf figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; text-align: center }
.fade .pf img[loading="lazy"] { transition: opacity .35s ease }
.fade .pf img[loading="lazy"]:not(.ld) { opacity: 0 }
.fade .pf .pf-cover-img .pf-cover-hover { opacity: 0 }
.pf-cover-hover:not([src]) { display: none }
.pf-video { width: 100%; background: #000; display: block }
.pf-lb { display: block; cursor: zoom-in }
.pf hr { border: 0; border-top: 1px solid rgba(0,0,0,.14); border-top-color: color-mix(in srgb, var(--text) 14%, transparent); margin: 0 }

/* embed (lite: loads the iframe on click) */
.pf-lite { width: 100%; border: 0; padding: 0; background: #111 center/cover no-repeat; display: grid; place-items: center; cursor: pointer }
.pf-lite-frame { width: 100%; background: #000 }
.pf-lite-frame iframe { width: 100%; height: 100%; border: 0; display: block }
.pf-play { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.92); position: relative }
.pf-play::after { content: ''; position: absolute; left: 29px; top: 23px; border-left: 20px solid #111; border-top: 13px solid transparent; border-bottom: 13px solid transparent }

/* galleries */
.pf-gal { display: grid; gap: var(--g-gap) }
.pf-gal-grid { grid-template-columns: repeat(var(--g-cols), 1fr) }
.pf-gal-grid .pf-gal-item { aspect-ratio: var(--g-ratio); overflow: hidden; position: relative }
.pf-gal-grid img, .pf-gal-justified img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s }
.pf-gal-grid .pf-lb, .pf-gal-justified .pf-lb { height: 100% }
.pf-gal-grid .pf-gal-item:hover img { transform: scale(1.04) }
.pf-gal-masonry { display: block; columns: var(--g-cols); column-gap: var(--g-gap) }
.pf-gal-masonry .pf-gal-item { break-inside: avoid; margin-bottom: var(--g-gap) }
.pf-gal-justified { display: flex; flex-wrap: wrap }
.pf-gal-justified .pf-gal-item { height: var(--g-row); overflow: hidden }
.pf-gal-justified .pf-gal-fill { flex-grow: 1000000 }
.pf-gal-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: var(--g-gap); overscroll-behavior-x: contain }
.pf-gal-carousel::-webkit-scrollbar { display: none }
.pf-gal-carousel .pf-gal-item { flex: 0 0 auto; scroll-snap-align: center; height: min(70vh, 640px) }
.pf-gal-carousel .pf-lb { height: 100% }
.pf-gal-carousel img { height: 100%; width: auto; max-width: none }
.pf-gal-cap { display: block; font-size: 13px; color: var(--muted); margin-top: 6px }
@media (max-width: 760px) {
  .pf-gal-grid { grid-template-columns: repeat(var(--g-cols-m), 1fr) }
  .pf-gal-masonry { columns: var(--g-cols-m) }
  .pf-gal-justified .pf-gal-item { height: calc(var(--g-row) * .55) }
  .pf-gal-carousel .pf-gal-item { height: 56vh }
}

/* columns */
.pf-cols { display: grid; align-items: start }
.pf-cols.va-center { align-items: center } .pf-cols.va-bottom { align-items: end }
.pf-col > .pf-b { padding: 0; max-width: none }
.pf-col > .pf-b + .pf-b { margin-top: 16px }
@media (max-width: 760px) { .pf-cols:not(.no-stack) { grid-template-columns: 1fr !important } }

/* buttons + form */
.pf-btn { display: inline-block; font-family: var(--f-body); font-size: 14px; font-weight: 600; letter-spacing: .02em; padding: 14px 28px; border-radius: 999px; text-decoration: none; transition: transform .15s, background .15s, color .15s; border: 1.5px solid var(--accent); cursor: pointer }
.pf-btn-solid { background: var(--accent); color: var(--bg) }
.pf-btn-outline { background: transparent; color: var(--accent) }
.pf-btn:hover { transform: translateY(-1px) }
.pf-form { display: grid; gap: 16px }
.pf-form label { display: grid; gap: 6px }
.pf-form label span { font-size: 13px; font-weight: 600; color: var(--text) }
.pf-form input, .pf-form textarea { font: inherit; font-size: 16px; color: var(--text); background: rgba(0,0,0,.04); background: color-mix(in srgb, var(--text) 4%, var(--bg)); border: 1px solid rgba(0,0,0,.12); border-color: color-mix(in srgb, var(--text) 12%, transparent); border-radius: 10px; padding: 12px 14px; outline: none; transition: border-color .15s, box-shadow .15s; width: 100% }
.pf-form input:focus, .pf-form textarea:focus { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent) }
.pf-form button { justify-self: start }

/* next project */
.pf-next { max-width: calc(var(--w-wide) + 2 * var(--gutter)); margin: clamp(72px, 10vw, 140px) auto 0; padding: 0 var(--gutter) }
.pf-next a { display: grid; grid-template-columns: 1fr minmax(200px, 40%); grid-template-rows: auto 1fr; column-gap: clamp(20px, 4vw, 64px); align-items: end; text-decoration: none; border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); padding-top: 28px }
.pf-next-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); grid-column: 1 }
.pf-next-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 4vw, 56px); line-height: 1.05; grid-column: 1; align-self: start; margin-top: 10px; transition: opacity .2s }
.pf-next img { grid-column: 2; grid-row: 1 / 3; width: 100%; aspect-ratio: var(--cover-ratio); object-fit: cover }
.pf-next a:hover .pf-next-title { opacity: .6 }
@media (max-width: 640px) { .pf-next a { grid-template-columns: 1fr } .pf-next img { grid-column: 1; grid-row: auto; margin-top: 20px } }

/* footer */
.pf-footer { text-align: center; padding: 64px var(--gutter) 56px; font-size: 13px; color: var(--muted) }
.pf-footer a { text-decoration: none } .pf-footer a:hover { color: var(--text) }

/* lightbox (built by site.js) */
.pf-lbx { position: fixed; inset: 0; z-index: 100; background: rgba(255,255,255,.97); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; touch-action: pan-y }
.pf-lbx.open { opacity: 1 }
.pf-lbx img { max-width: calc(100vw - 120px); max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); width: auto; height: auto; object-fit: contain; opacity: 1; user-select: none; -webkit-user-drag: none }
.pf-lbx button { position: absolute; background: none; border: 0; width: 56px; height: 56px; cursor: pointer; color: #111; font-size: 28px; line-height: 1; display: grid; place-items: center }
.pf-lbx .x { top: 12px; right: 12px }
.pf-lbx .prev { left: 8px; top: 50%; translate: 0 -50% } .pf-lbx .next { right: 8px; top: 50%; translate: 0 -50% }
.pf-lbx .count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 12px; color: #777; letter-spacing: .06em }
@media (max-width: 760px) { .pf-lbx img { max-width: 100vw; max-height: 86vh; max-height: 86dvh } .pf-lbx .prev, .pf-lbx .next { display: none } }

/* page transition */
@view-transition { navigation: auto }
@media (prefers-reduced-motion: reduce) { .pf * { transition: none !important; animation: none !important } @view-transition { navigation: none } }