@font-face {
  font-family: 'Bitter';
  src: url('fonts/bitter.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bs-success: #278c32;
  --bs-success-rgb: 39, 140, 50;
  --bs-body-font-family: 'Bitter', Georgia, 'Times New Roman', serif;
  --bs-body-color: #343538;
  --bs-body-bg: #f6f7f4;
  --bierversum-charcoal: #3b3b3e;
  --bierversum-green-dark: #176329;
}

body {
  font-family: 'Bitter', Georgia, 'Times New Roman', serif;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
}

h1, h2, h3, .navbar, .btn, .form-control, .form-select, .form-label {
  font-family: 'Bitter', Georgia, 'Times New Roman', serif;
}

.site-header { min-height: 72px; background-color: var(--bierversum-charcoal) !important; }
.wordmark { display: inline-flex; align-items: center; }
.wordmark-logo { display: block; width: auto; height: 38px; max-width: min(220px, 42vw); object-fit: contain; }
.header-caption { letter-spacing: .12em; font-weight: 700; }
.site-footer { background-color: var(--bierversum-charcoal) !important; font-size: .85rem; }
.site-footer a { color: #9cda8d; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1rem;
  color: var(--bierversum-green-dark);
  font-family: 'Bitter', Georgia, 'Times New Roman', serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.12; }
.narrow-panel { width: min(100% - 2rem, 680px); }
.auth-panel > p:not(.eyebrow) { color: #62645f; }
.back-link { display: inline-block; margin-bottom: 1.2rem; color: var(--bierversum-green-dark); text-decoration: none; font-size: .9rem; font-weight: 700; }
.back-link:hover { text-decoration: underline; }
.form-intro h1 { margin-bottom: 1rem; }
.form-intro > div > p:not(.eyebrow) { color: #62645f; font-size: 1.1rem; }
.form-card, .review-card, .narrow-panel { border-radius: .25rem; }
.form-label { font-size: .9rem; font-weight: 600; }
.form-control, .form-select { border-color: #d6d9d4; border-radius: .2rem; color: #343538; }
.form-control:focus, .form-select:focus { border-color: #278c32; box-shadow: 0 0 0 .2rem rgba(39, 140, 50, .14); }
.form-select, .form-control:not(textarea) { min-height: 56px; }
.form-text { margin-top: .35rem; color: #777a74; font-size: .8rem; }
.small-muted { color: #777a74; font-size: .82rem; }
.optional { color: #777a74; font-weight: 400; }
.field[hidden] { display: none !important; }
.code-entry { font-size: 1.5rem; letter-spacing: .26em; text-align: center; }
.btn-success { --bs-btn-bg: #278c32; --bs-btn-border-color: #278c32; --bs-btn-hover-bg: #176329; --bs-btn-hover-border-color: #176329; --bs-btn-active-bg: #176329; --bs-btn-active-border-color: #176329; }
.form-actions .btn { min-width: 230px; }
.summary-row dt { color: #70736e; font-size: .9rem; font-weight: 600; }
.summary-row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.success-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #e6f1e1; color: var(--bierversum-green-dark); font-size: 1.8rem; font-weight: 700; }
.success-panel .eyebrow { justify-content: center; }
.success-panel .alert { text-align: left; }

@media (max-width: 575.98px) {
  .site-header { min-height: 64px; }
  .wordmark-logo { height: 34px; max-width: min(180px, 43vw); }
  .header-caption { max-width: 145px; font-size: .68rem; letter-spacing: .06em; line-height: 1.4; }
  .form-actions .btn, .review-actions .btn { width: 100%; }
  .review-actions form { flex: 1 1 100%; }
}
