body { overflow-x: hidden; overflow-y: auto; }
.p3-projects-shell { --paper: #f1f0ed; --muted: rgba(241,240,237,.48); --line: rgba(241,240,237,.16); --acid: #d8eb21; position: relative; width: 100%; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; color: var(--paper); font-family: "Roboto Flex", Arial, sans-serif; background: linear-gradient(110deg, #070707 0 49.9%, #efeeeb 50% 100%); }
.p3-projects-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); mix-blend-mode: overlay; z-index: 10; }
.p3-topbar, .p3-bottombar { position: absolute; z-index: 20; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 2.1vw; font: 10px/1 "IBM Plex Mono", monospace; letter-spacing: -.05em; mix-blend-mode: difference; }
.p3-topbar { top: 0; height: 84px; border-bottom: 1px solid var(--line); }
.p3-brand { font: 500 clamp(20px, 1.6vw, 28px)/1 "Roboto Flex", sans-serif; letter-spacing: -.06em; }
.p3-topbar__label { margin: 0; opacity: .66; }
.p3-topbar__hint { margin: 0; opacity: .66; }
.p3-bottombar { bottom: 0; height: 62px; border-top: 1px solid var(--line); opacity: .72; }
.p3-projects-stage { position: absolute; inset: 84px 0 62px; }
.p3-stage-copy { position: absolute; z-index: 6; left: 2.1vw; top: 9vh; mix-blend-mode: difference; }
.p3-eyebrow, .p3-detail-type, .p3-detail-number, .p3-stage-note, .p3-sidebar-head, .p3-sidebar-foot { font: 10px/1.45 "IBM Plex Mono", monospace; letter-spacing: -.055em; }
.p3-eyebrow { margin: 0 0 22px; color: var(--acid); }
.p3-stage-copy h1 { margin: 0; font-size: clamp(54px, 7.4vw, 132px); font-weight: 420; line-height: .78; letter-spacing: -.075em; }
.p3-stage-copy h1 em { color: rgba(241,240,237,.28); font-style: normal; }
.p3-stage-note { margin: 28px 0 0; color: var(--muted); }
.p3-project-stack { position: absolute; z-index: 4; left: 50%; top: 52%; width: min(78vw, 1120px); height: min(67vh, 600px); transform: translate(-50%, -50%); touch-action: none; cursor: grab; }
.p3-project-stack.is-dragging { cursor: grabbing; }
.p3-stack-glow { position: absolute; inset: 8% 8%; border-radius: 50%; background: radial-gradient(circle, rgba(216,235,33,.2), transparent 67%); filter: blur(34px); opacity: .48; }
.p3-stack-cards { position: absolute; inset: 0; }
.p3-project-card { position: absolute; left: 50%; top: 50%; width: min(35vw, 520px); aspect-ratio: 1.46; padding: 0; border: 1px solid rgba(241,240,237,.35); border-radius: 10px; overflow: hidden; background: #111; box-shadow: 0 30px 70px rgba(0,0,0,.35); transform: translate3d(calc(-50% + var(--x)), calc(-50% + var(--y)), 0) rotate(var(--rotate)) scale(var(--scale)); transform-origin: center; transition: transform 520ms cubic-bezier(.2,.8,.2,1), filter 420ms ease, border-color 420ms ease; will-change: transform; cursor: pointer; }
.p3-project-card img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; background:#111; pointer-events: none; filter: saturate(.82) contrast(1.03); }
.p3-project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.52)); pointer-events: none; }
.p3-project-card__chrome { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; justify-content: space-between; padding: 12px 14px; font: 9px/1 "IBM Plex Mono", monospace; letter-spacing: -.06em; color: rgba(255,255,255,.86); }
.p3-project-card__chrome i { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); }
.p3-project-card__caption { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: end; justify-content: space-between; font: 11px/1.2 "IBM Plex Mono", monospace; text-align: left; letter-spacing: -.06em; color: #fff; }
.p3-project-card__caption strong { font: 500 25px/.9 "Roboto Flex", sans-serif; letter-spacing: -.06em; }
.p3-project-card.is-selected { border-color: var(--acid); opacity: 1 !important; box-shadow: 0 34px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(216,235,33,.2); }
.p3-project-card.is-selected img { filter: saturate(1) contrast(1.04); }
.p3-project-card.is-promoting { z-index:300 !important; transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1.18) !important; filter:brightness(1.08) contrast(1.04); transition-duration:360ms; }
.p3-project-card.is-resetting { transition:none !important; }
.p3-project-sidebar { position: absolute; z-index: 6; left: 2.1vw; bottom: 8vh; width: 210px; mix-blend-mode: difference; }
.p3-sidebar-head { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
.p3-project-index { display: grid; gap: 0; padding: 0; margin: 10px 0 18px; list-style: none; }
.p3-project-index button { display: grid; grid-template-columns: 30px 1fr; gap: 8px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid rgba(241,240,237,.1); background: transparent; color: var(--muted); text-align: left; cursor: pointer; font: 10px/1 "IBM Plex Mono", monospace; letter-spacing: -.05em; }
.p3-project-index button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p3-project-index button.is-active { color: var(--paper); }
.p3-project-index button.is-active span:first-child { color: var(--acid); }
.p3-sidebar-foot { margin: 0; color: var(--muted); }
.p3-project-detail { position: absolute; z-index: 6; right: 2.1vw; bottom: 8vh; width: min(22vw, 280px); color: #0b0b0b; }
.p3-detail-number, .p3-detail-type { margin: 0; opacity: .56; }
.p3-project-detail h2 { margin: 10px 0 4px; font-size: clamp(28px, 3vw, 54px); font-weight: 480; letter-spacing: -.075em; line-height: .85; }
.p3-detail-description { margin: 18px 0 22px; max-width: 230px; font: 11px/1.45 "IBM Plex Mono", monospace; letter-spacing: -.05em; opacity: .62; }
.p3-detail-link { display: inline-flex; gap: 12px; align-items: center; font: 10px/1 "IBM Plex Mono", monospace; letter-spacing: -.05em; }
.p3-detail-link span { font-size: 18px; }
.custom-cursor { position: fixed; z-index: 2147483647; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; color: #fff; mix-blend-mode: difference; will-change: transform; isolation:isolate; }
.custom-cursor i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 18px rgba(255,255,255,.35); transition: transform 180ms ease; }
.custom-cursor span { position: absolute; left: 13px; top: -7px; opacity: 0; transform: translateX(-5px); transition: opacity 160ms ease, transform 160ms ease; font: 9px/1 "IBM Plex Mono", monospace; }
.custom-cursor.has-label i { transform: scale(.55); }
.custom-cursor.has-label span { opacity: 1; transform: translateX(0); }
.p3-mobile-notice { display: none; }
@media (hover:hover) and (pointer:fine) { html.custom-cursor-ready, html.custom-cursor-ready body, html.custom-cursor-ready button, html.custom-cursor-ready a, html.custom-cursor-ready .p3-project-stack { cursor: none; } }
@media (max-width:899px) { .p3-mobile-notice { position:absolute; z-index:200; inset:0; display:grid; place-content:center; text-align:center; background:#070707; font:500 26px/1.1 "Roboto Flex",sans-serif; } .p3-mobile-notice small { font:10px/1.5 "IBM Plex Mono",monospace; color:rgba(255,255,255,.55); } .p4-work-copy { width:100%; max-width:100%; } }
@media (prefers-reduced-motion:reduce) { .p3-project-card { transition-duration:.01ms; } .custom-cursor { display:none; } html, body, button, a, .p3-project-stack { cursor:auto; } }

.p4-selected-work { position:relative; width:100%; height:100svh; min-height:620px; overflow:hidden; isolation:isolate; color:#0b0b0b; background:linear-gradient(110deg,#efeeeb 0 49.9%,#070707 50% 100%); }
.p4-selected-work::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.08; background-image:linear-gradient(transparent 49.9%,rgba(0,0,0,.12) 50%,transparent 50.2%); }
.p4-work-topbar,.p4-work-footer { position:absolute; z-index:5; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:0 2.1vw; font:10px/1 "IBM Plex Mono",monospace; letter-spacing:-.05em; }
.p4-work-topbar { top:0; height:84px; border-bottom:1px solid rgba(10,10,10,.16); }
.p4-work-topbar a { color:inherit; }
.p4-work-counter { color:#d8eb21; mix-blend-mode:difference; }
.p4-work-layout { position:absolute; inset:84px 0 62px; display:grid; grid-template-columns:34% 66%; align-items:center; padding:0 6vw; }
.p4-work-copy { position:relative; z-index:3; width:min(32vw,520px); max-width:520px; }
.p4-work-kicker,.p4-work-type { margin:0; font:10px/1.4 "IBM Plex Mono",monospace; letter-spacing:-.055em; }
.p4-work-kicker { color:#73751a; }
.p4-work-copy h2 { margin:16px 0 6px; max-width:100%; font:500 clamp(52px,5.25vw,100px)/.82 "Roboto Flex",sans-serif; letter-spacing:-.08em; word-break:normal; overflow-wrap:normal; hyphens:none; }
.p4-work-copy h2 .title-line { display:block; white-space:nowrap; }
.p4-work-type { opacity:.6; }
.p4-work-note { max-width:250px; margin:28px 0; font:12px/1.45 "IBM Plex Mono",monospace; letter-spacing:-.05em; opacity:.68; }
.p4-work-source { display:inline-flex; gap:14px; align-items:center; font:10px/1 "IBM Plex Mono",monospace; letter-spacing:-.05em; }
.p4-work-source span { font-size:18px; }
.p4-work-media-wrap { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; min-width:0; }
.p4-work-media { width:min(58vw,980px); aspect-ratio:16/10; overflow:hidden; border:1px solid rgba(241,240,237,.35); border-radius:14px; background:#101010; box-shadow:0 36px 100px rgba(0,0,0,.38); transform:rotate(-2.2deg); }
.p4-work-media img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; filter:saturate(.9) contrast(1.05); }
.p4-work-thumbs { position:absolute; right:-2.5vw; display:grid; gap:10px; }
.p4-work-thumbs span { display:block; width:74px; height:54px; border:1px solid rgba(10,10,10,.25); background:#d8d8d4; transform:rotate(3deg); }
.p4-work-thumbs span:nth-child(2) { background:#111; transform:rotate(-2deg); }
.p4-work-thumbs span:nth-child(3) { background:#b7b7b2; transform:rotate(4deg); }
.p4-work-footer { bottom:0; height:62px; color:#f1f0ed; border-top:1px solid rgba(241,240,237,.2); }
.p4-work-status { color:#d8eb21; }
.p4-selected-work .p4-work-copy,.p4-selected-work .p4-work-media { opacity:1; transform:none; }
.p4-selected-work:not(.is-entering) .p4-work-copy,.p4-selected-work:not(.is-entering) .p4-work-media { opacity:0; transform:translateY(24px); }
.p4-selected-work.is-entering .p4-work-copy { opacity:1; transform:translateY(0); transition:opacity 500ms ease,transform 500ms cubic-bezier(.2,.8,.2,1); }
.p4-selected-work.is-entering .p4-work-media { opacity:1; transform:rotate(-2.2deg) scale(1); transition:opacity 560ms ease 80ms,transform 560ms cubic-bezier(.2,.8,.2,1) 80ms; }
@media (max-width:899px) { .p4-work-layout { grid-template-columns:1fr; padding:0 7vw; } .p4-work-copy { align-self:start; padding-top:8vh; } .p4-work-media-wrap { margin-top:-3vh; } .p4-work-media { width:92vw; } .p4-work-thumbs { display:none; } }