/* APELINE / Atelier motion system — no frameworks, no type or image manipulation. */
:root{--atelier-ease:cubic-bezier(.16,1,.3,1);--atelier-fast:cubic-bezier(.76,0,.24,1)}
html{scroll-padding-top:20px}
body{position:relative}
::selection{background:#e7e5df;color:#070707}
/* Editorial transitions between actual static Cloudflare pages. */
.page-veil{position:fixed;inset:0;z-index:999;pointer-events:none;visibility:hidden;overflow:hidden}
.page-veil .veil-top,.page-veil .veil-bottom{position:absolute;left:0;right:0;height:51%;background:#e9e8e2;will-change:transform;transform:translateY(-104%)}
.page-veil .veil-top{top:0;border-bottom:1px solid #151515}
.page-veil .veil-bottom{bottom:0;transform:translateY(104%);border-top:1px solid #151515}
.page-veil .veil-word{font:900 clamp(62px,17vw,280px)/1 Arial,Helvetica,sans-serif;letter-spacing:-.095em;color:#080808;position:absolute;left:3%;top:50%;transform:translateY(-50%);opacity:0;white-space:nowrap}
html.page-leaving .page-veil,html.page-arriving .page-veil{visibility:visible}
html.page-leaving .veil-top,html.page-leaving .veil-bottom{transition:transform .78s var(--atelier-fast);transform:translateY(0)}
html.page-leaving .veil-word{opacity:1;transition:opacity .26s ease .43s}
html.page-arriving .veil-top{transform:translateY(0);animation:veil-out-top .96s var(--atelier-fast) .04s forwards}
html.page-arriving .veil-bottom{transform:translateY(0);animation:veil-out-bottom .96s var(--atelier-fast) .04s forwards}
html.page-arriving .veil-word{opacity:1;animation:veil-word-out .4s ease .16s both}
@keyframes veil-out-top{to{transform:translateY(-105%)}}
@keyframes veil-out-bottom{to{transform:translateY(105%)}}
@keyframes veil-word-out{to{opacity:0}}
/* A deliberately thin, almost architectural scroll readout. */
.scroll-measure{position:fixed;top:0;left:0;right:0;height:2px;background:transparent;z-index:90;pointer-events:none}
.scroll-measure span{display:block;height:100%;background:#dad9d1;transform:scaleX(0);transform-origin:0 50%;will-change:transform}
body:has(.archive) .scroll-measure span{background:#bfbeb8}
/* The title is a designed object, not a stock motion preset. */
.mast-title,.title{transform-origin:50% 90%;backface-visibility:hidden}
.mast-title .period,.title .title-stop{display:inline-block;transition:transform .85s var(--atelier-ease)}
.mast-title:hover .period,.title:hover .title-stop{transform:translateY(-.07em)}
/* Fine-line hover transitions and underlines use architectural ruling. */
.site-nav a:not(.out),.links a:not(.border),.footer-bottom nav a,.signoff-bottom a{position:relative}
.site-nav a:not(.out):after,.links a:not(.border):after,.footer-bottom nav a:after,.signoff-bottom a:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .65s var(--atelier-ease)}
.site-nav a:not(.out):hover:after,.links a:not(.border):hover:after,.footer-bottom nav a:hover:after,.signoff-bottom a:hover:after{transform:scaleX(1);transform-origin:left}
/* The artwork itself is never filtered or recoloured; all light happens behind it. */
.stage,.focus-stage{--light-x:50%;--light-y:50%}
.stage::after{background:#fff;opacity:.12;mix-blend-mode:screen}
.stage-art{isolation:isolate}
.stage-art img{position:relative;display:block;z-index:1}
.stage-art .piece-incoming{position:absolute!important;inset:0;width:100%;height:100%;z-index:2;object-fit:contain;image-rendering:pixelated;will-change:clip-path,transform;filter:none}
.stage-art.is-swapping>img:first-child{transition:none}
/* A halo that resolves as a one-pixel specular stroke, not a radial-gradient decoration. */
.stage:after,.focus-stage:before{will-change:opacity}
.stage canvas,.focus-stage canvas{mix-blend-mode:screen}
.stage-controls button,.focus-nav button{position:relative;overflow:hidden}
.stage-controls button:before,.focus-nav button:before{content:"";position:absolute;inset:0;background:#e9e8e2;transform:translateY(102%);transition:transform .56s var(--atelier-ease)}
.stage-controls button:hover:before,.focus-nav button:hover:before{transform:translateY(0)}
.stage-controls button,.focus-nav button{isolation:isolate}
.stage-controls button:hover,.focus-nav button:hover{background:transparent!important;color:#080808;border-color:#e9e8e2}
.stage-controls button{transition:color .2s,border-color .2s}
.stage-controls button::first-letter{position:relative}
/* The archive opens like pages being lifted — the images still remain original PNG files. */
.art-photo,.tile .mat{contain:paint;overflow:hidden;isolation:isolate}
.art-photo:before,.tile .mat:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:#eae9e4;transform:translate3d(0,101%,0);transition:transform 1.15s var(--atelier-ease)}
.tile .mat:before{background:#e9e8e2}
.art-card:hover .art-photo:before,.tile:hover .mat:before{transform:translate3d(0,calc(100% - 2px),0)}
.art-photo:after,.tile .mat:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border:1px solid rgba(255,255,255,.0);transition:border-color .65s}
.art-card:hover .art-photo:after,.tile:hover .mat:after{border-color:rgba(255,255,255,.27)}
.art-card .art-photo img,.tile .mat img{transition:transform 1.4s var(--atelier-ease)!important;will-change:transform}
/* Non-synchronised reveal timings avoid an obvious AI-builder stagger. */
.art-card.reveal,.tile.reveal{transition:opacity 1.15s var(--atelier-ease),transform 1.45s var(--atelier-ease)}
.art-card.reveal[data-slot="2"],.tile:nth-child(2).reveal{transition-delay:.06s}
.art-card.reveal[data-slot="3"],.tile:nth-child(3).reveal{transition-delay:.12s}
.art-card.reveal[data-slot="4"],.tile:nth-child(4).reveal{transition-delay:.05s}
.art-card.reveal[data-slot="5"],.tile:nth-child(5).reveal{transition-delay:.09s}
/* Precision rule drawings as individual elements intersect with the viewport. */
.archive-head,.archive-kicker,.archive-top,.archive-bottom,.archive-end,.footer-bottom,.intro-end,.signoff-bottom{position:relative}
.rule-draw{height:1px;background:currentColor;opacity:.23;transform-origin:left;transform:scaleX(0);transition:transform 1.5s var(--atelier-ease)}
.rule-draw.is-drawn{transform:scaleX(1)}
/* ART PAGE / Hero is APELINE, not generic 'THE ART'. */
.intro .title{font-size:clamp(84px,18.3vw,320px);letter-spacing:-.112em;line-height:.82;margin:3.3vw 0 3vw}
.intro .title-stop{letter-spacing:-.12em}
.focus-stage{background:#050505;isolation:isolate}
.focus-stage:before{content:"";position:absolute;inset:20px 15%;border-left:1px solid #292929;border-right:1px solid #292929;z-index:1;pointer-events:none}
.focus-stage:after{z-index:0;opacity:.32}
.focus-stage canvas{z-index:0;opacity:.93}
.focus-frame{width:min(84%,720px);aspect-ratio:1;position:relative;z-index:2;display:grid;place-items:center;isolation:isolate}
.focus-frame img{position:absolute;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:none;z-index:1;transform:none}
.focus-frame .focus-incoming{z-index:2}
.focus-nav{position:absolute;right:22px;bottom:22px;z-index:4;display:flex;gap:5px}
.focus-nav button{width:46px;height:46px;display:grid;place-items:center;border:1px solid #6a6a62;background:#0a0a0a;color:#eee;font:18px Arial,sans-serif;transition:color .25s,border-color .25s}
.focus-note .italic{max-width:270px}
.focus .focus-info .bottom{font-weight:700;letter-spacing:-.062em}
.archive .archive-head{padding-top:80px}
.footer-top:has(span:only-child) span{white-space:nowrap}
/* Refined lightbox choreography, not an instant opaque modal. */
.viewer.open,.lightbox.open{animation:viewer-surface .42s ease both}
.viewer.open .viewer-img-shell,.lightbox.open .lightbox-image{animation:viewer-image .85s var(--atelier-ease) both}
@keyframes viewer-surface{from{background:rgba(8,8,8,0)}to{background:#080808}}
@keyframes viewer-image{from{opacity:0;clip-path:inset(6% 0 6% 0);transform:translateY(24px) scale(.95)}to{opacity:1;clip-path:inset(0);transform:translateY(0) scale(1)}}
/* Fine visual polish in interaction details. */
.art-card,.tile{touch-action:manipulation}
.art-card .corner,.tile .expand{transition:transform .7s var(--atelier-ease)}
.art-card:hover .corner,.tile:hover .expand{transform:translate(3px,-3px)}
.stage-badge,.stage-count,.top-left,.top-right{font-variant-numeric:tabular-nums}
@media(min-width:1200px){
 .focus{min-height:680px;height:min(59vw,900px)}
 .focus-frame{width:min(89%,770px)}
 .stage-art{width:min(84%,780px)}
}
@media(max-width:760px){
 .intro .title{font-size:19vw;margin:51px 0 40px}
 .focus-frame{width:87%}
 .focus-nav{right:15px;bottom:15px}
 .focus-nav button{width:39px;height:39px}
 .stage-art{width:84%}
 .archive .archive-head{padding-top:52px}
 .page-veil .veil-word{font-size:17.7vw}
}
@media(prefers-reduced-motion:reduce){
 .scroll-measure span{will-change:auto}
 .page-veil{display:none!important}
 .rule-draw{transform:scaleX(1);transition:none}
 .art-photo:before,.tile .mat:before{display:none}
 .viewer.open,.lightbox.open,.viewer.open .viewer-img-shell,.lightbox.open .lightbox-image{animation:none}
 .art-card .art-photo img,.tile .mat img{transition:none!important}
}
/* Display type scales to the framing, with precisely clipped glyph entrances. */
@media(min-width:761px){
  .mast-title{font-size:clamp(90px,23vw,380px)}
  .intro .title{font-size:clamp(84px,23.7vw,355px)}
}
.mast-title .letter-window,.intro .title .letter-window{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.02}
.mast-title .letter-ink,.intro .title .letter-ink{display:inline-block;will-change:transform,opacity;animation:character-rise 1.18s var(--atelier-ease) both}
@keyframes character-rise{
  from{transform:translate3d(0,110%,0);opacity:.2}
  to{transform:translate3d(0,0,0);opacity:1}
}
@media(prefers-reduced-motion:reduce){
 .mast-title .letter-ink,.intro .title .letter-ink{animation:none;will-change:auto}
}
/* Preserve icon contrast as the button's foil slides underneath. */
.stage-controls button:before,.focus-nav button:before{z-index:-1}
/* Graceful non-WebGL shimmer: no source-image processing. */
.stage .shader-fallback{
 background-image:linear-gradient(108deg,transparent 0%,rgba(255,255,255,.003) 40%,rgba(245,244,232,.085) 49.98%,transparent 50.05%,transparent 100%),repeating-linear-gradient(90deg,transparent 0%,transparent calc(10% - 1px),rgba(255,255,255,.024) calc(10% - 1px),rgba(255,255,255,.024) 10%);
 background-size:220% 100%,100% 100%;
 animation:quiet-silver 19s linear infinite;
}
.focus-stage:after{
 background-image:linear-gradient(105deg,transparent 0%,transparent 43%,rgba(235,235,228,.09) 50%,transparent 57%,transparent 100%),repeating-linear-gradient(90deg,transparent 0%,transparent calc(8.33% - 1px),rgba(255,255,255,.02) calc(8.33% - 1px),rgba(255,255,255,.02) 8.33%);
 background-size:240% 100%,100% 100%;
 animation:quiet-silver 21s linear infinite;
}
@keyframes quiet-silver{0%{background-position:180% 0,0 0}100%{background-position:-150% 0,0 0}}
@media(prefers-reduced-motion:reduce){.stage .shader-fallback,.focus-stage:after{animation:none}}