/* ============================================================
   CONCEPTO P — THE HOUSE STYLE (v3)
   Black and white. The house itself has no colour: paper, ink, and the
   greys between them. Colour on screen belongs to the chemistry and the
   light a room is lit by — the darkroom's red, the ultraviolet lamp, the
   blue that arrives in water, the fruit — and nothing else.
   ============================================================ */
:root{
  --void:#0A0A0A; --char:#141414; --graphite:#232323; --iron:#3A3A3A;
  --smoke:#6F6F6C; --silver:#A3A29E; --fog:#CFCDC8;
  --paper:#ECEAE5; --chalk:#F6F5F2; --light:#F5F5F4; --ink:#111111;
  /* legacy names, kept so older rooms read the new values */
  --ash:var(--smoke); --pewter:var(--silver);

  /* the chemistry's own colours — the only colour in the house, and every
     one of them is a real substance or a real lamp. The -rgb forms exist
     so a process can be laid over a surface at a chosen strength. */
  --safe:#B3140E; --safe-deep:#2A0302; --safe-glow:#FF3B24; --safe-rgb:179,20,14;
  --uv:#7B4DFF; --uv-glow:#B9A2FF; --uv-rgb:123,77,255;
  --sun:#E0BE84; --sun-glow:#FFF0CF; --sun-rgb:224,190,132;
  --prussian:#1B3D78; --prussian-rgb:27,61,120;          /* cyanotype, washed */
  --lumen:#8C5A6E; --lumen-rgb:140,90,110;               /* unfixed silver, hours of light */
  --chemigram:#4A4034; --chemigram-rgb:74,64,52;         /* developer and fixer, worked by hand */
  --kiln:#C2762E; --kiln-rgb:194,118,46;                 /* iron oxide, fired */

  /* the tooth of the sheet itself: a real fibre, laid over every paper
     surface in the house so that none of them is ever a flat fill */
  --fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='0.052'/%3E%3C/svg%3E");

  --display:'Instrument Serif','Bodoni Moda',Didot,'Bodoni 72',Georgia,serif;
  --serif:'Bodoni Moda','NWT Bodoni','Bodoni 72',Didot,'Bodoni MT',Georgia,serif;
  --mono:'IBM Plex Mono','SF Mono','SFMono-Regular',Menlo,Consolas,ui-monospace,monospace;
  --ease:cubic-bezier(.22,.68,.26,1);
  --swift:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px,3.4vw,56px);
  --margin:max(7vw,20px);
  --nav-h:72px;
}
@media (max-width:759px){ :root{ --nav-h:56px; --margin:max(5vw,16px); } }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--void); -webkit-text-size-adjust:100%; }
html.is-overlaid{ overflow:hidden; }
body{ background:var(--void); color:var(--fg); font-family:var(--serif); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
[data-tone="dark"]{
  --fg:var(--paper); --fg2:var(--silver); --fg3:rgba(236,234,229,.46); --rule:rgba(236,234,229,.18);
  --deb-hi:rgba(163,162,158,.5); --deb-lo:rgba(10,10,10,.95); --halo:rgba(10,10,10,.7);
}
[data-tone="light"]{
  --fg:var(--ink); --fg2:var(--smoke); --fg3:rgba(17,17,17,.46); --rule:rgba(17,17,17,.20);
  --deb-hi:rgba(246,245,242,.95); --deb-lo:rgba(17,17,17,.3); --halo:rgba(236,234,229,.8);
}
[data-tone="red"]{
  --fg:#FFD9D2; --fg2:rgba(255,160,146,.72); --fg3:rgba(255,160,146,.4); --rule:rgba(255,120,100,.22);
  --deb-hi:rgba(255,90,70,.3); --deb-lo:rgba(10,0,0,.9); --halo:rgba(20,0,0,.6);
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }
::selection{ background:rgba(111,111,108,.35); }
:focus-visible{ outline:1px solid var(--fg2); outline-offset:4px; }
[hidden]{ display:none !important; }

/* ============================================================
   REGISTERS
   ============================================================ */
.display{ font-family:var(--display); font-weight:400; line-height:.86; letter-spacing:-.015em; }
.giant{ font-family:var(--display); font-weight:400; line-height:.8; letter-spacing:-.02em; font-size:clamp(88px,17vw,300px); }
.reading{ font-family:var(--serif); font-size:clamp(17px,1.25vw,19px); line-height:1.65; max-width:62ch; }
.mono{ font-family:var(--mono); font-size:10.5px; line-height:1.6; letter-spacing:.2em; font-weight:400; }
@media (min-width:1400px){ .mono{ font-size:11.5px; } }
.deboss{ color:var(--fg); }
.deboss-blind{ color:var(--graphite); }
.emboss{ color:var(--paper); text-shadow:-1px -1px 0 var(--chalk), 1px 1px 0 rgba(17,17,17,.22); }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sr-focusable{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sr-focusable:focus{ width:auto; height:auto; clip:auto; z-index:40; left:var(--gutter); top:24px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; }

/* the plain control: a hairline rectangle in mono */
.rule-button{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; line-height:1;
  padding:11px 16px; border:1px solid var(--rule); color:var(--fg); background:transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.rule-button:hover{ border-color:var(--fg); }
.rule-button.is-solid{ background:var(--fg); color:var(--void); border-color:var(--fg); }
.rule-button:disabled{ opacity:.35; cursor:default; }

/* ============================================================
   NAVIGATION
   ============================================================ */
#nav{ position:fixed; left:0; right:0; top:0; height:var(--nav-h); z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:18px; padding:0 var(--gutter); pointer-events:none; color:var(--fg);
  transition:color .35s var(--ease); }
#nav.is-hidden{ visibility:hidden; }
#nav a, #nav button{ pointer-events:auto; }
.nav-mark{ font-family:var(--display); font-size:34px; line-height:1; }
.nav-links{ display:flex; gap:clamp(14px,2.4vw,34px); align-items:center; margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; }
.nav-links a{ color:var(--fg2); padding:10px 0; position:relative; transition:color .3s var(--ease); }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:6px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--swift); }
.nav-links a:hover, .nav-links a.is-here{ color:var(--fg); }
.nav-links a.is-here::after{ transform:scaleX(1); }
.nav-links a, .nav-mark{ text-shadow:0 0 12px var(--halo), 0 0 3px var(--halo); }
@media (max-width:759px){ .nav-links{ font-size:9px; letter-spacing:.14em; gap:14px; } .nav-mark{ font-size:28px; } }

/* ============================================================
   THE FOOT
   ============================================================ */
/* the footer: a single quiet line at the very end of a page — no rule,
   no mark, nothing that repeats the nav. The list is a word until it is wanted. */
.foot{ position:relative; background:var(--void); color:var(--paper); }
.foot-row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 40px; padding:clamp(28px,5vh,54px) var(--gutter) clamp(24px,4vh,40px); }
.foot-meta{ display:flex; gap:28px; color:var(--smoke); font-size:9px; letter-spacing:.24em; }
.foot-meta a{ transition:color .3s var(--ease); }
.foot-meta a:hover{ color:var(--paper); }
.foot-join{ font-size:9px; letter-spacing:.28em; color:var(--smoke); transition:color .3s var(--ease); order:3; }
.foot-join:hover{ color:var(--paper); }
.foot-list{ display:none; align-items:baseline; gap:16px; flex-basis:100%; order:4; padding-top:8px; }
.foot.is-listing .foot-list{ display:flex; }
.foot-list input{ flex:1; max-width:360px; background:transparent; border:0; border-bottom:1px solid rgba(236,234,229,.28); outline:none; padding:8px 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--paper); }
.foot-list input::placeholder{ color:rgba(236,234,229,.36); }
.foot-list input:focus{ border-bottom-color:var(--paper); }
.foot-send{ font-size:9px; letter-spacing:.28em; color:var(--silver); }
.foot-ack{ color:var(--silver); white-space:nowrap; font-size:9.5px; }
@media (max-width:759px){ .foot-row{ grid-template-columns:1fr; gap:18px; } .foot-meta{ justify-self:start; } }

/* ============================================================
   THE ARCHIVE — eight lenses in scope
   ============================================================ */
.archive-room{ position:relative; height:100vh; height:100svh; min-height:560px; background:var(--void); overflow:hidden; }
.archive-wall{ position:absolute; inset:0; }
.archive-head{ position:absolute; left:var(--gutter); top:calc(var(--nav-h) + 4px); pointer-events:none; transition:opacity .5s var(--ease); }
.archive-title{ color:var(--paper); }
.archive-count{ color:var(--silver); font-size:9.5px; }
.archive-foot{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(16px,3vh,28px); display:flex; gap:28px; transition:opacity .5s var(--ease); }
.archive-foot a{ color:var(--silver); }
.archive-foot a:hover{ color:var(--paper); }
.archive-room.is-open .archive-head, .archive-room.is-open .archive-foot{ opacity:0; pointer-events:none; }

.scope{ position:absolute; inset:0; overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:pan-y; outline:none; cursor:crosshair; }
.scope.is-open{ touch-action:none; cursor:grab; }
.scope.is-open:active{ cursor:grabbing; }
.scope-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.scope-hits{ position:absolute; inset:0; pointer-events:none; }
.scope-hit{ position:absolute; border-radius:50%; pointer-events:auto; cursor:crosshair; }
.scope-hit:focus-visible{ outline:1px solid var(--silver); outline-offset:8px; }
.scope.is-open .scope-hits{ visibility:hidden; }
/* a caption belongs below the glass, never inside it, and never wider
   than the cell it names */
.scope-cap{ position:absolute; left:0; top:0; transform:translateX(-50%);
  max-width:var(--cap-w, 22ch); text-align:center; text-wrap:balance;
  color:var(--paper); opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  text-shadow:0 1px 3px rgba(10,10,10,.8); }
.scope-cap.is-on{ opacity:1; }
.scope-nums{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s var(--ease); }
.scope.is-coarse .scope-nums{ opacity:1; }
.scope.is-open .scope-nums{ opacity:0; }
.scope-num{ position:absolute; transform:translateX(-50%); color:var(--silver); font-size:9px; }
.scope-num.is-empty{ color:var(--smoke); }
.scope-back{ position:absolute; left:var(--gutter); top:calc(var(--nav-h) + 4px); color:var(--paper); opacity:0; pointer-events:none; padding:6px 0; transition:opacity .5s var(--ease); }
.scope.is-open .scope-back{ opacity:.7; pointer-events:auto; }
.scope.is-open .scope-back:hover{ opacity:1; }
.scope.is-flat .scope-hit{ background:rgba(236,234,229,.06); overflow:hidden; }
.scope-flat-obj{ width:70%; height:auto; margin:15%; }

/* ============================================================
   CARRIED OVER FROM v2 — record plate, reader, forms, equipment, about
   ============================================================ */
#veil{ position:fixed; inset:0; background:var(--void); z-index:90; pointer-events:none; opacity:1; }

.loupe{ position:fixed; left:0; top:0; z-index:80; pointer-events:none; opacity:0; will-change:transform,opacity; }
.loupe-gl{ position:absolute; inset:0; }
/* what the glass throws: the key is upper left, so it falls lower right.
   A core where the bezel almost touches the surface, and a wide soft
   penumbra past it — never one flat disc of grey. */
.loupe-contact{ position:absolute; inset:0; border-radius:50%; transform:translate(9px,15px);
  background:radial-gradient(circle, rgba(10,10,10,.30) 0%, rgba(10,10,10,.19) 48%, rgba(10,10,10,0) 72%);
  filter:blur(7px); }
.loupe-contact::after{ content:""; position:absolute; inset:11%; border-radius:50%;
  transform:translate(-5px,-8px);
  background:radial-gradient(circle, rgba(8,8,8,.50) 0%, rgba(8,8,8,.30) 56%, rgba(8,8,8,0) 78%);
  filter:blur(2.5px); }
@media (pointer:coarse){ .loupe{ pointer-events:auto; touch-action:none; } }
.is-loupe, .is-loupe *{ cursor:none; }
[data-inspect]{ cursor:zoom-in; }
.paper{ position:relative; background-color:var(--paper);
  background-image:var(--fibre), var(--paper-photo, none);
  background-size:180px 180px, 760px 760px; color:var(--ink);
  --fg:var(--ink); --fg2:var(--ash); --fg3:rgba(17,17,17,.46); --rule:rgba(17,17,17,.24);
  --deb-hi:rgba(246,245,242,.95); --deb-lo:rgba(17,17,17,.30);
  padding:calc(var(--nav-h) + 6vh) var(--margin) 14vh; }
.running-head{ position:absolute; left:var(--margin); right:var(--margin); top:calc(var(--nav-h) + 8px);
  border-top:1px solid var(--rule); padding-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--ash); }
/* ============================================================
   ARRIVAL — the front of the house
   A cover: the name pressed into a sheet, one work, P's sentence, three
   doors. The light travels one way down the page, paper into dark, so
   that every other room already feels like the same building.
   ============================================================ */
.page-landing{ background:var(--void); }
.ar{ position:relative; }

/* about: a negative in the dark, before the document */
.fid{ position:relative; height:100svh; min-height:480px; overflow:hidden;
  background:#0A0806; cursor:crosshair; touch-action:none; }
.fid.is-over{ cursor:pointer; }
.fid-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.fid-type{ position:absolute; left:var(--gutter); bottom:clamp(40px,8vh,90px);
  display:grid; gap:12px; pointer-events:none; color:var(--paper); }
.fid-k{ font-size:9.5px; letter-spacing:.3em; color:var(--smoke); }
.fid-t{ font-size:clamp(46px,8vw,120px); line-height:.9; }
.fid-s{ font-size:9px; letter-spacing:.32em; color:rgba(236,234,229,.3); }
/* ============================================================
   THE EMISSIVE WALL
   ============================================================ */
.wells{ position:absolute; inset:0; overflow:hidden; user-select:none; -webkit-user-select:none; }
.wells-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.wells-lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.wells-lines line{ stroke:rgba(163,162,158,.34); stroke-width:1; }
.wells-lines line.wall-line{ stroke:rgba(163,162,158,.22); }
.wells-lines line.leader{ stroke:rgba(163,162,158,.18); }
.wells-lines circle{ fill:rgba(163,162,158,.6); }
.wells-tags, .wells-captions, .wells-hits{ position:absolute; inset:0; pointer-events:none; }
.well-tag{ position:absolute; font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:rgba(163,162,158,.7); white-space:nowrap; }
.well-hit{ position:absolute; border-radius:50%; pointer-events:auto; cursor:pointer; }
.well-hit:focus-visible{ outline:1px solid var(--pewter); outline-offset:8px; }
.well-caption{ position:absolute; display:flex; flex-direction:column; align-items:center; text-align:center; font-family:var(--mono); color:var(--pewter); }
.well-caption.is-right{ align-items:flex-end; text-align:right; }
.wc-line{ display:block; font-size:9.5px; letter-spacing:.14em; line-height:1.55; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-0{ color:rgba(236,234,229,.72); letter-spacing:.18em; }
.wc-1{ color:rgba(163,162,158,.66); letter-spacing:.06em; }
.well-caption.is-on .wc-0{ color:var(--paper); }
.well-caption.is-on .wc-1{ color:var(--pewter); }
.well-caption.is-empty .wc-0{ color:rgba(163,162,158,.7); }
.wells.is-flat .well-hit{ background:rgba(236,234,229,.06); box-shadow:inset 0 8px 16px rgba(10,10,10,.8); overflow:hidden; }
.well-flat-obj{ width:70%; height:auto; margin:15%; }
@media (max-width:759px){
  .wc-line{ font-size:8.5px; }
  .well-caption:not(.is-right){ align-items:flex-start; text-align:left; }
  .wc-1{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
}
.spec-card{ position:relative; flex:none; width:min-content; color:var(--fg); }
.spec-no{ display:flex; gap:18px; margin-bottom:34px; white-space:nowrap; font-family:var(--mono); font-size:10.5px; letter-spacing:.26em; }
.spec-fig{ color:var(--fg2); letter-spacing:.14em; }
.spec-frame{ position:relative; min-height:120px; }
.spec-frame.is-empty{ border:1px solid var(--rule); }
.spec-img{ position:absolute; left:0; top:0; display:block; transform-origin:50% 50%; }
.spec-card:not(.is-ready) .spec-frame{ min-height:40vh; }
.spec-root .spec-img{ filter:drop-shadow(0 2px 3px rgba(17,17,17,.12)) drop-shadow(6px 5px 10px rgba(17,17,17,.06)); }
.hair{ position:absolute; background:var(--rule); pointer-events:none; }
.hair-l, .hair-r{ height:1px; }
.hair-t, .hair-b{ width:1px; }
.spec-rule{ position:absolute; pointer-events:none; }
.spec-block{ display:grid; grid-template-columns:minmax(8.6em,auto) 1fr; column-gap:1.4em; row-gap:.5em; margin-top:64px;
  font-family:var(--mono); font-size:10.5px; line-height:1.55; letter-spacing:.1em; }
.spec-block dt{ color:var(--fg2); letter-spacing:.2em; }
.spec-block dt a:hover{ color:var(--fg); }
.spec-block dd{ color:var(--fg); min-width:0; overflow-wrap:anywhere; }
.spec-block dd.is-diff::before{ content:"\2260\00a0"; color:var(--fg2); }
.spec-foot{ display:flex; flex-wrap:wrap; gap:.6em 1.8em; margin-top:22px; align-items:baseline; }
.spec-link{ color:var(--fg2); border-bottom:1px solid var(--rule); padding-bottom:1px; }
.spec-link:hover{ color:var(--fg); }
.spec-plain{ margin-top:52px; color:var(--fg); letter-spacing:.12em; }
.spec-plain + .spec-block{ margin-top:20px; }
.spec-agent{ display:flex; align-items:center; gap:16px; margin-top:52px; }
.spec-agent canvas{ width:64px; height:64px; background:var(--ink); }
.spec-agent + .spec-block{ margin-top:22px; }
.sibling-group{ flex:none; }
.sibling-head{ margin-bottom:28px; color:var(--fg2); white-space:nowrap; }
.sibling-row{ display:flex; gap:clamp(48px,5vw,96px); align-items:flex-start; }
@media (max-width:899px){ .sibling-row{ gap:40px; } .sibling-head{ white-space:normal; max-width:86vw; } }
/* a binding: type only, until the edition exists */
.binding{ padding-top:16vh; }
.binding-fig{ color:var(--ash); }
.binding-line{ display:grid; grid-template-columns:minmax(10em,auto) 1fr; column-gap:4vw; margin-top:18px; }
.binding-name{ letter-spacing:.3em; }
.binding-range{ display:flex; flex-direction:column; letter-spacing:.12em; }
.binding-status{ color:var(--ash); }
.binding-no{ color:var(--ash); margin:10px 0 34px; }
.binding-list{ list-style:none; margin-top:6vh; display:grid; gap:8px; }
.binding-list a{ border-bottom:1px solid var(--rule); }
.binding-list span{ color:var(--ash); }
.reader{ margin-top:6vh; outline:none; }
.reader-spread{ position:relative; display:flex; justify-content:center; align-items:flex-start; min-height:30vh; cursor:pointer; user-select:none; }
.reader-page{ display:block; box-shadow:0 22px 50px rgba(17,17,17,.16), 0 2px 6px rgba(17,17,17,.10); background:var(--chalk); }
.reader-gutter{ position:absolute; left:50%; top:0; bottom:0; width:72px; margin-left:-36px; pointer-events:none;
  background:linear-gradient(90deg, rgba(17,17,17,0) 0%, rgba(17,17,17,.10) 38%, rgba(17,17,17,.28) 50%, rgba(17,17,17,.10) 62%, rgba(17,17,17,0) 100%); }
.reader.is-cover .reader-gutter, .reader.is-single .reader-gutter, .reader.is-unread .reader-gutter{ display:none; }
.reader.is-cover .reader-left{ visibility:hidden; }
.reader.is-single .reader-right{ display:none; }
.reader-bar{ display:flex; justify-content:center; gap:28px; align-items:center; margin-top:26px; }
.reader-status{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ash); min-width:14em; text-align:center; }
.reader-unread{ padding:6vh 0; text-align:center; color:var(--ash); }
.reader-unread a{ border-bottom:1px solid var(--rule); color:var(--ink); }
/* ============================================================
   A RECORD — the plate
   ============================================================ */
.record-page{ position:relative; transition:transform .55s var(--ease); }
.record-page.is-leaving.to-left{ transform:translate3d(-100vw,0,0); transition:transform .7s var(--ease); }
.record-page.is-leaving.to-right{ transform:translate3d(100vw,0,0); transition:transform .7s var(--ease); }
.record-page.is-arriving.from-right{ transform:translate3d(60vw,0,0); transition:none; }
.record-page.is-arriving.from-left{ transform:translate3d(-60vw,0,0); transition:none; }
.advance-film{ position:fixed; left:0; right:0; top:46vh; height:44px; z-index:85; pointer-events:none; background:
  radial-gradient(ellipse 5px 4px at 50% 8px, var(--light) 90%, transparent 100%) 0 0/24px 44px repeat-x,
  radial-gradient(ellipse 5px 4px at 50% 36px, var(--light) 90%, transparent 100%) 0 0/24px 44px repeat-x,
  var(--void); animation:film .9s linear forwards; }
.advance-film.is-rewind{ animation-direction:reverse; }
@keyframes film{ from{ background-position:0 0, 0 0, 0 0; opacity:1; } 80%{ opacity:1; } to{ background-position:-480px 0, -480px 0, 0 0; opacity:0; } }

.plate{ background:var(--chalk); padding-top:calc(var(--nav-h) + 12vh); }
.plate-ground{ position:relative; min-height:max(118vh, 900px); }
.plate-doc{ position:relative; width:min(48vw, 640px); padding:34px 34px 30px; background:rgba(246,245,242,.55);
  box-shadow: inset 0 0 0 1px rgba(246,245,242,.9), inset 1px 1px 0 2px rgba(245,245,244,.8), 0 1px 1px rgba(17,17,17,.10), 4px 10px 22px rgba(17,17,17,.12), 16px 30px 60px rgba(17,17,17,.08); }
.plate-doc::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg, rgba(246,245,242,.35) 0%, rgba(246,245,242,0) 28%, rgba(246,245,242,0) 70%, rgba(246,245,242,.18) 100%); }
.bolt{ position:absolute; width:12px; height:12px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 35% 30%, #D6D6D4 0%, #A3A29E 45%, #444444 100%); box-shadow:1px 2px 3px rgba(17,17,17,.35); }
.bolt-tl{ left:12px; top:12px; } .bolt-tr{ right:12px; top:12px; } .bolt-bl{ left:12px; bottom:12px; } .bolt-br{ right:12px; bottom:12px; }
.plate-sheet{ position:relative; background:var(--paper); padding:30px 28px; color:var(--ink); --fg2:var(--ash); --rule:rgba(17,17,17,.2); }
.doc-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; border-bottom:1px solid var(--rule); padding-bottom:16px; }
.doc-no{ font-size:clamp(26px,3.2vw,40px); letter-spacing:.3em; font-weight:400; }
.doc-type{ color:var(--ash); }
.doc-fig{ width:100%; color:var(--ash); }
.doc-fields{ border-collapse:collapse; margin-top:14px; width:100%; }
.doc-fields td{ padding:4px 0; vertical-align:baseline; letter-spacing:.1em; }
.doc-n{ width:3em; color:var(--ash); }
.doc-k{ width:8.5em; color:var(--ash); letter-spacing:.16em; }
.doc-tree{ margin:22px 0 6px; border-top:1px solid var(--rule); padding-top:10px; }
.doc-row{ display:grid; grid-template-columns:4.2em 9.6em 1fr; column-gap:1em; padding:3px 0; letter-spacing:.08em; }
.doc-row.is-first{ margin-top:12px; }
.doc-row.is-first:first-child{ margin-top:0; }
.doc-b a{ border-bottom:1px solid var(--rule); }
.doc-l a{ color:var(--ash); letter-spacing:.16em; }
.doc-l a:hover, .doc-b a:hover{ color:var(--ink); }
.doc-note{ margin:18px 0; color:var(--ash); letter-spacing:.1em; }
.doc-foot{ border-top:1px solid var(--rule); margin-top:14px; padding-top:6px; }
.doc-foot a{ border-bottom:1px solid var(--rule); }
.doc-diagram{ margin-top:22px; border-top:1px solid var(--rule); padding-top:12px; font-size:8.5px; }
.dia-row{ display:grid; grid-template-columns:4.2em repeat(8, 1fr); align-items:center; height:14px; }
.dia-head{ color:var(--ash); }
.dia-cell{ position:relative; height:100%; text-align:center; }
.dia-row:not(.dia-head) .dia-cell::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--rule); }
.dia-cell.is-on::after{ content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:var(--ink); }
.plate-block{ position:absolute; left:calc(var(--x) * 100%); top:calc(var(--y) * 100%); width:calc(var(--w) * 100%); display:block; }
.block-acrylic{ position:relative; display:block; padding:9%; background:rgba(246,245,242,.4);
  box-shadow: inset 0 0 0 1px rgba(246,245,242,.95), inset 2px 2px 0 1px rgba(245,245,244,.7), 2px 6px 12px rgba(17,17,17,.16), 10px 20px 36px rgba(17,17,17,.10); }
.block-acrylic::after{ content:""; position:absolute; inset:0; background:linear-gradient(140deg, rgba(246,245,242,.4), rgba(246,245,242,0) 40%); pointer-events:none; }
.block-img{ display:block; width:100%; height:auto; }
.block-cap{ display:block; margin-top:10px; color:var(--ash); font-size:9.5px; }
.plate-block:hover .block-cap{ color:var(--ink); }
.plate-app{ position:absolute; left:calc(var(--x) * 100%); top:calc(var(--y) * 100%); width:calc(var(--w) * 100%); height:auto; transform:rotate(var(--r)); pointer-events:none; }
.advance{ display:flex; align-items:center; gap:18px; margin-top:8vh; }
.advance-sprockets{ flex:1; height:22px; background:radial-gradient(ellipse 4px 3px at 50% 50%, var(--light) 90%, transparent 100%) 0 0/18px 22px repeat-x, var(--ink); }
.counter{ display:inline-flex; }
.counter-col{ display:inline-block; height:1.15em; overflow:hidden; vertical-align:bottom; }
.counter-cell{ display:block; height:1.15em; line-height:1.15em; }
.counter-col.is-rolling .counter-cell{ transform:translateY(-100%); transition:transform .36s var(--ease); }
@media (max-width:899px){
  .plate-ground{ min-height:0; display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start; }
  .plate-doc{ width:100%; padding:22px 16px; }
  .plate-block{ position:relative; left:auto; top:auto; width:calc(var(--w) * 220%); max-width:44%; }
  .plate-app{ position:relative; left:auto; top:auto; width:36%; }
  .doc-row{ grid-template-columns:3.6em 1fr; }
  .doc-v{ grid-column:2; }
}

.lineage{ position:relative; height:100vh; min-height:680px; background:var(--void); overflow:hidden; }
.lineage-head{ position:absolute; left:var(--margin); top:calc(var(--nav-h) + 6px); z-index:2; color:var(--pewter); }
.lineage-wall{ position:absolute; inset:0; top:calc(var(--nav-h) + 30px); }
.flow{ padding-top:14vh; min-height:60vh; }
.flow-body{ max-width:560px; margin-top:6vh; }
.flow-lead{ margin-bottom:18px; letter-spacing:.12em; }
.flow-form{ display:flex; flex-direction:column; gap:10px; }
.flow-form .spec-block{ margin:10px 0 18px; }
.flow-form label{ margin-top:10px; color:var(--ash); }
.flow-form input, .flow-form textarea{ background:transparent; border:0; border-bottom:1px solid var(--rule); padding:8px 0; outline:none;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; resize:vertical; }
.flow-form input:focus, .flow-form textarea:focus{ border-bottom-color:var(--ink); }
.flow-note{ margin:14px 0 4px; color:var(--ash); }
.flow-actions{ display:flex; gap:14px; margin-top:12px; }
.flow-steps{ list-style:none; display:grid; gap:10px; margin:28px 0; counter-reset:s; color:var(--ash); }
.flow-steps li{ counter-increment:s; }
.flow-steps li::before{ content:counter(s, decimal-leading-zero) "  "; }
.flow-steps li.is-done{ color:var(--ink); }
.flow-body .reading{ margin:18px 0; }
/* ============================================================
   EQUIPO — the overlay behind the iris
   ============================================================ */
.equipo-overlay{ position:fixed; inset:0; z-index:70; overflow-y:auto; color:var(--paper);
  --fg:var(--paper); --fg2:var(--pewter); --rule:rgba(236,234,229,.20);
  background:radial-gradient(90% 70% at 0% 0%, rgba(111,111,108,.42) 0%, rgba(17,17,17,.7) 42%, rgba(10,10,10,1) 90%), var(--void);
  padding:calc(var(--nav-h) + 4vh) var(--margin) 12vh; }
.eq-head{ display:flex; justify-content:space-between; align-items:center; }
.eq-rule{ font-style:italic; font-size:clamp(30px,4vw,58px); max-width:24ch; margin:8vh 0 10vh; line-height:1.05; }
.eq-wall{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(260px,80vw),1fr)); gap:6vh 3vw; }
.eq-niche{ position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 20px 18px; text-align:center;
  background:linear-gradient(180deg, rgba(10,10,10,.55), rgba(17,17,17,.25)); box-shadow:inset 0 14px 22px rgba(10,10,10,.75), inset 0 -1px 0 rgba(236,234,229,.08); }
.eq-niche canvas{ width:100%; height:auto; }
.eq-niche:hover .eq-cap{ color:var(--paper); }
.eq-cap{ color:var(--pewter); font-size:9.5px; }
.eq-detail{ position:fixed; inset:0; z-index:2; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); background:var(--void); }
.eq-view{ position:relative; min-height:60vh; cursor:grab; touch-action:pan-y; }
.eq-view canvas{ position:absolute; inset:0; display:block; }
.eq-text{ padding:calc(var(--nav-h) + 10vh) var(--margin) 8vh 4vw; display:flex; flex-direction:column; gap:22px; }
.eq-name{ font-size:13px; letter-spacing:.3em; }
.eq-text .spec-block{ margin-top:10px; }
.eq-detail + * { }
@media (max-width:899px){ .eq-detail{ grid-template-columns:1fr; overflow-y:auto; } }
.equipo-overlay .eq-close{ position:relative; z-index:3; }
/* ============================================================
   ABOUT — a document. No motion, no light.
   ============================================================ */
.about{ min-height:100vh; padding-top:calc(var(--nav-h) + 14vh); }
.about-grid{ display:grid; grid-template-columns:minmax(200px, 280px) minmax(0, 1fr); gap:clamp(40px,9vw,160px); }
.about-house{ letter-spacing:.3em; margin-bottom:28px; }
.masthead{ font-size:10px; line-height:1.55; letter-spacing:.06em; }
.masthead dt{ letter-spacing:.24em; color:var(--ash); margin-top:16px; }
.masthead a{ border-bottom:1px solid rgba(17,17,17,.3); }
.letter .reading + .reading{ margin-top:1.1em; }
.letter-salutation{ font-style:italic; margin-bottom:1.4em; }
.letter-sign{ font-style:italic; font-size:48px; margin-top:.6em; }
@media (max-width:759px){ .about-grid{ grid-template-columns:1fr; } .letter{ order:-1; } }

.missing{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.missing-path{ color:var(--ash); }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============================================================
   THE PROCESS — one continuous room
   ============================================================ */
.pj{ position:relative; }
.st{ position:relative; }

/* ---------- the one light the whole journey is lit by ----------
   Eight lamps in a fixed layer, cross-fading by how much of the screen
   their stage covers. The room changes with the scroll; it never cuts. */
.pj-light{ position:fixed; inset:0; z-index:0; background:var(--void); overflow:hidden; }
.pj-lamp{ position:absolute; inset:0; opacity:0; will-change:opacity; }
.pj-stage{ position:absolute; inset:0; }
.pj-stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.pj-flow{ position:relative; z-index:1; }
.pj-st{ position:relative; }

/* the name, riding over the light — never a card, never a break */
.pj-open{ position:relative; height:100vh; height:100svh; min-height:540px; pointer-events:none; }
.pj-type{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(64px,10vh,110px);
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px 40px; }
.pj-no{ grid-column:1/-1; color:var(--silver); text-shadow:0 1px 2px rgba(10,10,10,.5); }
.pj-name{ color:var(--paper); margin-left:-.04em;
  text-shadow:0 1px 0 rgba(255,255,255,.16), 0 2px 26px rgba(10,10,10,.55), 0 1px 3px rgba(10,10,10,.5); }
.pj-role{ color:var(--silver); text-align:right; max-width:34ch; padding-bottom:.9em; text-shadow:0 1px 2px rgba(10,10,10,.5); }
@media (max-width:759px){ .pj-type{ grid-template-columns:1fr; bottom:88px; } .pj-role{ text-align:left; } }
.pj-open[data-title="light"] .pj-name{ color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 2px 30px rgba(246,245,242,.8), 0 1px 2px rgba(246,245,242,.9); }
.pj-open[data-title="light"] .pj-no, .pj-open[data-title="light"] .pj-role{ color:rgba(17,17,17,.6); text-shadow:0 1px 2px rgba(246,245,242,.85); }
.pj-open[data-title="red"] .pj-name{ color:var(--safe-glow); }

/* ---------- the reading, on a scrim that dissolves up and falls away ----------
   It never takes the whole width: the stage's own effect goes on living
   beside the words about it. */
.pj-read{ position:relative; pointer-events:none; }
.pj-scrim{ position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 17vh, #000 calc(100% - 24vh), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 17vh, #000 calc(100% - 24vh), transparent 100%); }
.pj-scrim[data-field="dark"]{ background:linear-gradient(to right,
  rgba(10,10,10,0) 0%, rgba(10,10,10,.30) 22%, rgba(10,10,10,.88) 42%, rgba(10,10,10,.97) 58%, var(--void) 74%); }
.pj-scrim[data-field="light"]{ background-size:180px 180px, auto;
  background:var(--fibre), linear-gradient(to right,
  rgba(236,234,229,0) 0%, rgba(236,234,229,.38) 22%, rgba(236,234,229,.92) 42%, rgba(236,234,229,.985) 58%, var(--paper) 74%); }
.pj-col{ position:relative; pointer-events:auto; margin-left:auto;
  width:min(780px, 58%); padding:30vh var(--margin) 30vh; }
@media (max-width:1099px){
  .pj-col{ width:100%; padding-left:var(--margin); }
  .pj-scrim[data-field="dark"]{ background:var(--void); }
  .pj-scrim[data-field="light"]{ background-color:var(--paper); background-image:var(--fibre); background-size:180px 180px; }
}

/* a jump by button: the glass is lifted and set down again */
.pj-loupe{ position:fixed; inset:0; z-index:46; pointer-events:none; opacity:0;
  background:radial-gradient(60% 50% at 50% 46%, rgba(10,10,10,0) 0%, rgba(10,10,10,.55) 62%, rgba(10,10,10,.9) 100%); }
.pj.is-loupe .pj-loupe{ animation:pj-loupe .68s var(--ease); }
@keyframes pj-loupe{ 0%{ opacity:0; transform:scale(1.35) } 42%{ opacity:1; transform:scale(1) } 100%{ opacity:0; transform:scale(.86) } }
.pj.is-loupe .pj-flow{ animation:pj-blur .68s var(--ease); }
@keyframes pj-blur{ 0%{ filter:none } 42%{ filter:blur(7px) } 100%{ filter:none } }

/* the body of a stage */
.st-body{ position:relative; color:var(--fg); }

.st-lede{ display:grid; gap:clamp(26px,4vh,52px); align-items:start; }
.st-facts{ display:grid; gap:12px; padding-bottom:2px; border-bottom:1px solid var(--rule); }
.st-count{ color:var(--fg); letter-spacing:.3em; }
.st-role{ color:var(--fg); }
.st-happens{ color:var(--fg2); letter-spacing:.08em; max-width:46ch; }
.st-contents{ color:var(--fg2); letter-spacing:.1em; padding-bottom:16px; }
.st-note .reading{ color:var(--fg); }
.st-more{ margin-top:26px; color:var(--fg2); border-bottom:1px solid var(--rule); padding-bottom:4px; }
.st-more:hover{ color:var(--fg); }
.st-rest{ display:block; max-height:0; overflow:hidden; transition:max-height .7s var(--swift); }
.st-note.is-open .st-rest{ max-height:1600px; }
.st-para{ display:grid; gap:6px; margin-top:1.3em; }
.st-margin{ color:var(--fg2); font-size:9.5px; }
.st-pull{ margin:7vh 0 2vh; }
.st-pull p{ font-size:clamp(28px,3.4vw,54px); line-height:1.02; max-width:18ch; font-style:italic; }

/* the specimens, as a grid to skim */
.st-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap:8vh clamp(24px,3vw,52px); margin-top:11vh; align-items:start; }
.st-grid.is-film{ grid-template-columns:1fr; gap:7vh; }
.st-sib{ grid-column:1/-1; color:var(--fg2); border-top:1px solid var(--rule); padding-top:14px; margin-bottom:-5vh; }
.st-none{ grid-column:1/-1; display:grid; gap:18px; justify-items:start; }
.st-none-n{ font-size:clamp(110px,16vw,240px); color:var(--fg3); line-height:.78; }
.st-none-t{ color:var(--fg2); letter-spacing:.18em; max-width:34ch; line-height:1.9; }
.st-none-go{ margin-top:10px; }
.pc{ position:relative; color:var(--fg); }
.pc-no{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px; color:var(--fg2); font-size:9.5px; }
.pc-fig{ color:var(--fg3); }
.pc-frame{ position:relative; display:block; width:100%; }
.pc-img{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .8s var(--ease), transform .8s var(--swift); transform:translateY(12px); }
.pc.is-ready .pc-img{ opacity:1; transform:none; }
.st-body[data-tone="light"] .pc-branch .pc-img, .st-body[data-tone="light"] .pc-body .pc-img{ filter:drop-shadow(0 12px 18px rgba(17,17,17,.16)) drop-shadow(0 2px 3px rgba(17,17,17,.12)); }
.pc-frame:hover .pc-img{ transform:translateY(-4px); }
.pc.is-destroyed .pc-frame{ border:1px solid var(--rule); }
.pc .spec-block{ margin-top:22px; font-size:10px; }
.pc-links{ display:flex; gap:20px; margin-top:16px; }
.pc-link{ color:var(--fg2); border-bottom:1px solid var(--rule); padding-bottom:2px; font-size:9.5px; }
.pc-link:hover{ color:var(--fg); }

/* equipment, folded */
.st-eq{ margin-top:11vh; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.st-eq-head{ display:flex; justify-content:space-between; width:100%; padding:18px 0; color:var(--fg2); text-align:left; }
.st-eq-head:hover{ color:var(--fg); }
.st-eq-list{ display:none; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:26px; padding:10px 0 34px; }
.st-eq.is-open .st-eq-list{ display:grid; }
.st-eq-item{ display:flex; flex-direction:column; gap:10px; text-align:left; color:var(--fg); }
.st-eq-item canvas{ width:100%; height:auto; background:rgba(127,127,127,.08); }
.st-eq-status{ color:var(--fg2); font-size:9px; }

.st-onward{ display:grid; gap:5vh; margin-top:15vh; border-top:1px solid var(--rule); padding-top:6vh; }
.st-door{ display:flex; flex-direction:column; gap:12px; color:var(--fg); }
.st-door .mono{ color:var(--fg2); }
.st-door .giant{ font-size:clamp(52px,6.5vw,110px); transition:transform .6s var(--swift); }
.st-door:hover .giant{ transform:translateX(12px); }

/* the counter: a camera's exposure counter, not a menu */
.pidx{ position:fixed; left:50%; bottom:clamp(14px,2.4vh,26px); transform:translateX(-50%); z-index:48;
  display:flex; align-items:center; gap:clamp(18px,3vw,34px);
  color:var(--fg); max-width:calc(100vw - 20px); --exposed:0; }
.pidx, .pidx a{ text-shadow:0 0 10px var(--halo), 0 0 2px var(--halo); }
.pidx-counter{ position:relative; display:flex; align-items:baseline; gap:10px; padding:0 2px; }
.pidx-window{ position:relative; display:block; width:2.6em; height:1.5em; overflow:hidden; text-align:center;
  font-family:var(--mono); font-size:15px; letter-spacing:.06em; color:var(--fg);
  background:linear-gradient(180deg, rgba(127,127,127,.16), rgba(127,127,127,.04)); box-shadow:inset 0 1px 3px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.12); }
.pidx-roll{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.02em; }
.pidx-col{ display:block; overflow:hidden; height:1.5em; line-height:1.5em; }
.pidx-digit{ display:block; height:1.5em; line-height:1.5em; }
.pidx-roll.is-turning .pidx-digit{ animation:roll-up .42s var(--swift); }
.pidx-roll.is-turning .pidx-col.is-down .pidx-digit{ animation:roll-down .42s var(--swift); }
/* A counter digit is not faded in: the window hides it until it is
   there. It is pushed by a detent, overruns it very slightly, and seats
   back against it. That tiny seat is the whole difference between a
   mechanism and a number changing. */
@keyframes roll-up{
  0%{ transform:translateY(1.15em); }
  74%{ transform:translateY(-.052em); }
  100%{ transform:none; }
}
@keyframes roll-down{
  0%{ transform:translateY(-1.15em); }
  74%{ transform:translateY(.052em); }
  100%{ transform:none; }
}
.pidx-name{ font-size:9px; letter-spacing:.26em; color:var(--fg2); }
/* the rest of the roll: frames either side, and how far this one is exposed */
.pidx-ticks{ position:relative; display:flex; align-items:center; gap:clamp(3px,.8vw,7px); padding:8px 10px;
  background:repeating-linear-gradient(90deg, rgba(127,127,127,.22) 0 2px, rgba(127,127,127,0) 2px 9px) top/100% 2px no-repeat,
             repeating-linear-gradient(90deg, rgba(127,127,127,.22) 0 2px, rgba(127,127,127,0) 2px 9px) bottom/100% 2px no-repeat; }
.pidx-item{ position:relative; display:block; padding:5px 7px; color:var(--fg3); font-size:9px; letter-spacing:.12em; transition:color .3s var(--ease); }
.pidx-item:hover{ color:var(--fg); }
.pidx-item.is-here{ color:var(--fg); }
.pidx-tick{ position:absolute; left:7px; right:7px; bottom:1px; height:1px; background:currentColor; opacity:.25; }
.pidx-item.is-here .pidx-tick{ opacity:1; transform-origin:0 50%; transform:scaleX(var(--exposed)); }
@media (max-width:759px){ .pidx-window{ font-size:13px; } .pidx-item{ padding:5px 4px; } .pidx-name{ display:none; } }

/* the hairlines between related circles: quiet, and only loud under the hand */
.scope-links{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.scope-links line{ stroke:rgba(236,234,229,.10); stroke-width:1; transition:stroke .4s var(--ease); }
.scope-links text{ fill:rgba(236,234,229,0); font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; transition:fill .4s var(--ease); }
.scope-links g.is-on line{ stroke:rgba(236,234,229,.42); }
.scope-links g.is-on text{ fill:rgba(236,234,229,.6); }
.pj-stage.is-bodies{ background:var(--void); }

/* ============================================================
   04 · PREP — the dark, and the safelight on its chain
   ============================================================ */
.op-04{ height:112vh; }
.op-04 .op-stage{ background:var(--void); }
.dk-line{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.dk-red{ position:absolute; inset:0; pointer-events:none; opacity:0; mix-blend-mode:multiply; transition:opacity .9s var(--ease);
  background:radial-gradient(90% 70% at 50% 0%, #FF2A16 0%, #B3140E 34%, #4A0503 70%, #1A0100 100%); }
.dk-glow{ position:absolute; inset:0; pointer-events:none; opacity:0; mix-blend-mode:screen; transition:opacity 1.1s var(--ease);
  background:radial-gradient(40% 32% at 84% 6%, rgba(255,70,40,.55) 0%, rgba(255,40,20,.12) 45%, rgba(0,0,0,0) 75%); }
.pj-stage.is-safe .dk-red{ opacity:1; }
.pj-stage.is-safe .dk-glow{ opacity:1; }
.dk-chain{ position:absolute; right:clamp(28px,7vw,120px); top:0; width:44px; height:clamp(150px,26vh,260px); z-index:4;
  display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.dk-beads{ flex:1; width:3px; background:repeating-linear-gradient(180deg, rgba(200,200,196,.7) 0 3px, rgba(0,0,0,0) 3px 7px); }
.dk-pull{ width:12px; height:26px; border-radius:6px 6px 5px 5px; background:linear-gradient(90deg, #6A6A68, #D6D6D2 45%, #4C4C4A); }
.dk-say{ margin-top:10px; font-size:8.5px; letter-spacing:.24em; color:var(--fg2); opacity:0; transition:opacity .3s var(--ease); white-space:nowrap; }
.dk-chain:hover .dk-say, .dk-chain:focus-visible .dk-say{ opacity:1; }
.dk-chain.is-pulled{ animation:dk-pull .5s var(--ease); }
@keyframes dk-pull{ 30%{ transform:translateY(20px); } 100%{ transform:translateY(0); } }
.op-stage.is-safe ~ .op-type .op-name{ color:#FFD9D2; }

/* 06 · the tray: the safelight is optional here too, and the rim can be pushed */
.pj-lamp-06 .dk-red{ mix-blend-mode:multiply; }
.op-06.is-rocked, .op-stage.is-rocked{ animation:rock 1.1s var(--ease); }
@keyframes rock{ 25%{ transform:rotate(.35deg); } 60%{ transform:rotate(-.22deg); } 100%{ transform:none; } }

/* ============================================================
   THE LEDGER — the index, and where the process begins
   ============================================================ */
.lg-room{ position:relative; background:var(--void); color:var(--paper); padding:calc(var(--nav-h) + 9vh) var(--gutter) 10vh; }
.lg-head{ position:relative; max-width:1400px; }
.lg-kicker{ color:var(--silver); }
.lg-title{ margin:.06em 0 .3em -.03em; }
.lg-counts{ display:flex; flex-wrap:wrap; gap:8px clamp(24px,4vw,64px); border-top:1px solid var(--rule); padding-top:16px; }
.lg-counts div{ display:flex; flex-direction:column; gap:6px; }
.lg-counts dt{ color:var(--silver); font-size:9px; letter-spacing:.24em; }
.lg-counts dd{ font-size:16px; letter-spacing:.14em; }
.lg-frame{ margin-top:22px; min-height:1.6em; color:var(--paper); letter-spacing:.24em;
  border-left:1px solid var(--rule); padding-left:14px; }

/* the light table */
.lg-lighttable{ position:relative; margin-top:6vh; }
.lt{ position:relative; display:block; }
.lt-table, .lt-glass{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; }
.lt-glass{ pointer-events:none; }
.lt-hits{ position:absolute; inset:0; }
.lt-hit{ position:absolute; display:block; cursor:pointer; }
.lt-hit::after{ content:""; position:absolute; inset:-6px; border:1px solid transparent; transition:border-color .3s var(--ease); }
.lt-hit:hover::after, .lt-hit:focus-visible::after{ border-color:rgba(236,234,229,.5); }
.lg-lighttable[data-filter="available"] .lt-hit:not(.is-available),
.lg-lighttable[data-filter="collection"] .lt-hit:not(.is-collection),
.lg-lighttable[data-filter="destroyed"] .lt-hit:not(.is-destroyed),
.lg-lighttable[data-filter="unique"] .lt-hit:not(.is-unique){ opacity:.25; }

/* the accounts */
.lg-accounts{ padding:12vh var(--gutter) 14vh; }
.lg-filters{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 4vh; }
.lg-filter{ padding:9px 14px; border:1px solid var(--rule); color:var(--fg2); font-size:9.5px; letter-spacing:.2em; }
.lg-filter:hover{ color:var(--fg); }
.lg-filter.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.lg-table{ width:100%; border-collapse:collapse; font-size:10.5px; letter-spacing:.1em; }
.lg-table th{ text-align:left; padding:0 14px 12px 0; border-bottom:1px solid var(--rule); font-weight:400; }
.lg-table th button{ color:var(--fg2); font-size:9px; letter-spacing:.2em; }
.lg-table th button:hover{ color:var(--fg); }
.lg-table th button.is-sorted{ color:var(--fg); }
.lg-table th button.is-sorted::after{ content:attr(data-dir); margin-left:6px; }
.lg-row{ cursor:pointer; }
.lg-row td{ padding:14px 14px 14px 0; border-bottom:1px solid var(--rule); vertical-align:baseline; white-space:nowrap; }
.lg-row:hover td{ background:rgba(17,17,17,.03); }
.lg-row.is-destroyed td{ color:var(--fg2); }
.lg-row td a{ border-bottom:1px solid var(--rule); }
.lg-row.is-open td{ border-bottom-color:transparent; }
.lg-more{ display:none; }
.lg-more.is-open{ display:table-row; }
.lg-more td{ padding:0 0 26px; border-bottom:1px solid var(--rule); }
.lg-lineage{ display:grid; gap:6px; padding:8px 0 0; }
.lg-lin-row{ display:grid; grid-template-columns:minmax(150px,1fr) repeat(8, 26px) minmax(120px,auto); gap:8px; align-items:center; }
.lg-lin-row.is-head{ color:var(--fg2); font-size:8.5px; letter-spacing:.2em; }
.lg-b{ letter-spacing:.14em; }
.lg-dot{ position:relative; display:block; height:18px; }
.lg-dot::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--rule); }
.lg-dot.is-on::after{ content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--ink); }
.lg-dot.is-on:hover::after{ box-shadow:0 0 0 4px rgba(17,17,17,.12); }
.lg-go{ color:var(--fg2); font-size:9px; letter-spacing:.18em; }
a.lg-go{ border-bottom:1px solid var(--rule); }
.lg-empty{ margin-top:6vh; color:var(--fg2); }
.lg-empty a{ border-bottom:1px solid var(--rule); }
@media (max-width:899px){
  .lg-table thead{ display:none; }
  .lg-row{ display:grid; grid-template-columns:1fr 1fr; }
  .lg-row td{ white-space:normal; padding:8px 0; border:0; }
  .lg-row td:first-child{ grid-column:1/-1; border-top:1px solid var(--rule); padding-top:14px; }
  .lg-lin-row{ grid-template-columns:1fr repeat(8, 1fr); }
  .lg-lin-row .lg-go{ grid-column:1/-1; }
}

/* the door */
.lg-door-sec{ background:var(--void); padding:14vh var(--gutter) 16vh; }
.gw-door-sec{ padding:12vh var(--gutter) 10vh; }
.lg-door{ display:flex; flex-direction:column; gap:14px; color:var(--paper); }
.lg-door .mono{ color:var(--silver); }
.lg-door .giant{ font-size:clamp(72px,12vw,220px); transition:transform .7s var(--swift); }
.lg-door:hover .giant{ transform:translateX(16px); }

/* ============================================================
   THE TRANSPORT — the roll runs through a gate
   ============================================================ */
.tp-bay{ position:relative; background:var(--void); color:var(--paper); padding:10vh var(--gutter) 9vh; }
.tp-head{ color:var(--silver); }
.tp-all{ display:inline-block; margin-top:26px; color:var(--silver); border-bottom:1px solid var(--rule); padding-bottom:3px; }
.tp-all:hover{ color:var(--paper); }
.tp-host{ position:relative; height:clamp(120px,17vh,190px); margin-top:34px; touch-action:pan-y; cursor:grab; }
.tp-host:active{ cursor:grabbing; }
.tp{ overflow:hidden; }
.tp-film{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* the gate: a hard-edged window with its own light behind it */
.tp-gate{ position:absolute; pointer-events:none; box-shadow:0 0 0 1px rgba(236,234,229,.75), 0 0 36px 6px rgba(245,245,244,.18) inset, 0 0 60px rgba(245,245,244,.16); }
.tp-gate::before, .tp-gate::after{ content:""; position:absolute; top:-14px; bottom:-14px; width:1px; background:rgba(236,234,229,.35); }
.tp-gate::before{ left:-1px; } .tp-gate::after{ right:-1px; }
.tp-counter{ position:absolute; left:0; top:-30px; display:flex; gap:.02em; font-size:15px; letter-spacing:.14em; color:var(--paper); }
.tp-col{ display:block; height:1.4em; line-height:1.4em; overflow:hidden; }
.tp-digit{ display:block; height:1.4em; line-height:1.4em; }
.tp-counter.is-rolling .tp-digit{ animation:tp-roll .5s var(--swift); }
@keyframes tp-roll{
  0%{ transform:translateY(1.2em); }
  74%{ transform:translateY(-.05em); }
  100%{ transform:none; }
}
.tp-arm{ position:absolute; bottom:-34px; display:flex; align-items:center; gap:10px; color:var(--silver); font-size:9px; letter-spacing:.24em; padding:8px 0; }
.tp-arm:hover{ color:var(--paper); }
.tp-arm.is-back{ left:0; }
.tp-arm.is-fwd{ right:0; }
.tp-arm.is-back::before, .tp-arm.is-fwd::after{ content:""; width:26px; height:1px; background:currentColor; }
.tp-host.is-running{ box-shadow:inset 0 0 40px rgba(245,245,244,.06); }
@media (max-width:759px){ .tp-counter{ font-size:13px; } .tp-arm{ font-size:8.5px; } }

/* ============================================================
   THE GALLERY — one work to a screen, its name as the wall
   ============================================================ */
.gw-head{ position:relative; background:var(--chalk); color:var(--ink); padding:calc(var(--nav-h) + 4vh) var(--gutter) 3vh;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.gw-kicker{ color:var(--smoke); }
.gw-count{ color:var(--smoke); }
.gw{ position:relative; min-height:100vh; min-height:100svh; display:grid; place-items:center; overflow:hidden;
  background:var(--chalk); color:var(--ink); padding:8vh var(--gutter) 14vh; --lean-x:0deg; --lean-y:0deg; --lean-s:0px; }
/* the room: one wall, washed from above, and the floor it meets.
   A work is only as good as the light it is given and the space around it. */
.gw-wall{ position:absolute; inset:0; pointer-events:none;
  --pool-x:calc(50% + var(--rake, 0)*16%);
  background-size:180px 180px, auto, auto, auto, auto;
  background:
  var(--fibre),
  radial-gradient(34% 40% at var(--pool-x) 46%, rgba(var(--sig, 170,170,166),.13) 0%, rgba(var(--sig, 170,170,166),0) 72%),
  radial-gradient(58% 48% at var(--pool-x) 47%, rgba(255,254,251,.95) 0%, rgba(255,254,251,.42) 42%, rgba(255,254,251,0) 76%),
  radial-gradient(150% 70% at 50% -16%, #FFFFFF 0%, rgba(255,255,255,0) 58%),
  linear-gradient(180deg, #F4F3EF 0%, #EEEDE8 52%, #E6E4DE 82%, #DEDCD5 100%); }
/* the corners of a room are never as lit as its middle */
.gw-wall::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 96% at 50% 47%, rgba(17,17,17,0) 52%, rgba(17,17,17,.10) 100%); }
/* the floor, and the little the wall gives back to it */
.gw-wall::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:17%;
  border-top:1px solid rgba(17,17,17,.13);
  background:
    radial-gradient(40% 130% at 50% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(17,17,17,.13) 0%, rgba(17,17,17,.05) 26%, rgba(17,17,17,.015) 62%, rgba(17,17,17,.06) 100%); }
.gw-big{ position:absolute; left:var(--gutter); right:var(--gutter); top:50%;
  transform:translateY(calc(-50% + (0.5 - var(--walk, .5))*7vh));
  display:grid; gap:.02em; pointer-events:none; text-transform:lowercase;
  color:rgba(17,17,17,calc(.042 + var(--walk, .5)*.034));
  font-size:clamp(64px,13vw,220px); line-height:.86; will-change:transform; }
.gw-big span{ transform:translateX(calc(var(--rake, 0)*-1.4vw)); transition:none; }
.gw-big span:last-child{ text-align:right; transform:translateX(calc(var(--rake, 0)*1.9vw)); }
.gw-centre{ position:relative; z-index:2; display:grid; place-items:center; perspective:1400px; }
.gw-hung{ position:relative; margin:0; opacity:0; transform:translateY(14px);
  transition:opacity 1s var(--ease), transform 1s var(--swift); transform-style:preserve-3d; }
.gw-hung.is-ready{ opacity:1; transform:rotateY(var(--lean-x)) rotateX(var(--lean-y)); }
/* while the light is crossing it, nothing else is moving it */
.gw-hung.sweeping{ opacity:1; transform:none; transition:none; }
/* the cast the work was actually exposed under, laid over it faintly */
.gw-hung::after{ content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:linear-gradient(calc(90deg + var(--rake, 0)*24deg),
    rgba(var(--sig, 170,170,166),.16) 0%, rgba(var(--sig, 170,170,166),.02) 46%, rgba(17,17,17,.07) 100%);
  opacity:.72; }
.gw[data-sig="none"] .gw-hung::after{ opacity:.3; }
.gw-obj{ position:relative; display:block; cursor:none; }
.gw-rake{ position:absolute; left:0; top:0; display:block; pointer-events:none; }
.gw-rake.is-l{ opacity:var(--rake-l, 0); }
.gw-rake.is-r{ opacity:var(--rake-r, 0); }
.gw-pen, .gw-con{ position:absolute; pointer-events:none; }
.gw-pen{ transform:translateX(var(--lean-s)); }
.gw-label{ position:absolute; left:var(--gutter); bottom:clamp(64px,9vh,120px); width:min(24em,30vw); z-index:3; color:var(--ink); }
.gw-label p{ margin:0; letter-spacing:.08em; }
.gw-fig{ color:var(--smoke); margin-bottom:16px !important; }
.gw-acc{ font-size:12px; letter-spacing:.26em !important; margin-bottom:12px !important; color:var(--ink); }
.gw-label .spec-block{ margin-top:20px; font-size:10px; }
.gw-price{ margin-top:20px !important; }
.gw-go{ margin-top:20px; }
.gw-sides{ position:absolute; inset:0; pointer-events:none; }
.gw-side{ position:absolute; top:50%; pointer-events:auto; color:var(--smoke); font-size:9px; letter-spacing:.26em; padding:14px 8px; }
.gw-side:hover{ color:var(--ink); }
.gw-side.is-prev{ left:6px; writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg); }
.gw-side.is-next{ right:6px; writing-mode:vertical-rl; transform:translateY(-50%); }
.gw-lamp{ position:absolute; right:var(--gutter); bottom:clamp(64px,9vh,120px); z-index:3;
  display:grid; justify-items:end; gap:8px; pointer-events:none;
  color:var(--smoke); font-size:9px; letter-spacing:.24em; }
.gw-lamp-bar{ position:relative; display:block; width:clamp(90px,11vw,150px); height:1px; background:rgba(17,17,17,.2); }
.gw-lamp-dot{ position:absolute; top:50%; left:calc(50% + var(--rake, 0)*50%); width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--ink);
  box-shadow:0 0 0 1px rgba(246,245,242,.9), 0 0 14px 3px rgba(var(--sig, 170,170,166),.55); }
.gw-lamp-say{ opacity:1; transition:opacity .6s var(--ease); }
.gw.is-lit .gw-lamp-say{ opacity:.45; }
.gw-lamp-sig{ font-size:8.5px; letter-spacing:.3em; color:rgba(17,17,17,.34); }
.gw.is-single{ min-height:88vh; }
@media (max-width:899px){
  .gw{ padding:calc(var(--nav-h) + 6vh) var(--gutter) 34vh; place-items:start center; }
  .gw-label{ width:auto; right:var(--gutter); bottom:clamp(40px,6vh,80px); }
  .gw-lamp{ bottom:auto; top:calc(var(--nav-h) + 8px); right:var(--gutter); }
  .gw-big{ font-size:clamp(44px,15vw,90px); }
}

/* in collection, and what is coming */
.gw-after{ padding:14vh var(--gutter) 16vh; }
.gw-kicker-2{ margin-top:12vh; }
.gw-placed{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px,100%),1fr)); gap:5vh 3vw; margin-top:4vh; }
.gw-plc{ display:grid; gap:10px; align-content:start; border-top:1px solid var(--rule); padding-top:18px; color:var(--fg); }
.gw-plc .mono{ color:var(--fg2); }
.gw-plc-name{ font-size:clamp(26px,2.6vw,40px); line-height:1; color:var(--ink); }
.gw-plc-link{ color:var(--ink) !important; border-bottom:1px solid var(--rule); justify-self:start; padding-bottom:2px; }
.gw-edition{ display:grid; grid-template-columns:5em minmax(0,1fr) minmax(0,1.4fr) auto; gap:24px; align-items:baseline;
  border-top:1px solid var(--rule); padding:20px 0; margin-top:3vh; }
.gw-edition .display{ font-size:clamp(28px,3vw,44px); }
.gw-edition .mono{ color:var(--fg2); }
.gw-commissions{ margin-top:10vh; color:var(--fg2); }
.gw-none{ min-height:60vh; display:grid; place-items:center; }
@media (max-width:759px){ .gw-edition{ grid-template-columns:1fr; gap:8px; } }
.op-stage.is-exposure{ cursor:crosshair; }
.op-stage.is-exposure.is-dodging{ cursor:grabbing; }
.st-onward.is-one{ grid-template-columns:1fr; margin-top:12vh; }
.op-01 .op-stage{ cursor:crosshair; }

/* ============================================================
   03 · SUBSTRATE — the body, opened
   The circle gives way to the thing's true shape: a deckled sheet, a
   slab with a thickness, a pane, a panel, a length of cloth.
   ============================================================ */
.sub-drawer{ position:fixed; z-index:60; right:0; top:0; bottom:0; width:min(560px, 46vw);
  background:var(--char); color:var(--paper); border-left:1px solid rgba(236,234,229,.14);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(102%); transition:transform .62s var(--swift);
  box-shadow:-40px 0 90px rgba(0,0,0,.5); }
.sub-drawer.is-in{ transform:none; }
.sub-close{ position:sticky; top:0; align-self:flex-end; z-index:2;
  padding:18px var(--gutter) 14px; color:var(--silver); font-size:9.5px; letter-spacing:.28em;
  background:linear-gradient(to bottom, var(--char) 55%, rgba(20,20,20,0)); }
.sub-close:hover{ color:var(--paper); }
.sub-dish{ position:relative; padding:0 0 clamp(20px,3vh,34px); }
.sub-art{ display:block; width:100%; height:auto; opacity:0; transition:opacity .9s var(--ease); }
.sub-drawer.is-drawn .sub-art{ opacity:1; }
.sub-text{ display:grid; gap:18px; padding:0 var(--gutter) clamp(50px,8vh,90px); }
.sub-no{ color:var(--smoke); font-size:9.5px; letter-spacing:.26em; }
.sub-name{ font-size:clamp(30px,3.4vw,52px); line-height:1; color:var(--paper); }
.sub-note{ color:var(--fog); max-width:40ch; }
.sub-used{ color:var(--smoke); font-size:9.5px; letter-spacing:.2em; border-top:1px solid rgba(236,234,229,.16); padding-top:16px; }
.sub-used a{ color:var(--silver); border-bottom:1px solid rgba(236,234,229,.28); }
.sub-used a:hover{ color:var(--paper); }
.sub-drawer .spec-block{ font-size:10px; }
@media (max-width:899px){
  .sub-drawer{ left:0; width:auto; top:auto; height:82svh; border-left:0; border-top:1px solid rgba(236,234,229,.14);
    transform:translateY(102%); box-shadow:0 -30px 80px rgba(0,0,0,.5); }
  .sub-drawer.is-in{ transform:none; }
}

/* 04 · the coating bench: the one room where the hand is the visitor's */
.dk-bench{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:none; }
.pj-stage.is-handed{ cursor:none; }
.dk-hint{ position:absolute; left:var(--gutter); top:calc(var(--nav-h) + 26px); z-index:4;
  font-size:9px; letter-spacing:.28em; color:rgba(236,234,229,.4); max-width:30ch; line-height:2;
  transition:color .8s var(--ease); pointer-events:none; }
.pj-stage.is-coated .dk-hint{ color:rgba(236,234,229,.66); }

/* ============================================================
   05 · EXPOSURE — the contact frame, the lamp, and the hand
   ============================================================ */
.fx-canvas, .fx-glass{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.fx-glass{ pointer-events:none; }
.pj-stage.is-exposure{ cursor:crosshair; }
.pj-stage.is-exposure.is-dodging{ cursor:grabbing; }
.fx-type{ position:absolute; left:var(--gutter); top:calc(var(--nav-h) + 26px); z-index:3;
  display:grid; gap:10px; max-width:min(34ch, 46vw); pointer-events:none; }
/* the tubes are behind this corner: the type keeps its own shadow */
.fx-type p, .fx-source{ text-shadow:0 1px 3px rgba(8,6,18,.9), 0 0 16px rgba(8,6,18,.7); }
.fx-label{ font-size:9px; letter-spacing:.24em; color:rgba(236,234,229,.44); line-height:1.9; }
.fx-inframe{ font-size:9.5px; letter-spacing:.18em; color:rgba(236,234,229,.74); line-height:1.9; }
.fx-line{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(150px,22vh,230px); z-index:3;
  font-size:9.5px; letter-spacing:.2em; color:rgba(236,234,229,.58); text-align:center;
  opacity:0; transition:opacity 1.2s var(--ease); }
.fx-line:not(:empty){ opacity:1; }
.fx-sources{ position:absolute; right:var(--gutter); top:calc(var(--nav-h) + 26px); z-index:4;
  display:grid; gap:8px; justify-items:end; }
.fx-source{ display:grid; gap:3px; justify-items:end; text-align:right; padding:7px 0 7px 18px;
  color:rgba(236,234,229,.4); border-right:1px solid rgba(236,234,229,.18); padding-right:12px;
  transition:color .4s var(--ease), border-color .4s var(--ease); }
.fx-source:hover{ color:rgba(236,234,229,.8); }
.fx-source.is-on{ color:var(--paper); border-right:1px solid var(--paper); }
.fx-src-how{ font-size:10px; letter-spacing:.2em; }
.fx-src-lamp{ font-size:8px; letter-spacing:.3em; opacity:.6; }
.fx-source.is-on .fx-src-lamp{ opacity:.9; }
@media (max-width:899px){
  .fx-type{ max-width:min(30ch, 54vw); }
  .fx-sources{ gap:6px; }
  .fx-src-how{ font-size:9px; }
}
@media (max-width:599px){
  .fx-type{ max-width:none; right:var(--gutter); }
  .fx-sources{ right:auto; left:var(--gutter); top:calc(var(--nav-h) + 112px);
    grid-auto-flow:column; grid-auto-columns:max-content; justify-items:start; gap:16px; }
  .fx-source{ border-right:0; border-top:1px solid rgba(236,234,229,.18); padding:8px 0 0; justify-items:start; text-align:left; }
  .fx-source.is-on{ border-right:0; border-top:1px solid var(--paper); }
}

/* the table is a lit panel in a dark room, and it has an edge */
.lg-bed{ position:relative; margin:clamp(30px,6vh,70px) 0 0; }
.lg-bed-k{ font-size:9px; letter-spacing:.28em; color:var(--smoke); padding-bottom:16px; }
.lg-lighttable{ position:relative; border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(236,234,229,.10), 0 0 0 7px #1A1A18, 0 0 0 8px rgba(236,234,229,.16),
             0 40px 90px rgba(0,0,0,.6); }
.lt-table, .lt-glass{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.lt-glass{ pointer-events:none; }
.lt-hits{ position:absolute; inset:0; }
.lt-hit{ position:absolute; display:block; }
.lt-hit:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* what is placed is still a work: it gets a picture, like everything else */
.gw-plc-fig{ margin-bottom:22px; --lean-x:0deg; --lean-y:0deg; --lean-s:0px; --rake-l:0; --rake-r:0; }
.gw-plc-fig .gw-hung{ opacity:0; }
.gw-plc-fig .gw-hung.is-ready{ opacity:1; }

/* 02 · the vellum: an invisible surface the glass can actually read */
.tf-sheet{ position:absolute; z-index:3; cursor:none; }
.tf-sheet.is-loupe{ cursor:none; }

/* ============================================================
   THE SWEEP — one light crossing one surface
   The surface is revealed at the light's own leading edge, and the light
   is the colour of whatever lamp is named. Nothing fades.
   ============================================================ */
.sweeping{ --sweep:0; --sweep-dir:1; }
.sweeping > *{
  -webkit-mask-image:linear-gradient(to top,
    #000 calc(var(--sweep)*145% - 24%), rgba(0,0,0,0) calc(var(--sweep)*145%));
          mask-image:linear-gradient(to top,
    #000 calc(var(--sweep)*145% - 24%), rgba(0,0,0,0) calc(var(--sweep)*145%));
}
.sweeping::after{
  content:""; position:absolute; left:-6%; right:-6%; height:34%;
  bottom:calc(var(--sweep)*145% - 17%);
  pointer-events:none; z-index:6; mix-blend-mode:screen;
  opacity:calc(1 - var(--sweep)*var(--sweep));
  background:linear-gradient(to top,
    rgba(var(--lamp-rgb, var(--sun-rgb)),0) 0%,
    rgba(var(--lamp-rgb, var(--sun-rgb)),.30) 42%,
    rgba(255,255,255,.62) 56%,
    rgba(var(--lamp-rgb, var(--sun-rgb)),.24) 70%,
    rgba(var(--lamp-rgb, var(--sun-rgb)),0) 100%);
  filter:blur(2px);
}
.sweeping[data-sweep="sun"]{ --lamp-rgb:var(--sun-rgb); }
.sweeping[data-sweep="uv"]{ --lamp-rgb:var(--uv-rgb); }
.sweeping[data-sweep="kiln"]{ --lamp-rgb:var(--kiln-rgb); }

/* the plate at the end of the hang: the name pressed into a sheet */
.gw-plate{ position:relative; height:clamp(220px,34vh,400px); overflow:hidden;
  background-color:var(--paper);
  background-image:var(--fibre), var(--paper-photo, none);
  background-size:180px 180px, 760px 760px; }
.gw-plate-cv{ position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity 1.4s var(--ease); }
.gw-plate.is-pressed .gw-plate-cv{ opacity:1; }

/* ============================================================
   THE BODIES, FOLDED — circles laid out by how they relate
   ============================================================ */
.mf{ margin-top:11vh; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.mf-head{ display:flex; justify-content:space-between; width:100%; padding:18px 0; color:var(--fg2); text-align:left; }
.mf-head:hover{ color:var(--fg); }
.mf-map{ position:relative; display:none; width:100%; aspect-ratio:1/.92; margin:6px 0 34px; }
.mf.is-open .mf-map{ display:block; }
.mf-links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.mf-line{ stroke:var(--rule); stroke-width:.18; vector-effect:non-scaling-stroke; transition:stroke .4s var(--ease); }
.mf-line.is-faint{ stroke:var(--rule); opacity:.32; stroke-dasharray:1 1.6; }
.mf-line.is-on{ stroke:var(--fg); opacity:1; }
.mf-node{ position:absolute; transform:translate(-50%,-50%); display:grid; justify-items:center; gap:9px;
  width:calc(var(--r)*clamp(74px,12vw,132px)); color:var(--fg2);
  transition:color .35s var(--ease), transform .5s var(--swift); }
.mf-node:hover, .mf-node:focus-visible{ color:var(--fg); }
.mf-disc{ width:100%; aspect-ratio:1; border-radius:50%; display:block; opacity:0;
  box-shadow:0 0 0 1px rgba(127,127,127,.2), 0 10px 26px rgba(0,0,0,.35), inset 0 2px 10px rgba(255,255,255,.14);
  transition:opacity .8s var(--ease), box-shadow .4s var(--ease); }
.mf-node.is-ready .mf-disc{ opacity:1; }
.mf-node:hover .mf-disc, .mf-node.is-near .mf-disc{ box-shadow:0 0 0 1px rgba(200,200,196,.5), 0 14px 34px rgba(0,0,0,.45), inset 0 2px 12px rgba(255,255,255,.22); }
.mf-name{ font-size:8px; letter-spacing:.18em; text-align:center; line-height:1.7; max-width:14ch; }
.mf-map.is-reading .mf-node:not(:hover):not(.is-near){ opacity:.45; }
@media (max-width:759px){ .mf-map{ aspect-ratio:1/1.25; } .mf-name{ font-size:7px; } }

/* ============================================================
   THE SAFELIGHT, AS A ROOM
   A safelight does not tint a picture: it is the only light there is, so
   everything in the room returns red and nothing returns anything else.
   Neutral first, then red — which is what a red-channel-only surface
   actually looks like — and it goes the moment the chain is pulled.
   ============================================================ */
body[data-safelight="on"] .st-04 .pj-scrim[data-field="dark"]{
  background:linear-gradient(to right,
    rgba(18,2,1,0) 0%, rgba(18,2,1,.34) 22%, rgba(20,2,1,.9) 42%, rgba(22,3,2,.97) 58%, #150201 74%); }
@media (max-width:1099px){
  body[data-safelight="on"] .st-04 .pj-scrim[data-field="dark"]{ background:#150201; }
}
body[data-safelight="on"] .st-04 .pj-col{
  --fg:#F0B8B0; --fg2:#C4746C; --fg3:rgba(240,184,176,.42); --rule:rgba(240,184,176,.26); }
/* the figures: made colourless, then given the only light in the room */
body[data-safelight="on"] .st-04 .pc-img,
body[data-safelight="on"] .st-04 .st-eq-item canvas{
  filter:grayscale(1) contrast(1.06) brightness(.84);
  transition:filter .9s var(--ease); }
body[data-safelight="on"] .st-04 .pc-frame{ position:relative; }
body[data-safelight="on"] .st-04 .pc-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:var(--safe); mix-blend-mode:multiply; }
body[data-safelight="on"] .st-04 .pc-frame::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(70% 60% at 40% 30%, rgba(255,60,36,.22), rgba(255,60,36,0) 70%);
  mix-blend-mode:screen; }
.st-04 .pc-img, .st-04 .st-eq-item canvas{ transition:filter .9s var(--ease); }

/* ============================================================
   THE LEDGER — a filing drawer
   Shut, a file is one typed line. Open, it is everything the house
   knows. One at a time, in place, and nothing moves on the page.
   ============================================================ */
.lg-files{ padding-top:clamp(40px,7vh,90px); }
.lg-list{ border-top:1px solid var(--rule); }
.lg-file{ border-bottom:1px solid var(--rule); }
.lg-line{ display:grid; width:100%; text-align:left; align-items:baseline; gap:4px clamp(14px,2.4vw,40px);
  grid-template-columns:7.5em 8.5em 7em 10em 1fr auto;
  padding:18px 0; color:var(--fg2); font-size:10px; letter-spacing:.14em;
  transition:color .3s var(--ease); }
.lg-line:hover{ color:var(--fg); }
.lg-no{ color:var(--fg); letter-spacing:.2em; }
.lg-mark{ font-size:12px; color:var(--fg3); }
.lg-file.is-destroyed .lg-no{ text-decoration:line-through; text-decoration-thickness:1px; }
.lg-file.is-collection .lg-state, .lg-file.is-unique .lg-state{ color:var(--fg); }
.lg-open{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--swift); }
.lg-file.is-open .lg-open{ grid-template-rows:1fr; }
.lg-open-in{ min-height:0; overflow:hidden; display:grid; gap:26px; }
.lg-file.is-open .lg-open-in{ padding:6px 0 40px; }
.lg-say{ color:var(--fg2); font-size:10px; letter-spacing:.14em; line-height:2; max-width:52ch; }
.lg-lin{ display:grid; gap:10px; }
.lg-lin-row{ display:grid; grid-template-columns:minmax(9em,16em) repeat(8, 1fr) minmax(6em,11em);
  align-items:center; gap:8px; font-size:9px; letter-spacing:.16em; color:var(--fg2); }
.lg-lin-row.is-head{ color:var(--fg3); border-bottom:1px solid var(--rule); padding-bottom:8px; }
.lg-dot{ width:7px; height:7px; border-radius:50%; border:1px solid var(--rule); display:block; margin:0 auto; }
.lg-dot.is-on{ background:var(--fg); border-color:var(--fg); }
a.lg-dot.is-on:hover{ transform:scale(1.5); }
.lg-b{ color:var(--fg); }
.lg-go{ color:var(--fg2); border-bottom:1px solid var(--rule); padding-bottom:2px; font-size:9px; letter-spacing:.2em; }
.lg-go:hover{ color:var(--fg); }
.lg-links{ display:flex; gap:24px; }
@media (max-width:899px){
  .lg-line{ grid-template-columns:1fr auto; gap:4px 14px; }
  .lg-neg, .lg-type, .lg-far{ display:none; }
  .lg-lin-row{ grid-template-columns:1fr; gap:6px; }
  .lg-lin-row.is-head{ display:none; }
  .lg-dot{ display:inline-block; margin:0 3px 0 0; }
}

/* 05 · the lamp is its own control, and it never pretends to be the record */
.fx-lamps{ position:absolute; right:var(--gutter); top:calc(var(--nav-h) + 168px); z-index:4;
  display:grid; gap:7px; justify-items:end; }
.fx-lamp{ font-size:8.5px; letter-spacing:.3em; color:rgba(236,234,229,.34);
  padding:5px 12px 5px 18px; border-right:1px solid rgba(236,234,229,.14);
  transition:color .4s var(--ease), border-color .4s var(--ease);
  text-shadow:0 1px 3px rgba(8,6,18,.9); }
.fx-lamp:hover{ color:rgba(236,234,229,.78); }
.fx-lamp.is-recorded{ color:rgba(236,234,229,.52); }
.fx-lamp.is-on{ color:var(--paper); border-right-color:var(--paper); }
.fx-lampnote{ font-size:8px; letter-spacing:.22em; color:rgba(236,234,229,.34);
  text-align:right; max-width:26ch; line-height:1.9; text-shadow:0 1px 3px rgba(8,6,18,.9); }
.pj-stage.is-trying .fx-lampnote{ color:var(--safe-glow); }
@media (max-width:599px){
  .fx-lamps{ right:auto; left:var(--gutter); top:calc(var(--nav-h) + 156px);
    grid-auto-flow:column; grid-auto-columns:max-content; justify-items:start; gap:14px; align-items:center; }
  .fx-lamp{ border-right:0; border-top:1px solid rgba(236,234,229,.14); padding:6px 0 0; }
  .fx-lamp.is-on{ border-right:0; border-top-color:var(--paper); }
  .fx-lampnote{ display:none; }
}

/* ============================================================
   THE MATERIALS, IN THE LEDGER — circles, and the hairlines between them
   ============================================================ */
.mr{ position:relative; background:var(--void); color:var(--paper);
  --fg:var(--paper); --fg2:var(--silver); --fg3:var(--smoke); --rule:rgba(236,234,229,.22);
  padding:clamp(70px,12vh,150px) var(--gutter) clamp(80px,14vh,170px); }
.mr-head{ display:grid; gap:clamp(14px,2vh,26px); margin-bottom:clamp(30px,6vh,70px); }
.mr-k{ font-size:10px; letter-spacing:.3em; color:var(--smoke); }
.mr-t{ font-size:clamp(54px,9vw,150px); line-height:.86; }
.mr-modes{ display:flex; gap:24px; font-size:10px; letter-spacing:.28em; }
.mr-modes button{ color:var(--smoke); padding:8px 0; border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease); }
.mr-modes button:hover{ color:var(--silver); }
.mr-modes button.is-on{ color:var(--paper); border-bottom-color:var(--paper); }
.mr-map{ position:relative; width:100%; aspect-ratio:4/3; min-height:660px; }
.mr-map[hidden], .mr-page[hidden]{ display:none; }
.mr-links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.mr-line{ stroke:rgba(236,234,229,.20); stroke-width:1; vector-effect:non-scaling-stroke; transition:stroke .45s var(--ease); }
.mr-line.is-on{ stroke:rgba(236,234,229,.9); }
.mr-lab{ position:absolute; transform:translate(-50%,-50%); font-size:8px; letter-spacing:.24em; color:var(--smoke);
  background:var(--void); padding:3px 8px; opacity:0; transition:opacity .4s var(--ease), color .4s var(--ease); pointer-events:none; white-space:nowrap; }
.mr-lab.is-on{ opacity:1; color:var(--paper); }
.mr-node{ position:absolute; transform:translate(-50%,-50%); display:grid; justify-items:center; gap:12px;
  width:clamp(84px,11vw,150px); color:var(--fg2); transition:opacity .4s var(--ease), transform .6s var(--swift); }
.mr-node.is-matter{ width:clamp(64px,8vw,108px); }
.mr-disc{ width:100%; aspect-ratio:1; border-radius:50%; display:block; opacity:0;
  transition:opacity .9s var(--ease), box-shadow .5s var(--ease), transform .6s var(--swift);
  box-shadow:0 0 0 1px rgba(236,234,229,.16), 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.mr-node.is-ready .mr-disc{ opacity:1; }
/* the glass over each one: a hard hotspot upper left, and the rim gathering light */
.mr-node::before{ content:""; position:absolute; left:0; top:0; width:100%; aspect-ratio:1; border-radius:50%; pointer-events:none; z-index:2;
  background:radial-gradient(circle at 30% 26%, rgba(255,255,255,.55) 0, rgba(255,255,255,.14) 7%, rgba(255,255,255,0) 15%),
             radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 62%, rgba(255,255,255,.16) 92%, rgba(255,255,255,.34) 100%); }
.mr-name{ font-size:8px; letter-spacing:.18em; text-align:center; line-height:1.7; max-width:15ch; color:var(--smoke); transition:color .3s var(--ease); }
.mr-node:hover .mr-name, .mr-node:focus-visible .mr-name, .mr-node.is-near .mr-name{ color:var(--paper); }
.mr-node:hover .mr-disc, .mr-node.is-near .mr-disc{ transform:scale(1.06);
  box-shadow:0 0 0 1px rgba(236,234,229,.6), 0 26px 56px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.2); }
.mr-map.is-reading .mr-node:not(.is-here):not(.is-near){ opacity:.34; }
.mr-page{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(360px,100%),1fr)); gap:clamp(40px,7vh,90px) clamp(28px,4vw,64px); }
.mr-entry{ display:grid; gap:14px; align-content:start; border-top:1px solid var(--rule); padding-top:20px; }
.mr-no{ font-size:9.5px; letter-spacing:.26em; color:var(--smoke); }
.mr-en{ font-size:clamp(26px,2.6vw,40px); line-height:1.02; }
.mr-note{ color:var(--fog); max-width:44ch; }
.mr-rel{ font-size:9.5px; letter-spacing:.18em; color:var(--smoke); line-height:1.9; }
.mr-rel a{ color:var(--silver); border-bottom:1px solid rgba(236,234,229,.28); }
@media (max-width:759px){
  .mr-map{ aspect-ratio:auto; min-height:0; display:grid; grid-template-columns:repeat(2,1fr); gap:36px 18px; padding:8px 0; }
  .mr-links, .mr-lab{ display:none; }
  .mr-node{ position:relative; left:auto !important; top:auto !important; transform:none; width:100%; }
  .mr-node.is-matter{ width:82%; }
}

/* the nod at 03: a line, not a system */
.st-nod{ margin-top:9vh; font-size:9.5px; letter-spacing:.2em; color:var(--fg2); line-height:2; }
.st-nod-go{ color:var(--fg); border-bottom:1px solid var(--rule); padding-bottom:2px; margin-left:6px; white-space:nowrap; }
.st-nod-go:hover{ border-bottom-color:var(--fg); }

/* 05 · the controls each have a place of their own, and none of them sits on the tubes */
.fx-type{ top:auto; bottom:clamp(214px,32vh,330px); max-width:min(30ch,38vw); }
.fx-lamps{ top:auto; right:var(--gutter); bottom:clamp(128px,19vh,190px); display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:4px 18px; max-width:min(520px,70vw); }
.fx-lamp{ border-right:0; border-bottom:1px solid rgba(236,234,229,.14); padding:5px 0 5px; }
.fx-lamp.is-on{ border-bottom-color:var(--paper); }
.fx-lampnote{ flex-basis:100%; text-align:right; }
.fx-sources{ top:calc(var(--nav-h) + 26px); }
@media (max-width:899px){
  .fx-type{ left:var(--gutter); right:var(--gutter); max-width:none; bottom:clamp(250px,36vh,340px); }
  .fx-lamps{ left:var(--gutter); right:auto; justify-content:flex-start; bottom:clamp(150px,22vh,200px); }
  .fx-lampnote{ text-align:left; }
}

/* the archive's one invitation: set apart from the menu, and set as an editorial line */
.archive-foot{ display:block; left:auto; right:var(--gutter); bottom:clamp(22px,4.5vh,46px); }
.archive-go{ display:grid; grid-template-columns:auto auto; gap:2px 18px; align-items:end; justify-items:end; color:var(--paper); }
.archive-go-k{ grid-column:1/-1; font-size:9px; letter-spacing:.3em; color:var(--smoke); }
.archive-go-t{ font-size:clamp(28px,3.6vw,54px); line-height:1; font-style:italic; letter-spacing:-.01em; transition:transform .6s var(--swift); }
.archive-go-arrow{ font-size:clamp(22px,2.6vw,38px); line-height:1; transition:transform .6s var(--swift); }
.archive-go:hover .archive-go-t{ transform:translateX(-6px); }
.archive-go:hover .archive-go-arrow{ transform:translateX(10px); }
@media (max-width:759px){ .archive-foot{ left:var(--gutter); } .archive-go{ justify-items:start; } }

/* ============================================================
   THE GALLERY, AS ONE SPACE
   No seams. One continuous wall runs behind every work; the header, the
   rooms and the floor are all parts of it, and nothing is ruled off.
   The wall ends once, at a skirting, and the floor takes over.
   ============================================================ */
.page-gallery{ background:linear-gradient(180deg, #F3F2EE 0%, #EEEDE8 40%, #ECEAE5 100%); }
.gw-head{ background:transparent; }
.gw{ background:transparent; }
.gw-wall{ background:
    radial-gradient(34% 40% at var(--pool-x) 46%, rgba(var(--sig, 170,170,166),.12) 0%, rgba(var(--sig, 170,170,166),0) 72%),
    radial-gradient(60% 52% at var(--pool-x) 47%, rgba(255,254,251,.90) 0%, rgba(255,254,251,.36) 44%, rgba(255,254,251,0) 78%); }
.gw-wall::before, .gw-wall::after{ content:none; display:none; }

/* the ghost of the work's own name is pressed into the wall, not printed on it:
   it takes its highlight and its shadow from the same light the visitor is moving */
.gw-big{ color:rgba(17,17,17,.022);
  text-shadow:
    calc(var(--rake, 0)*-2.6px - 1.4px) -1.4px 0 rgba(255,255,255,.92),
    calc(var(--rake, 0)*-4px + 2px) 2.4px 3px rgba(20,18,14,.16),
    calc(var(--rake, 0)*-9px + 5px) 7px 14px rgba(20,18,14,.06); }

/* the beam: the raking renders show only where the light falls */
.gw-rake{ -webkit-mask-image:radial-gradient(ellipse 46% 56% at var(--bx,50%) var(--by,50%), #000 0%, rgba(0,0,0,.82) 36%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(ellipse 46% 56% at var(--bx,50%) var(--by,50%), #000 0%, rgba(0,0,0,.82) 36%, rgba(0,0,0,0) 100%); }
.gw-hung::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:soft-light;
  background:radial-gradient(ellipse 34% 42% at var(--bx,50%) var(--by,50%), rgba(255,252,244,.55) 0%, rgba(255,252,244,0) 100%); }

.gw-rec{ margin-top:14px !important; }
.gw-rec-go{ color:var(--ink); border-bottom:1px solid var(--rule); padding-bottom:3px; letter-spacing:.2em; }
.gw-rec-go:hover{ border-bottom-color:var(--ink); }

/* the floor: a skirting board catching the light, a shadow under it, then a floor */
.gw-floor{ position:relative; margin-top:-2px; padding-top:0;
  background:
    linear-gradient(180deg, rgba(17,17,17,0) 0, rgba(17,17,17,0) 0),
    var(--paper-photo, none);
  background-size:auto, 760px 760px; background-color:#DEDBD3; color:var(--ink);
  --fg:var(--ink); --fg2:var(--ash); --fg3:rgba(17,17,17,.46); --rule:rgba(17,17,17,.24); }
.gw-floor::before{ content:""; position:absolute; left:0; right:0; top:0; height:clamp(46px,7vh,84px); pointer-events:none;
  background:
    linear-gradient(180deg, #E9E7E1 0, #E9E7E1 34%, #F6F5F1 34.4%, #F6F5F1 40%, rgba(17,17,17,.22) 40.6%, rgba(17,17,17,.10) 56%, rgba(17,17,17,0) 100%); }
.gw-floor::after{ content:""; position:absolute; left:0; right:0; top:clamp(46px,7vh,84px); bottom:0; pointer-events:none;
  background:radial-gradient(70% 60% at 50% 0%, rgba(255,254,250,.42) 0%, rgba(255,254,250,0) 70%), linear-gradient(180deg, rgba(17,17,17,.05) 0%, rgba(17,17,17,.12) 100%); }
.gw-floor > *{ position:relative; z-index:1; }
.gw-floor .gw-after{ padding-top:calc(clamp(46px,7vh,84px) + 9vh); }
.gw-door-sec{ padding:8vh var(--gutter) 14vh; }

/* ============================================================
   ABOUT — a negative in a dark room, and one sentence read over it
   ============================================================ */
.ab-scene{ position:relative; height:340vh; background:#0A0806; }
.ab-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; cursor:crosshair; touch-action:pan-y; }
.ab-stage .fid-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.ab-intro{ position:absolute; left:var(--gutter); top:calc(var(--nav-h) + clamp(28px,7vh,80px)); z-index:2; display:grid; gap:8px;
  font-size:9.5px; letter-spacing:.3em; color:rgba(236,234,229,.66); pointer-events:none; }
.ab-intro span:last-child{ color:rgba(236,234,229,.36); }
.ab-say{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(64px,12vh,130px); z-index:2; margin:0; pointer-events:none;
  font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:-.012em; line-height:.9;
  font-size:clamp(34px,7.1vw,136px); color:var(--paper); display:grid; }
.ab-line{ display:block; white-space:nowrap; }
.ab-line-1{ padding-left:clamp(28px,9vw,180px); }
.ab-line-2{ padding-left:clamp(0px,3vw,60px); }
.ab-line-3{ padding-left:clamp(56px,20vw,400px); }
.ab-w{ display:inline-block; will-change:opacity, filter, transform; text-shadow:0 2px 30px rgba(10,8,6,.7); }
.ab-w.is-accent{ font-style:italic; text-transform:none; letter-spacing:-.02em; color:#FFFDF6; }
.ab-w.is-glyph{ font-family:var(--mono); font-size:.36em; vertical-align:.7em; letter-spacing:0; color:rgba(236,234,229,.6); }
.ab-cue{ position:absolute; right:var(--gutter); bottom:clamp(20px,4vh,40px); z-index:2; font-size:9px; letter-spacing:.34em; color:rgba(236,234,229,.3); opacity:calc(1 - var(--p,0)*6); }
@media (max-width:759px){ .ab-line{ white-space:normal; } .ab-line-1,.ab-line-2,.ab-line-3{ padding-left:0; } .ab-say{ font-size:clamp(34px,11vw,64px); } }
.about .rv{ opacity:0; transform:translateY(14px); transition:opacity 1s var(--ease), transform 1s var(--swift); }
.about .rv.is-in{ opacity:1; transform:none; }

/* ============================================================
   07 · ALTERATION — the bath
   ============================================================ */
.pj-stage.is-alteration{ background:radial-gradient(70% 60% at 50% 46%, #1B1B19 0%, #0C0C0B 70%, #080807 100%); cursor:none; }
.al-tilt{ position:absolute; left:50%; top:47%; width:min(60vw, 880px); aspect-ratio:1.42/1; margin-left:calc(min(60vw, 880px)/-2); margin-top:calc(min(60vw, 880px)/-2.84);
  transform:perspective(1500px) rotateX(58deg); transform-style:preserve-3d; opacity:calc(var(--al-in, 0)); transition:none; }
.al-tray{ position:absolute; inset:-3.2%; border-radius:14px; padding:3.2%;
  background:linear-gradient(145deg, #3A3A37 0%, #1B1B1A 46%, #2A2A28 100%);
  box-shadow:0 60px 90px -20px rgba(0,0,0,.85), inset 0 2px 0 rgba(255,255,255,.14), inset 0 -3px 12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.al-print, .al-fx{ position:absolute; left:3.2%; top:3.2%; width:93.6%; height:93.6%; display:block; border-radius:3px; }
.al-print{ box-shadow:0 0 0 1px rgba(0,0,0,.4); filter:saturate(1.05) contrast(1.04); }
.al-fx{ pointer-events:none; mix-blend-mode:screen; }
.al-pipette{ position:absolute; left:0; top:0; width:28px; height:170px; z-index:4; pointer-events:none; opacity:0; transition:opacity .4s var(--ease); will-change:transform; }
.pj-stage.is-handed .al-pipette{ opacity:1; }
.al-bulb{ position:absolute; left:4px; top:0; width:20px; height:34px; border-radius:10px 10px 4px 4px; background:linear-gradient(90deg,#2A2A28,#6A6A66 45%,#1E1E1C); }
.al-glass{ position:absolute; left:9px; top:32px; width:10px; height:112px; background:linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.08) 50%, rgba(255,255,255,.28)); border-radius:0 0 5px 5px; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.al-tip{ position:absolute; left:12px; top:142px; width:4px; height:20px; background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.05)); border-radius:0 0 2px 2px; }
.al-say{ position:absolute; left:var(--gutter); top:calc(var(--nav-h) + 26px); z-index:3; font-size:9px; letter-spacing:.26em; color:rgba(236,234,229,.5); max-width:34ch; line-height:2; text-shadow:0 1px 3px #000; pointer-events:none; }
.al-agents{ position:absolute; right:var(--gutter); top:calc(var(--nav-h) + 26px); z-index:4; display:grid; gap:10px; justify-items:end; cursor:default; }
.al-agent{ display:grid; gap:3px; justify-items:end; text-align:right; padding:7px 12px 7px 18px; color:rgba(236,234,229,.4); border-right:1px solid rgba(236,234,229,.18); transition:color .4s var(--ease), border-color .4s var(--ease); }
.al-agent:hover{ color:rgba(236,234,229,.8); }
.al-agent.is-on{ color:var(--paper); border-right-color:var(--paper); }
.al-agent-n{ font-size:10px; letter-spacing:.2em; }
.al-agent-d{ font-size:8px; letter-spacing:.3em; opacity:.6; }
.al-reset{ font-size:8.5px; letter-spacing:.3em; color:rgba(236,234,229,.4); padding:6px 0; border-bottom:1px solid rgba(236,234,229,.16); }
.al-reset:hover{ color:var(--paper); border-bottom-color:var(--paper); }
@media (max-width:759px){ .al-tilt{ width:88vw; margin-left:-44vw; margin-top:-31vw; } .al-agents{ right:auto; left:var(--gutter); top:calc(var(--nav-h) + 96px); grid-auto-flow:column; justify-items:start; gap:14px; } .al-agent{ border-right:0; border-top:1px solid rgba(236,234,229,.18); padding:8px 0 0; text-align:left; justify-items:start; } .al-agent.is-on{ border-right:0; border-top-color:var(--paper); } .al-pipette{ display:none; } }

/* ============================================================
   THE SAFELIGHT — a room going dark-adapted, not a tint
   Ground #1F0806, the source at #C4382E, ink #F2C9BE. The bulb is a
   place in the room (where the chain hangs), the light falls off from
   it, and the whole room warms up over ~660ms with the flicker of a
   bulb that is finding its colour.
   ============================================================ */
.dk-red{ background:radial-gradient(120% 90% at 86% 0%, #E2352A 0%, #8E2820 26%, #3A0E0B 58%, #1F0806 100%); }
.dk-glow{ background:
  radial-gradient(26% 22% at 87% 5%, rgba(255,128,96,.62) 0%, rgba(196,56,46,.34) 34%, rgba(196,56,46,0) 72%),
  radial-gradient(62% 52% at 50% 50%, rgba(196,56,46,.18) 0%, rgba(196,56,46,0) 70%); }
.pj-stage.is-warm{ animation:sl-warm 660ms steps(1,end) 1; }
@keyframes sl-warm{ 0%{filter:brightness(1)} 6%{filter:brightness(.36)} 12%{filter:brightness(1.18)} 20%{filter:brightness(.6)} 29%{filter:brightness(1.08)} 42%{filter:brightness(.9)} 100%{filter:brightness(1)} }
body[data-safelight="on"] .st-04 .pj-scrim[data-field="dark"]{ background:linear-gradient(to right, rgba(31,8,6,0) 0%, rgba(31,8,6,.4) 22%, rgba(31,8,6,.92) 42%, rgba(31,8,6,.98) 58%, #1F0806 74%); }
@media (max-width:1099px){ body[data-safelight="on"] .st-04 .pj-scrim[data-field="dark"]{ background:#1F0806; } }
body[data-safelight="on"] .st-04 .pj-col{ --fg:#F2C9BE; --fg2:rgba(242,201,190,.62); --fg3:rgba(242,201,190,.4); --rule:rgba(242,201,190,.28); }

/* the exposure counter is a film advance: the perforations step by one pitch, overrun, and seat */
.pidx-ticks{ background-size:9px 2px, 9px 2px; background-repeat:repeat-x, repeat-x; background-position:0 0, 0 100%; }
.pidx.is-adv .pidx-ticks{ animation:pidx-adv .52s var(--swift); }
@keyframes pidx-adv{ 0%{ background-position:0 0, 0 100%; } 68%{ background-position:-11px 0, -11px 100%; } 100%{ background-position:-9px 0, -9px 100%; } }
.pidx.is-adv .pidx-window{ animation:pidx-shutter .5s var(--ease); }
@keyframes pidx-shutter{ 0%{ filter:brightness(1.9); } 100%{ filter:brightness(1); } }

/* touch: the bench and the tray take a finger without stealing the page */
.pj-stage.is-alteration{ touch-action:pan-y; }

/* the counter: wheels behind lit windows, wound to the number */
.ct{ display:inline-flex; gap:3px; padding:5px 6px; border-radius:3px; background:linear-gradient(180deg, rgba(127,127,127,.20), rgba(127,127,127,.05));
  box-shadow:inset 0 1px 4px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(236,234,229,.07); }
.ct-col{ display:block; position:relative; width:.72em; height:1.4em; overflow:hidden; font-family:var(--mono); font-size:clamp(20px,2.4vw,30px); line-height:1.4em; text-align:center; color:var(--paper);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.ct-strip{ display:block; transition:transform 620ms cubic-bezier(.3,1.32,.4,1); will-change:transform; }
.ct-d{ display:block; height:1.4em; line-height:1.4em; }
.lg-counts dd{ margin:0; }

/* 07 — the bath keeps the left of the room, the reading keeps the right, and the stage gets the scroll it needs to be worked */
.st-07 .pj-read{ min-height:200vh; }
@media (min-width:1100px){
  .al-tilt{ left:27%; width:min(40vw, 640px); margin-left:calc(min(40vw, 640px)/-2); margin-top:calc(min(40vw, 640px)/-2.84); }
  .st-07 .pj-col{ width:min(640px, 46%); }
  .st-07 .pj-scrim[data-field="dark"]{ background:linear-gradient(to right, rgba(10,10,10,0) 0%, rgba(10,10,10,0) 40%, rgba(10,10,10,.86) 53%, var(--void) 61%); }
}
.al-say, .al-agents{ opacity:var(--al-ui, 0); }
@media (min-width:1100px){
  .al-agents{ right:auto; left:var(--gutter); top:auto; bottom:17vh; grid-auto-flow:column; gap:34px; justify-items:start; align-items:end; }
  .al-agent{ justify-items:start; text-align:left; padding:8px 0 0; border-right:0; border-top:1px solid rgba(236,234,229,.18); }
  .al-agent.is-on{ border-right:0; border-top-color:var(--paper); }
  .al-reset{ margin-left:10px; }
}

/* the flow is a page of words laid over a room: the room takes the pointer unless the pointer is on the words */
.pj-flow, .pj-st{ pointer-events:none; }
.pj-col{ pointer-events:auto; }

/* ============================================================
   THE LEDGER — one line per object (MASTER-PROMPT §6)
   Monospace for identifiers, serif for the verdict, the arc at a fixed
   width so that it stacks into a column. No icon, bar or colour stands in
   for the glyphs.
   ============================================================ */
.lr{ padding-bottom:clamp(50px,9vh,110px); }
.lr-key{ margin:14px 0 0; color:var(--fg2); font-size:9px; letter-spacing:.2em; line-height:2; max-width:100ch; }
.lr-sorts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:24px 0 3.4vh; }
.lr-sort-k{ font-size:9px; letter-spacing:.24em; color:var(--fg2); margin-right:6px; }
.lr-sort{ padding:8px 12px; border:1px solid var(--rule); color:var(--fg2); font-size:9px; letter-spacing:.2em; }
.lr-sort:hover{ color:var(--fg); }
.lr-sort.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.lr-list{ border-top:1px solid var(--ink); }
.lr-row{ position:relative; border-bottom:1px solid var(--rule); }
.lr-line{ display:grid; width:100%; text-align:left; align-items:baseline; gap:6px clamp(14px,2vw,32px); padding:21px 0 19px;
  grid-template-columns:104px minmax(120px,1fr) 7.9em minmax(190px,1.5fr) minmax(96px,.55fr) 18px; color:var(--fg); }
.lr-line:hover .lr-title{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; }
.lr-acc{ font-size:10.5px; letter-spacing:.14em; white-space:nowrap; }
.lr-title{ font-size:clamp(19px,1.7vw,26px); line-height:1.15; }
.lr-arc{ display:inline-flex; font-size:15px; line-height:1; }
.lr-g{ display:inline-block; width:1.56em; text-align:center; font-style:normal; color:var(--fg2); }
.lr-g.is-on{ color:var(--ink); }
.lr-verdict{ display:grid; gap:6px; }
.lr-verdict .reading{ font-size:15.5px; line-height:1.4; font-style:italic; }
.lr-cost{ font-size:8.5px; letter-spacing:.2em; color:var(--fg2); }
.lr-marks{ font-size:8.5px; letter-spacing:.16em; color:var(--fg2); line-height:1.8; }
.lr-plus{ justify-self:end; color:var(--fg2); }
.lr-row.is-whole{ box-shadow:inset 3px 0 0 var(--ink); }
.lr-row.is-whole .lr-line{ padding-left:16px; }
.lr-row.is-sample .lr-title, .lr-row.is-sample .lr-verdict .reading{ opacity:.6; }
.lr-row.is-fugitive .lr-acc{ text-decoration:underline dashed; text-decoration-thickness:1px; text-underline-offset:.4em; }

.lr-open{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--swift); }
.lr-row.is-open .lr-open{ grid-template-rows:1fr; }
.lr-open-in{ overflow:hidden; min-height:0; padding-left:calc(104px + clamp(14px,2vw,32px)); }
.lr-row.is-open .lr-open-in{ padding-bottom:34px; }
.lr-open-in .spec-block{ max-width:78ch; margin-top:4px; }
.lr-say{ margin:20px 0 0; color:var(--fg); font-size:9.5px; letter-spacing:.2em; }
.lr-ops{ margin-top:8px; max-width:78ch; }
.lr-none{ margin:22px 0 0; color:var(--fg2); font-size:9.5px; letter-spacing:.2em; }
.lr-phase{ margin-top:28px; }
.lr-phase-h{ display:flex; gap:18px; margin:0; padding-bottom:8px; border-bottom:1px solid var(--ink); font-size:9.5px; letter-spacing:.26em; font-weight:400; }
.lr-phase-h span:first-child{ color:var(--fg2); }
.lr-op{ padding:16px 0 0; }
.lr-op-h{ margin:0; font-size:9px; letter-spacing:.2em; color:var(--fg2); }
.lr-op-go{ color:inherit; border-bottom:1px solid var(--rule); }
.lr-op-go:hover{ color:var(--fg); }
.lr-labour{ font-size:17px; line-height:1.5; margin:7px 0 0; }
.lr-judged, .lr-open p, .lr-op .lr-open{ margin:5px 0 0; }
.lr-judged{ font-size:15.5px; line-height:1.5; font-style:italic; }
.lr-judged .mono, .lr-op .lr-open .mono{ font-style:normal; font-size:8.5px; letter-spacing:.22em; color:var(--fg2); margin-right:.6em; }
.lr-att{ margin:6px 0 0; font-size:8.5px; letter-spacing:.2em; color:var(--fg2); }
.lr-op > .lr-open{ display:block; grid-template-rows:none; margin:6px 0 0; font-size:15.5px; line-height:1.5; }
.lr-links{ display:flex; gap:26px; margin:26px 0 0; }
.lr-foot{ margin-top:clamp(40px,8vh,90px); padding-top:28px; border-top:1px solid var(--ink); }
.lr-sum{ margin:0; font-size:clamp(24px,3.1vw,46px); line-height:1.15; }
.lr-says{ margin:18px 0 0; color:var(--fg2); font-size:9.5px; letter-spacing:.2em; line-height:2; }
.lr-examples{ margin-top:4px; }

@media (max-width:899px){
  .lr-line{ grid-template-columns:1fr auto 18px; grid-template-areas:"acc arc plus" "title title title" "verdict verdict verdict" "marks marks marks"; gap:10px 14px; padding:20px 0 18px; }
  .lr-acc{ grid-area:acc; } .lr-arc{ grid-area:arc; } .lr-plus{ grid-area:plus; }
  .lr-title{ grid-area:title; } .lr-verdict{ grid-area:verdict; } .lr-marks{ grid-area:marks; }
  .lr-open-in{ padding-left:0; }
  .lr-row.is-whole .lr-line{ padding-left:14px; }
}

/* The reading column owns the right of the room on a wide screen, so whatever
   is meant to be touched lives in the stage's own band on the left, where the
   pointer can reach it and the words never cover it. */
@media (min-width:1100px){
  .fx-sources{ right:auto; left:var(--gutter); top:calc(var(--nav-h) + 26px); display:flex; flex-wrap:wrap; gap:4px 26px; max-width:min(640px,44vw); align-items:flex-start; }
  .fx-source{ justify-items:start; text-align:left; padding:8px 0 0; border-right:0; border-top:1px solid rgba(236,234,229,.18); }
  .fx-source.is-on{ border-right:0; border-top-color:var(--paper); }
  .fx-lamps{ right:auto; left:var(--gutter); justify-content:flex-start; bottom:clamp(128px,19vh,190px); max-width:min(640px,44vw); }
  .fx-lampnote{ text-align:left; }
  .dk-chain{ right:auto; left:clamp(88px,9vw,150px); }
}

/* Where the words take the whole width, the room they are about still has to be reachable:
   each stage you can touch keeps a clear span of scroll before the reading begins. */
@media (max-width:1099px){
  .st-03 .pj-open, .st-04 .pj-open, .st-05 .pj-open, .st-06 .pj-open, .st-07 .pj-open{ margin-bottom:82vh; margin-bottom:82svh; }
  .st-07 .pj-read{ min-height:0; }
}

/* ============================================================
   THE DOORWAY — the end of a room, in the light of the next
   ============================================================ */
.door{ position:relative; padding:clamp(70px,15vh,180px) var(--gutter) clamp(70px,15vh,180px); }
.door-dark{ background:var(--void); color:var(--paper); }
.door-light{ background-color:var(--paper); background-image:var(--paper-photo, none), var(--fibre); background-size:cover, 180px 180px; color:var(--ink); }
.door-in{ display:grid; grid-template-columns:1fr auto; gap:14px 30px; align-items:end; color:inherit; }
.door-k{ grid-column:1/-1; font-size:9px; letter-spacing:.3em; color:var(--silver); }
.door-light .door-k, .door-light .door-line{ color:var(--smoke); }
.door-name{ font-size:clamp(60px,11.5vw,200px); line-height:.9; letter-spacing:-.02em; margin-left:-.03em; transition:transform .8s var(--swift); }
.door-line{ align-self:end; padding-bottom:1.3em; font-size:9.5px; letter-spacing:.22em; color:var(--silver); max-width:34ch; text-align:right; }
.door-arrow{ grid-column:2; justify-self:end; font-size:clamp(26px,3.6vw,54px); line-height:1; transition:transform .8s var(--swift); }
.door-in:hover .door-name{ transform:translateX(16px); }
.door-in:hover .door-arrow{ transform:translateX(-8px); }
@media (max-width:759px){
  .door-in{ grid-template-columns:1fr; }
  .door-line{ text-align:left; padding-bottom:0; }
  .door-arrow{ grid-column:1; justify-self:start; }
}
.pj-door{ pointer-events:auto; }

/* ============================================================
   EQUIPO — the room
   ============================================================ */
.eq-room{ background:var(--void); color:var(--paper); padding:calc(var(--nav-h) + 9vh) var(--gutter) 12vh;
  --fg:var(--paper); --fg2:var(--pewter); --rule:rgba(236,234,229,.20); }
.eq-k{ color:var(--silver); }
.eq-t{ margin:.06em 0 .3em -.03em; }
.eq-rule{ margin:9vh 0 2vh; }
.eq-group{ margin-top:9vh; }
.eq-gname{ margin:0 0 5vh; padding-bottom:14px; border-bottom:1px solid var(--rule); font-size:9.5px; letter-spacing:.26em; font-weight:400; color:var(--silver); }
.eq-all{ position:relative; z-index:3; color:var(--pewter); font-size:9.5px; letter-spacing:.24em; border-bottom:1px solid var(--rule); padding-bottom:4px; }
.eq-all:hover{ color:var(--paper); }
.eq-sample{ margin-top:6px; color:var(--pewter); font-size:9px; letter-spacing:.22em; }

/* ============================================================
   THE READING ROOM — placed, and otherwise reserved
   ============================================================ */
.rr{ background:var(--void); color:var(--paper); padding:calc(var(--nav-h) + 12vh) var(--gutter) 10vh; }
.rr-title{ margin:.06em 0 0 -.03em; }

/* ============================================================
   THE VAULT — a door that is shut, with a gap to look through
   ============================================================ */
.vt{ position:relative; min-height:100vh; min-height:100svh; overflow:hidden; background:var(--void); color:var(--paper);
  padding:calc(var(--nav-h) + 6vh) var(--gutter) 10vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6vh 5vw; align-items:center;
  --peer:0; --gap:1.5%; }
.vt::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 60% at 27% 52%, rgba(255,226,170,.10), rgba(0,0,0,0) 70%); }
.vt.is-member{ --gap:22%; }
.vt-door{ position:relative; justify-self:center; width:min(36vw, 520px); aspect-ratio:.6/1; max-height:78vh; overflow:hidden;
  background:#050504; box-shadow:0 40px 110px rgba(0,0,0,.7), 0 0 0 1px rgba(236,234,229,.06); }
.vt-behind{ position:absolute; inset:0; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(70% 55% at 50% 44%, rgba(255,236,200,.6), rgba(38,26,14,.92) 72%);
  transform:translateX(calc(var(--peer)*-7%)); transition:transform .6s var(--swift); }
.vt-behind > *{ transform:scale(2.6); transform-origin:50% 50%; pointer-events:none; }
.vt-leaf{ position:absolute; top:0; bottom:0; width:calc(50% - var(--gap)/2); transition:width 1.6s var(--swift);
  background:
    radial-gradient(circle at 14px 14px, rgba(236,234,229,.10) 1.6px, rgba(0,0,0,0) 2.6px) 0 0/44px 44px,
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, rgba(0,0,0,0) 1px 3px),
    linear-gradient(90deg, #131312, #1c1c1a 46%, #0e0e0d); }
.vt-l{ left:0; box-shadow:inset -2px 0 0 rgba(224,190,120,.22), inset -14px 0 22px rgba(0,0,0,.55); }
.vt-r{ right:0; box-shadow:inset 2px 0 0 rgba(224,190,120,.22), inset 14px 0 22px rgba(0,0,0,.55); }
.vt-plate{ position:absolute; top:52%; left:calc(50% - 7px); width:14px; height:46px; border-radius:7px; z-index:2;
  background:linear-gradient(180deg,#2c2c2a,#0c0c0b); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.6);
  transition:opacity 1s var(--ease); }
.vt.is-member .vt-plate{ opacity:0; }
.vt-say{ display:grid; gap:18px; align-content:center; max-width:46ch; }
.vt-k{ color:var(--silver); }
.vt-t{ margin:0 0 .1em -.03em; }
.vt-line{ margin:0; font-size:clamp(17px,1.5vw,21px); line-height:1.55; color:var(--paper); }
.vt-status{ margin:6px 0 0; color:var(--silver); font-size:9.5px; letter-spacing:.22em; }
.vt-held{ grid-column:1/-1; display:grid; gap:6vh; max-width:860px; }
.vt-piece{ border-top:1px solid rgba(236,234,229,.2); padding-top:22px; }
.vt-acc{ margin:0; color:var(--silver); }
.vt-name{ margin:.1em 0 .5em; font-size:clamp(28px,3vw,44px); }
.vt-piece .spec-block{ --fg:var(--paper); --fg2:var(--pewter); --rule:rgba(236,234,229,.2); }
@media (max-width:899px){
  .vt{ grid-template-columns:1fr; padding-top:calc(var(--nav-h) + 4vh); }
  .vt-door{ width:min(62vw, 340px); max-height:58vh; }
}

/* a destroyed record can be asked for, and refuses */
.spec-frame.is-empty{ cursor:pointer; overflow:hidden; }
.spec-frame.is-empty:focus-visible{ outline:1px solid var(--fg2); outline-offset:3px; }
.spec-attempt{ position:absolute; inset:0; display:block; pointer-events:none; opacity:0;
  background:
    linear-gradient(90deg, rgba(120,116,108,.0) 0 3%, rgba(70,66,58,.5) 3% 22%, rgba(120,116,108,.0) 22% 25%, rgba(70,66,58,.5) 25% 44%, rgba(120,116,108,.0) 44% 47%, rgba(70,66,58,.5) 47% 66%, rgba(120,116,108,.0) 66% 69%, rgba(70,66,58,.5) 69% 88%, rgba(120,116,108,0) 88%),
    linear-gradient(180deg, rgba(196,176,140,.16), rgba(196,176,140,.06)); }
.spec-frame.is-trying .spec-attempt{ animation:spec-attempt 2.3s var(--ease) forwards; }
.spec-frame.is-failed .spec-attempt{ opacity:1; background:var(--paper); }
.is-dark .spec-frame.is-failed .spec-attempt, [data-tone="dark"] .spec-frame.is-failed .spec-attempt{ background:#F4F3F0; }
@keyframes spec-attempt{
  0%{ opacity:0; transform:translateY(8px); }
  62%{ opacity:.7; transform:none; }
  80%{ opacity:.86; transform:none; background-color:transparent; }
  88%{ opacity:.9; }
  100%{ opacity:1; transform:none; background:#F4F3F0; }
}
.pc-frame.is-empty{ cursor:pointer; overflow:hidden; }
.pc-frame.is-empty:focus-visible{ outline:1px solid var(--fg2); outline-offset:3px; }
.pc-frame.is-trying .spec-attempt{ animation:spec-attempt 2.3s var(--ease) forwards; }
.pc-frame.is-failed .spec-attempt{ opacity:1; background:#F4F3F0; }
.pc.is-destroyed .pc-frame:hover .pc-img{ transform:none; }

/* DRAW THE RESIST — a wax mark, laid once, that the bath will not cross */
.al-resist{ position:absolute; left:3.2%; top:3.2%; width:93.6%; height:93.6%; display:block; z-index:3; border-radius:3px; pointer-events:none;
  cursor:crosshair; transition:opacity 3s var(--ease) .4s; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45)); opacity:.92; }
.pj-stage.is-resisting .al-resist{ pointer-events:auto; touch-action:none; }
.pj-stage.is-alteration.is-resisting{ cursor:crosshair; }
.pj-stage.is-resisting .al-pipette{ display:none; }
.al-resist.is-locked{ pointer-events:none; touch-action:auto; }
.al-resist.is-exposed{ opacity:0; }
.al-agent.is-spent{ opacity:.4; }
.al-agent:disabled{ cursor:default; }

@media (max-width:759px){ .archive-go-t{ font-size:28px; } .archive-foot{ bottom:20px; } }

/* ============================================================
   THE PROCESS, FULL SCREEN
   The stage is the whole screen. The words are moving type over it; the
   record — note, specimens, tools, bindings — is paper that lifts over the
   light when asked for. Nothing sits in a column beside the scene.
   ============================================================ */
.pj-beats{ position:relative; pointer-events:none; padding-bottom:20vh; }
.pj-beats[data-tone="dark"]{ color:var(--paper); text-shadow:0 1px 3px rgba(8,8,8,.55), 0 2px 36px rgba(8,8,8,.62); }
.pj-beats[data-tone="light"]{ color:var(--ink); text-shadow:0 0 32px rgba(246,245,242,.9), 0 0 3px rgba(246,245,242,.75); }
.pj-beat{ display:flex; align-items:center; min-height:84vh; padding:0 var(--gutter); }
.pj-beat.at-l{ justify-content:flex-start; } .pj-beat.at-r{ justify-content:flex-end; } .pj-beat.at-c{ justify-content:center; text-align:center; }
.pj-beat-in{ max-width:min(100%,1100px); }
.pj-beat-say .kn{ font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(34px,4.7vw,86px); line-height:1.02; letter-spacing:-.012em; max-width:15em; margin:0; }
.pj-beat-read .kn{ font-size:clamp(20px,2.05vw,31px); line-height:1.42; max-width:25em; margin:0; }
.pj-beat-pull{ min-height:100vh; }
.pj-beat-pull .kn{ font-family:var(--display); font-weight:400; font-size:clamp(42px,6.6vw,120px); line-height:.98; letter-spacing:-.018em; max-width:13em; margin:0 auto; }
.pj-beat-ask{ min-height:62vh; align-items:flex-end; padding-bottom:12vh; }
.pj-beat-ask .kn{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; line-height:2; max-width:44ch; margin:0; }
.kn-w{ display:inline-block; opacity:0; will-change:opacity, filter, transform; }
@media (max-width:759px){
  .pj-beat.at-l, .pj-beat.at-r{ justify-content:flex-start; }
  .pj-beat-say .kn{ font-size:clamp(30px,9vw,52px); } .pj-beat-read .kn{ font-size:clamp(19px,5.2vw,25px); } .pj-beat-pull .kn{ font-size:clamp(36px,11vw,62px); }
}

/* the record: a tab at the foot of the light, and the paper it lifts */
.pj-tab{ position:fixed; right:var(--gutter); bottom:clamp(24px,4.4vh,42px); z-index:44; display:flex; gap:12px; align-items:baseline;
  padding:10px 0; font-size:9.5px; letter-spacing:.26em; color:#fff; mix-blend-mode:difference; border-bottom:1px solid currentColor; transition:opacity .5s var(--ease); }
.pj-tab-a{ display:inline-block; transition:transform .5s var(--swift); }
.pj-tab:hover .pj-tab-a{ transform:translateY(-4px); }
.pj.is-sheet .pj-tab{ opacity:0; pointer-events:none; }
.pj-light, .pj-flow{ transition:filter 1s var(--ease), opacity 1s var(--ease); }
.pj.is-sheet .pj-light{ filter:brightness(.5) blur(2.5px); }
.pj.is-sheet .pj-flow{ opacity:.0; }
.pj-sheet{ position:fixed; left:50%; bottom:0; width:min(1180px,100%); height:min(88vh,940px); z-index:60; display:flex; flex-direction:column;
  color:var(--ink); transform:translate(-50%,104%); visibility:hidden; transition:transform .85s var(--swift), visibility 0s linear .85s;
  border-radius:5px 5px 0 0; box-shadow:0 -46px 130px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7); }
.pj-sheet.is-open{ transform:translate(-50%,0); visibility:visible; transition:transform .85s var(--swift), visibility 0s; }
.pj-sheet-head{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px clamp(24px,5vw,72px) 16px; border-bottom:1px solid var(--rule); }
.pj-sheet-head p{ margin:0; font-size:9.5px; letter-spacing:.24em; color:var(--fg2); }
.pj-sheet-close{ font-size:9.5px; letter-spacing:.24em; padding:6px 0; border-bottom:1px solid currentColor; color:var(--fg); }
.pj-sheet-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:4vh clamp(24px,5vw,72px) 12vh; }
.pj-sheet .pj-col{ width:100%; margin:0; padding:0; pointer-events:auto; }
@media (max-width:759px){ .pj-sheet{ height:92vh; border-radius:0; } }

/* the bath and the tray keep the middle of the screen: there is no column to make room for */
@media (min-width:1100px){
  .al-tilt{ left:50%; width:min(54vw,860px); margin-left:calc(min(54vw,860px)/-2); margin-top:calc(min(54vw,860px)/-2.84); }
}
@media (max-width:1099px){ .st-03 .pj-open, .st-04 .pj-open, .st-05 .pj-open, .st-06 .pj-open, .st-07 .pj-open{ margin-bottom:0; } }
/* where each beat sits, so the type falls on the empty parts of the scene */
.pj-beat{ min-height:72vh; }
.pj-beat-say{ align-items:flex-start; padding-top:15vh; min-height:70vh; }
.pj-beat-read{ align-items:flex-end; padding-bottom:13vh; min-height:80vh; }
.pj-beat-pull{ min-height:86vh; }
.pj-beat-ask{ min-height:54vh; }
.pj-beats{ padding-bottom:12vh; }

/* 03 — the sheet, and what the register says about it, set as a drawing would set it */
.sb-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sb-notes{ position:absolute; inset:0; pointer-events:none; }
.sb-note{ position:absolute; margin:0; max-width:34ch; font-size:9.5px; letter-spacing:.22em; line-height:2; color:var(--paper); opacity:0; text-shadow:0 1px 3px rgba(8,8,8,.7); }
.sb-note.sb-l{ left:var(--gutter); } .sb-note.sb-r{ right:var(--gutter); text-align:right; }
.sb-sub{ display:block; font-size:8.5px; color:var(--silver); }
.sb-note::before{ content:""; display:block; width:44px; height:1px; background:rgba(236,234,229,.5); margin-bottom:9px; }
.sb-note.sb-r::before{ margin-left:auto; }

/* ============================================================
   THE LEDGER'S SHEET — paper, lit, on a dark table
   Cool white, matte, with the light from the upper left falling off toward
   the lower right; a soft band of sheen that moves with the hand; a fine
   grain; and the marks a drawing carries at its edges — registration
   crosses, a ruler, a typed block.
   ============================================================ */
.lr-table{ position:relative; background:#060606; overflow:hidden;
  padding:clamp(40px,9vh,120px) clamp(12px,4vw,64px) clamp(70px,12vh,150px); }
.lr-table::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 50% at 28% 0%, rgba(150,158,172,.13), rgba(0,0,0,0) 70%), radial-gradient(50% 40% at 90% 100%, rgba(255,255,255,.03), rgba(0,0,0,0) 70%); }
.lr-sheet{ position:relative; max-width:1260px; margin:0 auto; color:#131519; --sx:.28; --sy:.10;
  --fg:#131519; --fg2:#565A63; --fg3:rgba(19,21,25,.46); --rule:rgba(19,21,25,.22);
  padding:clamp(56px,7vw,108px) clamp(26px,7vw,112px) clamp(70px,9vw,130px) clamp(58px,8.4vw,140px);
  background-color:#F1F2F0;
  background-image:
    linear-gradient(112deg, rgba(255,255,255,0) calc(var(--sx)*60% + 6%), rgba(255,255,255,.30) calc(var(--sx)*60% + 20%), rgba(255,255,255,0) calc(var(--sx)*60% + 36%)),
    radial-gradient(135% 85% at 7% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 62%),
    linear-gradient(162deg, rgba(0,0,0,0) 42%, rgba(66,74,92,.16) 100%),
    var(--paper-photo, none), var(--fibre);
  background-size:100% 100%, 100% 100%, 100% 100%, 760px 760px, 180px 180px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95), inset 1px 0 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.10), inset -1px 0 0 rgba(0,0,0,.06),
    0 1px 0 rgba(0,0,0,.5), 0 14px 30px -10px rgba(0,0,0,.6), 0 46px 90px -16px rgba(0,0,0,.75); }
.lr-sheet::after{ content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.5;
  background:radial-gradient(120% 100% at 50% 40%, rgba(0,0,0,0) 60%, rgba(40,44,54,.16) 100%); }
.lr-x{ position:absolute; width:26px; height:26px; color:rgba(19,21,25,.52); pointer-events:none;
  background:linear-gradient(currentColor,currentColor) 50% 0/1px 100% no-repeat, linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat; }
.lr-x::after{ content:""; position:absolute; inset:7px; border:1px solid currentColor; border-radius:50%; }
.lr-x-tl{ left:22px; top:22px; } .lr-x-tr{ right:22px; top:22px; } .lr-x-bl{ left:22px; bottom:22px; } .lr-x-br{ right:22px; bottom:22px; } .lr-x-tm{ left:50%; top:22px; margin-left:-13px; }
.lr-ruler{ position:absolute; left:20px; top:70px; bottom:70px; width:26px; pointer-events:none; border-right:1px solid rgba(19,21,25,.55);
  background:repeating-linear-gradient(180deg, rgba(19,21,25,.55) 0 1px, rgba(0,0,0,0) 1px 12px) right top/10px 100% no-repeat,
             repeating-linear-gradient(180deg, rgba(19,21,25,.7) 0 1px, rgba(0,0,0,0) 1px 60px) right top/18px 100% no-repeat; }
.lr-ruler span{ position:absolute; left:0; font-size:8.5px; letter-spacing:.08em; color:rgba(19,21,25,.6); transform:translateY(-50%); }
.lr-doc{ margin:0 0 clamp(34px,6vh,64px); font-size:11.5px; line-height:1.95; letter-spacing:.05em; }
.lr-doc-t{ margin:0 0 10px; font-size:13px; letter-spacing:.14em; }
.lr-doc dl{ margin:0; } .lr-doc dl div{ display:flex; gap:20px; }
.lr-doc dt{ min-width:9.5em; color:#565A63; } .lr-doc dd{ margin:0; }
@media (max-width:759px){ .lr-ruler{ display:none; } .lr-sheet{ padding-left:26px; } .lr-doc dt{ min-width:7.5em; } }

/* the materials, as a plate on the sheet, with the glass lying on it */
.ms{ position:relative; margin-top:clamp(64px,11vh,130px); }
.ms-head{ display:grid; gap:14px; margin-bottom:28px; }
.ms-k{ margin:0; color:var(--fg2); font-size:9.5px; letter-spacing:.22em; }
.ms-t{ margin:0; font-size:clamp(40px,6.2vw,100px); line-height:.92; letter-spacing:-.022em; font-weight:400; }
.ms-mode{ justify-self:start; font-size:9px; letter-spacing:.22em; color:var(--fg2); border-bottom:1px solid currentColor; padding:5px 0; }
.ms-mode:hover{ color:var(--fg); }
.ms-plate{ position:relative; aspect-ratio:1.42/1; --lx:80%; --ly:80%; --lr:130px; overflow:hidden;
  border-top:1px solid rgba(19,21,25,.55); border-bottom:1px solid rgba(19,21,25,.55);
  background:repeating-linear-gradient(90deg, rgba(19,21,25,.4) 0 1px, rgba(0,0,0,0) 1px 10px) 0 0/100% 8px no-repeat,
             repeating-linear-gradient(90deg, rgba(19,21,25,.55) 0 1px, rgba(0,0,0,0) 1px 50px) 0 0/100% 14px no-repeat; }
.ms-faint{ position:absolute; inset:0; opacity:.17; pointer-events:none; }
.ms-flines{ position:absolute; inset:0; width:100%; height:100%; }
.ms-flines line{ stroke:#12141A; stroke-width:1px; vector-effect:non-scaling-stroke; }
.ms-dot{ position:absolute; width:6px; height:6px; margin:-3px 0 0 -3px; border:1px solid #12141A; border-radius:50%; }
.ms-lens{ position:absolute; inset:0; clip-path:circle(var(--lr) at var(--lx) var(--ly)); -webkit-clip-path:circle(var(--lr) at var(--lx) var(--ly)); touch-action:none; }
.ms-inner{ position:absolute; inset:0; transform-origin:var(--lx) var(--ly); transform:scale(1.4);
  background:#F6F7F5 radial-gradient(120% 90% at 20% 10%, #FFFFFF, rgba(255,255,255,0) 60%); }
.ms-inner .mr-links{ position:absolute; inset:0; width:100%; height:100%; }
.ms-inner .mr-line{ stroke:#12141A; stroke-width:1px; vector-effect:non-scaling-stroke; opacity:.5; }
.ms-inner .mr-line.is-on{ opacity:1; stroke-width:1.4px; }
.ms-inner .mr-name{ color:#22252C; }
.ms-inner .mr-lab{ color:#22252C; background:rgba(246,247,245,.9); }
.ms-inner.is-reading .mr-node:not(.is-here):not(.is-near){ opacity:.45; }
.ms-loupe{ position:absolute; left:calc(var(--lx) - var(--lr)); top:calc(var(--ly) - var(--lr)); width:calc(var(--lr)*2); height:calc(var(--lr)*2); border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.7) inset, 0 0 0 2px rgba(19,21,25,.30), 0 30px 46px -12px rgba(0,0,0,.5), 0 10px 16px rgba(0,0,0,.28); }
.ms-rim{ position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 62%, rgba(255,255,255,.16) 80%, rgba(255,255,255,.55) 90%, rgba(30,34,44,.36) 96%, rgba(255,255,255,.4) 100%); }
.ms-glare{ position:absolute; left:12%; top:8%; width:56%; height:34%; border-radius:50%; mix-blend-mode:screen; filter:blur(1.5px);
  background:radial-gradient(60% 55% at 40% 45%, rgba(255,255,255,.85), rgba(255,255,255,0) 72%); transform:rotate(-24deg); }
.ms-plate:not(.is-held) .ms-glare{ animation:ms-glint 5.5s ease-in-out infinite; }
@keyframes ms-glint{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
.ms.is-page .ms-plate{ display:none; }
.ms-page{ margin-top:8px; }

#veil-rim{ position:fixed; inset:0; z-index:91; pointer-events:none; visibility:hidden; opacity:0; }
#app{ will-change:auto; }

/* ============================================================
   THE INDEX — the reel, as an overlay
   ============================================================ */
.reel{ position:fixed; inset:0; z-index:85; background:transparent; overscroll-behavior:none; touch-action:none; -webkit-tap-highlight-color:transparent; }
.reel.is-home{ z-index:40; }
.reel[hidden]{ display:none; }
.reel.is-hole{ pointer-events:none; }
.reel-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; }
.reel.is-home .reel-close, .reel.is-home .reel-mark{ display:none; }
.reel.is-going .reel-close, .reel.is-going .reel-mark, .reel.is-going .reel-cnt, .reel.is-going .reel-hint{ opacity:0; transition:opacity .22s var(--ease); }
.reel-cnt, .reel-hint{ position:absolute; bottom:clamp(24px,4.6vh,44px); font-size:9px; letter-spacing:.3em; color:rgba(236,234,229,.44); pointer-events:none; transition:opacity .6s var(--ease); }
.reel-cnt{ left:var(--gutter); }
.reel-cap{ position:absolute; left:0; right:0; text-align:center; font-size:10px; letter-spacing:.26em; color:#fff; mix-blend-mode:difference; opacity:0; pointer-events:none; transition:opacity .45s var(--ease); padding:0 var(--gutter); }
.reel-cap.is-on{ opacity:.72; }
.reel.is-home:not(.is-live) .reel-cap, .reel.is-going .reel-cap{ opacity:0; transition:opacity .22s var(--ease); }
.reel-hint{ right:var(--gutter); opacity:0; }
.reel-hint.is-on{ opacity:1; }
.reel.is-home:not(.is-live) .reel-cnt{ opacity:0; }
@media (max-width:759px){ .reel-hint{ display:none; } }
.reel-a{ position:absolute; display:block; margin:0; padding:0; color:transparent; -webkit-text-fill-color:transparent; font-family:var(--display); white-space:nowrap; text-decoration:none; line-height:1; cursor:pointer; }
.reel-a:focus-visible{ outline:1px solid rgba(255,255,255,.8); outline-offset:8px; }
.reel-close{ position:absolute; z-index:2; top:calc(var(--nav-h)*.5 - 10px); right:var(--gutter); padding:10px 0; font-size:9.5px; letter-spacing:.24em; color:var(--paper); border-bottom:1px solid currentColor; }
.reel-mark{ position:absolute; z-index:2; left:var(--gutter); top:calc(var(--nav-h)*.5 - 18px); font-family:var(--display); font-size:34px; line-height:1; color:var(--paper); }

/* the trigger: a small glass, and its name */
.nav-menu{ display:flex; align-items:center; gap:9px; margin-left:clamp(22px,3vw,44px); padding:10px 0; font-size:10.5px; letter-spacing:.24em; color:var(--fg2);
  text-shadow:0 0 12px var(--halo), 0 0 3px var(--halo); transition:color .3s var(--ease); }
.nav-menu::before{ content:""; width:11px; height:11px; border:1px solid currentColor; border-radius:50%; box-shadow:inset 2px -2px 0 -1px currentColor; opacity:.9; }
.nav-menu:hover{ color:var(--fg); }
@media (max-width:899px){
  .nav-links{ display:none; }
  .nav-menu{ margin-left:auto; font-size:9.5px; }
}

/* ============================================================
   THE ARRIVAL — the nav stays dark until the glass has let go of the word
   ============================================================ */
body.intro-on #nav{ opacity:0; }
body.intro-reveal #nav{ opacity:1; transition:opacity 1s var(--ease) .1s, color .35s var(--ease); }
body.intro-reveal #nav .nav-links a, body.intro-reveal #nav .nav-mark{ animation:navSurface 1.1s var(--swift) both; animation-delay:calc(var(--i,0)*90ms + 420ms); }
body.intro-reveal #nav .nav-mark{ animation-delay:120ms; }
@keyframes navSurface{ from{ opacity:0; filter:blur(7px); transform:translateY(5px); } to{ opacity:1; filter:blur(0); transform:none; } }

/* the index: a lens, and its name */
.nav-menu::before{ width:13px; height:13px; border:1px solid currentColor; box-shadow:none; opacity:.95;
  background:radial-gradient(circle at 30% 28%, currentColor 0 1.1px, transparent 1.7px), radial-gradient(circle at 50% 50%, transparent 54%, rgba(236,234,229,.16) 100%);
  transition:transform .5s var(--swift), box-shadow .5s var(--ease); }
.nav-menu:hover::before, .nav-menu:focus-visible::before{ transform:scale(1.32); box-shadow:0 0 14px rgba(236,234,229,.45); }
.nav-menu{ transition:color .3s var(--ease), letter-spacing .5s var(--swift); }
.nav-menu:hover{ letter-spacing:.32em; }

/* the landing is the glass: nothing else is on the page, and the index is not repeated below it */
body[data-page="landing"] .nav-menu, body[data-page="landing"] .nav-links{ display:none; }
/* ============================================================
   THE TYPE IS AN OBJECT
   Every word in the house is set the way "The Negative" is set on the
   reading table: not painted on the page but lying in it, lit by the
   same key from the upper left. On paper it is ink pressed into the
   sheet, a bright lip on the lower edge and the faintest bleed at the
   stroke; on the dark it is raised, a catch of light on the top-left
   edge and its own shadow underneath. Three strengths, so a caption is
   never as loud as a title. Zero specificity: anything with its own
   light (the safelight, the amber room) simply overrides it.
   ============================================================ */
:root, [data-tone="dark"]{
  --emb-strong:-1px -1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(255,255,255,.15), 0 2px 26px rgba(10,10,10,.55), 0 1px 3px rgba(10,10,10,.55);
  --emb-mid:0 -1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.32);
  --emb-fine:0 1px 1px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.22);
}
[data-tone="light"], .paper{
  --emb-strong:0 1px 0 rgba(255,255,255,.72), 0 2px 30px rgba(246,245,242,.8), 0 1px 2px rgba(246,245,242,.9), 0 0 1px rgba(17,17,17,.5);
  --emb-mid:0 1px 0 rgba(255,255,255,.62), 0 0 1px rgba(17,17,17,.42), 0 2px 10px rgba(246,245,242,.6);
  --emb-fine:0 1px 0 rgba(255,255,255,.55), 0 0 .6px rgba(17,17,17,.38);
}
[data-tone="red"]{
  --emb-strong:0 1px 0 rgba(255,140,120,.22), 0 2px 26px rgba(20,0,0,.65), 0 1px 3px rgba(20,0,0,.6);
  --emb-mid:0 1px 2px rgba(20,0,0,.7), 0 2px 12px rgba(20,0,0,.4);
  --emb-fine:0 1px 1px rgba(20,0,0,.7);
}
:where(h1, h2, h3, .display, .giant, blockquote){ text-shadow:var(--emb-strong); }
:where(.reading, p, li, dd, dt, td, th){ text-shadow:var(--emb-fine); }
:where(.mono, button, label, small){ text-shadow:var(--emb-fine); }
.deboss, .emboss{ text-shadow:var(--emb-strong); }

/* ============================================================
   THE LEDGER'S SHEET, AS PAPER — cotton, warm, deckled, and printed by pressure
   Not a grey page with a texture on it. A sheet: warm, with the key light
   from the upper left, an edge that is where the water stopped, and type
   that is pressed into it and not laid on it.
   ============================================================ */
.lr-wrap{ position:relative; max-width:1260px; margin:0 auto; transform-origin:50% 0;
  transition:transform 1.05s var(--swift), opacity .8s var(--ease); }
.lr-table.is-lifted .lr-wrap{ transform:perspective(1800px) translate3d(0,-14vh,0) rotateX(15deg) scale(.95); opacity:0; }
.lr-wrap > .lr-sheet{ margin:0; max-width:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 1px 0 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(96,78,52,.16), inset -2px 0 3px rgba(96,78,52,.10); }
.lr-shade{ position:absolute; inset:0; pointer-events:none; }
.lr-shade b{ position:absolute; inset:0; display:block; }
.lr-shade b:nth-child(1){ transform:translate(0,3px); filter:blur(1.6px); opacity:.7; }
.lr-shade b:nth-child(2){ transform:translate(4px,34px) scale(.985); filter:blur(28px); opacity:.62; }
.lr-shade i{ position:absolute; inset:0; display:block; background:#000; }
.lr-sheet{ background-color:#EFEBE1; color:#1A1815;
  --fg:#1A1815; --fg2:#5B564D; --fg3:rgba(26,24,21,.46); --rule:rgba(26,24,21,.28);
  background-image:
    linear-gradient(112deg, rgba(255,252,244,0) calc(var(--sx)*60% + 6%), rgba(255,252,244,.46) calc(var(--sx)*60% + 20%), rgba(255,252,244,0) calc(var(--sx)*60% + 36%)),
    radial-gradient(135% 85% at 7% 0%, rgba(255,253,246,.9), rgba(255,253,246,0) 62%),
    linear-gradient(162deg, rgba(0,0,0,0) 38%, rgba(104,84,52,.22) 100%),
    var(--paper-photo, none), var(--paper-photo, none), var(--fibre);
  background-size:100% 100%, 100% 100%, 100% 100%, 760px 760px, 1730px 1730px, 180px 180px;
  background-blend-mode:normal, normal, normal, multiply, soft-light, normal; }
.lr-sheet::after{ background:radial-gradient(120% 100% at 50% 40%, rgba(0,0,0,0) 58%, rgba(96,78,52,.20) 100%); }
/* the type is pressed: a bright lip where the light catches the far wall of the impression, the near wall in shadow, a hair of ink spread */
.lr-sheet :where(p, dt, dd, button, li, .mono, .reading, .display, h1, h2, h3, h4){
  text-shadow:0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(70,52,26,.26), 0 0 1.3px rgba(26,24,21,.42); }
.lr-sheet .mono{ font-weight:500; }
.lr-sheet .display{ text-shadow:0 1.5px 0 rgba(255,255,255,.95), 0 -1px 0 rgba(70,52,26,.32), 0 0 2px rgba(26,24,21,.4), 0 3px 10px rgba(255,252,244,.6); }
.lr-sheet .lr-row{ border-bottom-color:rgba(26,24,21,.24); box-shadow:0 1px 0 rgba(255,255,255,.8); }
.lr-sheet .lr-list{ border-top-color:#1A1815; box-shadow:0 1px 0 rgba(255,255,255,.8), inset 0 1px 0 rgba(26,24,21,.5); }
.lr-sheet .lr-sort.is-on{ background:#1A1815; text-shadow:0 -1px 0 rgba(0,0,0,.6); }
.lr-x, .lr-ruler{ filter:drop-shadow(0 1px 0 rgba(255,255,255,.75)); }

/* the tabs of the two leaves: a folder, and the one behind it */
.lr-tabs{ position:absolute; left:clamp(30px,6vw,96px); bottom:calc(100% - 1px); z-index:2; display:flex; align-items:flex-end; gap:6px; }
.lr-tab{ position:relative; display:flex; align-items:baseline; gap:12px; height:34px; padding:0 22px 0; border-radius:7px 7px 0 0; font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; color:#2A261F;
  transition:transform .55s var(--swift), box-shadow .5s var(--ease), background .4s; text-shadow:0 1px 0 rgba(255,255,255,.55); align-items:center; }
.lr-tab em{ font-style:normal; color:rgba(42,38,31,.6); }
.lr-tab.is-front{ background:#EFEBE1 var(--paper-photo, none); background-size:760px; height:38px; z-index:2; color:#1A1815; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 -2px 6px rgba(0,0,0,.35); }
.lr-tab-m{ background:linear-gradient(180deg, #CFC6B0, #BDB39A); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 -2px 6px rgba(0,0,0,.4); margin-left:-4px; }
.lr-tab-m:hover, .lr-tab-m:focus-visible{ transform:translateY(-7px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 -10px 34px rgba(226,236,255,.65), 0 -2px 6px rgba(0,0,0,.4); }
.lr-tab-m:hover em{ color:#1A1815; }
/* a corner has been turned up, and under it is the light */
.lr-peel{ position:absolute; right:0; bottom:0; z-index:3; width:74px; height:74px; padding:0; cursor:pointer; background:none; transition:width .55s var(--swift), height .55s var(--swift); }
.lr-peel:hover, .lr-peel:focus-visible{ width:118px; height:118px; }
.lr-peel i{ position:absolute; inset:0; display:block;
  background:linear-gradient(315deg, #fff 0 46%, rgba(255,255,255,0) 46.4%), linear-gradient(135deg, rgba(0,0,0,0) 0 46%, rgba(255,252,244,0) 46%);
  filter:drop-shadow(0 0 16px rgba(226,236,255,.9)); }
.lr-peel i::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, #FBF8F0 0%, #E6E0D2 44%, #C9C1AE 50%, rgba(0,0,0,0) 50.4%);
  clip-path:polygon(0 0, 100% 0, 0 100%); filter:drop-shadow(-3px -3px 5px rgba(60,44,20,.32)); transform:translate(0,0); }
@media (max-width:759px){ .lr-tabs{ left:20px; } .lr-tab{ padding:0 14px; font-size:8.5px; letter-spacing:.18em; } .lr-peel{ width:56px; height:56px; } }

/* ============================================================
   THE MATERIAL LIBRARY — the table under the sheet, lit from below
   ============================================================ */
.lib{ position:fixed; inset:0; z-index:44; background:#020202; color:var(--paper); overflow:hidden; --lit:0; --in:0; --D:300px; opacity:var(--in);
  --fg:var(--paper); --fg2:var(--silver); --fg3:var(--smoke); --rule:rgba(236,234,229,.2); }
.lib.is-out{ opacity:0; transition:opacity .6s var(--ease); }
.lib-head{ position:absolute; left:var(--gutter); top:calc(var(--nav-h) + 1.2vh); z-index:3; pointer-events:none; }
.lib-k{ color:var(--silver); font-size:9.5px; letter-spacing:.26em; }
.lib-t{ font-size:clamp(34px,4.2vw,68px); line-height:.9; margin:.12em 0 0 -.02em; }
.lib-hint{ position:absolute; right:var(--gutter); top:calc(var(--nav-h) + 1.6vh); margin:0; font-size:9px; letter-spacing:.24em; color:var(--smoke); text-align:right; z-index:3; }

.lib-table{ position:absolute; left:clamp(10px,2.4vw,40px); right:clamp(10px,2.4vw,40px); top:calc(var(--nav-h) + clamp(74px,14vh,140px)); bottom:clamp(118px,19vh,186px);
  border-radius:3px; overflow:hidden; background:#000; cursor:grab; touch-action:pan-y; color:#161B28;
  box-shadow:0 0 0 1px rgba(255,255,255,calc(.14*var(--lit))), 0 0 calc(70px*var(--lit)) calc(6px*var(--lit)) rgba(228,236,255,calc(.34*var(--lit))), 0 0 calc(260px*var(--lit)) calc(60px*var(--lit)) rgba(196,212,255,calc(.18*var(--lit))); }
.lib-table:active{ cursor:grabbing; }
.lib-light{ position:absolute; inset:0; opacity:var(--lit);
  background:radial-gradient(92% 130% at 50% 44%, #FFFFFF 0%, #F7F9FD 40%, #E4E9F3 100%),
             repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 118px, rgba(20,30,70,.04) 118px 120px); background-blend-mode:normal; }
.lib-light::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 90px rgba(20,32,80,.16), inset 0 0 0 1px rgba(255,255,255,.7); pointer-events:none; }
.lib-grain{ position:absolute; inset:0; mix-blend-mode:multiply; opacity:calc(.55*var(--lit)); background-image:var(--fibre); background-size:180px 180px; pointer-events:none; }
.lib-ring{ position:absolute; border-radius:50%; transform:translate(-50%,-50%); border:1px dashed rgba(20,28,52,.42); pointer-events:none; animation:lib-orbit 140s linear infinite; }
.lib-ring i{ position:absolute; border-radius:50%; pointer-events:none; }
.lib-ring-a{ left:-16%; top:-16%; right:-16%; bottom:-16%; border:1px dashed rgba(20,28,52,.2); }
.lib-ring-b{ left:-1px; top:-1px; width:9px; height:9px; margin:-4px 0 0 -4px; background:none; border:1px solid rgba(20,28,52,.6); left:50%; top:0; }
.lib-ring::before, .lib-ring::after{ content:""; position:absolute; background:rgba(20,28,52,.5); }
.lib-ring::before{ left:50%; top:-9px; width:1px; height:18px; } .lib-ring::after{ top:50%; left:-9px; height:1px; width:18px; }
.lib-ring.is-turn{ animation:lib-orbit 140s linear infinite, lib-ping 1s var(--swift); }
@keyframes lib-orbit{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes lib-ping{ 0%{ border-color:rgba(20,28,52,.9); } 100%{ border-color:rgba(20,28,52,.42); } }
.lib-axis{ position:absolute; left:0; right:0; height:0; border-top:1px dashed rgba(20,28,52,.2); pointer-events:none; }
.lib-belt{ position:absolute; inset:0; }
.lib-disc{ position:absolute; left:0; top:0; padding:0; border-radius:50%; cursor:pointer; opacity:0; filter:blur(var(--b,0px)); will-change:transform,opacity; -webkit-tap-highlight-color:transparent; --f:0; }
.lib-disc:focus-visible{ outline:1px solid rgba(20,28,52,.9); outline-offset:8px; }
.lib-disc::after{ content:""; position:absolute; inset:-1%; border-radius:50%; z-index:-1; pointer-events:none;
  box-shadow:0 20px 50px -10px rgba(16,24,56,calc(.46*var(--f))), 0 3px 9px rgba(16,24,56,calc(.28 + .2*var(--f))); }
.lib-face{ position:absolute; inset:0; border-radius:50%; overflow:hidden; background:#E7E9EE; box-shadow:inset 0 0 0 1px rgba(20,28,52,.28), inset 0 0 28px rgba(20,28,52,.24); }
.lib-art{ width:100%; height:100%; display:block; opacity:0; transform:scale(calc(1 + .18*var(--f))); filter:brightness(1.14) saturate(.92); transition:opacity .7s var(--ease); }
.lib-disc.is-drawn .lib-art{ opacity:1; }
.lib-rim{ position:absolute; inset:-1px; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,calc(.30 + .55*var(--f))), inset 0 0 0 3px rgba(20,28,52,.36), inset 9px -11px 24px rgba(255,255,255,calc(.30*var(--f))), inset -12px 14px 28px rgba(20,28,52,calc(.22*var(--f))); }
.lib-glare{ position:absolute; left:15%; top:9%; width:44%; height:24%; border-radius:50%; pointer-events:none; mix-blend-mode:screen; filter:blur(1.2px);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0)); transform:rotate(-24deg); opacity:calc(.9*var(--f)); }
.lib-cap{ position:absolute; left:0; top:0; width:220px; margin:0 0 0 -110px; display:grid; gap:4px; justify-items:center; text-align:center; color:#161B28; pointer-events:none; text-shadow:0 1px 0 rgba(255,255,255,.7); }
.lib-cap-n{ font-size:10px; letter-spacing:.26em; } .lib-cap-k{ font-size:8.5px; letter-spacing:.22em; color:rgba(22,27,40,.55); }
.lib-note{ position:absolute; margin:0; display:grid; gap:3px; max-width:230px; font-size:9.5px; line-height:1.5; letter-spacing:.14em; color:#161B28; pointer-events:none; transition:opacity .5s var(--ease); text-shadow:0 1px 0 rgba(255,255,255,.7); }
.lib-note.is-empty{ opacity:0; }
.lib-note-l{ display:block; font-size:8.5px; letter-spacing:.26em; color:rgba(22,27,40,.5); }
.lib-note-v{ display:block; }
.lib-note::before{ content:""; position:absolute; top:.85em; left:-30px; width:24px; height:1px; background:rgba(22,27,40,.5); }
.lib-note.is-left{ text-align:right; transform:translateX(-100%); }
.lib-note.is-left::before{ left:auto; right:-30px; }
.lib-note.is-left{ margin-left:-30px; } .lib-note:not(.is-left){ margin-left:30px; }

.lib-foot{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(18px,3.4vh,38px); z-index:3; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:18px 26px; }
.lib-foot-l{ display:grid; gap:6px; min-width:0; }
.lib-count{ color:var(--silver); font-size:9.5px; letter-spacing:.26em; }
.lib-name{ font-size:clamp(26px,3.2vw,50px); line-height:.92; margin:0; }
.lib-kind{ color:var(--smoke); font-size:9px; letter-spacing:.22em; margin:0; }
.lib-foot-m{ display:flex; align-items:center; gap:18px; }
.lib-pips{ display:flex; align-items:flex-end; gap:0; height:26px; }
.lib-pip{ position:relative; width:11px; height:26px; padding:0; }
.lib-pip::before{ content:""; position:absolute; left:5px; bottom:0; width:1px; height:9px; background:rgba(236,234,229,.4); transition:height .4s var(--swift), background .3s; }
.lib-pip.is-here::before{ height:26px; background:#fff; box-shadow:0 0 8px rgba(255,255,255,.7); }
.lib-pip:hover::before{ height:16px; background:rgba(236,234,229,.8); }
.lib-step{ padding:10px 13px; border:1px solid rgba(236,234,229,.26); font-size:13px; letter-spacing:0; transition:border-color .3s, background .3s; }
.lib-step:hover{ border-color:var(--paper); background:rgba(236,234,229,.06); }
.lib-foot-r{ display:grid; gap:10px; justify-items:end; }
.lib-open{ color:#fff; font-size:10px; letter-spacing:.24em; border-bottom:1px solid currentColor; padding:8px 0; }
.lib-back{ color:var(--silver); font-size:9.5px; letter-spacing:.24em; padding:6px 0; transition:color .3s; }
.lib-back:hover{ color:var(--paper); }
@media (max-width:759px){
  .lib-foot{ grid-template-columns:1fr; gap:12px; } .lib-foot-m{ order:3; } .lib-foot-r{ justify-items:start; grid-auto-flow:column; justify-content:space-between; }
  .lib-hint{ display:none; } .lib-table{ bottom:clamp(170px,27vh,230px); }
  .lib-pip{ width:8px; } .lib-pip::before{ left:3px; }
}

/* one, laid on the light and turned in the hand */
.lib-detail{ position:absolute; inset:0; z-index:4; background:#030303; opacity:0; visibility:hidden; transition:opacity .7s var(--ease), visibility 0s linear .7s; }
.lib.is-detail .lib-detail{ opacity:1; visibility:visible; transition:opacity .7s var(--ease); }
.lib.is-detail .lib-table, .lib.is-detail .lib-foot, .lib.is-detail .lib-head, .lib.is-detail .lib-hint{ opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
.lib-3d{ position:absolute; inset:0; cursor:grab; touch-action:none; }
.lib-3d canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.lib-flat{ position:absolute !important; inset:auto !important; left:50%; top:52%; width:min(64vw, 100vh); height:auto !important; transform:translate(-50%,-50%); opacity:0; pointer-events:none; }
.lib-3d.is-unavailable .lib-flat{ opacity:1; }
.lib-d-head{ position:absolute; left:var(--gutter); top:calc(var(--nav-h) + 3vh); z-index:2; pointer-events:none; max-width:min(56vw, 900px); }
.lib-d-no{ color:var(--silver); font-size:9.5px; letter-spacing:.26em; margin:0 0 10px; }
.lib-d-name{ font-size:clamp(44px,7vw,116px); line-height:.86; margin:0 0 0 -.03em; }
.lib-d-info{ position:absolute; right:var(--gutter); top:calc(var(--nav-h) + 4vh); bottom:clamp(88px,14vh,130px); width:min(400px,34vw); overflow:auto; padding:0 6px 0 22px; z-index:2;
  scrollbar-width:none; padding:22px 24px; background:rgba(4,5,8,.78); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(236,234,229,.10); align-self:start; bottom:auto; max-height:calc(100% - var(--nav-h) - 130px); }
.lib-d-info::-webkit-scrollbar{ display:none; }
.lib-d-name.is-long{ font-size:clamp(34px,4.6vw,76px); }
.lib-d-note{ margin:0 0 22px; font-size:15.5px; line-height:1.6; color:rgba(236,234,229,.86); }
.lib-d-foot{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(18px,3.4vh,38px); z-index:3; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.lib-d-nav{ display:flex; gap:10px; }
.lib-d-turn{ margin:0; color:var(--smoke); font-size:9px; letter-spacing:.22em; text-align:center; }
.lib-d-back{ color:var(--paper); font-size:10px; letter-spacing:.24em; border-bottom:1px solid currentColor; padding:8px 0; }
.lib-detail.is-swap .lib-d-head, .lib-detail.is-swap .lib-d-info{ animation:lib-swap .7s var(--swift); }
@keyframes lib-swap{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (max-width:899px){
  .lib-d-info{ left:var(--gutter); right:var(--gutter); width:auto; top:auto; bottom:clamp(84px,13vh,120px); max-height:30vh; padding:12px 0 0; background:linear-gradient(0deg, rgba(3,3,3,.86), rgba(3,3,3,0)); }
  .lib-d-turn{ display:none; } .lib-d-head{ max-width:88vw; }
}

.lib-d-info .spec-block{ margin-top:0; }
.lib-d-info .lib-d-note{ margin-top:0; }

/* ============================================================
   INSTRUMENTS — black cards, one object each, a line of type in the corner
   ============================================================ */
.eq-wall{ grid-template-columns:repeat(auto-fill, minmax(min(280px,84vw),1fr)); gap:clamp(10px,1.4vw,20px); }
.eq-niche{ position:relative; display:grid; align-content:center; justify-items:center; aspect-ratio:4/4.6; padding:0; background:#040404; overflow:hidden;
  border:1px solid rgba(236,234,229,.09); transition:border-color .5s var(--ease), background .5s var(--ease); }
.eq-niche::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s var(--ease);
  background:radial-gradient(60% 46% at 50% 50%, rgba(236,234,229,.10), rgba(236,234,229,0) 72%); }
.eq-niche:hover{ border-color:rgba(236,234,229,.3); }
.eq-niche:hover::before, .eq-niche:focus-visible::before{ opacity:1; }
.eq-niche canvas{ width:82%; height:auto; transition:transform .8s var(--swift); filter:drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.eq-niche:hover canvas{ transform:translateY(-4px) scale(1.03); }
.eq-niche .eq-cap{ position:absolute; left:14px; top:13px; right:14px; text-align:left; color:var(--silver); font-size:8.5px; letter-spacing:.2em; line-height:1.7; }
.eq-group{ margin-top:9vh; }

/* ============================================================
   THE DIAL — an analogue selector on a printed scale
   ============================================================ */
.dial{ position:relative; width:290px; height:236px; color:var(--paper); --dial-accent:#ECEAE5; pointer-events:none; user-select:none; -webkit-user-select:none; }
.dial > *{ pointer-events:auto; }
.dial-label{ position:absolute; right:14px; top:0; margin:0; font-size:9px; letter-spacing:.3em; color:var(--silver); text-align:right; }
.dial-say{ position:absolute; right:14px; bottom:0; margin:0; font-size:9.5px; letter-spacing:.24em; color:var(--paper); text-align:right; }
.dial-scale{ position:absolute; right:58px; top:50%; width:0; height:0; pointer-events:none; }
.dial-tick{ position:absolute; left:0; top:0; width:9px; height:1px; margin:-.5px 0 0 0; background:rgba(236,234,229,.34); transform-origin:0 50%; transition:background .35s, width .35s var(--swift); }
.dial-tick.is-on{ background:var(--dial-accent); width:14px; box-shadow:0 0 6px var(--dial-accent); }
.dial-opt{ position:absolute; left:0; top:0; padding:5px 8px 5px 0; white-space:nowrap; font-size:9px; letter-spacing:.2em; color:rgba(236,234,229,.46); text-align:right; pointer-events:auto; cursor:pointer; transition:color .35s; }
.dial-opt:hover{ color:var(--paper); }
.dial-opt.is-on{ color:#fff; }
.dial-opt.is-on::after{ content:""; display:inline-block; width:5px; height:5px; margin-left:8px; border-radius:50%; background:var(--dial-accent); box-shadow:0 0 8px var(--dial-accent); vertical-align:1px; }
.dial-knob{ position:absolute; right:14px; top:50%; width:88px; height:88px; margin-top:-44px; border-radius:50%; cursor:grab; touch-action:none; outline-offset:6px;
  box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 12px 24px -4px rgba(0,0,0,.7), 0 2px 5px rgba(0,0,0,.6); }
.dial-knob.is-held{ cursor:grabbing; }
.dial-rotor{ position:absolute; inset:0; border-radius:50%; transition:transform .5s cubic-bezier(.2,1.6,.4,1);
  background:conic-gradient(from 20deg, #d6d4cf, #5b5955 10%, #ecebe6 22%, #4b4945 36%, #dcdad5 50%, #5a5854 63%, #efeeea 78%, #54524e 90%, #d6d4cf); }
.dial-knurl{ position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(rgba(0,0,0,.34) 0 1.6deg, rgba(0,0,0,0) 1.6deg 6deg); -webkit-mask:radial-gradient(circle, transparent 60%, #000 62%); mask:radial-gradient(circle, transparent 60%, #000 62%); }
.dial-cap{ position:absolute; inset:14px; border-radius:50%; background:radial-gradient(circle at 32% 26%, #74716c, #23221f 58%, #0b0b0a); box-shadow:inset 0 2px 2px rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.55); }
.dial-notch{ position:absolute; left:5px; top:50%; width:18px; height:3px; margin-top:-1.5px; border-radius:2px; background:var(--dial-accent); box-shadow:0 0 9px var(--dial-accent), 0 0 2px rgba(0,0,0,.6); transition:background .4s, box-shadow .4s; }
.dial-gloss{ position:absolute; inset:0; border-radius:50%; pointer-events:none; background:radial-gradient(ellipse 46% 26% at 34% 18%, rgba(255,255,255,.34), rgba(255,255,255,0) 70%); }
.dial.is-clicked .dial-notch{ animation:dial-click .35s var(--swift); }
@keyframes dial-click{ 0%{ transform:scaleX(1.5); } 100%{ transform:none; } }
.dial-knob:focus-visible{ outline:1px solid var(--dial-accent); }
body[data-safelight="on"] .dial{ filter:sepia(1) saturate(3.6) hue-rotate(-40deg) brightness(.92); }
@media (max-width:759px){ .dial{ width:236px; height:200px; zoom:.9; } }

/* the dials, where a stage keeps them: the right of the screen, over the light */
.pj-dials{ position:fixed; right:calc(var(--gutter) - 12px); top:50%; z-index:47; display:grid; gap:8px; transform:translateY(-50%); pointer-events:none; }
.pj-dial-slot{ display:none; }
.pj-dial-slot.is-on{ display:block; animation:pjd-in .7s var(--swift); }
@keyframes pjd-in{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
@media (max-width:1099px){ .pj-dials{ top:auto; bottom:72px; transform:none; right:0; } }

/* 05 · what is in the frame is two short lines, above the name and clear of it */
.fx-type{ bottom:clamp(262px,38vh,400px); max-width:min(44ch,44vw); }
.fx-inframe{ white-space:pre-line; }

.dial-say{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.dial{ height:224px; }

/* ---------- moving type: what each kind of line is made of ---------- */
.kn-c{ display:inline-block; will-change:opacity, filter, transform; transform-origin:50% 80%; }
.kn-w{ display:inline-block; white-space:nowrap; opacity:1; }
.kn-say .kn-w, .kn-pull .kn-w, .kn-ask .kn-w{ opacity:1; }
.kn-c{ opacity:0; }
.kn-pull{ transform-origin:50% 50%; will-change:transform, filter, opacity, letter-spacing; opacity:0; }
.kn-read .kn-l{ display:block; overflow:hidden; padding:.08em 0 .14em; margin:-.08em 0 -.14em; }
.kn-read .kn-li{ display:block; will-change:transform, opacity; transform:translate3d(0,108%,0); opacity:0; transform-origin:0 100%; }
.kn-read .kn-w{ white-space:normal; }
.kn-read{ opacity:1; }

.dial-links{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.dial-links line{ stroke:rgba(236,234,229,.16); stroke-width:1; transition:stroke .35s; }
.dial-links line.is-on{ stroke:var(--dial-accent); }
.dial[data-count="8"], .dial[data-count="7"], .dial[data-count="6"]{ width:330px; }
/* the words go over the bench and over the sheet on it: dark where the sheet is light, light where it is not */
.pj-flow{ z-index:auto; }
.st-03 .pj-beat-in{ mix-blend-mode:difference; color:#fff; }
.st-03 .pj-beats[data-tone="dark"]{ text-shadow:none; }

/* ============================================================
   04 — THE SAFELIGHT: a room lit by one bulb, from everywhere
   ============================================================ */
.pj-stage.is-warm{ animation:none; }
.dk-red{ opacity:var(--warm,0); transition:none; mix-blend-mode:multiply;
  background:radial-gradient(150% 130% at 86% 0%, #F0382C 0%, #B92E24 26%, #7E1C15 58%, #5A1410 100%); }
.dk-glow{ opacity:var(--warm,0); transition:none; mix-blend-mode:screen;
  background:
    radial-gradient(30% 26% at 87% 4%, rgba(255,150,118,.74) 0%, rgba(214,70,54,.38) 36%, rgba(214,70,54,0) 74%),
    radial-gradient(70% 60% at 12% 92%, rgba(214,66,52,.26) 0%, rgba(214,66,52,0) 70%),
    radial-gradient(60% 50% at 96% 78%, rgba(214,66,52,.20) 0%, rgba(214,66,52,0) 70%),
    radial-gradient(80% 64% at 50% 46%, rgba(214,66,52,.24) 0%, rgba(214,66,52,0) 72%),
    linear-gradient(180deg, rgba(190,50,38,.10), rgba(190,50,38,.10)); }
.dk-torch{ position:absolute; left:0; top:0; width:0; height:0; pointer-events:none; opacity:0; mix-blend-mode:screen; z-index:3; }
.dk-torch::before{ content:""; position:absolute; left:-200px; top:-200px; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,170,140,.62) 0%, rgba(255,90,64,.30) 22%, rgba(255,60,40,.10) 48%, rgba(255,60,40,0) 70%); }
.dk-bulb{ position:absolute; right:calc(clamp(28px,7vw,120px) + 22px - 13px); top:clamp(150px,26vh,260px); width:26px; height:26px; margin-top:-6px; border-radius:50%; z-index:3; pointer-events:none;
  background:radial-gradient(circle at 42% 38%, rgb(calc(90 + 165*var(--warm,0)), calc(40 + 110*var(--warm,0)), calc(30 + 90*var(--warm,0))) 0%, rgb(calc(60 + 195*var(--warm,0)), calc(20 + 30*var(--warm,0)), 14) 60%, #1a0605 100%);
  box-shadow:0 0 calc(50px*var(--warm,0)) calc(14px*var(--warm,0)) rgba(255,64,40,calc(.75*var(--warm,0))), 0 0 calc(160px*var(--warm,0)) calc(48px*var(--warm,0)) rgba(255,50,30,calc(.32*var(--warm,0))); }
.dk-chain{ z-index:5; }

/* the negative: held loose */
.dk-neg{ position:absolute; left:0; top:0; z-index:3; cursor:grab; touch-action:none; will-change:transform; outline-offset:8px;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)); }
.dk-neg[hidden]{ display:none; }
.dk-neg canvas{ display:block; width:100%; height:100%; border:1px solid rgba(255,255,255,.28); background:rgba(230,236,240,.10); }
.dk-neg.is-held{ cursor:grabbing; }
.dk-neg.is-locked{ cursor:default; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); transition:filter .2s; }
.dk-neg-x{ position:absolute; width:14px; height:14px; pointer-events:none; opacity:.9;
  background:linear-gradient(#fff,#fff) 50% 0/1px 100% no-repeat, linear-gradient(#fff,#fff) 0 50%/100% 1px no-repeat; }
.dk-neg-tl{ left:-7px; top:-7px; } .dk-neg-tr{ right:-7px; top:-7px; } .dk-neg-bl{ left:-7px; bottom:-7px; } .dk-neg-br{ right:-7px; bottom:-7px; }
.dk-neg:focus-visible{ outline:1px solid rgba(255,255,255,.7); }
.pj-stage.is-snapped .dk-bench{ animation:dk-snap .34s linear 1; }
.pj-stage.is-snapped .dk-neg::after{ content:""; position:absolute; inset:-14px; border:2px solid rgba(255,255,255,.9); animation:dk-ring .6s var(--swift) 1 forwards; pointer-events:none; }
@keyframes dk-snap{ 0%{ transform:translate(0,0); filter:brightness(1.5); } 12%{ transform:translate(-4px,2px); } 24%{ transform:translate(3px,-2px); filter:brightness(1.15); } 40%{ transform:translate(-2px,1px); } 60%{ transform:translate(1px,0); } 100%{ transform:none; filter:none; } }
@keyframes dk-ring{ from{ opacity:1; transform:scale(.94); } to{ opacity:0; transform:scale(1.22); } }
.dk-again{ position:absolute; left:var(--gutter); top:calc(var(--nav-h) + 96px); z-index:4; font-size:9px; letter-spacing:.26em; color:rgba(236,234,229,.6); border-bottom:1px solid currentColor; padding:5px 0; }
.dk-again[hidden]{ display:none; }
.dk-kbd{ position:absolute; left:var(--gutter); bottom:22vh; z-index:5; }
.pj-stage.is-kbd .dk-bench{ outline:1px dashed rgba(236,234,229,.4); outline-offset:-24px; }

/* under the safelight, the words are lit by it: ivory where it falls, a dying red where it does not, with a bright edge toward the bulb */
body[data-safelight="on"] .pj-beat-in, body[data-safelight="on"] .pj-open .pj-type{
  --lit:.6; --lxs:-1; --lys:1;
  color:#FFD4C6; color:color-mix(in srgb, #FFE3D8 calc(var(--lit)*100%), #7A2A20);
  text-shadow:calc(var(--lxs)*1.6px) calc(var(--lys)*1.6px) 0 rgba(255,222,204,calc(.16 + var(--lit)*.5)),
              0 0 calc(8px + var(--lit)*34px) rgba(255,58,34,calc(var(--lit)*.62)),
              0 3px 10px rgba(30,0,0,.75); }
body[data-safelight="on"] .pj-beat-ask .kn, body[data-safelight="on"] .pj-no, body[data-safelight="on"] .pj-role, body[data-safelight="on"] .pidx{ color:#FF6A52; text-shadow:0 0 12px rgba(255,50,30,.5); }
body[data-safelight="on"] .pj-open .pj-name{ text-shadow:calc(var(--lxs,-1)*2px) calc(var(--lys,1)*2px) 0 rgba(255,222,204,calc(.16 + var(--lit,.6)*.5)), 0 0 calc(12px + var(--lit,.6)*46px) rgba(255,58,34,calc(var(--lit,.6)*.7)), 0 4px 14px rgba(30,0,0,.8); }

.dk-chain{ right:auto; left:clamp(262px,21vw,340px); flex-direction:column; }
.dk-bulb{ position:relative; right:auto; top:auto; margin:0 0 -8px; flex:none; }
.dk-red{ background:radial-gradient(150% 130% at var(--bx,86%) var(--by,0%), #F0382C 0%, #B92E24 26%, #7E1C15 58%, #5A1410 100%); }
.dk-glow{ background:
    radial-gradient(30% 26% at var(--bx,87%) var(--by,4%), rgba(255,150,118,.74) 0%, rgba(214,70,54,.38) 36%, rgba(214,70,54,0) 74%),
    radial-gradient(70% 60% at 88% 92%, rgba(214,66,52,.26) 0%, rgba(214,66,52,0) 70%),
    radial-gradient(60% 50% at 6% 78%, rgba(214,66,52,.20) 0%, rgba(214,66,52,0) 70%),
    radial-gradient(80% 64% at 50% 46%, rgba(214,66,52,.24) 0%, rgba(214,66,52,0) 72%),
    linear-gradient(180deg, rgba(190,50,38,.10), rgba(190,50,38,.10)); }
.dk-neg canvas{ background:none; border:0; box-shadow:0 8px 18px rgba(0,0,0,.35); }
.dk-neg-x{ background:linear-gradient(#111,#111) 50% 0/1px 100% no-repeat, linear-gradient(#111,#111) 0 50%/100% 1px no-repeat; filter:drop-shadow(0 0 1px rgba(255,255,255,.9)); }
.dial::before{ content:""; position:absolute; inset:-18px -30px -18px -60px; pointer-events:none; z-index:-1;
  background:radial-gradient(60% 60% at 62% 50%, rgba(6,6,6,.62), rgba(6,6,6,0) 72%); }

/* ---------- 06 — the tray, its tools, and what is said about the bath ---------- */
.wt-tools{ position:absolute; left:var(--gutter); bottom:clamp(96px,15vh,150px); z-index:4; display:grid; gap:10px; justify-items:start; }
.wt-btn{ padding:9px 0 7px; font-size:9.5px; letter-spacing:.24em; color:rgba(236,234,229,.62); border-bottom:1px solid rgba(236,234,229,.22); transition:color .3s var(--ease), border-color .3s var(--ease); touch-action:none; }
.wt-btn:hover, .wt-btn:focus-visible{ color:var(--paper); border-bottom-color:var(--paper); }
.wt-btn[hidden]{ display:none; }
.wt-tongs.is-held{ cursor:grabbing; color:#fff; z-index:9; text-shadow:0 8px 20px rgba(0,0,0,.6); }
.wt-line{ bottom:clamp(60px,9vh,96px); }

.wt-tools{ bottom:auto; top:calc(var(--nav-h) + 74px); }
.water-label{ top:calc(var(--nav-h) + 26px); }

/* ---------- 07 — the bath is a dial; the kiln is hot; the film comes away ---------- */
.al-flake{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; filter:drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.al-heat{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1.6s var(--ease); mix-blend-mode:screen; z-index:1;
  background:radial-gradient(70% 60% at 50% 100%, rgba(255,120,30,.55) 0%, rgba(210,60,10,.24) 40%, rgba(120,20,0,0) 78%), radial-gradient(90% 90% at 50% 50%, rgba(200,50,10,.10), rgba(200,50,10,0) 70%); }
.pj-stage.is-hot .al-heat{ opacity:1; animation:al-glow 2.6s ease-in-out infinite alternate; }
.pj-stage.is-hot .al-tilt{ animation:al-shimmer 1.1s linear infinite; filter:saturate(1.25) contrast(1.06) brightness(1.06); }
@keyframes al-glow{ from{ opacity:.78; } to{ opacity:1; } }
@keyframes al-shimmer{ 0%{ translate:0 0; } 25%{ translate:1.2px -1px; } 50%{ translate:-1px .8px; } 75%{ translate:.8px .6px; } 100%{ translate:0 0; } }
.al-agent{ display:none; }

/* ============================================================
   THE CERTIFICATE — composed, and pressed into the sheet
   ============================================================ */
.cert{ position:relative; width:min(380px,100%); aspect-ratio:3/4.1; padding:clamp(22px,2.6vw,34px) clamp(22px,2.6vw,32px) clamp(22px,2.4vw,30px); color:#1A1815; text-align:left;
  display:grid; grid-template-rows:auto auto auto auto 1fr auto; row-gap:12px;
  background-color:#EFEBE1; background-image:var(--fibre), var(--paper-photo, none); background-size:180px 180px, 760px 760px; background-blend-mode:normal, multiply;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(96,78,52,.14), 0 1px 0 rgba(0,0,0,.4), 0 18px 34px -6px rgba(0,0,0,.55), 0 46px 80px -14px rgba(0,0,0,.6);
  --emb-strong:0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(70,52,26,.3), 0 0 2px rgba(26,24,21,.4), 0 3px 10px rgba(255,252,244,.6);
  --emb-fine:0 1px 0 rgba(255,255,255,.85), 0 -1px 0 rgba(70,52,26,.22), 0 0 1.2px rgba(26,24,21,.4); }
.cert *{ text-shadow:var(--emb-fine); }
.cert-corner{ position:absolute; width:16px; height:16px; border-color:rgba(26,24,21,.5); border-style:solid; border-width:0; pointer-events:none; }
.cert-c1{ left:12px; top:12px; border-left-width:1px; border-top-width:1px; } .cert-c2{ right:12px; top:12px; border-right-width:1px; border-top-width:1px; }
.cert-c3{ left:12px; bottom:12px; border-left-width:1px; border-bottom-width:1px; } .cert-c4{ right:12px; bottom:12px; border-right-width:1px; border-bottom-width:1px; }
.cert-k{ margin:0; font-size:9px; letter-spacing:.3em; color:#5B564D; }
.cert-t{ margin:0; font-size:clamp(36px,3.6vw,52px); line-height:.9; letter-spacing:-.02em; text-shadow:var(--emb-strong); }
.cert-w{ margin:0; font-size:clamp(19px,1.9vw,26px); font-style:italic; line-height:1.1; color:#3C372F; }
.cert-dl{ margin:4px 0 0; display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:6px; font-size:10px; letter-spacing:.12em; line-height:1.5; border-top:1px solid rgba(26,24,21,.3); padding-top:12px; }
.cert-dl dt{ color:#6D675C; font-size:8.5px; letter-spacing:.2em; padding-top:1px; } .cert-dl dd{ margin:0; color:#1A1815; }
.cert-arc{ display:inline-flex; gap:5px; letter-spacing:0; } .cert-arc i{ font-style:normal; font-size:11px; }
.cert-verdict{ margin:0; align-self:end; font-size:clamp(24px,2.5vw,34px); line-height:1.02; letter-spacing:-.012em; text-shadow:var(--emb-strong); }
.cert-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.cert-note{ margin:0; font-size:7.5px; letter-spacing:.18em; line-height:1.9; color:#6D675C; max-width:24ch; }
.cert-seal{ position:relative; flex:none; width:58px; height:58px; border-radius:46% 54% 50% 50%/52% 46% 54% 48%; display:grid; place-items:center;
  background:radial-gradient(circle at 34% 28%, #F6B15A 0%, #DB7F26 42%, #A9531A 100%);
  box-shadow:inset 0 2px 3px rgba(255,236,196,.6), inset 0 -3px 5px rgba(90,30,0,.5), 0 3px 7px rgba(60,30,0,.45); }
.cert-seal::before{ content:""; position:absolute; inset:7px; border-radius:50%; border:1px solid rgba(255,236,196,.55); box-shadow:inset 0 1px 2px rgba(90,30,0,.45); }
.cert-seal i{ font-family:var(--display); font-style:normal; font-size:26px; line-height:1; color:#C8641A; text-shadow:0 1px 0 rgba(255,236,196,.7), 0 -1px 0 rgba(90,30,0,.6); }

/* ---------- 08 — what construction is, and the sheet that goes with the work ---------- */
.cn-cert{ position:absolute; right:clamp(24px,7vw,120px); top:46%; width:min(380px,36vw); z-index:3; opacity:0; will-change:transform, opacity; transform-origin:0 50%; }
.cn-cert .cert{ width:100%; }
.cn-steps{ position:absolute; left:var(--gutter); top:calc(var(--nav-h) + 26px); z-index:3; margin:0; padding:0; list-style:none; display:grid; gap:6px; font-size:9px; letter-spacing:.24em; color:rgba(17,17,17,.34); pointer-events:none; }
.cn-steps li{ display:grid; grid-template-columns:2.2em auto; column-gap:8px; align-items:baseline; transition:color .5s var(--ease); }
.cn-steps li em{ grid-column:2; font-style:normal; letter-spacing:.14em; font-size:8px; max-height:0; overflow:hidden; opacity:0; transition:max-height .6s var(--swift), opacity .5s var(--ease); }
.cn-steps li.is-done{ color:rgba(17,17,17,.55); }
.cn-steps li.is-on{ color:#111; }
.cn-steps li.is-on em{ max-height:2.4em; opacity:.7; }
@media (max-width:899px){ .cn-cert{ right:50%; top:auto; bottom:14vh; width:min(300px,78vw); margin-right:calc(min(300px,78vw)/-2); } }

/* ---------- the house's own instruments, on the stage where they are used ---------- */
.gd{ position:absolute; right:var(--gutter); top:calc(var(--nav-h) + 20px); z-index:5; display:grid; gap:8px; justify-items:end; pointer-events:none; }
.pj-lamp-01 .gd{ right:auto; left:var(--gutter); top:calc(var(--nav-h) + 24px); justify-items:start; }
.gd-k{ margin:0; font-size:8.5px; letter-spacing:.28em; color:var(--fg2); }
.pj-lamp-01 .gd-k{ color:rgba(17,17,17,.6); text-shadow:0 1px 0 rgba(255,255,255,.7); }
.gd-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; max-width:min(460px,60vw); pointer-events:auto; perspective:600px; }
.pj-lamp-01 .gd-row{ justify-content:flex-start; }
.gd-i{ position:relative; width:64px; height:52px; padding:0; border-radius:3px; background:#050505; border:1px solid rgba(236,234,229,.14); overflow:hidden; --rx:0deg; --ry:0deg;
  transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .5s var(--swift), border-color .4s, width .5s var(--swift), height .5s var(--swift); box-shadow:0 8px 16px rgba(0,0,0,.4); }
.gd-i canvas{ position:absolute; left:8%; top:14%; width:84%; height:auto; transition:transform .5s var(--swift), filter .4s; filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.gd-i:hover, .gd-i:focus-visible{ border-color:rgba(236,234,229,.6); width:96px; height:78px; z-index:2; }
.gd-i:hover canvas{ transform:scale(1.06); }
.gd-lamp canvas{ animation:gd-hum 2.6s ease-in-out infinite alternate; }
@keyframes gd-hum{ from{ filter:drop-shadow(0 0 4px rgba(150,110,255,.35)); } to{ filter:drop-shadow(0 0 14px rgba(170,130,255,.75)); } }
.gd-n{ position:absolute; left:0; right:0; bottom:3px; text-align:center; font-size:7px; letter-spacing:.14em; color:rgba(236,234,229,.0); transition:color .3s; text-shadow:none; }
.gd-i:hover .gd-n, .gd-i:focus-visible .gd-n{ color:rgba(236,234,229,.9); }
.gd-i.is-fired::after{ content:""; position:absolute; inset:0; background:#fff; animation:gd-fire .32s ease-out 1 forwards; pointer-events:none; }
@keyframes gd-fire{ 0%{ opacity:.95; } 100%{ opacity:0; } }
@media (max-width:759px){ .gd-row{ max-width:76vw; } .gd-i{ width:48px; height:40px; } .gd-i:hover{ width:70px; height:58px; } }

/* ============================================================
   THE UV TORCH
   ============================================================ */
.uv{ position:fixed; inset:0; z-index:40; pointer-events:none; }
.uv[hidden]{ display:none; }
.uv-veil{ position:fixed; inset:0; opacity:0; transition:opacity .5s var(--ease);
  background:radial-gradient(circle var(--ur,0px) at var(--ux,50%) var(--uy,50%), rgba(20,8,64,0) 0%, rgba(20,8,64,.05) 55%, rgba(14,4,46,.42) 100%); }
body.uv-on .uv-veil{ opacity:1; }
.uv-glow{ position:fixed; inset:0; opacity:0; transition:opacity .5s var(--ease); mix-blend-mode:screen;
  background:radial-gradient(circle var(--ur,0px) at var(--ux,50%) var(--uy,50%), rgba(178,160,255,.10) 0%, rgba(150,120,255,.05) 46%, rgba(130,90,255,0) 100%); }
body.uv-on .uv-glow{ opacity:1; }
.uv-btn{ position:fixed; left:var(--gutter); bottom:clamp(18px,3vh,30px); z-index:1; pointer-events:auto; display:inline-flex; align-items:center; gap:9px; padding:8px 12px 8px 9px; font-size:9.5px; letter-spacing:.26em;
  color:rgba(236,234,229,.7); background:rgba(8,8,10,.62); border:1px solid rgba(236,234,229,.2); border-radius:20px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:color .3s, border-color .3s, box-shadow .4s; }
.uv-btn:hover{ color:#fff; border-color:rgba(190,170,255,.7); }
.uv-btn[aria-pressed="true"]{ color:#EDE6FF; border-color:rgba(176,150,255,.9); box-shadow:0 0 18px rgba(140,100,255,.55); }
.uv-lens{ width:12px; height:12px; border-radius:50%; border:1px solid currentColor; background:radial-gradient(circle at 34% 30%, currentColor 0 1.2px, transparent 2px); }
.uv-btn[aria-pressed="true"] .uv-lens{ background:radial-gradient(circle at 50% 50%, #C9B6FF, #7B4DFF 70%); box-shadow:0 0 10px #8A62FF; border-color:#C9B6FF; }
/* what shows: only where the light is */
.uvm{ position:absolute; pointer-events:none; opacity:0; --lx:-999px; --ly:-999px; --lr:1px; transition:opacity .35s var(--ease);
  -webkit-mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 0%, #000 55%, transparent 100%); mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 0%, #000 55%, transparent 100%); }
body.uv-on .uvm{ opacity:1; }
.uvm-age{ inset:0; z-index:0; }
.uvm-rev{ inset:-3px -6px; border-radius:2px; background:rgba(176,255,120,.32); box-shadow:0 0 16px rgba(176,255,120,.5); mix-blend-mode:multiply; }
.uvm-cond{ inset:auto; }
.uvm-cond.is-line{ width:46px; height:46px; background:repeating-linear-gradient(135deg, rgba(92,58,210,.9) 0 1px, transparent 1px 4px), repeating-linear-gradient(45deg, rgba(92,58,210,.55) 0 1px, transparent 1px 5px); -webkit-clip-path:polygon(0 88%, 12% 100%, 100% 12%, 88% 0); clip-path:polygon(0 88%, 12% 100%, 100% 12%, 88% 0); }
.uvm-cond.is-blot{ width:38px; height:30px; border-radius:46% 54% 50% 50%/52% 46% 54% 48%; background:repeating-linear-gradient(45deg, rgba(92,58,210,.9) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(92,58,210,.6) 0 1px, transparent 1px 4px); }
.uvm-cond.is-edge{ width:22px; height:64px; background:repeating-linear-gradient(0deg, rgba(92,58,210,.85) 0 1px, transparent 1px 4px), repeating-linear-gradient(60deg, rgba(92,58,210,.55) 0 1px, transparent 1px 5px); border-radius:2px 0 0 40% / 2px 0 0 40%; }
.uvm-ps{ position:relative; display:block; }
.ab-ps{ position:relative; margin:2.4em 0 0; max-width:34ch; font-family:var(--serif); font-style:italic; font-size:15px; line-height:1.6; color:#5B4FD0; letter-spacing:.005em; opacity:0; pointer-events:none;
  --lx:-999px; --ly:-999px; --lr:1px; -webkit-mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 0%, #000 60%, transparent 100%); mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 0%, #000 60%, transparent 100%); transition:opacity .4s var(--ease); text-shadow:0 0 10px rgba(140,110,255,.55); }
body.uv-on .ab-ps{ opacity:1; }
.uv-ledger-veil{ display:none; }

/* ---------- the locked vault ---------- */
.vt2{ position:relative; height:100svh; min-height:520px; background:#040302; overflow:hidden; display:block; padding:0; }
.vt2-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.vt2-name{ position:absolute; left:var(--gutter); bottom:clamp(22px,4vh,40px); margin:0; font-size:9.5px; letter-spacing:.7em; font-weight:400; color:rgba(236,234,229,.34); }
.vt2-dial{ position:absolute; border-radius:50%; cursor:grab; touch-action:none; outline-offset:6px; }
.vt2-dial:active{ cursor:grabbing; }
.vt2-dial:focus-visible{ outline:1px solid rgba(238,154,58,.8); }
.vt2-dial.is-tick{ animation:vt2-tick .12s linear 1; }
@keyframes vt2-tick{ 50%{ transform:scale(.985); } }
.vt2-whisper{ position:absolute; left:50%; bottom:clamp(60px,12vh,120px); transform:translateX(-50%); margin:0; font-size:clamp(20px,2.2vw,32px); font-style:italic; color:#F6D9A8; opacity:0; text-shadow:0 0 24px rgba(255,160,60,.5); transition:opacity 3.2s var(--ease); pointer-events:none; text-align:center; }
.vt2.is-whispering .vt2-whisper{ opacity:1; }

/* ---------- when there is nothing at an address, or something broke: a negative in the dark, and a torch ---------- */
.lost{ position:relative; height:100svh; min-height:520px; background:#0A0806; overflow:hidden; }
.lost-stage{ position:absolute; inset:0; cursor:crosshair; }
.lost-stage .fid-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.lost-say{ position:absolute; left:var(--gutter); bottom:clamp(56px,11vh,120px); z-index:2; display:grid; gap:10px; pointer-events:none; }
.lost-k{ margin:0; font-size:clamp(12px,1.2vw,15px); letter-spacing:.34em; color:rgba(236,234,229,.8); }
.lost-path{ margin:0; font-size:10px; letter-spacing:.2em; color:rgba(236,234,229,.36); word-break:break-all; max-width:60ch; }
.lost-go{ pointer-events:auto; justify-self:start; margin-top:14px; font-size:10px; letter-spacing:.26em; color:rgba(236,234,229,.72); border-bottom:1px solid rgba(236,234,229,.3); padding:6px 0 5px; transition:color .3s, border-color .3s; }
.lost-go:hover{ color:#fff; border-bottom-color:#fff; }

/* ---------- waiting: a light meter, and the clamp of a contact frame ---------- */
.ld{ display:inline-grid; justify-items:center; gap:8px; color:rgba(236,234,229,.7); }
.ld svg{ display:block; overflow:visible; }
.ld-arc{ fill:none; stroke:rgba(236,234,229,.35); stroke-width:1; }
.ld-ticks line{ stroke:rgba(236,234,229,.5); stroke-width:1; }
.ld-needle{ stroke:#EDEAE2; stroke-width:1.4; stroke-linecap:round; transform-origin:60px 64px; animation:ld-sweep 2.4s cubic-bezier(.3,1.3,.4,1) infinite; }
.ld-meter circle{ fill:#EDEAE2; }
.ld-meter .mono{ font-size:8.5px; letter-spacing:.34em; color:rgba(236,234,229,.5); }
@keyframes ld-sweep{ 0%{ transform:rotate(-56deg); } 46%{ transform:rotate(38deg); } 54%{ transform:rotate(30deg); } 68%{ transform:rotate(34deg); } 100%{ transform:rotate(-56deg); } }
.ld-clamp .ld-sheet{ fill:rgba(236,234,229,.12); stroke:rgba(236,234,229,.4); stroke-width:1; }
.ld-clamp .ld-bar rect{ fill:#B9B7B0; } .ld-clamp .ld-bar circle{ fill:#5D5B56; }
.ld-bar-a{ transform-origin:2px 25.5px; animation:ld-shut-a 2s cubic-bezier(.5,0,.2,1) infinite; }
.ld-bar-b{ transform-origin:78px 25.5px; animation:ld-shut-b 2s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes ld-shut-a{ 0%{ transform:rotate(-64deg); } 42%{ transform:rotate(0deg); } 58%{ transform:rotate(0deg); } 100%{ transform:rotate(-64deg); } }
@keyframes ld-shut-b{ 0%{ transform:rotate(64deg); } 42%{ transform:rotate(0deg); } 58%{ transform:rotate(0deg); } 100%{ transform:rotate(64deg); } }
#veil .ld-meter{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .4s var(--ease); }
#veil.is-holding .ld-meter{ opacity:1; transition-delay:.9s; }
.pc:not(.is-ready) .pc-frame{ position:relative; }
.pc .pc-frame > .ld{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; }
.pc.is-ready .pc-frame > .ld{ display:none; }
@media (prefers-reduced-motion:reduce){ .ld-needle, .ld-bar-a, .ld-bar-b{ animation:none; } .ld-needle{ transform:rotate(20deg); } }

.al-rk{ position:absolute; left:var(--gutter); bottom:22vh; z-index:6; }

/* ---------- the dial, on a phone: the knob, and the name of what it is set to ---------- */
@media (max-width:759px){
  .pj-dials{ top:calc(var(--nav-h) + 6px); bottom:auto; right:8px; transform:none; gap:0; }
  .dial, .dial[data-count]{ width:220px; height:74px; zoom:1; }
  .dial::before{ display:none; }
  .dial-label{ right:auto; left:0; top:2px; font-size:8px; letter-spacing:.24em; }
  .dial-tick, .dial-links, .dial-opt:not(.is-on){ display:none; }
  .dial-scale{ right:46px; top:50%; }
  .dial-opt.is-on{ transform:translate(-14px,-50%) translate(-100%,0) !important; font-size:9px; }
  .dial-knob{ width:56px; height:56px; margin-top:-28px; right:4px; }
  .dial-cap{ inset:9px; }
  .pj-dial-slot + .pj-dial-slot .dial-label{ display:none; }
  .lib-note{ display:none; }
}
@media (max-width:759px){ .dial-label{ display:none; } .pj-lamp-05 .gd, .pj-lamp-01 .gd{ display:none; } .pj-dials{ gap:2px; } }

/* ---------- legibility under every light: the quiet type is quiet, and still passes ---------- */
[data-tone="dark"]{ --fg3:rgba(236,234,229,.60); }
.dial-opt{ color:rgba(236,234,229,.64); }
.pj-beats[data-tone="dark"] .kn-ask, .pj-beat-ask .kn{ color:rgba(236,234,229,.86); }

.ar-plain{ display:grid; gap:.1em; padding:calc(var(--nav-h) + 40px) var(--gutter) 60px; }
.ar-plain-a{ font-size:clamp(48px,11vw,150px); }


/* ============================================================
   THE NARRATIVE, MADE READABLE AND MADE TO MOVE
   ============================================================ */
/* the number of the stage, pressed into the light and drifting slower than the words */
.pj-numeral{ position:sticky; top:0; height:0; z-index:0; pointer-events:none; }
.pj-numeral span{ position:absolute; right:calc(var(--gutter) - .05em); top:calc(var(--nav-h) + 2vh); font-family:var(--display); font-weight:400; font-size:clamp(220px,36vw,640px); line-height:.78; letter-spacing:-.05em;
  color:rgba(236,234,229,.018); -webkit-text-stroke:1px rgba(236,234,229,.13); text-shadow:none;
  transform:translate3d(0,calc(var(--np,0)*-16vh),0); will-change:transform; }
.pj-numeral[data-tone="light"] span{ color:rgba(17,17,17,.02); -webkit-text-stroke:1px rgba(17,17,17,.16); text-shadow:none; }
@media (max-width:759px){ .pj-numeral span{ font-size:clamp(180px,58vw,300px); top:calc(var(--nav-h) + 6vh); } }

/* the paragraph, on a plate of glass: it never has to be read against the scene */
.pj-beat-read .pj-beat-in{ position:relative; isolation:isolate; padding:clamp(20px,2.3vw,36px) clamp(22px,2.7vw,44px); }
.pj-beat-read .pj-beat-in::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:var(--plate,0);
  background:var(--plate-bg,rgba(9,9,9,.68)); -webkit-backdrop-filter:blur(20px) saturate(.85); backdrop-filter:blur(20px) saturate(.85);
  border:1px solid var(--plate-edge,rgba(236,234,229,.10)); border-radius:3px; box-shadow:0 18px 60px rgba(0,0,0,.26); }
.pj-beats[data-tone="light"] .pj-beat-read .pj-beat-in::before{ --plate-bg:rgba(248,247,243,.74); --plate-edge:rgba(17,17,17,.10); box-shadow:0 18px 60px rgba(17,17,17,.10); }
.st-03 .pj-beat-read .pj-beat-in{ mix-blend-mode:normal; color:var(--paper); }
body[data-safelight="on"] .pj-beat-read .pj-beat-in::before{ --plate-bg:rgba(26,0,0,.66); --plate-edge:rgba(255,90,70,.18); }
.pj-beats[data-tone="light"] .pj-beat-read .pj-beat-in{ text-shadow:none; }

/* the words the paragraph leans on: set in the display face, and lit from underneath as the light reaches them */
.kn-em{ font-family:var(--display); font-style:italic; font-size:1.14em; letter-spacing:-.004em;
  background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-position:0 94%; background-size:var(--em,0%) 1px; padding-bottom:.03em; }

/* the dials stand at the right: the words keep to the ground beside them */
@media (min-width:900px){
  .st-03 .pj-beat, .st-04 .pj-beat, .st-05 .pj-beat, .st-06 .pj-beat, .st-07 .pj-beat{ padding-right:calc(var(--gutter) + 250px); }
}

/* the counter is also the way into the loupe */
button.pidx-counter{ display:flex; align-items:center; gap:10px; cursor:pointer; background:none; border:0; padding:0; color:inherit; }
.pidx-glass{ width:13px; height:13px; border:1px solid currentColor; border-radius:50%; opacity:.6; flex:none;
  background:radial-gradient(circle at 30% 28%, currentColor 0 1.1px, transparent 1.7px); transition:transform .5s var(--swift), opacity .3s var(--ease), box-shadow .5s var(--ease); }
button.pidx-counter:hover .pidx-glass, button.pidx-counter:focus-visible .pidx-glass{ opacity:1; transform:scale(1.35); box-shadow:0 0 14px rgba(236,234,229,.4); }
button.pidx-counter:focus-visible{ outline:1px solid currentColor; outline-offset:6px; }

/* type that swells as it arrives must not widen the page: clipped, not scrolled, so sticky things still stick */
.pj, .pj-beats{ overflow-x:clip; }