/* The personal archive wall between MY ___? and LENS (archive-wall.js). */
.archive-wall{--aw-paper:#f5f5f7;--aw-ink:#180400;--aw-mono:"DM Mono",ui-monospace,SFMono-Regular,Consolas,monospace;--aw-display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--aw-text:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;position:relative;height:400svh;background:var(--aw-paper);color:var(--aw-ink);clip-path:inset(0)}
.aw-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;cursor:grab;user-select:none;-webkit-user-select:none;will-change:transform}
.aw-stage.is-dragging{cursor:grabbing}
.aw-plane{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.aw-tile{position:absolute;left:0;top:0;will-change:transform}
.aw-photo{position:absolute;margin:0;overflow:hidden;background:#e8e8ea;box-shadow:0 0 0 .75px var(--aw-ink)}
.aw-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);transition:filter .5s ease,transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.aw-photo figcaption{position:absolute;left:8px;top:8px;padding:4px 6px;background:var(--aw-paper);font:500 8px/1 var(--aw-mono);letter-spacing:.06em;opacity:0;transition:opacity .3s ease}
@media(hover:hover){.aw-photo:hover img{filter:none;transform:scale(1.03)}.aw-photo:hover figcaption{opacity:1}}
.aw-veil{position:absolute;inset:0;z-index:2;background:var(--aw-ink);opacity:0;pointer-events:none}
/* The edge MY ___? leaves behind as it lifts off: a hairline and its shadow. */
.aw-edge{position:absolute;left:0;right:0;top:0;z-index:3;height:44px;border-top:1px solid var(--aw-ink);background:linear-gradient(rgba(24,4,0,.2),transparent);pointer-events:none}
/* Labels, like the other rooms'. */
.aw-label{position:absolute;z-index:3;left:5%;right:5%;top:88px;display:flex;justify-content:space-between;pointer-events:none}
.aw-label span{padding:5px 8px;background:var(--aw-paper);box-shadow:0 0 0 .75px var(--aw-ink);font:500 11px/1 var(--aw-mono);letter-spacing:.08em}
.aw-foot{position:absolute;z-index:3;left:5%;bottom:28px;display:flex;align-items:center;gap:10px;padding:5px 8px;background:var(--aw-paper);box-shadow:0 0 0 .75px var(--aw-ink);font:500 11px/1 var(--aw-mono);letter-spacing:.08em;pointer-events:none}
/* The title card. */
.aw-card{position:absolute;z-index:4;left:50%;top:50%;width:min(440px,calc(100% - 40px));margin:0;padding:30px 30px 26px;box-sizing:border-box;translate:-50% -50%;background:#fff;box-shadow:0 0 0 .75px var(--aw-ink),0 30px 60px -30px rgba(24,4,0,.35);opacity:0;visibility:hidden;pointer-events:none}
.aw-card small{display:block;margin-bottom:22px;font:600 10px/1.4 var(--aw-mono);letter-spacing:.08em}
.aw-card h2{margin:0 0 18px;font:650 clamp(34px,3.4vw,54px)/.98 var(--aw-display);letter-spacing:-.05em}
.aw-card p{margin:0;font:450 16px/1.5 var(--aw-text);letter-spacing:-.01em}
.aw-card footer{display:flex;justify-content:space-between;margin-top:26px;padding-top:12px;border-top:1px solid var(--aw-ink);font:500 9px/1 var(--aw-mono);letter-spacing:.08em}
/* LENS slides up over the wall: give its top edge the same hairline and shadow. */
.archive-wall+.lens-gateway{box-shadow:0 -1px 0 #180400,0 -28px 56px -28px rgba(24,4,0,.3)}
@media(max-width:700px){.aw-label{top:70px}.aw-label span{font-size:9px}.aw-card{padding:22px}}