/* ═══════════════════════════════════════════════════════════════
   Le Folio — the page below the story (the rest of the notebook)
   Loaded after folio.css by folio.html only; the behaviour is
   js/folio-page.js. Everything here is scoped to .pg, .pg-colophon,
   body[data-marks="folio"], html.page-under or body.narrative-done, so
   the story above is never restyled.

   The page re-traces the story's triangle, square and circle in
   practical terms: what is taught, how to begin, where, and how to
   sign up. As in folio.css there is no filter and no blend mode, and
   what moves is moved by transform or opacity alone. Nothing below the
   story is promoted to a layer ahead of time: a page this long would
   hold its layers for no gain.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════ Tokens ═══════════ */
.pg {
  --pg-max: 76rem;
  --pg-pad: clamp(4.5rem, 10vh, 7.5rem);            /* a section's padding-block */
  --pg-rh: clamp(1.02rem, 1.3vw, 1.25rem);          /* the running head */
  --pg-display: clamp(2.15rem, 4.2vw, 4rem);        /* the section's sentence */
  --pg-lede: clamp(1.12rem, 1.3vw, 1.32rem);
  --pg-body: clamp(1.04rem, 1.1vw, 1.12rem);
  --pg-gap: clamp(1.5rem, 2.6vw, 2.6rem);           /* the column gap of every grid */
  --cc-red: #86321d;       /* rubric for SMALL text: about 5.9:1 on #e8d7ad, 4.8 on the darkest paper #d8c091 (#8f3620 was 4.37 there) */
  --mount: #e8d7ad;        /* deckle.webp's flat paper */
  --desk-ink: #efe4c8;     /* paper-coloured ink on the desk: 5.18:1 on #6f5a3e */
  /* the leaf, a shade lighter than main.css's .page and flat: the torn strips were cut for .2 at the top */
  --paper-light: linear-gradient(rgba(255, 250, 235, .2), rgba(255, 250, 235, .2));
}
html[data-theme="dark"] .pg, html[data-theme="dark"] .pg-colophon { --cc-red: var(--sanguine); --mount: #171310; --desk-ink: #e6d6b4; }
.pg-colophon { --desk-ink: #efe4c8; --pg-max: 76rem; }
@media (max-width: 860px) { .pg { --pg-pad: clamp(3.8rem, 9vh, 5rem); } }
@media (max-width: 380px) { .pg { --pg-display: 2rem; } }
/* main.css's radial ground turns into side bands on an element twelve thousand
   pixels tall; at night the leaf is kept flat instead */
html[data-theme="dark"] .page.pg {
  background: url("../assets/img/grain-dark.webp") 0 0 / 256px 256px repeat,
              url("../assets/img/drift-dark.webp") 0 0 / 1100px 1100px repeat;
  background-color: var(--paper);
}
/* the skip link moves focus to the page itself; the page needs no ring for it */
.pg:focus { outline: none; }

/* ═══════════ The passage: the leaf rises from the desk ═══════════
   The stage's own ground is the desk, so once it fades at narrative-done what
   shows above the page's torn top edge is the same desk — never a tear between
   two identical papers. */
body[data-marks="folio"] { background: var(--desk); }
/* Once the leaf lies under the header (or the colophon does), the faded stage
   is wholly covered, yet at opacity 0 its drawing was still layerized and
   painted under every frame of the page (on a phone at 4x CPU, 23 fps with it
   against 40 without). Its contents are skipped instead: the body behind it is
   the same desk, folio.js can still measure it (a query lays the skipped
   part out on demand), and unlike
   visibility, which restyled all 1,500 of its elements each time it flipped
   (55–115ms at 4x), skipping them flips in a few milliseconds. */
html:is(.page-under, .colo-under) body.narrative-done .stage { content-visibility: hidden; }

/* ═══════════ The header over the page ═══════════
   Three states. In the story the story's rules hold (html.on-desk at the
   opening and the close). With the page under the header (html.page-under, set
   by js/folio-page.js from an observer) it sits on an opaque strip of paper in
   ordinary ink, whatever a stale on-desk says. With the desk under it — while
   the page rises, and over the colophon — it has no ground and takes the
   desk's paper ink. The header never changes size between them, so nothing
   jumps as the tear passes beneath it. */
html.page-under .site-header::before {
  opacity: 1; transition: opacity .35s var(--ease-out);
  background: url("../assets/img/grain-light.webp") 0 0 / 256px 256px, linear-gradient(rgba(255, 250, 235, .2), rgba(255, 250, 235, .2)), var(--paper);
  border-bottom: 1px solid rgba(var(--rule), .32);
}
html[data-theme="dark"].page-under .site-header::before { background: url("../assets/img/grain-dark.webp") 0 0 / 256px 256px, var(--paper); }
html:not(.page-under) body.narrative-done .site-header::before { opacity: 0; }
html:not(.page-under) body.narrative-done :is(.site-nav > a:not(.btn), .logo-studio, .logo-etre, .logo-tagline, .lang-switch, .lang-switch a, .lang-switch span, .theme-toggle, .nav-toggle) {
  color: #efe4c8; border-color: rgba(239, 228, 200, .45); text-shadow: none;
}
html.on-desk:not(.page-under) .nav-toggle span, html:not(.page-under) body.narrative-done .nav-toggle span { background: #efe4c8; }
/* the language links carry their own ink in main.css, so on the desk they are named too */
html.on-desk:not(.page-under) :is(.lang-switch a, .lang-switch span) { color: #efe4c8; }

/* "Commencer" is a sepia cartouche on the whole folio page, story included:
   one voice from the first leaf to the last, never a pill and never gold */
body[data-marks="folio"] .site-nav > a.btn-solid, body[data-marks="folio"] .site-nav > a.btn-solid:hover {
  background: var(--sepia); color: var(--paper-lit); border: 0; border-radius: 2px; box-shadow: none;
  padding: .55rem 1.15rem .5rem; font-size: .8rem; letter-spacing: .14em; transition: transform .35s var(--ease-out);
}
html.on-desk:not(.page-under) body[data-marks="folio"] .site-nav > a.btn-solid,
html:not(.page-under) body[data-marks="folio"].narrative-done .site-nav > a.btn-solid { background: #efe4c8; color: #3a2a18; }   /* 10.9:1 */
body[data-marks="folio"] .site-nav > a:not(.btn)::after { background: var(--rubric); }       /* the hover rule, in rubric rather than olive */

/* the phone's menu: opaque, unblurred, and its links always in ink inside the
   panel (which also mends cream links on a cream panel at the opening) */
@media (max-width: 860px) {
  body[data-marks="folio"] .site-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(var(--halo-rgb), .97); }
  body[data-marks="folio"] .site-nav > a:not(.btn) { color: var(--ink-soft) !important; text-shadow: none; }
  body[data-marks="folio"] .site-nav > a.btn-solid { background: var(--sepia) !important; color: var(--paper-lit) !important; }
}

/* ═══════════ The rail and the falling signs below the story ═══════════
   On a phone the rail crossed photographs and text, and the signs fell over
   what is to be read: both stand down once the story is over. */
@media (max-width: 860px) {
  body[data-marks="folio"].narrative-done .rail { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
  body[data-marks="folio"].narrative-done .driftfall { display: none; }
  /* Hidden, the rail was still written to by page.js at every scroll (its seal,
     fill and caption), and each write sent the whole page back to be
     layerized: once the leaf covers the screen its contents are skipped too
     (at 4x CPU, 43 fps with them and 51 without). A measure of the track, on a
     resize, still lays it out on demand. */
  html:is(.page-under, .colo-under) body[data-marks="folio"].narrative-done .rail { content-visibility: hidden; }
}
html body[data-marks="folio"].narrative-done .driftfall.currents { opacity: .55; transition: opacity .6s; }
/* On a wide screen the rail stays, but below the story its reader's seal is
   no longer gilded and its line is no longer olive: the page keeps a single
   gold point per screen, the one at the door or at the nib, so the rail's
   point is handed over to the page and inked in sepia like the drawings. */
@media (min-width: 861px) {
  body[data-marks="folio"].narrative-done .rail-seal { background: var(--sepia); box-shadow: 0 0 0 2px rgba(var(--halo-rgb), .85); }
  body[data-marks="folio"].narrative-done .rail-seal:focus-visible { outline-color: var(--rubric); }
  body[data-marks="folio"].narrative-done .rail-fill { background: var(--sepia); }
  body[data-marks="folio"].narrative-done .rail-caption { color: var(--ink-soft); }
  body[data-marks="folio"].narrative-done .rail-mark:hover { background: var(--rubric); }
}
/* The rail's marks are buttons, but main.css shows them only on hover or while the rail is held: a reader
   on the keyboard tabbed through a row of invisible stops (nine on the Agora). While the focus is anywhere
   in the rail its marks stand as they do on hover, each with its own name beside it, and the one in hand
   is inked in the rubric with its name ringed. The ring is drawn round the name rather than the tick: the
   tick sits ten pixels from the screen's edge, and a ring round it lost its right side off the screen.
   Set here because main.css is shared with the live site. */
body[data-marks="folio"] .rail:focus-within .rail-mark { opacity: 1; }
body[data-marks="folio"] .rail-mark:focus-visible { outline: none; background: var(--rubric); }
body[data-marks="folio"] .rail-mark:focus-visible span { color: var(--ink); outline: 2px solid var(--rubric); outline-offset: 3px; }

/* ═══════════ The lightbox, restyled (page.js behaviour unchanged) ═══════════ */
body[data-marks="folio"] .lightbox, html[data-theme="dark"] body[data-marks="folio"] .lightbox { background: rgba(26, 19, 12, .95); }
body[data-marks="folio"] .lightbox .lb-caption {
  font: italic 1.05rem/1.45 'IM Fell English', serif; font-variant: normal; letter-spacing: 0; color: #efe4c8;
}
body[data-marks="folio"] .lightbox :is(.lb-close, .lb-nav) {
  border: 1px solid rgba(239, 228, 200, .4); color: #efe4c8; font-family: 'IM Fell English', serif; transition: background .3s;
}
body[data-marks="folio"] .lightbox :is(.lb-close, .lb-nav):hover { background: rgba(239, 228, 200, .12); border-color: rgba(239, 228, 200, .4); transform: none; }
body[data-marks="folio"] .lightbox :is(.lb-close, .lb-nav):focus-visible { outline: 1.5px dashed #efe4c8; outline-offset: 3px; }

/* ═══════════ The grid and the section box ═══════════ */
.pg-wrap { width: min(var(--pg-max), 100% - 2 * var(--edge-pad)); margin-inline: auto; }
/* no hairlines between sections: the running head is what separates them */
.pg-sec {
  position: relative; padding-block: var(--pg-pad);
  scroll-margin-top: max(0px, calc(var(--pg-hd, 5.6rem) + 1.25rem - var(--pg-pad)));
}

/* ═══════════ Type roles ═══════════
   Body text is set with :where() so that it weighs nothing and every role
   below, one class strong, replaces it without a fight. Cormorant at 500: 400
   is too thin on the aged paper. */
:where(.pg) p, :where(.pg) dd, :where(.pg) li { font: 500 var(--pg-body)/1.66 'Cormorant Garamond', var(--font-serif); color: var(--ink); }
:where(.pg) p { max-width: 38rem; }
:where(.pg) :is(p, dd, li) a:not([class]) {
  color: inherit; text-decoration: underline 1px rgba(var(--rule), .6); text-underline-offset: .22em; border: 0;
}
:where(.pg) :is(p, dd, li) a:not([class]):hover { color: var(--cc-red); text-decoration-color: currentColor; }

/* The running head is the section's h2. The words alone are centred: the
   glyph hangs outside them, and the letter-spacing trailing the last letter is
   balanced by the same amount of padding before the first. */
.pg-rh {
  position: relative; display: table; margin: 0 auto 1rem; padding-left: .26em; letter-spacing: .26em;
  font: 500 var(--pg-rh)/1.2 'Cormorant SC', var(--font-caps); color: var(--ink);
}
.pg-rh .pg-mk {
  position: absolute; right: calc(100% + .7em); top: 50%; width: 1.25em; height: 1.25em; margin-top: -.64em;
  stroke: var(--rubric); stroke-width: 1.4;
}
.pg-rh.al { margin-left: 0; }                 /* a left-set section: the glyph hangs into the gutter */
/* a left-set head needs no balancing padding: its words start on the column
   edge, flush with the sentence beneath (the Agora's head is centred until
   1024, so it keeps its padding there) */
@media (min-width: 861px) { .pg-rh.al { padding-left: 0; } }
@media (min-width: 861px) and (max-width: 1023px) { .pg-agora-text .pg-rh.al { padding-left: .26em; } }
.pg-mk { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

.pg-display {
  margin: 0 auto 1.2rem; max-width: 16em; text-align: center; text-wrap: balance;
  font: 400 var(--pg-display)/1.08 'IM Fell English', serif; letter-spacing: .005em; color: var(--display-ink);
}
.pg-display::first-letter { color: var(--rubric); }
.pg-display.al { margin-left: 0; text-align: left; }
.pg-lede { max-width: 40rem; margin: 0 0 1.4rem; font: 500 var(--pg-lede)/1.6 'Cormorant Garamond', var(--font-serif); color: var(--ink-soft); }
.pg-lede.pg-c { margin-inline: auto; text-align: center; }
.pg-k { margin: 0 0 .9rem; font: 600 .8rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .2em; color: var(--cc-red); }
.pg-cap { margin-top: .8rem; max-width: 30rem; font: italic .98rem/1.45 'IM Fell English', serif; color: var(--ink-soft); text-wrap: pretty; }   /* no one-word last line */
.pl-n { margin-right: .35em; font: normal 600 .74rem/1 'Cormorant SC', var(--font-caps); letter-spacing: .16em; color: var(--cc-red); }
/* the plate number is the smallest rubric on the page, and under a laid sheet
   its ground is the sheet's shadow: by day it takes a deeper red to keep 4.5:1
   (the night's rubric already clears it) */
html:not([data-theme="dark"]) .pg .pl-n { color: #80301b; }
.pg-folio {
  position: absolute; right: calc(var(--rail-gutter) + 1.6vw); bottom: 1.4rem; margin: 0;
  font: italic .92rem/1 'IM Fell English', serif; color: var(--ink-soft);
}
@media (max-width: 860px) {
  .pg-rh.al { margin-left: auto; }
  .pg-display.al, .pg-lede.al { text-align: center; margin-inline: auto; }
  .pg-folio { display: none; }
}

/* the gold point: the reader's attention, the one gilded thing on the page
   (the same gradient as the story's .pt-core), in two places only */
.pg-pt {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fffae6 0%, #f2d271 38%, #c99a32 72%, #8a6418 100%);
  box-shadow: 0 0 0 .5px rgba(90, 60, 10, .55), 0 0 10px 2px rgba(242, 210, 113, .35);
}

/* ═══════════ The paper objects: three kinds, each with one meaning ═══════════ */

/* (a) a deckled loose sheet — a thing laid on the page (the chapter card's
   recipe). The tilt sits on the figure, never on the .reveal wrapper, because
   main.css takes every transform off .reveal for coarse pointers. */
.pg-deckle { margin: 0; position: relative; transform: rotate(var(--tilt, 0deg)); }
.pg-deckle .pg-sheet {
  position: relative; padding: 2.1rem;                               /* more than the 24px of flat paper the fringe overlaps */
  background: url("../assets/img/grain-light.webp") 0 0 / 256px 256px, var(--mount);
}
.pg-deckle .pg-sheet::before {
  content: ""; position: absolute; inset: -40px; z-index: 2; pointer-events: none;
  border: 64px solid transparent; border-image: url("../assets/img/deckle.webp") 64 / 64px / 0 round;   /* 64: smaller brings back hairlines */
}
.pg-deckle .pg-sheet::after {
  content: ""; position: absolute; inset: 10px 4px -8px; z-index: -1; pointer-events: none;
  box-shadow: 0 18px 40px rgba(var(--shade), .22), 0 3px 9px rgba(var(--shade), .12);
}
/* the caption stands clear of the sheet's drop shadow, which would darken its ground */
.pg-deckle .pg-cap { margin-top: 1.4rem; padding-inline: .4rem; }
html[data-theme="dark"] .pg-deckle .pg-sheet { background-image: url("../assets/img/grain-dark.webp"); }
html[data-theme="dark"] .pg-deckle .pg-sheet::before { border-image-source: url("../assets/img/deckle-dark.webp"); }

/* (b) a printed plate — an inked frame that costs no layout, and a tissue guard */
.pg-print { margin: 0; position: relative; }
.pg-print .pg-sheet { position: relative; }
.pg .shot { cursor: pointer; }
.pg .pg-print .shot, .pg .pg-deckle .shot { border-radius: 0; box-shadow: none; }        /* main.css's rounded, shadowed card, undone */
.pg .pg-print .shot { outline: 1px solid rgba(var(--rule), .45); outline-offset: 6px; }
.pg .pg-print .shot:hover { transform: translateY(-2px); box-shadow: none; outline-color: rgba(154, 58, 32, .6); }
.pg .pg-deckle .shot:hover { transform: none; box-shadow: none; }
.pg .shot:hover img { transform: none; }                                                 /* photographs do not zoom */
.pg .pg-print .shot:focus-visible, .pg .pg-deckle .shot:focus-visible { outline: 1.5px dashed var(--rubric); outline-offset: 6px; }
/* the tissue guard: vellum over the plate that lifts as it arrives (fine pointers, motion allowed, wide screens) */
.pg-guard { display: none; }
@media (min-width: 861px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pg-guard {
    display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: url("../assets/img/vellum.webp") 0 0 / 512px 512px; opacity: .82;
    transition: opacity 1.1s var(--ease-out) .25s, transform 1.1s var(--ease-out) .25s;
  }
  html[data-theme="dark"] .pg-guard { background-image: url("../assets/img/vellum-dark.webp"); }
  .pg-plate-w.in .pg-guard { opacity: 0; transform: translateY(-12%); }
  html:not(.js) .pg-guard { display: none; }
}

/* (c) a vellum slip — a note pinned in the margin (the calque's recipe) */
.pg-vellum {
  position: relative; border: 48px solid transparent; margin: -26px;
  border-image: url("../assets/img/vellum-edge.webp") 48 / 48px / 0 round;
  background: url("../assets/img/vellum.webp") 0 0 / 512px 512px repeat padding-box;
}
.pg-vellum > :first-child { margin-top: -1rem; }       /* the 48px border already pads it */
.pg-vellum > :last-child { margin-bottom: -1rem; }
html[data-theme="dark"] .pg-vellum { border-image-source: url("../assets/img/vellum-edge-dark.webp"); background-image: url("../assets/img/vellum-dark.webp"); }
/* A phone's gutter is 19px, so the slip's 26px overhang would reach past the
   screen and Chrome would widen the layout viewport to hold it, letting the
   whole page, story included, be panned sideways. It overhangs by less here. */
@media (max-width: 860px) { .pg-vellum { margin-inline: -12px; } }

/* the ink leader: a hand-drawn line from a slip to what it annotates (two on the page) */
.pg-leader { position: absolute; width: 70px; height: 44px; overflow: visible; pointer-events: none; }
.pg-leader path { fill: none; stroke: var(--sepia); stroke-width: 1; opacity: .7; }
.pg-leader circle { fill: var(--sepia); opacity: .7; }
@media (max-width: 1023px) { .pg-leader { display: none; } }

/* ═══════════ Buttons and links: no pills anywhere ═══════════ */
.pg-btn {
  display: inline-flex; align-items: center; gap: .8rem; min-height: 3rem; padding: .85rem 1.6rem .8rem;
  border: 0; border-radius: 2px; background: var(--sepia); color: var(--paper-lit);          /* 9.78:1 light, 11.6:1 dark: the tokens flip */
  font: 600 .92rem/1 'Cormorant SC', var(--font-caps); letter-spacing: .14em; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 3px var(--sepia), inset 0 0 0 4px rgba(var(--halo-rgb), .28);   /* a cartouche's inner rule */
  transition: transform .3s var(--ease-out);
  text-align: center; text-wrap: balance;       /* a label that must wrap does so in even, centred lines */
}
.pg-btn:hover { transform: translateY(-1px); }
.pg-arr { display: inline-block; transition: transform .3s var(--ease-out); }
:is(.pg-btn, .pg-seal-btn):hover .pg-arr { transform: translateX(4px); }
.pg-link {
  display: inline-block; padding: .6rem 0; background: none; border: 0; cursor: pointer;
  font: 600 .9rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .16em; color: var(--ink);
  text-decoration: underline 1px rgba(var(--rule), .6); text-underline-offset: .42em; text-wrap: pretty;
}
.pg-link:hover { color: var(--cc-red); text-decoration-color: currentColor; }                /* instant: no colour transition */
/* a finger's target: the link's box is 38px, and its hit area reaches 46px
   without moving a thing (the fiche's links, with less padding, reach 45px) */
.pg-link { position: relative; }
.pg-link::after { content: ""; position: absolute; inset: -4px 0; }
.pg-fiche dd .pg-link::after { inset: -5px 0; }
.pg :is(a, button, summary, input, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 1.5px dashed var(--rubric); outline-offset: 3px; border-radius: 2px; }
.pg-colophon :is(a, button):focus-visible { outline: 1.5px dashed var(--desk-ink); outline-offset: 3px; border-radius: 2px; }

/* ═══════════ Motion: transform and opacity only ═══════════
   page.js's observer adds .in with a 70ms stagger among siblings; there are no
   scroll listeners and nothing loops below the story. */
.js .pg .reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); clip-path: none; }
.js .pg .reveal.in { opacity: 1; transform: none; }
@media (pointer: coarse) { .js .pg .reveal, .js .pg .reveal.in { transform: none; transition: opacity .45s ease; } }

/* ═══════════ 0 · Incipit — from the drawing to the practice (fol. vi) ═══════════ */
.pg-incipit { padding-top: calc(var(--pg-hd, 5.6rem) + clamp(2.5rem, 7vh, 4.5rem)); }
.pg-incipit .pg-display { font-size: clamp(2.15rem, 3.7vw, 3.6rem); max-width: 13em; }
.pg-incipit .pg-lede { max-width: 34rem; }
.pg-incipit-plate { max-width: 40rem; margin: 2.2rem auto 0; }
.pg-toc { margin-top: clamp(2.2rem, 5vh, 3.4rem); }
.pg-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(var(--rule), .28); }
.pg-toc li { margin: 0; }
/* the row is one link and a grid, so the running text's underline would be
   drawn three times, under the title, the gloss and the folio; the rule is
   named with .pg to outweigh the in-text link rule above, and only the title
   answers the hover */
.pg .pg-toc a {
  display: grid; grid-template-columns: 1.5rem auto 1fr auto; grid-template-areas: "mk t l f" ". g g .";
  column-gap: .7rem; align-items: baseline; padding: .55rem 0; min-height: 44px; color: var(--ink); text-decoration: none;
}
.pg .pg-toc a:hover { color: var(--ink); }
.pg-toc .pg-mk { grid-area: mk; width: 1.1em; height: 1.1em; align-self: center; stroke-width: 1.4; color: var(--ink-soft); }
.pg-toc-t { grid-area: t; font: 600 1rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .14em; color: var(--ink); transition: transform .3s var(--ease-out); }
.pg-toc-g { grid-area: g; font: italic .95rem/1.35 'IM Fell English', serif; color: var(--ink-soft); }
.pg-toc-l { grid-area: l; height: 3px; align-self: end; margin-bottom: .45em; background: radial-gradient(circle, rgba(var(--rule), .6) 1px, transparent 1.2px) 0 50% / 6px 3px repeat-x; }
.pg-toc-f { grid-area: f; font: italic .92rem/1 'IM Fell English', serif; color: var(--ink-soft); }
.pg-toc-go .pg-toc-t, .pg-toc a:hover .pg-toc-t { color: var(--cc-red); }
.pg-toc a:hover .pg-mk { color: var(--rubric); }
.pg-toc a:hover .pg-toc-t { transform: translateX(2px); }
@media (min-width: 1024px) {
  .pg-incipit-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--pg-gap); }
  .pg-incipit-text { grid-column: 1 / 7; grid-row: 1; align-self: center; }
  .pg-incipit-plate { grid-column: 7 / 13; grid-row: 1; align-self: start; max-width: none; margin: .6rem 0 0; }
  .pg-toc { grid-column: 1 / -1; grid-row: 2; }
  .pg-toc ol { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: 4rem; }
}
@media (max-width: 860px) {
  .pg-incipit { padding-top: calc(var(--pg-hd, 5rem) + 2rem); }
  /* one column: kicker, sentence, the plate as a torn band, its caption, the lede, the contents */
  .pg-incipit-grid { display: flex; flex-direction: column; }
  .pg-incipit-text { display: contents; }
  .pg-incipit-text .pg-k { order: 1; text-align: center; }
  .pg-incipit-text .pg-display { order: 2; }
  .pg-incipit-plate { order: 3; margin: .6rem 0 1.8rem; max-width: none; }
  .pg-incipit-text .pg-lede { order: 4; }
  .pg-toc { order: 5; margin-top: 1rem; }
  .pg-toc .pg-k { text-align: center; }
  .pg .pg-toc a { grid-template-areas: "mk t l f"; align-items: center; }
  .pg-toc-g { display: none; }
}

/* ═══════════ 1 · Les pratiques — three doors (fol. vii) ═══════════ */
.pg-practices .pg-lede { margin-bottom: 0; }

/* the doors index: the story's triangle, its sides the three doors */
.pg-doors { --dw: min(24rem, 70vw); position: relative; width: var(--dw); margin: 2.6rem auto 0; }
.pg-doors-fig { display: block; width: 100%; height: auto; overflow: visible; }
.pg-scored { fill: none; stroke: rgba(var(--metalpoint), .35); stroke-width: 1; stroke-dasharray: 2 6; }
.pg-side { stroke: var(--sepia); stroke-width: 1.6; stroke-linecap: round; }
.pg-side-hl { stroke: var(--rubric); stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .35s; }
.pg-pt-g { transform: translate(300px, 312px); transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.pg-doors[data-lit="corps"] .pg-pt-g { transform: translate(180px, 241px); }
.pg-doors[data-lit="mental"] .pg-pt-g { transform: translate(420px, 241px); }
.pg-doors[data-lit="souffle"] .pg-pt-g { transform: translate(300px, 454px); }
.pg-doors[data-lit="corps"] .s-corps, .pg-doors[data-lit="mental"] .s-mental, .pg-doors[data-lit="souffle"] .s-souffle { opacity: 1; }
.pg-door-l { display: inline-flex; flex-direction: column; min-height: 44px; padding: .5rem .2rem; text-decoration: none; line-height: 1.25; }
.pg-door-l .pg-sk { font: 600 1.02rem/1.25 'Cormorant SC', var(--font-caps); letter-spacing: .12em; color: var(--cc-red); }
.pg-door-l em { font: italic 1.02rem/1.25 'IM Fell English', serif; color: var(--ink); }
.pg-door-l:hover :is(.pg-sk, em), .pg-door-l:focus-visible :is(.pg-sk, em) { color: var(--rubric); }
.pg-doors-hint { margin: 3.4rem auto 0; text-align: center; font: italic .95rem/1.4 'IM Fell English', serif; color: var(--ink-soft); }
@media (min-width: 861px) {
  /* the labels beside the left side, the right side and the base; the tops are
     reckoned on the figure's own height (.9 of its width), not on the hint below */
  .pg-door-l { flex-direction: row; align-items: baseline; gap: .45em; white-space: nowrap; }
  .l-corps { position: absolute; right: calc(70% + 1.4rem); top: calc(var(--dw) * .9 * .446 - 1.4rem); }
  .l-mental { position: absolute; left: calc(70% + 1.4rem); top: calc(var(--dw) * .9 * .446 - 1.4rem); }
  .l-souffle { position: absolute; left: 50%; top: calc(var(--dw) * .9 * .841 + .2rem); transform: translateX(-50%); }
}
/* the first arrival: the point makes one tour of the doors while each side lights in turn;
   fill-mode backwards, never both, so hover and focus take over once it is done */
@media (prefers-reduced-motion: no-preference) {
  .pg-doors.in .pg-pt-g { animation: pg-tour 3.2s cubic-bezier(.45, .05, .3, 1) .6s 1 backwards; }
  .pg-doors.in .s-corps { animation: pg-lit-a 3.2s linear .6s 1; }
  .pg-doors.in .s-mental { animation: pg-lit-c 3.2s linear .6s 1; }
  .pg-doors.in .s-souffle { animation: pg-lit-b 3.2s linear .6s 1; }
}
@keyframes pg-tour {
  0%, 8% { transform: translate(300px, 312px); } 24%, 32% { transform: translate(180px, 241px); }
  48%, 56% { transform: translate(300px, 454px); } 72%, 80% { transform: translate(420px, 241px); } 100% { transform: translate(300px, 312px); }
}
@keyframes pg-lit-a { 0%, 20% { opacity: 0; } 26%, 32% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes pg-lit-b { 0%, 44% { opacity: 0; } 50%, 56% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes pg-lit-c { 0%, 68% { opacity: 0; } 74%, 80% { opacity: 1; } 88%, 100% { opacity: 0; } }

/* each door: a spread — the door and its plate on the left, its practices on the right */
.pg-door { margin-top: clamp(4rem, 9vh, 6rem); scroll-margin-top: calc(var(--pg-hd, 5.6rem) + 1.5rem); }
.pg-door-mk { display: block; width: 44px; height: 44px; margin-bottom: .7rem; overflow: visible; }
.pg-door-mk .b { fill: none; stroke: var(--sepia); stroke-width: 1.2; stroke-linejoin: round; }
.pg-door-mk .hot { stroke: var(--rubric); stroke-width: 2.4; stroke-linecap: round; }
.pg-door-t { margin: 0 0 .8rem; font: italic 400 clamp(1.9rem, 2.8vw, 2.6rem)/1.1 'IM Fell English', serif; color: var(--display-ink); }
.pg .pg-door-intro { margin: 0 0 1.8rem; font: 500 1.1rem/1.6 'Cormorant Garamond', var(--font-serif); color: var(--ink-soft); }
.pg-door-sub { margin-bottom: .2rem; }

/* the practices: main.css's .feature card, undone into glossary rows. The
   undoing leaves the border and the padding alone: written this strongly, it
   would also take away the row's own hairline and air below, and each
   benefit line would run into the next practice's name. */
html .pg .feature { background: none; border-radius: 0; box-shadow: none; transform: none !important; transition: opacity .8s var(--ease-out); }
html .pg .feature::before, html .pg .feature::after { content: none; }
html[data-theme] .pg .feature { background: none; box-shadow: none; }
.pg .pg-practice {
  display: grid; grid-template-columns: 12.5rem 1fr; column-gap: 2rem; row-gap: 0;
  grid-template-areas: "name text" "lede text" "start text" ". gain"; align-content: start;
  padding: 1.5rem 0; border: 0; border-top: 1px solid rgba(var(--rule), .28);
}
.pg .pg-door-sub + .pg-practice, .pg .pg-door-list > .pg-practice:first-child, .pg .pg-door-list > .pg-plate-w + .pg-practice { border-top: 0; }
.pg .pg-practice h3 { grid-area: name; margin: 0; font: 600 1.24rem/1.25 'Cormorant SC', var(--font-caps); letter-spacing: .07em; color: var(--ink); }
.pg .pg-practice h3::first-letter { color: var(--rubric); }
.pg .pg-practice .feature-lede { grid-area: lede; margin: .25rem 0 0; font: italic 1rem/1.4 'IM Fell English', serif; font-variant: normal; letter-spacing: 0; color: var(--ink-soft); }
.pg .pg-practice .pg-start { grid-area: start; margin: .5rem 0 0; font: 600 .74rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .16em; color: var(--cc-red); }
.pg .pg-practice > p:not([class]) { grid-area: text; margin: 0; font: 500 var(--pg-body)/1.66 'Cormorant Garamond', var(--font-serif); color: var(--ink); }
.pg .pg-practice .feature-benefit { grid-area: gain; margin: .55rem 0 0; padding: 0; border: 0; font: italic 500 1.04rem/1.55 'Cormorant Garamond', var(--font-serif); color: var(--ink) !important; }
.pg .pg-practice .feature-benefit::before { content: "\2767\00a0"; font-style: normal; color: var(--rubric); }
.pg .pg-practice-wide { grid-template-columns: 1fr; grid-template-areas: "name" "lede" "text"; row-gap: .2rem; border-top: 0; padding: .4rem 0 0; }
.pg .pg-practice-wide > p:not([class]) { margin-top: .6rem; }

@media (min-width: 1024px) {
  .pg-door { display: grid; grid-template-columns: minmax(16rem, 4fr) 8fr; column-gap: clamp(2rem, 4vw, 4.5rem); }
  .pg-door-side { position: sticky; top: calc(var(--pg-hd, 5.6rem) + 1.5rem); align-self: start; }
  .pg-door + .pg-door::before {
    content: "\2767"; grid-column: 1 / -1; justify-self: center; margin-bottom: 2.5rem;
    font: 1.1rem/1 'IM Fell English', serif; color: var(--rubric); opacity: .7;
  }
  .pg-door-list { padding-top: .2rem; }
  /* The two short doors carry their plate at the head of the list: with it on
     the pinned side, a door of one or two rows left a page of blank paper
     beside its plate. */
  .pg-door-list > .pg-plate-w { max-width: 30rem; margin-bottom: 2.4rem; }
  /* Nor is their side pinned: held at the top, their mark, title and two
     lines stood over a tall void beside the plate and its rows. A spread this
     short has nothing to scroll past, so the side sits level with the middle
     of the right page instead. */
  #porte-souffle .pg-door-side, #porte-mental .pg-door-side { position: static; align-self: center; }
}
@media (min-width: 861px) and (max-width: 1023px) {
  .pg-door .pg-plate-w { max-width: 30rem; }
  .pg-door-list > .pg-plate-w { margin-bottom: 2rem; }
  .pg-door-list { margin-top: 2.2rem; }
}
/* Beside the text a row is set with floats rather than the grid. In the grid
   the benefit had a row of its own under the whole left column, so beside a
   name with a two-line lede (Yogāsanas) it fell below that column, well
   under its own description, and read as detached from it. Floated, the name,
   the lede and the start stack on the left, and the benefit always follows
   its text. */
@media (min-width: 861px) {
  .pg .pg-practice:not(.pg-practice-wide) { display: flow-root; }
  .pg .pg-practice:not(.pg-practice-wide) :is(h3, .feature-lede, .pg-start) { float: left; clear: left; width: 12.5rem; }
  .pg .pg-practice:not(.pg-practice-wide) > p:not([class]), .pg .pg-practice:not(.pg-practice-wide) > .feature-benefit { margin-left: 14.5rem; }
}
@media (min-width: 861px) and (max-width: 1023px) {
  .pg .pg-practice:not(.pg-practice-wide) :is(h3, .feature-lede, .pg-start) { width: 11rem; }
  .pg .pg-practice:not(.pg-practice-wide) > p:not([class]), .pg .pg-practice:not(.pg-practice-wide) > .feature-benefit { margin-left: 13rem; }
}

/* "En marge": the ninth practice, on a vellum slip under the third door */
.pg-marge { position: relative; max-width: 40rem; margin: 4rem 0 0; }
.pg-marge .pg-k { margin-bottom: .5rem; }
.pg-marge-go { display: flex; flex-wrap: wrap; gap: 0 1.8rem; margin: .6rem 0 0; }
/* from the slip's top edge, up and to the left, to the Nāda row it follows (the last of the third door) */
.pg-marge .pg-leader { right: 5rem; top: -1.6rem; transform: scaleX(-1); }
@media (min-width: 1024px) { .pg-marge { margin-left: calc(33% + 2rem); } }

@media (max-width: 860px) {
  /* the columns read left side, base, right side: the figure's own order, and the doors' */
  .pg-doors {
    width: min(20rem, 100%); display: grid; grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "fig fig fig" "c s m" "h h h"; align-items: start;
  }
  .pg-doors-fig { grid-area: fig; width: 11rem; justify-self: center; }
  .pg-door-l { position: static; align-items: center; text-align: center; justify-self: center; margin-top: .6rem; }
  .l-corps { grid-area: c; } .l-mental { grid-area: m; } .l-souffle { grid-area: s; }
  .pg-doors-hint { grid-area: h; margin-top: 1rem; }

  .pg-door { margin-top: 3.6rem; }
  .pg-door-mk { width: 32px; height: 32px; margin: 0 auto .5rem; }
  .pg-door-side { text-align: center; }
  .pg-door-side .pg-k { text-align: center; }
  .pg-door-t { font-size: 1.9rem; }
  .pg .pg-door-intro { margin-inline: auto; }
  .pg-door-sub { margin-top: .4rem; }
  .pg .pg-practice { grid-template-columns: 1fr; grid-template-areas: "name" "lede" "start" "text" "gain"; padding: 1.2rem 0; }
  .pg .pg-practice > p:not([class]) { margin-top: .55rem; font-size: 1.04rem; line-height: 1.58; }
  .pg .pg-practice-wide { padding: .4rem 0 0; }        /* on the slip, straight under its kicker */
  .pg-marge { margin-top: 3.4rem; }
}

/* ═══════════ 2 · Le chemin — the square inked a side per step (fol. viii) ═══════════ */
.pg-path-fig { margin: 0; }
.pg-path-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.pg-path-fig .ps { stroke: var(--sepia); stroke-width: 2.2; stroke-linecap: round; transform-box: view-box; transition: transform 1s cubic-bezier(.3, .7, .2, 1); }
.pg-path-fig .ps-hl { stroke: var(--rubric); stroke-width: 3.2; stroke-linecap: round; opacity: 0; transform-box: view-box; transition: opacity .5s, transform 1s cubic-bezier(.3, .7, .2, 1); }
.pg-path-fig .ps1 { transform-origin: 40px 360px; transform: scaleX(0); }
.pg-path-fig .ps2 { transform-origin: 360px 360px; transform: scaleY(0); }
.pg-path-fig .ps3 { transform-origin: 360px 40px; transform: scaleX(0); }
.pg-path-fig .ps4 { transform-origin: 40px 40px; transform: scaleY(0); }
/* cumulative: a side once inked stays inked when the reader scrolls back */
.pg-path-fig.s1 .ps1, .pg-path-fig.s2 .ps2, .pg-path-fig.s3 .ps3, .pg-path-fig.s4 .ps4 { transform: none; }
.pg-path-fig[data-at="1"] .ps-hl.ps1, .pg-path-fig[data-at="2"] .ps-hl.ps2,
.pg-path-fig[data-at="3"] .ps-hl.ps3, .pg-path-fig[data-at="4"] .ps-hl.ps4 { opacity: 1; }
.pg-path-fig .pn { font: 22px 'IM Fell English', serif; fill: var(--rubric); text-anchor: middle; dominant-baseline: middle; opacity: .35; transition: opacity .5s; }
.pg-path-fig.s1 .pn1, .pg-path-fig.s2 .pn2, .pg-path-fig.s3 .pn3, .pg-path-fig.s4 .pn4 { opacity: 1; }

.pg-path-steps { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.pg-path-step { position: relative; }
.pg-path-step h3 { margin: 0 0 .5rem; font: 400 1.5rem/1.25 'IM Fell English', serif; color: var(--ink); }
.pg-path-num { font: 400 1.6rem/1 'IM Fell English', serif; color: var(--rubric); }
.pg-path-step p { max-width: 32rem; margin: 0; }
.pg-step-glyph { display: none; }
.pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; max-width: none; margin: 1rem 0 0; }
@media (min-width: 1024px) {
  .pg-how-grid { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(2.5rem, 5vw, 5rem); }
  .pg-path-fig { position: sticky; top: calc(50vh - min(13rem, 16vw)); align-self: start; width: min(26rem, 32vw); justify-self: center; }
  /* every step is given real time on screen */
  .pg-path-step { min-height: 36vh; padding: 1.2rem 0 2rem; }
  .pg-path-num { position: absolute; right: calc(100% + 1rem); top: 1.35rem; }
}
@media (min-width: 861px) and (max-width: 1023px) {
  .pg-path-fig { width: 18rem; margin: 0 auto 2rem; }
  .pg-path-step { padding: 1rem 0 1.6rem; }
  .pg-path-num { margin-right: .45em; }
}
@media (max-width: 860px) {
  .pg-path-fig { display: none; }
  /* The line that joins the glyphs is drawn in lengths between them, 4px clear
     of each: one line passing behind them needed a flat tile of paper under
     every glyph, which read as a pasted square on the grained leaf. */
  .pg-path-step { display: grid; grid-template-columns: 3.2rem 1fr; grid-template-rows: auto 1fr; padding: 1rem 0 1.4rem; }
  .pg-path-step:not(:last-child)::after {
    content: ""; position: absolute; left: 20px; top: calc(1rem + 44px); bottom: calc(-1rem + 4px); width: 1px;
    background: rgba(var(--rule), .35); pointer-events: none;
  }
  .pg-step-glyph { display: block; grid-column: 1; grid-row: 1 / 3; position: relative; width: 40px; height: 40px; }
  .pg-step-glyph line { stroke-linecap: round; }
  .pg-step-glyph .d { stroke: var(--sepia); stroke-width: 1.6; }
  .pg-step-glyph .c { stroke: var(--rubric); stroke-width: 2.2; }
  .pg-step-glyph .u { stroke: rgba(var(--metalpoint), .55); stroke-width: 1; stroke-dasharray: 2 3; }
  .pg-path-step h3 { grid-column: 2; font-size: 1.32rem; }
  .pg-path-step p { grid-column: 2; }
  .pg-path-num { margin-right: .4em; font-size: 1.2rem; }
  .pg-how .pg-actions { flex-direction: column; align-items: stretch; margin-top: 1.4rem; }
  /* full width, its label in one centred flow with the arrow bound to the
     last word (the markup leaves no space between them), so a label that
     takes two lines is centred as a whole rather than set flush left */
  .pg-how .pg-actions .pg-btn { display: block; padding-inline: 1.2rem; line-height: 1.35; }
  .pg-how .pg-actions .pg-btn .pg-arr { display: inline; margin-left: .5em; }
  .pg-how .pg-actions .pg-link { align-self: center; }
}

/* ═══════════ 3 · Planches (fol. ix) ═══════════ */
.pg .pg-note { max-width: 40rem; margin: 1rem auto 2.8rem; text-align: center; font: italic 1rem/1.5 'IM Fell English', serif; color: var(--ink-soft); }
.pg-plates { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3.2rem var(--pg-gap); }
.pg-plates > :nth-child(1), .pg-plates > :nth-child(2), .pg-plates > :nth-child(6), .pg-plates > :nth-child(7) { grid-column: span 3; }
.pg-plates > :nth-child(3), .pg-plates > :nth-child(4), .pg-plates > :nth-child(5) { grid-column: span 2; }
.pg-actions-c { justify-content: center; margin-top: 2.8rem; }
@media (max-width: 860px) {
  /* a native swipe row: no script and no arrows; the next plate peeks in by a tenth */
  .pg-plates {
    display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--edge-pad)); padding: 8px var(--edge-pad) 10px; scroll-padding-inline: var(--edge-pad); scrollbar-width: none;
  }
  .pg-plates::-webkit-scrollbar { display: none; }
  .pg-plates > .pg-plate-w { flex: 0 0 82vw; scroll-snap-align: start; }
  .pg-actions-c { flex-direction: column; gap: 0; margin-top: 1.6rem; }
}

/* ═══════════ 4 · Le lieu (fol. x) ═══════════ */
.pg-wide { max-width: 64rem; margin: 2.6rem auto 0; }
.pg .pg-wide .shot img { aspect-ratio: 1600 / 396; }
.pg-lieu-row { margin-top: 3.6rem; }
.pg-fiche { position: relative; }
.pg-fiche dl { margin: 0; }
.pg-fiche dt { margin: 0; font: 600 .78rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .18em; color: var(--cc-red); }
.pg .pg-fiche dd { margin: .2rem 0 1rem; font: 500 1.06rem/1.55 'Cormorant Garamond', var(--font-serif); color: var(--ink); }
.pg .pg-fiche dd:last-child { margin-bottom: 0; }
/* each link has a line of its own under its fact, so no separator is left
   hanging at a line's end and no arrow is parted from its words */
.pg-fiche dd .pg-link { display: table; margin-top: .15rem; padding: .5rem 0; }
.pg-fiche .pg-leader { right: -3.4rem; top: 40%; }
@media (min-width: 1024px) {
  .pg-lieu-row { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
}
@media (max-width: 1023px) {
  .pg-lieu-row > .pg-plate-w { max-width: 40rem; margin: 3.4rem auto 0; }
}
@media (max-width: 860px) {
  .pg .pg-wide .shot img { aspect-ratio: 2 / 1; object-position: 50% 50%; }   /* (3:2 kept a narrow slice of the panorama) */
  .pg-lieu-row { margin-top: 2.8rem; }
}

/* ═══════════ 5 · La recherche (fol. xi) ═══════════ */
.pg-ledger { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 66rem; margin: 3rem auto 0; }
.pg-obs { padding: 0 1.6rem; border-left: 1px solid rgba(var(--rule), .3); }
.pg-obs:first-child { border-left: 0; padding-left: 0; }
.pg-obs .obs-num { font: 400 clamp(2.6rem, 4vw, 3.6rem)/1 'IM Fell English', serif; color: var(--sepia); }
.pg-obs .obs-num::after { content: ""; display: block; width: 1.6rem; height: 1px; margin: .8rem 0 .9rem; background: var(--rubric); }
.pg .pg-obs .obs-label { margin: 0; font: 500 1.04rem/1.5 'Cormorant Garamond', var(--font-serif); color: var(--ink); }   /* the body's floor */
.pg .pg-obs .obs-src { margin: .5rem 0 0; font: 600 .76rem/1.4 'Cormorant SC', var(--font-caps); letter-spacing: .1em; color: var(--ink-soft); }
.pg-nota { max-width: 40rem; margin: 3.6rem auto 0; }
.pg .pg-nota p:not(.pg-k) { font-style: italic; font-size: 1.04rem; }
.pg-nota .pg-k { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
/* sanguine marks the caveat, and only the caveat */
.pg-sang { width: 3.2rem; height: .4rem; overflow: visible; fill: none; stroke: var(--sanguine); stroke-width: 1.4; stroke-linecap: round; }
/* the full column: the body's 38rem measure left it a box against the left edge, centred only inside itself */
.pg-voices-k { max-width: none; margin-top: 4.2rem; text-align: center; }
.pg-voices { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4rem; max-width: 64rem; margin: 1.6rem auto 0; }
.pg-voice { margin: 0; }
.pg-voice blockquote { position: relative; margin: 0; font: italic 1.16rem/1.55 'IM Fell English', serif; color: var(--ink); }
.pg-voice blockquote::before { content: "«"; position: absolute; left: -1.7rem; top: -.3rem; font: normal 3.1rem/1 'IM Fell English', serif; color: var(--rubric); opacity: .8; }
/* (an English page opens its voices with the English mark; Spanish keeps « », as the Spanish pages set quotations) */
.pg-voice blockquote:lang(en)::before { content: "“"; }
.pg-voice figcaption { margin-top: .8rem; font: 600 .8rem/1.4 'Cormorant SC', var(--font-caps); letter-spacing: .14em; color: var(--ink-soft); }
.pg-voice figcaption::before { content: "— "; }
.pg .pg-fine { max-width: 44rem; margin: 2.4rem auto 0; text-align: center; font: italic .9rem/1.55 'IM Fell English', serif; color: var(--ink-soft); }
@media (max-width: 860px) {
  .pg-ledger { grid-template-columns: 1fr 1fr; gap: 2rem 1.2rem; }
  .pg-obs, .pg-obs:first-child { padding: 0 0 0 1.1rem; border-left: 0; }
  .pg-obs:nth-child(odd) { padding-left: 0; }
  .pg-obs:nth-child(even) { border-left: 1px solid rgba(var(--rule), .3); }
  .pg-obs .obs-num { font-size: 2.3rem; }
  .pg-voices { grid-template-columns: 1fr; gap: 2.2rem; }
  .pg-voice blockquote::before { position: static; display: inline; margin-right: .2em; font-size: 2rem; line-height: 0; vertical-align: -.35em; }
}

/* ═══════════ 6 · L'Agora (fol. xii): the circle widens ═══════════ */
.pg-rings { margin: 0 auto; width: 100%; max-width: 24rem; }
.pg-rings svg { display: block; width: 100%; height: auto; overflow: visible; }
.pg-rings circle { fill: none; stroke: var(--sepia); transform-box: view-box; transform-origin: 220px 220px; }
.pg-rings .r1 { stroke-width: 1.4; }
.pg-rings .r2 { stroke-width: 1.1; opacity: .85; }
.pg-rings .r3 { stroke-width: 1; stroke-dasharray: 3 6; }       /* the circle opening outward */
.pg-rings .c { fill: var(--sepia); stroke: none; }
.pg-rings text { font: 20px 'IM Fell English', serif; fill: var(--rubric); text-anchor: middle; dominant-baseline: middle; }
@media (prefers-reduced-motion: no-preference) {
  .js .pg-rings:not(.in) :is(.r1, .r2, .r3) { opacity: 0; transform: scale(.9); }
  .pg-rings :is(.r1, .r2, .r3) { transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
  .pg-rings .r2 { transition-delay: .15s; } .pg-rings .r3 { transition-delay: .3s; }
}
.pg-agora-trio { list-style: none; margin: .6rem 0 0; padding: 0; max-width: 34rem; }
.pg .pg-agora-trio li { display: grid; grid-template-columns: 2.2rem auto 1fr; align-items: baseline; column-gap: .6rem; padding: .7rem 0; border-top: 1px solid rgba(var(--rule), .25); }
.pg .pg-agora-trio li:first-child { border-top: 0; }
.pg-agora-trio .n { font: 400 1.3rem/1 'IM Fell English', serif; color: var(--rubric); }
.pg-agora-trio strong { font: 600 1rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .1em; color: var(--ink); }
.pg-agora-trio em { font: italic 1rem/1.3 'IM Fell English', serif; color: var(--ink-soft); }
.pg-agora-go { max-width: none; margin-top: 1.2rem; }   /* the column's width: centred below 1024, the body's 38rem box would hold it off the axis */
/* the sentence keeps its two parallel halves on two lines at 1920 as at 1366:
   at the section's full size it ran to three in the 663px column */
.pg-agora .pg-display { font-size: min(var(--pg-display), 3.5rem); }
@media (min-width: 1024px) {
  .pg-agora-grid { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
}
@media (max-width: 1023px) {
  .pg-rings { max-width: 15rem; margin-bottom: 2rem; }
  .pg-agora-text { text-align: center; }
  .pg-agora-text .pg-rh.al { margin-left: auto; }
  .pg-agora-text .pg-display.al, .pg-agora-text .pg-lede.al { margin-inline: auto; text-align: center; }
  .pg-agora-trio { margin-inline: auto; }
  .pg .pg-agora-trio li { grid-template-columns: 1fr; justify-items: center; row-gap: .15rem; }
}

/* ═══════════ 7 · Questions (fol. xiii) ═══════════ */
.pg-faq-col { max-width: 40rem; margin: 2.4rem auto 0; counter-reset: q; }
.pg-faq-g { position: relative; margin-top: 2.6rem; }
.pg-faq-g > h3 { margin-bottom: .6rem; }
.pg .pg-q {
  display: flow-root; counter-increment: q; border-top: 0; border-bottom: 1px solid rgba(var(--rule), .3);
  scroll-margin-top: calc(var(--pg-hd, 5.6rem) + 1.5rem);
}
.pg .pg-q[open]::after { content: ""; display: block; clear: both; }   /* older engines ignore display on details */
.pg .pg-q summary {
  position: relative; list-style: none; padding: 1.1rem 2.6rem; min-height: 48px; cursor: pointer;
  font: 400 clamp(1.12rem, 1.4vw, 1.3rem)/1.35 'IM Fell English', serif; font-variant: normal; letter-spacing: 0; color: var(--ink);
  transition: none;
}
.pg .pg-q summary::-webkit-details-marker { display: none; }
/* the numeral is small text, so it takes the small rubric (about 5.2:1 on the paper; --rubric fell to 3.2–3.8:1 at the glyph) */
.pg .pg-q summary::before { content: counter(q, lower-roman) "."; position: absolute; left: 0; top: 1.3rem; font: 1rem/1 'IM Fell English', serif; color: var(--cc-red); }
.pg .pg-q summary:hover { color: var(--cc-red); }
.pg .pg-q .faq-mark { right: .3rem; transition: transform .35s var(--ease-out); }
.pg .pg-q .faq-mark::before, .pg .pg-q .faq-mark::after { background: var(--rubric); }
.pg .pg-q[open] .faq-mark { transform: translateY(-50%) rotate(45deg); }
.pg .pg-q[open] .faq-mark::after { transform: none; opacity: 1; }
.pg .pg-q > p { margin: 0 0 1rem 2.6rem; padding: 0; max-width: 34rem; font: 500 1.08rem/1.7 'Cormorant Garamond', var(--font-serif); color: var(--ink); }
.pg .pg-q > summary + p { display: flow-root; }       /* the initial's float stays in its own paragraph */
.pg .pg-q > summary + p::first-letter { float: left; padding: .07em .09em 0 0; font: 3.2em/.78 'IM Fell English', serif; color: var(--rubric); }
.pg .pg-q > p a { color: inherit; border: 0; text-decoration: underline 1px rgba(var(--rule), .6); text-underline-offset: .22em; }
.pg .pg-q > p a:hover { color: var(--cc-red); text-decoration-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .pg .pg-q[open] > :not(summary) { animation: pg-open .45s var(--ease-out) both; }
}
@keyframes pg-open { from { opacity: 0; transform: translateY(6px); } }
/* a quotation: below 1280 a centred epigraph, above it a note in the right margin */
.pg .faq-quote {
  margin: 1.2rem auto 1.4rem; padding: 0; max-width: 30rem; border: 0; text-align: center;
  font: italic 1.08rem/1.5 'IM Fell English', serif; color: var(--ink);
}
.pg .faq-quote::before { content: "\2767"; display: block; margin-bottom: .3rem; font-style: normal; color: var(--rubric); }
.pg .faq-quote cite { display: block; margin-top: .5rem; font: normal 600 .78rem/1.4 'Cormorant SC', var(--font-caps); letter-spacing: .14em; color: var(--ink-soft); }
.pg .pg-faq-end { max-width: none; margin-top: 2.8rem; text-align: center; font: italic 1.02rem/1.5 'IM Fell English', serif; color: var(--ink); }
@media (min-width: 1200px) {
  .pg-faq-g > h3 { position: absolute; right: calc(100% + 2.5rem); top: 1.2rem; width: 10rem; margin: 0; text-align: right; }
}
@media (min-width: 1280px) {
  /* the float's margin box is negative, so the column never wraps around it */
  .pg .faq-quote { float: right; clear: right; position: relative; width: 14rem; margin: .2rem -17rem 1rem 0; text-align: left; font-size: 1rem; }
  .pg .faq-quote::before { content: ""; position: absolute; left: -2.4rem; top: .75em; width: 1.8rem; height: 1px; margin: 0; background: var(--sepia); opacity: .5; }
}
@media (max-width: 860px) {
  .pg .pg-q summary { padding: 1rem 2.2rem 1rem 1.9rem; font-size: 1.1rem; }
  .pg .pg-q summary::before { top: 1.15rem; }
  .pg .pg-q > p { margin-left: 1.9rem; }
  .pg-faq-g > h3 { text-align: left; }
}

/* ═══════════ 8 · Commencer (fol. xiv): the empty figure, and the point at the nib ═══════════ */
.pg-join { overflow: clip; text-align: center; }        /* clip, not hidden: no scroll container */
/* centred by grid, never by transform, so neither the reveal's rise nor the
   coarse pointer's transform: none can move it off centre */
.pg-join-geo-w { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; }
.pg-join-geo { width: min(56rem, 120vw); height: auto; fill: none; stroke: rgba(var(--metalpoint), .38); stroke-width: 1.2; }
.pg-join-geo * { vector-effect: non-scaling-stroke; }
.js .pg .pg-join-geo.reveal { transition-duration: 1.4s; }
.pg-join-in { position: relative; z-index: 1; }
.pg-reg { max-width: 34rem; margin: 2.4rem auto 0; text-align: left; }
.pg-reg-k { display: block; margin-bottom: .4rem; font: 600 .8rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .2em; color: var(--cc-red); }
/* the signature line */
.pg-reg-row { position: relative; display: flex; align-items: flex-end; gap: 1.4rem; }
.pg #cta-email {
  flex: 1; min-width: 0; height: 3rem; padding: .4rem 0; border: 0; border-bottom: 1.5px solid var(--sepia); border-radius: 0;
  background: transparent; font: italic 1.3rem/1.2 'IM Fell English', serif; color: var(--ink); caret-color: var(--rubric); outline: none; cursor: text;
}
/* the example address is read before anything is written, so it keeps 4.5:1 (about 5.3:1 by day, 7:1 at night),
   still a shade lighter than the reader's own writing */
.pg #cta-email::placeholder { color: var(--ink-soft); opacity: .85; }
.pg #cta-email:focus { border-bottom-color: var(--rubric); box-shadow: 0 1.5px 0 var(--rubric); }   /* the line is the focus indicator */
.pg #cta-email:focus-visible { outline: none; }
.pg #cta-email:user-invalid, .pg #cta-email.is-invalid { border-bottom-color: var(--sanguine); box-shadow: 0 1.5px 0 var(--sanguine); }
/* the nib: the gold point waits at the start of the line, and fades as the reader writes */
.pg-nib { position: absolute; left: -1.25rem; bottom: .95rem; transition: opacity .3s; }
.pg-nib::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(242, 210, 113, .55); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pg-reg.in .pg-nib { animation: pg-nib-in 1.1s cubic-bezier(.2, .9, .25, 1.2) .5s 1 backwards; }
  .pg-reg.in .pg-nib::after { animation: pg-halo 1.4s ease-out 1.7s 1; }         /* one pulse, nothing infinite */
}
@keyframes pg-nib-in { from { opacity: 0; transform: translateY(-.7em) scale(.6); } }
@keyframes pg-halo { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.pg-reg-row:focus-within .pg-nib { opacity: 0; }
/* the seal, pressed onto the cartouche's left end: the label reads clearly, so it is a button */
.pg-seal-btn {
  position: relative; display: inline-flex; align-items: center; gap: .8rem; min-height: 3rem; padding: .85rem 1.6rem .8rem 3.1rem;
  border: 0; border-radius: 2px; background: var(--sepia); color: var(--paper-lit); white-space: nowrap; cursor: pointer;
  font: 600 .92rem/1 'Cormorant SC', var(--font-caps); letter-spacing: .14em;
  box-shadow: inset 0 0 0 3px var(--sepia), inset 0 0 0 4px rgba(var(--halo-rgb), .28);
}
.pg-seal {
  position: absolute; left: -1.1rem; top: 50%; width: 3.5rem; height: 3.5rem; margin-top: -1.75rem; overflow: visible;
  transition: transform .28s cubic-bezier(.3, 1.4, .5, 1);
}
.pg-seal-btn:is(:hover, :focus-visible) .pg-seal { transform: translateY(-2px) rotate(-7deg) scale(1.07); }
.pg-seal-btn:active .pg-seal { transform: scale(.94); }
.pg-seal-btn[aria-busy="true"] { cursor: progress; }
.pg .pg-reg-msg { min-height: 1.4em; margin: .6rem 0 0; max-width: none; font: italic .98rem/1.4 'IM Fell English', serif; color: var(--cc-red); }
.pg-consent { display: grid; grid-template-columns: 1.15rem 1fr; gap: .7rem; margin-top: 1.2rem; font: 500 .92rem/1.55 'Cormorant Garamond', var(--font-serif); color: var(--ink-soft); }
.pg-consent input { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: #8f3620; cursor: pointer; }
html[data-theme="dark"] .pg-consent input { accent-color: #d9826a; }
.pg-consent a { color: var(--ink); text-decoration: underline 1px rgba(var(--rule), .6); text-underline-offset: .2em; }
.pg-consent a:hover { color: var(--cc-red); }
.pg .pg-reg-note { max-width: none; margin-top: 1.4rem; text-align: center; font: italic .95rem/1.5 'IM Fell English', serif; color: var(--ink-soft); }
.pg-join .pg-fine { margin-top: .8rem; }
@media (max-width: 860px) {
  .pg-reg-row { flex-direction: column; align-items: stretch; gap: 1.2rem; }
  /* the nib and the seal stay 16px inside the screen's edge, whatever the
     gutter; the address starts after the nib so the two never touch */
  .pg-nib { left: calc(16px - var(--edge-pad)); top: 2.5rem; bottom: auto; }      /* on the line of the 3rem field */
  .pg #cta-email { padding-left: 1.1rem; }
  .pg-seal-btn { justify-content: center; min-height: 3.2rem; }
  .pg-seal { left: calc(16px - var(--edge-pad)); }
}

/* ═══════════ The colophon: the leaf ends on the desk ═══════════ */
.pg-colophon {
  position: relative; z-index: 5; margin: 0; padding: 5.5rem 0 2.4rem; border: 0;
  background: var(--desk); color: var(--desk-ink); text-align: center;
}
html[data-theme="dark"] .pg-colophon { border-top: 0; }
/* the leaf's torn bottom edge: paper above, the tear falling onto the desk */
.pg-colophon::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 48px; pointer-events: none;
  background: url("../assets/img/torn-edge.webp") -523px 0 / 1024px 48px repeat-x; transform: scaleY(-1);
}
html[data-theme="dark"] .pg-colophon::before { background-image: url("../assets/img/torn-edge-dark.webp"); }
/* (the seal stands a little nearer the name than it did: seal, « studio », « être » and the line under them
   read as one stack on one axis, the logotype's own title page; the name itself is set with the logotype, below) */
.pg-colo-seal { display: block; width: 48px; height: 48px; margin: 0 auto 1.1rem; overflow: visible; }
.pg-colophon .footer-logo-studio, .pg-colophon .footer-logo-etre { color: var(--desk-ink); }
.pg-colophon p, .pg-colophon li { margin: 0; font: 500 1rem/1.7 'Cormorant Garamond', var(--font-serif); color: var(--desk-ink); }
.pg-colophon .pg-colo-tag { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .8rem; margin-top: .9rem; font: 600 .84rem/1.4 'Cormorant SC', var(--font-caps); letter-spacing: .26em; }
.pg-colo-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--desk-ink); }
.pg-colophon .pg-colo-k { margin-bottom: .35rem; font: 600 .78rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .2em; }
.pg-colophon ul { list-style: none; margin: 0; padding: 0; }
.pg-colophon a { color: var(--desk-ink); border: 0; text-decoration: underline 1px rgba(239, 228, 200, .5); text-underline-offset: 4px; transition: none; }
.pg-colophon a:hover { color: var(--desk-ink); text-decoration: underline 1.5px currentColor; text-underline-offset: 4px; }
.pg-colophon .pg-colo-note { margin-top: 2.6rem; font: italic .92rem/1.5 'IM Fell English', serif; }
.pg-colo-cols { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 2rem 3rem; margin-top: 2.6rem; text-align: left; }
.pg-colo-cols a { display: inline-block; padding-block: .2rem; }
.pg-colo-base {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem 2rem;
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid rgba(239, 228, 200, .25); text-align: left;
}
.pg-colophon .pg-colo-base p { font-size: .9rem; }
.pg-colo-base a { font: 600 .86rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .14em; padding: .6rem 0; }
@media (max-width: 860px) {
  .pg-colo-cols { grid-template-columns: 1fr 1fr; justify-content: stretch; text-align: center; gap: 2rem 1.2rem; }
  .pg-colo-base { flex-direction: column; justify-content: center; text-align: center; }
}

/* ═══════════ Wide screens and phones: the paper objects ═══════════ */
@media (max-width: 860px) {
  /* every deckled sheet, and every door plate, becomes a torn band across the
     screen: the same markup, its fringe turned into a torn strip above and below */
  .pg-deckle, .pg-door .pg-print { transform: none; margin-inline: calc(-1 * var(--edge-pad)); }
  .pg-deckle .pg-sheet, .pg-door .pg-print .pg-sheet { padding: 0; background: none; }
  .pg-deckle .pg-sheet::before, .pg-door .pg-print .pg-sheet::before {
    content: ""; position: absolute; inset: -20px 0 auto 0; height: 48px; z-index: 2; pointer-events: none; border: 0; border-image: none;
    background: url("../assets/img/torn-edge.webp") var(--tx, 0) 0 / 1024px 48px repeat-x; transform: scaleY(-1);
  }
  .pg-deckle .pg-sheet::after, .pg-door .pg-print .pg-sheet::after {
    content: ""; position: absolute; inset: auto 0 -20px 0; height: 48px; z-index: 1; pointer-events: none; box-shadow: none;
    background: url("../assets/img/torn-edge.webp") var(--tx, 0) 0 / 1024px 48px repeat-x;
  }
  html[data-theme="dark"] :is(.pg-deckle, .pg-door .pg-print) .pg-sheet::before,
  html[data-theme="dark"] :is(.pg-deckle, .pg-door .pg-print) .pg-sheet::after { background-image: url("../assets/img/torn-edge-dark.webp"); }
  .pg .pg-door .pg-print .shot { outline: 0; }
  /* the rule above has the focus ring's own weight and comes later, so the ring is given back here; it is
     drawn inside the plate, as on the rip, because the band runs to both edges of the screen */
  .pg .pg-door .pg-print .shot:focus-visible { outline: 1.5px dashed var(--rubric); outline-offset: -8px; }
  .pg-deckle .pg-cap, .pg-door .pg-print .pg-cap { padding-inline: var(--edge-pad); margin-top: 1.2rem; }
  #porte-corps { --tx: -211px; } #porte-mental { --tx: -477px; } #porte-souffle { --tx: -802px; }
  .pg-door .pg-plate-w { margin-bottom: 1.4rem; }
  .pg-door .pg-print .pg-cap { text-align: center; margin-inline: auto; }
  .pg-deckle .pg-cap { text-align: center; margin-inline: auto; }
}

/* ═══════════ Reduced motion: everything present at first paint ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .js .pg .reveal, .js .pg .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pg *, .pg *::before, .pg *::after, .pg-colophon * { animation: none !important; transition-duration: 0s !important; }
}

/* ═══════════ Phone amendments, from the screens ═══════════ */
@media (max-width: 860px) {
  /* the swipe row's next plate is the affordance: a plate only a tenth in view
     never reaches the reveal's threshold, so the row does not wait for it */
  .js .pg .pg-plates > .reveal { opacity: 1; transform: none; transition: none; }
  /* the doors figure is drawn at a third of its size here: its lines keep a
     screen width, and the point is enlarged so it still reads as the point */
  .pg-doors-fig :is(.pg-side, .pg-side-hl, .pg-scored) { vector-effect: non-scaling-stroke; }
  .pg-doors-fig .pg-side-hl { stroke-width: 2.4; }
  .pg-pt-g circle:first-child { r: 44px; }
  .pg-pt-g circle:last-child { r: 17px; }
  /* the colophon's tagline on one line: its dots never end a row */
  .pg-colophon .pg-colo-tag { gap: .5rem; font-size: .74rem; letter-spacing: .16em; }
  /* Fingers' targets. Links stacked one above the other stand 8px apart, so
     that their enlarged hit areas meet without overlapping. The
     fiche's addresses sit on rows of 44px that do not overlap. The address
     field keeps its 3rem: in the column's flexbox, flex: 1 had shrunk it to its
     line. */
  .pg-actions-c { gap: .5rem; }
  .pg-marge-go { row-gap: .5rem; }
  .pg-lieu .pg-fiche dd:last-child, .pg-lieu .pg-fiche dd:last-child a { line-height: 2.75rem; }
  .pg-lieu .pg-fiche dd:last-child a { display: inline-block; }
  .pg #cta-email { flex: none; }
}

/* The book closes on the desk: at the very end of the page the colophon fills
   the screen under the header, so the leaf has gone up past it and the
   header takes the desk's ink, as it did at the opening. The extra 3rem lets
   the leaf's torn edge clear the top of the screen too. */
.pg-colophon { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh + 3rem); min-height: calc(100lvh + 3rem); }
.pg-colophon > .pg-wrap { width: min(var(--pg-max), 100% - 2 * var(--edge-pad)); }

/* ═══════════ The system's targets, and the header over the colophon (round 9) ═══════════ */
/* over the colophon the header takes the desk as its ground (on a phone the colophon is taller than the
   screen, and its words ran under the header's); desk on desk, so it still reads as having none.
   (It names body.narrative-done too: the "no ground on the desk" rule of the header's three states does,
   and a rule one element lighter lost to it, leaving the colophon's words under the header's.) */
html.colo-under:not(.page-under) body.narrative-done .site-header::before { opacity: 1; background: var(--desk); border-bottom: 0; }
/* a finger's target (44px) for every control of the header and the colophon — hit areas, nothing moves */
body[data-marks="folio"] .nav-toggle { flex: none; width: 44px; height: 44px; }
@media (min-width: 861px) {
  body[data-marks="folio"] .site-nav > a { position: relative; }
  body[data-marks="folio"] .site-nav > a:not(.btn)::before { content: ""; position: absolute; inset: -11px -6px; }
  body[data-marks="folio"] .site-nav > a.btn::before { content: ""; position: absolute; inset: -6px 0; }
}
body[data-marks="folio"] .lang-switch a, body[data-marks="folio"] .theme-toggle { position: relative; }
body[data-marks="folio"] .lang-switch a::after { content: ""; position: absolute; inset: -15px -3px; }
body[data-marks="folio"] .theme-toggle::after { content: ""; position: absolute; inset: -7px; }
.pg-colo-cols a { padding-block: .55rem; margin-block: -.35rem; }
.pg-colo-base a { padding: .82rem 0; margin: -.22rem 0; }
/* (The narrowest phones' rule, which let the header's line under the name give way below 400px, now lives
   with the logotype at the end of this file: the line stands beside the name there, and gives way below 600px.) */

/* ═══════════ The rip (the owner, 2026-10-01) ═══════════
   A panorama laid across the whole width of the leaf, the paper torn open above and below it — the
   same torn band a phone has always shown, now at every width: the page seems ripped to let the room
   through. Used for the reception's panorama (home Pl. XII, Agora Pl. VI). The body's overflow-x is
   hidden, so the band may run under a desktop scrollbar without a sideways scroll. */
.pg .pg-rip { max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); }
/* The rip is already the screen's width, so the phone's torn-band rule, which pulls every deckled sheet
   out by the page's gutter on both sides, must not reach it: those two gutters ran past both edges of
   the screen, and mobile Chrome widened the whole layout to hold them (409px on a 390px phone), which
   pushed every fixed element, the menu button and the lightbox's controls among them, partly off-screen. */
.pg .pg-rip .pg-deckle { transform: none; margin-inline: 0; }
/* And should anything on the leaf ever overrun the screen again, it is cut at the page's edge rather than
   allowed to widen the layout. Clip, not hidden: it makes no scroll container, so sticky is left alone. */
body[data-marks="folio"] .pg { overflow-x: clip; }
.pg .pg-rip .pg-deckle .pg-sheet { padding: 0; background: none; }
.pg .pg-rip .pg-deckle .pg-sheet::before {
  content: ""; position: absolute; inset: -20px 0 auto 0; height: 48px; z-index: 2; pointer-events: none; border: 0; border-image: none;
  background: url("../assets/img/torn-edge.webp") var(--tx, 0) 0 / 1024px 48px repeat-x; transform: scaleY(-1);
}
.pg .pg-rip .pg-deckle .pg-sheet::after {
  content: ""; position: absolute; inset: auto 0 -20px 0; height: 48px; z-index: 1; pointer-events: none; box-shadow: none;
  background: url("../assets/img/torn-edge.webp") calc(var(--tx, 0px) - 300px) 0 / 1024px 48px repeat-x;
}
html[data-theme="dark"] .pg .pg-rip .pg-deckle .pg-sheet::before,
html[data-theme="dark"] .pg .pg-rip .pg-deckle .pg-sheet::after { background-image: url("../assets/img/torn-edge-dark.webp"); }
.pg .pg-rip .shot { border-radius: 0; }
.pg .pg-rip .shot:focus-visible { outline-offset: -8px; }
.pg .pg-rip .pg-cap { max-width: 64rem; margin: 1.6rem auto 0; padding-inline: var(--edge-pad); }
.pg-ag .pg-rip { margin-top: 3.4rem; }
/* each rip at its own photograph's proportions (--ar on the figure), so nothing is cut; only where that would
   stand taller than about three quarters of the screen (a very wide screen) is it cut, from its centre */
@media (min-width: 861px) { .pg .pg-rip .shot img { aspect-ratio: var(--ar, 1600 / 396); max-height: min(72vh, 46rem); object-position: 50% 50%; } }
@media (max-width: 860px) { .pg .pg-rip .shot img { aspect-ratio: 2.2 / 1; object-position: 50% 50%; } }

/* ═══════════ The logotype: « la page de titre » (the owner, 2026-10-01) ═══════════
   « studio » in the small capitals of Cormorant SC, tracked so that it spans the ink of « être » beneath it,
   as the Agora's kicker stands over « L’Agora »; « être » in IM Fell English roman, the face of the titles;
   and, in place of the circumflex, a small triangle drawn with a pen. The triangle is the only red mark in
   the name (the e keeps the word's ink, or the two fused into a red « ê » and split the word), and it
   answers the seal stamped with the same triangle. The Tangerine script of the old lockup is retired.
   Every length follows from one number, --E, the size of « être ». The kicker has two optical sizes, so that
   it always spans « être »'s ink (about 1.57 E): where the name is small (the header, the loader, the
   letterhead) it is bolder, larger and less tracked, for at 1x the lighter capitals were faint; where the
   name is displayed (the opening, the colophon, the card) it is lighter and more open.
   The page's text stays « studio être ». The real ê is kept in the DOM but not painted, so that screen
   readers, search engines and a copied line all have the word; a plain e is drawn over it by .wm-e::before,
   whose content has empty alternative text, so nothing is read twice. The ê is hidden by its fill, not by
   its colour, because the drawn e takes currentColor: it then follows every colour state the header already
   has (on the desk, below the story, without a script) with no rule of its own. The triangle is one drawing
   (assets/img/etre-tri.svg) used as a mask, so its colour is set here, through --wm-tri, and the themes and
   the looks recolour it as they recolour the rubric (the calme look turns it sepia).
   main.css is shared with the live site and is never edited: these rules override it, and the markup's
   spans (not <em>) leave its Tangerine rules for « em » nothing to style. The story's opening lockup and the
   loader are set in folio.css, the small pages' letterhead in folio-pages.css; they all share this core. */
.wm {
  --E: 2.5rem;
  --wm-bl: .77em;               /* IM Fell English roman at line-height 1: its baseline, below the line's top */
  /* The triangle, in « être »'s em: its base .25em wide (.63 of the e), centred .245em from the e's origin,
     .508em above the baseline (just over the x-height, .46em), its apex about .73em up, where the circumflex
     stood. The drawing's base spans .77 of its box, hence the box. */
  --tri-w: .25em; --tri-cx: .245em; --tri-base: .508em; --tri-box: calc(var(--tri-w) / .77);
  /* the kicker's display set: 600, at .40 E, tracked .20em */
  --wm-kick-w: 600; --wm-kick-r: .40; --wm-kick-t: .20em;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0;
  white-space: nowrap; line-height: 1; letter-spacing: 0; font-style: normal; font-weight: 400;
}
/* (the tracking after the last letter is given back by the right margin, so that it is the word's ink, and
   not its box, that is centred over « être »; its baseline stands about .86 E above être's) */
.wm .wm-studio {
  display: block; font-family: 'Cormorant SC', var(--font-caps), Georgia, serif; font-style: normal;
  font-weight: var(--wm-kick-w); font-size: calc(var(--E) * var(--wm-kick-r)); line-height: 1; text-transform: none;
  letter-spacing: var(--wm-kick-t); margin: 0 calc(-1 * var(--wm-kick-t)) calc(var(--E) * .015) 0;
  color: var(--ink);
}
.wm .wm-etre {
  position: relative; display: block; font-family: 'IM Fell English', Georgia, serif; font-style: normal; font-weight: 400;
  font-size: var(--E); line-height: 1; letter-spacing: .005em; margin-bottom: -.12em; color: var(--display-ink);
}
/* the real « ê », unseen and without a shadow (a shadow would still draw its accent); the plain e over it,
   at the same origin and on the same baseline, with the letters' halo where they have one (--wm-halo) */
.wm-e { position: relative; -webkit-text-fill-color: transparent; text-shadow: none !important; }
.wm-e::before {
  content: "e"; content: "e" / ""; position: absolute; left: 0; top: 0; line-height: normal;
  -webkit-text-fill-color: currentColor; text-shadow: var(--wm-halo, none); pointer-events: none;
}
/* the triangle, set from the baseline, so that it takes no room and does not depend on the line's height */
.wm .wm-etre::after {
  content: ""; position: absolute; pointer-events: none;
  width: var(--tri-box); height: calc(var(--tri-box) * .9);
  left: calc(var(--tri-cx) - var(--tri-box) / 2);
  top: calc(var(--wm-bl) - var(--tri-base) - var(--tri-box) * .77);
  background: var(--wm-tri, var(--rubric, #9a3a20));
  -webkit-mask: url("../assets/img/etre-tri.svg") center / 100% 100% no-repeat;
  mask: url("../assets/img/etre-tri.svg") center / 100% 100% no-repeat;
}
/* In forced colours a mask is painted in the system's colour as a solid block, and a transparent fill would
   leave the word without its first letter: the real « ê » is shown instead, and the drawings are dropped. */
@media (forced-colors: active) {
  .wm-e { -webkit-text-fill-color: currentColor; }
  .wm-e::before, .wm .wm-etre::after { content: none; }
}

/* ── The header, on every page ──
   The title page at the left. On a wide screen the line stands beside it, on être's baseline, after a
   metalpoint hairline (not a red one: the triangle stays the only red). The stacked name is about 7px taller
   than the old one-line name, so the header is too: folio-pages.css (--pg-hd) and folio-agora.css (the
   leaf's top) were measured again for it. The halo the letters take from main.css's .logo is lent to the
   drawn e; on the desk and below the story the letters have none, and neither has the e. */
.site-header .logo {
  flex-direction: row; align-items: flex-end; gap: 0;
  --wm-halo: 0 1px 3px rgba(var(--halo-rgb), .9), 0 0 12px rgba(var(--halo-rgb), .75);
}
/* the text set of the kicker: 700, at .44 E, tracked .13em; « studio » starts where « être » does */
.logo .logo-line.wm { --E: 2.5rem; --tri-w: .28em; --wm-kick-w: 700; --wm-kick-r: .44; --wm-kick-t: .13em; align-items: flex-start; }
/* « être » has no descender: its box ends at its baseline, so that the line beside it sits on that baseline */
.logo .logo-line.wm .wm-etre { margin-bottom: -.2em; }
/* Wherever the name is set at the text size (the header, the loader, the small pages' letterhead), the
   triangle is the bolder cut of the same drawing, a little larger (--tri-w), as the kicker is bolder there:
   at 14 to 16px wide the display cut's pen thinned to a hairline and its red paled into the paper. */
:is(.logo, .loader-word, .pgx-lh) .wm-etre::after { -webkit-mask-image: url("../assets/img/etre-tri-s.svg"); mask-image: url("../assets/img/etre-tri-s.svg"); }
/* (the line's own descent is given back by the negative margin, so that its letters, and not its box, stand
   on être's baseline; the hairline runs from just over its capitals down to that baseline) */
.site-header .logo .logo-tagline {
  align-self: flex-end; margin: 0 0 -.06rem 1rem; padding: .2rem 0 0 1rem;
  border-left: 1px solid rgba(var(--metalpoint, 120, 110, 92), .55); white-space: nowrap; line-height: 1.1;
}
/* On the desk the letters take the paper's ink from the existing rules (folio.css's on-desk rule, the
   narrative-done rule above), and the drawn e follows them; the triangle takes the rubric lightened for the
   light desk (3.2:1 on #6f5a3e), or the night's rubric on the near-black desk. Without a script these pages'
   header always sits on paper, in ink, so the triangle keeps the paper's rubric there. */
html.on-desk:not(.page-under) .logo, html:not(.page-under) body.narrative-done .logo { --wm-tri: #eaa486; --wm-halo: none; }
html[data-theme="dark"].on-desk:not(.page-under) .logo, html[data-theme="dark"]:not(.page-under) body.narrative-done .logo { --wm-tri: var(--rubric); }
html:not(.js) body:is(.pgx, .ag-page) .logo { --wm-tri: var(--rubric); }
/* a phone: the name a shade larger (about 72 x 52px at 390 and 360, « être » about 42px, the triangle about 11px) */
@media (max-width: 860px) { .logo .logo-line.wm { --E: 2.55rem; } }
@media (max-width: 400px) { .logo .logo-line.wm { --E: 2.6rem; } }
/* The line beside the name gives way where the row cannot hold it: below 600px (the stacked name, the line
   beside it, FR·EN·ES and the menu overflowed between 401 and about 560px; it was 400px while the line sat
   under the name), and on a narrow desktop, where the navigation stands in the header too and the line,
   kept on one row, would run into its links: they touched at 1200px on the home page and the Agora, and
   from 1260px at least 45px of the header lie between them. It repeats the opening's line and the colophon's. */
@media (max-width: 600px) { body[data-marks="folio"] .logo-tagline { display: none; } }
@media (min-width: 861px) and (max-width: 1259px) { body[data-marks="folio"] .logo-tagline { display: none; } }

/* ── The colophon, on the desk ──
   The seal, then « studio », then « être », then the line, on one centred axis. main.css's old terracotta
   triangle on « être » (a CSS triangle over the script's e) is turned off; the drawn one replaces it. The
   letters take the desk's paper ink, and the triangle the lightened rubric (the night's own on the dark desk). */
.footer-logo.wm { --E: clamp(3.8rem, min(6vw, 9vh), 5.2rem); display: flex; flex-direction: column; align-items: center; gap: 0; }
.footer-logo-etre::before { content: none; }
.pg-colophon .footer-logo.wm { --wm-tri: #eaa486; }
html[data-theme="dark"] .pg-colophon .footer-logo.wm { --wm-tri: var(--rubric); }
.pg-colophon .footer-logo.wm .wm-studio, .pg-colophon .footer-logo.wm .wm-etre { color: var(--desk-ink); }
/* The stacked name stands about 50px taller than the one-line name did, and the header 7px taller, so at
   the end of the page, on a 1366 x 768 laptop, the seal went under the header. On a computer the colophon's
   words are therefore centred in the screen under the header, not in the whole box, whose top 3rem lie
   above the screen and whose next 84px lie under the header: the padding above them is that 3rem, the
   header's height and the padding below them. The name is held to the screen's height as well as its width
   (9vh above), and on the shortest screens the colophon's gaps close a little, so that the seal stays in
   view under the header at 1280 x 720 too. A phone's colophon is taller than its screen and is read as it
   scrolls by, so it keeps its own padding. */
@media (min-width: 861px) {
  .pg-colophon { padding-top: calc(5.4rem + var(--pg-hd, 5.25rem)); }
}
@media (min-width: 861px) and (max-height: 740px) {
  .pg-colo-cols, .pg-colophon .pg-colo-note { margin-top: 2rem; }
}