:root {
  --cream:    #F4ECE2;
  --cream-2:  #EBE0D2;
  --rust:     #AC2A13;
  --rust-dk:  #8E2110;
  --forest:   #1C3A2E;
  --forest-2: #2A5240;
  --ink:      #211A14;
  --muted:    #6B5D4F;
  --line:     rgba(33,26,20,.10);
  --shadow:   0 10px 30px -12px rgba(33,26,20,.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(172,42,19,.10), transparent 60%),
    radial-gradient(900px 500px at 50% 120%, rgba(28,58,46,.12), transparent 60%),
    var(--cream);
  min-height: 100dvh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rust-dk); }

.wrap {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 20px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- Header ---------- */
.avatar {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 52% 26%;
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 2px var(--rust), var(--shadow);
}
.kicker {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 600;
}
h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 33px;
  letter-spacing: -.01em;
  margin-top: 6px;
  color: var(--forest);
}
.tagline {
  margin-top: 12px;
  max-width: 360px;
  font-size: 15px;
  color: var(--muted);
}
.tagline em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--ink);
}

/* ---------- Section heading ---------- */
.sec-label {
  width: 100%;
  margin: 34px 0 14px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sec-label::before,
.sec-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Links ---------- */
.links { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.link {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px;
  background: #FFFDFA;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative; overflow: hidden;
}
.link::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--accent, var(--line));
}
.link:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -14px rgba(33,26,20,.36);
  border-color: rgba(33,26,20,.18);
}
.link:active { transform: translateY(0); }
.ic {
  flex: 0 0 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft, var(--cream-2));
  color: var(--accent, var(--ink));
}
.ic svg { width: 22px; height: 22px; }
.txt { flex: 1; text-align: left; }
.txt .t { display: block; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.txt .s { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.arrow { flex: 0 0 auto; color: var(--muted); opacity: .6; transition: transform .18s ease, opacity .18s ease; }
.link:hover .arrow { transform: translateX(3px); opacity: 1; }

.link.primary { --accent: var(--rust); --accent-soft: rgba(172,42,19,.10); }
.link.primary .ic { background: var(--rust); color: #fff; }
.link.cy     { --accent: var(--rust); --accent-soft: rgba(172,42,19,.10); }
.link.eh     { --accent: var(--forest); --accent-soft: rgba(28,58,46,.10); }
.link.social { --accent: #8E2110; --accent-soft: rgba(172,42,19,.08); }

/* ---------- Opt-in form card ---------- */
.card {
  width: 100%;
  background: #FFFDFA;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 22px 20px;
  text-align: left;
}
.card h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 21px;
  color: var(--forest);
  text-align: center;
}
.card .sub { font-size: 13px; color: var(--muted); text-align: center; margin-top: 6px; margin-bottom: 16px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.field input {
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus { outline: none; border-color: var(--rust); box-shadow: 0 0 0 3px rgba(172,42,19,.12); }

.consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 14px 0 4px;
  font-size: 11.5px; line-height: 1.5; color: var(--muted);
}
.consent input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--rust); }
.consent a { color: var(--rust-dk); }

.btn {
  width: 100%; margin-top: 16px; padding: 14px 18px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  color: #fff; background: var(--rust); border: none; border-radius: 12px;
  cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--rust-dk); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.form-note { font-size: 11px; color: var(--muted); text-align: center; margin-top: 12px; line-height: 1.5; }
.success {
  display: none; margin-top: 4px; padding: 16px;
  background: rgba(28,58,46,.07); border: 1px solid rgba(28,58,46,.18);
  border-radius: 12px; text-align: center; color: var(--forest); font-size: 14px;
}

/* ---------- Footer ---------- */
footer {
  margin-top: 36px; width: 100%;
  font-size: 11.5px; letter-spacing: .02em; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.brandline { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--forest); font-size: 13px; }
.footlinks { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.footlinks a { color: var(--muted); text-decoration: none; }
.footlinks a:hover { color: var(--rust-dk); text-decoration: underline; }

/* ---------- Legal pages ---------- */
.legal {
  max-width: 720px; margin: 0 auto; padding: 48px 22px 64px; text-align: left;
}
.legal .back { display: inline-block; font-size: 13px; text-decoration: none; color: var(--rust-dk); margin-bottom: 22px; }
.legal .back:hover { text-decoration: underline; }
.legal h1 { font-size: 34px; color: var(--forest); margin-bottom: 6px; }
.legal .updated { font-size: 12.5px; color: var(--muted); margin-bottom: 28px; }
.legal h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 20px;
  color: var(--forest); margin: 30px 0 10px;
}
.legal p, .legal li { font-size: 14.5px; color: #3a322a; margin-bottom: 12px; }
.legal ul { padding-left: 20px; margin-bottom: 12px; }
.legal li { margin-bottom: 7px; }
.legal strong { color: var(--ink); }
.legal .callout {
  background: rgba(172,42,19,.06); border: 1px solid rgba(172,42,19,.20);
  border-radius: 12px; padding: 16px 18px; margin: 18px 0;
}
.legal .callout p { margin-bottom: 0; }

@media (max-width: 380px) {
  h1 { font-size: 29px; }
  .ic { flex-basis: 40px; height: 40px; }
}