/* ================= MONOGRAPH — the composer as a printed book ============= */
/*
   Design grammar:
   • Paper ground, hairline rules, one accent used like oxblood ink
   • Title page in pure typography — name as book title, tagline as subtitle
   • Prose chapters with drop caps; catalogue raisonné of numbered entries
   • Images tipped in as mounted plates + one full-bleed plate break
   • Tracks as an appendix; publishers/territories as a colophon register
   All selectors scoped to .pg-monograph. Tokens only; container queries only.
*/

.pg-monograph {
  --mo-display: 'Fraunces', var(--font-serif), Georgia, serif;
  --mo-body: 'Spectral', Georgia, serif;
  --mo-faint: color-mix(in srgb, var(--ink) 45%, var(--bg));
  --mo-line-faint: color-mix(in srgb, var(--ink) 13%, transparent);
  --mo-deep: color-mix(in srgb, var(--ink) 7%, var(--bg));
  --mo-gutter: clamp(1.25rem, 5cqw, 4rem);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mo-body);
  font-size: clamp(1rem, .92rem + .4cqw, 1.1875rem);
  line-height: 1.72;
  position: relative;
}

/* Laid-paper grain + falling light across the open book */
.pg-monograph::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pg-monograph::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ink) 3.5%, transparent) 0%, transparent 12%,
    transparent 88%, color-mix(in srgb, var(--ink) 3.5%, transparent) 100%);
}

/* Everything rides above the paper texture */
.pg-monograph > * { position: relative; z-index: 1; }

.pg-monograph ::selection {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--ink);
}

.pg-monograph img { display: block; max-width: 100%; height: auto; }
.pg-monograph a { color: inherit; }

/* ── Reading-progress hairline — pure CSS scroll-driven, hidden if unsupported */

.pg-monograph .mo-progress {
  display: none;
  position: sticky;
  top: 0;
  z-index: 6;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .pg-monograph .mo-progress {
    display: block;
    animation: mo-progress linear both;
    animation-timeline: scroll(nearest);
  }
}
@keyframes mo-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Measure column ────────────────────────────────────────────────────── */

.pg-monograph .mo-page {
  width: min(100%, calc(33.5em + 2 * var(--mo-gutter)));
  margin-inline: auto;
  padding-inline: var(--mo-gutter);
}
.pg-monograph .mo-page--wide {
  width: min(100%, calc(48em + 2 * var(--mo-gutter)));
}

/* ── Rules ─────────────────────────────────────────────────────────────── */

.pg-monograph .mo-rule {
  width: 5.5rem;
  margin: 1.6rem auto;
  border: 0;
  border-top: 1px solid var(--line);
}
.pg-monograph .mo-rule--double { position: relative; }
.pg-monograph .mo-rule--double::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  top: 3px;
  border-top: 1px solid var(--mo-line-faint);
}
.pg-monograph .mo-rule--head { margin-top: 1.5rem; margin-bottom: 0; }

.pg-monograph .mo-fleuron {
  display: block;
  color: var(--accent);
  font-family: var(--mo-body);
  font-size: 1.05rem;
  margin-bottom: .85rem;
}

/* ── Title page ────────────────────────────────────────────────────────── */

.pg-monograph .mo-title {
  min-height: clamp(560px, 100cqh, 1400px);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  text-align: center;
  padding: clamp(2rem, 6cqh, 4rem) var(--mo-gutter);
}

.pg-monograph .mo-tp-top { align-self: end; padding-bottom: clamp(1.5rem, 4cqh, 3rem); }

.pg-monograph .mo-monogram {
  font-family: var(--mo-display);
  font-style: italic;
  font-weight: 340;
  font-variation-settings: 'opsz' 144;
  font-size: 1.35rem;
  letter-spacing: .08em;
  color: var(--accent);
  margin: 0;
}
.pg-monograph .mo-logo {
  max-height: 44px;
  max-width: 170px;
  object-fit: contain;
}

.pg-monograph .mo-tp-main { max-width: 46rem; }

.pg-monograph .mo-name {
  font-family: var(--mo-display);
  font-weight: 340;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(3rem, 10.5cqw, 6.75rem);
  line-height: 1.02;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

.pg-monograph .mo-subtitle {
  margin: 1.4rem 0 0;
  font-family: var(--mo-display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 60;
  font-size: clamp(1.1rem, 2.6cqw, 1.55rem);
  letter-spacing: .01em;
  color: var(--muted);
  text-wrap: balance;
}

.pg-monograph .mo-conceit {
  margin: 1.5rem 0 0;
  font: 400 .625rem/2.1 var(--font-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mo-faint);
}

.pg-monograph .mo-imprint {
  align-self: end;
  padding-top: clamp(1.5rem, 4cqh, 2.5rem);
  font: 400 .594rem/1.6 var(--font-mono);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Chapter furniture ─────────────────────────────────────────────────── */

.pg-monograph .mo-chapter { padding-block: clamp(4rem, 10cqh, 7.5rem) 0; }

.pg-monograph .mo-ch-head {
  text-align: center;
  margin-bottom: clamp(2.4rem, 6cqh, 4rem);
}
.pg-monograph .mo-ch-no {
  font: 400 .625rem/1.5 var(--font-mono);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.pg-monograph .mo-ch-title {
  margin: .9rem 0 0;
  font-family: var(--mo-display);
  font-weight: 340;
  font-style: italic;
  font-variation-settings: 'opsz' 100;
  font-size: clamp(1.9rem, 4.5cqw, 2.8rem);
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

.pg-monograph .mo-folio {
  text-align: center;
  padding-block: clamp(3rem, 8cqh, 5rem) 0;
  color: var(--mo-faint);
}
.pg-monograph .mo-folio span {
  color: var(--accent);
  font-family: var(--mo-body);
  font-size: 1rem;
}

/* ── Prose ─────────────────────────────────────────────────────────────── */

.pg-monograph .mo-prose p { margin: 0 0 1.35em; }
.pg-monograph .mo-prose p:last-child { margin-bottom: 0; }

.pg-monograph .mo-dropcap::first-letter {
  float: left;
  font-family: var(--mo-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  font-size: 4.4em;
  line-height: .78;
  padding: .06em .12em 0 0;
  color: var(--accent);
}

/* Stats woven into a ledger sentence */
.pg-monograph .mo-stats-line {
  font-style: italic;
  color: var(--muted);
}
.pg-monograph .mo-stat-v {
  font-family: var(--mo-display);
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
}
.pg-monograph .mo-stat-l {
  font-style: normal;
  font: 500 .68em/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Plates — tipped in ────────────────────────────────────────────────── */

.pg-monograph .mo-plate {
  margin: clamp(2.75rem, 7cqh, 4.5rem) auto;
  max-width: 34rem;
}
@container page (min-width: 1000px) {
  .pg-monograph .mo-plate--r { margin-right: clamp(-9rem, -2rem - 6cqw, 0rem); }
  .pg-monograph .mo-plate--l { margin-left:  clamp(-9rem, -2rem - 6cqw, 0rem); }
}

.pg-monograph .mo-mount {
  background: var(--surface);
  padding: clamp(.6rem, 1.6cqw, .9rem);
  border: 1px solid var(--mo-line-faint);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
    0 10px 28px -14px color-mix(in srgb, var(--ink) 28%, transparent);
}
.pg-monograph .mo-plate img,
.pg-monograph .mo-plate-grid img {
  width: 100%;
  filter: saturate(.82) contrast(.97);
}

.pg-monograph .mo-plate figcaption,
.pg-monograph .mo-bleed figcaption,
.pg-monograph .mo-reel figcaption {
  margin-top: .95rem;
  text-align: center;
  font: 400 .625rem/2 var(--font-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-monograph .mo-pl-no { color: var(--accent); }
.pg-monograph .mo-pl-rule {
  display: block;
  width: 2.5rem;
  margin: .55rem auto 0;
  border-top: 1px solid var(--mo-line-faint);
}

/* ── Full-bleed plate break ────────────────────────────────────────────── */

.pg-monograph .mo-bleed {
  width: 100cqw;
  margin-inline: calc(50% - 50cqw) 0;
  margin-block: clamp(4.5rem, 11cqh, 8rem);
}
.pg-monograph .mo-bleed-frame {
  padding: clamp(.75rem, 2cqw, 1.25rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--mo-deep);
}
.pg-monograph .mo-bleed img {
  width: 100%;
  height: clamp(18rem, 68cqh, 44rem);
  object-fit: cover;
  filter: saturate(.78) contrast(.96) brightness(.94);
}
.pg-monograph .mo-bleed figcaption { padding-inline: var(--mo-gutter); margin-top: 1.1rem; }

/* ── Catalogue raisonné ────────────────────────────────────────────────── */

.pg-monograph .mo-cat-note {
  text-align: center;
  font-style: italic;
  color: var(--muted);
  max-width: 28em;
  margin: 0 auto clamp(2.2rem, 5cqh, 3.4rem);
}

.pg-monograph .mo-entry { margin-bottom: 2.1rem; }
.pg-monograph .mo-entry:last-child { margin-bottom: 0; }

.pg-monograph .mo-e-line {
  display: flex;
  align-items: baseline;
  gap: .9em;
}
.pg-monograph .mo-e-no {
  font: 400 .66rem/1.4 var(--font-mono);
  letter-spacing: .08em;
  color: var(--accent);
  min-width: 3.6em;
  flex: none;
}
.pg-monograph .mo-e-title {
  font-family: var(--mo-display);
  font-style: italic;
  font-weight: 360;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(1.18rem, 2.6cqw, 1.5rem);
  line-height: 1.25;
  color: var(--ink);
  transition: color .3s ease;
}
.pg-monograph .mo-entry:hover .mo-e-title { color: var(--accent); }
.pg-monograph .mo-e-leader {
  flex: 1;
  min-width: 1.25rem;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-.3em);
}
.pg-monograph .mo-e-year {
  font: 400 .7rem/1.4 var(--font-mono);
  letter-spacing: .08em;
  color: var(--muted);
  flex: none;
}
.pg-monograph .mo-e-note {
  margin: .45rem 0 0;
  padding-left: 4.5em;
  font-size: .94em;
  line-height: 1.65;
  color: var(--muted);
  max-width: 32em;
}

/* Continuation line — the elegant cap */
.pg-monograph .mo-cont {
  margin: clamp(2rem, 5cqh, 3rem) auto 0;
  text-align: center;
  font-style: italic;
  color: var(--muted);
  max-width: 28em;
}

/* Works woven into prose */
.pg-monograph .mo-works-line {
  margin: clamp(2.2rem, 5cqh, 3.2rem) 0 0;
  border-top: 1px solid var(--mo-line-faint);
  padding-top: 1.4rem;
  color: var(--muted);
}
.pg-monograph .mo-work { font-style: italic; color: var(--ink); }

/* ── Plate spread grid ─────────────────────────────────────────────────── */

.pg-monograph .mo-plate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 4cqw, 2.75rem) clamp(1.2rem, 3.5cqw, 2.5rem);
}
.pg-monograph .mo-plate--grid { margin: 0; max-width: none; }
.pg-monograph .mo-plate--grid:nth-child(even) { transform: translateY(clamp(0rem, 3cqw, 2.2rem)); }

/* ── Appendix — the recordings ─────────────────────────────────────────── */

.pg-monograph .mo-tracks { border-top: 1px solid var(--line); }
.pg-monograph .mo-tracks .track-row {
  border-bottom: 1px solid var(--mo-line-faint);
  padding-block: .65rem;
}
.pg-monograph .mo-tracks .tr-num {
  font: 400 .66rem/1.4 var(--font-mono);
  letter-spacing: .08em;
  color: var(--accent);
}
.pg-monograph .mo-tracks .track-row strong {
  font-family: var(--mo-display);
  font-style: italic;
  font-weight: 380;
  font-variation-settings: 'opsz' 40;
  font-size: 1.02rem;
}
.pg-monograph .mo-tracks .tr-pub {
  font: 400 .6rem/1.5 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mo-faint);
}
.pg-monograph .mo-tracks .tr-links a {
  font: 500 .58rem/1 var(--font-mono);
  letter-spacing: .1em;
  border: 1px solid var(--mo-line-faint);
  padding: .45em .7em;
  text-decoration: none;
  color: var(--muted);
  transition: color .2s ease, border-color .2s ease;
}
.pg-monograph .mo-tracks .tr-links a:hover { color: var(--accent); border-color: var(--accent); }

.pg-monograph .mo-reel { margin: clamp(2.5rem, 6cqh, 4rem) 0 0; }
.pg-monograph .mo-mount--reel { padding: clamp(.6rem, 1.6cqw, .9rem); }
.pg-monograph .mo-yt { margin: 0; }

/* ── Custom sections (flex zone) ───────────────────────────────────────── */

.pg-monograph .mo-xsec {
  width: min(100%, calc(33.5em + 2 * var(--mo-gutter)));
  margin: clamp(3rem, 8cqh, 5rem) auto 0;
  padding-inline: var(--mo-gutter);
}
.pg-monograph .xsec-h,
.pg-monograph .xsec-title {
  font-family: var(--mo-display);
  font-style: italic;
  font-weight: 340;
  color: var(--ink);
}

/* ── Colophon ──────────────────────────────────────────────────────────── */

.pg-monograph .mo-colophon {
  margin-top: clamp(4.5rem, 11cqh, 7.5rem);
  border-top: 1px solid var(--line);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--ink) 3%, transparent), transparent 30%);
  text-align: center;
  padding: clamp(3.25rem, 8cqh, 5.5rem) var(--mo-gutter) clamp(2.75rem, 7cqh, 4.5rem);
}
.pg-monograph .mo-cl-inner { max-width: 32rem; margin-inline: auto; }
.pg-monograph .mo-cl-title {
  margin: 0;
  font: 500 .66rem/1.5 var(--font-mono);
  letter-spacing: .46em;
  text-transform: uppercase;
  color: var(--ink);
}

.pg-monograph .mo-cl-contact {
  margin-top: 1.75rem;
  font-size: .95rem;
  line-height: 2;
  color: var(--muted);
}
.pg-monograph .mo-cl-contact p { margin: 0 0 .4rem; max-width: 24em; margin-inline: auto; }
.pg-monograph .mo-cl-link {
  display: inline-block;
  margin: .1rem .6rem;
  font-style: italic;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color .25s ease, border-color .25s ease;
}
.pg-monograph .mo-cl-link:hover,
.pg-monograph .mo-cl-link:focus-visible { color: var(--accent); border-color: var(--accent); }

.pg-monograph .mo-cl-soc {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.6rem;
}
.pg-monograph .mo-cl-soc .soc {
  font: 400 .625rem/1.6 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 0;
  padding: 0;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: color .25s ease, background-size .3s ease;
}
.pg-monograph .mo-cl-soc .soc:hover { color: var(--accent); background-size: 100% 1px; }

/* Register of publishers & territories — colophon prose */
.pg-monograph .mo-cl-register {
  margin-top: 2rem;
  text-align: center;
}
.pg-monograph .mo-cl-prose {
  margin: 0 0 1.1rem;
  font-size: .95rem;
  line-height: 1.95;
  color: var(--muted);
  max-width: 30em;
  margin-inline: auto;
}
.pg-monograph .mo-cl-prose:last-child { margin-bottom: 0; }
.pg-monograph .mo-cl-k {
  display: block;
  margin-bottom: .45rem;
  font: 400 .56rem/1.4 var(--font-mono);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent);
}
.pg-monograph .mo-cl-item { font-style: italic; color: var(--ink); }

.pg-monograph .mo-rule--cl {
  width: 3rem;
  margin: 1.9rem auto;
  border-top-color: var(--mo-line-faint);
}
.pg-monograph .mo-cl-print {
  font: 400 .594rem/2.4 var(--font-mono);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mo-faint);
}
.pg-monograph .mo-cl-print p { margin: 0; }
.pg-monograph .mo-cl-edition { margin-top: 1.3rem !important; }

.pg-monograph .colophon {
  margin-top: 2.4rem;
  font: 400 .594rem/1.6 var(--font-mono);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mo-faint);
}

/* ── Scroll-reveal — gated on .stage.animate so the page is always legible ─ */

.stage.animate .pg-monograph > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
              transform .9s cubic-bezier(.22, .61, .36, 1);
}
.stage.animate .pg-monograph > .mo-progress { opacity: 1; transition: none; }
.stage.animate .pg-monograph > *.in { opacity: 1; transform: translateY(0); }
.stage.animate .pg-monograph > .mo-progress.in { transform: none; }

/* ── Responsive — narrow container ─────────────────────────────────────── */

@container page (max-width: 620px) {
  .pg-monograph .mo-name { font-size: clamp(2.3rem, 12cqw, 3.6rem); }
  .pg-monograph .mo-title { min-height: clamp(480px, 100cqh, 900px); }
  .pg-monograph .mo-e-line { flex-wrap: wrap; row-gap: .15rem; }
  .pg-monograph .mo-e-no { min-width: 0; flex-basis: 100%; }
  .pg-monograph .mo-e-leader { display: none; }
  .pg-monograph .mo-e-year { margin-left: auto; }
  .pg-monograph .mo-e-note { padding-left: 0; }
  .pg-monograph .mo-plate-grid { grid-template-columns: 1fr; }
  .pg-monograph .mo-plate--grid:nth-child(even) { transform: none; }
  .pg-monograph .mo-conceit { letter-spacing: .2em; }
}