@charset "UTF-8";
:root { color-scheme: light; --paper: #eeedea; --ink: #20211e; --muted: #81817b; --rule: #d2d2cb; --serif: "Times New Roman", Times, serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { border: 0; border-radius: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
button:hover, a:hover { color: #77776d; }
::selection { background: #dedec7; }
.small { font-size: 12px; line-height: 1.35; font-weight: 400; }
.muted, dt, .eyebrow { color: var(--muted); }
.eyebrow { font-size: 11px; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 16px; top: -70px; padding: 14px; background: var(--ink); color: white; z-index: 200; }
.skip-link:focus { top: 16px; }
.page-shell { position: fixed; inset: 0; overflow: hidden; isolation: isolate; background: var(--paper); }
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; pointer-events: none; }
.site-header a, .site-header button { pointer-events: auto; }
.mobile-menu-toggle { display: none; }
.mobile-menu-dialog { position: fixed; inset: 42px 0 0; width: 100%; max-width: none; height: calc(100% - 42px); max-height: none; margin: 0; padding: 70px 28px 28px; border: 0; background: var(--paper); color: var(--ink); }
.mobile-menu-dialog::backdrop { background: var(--paper); }
.mobile-menu-dialog nav { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mobile-menu-dialog nav button { font-size: clamp(34px, 10vw, 54px); line-height: 1.2; text-transform: uppercase; letter-spacing: -.05em; }
.mobile-menu-close { position: absolute; top: 14px; right: 20px; min-height: 44px; }
.identity { position: absolute; top: 28px; left: 27px; display: flex; gap: 10px; align-items: flex-start; }
.identity-mark { font-size: 43px; line-height: .78; letter-spacing: -3.5px; font-weight: 700; writing-mode: vertical-rl; transform: rotate(180deg); }
.identity-mark > span { font-size: 15px; letter-spacing: 0; margin-bottom: 4px; vertical-align: top; }
.identity-small { font-size: 9px; line-height: 1.2; writing-mode: vertical-rl; transform: rotate(180deg); padding-top: 2px; }
.navigation { position: absolute; top: 28px; left: 14.1%; display: flex; flex-direction: column; align-items: flex-start; }
.menu-label { display: block; margin-bottom: 28px; font-size: 12px; }
.nav-link { font-size: clamp(20px, 1.58vw, 28px); letter-spacing: -.8px; text-transform: uppercase; line-height: .96; display: block; text-align: left; min-height: 24px; }
.nav-link sup { font-size: 10px; letter-spacing: -.3px; vertical-align: top; position: relative; top: 2px; margin-left: 5px; }
.nav-arrow { font-family: Arial, sans-serif; font-size: 19px; display: inline-block; margin-right: 6px; }
.sound-toggle { position: absolute; top: 28px; left: 39.4%; color: var(--muted); padding: 0 0 12px; }
#sound-state { color: var(--ink); }
.location { position: absolute; top: 28px; left: 53%; }
.edition { position: absolute; right: 29px; top: 28px; text-align: right; }
.gallery-control { position: absolute; inset: 0; touch-action: pan-x pinch-zoom; outline-offset: -10px; }
.gallery-control:focus { outline: none; }
.gallery-control:focus-visible { outline: 1px solid #bdbdb4; }
.media-stage { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 52% 50%; pointer-events: none; }
.media-card { position: absolute; top: 0; left: 0; width: clamp(310px, 29vw, 620px); aspect-ratio: 1.22; margin-left: calc(clamp(310px, 29vw, 620px) / -2); margin-top: calc(clamp(310px, 29vw, 620px) / -2.44); overflow: hidden; backface-visibility: hidden; will-change: transform; background: #deddd7; pointer-events: auto; transform-origin: center; }
.media-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.media-card .card-label { position: absolute; left: 16px; right: 16px; bottom: 15px; display: flex; justify-content: space-between; color: white; text-shadow: 0 1px 12px #000; font-size: 12px; opacity: 0; transform: translateY(5px); transition: opacity .2s, transform .2s; }
.media-card.is-active:hover .card-label, .media-card.is-active:focus-visible .card-label { opacity: 1; transform: translateY(0); }
.media-card:focus-visible { outline-offset: 5px; overflow: visible; }
.media-card:focus-visible img { outline: 1px solid var(--ink); outline-offset: 5px; }
.project-meta { position: absolute; left: 29px; top: 45.6%; display: grid; grid-template-columns: 1fr 1.35fr; gap: 26px; width: 30%; max-width: 485px; pointer-events: none; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 16px; margin: 0; font-size: 12px; line-height: 1.3; }
dt, dd { margin: 0; }
.meta-second { display: flex; flex-direction: column; gap: 50px; }
.meta-second dl { grid-template-columns: 55px 1fr; gap: 12px; }
.project-rail { position: absolute; inset: 0 2% 0 auto; width: 25%; pointer-events: none; }
.project-label { position: absolute; top: 50%; left: 0; width: 100%; padding: 8px 16px; pointer-events: auto; text-align: center; will-change: transform, opacity; }
.project-label .project-category { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); margin-bottom: 8px; }
.project-label h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 2.45vw, 43px); letter-spacing: -1.5px; line-height: 1; margin: 0; text-transform: uppercase; }
.project-label .project-description { display: block; font-size: 13px; line-height: 1.35; max-width: 300px; margin: 24px auto 0; text-wrap: pretty; }
.project-label.is-active:hover { color: var(--ink); }
.counter-block { position: absolute; bottom: 42px; left: 14.1%; display: flex; gap: 15px; align-items: flex-start; z-index: 2; color: #fff; mix-blend-mode: difference; pointer-events: none; }
.counter-label { padding-top: 16px; width: 90px; }
.counter-number { font-size: clamp(138px, 12.5vw, 240px); line-height: .9; letter-spacing: -.095em; font-weight: 400; font-variant-numeric: tabular-nums; padding-right: .09em; }
.counter-total { padding-top: 17px; padding-left: 14px; }
.site-footer { position: absolute; bottom: 21px; left: 29px; right: 29px; display: flex; align-items: center; justify-content: space-between; z-index: 20; pointer-events: none; }
.site-footer button { pointer-events: auto; }
.scroll-prompt { color: var(--muted); display: flex; align-items: center; gap: 10px; }
.scroll-line { font-size: 18px; color: var(--ink); }
.mobile-scroll { display: none; }
.gallery-actions { display: flex; align-items: center; gap: 6px; }
.gallery-actions > button:not(.open-study) { width: 36px; height: 32px; font-size: 18px; }
.open-study { margin-left: 15px; padding: 8px 0 8px 15px; }
.open-study span { margin-left: 12px; }
.sheet { position: fixed; width: 100%; max-width: none; height: 100%; max-height: none; padding: 0; margin: 0; border: 0; background: var(--paper); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.sheet::backdrop { background: var(--paper); }
.sheet[open] { animation: sheet-in .35s both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.sheet-top { display: flex; justify-content: space-between; align-items: center; padding: 27px 30px; min-height: 88px; gap: 20px; }
.sheet-wordmark { font-size: 28px; font-weight: 700; letter-spacing: -2px; }
.close-button { display: flex; align-items: center; gap: 25px; min-height: 44px; font-size: 13px; }
.close-button span { font-size: 30px; font-weight: 300; }
.study-layout { display: grid; grid-template-columns: 62% 1fr; min-height: calc(100svh - 100px); gap: 0; }
.study-picture { padding: 0 20px 30px 30px; display: flex; align-items: center; }
.study-picture img { display: block; width: 100%; height: min(73vh, 900px); object-fit: cover; }
.study-copy { padding: 7vh 4vw 35px 4vw; align-self: center; }
.study-copy h2 { font-family: var(--serif); text-transform: uppercase; font-size: clamp(40px, 4.4vw, 88px); font-weight: 400; letter-spacing: -.055em; line-height: 1; margin: 22px 0 25px; }
.study-intro { font-size: 20px; line-height: 1.35; letter-spacing: -.4px; margin: 0 0 32px; }
.study-description { font-size: 14px; line-height: 1.6; max-width: 390px; }
.study-description p { margin-bottom: 18px; }
.study-note { margin-top: 32px; }
.next-study { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--rule); padding: 21px 0; margin-top: 45px; width: 100%; font-size: 12px; text-align: left; }
.next-study span:first-child { margin-left: auto; }
.index-heading { display: flex; justify-content: space-between; align-items: flex-end; margin: 35px 6vw 50px; }
.index-heading h2 { font-family: var(--serif); font-size: clamp(45px, 5.8vw, 100px); font-weight: 400; line-height: .95; letter-spacing: -.055em; margin: 0; }
.index-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 0 6vw 60px; }
.index-item { text-align: left; }
.index-item img { width: 100%; height: auto; aspect-ratio: .85; object-fit: cover; display: block; transition: filter .3s; }
.index-item:hover img { filter: brightness(.85); }
.index-item > div { display: flex; justify-content: space-between; margin-top: 16px; font-size: 12px; }
.index-item h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; text-transform: uppercase; letter-spacing: -1px; margin: 9px 0 5px; }
.about-content { margin: 3vh 9vw 70px 18vw; }
.about-content h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(60px, 7.6vw, 140px); letter-spacing: -.065em; line-height: .9; margin: 36px 0 60px; }
.about-content h2 em { font-weight: 400; }
.about-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; max-width: 900px; }
.about-bottom > p { font-size: 22px; line-height: 1.3; margin-top: 0; letter-spacing: -.5px; }
.about-bottom > div { line-height: 1.5; }
.about-bottom > div p:first-child { margin-top: 0; }
.text-link { border-bottom: 1px solid; padding: 9px 0; margin-top: 20px; }
.no-script { position: fixed; inset: 0; z-index: 100; padding: 8vw; background: var(--paper); }
.no-script a { display: block; padding: 15px 0; text-decoration: underline; }
.sheet-top { position: sticky; top: 0; z-index: 30; background: var(--paper); }
.sheet-nav { display: flex; gap: 18px; align-items: center; margin-left: auto; font-size: 12px; }
.sheet-nav button { min-height: 36px; }
.sheet-nav button[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.sheet-top > .small { margin-right: auto; }
.gallery-actions > .index-toggle { font-size: 11px !important; width: 45px !important; margin-right: 15px; }
.about-scene { position: relative; height: 57vh; min-height: 420px; }
.about-note { position: absolute; top: 15px; left: 63%; right: 30px; margin: 0; font-family: var(--serif); text-transform: uppercase; font-size: clamp(20px, 2vw, 35px); line-height: 1.08; letter-spacing: -.6px; color: #f34f47; }
.about-year { position: absolute; left: 2%; right: 8%; bottom: 5%; display: flex; justify-content: space-between; color: #fff; font-size: clamp(170px, 24vw, 460px); line-height: .8; letter-spacing: -.08em; pointer-events: none; }
.about-monogram { position: absolute; width: 270px; aspect-ratio: 1; left: 43%; top: 50%; transform: translate(-50%, -35%); display: grid; place-items: center; }
.about-monogram > span { font-family: var(--serif); font-size: 150px; letter-spacing: -15px; padding-right: 15px; font-style: italic; line-height: 1; }
.monogram-dot { color: #f34f47; }
.about-monogram svg { position: absolute; inset: 0; width: 100%; fill: none; stroke: var(--ink); stroke-width: .65; }
.about-columns { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.9fr; gap: 35px; padding: 25px 30px 60px; align-items: start; }
.about-columns .eyebrow { margin: 0 0 25px; }
.about-columns p:not(.eyebrow) { font-size: 13px; line-height: 1.5; max-width: 280px; }
.about-columns .about-manifesto { color: #f34f47; font-family: var(--serif); text-transform: uppercase; font-size: clamp(25px, 2.55vw, 43px) !important; line-height: 1.05 !important; letter-spacing: -1px; margin: 0; max-width: 620px !important; }
.about-columns .text-link { margin-top: 5px; font-size: 12px; }
.playground-aside { position: fixed; top: 30%; left: 30px; width: 20%; }
.playground-aside h2 { margin: 0 0 20px; font-size: 12px; color: var(--muted); font-weight: 400; }
.playground-count { font-size: clamp(130px, 18vw, 290px); line-height: .8; letter-spacing: -.1em; display: block; color: #fff; margin-left: -10px; }
.playground-aside > p { font-size: 13px; line-height: 1.4; max-width: 230px; margin-top: 60px; }
.playground-grid { margin-left: 26%; padding: 150px 30px 100px 0; column-count: 4; column-gap: 20px; }
.play-item { display: block; width: 100%; margin: 0 0 25px; break-inside: avoid; text-align: left; }
.play-item .play-visual { aspect-ratio: 1; width: 100%; display: block; overflow: hidden; background: #e2e1da; }
.play-item:nth-child(3n + 1) .play-visual { aspect-ratio: .76; }
.play-item:nth-child(3n + 2) .play-visual { aspect-ratio: 1.2; }
.play-item img, .play-item canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.play-item img { transition: transform .6s; }
.play-item:hover img { transform: scale(1.05); }
.play-item .play-caption { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 11px; }
.play-item .play-caption > span:last-child { color: var(--muted); }
.experiment-layout { display: grid; grid-template-columns: 23% 1fr; gap: 30px 7%; margin: 7vh 6vw 40px; align-items: center; }
.experiment-heading h2 { font-family: var(--serif); font-size: clamp(40px, 4vw, 70px); font-weight: 400; line-height: .95; letter-spacing: -2px; }
.experiment-heading > p { font-size: 14px; line-height: 1.5; max-width: 260px; }
#experiment-canvas { display: block; width: 100%; height: min(65vh, 720px); touch-action: none; }
.experiment-controls { grid-column: 2; display: flex; gap: 35px; justify-content: flex-end; align-items: center; font-size: 12px; }
.experiment-controls label { display: grid; grid-template-columns: 1fr auto; gap: 8px 40px; margin-right: auto; min-width: 180px; }
.experiment-controls input { grid-column: 1 / -1; accent-color: var(--ink); width: 100%; margin: 0; }
.experiment-controls button { min-height: 44px; }
.approach-content { margin: 65px 8vw 80px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 10%; }
.approach-content h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(55px, 7vw, 120px); line-height: .9; letter-spacing: -.06em; margin: 0; }
.approach-content ol { list-style: none; padding: 0; margin: 0; }
.approach-content li { display: flex; gap: 25px; padding: 24px 0; border-top: 1px solid var(--rule); }
.approach-content li > span { color: var(--muted); font-size: 11px; padding-top: 4px; }
.approach-content h3 { margin: 0 0 10px; font-size: 20px; font-weight: 400; }
.approach-content li p { max-width: 340px; line-height: 1.5; font-size: 13px; margin: 0; }
.contact-sheet { position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; height: 100%; max-height: none; max-width: none; border: 0; background: transparent; overflow: auto; color: var(--ink); }
.contact-sheet::backdrop { background: #eeedea9c; backdrop-filter: blur(4px); }
.contact-deck { position: relative; max-width: 510px; margin: 19vh auto 90px; }
.contact-card { position: relative; z-index: 2; background: #1a1b18; color: #eeedea; padding: 35px 35px 50px; transform: rotate(-1deg); box-shadow: 0 4px 14px #0002; }
.contact-card h2, .colophon-card h3 { font-family: var(--serif); font-size: 37px; font-weight: 400; letter-spacing: -1.2px; margin: 0 0 33px; }
.contact-columns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 25px; font-size: 12px; line-height: 1.5; }
.contact-columns .eyebrow { display: block; margin-bottom: 8px; color: #9a9b94; font-size: 10px; }
.contact-columns a { white-space: nowrap; font-size: 12px; }
.contact-columns button { display: block; text-align: left; margin-top: 8px; font-size: 12px; }
.contact-columns button.copy-email { font-size: 10px; color: #b4b4a8; text-decoration: underline; text-underline-offset: 3px; }
.contact-columns p { margin: 0 0 25px; }
.contact-columns #copy-status { font-size: 10px; margin-top: 10px; }
.contact-close { position: absolute; right: 28px; bottom: 20px; padding: 8px; font-size: 11px; }
.colophon-card { background: #d9d9d3; margin: -8px 65px 0 -75px; padding: 30px 32px 35px; transform: rotate(3deg); box-shadow: 0 4px 10px #0002; }
.colophon-card h3 { font-size: 29px; margin-bottom: 20px; }
.colophon-card > div { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: 11px; line-height: 1.5; }
.colophon-mark { font-family: var(--serif); font-size: 75px; letter-spacing: -7px; display: block; text-align: right; line-height: .8; margin-top: 10px; }
.case-intro { position: fixed; left: 30px; top: 30%; width: 22%; max-width: 390px; z-index: 5; }
.case-intro .study-intro { font-size: 17px; margin-bottom: 20px; max-width: 280px; }
.case-intro .study-description { font-size: 12px; line-height: 1.4; max-width: 310px; }
.case-intro .study-description p:nth-child(2) { display: none; }
.case-intro dl { margin-top: 30px; font-size: 11px; }
.case-intro .study-note { font-size: 10px; margin-top: 30px; }
.case-intro .text-link { font-size: 12px; margin-top: 5px; }
.case-gallery { margin: 18vh 25% 80px 28%; }
.case-gallery figure { margin: 0 0 65px; }
.case-gallery > figure > img { width: 100%; height: auto; display: block; }
.case-gallery figcaption { display: flex; justify-content: space-between; gap: 15px; font-size: 10px; color: var(--muted); margin-top: 12px; }
.case-detail-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.case-detail-pair > div { aspect-ratio: .7; overflow: hidden; }
.case-detail-pair img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }
#study-detail-a { object-position: 22% center; }
#study-detail-b { object-position: 78% center; }
.case-detail-pair figcaption { grid-column: 1 / -1; }
.case-poster { width: 100%; min-height: 550px; aspect-ratio: .8; padding: 30px; background: var(--poster-bg, #223e46); color: var(--poster-ink, #ece6d5); display: flex; flex-direction: column; justify-content: space-between; text-align: center; }
.case-poster > strong { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(45px, 5.7vw, 100px); letter-spacing: -.07em; line-height: .9; overflow-wrap: anywhere; }
.case-poster > em { font-family: var(--serif); font-size: clamp(24px, 3vw, 48px); font-weight: 400; line-height: 1.1; max-width: 360px; margin-inline: auto; }
.case-poster .small { font-size: 10px; }
.case-next { margin-top: 120px; padding: 30px 0; }
.case-next > span:nth-child(2) { font-family: var(--serif); font-size: 30px; line-height: 1; text-transform: uppercase; }
.case-title { position: fixed; right: 28px; bottom: 30px; max-width: 62%; text-align: right; font-family: var(--serif); text-transform: uppercase; color: #f34f47; font-size: clamp(60px, 8vw, 145px); letter-spacing: -.065em; line-height: .8; font-weight: 400; margin: 0; pointer-events: none; z-index: 3; }
.case-minimap { position: fixed; right: 30px; top: 31%; display: flex; flex-direction: column; gap: 10px; width: 47px; }
.case-minimap button { width: 47px; height: 52px; display: grid; place-items: center; background: #e4e2db; }
.case-minimap button:hover { outline: 1px solid; outline-offset: 3px; }
.case-minimap img { width: 100%; height: 100%; object-fit: cover; }
.case-minimap .mini-detail { object-position: right; }
.case-minimap #mini-title { font-family: var(--serif); font-size: 36px; }
.artwork-sheet { margin: 0; padding: 0; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; background: #10110f; color: #fff; }
.artwork-sheet::backdrop { background: #10110f; }
.artwork-sheet img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 60px 30px 30px; }
.artwork-close { position: absolute; top: 17px; right: 30px; padding: 15px 0 15px 20px; z-index: 2; font-size: 12px; }
@media (min-width: 1900px) { .project-meta, dl { font-size: 14px; } .small { font-size: 14px; } .project-label .project-description { font-size: 15px; max-width: 340px; } .project-label .project-category { font-size: 14px; } }
@media (max-width: 1100px) and (min-width: 761px) { .project-meta { width: 25%; display: block; top: 42%; } .meta-second { margin-top: 27px; gap: 25px; } .meta-second dl, dl { grid-template-columns: 60px 1fr; gap: 8px; } .media-card { width: 32vw; margin-left: -16vw; margin-top: -13.1148vw; } .project-rail { right: 1%; width: 25%; } .project-label { padding-inline: 7px; } .project-label .project-description { font-size: 12px; } .counter-label { display: none; } .edition { max-width: 145px; } .location { left: 56%; } }
@media (max-width: 760px) {
  .site-header { height: 80px; }
  .site-header .identity { left: 50%; top: 20px; transform: translateX(-50%); }
  .site-header .identity-mark { font-size: 34px; }
  .site-header .navigation, .site-header .sound-toggle, .site-header .location { display: none; }
  .mobile-menu-toggle { position: absolute; left: 18px; top: 12px; width: 60px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
  .mobile-menu-toggle span { width: 100%; height: 1px; background: var(--ink); }
  .identity-mark { writing-mode: horizontal-tb; transform: none; font-size: 33px; line-height: 1; letter-spacing: -2.5px; }
  .identity-mark > span { font-size: 12px; margin-left: 4px; }
  .identity-small { display: none; }
  .navigation { top: 26px; left: auto; right: 20px; flex-direction: row; align-items: center; gap: 16px; }
  .menu-label, .nav-arrow, .nav-link sup, .edition { display: none; }
  .nav-link { font-size: 12px; letter-spacing: 0; text-transform: none; line-height: 1; min-height: 30px; padding: 7px 0; }
  .nav-link.is-current { border-bottom: 1px solid; }
  .sound-toggle { top: 83px; left: auto; right: 20px; font-size: 10px; }
  .location { left: 20px; top: 81px; font-size: 10px; }
  .location > span:first-child { display: none; }
  .location > br { display: none; }
  .media-stage { perspective: 1000px; perspective-origin: 50% 52%; }
  .media-card { width: min(60vw, 28svh); aspect-ratio: 1.5; margin-left: max(-30vw, -14svh); margin-top: max(-20vw, -9.333svh); }
  .media-card .card-label { display: none; }
  .project-meta { display: none; }
  .project-rail { width: 100%; height: auto; inset: 74% 0 36px; z-index: 10; }
  .project-label { top: 0; padding: 0 28px; filter: blur(var(--mobile-motion-blur, 0px)); }
  .project-label .project-category { font-size: 13px; margin-bottom: 10px; }
  .project-label h2 { font-size: clamp(28px, 7.5vw, 40px); line-height: 1; letter-spacing: -1px; }
  .project-label .project-description { margin-top: 24px; font-size: 13px; line-height: 1.35; max-width: 330px; }
  .counter-block { top: 15%; bottom: auto; left: 20px; gap: 13px; z-index: 12; }
  .counter-label { display: none; }
  .counter-number { font-size: clamp(82px, 23vw, 130px); filter: blur(var(--mobile-motion-blur, 0px)); }
  .counter-total { padding: 5px 0 0; font-size: 13px; }
  .site-footer { display: none; }
  .scroll-prompt { display: none; }
  .desktop-scroll { display: none; }
  .mobile-scroll { display: inline; }
  .scroll-line { font-size: 14px; }
  .gallery-actions { gap: 1px; }
  .gallery-actions > button:not(.open-study) { width: 40px; height: 44px; }
  .open-study { padding: 14px 0 14px 10px; margin-left: 4px; font-size: 11px; }
  .open-study span { margin-left: 8px; }
  .sheet-top { padding: 16px 20px; min-height: 75px; gap: 12px; }
  .sheet-top > .small { font-size: 10px; text-align: center; }
  .sheet-wordmark { font-size: 25px; }
  .close-button { gap: 12px; font-size: 11px; }
  .study-layout { display: flex; flex-direction: column; min-height: 0; }
  .study-picture { padding: 15px 20px 0; }
  .study-picture img { height: auto; aspect-ratio: 1.1; }
  .study-copy { padding: 30px 25px 40px; align-self: stretch; }
  .study-copy h2 { font-size: 54px; margin: 16px 0 20px; }
  .study-intro { font-size: 22px; }
  .study-description { font-size: 14px; max-width: none; }
  .next-study { margin-top: 30px; }
  .index-heading { margin: 25px 20px 35px; }
  .index-heading h2 { font-size: 43px; }
  .index-heading > p { display: none; }
  .index-grid { padding: 0 20px 40px; grid-template-columns: repeat(2, 1fr); gap: 30px 14px; }
  .index-item h3 { font-size: 24px; }
  .index-item > div { font-size: 10px; }
  .index-item > p { font-size: 10px; }
  .about-content { margin: 30px 25px 45px; }
  .about-content h2 { font-size: clamp(52px, 12vw, 85px); margin: 32px 0 40px; }
  .about-bottom { display: block; }
  .about-bottom > p { font-size: 20px; margin-bottom: 30px; }
}
@media (max-width: 760px) and (max-height: 700px) { .project-rail { top: 73%; } .project-label .project-category { font-size: 11px; margin-bottom: 8px; } .project-label h2 { font-size: 28px; } .project-label .project-description { max-width: 290px; font-size: 11px; margin-top: 16px; } }
@media (max-height: 540px) and (min-width: 761px) { .menu-label { margin-bottom: 15px; } .media-card { width: 25vw; margin-left: -12.5vw; margin-top: -10.2459vw; } .project-meta { top: 44%; } .meta-second { gap: 20px; } .counter-number { font-size: 100px; } .counter-label { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 1100px) and (min-width: 761px) { .playground-grid { column-count: 3; } .about-columns { gap: 22px; grid-template-columns: 1fr 1fr 1fr; } .about-columns .about-manifesto { grid-column: 1 / -1; max-width: 700px !important; margin-top: 20px; } .case-intro { width: 23%; left: 20px; } .case-intro .study-description { font-size: 11px; } .case-title { font-size: 8vw; } }
@media (max-width: 760px) {
  .navigation { gap: 14px; }
  .nav-link { font-size: 11px; }
  .identity-mark { font-size: 30px; }
  .gallery-actions > .index-toggle { display: none; }
  .sheet-top { flex-wrap: wrap; gap: 3px 15px; padding: 14px 20px 8px; }
  .sheet-top > .small { display: none; }
  .sheet-nav { order: 3; width: 100%; justify-content: space-between; margin-left: 0; gap: 14px; font-size: 11px; }
  .sheet-top .close-button { margin-left: auto; }
  .sheet-nav button { min-height: 30px; }
  .about-scene { min-height: 390px; height: 58vh; }
  .about-note { left: 41%; right: 20px; top: 25px; font-size: 19px; }
  .about-year { bottom: 10%; left: 5%; right: 7%; font-size: 35vw; }
  .about-monogram { width: 160px; left: 44%; top: 53%; transform: translate(-50%, 0); }
  .about-monogram > span { font-size: 95px; letter-spacing: -10px; padding-right: 10px; }
  .about-columns { grid-template-columns: 1fr 1fr; gap: 35px 24px; padding: 15px 25px 50px; }
  .about-columns .eyebrow { margin-bottom: 17px; font-size: 10px; }
  .about-columns p:not(.eyebrow) { font-size: 12px; }
  .about-columns .about-manifesto { font-size: 24px !important; }
  .playground-aside { position: relative; top: auto; left: auto; width: auto; margin: 30px 20px; display: grid; grid-template-columns: 90px 1fr; gap: 15px 25px; }
  .playground-aside h2 { grid-column: 1 / -1; margin: 0; }
  .playground-count { font-size: 110px; margin-left: -5px; }
  .playground-aside > p { font-size: 12px; margin: 0; max-width: 260px; }
  .playground-aside > button { grid-column: 2; justify-self: start; margin-top: 0; }
  .playground-grid { margin-left: 0; padding: 15px 20px 60px; column-count: 2; column-gap: 14px; }
  .play-item .play-caption { font-size: 10px; }
  .experiment-layout { display: flex; flex-direction: column; align-items: stretch; margin: 25px 20px 40px; gap: 25px; }
  .experiment-heading h2 { font-size: 43px; margin: 12px 0 15px; }
  .experiment-heading > p { max-width: 330px; font-size: 12px; }
  #experiment-canvas { height: 42vh; min-height: 270px; }
  .experiment-controls { gap: 20px; font-size: 11px; flex-wrap: wrap; }
  .experiment-controls label { min-width: 130px; }
  .approach-content { display: block; margin: 35px 25px 50px; }
  .approach-content h2 { font-size: 63px; margin-bottom: 50px; }
  .contact-deck { margin: 17vh 20px 60px; max-width: none; }
  .contact-card { padding: 28px 23px 60px; }
  .contact-card h2 { font-size: 33px; }
  .contact-columns { grid-template-columns: 1fr; gap: 20px; }
  .contact-columns > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 15px; }
  .contact-columns > div:last-child .eyebrow:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .contact-columns > div:last-child p { grid-column: 1; grid-row: 2 / span 2; margin: 0; }
  .contact-columns > div:last-child button { grid-column: 2; margin-top: 0; }
  .colophon-card { margin: -8px 10px 0; padding: 25px; }
  .colophon-card > div { font-size: 10px; gap: 15px; }
  .colophon-mark { font-size: 60px; }
  .case-intro { position: relative; top: auto; left: auto; width: auto; max-width: none; margin: 35px 25px; }
  .case-intro .study-intro { max-width: 100%; font-size: 24px; }
  .case-intro .study-description { max-width: 100%; font-size: 13px; }
  .case-intro dl { display: none; }
  .case-intro .study-note { margin-top: 18px; }
  .case-gallery { margin: 30px 20px 40px; }
  .case-gallery figure { margin-bottom: 35px; }
  .case-title { position: relative; inset: auto; text-align: left; font-size: 15vw; max-width: none; margin: 35px 20px 60px; }
  .case-minimap { display: none; }
  .case-poster { min-height: 430px; padding: 24px; }
  .case-poster > strong { font-size: 15vw; }
  .case-poster > em { font-size: 32px; }
  .case-next { margin-top: 55px; }
  .case-next > span:nth-child(2) { font-size: 26px; }
}
@media (max-width: 370px) { .navigation { gap: 10px; right: 15px; } .nav-link { font-size: 10px; } .identity { left: 15px; } .identity-mark { font-size: 27px; } .about-columns { display: block; } .about-columns > div { margin-bottom: 30px; } .about-columns p:not(.eyebrow) { max-width: 100%; } .experiment-controls { gap: 12px; } }

/* Portfolio chrome is part of the page, including modal presentations. */
.page-shell { top: 42px; }
.sheet, .artwork-sheet { top: 42px; height: calc(100% - 42px); }
.sheet[open] { animation-name: showcase-sheet-in; }
@keyframes showcase-sheet-in { from { opacity: 0; } to { opacity: 1; } }
.artwork-close { top: 50px; }
.portfolio-nav .portfolio-arrow { flex: 0 0 auto; }
.skip-link:focus { top: 48px; }
html[lang="vi"] .nav-link { font-size: clamp(17px, 1.35vw, 25px); line-height: 1.1; }
html[lang="vi"] .project-meta { gap: 18px; }
html[lang="vi"] .meta-second dl { grid-template-columns: 65px 1fr; }
html[lang="vi"] .gallery-actions > .index-toggle { width: 60px !important; }
@media (max-width: 760px) {
  html[lang="vi"] .navigation { gap: 12px; }
  html[lang="vi"] .nav-link { font-size: 11px; line-height: 1; }
  html[lang="vi"] .project-label .project-description { font-size: 12px; }
  html[lang="vi"] .open-study { max-width: 103px; text-align: left; }
  .sheet-nav { flex-wrap: wrap; }
}
@media (max-width: 370px) {
  html[lang="vi"] .identity-mark { font-size: 24px; }
  html[lang="vi"] .navigation { gap: 8px; right: 12px; }
  html[lang="vi"] .nav-link { font-size: 9px; }
  html[lang="vi"] .project-label .project-description { font-size: 11px; }
}