:root { --ink: #2e1f12; --dim: 1; }
  html, body { margin: 0; height: 100%; overflow: hidden; background: #d9c39a; }
  body.idle { cursor: none; }
  body { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
  canvas { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; }
  #text { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100lvh; pointer-events: none; filter: brightness(var(--dim)); }   /* same box as the canvas */
  #verse {
    position: absolute; left: 8.5vw; top: 13vh;
    font-family: 'IM Fell English', Georgia, serif; font-style: italic;
    font-size: clamp(15px, 1.55vw, 38px); line-height: 1.55; color: var(--ink);
    opacity: 0; filter: blur(3px); transform: translateY(0.4em);
    transition: opacity 7s ease, filter 7s ease, transform 9s ease;
    mix-blend-mode: multiply; text-shadow: 0 0 0.5px rgba(46,31,18,.6);
  }
  #verse.on { opacity: .82; filter: blur(0); transform: none; }
  #verse .ln { display: block; white-space: nowrap; }      /* a line of verse is never broken */
  #verse .who {
    display: block; margin-top: 1.1em; font-family: 'IM Fell English SC', Georgia, serif; font-style: normal;
    font-size: .6em; letter-spacing: .16em; opacity: .75;
  }
  #verse .who i { font-family: 'IM Fell English', Georgia, serif; font-style: italic; letter-spacing: .04em; }
  #toast {
    position: absolute; font-family: 'IM Fell English', Georgia, serif; font-style: italic;
    color: var(--ink); mix-blend-mode: multiply; transition: opacity 1.6s ease;
  }
  #toast { left: 0; right: 0; top: 3.9vh; text-align: center; font-size: clamp(11px, .95vw, 22px); letter-spacing: .08em; opacity: 0; }
  #toast.on { opacity: .7; }
  #caption {
    position: absolute; left: 0; right: 0; bottom: 3.9vh; text-align: center;
    font-family: 'IM Fell English SC', Georgia, serif; letter-spacing: .28em;
    font-size: clamp(9px, 0.82vw, 20px); color: var(--ink); opacity: 0;
    transition: opacity 6s ease; mix-blend-mode: multiply;
  }
  #caption.on { opacity: .72; }
  #caption i { font-family: 'IM Fell English', Georgia, serif; letter-spacing: .06em; }

  /* ---------- opening page ---------- */
  #menu {
    position: fixed; inset: 0; display: flex; align-items: safe center; justify-content: center; overflow-y: auto;
    color: var(--ink); font-family: 'IM Fell English', Georgia, serif; text-align: center;
    transition: opacity 2.4s ease; padding: 0 16px;
  }
  #menu.hidden { display: none; }
  #menu.gone { opacity: 0; pointer-events: none; }
  .m-plate { max-width: 1100px; }
  .m-title { font-family: 'IM Fell English SC', Georgia, serif; font-size: clamp(34px, 5.4vw, 116px); letter-spacing: .12em; line-height: 1.1; mix-blend-mode: multiply; }
  .m-sub { font-style: italic; font-size: clamp(14px, 1.45vw, 32px); opacity: .72; margin-top: .5em; letter-spacing: .03em; }
  .m-rule { width: 11em; margin: 2em auto 2.4em; height: 4px; border-top: 1px solid rgba(46,31,18,.45); border-bottom: 1px solid rgba(46,31,18,.3); font-size: clamp(14px, 1.45vw, 32px); }
  .m-choices { display: flex; gap: 3.5vw; justify-content: center; flex-wrap: wrap; }
  .m-choice {
    display: flex; flex-direction: column; align-items: center; gap: .55em;
    width: min(27vw, 440px); min-width: 240px; padding: 1.7em 1.9em 1.8em;
    background: rgba(250,243,224,.32); color: inherit; font: inherit; cursor: pointer;
    border: 1px solid rgba(46,31,18,.42); outline: 1px solid rgba(46,31,18,.2); outline-offset: 5px;
    transition: background .7s ease, transform .7s ease, outline-offset .7s ease;
  }
  .m-choice:hover, .m-choice:focus-visible { background: rgba(250,243,224,.62); transform: translateY(-2px); outline-offset: 8px; }
  .m-n { font-family: 'IM Fell English SC', Georgia, serif; font-size: clamp(11px, .9vw, 20px); letter-spacing: .3em; opacity: .6; }
  .m-t { font-style: italic; font-size: clamp(24px, 2.5vw, 56px); line-height: 1.1; }
  .m-d { font-style: italic; font-size: clamp(12px, 1.02vw, 23px); line-height: 1.55; opacity: .8; max-width: 22em; }
  .m-snd { display: inline-flex; align-items: center; gap: .5em; margin-top: 2.6em; font-style: italic; font-size: clamp(12px, 1vw, 22px); opacity: .75; cursor: pointer; }
  .m-snd input { accent-color: #5a4028; width: 1em; height: 1em; }

  /* ---------- tall screens (phones and tablets held upright): the verse lives in the sky ---------- */
  @media (max-aspect-ratio: 9/10) {
    #verse { left: 9vw; right: 9vw; top: 8vh; font-size: clamp(15px, 4.1vw, 34px); }
    #caption { left: 5vw; right: 5vw; font-size: clamp(11px, 3.15vw, 19px); letter-spacing: .09em; line-height: 1.32;
               bottom: calc(6.75vh - 1.32em); bottom: calc(6.75lvh - 1.32em); }   /* centred in the band between the frame and the plate edge */
    #caption .cl { display: block; white-space: nowrap; }
    .m-plate { padding: 6vh 0; }
    .m-title { font-size: clamp(30px, 9.5vw, 90px); letter-spacing: .08em; }
    .m-sub { font-size: clamp(14px, 4vw, 28px); }
    .m-choice { width: min(84vw, 440px); min-width: 0; padding: 1.3em 1.4em 1.4em; }
    .m-t { font-size: clamp(24px, 7vw, 48px); }
    .m-d { font-size: clamp(13px, 3.6vw, 20px); }
    .m-snd { font-size: clamp(13px, 3.6vw, 20px); }
  }
  /* ---------- short screens (phones held sideways): a more compact opening page ---------- */
  @media (max-height: 520px) {
    .m-plate { padding: 3vh 0; }
    .m-title { font-size: clamp(26px, 5vw, 60px); }
    .m-rule { margin: 1.1em auto 1.3em; }
    .m-choice { padding: 1em 1.3em 1.1em; gap: .35em; }
    .m-d { font-size: clamp(11px, 1.9vw, 16px); }
    .m-snd { margin-top: 1.4em; }
    #verse { top: 10vh; }
    #caption { bottom: 1.6vh; }
  }