/* Tesseract Void — the umbral plane.
   Only enqueued on the plane template. Depends on tokens.css. */

html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
body.grabbing{cursor:grabbing}
body.probe{cursor:none}


#veil-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 60% at 50% 118%, rgba(217,160,90,.20), transparent 60%),
    radial-gradient(120% 90% at 50% 8%, rgba(70,54,120,.32), transparent 62%),
    linear-gradient(180deg,#07051A 0%,#0C0930 46%,#241a44 74%,#5a3a52 92%,#8a5230 100%)}
/* stage IV — the deep. only ever seen by someone who stopped. */
#deep{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:
    radial-gradient(70% 55% at 50% 48%, rgba(240,216,166,.10), transparent 62%),
    radial-gradient(110% 85% at 14% 92%, rgba(158,64,124,.30), transparent 66%),
    radial-gradient(110% 85% at 88% 12%, rgba(52,116,158,.28), transparent 66%)}
#field{position:fixed;inset:0;z-index:1;pointer-events:none}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');background-size:160px}

#stage{position:fixed;inset:0;z-index:5}
#world{position:absolute;left:50%;top:50%;width:0;height:0;will-change:transform}
.frag{position:absolute;transform-origin:center;will-change:transform}

#still{position:fixed;left:50%;top:calc(50% - 2.5rem);transform:translate(-50%,-50%);z-index:6;pointer-events:none;
  font-family:var(--disp);font-style:italic;font-size:clamp(1.4rem,3.2vw,2.6rem);color:var(--gold-pale);text-align:center;
  text-shadow:0 2px 50px rgba(6,4,20,.9);opacity:0;max-width:22ch;line-height:1.3}

.ln{font-family:var(--disp);line-height:1.04;color:var(--bone);text-shadow:0 2px 50px rgba(6,4,20,.8);max-width:min(46vw,600px)}
.ln .wd{display:inline-block;will-change:transform}
.ln.xl{font-size:clamp(3rem,8vw,7rem)}
.ln.lg{font-size:clamp(2rem,4.6vw,3.6rem)}
.ln.md{font-size:clamp(1.5rem,3.2vw,2.4rem);font-style:italic;color:var(--gold-pale)}
.ln.sm{font-size:clamp(1.15rem,2.2vw,1.6rem);color:var(--bone-dim)}
.ln.sub{font-family:var(--text);font-size:clamp(1rem,1.6vw,1.2rem);color:var(--bone-dim);letter-spacing:.01em}
.lbl{font-family:var(--mono);font-weight:400;font-size:clamp(.72rem,1.3vw,.92rem);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-pale);white-space:nowrap;padding:.4rem 0;border-top:1px solid rgba(217,179,106,.4)}
.lbl .wd{display:inline-block;will-change:transform}
/* The commissions plaque is a real <button> built in plane.js. Every other
   button on the plane clears the browser's own chrome; this one did not, so it
   was painted with the default ButtonFace fill — a near-white slab — and its
   bone-coloured text all but vanished into it. The shadow is the same one the
   HUD text carries, so the plaque stays readable over the bright lower sky as
   well as the dark upper one. */
.plaque{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
  background:none;-webkit-appearance:none;appearance:none;border-radius:0;
  border:1px solid rgba(241,236,224,.38);padding:.9rem 1.3rem;white-space:nowrap;cursor:pointer;
  text-shadow:0 2px 30px rgba(6,4,20,.9);
  transition:border-color .4s,color .4s,letter-spacing .4s}
.plaque:hover{border-color:var(--gold);color:var(--gold-pale);letter-spacing:.26em}

.work{width:clamp(220px,26vw,340px);cursor:pointer}
.work .frame{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#0b0922;box-shadow:0 50px 120px -40px rgba(3,2,12,.95)}
.no-liquid .work .frame{will-change:transform}
.work .frame img.under{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.03);transition:transform .5s var(--e)}
/* the veil. a canvas, not a mask — so it can be torn, smeared and healed. */
.work .frame canvas.veil{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.work .frame .membrane{position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:screen;
  background:radial-gradient(120% 120% at 30% 20%, rgba(120,90,160,.4), transparent 60%)}
.work .frame .edge{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px rgba(6,4,20,.7)}
.work .cap{margin-top:1rem;text-align:center}
.work .cap .t{font-family:var(--disp);font-style:italic;font-size:clamp(1rem,1.5vw,1.28rem);line-height:1.25;color:var(--bone);max-width:34ch;margin:0 auto}
.work .cap .m{margin-top:.7rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0b0922}
.ph span{font-family:var(--disp);font-size:2rem;color:rgba(240,216,166,.5)}

.hud{position:fixed;z-index:40;font-family:var(--mono);text-transform:uppercase}
#wm{left:calc(clamp(1.1rem,4vw,2.6rem) + var(--safe-l));top:calc(clamp(1.1rem,4vw,2.2rem) + var(--safe-t));font-family:var(--disp);text-transform:none;font-size:1.25rem;letter-spacing:.32em;padding-left:.32em;color:var(--bone);text-shadow:0 2px 30px rgba(6,4,20,.9);cursor:pointer}
.tr{position:fixed;right:calc(clamp(1.1rem,4vw,2.6rem) + var(--safe-r));z-index:40;display:flex;gap:1.4rem;align-items:center;top:calc(clamp(1.1rem,4vw,2.2rem) + var(--safe-t))}
.tr button{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);background:none;border:0;cursor:pointer;display:flex;gap:.55rem;align-items:center;text-shadow:0 2px 30px rgba(6,4,20,.9);
  min-height:44px;padding:.4rem 0}
.tr .star{color:var(--gold-pale)}
#snd .dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--gold-pale);display:inline-block}
#snd.on .dot{background:var(--gold-pale);box-shadow:0 0 10px var(--gold-pale)}
#hint{left:50%;bottom:calc(clamp(1.4rem,5vw,2.4rem) + var(--safe-b));transform:translateX(-50%);font-size:.66rem;letter-spacing:.22em;color:var(--bone-dim);text-align:center;transition:opacity 1.2s var(--e);pointer-events:none;max-width:88vw}
#hint.gone{opacity:0}
#compass{right:calc(clamp(1.1rem,4vw,2.6rem) + var(--safe-r));bottom:calc(clamp(1.4rem,5vw,2.4rem) + var(--safe-b));font-size:.6rem;letter-spacing:.18em;color:rgba(241,236,224,.4);text-align:right;pointer-events:none}

#probe{position:fixed;z-index:55;width:26px;height:26px;border:1px solid rgba(240,216,166,.7);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .3s,width .3s,height .3s;mix-blend-mode:screen}
#probe.on{opacity:1}
#probe.wide{width:150px;height:150px;border-color:rgba(240,216,166,.28)}

.sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:calc(clamp(1rem,5vw,3rem) + var(--safe-t)) calc(clamp(1rem,5vw,3rem) + var(--safe-r)) calc(clamp(1rem,5vw,3rem) + var(--safe-b)) calc(clamp(1rem,5vw,3rem) + var(--safe-l));
  background:rgba(6,4,20,.93);backdrop-filter:blur(22px) saturate(1.05);-webkit-backdrop-filter:blur(22px) saturate(1.05);
  opacity:0;pointer-events:none;transition:opacity .6s var(--e);overflow:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.sheet.open{opacity:1;pointer-events:auto}
.sheet.flying{overflow:hidden}
.sheet .x{position:fixed;top:calc(clamp(1rem,4vw,2rem) + var(--safe-t));right:calc(clamp(1rem,4vw,2rem) + var(--safe-r));z-index:3;background:none;border:0;color:var(--bone-dim);font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;min-height:44px;min-width:44px}
.sheet .x:hover{color:var(--bone)}

.ix-in{width:100%;max-width:760px;margin:auto}
.ix-in .eyebrow{font-family:var(--mono);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:2rem}
.ix-grp{margin-bottom:2.2rem}
.ix-grp h4{font-family:var(--mono);font-weight:400;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(241,236,224,.4);margin-bottom:1rem}
.ix-in a{display:block;width:fit-content;font-family:var(--disp);font-size:clamp(1.5rem,3.4vw,2.4rem);color:var(--bone-dim);line-height:1.5;cursor:pointer;transition:color .35s,transform .35s}
.ix-in a:hover{color:var(--bone);transform:translateX(.5rem)}
.ix-in .row{display:flex;flex-wrap:wrap;gap:.4rem 2rem}
.ix-in .row a{font-size:clamp(1.05rem,2vw,1.4rem);font-style:italic}

.w-in{width:100%;max-width:1080px;margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,5vw,4.5rem);align-items:center}
.w-in .art{position:relative}
.w-in .art .g{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(closest-side,hsl(var(--glow,40 44% 55%) / .5),transparent 72%);filter:blur(50px);opacity:0;transition:opacity 1s var(--e) .18s}
.sheet.open .w-in .art .g{opacity:1}
.w-in .art .fr{position:relative;overflow:hidden;box-shadow:0 50px 120px -40px rgba(3,2,12,.95);will-change:transform}
.w-in .art img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover}
.w-in .info{opacity:0;transform:translateY(14px);transition:opacity .7s var(--e) .26s,transform .7s var(--e) .26s}
.sheet.open .w-in .info{opacity:1;transform:none}
.w-in .info h2{font-family:var(--disp);font-style:italic;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.2;margin-bottom:1.4rem}
.w-in .info .txt{font-family:var(--text);color:var(--bone-dim);font-size:1rem;line-height:1.7;margin-bottom:1.6rem}
.w-in .info .txt p+p{margin-top:1rem}
.w-in .info .txt em{color:var(--bone)}
.w-in .info .txt a{color:var(--gold-pale);border-bottom:1px solid rgba(217,179,106,.4)}
.w-in .info .meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:.3rem}
.w-in .info .price{font-family:var(--disp);font-size:2rem;margin-bottom:1.5rem}
.w-in .info .actions{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}

.tlink{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);cursor:pointer;background:none;border:0;border-bottom:1px solid var(--gold);padding-bottom:.4rem;transition:letter-spacing .4s,color .4s;min-height:44px}
.tlink:hover{letter-spacing:.3em;color:var(--gold-pale)}
.tlink.dim{border-color:rgba(241,236,224,.25);color:var(--bone-dim)}
.tlink.dim:hover{color:var(--bone);border-color:var(--gold)}

.panel{width:100%;max-width:720px;margin:auto}
.panel .eyebrow{font-family:var(--mono);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:1.6rem}
.panel h2{font-family:var(--disp);font-size:clamp(1.9rem,4vw,3rem);margin-bottom:2rem;line-height:1.05}
.terms{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 3rem}
.term .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:.6rem}
.term p{color:var(--bone-dim);font-size:.98rem;line-height:1.7}
.clist .line{padding:1rem 0;border-bottom:1px solid rgba(241,236,224,.12)}
.clist .line .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,236,224,.68);display:block;margin-bottom:.5rem}
.clist .line a{color:var(--gold-pale);font-size:1.05rem;border-bottom:1px solid rgba(217,179,106,.35)}
.cform{margin-top:1.6rem;display:flex;gap:.8rem;flex-wrap:wrap}
.cform input{flex:1;min-width:200px;background:rgba(10,8,26,.6);border:1px solid rgba(241,236,224,.14);color:var(--bone);font-family:var(--text);font-size:16px;padding:.8rem 1rem;outline:none}
.cform input:focus{border-color:var(--gold)}
.done{font-family:var(--disp);font-style:italic;color:var(--gold-pale);font-size:1.2rem;margin-top:1rem;min-height:1.4rem}

#toast{position:fixed;left:50%;bottom:calc(2rem + var(--safe-b));transform:translateX(-50%) translateY(30px);z-index:90;background:rgba(12,9,32,.95);border:1px solid rgba(241,236,224,.16);color:var(--bone);padding:.9rem 1.5rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

button:focus-visible,a:focus-visible,input:focus-visible,.work:focus-visible{outline:1px solid var(--gold);outline-offset:5px}

/* ---------- the threshold ---------- */
#enter{position:fixed;inset:0;z-index:120;background:#07051A;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;padding:calc(2rem + var(--safe-t)) 1.5rem calc(2rem + var(--safe-b));transition:opacity 1.4s var(--e);overflow:auto}
#enter.gone{opacity:0;pointer-events:none}
#enter .m{font-family:var(--disp);font-size:clamp(1.7rem,6vw,3rem);letter-spacing:.5em;padding-left:.5em}
#enter .s{font-family:var(--mono);font-size:.62rem;letter-spacing:.36em;text-transform:uppercase;color:var(--gold-pale);text-align:center}
#enter .ring{width:clamp(74px,17vw,150px);height:clamp(74px,17vw,150px);border:1px solid rgba(240,216,166,.5);border-radius:50%;margin:.4rem 0;animation:breathe 11s ease-in-out infinite;flex:none}
@keyframes breathe{0%,100%{transform:scale(.66);opacity:.35}50%{transform:scale(1.05);opacity:.9}}

.enter-go{margin-top:1.1rem;background:none;border:1px solid rgba(240,216,166,.4);color:var(--bone);font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;padding:1rem 1.9rem;cursor:pointer;transition:border-color .4s,letter-spacing .4s,color .4s;flex:none}
.enter-go:hover{border-color:var(--gold-pale);color:var(--gold-pale);letter-spacing:.32em}

#w-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(36px) brightness(.4) saturate(1.1);opacity:0;transform:scale(1.2);transition:opacity 1.1s var(--e),transform 7s var(--e);z-index:0;pointer-events:none}
.sheet#sheet-work.open #w-bg{opacity:1;transform:scale(1.04)}
#sheet-work .w-in{position:relative;z-index:1}
#dim{position:fixed;inset:0;z-index:7;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%, transparent 26%, rgba(4,3,12,.72) 100%);opacity:0;transition:opacity 1.6s var(--e)}
body.surrender #dim{opacity:1}
body.surrender .hud,body.surrender .tr,body.surrender #compass{opacity:0!important;pointer-events:none;transition:opacity 1s}
#sreturn{position:fixed;left:50%;bottom:calc(1.6rem + var(--safe-b));transform:translateX(-50%);z-index:41;font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-dim);cursor:pointer;background:none;border:0;opacity:0;pointer-events:none;transition:opacity .8s;min-height:44px}
body.surrender #sreturn{opacity:.7;pointer-events:auto}
body.surrender #sreturn:hover{opacity:1}

@media (max-width:820px){
  .w-in{grid-template-columns:1fr;gap:1.6rem;padding-block:3.2rem 1rem}
  .w-in .art{max-width:min(76vw,420px);margin:0 auto;width:100%}
  .terms{grid-template-columns:1fr}
  .work{width:min(62vw,300px)}
  .ln{max-width:78vw}
  .ix-in .eyebrow{margin-top:2.2rem}
  .panel{padding-top:2.4rem}
  .w-in .info .price{font-size:1.6rem}
  .tr{gap:1.1rem}
  #hint{font-size:.58rem;letter-spacing:.16em}
}
@media (max-height:680px){
  #enter .ring{width:56px;height:56px;margin:.15rem 0}
}

@media (prefers-reduced-motion:reduce){
  #enter .ring{animation:none}
  *{transition-duration:.001s!important}
}

/* ---------- additions for the WordPress build ---------- */

/* The shop is always reachable. Same weight as the other HUD controls,
   so it reads as part of the plane rather than an advert pinned to it. */
.tr a{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);
  display:flex;gap:.55rem;align-items:center;text-shadow:0 2px 30px rgba(6,4,20,.9);min-height:44px;padding:.4rem 0;
  transition:color .4s,letter-spacing .4s}
.tr a:hover{color:var(--gold-pale);letter-spacing:.28em}
.tr a .n{font-size:.6rem;color:var(--gold-pale);letter-spacing:.1em}

/* A way out of the threshold for anyone who only came to buy a print. */
.enter-alt{margin-top:1.4rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(241,236,224,.45);border-bottom:1px solid transparent;padding-bottom:.3rem;transition:color .4s,border-color .4s}
.enter-alt:hover{color:var(--bone);border-color:var(--gold)}

/* Editions are stock. When one closes, the plane should say so plainly. */
.w-in .info .ed{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-pale);margin-bottom:1.4rem}
.w-in .info .ed.closed{color:rgba(241,236,224,.4)}
.w-in .info .price .was{font-size:.7em;color:var(--bone-dim);text-decoration:line-through;margin-right:.5rem}

.cform .consent{flex-basis:100%;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(241,236,224,.62);line-height:1.9}
.cform.sending{opacity:.5;pointer-events:none}
.cerr{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:#e2a0a0;margin-top:.8rem;min-height:1rem}

/* Nothing flagged for the plane yet. An empty screen is an invitation to act. */
.plane-empty{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;text-align:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);
  max-width:32ch;line-height:2.2}
.plane-empty a{color:var(--gold-pale);border-bottom:1px solid rgba(217,179,106,.4)}

/* ---------- without JavaScript ---------- */

/* The plane cannot run, so the page becomes an ordinary scrolling document
   and the interactive furniture is removed rather than left inert. The
   atmosphere — the gradient and the grain — is kept. */
html.no-js,
html.no-js body{overflow:auto;height:auto;cursor:auto;touch-action:auto;user-select:auto}
html.no-js #enter,
html.no-js #stage,
html.no-js #still,
html.no-js #probe,
html.no-js #hint,
html.no-js #compass,
html.no-js #sreturn,
html.no-js .sheet,
html.no-js .tr button{display:none}

.plane-fallback{
  position:relative;z-index:9;
  max-width:900px;margin:0 auto;
  padding:calc(6rem + var(--safe-t)) clamp(1.2rem,5vw,3rem) 5rem;
}
/* Once scripts are known to run, this stays in the document for assistive
   technology and crawlers but takes up no space. */
html.js .plane-fallback{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;padding:0;margin:-1px;
}
.plane-fallback h1{
  font-family:var(--disp);font-weight:400;font-size:clamp(2.2rem,6vw,3.4rem);
  letter-spacing:.22em;text-transform:uppercase;line-height:1.2;
}
.plane-fallback .pf-tag{
  font-family:var(--disp);font-style:italic;font-size:1.2rem;
  color:var(--bone-dim);margin-top:.8rem;
}
.plane-fallback h2{
  font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-pale);margin:3.4rem 0 1.8rem;
}
.pf-works{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:2.6rem;
}
.pf-works img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;background:var(--ink)}
.pf-title{
  display:block;margin-top:1rem;font-family:var(--disp);font-style:italic;
  font-size:1.1rem;line-height:1.3;color:var(--bone);
}
.pf-meta{
  display:block;margin-top:.6rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);
}
.pf-links{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:3.4rem}
.pf-links a{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);border-bottom:1px solid var(--gold);padding-bottom:.35rem;
}
.pf-note{
  margin-top:2.4rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  color:var(--bone-dim);line-height:2;
}

/* ---------- print ---------- */

@media print{
  #veil-bg,#field,#deep,.grain,#stage,#enter,.tr,#hint,#compass,#probe,#dim,#sreturn,.sheet,#toast{display:none!important}
  html.js .plane-fallback{position:static;width:auto;height:auto;clip-path:none;white-space:normal;margin:0;padding:0}
  html,body{overflow:visible;height:auto;background:#fff;color:#000}
  .plane-fallback a{color:#000}
}

/* ---------- the index ---------- */

/* The works are titled in full — several lines of instruction each, in the
   manner of a Dalí title. The list is therefore tall by design: one work per
   row, each given room to be read rather than truncated. */
#ix-works{display:block}
#ix-works a{
  display:block;padding:1.1rem 0;border-bottom:1px solid rgba(241,236,224,.1);
  transition:padding-left .5s var(--e),color .4s;
}
#ix-works a:last-child{border-bottom:0}
#ix-works a:hover{padding-left:.7rem;color:var(--bone)}
#ix-works a .t{
  display:block;font-family:var(--disp);font-style:italic;
  font-size:clamp(.98rem,2vw,1.18rem);line-height:1.4;
  color:var(--bone);max-width:52ch;letter-spacing:0;text-transform:none;
}
#ix-works a .m{
  display:block;margin-top:.45rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-pale);opacity:.75;
}

/* ---------- leaving for a work ---------- */

/* Clicking a work hands over to its own page. The plane recedes rather than
   cutting, so the transition reads as one continuous movement. */
body.leaving #stage,
body.leaving .tr,
body.leaving #wm,
body.leaving #hint,
body.leaving #compass{
  opacity:0;transition:opacity .26s ease-out;
}
body.leaving #veil-bg{opacity:.45;transition:opacity .26s ease-out}
@media (prefers-reduced-motion:reduce){
  body.leaving #stage,body.leaving .tr,body.leaving #wm,
  body.leaving #hint,body.leaving #compass,body.leaving #veil-bg{transition:none}
}

/* A returning visitor is already inside; the threshold should not re-announce
   itself with a fade. */
#enter.instant{transition:none}