.portfolio-page {
    --pf-pad: clamp(24px, 5vw, 78px);
    --home-pad: var(--pf-pad);
    background: #f4f1ea;
    color: #111;
    overflow: hidden
}

.portfolio-page img {
    background: #ddd6ca
}

.portfolio-page .reveal {
    opacity: 1;
    filter: none;
    transform: none
}

.portfolio-page .reveal .nl-kicker,
.portfolio-page .reveal>.section-kicker,
.portfolio-page .reveal h2,
.portfolio-page .reveal blockquote {
    opacity: 1;
    filter: none;
    transform: none
}

.pf-kicker {
    margin: 0 0 18px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase
}

.pf-hero {
    min-height: 92svh;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(35px, 7vw, 120px);
    align-items: center;
    padding: 120px var(--pf-pad) 55px
}

.pf-hero-copy {
    align-self: center;
    animation: pfCopyIn .9s .1s both
}

.pf-hero h1 {
    margin: 0 0 25px;
    font-family: var(--display);
    font-size: clamp(4rem, 8vw, 8.2rem);
    font-weight: 500;
    line-height: .82;
    letter-spacing: -.055em
}

.pf-hero-copy>p:last-child {
    font-family: var(--display);
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    line-height: 1.3
}

.pf-hero figure {
    width: min(100%, 720px);
    margin: 0 0 0 auto;
    animation: pfImageIn 1.1s both
}

.pf-hero figure>img {
    width: 100%;
    height: min(70vh, 760px)
}

.pf-hero figcaption {
    display: flex;
    justify-content: space-between;
    margin-top: 13px;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase
}

.pf-filter {
    position: sticky;
    z-index: 15;
    top: 82px;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 18px var(--pf-pad);
    border-block: 1px solid #bdb7ad;
    background: rgba(244, 241, 234, .9);
    backdrop-filter: blur(14px)
}

.pf-filter>span {
    flex: none;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase
}

.pf-filter>div {
    display: flex;
    gap: clamp(16px, 2.3vw, 38px);
    overflow-x: auto;
    scrollbar-width: none
}

.pf-filter button {
    position: relative;
    flex: none;
    padding: 6px 0;
    border: 0;
    background: none;
    font: 600 .62rem var(--body);
    letter-spacing: .11em;
    text-transform: uppercase;
    cursor: pointer
}

.pf-filter button::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transition: right .25s
}

.pf-filter button[aria-pressed=true]::after,
.pf-filter button:hover::after {
    right: 0
}

.pf-editorial {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(65px, 9vw, 145px) clamp(16px, 3vw, 48px);
    padding: clamp(100px, 13vw, 190px) var(--pf-pad);
    scroll-margin-top: 150px
}

.portfolio-shot {
    position: relative;
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: opacity .22s, filter .28s, transform .5s
}

.portfolio-shot.is-filtering {
    opacity: .25;
    filter: blur(4px);
    transform: scale(.99)
}

.portfolio-shot[hidden] {
    display: none
}


/* .portfolio-shot:nth-of-type(5n+1) {
    grid-column: 1/8
}

.portfolio-shot:nth-of-type(5n+2) {
    grid-column: 9/13;
    margin-top: 12vw
}

.portfolio-shot:nth-of-type(5n+3) {
    grid-column: 3/12
}

.portfolio-shot:nth-of-type(5n+4) {
    grid-column: 1/5
}

.portfolio-shot:nth-of-type(5n) {
    grid-column: 6/13;
    margin-top: 5vw
} */

.shot-image {
    display: block;
    overflow: hidden;
    background: #ddd6ca;
    aspect-ratio: 4/4
}


/* .portfolio-shot:nth-of-type(5n+1) .shot-image {
    aspect-ratio: 4/5
}

.portfolio-shot:nth-of-type(5n+2) .shot-image {
    aspect-ratio: 1/1
}

.portfolio-shot:nth-of-type(5n+3) .shot-image {
    aspect-ratio: 16/9
}

.portfolio-shot:nth-of-type(5n+4) .shot-image {
    aspect-ratio: 2/3
}

.portfolio-shot:nth-of-type(5n) .shot-image {
    aspect-ratio: 3/2
} */

.shot-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.2, .8, .2, 1)
}

.portfolio-shot:hover .shot-image img {
    transform: scale(1.02)
}

.shot-number {
    display: block;
    margin-bottom: 10px;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase
}

.shot-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    margin-top: 12px
}

.shot-meta b {
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 500
}

.shot-meta small {
    font-size: .54rem;
    letter-spacing: .09em;
    text-align: right;
    text-transform: uppercase
}

.pf-editorial.is-filtered .portfolio-shot:not([hidden]) {
    grid-column: 2/7;
    margin-top: 0
}

.pf-editorial.is-filtered .portfolio-shot:not([hidden]):nth-of-type(even) {
    grid-column: 7/12;
    margin-top: clamp(45px, 8vw, 110px)
}

.pf-editorial.is-filtered .portfolio-shot:not([hidden]) .shot-image {
    aspect-ratio: 4/5
}

.pf-editorial.is-filtered .portfolio-shot:only-of-type {
    grid-column: 3/11
}

.pf-empty {
    grid-column: 1/-1;
    padding: 80px 0;
    font-family: var(--display);
    font-size: 2rem;
    text-align: center
}

.pf-story {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    align-items: center;
    gap: 28px clamp(30px, 4vw, 64px);
    padding-block: clamp(60px, 7vw, 110px);
    padding-inline: max(var(--pf-pad), calc((100% - 1440px)/2));
    background: #151716;
    color: #fff;
}

.pf-story>.pf-kicker {
    grid-column: 1/-1;
    margin: 0;
}

.pf-story-image {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: #0b0c0b;
}

.pf-story-image img:not(.season-video-logo),
.pf-story-image video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: contain;
}

.pf-story-copy {
    min-width: 0;
    padding: 20px 0;
}

.pf-story h2 {
    margin: 16px 0 24px;
    font-family: var(--display);
    font-size: clamp(2.5rem, 3.8vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.pf-story-copy .nl-link {
    margin-top: 22px;
}

@media(max-width:1000px) {
    .pf-story {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .pf-story-copy {
        padding: 12px 0 0;
        max-width: 650px;
    }
    .pf-story h2 {
        font-size: clamp(2.5rem, 6vw, 4rem);
    }
}

.pf-story span,
.pf-story>div p {
    font-size: .6rem;
    letter-spacing: .13em;
    text-transform: uppercase
}

.pf-roll {
    padding: 100px 0;
    background: #090a09;
    color: #fff
}

.pf-roll header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    padding: 0 var(--pf-pad) 45px
}

.pf-roll h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: 500
}

.pf-roll header>p:last-child {
    justify-self: end;
    color: #aaa
}

.pf-reel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 13px var(--pf-pad) 25px;
    scroll-snap-type: x proximity;
    scrollbar-color: #666 transparent;
    cursor: grab
}

.pf-reel.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none
}

.reel-frame {
    flex: 0 0 clamp(210px, 22vw, 350px);
    padding: 10px;
    border: 1px solid #3d403e;
    background: #121412;
    color: #fff;
    text-align: left;
    scroll-snap-align: start;
    cursor: pointer
}

.reel-frame>span,
.reel-frame small {
    display: block;
    padding: 7px 2px;
    font-size: .52rem;
    letter-spacing: .12em;
    text-transform: uppercase
}

.reel-frame img {
    width: 100%;
    height: 280px;
    transition: transform .45s
}

.reel-frame:hover img {
    transform: scale(1.035)
}

.pf-spread {
    display: grid;
    grid-template-columns: 1.2fr .7fr .65fr;
    gap: clamp(25px, 5vw, 80px);
    align-items: center;
    padding: clamp(120px, 16vw, 230px) var(--pf-pad)
}

.pf-spread>div:first-child img {
    width: 100%;
    height: 620px
}

.pf-spread>div:last-child img {
    width: 100%;
    height: 430px
}

.pf-spread h2,
.pf-prints h2,
.pf-cta h2 {
    margin: 0 0 20px;
    font-family: var(--display);
    font-size: clamp(2.8rem, 5vw, 5.8rem);
    font-weight: 500;
    line-height: .93
}

.portfolio-page .seasonal-feature {
    margin: 0;
    padding: clamp(48px, 6vw, 88px) var(--pf-pad);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    color: var(--black);
}
.portfolio-page .seasonal-feature > div { min-width: 0; max-width: 620px; }
.portfolio-page .seasonal-feature h2 {
    font-size: clamp(2.2rem, 4vw, 4.5rem);
    line-height: 1.08;
    letter-spacing: -.025em;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
.portfolio-page .seasonal-feature > div > p:not(.nl-kicker):not(.seasonal-dates) {
    max-width: 48ch;
    line-height: 1.8;
    margin: 20px 0 26px;
}
.portfolio-page .seasonal-feature .seasonal-dates { line-height: 1.8; }
.portfolio-page .seasonal-feature .outline-pill { margin-top: 12px; }
.portfolio-page .seasonal-feature .seasonal-photo { max-width: 480px; justify-self: center; min-width: 0; }
.portfolio-page .seasonal-feature .seasonal-photo-frame { background: transparent; }
@media (max-width: 800px) {
    .portfolio-page .seasonal-feature { grid-template-columns: minmax(0, 1fr); }
    .portfolio-page .seasonal-feature > div { max-width: none; }
    .portfolio-page .seasonal-feature .seasonal-photo { width: 100%; }
}

.pf-prints {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: center;
    padding: clamp(110px, 14vw, 190px) var(--pf-pad);
    background: #ebe6dc
}

.pf-print-stack {
    position: relative;
    height: 560px
}

.pf-print-stack img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(48%, 330px);
    height: 430px;
    padding: 12px 12px 42px;
    background: #fff;
    box-shadow: 0 18px 45px #211b1422;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1)
}

.pf-print-stack img:nth-child(1) {
    transform: translate(-72%, -48%) rotate(-7deg)
}

.pf-print-stack img:nth-child(2) {
    transform: translate(-28%, -52%) rotate(6deg)
}

.pf-print-stack img:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-1deg)
}

.pf-print-stack:hover img:nth-child(1) {
    transform: translate(-88%, -48%) rotate(-10deg)
}

.pf-print-stack:hover img:nth-child(2) {
    transform: translate(-12%, -50%) rotate(9deg)
}

.pf-print-stack:hover img:nth-child(3) {
    transform: translate(-50%, -56%) rotate(-1deg)
}

.darkroom {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #090a09;
    color: #fff;
    opacity: 0;
    transform: scale(.985);
    transition: opacity .3s, transform .3s
}

.darkroom[open] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    opacity: 1;
    transform: none
}

.darkroom::backdrop {
    background: #090a09
}

.darkroom-bar,
.darkroom-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px clamp(20px, 4vw, 60px)
}

.darkroom button {
    border: 0;
    background: none;
    color: #fff;
    font: 600 .65rem var(--body);
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer
}

.darkroom-bar button {
    font-size: 2rem;
    font-weight: 300
}

.darkroom-stage {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 35px;
    align-items: end;
    justify-items: center;
    min-height: 0;
    padding: 0 clamp(20px, 7vw, 120px)
}

.darkroom-stage>img {
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    background: transparent
}

.darkroom-stage>div {
    width: 200px
}

.darkroom-stage h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 500
}

.darkroom-stage p {
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase
}

.darkroom-controls span {
    font: 600 .65rem monospace
}

.photo-cursor {
    position: fixed;
    z-index: 100;
    width: 44px;
    height: 44px;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .15s
}

.photo-cursor::before,
.photo-cursor::after {
    content: '';
    position: absolute;
    inset: 0;
    border: solid #fff;
    filter: drop-shadow(0 1px 2px #000)
}

.photo-cursor::before {
    border-width: 1px 0
}

.photo-cursor::after {
    border-width: 0 1px
}

.photo-cursor.is-visible {
    opacity: 1
}

@keyframes pfCopyIn {
    from {
        opacity: 0;
        transform: translateY(30px)
    }
}

@keyframes pfImageIn {
    from {
        opacity: 0;
        transform: scale(1.04)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@media(max-width:900px) {
    .pf-hero {
        grid-template-columns: 1fr;
        padding-top: 130px
    }
    .pf-hero figure {
        width: 72%;
        margin-left: auto
    }
    .pf-filter {
        top: 70px;
        display: block
    }
    .pf-filter>span {
        display: block;
        margin-bottom: 8px
    }
    .pf-editorial {
        gap: 75px 18px
    }
    .portfolio-shot:nth-of-type(n) {
        grid-column: auto;
        margin-top: 0
    }
    .portfolio-shot:nth-of-type(odd) {
        grid-column: 1/8
    }
    .portfolio-shot:nth-of-type(even) {
        grid-column: 8/13
    }
    .pf-spread {
        grid-template-columns: 1fr 1fr
    }
    .pf-spread>div:nth-child(2) {
        grid-column: 1/-1;
        grid-row: 1
    }
    .pf-prints {
        grid-template-columns: 1fr
    }
    .pf-cta>img {
        width: 145px;
        height: 200px;
        opacity: .45
    }
    .darkroom-stage {
        grid-template-columns: 1fr
    }
    .darkroom-stage>div {
        width: auto;
        justify-self: start
    }
}

@media(max-width:560px) {
    .pf-hero {
        min-height: auto;
        padding-top: 125px
    }
    .pf-hero h1 {
        font-size: 4.25rem
    }
    .pf-hero figure {
        width: 100%
    }
    .pf-hero figure>img {
        height: 54vh
    }
    .pf-filter {
        top: 62px;
        padding-block: 13px
    }
    .pf-editorial {
        display: block;
        padding-block: 85px
    }
    .portfolio-shot {
        margin: 0 0 75px!important
    }
    .portfolio-shot:nth-of-type(n) .shot-image {
        aspect-ratio: auto
    }
    .portfolio-shot:nth-of-type(n) .shot-image img {
        height: auto;
        max-height: 72vh
    }
    .shot-meta small {
        display: none
    }
    .pf-roll header {
        display: block
    }
    .pf-roll header>p:last-child {
        margin-top: 16px
    }
    .reel-frame {
        flex-basis: 68vw
    }
    .pf-spread {
        display: block
    }
    .pf-spread>div {
        margin-bottom: 65px
    }
    .pf-spread>div:first-child img,
    .pf-spread>div:last-child img {
        height: auto
    }
    .pf-print-stack {
        height: 400px
    }
    .pf-print-stack img {
        height: 310px
    }
    .pf-cta {
        min-height: 600px
    }
    .pf-cta>img {
        width: 100px;
        height: 145px
    }
    .darkroom-stage {
        display: block;
        padding-inline: 14px
    }
    .darkroom-stage>img {
        width: 100%;
        height: 65vh
    }
    .darkroom-stage>div {
        padding-top: 12px
    }
    .darkroom-controls {
        padding-inline: 14px
    }
    .darkroom-controls button {
        font-size: .55rem
    }
}

@media(pointer:coarse) {
    .portfolio-shot {
        cursor: pointer
    }
    .photo-cursor {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .pf-hero-copy,
    .pf-hero figure {
        animation: none
    }
    .portfolio-shot,
    .portfolio-shot img,
    .pf-print-stack img,
    .darkroom {
        transition: none!important
    }
}

.pf-editorial.is-filtered.has-single-result .portfolio-shot:not([hidden]) {
    grid-column: 3/11;
    margin-top: 0
}


/* Controlled portfolio image scale */

.pf-editorial {
    width: min(1680px, 100%);
    margin-inline: auto;
}

.portfolio-shot:nth-of-type(5n+1) {
    max-width: 820px;
}

.portfolio-shot:nth-of-type(5n+2) {
    max-width: 480px;
}

.portfolio-shot:nth-of-type(5n+3) {
    width: 100%;
    max-width: 1180px;
    justify-self: center;
}

.portfolio-shot:nth-of-type(5n+4) {
    max-width: 520px;
}

.portfolio-shot:nth-of-type(5n) {
    width: 100%;
    max-width: 920px;
}

.portfolio-shot:nth-of-type(5n+1) .shot-image {
    max-height: 900px;
}

.portfolio-shot:nth-of-type(5n+2) .shot-image {
    max-height: 480px;
}

.portfolio-shot:nth-of-type(5n+3) .shot-image {
    max-height: 650px;
}

.portfolio-shot:nth-of-type(5n+4) .shot-image {
    max-height: 760px;
}

.portfolio-shot:nth-of-type(5n) .shot-image {
    max-height: 620px;
}

.pf-editorial.is-filtered .portfolio-shot:not([hidden]) {
    width: 100%;
    max-width: 680px;
}

.pf-hero,
.pf-spread {
    width: min(1680px, 100%);
    margin-inline: auto;
}

.pf-spread img {
    max-width: 100%;
}

@media (max-width: 560px) {
    .portfolio-shot:nth-of-type(n),
    .pf-editorial.is-filtered .portfolio-shot:not([hidden]) {
        width: 100%;
        max-width: none;
    }
    .portfolio-shot:nth-of-type(n) .shot-image {
        max-height: 72vh;
    }
}

@media(hover:hover) and (pointer:fine) {
    body[data-cursor="view-photo"] .portfolio-shot {
        cursor: none
    }
}

body[data-cursor="view-photo"] .photo-cursor {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border: 1px solid #ffffffa6;
    border-radius: 50%;
    background: #14231c9c;
    backdrop-filter: blur(5px);
    color: white;
    font: 600 9px var(--body);
    font-style: normal;
    letter-spacing: .05em;
    text-transform: uppercase
}

body[data-cursor="view-photo"] .photo-cursor::before,
body[data-cursor="view-photo"] .photo-cursor::after {
    display: none
}
.pf-reel.is-looping{scroll-snap-type:none;scroll-behavior:auto}

.pf-reel.is-looping{touch-action:pan-y;user-select:none}.pf-reel .reel-frame img{-webkit-user-drag:none}