@font-face{font-family:Hanken;src:url(/static/cutout/fonts/hanken-variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:JBMono;src:url(/static/cutout/fonts/jb-mono-variable.woff2) format('woff2');font-weight:100 800;font-display:swap}
body.portfolio-story-page{height:100dvh;min-height:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--hattie-black);font-family:Hanken,system-ui,sans-serif}
.portfolio-story-page #main{min-height:0;overflow:hidden;padding:0;display:flex;flex-direction:column}
.story-shell{--story-screen:calc(100svh - 200px);--story-gutter:clamp(24px,5.3vw,88px);--story-display:clamp(64px,10vw,152px);--story-title:clamp(48px,8vw,120px);--story-feedback:180ms;min-width:0;min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;background:var(--hattie-black);color:var(--hattie-white)}
.story-scroll{min-height:0;position:relative;overflow-y:auto;overflow-x:clip;overscroll-behavior-y:contain;scrollbar-width:none}.story-scroll::-webkit-scrollbar{display:none}
.story-chapter{position:relative;height:var(--story-screen);isolation:isolate}.story-stage{position:relative;height:var(--story-screen);overflow:hidden;isolation:isolate;background:var(--hattie-black)}
.story-media{position:relative;overflow:hidden;min-width:0;background:var(--hattie-charcoal)} .story-media-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--hattie-secondary-size);padding:var(--hattie-space-16);color:var(--hattie-white)}.story-media img{position:relative;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}.story-media-error{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:var(--hattie-space-16);padding:var(--hattie-space-16);background:var(--hattie-black);color:var(--hattie-white);text-align:center;z-index:5}.story-media-error[hidden]{display:none}.story-media-error p{font-size:var(--hattie-copy-size);margin:0;word-break:keep-all}.story-media-error button{min-height:var(--hattie-control-min);padding:var(--hattie-space-8) var(--hattie-space-12);border:1px solid currentColor;border-radius:var(--hattie-radius-sm);background:transparent;color:inherit;font:inherit;cursor:pointer}
.story-shade{position:absolute;inset:0;z-index:1;background:var(--hattie-photo-shade);pointer-events:none}
.story-shell h1,.story-shell h2,.story-shell h3,.story-shell p{margin:0;word-break:keep-all;overflow-wrap:anywhere}.story-shell h1{font-size:var(--story-display);font-weight:500;line-height:1.04;letter-spacing:-.06em}.story-shell h2{font-size:var(--story-title);font-weight:500;line-height:1.06;letter-spacing:-.05em}.story-shell h3{font-size:var(--hattie-space-24);font-weight:500;line-height:1.2}.story-kicker{font-size:var(--hattie-secondary-size);line-height:1.6;margin-bottom:var(--hattie-space-24)!important}.story-intro{font-size:var(--hattie-copy-size);line-height:1.6;margin-top:var(--hattie-space-24)!important}
.story-opening-photo{--story-mask-y:8%;--story-mask-x:18%;position:absolute;inset:0;clip-path:inset(var(--story-mask-y) var(--story-mask-x));transform-origin:center}.story-opening-photo img{object-position:65% 25%;transform:scale(1.3)}.story-opening-copy{position:absolute;inset:var(--hattie-space-48) var(--story-gutter) auto;z-index:2}.story-opening-copy h1 span{display:block;width:fit-content}.story-opening-copy h1 span+span{margin-left:12vw}.story-opening-end{position:absolute;left:var(--story-gutter);bottom:var(--hattie-space-64);z-index:3}.story-opening-end>p{font-size:var(--hattie-space-32)}.story-scroll-hint{position:absolute;bottom:var(--hattie-space-24);left:var(--story-gutter);z-index:3;font-size:var(--hattie-secondary-size)}.story-scroll-hint span{display:inline-block;margin-left:var(--hattie-space-16)}
.story-portrait-photo{position:absolute;inset:0 0 0 35%;clip-path:inset(0 10% 0 15%);transform-origin:65% 35%}.story-portrait-photo img{object-position:50% 20%}.story-ghost{position:absolute;inset:var(--hattie-space-32) auto auto var(--story-gutter);font-size:clamp(120px,24vw,360px);font-weight:600;line-height:1;color:var(--hattie-white);opacity:.12;white-space:nowrap;letter-spacing:-.07em;pointer-events:none}.story-portrait-copy{position:absolute;left:var(--story-gutter);bottom:var(--hattie-space-64);z-index:2;max-width:65%}.story-portrait-copy h2{max-width:10ch}.story-portrait-copy>p:not(.story-kicker){font-size:var(--hattie-copy-size);line-height:1.6;margin-top:var(--hattie-space-16)}
.story-crossing-base{position:absolute;inset:0}.story-crossing-base img{object-position:65% 25%}.story-crossing-panel{position:absolute;inset:0 0 0 50%;transform-origin:right center;border-left:1px solid var(--hattie-white)}.story-crossing-panel img{object-position:50% 20%}.story-crossing-copy{position:absolute;left:var(--story-gutter);bottom:var(--hattie-space-64);z-index:3}.story-crossing-copy h2{max-width:12ch}.story-crossing-line{position:absolute;inset:var(--hattie-space-32);border:1px solid var(--hattie-blue-light);z-index:2;pointer-events:none}
.story-worlds-heading{position:absolute;inset:var(--hattie-space-32) auto auto var(--story-gutter);z-index:2;pointer-events:none}.story-worlds-heading h2{font-size:clamp(48px,6vw,88px)}.story-reel{position:absolute;inset:var(--hattie-space-48) auto var(--hattie-space-32) 40%;display:flex;gap:var(--hattie-space-24);width:max-content}.story-reel-item{width:42vw;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:var(--hattie-space-16)}.story-reel-item .story-media{height:100%}.story-reel-item>div:last-child{padding-right:var(--hattie-space-16)}.story-reel-item h3{font-size:var(--hattie-space-32)}
.story-memory .story-stage{background:var(--hattie-white);color:var(--hattie-black)}.story-memory-copy{position:absolute;left:var(--story-gutter);top:50%;transform:translateY(-50%);z-index:3;max-width:50%}.story-memory-copy h2{font-size:clamp(40px,5vw,72px)}.story-prints{position:absolute;inset:var(--hattie-space-48) var(--story-gutter) var(--hattie-space-48) 53%;perspective:1200px;display:grid;place-items:center}.story-print{grid-area:1/1;width:min(88%,320px);margin:0;padding:var(--hattie-space-12);background:var(--hattie-white);box-shadow:var(--hattie-photo-shadow);transform:rotate(4deg)}.story-print:first-child:not(:last-child){transform:translateX(-25%) rotate(-8deg)}.story-print .story-media{aspect-ratio:3/4}.story-print figcaption{padding:var(--hattie-space-16) var(--hattie-space-4) var(--hattie-space-8);font-size:var(--hattie-secondary-size);color:var(--hattie-muted)}.story-note{display:block;font:24px/1.4 var(--hattie-caption-hand,cursive);color:var(--hattie-brand-blue);word-break:keep-all}
.story-shell .pc-work-link{display:inline-flex;align-items:center;gap:var(--hattie-space-12);min-height:var(--hattie-control-size);max-width:100%;color:inherit;text-decoration:none;font-size:var(--hattie-secondary-size);margin-top:var(--hattie-space-16)}.story-shell .pc-work-link svg{width:var(--hattie-space-20);height:var(--hattie-space-20);flex:none;color:var(--hattie-blue-light)}.story-memory .pc-work-link svg{color:var(--hattie-brand-blue)}.story-shell .pc-link-action{font:400 var(--hattie-label-size)/1.5 JBMono,monospace;white-space:nowrap;text-decoration:underline;text-underline-offset:var(--hattie-space-4)}.story-shell .pc-link-name{max-width:20ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-archive,.story-empty{position:relative;min-height:var(--story-screen);padding:var(--hattie-space-32) var(--story-gutter);background:var(--hattie-black);color:var(--hattie-white)}.story-archive-heading{display:flex;justify-content:space-between;align-items:end;gap:var(--hattie-space-24);margin-bottom:var(--hattie-space-24)}.story-archive-heading h2{font-size:clamp(36px,4vw,56px)}.story-archive-heading p{font:400 var(--hattie-secondary-size)/1.5 JBMono,monospace;flex:none;color:var(--hattie-blue-light)}.story-archive-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--hattie-space-24)}.story-archive-grid>article{position:relative;display:block;color:inherit;text-decoration:none;min-width:0}.story-archive-grid .story-media{height:clamp(180px,calc(var(--story-screen) - 220px),540px)}.story-archive-grid h3{font-size:var(--hattie-space-24);margin-top:var(--hattie-space-16);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.story-archive-grid>article>span{display:block;color:var(--hattie-blue-light);font-size:var(--hattie-secondary-size);padding:var(--hattie-space-12) 0}.story-archive-grid>article:has(a:hover) .story-media{outline:1px solid var(--hattie-blue-light);outline-offset:var(--hattie-space-4)}.story-empty{display:flex;flex-direction:column;justify-content:center;gap:var(--hattie-space-24)}.story-empty h1{font-size:var(--story-title)}.story-empty>a{color:var(--hattie-blue-light);font-size:var(--hattie-copy-size);min-height:var(--hattie-control-min);display:inline-flex;align-items:center}.story-end{min-height:var(--story-screen);display:flex;align-items:center;padding-block:var(--hattie-space-32)}.story-end>footer{width:100%}.story-archive-link{position:absolute;inset:0;z-index:2}
.story-controls{display:flex;justify-content:space-between;align-items:center;gap:var(--hattie-space-24);padding:var(--hattie-space-12) var(--story-gutter);background:var(--hattie-black);color:var(--hattie-white);border-top:1px solid var(--hattie-grey)}.story-position{min-width:0;width:22%;flex:none}.story-position>p{font-size:var(--hattie-secondary-size);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.story-progress{height:2px;margin-top:var(--hattie-space-8);background:var(--hattie-grey)}.story-progress>span{display:block;width:100%;height:100%;background:var(--hattie-blue-light);transform:scaleX(0);transform-origin:left}.story-controls nav{display:flex;gap:var(--hattie-space-8)}.story-controls nav button{min-height:var(--hattie-control-min);padding:var(--hattie-space-8) var(--hattie-space-12);background:transparent;color:inherit;border:1px solid transparent;border-radius:var(--hattie-radius-sm);font:inherit;font-size:var(--hattie-label-size);cursor:pointer}.story-controls nav button[aria-current],.story-controls nav button[aria-pressed=true]{background:var(--hattie-blue-wash);color:var(--hattie-black)}.story-steps{display:flex;gap:var(--hattie-space-8);flex:none}.story-steps button{width:var(--hattie-control-size);height:var(--hattie-control-size);display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;font:inherit;font-size:var(--hattie-space-24);cursor:pointer}.story-steps button:disabled{opacity:var(--hattie-disabled-opacity);cursor:default}.story-controls button:hover,.story-media-error button:hover{background:var(--hattie-soft-hover)}.story-controls button:active,.story-media-error button:active,.story-shell a:active{opacity:.65}.story-shell :focus-visible{outline:var(--hattie-focus-width) solid var(--hattie-blue-light);outline-offset:var(--hattie-focus-offset)}.story-memory :focus-visible{outline-color:var(--hattie-brand-blue)}.story-scroll:focus-visible{outline-offset:-2px}
.story-shell[data-static] .story-opening-photo,.story-shell[data-static] .story-portrait-photo{clip-path:none}.story-shell[data-static] .story-opening-photo img{transform:none}.story-shell[data-static] .story-reel{position:relative;inset:auto;padding:var(--hattie-space-24) var(--story-gutter);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:auto;height:100%;padding-top:160px}.story-shell[data-static] .story-reel-item{width:auto}.story-shell[data-static] .story-worlds-heading h2{font-size:var(--hattie-space-32)}.story-shell[data-static] .story-worlds-heading h2 br{display:none}
@media(max-width:767.98px){.story-shell{--story-display:clamp(44px,12vw,64px);--story-title:clamp(36px,11vw,56px);--story-gutter:var(--hattie-space-24)}.story-scroll{scroll-snap-type:y mandatory}.story-archive,.story-end,.story-empty{scroll-snap-align:start;scroll-snap-stop:always}.story-opening-copy{top:auto;bottom:96px}.story-opening-copy h1 span+span{margin-left:0}.story-opening-photo{--story-mask-x:8%}.story-opening-photo img{object-position:56% 25%}.story-opening-end{bottom:var(--hattie-space-64)}.story-portrait-photo{inset:0 0 0 5%;clip-path:inset(0 0 0 8%)}.story-portrait-copy{bottom:var(--hattie-space-32);max-width:85%;padding-right:var(--hattie-space-16)}.story-portrait-copy::before{content:'';position:absolute;inset:-64px -24px -32px;z-index:-1;background:var(--hattie-photo-shade)}.story-ghost{top:var(--hattie-space-32);font-size:36vw}.story-crossing-copy{bottom:var(--hattie-space-48)}.story-crossing-panel{left:42%}.story-crossing-line{inset:var(--hattie-space-16)}.story-worlds-heading{top:var(--hattie-space-24)}.story-worlds-heading h2{font-size:var(--story-title)}.story-reel{left:var(--story-gutter);top:200px;bottom:var(--hattie-space-24)}.story-reel-item{width:78vw;gap:var(--hattie-space-8)}.story-reel-item h3{font-size:var(--hattie-space-24)}.story-reel-item .pc-work-link{margin-top:0}.story-memory-copy{top:var(--hattie-space-24);transform:none;max-width:100%;right:var(--story-gutter)}.story-memory-copy h2{font-size:clamp(32px,9vw,44px)}.story-memory-copy .pc-work-link{margin-top:var(--hattie-space-8)}.story-memory-copy .story-kicker{margin-bottom:var(--hattie-space-12)!important}.story-prints{inset:220px var(--hattie-space-32) var(--hattie-space-24)}.story-print{width:min(55%,calc((var(--story-screen) - 260px) * .48));max-width:176px;padding:var(--hattie-space-8)}.story-print figcaption{padding-block:var(--hattie-space-8);font-size:var(--hattie-secondary-size)}.story-note{font-size:20px}.story-archive{padding-block:var(--hattie-space-24)}.story-archive-heading{align-items:start;gap:var(--hattie-space-16);margin-bottom:var(--hattie-space-16)}.story-archive-heading h2{font-size:var(--hattie-space-32);max-width:7ch}.story-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hattie-space-16)}.story-archive-grid .story-media{height:clamp(100px,calc((var(--story-screen) - 300px) / 2),220px)}.story-archive-grid h3{font-size:var(--hattie-copy-size);margin-top:var(--hattie-space-8)}.story-archive-grid>article>span{font-size:var(--hattie-label-size);padding-block:var(--hattie-space-8)}.story-controls{padding:var(--hattie-space-8) var(--hattie-space-16);gap:var(--hattie-space-8);flex-wrap:wrap}.story-position{width:auto;flex:1}.story-controls nav{order:3;width:100%;justify-content:space-between;gap:var(--hattie-space-4)}.story-controls nav button{padding-inline:var(--hattie-space-8)}.story-shell[data-static] .story-chapter{scroll-snap-align:start;scroll-snap-stop:always}.story-shell[data-static] .story-worlds{height:auto;min-height:var(--story-screen)}.story-shell[data-static] .story-worlds .story-stage{height:auto;min-height:var(--story-screen)}.story-shell[data-static] .story-reel{grid-template-columns:1fr;padding-top:var(--hattie-space-64)}.story-shell[data-static] .story-reel-item .story-media{height:320px}.story-shell[data-static] .story-worlds-heading{position:relative;inset:auto;padding:var(--hattie-space-24) var(--story-gutter) 0}}
@media(max-height:700px){.story-shell{--story-display:clamp(40px,8vw,88px)}.story-opening-copy{top:var(--hattie-space-24)}.story-opening-copy .story-kicker{margin-bottom:var(--hattie-space-12)!important}.story-intro{margin-top:var(--hattie-space-16)!important}.story-print{max-height:100%}.story-worlds-heading h2{font-size:var(--hattie-space-32)}.story-reel{top:160px}.story-memory-copy h2{font-size:var(--hattie-space-32)}}
.story-crossing-copy{right:calc(var(--story-gutter) + var(--hattie-space-16))}.story-reel-item,.story-reel-item .story-media{min-height:0}.story-shell[data-static] .story-opening-end{display:none}.story-shell[data-static] .story-reel{grid-template-rows:minmax(0,1fr)}
.story-media:has(.story-media-error:not([hidden])){z-index:4}
.story-worlds-heading::before{content:'';position:absolute;inset:calc(-1 * var(--hattie-space-16)) calc(-1 * var(--hattie-space-24));z-index:-1;background:var(--hattie-black);pointer-events:none}
.story-shell[data-step-mode] .story-scroll{scroll-snap-type:none;touch-action:pan-x pinch-zoom}
.story-stage:has(.story-media-error:not([hidden])) :is(.story-opening-copy,.story-opening-end,.story-portrait-copy,.story-crossing-copy,.story-ghost,.story-crossing-line){display:none}.story-opening-photo:has(.story-media-error:not([hidden])){clip-path:none}
@media(prefers-reduced-motion:reduce){.story-shell{--story-feedback:0ms}.story-scroll{scroll-behavior:auto}}