/* ============================================================
   TerraFirma — shared blog styles
   Tokens/header/footer mirror the main site; blog-specific styles below.
   ============================================================ */
:root{--measure:720px;}
/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}
/* ---------- Fixed photographic backdrop ----------
   Present on the blog index only (the element is not emitted on article pages,
   where a textured ground behind long body copy hurts reading). Absent at the
   top, rises and fades in across the hero, then holds. */
/* On a phone the natural 588:322 box is only ~215px tall — too slight to
   register. Switch to a cover-filled band so the backdrop still reads. */
@media(max-width:760px){
  .site-bg{aspect-ratio:auto;height:64vh;background-size:cover;background-position:center 28%;}
}
/* ---------- Header ---------- */
nav.links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;}
@media(max-width:1500px){.phone{display:none;}}
@media(max-width:960px){nav.links,.phone{display:none;}}
/* ---------- Mobile menu ---------- */
@media(max-width:960px){.menu-btn{display:flex;}}
@media(max-width:560px){.brand .logo-long{height:36px;}.nav-cta .btn{display:none;}.nav-cta{gap:10px;}body{overflow-x:hidden;}}
/* ---------- Shared bits ---------- */
.kicker.center{justify-content:center;}
.kicker.center::before{display:none;}
.gold-line{color:var(--gold-deep);}
/* Scroll progress bar — same as index.html */
@media (prefers-reduced-motion: reduce){#scroll-progress{display:none;}}
/* ============================================================
   BLOG INDEX
   ============================================================ */
/* Hero — copied verbatim from index.html so the wavy topo bands and their
   scroll parallax/fade behave identically to the main page. */
.hero{
  position:relative;overflow:hidden;
  padding:calc(120px + 8vh) 0 96px;
  /* Match the main hero's height so the topo box (and its bands) render identically.
     Padding is shared with index.html; this min-height supplies the inner-content height
     the blog hero lacks (no button row), keeping the wavy bands in the same place. */
  min-height:calc(690px + 8vh);
  background:linear-gradient(175deg,var(--stone) 0%,var(--ivory) 78%);
}
.hero .topo{
  position:absolute;inset:-10% -5% -45% -5%;z-index:0;opacity:.5;pointer-events:none;
  will-change:transform,opacity;
}
.hero-inner{position:relative;z-index:1;max-width:840px;}
.hero .kicker{margin-bottom:28px;}
.hero h1{font-family:var(--serif);font-weight:340;font-size:clamp(42px,6.4vw,78px);
  line-height:1.06;letter-spacing:-.015em;margin-bottom:30px;}
.hero h1 em{font-style:italic;font-weight:400;color:var(--green);}
.hero .lede{font-size:clamp(17px,1.6vw,20px);color:var(--ink-soft);max-width:560px;
  line-height:1.7;margin-bottom:0;}
.post-list{padding:56px 0 96px;}
.post-row{display:grid;grid-template-columns:150px 1fr;gap:clamp(20px,4vw,56px);
  padding:38px 0;border-top:1px solid var(--line);align-items:baseline;}
.post-list .post-row:last-child{border-bottom:1px solid var(--line);}
.post-row .r-date{font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);
  font-weight:500;padding-top:6px;}
.post-row h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.7vw,32px);line-height:1.2;
  letter-spacing:-.01em;color:var(--green);transition:color .3s var(--ease);}
.post-row a:hover h2{color:var(--gold-deep);}
.post-row .r-excerpt{color:var(--ink-soft);margin-top:12px;max-width:62ch;}
.post-row .r-more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;
  font-weight:500;color:var(--gold-deep);letter-spacing:.02em;}
.post-row .r-more::after{content:"\2192";transition:transform .3s var(--ease);}
.post-row a:hover .r-more::after{transform:translateX(4px);}
@media(max-width:640px){.post-row{grid-template-columns:1fr;gap:8px;}.post-row .r-date{padding-top:0;}}
/* ============================================================
   ARTICLE (single post)
   ============================================================ */
.article-head{padding:calc(120px + 6vh) 0 0;background:linear-gradient(175deg,var(--stone) 0%,var(--ivory) 92%);}
.article-head .wrap{max-width:var(--measure);}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink-mute);
  margin-bottom:28px;transition:color .3s var(--ease);}
.back-link::before{content:"\2190";transition:transform .3s var(--ease);}
.back-link:hover{color:var(--gold-deep);}
.back-link:hover::before{transform:translateX(-4px);}
.article-meta{font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);
  font-weight:500;margin-bottom:18px;}
.article-meta .dot{margin:0 10px;color:var(--gold);}
.article-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.4vw,52px);line-height:1.12;
  letter-spacing:-.015em;}
.article-head h1 em{font-style:italic;color:var(--gold-deep);}
.article-head .lede{color:var(--ink-soft);font-size:19px;line-height:1.6;margin-top:24px;}
.article-rule{max-width:var(--measure);margin:44px auto 0;height:1px;background:var(--line);}
.article{padding:48px 0 72px;}
.article .wrap{max-width:var(--measure);}
.article p,.article ul,.article ol{margin:0 0 24px;color:var(--ink);font-size:18px;line-height:1.72;}
.article ul,.article ol{padding-left:24px;}
.article li{margin-bottom:10px;}
.article li::marker{color:var(--gold-deep);}
.article h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,34px);line-height:1.2;
  letter-spacing:-.01em;margin:48px 0 18px;}
.article h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:36px 0 14px;}
.article strong{font-weight:600;}
.article em{font-style:italic;}
.article a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.article a:hover{color:var(--green);}
.article blockquote{border-left:2px solid var(--gold);padding:6px 0 6px 26px;margin:32px 0;
  font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.5;color:var(--ink-soft);}
.article figure{margin:36px 0;}
.article figure img{width:100%;border:1px solid var(--line);border-radius:3px;}
.article figcaption{font-size:14px;color:var(--ink-mute);margin-top:12px;text-align:center;font-style:italic;}
.article .table-scroll{overflow-x:auto;margin:32px 0;}
.article table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:440px;}
.article th,.article td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line);}
.article thead th{font-weight:600;color:var(--green-deep);border-bottom:2px solid var(--gold);
  font-size:13.5px;letter-spacing:.02em;}
.article tbody td:not(:first-child){font-variant-numeric:tabular-nums;}
.article tbody tr:last-child td{border-bottom:1px solid var(--line);}
/* Post-footer CTA */
.post-cta{border-top:1px solid var(--line);margin-top:8px;padding:44px 0 8px;}
.post-cta p{color:var(--ink-soft);margin-bottom:22px;font-size:18px;}
.post-nav{display:flex;justify-content:space-between;gap:20px;padding:40px 0 0;font-size:15px;}
.post-nav a{color:var(--gold-deep);font-weight:500;}
.post-disc{max-width:var(--measure);margin:0 auto;padding:32px clamp(20px,4vw,48px) 0;}
.post-disc p{font-size:12.5px;line-height:1.6;color:var(--ink-mute);}
/* ============================================================
   GREEN CTA BAND — mirrors the main site, anchors green on every page
   ============================================================ */
.cta-band{background:linear-gradient(165deg,var(--green) 0%,var(--green-deep) 100%);
  text-align:center;color:var(--ivory);padding:clamp(64px,9vw,104px) 0;}
.cta-band .kicker{justify-content:center;color:var(--gold-soft);margin-bottom:22px;}
.cta-band .kicker::before{display:none;}
.cta-band h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.15;
  letter-spacing:-.01em;max-width:16ch;margin:0 auto 20px;color:var(--ivory);text-wrap:balance;}
.cta-band h2 em{font-style:italic;color:var(--gold-soft);}
.cta-band p{color:rgba(253,252,250,.78);max-width:52ch;margin:0 auto 40px;font-size:17.5px;}
.cta-band .btn-gold{background:var(--gold-deep);color:var(--ivory);}
.cta-band .btn-gold:hover{background:var(--ivory);color:var(--ink);}
.cta-band .cta-note{margin-top:26px;font-size:13.5px;color:rgba(253,252,250,.6);}
.cta-band .cta-note a{color:var(--gold-soft);}
/* ---------- Footer ---------- */
.foot-legal-top a{color:rgba(250,248,244,.72);}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px;}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr;}}