@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root { --page-background: #f3edef; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--page-background); }
body { font-family: Inter, Arial, Helvetica, sans-serif; }
.project-page { width: 100%; background: var(--page-background); }
.project-canvas { position: relative; width: 1444px; max-width: 100%; margin: 0 auto; container-type: inline-size; }
.project-pager { width: min(1444px, 100%); margin: 0 auto; padding: 2.7rem 5.1rem 4rem; display: flex; justify-content: space-between; align-items: center; background: var(--page-background); font-size: clamp(10px, .78vw, 11.26px); font-weight: 500; line-height: 1; }
.project-pager a { color: #171717; text-decoration: none; }
.project-pager a:hover, .project-pager a:focus-visible { text-decoration: underline; text-underline-offset: .22em; }
#case-image { display: block; width: 100%; height: auto; }
.type-layer { position: absolute; inset: 0; pointer-events: none; color: #171717; }
.type-layer a { color: inherit; text-decoration: none; pointer-events: auto; }
.project-header { position: absolute; top: 0; left: 0; width: 100%; height: 5.05cqw; padding: 1.68cqw 5.1cqw 0; border-bottom: 1px solid #8f8a8a; background: var(--page-background); display: flex; justify-content: space-between; align-items: flex-start; font-size: .78cqw; font-weight: 500; line-height: 1; }
.project-header nav { display: flex; gap: 4.9cqw; }
.project-intro { position: absolute; top: 5.05cqw; left: 0; width: 100%; height: 18.5cqw; padding: 2.05cqw 6.6cqw; background: var(--page-background); }
.project-intro h1 { margin: 0; font-size: 2.26cqw; font-weight: 400; line-height: 1.08; letter-spacing: -.052em; }
.idea-label { margin: 2.2cqw 0 1.25cqw; font-size: .75cqw; font-weight: 500; line-height: 1; }
.idea-grid { display: grid; grid-template-columns: 23.5cqw 1fr; gap: 3cqw; }
.idea { margin: 0; font-size: 2.12cqw; font-weight: 400; line-height: 1.08; letter-spacing: -.052em; }
.description { margin: 0; max-width: 42cqw; padding-left: 2.15cqw; border-left: 1px solid #a8a2a2; font-size: 1.12cqw; font-weight: 400; line-height: 1.14; }
.detail-text { position: absolute; top: calc(var(--y) * 1%); left: calc(var(--x) * 1%); z-index: 1; margin: 0; background: transparent; color: #171717; font-family: Inter, Arial, Helvetica, sans-serif; font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; white-space: nowrap; }
.detail-text.label, .detail-text.caption { background: transparent; transform: translateY(-.18cqw); }
.detail-text.label { font-size: .72cqw; font-weight: 600; line-height: 1.1; }
.detail-text.caption { font-size: .74cqw; font-weight: 500; line-height: 1.1; }
.detail-text.statement { width: 24cqw; background: transparent; transform: translateY(-.18cqw); font-size: 1.7cqw; font-weight: 400; line-height: 1.08; letter-spacing: -.045em; white-space: normal; }
.detail-text.number { font-size: 1.28cqw; font-weight: 400; line-height: 1; }
.detail-text.cta { background: transparent; color: #fff; font-size: 2.12cqw; font-weight: 500; letter-spacing: -.025em; }
.detail-text.url { background: transparent; font-size: 2.02cqw; font-weight: 600; letter-spacing: -.05em; }
.video-hotspot { position: absolute; z-index: 2; top: calc(var(--y) * 1%); left: calc(var(--x) * 1%); width: calc(var(--width) * 1%); height: calc(var(--height) * 1%); pointer-events: auto; }
.video-hotspot:focus-visible { outline: 3px solid #171717; outline-offset: -3px; }
.video-modal { position: fixed; z-index: 20; inset: 0; display: none; align-items: center; justify-content: center; padding: 32px; }
.video-modal.is-open { display: flex; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(16, 15, 15, .84); }
.video-modal__panel { position: relative; z-index: 1; width: min(1120px, 100%); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 20px 80px rgba(0, 0, 0, .45); }
.video-modal__frame, .video-modal iframe { width: 100%; height: 100%; border: 0; }
.video-modal__close { position: absolute; z-index: 2; top: -42px; right: 0; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; font: 300 34px/1 Arial, Helvetica, sans-serif; }
@media (max-width: 800px) { .project-header { border-bottom-width: 1px; } }