/* ============================================================
   PETITION PAGE
   ============================================================ */
.petition-hero{ padding:56px 0 20px; text-align:center; }
.petition-hero h1{ font-size:clamp(32px,4.4vw,50px); margin:14px 0 12px; }
.petition-hero p{ color:var(--ink-soft); max-width:60ch; margin:0 auto 20px; font-size:16px; }

.petition-progress{ max-width:520px; margin:0 auto 8px; }
.petition-progress-bar{ height:10px; background:var(--parchment-2); border:1px solid var(--paper-line); overflow:hidden; }
.petition-progress-fill{ height:100%; background:var(--seal); width:0%; transition:width 1s ease; }
.petition-progress-label{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); margin-top:6px; }
.petition-count{ font-family:var(--font-display); font-size:22px; color:var(--seal); }

.petition-wrap{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:44px; padding:20px 0 90px; align-items:start; }

/* ---- the letter ---- */
.letter{
  background:var(--parchment); border:1px solid var(--ink);
  box-shadow:0 24px 50px rgba(0,0,0,.16);
  padding:38px 40px 30px;
  position:relative;
}
.letter-letterhead{ display:flex; align-items:center; gap:14px; border-bottom:2px solid var(--ink); padding-bottom:16px; margin-bottom:22px; }
.letter-letterhead img{ width:46px; height:46px; border-radius:50%; }
.letter-letterhead b{ display:block; font-family:var(--font-display); font-size:17px; }
.letter-letterhead span{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--ink-soft); text-transform:uppercase; }
.letter-meta{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); margin-bottom:18px; }
.letter-body p{ font-size:15px; line-height:1.75; margin:0 0 14px; color:var(--ink); }
.letter-body ul{ margin:0 0 14px; padding-left:22px; }
.letter-body li{ font-size:14.5px; line-height:1.7; margin-bottom:6px; color:var(--ink); }
.letter-closing{ margin-top:22px; font-size:15px; }

.letter-signoff{ margin-top:26px; padding-top:18px; border-top:1px dashed var(--paper-line); }
.letter-signoff-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--ink-soft); text-transform:uppercase; margin-bottom:10px; }
.signature-scroll{ display:flex; flex-wrap:wrap; gap:8px 18px; min-height:36px; }
.signature-entry{
  font-family:'Caveat', cursive; font-size:22px; color:var(--ink);
  opacity:0; transform:translateY(6px);
  animation:sig-appear .5s ease forwards;
}
@keyframes sig-appear{ to{ opacity:1; transform:translateY(0); } }
.signature-more{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); align-self:center; }

/* ---- sign form ---- */
.sign-panel{
  background:var(--parchment); border:1px solid var(--ink);
  padding:28px 26px; position:sticky; top:96px;
}
.sign-panel h3{ font-size:20px; margin-bottom:6px; }
.sign-panel p.hint{ color:var(--ink-soft); font-size:13.5px; margin-bottom:18px; }
.sign-form label{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:14px 0 5px; }
.sign-form input{ width:100%; padding:11px 12px; border:1px solid var(--paper-line); background:#fff; font-family:var(--font-body); font-size:14.5px; }
.sign-form input:focus{ border-color:var(--seal); outline:none; }
.sign-form .optional-tag{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--paper-line); }
.sign-form button{ margin-top:20px; width:100%; justify-content:center; padding:14px; }

.sign-success{
  display:none; text-align:center; padding:14px; margin-top:14px;
  background:#e7efe7; border:1px solid var(--success); color:var(--success); font-size:13.5px;
}
.sign-success.show{ display:block; animation:sig-appear .4s ease; }
.sign-error{ color:var(--seal); font-size:13px; margin-top:10px; min-height:16px; }

/* ---- recent signatures live feed ---- */
.recent-feed{ margin-top:26px; }
.recent-feed h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
.recent-item{
  display:flex; justify-content:space-between; font-size:13.5px; padding:8px 0;
  border-bottom:1px solid var(--paper-line);
  opacity:0; animation:sig-appear .4s ease forwards;
}
.recent-item b{ font-weight:600; }
.recent-item span{ color:var(--ink-soft); font-family:var(--font-mono); font-size:11px; }

@media (max-width:900px){
  .petition-wrap{ grid-template-columns:1fr; }
  .sign-panel{ position:static; }
}