/* Turandot listening notes (Leinsdorf, Rome 1959).

   The type is that of the opera's first edition and première poster
   (Ricordi, Milan 1926): a geometric capital face for titles and labels and
   an old-style serif for the words. The colours are Chinese and change with
   the scene, four grounds in all:

     silk     cream silk, black ink, cinnabar: the pages of introduction,
              and the ministers' pavilion (Act II, scene 1), where Ping
              dreams of his house by the lake
     cinnabar red lacquer and gold: Act I, at sunset before the walls
     gold     a gold-leaf screen, black ink, dark red: the throne room
              (Act II, scene 2) and the dawn of the last scene
     black    black lacquer and gold: the night garden of Act III

   Behind each page stands a landscape in the manner of an ink painting:
   steep peaks in layers that fade downward into mist, with a sun or moon.
   It is drawn by turandot.js (see there), in full on the title page and low
   and faint behind the others; the disc shows on the title and act pages.

   The page is a deck of full-screen pages, turned sideways as on the Bach
   pages: a title page, two pages of introduction, then for each act a
   contents page and one page per phrase (a few lines in large type, with the
   note on their passage beneath), and two closing pages. A bar along the bottom turns the pages; the
   timer, when switched on, adds a row above it. */

@font-face {
    font-family: 'Josefin Sans';
    font-weight: 100 700;
    font-display: swap;
    src: url('fonts/josefin-sans.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/cormorant-garamond-italic.woff2') format('woff2');
}

:root {
    --caps: 'Josefin Sans', 'Futura', 'Century Gothic', sans-serif;
    --serif: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;
    --gut: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}
/* Each ground sets the same names. --jade is the label and button colour and
   --orange the accent (the English lines); the names are older than the
   grounds. A page carries its ground as a class; the body carries the ground
   of the page in view, for the bar, the timer and the sheets. */
:root, .sc-silk, [data-sc="silk"] {
    color-scheme: light;
    --bg: #EDE3CC; --ground: linear-gradient(#F3EBD9, #E9DEC5);
    --ink: #171411; --body: #3B352D; --dim: #857C6B; --line: rgba(23, 20, 17, .2);
    --jade: #171411; --orange: #A8231A; --orange-fill: #B3261B; --on-jade: #F3EBD9;
}
@media (prefers-color-scheme: dark) {
    /* silk by lamplight */
    :root, .sc-silk, [data-sc="silk"] {
        color-scheme: dark;
        --bg: #1B1815; --ground: linear-gradient(#211D19, #171512);
        --ink: #EFE6D2; --body: #CFC5AF; --dim: #8C8472; --line: rgba(239, 230, 210, .2);
        --jade: #EFE6D2; --orange: #E86B55; --orange-fill: #C63A2B; --on-jade: #1B1815;
    }
}
.sc-cinnabar, [data-sc="cinnabar"] {
    color-scheme: dark;
    --bg: #6F120E; --ground: radial-gradient(130% 80% at 50% 0, #A8251C, #8E1B16 55%, #6F120E);
    --ink: #F8EBC8; --body: #F0D7A6; --dim: #DBA583; --line: rgba(246, 231, 193, .3);
    --jade: #EDC96F; --orange: #FFD98A; --orange-fill: #E9C46A; --on-jade: #5A0E0B;
}
.sc-gold, [data-sc="gold"] {
    color-scheme: light;
    --bg: #C89F46; --ground: linear-gradient(160deg, #E4C673, #D2AB52 60%, #C89F46);
    --ink: #150F0A; --body: #2E200D; --dim: #6B5024; --line: rgba(21, 15, 10, .3);
    --jade: #6E120E; --orange: #86170F; --orange-fill: #8E1B16; --on-jade: #F4E3B0;
}
.sc-black, [data-sc="black"] {
    color-scheme: dark;
    --bg: #0C0908; --ground: radial-gradient(120% 70% at 50% 100%, #2A1410, #100C0A 60%);
    --ink: #F1DEAE; --body: #D3BF90; --dim: #948158; --line: rgba(233, 196, 106, .28);
    --jade: #D9B25A; --orange: #EC6A52; --orange-fill: #C0392B; --on-jade: #100C0A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    background: var(--bg); color: var(--ink); transition: background-color .4s;
    font-family: var(--serif); font-size: 20px; line-height: 1.32;
    font-kerning: normal; font-variant-numeric: lining-nums;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--jade); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--orange-fill); outline-offset: 2px; }
[hidden] { display: none !important; }

.app { position: fixed; inset: 0; height: 100dvh; display: flex; flex-direction: column; }

/* ═════════ The deck ═════════ */
.deck {
    flex: 1; min-height: 0; display: flex;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }
.slide {
    flex: 0 0 100%; width: 100%; height: 100%;
    scroll-snap-align: start; scroll-snap-stop: always;
    overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none;
    color: var(--ink); background: var(--land, none) center bottom / cover no-repeat, var(--ground);
}
.slide::-webkit-scrollbar { display: none; }
.in {
    max-width: 680px; margin: 0 auto; min-height: 100%;
    padding: calc(max(18px, env(safe-area-inset-top, 0px)) + 4px) var(--gut) 28px;
}

/* Small capitals in the geometric face: labels everywhere */
.who, .over, .under, .names, .hint, .prose h2 small, .cast dt, .acthead p, .tl .ah {
    font-family: var(--caps); text-transform: uppercase; font-weight: 700;
}

/* ─── Title page ─── */
.deco {
    height: 14px;
    background:
        linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 3px no-repeat,
        linear-gradient(var(--ink), var(--ink)) 0 6px / 100% 1px no-repeat,
        linear-gradient(var(--orange-fill), var(--orange-fill)) 0 10px / 100% 4px no-repeat;
}
.deco.flip { transform: scaleY(-1); }
.cover .in { display: flex; flex-direction: column; justify-content: flex-start; text-align: center; padding-top: max(44px, 7vh); padding-bottom: 40px; position: relative; }
/* a collector's seal: the opera's Chinese title */
.seal { width: 44px; margin: 26px auto 0; padding: 5px 0 4px; background: var(--orange-fill); color: #F5EDDC; font-size: 15px; line-height: 1.12; font-weight: 700; border-radius: 3px; font-family: 'Songti SC', 'Noto Serif CJK TC', 'PMingLiU', serif; }
.cover .over { font-size: 12px; letter-spacing: .34em; color: var(--jade); margin-top: 26px; }
.cover h1 { font-family: var(--caps); font-weight: 300; line-height: 1; font-size: clamp(38px, 12vw, 84px); letter-spacing: .22em; margin: 14px -.22em 12px 0; }
.cover .under { font-size: 11px; letter-spacing: .26em; color: var(--orange); margin-bottom: 26px; }
.cover .names { font-size: 11px; letter-spacing: .24em; margin-top: 26px; }
.go { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; }
.btn {
    font-family: var(--caps); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
    background: var(--jade); color: var(--on-jade); border: 1px solid var(--jade); padding: 14px 18px 11px;
}
.btn.alt { background: none; color: var(--ink); border-color: var(--ink); }
.hint { font-size: 10px; letter-spacing: .22em; color: var(--dim); margin-top: 26px; }

/* ─── Pages of prose ─── */
.prose h2, .acthead h2 { font-family: var(--caps); font-weight: 300; font-size: clamp(24px, 6.4vw, 34px); letter-spacing: .16em; text-transform: uppercase; text-align: center; line-height: 1.2; text-wrap: balance; margin-top: 14px; }
.prose h2 small { display: block; font-size: 10.5px; letter-spacing: .3em; color: var(--jade); margin-bottom: 10px; }
.prose h2::after, .acthead::after { content: ""; display: block; width: 72px; height: 4px; background: var(--orange-fill); margin: 16px auto 20px; }
.prose h3 { font-family: var(--caps); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--orange); margin: 1.5em 0 .5em; }
.prose p, .prose li { color: var(--body); text-wrap: pretty; }
.prose p + p { margin-top: .7em; }
.prose ul { padding-left: 1.1em; }
.prose li { margin: .45em 0; }
.prose li::marker { color: var(--orange-fill); }
.prose b { font-weight: 700; color: var(--ink); }
.prose .btn { margin-top: 20px; }
.cast { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; margin: 0 0 18px; }
.cast dt { font-size: 10.5px; letter-spacing: .2em; color: var(--jade); padding-top: .5em; }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.links a { font-family: var(--caps); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; text-decoration: none; border: 1px solid var(--ink); padding: 10px 12px 8px; color: var(--ink); }
.scale { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 14px 0; align-items: center; }
.scale span { color: var(--body); }
.home { text-align: center; margin-top: 40px !important; font-style: italic; }

/* Tempo and tension: four lozenges */
.lv { display: flex; gap: 6px; padding: 3px 2px; }
.lv i { width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid var(--jade); }
.lv i.f { background: var(--jade); }

/* ─── Act pages ─── */
.acthead { text-align: center; }
.acthead h2 { font-size: clamp(34px, 10vw, 58px); letter-spacing: .24em; margin: 22px -.24em 0 0; }
.acthead p { font-family: var(--serif); text-transform: none; font-weight: 500; font-style: italic; font-size: 20px; color: var(--jade); margin-top: 10px; text-wrap: balance; }
.acthead .len { font-family: var(--caps); font-style: normal; text-transform: uppercase; font-weight: 700; font-size: 10.5px; letter-spacing: .24em; color: var(--dim); }
.tl { list-style: none; }
.tl button { display: flex; width: 100%; text-align: left; gap: 10px; align-items: baseline; padding: 9px 0 8px; border-bottom: 1px solid var(--line); }
.tl .n { font-family: var(--caps); font-size: 11px; font-weight: 700; color: var(--orange); width: 1.9em; flex: none; font-variant-numeric: tabular-nums; }
.tl .t { flex: 1; font-weight: 500; }
.tl .d { font-family: var(--caps); font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; font-weight: 600; }
.tl .ah { font-size: 10.5px; letter-spacing: .26em; color: var(--jade); padding: 16px 0 4px; }
.tl .cur .t { font-weight: 700; }
.tl .cur { border-bottom-color: var(--orange-fill); }

/* ─── A phrase: the words large, the passage's note beneath, a strip at the foot ─── */
.page .in { display: flex; flex-direction: column; padding-bottom: 0; }
.mid { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 8px 0 22px; }
.trk { font-family: var(--caps); text-transform: uppercase; font-weight: 700; font-size: 11px; letter-spacing: .2em; padding-bottom: 9px; margin-bottom: 20px; border-bottom: 1px solid var(--ink); }
.trk b { color: var(--orange); margin-right: 10px; }
.before { font-style: italic; font-size: 18px; line-height: 1.2; color: var(--dim); margin-bottom: 16px; }
.who { font-size: 10.5px; letter-spacing: .24em; color: var(--jade); margin-bottom: 8px; }
.sung .it { display: block; font-weight: 600; line-height: 1.06; text-wrap: balance; }
.sung .en { display: block; font-style: italic; font-weight: 600; color: var(--orange); line-height: 1.15; text-wrap: balance; }
.sung.xl .it { font-size: clamp(33px, 10vw, 46px); }
.sung.xl .en { font-size: clamp(21px, 6vw, 27px); margin: 7px 0 16px; }
.sung.l .it { font-size: clamp(26px, 7.6vw, 36px); }
.sung.l .en { font-size: clamp(18px, 5vw, 23px); margin: 5px 0 13px; }
.sung.m .it { font-size: clamp(22px, 6.2vw, 30px); line-height: 1.1; }
.sung.m .en { font-size: clamp(16.5px, 4.5vw, 21px); margin: 3px 0 10px; }
.stage { font-style: italic; font-size: clamp(26px, 7.6vw, 36px); line-height: 1.1; color: var(--jade); text-wrap: balance; }
.gist { margin-top: 14px; }
.gist::before { content: ""; display: block; width: 60px; height: 4px; background: var(--orange-fill); margin-bottom: 14px; }
.gist h3 { font-style: italic; font-weight: 600; font-size: 21px; line-height: 1.1; margin-bottom: 4px; }
.gist p { font-size: 18px; line-height: 1.28; color: var(--body); text-wrap: pretty; }
/* the note is read once, where its passage begins; after that it steps back */
.gist:not(.new) { opacity: .62; }
.gist:not(.new) p { font-size: 16.5px; }
.strip {
    flex: none; position: sticky; bottom: 0; background: var(--bg);
    margin: 0 calc(-1 * var(--gut)); padding-left: var(--gut) !important; padding-right: var(--gut) !important; width: auto !important;
    display: flex; align-items: center; gap: 16px; width: 100%; min-width: 0; text-align: left;
    border-top: 1px solid var(--line); padding: 11px 0 9px;
    font-family: var(--caps); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--orange);
}
.strip .at { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .12em; white-space: nowrap; }
.strip .ms { display: flex; align-items: center; gap: 6px; }
.strip .lv { gap: 4px; padding: 0 2px; }
.strip .lv i { width: 7px; height: 7px; }
.strip .free { font-style: normal; color: var(--jade); }
.strip .more { margin-left: auto; color: var(--jade); border: 1px solid var(--jade); padding: 6px 8px 4px; }
.strip .ms > span { display: none; }
@media (min-width: 520px) { .strip .ms > span { display: inline; } }

/* the whole note, in its sheet */
.note { padding: 16px 16px 20px; }
.note h3 { font-style: italic; font-weight: 600; font-size: 30px; line-height: 1.05; text-wrap: balance; }
.meas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0 2px; }
.meas p { font-size: 17px; line-height: 1.2; color: var(--body); }
.note h4 { font-family: var(--caps); text-transform: uppercase; font-weight: 700; font-size: 10px; letter-spacing: .24em; color: var(--orange); margin: 12px 0 2px; }
.meas h4 { margin-top: 0; }
.note > p { font-size: 19px; line-height: 1.3; color: var(--body); text-wrap: pretty; }

/* ═════════ The timer row ═════════ */
.timer { flex: none; border-top: 1px solid var(--ink); padding: 0 var(--gut); background: var(--bg); color: var(--ink); transition: background-color .4s; }
.tr { max-width: 680px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 6px; height: 58px; font-family: var(--caps); font-size: 12px; letter-spacing: .1em; font-weight: 700; }
.tr .where { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; line-height: 1.35; }
.tr .where b { display: block; font-size: 15px; letter-spacing: .06em; color: var(--orange); font-variant-numeric: tabular-nums; }
.tr .clock { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; font-size: 11px; }
.tr button { min-width: 48px; height: 44px; white-space: nowrap; }
.tr .pp { width: 38px; min-width: 38px; height: 38px; margin: 0 12px; background: var(--jade); color: var(--on-jade); transform: rotate(45deg); display: flex; align-items: center; justify-content: center; }
.tr .pp svg { transform: rotate(-45deg); width: 15px; height: 15px; fill: currentColor; }
.tr .pp .i-pause, .playing .tr .pp .i-play { display: none; }
.playing .tr .pp .i-pause { display: block; }
.away, .cal { max-width: 680px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-family: var(--caps); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.cal .msg b { font-weight: 700; font-style: normal; }
.away span, .cal .msg { flex: 1; font-family: var(--serif); font-style: italic; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.15; }
.away button, .cal button { min-height: 40px; padding: 6px 10px 4px; border: 1px solid var(--ink); }
.cal .mark, .away #tonow { background: var(--orange-fill); border-color: var(--orange-fill); color: var(--on-jade); padding-left: 16px; padding-right: 16px; }

/* ═════════ The bar ═════════ */
.bar {
    flex: none; position: relative; display: grid; grid-template-columns: 52px 1fr auto 1fr 52px; align-items: center;
    border-top: 1px solid var(--ink); background: var(--bg); color: var(--ink); transition: background-color .4s;
    padding: 0 max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px));
    font-family: var(--caps); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
}
.bar button { height: 50px; }
.bar .arrow { display: flex; align-items: center; justify-content: center; color: var(--jade); }
.bar .arrow svg { width: 20px; height: 20px; }
.bar .arrow:disabled { opacity: .25; }
.bar .txt { justify-self: center; padding: 0 12px; }
.bar .txt[aria-pressed="true"] { color: var(--orange); }
.bar .txt[aria-pressed="true"]::after { content: " on"; }
.bar .pos { color: var(--dim); font-variant-numeric: tabular-nums; letter-spacing: .12em; white-space: nowrap; }
.prog { position: absolute; left: 0; right: 0; top: -1px; height: 3px; }
.prog i { display: block; height: 100%; width: 0; background: var(--orange-fill); }

/* ═════════ Dialogs ═════════ */
dialog {
    background-image: var(--ground);
    margin: auto; width: min(560px, calc(100vw - 28px)); max-height: min(82vh, 720px);
    background: var(--bg); color: var(--ink); border: 1px solid var(--ink); padding: 0;
    box-shadow: 6px 6px 0 var(--orange-fill);
}
dialog::backdrop { background: rgba(20, 18, 14, .55); }
dialog .dh { position: sticky; top: 0; background: var(--bg); display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; border-bottom: 1px solid var(--ink); font-family: var(--caps); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; }
dialog .dh button { color: var(--orange); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; min-height: 32px; }
dialog .tl { padding: 0 16px 16px; }
.dhint { padding: 10px 16px 0; font-style: italic; font-size: 16px; color: var(--body); }
#export textarea { display: block; width: calc(100% - 32px); margin: 12px 16px; height: 200px; font: 12px/1.4 ui-monospace, Menlo, monospace; background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 8px; }
#export .row { display: flex; gap: 8px; padding: 0 16px 16px; }
#export .row button { border: 1px solid var(--ink); padding: 9px 12px 7px; font-family: var(--caps); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }

/* ═════════ Wide screens ═════════ */
@media (min-width: 900px) {
    body { font-size: 22px; }
    .page .in { max-width: 860px; }
    .sung.xl .it { font-size: 62px; }
    .sung.xl .en { font-size: 34px; }
    .sung.l .it { font-size: 46px; }
    .sung.l .en { font-size: 28px; }
    .sung.m .it { font-size: 36px; }
    .sung.m .en { font-size: 24px; }
    .stage { font-size: 46px; }
    .before { font-size: 22px; }
    .gist h3 { font-size: 26px; }
    .gist p, .gist:not(.new) p { font-size: 21px; }
    .strip { font-size: 11.5px; background: none; }
    .tr, .away, .cal { max-width: 860px; }
}