/* Nearby type responds. ALIVE breathes. The work opens, rather than merely floats. */
.title-glyph{position:relative}
.hero h1>.title-line.alive{letter-spacing:-.065em}
@media(min-width:761px){.art-photo{right:13%}}
.glyph-ink{display:inline-block;transform-origin:50% 80%}
/* A typographic print field: opposite line movement, crisp offset and small local warp.
   Each line responds only within its own softly bounded proximity field. */
.motion-enabled .title-line{transform-origin:45% 50%;will-change:transform}
.pointer-motion .title-line:first-of-type{transform:translate3d(var(--field-x,0px),calc(var(--field-y,0px) - var(--field-active,0px)),0) skewX(var(--field-skew,0deg))}
.pointer-motion .title-line.alive{transform:translate3d(calc(var(--field-x,0px)*-1),calc(var(--field-y,0px)*-.65 + var(--field-active,0px)),0) skewX(calc(var(--field-skew,0deg)*-1));text-shadow:var(--field-offset,0px) var(--field-active,0px) 0 var(--blue)}
.motion-enabled .alive .glyph-ink{animation:alive-ripple 8s cubic-bezier(.2,.7,.2,1) infinite;animation-delay:calc(var(--glyph-index,0)*.10s)}
.alive .title-glyph:nth-child(1){--glyph-index:0}.alive .title-glyph:nth-child(2){--glyph-index:1}.alive .title-glyph:nth-child(3){--glyph-index:2}.alive .title-glyph:nth-child(4){--glyph-index:3}.alive .title-glyph:nth-child(5){--glyph-index:4}.alive .title-glyph:nth-child(6){--glyph-index:5}
.motion-paused .glyph-ink,.motion-offscreen .glyph-ink,.hero-preview-open .glyph-ink{animation-play-state:paused!important}
@keyframes alive-ripple{0%,18%,100%{transform:translateY(0)}6%{transform:translateY(-.04em)}11%{transform:translateY(.01em)}}
.pointer-motion .art-topline{translate:calc(var(--field-x,0px)*.35) calc(var(--field-y,0px)*-.3)}
.pointer-motion .art-bottomline{translate:calc(var(--field-x,0px)*-.3) calc(var(--field-y,0px)*.35)}

.art-photo{isolation:isolate;text-align:left;cursor:pointer;padding:9px;touch-action:manipulation}
.art-photo .photo-image{position:relative;display:block;padding:0;aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.photo-image img{display:block;width:100%;height:100%;object-fit:contain}
.art-photo>.photo-action{display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:9px;line-height:1.3;padding:10px 1px 2px;letter-spacing:.04em}
.photo-action .arrow-icon{width:13px;height:13px}
.art-photo>.stack-count{position:absolute;top:-14px;right:-13px;display:grid;place-items:center;width:35px;height:35px;padding:0;border:2px solid var(--ink);background:var(--paper);font-size:12px;line-height:1;transform:rotate(-9deg);box-shadow:3px 3px 0 var(--purple)}
.art-photo:before,.art-photo:after{content:"";position:absolute;inset:5px 5px 31px;border:2px solid var(--ink);background-color:var(--paper);background-size:cover;z-index:-1;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.art-photo:before{background-image:url('assets/portfolio/penny-02-coffee-first-thumb.webp');transform:translate(-10px,-7px) rotate(-5deg)}
.art-photo:after{background-image:url('assets/portfolio/penny-03-better-together-thumb.webp');transform:translate(7px,-8px) rotate(4deg)}
.art-photo:focus-visible{outline:3px solid var(--ink);outline-offset:8px}
.pointer-motion .art-photo:hover:before,.motion-enabled .art-photo:focus-visible:before{transform:translate(-42px,-20px) rotate(-17deg)}
.pointer-motion .art-photo:hover:after,.motion-enabled .art-photo:focus-visible:after{transform:translate(35px,-16px) rotate(13deg)}
.hero-art.is-previewing .art-photo{animation-play-state:paused!important}
.hero-art.is-previewing .art-card-main,.hero-art.is-previewing .art-sticker{opacity:.25}
.hero-art.is-previewing .orbit{animation-play-state:paused}

#hero-preview{display:none;position:fixed;inset:auto;margin:0;width:min(500px,calc(100vw - 24px));height:min(650px,calc(100dvh - 40px));max-width:none;max-height:none;padding:0;border:2px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:8px 8px 0 var(--purple);overflow:hidden}
#hero-preview:popover-open{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
#hero-preview::backdrop{background:#12121633}
.hero-preview-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px 15px;border-bottom:var(--line)}
.hero-preview-top .eyebrow{font-size:8px;margin-bottom:7px;letter-spacing:.08em}
.hero-preview-top h2{font-size:31px;line-height:.95;letter-spacing:-.055em}
#hero-preview-close{display:grid;place-items:center;border:var(--line);background:var(--ink);color:var(--paper);width:40px;height:40px;flex-shrink:0;font-size:25px;line-height:1}
.hero-preview-brands{display:flex;gap:20px;overflow-x:auto;border-bottom:1px solid #ccc;padding-inline:20px;flex-shrink:0}
.hero-preview-brands button{white-space:nowrap;background:none;border:0;border-bottom:3px solid transparent;padding:12px 0 9px;min-height:43px;font-size:10px;font-weight:800}
.hero-preview-brands button[aria-pressed=true]{color:var(--purple);border-bottom-color:var(--purple)}
.hero-preview-content{min-height:0;overflow:auto;padding:15px;display:flex;justify-content:center;overscroll-behavior:contain;container-type:size}
.hero-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;max-width:max(260px,calc(100cqh*.8));align-self:flex-start}
.hero-preview-tile{display:block;padding:0;border:0;min-width:0;aspect-ratio:4/5;background:#eee;cursor:zoom-in;overflow:hidden}
.hero-preview-tile img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.hero-preview-tile:hover img{transform:scale(1.04)}.hero-preview-tile:focus-visible{outline-offset:-4px}
.hero-preview-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:8px 20px;border-top:var(--line);font-size:9px;line-height:1.4}
.hero-preview-bottom button{display:flex;align-items:center;gap:10px;min-height:36px;padding:5px 0;border:0;background:transparent;font-size:10px;font-weight:800;white-space:nowrap}
.hero-preview-bottom .arrow-icon{width:12px;height:12px}
.motion-enabled #hero-preview:popover-open{animation:feed-unfold .4s cubic-bezier(.16,1,.3,1) both}
.motion-enabled #hero-preview:popover-open .hero-preview-tile{animation:feed-tile-in .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--tile-index)*.025s)}
@keyframes feed-unfold{from{opacity:0;transform:translateY(14px) rotate(2deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes feed-tile-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:760px){.art-photo>.photo-action{font-size:7px;padding-block:6px 0}.photo-action .arrow-icon{width:10px;height:10px}.art-photo>.stack-count{width:28px;height:28px;font-size:9px;top:-11px;right:-10px}.art-photo{padding:6px}#hero-preview{height:min(620px,calc(100dvh - 24px));box-shadow:4px 4px 0 var(--purple)}.hero-preview-top{padding:15px}.hero-preview-top h2{font-size:28px}.hero-preview-brands{gap:17px;padding-inline:15px}.hero-preview-brands button{font-size:9px}.hero-preview-content{padding:10px}.hero-preview-bottom{padding-inline:15px;font-size:8px}}
@media(max-height:500px){#hero-preview{height:calc(100dvh - 24px)}.hero-preview-top{padding:10px 15px}.hero-preview-top h2{font-size:24px}.hero-preview-top .eyebrow{display:none}.hero-preview-content{padding:10px}.hero-preview-grid{max-width:390px}.hero-preview-brands button{min-height:36px;padding-block:9px 6px}}
@media(prefers-reduced-motion:reduce){.glyph-ink,.title-line{animation:none!important;translate:none!important;transform:none!important}.alive{text-shadow:none!important}.art-photo:before,.art-photo:after,.hero-preview-tile img{transition:none!important}}