/* ============================================================
   ENABLE EARTH - on-site Journal / blog article styles
   Shares the main site's design system (palette, type, motion).
   ============================================================ */
:root{
  --earth:#1a2e1a; --earth-2:#142414; --moss:#2d5a27; --leaf:#4a8c3f; --leaf-d:#3f6529;
  --lime:#8cc63f; --accent:#c8e86a; --sand:#f5f0e8; --cream:#faf7f2; --char:#1c1c1c;
  --ember:#d9742d; --ember-2:#c25a1f; --ember-soft:#e79a5d; --ember-cta:#b5521b; --ember-cta-h:#a2481a;
  --ash:#8a8178; --ash-2:#b6ada2;
  --ink:#1c1c1c; --on-dark:#f2efe6; --on-dark-soft:#c9d2c2; --on-light:#1c1c1c; --on-light-soft:#44483f;
  --earth-line:rgba(245,240,232,0.14); --cream-line:rgba(28,28,28,0.10);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-h1:clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
  --fs-h2:clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --fs-h3:clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-lead:clamp(1.12rem, 1rem + 0.5vw, 1.35rem);
  --fs-body:clamp(1.05rem, 1rem + 0.2vw, 1.18rem);
  --maxw:1200px; --measure:68ch;
  --gutter:clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --radius-sm:8px; --radius:14px; --radius-lg:22px; --radius-pill:999px;
  --ease-standard:cubic-bezier(0.2,0,0,1); --ease-enter:cubic-bezier(0.05,0.7,0.1,1); --ease-emphasized:cubic-bezier(0.22,1,0.36,1);
  --dur-3:300ms; --dur-4:400ms; --dur-5:550ms;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--cream); color:var(--on-light); font-family:var(--sans); font-size:var(--fs-body); line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:700; line-height:1.12; letter-spacing:-0.02em; text-wrap:balance; }
p{ margin:0; }
::selection{ background:var(--accent); color:var(--earth); }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
:where(a,button):focus-visible{ outline:3px solid var(--moss); outline-offset:3px; border-radius:4px; }

/* reading progress */
.progress{ position:fixed; top:0; left:0; height:3px; width:100%; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg,var(--leaf),var(--lime)); z-index:2000; transition:transform .1s linear; }

/* nav */
.nav{ position:sticky; top:0; z-index:1000; background:rgba(250,247,242,0.86); backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1); border-bottom:1px solid var(--cream-line); }
.nav__row{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.85rem; }
.brand{ display:inline-flex; align-items:center; }
.brand img{ height:22px; width:auto; }
.nav__back{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; color:var(--moss); padding-block:.6rem; margin-block:-.6rem; }
.nav__back svg{ width:18px; height:18px; transition:transform .35s var(--ease-standard); }
.nav__back:hover svg{ transform:translateX(-3px); }
.nav__cta{ display:inline-flex; align-items:center; gap:.55rem; font-weight:600; font-size:.95rem; padding:.7rem 1.3rem; border-radius:var(--radius-pill); background:var(--ember-cta); color:#fff; transition:background-color .35s, transform .35s var(--ease-standard); box-shadow:0 8px 24px -12px rgba(181,82,27,0.6); }
.nav__cta:hover{ background:var(--ember-cta-h); transform:translateY(-2px); }
.nav__cta svg{ width:15px; height:15px; }
@media (max-width:620px){ .nav__cta{ display:none; } }

/* article shell */
.article{ padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3rem,6vw,6rem); }
.article__head{ max-width:var(--measure); margin-inline:auto; margin-bottom:clamp(1.8rem,4vw,2.8rem); }
.kicker{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; color:var(--moss); margin-bottom:1rem; }
.kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--ember); }
.article h1{ font-size:var(--fs-h1); margin-bottom:1rem; }
.article__dek{ font-family:var(--serif); font-style:italic; font-size:var(--fs-lead); color:var(--on-light-soft); margin-bottom:1.4rem; }
.article__meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; font-size:.88rem; color:var(--on-light-soft); padding-top:1.2rem; border-top:1px solid var(--cream-line); }
.article__meta .m{ display:inline-flex; align-items:center; gap:.4rem; }
.article__meta .m svg{ width:15px; height:15px; color:var(--leaf); }
.article__meta .author{ font-weight:600; color:var(--ink); }
.article__hero{ margin:clamp(1.8rem,4vw,2.6rem) 0 clamp(1.5rem,3vw,2.2rem); border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; box-shadow:0 40px 90px -55px rgba(0,0,0,0.5); }
.article__hero img{ width:100%; height:100%; object-fit:cover; }

/* SEO pack draft box (approval-only; removed on publish) */

/* prose */
.prose{ max-width:var(--measure); margin-inline:auto; }
.prose > * + *{ margin-top:1.35rem; }
.prose h2{ font-size:var(--fs-h2); margin-top:2.6rem; padding-top:.2rem; }
.prose h2::before{ content:""; display:block; width:44px; height:3px; background:var(--leaf); border-radius:3px; margin-bottom:1rem; }
.prose h3{ font-size:var(--fs-h3); margin-top:1.9rem; color:var(--moss); }
.prose p{ color:var(--on-light); }
.prose p:first-of-type{ font-size:1.08em; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose ul,.prose ol{ margin-left:0; padding-left:1.3rem; display:flex; flex-direction:column; gap:.55rem; }
.prose li{ padding-left:.2rem; }
.prose li::marker{ color:var(--leaf); }
.prose blockquote{ margin:2rem 0; padding:1.4rem 1.6rem; background:var(--sand); border-left:4px solid var(--leaf); border-radius:0 var(--radius) var(--radius) 0; font-family:var(--serif); font-style:italic; font-size:1.15em; color:var(--earth); }
.prose a{ color:var(--moss); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(45,90,39,0.35); }

/* related / cross-links */
.related{ max-width:var(--maxw); margin:clamp(3rem,6vw,5rem) auto 0; padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--cream-line); }
.related__kicker{ font-weight:700; font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; color:var(--moss); margin-bottom:1.4rem; }
.related__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(1.2rem,3vw,2rem); }
.rcard{ position:relative; display:flex; flex-direction:column; height:100%; }
.rcard__thumb{ aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; margin-bottom:1rem; box-shadow:0 20px 50px -35px rgba(0,0,0,0.4); }
.rcard__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-emphasized); }
.rcard:hover .rcard__thumb img{ transform:scale(1.05); }
.rcard__tag{ font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--moss); font-weight:700; margin-bottom:.4rem; }
.rcard h3{ font-size:1.3rem; margin-bottom:.4rem; }
.rcard p{ font-size:.95rem; color:var(--on-light-soft); }
.rcard__more{ margin-top:auto; padding-top:.7rem; display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.92rem; color:var(--moss); }
.rcard__more svg{ width:16px; height:16px; transition:transform .35s var(--ease-standard); }
.rcard:hover .rcard__more svg{ transform:translateX(4px); }
.rcard__link::after{ content:""; position:absolute; inset:0; }

/* back-to-site CTA band */
.backband{ margin-top:clamp(3rem,6vw,5rem); background:var(--earth); color:var(--on-dark); border-radius:var(--radius-lg); padding:clamp(2rem,4vw,3rem); text-align:center; }
.backband h2{ color:var(--on-dark); font-size:var(--fs-h2); margin-bottom:.7rem; }
.backband h2 em{ font-style:italic; color:var(--accent); }
.backband p{ color:var(--on-dark-soft); max-width:46ch; margin:0 auto 1.5rem; }
.backband .btn{ display:inline-flex; align-items:center; gap:.6rem; font-weight:600; padding:.9rem 1.7rem; border-radius:var(--radius-pill); background:var(--ember-cta); color:#fff; transition:background-color .35s, transform .35s var(--ease-standard); }
.backband .btn:hover{ background:var(--ember-cta-h); transform:translateY(-2px); }
.backband .btn svg{ width:16px; height:16px; }

/* footer */
.footer{ background:var(--char); color:var(--on-dark-soft); padding-block:3rem 2rem; margin-top:clamp(3rem,6vw,5rem); }
.footer__row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:center; }
.footer__row .brand img{ filter:brightness(0) invert(1); opacity:.9; }
.footer a{ color:var(--accent); }
.footer small{ color:rgba(242,239,230,0.5); font-size:.85rem; }
.footer small .credit{ display:block; margin-top:.35rem; font-size:.62rem; font-weight:500; letter-spacing:.16em; color:rgba(242,239,230,0.4); }

/* reveal */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity var(--dur-5) var(--ease-enter), transform var(--dur-5) var(--ease-enter); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none; } }