/* Shared look for the small pages: /confirm, /unsubscribe and /privacy.
   Mirrors the homepage's paper, ink and sketch buttons. */
:root {
  --paper: #f3ebdc;
  --paper-hi: #fbf7ee;
  --ink: #2b2622;
  --ink-soft: #5b524a;
  --ink-faint: rgba(43, 38, 34, 0.18);
  --orange: #ff6e40;
  --orange-deep: #d9481a;
  --orange-text: #b33c16;
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-hand: 'Caveat', cursive;
  --sketch-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

header {
  display: flex;
  align-items: center;
  padding: 22px clamp(16px, 4vw, 40px);
}

.brand { display: inline-flex; padding: 6px 9px; margin: -6px -9px; background: var(--paper-hi); border-radius: 10px 4px 12px 5px / 5px 12px 4px 10px; }
.brand-mark {
  display: block;
  width: 67px;
  height: 24px;
  background: var(--ink);
  -webkit-mask: url('/assets/ondori-wordmark-white.png') center / contain no-repeat;
  mask: url('/assets/ondori-wordmark-white.png') center / contain no-repeat;
  transform: rotate(-2deg);
}

main { padding: 24px 16px 64px; }

.card {
  width: 100%;
  max-width: 540px;
  margin: 6vh auto 0;
  padding: 34px 34px 30px;
  background: var(--paper-hi);
  border: 2px solid var(--ink);
  border-radius: var(--sketch-radius);
  box-shadow: 6px 7px 0 var(--ink-faint);
}

.hand { margin: 0; font-family: var(--font-hand); font-size: 22px; color: var(--orange-text); }

h1 {
  margin: 6px 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.1;
}

h1:focus { outline: none; }
.card p { color: var(--ink-soft); }

.sketch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 10px;
  padding: 12px 26px;
  font: 600 17px var(--font-display);
  color: var(--paper-hi);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--sketch-radius);
  box-shadow: 4px 5px 0 var(--orange);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sketch-btn:hover { transform: translate(-1px, -2px) rotate(-1deg); box-shadow: 5px 7px 0 var(--orange); }
.sketch-btn:focus-visible, a:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 3px; }
.sketch-btn:disabled { color: var(--ink-soft); background: rgba(43, 38, 34, 0.08); box-shadow: none; cursor: progress; transform: none; }
.sketch-btn[hidden] { display: none; }

.status:not(:empty) {
  margin: 18px 0 0;
  padding: 10px 14px;
  color: var(--ink);
  background: #edf6e9;
  border: 2px solid var(--ink);
  border-radius: 12px 4px 14px 5px / 5px 14px 4px 12px;
}

.status[data-tone="problem"] { background: rgba(255, 110, 64, 0.14); }
.status:focus { outline: none; }
a { color: var(--ink); text-underline-offset: 3px; }
.small { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .sketch-btn { transition: none; }
  .sketch-btn:hover { transform: none; }
}

@media (max-width: 560px) {
  .card { padding: 28px 22px 24px; margin-top: 2vh; }
  .sketch-btn { width: 100%; }
}