/* The entire interaction is scoped to this isolated design study. */
#asking .asking__side { gap: clamp(2.6rem, 4.5vw, 3.8rem); }
#asking .asking__list { align-self: start; }
#asking .asking__list > li { min-height: 0; }
#asking .ask__summary { padding-block: 1.45rem; }
.parchment-stage { --vellum: #e6d8ba; --paper-ink: #382e24; --paper-muted: #78644b; position: relative; min-width: 0; }
.parchment-heading { display: flex; gap: 1rem; align-items: center; margin: 0 0 1.8rem; color: var(--brass-ink); font: 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .13em; }
.parchment-heading i { height: 1px; flex: 1; background: var(--line); }
.parchment-heading > :last-child { color: var(--ink-3); font-size: 8px; letter-spacing: .08em; }
.parchment-theatre { position: relative; isolation: isolate; }
.parchment-form { position: relative; padding: 9px 13px 0 3px; }
/* The sheet: a warm base, then the things that stop it reading as a
   rectangle of colour — a lit patch and two shaded hollows, the fibre tile,
   and edges that carry a little thickness and a contact shadow. */
.parchment-sheet {
  position: relative; color: var(--paper-ink); min-width: 0;
  background-color: var(--vellum);
  background-image:
    radial-gradient(42% 30% at 17% 16%, #fff8e24d, transparent 74%),
    radial-gradient(34% 26% at 79% 74%, #a9844a1f, transparent 76%),
    url('/assets/img/marginalia-grain.svg?v=2'),
    url('/assets/img/marginalia-wash.svg'),
    linear-gradient(105deg, #d8c5a0 0, #eee1c5 5%, #e8dabd 42%, #ddcba6 91%, #c2a778 100%);
  background-size: auto, auto, 320px 320px, 100% 100%, auto;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat;
  /* A tight contact shadow first, then the room's shadow — warm, not black. */
  box-shadow:
    -2px 1px 1px #9c83574d,
    0 1px 2px #43301a59,
    0 4px 6px -1px #43301a40,
    0 24px 46px -15px #2b1d0eb3,
    0 55px 80px -45px #2b1d0eb3;
  border-radius: 2px 1px 3px 2px;
}
/* Edge: a rim of light where the cut catches the room, the sheet dipping
   away at the bottom right, and a slow darkening into all four edges. */
.parchment-sheet::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border: 1px solid #fff8df4d;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 #fffaea66,
    inset 1px 0 0 #fff6db4d,
    inset -1px 0 0 #7d5c2e2e,
    inset 0 -1px 0 #6f4f2638,
    inset 5px 4px 12px -6px #fff6da5c,
    inset -8px -9px 18px -10px #7e5c2c3d,
    inset 0 0 40px -14px #8a663452,
    inset 0 0 130px -46px #8a663440;
}
.paper-content { position: relative; padding: clamp(1.8rem, 3.7vw, 3rem) clamp(1.7rem, 3.6vw, 3.2rem) 1.65rem; overflow: hidden; }
.paper-content::before { content: ''; position: absolute; top: 25px; bottom: 25px; left: 22px; width: 1px; background: #98723b20; pointer-events: none; }
.paper-overline { font: 8px/1.5 var(--font-mono); color: #806c50; letter-spacing: .15em; margin-bottom: 1.15rem; }
.paper-title { font: 300 clamp(2.25rem, 3.2vw, 3rem)/1.02 var(--font-display); letter-spacing: -.045em; margin: 0 0 1.35rem; color: #382a20; }
.paper-title em { font-weight: 300; color: #786041; }
.paper-prompt { display: block; max-width: 28ch; color: #6d5a43; font: 400 clamp(.96rem, 1.2vw, 1.08rem)/1.5 var(--font-read); margin-bottom: 1.6rem; }
.paper-writing { display: block; appearance: none; width: 100%; min-height: 132px; max-height: 400px; margin: 0; padding: 6px 0 8px; border: 0; border-radius: 0; resize: none; outline: none; box-shadow: none; color: #3e3023; -webkit-text-fill-color: #3e3023; caret-color: #794732; font: 400 clamp(1.2rem, 1.75vw, 1.45rem)/1.65 var(--font-read); letter-spacing: -.012em; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1lh - 1px), #886b4124 calc(1lh - 1px), #886b4124 1lh); background-position: 0 6px; transition: background-color 250ms, box-shadow 250ms; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a88b59 transparent; }
.paper-writing::placeholder { color: #8f7a5b; -webkit-text-fill-color: #8f7a5b; opacity: .85; font-style: italic; }
.paper-writing:focus-visible { outline: 1px solid #896f414a; outline-offset: 8px; background-color: #fff9e711; }
.paper-writing::selection { background: #c9ac7690; color: #2c231b; }
.paper-writing[aria-invalid="true"] { outline: 1px solid #873f31; outline-offset: 8px; }
.paper-bottom { display: flex; align-items: end; justify-content: space-between; gap: .75rem; margin-top: 1.4rem; color: #8a7454; font: italic 12px/1.4 var(--font-read); }
.paper-bottom > :last-child { flex-shrink: 0; font: 8px/1.6 var(--font-mono); letter-spacing: .03em; }
.paper-curl { position: absolute; pointer-events: none; top: -3px; right: -10px; bottom: -4px; width: 30px; border-radius: 43% 37% 45% 44% / 1.4% 1.6% 1.4% 1.8%; background: linear-gradient(90deg,#6f502700,#8c6e3c30 8%,#bda16e 23%,#ead9b4 45%,#f7eacb 58%,#c7ac7c 80%,#8b6c4090 95%,#35251970); box-shadow: -7px 3px 12px -6px #6a4b2660, 5px 5px 7px -3px #0005; }
.paper-curl::before, .paper-curl::after { content: ''; position: absolute; left: 5px; right: 2px; height: 6px; border-radius: 50%; background: radial-gradient(ellipse,#b89a66 8%,#6e512e 21%,#e0c899 30%,#b69966 43%,#ecdcb8 54%,#c0a577 70%); box-shadow: 0 1px 0 #f3e2bc88; }
.paper-curl::before { top: -1px; transform: rotate(4deg); }
.paper-curl::after { bottom: -1px; }
.paper-corner { position: absolute; left: 0; bottom: 0; width: 21px; height: 21px; background: linear-gradient(43deg,#90734344,transparent 58%); pointer-events: none; }
.parchment-action { display: flex; flex-direction: column; align-items: center; margin-top: -12px; position: relative; z-index: 3; }
.seal-button { appearance: none; border: 0; padding: 0 18px; display: flex; flex-direction: column; align-items: center; gap: 15px; cursor: pointer; background: transparent; color: var(--ink-0); -webkit-tap-highlight-color: transparent; }
.wax__body { display: grid; place-items: center; position: relative; width: 82px; height: 80px; border-radius: 45% 51% 46% 54% / 51% 46% 54% 47%; background: radial-gradient(ellipse at 32% 17%,#d073563d,transparent 49%), radial-gradient(ellipse at 75% 78%,#2c0a0e80,transparent 65%), linear-gradient(137deg,#a84e3e,#793327 30%,#70261f 65%,#451a19); box-shadow: inset 1px 2px 2px #eea07b66,inset -2px -3px 3px #300b10aa,inset 0 0 0 1px #5d211b,0 3px 2px #1d0c0990,0 9px 14px -3px #0008; transition: transform 300ms cubic-bezier(.2,.7,.3,1),box-shadow 300ms; }
.wax__body::before { content: ''; position: absolute; inset: 8px 7px 7px 8px; border-radius: 50%; box-shadow: inset 0 2px 3px #2e0d0da8,0 1px 1px #e09b665c; background: radial-gradient(ellipse at 40% 20%,#aa554822,transparent 65%); }
.wax__body svg { width: 68px; height: 68px; position: relative; stroke: #d1ad77; stroke-width: .6; filter: drop-shadow(0 1px 0 #250d12); opacity: .87; }
.wax__cross { fill: #c29b68; stroke: #e3c490; stroke-width: .7; }
.seal-label { font: 400 11px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.seal-label::after { content: ' ↗'; color: var(--brass-ink); }
.seal-button:hover:not(:disabled) .wax__body { transform: translateY(-3px) rotate(-4deg); box-shadow: inset 1px 2px 2px #eea07b66,inset -2px -3px 3px #300b10aa,inset 0 0 0 1px #5d211b,0 3px 2px #1d0c0990,0 13px 20px -3px #0009; }
.seal-button:active:not(:disabled) .wax__body { transform: translateY(1px) scale(.96); }
.seal-button:focus-visible { outline: 1px solid var(--brass); outline-offset: 8px; border-radius: 4px; }
.seal-button:disabled { cursor: progress; }
.seal-button:disabled .wax__body { filter: saturate(.8); }
.parchment-privacy { margin-top: 6px; color: var(--ink-3); font: 11px/1.6 var(--font-ui); }
.parchment-error { margin: 16px 3px 0; padding: 12px 14px; border-left: 1px solid #bd7462; color: var(--ink-1); background: #9d574014; font: 13px/1.6 var(--font-ui); }
.parchment-preview-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 1.35rem 0 0; color: var(--ink-3); font: 9px/1.5 var(--font-ui); }
.parchment-preview-note > span { width: 4px; height: 4px; border-radius: 50%; background: var(--brass); opacity: .75; flex-shrink: 0; }
.parchment-animation { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.wax-landing { position: absolute; z-index: 5; pointer-events: none; width: 82px; height: 80px; transform-origin: center; }
.parchment-receipt { position: absolute; top: 33%; left: 0; right: 0; padding: 0 14px; text-align: center; z-index: 6; }
.parchment-receipt:focus { outline: none; }
.receipt-overline { font: 9px/1.4 var(--font-mono); letter-spacing: .18em; color: var(--brass-ink); margin-bottom: 1.4rem; }
.parchment-receipt h3 { font: 300 clamp(2.2rem,3.5vw,3.3rem)/1.09 var(--font-display); letter-spacing: -.04em; color: var(--ink-0); }
.parchment-receipt h3 em { color: var(--brass-ink); }
.receipt-note { margin: 1.1rem auto 1.7rem; max-width: 29ch; font: 12px/1.65 var(--font-ui); color: var(--ink-3); }
.receipt-again { background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink-1); padding: 6px 0; font: 12px/1.5 var(--font-ui); cursor: pointer; }
.receipt-again span { color: var(--brass-ink); margin-left: 12px; }
.receipt-again:hover { color: var(--brass-ink); }
.receipt-again:focus-visible { outline: 1px solid var(--brass); outline-offset: 5px; }
.parchment-stage [hidden] { display: none !important; }
@media (min-width: 64rem) { .parchment-stage { margin-top: 8px; } }
@media (max-width: 63.99rem) { .parchment-stage { width: min(100%,560px); justify-self: center; } .parchment-heading { margin-bottom: 1.5rem; } }
@media (max-width: 30rem) {
  .parchment-heading > :last-child { display: none; }
  .paper-content { padding: 27px 24px 25px; }
  .paper-content::before { left: 12px; top: 18px; bottom: 18px; }
  .paper-title { font-size: clamp(1.85rem,8vw,2.5rem); }
  .paper-prompt { font-size: 1rem; margin-bottom: 1.25rem; }
  .paper-writing { font-size: 1.15rem; min-height: 128px; max-height: 340px; }
  .paper-bottom { font-size: 11px; }
  .paper-bottom > :first-child { max-width: 22ch; }
  .paper-curl { width: 23px; right: -8px; }
  .parchment-preview-note { font-size: 8px; }
  .parchment-receipt { top: 31%; }
}
@media (prefers-reduced-motion: reduce) { .seal-button *, .paper-writing { transition: none; } }
@media print { .parchment-stage { display: none; } }