/* In the Pines — pinesgolf.com. Same palette as the newsletter template (templates/email.html). */
:root {
  --pine: #01452d;
  --pine-deep: #023d27;
  --cream: #eee4ca;
  --paper: #faf6ec;
  --ink: #1f2a24;
  --ink-soft: #4a564f;
  --gold: #f9bf19;
  --rule: #d9ceb2;
  --measure: 38rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.65;
}

a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pine-deep); text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1rem; }

/* Masthead */
.masthead {
  background: var(--pine);
  color: var(--cream);
  text-align: center;
  padding: 3.25rem 1rem 2.75rem;
}
.masthead--slim { padding: 1.4rem 1rem 1.2rem; }
.wordmark {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
  font-size: clamp(2.6rem, 11vw, 4.25rem);
}
.masthead--slim .wordmark { font-size: 1.9rem; }
.wordmark a { color: inherit; text-decoration: none; }
.tagline {
  margin: 0.9rem 0 0;
  font-style: italic;
  opacity: 0.9;
  font-size: 1.05rem;
}

/* Sections */
/* main also carries .wrap, whose shorthand padding would zero the top: set it here. */
main.wrap { padding-top: 2.75rem; padding-bottom: 1rem; }
section { margin: 0 0 2.75rem; }
h2 {
  font-family: "Anton", Impact, "Arial Black", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pine);
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 0 0 0.9rem;
}
.lead { font-size: 1.25rem; line-height: 1.55; margin-top: 0; }
.kicker {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}

/* Sign-up card: Kit's inline form renders inside */
.signup {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--gold);
  padding: 1.25rem 1rem 0.75rem;
  margin: 1.75rem 0 0.5rem;
}
.signup-note { font-size: 0.9rem; color: var(--ink-soft); margin: 0.5rem 0 0; }

ul.ticks { list-style: none; padding: 0; margin: 0; }
ul.ticks li { padding-left: 1.6rem; position: relative; margin: 0 0 0.55rem; }
ul.ticks li::before {
  content: "";
  position: absolute; left: 0.2rem; top: 0.62em;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--gold);
}

/* Archive photos: small 2007 images, shown framed rather than stretched */
figure.photo { margin: 1.5rem 0; }
figure.photo img {
  border: 6px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  margin: 0 auto;
}
figure.photo figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 0.6rem;
}
.logo-old { width: 150px; margin: 0 auto 1rem; }

/* Episode list */
ol.episodes { list-style: none; padding: 0; margin: 0; counter-reset: ep; }
ol.episodes li {
  border-top: 1px solid var(--rule);
  padding: 0.9rem 0;
}
ol.episodes li:last-child { border-bottom: 1px solid var(--rule); }
ol.episodes .ep-num { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
ol.episodes a { font-weight: bold; }
ol.episodes p { margin: 0.25rem 0 0; font-size: 1rem; color: var(--ink-soft); }

.button {
  display: inline-block;
  background: var(--gold);
  color: var(--pine);
  font-weight: bold;
  text-decoration: none;
  padding: 0.75rem 1.4rem;
  letter-spacing: 0.02em;
}
.button:hover { background: #ffd04a; color: var(--pine-deep); }

.letter p { margin: 0 0 1.1rem; }
.signoff { margin-top: 1.5rem; }

.callout {
  background: var(--cream);
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--pine);
}
.callout p:last-child { margin-bottom: 0; }

/* Footer */
footer {
  background: var(--pine-deep);
  color: var(--cream);
  padding: 1.75rem 1rem 2rem;
  font-size: 0.9rem;
  text-align: center;
}
footer a { color: var(--cream); }
footer p { margin: 0.35rem 0; opacity: 0.85; }

@media (min-width: 40rem) {
  main.wrap { padding-top: 3.75rem; }
  .signup { padding: 1.5rem 1.5rem 1rem; }
}

/* Kit's inline form (uid 25f86d362f) inside .signup: the page already carries the name and
   the pitch, so hide the form's own heading, subheading and guarantee line here, and let the
   card be the only box. "Built with Kit" stays (free plan). Button colour is set in Kit. */
.signup .formkit-form { border: 0 !important; background: transparent !important; box-shadow: none !important; max-width: none !important; }
.signup .formkit-form [data-element="header"],
.signup .formkit-form [data-element="subheader"],
.signup .formkit-form [data-element="guarantee"] { display: none !important; }
.signup .formkit-form [data-style] { padding: 0 !important; }
.signup .formkit-form [data-element="fields"] { margin-top: 0 !important; }
