/* Erica Trestyn — Ghost host theme.
   Palette and type lifted from the live site's design tokens so the two read as
   one thing. Body face is Poppins rather than the site's arboria, which is an
   Adobe Fonts licence we cannot load here; Poppins is the sans in her brand
   guide and is the closest honest substitute. */

:root {
  --green-deep: #22473a;
  --green-mid:  #65976a;
  --mint-light: #d1ebd3;
  --sage:       #bdd5bf;
  --paper:      #f3f4e7;
  --rose:       #dc6874;
  --surface:    #ffffff;
  --ink:        var(--green-deep);
  --ink-muted:  #4a6b5c;
  --border:     rgba(34, 71, 58, 0.16);
  --font-head:  "Averia Serif Libre", Georgia, "Times New Roman", serif;
  --font-body:  "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 42rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---- header ------------------------------------------------------------ */
.site-head {
  padding: 3rem 0 2rem;
  text-align: center;
}
.site-head a { display: inline-block; }
.site-head img { max-height: 56px; width: auto; }
.site-head .site-title {
  font: 600 1.5rem/1.2 var(--font-head);
  color: var(--ink);
  text-decoration: none;
}

/* ---- shared ------------------------------------------------------------ */
.card {
  background: var(--surface);
  border-radius: 14px;
  padding: 2.25rem 2rem;
  box-shadow: 0 2px 18px rgba(34, 71, 58, 0.07);
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.9rem; margin: 0 0 .75rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 .5rem; }
p { margin: 0 0 1.1rem; }
a { color: var(--green-mid); text-underline-offset: 2px; }
a:hover { color: var(--green-deep); }
.muted { color: var(--ink-muted); }
.small { font-size: .92rem; }

.btn {
  display: inline-block;
  background: var(--green-deep);
  color: var(--paper);
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  transition: background .15s ease;
}
.btn:hover { background: #1a382e; color: var(--paper); }

.sprig { display: block; margin: 0 auto 1.25rem; width: 96px; opacity: .75; }

/* ---- notice (index + error) -------------------------------------------- */
.notice { text-align: center; padding: 1rem 0 4rem; }
.notice .card { padding: 3rem 2rem; }

/* ---- post (view in browser) -------------------------------------------- */
.post { padding-bottom: 4rem; }
.post-meta {
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin: 0 0 .6rem;
}
.post-content { margin-top: 1.75rem; }
.post-content img { max-width: 100%; height: auto; border-radius: 10px; }
.post-content figure { margin: 1.75rem 0; }
.post-content figcaption { font-size: .85rem; color: var(--ink-muted); text-align: center; margin-top: .5rem; }
.post-content blockquote {
  margin: 1.75rem 0;
  padding: .5rem 0 .5rem 1.25rem;
  border-left: 3px solid var(--sage);
  color: var(--ink-muted);
}
.post-content a { color: var(--green-mid); }
.feature-image { width: 100%; height: auto; border-radius: 12px; margin-bottom: 1.75rem; }

.read-on-site {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--mint-light);
  border-radius: 12px;
  text-align: center;
}
.read-on-site p { margin: 0 0 1rem; font-size: .95rem; }

/* ---- footer ------------------------------------------------------------ */
.site-foot {
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  padding: 2rem 0 3rem;
  text-align: center;
  font-size: .88rem;
  color: var(--ink-muted);
}
.site-foot a { color: var(--ink-muted); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .card { padding: 1.75rem 1.25rem; }
  h1 { font-size: 1.6rem; }
}

/* ---- Koenig editor cards ----------------------------------------------- */
/* Wide and full-bleed images set in the Ghost editor. Required by gscan, and
   genuinely needed: a feature image dropped in as "full" would otherwise sit at
   body width and look broken in a view-in-browser render. */
.post-content .kg-width-wide {
  position: relative;
  width: 100vw;
  max-width: 56rem;
  left: 50%;
  transform: translateX(-50%);
}
.post-content .kg-width-full {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}
.post-content .kg-width-full img { border-radius: 0; }

.kg-card { margin: 1.75rem 0; }
.kg-image { max-width: 100%; height: auto; }

/* ---- custom fonts ------------------------------------------------------- */
/* Honours the font pair chosen in Ghost admin. Ours are the defaults above;
   these variables let Erica change them in Design settings without a theme
   edit, which matters because she owns this site. */
body {
  font-family: var(--gh-font-body, var(--font-body));
}
h1, h2, h3, .site-title {
  font-family: var(--gh-font-heading, var(--font-head));
}