/* ============================================================
   Deja Entendu essay: "The astronaut on the album"  (v3, paper)
   One continuous scroll. Cream paper with a halftone screen and a faint
   drafting grid under everything; one loud vermilion and one quiet
   gray-blue; photographs printed in like scanned plates. The story is the
   spine, the artifacts sit beside the sentence that points at them.
   Light only: this page is a sheet of paper, it has no dark mode.
   ============================================================ */

:root{
  color-scheme:light;
  --paper:#efe8d8; --paper-2:#e6dfcd; --paper-3:#dcd4c0;
  --ink:#1f1c18; --ink-2:#4a463f; --ink-3:#7d776b; --rule:#cfc7b3; --rule-2:#bdb49e;
  --verm:#e4501f; --verm-soft:rgba(228,80,31,.16); --verm-line:rgba(228,80,31,.7);
  --blue:#8d97ad; --blue-soft:rgba(141,151,173,.32); --blue-line:rgba(120,132,158,.55);
  --grid:rgba(96,108,132,.028); --grid-2:rgba(96,108,132,.07);
  --glass:rgba(239,232,216,.55);
  --ft:"Courier Prime","Courier New",Courier,monospace;
  --img-op:0;
}
/* the site's shared dark tokens must not reach this page */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:light;
    --paper:#efe8d8; --paper-2:#e6dfcd; --ink:#1f1c18; --ink-2:#4a463f; --ink-3:#7d776b; --rule:#cfc7b3; --rule-2:#bdb49e; --glass:rgba(239,232,216,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme:light;
  --paper:#efe8d8; --paper-2:#e6dfcd; --ink:#1f1c18; --ink-2:#4a463f; --ink-3:#7d776b; --rule:#cfc7b3; --rule-2:#bdb49e; --glass:rgba(239,232,216,.55);
}

/* ---------- the sheet ---------- */
body.deja{background-color:var(--paper);color:var(--ink);
  background-image:
    linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
body.deja #grain{opacity:.05;mix-blend-mode:multiply}
/* a halftone screen over the whole page, the way a scanned page carries its printer's dots */
#halftone{position:fixed;inset:0;pointer-events:none;z-index:69;opacity:.06;mix-blend-mode:multiply;
  background-image:radial-gradient(circle at center,rgba(40,30,20,.6) 0 .6px,transparent .8px);background-size:3px 3px}
body.deja #progress{background:var(--verm)}
.verm{color:var(--verm);font-weight:500}.blue{color:#6f7a95;font-weight:500}
main.paper{position:relative}

/* ---------- prose ---------- */
.deja .prose{max-width:60ch;font-size:clamp(17px,1.3vw,19px);line-height:1.62;color:var(--ink)}
.deja .prose p{margin:0 0 1.15em;text-wrap:pretty}
.deja .prose p.line{margin-bottom:.55em}
.deja .prose p.line + p:not(.line){margin-top:1.15em}
.deja .prose p.beat{font-family:var(--fd);font-size:clamp(23px,2.2vw,30px);line-height:1.3;font-weight:400;margin:1.1em 0 1.1em;max-width:34ch;text-wrap:balance}
.deja .prose.lead p:first-child{font-family:var(--fd);font-size:clamp(24px,2.4vw,32px);line-height:1.3;max-width:30ch}
.deja .prose p.last{font-family:var(--fd);font-style:italic;font-size:clamp(28px,3vw,40px);line-height:1.25;margin-top:1.4em;max-width:22ch}
.deja sup.n{color:var(--ink-3)}
.deja sup.n a{text-decoration:none;color:var(--verm)}
/* the shared citation popover, in this page's ink rather than the site's */
.deja sup.n a.is-cite:hover,.deja sup.n a.is-cite:focus-visible,
.deja sup.n a[aria-expanded="true"]{background:var(--verm-soft);color:var(--verm)}
.deja sup.n a:focus-visible{outline-color:var(--verm)}
body.deja #cite-pop{font-family:var(--fb);border-color:var(--rule-2)}
body.deja #cite-pop::before{background:var(--verm)}
body.deja #cite-pop .cite-n{font-family:var(--ft);letter-spacing:.06em}
.deja .prose .stamp{font-family:var(--ft);font-weight:700;letter-spacing:.06em;color:var(--verm);border:1.5px solid var(--verm);padding:1px 6px;border-radius:2px;display:inline-block;transform:rotate(-1.5deg);font-size:.85em;white-space:nowrap}

/* cue lines: the sentence that points at the artifact. A pencil underline at
   rest, a marker swipe when it is live (hover, focus, or centred by scroll). */
.cue{cursor:pointer;background-image:linear-gradient(var(--verm-line),var(--verm-line));background-repeat:no-repeat;background-size:100% 1.5px;background-position:0 96%;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-color .25s,color .25s;border-radius:1px;padding:0 .08em;margin:0 -.08em}
.cue:hover,.cue:focus-visible,.cue.on{background-color:var(--verm-soft);outline:none}
.cue.on{background-image:none}
.cue:focus-visible{box-shadow:0 0 0 2px var(--verm)}
.flow{padding:clamp(28px,5vh,56px) 0}
.flow .wrap{max-width:1140px}

/* ---------- rows: prose beside a pinned artifact ---------- */
.figrow{padding:clamp(24px,5vh,60px) 0}
.figrow .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:start;max-width:1240px}
.figrow.rev .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.figrow.rev .col.prose{order:2}
.figrow.rev .col.art{order:1}
.figrow.wide .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.figrow .col.prose{padding-top:clamp(20px,9vh,90px);padding-bottom:clamp(20px,9vh,90px);max-width:none}
.figrow .col.prose p{max-width:46ch}
.figrow .col.art.sticky{position:sticky;top:clamp(20px,6vh,60px)}
@media (max-width:820px){
  .figrow .wrap,.figrow.rev .wrap,.figrow.wide .wrap{grid-template-columns:1fr;gap:20px}
  .figrow .col.prose,.figrow.rev .col.prose{order:2}.figrow .col.art,.figrow.rev .col.art{order:1}
  .figrow .col.prose{padding-top:8px;padding-bottom:24px}
  .moonmap.portrait .map,.moonmap.landscape .map{max-height:46vh;max-height:36svh}.plate{max-width:none}
  .plate img{max-height:40vh;max-height:32svh;width:auto;margin:0 auto}
  .print.small img,.print.tall img{max-height:40vh;max-height:32svh;width:auto;margin:0 auto}
  .print.offset{display:none}.names ol{columns:2}
  .figrow .col.art.sticky{position:sticky;top:0;z-index:5;background:var(--paper);padding:10px 0 12px;
    box-shadow:0 12px 12px -12px rgba(0,0,0,.18)}
  /* A pinned artifact taller than the cap covers the passage it belongs to: it
     sits on an opaque background with the prose sliding underneath, so the reader
     gets a sliver of text or none at all. deja.js measures each art column and
     hands this class to any block over the cap, which then simply flows. */
  .figrow .col.art.sticky.no-pin{position:static;box-shadow:none}
}

/* ---------- decorative blocks: the loud rectangle behind a plate ---------- */
.block{position:absolute;pointer-events:none;z-index:0;opacity:0;transform:translate3d(-8px,8px,0);transition:opacity .7s ease,transform .7s ease}
.block.verm{background:var(--verm);mix-blend-mode:multiply;opacity:0}
.block.blue{background:var(--blue);mix-blend-mode:multiply}
.in-view .block{opacity:.92;transform:none}
.in-view .block.blue{opacity:.55}

/* ---------- prints: photographs pasted onto the paper ---------- */
.print{position:relative;margin:0;z-index:1}
.print img{display:block;width:100%;height:auto;filter:sepia(.32) saturate(.78) contrast(1.04) brightness(.98);box-shadow:3px 3px 0 var(--verm-soft),-2px -2px 0 var(--blue-soft)}
.print::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.24;
  background-image:radial-gradient(circle at center,rgba(30,20,10,.9) 0 .7px,transparent .95px);background-size:3.5px 3.5px}
.print.sq::after,.print.small::after{opacity:.28}
.print figcaption,.plate figcaption,.moonmap figcaption,.drawing .fignote,.fignote{font-family:var(--ft);font-size:11.5px;line-height:1.55;color:var(--ink-2);margin-top:9px;max-width:60ch}
.print figcaption b,.moonmap figcaption b{font-weight:700;color:var(--ink)}
.print figcaption{position:relative;z-index:2}
.print.small{max-width:420px}
.print.tall{max-width:380px}
.print.offset{margin-left:auto;margin-right:0;margin-top:18px;width:62%;transform:rotate(1.2deg)}
/* a small snapshot pasted inline in the prose; text wraps around it, click to enlarge */
.print.inline{float:right;width:clamp(140px,22vw,190px);margin:6px 0 14px 26px;transform:rotate(1.4deg);cursor:zoom-in;z-index:2}
.print.inline img{cursor:zoom-in}
.print.inline::after{content:none}
.print.inline figcaption{font-size:10.5px;max-width:none;text-align:center}
@media (max-width:560px){.print.inline{float:none;width:min(240px,70%);margin:14px auto 20px;transform:rotate(1deg)}}
.stack{position:relative}
.stack .block.blue{left:-5%;top:-3%;width:42%;height:22%}
.print.tall .block.blue{right:-14px;top:22px;width:60%;height:40%;left:auto;z-index:-1}
figure.print.tall{isolation:isolate}
.plate{position:relative;margin:0;z-index:1;max-width:440px}
.plate img{display:block;width:100%;height:auto;mix-blend-mode:multiply;filter:contrast(1.05) sepia(.2);opacity:.92}

/* ---------- the pair: cover beside catalog photo ---------- */
.pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,22px);align-items:start;isolation:isolate;--lock:0}
.pair .frame{position:relative;z-index:2}
.pair .frame img{aspect-ratio:924/1314;object-fit:cover;max-height:78vh;width:100%;margin:0 auto}
.pair{--gap:clamp(10px,1.6vw,22px);--x:50%}
.pair .frame{transition:transform 1.1s cubic-bezier(.65,0,.25,1)}
.pair .frame.a{transform:translate3d(calc(var(--lock) * (50% + var(--gap) / 2)),0,0);z-index:3}
.pair .frame.b{transform:translate3d(calc(var(--lock) * (-50% - var(--gap) / 2)),0,0)}
.pair .frame.a img,.pair .frame.a .marks{clip-path:inset(0 calc((100% - var(--x)) * var(--lock)) 0 0)}
.pair .divider{position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:#f4f2ec;opacity:var(--lock);box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none;z-index:4}
.pair .divider::after{content:"";position:absolute;top:50%;left:-13px;width:26px;height:26px;border:1px solid #f4f2ec;border-radius:50%;transform:translateY(-50%);background:rgba(18,9,7,.55);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.pair .frame .divider{height:auto;bottom:calc(11.5px * 1.55 + 9px)}
.pair input.cmp{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;z-index:5;display:none;-webkit-appearance:none;appearance:none}
.pair.compare input.cmp{display:block}
.pair.compare .frame.a figcaption{opacity:0}
.pair.compare .frame.b figcaption{transform:translateX(0)}
.pair .frame.a figcaption{transition:opacity .3s}
.pair .frame.a img{box-shadow:none}
.pair .frame.b img{box-shadow:-3px 3px 0 var(--blue-soft)}
/* the pair reads raw: the two frames are registered 924x1314 crops, so nothing
   here touches their geometry. what comes off is the noise. the print screen is
   dropped (it sat on the figure, unclipped, so in compare mode frame a's dot grid
   laid over frame b's and beat into vertical banding), and the column is lifted
   past the page's own halftone and grain so no dot grid or noise lands on either image. */
.pair .frame::after{content:none}
#proof .col.art{z-index:71}
.pair .block.verm{left:-5%;top:-4%;width:36%;height:26%}
.pair .block.blue{right:-4%;bottom:6%;width:28%;height:34%}
.marks{position:absolute;inset:0;pointer-events:none}
.marks i{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid var(--verm);background:rgba(239,232,216,.15);opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s}
.marks i::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid var(--verm);opacity:0}
.pair[data-mk] .marks i.on{opacity:1;transform:scale(1)}
.pair[data-mk] .marks i.on::after{animation:ring 1.6s ease-out infinite}
@keyframes ring{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.pair[data-mk] .frame img{filter:sepia(.32) saturate(.78) contrast(1.04) brightness(.98)}
.fignote{margin-top:10px}
.linkbtn{font:inherit;color:var(--verm);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--verm-line)}
.linkbtn:hover{text-decoration-color:var(--verm)}
.linkbtn[aria-pressed="true"]{color:var(--ink);text-decoration-color:var(--ink)}
@media (max-width:820px){.pair .frame img{max-height:44vh}.pair{gap:8px}}

/* ---------- line drawings on the grid ---------- */
.drawing{position:relative;margin:0;padding:8px 0;isolation:isolate}
.drawing svg{display:block;width:100%;height:auto;overflow:visible;position:relative;z-index:1}
.drawing .block.verm{left:0;top:2%;width:22%;height:32%;z-index:0}
.drawing svg .ln{fill:none;stroke:var(--ink);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.drawing svg .ln.t{stroke-width:.7;opacity:.7}
.drawing svg .ln.o{stroke:var(--verm)}
.drawing svg .ln.d{stroke:#6f7a95;stroke-dasharray:4 3}
.drawing svg text{font-family:var(--ft);font-size:11px;fill:var(--ink-2)}
.drawing svg text.e{text-transform:uppercase;letter-spacing:.1em;font-size:9.5px;fill:var(--ink-3)}
.drawing svg .co{display:none}
.drawing svg [pathLength]{stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--draw,1))}
.drawing[data-hi] svg [data-part]{opacity:.22;transition:opacity .25s}
.drawing[data-hi] svg [data-part].on{opacity:1}
.drawing[data-hi] svg [data-part].on .ln{stroke:var(--verm);stroke-width:2}
.drawing[data-hi] svg [data-part].on .ln.t{stroke-width:1.2;opacity:1}

/* ---------- the suit: one cutout, lit region by region ----------
   It used to be four horizontal slices of the catalog photo stacked on top of
   each other, each carrying its own scrap of background and its own ragged
   edge, and the highlight scaled a slice up so the seams pulled apart. Now
   there is a single cutout, and each cued region is the same image again,
   masked to a soft-edged band over a dimmed base. The lit area has no hard
   border, so the suit reads as one object being lit rather than one cut up. */
.suit-assembly{position:relative;margin:0 auto;width:min(320px,86%);isolation:isolate;
  --astro:url(/albums/deja/img/astro.png)}
.suit-assembly .suit-base{display:block;width:100%;height:auto;position:relative;z-index:1;
  filter:saturate(.8) contrast(1.03) brightness(1.01);
  transition:filter .45s ease,opacity .45s ease}
.suit-assembly .part{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:var(--astro) top center/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent var(--a),#000 var(--b),#000 var(--c),transparent var(--d));
          mask-image:linear-gradient(180deg,transparent var(--a),#000 var(--b),#000 var(--c),transparent var(--d));
  transition:opacity .45s ease}
.suit-assembly .part[data-part="helmet"]{--a:0%;--b:0%;--c:16%;--d:25%}
.suit-assembly .part[data-part="arms"]{--a:14%;--b:23%;--c:50%;--d:60%}
.suit-assembly .part[data-part="legs"]{--a:51%;--b:62%;--c:100%;--d:100%}
.suit-assembly[data-hi] .suit-base{filter:saturate(.18) brightness(.82) contrast(.98);opacity:.55}
.suit-assembly[data-hi] .part.on{opacity:1}
.suit-assembly .block.verm{left:-14%;top:6%;width:24%;height:19%;z-index:0}
/* the suit is sized from the viewport height too, so the pinned figure keeps
   clear of the cap and holds its pin (its cues light parts of it as you read) */
@media (max-width:820px){.suit-assembly{width:min(230px,66%);width:min(230px,66%,23svh)}}

/* ---------- the car, a real photograph with hotspots instead of a drawing ---------- */
.car-scene{position:relative;margin:0;isolation:isolate}
.car-scene>img{display:block;width:100%;height:auto;
  filter:sepia(.2) saturate(.85) contrast(1.05);
  box-shadow:3px 3px 0 var(--verm-soft),-2px -2px 0 var(--blue-soft)}
.car-scene .hotspots{position:absolute;inset:0;z-index:2}
.car-scene .hot{position:absolute;transform:translate(-50%,-50%)}
.car-scene .hot .ring{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;border:2px solid var(--verm);background:rgba(239,232,216,.15);
  opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s;cursor:default}
.car-scene .hot .ring::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid var(--verm);opacity:0}
.car-scene[data-hi] .hot.on .ring{opacity:1;transform:scale(1)}
.car-scene[data-hi] .hot.on .ring::after{animation:ring 1.6s ease-out infinite}
.car-scene .hot.pin .tip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%,6px);
  width:max-content;max-width:190px;font-family:var(--ft);font-size:10.5px;line-height:1.4;color:var(--paper);
  background:var(--ink);padding:5px 8px;border-radius:2px;opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;z-index:6}
.car-scene[data-hi] .hot.pin.on .tip{opacity:.94;transform:translate(-50%,0)}
.car-scene .block.verm{left:-4%;top:-4%;width:26%;height:22%;z-index:0}

/* ---------- the Moon, printed ---------- */
.moonmap{position:relative;margin:0;isolation:isolate}
.moonmap .map{position:relative;z-index:1;width:100%;background:#cbbfa4;overflow:hidden;
  box-shadow:3px 3px 0 var(--verm-soft),-2px -2px 0 var(--blue-soft)}
.moonmap.portrait .map{aspect-ratio:3/4;max-height:78vh}
.moonmap.landscape .map{aspect-ratio:16/10;max-height:70vh}
.moonmap .block.verm{left:-4%;top:-3%;width:30%;height:22%}
.moonmap .block.blue{right:-4%;top:-3%;width:26%;height:30%}
.moonmap figcaption{position:relative;z-index:2}
/* the tiles are grey LRO photographs; tone them to the paper and screen them */
.moonmap .leaflet-tile-pane{filter:sepia(.42) saturate(.7) contrast(.96) brightness(1.02)}
.moonmap .map::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:450;mix-blend-mode:multiply;opacity:.26;
  background-image:radial-gradient(circle at center,rgba(30,20,10,.9) 0 .7px,transparent .95px);background-size:3.5px 3.5px}
.moonmap .map::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:451;box-shadow:inset 0 0 60px rgba(60,40,20,.28)}
.leaflet-container{font-family:var(--ft);background:#cbbfa4}
.leaflet-container .leaflet-control-attribution{display:none}
.moonmap .leaflet-control-zoom{display:none}
.moonmap.live .leaflet-control-zoom{display:block}
.moonmap .leaflet-bar{border:1px solid var(--ink);box-shadow:none;border-radius:0}
.moonmap .leaflet-bar a{background:var(--paper);color:var(--ink);border-bottom-color:var(--ink);border-radius:0!important;font-family:var(--ft)}
.trav-route{stroke:var(--verm);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--draw,0))}
.trav-route.ghost{stroke:var(--ink);stroke-width:1;opacity:.35;stroke-dasharray:2 3;stroke-dashoffset:0}
.stn-label{font-family:var(--ft);font-size:11px;line-height:1;color:var(--ink);white-space:nowrap;position:relative}
.stn-label i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink)}
.stn-label b{position:absolute;left:10px;top:-6px;font-weight:700;background:rgba(239,232,216,.82);padding:1px 4px;font-size:10.5px;letter-spacing:.02em}
.stn-label.name b{font-weight:400;font-style:italic;font-family:var(--fd);font-size:13px;background:none;color:var(--ink);letter-spacing:0;left:auto;right:0;text-shadow:0 0 4px var(--paper),0 0 4px var(--paper)}
.stn-label.name i{display:none}
.stn-label.name.big b{font-size:15px;color:var(--ink-2);opacity:.85}
.stn-label.hot i{background:var(--verm);border-color:var(--verm);box-shadow:0 0 0 3px var(--verm-soft)}
.stn-label.hot b{color:var(--verm)}
.stn-label.event i{width:10px;height:10px;left:-5px;top:-5px;background:var(--verm);border-color:var(--paper);box-shadow:0 0 0 1.5px var(--verm)}
.stn-label.event b{color:var(--verm);left:12px}
.stn-label.event.l b{left:auto;right:12px}
.stn-label.event.on i::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid var(--verm);animation:ring 1.6s ease-out infinite}
.stn-label.event.on b{background:var(--verm);color:var(--paper)}
.stn-label.lm i{border-radius:0;transform:rotate(45deg);background:var(--ink)}
.rover-icon{width:14px;height:14px;position:relative}
.rover-icon::before{content:"";position:absolute;inset:0;background:var(--paper);border:2px solid var(--verm);border-radius:2px;box-shadow:0 0 0 3px var(--verm-soft)}
.rover-icon::after{content:"";position:absolute;left:3px;right:3px;top:5px;height:2px;background:var(--verm)}
.leaflet-marker-icon{pointer-events:none}
.moonmap .scale{position:absolute;left:12px;bottom:12px;z-index:460;font-family:var(--ft);font-size:10px;line-height:1;color:var(--ink);padding:0 0 4px 4px;border-left:2px solid var(--ink);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);white-space:nowrap;overflow:visible;text-shadow:0 0 3px var(--paper),0 0 3px var(--paper)}
.moonmap .north{position:absolute;right:12px;top:10px;z-index:460;font-family:var(--ft);font-size:10px;color:var(--ink);background:rgba(239,232,216,.8);padding:3px 6px}
.moonmap .north::before{content:"↑ ";}
.moonmap .credit{position:absolute;right:10px;bottom:8px;z-index:460;font-family:var(--ft);font-size:9.5px;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase;background:rgba(239,232,216,.7);padding:2px 5px}
.moonmap .lock{position:absolute;left:12px;top:10px;z-index:460;font-family:var(--ft);font-size:10.5px;color:var(--ink);background:rgba(239,232,216,.85);border:1px solid var(--ink);padding:5px 8px;cursor:pointer}
.moonmap.live .lock{background:var(--ink);color:var(--paper)}

/* ---------- video ---------- */
.video{position:relative;aspect-ratio:4/3;background:#111;overflow:hidden;margin:6px 0 26px;max-width:46ch;box-shadow:3px 3px 0 var(--verm-soft)}
.video video,.video iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
.video .cap{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-family:var(--ft);font-size:10.5px;color:#dedcd5;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);z-index:2}
.video .cap a{color:#f4f2ec}
.yt-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#111;cursor:pointer}
.yt-play img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.3) contrast(1.05);opacity:.85;transition:opacity .2s}
.yt-play:hover img{opacity:1}
.yt-btn{position:absolute;inset:0;display:grid;place-items:center}
.yt-btn svg{width:68px;height:48px;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));transition:transform .2s}
.yt-play:hover .yt-btn svg,.yt-play:focus-visible .yt-btn svg{transform:scale(1.08)}

/* ---------- names ---------- */
.names{position:relative;z-index:1;font-family:var(--ft);color:var(--ink);max-width:460px}
.names .eng{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-bottom:10px}
.names ol{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--ink);font-size:12.5px;line-height:1.85;columns:2;column-gap:26px}
#names7 ol{columns:1}
.names li{opacity:var(--nm,1);transition:opacity .4s;cursor:help;break-inside:avoid}
.names li small{display:block;font-size:10.5px;color:var(--ink-3);line-height:1.4;max-height:0;overflow:hidden;transition:max-height .3s}
.names li:hover small,.names li:focus small{max-height:3em}
.names .foot{font-size:11px;color:var(--ink-2);margin-top:12px;line-height:1.6}
.plaque-list{margin-top:22px;background:rgba(239,232,216,.6);padding:14px 16px;box-shadow:2px 2px 0 var(--blue-soft)}
#names7{margin-top:0;max-width:340px}
@media (max-width:560px){.names ol{columns:1}}

/* ---------- the letter ---------- */
.letter{position:relative;max-width:520px;background:#f6f1e4;color:#1d1a16;padding:24px 26px 34px;font-family:var(--ft);font-size:13px;line-height:1.75;isolation:isolate;
  background-image:repeating-linear-gradient(180deg,transparent 0 3px,rgba(0,0,0,.02) 3px 4px);box-shadow:3px 3px 0 var(--verm-soft),0 14px 30px -22px rgba(0,0,0,.4);transform:rotate(-.6deg)}
.letter .hd{font-size:11px;color:#555;border-bottom:1px dashed #999;padding-bottom:10px;margin-bottom:16px;display:grid;grid-template-columns:auto 1fr;gap:3px 16px}
.letter .hd b{font-weight:400;color:#888}
.letter p{margin:0 0 1.1em}
.letter .sig{margin-top:14px}
.letter .block.verm{right:-10px;top:-12px;width:38%;height:24px;z-index:-1}
.typed[data-typed]{white-space:pre-wrap}
.typed .cursor{display:inline-block;width:.6em;height:1.05em;vertical-align:-.15em;background:#1d1a16;margin-left:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.typed.done .cursor{display:none}

/* ---------- the wall ---------- */
.wall{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.6vw,22px);margin:26px 0 38px;align-items:start}
.wall .print:nth-child(odd){transform:rotate(-1deg)}
.wall .print:nth-child(even){transform:rotate(.8deg) translateY(10px)}
.wall .print figcaption b{display:block}
.wall .print img{aspect-ratio:1;object-fit:cover}
@media (max-width:820px){.wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.wall{grid-template-columns:repeat(2,1fr)}}

/* ---------- hero: one photograph that dissolves into the paper ---------- */
#hero.deja{position:relative;height:160vh;background:transparent;color:#f4f2ec;display:block;min-height:0;overflow:visible}
#hero.deja .stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;--p:0}
#hero.deja .bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;
  -webkit-mask-image:radial-gradient(circle,#000 calc((1 - var(--p)) * 6.5px),transparent calc((1 - var(--p)) * 6.5px + .5px));
  mask-image:radial-gradient(circle,#000 calc((1 - var(--p)) * 6.5px),transparent calc((1 - var(--p)) * 6.5px + .5px));
  -webkit-mask-size:8px 8px;mask-size:8px 8px;-webkit-mask-repeat:repeat;mask-repeat:repeat;
  opacity:calc(1 - var(--p) * .5);transform:scale(calc(1.04 + var(--p) * .04));will-change:transform,opacity}
#hero.deja .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.25),rgba(10,10,12,.05) 45%,rgba(10,10,12,.75) 100%);opacity:calc(1 - var(--p))}
#hero.deja .wrap{position:absolute;left:0;right:0;bottom:0;padding-top:0;padding-bottom:clamp(40px,8vh,80px);max-width:1140px;width:auto;
  opacity:calc(1 - max(0, (var(--p) - .72)) * 3.6);transform:translate3d(0,calc(var(--p) * -30px),0)}
#hero.deja h1{color:#f4f2ec;max-width:12ch;font-size:clamp(46px,7.4vw,112px);font-style:italic;font-weight:400;text-shadow:0 2px 30px rgba(0,0,0,.35)}
#hero.deja h1 .d{position:relative;display:inline-block;white-space:nowrap}
#hero.deja h1 .d svg{position:absolute;left:-3%;right:-3%;bottom:-.06em;width:106%;height:.42em;overflow:visible}
#hero.deja h1 .d path{fill:none;stroke:var(--verm);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.1s .5s cubic-bezier(.6,0,.2,1) forwards;opacity:.95}
@keyframes draw{to{stroke-dashoffset:0}}
#hero.deja .sub{font-family:var(--fd);font-style:italic;font-size:clamp(20px,2.4vw,30px);max-width:30ch;margin:22px 0 0;color:#e8e4da;line-height:1.25}
#hero.deja .by{margin-top:26px;font-family:var(--ft);font-size:12px;letter-spacing:.06em;color:#d6d2c6;display:flex;gap:26px;flex-wrap:wrap}
#hero.deja .cue-scroll{position:absolute;left:50%;bottom:18px;width:1px;height:38px;background:rgba(244,242,236,.5);opacity:calc(1 - var(--p) * 3);overflow:hidden}
#hero.deja .cue-scroll span{position:absolute;left:0;top:-38px;width:1px;height:38px;background:#f4f2ec;animation:drop 1.8s ease-in-out infinite}
@keyframes drop{to{top:38px}}
@media (max-width:700px){#hero.deja{height:160vh}#hero.deja .bg{background-position:60% 40%}}
@media (prefers-reduced-motion:reduce){#hero.deja{height:100vh}#hero.deja .stage{--p:0!important}#hero.deja .bg{-webkit-mask-image:none;mask-image:none}}

/* ---------- columbia: the one dark room ---------- */
.columbia{position:relative;height:150vh;background:#0a0a0b;margin:clamp(30px,6vh,70px) 0}
.columbia .stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;overflow:hidden}
.cb-frame{position:relative;width:min(640px,86vw);aspect-ratio:270/184;overflow:hidden;background:#000;
  opacity:var(--p,0);transform:scale(calc(.98 + var(--p,0) * .02));transition:opacity .5s linear,transform .5s linear;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 30px 80px rgba(0,0,0,.6)}
.cb-track{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.2) brightness(1.08) saturate(0)}
.cb-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.82) 100%)}
.cb-cap{font-family:var(--ft);font-size:12px;letter-spacing:.06em;color:#cfcdc7;text-align:center;opacity:var(--p,0)}
@media (prefers-reduced-motion:reduce){.cb-frame,.cb-cap{opacity:1;transform:none}.columbia{height:100vh}}

/* ---------- arrivals: things fade up as they enter ---------- */
.figrow .col.art,.wall .print,.flow .prose{opacity:var(--in,1);transform:translate3d(0,calc((1 - var(--in,1)) * 14px),0);transition:opacity .6s ease,transform .6s ease}
@media (prefers-reduced-motion:reduce){.figrow .col.art,.wall .print,.flow .prose{--in:1!important}}

/* ---------- sources, footer ---------- */
details.srcs{border-top:1px solid var(--rule-2);margin-top:40px}
details.srcs summary{font-family:var(--ft);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--ink-2);padding:16px 0;cursor:pointer;list-style:none}


details.srcs .in{font-size:14px;line-height:1.6;color:var(--ink-2);padding-bottom:10px}
details.srcs .in ol{padding-left:22px;margin:0}
details.srcs .in li{margin-bottom:8px;padding-left:4px}
details.srcs .in a{color:var(--ink);text-decoration-color:var(--verm-line)}
.deja footer{border-top:1px solid var(--rule-2);padding:30px 0 60px;font-family:var(--ft);font-size:12px;color:var(--ink-2);line-height:1.8}

/* ---------- lightbox: open a print to see it bigger ---------- */
#lightbox{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:clamp(20px,5vh,60px);background:rgba(20,16,10,.86);backdrop-filter:blur(3px);cursor:zoom-out;
  opacity:0;pointer-events:none;transition:opacity .3s ease}
#lightbox.on{opacity:1;pointer-events:auto}
#lightbox img{max-width:min(92vw,900px);max-height:82vh;width:auto;height:auto;display:block;
  filter:sepia(.32) saturate(.78) contrast(1.04) brightness(.98);box-shadow:6px 6px 0 var(--verm-soft),-4px -4px 0 var(--blue-soft),0 30px 80px rgba(0,0,0,.5);
  transform:scale(.96);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
#lightbox.on img{transform:scale(1)}
#lightbox .lb-cap{font-family:var(--ft);font-size:12px;letter-spacing:.04em;color:#e6ddc9;text-align:center;max-width:60ch}
#lightbox .lb-close{position:absolute;top:clamp(14px,3vh,28px);right:clamp(14px,3vw,28px);width:40px;height:40px;
  border:1px solid rgba(230,221,201,.4);border-radius:50%;background:transparent;color:#e6ddc9;font-size:20px;line-height:1;cursor:pointer}
#lightbox .lb-close:hover{background:rgba(230,221,201,.12)}
@media (prefers-reduced-motion:reduce){#lightbox,#lightbox img{transition:none}#lightbox img{transform:none}}
.deja footer a{color:var(--verm)}