/* 联系我 (contact.html), 「明信片墙 · 台阶」 (owner-approved V1, 2026-10-12). Phones first; every colour is a token.
   A key-tint block across the top whose bottom edge is a rounded staircase (page colour below the steps IS the shape),
   Sandy trotting down it with a letter; the title in quiet page colour below; the form is one airmail postcard taped to
   the page, with a stamp and a postmark crossing its top edge. Only the card's paper (::before) tilts: fields and text
   stay level. The art layer (stickers, marks, tape, steps) is assets/more-art.css. */
* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--color-bg);
  font-family: var(--font-body);
  line-height: 1.7;
}
/* The frame: gutters on <main>; on wide screens nav.css adds the companion rail as padding-right, so Sandy's dock never
   sits on the form. One 860px column; the stair block bleeds into the gutters. */
.contact-app { position: relative; width: calc(100% - 2 * var(--layout-gutter)); min-width: 0; margin: 0 auto; padding: var(--space-5) 0 calc(var(--space-6) * 2); overflow-x: clip; }
.contact-app > * { width: min(860px, 100%); margin-inline: auto; }

/* ── the stair block ── */
.contact-stairs { width: calc(min(860px, 100%) + 2 * var(--layout-gutter)); height: 300px; margin: calc(-1 * var(--space-5)) 0 0 calc(50% - min(430px, 50%) - var(--layout-gutter)); }
.contact-stairs .s1 { left: 0; width: 27%; height: 64%; }
.contact-stairs .s2 { left: 27%; width: 17%; height: 49%; }
.contact-stairs .s3 { left: 44%; width: 17%; height: 34%; }
.contact-stairs .s4 { left: 61%; width: 17%; height: 19%; }
.contact-stairs .stk { z-index: 2; }
/* Sandy trots down the stairs with the envelope (feet on step 3); a stamp on the top step, the postbox at the bottom */
.contact-st-sandy { width: 210px; left: 41%; bottom: calc(34% - 6px); rotate: -3deg; }
.contact-st-notes { width: 46px; left: calc(41% + 214px); bottom: calc(34% + 150px); }
.contact-st-stamp { width: 58px; left: 8%; bottom: calc(64% + 26px); rotate: -8deg; }
.contact-st-postbox { width: 92px; right: 7%; bottom: -46px; }

/* ── hero: the title and one short line, in quiet page colour ── */
/* the title sits up in the white space under the stairs (owner, 2026-10-12): the hero is pulled up into the stair block, so
   「联系我」 lands in the tall page-colour gap under the first step and the line below runs along the bottom band */
.contact-hero { position: relative; z-index: 3; margin-top: -168px; padding-top: 0; }
/* the title lives in the white gap left of Sandy: it may only use the left ~40% of the column and shrinks with the screen,
   so a long title (English "Contact me") wraps or scales instead of running under her (owner, 2026-10-12) */
.contact-title { max-width: 40%; margin: 0; font-size: clamp(1.75rem, 8.5vw, 3.25rem); font-weight: 700; line-height: 1.15; word-break: keep-all; line-break: strict; text-wrap: balance; }
.contact-sub { max-width: min(28em, 40%); margin: var(--space-3) 0 0; color: var(--ink-2); font-size: 1rem; line-height: 1.75; word-break: keep-all; line-break: strict; text-wrap: balance; }

/* ── the wall: a postcard on a postcard ── */
.contact-wall { position: relative; margin-top: 120px; }  /* clears the stair block, so the postbox stands above the card instead of on its stamp */
.contact-under { position: absolute; inset: 22px -10px -18px 26px; z-index: 0; border-radius: 6px; background: var(--more-block-c); rotate: 1.6deg; pointer-events: none; }
.contact-panel { position: relative; z-index: 1; isolation: isolate; min-width: 0; padding: var(--space-6); }
.contact-panel[hidden] { display: none; }
/* the card's paper: an airmail edge, tilted a little; content stays level */
.contact-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 7px solid transparent; border-radius: 6px; rotate: -.8deg;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, repeating-linear-gradient(-45deg, var(--color-key) 0 12px, transparent 12px 20px, var(--blue-400) 20px 32px, transparent 32px 40px) border-box;
  box-shadow: 0 1px 0 rgb(var(--shadow-rgb) / .04), 0 10px 26px -12px rgb(var(--shadow-rgb) / .22); }
.contact-postcard { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-6); padding-top: 56px; }
.contact-pc-left { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.contact-pc-right { display: grid; gap: var(--space-4); align-content: start; min-width: 0; padding-top: 64px; padding-left: var(--space-6); border-left: 2px dashed var(--color-line); }
.contact-stamp { z-index: 3; width: 76px; top: -22px; right: 26px; rotate: 6deg; }
.contact-postmark { z-index: 4; width: 118px; top: -4px; right: 64px; opacity: .55; rotate: -8deg; }
.contact-tape { top: -22px; left: 34px; rotate: -7deg; --tape: var(--more-block-b); }

.contact-label { display: block; padding: 0; color: var(--ink); font-size: .92rem; font-weight: 500; }
.contact-kinds { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-kinds .contact-label { margin-bottom: var(--space-3); }
/* the four topics are stamps: perforated edges, each a quiet note colour; the picked one is the selected note with a
   hand-drawn ring around its words (not colour alone) */
/* the four topic stamps sit in one even 2×2 grid: same size, same baseline, no tilt (owner, 2026-10-12) */
.contact-kind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 18px 16px; padding: 6px; }
.contact-kind { position: relative; display: block; min-width: 0; height: 100%; }
.contact-kind input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.contact-kind span { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-2) 14px; border-radius: 2px; color: var(--ink-2); background: var(--c); box-shadow: 0 0 0 5px var(--c), 0 4px 10px -4px rgb(var(--shadow-rgb) / .3); font-size: .88rem; line-height: 1.4; text-align: center; height: 100%; white-space: normal; cursor: pointer; }
.contact-kind span::after { content: ""; position: absolute; inset: -8px; border: 5px dotted var(--surface); border-radius: 2px; pointer-events: none; }
.contact-kind span:hover { color: var(--ink); }
.contact-kind.k1 { --c: var(--more-block-e); } .contact-kind.k2 { --c: var(--more-block-c); } .contact-kind.k3 { --c: var(--more-block-a); } .contact-kind.k4 { --c: var(--more-block-b); }
.contact-kind input:checked + span { --c: var(--color-selected); color: var(--color-on-selected); font-weight: 600; }
.contact-kind input:checked + span::before { content: ""; position: absolute; inset: -2px 6px; background: var(--color-on-selected); opacity: .4; pointer-events: none;
  -webkit-mask: url(illustrations/hand-drawn/more-pages/items/s4-loose-circle.webp) center / 100% 100% no-repeat; mask: url(illustrations/hand-drawn/more-pages/items/s4-loose-circle.webp) center / 100% 100% no-repeat; }
.contact-kind input:focus-visible + span { outline: 3px solid var(--accent-focus); outline-offset: 7px; }

/* 想要的猫咪 → three starters on a little grid-paper note */
.contact-cat-help { padding: var(--space-3) var(--space-4); border-radius: 4px; background-color: var(--tint-1); background-image: linear-gradient(rgb(var(--line-rgb) / .22) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--line-rgb) / .22) 1px, transparent 1px); background-size: 16px 16px; }
.contact-cat-help[hidden] { display: none; }
.contact-cat-help p { margin: 0 0 var(--space-2); color: var(--ink-2); font-size: .85rem; }
.contact-prompts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.contact-prompt { min-height: 44px; padding: var(--space-1) var(--space-4); border: 1px dashed var(--control-line); border-radius: 999px; color: var(--ink-2); background: var(--surface); font: inherit; font-size: .85rem; cursor: pointer; }
.contact-prompt:hover { color: var(--ink); }
.contact-prompt:focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 2px; }

/* fields: the message is written on the postcard's lines, the address on an underline */
.contact-field { display: grid; gap: var(--space-2); min-width: 0; }
.contact-field textarea, .contact-field input { width: 100%; min-width: 0; color: var(--ink); font: inherit; font-size: 1rem; }
.contact-field textarea { min-height: 168px; padding: 4px 2px; border: 0; border-radius: 0; line-height: 32px; resize: vertical;
  background: transparent linear-gradient(transparent 31px, var(--control-line) 31px 32px) 0 0 / 100% 32px local; }
.contact-field input { min-height: 48px; padding: 10px 2px; border: 0; border-bottom: 1.5px solid var(--control-line); border-radius: 0; background: transparent; line-height: 1.6; }
.contact-field textarea::placeholder, .contact-field input::placeholder { color: var(--muted); opacity: 1; }
.contact-field textarea:focus-visible, .contact-field input:focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 2px; border-radius: 4px; }
.contact-field textarea[aria-invalid="true"] { box-shadow: inset 2px 0 0 var(--bad); }
.contact-field input[aria-invalid="true"] { border-bottom-color: var(--bad); }
.contact-count { margin: 0; color: var(--muted); font-size: .8rem; text-align: right; font-variant-numeric: tabular-nums; }
.contact-count[data-over="true"] { color: var(--bad); font-weight: 500; }
.contact-help { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.8; }
.contact-status { margin: 0; color: var(--ink-2); font-size: .84rem; line-height: 1.7; }
.contact-status:empty { display: none; }
.contact-status[data-error="true"] { padding: 10px 12px; border: 1px solid var(--bad-line); border-radius: var(--radius-input); color: var(--bad); background: var(--bad-bg); }
/* Send + privacy note sit together: the note hangs --space-2 under the button */
.contact-actions { display: grid; gap: var(--space-2); }
.contact-send { width: 100%; min-height: 52px; font-size: 1rem; }
.contact-send:disabled { opacity: .7; cursor: progress; }
/* Off-screen, not display:none: some bots skip fields that are display:none. */
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Sent: the same postcard, Sandy cheering over its top edge, a postmark across it */
.contact-success { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-3); padding-top: 112px; text-align: center; }
.contact-success-cat { position: absolute; top: -64px; left: calc(50% - 64px); width: 128px; height: 130px; }
.contact-success-sandy { width: 128px; top: 0; left: 0; }
.contact-success .contact-postmark { top: 16px; right: 28px; }
.contact-thanks { margin: 0; color: var(--ink); font-size: 1.15rem; font-weight: 600; line-height: 1.6; text-wrap: balance; }
.contact-thanks:focus { outline: none; }
.contact-again { min-width: 160px; min-height: 48px; margin-top: var(--space-2); }

/* The one quiet link to the support page, a luggage tag beside it */
.contact-support-link { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin: calc(var(--space-6) + 8px) auto 0; }
.contact-foot-tag { position: relative; flex: none; width: 34px; height: 46px; }
.contact-tag { width: 34px; top: 0; left: 0; rotate: -14deg; }
.contact-support-link a { display: inline-block; min-width: 0; padding: 10px 0; line-height: 1.6; color: var(--color-link); font-size: .95rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 4px; }
.contact-support-link a::after { content: "\00a0›"; }
.contact-support-link a:hover { text-decoration-color: currentColor; }
.contact-support-link a:focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 2px; border-radius: 6px; }

@media (max-width: 900px) {
  .contact-stairs { height: 230px; }
  .contact-stairs .s1 { width: 30%; } .contact-stairs .s2 { left: 30%; } .contact-stairs .s3 { left: 47%; } .contact-stairs .s4 { left: 64%; }
  .contact-st-sandy { width: 140px; left: 44%; }
  .contact-st-notes { width: 32px; left: calc(44% + 138px); bottom: calc(34% + 104px); }
  .contact-st-stamp { width: 44px; left: 9%; bottom: calc(64% + 18px); }
  .contact-st-postbox { width: 58px; right: 5%; bottom: -30px; }
  .contact-hero { margin-top: -128px; padding-top: 0; }
  .contact-wall { margin-top: 92px; }
  .contact-under { inset: 20px -6px -14px 14px; rotate: 1deg; }
  .contact-panel { padding: var(--space-5) 20px 28px; }
  .contact-panel::before { rotate: -.5deg; }
  .contact-postcard { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-top: 64px; }
  .contact-pc-right { padding: var(--space-4) 0 0; border-left: 0; border-top: 2px dashed var(--color-line); }
  .contact-stamp { width: 64px; top: -20px; right: 16px; }
  .contact-postmark { width: 96px; top: -6px; right: 52px; }
  .contact-kind span { padding-inline: var(--space-2); }
  .contact-success { padding-top: 84px; }
  /* on a phone the wall sits only 48px under the subtitle: a smaller Sandy, so her ears never reach the text */
  .contact-success-cat { top: -40px; left: calc(50% - 52px); width: 104px; height: 106px; }
  .contact-success-sandy { width: 104px; }
  .contact-success .contact-postmark { top: 8px; right: 14px; }
  .contact-support-link { justify-content: flex-start; }
}

/* ════ Title layout 「门牌」 (owner picked option C, 2026-10-12): the title hangs like a door sign on the key-tint wall,
   top-left, and the staircase starts well below it. These rules override the stair and hero geometry above. ════ */
.contact-stairs { height: 380px; }
.contact-stairs .s1 { left: 0; width: 30%; height: 46%; }
.contact-stairs .s2 { left: 30%; width: 18%; height: 34%; }
.contact-stairs .s3 { left: 48%; width: 18%; height: 22%; }
.contact-stairs .s4 { left: 66%; width: 18%; height: 10%; }
.contact-st-sandy { width: 196px; left: max(50%, 400px); bottom: calc(22% - 6px); }
.contact-st-notes { width: 40px; left: calc(max(50%, 400px) + 200px); bottom: calc(22% + 150px); }
.contact-st-stamp { width: 56px; left: auto; right: 6%; bottom: auto; top: 28px; rotate: 6deg; }
.contact-st-postbox { width: 80px; right: 4%; bottom: -40px; }
.contact-hero { margin-top: calc(-380px + 64px); padding-left: 32px; }
.contact-title { max-width: none; font-size: 2.5rem; line-height: 1.2; letter-spacing: .02em; }
.contact-sub { max-width: 20em; margin-top: var(--space-3); font-size: 1rem; }
.contact-wall { margin-top: 344px; }
@media (max-width: 900px) {
  .contact-stairs { height: 340px; }
  .contact-stairs .s1 { width: 28%; height: 42%; }
  .contact-stairs .s2 { left: 28%; width: 18%; height: 32%; }
  .contact-stairs .s3 { left: 46%; width: 18%; height: 22%; }
  .contact-stairs .s4 { left: 64%; width: 18%; height: 12%; }
  .contact-st-sandy { width: 112px; left: 50%; left: max(50%, 0px); bottom: calc(22% - 4px); }
  .contact-st-notes { width: 26px; left: calc(50% + 108px); bottom: calc(22% + 88px); }
  .contact-st-stamp { width: 40px; right: 6%; top: 20px; }
  .contact-st-postbox { width: 52px; right: calc(var(--layout-gutter) + 8px); bottom: -26px; }
  .contact-hero { margin-top: calc(-340px + 44px); padding-left: 16px; padding-right: 64px; }
  .contact-title { font-size: clamp(1.625rem, 7vw, 1.875rem); }
  .contact-sub { font-size: .95rem; line-height: 1.7; }
  .contact-wall { margin-top: 304px; }
}