/* ---------------------------------------------------------
   Design tokens
   Paper:      #EAE2C8  (aged, slightly yellow-green paper)
   Paper-lite: #F3ECD8  (card surface, lighter sheet)
   Ink:        #26211B  (warm near-black, not pure black)
   Ink-soft:   #4A4234  (secondary text)
   Accent:     #7A2020  (deep oxblood red — a wax-seal red, not terracotta)
   Line:       #B9A97C  (faded sepia rule/border color)
   Headline face: Georgia (serif)
   Body face:     system sans stack
--------------------------------------------------------- */

:root {
  --paper: #EAE2C8;
  --paper-lite: #F3ECD8;
  --ink: #26211B;
  --ink-soft: #4A4234;
  --accent: #7A2020;
  --line: #B9A97C;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(0,0,0,0.025) 0, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(0,0,0,0.03) 0, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.015) 0, transparent 60%);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
  .result-panel[data-just-generated="true"] { animation: settle 0.5s ease-out; }
  @keyframes settle {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* ---------- Header ---------- */

.masthead { margin-bottom: 2.25rem; }

.eyebrow-plain {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.eyebrow-plain a { color: var(--accent); }

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}

.lede {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* ---------- Torn-paper panel shape, shared ---------- */

.form-panel, .result-panel {
  background: var(--paper-lite);
  border: 1px solid var(--line);
  padding: 1.75rem 1.5rem 2rem;
  margin-bottom: 2.25rem;
  clip-path: polygon(
    0% 1.2%, 3% 0%, 9% 1.5%, 16% 0.3%, 24% 1.4%, 31% 0.2%, 39% 1.6%,
    47% 0.4%, 55% 1.3%, 63% 0.1%, 71% 1.5%, 79% 0.3%, 87% 1.4%, 94% 0.2%, 100% 1%,
    100% 99%, 95% 100%, 88% 98.6%, 80% 99.8%, 72% 98.5%, 64% 99.7%, 56% 98.4%,
    48% 99.6%, 40% 98.3%, 32% 99.5%, 24% 98.2%, 16% 99.4%, 8% 98.1%, 2% 99.3%, 0% 98%
  );
}

/* ---------- Form ---------- */

.field { margin-bottom: 1.25rem; }

label {
  display: block;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.optional { color: #8a7d5c; font-size: 0.85em; }

input[type="text"], input[type="date"], input[type="number"] {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
}

input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

button { font-family: inherit; cursor: pointer; }

.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #F3ECD8;
  border: none;
  padding: 0.8rem 1.4rem;
  font-size: 1rem;
  border-radius: 2px;
}
.btn-primary:hover { background: #611919; }
.btn-primary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.75rem 1.3rem;
  font-size: 1rem;
  border-radius: 2px;
}
.btn-secondary:hover { background: rgba(0,0,0,0.05); }

.btn-plain {
  display: inline-block;
  background: none;
  border: none;
  color: var(--ink-soft);
  text-decoration: underline;
  font-size: 0.95rem;
  padding: 0.75rem 0.4rem;
}

/* ---------- Result ---------- */

#cert-canvas {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  margin-bottom: 1rem;
}

.result-text {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.disclaimer {
  font-size: 0.82rem;
  color: #8a7d5c;
  margin: 0;
}

/* ---------- About / FAQ ---------- */

.about, .faq { margin-bottom: 2.5rem; }

.about h2, .faq h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  margin: 0 0 0.75rem;
}

.about p { max-width: 60ch; }

dl { margin: 0; }
dt {
  font-weight: 600;
  margin-top: 1.1rem;
}
dd {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  max-width: 58ch;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.site-footer a { color: var(--ink-soft); }

/* ---------- Utility ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

a { color: var(--accent); }

@media (max-width: 480px) {
  .actions { flex-direction: column; }
  .actions button { width: 100%; }
}