/* ═══════════════════════════════════════════════════════════════
   Le Folio — the five small pages (Horaires, Mentions, 404, Merci,
   Confirmé), as leaves and letters of the same notebook.

   Loaded after main.css and folio-page.css by folio-horaires.html,
   folio-mentions.html, folio-404.html, folio-merci.html and
   folio-confirme.html only; their behaviour is js/folio-pages.js.
   Every class here starts with pgx- (the calendar's own .cal-* classes,
   which calendar.js writes, are restyled under .pgx-cal), so nothing on
   the home page or the Agora can be touched by it.

   There are two templates. The Leaf (Horaires, Mentions) is the home
   page's lower half reduced: a sheet that rises from the desk under the
   header, with a torn top edge, and ends on the colophon. The Sheet on the
   desk (404, Merci, Confirmé) leaves the whole screen to the desk and lays
   one deckled sheet on it, as at the story's opening. As in folio.css
   there is no filter and no blend mode, and what moves is moved by
   transform or opacity alone.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════ Tokens ═══════════
   folio-page.css reads five inks that css/folio.css defines for the story.
   folio.css is the story's engine and is not loaded here, so the inks are
   copied; keep them in step with it. */
:root { --rubric: #9a3a20; --sanguine: #a4442c; --sepia: #4a3522; --metalpoint: 120, 110, 92; --desk: #6f5a3e; }
html[data-theme="dark"] { --rubric: #d0785a; --sanguine: #d9826a; --sepia: #e6d6b4; --metalpoint: 170, 158, 132; --desk: #070504; }
/* the fruits' washes: the story's own (js/folio.js, fruitSvgs), lighter by night so they still read on dark paper */
:root {
  --fr-grenade: rgba(170, 62, 44, .5); --fr-poire: rgba(176, 160, 74, .48); --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);
}
html[data-theme="dark"] {
  --fr-grenade: rgba(214, 112, 88, .42); --fr-poire: rgba(200, 188, 110, .36); --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);
}

/* The header's height, as measured at each width. folio-pages.js writes the
   exact value on <html> once it runs; starting from the measured one means the
   leaf and the sheet do not move when it does, and anchors clear the header
   even before it has run. Since the logotype (folio-page.css) the header is as
   tall as the stacked name, whatever the width: 84px on a computer, 85px on a
   phone, 86px below 400px, where the name is set a shade larger. The line
   beside the name never wraps (it gives way instead), so the narrowest phones
   no longer need a taller header of their own, with or without FR·EN·ES. */
:root { --pg-hd: 5.25rem; }
@media (max-width: 860px) { :root { --pg-hd: 5.3125rem; } }
@media (max-width: 400px) { :root { --pg-hd: 5.375rem; } }

/* the sprite holds symbols only; it must take no room and never be seen */
.pgx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ═══════════ The header on these pages ═══════════
   folio-page.css's three states are reused as they are (the body carries
   narrative-done because these leaves start where the story ends). Two
   things are added: the current page's link is underlined in rubric, and
   without a script the header always sits on paper, since nothing would
   then tell it when the leaf is under it. */
.site-nav > a[aria-current="page"] { color: var(--ink); }
.site-nav > a[aria-current="page"]::after { transform: scaleX(1); background: var(--rubric); }
html:not(.js) .site-header::before { opacity: 1 !important; background: var(--paper); }
html:not(.js) body.pgx :is(.site-nav > a:not(.btn), .lang-switch a, .lang-switch span, .theme-toggle, .nav-toggle) { color: var(--ink) !important; }
html:not(.js) body.pgx .nav-toggle span { background: var(--ink) !important; }
/* main.css dims EN and ES to .62, which leaves them near 3:1 on the desk and
   on the paper strip; here they keep full ink, and the current language is
   told apart by a rubric underline instead (main.css's olive is not a Codex ink).
   On the desk, folio-page.css's stronger rule keeps every one of them cream. */
body.pgx .lang-switch a, body.pgx .lang-switch span:not(.lang-sep) { opacity: 1; }
body.pgx .lang-switch [aria-current] { color: var(--ink); text-decoration: underline 1px var(--rubric); text-underline-offset: .3em; }

/* The falling signs: a legal text is read, and a still life on the desk
   does not rain. Horaires keeps them, as the home page does below the story. */
body.pgx--mentions .driftfall, body:is(.pgx--lost, .pgx--merci, .pgx--confirme) .driftfall { display: none; }
/* On Horaires they fall at half main.css's strength (.10, and .085 on the dark
   sheet), because they drift across a table of dates and would otherwise
   compete with its numerals. */
html body.pgx--horaires .driftfall { opacity: .05; }
html[data-theme="dark"] body.pgx--horaires .driftfall { opacity: .045; }

/* ═══════════ The fruits (the story's drawings, as a static sprite) ═══════════
   Colours come through classes, so both themes work from one drawing. A
   fruit is never gold, never moves once it has arrived, and never shares a
   screen with another. */
.pgx-fruit { display: block; width: 2.6rem; height: 2.6rem; overflow: visible; }
.pgx-fruit[hidden] { display: none; }
.fr-w { stroke: var(--sepia); stroke-width: .9; stroke-linejoin: round; }
.fr-grenade { fill: var(--fr-grenade); } .fr-poire { fill: var(--fr-poire); } .fr-cerise { fill: var(--fr-cerise); }
.fr-figue { fill: var(--fr-figue); } .fr-raisin { fill: var(--fr-raisin); }
.fr-leaf { fill: var(--fr-leaf); stroke: var(--sepia); stroke-width: .8; }
.fr-stem { fill: none; stroke: var(--sepia); stroke-width: 1.1; stroke-linecap: round; }
.fr-l { fill: none; stroke: var(--sepia); stroke-width: .5; opacity: .6; }

/* ═══════════ Template A: the Leaf (Horaires, Mentions) ═══════════
   The leaf starts a little below the header, so at the top of the page the
   header lies on the desk and takes its cream ink — which is also right
   before any script has run. The value of --pg-hd at :root is the header's
   measured height (84–86px since the logotype), so the leaf does not move when
   folio-pages.js replaces it with the exact value. */
.pgx-leaf { margin-top: calc(var(--pg-hd, 4.85rem) + clamp(.9rem, 2.6vh, 1.8rem)); }
/* the torn top edge (folio.css's .page::before, which is not loaded here);
   the strip overlaps the leaf by 12px, as there */
.pgx-leaf::before {
  content: ""; position: absolute; left: 0; right: 0; top: -36px; height: 48px; pointer-events: none;
  background: url("../assets/img/torn-edge.webp") -731px 0 / 1024px 48px repeat-x;
}
html[data-theme="dark"] .pgx-leaf::before { background-image: url("../assets/img/torn-edge-dark.webp"); }
/* each page is torn at a different place in the strip, so the two tears differ */
body.pgx--mentions .pgx-leaf::before { background-position-x: -289px; }
/* the header already sits above the leaf, so the first section needs no room for it */
.pgx-leaf > .pg-sec:first-child { padding-top: clamp(3rem, 8vh, 5rem); }

/* ═══════════ Template B: the Sheet on the desk (404, Merci, Confirmé) ═══════════
   This is the .pg-deckle recipe under a class of its own: folio-page.css
   turns every .pg-deckle into a borderless torn band on phones, which would
   strip a letter of its paper. There is no .page here: the ground is the
   desk, and .page's paper would cover it. */
.pgx-desk { min-height: 100svh; display: grid; place-items: center; padding: calc(var(--pg-hd, 4.85rem) + 2.2rem) var(--edge-pad) 5.5rem; }
.pgx-sheet-w { width: min(var(--pgx-sheet-w, 44rem), 100%); }
/* Only the paper is turned; the text stays upright on the untransformed
   sheet. A sheet turned whole, text and all, is rasterised as one layer and
   then resampled by the compositor at the tilt, which softens the letter's
   text; upright, the text keeps its own crisp rendering, and at under a
   degree nobody reads it as crooked. The sheet is isolated so that its
   paper and its shadow, drawn at negative z-index, stay inside it. */
.pgx-sheet {
  position: relative; isolation: isolate;
  padding: clamp(2.6rem, 5vw, 4.2rem) clamp(2.2rem, 5vw, 4.4rem); color: var(--ink);
}
/* The paper and its deckle are one pseudo-element, turned by the tilt and
   rasterised as a layer of its own (translateZ) before it is turned, so the
   deckle's nine border-image slices are joined upright and cannot be
   antialiased apart at the tilt. The grain fills the padding box, and a flat
   layer of paper reaches under the deckle's band to the sheet's own edge, as
   tools/build-folio-paper.mjs prescribes, so a join that lands between device
   pixels shows paper rather than desk. */
.pgx-sheet::before {
  content: ""; position: absolute; inset: -40px; z-index: -1; pointer-events: none;
  border: 64px solid transparent; border-image: url("../assets/img/deckle.webp") 64 / 64px / 0 round;
  background:
    url("../assets/img/grain-light.webp") 0 0 / 256px 256px padding-box,
    linear-gradient(var(--mount), var(--mount)) 50% 50% / calc(100% - 80px) calc(100% - 80px) no-repeat border-box;
  transform: rotate(var(--tilt, 0deg)) translateZ(0);
}
/* The slices are drawn at 64px, their own size in the image: any smaller and
   the scaled slices no longer meet, which brings the hairlines back. They
   stay `round` rather than `stretch`, because a side drawn as one stretched
   tile would pull the 128px of torn fibre in the image's middle out to the
   whole length of the sheet. */
.pgx-sheet::after {
  content: ""; position: absolute; inset: 12px 6px -10px; z-index: -2; pointer-events: none;
  box-shadow: 0 26px 60px rgba(var(--shade), .34), 0 4px 12px rgba(var(--shade), .18);
  transform: rotate(var(--tilt, 0deg));
}
html[data-theme="dark"] .pgx-sheet::before {
  border-image-source: url("../assets/img/deckle-dark.webp");
  background-image: url("../assets/img/grain-dark.webp"), linear-gradient(var(--mount), var(--mount));
}
/* the sheet's content sits above its own fringe */
.pgx-sheet > * { position: relative; z-index: 3; }

/* ═══════════ The compact colophon (the desk pages) ═══════════
   A letter or a stray leaf needs the publisher's line and a way to the
   legal text, not the whole colophon: it stays on the desk, under the sheet. */
.pg-colophon.pgx-colo-min { display: block; min-height: 0; padding: 0 0 2.2rem; background: transparent; }
.pg-colophon.pgx-colo-min::before { content: none; }
.pgx-colo-min .pg-colo-base { margin-top: 0; }
.pgx-colo-min nav { font: 500 1rem/1.7 'Cormorant Garamond', var(--font-serif); color: var(--desk-ink); }
/* folio-page.css pads these links to 36px; a phone's thumb needs 44 */
.pgx-colo-min .pg-colo-base a { display: inline-block; padding-block: .82rem; }
/* On a narrow phone the two links stack, and the dot between them goes, so it
   is never left hanging at the end of the first line. */
@media (max-width: 400px) {
  .pgx-colo-min nav { display: flex; flex-direction: column; align-items: center; }
  .pgx-sep { display: none; }
  /* the letterhead's address likewise: the street on one line, the postcode and city on the next */
  .pgx-lh-addr .pgx-nw { display: block; }
}

/* folio-page.css pads a .pg-link to 38px; on these pages every one reaches 44px */
.pgx .pg-link { padding-block: .82rem; }

/* ═══════════ Horaires — the almanac (fol. A) ═══════════ */
.pgx-hours .pg-display { max-width: none; }
/* The lede runs to three lines at 40rem; balanced, it ends on a full line rather than on a short one. */
.pgx-hours .pg-lede { text-wrap: balance; }
/* the room above the grid is the month's fruit's: it must hang in air, clear of the lede and the › button */
.pgx-hours-grid { margin-top: clamp(4.2rem, 8vh, 5.4rem); }

/* The drawn month: printed on the leaf, with no paper object around it —
   a ruled table in the notebook's ink. Every main.css .cal* property is
   overridden inside .pgx-cal. */
.pgx-cal { position: relative; margin: 0; max-width: 46rem; padding: 0; border: 0; background: none; box-shadow: none; }
.pgx-cal .cal-head {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: .6rem; margin: 0 0 .2rem; padding-bottom: .7rem;
  border-bottom: 1.2px solid var(--sepia);
}
.pgx-cal .cal-month {
  margin: 0; text-align: center; font: 400 clamp(1.6rem, 2.4vw, 2.1rem)/1.1 'IM Fell English', serif;
  font-variant: normal; letter-spacing: .01em; color: var(--display-ink);
}
/* calendar.js writes the month in lower case (« septembre 2026 »), so its
   first letter is raised here and set in rubric, as every title's initial is. */
.pgx-cal .cal-month::first-letter { text-transform: uppercase; color: var(--rubric); }
.pgx-cal .cal-nav {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 .15rem; border-radius: 50%;
  border: 1px solid rgba(var(--rule), .5); background: none; color: var(--ink);
  font: 1.5rem/1 'IM Fell English', serif; cursor: pointer; transition: transform .3s var(--ease-out);
}
.pgx-cal .cal-nav:hover:not(:disabled) { background: none; color: var(--cc-red); border-color: currentColor; }
.pgx-cal .cal-nav:disabled { opacity: .35; cursor: default; }
.pgx-cal .cal-nav:focus-visible { outline: 1.5px dashed var(--rubric); outline-offset: 3px; }

/* the grid, ruled by hand: the head's sepia line above, one below, hairlines inside */
.pgx-cal .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border-bottom: 1.2px solid var(--sepia); }
.pgx-cal .cal-grid > * { border-right: 1px solid rgba(var(--rule), .38); border-bottom: 1px solid rgba(var(--rule), .38); }
.pgx-cal .cal-grid > :nth-child(7n) { border-right: 0; }
.pgx-cal .cal-dow {
  padding: .7rem 0 .55rem; opacity: 1; text-align: center; font: 600 .76rem/1 'Cormorant SC', var(--font-caps);
  font-variant: normal; letter-spacing: .16em; color: var(--cc-red); border-bottom-color: rgba(var(--rule), .6);
}
.pgx-cal .cal-cell {
  position: relative; aspect-ratio: 1 / .78; min-height: 44px; display: block; padding: .45rem .55rem; gap: 0;
  border-top: 0; border-left: 0; background: none; font: inherit; color: var(--ink); opacity: 1;
}
/* The days are set in IM Fell, whose old-style figures are the numerals of an old almanac. */
.pgx-cal .cal-num { font: 400 1.12rem/1 'IM Fell English', serif; color: var(--ink); }
/* The days of the neighbouring months are hatched lightly, as a scribe fills a
   box that holds nothing, so the grid stays whole without inventing dates. */
.pgx-cal .cal-blank { background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(var(--metalpoint), .2) 7px 8px); }
/* The days gone: struck through in metalpoint, as in a diary, and read in the
   softer ink. The stroke belongs to the numeral, not to the cell, so it crosses
   a single figure and a double one alike, at every width. The cell's own
   ::after stays empty, so nothing but the numeral is struck. */
.pgx-cal .cal-cell.is-past { opacity: 1; }
.pgx-cal .cal-cell.is-past::after { content: none; }
.pgx-cal .cal-cell.is-past .cal-num { position: relative; display: inline-block; color: var(--ink-soft); }
.pgx-cal .cal-cell.is-past .cal-num::after {
  content: ""; position: absolute; left: -.3em; right: -.3em; top: 52%; height: 1px;
  background: rgba(var(--metalpoint), .75); transform: rotate(-28deg);
}
/* today: ringed in rubric by hand, in two passes of the pen, and never gold */
.pgx-cal .cal-cell.is-today { border-color: rgba(var(--rule), .38); border-top: 0; border-left: 0; font-weight: 400; color: var(--ink); }
.pgx-cal .cal-grid > .cal-cell.is-today:nth-child(7n) { border-right: 0; }
.pgx-cal .cal-cell.is-today::after { content: none; }
.pgx-cal .cal-cell.is-today .cal-num { position: relative; display: inline-block; color: var(--display-ink); }
.pgx-cal .cal-cell.is-today .cal-num::before,
.pgx-cal .cal-cell.is-today .cal-num::after {
  content: ""; position: absolute; inset: -.42em -.55em; pointer-events: none;
  border: 1.4px solid var(--rubric); border-radius: 52% 46% 50% 48% / 46% 52% 48% 54%; transform: rotate(-9deg);
}
.pgx-cal .cal-cell.is-today .cal-num::after { inset: -.36em -.6em -.46em -.5em; opacity: .45; transform: rotate(4deg); }
@media (prefers-reduced-motion: no-preference) {
  .pgx-cal.in .is-today .cal-num::before { animation: pgx-ring .7s var(--ease-out) .5s 1 backwards; }
  .pgx-cal.in .is-today .cal-num::after { animation: pgx-ring2 .7s var(--ease-out) .65s 1 backwards; }
}
@keyframes pgx-ring { from { opacity: 0; transform: rotate(-30deg) scale(.7); } }
@keyframes pgx-ring2 { from { opacity: 0; transform: rotate(-17deg) scale(.7); } }

/* once class times exist: calendar.js renders button.cal-cell.has-sessions
   with a dot per session; nothing new is needed in the markup */
.pgx-cal button.cal-cell { cursor: pointer; text-align: left; transition: background-color .25s; }
/* A button centres its content vertically, which would drop its numeral below
   the plain days of the same row; laid out as a column from the top, it keeps
   the almanac's ruled line. */
.pgx-cal button.cal-cell { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.pgx-cal button.cal-cell:hover { background: rgba(var(--rule), .08); border-color: rgba(var(--rule), .38); }
.pgx-cal button.cal-cell:hover .cal-num { color: var(--cc-red); }
.pgx-cal button.cal-cell:focus-visible { outline: 1.5px dashed var(--rubric); outline-offset: -4px; }
.pgx-cal .cal-dots { position: absolute; left: .55rem; bottom: .45rem; display: flex; gap: 4px; }
/* The dots are drawn in ink, because gold belongs to the Merci page's one
   point and olive is not one of the Codex's inks. */
.pgx-cal .cal-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--sepia); }
.pgx-cal button.cal-cell.is-open { background: rgba(var(--rule), .1); }
.pgx-cal button.cal-cell.is-open .cal-num { color: var(--cc-red); text-decoration: underline 1.4px var(--rubric); text-underline-offset: .28em; }

/* the fruit of the month hangs above the grid's top-right corner, like an
   almanac's month vignette; js/folio-pages.js chooses it and hides it for a
   month that has none */
.pgx-month-fruit { position: absolute; right: .2rem; top: -3.5rem; width: 2.8rem; height: 2.8rem; transform: rotate(-8deg); }

/* The Nota slip: a vellum note pinned in the margin, the page's one caveat
   (the sanguine stroke). It stays inside #cal because calendar.js looks its
   note up there. */
.pgx-nota { position: relative; margin: 3rem auto 0; max-width: 34rem; }
.pgx-nota .pg-k { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.pgx-nota .cal-note { margin: 0; padding: 0; border: 0; max-width: none; font: italic 1.06rem/1.55 'IM Fell English', serif; color: var(--ink); }
/* the slip's two states, read by CSS alone from whether any day has sessions */
.pgx-when-set { display: none; }
.pgx-cal:has(.cal-cell.has-sessions) .pgx-when-empty,
.pgx-cal:has(.cal-cell.has-sessions) .pgx-nota .pg-sang { display: none; }
.pgx-cal:has(.cal-cell.has-sessions) .pgx-when-set { display: inline; }

/* The practical facts sit in the margin column under the slip, so the address
   is found without leaving the month. */
.pgx-practical { max-width: 34rem; margin: 3rem auto 0; }
.pgx-practical dl { margin: 0; }
.pgx-practical dt { margin: 0; font: 600 .78rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .18em; color: var(--cc-red); }
.pg .pgx-practical dd { margin: .2rem 0 1rem; font: 500 1.04rem/1.55 'Cormorant Garamond', var(--font-serif); color: var(--ink); }
.pg .pgx-practical dd:last-child { margin-bottom: 0; }

.pgx-hours-go { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.4rem; }

@media (min-width: 1100px) {
  /* the month in the first column; the slip hangs in the right margin beside
     it, outside the grid box, and « En pratique » starts below the slip */
  .pgx-hours-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--pg-gap); align-items: start; }
  .pgx-nota { position: absolute; left: calc(100% + var(--pg-gap) + 26px); top: 4.2rem; width: min(21rem, 27vw); max-width: none; margin: 0; }
  .pgx-nota .pg-leader { display: block; left: -66px; top: 1.2rem; transform: scaleX(-1); }
  .pgx-practical { margin: calc(13rem + 5.4rem) 0 0; max-width: none; }
}
@media (max-width: 1099px) {
  /* one column: the month, the slip under it, En pratique, then the actions */
  .pgx-cal { max-width: 40rem; margin-inline: auto; }
  .pgx-nota .pg-leader { display: none; }
  .pgx-practical { text-align: center; }
  .pgx-hours-go { justify-content: center; }
}
@media (max-width: 860px) {
  /* the phone's order: the month, the slip, the actions, and En pratique last */
  .pgx-hours .pg-wrap { display: flex; flex-direction: column; }
  .pgx-hours-grid { display: contents; }
  .pgx-cal { order: 1; width: 100%; margin-top: 3.2rem; }
  .pgx-hours-go { order: 2; flex-direction: column; align-items: stretch; gap: .4rem; }
  .pgx-hours-go .pg-btn { justify-content: center; }
  .pgx-hours-go .pg-link { align-self: center; }
  .pgx-practical { order: 3; margin-top: 2.6rem; }
  /* The fruit is smaller and set higher here, because the › button sits right
     under it at this width and the two must stay 8px apart. */
  .pgx-month-fruit { top: -2.9rem; width: 2.3rem; height: 2.3rem; }
  .pgx-cal .cal-head { grid-template-columns: 44px 1fr 44px; gap: .3rem; }
  .pgx-cal .cal-month { font-size: 1.5rem; }
  .pgx-cal .cal-dow { font-size: .66rem; letter-spacing: .08em; }
  .pgx-cal .cal-cell { aspect-ratio: 1; padding: .3rem; text-align: center; display: grid; place-items: center; }
  /* the desktop's column layout for a day with sessions outranks the rule
     above, so on a phone it is centred again like every other day */
  .pgx-cal button.cal-cell { display: grid; place-items: center; place-content: center; text-align: center; }
  .pgx-cal .cal-num { font-size: 1rem; }
  .pgx-cal .cal-dots { left: 50%; bottom: .25rem; transform: translateX(-50%); }
  .pgx-nota { margin-top: 2.6rem; }
  /* The vellum's -26px margin would reach past a 360px screen's gutter; at
     -12px the slip still overhangs the text but stays clear of the screen's edge. */
  .pgx-nota .pg-vellum { margin-inline: -12px; }
  .pgx-leaf > .pg-sec:first-child { padding-top: 2.2rem; }
}

/* ═══════════ Mentions — the legal text as a book (fol. B–E) ═══════════ */
.pgx-legal { --pg-pad: clamp(3.2rem, 7vh, 5rem); }
.pgx-legal-head .pg-display { font-size: clamp(2rem, 3.4vw, 3.2rem); max-width: 18em; }     /* a title, not a sentence: a step smaller */
.pgx-legal-head .pg-lede { max-width: 38rem; }
.pgx-legal-head .pg-lede + .pg-lede { margin-top: -.4rem; }
.pgx-text { counter-reset: part; max-width: 38rem; margin-inline: auto; }
/* The legal text is set ragged right and never justified, because justified
   lines on a narrow measure open uneven gaps between words that slow the
   reading of a text people read closely. */
.pgx-legal .legal-p, .pgx-legal .legal-list li {
  max-width: 36rem; margin: 0 0 1.05rem; font: 500 clamp(1.06rem, 1.12vw, 1.14rem)/1.74 'Cormorant Garamond', var(--font-serif);
  color: var(--ink); hyphens: auto; -webkit-hyphens: auto; text-align: left;
}
.pgx-legal strong { font-weight: 600; color: var(--ink); }
/* On wider screens the running text is set a little larger on a narrower
   measure (in em, so it follows the size), so a line holds 60–75 characters; the column itself stays 38rem,
   so the definition lists keep their wide rows. */
@media (min-width: 861px) {
  .pgx-legal .legal-p, .pgx-legal .legal-list li { max-width: 27.5em; font-size: clamp(1.1rem, 1.2vw, 1.18rem); }
}

/* the Sommaire: the home's contents rows, one column, the part numeral in the glyph's place */
/* The « ↑ Sommaire » links land here, so it keeps clear of the header as the parts do. */
.pgx-toc { max-width: 40rem; margin-inline: auto; scroll-margin-top: calc(var(--pg-hd, 4.85rem) + 1.5rem); }
/* On a phone every row holds one line: the title is tracked a little tighter,
   and the folio letters, which name the desktop's leaves, are left out. */
@media (max-width: 430px) {
  .pgx-toc .pg-toc-t { letter-spacing: .08em; }
  .pgx-toc .pg-toc-f { display: none; }
}
.pgx-toc .pg-k { text-align: center; }
.pg-toc.pgx-toc ol { display: block; }
/* the small numerals (16–21px) take the small rubric, about 5.2–5.9:1 on the paper (--rubric fell under 4.5:1 at the glyph);
   at night --cc-red is the sanguine already */
.pgx-toc-n { grid-area: mk; font: 400 1.05rem/1 'IM Fell English', serif; color: var(--cc-red); }

/* the parts: a numeral hanging in the margin, a rubric initial, a short rubric rule */
.pgx-part { counter-increment: part; scroll-margin-top: calc(var(--pg-hd, 4.85rem) + 1rem); }
.pgx-part-t { position: relative; margin: 0 0 1.6rem; font: 400 clamp(1.7rem, 2.5vw, 2.3rem)/1.15 'IM Fell English', serif; color: var(--display-ink); text-wrap: balance; }
.pgx-part-t::first-letter { color: var(--rubric); }
.pgx-part-t::before {
  content: counter(part, upper-roman); position: absolute; right: calc(100% + 1.1rem); top: .08em;
  font: 400 1em/1.15 'IM Fell English', serif; color: var(--rubric);
}
.pgx-part-t::after { content: ""; display: block; width: 1.6rem; height: 1px; margin-top: .9rem; background: var(--rubric); }
/* the first paragraph of a part opens on a rubricated initial */
.pgx-part > .legal-p:first-of-type::first-letter { float: left; margin: .06em .08em 0 0; font: 400 3.1em/.78 'IM Fell English', serif; color: var(--rubric); }

/* the articles: small capitals, their number hanging in rubric */
.pgx-art-t {
  position: relative; margin: 2.2rem 0 .7rem; font: 600 1.02rem/1.35 'Cormorant SC', var(--font-caps); letter-spacing: .12em; color: var(--ink);
  scroll-margin-top: calc(var(--pg-hd, 4.85rem) + 1.5rem);
}
.pgx-n { position: absolute; right: calc(100% + .9rem); top: -.12em; font: 400 1.3rem/1 'IM Fell English', serif; letter-spacing: 0; color: var(--cc-red); }   /* small text: the small rubric */

/* the definition lists (the publisher, the company, contact and hosting): ruled rows */
.pgx-dl { display: grid; grid-template-columns: minmax(8.5rem, 11rem) 1fr; column-gap: 1.6rem; margin: 0 0 1.4rem; }
.pgx-dl dt, .pg .pgx-dl dd { padding: .62rem 0; border-top: 1px dotted rgba(var(--rule), .5); }
.pgx-dl dt { font: 600 .78rem/1.5 'Cormorant SC', var(--font-caps); letter-spacing: .16em; color: var(--cc-red); padding-top: .8rem; }
.pg .pgx-dl dd { margin: 0; font: 500 1.06rem/1.62 'Cormorant Garamond', var(--font-serif); color: var(--ink); }
.pgx-dl > :nth-last-child(-n+2) { border-bottom: 1px dotted rgba(var(--rule), .5); }

/* the refunds scale: ruled rows with hanging hederae */
.pgx-legal .legal-list { list-style: none; margin: .4rem 0 1.4rem; padding: 0; }
.pgx-legal .legal-list li { position: relative; margin: 0; padding: .7rem 0 .7rem 1.8rem; border-top: 1px solid rgba(var(--rule), .28); }
.pgx-legal .legal-list li:last-child { border-bottom: 1px solid rgba(var(--rule), .28); }
.pgx-legal .legal-list li::before { content: "\2767"; position: absolute; left: 0; top: .72rem; color: var(--rubric); }

/* the grapes close the text, a cul-de-lampe; the return links; the folio letters at the part's foot */
.pgx-tail { width: 2.8rem; height: 2.8rem; margin: 2.6rem auto 0; }
.pgx-back { margin: 2rem 0 0; }
.pgx-part .pg-folio { right: 0; }

/* the sticky side Sommaire, on wide screens only: it follows the reading */
.pgx-side { display: none; }
@media (min-width: 1200px) {
  .pgx-legal-body { display: grid; grid-template-columns: 15rem minmax(0, 38rem); justify-content: center; column-gap: 4.5rem; }
  .pgx-legal-body .pgx-text { margin: 0; }
  .pgx-side {
    display: block; position: sticky; top: calc(var(--pg-hd, 4.85rem) + 1.2rem); align-self: start; margin-top: var(--pg-pad);
    max-height: calc(100vh - var(--pg-hd, 4.85rem) - 2rem); overflow-y: auto; overscroll-behavior: contain; padding: 0 0 .4rem; scrollbar-width: thin;
  }
  .pgx-side ol { list-style: none; margin: 0; padding: 0; }
  /* the 25 entries are set tight enough to fit a 1280×720 screen whole, so the list never shows a scrollbar of its own */
  .pgx-side > ol > li { margin-bottom: .4rem; }
  .pg .pgx-side a { text-decoration: none; }                  /* one class stronger than folio-page.css's underlined links in list items */
  /* a part's name that wraps hangs under its own words, clear of the numeral (.pgx-side-n is 1.6rem wide) */
  .pg .pgx-side > ol > li > a { display: block; padding: .25rem 0 .25rem 1.6rem; text-indent: -1.6rem; font: 600 .8rem/1.3 'Cormorant SC', var(--font-caps); letter-spacing: .12em; color: var(--ink); }
  .pgx-side-n { display: inline-block; min-width: 1.6rem; text-indent: 0; font: 400 1rem/1 'IM Fell English', serif; letter-spacing: 0; color: var(--cc-red); }   /* small text: the small rubric */
  .pg .pgx-side ol ol a { position: relative; display: block; padding: .05rem 0 .05rem 1.6rem; font: italic .9rem/1.22 'IM Fell English', serif; color: var(--ink-soft); }
  .pgx-side-a { font-style: normal; color: var(--cc-red); margin-right: .35em; }
  .pg .pgx-side a:hover { color: var(--cc-red); }
  /* the reader's place: ink, and a short rubric rule in the margin */
  .pg .pgx-side a[aria-current="location"] { color: var(--ink); }
  .pgx-side ol ol a[aria-current="location"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 1rem; height: 1px; background: var(--rubric); }
}
/* on a short laptop screen the articles take a smaller size, so the whole list still fits */
@media (min-width: 1200px) and (max-height: 760px) { .pg .pgx-side ol ol a { font-size: .84rem; } }
@media (min-width: 861px) and (max-width: 1023px) { .pgx-text { max-width: 36rem; } }
@media (max-width: 860px) {
  /* The numerals stop hanging: the part's stands over its title, the
     article's goes inline. The part's numeral stays out of the flow, above the
     title in its own padding, because in the flow it would become the first
     line and take the title's rubric initial. */
  .pgx-part-t { padding-top: 1.5rem; font-size: 1.7rem; }
  .pgx-part-t::before { position: absolute; left: 0; right: auto; top: 0; font-size: 1.1rem; }
  .pgx-n { position: static; margin-right: .5rem; font-size: 1.1rem; }
  .pgx-dl { grid-template-columns: 1fr; }
  .pg .pgx-dl dd { border-top: 0; padding-top: 0; }
  .pgx-dl > dt:nth-last-child(2) { border-bottom: 0; }
  .pgx-legal .legal-p, .pgx-legal .legal-list li { font-size: 1.06rem; line-height: 1.7; }
}

/* a legal page gets printed: the text alone, black on white, a part a page */
@media print {
  body.pgx--mentions { background: #fff; }
  .pgx--mentions :is(.site-header, .rail, .driftfall, .cursor, .pgx-side, .pgx-back, .pg-folio, .pgx-tail, .pg-colophon, .skip-link, .pgx-toc) { display: none !important; }
  .pgx--mentions .pgx-leaf { margin: 0; background: #fff; }
  .pgx--mentions .pgx-leaf::before { content: none; }
  .pgx--mentions .reveal { opacity: 1 !important; transform: none !important; }
  .pgx--mentions :is(.legal-p, .legal-list li, .pgx-dl dd, .pgx-part-t, .pgx-art-t, .pg-display, .pg-lede) { color: #000 !important; }
  .pgx--mentions :is(.legal-p, .legal-list li, .pgx-dl dd) { font-size: 11pt; }
  .pgx-part { break-before: page; }
}

/* ═══════════ 404 — the missing leaf ═══════════
   A deckled sheet whose upper half was torn away: the deckle stays on the
   sides and the foot, a torn strip runs across the top, and the drawing's
   triangle goes off into the tear, leaving the circle and the square. */
.pgx-lost { --pgx-sheet-w: 40rem; }
.pgx-lost .pgx-sheet { padding-top: 1.7rem; text-align: center; }
/* Without its top band the paper's box starts at the sheet's top edge, so the
   flat layer is sized and placed from there, and the turn is made about the
   sheet's own centre, 20px above this box's, so the paper stays under the tear. */
.pgx-torn::before {
  top: 0; border-top-width: 0; border-image-width: 0 64px 64px 64px;
  background-position: 0 0, 50% 0; background-size: 256px 256px, calc(100% - 80px) calc(100% - 40px);
  transform-origin: 50% calc(50% - 20px);
}
/* The tear is the desk eating into the sheet, not a second strip of paper laid
   on it: the torn strip's alpha, inverted by the mask, leaves desk where the
   strip is air and nothing where it is paper. The sheet's own paper then runs
   right up to the torn line, whatever its colour or theme (the recipe of
   tools/build-folio-edge.mjs, drawn live). It reaches past the side deckles,
   so their tops are torn off with it.
   The mask is a solid layer minus (the strip, plus a solid band from the
   strip's 36th row down, where the strip is still fully paper). The band
   stands in for the strip's last ten rows, which fade out because they were
   made to overlap a leaf below; inverted,
   they would draw a line of desk across the sheet. And the box runs on past
   the sheet's foot, so that none of its own edges crosses the paper: on the
   tilted sheet, an edge that two mask layers share is antialiased in each of
   them, and the difference of the two leaves a hairline of desk along it. */
.pgx-tear {
  position: absolute; left: -44px; right: -44px; top: -1px; bottom: -44px; z-index: 4; pointer-events: none;
  /* turned with the paper, about the sheet's centre, which lies 21.5px above the centre of this taller box */
  transform: rotate(var(--tilt, 0deg)); transform-origin: 50% calc(50% - 21.5px);
  background: var(--desk);
  -webkit-mask:
    linear-gradient(#000 0 0),
    url("../assets/img/torn-edge.webp") var(--tx, -401px) 0 / 1024px 48px repeat-x,
    linear-gradient(#000 0 0) 0 36px / 100% calc(100% - 36px) no-repeat;
  -webkit-mask-composite: source-out, source-over;
  mask:
    linear-gradient(#000 0 0),
    url("../assets/img/torn-edge.webp") var(--tx, -401px) 0 / 1024px 48px repeat-x,
    linear-gradient(#000 0 0) 0 36px / 100% calc(100% - 36px) no-repeat;
  mask-composite: subtract, add;
}
/* The drawing starts at the sheet's very edge, above the torn line, so the
   tear (z-index 4) bites through the triangle's sides: they run off into it
   instead of stopping on the drawing's own flat top. */
.pgx-lost-fig { display: block; width: min(15rem, 60%); height: auto; margin: -1.7rem auto 1.2rem; overflow: hidden; }
.pgx-geo { fill: none; stroke: var(--sepia); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.pgx-tri { fill: none; stroke: var(--sepia); stroke-width: 1.4; opacity: .55; vector-effect: non-scaling-stroke; }
/* the proofreader's caret: something is missing here. Sanguine, because it marks an error. */
.pgx-caret { fill: none; stroke: var(--sanguine); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .pgx-sheet-w.in .pgx-caret { animation: pgx-caret .5s var(--ease-out) .7s 1 backwards; }
}
@keyframes pgx-caret { from { opacity: 0; transform: translateY(4px); } }
.pgx-lost .pgx-lost-k { text-align: center; }
.pgx-lost-t {
  margin: 0 auto 1rem; max-width: 16em; text-align: center; text-wrap: balance;
  font: 400 clamp(1.9rem, 3.2vw, 2.7rem)/1.12 'IM Fell English', serif; color: var(--display-ink);
}
.pgx-lost-t::first-letter { color: var(--rubric); }
.pg .pgx-lost p:not([class]) { max-width: 32rem; margin-inline: auto; font: 500 1.1rem/1.66 'Cormorant Garamond', var(--font-serif); color: var(--ink); }
.pgx-lost-go { justify-content: center; margin-top: 1.8rem; }
/* at 360px the button's label is tracked a little tighter, so it holds one line with its arrow */
@media (max-width: 380px) { .pgx-lost-go .pg-btn { letter-spacing: .08em; padding-inline: 1rem; gap: .5rem; } }
.pgx-lost-nav { margin-top: 1.4rem; }
.pg .pgx-lost-nav p { margin: 0 auto; max-width: none; font: italic .98rem/1.4 'IM Fell English', serif; color: var(--ink-soft); }
.pgx-lost-nav ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 1.6rem; list-style: none; padding: 0; margin: .2rem 0 0; }
.pgx-lost-nav li { margin: 0; }
.pgx-lost .pgx-en { margin: 2.2rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(var(--rule), .3); max-width: 32rem; text-align: center; }
.pgx-lost .pgx-en .pg-k { margin-bottom: .5rem; }
.pg .pgx-lost .pgx-en p:not([class]) { max-width: none; margin: 0 0 .4rem; font: 500 1rem/1.65 'Cormorant Garamond', var(--font-serif); color: var(--ink-soft); }

/* ═══════════ Merci and Confirmé — one letter, before and after its seal ═══════════ */
.pgx-letterpage { --pgx-sheet-w: 60rem; padding-top: calc(var(--pg-hd, 4.85rem) + 1.8rem); padding-bottom: 7.5rem; }
.pgx-letter { padding-top: clamp(2.2rem, 3.6vw, 2.9rem); padding-bottom: 7.4rem; }
/* (Merci's caption has a third line since the letters are trilingual, the Spanish: the foot gives it room) */
.pgx--merci .pgx-letter { padding-bottom: 8.8rem; }

/* the letterhead: the logotype, the address, the fleuron, a double rule */
.pgx-lh { text-align: center; }
/* The name is the logo (folio-page.css's .lg: ink and accent by theme, on the paper): the complete cut of the page's
   language, at the kit's minimum of 240px wide (a letterhead is a quiet place, and the subtitle stays legible there).
   It is 139px tall, about 70px more than the stacked name was, so on the short laptop screens, where the letter
   is set tighter so that its title and first lines are on the first screen (below, 1024px wide and 820px tall
   and under), the one-line cut stands in its place, as wide and 36px tall. */
.pgx-lh-name { line-height: 0; }
.pgx-lh-name .lg { display: block; width: max(240px, 15rem); height: auto; margin: 0 auto; }
.pgx-lh-name .lh-line { display: none; }
.pg .pgx-lh-addr { margin: .45rem auto .7rem; max-width: none; font: 600 .76rem/1.4 'Cormorant SC', var(--font-caps); letter-spacing: .2em; color: var(--ink-soft); text-wrap: balance; }
/* the street and the postcode with its city each hold together, so a phone breaks the address only between them */
.pgx-nw { white-space: nowrap; }
.pgx-lh-fruit { width: 2.4rem; height: 2.4rem; margin: 0 auto; }
.pgx-lh::after {
  content: ""; display: block; width: 9rem; height: 4px; margin: .9rem auto 2.1rem;
  border-top: 1px solid var(--sepia); border-bottom: 1px solid rgba(var(--rule), .45);
}

/* The two titles' sizes are named once, because the English title's line
   height and offset are computed from the French one's, to share its row. */
.pgx-letter {
  --lt-fr: clamp(2.4rem, 3.6vw, 3.3rem);
  --lt-en: clamp(1.6rem, 2.3vw, 2.1rem);
}
.pgx-letter-t {
  margin: 0 0 1.1rem; font: 400 var(--lt-fr)/1.05 'IM Fell English', serif; line-height: calc(var(--lt-fr) * 1.05);
  color: var(--display-ink); text-wrap: balance;
}
.pgx-letter-t::first-letter { color: var(--rubric); }
.pg .pgx-fr p:not([class]) { max-width: 32rem; margin: 0 0 .9rem; font: 500 1.08rem/1.64 'Cormorant Garamond', var(--font-serif); color: var(--ink); }
.pg .pgx-sign { max-width: none; margin: .6rem 0 0; text-align: right; font: italic 1.05rem/1.4 'IM Fell English', serif; color: var(--ink-soft); }

/* the English column: the same letter, a step quieter (in --ink-soft, never dimmed) */
.pgx-letter .pgx-en .pg-k { margin-bottom: .6rem; }
.pg .pgx-en-t {
  margin: 0 0 1.1rem; max-width: none; font: italic 400 var(--lt-en)/1.05 'IM Fell English', serif;
  line-height: calc(var(--lt-fr) * 1.05); color: var(--ink-soft);
}
.pg .pgx-letter .pgx-en p:not([class]) { max-width: 30rem; margin: 0 0 1rem; font: 500 1rem/1.65 'Cormorant Garamond', var(--font-serif); color: var(--ink-soft); }

.pgx-letter-go { justify-content: center; margin-top: 1.6rem; }
.pg .pgx-meanwhile {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 1.2rem;
  max-width: none; margin: 1.2rem auto 0; text-align: center; font: italic 1rem/1.4 'IM Fell English', serif; color: var(--ink-soft);
}

@media (min-width: 1024px) {
  /* a parallel-text edition: French and English side by side, a hairline between.
     « English » stands above its column, so both titles start on the same line;
     with one line-height for both, the smaller title's baseline sits higher by
     about a third of the size difference, which the margin gives back. */
  .pgx-parallel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 3.2rem; }
  .pgx-letter .pgx-en { position: relative; padding-left: 3.2rem; margin-left: -1.6rem; border-left: 1px solid rgba(var(--rule), .3); }
  .pgx-letter .pgx-en .pg-k { position: absolute; top: -1.6rem; left: 3.2rem; margin: 0; }
  .pg .pgx-en-t { margin-top: calc((var(--lt-fr) - var(--lt-en)) * .3); }
  /* the letters are trilingual (2026-10-03): the Spanish column stands under the English one on the
     right-hand page, its « Español » in the air between them, and the French keeps the left page alone */
  .pgx-parallel > .pgx-fr { grid-row: 1 / span 2; }
  .pgx-letter .pgx-en + .pgx-en { grid-column: 2; margin-top: 3rem; }
  /* « English » stands in the double rule's lower margin, which is widened so
     the kicker keeps a clear line of air under the rule instead of reading on from it */
  .pgx-lh::after { margin-bottom: 2.6rem; }
}
/* On a 768px or 720px laptop screen the letter is set tighter, so the seal,
   the page's point of attention, is on the first screen with its caption whole. */
@media (min-width: 1024px) and (max-height: 820px) {
  /* The deckle reaches about 22px above the sheet's box, so the sheet keeps
     2.2rem under the header: the fringe then stays at least 8px below the
     header, clear of its tagline and its button. The room is won inside the
     letter instead. */
  .pgx-letterpage { padding-top: calc(var(--pg-hd, 4.85rem) + 2.2rem); }
  /* (The header is 7px taller than it was before the stacked name, and the letterhead's name is the one-line cut
     here: the letter's top padding, the address's margin and the fruit give that room back.) */
  .pgx-letter { padding-top: 1rem; }
  .pgx-lh-name .lh-full { display: none; }
  .pgx-lh-name .lh-line { display: block; }
  .pg .pgx-lh-addr { margin: .5rem auto .35rem; }
  .pgx-lh-fruit { width: 1.6rem; height: 1.6rem; }
  .pgx-lh::after { margin: .45rem auto 2.1rem; }
  /* « English » moves down toward its title, so the narrower margin still leaves air under the rule */
  .pgx-letter .pgx-en .pg-k { top: -1.35rem; }
  .pg .pgx-fr p:not([class]), .pg .pgx-letter .pgx-en p:not([class]) { line-height: 1.55; }
  .pg .pgx-sign { margin-top: .2rem; }
  .pgx-letter-go { margin-top: .9rem; }
  /* Merci's caption runs on one line, French then English, so it needs less of
     the sheet's foot; Confirmé's foot holds only the upper half of the wax. */
  .pg .pgx-seal > .pgx-seal-cap { width: 46rem; margin-left: -23rem; }
  .pgx-seal > .pgx-seal-cap span { display: inline; margin-left: .9em; }
  .pgx--merci .pgx-letter { padding-bottom: 5.8rem; }
  .pgx--confirme .pgx-letter { padding-bottom: 4.2rem; }
}
/* On a 720px screen the letterhead is set smaller still, so the gold point,
   the ring's centre, stays above the fold; the double rule keeps its margin,
   so « English » keeps its air under it. (Since the stacked logotype, the
   letter's lines are also a shade closer here: the name and the taller header
   took about 20px the sheet no longer had.) */
@media (min-width: 1024px) and (max-height: 740px) {
  .pgx-letter { padding-top: .5rem; }
  .pgx-lh-fruit { width: 1.25rem; height: 1.25rem; }
  .pg .pgx-fr p:not([class]), .pg .pgx-letter .pgx-en p:not([class]) { line-height: 1.5; }
  .pgx-letter-go { margin-top: .6rem; }
  /* Confirmé's foot, which holds only the upper half of the wax, gives up a
     little more, so the wax's centre is on the first screen too. */
  .pgx--confirme .pgx-letter { padding-bottom: 3.7rem; }
}
@media (min-width: 861px) and (max-width: 1023px) { .pgx-letterpage { --pgx-sheet-w: 44rem; } }
@media (max-width: 1023px) {
  .pgx-letter .pgx-en { margin: 2rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid rgba(var(--rule), .3); }
}

/* The seal hangs from the foot of the sheet, as a pendant seal on a charter.
   Its offset is static; the entrance belongs to the sheet's reveal. */
.pgx-sheet > .pgx-seal { position: absolute; left: 50%; bottom: 0; width: 5.6rem; margin-left: -2.8rem; transform: translateY(46%); z-index: 4; }
/* Merci: the seal's place, still empty — a ring scored, not inked, holding the gold point */
.pgx-seal-place { position: relative; display: block; width: 5.6rem; height: 5.6rem; }
.pgx-seal-place svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pgx-seal-place circle { fill: none; stroke: rgba(var(--metalpoint), .75); stroke-width: 1.3; stroke-dasharray: 3 5; }
.pgx-seal-place .pg-pt { position: absolute; left: 50%; top: 50%; margin: -5.5px; }
.pgx-seal-place .pg-pt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(242, 210, 113, .55); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pgx-sheet-w.in .pgx-seal-place .pg-pt { animation: pg-nib-in 1.1s cubic-bezier(.2, .9, .25, 1.2) .6s 1 backwards; }
  /* The halo pulses once and stops, because a point that kept beating would
     pull the eye from the letter for as long as the page is open. */
  .pgx-sheet-w.in .pgx-seal-place .pg-pt::after { animation: pg-halo 1.4s ease-out 1.8s 1; }
}
.pg .pgx-seal-cap {
  position: absolute; bottom: calc(100% + .6rem); left: 50%; width: 24rem; margin: 0 0 0 -12rem; max-width: none; text-align: center;
  font: italic .98rem/1.45 'IM Fell English', serif; color: var(--ink-soft);
}
.pgx-seal-cap span { display: block; font: italic 500 .92rem/1.45 'Cormorant Garamond', var(--font-serif); }
/* Confirmé: the wax pressed, its ribbons falling over the edge onto the desk; the wax keeps its colours in both themes */
.pgx-seal--pressed svg { display: block; width: 5.6rem; height: 5.6rem; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .pgx-sheet-w.in .pgx-seal--pressed svg { animation: pgx-press .9s cubic-bezier(.3, 1.35, .45, 1) .55s 1 backwards; transform-origin: 50% 50%; }
}
@keyframes pgx-press {
  0% { opacity: 0; transform: translateY(-22px) scale(1.2) rotate(-10deg); }
  55% { opacity: 1; transform: scale(.95) rotate(1.5deg); }
  100% { transform: none; }
}

/* ═══════════ Phones: the sheet on the desk becomes a torn leaf ═══════════
   A deckled fringe needs about 40px outside the sheet, which a 19px gutter
   cannot give without clipping or a sideways scroll. A leaf torn at the top
   and the foot reads as the same object at this width. The top strip is the
   leaf's torn top edge (paper below it, as .page::before); the foot's is the
   same strip turned over (paper above it, as the colophon's). */
@media (max-width: 860px) {
  .pgx-desk { display: block; min-height: 0; padding: calc(var(--pg-hd, 5rem) + 2.4rem) 0 4.5rem; }
  /* the leaf's paper is the sheet's own background here, because its ::before becomes the upper tear */
  .pgx-sheet { padding: 2.6rem var(--edge-pad) 3rem; background: url("../assets/img/grain-light.webp") 0 0 / 256px 256px, var(--mount); }
  html[data-theme="dark"] .pgx-sheet { background-image: url("../assets/img/grain-dark.webp"); }
  .pgx-sheet::before, .pgx-torn::before, .pgx-sheet::after {
    inset: 0 0 auto 0; height: 38px; border: 0; border-image: none; box-shadow: none; z-index: 4; transform: none;
    background: var(--desk);
    -webkit-mask: linear-gradient(#000 0 0), url("../assets/img/torn-edge.webp") var(--tx, -401px) 0 / 1024px 48px repeat-x;
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0), url("../assets/img/torn-edge.webp") var(--tx, -401px) 0 / 1024px 48px repeat-x;
    mask-composite: exclude;
  }
  .pgx-sheet::after { inset: auto 0 0 0; transform: scaleY(-1); }
  .pgx-tear { display: none; }
  .pgx-lost .pgx-sheet { padding-top: 1.6rem; }
  .pgx-lost-fig { width: 11rem; margin-top: -1.6rem; }
  .pgx-lost-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .pgx-lost-nav .pg-link { min-height: 44px; }
  .pgx-lost-go .pg-btn, .pgx-letter-go .pg-btn { width: 100%; justify-content: center; }
  .pgx-letter { padding-bottom: 4.6rem; }
  /* The seal lies over both tears: the lower tear is the sheet's ::after, which
     paints last among equals at z-index 4. */
  .pgx-sheet > .pgx-seal { z-index: 5; }
  /* Merci: the caption and the empty ring come into the flow at the letter's
     foot, and the ring hangs from the lower tear, its centre on the torn line.
     It stays positioned (relative), or its z-index would not lift it over the tear. */
  .pgx--merci .pgx-letter { padding-bottom: 1.4rem; }
  .pgx-sheet > .pgx-seal--awaiting { position: relative; left: auto; width: auto; margin: 2rem auto -3.3rem; transform: none; }
  .pgx-seal--awaiting .pgx-seal-place { margin: 0 auto; }
  .pg .pgx-seal-cap { position: static; width: auto; margin: 0 auto 1rem; }
  /* Confirmé: the seal hangs over the lower tear */
  .pgx-sheet > .pgx-seal--pressed { transform: translateY(40%); }
  .pgx-letterpage { padding-bottom: 6.5rem; }
  /* the lead-in takes a line of its own, and the two links share the next, rather than one link being left alone */
  .pgx-meanwhile-k { flex-basis: 100%; }
}

/* ═══════════ Reduced motion: everything present at first paint ═══════════
   folio-page.css already stops every animation inside .pg; these name the
   four entrances of these pages so none is left to chance. */
@media (prefers-reduced-motion: reduce) {
  .pgx-cal .is-today .cal-num::before, .pgx-cal .is-today .cal-num::after,
  .pgx-caret, .pgx-seal-place .pg-pt, .pgx-seal-place .pg-pt::after, .pgx-seal--pressed svg { animation: none !important; }
}