/* Scoped master discipline template. Loaded only by enabled category pages. */
.portfolio-page{color-scheme:dark;--pf-gap:28px;background:var(--ink);color:var(--paper)}
.portfolio-page .pf-header{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;height:96px;padding-inline:max(5vw,24px);background:var(--ink);border-bottom:1px solid var(--line);backdrop-filter:none}
.portfolio-page .pf-header .wordmark{position:static;transform:none;grid-column:2;grid-row:1;justify-self:center;width:auto;height:auto}
.portfolio-page .pf-back{grid-column:1;grid-row:1;display:inline-flex;align-items:center;gap:10px;justify-self:start;font-size:14px;line-height:1.4;color:#c8c8c5;min-height:44px}
.portfolio-page .pf-back:hover{color:var(--lime)}
.portfolio-page .pf-index{grid-column:3;grid-row:1;justify-self:end;font-size:12px;letter-spacing:1.5px;color:var(--muted)}
.portfolio-page .pf-main{width:calc(100% - 10vw);max-width:1120px;margin-inline:auto}
.portfolio-page .pf-intro{padding:54px 0 36px}
.portfolio-page .pf-label{display:block;font-size:11px;line-height:1.5;font-weight:400;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.portfolio-page .pf-intro h1{font-size:clamp(46px,6.5vw,88px);font-weight:400;letter-spacing:-.055em;line-height:1.06;margin:15px 0 22px}
.portfolio-page .pf-intro h1 span{color:var(--lime)}
.portfolio-page .pf-intro p{font-size:18px;line-height:1.65;color:#b9b9b5;max-width:650px}
.portfolio-page .pf-project{position:relative;min-width:0}
.portfolio-page .pf-open{display:block;width:100%;background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.portfolio-page .pf-cover{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--ink)}
.portfolio-page .pf-cover img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .65s cubic-bezier(.2,.7,.3,1),filter .35s}
.portfolio-page .pf-featured .pf-cover{aspect-ratio:16/9}
.portfolio-page .pf-open:hover .pf-cover img,.portfolio-page .pf-open:focus-visible .pf-cover img{transform:scale(1.015);filter:brightness(1.08)}
.portfolio-page .pf-project-info{display:block;padding-top:21px}
.portfolio-page .pf-featured .pf-project-info{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.portfolio-page .pf-project-title{display:block;font-size:clamp(23px,2.25vw,31px);line-height:1.18;font-weight:400;letter-spacing:-.035em;margin-top:8px}
.portfolio-page .pf-project-copy{display:block}
.portfolio-page .pf-description{display:block;color:#aaa;line-height:1.65;font-size:15px;margin-top:12px;max-width:470px}
.portfolio-page .pf-featured .pf-description{margin-top:0}
.portfolio-page .pf-project-action{display:inline-flex;align-items:center;gap:10px;font-size:13px;line-height:1.4;margin-top:17px;color:var(--lime);transition:color .2s}
.portfolio-page .pf-project-action .ui-icon{transition:transform .25s}
.portfolio-page .pf-open:focus-visible .pf-project-action{color:#fff}
@media(hover:hover) and (pointer:fine){.portfolio-page .pf-open:hover .pf-project-action{color:#fff}}
.portfolio-page .pf-open:hover .pf-project-action .ui-icon{transform:translate(2px,-2px)}
.portfolio-page .pf-draft{display:block;font-size:11px;letter-spacing:.3px;line-height:1.5;color:#858580;margin-top:13px}
.portfolio-page .pf-support{padding:64px 0}
.portfolio-page .pf-section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:22px;margin-bottom:30px}
.portfolio-page .pf-section-heading h2{font-size:clamp(30px,3.5vw,44px);font-weight:400;line-height:1.12;letter-spacing:-.045em}
.portfolio-page .pf-project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px var(--pf-gap)}
.portfolio-page .pf-next{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line);padding:30px 0 48px}
.portfolio-page .pf-next strong{display:block;font-weight:400;font-size:clamp(25px,3vw,36px);line-height:1.2;letter-spacing:-.04em;margin-top:10px}
.portfolio-page .pf-next>.ui-icon{width:28px;height:28px;color:var(--lime);flex:none}
.portfolio-page .pf-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--ink);color:var(--paper);overflow-y:auto;overscroll-behavior:contain}
.portfolio-page .pf-dialog::backdrop{background:var(--ink)}
.portfolio-page .pf-dialog-inner{width:calc(100% - 10vw);max-width:1320px;margin:auto;padding-bottom:64px;animation:pf-dialog-arrive .25s ease both}
.portfolio-page .pf-dialog.is-closing .pf-dialog-inner{animation:pf-dialog-leave .18s ease both}
.portfolio-page .pf-dialog-header{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;padding:28px 0 24px;position:sticky;top:0;background:var(--ink);z-index:2}
.portfolio-page .pf-dialog-header h2{font-size:clamp(26px,3.3vw,44px);font-weight:400;line-height:1.16;letter-spacing:-.04em;margin-top:7px;overflow-wrap:anywhere}
.portfolio-page .pf-close{display:inline-flex;gap:10px;align-items:center;justify-content:center;flex:none;min-height:44px;min-width:44px;padding:0 10px;border:1px solid #454545;border-radius:0;background:var(--ink);color:var(--paper);font:inherit;font-size:13px;cursor:pointer}
.portfolio-page .pf-close:hover{color:var(--lime);border-color:#8c7c18}
.portfolio-page .pf-media-stage{min-height:260px;height:62vh;height:62svh;display:flex;align-items:center;justify-content:center;background:var(--ink);touch-action:pan-y pinch-zoom}
.portfolio-page .pf-media-stage img,.portfolio-page .pf-media-stage video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* Portrait-only backdrop; the sharp artwork retains its natural proportions. */
.portfolio-page .pf-media-stage.is-portrait{position:relative;isolation:isolate;overflow:hidden;height:80vh;height:80svh}
.portfolio-page .pf-media-stage.is-portrait>img{position:relative;max-width:100%;max-height:100%;object-fit:contain}
.portfolio-page .pf-gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:15px 0 25px;border-bottom:1px solid #333}
.portfolio-page #pf-image-caption{color:var(--muted);font-size:12px;line-height:1.5;margin:0;max-width:650px}
.portfolio-page .pf-viewer{position:relative}
.portfolio-page .pf-image-nav{position:absolute;inset:0;pointer-events:none;z-index:1}
.portfolio-page .pf-image-nav button{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;display:grid;place-items:center;border:1px solid #ffffff40;border-radius:50%;background:#080808b8;color:var(--paper);cursor:pointer;pointer-events:auto}
.portfolio-page #pf-previous{left:16px}
.portfolio-page #pf-next-image{right:16px}
.portfolio-page .pf-image-nav .ui-icon{width:32px;height:32px;stroke-width:1.5}
.portfolio-page .pf-image-nav button:disabled{opacity:.3;cursor:default}
.portfolio-page .pf-image-nav button:not(:disabled):hover{color:var(--lime);border-color:var(--lime)}
.portfolio-page #pf-image-count{font-size:12px;color:#bbb;min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
.portfolio-page .pf-project-details{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:38px;padding-top:30px}
.portfolio-page .pf-project-details h3{font-size:13px;font-weight:400;line-height:1.4;margin:0 0 12px;color:var(--paper)}
.portfolio-page .pf-project-details p,.portfolio-page .pf-project-details li{font-size:15px;line-height:1.7;color:#aaa}
.portfolio-page .pf-project-details ul{margin:0;padding-left:18px}
.portfolio-page #pf-outcome-section{grid-column:1/-1;max-width:680px}
@keyframes pf-dialog-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pf-dialog-leave{to{opacity:0;transform:translateY(8px)}}
@media(max-width:760px){
.portfolio-page .pf-header{height:82px;gap:12px;padding-inline:22px}
.portfolio-page .pf-back{font-size:12px;gap:7px;max-width:130px}
.portfolio-page .pf-back span{max-width:92px;line-height:1.35}
.portfolio-page .pf-header .wordmark .brand-symbol{width:56px;height:46px}
.portfolio-page .pf-index{font-size:11px;letter-spacing:1px}
.portfolio-page .pf-main{width:calc(100% - 44px)}
.portfolio-page .pf-intro{padding:38px 0 28px}
.portfolio-page .pf-intro h1{font-size:clamp(43px,9vw,64px);margin:13px 0 20px;max-width:520px}
.portfolio-page .pf-intro p{font-size:16px;line-height:1.65}
.portfolio-page .pf-featured .pf-project-info{display:block}
.portfolio-page .pf-featured .pf-description{margin-top:14px}
.portfolio-page .pf-project-title{font-size:25px}
.portfolio-page .pf-support{padding:46px 0}
.portfolio-page .pf-section-heading{align-items:flex-start;gap:18px;margin-bottom:24px}
.portfolio-page .pf-section-heading .pf-label{padding-top:8px;white-space:nowrap;font-size:10px}
.portfolio-page .pf-section-heading h2{font-size:32px;max-width:260px}
.portfolio-page .pf-project-grid{grid-template-columns:1fr;gap:35px}
.portfolio-page .pf-next{padding-bottom:35px}
.portfolio-page .pf-dialog-inner{width:calc(100% - 36px);padding-bottom:40px}
.portfolio-page .pf-dialog-header{gap:14px;padding:18px 0}
.portfolio-page .pf-dialog-header h2{font-size:27px}
.portfolio-page .pf-dialog-header .pf-label{font-size:10px}
.portfolio-page .pf-close{padding:0;width:44px}
.portfolio-page .pf-close>span{display:none}
.portfolio-page .pf-media-stage{height:48svh;min-height:230px}
.portfolio-page .pf-media-stage.is-portrait{height:70svh;min-height:0}
.portfolio-page .pf-gallery-controls{flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:20px}
.portfolio-page .pf-image-nav button{width:44px;height:44px}
.portfolio-page .pf-image-nav .ui-icon{width:28px;height:28px}
.portfolio-page #pf-previous{left:8px}
.portfolio-page #pf-next-image{right:8px}
.portfolio-page #pf-image-count{align-self:flex-end}
.portfolio-page .pf-project-details{grid-template-columns:1fr;gap:24px;padding-top:25px}
}
@media(prefers-reduced-motion:reduce){.portfolio-page .pf-cover img,.portfolio-page .pf-project-action .ui-icon{transition:none}.portfolio-page .pf-dialog-inner,.portfolio-page .pf-dialog.is-closing .pf-dialog-inner{animation:none}}
.portfolio-page .pf-tags{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:12px;color:#a8a8a2;font-size:11px;line-height:1.6}
.portfolio-page .pf-tags>span+span{border-left:1px solid #454545;padding-left:12px}
