/* A single still room. Memories arrive; the camera never moves. */
.artefacts{position:relative;z-index:2;border-top:1px solid rgba(192,154,87,calc(.16 + var(--open)*.52));box-shadow:0 -1.4rem 3.4rem #000a;padding:clamp(4rem,7vw,7rem) var(--gutter) clamp(3.5rem,7vw,7rem);background:var(--dark);overflow:hidden}
.memory-intro,.memory-exhibit{position:relative;z-index:3;max-width:1320px;margin-inline:auto}
.memory-intro{padding-bottom:clamp(2rem,4vw,3.5rem)}
.memory-intro h2{margin:0;font:300 clamp(2.6rem,4.6vw,5rem)/.99 var(--display);letter-spacing:-.025em;text-wrap:balance}
.memory-intro h2 em{font-weight:300;color:#c9b58d}
.memory-exhibit{border:1px solid #595d4b;background:#121611}
.memory-exhibit__top,.memory-exhibit__bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.35rem}
/* The top rail carries only the way back to the beginning. */
.memory-exhibit__top{justify-content:flex-end;padding-block:.35rem;border-bottom:1px solid #595d4b}
.memory-room{position:relative;overflow:hidden;aspect-ratio:3/2;isolation:isolate;background:#252821}
/* The canvas is the measure for everything drawn on it: chip type scales with
   the room, not the viewport. */
.memory-room__canvas{position:absolute;inset:0;container-type:inline-size}
.memory-room__image,.memory-recollection,.memory-room__complete,.memory-room__static{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}
.memory-room__image{filter:grayscale(1) sepia(.07) brightness(.94)}
.memory-recollection[data-recollection='settee']{--memory-mask:url('memory-room/mask-settee.png')}
.memory-recollection[data-recollection='window']{--memory-mask:url('memory-room/mask-window.png')}
.memory-recollection[data-recollection='shelf']{--memory-mask:url('memory-room/mask-shelf.png')}
.memory-recollection[data-recollection='table']{--memory-mask:url('memory-room/mask-table.png')}
.memory-recollection{opacity:0;mask-image:var(--memory-mask);-webkit-mask-image:var(--memory-mask);mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;transition:opacity 2400ms cubic-bezier(.2,0,.25,1)}
.memory-recollection.is-revealed{opacity:1}
.memory-room__complete{opacity:0;transition:opacity 2600ms ease}
.memory-room.is-complete .memory-room__complete{opacity:1}
.memory-room.is-resetting .memory-recollection,.memory-room.is-resetting .memory-room__complete{transition-duration:950ms}
.memory-room__shade{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 7rem #080e0a24}
/* The hand-off. One drawn arc from the step just taken to the step now waiting,
   struck in the canvas's own pixel space by the script. */
.memory-guide{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity .5s ease}
.memory-guide.is-visible{opacity:1}
.memory-guide path{fill:none;stroke:#f0dcb0;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 .45rem #d9b87070) drop-shadow(0 1px 2px #00000082)}
.memory-guide__line{transition:stroke-dashoffset 1s cubic-bezier(.25,.72,.28,1)}
.memory-guide__head{opacity:0;transition:opacity .5s ease}
.memory-guide__link.is-drawn .memory-guide__head{opacity:1}
/* Native buttons cover the objects in the room; the chip inside each one names
   the step and carries the whole visible affordance. */
.memory-hotspot{position:absolute;z-index:4;left:var(--x);top:var(--y);display:none;width:var(--hit-w);height:var(--hit-h);min-width:48px;min-height:48px;padding:0;border:0;border-radius:0;background:transparent;color:#fff4dc;cursor:pointer;transform:translate(-50%,-50%);touch-action:manipulation;visibility:hidden;transition:visibility 0s linear .55s}
.js .memory-hotspot{display:block}
.memory-hotspot.is-available{visibility:visible;transition-delay:0s}
/* The chip's own transform never animates, so the arrow can be pinned to it. */
.memory-hotspot__chip{position:absolute;top:50%;left:50%;max-width:96cqw;font-size:.875rem;font-size:clamp(.6875rem,.52rem + .58cqi,.9375rem);opacity:0;translate:0 14px;transform:translate(-50%,-50%);transition:opacity .85s ease,translate .95s cubic-bezier(.16,1,.3,1)}
.memory-hotspot.is-available .memory-hotspot__chip{opacity:1;translate:0 0}
.memory-hotspot--window .memory-hotspot__chip{left:0;transform:translate(0,-50%)}
.memory-hotspot--shelf .memory-hotspot__chip{left:auto;right:0;transform:translate(0,-50%)}
/* The glow sits behind the pill and bleeds a little warmth onto the picture. */
.memory-hotspot__chip::before{content:'';position:absolute;z-index:-1;inset:-1.45em -1.15em;border-radius:999px;background:radial-gradient(closest-side,#f4dfae52,#f4dfae00 76%);opacity:.34;transition:opacity .6s ease,scale .6s ease;pointer-events:none}
.memory-hotspot__face{--chip-bg:#0d120edb;--chip-fg:#f7eed9;--chip-line:#ecd9ab5e;position:relative;display:inline-flex;align-items:center;gap:.55em;padding:.36em .95em .36em .36em;border:1px solid var(--chip-line);border-radius:999px;background:var(--chip-bg);color:var(--chip-fg);font-family:var(--text);line-height:1.3;letter-spacing:.004em;white-space:nowrap;box-shadow:0 .6rem 1.5rem -.45rem #000000c2,0 .1rem .35rem #00000078,0 0 1.9rem -.6rem #f0d49c94,inset 0 1px 0 #fff4da21;-webkit-backdrop-filter:blur(6px) saturate(1.08);backdrop-filter:blur(6px) saturate(1.08);transition:background .4s ease,color .4s ease,border-color .4s ease,box-shadow .5s ease,scale .4s cubic-bezier(.2,.8,.3,1),padding .75s cubic-bezier(.2,.8,.3,1),gap .75s cubic-bezier(.2,.8,.3,1)}
.memory-hotspot__num{flex:none;display:grid;place-items:center;width:1.7em;height:1.7em;border:1px solid #e6cf9f7a;border-color:color-mix(in srgb,currentColor 40%,transparent);border-radius:50%;background:#eacf9c1a;background:color-mix(in srgb,currentColor 11%,transparent);font-family:var(--display);font-size:1.2em;font-weight:500;font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1;line-height:1;letter-spacing:.01em}
.memory-hotspot__text{display:block;overflow:hidden;max-width:26em;transition:max-width .75s cubic-bezier(.2,.8,.3,1),opacity .45s ease}
/* The step waiting to be taken breathes, so the eye is never in doubt. */
@keyframes memoryChipBreath{0%,100%{scale:1}50%{scale:1.028}}
@keyframes memoryChipGlow{0%,100%{opacity:.28;scale:.97}50%{opacity:.95;scale:1.05}}
.memory-hotspot.is-next .memory-hotspot__face{animation:memoryChipBreath 2.9s cubic-bezier(.42,0,.58,1) infinite}
.memory-hotspot.is-next .memory-hotspot__chip::before{animation:memoryChipGlow 2.9s cubic-bezier(.42,0,.58,1) infinite}
.memory-hotspot.is-available:not(.is-revealed):hover .memory-hotspot__face,
.memory-hotspot.is-available:not(.is-revealed):focus-visible .memory-hotspot__face{--chip-bg:#eddfbb;--chip-fg:#141a15;--chip-line:#f8efd8;box-shadow:0 .95rem 2.2rem -.5rem #000000cc,0 0 0 .38rem #efdeb824,0 0 2.6rem -.4rem #f2ddaeb3,inset 0 1px 0 #fffdf6;scale:1.035;animation:none}
.memory-hotspot.is-available:not(.is-revealed):hover .memory-hotspot__chip::before,
.memory-hotspot.is-available:not(.is-revealed):focus-visible .memory-hotspot__chip::before{opacity:1;scale:1.06;animation:none}
.memory-hotspot.is-available:not(.is-revealed):active .memory-hotspot__face{scale:.995;transition-duration:.09s}
/* Touch has no hover: each waiting step cycles through the same warm highlight.
   Animate only the face, leaving the chip and its guide-arrow anchor in place. */
@keyframes memoryTouchHighlight{
  0%,100%{background:#0d120edb;color:#f7eed9;border-color:#ecd9ab5e;box-shadow:0 .6rem 1.5rem -.45rem #000000c2,0 .1rem .35rem #00000078,0 0 1.9rem -.6rem #f0d49c94,inset 0 1px 0 #fff4da21;scale:1}
  40%,60%{background:#eddfbb;color:#141a15;border-color:#f8efd8;box-shadow:0 .95rem 2.2rem -.5rem #000000cc,0 0 0 .38rem #efdeb824,0 0 2.6rem -.4rem #f2ddaeb3,inset 0 1px 0 #fffdf6;scale:1.035}
}
@media (hover:none), (pointer:coarse){
  @media (prefers-reduced-motion:no-preference) and (forced-colors:none){
    .memory-hotspot.is-next:not(.is-revealed):not([aria-busy='true']):not(:active):not(:focus-visible) .memory-hotspot__face{animation:memoryTouchHighlight 3.6s ease-in-out infinite}
    .memory-hotspot.is-next:not(.is-revealed):not([aria-busy='true']):not(:active):not(:focus-visible) .memory-hotspot__chip::before{animation:memoryChipGlow 3.6s ease-in-out infinite}
  }
  /* Keep the invitation clear without cycling when motion is reduced. */
  @media (prefers-reduced-motion:reduce){
    .memory-hotspot.is-next:not(.is-revealed):not([aria-busy='true']) .memory-hotspot__face{--chip-bg:#eddfbb;--chip-fg:#141a15;--chip-line:#f8efd8}
  }
}
/* The hit area covers the whole object, so the focus ring belongs on the chip. */
.memory-hotspot:focus-visible{outline:none}
.memory-hotspot:focus-visible .memory-hotspot__face{outline:1px solid #ead3a1;outline-offset:.28em}
/* A step already taken folds back to its numeral and keeps its place quietly. */
.memory-hotspot.is-revealed{pointer-events:none}
.memory-hotspot.is-revealed .memory-hotspot__chip{opacity:.56}
.memory-hotspot.is-revealed .memory-hotspot__chip::before{opacity:0;animation:none}
.memory-hotspot.is-revealed .memory-hotspot__face{--chip-bg:#0d120eb8;--chip-line:#e9d5a63d;gap:0;padding:.36em;box-shadow:0 .3rem .8rem -.25rem #0000009e,inset 0 1px 0 #fff4da16;animation:none}
.memory-hotspot.is-revealed .memory-hotspot__text{max-width:0;opacity:0}
.memory-hotspot.is-revealed:focus-visible .memory-hotspot__chip{opacity:1}
.memory-hotspot[aria-busy='true'] .memory-hotspot__face{--chip-bg:#d4bd8b;--chip-fg:#162018;--chip-line:#e9dcbe}
.memory-room.is-complete .memory-hotspot.is-revealed .memory-hotspot__chip{opacity:0;transition:opacity 1.8s ease}
/* Four steps. Choosing one fills its corner of the room and opens the card that
   explains that stage of the work. */
.memory-stage{position:relative}
.memory-steps{position:absolute;inset:0;z-index:5;pointer-events:none}
.memory-step{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw,27%);min-width:13rem;max-width:23rem;padding:.95rem 1.2rem 1.05rem;border:1px solid #d8c9a042;background:#0e130f;box-shadow:0 1.1rem 2.6rem #00000070;color:#e9e3d3;opacity:0;visibility:hidden;transform:translate(var(--tx,0),var(--ty,0));transition:opacity .8s ease}
.memory-step.is-current{opacity:1;visibility:visible}
.memory-step::before{content:'';position:absolute;background:#d8c9a05c}
.memory-step--window{--sx:20.5%;--sy:20%}
.memory-step--table{--sx:50%;--sy:51%;--tx:-50%;--ty:-100%;--sw:33%}
.memory-step--shelf{--sx:82%;--sy:12%;--tx:-100%}
.memory-step--settee{--sx:50%;--sy:3%;--tx:-50%;--sw:38%}
.memory-step--window::before{left:-1.5rem;top:2rem;width:1.5rem;height:1px}
.memory-step--shelf::before{right:-1.5rem;top:2rem;width:1.5rem;height:1px}
.memory-step--table::before,.memory-step--settee::before{left:50%;bottom:-1.4rem;width:1px;height:1.4rem}
/* The recap. The fourth card holds the place it was read in, at the north of
   the room; the first three take the west, south and east around it, so the
   middle of the picture stays open and the four read as one round. */
.memory-steps.is-summary .memory-step{max-width:none;visibility:visible;opacity:0;translate:0 10px;transition:opacity .9s ease,translate 1.05s cubic-bezier(.16,1,.3,1)}
.memory-steps.is-summary .memory-step::before{display:none}
.memory-steps.is-summary .memory-step--window{--sx:2%;--sy:52%;--tx:0;--ty:-50%;--sw:25%}
.memory-steps.is-summary .memory-step--table{--sx:50%;--sy:96%;--tx:-50%;--ty:-100%;--sw:32%}
.memory-steps.is-summary .memory-step--shelf{--sx:98%;--sy:52%;--tx:-100%;--ty:-50%;--sw:25%}
.memory-steps.is-summary .memory-step.is-current,.memory-steps.is-summary.is-lit .memory-step{opacity:1;translate:0 0}
.memory-steps.is-summary.is-lit .memory-step--table{transition-delay:.14s}
.memory-steps.is-summary.is-lit .memory-step--shelf{transition-delay:.28s}
.memory-step__index{margin:0 0 .55rem;color:#cbb386;font-size:.75rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase}
.memory-step h3{margin:0 0 .5rem;font:300 clamp(1.2rem,1.5vw,1.6rem)/1.12 var(--display);letter-spacing:-.01em;color:#f4ecda}
.memory-step p{margin:0;font-size:.875rem;line-height:1.6;color:#c8c7b7}
.memory-exhibit__bottom{min-height:5rem;border-top:1px solid #595d4b;color:#c9c8b7}
.memory-room__caption{margin:0;max-width:65ch;font:italic 400 clamp(1.125rem,1.65vw,1.5rem)/1.4 var(--display)}
.memory-reset{flex:0 0 auto;border:0;border-bottom:1px solid #9b9e8866;padding:.5rem 0;min-height:44px;background:none;color:#e2d3b5;font-size:.875rem;cursor:pointer}
.memory-reset:disabled{opacity:.3;cursor:default}
.memory-reset:not(:disabled):hover{border-color:#d8c191}
.memory-scene-error{position:absolute;inset:auto 5% 7%;z-index:6;margin:0;padding:.8rem 1rem;background:#111713f5;border:1px solid #bfa373;color:#eadfc9;font-size:1rem;text-align:center}
.memory-scene-error[hidden]{display:none}
.memory-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html:not(.js) .reveal{opacity:1;transform:none}
/* Without the script the rail carries nothing, and the tour is a plain list. */
html:not(.js) .memory-reset,html:not(.js) .memory-exhibit__top,html:not(.js) #roomInstructions{display:none}
html:not(.js) .memory-steps{position:static}
html:not(.js) .memory-step{position:static;width:auto;min-width:0;max-width:none;transform:none;opacity:1;visibility:visible;border-width:1px 0 0;background:#121611;box-shadow:none}
html:not(.js) .memory-step::before{display:none}
/* Below this the room is too small to float a card clear of the faces in it, so
   the step reads as a panel directly beneath the picture instead. */
@media(max-width:1240px){
.memory-steps{position:static}
.memory-step{position:static;width:auto;min-width:0;max-width:none;padding:1rem 1.25rem 1.15rem;border-width:1px 0 0;background:#121611;box-shadow:none;transform:none;opacity:1;visibility:visible;pointer-events:auto}
.js .memory-step{display:none}
.js .memory-step.is-current,.js .memory-steps.is-summary .memory-step{display:block}
.memory-step::before{display:none}
.memory-steps.is-summary .memory-step + .memory-step{padding-top:2.6rem}
.memory-steps.is-summary .memory-step + .memory-step::after{content:'';position:absolute;left:50%;top:1.25rem;width:.46rem;height:.46rem;border-right:1px solid #f0dcb0;border-bottom:1px solid #f0dcb0;transform:translate(-50%,-50%) rotate(45deg)}
}
@media(max-width:700px){
.memory-intro{padding-bottom:1.75rem}
}
@media(max-width:600px){
.artefacts{padding:3.5rem 1.1rem}.memory-intro{padding-inline:.2rem}
.memory-intro h2{font-size:clamp(1.95rem,9.9vw,3.6rem)}
.memory-exhibit{margin-inline:-.8rem}.memory-exhibit__top{padding:.3rem .8rem}
/* Keep the entire window and shelf visible on phones. */
.memory-room{aspect-ratio:3/2}
.memory-hotspot{min-width:44px;min-height:44px}
.memory-exhibit__bottom{gap:.8rem;padding:.7rem .8rem;min-height:5.5rem;align-items:center}
.memory-room__caption{font-size:1.125rem;line-height:1.4}
.memory-scene-error{font-size:.9375rem}
}
/* The longest step name has to sit inside the picture at any size. */
@container (max-width:430px){
.memory-hotspot__chip{font-size:.625rem}
.memory-hotspot__face{padding-right:.8em}
}
@media(prefers-reduced-motion:reduce){
.memory-recollection,.memory-room__complete,.memory-hotspot__chip,.memory-hotspot__chip::before,.memory-hotspot__face,.memory-hotspot__text,.memory-step,.memory-guide,.memory-guide path{transition:none!important;animation:none!important}
.memory-steps.is-summary .memory-step{translate:none!important}
.memory-hotspot__chip{translate:none!important}
}
@media(forced-colors:active){
.memory-hotspot__face{background:Canvas;color:ButtonText;border:2px solid ButtonText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.memory-hotspot__chip::before{display:none}
.memory-guide path{stroke:LinkText;filter:none}
.memory-step{background:Canvas;color:CanvasText;border:1px solid CanvasText}
.memory-hotspot:focus-visible .memory-hotspot__face{outline:2px solid Highlight}
}