/* Aligned archive sheets; only their integrated tabs change position. */
html:has(#hero:not([hidden]) .drawer-archive),body:has(#hero:not([hidden]) .drawer-archive){background:#000;color:#eee}
body:has(#hero:not([hidden]) .drawer-archive):before,body:has(#hero:not([hidden]) .drawer-archive):after{display:none!important}
body:has(#hero:not([hidden]) .drawer-archive)>header{position:absolute;inset:0 0 auto;z-index:40;background:transparent!important;backdrop-filter:none;box-shadow:none;border:0}
body:has(#hero:not([hidden]) .drawer-archive)>header:before,body:has(#hero:not([hidden]) .drawer-archive)>header:after{display:none}
body:has(#hero:not([hidden]) .drawer-archive)>header .identity,body:has(#hero:not([hidden]) .drawer-archive)>header nav a{color:#eee;text-shadow:none}
body:has(#hero:not([hidden]) .drawer-archive)>header nav a[aria-current]{color:#eaff27;text-decoration:none}
body #hero:has(.drawer-archive){height:100svh;min-height:690px;background:transparent;overflow:hidden;display:grid;place-items:center;padding:116px 0 30px;box-sizing:border-box;touch-action:none}
.drawer-archive{position:relative;width:78vw;max-width:1320px;height:100%;max-height:760px;outline:none;isolation:isolate}
.drawer-folder{position:absolute;left:0;width:100%;height:180px;z-index:calc(2 + var(--layer));color:#20211e;transform-origin:center 25%;transition:transform .35s cubic-bezier(.2,.75,.25,1),filter .3s;display:block;text-decoration:none!important;--surface:#e8e7df;--outline:#31332e;will-change:top,transform}
.folder-surface{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.folder-fill{fill:var(--surface)}.folder-contour{fill:none;stroke:var(--outline);stroke-width:.8;vector-effect:non-scaling-stroke}
.drawer-tab{position:relative;margin-left:var(--tab-x);padding:7px 14px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:calc(98.5% - var(--tab-x));min-height:32px;pointer-events:none}
.drawer-tab h2{font-size:clamp(12px,1.12vw,17px);font-weight:600;line-height:1.1;letter-spacing:-.035em;margin:0;flex:0 1 auto;color:inherit}
.drawer-tab p{font-size:clamp(8px,.74vw,11px);line-height:1.2;font-weight:400;letter-spacing:0;margin:0;flex:0 0 auto;color:inherit}
.drawer-tab strong{font-size:25px;line-height:1;font-weight:600}
.drawer-folder.is-yellow{--surface:#eaff27}.drawer-folder.is-black{--surface:#11120f;--outline:#a3a59c;color:#efefe7}
.drawer-folder.is-image{--outline:#eeeee5;color:#fff}.is-image .drawer-tab{text-shadow:0 1px 3px #000,0 0 6px #000}
.drawer-folder.is-image .folder-fill{fill:#171816}
.drawer-archive:not(.is-expanded) .drawer-folder{cursor:default}
.drawer-archive.is-expanded .drawer-folder.is-picked{transform:translateY(-25px) scale(1.012);z-index:30}
.drawer-archive.has-pick .drawer-folder:not(.is-picked){filter:brightness(.7)}
.drawer-folder:focus-visible .folder-contour{stroke:#eaff27;stroke-width:2}
.archive-drawer{position:absolute;left:-1%;bottom:0;width:102%;height:71px;border:1px solid #292b25;border-radius:9px 9px 3px 3px;background:#e5e4dc;z-index:35;display:flex;justify-content:center;align-items:center}
.archive-drawer span{display:block;width:98px;height:8px;border-radius:2px;background:#191a17}
.drawer-archive.is-opening{opacity:.12;transition:opacity .65s}
.archive-entry{position:fixed;z-index:60;pointer-events:none;overflow:visible}
@media(max-width:900px){.drawer-archive{width:88vw}.drawer-tab{gap:8px;padding-left:10px;padding-right:10px}.drawer-tab h2{font-size:12px}.drawer-tab p{font-size:8px}}
@media(max-width:650px){body #hero:has(.drawer-archive){min-height:780px;padding:108px 0 26px}.drawer-archive{width:91vw}.drawer-folder{height:220px}.drawer-tab{display:block;padding:5px 8px 0}.drawer-tab h2{font-size:11px;line-height:1.05}.drawer-tab p{font-size:7px;margin-top:3px}.archive-drawer{height:64px}.drawer-tab strong{font-size:23px}.drawer-archive.is-expanded .drawer-folder.is-picked{transform:translateY(-18px)} }
@media(prefers-reduced-motion:reduce){.drawer-folder,.drawer-archive.is-opening{transition:none}}
/* Shared transition surface used by the existing project-detail next link. */
.circle-entry-layer{position:fixed;overflow:hidden;z-index:30;pointer-events:none;background:#8b8f8f;will-change:width,height,border-radius}.circle-entry-layer img{position:absolute;max-width:none;object-fit:fill}

.drawer-archive{clip-path:inset(-40px -30px 0 -30px)}

.drawer-folder.is-image[data-layer="6"] .drawer-tab{color:#111;text-shadow:0 1px 2px #fff,0 0 3px #fff}

.folder-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;pointer-events:none}
.folder-edge{z-index:1}.drawer-tab{z-index:2}
.drawer-folder[data-layer="2"] .folder-photo{object-position:50% 26%}
.drawer-folder[data-layer="6"] .folder-photo{object-position:85% 52%}
.drawer-folder[data-layer="9"],.drawer-folder[data-layer="10"]{height:108px}
@media(max-width:650px){.drawer-folder[data-layer="9"],.drawer-folder[data-layer="10"]{height:132px}}
.drawer-folder[data-layer="9"] .drawer-tab,.drawer-folder[data-layer="10"] .drawer-tab{padding-top:3px;min-height:24px}.drawer-folder[data-layer="9"] strong,.drawer-folder[data-layer="10"] strong{font-size:21px}

.drawer-folder[data-layer="8"] .folder-photo{object-position:50% 38%}

.drawer-folder[data-layer="1"] .folder-photo{object-position:50% var(--rite-crop,60%)}

/* CSS-only atmospheric left side; the original cover stays intact. */
.rite-archive-diffusion{backdrop-filter:blur(18px) brightness(.65);-webkit-backdrop-filter:blur(18px) brightness(.65);background:#0003;mask-image:linear-gradient(90deg,#000 0%,#000 20%,#0009 30%,transparent 43%);pointer-events:none}

.rite-archive-diffusion{backdrop-filter:none;-webkit-backdrop-filter:none;background:none;overflow:hidden}
.rite-archive-diffusion img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% var(--rite-crop,60%);filter:blur(18px) brightness(.65)}

.drawer-folder[data-layer="1"]>img.folder-photo{mask-image:linear-gradient(90deg,transparent 0%,transparent 25%,#000 46%)}
.rite-archive-diffusion{mask-image:linear-gradient(90deg,#000 0%,#000 25%,#0009 35%,transparent 46%)}

/* Original poster's two scenes, proportionally clipped into a horizontal pair. */
.fluid-archive-pair{display:flex;overflow:hidden;background:#080908}
.fluid-archive-pair>svg{display:block;width:50%;height:100%;overflow:hidden}
.fluid-archive-pair:after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 32%,rgba(0,0,0,.65) 100%);pointer-events:none}

/* Fluid only: shaded tab and feathered meeting edges, with unchanged crop geometry. */
.fluid-archive-pair>svg:first-child{mask-image:linear-gradient(to right,#000 0%,#000 85%,transparent 100%)}
.fluid-archive-pair>svg:nth-child(2){mask-image:linear-gradient(to right,transparent 0%,#000 15%,#000 100%)}
.fluid-archive-pair:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.78) 0,rgba(0,0,0,.45) 20px,transparent 55px);pointer-events:none}

/* Softer graphite shading for the brighter Invisible Cities cover. */
.cities-archive-shade{background:linear-gradient(to bottom,rgba(48,49,47,.68) 0,rgba(48,49,47,.36) 20px,transparent 55px)}