/* Otis branding for Listmonk public pages (opt-in, unsubscribe, manage).
   Injected as appearance.public.custom_css, loaded after the default style.css.
   Same structure as dreamkit/public.css, with otis.pet colours and type. */

:root {
  --dk-ink: #1c1917;
  --dk-blue: #b45309;
  --dk-orange: #d97706;
  --dk-paper: #fffbeb;
  --dk-border: #f5e6c8;
  --dk-text: #292524;
  --dk-muted: #57534e;
}

body {
  background: var(--dk-paper);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--dk-text);
}

.container { max-width: 600px; }

.wrap {
  background: #ffffff;
  border: 1px solid var(--dk-border);
  border-radius: 0;
  box-shadow: 10px 10px 0 var(--dk-blue);
  padding: 40px;
}

.header {
  border-bottom: 3px solid var(--dk-ink);
  padding-bottom: 18px;
  margin-bottom: 28px;
}
.header .logo img { max-width: 180px; }

h1, h2, h3, h4 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dk-ink);
  line-height: 1.15;
}

a { color: var(--dk-blue); text-decoration-color: rgba(28, 45, 110, 0.35); }
a:hover { color: var(--dk-ink); }

.button {
  background: var(--dk-ink);
  color: #ffffff;
  border-radius: 0;
  border: 3px solid var(--dk-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 26px;
  box-shadow: 5px 5px 0 var(--dk-blue);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover {
  background: var(--dk-blue);
  color: #ffffff;
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--dk-blue);
}
.button.button-outline {
  background: #ffffff;
  color: var(--dk-ink);
  box-shadow: 5px 5px 0 var(--dk-border);
}
.button.button-outline:hover {
  background: var(--dk-ink);
  color: #ffffff;
}

input[type="text"], input[type="email"], input[type="password"], select {
  border: 3px solid var(--dk-ink);
  border-radius: 0;
  box-shadow: none;
}
input:focus {
  border-color: var(--dk-blue);
  box-shadow: 4px 4px 0 var(--dk-blue);
}

.dk-footer {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dk-muted);
  text-transform: uppercase;
}
.dk-footer a { color: var(--dk-blue); }

.dk-alt { color: var(--dk-muted); font-size: .92em; }
.header .logo img { max-width: 56px; }