/* ==========================================================================
   好久不见 · Still Miss You — application stylesheet
   Candlelight to morning. Rice paper and ink by day; a candle-lit room by
   night (dark scheme). Literary type: 霞鹜文楷 / 思源宋体 for Chinese,
   EB Garamond / Cormorant Garamond for English, all self-hosted
   (/static/fonts/fonts.css) so they load in mainland China. Mobile-first.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Fixed palette, used by the night-to-morning scenes in either scheme. */
  --night: #140e09;
  --night-2: #21160e;
  --candle: #f2b35c;
  --candle-soft: #f7cf8e;
  --ember: #c8642f;
  --glow: rgba(255, 190, 110, 0.18);
  --dusk: #3b2a3f;
  --dawn-rose: #f4c6b8;
  --dawn-peach: #f8dcc0;
  --dawn-sky: #a9cde0;
  --sun: #f6d58a;
  --morning: #fbf6ec;
  --night-ink: #f3e6d2;
  --night-ink-soft: #c9b394;

  /* Theme tokens: the whole site lives in one candle-lit night. Content that
     is read or written sits on warm paper (.paper scope, below). */
  --paper: #120c08;
  --sheet: #1c140e;
  --ink: #f3e6d2;
  --ink-soft: #c2ab8d;
  --rule: #3a2c20;
  --rule-strong: #8f7658;
  --postal: #f2b35c;          /* primary accent: candle */
  --postal-ink: #1a120b;
  --postal-tint: #2e2117;
  --postal-line: #5b4029;
  --stamp: #ec8f73;           /* ember */
  --stamp-ink: #1a120b;
  --stamp-tint: #3a211a;
  --stamp-line: rgba(236, 143, 115, 0.28);
  --warn: #e7b866;
  --warn-text: #e7b866;
  --warn-tint: #352816;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --panel: linear-gradient(180deg, rgba(255, 228, 190, 0.055), rgba(255, 228, 190, 0.025));
  --panel-line: rgba(243, 230, 210, 0.11);
  --airmail-alpha: 0.75;
  color-scheme: dark;

  --font-display: "Cormorant Garamond", "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --font-body: "EB Garamond", "LXGW WenKai Screen", Georgia, "Songti SC", serif;
  --font-letter: "LXGW WenKai Screen", "EB Garamond", "Kaiti SC", "STKaiti", serif;
  --font-hand: "Caveat", "LXGW WenKai Screen", cursive;
  --font-mono: var(--font-body);
  --font-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --body-size: 1.125rem;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2.5rem;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 6px;
  --radius-lg: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* The thin edge on letters: night turning into morning. */
  --airmail: linear-gradient(90deg, var(--ember), var(--candle) 35%, var(--dawn-rose) 70%, var(--dawn-sky));
  /* Paper grain, as a tiny SVG noise tile. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .6 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Chinese: 文楷 for reading, 思源宋体 for headings. */
:root:lang(zh) {
  --font-display: "Noto Serif SC", "Cormorant Garamond", "Songti SC", "STSong", serif;
  --font-body: "LXGW WenKai Screen", "EB Garamond", "Kaiti SC", "STKaiti", "PingFang SC", serif;
  --body-size: 1.0625rem;
}

/* Warm paper under candlelight: letters, the writing desk, anything read
   closely. Everything inside takes ink-on-paper colours. */
.paper, .envelope, .letter-paper, article.letter-card, .share-card, .persona-card, .auth-box, .claim, .layer-public {
  --paper: #ead8b6;
  --sheet: #f4e6cb;
  --ink: #33251a;
  --ink-soft: #6e5a44;
  --rule: #dcc7a3;
  --rule-strong: #9b7f5c;
  --postal: #a2492a;
  --postal-ink: #fff7ec;
  --postal-tint: #efd9bd;
  --postal-line: #d9b48f;
  --stamp: #9c2f2a;
  --stamp-ink: #fff7ec;
  --stamp-tint: #f1dacd;
  --stamp-line: rgba(156, 47, 42, 0.22);
  --warn: #9a6400;
  --warn-text: #7a4e00;
  --warn-tint: #f3e3c4;
  --grain: var(--grain-paper);
  color-scheme: light;
  color: var(--ink);
}


/* ---------- 1b. The sky: one night that slowly turns to dawn -------------- */
/* Each page sits at a point of the night (body[data-sky]); neighbouring pages
   are neighbouring colours, so moving between them never jumps. */
:root { --sky: linear-gradient(180deg, #120c08, #1a120c 60%, #1d140d); }
body[data-sky="night"] {
  --sky: radial-gradient(70vmax 55vmax at 85% -10%, rgba(242, 160, 74, 0.15), transparent 62%),
         linear-gradient(180deg, #120c08 0%, #1a120c 55%, #1f150e 100%);
}
body[data-sky="deep"] {
  --sky: radial-gradient(60vmax 40vmax at 50% 0%, rgba(120, 100, 170, 0.12), transparent 65%),
         linear-gradient(180deg, #0f0b10 0%, #151018 50%, #1d1418 100%);
}
body[data-sky="predawn"] {
  --sky: radial-gradient(90vmax 50vmax at 50% 115%, rgba(185, 130, 132, 0.28), transparent 60%),
         linear-gradient(180deg, #130f1c 0%, #1f182c 50%, #2e2236 100%);
}
body[data-sky="dawn"] {
  --sky: radial-gradient(110vmax 60vmax at 50% 120%, rgba(244, 198, 184, 0.42), transparent 62%),
         linear-gradient(180deg, #1a1420 0%, #2e2236 40%, #4d3446 75%, #6c4a5b 100%);
}
/* Stars, faint and slow. Not in the candle-lit room (night). */
body:is([data-sky="deep"], [data-sky="predawn"], [data-sky="dawn"])::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 244, 220, 0.8), transparent 60%),
    radial-gradient(1px 1px at 68% 9%, rgba(255, 244, 220, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 32%, rgba(255, 236, 200, 0.75), transparent 60%),
    radial-gradient(1px 1px at 35% 44%, rgba(255, 244, 220, 0.55), transparent 60%),
    radial-gradient(1px 1px at 52% 22%, rgba(255, 244, 220, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 70%, rgba(255, 236, 200, 0.5), transparent 60%),
    radial-gradient(1px 1px at 90% 66%, rgba(255, 244, 220, 0.45), transparent 60%),
    radial-gradient(1px 1px at 6% 52%, rgba(255, 244, 220, 0.5), transparent 60%);
  background-size: 420px 420px, 380px 380px, 520px 520px, 300px 300px, 460px 460px, 560px 560px, 340px 340px, 480px 480px;
  opacity: 0.7; animation: twinkle 9s ease-in-out infinite alternate;
}
body[data-sky="dawn"]::before { opacity: 0.35; }
@keyframes twinkle { from { opacity: 0.45; } to { opacity: 0.8; } }

/* Moving between pages: the whole night cross-fades; the header stays put. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: var(--ease); }
::view-transition-group(site-header) { animation-duration: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- 2. Reset & base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #120c08;
  background-image: var(--grain), var(--sky);
  background-attachment: scroll, fixed;
  color: var(--ink);
  font: 400 var(--body-size)/1.8 var(--font-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.3; color: var(--ink); letter-spacing: 0.01em; }
:lang(zh) :is(h1, h2, h3, h4) { letter-spacing: 0.06em; }
h1 { font-size: clamp(1.9rem, 4.8vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 3.2vw, 1.85rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding-left: 1.4em; }
li + li { margin-top: 0.25em; }
img, svg, video { max-width: 100%; }
img { height: auto; }
strong, b { font-weight: 600; }
code, kbd, samp {
  font-family: var(--font-code);
  font-size: 0.85em;
  padding: 1px 5px;
  background: var(--postal-tint);
  border-radius: 3px;
}
small { font-size: 0.875rem; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s5) 0; }
details > summary { cursor: pointer; font-weight: 600; min-height: 40px; }
a { color: var(--postal); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
::selection { background: var(--candle-soft); color: var(--night); }
:focus-visible { outline: 2px solid var(--postal); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- 3. Utilities & layout primitives ---------------------------- */
.container { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: 760px; }

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  padding: var(--s2) var(--s4); background: var(--postal); color: var(--postal-ink);
  font-weight: 600; border-radius: var(--radius); text-decoration: none;
}
.skip-link:focus { top: var(--s2); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.muted { color: var(--ink-soft); }
.small { font-size: 0.9rem; }
.mono { font-variant-numeric: tabular-nums; }
.code { font-family: var(--font-code); letter-spacing: 0.08em; }

.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--stack-gap, var(--s4)); align-content: start; }
.stack > * { min-width: 0; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5) var(--s6); }
@media (min-width: 860px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.section { padding-block: var(--s6); }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s4);
}
.section-head a { font-size: 0.95rem; }

.eyebrow {
  margin: 0; font-family: var(--font-display); font-size: 0.9rem; font-style: italic; font-weight: 500;
  letter-spacing: 0.08em; color: var(--postal);
}
:lang(zh) .eyebrow { font-style: normal; font-size: 0.85rem; letter-spacing: 0.2em; }
.lede { font-size: 1.15em; line-height: 1.85; color: var(--ink-soft); max-width: 60ch; }
.page-head { display: grid; gap: var(--s3); padding-block: var(--s6) var(--s5); }
.page-head .actions { margin-top: var(--s2); }
hr.divider { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s5); }
.site-main { flex: 1 0 auto; min-height: 60vh; padding-bottom: var(--s5); }
.site-main > .container:first-child > .alert { margin-top: var(--s4); }
img { max-width: 100%; }

/* ---------- 4. Header, demo bar, footer --------------------------------- */
.demo-bar {
  background: var(--night);
  color: var(--night-ink);
  font-size: 0.85rem;
  line-height: 1.5;
}
.demo-bar .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); padding-block: 6px; }
.demo-bar a { color: var(--candle); font-weight: 600; }

.site-header {
  position: relative; z-index: 20;
  background: linear-gradient(180deg, rgba(14, 10, 7, 0.72), rgba(14, 10, 7, 0.35));
  border-bottom: 1px solid rgba(243, 230, 210, 0.07);
  backdrop-filter: blur(10px);
  view-transition-name: site-header;
}
.header-inner { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s4); padding-block: var(--s2) 0; }
.brand {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.12em; }

.header-tools {
  order: 2;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
}
.site-nav {
  order: 3; display: flex; gap: 0 var(--s5);
  width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  border-top: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px;
  color: var(--ink-soft); white-space: nowrap; text-decoration: none; letter-spacing: 0.04em;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--postal); box-shadow: inset 0 -2px 0 var(--postal); }
@media (min-width: 900px) {
  .header-inner { padding-block: var(--s2); }
  .site-nav {
    order: 2;
    flex: 1 1 auto;
    width: auto;
    margin: 0 0 0 var(--s5);
    padding: 0;
    border-top: 0;
    overflow: visible;
  }
  .header-tools { order: 3; }
}

.lang-switch { display: flex; font-size: 0.85rem; }
.lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 8px;
  color: var(--ink-soft);
  text-decoration: none;
}
.lang-switch a + a { border-left: 1px solid var(--rule); }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a.is-active { color: var(--ink); font-weight: 600; }
.bell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 8px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.bell:hover { color: var(--ink); }
.badge-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--candle); color: var(--night); box-shadow: 0 0 10px var(--glow);
  font-size: 0.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}

/* Home and demo: the header melts into the scene. */
body.is-night { background: radial-gradient(70vmax 55vmax at 72% 26vmax, rgba(242, 160, 74, 0.16), transparent 70%) no-repeat, #120c08; }
body.is-night .site-header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
body.is-night .site-header :is(.brand, .lang-switch a.is-active) { color: var(--night-ink); }
body.is-night .site-header :is(.site-nav a, .lang-switch a, .bell) { color: var(--night-ink-soft); }
body.is-night .site-header :is(.site-nav a, .lang-switch a, .bell):hover { color: var(--night-ink); }
body.is-night .site-header .site-nav { border-top-color: rgba(243, 230, 210, 0.12); }
body.is-night .site-header .site-nav a[aria-current="page"] { color: var(--candle); box-shadow: inset 0 -2px 0 var(--candle); }
body.is-night .site-header .lang-switch a + a { border-left-color: rgba(243, 230, 210, 0.2); }
body.is-night .site-header .btn { --btn-fg: var(--night-ink); --btn-bd: rgba(243, 230, 210, 0.45); --btn-hover: rgba(243, 230, 210, 0.08); }

.site-footer { margin-top: var(--s6); padding-block: var(--s6); border-top: 1px solid var(--rule); font-size: 0.95rem; }
.footer-inner { display: grid; gap: var(--s3); justify-items: start; }
.footer-line { font-family: var(--font-letter); font-size: 1.2rem; color: var(--ink); }
.footer-brand { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.footer-nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink-soft); }
.footer-nav a:hover { color: var(--ink); }
body.is-morning-end .site-footer { margin-top: 0; background: var(--morning); color: #3a2d22; border-top: 0; }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  --btn-fg: var(--postal); --btn-bg: transparent; --btn-bd: var(--postal); --btn-hover: var(--postal-tint);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 42px; padding: 8px 20px; border: 1px solid var(--btn-bd); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 0.98rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.04em; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s, border-color 0.2s, box-shadow 0.3s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { background: var(--btn-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { --btn-bg: var(--postal); --btn-fg: var(--postal-ink); --btn-hover: var(--postal); box-shadow: 0 6px 18px -8px var(--postal); }
.btn-primary:hover { box-shadow: 0 8px 26px -6px var(--postal); filter: brightness(1.05); }
.btn-secondary { --btn-bg: transparent; --btn-fg: var(--postal); --btn-bd: var(--postal); }
.btn-ghost { --btn-fg: var(--ink-soft); --btn-bd: transparent; }
.btn-ghost:hover { color: var(--ink); }
.btn-danger { --btn-fg: var(--stamp); --btn-bd: var(--stamp); --btn-hover: var(--stamp-tint); }
/* Warm light around the button, for the one thing we hope people do. The glow
   is static: one modest shadow that never changes or transitions. (Very wide
   blurred shadows get re-rasterised whenever something nearby animates and
   can show their layer's edges, which reads as the outline flickering; and a
   hover that swapped the glow kicked in on touch while scrolling.) */
.btn-candle {
  --btn-bg: linear-gradient(180deg, #f7c46f, #e89a45); --btn-hover: linear-gradient(180deg, #f9cd80, #eca452);
  --btn-fg: #2a1709; --btn-bd: rgba(255, 214, 150, 0.9);
  background: var(--btn-bg);
  box-shadow: 0 0 0 1px rgba(255, 200, 120, 0.22), 0 0 22px 1px rgba(242, 170, 80, 0.42);
  transition: transform 0.2s var(--ease);
}
.btn-moon { --btn-fg: var(--night-ink); --btn-bd: rgba(243, 230, 210, 0.5); --btn-hover: rgba(243, 230, 210, 0.08); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: 5px 14px; font-size: 0.9rem; min-height: 36px; }
.btn-lg { min-height: 52px; padding: 12px 30px; font-size: 1.1rem; }
.btn-block { display: flex; width: 100%; }
.actions, .claim-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.link-button {
  appearance: none; background: none; border: 0; padding: 0; color: var(--postal); font: inherit;
  text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer;
}
.link-button:hover { text-decoration-thickness: 2px; }
form.inline-form { display: inline; margin: 0; }
/* Inline-ish controls keep their size when dropped into a grid (stack, card, envelope...). */
.btn, .pill, .link-button, .postmark-stamp, .qr, .picked-place, .meter { justify-self: start; }

/* ---------- 6. Alerts ---------------------------------------------------- */
.alert {
  padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--sheet); color: var(--ink); text-align: left;
}
.alert > * + * { margin-top: var(--s2); }
.alert-info { background: var(--postal-tint); border-color: var(--postal-line); }
.alert-warn { background: var(--warn-tint); border-color: var(--warn); }
.alert-danger, .form-errors { background: var(--stamp-tint); border-color: var(--stamp); }
.alert-success { background: var(--postal-tint); border-color: var(--postal); }
.form-errors { padding: 12px 16px; border: 1px solid var(--stamp); border-radius: var(--radius); color: var(--ink); }
ul.form-errors, ol.form-errors { padding-left: 2.25rem; }
.form-errors ul { margin: 0; padding-left: 1.25rem; }
.form-errors li + li { margin-top: 4px; }

/* ---------- 7. Forms ----------------------------------------------------- */
form.form { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; min-width: 0; }
label { font-weight: 600; }
.req { color: var(--stamp); }
.hint { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.error { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--stamp); }

input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"],
input[type="url"], input[type="tel"], input[type="date"], select, textarea {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font-size: 1rem; line-height: 1.4; /* 16px so iOS does not zoom */
}
input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: 0.8; }
textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--postal); }
input[readonly] { background: var(--paper); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; }
.field.has-error :is(input, textarea, select) { border-color: var(--stamp); box-shadow: inset 0 0 0 1px var(--stamp); }

.check { display: flex; align-items: flex-start; gap: 10px; padding-block: 6px; font-weight: 400; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--postal); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--postal); }

fieldset.group, fieldset.coord-editor {
  display: grid; gap: var(--s3); min-width: 0; margin: 0; padding: var(--s4);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
fieldset.group > legend, fieldset.coord-editor > legend {
  padding: 0 6px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
fieldset.group.has-error { border-color: var(--stamp); }

.radio-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--s3); }
@media (min-width: 480px) { .radio-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .radio-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
label.radio-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 2px 10px;
  padding: 14px 16px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
  font-weight: 400; cursor: pointer;
}
label.radio-card:hover { border-color: var(--rule-strong); }
label.radio-card input { grid-column: 1; grid-row: 1; width: 16px; height: 16px; margin: 5px 0 0; }
label.radio-card > :not(input) { grid-column: 2; }
.radio-card-title { font-weight: 600; }
.radio-card-desc { font-size: 0.875rem; color: var(--ink-soft); }
label.radio-card:has(input:checked) {
  border-color: var(--postal);
  box-shadow: inset 0 0 0 1px var(--postal);
  background: var(--postal-tint);
}
label.radio-card:has(input:focus-visible) { outline: 3px solid var(--postal); outline-offset: 2px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--s3); }

/* ---------- 8. Pills ----------------------------------------------------- */
.pill {
  display: inline-block; padding: 2px 10px; border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: var(--ink-soft); font-size: 0.75rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.02em; white-space: nowrap;
}
:is(.pill-searching, .pill-accepted, .pill-lit, .pill-insider, .pill-open) { color: var(--postal); }
:is(.pill-review, .pill-pending, .pill-needs_review) { color: var(--warn-text); }
:is(.pill-removed, .pill-rejected, .pill-medium) { color: var(--stamp); }
:is(.pill-echoed, .pill-weak) { color: var(--ink-soft); }
:is(.pill-dimmed, .pill-silenced, .pill-dormant, .pill-closed, .pill-withdrawn) { color: var(--ink-soft); border-style: dashed; }
.pill-reunited { background: var(--postal); border-color: var(--postal); color: var(--postal-ink); }
.pill-strong { background: var(--stamp); border-color: var(--stamp); color: var(--stamp-ink); }

/* ---------- 9. Cards ----------------------------------------------------- */
.card, .lamp-card, .story-card, .claim, .contact-box, .choice, .auth-box, .reunion-box {
  display: grid; gap: var(--s3); align-content: start; min-width: 0;
  padding: clamp(16px, 3vw, 22px); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
}
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }

article.letter-card, .share-card { position: relative; overflow: hidden; }
article.letter-card::before, .share-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--airmail); opacity: var(--airmail-alpha);
}
article.letter-card {
  display: flex; flex-direction: column; gap: 8px; padding: 22px 18px 18px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
}
article.letter-card:hover { border-color: var(--rule-strong); }
article.letter-card:has(h3 a:focus-visible) { outline: 3px solid var(--postal); outline-offset: 2px; }
.letter-card-meta, .envelope-head .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft);
}
.letter-card h3 { font-size: 1.15rem; line-height: 1.4; }
.letter-card h3 a { color: var(--ink); text-decoration: none; }
.letter-card h3 a:hover { text-decoration: underline; }
.letter-card h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card is the click target */
.letter-card-clues {
  margin: 0; color: var(--ink-soft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.letter-card-why { margin: 0; font-size: 0.875rem; color: var(--postal); }
.letter-card-foot {
  margin: auto 0 0;
  padding-top: var(--s2);
  border-top: 1px dashed var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.lamp-card h3 { display: flex; align-items: center; gap: 10px; }
.lamp-card h3::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--postal); box-shadow: 0 0 0 4px var(--postal-tint), 0 0 10px 2px var(--postal-line);
}
.lamp-card-coords { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-soft); }
.lamp-card h3 a, .story-card h3 a { color: var(--ink); text-decoration: none; }
.lamp-card h3 a:hover, .story-card h3 a:hover { text-decoration: underline; }

/* ---------- 10. Home: from lamplight to morning ------------------------- */
/* One long sky: a lamp-lit night at the top, dusk, dawn, and morning at the
   bottom. Fixed colours, the same in light and dark schemes. */
.home .site-main { padding-bottom: 0; }
.nightfall {
  --nf-ink: var(--night-ink);
  --nf-soft: var(--night-ink-soft);
  color: var(--nf-ink);
  background:
    linear-gradient(180deg,
      rgba(18, 12, 8, 0) 0%, rgba(22, 15, 10, 0.6) 14%, #1d140d 26%, #261a12 34%,
      #2e2025 41%, #44303f 48%, #6c4a5b 55%, #b98284 62%,
      #ecb7a4 68%, #f6d3bc 74%, #f9e4cc 80%, #fbefdc 88%, #fbf6ec 100%);
}
.scene { position: relative; padding-block: clamp(64px, 12vw, 140px); }
.scene :is(h1, h2, h3) { color: inherit; }
.scene-kicker {
  font-family: var(--font-display); font-style: italic; font-size: 1rem; letter-spacing: 0.14em; color: var(--candle);
}
:lang(zh) .scene-kicker { font-style: normal; letter-spacing: 0.4em; font-size: 0.9rem; }
.scene-title { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 500; margin-top: var(--s2); }
.scene-sub { margin-top: var(--s3); color: var(--nf-soft); max-width: 46ch; }
.scene-count { margin-top: var(--s5); font-size: 0.95rem; color: var(--nf-soft); letter-spacing: 0.04em; }
.scene-more { margin-top: var(--s5); }
.scene-more a { color: var(--candle); }
.scene-empty { margin-top: var(--s5); color: var(--nf-soft); font-family: var(--font-letter); font-size: 1.15rem; }
.scene-actions { margin-top: var(--s6); }
.verse {
  font-family: var(--font-letter); font-size: clamp(1.35rem, 3.4vw, 2.1rem); line-height: 1.75; font-weight: 400;
  max-width: 28em; margin-inline: auto; text-align: center; text-wrap: balance;
}
:lang(zh) .verse { word-break: keep-all; text-wrap: pretty; }
:lang(en) .verse { font-family: "Cormorant Garamond", var(--font-letter); font-style: italic; font-size: clamp(1.5rem, 3.8vw, 2.35rem); line-height: 1.5; }

/* 1. The desk lamp. */
.scene-candle {
  min-height: calc(100vh - 100px); min-height: calc(100svh - 100px); display: grid; align-items: center;
  padding-block: var(--s5) var(--s6); overflow: hidden;
}
.motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene-candle-inner { position: relative; display: grid; gap: var(--s5); justify-items: center; text-align: center; }
.desk-wrap { width: clamp(240px, 74vw, 340px); max-width: 100%; }
.art-desk { display: block; width: 100%; height: auto; overflow: visible; }
/* The ink writes a few lines on the page, once, after the words have arrived. */
.dl-ink path { stroke-dasharray: 1; animation: dl-write 1.5s ease-in-out backwards; animation-delay: calc(4.2s + var(--i) * 1.4s); }
@keyframes dl-write { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.whisper-wrap { display: grid; justify-items: center; max-width: 40rem; }
.whisper {
  display: grid; gap: 0.15em; font-family: var(--font-letter); font-weight: 400;
  font-size: clamp(1.9rem, 6.4vw, 3.4rem); line-height: 1.45; color: var(--night-ink); letter-spacing: 0.06em;
  text-shadow: 0 0 30px rgba(242, 179, 92, 0.18);
}
:lang(en) .whisper { font-family: "Cormorant Garamond", var(--font-letter); font-style: italic; font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
.whisper-line { display: block; animation: rise 1.6s var(--ease) backwards; animation-delay: calc(var(--n) * 0.9s - 0.5s); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.memory {
  min-height: 3.6em; margin-top: var(--s5); max-width: 30em;
  font-family: var(--font-letter); font-size: 1.1rem; color: var(--candle-soft);
  animation: rise 1.6s var(--ease) 2.6s backwards;
}
.memory::before, .memory::after { content: "—"; margin-inline: 0.6em; opacity: 0.5; }
.memory-text { transition: opacity 0.9s var(--ease); }
.memory-text.is-fading { opacity: 0; }
/* The buttons and the count fade in without blur and keep no fill afterwards,
   so the glowing button is not left on an animated layer. */
.scene-candle .scene-actions { justify-content: center; margin-top: var(--s5); animation: appear 1.4s var(--ease) 3.2s backwards; }
.scene-candle .scene-count { animation: appear 1.4s var(--ease) 3.6s backwards; }
@keyframes appear { from { opacity: 0; transform: translateY(14px); } }
.scroll-cue {
  position: absolute; left: 50%; bottom: 18px; width: 44px; height: 44px; transform: translateX(-50%);
  display: grid; place-items: center; color: var(--night-ink-soft); text-decoration: none;
}
.scroll-cue span {
  width: 1px; height: 30px; background: linear-gradient(var(--candle), transparent);
  animation: drip 2.4s ease-in-out infinite;
}
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-width: 900px) {
  .scene-candle { min-height: calc(100svh - 64px); }
  .scene-candle-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); justify-items: start; text-align: left; align-items: center; }
  .desk-wrap { order: 2; justify-self: center; width: clamp(300px, 30vw, 440px); }
  .whisper-wrap { justify-items: start; }
  .scene-candle .scene-actions { justify-content: flex-start; }
}

/* 2. The envelope plaza: letters on their way, a row of paper envelopes to scroll sideways. */
.scene-letters .container > :is(.scene-kicker, .scene-title, .scene-sub, .scene-more, .scene-empty) { text-align: center; margin-inline: auto; }
.plaza [hidden] { display: none !important; }
.plaza-stage { margin-top: var(--s5); outline: none; transition: opacity 0.2s var(--ease); }
.plaza.is-swapping .plaza-stage { opacity: 0; }
.plaza-end { text-align: center; min-height: 180px; display: grid; align-content: center; }
.plaza:has(.plaza-end) + .scene-more { display: none; }
/* The row bleeds to the edges of the screen on phones; the next envelope peeks in from the right. Room above
   and below is for the tilt and the vertical offset (the row scrolls, so it would clip them). */
.plaza-row {
  --env-w: min(300px, 74vw);
  list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 40px var(--gutter) 52px;
  display: flex; align-items: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: rgba(243, 230, 210, 0.3) transparent;
}
/* Each envelope's tilt and drop come from its place in the row, so the same letters always sit the same way. */
.env {
  --env-paper: #f3e3c3; --stamp-bg: #c8642f;
  position: relative; flex: none; width: var(--env-w); margin-inline-start: -16px; scroll-snap-align: start;
  transform: translateY(var(--lift, 0px)) rotate(var(--tilt, 0deg));
  transition: transform 0.35s var(--ease);
}
.env:first-child { margin-inline-start: 0; }
.env:nth-child(8n + 1) { --tilt: -2.4deg; --lift: 4px; }
.env:nth-child(8n + 2) { --tilt: 1.8deg; --lift: 26px; --env-paper: #efdcb9; --stamp-bg: #4f7ea3; }
.env:nth-child(8n + 3) { --tilt: -1deg; --lift: 8px; --env-paper: #f6ead2; --stamp-bg: #7a5a8a; }
.env:nth-child(8n + 4) { --tilt: 3deg; --lift: 34px; --stamp-bg: #b5562c; }
.env:nth-child(8n + 5) { --tilt: -2.8deg; --lift: 12px; --env-paper: #efdcb9; --stamp-bg: #4a7a68; }
.env:nth-child(8n + 6) { --tilt: 1.2deg; --lift: 28px; --env-paper: #f6ead2; --stamp-bg: #c8642f; }
.env:nth-child(8n + 7) { --tilt: -3.4deg; --lift: 2px; --stamp-bg: #4f7ea3; }
.env:nth-child(8n) { --tilt: 2.4deg; --lift: 20px; --env-paper: #efdcb9; --stamp-bg: #7a5a8a; }
.env:is(:hover, :focus-within) { z-index: 2; transform: translateY(calc(var(--lift, 0px) - 8px)) rotate(0deg); }
.env article {
  --sheet: var(--env-paper); --ink: #33251a; --ink-soft: #6e5a44; --rule: #dcc7a3; --postal: #a2492a; --stamp: #9c2f2a;
  padding: 7px; border-radius: 3px; color: var(--ink);
  background: repeating-linear-gradient(135deg, #c8642f 0 10px, var(--env-paper) 10px 20px, #4f7ea3 20px 30px, var(--env-paper) 30px 40px);
  box-shadow: 0 1px 0 rgba(255, 232, 190, 0.18), 0 16px 20px -14px rgba(0, 0, 0, 0.85);
}
.env-face {
  position: relative; display: block; min-height: 226px; overflow: hidden; padding: 12px 26px 18px;
  background: var(--env-paper) var(--grain); color: var(--ink); text-decoration: none; border-radius: 1px;
  font-family: var(--font-letter);
}
.env-face:focus-visible { outline: 3px solid var(--candle); outline-offset: 3px; }
.env-folds { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.env-folds path { stroke: rgba(110, 80, 50, 0.2); stroke-width: 1; }
.env-stamps { position: absolute; inset: 0; pointer-events: none; }
.env-stamp { position: absolute; top: 12px; right: 30px; width: 44px; height: 54px; }
.env-stamp-sky { fill: var(--stamp-bg); }
.env-perf { stroke: var(--env-paper); }
.env-postmark {
  position: absolute; top: 18px; right: -10px; width: 104px; height: 52px; color: #5b3a28; opacity: 0.74;
  transform: rotate(-9deg); transform-origin: 25% 50%;
}
.env-postmark :is(circle, path) { stroke: currentColor; }
.env-postmark text { fill: currentColor; font-family: var(--font-body); font-weight: 600; }
.env-from {
  display: block; min-height: 52px; padding-right: 128px;
  font-size: 0.78rem; line-height: 1.5; letter-spacing: 0.08em; color: var(--ink-soft);
}
.env-from em { display: block; font-style: normal; color: var(--stamp); }
.env-title, .env-to, .env-where, .env-excerpt { display: block; }
.env-title { font-weight: 400; font-size: 1.12rem; line-height: 1.4; overflow-wrap: anywhere; }
.env-to { margin-top: 2px; font-size: 0.95rem; color: var(--postal); }
.env-where { margin-top: 6px; padding-top: 6px; border-top: 1px dotted rgba(110, 80, 50, 0.4); font-family: var(--font-body); font-size: 0.82rem; color: var(--ink-soft); }
.env-excerpt {
  margin-top: 6px; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.env-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.plaza-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s3); margin: 0; }
.plaza-arrow { display: none; min-width: 42px; padding-inline: 0; font-size: 1.4rem; }
@media (hover: hover) and (pointer: fine) { .plaza-arrow { display: inline-flex; } }

/* Opened: the envelope grows from where it lay and the letter slides out of it. */
html:has(dialog.env-dialog[open]) { overflow: hidden; }
dialog.env-dialog {
  --env-paper: #f3e3c3; --sheet: #f6e8cd; --ink: #33251a; --ink-soft: #6e5a44; --rule: #dcc7a3; --postal: #a2492a; --stamp: #9c2f2a;
  width: min(640px, calc(100% - 24px)); max-height: min(88vh, 860px); margin: auto; padding: 0; overflow: hidden;
  border: 9px solid transparent; border-radius: 0; color: var(--ink);
  border-image: repeating-linear-gradient(135deg, #c8642f 0 10px, var(--env-paper) 10px 20px, #4f7ea3 20px 30px, var(--env-paper) 30px 40px) 9 / 9px;
  background: var(--env-paper) var(--grain); box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.9);
}
dialog.env-dialog[open] { display: flex; flex-direction: column; }
dialog.env-dialog::backdrop { background: rgba(10, 7, 9, 0.8); }
.env-sheet {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 8px;
  background: var(--sheet) var(--grain); border-radius: 2px; box-shadow: 0 1px 6px rgba(70, 45, 20, 0.25);
}
/* Only the words scroll; the two next steps stay in reach at the foot of the sheet. */
.env-sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s5) var(--s5) var(--s3); display: grid; gap: var(--s4); align-content: start;
}
@media (max-width: 480px) { .env-sheet-body { padding: var(--s4) var(--s4) var(--s3); } }
.env-sheet-body > * { min-width: 0; }
.env-sheet-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: start; }
.env-sheet-head h3 { margin: 2px 0 0; font-size: 1.35rem; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.env-seal { width: 38px; height: 38px; margin-top: 2px; }
.env-why { margin: 0; color: var(--postal); }
.env-actions { flex: none; margin: 0; padding: var(--s3) var(--s5) var(--s4); border-top: 1px solid var(--rule); }
@media (max-width: 480px) { .env-actions { padding-inline: var(--s4); } }
.env-sheet dl.kv { font-size: 0.98rem; }
.env-sheet blockquote.quote { margin: 0; font-size: 1.1rem; line-height: 1.8; }
.env-sheet .btn-secondary { --btn-fg: #7a3a22; --btn-bd: #a2492a; --btn-hover: rgba(162, 73, 42, 0.08); }
@media (prefers-reduced-motion: reduce) { .plaza-stage, .env { transition: none; } }

@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* 3. Light passed from hand to hand. */
.scene-relay { text-align: center; }
.art-relay { display: block; width: min(100%, 980px); height: auto; margin: 0 auto var(--s5); overflow: visible; }
.rl-spark { stroke-dasharray: 26 1000; stroke-dashoffset: 1026; filter: drop-shadow(0 0 6px #ffcf80); animation: travel 7s linear infinite; }
@keyframes travel { from { stroke-dashoffset: 1026; } to { stroke-dashoffset: 0; } }
.rl-node { opacity: 0.35; animation: kindle 7s ease-in-out infinite; animation-delay: calc(var(--i) * 1.1s + 0.6s); }
@keyframes kindle { 0%, 100% { opacity: 0.35; } 12% { opacity: 1; } 40% { opacity: 0.7; } }
.rl-star { opacity: 0.4; animation: arrive 7s ease-in-out infinite; }
@keyframes arrive { 0%, 82% { opacity: 0.4; } 92% { opacity: 1; } 100% { opacity: 0.55; } }
.scene-relay .scene-actions { justify-content: center; }

/* 4. Dusk turning rose: lamps. */
.scene-lamps { --nf-ink: #3d2630; --nf-soft: #6f4a52; color: var(--nf-ink); text-align: center; }
.scene-lamps .scene-sub { margin-inline: auto; }
.scene-lamps .verse { color: #fff6ec; text-shadow: 0 1px 18px rgba(90, 40, 50, 0.35); }
.scene-lamps .scene-sub { color: #fff1e6; }
.lanterns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s5); margin-top: var(--s6); }
.lantern-item { display: grid; justify-items: center; align-content: start; gap: var(--s2); width: min(228px, 100%); }
@media (max-width: 699px) {
  .lanterns {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--s3);
  }
  .lanterns::-webkit-scrollbar { display: none; }
  .lantern-item { flex: 0 0 78%; scroll-snap-align: center; }
}
.art-lantern { width: 46px; height: auto; transform-origin: 50% 0; animation: sway 5s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(255, 170, 90, 0.7)); }
.lantern-item:nth-child(2n) .art-lantern { animation-delay: -2.5s; }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.lantern-light { animation: breathe 3.4s ease-in-out infinite; }
.lantern-item .lamp-card {
  --sheet: rgba(255, 250, 241, 0.82); --ink: #3d2630; --ink-soft: #6f4a52; --rule: rgba(255, 255, 255, 0.6);
  text-align: left; color: var(--ink); backdrop-filter: blur(4px); border-radius: var(--radius-lg);
}
.lantern-item .lamp-card h3::before { display: none; }
.scene-lamps .scene-actions { justify-content: center; }
.scene-lamps .btn-primary { --btn-bg: #8f3f2a; --btn-fg: #fff7ec; --btn-hover: #8f3f2a; }

/* 5. Morning. */
.scene-morning {
  --nf-ink: #3a2d22; --nf-soft: #6e5c49; color: var(--nf-ink); text-align: center;
  padding-bottom: 0;
}
.scene-morning .verse { color: #6e5c49; font-size: clamp(1.15rem, 2.6vw, 1.5rem); }
.farewell {
  margin-top: var(--s3); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.18em;
  font-size: clamp(2.6rem, 9vw, 5.2rem); line-height: 1.2; color: #3a2d22;
}
:lang(en) .farewell { font-family: "Cormorant Garamond", var(--font-display); font-style: italic; font-weight: 500; letter-spacing: 0.01em; }
.scene-morning .scene-count { color: #8a5a3c; }
.morning-stories { margin-top: var(--s6); text-align: left; }
.morning-stories .story-card {
  --sheet: rgba(255, 252, 245, 0.9); --ink: #3a2d22; --ink-soft: #6e5c49; --rule: #eadcc4;
  color: var(--ink); border-radius: var(--radius-lg); box-shadow: 0 14px 30px -18px rgba(120, 80, 40, 0.45);
}
.scene-morning .scene-more a { color: #a2492a; }
.art-morning { display: block; width: 100%; height: clamp(220px, 34vw, 420px); margin-top: var(--s6); }
.mn-rays { transform-box: fill-box; transform-origin: 50% 50%; animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mn-cloud { animation: float 12s ease-in-out infinite; }
.mn-cloud-2 { animation-delay: -5s; }
.mn-birds { animation: float 7s ease-in-out infinite; }
.mn-plane { animation: float 6s ease-in-out infinite; animation-delay: -2s; }
.morning-close { background: #e8dcb5; padding-block: var(--s5) clamp(56px, 8vw, 96px); }
.morning-close .verse { color: #4a3a2a; font-size: clamp(1.2rem, 2.8vw, 1.6rem); }
.morning-close .scene-actions { justify-content: center; margin-top: var(--s5); }
.morning-close .btn-primary { --btn-bg: #a2492a; --btn-fg: #fffaf1; --btn-hover: #a2492a; }
.morning-close .btn-secondary { --btn-fg: #7a3a22; --btn-bd: #a2492a; --btn-hover: rgba(162, 73, 42, 0.08); }
body.is-morning-end .site-footer { background: #e8dcb5; color: #3a2d22; border-top: 1px solid rgba(90, 70, 54, 0.15); --ink: #3a2d22; --ink-soft: #6e5c49; --postal: #a2492a; }
body.is-morning-end .site-footer .footer-line { color: #3a2d22; }

/* Shared marks used elsewhere. */
ul.principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--s5) var(--s5);
}
ul.principles li { margin: 0; padding-top: var(--s3); border-top: 1px solid var(--rule-strong); color: var(--ink-soft); }
ul.principles li > :is(strong, b, h3, h4):first-child {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
ol.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 560px) { ol.how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { ol.how { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
ol.how li, li.how-step { margin: 0; display: grid; gap: 6px; align-content: start; padding: 18px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.how-num { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--postal); }
.how-step h3 { font-size: 1.1rem; }
.how-step p { color: var(--ink-soft); }

/* ---------- 11. Letter page --------------------------------------------- */
.envelope {
  position: relative; display: grid; gap: var(--s5); align-content: start; min-width: 0;
  padding: calc(clamp(18px, 4vw, 40px) + 6px) clamp(18px, 4vw, 40px);
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 2px; overflow: hidden;
}
.envelope::before, .envelope::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--airmail);
  opacity: var(--airmail-alpha);
}
.envelope::before { top: 0; }
.envelope::after { bottom: 0; }
.envelope-head { display: grid; gap: var(--s2); }
.envelope-head h1 { line-height: 1.25; }

ul.coords { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-block: 1px solid var(--rule); }
li.coord { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); padding: 10px 0; }
li.coord + li.coord { border-top: 1px dotted var(--rule-strong); }
.coord-place { font-weight: 700; }
.coord-years { justify-self: end; color: var(--ink-soft); white-space: nowrap; }
.coord-context { grid-column: 1 / -1; font-size: 0.875rem; color: var(--ink-soft); }

dl.kv, dl.reveal { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
dl.kv > div, dl.reveal > div { display: contents; }
dl.kv dt, dl.reveal dt {
  padding-top: var(--s3); border-top: 1px solid var(--rule);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
dl.kv dd, dl.reveal dd { margin: 0; padding-bottom: var(--s3); color: var(--ink); }
dl.kv > dt:first-child, dl.kv > div:first-child > dt, dl.reveal > dt:first-child, dl.reveal > div:first-child > dt {
  border-top: 0;
  padding-top: 0;
}
dl.reveal dd { color: var(--postal); font-weight: 600; }
@media (max-width: 639px) {
  dl.kv > dd:last-child, dl.kv > div:last-child > dd, dl.reveal > dd:last-child, dl.reveal > div:last-child > dd { padding-bottom: 0; }
}
@media (min-width: 640px) {
  dl.kv, dl.reveal { grid-template-columns: 140px minmax(0, 1fr); column-gap: var(--s5); }
  dl.kv dt, dl.reveal dt, dl.kv dd, dl.reveal dd { padding-block: 10px; border-top: 1px solid var(--rule); }
  dl.kv dt, dl.reveal dt { padding-top: 14px; }
  dl.kv > dt:first-child, dl.kv > dt:first-child + dd, dl.reveal > dt:first-child, dl.reveal > dt:first-child + dd,
  dl.kv > div:first-child > *, dl.reveal > div:first-child > * { border-top: 0; padding-top: 0; }
}

blockquote.quote {
  position: relative; padding-top: 2.1rem;
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.6vw, 1.4rem); line-height: 1.8;
}
blockquote.quote::before {
  content: "\201C"; position: absolute; top: -0.12em; left: -0.04em;
  font-family: var(--font-display); font-size: 4.25rem; line-height: 1; color: var(--stamp);
}
blockquote.quote :is(cite, footer) {
  display: block;
  margin-top: var(--s2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-style: normal;
  color: var(--ink-soft);
}

.letter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--s4); }
.soft-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.soft-actions > * + *::before {
  content: "\00B7";
  display: inline-block;
  margin-inline: 0.7em;
  color: var(--ink-soft);
  text-decoration: none;
}
.soft-actions :is(a, .link-button) { color: var(--ink-soft); }
.soft-actions > a, .soft-actions .link-button { padding-block: 8px; } /* 40px tap height; separators stay un-underlined as inline-blocks */
.soft-actions :is(a, .link-button):hover { color: var(--postal); }
.stats-line { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-soft); }
.postmark-stamp {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 84px; height: 84px; padding: 8px; border: 2px solid var(--stamp); border-radius: 50%;
  color: var(--stamp); font-family: var(--font-mono); font-size: 11px; line-height: 1.3; letter-spacing: 0.04em; text-align: center; text-transform: uppercase;
  transform: rotate(-8deg);
}
.postmark-stamp::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--stamp);
  border-radius: 50%;
  opacity: 0.55;
  pointer-events: none;
}
.routing-hint {
  padding: 14px 16px;
  background: var(--postal-tint);
  border: 1px solid var(--postal-line);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}
.routing-hint > * + * { margin-top: var(--s1); }
.routing-hint :is(h2, h3, h4) { font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; color: var(--postal); }

/* ---------- 12. Share ---------------------------------------------------- */
.share-card {
  display: grid;
  gap: var(--s3);
  max-width: 520px;
  padding: 24px 20px 20px;
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}
.qr {
  display: inline-block;
  padding: 12px;
  background: #fff;
  color: #000;
  line-height: 0;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.qr svg { display: block; width: 180px; height: 180px; max-width: 100%; }
.copy-field { display: flex; align-items: stretch; gap: var(--s2); }
.copy-field input { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); }
.copy-field .btn { flex: none; }

/* ---------- 13. Relay tree ---------------------------------------------- */
ul.relay-tree, ul.relay-tree ul { list-style: none; margin: 0; padding: 0; }
ul.relay-tree ul { margin-left: 6px; padding-left: 18px; border-left: 1px solid var(--rule); }
.relay-node { position: relative; margin: 0; padding-block: 5px; overflow-wrap: anywhere; }
.relay-node + .relay-node { margin-top: 0; }
ul.relay-tree ul > .relay-node::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 1.05rem;
  width: 12px;
  height: 1px;
  background: var(--rule);
}
.relay-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-weight: 600; }
.relay-visits { margin-left: var(--s2); color: var(--ink-soft); }
.relay-node.is-insider > .relay-label { color: var(--postal); }

/* ---------- 14. Stats & timeline ---------------------------------------- */
dl.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: var(--s4);
  margin: 0;
  padding-block: var(--s4);
  border-block: 1px solid var(--rule);
}
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.stat-num {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat-label { margin: 0; font-size: 0.8125rem; color: var(--ink-soft); }
ul.timeline { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
ul.timeline li {
  margin: 0;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--s3);
  padding-block: 10px;
  border-bottom: 1px solid var(--rule);
}
ul.timeline li:first-child { border-top: 1px solid var(--rule); }
.timeline .when { font-family: var(--font-mono); color: var(--ink-soft); }
@media (max-width: 400px) { ul.timeline li { grid-template-columns: 88px minmax(0, 1fr); } }

/* ---------- 15. Wizard (write a letter) --------------------------------- */
.wizard { display: grid; gap: var(--s5); min-width: 0; }
ol.wizard-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--s4);
  counter-reset: step;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
ol.wizard-steps li {
  flex: 1 1 auto;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--rule);
  counter-increment: step;
}
ol.wizard-steps li::before { content: counter(step, cjk-ideographic); font-family: var(--font-display); }
:lang(en) ol.wizard-steps li::before { content: counter(step, upper-roman); }
ol.wizard-steps li.is-current { color: var(--postal); font-weight: 700; border-bottom-color: var(--postal); }
ol.wizard-steps li.is-done { color: var(--ink); border-bottom-color: var(--rule-strong); }
ol.wizard-steps li.is-done::before { content: "\2713"; }
section.wizard-step { display: grid; gap: var(--s4); min-width: 0; }
.js .wizard-step:not(.is-current) { display: none; }

.wizard-nav {
  position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: space-between; gap: var(--s3);
  margin-inline: calc(var(--gutter) * -1); padding: var(--s3) var(--gutter); padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
  background: var(--sheet); border-top: 1px solid var(--rule);
}
@media (min-width: 700px) {
  .wizard-nav { position: static; margin-inline: 0; padding: var(--s4) 0 0; background: transparent; }
}

.place-picker { position: relative; }
ul.suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: 4px 0 0; padding: 0; list-style: none;
  max-height: 260px; overflow: auto; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: var(--shadow);
}
ul.suggestions li { margin: 0; }
ul.suggestions li + li { border-top: 1px solid var(--rule); }
ul.suggestions li > button {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: none;
  border: 0;
  color: var(--ink);
  text-align: left;
}
ul.suggestions li > button:hover, ul.suggestions li > button:focus-visible { background: var(--postal-tint); outline-offset: -3px; }
.picked-place {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  max-width: 100%;
  min-height: 40px;
  padding: 0 14px;
  background: var(--postal-tint);
  border: 1px solid var(--postal-line);
  border-radius: 999px;
  font-weight: 600;
}
.picked-place .link-button { padding: 9px 4px; font-size: 0.8125rem; font-weight: 400; }
.new-place {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--s3);
  padding: var(--s4); border: 1px dashed var(--rule-strong); border-radius: var(--radius);
}
.new-place > :is(h2, h3, h4, p, .hint, .eyebrow, .actions) { grid-column: 1 / -1; }
.add-coord { justify-self: start; }

.layer-preview { display: grid; gap: 16px; }
.layer { display: grid; gap: var(--s2); padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); }
.layer h3 { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; color: var(--postal); }
.layer-public { background: var(--sheet); border: 1px solid var(--rule-strong); }
.layer-sealed { background: var(--postal-tint); border-color: var(--postal); }
.layer-private { background: var(--paper); border: 1px dashed var(--ink-soft); }
.layer-private h3 { color: var(--ink-soft); }
ul.issues { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
li.issue { margin: 0; padding: 10px 14px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); }
.issue-block { background: var(--stamp-tint); border-color: var(--stamp); }
.issue-warn { background: var(--warn-tint); border-color: var(--warn); }
.ai-box { display: grid; gap: var(--s2); padding: 14px 16px; border: 1px dashed var(--postal); border-radius: var(--radius); }

/* The write form as a sheet of letter paper. */
.write-head h1 { font-weight: 500; }
form.letter-paper { gap: var(--s5); padding: clamp(18px, 4vw, 40px); box-shadow: var(--shadow); }
.letter-paper .wizard-step > h2 { font-weight: 500; font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.chapter-lede { font-family: var(--font-letter); color: var(--ink-soft); font-size: 1.05em; }
.letter-paper textarea {
  font-family: var(--font-letter); font-size: 1.1rem; line-height: 2rem; padding: 0.25rem 12px;
  background: var(--sheet) repeating-linear-gradient(transparent 0 calc(2rem - 1px), var(--rule) calc(2rem - 1px) 2rem);
  background-attachment: local; background-position: 0 0.25rem;
}
.letter-paper :is(input[type="text"], input[type="search"], input[type="number"], select) { background: transparent; border-width: 0 0 1px; border-radius: 0; padding-inline: 2px; }
.letter-paper :is(input[type="text"], input[type="search"], input[type="number"]):focus-visible { border-color: var(--postal); outline: none; box-shadow: 0 1px 0 var(--postal); }
.radio-cards.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-cards.chips label.radio-card {
  display: inline-flex; align-items: center; gap: 0; padding: 6px 14px; border-radius: 999px; min-height: 38px; background: transparent;
}
.radio-cards.chips label.radio-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.radio-cards.chips .radio-card-title { font-weight: 400; }
.radio-cards.chips label.radio-card:has(input:checked) { background: var(--postal); border-color: var(--postal); color: var(--postal-ink); box-shadow: none; }
details.more { border-top: 1px dashed var(--rule-strong); padding-top: var(--s3); }
details.more > summary { font-weight: 400; color: var(--postal); }
details.more[open] > summary { margin-bottom: var(--s3); }
.sealed-sheet {
  position: relative; padding: var(--s5) var(--s4) var(--s4); margin-top: var(--s3);
  background: var(--postal-tint); border-radius: var(--radius); border: 1px solid var(--postal-line);
}
.sealed-mark {
  position: absolute; top: 10px; right: 12px; width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c4553d, #8e2a20); color: #fbe6d8;
  font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.1em; box-shadow: 0 3px 8px rgba(80, 20, 10, 0.35);
  transform: rotate(-8deg);
}
.sealed-sheet textarea { background-color: var(--sheet); }
.persona-card {
  display: grid; gap: var(--s3); padding: var(--s4) var(--s5); margin-bottom: var(--s4);
  border: 1px solid var(--postal-line); border-radius: var(--radius-lg); background: var(--sheet);
  box-shadow: inset 4px 0 0 var(--postal);
}
.persona-card h3 { font-weight: 500; }
.persona-card dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px var(--s4); margin: 0; }
@media (min-width: 560px) { .persona-card dl { grid-template-columns: 8em minmax(0, 1fr); } }
.persona-card dt { color: var(--ink-soft); font-size: 0.9rem; padding-top: 4px; }
.persona-card dd { margin: 0; }
ul.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
li.tag { margin: 0; padding: 2px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); font-size: 0.95rem; }
li.tag-place { border-color: var(--postal-line); }
li.tag-year { font-variant-numeric: tabular-nums; }
/* How much of TA's portrait the letter covers (v0.5). */
.coverage { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px dashed var(--rule); }
.coverage-line { margin: 0; font-size: 0.95rem; }
li.tag-on { border-color: var(--postal-line); background: var(--postal-tint); }
li.tag-off { opacity: 0.6; border-style: dashed; }
.coverage-add { margin: 0; padding-left: 1.2em; color: var(--ink-soft); }
.coverage-add li + li { margin-top: 2px; }
.portrait-events { margin: 0; padding-left: 1.2em; }

/* ---------- 16. Claims & the sought person's choices -------------------- */
dl.qa { display: grid; gap: 4px; margin: 0; }
dl.qa dt { font-weight: 700; }
dl.qa dt:not(:first-child) { margin-top: var(--s3); }
dl.qa dd { margin: 0; }
dl.qa dd.expected { font-size: 0.875rem; color: var(--ink-soft); }
.meter {
  --v: 0;
  position: relative;
  display: inline-block;
  width: 80px;
  height: 6px;
  overflow: hidden;
  vertical-align: middle;
  background: var(--rule);
  border-radius: 3px;
}
.meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--postal); }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.choice { display: flex; flex-direction: column; gap: var(--s2); }
.choice > :is(form, .btn, .actions) { margin-top: auto; padding-top: var(--s2); }
.choice .btn { width: 100%; }
.choice-primary, .reunion-box { border-color: var(--postal); box-shadow: inset 0 0 0 1px var(--postal); }
.reunion-box :is(h2, h3) { color: var(--postal); }

/* ---------- 17. Channel (chat) ------------------------------------------ */
.chat { display: grid; gap: 12px; min-width: 0; }
ul.chat-log {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
@media (min-width: 700px) { ul.chat-log { max-height: 60vh; } }
li.msg {
  margin: 0;
  max-width: 80%;
  padding: 10px 14px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow-wrap: anywhere;
}
.msg-mine { align-self: flex-end; background: var(--postal-tint); border-color: var(--postal); }
.msg-theirs { align-self: flex-start; }
li.msg-system {
  align-self: center;
  max-width: 100%;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-align: center;
}
li.msg-sealed {
  align-self: stretch; max-width: 100%; padding: 24px; border: 1px solid var(--stamp); border-radius: 2px;
  background-color: var(--sheet);
  background-image:
    linear-gradient(to bottom, transparent calc(2em - 1px), var(--stamp-line) calc(2em - 1px)),
    repeating-linear-gradient(90deg, var(--stamp-line) 0 1px, transparent 1px 2em);
  background-size: 100% 2em, auto; background-position: 0 24px, 0 0;
  box-shadow: inset 0 0 0 4px var(--sheet), inset 0 0 0 5px var(--stamp-line);
  font-family: var(--font-display); font-size: 1.0625rem; line-height: 2; white-space: pre-line;
}
.msg-meta {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.msg-risk {
  display: block;
  margin-top: var(--s2);
  padding: 6px 10px;
  background: var(--warn-tint);
  border-radius: 3px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--warn-text);
  white-space: normal;
}

form.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s2); }
form.chat-form textarea { min-height: 44px; }
@media (max-width: 699px) {
  form.chat-form {
    position: sticky; bottom: 0; z-index: 10; margin-inline: calc(var(--gutter) * -1);
    padding: 10px var(--gutter); padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--rule);
  }
}
.contact-box { gap: var(--s2); }

/* ---------- 18. Place ---------------------------------------------------- */
.place-head { display: grid; gap: var(--s2); padding-block: var(--s5); }
.decade-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--rule-strong);
}
.bar { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.bar-fill {
  display: block;
  width: 100%;
  height: calc(var(--h, 0) * 100%);
  min-height: 2px;
  background: var(--postal);
  border-radius: 2px 2px 0 0;
}
.bar-label {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 6px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
@media (max-width: 480px) { .decade-bars { gap: 3px; } .bar-label { font-size: 0.625rem; letter-spacing: -0.03em; } }

/* ---------- 19. Notifications ------------------------------------------- */
ul.notif-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
ul.notif-list li { position: relative; margin: 0; padding: 14px 0 14px 20px; border-bottom: 1px solid var(--rule); }
ul.notif-list li.is-unread { font-weight: 600; }
ul.notif-list li.is-unread::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.2rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--postal);
}
.notif-time { display: block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; color: var(--ink-soft); }

/* ---------- 20. Tables & empty states ----------------------------------- */
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
table.table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
table.table td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.empty {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s6) var(--s4);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- 21. Login & error pages ------------------------------------- */
.auth-box { width: 100%; max-width: 440px; margin: var(--s6) auto; gap: var(--s4); }
.site-main > .auth-box { width: calc(100% - var(--gutter) * 2); }
.personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: var(--s3); }
button.persona {
  display: grid; gap: 2px; width: 100%; min-height: 56px; padding: 12px 14px; text-align: left;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink);
}
button.persona:hover { background: var(--postal-tint); border-color: var(--postal); }
.persona-name { font-family: var(--font-display); font-weight: 700; }
.persona-role { font-size: 0.8125rem; color: var(--ink-soft); }
.persona-role.mono { font-size: 0.75rem; overflow-wrap: anywhere; }
.demo-accounts summary { cursor: pointer; }
.demo-accounts summary h2 { display: inline; font-size: 1.2rem; }
.error-page { display: grid; justify-items: center; gap: var(--s3); padding-block: clamp(48px, 12vw, 120px); text-align: center; }
.error-page :is(.error-code, .error-status, .status, .code) {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 18vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--stamp);
}

/* ---------- 22. Motion & print ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  .demo-bar, .site-header, .site-footer, .wizard-nav, .chat-form, .skip-link, .actions, .letter-actions { display: none !important; }
  body { background: #fff; color: #000; }
  .envelope, .share-card { break-inside: avoid; }
}

/* Row lists used on the dashboard and privacy pages: ul.stack > li.split */
ul.stack { list-style: none; padding: 0; margin: 0; }
ul.stack > li.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2, 8px) var(--s4, 16px);
  padding-block: var(--s2, 8px);
  border-bottom: 1px solid var(--rule);
}

/* ---------- 23. Journey: where a letter has been ------------------------ */
/* Chart palette (validated for colour-blind separation on both surfaces);
   shapes carry identity too: dot = relay, diamond = insider, small dot =
   people there, star = might be them. */
:root {
  --j-relay: #b5562c;
  --j-people: #2f7fb8;
  --j-maybe: #a8800e;
  --j-insider: #7a4f9a;
  --j-track: #efe1cb;
  --j-band: #e5c08c;
  --j-fill: #c8642f;
  --j-grid: #e6d8c2;
}
/* The journey panel sits on the night, so the night palette is the base. */
:root { --j-relay: #cf7a36; --j-people: #3f93cf; --j-maybe: #ad8a1c; --j-insider: #a47ad0; --j-track: #34261b; --j-band: #6a4b2c; --j-fill: #f2b35c; --j-grid: #3a2c20; }

.journey {
  display: grid; gap: var(--s5); padding: clamp(18px, 4vw, 36px);
  background: var(--sheet) var(--grain); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.journey-head h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); }
.journey-grid { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 860px) { .journey-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.journey-map-wrap { display: grid; gap: var(--s3); justify-items: center; }
.journey-map { width: 100%; max-width: 520px; height: auto; overflow: visible; }
.jm-ring { fill: none; stroke: var(--j-grid); stroke-width: 1; }
.jm-people-ring { fill: none; stroke: var(--j-grid); stroke-width: 1; }
.jm-ring-label { fill: var(--ink-soft); font-size: 12px; letter-spacing: 0.08em; }
.jm-label { fill: var(--ink-soft); font-size: 13px; }
.jm-edge { fill: none; stroke: var(--j-relay); stroke-opacity: 0.35; stroke-width: 1.5; }
.jm-flow { fill: none; stroke: var(--candle); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 18; animation: jm-flow 2.6s linear infinite; }
@keyframes jm-flow { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
.jm-node, .jm-group, .tl-mark { outline: none; cursor: default; }
.jm-node :not(.jm-halo) { stroke: var(--sheet); stroke-width: 2; }
.jm-relay { fill: var(--j-relay); }
.jm-insider { fill: var(--j-insider); }
.jm-halo { fill: var(--candle); opacity: 0.16; }
.jm-node:is(:hover, :focus-visible) .jm-halo, .jm-group:is(:hover, :focus-visible) { opacity: 1; }
.jm-node:is(:hover, :focus-visible) .jm-halo { opacity: 0.4; }
.jm-people { fill: var(--j-people); stroke: var(--sheet); stroke-width: 2; }
.jm-maybe { fill: var(--j-maybe); stroke: var(--sheet); stroke-width: 1.5; }
.jm-you path { fill: var(--j-fill); }
.jm-target path { fill: var(--j-maybe); }
.jm-target { animation: breathe 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.journey-map.is-compact .jm-ring-label, .journey-map.is-compact .jm-label { display: none; }

.journey-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 0.92rem; color: var(--ink-soft); }
.journey-legend li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.jm-key { width: 18px; height: 18px; flex: none; }
.jm-key.jm-you path { fill: var(--j-fill); }
.jm-key.jm-people circle { fill: var(--j-people); }
.jm-key.jm-maybe path { fill: var(--j-maybe); }

.dawn-meter { margin: 0; display: grid; justify-items: center; gap: 2px; }
.dawn-meter svg { width: min(100%, 280px); height: auto; overflow: visible; }
.dm-track, .dm-band, .dm-fill { fill: none; stroke-linecap: round; }
.dm-track { stroke: var(--j-track); stroke-width: 14; }
.dm-band { stroke: var(--j-band); stroke-width: 14; stroke-linecap: butt; }
.dm-fill { stroke: var(--j-fill); stroke-width: 6; }
.dm-horizon { stroke: var(--rule-strong); stroke-width: 1; }
.dm-sun { fill: var(--j-fill); stroke: var(--sheet); stroke-width: 3; filter: drop-shadow(0 0 8px var(--candle)); }
.dawn-meter figcaption { display: grid; justify-items: center; text-align: center; }
.dm-value { font-family: var(--font-body); font-size: clamp(2.6rem, 7vw, 3.4rem); font-weight: 600; line-height: 1.1; color: var(--ink); }
.dm-note { font-size: 0.9rem; color: var(--ink-soft); }
.journey-when { text-align: center; font-family: var(--font-letter); font-size: 1.15rem; }
.factors { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 0; }
.factor { padding: 2px 10px; border-radius: 999px; font-size: 0.85rem; border: 1px solid var(--rule); color: var(--ink-soft); }
.factor.is-up { border-color: var(--postal-line); color: var(--ink); }
.journey-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding-top: var(--s3); border-top: 1px solid var(--rule); text-align: center; }
.journey-stats div { display: flex; flex-direction: column-reverse; }
.journey-stats dt { font-size: 0.85rem; color: var(--ink-soft); }
.journey-stats dd { margin: 0; font-size: 1.5rem; font-weight: 600; }

.timeline-chart { margin: 0; }
.timeline-chart svg { display: block; width: 100%; max-width: 780px; margin-inline: auto; height: auto; overflow: visible; }
.tl-axis { stroke: var(--rule-strong); stroke-width: 1; }
.tl-today { stroke: var(--ink-soft); stroke-width: 1; }
.tl-window { fill: var(--candle); opacity: 0.18; }
.tl-label { fill: var(--ink-soft); font-size: 13px; }
.tl-window-label { fill: var(--ink); }
.tl-mark { fill: var(--j-relay); stroke: var(--sheet); stroke-width: 1.5; }
.tl-sent path { fill: var(--j-fill); stroke: none; }
.tl-insider { fill: var(--j-insider); }
.tl-match { fill: var(--j-people); }
.tl-claim { fill: var(--j-maybe); }
.tl-channel circle { stroke: var(--j-fill); fill: none; }
.tl-reunion { fill: var(--j-fill); }
.journey-list summary { font-weight: 400; color: var(--ink-soft); }

.journey-help h3 { margin-bottom: var(--s3); }
ul.helps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
ul.helps li {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4);
  padding: 2px 0 2px 26px; position: relative;
}
/* A small flame before each idea: things to try, not boxes to fill in. */
ul.helps li::before {
  content: ""; position: absolute; left: 6px; top: 0.55em; width: 8px; height: 11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #ffe2a8, var(--candle) 60%, transparent 75%);
}
.sg-title { font-family: var(--font-letter); font-size: 1.08rem; }
.sg-gain { font-size: 0.9rem; color: var(--postal); }
.journey-honest { max-width: 70ch; }
.relay-tree-list summary { font-weight: 600; }

.journey-card {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s4); align-items: center;
  padding: var(--s4); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  color: var(--ink); text-decoration: none; transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.journey-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.journey-card .journey-map { max-width: 120px; }
.jc-text { display: grid; gap: 2px; }
.jc-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.jc-value { font-size: 1.6rem; font-weight: 600; color: var(--postal); }
.jc-note { font-size: 0.88rem; color: var(--ink-soft); }
.letter-paper { padding: clamp(16px, 3vw, 28px); background: var(--sheet) var(--grain); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
@media (prefers-reduced-motion: reduce) { .jm-flow { display: none; } }
.journey-cards { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
@media (max-width: 600px) {
  .jm-ring-label { font-size: 20px; }
  .jm-label { font-size: 22px; }
  .tl-label { font-size: 22px; }
}

/* ---------- 24. /demo: one reunion, three points of view ---------------- */
.demo-page .site-main { padding-bottom: 0; }
.demo-night {
  color: var(--night-ink); padding-block: clamp(40px, 8vw, 96px) clamp(64px, 10vw, 120px);
  background: linear-gradient(180deg, rgba(18, 12, 8, 0) 0%, #1d140d 30%, #2e2025 70%, #44303f 100%);
}
.demo-intro { text-align: center; display: grid; justify-items: center; gap: var(--s3); }
.demo-title { color: var(--night-ink); font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 500; }
:lang(en) .demo-title { font-family: "Cormorant Garamond", var(--font-display); font-style: italic; }
.demo-roles { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: clamp(16px, 3vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.demo-role {
  margin: 0; display: grid; justify-items: center; align-content: start; gap: var(--s2); text-align: center;
  padding: clamp(22px, 4vw, 34px) clamp(18px, 3vw, 28px);
  background: rgba(255, 240, 220, 0.04); border: 1px solid rgba(243, 230, 210, 0.12); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 60px -30px rgba(242, 179, 92, 0.4);
}
.demo-role h2 { color: var(--night-ink); font-size: 1.6rem; font-weight: 500; }
.demo-role-who { color: var(--candle); font-size: 0.9rem; letter-spacing: 0.12em; }
.demo-role-line { color: var(--night-ink-soft); font-family: var(--font-letter); min-height: 3.6em; }
.demo-role-art { height: 110px; display: grid; place-items: center; color: var(--night-ink-soft); }
.demo-role-art svg { height: 100%; width: auto; }
.demo-role-art .art-desk { height: 110px; width: auto; }
.demo-role-art .art-lantern { height: 90px; width: auto; }
.demo-role-art .art-hands { width: 130px; height: auto; }
.demo-role .btn { margin-top: var(--s3); justify-self: center; }
.demo-try { margin-top: var(--s6); display: grid; justify-items: center; gap: var(--s3); text-align: center; color: var(--night-ink-soft); }

.demo-scene-page .site-main { padding-bottom: 0; }
.demo-ribbon { background: var(--night); color: var(--night-ink-soft); font-size: 0.9rem; }
.demo-ribbon .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-block: 8px; }
.demo-ribbon a { color: var(--candle); }
.demo-stage { position: relative; padding-bottom: 220px; }
.demo-stage[inert] :is(a, button, input, textarea, select, summary) { cursor: default; }
.demo-narration {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: linear-gradient(180deg, rgba(20, 14, 9, 0.88), rgba(20, 14, 9, 0.97));
  color: var(--night-ink); border-top: 1px solid rgba(242, 179, 92, 0.25);
  box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px);
  padding-bottom: env(safe-area-inset-bottom);
}
.demo-narration-inner { display: grid; gap: var(--s3); padding-block: var(--s4); }
@media (min-width: 860px) { .demo-narration-inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s5); } }
.demo-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.demo-dots li { margin: 0; width: 8px; height: 8px; border-radius: 50%; background: rgba(243, 230, 210, 0.2); }
.demo-dots li.is-done { background: var(--candle); box-shadow: 0 0 8px var(--candle); }
.demo-scene-title { font-family: var(--font-display); font-size: 1.25rem; color: var(--night-ink); }
:lang(en) .demo-scene-title { font-family: "Cormorant Garamond", var(--font-display); font-style: italic; font-size: 1.45rem; }
.demo-scene-line { font-family: var(--font-letter); color: var(--night-ink-soft); max-width: 62ch; }
.demo-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.reached {
  padding: var(--s5); border-radius: var(--radius-lg); text-align: center; justify-items: center;
  background: radial-gradient(120% 140% at 50% 0%, rgba(242, 179, 92, 0.28), transparent 60%), var(--sheet);
  border: 1px solid var(--postal-line);
}
.reached-line { font-family: var(--font-letter); font-size: 1.2rem; max-width: 36em; }
.demo-try .btn { justify-self: center; }

/* ---------- 25. One night, everywhere ------------------------------------ */
/* Panels on the night are candle-lit glass; paper is lit from the side. */
.card, .lamp-card, .story-card, .contact-box, .choice, .reunion-box, .journey, .table-wrap, .ai-box, .reached {
  background: var(--panel); border-color: var(--panel-line);
}
.journey { background: var(--panel); }
.paper, .envelope, .letter-paper, .share-card, .persona-card, .auth-box, .claim {
  background: var(--sheet) var(--grain);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255, 220, 160, 0.10), 0 26px 60px -26px rgba(0, 0, 0, 0.9), 0 0 90px -30px rgba(242, 160, 74, 0.32);
}
.envelope { border-radius: 4px; }
.page-head h1, .page-head .lede { text-wrap: balance; }
.site-footer { border-top-color: rgba(243, 230, 210, 0.07); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.25)); }
.site-footer .footer-line { color: var(--ink); }
:is(input, select, textarea):not(.paper *, .envelope *, .letter-paper *, .claim *, .auth-box *) {
  background-color: rgba(255, 240, 220, 0.04);
  border-color: rgba(243, 230, 210, 0.22);
}
.alert-info { background: rgba(242, 179, 92, 0.08); border-color: rgba(242, 179, 92, 0.3); }
.alert-success { background: rgba(160, 200, 140, 0.10); border-color: rgba(160, 200, 140, 0.35); }
.alert-warn { background: rgba(231, 184, 102, 0.10); border-color: rgba(231, 184, 102, 0.35); }
.alert-danger { background: rgba(236, 143, 115, 0.10); border-color: rgba(236, 143, 115, 0.4); }
.paper .alert, .letter-paper .alert, .envelope .alert { background: var(--postal-tint); border-color: var(--postal-line); }
.routing-hint { background: rgba(242, 179, 92, 0.06); border-color: rgba(242, 179, 92, 0.22); }
.routing-hint :is(h2, h3, h4) { color: var(--candle); }

/* ---------- 26. The letter's journey page -------------------------------- */
.js-closeness { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px var(--s3); margin: 0; text-align: center; }
.js-closeness .cl-label { font-size: 0.875rem; color: var(--ink-soft); }
.js-closeness .cl-level { font-weight: 600; color: var(--candle); }
.js-closeness .cl-trend { flex-basis: 100%; }
.journey-page { max-width: 1100px; }
.journey-page-head { padding-bottom: 0; }
.journey-hero { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .journey-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.globe { margin: 0; display: grid; gap: var(--s3); justify-items: center; position: relative; }
.globe-canvas { display: block; width: 100%; touch-action: pan-y; cursor: grab; }
.globe-canvas:active { cursor: grabbing; }
.globe.has-globe .globe-fallback { display: none; }
@media print { .globe-canvas { display: none; } .globe.has-globe .globe-fallback { display: block; } }
.journey-side { display: grid; gap: var(--s4); justify-items: center; text-align: center; }
.js-steps { font-family: var(--font-letter); font-size: 1.2rem; max-width: 26em; color: var(--ink); }
.journey-primary { justify-content: center; }
.btn-note { font-size: 0.85em; font-weight: 400; opacity: 0.75; margin-left: 0.4em; }
.responses-now { padding: var(--s5); border-radius: var(--radius-lg); background: radial-gradient(120% 120% at 50% 0%, rgba(242, 179, 92, 0.16), transparent 60%), var(--panel); border: 1px solid rgba(242, 179, 92, 0.3); }
.folds { display: grid; gap: var(--s3); }
details.fold { border-top: 1px solid var(--panel-line); }
details.fold > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--ink);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "+"; font-family: var(--font-body); color: var(--candle); font-size: 1.4rem; transition: transform 0.3s var(--ease); }
details.fold[open] > summary::after { transform: rotate(45deg); }
.fold-body { padding-bottom: var(--s5); }
details.add-clues > summary { list-style: none; display: inline-flex; }
details.add-clues > summary::-webkit-details-marker { display: none; }
details.add-clues[open] > summary { margin-bottom: var(--s3); }
details.secrets { padding: var(--s3) var(--s4); border-radius: var(--radius); }
.end-letter { max-width: 420px; }

/* ---------- 27. The letter takes flight ---------------------------------- */
.flight {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: auto; cursor: pointer;
  background: radial-gradient(60vmax 50vmax at 50% 55%, rgba(242, 160, 74, 0.18), transparent 60%), #0f0b10;
  animation: flight-out 0.8s var(--ease) 3.6s forwards;
}
.flight.is-done { animation: flight-out 0.4s var(--ease) forwards; }
.flight-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flight-caption {
  position: absolute; bottom: 18vh; left: 0; right: 0; text-align: center; color: var(--night-ink);
  font-family: var(--font-letter); font-size: 1.3rem; opacity: 0; animation: rise 1s var(--ease) 2.2s forwards;
}
.fl-sheet { transform-box: fill-box; transform-origin: 50% 50%; animation: fl-fold 1.1s var(--ease) 0.4s forwards; }
.fl-plane { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: fl-appear 0.3s ease 1.25s forwards, fl-fly 1.5s cubic-bezier(0.5, 0, 0.75, 0.4) 1.5s forwards; }
.fl-trail { stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: fl-trail 1.5s cubic-bezier(0.5, 0, 0.75, 0.4) 1.5s forwards; }
.fl-star { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: fl-star 1.2s var(--ease) 2.85s forwards; }
@keyframes fl-fold {
  0% { transform: none; opacity: 1; }
  45% { transform: scaleY(0.5) skewX(-12deg); opacity: 1; }
  100% { transform: scale(0.25, 0.15) rotate(-20deg); opacity: 0; }
}
@keyframes fl-appear { to { opacity: 1; } }
@keyframes fl-fly {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  60% { transform: translate(80px, -150px) scale(0.6) rotate(-12deg); opacity: 1; }
  100% { transform: translate(130px, -270px) scale(0.15) rotate(-25deg); opacity: 0; }
}
@keyframes fl-trail { to { stroke-dashoffset: 0; } }
@keyframes fl-star { 0% { opacity: 0; transform: scale(0.2); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes flight-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .flight { display: none; } }

/* One row of steps: numerals, with the current chapter named. */
.js .letter-paper ol.wizard-steps { flex-wrap: nowrap; gap: 6px; align-items: center; overflow: hidden; }
.js .letter-paper ol.wizard-steps li {
  flex: 0 0 auto; gap: 8px; padding: 0; border: 0; font-size: 0; color: var(--ink-soft); white-space: nowrap;
}
.js .letter-paper ol.wizard-steps li::before {
  font-size: 0.85rem; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--rule-strong); color: var(--ink-soft);
}
.js .letter-paper ol.wizard-steps li + li { margin: 0; }
.js .letter-paper ol.wizard-steps li.is-done::before { content: counter(step, cjk-ideographic); background: var(--postal-tint); border-color: var(--postal-line); color: var(--postal); }
:lang(en).js .letter-paper ol.wizard-steps li.is-done::before { content: counter(step, upper-roman); }
.js .letter-paper ol.wizard-steps li.is-current { flex: 1 1 auto; font-size: 1rem; color: var(--postal); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.js .letter-paper ol.wizard-steps li.is-current::before { background: var(--postal); border-color: var(--postal); color: var(--postal-ink); }
.js .letter-paper .wizard-step { animation: page-turn 0.45s var(--ease); }
@keyframes page-turn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* After passing a letter on: a lantern lights. */
.lightup { animation-delay: 2.6s; }
.lu-line { stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: fl-trail 0.9s var(--ease) 0.2s forwards; }
.lu-glow { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: fl-star 1.2s var(--ease) 1s forwards; }
.lu-inner { opacity: 0; animation: fl-appear 0.6s ease 1s forwards; }
.lightup .flight-caption { animation-delay: 1.2s; }

/* The share page: one warm action first, everything else folded. */
.send-it textarea { font-family: var(--font-letter); font-size: 1.05rem; line-height: 1.8; }
.share-who { margin: 0; }
.my-light {
  display: grid; gap: var(--s3); padding: var(--s5); border-radius: var(--radius-lg); text-align: center; justify-items: center;
  background: radial-gradient(100% 120% at 50% 0%, rgba(242, 179, 92, 0.22), transparent 60%), var(--panel); border: 1px solid rgba(242, 179, 92, 0.3);
}
.ml-lit { font-family: var(--font-letter); font-size: 1.3rem; color: var(--candle-soft); }
.ml-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: 0; width: 100%; }
.ml-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; text-align: center; }
.ml-stats dt { line-height: 1.35; }
.ml-stats dt { font-size: 0.85rem; color: var(--ink-soft); }
.ml-stats dd { margin: 0; font-size: 1.8rem; font-weight: 600; color: var(--ink); }
.qr-wrap { display: grid; gap: var(--s2); justify-items: start; }

/* ---------- 28. My light (people who pass letters on) -------------------- */
.light-head { text-align: center; justify-items: center; }
.light-sky { margin: 0; }
.light-constellation { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; overflow: visible; }
.lc-lines line { stroke: rgba(247, 207, 142, 0.35); stroke-width: 1.2; stroke-dasharray: 2 6; }
.lc-halo { fill: url(#lc-glow); animation: breathe 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lc-core { fill: #f7cf8e; }
.lc-star.is-found .lc-core { fill: #fff4d6; }
.lc-ring { fill: none; stroke: #e8be50; stroke-width: 1.5; stroke-dasharray: 3 3; animation: lc-turn 24s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes lc-turn { to { transform: rotate(360deg); } }
.lc-dust circle { fill: rgba(240, 226, 200, 0.35); animation: lc-twinkle 5s ease-in-out var(--d, 0s) infinite; }
@keyframes lc-twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lc-dust circle, .lc-ring, .lc-halo { animation: none; } }
.lc-star:focus-visible .lc-halo { fill: rgba(255, 220, 150, 0.6); }
.light-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 45%), 1fr)); gap: var(--s4); margin: 0; text-align: center; }
.light-stats div { display: flex; flex-direction: column-reverse; padding: var(--s3); border-radius: var(--radius); background: var(--panel); border: 1px solid var(--panel-line); }
.light-stats dt { font-size: 0.88rem; color: var(--ink-soft); }
.light-stats dd { margin: 0; font-size: 2rem; font-weight: 600; color: var(--candle-soft); }
ul.light-letters { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
ul.light-letters li { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding: var(--s4); border-radius: var(--radius); background: var(--panel); border: 1px solid var(--panel-line); }
.ll-text { display: grid; gap: 2px; min-width: 0; }
.ll-title { font-family: var(--font-letter); font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.ll-title:hover { text-decoration: underline; }
.ll-line, .ll-when { font-size: 0.88rem; color: var(--ink-soft); }
.ll-found { color: #e8be50; font-weight: 600; }
.light-empty { display: grid; justify-items: center; gap: var(--s5); padding-block: var(--s6); }
.light-empty-art .art-desk { width: 260px; max-width: 100%; height: auto; }

/* ---------- 29. /me ------------------------------------------------------ */
.waiting { display: grid; gap: var(--s2); }
.waiting-item {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--radius-lg);
  background: radial-gradient(120% 140% at 0% 50%, rgba(242, 179, 92, 0.22), transparent 60%), var(--panel);
  border: 1px solid rgba(242, 179, 92, 0.35); color: var(--ink); text-decoration: none; font-family: var(--font-letter); font-size: 1.1rem;
}
.waiting-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--candle); box-shadow: 0 0 12px var(--candle); animation: breathe 2.4s ease-in-out infinite; }
.me-empty { display: grid; gap: var(--s3); justify-items: start; padding: var(--s5); border-radius: var(--radius-lg); background: var(--panel); border: 1px solid var(--panel-line); font-family: var(--font-letter); }
.light-card {
  display: grid; gap: 4px; padding: var(--s4) var(--s5); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink);
  background: radial-gradient(120% 160% at 100% 0%, rgba(120, 100, 170, 0.25), transparent 60%), var(--panel); border: 1px solid var(--panel-line);
}
.lcard-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--candle-soft); }
.lcard-line { color: var(--ink-soft); }
.quiet-card { display: grid; gap: var(--s2); padding: var(--s5); border-radius: var(--radius-lg); border: 1px dashed var(--panel-line); }
.quiet-card h2 { font-size: 1.15rem; }
.me-links { gap: var(--s2) var(--s5); font-size: 0.95rem; }
.me-links a, .me-links .link-button { color: var(--ink-soft); }
.envelope-part { padding: var(--s4); border: 1px dashed var(--rule-strong); border-radius: var(--radius); }
.envelope-mark { font-size: 0.9rem; color: var(--ink-soft); letter-spacing: 0.06em; }
.sealed-sheet .hint { color: var(--ink-soft); }
@media (max-width: 600px) { .write-head { padding-block: var(--s4) var(--s3); } .write-head .lede { font-size: 1rem; } }
.is-it-you { margin-top: var(--s4); font-size: 0.95rem; color: var(--ink-soft); }
.envelope .routing-hint { background: var(--postal-tint); border-color: var(--postal-line); }
.envelope .routing-hint :is(h2, h3, h4) { color: var(--postal); }
.envelope .btn-moon { --btn-fg: var(--postal); --btn-bd: var(--postal); --btn-hover: var(--postal-tint); }
.crossing-link { color: var(--candle-soft); text-decoration: none; border-bottom: 1px dashed rgba(247, 207, 142, 0.5); }
.qa-who { color: var(--ink-soft); font-size: 0.88em; margin-right: 0.3em; }
ul.consequences { margin: 0; padding-left: 1.2em; color: var(--ink-soft); }

/* A sheet used as a page section (the "I might know them" page, the progress page's secrets). */
section.paper { padding: var(--s5) var(--s4); border-radius: var(--radius-lg); }
@media (min-width: 640px) { section.paper { padding: var(--s6) var(--s6); } }

/* "Add a clue" as a sheet of paper over the page. */
dialog.sheet-dialog {
  --paper: #ead8b6; --sheet: #f4e6cb; --ink: #33251a; --ink-soft: #6e5a44; --rule: #dcc7a3;
  width: min(560px, calc(100% - 32px)); max-height: min(86vh, 900px); overflow: auto;
  padding: var(--s5) var(--s5) var(--s6); border: 0; border-radius: var(--radius-lg);
  background: var(--sheet) var(--grain); color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 120px -30px rgba(242, 160, 74, 0.45);
}
dialog.sheet-dialog[open] { animation: sheet-in 0.45s var(--ease); }
dialog.sheet-dialog::backdrop { background: rgba(10, 7, 9, 0.72); backdrop-filter: blur(3px); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.sheet-head h2 { margin: 0; font-size: 1.35rem; }
.sheet-close { border: 0; background: none; font-size: 1.7rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.sheet-close:hover, .sheet-close:focus-visible { color: var(--ink); background: rgba(0, 0, 0, 0.06); }
.sheet-body .letter-paper { box-shadow: none; padding: 0; background: none; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet-dialog[open] { animation: none; } }

/* The first share page: the letter's globe, small, where the star lands. */
.share-globe { max-width: 420px; margin: 0 auto; width: 100%; }
.share-globe .globe { margin: 0; }

/* Place search: nothing known by that name, or "none of these". */
.place-none { margin: 0 0 var(--s3); color: var(--postal); }
ul.suggestions button.suggest-new { color: var(--postal); font-style: italic; }

/* Narrow screens: only the numerals in the step row; the chapter's own heading names it. */
@media (max-width: 560px) {
  .js .letter-paper ol.wizard-steps { justify-content: space-between; }
  .js .letter-paper ol.wizard-steps li.is-current { flex: 0 0 auto; font-size: 0; }
}

/* Ending and deleting a letter are quiet and kept apart. */
.end-letter + form { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px dashed var(--rule); }

.light-page .timeline .when { white-space: nowrap; }
.light-terms { max-width: 60ch; }
.ml-stats.ml-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; margin: 0 auto; }

/* ---------- Lamp cards open the lamp; its share box ---------------------- */
.lamp-card { position: relative; }
.lamp-card:hover { border-color: var(--rule-strong); }
.lamp-card h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card is the click target */
.lamp-card:has(h3 a:focus-visible) { outline: 3px solid var(--postal); outline-offset: 2px; }
.lamp-card-msg { margin: 0; overflow-wrap: anywhere; }
.lamp-card-more { margin: 0; font-size: 0.875rem; color: var(--postal); }
.lantern-item .lamp-card-more { color: #8f3f2a; }
.lantern-item .lamp-card:hover { border-color: rgba(255, 255, 255, 0.9); }
.me-account { margin: 0; }