/* ═══════════════════════════════════════════════════════════════
   L’Agora as a leaf of the Folio (folio-agora.html only)
   Loaded after css/folio-page.css, whose system (the running heads, the
   paper objects, the questions, the colophon) this page borrows whole; this
   file only adds what is the Agora’s own. The page tokens sit on :root
   because the file loads on this page alone; every other rule is scoped to
   .pg-ag, body.ag-page or html:not(.js) body.ag-page, so nothing leaks into
   the shared system. As in the rest of the Folio there is no filter and no
   blend mode, and what moves is moved by transform or opacity alone, once.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════ Tokens ═══════════
   The fruit washes are the story’s own (js/folio.js fruitSvgs) and bear the
   same names and values as css/folio-pages.css; by night they are lifted so
   they still read on the dark paper. They tint drawings only: no text and no
   rule is ever set in a wash, and none of them is yellow or ochre, so the
   gold point stays the only gilded thing on the leaf. */
:root {
  --fr-grenade: rgba(170, 62, 44, .5); --fr-cerise: rgba(160, 40, 34, .55); --fr-figue: rgba(104, 66, 96, .45);
  --fr-raisin: rgba(96, 74, 120, .45); --fr-leaf: rgba(118, 138, 72, .42);
  --fr-grain: rgba(168, 34, 52, .62); --fr-lustre: rgba(255, 246, 226, .75); --fr-pulpe: rgba(246, 232, 204, .9);
  --fr-olive: rgba(92, 100, 56, .5); --fr-noix: rgba(122, 92, 64, .36); --fr-petale: rgba(214, 138, 112, .42);
  --ag-red: #80301b;      /* rubric for SMALL numerals: 6.26:1 on #e8d7ad, 5.04:1 on the darkest paper #d8c091 (.pl-n's ink) */
}
html[data-theme="dark"] {
  --fr-grenade: rgba(214, 112, 88, .42); --fr-cerise: rgba(220, 100, 84, .46); --fr-figue: rgba(176, 136, 170, .38);
  --fr-raisin: rgba(162, 142, 192, .38); --fr-leaf: rgba(150, 178, 110, .34);
  --fr-grain: rgba(226, 104, 112, .55); --fr-lustre: rgba(255, 246, 226, .45); --fr-pulpe: rgba(230, 214, 180, .2);
  --fr-olive: rgba(160, 170, 110, .42); --fr-noix: rgba(196, 160, 116, .32); --fr-petale: rgba(232, 160, 132, .36);
  --ag-red: #d9826a;      /* the night's --cc-red, 6.47:1 */
}

/* ═══════════ The leaf on the desk ═══════════
   The leaf’s top sits a measured distance below the header: the header’s
   bottom (measured at each width), plus the 36px of .page::before’s torn strip
   that stand above the leaf, plus a band of plain desk. The values are static,
   never --pg-hd, so nothing moves once the page has loaded.
   Since the logotype (folio-page.css) the header is as tall as the stacked
   name at every width, and its line stands beside the name or gives way, never
   wrapping under it: 83.8px on a computer (where the line once wrapped to two
   lines and more below 1200px, and the leaf came down with it), 84.8px on a
   phone, and 85.8px below 400px, where the name is a shade larger. */
main.pg-ag { margin-top: 9rem; }                                            /* 144px: 24px of desk under the 83.8px header */
@media (max-width: 860px) { main.pg-ag { margin-top: 8.6rem; } }            /* 137.6px: 17px of desk under 84.8px */
@media (max-width: 400px) { main.pg-ag { margin-top: 8.7rem; } }            /* 139.2px: the same 17px under 85.8px */
/* The menu button is the phone's only way to the other pages, so it is given
   the full 44px target the rest of the page keeps (main.css draws it at 41.6px). */
@media (max-width: 860px) { body.ag-page .nav-toggle { flex: 0 0 44px; min-width: 44px; min-height: 44px; } }
.pg-ag::before { background-position-x: -452px; }     /* its own tear (the home 0, Horaires -731, Mentions -289) */
/* This leaf has ten sections, so the system’s section padding alone would
   make about two screens of it. It is trimmed here to keep the page within
   sixteen screens on a laptop and twenty-three on a phone. */
@media (min-width: 1024px) { .pg-ag { --pg-pad: clamp(2.4rem, 5vh, 3.2rem); } }
@media (max-width: 860px) { .pg-ag { --pg-pad: clamp(3rem, 7vh, 4rem); } }

/* Without scripts the header observer never runs, so the header would keep its
   cream desk ink over the paper once the page is scrolled: it is given a
   ground of paper and ordinary ink from the start. */
html:not(.js) body.ag-page .site-header::before { opacity: 1 !important; background: var(--paper); }
html:not(.js) body.ag-page :is(.site-nav > a:not(.btn), .lang-switch a, .lang-switch span, .theme-toggle, .nav-toggle) { color: var(--ink) !important; }
html:not(.js) body.ag-page .nav-toggle span { background: var(--ink) !important; }

/* « Agora » is marked in the nav as the page one is on: the same rule as the
   sister pages’, and over the desk the underline takes the desk’s cream ink */
body.ag-page .site-nav > a[aria-current="page"] { color: var(--ink); }
body.ag-page .site-nav > a[aria-current="page"]::after { transform: scaleX(1); background: var(--rubric); }
@media (min-width: 861px) {
  html:not(.page-under) body.ag-page.narrative-done .site-nav > a[aria-current="page"] { color: #efe4c8; }
  html:not(.page-under) body.ag-page.narrative-done .site-nav > a[aria-current="page"]::after { background: #efe4c8; }
}
@media (max-width: 860px) { body.ag-page .site-nav > a[aria-current="page"] { color: var(--ink) !important; } }

/* ═══════════ Shared pieces ═══════════ */
.pg-ag .ag-c { margin-inline: auto; text-align: center; }
/* A word joined by a hyphen, such as « Prenez-y », is kept whole: a display must not break at its hyphen. */
.pg-ag .ag-nw { white-space: nowrap; }
/* A display of two sentences must break at the full stop, never inside a
   sentence: each sentence is an inline block, so both share a line when they
   fit and otherwise each takes its own (one too long for a line still wraps
   inside itself). */
.pg-ag .ag-sent { display: inline-block; }
/* The display's rubric initial is a ::first-letter, which does not reach into
   an inline block, so the first sentence carries it itself. */
.pg-ag .pg-display > .ag-sent:first-child::first-letter { color: var(--rubric); }
/* the ways and the public’s slip are anchors too: they land clear of the header */
.pg-ag .pg-sec :is([id="who"], [id="une-question"], [id="rejoindre"], [id="un-format"], [id="public"]) { scroll-margin-top: calc(var(--pg-hd, 5.6rem) + 1.25rem); }

/* the margin query: a question from the FAQ, set where the objection comes up
   (four on the page); folio-page.js opens the question when it is followed */
.pg-ag .ag-query { max-width: 30rem; margin: 1.2rem 0 0; font: italic .98rem/1.45 'IM Fell English', serif; color: var(--ink-soft); text-wrap: balance; }
.pg-ag .ag-query.ag-c { margin-inline: auto; }
.pg-ag .ag-query::before { content: "\00b6\00a0"; font-style: normal; color: var(--rubric); }
/* The link is inline, not inline-block, because an inline-block question
   would leave its ¶ alone on the line above it. Padding on an inline box does
   not move the lines, so it can widen the target to 45px for free. The query is
   balanced (above) because the arrow, an inline-block, is a break of its own:
   balanced lines keep it with the last words instead of alone on a line. */
.pg-ag .ag-query a { padding-block: .8rem; color: var(--ink); text-decoration: underline 1px rgba(var(--rule), .6); text-underline-offset: .28em; }
.pg-ag .ag-query a:hover { color: var(--cc-red); text-decoration-color: currentColor; }
.pg-ag .ag-query a::after { content: "\00a0\27f6"; font-style: normal; text-decoration: none; display: inline-block; }

/* Growth from a stem. It always sits on an inner element, because a CSS
   transform would replace the SVG transform attribute that places the drawing. */
.pg-ag .ag-grow { transform-box: fill-box; transform-origin: var(--o, 50% 0); }
@media (prefers-reduced-motion: no-preference) {
  .js .pg-ag .reveal:not(.in) .ag-grow { opacity: 0; transform: scale(.15); }
  .pg-ag .ag-grow { transition: transform .9s cubic-bezier(.3, 1.35, .5, 1) var(--d, 0s), opacity .5s var(--ease-out) var(--d, 0s); }
}

/* the gold point’s single pulse: one pass, nothing loops */
.pg-ag .ag-pt-pulse { fill: rgba(242, 210, 113, .55); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes ag-pulse { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }

/* A text sheet on a phone: a full-bleed band of laid paper, deckled top and
   bottom only. folio-page.css turns every .pg-deckle into a borderless torn
   band, which is right for a photograph; a sheet of text keeps its paper. */
@media (max-width: 860px) {
  .pg-ag .pg-deckle.ag-txt { transform: none; margin-inline: calc(-1 * var(--edge-pad)); }
  .pg-ag .pg-deckle.ag-txt .pg-sheet { padding: 2.4rem var(--edge-pad); background: url("../assets/img/grain-light.webp") 0 0 / 256px 256px, var(--mount); }
  .pg-ag .pg-deckle.ag-txt .pg-sheet::before { inset: -40px 0; height: auto; transform: none; background: none;
    border: solid transparent; border-width: 64px 0; border-image: url("../assets/img/deckle.webp") 64 / 64px 0 / 0 round; }
  .pg-ag .pg-deckle.ag-txt .pg-sheet::after { display: none; }
  html[data-theme="dark"] .pg-ag .pg-deckle.ag-txt .pg-sheet { background-image: url("../assets/img/grain-dark.webp"); }
  html[data-theme="dark"] .pg-ag .pg-deckle.ag-txt .pg-sheet::before { border-image-source: url("../assets/img/deckle-dark.webp"); }
}
/* The sheet's deckled fringe is a pseudo-element painted over the paper, so
   the text is lifted above it; otherwise the fringe would cross the first line. */
.pg-ag .pg-deckle.ag-txt .pg-sheet > * { position: relative; z-index: 3; }

/* ═══════════ 0 · Title page (fol. i): the circle in fruit ═══════════ */
.pg-ag .ag-vol { margin: 0 0 .55rem; font: 600 .74rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .24em; color: var(--ink-soft); }
.pg-ag .ag-front-text .pg-k { margin-bottom: .5rem; }
.pg-ag .ag-title { margin: 0 0 .5rem; font: 400 clamp(3.4rem, 7.2vw, 6.6rem)/.95 'IM Fell English', serif; letter-spacing: .005em; color: var(--display-ink); }
.pg-ag .ag-title::first-letter { color: var(--rubric); }
.pg-ag .ag-sig { max-width: 30rem; margin: 0 0 1.2rem; font: italic 400 clamp(1.2rem, 1.7vw, 1.55rem)/1.35 'IM Fell English', serif; color: var(--ink); }
/* The lede wraps « pretty », so that a phone does not leave its last word alone on a line. */
.pg-ag .ag-front-lede { max-width: 34rem; text-wrap: pretty; }
.pg-ag .ag-chain { max-width: none; margin: .4rem 0 0; font: 600 .82rem/1.7 'Cormorant SC', var(--font-caps); letter-spacing: .16em; color: var(--ink-soft); }
.pg-ag .ag-arr { margin-inline: .45em; color: var(--rubric); letter-spacing: 0; }
/* Each term of the chain is joined by no-break spaces in the HTML; balanced
   lines then set one term per line with its arrow, rather than one long line
   and a stray term. */
@media (max-width: 860px) { .pg-ag .ag-chain { text-wrap: balance; } }

/* the frontispiece: the story’s circle, square and triangle, the man gone to the table */
.pg-ag .ag-frontis { margin: 0; }
.pg-ag .ag-frontis-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pg-ag .ag-axes line { stroke: rgba(var(--metalpoint), .3); stroke-width: 1; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; }
.pg-ag .ag-geo * { fill: none; stroke: var(--sepia); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.pg-ag .ag-vine path { fill: none; stroke: var(--sepia); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pg-ag .ag-vine ellipse { fill: var(--fr-olive); stroke: var(--sepia); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pg-ag .ag-ped { fill: none; stroke: var(--sepia); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.pg-ag .ag-frontis .pg-cap { margin: 1rem auto 0; text-align: center; }
@media (max-width: 860px) {   /* drawn at a quarter of its size, the point keeps the home’s 11px */
  .pg-ag .ag-frontis .ag-pt-core, .pg-ag .ag-frontis .ag-pt-pulse { r: 21px; }
  .pg-ag .ag-frontis .ag-pt-halo { r: 56px; }
}
/* the order of arrival: the figure, the three stems, the leaves and olives
   from their bases, the pomegranates from their crowns, then one pulse */
@media (prefers-reduced-motion: no-preference) {
  .js .pg-ag .ag-frontis:not(.in) :is(.ag-geo, .ag-axes, .ag-v1, .ag-v2, .ag-v3, .ag-ped) { opacity: 0; }
  .pg-ag .ag-frontis :is(.ag-geo, .ag-axes) { transition: opacity .9s var(--ease-out); }
  .pg-ag .ag-frontis .ag-v1 { transition: opacity .6s var(--ease-out) .5s; }
  .pg-ag .ag-frontis .ag-v2 { transition: opacity .6s var(--ease-out) .75s; }
  .pg-ag .ag-frontis .ag-v3 { transition: opacity .6s var(--ease-out) 1s; }
  .pg-ag .ag-frontis .ag-ped { transition: opacity .4s var(--ease-out) 1.4s; }
  .pg-ag .ag-frontis.in .ag-pt-pulse { animation: ag-pulse 1.4s ease-out 2.3s 1; }
}

/* « Par où entrer » borrows the home’s contents, whose column flow is undone
   here because its three entries, one per audience, are read as rows. */
.pg-ag .ag-entries ol { grid-auto-flow: row; grid-template-rows: none; }

@media (min-width: 1024px) {
  .pg-ag .ag-front { padding-top: clamp(2.5rem, 6vh, 4rem); }
  .pg-ag .ag-front-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--pg-gap); }
  .pg-ag .ag-front-text { grid-column: 1 / 8; grid-row: 1; align-self: center; }
  .pg-ag .ag-frontis { grid-column: 8 / 13; grid-row: 1; justify-self: center; width: min(clamp(24rem, 34vw, 31rem), 100%); }
  .pg-ag .ag-entries { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(1.6rem, 4vh, 2.6rem); }
  .pg-ag .ag-entries ol { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--pg-gap); }
}
/* below 1024 the title page is one column, text first: the words say what the
   Agora is before the drawing shows it */
@media (max-width: 1023px) {
  .pg-ag .ag-front-grid { display: flex; flex-direction: column; }
  .pg-ag .ag-front-text { text-align: center; }
  .pg-ag .ag-front-text > * { margin-inline: auto; }
  .pg-ag .ag-entries .pg-k { text-align: center; }
  /* each row keeps its gloss: it says who the row is for */
  .pg-ag .ag-entries .pg-toc-g { display: block; }
  .pg.pg-ag .ag-entries a { grid-template-areas: "mk t l f" ". g g ."; align-items: baseline; }
}
@media (min-width: 861px) and (max-width: 1023px) {
  .pg-ag .ag-front-text { max-width: 40rem; margin-inline: auto; }
  .pg-ag .ag-frontis { width: min(22rem, 60vw); margin: 2.4rem auto 0; }
  .pg-ag .ag-entries { width: 100%; max-width: 40rem; margin: 2.4rem auto 0; }
}
@media (max-width: 860px) {
  .pg-ag .ag-front { padding-top: 2rem; }
  .pg-ag .ag-title { font-size: clamp(3rem, 14vw, 3.6rem); }
  .pg-ag .ag-frontis { width: min(15rem, 70vw); margin: 2rem auto 0; }
  .pg-ag .ag-entries { margin-top: 2rem; }
}

/* ═══════════ 1 · Trois dimensions (fol. ii): the rings inked in turn ═══════════ */
.pg-ag .ag-rings { margin: 0; }
.pg-ag .ag-rings svg { display: block; width: 100%; height: auto; overflow: visible; }
.pg-ag .ag-rscored circle { fill: none; stroke: rgba(var(--metalpoint), .35); stroke-width: 1; stroke-dasharray: 2 6; }
.pg-ag .ag-ring { fill: none; stroke: var(--sepia); }
.pg-ag .ag-emb * { fill: none; stroke: var(--sepia); stroke-width: .9; stroke-linejoin: round; }
.pg-ag .ag-dot { fill: var(--sepia); }
.pg-ag .ag-fseat { fill: var(--paper); stroke: var(--sepia); stroke-width: 1.2; }
.pg-ag .ag-fseat.ag-m9 { stroke-dasharray: 2 2; }
.pg-ag .ag-rn { font: 20px 'IM Fell English', serif; fill: var(--ag-red); text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.pg-ag .ag-hl circle { fill: none; stroke: var(--rubric); stroke-width: 2.6; opacity: 0; transition: opacity .5s var(--ease-out); }
.pg-ag .ag-ink { transform-box: view-box; transform-origin: 220px 220px; }
/* js/folio-agora.js adds s1, s2, s3 cumulatively and data-at as each dimension
   crosses the middle of the screen; below 1024, with reduced motion or without
   an observer, the figure is complete and nothing is singled out */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .js .pg-ag .ag-ink { opacity: 0; transform: scale(.94); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); }
  .pg-ag .ag-rings.s1 .ag-ink1, .pg-ag .ag-rings.s2 .ag-ink2, .pg-ag .ag-rings.s3 .ag-ink3 { opacity: 1; transform: none; }
  .js .pg-ag .ag-rings:not(.s2) .ag-fseat { opacity: 0; }
  .pg-ag .ag-fseat { transition: opacity .4s var(--ease-out) calc(.3s + var(--c) * 60ms); }
  .js .pg-ag .ag-rings:not(.s3) .ag-ink3 .ag-grow { opacity: 0; transform: scale(.15); }
  .pg-ag .ag-rings[data-at="1"] .ag-hl1, .pg-ag .ag-rings[data-at="2"] .ag-hl2, .pg-ag .ag-rings[data-at="3"] .ag-hl3 { opacity: 1; }
}
.pg-ag .ag-dims { list-style: none; margin: 0; padding: 0; }
.pg-ag .ag-dim + .ag-dim { border-top: 1px solid rgba(var(--rule), .22); }
.pg-ag .ag-dim .pg-k { margin: 0 0 .2rem; }
.pg-ag .ag-dim h3 { margin: .1rem 0 .6rem; font: 400 clamp(1.7rem, 2.3vw, 2.2rem)/1.15 'IM Fell English', serif; color: var(--display-ink); }
.pg-ag .ag-dim > p:not([class]) { margin: 0; max-width: 34rem; }
.pg-ag .ag-formats { list-style: none; display: flex; flex-wrap: wrap; margin: .8rem 0 0; padding: 0; }
.pg-ag .ag-formats li { font: italic 1rem/1.5 'IM Fell English', serif; color: var(--ink-soft); }
.pg-ag .ag-formats li + li::before { content: "·"; margin: 0 .5em; font-style: normal; color: var(--rubric); }
.pg-ag .ag-out { margin: .9rem 0 0; font: italic 500 1.1rem/1.5 'Cormorant Garamond', serif; color: var(--ink); }
.pg-ag .ag-out .pg-k { display: block; margin: 0 0 .15rem; font-style: normal; }
.pg-ag .ag-out .pg-k::after { content: " \2767"; color: var(--rubric); }
.pg-ag .ag-dim-glyph { display: none; }
.pg-ag .ag-coda { max-width: 38rem; margin: 2rem auto 0; text-align: center; font: italic 1.2rem/1.55 'IM Fell English', serif; color: var(--ink); }
.pg-ag .ag-coda::before { content: "\2767"; display: block; margin-bottom: .3rem; font-style: normal; color: var(--rubric); }
@media (min-width: 1024px) {
  .pg-ag .ag-dims-grid { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(2.5rem, 5vw, 5rem); margin-top: 2rem; }
  .pg-ag .ag-rings { position: sticky; top: calc(50vh - min(14rem, 17vw)); width: min(28rem, 34vw); justify-self: center; align-self: start; }
  .pg-ag .ag-dims { padding-left: 3.4rem; }
  /* Each dimension keeps at least 26vh, so that its ring is given time on
     screen without the section outgrowing the page’s length. */
  .pg-ag .ag-dim { position: relative; min-height: 26vh; padding: 1rem 0 1.6rem; }
  .pg-ag .ag-dim-n { position: absolute; right: calc(100% + 1.1rem); top: 1.1rem; font: 400 2.4rem/1 'IM Fell English', serif; color: var(--rubric); }
}
/* stacked below 1024: the figure static and whole; each dimension shows its
   own small three-ring glyph with its ring in rubric, and its numeral inline */
@media (max-width: 1023px) {
  .pg-ag .ag-rings { width: min(15rem, 72vw); margin: 2.2rem auto 1.4rem; }
  .pg-ag .ag-dim { display: grid; grid-template-columns: 3.2rem auto 1fr; column-gap: .8rem; align-items: baseline; padding: 1.1rem 0 1.6rem; }
  .pg-ag .ag-dim > * { grid-column: 2 / -1; }
  .pg-ag .ag-dim-glyph { display: block; grid-column: 1; grid-row: 1 / span 5; align-self: start; width: 40px; height: 40px; margin-top: .2rem; }
  .pg-ag .ag-dim-glyph circle { fill: none; stroke: rgba(var(--metalpoint), .6); stroke-width: 1; stroke-dasharray: 2 3; }
  .pg-ag .ag-dim[data-ring="2"] .ag-dim-glyph circle:nth-child(1),
  .pg-ag .ag-dim[data-ring="3"] .ag-dim-glyph circle:nth-child(-n+2) { stroke: var(--sepia); stroke-width: 1.2; stroke-dasharray: none; }
  .pg-ag .ag-dim[data-ring="1"] .ag-dim-glyph circle:nth-child(1),
  .pg-ag .ag-dim[data-ring="2"] .ag-dim-glyph circle:nth-child(2),
  .pg-ag .ag-dim[data-ring="3"] .ag-dim-glyph circle:nth-child(3) { stroke: var(--rubric); stroke-width: 2; stroke-dasharray: none; }
  /* « I · La pratique » on one line: the numeral and the kind share the first row */
  .pg-ag .ag-dim .ag-dim-n { grid-column: 2; grid-row: 1; font: 400 1.3rem/1 'IM Fell English', serif; color: var(--ag-red); }
  .pg-ag .ag-dim-n::after { content: " ·"; color: var(--ink-soft); }
  .pg-ag .ag-dim > .pg-k { grid-column: 3; grid-row: 1; }
}
@media (min-width: 861px) and (max-width: 1023px) {
  .pg-ag .ag-rings { width: min(20rem, 50vw); }
  .pg-ag .ag-dims { max-width: 40rem; margin-inline: auto; }
}

/* ═══════════ 2 · La table (fol. iii): Pl. I, the table seen from above ═══════════ */
.pg-ag .ag-plate { margin: 2.4rem 0 0; }
.pg-ag .ag-plan { display: block; width: 100%; height: auto; overflow: visible; }
.pg-ag .ag-seatring { fill: none; stroke: rgba(var(--metalpoint), .4); stroke-width: 1; stroke-dasharray: 2 6; }
.pg-ag .ag-tbl { fill: none; stroke: var(--sepia); stroke-width: 1.6; }
.pg-ag .ag-bevel { fill: none; stroke: var(--sepia); stroke-width: .6; opacity: .6; }
.pg-ag .ag-chairs rect { fill: var(--paper); stroke: var(--sepia); stroke-width: 1.2; }
.pg-ag .ag-chairs path { fill: none; stroke: var(--sepia); stroke-width: 2.4; stroke-linecap: round; }
/* The ninth chair, the machine’s, is dashed: it is drawn at the table, but its place is still discussed. */
.pg-ag .ag-chairs > g:nth-child(9) :is(rect, path) { stroke-dasharray: 3 3; }
.pg-ag .ag-chair-n text { font: 28px 'IM Fell English', serif; fill: var(--ag-red); text-anchor: middle; dominant-baseline: central; }
/* pointing at a name lights its chair: CSS only and decorative, since every
   fact is in the text (a browser without :has() simply shows nothing) */
@media (hover: hover) {
  .pg-ag .ag-round:has(.ag-seats > li:nth-child(1):hover) .ag-chairs > g:nth-child(1) :is(rect, path),
  .pg-ag .ag-round:has(.ag-seats > li:nth-child(2):hover) .ag-chairs > g:nth-child(2) :is(rect, path),
  .pg-ag .ag-round:has(.ag-seats > li:nth-child(3):hover) .ag-chairs > g:nth-child(3) :is(rect, path),
  .pg-ag .ag-round:has(.ag-seats > li:nth-child(4):hover) .ag-chairs > g:nth-child(4) :is(rect, path),
  .pg-ag .ag-round:has(.ag-seats > li:nth-child(5):hover) .ag-chairs > g:nth-child(5) :is(rect, path),
  .pg-ag .ag-round:has(.ag-seats > li:nth-child(6):hover) .ag-chairs > g:nth-child(6) :is(rect, path),
  .pg-ag .ag-round:has(.ag-seats > li:nth-child(7):hover) .ag-chairs > g:nth-child(7) :is(rect, path),
  .pg-ag .ag-round:has(.ag-seats > li:nth-child(8):hover) .ag-chairs > g:nth-child(8) :is(rect, path),
  .pg-ag .ag-round:has(.ag-seats > li:nth-child(9):hover) .ag-chairs > g:nth-child(9) :is(rect, path) { stroke: var(--rubric); }
}
/* The chairs arrive one by one, clockwise from the first, so that the table
   is seen to fill before the point pulses, once. */
@media (prefers-reduced-motion: no-preference) {
  .js .pg-ag .ag-plate:not(.in) .ag-chairs > g { opacity: 0; }
  .pg-ag .ag-chairs > g { transition: opacity .5s var(--ease-out) calc(.3s + var(--c) * 80ms); }
  .pg-ag .ag-plate.in .ag-plan .ag-pt-pulse { animation: ag-pulse 1.4s ease-out 1.5s 1; }
}
/* The core is placed from the plan’s centre in ems, not as a share of the
   round’s height, so it keeps its place under the point whatever the round’s
   proportions. The point stands 3.96em above the centre, so a top of 3.6em
   sets the words’ lower-case letters about 8px under it, never through it. */
.pg-ag .ag-core { position: absolute; left: 50%; top: calc(50% - 3.6em); width: 9.4em; max-width: none; margin: 0 0 0 -4.7em; text-align: center; }
.pg-ag .ag-core-q { display: block; font: italic 400 1.7em/1.05 'IM Fell English', serif; color: var(--display-ink); }
.pg-ag .ag-core-sub { display: block; font: italic 500 .86em/1.4 'Cormorant Garamond', serif; color: var(--ink-soft); }
.pg-ag .ag-seats { list-style: none; margin: 0; padding: 0; }
.pg-ag .ag-seats strong { display: block; font: 600 1.02em/1.25 'Cormorant SC', var(--font-caps); letter-spacing: .06em; color: var(--ink); }
.pg-ag .ag-seats em { display: block; font: italic .92em/1.3 'IM Fell English', serif; color: var(--ink-soft); }
.pg-ag .ag-plate .pg-cap { margin: 1rem auto 0; text-align: center; }
.pg-ag .ag-rulenote { max-width: 40rem; margin: 1.8rem auto 0; text-align: center; font: italic 1.15rem/1.55 'IM Fell English', serif; color: var(--ink); }
.pg-ag .ag-rulenote::before { content: "\2767"; display: block; margin-bottom: .3rem; font-style: normal; color: var(--rubric); }
@media (min-width: 861px) {
  .pg-ag .ag-round { position: relative; width: min(40em, 100%); aspect-ratio: 1 / .84; margin: 0 auto; font-size: clamp(12px, 1.15vw, 15px); }
  /* The plan is centred by its margins, because a transform on it would be
     stripped by main.css on touch screens. */
  .pg-ag .ag-plan-w { position: absolute; inset: 0; margin: auto; width: 24em; height: 24em; }
  /* the names round the table: rotated out and back, static, never animated;
     at 15px they sit 234px from the centre, clear of the chair numbers (≈ 142px) */
  .pg-ag .ag-seats li { position: absolute; left: 50%; top: 50%; width: 10em; margin: -1.3em 0 0 -5em; text-align: center;
    transform: rotate(calc(var(--i) * 40deg)) translateY(-15.6em) rotate(calc(var(--i) * -40deg)); }
  .pg-ag .ag-seats li:nth-child(1) { --i: 0; } .pg-ag .ag-seats li:nth-child(2) { --i: 1; } .pg-ag .ag-seats li:nth-child(3) { --i: 2; }
  .pg-ag .ag-seats li:nth-child(4) { --i: 3; } .pg-ag .ag-seats li:nth-child(5) { --i: 4; } .pg-ag .ag-seats li:nth-child(6) { --i: 5; }
  .pg-ag .ag-seats li:nth-child(7) { --i: 6; } .pg-ag .ag-seats li:nth-child(8) { --i: 7; } .pg-ag .ag-seats li:nth-child(9) { --i: 8; }
  /* The chair already carries the number, so the name drops its own. */
  .pg-ag .ag-seat-n { display: none; }
  .pg-ag .ag-query-l { position: static; margin: .6rem auto 0; text-align: center; }
}
/* folio-page.css sets every li and p of the page at the body size in px, which
   would break this em geometry: the names would keep a 260px radius while the
   plate shrinks. So they inherit the round’s size, and between 861 and 1199
   the round is set at 14px: a 560px plate, with the names 218px from the
   centre, clear of the rim and of the lede and caption. */
@media (min-width: 861px) { .pg-ag .ag-round :is(.ag-seats li, .ag-core) { font-size: inherit; } }
@media (min-width: 861px) and (max-width: 1199px) { .pg-ag .ag-round { font-size: 14px; } }
/* Between 861 and 1279 the margin beside the plate is too narrow for the
   question. It cannot stay in the flow either: it is the round's only in-flow
   child, so it would sit at the top of the plate, over the first names. It is
   therefore hung under the caption, and the figure keeps room for it. */
@media (min-width: 861px) and (max-width: 1279px) {
  .pg-ag .ag-query-l { position: absolute; top: calc(100% + 2.9rem); left: 0; right: 0; margin: 0 auto; text-align: center; }
  .pg-ag .ag-plate { padding-bottom: 3.6rem; }
}
/* on a wide screen the question hangs in the left margin, at the ninth seat’s height */
@media (min-width: 1280px) {
  .pg-ag .ag-query-l { position: absolute; right: calc(100% + 2rem); top: 14%; width: 12rem; margin: 0; text-align: right; }
}
/* on a phone the table stays a table: the plan with its chairs, numbers and the
   point; under it « une question » and its sub-line; then a one-column key */
@media (max-width: 860px) {
  .pg-ag .ag-round { position: relative; width: 100%; }
  .pg-ag .ag-plan-w { position: relative; width: min(19rem, 88vw); margin: 0 auto; }
  .pg-ag .ag-core { position: static; width: auto; margin: .9rem auto 0; }
  .pg-ag .ag-core-q { font-size: 1.5rem; }
  .pg-ag .ag-core-sub { font-size: 1rem; }
  /* The plan is drawn at about half its desktop size here, so the point is
     enlarged to keep the apparent size it has on the home. */
  .pg-ag .ag-plan .ag-pt-core, .pg-ag .ag-plan .ag-pt-pulse { r: 11px; }
  .pg-ag .ag-plan .ag-pt-halo { r: 30px; }
  .pg-ag .ag-seats { display: grid; grid-template-columns: 1fr; column-gap: 1.2rem; margin-top: 1.2rem; }
  .pg-ag .ag-seats li { display: grid; grid-template-columns: 1.6rem auto 1fr; column-gap: .5rem; align-items: baseline; min-height: 44px; padding: .55rem 0;
    text-align: left; border-top: 1px solid rgba(var(--rule), .28); }
  .pg-ag .ag-seats strong { font-size: 1rem; }
  .pg-ag .ag-seats em { font-size: .98rem; }
  .pg-ag .ag-seat-n { display: inline; font: 1.1rem/1.2 'IM Fell English', serif; color: var(--ag-red); }
  .pg-ag .ag-seats .ag-machine { border-top-style: dashed; }
  .pg-ag .ag-query-l { margin: 1rem auto 0; text-align: center; }
}
@media (min-width: 420px) and (max-width: 860px) { .pg-ag .ag-seats { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════ 3 · Le Cycle (fol. iv): a pomegranate’s year in six movements ═══════════ */
.pg-ag .ag-cycle-w { position: relative; margin-top: 2.4rem; }
.pg-ag .ag-mv-g { display: block; width: 6rem; height: auto; overflow: visible; }
.pg-ag .ag-st-ink { fill: none; stroke: var(--sepia); stroke-width: 1.1; stroke-linecap: round; }
.pg-ag .ag-st-fine { stroke-width: .5; opacity: .6; }
.pg-ag .ag-st-leaf { fill: var(--fr-leaf); stroke: var(--sepia); stroke-width: .8; }
.pg-ag .ag-st-petal { fill: var(--fr-petale); stroke: var(--sepia); stroke-width: .8; }
.pg-ag .ag-st-pom { fill: var(--fr-grenade); stroke: var(--sepia); stroke-width: .9; stroke-linejoin: round; }
.pg-ag .ag-st-dots { fill: var(--sepia); }
.pg-ag .ag-st-shine { fill: none; stroke: var(--fr-lustre); stroke-width: 1.6; stroke-linecap: round; }
.pg-ag .ag-st-ground { fill: none; stroke: rgba(var(--metalpoint), .6); stroke-dasharray: 2 3; }
.pg-ag .ag-cycle { list-style: none; margin: 0; padding: 0; }
.pg-ag .ag-mv-n { font: 400 1.4rem/1 'IM Fell English', serif; color: var(--ag-red); }
.pg-ag .ag-mv h3 { margin: .2rem 0 0; font: 400 1.28rem/1.2 'IM Fell English', serif; color: var(--ink); }
.pg-ag .ag-mv-when { margin: .1rem 0 0; font: italic .95rem/1.35 'IM Fell English', serif; color: var(--ink-soft); }
.pg-ag .ag-mv-what { margin: .45rem 0 0; font: 500 .98rem/1.5 'Cormorant Garamond', serif; color: var(--ink); }
.pg-ag .ag-mv-out { margin: .7rem 0 0; font: 600 .76rem/1.35 'Cormorant SC', var(--font-caps); letter-spacing: .12em; color: var(--cc-red); }
.pg-ag .ag-rule { position: relative; max-width: 44rem; margin: 3.4rem auto 0; }
.pg-ag .ag-rule .pg-vellum p:not(.pg-k) { max-width: none; font: italic 500 1.06rem/1.6 'Cormorant Garamond', serif; }
.pg-ag .ag-branch path { fill: none; stroke: var(--sepia); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (min-width: 1200px) {
  .pg-ag .ag-branch { position: absolute; top: 0; left: 0; width: 100%; height: 3rem; }
  .pg-ag .ag-cycle { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.2rem; }
  .pg-ag .ag-mv { display: flex; flex-direction: column; align-items: center; text-align: center; }
  /* The drawing hangs from the branch: this offset lands its stalk on the path. */
  .pg-ag .ag-mv-g { margin-top: .4rem; }
  .pg-ag .ag-mv-out { margin-top: auto; padding-top: .7rem; }
  .pg-ag .ag-mv-out::before { content: ""; display: block; width: 1px; height: .8rem; margin: 0 auto .35rem; background: rgba(var(--rule), .5); }
  .pg-ag .ag-brackets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1rem; }
  .pg-ag .ag-brackets .b0 { grid-column: 1; } .pg-ag .ag-brackets .b2 { grid-column: 2 / 4; } .pg-ag .ag-brackets .b3 { grid-column: 4 / 7; }
  .pg-ag .ag-brackets span { text-align: center; font: 600 .74rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .18em; color: var(--cc-red); }
  .pg-ag .ag-brackets svg { display: block; width: 100%; height: .6rem; margin-bottom: .35rem; overflow: visible; }
  .pg-ag .ag-brackets path { fill: none; stroke: var(--sepia); stroke-width: .9; vector-effect: non-scaling-stroke; }
  .pg-ag .ag-brackets i { font: normal 400 1rem/1 'IM Fell English', serif; letter-spacing: 0; color: var(--ag-red); }
  /* La règle is a rule, not a caveat, so it takes no sanguine. Its leader
     runs from the slip’s top edge up to the third bracket’s label, so the gap
     between them is the leader’s own height: the slip’s -26px margin collapses
     into this one, and its torn edge shows about 21px inside its box, so the
     visible edge stands about 37px under the labels. The leader’s foot lands
     on that edge, 12px inside the slip’s right side, and its point stays a few
     pixels under the label instead of striking through it. */
  .pg-ag .ag-rule { margin-top: 2.6rem; }
  .pg-ag .ag-rule .pg-leader { right: 0; top: -1.1rem; transform: scaleX(-1); }
}
/* below 1200 the year runs down a single stem */
@media (max-width: 1199px) {
  .pg-ag .ag-cycle-w { max-width: 36rem; margin-inline: auto; }
  .pg-ag .ag-branch, .pg-ag .ag-brackets, .pg-ag .ag-rule .pg-leader { display: none; }
  /* The bracket kicker takes the first row; the drawing and the text take the rows below. */
  .pg-ag .ag-mv { position: relative; --kick: 0rem; display: grid; grid-template-columns: 3.8rem auto 1fr; column-gap: .8rem; align-items: baseline; padding: .9rem 0; text-align: left; }
  /* The kicker's row is .6rem and .3rem of margin around one .72rem line at 1.3. */
  .pg-ag .ag-mv[data-bracket] { --kick: 1.836rem; }
  .pg-ag .ag-mv > * { grid-column: 2 / -1; }
  .pg-ag .ag-mv-g { grid-column: 1; grid-row: 2 / span 4; align-self: start; width: 3.8rem; }
  /* The stem is drawn one segment per movement, from just under this drawing
     (y 66 of its 84) to the top of the next drawing's stalk (y 14), so it joins
     each stalk without crossing a fruit and needs no box to hide behind. The
     drawing is 3.99rem tall, so y 66 is 3.14rem below its top and y 14 is
     .665rem; a next movement with a kicker starts its drawing lower by that row. */
  .pg-ag .ag-mv::after { content: ""; position: absolute; left: 1.9rem; width: 1px; background: var(--sepia); opacity: .7;
    top: calc(.9rem + var(--kick) + 3.14rem); bottom: calc(-.9rem - .665rem); }
  .pg-ag .ag-mv:has(+ .ag-mv[data-bracket])::after { bottom: calc(-.9rem - 1.836rem - .665rem); }
  .pg-ag .ag-mv:last-child::after { content: none; }
  .pg-ag .ag-mv .ag-mv-n { grid-column: 2; grid-row: 2; font-size: 1.2rem; }
  .pg-ag .ag-mv h3 { grid-column: 3; grid-row: 2; margin: 0; }
  .pg-ag .ag-mv-when { grid-row: 3; } .pg-ag .ag-mv-what { grid-row: 4; } .pg-ag .ag-mv-out { grid-row: 5; }
  /* The kicker is kept on one line, because the stem is measured from its one-line height. */
  .pg-ag .ag-mv[data-bracket]::before { content: attr(data-bracket); grid-column: 1 / -1; grid-row: 1; margin: .6rem 0 .3rem 4.6rem;
    font: 600 .72rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .18em; color: var(--cc-red); white-space: nowrap; }
  .pg-ag .ag-cycle .ag-grow { --d: .15s !important; }       /* each stage grows as its own row arrives */
}

/* ═══════════ 4 · La troisième salle (fol. v): the fruit opened ═══════════ */
.pg-ag .ag-reach-fig { margin: 0; }
.pg-ag .ag-fruit-big { display: block; width: min(15rem, 100%); height: auto; margin: 0 auto; overflow: visible; }
.pg-ag .ag-reach-t { margin-top: .6rem; text-align: center; font: italic 1.3rem/1.3 'IM Fell English', serif; color: var(--display-ink); }
.pg-ag .ag-outs { list-style: none; margin: 0; padding: 0; }
.pg-ag .ag-outs li { display: grid; grid-template-columns: 1.4rem 1fr; column-gap: .7rem; padding: .9rem 0; border-top: 1px solid rgba(var(--rule), .25); }
.pg-ag .ag-aril { grid-column: 1; grid-row: 1 / span 2; width: 14px; height: 16px; margin-top: .35rem; overflow: visible; }
.pg-ag .ag-outs strong { font: 400 1.15rem/1.3 'IM Fell English', serif; color: var(--ink); }
.pg-ag .ag-outs em { font: italic .98rem/1.4 'IM Fell English', serif; color: var(--ink-soft); }
.pg-ag .ag-sober { max-width: 42rem; margin: 2rem auto 0; text-align: center; font: italic 1rem/1.55 'IM Fell English', serif; color: var(--ink-soft); }
/* Four grains fly out of the opened fruit toward the outputs, once, so that
   each output is seen to come from the same fruit. */
@media (prefers-reduced-motion: no-preference) {
  .pg-ag .ag-grain { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .9s cubic-bezier(.2, .8, .3, 1) var(--d, 0s), opacity .6s var(--ease-out) var(--d, 0s); }
  .js .pg-ag .ag-reach-fig:not(.in) .ag-grain { opacity: 0; transform: translate(-40px, 0) scale(.6); }
}
@media (min-width: 1024px) {
  .pg-ag .ag-reach-grid { display: grid; grid-template-columns: 4fr 8fr; align-items: center; column-gap: 3.4rem; margin-top: 2.2rem; }
  /* The six outputs are set in three rows of two, because a single column
     beside the fruit would run far below it. */
  .pg-ag .ag-outs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.6rem; }
}
@media (max-width: 1023px) {
  .pg-ag .ag-reach-grid { max-width: 36rem; margin: 2.4rem auto 0; }
  .pg-ag .ag-fruit-big { width: min(10rem, 50vw); }
  .pg-ag .ag-outs { margin-top: 1.6rem; }
}

/* ═══════════ 5 · Participer (fol. vi): the ask, half-way down ═══════════ */
.pg-ag .ag-who { max-width: 44rem; margin: 2.2rem auto 0; text-align: center; }
.pg-ag .ag-who-t { max-width: none; margin: 0; font: italic 400 clamp(1.3rem, 1.9vw, 1.7rem)/1.35 'IM Fell English', serif; color: var(--display-ink); text-wrap: balance; }
.pg-ag .ag-who-l { margin: .8rem auto 0; max-width: 38rem; }
.pg-ag .ag-way { margin-top: clamp(1.8rem, 4vh, 2.4rem); padding-top: clamp(1.2rem, 3vh, 1.8rem); border-top: 1px solid rgba(var(--rule), .28); }
.pg-ag .ag-way-n { display: block; font: 400 2.4rem/1 'IM Fell English', serif; color: var(--rubric); }
.pg-ag .ag-way-t { margin: .4rem 0 .6rem; font: italic 400 clamp(1.7rem, 2.4vw, 2.3rem)/1.15 'IM Fell English', serif; color: var(--display-ink); }
.pg-ag .ag-way-who { max-width: 24rem; margin: 0 0 1.4rem; font: 500 1.06rem/1.55 'Cormorant Garamond', serif; color: var(--ink-soft); }
/* This link and the one at the end of the questions stay inline in their
   sentence; padding on an inline box does not move the lines, so it widens
   each target to 44px without changing the text. */
.pg-ag .ag-way-who a { padding-block: .72rem; color: inherit; text-decoration: underline 1px rgba(var(--rule), .6); text-underline-offset: .22em; }
.pg-ag .pg-faq-end a { padding-block: .72rem; }
.pg-ag .ag-way-who a:hover { color: var(--cc-red); text-decoration-color: currentColor; }
.pg-ag .ag-way-go { margin: 0; }
.pg-ag a.pg-seal-btn { text-decoration: none; }
.pg-ag .ag-addr { max-width: 24rem; margin: .9rem 0 0; font: italic .95rem/1.5 'IM Fell English', serif; color: var(--ink-soft); }
.pg-ag .ag-mail { font-style: normal; color: var(--ink); user-select: all; }
/* The page's text links take a 44px target. The negative margin gives back
   what the padding adds, so the lines and the gaps around them do not move. */
.pg-ag .pg-link { padding-block: .8rem; margin-block: -.2rem; }
.pg-ag .pg-fiche dd .pg-link { padding-block: .8rem; margin-block: -.15rem -.3rem; }
/* The mail, telephone and WhatsApp links are set 45px apart and padded to
   44px, so each is a full target and the targets do not overlap. */
.pg-ag .pg-fiche dd:nth-of-type(2) { line-height: 2.75; }
.pg-ag .pg-fiche dd:nth-of-type(2) a { padding-block: .75rem; }
/* The space before the button in the HTML gives the gap on a shared line and
   collapses at the start of a new one, so the button takes no margin of its
   own that would indent it under the address. */
.pg-ag .ag-copy { margin-left: 0; padding-block: .88rem; margin-block: -.28rem; font-size: .8rem; }
.pg-ag .ag-copy[hidden] { display: none; }            /* .pg-link’s display would otherwise override [hidden] */
.pg-ag .ag-why { margin: 0; }
.pg-ag .ag-why dt { margin: 0; font: 400 1.22rem/1.25 'IM Fell English', serif; color: var(--ink); }
.pg-ag .ag-why dt::first-letter { color: var(--rubric); }
.pg-ag .ag-why dd { max-width: 34rem; margin: .3rem 0 0; font: 500 1.04rem/1.62 'Cormorant Garamond', serif; color: var(--ink); }
/* way III: the page left blank on purpose, ruled like the story’s .ruling */
.pg-ag .ag-blank .pg-sheet { padding: 2.4rem 2.6rem 2rem; }
.pg-ag .ag-blank .pg-sheet p { max-width: none; margin: 0; font: italic 500 1.08rem/1.6 'Cormorant Garamond', serif; color: var(--ink); }
.pg-ag .ag-ruled { display: block; height: 3.2rem; margin-top: .6rem;
  background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(var(--metalpoint), .22) 31px 32px); }
.pg-ag .ag-part > .pg-wrap > .ag-query.ag-c { margin-top: clamp(2.2rem, 5vh, 3.2rem); }
.pg-ag .ag-public { position: relative; max-width: 40rem; margin: 2.4rem auto 0; }
.pg-ag .ag-public .pg-vellum p:not(.pg-k):not(.ag-public-go) { max-width: none; font: italic 500 1.06rem/1.6 'Cormorant Garamond', serif; }
.pg-ag .ag-public-go { display: flex; flex-wrap: wrap; gap: 0 1.4rem; max-width: none; margin-top: .6rem; }
.pg-ag .ag-part .pg-fine { margin-top: 2rem; }
.pg-ag .ag-tail { display: block; width: 9rem; height: auto; margin: 1.4rem auto 0; overflow: visible; }
/* Each way is set as a spread, who and how on the left and the reasons on
   the right, so that the action is always beside the reasons for it. */
@media (min-width: 1024px) {
  .pg-ag .ag-way { display: grid; grid-template-columns: minmax(15rem, 4fr) 8fr; column-gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
  .pg-ag .ag-why { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.4rem; }
  /* Way II has only two reasons, and its side column is the taller: stacked,
     they fill the space beside it instead of leaving a hole under a row. */
  .pg-ag .ag-why-2 { grid-template-columns: 1fr; }
  /* The seal overlaps the cartouche’s left end, so the button is moved in to
     keep the seal inside the column. */
  .pg-ag .ag-way-go .pg-seal-btn { margin-left: 1.1rem; }
}
/* Way III’s sheet is narrowed, because its deckled fringe reaches past its
   edge and would otherwise widen the page. */
@media (min-width: 861px) { .pg-ag .ag-blank { max-width: min(40rem, 100% - 2.5rem); } }
@media (min-width: 861px) and (max-width: 1023px) {
  .pg-ag .ag-way-body { margin-top: 2rem; }
  .pg-ag .ag-why { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; }
  .pg-ag .ag-way-go .pg-seal-btn { margin-left: 1.1rem; }
}
/* On a phone the action comes after the reasons, so it is read before it is
   pressed: the side’s pieces join the way’s own column and are reordered. */
@media (max-width: 860px) {
  .pg-ag .ag-way { display: flex; flex-direction: column; }
  .pg-ag .ag-way-side { display: contents; }
  .pg-ag .ag-way-n { order: 1; text-align: center; }
  .pg-ag .ag-way-t { order: 2; text-align: center; }
  .pg-ag .ag-way-who { order: 3; margin-inline: auto; text-align: center; }
  .pg-ag .ag-way-body { order: 4; }
  .pg-ag .ag-way-go { order: 5; display: flex; justify-content: center; margin-top: 1.8rem; }
  .pg-ag .ag-way-go .pg-seal-btn { width: 100%; justify-content: center; }
  .pg-ag .ag-addr { order: 6; margin-inline: auto; text-align: center; }
  .pg-ag .ag-why { display: grid; gap: 1.2rem; }
  .pg-ag .ag-way-body .ag-query { margin-inline: auto; text-align: center; }
  .pg-ag .ag-blank .pg-sheet { padding: 2.4rem var(--edge-pad); }
  /* Way III has no « who » line, so its sheet would follow the title directly.
     The band's deckled fringe rises 40px above the sheet, so the sheet keeps
     3rem from the title, or the fringe would cut the title's descenders. */
  .pg-ag #un-format .ag-way-body { margin-top: 3rem; }
}

/* ═══════════ 6 · Les missions (fol. vii): rings on a cord ═══════════ */
.pg-ag .ag-chainlist { position: relative; list-style: none; max-width: 60rem; margin: 2.2rem auto 0; padding: 0; }
.pg-ag .ag-chainlist::before { content: ""; position: absolute; left: 50%; top: 1.5rem; bottom: 1.5rem; width: 1px; background: var(--sepia); opacity: .5; }
.pg-ag .ag-mi { position: relative; display: grid; grid-template-columns: 1fr 5rem 1fr; align-items: start; }
.pg-ag .ag-mi + .ag-mi { margin-top: -2.2rem; }                 /* the sides alternate, so the rows interleave */
.pg-ag .ag-mi-ring { grid-column: 2; grid-row: 1; justify-self: center; display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 1.3px solid var(--sepia); border-radius: 50%; background: var(--paper); font: 400 1.1rem/1 'IM Fell English', serif; color: var(--ag-red); }
.pg-ag .ag-mi:nth-child(odd) .ag-mi-t { grid-column: 1; grid-row: 1; text-align: right; padding-right: 1rem; }
.pg-ag .ag-mi:nth-child(even) .ag-mi-t { grid-column: 3; grid-row: 1; padding-left: 1rem; }
.pg-ag .ag-mi-t h3 { margin: .55rem 0 .3rem; font: 400 1.3rem/1.2 'IM Fell English', serif; color: var(--ink); }
.pg-ag .ag-mi-t p { max-width: 22rem; margin: 0; font-size: 1rem; }
.pg-ag .ag-mi:nth-child(odd) .ag-mi-t p { margin-left: auto; }
/* A mission told in one line makes a short row, and the -2.2rem pull would
   then bring the next ring onto its own. Each row is given at least 6.4rem, so
   the rings are 4.2rem apart and the texts on one side at least 2rem apart. */
@media (min-width: 1024px) { .pg-ag .ag-mi { min-height: 6.4rem; } }
@media (prefers-reduced-motion: no-preference) {
  .js .pg-ag .ag-mi:not(.in) .ag-mi-ring { opacity: 0; transform: scale(.6); }
  .pg-ag .ag-mi-ring { transition: transform .6s cubic-bezier(.3, 1.35, .5, 1) .1s, opacity .4s var(--ease-out) .1s; }
}
@media (max-width: 1023px) {
  .pg-ag .ag-chainlist { max-width: 36rem; }
  .pg-ag .ag-chainlist::before { left: 1.5rem; }
  .pg-ag .ag-mi { grid-template-columns: 3rem 1fr; column-gap: .9rem; }
  .pg-ag .ag-mi + .ag-mi { margin-top: 1.2rem; }
  .pg-ag .ag-mi-ring { grid-column: 1; }
  .pg-ag .ag-mi:nth-child(n) .ag-mi-t { grid-column: 2; text-align: left; padding: 0; }
  .pg-ag .ag-mi:nth-child(n) .ag-mi-t p { margin-left: 0; }
}

/* ═══════════ 7 · Les Semaines (fol. viii): the almanac leaf ═══════════ */
.pg-ag .ag-almanac { max-width: 66rem; margin: 2.4rem auto 0; }
/* the sheet’s fringe reaches 40px past its edge and it is tilted: on a screen
   too narrow for its 66rem it keeps a margin, or the fringe would widen the page */
@media (min-width: 861px) { .pg-ag .ag-almanac { max-width: min(66rem, 100% - 2.5rem); } }
.pg-ag .ag-almanac .pg-sheet { padding: 2.4rem 2.8rem; }
/* The label is balanced so that a phone breaks it after the comma, not before « août ». */
.pg-ag .ag-months-k { max-width: none; text-align: center; text-wrap: balance; }
.pg-ag .ag-months { list-style: none; display: grid; grid-template-columns: repeat(12, 1fr); margin: .4rem 0 0; padding: 0; }
.pg-ag .ag-months li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 5rem; border-left: 1px solid rgba(var(--rule), .22); }
.pg-ag .ag-months li:first-child { border-left: 0; }
.pg-ag .ag-months span { position: relative; padding: .35rem .2rem; font: 600 .74rem/1 'Cormorant SC', var(--font-caps); letter-spacing: .1em; color: var(--ink-soft); }
.pg-ag .ag-months .is-wk span { color: var(--cc-red); }
/* The month is ringed by hand, so the ring is slightly irregular and tilted. */
.pg-ag .ag-months .is-wk span::before { content: ""; position: absolute; inset: -.25rem -.45rem; border: 1.2px solid var(--rubric); border-radius: 50% 46% 52% 48%; transform: rotate(-6deg); }
.pg-ag .ag-mfruit { width: 2.2rem; height: 2.2rem; margin-bottom: .5rem; overflow: visible; }
.pg-ag .ag-wks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(var(--rule), .3); }
.pg-ag .ag-wk-when { margin: 0; font: 600 .78rem/1.35 'Cormorant SC', var(--font-caps); letter-spacing: .14em; color: var(--cc-red); }
.pg-ag .ag-wk h3 { margin: .3rem 0 .4rem; font: 400 1.45rem/1.2 'IM Fell English', serif; color: var(--ink); }
.pg-ag .ag-wk p:not(.ag-wk-when) { margin: 0; font: 500 1rem/1.58 'Cormorant Garamond', serif; color: var(--ink); }
.pg-ag .ag-alm-note { max-width: none; margin: 1.6rem 0 0; text-align: center; font: italic .92rem/1.5 'IM Fell English', serif; color: var(--ink-soft); }
/* The four rubric rings are drawn in calendar order, so the year is read
   from September as the leaf is. */
@media (prefers-reduced-motion: no-preference) {
  .js .pg-ag .ag-almanac:not(.in) .is-wk span::before { opacity: 0; transform: rotate(-30deg) scale(.7); }
  .pg-ag .ag-months .is-wk span::before { transition: transform .7s var(--ease-out), opacity .5s var(--ease-out); }
  .pg-ag .ag-months .is-wk:nth-child(2) span::before { transition-delay: .15s; }
  .pg-ag .ag-months .is-wk:nth-child(7) span::before { transition-delay: .3s; }
  .pg-ag .ag-months .is-wk:nth-child(9) span::before { transition-delay: .45s; }
}
@media (min-width: 861px) and (max-width: 1199px) { .pg-ag .ag-wks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .pg-ag .ag-almanac .pg-sheet { padding: 2.4rem var(--edge-pad); }
  /* Twelve months do not fit across a phone, so the year is set in two rows
     of six, September to February and March to August. */
  .pg-ag .ag-months { grid-template-columns: repeat(6, 1fr); row-gap: .6rem; }
  .pg-ag .ag-months li { height: 4.4rem; }
  .pg-ag .ag-months li:nth-child(7) { border-left: 0; }
  .pg-ag .ag-mfruit { width: 1.9rem; height: 1.9rem; }
  .pg-ag .ag-wks { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ═══════════ 8 · Le lieu (fol. ix): Pl. II–VI ═══════════ */
.pg-ag .ag-venue-row { margin-top: 2rem; }
@media (min-width: 1024px) {
  .pg-ag .ag-venue-row { display: grid; grid-template-columns: 6fr 5fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
  /* The leader is turned to run from the slip toward Pl. II, which stands on
     its left here. */
  .pg-ag .ag-venue-row .pg-fiche .pg-leader { right: auto; left: -3.4rem; top: 40%; transform: scaleX(-1); }
}
@media (max-width: 1023px) { .pg-ag .ag-venue-row .pg-fiche { max-width: 36rem; margin: 3rem auto 0; } }
@media (min-width: 861px) and (max-width: 1023px) { .pg-ag .ag-venue-row > .pg-plate-w { max-width: 40rem; margin-inline: auto; } }
.pg-ag .ag-plates { margin-top: 1.8rem; }
/* The home keeps 2.8rem under this note for what follows it; here it ends the
   section, whose own padding already gives that space. */
.pg-ag .ag-venue .pg-note { margin-bottom: 0; }
/* The photographs of the room as the room is (the owner, 2026-10-01): three of them are panoramas, and cut
   to 3:2 they showed one end of the hall — the curtains, a radiator — rather than the room. The three
   panoramas (Pl. II the evening, Pl. III the empty hall, Pl. VI the reception) are now rips across the whole
   leaf (folio-page.css .pg-rip); the address slip stands alone between the first two, and the projection
   wall and the doors are printed side by side. */
@media (min-width: 861px) {
  .pg-ag .ag-plates { grid-template-columns: repeat(2, 1fr); margin-top: 3.4rem; }
  /* (the home spans its plates 3/2/3: undone here) */
  .pg-ag .ag-plates > .pg-plate-w { grid-column: auto; }
}
/* the slip, alone now, centred under the evening (its leader pointed at a plate beside it) */
.pg-ag .ag-venue-row { display: block; max-width: 38rem; margin: 2.8rem auto 0; }
.pg-ag .ag-venue-row .pg-leader { display: none; }
.pg-ag .ag-venue > .pg-wrap > .pg-rip:first-of-type { margin-top: 2.4rem; }

/* ═══════════ 9 · Questions (fol. x), then the closing seal ═══════════ */
/* « Au-delà de la salle » is too long for the hanging label’s 10rem and would
   leave « salle » alone on the second line; balanced, it breaks in the middle. */
.pg-ag .pg-faq-g > h3 { text-wrap: balance; }
.pg-ag .ag-envoi { margin: 3.2rem auto 0; text-align: center; }
/* The ribbon hangs about 1.6rem below the seal's box (to y 138 of its 100),
   so the line under it keeps 2.3rem, or the tails would cross its capitals. */
.pg-ag .ag-envoi-seal { display: block; width: 4.2rem; height: 4.2rem; margin: 0 auto 2.3rem; overflow: visible; }
.pg-ag .ag-envoi-t { max-width: none; margin: 0; font: italic 1.4rem/1.35 'IM Fell English', serif; color: var(--display-ink); }
.pg-ag .ag-envoi-go { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 1rem; max-width: none; margin: .8rem 0 0; }
.pg-ag .ag-envoi-go > span { color: var(--rubric); }
.pg-ag .ag-envoi-back { max-width: none; margin: .4rem 0 0; }
@media (max-width: 860px) { .pg-ag .ag-envoi-go { flex-direction: column; } .pg-ag .ag-envoi-go > span { display: none; } }
/* The seal presses in once. It is not a .cseal, because folio.js would take
   that over and animate it as the story’s. */
@media (prefers-reduced-motion: no-preference) {
  .js .pg-ag .ag-envoi:not(.in) .ag-envoi-seal { opacity: 0; transform: scale(1.15); }
  .pg-ag .ag-envoi-seal { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1) .2s, opacity .4s var(--ease-out) .2s; }
}

/* ═══════════ Reduced motion: everything complete at first paint ═══════════
   Every rule that hides something before its arrival already sits inside
   prefers-reduced-motion: no-preference; this is the safety net under them. */
@media (prefers-reduced-motion: reduce) {
  .pg-ag :is(.ag-grow, .ag-ink, .ag-fseat, .ag-grain, .ag-mi-ring, .ag-mark) { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  /* The chairs only fade. Each is placed by an SVG transform attribute, which
     a CSS transform would replace, so they are shown but never un-transformed. */
  .pg-ag .ag-chairs > g { opacity: 1 !important; transition: none !important; }
  .pg-ag .ag-hl circle { opacity: 0 !important; }
}