:root{
  --green:#00703c;
  --green-dark:#005a30;
  --yellow:#ffdd00;
  --ink:#0b0c0c;
  --muted:#505a5f;
  --line:#b1b4b6;
  --paper:#ffffff;
  --surface:#f3f2f1;
  --focus:#ffdd00;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.5;
}
a{color:var(--green-dark)}
a:focus-visible,input:focus-visible,button:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:0;
  box-shadow:0 0 0 1px var(--ink)
}

/* ---------- Homepage ---------- */
.home{
  max-width:48rem;
  margin:0 auto;
  padding:1.5rem 1.25rem 3rem;
}
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.25rem;
  padding:1.5rem 0 2rem;
  border-bottom:4px solid var(--yellow);
}
.logo{
  width:140px;
  height:auto;
  display:block;
}
.eyebrow{
  margin:0 0 .25rem;
  font-size:.8125rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--green);
  font-weight:700;
}
.hero h1{
  margin:0;
  font-size:clamp(1.75rem,5vw,2.5rem);
  line-height:1.15;
  color:var(--ink);
}
.tagline{
  margin:.75rem 0 0;
  color:var(--muted);
  font-size:1.0625rem;
}
.event-meta{
  display:grid;
  grid-template-columns:1fr;
  gap:.5rem 1.5rem;
  margin:1.25rem 0 0;
  padding:0;
  text-align:left;
}
.event-meta>div{
  display:flex;
  gap:.5rem;
  padding:.4rem .75rem;
  background:var(--paper);
  border-left:4px solid var(--green);
}
.event-meta dt{font-weight:700;color:var(--muted);min-width:5.5rem}
.event-meta dd{margin:0;color:var(--ink)}

.how-to{
  margin-top:2rem;
  padding:1.5rem 1.25rem;
  background:var(--paper);
  border:1px solid var(--line);
}
.how-to h2{
  margin:0 0 1rem;
  font-size:1.375rem;
  color:var(--ink);
}
.steps{
  list-style:none;
  padding:0;
  margin:0 0 1.5rem;
  display:grid;
  gap:1rem;
}
.steps li{
  display:flex;
  gap:1rem;
  align-items:flex-start;
}
.step-n{
  flex:0 0 auto;
  width:2.25rem;
  height:2.25rem;
  display:grid;
  place-items:center;
  background:var(--green);
  color:#fff;
  font-weight:700;
  border-radius:50%;
  font-variant-numeric:tabular-nums;
}
.steps strong{display:block;color:var(--ink)}
.steps p{margin:.15rem 0 0;color:var(--muted);font-size:.9375rem}
.steps code{
  background:var(--surface);
  padding:0 .25rem;
  border-radius:2px;
  font-size:.9em;
}

.generate{
  display:grid;
  gap:.5rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.generate label{font-weight:700}
.generate input{
  font:inherit;
  padding:.65rem .75rem;
  border:2px solid var(--ink);
  background:#fff;
  color:var(--ink);
  width:100%;
}
.btn{
  display:inline-block;
  background:var(--green);
  color:#fff;
  padding:.75rem 1.25rem;
  text-decoration:none;
  font-weight:700;
  text-align:center;
  border:2px solid var(--green);
  box-shadow:0 2px 0 var(--green-dark);
  min-height:2.75rem;
  line-height:1.25rem;
}
.btn:hover{background:var(--green-dark);border-color:var(--green-dark)}
.btn[aria-disabled="true"]{
  background:var(--line);
  border-color:var(--line);
  color:#fff;
  box-shadow:none;
  cursor:not-allowed;
  pointer-events:auto;
}
.hint{
  margin:0;
  color:#942514;
  font-size:.9375rem;
  min-height:1.25rem;
}

/* ---------- Certificate ---------- */
.certificate{
  box-sizing:border-box;
  width:min(900px,94vw);
  margin:2rem auto;
  padding:clamp(1.5rem,5vw,3rem) clamp(1rem,4vw,2.5rem);
  text-align:center;
  background:#fff;
  border:10px double var(--green);
  font-family:var(--serif);
  color:var(--ink);
  position:relative;
}
.cert-logo{
  width:88px;
  height:auto;
  display:block;
  margin:0 auto 1rem;
}
.kicker{
  margin:0 0 1rem;
  font-size:1rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--green);
  font-family:var(--sans);
  font-weight:700;
}
.certificate h1{
  font-size:clamp(2rem,6vw,3.5rem);
  margin:.5rem 0;
  display:inline-block;
  padding:0 1rem .25rem;
  border-bottom:4px solid var(--yellow);
  overflow-wrap:anywhere;
}
.certificate h2{
  margin:.5rem 0;
  color:var(--green-dark);
}
.sign{margin-top:3rem;font-family:var(--sans)}
.sign span{
  display:inline-block;
  border-top:1px solid var(--ink);
  padding-top:.3rem;
  min-width:14rem;
  font-weight:700;
}
.sign small{display:block;color:var(--muted);margin-top:.25rem}
#print{
  margin-top:2rem;
  padding:.75rem 1.5rem;
  font:inherit;
  font-weight:700;
  background:var(--green);
  color:#fff;
  border:2px solid var(--green);
  box-shadow:0 2px 0 var(--green-dark);
  cursor:pointer;
  font-family:var(--sans);
}
#print:hover{background:var(--green-dark);border-color:var(--green-dark)}

.message{
  max-width:40rem;
  margin:1rem auto;
  padding:1rem 1.25rem;
  background:#fff;
  border-left:4px solid #d4351c;
  color:#942514;
  font-size:1rem;
}

/* ---------- Breakpoints ---------- */
@media (min-width:640px){
  .hero{
    flex-direction:row;
    text-align:left;
    align-items:center;
    gap:2rem;
  }
  .hero-text{flex:1}
  .logo{width:180px}
  .event-meta{grid-template-columns:repeat(3,1fr)}
  .event-meta>div{flex-direction:column}
  .event-meta dt{min-width:0;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
  .generate{
    grid-template-columns:1fr auto;
    align-items:end;
  }
  .generate label{grid-column:1 / -1}
  .generate .hint{grid-column:1 / -1}
}

/* ---------- Print ---------- */
@media print{
  body{background:#fff}
  #home,#message,#print{display:none !important}
  .certificate{border-color:var(--green);margin:0;width:100%}
}