@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Caveat:wght@500;600&family=EB+Garamond:wght@600;700;800&display=swap');

:root {
  /* Three faces, exactly as the site loads them */
  --font-body: 'Nunito', system-ui, sans-serif;               /* body, headings, buttons, labels */
  --font-title: 'EB Garamond', Georgia, serif;                /* book title only: wordmark, H1, footer title */
  --font-hand: 'Caveat', cursive;                             /* handwritten subheads, captions, signature */

  /* Sizes (rem, 16px root; body is 18px) */
  --text-hero: 4.4rem;        /* home H1 (3.2 ≤900px, 2.5 ≤560px) */
  --text-h1: 3.2rem;          /* early-reader H1 */
  --text-h2-xl: 2.8rem;       /* preorder H2 */
  --text-h2: 2.3rem;          /* section H2 */
  --text-h2-sm: 1.7rem;       /* two-col H2 */
  --text-h3: 1.6rem;          /* about H2 */
  --text-verse: 2.4rem;
  --text-hand-xl: 2.1rem;     /* hero sub */
  --text-hand-lg: 1.9rem;     /* note head, signature, journey end */
  --text-hand: 1.7rem;        /* beat lines */
  --text-hand-sm: 1.5rem;     /* inside-head, form hand */
  --text-lead: 1.35rem;
  --text-passage: 1.2rem;
  --text-note: 1.18rem;
  --text-hook: 1.15rem;
  --text-body: 1.125rem;      /* 18px */
  --text-ui: 1rem;            /* buttons, inputs */
  --text-nav: .95rem;
  --text-label: .92rem;
  --text-small: .9rem;
  --text-opt: .85rem;
  --text-fine: .8rem;
  --text-eyebrow: .74rem;
  --text-stage: .72rem;
  --text-ref: .68rem;

  --leading-body: 1.7;
  --leading-heading: 1.12;
  --leading-passage: 1.85;
  --leading-hand: 1.35;
  --leading-verse: 1.3;

  --tracking-eyebrow: .22em;
  --tracking-ref: .18em;
  --tracking-verse-ref: .2em;
  --tracking-snipe: .16em;
  --tracking-title: -.01em;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
}

:root {
  /* Verbatim from theabidingtree.com :root */
  --white: #FDFDFB;        /* clean paper white — page background, theme-color */
  --ink: #3A453C;          /* soft charcoal-green body text */
  --leaf: #4E8A57;         /* meadow green — links, buttons, eyebrows */
  --leaf-deep: #2F5B39;    /* deep foliage — headings, dark bands */
  --sky: #E8F2F9;          /* watercolor sky wash — scripture band, form section */
  --pear: #D9A62E;         /* pear gold — accents, snipe, wordmark period, focus */
  --rule: #DFE7DD;         /* hairlines */
  --wash: #F2F7F0;         /* soft green wash — quiet cards, invite band */
  --shadow: rgba(52,84,60,.13);

  /* Secondary literals used in the site CSS */
  --pear-deep: #c2921f;    /* pear button hover */
  --pear-ink: #3d2f0d;     /* text on pear */
  --ink-soft: #4B5850;     /* about-the-author body */
  --ink-muted: #5E6B63;    /* credits, notes */
  --ink-faint: #6E7C6F;    /* specs, optional labels */
  --ink-fine: #93A094;     /* fine print */
  --field-border: #C9D4C9; /* inputs */
  --on-deep: #F2F7EF;      /* body text on leaf-deep */
  --on-deep-hand: #CFE3C9; /* Caveat on leaf-deep */
  --on-deep-meta: #A9C7A3; /* meta on leaf-deep */
  --sky-top: #F4FAFE;      /* heart gradient stops */
  --sky-bottom: #DFEDF7;
  --scrim: rgba(38,56,42,.88);

  /* Semantic aliases */
  --bg-page: var(--white);
  --bg-wash: var(--wash);
  --bg-sky: var(--sky);
  --bg-deep: var(--leaf-deep);
  --bg-card: #ffffff;
  --text-body: var(--ink);
  --text-heading: var(--leaf-deep);
  --text-accent: var(--leaf);
  --text-hand: var(--pear);
  --border-rule: var(--rule);
  --action-primary: var(--leaf);
  --action-primary-hover: var(--leaf-deep);
  --action-gold: var(--pear);
  --action-gold-hover: var(--pear-deep);
  --focus-ring: var(--pear);
}

:root {
  --wrap-max: 1080px;
  --narrow-max: 640px;       /* home */
  --narrow-max-er: 660px;    /* early-reader */
  --form-max: 700px;
  --journey-max: 960px;
  --gutter: 32px;            /* 22px ≤560px */

  --section-y: 88px;         /* home */
  --section-y-er: 76px;      /* early-reader; 60px ≤640px */
  --hero-y: 96px;
  --masthead-y: 18px 16px;

  /* Radii — soft, rounded */
  --radius-plate: 8px;
  --radius-plate-img: 4px;
  --radius-field: 8px;
  --radius-card: 10px;
  --radius-form: 14px;
  --radius-lightbox: 6px;
  --radius-pill: 999px;

  /* Shadows — green-tinted, generous */
  --shadow-btn: 0 6px 18px var(--shadow);
  --shadow-plate: 0 10px 28px var(--shadow);
  --shadow-form: 0 12px 32px var(--shadow);
  --shadow-snipe: 0 8px 20px rgba(52,84,60,.28);
  --shadow-lightbox: 0 24px 60px rgba(0,0,0,.4);

  /* Plate tilt */
  --tilt-l: rotate(-.7deg);
  --tilt-r: rotate(.6deg);
  --tilt-snipe: rotate(6deg);

  /* Motion */
  --duration-fast: .15s;
  --ease: ease;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-page); color: var(--text-body); font-family: var(--font-body); font-size: 18px; line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-body); font-weight: var(--weight-black); line-height: var(--leading-heading); color: var(--text-heading); margin: 0; }
a { color: var(--leaf); }
a:hover { color: var(--leaf-deep); }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--pear); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ---------- Mobile ---------- */
html, body { overflow-x: clip; }
img { max-width: 100%; }
@media (max-width: 900px) {
  :root { --text-hero: 3.2rem; }
  [style*="grid-template-columns: 7fr 5fr"] { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 640px) {
  :root { --text-hero: 2.5rem; --text-hand-xl: 1.7rem; --text-hand-lg: 1.6rem; --text-hand: 1.45rem; }
  body { font-size: 17px; }
  /* gutters + section rhythm */
  [style*="padding: 0px 32px"] { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="padding: 88px 0px"], section[style*="padding: 80px 0px"], section[style*="padding: 76px 0px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[style*="padding: 0px 0px 88px"], section[style*="padding: 20px 0px 88px"], section[style*="padding: 0px 0px 76px"], section[style*="padding: 20px 0px 76px"], section[style*="padding: 10px 0px 76px"] { padding-bottom: 56px !important; }
  section[style*="padding: 84px 0px 70px"] { padding: 48px 0 44px !important; }
  /* header */
  header > div { padding: 12px 20px !important; gap: 8px 16px !important; flex-wrap: wrap !important; justify-content: center !important; }
  header nav { gap: 6px 16px !important; flex-wrap: wrap !important; justify-content: center !important; }
  header nav a { font-size: .9rem !important; }
  header nav a[style*="border-radius: 999px"] { padding: 7px 16px !important; }
  /* heroes: full-width text over a softened image */
  [style*="max-width: min(30em"] { max-width: none !important; }
  /* hero: stack text above the photo instead of overlaying it */
  section[style*="min-height: min(84vh"] { flex-direction: column !important; align-items: stretch !important; min-height: 0 !important; }
  section[style*="min-height: min(84vh"] > div[style*="inset: 0px"] { position: relative !important; inset: auto !important; order: 2; height: 62vw; min-height: 240px; max-height: 420px; }
  section[style*="min-height: min(84vh"] > div[style*="inset: 0px"] > img { object-position: center !important; }
  [style*="linear-gradient(90deg"] { display: none !important; }
  section[style*="min-height: min(84vh"] > div > div[style*="padding: 80px 0px"],
  section[style*="min-height: min(84vh"] div[style*="padding: 96px 0px"] { padding: 40px 0 36px !important; }
  [aria-label^="Launching"], [aria-label^="Award"] { transform: scale(.7) !important; top: auto !important; bottom: 8px !important; right: 8px !important; }
  /* grids stack to one column, image before text */
  [style*="minmax("], [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 48px"] { gap: 20px !important; }
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 54px 44px"] { gap: 36px !important; }
  [style*="minmax("][style*="gap: 48px"] { gap: 28px !important; }
  [style*="display: grid"] > [style*="order:"] { order: 0 !important; }
  [style*="display: grid"] > [style*="text-align: right"] { text-align: left !important; }
  [style*="display: grid"] > [style*="text-align: right"] > p { margin-left: 0 !important; }
  [style*="display: grid"][style*="gap: 72px"] { gap: 56px !important; }
  figure[style*="margin: 0px"] > div[style*="margin-top: 44px"] { margin-top: 0 !important; }
  svg[preserveAspectRatio="none"] { height: 56px !important; }
  /* type scale */
  h1[style*="font-size: 3.2rem"] { font-size: 2.3rem !important; }
  h2[style*="font-size: 2.8rem"] { font-size: 2.1rem !important; }
  h2[style*="font-size: 2.3rem"], h2[style*="font-size: 2.1rem"], h2[style*="font-size: 2rem"] { font-size: 1.75rem !important; }
  h2[style*="font-size: 1.7rem"] { font-size: 1.5rem !important; }
  p[style*="font-size: 2.4rem"] { font-size: 1.85rem !important; }
  p[style*="font-size: 1.9rem"], p[style*="font-size: 1.8rem"], p[style*="font-size: 2rem"] { font-size: 1.55rem !important; }
  p[style*="font-size: 1.7rem"] { font-size: 1.45rem !important; }
  p[style*="font-size: 1.35rem"] { font-size: 1.2rem !important; }
  /* cards */
  [style*="padding: 26px 28px"] { padding: 22px 20px !important; }
  [style*="padding: 40px 36px"] { padding: 28px 20px !important; }
  form[style*="padding: 40px 42px"] { padding: 26px 20px !important; }
  blockquote[style*="margin: 1.4em 0px 1.4em 1.4em"] { margin-left: 0 !important; }
  /* buttons: comfortable tap targets, allow wrapping */
  a[style*="border-radius: 999px"], button[style*="border-radius: 999px"] { white-space: normal !important; text-align: center; }
  [style*="position: fixed"][style*="padding: 32px"] { padding: 12px !important; }
}