/* The Numen room: her table, through the curtain.

   Everything is scoped under html[data-room='numen']. The place is laid out
   on the painting itself: .nm carries the size and offset of the plate (the
   tent-table loop, 1600 by 914, covering the stage) as custom properties, so
   the card stands on the painted cloth and the writing sits on its skirt at
   any size. A phone held upright sees the left candle and the middle of the
   table; the card stands a little right of centre, in the dark.

   Motion. The curtain parts once, on arrival; her hand writes; the card lifts
   when there is a day to read and turns when the visitor turns it. All of it
   has a reason and plays under data-motion calm, which is what a system that
   asks for less motion gets. What holds under calm is the twitchy layer: the
   card's float and the candle flicker on its face. Under still nothing
   animates: the curtain is open, the writing is written, a turn is a cut.

   The flip keeps the tent's trap (numen-tent/css/tent.css 759-840): the slot
   rotates, the card dims, and nothing that turns ever carries a filter or a
   fractional opacity, which would flatten it and leave the back of the card
   facing out for good. */

@font-face {
  font-family: 'Numen Hand';
  src: url(/art/rooms/numen/caveat-v1.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html[data-room='numen'] {
  --candle: #e8b457;
  --candle-hi: #ffd489;
  --ember-nm: #c9642b;
  --cream-nm: #f0e2c8;
  --ink: color-mix(in oklch, var(--candle-hi) 94%, white);
  --hand: 'Numen Hand', 'Segoe Script', cursive;
  --voice: var(--face);
  --ease-nm: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------- plate */

html[data-room='numen'] .nm {
  position: absolute;
  inset: 0;
  overflow: clip;
  /* its own stacking context, so the curtain and the card never climb over
     the frame's y, bell, pennant and edges */
  z-index: 0;
  isolation: isolate;
  --ar: 1.7505;
  --fx: 0.5;
  --pw: max(100cqw, 100cqh * var(--ar));
  --ph: calc(var(--pw) / var(--ar));
  --px: clamp(100cqw - var(--pw), 50cqw - var(--pw) * var(--fx), 0px);
  /* Centred, unless the window is so much wider than the painting that the
     skirt, and her blanks on it, would fall under the bottom edge: then the
     painting rides up just far enough to keep them in the window, and never
     past its own foot. --ask-h is how tall her writing on the skirt is. */
  --ask-h: calc(var(--type) * 3.3);
  --py: max(100cqh - var(--ph), min((100cqh - var(--ph)) / 2, 100cqh - var(--ph) * 0.82 - var(--ask-h) - 3cqh));
  /* where the card stands, just behind the lip of the table */
  --lip: calc(var(--py) + var(--ph) * 0.745);
  /* the skirt of the cloth, below the lip */
  --skirt: calc(var(--py) + var(--ph) * 0.79);
  --ch: min(var(--ph) * 0.36, 46cqh);
  --cw: calc(var(--ch) * 0.65);
  --cx: 50cqw;
  /* how much of each curtain half is left in view once it is drawn back */
  --rest: clamp(30px, 6.4cqw, 118px);
  --gather: 0.78;
  --hh: max(100cqh, 66cqw);
  --wl: calc(var(--hh) * 0.8646);
  --wr: calc(var(--hh) * 0.849);
  --type: clamp(1.3rem, 0.7rem + 1.5cqw, 2.15rem);
}

html[data-room='numen'] .nm-plate {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: var(--pw);
  height: var(--ph);
  z-index: 0;
}
html[data-room='numen'] .nm-still,
html[data-room='numen'] .nm-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}
/* her lamp turned down a little at the edges and at the foot, so the writing
   on the skirt and the line in the air read, and the eye goes to the card */
html[data-room='numen'] .nm-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 95% at 50% 40%, transparent 52%, oklch(8% 0.02 20 / 0.62) 100%),
    linear-gradient(to bottom, transparent 74%, oklch(9% 0.03 15 / 0.5) 100%);
}

/* ----------------------------------------------------------------- card */

html[data-room='numen'] .nm-card {
  position: absolute;
  z-index: 5;
  left: calc(var(--cx) - var(--cw) / 2);
  top: calc(var(--lip) - var(--ch));
  width: var(--cw);
  height: var(--ch);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  /* seen from a chair at the table, a little above it */
  perspective: 1100px;
  perspective-origin: 50% 20%;
  /* at rest it leans back on the cloth; with a day to read it stands up off
     it and rises; turned, it faces whoever turned it */
  --rise: 0px;
  --lean: 30deg;
}
html[data-room='numen'] .nm[data-card='armed'] .nm-card { cursor: grab; --rise: calc(var(--ch) * -0.05); --lean: 5deg; }
html[data-room='numen'] .nm[data-card='armed'] .nm-card.is-held,
html[data-room='numen'] .nm[data-card='turning'] .nm-card { cursor: grabbing; --rise: calc(var(--ch) * -0.06); --lean: 3deg; }
html[data-room='numen'] .nm[data-card='turned'] .nm-card { --rise: calc(var(--ch) * -0.02); --lean: 4deg; }
html[data-room='numen'] .nm-card:focus-visible { outline: none; }

/* the lift leans the card and raises it; the slot turns inside the same
   space, so the lift keeps it (preserve-3d) and carries no filter or opacity */
html[data-room='numen'] .nm-card__lift {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: translateY(var(--rise)) rotateX(var(--lean));
  transition: transform 1100ms var(--ease-nm);
}
/* it breathes while it waits to be turned: the float is the twitchy half of
   that and holds under calm; the glow below is the slow half and does not */
@keyframes nm-float {
  0%, 100% { transform: translateY(var(--rise)) rotateX(var(--lean)); }
  50% { transform: translateY(calc(var(--rise) - var(--ch) * 0.018)) rotateX(calc(var(--lean) - 1.5deg)); }
}
html[data-room='numen'][data-motion='full'] .nm[data-card='armed'] .nm-card:not(.is-held) .nm-card__lift {
  animation: nm-float 4.2s ease-in-out infinite;
}

html[data-room='numen'] .nm-slot {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
}
html[data-room='numen'] .nm-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: calc(var(--cw) * 0.05);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgb(232 180 87 / 0.3);
  background: #10162e;
}
html[data-room='numen'] .nm-face--front { transform: rotateY(180deg); }
html[data-room='numen'] .nm-face__art {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* the numeral laid over the engraving, as the tent lays it (.slot__num) */
html[data-room='numen'] .nm-num {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(var(--ch) * 0.07) 0 calc(var(--ch) * 0.025);
  background: linear-gradient(to top, rgb(10 6 4 / 0.96) 30%, rgb(10 6 4 / 0.6) 62%, transparent);
  font-family: var(--voice);
  font-weight: 300;
  font-size: calc(var(--ch) * 0.12);
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--candle-hi);
  text-align: center;
  text-shadow: 0 0 14px rgb(232 180 87 / 0.45);
}
/* the candles are moving, so the light on the face is too */
html[data-room='numen'] .nm-face__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(90% 60% at 18% 30%, rgb(255 196 110 / 0.16), transparent 70%);
  opacity: 0.7;
}
@keyframes nm-flicker {
  0%, 100% { opacity: 0.62; }
  17% { opacity: 0.9; }
  31% { opacity: 0.55; }
  52% { opacity: 0.84; }
  71% { opacity: 0.6; }
  86% { opacity: 0.95; }
}
html[data-room='numen'][data-motion='full'] .nm-face__light { animation: nm-flicker 3.7s ease-in-out infinite; }

/* its shadow on the cloth narrows as it turns (--turn from the script) and
   softens as it lifts */
html[data-room='numen'] .nm-card__shadow {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: calc(var(--ch) * -0.045);
  height: calc(var(--ch) * 0.08);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(6 2 2 / 0.82), rgb(6 2 2 / 0.4) 60%, transparent);
  transform: scaleX(var(--turn, 1));
  transition: opacity 900ms var(--ease-nm), filter 900ms var(--ease-nm);
  filter: blur(3px);
  pointer-events: none;
}
html[data-room='numen'] .nm:is([data-card='armed'], [data-card='turning']) .nm-card__shadow { filter: blur(7px); opacity: 0.8; }

/* a faint edge of candlelight on the card whose turn it is, breathing slowly */
html[data-room='numen'] .nm-card__halo {
  position: absolute;
  inset: calc(var(--ch) * -0.06) calc(var(--cw) * -0.1);
  border-radius: 18%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 212 137 / 0.34), rgb(232 180 87 / 0.12) 62%, transparent);
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity 900ms var(--ease-nm), transform 900ms var(--ease-nm);
}
@keyframes nm-breathe {
  from { opacity: 0.5; }
  to { opacity: 1; }
}
html[data-room='numen'] .nm[data-card='armed'] .nm-card__halo {
  opacity: 0.8;
  animation: nm-breathe 4.2s ease-in-out infinite alternate;
}
/* in the hand, or going over, the card is its own light */
html[data-room='numen'] .nm[data-card='armed'] .nm-card.is-held .nm-card__halo,
html[data-room='numen'] .nm[data-card='turning'] .nm-card__halo { opacity: 0; animation: none; transition-duration: 250ms; }
html[data-room='numen'] .nm-card:focus-visible .nm-card__halo {
  opacity: 1;
  background: radial-gradient(closest-side, rgb(255 212 137 / 0.55), rgb(232 180 87 / 0.2) 62%, transparent);
}
html[data-room='numen'] .nm-card:focus-visible .nm-face {
  box-shadow: 0 0 0 2px var(--candle-hi), 0 0 18px 2px rgb(232 180 87 / 0.5);
}

/* tried too early: a corner comes up off the cloth and goes back down */
@keyframes nm-balk {
  0% { transform: rotateY(0deg); }
  26% { transform: rotateX(10deg) rotateY(-16deg) rotateZ(-2.5deg) translateZ(18px); }
  58% { transform: rotateX(-2deg) rotateY(3deg) rotateZ(0.5deg); }
  78% { transform: rotateX(1deg) rotateY(-1deg); }
  100% { transform: rotateY(0deg); }
}
html[data-room='numen'] .nm-card.is-balking .nm-slot { animation: nm-balk 950ms var(--ease-nm); }

/* ------------------------------------------------------------ her line */

html[data-room='numen'] .nm-line {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(100cqh - var(--lip) + var(--ch) + clamp(14px, 3.4cqh, 44px));
  width: min(24ch, 86cqw);
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--voice);
  font-weight: 300;
  font-size: clamp(1.35rem, 0.8rem + 1.55cqw, 2.35rem);
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  color: var(--cream-nm);
  text-shadow: 0 2px 26px rgb(0 0 0 / 0.75), 0 0 2px rgb(0 0 0 / 0.6);
  pointer-events: none;
  isolation: isolate;
}
html[data-room='numen'] .nm-line:empty { display: none; }
/* her voice carries its own shade, so it reads over a candle as well as the dark */
html[data-room='numen'] .nm-line::before {
  content: '';
  position: absolute;
  inset: -30% -14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(6 3 6 / 0.62), rgb(6 3 6 / 0.34) 60%, transparent);
}
@keyframes nm-said {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
html[data-room='numen'] .nm-line.is-said { animation: nm-said 1.45s var(--ease-nm) 250ms both; }

/* ------------------------------------------------------- her hand, on the cloth */

html[data-room='numen'] .nm-cloth {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  font-family: var(--hand);
  font-size: var(--type);
  line-height: 1.1;
  color: var(--ink);
  text-shadow: 0 2px 14px rgb(8 4 2 / 0.95), 0 0 30px rgb(8 4 2 / 0.7);
}
/* a pool of shade under each piece of writing, so the gold reads on the folds */
html[data-room='numen'] .nm-ask::before,
html[data-room='numen'] .nm-workings::before {
  content: '';
  position: absolute;
  inset: -45% -22%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(10 3 5 / 0.66), rgb(10 3 5 / 0.38) 58%, transparent);
  pointer-events: none;
}
html[data-room='numen'] .nm-ask {
  position: absolute;
  right: calc(100cqw - var(--cx) + 3.2cqw);
  top: calc(var(--skirt) + var(--ph) * 0.03);
  pointer-events: auto;
}
html[data-room='numen'] .nm[data-curtain='shut'] .nm-ask { visibility: hidden; }
html[data-room='numen'] .nm-ask__words {
  margin: 0;
  white-space: nowrap;
}
html[data-room='numen'] .nm-ink { display: inline-block; padding-right: 0.15em; }

/* The wipe of a pen: a soft edge crosses the words left to right. */
html[data-room='numen'] .nm-write {
  -webkit-mask-image: linear-gradient(90deg, #000 47%, transparent 53%);
  mask-image: linear-gradient(90deg, #000 47%, transparent 53%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
@keyframes nm-write {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
html[data-room='numen'] .nm[data-curtain='open'] .nm-ask__words .nm-write { animation: nm-write 1500ms cubic-bezier(0.4, 0.1, 0.5, 0.95) 80ms both; }

html[data-room='numen'] .nm-blanks {
  display: flex;
  align-items: flex-end;
  gap: 0.18em;
  margin-top: 0.32em;
}
html[data-room='numen'] .nm-blank {
  position: relative;
  display: block;
  width: 2.1em;
  padding-bottom: 0.18em;
  cursor: text;
}
html[data-room='numen'] .nm-blank--year { width: 3.7em; }
html[data-room='numen'] .nm-blank__in {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 1.12em;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--ink);
  caret-color: var(--candle-hi);
  text-shadow: inherit;
}
html[data-room='numen'] .nm-blank__in::selection { background: rgb(232 180 87 / 0.35); }
html[data-room='numen'] .nm-blank__in:focus-visible { outline: none; }
html[data-room='numen'] .nm-rule {
  position: absolute;
  left: 0;
  bottom: 0.12em;
  width: 100%;
  height: 0.42em;
  overflow: visible;
  pointer-events: none;
}
html[data-room='numen'] .nm-rule path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-opacity: 0.62;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 1px 2px rgb(8 4 2 / 0.9));
  transition: stroke 300ms ease, stroke-width 300ms ease, stroke-opacity 300ms ease;
}
@keyframes nm-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
html[data-room='numen'] .nm[data-curtain='open'] .nm-blank .nm-rule path { animation: nm-draw 520ms cubic-bezier(0.5, 0, 0.4, 1) both; }
html[data-room='numen'] .nm[data-curtain='open'] .nm-blank--day .nm-rule path { animation-delay: 1250ms; }
html[data-room='numen'] .nm[data-curtain='open'] .nm-blank--month .nm-rule path { animation-delay: 1650ms; }
html[data-room='numen'] .nm[data-curtain='open'] .nm-blank--year .nm-rule path { animation-delay: 2050ms; }
html[data-room='numen'] .nm-slash {
  padding-bottom: 0.3em;
  opacity: 0.72;
}
html[data-room='numen'] .nm[data-curtain='open'] .nm-slash { animation: nm-write 300ms linear both; }
html[data-room='numen'] .nm[data-curtain='open'] .nm-slash:nth-of-type(1) { animation-delay: 1580ms; }
html[data-room='numen'] .nm[data-curtain='open'] .nm-slash:nth-of-type(2) { animation-delay: 1980ms; }
html[data-room='numen'] .nm-slash {
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* her guide under each rule, pencil-faint, gone once the ink is in */
html[data-room='numen'] .nm-guide {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: -0.08em;
  font-size: 0.5em;
  line-height: 1;
  text-align: center;
  opacity: 0.5;
  transition: opacity 400ms ease;
}
html[data-room='numen'] .nm-blank.is-filled .nm-guide { opacity: 0; }
html[data-room='numen'] .nm[data-curtain='open'] .nm-guide { animation: nm-said 900ms ease 2300ms backwards; }

/* the blank being written in: its rule takes the candle */
html[data-room='numen'] .nm-blank:focus-within .nm-rule path {
  stroke: var(--candle-hi);
  stroke-width: 2.4px;
  stroke-opacity: 1;
  filter: drop-shadow(0 0 5px rgb(232 180 87 / 0.9));
}
/* a day that is not one: the ink goes to ember */
html[data-room='numen'] .nm[data-date='wrong'] .nm-blank__in { color: color-mix(in oklch, var(--ember-nm) 80%, var(--candle-hi)); }
/* the card was tried first: the blanks warm, so they are where to begin */
@keyframes nm-warm {
  0%, 100% { stroke: var(--ink); stroke-opacity: 0.62; }
  22%, 64% { stroke: #ffb35a; stroke-opacity: 1; stroke-width: 2.6px; }
}
@keyframes nm-warm-guide {
  0%, 100% { opacity: 0.5; }
  22%, 64% { opacity: 1; }
}
html[data-room='numen'] .nm-ask.is-warm .nm-rule path {
  animation: nm-warm 1.8s ease both;
  filter: drop-shadow(0 0 7px rgb(255 160 70 / 0.95));
}
html[data-room='numen'] .nm-ask.is-warm .nm-blank:not(.is-filled) .nm-guide { animation: nm-warm-guide 1.8s ease both; }

/* her workings, token by token, with her arrows drawn in two strokes */
html[data-room='numen'] .nm-workings {
  position: absolute;
  left: calc(var(--cx) + 3.2cqw);
  top: calc(var(--skirt) + var(--ph) * 0.03 + var(--type) * 1.3);
  margin: 0;
  white-space: nowrap;
}
html[data-room='numen'] .nm-workings__ink { display: inline-flex; align-items: center; gap: 0.12em; }
html[data-room='numen'] .nm-w {
  display: inline-block;
  padding: 0 0.06em;
  animation: nm-write var(--dur) cubic-bezier(0.4, 0.1, 0.5, 0.95) var(--delay) both;
}
html[data-room='numen'] .nm-arrow {
  width: 1.15em;
  height: 0.55em;
  overflow: visible;
  margin: 0 0.1em;
}
html[data-room='numen'] .nm-arrow path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 1px 2px rgb(8 4 2 / 0.9));
  animation: nm-draw 220ms ease-out var(--delay) both;
}
html[data-room='numen'] .nm-arrow path + path { animation-delay: calc(var(--delay) + 180ms); }

/* -------------------------------------------------------------- curtain */

html[data-room='numen'] .nm-curtain {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
html[data-room='numen'] .nm-half {
  position: absolute;
  top: calc(50cqh - var(--hh) / 2);
  height: var(--hh);
  max-width: none;
  transition: transform 2600ms cubic-bezier(0.62, 0.02, 0.22, 1);
  will-change: transform;
}
/* drawn together they overlap a little at the middle, the right over the left,
   so the only light is along the lit ruffle of its edge */
html[data-room='numen'] .nm-half--l {
  left: calc(50cqw + var(--wl) * 0.08 - var(--wl));
  width: var(--wl);
  transform-origin: 0 50%;
}
html[data-room='numen'] .nm-half--r {
  left: calc(50cqw - var(--wr) * 0.08);
  width: var(--wr);
  transform-origin: 100% 50%;
  transition-delay: 70ms;
}
/* drawn back, each gathers toward its own side and leaves its edge in view */
html[data-room='numen'] .nm:not([data-curtain='shut']) .nm-half--l {
  transform: translateX(calc(var(--rest) - 50cqw + var(--wl) * (0.92 - 0.96 * var(--gather)))) scaleX(var(--gather));
}
html[data-room='numen'] .nm:not([data-curtain='shut']) .nm-half--r {
  transform: translateX(calc(50cqw - var(--rest) - var(--wr) * (0.92 - 0.98 * var(--gather)) + var(--nudge, 0px))) scaleX(var(--gather));
}
/* the top of the tent is in shadow, so the brass bell and the madder pennant
   of the frame read against it rather than against the red velvet */
html[data-room='numen'] .nm-curtain::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: clamp(90px, 16cqh, 150px);
  background: linear-gradient(to bottom, rgb(6 3 8 / 0.78), rgb(6 3 8 / 0.4) 55%, transparent);
  pointer-events: none;
}
/* the light behind the right-hand edge, where the tent goes on */
html[data-room='numen'] .nm-glow {
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: calc(100cqw - var(--rest) - 110px);
  width: 150px;
  background:
    radial-gradient(22% 44% at 76% 50%, rgb(255 214 140 / 0.72), transparent 100%),
    radial-gradient(60% 50% at 80% 50%, rgb(232 170 80 / 0.22), transparent 100%);
  opacity: 0;
  transition: opacity 600ms ease;
}

/* the door out is that edge */
html[data-room='numen'] .nm-door {
  position: absolute;
  z-index: 22;
  top: 16%;
  bottom: 12%;
  right: auto;
  left: calc(100cqw - var(--rest) - 38px);
  width: calc(var(--rest) + 38px - var(--edge-w) - 14px);
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
  transition: opacity 600ms ease;
}
html[data-room='numen'] .nm[data-curtain='shut'] .nm-door { visibility: hidden; opacity: 0; }
html[data-room='numen'] a.nm-door:hover,
html[data-room='numen'] a.nm-door:focus-visible {
  filter: none;
  box-shadow: none;
  outline: none;
  background: linear-gradient(to right, transparent 20%, rgb(255 212 137 / 0.1) 62%, transparent);
}
html[data-room='numen'] .nm:has(a.nm-door:hover, a.nm-door:focus-visible) .nm-half--r { --nudge: 12px; transition-duration: 700ms; transition-delay: 0ms; }
html[data-room='numen'] .nm:has(a.nm-door:hover, a.nm-door:focus-visible) .nm-glow { opacity: 1; }
/* her word for it, down the edge of the cloth */
html[data-room='numen'] .nm-door .door-out__label {
  position: absolute;
  top: 50%;
  right: auto;
  left: 20px;
  translate: -50% -50%;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--hand);
  font-style: normal;
  font-size: clamp(1.15rem, 0.9rem + 0.6cqw, 1.6rem);
  line-height: 1;
  color: var(--candle-hi);
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.9), 0 0 3px rgb(0 0 0 / 0.8);
  opacity: 0;
  transition: opacity 550ms var(--ease-nm), translate 550ms var(--ease-nm);
}
html[data-room='numen'] a.nm-door:hover .door-out__label,
html[data-room='numen'] a.nm-door:focus-visible .door-out__label { opacity: 1; }
/* reached by keys, the words are lit as well as shown */
html[data-room='numen'] a.nm-door:focus-visible .door-out__label {
  text-shadow: 0 0 10px rgb(255 190 100 / 0.95), 0 0 22px rgb(232 160 70 / 0.7), 0 2px 10px rgb(0 0 0 / 0.9);
}
/* someone who never hovers still has to find the way on */
@media (hover: none) {
  html[data-room='numen'] a.nm-door .door-out__label { opacity: 0.78; }
}

/* ------------------------------------------------------ a phone held upright */

@container stage (orientation: portrait) {
  html[data-room='numen'] .nm {
    --fx: 0.245;
    --cx: 57cqw;
    --ch: min(var(--ph) * 0.33, 62cqw);
    --rest: clamp(34px, 9cqw, 84px);
    --type: clamp(1.25rem, 0.9rem + 1.6cqw, 2rem);
  }
  html[data-room='numen'] .nm-ask {
    right: auto;
    left: 50cqw;
    top: calc(var(--skirt) + var(--ph) * 0.012);
    transform: translateX(-50%);
  }
  html[data-room='numen'] .nm-ask__words { text-align: center; }
  html[data-room='numen'] .nm-blanks { justify-content: center; }
  html[data-room='numen'] .nm-workings {
    left: 50cqw;
    top: calc(var(--skirt) + var(--ph) * 0.012 + var(--type) * 3.05);
    transform: translateX(-50%);
  }
  html[data-room='numen'] .nm-line { width: min(20ch, 80cqw); }
}

/* a short, wide window (a phone on its side): the skirt is shallow, so her
   question and its blanks run along it in one line, the workings beside them,
   and her line sits in the dark above the card */
@container stage (orientation: landscape) and (max-height: 540px) {
  html[data-room='numen'] .nm {
    --ask-h: calc(var(--type) * 1.9);
    --ch: min(var(--ph) * 0.36, 46cqh);
    --type: clamp(0.95rem, 0.3rem + 2.6cqh, 1.45rem);
  }
  html[data-room='numen'] .nm-ask {
    top: calc(var(--skirt) + 1cqh);
    display: flex;
    align-items: flex-end;
    gap: 0.55em;
  }
  html[data-room='numen'] .nm-blanks { margin-top: 0; }
  html[data-room='numen'] .nm-guide { font-size: 0.45em; }
  html[data-room='numen'] .nm-workings { top: calc(var(--skirt) + 1cqh + var(--type) * 0.18); }
  html[data-room='numen'] .nm-line {
    width: min(40ch, 64cqw);
    bottom: calc(100cqh - var(--lip) + var(--ch) + 1.5cqh);
    font-size: clamp(0.95rem, 0.4rem + 2.4cqh, 1.5rem);
    line-height: 1.22;
  }
}

/* -------------------------------------------------------------- stillness */

/* The reader stilled the place: nothing plays. The curtain is simply open,
   the writing simply written, and a turn is a cut (the script sees to that). */
html[data-room='numen'][data-motion='still'] .nm-half,
html[data-room='numen'][data-motion='still'] .nm-card__lift,
html[data-room='numen'][data-motion='still'] .nm-card__halo,
html[data-room='numen'][data-motion='still'] .nm-card__shadow,
html[data-room='numen'][data-motion='still'] .nm-guide,
html[data-room='numen'][data-motion='still'] .nm-glow,
html[data-room='numen'][data-motion='still'] .nm-door,
html[data-room='numen'][data-motion='still'] .nm-rule path { transition: none; }
html[data-room='numen'][data-motion='still'] .nm-write,
html[data-room='numen'][data-motion='still'] .nm-w,
html[data-room='numen'][data-motion='still'] .nm-slash,
html[data-room='numen'][data-motion='still'] .nm-guide,
html[data-room='numen'][data-motion='still'] .nm-rule path,
html[data-room='numen'][data-motion='still'] .nm-arrow path,
html[data-room='numen'][data-motion='still'] .nm-line,
html[data-room='numen'][data-motion='still'] .nm-card__halo,
html[data-room='numen'][data-motion='still'] .nm-slot { animation: none !important; }