/* Coon Claw Club — the Pledge page. Builds on styles.css tokens. */

.pledge-page { background: var(--moss); color: var(--moss-ink); min-height: 100dvh; display: flex; flex-direction: column; }
.pledge-page::before { background: var(--moss); }
.pledge-page .wordmark-mark { color: var(--moss-brass); }
.pledge-top { border-bottom: 1px solid rgba(255,255,255,.1); padding-top: env(safe-area-inset-top, 0px); }
.pledge-top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.pledge-exit { font-size: .9rem; color: color-mix(in srgb, var(--moss-ink) 70%, transparent); text-decoration: none; }
.pledge-exit:hover { color: var(--moss-ink); }

.pledge-main { flex: 1; display: grid; place-items: center; padding: 48px var(--gut-r) calc(56px + env(safe-area-inset-bottom, 0px)) var(--gut); }
.pledge-screen { width: min(760px, 100%); }
.pledge-screen h1 { font-size: clamp(2.8rem, 8vw, 5rem); }
.pledge-screen h2 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.pledge-lede { margin-top: 20px; font-size: 1.2rem; max-width: 40ch; color: color-mix(in srgb, var(--moss-ink) 85%, transparent); }
.brass { color: var(--moss-brass); }
.pledge-rules { margin: 24px 0 32px; padding: 0; list-style: none; display: grid; gap: 10px; }
.pledge-rules li { padding-left: 22px; position: relative; color: color-mix(in srgb, var(--moss-ink) 78%, transparent); }
.pledge-rules li::before { content: "\25C6"; position: absolute; left: 0; top: .1em; font-size: .7rem; color: var(--moss-brass); }

/* Stage */
.pledge-progress { height: 3px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.pledge-progress span { display: block; height: 100%; width: 0; background: var(--moss-brass); transition: width .4s linear; }
.pledge-part { margin-top: 16px; font: 500 .74rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--moss-ink) 60%, transparent); }

.pledge-speaker { margin-top: 40px; min-height: 9.5em; transition: opacity .3s ease; }
.pledge-speaker.dim { opacity: .45; }
.speaker-label { font: 500 .74rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--moss-ink) 60%, transparent); margin-bottom: 14px; }
.pledge-caption { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.25; letter-spacing: -0.01em; text-wrap: pretty; }
.pledge-caption.in { animation: capIn .35s ease; }
@keyframes capIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pledge-you { margin-top: 28px; padding: 24px 26px; border: 1px solid color-mix(in srgb, var(--moss-brass) 55%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--moss-brass) 10%, transparent); animation: capIn .35s ease; }
.you-label { color: var(--moss-brass); }
.pledge-you-line { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1.2; color: var(--moss-brass); text-wrap: pretty; }

.pledge-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pledge-skip { margin-top: 22px; }
.pledge-skip .link-btn, .pledge-page .link-btn { color: color-mix(in srgb, var(--moss-ink) 70%, transparent); font-weight: 500; }

/* Name */
.name-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.name-form input { flex: 1 1 260px; min-height: 52px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: var(--moss-ink); font: inherit; font-size: 17px; }
.name-form input:focus { outline: none; border-color: var(--moss-brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--moss-brass) 30%, transparent); }
.pledge-page .err { margin-top: 10px; color: #f0a08f; }

/* Certificate */
.pledge-cert { width: min(1000px, 100%); }
.cert-img { margin-top: 24px; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.pledge-fine { margin-top: 18px; font-size: .85rem; color: color-mix(in srgb, var(--moss-ink) 60%, transparent); }

@media (max-width: 720px) {
  .pledge-main { padding-top: 32px; place-items: start center; }
  .pledge-speaker { margin-top: 28px; min-height: 8em; }
  .pledge-controls .btn { flex: 1 1 auto; }
}

/* Print only the certificate */
@media print {
  @page { size: landscape; margin: 0.4in; }
  body.pledge-page { background: #fff; }
  .pledge-top, .pledge-controls, .pledge-fine, .pledge-cert .eyebrow, .pledge-cert h2 { display: none !important; }
  .pledge-main { padding: 0; display: block; }
  .cert-img { box-shadow: none; margin: 0; width: 100%; }
}