/* ═══════════════════════════════════════════════════════════════
   Le Folio — the practice pages, the glossary and the florilège.

   Loaded after main.css, folio-page.css and folio-pages.css by those
   pages only (tools/build-practice-pages.mjs, tools/build-florilege.mjs).
   They are the Mentions leaf — the book: a head, a side Sommaire on wide
   screens, numbered parts — so they wear its classes (.pgx-legal and the
   rest, css/folio-pages.css) and this file only adds what they hold that
   the legal text does not: a name with its subtitle, the practices by door
   at the foot, the four steps, the glossary's terms and the florilège's
   quotations. Every class here starts with pgx-, so nothing on any other
   page can be touched by it.
   ═══════════════════════════════════════════════════════════════ */

/* read, like the legal text: the falling signs stay off; each leaf is torn at its own place */
body:is(.pgx--pratique, .pgx--glossaire, .pgx--florilege) .driftfall { display: none; }
body.pgx--pratique .pgx-leaf::before { background-position-x: -517px; }
body.pgx--glossaire .pgx-leaf::before { background-position-x: -103px; }
body.pgx--florilege .pgx-leaf::before { background-position-x: -853px; }

/* the name, and its subtitle under it in italic, as the home page's card sets it */
.pgx-book .pgx-name { display: block; }
.pgx-book .pgx-sub {
  display: block; margin-top: .45em; font: italic 400 .52em/1.3 'IM Fell English', serif; color: var(--ink-soft);
  text-wrap: balance;
}
.pgx-book .pgx-legal-head .pg-lede { text-wrap: pretty; }
/* a door's running head (« Première porte · Āsana · Par le corps ») is longer than the legal page's « Studio être »:
   on a phone it wraps, so its glyph stops hanging outside the words (it would hang off the screen) and sits before them */
@media (max-width: 640px) {
  .pgx-book .pgx-legal-head .pg-rh { display: block; padding-left: 0; letter-spacing: .16em; text-align: center; text-wrap: balance; }
  .pgx-book .pgx-legal-head .pg-rh .pg-mk { position: static; display: inline-block; width: 1.1em; height: 1.1em; margin: 0 .55em 0 0; vertical-align: -.18em; }
}

/* the legal page opens a part's first paragraph on a rubric initial; a paragraph that follows the part's ruled rows is a note, not an opening */
.pgx-part > .pgx-dl ~ .legal-p::first-letter { float: none; margin: 0; font: inherit; color: inherit; }

/* the two sentences the home page also says, under the reports and the research: set small, as its fine print */
.pgx-book .pgx-note { max-width: 36rem; margin: 1.3rem 0 0; font: italic .95rem/1.55 'IM Fell English', serif; color: var(--ink-soft); }

/* « Le chemin »: the four steps, numbered in rubric where the refunds scale hangs its hederae */
.pgx-legal .pgx-steps li { padding-left: 2.2rem; }
.pgx-legal .pgx-steps li::before { content: none; }
.pgx-step-n { position: absolute; left: 0; top: .78rem; font: 400 1.05rem/1.4 'IM Fell English', serif; color: var(--cc-red); }
.pgx-steps strong { font-weight: 600; }
.pgx-book .pg-actions { margin: .4rem 0 1.6rem; }
.pgx-fiche dd .pg-link { margin-left: .3em; }

/* the side Sommaire: below this page's parts, every practice, this one in ink with the reader's rule */
@media (min-width: 1200px) {
  .pgx-side-k { display: block; margin-top: .7rem; padding: .25rem 0 .25rem 1.6rem; font: 600 .8rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .12em; color: var(--cc-red); }
  .pgx-side .pgx-here { position: relative; display: block; padding: .05rem 0 .05rem 1.6rem; font: italic .9rem/1.22 'IM Fell English', serif; color: var(--ink); }
  .pgx-side .pgx-here::before { content: ""; position: absolute; left: 0; top: 50%; width: 1rem; height: 1px; background: var(--rubric); }
}

/* the foot of each page: the practices by door, then the glossary, the florilège and the way home */
.pgx-others { margin: 3.4rem 0 0; padding-top: 2rem; border-top: 1px solid rgba(var(--rule), .32); }
.pgx-others > .pg-k { margin-bottom: 1.2rem; }
.pgx-others-g { margin: 0 0 1.1rem; }
.pg .pgx-others-d { margin: 0 0 .2rem; font: 600 .76rem/1.4 'Cormorant SC', var(--font-caps); letter-spacing: .14em; color: var(--cc-red); }
.pgx-others-d em { font-style: normal; color: var(--ink-soft); }
.pgx-others ul { list-style: none; margin: 0; padding: 0; }
.pg .pgx-others li { margin: 0; font: 500 1.02rem/1.35 'Cormorant Garamond', var(--font-serif); color: var(--ink-soft); }
/* a finger's target: each name is a 44px row */
.pg .pgx-others li > a, .pgx-others .pgx-here {
  display: inline-block; padding: .62rem 0; margin-right: .45rem; font: 400 1.14rem/1.2 'IM Fell English', serif; color: var(--ink);
}
.pgx-others .pgx-here { text-decoration: underline 1px var(--rubric); text-underline-offset: .3em; }
.pgx-others-s { font-style: italic; }
.pgx-others-go { display: flex; flex-wrap: wrap; gap: 0 1.8rem; max-width: none; margin: 1.4rem 0 0; }
.pgx-florilege .pgx-others-go { margin-top: 2.6rem; }

/* ═══════════ The glossary ═══════════ */
.pgx-gloss { margin: 0 0 1.4rem; }
.pgx-term { padding: .95rem 0 1rem; border-top: 1px dotted rgba(var(--rule), .5); scroll-margin-top: calc(var(--pg-hd, 4.85rem) + 1rem); }
.pgx-term:last-child { border-bottom: 1px dotted rgba(var(--rule), .5); }
.pgx-term dt { font: 400 1.36rem/1.25 'IM Fell English', serif; color: var(--display-ink); }
.pgx-also { margin-left: .35em; font: italic .98rem/1.3 'IM Fell English', serif; color: var(--ink-soft); }
.pg .pgx-term dd { max-width: 34rem; margin: .35rem 0 0; font: 500 1.08rem/1.66 'Cormorant Garamond', var(--font-serif); color: var(--ink); hyphens: auto; -webkit-hyphens: auto; }
.pg .pgx-see {
  display: inline-block; margin-left: .25em; padding: .55rem 0; font: 600 .8rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .12em;
  color: var(--cc-red); text-decoration: underline 1px rgba(var(--rule), .6); text-underline-offset: .35em;
}
.pg .pgx-see:hover { text-decoration-color: currentColor; }

/* ═══════════ The florilège ═══════════
   Each quotation as the story's margin sets it — italic Fell, the source in small capitals under it —
   then its reference and its translation in two ruled rows. */
.pgx-flori { list-style: none; margin: 1.6rem 0 1.4rem; padding: 0; }
.pgx-q { margin: 0 0 2.4rem; scroll-margin-top: calc(var(--pg-hd, 4.85rem) + 1rem); }
.pgx-q figure { margin: 0; }
.pgx-q blockquote { margin: 0; padding: 0 0 0 1.15rem; border-left: 1px solid var(--rubric); }
.pg .pgx-q blockquote p { max-width: 32rem; margin: 0; font: italic 400 clamp(1.22rem, 1.5vw, 1.38rem)/1.42 'IM Fell English', serif; color: var(--display-ink); text-wrap: pretty; }
.pgx-q figcaption { margin: .6rem 0 0 1.15rem; font: 600 .8rem/1.5 'Cormorant SC', var(--font-caps); letter-spacing: .1em; color: var(--cc-red); }
.pgx-q figcaption i { font-family: 'IM Fell English', serif; font-size: 1.08em; letter-spacing: .02em; }
.pgx-q-m { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1rem; margin: .8rem 0 0 1.15rem; }
.pgx-q-m dt, .pg .pgx-q-m dd { padding: .4rem 0; border-top: 1px dotted rgba(var(--rule), .45); }
.pgx-q-m dt { font: 600 .74rem/1.6 'Cormorant SC', var(--font-caps); letter-spacing: .14em; color: var(--ink-soft); }
.pg .pgx-q-m dd { margin: 0; font: 500 .98rem/1.55 'Cormorant Garamond', var(--font-serif); color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .pgx-q-m { grid-template-columns: minmax(0, 1fr); }
  .pg .pgx-q-m dd { border-top: 0; padding-top: 0; }
}

/* printed: the text alone, black on white, as the legal page prints */
@media print {
  body:is(.pgx--pratique, .pgx--glossaire, .pgx--florilege) { background: #fff; }
  :is(.pgx--pratique, .pgx--glossaire, .pgx--florilege) :is(.site-header, .rail, .driftfall, .cursor, .pgx-side, .pgx-others, .pg-folio, .pgx-tail, .pg-colophon, .skip-link, .pg-actions) { display: none !important; }
  :is(.pgx--pratique, .pgx--glossaire, .pgx--florilege) .pgx-leaf { margin: 0; background: #fff; }
  :is(.pgx--pratique, .pgx--glossaire, .pgx--florilege) .pgx-leaf::before { content: none; }
  :is(.pgx--pratique, .pgx--glossaire, .pgx--florilege) .reveal { opacity: 1 !important; transform: none !important; }
  :is(.pgx--pratique, .pgx--glossaire, .pgx--florilege) :is(p, dd, dt, li, h1, h2, h3, blockquote, figcaption) { color: #000 !important; }
  :is(.pgx--pratique, .pgx--glossaire, .pgx--florilege) .pgx-part { break-before: auto; }   /* the legal page starts each part on a new sheet; these run on */
}