/* Illustrations and interface concepts share the opening collage's composition. */
.illustrative-space{background:#0d0d0d}
.illustrative-collage{height:clamp(1050px,90vw,1600px)}
.illustrative-copy{left:26%;top:36%;width:48%}
.illustrative-copy h2{font-size:clamp(3.8rem,6vw,6.8rem);line-height:.98}
.illustrative-copy>p:not(.eyebrow){margin-top:1.5rem}
.illustrative-collage .ai-frame{aspect-ratio:var(--media-ratio)}
.illustrative-collage .ai-frame>img{opacity:.86}
.illustrative-film-1{--x:0%;--y:0%;--w:43%}
.illustrative-film-2{--x:63%;--y:8%;--w:36%}
.illustrative-film-3{--x:5%;--y:65%;--w:24%}
.illustrative-film-4{--x:48%;--y:70%;--w:51%}
.web-space{background:#0a0a0a}
.web-collage{height:clamp(1000px,96vw,1536px)}
.web-copy{left:23%;top:43%;width:54%}
.web-copy h2{font-size:clamp(4rem,7.5vw,8rem)}
.web-tile{position:absolute;width:47%;z-index:1}
.web-tile-1{left:1%;top:0}
.web-tile-2{right:1%;top:62%}
.web-preview{display:block;position:relative;width:100%;padding:0;background:#191919;border:1px solid #343434;transition:transform .45s,border-color .3s,box-shadow .45s}
.web-preview img{width:100%;height:auto}
.web-preview>span{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:44px;height:44px;background:#101010c9;color:#fff;border:1px solid #ffffff50;font-size:22px}
.web-preview:hover,.web-preview:focus-visible{transform:translateY(-6px);border-color:#aaa;box-shadow:0 15px 50px #0006}
.web-preview:focus-visible{outline-offset:5px}
.web-tile:hover,.web-tile:focus-within{z-index:3}
.site-header nav{gap:1.5rem}
.nav-link{width:76px}
.nav-link span{font-size:11px;letter-spacing:.05em}
@media(min-width:768px) and (max-width:1100px){
  .site-header nav{gap:.85rem}.nav-link{width:62px}.nav-link span{font-size:10px;letter-spacing:0}.nav-email{padding:4px}.wordmark{font-size:1.1rem}
  .illustrative-copy{top:31%;left:21%;width:58%}.illustrative-copy h2{font-size:clamp(3.5rem,6.5vw,4.5rem)}
  .illustrative-film-3{--y:67%;--w:28%}.illustrative-film-4{--y:71%;--w:52%;--x:47%}
  .web-copy{top:40%}.web-tile{width:49%}.web-tile-2{top:63%}
}
@media(max-width:767px){
  html{scroll-padding-top:10.5rem}
  .site-header{gap:.7rem;background:linear-gradient(#0d0d0d 75%,#0d0d0dd9,transparent)}
  .site-header.scrolled{background:linear-gradient(#0d0d0d 75%,#0d0d0dd9,transparent)}
  .site-header nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem 1rem}
  .nav-link{width:auto;min-height:33px;gap:4px}.nav-link span{font-size:10px;letter-spacing:0}.nav-link i{width:3px;height:3px}.nav-link b{min-width:0}.wordmark{font-size:1.15rem}
  .illustrative-collage,.web-collage{height:auto;display:flex;flex-direction:column;gap:2.5rem}
  .illustrative-copy,.web-copy{position:relative;left:auto;top:auto;width:100%;padding:1rem 0 2rem}
  .illustrative-copy h2{font-size:clamp(3.3rem,12vw,5.5rem)}.web-copy h2{font-size:clamp(3.7rem,15vw,6rem)}
  .illustrative-collage .ai-film,.web-tile{position:relative;left:auto;right:auto;top:auto;width:93%;margin:0}
  .illustrative-collage .illustrative-film-2,.illustrative-collage .illustrative-film-4,.web-tile-2{align-self:flex-end}
  .illustrative-collage .illustrative-film-3{width:65%;margin:1rem 0}
  .web-tile{width:96%}.web-tile-2{margin-top:1rem}.web-preview>span{right:6px;top:6px}
}
@media(max-width:370px){.nav-link span{font-size:9px}.site-header nav{column-gap:.75rem}.illustrative-copy .eyebrow{letter-spacing:.09em;font-size:8px}}
@media(hover:hover) and (pointer:fine){body:has(.web-preview:hover) .cursor{display:none}}
@media(prefers-reduced-motion:reduce){.web-preview:hover,.web-preview:focus-visible{transform:none}}

/* Complete artwork collections stay visible in free-form header-style collages. */
.collection-links{display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;margin:-1.2rem 0 1.6rem}
.collection-links a{min-height:36px;display:inline-flex;align-items:center;font:11px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#bbb}
.collection-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
@media(min-width:900px) and (min-height:650px) and (max-height:800px) and (prefers-reduced-motion:no-preference){
  .enhanced .featured-heading .eyebrow{margin-bottom:.8rem}.enhanced .featured-heading .section-title{margin-bottom:1.5rem}
  .enhanced .collection-links{margin-bottom:.7rem}.enhanced .featured-stage{height:48vh}.enhanced .project-art{height:34vh}
  .enhanced .featured-note{padding-top:1rem;padding-bottom:1rem}
}
.harbor-space{background:#0d0d0d}.poster-space{background:#0a0a0a}
.harbor-collage{height:clamp(1120px,100vw,1600px)}
.poster-collage{height:clamp(1150px,105vw,1680px)}
.artwork-copy{left:28%;top:31%;width:44%}
.harbor-copy h2{font-size:clamp(4rem,6.8vw,7.5rem);line-height:1}
.poster-copy h2{font-size:clamp(3.4rem,5.7vw,6.5rem);line-height:1.1}
.artwork-copy>p:not(.eyebrow){font-size:11px}
.artwork-tile{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:1}
.artwork-tile:hover,.artwork-tile:focus-within{z-index:3}
.artwork-preview{background:#131313}
.artwork-preview img{width:100%;height:auto}
.artwork-preview>span{width:36px;height:36px;right:6px;top:6px;font-size:19px}
.artwork-tile .ai-caption{padding-top:.7rem;max-width:100%}
.artwork-tile h3{font-size:12px;color:#aaa}
.harbor-board-1{--x:0%;--y:0%;--w:25%}
.harbor-board-2{--x:40%;--y:2%;--w:17%}
.harbor-board-3{--x:78%;--y:8%;--w:21%}
.harbor-board-4{--x:3%;--y:43%;--w:17%}
.harbor-board-5{--x:78%;--y:45%;--w:18%}
.harbor-board-6{--x:27%;--y:60%;--w:21%}
.harbor-board-7{--x:54%;--y:58%;--w:18%}
.harbor-board-8{--x:0%;--y:72%;--w:21%}
.harbor-board-9{--x:79%;--y:72%;--w:20%}
.poster-art-1{--x:0%;--y:0%;--w:27%}
.poster-art-2{--x:44%;--y:0%;--w:21%}
.poster-art-3{--x:76%;--y:6%;--w:23%}
.poster-art-4{--x:2%;--y:40%;--w:20%}
.poster-art-5{--x:76%;--y:44%;--w:20%}
.poster-art-6{--x:27%;--y:60%;--w:19%}
.poster-art-7{--x:51%;--y:70%;--w:24%}
.poster-art-8{--x:0%;--y:73%;--w:20%}
@media(min-width:768px) and (max-width:1100px){.artwork-copy .eyebrow{font-size:9px;letter-spacing:.1em}.artwork-copy>p:not(.eyebrow){font-size:10px}.artwork-tile h3{font-size:11px}.artwork-copy{top:29%}}
@media(max-width:767px){
  .collection-links{gap:.4rem 1.2rem;margin:-.6rem 0 1.4rem}.collection-links a{font-size:10px;min-height:44px}
  .artwork-collage{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 1.2rem;align-items:start}
  .artwork-copy{position:relative;left:auto;top:auto;width:auto;grid-column:1/-1;padding:1rem 0 2.5rem}
  .harbor-copy h2{font-size:clamp(4rem,17vw,6rem)}.poster-copy h2{font-size:clamp(3.2rem,12vw,5rem)}
  .artwork-tile{position:relative;left:auto;top:auto;width:auto}
  .artwork-tile:nth-of-type(even){margin-top:3.5rem}
  .artwork-tile h3{font-size:11px;line-height:1.5}
  .artwork-preview>span{width:30px;height:30px;font-size:17px;right:5px;top:5px}
}
@media(max-width:370px){.artwork-collage{gap:2rem .9rem}.artwork-copy .eyebrow{font-size:8px;letter-spacing:.08em}}