@import url('/collection.css');
@layer legacy {
:root { color: #191919; background: #fff; font-family: Arial, Helvetica, sans-serif; }
body { margin: 0; background: #fff; }
* { box-sizing: border-box; }
a { color: inherit; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 3px solid #244ad9; outline-offset: 5px; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; background: white; padding: 16px; }
.skip-link:focus { top: 10px; }
.portfolio-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 4vw; background: #fff; border-bottom: 1px solid #e7e7e7; }
.portfolio-brand { font-size: clamp(1.6rem, 3vw, 2.9rem); line-height: 1; letter-spacing: -.055em; text-decoration: none; font-weight: 500; }
.portfolio-brand span { display: block; font-size: .875rem; text-transform: uppercase; letter-spacing: .22em; margin-top: 10px; }
.portfolio-header nav { display: flex; gap: clamp(18px, 3vw, 48px); font-size: 1rem; }
.portfolio-header nav a { text-decoration: none; padding: 10px 0; }
.portfolio-header nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.portfolio-header nav a { white-space: nowrap; }
.photo-stage { position: relative; height: calc(100svh - 113px); min-height: 440px; background: #303433; overflow: hidden; }
.photo-slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; }
.photo-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.photo-slide.is-current { opacity: 1; }
.stage-bottom { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 80px 4vw 30px; color: white; background: linear-gradient(transparent, #000a); }
.stage-bottom h1 { font-family: inherit; font-size: clamp(1.8rem, 4vw, 3.8rem); font-weight: 400; line-height: 1.1; letter-spacing: -.04em; margin: 0; }
.photo-controls { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: .875rem; }
.photo-controls button { border: 1px solid #ffffff80; color: white; background: #17171770; min-height: 44px; min-width: 44px; padding: 8px 12px; cursor: pointer; }
.work-section { padding: 75px 4vw; scroll-margin-top: 140px; }
.work-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 36px; }
.work-heading h2, .simple-invitation h2 { font-family: inherit; font-weight: 400; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.04em; margin: 0; }
.work-heading span { font-size: .875rem; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; }
.work-grid figure { margin: 0; }
.work-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; background: #eee; }
.work-grid figcaption { margin-top: 14px; font-size: 1rem; }
.simple-invitation { border-top: 1px solid #ccc; margin: 0 4vw; padding: 65px 0; display: flex; justify-content: space-between; gap: 32px; }
.simple-invitation p { font-size: 1.125rem; margin-top: 0; }
.simple-invitation a { text-underline-offset: 6px; }
.portfolio-footer { padding: 28px 4vw; display: flex; flex-wrap: wrap; gap: 24px; border-top: 1px solid #ddd; font-size: .875rem; }
.portfolio-footer span { margin-right: auto; }
.simple-page { max-width: 1400px; padding: 65px 4vw 90px; margin: auto; }
.simple-split { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 8vw; }
.simple-page h1 { font-family: inherit; font-size: clamp(2.6rem, 6vw, 5.5rem); font-weight: 400; letter-spacing: -.055em; line-height: 1.05; margin: 0 0 36px; }
.simple-page h2 { font-family: inherit; font-size: 1.4rem; font-weight: 400; margin-top: 42px; }
.simple-page p, .simple-page dd { font-size: 1.125rem; line-height: 1.65; max-width: 38em; }
.simple-page img { width: 100%; height: auto; display: block; }
.simple-page dt { border-top: 1px solid #ddd; padding-top: 18px; font-size: .875rem; }
.simple-page dd { margin: 6px 0 24px; }
.contact-link { display: inline-block; font-size: 1.35rem; text-underline-offset: 8px; margin-top: 25px; }
.simple-form { display: grid; gap: 24px; }
.simple-form label { display: grid; gap: 10px; font-size: 1rem; }
.simple-form input, .simple-form textarea { border: 1px solid #999; border-radius: 0; padding: 14px; width: 100%; background: white; color: #191919; }
.simple-form textarea { min-height: 190px; resize: vertical; }
.simple-form button { justify-self: start; background: #191919; color: white; padding: 16px 28px; border: 0; cursor: pointer; }
.simple-form .honeypot { display: none; }
@media (max-width: 700px) {
 .portfolio-header { flex-wrap: wrap; padding: 18px 5vw; gap: 15px; }
 .portfolio-header nav { width: 100%; justify-content: space-between; gap: 12px; }
 .portfolio-brand { font-size: 2rem; }
 .photo-stage { height: calc(100svh - 145px); min-height: 400px; }
 .photo-slide img { object-position: 50% center; }
 .stage-bottom { align-items: start; flex-direction: column; padding: 65px 5vw 24px; }
 .work-section { padding: 44px 5vw; }
 .work-heading span { display: none; }
 .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
 .simple-invitation { flex-direction: column; padding: 40px 0; }
 .simple-split { grid-template-columns: 1fr; gap: 40px; }
 .simple-page { padding: 40px 5vw; }
 .portfolio-footer span { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .photo-slide { transition: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.portfolio-header { position: fixed; top: 0; left: 0; right: 0; z-index: 70; }
body:has(.portfolio-header) { padding-top: 113px; }
#world { --sw-bg: #111; --sw-ink: #fff; --sw-ink-soft: #fff; --sw-accent: #075DA8; --sw-font-display: Arial, Helvetica, sans-serif; --sw-font-body: Arial, Helvetica, sans-serif; }
#world .sw-topbar, #world .sw-scrollbar, #world .sw-particles { display: none; }
#world .sw-stage { top: 113px; }
#world .sw-scene__still { object-fit: contain; object-position: center; background: #191919; }
#world .sw-scene__video { object-fit: contain; background: #191919; }
#world .sw-scene:first-child .sw-scene__still { object-fit: contain; }
#world .sw-copylayer::before { inset: auto 0 0; width: 100%; height: 26%; background: linear-gradient(transparent, #0009); }
#world .sw-copy { top: auto; bottom: 8vh; left: 4vw; width: auto; max-width: 85vw; }
#world .sw-copy__title { font-family: Arial, Helvetica, sans-serif; font-size: clamp(2rem, 5vw, 4rem); font-weight: 400; letter-spacing: -.04em; }
#world .sw-copy__num { font-size: .875rem; }
#world .sw-route__dot { width: 44px; height: 44px; }
#world .sw-route { gap: 0; right: 12px; }
#world .sw-route__label { color: #191919; font-size: .875rem; right: 40px; }
#world .sw-route__dot i { background: #fff; }
#world .sw-route__dot.is-active i { background: #075DA8; box-shadow: 0 0 0 3px white; }
#world .sw-hint { font-size: .875rem; text-shadow: 0 1px 6px #000; }
#world .sw-btn { border-radius: 0; font-size: 1rem; color: white; border: 1px solid white; }
#world .sw-btn--primary { background: white; color: #191919; }
.work-section, .simple-invitation, .portfolio-footer { position: relative; z-index: 45; background: white; }
.simple-invitation { margin: 0; padding: 65px 4vw; }
@media (max-width:700px) { body:has(.portfolio-header) { padding-top: 147px; } #world .sw-stage { top: 147px; } #world .sw-route__label { display: none; } #world .sw-copy { bottom: 12vh; } .simple-invitation { padding: 40px 5vw; } }
}

/* Artwork pages: about this piece + related work */
.project-context { max-width:46em; margin:50px auto 0; padding:0 4vw; }
.project-context h2 { font-weight:400; font-size:1.3rem; margin:30px 0 10px; }
.project-context p, .project-context li { font-size:1.05rem; line-height:1.6; }
.related-work { padding-left:1.1em; }