/* Apply: one question, written on oatmeal paper. A reply to the club, never a form wizard. */
.top .leave { font:400 15px/1 var(--text); color:var(--ink-2); padding:10px 12px; margin-right:-12px; border-radius:var(--r-control); text-decoration:underline; text-decoration-color:var(--hair-2); text-underline-offset:4px; }
@media (hover:hover) { .top .leave:hover { color:var(--ink); background:var(--sheet); } }
.reply { position:relative; max-width:1440px; margin:0 auto; padding:40px var(--gutter) 140px; min-height:calc(100vh - 80px); }
.sheet { position:relative; z-index:1; max-width:700px; margin-left:clamp(0px, 9vw, 150px); padding:44px 0 44px; }
.progress { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:34px; }
.count { font:400 14px/1.4 var(--ui); color:var(--ink-2); }
.dabs { display:flex; gap:7px; }
.pd { width:17px; height:15px; color:var(--ink); }
.pd.now { color:var(--wash); }
.pd.todo { color:transparent; stroke:var(--ink-3); stroke-width:2; }
.question { font-size:40px; line-height:1.15; max-width:26ch; }
.helper { margin-top:18px; color:var(--ink-2); font-size:17px; max-width:34em; }
.lines { position:relative; margin-top:30px; }
.lines::before { content:""; position:absolute; inset:0; pointer-events:none; background:var(--ink); opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 36' preserveAspectRatio='none'%3E%3Cpath d='M2 33.2 C 60 32, 140 32.8, 230 32.2 C 330 31.6, 430 32.6, 520 32 C 560 31.8, 585 32.2, 598 32.8 L 597 34.6 C 540 34.8, 450 34.2, 360 34.6 C 250 35, 140 34.4, 60 34.9 C 30 35, 12 34.8, 2.6 34.6 Z'/%3E%3C/svg%3E") 0 0/100% 36px repeat-y; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 36' preserveAspectRatio='none'%3E%3Cpath d='M2 33.2 C 60 32, 140 32.8, 230 32.2 C 330 31.6, 430 32.6, 520 32 C 560 31.8, 585 32.2, 598 32.8 L 597 34.6 C 540 34.8, 450 34.2, 360 34.6 C 250 35, 140 34.4, 60 34.9 C 30 35, 12 34.8, 2.6 34.6 Z'/%3E%3C/svg%3E") 0 0/100% 36px repeat-y; }
#answer { position:relative; display:block; width:100%; min-height:calc(36px * 5); resize:vertical; border:0; border-radius:0; padding:0 2px; color:var(--ink); font:400 19px/36px var(--text); background:transparent; }
#answer:focus-visible { outline:none; box-shadow:0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink); border-radius:var(--r-inner); }
.privacy { display:flex; gap:10px; align-items:baseline; margin-top:18px; font:400 14px/1.5 var(--ui); color:var(--ink-2); }
.privacy .cell { width:12px; height:10px; color:var(--wash); transform:translateY(1px); }
.answer-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:34px; }
.status { min-height:1.5em; margin-top:16px; font:400 14px/1.5 var(--ui); color:var(--ink-2); }
.status:not(:empty)::before { content:"✓ "; color:var(--ink); }
.after .d2 { margin-top:18px; }
.cup { position:absolute; z-index:0; right:calc(-1 * max(0px, (100vw - 1440px) / 2) - 40px); top:40px; width:min(400px, 30vw); aspect-ratio:1122/1402; -webkit-mask-image:url(../img/hands-cup.webp); mask-image:url(../img/hands-cup.webp); }
.reply .neck { right:calc(-1 * max(0px, (100vw - 1440px) / 2) - 90px); bottom:-40px; width:260px; }
@media (max-width: 1100px) { .sheet { margin-left:0; } .cup { opacity:.9; width:300px; } }
@media (max-width: 760px) {
  .top .leave { margin:0; padding:8px 0; font-size:15px; white-space:nowrap; }
  .apply .nav .nav-pledge { display:none; }
  .reply { padding:150px var(--gutter) 120px; min-height:0; }
  .sheet { padding:24px 0 32px; }
  .progress { flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:24px; }
  .question { font-size:31px; line-height:1.16; max-width:none; text-wrap:pretty; }
  .helper { font-size:16px; }
  #answer { font-size:17px; }
  .answer-actions .btn { width:100%; }
  .cup { width:170px; right:-30px; top:14px; }
  #answer { min-height:calc(36px * 6); }
  .reply .neck { width:150px; right:-70px; bottom:-60px; }
}
.apply .top .nav { margin-left:auto; } .apply .top { gap:34px; } @media (max-width:760px){ .apply .top { gap:16px; } }
@media (max-width:760px){ .apply .wm-text { display:none; } .apply .wordmark svg { width:28px; height:25px; } }