/* ═══════════ The loader: a letter, folded in three and sealed, that opens into the leaf (the owner, 2026-10-03) ═══════════
   Generated by tools/build-folio-loader.mjs from one timeline in milliseconds: change it there, and run it again.
   While the page loads, a letter lies folded on the desk, tied with a linen cord crossed about its middle and knotted
   in a bow, the red wax seal stamped with the triangle pressed over the knot; the seal breathes, and the words under
   the letter with it, on one breath of 3.6 s. When the figure is ready (js/folio.js hideLoader adds .done) the cord is
   untied — the bow pulled loose from under the seal, the cord slack and slipping off the letter's foot and its side
   (the owner, 2026-10-04) — and as it goes the seal rises off the left flap, its shadow spreading under it, and the
   right flap carries it away; the left one opens after it, then the foot and the head, folded under it: four folds,
   about 1.5 s with the cord, and the
   open sheet lies exactly where the leaf lies at the opening — between the desk's torn edges, on a phone as on a wider
   screen (measure() sets --pk-t and --pk-b there). Its paper is the leaf's own, laid through windows at the screen's
   coordinates, so that when the loader fades nothing moves: only what is written on the leaf appears, the man in the
   drawing's own posture (the postures wait until the loader is gone: js/folio.js tickFlows). The story is drawn under
   the letter before it opens (js/folio.js hideLoader adds .pk-ready, then .done), so the leaf never opens on a figure
   not yet drawn, and the fade over it begins the moment it lies open (.drawn).
   Everything that moves is a transform or an opacity, run by the compositor, and nothing else runs while it opens:
   the figure's first frame and the story's first full pass (long tasks on a phone, and pauses of the GPU, which
   stopped the letter at the seal's lift when they came during the folds) are drawn behind the closed letter.
   While the page loads only the closed letter's outside is drawn: what it opens onto — its inside faces, the middle
   row, the head and the foot folded under — is painted at .pk-ready, behind it (the page's first paint waited for all
   of it, and came 0.5–0.7 s after the old loader's on a mid-range phone; and their layers held it for the whole load).
   And the page's very first frame shows that outside plain, in its paper's own tone: the paper is drawn under that
   tone a moment later, and the tone fades over it (.pk-tex, .pk-settle). Rastered in the first frame, the paper's
   grain, light, stains and folds still held the first paint some 0.6 s after the old loader's.
   No preserve-3d: each flap is one flat plane in the sheet's perspective, its two faces in the order of the page, the
   inside under the outside, which is put away when the flap stands on edge; nothing depends on a browser sorting
   layers in depth, or on the back of a face being hidden (WebKit). No clip, mask or filter on anything that turns.
   Without container units the letter is not drawn and the loader is its plain words and fade; likewise the fade alone
   under reduced motion, on an address with a #, where a scroll survives the load (a reload does not: the page sets it
   back to the top, and the letter opens), on a phone held sideways and in a tab hidden
   still as it opens (a tab opened unseen keeps its letter closed until it is looked at). Every other load of the home page opens it, the first of a visit and every one after (the owner,
   2026-10-04: it was opened once a visit). */

/* the fade, wherever it is drawn: the loader holds until the story under it has drawn (.drawn), then fades over the
   open leaf (js/folio.js loaderDrawn sets --pk-fd, the wait for the letter to lie open; none in the plain fade) */
#loader.pk.done { opacity: 1; visibility: visible; transition: none; }
#loader.pk.done.drawn { opacity: 0; visibility: hidden; transition: opacity 380ms ease var(--pk-fd, 0ms), visibility 0s linear calc(var(--pk-fd, 0ms) + 380ms); }
/* (the plain fade: the letter and its words go at once, then the desk they lay on — as the old loader's name went
   before its paper — so that the closed letter is never seen fading over the page) */
#loader.pk.done.fast.drawn { transition: opacity .5s ease .15s, visibility 0s linear .65s; }
#loader.pk.done.fast :is(.pk-sheet, .pk-glow, .loader-word, .loader-sub) { opacity: 0; transition: opacity .3s ease; animation: none; }
/* the words about the letter go first */
#loader.pk.done .loader-word { opacity: 0; transition: opacity .25s ease; }
/* (they breathe while it waits: a transition would not start from an animated value, so they fade by an animation) */
#loader.pk.done .loader-sub { opacity: 0; animation: pk-out .25s ease both; }
@keyframes pk-out { from { opacity: .78; } to { opacity: 0; } }
/* the name is drawn (the owner, 2026-10-06): STUDIO and être, the two parts of the logo's stacked cut, as inline SVGs
   that <use> the page's sprite (tools/brand/logo/, kept in the page by tools/apply-logo.mjs). Both are set at one scale,
   as the stacked cut has them: être's drawing is 0.8552 of STUDIO's width. The loader is always on the desk, dark by day
   and by night, so the logo wears the kit's night pair in either theme: ink #f1e7d0 (the SVG's currentColor) and the
   triangle #f89e6b (var(--logo-accent)). --lw is STUDIO's width, set with the positions below; 11rem is what a browser
   without container units has. */
#loader.pk .loader-word .lg { display: block; width: var(--lw, 11rem); height: auto; overflow: visible; color: #f1e7d0; --logo-accent: #f89e6b; }
#loader.pk .loader-word.pk-we .lg { width: calc(var(--lw, 11rem) * 0.8552); }
/* one breath for the page: the words with the seal (main.css pulses them every 2 s) */
#loader.pk .loader-sub { animation-duration: 3.6s; }

/* a phone upright, at the opening: the desk shows above the leaf (1) — where the name clears the top tear — and
   below it too (2) where the screen is tall and slim enough for the drawing's feet to clear the controls at its foot
   with the tear between (js/folio.js measure() reads it, and checks both) */
@media (max-width: 860px) and (orientation: portrait) and (min-height: 658px) { :root { --open-desk: 1; } }
@media (max-width: 860px) and (orientation: portrait) and (min-height: 770px) and (max-aspect-ratio: 1/2) { :root { --open-desk: 2; } }
/* …where « passer l’animation » stands on the desk at the leaf's foot, in the desk's ink, as the header's controls
   above (js/folio.js renderFolio: html.desk-foot) */
@media (max-width: 860px) {
  html.desk-foot:not(.page-under) .skip-story, html.desk-foot:not(.page-under) .skip-story:is(.on, :hover, :focus-visible) { color: #efe4c8; text-decoration-color: rgba(239, 228, 200, .5); }
}
/* …and the rail (main.css: on a phone 72vh tall, about the screen's middle) begins on the leaf, under the desk's torn
   top, as it does on a wider screen: 7.5rem clear of the screen's top and foot (on a short phone its gold point stood
   on the tear's very edge; and where a browser's bars are shown, 72vh — of the screen without them — reached the desk) */
@media (max-width: 860px) and (orientation: portrait) and (min-height: 658px) {
  html:not(.look-calme) body[data-marks="folio"] .rail { height: min(72vh, 40rem, calc(100% - 15rem)); }
}

@supports (width: 1cqw) {
#loader.pk { display: block; container-type: size; background: var(--desk); overflow: hidden; color: #efe4c8; }
/* (the loader itself is the one flat thing that holds the pointer while it is up: nothing inside is hit-tested) */
#loader.pk .pk-box {
  position: absolute; inset: 0; pointer-events: none;
  --W: 100cqw; --H: 100cqh;
  --fw: calc(var(--W) / 4); --cw: calc(var(--W) / 2);       /* the side flaps meet in the middle, under the seal */
  /* where the sheet lies open: a phone's whole screen, its torn head and foot 40px outside it, unless the desk shows
     above and below the leaf (js/folio.js measure() sets --pk-t, --pk-b: the torn strips' outer edges) */
  --st: var(--pk-t, -40px); --sh: calc(var(--pk-b, calc(var(--H) + 40px)) - var(--st));
  --th: calc(var(--sh) / 3);                                 /* folded in three: the head under the foot */
  --S: 59px; --s0: 0.9; --tri: #eaa486;
}
/* a phone upright: the leaf's top torn just under the header (68 = its foot, 71px, + the tear's 29px and 6px of air,
   less the strip's 38), its foot off the screen, its tear's whole depth below it; on a tall slim one its foot just
   over the fingertip at the screen's foot (folio.css .swipe-hint), the same 35px over it, less the strip's 38
   (« passer l’animation » stands under it, on the desk) */
@media (max-width: 860px) and (orientation: portrait) and (min-height: 658px) {
  html:not(.look-calme) #loader.pk .pk-box { --st: var(--pk-t, 68px); --sh: calc(var(--pk-b, calc(var(--H) + 40px)) - var(--st)); }
}
@media (max-width: 860px) and (orientation: portrait) and (min-height: 770px) and (max-aspect-ratio: 1/2) {
  html:not(.look-calme) #loader.pk .pk-box { --sh: calc(var(--pk-b, calc(var(--H) - 1.55rem - 16px - env(safe-area-inset-bottom, 0px))) - var(--st)); }
}
/* a wider screen: the leaf between the desk's torn edges (renderFolio at p = 0, the scale .82) */
@media (min-width: 861px) {
  html:not(.look-calme) #loader.pk .pk-box { --st: var(--pk-t, calc(max(var(--H) * .0864, 104px) - 38px)); --sh: calc(var(--pk-b, calc(var(--H) * .9064 + 26px)) - var(--st)); }
  #loader.pk .pk-box { --S: 86px; --s0: 0.78; }
}
html[data-theme="dark"] #loader.pk { color: var(--ink); background: var(--desk); }   /* (main.css gives the old loader the paper by night) */
html[data-theme="dark"] #loader.pk .pk-box { --tri: var(--rubric); }

/* a lamp's pool of light on the desk, gone as the leaf opens */
#loader.pk .pk-glow { position: absolute; inset: 0; background: radial-gradient(58% 50% at 50% 48%, rgba(255, 226, 170, .17), rgba(255, 226, 170, 0) 72%); }
/* One wave of light out of the seal as the letter begins to open (the owner, 2026-10-04: « as the first unfolding happens,
   we can emit one circle lighting wave effect — the same one as in the emotion part… just one wave »): the heart's ring
   of light from chapter I (index.html #aRing: pale, radiant yellow, a faint warm edge outside its peak, so that it reads
   as a ring of light and not as a stain), once, from the letter's middle as the seal lifts and the first flap turns,
   widening past the screen's edges as the leaf comes, and gone with the loader. One element, by transform and opacity
   alone; drawn at the size it ends near, so that it is never blown up far past its pixels. Its band half the heart's
   width and its light half as strong (the owner, 2026-10-05: « the waves are too thick and strong light, make them much
   more subtle »). */
#loader.pk .pk-wave {
  --wv: calc(var(--cw) * 2.6);
  position: absolute; left: calc(var(--W) / 2 - var(--wv) / 2); top: calc(var(--st) + var(--sh) / 2 - var(--wv) / 2);
  width: var(--wv); height: var(--wv); border-radius: 50%; opacity: 0; transform: scale(.03);
  background: radial-gradient(closest-side, rgba(255, 246, 207, 0) 73%, rgba(255, 244, 200, .1) 77%, rgba(251, 234, 168, .3) 80%, rgba(246, 222, 140, .46) 82%, rgba(236, 201, 100, .22) 84.5%, rgba(226, 184, 78, .06) 87.5%, rgba(226, 184, 78, 0) 90%);
}
/* (on a wider screen the letter is half the screen wide: the wave ends at about the screen's width, its ring no heavier) */
@media (min-width: 861px) { #loader.pk .pk-wave { --wv: calc(var(--cw) * 2); } }
html[data-theme="dark"] #loader.pk .pk-glow { background: radial-gradient(52% 46% at 50% 48%, rgba(255, 196, 120, .09), rgba(255, 196, 120, 0) 72%); }

#loader.pk .pk-sheet { position: absolute; left: 0; top: var(--st); width: var(--W); height: var(--sh); perspective: 1500px; transform: scale(0.9); }
@media (min-width: 861px) { #loader.pk .pk-sheet { perspective: 1900px; transform: scale(0.78); } }
#loader.pk .pk-sheet i { display: block; position: absolute; }

/* its shadow on the desk */
#loader.pk .pk-shadow {
  left: var(--fw); top: var(--th); width: var(--cw); height: var(--th);
  background: radial-gradient(closest-side, rgba(24, 12, 4, .5), rgba(24, 12, 4, .22) 62%, rgba(24, 12, 4, 0));
  transform: translateY(10px) scale(1.18, 1.22);
}
html[data-theme="dark"] #loader.pk .pk-shadow { background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 62%, rgba(0, 0, 0, 0)); }

/* The panels. The middle row (.pk-mf, its inside: hidden until the side flaps lie open) and its middle column (.pk-c);
   the side flaps (L, R) turn about the middle column's edges, the head (T) and the foot (B) about the middle row's.
   Each flap is flat: its inside (.pk-fr), then its outside (.pk-bk, drawn mirrored, as a flap shows its back), then
   its shade. The outside is put away as the flap stands on edge, and the inside under it is then seen.
   Folded, the head and foot lie over the middle row, and the side flaps over them: what the side flaps and the middle
   column show of the folded foot and head are copies of it (the foot's outside, its torn edge at the top: the head's
   torn edge lies under it), until the side flaps lie open and the head and foot take over (SWAP). */
#loader.pk :is(.pk-c, .pk-mf, .pk-l, .pk-r, .pk-rs) { top: var(--th); height: var(--th); }
#loader.pk .pk-c { left: var(--fw); width: var(--cw); --x: var(--fw); --y: calc(var(--st) + var(--th)); overflow: hidden; }
#loader.pk .pk-mf { left: 0; width: var(--W); --x: 0px; --y: calc(var(--st) + var(--th)); overflow: hidden; opacity: 0; }
#loader.pk .pk-l { left: 0; width: var(--fw); transform-origin: 100% 50%; transform: rotateY(179.4deg); }
#loader.pk :is(.pk-r, .pk-rs) { left: calc(var(--fw) * 3); width: var(--fw); transform-origin: 0 50%; transform: rotateY(-179.4deg); }
#loader.pk .pk-t { left: 0; top: 0; width: var(--W); height: var(--th); transform-origin: 50% 100%; transform: rotateX(-179.6deg); opacity: 0; }
#loader.pk .pk-b { left: 0; top: calc(var(--th) * 2); width: var(--W); height: var(--th); transform-origin: 50% 0; transform: rotateX(179.6deg); opacity: 0; }
#loader.pk .pk-face { inset: 0; overflow: hidden; }
#loader.pk :is(.pk-l, .pk-r) > .pk-bk { transform: scaleX(-1); }
#loader.pk :is(.pk-t, .pk-b) > .pk-bk { transform: scaleY(-1); }
/* where each face lies, seen flat, in the screen's coordinates: its window onto the paper is set there */
#loader.pk :is(.pk-l, .pk-r, .pk-t, .pk-b) > .pk-face { --x: 0px; --y: calc(var(--st) + var(--th)); }
#loader.pk .pk-r > .pk-fr { --x: calc(var(--fw) * 3); }
#loader.pk .pk-l > .pk-bk { --x: var(--fw); }
#loader.pk .pk-r > .pk-bk { --x: var(--cw); }
#loader.pk .pk-t > .pk-fr { --y: var(--st); }
#loader.pk .pk-b > .pk-fr { --y: calc(var(--st) + var(--th) * 2); }
/* the shade a face takes as it turns from the light: over the paper, never over the tear's open air (on the head
   and the foot, the torn side is the flap's outer edge, whichever face is seen) */
#loader.pk .pk-sh { inset: 0; opacity: .015; --sh-a: #2a1608; --sh-z: rgba(42, 22, 8, .45); }
#loader.pk .pk-t > .pk-sh { top: 38px; opacity: 0; }
#loader.pk .pk-b > .pk-sh { bottom: 38px; opacity: 0; }
html[data-theme="dark"] #loader.pk .pk-sh { --sh-a: #000; --sh-z: rgba(0, 0, 0, .45); }
/* (deepest at the fold it turns on, lighter towards its free edge, in a warm umber: one even shade across the flap
   read as a grey slab beside the warm paper) */
#loader.pk .pk-l > .pk-sh { background: linear-gradient(to left, var(--sh-a), var(--sh-z)); }
#loader.pk .pk-r > .pk-sh { background: linear-gradient(to right, var(--sh-a), var(--sh-z)); }
#loader.pk .pk-t > .pk-sh { background: linear-gradient(to top, var(--sh-a), var(--sh-z)); }
#loader.pk .pk-b > .pk-sh { background: linear-gradient(to bottom, var(--sh-a), var(--sh-z)); }

/* the paper, cut short by the tear's depth on its torn side (the tear's open part shows what lies under) */
#loader.pk .pk-pc { inset: 0; overflow: hidden; }
#loader.pk .pk-pc.t38 { top: 38px; --cy: 38px; }
#loader.pk .pk-pc.b38 { bottom: 38px; }
/* the window: the screen's size, laid so that the face shows the paper that lies under it on the leaf. The leaf's
   layers in one: the vignette, the stains, the grain, the light and the paper (main.css), the ruling (folio.css
   .ruling) on its own, since the quiet look has none. Its outside: the paper alone, a shade more worn. */
#loader.pk .pk-w {
  left: calc(var(--x) * -1); top: calc((var(--y) + var(--cy, 0px)) * -1); width: var(--W); height: var(--H);
  --pk-o15: calc(var(--W) * -.06) calc(var(--H) * -.06 + 15px); --pk-o30: calc(var(--W) * -.06) calc(var(--H) * -.06 + 30px); --pk-os: calc(var(--W) * 1.12) calc(var(--H) * 1.12);
}
#loader.pk .pk-w.i {
  background:
    radial-gradient(122% 106% at 50% 46%, transparent 34%, rgba(var(--stain), .05) 68%, rgba(var(--stain), .16) 100%),
    linear-gradient(to right, rgba(var(--stain), .085), rgba(var(--stain), .028) 7%, transparent 21%, transparent 79%, rgba(var(--stain), .028) 93%, rgba(var(--stain), .085)),
    linear-gradient(to bottom, rgba(var(--stain), .075), rgba(var(--stain), .025) 6%, transparent 19%, transparent 81%, rgba(var(--stain), .025) 94%, rgba(var(--stain), .075)),
    radial-gradient(28rem 21rem at 10% 88%, rgba(var(--stain), .16), transparent 62%) var(--pk-o30) / var(--pk-os) no-repeat,
    radial-gradient(22rem 17rem at 90% 12%, rgba(var(--stain), .15), transparent 62%) var(--pk-o30) / var(--pk-os) no-repeat,
    radial-gradient(8rem 7rem at 74% 72%, rgba(var(--stain), .13), transparent 68%) var(--pk-o30) / var(--pk-os) no-repeat,
    radial-gradient(3.4rem 3.2rem at 22% 24%, rgba(var(--stain), .15), transparent 68%) var(--pk-o30) / var(--pk-os) no-repeat,
    radial-gradient(2.2rem 2rem at 63% 31%, rgba(var(--stain), .11), transparent 70%) var(--pk-o30) / var(--pk-os) no-repeat,
    radial-gradient(5rem 4rem at 44% 8%, rgba(var(--stain), .1), transparent 70%) var(--pk-o30) / var(--pk-os) no-repeat,
    radial-gradient(10rem 9rem at 38% 96%, rgba(var(--stain), .13), transparent 68%) var(--pk-o30) / var(--pk-os) no-repeat,
    url("../assets/img/grain-light.webp") var(--pk-o15) / 256px 256px repeat,
    radial-gradient(135% 105% at 50% 40%, rgba(255, 252, 240, .42) 0%, rgba(255, 250, 235, .22) 34%, rgba(255, 250, 235, 0) 58%, rgba(120, 85, 40, .17) 100%) var(--pk-o15) / var(--pk-os) no-repeat,
    url("../assets/img/paper-aged.webp") var(--pk-o15) / 768px 768px repeat;
  background-color: var(--paper);
}
#loader.pk .pk-w.o { background:
    linear-gradient(rgba(var(--stain), .05), rgba(var(--stain), .05)),
    url("../assets/img/grain-light.webp") var(--pk-o15) / 256px 256px repeat,
    radial-gradient(135% 105% at 50% 40%, rgba(255, 252, 240, .42) 0%, rgba(255, 250, 235, .22) 34%, rgba(255, 250, 235, 0) 58%, rgba(120, 85, 40, .17) 100%) var(--pk-o15) / var(--pk-os) no-repeat,
    url("../assets/img/paper-aged.webp") var(--pk-o15) / 768px 768px repeat; background-color: var(--paper); }
html[data-theme="dark"] #loader.pk .pk-w.i { background:
    radial-gradient(122% 106% at 50% 46%, transparent 34%, rgba(var(--stain), .05) 68%, rgba(var(--stain), .16) 100%),
    linear-gradient(to right, rgba(var(--stain), .085), rgba(var(--stain), .028) 7%, transparent 21%, transparent 79%, rgba(var(--stain), .028) 93%, rgba(var(--stain), .085)),
    linear-gradient(to bottom, rgba(var(--stain), .075), rgba(var(--stain), .025) 6%, transparent 19%, transparent 81%, rgba(var(--stain), .025) 94%, rgba(var(--stain), .075)),
    radial-gradient(28rem 21rem at 10% 88%, rgba(var(--stain), .16), transparent 62%) var(--pk-o30) / var(--pk-os) no-repeat,
    radial-gradient(22rem 17rem at 90% 12%, rgba(var(--stain), .15), transparent 62%) var(--pk-o30) / var(--pk-os) no-repeat,
    radial-gradient(8rem 7rem at 74% 72%, rgba(var(--stain), .13), transparent 68%) var(--pk-o30) / var(--pk-os) no-repeat,
    radial-gradient(3.4rem 3.2rem at 22% 24%, rgba(var(--stain), .15), transparent 68%) var(--pk-o30) / var(--pk-os) no-repeat,
    radial-gradient(2.2rem 2rem at 63% 31%, rgba(var(--stain), .11), transparent 70%) var(--pk-o30) / var(--pk-os) no-repeat,
    radial-gradient(5rem 4rem at 44% 8%, rgba(var(--stain), .1), transparent 70%) var(--pk-o30) / var(--pk-os) no-repeat,
    radial-gradient(10rem 9rem at 38% 96%, rgba(var(--stain), .13), transparent 68%) var(--pk-o30) / var(--pk-os) no-repeat,
    url("../assets/img/grain-dark.webp") var(--pk-o15) / 256px 256px repeat,
    url("../assets/img/drift-dark.webp") var(--pk-o15) / 1100px 1100px repeat,
    radial-gradient(135% 105% at 50% 40%, var(--paper-lit) 0%, var(--paper-mid) 34%, var(--paper) 58%, var(--paper-deep) 100%) var(--pk-o15) / var(--pk-os) no-repeat; background-color: var(--paper); }
html[data-theme="dark"] #loader.pk .pk-w.o { background:
    linear-gradient(rgba(var(--stain), .05), rgba(var(--stain), .05)),
    url("../assets/img/grain-dark.webp") var(--pk-o15) / 256px 256px repeat,
    url("../assets/img/drift-dark.webp") var(--pk-o15) / 1100px 1100px repeat,
    radial-gradient(135% 105% at 50% 40%, var(--paper-lit) 0%, var(--paper-mid) 34%, var(--paper) 58%, var(--paper-deep) 100%) var(--pk-o15) / var(--pk-os) no-repeat; background-color: var(--paper); }
#loader.pk .pk-w.i::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 31px, rgba(var(--metalpoint), .045) 31px) 0 0 / 100% 32px; }
html.look-calme #loader.pk .pk-w.i::before { content: none; }
/* the folds, in the screen's coordinates too: on the inside a valley (a dark line, its lit side), on the outside a
   ridge; the same four lines on every face, so that the faces that take over from one another agree */
#loader.pk .pk-w::after {
  content: ""; position: absolute; left: 0; width: 100%; top: var(--st); height: var(--sh);
  --fd: rgba(var(--stain), .2); --fl: rgba(255, 250, 236, .3);
  background:
    linear-gradient(to right, transparent calc(var(--fw) - 1.5px), var(--fd) calc(var(--fw) - 1.5px), var(--fd) calc(var(--fw) - .3px), var(--fl) calc(var(--fw) - .3px), transparent calc(var(--fw) + 1.6px)),
    linear-gradient(to left, transparent calc(var(--fw) - 1.5px), var(--fd) calc(var(--fw) - 1.5px), var(--fd) calc(var(--fw) - .3px), var(--fl) calc(var(--fw) - .3px), transparent calc(var(--fw) + 1.6px)),
    linear-gradient(to bottom, transparent calc(var(--th) - 1.5px), var(--fd) calc(var(--th) - 1.5px), var(--fd) calc(var(--th) - .3px), var(--fl) calc(var(--th) - .3px), transparent calc(var(--th) + 1.6px)),
    linear-gradient(to top, transparent calc(var(--th) - 1.5px), var(--fd) calc(var(--th) - 1.5px), var(--fd) calc(var(--th) - .3px), var(--fl) calc(var(--th) - .3px), transparent calc(var(--th) + 1.6px));
}
#loader.pk .pk-w.o::after { --fd: rgba(255, 250, 236, .34); --fl: rgba(var(--stain), .16); }
html[data-theme="dark"] #loader.pk .pk-w::after { --fd: rgba(0, 0, 0, .45); --fl: rgba(255, 236, 200, .07); }
html[data-theme="dark"] #loader.pk .pk-w.o::after { --fd: rgba(255, 236, 200, .1); --fl: rgba(0, 0, 0, .4); }

/* the tears: the desk's own strips (css/folio.css .deckle-t, .deckle-b), the head's at its top, the foot's at its foot
   turned over and shaded as the desk's is. A flap's outside carries its inside's very tear (the same stretch of it,
   turned over with the face), so that the paper's edge is one edge from both sides */
#loader.pk .pk-tr { left: 0; right: 0; top: 0; height: 48px; --tx: -211px; background: url("../assets/img/torn-edge.webp") calc(var(--tx) - var(--x)) 0 / 1024px 48px repeat-x; }
html[data-theme="dark"] #loader.pk .pk-tr { background-image: url("../assets/img/torn-edge-dark.webp"); }
#loader.pk .pk-tr.bot { top: auto; bottom: 0; transform: scaleY(-1); }
#loader.pk :is(.pk-b, .pk-c, .pk-l, .pk-r) .pk-tr { --tx: -611px; }
#loader.pk .pk-b > .pk-fr > .pk-tr { background-image: linear-gradient(rgba(var(--stain), .11) 37px, rgba(var(--stain), 0) 47px), url("../assets/img/torn-edge.webp"); background-position: 0 0, calc(var(--tx) - var(--x)) 0; background-size: 100% 48px, 1024px 48px; background-repeat: no-repeat, repeat-x; }
html[data-theme="dark"] #loader.pk .pk-b > .pk-fr > .pk-tr { background-image: none, url("../assets/img/torn-edge-dark.webp"); }
/* a speck (6px, all but transparent) of the inside's layers and its tear, drawn on the closed letter once the figure
   is ready (.pk-ready): the GPU learns them then, and not in the first frames of the opening */
#loader.pk .pk-warm { left: 3px; top: 3px; width: 6px; height: 6px; overflow: hidden; opacity: .01; --x: 0px; --y: 0px; }

/* while the page loads (until .pk-ready) the inside of the letter is not drawn: the middle row, and the head and the
   foot under the side flaps (put away until SWAP) are not painted, and their layers hold nothing. (The side flaps
   keep both their faces, and their turn in depth: without them, or laid flat, the seam and the flaps' edges were
   drawn otherwise, and changed as the letter was readied) */
#loader.pk:not(.pk-ready) :is(.pk-mf, .pk-t, .pk-b, .pk-warm) { visibility: hidden; }
/* …and once the figure is ready, behind the closed letter still, everything that moves as it opens is given a layer
   of its own, and drawn: made at .done, those layers and their pictures (the lamp's pool the screen's size, each face
   apart from its flap) held the compositor for the seal's lift, 140 ms even on a fast machine. They are kept from
   .pk-ready to the loader's going — about two seconds, not the whole load. */
#loader.pk.pk-ready :is(.pk-flap, .pk-bk, .pk-sh, .pk-mf, .pk-seal, .pk-sm, .pk-ss, .pk-sheet, .pk-shadow, .pk-glow, .pk-ch, .pk-cv, .pk-tw, .pk-sl, .pk-lp, .pk-tl, .pk-wave, .loader-word) { will-change: transform, opacity; }
/* (what is put away until SWAP is drawn then too, at a hundredth, unseen under the side flaps: at nought, it was first
   drawn at the opening) — and so is the cord's slack copy, unseen under the taut one */
#loader.pk.pk-ready:not(.done) :is(.pk-mf, .pk-t, .pk-b, .pk-sl) { opacity: .01; }

/* The page's first frame: the closed letter plain (the owner, 2026-10-04: the first paint as soon as the old
   loader's, on a slow phone). Until .pk-tex it shows its shape only — its outside flat, in the tone of its paper
   (.pk-v), its folds' rounding and the seam over it, the seal and the shadows, the name and the words — and none of
   the paper's windows nor the tears: rastered in that first frame, the paper's grain, light, stains and fold lines
   (and the GPU's first programs for them, on a phone that has not drawn them before) held the first contentful paint
   0.6 s after the old loader's on a mid-range phone. The script under the letter sets .pk-tex once that first paint
   has been made (js/folio.js hideLoader too, should it not have): the paper is drawn, under the tone still — on a slow
   phone the GPU took a third of a second over it, the screen held still, and a fade begun with it was seen only at
   its end — and two frames on (.pk-settle) the tone fades over 360ms: the paper settling, not a change. Once
   settled the tone is not drawn, and the letter is exactly what it was; while it fades the tone has a layer of its
   own, a fold's size. */
#loader.pk:not(.pk-tex) :is(.pk-w, .pk-tr) { display: none; }
#loader.pk .pk-v { inset: 0; background: rgb(216, 200, 167); }
html[data-theme="dark"] #loader.pk .pk-v { background: rgb(44, 37, 28); }
/* (two animations: the fade alone is run by the compositor — with the visibility in its keyframes, the whole of it was
   run by the busy main thread — and the tone is put away a moment after it) */
#loader.pk.pk-settle .pk-v { animation: pk-settle 360ms ease-out both, pk-settled 1ms linear 360ms both; }
@keyframes pk-settle { from { opacity: 1; } to { opacity: 0; } }
@keyframes pk-settled { to { visibility: hidden; } }

/* the closed letter's outside: rounded at its folds, a seam where the flaps meet under the seal */
#loader.pk :is(.pk-l, .pk-r) > .pk-bk::after { content: ""; position: absolute; inset: 0; }
#loader.pk .pk-l > .pk-bk::after { background: linear-gradient(to right, rgba(var(--stain), .2), rgba(var(--stain), .05) 6px, transparent 20px), linear-gradient(to left, rgba(30, 18, 8, .3), rgba(30, 18, 8, 0) 3px), linear-gradient(to bottom, rgba(255, 250, 236, .16), transparent 26%, transparent 74%, rgba(var(--stain), .12)); }
#loader.pk .pk-r > .pk-bk::after { background: linear-gradient(to left, rgba(var(--stain), .24), rgba(var(--stain), .06) 6px, transparent 20px), linear-gradient(to right, rgba(30, 18, 8, .22), rgba(30, 18, 8, 0) 2px), linear-gradient(to bottom, rgba(255, 250, 236, .12), transparent 26%, transparent 74%, rgba(var(--stain), .14)); }
html[data-theme="dark"] #loader.pk :is(.pk-l, .pk-r) > .pk-bk::after { box-shadow: inset 0 1px 0 rgba(255, 236, 200, .09), inset 0 -1px 0 rgba(255, 236, 200, .05); }

/* The seal, pressed over the seam: it is the right flap's, and holds it down on the left one. While the page loads it
   breathes (.pk-sm, about its own middle, over a shadow of its own, .pk-ss); when the page is ready it rises off the
   left flap, its shadow spreading and slipping out from under it, and the right flap carries it away. It lies on the
   flap's outside, so it is mirrored as that face is, and put away with it; and it is pressed over the cord's knot, in
   the middle of the closed letter (the owner, 2026-10-04: there, and a fifth smaller — 59px in the sheet on a phone,
   86px on a wider screen — its shadow's offset and its lift with it). So that it lies over the cord, which is drawn
   after the flaps, it is drawn after the cord, on a twin of the right flap (.pk-rs: the flap's place and its turn,
   on the one clock, and nothing else). (Two halves cracking apart were tried in the prototype: each half newly drawn,
   under a clip, cost the first opening a 0.7 s freeze.) */
#loader.pk .pk-seal { width: var(--S); height: var(--S); left: calc(var(--fw) - var(--S) / 2); top: calc(var(--th) / 2 - var(--S) / 2); transform: scaleX(-1); }
#loader.pk .pk-ss {
  inset: -12%; border-radius: 50%; transform: translate(0.8px, 1.6px);
  background: radial-gradient(closest-side, rgba(36, 12, 4, .5), rgba(36, 12, 4, .22) 58%, rgba(36, 12, 4, 0));
}
html[data-theme="dark"] #loader.pk .pk-ss { background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 58%, rgba(0, 0, 0, 0)); }
#loader.pk .pk-sm { inset: 0; animation: pk-breathe 3.6s ease-in-out infinite; }
#loader.pk .pk-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#loader.pk .pk-sheen { animation: pk-sheen 3.6s ease-in-out infinite; }
@keyframes pk-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.022); } }
@keyframes pk-sheen { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }

/* The cord (the owner, 2026-10-04): a linen twine, as old letters were tied, crossed round the closed letter — once
   about its middle, holding the side flaps shut over the seam, and once about its height, over the seam — and knotted
   in a small bow where the two cross, in the middle of the letter, under the seal: the wax is pressed over the knot,
   and the bow's loops and tails show round it (the owner, 2026-10-04: « right where the seal is »; it lay beside the
   seal, under it and to its left). It lies on the closed letter from the page's first paint, in the sheet's
   coordinates, so that it is scaled with the letter, and under the seal, which is drawn after it (.pk-rs); it is gone
   before the flap turns and carries the seal away. (Drawn in the right flap's own plane, under the seal there, it
   stood off the paper with the flap's hair of a turn, and on a wide screen the band about the letter's middle ran 2px
   further past its left edge than past its right.) Its thickness is the twine's own. Each length is a band with its
   twist drawn in the line itself (a slanted repeat of its light and its dark), with a slack copy of it, sagging
   (.pk-sl), that takes over as it is untied, by opacity; the bow is four small drawings — its loops and its tails
   (its knot is under the wax) — pulled loose by transforms alone (no stroke drawn again, no path changed: that would
   be the main thread's, frame by frame). The bow (--K) is its full size where the letter is tall enough to hold its
   tails below the seal, and smaller on a short one, so that they hang on the paper, not over its foot — but never so
   small that its loops do not show round the seal. */
#loader.pk .pk-cord {
  left: var(--fw); top: var(--th); width: var(--cw); height: var(--th);
  --cd: 2.8px; --Km: calc(var(--cd) * 40);
  --cx: calc(var(--cw) / 2); --cy: calc(var(--th) / 2);
  --K: clamp(var(--S) * 1.4, (var(--cy) - 8px) / .5, var(--Km));
  --ca: #6a4320; --cb: #c99a5c; --cc: rgba(46, 24, 6, .42);
}
@media (min-width: 861px) { #loader.pk .pk-cord { --cd: 3.6px; --Km: calc(var(--cd) * 45); } }
html[data-theme="dark"] #loader.pk .pk-cord { --ca: #9c7646; --cb: #dcb97e; --cc: rgba(0, 0, 0, .6); }
/* each length in a box of its own, its band across the box's middle: the one about the letter's middle wider than the
   letter, the other taller (their slack copies hang past its edges) */
#loader.pk .pk-ch { left: calc(var(--cw) * -.05); width: calc(var(--cw) * 1.1); top: calc(var(--cy) - var(--th) * .1); height: calc(var(--th) * .2); }
#loader.pk .pk-cv { top: calc(var(--th) * -.05); height: calc(var(--th) * 1.1); left: calc(var(--cx) - var(--cw) * .06); width: calc(var(--cw) * .12); }
/* (the band runs a hair past the letter's edges, where it turns round them) */
#loader.pk .pk-tw { border-radius: 1.5px; box-shadow: 0 1px 1.4px var(--cc); }
#loader.pk .pk-ch > .pk-tw { left: calc(var(--cw) * .05 - 1.5px); width: calc(var(--cw) + 3px); top: calc(50% - var(--cd) / 2); height: var(--cd); background: repeating-linear-gradient(112deg, var(--ca) 0 1.2px, var(--cb) 1.2px 2.1px, var(--ca) 2.1px 3px); }
#loader.pk .pk-cv > .pk-tw { top: calc(var(--th) * .05 - 1.5px); height: calc(var(--th) + 3px); left: calc(50% - var(--cd) / 2); width: var(--cd); background: repeating-linear-gradient(22deg, var(--ca) 0 1.2px, var(--cb) 1.2px 2.1px, var(--ca) 2.1px 3px); }
#loader.pk .pk-sl { inset: 0; opacity: 0; }
#loader.pk .pk-cord svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#loader.pk .pk-sl path { vector-effect: non-scaling-stroke; }
#loader.pk .pk-sl .ca { stroke: var(--ca); stroke-width: var(--cd); }
/* (its light in short slanted strokes, the band's twist as near as a line can draw it: a smooth light along it read as
   another cord) */
#loader.pk .pk-sl .cb { stroke: var(--cb); stroke-width: calc(var(--cd) * .55); stroke-dasharray: 1 2.25; stroke-linecap: butt; }
/* the bow, drawn on a square about the knot (in its own units the twine is 2.5 wide, 2.22 on a wider screen:
   --cd); each loop and each tail turns about the knot, where it comes out of it */
#loader.pk .pk-kt { left: calc(var(--cx) - var(--K) / 2); top: calc(var(--cy) - var(--K) / 2); width: var(--K); height: var(--K); }
#loader.pk .pk-kt .cs { stroke: var(--cc); stroke-width: 2.5; }
#loader.pk .pk-kt .ca { stroke: var(--ca); stroke-width: 2.5; }
#loader.pk .pk-kt .cb { stroke: var(--cb); stroke-width: 0.95; stroke-dasharray: 1.2 1.15; }
#loader.pk .pk-kt .cf { stroke: var(--ca); stroke-width: 0.75; }
@media (min-width: 861px) {
  #loader.pk .pk-kt .cs { stroke: var(--cc); stroke-width: 2.22; }
  #loader.pk .pk-kt .ca { stroke: var(--ca); stroke-width: 2.22; }
  #loader.pk .pk-kt .cb { stroke: var(--cb); stroke-width: 0.84; stroke-dasharray: 1.07 1.02; }
  #loader.pk .pk-kt .cf { stroke: var(--ca); stroke-width: 0.67; }
}
#loader.pk .pk-lp.l { transform-origin: 47% 49%; }
#loader.pk .pk-lp.r { transform-origin: 53% 49%; }
#loader.pk .pk-tl.l { transform-origin: 47% 53%; }
#loader.pk .pk-tl.r { transform-origin: 53% 53%; }

/* the name about the letter, in the desk's ink (as the header on the desk) — STUDIO over it and être under it,
   the letter between the two words (the owner, 2026-10-04: « put Studio on top of the envelope, and être under the
   envelope »; it was the two together under it) — and what is being prepared, under « être ». The closed letter is the
   sheet's middle third at its scale: its top at --st + --sh/2 − --sh/6 · --s0, its foot at + --sh/6 · --s0. */
#loader.pk .loader-word, #loader.pk .loader-sub { position: absolute; left: 0; right: 0; margin: 0 auto; text-align: center; }
#loader.pk .loader-word { color: inherit; width: max-content; --lw: clamp(10rem, 56cqw, 11.75rem); --gs: 1.05rem; --ge: 1.1rem; }
#loader.pk .loader-word.pk-ws { bottom: calc(var(--H) - var(--st) - var(--sh) / 2 + var(--sh) / 6 * var(--s0) + var(--gs)); }
#loader.pk .loader-word.pk-we { top: calc(var(--st) + var(--sh) / 2 + var(--sh) / 6 * var(--s0) + var(--ge)); }
/* (the sub sits under être, whose drawing is 0.3432 of STUDIO's width tall, with a rem of air) */
#loader.pk .loader-sub { --lw: clamp(10rem, 56cqw, 11.75rem); --ge: 1.1rem; top: calc(var(--st) + var(--sh) / 2 + var(--sh) / 6 * var(--s0) + var(--ge) + var(--lw) * 0.3432 + 1rem); color: inherit; opacity: .78; letter-spacing: .3em; }
/* (on a wider screen the letter is half the screen wide: the name about it is set larger, not left at a phone's size) */
@media (min-width: 861px) {
  #loader.pk :is(.loader-word, .loader-sub) { --lw: clamp(13rem, 21cqw, 18rem); --gs: 1.3rem; --ge: 1.3rem; }
  #loader.pk .loader-sub { font-size: .86rem; }
}

/* ── the opening, on .done ── */
#loader.pk.done .pk-sm { animation: pk-lift 2000ms linear both; }
#loader.pk.done .pk-ss { animation: pk-ss 2000ms linear both; }
#loader.pk.done .pk-l { animation: pk-l 2000ms linear both; }
#loader.pk.done :is(.pk-r, .pk-rs) { animation: pk-r 2000ms linear both; }
#loader.pk.done .pk-b { animation: pk-b 2000ms linear both; }
#loader.pk.done .pk-t { animation: pk-t 2000ms linear both; }
#loader.pk.done .pk-l > .pk-bk { animation: pk-off-l 2000ms linear both; }
#loader.pk.done :is(.pk-r > .pk-bk, .pk-seal) { animation: pk-off-r 2000ms linear both; }
#loader.pk.done .pk-b > .pk-bk { animation: pk-off-b 2000ms linear both; }
#loader.pk.done .pk-t > .pk-bk { animation: pk-off-t 2000ms linear both; }
#loader.pk.done .pk-l > .pk-sh { animation: pk-sh-l 2000ms linear both; }
#loader.pk.done .pk-r > .pk-sh { animation: pk-sh-r 2000ms linear both; }
#loader.pk.done .pk-b > .pk-sh { animation: pk-sh-b 2000ms linear both; }
#loader.pk.done .pk-t > .pk-sh { animation: pk-sh-t 2000ms linear both; }
#loader.pk.done .pk-mf { animation: pk-on 2000ms linear both; }
#loader.pk.done .pk-sheet { animation: pk-sheet-m 2000ms linear both; }
#loader.pk.done .pk-shadow { animation: pk-shadow 2000ms linear both; }
#loader.pk.done .pk-glow { animation: pk-glow 2000ms linear both; }
#loader.pk.done .pk-wave { animation: pk-wave 2000ms linear both; }
@media (min-width: 861px) { #loader.pk.done .pk-sheet { animation-name: pk-sheet-d; } }
#loader.pk.done .pk-ch { animation: pk-ch 2000ms linear both; }
#loader.pk.done .pk-cv { animation: pk-cv 2000ms linear both; }
#loader.pk.done .pk-tw { animation: pk-tw 2000ms linear both; }
#loader.pk.done .pk-sl { animation: pk-sl 2000ms linear both; }
#loader.pk.done .pk-lp.l { animation: pk-lpl 2000ms linear both; }
#loader.pk.done .pk-lp.r { animation: pk-lpr 2000ms linear both; }
#loader.pk.done .pk-tl.l { animation: pk-tll 2000ms linear both; }
#loader.pk.done .pk-tl.r { animation: pk-tlr 2000ms linear both; }
/* the cord: a tug on its right tail tightens the bow; the tail is pulled, and its loop is drawn in under the seal, into
   the knot, as the tail comes out the longer; the left loop, nothing holding it now, falls open along its own tail,
   flattened; the knot gives under the wax and the tails go slack; the cord slips out from under the seal and off the
   letter, the length about its middle past its foot, the one about its height past its left side */
@keyframes pk-lpr {
  0% { transform: rotate(0deg) scale(1, 1); opacity: 1; animation-timing-function: cubic-bezier(.3,0,.6,1) }
  2.5% { transform: rotate(5deg) scale(.96, .9); animation-timing-function: cubic-bezier(.3,0,.5,1) }
  9% { opacity: 1 }
  11% { transform: rotate(16deg) scale(.08, .3); opacity: 0 }
  100% { transform: rotate(16deg) scale(.08, .3); opacity: 0 }
}
@keyframes pk-tlr {
  0% { transform: translate(0%, 0%) rotate(0deg) rotate(57.8deg) translateX(0%) rotate(-57.8deg); opacity: 1; animation-timing-function: cubic-bezier(.3,0,.6,1) }
  2.5% { transform: translate(0%, 0%) rotate(-3deg) rotate(57.8deg) translateX(3.24%) rotate(-57.8deg); animation-timing-function: cubic-bezier(.3,0,.5,1) }
  11% { transform: translate(0%, 0%) rotate(-8deg) rotate(57.8deg) translateX(20.25%) rotate(-57.8deg); animation-timing-function: ease-in-out }
  14% { opacity: 1 }
  15% { transform: translate(0%, 3%) rotate(-2deg) rotate(57.8deg) translateX(20.25%) rotate(-57.8deg); animation-timing-function: cubic-bezier(.45,0,.85,.55) }
  17% { transform: translate(-2%, 11%) rotate(6deg) rotate(57.8deg) translateX(18.22%) rotate(-57.8deg); opacity: 0 }
  100% { transform: translate(-2%, 11%) rotate(6deg) rotate(57.8deg) translateX(18.22%) rotate(-57.8deg); opacity: 0 }
}
@keyframes pk-lpl {
  0% { transform: rotate(0deg) scale(1, 1); opacity: 1; animation-timing-function: cubic-bezier(.3,0,.6,1) }
  2.5% { transform: rotate(-3deg) scale(.97, .94) }
  8.5% { transform: rotate(-3deg) scale(.97, .94); animation-timing-function: cubic-bezier(.3,0,.5,1) }
  13.5% { opacity: 1 }
  14.5% { transform: rotate(-60deg) scale(1.06, .2) }
  16.5% { opacity: 0 }
  100% { transform: rotate(-60deg) scale(1.06, .2); opacity: 0 }
}
@keyframes pk-tll {
  0% { transform: translate(0%, 0%) rotate(0deg) rotate(113deg) translateX(0%) rotate(-113deg); opacity: 1; animation-timing-function: cubic-bezier(.3,0,.6,1) }
  2.5% { transform: translate(0%, 0%) rotate(2deg) rotate(113deg) translateX(-0.86%) rotate(-113deg) }
  8.5% { transform: translate(0%, 0%) rotate(2deg) rotate(113deg) translateX(-0.86%) rotate(-113deg); animation-timing-function: cubic-bezier(.3,0,.5,1) }
  14% { opacity: 1 }
  15% { transform: translate(-1%, 4%) rotate(10deg) rotate(113deg) translateX(5.16%) rotate(-113deg); animation-timing-function: cubic-bezier(.45,0,.85,.55) }
  17% { transform: translate(-3%, 12%) rotate(16deg) rotate(113deg) translateX(4.3%) rotate(-113deg); opacity: 0 }
  100% { transform: translate(-3%, 12%) rotate(16deg) rotate(113deg) translateX(4.3%) rotate(-113deg); opacity: 0 }
}
@keyframes pk-tw {
  0% { opacity: 1 }
  12.5% { opacity: 1 }
  15% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes pk-sl {
  0% { opacity: 0 }
  12.5% { opacity: 0 }
  15% { opacity: 1 }
  100% { opacity: 1 }
}
@keyframes pk-ch {
  0% { transform: translateY(0%); opacity: 1 }
  12.5% { transform: translateY(0%); animation-timing-function: cubic-bezier(.45,0,.85,.55) }
  17.5% { opacity: 1 }
  26% { transform: translateY(270%); opacity: 0 }
  100% { transform: translateY(270%); opacity: 0 }
}
@keyframes pk-cv {
  0% { transform: translateX(0%); opacity: 1 }
  12.5% { transform: translateX(0%); animation-timing-function: cubic-bezier(.45,0,.85,.55) }
  17.5% { opacity: 1 }
  26% { transform: translateX(-460%); opacity: 0 }
  100% { transform: translateX(-460%); opacity: 0 }
}
@keyframes pk-lift {
  0% { transform: scale(1.01) }
  18% { transform: scale(1.01); animation-timing-function: cubic-bezier(.3,0,.3,1) }
  29% { transform: translate(-1.6px, -4px) scale(1.12) }
  100% { transform: translate(-1.6px, -4px) scale(1.12) }
}
@keyframes pk-ss {
  0% { transform: translate(0.8px, 1.6px) scale(1); opacity: 1 }
  18% { transform: translate(0.8px, 1.6px) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.3,0,.3,1) }
  29% { transform: translate(4.8px, 9.6px) scale(1.42); opacity: .5 }
  100% { transform: translate(4.8px, 9.6px) scale(1.42); opacity: .5 }
}
@keyframes pk-l {
  0% { transform: rotateY(179.4deg) }
  31.5% { transform: rotateY(179.4deg); animation-timing-function: cubic-bezier(.55,0,.8,.6) }
  42.25% { transform: rotateY(90deg); animation-timing-function: cubic-bezier(.2,.4,.45,1) }
  53% { transform: rotateY(0deg) }
  100% { transform: rotateY(0deg) }
}
@keyframes pk-r {
  0% { transform: rotateY(-179.4deg) }
  29% { transform: rotateY(-179.4deg); animation-timing-function: cubic-bezier(.55,0,.8,.6) }
  39.75% { transform: rotateY(-90deg); animation-timing-function: cubic-bezier(.2,.4,.45,1) }
  50.5% { transform: rotateY(0deg) }
  100% { transform: rotateY(0deg) }
}
@keyframes pk-b {
  0% { transform: rotateX(179.6deg); opacity: 0 }
  52.95% { opacity: 0 }
  53% { transform: rotateX(179.6deg); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.8,.6) }
  61% { transform: rotateX(90deg); animation-timing-function: cubic-bezier(.2,.4,.45,1) }
  69% { transform: rotateX(0deg) }
  100% { transform: rotateX(0deg); opacity: 1 }
}
@keyframes pk-t {
  0% { transform: rotateX(-179.6deg); opacity: 0 }
  52.95% { opacity: 0 }
  53% { opacity: 1 }
  60% { transform: rotateX(-179.6deg); animation-timing-function: cubic-bezier(.55,0,.8,.6) }
  68% { transform: rotateX(-90deg); animation-timing-function: cubic-bezier(.2,.4,.45,1) }
  76% { transform: rotateX(0deg) }
  100% { transform: rotateX(0deg); opacity: 1 }
}
@keyframes pk-off-l {
  0% { opacity: 1 }
  42.2% { opacity: 1 }
  42.25% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes pk-off-r {
  0% { opacity: 1 }
  39.7% { opacity: 1 }
  39.75% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes pk-off-b {
  0% { opacity: 1 }
  60.95% { opacity: 1 }
  61% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes pk-off-t {
  0% { opacity: 1 }
  67.95% { opacity: 1 }
  68% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes pk-sh-l {
  0% { opacity: .015 }
  31.5% { opacity: .015; animation-timing-function: cubic-bezier(.55,0,.8,.6) }
  42.25% { opacity: .42; animation-timing-function: cubic-bezier(.2,.4,.45,1) }
  53% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes pk-sh-r {
  0% { opacity: .015 }
  29% { opacity: .015; animation-timing-function: cubic-bezier(.55,0,.8,.6) }
  39.75% { opacity: .42; animation-timing-function: cubic-bezier(.2,.4,.45,1) }
  50.5% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes pk-sh-b {
  0% { opacity: 0 }
  53% { opacity: 0; animation-timing-function: cubic-bezier(.55,0,.8,.6) }
  61% { opacity: .42; animation-timing-function: cubic-bezier(.2,.4,.45,1) }
  69% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes pk-sh-t {
  0% { opacity: 0 }
  60% { opacity: 0; animation-timing-function: cubic-bezier(.55,0,.8,.6) }
  68% { opacity: .42; animation-timing-function: cubic-bezier(.2,.4,.45,1) }
  76% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes pk-on {
  0% { opacity: 0 }
  52.95% { opacity: 0 }
  53% { opacity: 1 }
  100% { opacity: 1 }
}
@keyframes pk-sheet-m {
  0% { transform: scale(0.9) }
  25.5% { transform: scale(0.9); animation-timing-function: cubic-bezier(.45,0,.25,1) }
  76% { transform: scale(1) }
  100% { transform: scale(1) }
}
@keyframes pk-sheet-d {
  0% { transform: scale(0.78) }
  25.5% { transform: scale(0.78); animation-timing-function: cubic-bezier(.45,0,.25,1) }
  76% { transform: scale(1) }
  100% { transform: scale(1) }
}
@keyframes pk-shadow {
  0% { transform: translateY(10px) scale(1.18, 1.22); opacity: 1 }
  25.5% { transform: translateY(10px) scale(1.18, 1.22); opacity: 1; animation-timing-function: cubic-bezier(.45,0,.25,1) }
  51% { transform: translateY(6px) scale(2.12, 1.18); opacity: .4 }
  63% { opacity: 0 }
  100% { transform: translateY(6px) scale(2.12, 1.18); opacity: 0 }
}
@keyframes pk-glow {
  0% { opacity: 1 }
  25.5% { opacity: 1; animation-timing-function: ease-in-out }
  63% { opacity: 0 }
  100% { opacity: 0 }
}
@keyframes pk-wave {
  0% { transform: scale(.03); opacity: 0 }
  27.5% { transform: scale(.03); opacity: 0; animation-timing-function: cubic-bezier(.22, .6, .28, 1) }
  36.5% { opacity: .5 }
  67% { opacity: .3 }
  95.5% { transform: scale(1); opacity: 0 }
  100% { transform: scale(1); opacity: 0 }
}

/* reduced motion, a landing far from the opening, a scroll kept through the load, a phone on its side: no unfolding,
   the loader (the cord with the letter) fades as it always did; and under reduced motion the seal does not breathe,
   and the letter's paper comes at once */
@media (prefers-reduced-motion: reduce) {
  #loader.pk :is(.pk-sm, .pk-sheen, .loader-sub) { animation: none; }
  #loader.pk.pk-tex .pk-v { animation: none; visibility: hidden; }
  #loader.pk.done :is(.pk-flap, .pk-bk, .pk-sh, .pk-mf, .pk-seal, .pk-sm, .pk-ss, .pk-sheet, .pk-shadow, .pk-glow, .pk-ch, .pk-cv, .pk-tw, .pk-sl, .pk-lp, .pk-tl, .pk-wave) { animation: none !important; }
}
#loader.pk.done.fast :is(.pk-flap, .pk-bk, .pk-sh, .pk-mf, .pk-seal, .pk-sm, .pk-ss, .pk-sheet, .pk-shadow, .pk-glow, .pk-ch, .pk-cv, .pk-tw, .pk-sl, .pk-lp, .pk-tl, .pk-wave) { animation: none !important; }
}
/* without container units: the plain loader (the name on the desk's paper), and the plain fade */
@supports not (width: 1cqw) { #loader.pk :is(.pk-glow, .pk-sheet, .pk-wave) { display: none; } }