/* ============================================================
   Canticum — shared stylesheet
   Used identically by the teatro and the camerino, so that a block
   of content can travel between them without a single edit.
   ============================================================ */

:root{
  --ink:#131110; --ink-2:#1C1917; --ink-3:#252120;
  --paper:#EFE9DE; --muted:#9C9287;
  --gold:#C6A15B; --gold-2:#E0C48C; --gold-deep:#8F7238;
  --hair:#332E28;
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --wrap:1000px;
}

*{box-sizing:border-box}

/* ---------- controls ----------
   Safari draws its own chrome on a <button> unless told not to, and a
   button never inherits the page's typeface on its own. Without this
   every control in the camerino keeps a layer of the system underneath
   whatever it is given — which on an iPhone is what shows through, and
   is why the ten-second skips looked like something from another
   decade.

   It has been missing since the first day rather than since any recent
   change: only the seekbar was ever reset.

   tap-highlight because a grey flash on every press is the phone's
   idea, not ours; touch-action because without it Safari waits to see
   whether a second tap is coming, and a transport control that answers
   a third of a second late feels broken rather than slow. */
button{
  -webkit-appearance:none;appearance:none;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
/* Any class that sets `display` outbids the user-agent's [hidden] rule,
   so hidden elements quietly stay on screen. Settle it once, here. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--font-body);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

a{color:var(--gold-2);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{margin:0;text-wrap:balance;font-family:var(--font-display);font-weight:600}
h1{font-size:clamp(2.6rem,7vw,4.4rem);line-height:1.03;letter-spacing:-.018em}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.1;letter-spacing:-.012em}
h3{font-size:1.18rem;line-height:1.3;letter-spacing:-.006em}
p{margin:0}

.eyebrow{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 18px;
}
.lead{
  font-size:clamp(1.08rem,2vw,1.34rem);color:var(--muted);
  line-height:1.5;max-width:42ch;
}
.prose{max-width:62ch;color:var(--paper)}
.prose p + p{margin-top:1.1em}
.prose em{color:var(--gold-2);font-style:italic}

/* A letter, set as a letter. The salutation and the signature carry as
   much as the paragraphs between them — "un abbraccio, Roberto" is not
   a closing formula to be flattened into body text. */
.letter{max-width:58ch}
.letter .salute{color:var(--gold-2)}
.letter .sign{margin-top:1.7em;color:var(--gold-2);font-style:italic}
.letter .sign b{
  display:block;margin-top:.25em;
  font-style:normal;font-weight:600;color:var(--paper);
}
.letter .when{
  margin-top:2em;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}


/* ============================================================
   BILINGUAL — English · Italiano
   ------------------------------------------------------------
   Every translatable phrase carries both versions as siblings, in
   this order, so the two readings sit next to each other in the
   source and cannot drift apart:

     <span lang="en">Where to hear it</span>
     <span lang="it">Dove ascoltarlo</span>

   A missing Italian falls back to English rather than vanishing, so
   an untranslated block is merely untranslated, never blank.

   Note what is NOT here: IPA is not a site language. Rendering the
   navigation phonetically was a lovely idea that helped nobody. The
   only phonetic text on the site is Sole's transcription of the
   German, in the camerino, where a singer actually needs it — see
   [lang="de-fonipa"] further down.

   ⚠ Source order matters: :has(~ …) only sees FOLLOWING siblings,
   so "en" must come before "it".
   ============================================================ */

html[data-lang="en"] [lang="it"]{display:none}
html[data-lang="it"] [lang="en"]:has(~ [lang="it"]){display:none}

/* ── a foreign phrase is not a translation ────────────────────────────
   The rules above hide the language you are not reading, which is right
   for the paired spans that carry a whole sentence twice. It is wrong
   for a movement's Italian title INSIDE an English sentence: that is one
   word of the sentence, not the other half of a pair, and hiding it left

       "Oiseaux is now , Frate Foco is , and In te clamavi is —
        same music, new titles."

   on the live camerino, in English only. Nine of them in one notice.

   Nesting is what tells the two apart: a pair is two siblings, a foreign
   phrase sits inside one of them. So anything marked as the other
   language WITHIN the language being read stays visible. */
html[data-lang="en"] [lang="en"] [lang="it"],
html[data-lang="it"] [lang="it"] [lang="en"]{display:revert}

/* the switcher */
.langs{display:flex;align-items:center;gap:2px}
.langs button{
  background:none;border:0;cursor:pointer;font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:6px 8px;border-radius:7px;line-height:1;
}
.langs button:hover{color:var(--paper);background:var(--ink-2)}
.langs button[aria-pressed="true"]{color:var(--ink);background:var(--gold)}


/* ---------- header ---------- */

header.site{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--ink) 84%,transparent);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--hair);
}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{
  display:flex;align-items:baseline;gap:10px;color:var(--paper);
  font-family:var(--font-display);font-size:1.24rem;letter-spacing:.01em;
  white-space:nowrap;
}
.brand:hover{text-decoration:none}
/* iOS reserves double-tap for zoom; this hands it back to us, so
   double-tapping the title can open the camerino door. */
.brand{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.brand .sub{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
}
.bar-right{display:flex;align-items:center;gap:14px}
nav.site-nav{display:flex;gap:20px;align-items:center}
nav.site-nav a{color:var(--muted);font-size:15px}
nav.site-nav a:hover{color:var(--paper);text-decoration:none}
/* the page you are already on says so rather than pretending to be a
   way of getting somewhere */
nav.site-nav a.here{color:var(--gold)}
/* ── the menu on a tablet and a phone ────────────────────────────────
   Below 800px the whole menu was once hidden outright. Reasonable for
   ten items and wrong for what it took with it: on a tablet neither the
   Leggio nor the Revisioni could be reached at all, and the camerino is
   thousands of lines long, so "you can scroll to it" is not an answer
   for Studio, Testi, Note, Prove or Senza rete either.

   Hiding a subset was the next wrong answer. The four pages do not
   carry the same menu — the teatro's five items are ALL section links,
   so a rule that hides those would have left it an empty box.

   So: every item stays, and below 800px they fold into one button.

   No JavaScript. A checkbox and its label, which works if a script
   fails, if a script never loads, and on a phone in a hall with no
   network. The nav is the checkbox's sibling, so :checked ~ opens it.
   Escape is a nicety a script would add; a tap outside closes it
   because the label covers the screen behind the panel. */
.menu-btn{display:none}

@media (max-width:800px){
  .menu-btn{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted);
    border:1px solid var(--hair);border-radius:999px;
    padding:9px 14px;             /* a finger, not a mouse */
    -webkit-tap-highlight-color:transparent;
  }
  .menu-btn::before{content:"\2261";font-size:15px;line-height:1}
  .menu-btn:hover{color:var(--paper);border-color:var(--gold-deep)}

  /* the panel, hanging from the header */
  nav.site-nav{
    display:none;
    position:absolute;right:0;top:calc(100% + 8px);
    flex-direction:column;align-items:stretch;gap:0;
    min-width:min(260px,calc(100vw - 32px));
    background:var(--ink-2);border:1px solid var(--hair);
    border-radius:12px;padding:6px;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    z-index:30;                   /* over the page, under the door at 40 */
  }
  .menu-toggle:checked ~ nav.site-nav{display:flex}
  nav.site-nav a{
    padding:11px 13px;border-radius:8px;font-size:16px;
    min-height:44px;display:flex;align-items:center;
  }
  nav.site-nav a:hover{background:color-mix(in srgb,var(--paper) 8%,transparent)}
  nav.site-nav a.here{background:color-mix(in srgb,var(--gold) 12%,transparent)}

  /* so the panel can hang from it */
  .bar{position:relative}
  /* and a tap anywhere else puts it away again */
  .menu-toggle:checked ~ .menu-scrim{
    display:block;position:fixed;inset:0;z-index:29;
  }
}
.menu-scrim{display:none}

/* The stage door. Looks like an ornament; is a door.
   Deliberately no pointer cursor and no hover flourish — the people
   who need it have been told, and nobody else should wonder. */
.stagedoor{
  display:inline-block;width:22px;text-align:center;
  color:var(--hair);font-family:var(--font-display);font-size:20px;
  line-height:1;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
  transition:color .4s ease;
}
.stagedoor.armed{color:var(--gold-deep)}


/* The camerino, plainly linked. It was a door you had to be told about;
   for now it is a place you can see. The door itself still exists. */
.camerino-link{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
/* It inherits .btn.ghost, whose border is --hair: a hairline meant for
   dividing things, not for drawing one. On a phone that came out as pale
   text floating in the corner with no edge at all — and this is the one
   link the whole orchestra needs to find. A door should look like a door.

   Named with both of its inherited classes, because .btn.ghost carries
   two and is declared below: a single-class rule here loses whatever
   order it is written in. */
.btn.ghost.camerino-link{border-color:var(--gold-deep)}
.camerino-link .fermata{
  font-family:var(--font-display);font-size:19px;line-height:.7;
  color:var(--gold);transition:color .25s ease;
}
.btn.ghost.camerino-link:hover{text-decoration:none;border-color:var(--gold)}
.camerino-link:hover .fermata{color:var(--gold-2)}

@media (max-width:640px){
  /* 33px high was a mouse target. Apple asks for 44; a musician holding
     a phone in one hand on a stand asks for rather more than that. */
  /* .btn.small carries two classes and is declared further down, so it
     wins any single-class rule here whatever the order. Named in full
     rather than nudged with !important. */
  .btn.small.camerino-link{
    font-size:14.5px;padding:11px 15px;gap:8px;
    background:rgba(198,161,91,.09);
  }
  .camerino-link .fermata{font-size:20px}
  /* the surname is the first thing that can go when the bar is tight —
     the title above it says the same, larger */
  .brand .sub{display:none}
}


/* ---------- buttons ---------- */

.btn{
  display:inline-block;background:var(--gold);color:#1a1409;
  font-weight:640;font-size:15px;padding:11px 18px;border-radius:10px;
  line-height:1;border:1px solid transparent;cursor:pointer;font-family:inherit;
}
.btn:hover{background:var(--gold-2);text-decoration:none}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--hair)}
.btn.ghost:hover{background:var(--ink-2)}
.btn.small{font-size:13.5px;padding:8px 13px}


/* ---------- sections ---------- */

section{padding:clamp(52px,8vw,92px) 0;border-top:1px solid var(--hair)}
section:first-of-type{border-top:0}
.section-head{margin-bottom:clamp(28px,4vw,44px)}
.section-head .lead{margin-top:14px}

.hero{padding:clamp(64px,12vw,124px) 0 clamp(44px,7vw,80px);border-top:0}
.hero .meta-row{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:32px;
  font-family:var(--font-mono);font-size:13px;color:var(--muted);
}
.hero .meta-row b{color:var(--paper);font-weight:600}


/* ---------- the travelling content item ----------
   One block, identical markup in teatro and camerino.
   Media src is always relative — "media/<file>" — so a block moves
   between the realms without a single edit, as long as the realm it
   arrives in has a media/ folder. The camerino has one; the teatro gets
   one the day something first travels.
   ------------------------------------------------- */

.items{display:grid;gap:14px}

.item{
  background:var(--ink-2);border:1px solid var(--hair);
  border-radius:14px;padding:20px 22px;
}
.item-head{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:6px 18px;
}
.item-title{font-family:var(--font-display);font-size:1.14rem}
.item-tag{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--muted);white-space:nowrap;
}
.item-note{margin-top:8px;color:var(--muted);font-size:15.5px;line-height:1.5;max-width:64ch}
.item-actions{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.item audio{
  height:36px;flex:1 1 260px;min-width:0;
  filter:invert(1) hue-rotate(180deg) saturate(.55) brightness(1.05);
}

/* Every file offers both: open it to look, or take it away.
   The name opens in the browser's own PDF viewer; the ↓ downloads. */

.filelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:8px;margin-top:16px}
.filerow{
  display:flex;align-items:center;gap:10px;
  background:var(--ink-3);border:1px solid var(--hair);border-radius:9px;
  padding:0 4px 0 14px;
}
.filerow:hover{border-color:var(--gold-deep)}
.filerow .open{
  flex:1 1 auto;min-width:0;padding:11px 0;color:var(--paper);font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.filerow .open:hover{text-decoration:none;color:var(--gold-2)}
.filerow .open b{
  font-family:var(--font-mono);font-size:11.5px;color:var(--gold);
  font-weight:400;margin-right:8px;
}
.filerow .sz{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.filerow .dl{
  flex:0 0 auto;width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:15px;line-height:1;
}
.filerow .dl:hover{background:var(--ink-2);color:var(--gold);text-decoration:none}

/* ---------- the loop ----------
   A loop belongs to a movement, so its saved spans sit under the row
   whether or not it is playing — the library should be visible. */

.bar-wrap{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
.loop-band{
  /* Taller than the 4px track, so it reads as a marked REGION rather
     than competing with the played/buffered colouring inside it. */
  position:absolute;top:50%;height:15px;margin-top:-7.5px;border-radius:3px;
  background:color-mix(in srgb,var(--gold) 16%,transparent);
  border-left:2px solid var(--gold);
  border-right:2px solid var(--gold);
  pointer-events:none;
}
.loop-band[hidden]{display:none}

.loop-btn{
  flex:0 0 auto;background:none;border:1px solid var(--hair);border-radius:7px;
  color:var(--muted);font-size:13px;line-height:1;padding:5px 8px;cursor:pointer;
  font-family:var(--font-mono);white-space:nowrap;
}
.loop-btn:hover:not(:disabled){color:var(--gold);border-color:var(--gold-deep)}
.loop-btn:disabled{opacity:.4;cursor:default}
.loop-btn.armed{color:var(--ink);background:var(--gold);border-color:var(--gold)}

/* "loop over C" — the same glyph carrying the letter it would take */
.section-btn{
  font-family:var(--font-mono);font-size:12px;
  color:var(--muted);background:var(--ink-2);
  border:1px solid var(--hair);border-radius:7px;
  padding:5px 9px;cursor:pointer;line-height:1;white-space:nowrap;
}
.section-btn:hover:not(:disabled){color:var(--gold);border-color:var(--gold-deep)}
.section-btn:disabled{opacity:.4;cursor:default}
.section-btn.armed{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.section-state:not(:empty){margin-left:.35em}
.loop-state{font-size:11px;letter-spacing:.04em}

.loops{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px 52px}
.loops[hidden]{display:none}

/* ── the rehearsal letters ──────────────────────────────────────────────
   Hidden until the movement is playing, like the rest of the transport —
   a stopped list of fourteen movements should stay a list, not become
   ninety buttons. */
.marks{display:none;flex-wrap:wrap;gap:5px;padding:0 14px 12px 52px}
.track.is-playing .marks{display:flex}
.marks:empty{display:none !important}
.mark{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--muted);background:var(--ink-2);
  border:1px solid var(--hair);border-radius:6px;
  padding:3px 9px;cursor:pointer;line-height:1.5;
}
.mark:hover{color:var(--ink);background:var(--gold);border-color:var(--gold)}

/* the offer to carry on where practice stopped */
.resume{display:flex;align-items:center;gap:8px;margin:0 0 18px}
.resume[hidden]{display:none}
.resume .resume-what{font-family:var(--font-mono);font-size:.86em;color:var(--gold-2)}
.resume-drop{
  background:none;border:0;cursor:pointer;color:var(--muted);
  font-size:16px;line-height:1;padding:6px 8px;border-radius:6px;
}
.resume-drop:hover{color:var(--paper);background:var(--ink-2)}

/* ── the printed part, with the cursor on it ─────────────────────────────
   Dorico's own engraving. It arrives as SVG, which is text, so the ink can
   simply be re-coloured — a white page is the wrong thing to hand someone
   practising at night. */
/* ── the paper you are reading from ──────────────────────────────────
   A palette is two colours, ink and paper, and everything else follows.
   Three of them, cycled with P: the room is dark and the page is dark;
   the room is bright and the page had better be too; and the printed
   part itself, for anyone comparing screen with stand. */
.sheet{
  --sheet-ink:var(--paper);
  --sheet-paper:var(--ink-2);
  --sheet-mark:var(--gold);

  display:none;margin:0 14px 14px 52px;border:1px solid var(--hair);
  border-radius:10px;background:var(--sheet-paper);
  max-height:min(70vh,760px);overflow:auto;overscroll-behavior:contain;
}
.sheet.ink-paper{
  --sheet-ink:#1B1712;
  --sheet-paper:#F4ECDC;      /* Dorico's own cream */
  --sheet-mark:#8A6A1F;
}
.sheet.ink-mono{
  --sheet-ink:#000;
  --sheet-paper:#fff;         /* a bright room, or a projector */
  --sheet-mark:#B8860B;
}
.track.is-playing .sheet:not([hidden]){display:block}
.sheet[hidden]{display:none}
.sheet-wait{padding:24px;text-align:center;color:var(--muted);margin:0}

/* part or score — sticky, because the panel scrolls and the choice
   should not scroll away with the music */
.sheet-kind{
  position:sticky;top:0;z-index:2;margin:0;
  display:flex;gap:6px;padding:8px 10px;
  background:var(--ink-2);border-bottom:1px solid var(--hair);
}
.kind-btn{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:none;
  border:1px solid var(--hair);border-radius:6px;
  padding:4px 11px;cursor:pointer;
}
.kind-btn:hover{color:var(--gold);border-color:var(--gold-deep)}
/* What you are reading sits on the left; how it looks sits on the right.
   The palette is also the one control here that gets pressed with a
   thumb on a stand, so it is given room to be hit — 4px of padding is a
   mouse target, not a finger. */
.ink-btn{margin-left:auto;padding:7px 13px}
.ink-btn::before{
  content:"◐";margin-right:7px;font-size:12px;line-height:1;
  color:var(--gold-deep);
}
.sheet-page{padding:10px 12px}
.sheet-page + .sheet-page{border-top:1px solid var(--hair)}
/* A page that would not come. It keeps its place in the run so the
   cursor still finds the pages either side of it, and takes no height
   it does not need. */
.sheet-page-lost{padding:0}
.sheet svg{width:100%;height:auto;display:block}
/* Only the BLACK ink becomes paper. Dorico fills the box behind a
   rehearsal mark with white, and turning that into ink too made a solid
   block with the letter invisible inside it — so white goes to the
   panel's own background instead, and the letter shows through. */
.sheet svg path[stroke^="rgb(0%"]{stroke:var(--sheet-ink) !important}
.sheet svg path[fill^="rgb(0%"]{fill:var(--sheet-ink) !important}
.sheet svg path[stroke^="rgb(100%"]{stroke:var(--sheet-paper) !important}
.sheet svg path[fill^="rgb(100%"]{fill:var(--sheet-paper) !important}
.sheet svg g{fill:var(--sheet-ink)}
/* The box only, no outline. A thin line round the bar sat among the stave
   lines and read as part of the engraving; the tint alone marks the bar. */
.sheet-cursor{
  fill:color-mix(in srgb,var(--sheet-mark) 18%,transparent);
  stroke:none;
}
.sheet-head{stroke:var(--sheet-mark);stroke-width:1.4}
/* The cursor switched off (B): nothing is drawn, and the page still follows
   the bar — only the marks go, not the page turns. */
.sheet.no-cursor .sheet-cursor,.sheet.no-cursor .sheet-head{display:none}
.cursor-btn{padding:7px 13px}
.cursor-btn::before{
  content:"▭";margin-right:7px;font-size:12px;line-height:1;
  color:var(--gold-deep);
}

.sheet-btn{
  font-family:var(--font-display);font-size:15px;line-height:1;
  color:var(--muted);background:var(--ink-2);
  border:1px solid var(--hair);border-radius:7px;
  padding:4px 9px;cursor:pointer;
}
.sheet-btn:hover:not(:disabled){color:var(--gold);border-color:var(--gold-deep)}
.sheet-btn:disabled{opacity:.4;cursor:default}
.sheet-btn.armed{color:var(--ink);background:var(--gold);border-color:var(--gold)}

/* what changed in this version, for somebody holding a printed part */
.revision.changed{
  margin-top:-6px;color:var(--muted);
  border-left:2px solid var(--gold-deep);padding-left:12px;
}
.revision.changed b{color:var(--paper)}

/* folded, like the instructions: the verdict in the open, the
   movement-by-movement detail for whoever wants it */
details.changes > summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:baseline;gap:9px;
}
details.changes > summary::-webkit-details-marker{display:none}
details.changes > summary::before{content:"+";color:var(--gold);line-height:1}
details.changes[open] > summary::before{content:"–"}
details.changes ul{
  margin:12px 0 0;padding-left:18px;
  font-size:.92rem;line-height:1.7;
}
details.changes li{margin-bottom:3px}
details.changes li b{color:var(--paper)}
.changes-foot{margin:12px 0 0;font-size:.9rem;opacity:.8}

/* "there is a newer version" — offered, never acted on, and out of the
   way of a page somebody is practising from */
.fresh{
  position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:50;
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;border-radius:10px;
  background:var(--ink-2);border:1px solid var(--gold-deep);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  font-size:.94rem;color:var(--paper);max-width:calc(100vw - 32px);
}
/* On the stand it goes to the TOP. The bottom of the leggio is where
   the controls live and where the hand goes; a notice sitting over
   them, mid-rehearsal, is a notice that gets hit by accident. */
body.lg .fresh{top:14px;bottom:auto}
.fresh button{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap;
  color:var(--ink);background:var(--gold);border:0;border-radius:7px;padding:6px 12px;
}

/* which build this page is — small, but findable when someone says it
   is not working and the question is which page they are looking at */
.build-stamp{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--muted);opacity:.7;margin-top:10px;
}
.build-stamp:empty{display:none}

/* keys named in the hints */
/* A key looks like a key: small, capped, with the weight at the bottom
   the way a physical one catches the light. Set in the list as well as
   in the prose, so the two cannot drift apart. */
.hint kbd,.keys kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.6em;height:1.55em;padding:0 .45em;
  font-family:var(--font-mono);font-size:11px;line-height:1;font-weight:400;
  color:var(--paper);background:var(--ink-3);
  border:1px solid var(--hair);border-bottom-width:2px;border-radius:5px;
  box-shadow:0 1px 0 rgba(0,0,0,.45);
  white-space:nowrap;vertical-align:baseline;
}
.loop-chip,.loop-keep,.loop-drop{
  background:var(--ink);border:1px solid var(--hair);border-radius:7px;
  color:var(--muted);font-family:var(--font-mono);font-size:11.5px;
  padding:5px 9px;line-height:1;cursor:pointer;font-variant-numeric:tabular-nums;
}
.loop-chip:hover,.loop-keep:hover{color:var(--gold);border-color:var(--gold-deep)}
.loop-chip.on{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.loop-keep{border-style:dashed}
.loop-drop{margin-left:-4px;border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;padding:5px 7px}
.loop-drop:hover{color:#D98A6A;border-color:#D98A6A}

/* older flat lists, still used elsewhere */
.filelist > a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--ink-3);border:1px solid var(--hair);border-radius:9px;
  padding:11px 14px;color:var(--paper);font-size:15px;
}
.filelist > a:hover{background:#2E2927;text-decoration:none;border-color:var(--gold-deep)}
.filelist .sz{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);white-space:nowrap}


/* ---------- choose your name ----------
   197 parts is not a list anyone can use. A player picks their name
   once and sees their own fourteen, and nothing else. Generated by
   tools/parts.mjs.
   -------------------------------------- */

.revision{
  margin-top:22px;font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.03em;color:var(--muted);
}
.revision b{color:var(--gold);font-weight:400}

.picker{margin-top:28px}
.picker-names{display:flex;flex-wrap:wrap;gap:8px}
.pick{
  background:var(--ink-2);border:1px solid var(--hair);border-radius:10px;
  color:var(--paper);font-family:var(--font-display);font-size:1rem;
  padding:10px 15px;cursor:pointer;line-height:1.2;
}
.pick:hover{border-color:var(--gold-deep);background:var(--ink-3)}

.mine{padding:0;border:0}
.mine[hidden]{display:none}
.mine-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:12px;margin:30px 0 18px;padding-bottom:14px;
  border-bottom:1px solid var(--gold-deep);
}
.mine-head h3{font-size:1.5rem}

/* For the singer, who reads from the whole score rather than a part.
   Not an apology for a missing package — a different, better thing. */
.from-score{
  background:var(--ink-2);border:1px solid var(--hair);
  border-left:3px solid var(--gold-deep);border-radius:0 14px 14px 0;
  padding:22px 24px;
}
.from-score p{
  font-family:var(--font-display);font-size:1.1rem;line-height:1.6;
  color:var(--paper);max-width:56ch;
}
.from-score .item-actions{margin-top:18px}


/* ---------- the recordings ----------
   One player, fourteen movements, two sets. The plain recording is
   the default; the click is opted into.
   ------------------------------------ */

.controls{display:flex;flex-wrap:wrap;gap:12px 26px;margin:34px 0 22px}

/* Three paragraphs worth reading once. Folded away, so the page opens
   as a list of movements rather than as a manual. */
.hints{margin:6px 0 0}
.hints > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--muted);padding:6px 0;
}
.hints > summary::-webkit-details-marker{display:none}
.hints > summary::before{content:"+";color:var(--gold);font-size:13px;line-height:1}
.hints[open] > summary::before{content:"–"}
.hints > summary:hover{color:var(--paper)}
.hints .hint:first-of-type{margin-top:10px}

/* the keys, gathered at the foot of the instructions */
.keys-head{margin-top:20px !important;margin-bottom:8px !important}
.keys{
  display:grid;grid-template-columns:auto 1fr;gap:7px 18px;
  margin:0;max-width:62ch;align-items:baseline;
}
.keys dt{white-space:nowrap;display:flex;gap:4px;align-items:center}
.keys dd{margin:0;color:var(--muted);font-size:.94rem;line-height:1.55}
.ctl{display:flex;flex-direction:column;gap:7px}
.ctl-label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.sets,.speeds{display:inline-flex;gap:2px;padding:3px;background:var(--ink-2);
  border:1px solid var(--hair);border-radius:11px}
.speed-btn{
  background:none;border:0;cursor:pointer;font-family:var(--font-mono);
  font-size:11.5px;color:var(--muted);padding:8px 11px;border-radius:8px;
  line-height:1;font-variant-numeric:tabular-nums;
}
.speed-btn:hover{color:var(--paper)}
.speed-btn[aria-pressed="true"]{color:var(--ink);background:var(--gold)}
/* off normal tempo is worth noticing — nobody should learn a tempo by accident */
.speed-btn[aria-pressed="true"][data-rate="0.5"],
.speed-btn[aria-pressed="true"][data-rate="0.75"],
.speed-btn[aria-pressed="true"][data-rate="0.9"],
.speed-btn[aria-pressed="true"][data-rate="1.25"]{background:#D98A6A;color:#1a1409}
.rate-flag:not(:empty){color:#D98A6A}
.rate-flag:not(:empty)::before{content:" · "; color:var(--muted)}
.set-btn{
  background:none;border:0;cursor:pointer;font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:8px 14px;border-radius:8px;line-height:1;
}
.set-btn:hover{color:var(--paper)}
.set-btn[aria-pressed="true"]{color:var(--ink);background:var(--gold)}

.audio-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* These are actions, not states. A filled button here reads as "currently
   selected", because that is what filled means on the switches above. */
.playall{display:inline-flex;align-items:center;gap:9px}
.playall .glyph{font-size:10px;color:var(--gold);line-height:1}
.playall:hover .glyph{color:var(--gold-2)}
.hint{margin-top:12px;color:var(--muted);font-size:13.5px;line-height:1.5;max-width:62ch}

.audio-msg{margin-top:14px;font-family:var(--font-mono);font-size:12.5px;color:#D98A6A}
.audio-msg[hidden]{display:none}

.tracks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:6px}
.track{
  display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--hair);border-radius:10px;
}
.track-main{display:flex;align-items:center;gap:12px;padding:0 6px}
.track.is-playing{border-color:var(--gold-deep);background:var(--ink-3)}

/* ---------- the map ----------
   Every letter in the work on one screen. Closed by default: a hundred
   and ten buttons open would compete with the movements themselves, and
   the letters are already under each movement for anyone who has one
   open. This is for finding a place from anywhere, and for seeing the
   shape of the piece at all. */
.letter-map{margin:0 0 18px}
.letter-map > summary{
  cursor:pointer;list-style:none;padding:11px 14px;
  border:1px solid var(--hair);border-radius:9px;background:var(--ink-2);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.letter-map > summary::-webkit-details-marker{display:none}
.letter-map > summary::before{content:"+ ";color:var(--gold-deep)}
.letter-map[open] > summary::before{content:"– "}
.letter-map > summary:hover{color:var(--gold);border-color:var(--gold-deep)}
.map-body{padding:16px 4px 4px}
.map-row{
  display:grid;grid-template-columns:minmax(120px,190px) 1fr;
  gap:10px 16px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--hair);
}
.map-row:last-child{border-bottom:0}
.map-name{
  font-family:var(--font-display);font-size:.98rem;color:var(--paper);
}
.map-letters{display:flex;flex-wrap:wrap;gap:6px}
.map-none{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep);
}
@media (max-width:560px){
  .map-row{grid-template-columns:1fr;gap:6px}
}

/* ---------- the count-in ----------
   The bar before the first bar. It shows the METER by how many numbers
   there are and the TEMPO by how fast they light — which is what a
   conductor's arm shows, and why four generic beats would have been
   the wrong answer for a movement that opens in five. */
.countin{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:16px 10px 18px;
}
.countin .beats{display:flex;align-items:center;gap:clamp(14px,4vw,30px)}

/* Silence, then a swell, then a very long dissolve.

   THREE SPANS, NOT ONE ENVELOPE. A single animation's percentages would
   put the swell in a different place at every tempo, because the pause,
   the rise and the count are not in a fixed ratio to each other. Given
   their own durations they keep their shape at any speed.

   The second animation is listed last, so it wins while it runs; it has
   no backwards fill, so during its delay the first one's held value
   stands. That is the whole trick. */
.countin .ready{
  margin:0;font-family:var(--font-display);
  font-size:clamp(1.3rem,3.4vw,1.75rem);line-height:1;
  letter-spacing:.02em;color:var(--gold-2);opacity:0;
  animation:
    ready-in var(--in,1.6s) var(--pause,800ms) cubic-bezier(.5,0,.5,1) forwards,
    ready-out var(--out,6s) var(--hold,2.4s) linear forwards;
}
/* to .88 rather than to 1: it is a word being said quietly */
@keyframes ready-in{from{opacity:0}to{opacity:.88}}
@keyframes ready-out{
  0%{opacity:.88}
  45%{opacity:.34}
  80%{opacity:.10}
  100%{opacity:0}
}

/* ── quiet mode ──
   While the count runs, everything the row was offering steps back:
   the seek, the letters, the loops. There is one thing to do now, and
   it is to come in. */
.track.counting .seek,
.track.counting .marks,
.track.counting .loops{
  opacity:.22;transition:opacity .5s ease;pointer-events:none;
}
.track.counting .track-main{opacity:.55;transition:opacity .5s ease}
.track .seek,.track .marks,.track .loops,.track .track-main{transition:opacity .7s ease}

.countin .beat{
  font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.1rem);
  line-height:1;color:var(--hair);
  transition:color .12s ease, transform .12s ease;
}
.countin .beat.now{color:var(--gold-2);transform:scale(1.35)}
/* a beat already given is not gone, only past */
.countin .beat.gone{color:var(--gold-deep)}
@media (prefers-reduced-motion:reduce){
  .countin .beat{transition:none}
  .countin .beat.now{transform:none}
  /* the word already fades by opacity alone; nothing here moves */
}
.track.absent{opacity:.45}
.track .play{
  flex:0 0 auto;width:34px;height:34px;border-radius:8px;
  background:none;border:0;cursor:pointer;color:var(--gold);
  font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.track .play:hover{background:var(--ink)}
.track .t{flex:1 1 auto;min-width:0;padding:11px 0;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track .t b{font-family:var(--font-mono);font-size:11.5px;color:var(--gold);
  font-weight:400;margin-right:10px}
.track .sz{
  font-family:var(--font-mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.track .dl{
  flex:0 0 auto;width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:15px;line-height:1;
}
.track .dl:hover{background:var(--ink);color:var(--gold);text-decoration:none}

/* The bar only appears on the movement being played, so the other
   thirteen rows stay quiet and nothing jumps as you move down the list. */
.seek{display:none;align-items:center;gap:10px;padding:0 14px 12px 12px}
.skip{
  flex:0 0 auto;background:none;border:1px solid var(--hair);border-radius:7px;
  color:var(--muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;
  padding:5px 7px;line-height:1;cursor:pointer;font-variant-numeric:tabular-nums;
}
.skip:hover:not(:disabled){color:var(--gold);border-color:var(--gold-deep)}
.skip:disabled{opacity:.4;cursor:default}
/* On a phone these are pressed with a thumb, often while holding the
   instrument. 11px of type in 5px of padding is a mouse target. */
@media (max-width:700px){
  .skip{font-size:12.5px;padding:9px 11px;border-radius:8px}
  .skip.step{font-size:14px;padding:8px 10px}
}
/* ⏮ ⏭ — a movement rather than ten seconds. The glyphs sit small and
   low in the line box beside tabular digits, so they are given their own
   size and centring rather than inheriting the numbers'. */
.skip.step{font-size:13px;padding:4px 7px;letter-spacing:0}
.track.is-playing .seek{display:flex}
.seek-time{
  font-family:var(--font-mono);font-size:11.5px;color:var(--muted);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.seek-time .dur:not(:empty)::before{content:" / "}

.seekbar{
  -webkit-appearance:none;appearance:none;
  flex:1 1 auto;min-width:0;height:20px;background:none;cursor:pointer;margin:0;
}
.seekbar:disabled{cursor:default;opacity:.5}
.seekbar:focus{outline:none}
.seekbar:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(198,161,91,.35)}

/* played · buffered · remaining, in one track */
.seekbar::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(to right,
    var(--gold) 0 calc(var(--played,0) * 1%),
    #4A443C calc(var(--played,0) * 1%) calc(var(--buffered,0) * 1%),
    var(--hair) calc(var(--buffered,0) * 1%) 100%);
}
.seekbar::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;border-radius:50%;background:var(--gold);
  margin-top:-4px;border:0;
}
.seekbar::-moz-range-track{
  height:4px;border-radius:2px;
  background:linear-gradient(to right,
    var(--gold) 0 calc(var(--played,0) * 1%),
    #4A443C calc(var(--played,0) * 1%) calc(var(--buffered,0) * 1%),
    var(--hair) calc(var(--buffered,0) * 1%) 100%);
}
.seekbar::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;background:var(--gold);border:0;
}

#deck{display:none}


/* ---------- the sung text ----------
   Where all three languages genuinely matter at once. */

.movement{margin-top:clamp(34px,5vw,54px)}
.movement > h3{
  font-size:1.5rem;margin-bottom:6px;
  padding-bottom:14px;border-bottom:1px solid var(--hair);
}
.movement .src{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}

/* ---------- the revision page ---------- */

.revision-block{
  margin-top:clamp(28px,4vw,44px);
  padding-top:clamp(20px,3vw,30px);
  border-top:1px solid var(--hair);
}
.revision-block > h3{
  font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  margin:26px 0 10px;color:var(--gold-2);
}
.revision-block > h3:first-of-type{margin-top:14px}

.changes{list-style:none;padding:0;margin:0}
.changes li{
  padding:8px 0;border-bottom:1px solid var(--hair);
  font-size:15px;line-height:1.6;color:var(--muted);
}
.changes li:last-child{border-bottom:none}
.changes b{color:var(--paper);font-weight:600}

/* The sung line itself, set apart from the sentence about it — it is a
   quotation, and a singer scanning for their words should find them
   without reading the prose around them. */
.sung{
  display:inline-block;margin-top:4px;
  font-family:var(--font-display);font-size:15px;line-height:1.7;
  color:var(--paper);
}
.sung.was{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--gold-deep)}

.none{color:var(--muted);font-size:15px;margin:0 0 4px;max-width:70ch}

/* One player, folded. Thirteen open at once is a wall; folded, the list
   of names is itself the useful thing — you look for your own. */
.who{
  border-bottom:1px solid var(--hair);
}
.who > summary{
  cursor:pointer;padding:9px 0;
  font-family:var(--font-display);font-size:15px;color:var(--paper);
  display:flex;align-items:baseline;gap:10px;
}
.who > summary::-webkit-details-marker{display:none}
.who > summary::before{content:"▸";color:var(--gold);font-size:12px}
.who[open] > summary::before{content:"▾"}
.who .count{
  font-family:var(--font-mono);font-size:11.5px;color:var(--muted);
}
.who ul{list-style:none;padding:0 0 10px 22px;margin:0}
.who li{padding:5px 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.who li b{color:var(--paper);font-weight:600}

/* ── the standing notice at the top of the camerino ───────────────────
   For the days after a version lands and before anyone has played it
   through. Gold-edged rather than red: it is news, not an alarm, and
   the thing being asked for is an ear, not a repair. It is written into
   the page by hand and removed by hand — nothing generates it, so
   nothing will leave it there for a month. */
.notice{
  border-top:1px solid var(--gold-deep);
  border-bottom:1px solid var(--gold-deep);
  background:rgba(198,161,91,.07);
  padding:16px 0;
}
.notice .wrap{position:relative}
.notice p{
  margin:0;max-width:78ch;
  font-size:15px;line-height:1.6;color:var(--paper);
}
.notice b{color:var(--gold-2)}
.notice i{font-style:italic}

/* When it was said, and who said it. A banner with neither is an
   anonymous voice, and nobody knows whether it is today's or last
   month's. */
.notice-when{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  color:var(--gold);margin-bottom:6px !important;
}
.notice-who{
  margin-top:8px !important;color:var(--muted) !important;font-size:14px !important;
}

/* Dismissing is remembered per notice — see assets/notice.js. Placed in
   the corner rather than the flow so the text keeps its measure. */
.notice-close{
  position:absolute;top:-2px;right:0;
  background:none;border:0;cursor:pointer;
  color:var(--muted);font-size:20px;line-height:1;
  padding:4px 6px;border-radius:6px;
}
.notice-close:hover{color:var(--paper);background:rgba(255,255,255,.06)}
@media (max-width:640px){
  .notice-close{top:-4px}
  .notice p{padding-right:28px}
}

/* A line of context between a movement's source and its text. Only one
   movement needs it — the one whose text is a legal deposition rather
   than a poem, and so does not explain itself. */
.movement .mov-note{
  margin-top:14px;max-width:62ch;
  color:var(--muted);font-size:15px;line-height:1.65;
}

.text-block{
  display:grid;gap:26px 34px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.text-col .eyebrow{margin-bottom:12px}
.verse{font-family:var(--font-display);font-size:1.06rem;line-height:1.78}
.verse.sung{font-size:1rem;line-height:1.95;color:var(--paper)}
/* a line the poet set indented — Rilke does this, and it is not decoration */
.verse .ind{display:inline-block;padding-left:2.6em}

/* Columns marked .keep always show, whatever the switcher says — the
   original and its transcription are not translations of each other.
   The translation column still follows the switcher. */
.text-block .keep{display:revert !important}

/* ── The Cantico on the teatro ───────────────────────────────────────────
   The centrepiece of "What is sung": the 1225 text, strophe by strophe,
   each one labelled with the movement that carries it. Narrower than the
   page so it reads as a column of poetry rather than as a layout. */
.cantico{max-width:840px;margin:0 auto}
.cantico > .movement{margin-top:0;text-align:center}
.cantico > .movement > h3{border-bottom:none;padding-bottom:0}
.cantico > .movement .src{margin-top:4px}
.cantico-note{
  max-width:62ch;margin:22px auto 0;text-align:center;
  color:var(--muted);line-height:1.7;
}

.strofa{
  margin-top:clamp(26px,3.4vw,40px);
  padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--hair);
}
.strofa:first-of-type{border-top:none}
.strofa .text-block{margin-top:0}
/* which movement takes this strophe — the one piece of information the
   text itself cannot give you */
.strofa-mov{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}

/* A rendering, not an edition. Set back from the original so the eye
   knows which of the two columns is the poem. */
.verse.gloss{color:var(--muted);font-size:1rem;line-height:1.72}

/* Verse wraps at the column edge, and a wrapped line looks exactly like a
   new line of the poem unless it is set back. Hanging indent only on the
   teatro, where the columns are narrow enough for it to happen. */
#testo .verse{text-indent:-1.15em;padding-left:1.15em}
#testo .verse .ind{text-indent:0}
.render-note{
  max-width:64ch;margin:clamp(38px,5vw,58px) auto 0;
  padding-top:24px;border-top:1px solid var(--hair);
  font-size:.92rem;line-height:1.7;color:var(--muted);text-align:center;
}

/* Four symbols that read as broken characters until someone says
   otherwise. The glottal stop most of all: it is a question mark
   without its dot, which is also what a missing glyph looks like — and
   it falls on every word that begins with a vowel, so it recurs enough
   to look like a fault rather than a feature. */
.ipa-key{
  display:grid;grid-template-columns:auto 1fr;gap:12px 18px;
  margin:22px 0 0;max-width:70ch;align-items:baseline;
}
.ipa-key dt{
  font-size:1.5rem;color:var(--gold-2);text-align:center;min-width:1.6em;
  line-height:1.1;
}
.ipa-key dd{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}
.ipa-key dd b{color:var(--gold-2);font-weight:400}
.ipa-key dd em{color:var(--paper);font-style:italic}

[lang="de-fonipa"]{
  font-family:"Charis SIL","Doulos SIL","Gentium Plus","Lucida Grande",
              "Segoe UI",var(--font-body);
  letter-spacing:.005em;color:var(--gold-2);line-height:1.9;
}


/* ---------- the voices ----------
   Francesco, Chiara, Rilke — three presences, not three topics. */

.voices{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.voice{
  background:var(--ink-2);border:1px solid var(--hair);
  border-radius:14px;padding:24px 22px;
}
.voice .years{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:8px;
}
.voice h3{font-size:1.24rem}
.voice p{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.58}


/* ---------- the roster ----------
   Every player is a .who. Add an official link by turning the span into
   an anchor — nothing else changes:

     <span class="who">Angela Malagisi</span>
     <a class="who" href="https://…">Angela Malagisi</a>
   ---------------------------------- */

.ensemble-name{
  font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.7rem);
  color:var(--paper);margin-bottom:6px;
}
.roster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(346px,1fr));
  gap:0 44px;list-style:none;padding:0;margin:26px 0 0;
}
.player{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--hair);
}
/* a person's name never breaks; the instrument label wraps instead */
.player .who{
  font-family:var(--font-display);font-size:1.05rem;color:var(--paper);
  white-space:nowrap;
}
a.who{color:var(--gold-2)}
a.who:hover{text-decoration:underline}
.player .instr{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.07em;
  color:var(--muted);text-align:right;
}
/* the director sits above the roster, on his own line */
.conductor{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  margin-top:26px;padding:14px 0;
  border-top:1px solid var(--gold-deep);border-bottom:1px solid var(--gold-deep);
}
.conductor .who{font-family:var(--font-display);font-size:1.24rem;color:var(--paper)}
.conductor .instr{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.09em;
  color:var(--gold);text-align:right;
}
.roster{margin-top:8px}

/* Someone who belongs with the ensemble without being in it — the actor
   who speaks. The conductor is set off above the roster by two gold
   rules; this is the same gesture below it, with one. A rule says
   "separate" without a word, and the word ("And") read as an
   afterthought pinned on. */
.also{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  /* room to be a separate thought. At 22px the rule read as the bottom
     edge of the roster rather than the top of something else. */
  margin-top:40px;padding:14px 0;border-top:1px solid var(--gold-deep);
}
.also .who{font-family:var(--font-display);font-size:1.05rem;color:var(--paper);white-space:nowrap}
/* What he does is set exactly as every instrument is. The rule above
   already says he stands apart; saying it a second time in gold made
   "voce recitante" look more important than "violoncello", which is not
   a claim this page should be making. */
.also .instr{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.07em;
  color:var(--muted);text-align:right;
}

/* A name that carries a link inside the span rather than being one. */
.player .who a{color:var(--gold-2)}
.player .who a:hover{text-decoration:underline}


/* ---------- what a rehearsal letter can carry ----------
   Set apart from the parts above it by a rule rather than a box: it is
   a note about what is printed on them, not another thing to download. */
.marks-note{
  margin-top:clamp(38px,5vw,58px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--gold-deep);
}
.marks-note h3{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:16px;
}
/* the letters as they appear in the part, in the face the part uses */
.marks-eg{
  font-family:var(--font-mono);font-size:1.02rem;letter-spacing:.06em;
  color:var(--gold-2);margin:14px 0 !important;padding-left:1.4em;
}
.marks-eg b{color:var(--paper);font-weight:600}
/* The flow signs. Named rather than drawn: these are not the chironomy,
   they have no pictograms yet, and two of them do not warrant a
   notation of their own. */
.cue-key{
  display:grid;grid-template-columns:auto 1fr;gap:10px 20px;
  margin:16px 0 0;max-width:62ch;align-items:baseline;
}
.cue-key dt{
  font-family:var(--font-display);font-size:1.02rem;color:var(--gold-2);
  white-space:nowrap;
}
.cue-key dd{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}


/* ---------- the signs ----------
   A vocabulary of gestures, set as a reference rather than as prose: a
   musician looks one up, or scans a family to recognise something seen
   across a room. The glyph is a MNEMONIC and not a picture of a hand —
   the letter where the hand makes a letter, an arrow where the hand
   points. A drawing that is slightly wrong would be worse than none,
   and nobody here has seen these given. */

.family{margin-top:clamp(34px,5vw,52px)}
.family-name{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 6px;
  padding-bottom:10px;border-bottom:1px solid var(--gold-deep);
}

.signs{list-style:none;padding:0;margin:0}
.sign{
  display:flex;gap:clamp(14px,2.5vw,22px);align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--hair);
}
/* WHERE, THEN WHAT. The part of the body first, then what it does —
   the order his own descriptions use ("the index finger of the left
   hand touches the lips" names the finger before the touching) and the
   order a player watching from across a room takes them in. */
.glyph{
  flex:0 0 clamp(84px,13vw,112px);
  display:flex;align-items:flex-start;justify-content:flex-start;gap:8px;
  font-family:var(--font-display);font-size:clamp(1.2rem,2.4vw,1.55rem);
  line-height:1.1;color:var(--gold-2);
}
.act{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;
  min-height:30px;
  /* several glyphs are words or digits — 1 2 3, aeiou — so it has to
     survive being wider than one character rather than clipping */
  overflow-wrap:anywhere;text-align:center;
}
.letter{display:inline-block}
.sign-body{flex:1 1 auto;min-width:0}
.sign-name{
  margin:0;font-family:var(--font-display);font-size:1.06rem;color:var(--paper);
}
.sign-how{margin:5px 0 0;color:var(--muted);font-size:.96rem;line-height:1.5}
/* what it asks the orchestra for, as against how it is made */
.sign-does{margin:5px 0 0;color:var(--gold-2);font-size:.94rem;line-height:1.5;font-style:italic}
.sign-source{
  margin:7px 0 0;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);
}

/* An unanswered question is shown, not hidden. A gesture guessed at is
   worse than a gesture marked unknown — and the page then doubles as
   the list Roberto answers. */
.sign.unsure{border-left:2px solid var(--gold-deep);padding-left:14px;margin-left:-16px}
.ask{
  margin:8px 0 0;padding:9px 12px;background:var(--ink-2);border-radius:8px;
  color:var(--muted);font-size:.9rem;line-height:1.5;
}
.ask b{
  display:block;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  margin-bottom:3px;font-weight:400;
}

/* ---------- the moving signs ----------
   Twelve of the forty-four are movements rather than shapes, and a
   movement is the one thing his words carry least well: "the right hand
   runs from the elbow to the fingertips" is exact, and still takes a
   moment to picture.

   These are NOT hands. A line is a forearm, a dot is a hand. What is
   claimed is the shape of the movement — which his text does give — and
   not the look of the gesture, which nobody here has watched him make.
   Anything more lifelike would be inventing. */

/* A letter sits on a baseline and a drawing does not, so a row holding
   a drawing aligns on its middle instead — otherwise the pictogram
   floats above the name it belongs to. */
.sign.moving{align-items:flex-start}
.sign.moving .glyph{margin-top:2px}

/* ── where on the body ──
   The same small figure every time, with one point lit. A reader learns
   the figure once and afterwards only has to see where the light is.
   The head is in profile because forehead and nape are the same dot on
   a face seen from the front. */
.where{flex:0 0 34px;display:block;text-align:center;line-height:1}
.where svg{width:30px;height:30px;overflow:visible;display:inline-block}
.w-line{stroke:var(--hair);stroke-width:1.3;fill:none;stroke-linecap:round}
.w-dot{fill:var(--gold)}
.w-dot-line{stroke:var(--gold);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.where-name{
  display:block;margin-top:3px;font-family:var(--font-mono);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);
}

.pict{width:100%;height:auto;max-width:54px;display:block;margin:0 auto;overflow:visible}
.p-track{stroke:var(--gold-deep);stroke-width:1.5;fill:none;stroke-linecap:round}
.p-bar{stroke:var(--gold);stroke-width:2.5;stroke-linecap:round}
.p-dot{fill:var(--gold-2)}

/* the hand travelling the forearm — agogic, glissando */
@keyframes p-along{
  0%{transform:translate(0,0)} 8%{transform:translate(0,0)}
  92%{transform:translate(36px,-32px)} 100%{transform:translate(36px,-32px)}
}
.p-along{animation:p-along 2.6s ease-in-out infinite alternate}

/* up to hurry, down to slow — accelerando, chromatic variation */
@keyframes p-updown{ from{transform:translateY(0)} to{transform:translateY(-36px)} }
.p-updown{animation:p-updown 2.2s ease-in-out infinite alternate}

/* down the two sides of the triangle — the run down the hill */
@keyframes p-cascade{
  0%{transform:translate(0,0);opacity:0}
  6%{opacity:1}
  46%{transform:translate(-18px,36px);opacity:1}
  50%{transform:translate(-18px,36px);opacity:0}
  54%{transform:translate(0,0);opacity:0}
  60%{opacity:1}
  96%{transform:translate(18px,36px);opacity:1}
  100%{transform:translate(18px,36px);opacity:0}
}
.p-cascade{animation:p-cascade 3.4s linear infinite}

/* the sound holds, and goes on holding, until the hands open */
@keyframes p-lid{ 0%,20%{transform:translateY(0)} 40%,100%{transform:translateY(8px)} }
@keyframes p-freeze{ 0%,20%{r:7} 30%,100%{r:9} }
.p-lid{animation:p-lid 3.2s ease-in-out infinite}
.p-freeze{animation:p-freeze 3.2s ease-in-out infinite}

/* fingertips drawing apart like elastic — never silence */
@keyframes p-left{ from{transform:translateX(0)} to{transform:translateX(-14px)} }
@keyframes p-right{ from{transform:translateX(0)} to{transform:translateX(14px)} }
.p-left{animation:p-left 2.4s ease-in-out infinite alternate}
.p-right{animation:p-right 2.4s ease-in-out infinite alternate}

/* the fist turning inside the bowl, as in a mortar */
@keyframes p-orbit{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.p-orbit{transform-origin:30px 30px;animation:p-orbit 2.2s linear infinite}

/* short sounds in space, opening and closing */
@keyframes p-blink{ 0%,100%{opacity:.15;r:2.5} 50%{opacity:1;r:4} }
.p-blink1{animation:p-blink 1.8s ease-in-out infinite}
.p-blink2{animation:p-blink 1.8s ease-in-out infinite .6s}
.p-blink3{animation:p-blink 1.8s ease-in-out infinite 1.2s}

/* a dust of notes: pianissimo, and very fast */
@keyframes p-dust{ 0%,100%{opacity:.2} 50%{opacity:1} }
.p-d1{animation:p-dust .5s linear infinite}
.p-d2{animation:p-dust .5s linear infinite .1s}
.p-d3{animation:p-dust .5s linear infinite .2s}
.p-d4{animation:p-dust .5s linear infinite .3s}
.p-d5{animation:p-dust .5s linear infinite .4s}

/* two fingers, as on two piano keys */
@keyframes p-trill{ 0%,100%{transform:translateY(-4px)} 50%{transform:translateY(4px)} }
.p-t1{animation:p-trill .34s ease-in-out infinite}
.p-t2{animation:p-trill .34s ease-in-out infinite .17s}

/* the karate hand rebounding on the open one */
@keyframes p-strike{ 0%,100%{transform:translateY(0)} 55%{transform:translateY(16px)} 70%{transform:translateY(2px)} }
.p-strike{animation:p-strike 1.1s cubic-bezier(.4,0,.6,1) infinite}

/* Someone who has asked not to be moved is not asked twice. Every
   pictogram still reads: the tracks, the dots and their positions carry
   the shape even at rest. */
@media (prefers-reduced-motion:reduce){
  .pict *{animation:none !important}
}

.questions{max-width:62ch;color:var(--muted);line-height:1.6;padding-left:1.2em}
.questions li{margin-top:12px}
.questions a{font-family:var(--font-display);font-size:1.02rem}

@media (max-width:560px){
  .sign{flex-direction:column;gap:6px;align-items:flex-start}
  .glyph{text-align:left}
}


/* ---------- dates ---------- */

.dates{display:grid;gap:0}
.date-row{
  display:grid;grid-template-columns:150px 1fr auto;gap:8px 24px;
  padding:18px 0;border-bottom:1px solid var(--hair);align-items:baseline;
}
.date-row:first-child{border-top:1px solid var(--hair)}
.date-when{font-family:var(--font-mono);font-size:13.5px;color:var(--gold);letter-spacing:.04em}
/* The hour under the day: same column, quieter, so the eye finds the
   date first and the call time second. */
.date-time{color:var(--muted);letter-spacing:.02em;display:inline-block;margin-top:3px}
.date-what b{display:block;font-family:var(--font-display);font-size:1.1rem;font-weight:600}
.date-what span:not([lang]){color:var(--muted);font-size:15px}
@media (max-width:640px){
  .date-row{grid-template-columns:1fr;gap:4px}
  .date-row .btn{justify-self:start;margin-top:8px}
}


/* ---------- footer ---------- */

footer.site{
  border-top:1px solid var(--hair);
  padding:clamp(40px,6vw,64px) 0 56px;color:var(--muted);font-size:15px;
}
.foot-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.foot-links{display:flex;flex-direction:column;gap:6px}

/* the plainly-marked way in, for anyone without a modifier key */
.door-handle{
  margin-top:34px;background:none;border:0;padding:6px 0;cursor:pointer;
  color:var(--muted);font-family:var(--font-mono);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.door-handle:hover{color:var(--gold)}
.door-handle .fermata{
  font-family:var(--font-display);font-size:24px;line-height:.7;
  color:var(--gold-deep);transition:color .25s ease;
}
.door-handle:hover .fermata{color:var(--gold)}


/* ---------- the door itself ---------- */

.door-scrim{
  position:fixed;inset:0;z-index:40;background:rgba(8,7,6,.62);
  backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(60px,14vh,160px) 24px 24px;
  animation:door-in .22s ease;
}
.door-scrim[hidden]{display:none}
@keyframes door-in{from{opacity:0}to{opacity:1}}

.door-panel{
  width:100%;max-width:420px;
  background:var(--ink-2);border:1px solid var(--hair);
  border-radius:16px;padding:26px 26px 22px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.door-panel h3{font-size:1.3rem;margin-bottom:6px}
.door-panel .lead{font-size:15px;max-width:none;margin-bottom:20px}

.door-form{display:flex;gap:8px;flex-wrap:wrap}
.door-form input{
  flex:1 1 200px;min-width:0;
  background:var(--ink);border:1px solid var(--hair);border-radius:10px;
  color:var(--paper);font-family:var(--font-mono);font-size:15px;
  padding:11px 13px;letter-spacing:.02em;
}
.door-form input:focus{outline:0;border-color:var(--gold-deep);background:var(--ink-3)}
.door-form input::placeholder{color:#5E564E}

.door-msg{
  margin-top:12px;font-family:var(--font-mono);font-size:12.5px;
  color:var(--muted);min-height:1.2em;
}
.door-msg.err{color:#D98A6A}
.door-msg.ok{color:var(--gold)}
.door-remember{
  margin-top:14px;display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--muted);cursor:pointer;
}
.door-remember input{accent-color:var(--gold-deep)}
.door-close{
  margin-top:18px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--muted);font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;
}
.door-close:hover{color:var(--paper)}


/* ---------- the camerino wears its own colour ---------- */

body.realm-camerino{--gold:#8FA98C;--gold-2:#B9CDB4;--gold-deep:#5F7A5C}
.realm-note{
  background:var(--ink-2);border:1px solid var(--hair);
  border-left:3px solid var(--gold-deep);
  border-radius:0 12px 12px 0;padding:16px 20px;
  color:var(--muted);font-size:15px;line-height:1.55;max-width:64ch;
}
.realm-note b{color:var(--paper)}


/* ---------- the whole camerino, on the device ----------
   A card rather than a row of buttons: it is the only thing on the
   site that costs six hundred megabytes, and it should look like a
   decision. assets/offline.js fills every line in it. */
.offline{
  background:var(--ink-2);border:1px solid var(--hair);
  border-radius:14px;padding:22px 24px;max-width:66ch;
}
.offline-state{margin:0 0 6px;font-size:16.5px;line-height:1.5}
.offline-state b{color:var(--gold-2);font-weight:600}
.offline-note{
  margin:14px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5;
}
.offline-note:empty{display:none}
.offline-actions{
  margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}

/* The bar carries the only number that matters while it runs, so it is
   wide and quiet rather than small and busy. */
.offline-bar{
  margin-top:14px;height:6px;border-radius:3px;
  background:var(--ink);border:1px solid var(--hair);overflow:hidden;
}
.offline-bar span{
  display:block;height:100%;width:0;
  background:var(--gold-deep);
  transition:width .25s linear;
}
@media (prefers-reduced-motion:reduce){.offline-bar span{transition:none}}

/* The device's own testimony. Deliberately plain and deliberately
   quiet: nobody needs it until somebody far away needs it badly. */
.offline-say{
  margin-top:16px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--muted);font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;
}
.offline-say:hover{color:var(--paper)}
.offline-report{
  margin:12px 0 0;padding:12px 14px;overflow-x:auto;
  background:var(--ink);border:1px solid var(--hair);border-radius:10px;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.7;
  color:var(--muted);white-space:pre-wrap;word-break:break-word;
}

/* ============================================================
   Il leggio — the part on a stand.

   A full-screen ribbon of systems. Everything here is subordinate to one
   rule: the music must stay readable, so nothing permanent sits over it
   and every control is transient and semi-transparent.
   ============================================================ */

body.lg{
  margin:0;height:100dvh;overflow:hidden;
  background:var(--sheet-paper,var(--ink-2));
  /* the paper themes from the player apply here unchanged */
  --sheet-ink:var(--paper);
  --sheet-paper:var(--ink-2);
  --sheet-mark:var(--gold);
  /* the ink while the marks are being shown alone. Written out per
     palette rather than mixed from the other two: a custom property that
     refers to itself is invalid at computed-value time, and the first
     attempt at this made the stave lines disappear instead of fade. */
  --sheet-dim:#353230;
}
body.lg.ink-paper{ --sheet-ink:#1B1712; --sheet-paper:#F4ECDC; --sheet-mark:#8A6A1F; --sheet-dim:#DAD2C4; }
body.lg.ink-mono { --sheet-ink:#000;    --sheet-paper:#fff;    --sheet-mark:#B8860B; --sheet-dim:#E0E0E0; }

/* ── under stage light ───────────────────────────────────────────────
   The fourth palette, and the only one that is not about the room being
   bright or dark. A coloured mark is only as reliable as the light
   falling on it: under a red wash a red mark is not a dimmer red, it is
   gone, and blue and green trade places under amber. mig, 26 September
   2026: "stage light. this is the real concern."

   NOT the default, and deliberately last in the cycle. "most of the
   time we are not on stage but in the rehearsal room" — and in the
   rehearsal room the colours are the better instrument, because a hue
   is read faster than a pattern.

   Everything here is full black on white. No greys: a grey is a colour
   with its contrast spent, and contrast is the one thing a lighting
   desk cannot take away. The marks keep their MEANING by shape — the
   glyphs were always distinct, so the colour on them was only ever
   reinforcement — and the highlighter bands keep theirs by the spine's
   pattern, drawn in assets/appunti.js. The wash stays a wash: it says
   which bars, which needs no identity at all. */
body.lg.ink-stage{
  --sheet-ink:#000; --sheet-paper:#fff; --sheet-mark:#000; --sheet-dim:#E6E6E6;
}
body.lg.ink-stage .lg-ap-prepare,
body.lg.ink-stage .lg-ap-careful,
body.lg.ink-stage .lg-ap-playing,
body.lg.ink-stage .lg-ap-dynamic,
body.lg.ink-stage .lg-ap-attack,
body.lg.ink-stage .lg-ap-beat{ --ap:#000 }
/* one wash for all four, because the spine is what tells them apart */
body.lg.ink-stage .lg-band-yellow,
body.lg.ink-stage .lg-band-green,
body.lg.ink-stage .lg-band-blue,
body.lg.ink-stage .lg-band-pink{ --bd:#000 }
/* and the spine at full black, never a tint of one */
body.lg.ink-stage .lg-page svg g.lg-band rect.lg-spine{ fill:#000; opacity:1 }
/* The hairpins were missed when this palette was written — they kept
   their ink-blue under a light that can take blue away, which is the
   one fault the whole palette exists to prevent. One line, because the
   group's colour is in one place: it repaints the wedges, the dashes
   and the word on a rit. together. */
body.lg.ink-stage .lg-page svg g.lg-hair{ color:#000 }

.lg-stage{
  position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;
  background:var(--sheet-paper);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  /* room for a notch or a home indicator, without eating into the music */
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

  /* ── nothing here is text, so nothing here is selectable ───────────
     Press and hold to place a symbol and the browser ran its OWN
     long-press first: the native select-a-word gesture, which put two
     blue drag handles on the page underneath our menu. The music is
     pdftocairo glyph outlines — there is no word to select and never
     was — so the gesture is declined outright.

     It also settles a quieter one. Sliding sideways to pick a run of
     bars is, to a browser, the beginning of a text drag; with nothing
     selectable there is nothing for it to drag.

     touch-action keeps the two gestures that ARE the browser's — a
     vertical scroll and a pinch — and leaves sideways to us, which is
     exactly the division the highlighter needs. The controls are not
     inside the stage, so the zoom figure stays selectable. */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  touch-action:pan-y pinch-zoom;
}
.lg-ribbon{margin:0 auto;}
.lg-page{display:block}
/* joined: the pages ARE the ribbon, so nothing may sit between them */
.lg-ribbon.is-joined .lg-page + .lg-page{margin-top:0}
/* pages: a visible seam, because that is the point of asking for them */
.lg-ribbon:not(.is-joined) .lg-page + .lg-page{
  margin-top:14px;border-top:1px solid color-mix(in srgb,var(--sheet-ink) 18%,transparent);
}
.lg-page svg{width:100%;height:auto;display:block}
.lg-page-lost{min-height:0}
.lg-wait{padding:28px;text-align:center;color:var(--muted);font-family:var(--font-body)}

/* the same ink remapping the player uses: only BLACK becomes ink, white
   becomes the panel, so a rehearsal mark's white box does not turn solid */
.lg-page svg path[stroke^="rgb(0%"]{stroke:var(--sheet-ink) !important}
.lg-page svg path[fill^="rgb(0%"]{fill:var(--sheet-ink) !important}
.lg-page svg path[stroke^="rgb(100%"]{stroke:var(--sheet-paper) !important}
.lg-page svg path[fill^="rgb(100%"]{fill:var(--sheet-paper) !important}
.lg-page svg g{fill:var(--sheet-ink)}

/* ── the controls ────────────────────────────────────────────────────
   Transient. They appear on a tap or a desktop pointer and fade, and
   they never take a line of music with them when they go. */
.lg-controls{
  position:fixed;left:0;right:0;bottom:0;z-index:5;
  display:flex;flex-direction:column;gap:6px;align-items:center;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.lg-controls.is-on{opacity:1;transform:none;pointer-events:auto}
.lg-bar{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;
  background:color-mix(in srgb,var(--ink) 78%,transparent);
  border:1px solid var(--hair);border-radius:999px;padding:5px;
  backdrop-filter:blur(8px);
}
.lg-btn{
  appearance:none;border:0;cursor:pointer;font:inherit;
  background:transparent;color:var(--paper);
  min-width:46px;min-height:42px;border-radius:999px;padding:0 12px;
  display:grid;place-items:center;text-decoration:none;font-size:17px;
}
.lg-btn:hover{background:color-mix(in srgb,var(--paper) 12%,transparent)}
.lg-wide{min-width:190px;font-family:var(--font-display);font-size:15px}
.lg-small{min-height:34px;min-width:38px;font-size:13px;font-family:var(--font-mono)}
.lg-zoom{font-family:var(--font-mono);font-size:12px;color:var(--muted);min-width:46px;text-align:center}
/* the quarter-filled circle showing how solid a mark is — set in the
   stack that carries unusual glyphs, not the mono one */
#fadeBtn{font-family:var(--font-sign);font-size:15px;line-height:1}
/* the way to the help, in the row that had room for it */
.lg-help{font-family:var(--font-mono);min-width:34px}

/* ── whose part ──────────────────────────────────────────────────── */
.lg-sheetpick{position:fixed;inset:0;z-index:9;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink) 72%,transparent);backdrop-filter:blur(6px)}
/* width, not just max-width: the box used to hold one column of names
   and shrank happily to the longest of them — 249px of a 460px
   allowance. The tune grid wants every pixel it is entitled to, and a
   grid that fits four across on a tablet is a glance where two across
   is a list. */
.lg-pickbox{background:var(--ink-2);border:1px solid var(--hair);border-radius:16px;
  padding:18px;width:min(92vw,460px);max-height:88dvh;overflow:auto}
.lg-picktitle{font-family:var(--font-display);font-size:19px;margin:0 0 12px;color:var(--paper)}
/* ── the thirteen, as a grid as well ─────────────────────────────────
   "we have a very elegant panel to select the tune, and a massiv, not
   so elegant list of players to choose from."

   It was fourteen full-width slabs in one column, 666px of panel, and
   the gold border saying which part you are on was usually below the
   fold. The sixteen tunes had exactly this problem and it has exactly
   this answer — which is the point: the two halves of one sheet should
   not be two different kinds of object.

   Narrower cells than the tunes, because a surname is longer than a
   number and there is no second line of title under it. */
.lg-picklist{
  display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
}
.lg-who{
  appearance:none;border:1px solid var(--hair);background:transparent;color:var(--paper);
  font:inherit;text-align:left;padding:8px 10px;border-radius:10px;cursor:pointer;
  min-height:48px;display:flex;flex-direction:column;gap:2px;overflow:hidden;
}
/* the surname carries the display face rather than the mono one: the
   tune's token is a number and reads as a label, a name reads as a
   name */
.lg-who b{font-family:var(--font-display);font-size:15px;font-weight:400;line-height:1.1}
.lg-who span{font-size:11.5px;line-height:1.25;color:var(--muted)}
.lg-who:hover{background:color-mix(in srgb,var(--paper) 10%,transparent)}
.lg-who.is-mine{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.lg-who.is-mine b{color:var(--gold)}
/* the score is not one of the thirteen, so it is not one of the cards:
   its own row across the foot of them */
.lg-pickscore{grid-column:1/-1;margin-top:4px}
.lg-pickitem{
  appearance:none;border:1px solid var(--hair);background:transparent;color:var(--paper);
  font:inherit;text-align:left;padding:11px 14px;border-radius:10px;cursor:pointer;min-height:44px;
}
.lg-pickitem:hover{background:color-mix(in srgb,var(--paper) 10%,transparent)}
.lg-pickitem.is-mine{border-color:var(--gold);color:var(--gold)}
.lg-pickscore{font-family:var(--font-display)}

/* ── the sixteen, as a grid ──────────────────────────────────────────
   The number is what the eye lands on, because it is how everybody in
   the room says which one: "let's take eleven from B". The title sits
   under it, quieter, for the one you are not sure about — and it is
   allowed to clip, since a title you cannot quite read is still enough
   to tell you it is not the one you wanted.

   auto-fill rather than a fixed count, so the same grid is four across
   on a tablet held upright and eight across on a MacBook without a
   breakpoint anywhere. */
.lg-tunegrid{
  display:grid;gap:6px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
}
.lg-tune{
  appearance:none;border:1px solid var(--hair);background:transparent;color:var(--paper);
  font:inherit;text-align:left;padding:8px 10px;border-radius:10px;cursor:pointer;
  min-height:56px;display:flex;flex-direction:column;gap:2px;overflow:hidden;
}
.lg-tune b{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--gold);line-height:1}
.lg-tune span{
  font-size:11.5px;line-height:1.25;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lg-tune:hover{background:color-mix(in srgb,var(--paper) 10%,transparent)}
/* where you already are: named rather than merely highlighted, so the
   sheet answers "which one is this?" as well as "which do you want?" */
.lg-tune.is-here{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.lg-tune.is-here span{color:var(--paper)}
/* the second heading needs air above it; the first is already at the top */
.lg-picktitle2{margin-top:0}

/* ── the catalogo, and the appunti it places ─────────────────────────
   The colour is the symbol's and is not overridable: on a stand you read
   colour before shape. It is set here, once per group, and everything
   inside a mark takes it from the custom property.

   These selectors are written out for BOTH the page and the menu
   preview, and they must stay more specific than `.lg-page svg g`, which
   repaints every group to the sheet's ink — without that, a red mark
   would quietly turn black under the paper palette. */
.lg-ap-prepare{--ap:#C8921F}   /* yellow — get ready */
.lg-ap-careful{--ap:#C0392B}   /* red    — do not get this wrong */
.lg-ap-playing{--ap:#4E8A4A}   /* green  — how to play it */
/* The common language gets ONE colour, not a fourth and a fifth. The
   three above are a code a player has to learn; a forte is not part of
   that code and should not look as though it were. Ink-blue reads as
   "written on the part" rather than as another category. */
.lg-ap-dynamic,.lg-ap-attack,.lg-ap-beat{--ap:#2F6DA8}
/* ── a word of your own ──────────────────────────────────────────────
   A fifth colour, and not a choice. The design refuses to let colour be
   overridden (§5) because on a stand you read colour before shape — so
   text does not get to pick from the three, it gets its own. Violet:
   far enough from the yellow, red, green code and from the blue of the
   signs everyone reads to be none of them at a glance. */
.lg-ap-note{--ap:#8A5AA8}

/* ── the colours a word may be ───────────────────────────────────────
   Swatches rather than named buttons: the five are already a code the
   player has learnt from the symbols, so showing the colour is showing
   the meaning. The first is "plain" and is drawn as a ring rather than
   a blob, because no colour is a choice too and should not look like a
   missing one. */
/* ── the cue stave ───────────────────────────────────────────────────
   Thinner lines than the engraving and a smaller staff, so it reads as
   a quotation of somebody else's part rather than as a second system.
   In the `note` purple, which is the colour of a thing you wrote down
   rather than a thing you were told. */
.lg-page svg g.lg-cue, .lg-notepreview g.lg-cue{cursor:pointer;opacity:var(--ap-solid)}
/* The staff lines were at .75 on top of the view's own fade, which put
   a cue's ceiling at .56 and made the top step of its strength control
   unreachable: "opacity - we have to have a way to go for 100%". They
   stay lighter than the notes, but by being thinner, which is how an
   engraver does it — not by being transparent, which is how a control
   gets lied to. */
.lg-page svg g.lg-cue .lg-cue-line, .lg-notepreview g.lg-cue .lg-cue-line{stroke:var(--ap);stroke-width:.5;fill:none}
.lg-page svg g.lg-cue .lg-cue-stem, .lg-notepreview g.lg-cue .lg-cue-stem{stroke:var(--ap);stroke-width:.9;fill:none}
.lg-page svg g.lg-cue .lg-cue-beam, .lg-notepreview g.lg-cue .lg-cue-beam{stroke:var(--ap);stroke-width:1.7;fill:none;stroke-linecap:butt}
.lg-page svg g.lg-cue .lg-cue-flag, .lg-notepreview g.lg-cue .lg-cue-flag{stroke:var(--ap);stroke-width:.9;fill:none}
.lg-page svg g.lg-cue .lg-cue-head, .lg-notepreview g.lg-cue .lg-cue-head{fill:var(--ap);stroke:none}
.lg-page svg g.lg-cue .lg-cue-head.is-open, .lg-notepreview g.lg-cue .lg-cue-head.is-open{fill:none;stroke:var(--ap);stroke-width:.9}
.lg-page svg g.lg-cue text.lg-cue-acc, .lg-notepreview g.lg-cue text.lg-cue-acc{fill:var(--ap);stroke:none}
.lg-page svg g.lg-cue text.lg-cue-who, .lg-notepreview g.lg-cue text.lg-cue-who{
  fill:var(--ap);stroke:none;font-family:var(--font-mono);letter-spacing:.06em;opacity:.8;
}

/* ── who else is in this bar ─────────────────────────────────────────
   Names, not glyphs: there is nothing to draw for "the voice" and a
   row of identical icons with different labels would be a row you have
   to read anyway. Wider than a symbol tile and wrapping, because
   "Tenor Saxophone (Luppi)" is a name and not a word. */
.lg-cuerow{flex-wrap:wrap;gap:6px}
.lg-cueitem{
  width:auto;min-width:0;padding:9px 12px;
  flex:0 1 auto;
}
.lg-cueitem .lg-catname{font-size:12.5px;white-space:normal;text-align:left}

.lg-ap-inks{gap:6px}
.lg-ink{
  appearance:none;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--hair);cursor:pointer;padding:0;
  background:var(--ink-2);
}
.lg-ink.is-plain{background:transparent;border-color:#8A5AA8}
.lg-ink[aria-pressed="true"]{
  box-shadow:0 0 0 2px var(--ink-2),0 0 0 3.5px var(--paper);
}

.lg-page svg g.lg-ap,.lg-catglyph g.lg-ap{
  fill:none;stroke:var(--ap);stroke-width:1.25;
  stroke-linejoin:round;stroke-linecap:round;
}
/* The glyphs are drawn inside a second, scaled <g>, and THAT group is
   matched by `.lg-page svg g{fill:var(--sheet-ink)}` above — which
   `g.lg-ap` does not cover, because the inner group carries no class.
   So every glyph has been filling itself with the engraving's own ink.
   On a pair of small circles it passed for a design; on an arc it is a
   filled semicircle, which is how it was finally noticed. */
.lg-page svg g.lg-ap g{fill:none}
.lg-page svg g.lg-ap [data-fill],.lg-catglyph g.lg-ap [data-fill]{fill:var(--ap);stroke:none}
.lg-page svg g.lg-ap text,.lg-catglyph g.lg-ap text{
  fill:var(--ap);stroke:none;font-weight:700;
  font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
/* A word of your own. Not a music glyph, so not the serif the dynamics
   use — this is handwriting on a part, and it should read as somebody
   having written on it rather than as something engraved. */
.lg-page svg g.lg-ap text.lg-word-mark,.lg-catglyph g.lg-ap text.lg-word-mark{
  font-family:var(--font-display),Georgia,serif;
  font-weight:600;font-style:normal;letter-spacing:.005em;
}

/* A dynamic is set, not drawn: bold italic serif is what engraving uses
   for p, m, f, s and z, so the letterform is the notation. */
.lg-page svg g.lg-ap text.lg-dyn,.lg-catglyph g.lg-ap text.lg-dyn{
  font-family:Georgia,"Times New Roman",'Iowan Old Style',serif;
  font-style:italic;font-weight:700;letter-spacing:-.02em;
}

/* the family heading in the catalogo — quieter than a group's name,
   because it names a language rather than a purpose */
.lg-catfamily{
  margin:10px 0 2px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
}
.lg-catfamily:first-child{margin-top:2px}
/* ── how solid a mark is ─────────────────────────────────────────────
   Set on the GROUP, never per element. A mark is several strokes — the
   glasses are two circles, a bridge and two temples — and giving each of
   them its own transparency would show every seam where they cross. The
   group composites first and blends once, which is what a coloured
   pencil over print actually does.

   Only on the page. In the catalogo you are choosing a symbol, not
   reading through it, so the preview stays at full strength. */
/* How solid a mark is. Driven from the controls — 1 2 3 4 for 30, 55, 75
   and 100 per cent — because the right value is not a constant: it
   depends on the hall, the palette and how much engraving the mark is
   sitting over. A fixed number was tried at 72 and again at 75, which
   differ by six points per channel and are indistinguishable. */
/* Not body.lg: the camerino's playback draws marks too, and it is not
   the leggio. Defaults here, and the leggio's strength control still
   wins because it sets them inline on <body>. */
body{--ap-solid:.75;--ap-wash:.32}
.lg-page svg g.lg-ap{cursor:pointer;opacity:var(--ap-solid)}

/* ── everything but the marks, briefly out of the way ────────────────
   There is no wrapper group in these files: a page is some eight hundred
   direct children, one per glyph. Fading them individually would mean
   eight hundred composited layers, which is fine on a desk and stutters
   on a tablet. So the ink is faded instead — every glyph already takes
   its colour from --sheet-ink, so moving that toward the paper is one
   property and one repaint, whatever the page holds.

   The marks come back to full strength while it lasts: the point of the
   gesture is to see them alone. */
.lg-ribbon.is-dim .lg-page{--sheet-ink:var(--sheet-dim)}
.lg-ribbon.is-dim .lg-page svg g.lg-ap{opacity:1}
.lg-ribbon.is-dim .lg-page svg g.lg-band{opacity:.5}

/* ── the highlighter ─────────────────────────────────────────────────
   A run of bars washed with colour, the way a marker pen does it. It is
   drawn UNDER the engraving — inserted as the svg's first child — so it
   tints the music rather than covering it, and it needs no transparency
   tricks to stay legible.

   A range can cross a system break, and then it is not one rectangle but
   one per system: bars 17 to 30 of Der Klare cross three. Each band takes
   its own system's height from bars.json, so a part with tighter staves
   gets tighter bands without anything being recalculated here. */
.lg-band-yellow{--bd:#E8C33A}
.lg-band-green {--bd:#5FA85A}
.lg-band-blue  {--bd:#5B8FC9}
.lg-band-pink  {--bd:#D2679E}

.lg-page svg g.lg-band rect{
  fill:var(--bd);
  /* It was a fixed .22, and the strength control never reached it — the
     control drives --ap-solid, which only .lg-ap and .lg-hair read. So a
     highlight was a fifth of its colour at every setting including the
     top one, and turning the strength up did nothing to it: "colour is
     never really strong, even with 100%".

     It has its own scale rather than borrowing --ap-solid, because a
     wash and a glyph are not the same problem. A glyph is a thin stroke
     laid ON the engraving, and at full opacity it is simply the line it
     draws. A band is a filled area laid UNDER it — the notes composite
     on top and stay black — so it can go much further before it costs
     anything, and .22 was nowhere near the limit. At the top step it is
     a marker pen; at the bottom it is the wash this used to be. */
  fill-opacity:var(--ap-wash);
  stroke:none;
}

/* ── the spine ─────────────────────────────────────────
   FULL colour, and it does not follow the strength control, because it
   is the one part of a highlight that costs legibility nothing: it
   lies in measured empty space below the staff, under the engraving
   like the rest of the group. Fading it would be giving up the only
   thing it is for.

   So the control means one thing now — how much wash do I want behind
   the notes — and the colour of a mark is constant whatever it is set
   to. A mark's OWN strength still reaches it, through the group
   opacity: a faint mark is faint everywhere, which is a property of
   that mark rather than of the view. */
.lg-page svg g.lg-band rect.lg-spine{fill:var(--bd);fill-opacity:1}
/* ── the same colour, in the sheet that offers it ────────────────────
   The rule above is scoped to `.lg-page svg`, and the swatch in the
   catalogo is not there — it is inside `.lg-catglyph`. So the swatch
   had no fill declared at all and fell back to SVG's default, which is
   black: four black rectangles on a near-black sheet, invisible since
   the highlighter was built. The .lg-ap rules above take both scopes
   for exactly this reason; this one had been left behind.

   Full strength here, not the wash's .22. On the page the colour sits
   UNDER notation that has to stay readable; on the button it has only
   to be recognisable as the colour, and a fifth of it is not. */
.lg-catglyph g.lg-band rect{fill:var(--bd);fill-opacity:1;stroke:none}
.lg-page svg g.lg-band{cursor:pointer}

/* while a range is being dragged out, before it is given a colour */
.lg-page svg rect.lg-marquee{
  fill:var(--sheet-mark);fill-opacity:.15;
  stroke:var(--sheet-mark);stroke-width:.8;stroke-dasharray:3 2;
  pointer-events:none;
}
/* the glyph is thin strokes; the thing you actually hit is this */
.lg-ap-hit{fill:transparent;stroke:none;pointer-events:all}

/* ── the catalogo, opened where the finger is ────────────────────────
   It was a sheet welded to the bottom of the screen, which on an
   11-inch tablet means the bar you pressed and the symbol you are
   choosing for it are a hand's breadth apart — you look down, choose,
   and look back up to find where you were. So the box is placed AT the
   press instead, and only falls back to the bottom when it cannot fit
   anywhere near it.

   The scrim stays full-screen: it is what a tap outside lands on. */
.lg-cat{
  position:fixed;inset:0;z-index:11;
  /* Barely there. The sheet was moved to the finger so you can see the
     bar you are marking while you choose — dimming it away again would
     undo exactly that. The element stays full-screen because it is what
     a tap outside lands on, not because it needs to be seen. */
  background:color-mix(in srgb,var(--ink) 14%,transparent);
}
/* the fallback sheet still covers the page, so it still dims like one */
.lg-cat.is-sheet{
  background:color-mix(in srgb,var(--ink) 72%,transparent);backdrop-filter:blur(6px);
}
.lg-catbox{
  position:absolute;
  width:min(330px,calc(100vw - 24px));
  max-height:min(70dvh,520px);overflow:auto;
  background:var(--ink-2);border:1px solid var(--hair);
  border-radius:14px;padding:13px 13px 16px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
/* nothing near enough to hang from — the old behaviour, as a fallback */
.lg-cat.is-sheet{display:flex;align-items:flex-end;justify-content:center}
.lg-cat.is-sheet .lg-catbox{
  position:static;width:min(560px,100%);max-height:80dvh;
  border-radius:16px 16px 0 0;padding:16px 16px 22px;
}
.lg-cattitle{margin:0 0 12px;font-family:var(--font-display);font-size:17px;color:var(--paper)}
.lg-catgroup{margin-bottom:14px}
.lg-catgroup-name{
  margin:0 0 7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
/* ── a section that is empty, saying why ─────────────────────────────
   "Notes from" was built only when it had somebody to offer, so a bar
   where nobody else plays, a bar where only the drums do, and a
   movement whose index never loaded all looked the same: like a
   feature that was not there. One of those is a fault and two are not,
   and the sheet now says which. */
.lg-catempty{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.lg-catrow{display:grid;gap:6px}
.lg-catitem{
  display:flex;align-items:center;gap:11px;width:100%;
  min-height:46px;padding:7px 11px;text-align:left;
  appearance:none;border:1px solid var(--hair);background:transparent;
  color:var(--paper);border-radius:10px;font-size:15px;cursor:pointer;
}
.lg-catitem:hover{background:color-mix(in srgb,var(--paper) 10%,transparent);border-color:var(--ap)}
.lg-catglyph{width:26px;height:26px;flex:0 0 26px;overflow:visible}
.lg-catname{flex:1 1 auto}
.lg-catclose{margin-top:6px;width:100%}

.lg-ap-pop{
  position:fixed;z-index:12;display:flex;align-items:center;gap:11px;
  background:var(--ink-2);border:1px solid var(--hair);border-radius:10px;
  padding:9px 11px;color:var(--paper);font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.lg-ap-name{margin:0}

/* ── il promemoria: the signs, as a reminder ─────────────────────────
   Two columns and nothing else — the sign, and its name. How a sign is
   MADE belongs on the full page: that is how you learn it, not how you
   recognise it, and at a stand you already know.

   The glyphs are set in the BODY stack, not the display serif the full
   page uses. Measured in a browser, five of the forty-four (◟ ◠ ⇕ ◍ ∴)
   have no glyph in that serif and come out as empty boxes. A page that
   is only glyph and name has nowhere to hide a missing one. The symbol
   faces are named after the system stack rather than inside it, because
   a generic like sans-serif always resolves and nothing after it would
   ever be reached. */
:root{
  --font-sign:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,
    "Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols",sans-serif;
}

body.pm{margin:0;background:var(--ink);color:var(--paper)}

.pm-bar{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;gap:12px;
  padding:calc(9px + env(safe-area-inset-top)) clamp(12px,3vw,20px) 9px;
  background:color-mix(in srgb,var(--ink) 88%,transparent);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--hair);
}
.pm-title{
  margin:0;flex:1 1 auto;text-align:center;
  font-family:var(--font-display);font-size:1.06rem;font-weight:400;color:var(--paper);
}
.pm-out{
  flex:0 0 auto;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--muted);white-space:nowrap;
  /* a finger, not a mouse */
  padding:7px 2px;
}
.pm-out:hover{color:var(--gold);text-decoration:none}

.pm-wrap{padding:clamp(12px,2.5vw,20px) clamp(12px,3vw,20px) 40px}
.pm-group{margin-bottom:clamp(16px,3vw,24px)}
.pm-family{
  margin:0 0 8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);font-weight:400;
  padding-bottom:7px;border-bottom:1px solid var(--gold-deep);
}
/* Wide enough for the longest single word in the list — Minimalismo,
   Accompagna, Dinamiche — to sit beside its glyph without being cut.
   Narrower columns fitted more of them on a screen and clipped twelve. */
.pm-grid{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.pm-sign{
  display:flex;align-items:center;gap:11px;min-height:54px;
  padding:8px 11px;border:1px solid var(--hair);border-radius:10px;
}
.pm-glyph{
  flex:0 0 auto;min-width:1.5em;text-align:center;
  font-family:var(--font-sign);font-size:clamp(1.55rem,3.6vw,2.05rem);
  line-height:1;color:var(--gold-2);
  /* 1 2 3 and aeiou are words, not characters */
  overflow-wrap:anywhere;
}
.pm-name{
  flex:1 1 auto;min-width:0;
  font-size:clamp(.95rem,2vw,1.06rem);line-height:1.25;color:var(--paper);
  /* a name is allowed to wrap; it is not allowed to be cut off */
  overflow-wrap:break-word;
}
.pm-ask{color:var(--gold-deep);margin-left:.15em}
.pm-note{margin:4px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}

/* ── come funziona: the help, which is a list and not a tour ─────────
   Almost everything on the stand explains itself by being looked at.
   The gestures do not, and nothing on a screen can say "press and hold
   this bar". So: two columns, what you do and what happens, and on a
   narrow screen one under the other rather than squeezed beside it. */
.hp-block{margin-bottom:clamp(16px,3vw,24px)}
.hp-list{margin:0}
.hp-row{
  display:flex;gap:clamp(12px,2.5vw,22px);align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--hair);
}
.hp-row:last-child{border-bottom:0}
.hp-what{
  flex:0 0 clamp(122px,26%,215px);margin:0;
  font-family:var(--font-mono);font-size:13px;line-height:1.45;color:var(--gold-2);
}
.hp-does{
  flex:1 1 auto;min-width:0;margin:0;
  font-size:15px;line-height:1.5;color:var(--paper);
}
@media (max-width:520px){
  .hp-row{flex-direction:column;gap:3px;padding:10px 0}
  .hp-what{flex:0 0 auto}
}

/* ── the recents ──────────────────────────────────────────
   A recent is not read, it is RECOGNISED — you used it a minute ago.
   So it is a glyph with its name small underneath, several across,
   rather than a full-width row each. Four of them used to cost 227
   pixels, which was more than every tile beneath them put together. */
.lg-recents{display:flex;gap:5px;flex-wrap:wrap}
.lg-recent{
  appearance:none;border:1px solid var(--hair);cursor:pointer;font:inherit;
  background:color-mix(in srgb,var(--paper) 5%,transparent);
  color:var(--paper);border-radius:12px;padding:6px 10px 5px;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:64px;
}
.lg-recent:hover,.lg-recent:active{background:color-mix(in srgb,var(--paper) 12%,transparent)}
.lg-recent .lg-catglyph{width:22px;height:22px;flex:0 0 22px}
.lg-recent .lg-catname{font-size:11px;line-height:1.2;color:var(--muted);text-align:center;
  max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── the catalogo as a tree ──────────────────────────────────
   Five tiles and a row of recents, on one screen, nothing scrolling.
   A tile carries its group's own glyphs, so the first of the two taps
   is a recognition rather than a reading. */
/* Six tiles is the budget, and it is a real one: the sheet is 520px
   tall and six rows of tile plus two family headings plus the recents
   row plus the title come to just under it. The sixth tile — "in
   words" — pushed it 32px over the fold the day it was added, which
   made the newest thing in the catalogo the one you had to scroll to
   find. A seventh needs this rethought, not trimmed again. */
.lg-cattiles{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:3px}
.lg-cattile{
  appearance:none;border:1px solid var(--hair);cursor:pointer;font:inherit;
  background:color-mix(in srgb,var(--paper) 5%,transparent);
  color:var(--paper);border-radius:12px;padding:7px 10px;
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;
  min-height:56px;
}
.lg-cattile:hover,.lg-cattile:active{background:color-mix(in srgb,var(--paper) 12%,transparent)}
/* the glyphs on the tile take the group's own colour, which is what
   makes a tile recognisable before a word on it is read */
.lg-catstrip{
  display:flex;align-items:center;gap:3px;min-height:20px;
  flex-wrap:nowrap;overflow:hidden;width:100%;
}
.lg-catmini{width:19px !important;height:19px !important;flex:0 0 auto;overflow:visible}
.lg-catmore{font-size:12px;color:var(--muted);margin-left:1px}
.lg-cattile .lg-catname{font-size:13.5px;line-height:1.25;color:var(--muted)}

/* one group, once you are in it */
.lg-catback{
  appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;
  color:var(--gold);padding:4px 2px 8px;display:flex;gap:7px;align-items:center;
  font-size:15px;width:100%;text-align:left;
}
.lg-catback span[aria-hidden]{font-size:20px;line-height:1}

@media (max-width:400px){
  .lg-cattiles{grid-template-columns:1fr}
}

/* ── hairpins ──────────────────────────────────────────────
   A crescendo is a span, so it is drawn by the same code that draws a
   highlight — but it is a LINE, not a wash, and it goes over the
   engraving rather than under it. Ink-blue, like the other signs
   everyone reads. */
/* `color` rather than a literal on the stroke, so the word on a rit.
   and the line it hangs off take their colour from one place — and so
   one declaration can repaint the lot under stage light. */
.lg-page svg g.lg-hair{
  fill:none;color:#2F6DA8;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;
  opacity:var(--ap-solid);cursor:pointer;
}
/* the invisible band that makes a pair of hairlines tappable */
.lg-page svg g.lg-hair .lg-hair-hit{
  fill:transparent;stroke:none;pointer-events:fill;
}

/* ── a thicker barline ───────────────────────────────────────────────
   Not a glyph: a rule down the stave at a bar's own edge. It has to
   beat the engraver's barline without pretending to BE it — the part's
   own lines are the sheet's ink and about 0.7 wide, so 2.4 in the
   mark's colour reads as a deliberate second line beside the first
   rather than as a printing fault.

   Square ends, unlike every other mark here, which are round. A
   division is a wall, and a wall does not have soft corners. */
.lg-page svg g.lg-divide{
  opacity:var(--ap-solid);cursor:pointer;
}
.lg-page svg g.lg-divide .lg-divide-rule{
  stroke:var(--ap);stroke-width:2.4;stroke-linecap:butt;fill:none;
}
/* the little wedge on the button that offers it */
.lg-hairchip{
  display:inline-block;width:26px;height:12px;vertical-align:middle;
  background:
    linear-gradient(to bottom right,transparent calc(50% - .7px),currentColor calc(50% - .7px),currentColor calc(50% + .7px),transparent calc(50% + .7px)) no-repeat,
    linear-gradient(to top right,transparent calc(50% - .7px),currentColor calc(50% - .7px),currentColor calc(50% + .7px),transparent calc(50% + .7px)) no-repeat;
  background-size:100% 50%,100% 50%;
  background-position:0 0,0 100%;
  color:#2F6DA8;
}
.lg-hairchip-dim{transform:scaleX(-1)}

/* rit. and accel. are not wedges, so their chips are not either: a
   dashed rule is what the mark actually looks like on the page, and a
   chooser that shows you the thing is better than one that shows you a
   category. The two differ by their word, which the button already
   carries beside them. */
.lg-hairchip-rit,.lg-hairchip-accel{
  background:none;height:12px;
  border-bottom:1.4px dashed currentColor;
}

/* ── the word on a rit. or an accel. ─────────────────────────────────
   Set, not drawn — it is a word, and the one thing it must not look
   like is a symbol. Italic because that is how an engraver sets a
   tempo instruction, and in the mark's own colour so it reads as the
   player's rather than the sheet's. */
.lg-page svg text.lg-hairword{
  font-family:var(--font-display);font-style:italic;font-size:11px;
  fill:currentColor;stroke:none;
}
.lg-page svg path.lg-hairdash{
  stroke-dasharray:4 3;
}

/* ── typing a word ────────────────────────────────────────
   A sheet rather than a popover: the on-screen keyboard takes half the
   screen, so the thing being typed into has to be somewhere the
   keyboard cannot cover. Bottom-anchored, like the i/o sheet. */
.lg-word{
  position:fixed;inset:0;z-index:14;display:flex;
  align-items:flex-end;justify-content:center;
  background:color-mix(in srgb,var(--ink) 66%,transparent);backdrop-filter:blur(6px);
}
.lg-wordbox{
  width:min(520px,100%);background:var(--ink-2);border:1px solid var(--hair);
  border-radius:16px 16px 0 0;padding:14px 16px 20px;
}
.lg-wordinput{
  width:100%;box-sizing:border-box;margin:10px 0 6px;
  background:var(--ink);border:1px solid var(--hair);border-radius:10px;
  color:var(--paper);font:inherit;font-size:19px;padding:12px 14px;
}
.lg-wordinput:focus{outline:none;border-color:#8A5AA8}
/* the last few words, because "2x" gets written eleven times in a
   rehearsal and typing it eleven times is not marking, it is admin */
#wordRecent{margin-bottom:10px;flex-wrap:wrap}
#wordRecent .lg-catitem{padding:7px 12px;min-height:38px}

/* ── typing notes, with the stave answering back ──────────────────
   "would it make sense to have a little window where the user enters
   the code and can see the result immediately? along with some help
   text?"

   The stave goes ABOVE the field, not below it, because the field is
   where the on-screen keyboard crowds up to and the stave is the thing
   you must not lose sight of while typing. Same reason the sheet is
   bottom-anchored at all. */
.lg-notestage{
  display:grid;place-items:center;
  min-height:104px;margin:4px 0 2px;padding:8px;
  background:var(--ink);border:1px solid var(--hair);border-radius:10px;
}
/* The preview takes the note family's purple, like the cue it is a
   preview of, and carries --ap-solid:1 so the stave is not faded here
   either — a preview at three quarters would be teaching you a line
   fainter than the one you are about to place. */
.lg-notepreview{
  width:100%;max-height:150px;--ap:#8A5AA8;--ap-solid:1;
  /* CLIPPED, deliberately. overflow:visible was here so a line climbing
     onto ledger lines could not be cut off — but the viewBox is
     measured from what was actually drawn, so there is nothing left to
     spill. What it did instead was let one bad measurement paint over
     the whole dialog: "the notes are not shown but there are strange
     artefacts around the dialog instead". A preview may be wrong
     inside its own frame; it may not escape it. */
  overflow:hidden;
}
/* the finger target belongs on a page, not in a window you cannot tap */
.lg-notepreview .lg-ap-hit{display:none}
/* what it read, in words. The stave cannot tell you that a character
   was skipped, nor that the C it drew is not the C you meant. */
.lg-noteread{
  margin:0;min-height:18px;font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.04em;color:var(--paper);
}
.lg-noteread.is-quiet{color:var(--muted)}
.lg-notebad{color:#C0392B}
.lg-noteinput{font-family:var(--font-mono);letter-spacing:.06em}
/* the help: five lines, one thing each, because a paragraph about a
   notation is read by nobody standing up */
.lg-notehelp{margin:2px 0 12px}
.lg-notehelp p{
  margin:0 0 4px;font-size:12.5px;line-height:1.4;color:var(--muted);
  display:flex;gap:9px;
}
.lg-notehelp b{
  flex:0 0 58px;font-family:var(--font-mono);font-weight:600;
  color:var(--paper);letter-spacing:.04em;
}
/* the way in, beside the parts. Dashed and italic because it is a
   different act from quoting one of them, and should not read as one
   more name in the row. */
.lg-typeitem{border-style:dashed}
.lg-typeitem .lg-catname{color:var(--muted);font-style:italic}

/* ── a mark's own panel ────────────────────────────────────
   The rows sit under the name. Kept narrow: it opens beside the mark it
   belongs to, and a wide panel would cover the music it is about. */
.lg-ap-row{display:flex;gap:4px;justify-content:center;margin-top:6px}
.lg-ap-row .lg-btn{min-width:40px;min-height:36px;padding:0 8px;font-size:16px}
.lg-ap-row .lg-btn[aria-pressed="true"]{background:color-mix(in srgb,var(--paper) 22%,transparent)}

/* ── moving a mark ────────────────────────────────────────
   A bar at the top, not the bottom: the controls live at the bottom and
   this must not read as one of them. It says what the screen is doing,
   because while it is up the screen is doing something unusual. */
.lg-move{
  position:fixed;left:50%;transform:translateX(-50%);top:14px;z-index:14;
  display:flex;gap:10px;align-items:center;
  background:color-mix(in srgb,var(--ink) 86%,transparent);
  border:1px solid var(--gold);border-radius:999px;padding:6px 8px 6px 16px;
  backdrop-filter:blur(8px);color:var(--paper);font-size:15px;
}
.lg-move-say{letter-spacing:.01em}
/* copying is a different mode from moving and must not be mistaken for
   it at a glance on a stand: the ring is the group's own colour */
.lg-copybar{border-color:var(--paper)}
/* the mark being moved, while it is being moved */
.lg-page svg g.lg-ap.is-moving{opacity:1}
.lg-page svg g.lg-ap.is-moving .lg-ap-hit{fill:color-mix(in srgb,var(--gold) 30%,transparent)}
body.lg.is-moving .lg-stage{touch-action:none}

/* ── keeping the marks ───────────────────────────────────────────────
   A bottom sheet, unlike the catalogo: this one belongs to no bar, so
   there is nothing for it to sit beside. It dims the page properly,
   because while you are here you are not reading. */
.lg-keep{
  position:fixed;inset:0;z-index:13;display:flex;
  align-items:flex-end;justify-content:center;
  background:color-mix(in srgb,var(--ink) 72%,transparent);backdrop-filter:blur(6px);
}
.lg-keepbox{
  width:min(560px,100%);max-height:86dvh;overflow:auto;
  background:var(--ink-2);border:1px solid var(--hair);
  border-radius:16px 16px 0 0;padding:16px 16px 22px;
}
.lg-keepsum{
  margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.5;
}
.lg-keepsum b{color:var(--paper);font-weight:600}
.lg-keeprow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
/* The controls bar frames its buttons, so they read as buttons without
   a border of their own. Here there is no frame, and bare words on a
   sheet do not look pressable. */
.lg-keeprow .lg-btn{
  flex:1 1 auto;min-width:120px;
  border:1px solid var(--hair);border-radius:10px;
}
.lg-keeprow .lg-btn:hover{border-color:var(--gold-deep)}
.lg-keepclose{flex:0 0 auto;min-width:80px}
/* The text used to be shown, on the reasoning that a thing you can see
   is a thing you can mail to yourself. What it actually did was fill
   the panel with JSON and push the one line that says what just
   happened below the fold — and put a data format in front of a
   musician, who has no reason to know what one is.

   So it is folded away. Still there, because a mail to yourself is the
   backup that works when a tablet will not hand over a file; no longer
   the first thing the panel says. */
.lg-keepraw{margin:0 0 10px}
.lg-keepraw>summary{
  cursor:pointer;color:var(--muted);font-size:13px;padding:4px 0;
  list-style:none;-webkit-user-select:none;user-select:none;
}
.lg-keepraw>summary::-webkit-details-marker{display:none}
.lg-keepraw>summary::before{content:'\25b8\a0'}
.lg-keepraw[open]>summary::before{content:'\25be\a0'}
.lg-keepraw>summary:hover{color:var(--paper)}
.lg-keepraw .lg-keeptext{margin-top:8px}
/* the last row carries only "close", which belongs at the edge */
/* ── and it must never scroll away ───────────────────────────────────
   "i don't see a way back from the file selector to the leggio."

   The box scrolls at 86dvh, and the way out was the last thing in it —
   so on a short screen, or with the text box unfolded, the one control
   that means "put this away" was below the fold while everything that
   changes your marks was above it. A panel you cannot leave is not a
   panel, it is a trap, and on a stand in a rehearsal that is the worst
   moment to meet one.

   It sits on the box's own background so the rows do not slide out
   from under it, and the negative margins let that background reach
   the padded edges. */
.lg-keepfoot{
  margin:0 -16px -22px;padding:10px 16px 16px;
  justify-content:space-between;
  position:sticky;bottom:-22px;z-index:2;
  background:var(--ink-2);
  border-top:1px solid var(--hair);
}
.lg-keeptext{
  display:block;width:100%;box-sizing:border-box;height:132px;resize:vertical;
  background:var(--ink);border:1px solid var(--hair);border-radius:10px;
  color:var(--paper);font-family:var(--font-mono);font-size:11.5px;line-height:1.45;
  padding:10px;margin-bottom:10px;
  -webkit-user-select:text;user-select:text;
}
.lg-keeptext:focus{outline:0;border-color:var(--gold-deep)}
/* the one control here that throws work away: kept apart from the four
   that do not, and it says so once it is armed */
.lg-keepwipe{flex:0 0 auto;min-width:110px}
.lg-keepback{flex:0 0 auto;min-width:110px;border-color:var(--gold-deep)}
.lg-keepwipe.is-armed{border-color:var(--gold-2);color:var(--gold-2)}

/* above the fold, because "they are in the clipboard now" is only worth
   saying where it can be read without scrolling */
.lg-keepnote{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.5;min-height:1.2em}
.lg-keepnote.is-warn{color:var(--gold-2)}

/* the pill saying something there is nothing to undo about */
.lg-undo.is-note .lg-btn{display:none}
.lg-undo.is-note{padding-right:16px}

.lg-undo{
  position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:10;
  display:flex;align-items:center;gap:12px;
  background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(6px);
  border:1px solid var(--hair);border-radius:999px;
  padding:8px 10px 8px 16px;color:var(--paper);font-size:14px;
  max-width:calc(100vw - 32px);
}

/* ── il vocabolario ──────────────────────────────────────────────────
   The catalogo in the leggio is a picker and spends its whole budget
   on being two taps deep. This is the other thing: a page with no
   budget, because nothing is being chosen — so it can show the family
   above the group, which is the level the taxonomy has always had in
   the data and has never been able to draw. */
/* The landing pages style a bare <section> as a band of the page —
   92px of padding and a rule above it. The two views here are sections
   in the ordinary sense of the word, not in that one. */
.vc main section{padding:0;border-top:0}
.vc-switch{display:flex;gap:6px;margin:0 0 14px}
.vc-switch .lg-btn{
  flex:1 1 auto;border:1px solid var(--hair);border-radius:10px;
}
.vc-switch .lg-btn.is-on{border-color:var(--gold-deep);color:var(--paper)}
.vc-sum{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.5}
.vc-sum b{color:var(--paper);font-weight:600}
.vc-family{
  margin:26px 0 2px;font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-deep);
}
.vc-group{margin:14px 0 6px;font-size:14px;font-weight:600;color:var(--paper)}
.vc-list{list-style:none;margin:0;padding:0}
.vc-row{
  display:flex;align-items:center;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--hair);
}
.vc-row:last-child{border-bottom:0}
.vc-art{display:flex;align-items:center;justify-content:center;width:30px;flex:0 0 30px}
.vc-mid{flex:1 1 auto;min-width:0}
.vc-name{display:block;color:var(--paper);font-size:14.5px;line-height:1.35}
.vc-count{
  flex:0 0 auto;min-width:2.2em;text-align:right;
  color:var(--paper);font-variant-numeric:tabular-nums;font-size:14px;
}
/* A symbol you have never used is the point of a catalogue — the one
   you have forgotten exists — so it is dimmed, not hidden. */
.vc-row.is-unused .vc-name,.vc-row.is-unused .vc-count{color:var(--muted)}
.vc-row.is-unused .vc-art{opacity:.55}

/* sixteen cells, one per movement, in order */
.vc-strip{display:flex;gap:2px;margin-top:5px}
.vc-cell{
  display:block;width:9px;height:9px;border-radius:2px;
  background:var(--hair);
}
.vc-cell.is-on{background:var(--gold-deep)}
.vc-legend,.vc-rest,.vc-empty,.vc-foot{
  color:var(--muted);font-size:13px;line-height:1.55;
}
.vc-legend{margin:0 0 10px}
.vc-rest{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--hair)}
.vc-foot{margin:30px 0 0;padding-top:14px;border-top:1px solid var(--hair)}
.vc-empty{margin:0}
@media (max-width:420px){
  .vc-cell{width:8px;height:8px}
  .vc-name{font-size:14px}
}
/* the way from "how does this work" to "what is there" */
.hp-more{margin:30px 0 0;padding-top:16px;border-top:1px solid var(--hair);font-size:14px}
.hp-more a{color:var(--gold-deep)}