/* Title: in shadow to begin with, lit from the left by the key light at the end. */
h1{position:absolute;left:0;right:0;top:max(7vh,28px);margin:0;padding:0 16px;text-align:center;z-index:2;
  font-weight:400;font-size:clamp(34px,5.2vw,70px);line-height:1.1;letter-spacing:-.045em;color:var(--shadowed);
  transition:color .6s}
h1::after{content:attr(data-text);position:absolute;inset:0;padding:inherit;pointer-events:none;
  color:transparent;background:linear-gradient(100deg,#fff4e4 0%,#efe9e0 30%,#c9c3ba 62%,#8f8981 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--title-light)*160% - 60%),transparent calc(var(--title-light)*160%));
  mask-image:linear-gradient(90deg,#000 calc(var(--title-light)*160% - 60%),transparent calc(var(--title-light)*160%));
  filter:drop-shadow(0 0 22px rgba(255,186,120,calc(var(--title-light)*.22)))}

/* Dictionary entries share one slot at the foot of the stage. */
.captions{position:absolute;left:0;right:0;bottom:max(8vh,32px);z-index:2;display:grid;justify-items:center;padding:0 24px}
.definition{grid-area:1/1;max-width:36em;margin:0;text-align:center;font-size:clamp(15px,1.35vw,17px);line-height:1.75;color:var(--muted);opacity:0;
  transition:opacity .25s linear}
.definition b{font:500 12px var(--mono);letter-spacing:.06em;color:var(--ink)}
.definition .say{font-size:.9em;color:#7f7d79;margin:0 .15em}
.definition i{font-size:.92em;color:#8e8c88}
.definition .sense{display:block;margin-top:.35em}

.cue{position:absolute;left:50%;bottom:max(6vh,24px);margin:0;transform:translateX(-50%);z-index:2;opacity:var(--cue);
  font:500 10px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#8a8884;display:flex;flex-direction:column;align-items:center;gap:12px}
.cue::after{content:"";width:1px;height:34px;background:linear-gradient(#8a8884,transparent)}
@media (prefers-reduced-motion:no-preference){.cue::after{animation:cue 2.4s ease-in-out infinite;transform-origin:top}}
@keyframes cue{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

@media (max-width:600px){
  h1{top:max(9vh,40px);font-size:clamp(32px,9vw,46px)}
  .captions{bottom:max(9vh,36px);padding:0 22px}
  .definition{font-size:15px;line-height:1.65}
  .definition b{font-size:11px}
  .callouts text{font-size:15px}
}
@media (prefers-reduced-motion:no-preference){h1,.captions{animation:appear 1.2s ease both}@keyframes appear{from{opacity:0}}}