/* ASALA · ELEVATOR (homepage). A pre-war New York lobby lift that boards, shrinks into the shaft on the right, rides down
   floor by floor, and lands in the street lift in the footer. Drawn in code; no images.
   Remove: see _review/ELEVATOR-3.md. Palette: paper #F2F2EE, Casper #AABBC5, Dove Grey #686B6C, spray-can red #D2262C. */

/* ---------- the lift (lobby, ride and street share this drawing) ---------- */
.pivot.lobby{background:#000;display:block;perspective:none;outline:2px solid #F2F2EE;outline-offset:0}
.nyl{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:#000}
.nyl__head{flex:none;height:46px;display:grid;grid-template-columns:1fr 34px;align-items:center;border-bottom:1px solid #686B6C;background:#000}
.nyl__dial{display:block;height:40px;padding:3px 0 0 8px}
.nyl__dial svg{display:block;height:100%;width:auto;overflow:visible}
.dial__arc{fill:none;stroke:#686B6C;stroke-width:1}
.dial__tick{stroke:#AABBC5;stroke-width:1}
.dial__tick--on{stroke:#F2F2EE;stroke-width:1.6}
.dial__needle{stroke:#F2F2EE;stroke-width:1.4;stroke-linecap:round;transform-box:view-box;transform-origin:50px 36px;transition:transform .12s linear}
.dial__hub{fill:#F2F2EE}
.dial__lv{font:700 9px/1 var(--text);letter-spacing:.08em;fill:#B9BDBF;text-anchor:middle}
.nyl__call{width:34px;height:46px;display:grid;place-items:center;padding:0;margin:0;background:#000;border:0;border-left:1px solid #686B6C;color:#AABBC5;cursor:pointer}
.nyl__call svg{width:16px;height:24px;fill:none;stroke:currentColor;stroke-width:1.2}
.nyl__call svg path{fill:currentColor;stroke:none}
.nyl__call:focus-visible{outline:2px solid #AABBC5;outline-offset:-4px}
/* the down call button lit: a flat warm fill on its round lamp, the arrow in black. No glow */
.nyl__call.is-down svg circle:nth-of-type(2){fill:#F2B347;stroke:#F2B347}
.nyl__call.is-down svg path:nth-of-type(2){fill:#0B0B0B}
.nyl__opening{position:relative;flex:1;overflow:hidden;background:#000}
.nyl__car{position:absolute;inset:0;background:#0B0B0B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M-2 2l4-4M0 10L10 0M8 12l4-4' stroke='%232A2C2D' stroke-width='1'/%3E%3C/svg%3E")}
.nyl__go{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px 14px 16px;text-decoration:none;color:#F2F2EE}
.nyl__no{font:600 11px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:#B9BDBF;margin:0}
.nyl__label{font:800 30px/.92 var(--display);text-transform:uppercase;letter-spacing:.04em;color:#F2F2EE}
.nyl__arrow{font:700 22px/1 var(--text);color:#F2F2EE}
.nyl__go:hover .nyl__label{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.nyl__go:focus-visible{outline:2px solid #AABBC5;outline-offset:-6px}

/* door leaves: Dove Grey, fine engraved lines (inset panels, a double lozenge, fluting). Each leaf is exactly half the
   opening (the lift boxes are even pixel widths), the two leaves carry the same engraving mirrored about the seam,
   and they meet on one crisp 2 px seam. They part symmetrically: each slides out by its own full width. */
.nyl__door{position:absolute;top:0;bottom:0;width:50%;background:#686B6C;transition:transform .4s cubic-bezier(.2,.7,.2,1);will-change:transform;
  box-shadow:inset 0 1px 0 #7A7D7E,inset 0 -1px 0 #4E5152}
.nyl__door--l{left:0}
.nyl__door--r{right:0}
.nyl__door--r .nyl__engr{transform:scaleX(-1)}
.nyl__engr{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#A4A8AA;stroke-width:.75;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.nyl__engr *{vector-effect:non-scaling-stroke}
.nyl__seam{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#0B0B0B;transition:opacity .15s linear;pointer-events:none}
.nyl.is-open .nyl__door--l{transform:translateX(-100%)}
.nyl.is-open .nyl__door--r{transform:translateX(100%)}
.nyl.is-open .nyl__seam{opacity:0}
.nyl.is-open .nyl__door{pointer-events:none}
/* DOORPEEK: once the doors start to close, the car's contents (its label and link) are hidden so nothing shows through
   the seam; they come back the moment the doors start to part. Applies to the lobby and the street lift */
.nyl:not(.is-open) .nyl__car > *{visibility:hidden}
.lobby.is-away .nyl{visibility:hidden}
/* the lobby doors read START A | PROJECT across the seam (paper on Dove Grey, 4.8:1), in the clean rail between panels */
.nyl__word{position:absolute;top:49.6%;transform:translateY(-50%);font:800 18px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#F2F2EE;white-space:nowrap;pointer-events:none}
.nyl__door--l .nyl__word{right:9px}
.nyl__door--r .nyl__word{left:9px}
/* the closed doors are a real link to the brief; once they part, the car's own link takes over */
.nyl__shut{position:absolute;inset:0;z-index:2}
.nyl__shut:focus-visible{outline:2px solid #AABBC5;outline-offset:-5px}
.nyl.is-open .nyl__shut{display:none}
@media (max-width:1100px){ .nyl__word{font-size:16px} .nyl__door--l .nyl__word{right:7px} .nyl__door--r .nyl__word{left:7px} }

/* ---------- the ride: one fixed car that boards, shrinks into the shaft, descends and lands in the street ---------- */
.ride{display:none}
@media (min-width:900px){
  html.ride-on .ride{display:block;position:fixed;left:0;top:0;z-index:59;transform-origin:0 0;will-change:transform;pointer-events:none;outline:2px solid #F2F2EE;outline-offset:0}
  html.ride-on .ride.is-shown{visibility:visible}
  html.ride-on .ride:not(.is-shown){visibility:hidden}
}
.ride .nyl__car{background-color:#0B0B0B}

/* ---------- the red call button: To the lobby ---------- */
.redbtn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0;margin:0;background:none;border:0;color:#F2F2EE;cursor:pointer;font:700 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase}
.redbtn__dot{flex:none;width:52px;height:52px;border-radius:50%;background:#D2262C;display:grid;place-items:center;box-shadow:inset 0 0 0 2px #F2F2EE}
.redbtn__dot svg{width:22px;height:22px;fill:none;stroke:#FFFFFF;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.redbtn:hover .redbtn__dot{box-shadow:inset 0 0 0 3px #F2F2EE}
.redbtn:focus-visible{outline:2px solid #AABBC5;outline-offset:4px}

/* ---------- the street lift: canopy with two flat downlights, the same lift drawing, scaled ---------- */
/* LOBBYWALL: the street lift sits in a narrow cast-concrete surround (two jambs and a header, about the canopy's
   overhang), and a cement wall panel to the right carries the call plate. --jamb and --pier size them. */
.foot__scene{--fs:.8140;--lw:140px;--lh:244.2px;--jamb:14px;--pier:64px}
.foot__lift{position:absolute;right:calc(var(--gut) + var(--pier));bottom:0;width:var(--lw);display:flex;flex-direction:column;align-items:center;z-index:2}
.foot__canopy{position:relative;z-index:1;width:calc(var(--lw) + 2 * var(--jamb));height:10px;background:#2A2C2D;border-top:1px solid #8E9294;border-bottom:1px solid #0B0B0B}
.foot__canopy i{position:absolute;bottom:-4px;width:14px;height:3px;background:#F2F2EE}
.foot__canopy i:first-child{left:22%}.foot__canopy i:last-child{right:22%}
.foot__frame{width:var(--lw);height:var(--lh);margin-top:10px;position:relative;z-index:1}
.foot__box{position:absolute;left:0;top:0;width:172px;height:300px;transform:scale(var(--fs));transform-origin:0 0;outline:2px solid #F2F2EE}
.foot__in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px 12px 14px}
/* the cast surround: drawn by elevator.js at exact pixels (flat fill, board joints, three form-tie dots) */
.foot__cast{position:absolute;left:calc(-1 * var(--jamb));top:12px;width:calc(var(--lw) + 2 * var(--jamb) + var(--pier));height:calc(var(--lh) + 10px);max-width:none;overflow:visible;z-index:0;pointer-events:none}
/* the call plate on the wall: half the old size, at the doors' mid-height. The whole plate is the button */
.redbtn--wall{position:absolute;z-index:2;left:calc(100% + var(--jamb) + (var(--pier) - 48px) / 2);bottom:calc(var(--lh) / 2 - 23px * var(--fs) - 38px);width:48px;min-height:76px;
  flex-direction:column;justify-content:center;gap:6px;padding:8px 2px;background:#161718;border:1px solid #8E9294;border-radius:3px;color:#F2F2EE}
.redbtn--wall .redbtn__dot{width:26px;height:26px;box-shadow:inset 0 0 0 1px #F2F2EE}
.redbtn--wall .redbtn__dot svg{width:12px;height:12px;stroke-width:2.4}
.redbtn--wall .redbtn__t{font:700 9.5px/1.15 var(--text);letter-spacing:.06em;text-align:center}
.redbtn--wall:hover .redbtn__dot{box-shadow:inset 0 0 0 2px #F2F2EE}
.redbtn--wall:hover{border-color:#F2F2EE}
@media (max-width:899px){
  .foot__scene{--jamb:9px;--pier:40px}
  .redbtn--wall{width:30px;min-height:0;bottom:calc(var(--lh) / 2 - 23px * var(--fs) - 14px);left:calc(100% + var(--jamb) + 5px);padding:5px 2px;gap:0;pointer-events:none}
  .redbtn--wall .redbtn__dot{width:16px;height:16px}
  .redbtn--wall .redbtn__dot svg{width:8px;height:8px}
  .redbtn--wall .redbtn__t{display:none}
}

/* ---------- the pigeon: a flat silhouette perched on the canopy; three wing frames when it flies ---------- */
.pigeon{position:absolute;right:calc(var(--gut) + var(--pier) + var(--lw) - 6px);bottom:calc(var(--lh) + 21px);width:28px;height:20px;z-index:3;fill:#9DA2A5;stroke:#9DA2A5;overflow:visible;transform-origin:50% 60%;pointer-events:none}
.pigeon .pg-b,.pigeon .pg-w{stroke:none}
.pigeon .pg-w{visibility:hidden}
.pigeon .pg-w--fold{visibility:visible}
.pigeon.is-flying .pg-w--fold,.pigeon.is-flying .pg-legs{visibility:hidden}
.pigeon.is-flying .pg-w--up{animation:pg-up .27s linear infinite}
.pigeon.is-flying .pg-w--mid{animation:pg-mid .27s linear infinite}
.pigeon.is-flying .pg-w--down{animation:pg-down .27s linear infinite}
@keyframes pg-up{0%,33%{visibility:visible}33.4%,100%{visibility:hidden}}
@keyframes pg-mid{0%,33.3%{visibility:hidden}33.4%,66.6%{visibility:visible}66.7%,100%{visibility:hidden}}
@keyframes pg-down{0%,66.6%{visibility:hidden}66.7%,100%{visibility:visible}}

/* ---------- the shaft (desktop): rails, floor marks L0 at the top to R at the bottom, a needle-dial head ---------- */
.shaft{display:none}
@media (min-width:900px){
  html.has-shaft .page{padding-right:72px}
  .shaft{display:block;position:fixed;top:0;right:0;bottom:0;width:72px;background:#000;border-left:1px solid var(--line);z-index:58}
}
.shaft__head{position:absolute;top:0;left:0;right:0;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:#000;border:0;border-bottom:1px solid var(--line);color:#F2F2EE;cursor:pointer;padding:0}
.shaft__head .shaft__dial svg{display:block;width:58px;height:auto;overflow:visible}
.shaft__head b{font:800 18px/1 var(--display);letter-spacing:.04em}
.shaft__head span{font:600 10px/1 var(--text);letter-spacing:.06em;color:#B9BDBF;font-variant-numeric:tabular-nums}
.shaft__head:focus-visible{outline:2px solid #AABBC5;outline-offset:-4px}
.shaft__track{position:absolute;top:110px;bottom:40px;left:0;right:0}
.shaft__rail{position:absolute;top:-14px;bottom:-14px;width:1px;background:#3B3E3F}
.shaft__rail--a{left:34px}.shaft__rail--b{left:66px}
.shaft__mark{position:absolute;left:0;right:0;height:44px;margin-top:-22px;display:flex;align-items:center;text-decoration:none;color:#8E9294}
.shaft__mark span{width:32px;text-align:right;padding-right:5px;box-sizing:border-box;font:600 10px/1 var(--text);letter-spacing:.06em}
.shaft__mark::after{content:"";position:absolute;left:32px;right:4px;top:50%;height:1px;background:#3B3E3F}
.shaft__mark:hover,.shaft__mark[aria-current="true"]{color:#F2F2EE}
.shaft__mark[aria-current="true"] span{font-weight:800}
.shaft__mark:focus-visible{outline:2px solid #AABBC5;outline-offset:-2px}

/* arrival: a floor's datum line draws in when the car first stops there */
html.elev-on .floor .datum__line{transform:scaleX(0);transform-origin:left center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
html.elev-on .floor.is-arrived .datum__line{transform:none}

/* reduced motion: nothing animates; doors drawn open, the car parked at the current floor, the pigeon stays perched */
@media (prefers-reduced-motion:reduce){
  .nyl__door,.nyl__seam,.dial__needle,html.elev-on .floor .datum__line{transition:none!important}
  .pigeon .pg-w{animation:none!important}
}
@media print{ .shaft,.ride{display:none!important} html.has-shaft .page{padding-right:0} }