/* 更多 pages art layer (联系我, 支持 Sandy, 隐私政策; owner-approved redesign 2026-10-12, "negative space as a shape").
   Shared by assets/contact.css, assets/support.css and assets/privacy.css; each page's own layout lives there.
   - Colour blocks use the palette key: --color-key / --color-key-soft (appearance.css), plus the quiet note tints.
   - Stickers (.stk) are Sandy's marker-style art (assets/illustrations/hand-drawn/more-pages/items, cropped by
     scripts/crop-more-pages.py): always Sandy, the "post office cat", never the learner's chosen companion.
     A die-cut paper edge follows the drawing; a tap gives one small hop (assets/more-art.js), nothing ever loops.
   - Marks (.mk, sheet 04) are black art used as a CSS mask and recoloured with tokens.
   Decorations are aria-hidden and never sit on text, fields or buttons. */
:root {
  --more-edge: #fffdf8;                     /* the sticker's die-cut paper edge */
  --more-mark: var(--color-accent);          /* postmarks, bursts: the palette's warm text accent, used thin and translucent */
  --more-block-a: var(--note-sage);
  --more-block-b: var(--note-mist);
  --more-block-c: var(--note-blush);
  --more-block-e: var(--note-cream);
}
/* dark pages (dark mode and 星夜蓝): an ivory edge, the decorative accent for marks */
:root[data-page-tone="dark"], :root[data-theme="dark"] { --more-edge: #f4ecdd; --more-mark: var(--color-accent-deco); }
/* 星夜蓝: night-blue note blocks instead of the warm dark notes (text on them is --ink, ≥ 10:1) */
:root[data-background="navy"] { --more-block-a: #1f3a4a; --more-block-b: #233a63; --more-block-c: #3a2f4f; --more-block-e: #2a3350; }

/* cut-out stickers: one crisp paper edge that follows the drawing, a soft lift */
.stk { position: absolute; z-index: 1; display: block; max-width: none; height: auto; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(2.5px 0 0 var(--more-edge)) drop-shadow(-2.5px 0 0 var(--more-edge)) drop-shadow(0 2.5px 0 var(--more-edge)) drop-shadow(0 -2.5px 0 var(--more-edge)) drop-shadow(0 5px 6px rgb(var(--shadow-rgb) / .14)); }
.stk.flat { filter: drop-shadow(0 3px 4px rgb(var(--shadow-rgb) / .12)); }
/* a tap → one small hop, then still. Never loops; nothing at all under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .stk.boop { animation: more-boop .46s cubic-bezier(.3, 1.6, .5, 1) 1; }
  @keyframes more-boop { 0% { translate: 0 0; } 40% { translate: 0 -8px; } 100% { translate: 0 0; } }
}

/* black marks (sheet 04) recoloured through a mask */
.mk { position: absolute; display: block; pointer-events: none; background: var(--mk, var(--more-mark)); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.mk-postmark { -webkit-mask-image: url(illustrations/hand-drawn/more-pages/items/s4-postmark.webp); mask-image: url(illustrations/hand-drawn/more-pages/items/s4-postmark.webp); aspect-ratio: 236 / 160; }
.mk-burst { -webkit-mask-image: url(illustrations/hand-drawn/more-pages/items/s4-emphasis-burst.webp); mask-image: url(illustrations/hand-drawn/more-pages/items/s4-emphasis-burst.webp); aspect-ratio: 116 / 58; }

/* washi tape: a translucent strip + the drawn outline / pattern from sheet 04 on top */
.tape { position: absolute; z-index: 2; display: block; width: 112px; aspect-ratio: 224 / 98; pointer-events: none; }
.tape::before { content: ""; position: absolute; inset: 24% 4% 22%; background: var(--tape, var(--color-key)); opacity: .55; }
.tape::after { content: ""; position: absolute; inset: 0; background: var(--tape-ink, var(--more-mark)); opacity: .5;
  -webkit-mask: url(illustrations/hand-drawn/more-pages/items/s4-plain-washi.webp) center / contain no-repeat; mask: url(illustrations/hand-drawn/more-pages/items/s4-plain-washi.webp) center / contain no-repeat; }
.tape.paw::after { -webkit-mask-image: url(illustrations/hand-drawn/more-pages/items/s4-paw-washi.webp); mask-image: url(illustrations/hand-drawn/more-pages/items/s4-paw-washi.webp); }

/* negative space as a shape: a key-tint block whose bottom edge is a staircase of rounded steps; the steps are page-colour
   rectangles, so every palette works. Used by 联系我. */
.more-stairs { position: relative; background: var(--color-key-soft); }
.more-steps { position: absolute; inset: 0; pointer-events: none; }
.more-step { position: absolute; bottom: -1px; display: block; border-top-right-radius: 20px; background: var(--color-bg); }
@media (max-width: 900px) { .more-step { border-top-right-radius: 14px; } }

/* a round cat head (the owner's rounder shape: rounded ear tips, full face, soft chin): one solid key-soft block, no
   gutters (owner, 2026-10-12: the cross ran through the title); one clip path for ears and chin. The four empty spans
   inside are kept so the markup needn't change. Used by 支持 Sandy and 关于 Sandy. 320 × 273 by default; the large
   head (440 × 376) is .more-cathead-l, or the same three lines in a media query with var(--more-cathead-l). */
:root { --more-cathead-s: path("M 14.5 43.6 Q 13.1 10.2 45.1 16 L 142.5 56.7 Q 160 62.5 177.5 56.7 L 274.9 16 Q 306.9 10.2 305.5 43.6 L 305.5 167.3 Q 305.5 270.5 160 270.5 Q 14.5 270.5 14.5 167.3 Z"); --more-cathead-l: path("M 20 60 Q 18 14 62 22 L 196 78 Q 220 86 244 78 L 378 22 Q 422 14 420 60 L 420 230 Q 420 372 220 372 Q 20 372 20 230 Z"); }
.more-cathead { position: absolute; left: 0; bottom: 0; z-index: 1; width: 320px; height: 273px; pointer-events: none; background: var(--color-key-soft); clip-path: var(--more-cathead-s); }
.more-cathead-l { width: 440px; height: 376px; clip-path: var(--more-cathead-l); }

/* a cat ear on top of a block (the V between two ears is page colour). Used by 隐私政策 (支持 Sandy cuts its cat head with a clip path). */
.more-ear { position: absolute; bottom: calc(100% - 1px); display: block; width: 96px; height: 72px; background: inherit; clip-path: path("M0 72 L 32 12 Q 42 -4 54 10 L 96 72 Z"); }
@media (max-width: 900px) { .more-ear { width: 72px; height: 54px; clip-path: path("M0 54 L 24 9 Q 32 -3 40 7 L 72 54 Z"); } }