/* ==========================================================================
   SATOR — the walking archive
   Layers: far (the archive beyond) · mid (wall, floor, zones — the scroller,
   turned a few degrees so the wall recedes) · Alix · near (beams, pillars)
   Sizes on the wall are in wall units: calc(n * var(--u)), 1000 units = wall height.
   Palette: paper off-white, greys, black; red only on pins, tabs, spines, lights.
   ========================================================================== */
.sarc { position: fixed; inset: 0; z-index: 30; overflow: hidden; color: #1b1a19;
  background: linear-gradient(to bottom, #121110 0, #1c1b19 var(--wall-top), #2b2927 var(--floor), #e9e9e9 var(--floor), #fafafa 100%);
  font-family: var(--font-grotesk); opacity: 0; transition: opacity .9s var(--ease-out); }
.sarc[hidden] { display: none; }
.sarc.is-open { opacity: 1; }
.sarc__stage { position: absolute; inset: 0; perspective: var(--persp); perspective-origin: 34% 48%;
  transition: filter .5s ease, transform 1.4s var(--ease-out); transform: scale(1.05); }
.sarc.is-open .sarc__stage { transform: none; }
.sarc.is-viewing .sarc__stage { filter: brightness(.42) saturate(.9); }
/* the darkness it emerges from (the push into the bookshelf ends in black) */
.sarc__dark { position: absolute; inset: 0; background: #050505; pointer-events: none; opacity: 1; transition: opacity 1.3s ease .15s; }
.sarc.is-open .sarc__dark { opacity: 0; }

/* ---------- FAR: the archive beyond the wall ---------- */
.sarc__far { position: absolute; inset: 0; transform-origin: 0 50%; transform: rotateY(calc(var(--turn) * .55)); }
.sfar { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.sfar__inner { position: absolute; left: 0; top: calc(var(--wall-top) - 6vh); height: calc(var(--floor) - var(--wall-top) + 2vh); }
.sarc__far { background: linear-gradient(to bottom, #0e0d0c, #1f1d1b 40%, #3d3a36 var(--floor), transparent var(--floor)); }
.sfar__case { position: absolute; bottom: 0; border: 5px solid #161514; border-bottom: 0; background:
    repeating-linear-gradient(to bottom, transparent 0 46px, #161514 46px 51px),
    repeating-linear-gradient(90deg, #3a3733 0 6px, #2c2a27 6px 9px, #46423e 9px 16px, #34312e 16px 18px, #4f4b46 18px 23px, #2a2825 23px 26px);
  background-position: 0 0, var(--b, 0) 0; }
.sfar__case::before { content: ''; position: absolute; left: -12px; right: -12px; top: -14px; height: 10px; background: #161514; }
.sfar__light { position: absolute; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #f7f1e3;
  box-shadow: 0 0 18px 8px rgba(247, 241, 227, .35), 0 0 60px 26px rgba(247, 241, 227, .12); }
.sfar__fog { position: absolute; left: 0; right: 0; top: calc(var(--wall-top) + 20%); height: 55%; pointer-events: none; opacity: .7;
  background: radial-gradient(ellipse 12% 30% at 20% 60%, rgba(215, 212, 206, .55), transparent 70%),
              radial-gradient(ellipse 14% 25% at 55% 50%, rgba(210, 206, 200, .5), transparent 70%),
              radial-gradient(ellipse 10% 28% at 85% 65%, rgba(220, 216, 210, .5), transparent 70%);
  background-size: 60% 100%; animation: sator-farfog 70s linear infinite; }
@keyframes sator-farfog { from { background-position: 0 0; } to { background-position: -120% 0; } }
.sfar__haze { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 13, 12, .55), rgba(120, 116, 110, .28) 50%, rgba(205, 200, 192, .55) var(--floor), transparent var(--floor)); }

/* ---------- MID: the archive wall (a horizontal scroller, turned) ---------- */
.sarc__mid { position: absolute; top: 0; bottom: 0; left: 0; right: -16vw; overflow: hidden;
  transform-origin: 0 50%; transform: rotateY(var(--turn)); scrollbar-width: none; overscroll-behavior-x: contain;
  outline: none; }
.sarc__stage { touch-action: none; }                 /* swipes walk from stop to stop */
.sarc.is-jumping .sarc__stage { opacity: 0; transition: opacity .25s ease; }
.sarc__stage { transition: filter .5s ease, transform 1.4s var(--ease-out), opacity .3s ease; }
.sarc__mid::-webkit-scrollbar { display: none; }
.sarc.is-dragging .sarc__mid { cursor: grabbing; }
.sarc.is-dragging .sit { pointer-events: none; }
.strack { position: relative; height: 100%; will-change: transform; }
.swall { position: absolute; top: var(--wall-top); height: calc(1000 * var(--u)); left: calc(var(--x) * var(--u)); width: calc(var(--w) * var(--u) + 1px);
  background:
    linear-gradient(to bottom, #1b1a19 0 calc(12 * var(--u)), #3a3835 calc(12 * var(--u)) calc(16 * var(--u)), #d9d9d9 calc(16 * var(--u)) calc(26 * var(--u)), #a9a9a9 calc(26 * var(--u)) calc(28 * var(--u)), transparent calc(28 * var(--u))),
    linear-gradient(to top, #1b1a19 0 calc(8 * var(--u)), #ececec calc(8 * var(--u)) calc(118 * var(--u)), #2b2a29 calc(118 * var(--u)) calc(121 * var(--u)), transparent calc(121 * var(--u))),
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27240%27 height=%27250%27 viewBox=%270 0 240 250%27 preserveAspectRatio=%27none%27%3E%3Crect x=%270%27 y=%270%27 width=%27240%27 height=%2712%27 fill=%27%23d6d6d6%27/%3E%3Crect x=%270%27 y=%270%27 width=%27240%27 height=%272%27 fill=%27%23fbfbfb%27/%3E%3Crect x=%270%27 y=%2712%27 width=%27240%27 height=%273%27 fill=%27%239d9d9d%27/%3E%3Crect x=%270%27 y=%2715%27 width=%27240%27 height=%27235%27 fill=%27%23e9e9e9%27/%3E%3Cpath d=%27M18,236 L18,34 L222,34%27 fill=%27none%27 stroke=%27%23fdfdfd%27 stroke-width=%273%27/%3E%3Cpath d=%27M18,236 L222,236 L222,34%27 fill=%27none%27 stroke=%27%23b4b4b4%27 stroke-width=%273%27/%3E%3Cpath d=%27M30,224 L30,46 L210,46%27 fill=%27none%27 stroke=%27%23bdbdbd%27 stroke-width=%272%27/%3E%3Cpath d=%27M30,224 L210,224 L210,46%27 fill=%27none%27 stroke=%27%23fbfbfb%27 stroke-width=%272%27/%3E%3Crect x=%270%27 y=%2715%27 width=%272%27 height=%27235%27 fill=%27%23d0d0d0%27/%3E%3C/svg%3E") left 0 bottom calc(121 * var(--u)) / calc(240 * var(--u)) calc(250 * var(--u)) repeat-x,
    linear-gradient(to bottom, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 32%),
    repeating-linear-gradient(90deg, transparent 0 calc(479 * var(--u)), rgba(40, 40, 40, .045) calc(479 * var(--u)) calc(481 * var(--u))),
    linear-gradient(to bottom, #dcdcdc, #e5e5e5 40%, #e8e8e8 70%, #e2e2e2); }   /* white plaster in the half-light: the lamps light it up */
/* the wall's matter: plaster mottling + fine grain (static, multiplied) */
.swall::before { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .16;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27240%27 height=%27240%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 seed=%274%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0%27/%3E%3C/filter%3E%3Crect width=%27240%27 height=%27240%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E") 0 0 / calc(240 * var(--u) * .6) auto, url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27900%27 height=%27600%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.006 .012%27 numOctaves=%273%27 seed=%279%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 -.35%27/%3E%3C/filter%3E%3Crect width=%27900%27 height=%27600%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E") 0 0 / calc(1800 * var(--u)) auto; }
.strack__in { position: absolute; top: 0; bottom: 0; left: var(--pad); right: 0; }   /* the archive starts after the lead-in */
.swall--start { left: calc(-1 * var(--pad)); width: calc(var(--pad) + 1px); }
.swall--end { width: calc(var(--end-px) + 2px); }
.swall--end::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: calc(60 * var(--u)); background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .25)); }
.sset--red .sset__threshold { height: 60%; background: radial-gradient(ellipse at 50% 100%, rgba(212, 15, 22, .55), rgba(138, 11, 16, .18) 45%, transparent 72%); }
.swall-gap { position: absolute; top: var(--wall-top); height: calc(1000 * var(--u)); left: calc(var(--x) * var(--u)); width: calc(var(--w) * var(--u));
  box-shadow: inset calc(10 * var(--u)) 0 0 #1b1a19, inset calc(-10 * var(--u)) 0 0 #1b1a19; }
.sfloor { position: absolute; left: 0; width: 100%; top: var(--floor); bottom: 0; overflow: hidden; pointer-events: none; }
/* the contact shadow where the floor meets the wall (moves with the wall) */
.sfloor::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; opacity: .35;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27240%27 height=%27240%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 seed=%274%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0%27/%3E%3C/filter%3E%3Crect width=%27240%27 height=%27240%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E") 0 0 / 180px auto; }
.sfloor::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14%; background: linear-gradient(rgba(30, 30, 30, .2), rgba(30, 30, 30, 0)); }
/* the floor: white as Alix's skin, boards along the corridor (rows grow toward the visitor, each
   row slides at its own depth speed), staggered butt joints — its own layer, under the wall */
.sarc__floor { position: absolute; left: 0; right: -16vw; top: 0; bottom: 0; pointer-events: none;
  transform-origin: 0 50%; transform: rotateY(var(--turn)); }
.sfl { position: absolute; left: 0; right: 0; border-top: 1.5px solid rgba(80, 80, 80, .26);
  background-color: #fafafa; background-repeat: repeat-x; background-size: var(--L) 100%; }
/* butt joints between boards (off: only the long horizontal seams). To bring them back:
   .sfl { background-image: linear-gradient(90deg, rgba(80, 80, 80, .3) 0 1.5px, transparent 1.5px); } */
.sfl:first-child { border-top: 0; background-color: #efefef; }

/* zones: a lead-in with the heading, then the body (set pieces + items) */
.szone { position: absolute; top: var(--wall-top); left: calc(var(--zx) * var(--u)); width: calc(var(--zw) * var(--u)); height: calc(1000 * var(--u)); }
/* each zone's air (under its heading and items, over the wall) */
.szone__air { position: absolute; inset: 0 0 calc(-120 * var(--u)); pointer-events: none; z-index: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.szone--world .szone__air {
  background: radial-gradient(ellipse 22% 16% at 15% 96%, rgba(150, 150, 150, .34), transparent 70%),
              radial-gradient(ellipse 26% 14% at 45% 98%, rgba(140, 140, 140, .3), transparent 70%),
              radial-gradient(ellipse 20% 15% at 72% 95%, rgba(155, 155, 155, .32), transparent 70%),
              radial-gradient(ellipse 18% 12% at 95% 97%, rgba(145, 145, 145, .3), transparent 70%),
              linear-gradient(to top, rgba(160, 160, 160, .22), transparent 40%);
  background-size: 140% 100%; animation: sator-fog 38s ease-in-out infinite alternate; }
@keyframes sator-fog { from { background-position: 0 0; } to { background-position: 100% 0; } }
.sleaf { position: absolute; top: -4%; width: calc(22 * var(--u)); height: calc(22 * var(--u)); background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath d=%27M10,1 L12,7 L18,5 L14,10 L19,13 L12,13 L10,19 L8,13 L1,13 L6,10 L2,5 L8,7Z%27 fill=%27%23b3121a%27/%3E%3C/svg%3E") center / contain no-repeat;
  animation: sator-leaf 16s linear infinite; opacity: 0; }
.sleaf:nth-child(1) { left: 8%; animation-delay: -2s; } .sleaf:nth-child(2) { left: 24%; animation-delay: -9s; animation-duration: 19s; }
.sleaf:nth-child(3) { left: 41%; animation-delay: -5s; animation-duration: 14s; } .sleaf:nth-child(4) { left: 58%; animation-delay: -12s; }
.sleaf:nth-child(5) { left: 74%; animation-delay: -7s; animation-duration: 21s; } .sleaf:nth-child(6) { left: 90%; animation-delay: -15s; animation-duration: 17s; }
@keyframes sator-leaf { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: .9; }
  50% { transform: translate(calc(60 * var(--u)), calc(520 * var(--u))) rotate(200deg); }
  92% { opacity: .9; } 100% { transform: translate(calc(-30 * var(--u)), calc(1020 * var(--u))) rotate(390deg); opacity: 0; } }
.szone--unfinished .szone__air { background: linear-gradient(to bottom, rgba(0, 0, 0, .13), rgba(0, 0, 0, .03) 45%, rgba(0, 0, 0, .12)); }
.szone__body { position: absolute; z-index: 1; top: 0; left: calc(var(--lead) * var(--u)); width: calc(var(--zw) * var(--u)); height: 100%; }
.szone__set { position: absolute; inset: 0; pointer-events: none; }

/* headings, painted on the wall */
.shead { position: absolute; z-index: 2; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(440 * var(--u)); color: #1b1a19; }
.shead p, .shead h1, .shead h2 { margin: 0; }
.shead__n { font: 500 calc(22 * var(--u))/1 var(--font-grotesk); letter-spacing: .32em; color: var(--red-deep); }
.shead__word { margin-top: calc(14 * var(--u)) !important; font: 600 calc(50.4 * var(--u))/.95 var(--font-sator); letter-spacing: .02em; }
.shead__note { margin-top: calc(26 * var(--u)) !important; font: 500 calc(17 * var(--u))/1.45 var(--font-grotesk); letter-spacing: .24em; color: #6d6964; }
.shead--intro { width: calc(1200 * var(--u)); }
.shead__sator { font: 700 calc(210 * var(--u))/.8 var(--font-sator); letter-spacing: .03em; color: #151413; outline: none; }
.shead--intro .shead__line { margin-top: calc(40 * var(--u)) !important; font: 500 calc(24 * var(--u))/1 var(--font-grotesk); letter-spacing: .42em; color: #1b1a19; }
.shead--intro .shead__note { margin-top: calc(20 * var(--u)) !important; }
.shead__line::after { content: ''; display: block; width: calc(90 * var(--u)); height: 2px; margin-top: calc(22 * var(--u)); background: var(--red); }
.shead__cue { margin-top: calc(90 * var(--u)) !important; font: 500 calc(16 * var(--u))/1 var(--font-grotesk); letter-spacing: .4em; color: #8a8580;
  animation: sator-cue 2.6s ease-in-out infinite; }
.shead__cue span { color: var(--red); }
@keyframes sator-cue { 0%, 100% { opacity: .5; transform: translateX(0); } 50% { opacity: 1; transform: translateX(calc(10 * var(--u))); } }
.screator { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); color: #1b1a19; }
.screator p { margin: 0; }
.screator__role { font: 500 calc(18 * var(--u))/1 var(--font-grotesk); letter-spacing: .34em; color: var(--red-deep); }
.screator__name { margin-top: calc(18 * var(--u)) !important; font: 600 calc(120 * var(--u))/.9 var(--font-sator); }
.screator__aka { margin-top: calc(10 * var(--u)) !important; font: 400 calc(30 * var(--u))/1.1 var(--font-balloon); color: #57534f; }

/* ---------- set pieces ---------- */
.sset { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); pointer-events: none; }
.sset svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sset .k { fill: #1b1a19; } .sset .k2 { fill: #2e2c2a; } .sset .kb { fill: #a29d95; } .sset .dk { fill: #070707; }
.sset .bk { stroke: rgba(0, 0, 0, .35); stroke-width: 1; } .sset .bl { fill: rgba(255, 255, 255, .16); }
.sset .dr { fill: #55514d; stroke: #1b1a19; stroke-width: 3; } .sset .dh { fill: #0e0d0c; } .sset .hd { fill: #d8d3c9; }
.sset .lb { fill: #ebe6dc; } .sset .lr { fill: #b3121a; } .sset .pp { fill: #efebe3; stroke: #8a8580; stroke-width: 1.5; } .sset .pr { fill: #b3121a; }
.sset .cord { stroke: #1b1a19; stroke-width: 3; } .sset .bulb { fill: #fff8e8; } .sset .pc { fill: none; stroke: #1b1a19; stroke-width: 3; }
.sset .mug { fill: #ebe6dc; stroke: #1b1a19; stroke-width: 3; }
.sset .led { fill: var(--red); animation: sator-led 4.8s steps(1) infinite; }
@keyframes sator-led { 0%, 70% { opacity: 1; } 71%, 76% { opacity: .15; } 77%, 100% { opacity: 1; } }
.sset--cat { z-index: 2; }
.sset--roomcat { z-index: 2; }
.sset--roomcat svg { position: relative; overflow: visible; }
.sset--roomcat::before { content: ''; position: absolute; left: 12%; width: 76%; bottom: 9.5%; height: 9%;
  background: radial-gradient(ellipse at 50% 50%, rgba(20, 20, 20, .42) 0%, rgba(35, 35, 35, .24) 42%, transparent 72%);
  transform: scaleX(1.08); transform-origin: 50% 50%; }   /* its shadow on the white floor */
.scat { display: block; width: 100%; height: 100%; overflow: visible; }
.sset--pilaster { background: linear-gradient(90deg, #dcdcdc, #f6f6f6 22%, #ededed 70%, #d2d2d2); box-shadow: calc(6 * var(--u)) 0 calc(12 * var(--u)) rgba(0, 0, 0, .1); }
.sset--doorway svg { filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(0, 0, 0, .3)); }
.sset__threshold { position: absolute; left: 12%; right: 12%; bottom: 0; height: 22%; background: radial-gradient(ellipse at 50% 100%, rgba(179, 18, 26, .28), transparent 70%); }
.sset__glow { position: absolute; left: -110%; width: 320%; top: 84%; height: 150%; pointer-events: none;
  background: radial-gradient(closest-side at 50% 0, rgba(255, 252, 240, .7), rgba(255, 252, 240, .2) 45%, rgba(255, 252, 240, 0) 100%);
  animation: sator-flicker 7s linear infinite; }
@keyframes sator-flicker { 0%, 100% { opacity: .9; } 41% { opacity: .9; } 42% { opacity: .62; } 43% { opacity: .92; } 44% { opacity: .7; } 45% { opacity: .9; } 80% { opacity: .95; } }
/* furniture: drawn in ink (a slight hand-made wobble, filter #sator-ink), a soft shadow on the wall */
.sset--shelf svg, .sset--cabinet svg, .sset--table svg, .sset--desk svg, .sset--chair svg {
  filter: url(#sator-ink) drop-shadow(calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .22)); }
.sset--lamp svg, .sset--stack svg { filter: none; }
/* where furniture meets the floor: a contact shadow */
.sset--shelf::after, .sset--cabinet::after, .sset--desk::after, .sset--table::after, .sset--chair::after, .sset--stack::after {
  content: ''; position: absolute; left: -5%; right: -5%; bottom: calc(-14 * var(--u)); height: calc(30 * var(--u)); pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, .3), transparent 70%); }
/* lamps: a cone of light down the wall, a pool of light on the floor, dust in the light */
.sset__cone { position: absolute; left: 50%; top: calc(380 * var(--u)); width: calc(1000 * var(--u)); height: calc(960 * var(--u));
  margin-left: calc(-500 * var(--u)); pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 36% 100% at 50% 0, rgba(255, 253, 248, 1), rgba(255, 252, 245, .62) 40%, rgba(255, 250, 240, .18) 66%, rgba(255, 250, 240, 0) 85%);
  animation: sator-flicker 7s linear infinite; }
.sset__cone i { position: absolute; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: rgba(90, 86, 80, .38);
  left: 50%; top: 20%; animation: sator-dust 14s ease-in-out infinite; }
.sset__cone i:nth-child(2) { left: 44%; top: 35%; animation-duration: 17s; animation-delay: -4s; }
.sset__cone i:nth-child(3) { left: 56%; top: 48%; animation-duration: 12s; animation-delay: -7s; width: calc(3 * var(--u)); height: calc(3 * var(--u)); }
.sset__cone i:nth-child(4) { left: 40%; top: 62%; animation-duration: 19s; animation-delay: -2s; }
.sset__cone i:nth-child(5) { left: 60%; top: 25%; animation-duration: 15s; animation-delay: -10s; width: calc(3 * var(--u)); height: calc(3 * var(--u)); }
.sset__cone i:nth-child(6) { left: 52%; top: 72%; animation-duration: 21s; animation-delay: -13s; }
@keyframes sator-dust { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(calc(40 * var(--u)), calc(-60 * var(--u))); }
  85% { opacity: 1; } 100% { transform: translate(calc(-20 * var(--u)), calc(-120 * var(--u))); opacity: 0; } }
.sset__pool { position: absolute; left: 50%; top: calc(1300 * var(--u)); width: calc(900 * var(--u)); height: calc(150 * var(--u));
  margin-left: calc(-450 * var(--u)); pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 246, 228, .75), rgba(255, 248, 236, 0) 70%); }
/* a failing lamp (FOUND & UNFINISHED) */
.is-flicker .sset__glow, .is-flicker .sset__cone, .is-flicker .sset__pool { animation: sator-flicker-bad 4.3s steps(1) infinite; }
@keyframes sator-flicker-bad { 0%, 18% { opacity: .9; } 19% { opacity: .2; } 21% { opacity: .85; } 23% { opacity: .1; } 26%, 61% { opacity: .75; }
  62% { opacity: .3; } 64%, 100% { opacity: .85; } }

/* ---------- archive items ---------- */
.sit { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  transform: rotate(var(--tilt)); -webkit-tap-highlight-color: transparent; }
.sit__obj { position: absolute; inset: 0; display: block; transition: transform .45s var(--ease-out), filter .45s var(--ease-out);
  filter: drop-shadow(calc(8 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .2)) drop-shadow(0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .14)); }
.sit:hover .sit__obj, .sit:focus-visible .sit__obj { transform: translateY(calc(-9 * var(--u))) rotate(calc(var(--tilt) * -.25));
  filter: drop-shadow(0 calc(18 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .28)); }
.sit:focus-visible { outline: none; }
.sit:focus-visible .sit__obj { outline: 2px solid var(--red); outline-offset: calc(10 * var(--u)); }
.sit__cap { position: absolute; left: 50%; top: calc(100% + 20 * var(--u)); transform: translate(-50%, 6px) rotate(calc(var(--tilt) * -1));
  white-space: nowrap; opacity: 0; pointer-events: none; font: 500 max(10px, calc(16 * var(--u)))/1 var(--font-grotesk); letter-spacing: .24em;
  color: #1b1a19; transition: opacity .35s ease, transform .35s var(--ease-out); }
.sit__cap::after { content: ''; display: block; width: 0; height: 2px; margin: calc(9 * var(--u)) auto 0; background: var(--red); transition: width .45s var(--ease-out) .05s; }
.sit__cap--above { top: auto; bottom: calc(100% + 26 * var(--u)); }
.sit:hover .sit__cap, .sit:focus-visible .sit__cap { opacity: 1; transform: translate(-50%, 0) rotate(calc(var(--tilt) * -1)); }
.sit:hover .sit__cap::after, .sit:focus-visible .sit__cap::after { width: 40%; }
.sit--book .sit__cap, .sit--drawer .sit__cap { z-index: 3; background: rgba(240, 236, 228, .92); padding: calc(8 * var(--u)) calc(12 * var(--u)); }

/* paper & placeholder drawings */
.sit__paper { position: absolute; inset: 0; display: block; overflow: hidden;
  background: radial-gradient(ellipse at 40% 30%, #f7f4ee, #eee9e0 75%, #e4dfd5); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.sit__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sart { position: absolute; left: 10%; top: 8%; width: 80%; height: 74%; fill: none; stroke: #6f6b66; stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.sart .c { stroke: #bdb8b0; stroke-width: .6; stroke-dasharray: 2 2; }
.sart .t { stroke: #a39e97; } .sart .r { stroke: var(--red); } .sart .d { stroke-dasharray: 3 2; }
.sart .tx { font: 40px var(--font-display); fill: #8a8580; stroke: none; }
.sart .f0 { fill: #0a0a0a; stroke: none; } .sart .f1 { fill: #8a8784; stroke: none; } .sart .f2 { fill: #f1ede4; stroke: #8a8784; } .sart .f3 { fill: #b3121a; stroke: none; }
.sit__ph { position: absolute; left: 7%; right: 7%; bottom: 4.5%; display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
  font: 500 max(7px, calc(13 * var(--u)))/1.2 var(--font-grotesk); letter-spacing: .14em; color: #6f6b66; }
.sit__ph b { font-weight: 600; color: #1b1a19; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sit__ph i { font-style: normal; color: var(--red-deep); flex: none; }
.sart--spill { position: absolute; left: 10%; top: 8%; width: 80%; height: 74%; pointer-events: none; stroke: #6f6b66; }
.is-torn .sit__paper { clip-path: polygon(0 0, 100% 0, 100% 88%, 93% 91%, 86% 87%, 77% 93%, 65% 88%, 51% 94%, 39% 89%, 27% 95%, 15% 89%, 6% 93%, 0 90%); }
.sit__x { position: absolute; inset: 10%; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 2px), rgba(179, 18, 26, .75) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
              linear-gradient(to bottom right, transparent calc(50% - 2px), rgba(179, 18, 26, .75) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)); }
.sit__tape { position: absolute; top: calc(-14 * var(--u)); width: calc(96 * var(--u)); height: calc(30 * var(--u)); background: rgba(206, 200, 190, .78);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.sit__tape--l { left: 6%; transform: rotate(-7deg); } .sit__tape--r { right: 6%; transform: rotate(6deg); }
.sit__pin { position: absolute; top: calc(-9 * var(--u)); left: 50%; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-left: calc(-11 * var(--u));
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff5a4f, #b3121a 55%, #5c0508); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }

/* frame, screen */
.sit--frame .sit__frame { position: absolute; inset: 0; display: block; background: #141312; }
.sit--frame .sit__paper { inset: calc(12 * var(--u)); box-shadow: inset 0 0 0 calc(24 * var(--u)) #ebe6dc, inset 0 0 0 calc(25 * var(--u)) rgba(0, 0, 0, .12); }
.sit--frame .sart { left: 16%; width: 68%; top: 12%; height: 68%; }
.sit--screen .sit__bezel { position: absolute; inset: 0; display: block; background: #181716; border-radius: calc(10 * var(--u)); }
.sit--screen .sit__paper--screen { inset: calc(14 * var(--u)); background: linear-gradient(160deg, #d5d0c7, #b9b4ab); }
.sit--screen .sit__stand { position: absolute; left: 42%; right: 42%; top: 100%; height: calc(30 * var(--u)); background: #1b1a19; }
.sit--screen .sit__stand::after { content: ''; position: absolute; left: -90%; right: -90%; bottom: 0; height: calc(8 * var(--u)); background: #1b1a19; }

/* folder */
.sit--folder .sit__back { position: absolute; inset: 0; background: #6f6b66; border-radius: calc(4 * var(--u)); }
.sit--folder .sit__leaf { position: absolute; left: 7%; right: 10%; top: calc(-16 * var(--u)); height: 70%; background: #f1ede5; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.sit--folder .sit__leaf--2 { left: 12%; right: 5%; top: calc(-8 * var(--u)); transform: rotate(1.2deg); background: #e6e1d8; }
.sit--folder .sit__cover { position: absolute; inset: calc(16 * var(--u)) 0 0; display: block; background: linear-gradient(170deg, #9d9892, #86817b); border-radius: calc(4 * var(--u)); }
.sit--folder .sit__tab { position: absolute; left: 7%; top: calc(-28 * var(--u)); max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: calc(7 * var(--u)) calc(14 * var(--u)); background: var(--red-deep); color: #f1ede4; border-radius: calc(4 * var(--u)) calc(4 * var(--u)) 0 0;
  font: 600 max(8px, calc(14 * var(--u)))/1 var(--font-grotesk); letter-spacing: .14em; }
.sit--folder .sit__count { position: absolute; right: 8%; bottom: 12%; font: 500 max(7px, calc(12 * var(--u)))/1 var(--font-grotesk); letter-spacing: .24em; color: #2b2927; }

/* drawer (pulled out of its cabinet) */
.sit--drawer .sit__obj { filter: none; }
.sit--drawer .sit__papers { position: absolute; left: 7%; right: 7%; top: calc(-24 * var(--u)); height: calc(40 * var(--u));
  background: linear-gradient(90deg, transparent 0 62%, var(--red) 62% 68%, transparent 68%) 0 0 / 100% calc(14 * var(--u)) no-repeat,
              repeating-linear-gradient(to bottom, #f1ede5 0 calc(5 * var(--u)), #cfc9be calc(5 * var(--u)) calc(6 * var(--u))); }
.sit--drawer .sit__front { position: absolute; inset: 0; display: block; background: #605b56; border: calc(3 * var(--u)) solid #1b1a19;
  transform: translate(calc(-6 * var(--u)), calc(18 * var(--u))) scale(1.05); box-shadow: 0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .35); }
.sit--drawer .sit__card { position: absolute; left: 50%; top: calc(12 * var(--u)); transform: translateX(-50%); max-width: 84%; padding: calc(5 * var(--u)) calc(8 * var(--u));
  background: #ebe6dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 max(7px, calc(11 * var(--u)))/1 var(--font-grotesk); letter-spacing: .1em; }
.sit--drawer .sit__handle { position: absolute; left: 50%; bottom: 22%; width: calc(34 * var(--u)); height: calc(7 * var(--u)); margin-left: calc(-17 * var(--u)); background: #d8d3c9; }

/* collection sign fixed across the posts of another totem */
.sit--plaque .sit__plaque { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(14 * var(--u)) calc(24 * var(--u)); color: #f1ede4;
  background: repeating-linear-gradient(to bottom, #34302c 0 calc(40 * var(--u)), #201e1b calc(40 * var(--u)) calc(43 * var(--u))), #2b2825;
  border: calc(5 * var(--u)) solid #181715; border-radius: calc(4 * var(--u));
  box-shadow: calc(6 * var(--u)) calc(9 * var(--u)) calc(13 * var(--u)) rgba(0, 0, 0, .3); }
.sit--plaque .sit__plaque::before { content: ''; position: absolute; left: -2%; right: -2%; top: calc(-8 * var(--u)); height: calc(11 * var(--u));
  background: #f4f4f4; border-radius: 50% 50% 28% 28%; }
.sit__plaque-title { max-width: 94%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 max(12px, calc(25 * var(--u)))/1 var(--font-sator); letter-spacing: .055em; }
.sit__plaque-count { margin-top: calc(12 * var(--u)); color: var(--red-light);
  font: 600 max(8px, calc(11 * var(--u)))/1 var(--font-grotesk); letter-spacing: .24em; }

/* book (spine) */
.sit--book .sit__obj { filter: drop-shadow(calc(3 * var(--u)) 0 calc(3 * var(--u)) rgba(0, 0, 0, .35)); }
.sit--book .sit__spine { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background:
    linear-gradient(to bottom, transparent 0 7%, rgba(255, 255, 255, .25) 7% 8.5%, transparent 8.5% 91%, rgba(255, 255, 255, .25) 91% 92.5%, transparent 92.5%), #2b2927; }
.sit--book:nth-of-type(2n) .sit__spine { background-color: var(--red-deep); }
.sit--book .sit__spinet { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: #f1ede4; font: 600 max(7px, calc(13 * var(--u)))/1 var(--font-grotesk); letter-spacing: .12em; }
.sit--book:hover .sit__obj, .sit--book:focus-visible .sit__obj { transform: translateY(calc(-26 * var(--u))); }

/* note (index card) */
.sit__card2 { position: absolute; inset: 0; display: block; padding: calc(24 * var(--u)) calc(18 * var(--u)) 0 calc(34 * var(--u)); text-align: left;
  background: linear-gradient(90deg, transparent calc(24 * var(--u)), rgba(179, 18, 26, .55) calc(24 * var(--u)) calc(26 * var(--u)), transparent calc(26 * var(--u))),
              repeating-linear-gradient(to bottom, #f7f4ed 0 calc(27 * var(--u)), #d9d4ca calc(27 * var(--u)) calc(28 * var(--u)));
  background-color: #f7f4ed; }
.sit__hand { display: block; font: 400 calc(28 * var(--u))/1 var(--font-balloon); color: #1b1a19; }
.sit__hand2 { display: block; margin-top: calc(10 * var(--u)); font: 400 calc(19 * var(--u))/1.42 var(--font-balloon); color: #57534f;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* storyboard strip */
.sit__paper--strip { display: flex; gap: calc(14 * var(--u)); padding: calc(18 * var(--u)); }
.sit__panel { position: relative; flex: 1; display: block; border: calc(2 * var(--u)) solid #1b1a19; background: #f7f4ee; overflow: hidden; }
.sit__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sit__panel .sart { left: 8%; top: 8%; width: 84%; height: 76%; }
.sit__pn { position: absolute; left: 6%; bottom: 4%; font: 600 max(6px, calc(11 * var(--u)))/1 var(--font-grotesk); color: var(--red-deep); letter-spacing: .1em; }

/* the way to OPERA: the sketch gets more finished as the end nears (--done 0 → 1) */
.sit--opera .sit__paper--opera { background: radial-gradient(ellipse at 40% 30%, #f7f4ee, #e9e4da); }
.sit__sketch, .sit__finish { position: absolute; inset: 0; display: block; }
.sit__finish { opacity: var(--done, 0); transition: opacity .3s linear; }
.sit__finish .sart { stroke: #0a0a0a; stroke-width: 2.6; }
.sit__finish .sart .c { stroke: none; }
.sit__ph--opera { bottom: 5%; font-size: max(9px, calc(18 * var(--u))); }
/* with the real picture: the label on a dark band at the bottom of it */
.sit--opera .sit__img ~ .sit__ph--opera { left: 0; right: 0; bottom: 0; padding: calc(14 * var(--u)) calc(22 * var(--u));
  background: linear-gradient(to top, rgba(8, 8, 8, .85), rgba(8, 8, 8, 0)); }
.sit--opera .sit__img ~ .sit__ph--opera b { color: #f1ede4; }
.sit__ph--opera i { color: var(--red); }
.sit__ribbon { position: absolute; top: calc(-10 * var(--u)); right: 12%; width: calc(34 * var(--u)); height: calc(120 * var(--u)); background: var(--red);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); }
.sit--opera:hover .sit__finish, .sit--opera:focus-visible .sit__finish { opacity: 1; }

/* the ceiling (in the track: it moves with the wall): boards and dark beams */
.sceil { position: absolute; left: 0; width: 100%; top: 0; height: var(--wall-top); pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%),
              repeating-linear-gradient(90deg, #0d0c0b 0 calc(46 * var(--u)), #2a2826 calc(46 * var(--u)) calc(50 * var(--u)),
                #1c1a18 calc(50 * var(--u)) calc(158 * var(--u)), #232120 calc(158 * var(--u)) calc(160 * var(--u)), #1c1a18 calc(160 * var(--u)) calc(270 * var(--u)),
                #232120 calc(270 * var(--u)) calc(272 * var(--u)), #1c1a18 calc(272 * var(--u)) calc(380 * var(--u))); }
/* the room's edges fall into shadow */
.sarc__vignette { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 45% 52%, transparent 55%, rgba(0, 0, 0, .28) 100%); }
.sarc__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- ALIX ---------- */
.sarc__alix { position: absolute; inset: 0; pointer-events: none; }
.salix { position: absolute; }
.salix__pic { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.salix__pic { transform-origin: 50% 50%; }
.salix__refl { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; pointer-events: none; opacity: .2;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .35) 16%, transparent 42%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .35) 16%, transparent 42%); }   /* her reflection in the white floor */
.salix__shadow { position: absolute; left: 6%; right: 6%; bottom: -2.2%; height: 5%; background: radial-gradient(ellipse, rgba(20, 18, 16, .3), transparent 68%); }

/* ---------- NEAR: beams, pillars, papers on strings ---------- */
.sarc__near { position: absolute; inset: 0; pointer-events: none; }
.snear__beam { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--wall-top) * .55);
  background: linear-gradient(to bottom, #0b0a0a 0 78%, #1d1b19 78% 100%); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.snear { position: absolute; left: 0; top: 0; height: 100%; width: 1px; will-change: transform; }
.snear__pillar { position: absolute; top: 0; bottom: 0; width: 3.6vw; background: linear-gradient(90deg, #070707, #1b1a18 55%, #0b0b0b); filter: blur(1.5px); }
.snear__string { position: absolute; top: calc(var(--wall-top) * .42); height: 1px; background: #1b1a19; transform: rotate(1.5deg); }
.snear__string i { position: absolute; top: 0; width: 2vw; height: 2.6vw; margin-left: -1vw; background: #efebe3; box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
  transform-origin: 50% 0; transform: rotate(var(--r, 0deg)); animation: sator-hang 6s ease-in-out infinite alternate; filter: blur(.6px); }
.snear__string i.is-red { background: #b3121a; }
.snear__string i:nth-child(2) { animation-duration: 7.4s; } .snear__string i:nth-child(3) { animation-duration: 5.2s; }
@keyframes sator-hang { from { transform: rotate(calc(var(--r, 0deg) - 2deg)); } to { transform: rotate(calc(var(--r, 0deg) + 2deg)); } }

/* ---------- VIEWER ---------- */
.sview { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .32s ease; }
.sview[hidden] { display: none; }
.sview.is-open { opacity: 1; }
.sview__shade { position: absolute; inset: 0; background: rgba(6, 6, 6, .5); }
.sview__box { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(250px, .9fr); gap: clamp(28px, 4.5vw, 72px);
  align-items: center; width: min(1200px, 86vw); color: var(--offwhite); transform: translateY(14px); transition: transform .45s var(--ease-out); }
.sview.is-open .sview__box { transform: none; }
.sview__art { position: relative; margin: 0; justify-self: center; aspect-ratio: var(--ar); width: 100%; max-height: 78vh; max-width: calc(78vh * var(--arw, 1) / var(--arh, 1)); }
.sview__paper { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 40% 30%, #f7f4ee, #e9e4da); box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.sview__paper .sart { stroke-width: .8; }
.sview__paper .sit__ph { font-size: 12px; }
.sview__cap { position: absolute; left: 0; top: calc(100% + 12px); font: 500 11px/1 var(--font-grotesk); letter-spacing: .26em; color: #bdb8b0; }
.sview__card { position: absolute; inset: 0; padding: 8% 8% 0 12%; background:
    linear-gradient(90deg, transparent 8%, rgba(179, 18, 26, .55) 8% 8.4%, transparent 8.4%),
    repeating-linear-gradient(to bottom, #f7f4ed 0 38px, #d9d4ca 38px 39px); color: #1b1a19; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.sview__hand { margin: 0; font: 400 clamp(26px, 3vw, 44px)/1.1 var(--font-balloon); }
.sview__hand2 { white-space: pre-line; margin: 14px 0 0; font: 400 clamp(19px, 1.7vw, 26px)/1.45 var(--font-balloon); color: #57534f; }
.sview__text p { margin: 0; }
.sview__kind { font: 600 11px/1 var(--font-grotesk); letter-spacing: .34em; color: var(--red-light); }
.sview__title { margin: 16px 0 0; font: 600 clamp(26px, 2.6vw, 42px)/1.02 var(--font-sator); letter-spacing: .02em; outline: none; }
.sview__meta { margin-top: 14px !important; font: 500 var(--fs-meta)/1.4 var(--font-grotesk); letter-spacing: .26em; color: #bdb8b0; text-transform: uppercase; }
.sview__rule { display: block; width: 48px; height: 2px; margin: 22px 0; background: var(--red); }
.sview__desc { white-space: pre-line; font: 400 var(--fs-body)/1.6 var(--font-body); color: #d6d1c8; max-width: 38ch; }
.sview__nav { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.sview__nav[hidden] { display: none; }
.sview__step { width: 44px; height: 44px; border: 1px solid rgba(241, 237, 228, .45); border-radius: 50%; background: none; color: var(--offwhite); font: 400 18px/1 var(--font-grotesk); cursor: pointer; }
.sview__step:hover, .sview__step:focus-visible { border-color: var(--red); color: #fff; outline: none; }
.sview__count { font: 500 12px/1 var(--font-grotesk); letter-spacing: .24em; color: #bdb8b0; }
.sview__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sview__thumbs:empty { display: none; }
.sview__thumb { position: relative; width: 58px; height: 44px; padding: 0; border: 0; overflow: hidden; background: #e9e4da; cursor: pointer; opacity: .55; transition: opacity .25s; }
.sview__thumb .sart { left: 8%; top: 8%; width: 84%; height: 84%; }
.sview__thumb .sit__ph, .sview__thumb .sit__img + .sit__ph { display: none; }
.sview__thumb[aria-current="true"], .sview__thumb:hover, .sview__thumb:focus-visible { opacity: 1; outline: 2px solid var(--red); outline-offset: 2px; }
.sview__close { position: absolute; top: clamp(16px, 3vw, 34px); left: clamp(16px, 3.2vw, 40px); display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 4px; border: 0; background: none; color: var(--offwhite); cursor: pointer; font: 500 var(--fs-meta)/1 var(--font-grotesk); letter-spacing: .3em; }
.sview__close span:first-child { font-size: 22px; letter-spacing: 0; }
.sview__close:hover, .sview__close:focus-visible { color: #fff; outline: none; }
.sview__close:focus-visible .sview__closew { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 6px; }

/* ---------- touch: no hover, captions of the focal items stay visible ---------- */
@media (hover: none) {
  .sit.is-primary .sit__cap, .sit--opera .sit__cap { opacity: .9; transform: translate(-50%, 0) rotate(calc(var(--tilt) * -1)); }
  .sit.is-primary .sit__cap::after { width: 40%; }
  .shead__cue { font-size: 0; } .shead__cue::before { content: 'SWIPE '; font-size: calc(16 * var(--u)); } .shead__cue span { font-size: calc(16 * var(--u)); }
}

/* ---------- phones: the wall comes closer, one important object per view ---------- */
@media (max-width: 760px) {
  .sview__box { grid-template-columns: 1fr; width: 100vw; height: 100%; gap: 18px; align-content: start; padding: 72px 20px 28px; overflow-y: auto; }
  .sview__art { max-height: 54vh; max-width: calc(54vh * var(--arw, 1) / var(--arh, 1)); }
  .sview__shade { background: rgba(6, 6, 6, .9); }
  .snear__pillar { width: 9vw; }
  .snear__string i { width: 4.5vw; height: 6vw; margin-left: -2.2vw; }
}

/* ---------- reduced motion: same archive, no travel effects ---------- */
.rm .sarc, .rm .sarc__stage, .rm .sarc__dark, .rm .sview, .rm .sview__box, .rm .sit__obj, .rm .sit__cap { transition: none !important; }
.rm .sarc__stage { transform: none; }
.rm .sset__glow, .rm .sset .led, .rm .snear__string i, .rm .shead__cue, .rm .sset__cone, .rm .sset__pool, .rm .szone__air, .rm .sfar__fog { animation: none !important; }
.rm .sset__cone i, .rm .sleaf { display: none; }
.rm .snear { display: none; }
.sarc:not(.is-open) * { animation-play-state: paused !important; }

/* ==========================================================================
   THE FOREST (js/sator/forest.js) — SATOR's scenery: a winter forest in the fog.
   Everything above about the wall (walls, wainscot, ceiling, far shelves,
   beams) is no longer drawn. Pure greys, white, black; red as an accent.
   ========================================================================== */
.sarc { background: #d4d4d4; color: #1b1a19;
  --font-sator: 'Grenze Gotisch', 'IM Fell English SC', Georgia, serif; }   /* SATOR's own display face: title, signs, work titles */
.sforest, .sforest-front { position: absolute; inset: 0; pointer-events: none; }
.sforest__sky { position: absolute; inset: 0;
  background: linear-gradient(to bottom, #b9b9b9 0%, #cfcfcf 22%, #e2e2e2 48%, #ececec 62%, #f1f1f1 100%); }
.sforest__layer { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.sforest__layer > svg { position: absolute; top: 0; left: 0; display: block; }
.sforest__layer--front > svg { position: absolute; top: 0; }
/* fog lying on each layer: a soft band at its base, a slow drift */
.sforest__fog { position: absolute; left: 0; right: 0; top: calc(var(--fy) - 26%); height: 34%;
  background: linear-gradient(to bottom, rgba(236, 236, 236, 0), rgba(238, 238, 238, var(--fa)) 70%, rgba(240, 240, 240, 0));
  animation: sforest-breathe 18s ease-in-out infinite alternate; }
@keyframes sforest-breathe { from { opacity: .75; transform: translateX(-1.5%); } to { opacity: 1; transform: translateX(1.5%); } }
/* the snowfield under everything the archive stands on */
.sforest__ground { position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, #e9e9e9 0, #f3f3f3 4%, #f7f7f7 30%, #fbfbfb 100%);
  box-shadow: 0 -18px 30px 6px rgba(240, 240, 240, .9); }
/* the foreground: grass sways, leaves tremble (only on screen: .is-on) */
.sforest__chunk { position: absolute; top: 0; height: 100%; }
.sforest__still { position: absolute; left: 0; top: 0; }
.sftuft, .sfleaf { position: absolute; overflow: visible; }
.sftuft { transform-origin: 50% 100%; animation: sforest-sway 3.5s ease-in-out infinite alternate; }
@keyframes sforest-sway { from { transform: rotate(calc(-1 * var(--sway, 4deg))); } to { transform: rotate(var(--sway, 5deg)); } }
.sfleaf { transform-origin: 4px 2px; transform: rotate(var(--r, 0deg)); animation: sforest-leaf 2.5s ease-in-out infinite alternate; }
@keyframes sforest-leaf { from { transform: rotate(calc(var(--r, 0deg) - 14deg)); } to { transform: rotate(calc(var(--r, 0deg) + 16deg)); } }
.sforest__chunk:not(.is-on) .sftuft, .sforest__chunk:not(.is-on) .sfleaf { display: none; }
.sforest__layer > .sforest__chunk { position: absolute; top: 0; height: 100%; }   /* off screen: gone, not just paused */
/* the falling snow */
.ssnow { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.ssnow__slide { position: absolute; top: 0; bottom: 0; left: 0; right: -512px; will-change: transform; }
.ssnow__fall { position: absolute; left: -512px; right: 0; top: calc(-1 * var(--fy)); bottom: 0; background-repeat: repeat; will-change: transform;
  animation: ssnow-fall 20s linear infinite; }
@keyframes ssnow-fall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--tile), var(--fy), 0); } }
.sarc__vignette { background: radial-gradient(ellipse 80% 75% at 45% 50%, transparent 60%, rgba(0, 0, 0, .16) 100%); }

/* Alix on the snow: no reflection, a soft shadow */
.sarc .salix__refl { display: none; }
.sarc .salix__shadow { background: radial-gradient(ellipse, rgba(60, 60, 60, .32), transparent 68%); }

/* THE TOTEMS: dark wooden posts planted in the snow, boards, small roofs with snow */
.stotem__post, .stotem__board, .stotem__roof { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.stotem__post { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 5px),
  linear-gradient(90deg, #151413, #2f2c29 38%, #24211f 70%, #121110); border-radius: 2px 2px 0 0;
  box-shadow: calc(5 * var(--u)) 0 calc(8 * var(--u)) rgba(0, 0, 0, .18); }
.stotem__post::before { content: ''; position: absolute; left: -10%; right: -10%; top: -3px; height: calc(8 * var(--u)); background: #f3f3f3; border-radius: 40%; }
.stotem__post i { position: absolute; left: 50%; bottom: calc(-14 * var(--u)); width: calc(150 * var(--u)); height: calc(36 * var(--u)); margin-left: calc(-75 * var(--u));
  background: radial-gradient(ellipse at 50% 60%, #ffffff 30%, rgba(255, 255, 255, .8) 50%, rgba(150, 150, 150, .25) 62%, transparent 72%); }
.stotem__board { background: repeating-linear-gradient(to bottom, #2a2724 0 calc(56 * var(--u)), #161514 calc(56 * var(--u)) calc(59 * var(--u))),
  #2a2724; border: calc(5 * var(--u)) solid #1a1917; border-radius: calc(3 * var(--u));
  box-shadow: calc(8 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .22); }
.stotem__roof { background: linear-gradient(to bottom, #f5f5f5 0 34%, #1c1a18 34% 78%, #0f0e0d 78%);
  clip-path: polygon(3% 34%, 50% 0, 97% 34%, 100% 100%, 0 100%); }
.stotem__roof { clip-path: none; border-radius: calc(6 * var(--u)) calc(6 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .25); }
/* the items sit on the boards */
/* shadows as box-shadows (a CSS drop-shadow filter would re-blur each whole picture when drawn) */
.sarc .sit__obj, .sarc .sit:hover .sit__obj, .sarc .sit:focus-visible .sit__obj { filter: none; }
.sarc .sit__paper, .sarc .sit--frame .sit__frame, .sarc .sit__bezel, .sarc .sit__card2, .sarc .sit--folder .sit__back, .sarc .sit--drawer .sit__front {
  box-shadow: calc(4 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .35); }
.sarc .sit--frame .sit__paper { box-shadow: inset 0 0 0 calc(24 * var(--u)) #ebe6dc, inset 0 0 0 calc(25 * var(--u)) rgba(0, 0, 0, .12); }

/* SIGNS: zone headings and the creator's name on a wooden board, on a post */
.shead:not(.shead--intro), .screator { padding: calc(26 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)); color: #f1ede4;
  background: repeating-linear-gradient(to bottom, #2a2724 0 calc(64 * var(--u)), #171614 calc(64 * var(--u)) calc(67 * var(--u))), #2a2724;
  border: calc(5 * var(--u)) solid #181715; border-radius: calc(4 * var(--u)); box-shadow: calc(8 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .25); }
.shead:not(.shead--intro)::before, .screator::before { content: ''; position: absolute; left: -2%; right: -2%; top: calc(-9 * var(--u)); height: calc(12 * var(--u));
  background: #f4f4f4; border-radius: 50% 50% 30% 30%; }
.shead:not(.shead--intro)::after, .screator::after { content: ''; position: absolute; left: calc(50% - 14 * var(--u)); top: 100%; width: calc(28 * var(--u)); height: var(--post, 0);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 5px), linear-gradient(90deg, #151413, #2f2c29 40%, #121110); z-index: -1; }
.shead:not(.shead--intro) .shead__word { color: #f1ede4; }
.shead:not(.shead--intro) .shead__n, .screator__role { color: var(--red-light); }
.shead:not(.shead--intro) .shead__note { color: #bdb8b0; }
.screator__aka { color: #cfcac1; }
.shead:not(.shead--intro) { width: max-content; max-width: calc(640 * var(--u)); }
.shead:not(.shead--intro) .shead__note { max-width: calc(420 * var(--u)); }

/* LANTERNS on posts, a halo in the fog and a pool of light on the snow */
.sset--lamp .post { fill: #24211f; } .sset--lamp .lamp { fill: #fff6e2; stroke: #1b1a19; stroke-width: 3; } .sset--lamp .snow { fill: #f5f5f5; }
.sset__halo { position: absolute; left: calc(60 * var(--u)); top: calc(-60 * var(--u)); width: calc(240 * var(--u)); height: calc(240 * var(--u)); pointer-events: none;
  background: radial-gradient(circle, rgba(255, 250, 235, .95), rgba(255, 248, 230, .35) 35%, transparent 70%); mix-blend-mode: screen;
  animation: sator-flicker 7s linear infinite; }
.sset--lamp .sset__pool { left: calc(-280 * var(--u)); top: calc(840 * var(--u)); width: calc(740 * var(--u)); height: calc(140 * var(--u)); margin-left: 0; }
.is-flicker .sset__halo { animation: sator-flicker-bad 4.3s steps(1) infinite; }

/* the boulder */
.sset--rock .rk { fill: #232323; } .sset--rock .snow { fill: #f4f4f4; }
.sset--rock svg { filter: url(#sator-ink); }

/* furniture outdoors: snow on top, a small roof on the tall ones */
.sset--shelf .kb { fill: #3a3633; }
.sset--shelf::before, .sset--cabinet::before { content: ''; position: absolute; left: -4%; right: -4%; top: calc(-34 * var(--u)); height: calc(36 * var(--u));
  background: linear-gradient(to bottom, #f5f5f5 0 36%, #1c1a18 36%); border-radius: calc(6 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .25); }
.sset--table::before, .sset--desk::before { content: ''; position: absolute; left: 1%; right: 1%; top: calc(-8 * var(--u)); height: calc(10 * var(--u)); background: #f5f5f5; border-radius: 50%; z-index: 1; }
.sset--shelf svg, .sset--cabinet svg, .sset--table svg, .sset--desk svg, .sset--chair svg { filter: none; }   /* (the ink filter re-rasterised them: too costly) */
.sset--doorway::after { content: ''; position: absolute; left: -12%; right: -12%; bottom: calc(-16 * var(--u)); height: calc(40 * var(--u));
  background: radial-gradient(ellipse at 50% 50%, #ffffff 35%, rgba(150, 150, 150, .25) 60%, transparent 72%); }
/* the brand reads on the pale sky */
body.in-sator .brand { color: #151413; text-shadow: 0 1px 10px rgba(255, 255, 255, .6); }
body.in-sator .brand:hover .brand__text, body.in-sator .brand:focus-visible .brand__text { color: #000; }
.rm .sforest__fog, .rm .sftuft, .rm .sfleaf { animation: none !important; }

/* the folders (HOUSE CONCEPT, EXPRESSIONS, LOCATION STUDIES…): black, the red tab and the pale
   sheets peeking out stay; a faint light edge keeps the cover readable against the dark totem */
.sit--folder .sit__back { background: #0d0d0d; }
.sit--folder .sit__cover { background: linear-gradient(170deg, #1f1e1d, #0b0b0b 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.sit--folder .sit__count { color: #bdb8b0; }

/* the creature's jaw (SATOR, behind the mountains): a slow growl, then a snap */
.sforest__jaw { position: absolute; background-repeat: no-repeat; background-position: 0 0; animation: sforest-jaw 7s step-end infinite; }
@keyframes sforest-jaw { 0% { background-position-x: 0.0%; } 34% { background-position-x: 0.0%; } 36% { background-position-x: 14.286%; } 38% { background-position-x: 28.571%; } 40% { background-position-x: 42.857%; } 42% { background-position-x: 57.143%; } 44% { background-position-x: 71.429%; } 56% { background-position-x: 71.429%; } 58% { background-position-x: 57.143%; } 60% { background-position-x: 42.857%; } 62% { background-position-x: 28.571%; } 64% { background-position-x: 14.286%; } 66% { background-position-x: 0.0%; } 80% { background-position-x: 0.0%; } 81% { background-position-x: 42.857%; } 82% { background-position-x: 85.714%; } 83% { background-position-x: 100.0%; } 88% { background-position-x: 100.0%; } 89% { background-position-x: 71.429%; } 90% { background-position-x: 42.857%; } 91% { background-position-x: 14.286%; } 92% { background-position-x: 0.0%; } 100% { background-position-x: 0.0%; } }
.rm .sforest__jaw { animation: none !important; }

/* ==========================================================================
   THE GRAVEYARD OF WORKS (js/sator/graves.js): items with `grave` are cemetery objects
   ========================================================================== */
.sit--grave { transform: none; }
.sit--grave .sit__obj { filter: none; overflow: visible; }
.sit--grave:hover .sit__obj, .sit--grave:focus-visible .sit__obj { transform: none; filter: none; }
.sit--grave:focus-visible .sit__obj { outline-offset: calc(14 * var(--u)); }
.sgrave { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sgrave__eng { fill: #e6e2da; text-anchor: middle; font-family: var(--font-sator); font-weight: 600; letter-spacing: .04em; transition: fill .35s ease; }
.sgrave__year { fill: #a9a49c; text-anchor: middle; font-family: var(--font-grotesk); font-weight: 500; letter-spacing: .28em; }
.sgrave__line { fill: none; stroke: #e6e2da; stroke-width: 2.2; opacity: .85; transition: stroke .35s ease, opacity .35s ease; }
.sgrave__crack { fill: none; stroke: #e6e2da; stroke-width: 2; stroke-linejoin: round; opacity: .7; }
.sgrave__web { fill: none; stroke: #8f8f8f; stroke-width: 1.2; opacity: .8; }
.sgrave__rule { stroke: var(--red); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--ease-out) .05s; }
.sit--grave:hover .sgrave__eng, .sit--grave:focus-visible .sgrave__eng { fill: #fff; }
.sit--grave:hover .sgrave__line, .sit--grave:focus-visible .sgrave__line { opacity: 1; }
.sit--grave:hover .sgrave__rule, .sit--grave:focus-visible .sgrave__rule { stroke-dashoffset: 0; }
/* the crow turns its head now and then (and when you come near) */
.sgrave__crowhead { transform-box: fill-box; transform-origin: 85% 90%; animation: sgrave-crow 9s ease-in-out infinite; }
@keyframes sgrave-crow { 0%, 78%, 100% { transform: rotate(0); } 81% { transform: rotate(-16deg); } 86% { transform: rotate(-16deg); } 89% { transform: rotate(10deg); } 94% { transform: rotate(10deg); } }
.sit--grave:hover .sgrave__crowhead { animation-duration: 2.4s; }
.sset--vase svg, .sset--bones svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rm .sgrave__crowhead { animation: none; }
.sgate__img { opacity: calc(.25 + var(--done, 0) * .55); transition: opacity .6s ease; }
.sgate__glow { opacity: calc(.45 + var(--done, 0) * .55); }
.sit--grave:hover .sgate__img, .sit--grave:focus-visible .sgate__img { opacity: .95; }
/* the section arch (zone sign: 'arch') */
.sarch { position: absolute; z-index: 0; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(680 * var(--u)); height: calc(1000 * var(--u)); pointer-events: none; }
.sarch svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sarch__word { fill: #141414; font-family: var(--font-sator); font-weight: 700; letter-spacing: .12em; }
.sarch__n { fill: #e6e2da; text-anchor: middle; font-family: var(--font-grotesk); font-weight: 600; letter-spacing: .08em; }
.sarch__note { fill: #d6d1c8; text-anchor: middle; font-family: var(--font-grotesk); font-weight: 500; letter-spacing: .2em; }
/* the creator's memorial (CREATOR) */
.smemorial { position: absolute; z-index: 1; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); pointer-events: none; }
.smemorial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.smem__role { fill: #d24a4f; text-anchor: middle; font-family: var(--font-grotesk); font-weight: 600; letter-spacing: .28em; }
.smem__aka { fill: #c9c4bb; text-anchor: middle; font-family: var(--font-balloon); }

/* the ground fog (js/sator/forest.js, config forest.groundFog): in front of the graves, behind Alix.
   The strip fades in from the top (no hard edge over the stones) and thins out at the very bottom. */
.sgroundfog { position: absolute; left: 0; right: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 22%, #000 62%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 22%, #000 62%, #000 82%, transparent 100%); }
.sgroundfog__layer { position: absolute; top: 0; bottom: 0; left: 0; will-change: transform; }
.sgroundfog__band { position: absolute; left: 0; right: 0; background-repeat: repeat-x; will-change: transform;
  animation: sgroundfog-drift 120s linear infinite; }
@keyframes sgroundfog-drift { from { translate: 0 0; } to { translate: calc(-1 * var(--tile)) 0; } }
.rm .sgroundfog__band { animation: none; }
body.in-room:not(.in-sator) .sgroundfog__band { animation-play-state: paused; }