@usableapp/cardds 0.7.66 → 0.7.68

package/dist/cardds.css

@@ -614,6 +614,28 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .card .t-muted { color: var(--card-muted); } /* muted follows the card's ink, not the surface's */
 /* .card--3 .t-muted (dim instead of --card-muted on the dark slot) is declared once in card.css, with the rest of that family */
 .t-caps  { text-transform: uppercase; }
+/* ---- mark: a highlighter stroke over a word INSIDE running text (a sender's name in a greeting) ----
+   <p class="t-body"><mark class="mark">ธนาคารเวลา</mark> ส่งแสตมป์ดวงแรกให้คุณ</p>
+   The words keep their ink and their size; the stroke is the signal washed thin, drawn as a pen would: unlike corners, the ink
+   darker at its ends and along its middle. It follows the words across a line break (each piece is its own stroke). Information, never a control. Green (ok) unless a tone says otherwise. */
+.mark {
+  --_bg: color-mix(in srgb, var(--signal-ok) 30%, transparent);
+  --_pool: color-mix(in srgb, var(--mark-bg, var(--_bg)) 75%, transparent); /* the same ink again, thinner: where it lies twice it reads darker, as wet ink does */
+  --_shape: 0.75em 0.3em 0.9em 0.35em / 0.4em 0.95em 0.35em 0.8em; /* four unlike corners: a stroke drawn by hand has no two ends alike */
+  background-color: var(--mark-bg, var(--_bg));
+  background-image:
+    linear-gradient(100deg, var(--_pool), transparent 0.55em),                    /* ink pools where the pen lands */
+    linear-gradient(280deg, var(--_pool), transparent 0.4em),                     /* and a little where it lifts */
+    linear-gradient(181deg, transparent 18%, var(--_pool) 52%, transparent 88%);  /* the nib presses harder along its middle */
+  color: var(--mark-ink, inherit);
+  padding-inline: var(--mark-pad-x, 0.3em);
+  border-radius: var(--mark-radius, var(--_shape));
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+.mark--warn { --_bg: color-mix(in srgb, var(--signal-warn) 30%, transparent); }
+.mark--error { --_bg: color-mix(in srgb, var(--signal-error) 30%, transparent); }
+.mark--info { --_bg: color-mix(in srgb, var(--signal-info) 30%, transparent); }
 .grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
 /* read, not shown (Lh 2026-09-23): words a screen reader needs — a page's h1 the design leaves out — kept in the page, taking no room.
    The 1px is the one the platform needs to keep it in the accessibility tree, not a length of the design. */
@@ -2056,6 +2078,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    It ends with the bottom layer's room, as a walk's page does: it scrolls only when the layer would cover its words
    (timebank onboard-04, 2026-09-27 — its last Link lay under the bar; Lh: same rule as the walk) */
 .step > .page { margin: var(--_lead, 0) var(--screen-pad) 0; padding-bottom: var(--bottom-h, 0rem); }
+/* --bleed: the page's box runs to the screen's edges, the inset is its own padding — what leans, slides or casts a shadow past
+   the inset (a postcard) is cut at the glass, not at the inset; a little room on top for a turned corner. Nothing pans sideways. */
+.step > .page--bleed { margin-inline: 0; padding-inline: var(--screen-pad); padding-block-start: var(--sp-2); overflow-x: hidden; }
 
 /* a WALK (Pages of Page) — Lh 2026-09-23, third call: no top; the picture and the words are ONE run that scrolls up together
    (the picture is never pinned). Each page starts at the screen's lead and ends with the same room under it — the lead as
@@ -2654,12 +2679,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    pointer, no press, --off. Zero specificity everywhere: a component's own rule always wins. A NEW control joins a list here. */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body) {
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach) {
   cursor: pointer;
   touch-action: manipulation;
   transition: scale var(--motion-press) ease-out;
 }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field) {
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge) {
   cursor: pointer;
   touch-action: manipulation;
   transition: opacity var(--motion-press) ease-out;
@@ -2673,27 +2698,27 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
 .sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
-/* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back) must not turn see-through:
+/* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back, a post letter's sheet over the other) must not turn see-through:
    it darkens a touch instead (--press-shade) */
-:where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn) { cursor: pointer; touch-action: manipulation; transition: filter var(--motion-press) ease-out; }
-:where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn):active { filter: brightness(var(--press-shade)); }
+:where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn, .post-letter__sheet:not(:has(.icon-btn:active))) { cursor: pointer; touch-action: manipulation; transition: filter var(--motion-press) ease-out; }
+:where(.sheet-stack--tap > .card:not(.is-open), .postcard__turn, .post-letter__sheet:not(:has(.icon-btn:active))):active { filter: brightness(var(--press-shade)); }
 /* the focus ring: on the control, or on the label that wraps a hidden input (chip, tile, file button, a row that is a label) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body):focus-visible,
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):focus-visible,
 :where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 /* disabled: no pointer anywhere; a control fades (a link and a row keep their own muted look) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field):is(:disabled, [aria-disabled="true"]),
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach, a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge):is(:disabled, [aria-disabled="true"]),
 :where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn, label.row):has(:disabled) { cursor: default; }
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
-  a.avatar, button.avatar, .menu__item, button.snackbar__body):not(.link):is(:disabled, [aria-disabled="true"]),
+  a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):not(.link):is(:disabled, [aria-disabled="true"]),
 :where(.chip--pick, .tile--pick, .mood__opt, .toggle-field, label.btn):has(:disabled) { opacity: var(--off); }
 .sheet-stack--tap > .card > .card__head > :is(h1, h2, h3):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); } /* the keyboard's way into a stack sheet */
 @media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; } } /* the give goes; the dim, the shade and the focus ring stay */
@@ -3624,16 +3649,37 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --_fold: var(--sticky-fold, var(--sp-6));
   --_min: calc(var(--tap) * 3);
   --_cap: calc(var(--tap) * 7);
+  --_tall: calc(var(--tap) * 4.4);
   position: relative;
   display: grid;
   box-sizing: border-box;
   width: fit-content;                              /* hugs its words… */
   min-width: var(--sticky-min-w, var(--_min));     /* …but a word alone is still a note */
   max-width: var(--sticky-max-w, 100%);
+  min-height: var(--sticky-min-h, var(--_tall));   /* every note is one height, the height of a note being written (Lh 2026-10-07); more words still grow it */
   padding: 0 var(--_fold) var(--_fold) 0; /* = the line above, written whole */
   background-clip: content-box;
-  filter: drop-shadow(var(--sticky-drop, 0 var(--sp-1) var(--sp-2) rgb(0 0 0 / 0.16))); /* drop-shadow follows the cut; a box-shadow would draw the square */
+  isolation: isolate; /* the two layers below stay under this note, over whatever is behind it */
 }
+/* the edge and the shadow: two layers UNDER the paper, each drawn in the note's own shape by a gradient — never a filter on the
+   note (Safari repainted a filtered note as a hard grey band once a stamp on it had moved; Lh 2026-10-07).
+   ::after is the EDGE: the shape one hairline larger all round, so a pale note still ends somewhere on a pale ground.
+   ::before is the SHADOW: the shape set a little down and in, softened on its own layer — short and close, paper lying on a table. */
+.sticky::before, .sticky::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+  border-radius: var(--sticky-radius, var(--sp-1));
+  background-image: linear-gradient(-45deg, transparent calc(var(--_fold) * 0.7071), var(--_ink) 0); /* the folded corner, cut */
+}
+.sticky::after { --_ink: var(--sticky-edge-bg, rgb(0 0 0 / 0.14)); inset: calc(-1 * var(--border-w)); }
+.sticky::before {
+  --_ink: var(--sticky-shadow-bg, rgb(0 0 0 / 0.28));
+  inset: var(--sp-1) var(--sp-0) calc(-1 * var(--sp-0)) var(--sp-0);
+  filter: blur(var(--sticky-shadow-blur, var(--sp-0)));
+}
+.sticky--flat::before, .sticky--flat::after { background: var(--_ink); }
 /* the tones — the names in src/sticky/tones.ts. A swatch of the chooser wears the same class. */
 .sticky--cotton   { background-color: var(--sticky-cotton-bg, #f3efe2); }
 .sticky--blush    { background-color: var(--sticky-blush-bg, #f6d5da); }
@@ -3675,6 +3721,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   background-color: var(--sticky-fold-bg, color-mix(in srgb, currentColor 14%, transparent)); /* a darker shade of whatever the paper is */
   box-shadow: calc(-1 * var(--sp-0)) calc(-1 * var(--sp-0)) var(--sp-1) rgb(0 0 0 / 0.08);
 }
+/* things stuck ON the note (a stamp, placed by hand): a layer over the whole paper. A tap between them still reaches the words under it. */
+.sticky__stuck { position: absolute; inset: 0; pointer-events: none; }
 .sticky--flat > .sticky__paper { clip-path: none; }
 .sticky--flat > .sticky__paper > .sticky__foot { padding-inline-end: 0; }
 
@@ -3692,8 +3740,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* --square: the note to write on — 1:1, as wide as its column up to a cap, in the middle */
 .sticky--square { width: 100%; max-width: var(--sticky-square-max-w, var(--_cap)); aspect-ratio: 1; margin-inline: auto; }
 
-/* --corner: a control stands ON the bottom-right corner, half outside. The paper is notched round it (a mask, so the
-   shadow follows the notch and no ground colour is needed); the note has no fold. */
+/* --corner: a control stands ON the bottom-right corner, half outside. The paper is notched round it (a mask, so no
+   ground colour is needed; the edge and the shadow are notched the same way); the note has no fold. */
 .sticky__corner {
   position: absolute;
   right: 0;
@@ -3710,6 +3758,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   max-width: calc(var(--sticky-max-w, 100%) - var(--_corner) / 2);
   margin: 0 calc(var(--_corner) / 2) calc(var(--_corner) / 2) 0;
 }
+.sticky--corner::before, .sticky--corner::after { background-image: radial-gradient(circle at 100% 100%, transparent calc(var(--_corner) / 2 + var(--sp-1)), var(--_ink) 0); }
 .sticky--corner > .sticky__paper {
   --_notch: calc(var(--_corner) / 2 + var(--sp-1));
   clip-path: none;
@@ -3775,7 +3824,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
      </div>
      <div class="sticky-post sticky-post--right">…</div>
    </div>
-   Two columns: the avatar, then everything else — so the notes start under the NAME. --right swaps the columns. */
+   Two columns: the avatar, then everything else. --right swaps the columns. */
 .sticky-thread { display: grid; gap: var(--sticky-thread-gap, var(--sp-6)); --_thread-gap: var(--sticky-thread-gap, var(--sp-6)); } /* --_thread-gap: the same value, for the rail to run through */
 .sticky-post {
   display: grid;
@@ -3793,6 +3842,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sticky-post__notes > .sticky { max-width: var(--sticky-post-max-w, 85%); } /* a note leaves the far side open, as a bubble does */
 .sticky-post__rail { display: none; grid-area: 2 / 1; justify-self: center; align-self: stretch; color: var(--sticky-thread-rail-ink, var(--on-surface-muted)); border-inline-start: var(--rule-w) dotted currentColor; margin-block-end: calc(-1 * var(--_thread-gap)); } /* runs on through the gap to the next avatar */
 .sticky-thread--rail > .sticky-post:not(:last-child) > .sticky-post__rail { display: block; }
+/* a chat (no rail): a note leans on its writer's own edge of the thread — it starts under the avatar, not under the name, so theirs and mine stand apart (Lh 2026-10-07: both sat in the middle). With a rail the notes keep clear of it, under the name. */
+.sticky-thread:not(.sticky-thread--rail) > .sticky-post > .sticky-post__notes { grid-column: 1 / -1; }
 .sticky-post--right { grid-template-columns: minmax(0, 1fr) auto; }
 .sticky-post--right > .sticky-post__who { grid-column: 2; }
 .sticky-post--right > .sticky-post__head { grid-column: 1; flex-direction: row-reverse; }
@@ -3800,6 +3851,519 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sticky-post--right > .sticky-post__notes { grid-column: 1; justify-items: end; }
 .sticky-post--right > .sticky-post__rail { grid-column: 2; }
 
+/* ---- css/stamp.css — stamp, empty place, album page, a stamp stuck on a surface ---- */
+/* cardds — stamps: the paper stamp, an empty place for one, the album page, a stamp stuck on a surface.
+   A stamp is its own paper, like a sticky note: it brings its ground and its ink, whatever card or palette it lies on.
+   Its pictures are the APP's (any node); cardds lays them out by how many there are. */
+
+/* ---- stamp: a perforated paper stamp, 4:5 — the picture fills the inner frame, the words sit ON it at the foot ----
+   <span class="stamp stamp--3">
+     <span class="stamp__paper">
+       <span class="stamp__pic sticky--custard">
+         <span class="stamp__art">…svg / img…</span>…
+         <span class="stamp__cap"><span class="stamp__words">กาแฟ · หมา</span><span class="stamp__name">ต้น</span></span>
+       </span>
+     </span>
+   </span>
+   Two boxes, as the sticky note: the OUTER one holds the size and the shadow, the PAPER is the one whose edge is
+   punched (a mask on the outer box would cut its own shadow off). The stamp is a size container: every inner length
+   is a share of its width (cqw), so it reads the same from a tray to a sheet. The ground wears a sticky tone class —
+   one list of tones (src/sticky/tones.ts), one set of tone knobs. */
+.stamp, .stamp-place {
+  --_cap: calc(var(--tap) * 4.5);
+  box-sizing: border-box;
+  width: 100%;                                  /* sized by its column… */
+  max-width: var(--stamp-max-w, var(--_cap));   /* …up to a cap */
+  aspect-ratio: 4 / 5;
+  margin-inline: auto;
+}
+.stamp {
+  position: relative;
+  display: block;
+  container-type: inline-size;
+  color: var(--stamp-ink, #141414);
+  filter: drop-shadow(var(--stamp-drop, 0 var(--sp-1) var(--sp-2) rgb(0 0 0 / 0.16))); /* drop-shadow follows the teeth; a box-shadow would draw the rectangle */
+}
+.stamp__paper {
+  --_pitch: calc(100cqw / 12);  /* one tooth: 12 across, 15 down — the holes land whole on every edge. Fewer and larger than a real stamp's: a small stamp's teeth must still read (Lh 2026-10-07; it was 20 × 25) */
+  --_hole: 2.6cqw;
+  position: absolute;
+  inset: 0;
+  background-color: var(--stamp-paper-bg, #fffdf8);
+  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - var(--_pitch)) calc(100% - var(--_pitch)) no-repeat,
+    radial-gradient(circle, transparent var(--_hole), #000 calc(var(--_hole) + 0.4cqw)) calc(var(--_pitch) / -2) calc(var(--_pitch) / -2) / var(--_pitch) var(--_pitch);
+  mask: linear-gradient(#000 0 0) center / calc(100% - var(--_pitch)) calc(100% - var(--_pitch)) no-repeat,
+    radial-gradient(circle, transparent var(--_hole), #000 calc(var(--_hole) + 0.4cqw)) calc(var(--_pitch) / -2) calc(var(--_pitch) / -2) / var(--_pitch) var(--_pitch);
+}
+.stamp__pic { position: absolute; inset: var(--stamp-frame, 8cqw); overflow: hidden; } /* the white frame round the picture; the ground is the tone class's */
+
+/* the pictures, placed by COUNT: where, how wide, how far turned — the layout is the stamp's look, never the app's.
+   A share of the picture area; the foot stays clear for the words. */
+.stamp__art { position: absolute; left: var(--_x); top: var(--_y); width: var(--_w); aspect-ratio: 1; translate: -50% -50%; rotate: var(--_r); }
+.stamp__art > * { display: block; width: 100%; height: 100%; }
+.stamp--1 .stamp__art { --_x: 50%; --_y: 40%; --_w: 72%; --_r: 0deg; }
+.stamp--2 .stamp__art:nth-child(1) { --_x: 37%; --_y: 27%; --_w: 58%; --_r: -6deg; }
+.stamp--2 .stamp__art:nth-child(2) { --_x: 63%; --_y: 56%; --_w: 54%; --_r: 8deg; }
+.stamp--3 .stamp__art:nth-child(1) { --_x: 30%; --_y: 21%; --_w: 50%; --_r: -8deg; }
+.stamp--3 .stamp__art:nth-child(2) { --_x: 71%; --_y: 31%; --_w: 46%; --_r: 7deg; }
+.stamp--3 .stamp__art:nth-child(3) { --_x: 47%; --_y: 58%; --_w: 54%; --_r: -2deg; }
+.stamp--4 .stamp__art:nth-child(1) { --_x: 29%; --_y: 19%; --_w: 44%; --_r: -8deg; }
+.stamp--4 .stamp__art:nth-child(2) { --_x: 71%; --_y: 24%; --_w: 42%; --_r: 7deg; }
+.stamp--4 .stamp__art:nth-child(3) { --_x: 31%; --_y: 57%; --_w: 42%; --_r: 5deg; }
+.stamp--4 .stamp__art:nth-child(4) { --_x: 70%; --_y: 60%; --_w: 44%; --_r: -6deg; }
+
+/* the words on the picture's foot: a small line, then the big name — one line each (clipped sideways only: Thai tone marks stand above the line box) */
+.stamp__cap { position: absolute; inset-inline: 5cqw; bottom: 3.5cqw; display: grid; gap: 0.4cqw; }
+.stamp__words, .stamp__name { display: block; min-width: 0; white-space: nowrap; overflow-x: clip; text-overflow: ellipsis; }
+.stamp__words { --_words: 4.8cqw; font: 500 var(--_words) / 1.3 var(--font-ui); font-size: var(--stamp-words-font-size, var(--_words)); }
+.stamp__name { --_name: 9.5cqw; font: 900 var(--_name) / 1.15 var(--font-display); font-size: var(--stamp-name-font-size, var(--_name)); }
+/* tiny (a tray, an album cell, a stamp stuck on a note): the small line goes, the name grows */
+/* --bare: the pictures alone, no words — a stamp stuck on something (a note, a postcard). The words belong to the album.
+   The pictures take the foot's room: each sits a little lower, so the group stands in the middle of the frame. */
+.stamp--bare .stamp__cap, .stamp-on .stamp__cap, .post-corner .stamp__cap { display: none; }
+.stamp--bare .stamp__art, .stamp-on .stamp__art, .post-corner .stamp__art { top: calc(var(--_y) + 9%); }
+
+@container (max-width: 6rem) {
+  .stamp__words { display: none; }
+  .stamp__name { --_name: 12cqw; }
+}
+
+/* --tilt: turned a little on its middle — the one stamp a start screen hands over */
+.stamp--tilt-left, .stamp--tilt-right { margin-block: var(--sp-4); } /* the turned corners and the shadow need room: a centre scrolls and would cut them */
+.stamp--tilt-left { rotate: calc(-1 * var(--stamp-tilt, 5deg)); }
+.stamp--tilt-right { rotate: var(--stamp-tilt, 5deg); }
+
+/* --tap: the whole stamp is the button (`onClick`); the press and the ring are the PRESS list's (actions.css) */
+.stamp--tap { appearance: none; border: 0; padding: 0; background: none; font: inherit; text-align: start; -webkit-tap-highlight-color: transparent; }
+
+/* a stamp handed over in a Centre: sized by the SCREEN (a little over half its width inside the inset), its greeting centred under it */
+.screen__centre:has(> .stamp) { justify-items: center; text-align: center; }
+.screen__centre > .stamp { max-width: var(--stamp-centre-max-w, 56cqw); }
+
+/* ---- stamp place: an empty place for a stamp — an album's gap, "make yours" ----
+   <span class="stamp-place">สร้าง</span> · <button class="stamp-place">…</button> · <span class="stamp-place stamp-place--faint"></span> */
+.stamp-place {
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  padding: var(--sp-1);
+  border: var(--rule-w) dashed var(--stamp-place-border, var(--on-surface-muted));
+  border-radius: var(--stamp-place-radius, var(--sp-2));
+  background: none;
+  color: var(--stamp-place-ink, var(--on-surface-muted));
+  font: var(--stamp-place-font, var(--type-caption));
+  text-align: center;
+}
+.card .stamp-place, .post-paper .stamp-place { border-color: var(--stamp-place-border, var(--card-muted)); color: var(--stamp-place-ink, var(--card-muted)); }
+.stamp-place--faint { border-color: var(--stamp-place-faint-border, var(--hairline)); }
+
+/* ---- stamp book: the album page — three stamps across on an album ground, who each is from under it ----
+   <div class="stamp-book">
+     <button class="stamp-cell"><span class="stamp">…</span><span class="stamp-cell__label">ต้น</span></button>
+     <span class="stamp-cell">…</span>
+     <span class="stamp-place stamp-place--faint" aria-hidden="true"></span>…
+   </div> */
+.stamp-book {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: start;
+  gap: var(--stamp-book-row-gap, var(--sp-4)) var(--stamp-book-col-gap, var(--sp-3));
+  padding: var(--stamp-book-pad, var(--sp-4));
+  border-radius: var(--stamp-book-radius, var(--r-media));
+  background-color: var(--stamp-book-bg, var(--ink-tint));
+}
+.stamp-cell {
+  position: relative;
+  display: grid;
+  gap: var(--stamp-cell-gap, var(--sp-2));
+  min-width: 0;
+  appearance: none;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: var(--stamp-cell-ink, inherit);
+  font: var(--stamp-cell-font, var(--type-caption));
+  text-align: center;
+  -webkit-tap-highlight-color: transparent;
+}
+.stamp-cell__label { display: block; min-width: 0; overflow-wrap: anywhere; }
+/* `on`: this one is in use (stuck on the note) — a filled disc with a check on its top corner */
+.stamp-cell__on {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: grid;
+  place-items: center;
+  width: var(--stamp-cell-on-size, var(--icon));
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background-color: var(--stamp-cell-on-bg, var(--accent));
+  color: var(--stamp-cell-on-ink, var(--on-accent));
+}
+.stamp-cell__on > .icon { width: 70%; height: 70%; }
+/* --strip: ONE line of small stamps that scrolls sideways — the tray a member picks from. No ground. */
+.stamp-book--strip {
+  --_strip: calc(var(--tap) * 1.5);
+  display: flex;
+  gap: var(--stamp-book-col-gap, var(--sp-3));
+  padding: var(--sp-2) 0;
+  border-radius: 0;
+  background: none;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+.stamp-book--strip::-webkit-scrollbar { display: none; }
+.stamp-book--strip > * { flex: none; width: var(--stamp-book-strip-w, var(--_strip)); }
+
+/* ---- stamp on: a stamp stuck on a surface where the member put it ----
+   <div class="sticky__stuck"><div class="stamp-on stamp-on--move" style="--stamp-on-x: 0.8; --stamp-on-y: 0.2; --stamp-on-turn: 6"><span class="stamp">…</span></div></div>
+   The surface is the nearest positioned box. --stamp-on-x / -y are the stamp's MIDDLE as a share of the surface (data, written by
+   the component); --move = the member may drag it (StampOn with `onAtChange`). */
+.stamp-on {
+  position: absolute;
+  left: calc(var(--stamp-on-x, 0.5) * 100%);
+  top: calc(var(--stamp-on-y, 0.5) * 100%);
+  width: var(--stamp-on-w, 27%);
+  translate: -50% -50%;
+  rotate: calc(var(--stamp-on-turn, 0) * 1deg);
+  pointer-events: auto; /* the layer it lies in lets a tap through to the surface; the stamp itself takes it */
+}
+.stamp-on > .stamp { max-width: none; }
+.stamp-on--move { will-change: transform; } /* its own layer: Safari left the stamp's shadow behind as a trail along the drag when it was painted with the note (seen on the simulator, 2026-10-07) */
+.stamp-on--move { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; transition: scale var(--motion-press) ease-out; }
+.stamp-on--move:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+.stamp-on.is-held { cursor: grabbing; z-index: 1; scale: 1.06; } /* lifted off the paper while the finger holds it */
+@media (prefers-reduced-motion: reduce) { .stamp-on.is-held { scale: 1; } }
+
+/* ---- css/post.css — the post: postmark, a postcard read (letter), written (desk), kept (box) ---- */
+/* cardds — the post: a postcard read (post-letter), written (post-desk) and kept (post-box), the postmark, the card stock.
+   Not the `Postcard` of media.css (a member's cover card that flips) — nothing here flips, and no class is shared with it.
+   The written side is the postcard; the corner — a stamp, the postmark struck over its edge — proves the journey. The stamp is
+   always a `Stamp` (stamp.css), handed over by the app. */
+
+/* ---- post-paper: the card stock. Its own ground and ink, wherever it lies; its parts read --_muted and --_rule ---- */
+.post-paper {
+  background: var(--post-paper-bg, var(--card-1-bg));
+  color: var(--post-paper-ink, var(--card-1-ink));
+  border-radius: var(--post-paper-radius, var(--sp-2));
+  box-shadow: var(--post-paper-shadow, var(--shadow-card));
+  --_muted: var(--post-paper-muted-ink, var(--card-muted));
+  --_rule: var(--post-paper-rule-ink, var(--ink-rail));
+}
+
+/* ---- postmark: the round mark struck by the post — where, when — two rings, turned a little, its cancel lines running on
+   <div class="postmark"><span>จันทบุรี</span><span>12 เม.ย.</span></div> ---- */
+.postmark {
+  --_base: calc(var(--tap) * 1.75);
+  position: relative;
+  z-index: 1;
+  flex: none;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  width: var(--postmark-size, var(--_base));
+  --_size: var(--postmark-size, var(--_base));
+  aspect-ratio: 1;
+  border: var(--rule-w) solid currentColor;
+  border-radius: 50%;
+  outline: var(--border-w) solid currentColor;
+  outline-offset: calc(-1 * var(--sp-1) - var(--rule-w));
+  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);
+}
+.postmark::after { /* the cancel lines that run on over the stamp */
+  content: "";
+  position: absolute;
+  inset-inline-start: 100%;
+  inset-block-start: 28%;
+  width: 46%;
+  height: calc(var(--sp-3) * 2 + var(--rule-w));
+  background: repeating-linear-gradient(to bottom, currentColor 0 var(--rule-w), transparent var(--rule-w) var(--sp-3));
+}
+.postmark > span { display: block; white-space: nowrap; }
+
+/* ---- post-corner: the corner that proves the journey — the stamp, and the postmark struck over its edge
+   <div class="post-corner"><div class="postmark">…</div><span class="post-corner__stamp"><span class="stamp">…</span></span></div>
+   A stamp stuck here shows its pictures only, as one in a `.stamp-on` does (stamp.css `--bare`): the words belong to the album. ---- */
+.post-corner { display: flex; align-items: flex-end; justify-content: flex-end; flex: none; }
+.post-corner > .postmark { margin-inline-end: calc(var(--_size) * -0.4); margin-block-end: calc(var(--sp-2) * -1); }
+.post-corner__stamp {
+  --_w: calc(var(--sp-2) * 9);
+  position: relative;
+  flex: none;
+  display: grid;
+  width: var(--post-corner-stamp-w, var(--_w));
+  aspect-ratio: 4 / 5;
+  rotate: var(--post-corner-stamp-tilt, 2deg);
+}
+.post-corner__stamp > :is(.stamp, .stamp-place) { grid-area: 1 / 1; max-width: none; }
+
+/* ============================================================
+   post-letter — READING one that arrived. The written side stood upright: the address half over the message half.
+   The picture is the other sheet; the tab over the pair brings it forward. Two rigid sheets changing places —
+   PostLetter swings the one in front to its edge, then the other in (Web Animations; nothing with reduced motion).
+   <div class="post-letter post-letter--picture">
+     <div class="post-letter__sheet post-letter__sheet--picture post-paper">
+       <div class="post-letter__pic">…</div><p class="post-letter__caption">…</p>
+       <div class="post-letter__voice"><button class="icon-btn icon-btn--invert">…</button><span class="post-letter__time">0:12</span></div>
+     </div>
+     <article class="post-letter__sheet post-letter__sheet--back post-paper" inert>
+       <header class="post-letter__head">
+         <div class="post-letter__to"><span class="post-letter__kicker">…</span>
+           <span class="post-letter__lines"><span class="post-letter__line post-letter__line--name"><small>ถึง</small>ฝน</span><span class="post-letter__line">…</span></span></div>
+         <div class="post-corner">…</div>
+       </header>
+       <div class="post-letter__message"><p>…</p><p class="post-letter__sign">…</p></div>
+     </article>
+     <button class="post-letter__turn">…icon…<span>พลิกดูด้านหลัง</span></button>
+     <p class="post-letter__journey">…</p>
+   </div>
+   ============================================================ */
+.post-letter {
+  --_room: calc(var(--tap) + var(--sp-5));
+  position: relative;
+  display: grid;
+  padding-block-start: var(--post-letter-peek, var(--tap));
+  --_peek: var(--post-letter-peek, var(--tap));
+  /* as wide as leaves the 2:3 sheet, the tab and the journey line whole above the bottom layer */
+  width: min(100%, calc((100cqh - var(--bottom-h, 0rem) - var(--_peek) - var(--sp-6) - var(--post-letter-journey-room, var(--_room))) * 2 / 3));
+  margin-inline: auto;
+}
+.post-letter__sheet {
+  position: relative;
+  grid-area: 1 / 1;
+  aspect-ratio: 2 / 3;
+  min-width: 0;
+  min-height: 0;
+  overflow: clip;
+  visibility: hidden;
+  rotate: calc(-1 * var(--post-letter-tilt, 2deg));
+}
+.post-letter__sheet--back { rotate: var(--post-letter-tilt, 2deg); } /* 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 */
+.post-letter__sheet--picture {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  gap: var(--sp-2);
+  padding: var(--post-letter-picture-pad, var(--sp-3));
+  --_pad: var(--post-letter-picture-pad, var(--sp-3));
+}
+.post-letter__pic { min-height: 0; border-radius: var(--sp-1); overflow: clip; }
+.post-letter__pic > * { display: block; width: 100%; height: 100%; object-fit: cover; }
+.post-letter__caption { margin: 0; min-height: 1.35em; font: var(--type-caption); color: var(--_muted); }
+/* the voice on the picture side: the play button over the print's corner, its time under it in the margin */
+.post-letter__voice { position: absolute; inset-block-end: var(--_pad); inset-inline-end: calc(var(--_pad) + var(--sp-2)); display: grid; justify-items: center; gap: var(--sp-2); cursor: auto; }
+.post-letter__time { font: var(--type-caption); font-variant-numeric: tabular-nums; color: var(--_muted); }
+
+/* the written side */
+.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__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); }
+.post-letter__line > small { font: var(--type-caption); color: var(--_muted); margin-inline-end: var(--sp-2); }
+.post-letter__message {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  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);
+}
+.post-letter__message > p { margin: 0; }
+.post-letter__sign { align-self: flex-end; }
+
+/* the tab: the showing edge of the sheet behind is the control that brings it forward. A chip in the strip over the pair;
+   its tap target is the strip's whole height (the ::after). The press and the ring are the PRESS list's (actions.css) */
+.post-letter__turn {
+  position: absolute;
+  inset-block-start: calc(var(--_peek) / 2);
+  inset-inline-start: var(--sp-2);
+  translate: 0 -50%;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: var(--sp-1) var(--sp-3);
+  border: 0;
+  border-radius: var(--r-chip);
+  background: var(--post-letter-tab-bg, var(--action-bg));
+  color: var(--post-letter-tab-ink, var(--action-ink));
+  font: var(--type-label);
+  box-shadow: var(--shadow-float);
+}
+.post-letter__turn::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; height: var(--_peek); translate: 0 -50%; }
+
+/* ============================================================
+   post-desk — WRITING one. The paper stays landscape and twice the screen; the phone looks at one half. Half of a 3:2 card
+   is a 3:4 panel, so each half fills the hand: write on the left, slide the paper, address and stamp the right.
+   The stamp box is a button; struck, the postmark lands on it; sent, the card leaves upward. Lives in a `Page bleed`.
+   <div class="post-desk post-desk--message post-desk--writing">
+     <div class="post-desk__window">
+       <div class="post-desk__card post-paper">
+         <section class="post-desk__half post-desk__half--message"><textarea class="post-desk__write"></textarea></section>
+         <section class="post-desk__half post-desk__half--address" inert>
+           <div class="post-desk__corner"><div class="post-corner">…postmark…<button class="post-corner__stamp post-desk__slot" aria-pressed="false">…</button></div></div>
+           <div class="post-desk__lines"><label class="post-desk__line"><span>ถึง</span><input></label>…</div>
+         </section>
+       </div>
+       <button class="post-desk__reach post-desk__reach--address"></button>
+       <div class="post-desk__gone">…</div>
+     </div>
+     <p class="post-desk__note">…</p>
+     <div class="post-desk__stamps" role="group"><button class="post-desk__pick" aria-pressed="false">…stamp…</button>…</div>
+   </div>
+   ============================================================ */
+.post-desk { container-type: inline-size; display: grid; gap: var(--post-desk-gap, var(--sp-3)); }
+.post-desk__window { position: relative; min-width: 0; }
+.post-desk__card {
+  --_peek: var(--post-desk-peek, var(--sp-6));
+  --_p: min(calc(100cqi - var(--_peek)), calc((100cqh + var(--kb, 0rem) - var(--bottom-h, 0rem) - var(--sp-12) * 2) * 0.75)); /* + --kb: the screen's box shrinks under a keyboard, the paper never does — what was written must still fit */
+  --_x: 0rem;
+  --_y: 0rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: calc(var(--_p) * 2);
+  aspect-ratio: 3 / 2;
+  translate: var(--_x) var(--_y);
+  transition: translate var(--motion-sheet) ease, rotate var(--motion-sheet) ease;
+}
+.post-desk--address .post-desk__card { --_x: calc(100cqi - var(--_p) * 2); }
+.post-desk--sent .post-desk__card { --_y: -160%; rotate: -5deg; }
+.post-desk__half { min-width: 0; min-height: 0; padding: var(--post-desk-pad, var(--sp-5)); display: flex; flex-direction: column; }
+.post-desk__half--address { border-inline-start: var(--rule-w) solid var(--_rule); gap: var(--sp-4); }
+.post-desk__write {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  resize: none;
+  border: 0;
+  outline: none;
+  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));
+  /* 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);
+  caret-color: currentColor;
+}
+.post-desk__write::placeholder { color: var(--_muted); }
+.post-desk__corner { display: flex; justify-content: flex-end; }
+.post-desk__lines { display: grid; gap: var(--sp-3); margin-block-start: auto; padding-block-end: var(--sp-6); }
+.post-desk__line { display: grid; gap: var(--sp-0); border-block-end: var(--border-w) solid var(--_rule); }
+.post-desk__line:focus-within { border-block-end-color: currentColor; }
+.post-desk__line > span { font: var(--type-caption); color: var(--_muted); }
+.post-desk__line > input { width: 100%; min-width: 0; min-height: var(--tap); border: 0; outline: none; background: transparent; color: inherit; font: var(--type-title); }
+.post-desk__line > input::placeholder { color: var(--_muted); }
+/* the stamp box: empty it is a dashed place 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: post-desk-strike var(--motion-press) ease-in both; }
+}
+@keyframes post-desk-stick { from { translate: 0 calc(-1 * var(--sp-8)); rotate: 14deg; opacity: 0; } }
+@keyframes post-desk-strike { from { translate: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-6)); rotate: -24deg; 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)); }
+.post-desk__reach--message { inset-inline-start: calc(-1 * var(--screen-pad)); }
+.post-desk__reach:focus-visible { outline: var(--focus); outline-offset: calc(-1 * var(--sp-1)); }
+/* the sender's stamps to choose from, under the card */
+.post-desk__stamps { display: flex; gap: var(--post-desk-stamps-gap, var(--sp-4)); align-items: center; }
+.post-desk__pick {
+  display: grid;
+  place-items: center;
+  min-width: var(--tap);
+  min-height: var(--tap);
+  padding: var(--sp-1);
+  border: 0;
+  border-block-end: var(--rule-w) solid transparent;
+  background: transparent;
+}
+.post-desk__pick > .stamp { --_w: calc(var(--sp-2) * 9); width: var(--post-desk-pick-w, var(--_w)); max-width: none; rotate: var(--post-corner-stamp-tilt, 2deg); } /* 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 */
+.post-desk__gone { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--sp-2); }
+@media (prefers-reduced-motion: reduce) { .post-desk__card { transition: none; } }
+
+/* ============================================================
+   post-box — KEEPING many. The cards whole and landscape, standing one behind another; each shows its top edge: who, where,
+   when, the stamp and the postmark. Pressing an edge parts the box: every card in front slides down and the whole card is
+   there to read. The newest stands in front — the foot of the list, nearest the thumb.
+   <ul class="post-box">
+     <li class="post-box__card post-paper is-open">
+       <button class="post-box__edge" aria-expanded="true"><span class="post-box__from">แม่</span><span class="post-box__when">เชียงใหม่ · 3 ม.ค. 69</span></button>
+       <div class="post-corner" aria-hidden="true">…</div>
+       <div class="post-box__body"><p class="post-box__message">…</p><div class="post-box__to"><span>ถึง ฝน</span>…</div></div>
+     </li>…
+   </ul>
+   ============================================================ */
+/* the card first: its edge is the knob's real reader — the box (below) hands the same length on to the parting */
+.post-box__card {
+  position: relative;
+  height: var(--_h);
+  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;
+}
+.post-box {
+  --_edge: calc(var(--sp-base) * 20);
+  --_e: var(--post-box-edge, var(--_edge));
+  --_h: calc(100cqi * 2 / 3);
+  --_part: calc(var(--_h) - var(--_e) + var(--sp-3));
+  container-type: inline-size;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+}
+.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.is-open { rotate: none; }
+.post-box__card.is-open ~ .post-box__card { translate: 0 var(--_part); }
+.post-box__edge {
+  display: grid;
+  align-content: center;
+  justify-items: start;
+  gap: var(--sp-0);
+  padding: var(--sp-2) calc(var(--tap) * 2.75) var(--sp-1) var(--sp-4);
+  border: 0;
+  border-radius: var(--post-paper-radius, var(--sp-2));
+  background: transparent;
+  color: inherit;
+  text-align: start;
+}
+.post-box__edge:focus-visible { outline-offset: calc(-1 * var(--sp-1)); }
+.post-box__from { font: var(--type-title); }
+.post-box__when { font: var(--type-caption); color: var(--_muted); white-space: nowrap; }
+.post-box__card > .post-corner { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-4); pointer-events: none; }
+.post-box__body { min-height: 0; display: grid; grid-template-columns: 5fr 4fr; padding: 0 var(--sp-4) var(--sp-3); }
+.post-box__message { margin: 0; padding-inline-end: var(--sp-3); font: var(--type-caption); font-family: var(--font-display); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; align-self: start; }
+.post-box__to { display: grid; align-content: end; gap: var(--sp-1); padding-inline-start: var(--sp-3); border-inline-start: var(--border-w) solid var(--_rule); min-width: 0; }
+.post-box__to > span { padding-block: var(--sp-1); border-block-end: var(--border-w) solid var(--_rule); font: var(--type-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* behind another card only the mark's top shows: the place alone, lifted clear of the next card's edge */
+.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; } }
+
 /* ---- css/media.css — cover card, quote, tile grid, fold, mosaic, wave ---- */
 /* ============================================================
    cardds/media.css — media & display inside cards: