.projects-page .content-view{display:flex;align-items:stretch;min-height:100dvh;padding:clamp(100px,16dvh,138px) 4.8vw clamp(24px,4dvh,48px)}
.projects-shell{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;max-width:1640px;min-width:0;margin:0 auto}
.projects-shell>.projects-title{display:flex;align-items:baseline;width:fit-content;max-width:100%;margin:0 0 25px;padding-bottom:3px;overflow:hidden;font:180 clamp(36px,4.3vw,72px)/1.03 Roboto Flex,Arial,sans-serif;letter-spacing:-.025em;text-transform:uppercase;cursor:default}
.projects-title>span{display:inline-block;font-variation-settings:'opsz' 144,'wdth' 68,'wght' 180;animation:projects-letter-in .85s calc(.055s * var(--letter)) var(--ease) both;transition:font-variation-settings .65s var(--ease),color .4s}
.projects-title:hover>span,.projects-title:focus-visible>span{font-variation-settings:'opsz' 144,'wdth' 100,'wght' 280;color:var(--accent)}
.projects-title>span:hover{font-variation-settings:'opsz' 144,'wdth' 130,'wght' 400;color:var(--accent-alt)}
.projects-atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 30% 65%,rgb(var(--accent-rgb) / 0.0431),transparent 60%),radial-gradient(ellipse at 72% 62%,rgb(var(--accent-alt-rgb) / 0.0314),transparent 55%)}
.projects-atmosphere .cloud-canvas{opacity:.45}
.paper-deck{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.paper-project{position:relative;min-width:0}
.paper-face{position:relative;height:100%;background:var(--fold-bg);isolation:isolate;overflow:hidden}
.paper-glow{display:none}
.paper-heading{position:relative;z-index:3;margin:0;font:inherit;pointer-events:none}
.paper-toggle{display:flex;align-items:center;gap:24px;width:100%;padding:24px;background:none;text-align:left;pointer-events:auto}
.paper-toggle:disabled{color:var(--ink);cursor:default}
.paper-name{font:500 32px/1 Roboto Flex,Arial,sans-serif;font-variation-settings:'opsz' 72,'wdth' 100;letter-spacing:-.02em}
.paper-rule{display:block;width:36px;height:1px;background:var(--accent)}
.paper-content{position:relative;display:flex;flex-direction:column}
.project-cover{display:block;height:100%;cursor:pointer}
.project-cover:focus-visible{outline:1px solid var(--accent-alt);outline-offset:-14px}
.paper-preview{position:relative;margin:0;min-height:0;overflow:hidden}
.palette-definitions{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.paper-preview img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:var(--image-grade)}
.paper-caption{display:flex;justify-content:flex-end;padding:12px 24px 20px}
.project-explore{position:relative;display:inline-flex;align-items:center;gap:20px;min-height:44px;padding:10px 0;color:var(--accent-alt);font:11px/1.4 Plex,monospace;white-space:nowrap;transition:color .3s,gap .4s var(--ease)}
.project-explore::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--accent),var(--accent-alt));transform:scaleX(.4);transform-origin:left;transition:transform .5s var(--ease)}
.project-explore:hover::after,.project-explore:focus-visible::after{transform:scaleX(1)}
.project-cover:hover .project-explore::after,.project-cover:focus-visible .project-explore::after{transform:scaleX(1)}
.project-explore span{font-size:19px;transition:translate .4s var(--ease),rotate .4s var(--ease)}.project-explore:hover{gap:26px;color:var(--ink)}.project-explore:hover span,.project-explore:focus-visible span{translate:2px -2px;rotate:8deg}
.project-cover:hover .project-explore,.project-cover:focus-visible .project-explore{gap:26px;color:var(--ink)}
.project-cover:hover .project-explore span,.project-cover:focus-visible .project-explore span{translate:2px -2px;rotate:8deg}

/* A narrow satin fold; its light and bend follow the pointer independently of the hit area. */
.js .paper-deck{display:flex;flex:1;gap:0;min-height:300px;max-height:670px;filter:drop-shadow(0 24px 28px #0005)}
.js .paper-deck .paper-project{flex:1 1 0;min-width:44px;transition:flex-grow .74s cubic-bezier(.22,.72,.18,1)}
.js .paper-deck .paper-project::before{content:'';position:absolute;z-index:5;right:-6px;top:2%;bottom:2%;width:12px;pointer-events:none;background:linear-gradient(90deg,transparent,#0004 45%,transparent);opacity:.5;transition:opacity .5s}
.js .paper-deck .paper-project[data-open]{flex-grow:8.7;z-index:2}
.js .paper-deck .paper-project[data-hover]{z-index:3}
.js .paper-deck .paper-face{position:absolute;inset:0;clip-path:polygon(0 1.5%,88% 0,100% 1.5%,100% 98.5%,88% 100%,0 98.5%);background:linear-gradient(90deg,var(--fold-start),var(--fold-mid) 58%,var(--fold-depth) 87.8%,rgb(var(--fold-highlight-rgb) / 0.1020) 88%,var(--fold-return) 90%,var(--fold-end));transform-origin:center;transform:perspective(1500px) translateY(var(--lift,0px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .65s var(--ease),clip-path .74s cubic-bezier(.22,.72,.18,1)}
.js .paper-deck .paper-project[data-hover] .paper-face{will-change:transform;transition:clip-path .74s cubic-bezier(.22,.72,.18,1)}
.js .paper-deck .paper-face::after{content:'';position:absolute;inset:0 0 0 auto;width:12%;z-index:2;border-left:1px solid rgb(var(--fold-line-rgb) / 0.1098);background:radial-gradient(ellipse 22px 180px at 0 var(--light-y,50%),rgb(var(--accent-alt-rgb) / 0.0863),transparent 75%),linear-gradient(90deg,rgb(var(--fold-edge-rgb) / 0.0353),transparent 18%,#0004);pointer-events:none;transition:width .74s var(--ease),border-color .4s}
.js .paper-deck .paper-glow{display:block;position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;opacity:0;background:radial-gradient(ellipse 260px 340px at var(--light-x,50%) var(--light-y,50%),rgb(var(--accent-alt-rgb) / 0.1294),rgb(var(--accent-rgb) / 0.0627) 40%,transparent 72%);transition:opacity .5s}
.js .paper-deck .paper-glow::after{content:'';position:absolute;inset:-30% -50%;translate:var(--sheen-x,0px) 0;background:linear-gradient(112deg,transparent 37%,rgb(var(--sheen-rgb) / 0.0353) 47%,rgb(var(--sheen-rgb) / 0.0784) 50%,transparent 61%);mix-blend-mode:screen}
.js .paper-deck .paper-project[data-hover] .paper-glow{opacity:1}
.js .paper-deck .paper-project:focus-within .paper-glow{opacity:.35}
.js .paper-deck .paper-project[data-near] .paper-face{--lift:-1px}
.js .paper-deck .paper-project[data-near] .paper-face::after{border-color:rgb(var(--fold-edge-rgb) / 0.2000)}
.js .paper-deck .paper-heading{position:absolute;inset:0;z-index:3}
.js .paper-deck .paper-toggle{height:100%;padding:22px 0 26px;flex-direction:column;justify-content:center;gap:26px;outline:none;translate:var(--label-x,0px) var(--label-y,0px);transition:translate .65s var(--ease)}
.js .paper-deck .paper-project[data-hover] .paper-toggle{transition:none}
.js .paper-deck .paper-name{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(18px,1.75vw,29px);font-weight:350;font-variation-settings:'opsz' 72,'wdth' 90;color:var(--fold-label);white-space:nowrap;letter-spacing:.035em;transition:color .3s,letter-spacing .55s var(--ease)}
.js .paper-deck .paper-project[data-hover]:not([data-open]) .paper-name{color:var(--accent-alt);letter-spacing:.065em}
.js .paper-deck .paper-rule{width:1px;height:30px;background:rgb(var(--accent-rgb) / 0.5020);transition:background .3s,width .55s var(--ease),height .55s var(--ease)}
.js .paper-deck .paper-project[data-hover]:not([data-open]) .paper-rule{height:48px;background:var(--accent-alt)}
.js .paper-deck .paper-content{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(6px);transform-origin:left center;transition:opacity .18s,transform .45s var(--ease),visibility .18s}
.js .paper-deck .paper-preview{position:absolute;inset:0}
.js .paper-deck .paper-preview img{height:100%;aspect-ratio:auto;object-position:58% 45%;scale:1.015;translate:var(--image-x,0px) var(--image-y,0px);transition:scale .95s var(--ease),translate .65s var(--ease),filter .5s}
.js .paper-deck .paper-project[data-hover] .paper-preview img{will-change:translate,scale;scale:1.055;filter:var(--image-grade) brightness(1.07) saturate(1.035);transition:scale .95s var(--ease),filter .5s}
.js .paper-deck .paper-preview::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgb(var(--scrim-rgb) / 0.9490),transparent 58%),linear-gradient(90deg,rgb(var(--scrim-side-rgb) / 0.2510),transparent 70%);pointer-events:none}
.js .paper-deck .paper-caption{position:absolute;inset:auto 34px 25px 36px;padding:0;z-index:2}
.js .paper-deck .paper-project[data-open] .paper-face{clip-path:polygon(0 1.5%,98.5% 0,100% 1.5%,100% 98.5%,98.5% 100%,0 98.5%)}
.js .paper-deck .paper-project[data-open] .paper-face::after{width:1.5%;border-color:rgb(var(--accent-alt-rgb) / 0.2706)}
.js .paper-deck .paper-project[data-hover] .paper-face::after{border-color:rgb(var(--accent-alt-rgb) / 0.5020)}
.js .paper-deck .paper-project[data-open] .paper-content{opacity:1;visibility:visible;transform:none;transition:opacity .38s .07s,transform .6s var(--ease),visibility 0s}
.js .paper-deck .paper-project[data-open] .paper-heading{inset:auto 40px 76px 36px}
.js .paper-deck .paper-project[data-open] .paper-toggle{height:auto;display:block;padding:0;pointer-events:none}
.js .paper-deck .paper-project[data-open] .paper-name{display:block;writing-mode:horizontal-tb;transform:none;font-size:clamp(42px,4.6vw,84px);font-weight:570;font-variation-settings:'opsz' 72,'wdth' 95;line-height:.95;letter-spacing:-.045em;color:var(--project-ink);animation:paper-title-in .4s .12s var(--ease) both}
.js .paper-deck .paper-project[data-open] .paper-rule{position:absolute;left:0;bottom:-18px;width:44px;height:1px;background:var(--accent-alt);animation:paper-title-in .4s .15s var(--ease) both}
.js .paper-deck .paper-project[data-open][data-hover] .paper-rule{width:76px}
.js .paper-deck .paper-project[data-open] .project-explore{animation:paper-title-in .4s .2s var(--ease) both}
.js .paper-deck .paper-toggle:focus-visible .paper-name{text-decoration:underline;text-decoration-color:var(--accent-alt);text-underline-offset:9px;text-decoration-thickness:1px;color:var(--ink)}
.js .paper-deck .paper-toggle:focus-visible .paper-rule{background:var(--accent-alt);box-shadow:0 0 0 1px rgb(var(--accent-alt-rgb) / 0.3333)}

@keyframes paper-title-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes projects-letter-in{from{opacity:0;translate:0 110%;filter:blur(3px);scale:.85 1}to{opacity:1;translate:0 0;filter:blur(0);scale:1}}

@media(min-width:1600px){.js .paper-deck .paper-heading{padding-bottom:0}.js .paper-deck .paper-project[data-open] .paper-heading{inset:auto 48px 88px 48px}.js .paper-deck .paper-content{inset:0}.js .paper-deck .paper-caption{inset:auto 44px 30px 48px}.project-explore{font-size:11px}}
@media(max-width:900px) and (min-width:761px){.js .paper-deck .paper-project[data-open]{flex-grow:12}.js .paper-deck .paper-project[data-open] .paper-heading{left:24px;right:28px}.js .paper-deck .paper-project[data-open] .paper-name{font-size:44px}.js .paper-deck .paper-caption{right:28px}}
@media(max-width:760px){
  .projects-page .content-view{display:block;padding:112px 5vw 40px}.projects-shell>.projects-title{font-size:42px;margin-bottom:26px}
  .paper-deck{grid-template-columns:1fr}.js .paper-deck{flex:none;flex-direction:column;min-height:0;max-height:none;filter:drop-shadow(0 14px 18px #0005)}
  .js .paper-deck .paper-project{flex:none;height:78px;transition:height .74s cubic-bezier(.22,.72,.18,1)}
  .js .paper-deck .paper-project[data-open]{height:clamp(340px,calc(90vw + 60px),540px);flex:none}
  .js .paper-deck .paper-project::before{inset:auto 3% -9px;width:auto;height:12px;background:linear-gradient(180deg,transparent,#0004 45%,transparent)}
  .js .paper-deck .paper-project[data-open]::before{width:auto;height:12px}
  .js .paper-deck .paper-face{clip-path:polygon(1.5% 0,98.5% 0,100% 88%,98.5% 100%,1.5% 100%,0 88%);background:linear-gradient(180deg,var(--fold-start),var(--fold-mid) 58%,var(--fold-depth) 87.8%,rgb(var(--fold-highlight-rgb) / 0.1020) 88%,var(--fold-return) 90%,var(--fold-end));transform-origin:center top}
  .js .paper-deck .paper-face::after{inset:auto 0 0;width:100%;height:12%;border-left:0;border-top:1px solid rgb(var(--fold-line-rgb) / 0.1098);background:linear-gradient(180deg,rgb(var(--fold-edge-rgb) / 0.0353),#0004);transition:height .74s var(--ease),border-color .4s}
  .js .paper-deck .paper-heading{width:100%;height:100%}.js .paper-deck .paper-toggle{flex-direction:row;justify-content:space-between;padding:0 26px;gap:20px}
  .js .paper-deck .paper-name{writing-mode:horizontal-tb;transform:none;font-size:23px;letter-spacing:.01em}
  .js .paper-deck .paper-rule{width:28px;height:1px}
  .js .paper-deck .paper-project[data-open] .paper-face{clip-path:polygon(1.5% 0,98.5% 0,100% 98.5%,98.5% 100%,1.5% 100%,0 98.5%)}
  .js .paper-deck .paper-project[data-open] .paper-face::after{width:100%;height:1.5%;border-top-color:rgb(var(--accent-alt-rgb) / 0.2706)}
  .js .paper-deck .paper-content{inset:0;transform:translateY(6px)}
  .js .paper-deck .paper-project[data-open] .paper-heading{inset:auto 26px 76px;width:auto;height:auto}
  .js .paper-deck .paper-project[data-open] .paper-name{font-size:clamp(32px,9vw,48px)}
  .js .paper-deck .paper-project[data-open] .paper-rule{width:40px;height:2px}
  .js .paper-deck .paper-caption{inset:auto 26px 25px 26px}.project-explore{font-size:11px;gap:14px}
}
@media(prefers-reduced-motion:reduce){.js .paper-deck .paper-glow{display:none}.js .paper-deck .paper-preview img{scale:1!important;translate:none!important;filter:var(--image-grade)!important}.js .paper-deck .paper-toggle{translate:none!important}.js .paper-deck{filter:none}.js .paper-deck .paper-content{transform:none}.js .paper-deck .paper-face{transform:none!important;will-change:auto!important}}

/* The first paint uses the final fold geometry; transitions begin after initialization. */
.js .paper-deck:not([data-transitions]) .paper-project,.js .paper-deck:not([data-transitions]) .paper-face,.js .paper-deck:not([data-transitions]) .paper-content{transition:none}