/* Echo Harbor: General Delivery - site styles.
   Palette from StarCourier/DesignSystem/Theme.swift. No web fonts, no external files. */

:root {
  color-scheme: light dark;
  --paper: #F4EFE6;
  --paper-deep: #EBE4D6;
  --surface: #FFFFFF;
  --raised: #FAF7F1;
  --ink: #2B2A33;
  --ink-dim: #625F6B;
  --ink-faint: #A29FA8;
  --line: rgba(43, 42, 51, .13);
  --line-strong: rgba(43, 42, 51, .28);
  --dot: rgba(43, 42, 51, .075);

  --coral: #E76F51;
  --teal: #2A9D8F;
  --mustard: #E9B949;
  --lavender: #8E7CC3;
  --sage: #7FB069;
  --sky: #5FA8D3;
  --coral-ink: #A8412A;
  --on-accent: #24232B;
  --lamp: #FFF1C9;
  --lamp-chip: #FBF0D5;
  --focus: #1F6F66;

  /* scene */
  --sky-top: #E6DFEE;
  --sky-bottom: #F9E6D3;
  --far: #E6DCC9;
  --far-dent: #DBD0BB;
  --wall: #FFFDF8;
  --wall-line: rgba(43, 42, 51, .16);
  --quay-top: #DCD2C0;
  --quay-face: #CFC4B0;
  --quay-joint: rgba(43, 42, 51, .10);
  --water: #BDDBE8;
  --wave: rgba(255, 255, 255, .85);
  --window: #D9D0C0;
  --beam: rgba(255, 241, 201, .95);
  --glyph-line: #D98A6A;
  --fixed-dark: #33323B;
  --stamp-paper: #FFFDF8;
  --star: rgba(255, 255, 255, 0);

  --shadow: 0 1px 2px rgba(43, 42, 51, .07), 0 14px 32px -18px rgba(43, 42, 51, .35);
  --shadow-soft: 0 1px 2px rgba(43, 42, 51, .06), 0 6px 16px -10px rgba(43, 42, 51, .3);

  --font-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --font-ui: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --font-letter: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --font-hand: Noteworthy, "Bradley Hand", "Segoe Print", ui-rounded, system-ui, sans-serif;
}
/* The app lets Chinese handwriting fall back to the system face; here Chinese "handwriting" uses the letter serif,
   so every device shows the same face. */
:lang(zh-Hans) { --font-hand: var(--font-letter); }

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1B1D27;
    --paper-deep: #14161F;
    --surface: #262938;
    --raised: #303447;
    --ink: #F2EEE6;
    --ink-dim: #B9B5BF;
    --ink-faint: #7E7A88;
    --line: rgba(255, 255, 255, .11);
    --line-strong: rgba(255, 255, 255, .24);
    --dot: rgba(255, 255, 255, 0);

    --coral: #F0806A;
    --teal: #3DB5A6;
    --mustard: #F0C45A;
    --lavender: #A392D6;
    --sage: #93C47D;
    --sky: #74B8E0;
    --coral-ink: #F0806A;
    --lamp-chip: #303447;
    --focus: #F0C45A;

    --sky-top: #191B2C;
    --sky-bottom: #2C2944;
    --far: #2A2C40;
    --far-dent: #24263A;
    --wall: #3A3E55;
    --wall-line: rgba(255, 255, 255, .10);
    --quay-top: #3B3E53;
    --quay-face: #303346;
    --quay-joint: rgba(255, 255, 255, .07);
    --water: #33546B;
    --wave: rgba(160, 200, 222, .55);
    --window: #252838;
    --beam: rgba(255, 241, 201, .75);
    --glyph-line: rgba(240, 196, 90, .0);
    --fixed-dark: #1F1E26;
    --stamp-paper: #E6DFD2;
    --star: rgba(255, 255, 255, .7);

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 36px -18px rgba(0, 0, 0, .7);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 18px -10px rgba(0, 0, 0, .6);
  }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 0.9px, transparent 1.2px);
  background-size: 26px 26px;
  background-position: 13px 13px;
  color: var(--ink);
  font: 1.0625rem/1.6 var(--font-text);
  overflow-wrap: break-word;
}
@media (prefers-color-scheme: dark) { body { background-image: none; } }
:lang(zh-Hans) body, body:lang(zh-Hans) { line-height: 1.8; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--coral-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
strong { font-weight: 650; }
p { margin: 0 0 .9em; }
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 700; letter-spacing: -.01em; font-family: var(--font-ui); }
.brand, .nav, .subtitle, .facts, .kicker, .stamp-label, .cta, .mail-button, .home-button, .toc, .steps li::before,
.slip-head, .shot figcaption, .shot .slot, .ledger h3, .address b, .knock-line, .faq summary, .foot .who, .contact-card .who { font-family: var(--font-ui); }
:lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3 { letter-spacing: .02em; }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 20;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 10px; text-decoration: none;
}
.skip:focus { top: 12px; color: var(--paper); }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 40em) { .wrap { padding: 0 28px; } }
@media (min-width: 64em) { .wrap { padding: 0 40px; } }

/* ---------- masthead ---------- */

.masthead { padding: 14px 0 0; }
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.05rem; padding: 4px 0; }
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 0 0 1px var(--line); }
.brand:hover { color: inherit; }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0; padding: 0; }
.nav a {
  display: inline-block; padding: 8px 10px; border-radius: 999px; text-decoration: none;
  color: var(--ink-dim); font-size: .95rem; line-height: 1.3; min-height: 36px;
}
.nav a:hover { color: var(--ink); background: var(--line); }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--coral); border-radius: 4px; }
.l-short { display: none; }
@media (max-width: 30em) {
  .masthead .wrap { gap: 8px 12px; }
  .nav ul { gap: 2px; }
  .nav a { padding: 8px 8px; }
  .l-full { display: none; }
  .l-short { display: inline; }
}
@media (max-width: 22.5em) {
  .brand span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
.nav .lang a { border: 1px solid var(--line-strong); color: var(--ink); }
.nav .lang a:hover { background: var(--surface); }

/* ---------- the knock: · · — ---------- */

.knock { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0 auto; padding: 18px 16px 6px; color: var(--coral-ink); }
.knock::before, .knock::after { content: ""; flex: 0 1 120px; border-top: 1.5px solid currentColor; opacity: .45; }
.knock svg { width: 58px; height: 58px; transform: rotate(-8deg); opacity: .85; }
.knock-inline { display: inline-flex; gap: .28em; align-items: center; vertical-align: middle; margin: 0 .15em; }
.knock-inline i { display: block; width: .42em; height: .42em; border-radius: 99px; background: currentColor; }
.knock-inline i:last-child { width: 1.3em; }

/* ---------- hero ---------- */

.hero { padding: 28px 0 8px; }
.hero .wrap { display: grid; gap: 34px; align-items: center; }
@media (min-width: 60em) {
  .hero { padding: 56px 0 24px; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; }
}

.address {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 0 0 18px; padding: 0 2px 6px; border-bottom: 1.5px dashed var(--line-strong);
  color: var(--ink-dim); font-size: .9rem;
}
.address b { font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.address span { font-family: var(--font-hand); color: var(--ink); font-size: 1.12rem; }
:lang(zh-Hans) .address b { letter-spacing: .2em; font-size: .8rem; }

.hero h1 { font-size: clamp(2.5rem, 9.5vw, 4.1rem); line-height: 1.02; letter-spacing: -.01em; }
.hero h1 .line2 {
  display: block; margin-top: .22em; font-size: .46em; letter-spacing: .01em; color: var(--coral-ink); font-weight: 650;
}
:lang(zh-Hans) .hero h1 { letter-spacing: .04em; }
:lang(zh-Hans) .hero h1 .line2 { letter-spacing: .3em; }
.subtitle { margin: 16px 0 14px; font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.pitch { font-family: var(--font-letter); font-size: 1.2rem; line-height: 1.55; color: var(--ink); max-width: 30em; margin-bottom: 26px; }
:lang(zh-Hans) .pitch { font-size: 1.12rem; line-height: 1.85; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.badge-link { display: inline-block; border-radius: 10px; text-decoration: none; }
.badge-link img { height: 54px; width: auto; }
.badge-slot {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 170px; height: 54px; border: 2px dashed var(--coral); border-radius: 10px;
  color: var(--coral-ink); font-size: .7rem; line-height: 1.25; text-align: center; font-weight: 600;
  background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(231, 111, 81, .07) 8px 16px);
}
.soon { margin: 0; font-weight: 600; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 14px 0 0; padding: 0; color: var(--ink-dim); font-size: .92rem; line-height: 1.5; }
.facts li { white-space: nowrap; }
.facts li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 0 0; border-radius: 50%; background: var(--teal); vertical-align: .15em; }

/* phones: name, then the postcard, then the pitch and the badge */
@media (max-width: 39.99em) {
  .hero { padding-top: 22px; }
  .hero .wrap { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .hero-text { display: contents; }
  .hero .address { order: 1; align-self: flex-start; }
  .hero h1 { order: 2; }
  .hero .postcard { order: 3; margin: 12px 0 18px; }
  .hero .subtitle { display: none; }
  .hero .pitch { order: 4; margin-bottom: 20px; }
  .hero .cta { order: 5; }
  .hero .facts { order: 6; }
  .hero .postcard figcaption { display: none; }
}
@media (max-width: 24em) {
  .hero .postcard .scene { height: 190px; }
  .hero .postcard .stamp { min-width: 46px; }
  .hero .postcard .postmark { min-width: 84px; }
}

/* postcard */
.postcard { position: relative; margin: 0; padding-top: 18px; }
.postcard .card {
  background: var(--surface); padding: 10px; border-radius: 18px; box-shadow: var(--shadow);
  transform: rotate(-1.1deg);
}
.postcard .scene { width: 100%; height: auto; border-radius: 12px; }
.postcard .stamp { position: absolute; right: 4%; top: 0; width: 17%; max-width: 92px; min-width: 58px; transform: rotate(4deg); filter: drop-shadow(0 2px 3px rgba(43, 42, 51, .18)); }
.postcard .postmark { position: absolute; right: 13%; top: 2%; width: 30%; max-width: 170px; min-width: 104px; transform: rotate(-9deg); pointer-events: none; }
.postcard figcaption { margin: 16px 6px 0; color: var(--ink-dim); font-size: .9rem; font-family: var(--font-hand); text-align: right; }
:lang(zh-Hans) .postcard figcaption { font-family: var(--font-letter); }

/* scene fills */
.sky-top { stop-color: var(--sky-top); }
.sky-bottom { stop-color: var(--sky-bottom); }
.beam-a { stop-color: var(--beam); }
.beam-b { stop-color: var(--beam); stop-opacity: 0; }
.glow-a { stop-color: var(--lamp); stop-opacity: .9; }
.glow-b { stop-color: var(--lamp); stop-opacity: 0; }
.f-far { fill: var(--far); }
.f-far-dent { fill: var(--far-dent); }
.f-wall { fill: var(--wall); stroke: var(--wall-line); stroke-width: 1.5; }
.f-coral { fill: var(--coral); }
.f-teal { fill: var(--teal); }
.f-mustard { fill: var(--mustard); }
.f-lavender { fill: var(--lavender); }
.f-sage { fill: var(--sage); }
.f-sky { fill: var(--sky); }
.f-lamp { fill: var(--lamp); }
.f-window { fill: var(--window); }
.f-dark { fill: var(--fixed-dark); }
.f-surface { fill: var(--surface); }
.f-paper-deep { fill: var(--paper-deep); }
.f-quay-top { fill: var(--quay-top); }
.f-quay-face { fill: var(--quay-face); }
.f-water { fill: var(--water); }
.f-stamp { fill: var(--stamp-paper); }
.s-joint { stroke: var(--quay-joint); stroke-width: 2; fill: none; stroke-linecap: round; }
.s-wave { stroke: var(--wave); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.s-lavender { stroke: var(--lavender); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s-mustard { stroke: var(--mustard); fill: none; stroke-width: 3.5; stroke-linecap: round; }
.s-dim { stroke: var(--ink-dim); fill: none; stroke-width: 3; stroke-linecap: round; }
.s-ink { stroke: var(--ink); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.s-faint { stroke: var(--ink-faint); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.s-sage { stroke: var(--sage); fill: none; stroke-width: 2.5; stroke-linecap: round; }
.glass { fill: var(--sage); fill-opacity: .32; }
.f-ink { fill: var(--ink); }
.env { fill: var(--surface); stroke: var(--ink-faint); stroke-width: 1.5; }
.win-lit { fill: var(--lamp); stroke: var(--mustard); stroke-width: 2.5; }
.gear { fill: none; stroke: var(--mustard); stroke-width: 3; stroke-dasharray: 2.4 1.6; }
.lantern { fill: var(--lamp); stroke: var(--mustard); stroke-width: 3; }
.s-ref { stroke: var(--lamp); stroke-width: 2.5; stroke-linecap: round; opacity: .8; }
.st-ground { fill: var(--on-accent); fill-opacity: .22; }
.route-solid { stroke: var(--coral); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s-onsky { stroke: var(--on-accent); stroke-opacity: .35; stroke-width: 2; fill: none; }
.seal-bg { fill: var(--surface); }
.seal-ring { fill: none; stroke: var(--mustard); stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; }
.s-cur { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.route { stroke: var(--coral); stroke-width: 3.5; stroke-dasharray: 0.5 8; stroke-linecap: round; fill: none; }
.glyph { fill: var(--lamp); stroke: var(--glyph-line); stroke-width: 2.5; }
.spark { fill: var(--mustard); }
.star { fill: var(--star); }
.pm { fill: none; stroke: var(--coral-ink); }
.s-teal { stroke: var(--teal); fill: none; stroke-width: 3; stroke-linecap: round; }
.s-sky { stroke: var(--sky); fill: none; stroke-width: 2; stroke-linecap: round; }
.s-dim-thin { stroke: var(--ink-dim); fill: none; stroke-width: 2; stroke-linecap: round; }
.lantern-s { fill: var(--lamp); stroke: var(--mustard); stroke-width: 2; }
.pm-text { fill: var(--coral-ink); font: 700 10.5px/1 var(--font-ui); letter-spacing: 1.6px; }
:lang(zh-Hans) .pm-text { font-size: 11px; letter-spacing: 3px; }
.pm-dot { fill: var(--coral-ink); }
.postmark { opacity: .78; }

@media (prefers-reduced-motion: no-preference) {
  .cart { animation: cart-walk 4.2s cubic-bezier(.45, .05, .35, 1) .8s both; }
  .flag { transform-box: view-box; transform-origin: 487.5px 238px; animation: flag-up .7s ease-out 5.1s both; }
  .glyph { animation: knock 4.8s ease-in-out 6s 1 both; }
  .glyph.k2 { animation-name: knock2; }
  .glyph.k3 { animation-name: knock3; }
}
@keyframes cart-walk { from { transform: translateX(-262px); } to { transform: translateX(0); } }
@keyframes flag-up { from { transform: rotate(90deg); } to { transform: rotate(0deg); } }
/* two knocks: short, short, long - pause - short, short, long */
@keyframes knock { 0%, 8.75%, 52.08%, 60.83%, 100% { opacity: 1; } 4.38%, 56.46% { opacity: .35; } }
@keyframes knock2 { 0%, 11.67%, 20.42%, 63.75%, 72.5%, 100% { opacity: 1; } 16.04%, 68.13% { opacity: .35; } }
@keyframes knock3 { 0%, 24.79%, 48.13%, 76.88%, 100% { opacity: 1; } 29.17%, 42.29%, 81.25%, 94.38% { opacity: .35; } }

/* ---------- sections ---------- */

.section { padding: 44px 0; }
@media (min-width: 60em) { .section { padding: 64px 0; } }
.kicker {
  display: inline-block; margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-dim);
}
:lang(zh-Hans) .kicker { letter-spacing: .3em; font-size: .8rem; }
.section h2 { font-size: clamp(1.6rem, 5vw, 2.25rem); margin-bottom: 14px; font-weight: 650; letter-spacing: -.005em; }
.stamp-label {
  display: inline-block; margin: 0 0 14px 2px; padding: 3px 10px 2px; border: 3px double currentColor; border-radius: 5px;
  color: var(--coral-ink); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5;
  transform: rotate(-2deg); transform-origin: left center; opacity: .9;
}
:lang(zh-Hans) .stamp-label { letter-spacing: .3em; font-size: .8rem; padding-right: 7px; }
.hand-label { margin: 0 0 10px; font-family: var(--font-hand); font-size: 1.2rem; line-height: 1.3; color: var(--ink-dim); }
:lang(zh-Hans) .hand-label { font-size: 1.05rem; }
.section .intro { max-width: 36em; color: var(--ink-dim); }

/* story */
.story .wrap { display: grid; gap: 30px; }
@media (min-width: 60em) { .story .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.letter {
  --lh: 1.7em; --rule: 1.34em;
  position: relative; border-radius: 6px 6px 16px 16px; padding: 28px 24px 18px;
  box-shadow: var(--shadow-soft); font-family: var(--font-letter); font-size: 1.14rem; line-height: 1.7;
  background-color: var(--raised);
  background-image:
    linear-gradient(transparent calc(var(--rule) - 1px), var(--line-strong) calc(var(--rule) - 1px), var(--line-strong) var(--rule), transparent var(--rule)),
    linear-gradient(var(--raised), var(--raised));
  background-size: 100% var(--lh), 100% 100%;
  background-repeat: repeat-y, no-repeat;
  background-origin: content-box, padding-box;
  background-clip: content-box, padding-box;
}
.letter::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(90deg, var(--coral) 0 18px, transparent 18px 26px, var(--teal) 26px 44px, transparent 44px 52px);
  opacity: .85;
}
@media (min-width: 40em) { .letter { padding: 34px 36px 22px; } }
:lang(zh-Hans) .letter { line-height: 1.9; --lh: 1.9em; --rule: 1.47em; }
.letter p { margin: 0; text-indent: 1.4em; }
:lang(zh-Hans) .letter p { text-indent: 2em; }
.letter .sign { font-family: var(--font-hand); text-align: right; text-indent: 0; color: var(--ink-dim); }

.question { margin: 26px 0 0; font-family: var(--font-letter); font-size: clamp(1.35rem, 3.8vw, 1.7rem); line-height: 1.4; }
.question .knock-line { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-family: var(--font-ui); font-size: 1rem; color: var(--ink-dim); }
.question .knock-line .knock-inline { color: var(--coral); font-size: 1.6rem; margin: 0; }

.residents { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 40em) and (max-width: 59.99em) { .residents { grid-template-columns: 1fr 1fr; } }
.residents li {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  padding: 14px 16px; background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--line);
}
.residents .res-icon { width: 44px; height: 44px; }
.residents h3 { font-size: 1.05rem; margin: 1px 0 3px; }
.residents p { margin: 0; color: var(--ink-dim); font-size: .98rem; line-height: 1.5; }

/* notice board */
.board {
  position: relative; background: var(--paper-deep); border-radius: 22px; padding: 28px 16px 22px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.board::after { content: ""; position: absolute; inset: 8px; border-radius: 16px; border: 1.5px dashed var(--line-strong); pointer-events: none; }
@media (min-width: 40em) { .board { padding: 40px 32px 30px; } }
.board-head { position: relative; z-index: 1; margin-bottom: 22px; }
.board-head .intro { margin: 0; }
.notes { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 40em) { .notes { grid-template-columns: 1fr 1fr; gap: 22px; } }
@media (min-width: 64em) { .notes { grid-template-columns: repeat(4, 1fr); } }
.note {
  position: relative; background: var(--surface); border-radius: 6px; padding: 26px 18px 18px;
  box-shadow: var(--shadow-soft);
}
.note::before {
  content: ""; position: absolute; top: 9px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%;
  background: var(--coral); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .2);
}
.notes li:nth-child(1) { transform: rotate(-.8deg); }
.notes li:nth-child(2) { transform: rotate(.6deg); }
.notes li:nth-child(3) { transform: rotate(-.4deg); }
.notes li:nth-child(4) { transform: rotate(.7deg); }
.notes li:nth-child(2)::before { background: var(--teal); }
.notes li:nth-child(3)::before { background: var(--lavender); }
.notes li:nth-child(4)::before { background: var(--sage); }
.note svg { width: 56px; height: 56px; margin-bottom: 12px; }
.note h3 { font-size: 1.08rem; margin-bottom: 6px; }
.note p { margin: 0; color: var(--ink-dim); font-size: .96rem; line-height: 1.55; }
.f-cell { fill: var(--paper-deep); }

.ledger { position: relative; z-index: 1; margin: 26px 0 0; padding: 18px 18px 8px; background: var(--surface); border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.ledger h3 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 8px; }
:lang(zh-Hans) .ledger h3 { letter-spacing: .3em; font-size: .8rem; }
.ledger ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 28px; }
@media (min-width: 40em) { .ledger ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .ledger ul { grid-template-columns: 1fr 1fr 1fr; } }
.ledger li { position: relative; padding: 9px 0 9px 22px; border-top: 1px dashed var(--line-strong); font-size: .96rem; line-height: 1.45; }
.ledger li::before { content: ""; position: absolute; left: 3px; top: 1.05em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
@media (min-width: 40em) { .ledger li:nth-child(-n+2) { border-top: 0; } }
@media (max-width: 39.99em) { .ledger li:first-child { border-top: 0; } }
@media (min-width: 64em) { .ledger li:nth-child(3) { border-top: 0; } }

/* part one notice */
.part {
  display: grid; gap: 18px; align-items: center; max-width: 760px; margin: 0 auto;
  background: var(--surface); border-radius: 14px; padding: 24px 20px; box-shadow: var(--shadow-soft);
}
.part .seal-bg { fill: var(--paper); }
@media (min-width: 48em) { .part { grid-template-columns: auto 1fr; gap: 30px; padding: 30px 36px; } }
.part .seal { width: 96px; height: 96px; }
.part h2 { font-size: clamp(1.35rem, 4vw, 1.8rem); margin-bottom: 8px; }
.part p { margin: 0; max-width: 40em; }
.part p + p { margin-top: .6em; color: var(--ink-dim); }

/* screenshots */
.shots-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.shots-scroll {
  margin: 0 -16px; padding: 6px 16px 18px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-padding: 0 16px;
}
.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: 16px; }
@media (min-width: 40em) { .shots-scroll { margin: 0 -28px; padding: 6px 28px 18px; scroll-padding: 0 28px; } .shots { grid-auto-columns: 36%; gap: 22px; } }
@media (min-width: 64em) {
  .shots-scroll { overflow: visible; margin: 0; padding: 0; }
  .shots { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 250px)); justify-content: space-between; grid-auto-columns: auto; gap: 32px; }
}
.shots li { scroll-snap-align: start; }
.shot { margin: 0; }
.shot img, .shot .slot { width: 100%; aspect-ratio: 1320 / 2868; height: auto; border-radius: 22px; }
.shot img { box-shadow: var(--shadow-soft), 0 0 0 1px var(--line); background: var(--paper-deep); }
.shot .slot {
  display: flex; flex-direction: column; justify-content: space-between; padding: 14px 12px;
  border: 2px dashed var(--line-strong); background: var(--raised); color: var(--ink-dim); font-size: .78rem;
}
.shot .slot b { display: block; color: var(--ink); font-size: .98rem; line-height: 1.25; }
.shot figcaption { margin-top: 12px; font-size: .95rem; line-height: 1.4; }

/* press */
.press .wrap { display: grid; gap: 28px; }
@media (min-width: 60em) { .press .wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; } }
.slip {
  background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-soft); overflow: hidden;
}
.slip-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px;
  background: var(--ink); color: var(--paper); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.slip-head span:last-child { font-family: var(--font-hand); letter-spacing: 0; text-transform: none; font-size: 1rem; font-weight: 400; }
:lang(zh-Hans) .slip-head { letter-spacing: .3em; }
.slip dl { margin: 0; padding: 4px 18px 10px; }
.slip dl div { display: grid; grid-template-columns: minmax(6.5em, 30%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line-strong); }
.slip dl div:last-child { border-bottom: 0; }
.slip dt { color: var(--ink-dim); font-size: .9rem; }
.slip dd { margin: 0; font-size: .98rem; }
.mail-button {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 11px 18px; border-radius: 999px;
  border: 1.5px solid var(--ink); text-decoration: none; font-weight: 600; min-height: 44px;
}
.mail-button:hover { background: var(--ink); color: var(--paper); }
.mail-button svg { width: 20px; height: 20px; }

/* ---------- footer ---------- */

.foot { margin-top: 32px; padding: 0 0 36px; color: var(--ink-dim); font-size: .9rem; }
.foot .waves { width: 100%; height: 22px; margin-bottom: 26px; }
.foot .waves path { stroke: var(--line-strong); stroke-width: 2; fill: none; stroke-linecap: round; }
.foot-grid { display: grid; gap: 18px; }
@media (min-width: 48em) { .foot-grid { grid-template-columns: 1fr auto; align-items: start; } }
.foot p { margin: 0 0 .35em; }
.foot .who { color: var(--ink); font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot ul a { display: inline-block; padding: 6px 0; }
.foot .small { margin-top: 18px; font-size: .8rem; line-height: 1.5; max-width: 52em; }

/* ---------- document pages (privacy, support) ---------- */

.doc { padding: 26px 0 8px; }
.doc .wrap { max-width: 50rem; }
.sheet {
  position: relative; background: var(--surface); border-radius: 8px 8px 18px 18px; padding: 30px 20px 30px; box-shadow: var(--shadow);
}
@media (min-width: 40em) { .sheet { padding: 44px 48px 44px; } }
.sheet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 8px 8px 0 0;
  background: repeating-linear-gradient(90deg, var(--coral) 0 18px, transparent 18px 26px, var(--teal) 26px 44px, transparent 44px 52px);
  opacity: .85;
}
.sheet h1 { font-size: clamp(2rem, 7vw, 2.7rem); margin: 6px 0 10px; }
.sheet .meta { color: var(--ink-dim); margin: 0 0 22px; font-size: .95rem; }
.sheet h2 { font-size: 1.3rem; margin: 2.1em 0 .55em; padding-top: 1.1em; border-top: 1px dashed var(--line-strong); }
.sheet h3 { font-size: 1.05rem; margin: 1.4em 0 .4em; }
.sheet ul, .sheet ol { margin: 0 0 1em; padding-left: 1.3em; }
.sheet li { margin: .35em 0; }
.sheet li::marker { color: var(--ink-dim); }
.short {
  background: var(--lamp-chip); border-radius: 12px; padding: 16px 18px; margin: 0 0 8px; box-shadow: inset 4px 0 0 var(--mustard);
}
.short p { margin: 0; }
.sheet .toc { margin: 18px 0 4px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--raised); box-shadow: 0 0 0 1px var(--line); text-decoration: none; font-size: .92rem; }
.toc a:hover { box-shadow: 0 0 0 1.5px var(--coral); }

.steps { list-style: none; counter-reset: step; padding: 0 !important; }
.steps li { counter-increment: step; position: relative; padding: 2px 0 2px 46px; margin: 0 0 14px !important; min-height: 34px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; background: var(--paper-deep); color: var(--ink); font-weight: 700; font-size: .95rem;
  box-shadow: inset 0 0 0 1.5px var(--coral);
}
.faq { margin: 0; }
.faq details { border-bottom: 1px dashed var(--line-strong); }
.faq details:first-of-type { border-top: 1px dashed var(--line-strong); }
.faq summary {
  cursor: pointer; list-style: none; padding: 14px 36px 14px 0; position: relative; font-weight: 600; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2.5px solid var(--ink-dim); border-bottom: 2.5px solid var(--ink-dim); transform: rotate(45deg);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > div { padding: 0 0 14px; color: var(--ink); }
.faq details > div p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) { .faq summary::after { transition: transform .2s ease; } }

.contact-card { margin-top: 10px; padding: 18px 20px; border-radius: 12px; background: var(--raised); box-shadow: 0 0 0 1px var(--line); }
.contact-card p { margin: 0 0 .3em; }
.contact-card .who { font-weight: 650; }
.contact-card dl { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.contact-card dt { color: var(--ink-dim); }
.contact-card dd { margin: 0; }

/* ---------- 404 ---------- */

.lost { padding: 40px 0 10px; text-align: center; }
.lost .wrap { max-width: 44rem; }
.lost svg { width: min(280px, 80%); margin: 0 auto 22px; }
.lost h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); margin-bottom: 10px; }
.lost p { color: var(--ink-dim); max-width: 30em; margin-left: auto; margin-right: auto; }
.lost .pair { display: grid; gap: 30px; margin-top: 10px; }
.lost .pair > div + div { padding-top: 26px; border-top: 1px dashed var(--line-strong); }
.home-button {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 11px 20px; border-radius: 999px;
  background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600;
}
.home-button:hover { color: var(--paper); background: var(--coral-ink); }
@media (prefers-color-scheme: dark) { .home-button:hover { color: var(--on-accent); } }

@media print {
  body { background: #fff; }
  .masthead .nav, .skip, .foot .waves { display: none; }
  .sheet { box-shadow: none; }
}
.lost .h1like { font-size: clamp(1.6rem, 5vw, 2.1rem); margin-bottom: 10px; }
.lost .pm { stroke: var(--coral-ink); fill: none; opacity: .75; }