:root { --paper:#f4f4ef; --surface:#fff; --ink:#18201d; --muted:#68736b; --line:#cbd3ca; --brass:#a87843; --sage:#5c7e6d; --mono:'Space Mono',ui-monospace,monospace; --sans:'Space Grotesk',Arial,sans-serif; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100vh; margin:0; background:linear-gradient(135deg,#f4f4ef,#e8ebe4); color:var(--ink); font-family:var(--sans); }
.honorarium-page { width:min(100% - 40px,760px); min-height:100vh; margin:auto; padding:34px 0 54px; display:grid; align-content:center; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font:700 11px var(--mono); letter-spacing:.08em; width:max-content; }
.brand span { display:grid; place-items:center; width:32px; height:32px; color:var(--brass); border:1px solid var(--ink); }
.intro { max-width:590px; }
.eyebrow { margin:0 0 10px; color:var(--sage); font:700 10px var(--mono); letter-spacing:.08em; }
h1 { margin:0; font-size:clamp(48px,8vw,84px); line-height:.98; font-weight:600; }
.intro > p:last-child { max-width:520px; margin:18px 0 0; color:var(--muted); font-size:18px; }
.payment-surface { display:grid; grid-template-columns:minmax(0,1fr); border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 92%,transparent); box-shadow:0 28px 70px rgba(25,37,30,.12); }
form,.confirmation { display:grid; gap:15px; padding:30px; }
.amount-label,.note-label { font-size:14px; font-weight:600; }.note-label span { color:var(--muted); font-weight:400; }
.amount-field { display:flex; align-items:center; gap:9px; border-bottom:2px solid var(--ink); padding:10px 0; color:var(--brass); font:600 32px var(--mono); }
.amount-field input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:600 clamp(36px,8vw,62px) var(--mono); }
.amount-field input::placeholder { color:#aeb9ae; }.amount-help,.form-status { margin:0; color:var(--muted); font-size:13px; }
.amount-options { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.amount-options button,.back-button { min-height:42px; border:1px solid var(--line); border-radius:2px; background:transparent; color:var(--ink); font:700 12px var(--mono); }.amount-options button:hover,.back-button:hover { border-color:var(--brass); color:var(--brass); }
textarea,input,select { width:100%; resize:vertical; border:1px solid var(--line); border-radius:2px; padding:12px; background:var(--surface); color:var(--ink); font:15px var(--sans); }.payment-context { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:13px 0; }.payment-context summary { cursor:pointer; color:var(--ink); font:700 12px var(--mono); }.payment-context summary span { color:var(--muted); font-weight:400; }.payment-context p { margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }.payment-context label { display:grid; gap:6px; margin-top:12px; color:var(--ink); font-size:13px; font-weight:600; }.pay-button { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:54px; padding:0 17px; border:1px solid var(--brass); border-radius:2px; background:var(--brass); color:white; font:700 12px var(--mono); letter-spacing:.03em; }.pay-button:disabled { opacity:.65; cursor:wait; }
.confirmation { text-align:center; }.confirmation strong { font:600 clamp(42px,8vw,72px) var(--mono); }.confirmation p:not(.eyebrow) { margin:0; color:var(--muted); }.back-button { justify-self:center; width:auto; padding:0 16px; }
.fine-print { color:var(--muted); font-size:12px; }.fine-print summary { cursor:pointer; width:max-content; color:var(--ink); font:700 10px var(--mono); letter-spacing:.06em; }.fine-print p { max-width:620px; line-height:1.6; }
@media (max-width:520px) { .honorarium-page { width:min(100% - 28px,760px); padding-top:24px; }.amount-options { grid-template-columns:repeat(2,1fr); } form,.confirmation { padding:22px; }.intro > p:last-child { font-size:16px; } }