/* ═══════════════════════════════════════════════════════════════
   Le Folio — the story told on one leaf of a notebook (prototype)
   Loaded after main.css by folio.html only. The engine is js/folio.js.

   Nothing here is a filter or a blend: glows are gradients, the tracing
   paper is a raster, and everything that moves is moved by transform or
   opacity (see README, "Smoothness").
   ═══════════════════════════════════════════════════════════════ */

:root {
  --rubric:     #9a3a20;           /* the red of a rubricated initial */
  --sanguine:   #a4442c;           /* red chalk: complaints, corrections */
  --sepia:      #4a3522;           /* the drawing's ink */
  --metalpoint: 120, 110, 92;      /* the scored lines, before they are inked */
  --desk:       #6f5a3e;           /* the table the leaf lies on */
  /* the plate (the figure's square box): as large as the leaf allows, but
     never so tall that the triangle's apex (.445 of it above the middle, at
     the chapters' scale) comes nearer the running head than --gap-head */
  --gap-head:   clamp(1.6rem, 4.2vh, 3rem);
  --head-foot:  calc(var(--header-h, 5.6rem) - .6rem + 2.4rem);
  --sq-f:       min(74vh, 88vw, calc((50vh - var(--head-foot) - var(--gap-head)) / .445));
}
html[data-theme="dark"] {
  --rubric: #d0785a; --sanguine: #d9826a; --sepia: #e6d6b4;
  --metalpoint: 170, 158, 132; --desk: #070504;
}
/* On a phone the plate is sized from the screen's width: the circle (0.82 of
   the square box) nearly fills it, where at 72vw it filled barely six tenths
   and the man stood a third of the screen tall. Its height is held to the room
   between the running head and the line, counted with the browser's bars out
   (svh). The hero's man is smaller, for the words above and below him. */
@media (max-width: 860px) {
  /* The leaf is stacked from its top: the running head (its foot 10.8rem
     down), 1.25rem, the drawing (the apex .445 of the plate above its middle,
     the circle's foot .381 below, at the chapters' scale), 1.4rem, the line
     (two lines, 3.6rem), and 2.5rem left for the hint at the foot. The plate
     takes what height that leaves — counted with the browser's bars out
     (svh) — up to the width's limit; never less than 46svh (a phone on its
     side). js/folio.js places the model on the same middle (PHONE_TOP). */
  :root {
    --sq-f: min(114vw, 66vh, max(46vh, calc((100vh - 19.4rem) / .86)));
    --sq-f: min(114vw, 66svh, max(46svh, calc((100svh - 19.4rem) / .86)));
    /* on a tall phone the width stops the plate first: the room left over is
       shared, a third above the drawing */
    --slack: max(0px, calc((100svh - 19.4rem - var(--sq-f) * .86) / 3));
    --fig-cy: calc(12.05rem + var(--sq-f) * .445 + var(--slack));
    --sq-hero: calc(var(--sq-f) * .62); --hero-y: 44%;
    /* under the drawing: its lowest name (Énergie · Kriya) ends .415 of the plate below its middle */
    --under: calc(var(--fig-cy) + var(--sq-f) * .415);
  }
}

.figure-stage, .figure-marks {
  width: var(--sq-f); height: var(--sq-f);
  margin: calc(var(--sq-f) / -2) 0 0 calc(var(--sq-f) / -2);
}

/* ── the desk and the leaf ─────────────────────────────────────── */
.stage { background: var(--desk); }
.folio {
  position: absolute; inset: 0; overflow: hidden;
  transform-origin: 50% 48%;
  /* (no box-shadow: a rectangle's shadow showed round the torn edge as a straight line) */
}
/* the leaf's paper and its torn edges on the desk (.folio-paper, .deckle): Area A's block, at the end */

/* ── the stacking: words behind the body, notes and the point above ── */
.folio > .statement      { z-index: 6; }   /* the big words, in front of the man */
.folio > .figure-stage   { z-index: 2; }
.folio > #scene3d        { z-index: 3; }
.folio > .figure-marks   { z-index: 4; }
.folio > .inks           { z-index: 5; }
.folio > .scene, .folio > .hero-f, .folio > .runheads, .folio > .lines,
.folio > .notes, .folio > .pose-name, .folio > .folio-num { z-index: 6; }
.folio > .pt, .folio > .spark { z-index: 7; }
.folio > .cseals         { z-index: 8; }
.folio > .gloss-panel    { z-index: 9; }
.glosses { display: none; }
.glosses .gloss:not([hidden]) { display: block; }

/* blind ruling: the leaf was ruled before anything was drawn on it */
.ruling {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(var(--metalpoint), .09) 31px, rgba(var(--metalpoint), .09) 32px);
  -webkit-mask-image: linear-gradient(to right, transparent 3%, #000 12%, #000 88%, transparent 97%);
          mask-image: linear-gradient(to right, transparent 3%, #000 12%, #000 88%, transparent 97%);
}
.paper-mood { position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: opacity;
  background: radial-gradient(90% 80% at 50% 45%, rgba(120, 110, 100, .10), rgba(70, 60, 50, .20)); }
.paper-mood.light { background: radial-gradient(60% 55% at 50% 44%, rgba(255, 246, 214, .42), rgba(255, 246, 214, 0) 70%); }

/* ── the big words: across the man, in front of him ──────────────
   As on the first page, which the owner preferred (2026-09-30: "appearing over
   the body of the Vitruvian, making the statement more impressive"): set
   large across the figure's middle, over the body, lifted off it by a halo of
   the leaf's own colour so that they read over skin and shadow as over paper.
   On a phone the two words stand one over the other, across the figure. */
.folio > .statement { inset: 0; overflow: visible; display: flex; align-items: center; justify-content: center; }
.folio .statement span {
  font-family: 'IM Fell English SC', var(--font-display); font-weight: 400;
  color: var(--display-ink); opacity: 1; letter-spacing: .035em;
  text-shadow: 0 1px 0 rgba(var(--halo-rgb), .95), 0 0 12px rgba(var(--halo-rgb), .92), 0 0 30px rgba(var(--halo-rgb), .85), 0 0 60px rgba(var(--halo-rgb), .6);
}
.folio .statement .st-w { position: static; transform: none; white-space: nowrap; line-height: .98; }
/* (main.css sizes every span of a statement, the written letters included: they take their word's size) */
.folio .statement .st-w span { font-size: inherit; letter-spacing: inherit; text-shadow: inherit; }
.folio .statement .st-w1 { margin-right: .3em; }
.folio .statement-classical .st-w { font-size: min(var(--fs-statement), 8.2vw); }
.folio .statement-stillness .st-alt { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.folio .statement-stillness .st-w { font-size: min(calc(var(--fs-statement) * .7), 5.6vw); letter-spacing: .06em; }
@media (max-width: 860px) {
  /* centred on the figure (the plate's middle, --fig-cy), a word to a line */
  .folio > .statement { inset: auto 0; top: var(--fig-cy); height: 0; flex-direction: column; }
  .folio .statement-stillness .st-alt { top: 0; height: 0; flex-direction: column; }
  .folio .statement .st-w1 { margin: 0; }
  .folio .statement-classical .st-w { font-size: min(13vw, 4.4rem); }
  .folio .statement-stillness .st-w { font-size: min(10.4vw, 3.4rem); letter-spacing: .04em; }
  .line[data-line="still"] { top: calc(var(--under) + .9rem); }
}

/* ── the drawing ───────────────────────────────────────────────── */
.geo .scored { stroke: rgba(var(--metalpoint), .42); stroke-width: 1.5; }
.geo .axes line { stroke: rgba(var(--metalpoint), .22); stroke-width: 1; stroke-dasharray: 2 7; }
.geo .ray { stroke: var(--gold-lit); stroke-width: 1.6; opacity: 0; }
.geo .arc { stroke: var(--gold-lit); stroke-width: 5; stroke-linecap: round; opacity: 0; }
.geo .ins {
  font-family: 'Cormorant SC', var(--font-caps); font-size: 21px; letter-spacing: .22em;
  fill: var(--sepia); opacity: 0;
}
.geo .ins .sk { font-family: 'Cormorant Garamond', serif; font-style: italic; letter-spacing: .04em; fill: var(--sanguine); }
.geo .ins-tri { font-size: 18px; }
.geo .thread { stroke: var(--gold-lit); stroke-width: 1.4; opacity: 0; }
.geo .plumb { stroke: var(--sepia); stroke-width: .9; opacity: 0; }
.geo .legend { font-family: 'Cormorant SC', var(--font-caps); font-size: 17px; letter-spacing: .14em; fill: var(--gold-deep, #8a6a1e); }
.geo .legend tspan { opacity: 0; transition: opacity .6s; }
.geo .legend tspan.on { opacity: 1; }
.geo .plate line { stroke-width: 2.6; stroke-linecap: round; }
.geo .plate-s line { stroke: var(--sanguine); }
.geo .plate-g line { stroke: var(--gold-lit); }
.geo .plate-s .ins { fill: var(--sanguine); }
.geo .plate-g .ins { fill: var(--gold-lit); }
.geo .plate { opacity: 0; }
.geo .spolvero { stroke: #2a2118; stroke-width: 3.2; stroke-linecap: round; opacity: 0; }
html[data-theme="dark"] .geo .spolvero { stroke: #d9c9a6; }
html[data-theme="dark"] .geo .legend { fill: #e8cf82; }

/* the tracing paper laid over the troubled drawing (03) */
.calque {
  position: absolute; inset: 0 -7% -5% -7%; opacity: 0; pointer-events: none;
  /* vellum, cut along a soft edge (tools/build-folio-paper.mjs) */
  border: 48px solid transparent;
  border-image: url("../assets/img/vellum-edge.webp") 48 / 48px / 0 round;
  background: url("../assets/img/vellum.webp") 0 0 / 512px 512px repeat padding-box;
  will-change: transform, opacity;
}
html[data-theme="dark"] .calque {
  border-image-source: url("../assets/img/vellum-edge-dark-2.webp");
  background-image: url("../assets/img/vellum-dark-2.webp");
}

/* ── the hero: the sentence set around the man ─────────────────── */
.hero-f { position: absolute; inset: 0; pointer-events: none; }
.hero-words { margin: 0; font-weight: 400; }
.hw {
  position: absolute; display: block;
  font-family: 'IM Fell English SC', var(--font-display); font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  line-height: 1.05; color: var(--display-ink); letter-spacing: .02em; opacity: 0; white-space: nowrap;
}
.hw-a { right: calc(50% + var(--sq-f) * .42 + 1vw); top: calc(50% - var(--sq-f) * .20); text-align: right; }
.hw-b { left:  calc(50% + var(--sq-f) * .42 + 1vw); top: calc(50% - var(--sq-f) * .20); white-space: normal; width: 9.5em; }
/* (the hero's man stands 2% low at .84 of the plate: his circle ends .327 of it under the middle) */
.hw-c { left: 50%; top: calc(52% + var(--sq-f) * .335 + .4rem); transform: translateX(-50%); }

/* ── running heads, the folio number ───────────────────────────── */
.runheads { position: absolute; left: 0; right: 0; top: calc(var(--header-h, 5.6rem) - .6rem); height: 2.4rem; pointer-events: none; }
.rh {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); margin: 0; opacity: 0; white-space: nowrap;
  font-family: 'Cormorant SC', var(--font-caps); font-weight: 500; font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  letter-spacing: .26em; color: var(--ink);
}
/* the WORD is centred (the owner: the titles sat a little left — the numeral
   and the seal's place were counted in); the numeral hangs to its left and
   the seal's place to its right, outside the measure */
.rh-num { position: absolute; right: 100%; bottom: -.16em; margin-right: .42em; line-height: 1;
  font-family: 'IM Fell English', serif; font-size: 1.6em; color: var(--rubric); letter-spacing: 0; }
.rh .seal-slot { position: absolute; left: 100%; top: 50%; margin: -.5em 0 0 3.6rem; }
.folio-num { position: absolute; right: calc(var(--rail-gutter, 2.1rem) + 1.6vw); bottom: 2.4vh; margin: 0;
  font-family: 'IM Fell English', serif; font-style: italic; font-size: .92rem; color: var(--ink-soft); opacity: .8; }

/* ── the line: one sentence under the plate ────────────────────── */
.lines { position: absolute; inset: 0; pointer-events: none; }
.line {
  position: absolute; left: 50%; top: calc(50% + var(--sq-f) * .5 + 2.2vh); transform: translateX(-50%);
  width: min(46rem, 86vw); margin: 0; text-align: center; opacity: 0;
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.12rem, 1.45vw, 1.42rem); line-height: 1.45; color: var(--ink);
  text-shadow: 0 1px 2px rgba(var(--halo-rgb), .9);
}
.line.on { pointer-events: auto; }
.line .initial {
  font-family: 'IM Fell English', serif; font-size: 2.6em; line-height: .7; color: var(--rubric);
  margin-right: .04em; vertical-align: -.26em;
}
.line .line-k { font-family: 'Cormorant SC', var(--font-caps); letter-spacing: .16em; color: var(--sanguine); margin-right: .5em; font-size: .92em; }
.line .line-2 { display: inline-block; margin-top: .35em; color: var(--ink-soft); font-size: .92em; }
.line[data-line="hero"] { top: calc(52% + var(--sq-f) * .335 + 4.3rem); }
.line-btn { margin: .9rem auto 0; display: table; }
.line[data-line="close02"], .line[data-line="still"] { font-style: italic; }
.para {
  font: inherit; font-family: 'IM Fell English', serif; color: var(--rubric); background: none; border: 0;
  padding: 0 .15em; cursor: pointer; font-size: 1.05em; line-height: 1;
}
.para:hover, .para:focus-visible { color: var(--ink); }
.line-cta { top: calc(50% + var(--sq-f) * .5 + 1.4vh); }
.cta-f {
  display: inline-block; margin: 0 1.1rem; font-family: 'Cormorant SC', var(--font-caps); font-size: 1.05rem;
  letter-spacing: .2em; color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(var(--rule), .6); padding-bottom: .25rem;
}
.cta-2 { color: var(--ink-soft); }

/* a place kept in the text for the point to land in */
.point-slot { display: inline-block; width: .8em; height: .8em; vertical-align: -.04em; margin-left: .18em; }

/* ── notes in the margins ──────────────────────────────────────── */
.notes { position: absolute; inset: 0; pointer-events: none; }
.note {
  position: absolute; left: 0; top: 0; width: 17.5rem; margin: 0; opacity: 0;
  font-family: 'IM Fell English', serif; font-style: italic; font-size: clamp(1rem, 1.18vw, 1.18rem); line-height: 1.38; color: var(--ink);
  text-shadow: 0 1px 2px rgba(var(--halo-rgb), .9);
}
.note.on { pointer-events: auto; }
.note p { margin: .3rem 0 0; }
.note em { font-style: normal; }
.note-k {
  display: block; font-family: 'Cormorant SC', var(--font-caps); font-style: normal; font-size: .72rem;
  letter-spacing: .22em; color: var(--rubric);
}
.note .rom { font-family: 'IM Fell English', serif; font-size: 1.1em; letter-spacing: .05em; }
.label .note-k { color: var(--sanguine); font-size: .66rem; }
.label p { color: #5a2a1a; }
html[data-theme="dark"] .label p { color: #ecc0ae; }
.note.col-r { text-align: left; }
.note.col-l { text-align: left; }

/* the ink leaders */
.inks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.inks path { fill: none; stroke: var(--sepia); stroke-width: 1; stroke-linecap: round; opacity: .8; }
.inks path.sang { stroke: var(--sanguine); }
.inks circle { fill: var(--sepia); }
.inks circle.sang { fill: var(--sanguine); }

/* ── the opening: the lockup in the leaf's left half, the figure practising at the right ── */
.scene-opening { justify-content: flex-start; padding-left: 10vw; }

/* ── the posture being held ────────────────────────────────────── */
.pose-name {
  /* under the line and its rule (one line of 1.52rem at 1.45, the rule .6rem under it) */
  position: absolute; left: 50%; top: calc(50% + var(--sq-f) * .5 + 2.2vh + 3.1rem); transform: translateX(-50%); margin: 0; opacity: 0; white-space: nowrap;
  font-family: 'IM Fell English', serif; font-style: italic; font-size: 1.08rem; color: var(--ink-soft);
  text-shadow: 0 1px 2px rgba(var(--halo-rgb), .9); transition: opacity .6s;
}
.pose-name.on { opacity: .95; }

/* ── le point ──────────────────────────────────────────────────── */
.pt, .spark { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform, opacity; }
.pt i, .spark::before { position: absolute; border-radius: 50%; }
.pt-halo { width: 64px; height: 64px; left: -32px; top: -32px;
  background: radial-gradient(circle, rgba(255, 226, 140, .55) 0%, rgba(240, 200, 100, .22) 30%, rgba(240, 200, 100, 0) 68%); }
.pt-core, .pt-dull { width: 15px; height: 15px; left: -7.5px; top: -7.5px; }
.pt-core { background: radial-gradient(circle at 36% 32%, #fffae6 0%, #f2d271 38%, #c99a32 72%, #8a6418 100%);
  box-shadow: 0 0 0 .5px rgba(90, 60, 10, .55); }
.pt-dull { background: radial-gradient(circle at 36% 32%, #d8c8a0 0%, #a08658 45%, #6d5530 100%); opacity: 0; }
.spark::before { content: ''; width: 9px; height: 9px; left: -4.5px; top: -4.5px;
  background: radial-gradient(circle at 36% 32%, #d9c7a0 0%, #9c7f50 55%, #6a5230 100%); }
.spark { opacity: 0; }
.pt-ring { position: absolute; width: 40px; height: 40px; left: -20px; top: -20px; border-radius: 50%;
  border: 1px solid rgba(214, 170, 70, .8); pointer-events: none; }

/* ── the gloss: the whole text, one tap away ───────────────────── */
.gloss-panel {
  position: absolute; left: 0; top: 0; width: min(24rem, 90vw); max-height: 70vh; overflow: auto;
  padding: 1.4rem 1.5rem 1.3rem; color: var(--ink);
  background: linear-gradient(160deg, var(--card-hi) 0%, var(--card-lo) 120%) , var(--cream-soft);
  box-shadow: 0 14px 34px rgba(var(--shade), .24), 0 3px 8px rgba(var(--shade), .14);
  font-family: 'Cormorant Garamond', serif; font-size: 1.08rem; line-height: 1.55;
}
.gloss-panel h4 { margin: 0 0 .2rem; font-family: 'Cormorant SC', var(--font-caps); font-weight: 600; font-size: 1.2rem; letter-spacing: .08em; }
.gloss-panel .gloss-lede { margin: 0 0 .6rem; font-size: .92rem; color: var(--ink-soft); font-style: italic; }
.gloss-panel p { margin: 0 0 .6rem; }
.gloss-close { position: absolute; right: .5rem; top: .3rem; background: none; border: 0; font-size: 1.5rem; color: var(--ink-soft); cursor: pointer; }

/* ── phones: the band ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .runheads { top: calc(var(--header-h, 8.5rem) + .4rem); }
  .rh { font-size: 1.02rem; letter-spacing: .2em; }
  .line, .note { left: 50%; top: calc(var(--under) + .9rem); bottom: auto; transform: translateX(-50%); width: min(23rem, 90vw); text-align: center; }
  .line { font-size: 1.2rem; line-height: 1.42; }
  .line[data-line="still"] { top: calc(var(--under) + 3.3rem); }
  .line-cta { top: calc(var(--under) + .9rem); }
  .note { width: min(22rem, 88vw); }
  .note-k { font-size: .68rem; }
  .line[data-line="hero"] { top: calc(var(--hero-y) + var(--sq-hero) * .39 + 6rem); }
  .hw { font-size: clamp(1.6rem, 7.4vw, 2.3rem); }
  /* the hero's words round the hero's man: over the triangle's apex (.454 of
     his box above his centre), under the circle (.389 below it) */
  .hw-a { right: auto; left: 50%; top: calc(var(--hero-y) - var(--sq-hero) * .454 - 3.4rem); transform: translateX(-50%); text-align: center; }
  .hw-b { left: 50%; width: auto; white-space: nowrap; top: calc(var(--hero-y) + var(--sq-hero) * .39 + .5rem); transform: translateX(-50%); }
  .hw-c { top: calc(var(--hero-y) + var(--sq-hero) * .39 + 2.9rem); }
  .pose-name { display: none; }
  /* the opening: the lockup high, the practising figure under it */
  .scene-opening { align-items: flex-start; justify-content: center; padding: 18vh 0 0; }
  .opening-hint { margin-top: 1.2rem; }
  .gloss-panel { left: 0 !important; top: auto !important; bottom: 0; width: 100%; max-height: 62vh; border-radius: 0; }
  .folio-num { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .geo .legend tspan { transition: none; }
  .pose-name { transition: none; }
}

/* narrow desktops and tablets: when the margins are too narrow for notes,
   they take the band under the plate, one at a time, as on a phone */
.note.in-band { left: 50%; top: auto; bottom: 7vh; transform: translateX(-50%); width: min(24rem, 88vw); text-align: center; }
.geo .plate .ins { opacity: 1; }

/* the mind's light, without the blur it once had, would wash the face out */
.aura-mind .wash { opacity: .5; }

/* the lines stay hairlines when the camera closes in: main.js-era widths divided by the zoom (--gk) */
.figure-stage .geo-circle, .figure-stage .geo-sq, .figure-stage .geo-tri { stroke-width: calc(2.6px / var(--gk, 1)); }
.figure-stage .geo-circle-hl, .figure-stage .geo-sq-hl, .figure-stage .geo-tri-hl { stroke-width: calc(5.4px / var(--gk, 1)); }
.figure-stage .geo-shade { stroke-width: calc(7.2px / var(--gk, 1)); }
.figure-stage .scored { stroke-width: calc(1.5px / var(--gk, 1)); }

/* ═══════════ Looks ═══════════ */
.geo .disc, .geo .tri-warm { opacity: 0; }

/* doré: gilded names and numerals, a wide light round the point */
html.look-dore { --rubric: #9c7418; --sanguine: #b3801f; }
html.look-dore .geo .ins { fill: #7d5a12; }
html.look-dore .geo .ins .sk { fill: #b58724; }
html.look-dore .pt-halo { transform: scale(1.7); }
html.look-dore .rh-num, html.look-dore .line .initial { color: #a9801c; }
html.look-dore .paper-mood.light { background: radial-gradient(70% 62% at 50% 46%, rgba(255, 238, 190, .5), rgba(255, 238, 190, 0) 72%); }
html[data-theme="dark"].look-dore .geo .ins { fill: #e2c070; }

/* calme: sepia only, and the gold point */
html.look-calme { --rubric: var(--sepia); --sanguine: #7a5a3c; }
html.look-calme .ruling, html.look-calme .pose-name { display: none; }
html.look-calme .line-flat { font-style: italic; }

/* ── the page that follows comes up with a torn top edge
   (tools/build-folio-paper.mjs: the strip overlaps the page by 12px) ── */
.page::before {
  content: ''; position: absolute; left: 0; right: 0; top: -36px; height: 48px; pointer-events: none;
  background: url("../assets/img/torn-edge.webp") 0 0 / 1024px 48px repeat-x;
}
html[data-theme="dark"] .page::before { background-image: url("../assets/img/torn-edge-dark.webp"); }

/* ═══════════ The chapter seals ═══════════
   Each chapter's line ends in a seal of red wax pressed with the chapter's
   figure; when the line leaves, the seal travels up to the running head and
   stays there for the rest of the chapter. Breaking it opens the card. The
   wax is a sprite of gradients (folio.html), no filter. */
.seal-slot { display: inline-block; width: 2.9rem; height: 1em; margin-left: .8em; vertical-align: middle; }
.rh .seal-slot { width: 2.9rem; }
.cseals { position: absolute; inset: 0; pointer-events: none; }
.cseal {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0;
  border: 0; background: none; cursor: pointer; opacity: 0; pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.cseal.live { will-change: transform, opacity; }
.cseal.on { pointer-events: auto; }
.cseal svg { width: 100%; height: 100%; display: block; overflow: visible; transition: transform .28s cubic-bezier(.3, 1.4, .5, 1); }
.cseal:hover svg, .cseal:focus-visible svg { transform: translateY(-2px) rotate(-7deg) scale(1.07); }
.cseal:active svg { transform: scale(.94); transition-duration: .08s; }
.cseal:focus-visible { outline: none; }
.cseal:focus-visible svg { outline: 1.5px dashed var(--rubric); outline-offset: 3px; border-radius: 50%; }
.cseal-tip {
  position: absolute; left: calc(100% + 1rem); top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-family: 'Cormorant SC', var(--font-caps); font-size: .88rem; font-weight: 600; letter-spacing: .14em; color: var(--sanguine);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; text-decoration-color: rgba(143, 54, 32, .45);
  text-shadow: 0 1px 2px rgba(var(--halo-rgb), .9); opacity: 0; transition: opacity .3s; pointer-events: none;
}
/* written beside the seal while it sits at the end of its line; after that, on hover */
.cseal.at-line .cseal-tip { opacity: 1; }
.cseal:hover .cseal-tip, .cseal:focus-visible .cseal-tip { opacity: 1; }
/* the words shown beside a seal (at its line, at the running head) are part of its button, and a tap on
   them opens the card as the wax does: they let the tap fall through to the figure. Words shown on hover
   alone keep none, so that words not yet visible never catch a click. */
.cseal.on:is(.at-line, .at-head) .cseal-tip { pointer-events: auto; }

/* ═══════════ The chapter card: a loose sheet laid over the leaf ═══════════ */
.cc-sources { display: none; }
.ccard { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; overflow: hidden; }
.ccard[hidden] { display: none; }
.ccard-veil {
  position: absolute; inset: 0; touch-action: none;
  background: radial-gradient(ellipse 80% 70% at 50% 46%, rgba(46, 30, 14, .34), rgba(22, 14, 6, .64));
}
.ccard-leaf {
  position: relative; display: flex; width: min(47rem, calc(100vw - 7rem)); max-height: calc(100vh - 11rem); margin-top: 1.5rem;
  transform-origin: 50% 50%; will-change: transform, opacity;
}
/* a soft shadow under the sheet (box-shadow, not a filter: the tear is too fine to cast its own) */
.ccard-leaf::before {
  content: ""; position: absolute; inset: 6px -4px -10px; pointer-events: none;
  box-shadow: 0 22px 60px rgba(20, 10, 2, .45), 0 4px 14px rgba(20, 10, 2, .25);
}
/* the torn edge (tools/build-folio-paper.mjs, deckle.webp): its flat paper overlaps the sheet by 24px */
.ccard-edge {
  position: absolute; inset: -40px; z-index: 2; pointer-events: none;
  border: 64px solid transparent; border-image: url("../assets/img/deckle.webp") 64 / 64px / 0 round;
}
.ccard-sheet {
  position: relative; z-index: 1; flex: 1; min-width: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: 2.4rem 3.2rem 0; outline: none; scrollbar-width: none; color: var(--ink);
  background: url("../assets/img/grain-light.webp") 0 0 / 256px 256px, #e8d7ad;
}
.ccard-sheet::-webkit-scrollbar { display: none; }
html[data-theme="dark"] .ccard-edge { border-image-source: url("../assets/img/deckle-dark.webp"); }
html[data-theme="dark"] .ccard-sheet { background: url("../assets/img/grain-dark.webp") 0 0 / 256px 256px, #171310; }
.ccard-close {
  position: sticky; top: 0; float: right; z-index: 3; margin: -1.5rem -2.2rem 0 0; width: 2.6rem; height: 2.6rem;
  font: 400 1.9rem/1 "IM Fell English", serif; color: var(--ink-soft); background: none; border: 0; cursor: pointer;
}
.ccard-close:hover, .ccard-close:focus-visible { color: var(--rubric); }

.ccard-body { transition: opacity .22s; }
.ccard-body.turning { opacity: 0; }
.cc-kicker { margin: 0; text-align: center; font-family: "Cormorant SC", var(--font-caps); font-size: .82rem; letter-spacing: .22em; color: var(--sanguine); }
.cc-title { margin: .2rem 0 0; text-align: center; font-family: "Cormorant SC", var(--font-caps); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: .12em; color: var(--ink); }
.cc-num { font-family: "IM Fell English", serif; font-size: 1.5em; letter-spacing: 0; color: var(--rubric); margin-right: .15em; vertical-align: -.1em; }
.cc-fig { display: block; width: min(17rem, 70%); margin: .5rem auto .3rem; overflow: visible; }
.cc-fig .f-ink, .cc-fig .f-faint, .cc-fig .f-soft, .cc-fig .f-sang, .cc-fig .f-rub { fill: none; }
.cc-fig .f-ink { stroke: var(--sepia); stroke-width: 1.1; }
.cc-fig .f-faint { stroke: rgba(var(--metalpoint), .55); stroke-width: .8; }
.cc-fig .f-soft { stroke: rgba(var(--metalpoint), .9); stroke-width: .9; }
.cc-fig .f-sang { stroke: var(--sanguine); stroke-width: 1.1; stroke-dasharray: 7 3 2 3; }
.cc-fig .f-rub { stroke: var(--rubric); stroke-width: 1.5; }
.cc-fig .f-pt { fill: #d2a53a; }
.cc-fig text { font-family: "Cormorant SC", var(--font-caps); font-size: 8.6px; letter-spacing: .12em; fill: var(--ink-soft); text-anchor: middle; dominant-baseline: middle; }
.cc-fig text.f-sang-t { fill: var(--sanguine); }
.cc-lede { margin: .2rem auto 1.1rem; max-width: 30rem; text-align: center; font-family: "IM Fell English", serif; font-style: italic; font-size: 1.22rem; line-height: 1.4; color: var(--ink-soft); }
.cc-intro p, .cc-item p { font-family: "Cormorant Garamond", serif; }
.cc-intro p { margin: 0 0 .7rem; font-size: 1.14rem; line-height: 1.62; }
.cc-first::first-letter {
  float: left; font-family: "IM Fell English", serif; font-size: 3.5em; line-height: .78; color: var(--rubric);
  padding: .07em .09em 0 0;
}
.cc-items { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 2.2rem; margin: 1.3rem 0 .6rem; padding-top: 1.2rem; border-top: 1px solid rgba(var(--rule), .35); }
.cc-items.cc-n3 { grid-template-columns: repeat(3, 1fr); gap: 1.1rem 1.6rem; }
.cc-items.cc-n1, .cc-items.cc-n2 { grid-template-columns: 1fr; }
.cc-item h4 { display: inline; margin: 0; font-family: "Cormorant SC", var(--font-caps); font-weight: 600; font-size: 1.06rem; letter-spacing: .1em; }
.cc-mark { width: 22px; height: 22px; margin-right: .45rem; vertical-align: -5px; fill: none; stroke: rgba(var(--metalpoint), .85); stroke-width: 1; overflow: visible; }
.cc-mark .hot { stroke: var(--rubric); stroke-width: 2.6; stroke-linecap: round; }
.cc-mark .hot.sang { stroke: var(--sanguine); stroke-dasharray: 3 2; }
.cc-tag { margin: .18rem 0 .35rem; font-family: "Cormorant SC", var(--font-caps); font-size: .8rem; letter-spacing: .12em; color: var(--sanguine); }
.cc-item p:last-child { margin: 0; font-size: 1.03rem; line-height: 1.56; }
.cc-coda { margin: 1.1rem auto .4rem; max-width: 32rem; text-align: center; font-family: "IM Fell English", serif; font-style: italic; font-size: 1.1rem; line-height: 1.5; color: var(--ink-soft); }
.cc-coda::before { content: "\2767"; display: block; margin-bottom: .2rem; font-style: normal; color: var(--rubric); }
.cc-quote { margin: 1.2rem auto .4rem; max-width: 31rem; text-align: center; }
.cc-quote p { margin: 0; font-family: "IM Fell English", serif; font-style: italic; font-size: 1.12rem; line-height: 1.5; }
.cc-quote cite { display: block; margin-top: .45rem; font-family: "Cormorant SC", var(--font-caps); font-style: normal; font-size: .8rem; letter-spacing: .14em; color: var(--ink-soft); }
.ccard-nav {
  position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin: 1.4rem -3.2rem 0; padding: 1.4rem 3.2rem 1.6rem;
}
/* the sheet itself, fading in under the buttons: the same grain, so no band shows */
.ccard-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../assets/img/grain-light.webp") 0 0 / 256px 256px, #e8d7ad;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%);
}
html[data-theme="dark"] .ccard-nav::before { background: url("../assets/img/grain-dark.webp") 0 0 / 256px 256px, #171310; }
.ccard-go, .ccard-resume {
  font-family: "Cormorant SC", var(--font-caps); font-size: .9rem; letter-spacing: .14em; color: var(--ink-soft);
  background: none; border: 0; padding: .35rem 0; cursor: pointer;
}
.ccard-go:hover, .ccard-go:focus-visible { color: var(--ink); }
.ccard-go.none { visibility: hidden; }
.ccard-resume { color: var(--ink); border-bottom: 1px solid rgba(var(--rule), .7); }
.ccard-resume:hover, .ccard-resume:focus-visible { color: var(--rubric); border-color: var(--rubric); }

@media (max-width: 860px) {
  .cseal { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .seal-slot { width: 2.6rem; }
  .cseal-tip { left: 50%; top: calc(100% + .1rem); transform: translateX(-50%); font-size: .72rem; }
  /* the tear overlaps the sheet by 24px, and needs about as much room outside it */
  .ccard-leaf { width: calc(100vw - 4.2rem); max-height: calc(100dvh - 7.5rem); margin-top: 1rem; }
  .ccard-sheet { padding: 2rem 1.9rem 0; }
  .ccard-close { margin: -1.3rem -1.1rem 0 0; }
  .cc-items, .cc-items.cc-n3 { grid-template-columns: 1fr; }
  .ccard-nav { margin: 1.2rem -1.9rem 0; padding: 1rem 1.9rem 1.5rem; }
  .ccard-go-t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cseal svg, .ccard-body { transition: none; }
}

/* ── the falling marks, where they meet the figure (js/folio.js: currents) ──
   each mark carries its own opacity, so the one the body touches can brighten */
html .driftfall.currents { opacity: 1; --dfo: .10; --gilt-ink: #9c7418; }
html[data-theme="dark"] .driftfall.currents { opacity: 1; --dfo: .085; --gilt-ink: #e8cf82; }

/* the red of the small capitals on the cards and beside the seals: the page's
   sanguine measures 4.3:1 on the light sheet, a shade under what small type
   needs, so these take a deeper one (5.4:1; 5.0 on the leaf itself) */
.ccard, .cseals { --cc-red: #8f3620; }
html[data-theme="dark"] .ccard, html[data-theme="dark"] .cseals { --cc-red: var(--sanguine); }
.cc-kicker, .cc-tag, .cseal-tip { color: var(--cc-red); }

/* ── the line under the man, made to be read ────────────────────
   A size up, in the full ink; each word rises a little as the pen writes it,
   and a rule is drawn under the sentence as it lands — so the eye goes to it
   as it goes to the motion. (Transforms and a scaled rule only.) */
.line { font-size: clamp(1.2rem, 1.55vw, 1.52rem); font-weight: 500; color: var(--ink); }
.line.write .ch { display: inline-block; transform: translateY(.32em); transition: transform .6s cubic-bezier(.2, .8, .25, 1); }
.line.write .ch.lit { transform: none; }
.line::after {
  content: ""; display: block; width: min(13rem, 42%); height: 1px; margin: .6rem auto 0; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(var(--rule), 0), rgba(var(--rule), .95) 28%, rgba(var(--rule), .95) 72%, rgba(var(--rule), 0));
  transition: transform 1.1s cubic-bezier(.3, .7, .2, 1) .25s;
}
.line.on::after { transform: scaleX(1); }
.line-cta::after, .line-flat::after, .line[data-line="hero"]::after { display: none; }
@media (max-width: 860px) { .line { font-size: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .line::after { transition: none; } }

/* ── the seal, read as something to open ─────────────────────────
   Two tails of silk under the wax say "sealed document"; at the running
   head its words stay beside it; and until a card has been opened a slow
   ring goes out from it now and then. The ring is a transformed circle. */
.cseal::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid var(--rubric); opacity: 0; transform: scale(.8);
}
.cseal.at-head .cseal-tip { opacity: 1; }
html:not(.card-read) .cseal.at-head::before { animation: seal-call 5.5s ease-out 1.2s infinite; }
/* (once a card has been read the ring still goes out, less often: the owner — a reader who missed the
   words, or does not know where to touch, must still find the seal at every chapter) */
html.card-read .cseal.at-head::before { animation: seal-call 9s ease-out 2.4s infinite; }
@keyframes seal-call {
  0%   { opacity: 0;  transform: scale(.8); }
  6%   { opacity: .7; }
  30%  { opacity: 0;  transform: scale(1.9); }
  100% { opacity: 0;  transform: scale(1.9); }
}
/* …and the wax itself, now and then, is offered: a small tilt and press, as a seal is held out to be
   broken (the owner, 2026-10-01: "some effect on the seal" so that it reads as the thing to open) */
.cseal.at-head svg, .cseal.at-line svg { animation: seal-offer 6s ease-in-out 2s infinite; }
@keyframes seal-offer {
  0%, 84%, 100% { transform: none; }
  88% { transform: translateY(-2px) rotate(-8deg) scale(1.07); }
  92% { transform: rotate(4deg) scale(1.03); }
  96% { transform: rotate(-1.5deg); }
}
.cseal:hover::before, .cseal:focus-visible::before, .cseal:hover svg, .cseal:focus-visible svg, .cseal:active svg { animation: none; }
@media (max-width: 860px) {
  /* on a phone its words go under the seal, centred on it, at every line (the seals end their lines
     near the middle: at 360 the words keep 18px or more inside the screen) — but beside it at III,
     over the second line, and at the prologue on a short phone, over its button */
  .cseal-tip { left: 50%; right: auto; top: calc(100% + .7rem); transform: translateX(-50%); font-size: .74rem; }
  /* at the running head they stay too (they used to go: "no room", and the reader lost the way in),
     set in two short lines under the silk tails, right-aligned so that they keep inside the narrowest screen */
  .cseal.at-head .cseal-tip {
    opacity: 1; left: auto; right: -.35rem; top: calc(100% + 1.4rem); transform: none;
    width: 5.4rem; white-space: normal; text-align: right; line-height: 1.2; font-size: .66rem; letter-spacing: .12em;
  }
}
@media (prefers-reduced-motion: reduce) { .cseal::before, .cseal svg { animation: none !important; } }

/* ═══════════ V · what grows out of awareness (js/folio.js: bloom) ═══════════
   Vines, leaves and flowers drawn into the plate; butterflies and drifting
   leaves over the leaf, moved by transforms alone. Ink and washes per look. */
.folio { --nature-ink: var(--sepia); --leaf-wash: rgba(118, 138, 72, .42); --petal-wash: rgba(214, 138, 112, .42);
         --wing-wash: rgba(222, 170, 78, .6); --wing-wash-2: rgba(170, 72, 46, .5); }
html.look-dore .folio { --petal-wash: rgba(226, 184, 88, .5); --wing-wash: rgba(232, 196, 104, .68); --wing-wash-2: rgba(200, 150, 60, .55); }
html.look-calme .folio { --leaf-wash: rgba(150, 128, 92, .28); --petal-wash: rgba(170, 140, 100, .3); --wing-wash: rgba(176, 148, 104, .45); --wing-wash-2: rgba(140, 112, 76, .4); }
html[data-theme="dark"] .folio { --leaf-wash: rgba(150, 178, 110, .34); --petal-wash: rgba(232, 160, 132, .36); --wing-wash: rgba(236, 196, 110, .5); --wing-wash-2: rgba(214, 120, 90, .42); }
/* (the bloom that was drawn into the plate is now the garden: see « V · the living drawing », at the end) */
.nature { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.bfly, .fleaf, .seed { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.seed { display: block; background: no-repeat center / contain; }
.bfly { perspective: 90px; }
.bfly .wing { position: absolute; top: 0; width: 50%; height: 100%; background: no-repeat center / contain; }
.bfly .wl { left: 0; transform-origin: 100% 50%; animation: flap-l var(--flap, .22s) ease-in-out infinite alternate; }
.bfly .wr { right: 0; transform-origin: 0 50%; animation: flap-r var(--flap, .22s) ease-in-out infinite alternate; }
.bfly .bbody { position: absolute; left: calc(50% - 1.5px); top: 18%; width: 3px; height: 64%; border-radius: 2px; background: var(--nature-ink); }
@keyframes flap-l { from { transform: rotateY(0deg); } to { transform: rotateY(64deg); } }
@keyframes flap-r { from { transform: rotateY(0deg); } to { transform: rotateY(-64deg); } }
.fleaf { display: block; background: no-repeat center / contain; }

/* the seal at the running head, clear of its last letter, on a phone too */
@media (max-width: 860px) { .rh .seal-slot { width: 2.6rem; margin-left: 2.1rem; } }

/* ── the card: there is more below ── */
.ccard-more {
  position: absolute; left: 50%; bottom: calc(100% - .5rem); transform: translateX(-50%);
  font-family: "Cormorant SC", var(--font-caps); font-size: .86rem; letter-spacing: .16em; color: var(--cc-red, var(--rubric));
  /* a small paper tab of its own, so that it reads over the text fading under it */
  background: #efe2bf; border: 1px solid rgba(var(--rule), .55); border-radius: 999px; padding: .22rem .85rem .2rem;
  box-shadow: 0 2px 8px rgba(43, 30, 19, .14); white-space: nowrap;
  cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .35s;
}
html[data-theme="dark"] .ccard-more { background: #211b15; }
.ccard.more .ccard-more { opacity: 1; pointer-events: auto; }
.ccard-more-a { display: inline-block; margin-left: .3em; animation: more-bob 1.6s ease-in-out infinite; }
@keyframes more-bob { 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .ccard-more-a { animation: none; } }

/* pinched in (js/folio.js: zoomed): the signs and the living things put away,
   the large layers no longer kept apart, the drawings' own motions paused */
html.zoomed .driftfall, html.zoomed .nature { display: none; }
html.zoomed .figure-stage, html.zoomed .figure-marks, html.zoomed .paper-layer, html.zoomed .paper-stains,
html.zoomed .cseal, html.zoomed .calque, html.zoomed .folio { will-change: auto !important; }
/* (no `.aura *` here: a rule ending in * made the class restyle the whole page, at the start of a pinch) */
html.zoomed .cseal::before { animation: none; }

/* ── layers: only what moves, and only while it is seen ──
   main.css gives every span of a statement a layer of its own, and the
   writing makes a span of every letter: some sixty layers, kept for the whole
   visit for words seen twice. The drawings of the aura, likewise, are layers
   only while they are lit. */
.folio .statement span { will-change: auto; }
.aura-layer { will-change: auto; }
.aura-layer.live { will-change: opacity; }

/* past the story, the drawing's loops are taken off (js/folio.js: .aura.off) */
.aura.off * { animation: none !important; }

/* ── round 3 ─────────────────────────────────────────────────────── */
.probe { position: absolute; left: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; top: 50%; }
@media (max-width: 860px) {
  .probe-cy { top: var(--fig-cy); }
  .probe-under { top: var(--under); }
  .calque { inset: 1% -7% 6% -7%; }
  /* the hero's button clear of the sentence's seal and its words */
  .line[data-line="hero"] .line-btn { margin-top: 3.3rem; }
  .line::after { display: none; }
}
.line[data-line="hero"] .line-btn { margin-top: 1.6rem; }
/* the running head opens its chapter */
.rh.on { pointer-events: auto; cursor: pointer; }
/* the opening's sentence held from the foot of the leaf (it sat under the figure practising at the right
   while it was a name; it is now under the lockup, on its axis: see the posture quotes, below) */
.pose-name.at-foot { top: auto; bottom: 16vh; }
/* the drawing's names never below 9.5px on the screen (js sets --geo-min) */
.geo .ins, .geo .legend { font-size: max(17px, var(--geo-min, 0px)); }
/* on the desk (opening and close): the header in paper ink, the folio number away */
html.on-desk:not(.page-under) .site-nav a, html.on-desk:not(.page-under) .logo-studio, html.on-desk:not(.page-under) .logo-etre, html.on-desk:not(.page-under) .logo-tagline, html.on-desk:not(.page-under) .lang-switch,
html.on-desk:not(.page-under) .theme-toggle, html.on-desk:not(.page-under) .nav-toggle { color: #efe4c8; border-color: rgba(239, 228, 200, .45); }
html.on-desk .folio-num { opacity: 0; }
/* the finale's ink, finer */
.folio { --nature-ink: rgba(74, 53, 34, .72); }
html[data-theme="dark"] .folio { --nature-ink: rgba(230, 214, 180, .7); }
/* the falling signs: fainter */
html .driftfall.currents { --dfo: .078; }
html[data-theme="dark"] .driftfall.currents { --dfo: .058; }
/* (after .note.in-band, which would otherwise set a phone's notes at the foot of the screen) */
@media (max-width: 860px) { .note.in-band { top: calc(var(--under) + .9rem); bottom: auto; } }
/* the narrowest phones: the sentence a size down, so that it and its seal keep to two lines */
@media (max-width: 380px) { .line { font-size: 1.08rem; } }
/* (after the general rule above: on a phone the hero's button leaves room for the seal's words) */
@media (max-width: 860px) { .line[data-line="hero"] .line-btn { margin-top: 3.3rem; } }
@media (max-width: 860px) { .cseal-tip { top: calc(100% + .3rem); } }
@media (max-width: 860px) { .cseal-tip { top: calc(100% + .95rem); } }

/* ── V · the burst (js/folio.js natureBurst): petals, blossoms, pollen, notes, swallows ── */
.petal, .blossom, .pollen, .fnote, .bird { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; background: no-repeat center / contain; }
.pollen { border-radius: 50%; background: radial-gradient(circle, #fff3c4 0, #e7c068 42%, rgba(214, 170, 70, 0) 72%); }
html[data-theme="dark"] .pollen { background: radial-gradient(circle, #fff6d6 0, #f0cf7e 42%, rgba(240, 207, 126, 0) 72%); }
.bird-w { position: absolute; inset: 0; background: no-repeat center / contain; animation: bird-flap .42s ease-in-out infinite alternate; }
@keyframes bird-flap { from { transform: scaleY(1); } to { transform: scaleY(-.55); } }

/* ── the opening lockup, legible over the figure ─────────────────
   The owner (2026-09-30): the figure's first posture overlaps the title —
   keep both where they are, but the title, and above all the line under it,
   must read. Full ink, a heavier cut, and the leaf's own colour as a halo
   round the letters, so that over the body they stand on a clearing of paper. */
.folio .opening-lockup { text-shadow: none; }
.folio .opening-logo { color: var(--ink); font-weight: 700;
  text-shadow: 0 0 2px rgba(var(--halo-rgb), 1), 0 0 14px rgba(var(--halo-rgb), .95), 0 0 34px rgba(var(--halo-rgb), .85); }
.folio .opening-tagline {
  font-family: 'Cormorant SC', var(--font-caps); font-variant: normal; font-weight: 700; color: var(--ink); opacity: 1;
  font-size: clamp(1.12rem, 1.6vw, 1.6rem); letter-spacing: .2em;
  text-shadow: 0 0 2px rgba(var(--halo-rgb), 1), 0 0 10px rgba(var(--halo-rgb), .95), 0 0 24px rgba(var(--halo-rgb), .85);
}
.folio .opening-tagline .tg-dot { color: var(--rubric); font-weight: 400; }
.folio .opening-hint { color: var(--ink-soft); font-size: .84rem; text-shadow: 0 0 2px rgba(var(--halo-rgb), 1), 0 0 10px rgba(var(--halo-rgb), .9); }
@media (max-width: 860px) {
  .folio .opening-tagline { font-size: 1.02rem; letter-spacing: .16em; line-height: 1.8; }
}

/* ── the logotype at the opening and in the loader (the owner, 2026-10-01) ──
   The title page set large. Its core, the header and the colophon are in folio-page.css, which is loaded
   after this file; here are only its sizes. The opening keeps the paper halo of .folio .opening-logo round
   the letters, inherited by « studio » and « tre » and lent to the drawn e through --wm-halo, because the
   figure's first posture can pass behind the name. The triangle gets a clearing of paper of its own shape
   under it: a radial disc showed as a pale blob on the bare paper. Nowhere else has the clearing, since
   nothing passes behind the name anywhere else. On a 1366 desktop the leaf is scaled to about .82, so the
   name's size here is the leaf's, not the screen's. */
.folio .opening-logo.wm {
  --E: clamp(4.4rem, 9.8vw, 8.6rem); display: flex; font-weight: 400; letter-spacing: 0;
  --wm-halo: 0 0 2px rgba(var(--halo-rgb), 1), 0 0 14px rgba(var(--halo-rgb), .95), 0 0 34px rgba(var(--halo-rgb), .85);
}
.folio .opening-logo.wm .wm-studio { color: var(--ink); }
/* (isolated, so that the clearing at z-index -1 lies under the word's own letters but over the figure) */
.folio .opening-logo.wm .wm-etre { color: var(--display-ink); isolation: isolate; }
.folio .opening-logo.wm .wm-etre::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: calc(var(--tri-box) * 1.4); height: calc(var(--tri-box) * 1.3);
  left: calc(var(--tri-cx) - var(--tri-box) * .7); top: calc(var(--wm-bl) - var(--tri-base) - var(--tri-box) * .97);
  background: rgba(var(--halo-rgb), .92);
  -webkit-mask: url("../assets/img/etre-tri-halo.svg") center / 100% 100% no-repeat;
  mask: url("../assets/img/etre-tri-halo.svg") center / 100% 100% no-repeat;
}
@media (forced-colors: active) { .folio .opening-logo.wm .wm-etre::before { content: none; } }
/* A phone: the title page stands about 39px taller than the old one-line name, so the leaf's top margin
   and the hint's give it back; without them « faites défiler » came down onto the drawing's apex at 390 x 844.
   (js/folio.js places the practising figure under the hint once the faces have arrived, as before.) */
@media (max-width: 860px) { .folio .scene-opening { padding-top: 15.5vh; } .folio .opening-hint { margin-top: .4rem; } }
/* At the close the leaf lies on the desk again, its torn top just under the header. The header's line now
   stands beside the name, on être's baseline, and at 1280 x 720 the tear's highest fibres touched it: it
   gives way on the desk on a computer too, as it already did on a phone (below). (At the opening the
   header's name is not shown at all: the opening's own lockup is.) */
@media (min-width: 861px) { html.on-desk:not(.page-under) body:not(.narrative-done) .logo-tagline { opacity: 0; transition: opacity .4s; } }
/* The loader names the studio as the page does, at the text set of the kicker (it is small there). Its
   colours are the page's: the kicker in ink, « être » in the display ink, the triangle in the rubric. */
body[data-marks="folio"] .loader-word.wm { --E: 3rem; --tri-w: .26em; --wm-kick-w: 700; --wm-kick-r: .42; --wm-kick-t: .16em; font-size: inherit; letter-spacing: 0; }

/* ── the cue to go on (js/folio.js: at a rest, after a moment's stillness) ── */
body[data-marks="folio"] .scroll-cue { display: none !important; }
/* (outside the leaf, at the screen's scale: inside it, it shrank with the leaf at the close and fell under the torn edge) */
.stage > .step-cue { z-index: 7; }
.step-cue {
  position: absolute; left: 50%; bottom: 1.1vh; transform: translateX(-50%); margin: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: .15rem; opacity: 0; transition: opacity .9s ease;
  font-family: 'Cormorant SC', var(--font-caps); font-weight: 600; font-size: .74rem; letter-spacing: .26em; color: var(--ink-soft);
  text-shadow: 0 0 2px rgba(var(--halo-rgb), 1), 0 0 10px rgba(var(--halo-rgb), .9);
}
.step-cue i { display: block; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.step-cue.on { opacity: .8; transition-duration: 1.4s; }
.step-cue.on i { animation: step-bob 2.2s ease-in-out infinite; }
@keyframes step-bob { 50% { transform: translateY(4px) rotate(45deg); } }
@media (max-width: 860px) { .step-cue span { display: none; } .step-cue { bottom: .5rem; } }
@media (prefers-reduced-motion: reduce) { .step-cue.on i { animation: none; } }

/* the posture's name, read as a caption: a size up, in the full ink */
.pose-name { font-size: 1.18rem; color: var(--ink); }
.pose-name.on { opacity: 1; }
/* (in the leaf's lower left corner on a desktop, answering the folio number in the right) */
@media (min-width: 861px) {
  .step-cue { left: calc(1.4rem + 1.6vw); bottom: 2.4vh; transform: none; flex-direction: row; align-items: center; gap: .55rem; }
  .step-cue i { margin-top: -4px; }
}

/* the running head's trailing letter-spacing balanced with as much on the left, so the word's ink is centred */
.rh { padding-left: .26em; }
.rh-num { margin-right: .2em; }
@media (max-width: 860px) { .rh { padding-left: .2em; } }

/* ═══════════ Round 5 — the story review ═══════════ */
/* the drawing on the body, in the leaf's own inks (main.css drew it in cyan light and neon red:
   a medical screen, not a notebook) — ochre for the current, red chalk for the heart and the ache */
.folio .aura-energy .nerves-bed { stroke: rgba(74, 53, 34, .36); stroke-width: 3.4; }
.folio .aura-energy .nerves-flow { stroke: #b27d1f; stroke-width: 3.6; }
.folio .aura-energy .nerves-flow.glow { stroke: rgba(var(--halo-rgb), .5); stroke-width: 9; }
.folio .aura-energy .nerves-flow.glow-2 { display: none; }
.folio .aura-energy-dis .nerves-bed { stroke: rgba(74, 53, 34, .24); }
.folio .aura-heart .seat { stroke: var(--sanguine); stroke-width: 1.8; fill: rgba(164, 68, 44, .14); }
.folio .aura-heart-dis .rings circle { stroke: var(--sanguine); stroke-width: 2.4; }
.folio .aura-heart-dis .rings.glow { display: none; }
.folio .aura-mind .halo { stroke: var(--sepia); stroke-width: 1.3; stroke-dasharray: none; opacity: .62; animation: none; }
.folio .aura-mind .halo-2, .folio .aura-mind .halo.glow { display: none; }
.folio .aura-mind-dis .tangle { stroke: var(--sepia); stroke-width: 2; }
.folio .aura-mind-dis .tangle.glow { display: none; }
.folio .aura-mind-dis .mark { fill: var(--sanguine); stroke-width: 5px; }
.folio .aura-body-dis .tension path { stroke: var(--sanguine); stroke-width: 2.6; }
.folio .aura-body-dis .tension path.glow { stroke: rgba(var(--halo-rgb), .45); stroke-width: 8; }

/* the triangle's line stays fine as it spreads away in V (js/folio.js renderTriExit: --tk) */
.figure-stage .tri-all .geo-tri { stroke-width: calc(2.6px / var(--gk, 1) / var(--tk, 1)); }
.figure-stage .tri-all .geo-tri-hl { stroke-width: calc(5.4px / var(--gk, 1) / var(--tk, 1)); }

/* the names on the drawing knock out the lines and limbs they cross */
.geo .ins, .geo .legend { paint-order: stroke; stroke: rgba(var(--halo-rgb), .82); stroke-width: 4.5px; stroke-linejoin: round; }
/* (the inscription round the circle, on the light leaf: a halo less than half as wide. At 4.5px the cream filled
   the fine capitals' counters and the gaps between them, and the gold read as cream on cream; the garden of V
   now lies under it, and the narrower halo still knocks out the leaves and stems the letters cross) */
html:not([data-theme="dark"]) .geo .legend { stroke-width: 2px; }
.geo .plate .ins { stroke: none; }

/* IV · the paper clears under the header and the running head while the camera studies the body */
.folio > .study-veil { z-index: 5; }
.study-veil {
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--header-h, 5.6rem) + 6.2rem); pointer-events: none; opacity: 0;
  /* (the leaf's own tone, not the halo's lighter one: a pale band read as fog) — and solid through the
     running head and the seal: at .9 there, the thighs of the close-ups read through « IV Réalignement » */
  background: linear-gradient(to bottom, rgba(var(--veil-rgb, 226, 207, 168), .995) 0%, rgba(var(--veil-rgb, 226, 207, 168), .99) 55%, rgba(var(--veil-rgb, 226, 207, 168), 0) 100%);
}
@media (max-width: 860px) { .study-veil { height: calc(var(--header-h, 8.5rem) + 5.8rem); } }
/* …and the study's notes are small slips of paper laid on it: they never sit on skin */
.note.n04 {
  padding: .65rem .95rem .7rem; text-shadow: none;
  background: url("../assets/img/grain-light.webp") 0 0 / 256px 256px, rgba(240, 229, 200, .97);
  box-shadow: 0 8px 20px rgba(var(--shade), .16), 0 1px 3px rgba(var(--shade), .14);
}
html[data-theme="dark"] .note.n04 { background: url("../assets/img/grain-dark.webp") 0 0 / 256px 256px, rgba(30, 24, 18, .96); }

/* the posture's caption: on a phone too, under the drawing */
@media (max-width: 860px) {
  .pose-name { display: block; top: calc(var(--under) + .75rem); white-space: normal; width: min(22rem, 88vw); text-align: center; font-size: 1.08rem; line-height: 1.5; }
}

/* the opening's invitation, read and not guessed at */
.folio .opening-hint { font-size: .9rem; animation-name: folio-hint; }
@keyframes folio-hint { 50% { transform: translateY(5px); } }

/* on the desk (opening, close): the header's controls in paper ink, flat — no embossing */
html.on-desk:not(.page-under) .site-nav > a:not(.btn), html.on-desk:not(.page-under) .logo, html.on-desk:not(.page-under) .lang-switch { text-shadow: none; }
html.on-desk:not(.page-under) .nav-toggle span { background: #efe4c8; }
html.on-desk:not(.page-under) .lang-switch, html.on-desk:not(.page-under) .theme-toggle { background: rgba(20, 14, 8, .28); }

/* a phone: the header's line under the name on one row (it wrapped, leaving a stray dot) */
@media (max-width: 860px) { body[data-marks="folio"] .logo-tagline { white-space: nowrap; font-size: .56rem; letter-spacing: .12em; } }

/* a phone: the stack starts higher — the running head just under the header's name (there were
   three lines' worth of bare paper between them), so that the sentence, its seal and « Lire le
   chapitre » all come above the fold (the words fell under it on a phone with its bars showing) */
@media (max-width: 860px) {
  .runheads { top: 6.3rem; }
  :root { --fig-cy: calc(9.75rem + var(--sq-f) * .445 + var(--slack)); }
  .line .initial { font-size: 1.9em; vertical-align: -.14em; margin-right: .02em; }
}
html[data-theme="dark"] .study-veil { --veil-rgb: 24, 19, 14; }

/* V · galaxies out of the body */
.galaxy, .fruit { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; background: no-repeat center / contain; }

/* the cues to go on, read (they were 2:1 and fading to half) */
.step-cue { font-size: .8rem; color: var(--ink); }
.step-cue.on { opacity: 1; }
.folio .opening-hint { font-family: 'Cormorant SC', var(--font-caps); font-variant: normal; font-weight: 600; font-size: .92rem; letter-spacing: .2em; color: var(--ink); }
/* the header's line under the name, legible (1.8:1 before) */
body[data-marks="folio"] .logo-tagline { font-family: 'Cormorant SC', var(--font-caps); font-variant: normal; font-weight: 600; color: var(--ink); }
/* on a phone, once the leaf lies on the desk again, the header's line would sit across its torn edge */
@media (max-width: 860px) { html.on-desk:not(.page-under) body:not(.narrative-done) .logo-tagline { opacity: 0; transition: opacity .4s; } }

/* the close: its call in the sepia plate (« Continuer la lecture » now, alone: Area B, at the end) */
.line-cta .cta-f:first-child {
  background: var(--sepia); color: var(--paper-lit, #f5ecd4); border: 0; border-radius: 2px; padding: .85rem 1.5rem .8rem;
  box-shadow: inset 0 0 0 3px var(--sepia), inset 0 0 0 4px rgba(var(--halo-rgb), .28); font-weight: 600; letter-spacing: .16em;
}
/* (the close's buttons sit on the paper, not on the desk: they keep the paper's colours) */

/* a ¶ is small; its target is not */
@media (pointer: coarse) { .para { position: relative; } .para::after { content: ""; position: absolute; inset: -14px -10px; } }

/* the card: the text fades under « la suite » rather than being covered by it */
.ccard.more .ccard-sheet { -webkit-mask-image: linear-gradient(#000 calc(100% - 3.2rem), rgba(0, 0, 0, .25)); mask-image: linear-gradient(#000 calc(100% - 3.2rem), rgba(0, 0, 0, .25)); }
.cc-quote cite i { font-family: 'Cormorant Garamond', serif; font-style: italic; letter-spacing: .02em; }
.cc-kicker, .ccard-go, .ccard-resume { font-weight: 600; }
.ccard-go { color: var(--ink); }

/* the header's small controls: the same look, a finger's target (44px) */
body[data-marks="folio"] .lang-switch a { opacity: .85; }
@media (pointer: coarse) {
  body[data-marks="folio"] .lang-switch a, body[data-marks="folio"] .theme-toggle { position: relative; }
  body[data-marks="folio"] .lang-switch a::after { content: ""; position: absolute; inset: -14px -6px; }
  body[data-marks="folio"] .theme-toggle::after { content: ""; position: absolute; inset: -8px; }
}

/* the finale's living things pass behind the words (the call to practise, the chapter head), not over them */
/* (the words keep their layer: the living things go under them instead, and the gold point stays over) */
.line[data-line="close03"] { font-style: italic; }
/* a phone, III's arrival: the seal after « vous êtes » and its words beside it, clear of the second line */
@media (max-width: 860px) {
  .cseal[data-card="iii"].at-line .cseal-tip { left: calc(100% + .45rem); right: auto; top: 50%; transform: translateY(-50%); }
  .line[data-line="l03"] .line-2 { margin-top: 1.1rem; }
}

/* the finale's living things under the words and the point, over the figure */
.nature { z-index: 5; }

/* a quiet way past the story (js/folio.js skipStory): lower left on a desktop, beside the cue to go on */
.folio > .skip-story { z-index: 6; }
.skip-story {
  position: absolute; left: calc(1.4rem + 1.6vw); bottom: calc(2.4vh + 1.6rem); margin: 0; padding: .35rem 0; border: 0; background: none; cursor: pointer;
  font-family: 'Cormorant SC', var(--font-caps); font-weight: 600; font-size: .74rem; letter-spacing: .2em; color: var(--ink-soft);
  text-decoration: underline; text-decoration-color: rgba(var(--rule), .5); text-underline-offset: .35em;
  opacity: 0; pointer-events: none; transition: opacity .6s;
}
.skip-story.on { opacity: .75; pointer-events: auto; }
.skip-story:hover, .skip-story:focus-visible { opacity: 1; color: var(--ink); }
.skip-story:focus-visible { outline: 1.5px dashed var(--rubric); outline-offset: 3px; }
@media (max-width: 860px) { .skip-story { left: auto; right: calc(var(--rail-gutter, 1.6rem) + .6rem); bottom: .55rem; font-size: .68rem; } }
html.skipping .folio { opacity: 0; transition: opacity .25s; }

/* chapter I's plate: its line only on a phone, where the notes have gone one by one */
@media (min-width: 861px) { .line[data-line="plate01"] { display: none; } }


/* ═══════════ Round 9 — the story review r3 ═══════════ */
/* V · the living things in the codex's own inks — olive-ochre leaves, red-chalk petals and hearts, ochre and
   red-chalk wings (green, pink, purple and yellow read as a sheet of stickers) — and the pollen a dot of ink,
   not a light: the one gold thing on the leaf is the point */
.folio { --leaf-wash: rgba(122, 112, 70, .3); --petal-wash: rgba(164, 68, 44, .26); --wing-wash: rgba(150, 110, 60, .34); --wing-wash-2: rgba(164, 68, 44, .3); }
html[data-theme="dark"] .folio { --leaf-wash: rgba(176, 166, 116, .28); --petal-wash: rgba(217, 130, 106, .3); --wing-wash: rgba(200, 160, 110, .34); --wing-wash-2: rgba(217, 130, 106, .32); }
.pollen { background: rgba(74, 53, 34, .55); }
html[data-theme="dark"] .pollen { background: rgba(230, 214, 180, .5); }

/* the red chalk as TEXT, a shade deeper so that it reads (3.0–4.1:1 on the paper; this is about 5:1) —
   the strokes and the washes keep --sanguine */
:root { --sanguine-ink: #85301c; }
html[data-theme="dark"] { --sanguine-ink: var(--sanguine); }
.line .line-k, .label .note-k { color: var(--sanguine-ink); }
.geo .ins .sk { fill: var(--sanguine-ink); }
/* (III’s names on the dark tracing paper: the chalk a shade lighter there, about 4.6:1 where it measured 4.2:1;
   still red chalk, and the leaf’s own names are unchanged) */
html[data-theme="dark"] .geo :is(.tri-a, .tri-b, .tri-c) .ins .sk { fill: #da8e76; }
.label .note-k { font-size: .74rem; }

/* III · the breath's door drawn in ink like the rest (a white ring with a glow: on the dark leaf, a donut) */
.folio .aura-breath .lungs { stroke: var(--sepia); stroke-width: 1.4; opacity: .6; }
.folio .aura-breath .glow { display: none; }
.folio .aura-breath .lung-wash { opacity: .3; }
.folio .aura-breath .breath-line, .folio .aura-breath .breath-wisp { stroke: var(--sepia); }
.folio .aura-breath .breath-line { stroke-width: 1.6; }
html[data-theme="dark"] .folio .aura-breath .lungs, html[data-theme="dark"] .folio .aura-breath .breath-line,
html[data-theme="dark"] .folio .aura-breath .breath-wisp { stroke: rgba(230, 214, 180, .6); }
/* II · the drained energy in umber, not pale blue (the only cool hues in the codex) */
.folio .aura-energy-dis .drips line { stroke: rgba(74, 53, 34, .55); }
.folio .aura-energy-dis .glow, .folio .aura-energy-dis .drips.glow { display: none; }
.folio .aura-energy-dis .nerves-flow { stroke: rgba(74, 53, 34, .5); }
html[data-theme="dark"] .folio .aura-energy-dis .drips line, html[data-theme="dark"] .folio .aura-energy-dis .nerves-flow { stroke: rgba(230, 214, 180, .5); }
/* II · the marks the point leaves: red-chalk rings, corrections — not grey spheres on the skin */
.spark::before { background: none; border: 1.2px solid var(--sanguine); box-sizing: border-box; width: 8px; height: 8px; left: -4px; top: -4px; }

/* the story's first call in the notebook's own plate, as its last (it was the main site's shadowed pill) */
.folio .line-btn.btn {
  background: var(--sepia); color: var(--paper-lit, #f5ecd4); border: 0; border-radius: 2px; padding: .85rem 1.5rem .8rem;
  font-family: 'Cormorant SC', var(--font-caps); font-size: 1.02rem; font-weight: 600; letter-spacing: .16em;
  box-shadow: inset 0 0 0 3px var(--sepia), inset 0 0 0 4px rgba(var(--halo-rgb), .28);
}
.folio .line-btn.btn:hover, .folio .line-btn.btn:focus-visible { transform: none; box-shadow: inset 0 0 0 3px var(--sepia), inset 0 0 0 4px rgba(var(--halo-rgb), .5); }

/* V · the leaf's own legend, not a quotation: in italics, like the other closing lines */
.line[data-line="legendflat"] { font-style: italic; }
@media (max-width: 860px) {
  .line[data-line="legendflat"] { font-size: 1.02rem; line-height: 1.38; }
  /* (round the circle on a phone: an engraving, set to fit — the flat line was the reading) */
  .geo .legend { font-size: 23px; letter-spacing: .1em; }
}

/* the posture's name never takes a tap meant for the line's ¶ */
.pose-name { pointer-events: none; }
/* the opening: its sentence low on the leaf, clear of the lockup over it */
.pose-name.at-foot { bottom: 9vh; }
/* Classical Yoga has no line: its names take the line's place, and the bottom of the leaf breathes */
@media (min-width: 861px) { .pose-name.in-classical { top: calc(50% + var(--sq-f) * .5 + 2.2vh); } }
/* a laptop's height (768): the line and the name a little higher, clear of the edge */
@media (min-width: 861px) and (max-height: 800px) {
  .line { top: calc(50% + var(--sq-f) * .5 + 1.2vh); }
  .pose-name { top: calc(50% + var(--sq-f) * .5 + 1.2vh + 3.1rem); }
  .pose-name.in-classical { top: calc(50% + var(--sq-f) * .5 + 1.2vh); }
}

/* « passer l’animation » (once « passer le récit »): read (3.2:1 before), at the right foot above the folio number on a desktop (the step
   cue keeps the left to itself), a finger's target on a phone, clear of the home bar */
.skip-story { font-size: .8rem; }
.skip-story.on { opacity: 1; color: var(--ink); }
@media (min-width: 861px) { .skip-story { left: auto; right: calc(var(--rail-gutter, 2.1rem) + 1.6vw); bottom: calc(2.4vh + 1.9rem); } }
@media (max-width: 860px) { .skip-story { font-size: .74rem; padding: .85rem .5rem; bottom: max(.35rem, env(safe-area-inset-bottom)); } }

/* a phone, III's arrival: the seal's silk tails clear of the second line */
@media (max-width: 860px) { .line[data-line="l03"] .line-2 { margin-top: 1.75rem; } }
/* a short phone: the prologue's button above the fold */
@media (max-width: 860px) and (max-height: 640px) { .line[data-line="hero"] .line-btn { margin-top: 2.3rem; } }

/* the header on the narrowest phones: the menu keeps its size (it shrank to an empty box at 375 and went
   off the screen at 360). (The line under the name gave way below 400px here; since the logotype it stands
   beside the name and gives way below 600px, on every Folio page: see folio-page.css.) */
body[data-marks="folio"] .nav-toggle { flex: none; }
@media (max-width: 860px) { body[data-marks="folio"] .logo { min-width: 0; flex: 0 1 auto; } }

/* the dark leaf's foxing darkens it, as it does a day leaf (lighter than the paper, it glowed like bokeh) */
html[data-theme="dark"] body[data-marks="folio"] { --stain: 8, 5, 2; }
html[data-theme="dark"] .folio .aura-breath .lung-wash { opacity: .14; }
/* the hand-off from the loader: its small lockup goes first, then its paper — so that the two names are
   never seen at once, one fading over the other */
body[data-marks="folio"] #loader .loader-mark, body[data-marks="folio"] #loader .loader-word, body[data-marks="folio"] #loader .loader-sub { transition: opacity .3s ease; }
body[data-marks="folio"] #loader.done .loader-mark, body[data-marks="folio"] #loader.done .loader-word, body[data-marks="folio"] #loader.done .loader-sub { opacity: 0; }
body[data-marks="folio"] #loader.done { transition-delay: .2s; }

/* ═══════════ Round 10 (a) — the story review r4: the timeline's companions ═══════════ */
/* III · the seated meditator without a nimbus (the mind's motes stay; the ring round the head read as a saint's) */
.folio .aura-mind.no-halo .halo { opacity: 0; transition: opacity .5s; }
/* III · the doors' sentences on a phone too, under the door's line (set with the posture quotes, below) */
@media (max-width: 860px) { .pose-name.in-door { top: calc(var(--under) + 4.6rem); } }
/* III · the tracing paper scales about the stage's own centre, so that holding it still holds it in place */
.calque { transform-origin: 50% 47.62%; }
@media (max-width: 860px) { .calque { transform-origin: 50% 52.7%; } }
/* V · nothing of the burst above the running head and its seal (js/folio.js natureBurst sets --nb-top) */
.nature { clip-path: inset(var(--nb-top, 0px) 0 0 0); }
/* V · on a phone the engraved ring crosses the square's names: they give way to it */
.folio.legend-on .geo .sq .ins { opacity: 0 !important; transition: opacity 1.2s; }
/* the close on a phone: the leaf lies a little lower, its torn top clear of the header's controls */
@media (max-width: 860px) { .folio { transform-origin: 50% 56%; } }
/* the close: the header's « Commencer » steps back to an outline — the leaf's call holds the point */
html.at-close.on-desk:not(.page-under) body[data-marks="folio"] .site-nav > a.btn-solid { background: transparent; color: #efe4c8; box-shadow: inset 0 0 0 1px rgba(239, 228, 200, .45); }
/* …and in the dark, through the story, it is not the brightest thing on the leaf */
html[data-theme="dark"]:not(.on-desk) body[data-marks="folio"]:not(.narrative-done) .site-nav > a.btn-solid { background: transparent; color: var(--sepia); box-shadow: inset 0 0 0 1px rgba(230, 214, 180, .55); }
/* Classical Yoga's watermark in the leaf's ink, without its paper halo (it read as a grey rubber stamp) */
.folio .statement-classical.water span { color: var(--sepia); text-shadow: none; }
/* the main site's drifting signs are not on the desk at the close */
html.on-desk body[data-marks="folio"] .driftfall.currents { opacity: 0; transition: opacity .6s; }

/* ═══════════ Round 10 (b) — the story review r4: layout, contrast, focus ═══════════ */
/* the close: the cue to go on lies on the desk under the leaf (it is no longer inside the leaf, which
   shrank it into the torn edge), in the header's paper ink — 5.2:1 on the desk — with its words on a
   phone too; and it is a way on (js/folio.js: a tap plays the hand-over), its target a finger's size
   without its words moving. (Placed by js/folio.js only once it has faded out: never seen jumping.) */
.step-cue.at-close {
  left: 50%; right: auto; bottom: 1.6vh; transform: translateX(-50%);
  flex-direction: row; align-items: center; gap: .55rem;
  color: #efe4c8; text-shadow: 0 1px 3px rgba(20, 14, 8, .55);
}
.step-cue.at-close span { display: inline; }
.step-cue.at-close i { margin-top: -4px; }
.step-cue.at-close.on { pointer-events: auto; cursor: pointer; }
.step-cue.at-close.on::after { content: ""; position: absolute; inset: -.7rem -1rem; }

/* III · the triangle's names fitted to their sides (js/folio.js fitTriNames): the French goes first */
.geo .ins-tri.short :is(.sk, .sep) { display: none; }
.geo .ins-tri.short { letter-spacing: .14em; }

/* the dark leaf's gilding in old gold, finer, its glow drawn in: it read as lit tubes, brighter than
   the running head and than the point — which is the one gilded thing on the leaf */
html[data-theme="dark"] .folio :is(.geo-circle-hl, .geo-sq-hl, .geo-tri-hl) { stroke: #d4b068; }
html[data-theme="dark"] .folio .figure-stage :is(.geo-circle-hl, .geo-sq-hl, .geo-tri-hl) { stroke-width: calc(3.6px / var(--gk, 1)); }
html[data-theme="dark"] .folio .figure-stage .tri-all .geo-tri-hl { stroke-width: calc(3.6px / var(--gk, 1) / var(--tk, 1)); }
html[data-theme="dark"] .folio .geo { --gl-p0: .24; --gl-p5: .08; --gl-p10: .01; --gl-p15: 0; }

/* I · the main site's three callout lines and their pips point at nothing on the leaf (the notes
   have leaders of their own); the body's light a wash, not a bloom; the mind's motes no gold beads
   in the dark. (The wash breathes in main.css, opacity and all: its breath is redrawn at these levels.) */
.folio .aura-body .ink :is(.lead, .pip) { display: none; }
.folio .aura-body .wash { opacity: .55; animation-name: folio-body-wash; }
html[data-theme="dark"] .folio .aura-body .wash { opacity: .3; animation-name: folio-body-wash-dark; }
@keyframes folio-body-wash { 0%, 100% { transform: scale(1); opacity: .52; } 50% { transform: scale(1.05); opacity: .55; } }
@keyframes folio-body-wash-dark { 0%, 100% { transform: scale(1); opacity: .28; } 50% { transform: scale(1.05); opacity: .3; } }
html[data-theme="dark"] .folio .aura-mind .motes circle { fill: rgba(230, 214, 180, .55); }

/* the small red text on the light leaf a shade deeper: the ¶, the notes' keys, the seals' words
   (4.0–4.4:1 before; about 5.7 now, 4.75 on II's darker paper), II's keys deeper still (5.4 there),
   the folio number in full. The dark leaf keeps its own: --sanguine-ink is --sanguine there. */
:root { --sanguine-ink: #7a2a17; }
.note-k, .para, .folio .cseal-tip { color: var(--sanguine-ink); }
html:not([data-theme="dark"]) .label .note-k { color: #6e2412; }
.folio-num { opacity: 1; }

/* IV · the close-ups: the veil (above, .study-veil) solid through the running head and its seal, and
   the running head lifted off what still shows through it by a halo of the leaf (js/folio.js: in-study) */
.folio.in-study .runheads .rh { text-shadow: 0 0 10px rgba(var(--halo-rgb), .95), 0 0 24px rgba(var(--halo-rgb), .9); }

/* the leaf, and a line or a note, take the focus when the control that held it leaves the leaf
   (js/folio.js refocusStory): they are not controls, and show no ring */
.folio:focus, .folio .line:focus, .folio .note:focus { outline: none; }
/* (the skip now comes before the lines in the leaf, for the focus order: it keeps its place over them) */
.folio > .skip-story { z-index: 7; }

/* a phone: close03 a line lower, clear of « Énergie · Kriya » (there is room under it) */
@media (max-width: 860px) { .line[data-line="close03"] { top: calc(var(--under) + 1.9rem); } }
/* the close's call on one row at 360 too (the point's place wrapped to a second one, under the words):
   the place is kept in the button's padding (its second link, « Voir les pratiques », is gone: Area B) */
.line-cta .cta-f:first-child { position: relative; white-space: nowrap; padding-right: 2.3rem; }
.line-cta .cta-f:first-child .point-slot { position: absolute; right: .95rem; top: 50%; margin: -.4em 0 0; }
@media (max-width: 380px) { .line-cta .cta-f:first-child { letter-spacing: .11em; padding-left: 1.1rem; } }
.line-cta .cta-2 { position: relative; }
.line-cta .cta-2::after { content: ""; position: absolute; inset: -.85rem -.4rem; }
/* a short phone: the prologue's words beside its seal (under it, their rule touched the button), set a
   little closer so that they keep inside a 360px screen */
@media (max-width: 860px) and (max-height: 640px) {
  .cseal[data-card="prologue"].at-line .cseal-tip { left: calc(100% + .25rem); right: auto; top: 50%; transform: translateY(-50%); letter-spacing: .1em; }
}

/* a phone: the chapter's card clear of the header (its torn top cut « studio être »), its controls
   a finger's size, « la suite » off the drop cap; the gloss's × a finger's size everywhere */
@media (max-width: 860px) {
  html.card-open .site-header { opacity: 0; pointer-events: none; transition: opacity .3s; }
  html.card-open .site-header > * { pointer-events: none; }
  /* (the sheet takes the header's room; its tear reaches 40px out of it, kept on the screen) */
  .ccard-leaf { margin-top: 0; max-height: calc(100dvh - 5rem); }
  /* (the arrows' targets reach into the sheet's margin, so that « Reprendre le récit » keeps one line) */
  .ccard-go { min-width: 44px; min-height: 44px; }
  .ccard-go[data-go="-1"] { margin-left: -1rem; }
  .ccard-go[data-go="1"] { margin-right: -1rem; }
  .ccard-resume { padding-block: .8rem; white-space: nowrap; }
  /* (at the sheet's own side padding: at 1rem the torn edge's flat paper, which covers the sheet's
     outer 24px, sliced the pill's rounded end off on every phone) */
  .ccard-more { padding-block: .55rem; left: auto; right: 1.9rem; transform: none; }
  .ccard-nav { background: none; gap: .4rem; }
  /* (the paper under the buttons is whole from 1rem down, where they begin: faded to its middle, as on a desk,
     it let the sheet’s text, II’s red « C », show at half strength behind « ← » and « Reprendre le récit ») */
  .ccard-nav::before { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1rem); mask-image: linear-gradient(to bottom, transparent, #000 1rem); }
  /* (the sheet's fade at its foot faded the buttons with it, into a grey band — a pasted toolbar: the
     sheet's own paper under them, fading in, is enough to keep the text from them) */
  .ccard.more .ccard-sheet { -webkit-mask-image: none; mask-image: none; }
}
.gloss-close { width: 44px; height: 44px; right: .15rem; top: .1rem; display: grid; place-items: center; line-height: 1; }

/* the setting: no ¶ alone on its line, no one-word last line (folio.html: a no-break space before
   every ¶); the notes, the long line and the keys balanced (pretty left « reste. ¶ » alone under a
   note); on a phone every line balanced. Not a line that ends in its seal: its seal and the seal's
   words are placed where that line breaks (re-broken, « Lire le chapitre » ran off a phone at III) */
.folio .line:not(:has(.seal-slot)) { text-wrap: pretty; }
.folio .note p, .line[data-line="legendflat"], .note-k { text-wrap: balance; }
@media (max-width: 860px) { .folio .line:not(:has(.seal-slot)) { text-wrap: balance; } }

/* phones: the last small targets a finger's size; the skip clear of the home bar (folio.html asks for
   the whole screen, viewport-fit=cover — the header keeps clear of a notch on its side); the opening's
   line broken before « Méditation », not after its dot; and on a tall phone the empty foot shared with
   the words — every word under the drawing goes down by four fifths of the slack (nothing moves where
   there is none, as at 390×680), the names of the postures and the doors with them */
@media (pointer: coarse) {
  .para::after { inset: -14px -15px; }
  .cseal.at-head::after { content: ""; position: absolute; inset: -4px; }
}
body[data-marks="folio"] .site-header { padding-left: max(var(--edge-pad), env(safe-area-inset-left)); padding-right: max(var(--edge-pad), env(safe-area-inset-right)); }
@media (max-width: 860px) {
  .skip-story { padding: .95rem .5rem; bottom: max(.35rem, calc(env(safe-area-inset-bottom) + .15rem)); }
  .opening-tagline .tg-1 { display: block; }
  .opening-tagline .tg-d1 { display: none; }
  .line, .note, .pose-name { --under: calc(var(--fig-cy) + var(--sq-f) * .415 + var(--slack, 0px) * .8); }
}

/* ═══ The posture quotes (the owner, 2026-10-01) ═══ */
/* With Leonardo's extra arms and legs, the name of a posture did not tell the reader what they were looking
   at: each posture held now carries a sentence on what the practice is for (js/folio.js QUOTES), set as the
   page's other quotations are — the sentence in the leaf's italic, free to wrap and balanced, two lines at
   most on a desktop; under it, on a line of its own, where it comes from in small capitals, the author (or
   the work, when it has none) in red chalk and the work in italics. The names' rules above still place it. */
.pose-name {
  white-space: normal; text-wrap: balance; width: max-content; max-width: min(36rem, 86vw); text-align: center;
  font-size: 1.12rem; line-height: 1.36;
}
.pose-name :is(.pq-lead, .pq-q, .pq-cite) { display: block; }
/* (IM Fell English has no ā: the Sanskrit word in Cormorant, upright in the italic sentence, as a foreign word is) */
.pose-name .pq-q [lang] { font-family: 'Cormorant Garamond', serif; font-style: normal; font-weight: 600; font-size: 1.06em; }
.pose-name .pq-lead { margin-bottom: .3rem; font-size: .8em; color: var(--ink-soft); }
/* (the source in the weight and size of the FAQ's: at 500 and 11.5px the thin strokes of Cormorant never
   reached their ink on a desktop's screen, and read at 3.2–3.8:1 on the light paper) */
.pose-name .pq-cite { margin-top: .35rem; font: normal 600 .78rem/1.35 'Cormorant SC', var(--font-caps); letter-spacing: .12em; color: var(--ink-soft); }
.pose-name .pq-a { font-weight: 600; color: var(--sanguine-ink); }
/* (the red name a weight firmer on a desktop's light paper: at one device pixel to the CSS pixel its thin
   capitals rendered at about 3.8–4.2:1, at 700 4.3–4.6:1; on a phone's denser screen, and on the dark leaf,
   600 already reads; a work in red, when it has no author, stays at 600: the page loads no 700 italic) */
@media (min-width: 861px) { html:not([data-theme="dark"]) .pose-name .pq-a { font-weight: 700; } }
.pose-name .pq-cite i { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.08em; letter-spacing: .02em; }
/* the opening: a line and its source, under the lockup and on its axis (its tagline, 27em wide, centred
   10vw in) — under the practising figure, where the names were, the tree's and the triangle's legs ran
   through two lines; and what the opening's sentences say is what the lockup's three words mean */
.pose-name.at-foot { left: calc(10vw + clamp(1.12rem, 1.6vw, 1.6rem) * 13.55); max-width: 26rem; font-size: 1.2rem; line-height: 1.3; }
/* (the leaf lies on the desk at four fifths of its size here: the source no smaller than the rubric's 11px) */
.pose-name.at-foot .pq-cite { font-size: .84rem; }
/* III: under the door's line, on one line and quieter than it (a laptop's leaf has room for no more).
   The sentence is set at a fixed distance under the line, which holds only while the line is one line:
   the doors' lines keep to one on a desktop, their measure growing with their type (46rem held them at
   a laptop's 21px; at the 24px of a wide screen « …sans y monter. ¶ » broke, and the sentence printed
   over its second line and the rule through the source). The longest, Dhyāna's, is 31em with its ¶ */
@media (min-width: 861px) {
  .line:is([data-line="asana"], [data-line="pranayama"], [data-line="dhyana"]) { width: min(max(46rem, 34.8em), 86vw); }
  .pose-name.in-door { max-width: min(40rem, 84vw); margin-top: .25rem; font-size: .88rem; color: var(--ink-soft); }
  .pose-name.in-door .pq-cite { margin-top: .2rem; font-size: .74rem; }
}
/* a phone: under the plate, in the band's own width */
@media (max-width: 860px) {
  .pose-name { width: min(22rem, 88vw); max-width: none; font-size: 1rem; line-height: 1.38; }
  .pose-name .pq-cite { font-size: .7rem; }
  /* III: between the door's line and « passer l’animation » there is room for two lines and no more (390×680,
     375×553 and 360×640 alike: the band under the plate is the same height on every phone), so the sentence
     is set smaller and its source runs on after it — the author alone; the work and the locus are left to
     a desktop */
  .pose-name.in-door { font-size: .8rem; line-height: 1.3; }
  .pose-name.in-door :is(.pq-q, .pq-cite) { display: inline; }
  .pose-name.in-door .pq-cite { margin: 0; white-space: nowrap; }
  .pose-name.in-door .pq-cite::before { content: "\2014\00a0"; }
  .pose-name.in-door :is(.pq-w, .pq-l) { display: none; }
}

/* ═══ V · the living drawing (the owner, 2026-10-01) ═══
   js/folio.js GARDEN, CF, NB. The garden that climbs the drawing in the burst's wake, in small SVGs of its own
   after the drawing's layers: inked once, its leaves and flowers each popping once, then still. The four corner
   flowers and the hanging pomegranate in HTML, moved by the compositor alone (one property per motion, so that
   nothing overrides anything). The koi, the shells and the bubbles among the flying things. The codex's inks
   only: sepia outlines, olive-ochre and red-chalk washes, the stamens and hearts in red chalk; no glow. */
/* (the fruits' washes fuller than the leaves': at a desk's scale a fig or a pear in a third of a wash read as a faint
   oval, the grapes as grey) */
.folio { --tepal-fill: rgba(252, 247, 232, .7); --stripe: rgba(110, 118, 60, .8); --nature-paper: rgba(245, 236, 212, .85);
         --fruit-r: rgba(164, 68, 44, .55); --fruit-o: rgba(150, 122, 64, .52); --fruit-u: rgba(140, 76, 52, .5); --fruit-g: rgba(110, 80, 52, .52); }
html[data-theme="dark"] .folio { --tepal-fill: rgba(230, 214, 180, .1); --stripe: rgba(176, 166, 116, .6); --nature-paper: rgba(42, 35, 27, .85);
         --fruit-r: rgba(217, 130, 106, .42); --fruit-o: rgba(200, 170, 110, .42); --fruit-u: rgba(210, 150, 120, .42); --fruit-g: rgba(190, 160, 130, .42); }

/* the garden's drawings (the region SVGs, the corner flowers, the pendant): hairlines at every zoom */
.figure-stage .geo-bloom { pointer-events: none; }
.geo-bloom[hidden], .bloom-live[hidden] { display: none; }
.gk-ink { overflow: visible; }
.gk-ink .stem    { fill: none; stroke: var(--nature-ink); stroke-width: calc(1.7px / var(--gk, 1)); stroke-linecap: round; stroke-linejoin: round; }
.gk-ink .stem2   { fill: none; stroke: var(--nature-ink); stroke-width: calc(1px / var(--gk, 1)); stroke-linecap: round; }
.gk-ink .tendril { fill: none; stroke: var(--nature-ink); stroke-width: calc(1.05px / var(--gk, 1)); stroke-linecap: round; }
/* (where a stem passes behind a line of the drawing, the line's own stroke is laid over it) */
.gk-ink .patch   { fill: none; stroke: var(--olive); stroke-width: calc(2.6px / var(--gk, 1)); stroke-linecap: butt; }
/* (the shapes' own classes stand alone, not under .gk-ink: a <use>'s copy is styled in a tree of its own, where
   the drawing is not its ancestor — scoped, every leaf of the garden came out black) */
.gk-lf      { fill: var(--leaf-wash); stroke: var(--nature-ink); stroke-width: calc(1.1px / var(--gk, 1)); stroke-linejoin: round; }
/* (the rosettes' straps with a lighter hand: a vortex of lines, as on RL 12424, not a knot of washes that drew the eye
   from the man down to the corners) */
.gk-strap   { fill: var(--leaf-wash); fill-opacity: .45; stroke: var(--nature-ink); stroke-width: calc(.8px / var(--gk, 1)); stroke-linejoin: round; }
.gk-rib     { fill: none; stroke: var(--nature-ink); stroke-width: calc(.7px / var(--gk, 1)); }
.gk-pet     { fill: var(--petal-wash); stroke: var(--nature-ink); stroke-width: calc(1px / var(--gk, 1)); }
.gk-vn, .gk-hatch { fill: none; stroke: var(--nature-ink); stroke-width: calc(.45px / var(--gk, 1)); opacity: .7; }
.gk-ht      { fill: var(--sanguine); stroke: var(--nature-ink); stroke-width: calc(.8px / var(--gk, 1)); }
.gk-st      { fill: var(--nature-ink); stroke: none; }
.gk-tp      { fill: var(--tepal-fill); stroke: var(--nature-ink); stroke-width: calc(.9px / var(--gk, 1)); }
.gk-stripe  { fill: none; stroke: var(--stripe); stroke-width: calc(.9px / var(--gk, 1)); }
.gk-ov      { fill: var(--leaf-wash); stroke: var(--nature-ink); stroke-width: calc(.6px / var(--gk, 1)); }
.gk-pap     { fill: none; stroke: var(--nature-ink); stroke-width: calc(.4px / var(--gk, 1)); opacity: .75; }
.gk-fr-r { fill: var(--fruit-r); } .gk-fr-o { fill: var(--fruit-o); } .gk-fr-u { fill: var(--fruit-u); } .gk-fr-g { fill: var(--fruit-g); }
:is(.gk-fr-r, .gk-fr-o, .gk-fr-u, .gk-fr-g) { stroke: var(--nature-ink); stroke-width: calc(1px / var(--gk, 1)); }
.gk-ink .u { visibility: hidden; }

/* the four corner flowers and the pendant: each on the square's corner (0 by 0), its stem drawn outward along
   --out, its head at the stem's tip; one property per motion */
.bloom-live { position: absolute; inset: 0; pointer-events: none; --vb: calc(var(--sq-f) / 1000); }
.cf { position: absolute; width: 0; height: 0; transform: rotate(var(--out)); }
.cf.unborn { visibility: hidden; }
.cf-sway { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
/* (the gusts and stirs, and the head's gestures, each on a wrapper of its own that carries nothing else: two
   animations of transform on one element were added on the main thread) */
.cf-gust, .cf-pose { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.cf-stem { position: absolute; left: calc(var(--vb) * -6); top: calc(var(--vb) * -24); width: calc(var(--vb) * (var(--ls) + 12)); height: calc(var(--vb) * 48);
           transform-origin: calc(var(--vb) * 6) 50%; }
.cf-head { position: absolute; left: calc(var(--vb) * var(--ls)); top: 0; width: 0; height: 0; transform-origin: 0 0; --gkp: var(--gk, 1); }
/* (the head is drawn larger than the plate's scale: its lines are divided by that too, to stay the drawing's) */
.cf-flower { position: absolute; width: calc(var(--vb) * 68 * var(--hs)); height: calc(var(--vb) * 68 * var(--hs));
             left: calc(var(--vb) * -34 * var(--hs)); top: calc(var(--vb) * -34 * var(--hs)); --gk: calc(var(--gkp) * var(--hs));
             transform: rotate(calc(-1 * var(--out))) perspective(calc(var(--vb) * 160)) rotateX(0deg) rotateY(0deg); }
/* once the garden is grown, each face turns toward the point, and stays so */
.cf.lean .cf-flower { transform: rotate(calc(-1 * var(--out))) perspective(calc(var(--vb) * 160)) rotateX(var(--tx)) rotateY(var(--ty));
                      transition: transform 2.4s cubic-bezier(.4, 0, .2, 1); }
.cf.alive .cf-sway { animation: cf-sway var(--sw) ease-in-out infinite; }
.cf.alive .cf-head { animation: cf-breathe 7.5s cubic-bezier(.45, 0, .55, 1) infinite, cf-turn var(--tn) ease-in-out infinite; }
@keyframes cf-sway    { 0%, 100% { rotate: 0deg; } 25% { rotate: 6deg; } 75% { rotate: -6deg; } }
@keyframes cf-breathe { 0%, 100% { scale: 1; } 45% { scale: 1.07; } 75% { scale: .95; } }
@keyframes cf-turn    { 0%, 100% { rotate: 0deg; } 25% { rotate: 18deg; } 75% { rotate: -18deg; } }
/* (a desk: a wider sway — at ±6° the four read as fixed; a phone keeps its own, on a smaller plate) */
@keyframes cf-sway-d  { 0%, 100% { rotate: 0deg; } 25% { rotate: 9deg; } 75% { rotate: -9deg; } }
@media (min-width: 861px) { .cf.alive .cf-sway { animation-name: cf-sway-d; } }
.zp { position: absolute; width: 0; height: 0; --gkp: var(--gk, 1); }
.zp.unborn { visibility: hidden; }
.zp-swing { position: absolute; left: calc(var(--vb) * -16 * var(--zs)); top: 0; width: calc(var(--vb) * 32 * var(--zs)); height: calc(var(--vb) * 38 * var(--zs)); transform-origin: 50% 0; }
.zp-swing svg { width: 100%; height: 100%; display: block; --gk: calc(var(--gkp) * var(--zs)); }
.zp.alive .zp-swing { animation: zp-swing 4.6s ease-in-out infinite; }
@keyframes zp-swing { 0%, 100% { rotate: 0deg; } 25% { rotate: 3.5deg; } 75% { rotate: -3.5deg; } }
/* a phone, and a desk gone to low power: the sway alone; a weak phone (.calm, set by js): a stir now and then instead */
@media (max-width: 860px) { .cf.alive .cf-head, .zp.alive .zp-swing { animation: none; } }
html.low-power .cf.alive .cf-head, html.low-power .zp.alive .zp-swing,
.bloom-live.calm .cf.alive :is(.cf-sway, .cf-head), .bloom-live.calm .zp.alive .zp-swing { animation: none; }
/* resting (no hand for a minute) they stop where they are; past the story they are taken off; pinched, held */
.bloom-live.idle *, html.zoomed .bloom-live * { animation-play-state: paused !important; }
.bloom-live.off * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .bloom-live * { animation: none !important; transition: none !important; } }

/* the sea among the flying things, and the butterflies with one pair of wings (phones) */
.fish, .shell, .bubble { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; background: no-repeat center / contain; }
.fish.one { transform-origin: 61.3% 50%; }
.fish-tail { position: absolute; width: 37.9%; height: 100%; left: -33.6%; top: 3.6%; background: no-repeat center / contain;
             transform-origin: 97.7% 50%; animation: fish-tail .5s ease-in-out infinite alternate; }
@keyframes fish-tail { from { transform: rotate(-17deg); } to { transform: rotate(17deg); } }
.bfly.m .wings { position: absolute; inset: 0; background: no-repeat center / contain; animation: flap-m var(--flap, .22s) ease-in-out infinite alternate; }
@keyframes flap-m { from { transform: scaleX(1); } to { transform: scaleX(.28); } }

/* ═══════════ A phone held sideways: the slip asking for it upright (folio.html .turn-slip, js/folio.js syncTurn) ═══════════
   The story is drawn for a tall screen; on its side a phone gave the leaf, the plate and the cards some 375px.
   The slip is shown over the story alone (html.turn-phone), never over the page below. It stands above the header
   (100): under it, the header's ink, cream at the opening and the close and sepia in the chapters, would land on
   the desk's ground; and below the loader (200) and the chapter's card (250), so that a card opened before the
   turn still reads above it. Its torn edge is the card's own, whose flat paper overlaps the sheet by 24px; the
   sheet's padding clears it. */
.turn-slip { display: none; }
@media (max-width: 950px) and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html.turn-phone .turn-slip {
    position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; touch-action: none; overscroll-behavior: contain;
    padding: max(.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: radial-gradient(ellipse 80% 70% at 50% 46%, rgba(22, 14, 6, 0), rgba(22, 14, 6, .45)), var(--desk);
  }
  .turn-sheet {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem;
    width: min(26rem, calc(100vw - 7rem)); padding: 1.9rem 2.4rem 1.4rem; text-align: center; color: var(--ink);
    background: url("../assets/img/grain-light.webp") 0 0 / 256px 256px, #e8d7ad;
  }
  .turn-sheet::before {
    content: ""; position: absolute; inset: -40px; pointer-events: none;
    border: 64px solid transparent; border-image: url("../assets/img/deckle.webp") 64 / 64px / 0 round;
  }
  .turn-seal { width: 50px; height: 50px; margin-bottom: .95rem; overflow: visible; }
  .turn-t { margin: 0; max-width: 19rem; font: italic 1.15rem/1.4 'IM Fell English', serif; color: var(--ink); text-wrap: balance; }
  /* (a button set as a link, as « passer l’animation » is: it runs the same skip to the page) */
  .turn-go {
    min-height: 44px; padding: .55rem .8rem; border: 0; background: none; cursor: pointer;
    font: 600 .78rem/1 'Cormorant SC', var(--font-caps); letter-spacing: .2em; color: var(--ink);
    text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--rule), .6); text-underline-offset: .35em;
  }
  .turn-go:focus-visible { outline: 1.5px dashed var(--rubric); outline-offset: 3px; }
  html[data-theme="dark"] .turn-sheet { background: url("../assets/img/grain-dark.webp") 0 0 / 256px 256px, #171310; }
  html[data-theme="dark"] .turn-sheet::before { border-image-source: url("../assets/img/deckle-dark.webp"); }
}

/* ═══════════ Area A — the motion, the doors, the leaf on the desk, the heart (the owner, 2026-10-03) ═══════════ */
/* Chapter I, iii · Émotions: the heart's waves are light now, a pale and radiant yellow (index.html #aRing,
   #aAzure, #aSeat). Their source was drawn in red chalk, which read as an alarm beside them; it is inked in a
   warm gold instead, deep enough to hold its line on the cream leaf, and lighter on the night one. */
.folio .aura-heart .seat { stroke: #b48a2c; stroke-width: 1.8; fill: rgba(246, 222, 140, .32); }
html[data-theme="dark"] .folio .aura-heart .seat { stroke: #f0d488; fill: rgba(246, 222, 140, .24); }

/* The leaf on the desk, at the opening and the close: the screen's whole width, torn open above and below,
   as the page's rips are (the owner: "full width… torn only at the top and the bottom"). Its paper lies under
   the leaf (.folio-paper) and never shrinks; what is written on the leaf is laid down smaller (js/folio.js
   renderFolio), and the desk comes in over the paper from above and below. Each of the desk's two bands is
   the stage's height, set in place by a transform; at its inner edge the tear (torn-edge.webp, the rips' own:
   transparent above the tear, a fibrous rim, then the leaf's paper, whose last ten rows fade into the paper
   under it), and behind the tear the desk, which stops ten rows short so as not to show through that fade.
   The foot's band is the same band turned over. */
.folio-paper { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.deckle { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; overflow: hidden; }
.deckle-t, .deckle-b {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background-image: var(--edge-tint, none), url("../assets/img/torn-edge.webp"), linear-gradient(var(--desk), var(--desk));
  background-position: 0 100%, var(--tx, -211px) 100%, 0 0;
  background-size: 100% 48px, 1024px 48px, 100% calc(100% - 10px);
  background-repeat: no-repeat, repeat-x, no-repeat;
  transform: translateY(-100%);
}
/* (another stretch of the tear at the foot, so that the two edges are not one tear seen twice; and the strip's
   paper, made for the top of a page, is a shade lighter than the leaf's foot, which the vignette darkens: it is
   brought down to it — 207,187,147 measured there against 218,201,164 — and the shade fades with the strip) */
.deckle-b {
  --tx: -611px; --edge-tint: linear-gradient(rgba(var(--stain), .11) 37px, rgba(var(--stain), 0) 47px);
  transform-origin: 50% 100%; transform: translateY(100%) scaleY(-1);
}
html[data-theme="dark"] :is(.deckle-t, .deckle-b) { --edge-tint: none; background-image: none, url("../assets/img/torn-edge-dark.webp"), linear-gradient(var(--desk), var(--desk)); }
/* ═══════════ end of Area A ═══════════ */

/* ═══════════ Area B — guidance: the cues to go on, the skip, the close's call (the owner, 2026-10-03) ═══════════
   « The site is long on purpose »: the story must say that it goes on, and its buttons what they do. */

/* the cue at the end of a part names what comes next (js/folio.js setStepCue): its numeral in the running
   heads' face and rubric, so that it reads as the chapter it names */
.step-cue .sc-num { font-family: 'IM Fell English', serif; font-weight: 400; font-size: 1.15em; letter-spacing: .04em; color: var(--rubric); }

/* A touch screen: the fingertip that shows the gesture (js/folio.js swipeHint). A paper disc in a sepia ring
   comes down low in the middle, presses, pushes the page up by --sw-rise (up to 70px, never onto the words
   under the drawing) and lifts, twice; a faint trail follows it up. Transform and opacity only, laid out
   once; outside the leaf, at the screen's scale, as the step cue is; it takes no pointer, so it is never
   between a finger and a control. None under reduced motion, where nothing in the story moves of itself. */
.stage > .swipe-hint { z-index: 7; }
.swipe-hint {
  position: absolute; left: calc(50% + var(--sw-x, 0px)); bottom: calc(1.55rem + env(safe-area-inset-bottom)); width: 0; height: 0; margin: 0;
  pointer-events: none; display: none; --sw-ink: 74, 53, 34;
}
html[data-theme="dark"] .swipe-hint { --sw-ink: 230, 214, 180; }
@media (pointer: coarse) { .swipe-hint { display: block; } }
.sw-tip, .sw-trail { position: absolute; display: block; opacity: 0; }
.sw-tip {
  left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 46% 40%, rgba(var(--halo-rgb), .97), rgba(var(--halo-rgb), .88) 70%, rgba(var(--halo-rgb), .72));
  box-shadow: inset 0 0 0 1.5px rgba(var(--sw-ink), .85), 0 3px 10px rgba(30, 20, 10, .22);
}
/* (the press: a ring that leaves the fingertip as it comes down) */
.sw-tip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.2px rgba(var(--sw-ink), .55); opacity: 0; }
/* (the trail runs from where the finger came down to where it is: its foot at the first place, drawn up
   with the same curve as the fingertip, so that its top is always under it) */
.sw-trail {
  left: -10px; bottom: 0; width: 20px; height: var(--sw-rise, 60px); border-radius: 10px; transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(var(--sw-ink), 0), rgba(var(--sw-ink), .16) 72%, rgba(var(--sw-ink), .04));
}
.swipe-hint.on .sw-tip { animation: sw-tip 2.4s cubic-bezier(.45, 0, .3, 1) 2; }
.swipe-hint.on .sw-tip::after { animation: sw-press 2.4s ease-out 2; }
.swipe-hint.on .sw-trail { animation: sw-trail 2.4s cubic-bezier(.45, 0, .3, 1) 2; }
@keyframes sw-tip {
  0%   { opacity: 0;   transform: translateY(0) scale(1.3); }
  14%  { opacity: .95; transform: translateY(0) scale(1); }
  24%  { opacity: .95; transform: translateY(0) scale(.92); }
  72%  { opacity: .85; transform: translateY(calc(-1 * var(--sw-rise, 60px))) scale(.92); }
  86%, 100% { opacity: 0; transform: translateY(calc(-1 * var(--sw-rise, 60px) - 8px)) scale(.86); }
}
@keyframes sw-press { 0%, 16% { opacity: 0; transform: scale(1); } 22% { opacity: .9; transform: scale(1); } 46%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes sw-trail {
  0%, 24% { opacity: 0; transform: scaleY(0); }
  32% { opacity: 1; }
  72% { opacity: .9; transform: scaleY(1); }
  92%, 100% { opacity: 0; transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .swipe-hint { display: none !important; } }

/* The close's one call, « Continuer la lecture ↓ » (js/folio.js continueReading): the sepia plate it was, a
   button now (it goes on reading; it does not leave for a place), the gold point landing in its left margin,
   where it reads as the reader's place before the words, and the arrow after them. A finger's height. */
.line-cta .cta-f.cta-go {
  -webkit-appearance: none; appearance: none; cursor: pointer; line-height: 1.15; min-height: 44px;
  padding: .85rem 1.45rem .8rem 2.5rem;
}
.line-cta .cta-f.cta-go .point-slot { left: 1rem; right: auto; }
.line-cta .cta-go .cta-arr { display: inline-block; margin-left: .55em; font-family: 'Cormorant Garamond', serif; font-weight: 600; letter-spacing: 0; }
.line-cta .cta-go:hover, .line-cta .cta-go:focus-visible { box-shadow: inset 0 0 0 3px var(--sepia), inset 0 0 0 4px rgba(var(--halo-rgb), .55); }
.line-cta .cta-go:focus-visible { outline: 1.5px dashed var(--rubric); outline-offset: 3px; }
/* (its arrow goes down a little, now and then, as the step cue's chevron does: on goes the reading) */
@media (prefers-reduced-motion: no-preference) { .line-cta.on .cta-arr { animation: cta-bob 2.6s ease-in-out infinite; } }
@keyframes cta-bob { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(3px); } }
@media (max-width: 380px) {
  .line-cta .cta-f.cta-go { padding-left: 2.15rem; padding-right: 1.1rem; }
  .line-cta .cta-f.cta-go .point-slot { left: .8rem; }
}

/* the story cut to a rest (the header's « Méthode » from far off: js/folio.js storyAt) comes back in a moment,
   not at once */
html.story-cut:not(.skipping) .folio { transition: opacity .45s ease; }
/* a part of the page below that took the focus on a landing is a place, not a control: no ring round it */
.pg [data-landed]:focus { outline: none; }
/* ═══════════ end of Area B ═══════════ */