*/
.ds-letter {
position: relative; width: min(34em, calc(100vw - 2 * var(--space-5))); padding: var(--space-7) var(--space-7) var(--space-6);
box-shadow: var(--shadow-paper); rotate: -1deg; border-radius: 2px;
/* the ruled lines over the paper's grain (the grain picture is opaque, so it goes underneath) */
background-image:
repeating-linear-gradient(180deg, transparent 0 calc(var(--leading-body) * var(--text-body) - 1px), color-mix(in srgb, var(--emo-sad) 22%, transparent) calc(var(--leading-body) * var(--text-body) - 1px) calc(var(--leading-body) * var(--text-body))),
var(--tex-paper);
background-size: 100% calc(var(--leading-body) * var(--text-body)), 512px;
background-position: 0 calc(var(--space-7) + 2.95em + 14px), 0 0; /* lines up with the body text's baselines */
font-size: var(--text-body); line-height: var(--leading-body);
}
.ds-letter::before { /* the pin hole the note hung from */
content: ""; position: absolute; left: 50%; top: var(--space-3); width: 7px; height: 7px; translate: -50% 0; border-radius: 50%;
background: radial-gradient(circle, var(--ink-faint), transparent 70%);
}
.ds-letter p { margin: 0; max-width: var(--measure); } /* no gaps between paragraphs: the text keeps to the ruled lines */
.ds-letter__title { margin: 0 0 calc(var(--leading-body) * var(--text-body) * .5); font-family: var(--font-title); font-weight: 400; font-size: var(--text-h2); line-height: 1.3; }
:lang(en) .ds-letter__title { font-family: var(--font-hand); font-weight: 600; font-size: 34px; }
.ds-letter__next { color: var(--ink-soft); }
.ds-letter__contact { margin-top: calc(var(--leading-body) * var(--text-body)) !important; }
.ds-letter__contact a { color: var(--emo-sad-ink); text-decoration: none; background: linear-gradient(var(--emo-sad-ink), var(--emo-sad-ink)) 0 100% / 100% 1px no-repeat; white-space: nowrap; }
.ds-letter__contact a:hover, .ds-letter__contact a:focus-visible { background-size: 100% 2px; outline: none; }
.ds-letter__sign { margin-top: var(--space-4) !important; text-align: right; font-family: var(--font-hand); font-weight: 600; font-size: 30px; line-height: 1; rotate: -3deg; }
/* ---- Photo string: the story collection on the wall -------------------------
A length of twine across the wallpaper between the cork board and the window, with little instant photos
hanging from it on wooden pegs: the stories most recently found, each photo its object on a wash of its
emotion's colour; a story not found yet shows the object's pencil draft (site/assets/objects/-sketch.webp,
tools/make_sketches.py) on plain paper. The photos sway gently, each in its own time, about their pegs. A tag
at the end says 收集册 and how many are found. Clicking any of it opens the album (.ds-album).
…
*/
.ds-photostring { position: absolute; container-type: inline-size; }
.ds-photostring__twine { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ds-photostring__twine path { fill: none; stroke: var(--umber); stroke-linecap: round; }
.ds-polaroid {
--emo: var(--paper-deep);
--pw: var(--polaroid-w, 15cqw);
position: absolute; width: var(--pw); aspect-ratio: 5 / 6; padding: calc(var(--pw) * .07) calc(var(--pw) * .07) 0; box-sizing: border-box; border: 0; cursor: pointer;
display: flex; flex-direction: column; align-items: center;
background: var(--tex-paper) 0 0 / 256px, var(--paper); background-blend-mode: multiply;
box-shadow: var(--shadow-rest); translate: -50% 0;
transform-origin: 50% -6%; animation: ds-sway 5.5s var(--ease-ink) var(--sway-delay, 0s) infinite alternate;
transition: scale var(--dur-base) var(--ease-spring);
}
.ds-polaroid::before { /* the wooden peg it hangs from */
content: ""; position: absolute; left: 50%; top: -14%; width: 12%; height: 26%; translate: -50% 0; border-radius: 2px;
background: linear-gradient(90deg, color-mix(in srgb, var(--umber) 85%, var(--ink)), var(--umber) 40%, color-mix(in srgb, var(--umber) 70%, var(--paper)));
box-shadow: 0 0 0 .6px var(--line-ghost);
}
.ds-polaroid img { /* the object on a wash of its colour */
display: block; flex: none; align-self: stretch; width: auto; aspect-ratio: 1; min-width: 0;
object-fit: contain; padding: calc(var(--pw) * .06); box-sizing: border-box; pointer-events: none; -webkit-user-drag: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--emo) 38%, var(--paper)), color-mix(in srgb, var(--emo) 18%, var(--paper)));
}
.ds-polaroid > span {
flex: 1; display: grid; place-items: center; width: 100%; font-family: var(--font-title); line-height: 1;
color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: max(11px, calc(var(--pw) * .13));
}
.ds-polaroid.is-missing img { background: var(--paper-deep); }
.ds-polaroid.is-missing > span { color: var(--ink-soft); font-family: var(--font-hand); }
.ds-polaroid:hover, .ds-polaroid:focus-visible { scale: 1.08; animation-play-state: paused; outline: none; }
@keyframes ds-sway { from { rotate: -2.2deg; } to { rotate: 2.2deg; } }
.ds-photostring__tag { position: absolute; } /* a .ds-tag hanging from the twine's end: 收集册 · 3/31 */
/* ---- Album: every story, collected ------------------------------------------
An open scrapbook over the desk (behind it the light --scrim). Index tabs stand up from its top edge: 收集 /
全部 (show what this visitor has found, or everything) and 图 / 文 (stamps, or every story as text to read
through). In 图, each page holds a grid of stamps: the object on a wash of its emotion colour, with a
perforated edge like the postcard's stamp, its pen name below in the brush font and its district in hand. A
story not found yet is its pencil draft on plain paper with 还没找到. In 文, the stories run on as a list:
a dot of the emotion colour, the name, 上海市 徐汇区 · the place, and the whole story. Any story opens its
postcard. Pages turn with the hand-drawn arrows at the bottom corners.
收集册
找到 12 / 31
…slots…
…
*/
.ds-album {
position: relative; width: min(1040px, calc(100vw - 2 * var(--space-5))); padding: var(--space-6) var(--space-6) var(--space-5);
border-radius: 4px; box-shadow: var(--shadow-paper), 0 0 0 1px var(--line-ghost);
}
.ds-album::after { /* the spine down the middle: a soft fold shadow and the stitches */
content: ""; position: absolute; left: 50%; top: var(--space-5); bottom: var(--space-5); width: 30px; translate: -50% 0; pointer-events: none;
background:
repeating-linear-gradient(180deg, transparent 0 14px, var(--line-ghost) 14px 22px) 50% 0 / 1.4px 100% no-repeat,
linear-gradient(90deg, transparent, color-mix(in srgb, var(--umber) 16%, transparent) 45%, color-mix(in srgb, var(--umber) 16%, transparent) 55%, transparent);
}
.ds-album__tabs { position: absolute; right: var(--space-6); top: 0; translate: 0 -100%; display: flex; gap: var(--space-4); }
.ds-album__tabs > div { display: flex; gap: 2px; }
.ds-album__tab {
border: 0; cursor: pointer; padding: 6px 14px 8px; border-radius: 6px 6px 0 0; font-family: var(--font-title); font-size: 17px; color: var(--ink-soft);
background: var(--tex-paper) 0 0 / 256px, var(--paper-deep); background-blend-mode: multiply; box-shadow: 0 -1px 0 var(--line-ghost) inset;
translate: 0 4px; transition: translate var(--dur-quick) var(--ease-paper);
}
.ds-album__tab[aria-pressed="true"] { color: var(--ink); translate: 0 0; background: var(--tex-paper) 0 0 / 256px, color-mix(in srgb, var(--tin-rose) 45%, var(--paper)); background-blend-mode: multiply; }
.ds-album__tab:focus-visible { outline: 1.5px dashed var(--line); outline-offset: 2px; }
:lang(en) .ds-album__tab { font-family: var(--font-hand); font-weight: 600; font-size: 19px; }
.ds-album__head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-4); }
.ds-album__title { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: var(--text-h2); }
.ds-album__count { margin: 0; font-family: var(--font-hand); font-size: 22px; color: var(--ink-soft); }
.ds-album__count b { font-family: var(--font-title); font-weight: 400; font-size: 26px; color: var(--tin-rose); }
:lang(en) .ds-album__title { font-family: var(--font-hand); font-weight: 600; font-size: 34px; }
.ds-album__spread { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.ds-album__page { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); align-content: start; } /* minmax(0, …): a long name (it doesn't wrap) is cut with … instead of widening its column and every stamp in it */
.ds-album__slot {
--emo: var(--paper-deep); --emo-ink: var(--ink-soft);
display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; padding: 0; background: none; cursor: pointer; color: var(--ink);
rotate: var(--tilt, 0deg); transition: translate var(--dur-base) var(--ease-spring), rotate var(--dur-base) var(--ease-spring);
}
.ds-album__stamp { /* perforated, like the postcard's stamp; the object on a wash of its colour */
position: relative; width: 100%; aspect-ratio: 5 / 6; display: grid; place-items: center;
}
.ds-album__stamp::before {
content: ""; position: absolute; inset: 0; box-shadow: var(--shadow-rest);
background: radial-gradient(closest-side, color-mix(in srgb, var(--emo) 40%, var(--paper)), color-mix(in srgb, var(--emo) 16%, var(--paper)) 85%), var(--paper);
/* holes only round the edge: the dots, and a solid piece over everything but a 5px rim */
-webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat, radial-gradient(circle at 50% 50%, transparent 2.4px, #000 2.7px) -5px -5px / 10px 10px;
mask: linear-gradient(#000 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat, radial-gradient(circle at 50% 50%, transparent 2.4px, #000 2.7px) -5px -5px / 10px 10px;
}
.ds-album__stamp img { position: relative; width: 82%; height: 82%; object-fit: contain; -webkit-user-drag: none; }
.ds-album__name { font-family: var(--font-title); font-size: 16px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-album__where { font-family: var(--font-body); font-size: 12px; line-height: 1; color: var(--emo-ink); letter-spacing: .04em; }
:lang(en) .ds-album__name { font-family: var(--font-hand-name); font-weight: 600; font-synthesis-weight: none; font-size: 18px; } /* pen names stay as written: Chinese ones in the brush font */
:lang(en) .ds-album__where { font-family: var(--font-hand); font-size: 15px; }
.ds-album__slot:hover, .ds-album__slot:focus-visible { translate: 0 -4px; rotate: 0deg; outline: none; }
.ds-album__slot:focus-visible .ds-album__stamp { outline: 1.5px dashed var(--line); outline-offset: 4px; }
.ds-album__slot.is-missing { cursor: default; }
.ds-album__slot.is-missing .ds-album__stamp::before { background: var(--paper); box-shadow: 0 0 0 1px var(--line-ghost); }
.ds-album__slot.is-missing .ds-album__name { font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); }
:lang(en) .ds-album__slot.is-missing .ds-album__name { font-family: var(--font-hand); font-size: 17px; }
.ds-album__slot.is-missing:hover { translate: none; }
/* 文: every story as text, set like a book: two columns of a fixed height, one on each page, flowing on to the next
spread; js turns the page by scrolling the list sideways by one spread (its width plus the gap). In 收集, only
the stories found so far, then a line saying how many still wait on the map. */
.ds-album__list {
height: min(60vh, 540px); columns: 2; column-gap: var(--space-8); column-fill: auto; overflow: hidden;
}
.ds-album__entry { margin: 0 0 var(--space-5); padding: 0 0 var(--space-4); border-bottom: 1.2px dashed var(--line-ghost); cursor: pointer; }
.ds-album__entry h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-family: var(--font-title); font-weight: 400; font-size: 20px; break-after: avoid; }
.ds-album__entry h3::before { /* a dot of the emotion's colour, like a drop of paint */
content: ""; flex: none; width: 12px; height: 12px; border-radius: 50% 45% 55% 48%; background: var(--emo); box-shadow: 0 0 0 2px color-mix(in srgb, var(--emo) 30%, transparent);
}
.ds-album__entry .ds-album__where { display: block; margin: 0 0 6px 22px; font-size: 13px; break-after: avoid; }
.ds-album__entry p { margin: 0; font-size: 15px; line-height: 1.8; orphans: 2; widows: 2; }
.ds-album__entry:hover h3, .ds-album__entry:focus-visible h3 { color: var(--emo-ink); }
.ds-album__entry:focus-visible { outline: 1.5px dashed var(--line); outline-offset: 4px; }
.ds-album__waiting { margin: 0; font-family: var(--font-hand); font-size: 20px; color: var(--ink-soft); }
:lang(zh) .ds-album__waiting { font-family: var(--font-body); font-size: 15px; }
.ds-album__foot { display: flex; align-items: center; justify-content: center; gap: var(--space-5); margin-top: var(--space-5); font-family: var(--font-hand); font-size: 20px; color: var(--ink-soft); }
.ds-album__turn { border: 0; background: none; cursor: pointer; padding: 4px 8px; color: var(--ink); font-family: var(--font-hand); font-size: 28px; line-height: 1; }
.ds-album__turn:disabled { opacity: .25; cursor: default; }
@media (max-width: 720px) {
.ds-album__spread { grid-template-columns: 1fr; gap: var(--space-5); }
.ds-album::after { display: none; }
.ds-album__page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-album__list { columns: 1; height: 62vh; overflow: auto; }
}
/* ---- Envelope: the way into the ending ---------------------------------------
A cream envelope lying on the stack of books at the front of the desk, after the visitor has come back from
the map once. Its flap is closed with a tin-rose wax seal marked 尾; a stamp (the folded map as a drawing, on a
wash of dusk lilac) in the corner, a round postmark 寄自上海 2026, and 给读到这里的你 written on the front.
Sizes follow --env-w. Parts, back to front: __back (the inside, seen once the flap is open), __letter (the
letter's top edge, inside), __front (the pocket), __flap (the triangle, two faces, turning on its top edge:
js turns it with --flap from 0deg closed to 180deg open: it lifts off the envelope from its point, towards the viewer,
and folds over upwards until it lies flat on the desk above the envelope, its fold along the envelope's top edge and
its point away from it, as a real flap does; past upright .is-open puts it behind the letter), __seal on the flap's point.
Opening: pull the seal up (or click), the seal pops, the flap lifts and folds over, the letter rises out and
becomes .ds-endletter, and the P.S. follows it; closing, both go back into the pocket.
给读到这里的你…尾
*/
.ds-envelope {
--ew: var(--env-w, 220px); --flap: 0deg;
position: relative; width: var(--ew); aspect-ratio: 16 / 10; display: block; border: 0; padding: 0; background: none; cursor: pointer;
perspective: calc(var(--ew) * 4); transform-style: preserve-3d; color: var(--ink);
}
.ds-envelope > span { position: absolute; display: block; }
.ds-envelope__back, .ds-envelope__front { inset: 0; border-radius: 3px; }
.ds-envelope__back { background: var(--tex-paper) 0 0 / 256px, var(--envelope-deep); background-blend-mode: multiply; }
.ds-envelope__letter { /* the top of the letter, inside, a little whiter than the envelope */
left: 7%; right: 7%; top: 6%; height: 60%; background: var(--tex-paper) 0 0 / 256px, var(--paper); background-blend-mode: multiply;
box-shadow: 0 0 0 .6px var(--line-ghost);
}
.ds-envelope__front {
background:
/* the pocket's two side folds and bottom fold, pencil lines from the bottom corners to the middle */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' preserveAspectRatio='none'%3E%3Cpath d='M1 99 L 80 47 L 159 99' fill='none' stroke='%233B3226' stroke-opacity='.28' stroke-width='.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M2 98 L 81 48.5 L 158 98.5' fill='none' stroke='%233B3226' stroke-opacity='.12' stroke-width='.7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
linear-gradient(170deg, transparent 52%, color-mix(in srgb, var(--envelope-deep) 60%, transparent) 100%),
var(--tex-paper) 0 0 / 256px, var(--envelope);
background-blend-mode: normal, normal, multiply, normal;
box-shadow: var(--shadow-rest), 0 0 26px 8px color-mix(in srgb, var(--paper) 55%, transparent); /* and a faint light round it on the desk */
/* the pocket: the whole front except a V cut down from the top, where the flap folds over */
clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
}
.ds-envelope__front::before { /* an airmail border: tin-rose and dusk-lilac stripes round the edge, painted on */
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .85;
background: repeating-linear-gradient(135deg, var(--tin-rose) 0 calc(var(--ew) * .028), transparent calc(var(--ew) * .028) calc(var(--ew) * .045), var(--lilac) calc(var(--ew) * .045) calc(var(--ew) * .073), transparent calc(var(--ew) * .073) calc(var(--ew) * .09));
-webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) content-box; -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) content-box; mask-composite: exclude;
padding: calc(var(--ew) * .028);
}
.ds-envelope__front::after { /* the pen outline round the envelope, two passes */
content: ""; position: absolute; inset: 0; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1.5 2.2 C 30 1.2, 70 2.6, 98.4 1.6 C 98.9 30, 97.8 70, 98.6 98.2 C 70 99.1, 30 97.9, 1.8 98.6 C 1 70, 2.3 30, 1.5 2.2' fill='none' stroke='%233B3226' stroke-opacity='.55' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.ds-envelope__to { /* the address, by hand, on the lower half */
position: absolute; left: 9%; bottom: 11%; max-width: 58%; font-family: var(--font-title); font-size: calc(var(--ew) * .062); line-height: 1.3; letter-spacing: .06em;
padding-bottom: 2px; background: linear-gradient(var(--line-ghost), var(--line-ghost)) 0 100% / 100% 1px no-repeat;
}
.ds-envelope__to i { display: block; font-family: var(--font-hand); font-style: normal; font-size: .9em; color: var(--ink-soft); letter-spacing: 0; }
:lang(en) .ds-envelope__to { font-family: var(--font-hand); font-weight: 600; font-size: calc(var(--ew) * .066); letter-spacing: 0; } /* small enough that its two lines stay under the seal */
.ds-envelope__stamp { /* a little perforated stamp in the top right corner, below the flap's edge */
position: absolute; right: 6%; bottom: 9%; width: 15%; aspect-ratio: 5 / 6; rotate: 4deg; display: grid; place-items: center;
}
.ds-envelope__stamp::before {
content: ""; position: absolute; inset: 0; box-shadow: var(--shadow-rest);
background: radial-gradient(closest-side, color-mix(in srgb, var(--lilac) 30%, var(--paper)), color-mix(in srgb, var(--lilac) 55%, var(--paper)));
-webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 6px) calc(100% - 6px) no-repeat, radial-gradient(circle at 50% 50%, transparent 1.5px, #000 1.8px) -3px -3px / 6px 6px;
mask: linear-gradient(#000 0 0) center / calc(100% - 6px) calc(100% - 6px) no-repeat, radial-gradient(circle at 50% 50%, transparent 1.5px, #000 1.8px) -3px -3px / 6px 6px;
}
.ds-envelope__stamp img { position: relative; width: 80%; height: 80%; object-fit: contain; }
.ds-envelope__postmark { /* the round postmark over the stamp's corner, in dusk lilac ink */
position: absolute; right: 16%; bottom: 13%; width: 17%; aspect-ratio: 1; rotate: -12deg; color: var(--emo-surprise-ink); opacity: .5;
display: grid; place-items: center; text-align: center; font-family: var(--font-title); font-size: calc(var(--ew) * .028); line-height: 1.1;
border-radius: 50%; box-shadow: 0 0 0 1px currentColor inset;
}
.ds-envelope__postmark i { display: block; font-family: var(--font-hand); font-style: normal; font-size: 1.1em; }
.ds-envelope__flap { /* the triangle over the top, hinged on the envelope's top edge */
left: 0; top: 0; width: 100%; height: 56%; transform-origin: 50% 0; transform: translateZ(var(--flap-z, 3px)) rotateX(var(--flap)); transform-style: preserve-3d;
}
.ds-envelope__flap > span { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ds-envelope__flap-out {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0.5 0.5 L 50 98 L 99.5 0.5' fill='none' stroke='%233B3226' stroke-opacity='.5' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--envelope-deep) 70%, transparent)),
var(--tex-paper) 0 0 / 256px, var(--envelope);
background-blend-mode: normal, normal, multiply, normal;
filter: drop-shadow(0 1px 1px rgba(110, 70, 40, .22));
}
/* the inside face: turned over on the flap, so its triangle is clipped the other way up; folded open, its wide side
then lies along the fold and its point away from the envelope (clipped like the outside it came out upside down) */
.ds-envelope__flap > .ds-envelope__flap-in { clip-path: polygon(0 100%, 100% 100%, 50% 0); }
.ds-envelope__flap-in { transform: rotateX(180deg); background: var(--tex-paper) 0 0 / 256px, var(--envelope-deep); background-blend-mode: multiply; }
.ds-envelope__seal { /* tin-rose wax, a little uneven, pressed with 尾 */
left: 50%; top: 52%; width: 15%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center;
border-radius: 48% 52% 46% 54% / 53% 47% 55% 45%;
background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--tin-rose) 55%, var(--paper)), var(--tin-rose) 45%, color-mix(in srgb, var(--tin-rose) 70%, var(--ink)) 100%);
box-shadow: 0 0 0 calc(var(--ew) * .012) color-mix(in srgb, var(--tin-rose) 80%, var(--ink)) inset, 1px 2px 3px rgba(110, 70, 40, .3);
font-family: var(--font-title); font-size: calc(var(--ew) * .07); line-height: 1; color: var(--paper); text-shadow: 0 -1px 0 rgba(0, 0, 0, .18);
}
:lang(en) .ds-envelope__seal { font-family: var(--font-hand); font-weight: 600; font-size: calc(var(--ew) * .08); }
.ds-envelope.is-open .ds-envelope__seal { opacity: 0; }
/* depth: closed, the flap lies on the pocket (z 3px) with the seal on it (4px); the letter (1px) is inside the
pocket (2px). Opening, js sets --flap-z to -1px once the flap has turned past upright, so it ends behind the letter. */
.ds-envelope__seal { transform: translateZ(4px); }
.ds-envelope.is-open { --flap-z: -1px; }
.ds-envelope__letter { transform: translateZ(1px); }
.ds-envelope__front { transform: translateZ(2px); }
.ds-envelope__letter { /* ruled lines on the letter, so it reads as a letter as it rises */
background:
repeating-linear-gradient(180deg, transparent 0 calc(var(--ew) * .05), color-mix(in srgb, var(--emo-sad) 20%, transparent) calc(var(--ew) * .05) calc(var(--ew) * .054)) 0 calc(var(--ew) * .06) / 100% calc(var(--ew) * .054),
var(--tex-paper) 0 0 / 256px, var(--paper);
background-blend-mode: normal, multiply, normal;
}
.ds-envelope:hover .ds-envelope__seal, .ds-envelope:focus-visible .ds-envelope__seal { animation: ds-pinwobble .6s var(--ease-spring); }
.ds-envelope:focus-visible { outline: 1.5px dashed var(--line); outline-offset: 6px; }
/* waiting on the desk: every few seconds the flap's point lifts a little off the seal, as if the letter wanted out */
.ds-envelope.is-waiting .ds-envelope__flap { animation: ds-flapbreath 7s var(--ease-ink) infinite; }
@keyframes ds-flapbreath { 0%, 80%, 100% { transform: translateZ(3px) rotateX(0deg); } 86% { transform: translateZ(3px) rotateX(16deg); } 92% { transform: translateZ(3px) rotateX(4deg); } } /* the point lifts off the envelope, towards the viewer */
/* ---- The closing letter: what the map adds up to ---------------------------------
Read at dusk. Two sheets side by side, as if taken out of the envelope and laid on the desk: the letter
(cream, a deckled edge, slightly turned) and the P.S., a smaller sheet of butter-yellow notepaper held to it
with a hand-drawn paperclip, its five notes numbered by hand. Real HTML text from content/ending.json. On a
narrow screen the P.S. comes under the letter. Each sheet scrolls inside itself if its text is long.
亲爱的读者：
…
…
同在上海的
Katherine
*/
.ds-ending { display: flex; align-items: flex-start; gap: var(--space-6); max-width: min(1120px, calc(100vw - 2 * var(--space-5))); padding-top: var(--space-6); }
.ds-endletter {
position: relative; flex: 1.45; min-width: 0; max-height: min(84vh, 780px); overflow: auto; overscroll-behavior: contain;
padding: var(--space-6) var(--space-7) var(--space-5); rotate: -1.2deg; box-shadow: var(--shadow-paper);
font-size: 16px; line-height: 1.85;
/* a deckled edge: the paper's border is a little torn */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0.6 0.9 L 9 0.3 L 18 1 L 27 0.4 L 37 0.9 L 46 0.2 L 56 0.8 L 66 0.3 L 75 1 L 85 0.4 L 94 0.8 L 99.4 0.5 L 99.7 12 L 99.2 24 L 99.8 37 L 99.3 50 L 99.8 63 L 99.2 76 L 99.7 88 L 99.4 99.5 L 90 99.1 L 80 99.7 L 70 99.2 L 60 99.8 L 50 99.3 L 40 99.8 L 30 99.2 L 20 99.7 L 10 99.2 L 0.5 99.6 L 0.2 88 L 0.8 75 L 0.3 62 L 0.8 50 L 0.2 37 L 0.7 25 L 0.3 12 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0.6 0.9 L 9 0.3 L 18 1 L 27 0.4 L 37 0.9 L 46 0.2 L 56 0.8 L 66 0.3 L 75 1 L 85 0.4 L 94 0.8 L 99.4 0.5 L 99.7 12 L 99.2 24 L 99.8 37 L 99.3 50 L 99.8 63 L 99.2 76 L 99.7 88 L 99.4 99.5 L 90 99.1 L 80 99.7 L 70 99.2 L 60 99.8 L 50 99.3 L 40 99.8 L 30 99.2 L 20 99.7 L 10 99.2 L 0.5 99.6 L 0.2 88 L 0.8 75 L 0.3 62 L 0.8 50 L 0.2 37 L 0.7 25 L 0.3 12 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.ds-endletter p { margin: 0 0 .6em; max-width: var(--measure); text-indent: 2em; }
:lang(en) .ds-endletter p { text-indent: 0; }
.ds-endletter__greeting { text-indent: 0 !important; font-family: var(--font-title); font-size: var(--text-h2); line-height: 1.3; margin-bottom: var(--space-4) !important; }
:lang(en) .ds-endletter__greeting { font-family: var(--font-hand); font-weight: 600; font-size: 34px; }
.ds-endletter__signoff { text-indent: 0 !important; text-align: right; margin: var(--space-3) 0 0 !important; color: var(--ink-soft); }
.ds-endletter__sign { text-indent: 0 !important; text-align: right; margin: 0 !important; font-family: var(--font-hand); font-weight: 600; font-size: 38px; line-height: 1.1; rotate: -4deg; }
.ds-endletter__sign::after { /* a small heart in tin rose after the name */
content: ""; display: inline-block; width: .5em; height: .45em; margin-left: .25em; vertical-align: .15em; background: var(--tin-rose);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 17 C 3 11, 0 8, 1.5 4.5 C 3 1, 7.5 1, 10 5 C 12.5 1, 17 1, 18.5 4.5 C 20 8, 17 11, 10 17 Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 17 C 3 11, 0 8, 1.5 4.5 C 3 1, 7.5 1, 10 5 C 12.5 1, 17 1, 18.5 4.5 C 20 8, 17 11, 10 17 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ds-endnote {
position: relative; flex: 1; min-width: 0; max-height: min(70vh, 680px); overflow: auto; overscroll-behavior: contain;
margin-top: var(--space-7); padding: var(--space-6) var(--space-5) var(--space-5); rotate: 2deg; font-family: var(--font-body); color: var(--ink);
background:
repeating-linear-gradient(180deg, transparent 0 25px, color-mix(in srgb, var(--marigold) 30%, transparent) 25px 26px) 0 62px / 100% 26px,
var(--tex-paper) 0 0 / 512px, color-mix(in srgb, var(--butter) 40%, var(--paper));
background-blend-mode: normal, multiply, normal;
box-shadow: var(--shadow-paper); font-size: 14px; line-height: 26px;
}
.ds-endnote__clip { /* the paperclip, drawn in two passes of pencil, over the top edge */
position: absolute; left: 26px; top: -16px; width: 22px; height: 58px; rotate: -8deg;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 58' fill='none' stroke-linecap='round'%3E%3Cpath d='M15 18 V 46 C 15 53, 5 53, 5 46 V 8 C 5 2, 18 2, 18 8 V 40 C 18 44, 11 44, 11 40 V 14' stroke='%237A6A55' stroke-width='2'/%3E%3Cpath d='M16 19 V 46 C 16 54, 6 54, 6 46 V 9' stroke='%23FBF6E9' stroke-opacity='.8' stroke-width='.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ds-endnote__title { margin: 0 0 4px; font-family: var(--font-title); font-weight: 400; font-size: 20px; line-height: 26px; }
:lang(en) .ds-endnote__title { font-family: var(--font-hand); font-weight: 600; font-size: 24px; }
.ds-endnote ol { margin: 0; padding: 0; list-style: none; counter-reset: ps; }
.ds-endnote li { counter-increment: ps; position: relative; padding-left: 28px; margin-bottom: 8px; }
.ds-endnote li::before { /* the number, written by hand */
content: counter(ps); position: absolute; left: 2px; top: 0; font-family: var(--font-hand); font-weight: 600; font-size: 24px; line-height: 26px; color: var(--tin-rose);
}
.ds-endnote b { display: block; font-family: var(--font-title); font-weight: 400; font-size: 17px; }
:lang(en) .ds-endnote b { font-family: var(--font-hand); font-weight: 600; font-size: 20px; }
.ds-endnote p { margin: 0; color: var(--ink); }
@media (max-width: 760px) {
.ds-ending { flex-direction: column; align-items: stretch; max-height: 86vh; overflow: auto; }
.ds-endletter, .ds-endnote { max-height: none; overflow: visible; rotate: 0deg; }
.ds-endnote { margin-top: 0; }
}
/* ---- Dusk: the room while the closing letter is read --------------------------
Two flat layers over the whole desk scene, both faded in with opacity only (no blend modes): .ds-dusk is the
evening sky's peach-to-lilac wash with a slight darkening under it, and .ds-dusk__lamp the desk lamp's warm pool,
brighter than by day. The lamp itself switches on (lampGlow, as in step 1½). */
.ds-dusk { position: absolute; inset: 0; pointer-events: none; background: var(--dusk-wash), linear-gradient(var(--dusk-shade), var(--dusk-shade)); }
.ds-dusk__lamp { position: absolute; pointer-events: none; background: var(--dusk-lamp); }
/* ---- Signature: the maker's name in the corner of the page ------------------
Like a painter signing a picture: Katherine Wu · 2026 in handwriting, small and faint, bottom right of every
view, above everything but never in the way (no pointer events). */
.ds-signature {
position: fixed; z-index: 40; right: var(--space-5); bottom: var(--space-3); pointer-events: none; user-select: none;
font-family: var(--font-hand); font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: .02em;
color: var(--ink); opacity: .42; rotate: -3deg;
}
@media (prefers-reduced-motion: reduce) {
.ds-envelope__flap { animation: none !important; }
.ds-counttag__sway, .ds-counttag__nudge { animation: none !important; }
.ds-note svg { animation: none; }
.ds-pinnote, .ds-polaroid { animation: none !important; }
.ds-lang .flip, .ds-sticker, .ds-tag, .ds-scrim { transition-duration: 1ms; }
}
上海市 徐汇区placeStory 6 of 31
关于我about me