/* =========================================================
   KIT GREEN BOOKS — kitgreenbooks.com
   Design system: Vintage 1860 Americana with modern wit
   Brand color: generous green (riff on "Green")
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* Greens — the brand */
  --green-deep:    #1f4a2c;   /* near-black green for big type */
  --green-forest:  #2f6b3e;   /* primary brand green */
  --green-leaf:    #4a8c52;   /* mid green for accents */
  --green-bright:  #7fb069;   /* lift / hover */
  --green-pale:    #d8e8c8;   /* tints, panels */

  /* Warm parchment & paper */
  --cream:         #faf3e0;   /* default page background */
  --cream-deep:    #f0e3c2;
  --paper:         #fffcf2;   /* cards / panels */
  --parchment:     #ebd9a8;   /* aged paper accents */

  /* Ink / text */
  --ink:           #261a10;
  --ink-soft:      #4b3a28;
  --ink-mute:      #7d6a52;

  /* Western accents (used sparingly so green stays the star) */
  --sky:           #5ba8dd;   /* matches book cover sky */
  --wood:          #8b5a2b;
  --rust:          #b04a2a;
  --gold:          #d49b3a;

  /* UI */
  --max:           1200px;
  --pad:           clamp(1.25rem, 3vw, 2rem);
  --radius:        14px;
  --radius-lg:     22px;
  --shadow-sm:     0 2px 6px rgba(38,26,16,.10);
  --shadow-md:     0 8px 24px rgba(38,26,16,.18);
  --shadow-lg:     0 18px 50px rgba(38,26,16,.25);

  /* Type stacks */
  --font-display:  "Fraunces", Georgia, "Times New Roman", serif;
  --font-slab:     "Alfa Slab One", Georgia, serif;
  --font-body:     "Lora", Georgia, "Times New Roman", serif;
  --font-ui:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  /* subtle parchment texture using SVG noise */
  background-image:
    radial-gradient(circle at 12% 8%, rgba(127,176,105,.08), transparent 35%),
    radial-gradient(circle at 88% 92%, rgba(180,140,70,.07), transparent 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.45  0 0 0 0 0.25  0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--green-forest); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--green-bright); }

::selection { background: var(--green-pale); color: var(--ink); }

/* ---------- TYPOGRAPHY ----------
   Type hierarchy (single, consistent display face for all headings):
   - Fraunces (display): every h1, h2, h3, plus brand wordmark.
     Optical-size + weight axes give clean readability at every size.
   - Lora (body): paragraph text.
   - Inter (UI): nav, buttons, footer headings, captions. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--green-deep);
  margin: 0 0 .4em;
  line-height: 1.15;
  letter-spacing: -.01em;
}
h1 {
  font-weight: 800;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -.015em;
}
h2 {
  font-weight: 700;
  font-variation-settings: "opsz" 96;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.15;
}
h3 {
  font-weight: 700;
  font-variation-settings: "opsz" 36;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.2;
}
h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .03em;
}
p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--font-slab);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green-leaf);
  margin: 0 0 .6em;
}

blockquote {
  font-family: var(--font-slab);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 1.5rem 0;
  padding: 1.2rem 1.6rem;
  border-left: 6px solid var(--green-leaf);
  background: var(--paper);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* "Cover-style" title — used on dark backdrops only (cream fill with dark outline).
   On light/paper backdrops this fill disappears, so don't apply this class there. */
.cover-title {
  font-family: var(--font-display);
  color: var(--cream);
  -webkit-text-stroke: 2px var(--green-deep);
  text-shadow:
    4px 4px 0 var(--green-deep),
    7px 7px 0 rgba(0,0,0,.18);
}

/* ---------- LAYOUT ---------- */
.container { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section--green { background: var(--green-deep); color: var(--cream); }
.section--green h1, .section--green h2, .section--green h3 { color: var(--cream); }
.section--green a { color: var(--green-bright); }
.section--paper { background: var(--paper); }

/* Decorative section divider — frontier ornament */
.divider {
  display: flex; align-items: center; justify-content: center;
  margin: 2.5rem auto;
  color: var(--green-leaf);
  font-family: var(--font-slab);
}
.divider::before, .divider::after {
  content: ""; flex: 0 1 100px; height: 2px; background: currentColor;
  margin-inline: .8rem; border-radius: 2px;
}
.divider::before { background: linear-gradient(to right, transparent, currentColor); }
.divider::after  { background: linear-gradient(to left,  transparent, currentColor); }

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 252, 242, 0.96);    /* paper / near-white */
  backdrop-filter: blur(8px);
  color: var(--green-deep);
  border-bottom: 2px solid var(--green-pale);
  box-shadow: 0 1px 0 rgba(31,74,44,.04);
}
.nav-inner {
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--max); margin: 0 auto;
  padding: .8rem var(--pad);
}
.nav-brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--green-deep);
  text-decoration: none;
  letter-spacing: .03em;
  white-space: nowrap;
}
.nav-brand .surname { color: var(--green-forest); }
.nav-links {
  display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap;
  align-items: center;
}
.nav-links a {
  color: var(--green-deep);
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .95rem;
  padding: .55rem .9rem;
  border-radius: 8px;
  transition: background .2s, color .2s;
}
.nav-links a:hover { background: var(--green-pale); color: var(--green-deep); }
.nav-links a[aria-current="page"] { color: var(--green-forest); }
.nav-links a.cta {
  background: var(--green-bright);
  color: var(--green-deep);
  margin-left: .5rem;
  border: 2px solid var(--green-deep);
}
.nav-links a.cta:hover { background: var(--green-deep); color: var(--cream); }

@media (max-width: 720px){
  .nav-brand { font-size: 1.05rem; }
  .nav-links a { padding: .45rem .55rem; font-size: .85rem; }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-slab);
  font-size: 1.05rem;
  letter-spacing: .04em;
  padding: .9rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s, color .2s;
}
.btn--primary {
  background: var(--green-bright);
  color: var(--green-deep);
  border-color: var(--green-deep);
  box-shadow: 4px 4px 0 var(--green-deep);
}
.btn--primary:hover {
  background: var(--cream);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--green-deep);
  color: var(--green-deep);
}
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.btn--ghost:hover {
  background: var(--cream);
  color: var(--green-deep);
}
.btn--dark {
  background: var(--green-deep);
  color: var(--cream);
  border-color: var(--green-deep);
}
.btn--dark:hover {
  background: var(--green-forest);
  color: var(--cream);
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--green-deep);
  color: var(--cream);
}
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05);
}
/* Strong overlay so the hero copy is always readable, regardless of the
   illustration sitting underneath it. Heavier on the left where the text lives. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,50,29,.80) 0%, rgba(20,50,29,.55) 45%, rgba(20,50,29,.10) 100%),
    linear-gradient(180deg, rgba(20,50,29,.20) 0%, rgba(20,50,29,.30) 55%, rgba(20,50,29,.85) 100%);
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) var(--pad) clamp(3rem, 8vw, 6rem);
  display: grid; gap: 1.5rem;
}
.hero h1 {
  color: var(--cream);
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 6px 24px rgba(0,0,0,.55);
  max-width: 16ch;
}
.hero p.lead {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  max-width: 56ch;
  color: var(--cream);
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem; }

/* Wanted-poster style banner ribbon */
.ribbon {
  display: inline-block;
  width: fit-content;          /* don't stretch when used in a grid/flex parent */
  justify-self: start;
  align-self: start;
  font-family: var(--font-slab);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35rem 1rem;
  background: var(--green-bright);
  color: var(--green-deep);
  border-radius: 4px;
  font-size: .85rem;
  box-shadow: 3px 3px 0 var(--green-deep);
}

/* ---------- CARDS ---------- */
.card {
  background: var(--paper);
  border: 2px solid var(--cream-deep);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.4vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.card--green {
  background: var(--green-pale);
  border-color: var(--green-leaf);
}

/* ---------- ILLUSTRATION TILES ---------- */
.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--green-deep);
  transform: rotate(-.8deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tile:nth-child(2n) { transform: rotate(.8deg); }
.tile:nth-child(3n) { transform: rotate(-.4deg); }
.tile:hover {
  transform: rotate(0) translate(-2px,-3px);
  box-shadow: 9px 9px 0 var(--green-deep);
}
.tile img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
}
.tile figcaption {
  font-family: var(--font-slab);
  font-size: .92rem;
  padding: .8rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border-top: 2px dashed var(--cream-deep);
}

/* ---------- ADVENTURE GRID ---------- */
.adventures {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ---------- FORMAT TIMELINE ---------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem 1.5rem;
  margin-top: 1.5rem;
  position: relative;
}
.timeline-item {
  text-align: center;
  padding: 1rem .6rem;
  background: var(--paper);
  border: 2px solid var(--cream-deep);
  border-radius: var(--radius);
  position: relative;
}
.timeline-item.is-current {
  background: var(--green-deep);
  color: var(--cream);
  border-color: var(--green-bright);
  box-shadow: var(--shadow-md);
}
.timeline-year {
  font-family: var(--font-slab);
  font-size: 1.1rem;
  color: var(--green-leaf);
  margin-bottom: .2rem;
}
.timeline-item.is-current .timeline-year { color: var(--green-bright); }
.timeline-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--green-deep);
  display: block;
}
.timeline-item.is-current .timeline-name { color: var(--cream); }
.timeline-work {
  font-size: .82rem;
  color: var(--ink-mute);
  display: block;
  margin-top: .15rem;
  font-style: italic;
}
.timeline-item.is-current .timeline-work { color: var(--green-pale); }

/* ---------- BOOK FEATURE BLOCK ---------- */
.book-feature {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 760px){
  .book-feature { grid-template-columns: 1fr; text-align: left; }
  .book-feature .book-cover-shell { margin-inline: auto; max-width: 320px; }
}

.book-cover-shell {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    var(--shadow-lg),
    inset 0 0 0 1px rgba(255,255,255,.08);
  transform: rotate(-1.2deg);
  transition: transform .3s ease;
}
.book-cover-shell:hover { transform: rotate(0) scale(1.02); }
.book-cover-shell img { display: block; width: 100%; }

/* ---------- SIGNUP / WAITLIST ---------- */
.signup {
  background: var(--green-deep);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  overflow: hidden;
}
.signup h2 { color: var(--cream); }
.signup .lead { color: var(--green-pale); max-width: 60ch; }
.signup-form {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 1.2rem;
}
.signup-form input[type="email"] {
  flex: 1 1 280px;
  padding: .9rem 1.1rem;
  border-radius: 999px;
  border: 3px solid var(--green-bright);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
}
.signup-form input[type="email"]:focus { outline: 3px solid var(--green-bright); outline-offset: 2px; }

/* Alt signup card — paper background, used for the secondary waitlist */
.signup--alt {
  background: var(--paper);
  border: 2px solid var(--green-leaf);
  color: var(--ink);
}
.signup--alt h2 { color: var(--green-deep); }
.signup--alt .lead, .signup--alt p { color: var(--ink-soft); }
.signup--alt .signup-form input[type="email"] {
  border-color: var(--green-deep);
  background: var(--cream);
}

/* MAILERLITE PLACEHOLDER — replace this whole block with your Mailerlite embed code */
.ml-placeholder {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  border: 2px dashed var(--green-bright);
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  color: var(--green-pale);
  font-family: var(--font-ui);
  font-size: .92rem;
}
.ml-placeholder code {
  background: rgba(0,0,0,.25);
  padding: .15rem .4rem;
  border-radius: 4px;
  color: var(--cream);
}

/* ---------- SOCIAL ROW ---------- */
.socials {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
}
.socials a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .95rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--green-deep);
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  border: 2px solid var(--green-deep);
  transition: transform .15s, background .2s;
}
.socials a:hover {
  background: var(--green-bright);
  transform: translateY(-2px);
}
.section--green .socials a { background: var(--paper); color: var(--green-deep); }

/* ---------- FOOTER ---------- */
.footer {
  background: #14321d;
  color: var(--green-pale);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  font-size: .94rem;
}
.footer a {
  color: var(--cream);
  text-decoration: none;       /* no underlines in the footer */
  transition: color .15s;
}
.footer a:hover { color: var(--green-bright); }

/* The "Read" links column gets weight contrast instead of underlines */
.footer-grid p a { font-weight: 600; }
.footer-grid p a + br + a { color: var(--green-pale); font-weight: 400; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  align-items: start;
}
.footer h4 {
  color: var(--cream);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}

/* Social pills inside the footer — explicit rules so the dark-footer
   inherited "color: cream" can't make the pill text invisible. */
.footer .socials a {
  background: var(--green-bright);
  color: var(--green-deep);
  border-color: var(--green-deep);
  font-weight: 700;
}
.footer .socials a:hover {
  background: var(--cream);
  color: var(--green-deep);
}

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--green-pale);
}
.footer-bottom a { font-weight: 600; }
.footer-mark {
  display: inline-flex; align-items: center; gap: .65rem;
}
.footer-mark img {
  height: 32px; width: auto;
  background: var(--cream); padding: 4px; border-radius: 4px;
}
.footer-mark span {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .02em;
  color: var(--green-pale);
}

/* ---------- UTILITIES ---------- */
.center  { text-align: center; }
.lead    { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); }
.kicker  { color: var(--green-leaf); font-family: var(--font-slab); }
.green   { color: var(--green-forest); }
.deep    { color: var(--green-deep); }
.note    { color: var(--ink-mute); font-size: .92rem; font-style: italic; }
.flex    { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.grid-2  { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.2rem, 3vw, 2.5rem); }
.grid-3  { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.mt-0    { margin-top: 0; }
.mt-1    { margin-top: .5rem; }
.mt-2    { margin-top: 1rem; }
.mt-3    { margin-top: 1.5rem; }
.mt-4    { margin-top: 2.5rem; }

/* ---------- BACK COVER FEATURE ---------- */
.back-cover-quote {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem);
  background:
    linear-gradient(to bottom, rgba(31,74,44,.0), rgba(31,74,44,.0)),
    var(--green-deep);
  color: var(--cream);
  border-radius: var(--radius-lg);
  text-align: center;
}
.back-cover-quote h2 {
  color: var(--cream);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

/* ---------- 404 ---------- */
.fourohfour {
  min-height: 70vh;
  display: grid; place-items: center;
  text-align: center;
  padding: 3rem var(--pad);
}
.fourohfour h1 {
  font-size: clamp(4rem, 14vw, 9rem);
  color: var(--green-deep);
  letter-spacing: -0.02em;
  margin-bottom: .2em;
  text-shadow: none;
}

/* ---------- LEGAL PAGES ---------- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.legal h1 { font-family: var(--font-display); }
.legal h2 { font-family: var(--font-slab); margin-top: 2rem; font-size: 1.4rem; }
.legal p, .legal li { font-size: 1rem; line-height: 1.7; }
.legal ul { padding-left: 1.4rem; }
.legal a { color: var(--green-forest); }


/* ---------- ANIMATION (JS-progressive, fail-visible) ---------- */
/* Content is visible by default. Only when JS has booted (it adds .js to <html>)
   AND the user is OK with motion do we play the reveal animation. This means
   if JS is blocked, slow, or the page is screenshotted before observers fire,
   nothing important ever stays invisible. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  html.js .reveal.is-in { opacity: 1; transform: none; }
}