@font-face {
  font-family: Oswald;
  src: url("oswald.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #17170f;
  --olive: #363b1c;
  --cream: #f3dfb9;
  --heading: Oswald, "Arial Narrow", Impact, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23846a42' opacity='.22' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { min-width: 320px; background: #4b443d; }
body {
  margin: 0;
  min-height: 100svh;
  padding: 28px 36px;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  background-color: #4b443d;
  background-image: linear-gradient(#00000080, #00000080), url("../images/tan-camouflage.png");
  background-blend-mode: multiply, luminosity;
  background-repeat: repeat;
  background-size: auto, 700px 700px;
}
button, input { font: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; z-index: 20; top: 8px; left: 8px; padding: 12px; color: var(--ink); background: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.landing {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  overflow: hidden;
  box-shadow: 0 15px 50px #30241180, 0 0 0 1px #fff0c955;
  background: linear-gradient(#0000001a, #0000001a), #393939 url("../images/olive-wood.png") center top / 1080px auto repeat;
  background-blend-mode: multiply, luminosity;
}
.hero { padding-bottom: 4px; }
.artwork {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1024 / 280;
  background: #b3a886;
}
/* The recomposed banner is top-aligned to retain the full logo and tagline.
   The header is two-thirds the previous height at each breakpoint. */
.hero-art { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; }
.signup-wrap {
  position: relative;
  z-index: 1;
  width: calc(100% - 64px);
  max-width: 900px;
  margin: -20px auto 0;
  padding: 24px 40px 23px;
  background:
    var(--grain),
    radial-gradient(ellipse at 50% 30%, #fff9e5b3, transparent 72%),
    linear-gradient(100deg, #d7b88b, #efdbb6 15%, #efdfbf 55%, #dbbd92);
  filter: drop-shadow(0 3px 3px #1b22192e);
  clip-path: polygon(0 2%, 5% 1%, 8% 2%, 14% .4%, 19% 1.5%, 25% .7%, 32% 1.6%, 40% 0, 48% 1%, 57% .3%, 66% 1.4%, 75% .4%, 83% 1.3%, 92% .4%, 100% 1.7%, 99.7% 12%, 100% 24%, 99.6% 36%, 100% 50%, 99.6% 66%, 100% 80%, 99.6% 98%, 94% 99.6%, 84% 98.7%, 75% 100%, 67% 98.8%, 55% 99.7%, 43% 98.6%, 32% 100%, 20% 99%, 10% 100%, .3% 98.5%, 0 84%, .5% 72%, 0 56%, .3% 43%, 0 26%, .5% 16%);
}
.signup-panel { text-align: center; width: 100%; max-width: 700px; margin-inline: auto; }
.eyebrow { display: none; }
h1 { margin: 0; font: 700 clamp(2rem, 3.4vw, 2.7rem)/1.12 var(--heading); text-transform: uppercase; letter-spacing: -.025em; }
.signup-intro { font: 500 1.08rem/1.45 var(--heading); text-transform: uppercase; letter-spacing: .055em; max-width: 620px; margin: 11px auto 15px; }
form { max-width: 620px; margin: 0 auto; text-align: left; }
form label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 700; }
.email-field { position: relative; }
.email-field svg { position: absolute; top: 50%; left: 16px; width: 28px; height: 23px; transform: translateY(-50%); pointer-events: none; }
input {
  width: 100%;
  min-height: 55px;
  border: 1px solid #8e8576;
  border-radius: 3px;
  padding: 14px 13px 14px 57px;
  background: linear-gradient(#fff, #f8f8f6);
  box-shadow: inset 0 1px 5px #26211712;
  color: #181913;
  font-size: 1.0625rem;
}
input::placeholder { color: #666; opacity: 1; }
button {
  width: 100%;
  min-height: 59px;
  margin-top: 10px;
  padding: 11px 16px 13px;
  color: #fff9e7;
  background: var(--grain), linear-gradient(110deg, #454923, #313818);
  border: 1px solid #626038;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px #f0d4a019, 0 2px 2px #3f34172b;
  cursor: pointer;
  font: 700 1.85rem/1.1 var(--heading);
  text-transform: uppercase;
  transition: filter .15s, box-shadow .15s, transform .15s;
}
button:hover { filter: brightness(1.16); box-shadow: inset 0 0 0 2px #f0d4a032, 0 3px 7px #3f341745; }
button:active { transform: translateY(1px); }
button:disabled { cursor: default; opacity: .7; }
:focus-visible { outline: 3px solid #786021; outline-offset: 4px; }
.privacy-note { margin: 10px 0 0; font-size: .875rem; line-height: 1.4; text-align: center; }
.form-feedback { margin: 13px 0 0; padding: 12px; border: 1px solid #8f835e; background: #fff8e7c9; color: #333922; font-size: .9375rem; line-height: 1.45; text-align: center; }
#signup-success { font-size: 1.25rem; font-weight: 700; }
.noscript-note { font-size: .875rem; line-height: 1.5; }
.benefits {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 25px 15px 27px;
  color: var(--cream);
  background: linear-gradient(#00000026, #00000026), #393939 url("../images/olive-wood.png") center / 1080px auto repeat;
  background-blend-mode: multiply, luminosity;
}
.benefit { padding: 0 17px; text-align: center; }
.benefit + .benefit { border-left: 1px solid #e1c58b55; }
.benefit-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 12px; border: 3px solid #f0d5a2; border-radius: 50%; }
.benefit-icon svg { width: 38px; height: 38px; stroke-width: 2.3; overflow: visible; }
.benefit h2 { font: 600 1.25rem/1.22 var(--heading); text-transform: uppercase; margin: 0 0 9px; }
.benefit p { max-width: 225px; margin: 0 auto; font-size: 1rem; line-height: 1.45; color: #fff3dc; }
.closing {
  padding: 18px 24px 20px;
  color: var(--cream);
  background: var(--grain), linear-gradient(110deg, #192110, #151d12);
  border-top: 1px solid #cdb37955;
}
.closing-message { display: flex; align-items: center; justify-content: center; gap: 14px; }
.closing-message p { margin: 0; font: 600 1.4rem/1.3 var(--heading); text-transform: uppercase; text-align: center; }
.closing-message svg { width: 22px; height: 26px; flex-shrink: 0; }
.rule { height: 1px; width: 45px; background: #cdb37966; }
.topics { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; }
.topics li { display: flex; align-items: center; gap: 8px; padding: 0 13px; font: 400 .875rem/1.4 var(--heading); text-transform: uppercase; }
.topics li + li { border-left: 1px solid #b597644d; }
.topics svg { width: 22px; height: 23px; flex-shrink: 0; }
[hidden] { display: none !important; }
@media (max-width: 900px) {
  body { padding: 20px; }
  .signup-wrap { width: calc(100% - 40px); padding-inline: 28px; }
  .benefits { padding-inline: 10px; }
  .benefit { padding-inline: 12px; }
  .benefit h2 { font-size: 1.12rem; }
  .topics { gap: 15px 0; }
  .topics li { width: 25%; justify-content: center; }
  .topics li:nth-child(5) { border-left: 0; }
}
@media (max-width: 650px) {
  body { padding: 12px; background-size: auto, 450px 450px; }
  .artwork { aspect-ratio: 1024 / 320; }
  .signup-wrap { width: calc(100% - 20px); margin-top: -10px; padding: 22px 16px; }
  h1 { font-size: clamp(1.65rem, 5.3vw, 2.1rem); }
  .signup-intro { font-size: 1rem; max-width: 390px; letter-spacing: .035em; margin-block: 11px 16px; }
  input { font-size: 1rem; padding-left: 48px; }
  .email-field svg { width: 24px; left: 12px; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px 0; padding: 23px 9px 27px; background-size: auto, 800px auto; }
  .benefit:nth-child(3) { border-left: 0; }
  .benefit h2 { font-size: 1.17rem; }
  .benefit p { max-width: 230px; }
  .closing { padding: 20px 12px 24px; }
  .closing-message { gap: 9px; }
  .rule { display: none; }
  .closing-message p { max-width: 280px; font-size: 1.3rem; }
  .topics { margin-top: 20px; }
  .topics li { padding: 0 5px; gap: 6px; }
}
@media (max-width: 420px) {
  .benefit { padding-inline: 9px; }
  .benefit h2 { font-size: 1.07rem; }
  .topics li { width: 50%; justify-content: flex-start; padding-left: 17px; font-size: .9rem; }
  .topics li:nth-child(odd) { border-left: 0; }
  .closing-message svg { width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}




/* MailerLite behavior hooks; all visual styling remains native to this site. */
#mlb2-46393858 .d-none { display: none !important; }
#mlb2-46393858 .field-error { display: none; margin: 8px 0 0; color: #842e20; font-size: .875rem; line-height: 1.4; }
#mlb2-46393858 .ml-error .field-error { display: block; }
#mlb2-46393858 .ml-error input { border-color: #842e20; outline-color: #842e20; }
#mlb2-46393858 .ml-field-error-message { color: #842e20; font-size: .875rem; line-height: 1.4; }
#mlb2-46393858 .ml-server-error { color: #842e20; border-color: #a76447; }
#mlb2-46393858 .row-success { max-width: 620px; margin-inline: auto; }