@usableapp/cardds 0.7.103 → 0.7.104

package/css/media.css

@@ -1,52 +1,16 @@
 /* ============================================================
    cardds/media.css — media & display inside cards:
-   cover card · quote · tile grid · fold · waveform
+   quote · tile grid · waveform (the cover card and the fold are card variants: card.css)
    ============================================================ */
 
-/* ---- cover: the image IS the card; text over a scrim ----
-   <article class="card card--cover"><div class="ph" role="img"></div>
-     <div class="card__head"><button class="icon-btn icon-btn--sm">♥</button></div>
-     <div><h2 class="t-h1">Art Institute</h2><p class="t-body">111 South Michigan Ave</p></div>
-     <div class="row">…meta…</div></article> */
-.card--cover {
-  --card-bg: var(--card-3-bg);
-  --dark: var(--card-3-dark);
-  --accent: var(--card-ink);
-  --accent-dark: calc(1 - var(--dark));
-  min-height: var(--_cover-min-h);
-  align-content: space-between;
-  overflow: hidden;
-  isolation: isolate;
-}
-.card--cover > img,
-.card--cover > .ph {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: -2;
-  border: 0;
-  border-radius: 0;
-  min-height: 0;
-}
-/* scrim: dark at both ends so the meta stays readable */
-.card--cover::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  background: linear-gradient(to bottom, var(--scrim), transparent 40% 60%, var(--scrim));
-}
-
 /* ---- quote: giant mark, big text, attribution ----
    <blockquote class="quote"><p class="quote__text">It's overcast…</p><footer class="quote__by">Wednesday 15</footer></blockquote> */
 .quote { margin: 0; display: grid; gap: var(--quote-gap, var(--sp-3)); }
 .quote::before {
   content: "\201C";
-  font: 900 calc(var(--fs-h1) * 3)/0.55 var(--font-display);
+  font: var(--fw-black) calc(var(--fs-h1) * 3) / var(--lh-mark) var(--font-display);
   height: var(--sp-10);
-  opacity: 0.9;
+  opacity: var(--fade-most);
 }
 .quote__text { margin: 0; font: var(--quote-text-font, var(--type-h1)); letter-spacing: var(--track-h1); text-wrap: balance; }
 .quote--sm .quote__text { font: var(--type-h2); letter-spacing: var(--track-h2); }
@@ -60,7 +24,7 @@
   grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min), 100%), 1fr));
   gap: var(--tile-grid-gap, var(--sp-3));
 }
-.tile-grid--3 { --tile-min: 6rem; } /* three across on a phone (attachments, upload kinds) */
+.tile-grid--3 { --tile-min: calc(var(--tap-base) * 2); } /* three across on a phone (attachments, upload kinds) */
 .tile {
   display: grid;
   align-content: space-between;
@@ -107,42 +71,18 @@
 .tile--5 { background: var(--tile-5-bg, var(--card-5-bg)); --dark: var(--card-5-dark); color: var(--tile-5-ink, var(--card-ink)); border-color: transparent; }
 .tile--3 { background: var(--tile-3-bg, var(--card-3-bg)); --dark: var(--card-3-dark); color: var(--tile-3-ink, var(--card-ink)); border-color: transparent; }
 
-/* ---- fold: a sticky-note corner on any card (decorative) ----
-   No border. The card's outline follows its border box, so it ran straight
-   across the squared bottom-right corner and cut through the fold's diagonal —
-   the corner read as a notch with a line through it rather than a lifted flap.
-   The COLOUR goes transparent rather than the border going to 0, so the box
-   keeps its geometry and a fold card still measures the same as the cards
-   beside it. */
-.card--fold {
-  border-color: transparent;
-  border-bottom-right-radius: 0;
-  background-image: linear-gradient(to top left,
-    var(--card-bg) 0 50%,   /* the card's own background, not --surface (the page's) — a mismatch here drew a seam at the flap's edge */
-    color-mix(in srgb, currentColor 18%, var(--card-bg)) 50% 100%);
-  background-repeat: no-repeat;
-  background-position: bottom right;
-  background-size: var(--sp-8) var(--sp-8);
-  background-origin: border-box;  /* the flap sits on the true corner, not inside the (transparent) border */
-  /* the corner is CUT: the triangle under the flap shows what is behind the card. Painted in the card's own colour it
-     read as the square corner of a second card underneath (Lh 2026-09-23). The polygon reaches 3rem past the other
-     edges so a coloured palette's shadow is not clipped there. */
-  clip-path: polygon(-3rem -3rem, calc(100% + 3rem) -3rem, calc(100% + 3rem) calc(100% - var(--sp-8) - 3rem),
-                     calc(100% - var(--sp-8) - 3rem) calc(100% + 3rem), -3rem calc(100% + 3rem));
-}
-
 /* ---- wave: audio waveform stand-in for voice rows ----
    <span class="wave"></span> — sits in a .row__body, fills the width */
 .wave {
   /* only WHOLE bars show (Lh 2026-09-23 — a clipped last bar read thinner): the columns are as many whole bar-widths as fit
      (auto-fill), spread edge to edge; bars that do not fit go to rows of no height, clipped away */
   display: grid;
-  grid-template-columns: repeat(auto-fit, var(--wave-bar-width, 0.125rem)); /* auto-FIT: columns no bar fills collapse, so a wide row still spreads its bars edge to edge */
+  grid-template-columns: repeat(auto-fit, var(--wave-bar-width, var(--hairline-w))); /* auto-FIT: columns no bar fills collapse, so a wide row still spreads its bars edge to edge */
   grid-template-rows: 100%;
   grid-auto-rows: 0;
   justify-content: space-between;
   align-items: center;
-  column-gap: var(--wave-gap, 0.125rem);
+  column-gap: var(--wave-gap, var(--hairline-w));
   height: var(--wave-h, var(--icon));
   width: 100%;
   overflow: hidden;
@@ -168,7 +108,6 @@
 }
 .mosaic > :first-child { grid-row: span 2; }
 .mosaic > * { min-height: 0; border-radius: 0; } /* opacity/border-width here were no-ops: .ph restates its own below, and nothing else in a mosaic carries either by default */
-.mosaic > .ph { opacity: var(--off); border-width: var(--border-w); }
 .mosaic > img { width: 100%; height: 100%; object-fit: cover; }
 
 /* ---- postcard: a member's introduction in the shape of a cover card — the photo fills it,
@@ -226,8 +165,7 @@
 .postcard__turn:focus-visible { outline-offset: calc(-1 * var(--sp-1)); } /* the ring inside the card's edge */
 /* the front: the photo (or the wireframe box) fills it; the band reads on a scrim */
 .postcard__front { background: var(--postcard-front-bg, var(--card-3-bg)); --dark: var(--card-3-dark); color: var(--postcard-front-ink, var(--card-ink)); }
-.postcard__front .postcard__turn > img,
-.postcard__front .postcard__turn > .ph {
+.postcard__front .postcard__turn > img {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -241,7 +179,7 @@
   content: "";
   position: absolute;
   inset: 0;
-  z-index: 1;
+  z-index: var(--z-over);
   pointer-events: none;
   background: linear-gradient(to top, var(--scrim), transparent 45%);
 }
@@ -257,7 +195,7 @@
    Taps between its words fall through to the turn; its buttons take their own. */
 .postcard__band {
   position: relative;
-  z-index: 2;
+  z-index: var(--z-over-2);
   display: flex;
   align-items: end;
   gap: var(--postcard-band-gap, var(--sp-3));
@@ -267,9 +205,10 @@
 .postcard__band > * { pointer-events: auto; }
 .postcard__words { display: grid; gap: var(--postcard-words-gap, var(--sp-1)); flex: 1; min-width: 0; pointer-events: none; }
 .postcard__front .postcard__band { --accent: var(--postcard-front-ink, var(--card-ink)); --accent-dark: calc(1 - var(--dark)); }
-.postcard__band .icon-btn[aria-pressed="true"] .icon { fill: currentColor; }
 /* a voice note on the back: no words to read — its timeline (a Progress), its length and the control to hear it
    under them, at the middle over the turn, on the face's inset; the app plays and keeps the time */
-.postcard__voice { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; gap: var(--postcard-voice-gap, var(--sp-3)); padding: var(--postcard-face-pad, var(--card-pad-rest)); pointer-events: none; }
+.postcard__voice { position: absolute; inset: 0; z-index: var(--z-over-2); display: grid; align-content: center; justify-items: center; gap: var(--postcard-voice-gap, var(--sp-3)); padding: var(--postcard-face-pad, var(--card-pad-rest)); pointer-events: none; }
 .postcard__voice > * { pointer-events: auto; }
-.postcard__voice > .progress { justify-self: stretch; pointer-events: none; }
+
+/* ==== the tile a choice draws, picked (choice.css drives it with its input) (#62: a block is written in its own file) ==== */
+.tile--pick:has(:checked) { background: var(--accent); --dark: var(--accent-dark); color: var(--card-ink); border-color: transparent; }

package/css/numbers.css

@@ -28,13 +28,13 @@
   border-radius: 50%;
   background: conic-gradient(var(--accent) calc(var(--value) * 1%), var(--ink-tint) 0);
   /* masks only read alpha: currentColor = "opaque" without naming a color */
-  mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
-  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
+  mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - var(--px)), currentColor calc(100% - var(--_w)));
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - var(--px)), currentColor calc(100% - var(--_w)));
 }
 .ring__value { font: var(--ring-value-font, var(--type-stat)); letter-spacing: var(--track-display); }
 .ring__label { font: var(--ring-label-font, var(--type-caption)); color: var(--ring-label-ink, var(--card-muted)); }
 .ring--sm { --_size: var(--avatar-xl); --_w: var(--sp-3); }
-.ring--sm .ring__value { font: 800 var(--fs-2xl)/1 var(--font-display); }
+.ring--sm .ring__value { font: var(--fw-heavy) var(--fs-2xl) / var(--lh-solid) var(--font-display); }
 .ring--xs { --_size: var(--tap-sm); --_w: var(--dot-xs); } /* inline counter (step 3 of 5) */
 .ring--xs .ring__value { font: var(--type-caption); }
 
@@ -75,44 +75,31 @@
 }
 .track__step:first-child::before { display: none; }
 .track__step.is-done::before { background: var(--accent); }
-.track__step > .icon,
-.track__step > .track__dot {
-  width: var(--_step);
-  height: var(--_step);
+.track__step > .icon { --icon-size: var(--_step); --icon-pad: calc(var(--_step) * 7 / 32); --icon-radius: 50%; --icon-bg: var(--ink-rail); --icon-ink: var(--card-ink); }
+.track__step > .track__dot { /* a number in the round (TrackStep num) */
   flex: none;
-  padding: calc(var(--_step) * 7 / 32); /* the glyph = 18 in the 32 round */
   border-radius: 50%;
-  background: var(--ink-rail);
+  background: var(--ink-tint); /* a number is words: on the 30% rail it fell under 4.5:1 on a mid-dark track; the 12% tint is what every tone holds its ink on */
   color: var(--card-ink);
-}
-.track__step > .track__dot { background: var(--ink-tint); } /* a number is words: on the 30% rail it fell under 4.5:1 on a mid-dark track; the 12% tint is what every tone holds its ink on */
-.track__step > .track__dot { /* a number in the round (TrackStep num) */
   display: grid; place-items: center; box-sizing: border-box;
-  font: var(--track-dot-font, var(--type-caption)); line-height: 1; font-variant-numeric: tabular-nums;
+  font: var(--track-dot-font, var(--type-caption)); line-height: var(--lh-solid); font-variant-numeric: tabular-nums;
   width: var(--track-dot-size, 1.877em); height: var(--track-dot-size, 1.877em); /* em, not rem (Lh 2026-10-03, as the SheetSteps' number and the StackSheet's count): the round is cut from ITS OWN
      number's size — 1.877em of a 17px caption = the 32px of an icon's round; at a larger text it grows with its number, and the pill with it */
   padding: 0 0 var(--track-dot-lift, 0.1em); /* the room UNDER the number lifts it onto the round's middle: a digit has no descender */
 }
-.track__step.is-done > .icon,
+.track__step.is-done > .icon { --icon-bg: var(--accent); --icon-ink: var(--on-accent); }
 .track__step.is-done > .track__dot { background: var(--accent); color: var(--on-accent); }
 
 /* ---- band: data card — 2-line label · giant number · footnote ----
    <article class="card card--band"><span class="band__label">Hours<br>banked</span><span class="band__num">18</span><span class="band__foot">this week</span></article> */
-.card--band {
-  grid-template-columns: 1fr auto;
-  grid-template-areas: "label num" "foot num";
-  align-items: end;
-  gap: var(--sp-2) var(--sp-4);
-  min-height: var(--card-band-min-h, var(--tile-h));
-}
-.band__label { grid-area: label; align-self: start; font: var(--band-label-font, var(--type-label)); font-size: var(--band-label-font-size, var(--fs-body)); line-height: 1.2; }
+.band__label { grid-area: label; align-self: start; font: var(--band-label-font, var(--type-label)); font-size: var(--band-label-font-size, var(--fs-body)); line-height: var(--lh-label); }
 .band__num {
   grid-area: num;
-  font: 800 var(--fs-giant) / 0.9 var(--font-display);
+  font: var(--fw-heavy) var(--fs-giant) / var(--lh-band) var(--font-display);
   letter-spacing: var(--track-display);
   font-variant-numeric: tabular-nums;
 }
-.band__num small { font-size: 0.5em; font-weight: 700; margin-right: 0.1em; } /* unit or % */
+.band__num small { font-size: 0.5em; font-weight: var(--fw-bold); margin-right: 0.1em; } /* unit or % */
 .band__foot { grid-area: foot; font: var(--band-foot-font, var(--type-caption)); color: var(--band-foot-ink, var(--card-muted)); }
 /* band stack: ONE card boundary; bands are frameless inside it, a hairline
    between each. Bands may still carry slot tints (card--2 / card--3). */
@@ -122,8 +109,6 @@
   border-radius: var(--band-stack-radius, var(--r-card));
   overflow: hidden;
 }
-.band-stack > .card--band { border: 0; border-radius: 0; box-shadow: none; }
-.band-stack > .card--band + .card--band { border-top: var(--border-w) solid var(--hairline); }
 
 /* ---- dotgrid: progress over time as dots — --total, --done, --cols ----
    one element, no children:
@@ -157,7 +142,7 @@
   );
 }
 /* no round(): show the grid without the done fill rather than a broken shape */
-@supports not (width: round(up, 1px, 1px)) {
+@supports not (width: round(up, 0.0625rem, 0.0625rem)) {
   .dotgrid::before { display: none; }
 }
 /* ---- picker: horizontal snap picker, centre value big ----
@@ -202,7 +187,7 @@
 .picker__unit { font: var(--picker-unit-font, var(--type-caption)); color: var(--picker-unit-ink, var(--card-muted)); }
 /* the scrolled-to item lights up by position — no JS */
 @supports (animation-timeline: view(x)) {
-  .picker__item { animation: picker-focus linear both; animation-timeline: view(x); }
+  .picker__item { animation: picker-focus var(--ease-linear) both; animation-timeline: view(x); }
   @keyframes picker-focus {
     0%, 100% { color: var(--_rest); }
     45%, 55% { color: var(--card-ink); }
@@ -228,7 +213,7 @@
 
 /* ---- bars: three or four bars with a count on top — the glance chart ----
    <div class="bars"><div class="bar" style="--v: 16"><span>+16</span></div>… --max on the parent */
-.bars { --max: 20; --_h: 5rem; display: flex; align-items: end; gap: var(--bars-gap, var(--sp-2)); height: calc(var(--_h) + var(--sp-8)); }
+.bars { --max: 20; --_h: calc(var(--tap-base) * 5 / 3); display: flex; align-items: end; gap: var(--bars-gap, var(--sp-2)); height: calc(var(--_h) + var(--sp-8)); }
 .bar {
   flex: 1;
   min-width: 0;
@@ -238,7 +223,7 @@
   gap: var(--bar-gap, var(--sp-1));
   height: 100%;
   font: var(--bar-font, var(--type-caption));
-  font-weight: 700;
+  font-weight: var(--fw-bold);
 }
 .bar::after {
   content: "";
@@ -254,8 +239,7 @@
    <span class="spinner" role="status"><svg class="icon">…loader-circle…</svg>Loading…</span>
    The ring turns; words beside it are optional and take the caption's look. Still when motion is reduced. */
 .spinner { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); vertical-align: middle; font: var(--type-caption); color: var(--spinner-ink, currentColor); }
-.spinner > .icon { flex: none; }
-@media (prefers-reduced-motion: no-preference) { .spinner > .icon { animation: turn 0.9s linear infinite; } } /* `turn`: tokens.css */
+@media (prefers-reduced-motion: no-preference) { .spinner > .icon { --icon-spin: turn var(--motion-spin) var(--ease-linear) infinite; } } /* `turn`: tokens.css */
 
 /* ---- progress: one straight line, the done share solid, the rest faint (Lh 2026-09-22) — a voice note's
    timeline, a download, a step count as a line. <div class="progress" role="progressbar" style="--progress-at: 0.4"></div>
@@ -272,3 +256,24 @@
   background-size: calc(var(--progress-at, 0) * 100%) 100%;
   background-repeat: no-repeat;
 }
+
+/* ---- where it sits in what step.css draws (docs/reference.md rule 15) ---- */
+/* a TRACK as the screen's TOP (Lh 2026-10-03): the walk's progress stands where a bar would, a row of the column, in the screen's
+   inset — and it never touches what comes up under it: the step (and so a sheet at full) starts --track-top-gap below it. That
+   room is the track's own, not the screen's gap; --track-top-lead is the air over it, under the status bar. Both = the screen's side inset (16): the pill
+   stands the same distance from everything around it (Lh 2026-10-03: 8 over was too little, 24 under too much). */
+.screen--fill > .track:first-child {
+  flex: none;
+  margin-top: var(--track-top-lead, var(--sp-4));
+  margin-bottom: calc(var(--track-top-gap, var(--sp-4)) - var(--screen-gap));
+}
+/* …and over a STAGE (a map behind a sheet, Lh 2026-10-03): the stage is the whole screen, so the track is a LAYER on it — the map
+   shows around the pill — and the stage keeps the track's line free itself: a sheet at full stops --track-top-gap under the
+   track, as in a step. --top-h is the track's own height, measured by Screen (a numbered track grows with the text). */
+.screen--fill > .track:first-child:has(+ .sheet-stage) {
+  position: absolute; z-index: var(--z-over);
+  inset: calc(var(--safe-top) + var(--track-top-lead, var(--sp-4))) var(--screen-pad) auto;
+  margin: 0;
+}
+/* ---- where it sits in what media.css draws (docs/reference.md rule 15) ---- */
+.postcard__voice > .progress { justify-self: stretch; pointer-events: none; }

package/css/palette.css

@@ -1,5 +1,5 @@
 /* ============================================================
-   cardds/palette.css — COLOR SETTINGS. The only file you tune.
+   cardds/palette.css — the palettes cardds ships. A project tunes its own theme.css (theme.template.css), never this file.
    Apply with <html data-palette="clay"> (or <body>).
    No attribute = wireframe grayscale from tokens.css.
    Each palette overrides role tokens only — components never change.

package/css/people.css

@@ -21,12 +21,12 @@
   font: var(--avatar-font, var(--type-label));
   font-size: calc(var(--_size) * 0.3);
   text-transform: uppercase;
-  letter-spacing: 0.02em;
+  letter-spacing: var(--track-loose);
   position: relative;
   text-decoration: none; /* .avatar works as <a> too */
 }
 .avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
-.avatar > .icon { width: 50%; height: 50%; }
+.avatar > .icon { --icon-size: 50%; }
 .avatar--sm { --_size: var(--avatar-sm); }
 .avatar--lg { --_size: var(--avatar-lg); }
 .avatar--xl { --_size: var(--avatar-xl); } /* sheet head icon ring */
@@ -42,7 +42,7 @@
   inset: calc(-0.55 * var(--_size));
   border-radius: 50%;
   background: repeating-radial-gradient(circle, transparent 0 calc(var(--_size) * 0.5), currentColor calc(var(--_size) * 0.5) calc(var(--_size) * 0.5 + var(--border-w)), transparent calc(var(--_size) * 0.5 + var(--border-w)) calc(var(--_size) * 0.68));
-  opacity: 0.25;
+  opacity: var(--fade-faint);
   pointer-events: none;
 }
 
@@ -51,11 +51,6 @@
 .avatar-stack { display: inline-flex; align-items: center; }
 .avatar-stack > .avatar { box-shadow: 0 0 0 var(--sp-1) var(--card-bg, var(--surface)); }
 .avatar-stack > .avatar + .avatar { margin-left: calc(-1 * var(--sp-3)); }
-/* a stamp in the stack is the stamp's small size (--stamp-sm-size: one rule in stamp.css, 48 × 60), lapped like the heads. Measured 2026-10-11 in a Row's
-   lead with a title, a meta line and an end button: at 375 the meta line breaks in two, accepted by Lh (a lap of 16 would hold it; the lap stays 8)
-   <span class="avatar-stack"><span class="stamp stamp--bare">…</span><span class="stamp stamp--bare">…</span><span class="avatar-stack__more">+9</span></span> */
-.avatar-stack > .stamp { flex: none; margin-inline: 0; }
-.avatar-stack > .stamp + .stamp { margin-left: calc(-1 * var(--sp-2)); }
 /* more: the count that trails the stack — plain words on the ground, title size so it reads at arm's length (the accent "+7" avatar is the small, framed way) */
 .avatar-stack__more { margin-left: var(--avatar-stack-more-gap, var(--sp-3)); font: var(--avatar-stack-more-font, var(--type-title)); color: var(--avatar-stack-more-ink, inherit); white-space: nowrap; }
 

package/css/post.css

@@ -19,7 +19,7 @@
 .postmark {
   --_base: calc(var(--tap) * 1.75);
   position: relative;
-  z-index: 1;
+  z-index: var(--z-over);
   flex: none;
   display: grid;
   place-content: center;
@@ -34,7 +34,7 @@
   color: var(--postmark-ink, color-mix(in srgb, currentColor 72%, transparent));
   font: var(--postmark-font, var(--type-label));
   text-align: center;
-  rotate: var(--postmark-tilt, -10deg);
+  rotate: var(--postmark-tilt, calc(var(--tilt-base) * -10));
 }
 .postmark::after { /* the cancel lines that run on over the stamp */
   content: "";
@@ -59,9 +59,8 @@
   display: grid;
   width: var(--post-corner-stamp-w, var(--_w));
   aspect-ratio: 4 / 5;
-  rotate: var(--post-corner-stamp-tilt, 2deg);
+  rotate: var(--post-corner-stamp-tilt, calc(var(--tilt-base) * 2));
 }
-.post-corner__stamp > :is(.stamp, .stamp-place) { grid-area: 1 / 1; width: 100%; max-width: none; } /* the corner is the postcard's own size (72 × 90), outside the stamp's two sizes, by the owner's decision (2026-10-11); its box sizes the stamp, which fills it */
 
 /* ============================================================
    post-letter — READING one that arrived. The written side stood upright: the address half over the message half.
@@ -102,15 +101,15 @@
   min-height: 0;
   overflow: clip;
   visibility: hidden;
-  rotate: calc(-1 * var(--post-letter-tilt, 2deg));
+  rotate: calc(-1 * var(--post-letter-tilt, calc(var(--tilt-base) * 2)));
 }
-.post-letter__sheet--back { rotate: var(--post-letter-tilt, 2deg); } /* turned over, the lean is the other way */
+.post-letter__sheet--back { rotate: var(--post-letter-tilt, calc(var(--tilt-base) * 2)); } /* turned over, the lean is the other way */
 .post-letter--back > .post-letter__sheet--back,
 .post-letter--picture > .post-letter__sheet--picture { visibility: visible; }
 .post-letter:not(:has(> .post-letter__journey)) { --_room: 0rem; } /* no journey line: its room goes back to the sheet */
 .post-letter__journey { grid-area: 2 / 1; margin: var(--sp-3) 0 0; text-align: center; font: var(--type-caption); color: var(--post-letter-journey-ink, var(--on-surface-muted)); }
 
-/* the picture side: the print with its white margin, the place printed under it */
+/* the picture side: the print with its margin of paper, the place printed under it */
 .post-letter__sheet--picture {
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto;
@@ -129,7 +128,7 @@
 .post-letter__sheet--back { display: flex; flex-direction: column; gap: var(--post-letter-gap, var(--sp-4)); padding: var(--post-letter-pad, var(--sp-5)); }
 .post-letter__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-2); padding-block-end: var(--sp-4); border-block-end: var(--rule-w) solid var(--_rule); }
 .post-letter__to { display: grid; gap: var(--sp-2); min-width: 0; align-self: stretch; align-content: space-between; }
-.post-letter__kicker { font: var(--type-caption); color: var(--_muted); letter-spacing: 0.08em; }
+.post-letter__kicker { font: var(--type-caption); color: var(--_muted); letter-spacing: var(--track-caps); }
 .post-letter__lines { display: grid; gap: var(--sp-1); }
 .post-letter__line { display: block; padding-block: var(--sp-1); border-block-end: var(--border-w) solid var(--_rule); font: var(--type-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .post-letter__line--name { font: var(--type-title); }
@@ -142,7 +141,7 @@
   gap: var(--sp-3);
   font: var(--post-letter-hand-font, var(--type-h2));
   font-size: var(--post-letter-hand-font-size, var(--fs-lg));
-  line-height: var(--post-letter-hand-leading, 1.6);
+  line-height: var(--post-letter-hand-leading, var(--lh-hand));
 }
 .post-letter__message > p { margin: 0; }
 .post-letter__sign { align-self: flex-end; }
@@ -154,7 +153,7 @@
   inset-block-start: calc(var(--_peek) / 2);
   inset-inline-start: var(--sp-2);
   translate: 0 -50%;
-  z-index: 2;
+  z-index: var(--z-over-2);
   display: inline-flex;
   align-items: center;
   gap: var(--sp-2);
@@ -215,8 +214,8 @@
   background: transparent;
   color: inherit;
   font: var(--post-desk-hand-font, var(--type-h2));
-  line-height: calc(var(--fs-body) * var(--post-desk-leading, 1.7));
-  --_line: calc(var(--fs-body) * var(--post-desk-leading, 1.7));
+  line-height: calc(var(--fs-body) * var(--post-desk-leading, var(--lh-ruled)));
+  --_line: calc(var(--fs-body) * var(--post-desk-leading, var(--lh-ruled)));
   /* the ruled lines: one under every line of writing */
   background-image: linear-gradient(to bottom, transparent calc(100% - var(--border-w)), var(--_rule) 0);
   background-size: 100% var(--_line);
@@ -233,10 +232,10 @@
 /* the stamp box: empty it is a place of dots to press; pressed, the chosen stamp lies in it */
 .post-desk__slot { border: 0; background: transparent; color: inherit; }
 @media (prefers-reduced-motion: no-preference) {
-  .post-desk__slot > .stamp { animation: post-desk-stick var(--motion-quick) ease-out both; }
-  .post-desk .postmark { animation: strike var(--stamp-on-arrive-time, var(--motion-sheet)) ease-in both; } /* struck as a StampOn is (`strike`: tokens.css), in the same time */
+  .post-desk__slot > .stamp { --stamp-arrive: post-desk-stick var(--motion-quick) var(--ease-out) both; }
+  .post-desk .postmark { animation: strike var(--stamp-on-arrive-time, var(--motion-sheet)) var(--ease-in) both; } /* struck as a StampOn is (`strike`: tokens.css), in the same time */
 }
-@keyframes post-desk-stick { from { translate: 0 calc(-1 * var(--sp-8)); rotate: 14deg; opacity: 0; } }
+@keyframes post-desk-stick { from { translate: 0 calc(-1 * var(--sp-8)); rotate: calc(var(--tilt-base) * 14); opacity: 0; } }
 /* the other half's showing edge brings it across: a tap-wide strip out to the screen's edge */
 .post-desk__reach { position: absolute; inset-block: 0; width: var(--tap); border: 0; background: transparent; }
 .post-desk__reach--address { inset-inline-end: calc(-1 * var(--screen-pad)); }
@@ -266,7 +265,7 @@
   border-block-end: var(--rule-w) solid transparent;
   background: transparent;
 }
-.post-desk__pick > .stamp { rotate: var(--post-corner-stamp-tilt, 2deg); } /* in the tray a stamp keeps its words */
+.post-desk__pick > .stamp { --stamp-turn: var(--post-corner-stamp-tilt, calc(var(--tilt-base) * 2)); } /* in the tray a stamp keeps its words */
 .post-desk__pick[aria-pressed="true"] { border-block-end-color: var(--on-surface); }
 .post-desk__note { margin: 0; font: var(--type-caption); color: var(--post-desk-note-ink, var(--on-surface-muted)); min-height: 1.35em; }
 /* what stands where the card was, once it has left */
@@ -291,7 +290,7 @@
   margin-block-end: calc(var(--_e) - var(--_h));
   display: grid;
   grid-template-rows: var(--post-box-edge, var(--_edge)) minmax(0, 1fr);
-  transition: translate var(--motion-sheet) ease, rotate var(--motion-sheet) ease;
+  transition: translate var(--motion-sheet) var(--ease), rotate var(--motion-sheet) var(--ease);
 }
 .post-box {
   --_edge: calc(var(--sp-base) * 20);
@@ -306,8 +305,8 @@
 }
 .post-box:has(> .post-box__card.is-open:not(:last-child)) { padding-block-end: var(--_part); }
 .post-box__card:last-child { margin-block-end: 0; }
-.post-box__card:nth-child(3n + 1) { rotate: var(--post-box-lean, 0.6deg); }
-.post-box__card:nth-child(3n + 2) { rotate: calc(var(--post-box-lean, 0.6deg) * -0.8); }
+.post-box__card:nth-child(3n + 1) { rotate: var(--post-box-lean, calc(var(--tilt-base) * 0.6)); }
+.post-box__card:nth-child(3n + 2) { rotate: calc(var(--post-box-lean, calc(var(--tilt-base) * 0.6)) * -0.8); }
 .post-box__card.is-open { rotate: none; }
 .post-box__card.is-open ~ .post-box__card { translate: 0 var(--_part); }
 .post-box__edge {
@@ -334,3 +333,8 @@
 .post-box__card:not(.is-open) .postmark > span:last-child:not(:first-child) { display: none; }
 .post-box__card:not(.is-open) .postmark { box-sizing: border-box; place-content: start center; padding-block-start: calc(var(--_size) * 0.18); }
 @media (prefers-reduced-motion: reduce) { .post-box__card { transition: none; } }
+
+/* ---- the desk's card leaves as a card with `leave` does (card.css LEAVE): the same two knobs, the same time ---- */
+.post-desk__card { transition: translate var(--motion-sheet) var(--ease), rotate var(--motion-sheet) var(--ease); }
+.post-desk--sent .post-desk__card { --_y: calc(var(--leave-rise, 160%) * -1); rotate: var(--leave-turn, calc(var(--tilt-base) * -5)); }
+@media (prefers-reduced-motion: reduce) { .post-desk__card { transition: none; } }