.project-trigger { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.project-trigger:focus-visible { outline: 2px solid #000; outline-offset: -4px; }
.project-viewer { --project-footer-height: clamp(64px, 6.5vh, 90px); --project-gutter: 3.6vw; --project-header-line-offset: 8px; --project-title-size: 1.25rem; --project-subtitle-size: .9375rem; position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none; padding: 0; margin: 0; border: 0; color: #000; background: #fff; overflow: hidden; }
.project-viewer::backdrop { background: #fff; }
.project-viewer[data-surface="black"] { color: #fff; background: #000; color-scheme: dark; }
.project-viewer[data-surface="black"]::backdrop { background: #000; }
.project-viewer .masthead { position: absolute; inset: 0 0 auto; height: calc(var(--header-height) + var(--project-header-line-offset)); border-bottom: 1px solid #000; }
.project-viewer[data-surface="black"] .masthead, .project-viewer[data-surface="black"] .project-footer { background: #000; border-color: #fff; }
.project-viewer[data-surface="black"] .masthead a, .project-viewer[data-surface="black"] .masthead button, .project-viewer[data-surface="black"] .project-close { color: #fff; }
.project-viewer[data-surface="black"] .masthead a:focus-visible, .project-viewer[data-surface="black"] .masthead button:focus-visible, .project-viewer[data-surface="black"] .project-close:focus-visible { outline-color: #fff; }
.project-header-return { position: absolute; top: calc(var(--header-height) / 2); left: 50%; width: clamp(96px, 7.8vw, 150px); height: calc(var(--header-height) - 26px); transform: translate(-50%, -50%); cursor: pointer; }
.project-header-brand { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.project-content { position: absolute; top: var(--header-height); bottom: var(--project-footer-height); left: 0; right: 0; color: #000; background: #fff; }
.project-viewer[data-surface="black"] .project-content { color: #fff; background: #000; }
.project-track { position: absolute; inset: 0 var(--project-gutter); display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
.project-track::-webkit-scrollbar { display: none; }
.project-track:focus-visible { outline: 2px solid #000; outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
  .project-track[data-direction="right"], .project-track[data-direction="right"] .project-band { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 16H28M18 6L28 16L18 26' fill='none' stroke='white' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 16H28M18 6L28 16L18 26' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, e-resize; }
  .project-track[data-direction="left"], .project-track[data-direction="left"] .project-band { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M28 16H4M14 6L4 16L14 26' fill='none' stroke='white' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28 16H4M14 6L4 16L14 26' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, w-resize; }
}
.project-band { display: block; flex: none; width: auto; height: 83%; max-width: none; user-select: none; }
.project-band[hidden] { display: none; }
.project-track[data-single] { justify-content: center; }
.project-track[data-single] .project-band { max-width: 100%; object-fit: contain; }
.project-loop { display: flex; flex: none; width: max-content; height: 83%; }
.project-cycle { display: flex; flex: none; align-items: center; height: 100%; gap: clamp(16px, 2vw, 36px); padding-right: clamp(16px, 2vw, 36px); }
.project-cycle img, .project-cycle video { display: block; flex: none; width: auto; height: 100%; max-width: none; object-fit: contain; user-select: none; }
.project-viewer[data-project="studio-101-63"] .project-cycle img { max-width: calc(100vw - var(--project-gutter) * 2); }
.project-video-frame { position: relative; flex: none; width: auto; height: 100%; cursor: default; background: #000; }
.project-cycle .project-video-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain; cursor: default; }
.project-video-fullscreen { position: absolute; z-index: 1; top: 12px; right: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.6); border-radius: 4px; background: rgba(0,0,0,.65); color: #fff; font: 300 .875rem / 1.2 'Helvetica Neue', Helvetica, Arial, sans-serif; cursor: pointer; }
.project-video-fullscreen:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.project-cycle .project-video-frame > video:fullscreen { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; background: #000; object-fit: contain; }
.project-cycle .project-video-frame > video:-webkit-full-screen { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; background: #000; object-fit: contain; }
.project-image-frame { position: relative; flex: none; height: 100%; width: auto; overflow: hidden; }
.project-cycle .project-image-frame img { position: absolute; max-width: none; object-fit: fill; }
.project-cycle img[data-trim-bottom] { clip-path: inset(0 0 .12% 0); }
.project-loop, .project-loop img { cursor: inherit; }
.project-track[data-layout="triptych"] { top: 64px; bottom: 24px; justify-content: center; overflow: hidden; touch-action: auto; cursor: default; }
.project-track[data-layout="triptych"][data-direction] { cursor: default; }
.project-triptych { display: grid; flex: none; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.project-triptych img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; user-select: none; }
.project-direction { position: absolute; top: 12px; z-index: 1; min-height: 44px; padding: 0; border: 0; background: transparent; color: #000; font: 300 1.25rem / 1.25 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: -0.5px; cursor: pointer; }
.project-viewer[data-surface="black"] .project-direction { color: #fff; }
.project-previous { left: var(--edge); transform: translateY(-4px); }
.project-next { right: var(--edge); transform: translateY(-4px); }
.project-autoplay { left: 50%; transform: translateX(-50%); }
.project-autoplay[hidden] { display: none; }
.project-direction:disabled { opacity: .3; cursor: default; }
.project-footer { position: absolute; bottom: 0; left: 0; right: 0; height: var(--project-footer-height); padding: 0 var(--edge); border-top: 1px solid #000; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 0; font: 300 1.25rem / 1.25 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: -.5px; }
.project-label { grid-column: 1; min-width: 0; text-align: left; }
.project-title { margin: 0; text-align: left; font: inherit; font-size: var(--project-title-size); overflow-wrap: anywhere; }
.project-subtitle { display: block; text-align: left; font-size: var(--project-subtitle-size); line-height: 1.3; overflow-wrap: anywhere; }
.project-subtitle:empty { display: none; }
.project-close { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; padding: 10px 0; min-height: 44px; border: 0; background: transparent; color: #000; font: inherit; cursor: pointer; }
.project-direction:focus-visible, .project-close:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.project-viewer[data-surface="black"] .project-direction:focus-visible, .project-viewer[data-surface="black"] .project-track:focus-visible { outline-color: #fff; }
.project-help { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.project-footer-reveal[hidden] { display: none; }
.project-footer-reveal { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; width: 100%; height: var(--project-footer-height); border: 0; padding: 0; background: transparent; cursor: default; }
.project-footer-reveal:focus-visible { outline: 2px solid #000; outline-offset: -4px; }
.project-viewer[data-layout="vertical"] .project-content { inset: 0; }
.project-track[data-layout="vertical"] { inset: 0; display: block; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; cursor: auto; }
.project-track[data-layout="vertical"][data-direction] { cursor: auto; }
.project-viewer[data-layout="vertical"] .project-content > .project-direction { display: none; }
.project-vertical-gallery { --page-gap: clamp(16px, 2vw, 32px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--page-gap); margin: 0 var(--page-gap); padding-top: calc(var(--header-height) + 20px); padding-bottom: calc(var(--project-footer-height) + var(--page-gap)); }
.project-vertical-gallery figure { min-width: 0; margin: 0; }
.project-vertical-gallery figure[data-span="2"] { grid-column: span 2; }
.project-vertical-gallery img { display: block; width: 100%; height: auto; max-width: 100%; user-select: none; }
.project-vertical-navigation { grid-column: 1 / -1; margin-inline: calc(var(--edge) - var(--page-gap)); transform: translateY(-4px); display: flex; justify-content: space-between; align-items: center; }
/* The supplied SSS exports already contain each Figma crop. Keep their exact
   shared scale and composition, including on smaller screens. */
.project-vertical-gallery[data-composition="figma"] { position: relative; display: block; margin: calc(var(--header-height) + var(--project-header-line-offset)) 0 calc(var(--project-footer-height) + 16px); padding: 0; }
.project-vertical-gallery[data-composition="figma"] > figure { position: absolute; overflow: hidden; }
.project-vertical-gallery[data-composition="figma"] > figure > img { width: 100%; height: 100%; max-width: none; object-fit: fill; }
.project-vertical-gallery[data-composition="figma"] > .project-vertical-navigation { position: absolute; z-index: 1; top: 16px; left: var(--edge); right: var(--edge); margin: 0; }
.project-vertical-direction { min-height: 44px; border: 0; padding: 0; color: #000; background: transparent; font: 300 1.25rem / 1.25 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: -.5px; cursor: pointer; }
.project-vertical-direction:disabled { opacity: .3; cursor: default; }
.project-vertical-direction:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.project-viewer[data-layout="vertical"] .masthead,
.project-viewer[data-layout="vertical"] .project-footer { z-index: 6; background: rgba(255, 255, 255, .58); background-image: linear-gradient(115deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .22)); -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); border-color: rgba(0, 0, 0, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 5px 24px rgba(0, 0, 0, .06); }
.project-viewer[data-layout="vertical"] .project-footer { transition: transform 220ms ease, opacity 180ms ease; }
.project-viewer[data-layout="vertical"][data-footer-hidden="true"] .project-footer { transform: translateY(102%); opacity: 0; pointer-events: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .project-viewer[data-layout="vertical"] .masthead,
  .project-viewer[data-layout="vertical"] .project-footer { background: rgba(255, 255, 255, .94); }
}
@media (max-width: 1100px) {
  .project-vertical-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .project-vertical-direction { font-size: .875rem; }
}
@media (max-width: 520px) {
  .project-vertical-gallery { grid-template-columns: minmax(0, 1fr); }
  .project-vertical-gallery figure[data-span="2"] { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .project-viewer[data-layout="vertical"] .project-footer { transition: none; }
}
@media (max-width: 700px) {
  .project-viewer { --project-gutter: 12px; --project-footer-height: 68px; --project-title-size: .875rem; --project-subtitle-size: .6875rem; }
  .project-band, .project-loop { height: min(78%, calc((100vw - 24px) * 1.26)); }
  .project-direction, .project-footer { font-size: .875rem; letter-spacing: -.28px; }
  .project-direction { top: 4px; }
  .project-header-return { width: clamp(60px, 24vw, 96px); height: 62px; }
  .project-footer { column-gap: 8px; }
  .project-track[data-layout="triptych"] { top: 56px; bottom: 16px; }
}
@media (max-height: 450px) and (min-width: 701px) {
  .project-viewer { --header-height: 88px; --project-footer-height: 48px; --project-header-line-offset: 4px; --project-title-size: .875rem; --project-subtitle-size: .6875rem; }
  .project-viewer .masthead { padding-top: 8px; }
  .project-direction { top: 8px; font-size: .875rem; }
  .project-band, .project-loop { height: 70%; }
  .project-footer { font-size: .875rem; }
}

/* Single artwork previews keep the actual Studio page visible behind the glass. */
.project-viewer[data-layout="preview"] { background: transparent; color: #000; color-scheme: light; }
.project-viewer[data-layout="preview"]::backdrop { background: rgba(255, 255, 255, .38); background-image: linear-gradient(125deg, rgba(255,255,255,.28), rgba(255,255,255,.04) 45%, rgba(255,255,255,.16)); -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); }
.project-viewer[data-layout="preview"] .masthead { display: none; }
.project-viewer[data-layout="preview"] .project-content { inset: 0; background: transparent; }
.project-viewer[data-layout="preview"] .project-track { inset: clamp(88px, 12vh, 132px) clamp(20px, 8vw, 160px); display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: auto; cursor: default; }
.project-viewer[data-layout="preview"] .project-track .project-band { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; filter: drop-shadow(0 12px 24px rgba(0,0,0,.14)); animation: artwork-preview-in 180ms ease-out; }
.project-viewer[data-layout="preview"] .project-direction { top: max(16px, env(safe-area-inset-top)); z-index: 2; }
.project-viewer[data-layout="preview"] .project-footer { z-index: 2; height: max(76px, calc(56px + env(safe-area-inset-bottom))); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: minmax(0, 1fr) auto; background: transparent; border: 0; }
@keyframes artwork-preview-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .project-viewer[data-layout="preview"]::backdrop { background-color: rgba(255,255,255,.72); }
}
@media (max-width: 700px) {
  .project-viewer[data-layout="preview"] .project-track { inset: 88px 20px; }
}
@media (max-height: 450px) and (min-width: 701px) {
  .project-viewer[data-layout="preview"] .project-track { inset: 64px max(24px, 8vw); }
  .project-viewer[data-layout="preview"] .project-footer { height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-viewer[data-layout="preview"] .project-track .project-band { animation: none; }
}

/* Transparent wordmarks use a smaller centered area over the Studio glass. */
.project-viewer[data-layout="preview"] .project-track .project-band[hidden] { display: none; }
/* Normalize the visible sleeve bounds, excluding unequal transparent margins. */
.project-preview-pair { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.project-preview-cover { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 12px 24px rgba(0,0,0,.14)); }
.project-preview-cover img { position: absolute; display: block; max-width: none; object-fit: fill; user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .project-preview-pair { animation: none; }
}

.project-viewer[data-layout="preview"][data-preview-size="compact"] .project-track .project-band { width: 55%; height: 55%; filter: none; }