/* The fixed editorial grid follows the reference's opening eight seconds. */
.archive{--font:'Portfolio Jeko','Portfolio Lanting',Arial,sans-serif;--panel-bg:#000;--panel-text:#fff;--panel-muted:#999;--panel-line:#292929;font-family:var(--font);font-synthesis:none}
html[data-theme="light"] .archive{--panel-bg:#fff;--panel-text:#111;--panel-muted:#777;--panel-line:#ddd}
.archive .section-heading h2{font-family:var(--font);font-weight:500}
.archive-status{display:flex;align-items:center;justify-content:space-between;gap:20px}
.archive-hint{font-size:10px;color:var(--muted);line-height:1.6}.archive-hint-touch{display:none}
.archive-gallery{position:relative;overflow:visible;border-radius:0;background:var(--panel-bg)}
.archive-editorial{position:relative;top:auto;max-width:min(100%,calc((100svh - 175px)*16/9));margin-inline:auto;color:var(--panel-text);container-type:inline-size;font-family:var(--font)}
.archive-editorial .archive-stage{position:relative;aspect-ratio:16/9;background:var(--panel-bg);overflow:clip;isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.archive-edition{position:absolute;top:0;left:0;width:43%;display:grid;gap:7px;z-index:5;pointer-events:none;background:var(--panel-bg);line-height:1.5}.archive-edition strong{font-size:12px;font-weight:500;overflow-wrap:anywhere}.archive-edition>span{font-size:10px;color:var(--panel-muted)}
.archive-slide{position:absolute;inset:0;overflow:clip}
.archive-slide[hidden]{display:none}
.archive-editorial .archive-art{position:absolute;overflow:clip;padding:0;border:0;border-radius:var(--ui-radius);background:transparent;cursor:pointer;touch-action:pan-y}
.archive-editorial .archive-art img{position:absolute;top:0;left:0;max-width:none;display:block;pointer-events:none;-webkit-user-drag:none;transform-origin:0 0;border-radius:0}
.archive-editorial .archive-main{left:50%;top:0;width:50%;height:100%}
.archive-editorial .archive-small{left:0;top:50%;width:25%;height:50%}
.archive-editorial .archive-number{position:absolute;top:29%;left:16%;font-size:clamp(16px,2.3cqw,32px);font-weight:400;font-variant-numeric:tabular-nums;line-height:1}
.archive-title-axis{position:absolute;top:50%;left:35%;transform:translate(-50%,-50%) rotate(-90deg);pointer-events:none}
.archive-editorial-word{display:flex;white-space:nowrap;line-height:1;font-weight:350;letter-spacing:-.035em;overflow:clip;padding:.14em .1em}
.archive-editorial-word span{display:inline-block}
.archive-copy{position:absolute;left:40%;top:39%;width:24%;padding:22px 20px;background:var(--panel-bg);color:var(--panel-text);z-index:3}
.archive-copy h3{font-family:var(--font);font-size:clamp(15px,1.65cqw,23px);font-weight:500;line-height:1.5;text-wrap:balance;margin:0}
.archive-editorial .archive-view-project{display:inline-block;margin-top:18px;padding:5px 0;min-height:34px;font-size:11px;border:0;border-radius:0;background:none;color:inherit;box-shadow:none;cursor:pointer;transition:color .18s}
.archive-stage-controls{position:absolute;bottom:4%;left:25%;width:25%;display:flex;justify-content:center;gap:22px;z-index:5}
.archive-stage-controls button,.archive-play{font-family:inherit;font-size:11px;min-height:44px;cursor:pointer;background:none;color:inherit;padding:8px 0;border:0;border-radius:0}
.archive-editorial button:focus-visible{outline:2px solid #6666ff;outline-offset:-3px}
.archive-editorial button:hover{color:#6666ff}
.archive-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:54px;font-size:10px;color:var(--panel-muted)}
.archive-position{font-variant-numeric:tabular-nums;min-width:70px}
.archive-editorial .archive-view-project:active{color:#6666ff;background:transparent;box-shadow:none}
.archive-view-project::before,.archive-view-project::after{display:none!important}
.archive-stage-controls button:disabled{opacity:.3;cursor:default}
@media(max-width:680px){.archive-editorial{max-width:100%;top:auto}}
@container(max-width:900px){.archive-copy{padding:14px 12px;width:28%}.archive-editorial .archive-view-project{margin-top:10px}.archive-edition strong{font-size:11px}.archive-stage-controls{gap:16px}}
@media(max-width:680px){.archive-hint{font-size:9px;text-align:right}.archive-hint-desktop{display:none}.archive-hint-touch{display:inline}}
@container(max-width:679.99px){
 .archive-editorial .archive-stage{width:100%;aspect-ratio:4/5;min-height:390px}
 .archive-edition{left:0;top:0;width:29%;gap:5px}.archive-edition strong{font-size:10px;line-height:1.4}.archive-edition>span{font-size:9px}
 .archive-editorial .archive-main{left:36%;width:64%;height:74%}
 .archive-editorial .archive-small{left:0;top:64%;width:29%;height:36%}
 .archive-editorial .archive-number{left:auto;right:71%;top:16%;font-size:18px;text-align:right}
 /* The number, vertical title and controls share the thumbnail's right edge. */
 .archive-title-axis{left:29%;top:36%;width:0;height:0;transform:none}
 .archive-title-axis .archive-editorial-word{position:absolute;left:0;top:0;width:max-content;line-height:.8;padding:0 .1em;transform-origin:0 0;transform:rotate(-90deg) translate(-50%,-100%)}
 .archive-copy{left:36%;top:76%;width:64%;height:24%;padding:0}
 .archive-copy h3{font-size:15px;line-height:1.45}
 .archive-editorial .archive-view-project{font-size:10px;margin-top:6px;min-height:30px}
 .archive-stage-controls{bottom:37%;left:0;width:29%;justify-content:space-between;gap:8px}
 .archive-stage-controls button{font-size:9px;min-height:38px}
 .archive-bottom{min-height:48px;gap:12px;font-size:9px}
}
.archive-reader-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Hidden slides must not become native scroll anchors during a scrub. */
.archive-scroll-track{overflow-anchor:none}

/* A single right-aligned index column, tied to the small image's right edge. */
.archive-editorial .archive-number{left:0;right:auto;top:17%;width:25%;font-size:clamp(36px,5.4cqw,76px);text-align:right;letter-spacing:-.055em}
.archive-edition{left:0;top:calc(17% + 5.4cqw + 10px);width:25%;text-align:right;gap:3px;background:transparent}
/* Promote only the two participating slides, never translucent image layers. */
.archive-editorial.is-moving .archive-slide:not([hidden]) .archive-art,
.archive-editorial.is-moving .archive-slide:not([hidden]) .archive-editorial-word{will-change:clip-path}
@container(max-width:679.99px){
 .archive-editorial .archive-number{top:3%;width:29%;font-size:10cqw}
 .archive-edition{top:calc(3% + 10cqw + 9px);width:29%;gap:3px}
 .archive-title-axis{top:39%}
}