/* The portfolio is an independent, full-width editorial surface. */
.portfolio-detail { --folio-gutter: clamp(24px, 5vw, 88px); padding: 0; background: #fff; color: #20201f; font-family: "Helvetica Neue", Arial, sans-serif; overflow: clip; }
.portfolio-detail *, .portfolio-detail *::before, .portfolio-detail *::after { box-sizing: border-box; }
.portfolio-detail a { color: inherit; text-decoration: none; }
.portfolio-detail button { font: inherit; color: inherit; cursor: pointer; }
.portfolio-detail a:focus-visible, .portfolio-detail button:focus-visible { outline: 2px solid #746080; outline-offset: 6px; }
.portfolio-detail h1, .portfolio-detail h2, .portfolio-detail h3 { font-family: "Portfolio Light", "Helvetica Neue", sans-serif; font-weight: 200; letter-spacing: -.025em; text-transform: none; }
.portfolio-detail h2 { font-size: clamp(28px, 3vw, 46px); line-height: 1.15; margin: 12px 0 0; }
.folio-nav { position: absolute; z-index: 10; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 24px var(--folio-gutter); gap: 20px; }
.folio-signature { display: flex; align-items: center; gap: 14px; }
.folio-signature img { width: 39px; height: 46px; object-fit: contain; mix-blend-mode: multiply; }
body.show-portfolio .folio-signature img { animation: folio-signature 2.4s ease both; }
.folio-signature span { font-family: "Century Gothic", "Helvetica Neue", sans-serif; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
.folio-nav nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 40px); }
.folio-nav nav a { font-size: 12px; padding: 12px 0; }
.folio-nav nav a::after, .folio-text-link::after { content: ""; display: block; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.folio-nav nav a:hover::after, .folio-text-link:hover::after { transform: scaleX(1); }
.folio-hero { position: relative; width: 100%; height: 100svh; min-height: 640px; max-height: 1200px; isolation: isolate; background: #e8e7e8; }
.folio-hero-image { position: absolute; inset: 0; overflow: hidden; z-index: -2; }
.folio-hero-image img { width: 100%; height: 145%; object-fit: cover; object-position: center 12%; transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(1.025); filter: grayscale(1); }
body.show-portfolio .folio-hero-image img { animation: folio-color 6s 1s both; }
.folio-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.6), transparent 18%, transparent 64%, rgba(255,255,255,.95)); }
.folio-hero-bottom { position: absolute; bottom: 75px; left: var(--folio-gutter); right: var(--folio-gutter); display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.portfolio-detail .folio-hero h1 { margin: 12px 0 0; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.1; max-width: none; }
.folio-eyebrow { font-size: 10px; line-height: 1.7; letter-spacing: .16em; text-transform: uppercase; margin: 0; font-weight: 400; }
.folio-hero-index { display: flex; align-items: flex-end; gap: 45px; font-size: 11px; line-height: 1.8; }
.folio-hero-index > span:last-child { font-size: 24px; }
.folio-motion { position: absolute; bottom: 23px; right: var(--folio-gutter); border: 0; background: transparent; padding: 8px 0; font-size: 10px !important; letter-spacing: .04em; }
.folio-project-note { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; padding: 88px var(--folio-gutter) 120px; scroll-margin-top: 35px; }
.folio-project-note p:not(.folio-eyebrow), .folio-fume-copy > p:not(.folio-eyebrow) { max-width: 530px; font-size: 15px; line-height: 1.85; margin: 0; }
.folio-project-note .folio-disciplines, .folio-fume-copy .folio-disciplines { font-size: 10px !important; letter-spacing: .05em; margin-top: 24px !important; color: #73716f; }
.folio-project-heading { padding: 0 var(--folio-gutter) 28px; display: flex; justify-content: space-between; align-items: flex-end; gap: 25px; }
.folio-project-heading > p { font-size: 12px; line-height: 1.8; margin: 0; }
.folio-render { position: relative; overflow: hidden; background: #f7f7f7; aspect-ratio: 1.65; margin: 0; cursor: default; touch-action: pan-y; }
.folio-render > img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .3s, filter 2.5s; }
.folio-render.is-changing > img { opacity: .15; }
.folio-render-label { position: absolute; left: var(--folio-gutter); bottom: 26px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.folio-lens { position: absolute; width: clamp(180px, 23vw, 340px); aspect-ratio: 1; left: var(--lens-x, 50%); top: var(--lens-y, 50%); transform: translate(-50%, -50%) scale(.8); border-radius: 50%; background: white url('./assets/nars-foundation-3d.jpg') center / 250% no-repeat; box-shadow: 0 10px 60px #00000018, 0 0 0 1px #ffffffa0; opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s; }
.folio-render.detail-active { cursor: crosshair; }
.folio-render.detail-active .folio-lens { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.folio-render-controls { display: flex; justify-content: space-between; gap: 20px; padding: 20px var(--folio-gutter); border-bottom: 1px solid #eceae7; }
.folio-render-controls > div { display: flex; gap: 26px; }
.folio-render-controls button { border: 0; padding: 10px 0; background: none; font-size: 11px; color: #787773; }
.folio-render-controls button[aria-pressed="true"] { color: #171717; box-shadow: 0 1px currentColor; }
.folio-render-controls #nars-detail { color: #252525; }
.folio-nars .folio-project-note { padding-block: 35px 130px; }
.folio-fume { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; background: #f4f4f2; }
.folio-fume-art { overflow: hidden; }
.folio-fume-art img { width: 100%; height: auto; display: block; filter: grayscale(1); transition: filter 4s, transform 1.8s; }
.folio-fume.is-visible img { filter: grayscale(0); }
.folio-fume-art:hover img { transform: scale(1.035); }
.folio-fume-copy { padding: 70px clamp(28px, 5vw, 88px); }
.folio-fume-copy h2 { margin-bottom: 30px; }
.folio-text-link { display: inline-block; font-size: 12px; margin-top: 50px; padding-bottom: 5px; }
.portfolio-detail .portfolio-bio { width: 100%; max-width: none; padding: 140px var(--folio-gutter); margin: 0; display: grid; grid-template-columns: 1fr 1.25fr; gap: 9vw; scroll-margin-top: 0; }
.portfolio-detail .bio-title { margin: 0; font-size: clamp(28px, 3vw, 46px); }
.portfolio-detail .bio-grid { display: block; max-width: 660px; }
.portfolio-detail .bio-block { margin: 0 0 50px; border: 0; padding: 0; }
.portfolio-detail .bio-block:last-child { margin-bottom: 0; }
.portfolio-detail .bio-number { display: none; }
.portfolio-detail .bio-label { font-size: 21px; margin: 0 0 16px; }
.portfolio-detail .bio-copy { font-size: 14px; line-height: 1.9; margin: 0; color: #55534f; }
.folio-contact { padding: 80px var(--folio-gutter) 95px; border-top: 1px solid #e8e6e3; scroll-margin-top: 30px; background: #f7f6f3; }
.folio-contact h2 { font-size: clamp(28px, 3.7vw, 55px); max-width: 700px; margin: 20px 0 30px; }
.folio-contact > a { display: inline-block; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid #aaa5a0; }
.folio-contact > a span { padding-left: 20px; }
.portfolio-detail .portfolio-footer { width: 100%; max-width: none; padding: 30px var(--folio-gutter); margin: 0; font-size: 10px; border: 0; display: flex; justify-content: space-between; gap: 20px; }
.folio-reveal { transition: opacity 1s, translate 1.2s cubic-bezier(.2,.7,.2,1); }
body.folio-enhanced .folio-reveal:not(.is-visible) { opacity: .15; translate: 0 28px; }
body.motion-paused .folio-hero-image img { animation-play-state: paused; transform: none; }
body.motion-paused .folio-reveal { opacity: 1; translate: none; transition: none; }
body.motion-paused .folio-fume-art img { filter: none; transition: none; transform: none; }
@keyframes folio-color { from { filter: grayscale(1); } to { filter: grayscale(0); } }
@keyframes folio-signature { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
html:has(body.motion-paused) { scroll-behavior: auto; }
@media (min-width: 1600px) { .folio-hero-image img { object-position: center 17%; } }
@media (max-width: 760px) {
  .folio-nav { padding-top: 18px; align-items: flex-start; }
  .folio-signature span { display: none; }
  .folio-nav nav { gap: 18px; }
  .folio-nav nav a { font-size: 11px; }
  .folio-hero { min-height: 600px; max-height: 1000px; }
  .folio-hero-image img { height: 185%; width: 100%; object-fit: cover; object-position: 57% top; }
  .folio-hero-bottom { bottom: 85px; display: block; }
  .folio-hero-index { margin-top: 30px; justify-content: space-between; }
  .folio-hero-index br { display: none; }
  .folio-project-note { grid-template-columns: 1fr; gap: 30px; padding-block: 55px 85px; }
  .folio-project-heading > p { font-size: 10px; }
  .folio-render { aspect-ratio: 1.05; }
  .folio-render-label { font-size: 8px; bottom: 20px; }
  .folio-render-controls { gap: 12px; padding-block: 12px; }
  .folio-render-controls > div { gap: 16px; }
  .folio-render-controls button { font-size: 10px; }
  .folio-nars .folio-project-note { padding-block: 30px 85px; gap: 20px; }
  .folio-fume { grid-template-columns: 1fr; }
  .folio-fume-copy { padding: 50px var(--folio-gutter) 60px; }
  .folio-text-link { margin-top: 30px; }
  .portfolio-detail .portfolio-bio { display: block; padding-block: 85px; }
  .portfolio-detail .bio-title { margin-bottom: 45px; }
  .folio-contact { padding-block: 65px; }
  .folio-contact > a { font-size: 12px; }
  .portfolio-detail .portfolio-footer { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.show-portfolio) { scroll-behavior: auto; }
  body.show-portfolio .folio-signature img { animation: none; }
  body.show-portfolio .folio-hero-image img { animation: none; filter: none; transform: none; }
  body.folio-enhanced .folio-reveal { opacity: 1; translate: none; transition: none; }
  .folio-fume-art img { filter: none; transition: none; }
  .folio-lens, .folio-render > img { transition: none; }
}